/* Boulègue : une affiche collée sur un mur de Marseille en plein soleil.
   Feuille unique des 6 pages. Source : dossier-de-creation.md (chapitres 2 à 4, 8, 11 à 14).
   Tout bouge par paliers (steps) : 2 à 4 étapes visibles, jamais d'un coup. */

/* ================================================================ jetons */
:root{
  --canvas:#ECE8DC;
  --panel:#F7F4EC;
  --ink:#161614;
  --text-primary:#161614;
  --text-secondary:#4B4A44;
  --accent:#CBF227;
  --accent-hover:#B5E00F;
  --accent-muted:#E3F39A;
  --kraft:#D8D0BC;
  --papier-carre:#E7DBD2;
  --bandeau:36px;
  --b:3px;
  --marge:clamp(16px,4vw,56px);
  --gout:24px;
  --pil-h:60px;
  --pil-bas:20px;
  --alti:clamp(80px,14vh,140px);
  --e-sec:cubic-bezier(.2,.9,.1,1);
  --e-choc:cubic-bezier(.3,1.6,.4,1);
  --f-titre:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-texte:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Space Mono',ui-monospace,Consolas,monospace;
}
@media (min-width:1281px){:root{--b:4px}}
@media (max-width:760px){:root{--pil-h:56px;--pil-bas:calc(12px + env(safe-area-inset-bottom))}}
@media (orientation:portrait){:root{--alti:clamp(72px,10vh,96px)}}

/* ================================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-anchor:none;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bandeau) + 16px);scroll-padding-bottom:120px}
body{margin:0;overflow-x:hidden;overflow-x:clip;min-height:100vh;font:400 17px/1.5 var(--f-texte);color:var(--text-primary);background:transparent;-webkit-font-smoothing:antialiased}
@media (max-width:640px){body{font-size:16px}}
img,svg,video,canvas,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p,h1,h2,h3,dl,dd,ol,ul,figure,blockquote,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
sup{font-size:.62em;line-height:0}
::selection{background:var(--accent);color:var(--ink)}
main{display:block;padding-bottom:96px}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono)}
.mono-label{display:block;margin-bottom:10px;font:700 13px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{font-weight:900;text-wrap:balance}
p{text-wrap:pretty}

/* Focus : contour encre 3 px décalé de 3 px, puis anneau chartreuse de 6 px */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--panel),0 0 0 12px var(--accent)}
.pilule :focus-visible,.sec--encre :focus-visible,.sec-tourner :focus-visible,.pied :focus-visible,.panneau--menu :focus-visible{outline-color:var(--panel);box-shadow:0 0 0 3px var(--ink),0 0 0 12px var(--accent)}

.evitement{position:fixed;left:16px;top:calc(var(--bandeau) + 10px);z-index:1200;padding:14px 18px;background:var(--accent);color:var(--ink);border:var(--b) solid var(--ink);font:700 14px/1 var(--f-titre);text-transform:uppercase;text-decoration:none;transform:translateY(calc(-100% - var(--bandeau) - 24px));transition:transform 200ms steps(2)}
.evitement:focus{transform:none}

/* ================================================================ écran de chargement de l'accueil : « On monte la paire à 312 m. »
   Le rideau de fer d'une boutique de Marseille, une affiche collée dessus. Il couvre la page dès le premier affichage
   (classe html.chargement posée dans le <head>), compte les octets reçus de la vidéo, puis remonte par crans
   quand la première image de la vidéo est posée. Le bandeau Externam reste au-dessus. */
.charge{display:none}
html.chargement,html.chargement body{overflow:hidden;overscroll-behavior:none}
html.chargement .charge{display:block}
.charge{position:fixed;left:0;right:0;top:var(--bandeau);bottom:0;z-index:990;overflow:hidden;isolation:isolate;touch-action:none;overscroll-behavior:none;color:var(--ink);--p:0;--rc:clamp(96px,9.6vw,148px);--aff-w:min(1060px,calc(100% - 2 * var(--marge) - min(340px,26vw)));--aff-x:max(var(--marge),calc((100% - var(--aff-w) - 336px) / 2));
  background:repeating-linear-gradient(180deg,rgba(22,22,20,0) 0 31px,rgba(22,22,20,.085) 31px 33px,rgba(255,255,255,.4) 33px 35px),linear-gradient(180deg,#E4DFD1,var(--canvas) 40%,#E2DCCC);
  border-bottom:12px solid var(--ink);transition:transform 640ms steps(6) 160ms}
.charge::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.charge::after{content:"";position:absolute;left:50%;bottom:0;width:clamp(72px,9vw,120px);height:16px;margin-left:calc(clamp(72px,9vw,120px) / -2);background:var(--accent);border:var(--b) solid var(--ink);border-bottom:0}

/* l'affiche : logotype, compteur géant, la vague de la semelle qui se dessine avec les octets reçus */
.charge-affiche{position:absolute;z-index:1;left:var(--aff-x);top:clamp(20px,7.5vh,96px);width:var(--aff-w);container-type:inline-size;padding:clamp(18px,2.4vw,34px) clamp(18px,2.8vw,42px) clamp(16px,2vw,28px);background:var(--panel);border:var(--b) solid var(--ink);box-shadow:10px 10px 0 var(--ink);transform:rotate(-1deg);transform-origin:20% 0}
.charge-logo{display:inline-block;margin:0;padding:0 .08em;font:900 clamp(30px,4vw,64px)/1 var(--f-titre);letter-spacing:-.035em;text-transform:uppercase;background:linear-gradient(180deg,transparent 56%,var(--accent-muted) 56% 90%,transparent 90%)}
.charge-compteur{display:flex;align-items:flex-start;margin:.06em 0 0 -.04em;font:900 min(22vw,34vh)/.86 var(--f-titre);font-size:min(33cqi,34vh);letter-spacing:-.04em;white-space:nowrap;transform-origin:0 50%}
.cc-n{display:inline-flex}
.cc-c{display:inline-block;width:.76em;text-align:center}
.cc-pct{margin:.06em 0 0 .06em;font-size:.4em;line-height:1;letter-spacing:0}
.charge-vague{position:relative;height:clamp(22px,3vw,40px);margin:clamp(12px,1.8vw,22px) 64px clamp(12px,1.6vw,18px) 0}
.charge-vague svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.charge-vague path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.cv-piste path{stroke:var(--kraft);stroke-dasharray:2 9}
.cv-trait path{stroke:var(--ink)}
.cv-masque{position:absolute;inset:0;clip-path:inset(-14px calc(100% - var(--p) * 100%) -14px -14px);transition:clip-path 240ms steps(3)}
.charge-ligne{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 44px;margin:0;font:700 clamp(12px,1vw,14px)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}

/* l'autocollant de texte, l'autocollant rond qui tourne, le lien de secours */
.charge-bloc{position:absolute;z-index:3;left:calc(var(--aff-x) + var(--aff-w) - 64px);bottom:clamp(128px,20vh,200px);width:min(400px,30vw);min-width:300px;transform:rotate(1.5deg)}
.charge .charge-coll{padding:20px 24px 22px;box-shadow:8px 8px 0 var(--ink);animation:paliers 300ms steps(3) both}
.charge-titre{margin:0 0 .45em;font:900 clamp(24px,2.4vw,38px)/1.02 var(--f-titre);letter-spacing:-.025em;text-transform:uppercase;max-width:12ch;text-wrap:balance}
.charge-texte{margin:0;font:500 17px/1.45 var(--f-texte);max-width:32ch}
.charge-insec{white-space:nowrap}
.charge .rond--charge{position:absolute;z-index:2;top:12%;right:calc(var(--rc) * -.42);width:var(--rc);height:var(--rc);animation:claque-rond 300ms steps(3) both}
.charge .rond-tour{animation-duration:9s;animation-play-state:running}
@keyframes claque-rond{from{transform:scale(1.5) rotate(-25deg)}to{transform:rotate(8deg)}}
.charge-sans{display:inline-flex;align-items:center;min-height:44px;margin:20px 0 0 4px;padding:0 8px;border:0;border-radius:0;background:var(--canvas);color:var(--ink);cursor:pointer;font:500 16px/1.2 var(--f-texte);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;animation:paliers 300ms steps(3) both}
.charge-sans[hidden]{display:none}
.charge-sans:hover{background:var(--accent-muted)}

/* le bandeau défilant, en travers du bas du rideau */
.charge .charge-defile{position:absolute;z-index:2;left:-4vw;bottom:clamp(34px,6.4vh,70px);width:calc(100% + 8vw);margin:0}
.charge .defile-piste{animation-duration:26s;animation-play-state:running}

/* sortie : le compteur claque à 100, puis le rideau remonte en 6 crans (800 ms en tout) */
html.charge-sort .charge{transform:translate3d(0,calc(-100% - 16px),0);pointer-events:none}
html.charge-sort .charge-compteur{animation:claque-cc 240ms steps(3) both}
@keyframes claque-cc{from{transform:scale(1.12)}to{transform:none}}

/* téléphone : l'affiche et l'autocollant empilés au milieu du rideau, le bandeau en bas */
@media (orientation:portrait){
  html.chargement .charge{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(var(--rc) * .42)}
  .charge{--rc:clamp(84px,23vw,112px)}
  .charge-affiche{position:relative;left:auto;top:auto;flex:none;width:auto;margin:auto 12px 0;padding:20px 18px 16px}
  .charge .rond--charge{top:calc(var(--rc) * -.34);right:calc(var(--rc) * -.1)}
  .charge-logo{font-size:clamp(28px,9.4cqi,52px)}
  .charge-vague{margin-right:0}
  .charge-ligne{justify-content:space-between;gap:6px 18px}
  .charge-compteur{margin-top:.12em;font-size:min(29vw,22vh);font-size:min(32.5cqi,22vh)}
  .charge-bloc{position:relative;left:auto;right:auto;bottom:auto;flex:none;width:auto;min-width:0;max-width:460px;margin:-14px 16px auto 24px}
  .charge .charge-coll{padding:18px 18px 20px}
  .charge-titre{font-size:clamp(24px,7vw,34px)}
  .charge-texte{font-size:16px}
  .charge-sans{margin-top:14px}
  .charge .charge-defile{position:relative;left:auto;bottom:auto;flex:none;width:calc(100% + 8vw);margin:28px -4vw clamp(34px,6vh,60px);font-size:clamp(18px,5.4vw,28px)}
}
@media (orientation:portrait) and (min-width:600px){
  .charge-affiche,.charge-bloc{width:min(560px,calc(100% - 48px));margin-left:auto;margin-right:auto}
  .charge-bloc{width:min(500px,calc(100% - 64px))}
}

/* ================================================================ fond d'ambiance fixe : grain de journal, trame qui dérive, poussière de calcaire */
.ambiance{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb-grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.amb-trame{position:absolute;inset:-12px;opacity:.05;background-image:radial-gradient(circle,var(--ink) 1px,transparent 1.6px);background-size:12px 12px;animation:deriver 90s linear infinite}
@keyframes deriver{to{transform:translate(12px,12px)}}
.grain{position:absolute;left:var(--x);top:100%;width:var(--s);height:var(--s);border-radius:50%;background:#ABA187;opacity:.6;animation:monter var(--d) linear var(--del) infinite}
@keyframes monter{to{transform:translate3d(var(--dx),-112vh,0)}}

/* ================================================================ grille (12 colonnes, cassée exprès) */
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);max-width:1440px;margin:0 auto;padding:0 var(--marge)}
.sec{position:relative;padding:clamp(72px,9vw,150px) 0 clamp(64px,7vw,120px)}
@media (max-width:760px){.grille>*{grid-column:1/-1!important}}

/* ================================================================ grands titres : Unbounded 900, qui sortent par un bord */
.titre-bloc{position:relative;margin-bottom:clamp(28px,4vw,60px)}
.geant{font:900 calc(clamp(56px,13vw,220px) * var(--fit,1))/.86 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);overflow-wrap:normal;hyphens:manual;text-wrap:balance}
.titre-bloc--long .geant{font-size:calc(clamp(56px,9.4vw,168px) * var(--fit,1))}
.geant--gauche{margin-left:-.2em;padding-right:var(--marge)}
.geant--droite{text-align:right;margin-right:-.2em;padding-left:var(--marge)}
.titre-bloc--papier .geant{color:var(--panel)}
.geant .w{display:inline-block;white-space:nowrap}
.geant .w-haut{padding-top:.15em}
.geant .w-bas{padding-bottom:.2em}
.geant .c{position:relative;display:inline-block}
.geant .c[data-s]{color:transparent}
.geant .c[data-s]::after{content:attr(data-s);position:absolute;left:0;right:0;top:0;text-align:center;color:var(--ink)}
.titre-bloc--papier .geant .c[data-s]::after{color:var(--panel)}
html.js [data-brouille]{opacity:0}
html.js [data-brouille].vu{opacity:1}

