/* Mise en page : une soirée dans la rue des Lilas. Couverture au crépuscule, planche de cases sans contour sur fond de nuit, pages de texte crème, toits illuminés en pied de page. */
:root{
  --nuit:#0B1230; --nuit2:#101B40; --nuit3:#1B2B66; --bleu:#1D3FA8; --bleu2:#4468DA;
  --corail:#F2674A; --ambre:#FFC56B; --creme:#F7F3E8; --vert:#1F7A54; --lime:#76E02F; --jaune:#FFD23F;
  --encre:#101B40; --gris:#59607F; --grisclair:#B8C0DC;
  --f-t:"Bricolage Grotesque","Trebuchet MS","Segoe UI",sans-serif;
  --f:"DM Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--nuit);color:var(--creme);font-family:var(--f);font-size:17px;line-height:1.55}
.w{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{font-family:var(--f-t);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.015em}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-t);font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--encre);background:var(--lime);border:0;border-radius:999px;padding:.72em 1.4em;cursor:pointer;box-shadow:0 10px 26px rgba(118,224,47,.28);transition:translate .15s,box-shadow .15s}
.btn:hover{translate:0 -2px;box-shadow:0 14px 30px rgba(118,224,47,.38)}
.btn.b2{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 2px rgba(247,243,232,.75)}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}

