/* MOJITOH — lancement minimal (DA « Affiche ») : HTML/CSS statiques. */
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url("fonts/anton.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo.woff2") format("woff2-variations")}
:root{--pink:#FF2E63;--pink2:#FD3064;--lime:#C6FF3D;--aqua:#08D9D6;--butter:#F9ED69;--ink:#252A34;--cream:#FFF8DC;--white:#fff;
  --b:2.5px solid var(--ink);--sh:5px 5px 0 var(--ink);--disp:"Anton",Impact,"Arial Narrow Bold",sans-serif;--sans:"Archivo",system-ui,-apple-system,sans-serif;
  --g:16px;--ease:cubic-bezier(.2,.9,.25,1.25);--ease2:cubic-bezier(.22,1,.36,1);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:500 17px/1.55 var(--sans);font-stretch:96%;overflow-x:clip;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .16 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--g)}
.todo{background:var(--butter);border:1.5px dashed var(--ink);padding:0 6px;font-weight:700}
@keyframes slap{0%{opacity:0;transform:translateY(20px) rotate(calc(var(--t,0deg) - 6deg)) scale(1.12)}60%{opacity:1}100%{opacity:1;transform:rotate(var(--t,0deg))}}
@keyframes pop{0%{opacity:0;transform:scale(.86) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes ray{0%{opacity:0;transform:scale(.15)}100%{opacity:1;transform:none}}
.in{animation:slap .5s var(--ease) backwards;animation-delay:var(--d,0s)}

/* en-tête */
/* en-tête collant FIN : 60 px, logo 44 px de haut quelle que soit la largeur d'écran */
.mh{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;height:calc(60px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0) var(--g) 0;background:var(--pink2);border-bottom:var(--b)}
.logo{display:block;flex:none;margin-right:auto;line-height:0;transition:transform .3s var(--ease)}
.mh .logo img{display:block;height:44px;max-height:44px;width:auto;max-width:none;aspect-ratio:1208/540}
.logo:hover{transform:rotate(-3deg) scale(1.04)}
.yt{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ink);color:var(--lime);border-radius:999px;font:800 13px/1 var(--sans);font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;transition:transform .25s var(--ease)}
.yt:hover{transform:rotate(-3deg) scale(1.05)}
.pi{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* boutons, stickers */
.btn{--c:var(--lime);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:var(--b);border-radius:999px;background:var(--c);color:var(--ink);
  font:800 16px/1.1 var(--sans);font-stretch:80%;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;box-shadow:var(--sh);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink);transition-duration:.06s}
.b-ink{--c:var(--ink);color:var(--lime);box-shadow:5px 5px 0 var(--pink)}
.stk{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 5px;background:var(--c,var(--lime));border:var(--b);font:800 14px/1.1 var(--sans);font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--t,-3deg));white-space:nowrap;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.stk:hover{transform:translate(-2px,-3px) rotate(calc(var(--t,-3deg) - 2deg));box-shadow:5px 6px 0 var(--ink)}
.stk.ink{--c:var(--ink);color:var(--lime);box-shadow:3px 3px 0 var(--pink)}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:26px}
.lnk{font:800 14px/1 var(--sans);font-stretch:85%;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border-bottom:2.5px solid currentColor;padding-bottom:3px}

