/* ══════════ JETONS — calés sur le logo ══════════ */
:root{
  --neon:#F70A2B;--neon-halo:#FC7C8A;--neon-braise:#97000B;
  --pri-c:#2799FA;--pri:#1550D8;--pri-s:#0138AF;--pri-p:#011B66;
  --vio-c:#8B7BE8;--vio:#5B3FD6;
  --grad:linear-gradient(135deg,#2799FA,#0138AF 46%,#97000B 76%,#F70A2B);
  --grad-b:linear-gradient(135deg,#2799FA,#0138AF);
  --fond-profond:#04091F;--fond:#070E2A;--surface:#0F1A42;--surface2:#152356;
  --bord:#233667;--bord-d:rgba(35,54,103,.55);
  --gain:#10B981;--gain-v:rgba(16,185,129,.13);--gain-e:rgba(16,185,129,.5);
  --pos:#22C55E;--avert:#F59E0B;--alerte:#D7263D;
  --t1:#FFF;--t2:#B2C2DD;--t3:#7C91B6;
  --pt:'Outfit',system-ui,sans-serif;--pu:'Inter',system-ui,sans-serif;
  --mesh1:rgba(91,63,214,.32);--mesh2:rgba(1,56,175,.26);--mesh3:rgba(247,10,43,.15);
  --grille:rgba(255,255,255,.028);
  --verre:rgba(255,255,255,.042);--verre-b:rgba(255,255,255,.09);
  --e2:0 4px 20px rgba(0,0,0,.42);--e3:0 24px 64px rgba(0,0,0,.58);
  --neon-op:1;
}
html[data-mode="clair"]{
  --pri-c:#0B63D6;--pri:#0138AF;--pri-s:#011B66;
  --vio-c:#5B3FD6;--vio:#4C2FBF;
  --fond-profond:#FFF;--fond:#F5F7FC;--surface:#FFF;--surface2:#EDF1F9;
  --bord:#D3DCEC;--bord-d:rgba(211,220,236,.85);
  --gain:#047857;--gain-v:rgba(4,120,87,.09);--gain-e:rgba(4,120,87,.5);
  --pos:#15803D;--avert:#B45309;--alerte:#B91C1C;
  --t1:#070E2A;--t2:#414F76;--t3:#68779C;
  --mesh1:rgba(91,63,214,.11);--mesh2:rgba(1,56,175,.09);--mesh3:rgba(247,10,43,.05);
  --grille:rgba(7,14,42,.03);
  --verre:rgba(7,14,42,.025);--verre-b:rgba(7,14,42,.07);
  --e2:0 4px 20px rgba(7,14,42,.08);--e3:0 24px 64px rgba(7,14,42,.14);
  --neon-op:.5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--pu);font-size:16px;line-height:1.62;color:var(--t1);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--pt);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-n{max-width:830px}

/* ── néon ── */
.lisere{height:2px;background:var(--neon);opacity:var(--neon-op);
  box-shadow:0 0 8px rgba(247,10,43,.85),0 0 24px rgba(252,124,138,.45)}
.halo{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(80px);
  background:radial-gradient(circle,var(--mesh3) 0%,rgba(247,10,43,.05) 42%,transparent 70%)}
.halo-b{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(100px);
  background:radial-gradient(circle,var(--mesh1) 0%,var(--mesh2) 45%,transparent 72%)}
@keyframes resp{from{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
.resp{animation:resp 14s cubic-bezier(.4,0,.2,1) infinite alternate}
.grille{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grille) 1px,transparent 1px),linear-gradient(90deg,var(--grille) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%)}
.carotte{position:relative;display:inline-block;filter:drop-shadow(0 0 14px rgba(247,10,43,.55)) drop-shadow(0 0 40px rgba(247,10,43,.3))}
html[data-mode="clair"] .carotte{filter:drop-shadow(0 4px 16px rgba(247,10,43,.3))}
.carotte img{height:100%;width:auto}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--fond-profond) 88%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--bord-d)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto}
.brand-t{font-family:var(--pt);font-weight:900;font-size:21px;letter-spacing:-.03em}
.nav-l{display:none;gap:28px;font-size:14.5px;color:var(--t2);font-weight:500}
.nav-l a{position:relative;padding:4px 0;transition:color .2s}
.nav-l a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--pri-c);transition:width .25s cubic-bezier(0,0,.2,1)}
.nav-l a:hover{color:var(--t1)}.nav-l a:hover::after{width:100%}
@media(min-width:1020px){.nav-l{display:flex}}
.nav-r{display:flex;align-items:center;gap:10px}
.bascule{width:42px;height:42px;border-radius:11px;border:1px solid var(--bord);background:var(--verre);
  display:grid;place-items:center;cursor:pointer;color:var(--t2);transition:all .2s}
