/* ============================================================================
   THÈMES (peaux) — chargé APRÈS app.css. « Le thème change TOUT ».
   Architecture :
   - La PALETTE de chaque peau est posée au niveau html[data-session-theme="x"]
     => elle surcharge :root / [data-theme=dark] pour TOUTE l'app (topbar, boutons,
     cartes, inputs, formulaire de séance) qui suivent déjà var(--card/--primary/...).
   - Un bloc CHROME GÉNÉRIQUE (une fois) repeint la SIDEBAR / topbar / brand via des
     variables --sth-* que chaque peau fournit (la sidebar a un dégradé en dur dans
     app.css => on surcharge en !important).
   - Les DÉCORATIONS de séance (dégradés, pseudo-éléments, mises en page) restent
     SCOPÉES à .session-head / .session-show-layout / .session-show-modules-card /
     #sessionForm pour ne PAS déborder sur le reste de l'app.
   - Couleurs SÉMANTIQUES (zones .z-bg-*, nages, matériel du récap) non repeintes.
   Spécificité : html[data-session-theme="x"] (0,1,1) chargé après app.css gagne
   sur :root et html[data-theme=dark]. Une peau active prime donc sur clair/sombre.
   ========================================================================== */

@keyframes sthBlink{50%{opacity:0}}
@keyframes sthScan{0%{transform:translateY(-100%)}100%{transform:translateY(900%)}}
@keyframes sthPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* Synthwave : grille au sol qui défile vers le spectateur (effet route rétro). */
@keyframes sthGrid{0%{background-position:0 0,0 0}100%{background-position:0 34px,0 0}}
/* Console : pluie verte « Matrix » qui descend. */
@keyframes sthRain{0%{background-position:0 -200px}100%{background-position:0 200px}}
@keyframes sthFlicker{0%,100%{opacity:1}48%{opacity:.97}50%{opacity:.85}52%{opacity:.97}}
/* Bulles qui montent (thèmes aquatiques cristal/grandbleu) — comme la page vitrine. */
@keyframes sthRise{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}12%{opacity:.8}85%{opacity:.45}100%{transform:translateY(-112vh) translateX(26px) scale(1);opacity:0}}
.sth-bubbles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sth-bubble{position:absolute;bottom:-60px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),rgba(41,196,216,.28) 60%,rgba(15,127,209,.12));
  box-shadow:inset 0 0 6px rgba(255,255,255,.6);animation:sthRise linear infinite}
@media (prefers-reduced-motion:reduce){.sth-bubble{animation:none;display:none}}

/* --- Sélecteur de thème dans la topbar (allure « bouton ghost »). --- */
.session-theme-select{
  width:auto;border:1px solid var(--border);background:var(--card);color:var(--text);
  border-radius:12px;padding:8px 10px;font:inherit;font-weight:700;font-size:13px;
  cursor:pointer;max-width:210px;
}
.session-theme-select:hover{border-color:var(--primary)}
@media(max-width:900px){.session-theme-select{max-width:none;flex:1 1 auto}}

/* ⭐⭐ D4 (12/08/2026) — LE TEXTE GRIS D'UNE SÉANCE PASSE LA NORME SUR TOUTES LES PEAUX.
   ================================================================================================
   🔴 CE QUE ÇA FERME (défaut relevé par Simon : « texte gris pâle dans une séance ») : le gris
   secondaire (`--muted`) de trois peaux ne contrastait pas assez avec leur carte. MESURE des
   17 peaux, rapport `--muted` / `--card` (WCAG 2.1, minimum 4,5:1 pour un texte normal) :
       Parcours (timeline)   #5d8580 sur #f4fbfa  =  3,90:1  ⛔
       Carnet (ticket)       #8a7355 sur #fbf5ea  =  4,15:1  ⛔
       Lagon (aqua)          #5b7d8a sur #f2fbfd  =  4,21:1  ⛔
   Les quatorze autres tenaient déjà (4,83 à 8,47:1) — les peaux SOMBRES étaient toutes au-dessus
   de 5,6:1, ce que la mesure a montré à rebours de l'intuition.
   ⛔ TEINTE GARDÉE, ON N'A QUE FONCÉ : chaque gris est le même, multiplié sur ses trois canaux
   jusqu'à franchir 4,6:1 (petite marge). Aucune autre variable n'est touchée, aucune règle n'est
   ajoutée — donc rien à reprendre ailleurs.
       timeline #5d8580 -> #547874 (4,64:1) · ticket #8a7355 -> #816c4f (4,62:1)
       aqua     #5b7d8a -> #567682 (4,64:1)
   ================================================================================================ */

/* ===================== CHROME repeint par la peau (générique) =====================
   Ne s'applique QUE si une peau est active (attribut présent). Chaque peau fournit
   --sth-sidebar (dégradé), --sth-sidebar-fg, --sth-sidebar-muted, --sth-brand.
   La topbar/boutons/cartes suivent déjà la palette (vars) — on force juste la
   topbar à var(--card) (elle a un fond blanc semi-opaque en dur dans app.css). */