/* affiche (accueil) */
.hero{position:relative;background:var(--pink2);overflow:hidden;isolation:isolate;min-height:calc(100svh - 60px - env(safe-area-inset-top,0px));display:flex;flex-direction:column}
.hero-art{position:absolute;z-index:-1;left:4vw;width:98vw;top:calc(76% - 106vw)}
.rays{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;filter:drop-shadow(3px 3px 0 rgba(37,42,52,.28))}
.ry{transform-box:view-box;transform-origin:54px 96px;animation:ray .8s var(--ease2) backwards;animation-delay:calc(.3s + var(--i) * .04s)}
.ry.y{fill:var(--butter)}.ry.a{fill:var(--aqua)}.ry.l{fill:var(--lime)}
.art-in{animation:pop .9s var(--ease) .25s backwards}
.hero-tx{position:relative;padding:22px var(--g) 30px;max-width:1180px;width:100%;margin:0 auto}
.slab{margin:14px 0 0;font:900 min(16.2vw,104px)/1.06 var(--sans);font-stretch:62%;letter-spacing:-.01em;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-start}
.ln{position:relative;display:inline-block;padding:.02em .16em .06em .1em;margin-top:-.04em;transform:rotate(var(--t));filter:drop-shadow(4px 4px 0 var(--ink))}
.ln .paper{position:absolute;inset:0;background:var(--butter);z-index:-1}
.ln-l .wd{color:var(--lime);text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),5px 5px 0 var(--ink)}
.hero .lede{margin-top:22px;max-width:30ch;font-weight:700;font-size:18px;background:var(--cream);border:var(--b);padding:12px 14px;box-shadow:var(--sh);transform:rotate(-.6deg)}
@media (min-width:834px){
  .hero{min-height:min(760px,calc(100svh - 60px))}
  .hero-art{left:auto;right:-2vw;width:min(54vw,820px);top:calc(58% - 1.08 * min(54vw,820px))}
  .hero-tx{padding:52px 32px 40px}
  .slab{font-size:min(8vw,124px)}
}

