@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-700.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--sapin:#1E3B2C;--fond:#F5F2EC;--pilule:#E9E4DA;--pilule2:#DED7CA;--carte:#FCFAF6;--rouge:#D93A26;--rouge-t:#B8301E;--jaune:#F2C230;--mousse:#4D5E53;--gris:#5F6862;--trait:#E2DCD0;--bord:#8F887B;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
 /* Sans animation, le col doit rester visible (il entre en fondu depuis opacity:0) et la balise aussi. */
 .scene img{opacity:1!important;transform:none!important}.scene .point{opacity:.8!important}}
body{margin:0;background:var(--fond);color:var(--sapin);font:400 15px/1.5 "Atkinson",system-ui,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0;font-weight:400}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.pt{display:inline-block;width:.62em;height:.24em;border-radius:.12em;background:var(--rouge);margin-left:.12em;vertical-align:.08em}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--pilule);border:0;border-radius:40px;padding:7px 13px;font-size:13px;line-height:1.2;text-decoration:none;color:var(--sapin);white-space:nowrap;cursor:pointer;transition:background .15s}
a.pill:hover,button.pill:hover{background:var(--pilule2)}
.pill.dark{background:var(--sapin);color:var(--fond)}.pill.dark:hover{background:#2a4d3b}
.muted{color:var(--gris)}

/* Barre du haut : le logo seul à gauche, les liens groupés dans une pilule, collante et floutée */
.top{position:sticky;top:0;z-index:20;background:rgba(245,242,236,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .2s}
.top.scrolled{box-shadow:0 1px 0 var(--trait)}
.nav{display:flex;align-items:center;gap:10px;height:72px}
.nav .brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:var(--sapin)}
.nav .brand svg{display:block}
.nav .brand .nom{font-size:13px;color:var(--gris);padding-left:12px;border-left:1px solid var(--trait);line-height:1.2}
.navgroup{display:flex;gap:2px;background:var(--pilule);border-radius:40px;padding:4px}
.navgroup a{padding:7px 13px;border-radius:40px;font-size:13.5px;text-decoration:none;color:var(--sapin);transition:background .15s}
.navgroup a:hover{background:var(--carte)}
.nav .pill{padding:9px 15px;font-size:13.5px}
@media (max-width:900px){.navgroup,.nav .brand .nom{display:none}}
@media (max-width:760px){.nav{height:64px}}

/* Accroche */
.hero{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-top:9vh;padding-bottom:6vh;align-items:start;min-height:62vh}

/* Le col (image Higgsfield, 2K) derrière l'accroche : profondeur à la souris, lumière qui suit le curseur,
   brume qui dérive, drapeau cliquable. La conversation remonte par-dessus le bas de la scène. */
.accroche{position:relative;overflow:hidden}
.accroche .hero{pointer-events:none}.accroche .hero h1,.accroche .hero p{pointer-events:auto}
.accroche + .chat{position:relative;z-index:2;margin-top:-13vh}
.scene{position:absolute;inset:0;z-index:0;perspective:1400px;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 56%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.8) 68%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.09) 92%,rgba(0,0,0,.02) 97%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 56%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.8) 68%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.09) 92%,rgba(0,0,0,.02) 97%,transparent 100%)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,rgba(245,242,236,0) 0,rgba(245,242,236,.25) 35%,rgba(245,242,236,.7) 72%,var(--fond) 100%);pointer-events:none}
.scene .couche{position:absolute;inset:3% -5% -14% -5%;transform:translate3d(calc(var(--px,0) * 1px),calc((var(--py,0) + var(--sy,0)) * 1px),0) rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg)) scale(1.02);will-change:transform}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;transform:scale(1.07);animation:col-entre 2.4s cubic-bezier(.2,.7,.2,1) .1s forwards}
.scene .lumiere{position:absolute;inset:0;background:radial-gradient(300px circle at var(--lx,50%) var(--ly,45%),rgba(255,253,248,.55),rgba(255,253,248,0) 70%);mix-blend-mode:soft-light;opacity:var(--lo,0);transition:opacity .5s}
.scene .drapeau{position:absolute;left:50%;top:55%;width:48px;height:48px;margin:-30px 0 0 -24px;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;border-radius:50%}
.scene .point{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(217,58,38,.6);opacity:0;animation:col-point 3.6s ease-out 2.6s 1}
.scene .drapeau:hover .point,.scene .drapeau:focus-visible .point{animation-duration:1.4s;animation-delay:0s;animation-iteration-count:infinite}
.scene .drapeau.trouve .point{animation:col-trouve .9s ease-out 1}
@keyframes col-trouve{0%{opacity:1;transform:scale(.6);box-shadow:0 0 0 2px var(--rouge)}100%{opacity:0;transform:scale(6);box-shadow:0 0 0 1px var(--rouge)}}
.scene .bulle-col{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,4px);white-space:nowrap;background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:7px 11px;font-size:12.5px;color:var(--sapin);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.scene .drapeau:hover .bulle-col,.scene .drapeau:focus-visible .bulle-col{opacity:1;transform:translate(-50%,0)}
.brume{position:absolute;left:-30%;right:-30%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,242,236,.7),rgba(245,242,236,0));filter:blur(6px);transform:translateX(calc(var(--bx,0) * 1%))}
/* WCAG 2.2.2 : la brume glisse à l'arrivée (moins de 5 s), puis ne bouge plus qu'avec la souris (--bx). translate : pas de calcul de mise en page. */
.brume.b1{top:52%;animation:brume 4.5s cubic-bezier(.2,.7,.2,1) .3s 1 both}
.brume.b2{top:66%;height:18%;animation:brume 4.5s cubic-bezier(.2,.7,.2,1) .3s 1 reverse both;opacity:.75}
@keyframes col-entre{to{opacity:1;transform:scale(1)}}
@keyframes col-point{0%{opacity:0;transform:scale(.6)}20%{opacity:1}100%{opacity:0;transform:scale(3.2)}}
@keyframes brume{from{translate:-5% 0}to{translate:0 0}}
.hero h1,.hero p{font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.025em}
.hero h1 .nom{display:block;font-size:clamp(48px,6.4vw,92px);line-height:.98;letter-spacing:-.04em;margin-bottom:10px}
.hero p{color:var(--rouge)}
.lhero{padding-top:11vh;padding-bottom:7vh}
.lhero .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.lhero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.03em;max-width:1000px}
.lhero p{font-size:clamp(17px,1.5vw,20px);color:var(--gris);max-width:680px;margin-top:22px;line-height:1.45}

