/**
 * lms.css — Design system partagé · Formation Artères Libres
 * Inclure dans chaque module :
 *   <link rel="stylesheet" href="lms.css">
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --navy:       #0B1628;
  --navy-light: #111D30;
  --navy-mid:   #162440;
  --teal:       #2DD4A8;
  --teal-dim:   rgba(45,212,168,0.10);
  --teal-glow:  rgba(45,212,168,0.35);
  --gold:       #F0C27A;
  --gold-dim:   rgba(240,194,122,0.08);
  --coral:      #FF6B6B;
  --coral-dim:  rgba(255,107,107,0.08);
  --green:      #4ADE80;
  --green-dim:  rgba(74,222,128,0.08);
  --text:       #E2E8F0;
  --text-bright:#F5F7FA;
  --text-dim:   #96A8BE;
  --text-muted: #647D96;
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Source Sans 3', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', monospace;
  --zoom:  1;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

/* SVG responsive — prevent intrinsic overflow */
svg { max-width: 100%; height: auto; }

/* SVG chart wrapper — use instead of padding on <svg> directly */
.svg-wrap { background: var(--navy-light); border-radius: 12px; overflow: hidden; }
.svg-wrap svg { width: 100%; display: block; }

/* ── Focus visible — navigation clavier/tablette ───────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Body + bruit de fond ──────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  background: var(--navy);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ── Barre top ─────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 12%, transparent);
}
.topbar-brand {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); font-weight: 600;
}
.topbar-module { font-size: 10px; color: var(--text-dim); margin-left: 12px; }

/* ── Barre de progression lecture ─────────────────────────────────────────── */
.progress-global {
  position: fixed; top: 56px; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,0.03); z-index: 201;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  width: 0%; transition: width 0.3s ease;
}

/* ── Navigation latérale par chapitres ─────────────────────────────────────── */
.chapnav {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 10px;
}
.chapnav a {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--text-muted);
  background: transparent; transition: all 0.25s;
  cursor: pointer; display: block; position: relative;
}
.chapnav a.active {
  background: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 10px var(--teal-glow);
  width: 16px; height: 16px;
}
.chapnav a:hover { border-color: var(--teal); transform: scale(1.2); }
.chapnav a .tip {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  background: color-mix(in srgb, var(--navy-mid) 97%, transparent); color: var(--text);
  font-size: 13px; padding: 5px 11px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.chapnav a:hover .tip { opacity: 1; }

/* ── Layout principal ──────────────────────────────────────────────────────── */
main { padding-top: 56px; padding-bottom: 80px; }
.chapter { min-height: 100vh; padding: 70px 0 90px; position: relative; }
.chapter-inner { max-width: 780px; margin: 0 auto; padding: 0 36px; }

/* ── En-têtes de chapitre ──────────────────────────────────────────────────── */
.ch-header { text-align: center; padding: 60px 0 40px; position: relative; }
.ch-header .ch-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 4px;
  color: var(--teal); text-transform: uppercase; margin-bottom: 8px; display: block;
}
.ch-header h2 {
  font-family: var(--serif); font-size: clamp(28px,4.5vw,42px);
  font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 12px;
}
.ch-header .ch-sub {
  font-size: 17px; color: var(--text-dim); font-weight: 300;
  max-width: 500px; margin: 0 auto;
}
.ch-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  margin: 24px auto; border-radius: 1px;
}