/* en-têtes de page et contenu */
.phead{background:var(--c,var(--butter));border-bottom:var(--b);padding:26px 0 40px}
.phead h1{font:400 clamp(44px,12vw,140px)/1.05 var(--disp);padding-bottom:.04em;overflow-wrap:break-word;margin-top:16px;max-width:14ch;text-wrap:balance}
.phead .lede{font-weight:600;margin-top:14px;max-width:60ch;font-size:18px}
.sec{padding:40px 0 20px}
.sheet{background:var(--white);border:var(--b);padding:24px 18px;box-shadow:var(--sh);max-width:820px}
.sheet h2{font:400 30px/1.1 var(--disp);text-transform:uppercase;margin:34px 0 12px}
.sheet h2:first-child{margin-top:0}
.sheet p+p,.sheet ul,.sheet dl{margin-top:12px}
.sheet a{font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.sheet ul{padding-left:1.2em}
.sheet li+li{margin-top:6px}
.sheet .btn{margin-top:18px}
dl.dl{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:8px 16px}
dl.dl dt{font-weight:800}dl.dl dd{margin:0}
@media (min-width:834px){.sheet{padding:40px 48px}}

/* formulaires */
form .f{display:grid;gap:6px;margin-top:16px}
form label{font:800 14px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.04em}
form input[type=email],form input[type=text],form textarea{width:100%;font:600 17px/1.4 var(--sans);padding:12px 14px;border:var(--b);border-radius:10px;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
form textarea{min-height:150px;resize:vertical}
form input:focus,form textarea:focus{outline:3px solid var(--aqua);outline-offset:2px}
.cb{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:18px;font:600 15px/1.4 var(--sans);text-transform:none;letter-spacing:0}
.cb input{width:24px;height:24px;margin:0;accent-color:var(--ink)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.err{margin-top:14px;background:var(--pink);color:var(--white);padding:10px 12px;border:var(--b);font-weight:700}
.err:empty{display:none}
.note{font-size:14px;margin-top:14px}
.btn.full{width:100%;margin-top:22px}

/* pied de page */
.mf{background:var(--ink);color:var(--cream);margin-top:56px;padding:40px 0 calc(24px + env(safe-area-inset-bottom,0px));border-top:var(--b);overflow:hidden}
.fl{display:flex;flex-wrap:wrap;gap:12px 22px}
.fl a{text-decoration:none;font-weight:700;border-bottom:2px solid var(--lime)}
.flogo{display:block;width:min(100%,480px);height:auto;aspect-ratio:1208/540;margin:30px 0 12px;transform:rotate(-2deg)}
.legal{font-size:13px;opacity:.85}
@media (min-width:834px){.w{padding:0 32px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.hero .lnk{background:var(--cream);padding:9px 12px;border:var(--b);box-shadow:3px 3px 0 var(--ink)}
/* page en construction : message posé sur le bandeau d'identité */
.bd-h1{position:relative;isolation:isolate;display:inline-block;margin:6px 0 0;padding:.08em .4em .12em;font:900 clamp(30px,4.2vw,64px)/1.05 var(--sans);font-stretch:62%;color:var(--ink);transform:rotate(-1.5deg);filter:drop-shadow(5px 5px 0 var(--ink));animation:slap .5s var(--ease) .5s backwards;--t:-1.5deg}
.bd-h1 .paper{position:absolute;inset:0;background:var(--butter);z-index:-1}
.bd-lede{max-width:34ch;font-weight:700;font-size:17px;background:var(--cream);border:var(--b);padding:10px 14px;box-shadow:var(--sh);transform:rotate(.6deg)}
.bd-x .links{margin-top:6px;justify-content:center}
.bd-x .lnk{background:var(--cream);padding:9px 12px;border:var(--b);box-shadow:3px 3px 0 var(--ink)}

/* ===== Habit commun en-tête / pied (v8.4) — même matière que la bannière d'identité =====
   Copié tel quel en fin de v8/src/site.css et de v8/scripts/lancement/lancement.css. */
/* en-tête : rose plein + rayons très légers de la bannière, bord inférieur déchiré avec ombre Encre */
.mh{border-bottom:0;overflow:visible;background-color:var(--pink2);
  background-image:repeating-conic-gradient(from 4deg at 50% 420%,rgba(255,255,255,.07) 0 4deg,rgba(255,255,255,0) 4deg 10deg)}
.mh::after{content:"";position:absolute;left:0;right:0;top:100%;height:9px;background:var(--pink2);pointer-events:none;filter:drop-shadow(0 2.5px 0 var(--ink));
  clip-path:polygon(0 0,100% 0,100% 45%,97% 85%,93% 35%,89% 95%,84% 45%,79% 80%,74% 30%,69% 90%,64% 40%,59% 85%,54% 35%,49% 95%,44% 45%,39% 80%,34% 30%,29% 90%,24% 40%,19% 85%,14% 35%,9% 95%,5% 45%,2% 75%,0 40%)}
/* pied : bande crème déchirée (liens, Encre sur crème) puis matière de la bannière (logo, accroche, légal) */
.mf{background:none;color:var(--ink);padding:0;border-top:0;overflow:visible;position:relative}
.mf-band .fl a{border-bottom:2px solid var(--ink)}
.mf-band{position:relative;background:var(--cream);padding:34px 0 30px;filter:drop-shadow(0 -2.5px 0 var(--ink))}
.mf-band::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px;background:var(--cream);
  clip-path:polygon(0 60%,3% 20%,7% 75%,12% 15%,17% 70%,22% 25%,27% 80%,33% 10%,38% 65%,44% 20%,49% 75%,55% 15%,60% 70%,66% 25%,71% 80%,77% 15%,82% 70%,88% 20%,93% 75%,97% 30%,100% 55%,100% 100%,0 100%)}
.mf-band h2{color:var(--ink)}
.mf-band a{color:var(--ink)}
.mf-mat{position:relative;isolation:isolate;overflow:hidden;border-top:2.5px solid var(--ink);background:var(--pink2);padding:34px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.mf-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.mf-in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.mf-in .flogo{margin:0;width:min(74vw,460px)}
.mf-tag{display:inline-block;background:var(--cream);color:var(--ink);font:800 16px/1 var(--sans);font-stretch:82%;padding:.5em 1em .42em;transform:rotate(1.5deg);box-shadow:4px 4px 0 var(--ink);border:2px solid var(--ink)}
.mf-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;max-width:760px;margin-top:8px;background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 14px;font-size:13px;font-weight:600;transform:rotate(-.5deg)}
.mf-legal .ver{font-weight:800;background:var(--ink);color:var(--lime);padding:2px 8px;border-radius:999px}
.mf-band a:hover,.fl a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}
/* contrastes ≥ 4,5:1 sur le rose */
.mh,.hero,.c-pink{--ink:#171A20}
.mh,.hero,.phead.c-pink{color:var(--ink)}