/* Upward — version Studio. Une chose par écran. Fond gris, noir, blanc. La couleur vit dans les photos et les démos. */
:root{--bg:#efefef;--ink:#121214;--soft:#5f5f66;--mut:#9a9aa2;--pill:#fff;--line:rgba(18,18,20,.1);--v:#6d78ff;
--f:"Outfit",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--r:32px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--f);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-size:17px;line-height:1.45}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}b,strong{font-weight:500}
::selection{background:rgba(109,120,255,.22)}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:40px}

/* ---- navigation : tuile noire, pastilles blanches ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:18px 0}
.nav::before{content:"";position:absolute;inset:0 -40px;background:var(--bg);pointer-events:none;z-index:-1}
.nav::after{content:"";position:absolute;left:-40px;right:-40px;top:100%;height:26px;background:linear-gradient(var(--bg),rgba(239,239,239,0));pointer-events:none;z-index:-1}
.tile{width:54px;height:54px;border-radius:17px;display:block;flex:none}
.tile svg{width:100%;height:100%;display:block}
.pills{display:flex;gap:8px;margin-left:4px}
.pill{display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 24px;border-radius:100px;background:var(--pill);font-size:15.5px;font-weight:400;transition:transform .35s var(--ease),background .3s}
.pill:hover{transform:translateY(-2px)}
.pill.line{background:transparent;border:1px solid var(--ink)}
.pill.ink{background:var(--ink);color:#fff}
.nav .lang{margin-left:auto}.lang[hidden]{display:none}
.lang{display:flex;align-items:center;gap:3px;height:54px;padding:0 6px;border-radius:100px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 12px 30px -22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.lang a{position:relative;overflow:hidden;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--soft);background:rgba(18,18,20,.06);transition:width .45s var(--ease),height .45s var(--ease),background .35s,color .35s,font-size .45s var(--ease)}
.lang a:hover{background:rgba(18,18,20,.12);color:var(--ink)}
.lang a.on{width:42px;height:42px;background:var(--ink);color:#fff;font-size:12.5px}
.burger{display:none;width:54px;height:54px;border-radius:50%;background:var(--pill);place-items:center}
.burger{transition:transform .5s var(--ease)}.burger:active{transform:scale(.92)}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);transition:transform .5s var(--ease),top .3s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
html.menu-open .burger i{background:transparent}
html.menu-open .burger i::before{top:0;transform:rotate(45deg)}
html.menu-open .burger i::after{top:0;transform:rotate(-45deg)}

/* ---- hero : une phrase, puis un seul objet ---- */
.hero{padding:70px 0 40px}
.hello .hw{display:inline-grid;vertical-align:top;transition:width .55s var(--ease);white-space:nowrap}.hello .hw span{grid-area:1/1;transition:opacity .45s,filter .45s,transform .6s var(--ease)}
.hello .hw span.out{opacity:0;filter:blur(6px);transform:translateY(-8px)}.hello .hw span.pre{opacity:0;filter:blur(6px);transform:translateY(8px);transition:none}
.hello .hm{position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none}
.hello .up{position:relative;display:inline-grid;place-items:center;width:.7em;height:.7em;margin-left:.16em;border-radius:.16em;color:var(--ink);vertical-align:.04em}
.hello .up i{grid-area:1/1;font-style:normal;font-size:.62em;line-height:1;font-weight:300;will-change:transform;animation:diag 2.4s cubic-bezier(.45,0,.2,1) infinite}
.hello .up i:nth-child(2){display:none}
@keyframes diag{0%{transform:translate(-55%,55%);opacity:0}18%{opacity:1}50%{transform:translate(0,0)}82%{opacity:1}100%{transform:translate(55%,-55%);opacity:0}}
html[data-arrow="square"] .hello .up{width:.62em;height:.62em;margin-left:.22em;background:var(--ink);color:#fff;overflow:hidden;vertical-align:.08em}
html[data-arrow="square"] .hello .up i{font-size:.42em;font-weight:400;animation:upA 2.6s cubic-bezier(.6,0,.2,1) infinite}
html[data-arrow="square"] .hello .up i:nth-child(2){display:block;animation-name:upB}
@keyframes upA{0%,40%{transform:translate(0,0)}60%,100%{transform:translate(110%,-110%)}}
@keyframes upB{0%,40%{transform:translate(-110%,110%)}60%,100%{transform:translate(0,0)}}
.hello{font-weight:300;font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--mut)}
.hero h1{font-weight:300;font-size:clamp(40px,5.4vw,84px);line-height:1.04;letter-spacing:-.03em;max-width:19ch;margin-top:10px}
.hero h1 b{font-weight:500;color:var(--ink)}
.object{position:relative;margin-top:60px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.4;background:#dcdcdc}
.object img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.object.in img{transform:none}
.gcard{position:absolute;left:28px;bottom:28px;display:flex;align-items:center;gap:22px;padding:18px 18px 18px 24px;border-radius:24px;
background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(255,255,255,.45),0 30px 60px -36px rgba(0,0,0,.45)}
.gcard b{display:block;font-weight:500;font-size:19px;letter-spacing:-.01em}
.gcard span{display:block;font-size:14.5px;color:rgba(18,18,20,.72);margin-top:3px}
.go{position:relative;width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.75);transition:transform .4s var(--ease);font-weight:300;overflow:hidden}
.gcard .go{display:grid;font-size:20px;color:var(--ink);margin:0}
.go::before,.go::after{content:"↗";grid-area:1/1;transition:transform .5s var(--ease),opacity .4s}
.go::after{transform:translate(-120%,120%);opacity:0}
.gcard:hover .go::before,.case:hover .go::before,.svc:hover .go::before{transform:translate(120%,-120%);opacity:0}
.gcard:hover .go::after,.case:hover .go::after,.svc:hover .go::after{transform:none;opacity:1}
/* chaque bouton répond au doigt : une onde */
.pill,.rail button,.dchips button,.dtypes button,.arrows button,.burger,.lb-x,.dstat,.ar,.dgo,.dreal{position:relative;overflow:hidden}
.arw{display:inline-block;transition:transform .45s var(--ease);font-style:normal}
.pill:hover .arw,.dgo:hover .arw,.dreal:hover .arw{transform:translate(2px,-2px)}
.rp{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);pointer-events:none;animation:rp .75s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes rp{to{transform:scale(1);opacity:0}}

/* ---- phrase de confiance avec pastilles ---- */
.trust{padding:70px 0 20px;font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.5;letter-spacing:-.015em;max-width:30ch}
.trust b{font-weight:500}
.who{display:inline-flex;align-items:center;gap:10px;vertical-align:middle;background:var(--pill);border-radius:100px;padding:6px 18px 6px 10px;margin:0 4px;font-size:.62em;font-weight:500;line-height:1}
.who i{width:28px;height:28px;border-radius:50%;flex:none}
.who i{background:var(--ink)}