.bascule:hover{color:var(--t1);border-color:var(--pri-c)}
.bascule svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-mode="sombre"] .ic-s{display:none}html[data-mode="clair"] .ic-l{display:none}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;
  border-radius:13px;border:none;cursor:pointer;font-family:var(--pu);font-size:15.5px;font-weight:600;
  transition:transform .18s cubic-bezier(0,0,.2,1),box-shadow .18s,background .18s;white-space:nowrap}
.btn-p{background:var(--pri);color:#fff;box-shadow:0 6px 22px rgba(21,80,216,.42)}
.btn-p:hover{background:var(--pri-s);transform:translateY(-2px);box-shadow:0 10px 30px rgba(21,80,216,.55)}
.btn-s{background:var(--verre);color:var(--t1);border:1px solid var(--bord)}
.btn-s:hover{background:var(--verre-b);transform:translateY(-2px)}
.btn-g{min-height:56px;padding:0 30px;font-size:16.5px}
.btn-xs{min-height:40px;padding:0 16px;font-size:14px;border-radius:10px}

/* ── sections ── */
.sec{padding:84px 0;position:relative;overflow:hidden}
@media(min-width:900px){.sec{padding:120px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pri-c);margin-bottom:16px;padding:6px 13px;border-radius:99px;
  background:color-mix(in srgb,var(--pri) 14%,transparent);border:1px solid color-mix(in srgb,var(--pri) 26%,transparent)}
.h2{font-size:30px;margin-bottom:16px}
@media(min-width:900px){.h2{font-size:44px}}
.h3{font-size:19px;font-weight:700;margin-bottom:9px;letter-spacing:-.02em}
.lead{font-size:16.5px;color:var(--t2);line-height:1.65}
@media(min-width:900px){.lead{font-size:18.5px}}
.grad{color:var(--pri-c)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background-image:var(--grad-b);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  html[data-mode="clair"] .grad{background-image:linear-gradient(135deg,#0B63D6,#0138AF)}
}
.rouge{color:var(--neon)}
html[data-mode="sombre"] .rouge{text-shadow:0 0 26px rgba(247,10,43,.5)}

/* ══════════ HÉROS AVEC DEVANTURE ══════════ */
.hero{position:relative;overflow:hidden;background:var(--fond-profond)}
.hero-ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 32%;opacity:.5}
html[data-mode="clair"] .hero-ph{opacity:.18}
.hero-ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--fond-profond) 0%,color-mix(in srgb,var(--fond-profond) 92%,transparent) 38%,
    color-mix(in srgb,var(--fond-profond) 62%,transparent) 68%,color-mix(in srgb,var(--fond-profond) 88%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--fond-profond) 72%,transparent) 0%,transparent 26%,
    color-mix(in srgb,var(--fond-profond) 55%,transparent) 76%,var(--fond) 100%)}