/* ── Typographie ───────────────────────────────────────────────────────────── */
h3 { font-family: var(--serif); font-size: clamp(26px,3.5vw,34px); color: #fff; margin: 48px 0 18px; line-height: 1.3; }
h4 { font-family: var(--serif); font-size: 23px; color: var(--teal); margin: 32px 0 12px; }
p  { font-size: 21px; line-height: 1.95; margin-bottom: 20px; color: var(--text); font-weight: 300; }
p strong { font-weight: 600; color: var(--text-bright); }
.lead  { font-size: 24px; line-height: 1.95; color: var(--text-bright); font-weight: 300; }
.dim   { color: var(--text-dim); }
.small { font-size: 18px; line-height: 1.75; }
.accent { color: var(--teal); }

/* ── Animation au scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Composants ────────────────────────────────────────────────────────────── */

/* Grand chiffre */
.big-stat { text-align: center; padding: 56px 0 40px; }
.big-stat .number {
  font-family: var(--mono); font-size: clamp(64px,12vw,130px); font-weight: 700;
  background: linear-gradient(135deg, var(--teal), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;
}
.big-stat .label { font-size: 18px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }

/* Citation */
.quote-block {
  border-left: 4px solid var(--gold); padding: 24px 28px; margin: 32px 0;
  background: var(--gold-dim); border-radius: 0 12px 12px 0;
}
.quote-block p { font-family: var(--serif); font-style: italic; font-size: 22px; color: #fff; line-height: 1.75; margin: 0; }
.quote-block .attr { font-family: var(--sans); font-style: normal; font-size: 15px; color: var(--gold); margin-top: 12px; font-weight: 500; }
.quote-blue { border-left-color: var(--teal); background: var(--teal-dim); }
.quote-blue .attr { color: var(--teal); }

/* Encadré info */
.info-box { background: var(--navy-light); border: 1px solid color-mix(in srgb, var(--teal) 10%, transparent); border-radius: 14px; padding: 28px 32px; margin: 32px 0; }
.info-box h4 { margin-top: 0; margin-bottom: 12px; }
.info-box p  { margin-bottom: 8px; }
.info-box p:last-child { margin-bottom: 0; }
.info-box-gold { border-color: color-mix(in srgb, var(--gold) 15%, transparent); }
.info-box-gold h4 { color: var(--gold); }

/* Grille de cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.card { background: var(--navy-light); border: 1px solid color-mix(in srgb, var(--teal) 8%, transparent); border-radius: 12px; padding: 20px; }
.card .emoji { font-size: 28px; margin-bottom: 8px; display: block; }
.card h4 { font-size: 19px; color: #fff; margin: 0 0 8px; font-family: var(--serif); }
.card p  { font-size: 17px; color: var(--text-dim); margin: 0; line-height: 1.65; }
a.card-link { text-decoration: none; color: inherit; display: flex; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
a.card-link .card { flex: 1; margin: 0; }
a.card-link:hover { transform: translateY(-4px); box-shadow: 0 8px 30px color-mix(in srgb, var(--teal) 15%, transparent); }
a.card-link:hover .card { border-color: var(--teal); background: var(--navy-mid); }
a.card-link .card-cta { display: block; margin-top: 10px; font-size: 13px; color: var(--teal); font-weight: 600; opacity: 0; transition: opacity 0.3s; }
a.card-link:hover .card-cta { opacity: 1; }

/* Mythe vs Réalité */
.myth-row { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; margin: 16px 0; }
.myth-l { background: var(--coral-dim); padding: 16px 18px; }
.myth-r { background: var(--teal-dim);  padding: 16px 18px; }
.myth-l .tag, .myth-r .tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.myth-l .tag { color: var(--coral); }
.myth-r .tag { color: var(--teal); }
.myth-l p, .myth-r p { font-size: 18px; margin: 0; line-height: 1.6; }

/* Liste numérotée */
.step-list { list-style: none; counter-reset: s; margin: 20px 0; }
.step-list li { counter-increment: s; position: relative; padding: 20px 0 20px 60px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 20px; line-height: 1.75; }
.step-list li::before {
  content: counter(s); position: absolute; left: 0; top: 12px;
  width: 32px; height: 32px; background: var(--teal-dim);
  border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--teal);
}
.step-list li strong { color: var(--text-bright); font-weight: 600; }

/* Mécanisme en flèches */
.mechanism { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 28px 0; flex-wrap: wrap; }
.mech-box { background: var(--navy-light); border: 1px solid color-mix(in srgb, var(--teal) 12%, transparent); border-radius: 10px; padding: 14px 16px; text-align: center; min-width: 80px; }
.mech-box .em { font-size: 24px; display: block; margin-bottom: 4px; }
.mech-box .lb { font-size: 12px; color: var(--text-dim); }
.mech-box.bad { border-color: rgba(255,107,107,0.25); }
.mech-box.bad .lb { color: var(--coral); }
.mech-arr { font-size: 18px; color: var(--text-muted); }

/* Pills */
.pill { display: inline-block; padding: 4px 13px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin: 4px 6px 4px 0; }
.pill-teal { background: var(--teal-dim); color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); }
.pill-gold { background: var(--gold-dim); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }

/* Ligne décorative */
.glow-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); margin: 20px auto; opacity: 0.4; }

