/* ==================================================================
   BLUFFY — THEMES CLAIR ET SOMBRE
   ------------------------------------------------------------------
   Le sombre reste le theme d'origine : ses valeurs sont celles deja
   definies dans assets/index-BEVwVLyZ.css. On les redeclare ici sous
   :root[data-theme="dark"] pour que le basculement fonctionne dans
   les deux sens, et parce qu'une variable ne doit jamais n'exister
   que dans un seul etat.

   Le clair n'est PAS une inversion de couleurs. Chaque theme a ses
   propres surfaces, bordures et ombres :
     - en sombre, on eclaircit avec du blanc translucide ;
     - en clair, on assombrit avec du bleu nuit translucide, et les
       ombres portees sont bien plus douces.

   L'accent change de famille : dore en sombre, violet Bluffy en
   clair, conformement au pack fourni.
   ================================================================== */

/* ---------------------------------------------------------- SOMBRE */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b0c0e; --bg-2:#101215;
  --surface:#15171b; --surface-2:#1b1e23; --surface-3:#22262d;
  --border:#2a2e35; --border-soft:#21242a;
  --text:#f2f1ec; --text-dim:#9c9ca3; --text-faint:#7c7d86;
  --accent:#d3a44c; --accent-hi:#e6c06e; --accent-dim:#8a7038;
  --accent-soft:#d3a44c24; --accent-ink:#1b140a;
  --good:#33c29a; --good-soft:#33c29a24;
  --warn:#e0a93e; --warn-soft:#e0a93e24;
  --danger:#e5586b; --danger-soft:#e5586b24;
  --info:#7c93e8; --info-soft:#7c93e824;
  --glass:#15171c85; --glass-2:#1b1e249e; --glass-strong:#0e0f13b8;
  --glass-border:#ffffff16; --glass-border-hi:#ffffff29; --glass-hl:#ffffff12;
  --gold-glow:#d3a44c59;
  --focus-ring:#e6c06e;
  --theme-table:url("/assets/themes/dark/table-6max.svg");
  --theme-card-back:url("/assets/themes/dark/card-back.svg");
  --theme-tokens:url("/assets/themes/dark/token-stack.svg");
  --theme-burst:url("/assets/themes/dark/success-burst.svg");
  /* Plan de table (SVG en ligne, voir renderSeatMap dans app.js) */
  --felt-1:#1e2127; --felt-2:#0f1115; --felt-edge:rgba(0,0,0,.6);
  --felt-ring:rgba(211,164,76,.18); --felt-text:#f2f1ec; --felt-text-dim:#9c9ca3;
  --rail-1:#f1d78f; --rail-2:#8a6a2a; --rail-3:#d3a44c;
  --seat-1:#2d3038; --seat-2:#15171b;
  --seat-hi-1:#f6dc94; --seat-hi-2:#d3a44c; --seat-hi-3:#8f6d2c;
  --chip-1:#f1d78f; --chip-2:#b98b3a;
  --table-shadow:rgba(0,0,0,.55); --dealer-bg:#f2f1ec; --dealer-edge:#8a8a90; --dealer-ink:#15161a;
  /* Encres du plan de table. Elles etaient ecrites en dur dans le SVG. */
  --seat-text:#e4e4e8; --seat-ink:#1a1408; --seat-sub-ink:#3a2a08;
  --seat-stack-ink:#f1d78f;
  --seat-dim-1:#24272d; --seat-dim-2:#15171b; --seat-dim-ink:#9aa0ab;
  --seat-edge:rgba(255,255,255,0.14); --seat-ring:#d3a44c;
  --seat-chip-bg:#1a1408; --seat-chip-edge:#d3a44c;
}

/* ----------------------------------------------------------- CLAIR */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f6ff; --bg-2:#f0effb;
  --surface:#ffffff; --surface-2:#f0effb; --surface-3:#e7e5f7;
  --border:#dedcf0; --border-soft:#e8e6f6;
  --text:#101a43; --text-dim:#575f83; --text-faint:#666e91;
  --accent:#6a49e6; --accent-hi:#5334c9; --accent-dim:#a08cf0;
  --accent-soft:#7657ee1f; --accent-ink:#ffffff;
  --good:#2f8f5c; --good-soft:#2f8f5c1f;
  --warn:#8a5709; --warn-soft:#8a57091f;
  --danger:#b8324a; --danger-soft:#b8324a1f;
  --info:#1a7f9c; --info-soft:#1a7f9c24;
  /* le verre translucide s'assombrit au lieu de s'eclaircir */
  --glass:#ffffffcc; --glass-2:#f5f4ffd9; --glass-strong:#ffffffe8;
  --glass-border:#101a4314; --glass-border-hi:#101a4326; --glass-hl:#ffffffcc;
  --gold-glow:#7657ee40;
  --focus-ring:#5a3fd0;
  --theme-table:url("/assets/themes/light/table-6max.svg");
  --theme-card-back:url("/assets/themes/light/card-back.svg");
  --theme-tokens:url("/assets/themes/light/token-stack.svg");
  --theme-burst:url("/assets/themes/light/success-burst.svg");
  /* Plan de table en clair : le tapis reste plus fonce que la page pour
     que les cartes et les jetons se detachent, mais il passe du noir a
     un bleu nuit lavande, et le liseré doré devient violet. Ce n'est pas
     une inversion : c'est la meme hierarchie, redessinee. */
  --felt-1:#2b2f5c; --felt-2:#1c2044; --felt-edge:rgba(16,26,67,.35);
  --felt-ring:rgba(169,147,246,.28); --felt-text:#f4f2ff; --felt-text-dim:#c3bfe4;
  --rail-1:#c9bcf8; --rail-2:#6a49e6; --rail-3:#8f76f2;
  --seat-1:#494e86; --seat-2:#2f3462;
  --seat-hi-1:#cbbcfb; --seat-hi-2:#8f76f2; --seat-hi-3:#5334c9;
  --chip-1:#cbbcfb; --chip-2:#6a49e6;
  --table-shadow:rgba(16,26,67,.22); --dealer-bg:#ffffff; --dealer-edge:#8f8fb0; --dealer-ink:#1c2044;
  /* Encres du plan de table, mesurees une a une sur leur propre fond :
     le siege du heros est un violet moyen, donc son libelle passe en
     bleu nuit (4,9:1) et non en blanc (3,4:1, insuffisant) ; le tapis
     affiche sous le siege repose sur la carte blanche, d'ou le violet
     fonce ; les sieges couches gardent un degrade lavande eteint assez
     clair pour porter une encre sombre lisible (6,1:1). */
  --seat-text:#f0f0f4; --seat-ink:#14173a; --seat-sub-ink:#2a2e5e;
  --seat-stack-ink:#4a2fb8;
  --seat-dim-1:#bcbfd8; --seat-dim-2:#a4a8c8; --seat-dim-ink:#2b2f55;
  --seat-edge:rgba(16,26,67,0.18); --seat-ring:#6a49e6;
  /* Pastille du tapis : fond plein pour rester lisible aussi bien sur
     la carte blanche que sur le tapis bleu nuit. */
  --seat-chip-bg:#241a52; --seat-chip-edge:#8f76f2;
}

/* Le fond de page est peint en dur dans la feuille compilee : on le
   reprend ici, sinon le clair garde un fond noir. */
:root[data-theme="light"], :root[data-theme="light"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="dark"],  :root[data-theme="dark"] body { background:var(--bg); color:var(--text); }

/* Focus clavier visible dans les deux themes, exigence d'accessibilite.
   La couleur seule ne suffit pas : on garde aussi un decalage net. */
:root :is(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:6px;
}

/* Transition du basculement, desactivee si l'utilisateur a demande
   moins d'animations. Elle ne porte que sur les couleurs : aucune
   position ni taille ne bouge, donc rien ne saute pendant le passage. */