/* ---- question géante avec photo incrustée ---- */
.ask{padding:120px 0 0}
.ask h2{font-weight:300;font-size:clamp(44px,7.4vw,112px);line-height:1;letter-spacing:-.035em;max-width:13ch}
.ask h2 b{font-weight:500}
.ask h2 .mark{color:var(--mut);font-weight:300;margin-right:.1em}
.rot{display:inline-block;position:relative;vertical-align:bottom;height:1.08em;line-height:1.08em;clip-path:inset(-.12em -.25em);transition:width .55s cubic-bezier(.22,1,.36,1);white-space:nowrap;text-align:left}
.rot i{display:inline-block;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--ink);will-change:transform,filter;padding-right:.06em}
.rot i.out{animation:rOut .3s cubic-bezier(.5,0,.9,.4) forwards}.rot i.in{animation:rIn .5s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes rOut{to{transform:translateY(-110%) scaleY(1.25);opacity:0;filter:blur(6px)}}@keyframes rIn{from{transform:translateY(110%) scaleY(1.25);opacity:0;filter:blur(6px)}60%{filter:blur(0)}to{transform:none;opacity:1;filter:none}}
.rotm{position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none}
.ask h2 .ph{display:inline-block;vertical-align:middle;width:1.3em;height:.86em;border-radius:.3em;overflow:hidden;margin:0 .12em;transform:translateY(-.06em)}
.ask h2 .ph img{width:100%;height:100%;object-fit:cover}
/* bulle de parole : une personne qui parle, pas un paragraphe */
.say{display:flex;align-items:center;gap:18px;margin:56px 0 0;max-width:720px;padding:18px 28px 18px 18px;border-radius:40px;background:var(--pill)}
.say .tile{width:64px;height:64px;border-radius:50%;overflow:hidden}
.say p{font-weight:300;font-size:clamp(18px,1.6vw,23px);line-height:1.35}
.say p b{font-weight:500}

/* ---- cases : une démo à la fois ---- */
.cases{margin:36px -40px 0;padding:6px 40px 14px;scroll-padding-inline:40px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cases::-webkit-scrollbar{display:none}
.case{flex:0 0 min(960px,82%);scroll-snap-align:start;cursor:pointer}
.case .pic{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:#111}
.case .pic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.case:hover .pic img{transform:scale(1.025)}
.case .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.case .tag{position:absolute;top:18px;right:18px;z-index:2;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;border-radius:100px;padding:7px 14px;font-size:13px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.case .name{position:absolute;left:28px;bottom:26px;z-index:2;color:#fff;font-weight:300;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;line-height:1}
.case .go{position:absolute;right:22px;bottom:22px;z-index:2;width:62px;height:62px;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);font-size:22px}
.case .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px 8px 0}
.case .meta div b{display:block;font-weight:300;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.1}
.case .meta div span{display:block;font-size:13.5px;color:var(--soft);margin-top:6px}
.arrows{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.arrows button{width:62px;height:62px;border-radius:50%;background:var(--pill);display:grid;place-items:center;font-size:20px;transition:transform .35s var(--ease)}
.arrows button:hover{transform:translateY(-2px)}
.arrows button:disabled{opacity:.3}

/* ---- services : deux grands panneaux, le prix en pastille ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.svc{display:block}
.svc .pic{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;background:#1a1a1c}
.svc .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.75);transition:transform 1.2s var(--ease)}
.svc:hover .pic img{transform:scale(1.025)}
.svc .pic h3{position:absolute;left:28px;bottom:26px;color:#fff;font-weight:300;font-size:clamp(30px,3.6vw,50px);letter-spacing:-.025em;line-height:1}
.svc .pic .go{position:absolute;right:22px;bottom:22px;width:72px;height:72px;background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.svc p{padding:26px 10px 0;font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.4;letter-spacing:-.01em;max-width:30ch}
.svc p b{font-weight:500}
.svc .pills2{display:flex;flex-wrap:wrap;gap:8px;margin:20px 10px 0}
.svc .pill{height:46px;padding:0 18px;font-weight:300;font-size:15px}
.also{margin-top:26px;color:var(--soft);font-weight:300;font-size:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 10px}
.also .pill{height:44px;padding:0 18px;font-size:15px}

/* ---- trois étapes : trois lignes, des chiffres fins ---- */
.steps{margin-top:40px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:140px 1fr 1fr;gap:30px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line)}
.step .n{font-weight:200;font-size:clamp(44px,5vw,72px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.step h3{font-weight:300;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;line-height:1.1}
.step h3 b{font-weight:500}
.step p{font-weight:300;font-size:17px;color:var(--soft);line-height:1.5;max-width:40ch}

/* ---- trois étapes : l'objet avec le sélecteur de verre ---- */
.sel{margin-top:40px;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.4;background:#d9d9d9;user-select:none;touch-action:pan-y}
.sel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.sel .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 55%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.3))}
.sel .txt{position:absolute;left:40px;top:40px;right:40px;color:#fff;transition:opacity .3s,filter .3s,transform .3s var(--ease)}
.sel.swap .txt{opacity:0;filter:blur(8px);transform:translateY(6px)}
.sel .txt .n{font-weight:200;font-size:clamp(60px,8vw,120px);letter-spacing:-.04em;line-height:.9}
.sel .txt h3{margin-top:14px;font-weight:300;font-size:clamp(26px,3vw,44px);letter-spacing:-.025em;line-height:1.05;max-width:16ch}
.sel .txt h3 b{font-weight:500}
.sel .txt p{margin-top:14px;font-weight:300;font-size:clamp(15px,1.3vw,18px);line-height:1.5;max-width:40ch;color:rgba(255,255,255,.85)}
.rail{position:absolute;left:28px;right:28px;bottom:28px;height:68px;padding:6px;border-radius:100px;display:grid;grid-template-columns:repeat(3,1fr);
background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.25),0 24px 50px -30px rgba(0,0,0,.6)}
.rail .knob{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);border-radius:100px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -12px rgba(0,0,0,.5),inset 0 1px 0 #fff;transition:transform .6s var(--ease);will-change:transform}
.rail.drag .knob{transition:none}
.rail button{position:relative;z-index:1;border-radius:100px;color:#fff;font-size:15.5px;font-weight:400;transition:color .3s;white-space:nowrap}
.rail button.on{color:var(--ink)}
.rail button small{display:block;font-size:12px;font-weight:300;opacity:.75;margin-top:1px}
.sel .hint{position:absolute;right:40px;top:44px;color:rgba(255,255,255,.8);font-size:14px;font-weight:300;display:flex;align-items:center;gap:8px}
.sel .hint i{display:inline-block;width:34px;height:1px;background:rgba(255,255,255,.7);position:relative}
.sel .hint i::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-right:1px solid rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.8);transform:rotate(45deg)}
/* ---- après : un objet ---- */
.after{margin-top:40px;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.4;background:#dcdcdc}
.shot{position:absolute;inset:0}
.after img{width:100%;height:100%;object-fit:cover}
.after .gcard{left:auto;right:28px;bottom:28px;width:min(420px,calc(100% - 56px));display:block;padding:20px 22px}
.after .gcard b{font-size:17px;padding-bottom:10px;border-bottom:1px solid rgba(18,18,20,.1);margin-bottom:6px}
.after .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:15px}
.after .row span{color:rgba(18,18,20,.6);font-size:14px}
.after .row em{font-style:normal;font-weight:500}

/* ---- espace client : démo en verre ---- */
.app{position:absolute;right:28px;top:28px;bottom:28px;width:min(440px,calc(100% - 56px));border-radius:26px;padding:18px 18px 16px;display:flex;flex-direction:column;
background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.5),0 40px 80px -40px rgba(0,0,0,.5);overflow:hidden}
.ah{display:flex;align-items:center;gap:12px}.ah .tile{width:40px;height:40px;border-radius:12px}
.ah b{display:block;font-weight:500;font-size:15.5px}.ah span{display:block;font-size:12.5px;color:rgba(18,18,20,.65);margin-top:1px}
.atag{margin-left:auto;font-size:11.5px;font-weight:500;background:rgba(255,255,255,.7);border-radius:100px;padding:6px 10px;white-space:nowrap}
.arail{position:relative;height:48px;margin-top:16px;padding:4px;background:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.arail .knob{top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3)}
.arail button{color:rgba(18,18,20,.6);font-size:14px}.arail button.on{color:var(--ink)}
.apanel{margin-top:14px;flex:1;min-height:0;overflow:auto;scrollbar-width:none;transition:opacity .28s,filter .28s,transform .28s var(--ease)}
.apanel::-webkit-scrollbar{display:none}
.app.swap .apanel{opacity:0;filter:blur(8px);transform:translateY(6px)}
.tl{display:flex;flex-direction:column}
.ti{display:flex;align-items:center;gap:12px;padding:9px 0;position:relative}
.ti i{width:10px;height:10px;border-radius:50%;background:rgba(18,18,20,.18);flex:none;position:relative;z-index:1}
.ti::before{content:"";position:absolute;left:4.5px;top:0;bottom:0;width:1px;background:rgba(18,18,20,.12)}
.ti:first-child::before{top:50%}.ti:last-child::before{bottom:50%}
.ti.done i{background:var(--ink)}.ti.now i{background:#fff;box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(18,18,20,.12)}
.ti div{flex:1;min-width:0}.ti b{display:block;font-weight:500;font-size:14px}.ti span{display:block;font-size:12.5px;color:rgba(18,18,20,.6)}
.ti em{font-style:normal;font-size:11.5px;font-weight:500;border-radius:100px;padding:4px 9px;background:rgba(255,255,255,.7);white-space:nowrap}
.ti.done em{background:var(--ink);color:#fff}.ti.now em{background:#fff}
.prog{height:4px;border-radius:4px;background:rgba(18,18,20,.12);margin-top:12px;overflow:hidden}.prog span{display:block;height:100%;background:var(--ink);border-radius:4px}
.pfoot{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(18,18,20,.65);margin-top:8px}.pfoot b{color:var(--ink);font-weight:500}
.arow{border-radius:16px;background:rgba(255,255,255,.5);margin-bottom:8px;cursor:pointer;transition:background .3s}
.arow:hover{background:rgba(255,255,255,.7)}
.ar{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;font-size:14px}.ar b{font-weight:500}
.ar em{font-style:normal;font-size:11.5px;font-weight:500;border-radius:100px;padding:4px 9px;background:rgba(18,18,20,.08)}.ar em.ok{background:var(--ink);color:#fff}
.ad{max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .4s;padding:0 14px}
.arow.open .ad{max-height:140px;padding:0 14px 13px}
.ad p{font-size:13px;line-height:1.5;color:rgba(18,18,20,.72)}.dl{display:inline-block;margin-top:8px;font-size:13px;font-weight:500;position:relative;overflow:hidden;padding:6px 12px;margin-left:-12px;border-radius:100px;color:var(--v);transition:background .3s}.dl:active{background:rgba(109,120,255,.1)}
.dcomp{display:flex;gap:8px;align-items:center;margin:10px 16px 0;padding:5px 5px 5px 16px;border-radius:100px;background:#fff;box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.dcomp input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;font-weight:300;color:var(--ink);outline:none;height:38px}
.dcomp button{width:38px;height:38px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-size:17px;flex:none;transition:transform .3s var(--ease)}.dcomp button:active{transform:scale(.92)}
.dcomp[hidden]{display:none}
.msg.typing{width:52px;height:34px;display:flex;align-items:center;justify-content:center;gap:4px}.msg.typing i{width:5px;height:5px;border-radius:50%;background:var(--mut);animation:dot 1s infinite}.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
.dtoast{position:absolute;left:16px;right:16px;bottom:96px;z-index:3;padding:12px 16px;border-radius:16px;background:rgba(18,18,20,.86);color:#fff;font-size:13px;line-height:1.4;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}.dtoast.show{opacity:1;transform:none}
.ahint{font-size:12px;color:rgba(18,18,20,.5);text-align:center;margin-top:6px}
.msg{max-width:84%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.4;margin-bottom:8px;background:rgba(255,255,255,.75)}
.msg.out{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:6px}.msg.in{border-bottom-left-radius:6px}
.mfield{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.8);border-radius:100px;padding:10px 8px 10px 14px;font-size:13px;color:rgba(18,18,20,.5)}
.mfield span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px}
/* ---- presser, maintenir, tirer ---- */
.slide{position:relative;height:72px;max-width:520px;margin-top:40px;border-radius:100px;padding:8px;user-select:none;touch-action:none;cursor:grab;
background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.7),0 20px 40px -30px rgba(0,0,0,.35)}
.strack{position:absolute;inset:8px 8px 8px 72px;display:flex;align-items:center;padding-left:24px;font-size:16px;font-weight:300;color:var(--soft);overflow:hidden}
.slabel,.sdone{transition:opacity .3s}.sdone{position:absolute;left:14px;opacity:0;color:var(--ink);font-weight:400}
.slide.done .slabel{opacity:0!important}.slide.done .sdone{opacity:1}
.sknob{position:absolute;left:8px;top:8px;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:300;
transition:transform .6s cubic-bezier(.34,1.4,.64,1),box-shadow .3s,background .3s;will-change:transform;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.slide.drag .sknob{transition:none;cursor:grabbing;box-shadow:0 22px 40px -16px rgba(0,0,0,.6)}
.slide.done .sknob{background:#1fa05c!important}
/* l'indice : la pastille fait un pas vers la droite, la lumière traverse le texte */
.slide.idle .sknob{animation:nudge 3.6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes nudge{0%,55%,100%{transform:translateX(0)}20%{transform:translateX(18px)}}
.slide.idle .slabel{background:linear-gradient(90deg,var(--soft) 0 38%,var(--ink) 50%,var(--soft) 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes shine{0%,55%{background-position:100% 0}20%,100%{background-position:0 0}}
.slide.idle .sknob::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(18,18,20,.35);animation:halo 3.6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes halo{0%,55%,100%{box-shadow:0 0 0 0 rgba(18,18,20,.35)}20%{box-shadow:0 0 0 10px rgba(18,18,20,0)}}
.endp{margin-top:26px;font-weight:300;font-size:clamp(18px,1.6vw,23px);line-height:1.4;color:var(--soft);max-width:34ch}
.end .ctas{margin-top:18px}
/* ---- chiffres ---- */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.num{background:var(--pill);border-radius:var(--r);padding:36px 34px 32px}
.num b{display:block;font-weight:200;font-size:clamp(48px,5.6vw,84px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:14px;font-weight:300;font-size:17px;color:var(--soft);line-height:1.4;max-width:22ch}

/* ---- fin ---- */
.end{padding:150px 0 60px;text-align:left}
.end h2{font-weight:300;font-size:clamp(48px,8vw,120px);letter-spacing:-.04em;line-height:.98;max-width:12ch}
.end h2 b{font-weight:500}
.end .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.end .ctas .pill{height:62px;padding:0 30px;font-size:17px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--soft);font-weight:300}
.foot a:hover{color:var(--ink)}

/* ---- flottant, menu, lightbox ---- */
.float{position:fixed;right:22px;bottom:22px;z-index:60;height:54px;padding:0 24px;border-radius:100px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:400;transform:translateY(110px);transition:transform .6s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.float.show{transform:none}
.menu{position:fixed;inset:0;z-index:100;background:rgba(239,239,239,.78);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);display:flex;flex-direction:column;justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease),backdrop-filter .6s var(--ease),-webkit-backdrop-filter .6s var(--ease)}
html.menu-open .menu{opacity:1;pointer-events:all;-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%)}
html.menu-open body{overflow:hidden}
html.menu-open .float{transform:translateY(120px)}
html.menu-open .nav::before,html.menu-open .nav::after{opacity:0}
html.menu-open .nav{z-index:102}
.menu a.ml{display:block;font-weight:300;font-size:46px;letter-spacing:-.03em;padding:8px 0;opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .5s,transform .7s var(--ease),filter .5s}
.menu a.ml b{font-weight:500}
html.menu-open .menu a.ml{opacity:1;transform:none;filter:none}
html.menu-open .menu a.ml:nth-child(2){transition-delay:.06s}html.menu-open .menu a.ml:nth-child(3){transition-delay:.12s}html.menu-open .menu a.ml:nth-child(4){transition-delay:.18s}html.menu-open .menu a.ml:nth-child(5){transition-delay:.24s}
.menu .mcta{margin-top:30px;opacity:0;transform:translateY(18px);transition:opacity .5s .3s,transform .7s .3s var(--ease)}
html.menu-open .menu .mcta{opacity:1;transform:none}
.menu .mcta .pill{width:100%;justify-content:center;height:58px}
.menu .mfoot{margin-top:26px;font-size:13px;color:var(--soft);font-weight:300}
.lb{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:24px;box-sizing:border-box;opacity:0;pointer-events:none;transition:opacity .3s;background:rgba(18,18,20,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lb.show{opacity:1;pointer-events:all}
.lb-card{position:relative;width:100%;max-width:1200px;border-radius:var(--r);overflow:hidden;background:#fff;transform:scale(.97);transition:transform .45s var(--ease)}
.lb.show .lb-card{transform:none}
.lb-card img{width:100%}
.lb-body{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px}
.lb-body b{font-weight:500;font-size:20px}.lb-body p{color:var(--soft);font-weight:300;font-size:15px;margin-top:2px}
.lb-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px -12px rgba(0,0,0,.4);display:grid;place-items:center;flex:none;font-size:15px;transition:transform .35s var(--ease),background .3s}
.lb-x:hover{background:#fff;transform:scale(1.06)}

/* ---- apparitions : lentes, calmes ---- */
html.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .9s,transform 1.1s var(--ease)}
html.anim .rv.l{transform:translateX(-36px)}html.anim .rv.r{transform:translateX(36px)}
html.anim .nav{opacity:0;transform:translateY(-8px);transition:opacity .7s .1s,transform .9s .1s var(--ease)}
html.anim.ready .nav{opacity:1;transform:none}
html.anim .rv.in{opacity:1;transform:none}
html.anim .rv.pic-rv{filter:blur(14px);transition:opacity .9s,transform 1.1s var(--ease),filter 1.1s}
html.anim .rv.pic-rv.in{filter:none}
.btn-press:active{transform:scale(.97)}

/* ---- mobile ---- */
@media(max-width:900px){
:root{--r:22px}
.app{left:12px;right:12px;top:auto;bottom:12px;width:auto;height:calc(100% - 24px);padding:14px 14px 12px}
.slide{max-width:none;height:66px}.sknob{width:50px;height:50px}.strack{inset:8px 8px 8px 66px;font-size:15px;padding-left:22px}
.hero h1{font-size:34px;max-width:none}
.wrap{padding-inline:16px}
.nav{padding:12px 0}.nav::before{inset:0 -16px}.nav::after{left:-16px;right:-16px;height:20px}
.tile{width:46px;height:46px;border-radius:14px}
.pills,.nav .cta{display:none}.burger{display:grid;width:46px;height:46px;margin-left:0}
.lang{height:46px;padding:0 5px}.lang a{width:30px;height:30px;font-size:10px}.lang a.on{width:36px;height:36px;font-size:11px}
.hero{padding:34px 0 26px}.hello{font-size:26px}.hero h1{font-size:40px;margin-top:8px}
.object{margin-top:30px;aspect-ratio:4/5}
.gcard{left:12px;right:12px;bottom:12px;gap:14px;padding:14px 14px 14px 16px;border-radius:18px}
.gcard b{font-size:16px}.gcard span{font-size:13px}.go{width:46px;height:46px;font-size:18px}
.trust{padding:50px 0 10px;font-size:24px;line-height:1.5}.who{padding:5px 12px 5px 7px;gap:7px}.who i{width:22px;height:22px}
.ask{padding:80px 0 0}.ask h2{font-size:44px}
.say{margin-top:34px;padding:12px 18px 12px 12px;border-radius:30px;gap:12px}.say .tile{width:48px;height:48px}.say p{font-size:16.5px}
.cases{gap:12px;margin:26px -16px 0;padding-inline:16px;scroll-padding-inline:16px}.case{flex:0 0 86%}
.case .name{left:16px;bottom:16px;font-size:26px}.case .go{right:14px;bottom:14px;width:50px;height:50px;font-size:18px}
.case .meta{grid-template-columns:1fr 1fr;gap:12px;padding-top:16px}.case .meta div:nth-child(3){grid-column:1/-1}
.case .meta div b{font-size:19px}
.arrows{display:none}
.two{grid-template-columns:1fr;gap:28px;margin-top:28px}
.svc .pic{aspect-ratio:16/12}.svc .pic h3{left:18px;bottom:18px;font-size:30px}.svc .pic .go{width:54px;height:54px;right:14px;bottom:14px}
.svc p{padding:18px 4px 0;font-size:18px}.svc .pills2{margin:16px 4px 0}.svc .pill{height:42px;font-size:14px;padding:0 15px}
.also{padding:0 4px;font-size:16px}.also .alab{flex-basis:100%}
.steps{margin-top:28px}.step{grid-template-columns:70px 1fr;gap:14px 16px;padding:24px 0}
.step .n{font-size:42px}.step h3{font-size:22px}.step p{grid-column:2;font-size:15.5px}
.after{margin-top:28px}
.nums{grid-template-columns:1fr;gap:12px;margin-top:28px}.num{padding:26px 24px 24px}.num b{font-size:52px}.num span{font-size:15.5px;margin-top:10px}
.end{padding:90px 0 40px}.end h2{font-size:48px}.endp{font-size:17px;margin-top:18px}.end .ctas .pill{height:56px;width:100%;justify-content:center}
.foot{flex-direction:column;gap:8px}
.float{right:12px;bottom:12px;left:12px;justify-content:center}
.lb{padding:16px}.lb-body{padding:16px 18px}.lb-body b{font-size:18px}.lb-body p{font-size:14px}.lb-x{top:10px;right:10px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
.hello .up i{animation:none}.hello .up i:nth-child(2){display:none}
html.anim .rv,html.anim .rv.pic-rv{opacity:1;transform:none;filter:none;transition:none}
.object img,.case .pic img,.svc .pic img,.pill,.go,.float,.lb-card{transition:none!important}
}

/* ---- assistant de langue : bulle de glace, les langues autour, la lumière suit le pouce ---- */
.lorb{position:relative;overflow:visible;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 12px 30px -22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink);transition:transform .45s var(--ease)}
.nav .lorb{margin-left:auto}.lang[hidden]{display:none}
.lorb:hover{transform:translateY(-2px)}.lorb:active{transform:scale(.94)}
.lorb .ring,.orb .ring{position:absolute;inset:5px;border-radius:50%;background:conic-gradient(from var(--la,200deg),rgba(255,255,255,.3) 0% 26%,#c3c8ff 38%,#fff 46%,#8c95ff 53%,var(--v) 58%,rgba(255,255,255,.3) 72% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));opacity:var(--li,.9);transition:opacity .4s}
html.anim .lorb .ring{animation:orbturn 14s linear infinite}
@keyframes orbturn{to{--la:560deg}}
@property --la{syntax:"<angle>";inherits:true;initial-value:200deg}
.ai{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:rgba(239,239,239,.95);-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);opacity:0;pointer-events:none;transition:opacity .45s;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.ai::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 36% at 50% 42%,rgba(109,120,255,.16),transparent 70%);pointer-events:none}
.ai.show{opacity:1;pointer-events:all}
.ai-x{position:absolute;top:18px;right:18px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:grid;place-items:center;font-size:14px;color:var(--ink);overflow:hidden;transition:transform .35s var(--ease)}
.ai-x:hover{transform:scale(1.06)}
.ai-top{display:grid;place-items:center;padding:24px;text-align:center;transform:translateY(16px);transition:transform .9s var(--ease)}
.ai.show .ai-top{transform:none}
.owrap{position:relative;width:200px;height:200px;margin:76px 0 88px}
.orb{--la:200deg;--li:.85;--gx:0px;--gy:0px;position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 40px 80px -40px rgba(20,20,40,.45);cursor:pointer;transform:translate(var(--gx),var(--gy)) scale(var(--gs,1));transition:transform .7s var(--ease);touch-action:none}
.orb.press{transition:transform .12s}
.orb .ring{inset:24px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));opacity:1}
.orb .glow{position:absolute;inset:14px;border-radius:50%;background:conic-gradient(from var(--la),transparent 0% 26%,#c3c8ff 38%,#fff 46%,var(--v) 56%,transparent 72% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 26px),#000 calc(100% - 10px),#000);mask:radial-gradient(farthest-side,transparent calc(100% - 26px),#000 calc(100% - 10px),#000);filter:blur(9px);opacity:var(--li);transition:opacity .4s}
.orb .core{position:absolute;inset:34px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;box-shadow:inset 0 1px 0 #fff}
.orb .core svg{width:58px;height:58px;display:block;transform:translate(calc(var(--gx) * .3),calc(var(--gy) * .3));transition:transform .7s var(--ease);filter:drop-shadow(0 8px 16px rgba(20,20,40,.18))}
.orb .core svg .gl{fill:rgba(255,255,255,.55);stroke:rgba(255,255,255,.95);stroke-width:14}
.orb .core svg .gu{fill:rgba(18,18,20,.82)}.orb .core svg .gd{fill:var(--v)}
.ol{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate(var(--d)) rotate(calc(var(--a) * -1))}
.ol button{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(var(--s,1));white-space:nowrap;font-size:15px;font-weight:400;letter-spacing:.02em;color:var(--soft);padding:10px 14px;border-radius:100px;transition:color .3s,transform .45s var(--ease),opacity .3s;overflow:hidden;opacity:var(--o,1)}
.ol button.on{color:var(--ink);font-weight:500}
.ol button.aim{--s:1.28;color:var(--ink);font-weight:500}
.ai-hi{font-size:66px;font-weight:200;line-height:1;letter-spacing:-.02em;min-height:1.1em;display:grid;place-items:center}
.ai-q{margin-top:12px;font-size:18px;font-weight:300;color:var(--soft);min-height:1.5em;display:grid;place-items:center;max-width:520px}
.ai-hi span,.ai-q span{grid-area:1/1;transition:opacity .45s,filter .45s,transform .6s var(--ease)}
.ai-hi span.out,.ai-q span.out{opacity:0;filter:blur(6px);transform:translateY(-8px)}
.ai-hi span.pre,.ai-q span.pre{opacity:0;filter:blur(6px);transform:translateY(8px);transition:none}
.ai-q span[dir=rtl]{direction:rtl}
.ahint{margin-top:26px;font-size:13px;font-weight:300;color:var(--soft);letter-spacing:.02em;transition:opacity .4s}
.ai.touched .ahint{opacity:0}
@media (max-width:900px){
.lorb{width:46px;height:46px;font-size:11px}.lorb .ring{inset:4px}
.ai-x{top:12px;right:12px;width:42px;height:42px}
.ai-top{padding:20px}.owrap{width:156px;height:156px;margin:60px 0 78px}.orb .ring{inset:20px}.orb .glow{inset:11px}.orb .core{inset:28px}.orb .core svg{width:48px;height:48px}
.ol button{font-size:14px;padding:8px 12px}
.ai-hi{font-size:46px}.ai-q{font-size:16px}.ahint{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
.ai,.ai-top,.orb,.ai-hi span,.ai-q span,.ol button{transition:none}.lorb .ring{animation:none}
}

/* ======== thème Lumière : une seule surface colorée par écran ======== */
html[data-theme="lumiere"] .object::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 55% at 0% 100%,rgba(190,170,255,.55),transparent 70%),radial-gradient(35% 45% at 100% 0%,rgba(255,190,215,.4),transparent 70%)}
html[data-theme="lumiere"] .gcard{background:linear-gradient(135deg,rgba(214,200,255,.55),rgba(255,214,232,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.55),0 30px 60px -36px rgba(80,40,160,.45)}
html[data-theme="lumiere"] .sel{background:linear-gradient(135deg,#c9b8ff,#ffc2dd 55%,#ffd9b8)}
html[data-theme="lumiere"] .sel img{opacity:.0}
html[data-theme="lumiere"] .sel .veil{background:radial-gradient(50% 60% at 70% 30%,rgba(255,255,255,.35),transparent 70%)}
html[data-theme="lumiere"] .sel .txt,html[data-theme="lumiere"] .rail button,html[data-theme="lumiere"] .sel .hint{color:var(--ink)}
html[data-theme="lumiere"] .sel .txt p{color:rgba(18,18,20,.72)}
html[data-theme="lumiere"] .rail{background:rgba(255,255,255,.28)}
html[data-theme="lumiere"] .rail button.on{color:var(--ink)}
html[data-theme="lumiere"] .after .gcard{background:linear-gradient(160deg,rgba(214,200,255,.6),rgba(255,214,232,.55))}
html[data-theme="lumiere"] .num:nth-child(3){background:linear-gradient(135deg,#dcd2ff,#ffd9ea)}
/* ======== thème Couleur : le liquide à la place de la photo ======== */
html[data-theme="couleur"] .object{background:radial-gradient(55% 70% at 35% 60%,#ff9d5c 0%,#ff5fa8 38%,#9a4dff 72%,#6d78ff 100%)}
html[data-theme="couleur"] .object img{opacity:.22;mix-blend-mode:luminosity}
html[data-theme="couleur"] .object::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 50% at 80% 20%,rgba(255,255,255,.35),transparent 70%)}
html[data-theme="couleur"] .gcard{background:rgba(255,255,255,.32);color:#fff}
html[data-theme="couleur"] .gcard b{color:#fff}html[data-theme="couleur"] .gcard span{color:rgba(255,255,255,.85)}
html[data-theme="couleur"] .gcard .go{background:rgba(255,255,255,.9);color:var(--ink)}
html[data-theme="couleur"] .svc:nth-child(1) .pic{background:linear-gradient(160deg,#7c5cff,#ff8fc2)}
html[data-theme="couleur"] .svc:nth-child(1) .pic img{opacity:.35;mix-blend-mode:luminosity;filter:none}
html[data-theme="couleur"] .svc:nth-child(2) .pic{background:linear-gradient(160deg,#1a1a1c,#3a3450)}
html[data-theme="couleur"] .sel{background:radial-gradient(60% 80% at 30% 80%,#ffb36b 0%,#ff6fae 40%,#8f5cff 80%,#5e6bff 100%)}
html[data-theme="couleur"] .sel img{opacity:.18;mix-blend-mode:luminosity}
html[data-theme="couleur"] .sel .veil{background:none}
html[data-theme="couleur"] .after{background:linear-gradient(135deg,#cfc2ff,#ffd3e6)}
html[data-theme="couleur"] .after img{opacity:.55;mix-blend-mode:luminosity}
html[data-theme="couleur"] .after .gcard{background:rgba(255,255,255,.5)}
html[data-theme="couleur"] .num:nth-child(3){background:linear-gradient(135deg,#7c5cff,#ff8fc2);color:#fff}
html[data-theme="couleur"] .num:nth-child(3) span{color:rgba(255,255,255,.85)}
html[data-theme="couleur"] .pill.ink{background:linear-gradient(120deg,#6d4df0,#ff6fae)}
html[data-theme="couleur"] .float,html[data-theme="couleur"] .sknob{background:linear-gradient(120deg,#6d4df0,#ff6fae)}
@media(max-width:900px){
.sel{aspect-ratio:4/5;margin-top:28px}.sel img{object-position:66% 50%}
.sel .txt{left:20px;top:22px;right:20px}.sel .txt .n{font-size:64px}.sel .txt h3{font-size:26px}.sel .txt p{font-size:15px}
.sel .hint{display:none}
.rail{left:12px;right:12px;bottom:12px;height:60px;padding:5px}.rail .knob{top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3)}
.rail button{font-size:13.5px}.rail button small{display:none}
}

/* ======== ADN Upward : le violet et la flèche ======== */
html[data-dna="violet"] .hero h1 .acc{color:var(--v)}
html[data-dna="violet"] .rot i{color:var(--v)}
html[data-dna="violet"] .go{color:var(--v)}
html[data-dna="violet"] .case:hover .go,html[data-dna="violet"] .svc:hover .go{background:var(--v);color:#fff}
html[data-dna="violet"] .gcard .go{background:var(--v);color:#fff}
html[data-dna="violet"] .rail .knob{background:var(--v)}html[data-dna="violet"] .rail button.on{color:#fff}
html[data-dna="violet"] .pill.ink,html[data-dna="violet"] .float,html[data-dna="violet"] .sknob,html[data-dna="violet"] .mfield span,html[data-dna="violet"] .ti.done i,html[data-dna="violet"] .ti.done em,html[data-dna="violet"] .ar em.ok,html[data-dna="violet"] .prog span,html[data-dna="violet"] .msg.out{background:var(--v)}
html[data-dna="violet"] .ti.now i{box-shadow:0 0 0 2px var(--v),0 0 0 6px rgba(109,120,255,.18)}
html[data-dna="violet"] .who i{background:var(--v)}
html[data-dna="violet"] .object::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 60% at 100% 100%,rgba(109,120,255,.35),transparent 70%)}
html[data-dna="violet"] .sel .veil{background:linear-gradient(90deg,rgba(40,30,90,.5),rgba(40,30,90,.1) 55%),linear-gradient(180deg,transparent 40%,rgba(40,30,90,.35))}
html[data-dna="violet"] .num:nth-child(3) b{color:var(--v)}
html[data-dna="violet"] .menu a.ml b{color:var(--v)}
/* ======== ADN Upward Tight : la typographie de la charte ======== */
html[data-dna="tight"] h1,html[data-dna="tight"] h2,html[data-dna="tight"] h3,html[data-dna="tight"] .hello,html[data-dna="tight"] .case .name,html[data-dna="tight"] .svc .pic h3,html[data-dna="tight"] .num b,html[data-dna="tight"] .sel .txt .n,html[data-dna="tight"] .trust,html[data-dna="tight"] .menu a.ml{font-family:"Inter Tight",var(--f);font-weight:500;letter-spacing:-.035em}
html[data-dna="tight"] h1 b,html[data-dna="tight"] h2 b,html[data-dna="tight"] h3 b,html[data-dna="tight"] .trust b{font-weight:600}
html[data-dna="tight"] .hero h1 .acc,html[data-dna="tight"] .rot i,html[data-dna="tight"] .go{color:var(--v)}
html[data-dna="tight"] .hello .up{background:var(--v)}
html[data-dna="tight"] .pill.ink,html[data-dna="tight"] .float,html[data-dna="tight"] .sknob,html[data-dna="tight"] .rail .knob,html[data-dna="tight"] .arail .knob,html[data-dna="tight"] .gcard .go{background:var(--v);color:#fff}
html[data-dna="tight"] .rail button.on{color:#fff}
html[data-dna="tight"] .num b,html[data-dna="tight"] .sel .txt .n{font-weight:400}

/* ======== espace client : sur le téléphone, puis en plein écran ======== */
:root{--liq:radial-gradient(70% 60% at 30% 70%,#ff9a5a 0%,#ff5fa8 45%,#8f5cff 85%,#6d78ff 100%)}
html[data-dna] {--liq:radial-gradient(70% 60% at 30% 70%,#6d78ff 0%,#9a6bff 40%,#ff6fae 80%,#ffb36b 100%)}
.screen{position:absolute;left:20.82%;top:14.25%;width:15.9%;height:62.45%;border-radius:1.2vw;overflow:hidden;background:#fff;pointer-events:none}
.screen .scr{position:absolute;left:0;top:0;width:390px;transform-origin:0 0;height:auto;overflow:visible}
.screen .ddock{position:absolute}
.after{cursor:pointer}
.try{position:absolute;right:28px;bottom:28px;width:min(400px,calc(100% - 56px));padding:22px 22px 20px;border-radius:24px;
background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.5),0 30px 60px -36px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px}
.try .tlab{font-size:12.5px;font-weight:500;color:rgba(18,18,20,.6)}
.try b{font-weight:500;font-size:20px;line-height:1.15;letter-spacing:-.015em}
.try span:not(.tlab){font-size:14px;line-height:1.45;color:rgba(18,18,20,.72)}
.try .pill{margin-top:8px;width:max-content;height:50px}
/* la démo */
.demo[hidden],.dstart[hidden],.scr[hidden]{display:none}
.demo{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:rgba(18,18,20,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .35s}
.demo.show{opacity:1}
.phone{width:390px;height:min(820px,92vh);border-radius:54px;background:#111;padding:10px;box-shadow:0 60px 120px -40px rgba(0,0,0,.8);transform:translateY(24px) scale(.97);transition:transform .6s var(--ease)}
.demo.show .phone{transform:none}
.scr{position:relative;height:100%;border-radius:44px;overflow:auto;scrollbar-width:none;background:#f3f3f3;font-family:var(--f);color:var(--ink)}
.scr::-webkit-scrollbar{display:none}
/* 1. blanc */
.dtop{background:#fff;padding:18px 22px 22px;border-radius:0 0 30px 30px}
.dbar{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;height:30px}
.dx{width:34px;height:34px;border-radius:50%;background:#f0f0f0;display:grid;place-items:center;font-size:12px}
.dhead{display:flex;align-items:center;gap:10px;margin-top:10px}.dhead .tile{width:38px;height:38px;border-radius:12px}
.dhead b{display:block;font-weight:500;font-size:15px}.dhead span{display:block;font-size:12px;color:var(--soft)}
.dpill{margin-left:auto;font-size:11px;font-weight:500;background:#f0f0f0;border-radius:100px;padding:6px 10px}
.dhi{margin-top:22px;font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1.05}
.dbig{display:flex;align-items:baseline;gap:4px;margin-top:10px}
.dbig b{font-weight:200;font-size:68px;letter-spacing:-.04em;line-height:1}.dbig span{font-weight:300;font-size:22px;color:var(--mut)}
.dbig em{font-style:normal;margin-left:12px;font-size:13px;line-height:1.3;color:var(--soft);font-weight:300}
/* 2. dégradé */
.dai{margin:10px 10px 0;border-radius:28px;padding:20px 18px 18px;background:var(--liq);color:#fff;position:relative;overflow:hidden}
.dlab{font-size:12px;font-weight:500;opacity:.85}
.dai h4{margin-top:6px;font-weight:300;font-size:26px;line-height:1.08;letter-spacing:-.02em}.dai h4 b{font-weight:500}
.dchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.dchips button{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:100px;padding:8px 12px;font-size:12.5px;font-weight:400;transition:background .3s,transform .3s var(--ease)}
.dchips button:active{transform:scale(.96)}.dchips button.on{background:#fff;color:var(--ink)}
.dchat{margin-top:12px;display:flex;flex-direction:column;gap:8px;min-height:0}
.dchat .q{align-self:flex-end;background:#fff;color:var(--ink);border-radius:16px 16px 6px 16px;padding:9px 12px;font-size:13px;max-width:85%}
.dchat .a{align-self:flex-start;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:16px 16px 16px 6px;padding:9px 12px;font-size:13px;max-width:88%;line-height:1.4}
.dchat .a.typing{width:52px;height:34px;display:flex;align-items:center;justify-content:center;gap:4px}
.dchat .a.typing i{width:5px;height:5px;border-radius:50%;background:#fff;animation:dot 1s infinite}.dchat .a.typing i:nth-child(2){animation-delay:.15s}.dchat .a.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.dwave{display:flex;gap:3px;align-items:center;justify-content:center;height:26px;margin-top:14px;opacity:.7}
.dwave i{width:2px;height:6px;border-radius:2px;background:#fff;animation:wv 1.4s ease-in-out infinite}
.dwave i:nth-child(odd){animation-delay:.2s}.dwave i:nth-child(3n){animation-delay:.5s}.dwave i:nth-child(5n){animation-delay:.8s}
@keyframes wv{0%,100%{height:5px}50%{height:18px}}
/* 3. transparent */
.dsec{padding:16px 10px 110px}
.drail{position:relative;height:46px;padding:4px;left:auto;right:auto;bottom:auto;width:auto;margin:0 16px;background:rgba(18,18,20,.06);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.drail .knob{top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:#fff;box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.drail button{color:rgba(18,18,20,.55);font-size:13.5px}.drail button.on{color:var(--ink)}
.dpanel{margin-top:12px;padding:0 6px;transition:opacity .25s,filter .25s,transform .25s var(--ease)}
.scr.swap .dpanel{opacity:0;filter:blur(8px);transform:translateY(6px)}
.dpanel .ti{padding:10px 0}.dpanel .arow{background:#fff}.dpanel .msg.in{background:#fff}
/* 4. dock de verre */
.ddock{position:sticky;bottom:10px;margin:0 10px;display:flex;align-items:center;gap:6px;padding:6px;border-radius:100px;
background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.7),0 20px 40px -24px rgba(0,0,0,.45)}
.dstat{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.dstat b{font-weight:300;font-size:20px;line-height:1}.dstat small{font-size:9.5px;color:var(--soft);margin-top:2px}
.dslide{position:relative;flex:1;height:58px;border-radius:100px;background:#fff;user-select:none;touch-action:none;overflow:hidden;cursor:grab}
.dsk{position:absolute;left:5px;top:5px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:300;z-index:2;transition:transform .55s cubic-bezier(.34,1.4,.64,1),background .3s;will-change:transform}
.dslide.drag .dsk{transition:none}
.dslide.idle .dsk{animation:nudge 3.6s cubic-bezier(.3,0,.2,1) infinite}
.dslide.idle .dsl{background:linear-gradient(90deg,var(--soft) 0 38%,var(--ink) 50%,var(--soft) 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.6s cubic-bezier(.3,0,.2,1) infinite}
.dsl,.dsd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:40px;font-size:13.5px;color:var(--soft);transition:opacity .3s}
.dsd{opacity:0;color:#1fa05c;font-weight:500}
.dslide.done .dsl{opacity:0!important}.dslide.done .dsd{opacity:1}.dslide.done .dsk{background:#1fa05c}
html[data-dna] .dsk,html[data-dna] .dstat b{color:inherit}html[data-dna] .dsk{background:var(--v)}
@media(max-width:900px){
.after{height:auto;aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.shot{position:relative;inset:auto;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#dcdcdc}
.screen{left:32.4%;top:14.25%;width:35.6%;height:62.45%;border-radius:min(14px,3.6vw)}
.try{position:static;width:auto;margin-top:12px;padding:24px 22px 22px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:var(--r)}.try b{font-size:22px}
.try .pill{width:100%;justify-content:center}
.demo{display:block;padding:0}
.phone{width:100%;height:100%;border-radius:0;padding:0;background:transparent;box-shadow:none}
.scr{border-radius:0;background:#f3f3f3}
.dtop{padding-top:max(18px,env(safe-area-inset-top))}
.ddock{bottom:max(10px,env(safe-area-inset-bottom))}
}

/* ---- démo : l'écran de départ ---- */
.dstart{position:relative;height:100%;border-radius:44px;overflow:auto;scrollbar-width:none;background:#fff;padding:18px 22px 24px;display:flex;flex-direction:column;font-family:var(--f);color:var(--ink)}
.dstart::-webkit-scrollbar{display:none}
.dhello{margin-top:34px;font-weight:300;font-size:40px;letter-spacing:-.03em;line-height:1;color:var(--mut)}
.dsub{margin-top:8px;font-weight:300;font-size:30px;letter-spacing:-.025em;line-height:1.05}.dsub b{font-weight:500}
.dtypes{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.dtypes button{height:40px;padding:0 15px;border-radius:100px;background:#f0f0f0;font-size:13.5px;font-weight:400;transition:background .3s,color .3s,transform .3s var(--ease)}
.dtypes button:active{transform:scale(.96)}.dtypes button.on{background:var(--ink);color:#fff}
.dfield{position:relative;display:block;margin-top:18px;border-radius:22px;background:#f3f3f3;min-height:118px;cursor:text;overflow:hidden}
.drip{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none}
.drip i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(18,18,20,.5);opacity:0;animation:drop 2.8s ease-out infinite}
.drip i:nth-child(2){animation-delay:.9s}.drip i:nth-child(3){animation-delay:1.8s}
@keyframes drop{0%{transform:scale(.2);opacity:.55}70%{opacity:.08}100%{transform:scale(7);opacity:0}}
.dtap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14.5px;font-weight:400;color:var(--ink);pointer-events:none;transition:opacity .3s}
.dtap small{font-size:12px;color:var(--soft);font-weight:300}
.dfield textarea{width:100%;min-height:118px;padding:16px 18px;border:0;background:transparent;resize:none;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);outline:none;position:relative;z-index:1}
.dfield.on .dtap,.dfield.on .drip{opacity:0}
.dgo{margin-top:auto;height:54px;border-radius:100px;background:var(--ink);color:#fff;font-size:15px;font-weight:400;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .35s var(--ease),opacity .3s}
.dgo:disabled{opacity:.35;cursor:default}
.dreal{margin-top:10px;height:46px;border-radius:100px;font-size:14px;font-weight:400;color:var(--soft)}
.scr{opacity:0;filter:blur(8px);transition:opacity .5s,filter .5s}.scr.in{opacity:1;filter:none}
.screen .scr{opacity:1;filter:none}
html[data-dna] .dtypes button.on,html[data-dna] .dgo{background:var(--v)}
html[data-theme="couleur"] .dgo{background:linear-gradient(120deg,#6d4df0,#ff6fae)}
@media(max-width:900px){.dstart{border-radius:0;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.dhello{margin-top:40px}}
@media (prefers-reduced-motion:reduce){.slide.idle .sknob,.slide.idle .slabel,.slide.idle .sknob::after,.dslide.idle .dsk,.dslide.idle .dsl,.drip i,.rp{animation:none}.slide.idle .slabel,.dslide.idle .dsl{color:var(--soft);background:none}}

/* ======== pages intérieures ======== */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:100px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--v);outline-offset:3px}
.pill.on{background:var(--ink);color:#fff}
.pill.soft{background:transparent;border:1px solid var(--line);color:var(--soft)}
.phead .lead{margin-top:28px;font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.45;color:var(--soft);max-width:44ch}
.hero.tight{padding-top:0}
.ask.tight{padding-top:50px}
.object.half{margin-top:24px;aspect-ratio:16/7}
.gcard.r{left:auto;right:28px}
.two.about{align-items:center;gap:48px}
.object.me{margin-top:0;aspect-ratio:3/4}
.object.me img{object-position:50% 20%}
.object.me{--x:44%;touch-action:pan-y;cursor:ew-resize}
.object.me .blur{position:absolute;inset:0;-webkit-mask-image:linear-gradient(100deg,transparent calc(var(--x) - 9%),#000 calc(var(--x) + 9%));mask-image:linear-gradient(100deg,transparent calc(var(--x) - 9%),#000 calc(var(--x) + 9%))}
.object.me .mehint{position:absolute;right:16px;top:16px;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border-radius:100px;font-size:12.5px;font-weight:400;color:var(--ink);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);pointer-events:none;transition:opacity .5s}
.object.me .mehint i{display:inline-block;width:22px;height:1px;background:var(--ink);position:relative}
.object.me .mehint i::before,.object.me .mehint i::after{content:"";position:absolute;top:-3px;width:6px;height:6px;border-top:1px solid var(--ink)}
.object.me .mehint i::before{left:-1px;border-left:1px solid var(--ink);transform:rotate(-45deg)}.object.me .mehint i::after{right:-1px;border-right:1px solid var(--ink);transform:rotate(45deg)}
.object.me.touched .mehint{opacity:0}
.trust.about{padding:0;max-width:none;font-size:clamp(22px,2.1vw,30px)}
/* lignes de services et FAQ */
.rows{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.row{background:var(--pill);border-radius:28px;overflow:hidden}
.rh{display:grid;grid-template-columns:70px 1fr 1.3fr 62px;align-items:center;gap:24px;width:100%;padding:26px 24px 26px 30px;text-align:left}
.rh .n{font-weight:200;font-size:34px;letter-spacing:-.03em;color:var(--soft)}
.rh .rt b{display:block;font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.1}
.rh .rt em{display:block;font-style:normal;font-size:14.5px;color:var(--soft);margin-top:4px}
.rh .rq{font-weight:300;font-size:clamp(17px,1.4vw,21px);line-height:1.3;color:var(--ink)}
.rh .rq b{font-weight:500}
.rh .go{background:var(--bg);color:var(--ink);transition:transform .5s var(--ease),background .3s}
.row.open .rh .go{transform:rotate(90deg);background:var(--ink);color:#fff}
.row.open .rh .go::before{transform:translate(120%,-120%);opacity:0}.row.open .rh .go::after{transform:none;opacity:1}
.rd{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.row.open .rd{max-height:420px}
.rdi{padding:0 30px 30px 124px}
.rdi p{font-weight:300;font-size:17px;line-height:1.5;color:var(--soft);max-width:60ch}
.rdi .pills2{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rdi .pill{height:42px;padding:0 16px;font-size:14.5px;font-weight:300;background:var(--bg)}
.row.faq .rh{grid-template-columns:1fr 62px}
.row.faq .rq{font-weight:400}
.row.faq .rdi{padding-left:30px}
/* réalisations en grille */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;margin-top:40px}
.grid2 .case{cursor:pointer}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.quote{background:var(--pill);border-radius:var(--r);padding:34px 32px 30px;display:flex;flex-direction:column;gap:22px}
.quote blockquote{font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.4;letter-spacing:-.01em}
.quote blockquote::before{content:"«\00a0";color:var(--mut)}.quote blockquote::after{content:"\00a0»";color:var(--mut)}
html:lang(en) .quote blockquote::before{content:"\201C"}html:lang(en) .quote blockquote::after{content:"\201D"}
html:lang(de) .quote blockquote::before{content:"\201E"}html:lang(de) .quote blockquote::after{content:"\201C"}
.quote figcaption{margin-top:auto}.quote figcaption b{display:block;font-weight:500}.quote figcaption span{display:block;font-size:14px;color:var(--soft);margin-top:2px}
/* studio */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.val{background:var(--pill);border-radius:var(--r);padding:34px 32px 32px}
.val b{display:block;font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.1}
.val p{margin-top:14px;font-weight:300;font-size:17px;line-height:1.5;color:var(--soft)}
.also.big{margin-top:36px;padding:0}.also.big .pill{height:54px;padding:0 24px;font-size:16px}
/* contact */
.two.contact{align-items:start}
.two.contact .object{margin-top:0;aspect-ratio:4/4.2}
.ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.form{background:var(--pill);border-radius:var(--r);padding:34px 32px 32px;display:flex;flex-direction:column;gap:14px}
.ftitle{font-weight:300;font-size:clamp(20px,1.7vw,25px);line-height:1.25;letter-spacing:-.015em;margin-bottom:10px}.ftitle b{font-weight:500}
.field{display:block;background:var(--bg);border-radius:20px;padding:12px 18px 10px}
.field span{display:block;font-size:12.5px;font-weight:500;color:var(--soft)}
.field input,.field select,.field textarea{display:block;width:100%;border:0;background:transparent;font:inherit;font-size:17px;font-weight:300;color:var(--ink);padding:6px 0 2px;outline:none;resize:vertical}
.field:focus-within{box-shadow:0 0 0 2px var(--ink)}
.form .pill.ink{margin-top:8px;height:58px;justify-content:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fnote{font-size:14.5px;color:var(--soft);min-height:1.4em}.fnote.ok{color:#1fa05c}.fnote.err{color:#c0392b}
/* légal */
.legal{max-width:72ch;padding-top:10px}
.legal h2{margin-top:40px;font-weight:500;font-size:22px;letter-spacing:-.015em}
.legal p{margin-top:12px;font-weight:300;font-size:17px;line-height:1.6;color:var(--soft)}
.legal a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
.phead .lead{margin-top:18px;font-size:17px}
.ask.tight{padding-top:36px}
.rows{margin-top:28px;gap:8px}.row{border-radius:22px}
.rh{grid-template-columns:1fr 46px;gap:8px 14px;padding:20px 18px 20px 20px}
.rh .n{display:none}.rh .rt{grid-column:1}.rh .rq{grid-column:1/-1;font-size:16px}
.rh .go{grid-column:2;grid-row:1;width:46px;height:46px;font-size:18px}
.rdi{padding:0 20px 22px 20px}.rdi p{font-size:15.5px}
.row.faq .rh{grid-template-columns:1fr 46px}.row.faq .rq{grid-column:1}.row.faq .rdi{padding-left:20px}
.grid2{grid-template-columns:1fr;gap:28px;margin-top:28px}
.quotes,.vals{grid-template-columns:1fr;gap:12px;margin-top:28px}
.quote,.val{padding:26px 24px 24px}
.also.big .pill{height:46px;padding:0 18px;font-size:15px}
.object.half{aspect-ratio:4/3}
.gcard.r{right:12px}
.two.about{gap:24px}.object.me{aspect-ratio:4/5}.trust.about{font-size:22px}
.two.contact .object{aspect-ratio:4/4.6}
.form{padding:24px 20px 22px}
.legal h2{margin-top:30px;font-size:20px}
}