/* ═══════════════════════════════════════════════════════════════════
   THEME UNIFIÉ — RestauVert v41 (Expert Edition)
   Architecture par surfaces sémantiques + tokens contextuels
   Auteur : refonte propre des 40 itérations précédentes
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   LAYER 1 — TOKENS GLOBAUX
   ──────────────────────────────────────────────────────────────── */
:root{
  /* Brand palette (universelle) */
  --rv-green-900:   #0A2615;     /* deep / hero */
  --rv-green-800:   #0F3320;     /* sections sombres */
  --rv-green-700:   #143A23;     /* dark variant */
  --rv-green-600:   #1a4e30;     /* primary green */
  --rv-green-500:   #2D7A52;     /* mid green */
  --rv-green-400:   #4CAF50;     /* accent green */

  --rv-cream-50:    #fffdf8;     /* page bg light */
  --rv-cream-100:   #F7FAF8;     /* alt bg light */
  --rv-cream-yellow:#FFF8E0;     /* warm cream (engagement banner) */

  --rv-gold-700:    #6B5217;     /* gold dark (text on cream) */
  --rv-gold-600:    #8B6F1F;     /* gold accent */
  --rv-gold-500:    #c9a24e;     /* gold primary */
  --rv-gold-400:    #d4a843;     /* gold soft */
  --rv-gold-300:    #E0B964;     /* gold bright low */
  --rv-gold-200:    #fde047;     /* gold bright (dark mode) */

  --rv-text-900:    #18291E;     /* darkest text */
  --rv-text-800:    #2E3F36;     /* body */
  --rv-text-600:    #3D5449;     /* secondary */
  --rv-text-500:    #5A6B62;     /* muted */

  /* Tokens contextuels (light par défaut) */
  --bg-page:        var(--rv-cream-50);
  --bg-alt:         var(--rv-cream-100);
  --bg-card:        #ffffff;
  --bg-elevated:    #ffffff;
  --bg-brand:       var(--rv-green-600);          /* sections sombres */
  --bg-brand-deep:  var(--rv-green-900);
  --bg-banner:      var(--rv-cream-yellow);

  --text-strong:    var(--rv-text-900);
  --text-body:      var(--rv-text-800);
  --text-mute:      var(--rv-text-500);
  --text-on-brand:  var(--rv-cream-50);            /* texte sur fonds sombres */
  --text-on-brand-mute: rgba(255,253,248,0.85);

  --accent:         var(--rv-gold-600);            /* lien, accent */
  --accent-strong:  var(--rv-gold-700);            /* hover/active */
  --accent-on-brand:var(--rv-gold-200);            /* accent sur fond sombre */

  --border:         #D4E8DB;
  --border-soft:    rgba(212,168,67,0.25);
  --border-strong:  rgba(212,168,67,0.45);
}

/* ────────────────────────────────────────────────────────────────
   LAYER 2 — TOKENS DARK MODE
   Inverse les tokens contextuels pour le thème nuit
   ──────────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --bg-page:        #0A1F14;
  --bg-alt:         #0F2A1C;
  --bg-card:        #143524;
  --bg-elevated:    #1A4030;
  --bg-brand:       #0F2A1C;
  --bg-brand-deep:  #0A1F14;
  --bg-banner:      #2A2210;

  --text-strong:    #fffdf8;
  --text-body:      #F5F2EA;
  --text-mute:      #C7D2C9;
  --text-on-brand:  #fffdf8;
  --text-on-brand-mute: rgba(245,242,234,0.85);

  --accent:         var(--rv-gold-200);
  --accent-strong:  #FFE873;
  --accent-on-brand:var(--rv-gold-200);

  --border:         rgba(253,224,71,0.18);
  --border-soft:    rgba(253,224,71,0.22);
  --border-strong:  rgba(253,224,71,0.35);

  color-scheme: dark;
}

/* ────────────────────────────────────────────────────────────────
   LAYER 3 — APPLICATION GLOBALE
   ──────────────────────────────────────────────────────────────── */

/* Body */
body{
  background-color: var(--bg-page);
  color: var(--text-body);
}

/* Liens */
:where(a):not(.btn):not(.nav-cta):not(.btn-cta-gold){
  color: var(--accent);
  text-decoration-color: var(--accent);
}
:where(a):not(.btn):hover{ color: var(--accent-strong); }

/* Headings dans flux normal */
:where(h1, h2, h3, h4, h5, h6){
  color: var(--text-strong);
}

/* Paragraphes / listes / cellules table */
:where(p, li, dd, td){
  color: var(--text-body);
}

/* Abbreviations */
:where(abbr, .rv-abbr){
  color: var(--accent);
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 3px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  background: transparent;
}

/* ────────────────────────────────────────────────────────────────
   LAYER 4 — SURFACES TYPÉES
   Chaque "surface" applique son fond + ses textes correspondants
   ──────────────────────────────────────────────────────────────── */

