/* Nerix — design system. Tokens issus de rdv.nerix.site, structure inspirée de Blue Star. */
@font-face{font-family:InterVar;src:url(/assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#F6F3F5;--ink:#121214;--ink-2:#2A2A30;--muted:#6B6B72;--blue:#213AE0;--blue-soft:rgba(33,58,224,.08);
  --line:rgba(18,18,20,.09);--line-2:rgba(18,18,20,.16);
  --glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.78);--edge:rgba(255,255,255,.9);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -30px rgba(40,40,70,.18);
  --shadow-sm:0 1px 0 rgba(255,255,255,.9) inset,0 12px 28px -18px rgba(40,40,70,.22);
  --font:"Helvetica Neue","InterVar","Inter","SF Pro Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4vw,56px);--max:1240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{font:400 17px/1.6 var(--font);color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(620px 480px at 85% 4%,rgba(33,58,224,.13),transparent 70%),
  radial-gradient(640px 500px at 6% 36%,rgba(255,255,255,.95),transparent 70%),
  radial-gradient(560px 460px at 92% 78%,rgba(33,58,224,.06),transparent 70%)}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
html{scrollbar-color:rgba(18,18,20,.25) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(18,18,20,.2);border-radius:9px;border:3px solid var(--bg)}
input,textarea{caret-color:var(--blue)}
.ico{width:20px;height:20px;flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:16px}
[hidden]{display:none!important}

/* ---------- Type ---------- */
.display,h1{font-size:clamp(40px,6.6vw,86px);line-height:1.02;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
h2,.h2{font-size:clamp(32px,4.6vw,58px);line-height:1.05;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
h3,.h3{font-size:clamp(20px,2vw,24px);line-height:1.25;font-weight:500;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--muted);max-width:56ch;text-wrap:pretty}
.muted{color:var(--muted)}
.blue{color:var(--blue)}
.num{font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.tag b{font-weight:500;color:var(--ink)}

/* ---------- Frame (grille Blue Star) ---------- */
.frame{max-width:var(--max);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.sec{padding:clamp(72px,10vw,136px) var(--gut);border-top:1px solid var(--line);position:relative}
.sec:first-child{border-top:0}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.split{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;align-items:end}.split .lead{justify-self:end}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;color:#fff;text-decoration:none;font-size:15.5px;font-weight:500;letter-spacing:.005em;white-space:nowrap;
  background:linear-gradient(180deg,#3a3a40 0%,#101012 100%);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px rgba(0,0,0,.5);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 30px -12px rgba(0,0,0,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-glass{color:var(--ink);background:var(--glass-strong);border:1px solid var(--edge);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn-glass:hover{background:#fff;box-shadow:0 1px 0 #fff inset,0 18px 30px -18px rgba(40,40,70,.3)}
.btn-blue{background:linear-gradient(180deg,#3B52F0 0%,#1A2FC4 100%);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 26px -12px rgba(33,58,224,.7)}
.btn-sm{min-height:44px;padding:0 20px;font-size:14.5px}
.btn .ico{width:18px;height:18px}
.btn[disabled],.btn.is-off{opacity:.4;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:500;text-decoration:none}
.link .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.link:hover .ico{transform:translateX(3px)}
/* Libellé qui roule lettre par lettre */
.roll{display:inline-flex;overflow:hidden;height:1.3em;line-height:1.3em}
.roll i{font-style:normal;display:inline-block;white-space:pre;text-shadow:0 1.3em currentColor;transition:transform .5s var(--ease);transition-delay:calc(var(--i)*16ms)}
a:hover>.roll i,button:hover>.roll i,a:focus-visible>.roll i{transform:translateY(-1.3em)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:40;padding:14px var(--gut);display:flex;justify-content:center;transition:padding .5s var(--ease)}
.header-in{width:100%;max-width:1160px;display:flex;align-items:center;gap:24px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--shadow);transition:background .3s}
.header.scrolled .header-in{background:var(--glass-strong)}
.header-in{transition:max-width .6s var(--ease),border-radius .6s var(--ease),padding .6s var(--ease),background .4s,border-color .4s,box-shadow .4s}
/* En haut de page : barre classique pleine largeur. Dès qu'on descend : pilule flottante épinglée. */
.header:not(.scrolled){padding:0}
.header:not(.scrolled) .header-in{max-width:var(--max);border-radius:0;padding:16px var(--gut);background:transparent;border-color:transparent transparent var(--line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:20px;letter-spacing:-.03em}
.brand svg{width:26px;height:28px;color:var(--blue);overflow:visible;flex:none}
.nav{display:none;margin:0 auto;gap:4px}
.nav a{padding:9px 14px;border-radius:999px;text-decoration:none;font-size:15px;color:var(--ink-2);transition:color .2s,background .2s}
.nav a:hover{color:var(--blue)}
.nav a[aria-current=page]{color:var(--ink);background:rgba(255,255,255,.8)}
.header .btn{margin-left:auto}
.burger{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--edge)}
.burger .ico{width:20px;height:20px}
@media(min-width:1024px){.nav{display:flex}.header .btn{margin-left:0}.burger{display:none}}
@media(max-width:1023px){.header .btn{display:none}.burger{margin-left:auto}}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(246,243,245,.86);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);padding:20px var(--gut);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.sheet.open{opacity:1;visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 22px}
.sheet nav{display:grid;margin-top:48px}
.sheet nav a{font-size:clamp(30px,8vw,44px);font-weight:500;letter-spacing:-.035em;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line);
  transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);transition-delay:calc(var(--i)*40ms + 80ms)}
.sheet.open nav a{transform:none;opacity:1}
.sheet .btns{margin-top:auto;padding-bottom:20px}
.sheet .btns .btn{flex:1}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,9vw,120px) var(--gut) clamp(56px,7vw,96px);text-align:center;display:grid;justify-items:center;gap:28px}
.hero .lead{margin-inline:auto}
.hero.left{text-align:left;justify-items:start}
.hero.left .lead{margin-inline:0}
.proof{text-decoration:none;display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--edge);box-shadow:var(--shadow-sm);font-size:14px;color:var(--ink-2)}
.avatars{display:flex}
.avatars span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;border:2px solid #fff;margin-left:-8px;background:var(--blue)}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(2){background:#121214}.avatars span:nth-child(3){background:#4B5BE6}.avatars span:nth-child(4){background:#6B6B72}
.stars{display:inline-flex;gap:1px;color:var(--blue)}.stars .ico{width:14px;height:14px;fill:currentColor}

