/* Le Bureau, page de vente. DA IA Espresso (brand-visuel/DESIGN_SYSTEM.md).
   Parti pris : le rouge porte les titres et les scènes du jeu, le crème porte tout ce qui se lit.
   Une seule scène est spectaculaire (le film des locaux) ; ailleurs, un seul geste par section.
   Le haut de page s'affiche sans attendre : polices du dossier fonts/, aucun script nécessaire.
   Ordre du fichier : polices, socle, haut de page, sections, film (.anime), écrans étroits, mouvement réduit. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/oswald-normal.woff2) format('woff2')}

:root{
  --vermilion:#D9502A; --cream:#F4E6C4; --chalk:#F7EFDC; --ink:#20333A; --teal:#9DBBB6; --ember:#B93D1C;
  --gold:#E2B13C;   /* le jaune des panneaux du jeu : la caisse, et le « (vraiment) » de la vidéo */
  --paper:#FBF3DE; --vert:#4F8A5B;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --label:"Oswald","Arial Narrow",sans-serif;
  /* cinq tailles de texte courant, pas une de plus */
  --t-petit:15px; --t:17px; --t-chapo:clamp(19px,1.75vw,23px); --t-h3:24px; --t-rouge:19px;
  --trait:2px solid var(--ink);
  --sortie:cubic-bezier(.16,1,.3,1);
  --haut:60px;
  --marge:clamp(72px,10vw,136px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--haut) + 16px);overflow-x:clip}
body{margin:0;background:var(--vermilion);color:var(--chalk);font-family:var(--sans);font-size:var(--t);line-height:1.55;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
img,video,svg,canvas{max-width:100%;display:block}
img{height:auto}
h1,h2,h3{font-family:var(--serif);margin:0;text-wrap:balance}
p,figure,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit}
strong,b{font-weight:600}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.panel :focus-visible,.feuille :focus-visible,.premiere :focus-visible,.faq :focus-visible,.fiche :focus-visible{outline-color:var(--ember)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--chalk);padding:8px 14px;border-radius:8px;z-index:300}
.skip:focus{left:8px}

.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
main{display:block;overflow-x:clip}   /* pas de flex : la scène épinglée a besoin de son espace réservé */
.bloc{padding-block:var(--marge) 0}
/* le titre à gauche, son chapô à droite : la largeur sert, sans vide à côté des titres */
.locaux>.tete{margin-bottom:24px}
.tete{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4.5vw,56px)}
h2{font-size:clamp(30px,4.1vw,54px);line-height:1.06;font-weight:700;letter-spacing:-.015em;max-width:22ch}
.tete:not(:has(.chapo)) h2{grid-column:1/-1;max-width:36ch}
.chapo em,.hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.14em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.chapo{font-family:var(--serif);font-size:var(--t-chapo);line-height:1.4;font-weight:600;max-width:40ch}
/* sur le rouge, le petit texte passe en serif gras de 19 px : la craie sur vermillon ne tient pas plus fin */
.mention,.note,figcaption{font-family:var(--serif);font-size:var(--t-rouge);line-height:1.35;font-weight:600}
.note{max-width:60ch;margin-top:28px}
.petit{font-size:var(--t-petit);line-height:1.5;opacity:.8}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--chalk);text-decoration:none;font-family:var(--label);font-size:17px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;padding:19px 30px;border-radius:8px;border:var(--trait);text-align:center;transition:background .18s,color .18s,border-color .18s,transform .12s}
.btn:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.panel .btn:hover{background:var(--ember);color:var(--chalk);border-color:var(--ember)}
.btn:active{transform:scale(.98)}
.btn-small{font-size:15px;padding:9px 16px;white-space:nowrap}
.btn-large{width:100%;font-size:18px;padding:21px 24px}

