/* System Z, landing phase 0. Version sombre. Aucune dependance.
   Mode par defaut = a plat (mobile, sans JS, animations reduites).
   La 3D ne s'active que sous html.z3d (pose par app.js sur ecran large). */

@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-stretch:125%;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format("woff2")}

:root{
  --bg:#07080b;--bg-rgb:7,8,11;--txt:#eef0f5;--mut:#a9afbd;--ink:#0a0a0c;
  --glass:rgba(14,16,22,.84);--edge:rgba(var(--line-rgb),.17);--radius:14px;
  /* Palette 2 : magenta + turquoise (base sombre ; le defaut affiche est la palette 11, posee sur <html>) */
  --hot:#e8338f;--cool:#1fb5b8;--hot-rgb:232,51,143;--cool-rgb:31,181,184;
  /* --accent-rgb = melange chaud vers froid selon le curseur, ecrit par app.js (pas de color-mix requis) */
  --accent-rgb:var(--hot-rgb);
  /* couleurs de structure, redefinies par le theme clair (palette 8) */
  --line-rgb:255,255,255;--strong:#fff;--faint:#9aa0ae;--vignette:rgba(0,0,0,.6);--shade:.75;
  --note-light:#f2f3f7;--note-dark:#2a2d36;--on-cool:var(--ink);--chip:#f2f3f7;--on-chip:var(--ink);
  --display:"Archivo","Arial Black","Segoe UI",system-ui,sans-serif;
  --text:"Inter Tight","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* Palette 3 (comparaison seulement, ?p=3) : corail + azur */
:root[data-palette="3"]{--hot:#ff6b8a;--cool:#3f7dd9;--hot-rgb:255,107,138;--cool-rgb:63,125,217}
/* Palettes de comparaison du 12/11 (?p=4, ?p=5, ?p=6) : fond, verre et accents propres. Primaire = --hot, secondaire = --cool. */
/* 4 : ardoise et or */
:root[data-palette="4"]{--bg:#0b1020;--bg-rgb:11,16,32;--txt:#f3efe6;--glass:rgba(18,24,44,.84);--hot:#e8b04b;--cool:#7fb3ff;--hot-rgb:232,176,75;--cool-rgb:127,179,255}
/* 5 : indigo et surligneur */
:root[data-palette="5"]{--bg:#0c0a1f;--bg-rgb:12,10,31;--glass:rgba(20,17,44,.84);--hot:#ffe14d;--cool:#8b7cff;--hot-rgb:255,225,77;--cool-rgb:139,124,255}
/* 6 : foret et creme */
:root[data-palette="6"]{--bg:#0a1512;--bg-rgb:10,21,18;--glass:rgba(15,30,26,.84);--hot:#5fd3a0;--cool:#f2e8cf;--hot-rgb:95,211,160;--cool-rgb:242,232,207}
/* 7 : magenta sobre (meme teinte que la palette 2, moins saturee), fond aubergine, secondaire creme */
:root[data-palette="7"]{--bg:#0f0a14;--bg-rgb:15,10,20;--glass:rgba(25,17,32,.84);--hot:#d3458f;--cool:#f2e8cf;--hot-rgb:211,69,143;--cool-rgb:242,232,207;--note-light:#b9a6c9}
/* 8 : magenta sur clair. Theme clair : fond creme, encre foncee, secondaire bleu nuit */
:root[data-palette="8"]{color-scheme:light;--bg:#f6f1e7;--bg-rgb:246,241,231;--txt:#1b1a22;--mut:#55525f;--glass:rgba(255,253,248,.86);--edge:rgba(20,16,30,.18);
  --hot:#e8338f;--cool:#1f2a56;--hot-rgb:232,51,143;--cool-rgb:31,42,86;
  --line-rgb:20,16,30;--strong:#0f0e14;--faint:#6b6875;--vignette:rgba(120,96,60,.14);--shade:.16;
  --note-light:#fff;--note-dark:#1b1a22;--on-cool:#fff;--chip:#1b1a22;--on-chip:#fff}
:root[data-palette="8"] .tabs button,:root[data-palette="8"] .opts button,:root[data-palette="8"] .menu-cta,:root[data-palette="8"] .pause{border-color:rgba(var(--line-rgb),.6)}
:root[data-palette="8"] .tabs button[aria-selected=true]{border-color:var(--hot)}
:root[data-palette="8"] .opts button[aria-pressed=true]{border-color:var(--chip)}
/* 9 : bleu nuit sur clair. Meme base claire que la 8, roles inverses : primaire bleu nuit, secondaire magenta */
:root[data-palette="9"],:root[data-palette="10"],:root[data-palette="11"],:root[data-palette="12"]{color-scheme:light;--bg:#f6f1e7;--bg-rgb:246,241,231;--txt:#1b1a22;--mut:#55525f;--glass:rgba(255,253,248,.86);--edge:rgba(20,16,30,.18);
  --hot:#1f2a56;--cool:#e8338f;--hot-rgb:31,42,86;--cool-rgb:232,51,143;
  --line-rgb:20,16,30;--strong:#0f0e14;--faint:#6b6875;--vignette:rgba(120,96,60,.14);--shade:.16;
  --note-light:#fff;--note-dark:#1b1a22;--on-cool:#0a0a0c;--chip:#1b1a22;--on-chip:#fff}
:root[data-palette="9"] .tabs button,:root[data-palette="9"] .opts button,:root[data-palette="9"] .menu-cta,:root[data-palette="9"] .pause,:root[data-palette="10"] .tabs button,:root[data-palette="10"] .opts button,:root[data-palette="10"] .menu-cta,:root[data-palette="10"] .pause,:root[data-palette="11"] .tabs button,:root[data-palette="11"] .opts button,:root[data-palette="11"] .menu-cta,:root[data-palette="11"] .pause,:root[data-palette="12"] .tabs button,:root[data-palette="12"] .opts button,:root[data-palette="12"] .menu-cta,:root[data-palette="12"] .pause{border-color:rgba(var(--line-rgb),.6)}
:root[data-palette="9"] .tabs button[aria-selected=true],:root[data-palette="10"] .tabs button[aria-selected=true],:root[data-palette="11"] .tabs button[aria-selected=true],:root[data-palette="12"] .tabs button[aria-selected=true]{border-color:var(--hot);color:#fff}
:root[data-palette="9"] .opts button[aria-pressed=true],:root[data-palette="10"] .opts button[aria-pressed=true],:root[data-palette="11"] .opts button[aria-pressed=true],:root[data-palette="12"] .opts button[aria-pressed=true]{border-color:var(--chip)}
:root[data-palette="9"] .cta,:root[data-palette="9"] .note:nth-child(4n+1),:root[data-palette="10"] .cta,:root[data-palette="10"] .note:nth-child(4n+1),:root[data-palette="11"] .cta,:root[data-palette="11"] .note:nth-child(4n+1),:root[data-palette="12"] .cta,:root[data-palette="12"] .note:nth-child(4n+1){color:#fff}
/* 10 : bleu nuit sur clair, secondaire ocre */
:root[data-palette="10"]{--cool:#d9a441;--cool-rgb:217,164,65}
/* 11 : bleu nuit sur clair, secondaire terracotta */
:root[data-palette="11"]{--cool:#e0693a;--cool-rgb:224,105,58}
/* 12 : bleu nuit sur clair, secondaire turquoise sobre */
:root[data-palette="12"]{--cool:#2bb3a8;--cool-rgb:43,179,168}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.55 var(--text);overflow-x:hidden}
/* grain de pellicule */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* vignette */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:radial-gradient(ellipse at 50% 50%,transparent 58%,var(--vignette) 100%)}

a{color:var(--strong);font-weight:600;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--strong);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.no-js .jsonly{display:none}
.only3d{display:none}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:#fff;color:#000;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}

/* ---------- menu ---------- */
.menu{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;gap:16px;align-items:center;padding:12px 20px;background:rgba(var(--bg-rgb),.94);border-bottom:1px solid rgba(var(--line-rgb),.08)}
.z3d .menu{background:linear-gradient(rgba(var(--bg-rgb),.92),rgba(var(--bg-rgb),0));border-bottom:0}
.brand{font:800 18px var(--display);font-stretch:125%;color:var(--strong);margin-right:auto;letter-spacing:-.01em}
.menu-cta{font-size:15px;color:var(--txt);text-decoration:none;border:1px solid rgba(var(--line-rgb),.45);border-radius:8px;padding:6px 12px}
.menu-cta:hover{border-color:var(--strong)}
.lang{display:flex;align-items:center;gap:4px;color:var(--mut)}
.lang button{font:600 15px var(--text);background:none;border:0;color:var(--mut);padding:8px 6px;cursor:pointer}
.lang button[aria-pressed=true]{color:var(--strong);text-decoration:underline;text-underline-offset:4px}
.pause{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:none;border:1px solid rgba(var(--line-rgb),.45);border-radius:50%;cursor:pointer;fill:var(--strong)}
.js .pause{display:inline-flex}
.pause .i-play{display:none}
.pause[aria-pressed=true] .i-play{display:block}
.pause[aria-pressed=true] .i-pause{display:none}

/* ---------- mode a plat (defaut) ---------- */
.depth{position:fixed;inset:-20% 0;z-index:0;pointer-events:none;overflow:hidden}
.depth i{position:absolute;width:120vmax;height:120vmax;border-radius:50%;left:50%;margin-left:-60vmax}
.depth i:first-child{top:-40vmax;background:radial-gradient(circle,rgba(var(--accent-rgb),.2),transparent 60%)}
.depth i:last-child{bottom:-50vmax;background:radial-gradient(circle,rgba(var(--cool-rgb),.16),transparent 60%)}
.track{position:relative;z-index:2}
.rig{display:grid;gap:22px;padding:78px 14px 48px}
#fx,.floor,.glow,.rim,.dots{display:none}

.win{position:relative;width:100%;max-width:760px;margin:0 auto;background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,var(--shade)),0 0 90px rgba(var(--accent-rgb),.16);scroll-margin-top:70px}
.bar{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border-bottom:1px solid rgba(var(--line-rgb),.1);font:800 12px var(--display);font-stretch:125%;color:var(--mut);letter-spacing:.04em}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgb(var(--accent-rgb));margin-right:10px;box-shadow:0 0 12px rgb(var(--accent-rgb))}
.body{padding:24px}
h1{font:800 clamp(34px,6vw,68px)/1 var(--display);font-stretch:125%;margin:0 0 16px;letter-spacing:-.02em;color:var(--strong);text-wrap:balance}
h2{font:800 clamp(22px,3.4vw,36px)/1.05 var(--display);font-stretch:125%;margin:0 0 14px;color:var(--strong);text-wrap:balance}
h2.h3{font-size:20px;margin:22px 0 8px}
p{margin:0 0 12px;color:var(--mut)}
.lead{font-size:19px;max-width:34em}
.small{font-size:15px}
.body p b{color:var(--strong)}

/* ---------- planner ---------- */
.slider{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-weight:600;flex-wrap:wrap;color:var(--mut)}
input[type=range]{flex:1 1 180px;min-width:0;height:44px;margin:0;accent-color:rgb(var(--accent-rgb));cursor:grab;touch-action:pan-y}
.count{flex:0 0 auto;min-width:9.5em;color:var(--txt);font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.count.on{opacity:1;transform:none}
.stage{position:relative;background:rgba(var(--line-rgb),.035);border:1px solid rgba(var(--line-rgb),.14);border-radius:10px}
.notes{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.note{display:flex;align-items:center;justify-content:center;text-align:center;min-height:76px;padding:6px;font:600 12.5px/1.15 var(--text);letter-spacing:-.01em;overflow-wrap:anywhere;color:var(--ink);border:1px solid rgba(var(--line-rgb),.3);border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,calc(var(--shade) * .75));user-select:none;-webkit-user-select:none}
.note:nth-child(4n+1){background:var(--hot)}
.note:nth-child(4n+2){background:var(--note-light)}
.note:nth-child(4n+3){background:var(--cool);color:var(--on-cool)}
.note:nth-child(4n){background:var(--note-dark);color:#fff}
/* sans JS : la semaine rangee ; avec JS : notes en vrac qui se rangent */
.note .a{display:none}
.js .note .a{display:inline}.js .note .b{display:none}
.js .note.done .a{display:none}.js .note.done .b{display:inline}
.js .stage{height:360px;overflow:hidden}
.js .notes{display:block;padding:0;position:absolute;inset:0}
.js .note{position:absolute;left:0;top:0;min-height:0;will-change:transform}
.slots{position:absolute;inset:0;opacity:0}
.slot{position:absolute;border:1px dashed rgba(var(--line-rgb),.3);border-radius:8px;padding:3px 8px;font-size:12px;color:var(--faint)}

/* ---------- course ---------- */
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{display:inline-flex;align-items:center;gap:6px;font:800 13px var(--display);font-stretch:125%;padding:10px 16px;border:1px solid rgba(var(--line-rgb),.45);background:transparent;color:var(--strong);border-radius:8px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--hot);border-color:var(--hot);color:var(--ink)}
.panels{min-height:178px}
.say{background:rgba(var(--line-rgb),.06);border:1px solid rgba(var(--line-rgb),.14);border-radius:10px 10px 10px 2px;padding:14px;color:var(--txt)}
.opts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.opts button{font:600 15px var(--text);background:transparent;color:var(--txt);border:1px solid rgba(var(--line-rgb),.45);border-radius:20px;padding:6px 14px;cursor:pointer}
.opts button[aria-pressed=true]{background:var(--chip);color:var(--on-chip);border-color:var(--chip)}
.check{list-style:none;margin:0;padding:0}
.check li{border-bottom:1px solid rgba(var(--line-rgb),.1)}
.check label{display:flex;gap:10px;align-items:center;padding:7px 0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--cool);flex:none}
.stuck{margin-top:8px}
.obs{columns:2 200px;list-style:none;margin:0;padding:0}
.obs li{padding:9px 0;border-bottom:1px solid rgba(var(--line-rgb),.16);font-weight:600;break-inside:avoid}

/* ---------- waitlist ---------- */
.cta-row{margin:6px 0 16px}
.cta{display:block;width:100%;font:800 16px var(--display);font-stretch:125%;padding:15px;background:var(--hot);color:var(--ink);border:0;border-radius:8px;cursor:pointer;box-shadow:0 0 30px rgba(var(--hot-rgb),.4);transition:background-color .25s;text-align:center;text-decoration:none}
.cta:hover{background:#fff}

/* ---------- 3D (ecran large, animations autorisees) ---------- */
.z3d .only3d{display:block}
.z3d .depth{display:none}
.z3d .track{height:var(--track-h,400vh)}
.z3d .view{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1100px;perspective-origin:50% 45%;background:radial-gradient(ellipse at 50% 55%,rgba(var(--accent-rgb),.16),transparent 60%)}
.z3d #fx{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.z3d .floor{display:block;position:absolute;left:-50%;right:-50%;bottom:-20%;height:70%;overflow:hidden;opacity:.1;transform:rotateX(78deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.z3d #floor{position:absolute;left:0;right:0;top:-180px;bottom:-180px;background-image:linear-gradient(rgba(var(--line-rgb),.5) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--line-rgb),.5) 1px,transparent 1px);background-size:90px 90px;will-change:transform}
.z3d .rig{display:block;padding:0;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.z3d .glow{display:block;position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;pointer-events:none;opacity:0}
.z3d .glow.hot{background:radial-gradient(circle,rgba(var(--hot-rgb),.34),transparent 62%)}
.z3d .glow.cool{background:radial-gradient(circle,rgba(var(--cool-rgb),.34),transparent 62%)}
.z3d .win{position:absolute;left:50%;top:50%;width:min(760px,88vw);margin:0;will-change:transform;box-shadow:0 50px 140px rgba(0,0,0,var(--shade)),0 0 110px rgba(var(--accent-rgb),.26);pointer-events:none}
.z3d .win.focus{pointer-events:auto}
.z3d .win.near{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.z3d .stage{height:340px}
/* point de la barre de titre : une pulsation quand la fenetre se pose */
.z3d .win.landed .dot{animation:pulse .7s ease-out 1}
@keyframes pulse{0%{transform:scale(1)}35%{transform:scale(1.9);box-shadow:0 0 22px rgb(var(--accent-rgb))}100%{transform:scale(1)}}
/* projecteur sur le bord du verre */
.z3d .rim{display:block;position:absolute;inset:-1px;border-radius:calc(var(--radius) + 1px);padding:1.5px;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .4s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.z3d .rim.on{opacity:1}
.z3d .rim i{position:absolute;left:0;top:0;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(var(--line-rgb),.85),rgba(var(--accent-rgb),.45) 35%,transparent 66%);will-change:transform}
/* indicateur de profondeur */
.z3d .dots{display:flex;gap:6px;position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:90}
.dots button{width:28px;height:28px;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(var(--line-rgb),.5);transition:transform .3s,background-color .3s,box-shadow .3s}
.dots button:hover::before{background:var(--strong)}
.dots button[aria-current=true]::before{background:rgb(var(--accent-rgb));box-shadow:0 0 12px rgb(var(--accent-rgb));transform:scale(1.5)}

/* fondu court au changement de langue */
[data-i18n],.note span{transition:opacity .14s}
.swap [data-i18n],.swap .note span{opacity:0}

/* replis */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.win{background:rgba(14,16,22,.96)}}
@media (max-width:480px){.menu{gap:10px;padding:10px 14px}.menu-cta{display:none}.body{padding:18px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}