/* la vague : le profil de la semelle, qui se dessine en 6 paliers sous chaque grand titre */
.vague{display:block;overflow:visible;width:300px;height:30px}
.vague path{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.titre-bloc .vague{margin-top:16px}
.titre-bloc--gauche .vague{margin-left:var(--marge)}
.titre-bloc--droite .vague{margin-left:auto;margin-right:var(--marge)}
.titre-bloc--papier .vague path{stroke:var(--accent)}
html.js .vague path{stroke-dashoffset:1}
html.js .vague.dessinee path{stroke-dashoffset:0;transition:stroke-dashoffset 360ms steps(6)}
.en-vue .vague.dessinee{animation:onduler 4.8s steps(1) infinite}
@keyframes onduler{50%{transform:translateY(1px)}}
@media (max-width:760px){.vague{width:200px;height:20px}.vague path{stroke-width:4.8}}

/* ================================================================ boutons : autocollants posés à cheval sur l'arête */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px;padding:0 16px 0 24px;border:0;background:none;color:var(--ink);font:700 16px/1.1 var(--f-titre);letter-spacing:.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform 160ms steps(2);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ink);transform:translate(6px,6px);transition:transform 160ms steps(2)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);border:var(--b) solid var(--ink)}
.btn-pastille{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--panel)}
.btn-pastille svg{width:14px;height:14px}
@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px)}
  .btn:hover::before{transform:translate(8px,8px)}
  .btn:hover::after{background:var(--accent-hover)}
  .btn--papier:hover::after{background:var(--canvas)}
}
.btn:active{transform:translate(6px,6px);transition-duration:80ms}
.btn:active::before{transform:none;transition-duration:80ms}
.btn--papier::after{background:var(--panel)}
.btn:disabled{cursor:not-allowed}
.btn:disabled::after,.btn:disabled:hover::after{background:var(--kraft)}
.btn:disabled::before,.btn:disabled:hover::before{transform:translate(3px,3px)}
.btn:disabled:hover,.btn:disabled:active{transform:none}
.btn:disabled .btn-pastille{background:var(--text-secondary)}
.a-cheval{position:absolute;left:24px;bottom:-30px;z-index:2}
.sec--encre .btn::before,.sec-tourner .btn::before{background:var(--panel)}

/* liens texte : soulignés d'encre, surligneur chartreuse pâle en 3 paliers */
.lien{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background:linear-gradient(var(--accent-muted),var(--accent-muted)) 0 100%/0% 100% no-repeat;transition:background-size 240ms steps(3)}
@media (hover:hover){.lien:hover{background-size:100% 100%}}
.lien--fort{font:700 17px/1.3 var(--f-titre);text-transform:uppercase}
.lien-bouton{display:inline-block;padding:8px 0;border:0;cursor:pointer;font:500 17px/1.3 var(--f-texte)}