/* ── Orbes de fond ─────────────────────────────────────────────────────────── */
.orb { width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); position: absolute; pointer-events: none; animation: orbFloat 12s ease-in-out infinite; }
.orb-teal { background: radial-gradient(circle, var(--teal-glow), transparent 70%); }
.orb-gold { background: radial-gradient(circle, rgba(240,194,122,0.15), transparent 70%); animation-delay: -6s; }
@keyframes orbFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-25px); } }

/* ── Contrôles — barre flottante pill ──────────────────────────────────────── */
.controls {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: fit-content; max-width: calc(100vw - 40px); z-index: 200;
  display: flex; align-items: center; gap: 2px; padding: 6px 10px;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 100px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.ctrl-btn {
  background: none; border: none; color: var(--text-dim);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.ctrl-btn:hover  { color: #fff; background: rgba(255,255,255,0.09); }
.ctrl-btn.active { color: var(--navy); background: var(--teal); }
.speed-control { display: flex; align-items: center; gap: 2px; }
.speed-label { display: none; }

/* ── Contrôle taille de texte A-/A+ ───────────────────────────────────────── */
.zoom-control { display: flex; align-items: center; gap: 2px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 8px; }
.zoom-btn {
  background: none; border: none; color: rgba(255,255,255,0.4);
  width: 32px; height: 32px; border-radius: 6px; font-family: var(--sans); font-size: 16px;
  cursor: pointer; transition: all 0.15s; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.zoom-btn:hover { color: var(--gold); background: rgba(255,255,255,0.06); }
.zoom-preset {
  background: none; border: none; color: rgba(255,255,255,0.35);
  padding: 0 5px; border-radius: 6px; font-family: var(--serif); font-weight: 700;
  cursor: pointer; transition: all 0.15s; min-height: 32px; line-height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.zoom-preset:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }
.zoom-preset.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.speed-btns { display: flex; gap: 2px; margin-left: 2px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.08); }
.speed-btn {
  background: none; border: none; color: rgba(255,255,255,0.38);
  padding: 0 9px; border-radius: 6px; font-family: var(--mono); font-size: 11px;
  cursor: pointer; transition: all 0.15s; min-height: 32px; line-height: 1;
  display: flex; align-items: center;
}
.speed-btn:hover  { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }
.speed-btn.active { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }

/* ── Disclaimer médical (bande d'avertissement sticky) ─────────────────────── */
.disclaimer-sticky {
  position: sticky; top: 56px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--navy) 97%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(240,194,122,0.10);
  border-left: 3px solid rgba(240,194,122,0.35);
  padding: 7px 20px 7px 16px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(232,236,241,0.55);
  font-family: var(--sans);
}
.disclaimer-sticky .ds-icon,
.disclaimer-sticky span:first-child:not(.ds-text) {
  font-size: 12px; flex-shrink: 0; opacity: 0.7;
}
.disclaimer-sticky strong { color: rgba(240,194,122,0.6); font-weight: 600; }

/* ── Disclaimer box (callout inline dans le contenu) ────────────────────────── */
.disclaimer-box {
  background: rgba(240,194,122,0.05);
  border: 1px solid rgba(240,194,122,0.18);
  border-left: 3px solid rgba(240,194,122,0.45);
  border-radius: 8px; padding: 16px 20px; margin: 24px 0;
  font-size: 14px; line-height: 1.65; color: rgba(232,236,241,0.65);
}
.disclaimer-box h4 { color: rgba(240,194,122,0.8); font-size: 14px; margin: 0 0 8px; font-family: var(--sans); font-weight: 600; }
.disclaimer-box p  { font-size: 13px; margin: 0; color: rgba(232,236,241,0.55); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chapter-inner  { padding: 0 18px; }
  .cards          { grid-template-columns: 1fr; }
  .myth-row       { grid-template-columns: 1fr; }
  .mechanism      { flex-direction: column; }
  .chapnav        { display: none; }
  .topbar-module  { display: none; }
  .topbar-brand   { display: none; }
  /* Module-specific grids → single column on mobile */
  .quarterly      { grid-template-columns: 1fr 1fr !important; }
  .bilan-compare  { grid-template-columns: 1fr !important; }
  .marqueur-grid  { grid-template-columns: 1fr !important; }
  .alerts-grid    { grid-template-columns: 1fr !important; }
  .bf-grid        { grid-template-columns: 1fr !important; }
  .rc-grid        { grid-template-columns: 1fr !important; }
  .controls { bottom: 12px; padding: 5px 8px; gap: 1px; }
  .ctrl-btn { width: 34px; height: 34px; font-size: 14px; }
  #btnPlay        { display: none; }
  .speed-control  { display: none; }
  .zoom-control   { padding-left: 6px; gap: 1px; }
  .zoom-btn       { width: 28px; height: 28px; font-size: 14px; }
  .zoom-preset    { padding: 0 4px; min-height: 28px; line-height: 28px; font-size: 11px; }

  /* ── 3-col grids → 2 cols on tablet ──────── */
  .selye, .benefits, .fat-grid, .network-grid, .principles,
  .country-grid, .schedule-grid, .snacking-grid, .big-stat-row,
  .piliers-recap, .trio-grid, .polyphenols, .symptoms {
    grid-template-columns: 1fr 1fr !important;
  }
  /* ── 4-col grids → 2 cols on tablet ──────── */
  .ft-header, .ft-row, .quarterly { grid-template-columns: 1fr 1fr !important; }
  /* ── 7-col weekly grids → 4 cols then wrap ─ */
  .pw-days, .wp-days, .week-grid, .day-grid { grid-template-columns: repeat(4,1fr) !important; }
}

@media (max-width: 480px) {
  /* ── All HTML tables: horizontal scroll ──── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; font-size: 13px; padding: 7px 9px !important; }

  /* ── mythe-table grid-based (c1, c5, 5-1): stack ── */
  .mythe-table .mt-head { display: none !important; }
  .mythe-table .mt-row  {
    grid-template-columns: 1fr !important;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .mythe-table .mt-cell:first-child {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    color: var(--coral);
    font-style: italic;
  }

  /* ── 2-col grids → 1 col ─────────────────── */
  .alt-grid, .four-grid, .microbiome-foods, .recipe-grid,
  .compare-row, .ex-grid, .supp-guide, .situation-grid,
  .levier-grid, .plant-grid, .indicators, .marqueurs,
  .antioxidant-grid { grid-template-columns: 1fr !important; }

  /* ── 3-col grids → 1 col ─────────────────── */
  .selye, .benefits, .fat-grid, .network-grid, .principles,
  .country-grid, .schedule-grid, .snacking-grid, .big-stat-row,
  .piliers-recap, .trio-grid, .polyphenols, .symptoms,
  .liver-functions, .gut-stats {
    grid-template-columns: 1fr !important;
  }

  /* ── 4-col fish table: horizontal scroll ──── */
  .fish-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  .fish-table .ft-header,
  .fish-table .ft-row { min-width: 400px; grid-template-columns: 1fr 1fr 1fr 1fr !important; }

  /* ── 7-col weekly grids → 3 cols ──────────── */
  .pw-days, .wp-days, .week-grid, .day-grid { grid-template-columns: repeat(3,1fr) !important; }

  /* ── compare-row (sport vs mouvement) ──────── */
  .compare-row { border-radius: 10px !important; overflow: hidden !important; }

  /* ── ss-bar (sommeil) → 2×2 ─────────────── */
  .ss-bar { grid-template-columns: 1fr 1fr !important; }
}

/* ── Version imprimable ────────────────────────────────────────────────────── */
@media print {
  /* Fond et couleurs */
  :root {
    --teal:       #0a7a5c;
    --gold:       #8a6100;
    --coral:      #c0392b;
    --green:      #1a7a40;
    --text:       #1a1a1a;
    --text-bright:#000;
    --text-dim:   #444;
    --text-muted: #666;
    --navy:       #fff;
    --navy-light: #f5f5f5;
    --navy-mid:   #ebebeb;
    --teal-dim:   rgba(10,122,92,0.08);
    --gold-dim:   rgba(138,97,0,0.08);
    --coral-dim:  rgba(192,57,43,0.08);
    --green-dim:  rgba(26,122,64,0.08);
  }
  html, body { background: #fff !important; color: #1a1a1a !important; }
  body::before { display: none; }

  /* Masquer toute l'interface LMS */
  .topbar, .progress-global, .chapnav, .controls, .disclaimer-sticky,
  #lms-bar, #lms-menu, .orb, .print-btn { display: none !important; }

  /* Layout */
  main { padding-top: 0 !important; }
  .chapter {
    min-height: unset !important;
    padding: 40px 0 32px !important;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: visible !important;
  }
  .chapter + .chapter { page-break-before: always; break-before: page; }
  .chapter-inner { max-width: 100% !important; padding: 0 !important; }

  /* Rendre tous les éléments .reveal visibles */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Typographie */
  h2 { font-size: 26px !important; color: #000 !important;
       -webkit-text-fill-color: #000 !important; background: none !important; }
  h3 { font-size: 20px !important; color: #000 !important; margin: 28px 0 12px !important; }
  h4 { font-size: 17px !important; }
  p  { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 10px !important; }
  .lead  { font-size: 16px !important; }
  .small { font-size: 13px !important; }

  /* Composants */
  .quote-block, .info-box, .card, .myth-l, .myth-r, .mech-box {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quote-block p { font-size: 16px !important; color: #1a1a1a !important; }
  .big-stat .number {
    -webkit-text-fill-color: var(--teal) !important;
    font-size: 72px !important;
  }
  .step-list li { font-size: 14px !important; }
  .cards { grid-template-columns: 1fr 1fr !important; }
  .myth-row { grid-template-columns: 1fr 1fr !important; }
  .glow-line { background: #bbb !important; opacity: 1 !important; }
  .ch-divider { background: var(--teal) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .disclaimer-box { display: none; }

  /* Lien non affiché */
  a { color: inherit !important; text-decoration: none !important; }
}

/* ── Thèmes ─────────────────────────────────────────────────────────────────
   Appliqués via JS : document.documentElement.dataset.theme = 'foret'
   ─────────────────────────────────────────────────────────────────────────── */

/* Forêt — santé naturelle (thème principal recommandé) */
[data-theme="foret"] {
  --navy:        #081810;
  --navy-light:  #0D2018;
  --navy-mid:    #152C20;
  --teal:        #52C478;
  --teal-dim:    rgba(82,196,120,0.10);
  --teal-glow:   rgba(82,196,120,0.35);
  --gold:        #C8A83C;
  --gold-dim:    rgba(200,168,60,0.08);
  --coral:       #E07A55;
  --coral-dim:   rgba(224,122,85,0.08);
  --green:       #74D890;
  --green-dim:   rgba(116,216,144,0.08);
  --text:        #E0EDE4;
  --text-bright: #F0F7F2;
  --text-dim:    #8AB09A;
  --text-muted:  #52706A;
}

/* Terre — tonalités ambrées et argileuses */
[data-theme="terre"] {
  --navy:        #180E06;
  --navy-light:  #221408;
  --navy-mid:    #2E1E0E;
  --teal:        #D49443;
  --teal-dim:    rgba(212,148,67,0.10);
  --teal-glow:   rgba(212,148,67,0.35);
  --gold:        #78A862;
  --gold-dim:    rgba(120,168,98,0.08);
  --coral:       #C9683A;
  --coral-dim:   rgba(201,104,58,0.08);
  --green:       #7BAA68;
  --green-dim:   rgba(123,170,104,0.08);
  --text:        #EDDED0;
  --text-bright: #F5EDE0;
  --text-dim:    #A08870;
  --text-muted:  #6A5040;
}

/* Zen — vert sauge et lavande médicinale */
[data-theme="zen"] {
  --navy:        #111820;
  --navy-light:  #182430;
  --navy-mid:    #203040;
  --teal:        #88BC68;
  --teal-dim:    rgba(136,188,104,0.10);
  --teal-glow:   rgba(136,188,104,0.35);
  --gold:        #C0A0D8;
  --gold-dim:    rgba(192,160,216,0.08);
  --coral:       #E0A870;
  --coral-dim:   rgba(224,168,112,0.08);
  --green:       #68B888;
  --green-dim:   rgba(104,184,136,0.08);
  --text:        #DDE8DD;
  --text-bright: #EEF3EE;
  --text-dim:    #8AB0A0;
  --text-muted:  #567060;
}

/* Vivovojo — rouge ardent sur anthracite profond */
[data-theme="vivo"] {
  --navy:        #0C0C0C;
  --navy-light:  #141414;
  --navy-mid:    #1E1E1E;
  --teal:        #E02A2A;
  --teal-dim:    rgba(224,42,42,0.10);
  --teal-glow:   rgba(224,42,42,0.35);
  --gold:        #C8C8C8;
  --gold-dim:    rgba(200,200,200,0.07);
  --coral:       #FF5050;
  --coral-dim:   rgba(255,80,80,0.08);
  --green:       #80CC80;
  --green-dim:   rgba(128,204,128,0.08);
  --text:        #F0F0F0;
  --text-bright: #FAFAFA;
  --text-dim:    #A8A8A8;
  --text-muted:  #686868;
}


/* Aroma — vert profond, lavande, ambre (aromathérapie) */
[data-theme="aroma"] {
  --navy:        #0A0F0A;
  --navy-light:  #101A10;
  --navy-mid:    #1A2A1A;
  --teal:        #6B8F3C;
  --teal-dim:    rgba(107,143,60,0.10);
  --teal-glow:   rgba(107,143,60,0.35);
  --gold:        #C9A96E;
  --gold-dim:    rgba(201,169,110,0.08);
  --coral:       #B07D56;
  --coral-dim:   rgba(176,125,86,0.08);
  --purple:      #8B6FA3;
  --purple-dim:  rgba(139,111,163,0.10);
  --orange:      #C48A3F;
  --orange-dim:  rgba(196,138,63,0.10);
  --green:       #5AAF6B;
  --green-dim:   rgba(90,175,107,0.10);
  --text:        #E8EDE0;
  --text-bright: #F5F8F0;
  --text-dim:    #98A888;
  --text-muted:  #5A6A50;
}

/* ── SVG inline — fond adapté au thème ─────────────────────────────────────── */
/* Le premier rect d'un SVG de contenu est généralement le fond du diagramme.
   CSS properties overrident les attributs de présentation SVG inline. */
svg[aria-label] > rect:first-of-type {
  fill: var(--navy-mid) !important;
}