/* Conversation */
.chat{max-width:780px;margin:0 auto;padding-bottom:12vh;scroll-margin-top:84px}
.thread{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:22px}
.thread:empty{display:none}
.m{display:grid;gap:12px;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.m.u{justify-self:end;max-width:80%;background:var(--pilule);border-radius:20px;padding:10px 16px;font-size:15px;word-break:break-word}
.m.a{position:relative;padding-left:36px;font-size:15.5px;line-height:1.55;min-height:22px}
.m.a>.av{position:absolute;left:0;top:5px;width:22px;height:14px;background:var(--rouge);clip-path:polygon(0 0,34% 0,50% 40%,66% 0,100% 0,100% 100%,0 100%)}
.m.a .wait{color:var(--gris)}
.m.a .wait:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.m.a .t{font-family:var(--mono);font-size:12px;color:var(--gris);margin-left:6px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14px}
.checks li{display:flex;gap:10px}.checks li:before{content:"✓";color:var(--sapin);width:14px;flex:none}
.checks li.ko{color:var(--mousse)}.checks li.ko:before{content:"✕";color:var(--rouge)}
.caps{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px;align-items:end}
.caps img{display:block;width:100%;height:auto;border-radius:10px;background:#fff;border:1px solid var(--trait)}
.caps .ph img{aspect-ratio:390/720;object-fit:cover;object-position:top;border-radius:16px}
.score{display:flex;align-items:baseline;gap:10px}
.score b{font-weight:400;font-size:52px;line-height:1;letter-spacing:-.03em}
.score span{color:var(--gris)}
.score i{font-style:normal;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sapin);margin-left:4px}
.score.mid i{background:var(--jaune)}.score.low i{background:var(--rouge)}
.choc{font-size:20px;line-height:1.35;letter-spacing:-.01em}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list li{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--trait)}
.list .g{font-size:12px;color:var(--gris)}
.list .g:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-right:7px}
.list .MOYENNE .g:before{background:var(--jaune)}.list .BASSE .g:before{background:var(--pilule2)}
.list p{color:var(--mousse);font-size:14.5px}
.axes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.axes li{display:grid;grid-template-columns:minmax(0,200px) 1fr 40px;gap:12px;align-items:center}
.axes .bar{height:4px;background:var(--pilule);border-radius:4px;overflow:hidden}.axes .bar i{display:block;height:100%;background:var(--sapin)}
.axes b{font-weight:400;font-family:var(--mono);font-size:12px;text-align:right;color:var(--gris)}
.dots{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dots li{padding-left:18px;position:relative}.dots li:before{content:"";position:absolute;left:0;top:.6em;width:9px;height:4px;border-radius:2px;background:var(--rouge)}
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choices .pill{font-size:14px;padding:8px 14px;background:transparent;box-shadow:inset 0 0 0 1px var(--pilule2)}
.choices .pill:hover{background:var(--pilule)}
.choices.used{opacity:.45;pointer-events:none}
.inline{display:grid;gap:8px;background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:14px}
.inline .row2{display:flex;gap:8px;flex-wrap:wrap}
.inline input,.inline textarea{flex:1;min-width:180px;border:1px solid var(--bord);background:#fff;border-radius:12px;padding:11px 13px;min-height:44px;font-size:15px}
.inline textarea{min-height:70px;resize:vertical;width:100%}
.inline .go{background:var(--sapin);color:var(--fond);border:0;border-radius:12px;padding:0 18px;min-height:44px;cursor:pointer;font-weight:700;font-size:14px}
.inline .go:disabled{opacity:.5;cursor:wait}
.inline .small{font-size:12.5px;color:var(--gris)}
.inline .small a{text-decoration:underline}
.inline .err{color:var(--rouge-t);font-size:13.5px}
/* Devis dans la conversation */
.cfg{display:grid;gap:14px}
.cfg .k{font-size:12.5px;color:var(--gris);margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none;min-width:0;width:1px;min-height:0}
.seg span{display:block;font-size:13.5px;padding:7px 13px;border-radius:40px;box-shadow:inset 0 0 0 1px var(--pilule2)}
.seg input:checked+span{background:var(--sapin);color:var(--fond);box-shadow:none}
.seg input:focus-visible+span{outline:2px solid var(--rouge);outline-offset:2px}
.rng{display:grid;grid-template-columns:110px 1fr 28px;gap:12px;align-items:center;font-size:13.5px}
.rng output{font-family:var(--mono);font-size:12.5px;text-align:right}
.rng input{min-width:0;width:100%}
input[type=range]{width:100%;accent-color:var(--sapin)}
.total{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--trait)}
.total b{font-weight:400;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.total span{color:var(--gris);font-size:14px}
.cfg details{font-size:13.5px}.cfg summary{cursor:pointer;color:var(--gris)}
.cfg details ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-family:var(--mono);font-size:12px}
.cfg details li{display:flex;justify-content:space-between;gap:10px}
.cfg details li .px{text-align:right;white-space:nowrap}.cfg details li .px .muted{display:block}
.lnk{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--mousse);font-size:13.5px;justify-self:start}
/* Zone de saisie */
.composer{position:sticky;bottom:14px;z-index:5;display:flex;align-items:flex-end;gap:8px;background:var(--carte);border:1px solid var(--bord);border-radius:28px;padding:8px 8px 8px 20px;box-shadow:0 8px 30px rgba(30,59,44,.07)}
.composer textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:16px;line-height:1.45;padding:9px 0;max-height:160px;min-height:24px}
.composer textarea::placeholder{color:var(--gris)}
.composer:focus-within{border-color:var(--sapin);box-shadow:0 0 0 1px var(--sapin),0 8px 30px rgba(30,59,44,.07)}
.send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--sapin);color:var(--fond);display:grid;place-items:center;cursor:pointer}
.send:disabled{opacity:.3;cursor:default}
.send svg{transform:rotate(-90deg)}
.sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.note{text-align:center;font-size:12.5px;color:var(--gris);margin-top:12px}
.chat.on .sugg,.chat.on .note{display:none}
.reset{display:none;justify-self:center;margin-top:14px}
.chat.on .reset{display:inline-flex}
.nojs{display:grid;gap:10px;margin-top:20px}
.nojs input,.nojs textarea{border:1px solid var(--bord);border-radius:12px;padding:11px 13px;background:#fff}

/* Flèche discrète : il y a encore des choses plus bas */
.descend{display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;margin:34px auto 0;color:var(--gris);text-decoration:none;font-size:12.5px;transition:opacity .3s}
.descend i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--pilule2);animation:descend 2.2s ease-in-out 2}
.descend:hover{color:var(--sapin)}.descend:hover i{background:var(--pilule)}
.descend.loin{opacity:0;pointer-events:none}
/* À l'arrivée, la flèche est posée en bas de l'écran (visible sans défiler) ; elle reprend sa place dès qu'on descend. */
.descend.fixe{position:fixed;left:50%;bottom:calc(14px + var(--db,0px) + env(safe-area-inset-bottom));margin:0;transform:translateX(-50%);z-index:6;flex-direction:row;gap:8px;padding:5px 6px 5px 14px;border-radius:40px;background:rgba(245,242,236,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(30,59,44,.1);animation:descend-entre .6s ease-out 1.2s both}
.descend.fixe i{width:28px;height:28px}
@keyframes descend-entre{from{opacity:0;transform:translate(-50%,8px)}}
@media (max-height:820px) and (min-width:761px){.hero{padding-top:6vh;min-height:56vh}}
@keyframes descend{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Robot d'accueil */
.hello{display:flex;align-items:flex-end;gap:14px;margin:0 auto 16px;max-width:620px}
.hello p{background:var(--carte);border:1px solid var(--trait);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:15.5px;line-height:1.45;margin-bottom:22px}
.chat.on .hello{display:none}
.m.a>.bot{position:absolute;left:-2px;top:0}
.m .later{display:none!important}
.bot.still *{animation:none!important}
.hello .bot{flex:none;cursor:default}

/* Blocs clairs */
.sec{padding-top:64px;scroll-margin-top:84px}
.sech{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
.sech h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.025em;line-height:1.08;max-width:820px}
.sech h2.pill{font-size:13px;letter-spacing:-.005em;line-height:1.2;max-width:none;cursor:default}
.blocs{display:grid;gap:12px}
.b2{grid-template-columns:repeat(2,minmax(0,1fr))}.b3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bauto{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.bloc{position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;color:var(--sapin);text-decoration:none}
a.bloc{transition:transform .2s,box-shadow .2s}
a.bloc:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(30,59,44,.08)}
.bloc .ico{width:52px;height:52px;display:block}
.bloc h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15}
.bloc p{color:var(--mousse)}
.bloc .n{font-family:var(--mono);font-size:12px;color:var(--gris)}
.bloc .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.bloc .foot .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--rouge-t)}
.bloc.small{padding:20px;gap:10px}.bloc.small .ico{width:40px;height:40px}.bloc.small p{color:var(--sapin);font-size:16px;letter-spacing:-.01em}
.exemple{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.ex-gros{padding:clamp(28px,4vw,48px);gap:18px}.ex-gros h2{font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.03em;color:var(--fond);max-width:22ch}
.ex-gros p{font-size:clamp(16px,1.3vw,18px);max-width:58ch}
.ex-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}.ex-cta .pill{font-size:15px;padding:11px 18px;background:var(--fond)!important;color:var(--sapin)!important}
.ex-lien{color:var(--fond);font-size:14px;text-underline-offset:4px}
.ex-chiffre{justify-content:center;align-items:flex-start}.ex-chiffre .chiffre{font-weight:400;font-size:clamp(72px,9vw,128px);line-height:.9;letter-spacing:-.04em;color:var(--rouge-t);margin:6px 0 0}
.ex-etapes{list-style:none;padding:0;margin:0}.ex-etapes h3{font-size:20px}
@media (max-width:900px){.exemple{grid-template-columns:1fr}}
.bloc.sapin{background:var(--sapin);border-color:var(--sapin);color:var(--fond)}.bloc.sapin p{color:#d5dcd7}.bloc.sapin .pill{background:rgba(245,242,236,.14);color:var(--fond)}
.bloc.wide{flex-direction:row;align-items:center;gap:26px}
.bloc.robot{background:#EFF0E6;border-color:#E0E3D3}
.bloc.robot .bot{align-self:flex-start}
.bloc.robot .pill{background:var(--sapin);color:var(--fond)}
.bloc .prix{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.05}
.bloc .prix .taxe{font-size:.45em;letter-spacing:0;color:var(--gris)}
.bloc p.ttc{color:var(--gris);font-size:15px;margin-top:-6px}
.bloc .foot .pill{white-space:normal}.pill .ttc{color:var(--gris)}
.note-prix{font-size:13px;color:var(--gris);margin-top:12px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:17px;letter-spacing:-.01em}
.liste.oui li{display:flex;gap:10px;align-items:flex-start}.liste.oui li img{width:24px;height:24px;flex:none;margin-top:1px}
.liste.non li{color:var(--gris);text-decoration:line-through;text-decoration-color:var(--rouge)}
.faq details{border-bottom:1px solid var(--trait);padding:14px 0}.faq details:last-child{border-bottom:0;padding-bottom:0}
.faq details:first-child{padding-top:4px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:17px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--gris)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin-top:8px;color:var(--mousse);max-width:720px}
.lcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.lcta .pill{font-size:15px;padding:12px 20px}
/* Le conteneur fixe laisse passer les clics : seuls la bulle et le panneau en reçoivent (sur téléphone, il fait toute la largeur). */
.flottant{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}.flottant>*{pointer-events:auto}
/* Pages avec la bulle : le pied de page remonte au-dessus d'elle en fin de défilement. */
body:has(.flottant) footer.bas{padding-bottom:96px}
/* Un élément atteint au clavier ne se cache pas derrière la bulle (WCAG 2.4.11). */
html:has(.flottant){scroll-padding-bottom:96px}
.bulle-tizi{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:40px;background:var(--sapin);color:var(--fond);padding:6px 18px 6px 6px;font:700 14.5px/1.2 "Atkinson",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(30,59,44,.24)}
.bulle-tizi .bot{background:var(--fond);border-radius:50%;padding:3px}.bulle-tizi:hover{background:#2a4d3b}
.flottant.ouvert .bulle-tizi{display:none}
.panneau{width:min(430px,calc(100vw - 32px));max-height:min(700px,calc(100dvh - 40px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--fond);border:1px solid var(--bord);border-radius:22px;box-shadow:0 24px 60px rgba(30,59,44,.24)}
.panneau[hidden]{display:none}
.panneau-tete{position:sticky;top:0;z-index:7;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 10px 10px 18px;background:var(--fond);border-bottom:1px solid var(--trait);font-size:13.5px;font-weight:700}
.fermer{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--pilule);color:var(--sapin);display:grid;place-items:center;cursor:pointer}.fermer:hover{background:var(--pilule2)}
.panneau .chat{max-width:none;margin:0;padding:18px 14px 14px}
.panneau .hello{margin-bottom:8px}.panneau .hello p{font-size:14.5px;margin-bottom:10px}
.panneau .sugg{justify-content:flex-start}.panneau .composer{bottom:0}
@media (max-width:760px){.flottant{right:10px;left:10px;align-items:flex-end}.panneau{width:100%;max-height:calc(100dvh - 24px)}}
footer.bas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:72px;padding-top:22px;padding-bottom:30px;border-top:1px solid var(--trait)}
footer.bas .sig{flex:1;font-size:13px;color:var(--gris);min-width:200px}
/* Pages simples et légales */
.doc{padding:8vh 0 12vh}.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;margin-bottom:10px}.doc .maj{color:var(--gris);margin-bottom:36px}
.doc h2{font-size:20px;letter-spacing:-.01em;margin:32px 0 10px}.doc p,.doc li{margin-bottom:10px;color:var(--mousse)}.doc ul{padding-left:22px}
.doc a{text-decoration:underline}.doc .todo{background:#fbefc4;padding:0 4px;border-radius:3px}
.simple{min-height:60vh;display:grid;place-items:center;text-align:center;padding:60px 24px}
.simple h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;margin-bottom:14px}.simple p{max-width:520px;margin:0 auto 24px;color:var(--gris)}
.simple .acts{display:flex;gap:6px;justify-content:center}
.simple .bot{margin-bottom:18px}

