/* ============================================================
   THEME-LIGHT.CSS — Diill · Surcharges light pour index.html
   S'applique UNIQUEMENT sur index.html (app utilisateur).
   base.css définit les composants en mode dark (split-band).
   Ce fichier les re-surcharge en light sans toucher au reste.
   Chargé après : tokens.css → base.css → components.css → demandes.css
   ============================================================ */

/* ============================================================
   1. BANDE HERO — light dans l'app (override du dark par défaut)
   ============================================================ */
.resume {
  background: var(--color-bg-page) !important;
  border-bottom: 1px solid var(--color-border-faint);
}
.total-card {
  background: var(--color-bg-card) !important;
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  margin: var(--space-4) auto !important;
  max-width: 648px;
  padding: var(--space-5) !important;
  box-shadow: var(--shadow-sm);
}
.total-label   { color: var(--color-text-faint) !important; }
.total-montant { color: var(--color-text-primary) !important; }
.total-annuel  { color: var(--color-text-faint) !important; }
.sp-score-pill { background: var(--color-success-dim) !important; border-color: rgba(0,200,150,.2) !important; }
.sp-score-label { color: var(--color-brand) !important; }

/* ============================================================
   2. SHEETS — light dans l'app
   ============================================================ */
.sheet-container {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border-default) !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,.08) !important;
}
.sheet-handle-bar { background: var(--color-border-strong) !important; }
.sheet-nom        { color: var(--color-text-primary) !important; }
.sheet-header     { border-bottom-color: var(--color-border-faint) !important; }
.sheet-badge      { background: var(--color-success-dim) !important; color: var(--color-brand-dark) !important; }
.sheet-prix-mois  { color: var(--color-brand) !important; }
.sheet-prix-an    { color: var(--color-text-faint) !important; }

.sheet-close-btn {
  color: var(--color-text-faint) !important;
  background: var(--color-bg-sunken) !important;
  border: 0.5px solid var(--color-border-default) !important;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: 13px;
}
.sheet-close-btn:hover { color: var(--color-text-primary) !important; border-color: var(--color-border-strong) !important; }
.sheet-close-btn--profil {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.sheet-body    { background: var(--color-bg-card) !important; }
.sheet-actions { background: var(--color-bg-card) !important; border-top-color: var(--color-border-faint) !important; }
.sheet-btn-modifier  { background: var(--color-brand) !important; color: #fff !important; }
.sheet-btn-supprimer {
  background: var(--color-danger-dim) !important;
  color: var(--color-danger) !important;
  border-color: rgba(255,92,92,.25) !important;
}
.sheet-btn-supprimer:hover { background: rgba(255,92,92,.18) !important; }
.sheet-tabs  { background: var(--color-bg-card) !important; border-bottom-color: var(--color-border-faint) !important; }
.sheet-tab   { color: var(--color-text-faint) !important; }
.sheet-tab.actif { color: var(--color-brand) !important; border-bottom-color: var(--color-brand) !important; }

/* ── dark-form → light dans l'app ── */
.dark-form label { color: var(--color-text-secondary) !important; }
.dark-form input, .dark-form select, .dark-form textarea {
  background: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-primary) !important;
}
.dark-form input::placeholder, .dark-form textarea::placeholder { color: var(--color-text-faint) !important; }
.dark-form input:focus, .dark-form select:focus, .dark-form textarea:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px var(--color-brand-dim) !important;
}
.dark-form select option { background: var(--color-bg-card) !important; }
.dark-form .champ-edition-cle label { color: var(--color-brand-dark) !important; }
.dark-form .champ-edition-cle input,
.dark-form .champ-edition-cle select { border-color: rgba(0,200,150,.3) !important; }

.edit-section-titre { color: var(--color-brand-dark) !important; border-bottom-color: var(--color-success-dim) !important; }
.edit-badge-cle     { background: var(--color-success-dim) !important; color: var(--color-brand-dark) !important; }
.champ-suffix { color: var(--color-text-faint) !important; }
.consult-section-titre { color: var(--color-text-faint) !important; }
.consult-champ         { background: var(--color-bg-sunken) !important; }
.consult-champ-cle     { background: var(--color-success-dim) !important; }
.consult-champ-label   { color: var(--color-text-faint) !important; }
.consult-champ-val     { color: var(--color-text-primary) !important; }
.reneg-intro { color: var(--color-text-muted) !important; }
.motif-item  { border-color: var(--color-border-default) !important; background: var(--color-bg-card) !important; }
.motif-item:hover { background: var(--color-bg-sunken) !important; border-color: var(--color-border-strong) !important; }
.motif-item.sel   { border-color: var(--color-brand-dark) !important; background: var(--color-success-dim) !important; }
.motif-label { color: var(--color-text-primary) !important; }
.motif-sous  { color: var(--color-text-faint) !important; }
.motif-check { border-color: var(--color-border-strong) !important; }
.motif-item.sel .motif-check { background: var(--color-brand-dark) !important; border-color: var(--color-brand-dark) !important; }