/* ================================================================ autocollants */
.autocollant{position:relative;background:var(--panel);color:var(--ink);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:18px 22px 20px}
.etiquette{display:inline-block;margin:0 0 12px;padding:6px 10px 5px;border-radius:999px;background:var(--ink);color:var(--panel);font:700 12.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.claque{transform:rotate(var(--rot,0deg))}

.rond{display:block;width:120px;height:120px}
.rond svg{width:100%;height:100%;overflow:visible}
.rond-ombre{fill:var(--ink)}
.rond-fond{fill:var(--panel);stroke:var(--ink);stroke-width:3}
.rond-texte{font:700 11.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;fill:var(--ink)}
.rond-coeur{fill:var(--accent);stroke:var(--ink);stroke-width:3}
.rond-centre{font:900 19px var(--f-titre);letter-spacing:-.03em;fill:var(--ink)}
.rond-tour{transform-origin:60px 60px;animation:tourner 14s linear infinite;animation-play-state:paused}
.en-vue .rond-tour,.altimetre.retourne .rond-tour{animation-play-state:running}
@keyframes tourner{to{transform:rotate(360deg)}}

/* ================================================================ images : bord encre, ombre décalée, trame imprimée, coup de volet */
.affiche{position:relative;margin:0}
.affiche-cadre{position:relative;overflow:hidden;border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--kraft);transform:rotate(var(--rot,0deg));transition:transform 200ms steps(2)}
.affiche-cadre picture,.affiche-cadre img{width:100%}
.affiche-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--ink) .9px,transparent 1.35px);background-size:4px 4px;mix-blend-mode:multiply;opacity:.1}
html.js .affiche[data-entree="volet"] .affiche-cadre::before{content:"";position:absolute;inset:-4px;z-index:2;background:var(--ink)}
html.js .affiche[data-entree="volet"].in .affiche-cadre::before{transform:translateX(104%);transition:transform 350ms steps(5)}
@media (hover:hover){.affiche:hover .affiche-cadre{transform:none}}
.affiche-legende{margin-top:16px;font:700 12.5px/1.45 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* ================================================================ bandeaux défilants (signature) */
.defile{position:relative;z-index:3;width:calc(100% + 8vw);margin:0 -4vw;overflow:hidden;transform:rotate(var(--rot));border-block:var(--b) solid var(--ink);padding:15px 0 13px;font:900 clamp(20px,2.5vw,40px)/1 var(--f-titre);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.defile--encre{background:var(--ink);color:var(--panel)}
.defile--chartreuse{background:var(--accent);color:var(--ink)}
.defile-piste{display:flex;width:max-content;animation:defiler 32s linear infinite;animation-play-state:paused}
.defile.en-vue .defile-piste{animation-play-state:running}
.defile-seq{display:flex;align-items:center;flex:none}
.bd-item{padding:0 .55em}
.etoile{flex:none;width:.95em;height:.95em}
.defile--encre .etoile{fill:var(--accent)}
.defile--chartreuse .etoile{fill:var(--ink)}
.defile-fixe{display:none}
@keyframes defiler{to{transform:translateX(-50%)}}

/* ================================================================ la pilule : le menu, en bas au centre, partout */
.pilule{position:fixed;left:50%;bottom:var(--pil-bas);z-index:900;display:flex;align-items:center;gap:2px;height:var(--pil-h);padding:0 8px;border-radius:999px;isolation:isolate;color:var(--panel);transform:translateX(-50%);transition:transform 240ms steps(3)}
.pilule::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--accent);transform:translate(5px,5px)}
.pilule::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ink)}
.pilule.tassee{transform:translateX(-50%) scale(.92)}
.pilule.sur-encre::after{box-shadow:inset 0 0 0 3px var(--panel)}
.pilule-logo{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:6px;border-radius:50%;text-decoration:none}
.logo-pastille{width:40px;height:40px;overflow:visible}
.lp-rond{fill:var(--accent);stroke:var(--ink);stroke-width:2}
.lp-b{font:900 18px var(--f-titre);fill:var(--ink)}
.lp-vague{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
html.js .logo-pastille{transform:scale(1.5) rotate(-25deg);opacity:0}
html.js .logo-pastille .lp-vague{stroke-dashoffset:1}
html.js .pilule.prete .logo-pastille{transform:none;opacity:1;transition:transform 260ms var(--e-choc),opacity 120ms steps(2)}
html.js .pilule.prete .lp-vague{stroke-dashoffset:0;transition:stroke-dashoffset 360ms steps(6) 260ms}
.pilule-liens{display:flex;align-items:center}
.pilule-liens a,.pilule-bouton{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--panel);font:700 12.5px/1 var(--f-titre);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.pilule-liens a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 240ms steps(3)}
.pilule-liens a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){.pilule-liens a:hover::after{transform:scaleX(1)}}
.pilule-sep{flex:none;width:3px;height:26px;margin:0 6px;background:var(--panel);opacity:.4}
.pilule-menu{display:none}
.pp-sac{display:none;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.bulle{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--ink);font:700 13px/1 var(--f-mono);animation:palpiter 6s steps(1) infinite}
@keyframes palpiter{0%{transform:scale(1)}2%{transform:scale(1.22)}4%{transform:scale(1.1)}6%{transform:scale(1)}}
.bulle.claquee{animation:claque-bulle 260ms var(--e-choc)}
@keyframes claque-bulle{from{transform:scale(1.7) rotate(-20deg)}to{transform:none}}
.pilule-acheter{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;margin-left:6px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:var(--accent);color:var(--ink);font:700 12.5px/1 var(--f-titre);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform 160ms steps(2)}
.pilule-acheter .mono{font:700 14px/1 var(--f-mono)}
@media (hover:hover){.pilule-acheter:hover{background:var(--accent-hover)}}
.pilule-acheter:active{transform:scale(.94)}
@media (max-width:760px){
  .pilule{width:min(420px,calc(100% - 32px));justify-content:space-between;padding:0 6px}
  .pilule-liens,.pilule-sep{display:none}
  .pilule-menu{display:inline-flex;flex:1;justify-content:center}
  .p-fiche .pp-mot{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .p-fiche .pp-sac{display:block}
  .p-fiche .pilule-bouton{padding:0 8px;gap:5px}
  .p-fiche .pilule-menu{flex:1 1 auto;min-width:0;padding:0 6px}
  .p-fiche .pilule-acheter{padding:0 12px;margin-left:2px}
}
@media (max-width:374px){
  .p-fiche .pilule{padding:0 4px}
  .p-fiche .pilule-logo{width:40px;margin-right:0}
  .p-fiche .pilule-menu{padding:0 4px}
  .p-fiche .pilule-panier{padding:0 6px;gap:3px}
  .p-fiche .pilule-acheter span[aria-hidden]{display:none}
  .p-fiche .pilule-acheter{gap:4px;padding:0 9px;font-size:11.5px}
  .p-fiche .pilule-acheter .mono{font-size:12.5px}
}
@media (max-width:340px){.p-fiche .pp-sac{display:none}}

/* ================================================================ panneaux (menu téléphone, panier) : la pilule grandit vers le haut en 3 paliers */
.panneau{position:fixed;inset:auto;margin:0;padding:0;border:0;background:none;color:var(--ink);max-width:none;max-height:none;overflow:visible}
.panneau::backdrop{background:rgba(22,22,20,.32)}
.panneau-peau{position:absolute;inset:0;border:var(--b) solid var(--ink);border-radius:14px;background:var(--panel);box-shadow:8px 8px 0 var(--ink);transform-origin:50% 100%}
.panneau-contenu{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;padding:22px 22px 28px}
.panneau[open] .panneau-peau{animation:grandir 300ms steps(3,jump-start) both}
.panneau[open] .panneau-contenu{animation:paraitre 300ms steps(3,jump-start) 180ms both}
.panneau.ferme .panneau-peau{animation:retrecir 200ms steps(2,jump-start) both}
.panneau.ferme .panneau-contenu{animation:none;opacity:0}
@keyframes grandir{from{transform:scale(.32,.1)}to{transform:none}}
@keyframes retrecir{from{transform:none}to{transform:scale(.32,.1)}}
@keyframes paraitre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.panneau--panier{left:50%;bottom:var(--pil-bas);width:420px;max-width:calc(100vw - 32px);height:min(640px,calc(100vh - var(--bandeau) - 44px));transform:translateX(-50%)}
.panneau--panier .panneau-contenu{display:flex;flex-direction:column;gap:18px}
.panier-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panier-titre{font:900 28px/1 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase}
.panier-fermer{display:grid;place-items:center;flex:none;width:48px;height:48px;border:var(--b) solid var(--ink);border-radius:50%;background:var(--panel);cursor:pointer}
.panier-fermer svg{width:18px;height:18px}
@media (hover:hover){.panier-fermer:hover{background:var(--accent)}}
.panier-vide{display:grid;gap:12px;font:500 18px/1.45 var(--f-texte)}
.panier-vide[hidden]{display:none}
.panier-lignes{display:grid;gap:12px}
.panier-ligne{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px;border:var(--b) solid var(--ink);background:var(--canvas)}
.panier-ligne img,.panier-ligne .pl-dessin{width:64px;height:64px;object-fit:cover;border:2px solid var(--ink);background:var(--papier-carre)}
.pl-dessin svg{width:100%;height:100%}
.pl-nom{font:700 14px/1.2 var(--f-titre);text-transform:uppercase}
.pl-detail{font:400 13px/1.35 var(--f-mono);color:var(--text-secondary)}
.pl-droite{display:grid;justify-items:end;gap:4px}
.pl-prix{font:700 16px var(--f-mono)}
.pl-retirer{min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font:500 14px/1 var(--f-texte);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.panier-pied{display:grid;gap:22px;margin-top:auto;padding-top:6px}
.panier-pied[hidden]{display:none}
.panier-total{display:flex;justify-content:space-between;align-items:baseline;border-top:var(--b) solid var(--ink);padding-top:14px;font:700 16px var(--f-titre);text-transform:uppercase}
.panier-total .mono{font:700 24px var(--f-mono)}
.panier-commander{justify-self:start}
.panier-message{font:500 16px/1.45 var(--f-texte)}
.panier-message:empty{display:none}
.panier-message:not(:empty){padding:14px 16px;background:var(--accent-muted);border:var(--b) solid var(--ink);border-radius:14px}

.panneau--menu{left:50%;bottom:var(--pil-bas);width:min(420px,calc(100vw - 32px));height:90vh;height:90svh;max-height:calc(100svh - var(--bandeau) - 16px);transform:translateX(-50%)}
.panneau--menu .panneau-peau{background:var(--ink);border-color:var(--ink);border-radius:30px;box-shadow:5px 5px 0 var(--accent)}
.panneau--menu .panneau-contenu{display:flex;flex-direction:column;padding:30px 24px 26px;color:var(--panel)}
.menu-geant a{display:block;padding:6px 0;font:900 44px/1 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;color:var(--panel);text-decoration:none}
.menu-geant a[aria-current]{color:var(--accent)}
.menu-mono{margin-top:auto;padding-top:24px;font:700 13px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.menu-fermer{align-self:flex-start;margin-top:18px}
.panneau--menu .btn::before{background:var(--accent)}
.btn-pastille--croix svg{width:12px;height:12px}
@media (max-width:760px){
  .panneau--panier{left:0;right:0;top:var(--bandeau);bottom:0;width:auto;max-width:none;height:auto;transform:none}
  .panneau--panier .panneau-peau{border-radius:0;box-shadow:none;border-width:var(--b) 0 0}
  .panneau--panier .panneau-contenu{padding:20px 16px calc(28px + env(safe-area-inset-bottom))}
}
@media (max-height:520px){.menu-geant a{font-size:30px}}

/* la vignette qui sort de la pilule à l'ajout au panier */
.vignette{position:fixed;left:50%;bottom:calc(var(--pil-bas) + var(--pil-h) + 18px);z-index:950;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(380px,calc(100vw - 32px));padding:10px 16px 10px 10px;background:var(--panel);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);font:500 15px/1.35 var(--f-texte);pointer-events:none;opacity:0;transform:translate(-50%,40px) scale(.6)}
.vignette.visible{opacity:1;transform:translate(-50%,0) rotate(-1.5deg);transition:transform 260ms var(--e-choc),opacity 120ms steps(2)}
.vignette.sortie{opacity:0;transform:translate(-50%,20px) scale(.9);transition:transform 200ms steps(2),opacity 200ms steps(2)}
.vignette img{width:52px;height:52px;flex:none;border:2px solid var(--ink);object-fit:cover;background:var(--papier-carre)}
.vignette strong{display:block;font:700 13px/1.3 var(--f-titre);text-transform:uppercase}
.vignette:empty{display:none}

/* ================================================================ l'ouverture : la paire tombe du ciel */
.hero{position:relative}
.scene{display:none}
/* Hauteurs stables sur téléphone : la scène collante en 100lvh (repli 100vh), jamais en dvh, pour que la barre d'adresse
   qui se cache ou revient ne change ni la hauteur du trajet ni la progression de la vidéo. */
html.scrub .hero{height:1100vh;height:1100lvh}
html.scrub .scene{display:block;position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
/* écran tactile : la même hauteur 100lvh, mesurée par accueil.js et figée en pixels jusqu'au prochain changement de largeur */
html.scrub.h-fixe .hero{height:calc(var(--h-scene) * 11)}
html.scrub.h-fixe .scene{height:var(--h-scene)}
html.scrub .hero-fixe{display:none}
.scene-media{position:absolute;inset:0;background:#DEE4E8}
.poster{position:absolute;inset:0;background:#DEE4E8 center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms steps(3);will-change:transform;transform:translateZ(0)}
.scene.video-ready .hero-video{opacity:1}
.scene.video-failed .hero-video{display:none}
.phrases{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;pointer-events:none}
.phrase{position:absolute;opacity:0;isolation:isolate;--k:0}
.phrase .w,.phrase .c{display:inline-block}

/* les autocollants des phrases : papier opaque, encre à 16,5:1 sur chaque image */
.phrase--g,.phrase--d{top:50%;width:min(29vw,520px);transform:translateY(-46%)}
.phrase--g{left:max(4vw,24px)}
.phrase--d{right:max(4vw,24px)}
.phrase-coll{transform:rotate(var(--rot,0deg))}
.phrase-titre{margin:0 0 .4em;font:900 clamp(26px,3.4vw,56px)/1.1 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;max-width:11ch;text-wrap:balance}
.phrase-texte{margin:0;font:500 18px/1.45 var(--f-texte);max-width:30ch}

/* altimètre : 312 m à 0 m, puis il se retourne et devient l'autocollant rond de la phrase 6 */
.altimetre{position:absolute;top:calc(var(--bandeau) + 12px);right:max(4vw,16px);z-index:4;width:var(--alti);height:var(--alti);perspective:600px}
.alti-carte{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 300ms steps(3)}
.altimetre.retourne .alti-carte{transform:rotateY(180deg)}
.alti-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.alti-dos{transform:rotateY(180deg)}
.alti-dos .rond{width:100%;height:100%}
.alti-avant svg{width:100%;height:100%;overflow:visible}
.alti-ombre{fill:var(--ink)}
.alti-fond{fill:var(--panel)}
.alti-piste{fill:none;stroke:var(--kraft);stroke-width:3.5}
.alti-anneau{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-dashoffset:var(--ld,0);transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset 150ms steps(2)}
.alti-grad{stroke:var(--ink);stroke-width:2}
.alti-mot{position:absolute;left:0;right:0;top:31%;text-align:center;font:700 calc(var(--alti) * .082)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.alti-valeur{position:absolute;left:0;right:0;top:45%;text-align:center;font:700 calc(var(--alti) * .19)/1 var(--f-mono);letter-spacing:-.03em}

/* phrase 1 : le logotype nu sur le ciel, l'autocollant à gauche sur la traînée de nuage */
.phrase--ouverture{inset:0}
.p1-logo{position:absolute;left:max(4vw,24px);top:calc(var(--bandeau) + 3.5vh);isolation:isolate;transform:rotate(-2deg)}
.p1-logo::before{content:"";position:absolute;inset:-45% -12%;z-index:-1;background:radial-gradient(closest-side,rgba(247,244,236,.62),rgba(247,244,236,.36) 58%,rgba(247,244,236,0))}
.logotype{margin:0;font:900 min(11.6vw,19vh)/.9 var(--f-titre);letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.p1-bas{position:absolute;left:max(4vw,24px);top:37%;width:min(29vw,520px)}
.p1-texte{font:900 clamp(22px,2.3vw,38px)/1.02 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase;max-width:13ch}
.indice{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0 30px;padding:9px 14px;background:var(--accent);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);font:700 12.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;transform:rotate(2deg)}
.indice svg{width:14px;height:18px;animation:indice 1.4s steps(1) infinite}
@keyframes indice{50%{transform:translateY(5px)}}

/* phrase 6 et image fixe : « Traverse 01 » géant qui sort par le bord droit */
.compo{--ft-fs:7.4vw;--ft-x:56vw;--ft-top:24%;--bas-w:min(38vw,540px)}
.phrase--final{inset:0}
.final-titre{position:absolute;left:var(--ft-x);top:var(--ft-top);margin:0;font:900 var(--ft-fs)/.86 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap;isolation:isolate}
.final-titre::before{content:"";position:absolute;inset:-22% -30% -14% -16%;z-index:-1;background:radial-gradient(closest-side,rgba(247,244,236,.6),rgba(247,244,236,.34) 60%,rgba(247,244,236,0))}
.ft-traverse,.ft-01{display:block;width:max-content}
.ft-01{font-size:2em}
.final-bas{position:absolute;left:var(--ft-x);top:calc(var(--ft-top) + var(--ft-fs) * 2.36);width:var(--bas-w);pointer-events:auto}
.final-coll{transform:rotate(-2deg);padding-bottom:46px}
.final-coll .phrase-texte{max-width:38ch}
.final-cta{position:relative;z-index:2;width:max-content;margin:-30px 0 0 24px}
.txt-court{display:none}
.phrase--final .final-cta{pointer-events:auto}

/* l'image fixe (réduire les animations, économie de données, téléphone couché) */
.hero-fixe{position:relative;height:max(100vh,640px);height:max(100svh,640px);overflow:hidden;background:#DEE4E8}
.hf-image,.hf-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-compo{position:absolute;inset:0}
.hf-logo{position:absolute;z-index:2;left:max(4vw,16px);top:calc(var(--bandeau) + 6vh);padding:12px 20px 10px;font:900 clamp(28px,4.4vw,64px)/1 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;transform:rotate(var(--rot))}
.rond--fixe{position:absolute;top:calc(var(--bandeau) + 12px);right:max(4vw,16px);width:var(--alti);height:var(--alti)}
.rond--fixe .rond-tour{animation:none}

@media (orientation:portrait){
  .phrase--g,.phrase--d{left:16px;right:auto;width:min(calc(100% - 32px),520px);transform:none}
  .phrase--d{left:auto;right:16px}
  .phrase--haut{top:calc(var(--bandeau) + 24px + var(--alti))}
  .phrase--bas{top:auto;bottom:calc(var(--pil-h) + var(--pil-bas) + 22px)}
  .phrase-titre{font-size:clamp(24px,7.2vw,34px);max-width:14ch}
  .phrase-texte{font-size:16px}
  .p1-logo{left:16px;right:16px;top:calc(var(--bandeau) + 22px + var(--alti));text-align:left}
  .logotype{font-size:min(13.2vw,10vh)}
  .p1-bas{left:16px;top:auto;bottom:calc(var(--pil-h) + var(--pil-bas) + 22px);width:min(calc(100% - 32px),460px)}
  .p1-texte{font-size:clamp(22px,6.4vw,32px)}
  .indice{position:absolute;right:10px;top:-22px;margin:0}
  .compo{--ft-fs:16vw;--ft-x:8vw;--bas-w:auto}
  .ft-01{font-size:1.5em}
  .final-titre{top:calc(var(--bandeau) + 24px + var(--alti))}
  .final-bas{left:16px;right:16px;top:auto;bottom:calc(var(--pil-h) + var(--pil-bas) + 44px);width:auto;max-width:460px}
  .txt-long{display:none}
  .txt-court{display:inline}
  .hf-logo{left:16px;top:58%;font-size:clamp(26px,7vw,40px)}
}
@media (max-height:560px){.altimetre,.indice{display:none}}

/* --- entrées sur la vidéo, pilotées par --k (0 à 1), en paliers, réversibles --- */
/* 1. Tampon : les lettres tombent à plat (échelle 1,3 puis 1,12 puis 1) */
[data-fx="tampon"] .logotype .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);--q:calc(round(down,var(--kc) * 3,1) / 3);--r:calc(1 - var(--q));opacity:calc(var(--q) * 1000);transform:scale(calc(1 + .27 * var(--r) + .27 * var(--r) * var(--r)))}
[data-fx="tampon"] .p1-bas{--kb:clamp(0,(var(--k,0) - .45) * 2.4,1);--qb:calc(round(down,var(--kb) * 3,1) / 3);opacity:calc(var(--qb) * 1000);transform:translateY(calc((1 - var(--qb)) * 24px))}
/* 2. Chute en paliers : les mots descendent de 40 px en 3 marches */
[data-fx="chute"] .phrase-titre .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);--q:calc(round(down,var(--kc) * 3,1) / 3);opacity:calc(var(--q) * 1000);transform:translateY(calc((1 - var(--q)) * -40px))}
/* 3. Brouillage : deux signes empilés, puis la lettre (opacités seules) */
[data-fx="brouille"] .phrase-titre .c{position:relative;--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1)}
[data-fx="brouille"] .c-l{opacity:clamp(0,(var(--kc) - .6667) * 1000,1)}
[data-fx="brouille"] .c-s{position:absolute;left:0;right:0;top:0;text-align:center}
[data-fx="brouille"] .c-s1{opacity:calc(clamp(0,var(--kc) * 1000,1) - clamp(0,(var(--kc) - .3333) * 1000,1))}
[data-fx="brouille"] .c-s2{opacity:calc(clamp(0,(var(--kc) - .3333) * 1000,1) - clamp(0,(var(--kc) - .6667) * 1000,1))}
/* 4. Claque au vent : mots inclinés de ±8° qui se redressent en 3 paliers */
[data-fx="vent"] .phrase-titre .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);--q:calc(round(down,var(--kc) * 4,1) / 4);opacity:calc(var(--q) * 1000);transform:rotate(calc((1 - var(--q)) * 1.3333 * var(--r,8deg)));transform-origin:50% 80%}
/* 5. Rideau : une bande encre se retire vers la droite en 4 paliers */
[data-fx="rideau"] .phrase-titre .w{position:relative}
[data-fx="rideau"] .phrase-titre .w::after{content:"";position:absolute;left:-.06em;right:-.06em;top:.02em;bottom:-.02em;background:var(--ink);transform-origin:100% 50%;--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);--q:calc(round(down,var(--kc) * 4,1) / 4);transform:scaleX(calc(1 - var(--q)))}
/* texte des autocollants 2 à 5 : il arrive après le titre */
.phrase:not(.phrase--ouverture):not(.phrase--final) .phrase-texte{--ks:clamp(0,(var(--k,0) - .5) * 3,1);--qs:calc(round(down,var(--ks) * 3,1) / 3);opacity:calc(var(--qs) * 1000);transform:translateY(calc((1 - var(--qs)) * 14px))}
/* 6. Arrivée : « Traverse » entre par le bord droit en 4 paliers, « 01 » se pose en tampon, l'autocollant claque, puis le bouton */
[data-fx="arrivee"] .ft-traverse{--kt:clamp(0,var(--k,0) / .3,1);--qt:calc(round(down,var(--kt) * 4,1) / 4);transform:translateX(calc((1 - var(--qt)) * (100vw - var(--ft-x) + 2vw)))}
[data-fx="arrivee"] .ft-01{--ko:clamp(0,(var(--k,0) - .3) / .2,1);--qo:calc(round(down,var(--ko) * 3,1) / 3);--r:calc(1 - var(--qo));opacity:calc(var(--qo) * 1000);transform:scale(calc(1 + .27 * var(--r) + .27 * var(--r) * var(--r)));transform-origin:30% 60%}
[data-fx="arrivee"] .final-coll{--ks:clamp(0,(var(--k,0) - .5) / .17,1);--qs:calc(round(down,var(--ks) * 3,1) / 3);opacity:calc(var(--qs) * 1000);transform:rotate(calc(-2deg - (1 - var(--qs)) * 23deg)) scale(calc(1 + (1 - var(--qs)) * .5))}
[data-fx="arrivee"] .final-cta{--kb:clamp(0,(var(--k,0) - .68) / .17,1);--qb:calc(round(down,var(--kb) * 3,1) / 3);opacity:calc(var(--qb) * 1000);transform:translateY(calc((1 - var(--qb)) * 20px))}