:root[data-theme-anim="1"] body,
:root[data-theme-anim="1"] body *{
  transition: background-color .18s linear, border-color .18s linear, color .18s linear;
}
@media (prefers-reduced-motion: reduce){
  :root[data-theme-anim="1"] body,
  :root[data-theme-anim="1"] body *{ transition:none; }
}

/* --------------------------------------------- SELECTEUR DE THEME */
.theme-switch{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--border); background:var(--surface-2);
  border-radius:999px; padding:2px;
}
.theme-switch button{
  border:0; background:transparent; color:var(--text-dim);
  font:inherit; font-size:12px; font-weight:600; line-height:1;
  padding:7px 11px; border-radius:999px; cursor:pointer; min-height:32px;
}
.theme-switch button[aria-pressed="true"]{
  background:var(--accent-soft); color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.theme-switch button:hover{ color:var(--text); }
@media (max-width:900px){ .theme-switch button{ padding:7px 9px; } }

/* ----------------------------------------- SELECTEUR DE LANGUE
   Meme pastille que le theme, pour que la barre d'outils lise comme
   un seul groupe. Codes a deux lettres plutot que des drapeaux : un
   drapeau designe un pays, pas une langue. L'etat actif ne repose
   pas que sur la couleur (fond + aria-pressed), pour rester lisible
   en vision des couleurs atypique. */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--border); background:var(--surface-2);
  border-radius:999px; padding:2px; margin-right:8px;
}
.lang-switch button{
  border:0; background:transparent; color:var(--text-dim);
  font:inherit; font-size:12px; font-weight:600; line-height:1;
  letter-spacing:.02em;
  padding:7px 9px; border-radius:999px; cursor:pointer; min-height:32px;
}
.lang-switch button[aria-pressed="true"]{
  background:var(--accent-soft); color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.lang-switch button:hover{ color:var(--text); }
.lang-switch button:focus-visible,
.theme-switch button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:900px){
  .lang-switch{ margin-right:6px; }
  .lang-switch button{ padding:7px 7px; }
}
.n-nav .lang-switch{ margin-left:14px; margin-right:0; }
@media (max-width:720px){ .n-nav .lang-switch{ margin-left:0; } }
/* ==== derive de index-BEVwVLyZ.css ==== */
:root[data-theme="light"] body{background-image:radial-gradient(900px 460px at 15% -8%,#6a49e614 0%,#6a49e600 60%),radial-gradient(700px 420px at 100% 0,#1a7f9c0f 0%,#1a7f9c00 55%),repeating-linear-gradient(0deg,#101a4303 0,#101a4303 1px,#101a4300 1px,#101a4300 3px)}
:root[data-theme="light"] .brand-dot{box-shadow:0 0 14px #6a49e68c}
:root[data-theme="light"] .streak-pill{box-shadow:inset 0 1px #101a4308}
:root[data-theme="light"] .card{box-shadow:inset 0 1px #101a4309,0 10px 24px -16px #101a4333}
:root[data-theme="light"] .btn-primary{box-shadow:0 8px 20px -8px #6a49e68c,inset 0 1px #101a4359}
:root[data-theme="light"] .btn-secondary{box-shadow:inset 0 1px #101a4308}
:root[data-theme="light"] .badge{border:1px solid #101a4300}
:root[data-theme="light"] .tabbar{background:#f7f6ffdb}
:root[data-theme="light"] .plan-col.best{box-shadow:0 0 0 1px var(--accent), 0 14px 30px -18px #6a49e680}
:root[data-theme="light"] .table-visual{background:radial-gradient(160px 90px at 50% 30%, #6a49e61a 0%, #6a49e600 70%), linear-gradient(180deg, var(--surface-2), var(--surface));box-shadow:inset 0 1px #101a4308,0 12px 30px -18px #101a4337}
:root[data-theme="light"] .playing-card{background:linear-gradient(160deg,#ffffff 0%,#ab97d8 100%);border:1px solid #101a4308;box-shadow:0 10px 22px -8px #101a432e,inset 0 1px #101a43e6}
:root[data-theme="light"] .playing-card.black{color:#faf9ff}
:root[data-theme="light"] .playing-card-mini{background:linear-gradient(160deg,#ffffff 0%,#ab97d8 100%);border:1px solid #101a4308}
:root[data-theme="light"] .playing-card-mini.black{color:#faf9ff}
:root[data-theme="light"] .decision-card.dc-good{border-color:#2f8f5c40}
:root[data-theme="light"] .decision-card.dc-bad{border-color:#b8324a4d}
:root[data-theme="light"] .feedback-panel.correct{background:linear-gradient(180deg, var(--good-soft), #2f8f5c0d);border-color:#2f8f5c59}
:root[data-theme="light"] .feedback-panel.incorrect{background:linear-gradient(180deg, var(--danger-soft), #b8324a0d);border-color:#b8324a59}
:root[data-theme="light"] .mode-card{border-left:3px solid #101a4300}
:root[data-theme="light"] .mc-noted .mode-icon{background:#6a49e61f;border-color:#6a49e659}
:root[data-theme="light"] .mc-bounty .mode-icon{background:#6c3dd91f;border-color:#6c3dd959}
:root[data-theme="light"] .seat-map{filter:drop-shadow(0 14px 24px #101a4333)}
:root[data-theme="light"] .range-cell.call{color:#daf1eb}
:root[data-theme="light"] .range-cell.added:after{background:#ffffff}
:root[data-theme="light"] .range-locked .lock-overlay{background:#f7f6ffd1}
:root[data-theme="light"] html{background:#f7f6ff}
:root[data-theme="light"] body{background-color:#f7f6ff}
:root[data-theme="light"] .bg-layer{background:radial-gradient(1100px 600px at 12% -10%,#6a49e624 0%,#6a49e600 62%),radial-gradient(900px 520px at 100% 0,#1a7f9c1a 0%,#1a7f9c00 58%),radial-gradient(800px 700px at 50% 110%,#6a49e614 0%,#101a4300 60%),#f7f6ff}
:root[data-theme="light"] .bg-vignette{background:radial-gradient(120% 90% at 50% 35%,#f7f6ff00 0%,#f7f6ff38 60%,#f7f6ff99 100%),linear-gradient(#f7f6ff40 0%,#f7f6ff0d 30%,#f7f6ff73 100%)}
:root[data-theme="light"] #app{background:linear-gradient(#f7f6ff2e 0%,#f7f6ff4d 100%);border-left-color:#101a430d;border-right-color:#101a430d}
:root[data-theme="light"] .boot-logo,:root[data-theme="light"] .brand{background:linear-gradient(110deg,#a08cf0 0%,#5334c9 22%,#3f2aa8 38%,#6a49e6 52%,#4a2fb8 68%,#4a2fb8 84%,#5e3ab3 100%) 0 0/300% 100%;color:#101a4300}
:root[data-theme="light"] .boot-mark{filter:drop-shadow(0 0 22px #6a49e659)}
:root[data-theme="light"] .boot-bar{background:#101a4314}
:root[data-theme="light"] .brand-dot{background:linear-gradient(135deg, #9b70ff, var(--accent) 55%, #a08cf0);box-shadow:0 0 18px var(--gold-glow), inset 0 0 3px #101a4399}
:root[data-theme="light"] .card,:root[data-theme="light"] .mode-card,:root[data-theme="light"] .quick-tile,:root[data-theme="light"] .choice,:root[data-theme="light"] .plan-col,:root[data-theme="light"] .feedback-panel,:root[data-theme="light"] .chat-box,:root[data-theme="light"] .decision-card,:root[data-theme="light"] .leak-item,:root[data-theme="light"] .login-wrap,:root[data-theme="light"] .empty-state,:root[data-theme="light"] .stack-info,:root[data-theme="light"] .scenario-meta{box-shadow:inset 0 1px 0 var(--glass-hl), inset 0 -1px 0 #101a4315, 0 18px 40px -22px #101a433f}
:root[data-theme="light"] .card:before{background:radial-gradient(420px 120px at 20% -10%,#101a4317,#101a4300 70%)}
:root[data-theme="light"] .card[onclick]:hover,:root[data-theme="light"] .mode-card:hover,:root[data-theme="light"] .quick-tile:hover,:root[data-theme="light"] .choice:hover,:root[data-theme="light"] .plan-pick:hover{box-shadow:inset 0 1px #101a431f,0 22px 44px -20px #101a4344,0 0 0 1px #6a49e61a}
:root[data-theme="light"] .plan-pick.selected,:root[data-theme="light"] .choice.selected,:root[data-theme="light"] .seg-btn.active{box-shadow:inset 0 1px 0 #101a431f, 0 0 0 1px #6a49e640, 0 0 28px -8px var(--gold-glow);border-color:#6a49e68c}
:root[data-theme="light"] .btn-primary{background:linear-gradient(#9f7cf0 0%,#6a49e6 55%,#5f43d4 100%);box-shadow:0 10px 26px -10px #6a49e6a6,inset 0 1px #101a438c,inset 0 -1px #101a430c}
:root[data-theme="light"] .btn-primary:after{background:linear-gradient(100deg,#101a4300 0%,#101a4373 50%,#101a4300 100%)}
:root[data-theme="light"] .tabbar{box-shadow:inset 0 1px 0 var(--glass-hl), 0 -18px 40px -30px #101a434c;background:#f7f6ff59}
:root[data-theme="light"] .tab.active{box-shadow:inset 0 1px 0 #101a431a, 0 0 24px -10px var(--gold-glow);background:linear-gradient(#6a49e629,#6a49e60f)}
:root[data-theme="light"] .tab.active .icon{filter:drop-shadow(0 0 8px #6a49e68c)}
:root[data-theme="light"] .playing-card{box-shadow:0 10px 22px -10px #101a4344,inset 0 1px #101a43b3}
:root[data-theme="light"] .brand-dot{filter:drop-shadow(0 0 10px #6a49e659)}
:root[data-theme="light"] .tab .icon{color:#343156;background:linear-gradient(160deg,#d6d4e8,#ffffff);box-shadow:inset 0 1px #101a4324,inset 0 -2px #101a4333,0 4px 8px -4px #f7f6ff}
:root[data-theme="light"] .tab:hover .icon{color:#101a43}
:root[data-theme="light"] .tab:active .icon{box-shadow:inset 0 1px #101a4314,inset 0 -1px #101a4333}
:root[data-theme="light"] .tab.active .icon{color:#ffffff;background:linear-gradient(160deg,#9f7bf4,#6a49e6 55%,#714cc8);box-shadow:inset 0 1px #101a4399,inset 0 -2px #101a431d,0 8px 18px -8px #6a49e6e6}
:root[data-theme="light"] .sb-bar{background:#101a4314}
:root[data-theme="light"] .sb-bar i{background:linear-gradient(90deg,#a08cf0,#4a2fb8)}
:root[data-theme="light"] .medal:after{background:linear-gradient(#f2f1f8eb,#e9e8f3eb)}
:root[data-theme="light"] .medal-bronze{--m:linear-gradient(160deg, #8a6ad5, #8a4f2b 55%, #f1e2da)}
:root[data-theme="light"] .medal-argent{--m:linear-gradient(160deg, #f2f4f7, #a9b0ba 50%, #aaa7cf)}
:root[data-theme="light"] .medal-or{--m:linear-gradient(160deg, #9b70ff, #6a49e6 50%, #a08cf0)}
:root[data-theme="light"] .ladder-step.cur{background:#6a49e614;border:1px solid #6a49e64d}
:root[data-theme="light"] .rank-next{background:#101a4308;border:1px solid #101a4314}
:root[data-theme="light"] .rankup{background:#f5f4f9c7}
:root[data-theme="light"] .rankup-card{background:linear-gradient(#e2e1ef,#ebeaf4);border:1px solid #6a49e659;box-shadow:0 40px 80px -30px #f7f6ff,0 0 60px -20px #6a49e680}
:root[data-theme="light"] .rankup-eyebrow{color:#5334c9}
:root[data-theme="light"] .rankup-card .medal{filter:drop-shadow(0 12px 30px #6a49e659)}
:root[data-theme="light"] .mode-icon,:root[data-theme="light"] .quick-tile .qt-icon{color:#5334c9;box-shadow:inset 0 1px #101a4324,inset 0 -2px #101a4333,0 4px 8px -4px #f7f6ff;background:linear-gradient(160deg,#d6d4e8,#ffffff)!important}
:root[data-theme="light"] .mode-card:hover .mode-icon,:root[data-theme="light"] .quick-tile:hover .qt-icon{color:#4a2fb8}
:root[data-theme="light"] .mc-basics,:root[data-theme="light"] .mc-explore,:root[data-theme="light"] .mc-review,:root[data-theme="light"] .mc-import,:root[data-theme="light"] .mc-ranges{border-left-color:#101a4324}
:root[data-theme="light"] .mc-noted{border-left-color:#6a49e6b3}
:root[data-theme="light"] .mc-bounty{border-left-color:#6a49e673}
:root[data-theme="light"] .daily-card{border-color:#6a49e666!important}
:root[data-theme="light"] .daily-card .daily-num{color:#5334c9}
:root[data-theme="light"] .daily-card .daily-cta{color:#4a2fb8}
:root[data-theme="light"] .daily-card.done{border-color:#101a431a!important}
:root[data-theme="light"] .toast{background:#e2e1ef;border:1px solid #6a49e666;box-shadow:0 20px 40px -20px #f7f6ff}
:root[data-theme="light"] .pro-tease,:root[data-theme="light"] .trial-note{border-color:#6a49e659!important}
:root[data-theme="light"] .pro-tease:hover,:root[data-theme="light"] .trial-note:hover{border-color:#6a49e699!important}
:root[data-theme="light"] .landing-logo{filter:drop-shadow(0 10px 30px #6a49e673)}
:root[data-theme="light"] .stat-tile.on{border-color:#6a49e699;box-shadow:0 0 0 1px #6a49e640}
:root[data-theme="light"] .dd-chip{background:#101a4308;border:1px solid #101a431a}
:root[data-theme="light"] .dd-chip.ok{border-color:#2f8f5c73}
:root[data-theme="light"] .dd-chip.ko{border-color:#b8324a73}
:root[data-theme="light"] .dd-chip.ideal{background:#6a49e614;border-color:#6a49e68c}
:root[data-theme="light"] .dd-chip.ideal b{color:#4a2fb8}
:root[data-theme="light"] .dd-rule{background:linear-gradient(135deg,#6a49e624,#6a49e60a);border:1px solid #6a49e659}
:root[data-theme="light"] .dd-rule small{color:#5334c9}
:root[data-theme="light"] .dd-more-btn{color:#5334c9}
:root[data-theme="light"] .q-kicker{color:#5334c9}
:root[data-theme="light"] .q-title em{color:#4a2fb8}
:root[data-theme="light"] .q-story{color:#2f2c4e}
:root[data-theme="light"] .q-story-bar{background:linear-gradient(#4a2fb8,#a08cf0)}
:root[data-theme="light"] .select-inline{background:var(--surface,#e6e5f1);color:var(--text,#101a43);border:1px solid var(--border,#101a431f)}
:root[data-theme="light"] .pos-bar-track{background:#101a4314}
:root[data-theme="light"] .pos-bar-track i{background:linear-gradient(90deg,#714cc8,#4a2fb8)}
:root[data-theme="light"] .btn-choice{background:linear-gradient(#dbdaeb,#faf9ff);border:1px solid #6a49e659;box-shadow:inset 0 1px #101a4314,0 6px 14px -10px #101a4344}
:root[data-theme="light"] .btn-choice:hover{background:linear-gradient(#d5d4e8,#e3e2f0);border-color:#6a49e6b3}
:root[data-theme="light"] .villain-card{--v:var(--text-dim,#575f83);border:1px solid #101a4317;background:radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--v) 12%, transparent) 0%, transparent 60%), linear-gradient(180deg, #101a4309, #101a4303)}
:root[data-theme="light"] .villain-card.v-danger{--v:#b8324a}
:root[data-theme="light"] .villain-card.v-good{--v:#2f8f5c}
:root[data-theme="light"] .villain-card.v-dim{--v:#575f83}
:root[data-theme="light"] .villain-id span{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .villain-desc{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .villain-stats i{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .whatif{background:linear-gradient(#101a4308,#101a4302);border:1px solid #101a4314}
:root[data-theme="light"] .whatif-head{color:var(--accent,#6a49e6)}
:root[data-theme="light"] .whatif-row{--v:#575f83}
:root[data-theme="light"] .whatif-row.v-danger{--v:#b8324a}
:root[data-theme="light"] .whatif-row.v-good{--v:#2f8f5c}
:root[data-theme="light"] .whatif-row b{color:var(--text,#101a43)}
:root[data-theme="light"] .whatif-row span{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .whatif-none{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .whatif-cue{color:var(--text-dim,#575f83);border-top:1px solid #101a4312}
:root[data-theme="light"] .btn:focus-visible{outline:2px solid var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .chip:focus-visible{outline:2px solid var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .seg-btn:focus-visible{outline:2px solid var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .tab:focus-visible{outline:2px solid var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] select:focus-visible{outline:2px solid var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .card:before,:root[data-theme="light"] .q-block:before,:root[data-theme="light"] .feedback-panel:before{background:linear-gradient(105deg,#101a4300 42%,#101a430e 50%,#101a4300 58%)}
:root[data-theme="light"] .tab:after{background:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp{--lp-rule:#101a4313;--lp-rule-hi:#101a4329}
:root[data-theme="light"] .lp em{color:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp-kicker{color:var(--accent,#6a49e6)}
:root[data-theme="light"] .lp-body{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-nav{background:linear-gradient(#f7f6ffdb 0%,#f7f6ff8c 70%,#f7f6ff00 100%)}
:root[data-theme="light"] .lp-nav-links a{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-nav-links a:after{background:var(--accent,#6a49e6)}
:root[data-theme="light"] .lp-nav-links a:hover{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-ghost{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-ghost:hover{color:var(--text,#101a43);border-color:#101a4352}
:root[data-theme="light"] .lp-eyebrow{color:var(--text-dim,#575f83);background:#101a4306}
:root[data-theme="light"] .lp-eyebrow i{background:var(--accent-hi,#4a2fb8);box-shadow:0 0 10px 1px #6a49e6b3}
:root[data-theme="light"] .lp-lede{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-lede b{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-cta-note{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-facts dt{color:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp-facts dd{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-pc-1{box-shadow:0 30px 60px -24px #101a434c}
:root[data-theme="light"] .lp-pc-2{box-shadow:0 30px 60px -24px #101a434c}
:root[data-theme="light"] .lp-pc-b1,:root[data-theme="light"] .lp-pc-b2{background:repeating-linear-gradient(45deg,#6a49e629 0,#6a49e629 1px,#101a4300 1px,#101a4300 11px),repeating-linear-gradient(-45deg,#6a49e629 0,#6a49e629 1px,#101a4300 1px,#101a4300 11px),linear-gradient(150deg,#e2e1ef,#e0e3eb);border:1px solid #6a49e666}
:root[data-theme="light"] .lp-hero-stage:before{background:radial-gradient(closest-side,#6a49e633,#6a49e600 72%)}
:root[data-theme="light"] .lp-spot{background:linear-gradient(#e2e1efdb,#ebebf4eb);box-shadow:0 40px 70px -34px #101a4350,inset 0 1px #101a4312}
:root[data-theme="light"] .lp-spot figcaption{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-spot-q b{color:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp-spot-reads>span{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-spot-reads>span>b{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-tag.t-red{color:#b8324a;background:#b8324a24;border:1px solid #b8324a66}
:root[data-theme="light"] .lp-claim p{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-claim span{color:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp-num{color:var(--accent,#6a49e6)}
:root[data-theme="light"] .lp-steps p{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-panel{background:linear-gradient(#e2e1efe6,#e1e4eaf0);box-shadow:0 46px 80px -40px #101a4350,inset 0 1px #101a430f}
:root[data-theme="light"] .lp-chip{color:var(--text-dim,#575f83);background:#101a430d}
:root[data-theme="light"] .lp-chip-hot{background:#b8324a21;border-color:#b8324a66}
:root[data-theme="light"] .lp-stats li{color:var(--text-faint,#8b91ad);background:#e0e3eb}
:root[data-theme="light"] .lp-stats li b{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-panel-meta{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-panel-why{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-panel-cta{color:#ffffff;background:linear-gradient(#9f7cf0,#6a49e6 55%,#5f43d4)}
:root[data-theme="light"] .lp-ladder-spine{background:linear-gradient(#6a49e60d,#6a49e68c,#6a49e60d)}
:root[data-theme="light"] .lp-rank-dot{background:#e7e5f7;border:1px solid #101a434d}
:root[data-theme="light"] .lp-rank-cond{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .r-bronze .lp-rank-dot{background:linear-gradient(140deg,#8463d0,#6a45c2);border-color:#8463d099}
:root[data-theme="light"] .r-or .lp-rank-dot{background:linear-gradient(140deg,#9f7bf4,#5f43d4);border-color:#9f7bf4a6}
:root[data-theme="light"] .lp-honest li{color:var(--text-dim,#575f83)}
:root[data-theme="light"] .lp-honest li b{color:var(--text,#101a43)}
:root[data-theme="light"] .lp-foot{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-bottom nav a{color:var(--text-faint,#8b91ad)}
:root[data-theme="light"] .lp-bottom nav a:hover{color:var(--text,#101a43)}
:root[data-theme="light"] .sev-major{--sev-ink:#b8324a;--sev-bg:#b8324a1a;--sev-line:#b8324a61}
:root[data-theme="light"] .sev-minor{--sev-ink:#8a5709;--sev-bg:#8a57091a;--sev-line:#8a570957}
:root[data-theme="light"] .sev-ok{--sev-ink:#2f8f5c;--sev-bg:#2f8f5c1a;--sev-line:#2f8f5c57}
:root[data-theme="light"] .vmark.ok{color:#2f8f5c;background:#2f8f5c24;border:1px solid #2f8f5c57}
:root[data-theme="light"] .vmark.ko{color:#b8324a;background:#b8324a24;border:1px solid #b8324a57}
:root[data-theme="light"] .streak-pill .flame{color:var(--accent-hi,#4a2fb8)}
:root[data-theme="light"] .lp-progress{background:linear-gradient(90deg, var(--accent-dim,#7758c0), var(--accent-hi,#4a2fb8))}
@keyframes mark-breathe{
:root[data-theme="light"] 0%,:root[data-theme="light"] to{filter:drop-shadow(0 0 8px #6a49e647)}
:root[data-theme="light"] 50%{filter:drop-shadow(0 0 16px #6a49e680)}
}
@media (min-width:1000px){
:root[data-theme="light"] .lp-ladder-spine{background:linear-gradient(90deg,#6a49e60f,#6a49e680,#6a49e60f)}
}
@media (min-width:900px){
:root[data-theme="light"] .tabbar:before{background:linear-gradient(110deg,#a08cf0 0%,#5334c9 22%,#3f2aa8 38%,#6a49e6 52%,#4a2fb8 68%,#4a2fb8 84%,#5e3ab3 100%) 0 0/300% 100%;color:#101a4300}
:root[data-theme="light"] #app{box-shadow:inset 0 1px 0 var(--glass-hl), 0 40px 80px -40px #101a434c;background:linear-gradient(#ffffff6b 0%,#ffffff8c 100%)}
:root[data-theme="light"] .sb-head:before{background:linear-gradient(90deg,#101a4300,#5334c9,#101a4300)}
:root[data-theme="light"] .sb-head:after{background:radial-gradient(circle,#6a49e638,#6a49e600 70%)}
:root[data-theme="light"] .sb-logo{filter:drop-shadow(0 6px 18px #6a49e673)}
:root[data-theme="light"] .sb-brand{background:linear-gradient(110deg,#a08cf0 0%,#5334c9 22%,#3f2aa8 38%,#6a49e6 52%,#4a2fb8 68%,#4a2fb8 84%,#5e3ab3 100%) 0 0/300% 100%;color:#101a4300}
:root[data-theme="light"] .sb-rank{background:#101a4308;border:1px solid #101a4314}
:root[data-theme="light"] .sb-rank:hover{border-color:#6a49e666}
:root[data-theme="light"] .sb-coach{background:linear-gradient(135deg,#4f2d9e,#4e348a);border:1px solid #6a49e659}
:root[data-theme="light"] .sb-coach small{color:#5334c9}
:root[data-theme="light"] .sb-coach p{color:#2f2c4e}
:root[data-theme="light"] .sb-coach-cta{color:#4a2fb8}
:root[data-theme="light"] .sb-avatar{color:#5334c9;background:linear-gradient(135deg,#dedcf0,#ffffff);border:1px solid #6a49e680}
:root[data-theme="light"] .sb-plan{border:1px solid #101a4324}
:root[data-theme="light"] .sb-plan.pro{color:#ffffff;background:linear-gradient(#9f7cf0,#5f43d4);border-color:#101a4300}
}
@media (prefers-reduced-transparency:reduce){
:root[data-theme="light"] .lp-nav,:root[data-theme="light"] .lp-spot{background:#e0e3eb}
}
/* ==== derive de app.css ==== */
:root[data-theme="light"] .rp-street.on{color:#1d2a57}
:root[data-theme="light"] .rp-btn.rp-main{color:#1d2a57}
:root[data-theme="light"] body{background:#f7f6ff}
:root[data-theme="light"] .brand{background:linear-gradient(110deg,#8A8878 0%,#243059 30%,#ab97d8 46%,#243059 62%,#9A9788 100%) 0 0/300% 100%}
:root[data-theme="light"] .btn-primary{background:#243059 !important;color:#f2f2f8 !important}
:root[data-theme="light"] .card,:root[data-theme="light"] .decision-card,:root[data-theme="light"] .stat-tile,:root[data-theme="light"] .rp-step,:root[data-theme="light"] .rp-stage{background:#eeedf5}
:root[data-theme="light"] .card:hover,:root[data-theme="light"] .decision-card:hover{background:#e9e8f3}
:root[data-theme="light"] .bg-layer{background:radial-gradient(1200px 700px at 14% -12%, rgba(222,219,200,.055) 0%, rgba(222,219,200,0) 62%),
      radial-gradient(900px 600px at 100% -6%, rgba(222,219,200,.03) 0%, rgba(222,219,200,0) 58%),
      #f7f6ff}
:root[data-theme="light"] body{background-color:#f7f6ff}
:root[data-theme="light"] .n-serif{color:#243059}
:root[data-theme="light"] .n-body{color:#413d6c}
:root[data-theme="light"] .n-frame{background:#f6f6fa}
:root[data-theme="light"] .n-p1{background:radial-gradient(closest-side,#6e4dbb,transparent 72%)}
:root[data-theme="light"] .n-p2{background:radial-gradient(closest-side,#c5c2de,transparent 74%)}
:root[data-theme="light"] .n-p3{background:radial-gradient(closest-side,#dedcec,transparent 70%)}
:root[data-theme="light"] .n-nav{background:#f7f6ff}
:root[data-theme="light"] .n-nav a:hover{color:#1d2a57}
:root[data-theme="light"] .n-hero-side p{color:#413d6c}
:root[data-theme="light"] .n-btn{background:#243059;color:#f2f2f8}
:root[data-theme="light"] .n-about-card{background:#eeedf5}
:root[data-theme="light"] .n-card{background:#e1dfee}
:root[data-theme="light"] .n-card:hover{background:#dddbec}
:root[data-theme="light"] .n-icon{color:#243059}
:root[data-theme="light"] .n-card p{color:#413d6c}
:root[data-theme="light"] .n-foot nav a:hover{color:#1d2a57}
:root[data-theme="light"] .sb-brand{background:linear-gradient(110deg,#8A8878 0%,#243059 30%,#ab97d8 46%,#243059 62%,#9A9788 100%) 0 0/300% 100%}
:root[data-theme="light"] .sb-coach{background:#ebeaf4}
:root[data-theme="light"] .sb-coach small{color:#243059}
:root[data-theme="light"] .sb-coach-cta{color:#1d2a57}
:root[data-theme="light"] .medal-or{--m:linear-gradient(160deg,#ab97d8,#243059 50%,#8A8878)}
:root[data-theme="light"] .tab.active{color:#1d2a57}
:root[data-theme="light"] .tab.active .icon{color:#f2f2f8;background:linear-gradient(160deg,#ab97d8,#243059 55%,#A9A796)}
:root[data-theme="light"] .tab .icon{background:linear-gradient(160deg,#e3e2ef,#ebeaf4);color:#413d6c}
:root[data-theme="light"] .tab.active:after{background:#243059}
:root[data-theme="light"] .mode-icon,:root[data-theme="light"] .quick-tile .qt-icon{color:#243059;background:linear-gradient(160deg,#e3e2ef,#ebeaf4)!important}
:root[data-theme="light"] .quick-tile:hover .qt-icon,:root[data-theme="light"] .card:hover .mode-icon{color:#ab97d8}
:root[data-theme="light"] .mc-leak .mode-icon{color:#b8324a}
:root[data-theme="light"] .seg-btn.active{color:#1d2a57}
:root[data-theme="light"] .badge{--c:#243059}
:root[data-theme="light"] .badge-accent{--c:#243059}
:root[data-theme="light"] .badge-good{--c:#2f8f5c}
:root[data-theme="light"] .badge-warn{--c:#8a5709}
:root[data-theme="light"] .badge-danger{--c:#b8324a}
:root[data-theme="light"] .dna-cell.badge-good{color:#2f8f5c}
:root[data-theme="light"] .dna-cell.badge-warn{color:#8a5709}
:root[data-theme="light"] .dna-cell.badge-danger{color:#b8324a}
:root[data-theme="light"] .rv-hand{color:#1d2a57}
:root[data-theme="light"] .rv-line span{color:#413d6c}
:root[data-theme="light"] .rv-line b{color:#1d2a57}
:root[data-theme="light"] .q-back{color:#413d6c}
:root[data-theme="light"] .q-back:hover{color:#1d2a57}
:root[data-theme="light"] .login-wrap{background:#eeedf5}
:root[data-theme="light"] .login-label{color:#413d6c}
:root[data-theme="light"] .login-wrap .btn-ghost{color:#413d6c}
:root[data-theme="light"] .login-wrap .btn-ghost:hover{color:#1d2a57}
:root[data-theme="light"] .pw-hex{stroke:#243059}
:root[data-theme="light"] .pw-kicker span{color:#243059}
:root[data-theme="light"] .pw-sub{color:#413d6c}
:root[data-theme="light"] .pw-list b{color:#1d2a57}
:root[data-theme="light"] .pw-list span{color:#413d6c}
:root[data-theme="light"] .pw-check{stroke:#2f8f5c}
:root[data-theme="light"] .pw-cta .btn-ghost{color:#413d6c}
:root[data-theme="light"] .pro-list li{color:#2f2c4e}
:root[data-theme="light"] .pro-list li:before{background:#243059}
:root[data-theme="light"] .qt-pro{color:#8a5709}
:root[data-theme="light"] .pf-bar-seuil{background:#1d2a57}
:root[data-theme="light"] .pf-legend-sl:before{background:#1d2a57}
:root[data-theme="light"] .qt-label{color:#2f2c4e}
:root[data-theme="light"] .sb-coach p{color:#413d6c}
:root[data-theme="light"] .sb-rank-text b{color:#1d2a57}
:root[data-theme="light"] .sb-rank-text small{color:#504b85}
:root[data-theme="light"] .sb-bar i{background:linear-gradient(90deg,#8A8878,#243059)}
:root[data-theme="light"] .sb-avatar{color:#f2f2f8;background:linear-gradient(160deg,#ab97d8,#A9A796)}
:root[data-theme="light"] .sb-pseudo{color:#2f2c4e}
:root[data-theme="light"] .sb-plan{color:#504b85}
:root[data-theme="light"] .sb-plan.pro{color:#f2f2f8;background:linear-gradient(160deg,#ab97d8,#243059 55%,#A9A796)}
:root[data-theme="light"] .medal{background:var(--m,linear-gradient(160deg,#cbc9e2,#e4e3f0))}
:root[data-theme="light"] .medal-bronze{--m:linear-gradient(160deg,#9273d9,#7b5bc6 52%,#603ab7)}
:root[data-theme="light"] .rank-card-text b{color:#1d2a57}
:root[data-theme="light"] .rank-card-text small{color:#504b85}
:root[data-theme="light"] .rankup-card{background:radial-gradient(120% 90% at 50% -10%, rgba(107,90,58,.34), transparent 62%), #ececf5}
:root[data-theme="light"] .rankup-title{color:#1d2a57}
:root[data-theme="light"] .rankup-tagline{color:#413d6c}
:root[data-theme="light"] .daily-num{color:#1d2a57}
:root[data-theme="light"] .daily-body b{color:#1d2a57}
:root[data-theme="light"] .daily-body small{color:#504b85}
:root[data-theme="light"] .daily-cta{color:#243059}
:root[data-theme="light"] .daily-card.done .daily-num{color:#504b85}
:root[data-theme="light"] .landing-title{color:#1d2a57}
:root[data-theme="light"] .landing-sub{color:#413d6c}
/* ==================================================================
   CORRECTIONS CIBLEES DU MODE CLAIR
   ------------------------------------------------------------------
   Le reste de cette feuille est genere depuis les feuilles sombres.
   Ce qui suit corrige les cas que la conversion mecanique ne peut pas
   deviner, et vient donc en dernier pour gagner a specificite egale.
   Chaque bloc dit pourquoi il existe.
   ================================================================== */

/* 1. Le bouton principal etait un aplat creme sur fond noir. Converti
      mecaniquement il devenait bleu nuit sur blanc : lisible, mais ce
      n'est plus l'accent de la marque. En clair, l'action principale
      est violette avec un texte blanc. */
/* app.css impose l'aplat creme du bouton principal avec !important
   (correctif anterieur d'Arthur). Une regle normale ne peut donc pas le
   reprendre : c'est le seul endroit de cette feuille ou !important est
   justifie, et il l'est uniquement pour repondre a un !important. */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .sb-coach-cta.primary,
:root[data-theme="light"] .btn.btn-primary{
  background:linear-gradient(180deg,#7f61f2,#6a49e6)!important;
  color:#ffffff!important; border-color:#5f3fd8;
  box-shadow:0 8px 18px -10px #6a49e680;
}
:root[data-theme="light"] .btn-primary:hover{ background:linear-gradient(180deg,#8b70f5,#7355ea)!important; }

/* 2. Le mot Bluffy est un degrade applique au texte
      (-webkit-text-fill-color:transparent). Les ors convertis un a un
      donnaient une rampe qui passait par du presque blanc : le mot
      disparaissait au milieu. On reecrit la rampe entiere. */
:root[data-theme="light"] .sb-brand,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .boot-logo,
:root[data-theme="light"] .n-mark b{
  background-image:linear-gradient(110deg,#4a2fb8 0%,#6a49e6 30%,#8f76f2 50%,#5334c9 72%,#4a2fb8 100%);
  -webkit-text-fill-color:transparent;
}

/* 3. Les pastilles d'icone etaient un relief graphite. En clair, un
      relief sombre au milieu d'une carte blanche fait une tache : on
      passe sur une surface claire avec un liset. */
:root[data-theme="light"] .mode-icon,
:root[data-theme="light"] .quick-tile .qt-icon,
:root[data-theme="light"] .tab:not(.active) .icon{
  background:linear-gradient(160deg,#ffffff,#efedfb)!important;
  color:var(--accent);
  box-shadow:inset 0 0 0 1px #dedcf0, 0 2px 6px -4px #101a4326;
}

/* 4. Les libelles des acces rapides etaient un gris clair prevu pour du
      texte sur fond noir. */
:root[data-theme="light"] .qt-label{ color:var(--text); }
:root[data-theme="light"] .qt-pro{ color:#ffffff; background:var(--warn); }

/* 5. Les onglets inactifs de la navigation tombaient a 3,5:1. */
:root[data-theme="light"] .tab{ color:#4e5679; }
:root[data-theme="light"] .tab.on,
:root[data-theme="light"] .tab[aria-current="page"]{ color:var(--accent); }

/* 6. Les textes secondaires places sur les surfaces les plus claires. */
:root[data-theme="light"] .sub,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .daily-sub,
:root[data-theme="light"] .sb-coach p{ color:#4e5679; }
:root[data-theme="light"] .daily-cta,
:root[data-theme="light"] .daily-num{ color:var(--accent-hi); }

/* 7. Le voile de la barre laterale : en sombre il eclaircit, en clair
      il doit poser une surface franche, sinon les textes flottent sur
      un fond a 35 % d'opacite et le contraste devient imprevisible. */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .sb,
:root[data-theme="light"] .tabbar{ background:var(--surface); border-color:var(--border); }

/* Emplacement du selecteur dans la barre du haut et dans la navigation
   de la page d'accueil : il se pose a droite, sans pousser le reste. */
.topbar{ position:relative; }
.topbar-tools{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.n-nav .theme-switch{ margin-left:14px; }
@media (max-width:720px){ .n-nav .theme-switch{ margin-left:0; } }

/* 8. Derniers ecarts de contraste mesures au navigateur (< 4,5:1).
      Ces trois regles portent une specificite au moins egale a celle
      des regles generees qu'elles remplacent, plutot qu'un !important. */
:root[data-theme="light"] .daily-card .daily-num{ color:#4a2fb8; }
:root[data-theme="light"] .daily-card .daily-cta{ color:#5334c9; }
:root[data-theme="light"] .sidebar .sb-avatar,
:root[data-theme="light"] .sb .sb-avatar,
:root[data-theme="light"] .sb-foot .sb-avatar{
  color:#3f2aa8; background:linear-gradient(135deg,#e6e1fb,#ffffff);
  border:1px solid #c3b8f4;
}
/* Le bouton de theme actif : la pastille violette a 12 % laissait le
   libelle a 4,29:1, juste sous le seuil. On assombrit le libelle. */
.theme-switch button[aria-pressed="true"]{ color:#4a2fb8; }
:root[data-theme="dark"] .theme-switch button[aria-pressed="true"]{ color:var(--accent-hi); }

/* 9. Le mot Bluffy en degrade : la rampe convertie passait par un
      violet clair, ce qui faisait tomber la moyenne du texte a 2,6:1.
      En clair, la rampe reste entierement dans les violets profonds. */
:root[data-theme="light"] .sb-brand,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .boot-logo,
:root[data-theme="light"] .n-mark b{
  background-image:linear-gradient(110deg,#311d86 0%,#4a2fb8 34%,#5f43d4 52%,#3f2aa8 74%,#311d86 100%);
}

/* 10. L'echelle des rangs dans le profil : les paliers non atteints
       etaient volontairement estompes. A 4,3:1 ils passaient juste sous
       le seuil du texte courant. */
:root[data-theme="light"] .ladder-step,
:root[data-theme="light"] .ladder-step span{ color:#4e5679; }
:root[data-theme="light"] .ladder-step.on,
:root[data-theme="light"] .ladder-step.done{ color:var(--accent-hi); }

/* 11. Le mot Bluffy est peint DANS le texte (background-clip:text). La
       conversion automatique le reecrit avec la forme courte
       « background: », qui remet background-clip a border-box : le
       degrade devenait alors un rectangle plein et le mot disparaissait
       completement. On repose les deux proprietes. */
:root[data-theme="light"] .sb-brand,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .boot-logo,
:root[data-theme="light"] .n-mark b{
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#0000;
  background-size:300% 100%; background-position:0 0;
}

/* 12. Defaut anterieur, present en production avant cette livraison :
       dans la grille des ranges, les mains hors range utilisent
       --text-faint sur --surface, soit 4,39:1 en sombre, juste sous le
       seuil AA. Le texte fait 8,5 px : c'est justement la ou il faut
       etre au-dessus. On remonte la couleur pour ces cellules
       uniquement, sans toucher au jeton --text-faint utilise ailleurs.
       Corrige dans les deux themes. */
:root[data-theme="dark"] .range-cell:not(.in):not(.call):not(.added){ color:#8d8e98; }
:root[data-theme="light"] .range-cell:not(.in):not(.call):not(.added){ color:#5c6486; }

/* 13. L'onglet actif : sa pastille doit rester pleine et contrastee,
       sinon l'element courant de la navigation devient un rond blanc
       sur fond blanc. La regle 3 l'excluait deja, celle-ci lui donne sa
       forme claire. */
:root[data-theme="light"] .tab.active .icon{
  color:#ffffff;
  background:linear-gradient(160deg,#8b70f5,#6a49e6 55%,#4a2fb8);
  box-shadow:inset 0 1px #ffffff59, 0 8px 18px -8px #6a49e680;
}
:root[data-theme="light"] .tab.active{
  color:var(--accent-hi);
  background:linear-gradient(#6a49e614,#6a49e608);
  box-shadow:inset 0 1px 0 #ffffffcc, 0 0 24px -10px #6a49e659;
}

/* ==================================================================
   14. CARTES DE REPONSE (design valide des exercices)
   ------------------------------------------------------------------
   Grandes cartes de texte, aucun pictogramme. Le terme poker est en
   sous-titre pour que « Passer » et « fold » s'apprennent ensemble.
   Ces regles valent pour les deux themes : elles n'utilisent que des
   jetons, jamais une couleur ecrite en dur.
   ================================================================== */
.answer-grid{
  display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.answer-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; min-height:78px; padding:16px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius, 14px);
  background:var(--surface-2); color:var(--text);
  font:inherit; cursor:pointer; text-align:center;
  transition:border-color .12s, background-color .12s;
}
.answer-card:hover{ border-color:var(--text-faint); }
.answer-label{ font-size:17px; font-weight:700; line-height:1.2; }
.answer-term{ font-size:12.5px; color:var(--text-dim); }
/* L'etat choisi ne repose pas sur la couleur seule : bordure epaisse,
   fond distinct, ET le mot « Choisi » ecrit dans la carte. */
.answer-card.is-picked{
  border-color:var(--accent); border-width:2px;
  background:var(--accent-soft);
}
.answer-state{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); min-height:14px; margin-top:2px;
}
.verify-row{ margin-top:12px; }
.verify-btn{ width:100%; min-height:48px; font-size:15px; }
.verify-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.answer-hint{ margin:8px 0 0; font-size:12.5px; color:var(--text-dim); text-align:center; }

/* Telephone : une colonne, cartes hautes, bouton de validation en bas
   donc atteignable au pouce. */
@media (max-width:560px){
  .answer-grid{ grid-template-columns:1fr; gap:8px; }
  .answer-card{ min-height:64px; padding:14px; flex-direction:row; gap:10px; justify-content:flex-start; text-align:left; }
  .answer-label{ font-size:16px; }
  .answer-state{ margin-left:auto; margin-top:0; }
}

/* 15. La tuile « Atelier d'etude » est un <a> et non un <div> : sans ces
       deux lignes elle heriterait du soulignement et de la couleur de
       lien, et se distinguerait des autres tuiles d'acces rapide. */
a.quick-tile{ text-decoration:none; color:inherit; display:block; }
a.quick-tile:hover{ text-decoration:none; }

/* Le selecteur de langue suit le theme clair comme le selecteur de
   theme : meme accent, meme contraste. */
:root[data-theme="light"] .lang-switch button[aria-pressed="true"]{ color:#4a2fb8; }
:root[data-theme="dark"] .lang-switch button[aria-pressed="true"]{ color:var(--accent-hi); }

/* ------------------------------- PROGRESSION LIEE PAR FORMAT
   Deux colonnes cote a cote (application / Academie), qui passent
   l'une sous l'autre sous 640 px. Elles ne sont pas additionnees :
   la mise en page doit donc les separer clairement plutot que de
   les faire lire comme un seul total. */
.lien-progression{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;
}
.lien-progression .lien-col{
  border:1px solid var(--border); background:var(--surface-2);
  border-radius:14px; padding:14px 15px;
}
.lien-progression .lien-col h3{
  margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-dim);
}
.lien-progression .lien-ligne{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 7px; font-size:14px; color:var(--text-dim);
}
.lien-progression .lien-ligne b{ color:var(--text); font-variant-numeric:tabular-nums; }
.lien-progression .lien-col .btn{ margin-top:8px; }
.lien-progression .lien-col .sub{ margin:0; }
@media (max-width:640px){ .lien-progression{ grid-template-columns:1fr; } }

/* ==================================================================
   HERO DU LANDING — LA PHOTO N'A PAS DE VARIANTE CLAIRE  (2026-09-11)
   ------------------------------------------------------------------
   Le cadre du hero (.n-frame) affiche une photographie de table de
   poker, sombre, identique dans les deux themes : il n'existe pas de
   rendu clair de cette scene. Le generateur d'inversion, lui, a traite
   ce cadre comme une surface ordinaire et a assombri tout ce qui est
   pose dessus. Resultat mesure en clair : le titre passait en bleu
   nuit sur la table noire, la barre de navigation devenait un galet
   blanc portant des liens creme, et le paragraphe de droite devenait
   illisible.
   La regle produit est simple et se tient : tout ce qui vit A
   L'INTERIEUR du cadre garde le traitement sombre, dans les deux
   themes. On le fait en redeclarant les variables du theme sombre sur
   le cadre lui-meme — ainsi les composants qui s'y trouvent (selecteur
   de langue, selecteur de theme, boutons) se recolorent tout seuls,
   sans avoir a les lister un par un — puis en annulant les quelques
   valeurs codees en dur que le generateur avait reecrites.
   Hors du cadre, le landing reste clair : c'est voulu.
   ================================================================== */
:root[data-theme="light"] .n-frame{
  color-scheme: dark;
  --bg:#0b0c0e; --bg-2:#101215;
  --surface:#15171b; --surface-2:#1b1e23; --surface-3:#22262d;
  --border:#2a2e35; --border-soft:#21242a;
  --text:#f2f1ec; --text-dim:#9c9ca3; --text-faint:#7c7d86;
  --accent:#d3a44c; --accent-hi:#e6c06e; --accent-dim:#8a7038;
  --accent-soft:#d3a44c24; --accent-ink:#1b140a;
  --glass:#15171c85; --glass-2:#1b1e249e; --glass-strong:#0e0f13b8;
  --glass-border:#ffffff16; --glass-border-hi:#ffffff29; --glass-hl:#ffffff12;
  --gold-glow:#d3a44c59; --focus-ring:#e6c06e;
  color:var(--text);
  background:#050505;
}
/* Les halos colores du fond de cadre restent ceux du sombre. */
:root[data-theme="light"] .n-frame .n-p1{ background:radial-gradient(closest-side,#6B5A3A,transparent 72%); }
:root[data-theme="light"] .n-frame .n-p2{ background:radial-gradient(closest-side,#3A4450,transparent 74%); }
:root[data-theme="light"] .n-frame .n-p3{ background:radial-gradient(closest-side,#2A2620,transparent 70%); }
/* Barre de navigation, marque, titre, colonne de droite, bouton. */
:root[data-theme="light"] .n-frame .n-nav{ background:#000; }
:root[data-theme="light"] .n-frame .n-nav a{ color:rgba(225,224,204,.8); }
:root[data-theme="light"] .n-frame .n-nav a:hover{ color:#E1E0CC; }
:root[data-theme="light"] .n-frame .n-serif{ color:#DEDBC8; }
:root[data-theme="light"] .n-frame .n-kicker{ color:rgba(225,224,204,.55); }
:root[data-theme="light"] .n-frame .n-hero-side p{ color:#C6CBD4; }
:root[data-theme="light"] .n-frame .n-note{ color:#9AA1AD; }
:root[data-theme="light"] .n-frame .n-btn{ background:#DEDBC8; color:#0A0A0A; }
/* Le mot « Bluffy » est peint dans le texte par un degrade. En clair il
   devient violet, ce qui est juste sur une page claire mais faux dans le
   cadre du hero, ou il se detache mal du bois sombre de la photo. On lui
   rend la rampe creme du landing sombre, la meme qu'emploie .brand. */
:root[data-theme="light"] .n-frame .n-mark b{
  background-image:linear-gradient(110deg,#8A8878 0%,#DEDBC8 30%,#F2F1E4 46%,#DEDBC8 62%,#9A9788 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#0000;
}

/* ==================================================================
   AUDIT.CSS EN THEME CLAIR                              (2026-09-11)
   ------------------------------------------------------------------
   Oubli de la livraison precedente : le generateur d'inversion n'a ete
   passe que sur la feuille compilee et sur app.css. audit.css, qui
   contient les corrections d'accessibilite, gardait donc ses quatorze
   couleurs sombres codees en dur dans les deux themes.
   Le cas le plus visible, mesure a l'ecran : les cartes de choix de
   l'onboarding (« A quoi joues-tu ? ») gardaient un fond #181b20 alors
   que leur titre, lui, suivait la variable de texte et passait en bleu
   nuit. Rapport de contraste mesure : 1,03 — donc invisible.
   Ce bloc est ecrit a la main plutot que genere : le generateur
   proposait un violet moyen pour la carte selectionnee, ce qui aurait
   reproduit le meme probleme a l'etat selectionne.
   Chaque valeur est verifiee a 4,5:1 minimum (AA texte courant).
   ------------------------------------------------------------------ */

/* Focus clavier : le dore n'a aucun contraste sur une page claire. */
:root[data-theme="light"] button:focus-visible,
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] summary:focus-visible,
:root[data-theme="light"] input:focus-visible,
:root[data-theme="light"] select:focus-visible,
:root[data-theme="light"] [role="button"]:focus-visible{ outline-color:var(--focus-ring); }

/* Cartes de choix : fond blanc, bordure assez marquee pour se detacher
   du fond lavande de la page, texte et sous-texte sur variables. */
:root[data-theme="light"] .learning-grid button.choice{
  background:var(--surface); border-color:#c4c0e2;
}
:root[data-theme="light"] .learning-grid button.choice:hover{ border-color:#a99fdc; }
/* Etat selectionne : teinte violette PALE. Le fond doit rester clair,
   sinon le titre — qui suit var(--text) — redevient illisible. Le choix
   ne repose pas que sur la couleur : la bordure epaissit aussi. */
:root[data-theme="light"] .learning-grid button.choice.selected{
  background:#f1ecff; border-color:var(--accent);
}
:root[data-theme="light"] .learning-grid button.choice small{ color:var(--text-dim); }

/* Encadres et tableaux des lecons. */
:root[data-theme="light"] .model-note{ border-color:#c9c2ee; }
:root[data-theme="light"] .learning-example{ background:var(--surface-2); }
:root[data-theme="light"] .learning-table th,
:root[data-theme="light"] .learning-table td{ border-bottom-color:#d3d0e8; }
:root[data-theme="light"] .learning-error{ color:var(--danger); }
:root[data-theme="light"] .glossary-list dt{ color:var(--accent-hi); }
:root[data-theme="light"] .feedback-panel.assisted{ border-color:#9aa8c4; background:#eaf0f8; }
/* .learning-card est deja une carte claire (fond ivoire, encre noire) :
   elle convient telle quelle dans les deux themes, on n'y touche pas. */

/* ==================================================================
   CARTES A JOUER : PAS DE VARIANTE CLAIRE NON PLUS    (2026-09-11)
   ------------------------------------------------------------------
   Une carte a jouer est un objet du monde reel : fond ivoire, encre
   rouge et encre noire. Il n'existe pas de carte « en mode clair ».
   Le generateur d'inversion l'a pourtant traitee comme une surface :
   il a fait virer le degrade ivoire au violet moyen (#ab97d8) et
   retourne l'encre noire en blanc (#faf9ff). Resultat a l'ecran : le
   9 de pique s'affichait en blanc sur du violet, illisible, pendant
   que le 9 de coeur restait rouge. Les deux couleurs de la carte ne
   veulent alors plus rien dire l'une par rapport a l'autre.
   On rend donc a la carte son apparence d'origine dans les deux
   themes. Le dos de carte, lui, reste un visuel de marque et garde sa
   variante claire (--theme-card-back).
   ================================================================== */
:root[data-theme="light"] .playing-card,
:root[data-theme="light"] .playing-card-mini{
  background:linear-gradient(160deg,#fff 0%,#edebe3 100%);
  border:1px solid #00000026;
}
:root[data-theme="light"] .playing-card{
  box-shadow:0 10px 22px -12px #101a4359, inset 0 1px #ffffffb3;
}
:root[data-theme="light"] .playing-card.black,
:root[data-theme="light"] .playing-card-mini.black{ color:#16181c; }
:root[data-theme="light"] .playing-card.red,
:root[data-theme="light"] .playing-card-mini.red{ color:#c43b4e; }

/* Profils adverses : la famille bleue manquait a l'inversion claire.
   Le badge (.villain-tag) ecrit sa couleur SUR un aplat a 16 % de cette
   meme couleur : un ton clair y perd tout contraste. Mesure en clair
   avant correction : 2,78:1 pour le badge « FISH ». Chaque teinte est
   donc reprise en version foncee, et verifiee sur son propre aplat. */
:root[data-theme="light"] .villain-card.v-blue,
:root[data-theme="light"] .whatif-row.v-blue{ --v:#1a6b8c; }
:root[data-theme="light"] .villain-card.v-good,
:root[data-theme="light"] .whatif-row.v-good{ --v:#237a4b; }
:root[data-theme="light"] .whatif-row.v-danger{ --v:#b8324a; }
/* Le badge de profil ecrit sa couleur sur un aplat a 16 % de la meme
   couleur. En sombre cet aplat est presque noir, le texte se detache ;
   en clair il est presque blanc, et aucune teinte assez vive pour rester
   « bleue » ou « verte » n'y passe les 4,5:1. On inverse donc le badge
   en clair : aplat plein dans la couleur du profil, encre blanche.
   Mesure : 5,3 a 6,2:1 selon le profil. */
:root[data-theme="light"] .villain-tag{
  color:#fff; background:var(--v); border-color:var(--v);
}