/* Page d'accueil. Animations : transform/opacity, actives seulement avec html.motion (ajoutée si pas de prefers-reduced-motion) */
:root{--ink:#0D0D0D;--y:#FFD60A;--paper:#F7F5EF;--white:#fff;--muted:#4A4A4A;--soft:#C9C9C9;--rule:#2E2E2E;
  --d:"Bricolage Grotesque",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1280px;--hh:64px;--ease:cubic-bezier(.2,.75,.2,1)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;font:1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--paper);overflow-x:clip}
main{overflow-x:clip} /* le bandeau incliné déborde : clip ne crée pas de conteneur de défilement (les titres collants restent collants) */
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:750;line-height:1.02;letter-spacing:-.015em;margin:0}
p,ul,ol{margin:0}
:focus-visible{outline:3px solid var(--f,var(--ink));outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-200px;z-index:200;background:var(--y);color:var(--ink);padding:.7rem 1rem;border-radius:8px;font-weight:700}
.skip:focus{top:1rem}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:48px;padding:.7rem 1.3rem;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;overflow-wrap:anywhere;transition:transform .3s var(--ease),background-color .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-ink:hover{background:#333;border-color:#333}
.btn-y{background:var(--y);color:var(--ink)}
.btn-y:hover{background:var(--white)}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.s-ink .btn-line:hover,.bar .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* En-tête collant */
.top{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--paper);--f:var(--y)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:var(--hh)}
.brand{display:flex;align-items:center;gap:.6rem;min-height:44px;margin-right:auto;font:750 1.05rem/1 var(--d);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:8px}
.nav{display:none}
.top .btn{min-height:44px;padding:.5rem 1rem;font-size:.95rem;border-color:var(--y);white-space:nowrap;flex:none}
.prog{display:none}
.io .prog{display:block;position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--y);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:479px){.top .wrap{gap:.75rem}.brand{gap:.5rem;font-size:.95rem}.top .btn{padding-inline:.85rem;font-size:.9rem}}
@media (max-width:359px){.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (min-width:960px){
  .nav{display:flex;gap:1.6rem}
  .nav a{padding:.6rem 0;font-weight:600;font-size:.95rem;text-decoration:none;background:linear-gradient(var(--y),var(--y)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
  .nav a:hover{background-size:100% 2px}
}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(1.75rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);background:radial-gradient(rgba(13,13,13,.16) 1px,transparent 1.6px) 0 0/26px 26px}
.hero.cv{background:none}
.dots,.halo{position:absolute;pointer-events:none;z-index:-1}
.dots{inset:0;width:100%;height:100%}
.halo{left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,10,.6),rgba(255,214,10,0));opacity:0;transition:opacity .8s}
.halo.on{opacity:1}
.hero-g{display:grid;gap:1.4rem 3rem;grid-template-areas:"t" "l" "f" "p"}
.h1{grid-area:t;font-size:clamp(2.55rem,10.5vw,6.3rem);line-height:.98;letter-spacing:-.015em;font-weight:780;max-width:15ch}
.w{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;position:relative;z-index:1}
/* Surlignage : une bande par mot, prolongée sur l'espace suivant */
.hl .w{padding-right:.22em;margin-right:-.22em}
.hl .w::before{content:"";position:absolute;left:-.04em;right:0;bottom:.12em;height:.42em;background:var(--y);transform-origin:0 50%}
.motion .w>span{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i)*45ms + 60ms)}
.motion .hl .w::before{animation:draw-x .32s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(var(--i)*90ms + 420ms)}
@keyframes rise{from{transform:translateY(108%)}}
@keyframes draw-x{from{transform:scaleX(0)}}
.hero-l{grid-area:l;display:grid;gap:1.1rem;align-content:start;max-width:36rem}
.lead{font-size:clamp(1.06rem,1.6vw,1.25rem);line-height:1.5;color:#262626}
.cta{display:flex;flex-wrap:wrap;gap:.6rem}
.cta .btn{flex:1 1 auto;padding-inline:1rem}
.reass{max-width:34rem;padding-left:.9rem;border-left:3px solid var(--ink);font-size:.95rem;line-height:1.5;color:var(--muted)}
.hero .fcard{grid-area:f;position:relative;z-index:1}
.motion .hero-l,.motion .hero .fcard,.motion .phone{animation:fin .7s var(--ease) both}
.motion .hero-l{animation-delay:.3s}
.motion .hero .fcard{animation-delay:.45s}
.motion .phone{animation-delay:.6s}
@keyframes fin{from{opacity:0;transform:translateY(18px)}}
/* Mobile : le formulaire est juste dessous, le bouton « devis » du hero ferait doublon */
@media (max-width:767px){
  .hero{padding-top:1.25rem}
  .hero-g,.hero-l{gap:.9rem}
  .cta [data-focus]{display:none}
  .cta .btn{flex:none;min-height:44px}
}
@media (min-width:768px){
  .hero-g{grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"t t" "l f" "p f";align-items:start}
  .cta .btn{flex:none}
}
@media (min-width:1100px){
  .hero-g{grid-template-columns:minmax(0,1fr) 236px 380px;grid-template-areas:"t t f" "l p f";column-gap:3.5rem}
  .phone{margin-top:-1rem}
}

/* Formulaire */
.fcard{--f:var(--ink);background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:20px;padding:clamp(1.15rem,3.5vw,1.6rem);box-shadow:8px 8px 0 var(--ink)}
.ft{font-size:clamp(1.35rem,3.5vw,1.6rem);letter-spacing:-.01em;margin-bottom:1rem}
.fld{margin-bottom:.8rem}
label{display:block;margin-bottom:.3rem;font-weight:650;font-size:.95rem}
label span{font-weight:400;color:var(--muted)}
input{width:100%;min-height:50px;padding:.7rem .9rem;font:1.0625rem/1.3 var(--sans);color:var(--ink);background:var(--paper);border:2px solid #767676;border-radius:12px;transition:border-color .2s}
input::placeholder{color:#6B6B6B;opacity:1}
input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
input[aria-invalid]{border-color:#B00020}
.err{margin-top:.3rem;color:#B00020;font-size:.9rem;font-weight:600;line-height:1.4}
.err:empty{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub{position:relative;width:100%;margin-top:.2rem}
.sub.busy{cursor:progress}
.sub.busy span{opacity:0}
.sub.busy::after{content:"";position:absolute;width:20px;height:20px;border:3px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.rgpd{margin-top:.8rem;font-size:.85rem;line-height:1.45;color:var(--muted)}
.ok{display:grid;gap:.9rem;padding:.4rem 0;outline:none}
.ok p{font-weight:650;font-size:1.1rem;line-height:1.45}
.tick{width:56px;height:56px}
.tick circle{fill:var(--y);stroke:var(--ink);stroke-width:2.5}
.tick path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.motion .ok .tick{animation:pop .5s var(--ease) both}
.motion .ok .tick path{animation:stroke .45s .25s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
@keyframes stroke{from{stroke-dashoffset:1}}
.ko{margin-top:.9rem;padding:.8rem 1rem;border-left:4px solid #B00020;background:#FDECEE;font-size:.95rem;line-height:1.5}

/* Maquette de téléphone (exemple fictif) */
.phone{grid-area:p;justify-self:center;position:relative;width:236px;height:480px;border:9px solid var(--ink);border-radius:38px;background:var(--paper);box-shadow:10px 10px 0 var(--y)}
.phone::before{content:"";position:absolute;z-index:2;top:7px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:10px;background:var(--ink)}
.ph{position:absolute;inset:0;overflow:hidden;border-radius:29px;padding:30px 13px 13px;display:flex;flex-direction:column;gap:9px;font:500 11px/1.3 var(--sans);color:var(--ink)}
.ph-tag{align-self:flex-end;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border:1.5px solid var(--ink);border-radius:4px}
.b{border-radius:12px}
.b1{background:var(--ink);color:var(--paper);padding:12px;display:grid;gap:6px}
.b1 b{font:750 16px/1 var(--d);letter-spacing:-.02em}
.b1 i{height:5px;border-radius:3px;background:#555;width:85%}
.b1 i+i{width:55%}
.b2{background:var(--white);border:1.5px solid #DDD8CB;padding:9px 11px;display:grid;gap:2px}
.b2 span{font:500 9px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.b2 b{font-size:12px}
.b3{background:var(--y);border:1.5px solid var(--ink);border-radius:999px;height:38px;display:grid;place-items:center;font-weight:700;font-size:13px}
.b4{position:relative;height:92px;background:repeating-linear-gradient(90deg,transparent 0 22px,#fff 22px 25px),repeating-linear-gradient(0deg,transparent 0 26px,#fff 26px 29px),#E7E2D5;overflow:hidden}
.pin{position:absolute;left:50%;top:22px;width:22px;height:22px;margin-left:-11px;background:var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--y)}
.mt{position:absolute;left:8px;bottom:8px;background:var(--white);padding:3px 7px;border-radius:6px;font-weight:700;font-size:10px}
.b5{background:var(--ink);color:var(--y);padding:10px 11px;display:grid;gap:8px}
.b5>span:first-child{font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.st{display:flex;gap:6px}
.st i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--y)}
.st i:nth-child(-n+5){background:var(--y)}
.motion .b{animation:build 10s var(--ease) infinite both;animation-delay:calc(var(--d)*.5s + 1.1s)}
.motion .b5{animation-name:slide}
.off .b,.off .mq-t{animation-play-state:paused!important}
@keyframes build{0%{opacity:0;transform:translateY(14px) scale(.96)}6%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes slide{0%{transform:translateX(125%)}7%,72%{transform:none}78%,100%{transform:translateX(125%)}}

/* Bandeau défilant */
.mq{--f:var(--ink);position:relative;z-index:2;width:calc(100% + 4rem);margin:0 -2rem;background:var(--y);border-block:2px solid var(--ink);overflow:hidden;transform:rotate(-1.2deg)}
.mq:focus-visible{outline-offset:-6px}
.mq-t{display:flex;flex-wrap:wrap;justify-content:center}
.mq ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.2rem;list-style:none;padding:.85rem 2.2rem .85rem 0;font:500 clamp(.95rem,2.2vw,1.15rem)/1.3 var(--mono)}
.mq li{display:flex;align-items:center;gap:2.2rem;white-space:nowrap}
.mq li::after{content:"";width:.6em;height:.3em;background:var(--ink)}
.mq ul+ul{display:none}
.motion .mq-t{flex-wrap:nowrap;width:max-content;animation:mq 32s linear infinite}
.motion .mq ul{flex-wrap:nowrap}
.motion .mq ul+ul{display:flex}
.mq:hover .mq-t,.mq:focus .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* Sections et panneaux (fond noir ou jaune arrondi, qui s'élargit à l'entrée) */
.sec{position:relative;padding:clamp(4.5rem,11vw,8.5rem) 0}
.panel{isolation:isolate;view-timeline:--pnl block}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border-radius:clamp(22px,4vw,44px)}
.s-ink{--bg:var(--ink);--f:var(--y);color:#F2F2F2}
.s-y{--bg:var(--y);--f:var(--ink);color:var(--ink)}
@supports (animation-timeline:view()){.motion .panel::before{animation:grow linear both;animation-timeline:--pnl;animation-range:entry 0% entry 70%}}
@keyframes grow{from{transform:scaleX(.94)}}
.h2{font-size:clamp(2.3rem,7.2vw,4.8rem);line-height:.98;letter-spacing:-.015em;max-width:15ch}
.intro{margin-top:1rem;font-size:clamp(1.06rem,1.8vw,1.3rem);line-height:1.5;max-width:40ch}
.io .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.io .rv.in{opacity:1;transform:none}

/* Services */
.svc{list-style:none;padding:0;margin-top:clamp(2.5rem,6vw,4.5rem);counter-reset:s}
.svc li{counter-increment:s;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.5rem 1rem;padding:1.6rem 0;border-top:1px solid var(--rule)}
.svc li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:500 .95rem/1.9 var(--mono);color:var(--y)}
.svc h3{font-size:clamp(1.4rem,3.2vw,2.15rem);line-height:1.08;transition:transform .4s var(--ease)}
.svc p{color:var(--soft);max-width:44ch}
@media (min-width:900px){
  .svc{margin-left:min(16%,12rem)}
  .svc li{grid-template-columns:4.5rem minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:baseline;padding:2.2rem 0}
  .svc li::before{grid-row:auto}
  .svc li:hover h3{transform:translateX(.5rem)}
}

/* Offre de lancement */
.lanc{display:grid;gap:2rem}
.lanc p{font-size:clamp(1.06rem,1.8vw,1.25rem);line-height:1.55;max-width:40ch;margin-bottom:1.5rem}
.pct{display:block;font-size:clamp(5.5rem,25vw,15rem);line-height:.82;letter-spacing:-.07em;font-weight:800;margin:0 0 .12em -.05em}
@media (min-width:900px){.lanc{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:4rem}}

/* Tarifs */
.head{display:grid;gap:.5rem}
@media (min-width:960px){.head{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:3rem}.head .intro{margin:0 0 .4rem}}
.offers{display:grid;gap:1rem;margin-top:clamp(2.2rem,5vw,3.5rem)}
.offer{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.65rem;padding:1.4rem 1.3rem 1.3rem;background:var(--white);border:2px solid var(--ink);border-radius:22px;transition:transform .25s var(--ease)}
.offer h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.1}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem}
.amt{font:500 clamp(2.7rem,9vw,3.4rem)/1 var(--mono);letter-spacing:-.04em;white-space:nowrap}
.n{display:inline-block;text-align:right}
.price small{flex-basis:100%;font-size:.92rem;line-height:1.4;color:var(--muted)}
.price s{text-decoration-thickness:2px}
.pitch{font-weight:650;line-height:1.4}
.inc{list-style:none;padding:0;margin:.15rem 0 .5rem;display:grid;gap:.4rem;font-size:.95rem;line-height:1.4}
.inc li{position:relative;padding-left:1.2rem}
.inc li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.28rem;background:var(--ink)}
.offer .btn{margin-top:auto;width:100%}
.pack{--f:var(--y);background:var(--ink);color:#F2F2F2}
.pack .amt{color:var(--y);font-size:clamp(3.1rem,11vw,4.6rem)}
.pack small{color:var(--soft)}
.pack .inc li::before{background:var(--y)}
.tag{align-self:flex-start;padding:.4rem .6rem;border-radius:6px;background:var(--y);color:var(--ink);font:500 .82rem/1 var(--mono)}
.shine{position:absolute;left:0;top:0;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,10,.3),rgba(255,214,10,0));opacity:0;pointer-events:none;transition:opacity .3s}
.pack .shine{background:radial-gradient(closest-side,rgba(255,255,255,.13),rgba(255,255,255,0))}
@media (min-width:700px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}.pack{grid-column:span 2}}
@media (min-width:1080px){
  .offers{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .pack{grid-column:auto}
  .wide{grid-column:span 2}
  .wide .inc{display:block;columns:2;column-gap:2rem}
  .wide .inc li{break-inside:avoid;margin-bottom:.4rem}
}
.more{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1rem}
@media (min-width:900px){.more{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.fold{background:var(--white);border:2px solid var(--ink);border-radius:18px}
.opts{list-style:none;padding:0 1.2rem 1.2rem;display:grid;gap:.55rem;font-size:.95rem;line-height:1.45}
.m{font-family:var(--mono);font-weight:500;overflow-wrap:break-word}

/* Accordéons (options, bon à savoir, FAQ) */
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:58px;padding:1rem 1.2rem;cursor:pointer;list-style:none;font:700 1.12rem/1.3 var(--d);letter-spacing:-.01em;border-radius:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline-offset:-3px}
.acc summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .35s var(--ease)}
.acc[open] summary::after{transform:rotate(135deg)}
.motion .acc[open]>:not(summary){animation:fin .45s var(--ease) both}
.faq .acc{border-top:1px solid var(--rule)}
.faq .acc:last-child{border-bottom:1px solid var(--rule)}
.faq summary{padding-inline:0;font-size:clamp(1.15rem,2.2vw,1.4rem)}
.faq p{padding:0 2rem 1.3rem 0;color:var(--soft);max-width:56ch}

/* Deux colonnes, titre collant */
.two{display:grid;gap:2.5rem}
@media (min-width:960px){.two{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}.stick{position:sticky;top:calc(var(--hh) + 2rem);align-self:start}}

/* Étapes : trait SVG dessiné au défilement */
.steps-w{position:relative}
.steps-w::before,.sline{position:absolute;left:calc(1.15rem - 1px);top:.9rem;width:2px;height:calc(100% - 1.8rem)}
.steps-w::before{content:"";background:var(--rule)}
.sline{overflow:visible}
.sline line{stroke:var(--y);stroke-width:2;stroke-dasharray:1}
.io .sline line{stroke-dashoffset:1}
.steps{list-style:none;padding:0;display:grid;gap:2.4rem;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:3.6rem}
.steps li::before{content:counter(st);position:absolute;left:0;top:-.1rem;width:2.3rem;height:2.3rem;border:2px solid var(--y);border-radius:50%;background:var(--ink);color:var(--y);font:500 1rem/2.05rem var(--mono);text-align:center}
.steps h3{font-size:clamp(1.35rem,3vw,1.95rem);line-height:1.1;margin-bottom:.45rem}
.steps p{color:var(--soft);max-width:42ch}

/* À propos */
.about{display:grid;gap:2rem}
.about img{width:clamp(130px,30vw,260px);height:auto}
.bio{margin-top:1.4rem;font-size:clamp(1.12rem,2vw,1.4rem);line-height:1.55;max-width:42ch}
@media (min-width:860px){.about{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:4rem;align-items:start}.about img{justify-self:end;transform:rotate(-6deg)}}

/* Contact */
.xl{font-size:clamp(2.6rem,9.5vw,7.4rem);max-width:13ch}
.cbtns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.cbtns .btn{min-height:56px;padding-inline:1.5rem;font-size:1.05rem}

/* Pied de page */
.foot{--f:var(--y);background:var(--ink);color:var(--soft);padding:3.5rem 0 2.5rem;font-size:.95rem;margin-top:-1px}
.foot .wrap{display:grid;gap:1rem}
.foot img{width:44px;height:44px;border-radius:10px}
.foot a{color:var(--y)}
.foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot a{display:inline-flex;align-items:center;min-height:44px}

/* Barre d'action mobile */
.bar{display:none}
@media (max-width:767px){
  .js .bar{--f:var(--y);display:grid;grid-template-columns:1fr 1.6fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .js .bar.show{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .bar .btn-y{border-color:var(--y)}
  .js .foot{padding-bottom:calc(2.5rem + 80px)}
}

/* Dialogue : feuille du bas sur mobile, fenêtre centrée sur desktop */
.dlg{width:100%;max-width:none;max-height:none;margin:auto auto 0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.dlg::backdrop{background:rgba(13,13,13,.62)}
.dlg-in{position:relative;max-height:92svh;overflow:auto;overscroll-behavior:contain}
.dlg .fcard{border-width:2px 0 0;border-radius:24px 24px 0 0;box-shadow:none;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom))}
.dlg .ft{padding-right:3rem}
.x{position:absolute;z-index:2;top:.7rem;right:.7rem;width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer}
.x path{stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.motion .dlg[open]{animation:sheet .42s var(--ease)}
.motion .dlg[open]::backdrop{animation:fade .3s ease}
@keyframes sheet{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@media (min-width:768px){
  .dlg{width:min(100% - 2rem,470px);margin:auto}
  .dlg-in{padding:0 10px 10px 0}
  .dlg .fcard{border-width:2px;border-radius:22px;box-shadow:10px 10px 0 var(--y);padding-bottom:1.6rem}
  .x{right:calc(.7rem + 10px)}
  .motion .dlg[open]{animation-name:rise-in}
}
@keyframes rise-in{from{opacity:0;transform:translateY(24px) scale(.97)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}