html[data-session-theme] .sidebar,
html[data-session-theme] .app-sidebar{
  background:var(--sth-sidebar,linear-gradient(180deg,#061a30,#082f57 62%,#063f68))!important;
  color:var(--sth-sidebar-fg,#e9f6ff)!important;
}
html[data-session-theme] .sidebar a{color:var(--sth-sidebar-fg,#e9f6ff)!important}
html[data-session-theme] .sidebar a:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
html[data-session-theme] .sidebar a.active,
html[data-session-theme] .sidebar .nav-link.active{
  background:var(--sth-sidebar-active,rgba(255,255,255,.18))!important;color:#fff!important;
}
html[data-session-theme] .brand{color:var(--sth-sidebar-fg,#fff)!important}
html[data-session-theme] .brand-mark{background:var(--sth-brand,var(--primary))!important}
html[data-session-theme] .nav-section span{color:var(--sth-sidebar-muted,rgba(255,255,255,.62))!important}
html[data-session-theme] .nav-section{border-top-color:rgba(255,255,255,.12)!important}
/* Topbar : suit la carte du thème (le fond blanc en dur casserait les peaux sombres). */
html[data-session-theme] .topbar,
html[data-session-theme] .app-topbar{background:var(--card)!important;border-color:var(--border)!important}

/* --- Polices de peau appliquées au DISPLAY séance (le reste de l'app garde sa
   police système — éviter d'imposer du mono partout). --- */
[data-session-theme] .session-head,
[data-session-theme] .session-show-layout,
[data-session-theme] #sessionForm{font-family:var(--font-body,inherit)}
[data-session-theme] .session-head__title,
[data-session-theme] .session-recap__hero-value,
[data-session-theme] .session-module__title,
[data-session-theme] .session-recap__heading{font-family:var(--font-title,inherit)}

/* ════════════════════════════ 🌊 EAU ════════════════════════════════════ */

/* ───── Lagon (aqua) : bleu piscine propre. SOBRE assumé. ─────────────────── */
html[data-session-theme="aqua"]{
  --bg:#e7f6fb; --card:#f2fbfd; --text:#0c2733; --muted:#567682; --border:#bae6fd;
  --primary:#0891b2; --primary-2:#06b6d4; --shadow:0 10px 30px rgba(8,90,110,.12);
  --hero-grad:linear-gradient(135deg,#0891b2 0%,#22d3ee 100%); --hero-fg:#fff;
  --module-bg:rgba(8,145,178,.05);
  --sc-rep-bg:#0891b2; --sc-rep-fg:#fff; --sc-subrep-bg:#cffafe; --sc-subrep-fg:#075985;
  --sc-bracket:#7dd3fc; --sc-dist:#0e7490; --sc-txt:#155e75; --sc-rowhover:#ecfeff;
  --chip-bg:#fff; --chip-ic-bg:rgba(8,145,178,.16);
  --kw-int-bg:rgba(8,145,178,.16); --kw-nage-bg:rgba(2,132,199,.16); --kw-mat-bg:rgba(13,148,136,.18);
  --sth-sidebar:linear-gradient(180deg,#042834,#064d5e 58%,#077184);
  --sth-sidebar-fg:#eafdff; --sth-sidebar-muted:rgba(186,230,253,.85); --sth-brand:#22d3ee;
}
[data-session-theme="aqua"] .sc-rep{border-radius:999px}

/* ───── Lignes d'eau (lanes) : app bleu clair ; carte contenu = BASSIN vu de
   dessus (eau profonde + caustiques + cordes-flotteurs), pastille = bouée-anneau. */
html[data-session-theme="lanes"]{
  --bg:#eaf2fc; --card:#f5f9ff; --text:#11214a; --muted:#5d6b8e; --border:#cdddf6;
  --primary:#1e40af; --primary-2:#2563eb; --shadow:0 10px 30px rgba(11,40,90,.14);
  --hero-grad:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); --hero-fg:#fff;
  --module-bg:rgba(255,255,255,.06);
  --sc-rep-fg:#0b2f63; --sc-subrep-bg:rgba(255,255,255,.16); --sc-subrep-fg:#eaf3ff;
  --sc-bracket:rgba(255,255,255,.4); --sc-dist:#fff; --sc-txt:#dde9fb; --sc-rowhover:rgba(255,255,255,.07);
  --chip-bg:#fff; --chip-ic-bg:rgba(30,64,175,.13);
  --kw-int-bg:rgba(255,255,255,.2); --kw-nage-bg:rgba(255,255,255,.2); --kw-mat-bg:rgba(255,255,255,.2);
  --sth-sidebar:linear-gradient(180deg,#0a2f6b,#143f86 60%,#0b4ea8);
  --sth-sidebar-fg:#eaf3ff; --sth-sidebar-muted:rgba(186,214,250,.72); --sth-brand:#38bdf8;
}
[data-session-theme="lanes"] .session-show-modules-card{
  background:
    radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.16),transparent 60%),
    radial-gradient(80% 50% at 90% 100%,rgba(125,211,252,.22),transparent 70%),
    linear-gradient(180deg,#1366c7,#0a3f86);
  border-color:#2e6fc0; color:#eaf3ff;
}
[data-session-theme="lanes"] .session-show-modules-card h2,
[data-session-theme="lanes"] .session-show-modules-card .session-module__title,
[data-session-theme="lanes"] .session-show-modules-card .session-module__volume{color:#fff}
[data-session-theme="lanes"] .session-content{
  background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(37,99,235,.04) 30px 31px);
}
[data-session-theme="lanes"] .session-module{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
[data-session-theme="lanes"] .sc-block + .sc-block{
  margin-top:.5rem;padding-top:.5rem;
  border-top:3px dotted;border-image:repeating-linear-gradient(90deg,#ef4444 0 10px,#fff 10px 20px,#38bdf8 20px 30px) 3;
}
[data-session-theme="lanes"] .sc-rep{
  width:2.1rem;height:2.1rem;min-width:0;border-radius:50%;padding:0;
  background:#fff;border:4px solid #ef4444;color:#0b2f63;font-size:.72rem;box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* ════════════════════════════ ⏱️ PERF ═══════════════════════════════════ */

/* ───── Chrono : app sombre = TABLEAU D'AFFICHAGE, chiffres LED ambre/rouge. ── */
html[data-session-theme="chrono"]{
  --bg:#070708; --card:#0c0c0e; --text:#f4f4f5; --muted:#8a8a90; --border:#262629;
  --primary:#f43f5e; --primary-2:#fb7185; --shadow:0 10px 30px rgba(0,0,0,.55);
  --hero-grad:linear-gradient(135deg,#0a0a0a 0%,#262626 100%); --hero-fg:#fff;
  --module-bg:#141417;
  --sc-rep-bg:#1c1c1f; --sc-rep-fg:#fbbf24; --sc-subrep-bg:#1c1c1f; --sc-subrep-fg:#fbbf24;
  --sc-bracket:#3a3a3f; --sc-dist:#fbbf24; --sc-txt:#d4d4d8; --sc-rowhover:rgba(251,191,36,.06);
  --chip-bg:#141417; --chip-ic-bg:rgba(244,63,94,.16);
  --font-num:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --kw-int-bg:transparent; --kw-int-fg:#fbbf24; --kw-nage-bg:transparent; --kw-nage-fg:#93c5fd;
  --kw-mat-bg:transparent; --kw-mat-fg:#f0abfc;
  --sth-sidebar:linear-gradient(180deg,#0a0a0a,#1a1a1a); --sth-sidebar-fg:#f4f4f5;
  --sth-sidebar-muted:rgba(244,63,94,.7); --sth-brand:#f43f5e;
}
[data-session-theme="chrono"] .sc-main{border-bottom:1px solid #1f1f22;padding:.4rem .25rem;align-items:center}
[data-session-theme="chrono"] .sc-rep{border:1px solid #3a3a3f;font-family:var(--font-num);font-size:.76rem}
[data-session-theme="chrono"] .sc-dist{font-size:1.7rem;line-height:1;letter-spacing:-.02em;text-shadow:0 0 10px rgba(251,191,36,.55)}
[data-session-theme="chrono"] .sc-dep{font-size:1.15rem;font-weight:800;color:#fb7185;text-shadow:0 0 9px rgba(244,63,94,.55)}
[data-session-theme="chrono"] .session-module__title{text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;color:#fb7185}
[data-session-theme="chrono"] .session-recap__hero-value{font-family:var(--font-num);letter-spacing:.05em;text-shadow:0 0 14px rgba(251,191,36,.55)}

/* ───── Carbone : TABLEAU DE BORD (grille de cartes-capteurs, trame carbone). 2 TEINTES :
   jaune (perf) + rouge. Le décor est PARTAGÉ (accents = var(--primary) de la teinte). */
html[data-session-theme="carbone"]{
  --bg:#0b0d10; --card:#15181c; --text:#e8eaed; --muted:#9aa0a8; --border:#2a2f36;
  --primary:#facc15; --primary-2:#eab308; --shadow:0 10px 30px rgba(0,0,0,.45);
  --hero-grad:linear-gradient(135deg,#0b0d10 0%,#23272e 100%); --hero-fg:#facc15;
  --module-bg:#1b1f24;
  --sc-rep-bg:#facc15; --sc-rep-fg:#1a1a1a; --sc-subrep-bg:#23272e; --sc-subrep-fg:#fde68a;
  --sc-bracket:#4b5563; --sc-dist:#facc15; --sc-txt:#d1d5db; --sc-rowhover:rgba(250,204,21,.07);
  --chip-bg:#1b1f24; --chip-ic-bg:rgba(250,204,21,.16);
  --font-num:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --kw-int-bg:rgba(250,204,21,.18); --kw-nage-bg:rgba(96,165,250,.2); --kw-mat-bg:rgba(45,212,191,.2);
  --sth-sidebar:linear-gradient(180deg,#0b0d10,#1b1f24); --sth-sidebar-fg:#e8eaed;
  --sth-sidebar-muted:rgba(250,204,21,.7); --sth-brand:#facc15;
}
html[data-session-theme="carbone-rouge"]{
  --bg:#100a0b; --card:#1a1416; --text:#f1e8ea; --muted:#a89aa0; --border:#382a2e;
  --primary:#f43f5e; --primary-2:#fb7185; --shadow:0 10px 30px rgba(0,0,0,.45);
  --hero-grad:linear-gradient(135deg,#100a0b 0%,#2a1d20 100%); --hero-fg:#fb7185;
  --module-bg:#241a1d;
  --sc-rep-bg:#f43f5e; --sc-rep-fg:#1a0e10; --sc-subrep-bg:#2a1d20; --sc-subrep-fg:#fda4af;
  --sc-bracket:#6b4f55; --sc-dist:#fb7185; --sc-txt:#d6c8cc; --sc-rowhover:rgba(244,63,94,.08);
  --chip-bg:#1a1416; --chip-ic-bg:rgba(244,63,94,.16);
  --font-num:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --kw-int-bg:rgba(244,63,94,.18); --kw-nage-bg:rgba(96,165,250,.2); --kw-mat-bg:rgba(45,212,191,.2);
  --sth-sidebar:linear-gradient(180deg,#100a0b,#241a1d); --sth-sidebar-fg:#f1e8ea;
  --sth-sidebar-muted:rgba(244,63,94,.7); --sth-brand:#f43f5e;
}
[data-session-theme="carbone"] .session-show-modules-card,
[data-session-theme="carbone-rouge"] .session-show-modules-card{
  background:var(--card);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px);border-color:var(--border);
}
[data-session-theme="carbone"] .session-show-modules-card h2,
[data-session-theme="carbone-rouge"] .session-show-modules-card h2{color:var(--primary);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;border-bottom:1px solid var(--border);padding-bottom:.4rem}
[data-session-theme="carbone"] .session-content,
[data-session-theme="carbone-rouge"] .session-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
[data-session-theme="carbone"] .sc-block,
[data-session-theme="carbone-rouge"] .sc-block{border:1px solid var(--border);border-top:2px solid var(--primary);border-radius:8px;padding:.5rem .6rem;background:var(--module-bg)}
[data-session-theme="carbone"] .sc-main,
[data-session-theme="carbone-rouge"] .sc-main{flex-wrap:wrap}
[data-session-theme="carbone"] .sc-dist,
[data-session-theme="carbone-rouge"] .sc-dist{font-size:1.35rem;line-height:1.1}
[data-session-theme="carbone"] .sc-dep,
[data-session-theme="carbone-rouge"] .sc-dep{margin-left:0}
[data-session-theme="carbone"] .session-recap__hero,
[data-session-theme="carbone-rouge"] .session-recap__hero{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px),var(--hero-grad)}

/* ═══════════════════════════ 🗺️ STRUCTURÉ ═══════════════════════════════ */

/* ───── Parcours (timeline) : app teal clair ; contenu = FRISE (rail + jalons numérotés). */
html[data-session-theme="timeline"]{
  --bg:#e9f7f4; --card:#f4fbfa; --text:#103c39; --muted:#547874; --border:#bfe6e1;
  --primary:#0d9488; --primary-2:#14b8a6; --shadow:0 10px 30px rgba(13,80,73,.12);
  --hero-grad:linear-gradient(135deg,#0f766e 0%,#14b8a6 100%); --hero-fg:#ecfeff;
  --module-bg:transparent;
  --sc-rep-bg:#0d9488; --sc-rep-fg:#fff; --sc-subrep-bg:#d3f3ef; --sc-subrep-fg:#0f766e;
  --sc-bracket:#5fcabb; --sc-dist:#0f766e; --sc-txt:#1f4d49; --sc-rowhover:#e6f7f4;
  --chip-bg:#fff; --chip-ic-bg:rgba(13,148,136,.14);
  --kw-int-bg:rgba(234,88,12,.18); --kw-nage-bg:rgba(13,148,136,.2); --kw-mat-bg:rgba(124,58,237,.16);
  --sth-sidebar:linear-gradient(180deg,#06302c,#0b524a 58%,#0d6b61);
  --sth-sidebar-fg:#ecfeff; --sth-sidebar-muted:rgba(153,246,228,.85); --sth-brand:#2dd4bf;
}
[data-session-theme="timeline"] .session-content{position:relative;padding-left:2.1rem;counter-reset:sthStep}
[data-session-theme="timeline"] .session-content::before{content:"";position:absolute;left:.7rem;top:.4rem;bottom:.4rem;width:4px;background:linear-gradient(var(--primary),var(--sc-bracket));border-radius:4px}
[data-session-theme="timeline"] .sc-block{position:relative;padding:.25rem 0;counter-increment:sthStep}
[data-session-theme="timeline"] .sc-block::before{content:counter(sthStep);position:absolute;left:-1.85rem;top:.35rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;box-shadow:0 0 0 4px var(--card),0 2px 6px rgba(13,148,136,.3)}
[data-session-theme="timeline"] .sc-subs{border-left-color:var(--sc-bracket)}

/* ───── Carnet de bord (ticket) : app kraft ; modules = TICKETS perforés à encoches. */
html[data-session-theme="ticket"]{
  --bg:#e7d8bd; --card:#fbf5ea; --text:#3b2c18; --muted:#816c4f; --border:#cbb083;
  --primary:#b45309; --primary-2:#d97706; --shadow:0 10px 30px rgba(80,55,20,.15);
  --hero-grad:linear-gradient(135deg,#7c2d12 0%,#b45309 100%); --hero-fg:#fff7ed;
  --module-bg:#fffdf7;
  --sc-rep-bg:#3b2c18; --sc-rep-fg:#fbf5ea; --sc-subrep-bg:#efe3cf; --sc-subrep-fg:#5b4327;
  --sc-bracket:#cdb38a; --sc-dist:#7c4a16; --sc-txt:#4a3a23; --sc-rowhover:#f5ecda;
  --chip-bg:#fffdf7; --chip-ic-bg:rgba(180,83,9,.14);
  --font-num:ui-monospace,"SFMono-Regular",Consolas,monospace; --font-body:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --kw-int-bg:rgba(180,83,9,.18); --kw-nage-bg:rgba(37,99,235,.16); --kw-mat-bg:rgba(13,148,136,.18);
  --sth-sidebar:linear-gradient(180deg,#3b2c18,#5b4327); --sth-sidebar-fg:#fbf5ea;
  --sth-sidebar-muted:rgba(205,179,138,.85); --sth-brand:#d97706;
}
[data-session-theme="ticket"] .session-show-modules-card{background:#e7d8bd;background-image:radial-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:8px 8px}
[data-session-theme="ticket"] .session-module{position:relative;border:2px dashed var(--border);border-radius:14px;background:var(--module-bg);overflow:visible}
[data-session-theme="ticket"] .session-module::before,
[data-session-theme="ticket"] .session-module::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#e7d8bd}
[data-session-theme="ticket"] .session-module::before{left:-10px}
[data-session-theme="ticket"] .session-module::after{right:-10px}
[data-session-theme="ticket"] .session-module__head{border-bottom:2px dashed var(--border);padding-bottom:.4rem;margin-bottom:.5rem}
[data-session-theme="ticket"] .session-module__title{text-transform:uppercase;letter-spacing:.06em;font-size:.92rem}
[data-session-theme="ticket"] .session-module__title::after{content:"✔ PROG";margin-left:.6rem;font-size:.58rem;border:1.5px solid #b45309;color:#b45309;border-radius:4px;padding:1px 4px;transform:rotate(-4deg);display:inline-block;letter-spacing:.05em}
[data-session-theme="ticket"] .sc-rep{border-radius:4px}

/* ───── Magazine (olympique) : app blanc/or ; ÉDITORIAL sérif, lettrine or. ── */
html[data-session-theme="olympique"]{
  --bg:#f4f1e9; --card:#ffffff; --text:#1b1b1b; --muted:#6b6b6b; --border:#e7ddc3;
  --primary:#b8932f; --primary-2:#d4af37; --shadow:0 10px 30px rgba(40,35,15,.12);
  --hero-grad:linear-gradient(135deg,#1b1b1b 0%,#3a3a3a 100%); --hero-fg:#f5e6b8;
  --module-bg:#fff;
  --sc-rep-bg:transparent; --sc-rep-fg:#b8932f; --sc-subrep-bg:#faf3df; --sc-subrep-fg:#6b5417;
  --sc-bracket:#d4af37; --sc-dist:#1b1b1b; --sc-txt:#2b2b2b; --sc-rowhover:#fbf8ef;
  --chip-bg:#fff; --chip-ic-bg:rgba(184,147,47,.14);
  --font-title:Georgia,"Iowan Old Style","Times New Roman",serif; --font-body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --kw-int-bg:transparent; --kw-int-fg:#b8932f; --kw-nage-bg:transparent; --kw-nage-fg:#1d4ed8;
  --kw-mat-bg:transparent; --kw-mat-fg:#0f766e;
  --sth-sidebar:linear-gradient(180deg,#1b1b1b,#2b2b2b); --sth-sidebar-fg:#f5e6b8;
  --sth-sidebar-muted:rgba(212,175,55,.75); --sth-brand:#d4af37;
}
[data-session-theme="olympique"] .session-head{border-top:5px solid #1b1b1b}
[data-session-theme="olympique"] .session-show-modules-card h2{font-size:1.7rem;text-transform:uppercase;letter-spacing:.12em;border-bottom:3px double #1b1b1b;padding-bottom:.3rem;margin-bottom:.6rem}
[data-session-theme="olympique"] .session-module{border:0;border-top:2px solid #1b1b1b;border-radius:0;background:#fff;padding-top:.6rem}
[data-session-theme="olympique"] .session-module__title{font-size:1.5rem;font-weight:800}
[data-session-theme="olympique"] .sc-main{border-bottom:1px solid var(--border);padding:.3rem .2rem}
[data-session-theme="olympique"] .sc-rep{background:none;font-family:Georgia,serif;font-size:1.9rem;font-weight:900;line-height:1;min-width:1.9rem;height:auto;padding:0}
[data-session-theme="olympique"] .session-recap__heading{font-style:italic;letter-spacing:.04em}
[data-session-theme="olympique"] .sc-kw{padding:0;font-style:italic}

/* ════════════════════════════ 🎬 FUN ════════════════════════════════════ */

/* ───── Hologramme (jedi) : app sombre HUD ; panneau grille cyan + balayage + équerres. */
html[data-session-theme="jedi"]{
  --bg:#020617; --card:#081222; --text:#dbeafe; --muted:#7d97c0; --border:#1e3a5f;
  --primary:#38bdf8; --primary-2:#22d3ee; --shadow:0 10px 30px rgba(0,0,0,.45);
  --hero-grad:linear-gradient(135deg,#020617 0%,#0c2a52 100%); --hero-fg:#bfdbfe;
  --module-bg:rgba(56,189,248,.04);
  --sc-rep-bg:#38bdf8; --sc-rep-fg:#04293f; --sc-subrep-bg:#0f2942; --sc-subrep-fg:#bae6fd;
  --sc-bracket:#1d4ed8; --sc-dist:#7dd3fc; --sc-txt:#c7dcf5; --sc-rowhover:rgba(56,189,248,.08);
  --chip-bg:#0d1526; --chip-ic-bg:rgba(56,189,248,.18);
  --kw-int-bg:rgba(56,189,248,.18); --kw-nage-bg:rgba(96,165,250,.2); --kw-mat-bg:rgba(45,212,191,.2);
  --sth-sidebar:linear-gradient(180deg,#020617,#0c2a52); --sth-sidebar-fg:#bfdbfe;
  --sth-sidebar-muted:rgba(125,151,192,.85); --sth-brand:#38bdf8;
}
[data-session-theme="jedi"] .session-show-modules-card{
  position:relative;overflow:hidden;border-color:rgba(56,189,248,.4);background:#06101e;
  background-image:linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px);
  background-size:22px 22px,22px 22px;
}
[data-session-theme="jedi"] .session-show-modules-card::after{content:"";position:absolute;left:0;right:0;top:0;height:14%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(56,189,248,.16),transparent);animation:sthScan 4s linear infinite}
[data-session-theme="jedi"] .session-show-modules-card h2{color:#7dd3fc;text-shadow:0 0 10px rgba(56,189,248,.5)}
[data-session-theme="jedi"] .session-module{position:relative;background:linear-gradient(180deg,rgba(56,189,248,.08),transparent);border:1px solid rgba(56,189,248,.3)}
[data-session-theme="jedi"] .session-module::before,
[data-session-theme="jedi"] .session-module::after{content:"";position:absolute;width:15px;height:15px;border:2px solid #38bdf8}
[data-session-theme="jedi"] .session-module::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
[data-session-theme="jedi"] .session-module::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
[data-session-theme="jedi"] .session-head__title{text-shadow:0 0 12px rgba(56,189,248,.6)}
[data-session-theme="jedi"] .sc-rep{box-shadow:0 0 10px rgba(56,189,248,.6)}

/* ───── Synthwave : app sombre néon ; soleil + grille en perspective. ──────── */
html[data-session-theme="synthwave"]{
  --bg:#120726; --card:#1a0b34; --text:#f0e6ff; --muted:#c0a3ea; --border:#3b1d6b;
  --primary:#ec4899; --primary-2:#22d3ee; --shadow:0 10px 30px rgba(0,0,0,.45);
  --hero-grad:linear-gradient(135deg,#2a0b52 0%,#7e1f8f 60%,#ec4899 100%); --hero-fg:#ffe3f6;
  --module-bg:rgba(236,72,153,.06);
  --sc-rep-fg:#fff; --sc-subrep-bg:#2a124e; --sc-subrep-fg:#f0abfc;
  --sc-bracket:#7c3aed; --sc-dist:#22d3ee; --sc-txt:#ecddff; --sc-rowhover:rgba(236,72,153,.1);
  --chip-bg:#1d1040; --chip-ic-bg:rgba(34,211,238,.18);
  --kw-int-bg:rgba(236,72,153,.22); --kw-nage-bg:rgba(34,211,238,.22); --kw-mat-bg:rgba(168,85,247,.24);
  --sth-sidebar:linear-gradient(180deg,#160a2e,#2a0b52); --sth-sidebar-fg:#f0e6ff;
  --sth-sidebar-muted:rgba(192,163,234,.85); --sth-brand:#ec4899;
}
[data-session-theme="synthwave"] .session-show-modules-card{
  position:relative;overflow:hidden;border-color:#3b1d6b;min-height:260px;
  background:radial-gradient(72% 48% at 50% 4%,rgba(251,146,60,.42),transparent 60%),linear-gradient(180deg,#2a0b52 0%,#160a2e 52%);
}
/* Soleil rétro à l'horizon (disque dégradé strié). */
[data-session-theme="synthwave"] .session-show-modules-card::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#fde047,#fb7185 52%,#ec4899);
  -webkit-mask:repeating-linear-gradient(#000 0 7px,transparent 7px 12px);mask:repeating-linear-gradient(#000 0 7px,transparent 7px 12px);
  opacity:.92;filter:drop-shadow(0 0 20px rgba(236,72,153,.55));
}
/* Sol en GRILLE perspective — STATIQUE (pas d'animation, c'est la PROFONDEUR qu'on
   veut, pas le clignotement). Perspective marquée + dégradé de profondeur. */
[data-session-theme="synthwave"] .session-show-modules-card::after{
  content:"";position:absolute;left:-45%;right:-45%;bottom:0;height:74%;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(34,211,238,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(236,72,153,.8) 2px,transparent 2px);
  background-size:46px 46px,46px 46px;
  transform:perspective(260px) rotateX(58deg);transform-origin:bottom;
  -webkit-mask:linear-gradient(transparent,#000 62%);mask:linear-gradient(transparent,#000 62%);
}
[data-session-theme="synthwave"] .session-show-modules-card > *{position:relative;z-index:1}
[data-session-theme="synthwave"] .session-show-modules-card h2{color:#22d3ee;text-shadow:0 0 12px rgba(34,211,238,.7);text-transform:uppercase;letter-spacing:.12em}
[data-session-theme="synthwave"] .session-module{position:relative;z-index:1;border:1px solid #3b1d6b;background:linear-gradient(180deg,rgba(26,11,52,.86),rgba(22,10,46,.82));box-shadow:0 6px 22px rgba(0,0,0,.4)}
[data-session-theme="synthwave"] .sc-rep{background:linear-gradient(135deg,#ec4899,#22d3ee);box-shadow:0 0 12px rgba(236,72,153,.6)}
[data-session-theme="synthwave"] .session-head__title{text-shadow:0 0 10px rgba(236,72,153,.7),0 0 22px rgba(34,211,238,.4)}

/* ───── Console (terminal) : app sombre ; carte contenu = FENÊTRE de terminal. */
html[data-session-theme="terminal"]{
  --bg:#010a05; --card:#02160c; --text:#6ee7a8; --muted:#3f9e6e; --border:#0c3a22;
  --primary:#22c55e; --primary-2:#16a34a; --shadow:0 10px 30px rgba(0,0,0,.5);
  --hero-grad:linear-gradient(135deg,#021008 0%,#06351f 100%); --hero-fg:#86efac;
  --module-bg:#04210f;
  --sc-rep-bg:#052e16; --sc-rep-fg:#6ee7a8; --sc-subrep-bg:#04240f; --sc-subrep-fg:#4ade80;
  --sc-bracket:#166534; --sc-dist:#4ade80; --sc-txt:#5fd996; --sc-rowhover:rgba(34,197,94,.08);
  --chip-bg:#04240f; --chip-ic-bg:rgba(34,197,94,.18);
  --font-title:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font-body:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font-num:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --kw-int-bg:transparent; --kw-int-fg:#fbbf24; --kw-nage-bg:transparent; --kw-nage-fg:#5eead4;
  --kw-mat-bg:transparent; --kw-mat-fg:#a5b4fc;
  --sth-sidebar:linear-gradient(180deg,#02160c,#04210f); --sth-sidebar-fg:#6ee7a8;
  --sth-sidebar-muted:rgba(63,158,110,.9); --sth-brand:#22c55e;
}
[data-session-theme="terminal"] .session-show-modules-card{position:relative;padding-top:44px;background:#02140a;border:1px solid #0c3a22;overflow:hidden}
[data-session-theme="terminal"] .session-show-modules-card::before{
  content:"~/seance — zsh";position:absolute;top:0;left:0;right:0;height:30px;line-height:30px;padding-left:74px;
  background:#063019;color:#6ee7a8;font-size:12px;border-bottom:1px solid #0c3a22;
  background-image:radial-gradient(circle 5px at 18px 15px,#ff5f56 99%,transparent),radial-gradient(circle 5px at 38px 15px,#ffbd2e 99%,transparent),radial-gradient(circle 5px at 58px 15px,#27c93f 99%,transparent);
  background-repeat:no-repeat;
}
[data-session-theme="terminal"] .session-show-modules-card h2{color:#3f9e6e;font-size:.95rem;font-weight:700}
[data-session-theme="terminal"] .session-show-modules-card h2::before{content:"$ cat ";color:#22c55e}
[data-session-theme="terminal"] .session-content{counter-reset:sthLn}
[data-session-theme="terminal"] .sc-main{counter-increment:sthLn;align-items:center}
[data-session-theme="terminal"] .sc-main::before{content:counter(sthLn,decimal-leading-zero) "  ▸";color:var(--muted);margin-right:.3rem;flex:0 0 auto;font-size:.8rem}
[data-session-theme="terminal"] .sc-rep{background:none;color:var(--primary);border:1px solid #166534}
[data-session-theme="terminal"] .session-module__title::before{content:"$ ";color:#3f9e6e}
[data-session-theme="terminal"] .session-content::after{content:"▋";color:var(--primary);animation:sthBlink 1s steps(1) infinite;font-weight:800}
[data-session-theme="terminal"] .session-recap__hero{background-image:repeating-linear-gradient(rgba(0,0,0,.18) 0 1px,transparent 1px 3px),var(--hero-grad)}
/* MATRIX : pluie verte qui descend (faible, derrière le contenu) + scanlines + halo CRT + flicker. */
[data-session-theme="terminal"] .session-show-modules-card{
  background-image:
    repeating-linear-gradient(90deg,rgba(34,197,94,.05) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(rgba(0,0,0,.16) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.55),0 0 0 1px #0c3a22;
  animation:sthFlicker 4s steps(1) infinite;
}
[data-session-theme="terminal"] .session-show-modules-card::after{
  content:"";position:absolute;inset:30px 0 0 0;pointer-events:none;z-index:0;opacity:.16;
  background-image:repeating-linear-gradient(90deg,transparent 0 21px,rgba(57,255,140,.85) 21px 22px);
  -webkit-mask:repeating-linear-gradient(180deg,transparent 0,#000 40px,transparent 120px);
  mask:repeating-linear-gradient(180deg,transparent 0,#000 40px,transparent 120px);
  background-size:22px 220px;animation:sthRain 2.4s linear infinite;
}
[data-session-theme="terminal"] .session-show-modules-card > *{position:relative;z-index:1}
[data-session-theme="terminal"] .session-content{text-shadow:0 0 6px rgba(34,197,94,.45)}
[data-session-theme="terminal"] .session-head__title{text-shadow:0 0 8px rgba(34,197,94,.6)}

/* ============ Bandeaux du FORMULAIRE (layouts hero/barre) intégrés à la peau ============
   On garde la STRUCTURE des layouts (bandeaux) mais leur dégradé suit le thème (--hero-grad). */
html[data-session-theme] #sessionForm[data-layout="hero"] > section.card:first-of-type{background:var(--hero-grad)!important}
html[data-session-theme] #sessionForm[data-layout="barre"] > section.card:first-of-type::before{background:var(--hero-grad)!important}

/* ════════════════════════════ 🎨 BANDEAU COLORÉ ═════════════════════════════
   Thème « global basé sur le bandeau coloré » : en-tête de séance + héros = grand
   dégradé vif ; contenu clair et net. Le bandeau est la signature. */
html[data-session-theme="bandeau"]{
  --bg:#f5f6fb; --card:#ffffff; --text:#1f2438; --muted:#6b7280; --border:#e6e8f2;
  --primary:#7c3aed; --primary-2:#ec4899; --shadow:0 12px 34px rgba(124,58,237,.16);
  --hero-grad:linear-gradient(120deg,#6366f1 0%,#8b5cf6 30%,#ec4899 62%,#f59e0b 100%); --hero-fg:#fff;
  --module-bg:rgba(124,58,237,.05);
  --sc-rep-bg:linear-gradient(135deg,#7c3aed,#ec4899); --sc-rep-fg:#fff;
  --sc-subrep-bg:#f3e8ff; --sc-subrep-fg:#6b21a8; --sc-bracket:#d8b4fe;
  --sc-dist:#7c3aed; --sc-txt:#33384a; --sc-rowhover:#faf5ff;
  --chip-bg:#fff; --chip-ic-bg:rgba(124,58,237,.14);
  --kw-int-bg:rgba(236,72,153,.16); --kw-nage-bg:rgba(99,102,241,.16); --kw-mat-bg:rgba(245,158,11,.18);
  --sth-sidebar:linear-gradient(180deg,#4f46e5,#7c3aed 42%,#db2777 82%);
  --sth-sidebar-fg:#fff; --sth-sidebar-muted:rgba(255,255,255,.72); --sth-brand:#f59e0b;
}
/* ════════════════════════════ 🌊 GRAND BLEU ════════════════════════════════
   Variante « bandeau » en BLEU (le dégradé hero bleu classique que Simon aimait). */
html[data-session-theme="grandbleu"]{
  --bg:#bfdcf7; --card:#eef6ff; --text:#0e1f3a; --muted:#516a8c; --border:#bcd5f0;
  --primary:#0b5cad; --primary-2:#0ea5e9; --shadow:0 12px 34px rgba(11,92,173,.18);
  --hero-grad:linear-gradient(135deg,#0a1f5c 0%,#0b5cad 42%,#0ea5e9 78%,#22d3ee 100%); --hero-fg:#fff;
  --module-bg:rgba(11,92,173,.05);
  --sc-rep-bg:#0b3a78; --sc-rep-fg:#fff; --sc-subrep-bg:#dbeafd; --sc-subrep-fg:#0b5cad; --sc-bracket:#9cc4ee;
  --sc-dist:#0b5cad; --sc-txt:#22344f; --sc-rowhover:#e4eefb;
  --chip-bg:#f5f9ff; --chip-ic-bg:rgba(11,92,173,.14);
  --kw-int-bg:rgba(14,165,233,.16); --kw-nage-bg:rgba(11,92,173,.16); --kw-mat-bg:rgba(34,211,238,.18);
  --sth-sidebar:linear-gradient(180deg,#0a1f5c,#0b3f86 55%,#0b5cad);
  --sth-sidebar-fg:#eaf3ff; --sth-sidebar-muted:rgba(186,214,250,.84); --sth-brand:#22d3ee;
}
/* Grand bleu : FOND réellement BLEU (dégradé + halos + lignes d'eau), plus de fond blanc (demande Simon).
   Les bulles montantes sont gérées par session-themes.js (thème listé BUBBLY). */
html[data-session-theme="grandbleu"] body{
  background:
    radial-gradient(900px 560px at 12% -8%,rgba(34,211,238,.30),transparent 58%),
    radial-gradient(820px 520px at 92% 2%,rgba(255,255,255,.35),transparent 56%),
    repeating-linear-gradient(180deg,transparent 0 86px,rgba(11,92,173,.06) 86px 88px),
    linear-gradient(180deg,#bdddf8 0%,#8fc0ee 50%,#69a6e3 100%) !important;
  background-attachment:fixed !important;
}
/* Cartes en VERRE BLEU (translucide) — le fond bleu transparaît, plus de carte blanc cru (Simon). */
html[data-session-theme="grandbleu"] .card{
  background:linear-gradient(160deg,rgba(232,243,255,.74),rgba(208,230,251,.66)) !important;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid rgba(120,170,225,.5);
}
[data-session-theme="grandbleu"] .session-show-modules-card{
  background:linear-gradient(160deg,rgba(226,239,255,.7),rgba(199,225,250,.6)) !important;
}

/* En-tête de séance = grand BANDEAU (dégradé du thème, texte blanc). Partagé bandeau + grandbleu. */
[data-session-theme="bandeau"] .session-head,
[data-session-theme="grandbleu"] .session-head{background:var(--hero-grad);border:0;color:#fff;box-shadow:0 14px 40px rgba(11,92,173,.28)}
[data-session-theme="bandeau"] .session-head__title,
[data-session-theme="grandbleu"] .session-head__title,
[data-session-theme="bandeau"] .session-head__meta,
[data-session-theme="grandbleu"] .session-head__meta,
[data-session-theme="bandeau"] .session-head__meta-chip,
[data-session-theme="grandbleu"] .session-head__meta-chip{color:#fff}
[data-session-theme="bandeau"] .session-head__nav-link,
[data-session-theme="grandbleu"] .session-head__nav-link{color:rgba(255,255,255,.85)}
[data-session-theme="bandeau"] .session-head__nav-link:hover,
[data-session-theme="grandbleu"] .session-head__nav-link:hover{background:rgba(255,255,255,.18);color:#fff}
[data-session-theme="bandeau"] .session-head__obj,
[data-session-theme="grandbleu"] .session-head__obj{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.6)}
[data-session-theme="bandeau"] .session-head__obj-label,
[data-session-theme="grandbleu"] .session-head__obj-label{background:rgba(255,255,255,.22);color:#fff}
[data-session-theme="bandeau"] .session-head .icon-btn,
[data-session-theme="grandbleu"] .session-head .icon-btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);color:#fff}
[data-session-theme="bandeau"] .session-head .icon-btn--primary,
[data-session-theme="grandbleu"] .session-head .icon-btn--primary{background:#fff;color:var(--primary);border-color:#fff}
[data-session-theme="bandeau"] .session-head .badge,
[data-session-theme="grandbleu"] .session-head .badge{background:rgba(255,255,255,.22);color:#fff}

/* ════════════════════════════ 🫧 CRISTAL ════════════════════════════════════
   Inspiré de la page « en construction » (site off ligne) : marine/bleu/aqua,
   fond dégradé + lignes d'eau, cartes en VERRE (glassmorphism), liseré dégradé en
   haut des cartes, titres en dégradé. Ambiance vitrine aquatique. */
html[data-session-theme="cristal"]{
  --bg:#e6f3ff; --card:#ffffff; --text:#102033; --muted:#5b7088; --border:rgba(15,72,120,.16);
  --primary:#0f7fd1; --primary-2:#29c4d8; --shadow:0 24px 60px rgba(7,29,53,.16);
  --hero-grad:linear-gradient(120deg,#0f7fd1 0%,#29c4d8 100%); --hero-fg:#fff;
  --module-bg:rgba(15,127,209,.05);
  --sc-rep-bg:#0b3a63; --sc-rep-fg:#fff; --sc-subrep-bg:#e1f1fb; --sc-subrep-fg:#0b67ba; --sc-bracket:#a9d6ef;
  --sc-dist:#0b67ba; --sc-txt:#2a4257; --sc-rowhover:#f0f9ff;
  --chip-bg:rgba(255,255,255,.82); --chip-ic-bg:rgba(15,127,209,.14);
  --kw-int-bg:rgba(41,196,216,.18); --kw-nage-bg:rgba(15,127,209,.16); --kw-mat-bg:rgba(11,58,99,.14);
  --sth-sidebar:linear-gradient(180deg,#071d35,#0b3a63 60%,#0f5e9c);
  --sth-sidebar-fg:#eaf6ff; --sth-sidebar-muted:rgba(138,160,184,.95); --sth-brand:#29c4d8;
}
/* Fond aquatique : halos cyan/bleu + lignes d'eau (comme la vitrine). */
html[data-session-theme="cristal"] body{
  background:
    radial-gradient(900px 540px at 14% -6%,rgba(41,196,216,.22),transparent 60%),
    radial-gradient(820px 500px at 90% 4%,rgba(15,127,209,.18),transparent 58%),
    repeating-linear-gradient(180deg,transparent 0 84px,rgba(15,127,209,.045) 84px 86px),
    linear-gradient(180deg,#eaf6ff 0,#dcefff 48%,#cfe8fb 100%) !important;
  background-attachment:fixed !important;
}
/* Cartes en VERRE (glassmorphism) — toute l'app pour la cohérence. */
html[data-session-theme="cristal"] .card{
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
}
/* Liseré dégradé bleu→aqua en haut des cartes clés + titre séance en dégradé. */
[data-session-theme="cristal"] .session-head,
[data-session-theme="cristal"] .session-show-modules-card{position:relative;overflow:hidden}
[data-session-theme="cristal"] .session-head::before,
[data-session-theme="cristal"] .session-show-modules-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#0f7fd1,#29c4d8,#0f7fd1);
}
[data-session-theme="cristal"] .session-head__title{
  background:linear-gradient(120deg,#0b67ba,#29c4d8);-webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-session-theme="cristal"] .session-show-modules-card h2{color:#0b67ba}

/* ═══════════════════ ♿ CONTRASTE — peaux SOMBRES ════════════════════════════
   Les pastilles de STATUT (.state-*) ont des couleurs CLAIRES codées en dur (lisibles
   en clair / mode sombre global), mais une peau sombre N'active PAS html[data-theme="dark"]
   -> sans ça, texte foncé sur carte foncée. On rejoue ici, pour les peaux sombres, la
   variante sombre déjà définie pour le mode sombre global (mêmes valeurs). Le badge info
   (.badge) et l'étiquette « Critique » sont déjà gérés par variables (cf app.css).

   ⭐ 07/08/2026 — « Chrono » AJOUTÉE à la liste. Elle était la 7e peau sombre oubliée
   (fond #070708, texte #f4f4f5) : sa pastille « Prévue » tombait à 3,71 sur 16 de contraste,
   mesuré sur une séance publique. Les 6 autres : carbone, carbone-rouge, jedi, synthwave,
   terminal ici, et synthwave-sobre plus bas (elle a son propre bloc). */
html[data-session-theme="carbone"] .state-brouillon,html[data-session-theme="carbone-rouge"] .state-brouillon,
html[data-session-theme="jedi"] .state-brouillon,html[data-session-theme="synthwave"] .state-brouillon,
html[data-session-theme="chrono"] .state-brouillon,
html[data-session-theme="terminal"] .state-brouillon{background:#2a3340;color:#aeb9c7;border-color:#3a4654}
html[data-session-theme="carbone"] .state-prevue,html[data-session-theme="carbone-rouge"] .state-prevue,
html[data-session-theme="jedi"] .state-prevue,html[data-session-theme="synthwave"] .state-prevue,
html[data-session-theme="chrono"] .state-prevue,
html[data-session-theme="terminal"] .state-prevue{background:rgba(15,127,209,.22);color:#7cc4f2;border-color:rgba(15,127,209,.40)}
html[data-session-theme="carbone"] .state-effectuee,html[data-session-theme="carbone-rouge"] .state-effectuee,
html[data-session-theme="jedi"] .state-effectuee,html[data-session-theme="synthwave"] .state-effectuee,
html[data-session-theme="chrono"] .state-effectuee,
html[data-session-theme="terminal"] .state-effectuee{background:rgba(22,163,74,.22);color:#86e0a6;border-color:rgba(22,163,74,.40)}
html[data-session-theme="carbone"] .state-cancelled,html[data-session-theme="carbone-rouge"] .state-cancelled,
html[data-session-theme="jedi"] .state-cancelled,html[data-session-theme="synthwave"] .state-cancelled,
html[data-session-theme="chrono"] .state-cancelled,
html[data-session-theme="terminal"] .state-cancelled{background:rgba(220,38,38,.20);color:#fca5a5;border-color:rgba(220,38,38,.40)}
html[data-session-theme="carbone"] .state-reported,html[data-session-theme="carbone-rouge"] .state-reported,
html[data-session-theme="jedi"] .state-reported,html[data-session-theme="synthwave"] .state-reported,
html[data-session-theme="chrono"] .state-reported,
html[data-session-theme="terminal"] .state-reported{background:rgba(217,119,6,.22);color:#fcd34d;border-color:rgba(217,119,6,.42)}

/* ═══════════════════ ⏯️ Option « Animations » OFF ═══════════════════════════
   html[data-anim="off"] (posé par session-themes.js depuis la case des Préférences) : on FIGE les
   animations décoratives des peaux (balayage Jedi, pluie/curseur/flicker Console, etc.) + les bulles.
   Le décor reste affiché, mais immobile. */
html[data-anim="off"] .session-show-modules-card,
html[data-anim="off"] .session-show-modules-card *,
html[data-anim="off"] .session-show-modules-card::before,
html[data-anim="off"] .session-show-modules-card::after,
html[data-anim="off"] .session-show-modules-card *::before,
html[data-anim="off"] .session-show-modules-card *::after,
html[data-anim="off"] .sth-bubble{animation:none!important}

/* ═══════════════════ 🌅 Synthwave SOBRE (bleu) ═════════════════════════════
   Demande Simon : « j'adore le concept (le soleil !), mais le violet c'est too much — la même en
   plus SOBRE, bleu, type défaut ». Même décor (soleil rétro gardé + grille perspective) mais palette
   bleu/ardoise sobre et glow bleu au lieu du néon violet/rose. */
html[data-session-theme="synthwave-sobre"]{
  --bg:#0a1526; --card:#10223c; --text:#e3ecfb; --muted:#94aaca; --border:#22436b;
  --primary:#38bdf8; --primary-2:#60a5fa; --shadow:0 10px 30px rgba(0,0,0,.4);
  --hero-grad:linear-gradient(135deg,#0b1f3d 0%,#1e4e8c 60%,#38bdf8 100%); --hero-fg:#e3f1ff;
  --module-bg:rgba(56,189,248,.05);
  --sc-rep-bg:#38bdf8; --sc-rep-fg:#06233b; --sc-subrep-bg:#11365c; --sc-subrep-fg:#bae0ff;
  --sc-bracket:#2b5a8f; --sc-dist:#7dd3fc; --sc-txt:#cfe0f5; --sc-rowhover:rgba(56,189,248,.08);
  --chip-bg:#10223c; --chip-ic-bg:rgba(56,189,248,.16);
  --kw-int-line:#fbbf24; --kw-nage-line:#38bdf8; --kw-mat-line:#22d3ee;
  --sth-sidebar:linear-gradient(180deg,#0a1526,#10223c); --sth-sidebar-fg:#e3ecfb;
  --sth-sidebar-muted:rgba(148,170,202,.85); --sth-brand:#38bdf8;
}
[data-session-theme="synthwave-sobre"] .session-show-modules-card{
  position:relative;overflow:hidden;border-color:#22436b;min-height:260px;
  background:radial-gradient(72% 48% at 50% 4%,rgba(56,189,248,.28),transparent 60%),linear-gradient(180deg,#12294a 0%,#0a1526 52%);
}
[data-session-theme="synthwave-sobre"] .session-show-modules-card::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#fde047,#fb7185 52%,#f97316);
  -webkit-mask:repeating-linear-gradient(#000 0 7px,transparent 7px 12px);mask:repeating-linear-gradient(#000 0 7px,transparent 7px 12px);
  opacity:.92;filter:drop-shadow(0 0 18px rgba(56,189,248,.5));
}
[data-session-theme="synthwave-sobre"] .session-show-modules-card::after{
  content:"";position:absolute;left:-45%;right:-45%;bottom:0;height:74%;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(56,189,248,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(96,165,250,.75) 2px,transparent 2px);
  background-size:46px 46px,46px 46px;
  transform:perspective(260px) rotateX(58deg);transform-origin:bottom;
  -webkit-mask:linear-gradient(transparent,#000 62%);mask:linear-gradient(transparent,#000 62%);
}
[data-session-theme="synthwave-sobre"] .session-show-modules-card > *{position:relative;z-index:1}
[data-session-theme="synthwave-sobre"] .session-show-modules-card h2{color:#7dd3fc;text-shadow:0 0 10px rgba(56,189,248,.5);text-transform:uppercase;letter-spacing:.1em}
[data-session-theme="synthwave-sobre"] .session-module{position:relative;z-index:1;border:1px solid #22436b;background:linear-gradient(180deg,rgba(16,34,60,.9),rgba(10,21,38,.85))}
[data-session-theme="synthwave-sobre"] .sc-rep{box-shadow:0 0 10px rgba(56,189,248,.5)}
[data-session-theme="synthwave-sobre"] .session-head__title{text-shadow:0 0 10px rgba(56,189,248,.55)}
/* contraste pastilles statut sur cette peau sombre (comme les autres peaux sombres) */
html[data-session-theme="synthwave-sobre"] .state-brouillon{background:#2a3340;color:#aeb9c7;border-color:#3a4654}
html[data-session-theme="synthwave-sobre"] .state-prevue{background:rgba(15,127,209,.22);color:#7cc4f2;border-color:rgba(15,127,209,.40)}
html[data-session-theme="synthwave-sobre"] .state-effectuee{background:rgba(22,163,74,.22);color:#86e0a6;border-color:rgba(22,163,74,.40)}
html[data-session-theme="synthwave-sobre"] .state-cancelled{background:rgba(220,38,38,.20);color:#fca5a5;border-color:rgba(220,38,38,.40)}
html[data-session-theme="synthwave-sobre"] .state-reported{background:rgba(217,119,6,.22);color:#fcd34d;border-color:rgba(217,119,6,.42)}

/* ═══════════════ 🌐 Synthwave : SOL-GRILLE pleine page (hors séance) ═════════════
   Demande Simon : le principe se perd hors de la séance. On pose une grille en perspective FIXE
   en bas du viewport, derrière tout le contenu (z-index:-1), pour un vrai sol rétro sur TOUTE la page. */
html[data-session-theme="synthwave"] body::after,
html[data-session-theme="synthwave-sobre"] body::after{
  content:"";position:fixed;left:-30%;right:-30%;bottom:0;height:46vh;pointer-events:none;z-index:-1;
  transform:perspective(340px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask:linear-gradient(transparent,#000 66%);mask:linear-gradient(transparent,#000 66%);
}
html[data-session-theme="synthwave"] body::after{
  background-image:linear-gradient(rgba(34,211,238,.6) 2px,transparent 2px),linear-gradient(90deg,rgba(236,72,153,.5) 2px,transparent 2px);
  background-size:62px 62px,62px 62px;
}
html[data-session-theme="synthwave-sobre"] body::after{
  background-image:linear-gradient(rgba(56,189,248,.6) 2px,transparent 2px),linear-gradient(90deg,rgba(96,165,250,.45) 2px,transparent 2px);
  background-size:62px 62px,62px 62px;
}
/* La carte de séance laisse voir le sol de la page : son propre sol (::after) devient inutile en double,
   on l'efface au profit de la grille pleine page (le SOLEIL ::before reste, on l'adore). */
html[data-session-theme="synthwave"] .session-show-modules-card::after,
html[data-session-theme="synthwave-sobre"] .session-show-modules-card::after{display:none}
html[data-session-theme="synthwave"] .session-show-modules-card,
html[data-session-theme="synthwave-sobre"] .session-show-modules-card{background:transparent !important;border-color:transparent}

/* ===========================================================================
   PEAU « AQUA MARINE » (8e peau) — la direction artistique de la vitrine A6,
   applicable a TOUTE l'application (continuite visiteur -> utilisateur).

   DECISION SIMON (verrouillee) : peau DISTINCTE proposee en OPTION, ce n'est
   PAS le theme par defaut. Elle s'active comme les autres, depuis
   « Compte > Preferences d'affichage ».

   Proche du Defaut (aqua/marine), pas depaysant : l'utilisateur qui cree son
   espace retrouve exactement ce qu'il a vu en vitrine.
   =========================================================================== */
html[data-session-theme="aquamarine"]{
  --bg:#eaf6ff; --card:#ffffff; --text:#0f2942; --muted:#5b7088; --border:rgba(15,72,120,.16);
  --primary:#0f7fd1; --primary-2:#29c4d8; --shadow:0 22px 55px rgba(7,29,53,.13);
  --hero-grad:linear-gradient(120deg,#0b67ba 0%,#0f7fd1 45%,#29c4d8 100%); --hero-fg:#ffffff;
  --module-bg:rgba(15,127,209,.05);
  --sc-rep-bg:#0b3a63; --sc-rep-fg:#fff; --sc-subrep-bg:#e1f1fb; --sc-subrep-fg:#0b67ba;
  --sc-bracket:#a9d6ef; --sc-dist:#0b67ba; --sc-txt:#284257; --sc-rowhover:#eef9ff;
  --chip-bg:#ffffff; --chip-ic-bg:rgba(15,127,209,.14);
  --sth-sidebar:linear-gradient(180deg,#071d35,#0b3a63 60%,#0f5e9c);
  --sth-sidebar-fg:#eaf6ff; --sth-sidebar-muted:rgba(170,195,220,.92); --sth-brand:#29c4d8;
}
/* Fond aquatique : reserve aux pages PUBLIQUES (body.public-body) pour ne pas
   alourdir les ecrans de travail. Lignes d'eau + 2 halos. */
html[data-session-theme="aquamarine"] body.public-body{
  background:
    radial-gradient(900px 540px at 14% -6%,rgba(41,196,216,.22),transparent 60%),
    radial-gradient(820px 500px at 90% 4%,rgba(15,127,209,.17),transparent 58%),
    repeating-linear-gradient(180deg,transparent 0 86px,rgba(15,127,209,.05) 86px 88px),
    linear-gradient(180deg,#eef8ff 0,#e2f1ff 50%,#f5fbff 100%) !important;
  background-attachment:fixed !important;
}

/* ===========================================================================
   PAGES PUBLIQUES DE CONTENU PARTAGE — la peau du LECTEUR (07/08/2026)

   DECISION SIMON, apres mesure : la VITRINE (accueil, bibliotheque, apercu,
   « Comment ca marche », pages legales) garde TOUJOURS les couleurs maison, et
   le gabarit ne sert meme pas cette feuille sur ces pages-la. Ici on traite
   l'AUTRE moitie du public : une seance, un planning, une saison ou une fiche
   ouverts par lien suivent la peau que le LECTEUR a choisie dans son compte.

   CE QUE CA REPARE. `app.css` fige le texte de toute page publique en fonce
   (`.public-body{color:var(--hub-ink)}` = #102033) alors que les cartes suivaient
   deja `var(--card)`. Sous les 7 peaux sombres, texte fonce sur carte foncee :
   contraste MESURE 1,03 a 1,19 sur 16 (illisible ; il en faut 4,5). Les 9 peaux
   claires etaient au-dessus de 15 et ne sont pas concernees.

   POURQUOI `:where(...)` ET PAS `html[data-session-theme] body.public-body`.
   Il faut se glisser ENTRE deux niveaux qui existent deja :
     - passer DEVANT `.public-body` d'app.css (le fond clair + le texte fige) ;
     - rester DERRIERE les peaux qui peignent deja le fond de page elles-memes
       (« Cristal » et « Grand bleu », en `html[data-session-theme="x"] body`),
       sinon on leur effacerait leur decor sur les pages publiques.
   `:where()` ne compte pas dans la priorite : la regle pese donc exactement le
   cran intermediaire. « Aqua marine » se protege deja seule (`!important`). */
:where(html[data-session-theme]) body.public-body{background:var(--bg);color:var(--text)}

/* L'EN-TETE etait le dernier morceau casse : il restait blanc en dur pendant que ses
   liens prenaient la couleur claire de la peau (contraste MESURE 2,17 a 3,43 sur une
   seance publique). Meme traitement que la topbar connectee, plus haut dans ce fichier.
   Le PIED reste tel quel : il est deja bleu nuit a texte clair, lisible sous les 16
   peaux (mesure : 14,07) — on ne touche pas a ce qui n'est pas casse. */
:where(html[data-session-theme]) body.public-body .public-header{background:var(--card);border-bottom-color:var(--border)}
:where(html[data-session-theme]) body.public-body .public-brand{color:var(--text)}
/* Les destinations de la barre sont en `var(--muted)` (cf `.navswitch a` dans app.css) : sur un
   en-tete redevenu blanc casse (peau « Ticket ») elles tombaient de 4,50 a 4,15 — MESURE avant/apres,
   c'est la seule baisse qu'a produite la reprise de l'en-tete, et on la corrige ici plutot que de la
   laisser passer. On leur donne le texte plein de la peau ; la destination ACTIVE garde sa pastille
   bleue a texte blanc (`:not(.on)`), et le survol garde un repere de couleur. */
:where(html[data-session-theme]) body.public-body .public-nav a:not(.btn):not(.on){color:var(--text)}
:where(html[data-session-theme]) body.public-body .public-nav a:not(.btn):not(.on):hover{color:var(--primary)}