.hero-c{position:relative;z-index:3;padding:56px 0 76px}
@media(min-width:900px){.hero-c{padding:78px 0 104px}}
.hero-g{display:grid;gap:48px;grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){.hero-g{grid-template-columns:1.06fr .94fr;gap:54px}}
.hero-t{text-align:center}
@media(min-width:1000px){.hero-t{text-align:left}}
.hero-logo{display:flex;align-items:center;gap:13px;justify-content:center;margin-bottom:26px}
@media(min-width:1000px){.hero-logo{justify-content:flex-start}}
.hero-logo img{height:64px;width:auto;filter:drop-shadow(0 6px 22px rgba(1,56,175,.5))}
.hero-logo-t{text-align:left}
.hero-logo-n{font-family:var(--pt);font-size:27px;font-weight:900;letter-spacing:-.035em;line-height:1}
.hero-logo-s{font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--t3);margin-top:4px}
.hero h1{font-size:36px;margin-bottom:22px;letter-spacing:-.04em;font-weight:900}
@media(min-width:600px){.hero h1{font-size:50px}}
@media(min-width:1000px){.hero h1{font-size:56px}}
.hero .lead{max-width:540px}
@media(max-width:999px){.hero .lead{margin:0 auto}}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
@media(max-width:999px){.hero-cta{justify-content:center}}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--t2);display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:999px){.hero-note{justify-content:center}}
.hero-note span{display:flex;align-items:center;gap:6px}
.hero-note svg{width:15px;height:15px;stroke:var(--gain);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ── téléphone ── */
.tel-w{position:relative;display:flex;justify-content:center;perspective:1400px}
.tel{position:relative;width:272px;border-radius:38px;padding:9px;background:linear-gradient(160deg,#1E2B57,#080E28);
  box-shadow:var(--e3),0 0 0 1px rgba(255,255,255,.08);flex:none}
html[data-mode="clair"] .tel{background:linear-gradient(160deg,#C7D2E8,#8A9BBE)}
@media(min-width:1000px){.tel{transform:rotateY(-11deg) rotateX(3deg)}}
.tel-e{border-radius:30px;background:var(--fond);overflow:hidden;position:relative}
.tel-n{position:absolute;top:0;left:50%;transform:translateX(-50%);width:88px;height:20px;
  background:linear-gradient(160deg,#1E2B57,#080E28);border-radius:0 0 13px 13px;z-index:5}
html[data-mode="clair"] .tel-n{background:#8A9BBE}
.tel-c{padding:30px 15px 15px}
.ap-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ap-hi{font-family:var(--pt);font-size:14px;font-weight:700}
.ap-hd{font-size:10px;color:var(--t3)}
.ap-av{width:26px;height:26px;border-radius:50%;background:var(--grad)}
.ap-big{background:var(--surface);border:1px solid var(--bord-d);border-radius:15px;padding:14px;margin-bottom:10px}
.ap-lb{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:5px}
.ap-vl{font-family:var(--pt);font-size:27px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:baseline;gap:7px}
.ap-dt{font-size:11px;font-weight:700;color:var(--pos)}
.ap-sub{font-size:10px;color:var(--t3);margin-top:3px}
.ap-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ap-m{background:var(--surface);border:1px solid var(--bord-d);border-radius:12px;padding:10px}
.ap-mv{font-family:var(--pt);font-size:16px;font-weight:800}
.ap-ml{font-size:9px;color:var(--t3);margin-top:2px}
.ap-t{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.09em;margin:14px 0 8px}
.ap-a{background:var(--surface);border:1px solid var(--bord-d);border-radius:12px;padding:10px 11px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start}
.ap-ai{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none}
.ap-ai svg{width:13px;height:13px;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ap-at{font-size:10.5px;font-weight:600;line-height:1.35;margin-bottom:2px}
.ap-ad{font-size:9.5px;color:var(--t3)}
.ap-nav{display:flex;justify-content:space-around;padding:9px 0 3px;border-top:1px solid var(--bord-d);margin-top:12px}
.ap-nv{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:var(--t3)}
.ap-nv.on{color:var(--pri-c)}
.ap-nv svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flot{position:absolute;background:var(--surface);border:1px solid var(--bord);border-radius:14px;
  padding:11px 14px;box-shadow:var(--e2);z-index:4;display:none}
@media(min-width:1180px){.flot{display:block}}
.flot-l{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-bottom:3px}
.flot-v{font-family:var(--pt);font-size:19px;font-weight:800}
@keyframes flotte{from{transform:translateY(0)}to{transform:translateY(-11px)}}
.f1{top:11%;left:-58px;animation:flotte 4.5s ease-in-out infinite alternate}
.f2{bottom:15%;right:-50px;animation:flotte 5.5s ease-in-out infinite alternate-reverse}

/* ── bande ── */
.bande{background:var(--fond);border-top:1px solid var(--bord-d);border-bottom:1px solid var(--bord-d);padding:26px 0;position:relative;z-index:4}
.bande-g{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;text-align:center}
@media(min-width:800px){.bande-g{grid-template-columns:repeat(4,1fr)}}
.bd-v{font-family:var(--pt);font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:3px}
@media(min-width:800px){.bd-v{font-size:32px}}
.bd-l{font-size:12px;color:var(--t3);line-height:1.4}

/* ── split ── */
.split{display:grid;gap:44px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:62px}}
.split-45{grid-template-columns:1fr}
@media(min-width:960px){.split-45{grid-template-columns:.85fr 1.15fr}
  .inv .s-t{order:2}.inv .s-v{order:1}}

/* ── marges ── */
.mg{border:1px solid var(--bord-d);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--e2)}
.mg-r{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:10px;padding:13px 18px;align-items:center;
  font-size:13.5px;border-bottom:1px solid var(--bord-d)}
.mg-r:last-child{border-bottom:none}
.mg-h{background:var(--verre);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.mg-n{font-weight:600}
.lev{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-block;white-space:nowrap}
.lev-0{background:color-mix(in srgb,var(--t3) 16%,transparent);color:var(--t3)}
.lev-1{background:color-mix(in srgb,var(--avert) 16%,transparent);color:var(--avert)}
.lev-2{background:var(--gain-v);color:var(--gain)}
.mg-hl{background:var(--gain-v)}

/* ── étapes ── */
.etapes{display:grid;gap:30px;grid-template-columns:1fr;margin-top:52px;position:relative}
@media(min-width:880px){.etapes{grid-template-columns:repeat(3,1fr);gap:34px}
  .etapes::before{content:'';position:absolute;top:26px;left:12%;right:12%;height:2px;
    background:linear-gradient(90deg,transparent,var(--bord),var(--bord),transparent);z-index:0}}
.et{position:relative;z-index:1;text-align:center}
.et-n{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;margin:0 auto 18px;
  font-family:var(--pt);font-weight:800;font-size:20px;background:var(--grad-b);color:#fff;
  box-shadow:0 8px 26px rgba(1,56,175,.5);border:4px solid var(--fond-profond)}
.et p{font-size:14.5px;color:var(--t2)}

/* ── maquettes ── */
.mk{background:var(--surface);border:1px solid var(--bord);border-radius:22px;overflow:hidden;box-shadow:var(--e3)}
.mk-h{padding:13px 18px;border-bottom:1px solid var(--bord-d);display:flex;align-items:center;gap:9px;
  font-size:12.5px;color:var(--t3);font-weight:600;background:var(--verre)}
.mk-pt{display:flex;gap:5px}
.mk-pt i{width:9px;height:9px;border-radius:50%;background:var(--bord)}
.apercu{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:var(--verre-b);color:var(--t3)}
.mk-b{padding:20px}
.cmp-p{font-size:13px;color:var(--t3);margin-bottom:4px}
.cmp-t{font-family:var(--pt);font-weight:700;margin-bottom:18px}
.cmp-r{margin-bottom:15px}
.cmp-l{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:6px;gap:10px}
.cmp-lb{display:flex;align-items:center;gap:7px;color:var(--t2)}
.cmp-d{width:8px;height:8px;border-radius:50%;flex:none}
.cmp-pr{font-family:var(--pt);font-weight:700;font-size:14.5px;white-space:nowrap}
.cmp-bar{height:7px;border-radius:99px;background:var(--verre-b);overflow:hidden}
.cmp-fi{height:100%;border-radius:99px;width:0;transition:width 1.1s cubic-bezier(0,0,.2,1)}
.cmp-nb{font-size:10.5px;color:var(--t3);margin-top:4px}
.cmp-eco{margin-top:18px;padding:15px;border-radius:14px;background:var(--gain-v);border:1px solid color-mix(in srgb,var(--gain) 28%,transparent)}
.cmp-eco-l{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gain);margin-bottom:4px}
.cmp-eco-v{font-family:var(--pt);font-size:29px;font-weight:800;color:var(--gain);letter-spacing:-.03em}
.cmp-act{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* scanner avec vraie facture */
.sc-doc{position:relative;border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--bord-d);margin-bottom:15px;min-height:96px}
.sc-doc img{width:100%;display:block;opacity:.86}
@keyframes scanl{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.sc-beam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--pri-c);z-index:2;
  box-shadow:0 0 14px 3px color-mix(in srgb,var(--pri-c) 65%,transparent);animation:scanl 2.8s ease-in-out infinite}
.sc-f{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bord-d);
  opacity:.25;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.sc-f.on{opacity:1;transform:none}
.sc-f:last-child{border-bottom:none}
.sc-ck{width:19px;height:19px;border-radius:50%;background:var(--gain-v);display:grid;place-items:center;flex:none}
.sc-ck svg{width:11px;height:11px;stroke:var(--gain);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sc-k{font-size:12px;color:var(--t3);flex:1}
.sc-v{font-size:12.5px;font-weight:600}

/* gains */
.gn-row{display:flex;gap:11px;margin-bottom:14px}
.gn-c{flex:1;padding:14px;border-radius:14px}
.gn-pv{background:var(--gain-v);border:1px solid color-mix(in srgb,var(--gain) 30%,transparent)}
.gn-es{background:transparent;border:1px dashed var(--gain-e)}
.gn-l{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.gn-v{font-family:var(--pt);font-size:23px;font-weight:800;letter-spacing:-.03em}
.gn-bal{padding:13px 15px;border-radius:13px;background:var(--verre);border:1px solid var(--bord-d);
  display:flex;justify-content:space-between;align-items:center;font-size:13px}
.gn-net{font-family:var(--pt);font-size:19px;font-weight:800;color:var(--gain)}
.gn-tr{margin-top:13px;padding:12px;border-radius:12px;background:var(--surface2);border-left:3px solid var(--pri-c)}
.gn-tr-t{font-size:10px;font-weight:700;color:var(--pri-c);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.gn-tr-r{font-size:11.5px;color:var(--t2);display:flex;justify-content:space-between;padding:3px 0;gap:10px}
.gn-tr-r b{color:var(--t1);font-weight:600;white-space:nowrap}

/* ── listes de fonctions ── */
.fn{display:grid;gap:3px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:620px){.fn{grid-template-columns:1fr 1fr;gap:3px 26px}}
.f{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--bord-d)}
.f-i{width:21px;height:21px;flex:none;margin-top:2px}
.f-i svg{width:21px;height:21px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.f-t{font-size:14.5px;font-weight:600;margin-bottom:2px}
.f-d{font-size:13px;color:var(--t3);line-height:1.5}

/* ── cartes ── */
.g3x{display:grid;gap:16px;grid-template-columns:1fr;margin-top:48px}
@media(min-width:720px){.g3x{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3x{grid-template-columns:repeat(3,1fr)}}
.cd{background:var(--surface);border:1px solid var(--bord-d);border-radius:20px;padding:26px;text-align:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s}
@media(hover:hover) and (min-width:1000px){.cd:hover{transform:translateY(-6px);border-color:var(--vio-c);box-shadow:var(--e2)}}
.cd-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:17px;
  background:color-mix(in srgb,var(--vio) 16%,transparent);border:1px solid color-mix(in srgb,var(--vio-c) 28%,transparent)}
.cd-i svg{width:23px;height:23px;stroke:var(--vio-c);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cd p{font-size:14px;color:var(--t2)}

/* ── photo rayon ── */
.rayon-w{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--bord);box-shadow:var(--e3)}
.rayon-w img{width:100%;display:block}
.rayon-ov{position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--fond-profond) 92%,transparent) 0%,transparent 48%)}
.rayon-c{position:absolute;left:0;right:0;bottom:0;padding:22px}
.rayon-t{font-family:var(--pt);font-size:17px;font-weight:800;margin-bottom:5px}
.rayon-d{font-size:13.5px;color:var(--t2)}

/* ══════════ MASCOTTE & CHAT ══════════ */
.masc{flex:none}
.masc svg{overflow:visible}
@keyframes clign{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.m-eye{transform-origin:center;animation:clign 5.5s ease-in-out infinite}
@keyframes etinc{0%,100%{opacity:.6;transform:scale(.88) rotate(0deg)}50%{opacity:1;transform:scale(1.12) rotate(15deg)}}
.m-sp{transform-origin:center;animation:etinc 3.2s ease-in-out infinite}
@keyframes flot2{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.m-body{animation:flot2 3.6s ease-in-out infinite alternate}

.chat{background:var(--surface);border:1px solid var(--bord);border-radius:22px;overflow:hidden;box-shadow:var(--e3)}
.chat-h{padding:14px 18px;border-bottom:1px solid var(--bord-d);display:flex;align-items:center;gap:11px;background:var(--verre)}
.chat-hn{font-family:var(--pt);font-size:14.5px;font-weight:800}
.chat-hs{font-size:10.5px;color:var(--gain);display:flex;align-items:center;gap:5px}
.chat-hs::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gain)}
.chat-b{padding:18px;display:flex;flex-direction:column;gap:15px}
.bul-u{align-self:flex-end;max-width:86%;background:var(--pri);color:#fff;padding:11px 15px;
  border-radius:16px 16px 4px 16px;font-size:14px;line-height:1.5}
.bul-a{align-self:flex-start;width:100%;display:flex;gap:10px}
.bul-t{background:var(--surface2);border:1px solid var(--bord-d);padding:14px 16px;border-radius:16px 16px 16px 4px;
  font-size:13.5px;line-height:1.58;color:var(--t2);flex:1}
.bul-t strong{color:var(--t1)}
.rep-p{display:flex;align-items:center;gap:11px;padding:12px;border-radius:12px;background:var(--gain-v);
  border:1px solid color-mix(in srgb,var(--gain) 28%,transparent);margin:12px 0}
.rep-pn{flex:1;min-width:0}
.rep-pt{font-size:13.5px;font-weight:700;margin-bottom:2px}
.rep-pd{font-size:11.5px;color:var(--t3)}
.rep-pv{font-family:var(--pt);font-size:21px;font-weight:800;color:var(--gain);white-space:nowrap}
.rep-vs{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;font-size:12px;margin:11px 0;
  padding:12px;border-radius:11px;background:var(--verre)}
.rep-vs span{color:var(--t3)}
.rep-vs b{font-family:var(--pt);font-weight:700;text-align:right;white-space:nowrap}
.rep-vs .hd{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.rep-tip{display:flex;gap:9px;padding:12px;border-radius:12px;margin-top:12px;
  background:color-mix(in srgb,var(--pri) 12%,transparent);border:1px solid color-mix(in srgb,var(--pri) 26%,transparent)}
.rep-tip svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--pri-c);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-in{padding:13px 18px;border-top:1px solid var(--bord-d);display:flex;align-items:center;gap:10px;background:var(--verre)}
.chat-ip{flex:1;font-size:13.5px;color:var(--t3)}
.chat-sd{width:34px;height:34px;border-radius:10px;background:var(--pri);display:grid;place-items:center;flex:none}
.chat-sd svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes curs{0%,100%{opacity:0}50%{opacity:1}}
.cur{display:inline-block;width:2px;height:15px;background:var(--pri-c);vertical-align:-3px;animation:curs 1.1s steps(1) infinite}

/* ══════════ APPAREILS ══════════ */
.dev{position:relative;margin-top:54px;display:flex;flex-direction:column;align-items:center;gap:28px}
@media(min-width:1040px){.dev{display:block;height:492px}}
.lap{width:100%;max-width:620px;position:relative;z-index:2}
@media(min-width:1040px){.lap{position:absolute;left:50%;top:0;transform:translateX(-50%);max-width:630px}}
.lap-s{background:linear-gradient(160deg,#1E2B57,#080E28);border-radius:14px 14px 4px 4px;padding:11px;
  box-shadow:var(--e3);border:1px solid rgba(255,255,255,.08)}
html[data-mode="clair"] .lap-s{background:linear-gradient(160deg,#C7D2E8,#91A0C2)}
.lap-i{background:var(--fond);border-radius:8px;overflow:hidden}
.lap-b{height:13px;width:110%;margin-left:-5%;background:linear-gradient(180deg,#26325E,#121A3C);border-radius:0 0 12px 12px}
html[data-mode="clair"] .lap-b{background:linear-gradient(180deg,#B5C1DB,#8A9BBE)}
.dsk{display:grid;grid-template-columns:120px 1fr;min-height:322px}
@media(max-width:560px){.dsk{grid-template-columns:44px 1fr;min-height:276px}}
.dsk-sd{background:var(--fond-profond);border-right:1px solid var(--bord-d);padding:13px 9px}
.dsk-br{display:flex;align-items:center;gap:6px;margin-bottom:15px;padding:0 3px}
.dsk-br img{height:17px;width:auto}
.dsk-br span{font-family:var(--pt);font-weight:800;font-size:11.5px}
@media(max-width:560px){.dsk-br span{display:none}}
.dsk-nv{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;font-size:10px;color:var(--t3);margin-bottom:2px}
.dsk-nv.on{background:color-mix(in srgb,var(--pri) 18%,transparent);color:var(--pri-c);font-weight:600}
.dsk-nv svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.dsk-nv span{display:none}.dsk-nv{justify-content:center;padding:6px 0}}
.dsk-m{padding:15px}
.dsk-h{font-family:var(--pt);font-size:14px;font-weight:800;margin-bottom:12px}
.dsk-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.dsk-sc{background:var(--surface);border:1px solid var(--bord-d);border-radius:10px;padding:9px}
.dsk-sl{font-size:7.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:3px}
.dsk-sv{font-family:var(--pt);font-size:15px;font-weight:800;letter-spacing:-.02em}
.dsk-cl{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
@media(max-width:560px){.dsk-cl{grid-template-columns:1fr}}
.dsk-cd{background:var(--surface);border:1px solid var(--bord-d);border-radius:11px;padding:11px}
.dsk-ct{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.dsk-ch{height:70px}
.dsk-pl{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bord-d)}
.dsk-pl:last-child{border-bottom:none}
.dsk-pn{flex:1;min-width:0}
.dsk-pt{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsk-pd{font-size:7.5px;color:var(--t3)}
.dsk-pv{font-family:var(--pt);font-size:11px;font-weight:800;color:var(--gain);white-space:nowrap}

.pico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;border:1px solid var(--bord-d)}
.pico svg{width:16px;height:19px}
.pi-en{background:color-mix(in srgb,#2799FA 20%,transparent)}
.pi-so{background:color-mix(in srgb,#F70A2B 15%,transparent)}
.pi-va{background:color-mix(in srgb,#8B7BE8 22%,transparent)}
.pi-br{background:color-mix(in srgb,#F59E0B 20%,transparent)}
.pi-cf{background:color-mix(in srgb,#10B981 16%,transparent)}

.tab{width:248px;position:relative;z-index:1}
@media(min-width:1040px){.tab{position:absolute;left:4px;bottom:18px;width:232px}}
.tab-f{background:linear-gradient(160deg,#1E2B57,#080E28);border-radius:20px;padding:8px;box-shadow:var(--e3);border:1px solid rgba(255,255,255,.07)}
html[data-mode="clair"] .tab-f{background:linear-gradient(160deg,#C7D2E8,#91A0C2)}
.tab-s{background:var(--fond);border-radius:13px;overflow:hidden;padding:13px}
.tab-t{font-family:var(--pt);font-size:11px;font-weight:800;margin-bottom:9px}
.tab-o{background:var(--surface);border:1px solid var(--bord-d);border-radius:10px;padding:8px;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.tab-on{flex:1;min-width:0}
.tab-oa{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab-ob{font-size:7.5px;color:var(--t3)}
.tab-oc{font-family:var(--pt);font-size:11.5px;font-weight:800;color:var(--gain);white-space:nowrap}

.telm{width:170px;position:relative;z-index:3}
@media(min-width:1040px){.telm{position:absolute;right:14px;bottom:0;width:184px}}
.telm-f{background:linear-gradient(160deg,#1E2B57,#080E28);border-radius:26px;padding:6px;box-shadow:var(--e3);border:1px solid rgba(255,255,255,.08)}
html[data-mode="clair"] .telm-f{background:linear-gradient(160deg,#C7D2E8,#8A9BBE)}
.telm-s{background:var(--fond);border-radius:21px;overflow:hidden;padding:21px 11px 11px;position:relative}
.telm-n{position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:13px;
  background:linear-gradient(160deg,#1E2B57,#080E28);border-radius:0 0 9px 9px}
html[data-mode="clair"] .telm-n{background:#8A9BBE}
.telm-t{font-size:8.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:7px}
.telm-i{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--bord-d)}
.telm-i:last-child{border-bottom:none}
.telm-a{flex:1;min-width:0}
.telm-b{font-size:8.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.telm-c{font-size:7px;color:var(--t3)}
.telm-d{font-size:8px;font-weight:700;white-space:nowrap}
.dev-l{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:36px;font-size:13.5px;color:var(--t2)}
.dev-l span{display:flex;align-items:center;gap:7px}
.dev-l svg{width:17px;height:17px;fill:none;stroke:var(--pri-c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── comparatif ── */
.vs{border:1px solid var(--bord);border-radius:22px;overflow:hidden;background:var(--surface);margin-top:46px;box-shadow:var(--e2)}
.vs-r{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--bord-d)}
@media(min-width:720px){.vs-r{grid-template-columns:1.25fr 1fr 1fr}}
.vs-r:last-child{border-bottom:none}
.vs-c{padding:13px 10px;font-size:12.2px;display:flex;align-items:center;gap:6px;line-height:1.4}
@media(min-width:720px){.vs-c{padding:18px 24px;font-size:15px}}
.vs-l{color:var(--t2);font-weight:500}
.vs-a{background:var(--verre);color:var(--t3)}
.vs-b{background:color-mix(in srgb,var(--pri) 13%,transparent);font-weight:600;border-left:1px solid var(--bord-d)}
.vs-h{background:var(--verre-b);font-family:var(--pt);font-weight:800;font-size:13px}
@media(min-width:720px){.vs-h{font-size:17px}}
.vs-c svg{width:15px;height:15px;flex:none;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ok svg{stroke:var(--gain)}.ko svg{stroke:var(--t3)}

/* ── réseau ── */
.rz{background:linear-gradient(150deg,color-mix(in srgb,var(--pri) 14%,transparent),color-mix(in srgb,var(--vio) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--pri-c) 26%,transparent);border-radius:26px;padding:34px 28px;margin-top:34px}
@media(min-width:900px){.rz{padding:46px 44px}}
.rz-q{font-family:var(--pt);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:-.02em}
@media(min-width:900px){.rz-q{font-size:26px}}
.rz-g{display:grid;gap:14px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:740px){.rz-g{grid-template-columns:1fr 1fr}}
.rz-i{display:flex;gap:11px;font-size:14px;color:var(--t2);align-items:flex-start;text-align:left}
.rz-i svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--gain);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cons{position:relative;height:200px;margin-top:34px}
@media(min-width:900px){.cons{height:240px}}
.cons svg{width:100%;height:100%}
@keyframes puls{0%,100%{opacity:.35}50%{opacity:1}}
.pt-a{animation:puls 3.5s ease-in-out infinite}

/* ── tarifs ── */
.pr-g{display:grid;gap:20px;grid-template-columns:1fr;margin-top:48px;text-align:left}
@media(min-width:900px){.pr-g{grid-template-columns:repeat(3,1fr);align-items:start}}
.pr{background:var(--surface);border:1px solid var(--bord-d);border-radius:22px;padding:30px 26px;position:relative;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
@media(hover:hover) and (min-width:1000px){.pr:hover{transform:translateY(-5px);box-shadow:var(--e2)}}
.pr-pop{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri),0 18px 50px rgba(21,80,216,.28)}
.pr-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pri);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 15px;border-radius:99px;white-space:nowrap}
.pr-n{font-family:var(--pt);font-size:20px;font-weight:800;margin-bottom:5px}
.pr-c{font-size:13.5px;color:var(--t3);margin-bottom:20px;min-height:20px}
.pr-v{display:flex;align-items:baseline;gap:6px;margin-bottom:22px}
.pr-v b{font-family:var(--pt);font-size:46px;font-weight:900;letter-spacing:-.04em}
.pr-v span{font-size:14px;color:var(--t3)}
.pr ul{list-style:none;margin:22px 0 0}
.pr li{display:flex;gap:10px;padding:8px 0;font-size:14px;color:var(--t2);align-items:flex-start}
.pr li svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--gain);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pr .btn{width:100%}
.gar{margin-top:36px;text-align:center;padding:30px 26px;border-radius:22px;
  background:var(--gain-v);border:1px solid color-mix(in srgb,var(--gain) 30%,transparent)}
.gar-t{font-family:var(--pt);font-size:21px;font-weight:700;line-height:1.45;letter-spacing:-.02em}
@media(min-width:900px){.gar-t{font-size:26px}}

/* ── faq ── */
.faq{max-width:800px;margin:44px auto 0;text-align:left}
.q{border-bottom:1px solid var(--bord-d)}
.q summary{padding:21px 44px 21px 0;font-family:var(--pt);font-size:16.5px;font-weight:700;letter-spacing:-.02em;
  cursor:pointer;list-style:none;position:relative;transition:color .2s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--pri-c)}
.q summary::after{content:'';position:absolute;right:10px;top:27px;width:9px;height:9px;
  border-right:2.4px solid var(--t3);border-bottom:2.4px solid var(--t3);transform:rotate(45deg);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.q[open] summary::after{transform:rotate(-135deg)}
.q p{padding:0 0 24px;font-size:15px;color:var(--t2)}
@media(min-width:900px){.q summary{font-size:18.5px}}

/* ── final ── */
.fin{position:relative;overflow:hidden;text-align:center;padding:92px 0 100px;background:var(--fond-profond)}
.fin-in{position:relative;z-index:2;max-width:700px;margin:0 auto}
.fin h2{font-size:34px;margin-bottom:18px;letter-spacing:-.04em}
@media(min-width:900px){.fin h2{font-size:50px}}
.fin .carotte{height:86px;margin:0 auto 26px}
.foot{border-top:1px solid var(--bord-d);padding:40px 0;background:var(--fond)}
.foot-in{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
@media(min-width:720px){.foot-in{flex-direction:row;justify-content:space-between;text-align:left}}
.foot p{font-size:13px;color:var(--t3)}
.foot img{height:30px;width:auto}

.rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(0,0,.2,1),transform .7s cubic-bezier(0,0,.2,1)}
.rev.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rev{opacity:1;transform:none}html{scroll-behavior:auto}.tel{transform:none!important}
}