/* ---------- Panels & glass ---------- */
.glass{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:var(--shadow)}
.panel{border-radius:40px;padding:14px}
.panel-in{border-radius:28px;background:#fff;overflow:hidden}
.dark{background:var(--ink);color:#F6F3F5;border-radius:40px;position:relative;overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 420px at 80% -10%,rgba(33,58,224,.45),transparent 70%),radial-gradient(600px 400px at 0% 110%,rgba(33,58,224,.22),transparent 70%)}
.dark .muted,.dark .lead{color:#A9A9B4}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.marquee-track span::before{content:"";width:7px;height:7px;background:var(--blue);opacity:.5}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Grilles à filets ---------- */
.cols{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cols>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,3vw,40px)}
@media(min-width:760px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px) and (max-width:1023px){.cols-3{grid-template-columns:repeat(2,1fr)}}
.bleed{margin-inline:calc(var(--gut)*-1)}
.bleed.cols{border-left:0}
.quote-big{font-size:clamp(20px,2.2vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:500}

/* ---------- Icône pastille ---------- */
.chip-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--blue);background:var(--glass-strong);border:1px solid var(--edge);box-shadow:var(--shadow-sm)}
.chip-ico .ico{width:22px;height:22px}

/* ---------- Écosystème (bento) ---------- */
.bento{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.bento>*{min-width:0}
@media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr)}.bento>:nth-child(1),.bento>:nth-child(2){grid-column:span 3}.bento>:nth-child(n+3){grid-column:span 2}}
.tile{border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:100%}
.tile p{color:var(--muted);font-size:15.5px}
.tile .demo{margin-top:auto;padding-top:12px}
.mini{background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(40,40,70,.35);padding:14px;font-size:13px}
.serp{display:grid;gap:8px}
.serp-q{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:var(--bg);color:var(--ink-2)}
.serp-q .ico{width:15px;height:15px;color:var(--muted)}
.serp-r{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px}
.serp-r b{font-weight:500}
.serp-r em{font-style:normal;font-size:12px;color:var(--muted)}
.serp-r.top{background:var(--blue-soft);color:var(--blue)}
.serp-r.top em{color:var(--blue);font-weight:600}
.chat{display:grid;gap:8px}
.bubble{max-width:82%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--bg);line-height:1.4}
.bubble.me{justify-self:end;border-radius:14px 14px 4px 14px;background:#DCF8C6}
.bubble small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;text-align:right}
.typing{display:inline-flex;gap:3px;padding:12px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9A9AA2;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:6px}
.node{display:grid;justify-items:center;gap:6px;font-size:11.5px;color:var(--muted);text-align:center}
.node span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--blue)}
.node span .ico{width:18px;height:18px}
.wire{height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:wire 1s linear infinite;opacity:.6;margin-bottom:22px}
@keyframes wire{to{background-position:24px 0}}
.kpi{display:grid;gap:6px}
.kpi-r{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.kpi-r:last-child{border:0}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.pill.grey{background:var(--bg);color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5468F2,var(--blue));transform-origin:bottom;animation:grow 1.4s var(--ease) both}
.bars i:nth-child(odd){opacity:.35}
@keyframes grow{from{transform:scaleY(.1)}}