/* ---- barre du haut ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--vermilion);border-bottom:1px solid rgba(247,239,220,.35)}
.top-in{display:flex;align-items:center;gap:28px;height:var(--haut)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--label);font-weight:600;font-size:17px;letter-spacing:.14em;text-transform:uppercase}
.brand svg{width:28px;height:28px}
.top-nav{display:flex;gap:28px;margin-left:auto}
.top-nav a{font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s}
.top-nav a:hover{border-bottom-color:var(--chalk)}

/* ---- 1. haut de page ---- */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--haut) + 24px) 0 32px;overflow:clip}
.hero-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,2.4vw,40px);align-items:center}
.hero-texte{display:flex;flex-direction:column;gap:20px;align-items:flex-start;position:relative;z-index:2}
.hero-nom{font-family:var(--serif);font-weight:700;font-size:clamp(56px,7.6vw,118px);line-height:.9;letter-spacing:-.035em;color:var(--ink)}
.hero h1{font-size:clamp(25px,2.65vw,40px);line-height:1.14;font-weight:700;letter-spacing:-.012em;max-width:23ch}
.hero-sous{font-family:var(--serif);font-style:italic;font-size:var(--t-chapo);line-height:1.3}
.hero-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:8px}
.hero-scene{position:relative}
.hero-legende{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-size:var(--t-chapo);line-height:1.3;margin-left:5%}
.vue{position:relative;aspect-ratio:4/3}
.vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vue img[data-vue-b]{opacity:0}
.hero .vue{margin:-7% -17% -19% -6%}
/* l'arrivée : un seul geste, la caisse et la première tâche se posent. Du CSS seul, en transform. */
.caisse{animation:pose .34s var(--sortie) .1s backwards}
.premiere{animation:pose .34s var(--sortie) .18s backwards}
@keyframes pose{from{opacity:0;transform:translateY(14px)}}
/* une invitation, deux fois, puis plus rien : la case à cocher bat */
.pret .tache-une:not(.faite) input:not(:focus-visible){animation:invite 1.5s var(--sortie) 1.2s 2}
@keyframes invite{0%{outline:3px solid var(--vert);outline-offset:0}70%,100%{outline:3px solid transparent;outline-offset:12px}}
.caisse{position:absolute;right:21%;top:10%;font-family:var(--label);font-weight:600;font-size:21px;letter-spacing:.04em;line-height:1.2;color:var(--ink);background:var(--gold);border:var(--trait);border-radius:999px;padding:6px 18px;font-variant-numeric:tabular-nums}
.premiere{position:relative;z-index:2;width:min(400px,100%);height:226px;background:var(--cream);color:var(--ink);border:var(--trait);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.premiere-titre{font-family:var(--label);font-size:var(--t-petit);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);line-height:1.2}
.tache-une,.tasks label{display:flex;gap:12px;align-items:center;background:var(--paper);border:var(--trait);border-radius:8px;padding:12px 14px;cursor:pointer;font-weight:600;font-size:var(--t);line-height:1.3;transition:background .18s}
.tache-une:hover,.tasks label:hover{background:var(--chalk)}
.tache-une input,.tasks input{appearance:none;flex:none;width:28px;height:28px;margin:0;border:var(--trait);border-radius:6px;background:var(--chalk);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.tache-une input::after,.tasks input::after{content:"";width:13px;height:7px;border-left:3px solid var(--chalk);border-bottom:3px solid var(--chalk);transform:rotate(-45deg) scale(0);transition:transform .2s var(--sortie);margin-top:-3px}
.tache-une input:checked,.tasks input:checked{background:var(--vert)}
.tache-une input:checked::after,.tasks input:checked::after{transform:rotate(-45deg) scale(1)}
.tache-une.faite,.tasks li.done label{cursor:default;background:transparent}
.tache-une.faite span,.tasks li.done span{text-decoration:line-through;opacity:.6}
.premiere-suite{font-family:var(--serif);font-size:var(--t-rouge);line-height:1.3;font-weight:600}
.premiere-pied{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.premiere-achat{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--ink);color:var(--chalk);border:var(--trait);border-radius:8px;padding:11px 14px;font-weight:600;font-size:var(--t);text-align:left;transition:background .18s}
.premiere-achat:hover{background:var(--ember);border-color:var(--ember)}
.premiere-achat em{font-style:normal;font-family:var(--label);letter-spacing:.04em}
.premiere-lien{font-weight:600;text-underline-offset:3px}

/* écrans d'ordinateur peu hauts : tout le premier écran tient, carte comprise */
@media (min-width:901px) and (max-height:780px){
  .hero{padding-top:calc(var(--haut) + 12px);padding-bottom:16px}
  .hero-texte{gap:14px}
  .hero-nom{font-size:clamp(52px,6vw,84px)}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero .vue{margin:-9% -14% -27% -2%}
  .hero-legende{margin-left:8%}
  .premiere{height:204px;padding:14px 16px;gap:9px}
  .hero .caisse{top:14%}
  .premiere-suite{font-size:var(--t)}
}

html:not(.pret) .premiere,html:not(.pret) .demo-cote,html:not(.pret) .caisse,html:not(.pret) .play-toggle{display:none}

/* ---- 2. le garage ---- */
.demo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.demo-scene{position:sticky;top:calc(var(--haut) + 12px)}
.demo .vue{margin:-5% -4% -7% -8%}
.demo .caisse{right:12%;top:12%}
.sam{position:relative;z-index:2;display:flex;gap:12px;align-items:center;min-height:62px;width:fit-content;max-width:min(520px,100%);background:var(--cream);color:var(--ink);border:var(--trait);border-radius:14px 14px 14px 4px;padding:10px 16px}
.sam svg{width:42px;height:42px;flex:none;display:none}
.sam.is-sam svg{display:block}
.sam p{font-size:var(--t);line-height:1.35}
.sam b{font-family:var(--label);font-size:var(--t-petit);letter-spacing:.08em;text-transform:uppercase;color:var(--ember);display:block;line-height:1.2}
.demo-cote{display:flex;flex-direction:column;gap:20px}
.feuille,.panel{background:var(--cream);color:var(--ink);border-radius:12px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.feuille h3,.panel h3{font-size:var(--t-h3);line-height:1.2;font-weight:700}
.tasks{display:flex;flex-direction:column;gap:8px}
.add{display:flex;gap:8px}
.add input{flex:1;min-width:0;font:inherit;font-size:var(--t-petit);color:var(--ink);background:var(--paper);border:var(--trait);border-radius:8px;padding:10px 12px}
.add input::placeholder{color:var(--ink);opacity:.6}
.add button,.reset{background:var(--ink);color:var(--chalk);border:var(--trait);border-radius:8px;font-weight:600;font-size:var(--t-petit);padding:8px 14px}
.reset{background:transparent;color:var(--ink);align-self:flex-start}
.shop li{border-top:2px dotted var(--ember)}
.shop li:first-child{border-top:0}
.shop button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left;background:transparent;border:0;padding:12px 6px;border-radius:6px;transition:background .18s}
.shop strong{font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;line-height:1.25}
.shop small{grid-column:1;font-size:var(--t-petit);line-height:1.4;opacity:.8}
.shop em{grid-row:1/3;grid-column:2;font-style:normal;font-family:var(--label);font-weight:600;font-size:var(--t-petit);letter-spacing:.04em;border:var(--trait);border-radius:999px;padding:3px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.shop button:not(:disabled):hover{background:var(--paper)}
.shop button:not(:disabled) em{background:var(--ink);color:var(--chalk)}
.shop button:disabled{cursor:default}
.shop li:not(.bought) button:disabled{opacity:.68}
.shop li.bought em{border-color:var(--vert);color:#3B6E46}
.demo-fin{font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;line-height:1.3;color:var(--ember)}
.piece{position:fixed;z-index:120;left:0;top:0;pointer-events:none;background:var(--gold);color:var(--ink);font-family:var(--label);font-weight:600;font-size:18px;letter-spacing:.04em;border-radius:999px;padding:4px 14px;border:var(--trait)}

/* ---- 3. les locaux, à plat ---- */
.locaux{padding-top:var(--marge)}
.film-rail,.film-scene{display:none}
.film-fiches{display:flex;flex-direction:column;gap:20px}
.fiche{background:var(--cream);color:var(--ink);border-radius:12px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:6px}
.fiche-img{width:min(520px,100%);align-self:center;border-radius:8px;margin-bottom:12px}
.fiche-reste{font-family:var(--serif);font-style:italic;font-size:var(--t-rouge);line-height:1.2}
.fiche h3{font-size:clamp(34px,3.4vw,50px);font-weight:700;line-height:1;letter-spacing:-.02em}
.fiche-cap{font-family:var(--serif);font-size:var(--t-chapo);line-height:1.25;font-weight:600;color:var(--ember);margin-top:4px}
.cles-titre{font-size:var(--t-petit);font-weight:600;margin-top:12px;opacity:.75}
.cles{counter-reset:k}
.cles li{counter-increment:k;display:flex;gap:12px;align-items:center;padding:5px 0;border-top:2px dotted var(--ember);font-weight:600;font-size:var(--t-petit);line-height:1.3;break-inside:avoid}
.cles li:first-child{border-top:0}
.cles li::before{content:counter(k);flex:none;width:26px;height:26px;border-radius:999px;border:var(--trait);font-family:var(--label);font-size:13px;display:grid;place-items:center;transition:background .25s,border-color .25s}
.fiche-achat{display:none}
.anime .fiche-achat{display:inline-flex;margin-top:14px;font-size:15px;padding:14px 16px}
.fiche-note{font-family:var(--serif);font-style:italic;font-size:var(--t);line-height:1.35;border-top:var(--trait);padding-top:12px;margin-top:auto}

/* ---- 4. tes employés ---- */
.equipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.equipe-photo{position:sticky;top:calc(var(--haut) + 24px);display:flex;flex-direction:column;gap:14px}
.equipe-cadre{position:relative;border:var(--trait);border-radius:12px;overflow:hidden}
.equipe-cadre img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* la bulle d'une session, comme dans le jeu : son texte change tant que la photo est à l'écran */
.bulle-agent{position:absolute;left:50%;top:21.5%;transform:translate(-50%,-50%);white-space:nowrap;background:var(--cream);color:var(--ink);border:var(--trait);border-radius:999px;padding:7px 18px;font-weight:600;font-size:var(--t)}
.bulle-agent::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;margin-left:-6px;background:var(--cream);border-right:var(--trait);border-bottom:var(--trait);transform:rotate(45deg)}
.equipe-liste{gap:0}
.equipe-liste>div{padding:18px 0;border-top:2px dotted var(--ember);display:flex;flex-direction:column;gap:6px}
.equipe-liste>div:first-child{border-top:0;padding-top:0}
.equipe-liste>div:last-child{padding-bottom:0}
.equipe-liste dt{font-family:var(--serif);font-size:var(--t-h3);font-weight:700;line-height:1.2}
.equipe-liste dd{max-width:52ch}

/* ---- 5. les extraits ---- */
.player{display:flex;flex-direction:column;gap:16px}
.player-ecran{position:relative;border:var(--trait);border-radius:12px;overflow:hidden;background:var(--vermilion)}
.player-ecran video{width:100%;aspect-ratio:1280/644;display:block}
.play-toggle{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:999px;border:var(--trait);background:var(--cream);display:grid;place-items:center;padding:0}
.play-toggle svg{width:18px;height:18px;fill:var(--ink)}
.play-toggle .i-play{display:none}
.paused .play-toggle .i-play{display:block}.paused .play-toggle .i-pause{display:none}
.player-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.plein{right:64px}
.plein span{display:none}
.pret .player-ecran video::-webkit-media-controls{display:none}
.player-tabs button{position:relative;overflow:hidden;text-align:left;background:transparent;border:2px solid rgba(247,239,220,.6);border-radius:10px;padding:14px 16px;font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;line-height:1.3;transition:background .18s,color .18s,border-color .18s}
.player-tabs button:hover{border-color:var(--chalk)}
.player-tabs button[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.player-tabs button i{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left}

/* ---- 6. le pratique ---- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:e;padding:0;flex-direction:row;overflow:hidden}
.etapes li{counter-increment:e;position:relative;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;border-left:2px dotted var(--ember)}
.etapes li:first-child{border-left:0}
.etapes li::before{content:counter(e);font-family:var(--serif);font-weight:700;font-size:72px;line-height:.85;color:var(--ember)}
/* le trait qui relie les trois étapes se trace quand elles arrivent à l'écran */
.etapes li::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ink)}
.pret .etapes li::after{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--sortie)}
.pret .etapes.vu li::after{transform:none}
.pret .etapes.vu li:nth-child(2)::after{transition-delay:.35s}
.pret .etapes.vu li:nth-child(3)::after{transition-delay:.7s}
.pour-qui{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.pour-qui>div{display:flex;flex-direction:column;gap:14px}
.pour-qui>div+div{border-left:2px dotted var(--ember);padding-left:clamp(20px,2.4vw,32px);margin-left:clamp(20px,2.4vw,32px)}
.il-faut{margin-top:20px}
.il-faut .liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.il-faut .liste li:nth-child(-n+2){border-top:0;padding-top:0}
.inclus{border-top:2px dotted var(--ember);padding-top:18px;margin-top:6px;display:flex;flex-direction:column;gap:12px}
.liste li{padding:11px 0;border-top:2px dotted var(--ember);line-height:1.5}
.liste li:first-child{border-top:0;padding-top:0}
.liste-oui li,.liste-non li{position:relative;padding-left:34px}
.liste-oui li::before{content:"";position:absolute;left:3px;top:17px;width:14px;height:8px;border-left:3px solid var(--vert);border-bottom:3px solid var(--vert);transform:rotate(-45deg)}
.liste-oui li:first-child::before{top:6px}
.liste-non li::before,.liste-non li::after{content:"";position:absolute;left:10px;top:13px;width:3px;height:18px;background:var(--ember);transform:rotate(45deg)}
.liste-non li::after{transform:rotate(-45deg)}
.liste-non li:first-child::before,.liste-non li:first-child::after{top:2px}

/* ---- 7. le prix ---- */
.offre{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.offre-mot{position:sticky;top:calc(var(--haut) + 28px);display:flex;flex-direction:column;gap:16px;font-family:var(--serif);font-size:clamp(22px,2.1vw,27px);line-height:1.35;font-weight:600}
.offre-mot img{width:76px;height:76px;border-radius:999px;border:var(--trait)}
.offre-carte{border:var(--trait);gap:16px;padding:clamp(24px,3.4vw,44px)}
.prix{line-height:1.2}
.prix span{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(84px,11vw,148px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.prix b{font-weight:700}
.garantie{border-top:2px dotted var(--ember);padding-top:18px;margin-top:6px;display:flex;flex-direction:column;gap:10px}
.abonne{background:var(--paper);border:var(--trait);border-radius:8px;padding:14px 16px}

/* ---- 8. questions ---- */
.faq-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-in .tete{position:sticky;top:calc(var(--haut) + 24px);margin:0;display:block}
.faq{background:var(--cream);color:var(--ink);border-radius:12px;padding:8px clamp(20px,2.4vw,32px)}
.faq details{border-top:2px dotted var(--ember)}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--ember),var(--ember)) center/100% 3px no-repeat,linear-gradient(var(--ember),var(--ember)) center/3px 100% no-repeat;transition:transform .25s var(--sortie)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;max-width:62ch}

/* ---- 9. la fin : le texte au centre, le garage retapé derrière sa porte ---- */
.fin{margin-top:var(--marge);padding-top:clamp(40px,6vw,88px);overflow:hidden}
.fin-in{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.fin h2{font-size:clamp(38px,6.4vw,92px);line-height:.98;letter-spacing:-.025em;max-width:14ch}
.fin .chapo{max-width:46ch}
.fin-scene{position:relative;width:min(900px,100%);margin:clamp(24px,4vw,48px) auto 0;overflow:hidden;border:var(--trait);border-bottom:0;border-radius:12px 12px 0 0}
.fin-scene img{width:100%;margin-bottom:-3%}
.porte{display:none;position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--cream) 0 34px,var(--ink) 34px 36px);border-bottom:14px solid var(--ink)}
.porte i{position:absolute;left:50%;bottom:30px;width:96px;height:12px;margin-left:-48px;border-radius:6px;background:var(--ink)}
.anime .porte{display:block}
.pied{border-top:1px solid rgba(247,239,220,.45);padding:26px 0 40px;font-family:var(--serif);font-size:var(--t-rouge);font-weight:600}
.pied-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ══════════ La scène des locaux : épinglée, pilotée au défilement ══════════ */
.anime .film{height:100vh;height:100svh;overflow:hidden}
/* le rail en haut ; dessous, l'écran du jeu et sa fiche, de la même hauteur, centrés dans la place qui reste */
.anime .film-in{--film-l:min(1000px,calc((100svh - 230px)*1.3333),calc(100vw - 480px));width:min(1480px,100% - 80px);height:100%;display:grid;grid-template-columns:auto minmax(360px,1fr);grid-template-rows:auto auto auto;align-content:center;gap:12px clamp(16px,2.4vw,32px);padding:calc(var(--haut) + 14px) 0 20px}
.film-note{display:none}
.anime .film-note{display:block;grid-column:1/-1;font-family:var(--serif);font-size:var(--t);font-weight:600;line-height:1.35;opacity:.92}
.anime .note-locaux{display:none}
.anime .film-rail{display:grid;grid-template-columns:repeat(4,1fr);grid-column:1/-1;position:relative;padding-bottom:12px}
.film-rail button{background:transparent;border:0;padding:6px 0;min-height:44px;text-align:left;font-family:var(--serif);font-size:var(--t-rouge);font-weight:600;opacity:.8;transition:opacity .2s}
.film-rail button.on,.film-rail button:hover{opacity:1}
.film-rail button.ici{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.film-jauge{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(247,239,220,.3)}
.film-jauge i{display:block;height:100%;background:var(--chalk);transform:scaleX(0);transform-origin:left}
.anime .film-scene{display:block;min-width:0}
/* la toile est un écran : un cadre à l'encre, aussi grand que la hauteur le permet, dans lequel la porte descend */
.film-cadre{position:relative;width:var(--film-l);aspect-ratio:4/3;border:var(--trait);border-radius:12px;overflow:hidden;background:var(--vermilion)}
.film-cadre canvas{width:100%;height:100%}
.anime .porte-film{transform:translateY(-102%);will-change:transform}
/* les quatre fiches occupent la même case, à la hauteur exacte de l'écran : « Tu restes dans » ne bouge pas */
.anime .film-fiches{display:grid;height:calc(var(--film-l)*.75);min-height:0;container:fiches/size}
.anime .fiche{grid-area:1/1;height:100%;overflow:hidden;border:var(--trait);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.anime .fiche.on{opacity:1;visibility:visible;transition-delay:0s}
.anime .fiche-img{display:none}
.anime .fiche .cles li{opacity:.66;transition:opacity .25s}
.anime .fiche .cles li.sans-fin{opacity:1;font-style:italic}
.anime .fiche .cles li.sans-fin::before{content:"…"}
.anime .fiche .cles li.ok{opacity:1}
.anime .fiche .cles li.ok::before{content:"";border-color:var(--vert);background:var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F7EFDC' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* la fiche s'adapte à sa propre taille : large, les clés passent sur deux colonnes ; basse, la note s'efface */
@container fiches (min-width:430px){.fiche .cles{columns:2;column-gap:24px}.fiche .cles li{border-top:0}}
@container fiches (max-height:619px){.fiche .fiche-note{display:none}.fiche{padding:20px 22px}.fiche h3{font-size:38px}}
@container fiches (max-height:520px) and (max-width:429px){.fiche .cles li{padding:3px 0;font-size:14px}.fiche .cles-titre{display:none}.fiche h3{font-size:32px}}

/* ══════════ Écrans étroits ══════════ */
@media (max-width:900px){
  .hero{min-height:0;padding:calc(var(--haut) + 18px) 0 0}
  .hero-in,.demo,.player,.offre,.equipe,.faq-in,.tete{grid-template-columns:1fr}
  .tete{gap:14px}
  .hero-texte{gap:12px}
  .hero-nom{font-size:48px}
  .premiere{height:auto;min-height:0}
  .premiere-pied{min-height:48px;justify-content:center}
  .pour-qui{grid-template-columns:1fr}
  .pour-qui>div+div{border-left:0;padding-left:0;margin-left:0;border-top:var(--trait);padding-top:22px;margin-top:22px}
  .il-faut .liste{grid-template-columns:1fr}
  .il-faut .liste li:nth-child(2){border-top:2px dotted var(--ember);padding-top:11px}
  .offre-mot{position:static}
  .plein{width:auto;padding:0 14px;gap:8px;display:flex}
  .plein span{font-weight:600;font-size:var(--t-petit);color:var(--ink)}
  .hero .mention{display:none}
  .player-tabs{grid-template-columns:1fr}
  .player{margin-inline:-16px}
  .player-ecran{border-radius:0;border-inline:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-bottom:8px}
  .player-ecran video{flex:0 0 100%}
  .play-toggle,.plein{position:static;margin-right:8px}
  .player-tabs{padding-inline:16px}
  .demo-scene .vue{width:76%;margin:-2% auto -5%}
  .hero h1{font-size:24px;max-width:none}
  .hero-cta{margin-top:4px;align-items:stretch;width:100%}
  .hero-legende{margin:10px 0 0}
  .hero .vue{margin:-6% -7% -25%}
  .premiere{margin-inline:auto}
  .caisse{right:8%;top:10%;font-size:17px;padding:4px 14px}
  .demo-scene{position:sticky;top:var(--haut);z-index:5;background:var(--vermilion);padding-bottom:12px;border-bottom:1px solid rgba(247,239,220,.5)}
  .demo .caisse{right:6%;top:10%}
  .sam{min-height:50px;padding:8px 12px}
  .sam p{font-size:var(--t-petit)}
  .equipe-photo,.faq-in .tete{position:static}
  .etapes{grid-template-columns:1fr}
  .etapes li{border-left:0;border-top:2px dotted var(--ember)}
  .etapes li:first-child{border-top:0}
  .etapes li::after{display:none}
  .top-nav{display:none}
  .top-in .btn{margin-left:auto}
  .anime .film-in{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);align-items:start;gap:8px;padding:calc(var(--haut) + 4px) 0 12px}
  .anime .film-rail{grid-template-columns:repeat(4,auto);justify-content:space-between;padding-bottom:6px}
  .film-rail button{font-size:0;min-width:44px}
  .film-rail button::before{content:"";display:inline-block;width:12px;height:12px;border-radius:999px;border:2px solid var(--chalk);vertical-align:middle;margin-right:8px}
  .film-rail button.on::before{background:var(--chalk)}
  .film-rail button.ici{font-size:17px;white-space:nowrap}
  .anime .film-in{align-content:start;width:calc(100% - 32px)}
  .film-cadre{width:min(100%,58svh);margin-inline:auto}
  .anime .film-note{display:none}
  .anime .note-locaux{display:block}
  .hero .caisse{top:13%}
  .anime .film-fiches{container-type:normal;height:auto;align-self:start}
  .anime .fiche{height:auto;padding:12px 14px;gap:2px}
  .anime .fiche .cles{columns:2;column-gap:14px}
  .anime .fiche .cles li{border-top:0}
  .anime .fiche-reste{font-size:15px}
  .anime .fiche h3{font-size:27px}
  .anime .fiche-cap{font-size:16px;margin-top:0}
  .anime .fiche .cles-titre,.anime .fiche-note,.anime .fiche-achat{display:none}
  .anime .fiche .cles{margin-top:6px}
  .anime .fiche .cles li{font-size:13px;line-height:1.2;padding:3px 0;gap:6px;align-items:flex-start}
  .anime .fiche .cles li::before{width:17px;height:17px;font-size:10px;background-size:11px!important}
}
@media (max-width:900px) and (max-height:700px){
  .hero{padding-top:calc(var(--haut) + 10px)}
  .hero-nom{font-size:40px}
  .hero h1{font-size:21px}
  .hero-sous{display:none}
  .hero-legende{font-size:16px;margin-top:6px}
  .hero .vue{width:80%;margin:-5% auto -19%}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .btn{width:100%;font-size:16px;padding:16px 18px}
  .btn-small{width:auto;font-size:14px;padding:9px 14px}
  .premiere{width:100%}
  .mention{font-size:17px}
}

/* ══════════ Moins de mouvement : la page arrive posée, les retours d'action restent ══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .caisse,.premiere,.pret .tache-une:not(.faite) input{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}