/* ============================================================
   3. GATE — light dans l'app
   ============================================================ */
.gate-overlay   { background: var(--color-bg-overlay) !important; }
.gate-container { background: var(--color-bg-card) !important; border-color: var(--color-border-default) !important; }
.gate-titre     { color: var(--color-text-primary) !important; }
.gate-desc      { color: var(--color-text-muted) !important; }
.gate-label     { color: var(--color-text-secondary) !important; }
.gate-progress-bg     { background: var(--color-bg-sunken) !important; }
.gate-progress-header { color: var(--color-text-faint) !important; }
.gate-note      { color: var(--color-text-faint) !important; }
.gate-input {
  background: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-primary) !important;
}
.gate-input:focus { border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px var(--color-brand-dim) !important; }
.gate-input option { background: var(--color-bg-card) !important; }
.gate-btn-confirmer { background: var(--color-brand) !important; color: #fff !important; }
.gate-btn-annuler   { background: var(--color-bg-sunken) !important; color: var(--color-text-muted) !important; border-color: var(--color-border-default) !important; }
.gate-btn-annuler:hover { background: var(--color-bg-card) !important; color: var(--color-text-primary) !important; border-color: var(--color-border-strong) !important; }

/* ============================================================
   4. PROFIL hero — light dans l'app
   ============================================================ */
.profil-hero { background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-darker)) !important; }
.profil-tabs { background: var(--color-bg-card) !important; border-bottom-color: var(--color-border-faint) !important; }
.profil-tab            { color: var(--color-text-muted) !important; }
.profil-tab:hover      { color: var(--color-brand) !important; }
.profil-tab.actif      { color: var(--color-brand) !important; border-bottom-color: var(--color-brand) !important; }
.profil-bandeau-courtier {
  background: var(--color-warning-dim) !important;
  border-bottom-color: rgba(245,166,35,.2) !important;
  color: var(--color-warning) !important;
}

/* ============================================================
   5. DEMANDES — light overrides
   ============================================================ */
/* carte-demande-* définis dans demandes.css — pas de doublon ici */

.statut-en_attente  { background: var(--color-warning-dim) !important; color: var(--color-warning-dark) !important; }
.statut-offre_recue { background: var(--color-info-dim) !important;    color: var(--color-info-dark) !important; }
.statut-in_progress { background: var(--color-warning-dim) !important; color: var(--color-warning-dark) !important; }
.statut-acceptee    { background: var(--color-success-dim) !important; color: var(--color-brand-darker) !important; }
.statut-refusee     { background: var(--color-bg-sunken) !important;   color: var(--color-text-faint) !important; }

/* Offres */
.offres-section { border-top: 0.5px solid var(--color-border-faint) !important; }
.offre-item:hover    { background: var(--color-bg-sunken) !important; }
.offre-item.selected { background: var(--color-success-dim) !important; }
.offre-radio { border-color: var(--color-border-strong) !important; }
.offre-item.selected .offre-radio { border-color: var(--color-brand-dark) !important; background: var(--color-brand-dark) !important; }
.offre-prix { color: var(--color-brand) !important; }
.offre-economie {
  color: var(--color-brand) !important;
  background: var(--color-success-dim) !important;
}