/* ---------- Liste de services ---------- */
.svc{display:grid;gap:18px;align-content:start;transition:background .3s}
.svc:hover{background:rgba(255,255,255,.45)}
.svc p{color:var(--muted);font-size:15.5px}
.svc .link{margin-top:6px}

/* ---------- Carte pixel (illustrations animées) ---------- */
.pix{position:relative;border-radius:20px;background:var(--blue);aspect-ratio:16/10;overflow:hidden;isolation:isolate;color:#fff}
.pix::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.2px);background-size:9px 9px;
  -webkit-mask:radial-gradient(120% 90% at 70% 40%,#000 20%,transparent 75%);mask:radial-gradient(120% 90% at 70% 40%,#000 20%,transparent 75%)}
.pix svg.art{position:absolute;inset:0;width:100%;height:100%}
.pix .art .draw{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1.8s var(--ease)}
.pix.in .art .draw,.no-js .pix .art .draw{stroke-dashoffset:0}
.pix .art rect.px{fill:#fff;animation:px 3.2s steps(1) infinite;animation-delay:calc(var(--d)*1ms)}
@keyframes px{0%,100%{opacity:.15}40%{opacity:.95}70%{opacity:.4}}

/* ---------- Cartes article ---------- */
.card{display:grid;gap:16px;text-decoration:none;align-content:start}
.card h3{transition:color .2s}
.card:hover h3{color:var(--blue)}
.card p{color:var(--muted);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .pix{transition:transform .5s var(--ease)}
.card:hover .pix{transform:translateY(-4px)}
.meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.meta b{font-weight:500;color:var(--blue)}

/* ---------- Carrousel ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,380px);gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;padding:28px;border-right:1px solid var(--line)}
.rail-ctrl{display:flex;justify-content:space-between;align-items:center;padding-top:20px}
.rail-prog{width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail-prog i{display:block;height:100%;width:30%;background:var(--blue);transition:transform .3s}
.rail-btns{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--edge);box-shadow:var(--shadow-sm);transition:background .2s,color .2s}
@media(hover:hover){.icon-btn:hover{background:var(--ink);color:#fff}}
.rail-btns .icon-btn,.cf-ctrl .icon-btn{background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 10px 22px -12px rgba(33,58,224,.8);transition:background .2s,transform .2s var(--ease)}
@media(hover:hover){.rail-btns .icon-btn:hover,.cf-ctrl .icon-btn:hover{background:#1A2FC4}}
.rail-btns .icon-btn:active,.cf-ctrl .icon-btn:active{transform:scale(.92);background:#1A2FC4}
.icon-btn .ico{width:18px;height:18px}

/* ---------- Mockups navigateur ---------- */
.mock{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -30px rgba(10,10,30,.45);border:1px solid rgba(255,255,255,.7)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F1EEF0;border-bottom:1px solid var(--line)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#D9D5D8}
.mock-bar span{margin-left:10px;flex:1;max-width:46%;height:16px;border-radius:999px;background:#fff}
.mock img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
@media(max-width:700px){.stack3 .m1,.stack3 .m3{display:none}.stack3 .m2{transform:none}}

/* ---------- Projets ---------- */
.proj{display:grid;gap:18px;text-decoration:none}
.proj-vis{border-radius:28px;padding:clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0;background:var(--ink);overflow:hidden;position:relative;isolation:isolate}
.proj-vis::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(500px 300px at 85% 0%,rgba(33,58,224,.55),transparent 70%)}
.proj-vis .mock{transform:translateY(8%) rotateX(10deg);transform-origin:bottom;transition:transform .8s var(--ease)}
.proj:hover .proj-vis .mock{transform:translateY(3%)}
.proj-meta{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.proj-meta p{color:var(--muted);font-size:15px;max-width:44ch}
.proj-type{font-size:13px;color:var(--muted);text-align:right;white-space:nowrap}

/* ---------- Étapes ---------- */
.steps{display:grid;gap:16px;counter-reset:s}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-radius:28px;padding:28px;display:grid;gap:14px;align-content:start}
.step-n{font-size:13px;font-weight:600;color:var(--blue)}
.step ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--muted)}
.step li{display:flex;gap:10px}
.step li .ico{width:18px;height:18px;color:var(--blue);margin-top:3px}

/* ---------- Témoignages ---------- */
.testis{columns:1;column-gap:16px}
@media(min-width:760px){.testis{columns:2}}@media(min-width:1100px){.testis{columns:3}}
.testi{break-inside:avoid;margin-bottom:16px;border-radius:24px;padding:26px;display:grid;gap:18px}
.testi blockquote{font-size:16px;line-height:1.6;color:var(--ink-2)}
.who{display:flex;align-items:center;gap:12px;font-size:14px}
.who b{font-weight:600;display:block}
.who span.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:600;font-size:14px}

/* ---------- Prix ---------- */
.prices{display:grid;gap:12px}
@media(min-width:700px){.prices{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.prices{grid-template-columns:repeat(4,1fr)}}
.price-card{border-radius:24px;padding:24px;display:grid;gap:10px;text-decoration:none;transition:transform .35s var(--ease),background .3s}
.price-card:hover{transform:translateY(-3px);background:var(--glass-strong)}
.price-card .chip-ico{width:42px;height:42px;border-radius:12px}
.price-card strong{font-size:24px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-card small{color:var(--muted);font-size:13px}

/* ---------- FAQ ---------- */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:22px;height:22px;color:var(--blue);transition:transform .35s var(--ease);flex:none}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq .ans{padding:0 0 24px;color:var(--muted);max-width:68ch;display:grid;gap:10px}
.faq details[open] .ans{animation:faq .45s var(--ease)}
@keyframes faq{from{opacity:0;transform:translateY(-6px)}}

/* ---------- Tableau comparatif ---------- */
.compare{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-size:14px;font-weight:600;color:var(--muted)}
.compare thead th:last-child{color:var(--blue)}
.compare td:last-child{background:rgba(33,58,224,.04);font-weight:500}
.compare .ico{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:6px}
.compare .no{color:#9A9AA2}.compare .yes{color:var(--blue)}
.tbl-wrap{overflow-x:auto;border-radius:24px}

/* ---------- CTA final ---------- */
.cta-band{text-align:center;display:grid;justify-items:center;gap:28px;padding:clamp(56px,8vw,104px) var(--gut);border-radius:40px}
.cta-band .btns{justify-content:center}

/* ---------- Formulaires ---------- */
.field{display:grid;gap:8px}
.field label{font-size:14.5px;font-weight:500}
.field .opt{color:var(--muted);font-weight:400}
.input{width:100%;min-height:54px;padding:0 18px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;font-size:16px}
textarea.input{padding:14px 18px;min-height:150px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B72' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:46px}
.input::placeholder{color:#8B8B93}
.input:hover{border-color:rgba(18,18,20,.3)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(33,58,224,.12);background:#fff}
.input[aria-invalid=true]{border-color:#B3261E}
.err{color:#B3261E;font-size:13.5px;min-height:1px}
.form{display:grid;gap:18px}
.form-row{display:grid;gap:18px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.note{font-size:13.5px;color:var(--muted)}

/* ---------- Article (blog) ---------- */
.article-head{padding:clamp(40px,6vw,80px) var(--gut) clamp(32px,4vw,48px);display:grid;gap:22px;max-width:920px}
.crumbs{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--blue)}
.article-head h1{font-size:clamp(34px,5vw,62px)}
.article-wrap{display:grid;gap:48px;padding:0 var(--gut) clamp(64px,8vw,112px)}
@media(min-width:1080px){.article-wrap{grid-template-columns:240px minmax(0,1fr);gap:72px}}
.toc{position:sticky;top:110px;align-self:start;font-size:14px;display:none}
@media(min-width:1080px){.toc{display:grid;gap:4px}}
.toc p{font-weight:600;margin-bottom:8px}
.toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--line);color:var(--muted);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.toc a.on,.toc a:hover{color:var(--blue);border-color:var(--blue)}
.prose{max-width:70ch;font-size:18px;line-height:1.75;color:#26262B}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(26px,2.8vw,34px);margin-top:2.2em;line-height:1.15;color:var(--ink)}
.prose h3{font-size:21px;margin-top:1.8em;color:var(--ink)}
.prose h4{font-size:18px;font-weight:600;margin-top:1.6em;color:var(--ink)}
.prose a{color:var(--blue)}
.prose strong{font-weight:600;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.5em}
.prose li::marker{color:var(--blue)}
.prose blockquote{padding:20px 24px;border-radius:20px;background:var(--glass-strong);border:1px solid var(--edge);font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:600;background:rgba(255,255,255,.6)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:rgba(18,18,20,.06);padding:.15em .4em;border-radius:6px}
.cover{margin:0 var(--gut) clamp(40px,5vw,64px);aspect-ratio:21/8;border-radius:32px}
@media(max-width:700px){.cover{aspect-ratio:16/10}}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.sources{font-size:14.5px;color:var(--muted);display:grid;gap:8px}
.sources a{color:var(--ink-2);word-break:break-word}

/* ---------- Filtres blog ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{padding:10px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);font-size:14.5px;transition:background .2s,color .2s}
.filters button:hover{background:#fff}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.feature{display:grid;gap:28px;text-decoration:none;align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1.2fr 1fr;gap:48px}}
.feature:hover h2{color:var(--blue)}

/* ---------- Vidéos ---------- */
.video{display:grid;gap:14px}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#1A1A1F;display:grid;place-items:center;color:#fff;isolation:isolate}
.video-frame::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px 220px at 70% 20%,rgba(33,58,224,.6),transparent 70%)}
.video-frame iframe,.video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video-frame .play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s var(--ease)}
.video-frame .play .ico{width:24px;height:24px;fill:#fff;margin-left:3px}
.video:hover .play{transform:scale(1.08)}
.video-frame .soon{position:absolute;left:14px;bottom:12px;font-size:12px;color:#C9C9D1}

/* ---------- Footer ---------- */
.footer{padding:0 var(--gut);display:flex;justify-content:center;margin-top:clamp(56px,8vw,96px)}
.footer-in{width:100%;max-width:1160px;border-radius:32px;padding:clamp(28px,4vw,48px);display:grid;gap:40px}
.footer-top{display:grid;gap:36px}
@media(min-width:900px){.footer-top{grid-template-columns:1.4fr repeat(3,1fr)}}
.footer h4{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:10px;font-size:15px}
.footer ul a{text-decoration:none}.footer ul a:hover{color:var(--blue)}
.footer-pitch{color:var(--muted);font-size:15px;max-width:34ch;margin-top:14px}
.footer-bot{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--edge);text-decoration:none;color:var(--ink);font-size:14px;transition:color .2s,background .2s}
.pills a:hover{color:var(--blue);background:#fff}
.pills .ico{width:16px;height:16px}

/* ---------- WhatsApp flottant (repris de rdv) ---------- */
.wa-float{position:fixed;z-index:30;right:clamp(16px,3vw,32px);bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom,0px))}
.wa-float svg{width:20px;height:20px}

/* ---------- Bandeau cookies ---------- */
.consent{position:fixed;z-index:70;left:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);max-width:400px;border-radius:24px;padding:22px;display:grid;gap:10px;font-size:14px;color:var(--muted);animation:faq .5s var(--ease)}
.consent-t{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.015em}
.consent a{color:var(--blue)}
.consent .btns{margin-top:6px}

/* ---------- Curseur technique ---------- */
.cur-dot,.cur-frame{position:fixed;left:0;top:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .3s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--blue)}
.cur-frame{width:34px;height:34px;margin:-17px 0 0 -17px;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease);
  --c:var(--blue);background:
  linear-gradient(var(--c),var(--c)) 0 0/9px 1.5px,linear-gradient(var(--c),var(--c)) 0 0/1.5px 9px,
  linear-gradient(var(--c),var(--c)) 100% 0/9px 1.5px,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 9px,
  linear-gradient(var(--c),var(--c)) 0 100%/9px 1.5px,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 9px,
  linear-gradient(var(--c),var(--c)) 100% 100%/9px 1.5px,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 9px;background-repeat:no-repeat}
.cur-frame.hot{width:54px;height:54px;margin:-27px 0 0 -27px}
html.has-cursor .cur-dot,html.has-cursor .cur-frame{opacity:1}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor summary,html.has-cursor label{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select,html.has-cursor [contenteditable]{cursor:text}

/* ---------- Révélations ---------- */
.js [data-reveal] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-reveal] .w>span{display:inline-block;transform:translateY(105%);filter:blur(6px);opacity:0;transition:transform 1s var(--ease),filter 1s var(--ease),opacity .8s var(--ease);transition-delay:calc(var(--i)*45ms)}
.js [data-reveal].in .w>span{transform:none;filter:none;opacity:1}
.js [data-fade]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js [data-fade].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal] .w>span,.js [data-fade]{transform:none!important;filter:none!important;opacity:1!important}
  .marquee-track{animation:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .header-in{padding:6px 6px 6px 18px}
  .btn{min-height:48px;padding:0 20px}
  .panel{border-radius:30px;padding:8px}.panel-in{border-radius:22px}
  .proj-meta{flex-direction:column}.proj-type{text-align:left}
  .wa-float .wa-label{display:none}.wa-float{padding:0;width:52px}
}
@media print{.header,.footer,.wa-float,.cur-dot,.cur-frame{display:none}}

/* ---------- Carrousel 3D des réalisations ---------- */
.cf{position:relative;padding:0 0 clamp(48px,6vw,80px);overflow:hidden}
.cf-stage{position:relative;perspective:1800px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none}
.cf-stage:active{cursor:grabbing}
.cf-item{position:absolute;left:50%;top:0;width:min(76%,900px);transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s;will-change:transform}
.cf-item img{-webkit-user-drag:none}
.cf-item .mock{pointer-events:none}
.cf-item.is-center .mock{animation:cfloat 6s ease-in-out infinite}
@keyframes cfloat{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-12px) rotateX(2deg) rotateY(-1.5deg)}}
.cf-ctrl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px;padding:0 var(--gut)}
.cf-dots{display:flex;gap:6px}
.cf-dots button{width:7px;height:7px;border-radius:9px;background:var(--line-2);transition:width .4s var(--ease),background .4s}
.cf-dots button[aria-current=true]{width:24px;background:var(--blue)}
.cf-cap{text-align:center;margin-top:16px;font-size:15px;color:var(--muted)}
.cf-cap b{color:var(--ink);font-weight:500}
.cf-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.cf-hint .ico{width:16px;height:16px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}