.tete{background:var(--nuit)}
.tete .w{display:flex;align-items:center;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo{height:32px;width:auto;color:var(--creme);display:block}
.pres{font-family:var(--f-t);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ambre)}
.tete nav{margin-left:auto;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.tete nav a{font-weight:500;text-decoration:none;color:var(--grisclair)}
.tete nav a:hover{color:var(--creme)}
.tete .btn{font-size:.95rem;padding:.55em 1.15em;color:var(--encre);box-shadow:none}

.couv{background:linear-gradient(180deg,#0E1740 0%,#1D3FA8 42%,#C9553D 82%,#FFC56B 100%);overflow:hidden}
.couv .w{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:end}
.couv-t{padding-block:52px 64px;min-width:0;align-self:center}
.coll{display:inline-block;font-family:var(--f-t);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;background:var(--ambre);color:var(--encre);border-radius:999px;padding:.4em 1em}
.couv h1{font-weight:800;font-size:clamp(3.4rem,8.6vw,7rem);color:var(--creme);margin:.14em 0 .12em;letter-spacing:-.035em;line-height:.92}
.couv h1 span{color:var(--ambre)}
.sous{font-family:var(--f-t);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.15;max-width:22ch;margin:0 0 .6em;color:#fff}
.couv p.l{max-width:44ch;margin:0 0 1.5em;color:#E8ECFA}
.couv .acts{display:flex;gap:14px;flex-wrap:wrap}
.couv-i{min-width:0}
.couv-i svg{display:block;width:100%;height:auto}

.selecteur{background:var(--nuit2);border-block:1px solid #1E2A5C}
.selecteur .w{display:flex;gap:8px;padding-block:12px;overflow-x:auto;scrollbar-width:none}
.selecteur a{flex:none;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--grisclair);border-radius:999px;padding:6px 14px 6px 6px;font-weight:500;font-size:.93rem}
.selecteur a b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--nuit3);color:var(--creme);font-family:var(--f-t);font-weight:800}
.selecteur a:hover{color:var(--creme)}
.selecteur a.actif{background:var(--creme);color:var(--encre);font-weight:700}
.selecteur a.actif b{background:var(--lime);color:var(--encre)}
.planche{padding-block:44px 44px}
.ep-nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;margin-top:26px}
.ep-t{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.ep-n{font-family:var(--f-t);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;background:var(--corail);color:#fff;border-radius:999px;padding:.4em 1em}
.ep-t h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
.ep-t p{margin:0;color:var(--grisclair);font-weight:500;flex-basis:100%}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case{position:relative;margin:0;background:var(--nuit2);container-type:inline-size;aspect-ratio:var(--ar);overflow:hidden;border-radius:12px;--k:3.15}
.case.large{grid-column:1/-1;--k:1.66}
.case>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ens{font-family:var(--f-t);font-weight:800;font-size:19px;fill:var(--encre);letter-spacing:.04em}
.ecr{font-family:var(--f);font-size:14.5px;fill:var(--encre)} .ecr.b{font-weight:700}
.tab{font-family:var(--f-t);font-weight:800;font-size:22px;fill:var(--encre)}
.tab2{font-family:var(--f);font-weight:500;font-size:17px;fill:var(--gris)}
.pop{font-family:var(--f-t);font-weight:800;font-size:64px;fill:var(--ambre);letter-spacing:-.02em}
.zz{font-family:var(--f-t);font-weight:800;font-size:15px;fill:var(--creme)}

.bulle,.recit{position:absolute;left:var(--l);top:var(--t);width:var(--w);margin:0;font-family:var(--f-t);font-weight:600;color:var(--encre);font-size:clamp(11.5px,calc(var(--k) * 1cqw),20px);line-height:1.2}
.bulle{background:var(--creme);border-radius:1.05em;padding:.6em .9em .58em;text-align:center;box-shadow:0 8px 22px rgba(4,8,26,.38)}
.recit{background:var(--ambre);border-radius:.45em;padding:.5em .8em;font-size:clamp(10.5px,calc(var(--k) * .86cqw),17px);line-height:1.25;box-shadow:0 6px 16px rgba(4,8,26,.3)}
.recit sup{font-size:.62em;line-height:0}
.qui{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q{position:absolute;width:1.4em;height:1.6em;left:var(--q);top:calc(100% - 1px);overflow:visible;fill:var(--creme)}
.q-bd .q{scale:-1 1}
.q-hg .q{top:auto;bottom:calc(100% - 1px);scale:1 -1}
.q-hd .q{top:auto;bottom:calc(100% - 1px);scale:-1 -1}

@media (prefers-reduced-motion:no-preference){
  .flotte{animation:flotte 3.6s ease-in-out infinite alternate}
  .halo{transform-box:fill-box;transform-origin:center;animation:halo 2.8s ease-in-out infinite alternate}
  .yeux{transform-box:fill-box;transform-origin:center;animation:cligne 4.4s infinite}
  .nu{animation:derive 28s ease-in-out infinite alternate} .nu1{animation-duration:36s} .nu2{animation-direction:alternate-reverse}
  .doigt{animation:tape 1.9s ease-in-out infinite} .clic{animation:clic 1.9s ease-in-out infinite}
  .sc{animation:scint 2.4s ease-in-out infinite alternate} .sc1{animation-delay:-.8s} .sc2{animation-delay:-1.6s}
  .rayons{animation:rayons 9s ease-in-out infinite alternate}
  .zz{animation:zz 2.6s ease-in-out infinite} .z2{animation-delay:-1.3s}
  .case.vu .bulle,.case.vu .recit{animation:pop .5s cubic-bezier(.3,1.5,.5,1) both}
  .case.vu .bulle:nth-of-type(2),.case.vu .recit:nth-of-type(2){animation-delay:.35s}
  .case.vu .bulle:nth-of-type(3),.case.vu .recit:nth-of-type(3){animation-delay:.7s}
  .fe{animation:allume 14s infinite}
  .fe1{animation-delay:-2s} .fe2{animation-delay:-4s} .fe3{animation-delay:-6s} .fe4{animation-delay:-8s} .fe5{animation-delay:-10s} .fe6{animation-delay:-12s}
  .bande{animation:defile 80s linear infinite}
  .goutte{animation:goutte 1.5s linear infinite} .g1{animation-delay:-.5s} .g2{animation-delay:-1s}
  .lien{animation:lien 1.6s linear infinite}
  .vol{animation:vol 5s ease-in-out infinite alternate}
}
@keyframes flotte{from{translate:0 -6px}to{translate:0 6px}}
@keyframes halo{from{scale:.88;opacity:.75}to{scale:1.08;opacity:1}}
@keyframes cligne{0%,93%,100%{scale:1 1}96%{scale:1 .08}}
@keyframes derive{from{translate:-30px 0}to{translate:40px 0}}
@keyframes tape{0%,100%{translate:14px 16px}45%,60%{translate:0 0}}
@keyframes clic{0%,40%,100%{opacity:0}50%,62%{opacity:1}}
@keyframes scint{from{scale:.55;rotate:-10deg}to{scale:1.1;rotate:12deg}}
@keyframes rayons{from{rotate:-5deg}to{rotate:5deg}}
@keyframes zz{0%{opacity:0;translate:0 6px}40%{opacity:1}100%{opacity:0;translate:6px -10px}}
@keyframes pop{from{scale:.84}to{scale:1}}
@keyframes allume{0%,38%{fill:#16224F}44%,92%{fill:#FFD23F}100%{fill:#16224F}}
@keyframes goutte{from{translate:0 -14px;opacity:0}20%{opacity:1}to{translate:0 26px;opacity:0}}
@keyframes lien{to{stroke-dashoffset:-28}}
@keyframes defile{to{translate:calc(var(--boucle) * -1px) 0}}
@keyframes vol{from{translate:0 -10px;rotate:-4deg}to{translate:0 12px;rotate:5deg}}


/* --- salle de jeux --- */
.salle{background:var(--nuit)}
.salle .w{padding-block:48px 64px}
.salle h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.03em}
.salle h1 span{color:var(--ambre)}
.salle .intro{color:var(--grisclair);max-width:62ch;margin:.7em 0 0}
.boites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0 0}
.boite{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--nuit3);border-radius:18px;padding:14px 18px 14px 14px;border:3px solid transparent;transition:translate .15s}
.boite:hover{translate:0 -3px}
.boite:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}
.boite[aria-selected="true"]{background:var(--creme);color:var(--encre);border-color:var(--lime)}
.boite .ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:var(--c);font-family:var(--f-t);font-weight:800;font-size:1.7rem;color:var(--encre)}
.boite b{display:block;font-family:var(--f-t);font-weight:800;font-size:1.22rem;line-height:1.08}
.boite span.m{font-size:.9rem;color:var(--grisclair)} .boite[aria-selected="true"] span.m{color:var(--gris)}
.table{margin-top:18px;background:#16224F;border-radius:26px;padding:22px;box-shadow:inset 0 0 0 2px #22357C}
.jeu[hidden]{display:none}
.regle{color:var(--grisclair);margin:0 0 16px;max-width:76ch}
.note-sim{font-size:.85rem;color:#8E98BC;margin:16px 0 0}
.jbtn{font-family:var(--f-t);font-weight:700;font-size:1.02rem;border:0;border-radius:999px;padding:.72em 1.4em;cursor:pointer;background:var(--lime);color:var(--encre)}
.jbtn:disabled{opacity:.45;cursor:not-allowed}
.jbtn.sec{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 2px rgba(247,243,232,.7)}
.jbtn:focus-visible,.carte-j:focus-visible,.fiche:focus-visible,.rep:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}

/* jeu 1 : plateau */
.p1{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.plateau-z{position:relative;background:var(--creme);border-radius:20px;padding:14px;color:var(--encre)}
.plateau{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px}
.cs{aspect-ratio:1.18;border-radius:10px;display:grid;place-items:center;font-family:var(--f-t);font-weight:800;font-size:clamp(.85rem,1.9vw,1.25rem);background:#D9D4C7;color:#59607F;position:relative;font-variant-numeric:tabular-nums}
.cs.z3{background:#AFC0F2;color:#1D3FA8} .cs.z2{background:#F7B5A6;color:#8A2D1B} .cs.z1{background:#FFD98A;color:#6B4A0F} .cs.z0{background:var(--lime);color:var(--encre)}
.cs small{position:absolute;left:6px;top:4px;font-size:.52em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.pion{position:absolute;width:13%;aspect-ratio:160/170;left:0;top:0;transition:left .55s cubic-bezier(.4,1.4,.5,1),top .55s cubic-bezier(.4,1.4,.5,1);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(16,27,64,.35));z-index:2}
.pion svg{width:100%;height:100%;display:block}
.legende{display:flex;gap:6px 14px;flex-wrap:wrap;margin:10px 2px 0;font-size:.8rem;color:#59607F}
.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tableau-b{display:grid;gap:12px}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hud div{background:var(--nuit3);border-radius:14px;padding:10px 12px 8px}
.hud b{display:block;font-family:var(--f-t);font-weight:800;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.hud span{font-size:.78rem;color:var(--grisclair)}
.cal{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.cal i{width:15px;height:15px;border-radius:50%;background:var(--nuit3)} .cal i.f{background:var(--ambre)} .cal i.c{background:var(--lime);box-shadow:0 0 0 3px rgba(118,224,47,.3)}
.cal span{font-size:.85rem;color:var(--grisclair);margin-left:6px}
.piliers{background:var(--nuit3);border-radius:14px;padding:12px 14px;display:grid;gap:7px}
.pil{display:grid;grid-template-columns:5.4em 1fr;align-items:center;gap:10px;font-size:.88rem}
.pil div{display:flex;gap:4px}
.pil i{flex:1;height:10px;border-radius:5px;background:#101B40} .pil i.on{background:var(--c)}
.main-t{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.main-t h3{font-size:1.25rem;font-weight:800}
.jetons{display:flex;gap:6px;align-items:center;font-size:.88rem;color:var(--grisclair)}
.jetons i{width:20px;height:20px;border-radius:50%;background:var(--lime);box-shadow:inset 0 -3px 0 rgba(16,27,64,.25)} .jetons i.d{background:#2A3A7A;box-shadow:none}
.main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.carte-j{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-rows:auto 1fr auto;background:var(--creme);color:var(--encre);border-radius:14px;overflow:hidden;min-height:176px;border:3px solid transparent;transition:translate .15s,box-shadow .15s}
.carte-j:hover{translate:0 -4px}
.carte-j[aria-pressed="true"]{border-color:var(--lime);translate:0 -8px;box-shadow:0 14px 26px rgba(4,8,26,.45)}
.carte-j.trop{opacity:.45;cursor:not-allowed}
.carte-j .fa{background:var(--c);color:#fff;font-family:var(--f-t);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.carte-j .fa em{font-style:normal;display:flex;gap:3px} .carte-j .fa em i{width:11px;height:11px;border-radius:50%;background:var(--lime)}
.carte-j .co{padding:11px 12px 8px}
.carte-j b{display:block;font-family:var(--f-t);font-weight:800;font-size:1.05rem;line-height:1.1;margin-bottom:.3em}
.carte-j p{margin:0;font-size:.84rem;line-height:1.32;color:#353B5C}
.carte-j .ef{padding:8px 12px 10px;font-size:.76rem;font-weight:700;color:#59607F;border-top:1px dashed #C9C3B4}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.actions p{margin:0;color:var(--grisclair);font-size:.9rem}
.journal{background:var(--creme);color:var(--encre);border-radius:18px;padding:20px 22px;margin-top:18px}
.journal h3{font-size:1.4rem;font-weight:800;margin-bottom:.5em}
.journal ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:7px}
.journal ul li{display:grid;grid-template-columns:1.5em 1fr;gap:6px;line-height:1.35}
.journal .evt{background:#fff;border-radius:12px;padding:12px 14px;margin:0 0 14px;border-left:8px solid var(--corail)} .journal .evt.bon{border-color:var(--vert)}
.journal .evt b{font-family:var(--f-t);font-weight:800;display:block}
.fin{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.fin svg{width:150px;height:150px}
.med{display:inline-block;font-family:var(--f-t);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;border-radius:999px;padding:.4em 1em;background:var(--c);color:var(--encre);margin-bottom:.6em}

/* jeu 2 : duels */
.duel-q{background:var(--creme);color:var(--encre);border-radius:1.2em;padding:16px 22px;font-family:var(--f-t);font-weight:700;font-size:clamp(1.1rem,2.6vw,1.5rem);line-height:1.2;max-width:34ch;position:relative;margin:4px 0 26px}
.duel-q::after{content:"";position:absolute;left:38px;top:100%;border:13px solid transparent;border-top-color:var(--creme);border-left-width:4px}
.duel-q small{display:block;font-family:var(--f);font-weight:500;font-size:.8rem;color:var(--gris);margin-bottom:.3em;letter-spacing:.04em}
.fiches{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fiche{all:unset;box-sizing:border-box;cursor:pointer;background:var(--creme);color:var(--encre);border-radius:18px;padding:18px 20px;border:4px solid transparent;transition:translate .15s;display:grid;gap:8px;align-content:start}
.fiche:hover{translate:0 -4px}
.fiche[disabled]{cursor:default;translate:none}
.fiche .l{font-family:var(--f-t);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.fiche b{font-family:var(--f-t);font-weight:800;font-size:1.3rem;line-height:1.1}
.fiche ul{margin:0;padding-left:1.1em;display:grid;gap:5px;font-size:.95rem;line-height:1.35;color:#353B5C}
.fiche.gagne{border-color:var(--lime)} .fiche.perd{opacity:.55}
.fiche.gagne .l::after{content:" · le plus probable";color:var(--vert)}
.verdict{background:var(--nuit3);border-radius:16px;padding:16px 18px;margin-top:16px;display:grid;gap:12px}
.verdict b{font-family:var(--f-t);font-weight:800;font-size:1.15rem}
.verdict p{margin:0;color:#DDE3F5}
.suivi{display:flex;gap:6px;margin:0 0 16px}
.suivi i{width:26px;height:8px;border-radius:4px;background:var(--nuit3)} .suivi i.v{background:var(--lime)} .suivi i.x{background:var(--corail)} .suivi i.c{background:var(--creme)}

/* jeu 3 : quiz */
.qcarte{background:var(--creme);color:var(--encre);border-radius:20px;padding:26px 26px 22px;max-width:680px}
.qcarte small{font-family:var(--f-t);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--corail)}
.qcarte h3{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;margin:.3em 0 .9em;line-height:1.12}
.reps{display:flex;gap:10px;flex-wrap:wrap}
.rep{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--f-t);font-weight:700;border-radius:999px;padding:.7em 1.5em;background:var(--nuit2);color:var(--creme)}
.rep:hover{background:var(--bleu)}
.profil h3{font-size:clamp(1.6rem,4vw,2.4rem)} .profil ol{margin:.6em 0 1em;padding-left:1.2em;display:grid;gap:6px}

@media (max-width:900px){.p1{grid-template-columns:1fr}.main{grid-template-columns:repeat(2,minmax(0,1fr))}.boites{grid-template-columns:1fr}}
@media (max-width:560px){.table{padding:14px}.fiches{grid-template-columns:1fr}.fin{grid-template-columns:1fr}.hud b{font-size:1.4rem}.carte-j{min-height:0}}

.dos{background:var(--creme);color:var(--encre)}
.dos .w{padding-block:64px}
.surt{font-family:var(--f-t);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--corail);margin:0 0 .7em}
.dos h2,.vrai h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800;max-width:19ch}
.ret{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.ret article{background:#fff;border-radius:16px;padding:26px 24px 24px;border-top:8px solid var(--c)}
.ret h3{font-size:1.45rem;font-weight:700;margin-bottom:.45em;line-height:1.1}
.ret p{margin:0;color:#353B5C}
.ret .pt{display:inline-grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--c);color:#fff;font-family:var(--f-t);font-weight:800;margin-bottom:.7em}

.suite .w{padding-block:64px}
.suite .surt{color:var(--ambre)}
.suite h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800}
.trs{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trs li{display:grid}
.tr{text-decoration:none;color:var(--creme);transition:translate .15s,background .15s}
.tr:hover{translate:0 -3px;background:#22357C}
.tr{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;background:var(--nuit3);border-radius:14px;padding:18px 18px 16px;position:relative}
.tr .num{grid-row:1/3;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:12px;font-family:var(--f-t);font-weight:800;font-size:1.45rem;background:var(--c);color:var(--encre)}
.tr .tt{font-family:var(--f-t);font-weight:700;font-size:1.25rem;line-height:1.1}
.tr .st{color:var(--grisclair);font-size:.95rem;line-height:1.3}
.tr .et{position:absolute;top:-11px;right:14px;font-family:var(--f-t);font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;background:var(--nuit);color:var(--grisclair);border-radius:999px;padding:.35em .9em}
.tr.lu .et{background:var(--lime);color:var(--encre)}
.jeux{margin:28px 0 0;color:var(--grisclair);max-width:70ch}

.vrai{background:var(--creme);color:var(--encre)}
.vrai .w{padding-block:64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.vrai p{max-width:54ch;color:#353B5C}
.vrai p.surt{color:var(--corail)}
.chif{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0;padding:0;list-style:none}
.chif li{background:#fff;border-radius:14px;padding:14px 18px 12px;min-width:0}
.chif b{display:block;font-family:var(--f-t);font-weight:800;font-size:2.1rem;line-height:1;color:var(--bleu)}
.chif span{font-size:.93rem;color:var(--gris)}
form{background:#fff;border-radius:20px;padding:28px;box-shadow:0 24px 60px rgba(16,27,64,.16);display:grid;gap:14px;min-width:0;color-scheme:light}
form h3{font-size:1.7rem;font-weight:800}
label{display:grid;gap:6px;font-weight:700;font-size:.93rem}
input,textarea{font:inherit;font-weight:400;border:2px solid #D9D4C7;background:#FBF9F3;padding:.6em .8em;border-radius:10px;color:var(--encre);width:100%;min-width:0}
textarea{min-height:96px;resize:vertical}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note{font-size:.88rem;color:var(--gris);margin:0}
.ok{font-weight:700;color:var(--vert);margin:0}
form .btn{justify-content:center;box-shadow:none}

.pied{background:var(--nuit);color:#E6EAF5;overflow:hidden}
.toits{display:block;width:100%;height:clamp(150px,22vw,260px)}
.pied .w{padding-block:34px 28px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.pied .logo{height:30px;margin-bottom:14px}
.pied h3{font-family:var(--f-t);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--lime);margin-bottom:.9em}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pied a{text-decoration:none;color:var(--grisclair)} .pied a:hover{color:var(--creme)}
.pied p{margin:0;color:var(--grisclair);max-width:40ch}
.bas{border-top:1px solid #23305E;font-size:.86rem;color:#8E98BC}
.bas .w{display:block;padding-block:16px}

@media (max-width:860px){
  .couv .w{grid-template-columns:1fr} .couv-t{padding-block:40px 0} .couv-i{max-width:460px;margin-inline:auto}
  .ret,.trs{grid-template-columns:1fr} .vrai .w{grid-template-columns:1fr} .pied .w{grid-template-columns:1fr}
  .tete nav a:not(.btn){display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .cases{grid-template-columns:1fr;gap:12px}
  .case{--k:3.5}
  .case.large{aspect-ratio:4/3;--k:3.5}
  .case.large .recit,.case.large .bulle{left:var(--lm,var(--l));top:var(--tm,var(--t));width:var(--wm,var(--w))}
  .selecteur a span{display:none} .selecteur a.actif span{display:inline} .selecteur a{padding-right:6px} .selecteur a.actif{padding-right:14px}
  .ep-nav{justify-content:stretch} .ep-nav .btn{flex:1;justify-content:center;text-align:center}
  .deux{grid-template-columns:1fr}
  .pres{display:none}
}

/* --- ajouts pour le site réel --- */
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--encre);padding:.6em 1em;z-index:50;font-weight:700}
.skip:focus{left:8px;top:8px}
.tete a.lg{display:flex;align-items:center;gap:16px;text-decoration:none}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.fmsg{margin:0;font-weight:700;min-height:1.2em;color:var(--vert)} .fmsg.err{color:#C0392B}
.histoire{background:var(--creme);color:var(--encre)}
.histoire .w{padding-block:64px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.histoire h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800;max-width:18ch}
.histoire p{color:#353B5C;max-width:56ch}
.persos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.perso{background:var(--nuit2);color:var(--creme);border-radius:18px;overflow:hidden;display:grid}
.perso svg{display:block;width:100%;height:auto}
.perso div{padding:16px 18px 18px}
.perso h3{font-size:1.35rem;font-weight:800;margin-bottom:.2em}
.perso p{margin:0;color:var(--grisclair);font-size:.95rem;line-height:1.4}
.cartes{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cartes li{display:grid}
.carte{display:grid;grid-template-rows:auto 1fr;background:var(--nuit3);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--creme);transition:translate .15s}
.carte:hover{translate:0 -4px}
.carte svg{display:block;width:100%;height:auto;aspect-ratio:1200/470}
.carte div{padding:16px 18px 18px;display:grid;gap:4px;align-content:start}
.carte .n{font-family:var(--f-t);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--ambre)}
.carte b{font-family:var(--f-t);font-weight:800;font-size:1.35rem;line-height:1.08}
.carte span.s{color:var(--grisclair);font-size:.95rem;line-height:1.35}
.carte span.l{margin-top:8px;font-family:var(--f-t);font-weight:700;color:var(--lime)}
.appel{background:var(--nuit2)}
.appel .w{padding-block:44px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.appel h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;max-width:24ch}
.legal{background:var(--creme);color:var(--encre)}
.legal .w{padding-block:56px;max-width:820px}
.legal h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:.6em}
.legal h2{font-size:1.4rem;font-weight:800;margin:1.6em 0 .4em}
.legal p{color:#353B5C;margin:0 0 .8em}
.legal a{color:var(--bleu)}
.merci{text-align:center} .merci .w{padding-block:80px} .merci h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-inline:auto} .merci p{margin-inline:auto;max-width:52ch}
.pied button.lien,.pied a.cmplz-show-banner{background:none;border:0;padding:0;font:inherit;color:var(--grisclair);cursor:pointer;text-decoration:underline}
@media (max-width:860px){.histoire .w{grid-template-columns:1fr}.cartes{grid-template-columns:1fr}}