/* ============================================================================
   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}}

/* ===================== 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:#5b7d8a; --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:#5d8580; --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:#8a7355; --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 5 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). */
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="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="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="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="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="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;
}