/* ================================================================ accueil : Sortie n° 07 */
.intro{font:500 clamp(19px,1.7vw,24px)/1.45 var(--f-texte);max-width:36ch}
.sortie-intro{grid-column:7/13;margin-top:-48px;position:relative;z-index:1}
.cartes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px);align-items:start}
.carte--2{margin-top:64px}
.carte-corps{position:relative;display:block;padding:14px 14px 60px;background:var(--panel);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--rot,0deg))}
.affiche--carte .affiche-cadre,.affiche--gcarte .affiche-cadre{box-shadow:none;background:var(--papier-carre)}
.carte-nom{margin:18px 0 8px;font:700 clamp(17px,1.4vw,21px)/1.15 var(--f-titre);text-transform:uppercase}
.carte-prix{font:700 30px/1 var(--f-mono)}
.carte-stock{margin-top:8px;font:400 14px/1.3 var(--f-mono);letter-spacing:.03em;color:var(--text-secondary)}
.jauge{display:block;height:16px;margin-top:10px;border:var(--b) solid var(--ink);background:var(--panel);overflow:hidden}
.jauge-plein{display:block;height:100%;background:var(--accent);border-right:var(--b) solid var(--ink);transform-origin:left;transform:scaleX(var(--part,1))}
.rond--carte{position:absolute;top:-38px;right:-30px;z-index:3;width:110px;height:110px}
.sortie-suite{grid-column:1/-1;margin-top:100px}