.bot{display:inline-block;line-height:0;vertical-align:middle}
.bot svg{overflow:visible;display:block}
.bot .tout{animation:bot-flotte 4s ease-in-out infinite}
.bot .tete{transform-box:view-box;transform-origin:32px 46px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.bot .yeux-ouverts,.bot .drapeau,.bot .bras-d,.bot .bras-g,.bot .b-parle,.bot .buste{transform-box:fill-box}
.bot .yeux-ouverts{transform-origin:center;transition:transform .07s}
.bot .regard{transition:transform .28s ease-out;transform:translate(calc(var(--gx,0) * 1px),calc(var(--gy,0) * 1px))}
.bot .drapeau{transform-origin:left center;animation:bot-drapeau 2.6s ease-in-out infinite}
.bot .bras-d{transform-origin:0% 50%;transition:transform .35s ease}.bot .bras-g{transform-origin:100% 50%;transition:transform .35s ease}
.bot .buste{transform-origin:50% 100%;animation:bot-souffle 4s ease-in-out infinite}
.bot .bouche>*,.bot .yeux-rieurs,.bot .yeux-plisses,.bot .bulles{display:none}
.bot .b-doux{display:inline}
.bot .lampe{opacity:0}
.bot.blink .yeux-ouverts{transform:scaleY(.12)}
.bot:not(.js) .yeux-ouverts{animation:bot-cligne 5.3s infinite}
@keyframes bot-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
@keyframes bot-souffle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
@keyframes bot-cligne{0%,91%,100%{transform:scaleY(1)}93%{transform:scaleY(.12)}95%{transform:scaleY(1)}}
@keyframes bot-drapeau{0%,100%{transform:skewY(0)}50%{transform:skewY(-9deg) scaleX(.9)}}
@keyframes bot-coucou{0%,100%{transform:rotate(-55deg)}50%{transform:rotate(-95deg)}}
@keyframes bot-parle{0%{transform:scaleY(.4)}20%{transform:scaleY(1)}38%{transform:scaleY(.6)}55%{transform:scaleY(1.05)}72%{transform:scaleY(.35)}86%{transform:scaleY(.85)}100%{transform:scaleY(.4)}}
@keyframes bot-lampe{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes bot-pointilles{to{stroke-dashoffset:-10.8}}
@keyframes bot-saute{0%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}55%{transform:translateY(0)}70%{transform:translateY(-1.5px)}}
.bot[data-mood=wave] .bras-d{animation:bot-coucou .75s ease-in-out infinite}
.bot[data-mood=wave] .tete{transform:rotate(-5deg)}
.bot[data-mood=wave] .b-doux{display:none}.bot[data-mood=wave] .b-rire{display:inline}
.bot[data-mood=talk] .b-doux{display:none}
.bot[data-mood=talk] .b-parle{display:inline;transform-origin:center;animation:bot-parle .9s ease-in-out infinite}
.bot[data-mood=think] .b-doux{display:none}.bot[data-mood=think] .b-hmm{display:inline;animation:bot-pointilles 1.2s linear infinite}
.bot[data-mood=think] .tete{transform:rotate(6deg)}
.bot[data-mood=think] .regard{transform:translate(2.6px,-2.6px)}
.bot[data-mood=think] .bras-g{transform:rotate(55deg)}
.bot[data-mood=think] .bulles{display:inline}
.bot[data-mood=think] .lampe{animation:bot-lampe 1s ease-in-out infinite}
.bot[data-mood=happy] .tout{animation:bot-saute 1s ease-in-out 2}
.bot[data-mood=happy] .regard{display:none}.bot[data-mood=happy] .yeux-rieurs{display:inline}
.bot[data-mood=happy] .b-doux{display:none}.bot[data-mood=happy] .b-rire{display:inline}
.bot[data-mood=happy] .bras-d{transform:rotate(-40deg)}.bot[data-mood=happy] .bras-g{transform:rotate(40deg)}
.bot[data-mood=oops] .regard{display:none}.bot[data-mood=oops] .yeux-plisses{display:inline}
.bot[data-mood=oops] .b-doux{display:none}.bot[data-mood=oops] .b-oups{display:inline}
.bot[data-mood=oops] .tete{transform:rotate(-7deg)}
.bot[data-mood=oops] .bras-d{transform:rotate(-62deg)}
@media (prefers-reduced-motion:reduce){.bot *{animation:none!important;transition:none!important}}
/* WCAG 2.2.2 : les robots ne bougent pas sans fin. Un cycle à l'arrivée (moins de 5 s), puis ils reprennent au survol ou au focus. */
.bot .tout,.bot .buste,.bot .drapeau{animation-iteration-count:1}
.bot:is([data-mood=idle],[data-mood=wave],[data-mood=talk]):hover :is(.tout,.buste,.drapeau),.bloc:hover .bot:not([data-mood=happy]) :is(.tout,.buste,.drapeau),.bulle-tizi:is(:hover,:focus-visible) .bot :is(.tout,.buste,.drapeau){animation-iteration-count:infinite}

/* ---------- Vie des pages : apparitions, survols, scènes ---------- */
/* Apparition à l'entrée dans l'écran (classe posée par le script, jamais sans lui ni en mouvement réduit). */
.rv-att{opacity:0;transform:translateY(22px)}
.rv-att:focus-within{opacity:1;transform:none}
.rv-entre{transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 80ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 80ms)!important}
@media print{.rv-att{opacity:1;transform:none}}
/* Petite lueur qui suit la souris dans les cartes. */
.lueur{background-image:radial-gradient(280px circle at var(--cx,50%) var(--cy,50%),rgba(217,58,38,.075),rgba(217,58,38,0) 65%);background-size:0 0;background-repeat:no-repeat}
.lueur:hover{background-size:100% 100%}
/* Cartes d'offre de l'accueil : la balise glisse le long du bord, la flèche avance, l'emoji salue. */
#offres a.bloc{overflow:hidden}
#offres a.bloc::before{content:"";position:absolute;top:0;left:26px;width:26px;height:6px;border-radius:0 0 3px 3px;background:var(--rouge);transition:left .55s cubic-bezier(.3,.9,.3,1),width .55s cubic-bezier(.3,.9,.3,1)}
#offres a.bloc:is(:hover,:focus-visible)::before{left:calc(100% - 66px);width:40px}
#offres a.bloc:is(:hover,:focus-visible){border-color:var(--pilule2)}
.bloc .ico{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
a.bloc:is(:hover,:focus-visible) .ico,.bloc.small:hover .ico{transform:rotate(-7deg) scale(1.08)}
.bloc .foot .go svg{transition:transform .25s}
a.bloc:is(:hover,:focus-visible) .go svg{transform:translateX(5px)}
.bloc.small{transition:border-color .2s,transform .25s,box-shadow .25s}
.bloc.small:hover{border-color:var(--pilule2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(30,59,44,.06)}
.lcta .pill svg,.bloc .pill svg{transition:transform .25s}
.lcta .pill:hover svg,.bloc .pill:hover svg{transform:translateX(4px)}

/* En-tête des pages d'offre : le texte à gauche, la scène à droite. */
.lhero.a-scene{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px 44px;align-items:center;padding-top:6vh;padding-bottom:2vh}
.lhero.a-scene h1{font-size:clamp(32px,3.7vw,54px)}
.scene-offre{position:relative;aspect-ratio:4/3;width:100%;max-width:640px;justify-self:end;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);mask-composite:intersect}
.scene-offre svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene-offre .photo{position:absolute;inset:-4%;transform:translate3d(calc(var(--mx,0) * -6px),calc(var(--my,0) * -4px + var(--sy,0) * .12px),0)}
.scene-offre .photo img{width:100%;height:100%;object-fit:cover;display:block}
.scene-offre .plan{transform:translate(calc(var(--mx,0) * var(--d) * -14px),calc(var(--my,0) * var(--d) * -8px + var(--sy,0) * var(--s) * 1px))}
.scene-offre .lumiere{position:absolute;inset:0;background:radial-gradient(240px circle at var(--lx,50%) var(--ly,40%),rgba(255,253,248,.6),rgba(255,253,248,0) 70%);mix-blend-mode:soft-light;opacity:var(--lo,0);transition:opacity .5s;pointer-events:none}
/* Le sentier : dessiné en entier par défaut ; le script en règle la longueur au défilement. */
.balise .halo{opacity:0;transform-box:fill-box;transform-origin:center}
.balise .marque{transition:opacity .45s}
.balise.eteinte .marque{opacity:.28}
.balise.allumee .halo{animation:balise-halo 1s ease-out 1}
@keyframes balise-halo{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.fanion .toile,.commun .toile{transform-box:fill-box;transform-origin:left center;animation:fanion 2.4s ease-in-out .4s 2}
.scene-offre:hover .fanion .toile{animation-iteration-count:infinite}
@keyframes fanion{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-10deg) scaleX(.86)}}
/* Les détails : chaque scène joue une courte démo à l'arrivée, puis reste posée (rien ne boucle sans fin). */
.scene-offre .det{transform-box:fill-box;animation:det-entre 1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes det-entre{from{opacity:0;transform:translateY(14px)}}
.scene-offre .l{transform-box:fill-box;transform-origin:left center;animation:pousse .7s cubic-bezier(.2,.8,.2,1) both}
.scene-offre .a1{animation-delay:.6s}.scene-offre .a2{animation-delay:.75s}.scene-offre .a3{animation-delay:.85s}.scene-offre .a4{animation-delay:1s}.scene-offre .a5{animation-delay:1.1s}.scene-offre .a6{animation-delay:1.2s}.scene-offre .a7{animation-delay:1.28s}.scene-offre .a8{animation-delay:1.36s}
@keyframes pousse{from{opacity:0;transform:scaleX(0)}}
.scene-offre .trait{stroke-dasharray:1 1;animation:trace .9s ease-out both}
@keyframes trace{from{stroke-dashoffset:1}}
.so-site .curseur{animation:curseur 1.3s cubic-bezier(.5,0,.2,1) 1.5s both}
@keyframes curseur{0%{opacity:0;transform:translate(80px,46px)}25%{opacity:1}}
.so-site .clic{opacity:0;transform-box:fill-box;transform-origin:center;animation:clic .7s ease-out 2.8s 1}
@keyframes clic{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.so-site .cta{animation:pousse .7s cubic-bezier(.2,.8,.2,1) 1s both,presse .25s ease 2.8s 1}
@keyframes presse{50%{transform:scale(.94)}}
.so-site .badge,.so-commercial .client{transform-box:fill-box;transform-origin:center}
.so-site .badge>*,.so-commercial .client>*{transform-box:fill-box;transform-origin:center}
.so-site .badge{animation:pop .55s cubic-bezier(.3,1.6,.5,1) 3s both}
.so-site .badge .onde,.so-commercial .client .onde{opacity:0;animation:onde 1.1s ease-out 3.2s 2}
@keyframes pop{from{opacity:0;transform:scale(0)}}
@keyframes onde{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.so-maquette .t1{animation-delay:.7s}.so-maquette .t2{animation-delay:1.3s}.so-maquette .t3{animation-delay:1.8s}
.so-maquette .crayon{animation:crayon 2s cubic-bezier(.4,0,.3,1) .6s both}
@keyframes crayon{0%{opacity:0;transform:translate(-56px,-24px)}10%{opacity:1;transform:translate(-56px,-24px)}35%{transform:translate(0,-24px)}45%{transform:translate(-56px,-10px)}70%{transform:translate(-14px,-10px)}78%{transform:translate(-56px,0)}100%{transform:translate(0,0)}}
.so-maquette .noeud{transform-box:fill-box;transform-origin:center;animation:pop .6s cubic-bezier(.3,1.6,.5,1) 2.7s both}
.so-outils .barre{transform-box:fill-box;transform-origin:center bottom;animation:barre .8s cubic-bezier(.2,.8,.2,1) both}
.so-outils .b1{animation-delay:.7s}.so-outils .b2{animation-delay:.8s}.so-outils .b3{animation-delay:.9s}.so-outils .b4{animation-delay:1s}.so-outils .b5{animation-delay:1.1s}.so-outils .b6{animation-delay:1.2s}
@keyframes barre{from{transform:scaleY(0)}}
.so-outils .courbe{animation-delay:1.6s;animation-duration:1.1s}
.so-outils .point-fin{transform-box:fill-box;transform-origin:center;animation:pop .4s ease-out 2.6s both}
.so-outils .bouton{animation:bascule .5s cubic-bezier(.3,1.4,.5,1) 2.2s both}
.so-outils .rail{animation:rail .5s ease 2.2s both}
@keyframes bascule{from{transform:translateX(-16px)}}
@keyframes rail{from{fill:#DED7CA}}
.so-communication .bul{transform-box:fill-box;transform-origin:20% 100%}
.so-communication .b1{animation:bulle .6s cubic-bezier(.3,1.5,.5,1) .6s both}
.so-communication .b2{animation:bulle .6s cubic-bezier(.3,1.5,.5,1) 1.3s both}
.so-communication .b3{animation:bulle .6s cubic-bezier(.3,1.5,.5,1) 2s both}
@keyframes bulle{from{opacity:0;transform:scale(.5) translateY(12px)}}
.so-communication .tape{animation:tape 1s ease-in-out 2.4s 3}
.so-communication .p2{animation-delay:2.55s}.so-communication .p3{animation-delay:2.7s}
@keyframes tape{0%,60%,100%{opacity:1}30%{opacity:.25}}
.so-communication .monte{opacity:0;transform-box:fill-box;animation:monte 2.2s ease-out 2s 1}
.so-communication .m2{animation-delay:2.4s}.so-communication .m3{animation-delay:2.8s}
@keyframes monte{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(10px,-60px)}}
.so-commercial .goutte{animation:goutte .8s cubic-bezier(.5,0,.6,1.3) both}
.so-commercial .g1{animation-delay:.6s}.so-commercial .g2{animation-delay:.72s}.so-commercial .g3{animation-delay:.84s}.so-commercial .g4{animation-delay:.96s}.so-commercial .g5{animation-delay:1.08s}.so-commercial .g6{animation-delay:1.35s;animation-duration:1s}.so-commercial .g7{animation-delay:1.5s;animation-duration:1s}.so-commercial .g8{animation-delay:1.8s;animation-duration:1.2s}
@keyframes goutte{from{opacity:0;transform:translateY(-48px)}}
.so-commercial .client{animation:client .7s cubic-bezier(.4,0,.3,1.4) 2.8s both}
.so-commercial .client .onde{animation-delay:3.4s}
@keyframes client{from{opacity:0;transform:translateY(-58px) scale(.5)}}
/* Fusion : les deux cercles se rapprochent au défilement (--k, de 0 à 1, posé par le script ; 1 sans lui). */
.so-fusion .ca{transform:translateX(calc((1 - var(--k,1)) * -26px))}
.so-fusion .cb{transform:translateX(calc((1 - var(--k,1)) * 26px))}
.so-fusion .commun{opacity:calc(var(--k,1) * 1.6 - .5)}
/* Méthode : un sentier à trois balises au-dessus des étapes ; elles s'allument l'une après l'autre. */
.bande-methode{position:relative;margin:-6px 0 4px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 100%);mask-composite:intersect}
.bande-methode.a-image{border-radius:22px;overflow:hidden;-webkit-mask-image:none;mask-image:none;margin-bottom:14px}
.bande-methode.joue .trace-m{stroke-dasharray:1 1;animation:trace 2.2s cubic-bezier(.45,0,.4,1) .2s both}
.bande-methode.joue .fanion{transform-box:fill-box;transform-origin:center bottom;animation:pop .5s cubic-bezier(.3,1.6,.5,1) 2.3s both}
.bande-methode svg{display:block;width:100%;height:auto}
.bande-methode.a-image svg{position:relative}
.bande-methode img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bande-methode.joue .marque{animation:allume .5s ease-out both}
.bande-methode.joue .halo{animation:balise-halo 1s ease-out both}
.bande-methode.joue .bm1 .marque,.bande-methode.joue .bm1 .halo{animation-delay:.65s}
.bande-methode.joue .bm2 .marque,.bande-methode.joue .bm2 .halo{animation-delay:1.3s}
.bande-methode.joue .bm3 .marque,.bande-methode.joue .bm3 .halo{animation-delay:1.95s}
@keyframes allume{from{opacity:.14}}
@media (max-width:760px){.bande-methode{display:none}}
/* Le sentier qui accompagne le défilement, dans la marge de gauche (grands écrans). */
.fil{display:none}
@media (min-width:1360px) and (prefers-reduced-motion:no-preference){
 .anime .fil{display:block;position:fixed;z-index:3;top:110px;bottom:48px;left:max(14px,calc((100vw - 1240px) / 2 - 26px));width:14px;pointer-events:none;background:repeating-linear-gradient(to bottom,var(--pilule2) 0 5px,transparent 5px 12px) center/2px 100% no-repeat}
 .fil-fait{position:absolute;left:6px;top:0;width:2px;height:calc(var(--p,0) * 100%);background:repeating-linear-gradient(to bottom,var(--sapin) 0 5px,transparent 5px 12px)}
 .fil-reperes i{position:absolute;left:4px;width:6px;height:6px;border-radius:50%;background:var(--fond);box-shadow:inset 0 0 0 1.5px var(--pilule2);transition:background .3s,box-shadow .3s}
 .fil-reperes i.passe{background:var(--sapin);box-shadow:none}
 .fil-balise{position:absolute;left:0;top:calc(var(--p,0) * 100%);width:14px;height:10px;margin-top:-5px;border-radius:1.5px;background:linear-gradient(to bottom,#FFFDF8 0 50%,var(--rouge) 50%);box-shadow:0 0 0 1px var(--pilule2),0 3px 8px rgba(30,59,44,.15)}
 .fil-col{position:absolute;left:6px;bottom:-14px;width:2px;height:16px;background:var(--sapin)}
 .fil-col::after{content:"";position:absolute;left:2px;top:0;width:11px;height:8px;background:var(--rouge);clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
}

@media (max-width:980px){
 .b3{grid-template-columns:1fr 1fr}
 .lhero.a-scene{grid-template-columns:1fr}
 .scene-offre{justify-self:center;max-width:560px;margin-top:-8px}
}
@media (max-width:760px){
 .wrap{padding-left:16px;padding-right:16px}
 .hero{grid-template-columns:1fr;gap:10px;padding-top:7vh;padding-bottom:0;min-height:0}
 .accroche + .chat{margin-top:0}
 .hero h1{font-size:26px}.hero h1 .nom{font-size:44px}.hero p{font-size:21px;line-height:1.2;color:var(--rouge-t)}
 .sugg{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:14px -16px 0;padding:0 16px 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 24px),transparent 100%)}
 .sugg::-webkit-scrollbar{display:none}
 .sugg .pill{flex:none}
 .scene{position:relative;inset:auto;height:50vw;min-height:180px;margin-top:-3vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 56%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.8) 68%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.09) 92%,rgba(0,0,0,.02) 97%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 56%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.8) 68%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.09) 92%,rgba(0,0,0,.02) 97%,transparent 100%)}
 .b2,.b3{grid-template-columns:1fr}
 .bloc{padding:22px}
 .bloc.wide{flex-direction:column;align-items:flex-start}
 .sec{padding-top:48px}
 .caps{grid-template-columns:minmax(0,1fr) 92px}
 .axes li{grid-template-columns:minmax(0,1fr) 70px 34px}
 .m.u{max-width:90%}
 .rng{grid-template-columns:90px 1fr 24px}
 .composer{bottom:10px}
}