/* SURFACE BRAND (sections sombres : hero, banner, footer, rv-stats-band) */
:where(.hero, section.hero,
       .page-hero, .article-hero, .rv-clean-hero,
       .cta-banner, .cta-banner-mesh,
       .rv-stats-band, .rv-marquee,
       footer,
       .bg-dark, .section.bg-dark){
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
}
:where(.hero, .page-hero, .cta-banner, .rv-stats-band, footer)
  :where(h1, h2, h3, h4){
  color: var(--text-on-brand);
}
:where(.hero, .page-hero, .cta-banner, .rv-stats-band, footer)
  :where(p, li, .section-sub){
  color: var(--text-on-brand-mute);
}
:where(.hero, .page-hero, .cta-banner, .rv-stats-band, footer)
  :where(abbr, .rv-abbr){
  color: var(--accent-on-brand);
  text-decoration-color: var(--accent-on-brand);
}
:where(.hero, .rv-stats-band, .cta-banner, footer) :where(.section-tag, .eyebrow){
  background: rgba(212,168,67,0.18);
  color: var(--accent-on-brand);
}

/* SURFACE LIGHT (sections claires : bg-off, bg-light) */
/* Restent claires DANS LES 2 MODES (design intentionnel) */
:where(section.bg-off, section.bg-light,
       .section.bg-off, .section.bg-light){
  background-color: var(--rv-cream-100) !important;
  color: var(--rv-text-800) !important;
}
:where(section.bg-off, section.bg-light)
  :where(h1, h2, h3, h4){
  color: var(--rv-green-600) !important;
}
:where(section.bg-off, section.bg-light)
  :where(p, li, dd){
  color: var(--rv-text-800) !important;
}
:where(section.bg-off, section.bg-light)
  :where(.section-sub){
  color: var(--rv-text-500) !important;
}
:where(section.bg-off, section.bg-light)
  :where(abbr, .rv-abbr){
  color: var(--rv-gold-700) !important;
  text-decoration-color: var(--rv-gold-600);
}
:where(section.bg-off, section.bg-light)
  :where(.section-tag, .eyebrow){
  background: rgba(212,168,67,0.20);
  color: var(--rv-gold-700) !important;
}

/* SURFACE CARD */
:where(.card, article.card, [class*="-card"]:not([class*="-card-"]):not(.btn)){
  background-color: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border-soft);
}
:where(.card, [class*="-card"]) :where(h1, h2, h3, h4){ color: var(--text-strong); }
:where(.card, [class*="-card"]) :where(p){ color: var(--text-body); }

/* Cards dans sections claires → cards blanches dans les 2 modes */
:where(section.bg-off, section.bg-light) :where(.card, [class*="-card"]){
  background-color: #ffffff !important;
  color: var(--rv-text-800);
  border-color: rgba(212,168,67,0.22) !important;
}
:where(section.bg-off, section.bg-light) :where(.card, [class*="-card"])
  :where(h1, h2, h3, h4){ color: var(--rv-green-600) !important; }
:where(section.bg-off, section.bg-light) :where(.card, [class*="-card"])
  :where(p){ color: var(--rv-text-800) !important; }

/* Sous-éléments de card : pas de fond/bordure parasite */
:where([class*="-card-num"], [class*="-card-title"],
       [class*="-card-desc"], [class*="-card-icon"],
       [class*="-card-eyebrow"], [class*="-card-tag"]){
  background: transparent !important;
  border: 0 !important;
}