/* ================================================================ accueil : Fais-la tourner (le moment interactif) */
.sec-tourner{background:var(--ink);color:var(--panel);overflow:hidden}
.tourner-grille{justify-items:center;row-gap:30px}
.tourner-consigne{grid-column:1/-1;font:500 clamp(18px,1.6vw,21px)/1.45 var(--f-texte);text-align:center;max-width:34ch}
.tourner-scene{grid-column:1/-1;position:relative;width:min(560px,calc(100vw - 32px));margin-top:6px}
.carre{position:relative;display:block;width:100%;aspect-ratio:1/1;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.carre.saisi{cursor:grabbing}
.carre-ombre{position:absolute;inset:0;background:var(--accent);transform:translate(calc(6px - var(--a,0) * .2px),8px)}
.carre-fond{position:absolute;inset:0;overflow:hidden;background:var(--papier-carre);border:var(--b) solid var(--ink)}
.carre-img,.carre-toile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:perspective(900px) rotateY(calc(var(--a,0) * 1deg)) scale(1.1);will-change:transform;pointer-events:none;-webkit-user-drag:none}
.carre-toile{transform:none}
.carre-flash{position:absolute;inset:0;background:var(--panel);opacity:0;pointer-events:none}
.carre.flash .carre-flash{animation:flash 120ms steps(2,jump-start) both}
@keyframes flash{from{opacity:1}to{opacity:0}}
.carre-gain{position:absolute;right:-20px;top:-26px;z-index:3;max-width:13ch;padding:12px 16px;font:900 clamp(15px,1.5vw,19px)/1.05 var(--f-titre);text-transform:uppercase;opacity:0;transform:scale(1.5) rotate(-25deg);pointer-events:none}
.carre.gagne .carre-gain{opacity:1;transform:rotate(6deg);transition:transform 260ms var(--e-choc),opacity 120ms steps(2)}
.tourner-releve{position:absolute;left:-14px;bottom:26px;z-index:3;padding:8px 12px;background:var(--panel);color:var(--ink);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--accent);font:700 18px/1 var(--f-mono);transform:rotate(-3deg)}
.tourner-commandes{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 30px;margin-top:14px}
.tourner-couleurs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pastille-radio{position:relative;display:inline-flex}
.pastille-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pastille-radio span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:var(--b) solid currentColor;border-radius:999px;font:700 13px/1 var(--f-titre);letter-spacing:.02em;text-transform:uppercase;transition:transform 160ms steps(2)}
.pastille-radio input:checked+span{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.pastille-radio input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--panel),0 0 0 12px var(--accent)}
.sec-tourner .pastille-radio input:focus-visible+span{outline-color:var(--panel);box-shadow:0 0 0 3px var(--ink),0 0 0 12px var(--accent)}
@media (hover:hover){.pastille-radio:hover span{transform:translateY(-2px)}}
.tourner-boutons{display:flex;flex-wrap:wrap;gap:12px}
.tb{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:var(--b) solid var(--ink);border-radius:0;background:var(--panel);color:var(--ink);font:700 12.5px/1 var(--f-titre);text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--accent);transition:transform 160ms steps(2)}
.tb svg{width:18px;height:18px}
@media (hover:hover){.tb:hover{transform:translate(-2px,-2px)}}
.tb:active{transform:translate(4px,4px)}
.tourner-suite{grid-column:1/-1;min-height:66px}
html.js .tourner-suite{opacity:0;visibility:hidden;transform:translateY(24px)}
html.js .tourner-suite.visible{opacity:1;visibility:visible;transform:none;transition:opacity 300ms steps(3) 260ms,transform 300ms steps(3) 260ms,visibility 0s 260ms}

