/* OLA · v7
   Un seul système : Geist, une échelle de titres, un rythme de sections, un conteneur.
   Les fragments d'app gardent la police système (SF Pro) et les couleurs réelles de l'app. */

:root{
  --bg:#fbfbfa;--bg-2:#f3f3f1;--ink:#0a0a0b;--ink-2:#4b4b52;--ink-3:#86868b;--ink-4:#b8b8bd;
  --line:#e8e8e6;--live:#30d158;
  --app:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--sheet:cubic-bezier(.32,.72,0,1);
  --max:1120px;--gutter:clamp(20px,5vw,64px);--sec:clamp(104px,11vw,160px);
  --shadow:0 1px 2px rgba(10,10,11,.04),0 10px 30px rgba(10,10,11,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-anchor:none}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff}
.skip:focus{top:16px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:8px}
section{padding:var(--sec) var(--gutter)}
.eyebrow{margin:0 0 20px;color:var(--ink-3);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em}

/* Têtes de section : centrées, deux lignes, la seconde en gris */
.head{max-width:760px;margin:0 auto;text-align:center}
.head h2{font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.045em}
.head h2 span{color:var(--ink-4)}

/* Apparitions */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.on{opacity:1;transform:none}

/* ═══ Navigation ═══ */
.nav{position:fixed;z-index:50;left:0;right:0;top:12px;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
.nav-pill{position:relative;width:min(520px,100%);border-radius:28px;border:1px solid transparent;pointer-events:auto;transition:background-color .4s,border-color .4s,box-shadow .4s,backdrop-filter .4s}
.nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;padding:0 8px}
.nav-burger{justify-self:start;position:relative;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;transition:background-color .2s,color .3s}
.nav-burger i{position:absolute;left:12px;right:12px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .45s var(--sheet),top .45s var(--sheet)}
.nav-burger i:first-child{top:16.5px}.nav-burger i:last-child{top:22.5px}
.nav.open .nav-burger i:first-child{top:19.5px;transform:rotate(45deg)}
.nav.open .nav-burger i:last-child{top:19.5px;transform:rotate(-45deg)}
.nav-logo{justify-self:center;display:block}
.nav-logo img{width:58px;height:auto;transition:filter .3s}
.nav-cta{justify-self:end;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#fff;color:#0a0a0b;font-size:13.5px;font-weight:500;white-space:nowrap;transition:background-color .3s,color .3s,transform .16s var(--ease)}
.nav-cta:active{transform:scale(.97)}
.nav-cta .s{display:none}
.nav-menu{display:grid;padding:4px 20px 22px}
.nav-menu[hidden]{display:none}
.nav-menu a{padding:10px 4px;font-size:28px;font-weight:500;letter-spacing:-.035em;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--sheet),color .2s}
.nav.open .nav-menu a{opacity:1;transform:none}
.nav.open .nav-menu a:nth-child(2){transition-delay:.04s}.nav.open .nav-menu a:nth-child(3){transition-delay:.08s}.nav.open .nav-menu a:nth-child(4){transition-delay:.12s}.nav.open .nav-menu a:nth-child(5){transition-delay:.16s}
.nav.glass .nav-pill,.nav.open .nav-pill{background:rgba(20,20,22,.55);border-color:rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.2);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6)}
.nav.open .nav-pill{background:rgba(14,14,16,.9)}
.nav.light .nav-burger{color:#0a0a0b}
.nav.light .nav-logo img{filter:invert(1)}
.nav.light .nav-cta{background:#0a0a0b;color:#fff}
.nav.light.glass .nav-pill{background:rgba(251,251,250,.72);border-color:rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.nav.light.open .nav-pill{background:rgba(251,251,250,.96)}
.nav.light .nav-menu a{color:#0a0a0b}

/* ═══ Héros : texte en haut, téléphone qui monte ═══ */
.hero{position:relative;padding:clamp(124px,15vh,168px) var(--gutter) 0;background:#000;color:#fff;text-align:center;overflow:hidden}
.hero-copy{position:relative;z-index:2;max-width:880px;margin:0 auto}
.hero-pill{display:inline-flex;align-items:center;gap:9px;margin:0;height:32px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);font-size:13px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(48,209,88,.2)}
.hero h1{margin-top:28px;font-size:clamp(52px,8vw,112px);line-height:.96;letter-spacing:-.055em}
.hero h1 span{color:rgba(255,255,255,.38)}
.hero-sub{margin:24px 0 0;color:rgba(255,255,255,.62);font-size:clamp(17px,1.5vw,20px)}
.hero-proof{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;color:rgba(255,255,255,.5);font-size:13.5px}
.hero-proof span{color:#fff;letter-spacing:2px}
.hero-copy>*{animation:rise 1.1s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.16s}.hero-copy>:nth-child(4){animation-delay:.24s}.hero-copy>:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-visual{position:relative;width:min(1180px,170vw);aspect-ratio:1536/1024;margin:clamp(-60px,-4vw,-20px) 0 0 calc(50% - min(1180px,170vw) / 2);animation:rise 1.6s var(--ease) .35s both}
.hero-visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#000);pointer-events:none}
.hero-img{position:absolute;inset:0;width:100%;height:100%}
.hero-screen2{position:absolute;left:40.10%;top:16.99%;width:19.66%;height:62.60%;overflow:hidden;border-radius:11%/5.2%;background:#fafafa}
.hero-screen2 .app{transform:scale(var(--s,.6))}
.screen-glare{position:absolute;inset:0;z-index:20;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%),linear-gradient(0deg,rgba(0,0,0,.14),rgba(0,0,0,0) 22%)}

/* Formulaire courriel (pilule) */
.email-form{position:relative;display:flex;align-items:center;gap:6px;width:min(100%,420px);height:54px;margin:34px auto 0;padding:4px 4px 4px 22px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-align:left}
.email-form input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:#fff;font-size:15.5px;outline:none}
.email-form input::placeholder{color:rgba(255,255,255,.45)}
.email-form button{flex:none;height:44px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:#0a0a0b;font-size:14.5px;font-weight:500;transition:transform .16s var(--ease),background-color .2s}
.email-form button:hover{background:#e8e8ea}
.email-form button:active{transform:scale(.97)}
.form-note{position:absolute;left:22px;right:0;top:calc(100% + 10px);margin:0;color:rgba(255,255,255,.6);font-size:13px}
.email-form.err{border-color:#ff6b6b}
.email-form.done{justify-content:center;padding:4px 22px}
.email-form.done input,.email-form.done button{display:none}
.email-form.done .form-note{position:static;color:#fff;font-size:15px}

/* ═══ Outils ═══ */
.tools{padding:56px 0 0;text-align:center}
.tools p{margin:0 0 22px;color:var(--ink-3);font-size:13px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 44s linear infinite}
.marquee-track span{color:var(--ink-4);font-size:19px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
@keyframes marquee{to{transform:translateX(calc(-50% - 28px))}}

/* ═══ Manifeste ═══ */
.manifesto{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;text-align:center}
.mf-text{max-width:20ch;margin:0 auto;font-size:clamp(34px,4.8vw,66px);font-weight:500;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.mf-text span{color:#d6d6d9;transition:color .4s}
.mf-text span.on{color:var(--ink)}
.mf-photo{position:relative;height:clamp(300px,44vw,620px);margin:clamp(56px,7vw,96px) 0 0;border-radius:28px;overflow:hidden;background:#000}
.mf-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}

/* ═══ Bento : fragments de l'app ═══ */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:var(--max);margin:64px auto 0}
.cell{position:relative;display:flex;flex-direction:column;min-height:440px;border-radius:28px;background:var(--bg-2);overflow:hidden}
.c-wide{grid-column:span 2}
.fx{position:relative;flex:1;display:grid;place-items:center;padding:28px 24px 8px;font-family:var(--app);color:#09090b}
.fx::before{content:"";position:absolute;left:50%;top:46%;width:80%;height:80%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
.fx>*{position:relative}
.cell-copy{padding:0 28px 28px}
.cell-copy h3{font-size:22px;line-height:1.2;letter-spacing:-.03em}
.cell-copy p{margin:6px 0 0;color:var(--ink-3);font-size:15.5px}
@media (max-width:900px){.bento{grid-template-columns:1fr}.c-wide{grid-column:auto}.cell{min-height:400px}}

/* ── Fragment 1 : lecture de la PA (cercle de l'app) ── */
.fx-pa{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px)}
.orb{position:relative;flex:none;width:200px;height:200px}
.orb .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}
.orb .trk{stroke:#e6e6ea;stroke-width:3.5}
.orb .prg{stroke:#09090b;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:527.8;stroke-dashoffset:527.8;transition:stroke-dashoffset .12s linear}
.orb .grn{stroke:#15803d;stroke-width:3.5;opacity:0;transition:opacity .3s}
.orb.done .grn{opacity:1}
.orb .disc{position:absolute;inset:8%;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.08)}
.orb .pa-scale{--k:.27;--tx:0px;--ty:6px;position:absolute;left:0;top:0;transform-origin:0 0;transform:translate(var(--tx),var(--ty)) scale(var(--k));transition:transform .8s var(--sheet)}
.orb .badge{position:absolute;right:4%;bottom:4%;display:grid;place-items:center;width:24%;height:24%;border-radius:50%;background:#15803d;border:3px solid var(--bg-2);opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.orb .badge svg{width:55%;height:55%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.orb.done .badge{opacity:1;transform:none}
.pa-side{width:230px;text-align:left}
.pct{margin:0;color:#6b6b73;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tick{position:relative;height:58px;margin-top:6px}
.tick>div{position:absolute;inset:0;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.tick>div.out{opacity:0;transform:translateY(-8px)}
.tick>div.pre{opacity:0;transform:translateY(8px)}
.tick small{display:block;color:#6b6b73;font-size:13px;font-weight:500}
.tick b{display:block;margin-top:2px;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.4px}
.pa-page .pa-f.hit{background:#fff1a8;box-shadow:0 0 0 2px #f2c94c}
@media (max-width:600px){.fx-pa{flex-direction:column;gap:18px}.pa-side{text-align:center;width:auto}.orb{width:170px;height:170px}}

/* ── Fragment 2 : conditions ── */
.mini-card{width:min(340px,100%);padding:6px 18px 4px;border-radius:22px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.08)}
.mini-h{margin:12px 0 2px;font-size:15px;font-weight:600;letter-spacing:-.2px}
.crow{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 0}
.crow+.crow{border-top:.5px solid #e4e4e7}
.crow .c{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1.6px solid rgba(0,0,0,.3);transition:background-color .35s,border-color .35s}
.crow .c svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.crow.done .c{background:#09090b;border-color:#09090b}
.crow.done .c svg{opacity:1}
.crow b{display:block;font-size:15px;font-weight:400;transition:color .3s}
.crow div span{display:block;margin-top:2px;color:#52525b;font-size:12.5px;transition:color .3s}
.crow.soon div span{color:#a15c00}
.crow.done b{color:#6b6b73;text-decoration:line-through}
.crow.done div span{color:#6b6b73}

/* ── Fragment 3 : visite Domodo ── */
.fx-visit{display:flex;flex-direction:column;align-items:center;gap:10px}
.push{display:flex;gap:10px;align-items:flex-start;width:min(320px,100%);padding:11px 13px;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.1);text-align:left;transition:opacity .45s var(--sheet),transform .55s var(--sheet)}
.push>img{flex:none;width:34px;height:34px;padding:9px 5px;border-radius:9px;background:#0b0b0c;object-fit:contain}
.push>div{flex:1;min-width:0}
.push header{display:flex;justify-content:space-between;align-items:baseline}
.push header b{font-size:13.5px;font-weight:600}
.push time{color:#86868b;font-size:12px}
.push p{margin:1px 0 0;color:#1d1d1f;font-size:13.5px;line-height:1.35}
.push p b{font-weight:600}
.found{display:flex;align-items:center;gap:10px;width:min(320px,100%);padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(21,128,61,.25),0 8px 24px rgba(0,0,0,.06);text-align:left;transition:opacity .45s var(--sheet),transform .55s var(--sheet)}
.found .av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#fff,#e9edf5);box-shadow:0 0 0 .5px rgba(0,0,0,.08) inset;font-size:13px;font-weight:600}
.found small{display:block;color:#15803d;font-size:11.5px;font-weight:600}
.found b{display:block;font-size:15px;font-weight:600}
.go{display:flex;align-items:center;justify-content:center;gap:8px;width:min(320px,100%);height:46px;border:0;border-radius:23px;background:#09090b;color:#fff;font:600 15px var(--app);transition:transform .16s,background-color .3s,opacity .45s var(--sheet)}
.go.press{transform:scale(.96)}
.go.ok{background:#15803d}
.go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-visit .hide{opacity:0;transform:translateY(10px)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Fragment 4 : rendez-vous en une phrase ── */
.fx-rdv{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%}
.title-field,.sugg{width:min(520px,100%);margin:0 auto}
.title-field{min-height:68px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.08)}
.title-field p{margin:0;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.4px}
.title-field mark{background:none;color:#0a84ff}
.title-field .ghost{color:#9a9aa0}
.caret{display:inline-block;width:2px;height:26px;margin:0 1px -5px;background:#0a84ff;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.sugg{margin-top:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.05);overflow:hidden}
.sugg:empty{display:none}
.srow{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 16px;animation:pop .3s var(--ease) both}
.srow+.srow{border-top:.5px solid #e4e4e7}
.srow svg{flex:none;width:18px;height:18px;fill:none;stroke:#6b6b73;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srow b{display:block;font-size:15.5px;font-weight:500}
.srow span{display:block;color:#6b6b73;font-size:13px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Fragment 5 : voix ── */
.fx-voice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%}
.bubble-u{align-self:flex-end;max-width:86%;padding:10px 15px;border-radius:20px 20px 7px 20px;background:#09090b;color:#fafafa;font-size:15px;line-height:21px;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bubble-u.on{opacity:1;transform:none}
.dict{width:100%;max-width:360px;padding:8px;border-radius:26px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.1)}
.dict p{min-height:44px;margin:0;padding:8px 10px 0;font-size:15px;line-height:21px}
.dict p:empty::before{content:"Je t\2019écoute…";color:#86868b}
.dict-bar{display:flex;align-items:center;gap:8px}
.dict-bar>span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;color:#6b6b73}
.dict-bar>span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dict-bar .ok{background:#09090b;color:#fff}
.wave{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:24px}
.wave i{width:3px;height:30%;border-radius:2px;background:#09090b;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:-.2s}.wave i:nth-child(3n){animation-delay:-.45s}.wave i:nth-child(5n){animation-delay:-.7s}
@keyframes wave{0%,100%{height:25%}50%{height:100%}}
.dict.idle .wave i{animation:none;height:20%;opacity:.3}

/* ── Fragment 6 : portail à votre marque ── */
.fx-portal{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.ag-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;border-radius:999px;background:rgba(0,0,0,.05)}
.ag{display:grid;place-items:center;height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;transition:background-color .3s,box-shadow .3s}
.ag .wm{filter:grayscale(1);opacity:.35;transition:filter .35s,opacity .35s}
.ag:hover .wm{opacity:.65}
.ag.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06)}
.ag.on .wm{filter:none;opacity:1}
.mini-portal{--acc:#003da5;display:grid;grid-template-columns:120px 1fr;width:min(560px,100%);height:240px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 20px 50px rgba(0,0,0,.1);overflow:hidden;font-family:var(--font);text-align:left}
.mini-portal aside{display:flex;flex-direction:column;gap:8px;padding:16px 12px;background:#fafafa;border-right:1px solid #f0f0f1}
.mp-logo{display:block;min-height:24px;margin-bottom:8px}
.mp-logo .wm{transform-origin:left center}
.mini-portal aside i{display:block;height:8px;border-radius:4px;background:#ececee}
.mini-portal aside i.on{background:var(--acc);opacity:.85;transition:background-color .4s}
.mini-portal aside i:nth-child(3){width:80%}.mini-portal aside i:nth-child(4){width:70%}.mini-portal aside i:nth-child(5){width:60%}
.mp-main{padding:16px 18px}
.mp-main small{display:block;color:#86868b;font-size:11px}
.mp-main b{display:block;margin-top:4px;font-size:19px;font-weight:400;letter-spacing:-.03em}
.mp-main b span{color:#a1a1aa}
.mp-seg{display:flex;gap:3px;margin:12px 0}
.mp-seg i{flex:1;height:3px;border-radius:2px;background:#e4e4e7}
.mp-seg i.d{background:#09090b}
.mp-seg i.a{background:var(--acc);transition:background-color .4s}
.mp-btn{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:7px;background:var(--acc);color:#fff;font-size:11.5px;font-weight:500;transition:background-color .4s}
.mp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mp-cards img{width:100%;aspect-ratio:4/3;border-radius:8px;object-fit:cover}
@media (max-width:600px){.mini-portal{grid-template-columns:84px 1fr;height:230px}.ag{padding:0 10px;height:32px}}

/* Logos de bannières recréés en texte */
.wm{display:inline-flex;align-items:baseline;gap:1px;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:800;white-space:nowrap;line-height:1}
.wm-remax{font-size:13px;letter-spacing:-.02em;color:#dc1c2e;padding-bottom:2px;border-bottom:2.5px solid #003da5}
.wm-remax i{font-style:normal;color:#003da5}
.wm-rlp{padding:3px 5px;background:#d71920;color:#fff;font-size:8.5px;letter-spacing:.04em}
.wm-sutton{flex-direction:column;align-items:center;gap:1px;color:#0b2c5f;font-size:12px;letter-spacing:.14em}
.wm-sutton small{font-size:5.5px;letter-spacing:.3em;color:#c8102e}
.wm-via{font-size:9.5px;letter-spacing:.06em;color:#3b3b3b;font-weight:700}
.wm-via b{color:#c8102e;font-weight:800}
.wm-c21{padding:3px 5px;background:#252526;color:#beaf87;font-size:8.5px;letter-spacing:.06em}

/* ═══ Essayez-la : scène sombre ═══ */
.try2{margin:0 12px;padding:var(--sec) var(--gutter);border-radius:32px;background:radial-gradient(60% 70% at 72% 45%,#1b1c20 0%,#0a0a0b 55%,#050506 100%);color:#f7f8f8;overflow:hidden;position:relative}
.try2::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%);pointer-events:none}
.try2-in{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:var(--max);margin:0 auto}
.try2 .eyebrow{color:#8a8a93}
.try2 h2{font-size:clamp(40px,4.4vw,60px);line-height:1.02;letter-spacing:-.045em}
.try2 h2 span{color:#6b6b73}
.try2-steps{margin:40px 0 0;padding:0;list-style:none}
.try2-steps li{position:relative;display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08);opacity:.4;transition:opacity .4s}
.try2-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.try2-steps li.on,.try2-steps li.done{opacity:1}
.try2-steps .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#a1a1aa;font-family:var(--mono);font-size:11px;transition:background-color .35s,border-color .35s,color .35s}
.try2-steps li.on .n{border-color:#fff;color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.try2-steps li.done .n{border-color:var(--live);background:var(--live);color:#052e12;font-size:0}
.try2-steps li.done .n::before{content:"✓";font-size:13px;font-weight:700}
.try2-steps b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em}
.try2-steps p{margin:4px 0 0;color:#8a8a93;font-size:14.5px}
.try2-actions{display:flex;gap:10px;margin-top:28px}
.try2-go,.try2-again{display:inline-flex;align-items:center;height:46px;padding:0 22px;border:0;border-radius:999px;background:#fff;color:#0a0a0b;font-size:14.5px;font-weight:500;transition:transform .16s var(--ease),background-color .2s}
.try2-go:hover{background:#e8e8ea}
.try2-go:active,.try2-again:active{transform:scale(.97)}
.try2-again{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.try2-go[hidden],.try2-again[hidden]{display:none}
.try2-fit{position:relative}
.try2-stage{position:absolute;left:0;top:0;width:760px;height:720px;transform-origin:0 0}
.try2-glow{position:absolute;right:20px;top:60px;width:420px;height:600px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);filter:blur(20px);pointer-events:none}
.try2-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.try2-path path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.try2-stage.sent .try2-path{opacity:0;transition:opacity .4s}
.try2-doc{--rx:0deg;--ry:0deg;position:absolute;left:20px;top:170px;width:236px;padding:0;border:0;background:none;cursor:grab;perspective:900px;z-index:3;transition:opacity .4s,transform .75s var(--sheet)}
.try2-paper{position:relative;display:block;width:236px;height:305px;border-radius:4px;background:#fff;overflow:hidden;transform:rotate(-6deg) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 30px 60px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.35);transition:transform .25s ease-out}
.try2-paper .pa-tfit{position:absolute;inset:0;display:block}
.pa-tscale{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,.38))}
.try2-tag{position:absolute;left:28px;top:322px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e4e4e7;font-size:12.5px;white-space:nowrap}
.try2-tag i{padding:3px 6px;border-radius:6px;background:#d93025;color:#fff;font-size:9.5px;font-style:normal;font-weight:700}
.try2-stage.flying .try2-doc{transform:translate(440px,190px) scale(.28) rotate(6deg);opacity:0}
.try2-stage.sent .try2-doc{opacity:0;pointer-events:none;transform:translate(440px,190px) scale(.28)}
.try2-stage.dragging .try2-doc{opacity:.45}
.try2-hand{position:absolute;left:150px;top:300px;z-index:4;width:34px;height:34px;pointer-events:none;animation:handGo 3.6s cubic-bezier(.45,0,.25,1) infinite}
.try2-hand svg{width:100%;height:100%;fill:#fff;stroke:#0a0a0b;stroke-width:1.4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.try2-ghost{position:absolute;left:96px;top:236px;z-index:3;width:110px;height:142px;border-radius:3px;background:rgba(255,255,255,.9);box-shadow:0 20px 40px rgba(0,0,0,.4);pointer-events:none;opacity:0;animation:ghostGo 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes handGo{0%{transform:translate(0,0);opacity:0}10%{opacity:1;transform:translate(0,0) scale(1)}20%{transform:translate(0,0) scale(.88)}62%{transform:translate(400px,40px) scale(.88)}72%{transform:translate(400px,40px) scale(1);opacity:1}86%,100%{transform:translate(400px,40px);opacity:0}}
@keyframes ghostGo{0%,18%{opacity:0;transform:translate(0,0) rotate(-6deg) scale(1)}24%{opacity:.85}62%{opacity:.85;transform:translate(400px,40px) rotate(4deg) scale(.6)}72%,100%{opacity:0;transform:translate(400px,40px) scale(.4)}}
.try2-stage.used .try2-hand,.try2-stage.used .try2-ghost{display:none}
.try-phone{position:absolute;right:20px;top:12px;width:334px;height:697px;padding:11px;border-radius:56px;background:#0b0b0c;box-shadow:0 0 0 1px #2a2a2e inset,0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform .3s var(--ease)}
.try-screen{position:relative;width:312px;height:675px;overflow:hidden;border-radius:46px;background:#fafafa}
.try-screen>.app{position:absolute;left:0;top:0;transform:scale(.8)}
.try-island{position:absolute;top:21px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:10}
.try-drop{position:absolute;inset:11px;z-index:9;display:grid;place-items:center;border-radius:46px;border:2px dashed rgba(255,255,255,.5);background:rgba(10,10,12,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.try-drop span{padding:10px 16px;border-radius:999px;background:#fff;color:#0a0a0b;font-size:14px;font-weight:500}
.try-phone.wait .try-drop{opacity:.85}
.try-phone.over .try-drop{opacity:1}
.try-phone.over{transform:scale(1.02)}
.try-phone.got{animation:gotRing 1.1s ease-out}
@keyframes gotRing{0%{box-shadow:0 0 0 1px #2a2a2e inset,0 40px 80px rgba(0,0,0,.6),0 0 0 0 rgba(48,209,88,.55)}100%{box-shadow:0 0 0 1px #2a2a2e inset,0 40px 80px rgba(0,0,0,.6),0 0 0 28px rgba(48,209,88,0)}}
@media (max-width:900px){.try2{margin:0;border-radius:0}.try2-in{grid-template-columns:1fr}}

/* ═══ Interlude ═══ */
.interlude{height:190vh;padding:0}
.il-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.il-media{--g:0;position:relative;width:calc(62% + 38% * var(--g));height:calc(64% + 36% * var(--g));border-radius:calc(28px * (1 - var(--g)));overflow:hidden;background:#000}
.il-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.15 - .15 * var(--g)))}
.il-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);opacity:calc(.4 + .6 * var(--g))}
.il-copy{position:absolute;left:clamp(24px,6vw,96px);top:50%;max-width:560px;color:#fff;text-align:left;transform:translateY(calc(-50% + 30px * (1 - var(--g))));opacity:var(--g)}
.il-time{margin:0 0 10px;color:rgba(255,255,255,.6);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.il-copy h2{font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em}
.il-copy h2 span{color:rgba(255,255,255,.55)}
.il-push{position:absolute;right:clamp(16px,5vw,72px);bottom:clamp(24px,7vh,72px);display:flex;gap:11px;width:min(340px,calc(100% - 32px));padding:12px 13px;border-radius:20px;background:rgba(40,40,44,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 20px 50px rgba(0,0,0,.4);color:#fff;font-family:var(--app);text-align:left;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.il-media.show .il-push{opacity:1;transform:none}
.il-push>img{flex:none;width:36px;height:36px;padding:10px 6px;border-radius:9px;background:#0b0b0c;object-fit:contain}
.il-push header{display:flex;justify-content:space-between}
.il-push b{font-size:13.5px;font-weight:600}
.il-push time{color:rgba(255,255,255,.55);font-size:12px}
.il-push p{margin:2px 0 0;color:rgba(255,255,255,.88);font-size:13.5px;line-height:1.4}
@media (max-width:760px){.interlude{height:150vh}.il-media{width:calc(88% + 12% * var(--g));height:calc(70% + 30% * var(--g))}.il-veil{background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.15) 60%)}.il-copy{top:auto;bottom:170px;right:20px;transform:none}.il-copy h2{font-size:32px}.il-push{bottom:28px}}

/* ═══ Vous gardez la main ═══ */
.control{background:#000;color:#f7f8f8}
.control .eyebrow{color:#86868b}
.control .head h2 span{color:#5d5d63}
.control-stage{display:flex;flex-direction:column;align-items:center;margin:56px auto 0}
.control-stage .app.lite{width:min(420px,100%)}
.control-hint{margin:22px 0 0;color:#86868b;font-size:14px}
.app button.a-txtbtn,.app button.a-pill{border:0;font:inherit;font-size:14px;cursor:pointer}
.app button.a-txtbtn{background:transparent;color:var(--a-muted);font-weight:500}
.app button.a-pill{font-weight:600;transition:transform .15s,background-color .2s}
.app button.a-pill:active{transform:scale(.97)}

/* ═══ Faites connaissance ═══ */
.muse-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:var(--max);margin:64px auto 0}
.muse-card{margin:0;border-radius:28px;background:#f4f2ee;overflow:hidden;text-align:center;transition:transform .6s var(--ease)}
.muse-card:hover{transform:translateY(-6px)}
.muse-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.muse-card figcaption{padding:4px 20px 28px}
.muse-card b{display:block;font-size:21px;font-weight:500;letter-spacing:-.03em}
.muse-card span{display:block;margin-top:4px;color:var(--ink-3);font-size:15px}
.muse-card:nth-child(2){transition-delay:.06s}.muse-card:nth-child(3){transition-delay:.12s}
@media (max-width:760px){.muse-row{grid-template-columns:1fr}}

/* ═══ Avis ═══ */
.reviews{padding-left:0;padding-right:0;overflow:hidden}
.reviews .head{padding:0 var(--gutter)}
.rv-rows{display:grid;gap:14px;margin-top:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.rv-track{display:flex;gap:14px;width:max-content;animation:rvScroll 80s linear infinite}
.rv-row.rev .rv-track{animation-direction:reverse;animation-duration:90s}
.rv-rows:hover .rv-track{animation-play-state:paused}
.rv-card{flex:none;width:340px;margin:0;padding:26px 26px 28px;border-radius:24px;background:var(--bg-2)}
.rv-card .st{color:var(--ink);letter-spacing:2px;font-size:13px}
.rv-card blockquote{margin:12px 0 0;font-size:17px;line-height:1.45;letter-spacing:-.015em}
@keyframes rvScroll{to{transform:translateX(calc(-50% - 7px))}}

/* ═══ Questions ═══ */
.faq-list{max-width:760px;margin:56px auto 0}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:17px;font-weight:500;letter-spacing:-.015em;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin:-6px 0 22px;max-width:60ch;color:var(--ink-2);font-size:16px;line-height:1.6}

/* ═══ Appel final ═══ */
.cta{padding-top:0}
.cta-card{position:relative;isolation:isolate;max-width:var(--max);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gutter);border-radius:32px;background:#000;color:#fff;text-align:center;overflow:hidden}
.cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.6}
.cta-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.9))}
.cta-card .eyebrow{color:#86868b}
.cta-card h2{font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.045em}
.cta-card h2 span{color:rgba(255,255,255,.45)}
.cta-sub{margin:20px 0 0;color:rgba(255,255,255,.62);font-size:18px}

/* ═══ Pied de page ═══ */
.footer{display:flex;align-items:center;gap:20px;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:40px var(--gutter) 48px;color:var(--ink-3);font-size:13px}
.footer img{width:52px;height:auto;filter:invert(1)}
.footer nav{display:flex;gap:20px;margin-left:auto}
.footer a:hover{color:var(--ink)}

@media (max-width:600px){
  .nav-cta .l{display:none}.nav-cta .s{display:inline}
  .email-form{height:52px;padding-left:18px}
  .email-form button{padding:0 16px}
  .footer{flex-wrap:wrap}.footer nav{margin-left:0;width:100%}
  .rv-card{width:280px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}
.control-hint .replay{height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-size:13.5px}
.a-cancelled{display:inline-flex;align-items:center;min-height:34px;color:var(--a-muted);font-size:14px;font-weight:600}
@media (max-width:600px){
  .hero h1{font-size:clamp(38px,11.4vw,52px)}
  .pa-side{width:100%;max-width:280px;text-align:center}
  .tick b{font-size:19px}
}

.hero-visual{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.hero-visual::after{display:none}
.rv-row{overflow:hidden}

.hero{background:#050505}

/* Barre : pleine largeur et plate en haut, pilule étroite en verre au défilement */
.nav{top:0;padding:0}
.nav-pill{width:100%;margin-top:0;border-radius:0;transition:width .5s var(--sheet),margin-top .5s var(--sheet),border-radius .5s var(--sheet),background-color .4s,border-color .4s,box-shadow .4s,backdrop-filter .4s}
.nav-row{height:72px;padding:0 clamp(16px,2.6vw,40px);transition:height .5s var(--sheet),padding .5s var(--sheet),opacity .18s ease}
.nav.glass .nav-pill,.nav.open .nav-pill{width:min(520px,calc(100% - 24px));margin-top:12px;border-radius:28px}
.nav.glass .nav-row,.nav.open .nav-row{height:56px;padding:0 8px}
.nav.swap .nav-row{opacity:0}
.nav.open .nav-row{opacity:1}

/* ═══ Verre : les cartes de fonctions flottent sur des halos de couleur douce ═══ */
.bento-sec{position:relative;isolation:isolate;overflow:hidden}
.glass-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.glass-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.glass-bg i:nth-child(1){left:6%;top:24%;width:44vw;height:44vw;max-width:620px;max-height:620px;background:#c9dcff}
.glass-bg i:nth-child(2){right:4%;top:34%;width:38vw;height:38vw;max-width:540px;max-height:540px;background:#d9f2e2;animation-delay:-6s}
.glass-bg i:nth-child(3){left:30%;bottom:4%;width:40vw;height:40vw;max-width:560px;max-height:560px;background:#fde7cf;animation-delay:-12s}
.glass-bg i:nth-child(4){right:28%;top:12%;width:24vw;height:24vw;max-width:340px;max-height:340px;background:#ead9ff;animation-delay:-3s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.08)}}
.cell{background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,10,11,.03),0 24px 60px rgba(10,10,11,.07);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7)}
.fx::before{display:none}
.mini-card,.push,.found,.title-field,.sugg,.dict,.mini-portal{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
.ag-row{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.orb .disc{box-shadow:0 0 0 1px rgba(255,255,255,.9),0 16px 40px rgba(0,0,0,.1)}
.orb .badge{border-color:#fff}
/* Rendez-vous : on voit que c'est la feuille de l'agenda */
.sheet-head{display:flex;align-items:center;justify-content:space-between;width:min(520px,100%);margin:0 auto 10px;padding:0 4px;font-size:15px;color:#52525b}
.sheet-head b{color:#09090b;font-size:16px;font-weight:600}
.sheet-head .save{color:#0a84ff;font-weight:600}
@media (prefers-reduced-motion:reduce){.glass-bg i{animation:none}}

.glass-bg i{opacity:.85;filter:blur(80px)}
.cell{background:rgba(255,255,255,.38)}

/* ═══ v7b ═══ */
/* Logo toujours blanc : la pilule reste sombre partout */
.nav .nav-logo img{filter:none!important}
.nav.glass .nav-pill{background:rgba(18,18,20,.62)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 10px 30px rgba(0,0,0,.18)!important}
.nav .nav-burger{color:#fff!important}
.nav .nav-cta{background:#fff!important;color:#0a0a0b!important}
.nav .nav-menu a{color:#fff!important}
.nav.open .nav-pill{background:rgba(14,14,16,.92)!important}

/* Héros : le bloc noir se rogne et s'arrondit au défilement */
.hero{--hp:0;clip-path:inset(0 calc(var(--hp) * 12px) 0 calc(var(--hp) * 12px) round 0 0 calc(var(--hp) * 32px) calc(var(--hp) * 32px))}

/* Avis du héros : deux colonnes en verre sombre, de chaque côté du téléphone */
.hero-rv{position:absolute;top:6%;bottom:16%;left:9%;right:9%;display:flex;justify-content:space-between;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent)}
.hrv-col{width:23%;overflow:hidden;pointer-events:auto}
.hrv-track{display:flex;flex-direction:column;gap:12px}
.hrv-col.up .hrv-track{animation:hrvUp 40s linear infinite}
.hrv-col.down .hrv-track{animation:hrvDown 46s linear infinite}
.hrv-col:hover .hrv-track{animation-play-state:paused}
@keyframes hrvUp{to{transform:translateY(calc(-50% - 6px))}}
@keyframes hrvDown{from{transform:translateY(calc(-50% - 6px))}to{transform:translateY(0)}}
.hrv{margin:0;padding:18px 18px 20px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:left}
.hrv p{margin:0;color:#fff;letter-spacing:2px;font-size:11px}
.hrv blockquote{margin:8px 0 0;color:rgba(255,255,255,.86);font-size:15px;line-height:1.45;letter-spacing:-.01em}
.hero-rv-m{display:none}
@media (max-width:900px){
  .hero-rv{display:none}
  .hero-rv-m{display:block;margin:26px calc(var(--gutter) * -1) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .hrv-row{display:flex;gap:10px;width:max-content;animation:hrvSide 60s linear infinite}
  .hrv-row .hrv{width:240px;flex:none;padding:14px 16px}
  .hrv-row .hrv blockquote{font-size:14px}
  @keyframes hrvSide{to{transform:translateX(calc(-50% - 5px))}}
}

/* Verre sur une vraie photo floutée (aucun dégradé décoratif) */
.glass-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.glass-bg i{display:none}
.glass-bg img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:.9}
.bento-sec .head h2 span{color:rgba(10,10,11,.38)}
.cell{background:rgba(255,255,255,.5)}

/* Portail : un seul logo à la fois, sans fond, couleur fluide */
@property --acc{syntax:'<color>';inherits:true;initial-value:#dc1c2e}
.ag-row{display:none}
.ag-one{display:flex;flex-direction:column;align-items:center;gap:12px}
.ag-stage{position:relative;display:grid;place-items:center;width:240px;height:44px;cursor:pointer}
.ag-mark{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px) scale(.96);filter:blur(4px);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease)}
.ag-mark.on{opacity:1;transform:none;filter:none}
.ag-dots{display:flex;gap:8px}
.ag-dot{display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;background:none}
.ag-dot i{width:6px;height:6px;border-radius:50%;background:rgba(10,10,11,.22);transition:width .4s var(--ease),background-color .4s}
.ag-dot.on i{width:18px;border-radius:3px;background:var(--acc,#0a0a0b)}
.fx-portal{--acc:#dc1c2e}
.mini-portal{transition:--acc .7s var(--ease)}
.mini-portal aside i.on,.mp-seg i.a,.mp-btn{transition:background-color .7s var(--ease)}
.mp-logo{transition:opacity .22s,transform .22s}
.mp-logo.swap{opacity:0;transform:translateY(-4px)}
.wm2{display:inline-block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;line-height:1}
.wm2.remax{color:#dc1c2e;font-size:26px;font-weight:800;letter-spacing:-.02em}
.wm2.rlp{color:#ea0029;font-size:19px;font-weight:700;letter-spacing:.06em}
.wm2.sutton{color:#0b2c5f;font-size:28px;font-weight:300;letter-spacing:.02em;font-family:Georgia,"Times New Roman",serif}
.wm2.via{color:#00467f;font-size:23px;font-weight:600;letter-spacing:-.01em}
.wm2.c21{color:#a18e5e;font-size:20px;font-weight:600;letter-spacing:.12em}
.mp-logo .wm2{font-size:13px}
.mp-logo .wm2.sutton{font-size:15px}

/* Pied de page en noir : logo blanc */
.footer{max-width:none;margin:0;padding:40px max(var(--gutter),calc((100% - var(--max)) / 2)) 48px;background:#050505;color:#86868b}
.footer img{filter:none}
.footer a:hover{color:#fff}

/* Avis : mur pâle sur tout le héros, colonnes qui montent et descendent */
.hero-rv{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:0 16px;opacity:.35;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 34% 60% at 50% 46%,transparent 40%,#000 75%),linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 34% 60% at 50% 46%,transparent 40%,#000 75%),linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent);mask-composite:intersect}
.hrv-col{width:auto;pointer-events:none}
.hrv-col.slow .hrv-track{animation-duration:58s}
.hrv{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
.hrv blockquote{color:rgba(255,255,255,.7)}
.hero-copy,.hero-visual{position:relative;z-index:1}
@media (max-width:900px){.hero-rv{display:grid;grid-template-columns:repeat(2,1fr);opacity:.22;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}.hrv-col:nth-child(n+3){display:none}}
/* Mur d'avis : pleine largeur, colonnes collées, derrière le texte et le téléphone */
.hero-rv{gap:10px;padding:0 10px;grid-template-columns:repeat(6,1fr);opacity:.28;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent)}
.hrv-track{gap:10px}
.hrv{padding:16px 16px 18px;border-radius:16px}
.hrv blockquote{font-size:14px}
@media (max-width:900px){.hero-rv{grid-template-columns:repeat(3,1fr);gap:8px;padding:0 8px;opacity:.2}.hrv-col:nth-child(n+3){display:block}.hrv-col:nth-child(n+4){display:none}.hrv{padding:12px}.hrv blockquote{font-size:12px}}

/* ═══ Section « Un CRM qui ne dort jamais », façon Eney ═══ */
/* Anneau de compétences autour de la mascotte */
.skills{display:grid;grid-template-columns:1fr minmax(260px,340px) 1fr;grid-template-rows:auto auto;gap:24px 40px;align-items:center;max-width:var(--max);margin:56px auto 0}
.sk-muse{grid-column:2;grid-row:1/span 2;margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#f3efe8;box-shadow:0 30px 70px rgba(10,10,11,.10)}
.sk-muse img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.sk{text-align:center;max-width:260px;justify-self:center}
.sk-tl,.sk-bl{grid-column:1}.sk-tr,.sk-br{grid-column:3}
.sk-tl,.sk-tr{grid-row:1}.sk-bl,.sk-br{grid-row:2}
.sk-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(10,10,11,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sk-ic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sk b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.sk p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.45}
@media (max-width:900px){.skills{grid-template-columns:1fr 1fr;gap:28px 20px}.sk-muse{grid-column:1/-1;grid-row:1;width:220px;justify-self:center}.sk-tl,.sk-tr,.sk-bl,.sk-br{grid-column:auto;grid-row:auto}}

/* Grille de cartes : visuel en haut (panneau), titre et phrase centrés dessous */
.bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:88px}
.c-wide{grid-column:auto}
.cell{min-height:0;padding:14px;border-radius:30px}
.fx{min-height:340px;padding:64px 24px 28px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);overflow:hidden}
.cell-copy{padding:22px 24px 14px;text-align:center}
.cell-copy h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.cell-copy p{max-width:38ch;margin:8px auto 0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
/* La demande, en bulle grise en haut à droite */
.ask{position:absolute!important;top:16px;right:16px;max-width:70%;padding:8px 14px;border-radius:18px 18px 6px 18px;background:#e9e9eb;color:#1d1d1f;font:500 13.5px/1.3 var(--app);text-align:left;z-index:2}
/* La mascotte qui dépasse en bas à gauche */
.peek{position:absolute!important;left:14px;bottom:12px;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(10,10,11,.12);z-index:2}
.fx-pa{gap:28px}
.orb{width:180px;height:180px}
.pa-side{width:190px}
.tick b{font-size:18px}
.mini-portal{height:220px}
@media (max-width:900px){.bento{grid-template-columns:1fr}.fx{min-height:300px;padding-top:60px}.fx-pa{flex-direction:column}}
.glass-bg img{opacity:.32}
.bento-sec{background:#f7f7f5}
.cell{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.95)}
.fx{background:#f1f1ef;border:0;padding-bottom:78px}
.mini-card,.push,.found,.title-field,.sugg,.dict,.mini-portal{background:#fff!important}
@media (max-width:600px){.sheet-head{font-size:13px}.sheet-head b{font-size:14px}.fx{padding-left:16px;padding-right:16px}}

/* Fond uni, aucun dégradé ni photo floutée */
.glass-bg{display:none!important}
.bento-sec{background:var(--bg)}
.cell{background:#fff;border:1px solid #ececea;box-shadow:0 1px 2px rgba(10,10,11,.03);backdrop-filter:none;-webkit-backdrop-filter:none}
.fx{background:#f4f4f2}
.sk-ic{background:#fff;border:1px solid #ececea;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Saisie intelligente : la suite grise apparaît en fondu, puis une vague gris → bleu à l'acceptation */
.title-field mark{color:inherit}
.title-field .wv{display:inline-block;animation:wv .5s cubic-bezier(.22,1,.36,1) both}
.title-field .wv.typed{animation-name:wvT}
@keyframes wv{0%{color:#9a9aa0}100%{color:#0a84ff}}
@keyframes wvT{0%{color:#09090b}100%{color:#0a84ff}}
.title-field .gi{display:inline-block;animation:gi .35s ease both}
@keyframes gi{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:none}}
.title-field .ghost{color:#9a9aa0}
@media (prefers-reduced-motion:reduce){.title-field .wv{animation:none;color:#0a84ff}}

/* ── Cartes supplémentaires ── */
.fx-list{display:grid;place-items:center}
.mail-mini{width:min(380px,100%);padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.08);text-align:left}
.mail-mini p{margin:0}
.mm-to{display:flex;align-items:baseline;gap:8px;padding-bottom:10px;border-bottom:.5px solid #e4e4e7;font-size:13px;color:#6b6b73}
.mm-to b{color:#09090b;font-weight:600}
.mm-to em{font-style:normal;font-size:12px}
.mm-subj{margin-top:10px!important;font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.mm-body{margin-top:6px!important;color:#52525b;font-size:14px;line-height:1.5}
.mm-body mark{padding:0 4px;border-radius:5px;background:#eef4ff;color:#1d4ed8;font-weight:600;transition:opacity .25s}
.mm-body mark.fade{opacity:0}
.mm-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px!important;color:#6b6b73;font-size:12.5px}
.mm-foot b{padding:7px 14px;border-radius:10px;background:#09090b;color:#fff;font-size:13px;font-weight:600}
.tl-card .tl{position:relative;display:flex;gap:12px;padding:9px 0 9px 2px}
.tl-card .tl i{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;border:2px solid #d4d4d8;background:#fff}
.tl-card .tl i.d{border-color:#09090b;background:#09090b}
.tl-card .tl:not(:last-child)::after{content:"";position:absolute;left:7px;top:25px;bottom:-5px;width:1.5px;background:#e4e4e7}
.tl-card b{display:block;font-size:14.5px;font-weight:500}
.tl-card span{display:block;color:#6b6b73;font-size:12.5px}
.inbox{padding:12px 14px}
.ib-row,.sy-row{display:flex;align-items:center;gap:10px}
.ib-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#fff,#e9edf5);box-shadow:0 0 0 .5px rgba(0,0,0,.08) inset;font-size:12.5px;font-weight:600}
.ib-row div,.sy-row div{flex:1;min-width:0}
.ib-row b,.sy-row b{display:block;font-size:14.5px;font-weight:600}
.ib-row span,.sy-row span{display:block;color:#6b6b73;font-size:12.5px}
.ib-row time{color:#86868b;font-size:12px}
.ib-ghost{margin-top:12px;padding:10px 12px;border-radius:14px;background:#f4f4f5}
.ib-ghost small{display:block;color:#6b6b73;font-size:11.5px;font-weight:600}
.ib-ghost p{margin:4px 0 0;color:#9a9aa0;font-size:13.5px;line-height:1.45}
.ib-ghost b{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:999px;background:#09090b;color:#fff;font-size:12px;font-weight:600}
.sync{padding:14px}
.sy-arrow{display:grid;place-items:center;height:28px}
.sy-arrow i{width:1.5px;height:100%;background:repeating-linear-gradient(#c4c4c8 0 4px,transparent 4px 8px);animation:syDash 1s linear infinite}
@keyframes syDash{to{background-position:0 8px}}
.sy-row.ok svg{width:20px;height:20px;fill:none;stroke:#15803d;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── Ça vous dit quelque chose? ── */
.pain-list{max-width:900px;margin:56px auto 0;padding:0;list-style:none}
.pain-list li{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.pain-list li:last-child{border-bottom:1px solid var(--line)}
.pain{margin:0;color:var(--ink-3);font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;text-decoration:line-through;text-decoration-color:rgba(10,10,11,.25);text-decoration-thickness:1.5px}
.fix{margin:0;color:var(--ink);font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-.025em}
.fix::before{content:"→";margin-right:12px;color:var(--ink-4)}
@media (max-width:760px){.pain-list li{grid-template-columns:1fr;gap:8px}}

/* Rendez-vous : phrase brute → correction en vague → formulaire rempli */
.title-field p{transition:opacity .16s ease,filter .16s ease}
.title-field p.fixing{opacity:0;filter:blur(3px)}
.title-field .cw{display:inline-block;animation:cwIn .5s cubic-bezier(.22,1,.36,1) both}
.title-field .cw.hi{animation-name:cwHi}
@keyframes cwIn{from{opacity:0;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes cwHi{0%{opacity:0;transform:translateY(4px);filter:blur(2px);color:#09090b}60%{opacity:1;transform:none;filter:none;color:#09090b}100%{color:#0a84ff}}
.rdv-form{width:min(520px,100%);margin:10px auto 0;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.05);overflow:hidden;font-family:var(--app)}
.rf{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 16px}
.rf+.rf{border-top:.5px solid #e4e4e7}
.rf svg{flex:none;width:18px;height:18px;fill:none;stroke:#9a9aa0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.rf .k{flex:none;width:70px;color:#9a9aa0;font-size:14px;transition:color .3s}
.rf .v{flex:1;min-width:0;font-size:15px;font-weight:500;color:#09090b;opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.rf.set svg{stroke:#0a84ff}
.rf.set .k{color:#6b6b73}
.rf.set .v{opacity:1;transform:none}
@media (max-width:600px){.rf .k{width:58px;font-size:13px}.rf .v{font-size:14px}}

.title-field .wd{white-space:nowrap}

.cal-dot{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#16a34a;vertical-align:1px}

/* Correction sur place : seul le mot fautif s'efface et revient corrigé */
.title-field .wd{display:inline;color:#09090b;transition:color .45s ease,opacity .14s ease,filter .14s ease}
.title-field .wd.out{opacity:0;filter:blur(3px)}
.title-field .wd.hi{color:#0a84ff}
.title-field .wd .cw{display:inline-block;animation:cwIn .4s cubic-bezier(.22,1,.36,1) both}

/* ═══ Anneau des irritants autour de la mascotte ═══ */
.pain-ring{position:relative;display:grid;grid-template-columns:1fr minmax(260px,330px) 1fr;grid-template-rows:auto repeat(3,auto);gap:26px 48px;align-items:center;max-width:var(--max);margin:64px auto 0}
.pr-cap{grid-column:1/-1;margin:0 0 6px;text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:12px}
.pr-muse{grid-column:2;grid-row:2/span 3;margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#f3efe8;box-shadow:0 30px 70px rgba(10,10,11,.10)}
.pr-muse img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.pr{max-width:300px}
.pr-l1,.pr-l2,.pr-l3{grid-column:1;justify-self:end;text-align:right}
.pr-r1,.pr-r2,.pr-r3{grid-column:3;justify-self:start;text-align:left}
.pr-l1,.pr-r1{grid-row:2}.pr-l2,.pr-r2{grid-row:3}.pr-l3,.pr-r3{grid-row:4}
/* légère courbe : le rang du milieu s'écarte, comme un cercle */
.pr-l2{transform:translateX(-28px)}.pr-r2{transform:translateX(28px)}
.pr-pain{margin:0;color:var(--ink-3);font-size:15.5px;text-decoration:line-through;text-decoration-color:rgba(10,10,11,.28);text-decoration-thickness:1.5px}
.pr-fix{margin:6px 0 0;color:var(--ink);font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
@media (max-width:900px){
  .pain-ring{grid-template-columns:1fr;gap:18px}
  .pr-muse{grid-column:1;grid-row:2;width:200px;justify-self:center}
  .pr{grid-column:1!important;grid-row:auto!important;justify-self:center!important;text-align:center!important;transform:none!important;max-width:340px}
}

/* Pied de page : logo géant coupé à mi-hauteur */
.footer{display:block;max-width:none;margin:0;padding:48px 0 0;background:#050505;color:#86868b;overflow:hidden}
.ft-row{display:flex;justify-content:space-between;gap:20px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);font-size:13px}
.ft-row nav{display:flex;gap:22px}
.ft-row a:hover{color:#fff}
.ft-giant{height:calc((100vw - 2 * var(--gutter)) * 406 / 1086 * .5);margin:clamp(40px,6vw,80px) var(--gutter) 0;overflow:hidden}
.ft-giant img{display:block;width:100%;height:auto;filter:none}

/* Visite Domodo : notification puis fiche OLA */
.fx-visit{gap:12px}
.dm-notif{display:flex;gap:11px;align-items:flex-start;width:min(360px,100%);padding:11px 13px;border-radius:20px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.1);text-align:left;font-family:var(--app);transition:opacity .45s var(--sheet),transform .55s var(--sheet)}
.dm-notif>img{flex:none;width:38px;height:38px;border-radius:9px}
.dm-notif>div{flex:1;min-width:0}
.dm-notif header{display:flex;justify-content:space-between;align-items:baseline}
.dm-notif header b{font-size:14px;font-weight:600}
.dm-notif time{color:#86868b;font-size:12px}
.dm-notif p{margin:1px 0 0;color:#1d1d1f;font-size:14px;line-height:1.35}
.dm-notif p b{font-weight:600}
.dm-notif p.sub{color:#6b6b73;font-size:13px}
.vcard{width:min(360px,100%);padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.08);text-align:left;font-family:var(--app);transition:opacity .45s var(--sheet),transform .55s var(--sheet)}
.vc-h{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.3px}
.vc-r{display:flex;align-items:center;gap:10px;min-height:38px;border-top:.5px solid #ececee;transition:opacity .35s ease,transform .35s var(--ease)}
.vc-r .k{flex:none;width:70px;color:#86868b;font-size:13.5px}
.vc-r .v{flex:1;font-size:14.5px;font-weight:500}
.found-tag{padding:2px 8px;border-radius:999px;background:rgba(21,128,61,.1);color:#15803d;font-size:11.5px;font-style:normal;font-weight:600}
.vcard .go{width:100%;margin-top:12px}
.fx-visit .hide,.vcard .vc-r.hide{opacity:0;transform:translateY(8px)}
.fx-visit>.push,.fx-visit>.found{display:none}

/* Appel final : noir uni, sans photo ni dégradé */
.cta-card{background:#050505}
.cta-card::after{display:none}

/* Panneaux de fonctions : l'interface flotte sur une vraie photo (aucun aplat, aucun dégradé) */
.fx{isolation:isolate;background:#111 var(--ph,none) center/cover no-repeat}
.fx>.ph{position:absolute!important;inset:0;z-index:-1;background:#111 var(--ph) center/cover no-repeat}
.fx::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.18);pointer-events:none}
.fx:has(>.ph)::after{z-index:-1}
.cell .fx{transition:background-size .8s var(--ease)}
.ask{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pct{color:rgba(255,255,255,.75)}
.tick small{color:rgba(255,255,255,.7)}
.tick b{color:#fff}
.orb .badge{border-color:#111}
.sheet-head{color:rgba(255,255,255,.8)}
.sheet-head b{color:#fff}
.sheet-head .save{color:#7ab8ff}
.bubble-u{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.peek{box-shadow:0 6px 16px rgba(0,0,0,.35)}
.fx .bubble-u{background:#fff;color:#09090b}
.fx .ag-dot i{background:rgba(255,255,255,.4)}
.fx .ag-dot.on i{background:#fff}
.fx .ag-mark .wm2{filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
.fx .ag-mark .wm2.sutton,.fx .ag-mark .wm2.via{color:#fff}

/* ── Réserver un rendez-vous : le formulaire se remplit pendant la frappe ── */
.fx-rdv{display:grid;place-items:center;padding-top:28px}
.bk{position:relative;width:min(440px,100%);padding:12px 14px 14px;border-radius:24px;background:rgba(250,250,250,.96);box-shadow:0 30px 70px rgba(0,0,0,.35);font-family:var(--app);text-align:left}
.bk-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 10px;font-size:14.5px;color:#52525b}
.bk-head b{color:#09090b;font-size:15.5px;font-weight:600}
.bk-save{color:#0a84ff;font-weight:600;transition:transform .15s}
.bk-save.press{transform:scale(.9)}
.bk-title{min-height:58px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.06)}
.bk-title p{margin:0;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.35px;color:#09090b}
.bk-title .ph{color:#9a9aa0}
.bk-title .rec{animation:recIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes recIn{0%{color:#09090b}100%{color:#0a84ff}}
.bk-rows{margin-top:10px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.06);overflow:hidden}
.bk-r{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px}
.bk-r+.bk-r{border-top:.5px solid #ececee}
.bk-r.two{padding:0}
.bk-r.two>div{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px}
.bk-r.two>div+div{border-left:.5px solid #ececee}
.bk-r .k,.bk-r.two .k{flex:none;width:76px;color:#86868b;font-size:13.5px}
.bk-r.two .k{width:auto}
.bk-r .v{flex:1;min-width:0;font-size:14.5px;font-weight:500;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-r .v:empty::before,[data-bf] .v:empty::before{content:attr(data-ph);color:#c7c7cc;font-weight:400}
[data-bf]{transition:background-color .6s ease}
[data-bf].flash{animation:bkFlash 1s ease}
@keyframes bkFlash{0%{background:rgba(10,132,255,.14)}100%{background:transparent}}
[data-bf].set .v{animation:bkIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes bkIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.bk-toast{position:absolute;left:50%;bottom:-18px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#09090b;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;transform:translate(-50%,8px);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.32,.72,0,1)}
.bk-toast.on{opacity:1;transform:translate(-50%,0)}
.bk-toast svg{width:17px;height:17px;fill:none;stroke:#30d158;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.bk-title p{font-size:17px;line-height:24px}.bk-r .k{width:66px;font-size:12.5px}.bk-r .v{font-size:13.5px}.bk-r.two>div{padding:0 12px}}
.bk{width:440px;max-width:100%}
/* Pied de page en rideau : fixe dessous, la page glisse pour le révéler */
.hero,.tools,main{position:relative;z-index:1}
.tools,main{background:var(--bg)}
main{border-radius:0 0 32px 32px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
body{padding-bottom:var(--fh,0px)}
.footer{position:fixed;left:0;right:0;bottom:0;z-index:0}
.ft-giant{height:calc((100vw - 2 * var(--gutter)) * 406 / 1086 * .66)}
.ft-giant img{transform:translateY(calc(var(--fp,0) * 12%));transition:transform .1s linear}

.fx-rdv{grid-template-columns:minmax(0,1fr)}
.fx-rdv .bk{justify-self:center}
@media (max-width:600px){
  .bk{padding:10px}
  .bk-head{font-size:12.5px;margin:0 2px 8px}
  .bk-head b{font-size:13.5px;white-space:nowrap}
  .bk-r.two{flex-direction:column;align-items:stretch}
  .bk-r.two>div+div{border-left:0;border-top:.5px solid #ececee}
  .bk-r.two .k{width:66px}
}

.footer{visibility:hidden}
body{background:var(--bg)}
/* ═══ Mosaïque : large + étroite, en zigzag ═══ */
@media (min-width:901px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1200px}
  .bento>.cell{grid-column:span 1}
  .bento>.cell:nth-child(1),.bento>.cell:nth-child(4),.bento>.cell:nth-child(5),.bento>.cell:nth-child(8){grid-column:span 2}
  .bento .fx{min-height:380px}
  .bento>.cell:nth-child(1) .fx,.bento>.cell:nth-child(5) .fx{min-height:420px}
  .bento>.cell:nth-child(2) .fx,.bento>.cell:nth-child(3) .fx,.bento>.cell:nth-child(6) .fx,.bento>.cell:nth-child(7) .fx{padding-left:18px;padding-right:18px}
}

/* ═══ Le CRM complet : grille sobre, sans animation ═══ */
.basics{padding-top:0}
.basics .head h2{font-size:clamp(30px,3.4vw,44px)}
.basics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:48px auto 0;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.basics-grid li{display:flex;align-items:center;gap:12px;min-height:72px;padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.basics-grid svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.basics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.basics-grid li{font-size:14px;padding:14px 14px;min-height:64px}}

/* ═══ Héros : rognage automatique au chargement ═══ */
@property --hp{syntax:'<number>';inherits:true;initial-value:0}
.hero{--hp:0;transition:--hp 1.4s cubic-bezier(.65,0,.25,1)}
.hero.cropped{--hp:1}

/* ═══ Héros : ordinateur + téléphone sur Inscriptions ═══ */
.hero-visual.dv{position:relative;left:auto;width:min(1180px,92vw);aspect-ratio:auto;margin:64px auto 0;padding-bottom:clamp(40px,6vw,90px);-webkit-mask-image:none;mask-image:none;transform:none}
.dv-desk{position:relative;width:88%;border-radius:14px;background:#1c1c1e;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.6);overflow:hidden}
.dv-bar{display:flex;gap:7px;align-items:center;height:30px;padding:0 14px;background:#232325;border-bottom:1px solid rgba(255,255,255,.06)}
.dv-bar i{width:10px;height:10px;border-radius:50%;background:#48484a}
.dv-fit{position:relative;aspect-ratio:1440/860;overflow:hidden;background:#f1f1f1}
.dk{position:absolute;left:0;top:0;width:1440px;height:860px;transform-origin:0 0;font-family:Geist,-apple-system,system-ui,sans-serif;color:#2b2b2b;text-align:left}
.dv-phone{position:absolute;right:0;bottom:0;width:23%;aspect-ratio:334/697;padding:3.2%;border-radius:15%/7.2%;background:#0b0b0c;box-shadow:0 0 0 1px #2a2a2e inset,0 40px 80px rgba(0,0,0,.65)}
.dv-phone .hero-screen2{position:relative;left:auto;top:auto;width:100%;height:100%;border-radius:12%/5.6%;overflow:hidden;background:#fafafa}
.dv-island{position:absolute;top:5%;left:50%;width:28%;height:3.6%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:5}
.dv-phone .in-island{display:none}
@media (max-width:900px){.hero-visual.dv{width:calc(100vw - 24px);margin-top:44px}.dv-desk{width:100%}.dv-phone{width:30%;right:2%;bottom:-6%}}

/* Écran Inscriptions (ordinateur) */
.dk-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk-pin{position:absolute;width:24px;height:24px;margin:-24px 0 0 -12px;border-radius:50%;background:#fff;box-shadow:0 1.5px 4px rgba(0,0,0,.18)}
.dk-pin::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#3d3d40}
.dk-cl{position:absolute;min-width:32px;height:32px;margin:-32px 0 0 -16px;padding:0 9px;border-radius:16px;background:#fff;box-shadow:0 1.5px 4px rgba(0,0,0,.22);font-size:14px;line-height:32px;font-weight:600;text-align:center;color:#16181c}
.dk-sel{position:absolute;width:62px;height:79px;margin:-79px 0 0 -31px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.42))}
.dk-panel{position:absolute;left:24px;top:24px;bottom:24px;width:376px;display:flex;flex-direction:column;background:rgba(251,251,249,.94);border:1px solid #fff;border-radius:22px;box-shadow:0 18px 60px rgba(45,45,45,.07),0 3px 9px rgba(45,45,45,.03);overflow:hidden}
.dk-head{display:flex;justify-content:space-between;align-items:center;padding:24px 22px 12px}
.dk-over{margin:0;color:#8f8f8f;font-size:9px;letter-spacing:1px;font-weight:500}
.dk-head h1{margin:6px 0 0;font-size:22px;font-weight:500;letter-spacing:-1px;line-height:1.25}
.dk-head h1 span{display:inline-flex;align-items:center;gap:4px;margin-left:9px;padding:4px 7px;border-radius:7px;background:#eaeaea;color:#666;font-size:11px;letter-spacing:0;vertical-align:middle}
.dk-head h1 span svg{width:10px;height:10px}
.dk-ic{display:flex;gap:4px;color:#3b3b3b}
.dk svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dk-ic svg{width:34px;height:34px;padding:8px}
.dk-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 22px 14px}
.dk-metrics b{display:flex;flex-direction:column;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #ececec;font-weight:400}
.dk-metrics strong{font-size:18px;font-weight:500;letter-spacing:-.5px}
.dk-metrics span{color:#8f8f8f;font-size:10px}
.dk-controls{display:flex;gap:10px;align-items:center;padding:0 22px 14px}
.dk-search{flex:1;display:flex;align-items:center;gap:9px;min-height:40px;padding:0 12px;border:1px solid #e1e1e1;border-radius:10px;background:rgba(255,255,255,.8);color:#9a9a9a;font-size:12px}
.dk-search svg{width:16px;height:16px}
.dk-toggle{display:flex;gap:2px;padding:3px;border-radius:8px;background:#eaeaea}
.dk-toggle i{display:grid;place-items:center;width:28px;height:26px;border-radius:5px;color:#989898}
.dk-toggle i.on{background:#fff;color:#3b3b3b;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.dk-toggle svg{width:15px;height:15px}
.dk-list{flex:1;overflow:hidden;padding:2px 22px 0}
.dk-card{padding:8px;margin-bottom:12px;border-radius:15px;background:#fff;border:1px solid #eaeaea;box-shadow:0 2px 6px rgba(43,43,43,.03)}
.dk-card.sel{border-color:#8a8a8a;box-shadow:0 0 0 1px #8a8a8a}
.dk-photo{position:relative;height:150px;border-radius:9px;overflow:hidden;background:#e6e6e6}
.dk-photo img{width:100%;height:100%;object-fit:cover}
.dk-photo span{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);color:#2b2b2b}
.dk-photo span svg{width:15px;height:15px}
.dk-body{padding:12px 6px 6px}
.dk-body strong{font-size:20px;font-weight:500;letter-spacing:-.7px}
.dk-body h2{margin:3px 0 0;font-size:12px;font-weight:500}
.dk-body p{margin:3px 0 0;color:#8e8e8e;font-size:10px}
.dk-specs{display:flex;gap:12px;margin-top:11px;padding-top:9px;border-top:1px solid #f0f0f0;color:#767676;font-size:10px}
.dk-specs span:last-child{margin-left:auto;font-size:9px}
.dk-foot{display:flex;justify-content:space-between;padding:12px 22px;border-top:1px solid #e8e8e8;background:#f7f7f7;color:#8f8f8f;font-size:9px}

.dk section,.dk-panel{padding:0!important;margin:0}
.hero-visual.dv{padding-bottom:clamp(56px,8vw,120px)}

.dk-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-phone{bottom:clamp(20px,3vw,44px)}

@media (max-width:900px){.hero-visual.dv{padding-bottom:26%}.dv-phone{bottom:4%}}

/* ═══ Le CRM complet : un vrai pipeline, puis la liste en une ligne ═══ */
.basics .head{margin-bottom:48px}
.kb-window{max-width:1120px;margin:0 auto;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #e8e8e6,0 30px 80px rgba(10,10,11,.08);overflow:hidden;font-family:Geist,-apple-system,system-ui,sans-serif}
.kb-bar{display:flex;gap:7px;align-items:center;height:30px;padding:0 14px;background:#f4f4f3;border-bottom:1px solid #ececea}
.kb-bar i{width:10px;height:10px;border-radius:50%;background:#dcdcd9}
.kb-top{display:flex;align-items:center;gap:8px;padding:16px 22px;border-bottom:1px solid #f0f0ee;font-size:13px;color:#6b6b73}
.kb-top b{margin-right:14px;color:#0a0a0b;font-size:17px;font-weight:600;letter-spacing:-.02em}
.kb-tab{padding:5px 11px;border-radius:7px}
.kb-tab.on{background:#f1f1ef;color:#0a0a0b;font-weight:500}
.kb-pipe{margin-left:auto;padding:5px 11px;border:1px solid #e8e8e6;border-radius:8px}
.kb-new{padding:7px 12px;border-radius:8px;background:#0a0a0b;color:#fff;font-weight:500}
.kb-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 22px 24px;background:#fafaf9;min-height:420px}
.kb-col header{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px;font-size:13px}
.kb-col header b{font-weight:600}
.kb-col header i{padding:1px 7px;border-radius:999px;background:#ececea;color:#6b6b73;font-size:11.5px;font-style:normal;font-weight:600}
.kb-col header span{margin-left:auto;color:#9a9aa0;font-size:12px}
.kb-card{position:relative;margin-bottom:10px;padding:12px 13px 10px;border-radius:12px;background:#fff;border:1px solid #ececea;box-shadow:0 1px 2px rgba(10,10,11,.03);transition:box-shadow .3s}
.kb-card b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.kb-card span{display:block;margin-top:2px;color:#86868b;font-size:12px}
.kb-card strong{display:block;margin-top:8px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kb-seg{display:flex;gap:2px;margin-top:9px}
.kb-seg i{flex:1;height:3px;border-radius:2px;background:#ececea}
.kb-seg i.d{background:#15803d}
.kb-card footer{display:flex;justify-content:flex-end;margin-top:8px}
.kb-card em{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f1f1ef;color:#52525b;font-size:9.5px;font-style:normal;font-weight:600}
.kb-card.lift{z-index:3;box-shadow:0 20px 40px rgba(10,10,11,.16)}
.feat-line{max-width:900px;margin:36px auto 0;text-align:center;color:var(--ink-3);font-size:15px;line-height:2}
.feat-line i{margin:0 8px;color:var(--ink-4);font-style:normal}
@media (max-width:900px){
  .kb-board{grid-template-columns:repeat(4,240px);overflow-x:auto;scrollbar-width:none}
  .kb-board::-webkit-scrollbar{display:none}
  .kb-top .kb-tab,.kb-top .kb-pipe{display:none}
  .feat-line{font-size:14px}
}

/* ═══ v8 ═══ */
/* Charbon au lieu du noir pur */
:root{--char:#18181b;--char-2:#202024;--char-line:rgba(255,255,255,.08)}
.hero{background:var(--char)!important}
.cta-card,.footer{background:var(--char)!important}
.hrv{background:rgba(255,255,255,.045)}

/* Héros : vrai mockup d'ordinateur portable + téléphone */
.hero-visual.dv{width:min(1120px,92vw)}
.lap{position:relative;width:84%;margin:0 0 0 2%}
.lap-lid{position:relative;padding:2.1% 2.1% 2.6%;border-radius:22px 22px 6px 6px;background:#0c0c0e;box-shadow:0 0 0 1.5px #3a3a3f inset,0 0 0 1px rgba(255,255,255,.04),0 40px 90px rgba(0,0,0,.55)}
.lap-cam{position:absolute;top:.9%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#26262a;box-shadow:0 0 0 1.5px #121214}
.lap-lid .dv-fit{border-radius:6px}
.lap-base{position:relative;height:clamp(12px,1.6vw,20px);margin:0 -6.5%;border-radius:2px 2px 18px 18px;background:#2c2c30;box-shadow:0 1px 0 #4a4a50 inset,0 18px 40px rgba(0,0,0,.5)}
.lap-base i{position:absolute;top:0;left:50%;width:15%;height:45%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#1f1f22}
.dv-phone{right:1%;bottom:0;width:22%}
.dv-desk{display:none}
@media (max-width:900px){.lap{width:100%;margin:0}.lap-lid{border-radius:12px 12px 4px 4px}.dv-phone{width:30%;right:0;bottom:2%}}

/* Irritants : la réponse d'OLA apparaît au survol */
.pr-cap span{color:var(--ink-4)}
.pr{position:relative;cursor:default;padding:12px 16px;border-radius:16px;transition:background-color .35s,box-shadow .35s,backdrop-filter .35s}
.pr .pr-pain{font-size:17px;color:var(--ink-2);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 55%/0 1.5px no-repeat;transition:background-size .45s var(--ease),color .3s}
.pr .pr-fix{max-height:0;margin:0;opacity:0;transform:translateY(-4px);overflow:hidden;transition:max-height .45s var(--ease),opacity .35s,transform .45s var(--ease),margin .45s}
.pr:hover,.pr:focus-visible,.pr.show{background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(255,255,255,.9),0 16px 40px rgba(10,10,11,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pr:hover .pr-pain,.pr:focus-visible .pr-pain,.pr.show .pr-pain{background-size:100% 1.5px;color:var(--ink-4)}
.pr:hover .pr-fix,.pr:focus-visible .pr-fix,.pr.show .pr-fix{max-height:80px;margin-top:6px;opacity:1;transform:none}
.pr-fix::before{content:"OLA  ";color:#0a84ff;font-size:12px;font-weight:600;letter-spacing:.02em}
@media (hover:none){.pr .pr-fix{max-height:80px;margin-top:6px;opacity:1;transform:none}.pr .pr-pain{background-size:100% 1.5px;color:var(--ink-3)}.pr-cap span{display:none}}

/* Fonctions : éléments flottants en verre */
.fx .mini-card,.fx .push,.fx .found,.fx .title-field,.fx .sugg,.fx .dict,.fx .mini-portal,.fx .vcard,.fx .dm-notif,.fx .mail-mini,.fx .bk,.fx .rdv-form{background:rgba(255,255,255,.74)!important;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 50px rgba(0,0,0,.25)!important}
.fx .bk-title,.fx .bk-rows{background:rgba(255,255,255,.6)}
.fx .orb .disc{box-shadow:0 0 0 6px rgba(255,255,255,.25),0 20px 50px rgba(0,0,0,.3)}
.fx .ask{border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ═══ Et tout ce qu'un CRM fait déjà : tuiles d'interface sur charbon ═══ */
.basics{margin:0 12px;padding:var(--sec) var(--gutter);border-radius:32px;background:var(--char);color:#f4f4f5}
.basics .eyebrow{color:#8a8a93}
.basics .head h2{font-size:clamp(36px,4.4vw,60px)}
.basics .head h2 span{color:#5d5d63}
.cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1120px;margin:0 auto}
.cg-t{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--char-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden}
.cg-t header b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.cg-t header span{display:block;margin-top:3px;color:#8a8a93;font-size:14px}
.cg-pipe{grid-column:span 3}
.cg-kb .kb-board{min-height:0;padding:0;background:transparent}
.cg-kb .kb-col header{color:#c7c7cc}
.cg-kb .kb-col header i{background:rgba(255,255,255,.08);color:#c7c7cc}
.cg-kb .kb-col header span{color:#6b6b73}
.cg-kb .kb-card{background:var(--char-2);border-color:var(--char-line);box-shadow:none;color:#f4f4f5}
.cg-kb .kb-card span{color:#8a8a93}
.cg-kb .kb-seg i{background:rgba(255,255,255,.08)}
.cg-kb .kb-seg i.d{background:#30d158}
.cg-kb .kb-card em{background:rgba(255,255,255,.08);color:#c7c7cc}
.cg-kb .kb-card.lift{box-shadow:0 20px 40px rgba(0,0,0,.5)}
.cg-tasks{margin:0;padding:0;list-style:none}
.cg-tasks li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--char-line)}
.cg-tasks li:first-child{border-top:0}
.cg-tasks li>i{flex:none;width:20px;height:20px;border-radius:6px;border:1.6px solid #5d5d63;transition:background-color .3s,border-color .3s}
.cg-tasks li.done>i{background:#30d158;border-color:#30d158}
.cg-tasks b{display:block;font-size:14px;font-weight:500;transition:color .3s}
.cg-tasks span{display:block;color:#8a8a93;font-size:12px}
.cg-tasks li.done b{color:#6b6b73;text-decoration:line-through}
.cg-flow{display:flex;flex-direction:column;align-items:flex-start}
.cg-flow .n{padding:8px 12px;border-radius:10px;background:var(--char-2);border:1px solid var(--char-line);font-size:13px;font-weight:500}
.cg-flow .n.on{border-color:rgba(48,209,88,.5);box-shadow:0 0 0 3px rgba(48,209,88,.12)}
.cg-flow>i{width:1.5px;height:14px;margin-left:18px;background:#3a3a3f}
.cg-flow .n{animation:flowOn 6s infinite}
.cg-flow .n:nth-of-type(2){animation-delay:1.2s}.cg-flow .n:nth-of-type(3){animation-delay:2.4s}.cg-flow .n:nth-of-type(4){animation-delay:3.6s}
@keyframes flowOn{0%,100%{border-color:var(--char-line);box-shadow:none}6%,18%{border-color:rgba(48,209,88,.55);box-shadow:0 0 0 3px rgba(48,209,88,.12)}}
.cg-day{display:flex;flex-direction:column;gap:8px}
.cg-day .ev{position:relative;padding:9px 12px 9px 15px;border-radius:10px;background:rgba(48,209,88,.12);overflow:hidden}
.cg-day .ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#30d158}
.cg-day .ev.b{background:rgba(10,132,255,.14)}
.cg-day .ev.b::before{background:#0a84ff}
.cg-day b{display:block;font-size:13px;font-weight:600}
.cg-day span{display:block;color:#8a8a93;font-size:12px}
.cg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cg-stats div{padding:12px;border-radius:12px;background:var(--char-2);border:1px solid var(--char-line)}
.cg-stats strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cg-stats span{display:block;color:#8a8a93;font-size:12px}
.cg-camp{margin:0;color:#8a8a93;font-size:13px}
.basics .feat-line{color:#8a8a93}
.basics .feat-line i{color:#4a4a50}
@media (max-width:900px){.basics{margin:0;border-radius:0}.cg{grid-template-columns:1fr}.cg-pipe{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.cg-flow .n{animation:none}}

/* Héros : téléphone seul, centré */
.hero-visual.dv.solo{width:auto;display:flex;justify-content:center;margin:56px auto 0;padding-bottom:clamp(48px,7vw,96px)}
.solo .dv-phone{position:relative;right:auto;bottom:auto;width:clamp(240px,24vw,330px)}
/* Rognage aussi par le haut : la bordure arrondie se voit tout autour */
.hero{clip-path:inset(calc(var(--hp) * 12px) round calc(var(--hp) * 32px))!important}
/* Campagnes : seule sur sa rangée, elle prend toute la largeur */
@media (min-width:901px){.cg>.cg-t:last-child{grid-column:span 3;flex-direction:row;align-items:center;gap:32px}.cg>.cg-t:last-child header{flex:none;width:260px}.cg>.cg-t:last-child .cg-stats{flex:1}.cg>.cg-t:last-child .cg-camp{flex:none}}

/* Héros : retour à la main qui tient le téléphone (noirs relevés au charbon) */
.hero-visual:not(.dv) .hero-img{background:var(--char)}

/* La main (détourée) passe devant les avis */
.hero-visual{z-index:2!important;-webkit-mask-image:none!important;mask-image:none!important}
.hero-visual:not(.dv) .hero-img{background:none}
.hero-rv{z-index:0}
.hero-copy{z-index:3}

/* Héros : nouvelle main (avant-bras complet) ; écran repéré au pixel */
.hero-visual:not(.dv) .hero-screen2{left:41.15%;top:10.74%;width:16.34%;height:48.14%;border-radius:12%/6.2%}
.hero-visual:not(.dv) .hero-screen2 .app{height:766px}
.hero-visual:not(.dv) .insc .in-tabs{top:auto;bottom:22px}
.hero-visual:not(.dv) .insc .in-card{top:auto;bottom:96px;height:262px}
.hero-visual:not(.dv) .insc .in-photo{height:140px}
.hero-visual:not(.dv) .insc .in-sel{top:316px}
.hero-visual:not(.dv) .insc .in-list{top:350px}
.hero-visual:not(.dv) .insc .in-i{top:372px}

/* ═══ v9 ═══ */
/* Interlude : photo au charbon + avatar OLA au coin */
.il-media>img{filter:grayscale(.85) contrast(.92) brightness(.78) sepia(.08)}
.il-media{background:var(--char)}
.il-av{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);display:flex;align-items:center;gap:10px;margin:0;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(32,32,36,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff;font-size:13.5px;font-weight:500;opacity:var(--g);transition:opacity .3s}
.il-av img{width:44px;height:44px;border-radius:50%;background:#fff}
.il-av figcaption{display:flex;align-items:center;gap:7px}

/* Mascotte : coins variés, comme Eney */
.peek{left:auto;bottom:auto;width:56px;height:56px}
.pk-tl{left:14px!important;top:14px!important}
.pk-tr{right:14px!important;top:14px!important}
.pk-bl{left:14px!important;bottom:14px!important}
.pk-br{right:14px!important;bottom:14px!important}
.fx:has(.pk-tr) .ask{right:84px}
.fx:has(.pk-tl) .ask{right:16px}

/* Portail : grand, coupé par les bords (seul le coin haut-gauche est entier) */
.fx-portal{display:block;padding:0;overflow:hidden}
.fx-portal .ag-one{position:absolute!important;left:0;right:0;top:20px;z-index:2}
.fx-portal .mini-portal{position:absolute!important;left:9%;top:120px;width:150%;height:150%;max-width:none;border-radius:18px;grid-template-columns:170px 1fr}
.fx-portal .mini-portal aside{padding:22px 16px;gap:12px}
.fx-portal .mp-main{padding:24px 28px}
.fx-portal .mp-main b{font-size:28px}
.fx-portal .mp-btn{height:32px;font-size:13px}
.fx-portal .mp-cards{grid-template-columns:repeat(3,220px)}
.fx-portal .mp-logo{min-height:30px}
.fx-portal .ask{z-index:3}
.lg{display:block;height:34px;width:auto;max-width:200px;object-fit:contain}
.mp-logo .lg{height:24px;max-width:130px}
.fx .ag-mark .lg{filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
@media (max-width:600px){.fx-portal .mini-portal{left:6%;top:110px;width:190%;grid-template-columns:120px 1fr}.fx-portal .mp-cards{grid-template-columns:repeat(3,150px)}}

/* Réservation : aucune rangée au départ ; chacune s'ouvre en douceur quand l'info est extraite */
.bk-rows{margin-top:0;background:transparent!important;box-shadow:none!important;overflow:visible}
.bk-r{display:grid!important;grid-template-rows:0fr;min-height:0!important;padding:0!important;border:0!important;border-radius:14px;background:rgba(255,255,255,.8);opacity:0;transform:translateY(-6px) scale(.98);transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),margin-top .55s cubic-bezier(.22,1,.36,1)}
.bk-r+.bk-r{border-top:0!important}
.bk-r>.bk-in{display:flex;align-items:center;gap:12px;min-height:0;overflow:hidden;padding:0 16px}
.bk-r.open{grid-template-rows:1fr;opacity:1;transform:none;margin-top:8px}
.bk-r.open>.bk-in{min-height:46px}
.bk-in .k{flex:none;width:76px;color:#86868b;font-size:13.5px}
.bk-in .v{flex:1;min-width:0;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-in .v:empty::before{content:none}

/* ═══ Illustration : la clé-maison qui se dessine ═══ */
.mf-art{position:relative;margin:clamp(56px,7vw,96px) 0 0;border-radius:28px;background:var(--char);overflow:hidden}
.ka{display:block;width:100%;height:auto}
.ka .d{stroke-dasharray:1;stroke-dashoffset:1}
.mf-art.on .ka .d{animation:kaDraw 1.1s cubic-bezier(.65,0,.25,1) forwards}
.mf-art.on .d1{animation-delay:.1s}.mf-art.on .d2{animation-delay:.55s}.mf-art.on .d3{animation-delay:.75s}.mf-art.on .d4{animation-delay:.9s}
.mf-art.on .d5{animation-delay:1.05s}.mf-art.on .d6{animation-delay:1.2s}.mf-art.on .d7{animation-delay:1.45s}.mf-art.on .d8{animation-delay:1.7s}
.mf-art.on .d9{animation-delay:.35s}.mf-art.on .d10{animation-delay:.6s}
@keyframes kaDraw{to{stroke-dashoffset:0}}
.ka-key,.ka-ring{transform-origin:430px 330px}
.mf-art.on .ka-key{animation:kaTurn 1.2s cubic-bezier(.32,.72,0,1) 2.6s both}
@keyframes kaTurn{0%{transform:rotate(0)}55%{transform:rotate(-7deg)}100%{transform:rotate(-4deg)}}
.ka-tag{opacity:0;transform:translateY(10px);transition:opacity .6s ease 2.1s,transform .8s cubic-bezier(.22,1,.36,1) 2.1s}
.mf-art.on .ka-tag{opacity:1;transform:none}
.ka-orbit{transform-origin:430px 310px;animation:kaSpin 60s linear infinite}
@keyframes kaSpin{to{transform:rotate(360deg)}}
.ka-spark path{opacity:0}
.mf-art.on .ka-spark path{animation:kaSpark 2.6s ease-in-out 2.9s infinite}
.mf-art.on .ka-spark path:nth-child(2){animation-delay:3.4s}.mf-art.on .ka-spark path:nth-child(3){animation-delay:3.9s}
@keyframes kaSpark{0%,100%{opacity:0}40%,60%{opacity:1}}
.mf-art figcaption{position:absolute;left:28px;bottom:24px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#e4e4e7;font-size:14px;font-weight:500}
@media (prefers-reduced-motion:reduce){.ka .d{stroke-dashoffset:0}.ka-tag{opacity:1;transform:none}.ka-orbit{animation:none}}

.mf-art figcaption{left:auto;right:28px}

/* Réservation : le formulaire part du haut et grandit vers le bas */
.fx-rdv{align-content:start;padding-top:44px}
/* Portail : photo claire, logos lisibles sans fond */
.fx-portal::after{background:rgba(255,255,255,.05)}
.fx .ag-mark .lg{filter:none}
.fx-portal .ag-dot i{background:rgba(10,10,11,.25)}
.fx-portal .ag-dot.on i{background:var(--acc,#0a0a0b)}

/* Réservation : à la fin, les champs apparaissent avec un petit rebond */
.bk-r.open{animation:bkPop .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bkPop{0%{transform:translateY(-6px) scale(.94)}100%{transform:none}}
.bk-title .rec{display:inline-block;animation:recPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes recPop{0%{color:#09090b;transform:none}45%{color:#0a84ff;transform:translateY(-2px) scale(1.04)}100%{color:#0a84ff;transform:none}}
/* Photo de famille : toujours une carte, jamais plein écran */
.interlude{height:150vh}
.il-media{width:min(1120px,calc(100% - 2 * var(--gutter)))!important;height:min(640px,72svh)!important;border-radius:28px!important}
.il-media>img{transform:scale(calc(1.08 - .08 * var(--g)))}
@media (max-width:760px){.interlude{height:130vh}.il-media{width:calc(100% - 24px)!important;height:78svh!important;border-radius:22px!important}}

/* ═══ Et tout ce qu'un CRM fait déjà. Mais mieux. ═══ */
.basics .head h2 span{color:#7a7a82}
.cx{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr);gap:clamp(20px,3vw,40px);align-items:center;max-width:1160px;margin:56px auto 0}
.cx-list{display:flex;flex-direction:column}
.cx-i{position:relative;display:block;width:100%;padding:16px 4px 16px;border:0;border-top:1px solid var(--char-line);background:none;color:#f4f4f5;text-align:left;cursor:pointer}
.cx-i:last-child{border-bottom:1px solid var(--char-line)}
.cx-i b{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em;color:#6b6b73;transition:color .3s}
.cx-i span{display:block;max-height:0;overflow:hidden;margin-top:0;color:#a1a1aa;font-size:14.5px;line-height:1.45;opacity:0;transition:max-height .45s var(--ease),opacity .35s,margin .45s var(--ease)}
.cx-i em{margin-right:8px;padding:2px 7px;border-radius:999px;background:rgba(48,209,88,.14);color:#30d158;font-size:11px;font-style:normal;font-weight:600;letter-spacing:.02em}
.cx-i:hover b{color:#c7c7cc}
.cx-i.on b{color:#fff}
.cx-i.on span{max-height:60px;margin-top:6px;opacity:1}
.cx-bar{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:#fff}
.cx-i.on .cx-bar{animation:cxFill 4.2s linear forwards}
.cx.manual .cx-bar{display:none}
@keyframes cxFill{to{width:100%}}
.cx-win{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 90px rgba(0,0,0,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden}
.cx-top{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.cx-top i{width:10px;height:10px;border-radius:50%;background:#3a3a3f}
.cx-top span{margin-left:10px;color:#8a8a93;font-size:12.5px;font-weight:500}
.cx-stage{position:relative;aspect-ratio:16/9;background:#f4f4f2}
.cx-p{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;transform:scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none;font-family:var(--app);color:#09090b}
.cx-p.on{opacity:1;transform:none}
.cx-p[data-p="pipe"]{padding:0}
.cx-p img{width:100%;height:100%;object-fit:cover;object-position:left top}
.cx-card{width:min(460px,100%);padding:18px 20px;border-radius:20px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 20px 50px rgba(0,0,0,.08)}
.cx-h{margin:0 0 6px;font-size:15px;font-weight:600;letter-spacing:-.2px}
.cx-task{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:.5px solid #ececee}
.cx-task:first-of-type{border-top:0}
.cx-task>i{flex:none;width:20px;height:20px;border-radius:6px;border:1.6px solid #c7c7cc;transition:background-color .3s,border-color .3s}
.cx-task.done>i{background:#09090b;border-color:#09090b}
.cx-task div{flex:1;min-width:0}
.cx-task b{display:block;font-size:14.5px;font-weight:500}
.cx-task.done b{color:#86868b;text-decoration:line-through}
.cx-task span{display:block;color:#86868b;font-size:12.5px}
.cx-task em,.cx-c em.t{flex:none;padding:3px 8px;border-radius:999px;background:rgba(10,132,255,.1);color:#0a84ff;font-size:11px;font-style:normal;font-weight:600}
.cx-flow{display:flex;flex-direction:column;align-items:flex-start}
.cx-say{margin:0 0 14px;padding:10px 14px;border-radius:16px 16px 16px 6px;background:#f1f1f3;font-size:14px;line-height:1.45}
.cx-flow .n{padding:9px 13px;border-radius:11px;border:1px solid #ececee;background:#fff;font-size:13.5px;font-weight:500;animation:flowOn2 6s infinite}
.cx-flow .n:nth-of-type(2){animation-delay:1.2s}.cx-flow .n:nth-of-type(3){animation-delay:2.4s}.cx-flow .n:nth-of-type(4){animation-delay:3.6s}
@keyframes flowOn2{0%,100%{border-color:#ececee;box-shadow:none}6%,18%{border-color:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.14)}}
.cx-flow>i{width:1.5px;height:14px;margin-left:20px;background:#d4d4d8}
.cx-day{display:flex;flex-direction:column;gap:8px}
.cx-day .ev{position:relative;padding:10px 12px 10px 16px;border-radius:10px;background:rgba(22,163,74,.11);overflow:hidden}
.cx-day .ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#16a34a}
.cx-day .ev.b{background:rgba(37,99,235,.1)}.cx-day .ev.b::before{background:#2563eb}
.cx-day b{display:block;font-size:13.5px;font-weight:600}
.cx-day span{display:block;color:#52525b;font-size:12px}
.cx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.cx-stats div{padding:12px;border-radius:12px;background:#f4f4f5}
.cx-stats strong{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em}
.cx-stats span{display:block;color:#86868b;font-size:12px}
.cx-mail{margin:0;color:#52525b;font-size:14px;line-height:1.5}
.cx-mail mark{padding:0 4px;border-radius:5px;background:#eef4ff;color:#1d4ed8;font-weight:600}
.cx-c{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:.5px solid #ececee}
.cx-c:first-of-type{border-top:0}
.cx-c .av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#fff,#e9edf5);box-shadow:0 0 0 .5px rgba(0,0,0,.08) inset;font-size:12.5px;font-weight:600}
.cx-c div{flex:1;min-width:0}
.cx-c b{display:block;font-size:14.5px;font-weight:600}
.cx-c span{display:block;color:#86868b;font-size:12.5px}
.cx-c em.t.g{background:rgba(22,163,74,.1);color:#15803d}
.cx-c em.t:not(.g):not(.b){background:rgba(0,0,0,.05);color:#52525b}
@media (max-width:900px){.cx{grid-template-columns:1fr}.cx-stage{aspect-ratio:4/5}.cx-p[data-p="pipe"] img{object-fit:cover}.cx-i.on span{max-height:80px}}
/* Photo de famille : elle grandit au défilement mais reste une carte ; ton charbon, plus clair */
.interlude{height:170vh}
.il-media{width:calc(min(1120px,100% - 2 * var(--gutter)) * (.78 + .22 * var(--g)))!important;height:calc(min(640px,72svh) * (.8 + .2 * var(--g)))!important;border-radius:28px!important}
.il-media>img{filter:grayscale(.8) contrast(.86) brightness(1.02)!important;transform:scale(calc(1.12 - .12 * var(--g)))}
.il-media::after{content:"";position:absolute;inset:0;background:rgba(32,32,36,.32);mix-blend-mode:lighten;pointer-events:none}
.il-veil{background:linear-gradient(90deg,rgba(24,24,27,.62) 0%,rgba(24,24,27,.2) 48%,rgba(24,24,27,0) 70%)!important;opacity:1!important}
.il-copy,.il-push,.il-av{z-index:2}
@media (max-width:760px){.il-media{width:calc((100% - 24px) * (.86 + .14 * var(--g)))!important;height:calc(78svh * (.86 + .14 * var(--g)))!important}.il-veil{background:linear-gradient(0deg,rgba(24,24,27,.8),rgba(24,24,27,.1) 60%)!important}}

/* Anneau : 4 irritants de chaque côté, en arc */
.pain-ring{grid-template-rows:auto repeat(4,auto);gap:14px 48px}
.pr-muse{grid-row:2/span 4}
.pr-l4{grid-column:1;justify-self:end;text-align:right;grid-row:5}
.pr-r4{grid-column:3;justify-self:start;text-align:left;grid-row:5}
.pr-l1,.pr-l4{transform:none}.pr-r1,.pr-r4{transform:none}
.pr-l2,.pr-l3{transform:translateX(-30px)}.pr-r2,.pr-r3{transform:translateX(30px)}
@media (max-width:900px){.pr{transform:none!important}}
.pr .pr-pain{background:none!important;text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1.5px;transition:text-decoration-color .35s,color .3s}
.pr:hover .pr-pain,.pr:focus-visible .pr-pain,.pr.show .pr-pain{text-decoration-color:rgba(10,10,11,.35)}
@media (hover:none){.pr .pr-pain{text-decoration-color:rgba(10,10,11,.3)}}

/* ═══ Le CRM, mais mieux : vraie capture + bulles en verre ═══ */
.hsx{max-width:1160px;margin:56px auto 0}
.hsx-win{border-radius:18px;background:#26262a;border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 100px rgba(0,0,0,.5);overflow:hidden}
.hsx-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#2c2c30;border-bottom:1px solid rgba(255,255,255,.06)}
.hsx-bar i{width:10px;height:10px;border-radius:50%;background:#4a4a50}
.hsx-bar span{margin-left:10px;color:#8a8a93;font-size:12.5px;font-weight:500}
.hsx-shot{position:relative}
.hsx-shot img{display:block;width:100%;height:auto}
.hs{position:absolute;width:0;height:0}
.hs-dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#0a84ff;box-shadow:0 0 0 4px rgba(10,132,255,.25);opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.hs-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(10,132,255,.6);animation:hsPing 2s ease-out infinite}
@keyframes hsPing{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.2);opacity:0}}
.hs-tip{position:absolute;top:-19px;width:max-content;max-width:250px;padding:9px 13px;border-radius:14px;background:rgba(24,24,27,.82);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:500;line-height:1.35;letter-spacing:-.01em;box-shadow:0 16px 40px rgba(0,0,0,.35);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.hs-r .hs-tip{left:22px;transform:translateX(-8px)}
.hs-l .hs-tip{right:22px;transform:translateX(8px)}
.hs.on .hs-dot{opacity:1;transform:none}
.hs.on .hs-tip{opacity:1;transform:none}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:40px auto 0;padding:0;list-style:none}
.chips li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#c7c7cc;font-size:13.5px;font-weight:500}
@media (max-width:900px){.hsx-shot{overflow-x:auto}.hsx-shot img{width:900px;max-width:none}.hs-tip{font-size:12.5px;max-width:190px}.hsx-shot{position:relative}}
@media (max-width:900px){.hsx-shot{overflow:hidden}.hsx-shot img{width:100%}.hs-tip{display:none}.hs.on .hs-dot{opacity:1}}

/* ═══ Pipeline recodé (données propres) + bulles accrochées aux fiches ═══ */
.hsx-shot{background:#fafaf9;font-family:Geist,-apple-system,system-ui,sans-serif;color:#0a0a0b}
.hsx-top{display:flex;align-items:center;gap:8px;padding:16px 22px;border-bottom:1px solid #f0f0ee;font-size:13px;color:#6b6b73;background:#fff}
.hsx-top b{margin-right:14px;color:#0a0a0b;font-size:17px;font-weight:600;letter-spacing:-.02em}
.hsx-top span{padding:5px 11px;border-radius:7px}
.hsx-top .on{background:#f1f1ef;color:#0a0a0b;font-weight:500}
.hsx-top .pill{margin-left:auto;border:1px solid #e8e8e6;border-radius:8px}
.hsx-top .new{background:#0a0a0b;color:#fff;font-weight:500;border-radius:8px}
.kbd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px 22px 34px}
.kcol header{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px;font-size:13px}
.kcol header b{font-weight:600}
.kcol header i{padding:1px 7px;border-radius:999px;background:#ececea;color:#6b6b73;font-size:11.5px;font-style:normal;font-weight:600}
.kc{position:relative;margin-bottom:12px;padding:13px 14px 11px;border-radius:13px;background:#fff;border:1px solid #ececea;box-shadow:0 1px 2px rgba(10,10,11,.03)}
.kc b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.kc>span{display:block;margin-top:2px;color:#86868b;font-size:12.5px}
.kc strong{display:block;margin-top:9px;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.kc-seg{display:flex;gap:2px;margin-top:9px}
.kc-seg i{flex:1;height:3px;border-radius:2px;background:#ececea}
.kc-seg i.d{background:#15803d}
.kc-act{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:9px;border-top:1px solid #f2f2f0;color:#9a9aa0}
.kc-act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kc-act em{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f1f1ef;color:#52525b;font-size:9.5px;font-style:normal;font-weight:600}
/* points d'ancrage des bulles */
.kc .hs{position:absolute}
.h-act .hs{left:44px;bottom:19px}
.h-move .hs{left:50%;bottom:-2px}
.h-cond .hs{left:-2px;top:62px}
.h-next .hs{left:-2px;top:34px}
.h-avis .hs{left:50%;top:-2px}
.hs-b .hs-tip{top:22px;left:50%;transform:translate(-50%,-8px)}
.hs-b.on .hs-tip{transform:translate(-50%,0)}
.h-avis .hs-l .hs-tip,.h-avis .hs .hs-tip{right:auto;left:50%;top:auto;bottom:22px;transform:translate(-50%,8px)}
.h-avis .hs.on .hs-tip{transform:translate(-50%,0)}
.hsx-shot img{display:none}
.hsx .hs-tip{z-index:5}
.kc:has(.hs){z-index:2}
@media (max-width:900px){.kbd{grid-template-columns:repeat(4,230px);overflow-x:auto;scrollbar-width:none}.kbd::-webkit-scrollbar{display:none}.hs-tip{display:block!important;font-size:12.5px;max-width:200px}}

/* Pipeline : points numérotés + légende (aucun chevauchement) */
.kc .hs{position:absolute;width:0;height:0}
.h-act .hs{left:auto;right:44px;bottom:20px;top:auto}
.h-move .hs{left:auto;right:14px;top:14px;bottom:auto}
.h-cond .hs{left:auto;right:14px;top:14px}
.h-next .hs{left:auto;right:14px;top:14px}
.h-avis .hs{left:auto;right:14px;top:14px}
.hs-dot{display:grid;place-items:center;width:22px;height:22px;left:-11px;top:-11px;color:#fff;font:600 11px/1 Geist,system-ui,sans-serif;box-shadow:0 0 0 4px rgba(10,132,255,.18)}
.hs-dot::after{animation:none;opacity:0}
.hs.cur .hs-dot{transform:scale(1.15)}
.hs.cur .hs-dot::after{animation:hsPing 1.6s ease-out infinite;opacity:1}
.kc:has(.hs.cur){border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.14);transition:border-color .3s,box-shadow .3s}
.hs-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:1160px;margin:22px auto 0;padding:0;list-style:none}
.hs-legend li{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;border:1px solid var(--char-line);color:#8a8a93;font-size:14px;line-height:1.4;cursor:default;transition:background-color .3s,color .3s,border-color .3s}
.hs-legend i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:#c7c7cc;font-size:11px;font-style:normal;font-weight:600;transition:background-color .3s,color .3s}
.hs-legend li.cur{background:rgba(255,255,255,.06);border-color:rgba(10,132,255,.5);color:#fff}
.hs-legend li.cur i{background:#0a84ff;color:#fff}
@media (max-width:900px){.hs-legend{grid-template-columns:1fr}}
/* Photo de famille : notification en haut à droite, mascotte visible */
.il-push{top:clamp(16px,3vw,32px);bottom:auto!important}
@media (max-width:760px){.il-media>img{object-position:72% 50%}.il-push{top:16px}}

/* ═══ Irritants v3 : la réponse devient une vraie carte ═══ */
.pr{padding:10px 14px;border-radius:18px;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
.pr .pr-pain{margin:0;font-size:17px;line-height:1.35;color:var(--ink-2)}
.pr-card{display:flex;gap:12px;align-items:flex-start;max-height:0;margin-top:0;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 0 #fff inset,0 18px 44px rgba(10,10,11,.10),0 0 0 1px rgba(10,10,11,.04);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);text-align:left;opacity:0;overflow:hidden;transform:translateY(-6px) scale(.98);transition:max-height .5s var(--ease),opacity .35s,transform .5s cubic-bezier(.34,1.4,.64,1),margin .5s var(--ease),padding .5s var(--ease)}
.pr:hover .pr-card,.pr:focus-visible .pr-card,.pr.show .pr-card{max-height:180px;margin-top:10px;padding:14px;opacity:1;transform:none}
.pc-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0a84ff;color:#fff;box-shadow:0 6px 14px rgba(10,132,255,.3)}
.pc-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pc-tx{min-width:0}
.pc-tx>b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pc-tx>span{display:block;margin-top:2px;color:var(--ink-3);font-size:13.5px;line-height:1.4}
.pr-fix{display:none!important}
.mini{display:flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--app);font-size:12px}
.mini em{padding:3px 8px;border-radius:999px;background:#f1f1f3;color:#52525b;font-style:normal;font-weight:600}
.mini b{font-weight:600;color:#09090b}
.mini small{display:block;color:#86868b;font-size:11px}
.m-files i{color:#86868b;font-style:normal}
.m-files b{padding:3px 8px;border-radius:7px;background:rgba(10,132,255,.1);color:#0a84ff}
.m-next{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:10px;background:#f6f6f7}
.m-widget{padding:8px 10px;border-radius:14px;background:#18181b;color:#fff}
.m-widget i{width:8px;height:8px;border-radius:50%;background:#30d158}
.m-widget b{color:#fff}
.m-say{padding:7px 11px;border-radius:14px 14px 14px 5px;background:#e9e9eb;color:#1d1d1f}
.m-field{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:10px;border:1px dashed rgba(10,132,255,.5);background:rgba(10,132,255,.05)}
.m-link em{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;background:linear-gradient(160deg,#fff,#e9edf5);box-shadow:0 0 0 .5px rgba(0,0,0,.1) inset}
.m-link i{width:20px;height:1.5px;background:#0a84ff}
.pr-l1 .pr-card,.pr-l2 .pr-card,.pr-l3 .pr-card,.pr-l4 .pr-card{margin-left:auto}
.pr{max-width:320px}
@media (hover:none){.pr .pr-card{max-height:180px;margin-top:10px;padding:14px;opacity:1;transform:none}}

/* ═══ Réservation v4 : cases fixes, le mot s'envole et se pose ═══ */
.fx-rdv{align-content:center;padding-top:0}
.bk-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px!important}
.bk-t{position:relative;height:58px;padding:0 14px;border-radius:14px;border:1px dashed rgba(10,10,11,.12);background:rgba(255,255,255,.28);overflow:hidden;transition:background-color .45s,border-color .45s,box-shadow .45s}
.bk-t.wide{grid-column:span 2}
.bk-t .k{position:absolute;left:14px;top:10px;font-size:11.5px;color:#a1a1a8;transform:translateY(10px) scale(1.12);transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1),color .4s}
.bk-t .v{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(8px);filter:blur(5px);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1),filter .45s}
.bk-t.set{border:1px solid rgba(255,255,255,.95);background:#fff;box-shadow:0 1px 2px rgba(10,10,11,.05),0 0 0 .5px rgba(10,10,11,.05)}
.bk-t.set .k{color:#86868b;transform:none}
.bk-t.set .v{opacity:1;transform:none;filter:none}
.bk-t.set::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px #0a84ff inset;opacity:0;animation:bkRing .9s ease-out}
@keyframes bkRing{0%{opacity:.9}100%{opacity:0}}
.bk-fly{position:fixed;z-index:9999;pointer-events:none;padding:2px 8px;border-radius:8px;background:#0a84ff;color:#fff;font:600 14px/1.3 var(--app);white-space:nowrap;box-shadow:0 8px 20px rgba(10,132,255,.35);transform-origin:left top}
@media (max-width:600px){.bk-t{height:52px;padding:0 11px}.bk-t .k{left:11px;top:8px}.bk-t .v{left:11px;right:11px;bottom:8px;font-size:13px}}

/* ═══ « Mais mieux » : trois cartes façon Eney ═══ */
.basics .hsx,.basics .hs-legend{display:none}
.bx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1160px;margin:0 auto}
.bx-c{display:flex;flex-direction:column;border-radius:28px;background:var(--char-2);border:1px solid var(--char-line);overflow:hidden}
.bx-wide{grid-column:span 2}
.bx-stage{position:relative;height:400px;overflow:hidden;background:#26262b;border-bottom:1px solid var(--char-line)}
.bx-copy{padding:22px 26px 26px}
.bx-copy h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.025em;color:#f4f4f5}
.bx-copy p{margin:6px 0 0;color:#8a8a93;font-size:15px;line-height:1.45}
.bx-stage *{font-family:var(--app)}
/* pipeline */
.st-pipe{height:460px}
.kl-win{position:absolute;left:40px;top:40px;width:max(1080px,calc(100% - 40px));bottom:-20px;border-radius:18px 0 0 0;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.kl-top{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #efeff1;background:#fff;font-size:13px;color:#6b6b73}
.kl-top b{margin-right:12px;color:#09090b;font-size:16px;font-weight:600;letter-spacing:-.02em}
.kl-top span{padding:4px 10px;border-radius:7px}
.kl-top .on{background:#f1f1f3;color:#09090b;font-weight:500}
.kl-board{display:grid;grid-template-columns:repeat(4,250px);gap:16px;padding:18px 20px}
.kl-col header{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px;font-size:13px;color:#09090b}
.kl-col header b{font-weight:600}
.kl-col header i{padding:1px 7px;border-radius:999px;background:#ececee;color:#6b6b73;font-size:11.5px;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.kl{display:flex;flex-direction:column;gap:12px;min-height:120px}
.pc{position:relative;border-radius:14px;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.08),0 1px 2px rgba(10,10,11,.04);overflow:hidden;transition:box-shadow .35s,opacity .4s}
.pc img{display:block;width:100%;height:112px;object-fit:cover}
.pc>div{padding:10px 12px 12px}
.pc b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#09090b}
.pc span{display:block;margin-top:2px;color:#86868b;font-size:12.5px}
.sg{display:flex;gap:2px;margin-top:9px}
.sg i{flex:1;height:3px;border-radius:2px;background:#ececee;transition:background-color .5s}
.sg i.d{background:#15803d}
.pc.lift{z-index:3;box-shadow:0 0 0 .5px rgba(10,10,11,.08),0 26px 50px rgba(10,10,11,.22)}
.pc.gone{opacity:0}
.bx-toast{position:absolute;left:50%;bottom:28px;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(24,24,27,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;transform:translate(-50%,10px);opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.32,.72,0,1)}
.bx-toast.on{opacity:1;transform:translate(-50%,0)}
.bx-toast svg{width:17px;height:17px;fill:none;stroke:#30d158;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* tâches */
.tk-win{position:absolute;left:32px;right:32px;top:40px;padding:6px 0;border-radius:18px;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.tk-win header{display:flex;align-items:baseline;gap:8px;padding:12px 18px 8px;font-size:13px;color:#86868b}
.tk-win header b{color:#09090b;font-size:16px;font-weight:600;letter-spacing:-.02em}
.tk-win ul{margin:0;padding:0;list-style:none}
.tk{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #efeff1;transition:background-color .4s}
.tk>div{flex:1;min-width:0}
.tk b{display:block;font-size:14px;font-weight:500;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.tk-st{display:block;margin-top:1px;color:#86868b;font-size:12px;transition:color .4s}
.tk-ck{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.6px solid #c7c7cc;transition:background-color .35s,border-color .35s}
.tk-ck svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.tk-av{position:relative;flex:none;width:28px;height:28px}
.tk-av em,.tk-av img{position:absolute;inset:0;width:28px;height:28px;border-radius:50%;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tk-av em{display:grid;place-items:center;background:#ececee;color:#52525b;font-size:10.5px;font-style:normal;font-weight:600}
.tk-av img{background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1);opacity:0;transform:scale(.6)}
.tk-av.is-ola img,.tk.ola .tk-av img{opacity:1;transform:none}
.tk.ola .tk-av em{opacity:0;transform:scale(.6)}
.tk.busy{background:rgba(10,132,255,.05)}
.tk.busy .tk-st{color:#0a84ff;background:linear-gradient(90deg,#0a84ff 0 40%,#7cbcff 50%,#0a84ff 60% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:tkShim 1.4s linear infinite}
@keyframes tkShim{to{background-position:-150% 0}}
.tk.done .tk-ck{background:#0a84ff;border-color:#0a84ff}
.tk.done .tk-ck svg{opacity:1;transform:none}
.tk.done b{color:#86868b}
.tk.done .tk-st{color:#15803d}
.tk-pop{position:absolute;right:52px;top:118px;z-index:3;display:flex;flex-direction:column;gap:2px;min-width:150px;padding:6px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 .5px rgba(10,10,11,.08),0 18px 40px rgba(10,10,11,.18);opacity:0;transform:scale(.92) translateY(-4px);transform-origin:top right;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.34,1.4,.64,1)}
.tk-pop.on{opacity:1;transform:none}
.tk-pop small{padding:4px 8px 2px;color:#86868b;font-size:11px}
.tk-pop span{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:13.5px;font-weight:500;color:#09090b;transition:background-color .2s,color .2s}
.tk-pop span em{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ececee;color:#52525b;font-size:9.5px;font-style:normal;font-weight:600}
.tk-pop span img{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1)}
.tk-pop .o.hl{background:#0a84ff;color:#fff}
/* transaction qui se déroule (dans une scène de hauteur fixe : rien ne pousse) */
.tx{position:absolute;left:32px;right:32px;top:40px;border-radius:18px;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;cursor:pointer}
.tx-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.tx-row img{flex:none;width:52px;height:52px;border-radius:12px;object-fit:cover}
.tx-row>div{flex:1;min-width:0}
.tx-row b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#09090b}
.tx-row span{display:block;margin-top:2px;color:#86868b;font-size:12.5px}
.tx-row em{flex:none;padding:4px 9px;border-radius:999px;background:rgba(21,128,61,.1);color:#15803d;font-size:12px;font-style:normal;font-weight:600}
.tx-chev{flex:none;width:18px;height:18px;fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tx.open .tx-chev{transform:rotate(180deg)}
.tx-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1)}
.tx.open .tx-body{grid-template-rows:1fr}
.tx-in{min-height:0;overflow:hidden;padding:0 16px}
.tx-in>*{opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1)}
.tx.open .tx-in>*{opacity:1;transform:none}
.tx.open .tx-in>:nth-child(1){transition-delay:.12s}.tx.open .tx-in>:nth-child(2){transition-delay:.18s}.tx.open .tx-in>:nth-child(3){transition-delay:.24s}.tx.open .tx-in>:nth-child(4){transition-delay:.3s}.tx.open .tx-in>:nth-child(5){transition-delay:.36s}
.tx-step{padding:12px 0 2px;border-top:1px solid #efeff1}
.tx-step small{color:#86868b;font-size:11.5px}
.tx-step .sg{margin-top:6px}
.tx-h{margin:14px 0 6px;color:#86868b;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.tx-cd{margin:0;padding:0;list-style:none}
.tx-cd li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.tx-cd i{flex:none;width:8px;height:8px;border-radius:50%;background:#d4d4d8}
.tx-cd .ok i{background:#15803d}.tx-cd .soon i{background:#a15c00}
.tx-cd b{flex:1;min-width:0;font-weight:500;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-cd span{color:#86868b;font-size:12.5px}
.tx-cd .soon span{color:#a15c00;font-weight:600}
.tx-docs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px}
.tx-docs span{padding:5px 10px;border-radius:8px;background:#f1f1f3;color:#3f3f46;font-size:12.5px;font-weight:500}
@media (max-width:900px){
  .bx{grid-template-columns:1fr}
  .bx-wide{grid-column:auto}
  .st-pipe{height:400px}
  .kl-win{left:20px;top:24px}
  .kl-board{grid-template-columns:repeat(4,220px)}
  .bx-stage{height:380px}
  .tk-win,.tx{left:16px;right:16px;top:24px}
  .tk-pop{right:36px;top:102px}
  .bx-copy{padding:18px 20px 22px}
}

/* ═══ Irritants : les deux textes toujours visibles, barré net, rien ne pousse ═══ */
.pr .pr-pain{background:none!important;color:var(--ink-4)!important;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(10,10,11,.45);text-decoration-skip-ink:none}
.pr .pr-card,.pr:hover .pr-card,.pr:focus-visible .pr-card,.pr.show .pr-card{max-height:none;margin-top:10px;padding:14px;opacity:1;transform:none}
.pr .pr-card{transition:transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .45s}
.pr:hover .pr-card{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 26px 54px rgba(10,10,11,.14),0 0 0 1px rgba(10,10,11,.04)}
.pr-cap span{display:none}
/* mini-aperçus : jamais écrasés par .pc-tx>span */
.pc-tx>.mini{display:flex;flex-wrap:nowrap;margin-top:10px;color:inherit;font-size:12px;line-height:1.3;white-space:nowrap}
.pc-tx>.m-next,.pc-tx>.m-field{display:flex;flex-direction:column;align-items:flex-start}
.pc-tx>.m-say{display:inline-flex;white-space:normal}
.m-files b{white-space:nowrap}
.tx-row b,.tx-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ Automatisations : un vrai workflow qui s'exécute ═══ */
.st-wf{height:440px}
.wf-canvas{position:absolute;left:0;top:0;width:1180px;height:360px;margin:40px 0 0 32px;border-radius:18px 0 0 18px}
.st-wf::before{content:"";position:absolute;inset:24px 0 24px 24px;border-radius:18px 0 0 18px;background:#fafafa radial-gradient(circle,#dcdce0 1px,transparent 1.4px) 0 0/18px 18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.wf-edges{position:absolute;inset:0;width:1180px;height:360px;overflow:visible}
.wf-edges path{fill:none;stroke-width:2;stroke-linecap:round}
.wf-edges .base path{stroke:#d4d4d8;stroke-dasharray:4 5}
.wf-edges .live path{stroke:#0a84ff;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.2,1)}
.wf-edges .live path.on{stroke-dashoffset:0!important}
.wf-n{position:absolute;display:flex;align-items:center;gap:10px;width:236px;height:64px;padding:0 12px;border-radius:14px;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1),0 6px 16px rgba(10,10,11,.06);transition:box-shadow .35s,transform .45s cubic-bezier(.34,1.5,.64,1)}
.wf-n>div{flex:1;min-width:0}
.wf-n small{display:block;color:#86868b;font-size:11px}
.wf-n b{display:block;font-size:13.5px;font-weight:600;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#f1f1f3;color:#52525b;transition:background-color .35s,color .35s}
.wf-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wf-ok{flex:none;width:18px;height:18px;border-radius:50%;background:#15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;opacity:0;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.wf-n.on{transform:scale(1.04);box-shadow:0 0 0 2px #0a84ff,0 14px 30px rgba(10,132,255,.2)}
.wf-n.on .wf-ic,.wf-n.done .wf-ic{background:#0a84ff;color:#fff}
.wf-n.done .wf-ok{opacity:1;transform:none}
.wf-chip{position:absolute;right:28px;bottom:36px;z-index:3;display:flex;align-items:center;gap:10px;max-width:420px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(24,24,27,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font-size:13.5px;line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.32,.72,0,1)}
.wf-chip.on{opacity:1;transform:none}
.wf-chip img{flex:none;width:36px;height:36px;border-radius:50%;background:#fff}
/* contact + historique : chaque ligne a déjà sa place */
.ct-win{position:absolute;left:32px;right:32px;top:40px;border-radius:18px;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.ct-win header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #efeff1;background:#fff}
.ct-win header em{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ececee;color:#52525b;font-size:13px;font-style:normal;font-weight:600}
.ct-win header b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#09090b}
.ct-win header span{display:flex;gap:5px;margin-top:3px}
.ct-win header i{padding:2px 8px;border-radius:999px;background:#f1f1f3;color:#52525b;font-size:11.5px;font-style:normal;font-weight:500}
.ct-tl{margin:0;padding:6px 0;list-style:none}
.ct-tl li{display:flex;align-items:flex-start;gap:11px;padding:9px 16px;opacity:.0;transform:translateY(6px);transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.ct-tl li.in{opacity:1;transform:none}
.ct-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1);color:#52525b}
.ct-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ct-tl li>div{flex:1;min-width:0}
.ct-tl b{display:block;font-size:13px;font-weight:600;color:#09090b}
.ct-tl p{margin:1px 0 0;color:#6b6b73;font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tl time{flex:none;color:#a1a1a8;font-size:11.5px}
/* réservation en ligne */
.bo-win{position:absolute;left:32px;right:32px;top:40px;padding:16px;border-radius:18px;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.bo-win header{display:flex;align-items:center;gap:12px}
.bo-win header img{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1)}
.bo-win header small{display:block;color:#86868b;font-size:11.5px}
.bo-win header b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#09090b}
.bo-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.bo-days span{display:flex;flex-direction:column;align-items:center;padding:7px 0;border-radius:12px;color:#86868b;font-size:11.5px}
.bo-days b{color:#09090b;font-size:16px;font-weight:600}
.bo-days .on{background:#09090b;color:#a1a1a8}.bo-days .on b{color:#fff}
.bo-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.bo-slots span{display:grid;place-items:center;height:40px;border-radius:11px;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1);color:#09090b;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.bo-slots span.on{background:#0a84ff;color:#fff;transform:scale(1.05)}
.bo-ok{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;margin-top:12px;border-radius:12px;background:rgba(21,128,61,.1);color:#15803d;font-size:13px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.bo-ok.on{opacity:1;transform:none}
.bo-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .st-wf{height:420px}
  .wf-canvas{margin:28px 0 0 18px;transform:scale(.62);transform-origin:0 0}
  .st-wf::before{inset:16px 0 16px 12px}
  .wf-chip{left:16px;right:16px;bottom:22px;max-width:none;font-size:12.5px}
  .ct-win,.bo-win{left:16px;right:16px;top:24px}
}
/* ═══ Irritants v4 : Liquid Glass sur la photo du courtier, tard le soir ═══ */
.pain-ring{max-width:1240px;padding:56px 48px 64px;border-radius:32px;overflow:hidden;isolation:isolate;background:#0d0d0f url(./assets/gen/broker-laptop.webp) 42% 50%/cover no-repeat;gap:18px 40px}
.pain-ring::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,8,10,.28)}
.pr-muse{visibility:hidden}
.pr-cap{color:rgba(255,255,255,.62)!important}
.pr .pr-pain{color:rgba(255,255,255,.66)!important;text-decoration-color:rgba(255,255,255,.75);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.pr .pr-card{position:relative;border:1px solid transparent;border-radius:22px;
  background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.06)) padding-box,
             linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.28)) border-box;
  backdrop-filter:blur(22px) saturate(1.9) brightness(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.38)!important}
.pr:hover .pr-card{transform:translateY(-3px) scale(1.01);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 70px rgba(0,0,0,.45)!important}
.pc-tx>b{color:#fff}
.pc-tx>span{color:rgba(255,255,255,.72)}
.pc-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(10,132,255,.45)}
.pr .mini em{background:rgba(255,255,255,.14);color:#fff}
.pr .mini b{color:#fff}
.pr .mini small{color:rgba(255,255,255,.6)}
.pr .m-files i{color:rgba(255,255,255,.6)}
.pr .m-files b{background:rgba(10,132,255,.28);color:#fff}
.pr .m-next{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.pr .m-widget{background:rgba(0,0,0,.38);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)}
.pr .m-say{background:rgba(255,255,255,.18);color:#fff}
.pr .m-field{border-color:rgba(255,255,255,.4);background:rgba(10,132,255,.16)}
.pr .m-link em{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.pr .m-link i{background:#64b0ff}
@media (max-width:900px){.pain-ring{margin:48px 12px 0;padding:36px 16px 40px;border-radius:26px;background-position:38% 0;background-size:auto 640px;background-color:#101012}.pr-muse{display:none}}

/* ═══ Historique de transaction ═══ */
.hi-win{position:absolute;left:32px;right:32px;top:40px;border-radius:18px;background:#fafafa;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.hi-win header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #efeff1;background:#fff}
.hi-win header img{width:44px;height:44px;border-radius:11px;object-fit:cover}
.hi-win header b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#09090b}
.hi-win header span{display:block;margin-top:1px;color:#86868b;font-size:12.5px}
.hi-tl{--fill:0;position:relative;margin:0;padding:10px 0 12px;list-style:none}
.hi-tl::before,.hi-tl::after{content:"";position:absolute;left:23px;top:24px;bottom:30px;width:1.5px;background:#e4e4e7}
.hi-tl::after{background:#0a84ff;transform-origin:top;transform:scaleY(var(--fill));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hi-tl li{position:relative;z-index:1;display:flex;align-items:flex-start;gap:12px;padding:6px 16px 6px 18px;opacity:.0;transform:translateY(5px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.hi-tl li.in{opacity:1;transform:none}
.hi-tl li>i{flex:none;width:11px;height:11px;margin-top:3px;border-radius:50%;background:#fafafa;box-shadow:0 0 0 1.5px #a1a1aa inset,0 0 0 3px #fafafa}
.hi-tl .ok>i{background:#15803d;box-shadow:0 0 0 3px #fafafa}
.hi-tl .ola>i{background:#0a84ff;box-shadow:0 0 0 3px #fafafa}
.hi-tl .soon>i{background:#fafafa;box-shadow:0 0 0 1.5px #a15c00 inset,0 0 0 3px #fafafa}
.hi-tl li>div{flex:1;min-width:0}
.hi-tl b{display:block;font-size:13px;font-weight:600;color:#09090b}
.hi-tl span{display:block;margin-top:1px;color:#86868b;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi-tl .ola span{color:#0a84ff}
.hi-tl .soon span{color:#a15c00;font-weight:600}
.hi-tl time{flex:none;color:#a1a1a8;font-size:11.5px;font-variant-numeric:tabular-nums}
/* workflow : la phrase ne chevauche plus aucun nœud */
.wf-chip{left:56px;right:auto;bottom:34px}
.wf-n{width:220px}
@media (max-width:900px){.hi-win{left:16px;right:16px;top:24px}.wf-chip{left:16px;right:16px}}

/* ═══ Irritants v5 : quatre phrases, la petite OLA au centre ═══ */
.pain-ring{grid-template-rows:auto repeat(2,auto);gap:30px 56px;padding:64px 48px 72px}
.pr-muse{visibility:visible;grid-row:2/span 2;align-self:center;width:min(300px,100%);justify-self:center;background:#f3efe8;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 10px rgba(255,255,255,.06),0 40px 90px rgba(0,0,0,.55)}
.pr-l1,.pr-l2,.pr-r1,.pr-r2{transform:none}
.pr-l1,.pr-r1{align-self:end}.pr-l2,.pr-r2{align-self:start}
.pr .pr-pain{font-size:21px;font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.72)!important;text-decoration-thickness:2px}
.pr{max-width:350px}
@media (max-width:900px){
  .pain-ring{grid-template-rows:none;gap:22px}
  .pr-muse{display:block!important;grid-row:2;width:170px}
  .pr-l1,.pr-l2,.pr-r1,.pr-r2{grid-row:auto;grid-column:1;justify-self:stretch;text-align:left;max-width:none}
  .pr .pr-pain{font-size:18px}
}

/* ═══ Automatisations v2 : dite, dessinée, activée, exécutée ═══ */
.st-wf{height:470px}
.wf-canvas{margin-top:64px}
.wf-bar{position:absolute;left:48px;top:40px;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,11,.1),0 4px 12px rgba(10,10,11,.05);font-family:var(--app)}
.wf-bar b{font-size:13.5px;font-weight:600;color:#09090b}
.wf-tg{position:relative;width:36px;height:22px;border-radius:999px;background:#d4d4d8;transition:background-color .35s}
.wf-tg i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.wf-tg.on{background:#30d158}
.wf-tg.on i{transform:translateX(14px)}
.wf-bar em{min-width:62px;color:#86868b;font-size:12.5px;font-style:normal;font-weight:500;transition:color .3s}
.wf-bar em.on{color:#15803d}
.wf-n{opacity:0;transform:scale(.88) translateY(6px);transition:opacity .4s,transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.wf-n.born{opacity:1;transform:none}
.wf-n.born.on{transform:scale(1.04)}
.wf-n.skip{opacity:.4}
.wf-edges .base path{opacity:0;transition:opacity .45s}
.wf-edges .base path.drawn{opacity:1}
.wf-edges .live path{transition:none}
.wf-dot{fill:#0a84ff;stroke:#fff;stroke-width:2.5;opacity:0;filter:drop-shadow(0 0 6px rgba(10,132,255,.7));transition:opacity .2s}
.wf-dot.on{opacity:1}
.wf-chip{min-height:52px;min-width:min(520px,calc(100% - 80px));max-width:560px}
.wf-chip span:empty::after{content:"";display:inline-block;width:2px;height:15px;background:#fff;vertical-align:middle;animation:caretB 1s steps(1) infinite}
@keyframes caretB{50%{opacity:0}}
@media (max-width:900px){.st-wf{height:440px}.wf-bar{left:28px;top:30px}.wf-canvas{margin-top:62px}.wf-chip{min-width:0}}

/* Badges : deux rangées qui défilent en sens inverse */
.chips-mq{max-width:1160px;margin:40px auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.chips-row{display:flex;width:max-content;margin:0 0 10px;padding:0;list-style:none;animation:chipsMq 46s linear infinite}
.chips-row.rev{animation-direction:reverse;animation-duration:52s}
.chips-mq:hover .chips-row{animation-play-state:paused}
.chips-row li{flex:none;margin-right:10px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#c7c7cc;font-size:14px;font-weight:500;white-space:nowrap}
@keyframes chipsMq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.chips-row{animation:none}}

/* Irritants mobile : rien ne déborde */
@media (max-width:900px){
  .pain-ring{grid-template-columns:minmax(0,1fr)!important}
  .pr-cap{white-space:normal;padding:0 8px}
  .pr{max-width:none;width:100%}
  .pr .pr-pain{text-align:left}
  .pr .pr-card{margin-left:0!important}
  .pc-tx>.mini{flex-wrap:wrap;white-space:normal}
}
/* ═══ Irritants v6 : à plat, fond clair, OLA au centre, aucune carte ═══ */
.pain-ring{max-width:var(--max);padding:0;border-radius:0;overflow:visible;background:none!important;gap:44px 64px;margin-top:64px}
.pain-ring::before{content:none}
.pr-cap{color:var(--ink-3)!important}
.pr-muse{background:#f3efe8;box-shadow:0 30px 70px rgba(10,10,11,.10)!important;width:min(300px,100%)}
.pr{max-width:360px;padding:0}
.pr .pr-pain{color:var(--ink-4)!important;text-shadow:none;text-decoration-color:rgba(10,10,11,.5);font-size:20px}
.pr .pr-card,.pr:hover .pr-card{margin-top:12px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none!important;transform:none}
.pr-l1 .pr-card,.pr-l2 .pr-card{flex-direction:row-reverse;text-align:right}
.pr-l1 .pc-tx>.mini,.pr-l2 .pc-tx>.mini{justify-content:flex-end}
.pr-l1 .pc-tx>.m-next,.pr-l2 .pc-tx>.m-next{align-items:flex-end;margin-left:auto;width:max-content}
.pc-ic{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 10px rgba(10,132,255,.25)}
.pc-tx>b{color:var(--ink);font-size:17px}
.pc-tx>span{color:var(--ink-3);font-size:14.5px}
.pr .mini em{background:#f1f1f3;color:#52525b}
.pr .mini b{color:#09090b}
.pr .mini small{color:#86868b}
.pr .m-files i{color:#86868b}
.pr .m-files b{background:rgba(10,132,255,.1);color:#0a84ff}
.pr .m-next{background:#f1f1f3;box-shadow:none}
.pr .m-widget{background:#18181b;box-shadow:none}
.pr .m-widget b{color:#fff}
.pr .m-say{background:#e9e9eb;color:#1d1d1f}
@media (max-width:900px){.pain-ring{margin:48px 0 0;padding:0 4px;gap:30px}.pr-l1 .pr-card,.pr-l2 .pr-card{flex-direction:row;text-align:left}.pr-l1 .pc-tx>.mini,.pr-l2 .pc-tx>.mini{justify-content:flex-start}.pr-l1 .pc-tx>.m-next,.pr-l2 .pc-tx>.m-next{align-items:flex-start;margin-left:0}}
.pr .pc-ic{display:none}.pr .pr-card{gap:0}
.pr .pc-tx>.mini{display:inline-flex!important;width:max-content!important;max-width:100%;margin-left:0!important}.pr .pc-tx>.mini::before{content:none}.pr .pc-tx{width:100%}

/* ═══ Automatisations v3 : la phrase devient la règle, la semaine défile ═══ */
.st-wf{height:480px;background:#1c1c20}
.st-wf::before{content:none}
.au{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:28px 56px;padding:48px 52px 34px}
.au-l{align-self:center}
.au-tag{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--mono)!important;font-size:12px;color:#8a8a93}
.au-tag span{font-family:var(--mono)}
.au-tag em{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#6b6b73;font-style:normal;font-weight:600;transition:background-color .4s,color .4s}
.au-tag em i{width:6px;height:6px;border-radius:50%;background:#6b6b73;transition:background-color .4s,box-shadow .4s}
.au-tag em.on{background:rgba(48,209,88,.14);color:#30d158}
.au-tag em.on i{background:#30d158;box-shadow:0 0 8px #30d158}
.au-rule{margin:0;font-size:clamp(24px,2.5vw,34px);line-height:1.38;font-weight:500;letter-spacing:-.025em;color:#8a8a93}
.au-rule em{font-style:normal;color:#c7c7cc;border-radius:9px;padding:0 4px;margin:0 -4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:color .5s,background-color .5s,box-shadow .5s}
.au-rule em.on{color:#fff;background:rgba(10,132,255,.2);box-shadow:inset 0 0 0 1px rgba(10,132,255,.45)}
.au-stack{position:relative;align-self:center;height:282px}
.au-n{--i:0;position:absolute;left:0;right:0;top:0;display:flex;gap:12px;align-items:flex-start;height:84px;padding:13px 16px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;transform:translateY(-18px) scale(.97);transition:opacity .45s,transform .7s cubic-bezier(.22,1,.36,1)}
.au-n.in{opacity:calc(1 - var(--i) * .22);transform:translateY(calc(var(--i) * 98px))}
.au-n img{flex:none;width:38px;height:38px;border-radius:11px;background:#fff}
.au-n>div{flex:1;min-width:0}
.au-n header{display:flex;justify-content:space-between;gap:8px}
.au-n b{color:#fff;font-size:14px;font-weight:600}
.au-n time{color:#8a8a93;font-size:12px;font-variant-numeric:tabular-nums}
.au-n p{margin:3px 0 0;color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-tl{--p:0;grid-column:1/-1}
.au-track{position:relative;height:36px}
.au-track::before{content:"";position:absolute;left:0;right:0;top:24px;height:2px;border-radius:2px;background:rgba(255,255,255,.08)}
.au-track>b{position:absolute;left:0;top:24px;height:2px;width:calc(var(--p) * 100%);border-radius:2px;background:#0a84ff;box-shadow:0 0 12px rgba(10,132,255,.6)}
.au-m{position:absolute;top:20px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#1c1c20;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);transition:background-color .3s,box-shadow .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.au-m.hit{background:#0a84ff;box-shadow:0 0 0 4px rgba(10,132,255,.22);transform:scale(1.2)}
.au-head{position:absolute;top:0;left:calc(var(--p) * 100%);width:0}
.au-head::after{content:"";position:absolute;left:-1px;top:16px;width:2px;height:18px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.au-head small{position:absolute;left:0;top:-6px;transform:translateX(-50%);padding:2px 8px;border-radius:6px;background:#fff;color:#09090b;font:600 11px/1.4 var(--mono);white-space:nowrap}
.au-days{display:flex;justify-content:space-between;margin-top:8px;color:#5d5d63;font:500 11px var(--mono)}
.au-days span:first-child::after{content:" oct."}
@media (max-width:900px){
  .st-wf{height:640px}
  .au{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:22px;padding:30px 20px 24px}
  .au-rule{font-size:22px}
  .au-stack{height:270px}
  .au-n{height:80px;padding:12px 14px}
  .au-n.in{transform:translateY(calc(var(--i) * 92px))}
}
.au-rule,.au-rule em{font-family:Geist,-apple-system,system-ui,sans-serif!important}
.au-rule em{white-space:nowrap}
.au-head small{transform:translateX(calc(var(--p) * -100%))}
.il-push img.il-av-img{width:38px;height:38px;border-radius:11px;background:#fff;object-fit:cover;padding:0}
/* ═══ Irritants : au survol, la phrase se barre et la réponse apparaît (place réservée, rien ne bouge) ═══ */
.pr{cursor:default}
.pr .pr-pain{display:inline-block;text-decoration:none!important;color:var(--ink-2)!important;background:linear-gradient(currentColor,currentColor) 0 58%/0 2px no-repeat!important;transition:background-size .55s cubic-bezier(.65,0,.35,1),color .45s}
.pr:hover .pr-pain,.pr:focus-visible .pr-pain,.pr.show .pr-pain{background-size:100% 2px!important;color:var(--ink-4)!important}
.pr .pr-card{opacity:0;transform:translateY(-8px);filter:blur(4px);transition:opacity .45s .12s,transform .6s .12s cubic-bezier(.22,1,.36,1),filter .45s .12s}
.pr:hover .pr-card,.pr:focus-visible .pr-card,.pr.show .pr-card{opacity:1;transform:none;filter:none}
.pr-cap::after{content:" · survolez"}
@media (hover:none){.pr .pr-card{opacity:1;transform:none;filter:none}.pr .pr-pain{background-size:100% 2px!important;color:var(--ink-4)!important}.pr-cap::after{content:none}}

/* ═══ Workflows : les étapes au centre, leur vrai résultat à côté ═══ */
.st-wk{height:540px;background:#1c1c20}
.wk{--p:0;--rh:66px;--gap:12px;position:absolute;inset:44px 40px;display:grid;grid-auto-rows:var(--rh);row-gap:var(--gap)}
.wk-row{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);align-items:center;column-gap:44px}
.wk-row>i{display:block}
.wk-row:first-of-type{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr)}
.wk-row:first-of-type .wk-c{grid-column:2}
.wk-spine{position:absolute;left:50%;top:calc(var(--rh) / 2);height:calc(5 * (var(--rh) + var(--gap)));width:2px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.1)}
.wk-spine b{position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);border-radius:2px;background:#0a84ff;box-shadow:0 0 12px rgba(10,132,255,.6);transition:height .55s cubic-bezier(.45,0,.2,1)}
.wk-c{position:relative;z-index:1}
.wk-s,.wk-trig{display:flex;align-items:center;gap:11px;height:56px;padding:0 12px;border-radius:15px;background:#fafafa;box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.35);transition:box-shadow .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.wk-trig{background:#2a2a2f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wk-trig small{color:#8a8a93!important}.wk-trig b{color:#fff!important}
.wk-trig .wk-ic{background:rgba(255,255,255,.08);color:#c7c7cc}
.wk-trig.on .wk-ic{background:#30d158;color:#fff}
.wk-s>div,.wk-trig>div{flex:1;min-width:0}
.wk-s small,.wk-trig small{display:block;color:#86868b;font-size:11px}
.wk-s b,.wk-trig b{display:block;font-size:13.5px;font-weight:600;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#ececee;color:#52525b;transition:background-color .35s,color .35s}
.wk-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wk-s.on{transform:scale(1.04);box-shadow:0 0 0 2px #0a84ff,0 16px 34px rgba(10,132,255,.25)}
.wk-s.on .wk-ic,.wk-s.done .wk-ic{background:#0a84ff;color:#fff}
.wk-ok{flex:none;width:18px;height:18px;border-radius:50%;background:#15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;opacity:0;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.wk-s.done .wk-ok{opacity:1;transform:none}
/* résultats */
.wk-o{position:relative;width:min(300px,100%);opacity:0;filter:blur(6px);transition:opacity .45s,transform .7s cubic-bezier(.22,1,.36,1),filter .45s}
.wk-o.side-L{justify-self:end;transform:translateX(24px) scale(.96)}
.wk-o.side-R{justify-self:start;transform:translateX(-24px) scale(.96)}
.wk-o.in{opacity:1;filter:none;transform:none}
.wk-o.side-L::after,.wk-o.side-R::after{content:"";position:absolute;top:50%;width:44px;border-top:1.5px dashed rgba(255,255,255,.18)}
.wk-o.side-L::after{left:100%}.wk-o.side-R::after{right:100%}
.o-sms{justify-self:end}
.o-sms p{margin:0;padding:10px 14px;border-radius:20px 20px 6px 20px;background:#0a84ff;color:#fff;font-size:13.5px;line-height:1.38}
.o-sms small{display:block;margin-top:4px;text-align:right;color:#6b6b73;font-size:11px}
.o-cd,.o-mail,.o-task,.o-wait{border-radius:16px;background:#fafafa;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.o-cd{padding:6px 12px}
.o-cd span{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;font-weight:500;color:#09090b}
.o-cd span+span{border-top:1px solid #efeff1}
.o-cd i{flex:none;width:7px;height:7px;border-radius:50%;background:#d4d4d8}
.o-cd i.ok{background:#15803d}
.o-cd em{margin-left:auto;color:#86868b;font-style:normal;font-size:12px;font-weight:500}
.o-wait{display:flex;align-items:center;gap:12px;width:auto;padding:10px 16px 10px 10px}
.o-wait svg{width:36px;height:36px;transform:rotate(-90deg)}
.o-wait circle{fill:none;stroke:#e4e4e7;stroke-width:3.5}
.o-wait .arc{stroke:#0a84ff;stroke-linecap:round;stroke-dasharray:94.3;stroke-dashoffset:94.3;transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1) .2s}
.o-wait.in .arc{stroke-dashoffset:0}
.o-wait b{display:block;font-size:13.5px;font-weight:600;color:#09090b}
.o-wait small{display:block;color:#86868b;font-size:11.5px}
.o-mail{padding:10px 14px}
.o-mail header{display:flex;justify-content:space-between;gap:8px}
.o-mail header b{font-size:12.5px;font-weight:600;color:#09090b}
.o-mail header small{color:#86868b;font-size:11px}
.o-mail p{margin:2px 0 0;font-size:12.5px;font-weight:500;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-mail span{display:block;margin-top:1px;color:#86868b;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-task{display:flex;align-items:center;gap:11px;padding:10px 12px}
.o-task>i{flex:none;width:18px;height:18px;border-radius:50%;border:1.6px solid #c7c7cc}
.o-task>div{flex:1;min-width:0}
.o-task b{display:block;font-size:13px;font-weight:600;color:#09090b}
.o-task small{display:block;color:#86868b;font-size:11.5px}
.o-task em{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ececee;color:#52525b;font-size:9.5px;font-style:normal;font-weight:600}
@media (max-width:900px){
  .st-wk{height:660px}
  .wk{--rh:58px;--gap:10px;inset:26px 16px auto;height:398px}
  .wk-row,.wk-row:first-of-type{grid-template-columns:minmax(0,1fr);column-gap:0}
  .wk-row>i{display:none}
  .wk-row:first-of-type .wk-c{grid-column:1}
  .wk-spine{left:28px}
  .wk-s,.wk-trig{height:52px}
  .wk-o{position:absolute;left:0;right:0;top:calc(6 * (var(--rh) + var(--gap)) + 20px);width:auto;justify-self:stretch!important;transform:translateY(12px)!important}
  .wk-o.in{transform:none!important}
  .wk-o.past{opacity:0;transform:translateY(-10px)!important}
  .wk-o::after{content:none!important}
  .o-sms{margin-left:auto;max-width:300px}
}

/* ═══ Workflows : un vrai écran, sobre ═══ */
.st-wl{height:470px}
.wl-win{position:absolute;left:40px;top:40px;right:-1px;bottom:-1px;display:grid;grid-template-columns:270px minmax(0,1fr);border-radius:16px 0 0 0;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;font-size:13px;color:#09090b}
.wl-win aside{padding:14px 10px;border-right:1px solid #ececee;background:#fafafa}
.wl-win aside p{margin:0 8px 8px;color:#86868b;font-size:12px;font-weight:500}
.wl-win aside ul{margin:0;padding:0;list-style:none}
.wl-win aside li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background-color .2s}
.wl-win aside li.on{background:#ececee}
.wl-win aside li>div{flex:1;min-width:0}
.wl-win aside b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-win aside small{display:block;color:#86868b;font-size:11.5px;font-variant-numeric:tabular-nums}
.wl-tg{flex:none;position:relative;width:26px;height:16px;border-radius:999px;background:#34c759}
.wl-tg::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.wl-win section{position:relative}
.wl-p{position:absolute;inset:0;padding:22px 28px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.wl-p.on{opacity:1;visibility:visible;transition:opacity .35s}
.wl-p header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #ececee}
.wl-p header b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.wl-p header small{display:block;margin-top:2px;color:#86868b;font-size:12.5px}
.wl-p header em{padding:3px 9px;border-radius:6px;background:#f1f1f3;color:#15803d;font-size:12px;font-style:normal;font-weight:500}
.wl-steps{position:relative;margin:0;padding:6px 0 0;list-style:none}
.wl-steps::before{content:"";position:absolute;left:63px;top:30px;bottom:24px;width:1px;background:#e4e4e7}
.wl-steps li{position:relative;display:grid;grid-template-columns:28px 28px minmax(0,1fr) auto;align-items:center;column-gap:12px;height:48px;border-bottom:1px solid #f4f4f5;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.wl-p.on .wl-steps li{opacity:1;transform:none}
.wl-p.on .wl-steps li:nth-child(2){transition-delay:.05s}.wl-p.on .wl-steps li:nth-child(3){transition-delay:.1s}.wl-p.on .wl-steps li:nth-child(4){transition-delay:.15s}.wl-p.on .wl-steps li:nth-child(5){transition-delay:.2s}
.wl-n{color:#a1a1aa;font:500 11.5px var(--mono)}
.wl-ic{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #e4e4e7;color:#52525b}
.wl-ic.tr{background:#09090b;box-shadow:none;color:#fff}
.wl-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wl-steps b{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-steps small{color:#86868b;font-size:12.5px;white-space:nowrap}
.wl-p footer{position:absolute;left:28px;right:28px;bottom:22px;color:#a1a1aa;font-size:12px}
@media (max-width:900px){
  .st-wl{height:430px}
  .wl-win{left:16px;top:24px;grid-template-columns:minmax(0,1fr)}
  .wl-win aside{display:none}
  .wl-p{padding:18px 18px}
  .wl-steps li{grid-template-columns:22px 28px minmax(0,1fr);column-gap:10px;height:auto;min-height:48px;padding:6px 0}
  .wl-steps small{grid-column:3;margin-top:-4px}
  .wl-steps::before{left:48px}
  .wl-p footer{left:18px;right:18px}
}

/* ═══ Réservation v5 : la carte ne contient que le titre ; les champs naissent dessous, sur la photo ═══ */
.fx .bk{width:min(600px,100%)!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.bk-card{padding:12px 14px 14px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 50px rgba(0,0,0,.25)}
@media (min-width:901px){.bk-title p{white-space:nowrap}}
.bk-grid{margin-top:12px!important}
.bk-t{border:0!important;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);box-shadow:0 12px 30px rgba(0,0,0,.2)!important;opacity:0;transform:translateY(-10px) scale(.92);transition:opacity .4s,transform .6s cubic-bezier(.34,1.4,.64,1)!important}
.bk-t.set{opacity:1;transform:none}
.bk-t .k{transform:none!important;color:#86868b!important}
.bk-t.set::after{content:none}
.bk-toast{bottom:auto;top:calc(100% + 14px)}

/* ═══ Analyse : une fois terminée, « Où ça va » puis Confirmer ═══ */
.fx-pa{position:relative}
.fx-pa .orb,.fx-pa .pa-side{transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1),filter .45s}
.fx-pa.res .orb,.fx-pa.res .pa-side{opacity:0;transform:scale(.92);filter:blur(6px)}
.pa-res{position:absolute;left:50%;top:50%;z-index:3;width:min(400px,calc(100% - 32px));padding:14px 16px 16px;border-radius:22px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 1px 0 #fff inset,0 24px 60px rgba(0,0,0,.25);font-family:var(--app);text-align:left;opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.96);transition:opacity .45s,transform .7s cubic-bezier(.22,1,.36,1)}
.fx-pa.res .pa-res{opacity:1;transform:translate(-50%,-50%)}
.rs-h{margin:0 2px 6px;color:#86868b;font-size:12px;font-weight:600}
.pa-res ul{margin:0;padding:0;list-style:none}
.pa-res li{display:flex;align-items:center;gap:11px;padding:8px 2px;border-top:1px solid rgba(10,10,11,.06);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.pa-res li:first-child{border-top:0}
.fx-pa.res .pa-res li{opacity:1;transform:none}
.fx-pa.res .pa-res li:nth-child(1){transition-delay:.25s}.fx-pa.res .pa-res li:nth-child(2){transition-delay:.4s}.fx-pa.res .pa-res li:nth-child(3){transition-delay:.55s}.fx-pa.res .pa-res li:nth-child(4){transition-delay:.7s}
.rs-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f1f1f3;color:#3f3f46}
.rs-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pa-res li>div{flex:1;min-width:0}
.pa-res small{display:block;color:#86868b;font-size:11.5px}
.pa-res b{display:block;font-size:13.5px;font-weight:600;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-res em{flex:none;padding:3px 8px;border-radius:999px;background:#f1f1f3;color:#52525b;font-size:11px;font-style:normal;font-weight:600}
.rs-foot{position:relative;height:44px;margin-top:10px}
.rs-ok,.rs-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.rs-ok{border-radius:13px;background:#09090b;color:#fff;font-size:14.5px;font-weight:600}
.rs-ok.press{transform:scale(.96)}
.rs-done{gap:8px;margin:0;justify-content:flex-start;padding:0 4px;color:#15803d;font-size:13px;font-weight:600;line-height:1.3;opacity:0;transform:translateY(6px)}
.rs-done svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pa-res.ok .rs-ok{opacity:0;transform:scale(.96)}
.pa-res.ok .rs-done{opacity:1;transform:none}
@media (max-width:600px){.pa-res{padding:12px 12px 14px}.pa-res b{font-size:13px}.pa-res em{display:none}}
/* ═══ Mascotte : de vraies poses, placées autrement dans chaque carte (façon Eney) ═══ */
.mz{position:absolute;z-index:4;height:auto;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.3))}
.mz-lens{left:22px;bottom:-16px;width:118px}
.mz-peek{right:18%;bottom:-2px;width:118px;filter:drop-shadow(0 -6px 18px rgba(0,0,0,.18))}
.mz-key{right:14px;bottom:-14px;width:100px}
.bk-card{position:relative}
.mz-lie{right:26px;top:-74px;width:124px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.mz-brush{left:16px;top:12px;width:72px}
.mz-headset{left:14px;bottom:-14px;width:96px}
.mz-letters{right:12px;bottom:-14px;width:94px}
.tl-card{position:relative;overflow:visible!important}
.mz-sit{right:18px;top:-86px;width:92px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.fx:has(.mz-lie){padding-top:96px}
@media (max-width:600px){.mz-lens{width:92px}.mz-peek{width:96px}.mz-key,.mz-headset,.mz-letters{width:80px}.mz-lie{width:100px;top:-60px}.mz-sit{width:76px;top:-72px}.mz-brush{width:60px}}
/* Visite : deux vrais boutons iOS, puis une ligne verte, sans gros bouton */
.vgo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;height:40px;margin-top:12px}
.vgo span{display:grid;place-items:center;border-radius:12px;font:600 14.5px var(--app);transition:opacity .3s,transform .18s}
.vgo .b2{background:rgba(120,120,128,.14);color:#1d1d1f}
.vgo .b1{background:#0a84ff;color:#fff}
.vgo.press .b1{transform:scale(.95)}
.vgo .okm{position:absolute;inset:0;display:flex;align-items:center;gap:8px;margin:0;padding:0 2px;color:#15803d;font:600 14px var(--app);opacity:0;transform:translateY(6px);transition:opacity .35s .1s,transform .45s .1s cubic-bezier(.22,1,.36,1)}
.vgo .okm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vgo.ok span{opacity:0;transform:scale(.96)}
.vgo.ok .okm{opacity:1;transform:none}
/* Analyse : seulement le cercle, centré et plus grand */
.fx-pa .pa-side{display:none!important}
.fx-pa .orb{width:220px;height:220px}
@media (max-width:600px){.fx-pa .orb{width:190px;height:190px}}
/* mascottes : ne cachent plus rien */
.mz-lie{right:auto;left:50%;margin-left:40px;top:-92px}
.mz-sit{right:auto;left:18px}
.vgo .b1{background:#09090b;color:#fff}.vgo .b2{background:rgba(255,255,255,.7);color:#1d1d1f;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}

/* ═══ Réservation v6 : les infos deviennent des pastilles dans le titre ═══ */
.fx-rdv .bk-grid{display:none!important}
.fx .bk{width:min(620px,100%)!important}
.bk-title{padding:12px 14px}
.bk-title p{white-space:normal!important;min-height:68px;line-height:34px}
.bk-title p.has-tok{color:#86868b}
.tok{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0 1px;padding:0 10px;border-radius:9px;background:#f1f1f3;color:#09090b;font-size:16px;font-weight:600;letter-spacing:-.2px;vertical-align:middle;white-space:nowrap;box-shadow:inset 0 0 0 .5px rgba(10,10,11,.06);animation:tokIn .55s cubic-bezier(.34,1.4,.64,1) both}
.tok svg{width:15px;height:15px;fill:none;stroke:#6b6b73;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tok .cal-dot{width:9px;height:9px;border-radius:50%;background:#30d158;margin:0}
@keyframes tokIn{0%{opacity:0;filter:blur(5px);transform:scale(.86)}100%{opacity:1;filter:none;transform:none}}
.bk-toast{top:auto!important;bottom:-52px!important}
@media (max-width:600px){.bk-title p{min-height:102px;line-height:34px}.tok{font-size:14.5px;height:26px;padding:0 8px}}

/* ═══ Formulaire de démo (parcours d'ola-ai.ca) ═══ */
.dm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.dm[hidden]{display:none}
.dm-veil{position:absolute;inset:0;background:rgba(10,10,11,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.dm-sheet{position:relative;width:min(440px,100%);max-height:calc(100svh - 32px);overflow:auto;padding:30px 28px 26px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,11,.06),0 40px 100px rgba(10,10,11,.3);font-family:var(--app);color:#09090b;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1)}
.dm.on .dm-veil{opacity:1}
.dm.on .dm-sheet{opacity:1;transform:none}
html.dm-lock{overflow:hidden}
.dm-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#86868b;cursor:pointer}
.dm-x:hover{background:#f4f4f5}
.dm-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dm-prog{height:3px;margin:0 0 26px;border-radius:3px;background:#f1f1f3;overflow:hidden}
.dm-prog i{display:block;height:100%;width:6%;border-radius:3px;background:#09090b;transition:width .5s cubic-bezier(.16,1,.3,1)}
.dm-step{display:flex;flex-direction:column;gap:12px;animation:dmIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes dmIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.dm-q{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.dm-hint{margin:-6px 0 2px;color:#86868b;font-size:13px;line-height:1.45}
.dm-opts{display:flex;flex-direction:column;gap:8px}
.dm-opts.two{flex-direction:row}.dm-opts.two .dm-opt{flex:1}
.dm-opts.grid{display:grid;grid-template-columns:1fr 1fr}
.dm-opt{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 15px;border:1px solid #e4e4e7;border-radius:12px;background:#fff;color:#09090b;font:500 14.5px var(--app);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.dm-opt:hover{border-color:#a1a1aa}
.dm-opt.on{border-color:#09090b;background:#09090b;color:#fff}
.dm-opt.ck i{flex:none;width:16px;height:16px;border-radius:5px;border:1.5px solid currentColor;opacity:.3}
.dm-opt.ck.on i{opacity:1;border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2309090b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.dm-in{width:100%;height:44px;padding:0 13px;border:1px solid #e4e4e7;border-radius:11px;background:#fff;color:#09090b;font:400 15px var(--app);outline:none;transition:border-color .2s,box-shadow .2s}
.dm-in::placeholder{color:#a1a1aa}
.dm-in:focus{border-color:#09090b;box-shadow:0 0 0 3px rgba(10,10,11,.06)}
.dm-in.bad{border-color:#dc2626}
.dm-in.ta{height:104px;padding:11px 13px;resize:none;line-height:1.45}
.dm-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-inline{display:flex;gap:8px}
.dm-row{display:flex;align-items:center;gap:16px;margin-top:4px}
.dm-row .dm-go{flex:1}
.dm-go{height:44px;padding:0 18px;border:0;border-radius:12px;background:#09090b;color:#fff;font:600 14.5px var(--app);cursor:pointer;transition:opacity .2s,transform .15s}
.dm-go:active{transform:scale(.98)}
.dm-go:disabled{opacity:.3;cursor:default}
.dm-go.sm{flex:none;padding:0 18px}
.dm-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 0;border:0;background:none;color:#86868b;font:500 13px var(--app);cursor:pointer}
.dm-back:hover{color:#09090b}
.dm-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm-consent{position:relative;display:flex;gap:11px;align-items:flex-start;color:#6b6b73;font-size:12px;line-height:1.5;cursor:pointer}
.dm-consent input{position:absolute;opacity:0;width:1px;height:1px}
.dm-consent .box{flex:none;width:17px;height:17px;margin-top:1px;border-radius:5px;border:1.5px solid #c7c7cc;transition:background-color .2s,border-color .2s}
.dm-consent input:checked+.box{border-color:#09090b;background:#09090b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.dm-consent input:focus-visible+.box{box-shadow:0 0 0 3px rgba(10,10,11,.12)}
.dm-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dm-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dm-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border:1px solid #e4e4e7;border-radius:12px;background:#fff;color:#09090b;cursor:pointer;font-family:var(--app);transition:border-color .2s,background-color .2s,color .2s}
.dm-day small{color:#86868b;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.dm-day b{font-size:19px;font-weight:600;line-height:1.1}
.dm-day:hover{border-color:#a1a1aa}
.dm-day.on{border-color:#09090b;background:#09090b;color:#fff}.dm-day.on small{color:#a1a1aa}
.dm-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:248px;overflow:auto}
.dm-time{height:38px;border:1px solid #e4e4e7;border-radius:10px;background:#fff;color:#09090b;font:500 13.5px var(--app);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.dm-time:hover{border-color:#a1a1aa}
.dm-time.on{border-color:#09090b;background:#09090b;color:#fff}
.dm-slot{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;background:#f6f6f7}
.dm-slot svg{flex:none;width:18px;height:18px;fill:none;stroke:#6b6b73;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm-slot b{display:block;font-size:14.5px;font-weight:600}
.dm-slot b::first-letter{text-transform:uppercase}
.dm-slot span{display:block;color:#6b6b73;font-size:13px}
.dm-load{display:grid;place-items:center;height:120px}
.dm-load i{width:22px;height:22px;border-radius:50%;border:2px solid #e4e4e7;border-top-color:#09090b;animation:spin .8s linear infinite}
.dm-done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 4px;text-align:center}
.dm-done .dm-hint{margin:0 0 10px}
.dm-done .dm-go{width:100%}
.dm-ok{display:grid;place-items:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:#f1f1f3}
.dm-ok svg{width:20px;height:20px;fill:none;stroke:#15803d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .dm{place-items:end center;padding:0}
  .dm-sheet{width:100%;max-height:92svh;padding:26px 20px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;transform:translateY(40px)}
  .dm-days{gap:6px}
  .dm-times{grid-template-columns:repeat(3,1fr)}
  .dm-in{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.dm-step{animation:none}.tok{animation:none}}
/* ═══ Interlude : dans le flux, la photo zoome seulement, le défilement ne bloque jamais ═══ */
.interlude{height:auto!important;padding:clamp(32px,5vw,72px) 0!important}
.il-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important}
.il-media{width:min(1120px,calc(100% - 2 * var(--gutter)))!important;height:min(640px,72svh)!important;border-radius:28px!important}
.il-media>img{transform:scale(calc(1.18 - .18 * var(--g)))!important;transition:none}
@media (max-width:760px){.il-media{width:calc(100% - 24px)!important;height:78svh!important;border-radius:22px!important}}

/* ═══ Réservation v7 : le nom se complète, puis le rendez-vous apparaît à l'agenda ═══ */
.fx-rdv{align-content:center!important}
.bk{position:relative}
.bk-card,.bk-cal{transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1),filter .45s}
.bk.cal .bk-card{opacity:0;transform:translateY(-10px) scale(.97);filter:blur(4px)}
.bk-title p{min-height:34px!important;line-height:30px!important;white-space:normal!important}
.bk-title .ghost{color:#b4b4ba;animation:ghostIn .3s ease both}
@keyframes ghostIn{from{opacity:0}to{opacity:1}}
.bk-title .fix{animation:fixIn .6s ease both}
@keyframes fixIn{0%{background:rgba(10,132,255,.16);border-radius:6px;box-shadow:0 0 0 3px rgba(10,132,255,.16)}100%{background:transparent;box-shadow:0 0 0 3px transparent}}
.bk-cal{position:absolute;left:0;right:0;top:0;padding:14px 16px 16px;border-radius:24px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 1px 0 #fff inset,0 24px 60px rgba(0,0,0,.25);font-family:var(--app);opacity:0;transform:translateY(14px) scale(.98);pointer-events:none}
.bk.cal .bk-cal{opacity:1;transform:none}
.bk-cal header{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px}
.bk-cal header b{font-size:16px;font-weight:600;letter-spacing:-.02em;color:#09090b}
.bk-cal header span{color:#86868b;font-size:13px}
.cal-grid{position:relative;padding-left:44px}
.cal-h{position:relative;height:44px}
.cal-h small{position:absolute;left:-44px;top:-7px;width:36px;text-align:right;color:#a1a1aa;font-size:11px;font-variant-numeric:tabular-nums}
.cal-h i{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(10,10,11,.07)}
.cal-ev{position:absolute;left:44px;right:0;display:flex;flex-direction:column;justify-content:center;padding:0 10px 0 12px;border-radius:8px;background:rgba(120,120,128,.1);overflow:hidden}
.cal-ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#a1a1aa}
.cal-ev b{font-size:12.5px;font-weight:600;color:#3f3f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev span{color:#6b6b73;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.new{background:rgba(48,209,88,.16);opacity:0;transform:scale(.86);transform-origin:left center;transition:opacity .35s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.cal-ev.new::before{background:#30d158}
.cal-ev.new b{color:#0b5e26}
.cal-ev.new span{color:#1f7a3a}
.cal-ev.new.pop{opacity:1;transform:none;box-shadow:0 10px 24px rgba(21,128,61,.18)}
.fx-rdv .fx{min-height:420px}
.fx.fx-rdv{min-height:420px}
@media (max-width:600px){.fx.fx-rdv{min-height:400px}.bk-title p{font-size:17px!important;line-height:26px!important}}
.dm{inset:auto;top:0;left:0;width:100%;height:100vh;height:100dvh}
@media (max-width:600px){.fx.fx-rdv{min-height:450px}}
/* ═══ Titre : correction en douceur, lettres en vague, puis bleu ═══ */
.bk-title .ph[hidden]{display:none}
.bk-title .ts{transition:color .45s ease}
.bk-title .ts.on{color:#0a84ff}
.t-w{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}
.t-w.grow{transition:width .5s cubic-bezier(.22,1,.36,1)}
.w-old{display:inline-block;transition:opacity .22s ease,filter .22s ease}
.t-w.grow .w-old{opacity:0;filter:blur(2px)}
.w-new{position:absolute;left:0;top:0;white-space:nowrap}
.w-new i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.35em);filter:blur(3px)}
.t-w.lt-in .w-new i{animation:waveIn .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 24ms)}
@keyframes waveIn{to{opacity:1;transform:none;filter:none}}
.t-w.done .w-new{position:static}
.t-w.done .w-new i{opacity:1;transform:none;filter:none;animation:none}
.t-w.done .w-old{display:none}
@media (prefers-reduced-motion:reduce){.t-w.lt-in .w-new i{animation:none;opacity:1;transform:none;filter:none}}

/* correction plus douce ; les lettres ajoutées arrivent déjà en bleu */
.bk-title .ts{transition:color .7s cubic-bezier(.22,1,.36,1)}
.t-w.grow{transition:width .62s cubic-bezier(.22,1,.36,1)}
.t-w.grow .w-old{opacity:0;filter:blur(3px);transition:opacity .3s ease,filter .3s ease}
.w-new{color:#0a84ff}
.t-w.lt-in .w-new i{animation:waveIn .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 30ms)}

/* ═══ Réservation : boutons ronds iOS 26 + calendrier façon Calendrier d'Apple ═══ */
.bk-head{display:grid!important;grid-template-columns:34px 1fr 34px;align-items:center;margin:0 0 12px!important}
.bk-head b{text-align:center;font-size:15px;font-weight:600;letter-spacing:-.2px;color:#09090b}
.hb{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.hb svg{width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hb-x{background:rgba(120,120,128,.14);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6)}
.hb-x svg{stroke:#3a3a3c}
.hb-ok{background:#09090b;box-shadow:0 4px 12px rgba(10,10,11,.22),inset 0 1px 0 rgba(255,255,255,.18)}
.hb-ok svg{stroke:#fff}
.bk-save.hb-ok.press{transform:scale(.86)}

.bk-cal{padding:16px 16px 18px!important}
.bk-cal header{display:flex!important;align-items:center;justify-content:space-between;margin:0 2px 14px!important}
.bk-cal header small{display:block;color:#ff3b30;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.bk-cal header b{display:block;margin-top:1px;font-size:19px!important;font-weight:700!important;letter-spacing:-.4px}
.cal-n{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:rgba(120,120,128,.12);color:#3a3a3c;font-size:12px;font-weight:600}
.cal-grid{padding-left:46px!important}
.cal-h{height:44px}
.cal-h small{left:-46px!important;top:-7px!important;width:38px!important;color:#8e8e93!important;font-size:11px!important;font-weight:500}
.cal-h i{background:rgba(60,60,67,.12)!important}
.cal-now{position:absolute;left:-6px;right:0;height:1.5px;background:#ff3b30;z-index:2}
.cal-now::before{content:"";position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#ff3b30}
.cal-ev{left:46px!important;right:2px!important;display:flex;flex-direction:column;justify-content:flex-start!important;padding:5px 10px 5px 14px!important;border-radius:8px!important;overflow:hidden}
.cal-ev::before{left:5px!important;top:5px!important;bottom:5px!important;width:3px!important;border-radius:3px}
.cal-ev b{font-size:12.5px!important;font-weight:600!important;line-height:1.25;letter-spacing:-.1px}
.cal-ev span{margin-top:1px;font-size:11px!important;line-height:1.25}
.cal-ev.c-pu{background:rgba(175,82,222,.14)!important}.cal-ev.c-pu::before{background:#af52de!important}.cal-ev.c-pu b{color:#7b2fa3!important}.cal-ev.c-pu span{color:#9a5cbd!important}
.cal-ev.c-pu{flex-direction:row;align-items:center;gap:6px;padding-top:0!important;padding-bottom:0!important}
.cal-ev.c-or{background:rgba(255,149,0,.15)!important}.cal-ev.c-or::before{background:#ff9500!important}.cal-ev.c-or b{color:#9a5200!important}.cal-ev.c-or span{color:#b06a10!important}
.cal-ev.c-gr{background:rgba(52,199,89,.17)!important}.cal-ev.c-gr::before{background:#34c759!important}.cal-ev.c-gr b{color:#1a6b30!important}.cal-ev.c-gr span{color:#2f8a45!important}
/* le nouveau rendez-vous se déploie depuis son heure */
.cal-ev.new{opacity:0;transform:none!important;clip-path:inset(0 0 100% 0 round 8px);transition:opacity .25s ease,clip-path .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease!important}
.cal-ev.new.pop{opacity:1;clip-path:inset(0 0 0 0 round 8px);box-shadow:0 8px 22px rgba(26,107,48,.16),0 0 0 1px rgba(52,199,89,.25)}
.cal-ev.new b,.cal-ev.new span{opacity:0;transform:translateY(4px);transition:opacity .35s ease .3s,transform .45s cubic-bezier(.22,1,.36,1) .3s}
.cal-ev.new.pop b,.cal-ev.new.pop span{opacity:1;transform:none}
.fx.fx-rdv{min-height:500px}@media (max-width:600px){.fx.fx-rdv{min-height:480px}}
/* ═══ Héros : un bouton ; section finale : le parcours complet, directement dans la page ═══ */
.hero-ctas{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.hero-cta{display:inline-flex;align-items:center;height:50px;padding:0 26px;border-radius:999px;background:#fff;color:#09090b;font:600 15.5px var(--app);letter-spacing:-.01em;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.hero-cta:active{transform:scale(.97)}
.hero-note{color:rgba(255,255,255,.55);font-size:13px}
.dm-card{width:min(460px,100%);min-height:520px;margin:40px auto 0;padding:28px 26px 26px;border-radius:24px;background:#fff;color:#09090b;font-family:var(--app);text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.dm-card .dm-prog{margin-bottom:24px}
@media (max-width:600px){.dm-card{min-height:560px;padding:24px 18px 22px;border-radius:20px}.hero-cta{height:48px}}
/* formulaire : les styles de la section ne touchent plus aux champs */
.dm-card input.dm-in,.dm-sheet input.dm-in{width:100%;height:44px;margin:0;padding:0 13px;border:1px solid #e4e4e7;border-radius:11px;background:#fff;color:#09090b;font:400 15px var(--app);box-shadow:none}
.dm-card .dm-inline input.dm-in,.dm-sheet .dm-inline input.dm-in{flex:1;min-width:0;width:auto}
.dm-card .dm-go,.dm-sheet .dm-go{width:auto;margin:0}
.dm-card .dm-inline .dm-go,.dm-sheet .dm-inline .dm-go{flex:none}
.dm-card .dm-done .dm-go{width:100%}
.dm-card{display:flex;flex-direction:column;min-height:480px}
.dm-card .dm-body{flex:1;display:flex;flex-direction:column;justify-content:center}
@media (max-width:600px){.dm-card{min-height:520px}.dm-card input.dm-in{font-size:16px}}

/* ═══ Formulaire en verre, dans la page (aucune fenêtre) ═══ */
.dm-card.glass{background:rgba(255,255,255,.06);border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.04)) padding-box,linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.05) 40%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.16)) border-box;backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.35);color:#f4f4f5}
.glass .dm-prog{background:rgba(255,255,255,.1)}
.glass .dm-prog i{background:#fff}
.glass .dm-q{color:#fff}
.glass .dm-hint{color:rgba(255,255,255,.55)}
.glass .dm-opt,.glass .dm-day,.glass .dm-time{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#f4f4f5}
.glass .dm-opt:hover,.glass .dm-day:hover,.glass .dm-time:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.glass .dm-opt.on,.glass .dm-day.on,.glass .dm-time.on{border-color:#fff;background:#fff;color:#09090b}
.glass .dm-day small{color:rgba(255,255,255,.5)}.glass .dm-day.on small{color:#6b6b73}
.glass .dm-opt.ck i{border-color:currentColor}
.glass .dm-opt.ck.on i{border-color:#09090b;background:#09090b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.dm-card.glass input.dm-in,.dm-card.glass textarea.dm-in{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff}
.glass .dm-in::placeholder{color:rgba(255,255,255,.4)}
.dm-card.glass .dm-in:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.dm-card.glass .dm-go{background:#fff;color:#09090b}
.glass .dm-go:disabled{opacity:.25}
.glass .dm-back{color:rgba(255,255,255,.55)}.glass .dm-back:hover{color:#fff}
.glass .dm-consent{color:rgba(255,255,255,.55)}
.glass .dm-consent .box{border-color:rgba(255,255,255,.35)}
.glass .dm-consent input:checked+.box{border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2309090b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.glass .dm-slot{background:rgba(255,255,255,.06)}.glass .dm-slot svg{stroke:rgba(255,255,255,.6)}.glass .dm-slot span{color:rgba(255,255,255,.6)}
.glass .dm-ok{background:rgba(48,209,88,.15)}.glass .dm-ok svg{stroke:#30d158}
.glass .dm-load i{border-color:rgba(255,255,255,.15);border-top-color:#fff}
.glass .dm-in.bad{border-color:#ff453a!important}

/* Héros : le bouton s'ouvre sur place en formulaire */
.hero-ctas{position:relative;z-index:3}
.hero-cta{border:0;cursor:pointer;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),max-height .4s,margin .4s}
.hero-note{transition:opacity .3s}
.hero-form{display:grid;grid-template-rows:0fr;width:min(460px,calc(100vw - 32px));opacity:0;transform:scale(.96) translateY(-6px);transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1),opacity .4s ease .1s,transform .6s cubic-bezier(.22,1,.36,1)}
.hero-form>.dm-card{min-height:0;margin:0;overflow:hidden;text-align:left}
[data-hx].open .hero-cta{opacity:0;transform:scale(.9);max-height:0;margin:0;padding:0;pointer-events:none;overflow:hidden}
[data-hx].open .hero-note{display:none}
[data-hx].open .hero-form{grid-template-rows:1fr;opacity:1;transform:none}
[data-hx].open .hero-form>.dm-card{min-height:440px;padding:24px 24px 22px}
.hero-form>.dm-card{padding:0 24px}
@media (max-width:600px){[data-hx].open .hero-form>.dm-card{min-height:480px;padding:22px 18px 20px}}
/* verre du héros : plus dense, les avis ne transparaissent plus à travers le texte */
.hero-form .dm-card.glass{background:linear-gradient(rgba(34,34,38,.84),rgba(26,26,30,.84)) padding-box,linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 40%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.14)) border-box;backdrop-filter:blur(34px) saturate(1.5);-webkit-backdrop-filter:blur(34px) saturate(1.5)}
/* héros : la pilule de verre, puis le formulaire (texte bien contrasté) */
[data-hx] .email-form{margin-top:30px;transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1)}
[data-hx].open .email-form{display:none}
.hero-form .dm-card.glass{color:#fff}
.hero-form .glass .dm-q{font-size:18px}
.hero-form .glass .dm-opt,.hero-form .glass .dm-day,.hero-form .glass .dm-time{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.hero-form .glass .dm-hint,.hero-form .glass .dm-back,.hero-form .glass .dm-consent{color:rgba(255,255,255,.7)}

/* ═══ Formulaire v3 : verre givré lisible, transitions douces ═══ */
/* pilule du héros : une phrase + le bouton, toute la pilule est cliquable */
.pill-cta{cursor:pointer;padding-left:24px}
.pill-txt{flex:1;min-width:0;color:rgba(255,255,255,.82);font-size:15px;font-weight:500;letter-spacing:-.01em;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill-cta{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.25)}
@media (max-width:420px){.pill-txt{font-size:14px}}

/* verre givré : le flou ne passe pas à travers le héros découpé, donc le givre est peint, presque opaque */
.dm-card.glass,.hero-form .dm-card.glass{background:linear-gradient(180deg,rgba(52,52,58,.96),rgba(34,34,39,.96)) padding-box,linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 40%,rgba(255,255,255,.04) 65%,rgba(255,255,255,.18)) border-box!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.45)!important}
.dm-card.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.07),transparent 60%)}
.dm-card{position:relative}
.glass .dm-q{font-size:19px;letter-spacing:-.025em}

/* transitions : entrée seulement au changement d'étape, plus lente et sans saut */
.dm-step{animation:none}
.dm-step.enter{animation:dmIn2 .5s cubic-bezier(.22,1,.36,1) both}
@keyframes dmIn2{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.dm-step.enter>*{animation:dmIn2 .5s cubic-bezier(.22,1,.36,1) both}
.dm-step.enter>:nth-child(2){animation-delay:.05s}.dm-step.enter>:nth-child(3){animation-delay:.1s}.dm-step.enter>:nth-child(4){animation-delay:.15s}.dm-step.enter>:nth-child(5){animation-delay:.2s}
.dm-opt,.dm-day,.dm-time{transition:border-color .25s,background-color .25s,color .25s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.dm-opt:active,.dm-day:active,.dm-time:active{transform:scale(.98)}
.dm-prog i{transition:width .7s cubic-bezier(.22,1,.36,1)}
/* champs qui apparaissent sur place (CRM, autre chose, heures) : ils s'ouvrent en douceur */
.dm-reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:-12px;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s,margin .45s cubic-bezier(.22,1,.36,1)}
.dm-reveal>div{min-height:0;overflow:hidden}
.dm-reveal.on{grid-template-rows:1fr;opacity:1;margin-top:0}
.dm-reveal .dm-in{margin:2px 0}
.dm-times{grid-template-columns:repeat(4,1fr);max-height:none!important;padding:2px 0}
.dm-go{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-card .dm-done{padding:30px 0 10px}
@media (max-width:600px){.dm-times{grid-template-columns:repeat(4,1fr)}.dm-days{gap:5px}.dm-day b{font-size:17px}}
/* héros : l'état choisi reste bien visible */
.hero-form .glass .dm-opt.on,.hero-form .glass .dm-day.on,.hero-form .glass .dm-time.on{border-color:#fff;background:#fff;color:#09090b}
.hero-form .glass .dm-day.on small{color:#6b6b73}
.pill-txt .s{display:none}
@media (max-width:420px){.pill-txt .l{display:none}.pill-txt .s{display:inline}}


/* ═══ Héros : le bouton blanc s'agrandit en formulaire blanc ; le titre rétrécit ; la main reste là ═══ */
.hero h1{transition:font-size .75s cubic-bezier(.22,1,.36,1),margin .75s cubic-bezier(.22,1,.36,1)}
.hero-sub{max-height:120px;transition:max-height .75s cubic-bezier(.22,1,.36,1),margin .75s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.hero.booking h1{font-size:clamp(34px,4.2vw,58px)}
.hero.booking .hero-sub{max-height:0;margin-top:0;opacity:0;overflow:hidden}
.hero-rv{transition:opacity .75s ease}
.hero.booking .hero-rv{opacity:.55}

.hero-ctas{display:block;margin:34px auto 0;position:relative;z-index:3}
.hx-box{position:relative;width:236px;margin:0 auto;border-radius:26px;background:#fff;color:#09090b;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);text-align:left;transition:width .75s cubic-bezier(.22,1,.36,1),border-radius .75s cubic-bezier(.22,1,.36,1),box-shadow .75s ease}
.hx-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;padding:0;border:0;background:none;color:#09090b;font:600 15.5px var(--app);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:opacity .25s ease,height .75s cubic-bezier(.22,1,.36,1)}
.hx-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hx-box:hover .hx-btn svg{transform:translateX(4px)}
.hx-box .hero-form{display:grid;grid-template-rows:0fr;width:auto;margin:0;opacity:1;transform:none;transition:grid-template-rows .75s cubic-bezier(.22,1,.36,1)!important}
.hx-wrap{position:relative;min-height:0;overflow:hidden}
.hx-card{min-height:0!important;width:auto;margin:0;padding:24px 24px 22px;border-radius:0;background:none!important;box-shadow:none!important;color:#09090b;opacity:0;transition:opacity .4s ease}
.hx-close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:#f1f1f3;color:#52525b;cursor:pointer;opacity:0;transition:opacity .3s ease,background-color .2s}
.hx-close:hover{background:#e4e4e7}
.hx-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hx-card .dm-prog{margin-right:44px}

[data-hx].open .hx-box{width:min(480px,calc(100vw - 32px));border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
[data-hx].open .hx-btn{height:0;opacity:0;pointer-events:none}
[data-hx].open .hero-form{grid-template-rows:1fr}
[data-hx].open .hx-card{opacity:1;min-height:440px!important;transition:opacity .45s ease .3s}
[data-hx].open .hx-close{opacity:1;transition:opacity .3s ease .45s}
@media (max-width:600px){[data-hx].open .hx-card{min-height:480px!important;padding:22px 18px 20px}}
@media (prefers-reduced-motion:reduce){.hx-box,.hx-btn,.hx-box .hero-form,.hero h1,.hero-sub{transition:none!important}}
/* pied de page : le gris passe aussi derrière les coins arrondis de la page */
.footer{box-shadow:0 -48px 0 0 var(--char,#18181b)}
/* cartes de fonctions : un seul niveau de flou, chaque carte de verre sur sa propre couche (plus de scintillement pendant la frappe) */
.cell{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.fx{contain:paint}
.fx .mini-card,.fx .push,.fx .found,.fx .title-field,.fx .sugg,.fx .dict,.fx .mini-portal,.fx .vcard,.fx .dm-notif,.fx .mail-mini,.fx .bk-card,.fx .bk-cal,.fx .ask,.fx .bubble-u{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx .mz{transform:translateZ(0)}
/* l ombre du rideau ne tombe que vers le bas (plus de bande grise sous les outils) */
main{box-shadow:0 44px 50px -22px rgba(0,0,0,.28)}
/* mobile : plus d'air autour de « Démo » ; liens du pied de page qui passent à la ligne */
@media (max-width:600px){
  .nav-row{padding:0 20px}
  .nav.glass .nav-row,.nav.open .nav-row{padding:0 12px}
  .ft-row{flex-direction:column;align-items:flex-start;gap:14px}
  .ft-row nav{flex-wrap:wrap;gap:10px 20px}
}
/* formulaire du héros : centré, marges identiques ; le ✕ passe au-dessus de la carte */
[data-hx].open .hx-box{width:min(480px,100%)}
.hx-card .dm-prog{margin-right:0}
.hx-box{overflow:visible}
.hx-box .hero-form>.hx-wrap{overflow:hidden;border-radius:inherit}
[data-hx].open .hero-form>.hx-wrap{overflow:visible}
.hx-close{top:-42px;right:0;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hx-close:hover{background:rgba(255,255,255,.24)}
[data-hx].open .hero-ctas{margin-top:58px}
/* titre du rendez-vous : « Félix Arsenault » sur la même ligne de base que le reste */
.t-w{vertical-align:baseline!important}
.w-new{top:auto;bottom:0}
@media (max-width:600px){[data-hx].open .hero-ctas{margin-top:72px}}
/* ✕ du héros : à l'intérieur de la carte, en haut à droite ; la barre reste centrée avec des marges égales */
.hx-close{top:13px!important;right:14px!important;width:30px;height:30px;background:#f1f1f3!important;color:#52525b!important;box-shadow:none!important}
.hx-close:hover{background:#e4e4e7!important}
.hx-card .dm-prog{margin:3px 44px 24px!important}
[data-hx].open .hero-ctas{margin-top:34px}
@media (max-width:600px){[data-hx].open .hero-ctas{margin-top:30px}}