/* Stat-card num : couleur or solide (pas de gradient-text qui échoue) */
:where(.rv-stat-card-num, [class*="-card-num"]){
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* SURFACE CARTOGRAPHIE (toujours sombre par design) */
:where(.rv-explore-card, .rv-explore-card-alt){
  background: linear-gradient(135deg, var(--rv-green-800), var(--rv-green-600));
  color: var(--rv-cream-50);
}
:where(.rv-explore-card-alt){
  background: linear-gradient(135deg, var(--rv-green-600), var(--rv-green-500));
}
:where(.rv-explore-card, .rv-explore-card-alt) :where(h1, h2, h3, h4){
  color: var(--rv-cream-50);
}
:where(.rv-explore-card, .rv-explore-card-alt) :where(p){
  color: rgba(255,253,248,0.85);
}
:where(.rv-explore-card, .rv-explore-card-alt) :where(.rv-explore-tag, .rv-explore-cta){
  color: var(--rv-gold-200);
  background: rgba(253,224,71,0.15);
  border-color: rgba(253,224,71,0.4);
}

/* SURFACE BANNER (bandeau "Notre engagement de marque") */
:where([style*="#FFF8E0"], [style*="#FAF3E0"]){
  background: linear-gradient(135deg, var(--rv-cream-yellow), #FAF3E0) !important;
  border-left: 4px solid var(--rv-gold-500) !important;
}
:where([style*="#FFF8E0"], [style*="#FAF3E0"]) :where(p){
  color: #3D2F0E !important;
}
:where([style*="#FFF8E0"], [style*="#FAF3E0"]) :where(strong){
  color: #6B5217 !important;
}

/* ────────────────────────────────────────────────────────────────
   LAYER 5 — NAVIGATION
   ──────────────────────────────────────────────────────────────── */
nav, header.navbar{
  background: var(--bg-brand);
}
:where(.nav-links a):not(.nav-cta):not(.btn){
  color: var(--text-on-brand);
}
:where(.nav-links a):not(.nav-cta):hover{
  color: var(--accent-on-brand);
}

/* Dropdown (toujours panneau cream/sombre selon mode) */
.nav-dropdown{
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-dropdown::before{
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
.nav-dropdown a{
  color: var(--text-strong) !important;
  font-weight: 600 !important;
}
.nav-dropdown a:hover{
  color: var(--accent) !important;
  background: rgba(212,168,67,0.12);
}
.nav-dropdown a > i,
.nav-dropdown a > svg{
  color: var(--accent) !important;
}

/* CTA Diagnostic offert (toujours doré, contraste élevé) */
:where(.nav-cta, .btn-cta-gold, .btn-primary-hero){
  background: linear-gradient(135deg, var(--rv-gold-400), var(--rv-gold-500)) !important;
  color: var(--rv-green-900) !important;
  -webkit-text-fill-color: var(--rv-green-900) !important;
  font-weight: 700 !important;
  border: 0 !important;
}
:root[data-theme="dark"] :where(.nav-cta, .btn-cta-gold, .btn-primary-hero){
  background: linear-gradient(135deg, var(--rv-gold-200), var(--rv-gold-300)) !important;
  color: var(--rv-green-900) !important;
}

/* ────────────────────────────────────────────────────────────────
   LAYER 6 — FORMULAIRES + TABLES + BOUTONS
   ──────────────────────────────────────────────────────────────── */
:where(input, select, textarea):not([type="submit"]):not([type="button"]){
  background: var(--bg-card);
  color: var(--text-strong);
  border: 1px solid var(--border-soft);
}
:where(input, textarea)::placeholder{ color: var(--text-mute); }
:where(input, select, textarea):focus{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

table{
  background: var(--bg-card);
  color: var(--text-body);
}
th{
  background: var(--bg-elevated);
  color: var(--text-strong);
}
td{ border-color: var(--border-soft); color: var(--text-body); }
:root[data-theme="dark"] tr:nth-child(even) td{ background: rgba(255,255,255,0.02); }

/* Tableau comparatif "Quel format" */
table.rv-compare-table th{
  background: var(--rv-green-800);
  color: var(--rv-cream-50);
}
table.rv-compare-table th.featured{
  background: linear-gradient(135deg, var(--rv-gold-500), var(--rv-gold-400));
  color: var(--rv-green-900);
}
table.rv-compare-table td.label{
  background: var(--bg-alt);
  color: var(--rv-green-600);
  font-weight: 700;
  text-transform: uppercase;
}
:root[data-theme="dark"] table.rv-compare-table td.label{
  background: var(--bg-elevated);
  color: var(--accent);
}
table.rv-compare-table td.featured-col{
  background: rgba(212,168,67,0.08);
  font-weight: 500;
}
:root[data-theme="dark"] table.rv-compare-table td.featured-col{
  background: rgba(253,224,71,0.10);
}

/* ────────────────────────────────────────────────────────────────
   LAYER 7 — INLINE STYLES override conditionnel
   ──────────────────────────────────────────────────────────────── */

/* En dark mode : les inline backgrounds blancs passent sombre */
:root[data-theme="dark"] :where([style*="background:#fff"],
                                  [style*="background:#FFF"],
                                  [style*="background:white"]){
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
}
/* Mais PAS dans les sections claires qui restent claires */
:root[data-theme="dark"] :where(section.bg-off, section.bg-light)
  [style*="background:#fff"]{
  background: #ffffff !important;
}

/* En dark mode : les inline colors foncés passent en cream
   SAUF dans les sections qui restent claires */
:root[data-theme="dark"] :where([style*="color:#1a4e30"],
                                  [style*="color:#18291E"],
                                  [style*="color:#2E3F36"],
                                  [style*="color:#3D5449"]){
  color: var(--text-strong) !important;
  -webkit-text-fill-color: var(--text-strong) !important;
}
:root[data-theme="dark"] :where(section.bg-off, section.bg-light)
  :where([style*="color:#1a4e30"], [style*="color:#18291E"]){
  color: var(--rv-green-600) !important;
  -webkit-text-fill-color: var(--rv-green-600) !important;
}
:root[data-theme="dark"] :where(section.bg-off, section.bg-light)
  :where([style*="color:#3D5449"], [style*="color:#2E3F36"]){
  color: var(--rv-text-800) !important;
  -webkit-text-fill-color: var(--rv-text-800) !important;
}

/* ────────────────────────────────────────────────────────────────
   LAYER 8 — ACCESSIBILITÉ
   ──────────────────────────────────────────────────────────────── */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}