/* ---------- Système d'acquisition sur fond sombre ---------- */
.dark .tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.dark .tile h3,.dark h2{color:#fff}
.dark .tile p{color:#A9A9B4}
@media(min-width:900px){.bento>.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:center}}
.pilot{position:relative}
.pilot .bars i{animation:barloop 7s var(--ease) infinite;animation-delay:calc(var(--k)*110ms)}
@keyframes barloop{0%,100%{transform:scaleY(.12)}22%,82%{transform:scaleY(1)}}
.pilot .mouse{position:absolute;left:0;top:0;width:20px;height:20px;color:var(--ink);animation:mouse 7s var(--ease) infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@keyframes mouse{0%,15%{transform:translate(8px,70px)}40%{transform:translate(48%,34px)}62%,78%{transform:translate(80%,6px)}100%{transform:translate(8px,70px)}}
.pilot .ptip{position:absolute;right:12%;top:-6px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;opacity:0;animation:ptip 7s var(--ease) infinite}
@keyframes ptip{0%,58%,84%,100%{opacity:0;transform:translateY(4px)}64%,78%{opacity:1;transform:none}}
.team .kpi-r .pill{animation:pillin 6s var(--ease) infinite;animation-delay:calc(var(--k)*.6s)}
@keyframes pillin{0%,8%{opacity:0;transform:scale(.8)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
.team .dot{width:7px;height:7px;border-radius:50%;background:#22C55E;display:inline-block;margin-right:8px;animation:blink 1.6s infinite}
.appwin{display:grid;grid-template-columns:110px 1fr;min-height:170px;padding:0;overflow:hidden}
.appwin aside{background:var(--bg);padding:12px;display:grid;gap:8px;align-content:start}
.appwin aside i{height:8px;border-radius:4px;background:rgba(18,18,20,.1)}
.appwin aside i:first-child{background:var(--blue);width:70%}
.appwin .rows{padding:12px;display:grid;gap:8px;align-content:start}
.appwin .rows div{display:grid;grid-template-columns:1fr 60px 50px;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:12px;animation:rowhi 6s infinite;animation-delay:calc(var(--k)*1.5s)}
@keyframes rowhi{0%,22%,100%{background:transparent}6%,16%{background:var(--blue-soft)}}

/* ---------- Bandeau final avec ordinateurs ---------- */
.cta-scene{position:relative;overflow:hidden;isolation:isolate;border-radius:40px;padding:clamp(64px,9vw,120px) var(--gut) clamp(200px,27vw,360px);text-align:center;display:grid;justify-items:center;gap:30px;
  background:linear-gradient(180deg,#F1EFF6 0%,#E3E7FB 52%,#C3CCF8 100%)}
.cta-scene::before{content:"";position:absolute;inset:auto 0 0;height:72%;z-index:-1;opacity:.6;background-image:radial-gradient(var(--blue) 1.15px,transparent 1.5px);background-size:7px 7px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 75%);mask:linear-gradient(180deg,transparent,#000 75%)}
.cta-scene::after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:-1;background:linear-gradient(180deg,rgba(33,58,224,.15),rgba(33,58,224,.55));
  clip-path:polygon(0 70%,8% 52%,15% 62%,24% 38%,33% 55%,42% 30%,50% 48%,58% 22%,66% 44%,75% 28%,84% 50%,92% 34%,100% 46%,100% 100%,0 100%)}
.cta-scene h2{max-width:16ch;font-size:clamp(34px,5.6vw,72px)}
.cta-scene .spark{position:absolute;width:clamp(36px,5vw,64px);height:auto;color:var(--blue);filter:drop-shadow(0 12px 18px rgba(33,58,224,.35));animation:spark 6s ease-in-out infinite}
.cta-scene .spark{z-index:0}.cta-scene .spark svg{display:block;width:100%;height:auto;overflow:visible}
.cta-scene .spark.s1{left:7%;top:12%}.cta-scene .spark.s2{right:7%;top:56%;animation-delay:-3s;width:clamp(28px,4vw,48px)}
.cta-scene h2,.cta-scene .btn{position:relative;z-index:2}
@media(max-width:1023px){.cta-scene .spark{display:none}}
@keyframes spark{50%{transform:translateY(-10px) rotate(8deg)}}
.laptop{position:absolute;bottom:-3%;width:clamp(220px,34vw,540px);z-index:1;transition:transform 1s var(--ease)}
.laptop.l{left:-5%;transform:perspective(1400px) rotateY(24deg) rotateZ(-7deg)}
.laptop.r{right:-5%;transform:perspective(1400px) rotateY(-24deg) rotateZ(7deg)}
.cta-scene:hover .laptop.l{transform:perspective(1400px) rotateY(16deg) rotateZ(-5deg) translateY(-6px)}
.cta-scene:hover .laptop.r{transform:perspective(1400px) rotateY(-16deg) rotateZ(5deg) translateY(-6px)}
.laptop-screen{background:#0E0E12;border-radius:14px 14px 4px 4px;padding:2.4% 2.4% 3.2%;box-shadow:0 0 0 1px #2a2a30 inset,0 40px 60px -30px rgba(10,10,40,.55)}
.laptop-screen img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:3px}
.laptop-base{height:clamp(9px,1.3vw,18px);margin:0 -8%;border-radius:2px 2px 16px 16px;background:linear-gradient(180deg,#E4E4E9,#A7A7B0);box-shadow:0 18px 30px -12px rgba(10,10,40,.5)}
@media(max-width:700px){.laptop{width:58%;bottom:-2%}.laptop.l{left:-14%}.laptop.r{right:-14%}.cta-scene{padding-bottom:170px}}

/* ---------- Grand mot en points (pied de page) ---------- */
.dotwrap{max-width:calc(1160px + 2 * var(--gut));margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--gut) clamp(24px,4vw,48px)}
.dotword{display:block;width:100%;height:auto;touch-action:pan-y}
.dark .mini{color:var(--ink)}
.dark .mini .muted{color:var(--muted)}