/* Bilan / chat */
.bilan-card  { background: var(--color-success-dim) !important; }
.bilan-avant, .bilan-apres { background: var(--color-bg-card) !important; }
.bilan-economies { background: var(--color-bg-card) !important; }
.chat-section { border-top: 0.5px solid var(--color-border-faint) !important; }
.chat-header  { background: var(--color-success-dim) !important; }
.chat-msg-courtier { background: var(--color-bg-sunken) !important; color: var(--color-text-primary) !important; }
.chat-msg-user     { background: var(--color-brand-dark) !important; color: #fff !important; }

/* Stats bandeau */
.stats-bandeau      { background: var(--color-success-dim) !important; }
.stats-metric       { background: var(--color-bg-card) !important; }
.stats-metric-val   { color: var(--color-brand) !important; }

/* ── CMP comparateur offres — light overrides ── */
.cmp-top-card           { background: var(--color-bg-sunken) !important; border-color: var(--color-border-default) !important; }
.cmp-top-card--offre    { background: rgba(0,200,150,.06) !important; border-color: var(--color-brand-dark) !important; }
.cmp-top-card--best     { border-color: var(--color-brand-dark) !important; background: var(--color-bg-card) !important; }
.cmp-top-card--offre.selected { background: rgba(0,200,150,.06) !important; border-color: var(--color-brand-dark) !important; }
.cmp-top-card-nom       { color: var(--color-text-primary) !important; }
.cmp-top-card-sub       { color: var(--color-text-faint) !important; }
/* Prix + unité inline — .cmp-top-card-prix-row contient les deux */
.cmp-top-card-prix-row  { display: flex !important; align-items: baseline !important; gap: 4px !important; margin: var(--space-2) 0 !important; }
.cmp-top-card-prix      { font-size: var(--text-2xl) !important; font-weight: var(--fw-bold) !important; color: var(--color-text-primary) !important; line-height: 1 !important; }
.cmp-top-card-prix--green { color: var(--color-brand-dark) !important; }
.cmp-top-card-prix-unit { font-size: var(--text-xs) !important; color: var(--color-text-faint) !important; }
.cmp-top-card-eco       { color: var(--color-brand-darker) !important; background: var(--color-success-dim) !important; border: 0.5px solid rgba(0,200,150,.25) !important; border-radius: var(--radius-md) !important; padding: var(--space-1) var(--space-2) !important; font-size: var(--text-xs) !important; font-weight: var(--fw-bold) !important; display: inline-block !important; margin-top: var(--space-1) !important; }
.cmp-top-card-cta--ref  { background: var(--color-bg-card) !important; color: var(--color-text-faint) !important; border-color: var(--color-border-default) !important; }
.cmp-top-card-validite  { font-size: var(--text-xs) !important; color: var(--color-text-faint) !important; margin-top: var(--space-1) !important; }
.cmp-top-card-badge--ref  { background: var(--color-bg-sunken) !important; color: var(--color-text-faint) !important; }
.cmp-top-card-badge--best { background: var(--color-brand-dark) !important; color: #fff !important; }
.cmp-detail-bloc        { background: var(--color-bg-sunken) !important; border-color: var(--color-border-faint) !important; }
.cmp-detail-titre       { color: var(--color-text-primary) !important; }
.cmp-bar-lbl            { color: var(--color-text-faint) !important; }
/* Barres chevauchantes — stack vertical */
.cmp-bar-stack          { display: flex !important; flex-direction: column !important; gap: 3px !important; width: 100% !important; }
.cmp-bar-track          { flex: 1 !important; min-width: 0 !important; display: block !important; height: 5px !important; background: var(--color-border-faint) !important; border-radius: var(--radius-full) !important; overflow: hidden !important; }
.cmp-bar-fill--ref      { background: rgba(0,0,0,.18) !important; }
.cmp-bar-fill--offre    { background: var(--color-info) !important; }
.cmp-bar-fill--best     { background: var(--color-brand-dark) !important; }
/* Approche B — ligne dot */
.cmp-bar-line-b         { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; }
.cmp-dot--ref           { background: var(--color-border-strong) !important; }
.cmp-dot--best          { background: var(--color-brand-dark) !important; }
.cmp-bar-val            { color: var(--color-text-primary) !important; font-size: var(--text-xs) !important; font-weight: var(--fw-semibold) !important; white-space: nowrap !important; }
.cmp-bar-val--ref       { color: var(--color-text-faint) !important; font-weight: var(--fw-regular) !important; }
.cmp-bar-val--green     { color: var(--color-brand-dark) !important; font-weight: var(--fw-bold) !important; }
.cmp-msg                { background: var(--color-bg-card) !important; color: var(--color-text-muted) !important; }
.cmp-pill               { background: var(--color-bg-card) !important; border-color: var(--color-border-default) !important; color: var(--color-text-muted) !important; }
.cmp-pill--active       { background: var(--color-success-dim) !important; border-color: var(--color-brand-dark) !important; color: var(--color-brand-dark) !important; }