/* ================================================================ accueil : la règle du jeu */
.regles{max-width:1440px;margin:0 auto;padding:0 var(--marge)}
.regle{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(18px,3vw,56px);align-items:center;padding:clamp(18px,2.2vw,34px) 0;border-top:var(--b) solid var(--ink)}
.regle:last-child{border-bottom:var(--b) solid var(--ink)}
.regle:nth-child(even){margin-left:clamp(0px,16vw,300px)}
.regle-n{font:900 clamp(72px,12vw,190px)/.8 var(--f-titre);letter-spacing:-.06em}
.regle-titre{margin-bottom:10px;font:900 clamp(22px,2.4vw,38px)/1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
.regle-texte p{max-width:46ch;font-size:clamp(17px,1.3vw,19px)}
.regle:nth-child(odd) .regle-n{-webkit-text-stroke:0}

/* ================================================================ accueil : pensée pour les escaliers */
.escaliers{align-items:start}
.affiche--semelle{grid-column:1/8;z-index:1}
.escaliers-cote{grid-column:8/13;position:relative;z-index:2;padding-top:clamp(16px,4vw,64px)}
.escaliers-texte{font:500 clamp(18px,1.5vw,21px)/1.5 var(--f-texte);max-width:34ch}
.fiche-tech{margin:40px 0 0 -120px;padding:24px 26px;font-family:var(--f-mono)}
.fiche-tech div{display:grid;grid-template-columns:12ch minmax(0,1fr);gap:10px;padding:7px 0}
.fiche-tech dt{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.fiche-tech dt::after{content:" ·"}
.fiche-tech dd{font-size:15px;line-height:1.45}

/* ================================================================ accueil : lookbook en collage */
.collage{align-items:start}
.collage-1{grid-column:1/5;grid-row:1;z-index:1;margin-top:24px}
.collage-2{grid-column:4/10;grid-row:1;z-index:2;margin:190px 0 0 24px}
.collage-3{grid-column:9/13;grid-row:1;z-index:3;margin:-20px 0 0 -24px}
.collage-texte{grid-column:1/6;grid-row:2;margin-top:56px;display:grid;gap:14px;justify-items:start}.collage-texte p{font:900 clamp(24px,2.8vw,44px)/1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase;max-width:14ch}

/* ================================================================ accueil : ce qu'on nous écrit */
.avis{max-width:1440px;margin:0 auto;padding:0 var(--marge);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);row-gap:36px}
.avis-item--1{grid-column:1/6}
.avis-item--2{grid-column:7/12;margin-top:110px}
.avis-item--3{grid-column:3/8;margin-top:-10px}
.avis-coll{margin:0;padding:24px 26px 22px}
.avis-coll blockquote p{font:500 clamp(19px,1.6vw,24px)/1.4 var(--f-texte)}
.avis-coll figcaption{margin-top:14px;font:700 13px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.avis-item--2 .avis-coll{background:var(--accent)}
@media (max-width:760px){.avis{grid-template-columns:minmax(0,1fr);row-gap:30px}.avis-item{grid-column:1/-1!important;margin-top:0!important}.avis-item--2{margin-left:20px!important}.avis-item--3{margin-right:14px}}

/* ================================================================ accueil : ne rate pas la n° 08 */
.alerte{grid-column:1/9;perspective:1400px;margin-top:-40px}
.alerte-carte{position:relative;transform-style:preserve-3d;transition:transform 300ms steps(3)}
.alerte-carte.retourne{transform:rotateY(180deg)}
.alerte-face,.alerte-dos{position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.alerte-face{background:var(--kraft);padding:clamp(24px,3vw,44px) clamp(20px,3vw,44px) 72px}
.alerte-dos{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(24px,3vw,44px);background:var(--accent);transform:rotateY(180deg)}
.alerte-texte{font:500 clamp(18px,1.6vw,22px)/1.45 var(--f-texte);max-width:40ch}
.alerte-ok{font:900 clamp(20px,2.2vw,32px)/1.15 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase;max-width:22ch}
.alerte-ok:focus{outline:none}
.formulaire{display:grid;gap:14px}
.form-alerte{margin-top:24px}
.champ{display:grid;gap:8px}
.champ-label{font:700 13px/1.25 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.champ input,.champ textarea{width:100%;min-height:58px;padding:14px 16px;border:var(--b) solid var(--ink);border-radius:0;background:var(--panel);color:var(--ink);font:500 18px/1.35 var(--f-texte)}
.champ textarea{min-height:130px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:#67655B;opacity:1}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{background:var(--accent-muted)}
.form-erreur{justify-self:start;padding:8px 12px;border-radius:14px;background:var(--ink);color:var(--panel);font:700 14px/1.4 var(--f-mono)}
.form-erreur[hidden]{display:none}

/* ================================================================ pages : tête */
.sec-tete{padding-top:calc(var(--bandeau) + clamp(56px,8vw,120px))}
.tete-grille{row-gap:18px;align-items:end}
.tete-grille .intro{grid-column:1/8}
.tete-mono{grid-column:9/13;justify-self:end;padding:8px 12px;border:var(--b) solid var(--ink);border-radius:999px;font:700 13px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.sous-titre{grid-column:1/-1;font:700 clamp(18px,1.6vw,22px)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.tampon-enligne{position:absolute;left:max(4vw,16px);top:calc(var(--bandeau) + clamp(28px,4vw,60px));z-index:2;padding:10px 18px;background:var(--accent);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);font:900 clamp(18px,2vw,28px)/1 var(--f-titre);text-transform:uppercase}

/* ================================================================ la sortie : filtres et grandes cartes */
.filtres{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-bottom:56px}
.filtres-pilules{display:flex;flex-wrap:wrap;gap:10px}
.filtre{min-height:44px;padding:0 20px;border:var(--b) solid var(--ink);border-radius:999px;background:var(--panel);font:700 13px/1 var(--f-titre);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:transform 160ms steps(2)}
.filtre[aria-pressed="true"]{background:var(--accent)}
@media (hover:hover){.filtre:hover{transform:translateY(-2px)}}
.filtre-select{display:flex;align-items:center;gap:12px}
.filtre-select-mot{font:700 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.filtre-select select{min-height:48px;padding:0 46px 0 18px;border:var(--b) solid var(--ink);border-radius:999px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23161614' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat right 16px center/14px;-webkit-appearance:none;appearance:none;font:700 15px/1 var(--f-mono);color:var(--ink);cursor:pointer}
.gcartes{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px clamp(24px,3vw,56px);align-items:start}
.gcarte--2{margin-top:64px}
.gcarte--3{grid-column:1/-1}
.gcarte.masquee{display:none}
.gcartes.une .gcarte{margin-top:0;grid-column:1/-1}
.gcarte-corps{position:relative;padding:18px 18px 64px;background:var(--panel);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--rot,0deg))}
.gcarte--3 .gcarte-corps,.gcartes.une .gcarte-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.gcarte-info{padding-top:18px}
.gcarte-nom{font:900 clamp(24px,2.6vw,40px)/.95 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
.gcarte-desc{margin-top:8px;font:400 14px/1.3 var(--f-mono);color:var(--text-secondary)}
.gcarte-prix{margin-top:16px;font:700 34px/1 var(--f-mono)}
.gcarte-stock{margin-top:6px;font:400 14px/1.3 var(--f-mono);color:var(--text-secondary)}
.taille-liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.taille-liste li{position:relative;display:grid;place-items:center;min-width:42px;height:42px;padding:0 4px;border:var(--b) solid var(--ink);background:var(--panel);font:700 14px/1 var(--f-mono)}
.taille-liste li.epuisee{background:var(--canvas);color:var(--text-secondary)}
.taille-liste li.epuisee::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:3px;margin-top:-1.5px;background:var(--ink);transform:rotate(-38deg)}
.taille-liste li.choisie{background:var(--accent);color:var(--ink)}
.taille-liste li.choisie.epuisee{background:var(--kraft)}
.gcarte-alerte{display:inline-block;margin-top:14px;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--panel);font:700 13px/1.2 var(--f-mono);letter-spacing:.04em}
.gcarte-alerte[hidden]{display:none}
.gcartes-vide{grid-column:1/-1;font:700 16px/1.4 var(--f-mono)}
.gcartes-vide[hidden]{display:none}

/* avec la paire : lignes sans photo, dessins au trait */
.accessoires{row-gap:0}
.accessoire{grid-column:1/-1;display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:clamp(14px,2.4vw,36px);align-items:center;padding:22px 0;border-top:var(--b) solid var(--ink)}
.accessoire:last-child{border-bottom:var(--b) solid var(--ink)}
.accessoire--2{margin-left:clamp(0px,8vw,140px)}
.dessin{width:120px;height:80px}
.dessin--etape{height:100px}
.d-trait{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.d-touche{fill:var(--accent);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.acc-nom{font:700 clamp(18px,1.8vw,26px)/1.15 var(--f-titre);text-transform:uppercase}
.acc-detail{font:400 15px/1.3 var(--f-mono);text-transform:none;letter-spacing:.02em;color:var(--text-secondary)}
.acc-sep{font-family:var(--f-mono)}
.acc-prix{font:700 26px/1 var(--f-mono)}

/* comment se passe une sortie : frise */
.frise{row-gap:28px;align-items:start}
.case{grid-column:span 3;position:relative;padding:20px 20px 24px;background:var(--panel);border:var(--b) solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.case--2{margin-top:44px}
.case--3{margin-top:12px;background:var(--kraft)}
.case--4{margin-top:56px;background:var(--accent)}
.case-n{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--panel);font:700 12px/1.2 var(--f-mono);letter-spacing:.08em}
.case-quand{margin:12px 0;font:900 clamp(22px,2vw,30px)/1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
@media (min-width:1101px){.case:not(:last-child)::after{content:"";position:absolute;right:-30px;top:40px;width:34px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M1 11h28M21 3l9 8-9 8' fill='none' stroke='%23161614' stroke-width='3.4'/%3E%3C/svg%3E") no-repeat center/contain;z-index:2}}
@media (max-width:1100px){.case{grid-column:span 6}}

/* les sorties d'avant */
.archives{row-gap:44px}
.archive{grid-column:span 4;position:relative;padding-top:22px;border-top:var(--b) solid var(--ink)}
.archive--2,.archive--5{margin-top:40px}
.archive-n{font:700 14px/1 var(--f-mono);letter-spacing:.08em}
.archive-nom{margin:10px 0 8px;font:900 clamp(30px,3.5vw,58px)/.9 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase}
.archive-info{font:400 15px/1.3 var(--f-mono);color:var(--text-secondary)}
.tampon-epuisee{position:absolute;right:6px;top:-19px;padding:6px 10px 5px;border:var(--b) solid var(--ink);background:var(--canvas);font:900 14px/1 var(--f-titre);text-transform:uppercase;transform:rotate(-9deg)}
.en-vue .tampon-epuisee{animation:fremir 5.2s steps(1) infinite}
.archive--2 .tampon-epuisee{animation-delay:-1.7s}
.archive--4 .tampon-epuisee{animation-delay:-3.1s}
@keyframes fremir{0%{transform:rotate(-9deg)}48%{transform:rotate(-8deg)}52%{transform:rotate(-9deg)}}
.archives-regle{max-width:1440px;margin:72px auto 0;padding:0 var(--marge);font:900 clamp(22px,2.8vw,44px)/1.05 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
@media (max-width:1100px){.archive{grid-column:span 6}.archive--2,.archive--5{margin-top:0}.archive:nth-child(even){margin-top:40px}}

/* ================================================================ fiche produit */
.sec-fiche{padding-top:calc(var(--bandeau) + 28px)}
.ariane{max-width:1440px;margin:0 auto 32px;padding:0 var(--marge);font:700 13px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ariane a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.fiche-grille{align-items:start}
.galerie{grid-column:1/8;display:grid;gap:52px;padding-bottom:12px}
.galerie:focus-visible{outline-offset:8px}
.affiche--galerie .affiche-cadre{background:var(--papier-carre)}
.achat{grid-column:9/13;position:sticky;top:calc(var(--bandeau) + 20px);display:grid;gap:4px;padding-bottom:8px}
.achat-titre{font:900 clamp(40px,4vw,66px)/.88 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase}
.achat-couleur{margin-top:10px;font:700 18px/1.2 var(--f-titre);text-transform:uppercase}
.achat-prix{margin-top:14px;font:700 40px/1 var(--f-mono)}
.achat-num{font:400 14px/1.4 var(--f-mono);color:var(--text-secondary)}
.achat-couleurs,.pointures{margin-top:16px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.achat .pastille-radio span{background:var(--panel);border-color:var(--ink)}
.achat .pastille-radio input:checked+span{background:var(--accent)}
.pointures-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pointure{position:relative;display:block}
.pointure input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pointure span:first-of-type{display:grid;place-items:center;min-height:52px;border:var(--b) solid var(--ink);background:var(--panel);font:700 16px/1 var(--f-mono);transition:transform 160ms steps(2)}
.pointure input:checked+span{background:var(--accent)}
.pointure input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--panel),0 0 0 12px var(--accent)}
@media (hover:hover){.pointure input:not(:disabled):hover+span{transform:translateY(-2px)}}
.pointure input:disabled{cursor:not-allowed}
.pointure input:disabled+span{background:var(--canvas);color:var(--text-secondary)}
.pointure--epuisee::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;margin-top:-1.5px;background:var(--ink);transform:rotate(-38deg);pointer-events:none}
.pointure-reste{min-height:1.5em;margin-top:10px;font:700 14px/1.4 var(--f-mono)}
.pointure-reste:not(:empty){justify-self:start;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--panel)}
.achat-conseil{margin-top:8px;font:500 16px/1.45 var(--f-texte);max-width:36ch}
.achat .lien-bouton{justify-self:start;background-color:transparent}
.achat-bouton{margin:16px 0 20px}
.btn--achat{width:100%}
.achat-mono{display:grid;gap:6px;font:400 14px/1.35 var(--f-mono)}
.achat-mono li{display:flex;gap:10px;align-items:baseline}
.achat-mono li::before{content:"";flex:none;width:9px;height:9px;background:var(--accent);border:2px solid var(--ink);transform:translateY(-1px) rotate(45deg)}
/* écran d'ordinateur peu haut (1440 × 900) : la colonne se resserre pour tenir entière entre le bandeau et la pilule */
@media (min-width:761px) and (max-height:940px){
  .achat-titre{font-size:clamp(36px,3.4vw,52px)}
  .achat-couleur{margin-top:6px}
  .achat-prix{margin-top:10px;font-size:36px}
  .achat-couleurs,.pointures{margin-top:12px}
  .pointure span:first-of-type{min-height:46px}
  .pointure-reste{margin-top:6px}
  .achat-bouton{margin:12px 0 14px}
}
.rond--fiche{position:absolute;top:calc(var(--bandeau) + 60px);left:calc(50% + min(22vw,300px) - 60px);z-index:3;width:112px;height:112px}
.sec-fiche .rond--fiche{left:auto;right:calc(42% + 8px)}
@media (min-width:761px){.p-fiche main{padding-bottom:96px}}

.detail{align-items:start}
.detail-img{grid-column:4/10;grid-row:1/5;z-index:1}
.detail-bloc{position:relative;z-index:2;grid-column:1/5;margin-right:24px}
.detail-bloc h3{margin-bottom:10px;font:900 clamp(20px,1.8vw,28px)/1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
.detail-bloc--1{grid-row:1;margin-top:40px}
.detail-bloc--2{grid-column:9/13;grid-row:2;margin:0 0 0 24px}
.detail-bloc--3{grid-row:3}
.detail-bloc--4{grid-column:9/13;grid-row:4;margin:0 0 0 24px}
.detail-bloc--2 .autocollant{background:var(--accent)}
.detail-bloc--3 .autocollant{background:var(--kraft)}

.accordeons{grid-column:2/12;display:grid;gap:14px}
.accordeon{background:var(--panel);border:var(--b) solid var(--ink)}
.accordeon summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 18px 12px 22px;cursor:pointer;list-style:none;font:700 clamp(16px,1.5vw,21px)/1.2 var(--f-titre);text-transform:uppercase}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon[open] summary{background:var(--accent-muted)}
.acc-signe{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink)}
.acc-signe::before,.acc-signe::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;margin-top:-1.5px;background:var(--panel)}
.acc-signe::after{transform:rotate(90deg);transition:transform 200ms steps(2)}
.accordeon[open] .acc-signe::after{transform:rotate(0deg)}
.accordeon-corps{padding:4px 22px 22px}
.accordeon-corps p{max-width:66ch}
.accordeon[open] .accordeon-corps{animation:paliers 300ms steps(3,jump-start) both}
@keyframes paliers{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.autres{row-gap:48px}
.autre{grid-column:1/6}
.autre:nth-child(2){grid-column:7/12;margin-top:72px}
.autre-lien{display:block;text-decoration:none;color:inherit}
.autre-nom{display:block;margin-top:20px;font:700 clamp(18px,1.8vw,24px)/1.2 var(--f-titre);text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.autre-prix{display:block;margin-top:6px;font:700 20px var(--f-mono)}
.affiche--autre .affiche-cadre{background:var(--papier-carre)}

.guide{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - var(--bandeau) - 32px);margin:auto;padding:0;border:0;background:none;overflow:visible;color:var(--ink)}
.guide::backdrop{background:rgba(22,22,20,.36)}
.guide[open] .guide-corps{animation:paliers 300ms steps(3,jump-start) both}
.guide-corps{display:grid;gap:16px;max-height:calc(100svh - var(--bandeau) - 48px);overflow:auto;padding:22px}
.guide-tete{display:flex;justify-content:space-between;align-items:center;gap:12px}
.guide-titre{font:900 26px/1 var(--f-titre);text-transform:uppercase}
.guide-note{font:400 14px/1.45 var(--f-mono);color:var(--text-secondary)}

.tableau-pointures{width:100%;border-collapse:collapse;border:var(--b) solid var(--ink);background:var(--panel);font-family:var(--f-mono)}
.tableau-pointures th,.tableau-pointures td{padding:9px 16px;text-align:left;font-size:15px;line-height:1.3}
.tableau-pointures thead th{background:var(--ink);color:var(--panel);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tableau-pointures tbody tr:nth-child(even){background:var(--kraft)}
.tableau-pointures tbody th{font-weight:700;font-size:17px}

/* ================================================================ lookbook : le mur */
.mur{align-items:start;row-gap:clamp(48px,6vw,96px)}
.mur-1{grid-column:1/6;max-width:420px}
.mur-2{grid-column:8/12;max-width:360px;margin-top:120px}
.mur-3{grid-column:2/9;max-width:640px;margin-top:-40px;z-index:2}
.mur-4{grid-column:9/13;max-width:400px;margin-top:-40px}
.mur-5{grid-column:3/13;max-width:800px;justify-self:end;margin-top:16px}
.fin-cta{grid-column:1/-1;margin-top:8px}

/* ================================================================ la marque */
.histoire{grid-column:3/9;max-width:40em}
.histoire p{font:500 clamp(19px,1.6vw,23px)/1.62 var(--f-texte)}
.histoire p::first-letter{float:left;margin:.08em .1em 0 -.02em;font:900 5.3em/.76 var(--f-titre);color:var(--ink)}
.chiffres{row-gap:44px}
.chiffre{grid-column:span 3;padding-top:18px;border-top:var(--b) solid var(--ink)}
.chiffre--2,.chiffre--4{margin-top:56px}
.chiffre-n{display:block;font:700 clamp(60px,7.6vw,128px)/.9 var(--f-mono);letter-spacing:-.07em;white-space:nowrap}
.chiffre-mot{display:block;margin-top:12px;font:700 14px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1100px){.chiffre{grid-column:span 6}.chiffre--2,.chiffre--4{margin-top:40px}}
.atelier{position:relative}
.affiche--atelier{grid-column:1/-1;width:100%;max-width:1100px;margin:0 auto}
.tampon-lieu{position:absolute;right:max(3vw,24px);top:-30px;z-index:3;padding:10px 18px;background:var(--accent);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);font:900 clamp(16px,1.8vw,26px)/1 var(--f-titre);text-transform:uppercase}
.atelier-texte{grid-column:5/12;position:relative;z-index:2;margin-top:-56px;padding:24px 28px;background:var(--panel);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);font:500 clamp(18px,1.5vw,21px)/1.5 var(--f-texte)}
.jeudi{grid-column:3/10}
.jeudi-coll{padding:clamp(26px,3vw,48px)}
.jeudi-titre{margin-bottom:16px;font:900 clamp(34px,4.4vw,70px)/.9 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase}
.jeudi-coll p{font:500 clamp(18px,1.6vw,22px)/1.45 var(--f-texte);max-width:38ch}
.sec--encre{background:var(--ink);color:var(--panel)}
main>.sec--encre:last-child{margin-bottom:-96px;padding-bottom:calc(clamp(64px,7vw,120px) + 96px)}
.portee-coll{grid-column:2/9;position:relative;margin-bottom:36px;padding:clamp(26px,3vw,46px) clamp(24px,3vw,46px) 76px;background:var(--accent);color:var(--ink);border:var(--b) solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--panel)}
.portee-coll p{font:500 clamp(19px,1.7vw,24px)/1.45 var(--f-texte);max-width:40ch}

/* ================================================================ aide */
.pointure-grille{align-items:start;row-gap:48px}
.pointure-tableau{grid-column:1/6}
.etapes{grid-column:7/13;display:grid;gap:30px}
.etape{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center}
.etape--2{margin-left:clamp(0px,4vw,56px)}
.etape p{font:500 18px/1.45 var(--f-texte)}
.etape-n{display:inline-block;margin-right:10px;padding:3px 8px;border-radius:999px;background:var(--ink);color:var(--panel);font-size:12px;vertical-align:2px}
.blocs{row-gap:56px;align-items:start}
.bloc{grid-column:span 4}
.bloc--retours{margin-top:72px}
.bloc--paiement{margin-top:28px}
.bloc-corps{height:100%;padding:22px 24px 26px;background:var(--panel);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.bloc--retours .bloc-corps{background:var(--kraft)}
.bloc-titre{margin-bottom:12px;font:900 clamp(26px,2.6vw,40px)/1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
.affiche--colis{width:72%;margin:-60px 0 22px 18px}
@media (max-width:1100px){.bloc{grid-column:span 6}.bloc--paiement{margin-top:0}}
.faq{row-gap:14px;align-items:start}
.faq-col{grid-column:span 6;display:grid;gap:14px;align-content:start}
.faq-col:nth-child(2){margin-top:52px}
.contact{grid-column:1/10}
.form-contact{position:relative;padding:clamp(22px,3vw,40px) clamp(20px,3vw,40px) 76px;background:var(--kraft);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.champ--large{grid-column:1/-1}
.contact-ok{margin-top:56px;font:900 clamp(20px,2.2vw,30px)/1.15 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase;background:var(--accent);max-width:28ch}
.contact-ok[hidden],.form-contact[hidden]{display:none}
.form-contact[hidden]+.contact-ok{margin-top:0}
.contact-ok:focus{outline:none}

/* ================================================================ pied de page */
.pied{position:relative;overflow:hidden;padding:clamp(60px,6vw,100px) var(--marge) 0;background:var(--ink);color:var(--panel)}
.pied-grille{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr) auto minmax(0,1fr);gap:clamp(20px,3vw,52px);max-width:1440px;margin:0 auto;align-items:start}
.pied-nav ul{display:grid;gap:2px}
.pied-nav a{display:inline-block;padding:4px 0;font:900 clamp(22px,2.4vw,34px)/1.1 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase;color:var(--panel);text-decoration:none}
@media (hover:hover){.pied-nav a:hover{color:var(--accent)}}
.pied-legal,.pied-signe{max-width:34ch;font:500 17px/1.5 var(--f-texte)}
.pied-signe{font:900 clamp(20px,2vw,28px)/1.05 var(--f-titre);letter-spacing:-.02em;text-transform:uppercase}
.vague--v{width:24px;height:200px}
.vague--v path{stroke:var(--accent)}
.pied-mention{max-width:1440px;margin:56px auto 0;font:500 16px/1.5 var(--f-texte)}
.pied-copy{max-width:1440px;margin:10px auto 0;font:700 13px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--accent)}
.pied-logo{margin:28px 0 -.24em -.03em;font:900 14.2vw/.86 var(--f-titre);letter-spacing:-.05em;text-transform:uppercase;color:var(--accent);white-space:nowrap;pointer-events:none}
@media (max-width:900px){
  .pied-grille{grid-template-columns:1fr;gap:26px}
  .vague--v{width:200px;height:20px;transform:none}
  .vague--pied{display:none}
  .pied-legal{padding-top:26px;border-top:var(--b) solid var(--accent)}
  .pied-copy{margin-bottom:64px}
}

/* ================================================================ entrées sous la vidéo */
html.js [data-entree="paliers"]{opacity:0;transform:translateY(24px)}
html.js [data-entree="paliers"].in{opacity:1;transform:none;transition:opacity 300ms steps(3),transform 300ms steps(3);transition-delay:calc(var(--i,0) * 60ms)}
html.js [data-entree="claque"]{opacity:0;transform:scale(1.5) rotate(-25deg)}
html.js [data-entree="claque"].in{opacity:1;transform:rotate(var(--rot,0deg));transition:transform 260ms var(--e-choc),opacity 120ms steps(2);transition-delay:calc(var(--i,0) * 60ms)}

/* ================================================================ téléphone et tablette */
@media (max-width:1100px){
  .cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carte--3{grid-column:1/-1;max-width:50%;justify-self:center}
}
@media (max-width:760px){
  .sec{padding:72px 0 64px}
  .sortie-intro{margin-top:0}
  .cartes{grid-template-columns:1fr;gap:64px}
  .carte--2{margin-top:0}
  .carte--3{max-width:none}
  .carte:nth-child(odd) .carte-corps{margin-right:12px}
  .carte:nth-child(even) .carte-corps{margin-left:12px}
  .rond--carte{width:92px;height:92px;top:-30px;right:-12px}
  .sortie-suite{margin-top:72px}
  .regle{grid-template-columns:1fr;gap:6px}
  .regle:nth-child(even){margin-left:24px}
  .affiche--semelle{max-width:92%}
  .escaliers-cote{padding-top:0;margin-top:40px}
  .fiche-tech{margin:32px 0 0}
  .collage-1,.collage-2,.collage-3,.collage-texte{grid-row:auto}
  .collage-1{max-width:min(72%,450px)}
  .collage-2{margin:14px 0 0 auto;max-width:min(94%,670px)}
  .collage-3{max-width:min(68%,450px);margin:14px 0 0 auto}
  .collage-texte{margin-top:40px}
  .alerte{margin-top:0}
  .tete-mono{justify-self:start}
  .tampon-enligne{top:calc(var(--bandeau) + 16px)}
  .gcartes{grid-template-columns:1fr;gap:64px}
  .gcarte--2{margin-top:0}
  .gcarte--3 .gcarte-corps,.gcartes.une .gcarte-corps{display:block}
  .accessoire{grid-template-columns:88px minmax(0,1fr) auto;row-gap:10px}
  .accessoire .dessin{width:88px;height:60px}
  .accessoire .btn{grid-column:2/-1;justify-self:start}
  .accessoire--2{margin-left:0}
  .case{grid-column:1/-1!important;margin-top:0!important}
  .archive{grid-column:1/-1!important;margin-top:0!important}
  .galerie{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--marge));padding:6px var(--marge) 26px;overscroll-behavior-x:contain}
  .galerie .affiche{flex:0 0 84%;scroll-snap-align:center}
  .achat{position:static;margin-top:28px}
  .sec-fiche .rond--fiche{right:10px;top:calc(var(--bandeau) + 44px);width:84px;height:84px}
  .detail-img,.detail-bloc{grid-row:auto!important}
  .detail-img{max-width:86%;justify-self:center}
  .detail-bloc,.detail-bloc--2,.detail-bloc--4{margin:0}
  .detail-bloc--1{margin-top:-40px}
  .detail{row-gap:26px}
  .detail-bloc:nth-child(odd){padding-left:18px}
  .detail-bloc:nth-child(even){padding-right:18px}
  .autre:nth-child(2){margin-top:0}
  .mur-1,.mur-2,.mur-3,.mur-4,.mur-5{margin-top:0}
  .mur-1{max-width:450px}
  .mur-2{width:82%;max-width:450px;justify-self:end}
  .mur-3{max-width:670px}
  .mur-4{width:86%;max-width:450px}
  .mur-5{max-width:none}
  .histoire p::first-letter{font-size:4.4em}
  .atelier-texte{margin-top:-24px}
  .tampon-lieu{top:-24px}
  .jeudi,.portee-coll{grid-column:1/-1}
  .etape{grid-template-columns:96px minmax(0,1fr)}
  .etape .dessin{width:96px;height:80px}
  .etape--2{margin-left:0}
  .bloc{grid-column:1/-1!important;margin-top:0!important}
  .affiche--colis{margin-top:-50px}
  .faq-col:nth-child(2){margin-top:0}
  .champs{grid-template-columns:1fr}
  .chiffre{grid-column:span 6!important}
  .chiffres{grid-template-columns:repeat(12,minmax(0,1fr))}
  .chiffres>*{grid-column:span 6!important}
}
@media (pointer:coarse){
  .lien,.ariane a,.pied-nav a{display:inline-flex;align-items:center;min-height:44px}
  .taille-liste li{min-height:44px}
}

/* ================================================================ réduire les animations, en direct */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js [data-entree]{opacity:1!important}
  html.js [data-entree="paliers"]{transform:none!important}
  html.js [data-entree="claque"]{transform:rotate(var(--rot,0deg))!important}
  html.js [data-brouille]{opacity:1!important}
  html.js .affiche[data-entree="volet"] .affiche-cadre::before{display:none}
  html.js .vague path{stroke-dashoffset:0!important}
  html.js .logo-pastille{transform:none;opacity:1}
  html.js .logo-pastille .lp-vague{stroke-dashoffset:0}
  .amb-trame,.grain,.rond-tour,.bulle,.tampon-epuisee,.vague,.indice svg{animation:none!important}
  .grain{top:var(--y)}
  .defile{white-space:normal;padding:16px 0}
  .defile-piste{display:none}
  .defile-fixe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em .45em;padding:0 7vw;line-height:1.2;text-align:center}
  html.js .tourner-suite{opacity:1;visibility:visible;transform:none}
  .carre .carre-gain{opacity:1;transform:rotate(6deg)}
  .panneau[open] .panneau-peau,.panneau[open] .panneau-contenu{animation:none}
}

/* onglet caché : toutes les boucles s'arrêtent */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media print{.pilule,.ambiance,.defile,.scene,.xw-bandeau{display:none}}