@font-face{font-family:"TMC Wide";src:url(/fonts/archivo-xi.woff2) format("woff2");font-style:italic;font-weight:600 900;font-display:swap}
@font-face{font-family:"TMC";src:url(/fonts/archivo.woff2) format("woff2");font-style:normal;font-weight:400 800;font-display:swap}

:root{
  --y:#ffd400;--k:#0e0e0e;--w:#fff;--r:#e8261b;--paper:#f4f3ee;--grey:#5d5d58;
  --wide:"TMC Wide","Arial Black",Impact,sans-serif;--body:"TMC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:16px;--dockh:92px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--w);color:var(--k);font:500 17px/1.45 var(--body);overflow-x:hidden}
body.has-dock{padding-bottom:calc(var(--dockh) + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--g)}

.wide,.giant,.big,.btn,.logo{font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase}

.demo{background:var(--k);color:#d8d8d2;font-size:13px;line-height:1.3;text-align:center;padding:6px var(--g)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--y);padding-top:env(safe-area-inset-top);border-bottom:3px solid var(--k)}
.top-in{max-width:1120px;margin:0 auto;height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 var(--g)}
.logo{display:flex;align-items:center;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;letter-spacing:-.01em;transform:rotate(-2deg)}
.logo span{padding:6px 7px 5px}
.logo-k{background:var(--k);color:var(--y)}
.logo-y{background:var(--w);color:var(--k);border:3px solid var(--k);margin-left:-3px;padding:3px 7px 2px!important}
.acct{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:48px;padding:0 14px;background:var(--k);color:var(--w);border:0;border-radius:999px;font-weight:800;font-size:15px;cursor:pointer}
.acct:hover{background:#2a2a2a}
.credits{font-family:var(--wide);font-style:italic;font-weight:900;font-size:14px;color:var(--k);background:var(--y);padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ---------- boutons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:64px;padding:12px 24px;border:3px solid var(--k);border-radius:16px;cursor:pointer;text-decoration:none;
  font-size:22px;line-height:1.1;letter-spacing:-.01em;box-shadow:0 6px 0 var(--k);transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--k)}
.btn-go{background:var(--k);color:var(--y);box-shadow:0 6px 0 var(--r)}
.btn-go:active{box-shadow:0 1px 0 var(--r)}
.btn-go:hover{background:#222}
.btn-y{background:var(--y);color:var(--k)}
.btn-w{background:var(--w);color:var(--k)}
.btn-s{min-height:52px;font-size:16px;box-shadow:0 4px 0 var(--k)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.btn-pulse:active{animation:none}

/* ---------- écran 1 ---------- */
.hero{background:var(--y);border-bottom:3px solid var(--k);overflow:hidden}
.hero-in{max-width:1120px;margin:0 auto;padding:18px var(--g) 22px;display:grid;gap:18px}
.giant{margin:0;font-size:clamp(48px,14vw,128px);line-height:.88;letter-spacing:-.035em}
.giant span{display:block}
.giant .l2{color:var(--r)}
.giant .l3{display:inline-block;white-space:nowrap;background:var(--k);color:var(--w);padding:.06em .14em .02em .08em;margin-top:.08em;transform:rotate(-2deg);font-size:.74em}

.ba{position:relative;border:3px solid var(--k);border-radius:18px;overflow:hidden;background:var(--paper);aspect-ratio:640/330;box-shadow:6px 6px 0 var(--k);touch-action:pan-y;user-select:none}
.car{display:block;width:100%;height:100%}
.ba-top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba-top .car{position:absolute;inset:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--k);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--y);color:var(--k);border:3px solid var(--k);display:flex;align-items:center;justify-content:center}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.tag{position:absolute;top:10px;font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:13px;line-height:1;padding:7px 9px 6px;border:2.5px solid var(--k);pointer-events:none}
.tag-l{left:10px;background:var(--w);transform:rotate(-3deg)}
.tag-r{right:10px;background:var(--r);color:var(--w);transform:rotate(3deg)}
.tag-ill{position:absolute;left:10px;bottom:9px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--w);background:rgba(14,14,14,.85);padding:3px 7px;border-radius:4px;pointer-events:none}

.cta .btn{width:100%}
.fine{margin:12px 0 0;font-size:13px;line-height:1.35;color:#3b3a30;text-align:center}

/* ---------- atelier ---------- */
.atelier{scroll-margin-top:62px;background:var(--w);border-bottom:3px solid var(--k);padding:28px 0 32px}
.at-in{display:grid;gap:22px}
.at-frame{position:relative;border:3px solid var(--k);border-radius:16px;overflow:hidden;background:#ddd;box-shadow:5px 5px 0 var(--y)}
.at-frame img{width:100%;max-height:300px;object-fit:cover}
.sticker{position:absolute;font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:13px;line-height:1;padding:7px 9px 6px;border:2.5px solid var(--k)}
.sticker-k{top:10px;left:10px;background:var(--y);transform:rotate(-3deg)}
.link{display:inline-flex;align-items:center;min-height:48px;font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.big{margin:0 0 16px;font-size:clamp(34px,9.5vw,68px);line-height:.92;letter-spacing:-.03em}
.hl{background:var(--y);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-k{background:var(--k);color:var(--y);padding:0 .1em}
.big-y{color:var(--y)}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preset{position:relative;display:block;padding:0;border:3px solid var(--k);border-radius:14px;overflow:hidden;background:var(--w);cursor:pointer;text-align:left;min-height:48px;transition:transform .12s}
.preset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.preset span{display:block;padding:9px 10px 10px;font-weight:800;font-size:16px;line-height:1.15}
.preset[aria-checked=true]{background:var(--y);transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--k)}
.preset[aria-checked=true]::after{content:"";position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--r) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;border:2.5px solid var(--k)}
.lbl{display:block;margin:22px 0 8px;font-weight:800;font-size:18px}
textarea{width:100%;font-size:17px;padding:14px;border:3px solid var(--k);border-radius:14px;background:var(--w);resize:vertical;min-height:64px}
textarea:focus,input:focus{outline:3px solid var(--y);outline-offset:2px}

/* ---------- comment ça marche ---------- */
.how{background:var(--k);color:var(--w);padding:40px 0 44px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:flex;align-items:center;gap:16px}
.steps .n{flex:none;width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-family:var(--wide);font-style:italic;font-weight:900;font-size:44px;line-height:1;background:var(--y);color:var(--k);border-radius:18px;transform:rotate(-4deg)}
.steps li:nth-child(2) .n{background:var(--w);transform:rotate(3deg)}
.steps li:nth-child(3) .n{background:var(--r);color:var(--w);transform:rotate(-2deg)}
.steps b{font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(22px,6.4vw,40px);line-height:1;letter-spacing:-.02em}
.how-note{margin:22px 0 0;color:#cfcfc8;font-size:16px}

/* ---------- galerie ---------- */
.styles{padding:40px 0 44px;background:var(--w)}
.sub{margin:-6px 0 16px;color:var(--grey);font-size:15px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gal figure{margin:0;position:relative;border:3px solid var(--k);border-radius:14px;overflow:hidden;background:#ddd}
.gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:var(--y);border:2px solid var(--k);font-weight:800;font-size:14px;line-height:1.15;padding:4px 7px}
.gal figure:nth-child(3n+2) figcaption{background:var(--w)}

/* ---------- prix ---------- */
.price{background:var(--y);border-top:3px solid var(--k);border-bottom:3px solid var(--k);padding:40px 0 44px}
.ticket{background:var(--w);border:3px solid var(--k);border-radius:18px;box-shadow:6px 6px 0 var(--k);padding:18px;max-width:640px}
.t-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:10px 0;border-bottom:2px dashed #c9c7bc}
.t-big{font-family:var(--wide);font-style:italic;font-weight:900;font-size:clamp(34px,10vw,56px);line-height:1;letter-spacing:-.03em}
.t-row:nth-child(2) .t-big{font-size:clamp(26px,7.4vw,40px)}
.t-txt{font-weight:800;font-size:17px;line-height:1.25}
.t-note{margin:14px 0 0;font-size:15px;color:#3d3d38}

/* ---------- FAQ ---------- */
.faq{padding:40px 0 44px}
.faq details{border:3px solid var(--k);border-radius:14px;margin-bottom:10px;background:var(--w)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-weight:800;font-size:18px;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--y);border:2px solid var(--k);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−";background:var(--r);color:var(--w)}
.faq details p{margin:0;padding:0 16px 16px;font-size:16px;color:#2f2f2b}

/* ---------- footer ---------- */
.foot{background:var(--k);color:#d7d7d0;padding:30px 0 34px}
.foot-in{display:grid;gap:16px}
.logo-foot{justify-self:start}
.logo-foot .logo-y{border-color:var(--w)}
.legal{display:flex;flex-wrap:wrap;gap:0 18px}
.legal a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.credits-ph summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px}
.credits-ph p{margin:4px 0 0;font-size:13px;color:#a9a9a2}

/* ---------- barre collante ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--y);border-top:3px solid var(--k);padding:12px var(--g) calc(14px + env(safe-area-inset-bottom))}
.dock .btn{width:100%;max-width:560px;margin:0 auto}

/* ---------- attente ---------- */
.wait{position:fixed;inset:0;z-index:50;background:var(--y);display:flex;align-items:center;justify-content:center;padding:calc(18px + env(safe-area-inset-top)) var(--g) calc(18px + env(safe-area-inset-bottom));overflow:auto}
.wait-in{width:100%;max-width:480px;text-align:center}
.wait-k{display:inline-block;margin:0 0 16px;font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(22px,6.6vw,34px);line-height:1;background:var(--k);color:var(--w);padding:8px 12px 6px;transform:rotate(-2deg)}
.wait-frame{position:relative;overflow:hidden;border:3px solid var(--k);border-radius:16px;background:#000;box-shadow:6px 6px 0 var(--k)}
.wait-frame img{width:100%;max-height:38dvh;object-fit:contain;filter:grayscale(.5)}
.scan{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,212,0,.55),transparent);animation:scan 1.8s linear infinite}
@keyframes scan{to{left:100%}}
.wait-chrono{margin:18px 0 0;font-family:var(--wide);font-style:italic;font-weight:900;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.wait-msg{margin:8px 0 14px;font-weight:800;font-size:19px;line-height:1.25;min-height:48px}
.lane{position:relative;height:14px;border:3px solid var(--k);border-radius:999px;overflow:hidden;background:var(--w)}
.lane span{position:absolute;top:0;bottom:0;width:38%;background:repeating-linear-gradient(90deg,var(--k) 0 8px,var(--w) 8px 16px);animation:lane 1.4s ease-in-out infinite alternate}
@keyframes lane{from{left:-10%}to{left:72%}}
.wait-note{margin:12px 0 0;font-size:14px;color:#3b3a30}

/* ---------- feuilles ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(14,14,14,.7)}
.sheet-box{position:relative;width:100%;max-width:560px;max-height:94dvh;overflow:auto;background:var(--w);border:3px solid var(--k);border-bottom:0;border-radius:22px 22px 0 0;padding:22px var(--g) calc(22px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.x{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:3px solid var(--k);background:var(--y);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.sheet h3{font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(26px,7.6vw,36px);line-height:.95;letter-spacing:-.02em;margin:4px 58px 14px 0}
.sheet p{margin:0 0 12px;font-size:16px}
.sheet .btn{width:100%}
.sheet .btn+.btn,.sheet .btn+.row,.sheet .row+.btn{margin-top:14px}
.sheet .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.res{position:relative;border:3px solid var(--k);border-radius:16px;overflow:hidden;background:#000;margin-bottom:14px}
.res img{width:100%;max-height:52dvh;object-fit:contain}
.res .tag{top:10px;left:10px;right:auto}
.res-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.res-lock span{font-family:var(--wide);font-style:italic;font-weight:900;text-transform:uppercase;font-size:18px;background:var(--y);border:3px solid var(--k);padding:8px 12px 6px;transform:rotate(-3deg)}
.sim{display:block;font-weight:800;font-size:14px;line-height:1.3;margin:0 0 14px}
.sim i{font-style:normal;background:var(--k);color:var(--y);padding:2px 6px;margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.honest{font-size:14px!important;line-height:1.4;color:#3b3a33;margin:12px 0 4px!important}
.mini{display:flex;flex-wrap:wrap;gap:0 16px;font-size:14px}
.mini a,.mini button{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
.field{display:block;width:100%;min-height:56px;font-size:17px;padding:12px 14px;border:3px solid var(--k);border-radius:14px;background:var(--w);margin:0 0 12px}
.flabel{display:block;font-weight:800;font-size:15px;margin:0 0 6px}
.msg{font-weight:700;font-size:15px!important;padding:10px 12px;border-radius:10px;background:var(--paper);border:2px solid var(--k)}
.msg.err{background:#ffe3e0;border-color:var(--r)}
.card{border:3px solid var(--k);border-radius:16px;padding:16px;background:var(--paper);margin-top:18px}
.card b{display:block;font-size:17px;line-height:1.25;margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 16px;font-size:16px}
.kv dt{font-weight:700;color:var(--grey)}
.kv dd{margin:0;font-weight:800;overflow-wrap:anywhere}
.kv .cr{font-family:var(--wide);font-style:italic;font-weight:900;font-size:26px;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chip{min-height:48px;padding:0 16px;border:2.5px solid var(--k);border-radius:999px;background:var(--w);font-weight:800;font-size:15px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--y)}
.sep{border:0;border-top:2px dashed #c9c7bc;margin:20px 0}
.danger{color:var(--r)!important}
.btn-red{background:var(--r);color:var(--w)}

.toast{position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;width:max-content;max-width:calc(100% - 32px);background:var(--k);color:var(--w);font-weight:700;padding:12px 16px;font-size:15px;border-radius:12px;border:3px solid var(--y)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- grand écran ---------- */
@media (min-width:860px){
  :root{--g:32px}
  .hero-in{grid-template-columns:1fr 1.15fr;grid-template-areas:"t v" "c v";align-items:center;column-gap:48px;row-gap:28px;padding:44px var(--g) 52px}
  .giant{grid-area:t;font-size:clamp(56px,6.2vw,96px);align-self:end}
  .ba{grid-area:v}
  .cta{grid-area:c;align-self:start;max-width:520px}
  .fine{text-align:left}
  .at-in{grid-template-columns:380px 1fr;align-items:start}
  .presets{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .steps li{flex-direction:column;align-items:flex-start}
  .steps .n{width:96px;height:96px;font-size:60px}
  .gal{grid-template-columns:repeat(4,1fr)}
  .price .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
  .faq .wrap{max-width:860px}
  .sheet{align-items:center}
  .sheet-box{border-radius:22px;border-bottom:3px solid var(--k);padding:28px}
  .tag{font-size:16px}
}