/* Aura Flow AI — feuille de styles.
   Blocs <style> d'origine concaténés dans l'ordre du document, sans modification. */
:root{
  --bg:#F3F4FA;--surface:#FFFFFF;--ink:#101014;--ink-2:#3A3D45;--muted:#767B87;--line:#E3E7EE;
  --accent:#6C5CE7;--accent-2:#4A9FE8;--accent-lite:#9C8DF5;--dark:#15161A;--radius:22px;
  --shadow:0 1px 2px rgba(16,16,20,0.04),0 12px 32px -12px rgba(16,16,20,0.10);
  --shadow-lg:0 2px 4px rgba(16,16,20,0.04),0 40px 80px -30px rgba(16,16,20,0.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--ink);text-decoration:none}
a:hover{color:#000}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.container{width:min(1180px,100% - 48px);margin-inline:auto}
section{padding:clamp(72px,9vw,132px) 0}

/* nav */
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(238,241,246,0.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav-wrap.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:78px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;letter-spacing:-0.03em}
.logo img{height:30px;width:auto;display:block}
.logo picture{display:flex;flex-shrink:0}
.nav-links{display:flex;gap:4px;margin-inline:auto}
.nav-links a{padding:9px 15px;border-radius:100px;font-size:15px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.nav-links a:hover{background:#fff;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:-0.01em;border:0;cursor:pointer;border-radius:100px;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--dark);color:#fff;padding:7px 22px 7px 7px;box-shadow:var(--shadow)}
.btn-dark:hover{background:#000;color:#fff}
.btn-dark .arr{width:38px;height:38px;border-radius:100px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.btn-dark.lg{font-size:15.5px;padding:7px 24px 7px 7px}
.btn-dark.lg .arr{width:40px;height:40px}
.btn-ghost{background:transparent;color:var(--ink-2);padding:11px 18px;border:1px solid var(--line);font-size:14.5px}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#D3D9E3}
.nav .btn-dark{flex-shrink:0}
.nav-toggle{display:none}

/* hero */
.hero{padding:0;text-align:center;position:relative;background:var(--bg)}
.hero-visual{position:relative;min-height:min(72vh,640px);display:flex;align-items:center;padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,88px);isolation:isolate;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 12% 30%,#fff 0%,rgba(255,255,255,0) 62%),radial-gradient(700px 460px at 88% 78%,rgba(108,92,231,0.28) 0%,rgba(108,92,231,0) 70%);z-index:-1}
.hero-grid{display:flex;justify-content:flex-start;width:100%}
.hero-text{text-align:left;max-width:600px}
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:100px;padding:6px 16px 6px 7px;font-size:13.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow)}
.pill .ic{width:26px;height:26px;border-radius:100px;background:#F1F4F9;display:grid;place-items:center;color:var(--ink)}
.hero h1{font-size:clamp(34px,4vw,54px);line-height:1.06;margin:18px 0 16px;max-width:17ch;color:var(--ink)}
.hero .lead{font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;color:var(--ink-2);max-width:34ch;margin:0;font-weight:500;text-wrap:balance}
.hero-cta{display:flex;align-items:center;justify-content:flex-start;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;margin-top:28px}
.hero-proof{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--muted)}
.hero-proof b{color:var(--ink);font-weight:700}
.hero-proof i{width:4px;height:4px;border-radius:50%;background:#C3CDDA;display:block}
.proof{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.avatars{display:flex}
.avatars span{width:34px;height:34px;border-radius:100px;border:2.5px solid var(--dark);margin-left:-10px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.avatars span:first-child{margin-left:0}
.proof small{font-size:13px;color:var(--muted);font-weight:500}

/* hero visual */
.stage{position:relative;margin-top:0;padding-bottom:clamp(20px,4vw,50px)}
.panel{background:var(--surface);border-radius:26px;box-shadow:var(--shadow-lg);padding:clamp(20px,2.6vw,32px);text-align:left;max-width:1000px;margin-inline:auto;border:1px solid var(--line)}
.panel-head{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.panel-head .t{font-weight:700;font-size:16px;letter-spacing:-0.02em}
.panel-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.live .dot{width:7px;height:7px;border-radius:50%;background:#2ECC71;box-shadow:0 0 0 4px rgba(46,204,113,0.15)}
.panel-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(16px,2vw,24px)}
.chat{display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;padding:13px 17px;border-radius:16px;font-size:14.5px;line-height:1.45;font-weight:500}
.msg.them{align-self:flex-start;background:#F1F4F9;color:var(--ink)}
.msg.us{align-self:flex-end;background:var(--dark);color:#fff}
.msg.them.soft{background:#F7F9FC;color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--muted);background:#F7F9FC;border:1px solid var(--line);border-radius:100px;padding:6px 13px}
.kpis{display:flex;flex-direction:column;gap:16px}
.kpi{border:1px solid var(--line);border-radius:18px;padding:20px;flex:1;display:flex;flex-direction:column;justify-content:center}
.kpi .lab{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.kpi .val{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kpi .num{font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:100px;background:var(--dark);color:#fff}
.chip.lime{background:var(--accent);color:#fff}

/* logos */
.logos{padding:clamp(56px,7vw,84px) 0;text-align:center;margin-top:0}
.logos .lab{font-size:13.5px;font-weight:600;color:#5C616D;letter-spacing:0.02em}
.logos .row{display:flex;justify-content:center;align-items:center;gap:clamp(28px,5vw,56px);flex-wrap:wrap;margin-top:26px}
.logos .row span{font-size:19px;font-weight:700;letter-spacing:-0.03em;color:#767B87;line-height:1;display:inline-flex;align-items:center;height:24px}

/* split section */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,80px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink-2);background:#fff;border-radius:100px;padding:7px 16px;box-shadow:var(--shadow)}
h2.title{font-size:clamp(32px,4.4vw,56px);line-height:1.02;margin:22px 0 20px}
.sec-lead{font-size:17.5px;line-height:1.55;color:var(--muted);font-weight:500;max-width:46ch}
.checks{display:grid;gap:14px;margin-top:32px}
.checks div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.checks .cb{width:22px;height:22px;border-radius:100px;background:var(--accent);display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.dash{display:grid;gap:16px}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{border:1px solid var(--line);border-radius:16px;padding:18px}
.mini .lab{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.mini .num{font-size:26px;font-weight:700;letter-spacing:-0.04em}
.bars{display:grid;gap:12px;margin-top:6px}
.bar{display:grid;gap:7px}
.bar .top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink-2)}
.bar .track{height:7px;border-radius:100px;background:#EEF1F6;overflow:hidden}
.bar .fill{height:100%;border-radius:100px;background:var(--dark)}
.bar:nth-child(2) .fill{background:#4A4E58}
.bar:nth-child(3) .fill{background:#8A8F9B}

/* trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:52px}
.trio .card{padding:32px 28px 34px}
.trio .big{font-size:clamp(38px,4.2vw,52px);font-weight:700;letter-spacing:-0.045em;line-height:1;margin-bottom:16px}
.trio h3{font-size:19px;margin-bottom:10px}
.trio p{font-size:15px;color:var(--muted);font-weight:500;line-height:1.55}

/* quote */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(30px,4vw,52px);display:grid;gap:26px;max-width:900px;margin-inline:auto}
.quote p{font-size:clamp(19px,2.2vw,27px);line-height:1.4;font-weight:600;letter-spacing:-0.025em}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:46px;height:46px;border-radius:100px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:15px;background:#2F3A4C}
.who .n{font-size:15px;font-weight:700}
.who .r{font-size:13.5px;color:var(--muted);font-weight:500}

/* final */
.final{background:var(--dark);border-radius:32px;padding:clamp(52px,7vw,96px) 32px;text-align:center;color:#fff}
.final .eyebrow{background:rgba(255,255,255,0.10);color:#fff;box-shadow:none}
.final h2{font-size:clamp(32px,4.8vw,60px);line-height:1.02;margin:22px 0 18px}
.final p{color:rgba(255,255,255,0.62);font-size:18px;font-weight:500;max-width:44ch;margin:0 auto 36px}
.final .btn-dark{background:var(--accent);color:#fff;padding:8px 30px 8px 8px;font-size:17px}
.final .btn-dark:hover{background:#7D6FF0;color:#15161A}
.final .btn-dark .arr{background:#15161A;color:var(--accent);width:46px;height:46px}
.final .note{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,0.45);font-weight:500}

/* footer */
footer{padding:clamp(48px,6vw,72px) 0 40px}
.foot{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.foot .desc{font-size:14.5px;color:var(--muted);font-weight:500;max-width:34ch;margin-top:14px;line-height:1.55}
.foot nav{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.fcol{display:grid;gap:11px}
.fcol .h{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:0.04em;text-transform:uppercase}
.fcol a{font-size:14.5px;color:var(--muted);font-weight:500}
.fcol a:hover{color:var(--ink)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-weight:500}

@media (max-width:900px){
  .panel-grid,.split{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr)}
  .hero-cta{flex-direction:column}
  .hero-text{text-align:center;max-width:none}
  .hero-cta{justify-content:center}
  .proof{align-items:center}
}
.section-head{max-width:660px}
/* ===== Démo interactive ===== */

.demo-head{position:relative}
.demo-head::before{content:"";position:absolute;inset:-24px -32px;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,255,255,0.55),rgba(255,255,255,0) 75%);pointer-events:none;z-index:-1}
.demo-inner{position:relative;width:min(1120px,100% - 64px);margin-inline:auto}
.demo-head{margin-bottom:clamp(34px,4vw,52px);max-width:680px;margin-inline:auto}
.demo-stage{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(24px,3.4vw,48px);align-items:center;max-width:920px;margin-inline:auto}
.demo-chat{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 2px 4px rgba(16,16,20,0.04),0 50px 90px -40px rgba(16,16,20,0.30);overflow:hidden;display:flex;flex-direction:column}
.dc-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.dc-av{width:34px;height:34px;border-radius:100px;background:linear-gradient(140deg,#2F3A4C,#15161A);display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 3px rgba(108,92,231,0.35)}
.dc-name{display:flex;flex-direction:column;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;line-height:1.3}
.dc-name small{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:0;display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.dc-name small i{width:7px;height:7px;border-radius:50%;background:#2ECC71;display:block;animation:dcPulse 2s infinite}
.dc-live{margin-left:auto}
.dc-live i{width:8px;height:8px;border-radius:50%;background:#2ECC71;display:block;animation:dcPulse 2s infinite}
@keyframes dcPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,0.5)}70%{box-shadow:0 0 0 9px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.dc-body{padding:22px;display:flex;flex-direction:column;gap:14px;min-height:250px;max-height:340px;overflow-y:auto}
.dc-line{display:flex;align-items:flex-end;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.dc-line.in{opacity:1;transform:none}
.dc-line.user{justify-content:flex-end}
.dc-bav{width:26px;height:26px;border-radius:100px;background:linear-gradient(140deg,#2F3A4C,#15161A);display:grid;place-items:center;flex-shrink:0;margin-bottom:2px}
.dc-msg{max-width:78%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.45;font-weight:500}
.dc-msg.bot{background:#F1F4F9;color:var(--ink);border-bottom-left-radius:6px}
.dc-msg.user{background:var(--dark);color:#fff;border-bottom-right-radius:6px}
.dc-msg .rtitle{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:8px;display:block}
.dc-msg .rlist{border-left:2px solid #CBD5E1;padding-left:12px;display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.dc-msg .rlist span{font-size:13px;color:var(--muted);font-weight:500}
.dc-msg .rdone{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.dc-msg .rdone i{width:16px;height:16px;border-radius:100px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.dc-typing{display:inline-flex;gap:4px;background:#F1F4F9;border-radius:14px;padding:12px 15px}
.dc-typing i{width:6px;height:6px;border-radius:50%;background:#A5ABB8;display:block;animation:dcBlip 1.3s infinite}
.dc-typing i:nth-child(2){animation-delay:.18s}
.dc-typing i:nth-child(3){animation-delay:.36s}
@keyframes dcBlip{0%,60%,100%{opacity:.35}30%{opacity:1}}
.dc-input{display:flex;align-items:center;gap:10px;margin:0 18px 14px;padding:6px 6px 6px 18px;border:1.5px solid rgba(108,92,231,0.85);border-radius:100px;background:#fff;box-shadow:0 0 0 4px rgba(108,92,231,0.16)}
.dc-input input{flex:1;min-width:0;border:0;padding:10px 0;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;outline:none}
.dc-input input::placeholder{color:#9AA0AC}
.dc-input button{width:40px;height:40px;border:0;border-radius:100px;background:var(--dark);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .2s,background .2s}
.dc-input button:hover{transform:translateY(-1px);background:#000}
.dc-sugg{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 18px}
.dc-sugg button{border:1px solid var(--line);background:#fff;border-radius:100px;padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.dc-sugg button:hover{border-color:#C3CDDA;color:var(--ink)}
.demo-stats{display:flex;flex-direction:column;gap:16px}
.ds-card{background:rgba(21,22,26,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);border-radius:20px;padding:20px 22px;color:#fff;box-shadow:0 30px 60px -30px rgba(16,16,20,0.4)}
.ds-card .lab{font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.6);display:block;margin-bottom:10px}
.ds-card .num{font-size:34px;font-weight:700;letter-spacing:-0.04em;line-height:1;display:flex;align-items:baseline;gap:8px}
.ds-card .num b{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--accent);color:#fff;letter-spacing:0}
.ds-card .sub{display:block;margin-top:10px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.55)}
.ds-card .fact{display:block;font-size:14.5px;line-height:1.5;font-weight:600;color:rgba(255,255,255,0.9)}
@media (max-width:900px){
  .demo-inner{width:min(1120px,100% - 40px)}
  .demo-stage{grid-template-columns:minmax(0,1fr)}
  .demo-stats{flex-direction:row}
  .ds-card{flex:1}
}
.section-head.center{margin-inline:auto;text-align:center}
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(38px,4vw,56px)}
.offer .card{padding:34px 30px 36px;display:flex;flex-direction:column;gap:14px}
.oicon{width:46px;height:46px;border-radius:14px;background:#F1F4F9;display:grid;place-items:center;color:var(--ink);margin-bottom:6px}
.offer h3{font-size:20px;line-height:1.2}
.offer p{font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:500}
.offer .out{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
.offer .out .cb{width:20px;height:20px;border-radius:100px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
/* stacking cards — section e-commerce */
.stack{position:relative;margin-top:clamp(38px,4vw,56px);display:block}
.stack-gap{height:76vh;pointer-events:none}
.stack-gap.tail{height:104vh}
.stack-card{position:sticky;transition:transform .5s cubic-bezier(.22,.61,.36,1);height:clamp(440px,58vh,540px);background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(30px,3.2vw,48px);display:grid;grid-template-columns:1.02fr 0.98fr;gap:clamp(28px,3.6vw,56px);align-items:stretch;box-shadow:0 -12px 34px -18px rgba(16,16,20,0.12),0 40px 80px -30px rgba(16,16,20,0.26);will-change:transform}
.stack-card:nth-of-type(1){top:100px;z-index:1}
.stack-card:nth-of-type(2){top:116px;z-index:2}
.stack-card:nth-of-type(3){top:132px;z-index:3}
.stack-card.tucked{transform:scale(.972)}
.stack-tx{display:flex;flex-direction:column;gap:14px;justify-content:center}
.stack-tx .step{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:0.06em;color:var(--muted);text-transform:uppercase}
.stack-tx .step i{width:26px;height:1.5px;background:var(--line);display:block}
.stack-tx h3{font-size:clamp(22px,2.5vw,30px);line-height:1.12}
.stack-tx p{font-size:16px;line-height:1.6;color:var(--muted);font-weight:500;max-width:44ch}
.stack-tx .out{margin-top:8px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
.stack-tx .out .cb{width:20px;height:20px;border-radius:100px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
/* illustrations */
.ill{background:#F7F9FC;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:center;height:100%}
.ill .b{max-width:78%;padding:12px 15px;border-radius:15px;font-size:13.5px;line-height:1.45;font-weight:500}
.ill .b.them{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.ill .b.us{align-self:flex-end;background:var(--dark);color:#fff}
.ill .person{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ill .person .av{width:28px;height:28px;border-radius:100px;background:#2F3A4C;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.ill .pick{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 14px;display:flex;align-items:center;gap:12px;align-self:flex-start;max-width:88%;box-shadow:0 10px 24px -14px rgba(16,16,20,0.18)}
.ill .pick .sq{width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,#E7EDF6,#D5DEEB);flex-shrink:0}
.ill .pick .t{font-size:13.5px;font-weight:700;letter-spacing:-0.02em}
.ill .pick .s{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.ill .pick .ok{margin-left:auto;width:22px;height:22px;border-radius:100px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.ill .pdp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center}
.ill .pdp .img{height:74px;border-radius:12px;background:linear-gradient(160deg,#E7EDF6,#D5DEEB)}
.ill .pdp .ttl{font-size:14px;font-weight:700;letter-spacing:-0.02em}
.ill .pdp .pr{font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}
.ill .qchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.ill .qchips span{font-size:11.5px;font-weight:600;color:var(--ink-2);background:#F1F4F9;border:1px solid var(--line);border-radius:100px;padding:5px 10px}
.ill .dots{display:inline-flex;gap:4px;align-items:center;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 13px}
.ill .dots i{width:5px;height:5px;border-radius:100px;background:#A5ABB8;display:block;animation:blip 1.4s infinite}
.ill .dots i:nth-child(2){animation-delay:.2s}
.ill .dots i:nth-child(3){animation-delay:.4s}
@keyframes blip{0%,60%,100%{opacity:.35}30%{opacity:1}}
.ill .track{display:grid;gap:0}
.ill .st{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start}
.ill .st .mk{width:26px;display:grid;justify-items:center;gap:0}
.ill .st .mk .d{width:22px;height:22px;border-radius:100px;background:var(--dark);display:grid;place-items:center;flex-shrink:0}
.ill .st .mk .ln{width:1.5px;flex:1;min-height:22px;background:var(--line);margin:3px 0}
.ill .st.todo .mk .d{background:#fff;border:1.5px solid #CBD5E1}
.ill .st .lab{font-size:13.5px;font-weight:700;letter-spacing:-0.015em;padding-bottom:14px}
.ill .st .lab small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:3px;letter-spacing:0}
.ill .st.todo .lab{color:var(--muted)}
.ill .calm{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:9px}

/* ===== Espace client (dark) ===== */
.espace{background:transparent;color:#fff;border-radius:0;width:100%;padding:clamp(56px,7vw,96px) 0;position:relative;isolation:isolate}
.espace::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dark);box-shadow:0 0 0 100vmax var(--dark);clip-path:inset(0 -100vmax)}
.espace .container{max-width:1180px}
.espace .eyebrow{background:rgba(255,255,255,0.08);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,0.10)}
.espace .e-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.espace .e-head h2{font-size:clamp(30px,4.2vw,52px);line-height:1.02;color:#fff;margin:20px 0 0}
.e-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(36px,4vw,72px);align-items:start}
.e-left{display:flex;flex-direction:column;gap:clamp(30px,3.4vw,44px)}
.e-block{position:relative;padding-left:22px;opacity:0;transform:translateX(-26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.e-block.in{opacity:1;transform:none}
.e-block::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:100px;background:rgba(255,255,255,0.12)}
.e-block.in::before{background:var(--accent)}
.e-block h3{font-size:clamp(20px,2.2vw,26px);color:#fff;margin-bottom:10px;letter-spacing:-0.03em}
.e-block p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,0.60);font-weight:500;max-width:34ch}
.e-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;opacity:0;transform:translateX(-26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.e-cta.in{opacity:1;transform:none}
.e-cta .btn-lime{background:var(--accent);color:#fff;padding:7px 24px 7px 7px}
.e-cta .btn-lime:hover{background:#7D6FF0;color:#15161A}
.e-cta .btn-lime .arr{background:#15161A;color:var(--accent)}
.e-cta .team{display:flex;align-items:center;gap:11px;font-size:13px;color:rgba(255,255,255,0.55);font-weight:500}
.e-cta .team .av{width:34px;height:34px;border-radius:100px;background:#2F6F5E;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;border:2px solid var(--dark)}
.e-right{position:sticky;top:100px}
.dashx{background:#0C0D10;border:1px solid rgba(255,255,255,0.09);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,0.7)}
.dashx-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,0.07)}
.dashx-bar .dots{display:flex;gap:7px}
.dashx-bar .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.18)}
.dashx-bar .dots i:nth-child(1){background:#FF5F57}.dashx-bar .dots i:nth-child(2){background:#FEBC2E}.dashx-bar .dots i:nth-child(3){background:#28C840}
.dashx-bar .url{margin-left:8px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,0.45);font-weight:500}
.dashx-body{padding:clamp(16px,1.8vw,22px);display:grid;gap:14px}
.dxstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dxk{border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:15px 16px;background:rgba(255,255,255,0.02)}
.dxk .lab{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:11px}
.dxk .lab svg{width:14px;height:14px;color:var(--accent)}
.dxk .num{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-0.04em;color:#fff;line-height:1;display:flex;align-items:baseline;gap:3px}
.dxk .num small{font-size:13px;font-weight:600;color:rgba(255,255,255,0.45)}
.dxk .tag{display:inline-block;margin-top:11px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;background:rgba(108,92,231,0.14);color:var(--accent)}
.dxrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dxpanel{border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 17px;background:rgba(255,255,255,0.02)}
.dxpanel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dxpanel .ph .t{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.dxpanel .ph .badge{font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.06);border-radius:100px;padding:4px 10px}
.dxarea{height:96px}
.dxbars{display:flex;align-items:flex-end;gap:6px;height:96px}
.dxbars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--accent),rgba(108,92,231,0.35))}
.dxintents .ph{margin-bottom:16px}
.dxint{display:grid;gap:9px;margin-bottom:13px}
.dxint:last-child{margin-bottom:0}
.dxint .top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.dxint .top .n{color:rgba(255,255,255,0.82)}
.dxint .top .v{color:#fff;font-weight:700}
.dxint .track{height:6px;border-radius:100px;background:rgba(255,255,255,0.07);overflow:hidden}
.dxint .fill{height:100%;border-radius:100px;background:var(--accent)}
.dxint:nth-child(3) .fill{background:rgba(108,92,231,0.7)}
.dxint:nth-child(4) .fill{background:rgba(108,92,231,0.5)}
.dxint:nth-child(5) .fill{background:rgba(108,92,231,0.38)}
.dxint:nth-child(6) .fill{background:rgba(108,92,231,0.28)}
@media (max-width:900px){
  /* minmax(0,1fr) au lieu de 1fr : sans ça, le min-width:auto de .e-right gonfle la piste
     à 390px et le mockup du dashboard déborde du container sur mobile (rogné à droite). */
  .e-grid{grid-template-columns:minmax(0,1fr)}
  .e-right{position:relative;top:auto}
  .dxstats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dxrow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .stack-gap{display:none}
  .stack-card{grid-template-columns:minmax(0,1fr);position:relative;top:auto!important;transform:none!important;height:auto!important;margin-bottom:clamp(18px,3vw,28px)!important}
  .ill{height:auto;min-height:220px}
  .stack{gap:clamp(18px,3vw,28px)}
  .ill{min-height:0}
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:44px}
.stats .card{padding:32px 28px;text-align:left}
.stats .big{font-size:clamp(38px,4.4vw,54px);font-weight:700;letter-spacing:-0.045em;line-height:1;margin-bottom:14px}
.stats h3{font-size:17px;margin-bottom:8px}
.stats p{font-size:14.5px;color:var(--muted);font-weight:500;line-height:1.55}
.stats .foot-note{margin-top:20px;font-size:12.5px;color:var(--muted);font-weight:600}
.story{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(32px,4.4vw,60px);max-width:920px;margin-inline:auto;text-align:center;display:grid;gap:24px;justify-items:center}
.story p{font-size:clamp(20px,2.4vw,30px);line-height:1.34;font-weight:700;letter-spacing:-0.03em;max-width:30ch}
.story .sig{font-size:14.5px;color:var(--muted);font-weight:600}
.narrative-wrap{background:radial-gradient(120% 100% at 100% 0%, rgba(108,92,231,0.22), transparent 55%),radial-gradient(90% 90% at 0% 100%, rgba(21,22,26,0.06), transparent 60%),var(--bg);padding:clamp(56px,7vw,96px) 0}
.narrative-grid{display:grid;grid-template-columns:1fr 0.92fr;gap:clamp(36px,5vw,80px);align-items:center}
.narrative-tx{display:flex;flex-direction:column;justify-content:center}
.narrative-tx h2{font-size:clamp(30px,3.8vw,46px);line-height:1.1;margin:0 0 20px;max-width:14ch;color:var(--ink);letter-spacing:-0.035em;font-weight:700;text-wrap:balance}
.narrative-tx p.body{font-size:18px;line-height:1.6;color:var(--ink-2);font-weight:500;max-width:46ch;margin:0 0 32px}
.narrative-tx .founder{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid rgba(108,92,231,0.55);border-radius:18px;background:var(--surface);box-shadow:0 2px 4px rgba(16,16,20,0.05),0 34px 70px -28px rgba(16,16,20,0.30)}
.narrative-tx .founder .av{width:50px;height:50px;border-radius:100px;background:linear-gradient(150deg,#3A4560,#1D2333);display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 4px rgba(108,92,231,0.35)}
.narrative-tx .founder .n{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.narrative-tx .founder .q{font-size:15px;color:var(--ink-2);font-weight:500;line-height:1.55;font-style:italic}
.narrative-stat{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);font-weight:600;position:relative}
.narrative-stat .ns-num{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.02em;margin-right:4px}
.nv-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:20px;max-width:440px;margin-inline:auto}
.nv-head{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.nv-head .ic{width:30px;height:30px;border-radius:100px;background:#F1F4F9;display:grid;place-items:center;flex-shrink:0}
.nv-head .t{font-size:13.5px;font-weight:700;letter-spacing:-0.015em}
.nv-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.nv-head .live .dot{width:6px;height:6px;border-radius:50%;background:#2ECC71;box-shadow:0 0 0 0 rgba(46,204,113,0.5);animation:nvPulse 2s infinite}
@keyframes nvPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,0.5)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.nv-chat{display:flex;flex-direction:column;gap:11px}
.nv-chat .msg,.nv-chat .typing,.nv-chat .tag{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.nv-chat .msg.in,.nv-chat .typing.in,.nv-chat .tag.in{opacity:1;transform:none}
.nv-chat .typing{align-self:flex-start;display:inline-flex;gap:4px;background:#F1F4F9;border-radius:14px;padding:11px 14px}
.nv-chat .typing i{width:6px;height:6px;border-radius:50%;background:#A5ABB8;display:block;animation:nvBlip 1.3s infinite}
.nv-chat .typing i:nth-child(2){animation-delay:.18s}
.nv-chat .typing i:nth-child(3){animation-delay:.36s}
@keyframes nvBlip{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@media (max-width:900px){.narrative-grid{grid-template-columns:minmax(0,1fr)}.narrative-visual{order:-1}}
/* shared entrance system */
.anim{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.anim.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim,.reveal-l{opacity:1!important;transform:none!important;transition:none!important}}
.inbox{display:grid;gap:12px}
.inbox .it{border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center}
.inbox .it .av{width:34px;height:34px;border-radius:100px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.inbox .it .q{font-size:14.5px;font-weight:600;letter-spacing:-0.015em}
.inbox .it .s{font-size:13px;color:var(--muted);font-weight:500;margin-top:3px}
.inbox .it .badge{margin-left:auto;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:100px;background:#F1F4F9;color:var(--ink-2);white-space:nowrap}
.inbox .it .badge.ok{background:var(--accent);color:#fff}
@media (max-width:900px){.offer,.stats{grid-template-columns:minmax(0,1fr)}}
/* hero dashboard */
.hero-grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);align-items:center;gap:clamp(20px,2.6vw,44px)}
.hero-dash{position:relative;perspective:1700px;justify-self:start;pointer-events:none}
.hero-dash .hd,.hero-dash .hd-back{transform-origin:left center}
.hero-dash .hd-back{position:absolute;border-radius:22px;background:#fff;border:1px solid var(--line);filter:blur(1.5px);opacity:.55;transform:rotateY(-15deg) rotateX(7deg) rotate(-1.4deg) translate3d(38px,-52px,-90px);width:660px;height:300px;box-shadow:0 40px 80px -40px rgba(16,16,20,.35)}
.hero-dash .hd-back.two{opacity:.3;filter:blur(3px);transform:rotateY(-15deg) rotateX(7deg) rotate(-1.4deg) translate3d(76px,-96px,-170px);height:260px}
.hero-dash .hd{position:relative;width:820px;transform:rotateY(-15deg) rotateX(7deg) rotate(-1.4deg);display:grid;grid-template-columns:62px 1fr;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 60px 110px -50px rgba(16,16,20,.5);overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 52%,transparent 99%),linear-gradient(to bottom,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 52%,transparent 99%),linear-gradient(to bottom,#000 62%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hd-side{background:#15161A;padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.hd-side .lg{width:26px;height:26px;border-radius:9px;background:var(--accent)}
.hd-side .nv{width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.09)}
.hd-side .nv.on{background:rgba(108,92,231,.22)}
.hd-main{padding:22px 24px;display:grid;gap:16px;align-content:start}
.hd-top{display:flex;align-items:center;gap:12px}
.hd-top .t{font-size:16px;font-weight:700;letter-spacing:-.03em}
.hd-top .lv{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.hd-top .lv i{width:7px;height:7px;border-radius:50%;background:#2ECC71;display:block}
.hd-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hd-k{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.hd-k .l{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:9px}
.hd-k .v{display:flex;align-items:baseline;gap:9px;font-size:26px;font-weight:700;letter-spacing:-.04em}
.hd-k .v b{font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--accent);color:#fff;letter-spacing:0}
.hd-body{display:grid;grid-template-columns:1.25fr .95fr;gap:12px}
.hd-chat{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px}
.hd-chat .b{max-width:88%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.4;font-weight:500}
.hd-chat .b.them{align-self:flex-start;background:#F1F4F9;color:var(--ink)}
.hd-chat .b.us{align-self:flex-end;background:var(--dark);color:#fff}
.hd-chat .ok{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;background:rgba(108,92,231,.28);border-radius:100px;padding:5px 11px}
.hd-graph{border:1px solid var(--line);border-radius:14px;padding:14px}
.hd-graph .gt{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.hd-graph svg{width:100%;height:96px;display:block}
@media (max-width:1050px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-dash{display:none}}

/* clients marquee */
.clients{padding:clamp(40px,5vw,62px) 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients .lab{text-align:center;font-size:13.5px;font-weight:600;color:#5C616D;letter-spacing:.02em}
.mq{overflow:hidden;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq .tr{display:flex;gap:22px;width:max-content;animation:mqrun 38s linear infinite}
.mq:hover .tr{animation-play-state:paused}
.mq .tr span{width:190px;height:58px;border:1px dashed #CBD5E1;border-radius:14px;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;color:#9AA0AC;flex-shrink:0}
@keyframes mqrun{to{transform:translateX(calc(-50% - 11px))}}
@media (prefers-reduced-motion:reduce){.mq .tr{animation:none}}

/* problème narratif */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(34px,4vw,52px)}
.tl .it{padding-top:26px;border-top:2px solid var(--line);position:relative}
.tl .it::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:#CBD5E1;border:2px solid var(--bg)}
.tl .it.now{border-top-color:var(--ink)}
.tl .it.now::before{background:var(--ink)}
.tl .y{display:block;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.tl .it.now .y{color:var(--ink)}
.tl p{font-size:16.5px;line-height:1.55;color:var(--ink-2);font-weight:500;margin:0}
.tl .it:nth-child(2){transition-delay:.1s}.tl .it:nth-child(3){transition-delay:.2s}
.punch{isolation:isolate;font-size:clamp(30px,4.6vw,58px);font-weight:700;letter-spacing:-.042em;line-height:1.06;max-width:20ch;margin:clamp(46px,5.5vw,78px) 0 0;text-wrap:balance}
.mark{position:relative;display:inline-block}
@media (min-width:601px){.mark{white-space:nowrap}}
.mark::after{content:"";position:absolute;left:-6px;right:-6px;bottom:8%;height:34%;background:var(--accent);z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1) .2s}
.mark.in::after{transform:none}
.punch-sub{margin-top:24px;max-width:56ch;font-size:16.5px;line-height:1.6;color:var(--muted);font-weight:500}
.punch-sub b{color:var(--ink);font-weight:800}
.punch-sub em{font-style:normal;font-size:13px;color:#9AA0AC;font-weight:600}

/* comparatif */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,54px)}
.vs-col{border-radius:24px;padding:clamp(24px,2.8vw,36px);border:1px solid var(--line);background:var(--surface);display:grid;gap:20px;align-content:start}
.vs-col.win{border-color:rgba(108,92,231,.9);background:linear-gradient(180deg,rgba(108,92,231,.16),rgba(108,92,231,.03));box-shadow:0 30px 60px -34px rgba(16,16,20,.28)}
.vs-col.lose{background:#F4F6FA}
.vs-tag{display:inline-flex;align-items:center;gap:9px;align-self:start;font-size:13px;font-weight:800;letter-spacing:-.01em;border-radius:100px;padding:8px 16px;background:var(--dark);color:#fff}
.vs-col.lose .vs-tag{background:#DDE3EC;color:#6B7180}
.vs-r{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}
.vs-col.lose .vs-r{border-bottom-color:#E3E8F0}
.vs-r:last-child{padding-bottom:0;border-bottom:0}
.vs-r .cb{width:24px;height:24px;border-radius:100px;background:var(--accent);display:grid;place-items:center;margin-top:1px}
.vs-r .cb.x{background:#DDE3EC}
.vs-r b{display:block;font-size:16.5px;letter-spacing:-.025em;margin-bottom:5px}
.vs-r span{font-size:15px;line-height:1.55;color:var(--muted);font-weight:500}
.vs-col.lose b{color:#6B7180}
.vs-note{margin-top:26px;text-align:center;font-size:16.5px;font-weight:600;color:var(--ink-2)}
.vs-note b{font-weight:800;color:var(--ink)}
.vs-col:nth-child(2){transition-delay:.12s}

/* étapes */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(34px,4vw,54px)}
.step-c .sline{height:3px;background:var(--line);border-radius:100px;position:relative;margin-bottom:24px}
.step-c .sline::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--ink);z-index:1}
.step-c .sline i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);border-radius:100px;transition:width .9s cubic-bezier(.16,1,.3,1)}
.step-c.in .sline i{width:100%}
.step-c:nth-child(2) .sline i{transition-delay:.22s}
.step-c:nth-child(3) .sline i{transition-delay:.44s}
.step-c:nth-child(2){transition-delay:.12s}.step-c:nth-child(3){transition-delay:.24s}
.step-c .n{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.step-c h3{font-size:clamp(19px,2vw,23px);line-height:1.16;margin:10px 0 12px;letter-spacing:-.03em}
.step-c .dur{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;border-radius:100px;padding:6px 13px;background:var(--accent);color:#fff}
.step-c p{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:500}
.steps-note{margin-top:clamp(30px,3.4vw,44px);text-align:center;font-size:15px;font-weight:600;color:var(--muted)}
.steps-note b{color:var(--ink);font-weight:800}

/* témoignages */
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,54px)}
.tst .card{display:flex;flex-direction:column;gap:16px;padding:30px 28px 28px}
.tst .big{font-size:clamp(36px,4vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1}
.tst .kl{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:-.01em;margin-top:-8px}
.tst p{font-size:15.5px;line-height:1.6;color:var(--ink-2);font-weight:500}
.tst .who{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.ph-av{width:46px;height:46px;border-radius:100px;background:#E7EDF6;border:1px dashed #C3CDDA;display:grid;place-items:center;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#9AA0AC;flex-shrink:0}
.tst .card:nth-child(2){transition-delay:.12s}.tst .card:nth-child(3){transition-delay:.24s}

/* chiffres agrégés */
.numband{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);background:var(--dark);border-radius:28px;padding:clamp(32px,3.6vw,52px) clamp(24px,3vw,44px);color:#fff}
.nb .v{display:block;font-size:clamp(32px,3.8vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff}
.nb .v .cu{color:var(--accent)}
.nb .l{display:block;margin-top:12px;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);line-height:1.45;max-width:22ch}
.nb:nth-child(2){transition-delay:.09s}.nb:nth-child(3){transition-delay:.18s}.nb:nth-child(4){transition-delay:.27s}

/* intégrations */
.plat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(30px,3.4vw,44px);max-width:760px;margin-inline:auto}
.plat span{height:66px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:grid;place-items:center;font-size:15px;font-weight:700;letter-spacing:-.025em;color:#5C616D;box-shadow:var(--shadow)}

/* FAQ */
.faq{max-width:840px;margin:clamp(30px,3.6vw,48px) auto 0;display:grid;gap:12px}
.fq{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:4px 24px;box-shadow:var(--shadow)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 0;font-size:16.5px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary .pm{margin-left:auto;width:26px;height:26px;border-radius:100px;background:#F1F4F9;display:grid;place-items:center;flex-shrink:0;position:relative;transition:background .2s,transform .3s}
.fq summary .pm::before,.fq summary .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fq summary .pm::before{width:11px;height:1.8px}
.fq summary .pm::after{width:1.8px;height:11px}
.fq[open] summary .pm{background:var(--accent)}
.fq[open] summary .pm::after{transform:scaleY(0)}
.fq p{padding:0 44px 22px 0;margin:0;font-size:15.5px;line-height:1.62;color:var(--muted);font-weight:500}
.fq p b{color:var(--ink);font-weight:800}

/* CTA band */
.ctaband{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px clamp(22px,2.4vw,32px);box-shadow:var(--shadow);margin-top:clamp(38px,4.4vw,60px)}
.ctaband p{margin:0;font-size:17px;font-weight:700;letter-spacing:-.028em;max-width:46ch}
.ctaband .btn{flex-shrink:0}
@media (max-width:900px){
  .tl,.vs,.steps-grid,.tst{grid-template-columns:minmax(0,1fr)}
  .numband{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ctaband{flex-direction:column;align-items:flex-start}
}
:root{--accent-grad:linear-gradient(135deg,#4A9FE8,#6C5CE7)}
.btn-dark .arr,.checks .cb,.offer .out .cb,.stack-tx .out .cb,.ill .pick .ok,.dc-msg .rdone i,.vs-r .cb{background:var(--accent-grad)}
.vs-r .cb.x{background:#DDE3EC}
.mark::after{background:rgba(108,92,231,0.22)}
.final .mark::after{background:rgba(156,141,245,0.38)}
.final h2{isolation:isolate}
.ill-img picture,.lc-p .im picture{display:block;width:100%;height:100%}
img.fadein{opacity:0;transition:opacity .3s ease}
img.fadein.ready{opacity:1}
@media (prefers-reduced-motion:reduce){img.fadein{opacity:1;transition:none}}
.fq summary .pm::before,.fq summary .pm::after{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.fq[open] summary .pm{transform:rotate(45deg)}
.fq[open] summary .pm::after{transform:none}
.espace{--ex:0px;--er:56px}
.espace::before{clip-path:inset(0 var(--ex) round var(--er));will-change:clip-path}
@media (prefers-reduced-motion:reduce){.espace::before{clip-path:inset(0 -100vmax)}}
.hero-visual::before{background:radial-gradient(900px 520px at 12% 30%,#fff 0%,rgba(255,255,255,0) 62%),radial-gradient(700px 460px at 88% 78%,rgba(108,92,231,0.14) 0%,rgba(108,92,231,0) 70%)}
.hd-chat .ok{background:rgba(108,92,231,.12);color:#4A3FCF}
.hd-chat .ok svg{stroke:#4A3FCF}
.fq[open] summary .pm::before,.fq[open] summary .pm::after{background:#fff}
.step-c .dur{background:var(--accent-grad);color:#fff}
.step-c .sline i{background:var(--accent-grad)}
.step-c .sline::before{background:var(--accent)}
.vs-col.win{border-color:rgba(108,92,231,.55);background:linear-gradient(180deg,rgba(108,92,231,.10),rgba(108,92,231,.02))}
.dc-input{border-color:rgba(108,92,231,.55);box-shadow:0 0 0 4px rgba(108,92,231,.10)}
.dc-av,.dc-bav{box-shadow:0 0 0 3px rgba(108,92,231,.30)}
.narrative-wrap{background:radial-gradient(120% 100% at 100% 0%,rgba(108,92,231,0.13),transparent 55%),radial-gradient(90% 90% at 0% 100%,rgba(21,22,26,0.05),transparent 60%),var(--bg)}
/* accent sur fonds sombres : version plus claire */
.e-block.in::before,.dxint .fill,.hd-side .lg{background:var(--accent-lite)}
.dxk .lab svg,.nb .v .cu{color:var(--accent-lite)}
.dxk .tag{background:rgba(156,141,245,0.16);color:var(--accent-lite)}
.dxbars i{background:linear-gradient(180deg,var(--accent-lite),rgba(156,141,245,0.35))}
.dxint:nth-child(3) .fill{background:rgba(156,141,245,0.7)}
.dxint:nth-child(4) .fill{background:rgba(156,141,245,0.5)}
.dxint:nth-child(5) .fill{background:rgba(156,141,245,0.38)}
.dxint:nth-child(6) .fill{background:rgba(156,141,245,0.28)}
.final .btn-dark,.e-cta .btn-lime{background:var(--accent);color:#fff}
.final .btn-dark:hover,.e-cta .btn-lime:hover{background:#7D6FF0;color:#fff}
.final .btn-dark .arr,.e-cta .btn-lime .arr{background:#15161A;color:var(--accent-lite)}
.hd-side .nv.on{background:rgba(156,141,245,.26)}
/* cards e-commerce : plus grandes, plus lisibles */
.stack-card{height:clamp(520px,74vh,680px);padding:clamp(38px,4vw,64px);border-radius:30px;grid-template-columns:1fr 1fr;gap:clamp(34px,4.4vw,72px)}
.stack-gap{height:88vh}
.stack-gap.tail{height:112vh}
.stack-tx{gap:18px}
.stack-tx .step{font-size:13px;letter-spacing:.09em}
.stack-tx .step i{width:32px}
.stack-tx h3{font-size:clamp(28px,3.3vw,42px);line-height:1.08;letter-spacing:-.038em;max-width:15ch}
.stack-tx p{font-size:clamp(16.5px,1.25vw,19px);line-height:1.6;color:var(--ink-2);max-width:38ch}
.stack-tx .out{margin-top:14px;padding-top:22px;font-size:15px;gap:11px}
.stack-tx .out .cb{width:24px;height:24px}
.ill{border-radius:24px;padding:clamp(26px,3vw,40px);gap:14px}
.ill .b{font-size:15px;padding:14px 18px;border-radius:17px;max-width:82%}
.ill .person{font-size:13.5px}
.ill .person .av{width:32px;height:32px;font-size:12px}
.ill .pick{padding:15px 17px;border-radius:17px;gap:14px}
.ill .pick .sq{width:46px;height:46px;border-radius:12px}
.ill .pick .t{font-size:15px}
.ill .pick .s{font-size:13px}
.ill .pick .ok{width:26px;height:26px}
.ill .pdp{padding:17px;border-radius:18px;grid-template-columns:88px 1fr;gap:16px}
.ill .pdp .img{height:88px}
.ill .pdp .ttl{font-size:15.5px}
.ill .pdp .pr{font-size:14px}
.ill .qchips span{font-size:12.5px;padding:6px 12px}
.ill .st .lab{font-size:15px;padding-bottom:16px}
.ill .st .lab small{font-size:13px}
.ill .st .mk .d{width:24px;height:24px}
.ill .calm{font-size:13.5px;padding:13px 16px;border-radius:15px}
.ill-img{padding:0;overflow:hidden;background:#F7F9FC;border:1px solid var(--line)}
.ill-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.ill-img.contain{background:#F4F6FB;display:grid;place-items:center;padding:0;border:1px solid var(--line)}
.ill-img.contain img{width:100%;height:100%;object-fit:contain;border-radius:22px}
.stack-card.wide-ill{grid-template-columns:0.62fr 1.38fr;height:clamp(560px,80vh,760px)}
.ill-img.contain img{border-radius:22px}
.stack-card.tall-ill{grid-template-columns:1.05fr 0.95fr;height:clamp(580px,86vh,820px)}
@media (max-width:900px){.stack-card.tall-ill{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.stack-card.wide-ill{grid-template-columns:minmax(0,1fr)}}
/* La règle mobile plus haut (.stack-card{grid-template-columns:1fr}) était annulée par la
   règle de base qui suit (« cards e-commerce : plus grandes »), d'où deux colonnes écrasées
   à 375px (181px + 58px). On la redéclare ici, après, pour retrouver l'empilement voulu. */
@media (max-width:900px){.stack-card{grid-template-columns:minmax(0,1fr);height:auto!important;padding:clamp(26px,5vw,34px)}.stack-tx h3{font-size:clamp(24px,6vw,30px)}}
/* chiffres de marché sourcés */
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(34px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.mstat .v{display:block;font-size:clamp(36px,4.2vw,54px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.mstat .l{display:block;margin-top:14px;font-size:15.5px;line-height:1.45;font-weight:600;color:var(--ink-2);max-width:26ch}
.mstat .src{display:block;margin-top:5px;font-size:11px;font-weight:500;color:#AFB4BF;letter-spacing:.01em}
.mstat:nth-child(2){transition-delay:.1s}.mstat:nth-child(3){transition-delay:.2s}
.tl-stats{display:grid;gap:14px;margin-top:18px;padding-top:16px;border-top:1px dashed #CBD5E1}
.tl-stats span{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);font-weight:500}
.tl-stats b{display:inline-block;white-space:nowrap;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--accent);margin-right:5px}
.tl-stats em{display:block;margin-top:4px;font-style:normal;font-size:11px;font-weight:500;color:#AFB4BF}
.mkt-note{margin-top:clamp(30px,3.4vw,46px);padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);font-size:16px;line-height:1.55;font-weight:500;color:var(--ink-2);text-align:center}
.mkt-note b{color:var(--ink);font-weight:800}
.mkt-note em{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:500;color:#AFB4BF}
.narrative-stat{display:grid;gap:10px}
.narrative-stat span{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);font-weight:500}
.narrative-stat b{white-space:nowrap;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--accent);margin-right:6px}
.narrative-stat em{font-style:normal;font-size:11px;font-weight:500;color:#AFB4BF;margin-top:-4px}
@media (max-width:900px){.mstats{grid-template-columns:minmax(0,1fr)}}
.cta-micro{margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)}
.ctaband .cbwrap{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ctaband .cbwrap small{font-size:12px;font-weight:600;color:var(--muted)}
.dc-nudge{margin-top:4px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(74,159,232,.10),rgba(108,92,231,.12));border:1px solid rgba(108,92,231,.28);display:grid;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.dc-nudge.in{opacity:1;transform:none}
.dc-nudge p{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.dc-nudge a{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--dark);color:#fff;border-radius:100px;padding:11px 18px;font-size:14px;font-weight:700;letter-spacing:-.015em;text-decoration:none;transition:transform .2s,background .2s}
.dc-nudge a:hover{transform:translateY(-1px);background:#000;color:#fff}
@media (max-width:900px){.ctaband .cbwrap{align-items:flex-start}}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,54px)}
.tr-c{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(26px,2.8vw,36px);box-shadow:var(--shadow);display:grid;gap:14px;align-content:start;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,opacity .7s cubic-bezier(.16,1,.3,1)}
.tr-c:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(16,16,20,.3)}
.tr-c .ic{width:38px;height:38px;border-radius:100px;background:var(--accent-grad);display:grid;place-items:center}
.tr-c h3{font-size:clamp(19px,2vw,23px);line-height:1.15;letter-spacing:-.03em;margin:0}
.tr-c p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:500}
.tr-c:nth-child(2){transition-delay:.1s}.tr-c:nth-child(3){transition-delay:.2s}
.guarantee{max-width:56ch;margin:22px auto 0;padding:16px 22px;border-radius:16px;background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.22);font-size:15px;line-height:1.55;font-weight:600;color:var(--ink-2)}
.final p.final-sub{font-size:clamp(16px,1.4vw,19px);font-weight:600;color:rgba(255,255,255,.92)}
.final .cta-micro{color:rgba(255,255,255,.55);margin-top:14px}
@media (max-width:900px){.trust{grid-template-columns:minmax(0,1fr)}}
.hd-k .vlab{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.015em;line-height:1.35}
.hero-dash{text-align:left}
.dxk .tag{display:block;margin-top:11px;font-size:12px;line-height:1.4;font-weight:600;padding:0;background:none;border-radius:0;color:rgba(255,255,255,0.55)}
.mock-note{margin:18px 0 0;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,0.55)}
.lc{background:#F7F9FC;border:1px solid var(--line);display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.lc-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.lc-head .av{width:30px;height:30px;border-radius:100px;background:linear-gradient(140deg,#2F3A4C,#15161A);display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 3px rgba(108,92,231,.24)}
.lc-head .nm{display:flex;flex-direction:column;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.lc-head .nm small{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.lc-head .nm small i{width:6px;height:6px;border-radius:50%;background:#2ECC71;display:block;animation:dcPulse 2s infinite}
.lc-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 10px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.lc-body::-webkit-scrollbar{display:none}
.lc-l{display:flex;align-items:flex-end;gap:8px;flex-shrink:0;opacity:0;transform:translateY(9px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.lc-l.in{opacity:1;transform:none}
.lc-l.us{justify-content:flex-end}
.lc-l .bav{width:22px;height:22px;border-radius:100px;background:linear-gradient(140deg,#2F3A4C,#15161A);display:grid;place-items:center;flex-shrink:0;margin-bottom:2px}
.lc-b{max-width:80%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.45;font-weight:500}
.lc-b.them{background:#fff;border:1px solid var(--line);color:var(--ink-2);border-bottom-left-radius:5px}
.lc-b.us{background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.lc-typing{display:inline-flex;gap:4px;background:var(--dark);border-radius:14px;padding:11px 13px;flex-shrink:0}
.lc-typing i{width:5px;height:5px;border-radius:100px;background:rgba(255,255,255,.7);display:block;animation:blip 1.4s infinite}
.lc-typing i:nth-child(2){animation-delay:.2s}.lc-typing i:nth-child(3){animation-delay:.4s}
.lc-car{display:flex;gap:10px;flex-shrink:0;overflow:hidden;padding:3px 1px 6px;scrollbar-width:none}
.lc-car::after{content:none}
.lc-car::-webkit-scrollbar{display:none}
.lc-p{position:relative;display:flex;flex-direction:column;flex:1 1 0;min-width:0;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:15px;padding:9px;box-shadow:0 12px 26px -16px rgba(16,16,20,.26);opacity:0;transform:translateX(28px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.lc-p.in{opacity:1;transform:none}
.lc-p:nth-child(2){transition-delay:.12s}.lc-p:nth-child(3){transition-delay:.24s}
.lc-p .im{aspect-ratio:1;height:auto;border-radius:11px;background:#F1F3F8;display:grid;place-items:center;margin-bottom:9px;overflow:hidden}
.lc-p .im img{width:100%;height:100%;object-fit:cover;display:block}
.lc-p .nm{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.lc-p .ft{display:block;font-size:11.5px;line-height:1.35;color:var(--muted);font-weight:500;margin-top:4px}
.lc-p .pr{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.025em;margin-top:8px;margin-bottom:9px}
.lc-p .atc{margin-top:auto;text-align:center;background:var(--accent-grad);color:#fff;border-radius:100px;padding:8px 10px;font-size:11.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;box-shadow:0 6px 16px -8px rgba(108,92,231,.7)}
.lc-p .rec{position:absolute;top:15px;right:15px;z-index:2;border-radius:100px;background:var(--accent-grad);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.01em;padding:4px 9px;box-shadow:0 4px 12px -4px rgba(108,92,231,.6)}
.lc-foot{display:flex;align-items:center;gap:9px;padding:11px 14px 11px 18px;border-top:1px solid var(--line);background:#fff;flex-shrink:0;min-height:50px}
.lc-foot .draft{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-foot .draft:empty::before{content:"Écrivez votre message…";color:#9AA0AC}
.lc-foot .caret{width:1.5px;height:15px;background:var(--accent);flex-shrink:0;animation:phcaret 1s steps(1) infinite}
@keyframes phcaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.lc-foot .rp{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;flex-shrink:0;transition:color .2s,border-color .2s}
.lc-foot .rp:hover{color:var(--accent);border-color:rgba(108,92,231,.45)}
@media (max-width:900px){.lc{min-height:440px}}
@media (prefers-reduced-motion:reduce){.lc-foot .caret{animation:none}}
.hero h1 .hl{display:block;overflow:hidden;padding:0 9px .14em;margin:0 -9px -.14em}
.hero h1 .mark::after{bottom:8%;height:28%}
.hr-i{opacity:0;transform:translateY(24px);animation:heroIn .7s cubic-bezier(.16,1,.3,1) forwards}
.hero-text>.hr-i:nth-child(1){animation-delay:.05s}
.hero h1 .hl:nth-child(1) .hr-i{animation-delay:.17s}
.hero h1 .hl:nth-child(2) .hr-i{animation-delay:.29s}
.hero h1 .hl:nth-child(3) .hr-i{animation-delay:.41s}
.hero h1 .hl:nth-child(4) .hr-i{animation-delay:.53s}
.hero .lead.hr-i{animation-delay:.65s}
.hero-cta.hr-i{animation-delay:.77s}
.cta-micro.hr-i{animation-delay:.77s}
.hero-proof.hr-i{animation-delay:.89s}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero-dash{opacity:0;transform:translateY(40px) scale(.96);animation:dashIn 1s cubic-bezier(.16,1,.3,1) .45s forwards}
@keyframes dashIn{to{opacity:1;transform:none}}
.hero-dash.settled{animation:none;opacity:1;transform:none}
.hd-float{transform-style:preserve-3d}
.hero-dash.settled .hd-float{animation:dashFloat 6s ease-in-out infinite}
@keyframes dashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-dash .hd{transition:box-shadow .6s ease-in-out}
.hero-dash.up .hd{box-shadow:0 78px 130px -52px rgba(16,16,20,.34)}
.hd-tilt{transform-style:preserve-3d;transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform}
@media (max-width:1050px){.hero-dash.settled .hd-float{animation-duration:7s}}
@media (prefers-reduced-motion:reduce){
  .hr-i{animation:heroFade .4s ease-out forwards}
  @keyframes heroFade{to{opacity:1;transform:none}}
  .hero-dash{animation:heroFade .4s ease-out .2s forwards}
  .hero-dash.settled .hd-float{animation:none}
  .hd-tilt{transition:none}
}
.vs-col{gap:0;display:grid;grid-template-rows:auto repeat(6,1fr);align-content:stretch}
.vs-r{padding:15px 0;gap:13px;align-items:start}
.vs-r:first-of-type{padding-top:20px}
.vs-r b{font-size:15.5px;margin-bottom:3px}
.vs-r span{font-size:14.5px;line-height:1.5}
.vsr{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--d),transform .55s cubic-bezier(.16,1,.3,1) var(--d)}
.vs-col.in .vsr{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vsr{transition-duration:.01s;transition-delay:0s}}
.lc-car.lc-drag{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.lc-car.lc-drag.grabbing{cursor:grabbing}
.lc-track{display:flex;gap:10px;width:100%;will-change:transform}
.plat span,.vs-col,.mkt-note{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.lc-p{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.plat span:active{transform:scale(.98);transition:transform 100ms ease-out}
.vs-col:hover{transform:translateY(-4px)}
.vs-col.win:hover{box-shadow:0 40px 76px -34px rgba(108,92,231,.34)}
.vs-col.lose:hover{box-shadow:0 30px 60px -34px rgba(16,16,20,.16)}
.vs-col:active{transform:scale(.99);transition:transform 100ms ease-out}
.stack-card{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.stack-card:active{box-shadow:0 26px 60px -30px rgba(16,16,20,.34)}
.btn:active,.lc-foot .rp:active,.lc-p .atc:active{transform:scale(.97);transition:transform 100ms ease-out}
.fq summary:active{transform:scale(.995);transition:transform 100ms ease-out}
.fq p{transform-origin:top center}
.fq[open] p{animation:fqOpen .32s cubic-bezier(.16,1,.3,1)}
@keyframes fqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
h1,h2,.punch,.title,.stack-tx h3{letter-spacing:-.02em;font-optical-sizing:auto}
.hero h1,.punch{line-height:1.05}
p,.lead,.tl p,.fq p,.vs-r span,.tst p,.step-c p{letter-spacing:0}
@media (prefers-reduced-motion:reduce){
  .plat span,.lc-p,.vs-col,.mkt-note{transition:opacity .2s ease}
  .plat span:active,.btn:active,.fq summary:active,.vs-col:active,.vs-col:hover{transform:none}
  .fq[open] p{animation:none}
  .lc-car.lc-drag{touch-action:auto;cursor:default}
}

/* ===== Très petits écrans (< 375 px) — barre de navigation uniquement =====
   À 320 px, la nav demandait 342 px pour 272 px disponibles :
   logo 99 px + gap 24 px + bouton 219 px. Le bouton débordait de 71 px.
   On garde l'icône du logo et on masque son libellé (le lien conserve son nom
   accessible via aria-label), puis on resserre le bouton.
   Ce bloc ne s'applique qu'en dessous de 375 px : rien ne change à 375 px et au-delà. */
@media (max-width:374px){
  .nav{gap:12px}
  .nav .logo{font-size:0}
  .nav .logo img{height:26px}
  .nav .btn-dark{font-size:13.5px;padding:5px 15px 5px 5px;gap:8px}
  .nav .btn-dark .arr{width:32px;height:32px}
}

/* Lien e-mail dans le bandeau CTA de la FAQ : sans ça il hériterait de
   a{color:var(--ink);text-decoration:none} et ne se verrait pas comme cliquable. */
.ctaband p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.ctaband p a:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   OPTION « RÉSERVER UNE DÉMO »
   Hiérarchie : le bouton principal reste .btn-dark (fond sombre + pastille
   accent). Le secondaire est .btn-outline — fond blanc, bordure fine, pas de
   pastille — pour qu'aucun couple de boutons n'ait le même poids visuel.
   ═══════════════════════════════════════════════════════════════════ */
.btn-outline{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  padding:12px 22px;font-size:15px;font-weight:600;box-shadow:none}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#C3CDDA;
  box-shadow:0 10px 24px -14px rgba(16,16,20,.28)}

/* Hero — passerelle discrète sous la micro-ligne, sans bouton */
.cta-alt{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--muted)}
.cta-alt a{color:var(--accent);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.cta-alt a:hover{color:var(--ink)}
.cta-alt.hr-i{animation-delay:.85s}          /* s'intercale entre .cta-micro et .hero-proof */

/* Comparatif — les deux options à égalité de place, pas de poids visuel */
.ctaband-duo{flex-direction:column;align-items:flex-start;gap:0}
.ctaband .cta-duo-lead{margin:0 0 16px}
.cta-duo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ctaband .cta-duo-note{margin:16px 0 0;font-size:13px;line-height:1.55;font-weight:500;
  color:var(--muted);max-width:66ch;letter-spacing:0}

/* FAQ — la démo passe devant, le diagnostic redevient un lien texte */
.cbwrap .cta-sub{font-size:13px;font-weight:600}
.cbwrap .cta-sub a{color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.cbwrap .cta-sub a:hover{color:var(--ink)}

/* Section finale (fond sombre) — passerelle vers la démo après la réassurance.
   Sur ce fond, un bouton blanc plein prendrait le dessus sur le CTA principal :
   le secondaire y devient donc un contour clair, même rôle, même discrétion. */
.final-alt{margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.12)}
.final .final-alt p{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);
  margin:0 0 16px;max-width:none}
.final .btn-outline{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.final .btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55);
  color:#fff;box-shadow:none}

/* Mobile : les deux boutons s'empilent, le principal reste au-dessus */
@media (max-width:600px){
  .cta-duo{flex-direction:column;align-items:stretch;gap:10px}
  .cta-duo .btn{justify-content:center}
  .ctaband .cta-duo-note{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.cta-alt.hr-i{animation-delay:.2s}}

/* ═══════════════════════════════════════════════════════════════════
   SECTION TARIFS
   Hiérarchie stricte demandée, par taille décroissante :
   prix > badge du seuil > titre de section > liste des inclus.
   Le prix est donc plus grand que h2.title (clamp 32→56px).
   ═══════════════════════════════════════════════════════════════════ */
.pr-card{max-width:560px;margin:clamp(34px,4vw,52px) auto 0;padding:clamp(34px,4vw,52px) clamp(26px,3.2vw,44px);
  text-align:center;display:flex;flex-direction:column;align-items:center;border-radius:28px;
  box-shadow:0 4px 10px rgba(16,16,20,.05),0 54px 100px -34px rgba(16,16,20,.34)}
.pr-kicker{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pr-price{display:flex;align-items:baseline;justify-content:center;gap:7px;margin-top:14px;
  font-size:clamp(54px,7.4vw,96px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.pr-price small{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;color:var(--muted)}

/* Le badge du seuil : deuxième point d'accroche du regard après le prix. */
.pr-badge{display:inline-block;margin-top:20px;padding:11px 22px;border-radius:100px;
  background:rgba(108,92,231,.13);border:1px solid rgba(108,92,231,.24);color:#4A3FCF;
  font-size:clamp(15px,1.3vw,17px);font-weight:700;letter-spacing:-.015em;
  opacity:0;transform:scale(.9);
  transition:opacity .55s cubic-bezier(.16,1,.3,1) .3s,transform .55s cubic-bezier(.16,1,.3,1) .3s}
.pr-card.in .pr-badge{opacity:1;transform:none}

/* Second seuil, volontairement en retrait : le badge visiteurs garde
   tout son poids visuel, celui-ci se lit juste après. */
.pr-badge-sub{margin-top:9px;font-size:13.5px;font-weight:500;color:var(--muted);
  letter-spacing:0;line-height:1.4;text-align:center;max-width:100%;
  opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1) .42s}
.pr-card.in .pr-badge-sub{opacity:1}

.pr-inc{list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;display:grid;gap:13px;
  text-align:left;width:100%;max-width:400px}
.pr-inc li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;
  font-weight:500;color:var(--ink-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--d),transform .5s cubic-bezier(.16,1,.3,1) var(--d)}
.pr-card.in .pr-inc li{opacity:1;transform:none}
.pr-inc .cb{width:22px;height:22px;border-radius:100px;background:var(--accent-grad);
  display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.pr-card .btn{margin-top:clamp(26px,3vw,36px)}
.pr-note{margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)}

/* Au-delà du seuil — volontairement plus discret que la card principale */
.pr-over{max-width:560px;margin:clamp(18px,2.2vw,26px) auto 0;padding:clamp(24px,2.8vw,32px);
  background:#F4F6FA;border:1px solid var(--line);border-radius:22px;text-align:center}
.pr-over h3{font-size:clamp(17px,1.7vw,20px);letter-spacing:-.03em;margin-bottom:10px}
.pr-over p{font-size:15px;line-height:1.6;font-weight:500;color:var(--muted);max-width:46ch;margin-inline:auto}
.pr-over a{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:700;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.pr-over a:hover{color:var(--ink)}

/* Trois réassurances */
.pr-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);
  margin-top:clamp(34px,4vw,52px);max-width:900px;margin-inline:auto}
.pr-t{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.pr-t .ic{width:36px;height:36px;border-radius:100px;background:#F1F4F9;display:grid;place-items:center;
  color:var(--accent);margin-bottom:2px}
.pr-t b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pr-t span{font-size:13.5px;line-height:1.45;font-weight:500;color:var(--muted);max-width:22ch}
.pr-t:nth-child(2){transition-delay:.1s}.pr-t:nth-child(3){transition-delay:.2s}

@media (max-width:600px){
  .pr-trust{grid-template-columns:minmax(0,1fr);gap:22px}
  .pr-inc{max-width:none}
  .pr-card .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pr-badge,.pr-badge-sub,.pr-inc li{opacity:1;transform:none;transition:none}
}

/* < 375 px : à 320 px le prix mesurait 266 px pour 220 px utiles dans la card —
   rogné sans provoquer de scroll (le body est en overflow-x:clip). On réduit le
   palier bas du prix et les marges internes de la card. */
@media (max-width:374px){
  .pr-card{padding-left:20px;padding-right:20px}
  .pr-price{font-size:42px}
  .pr-price small{font-size:15px}
  .pr-badge{font-size:14px;padding:10px 16px}
  .pr-badge-sub{font-size:12.5px;margin-top:8px}
}

/* Mention de TVA sous le prix — EN ATTENTE du régime fiscal.
   La règle est en place mais aucun élément ne la porte encore : voir le bloc
   commenté « MENTION TVA » dans index.html, juste sous .pr-price. */
.pr-vat{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}

/* ═══ Essai gratuit — accroche commerciale ═══
   Le badge d'essai est volontairement le plus petit élément typographique de la
   card : il accroche par la couleur pleine, pas par la taille. La hiérarchie
   reste prix > titre de section > badge seuil > badge essai. */
.pr-trial{display:inline-block;margin-bottom:16px;padding:7px 16px;border-radius:100px;
  background:var(--accent-grad);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 8px 18px -10px rgba(108,92,231,.85)}
.pr-after{margin-top:9px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
/* Rappel discret de l'essai sous le CTA de la section diagnostic (fond sombre) */
.final .final-trial{margin-top:10px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.62)}
@media (max-width:374px){
  .pr-trial{font-size:10.5px;padding:6px 13px;letter-spacing:.06em}
}


/* ═══ Pages de contenu (guides/) ═══════════════════════════════════════
   Styles utilisés uniquement par guides/_template.html et ses copies.
   Ils ne s'appliquent à aucun élément de la page d'accueil. */
.nav-links a[hidden]{display:none}

.art{padding:clamp(40px,5vw,72px) 0 clamp(64px,8vw,110px)}
.art .container{width:min(760px,100% - 48px)}

.crumb{font-size:13.5px;color:var(--muted);margin-bottom:clamp(20px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumb a{color:var(--muted);font-weight:500}
.crumb a:hover{color:var(--ink)}
.crumb span[aria-current]{color:var(--ink-2);font-weight:600}

.art-head{margin-bottom:clamp(24px,3vw,34px)}
.art-head h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1}
.art-meta{margin-top:12px;font-size:14px;color:var(--muted);font-weight:500}


.toc{margin:0 0 clamp(30px,3.6vw,44px);padding:20px 24px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px}
.toc-t{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;display:grid;gap:8px}
.toc li{font-size:15px;font-weight:500}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--accent)}

.art-body h2{font-size:clamp(22px,2.8vw,28px);margin:clamp(34px,4vw,48px) 0 14px;
  scroll-margin-top:96px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:clamp(18px,2.2vw,21px);margin:26px 0 10px}
.art-body p{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin-bottom:16px}
.art-body ul,.art-body ol{font-size:16.5px;line-height:1.7;color:var(--ink-2);
  margin:0 0 16px;padding-left:22px;display:grid;gap:8px}
.art-body b,.art-body strong{color:var(--ink);font-weight:700}
.art-body a{color:var(--accent);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.art-body img{border-radius:14px;height:auto}

.art-cta{margin-top:clamp(44px,5vw,64px);padding:clamp(26px,3.2vw,34px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;justify-content:space-between}
.art-cta p{font-size:15.5px;line-height:1.55;color:var(--ink-2);font-weight:500;
  flex:1 1 300px;min-width:0}
@media (max-width:600px){
  .art-body p,.art-body ul,.art-body ol{font-size:16px}
  .art-cta{padding:24px 20px}
}

/* Badges plateformes : sous 560 px, trois colonnes ne laissent plus assez de
   place à « WooCommerce » (122 px de texte pour 84 px de case à 320 px de
   large) et le mot débordait sur les pastilles voisines. Une colonne. */
@media (max-width:560px){
  .plat{grid-template-columns:minmax(0,1fr)}
  .plat span{height:56px}
}

/* ═══ Fondations multi-pages ═══════════════════════════════════════════
   Nav partagée (menu déroulant + burger), footer 4 colonnes, fil d'ariane,
   CTA final partagé, page 404. Générés par src/components/*.mjs. */

/* ── Nav : actions à droite, menu déroulant ── */
.nav-act{display:flex;align-items:center;gap:14px}
.nav-demo{font-size:15px;font-weight:600;color:var(--ink-2);padding:9px 4px;
  border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav-demo:hover{color:var(--ink);border-bottom-color:var(--accent)}

.nav-links a[aria-current="page"],.nav-drop-t[aria-current="page"]{
  color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

.nav-drop{position:relative}
.nav-drop-t{display:inline-flex;align-items:center;gap:5px}
/* Un groupe sans page propre (« Ressources ») est un <button>. Il doit se lire
   et se comporter exactement comme le déclencheur <a> voisin : même police,
   même padding, même arrondi. Seul l'élément change, pas l'apparence. */
button.nav-drop-t{margin:0;border:0;background:none;cursor:pointer;
  padding:9px 15px;border-radius:100px;font-family:inherit;font-size:15px;
  font-weight:500;color:var(--ink-2);letter-spacing:inherit;
  transition:background .2s,color .2s}
button.nav-drop-t:hover{background:#fff;color:var(--ink)}
.nav-drop-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-chev{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.nav-drop:hover .nav-chev,.nav-drop:focus-within .nav-chev{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:0;margin-top:8px;padding:8px;min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility bascule d'un coup, jamais progressivement : à la FERMETURE on
     la retarde de .2s pour laisser le fondu se jouer, à l'OUVERTURE elle passe
     à visible immédiatement. Sans ça, un utilisateur au clavier qui enchaîne
     Tab rapidement traversait le menu sans pouvoir l'atteindre : ses liens
     restaient non focusables tant que la transition n'était pas finie. */
  transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s,transform .2s,visibility 0s}
.nav-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:14.5px;
  font-weight:500;color:var(--ink-2)}
.nav-menu a:hover{background:var(--bg);color:var(--ink)}

/* ── Burger ── */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);cursor:pointer}
.nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .18s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{border-top:1px solid var(--line);background:rgba(238,241,246,0.97);
  backdrop-filter:blur(14px);padding:18px 0 24px}
.nav-mobile .container{display:grid;gap:10px}
.mob-links{display:grid;gap:2px;margin-bottom:8px}
.mob-links a{padding:12px 14px;border-radius:12px;font-size:16px;font-weight:600;
  color:var(--ink)}
.mob-links a:hover{background:var(--surface)}
.mob-links a.mob-sub{padding-left:30px;font-size:15px;font-weight:500;color:var(--ink-2)}
/* En burger, un groupe n'est pas cliquable : c'est un intertitre. */
.mob-groupe{display:block;padding:16px 14px 6px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mob-links a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--accent);color:var(--accent)}
.nav-mobile .btn{width:100%;justify-content:center}

/* Seuil du burger : la nav desktop n'apparaît qu'à la largeur où elle tient
   réellement. Mesuré : à 901 px le bouton « Diagnostic offert » dépassait le
   viewport et provoquait un défilement horizontal sur tout le site.
   Avec le regroupement « Ressources ▾ », la nav compte quatre entrées de
   premier niveau — un nombre désormais FIXE, puisque Blog et À propos
   arriveront dans le menu déroulant et non à côté. Rien ne déborde dès
   1010 px, mais le logo et les boutons y sont encore comprimés par le flex ;
   1120 px est la largeur où tout est à sa taille naturelle. */
@media (max-width:1119px){
  .nav-burger{display:flex}
  .nav-act{display:none}
  .nav-links{display:none}
}
@media (min-width:1120px){
  .nav-mobile{display:none!important}
}

/* ── Footer ──
   Le footer garde intégralement la mise en page d'origine : `.foot nav`
   (display:flex + gap) suffit, et ses quatre colonnes se répartissent par
   flex-wrap. Aucune règle de grille ici : elle serait écrasée par `.foot nav`,
   plus spécifique, et mentirait sur ce qu'elle fait.
   La classe `.foot-nav` reste dans le HTML comme point d'accroche pour le
   harnais de vérification ; elle ne porte volontairement aucun style. */
.foot-bottom span{max-width:100%}

/* ── CTA final partagé ── */
.final-cta{padding:clamp(64px,8vw,110px) 0}
.fc-in{max-width:760px;margin-inline:auto;text-align:center;
  background:var(--dark);color:#fff;border-radius:28px;
  padding:clamp(38px,5vw,64px) clamp(24px,3.4vw,52px);box-shadow:var(--shadow-lg)}
.fc-in h2{font-size:clamp(26px,3.6vw,40px);line-height:1.12;color:#fff}
.fc-in p{margin-top:14px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.fc-in .cta-duo{margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;
  gap:14px;justify-content:center;align-items:center}
.fc-in .btn-outline{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.fc-in .btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.fc-note{display:block;margin-top:16px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.55)}
@media (max-width:560px){.fc-in .cta-duo .btn{width:100%;justify-content:center}}

/* ── Page 404 ── */
.err{padding:clamp(64px,10vw,140px) 0;text-align:center}
.err-code{font-size:clamp(64px,12vw,132px);font-weight:800;line-height:1;
  letter-spacing:-.06em;color:var(--line);margin:0 0 8px}
.err h1{font-size:clamp(27px,4.2vw,46px);line-height:1.12;max-width:16ch;
  margin-inline:auto;text-wrap:balance}
.err-lead{margin-top:16px;font-size:17px;color:var(--muted);font-weight:500}
.err-links{margin-top:clamp(28px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center}
.err-link{padding:12px 22px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);font-size:15px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow);transition:transform .2s,color .2s,border-color .2s}
.err-link:hover{transform:translateY(-2px);color:var(--ink);border-color:var(--accent-lite)}
.err-link-cta{background:var(--dark);border-color:var(--dark);color:#fff}
.err-link-cta:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .nav-menu,.nav-chev,.nav-burger span,.err-link{transition:none}
}

/* ═══ Pages fonctionnalités ════════════════════════════════════════════
   Structure rendue par src/components/feature.mjs, contenu dans
   src/data/features.mjs. Ces classes ne servent qu'à ces pages. */

/* ── Hero ── */
.fh{padding:clamp(30px,4vw,54px) 0 clamp(48px,6vw,80px)}
.fh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(32px,4.4vw,72px);align-items:center}
.fh-tx .kicker{display:inline-block;padding:7px 16px;border-radius:100px;
  background:rgba(108,92,231,.12);border:1px solid rgba(108,92,231,.22);
  color:#4A3FCF;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.fh-tx h1{margin-top:20px;font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.fh-lead{margin-top:18px;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;
  color:var(--ink-2);font-weight:500;max-width:44ch}
.fh .cta-duo{margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;
  gap:16px;align-items:center}
.fh-note{font-size:13.5px;font-weight:600;color:var(--muted)}

/* Mockup : fenêtre de conversation, bulles qui entrent en séquence. */
.fh-mock{min-width:0}
.fm-win{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);padding:clamp(18px,2vw,26px);display:grid;gap:12px}
.fm-dots{display:flex;gap:6px;margin-bottom:4px}
.fm-dots i{width:9px;height:9px;border-radius:100px;background:var(--line)}
.fm-msg{max-width:86%;padding:12px 16px;border-radius:16px;font-size:14.5px;
  line-height:1.5;font-weight:500;
  opacity:0;transform:translateY(8px);
  animation:fmIn .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.35s + var(--i) * .55s)}
.fm-client{justify-self:end;background:var(--bg);color:var(--ink-2);border-bottom-right-radius:6px}
.fm-agent{justify-self:start;background:var(--accent-grad,linear-gradient(135deg,#4A9FE8,#6C5CE7));
  color:#fff;border-bottom-left-radius:6px}
.fm-card{background:var(--bg);border-radius:14px;padding:14px 16px;display:grid;gap:7px;
  opacity:0;transform:translateY(8px);
  animation:fmIn .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.35s + var(--i) * .5s)}
.fm-lab{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.fm-row{font-size:14px;font-weight:600;color:var(--ink-2)}
@keyframes fmIn{to{opacity:1;transform:none}}

/* ── Sections ── */
.f-sec{padding:clamp(48px,6vw,86px) 0}
.f-narrow{width:min(760px,100% - 48px)}
.f-sec h2{font-size:clamp(25px,3.4vw,38px);line-height:1.14}
.f-sub{margin-top:12px;font-size:15.5px;font-weight:600;color:var(--muted)}
.f-pb-tx{margin-top:20px;font-size:clamp(16.5px,1.6vw,19px);line-height:1.65;
  color:var(--ink-2);font-weight:500}

.f-trio{margin-top:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.f-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow)}
.f-card h3{font-size:clamp(17px,1.7vw,20px);line-height:1.25}
.f-card p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--ink-2);font-weight:500}
.f-trio-act .f-card{border-top:3px solid var(--accent)}

  color:#fff;border-bottom-left-radius:6px}
.f-cv-note{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--muted);font-weight:500}

/* ── Tableau de bord (page Piloter) ── */
.f-dash{margin-top:clamp(24px,3vw,34px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f-dash-b{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow)}
.f-dash-lab{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.f-dash-row{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.f-dash-vide{color:var(--line)}

/* ── FAQ ── */
.f-faq{margin-top:clamp(22px,2.6vw,32px);display:grid;gap:10px}

/* ── Pages sœurs ── */
.f-sis-wrap{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.f-sis-grid{margin-top:clamp(24px,3vw,36px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.f-sis{display:grid;gap:8px;align-content:start;padding:clamp(22px,2.4vw,28px);
  background:var(--bg);border:1px solid var(--line);border-radius:18px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.f-sis:hover{transform:translateY(-3px);border-color:var(--accent-lite)}
.f-sis-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.f-sis-t{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.f-sis-p{font-size:14.5px;line-height:1.5;color:var(--ink-2);font-weight:500}
.f-sis-back{margin-top:clamp(22px,2.6vw,30px);font-size:15px;font-weight:600;
  color:var(--muted)}
.f-sis-back a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── Adaptations ── */
@media (max-width:900px){
  .fh-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .fh-mock{order:-1}
  .f-trio,.f-sis-grid{grid-template-columns:minmax(0,1fr)}
  .f-dash{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .f-narrow{width:min(760px,100% - 40px)}
  .fm-msg{max-width:92%}
  .fh .cta-duo .btn{width:100%;justify-content:center}
  .fh-note{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fm-msg,.fm-card{opacity:1;transform:none;animation:none}
  .f-sis{transition:none}
}

/* ═══ Page pilier /conseiller-de-vente/ ════════════════════════════════
   Structure rendue par src/components/pilier.mjs. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pil-faits{margin-top:18px;font-size:13.5px;font-weight:600;color:var(--muted)}
.pil-faits span{margin:0 8px;color:var(--line)}

/* ── Mockup « Conversations en direct » ── */
.pil-live{gap:10px}
.pil-live-t{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pil-dot{width:8px;height:8px;border-radius:100px;background:#2BC48A;flex-shrink:0;
  animation:pilPulse 2.2s ease-in-out infinite}
@keyframes pilPulse{0%,100%{opacity:1}50%{opacity:.35}}
.pil-live-r{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;background:var(--bg);border-radius:13px;
  opacity:0;transform:translateY(8px);
  animation:fmIn .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.3s + var(--i) * .35s)}
.pil-live-q{font-size:14px;font-weight:600;color:var(--ink-2);min-width:0}
.pil-live-e{flex-shrink:0;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px}
.pil-live-ok{background:rgba(43,196,138,.14);color:#17805A}
.pil-live-up{background:rgba(108,92,231,.13);color:#4A3FCF}

/* ── Tableau boutique / site ── */
.pil-tab-wrap{margin-top:clamp(26px,3.2vw,40px);overflow-x:auto;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow)}
.pil-tab{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
.pil-tab th,.pil-tab td{padding:clamp(14px,1.6vw,20px) clamp(14px,1.8vw,24px);
  vertical-align:top;font-size:15px;line-height:1.5}
.pil-tab thead th{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.pil-tab tbody tr+tr th,.pil-tab tbody tr+tr td{border-top:1px solid var(--line)}
.pil-tab tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.pil-oui{color:var(--ink-2);font-weight:500}
.pil-non{color:var(--muted);font-weight:500}
.pil-ferme{margin-top:clamp(20px,2.4vw,28px);font-size:clamp(17px,1.9vw,21px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink)}

/* ── Cards des quatre fonctions ── */
.pil-fc-grid{margin-top:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pil-fc{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow);display:grid;gap:10px;
  align-content:start}
.pil-fc-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.pil-fc h3{font-size:clamp(18px,1.9vw,22px)}
.pil-fc p{font-size:15px;line-height:1.6;color:var(--ink-2);font-weight:500}
.pil-fc-l{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--accent)}
.pil-fc-l:hover{color:#4A3FCF}

/* ── Ce qu'il lit / ne fait jamais ── */
.pil-src-grid{margin-top:clamp(26px,3vw,38px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pil-src{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow)}
.pil-src h3{font-size:clamp(17px,1.7vw,20px)}
.pil-src ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pil-src li{display:flex;gap:11px;font-size:15px;line-height:1.5;color:var(--ink-2);
  font-weight:500}
.pil-src li span{flex-shrink:0;width:20px;height:20px;border-radius:100px;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.pil-src-oui li span{background:rgba(43,196,138,.16);color:#17805A}
.pil-src-non li span{background:rgba(233,84,84,.13);color:#B93A3A}
.pil-src-oui{border-top:3px solid #2BC48A}
.pil-src-non{border-top:3px solid #E95454}

.pil-loi{margin-top:clamp(20px,2.4vw,30px);padding:clamp(22px,2.6vw,30px);
  background:var(--dark);color:#fff;border-radius:20px}
.pil-loi h3{font-size:clamp(17px,1.7vw,20px);color:#fff}
.pil-loi p{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.74);
  font-weight:500;max-width:78ch}

/* ── Étapes d'installation ── */
.pil-et{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);counter-reset:none}
.pil-et li{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow)}
.pil-et-n{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;
  color:var(--accent);margin-bottom:12px}
.pil-et h3{font-size:clamp(17px,1.7vw,20px)}
.pil-et p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--ink-2);font-weight:500}

/* ── Plateformes ── */
.pil-pf-grid{margin-top:clamp(26px,3vw,38px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.pil-pf{display:grid;gap:8px;place-items:center;text-align:center;
  padding:clamp(28px,3vw,38px) clamp(18px,2vw,24px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.pil-pf:hover{transform:translateY(-3px);border-color:var(--accent-lite)}
.pil-pf-n{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.pil-pf-l{font-size:13.5px;font-weight:700;color:var(--accent)}

/* ── Adaptations ── */
@media (max-width:900px){
  .pil-fc-grid,.pil-src-grid,.pil-et,.pil-pf-grid{grid-template-columns:minmax(0,1fr)}
  .pil-h .cta-duo{flex-direction:column;align-items:stretch}
  .pil-h .cta-duo .btn{width:100%;justify-content:center}
}
@media (max-width:600px){
  .pil-live-r{flex-direction:column;align-items:flex-start;gap:8px}
  .pil-tab th,.pil-tab td{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .pil-live-r{opacity:1;transform:none;animation:none}
  .pil-dot{animation:none}
  .pil-pf{transition:none}
}

/* ═══ Intégrations : pilier et pages plateformes ═══════════════════════
   Rendu par src/components/integrations.mjs. */

/* Cartouche typographique tenant lieu de logo, tant que nous n'avons pas
   les fichiers officiels des plateformes. */
.int-pf-n{display:inline-block;font-size:clamp(19px,2vw,23px);font-weight:800;
  letter-spacing:-.04em;color:var(--ink)}
.int-pf-big{font-size:clamp(26px,3vw,34px)}

/* ── Mockup du hero ── */
.int-mock{gap:10px}
.int-mock-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.int-mock-pf{padding:7px 14px;border-radius:100px;background:var(--bg);
  font-size:13.5px;font-weight:700;color:var(--ink-2)}
.int-mock-l{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 15px;background:var(--bg);border-radius:13px;
  font-size:14px;font-weight:600;color:var(--ink-2);
  opacity:0;transform:translateY(8px);
  animation:fmIn .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.3s + var(--i) * .35s)}
.int-mock-ok{flex-shrink:0;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:100px;background:rgba(43,196,138,.14);color:#17805A}
.int-mock-non{flex-shrink:0;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:100px;background:rgba(108,92,231,.13);color:#4A3FCF}
.int-mock-solo{gap:12px}
.int-mock-solo .int-pf-big{margin-bottom:6px}

/* ── Cards plateformes (pilier) ── */
.int-card-grid{margin-top:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.int-card{display:grid;gap:12px;align-content:start;
  padding:clamp(26px,2.8vw,34px);background:var(--surface);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.int-card:hover{transform:translateY(-3px);border-color:var(--accent-lite)}
.int-card-p{font-size:15px;line-height:1.55;color:var(--ink-2);font-weight:500}
.int-card-l{font-size:14px;font-weight:700;color:var(--accent)}

/* ── Ce qu'il synchronise ── */
.int-sync{margin-top:clamp(26px,3vw,40px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.int-sync-i{padding:clamp(20px,2.2vw,26px);background:var(--surface);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.int-sync-i h3{font-size:16.5px}
.int-sync-i p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink-2);
  font-weight:500}

/* ── Étapes avec durée ── */
.int-et-d{display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:100px;
  background:rgba(108,92,231,.11);color:#4A3FCF;font-size:11.5px;font-weight:700;
  letter-spacing:.04em}
.int-et .pil-et-n{margin-bottom:8px}

/* ── Autre plateforme ── */
.int-autre{text-align:center;padding:clamp(30px,3.6vw,46px) clamp(22px,2.6vw,36px);
  background:var(--surface);border:1px dashed var(--line);border-radius:22px}
.int-autre h2{font-size:clamp(21px,2.4vw,28px)}
.int-autre p{margin:14px auto 22px;max-width:56ch;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);font-weight:500}

/* ── Les 4 fonctions sur une page plateforme ── */
.int-fn-grid{margin-top:clamp(26px,3vw,40px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.int-fn{padding:clamp(22px,2.4vw,30px);background:var(--surface);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:grid;gap:9px;align-content:start}
.int-fn h3{font-size:17px}
.int-fn p{font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:500}
.int-fn-l{font-size:14px;font-weight:700;color:var(--accent)}

.int-sis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
  .int-card-grid,.int-sync,.int-fn-grid,.int-sis-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .int-mock-l{opacity:1;transform:none;animation:none}
  .int-card{transition:none}
}

/* ═══ Page /a-propos/ ══════════════════════════════════════════════════
   Nouveaux composants uniquement. Aucune règle existante modifiée :
   la page réutilise .f-sec, .f-trio, .f-card, .pil-et et .f-sis tels quels. */

.ap-h{padding:clamp(34px,4.4vw,62px) 0 clamp(20px,2.4vw,30px)}
.ap-h h1{margin-top:20px;font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.ap-h .fh-lead{max-width:52ch}

/* ── Qui est derrière ── */
.ap-f{margin-top:clamp(26px,3vw,38px);display:grid;
  grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.ap-f-ph{border-radius:22px;overflow:hidden;background:var(--bg);
  border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.ap-f-ph img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.ap-f-nom{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.ap-f-role{margin-top:3px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.ap-f-tx p+p{margin-top:15px}
.ap-f-tx p:not(.ap-f-nom):not(.ap-f-role){font-size:16.5px;line-height:1.65;
  color:var(--ink-2);font-weight:500}
.ap-f-tx .ap-f-role+p{margin-top:20px}

/* ── Ligne factuelle sous « On démarre » ── */
.ap-fait{margin-top:clamp(22px,2.6vw,30px);padding:14px 20px;display:inline-block;
  background:var(--surface);border:1px solid var(--line);border-radius:100px;
  font-size:14.5px;font-weight:600;color:var(--ink-2)}

/* ── Nous écrire ── */
.ap-contact{text-align:center;padding:clamp(30px,3.6vw,48px) clamp(22px,2.6vw,36px);
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow)}
.ap-contact h2{font-size:clamp(22px,2.6vw,30px)}
.ap-contact p{margin:14px auto 0;max-width:52ch;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);font-weight:500}
.ap-mail{display:block;margin:20px 0 22px;font-size:clamp(18px,2vw,22px);font-weight:700;
  letter-spacing:-.03em;color:var(--accent);text-decoration:underline;
  text-underline-offset:4px}
.ap-mail:hover{color:#4A3FCF}

@media (max-width:700px){
  .ap-f{grid-template-columns:minmax(0,1fr);gap:22px}
  .ap-f-ph{max-width:180px}
}

/* ═══ Blog ═════════════════════════════════════════════════════════════
   Index /blog/ et gabarit d'article. Nouveaux composants uniquement :
   aucune règle existante n'est modifiée. Les pages réutilisent telles
   quelles .container, .f-sec, .f-narrow, .f-sis,
   .final-cta et .fc-in.
   `.kicker` n'est stylé que par `.fh-tx .kicker` : les deux héros du blog
   ne sont pas dans .fh-tx, ils redéclarent donc leur propre pastille. */

.bl-h,.bl-a-h{padding:clamp(34px,4.4vw,62px) 0 clamp(18px,2.2vw,28px)}
.bl-h .kicker,.bl-a-h .kicker{display:inline-block;padding:7px 16px;border-radius:100px;
  background:rgba(108,92,231,.12);border:1px solid rgba(108,92,231,.22);
  color:#4A3FCF;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bl-h h1,.bl-a-h h1{margin-top:20px;font-size:clamp(28px,4.2vw,50px);line-height:1.08}
.bl-h .fh-lead{max-width:56ch}
.bl-a-h .fh-lead{max-width:60ch}

/* ── Filtres de catégorie ──
   Des <button>, pas des liens : ils ne mènent nulle part. L'état vit dans
   aria-pressed, jamais dans une classe — l'accessibilité et le style lisent
   donc la même source. */
.bl-filtres{display:flex;flex-wrap:wrap;gap:9px}
.bl-f{margin:0;padding:9px 17px;border-radius:100px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
  transition:background .2s,color .2s,border-color .2s}
.bl-f:hover{background:#fff;color:var(--ink);border-color:#C3CDDA}
.bl-f[aria-pressed="true"]{background:var(--dark);color:#fff;border-color:var(--dark)}
.bl-f:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Grille d'articles ── */
.bl-liste{padding-top:clamp(26px,3vw,40px)}
.bl-grid{margin-top:clamp(26px,3vw,40px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.bl-c{display:grid;grid-template-rows:auto 1fr;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.bl-c:hover{transform:translateY(-3px);border-color:var(--accent-lite)}
/* PIÈGE : `[hidden]{display:none}` vient de la feuille du navigateur, donc
   n'importe quelle règle d'auteur posant `display` sur l'élément la bat.
   Sans cette ligne, le filtre marquerait les cartes `hidden` — correct pour
   les lecteurs d'écran — sans qu'aucune ne disparaisse à l'œil. */
.bl-c[hidden]{display:none}
.bl-c-im{line-height:0;background:var(--bg);border-bottom:1px solid var(--line)}
.bl-c-im img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.bl-c-tx{display:grid;align-content:start;gap:9px;min-width:0;
  padding:clamp(20px,2.2vw,26px)}
.bl-c-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.bl-c-t{font-size:clamp(17px,1.8vw,20px);line-height:1.25;letter-spacing:-.035em}
.bl-c-t a{color:var(--ink)}
.bl-c-t a:hover{color:var(--accent)}
/* Deux lignes d'extrait, pas trois : la grille reste régulière quelle que
   soit la longueur du chapô. */
.bl-c-p{font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-c-m{margin-top:2px;display:flex;flex-wrap:wrap;gap:8px;
  font-size:13px;font-weight:600;color:var(--muted)}
.bl-vide{margin-top:clamp(26px,3vw,38px);padding:26px 22px;text-align:center;
  background:var(--surface);border:1px dashed var(--line);border-radius:18px;
  font-size:15px;font-weight:600;color:var(--muted)}

/* ── Newsletter ── */
.bl-nl{padding:0 0 clamp(48px,6vw,86px)}
.bl-nl-in{text-align:center;padding:clamp(30px,3.6vw,48px) clamp(20px,2.6vw,36px);
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow)}
.bl-nl-in h2{font-size:clamp(21px,2.6vw,30px)}
.bl-nl-in>p{margin:14px auto 0;max-width:52ch;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);font-weight:500}
.bl-nl-f{margin:clamp(20px,2.4vw,28px) auto 0;max-width:520px;
  display:flex;flex-wrap:wrap;gap:10px}
.bl-nl-f input[type="email"]{flex:1 1 220px;min-width:0;margin:0;
  padding:13px 18px;border-radius:100px;border:1px solid var(--line);
  background:var(--bg);font-family:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.bl-nl-f input[type="email"]::placeholder{color:var(--muted);font-weight:500}
.bl-nl-f input[type="email"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  background:#fff}
.bl-nl-f .btn{flex:0 0 auto}
/* Champ leurre : retiré du flux et du calcul de mise en page, hors tabulation
   et hors lecture d'écran. Un robot qui remplit tout le remplit quand même. */
.bl-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bl-nl-note{display:block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--muted)}
/* Confirmation d'inscription. Même piège que les cartes filtrées : `.bl-nl-f`
   pose `display:flex`, donc son `hidden` doit être réaffirmé ici. */
.bl-nl-f[hidden],.bl-nl-note[hidden]{display:none}
.bl-nl-ok{margin:clamp(20px,2.4vw,28px) auto 0;max-width:520px;
  padding:14px 22px;border-radius:100px;background:rgba(43,196,138,.13);
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:#17805A}

/* ── Ligne auteur / date / durée ── */
.bl-a-m{margin-top:clamp(18px,2.2vw,24px);display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.bl-a-au{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.bl-a-au:hover{color:#4A3FCF}

/* ── Sommaire ancré ── */
.bl-a-corps{padding-top:clamp(26px,3vw,38px)}
.bl-toc{padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,28px);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow)}
.bl-toc-t{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.bl-toc ol{margin:14px 0 0;padding:0 0 0 20px;display:grid;gap:8px}
.bl-toc li{font-size:14.5px;line-height:1.45;color:var(--ink-2);font-weight:500}
.bl-toc li::marker{color:var(--muted);font-weight:700}
.bl-toc a{color:var(--ink-2)}
.bl-toc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── Corps de l'article ── */
.bl-corps{margin-top:clamp(30px,3.6vw,46px);min-width:0}
.bl-corps>section+section,.bl-corps>section+.bl-src,.bl-corps>.bl-src+.bl-ret{
  margin-top:clamp(34px,4vw,54px)}
/* scroll-margin : sans lui, un lien du sommaire place le titre SOUS la nav
   collante, qui mesure 78 px. */
.bl-corps h2,.bl-src h2,.bl-ret h2{scroll-margin-top:96px}
.bl-corps h2{font-size:clamp(22px,2.8vw,31px);line-height:1.16}
.bl-corps h3{margin-top:clamp(24px,2.6vw,32px);font-size:clamp(17px,1.8vw,20px);
  line-height:1.3}
.bl-corps p{margin-top:15px;font-size:16.5px;line-height:1.72;color:var(--ink-2);
  font-weight:500;overflow-wrap:break-word}
.bl-corps h2+p,.bl-corps h3+p{margin-top:13px}
.bl-corps b{color:var(--ink);font-weight:700}
.bl-corps i{font-style:italic}
.bl-corps a{color:var(--accent);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.bl-corps a:hover{color:#4A3FCF}
.bl-corps ul,.bl-corps ol{margin:16px 0 0;padding:0 0 0 22px;display:grid;gap:11px}
.bl-corps li{font-size:16.5px;line-height:1.66;color:var(--ink-2);font-weight:500;
  overflow-wrap:break-word}
.bl-corps li::marker{color:var(--accent-lite);font-weight:700}
.bl-corps li b{color:var(--ink)}

/* ── Sources ──
   Les seuls liens sortants du site. Les libellés sont longs : on casse
   proprement plutôt que de déborder à 320 px. */
.bl-src{padding:clamp(22px,2.4vw,28px) clamp(20px,2.4vw,28px);
  background:var(--surface);border:1px solid var(--line);border-radius:18px}
.bl-src h2{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.bl-src ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.bl-src li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.55;
  color:var(--ink-2);font-weight:500;overflow-wrap:anywhere}
.bl-src li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:100px;background:var(--accent-lite)}
.bl-src a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.bl-src a:hover{color:var(--accent)}

/* ── Ce qu'il faut retenir ──
   Dernier H2 de l'article, et l'une des deux cibles speakable de la route. */
.bl-ret{padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,32px);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:18px;box-shadow:var(--shadow)}
.bl-ret h2{font-size:clamp(19px,2.2vw,25px);line-height:1.2}
.bl-ret ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.bl-ret li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;
  color:var(--ink-2);font-weight:500;overflow-wrap:break-word}
.bl-ret li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px}

/* ── CTA d'article : un seul bouton ── */
.bl-cta .fc-in .btn{margin-top:clamp(24px,3vw,34px)}

/* ── Adaptations ── */
@media (max-width:1000px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .bl-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bl-nl-f{flex-direction:column}
  .bl-nl-f .btn{width:100%;justify-content:center}
  .bl-cta .fc-in .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bl-c{transition:none}
  .bl-c:hover{transform:none}
}

/* ═══ Accueil : liaisons vers les pages ════════════════════════════════
   Nouveaux composants uniquement. L'accueil n'est pas refaite, elle est
   reliée : ces règles n'ajoutent que des liens et un bloc éditorial, et ne
   redéfinissent aucune règle existante.

   Cas particulier des cartouches plateformes : `.plat span` reste la
   pastille (géométrie, fond, ombre, transition — inchangés). Le lien vit
   DANS le span et le remplit. `.plat span` étant `display:grid` +
   `place-items:center`, l'enfant est centré et ne s'étire pas : d'où le
   width/height à 100 % ci-dessous, seul moyen de rendre toute la pastille
   cliquable sans toucher à la règle d'origine. */

.plat span a{width:100%;height:100%;display:grid;place-items:center;
  color:inherit;font:inherit;letter-spacing:inherit;border-radius:15px}
.plat span a:hover{color:var(--ink)}
.plat span a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Lien sous un bloc produit ──
   `.stack-tx` est un flex centré à hauteur fixe : le lien s'y ajoute comme
   un enfant de plus. `margin-top:auto` le pousse en bas plutôt que de
   recentrer tout le bloc, ce qui garde le texte là où il était. */
.ac-l{margin-top:2px;display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;font-size:14px;font-weight:700;color:var(--accent);
  border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s}
.ac-l:hover{color:#4A3FCF;border-bottom-color:var(--accent-lite)}
.ac-l:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ac-l-sec{margin-top:-6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ac-l-sec:hover{color:var(--ink-2);border-bottom-color:var(--line)}

/* ── Lien de fin de section ── */
.ac-sec-l{margin-top:clamp(26px,3vw,38px);text-align:center;
  font-size:15.5px;font-weight:700}
.ac-sec-l a{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;
  border-radius:100px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);box-shadow:var(--shadow);
  transition:transform .2s,border-color .2s}
.ac-sec-l a:hover{transform:translateY(-1px);border-color:var(--accent-lite)}
.ac-sec-l a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Bloc « Sur le blog » ── */
.ac-bl-grid{margin-top:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.ac-bl{display:grid;gap:10px;align-content:start;min-width:0;
  padding:clamp(22px,2.4vw,30px);background:var(--surface);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.ac-bl:hover{transform:translateY(-3px);border-color:var(--accent-lite)}
.ac-bl-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.ac-bl-t{font-size:clamp(16.5px,1.7vw,19px);line-height:1.28;font-weight:700;
  letter-spacing:-.035em;color:var(--ink)}
.ac-bl-l{margin-top:2px;font-size:13.5px;font-weight:700;color:var(--accent)}
.ac-bl-all{margin-top:clamp(24px,2.8vw,34px);text-align:center;
  font-size:15px;font-weight:700}
.ac-bl-all a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.ac-bl-all a:hover{color:#4A3FCF}
.ac-bl-ap{margin-top:12px;text-align:center;font-size:14px;font-weight:600;
  color:var(--muted)}
.ac-bl-ap a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ac-bl-ap a:hover{color:var(--ink-2)}

@media (max-width:900px){
  .ac-bl-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ac-bl{transition:none}
  .ac-bl:hover,.ac-sec-l a:hover{transform:none}
}

/* ── /a-propos/ : les deux fondateurs ──
   Deux colonnes strictement égales, donc aucune hiérarchie visuelle. Les
   classes .ap-f-ph, .ap-f-nom et .ap-f-role sont réutilisées telles quelles :
   cadre photo, nom et rôle gardent l'apparence validée, seule la disposition
   est nouvelle. `.ap-f` et son point de rupture à 700 px ne servent plus. */
.ap-duo{margin-top:clamp(26px,3vw,38px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.ap-f2{display:grid;gap:0;align-content:start;min-width:0;text-align:center}
.ap-f2 .ap-f-ph{max-width:180px;margin-inline:auto}
.ap-f2 .ap-f-nom{margin-top:16px}
.ap-duo+.ap-f-tx{margin-top:clamp(28px,3.4vw,42px)}
@media (max-width:560px){
  .ap-duo{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,30px)}
}

/* ═══ Pages fonctionnalités — mise en scène ════════════════════════════
   Trois formats qui remplacent les sections plates. Bloc entièrement
   nouveau : aucune règle antérieure n'est modifiée. Les classes existantes
   réutilisées le sont telles quelles (.anim, .espace, .fadein). */

/* ── « Le problème » en trois temps ──
   Chaque acte porte un horodatage en accent et une carte décalée vers la
   droite : la descente se lit avant même d'avoir lu le texte. Le troisième
   acte, qui est la chute, reçoit un liseré accent et un fond teinté. */
.f-sc{margin-top:clamp(24px,3vw,36px);list-style:none;padding:0;
  display:grid;gap:clamp(12px,1.6vw,18px)}
.f-sc-a{position:relative;transition-delay:var(--d,0s)}
.f-sc-a:nth-child(2){margin-left:clamp(16px,3.2vw,52px)}
.f-sc-a:nth-child(3){margin-left:clamp(32px,6.4vw,104px)}
.f-sc-h{display:block;line-height:1.05;text-wrap:balance;
  font-size:clamp(21px,2.6vw,30px);font-weight:800;letter-spacing:-.045em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.f-sc-t{margin-top:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:clamp(17px,2vw,24px);box-shadow:var(--shadow);
  font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.62;
  color:var(--ink-2);font-weight:500}
.f-sc-fin .f-sc-t{border-color:rgba(108,92,231,.26);border-left:3px solid var(--accent);
  background:linear-gradient(180deg,rgba(108,92,231,.075),rgba(108,92,231,.02)),var(--surface);
  box-shadow:var(--shadow-lg);color:var(--ink)}

/* ── « Ce que fait l'agent » : rail de progression ──
   --rp : retrait des blocs. --rx : abscisse du rail. --rw : son épaisseur.
   Les points se centrent sur le rail quelle que soit son épaisseur, sans
   valeur codée en dur. Seul .f-rail-f est animé, et seulement en scaleY. */
.f-rail{--rp:clamp(30px,3.6vw,48px);--rx:5px;--rw:3px;
  position:relative;margin-top:clamp(26px,3vw,40px);padding-left:var(--rp)}
.f-rail-l{position:absolute;left:var(--rx);top:10px;bottom:10px;width:var(--rw);
  border-radius:100px;background:var(--line);overflow:hidden}
.f-rail-f{position:absolute;inset:0;display:block;border-radius:100px;
  background:var(--accent);transform:scaleY(0);transform-origin:top center;
  will-change:transform}
.f-rail-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(13px,1.6vw,18px)}
.f-rb{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:clamp(21px,2.4vw,30px);box-shadow:var(--shadow);
  opacity:.6;transition:opacity .45s ease,box-shadow .45s ease,border-color .45s ease}
.f-rb.on{opacity:1;box-shadow:var(--shadow-lg);border-color:#D8DCE6}
.f-rb-d{position:absolute;top:clamp(26px,2.6vw,34px);
  left:calc(var(--rx) - var(--rp));margin-left:calc(var(--rw) / 2 - 6px);
  width:12px;height:12px;border-radius:100px;background:#CBD1DC;
  transition:background .3s ease,box-shadow .3s ease}
.f-rb.on .f-rb-d{background:var(--accent);box-shadow:0 0 0 5px rgba(108,92,231,.15)}
.f-rb-n{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--muted);font-variant-numeric:tabular-nums}
.f-rb.on .f-rb-n{color:var(--accent)}
.f-rb h3{margin-top:9px;font-size:clamp(17px,1.7vw,20px);line-height:1.26}
.f-rb p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--ink-2);font-weight:500}

/* ── « Ce que ça change » sur fond sombre ──
   La classe .espace, posée sur la section, fournit le fond var(--dark)
   débordant et son élargissement au défilement. Ici, seuls le rythme
   vertical et les trois colonnes sont nouveaux. */
.f-ben{padding:clamp(52px,6.4vw,92px) 0}
.f-ben h2{color:#fff}
.f-ben-grid{margin-top:clamp(30px,3.6vw,48px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.f-ben-i{padding:2px clamp(20px,2.6vw,36px);transition-delay:var(--d,0s)}
.f-ben-i:first-child{padding-left:0}
.f-ben-i:last-child{padding-right:0}
.f-ben-i+.f-ben-i{border-left:1px solid rgba(255,255,255,.13)}
.f-ben-ic{display:block;color:var(--accent-lite)}
.f-ben-i h3{margin-top:15px;font-size:clamp(17px,1.7vw,20px);line-height:1.26;
  font-weight:600;color:#fff}
.f-ben-i p{margin-top:11px;font-size:15px;line-height:1.6;font-weight:500;
  color:rgba(255,255,255,.62)}

/* ── Adaptations ── */
@media (max-width:900px){
  .f-ben-grid{grid-template-columns:minmax(0,1fr)}
  .f-ben-i,.f-ben-i:first-child,.f-ben-i:last-child{padding:clamp(22px,4vw,28px) 0}
  .f-ben-i:first-child{padding-top:0}
  .f-ben-i:last-child{padding-bottom:0}
  .f-ben-i+.f-ben-i{border-left:0;border-top:1px solid rgba(255,255,255,.13)}
}
@media (max-width:600px){
  /* Le rail reste, plus fin et plus près du bord : la lecture verticale
     survit, les cartes prennent toute la largeur. */
  .f-rail{--rp:22px;--rx:3px;--rw:2px}
  .f-rb-d{top:22px;width:10px;height:10px;margin-left:calc(var(--rw) / 2 - 5px)}
  .f-sc-a:nth-child(2){margin-left:14px}
  .f-sc-a:nth-child(3){margin-left:28px}
}
@media (prefers-reduced-motion:reduce){
  /* Rail plein, points allumés, cartes à pleine opacité : l'état final est
     l'état par défaut, aucune information ne dépend de l'animation. */
  .f-rail-f{transform:scaleY(1)}
  .f-rb{opacity:1;transition:none}
  .f-rb-d{background:var(--accent);box-shadow:0 0 0 5px rgba(108,92,231,.15);transition:none}
  .f-rb-n{color:var(--accent)}
}

/* ── Emplacements visuels (hero et exemple de conversation) ──
   Ces règles ne s'appliquent qu'une fois les images fournies : tant que
   src/data/features.mjs porte `hero: null` / `conv: null`, c'est le mockup
   HTML qui est rendu et rien ici ne s'active. */
.fh-img,.f-cv-img{display:block}
.fh-img img{display:block;width:100%;height:auto;
  border-radius:22px;box-shadow:var(--shadow-lg)}
.f-cv-img{margin-top:clamp(24px,3vw,34px)}
/* Sous 900 px le hero passe en une colonne, et `.fh-mock{order:-1}` place le
   visuel avant le texte : acceptable pour un mockup compact, pas pour une
   image portrait, qui repoussait alors le titre et le bouton hors du premier
   écran (1 448 px de hauteur mesurés). Sur les pages à image seulement, le
   visuel repasse après le texte et sa largeur est plafonnée — ce qui le rend
   aussi net, la source de 460 px couvrant alors 420 px d'affichage. */
@media (max-width:900px){
  .fh-img-on .fh-mock{order:0}
  .fh-img-on .fh-img{max-width:420px;margin-inline:auto}
}
.f-cv-img img{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}

/* ═══ Accueil : vidéo de présentation ══════════════════════════════════
   Façade cliquable : au chargement, seul le poster est rendu. Le lecteur
   <video> n'est créé qu'au clic, par videoFacade() dans script.js. Aucune
   couleur nouvelle : bouton sombre et pastille accent du bouton principal
   (.btn.btn-dark.lg), coins var(--radius), ombre var(--shadow-lg). */
#video{padding:clamp(48px,6vw,84px) 0 0}
#video .sec-lead{margin-inline:auto}
/* « Regardez-le » ne se coupe pas au trait d'union sur petit écran. */
#video .nw{white-space:nowrap}
.vid{margin-top:clamp(28px,3.4vw,44px)}
/* Le ratio 16:9 est porté par le conteneur ET par les attributs
   width/height du poster : la hauteur est réservée avant tout chargement,
   aucun décalage de mise en page. Le lecteur créé au clic reprend la même
   boîte. */
/* height:auto est indispensable : sans lui, l'attribut height="1080" du
   lecteur l'emporte sur aspect-ratio et la boîte passe à 1 080 px de haut
   au clic (mesuré). */
.vid-fac,.vid-v{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);background:var(--dark)}
.vid-fac{position:relative;padding:0;border:0;overflow:hidden;cursor:pointer;
  font:inherit;color:inherit}
.vid-fac img{display:block;width:100%;height:100%;object-fit:cover}
/* La pastille reprend telle quelle .btn.btn-dark.lg, centrée exactement
   dans la façade, horizontalement et verticalement : left/top à 50 %, puis
   recul de la moitié de sa propre taille. La façade n'a ni bordure ni
   marge intérieure et l'image la remplit entièrement : le centre de la
   boîte EST le centre de l'image visible. L'ombre, dessinée à l'extérieur,
   n'entre pas dans le calcul. Le recul passe par la propriété translate,
   distincte de transform : le survol, qui anime transform comme sur tous
   les boutons du site, ne déplace pas le point d'ancrage. */
.vid-pill{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;
  pointer-events:none;white-space:nowrap}
.vid-fac:hover .vid-pill{transform:translateY(-1px);background:#000}
.vid-fac:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.vid-v{object-fit:contain}
.vid-nojs{margin-top:14px;text-align:center;font-weight:600}
.vid-nojs a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .vid-fac,.vid-v{border-radius:16px}
  /* Sous 600 px, la pastille avec son libellé occupait 233 px sur une
     façade de 272 et masquait le bas de l'horloge du poster (mesuré à
     320 px). On ne garde que le rond accent : le libellé complet reste
     annoncé par l'aria-label du bouton. */
  /* .vid-fac devant : .btn-dark.lg (deux classes) imposerait sinon sa marge
     droite de 24 px et déséquilibrerait le rond. */
  .vid-fac .vid-pill{padding:5px;gap:0}
  .vid-pill-t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vid-fac:hover .vid-pill{transform:none}
}
/* Lien discret sous la façade de l'accueil, vers la page de lecture. */
.vid-lien{margin-top:16px;text-align:center;font-size:14px;font-weight:600}
.vid-lien a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.vid-lien a:hover{color:var(--ink)}

/* ═══ Page de lecture /video-presentation/ ═══
   La vidéo est le contenu principal : H1 court, puis le lecteur, entier
   dans le premier écran à toutes les largeurs. Sa largeur est plafonnée
   par la hauteur de la fenêtre (16:9) : sur un écran bas, le lecteur
   rétrécit au lieu de passer sous la ligne de flottaison. Le lecteur
   reprend .vid-v (ratio, coins, ombre) de la façade de l'accueil. */
.vp-h{padding:0 0 clamp(8px,1.4vw,16px)}
.vp-h h1{font-size:clamp(28px,3.6vw,44px);line-height:1.1;text-align:center}
.vp-lecteur{margin:clamp(16px,2.2vw,26px) auto 0;width:min(100%,max(300px,(100svh - 230px) * 16 / 9))}
.vp-sec{padding:clamp(28px,3.6vw,48px) 0 0}
.vp-sec + .vp-sec{padding-top:clamp(28px,3.6vw,44px)}
.vp-p{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
/* Mention discrète sous le lecteur : la vidéo met en scène une boutique et
   des ventes qui n'existent pas. */
.vp-demo{margin-top:12px;text-align:center;font-size:13px;font-weight:500;color:var(--muted)}