/* =========================================================
   LYLIUM — feuille de style (mobile first)
   Couleurs : #0a1330 · #09e4fc · #d323a8 · #fffefe
   ========================================================= */
@font-face{font-family:"Sora";src:url("../fonts/sora-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Fira Code";src:url("../fonts/fira-code-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Code";src:url("../fonts/fira-code-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --navy:#0a1330; --navy-2:#111d45; --cyan:#09e4fc; --mag:#d323a8; --white:#fffefe; --violet:#4f46e5;
  --grad:linear-gradient(135deg,#09e4fc 0%,#4f6fe6 48%,#d323a8 100%);
  --grad-text:linear-gradient(100deg,#09b8d0 0%,#4f46e5 55%,#d323a8 100%);
  --bg:#f7fbff; --soft:#eef6ff; --ink:#0a1330; --muted:#4b5878; --line:rgba(10,19,48,.09);
  --sh-1:0 1px 2px rgba(10,19,48,.05),0 0.5rem 1.5rem -0.5rem rgba(10,19,48,.10);
  --sh-2:0 2px 0.25rem rgba(10,19,48,.06),0 1.5rem 3rem -1rem rgba(79,70,229,.28);
  --r:1.375rem; --head:4.75rem;
  --f-head:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 0.5rem);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:0.1875rem solid var(--cyan);outline-offset:0.1875rem;border-radius:0.375rem}
.mono{font-family:var(--f-mono)}
.skip{position:fixed;left:0.75rem;top:-3.75rem;z-index:200;background:var(--navy);color:#fff;padding:0.625rem 1rem;border-radius:0.625rem;transition:top .2s}
.skip:focus{top:0.75rem}
.wrap{width:100%;max-width:73.75rem;margin:0 auto;padding:0 1.25rem}
.wrap.narrow{max-width:53.75rem}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hide-m{display:none}

/* ---------- barre de progression / curseur ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:0.1875rem;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.cursor-glow{position:fixed;left:0;top:0;width:32.5rem;height:32.5rem;margin:-16.25rem 0 0 -16.25rem;border-radius:50%;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(circle,rgba(9,228,252,.16),rgba(211,35,168,.07) 45%,transparent 68%);transition:opacity .4s;mix-blend-mode:multiply;will-change:transform}
@media (hover:hover) and (pointer:fine){.cursor-glow.on{opacity:1}}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0.75rem 0 auto 0;z-index:100;pointer-events:none}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;height:3.25rem;padding:0 0.625rem 0 1.125rem;background:rgba(255,254,254,.95);backdrop-filter:saturate(1.6) blur(1rem);-webkit-backdrop-filter:saturate(1.6) blur(1rem);border:1px solid rgba(255,255,255,.7);border-radius:62.4375rem;box-shadow:0 0.625rem 2.5rem -0.75rem rgba(10,19,48,.35);pointer-events:auto;max-width:71.25rem;transition:box-shadow .3s,background .3s}
.site-header.scrolled .header-in{box-shadow:0 0.75rem 2.5rem -0.625rem rgba(10,19,48,.28);background:rgba(255,254,254,.94)}
.brand img{height:2.625rem;width:auto}
.header-tools{display:flex;align-items:center;gap:0.625rem}
.lang{display:flex;background:var(--soft);border-radius:62.4375rem;padding:0.1875rem;border:1px solid var(--line)}
.lang button{font:600 .78rem/1 var(--f-mono);padding:0.4375rem 0.625rem;border-radius:62.4375rem;color:var(--muted);transition:.25s}
.lang button[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:0 2px 0.5rem rgba(10,19,48,.3)}
.burger{width:2.375rem;height:2.375rem;border-radius:50%;display:grid;place-content:center;gap:0.3125rem;background:var(--navy)}
.burger span{display:block;width:1.125rem;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg)}
.nav{position:fixed;inset:4.75rem 0.75rem auto 0.75rem;display:grid;gap:0.25rem;padding:0.875rem;background:#fff;border-radius:1.625rem;box-shadow:0 1.875rem 3.75rem -1.25rem rgba(10,19,48,.45);pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(-0.75rem) scale(.98);transition:.3s var(--ease)}
.nav.open{opacity:1;visibility:visible;transform:none}
.nav a:not(.btn){padding:0.875rem 1rem;border-radius:0.875rem;font-weight:600;color:var(--navy)}
.nav a:not(.btn):hover,.nav a.active{background:var(--soft)}
.nav-cta{margin-top:0.375rem;justify-content:center}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;font:700 .95rem/1 var(--f-head);padding:0.875rem 1.375rem;border-radius:62.4375rem;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s;will-change:transform;text-align:center}
.btn-lg{padding:1.125rem 1.875rem;font-size:1rem}
.btn-sm{padding:0.6875rem 1.125rem;font-size:.85rem}
.btn-block{width:100%}
.btn-grad{color:#fff;background:var(--grad);background-size:160% 100%;box-shadow:0 0.625rem 1.875rem -0.625rem rgba(211,35,168,.65),0 0 0 1px rgba(255,255,255,.15) inset}
.btn-grad::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);z-index:-1}
.btn-grad:hover{transform:translateY(-0.1875rem);background-position:100% 0;box-shadow:0 1.125rem 2.5rem -0.625rem rgba(9,228,252,.6),0 0.625rem 1.875rem -0.5rem rgba(211,35,168,.6)}
.btn-grad:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}
.btn-ghost-dark{color:#fff;border:0.0938rem solid rgba(255,255,255,.35);backdrop-filter:blur(0.375rem);background:rgba(255,255,255,.06)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.16);border-color:var(--cyan);transform:translateY(-0.1875rem)}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 0.875rem 2.125rem -0.75rem rgba(10,19,48,.5)}
.btn-white:hover{transform:translateY(-0.1875rem);box-shadow:0 1.25rem 2.5rem -0.625rem rgba(10,19,48,.55)}
.link-btn{color:inherit;text-decoration:underline;text-underline-offset:0.1875rem;text-decoration-color:rgba(127,140,170,.6);transition:.2s}
.link-btn:hover{color:var(--cyan);text-decoration-color:var(--cyan)}

/* =========================================================
   HERO — couches en parallaxe
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;background:var(--navy);overflow:hidden;padding:6.5rem 0 3.5rem}
.stage{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:0;right:0;top:-12%;height:124%;transform:translate3d(0,var(--py,0px),0);will-change:transform;pointer-events:none}
.l-sky{background:radial-gradient(120% 80% at 78% 30%,#1b3a8f 0%,#0f2160 32%,#0a1330 62%,#060b1f 100%)}
.l-aurora{filter:blur(4.375rem);opacity:.75}
.l-aurora::before,.l-aurora::after{content:"";position:absolute;border-radius:50%;animation:drift 18s ease-in-out infinite alternate}
.l-aurora::before{width:60vmax;height:60vmax;right:-20vmax;top:6%;background:radial-gradient(circle,rgba(9,228,252,.55),transparent 62%)}
.l-aurora::after{width:52vmax;height:52vmax;left:-22vmax;bottom:-4%;background:radial-gradient(circle,rgba(211,35,168,.5),transparent 62%);animation-delay:-6s}
@keyframes drift{to{transform:translate3d(-6vmax,5vmax,0) scale(1.15)}}
.l-net{width:100%;height:124%}
.l-flower-back{display:grid;place-items:center}
.l-flower-back img{position:absolute;width:150vmin;max-width:none;right:-45vmin;top:6%;opacity:.12;filter:blur(2px) saturate(1.3);animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.l-code{overflow:hidden}
.code-sym{position:absolute;font-family:var(--f-mono);font-weight:500;color:var(--cyan);opacity:0;white-space:nowrap;text-shadow:0 0 0.75rem currentColor;animation:rise linear forwards}
@keyframes rise{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%{opacity:.55}85%{opacity:.4}100%{opacity:0;transform:translate3d(var(--dx,0),-70vh,0) rotate(var(--rot,0deg))}}
.l-flower{display:grid;place-items:center}
.flower-orbit{position:absolute;width:min(92vw,32.5rem);aspect-ratio:1;right:-14vw;top:12%;filter:drop-shadow(0 0 2.5rem rgba(9,228,252,.45)) drop-shadow(0 0 5.625rem rgba(211,35,168,.35));opacity:.34;animation:float 9s ease-in-out infinite}
.flower-orbit img{width:100%;height:auto;animation:bloomIn 2.2s var(--ease) both}
@keyframes float{50%{transform:translate3d(0,-1.375rem,0) rotate(2deg)}}
@keyframes bloomIn{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
.ring{position:absolute;border-radius:50%;border:0.0938rem dashed rgba(9,228,252,.35);right:calc(-14vw - 6vw);top:calc(12% - 6vw);width:calc(min(92vw,32.5rem) + 12vw);aspect-ratio:1;animation:spin 60s linear infinite;opacity:.4}
.ring.r2{inset:auto;right:calc(-14vw - 14vw);top:calc(12% - 14vw);width:calc(min(92vw,32.5rem) + 28vw);border-color:rgba(211,35,168,.35);animation-duration:90s;animation-direction:reverse}
.l-flares .fl{position:absolute;border-radius:50%;filter:blur(2px);animation:twinkle 5s ease-in-out infinite}
.l-flares .a{width:0.625rem;height:0.625rem;left:14%;top:30%;background:var(--cyan);box-shadow:0 0 1.625rem 0.5rem rgba(9,228,252,.7)}
.l-flares .b{width:0.4375rem;height:0.4375rem;left:78%;top:70%;background:var(--mag);box-shadow:0 0 1.375rem 0.4375rem rgba(211,35,168,.7);animation-delay:-2s}
.l-flares .c{width:0.375rem;height:0.375rem;left:48%;top:18%;background:#fff;box-shadow:0 0 1.125rem 0.375rem rgba(255,255,255,.6);animation-delay:-3.5s}
@keyframes twinkle{50%{opacity:.25;transform:scale(.6)}}
.l-vignette{background:linear-gradient(180deg,rgba(10,19,48,.35) 0%,transparent 30%,transparent 70%,rgba(10,19,48,.65) 100%),linear-gradient(90deg,rgba(10,19,48,.7) 0%,transparent 70%)}

.hero-in{position:relative;z-index:3;transform:translate3d(0,var(--ty,0px),0);will-change:transform}
.glitch-wrap{margin-bottom:0.375rem}
.glitch{position:relative;display:inline-block;font-family:var(--f-head);font-weight:700;font-size:clamp(3rem,13vw,5.6rem);letter-spacing:-.03em;line-height:1.05;color:#fff;text-shadow:0 0 2.5rem rgba(9,228,252,.35)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.glitch::before{color:var(--cyan);transform:translate(-2px,0);animation:gl1 4.5s infinite steps(1)}
.glitch::after{color:var(--mag);transform:translate(2px,0);animation:gl2 4.5s infinite steps(1)}
@keyframes gl1{0%,88%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}89%{clip-path:inset(12% 0 60% 0);transform:translate(-0.25rem,0)}91%{clip-path:inset(55% 0 20% 0);transform:translate(0.1875rem,0)}93%{clip-path:inset(30% 0 45% 0);transform:translate(-0.1875rem,0)}95%{clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%,89%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}90%{clip-path:inset(60% 0 12% 0);transform:translate(0.25rem,0)}92%{clip-path:inset(8% 0 70% 0);transform:translate(-0.1875rem,0)}94%{clip-path:inset(40% 0 35% 0);transform:translate(0.1875rem,0)}96%{clip-path:inset(0 0 100% 0)}}
.glitch:hover::before{animation:gl1 .6s infinite steps(1)}
.glitch:hover::after{animation:gl2 .6s infinite steps(1)}
.hero-title{display:grid;gap:0;font-size:clamp(1.5rem,6vw,2.4rem);font-weight:700;margin:0.25rem 0 0.875rem}
.hero-title .l1,.hero-title .l2{display:block;color:#fff}
.hero-title .l3{display:block;background:linear-gradient(100deg,#09e4fc,#8f7bff 55%,#ff5fd3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{max-width:38.75rem;color:rgba(255,254,254,.82);font-size:1.02rem;line-height:1.55;margin-bottom:1.125rem}
.term{max-width:35rem;border-radius:1rem;background:rgba(6,11,31,.62);backdrop-filter:blur(0.625rem);border:1px solid rgba(9,228,252,.25);box-shadow:0 1.25rem 3.125rem -1.25rem rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;margin-bottom:1.25rem;overflow:hidden}
.term-slot{margin-bottom:0}.term-slot .term{margin-bottom:0}
.term-bar{display:flex;align-items:center;gap:0.4375rem;padding:0.625rem 0.875rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.72rem;color:rgba(255,255,255,.5)}
.term-bar i{width:0.625rem;height:0.625rem;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:0.5rem}
.term-body{padding:0.75rem 1rem 0.875rem;font-size:.9rem;min-height:4.75rem}
.term .p{color:var(--mag)}
.term .cmd{color:var(--cyan)}
.term .res{margin-top:0.375rem;color:#e7edff}
.term .res b{color:#fff;font-weight:500}
.caret{display:inline-block;width:0.5rem;height:1.05em;background:var(--cyan);margin-left:0.1875rem;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:0.875rem;max-width:35rem;margin-bottom:1.25rem}
.cta-row .btn{flex:1 1 auto}
.scroll-hint{position:absolute;left:50%;bottom:1.375rem;z-index:3;width:1.625rem;height:2.625rem;margin-left:-0.8125rem;border:2px solid rgba(255,255,255,.45);border-radius:1.25rem;display:none}
.scroll-hint span{position:absolute;left:50%;top:0.5rem;width:0.25rem;height:0.5rem;margin-left:-2px;border-radius:0.25rem;background:var(--cyan);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(0.875rem)}}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{position:relative;padding:4.75rem 0;overflow:hidden;background:var(--bg)}
.sec>.wrap{position:relative;z-index:2}
.sec-soft{background:linear-gradient(180deg,var(--soft),#f4f9ff)}
.sec-head{text-align:center;max-width:47.5rem;margin:0 auto 2.875rem}
.kicker{display:inline-block;font-size:.82rem;color:var(--violet);background:rgba(79,70,229,.08);padding:0.375rem 0.75rem;border-radius:0.5rem;margin-bottom:0.875rem;letter-spacing:.02em}
.sec h2,.band h2{font-size:clamp(1.8rem,5.6vw,2.9rem);margin-bottom:0.875rem}
.sub{font-size:1.12rem;color:var(--muted);font-weight:500}
.sub.grad-text{font-weight:700;font-family:var(--f-head);font-size:1.15rem}
.body{margin-top:1rem;color:var(--muted)}
.foot-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1.625rem}
.two{display:grid;gap:2.625rem;align-items:center}

/* filigranes fleur */
.wm{position:absolute;pointer-events:none;z-index:0;width:min(120vw,45rem);height:auto;opacity:.07;filter:saturate(1.2) drop-shadow(0 1.875rem 2.5rem rgba(79,70,229,.25));will-change:transform;transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg))}
.wm-right{right:-38%;top:6%}.wm-left{left:-40%;bottom:-6%}
.wm.big{width:min(130vw,53.75rem);opacity:.1}
.wm-card{position:absolute;right:-3rem;bottom:-3.25rem;width:12.5rem;height:auto;aspect-ratio:1/1;object-fit:contain;opacity:.07;pointer-events:none;transition:transform .8s var(--ease),opacity .4s;z-index:0}
.flist li{position:relative;padding-left:1.875rem;margin-top:0.625rem;color:var(--muted);font-size:.98rem;line-height:1.5}
.flist li::before{content:"";position:absolute;left:0;top:.12em;width:1.25rem;height:1.25rem;background:url("../img/list.png") center/contain no-repeat;transition:transform .5s var(--ease)}
.flist li:hover::before{transform:rotate(90deg) scale(1.15)}
.flist.big li{font-size:1.05rem;color:var(--ink);font-weight:600}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;translate:0 1.875rem;transition:opacity .9s var(--ease),translate .9s var(--ease),scale .9s var(--ease);transition-delay:var(--d,0s)}
html.js .reveal[data-reveal=left]{translate:-2.25rem 0}
html.js .reveal[data-reveal=right]{translate:2.25rem 0}
html.js .reveal[data-reveal=zoom]{translate:0 1.25rem;scale:.94}
html.js .reveal.in{opacity:1;translate:0 0;scale:1}

/* ---------- cartes ---------- */
[data-tilt]{transform:perspective(56.25rem) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,box-shadow .4s,border-color .4s;will-change:transform}
.card,.badge,.why{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;isolation:isolate}
.card::before,.badge::before,.why::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(22.5rem circle at var(--mx,50%) var(--my,0%),rgba(9,228,252,.16),rgba(211,35,168,.08) 45%,transparent 70%)}
.card:hover,.badge:hover,.why:hover{box-shadow:var(--sh-2);border-color:rgba(79,70,229,.25)}
.card:hover::before,.badge:hover::before,.why:hover::before{opacity:1}
.card:hover .wm-card{opacity:.16;transform:rotate(18deg) scale(1.1)}
.grid{display:grid;gap:1.25rem}
.svc{padding:1.75rem 1.5rem}
.svc h3{font-size:1.28rem;margin:1.125rem 0 0.625rem}
.svc .lead{color:var(--ink);opacity:.82;font-size:.98rem}
.svc-ico{display:inline-grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;background:var(--navy);box-shadow:0 0.625rem 1.5rem -0.5rem rgba(10,19,48,.55);position:relative}
.svc-ico::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:0.0938rem;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.svc-ico svg{width:1.625rem;height:1.625rem;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.svc:hover .svc-ico svg{transform:scale(1.15) rotate(-6deg);stroke:#fff}

/* partenaire */
.badges{display:grid;gap:0.875rem}
.badge{padding:1.375rem 1.375rem 1.375rem 5.25rem}
.badge img{position:absolute;left:1.375rem;top:1.375rem;width:2.75rem;height:2.75rem;transition:transform .8s var(--ease)}
.badge:hover img{transform:rotate(180deg) scale(1.1)}
.badge h3{font-size:1.2rem;margin-bottom:0.25rem}
.badge p{color:var(--muted)}

/* IA */
.sec-ai{background:radial-gradient(80% 60% at 85% 20%,rgba(9,228,252,.13),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(211,35,168,.10),transparent 60%),#fff}
.ai-list{margin:1.625rem 0 1.875rem;display:grid;gap:0.75rem}
.ai-list li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.125rem;border-radius:1.125rem;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:var(--sh-1);backdrop-filter:blur(0.375rem);transition:transform .35s var(--ease),box-shadow .35s}
.ai-list li:hover{transform:translateX(0.375rem);box-shadow:var(--sh-2)}
.ai-n{flex:none;width:2.625rem;height:2.625rem;display:grid;place-items:center;border-radius:0.75rem;background:var(--navy);color:var(--cyan);font-size:.85rem;font-weight:500}
.ai-list h3{font-size:1.08rem;margin-bottom:2px}
.ai-list p{color:var(--muted);font-size:.96rem}
.chat{background:var(--navy);color:#fff;border-radius:1.625rem;box-shadow:0 2.5rem 5rem -1.875rem rgba(10,19,48,.6),0 0 0 1px rgba(255,255,255,.06) inset;overflow:hidden;position:relative}
.chat::before{content:"";position:absolute;inset:-40% -20% auto auto;width:18.75rem;height:18.75rem;background:radial-gradient(circle,rgba(9,228,252,.28),transparent 65%);pointer-events:none}
.chat-head{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.125rem;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.chat-head img{background:#fff;border-radius:0.75rem;padding:0.25rem}
.chat-head strong{display:block;font-family:var(--f-head);font-size:.98rem}
.chat-head small{display:flex;align-items:center;gap:0.375rem;color:rgba(255,255,255,.6);font-size:.72rem}
.live{width:0.4375rem;height:0.4375rem;border-radius:50%;background:#28c840;box-shadow:0 0 0.5rem #28c840;animation:twinkle 2s infinite}
.chat-body{height:21.25rem;padding:1.125rem;display:flex;flex-direction:column;gap:0.625rem;overflow:hidden}
.msg{max-width:84%;padding:0.6875rem 0.9375rem;border-radius:1.125rem;font-size:.93rem;line-height:1.45;animation:pop .45s var(--ease) both}
.msg.u{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:0.3125rem}
.msg.a{align-self:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:0.3125rem}
.msg.typing{display:flex;gap:0.3125rem;padding:0.875rem 1rem}
.msg.typing i{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--cyan);animation:dots 1.1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-0.3125rem);opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(0.625rem) scale(.96)}}
.chat-foot{padding:0.625rem 1.125rem;font-size:.7rem;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.08)}

/* pourquoi */
.why{padding:1.625rem 1.5rem 1.625rem}
.why h3{font-size:1.15rem;margin:0.625rem 0 0.375rem}
.why p{color:var(--muted);font-size:.98rem}
.why-n{display:inline-block;font-size:.82rem;color:#fff;background:var(--navy);padding:0.25rem 0.625rem;border-radius:0.5rem}
.why::after{content:"";position:absolute;left:0;bottom:0;height:0.1875rem;width:0;background:var(--grad);transition:width .6s var(--ease)}
.why:hover::after{width:100%}

/* méthode */
.steps{position:relative;display:grid;gap:0.875rem;max-width:40rem;margin:0 auto}
.steps::before{content:"";position:absolute;left:2.375rem;top:2.125rem;bottom:2.125rem;width:2px;background:linear-gradient(180deg,var(--cyan),var(--violet) 55%,var(--mag));opacity:.35;border-radius:2px}
.step{position:relative;display:flex;gap:1rem;align-items:center;padding:0.875rem 1.125rem 0.875rem 0.875rem;border-radius:1.25rem;background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.step:hover{transform:translateX(0.375rem);box-shadow:var(--sh-2);border-color:rgba(79,70,229,.25)}
.step-ico{flex:none;display:grid;place-items:center;width:3rem;height:3rem;margin:0 2px 0 0;border-radius:50%;background:#fff;box-shadow:0 0 0 0.25rem var(--soft),0 0.375rem 1.125rem -0.375rem rgba(79,70,229,.45);position:relative;z-index:1}
.step-ico img{width:2.25rem;height:2.25rem;max-width:none;transform:rotate(var(--r,0deg));transition:transform .8s var(--ease)}
.step:hover .step-ico img{transform:rotate(calc(var(--r,0deg) + 180deg)) scale(1.08)}
.step h3{font-size:1.05rem;margin-bottom:2px}
.step p{color:var(--muted);font-size:.88rem;line-height:1.5}
.sec-method{background:radial-gradient(70% 60% at 100% 0%,rgba(79,70,229,.10),transparent 60%),linear-gradient(180deg,#fff,var(--soft))}

/* réalisations */
.work-grid{gap:1.5rem}
.work{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.work:hover{transform:translateY(-0.5rem);box-shadow:var(--sh-2)}
.browser{margin:0.875rem 0.875rem 0;border-radius:0.875rem 0.875rem 0 0;border:1px solid var(--line);border-bottom:0;overflow:hidden;background:#f1f5fb}
.bar{display:flex;align-items:center;gap:0.375rem;padding:0.5625rem 0.75rem;background:#e8eef8}
.bar i{width:0.5625rem;height:0.5625rem;border-radius:50%;background:#c9d3e6}
.bar span{margin-left:0.5rem;flex:1;font:.68rem/1 var(--f-mono);color:var(--muted);background:#fff;border-radius:6.1875rem;padding:0.3125rem 0.625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;display:block;container-type:size}
.shot{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;background:#fff;z-index:1;transform:translateY(0);transition:transform 1.2s var(--ease);will-change:transform}
.work:hover .shot,.work.play .shot{transform:translateY(min(0px,calc(-100% + 100cqh)));transition:transform var(--dur,10s) cubic-bezier(.45,.05,.55,.95)}
.mock{width:100%;pointer-events:none}
.m-nav{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 0.875rem;border-bottom:1px solid #edf1f7}
.m-nav b{width:1.375rem;height:1.375rem;border-radius:0.4375rem;background:var(--b)}
.m-nav i{height:0.375rem;border-radius:0.25rem;background:#dbe3ef;flex:1;max-width:2.875rem}.m-nav i:first-of-type{margin-left:auto}
.m-hero{padding:1.625rem 1rem;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff}
.m-hero strong{display:block;font:700 1.05rem/1.2 var(--f-head);margin-bottom:0.5rem}
.m-hero em{display:block;height:0.375rem;width:70%;border-radius:0.25rem;background:rgba(255,255,255,.55);margin-bottom:0.3125rem;font-style:normal}
.m-hero em+em{width:50%}
.m-hero u{display:inline-block;margin-top:0.625rem;width:5.25rem;height:1.375rem;border-radius:6.1875rem;background:#fff;opacity:.95}
.m-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem;padding:1.125rem 0.875rem}
.m-cols span{height:4.875rem;border-radius:0.75rem;background:linear-gradient(180deg,#f2f6fc,#e6edf8);position:relative}
.m-cols span::before{content:"";position:absolute;left:0.625rem;top:0.625rem;width:1.25rem;height:1.25rem;border-radius:0.375rem;background:var(--b);opacity:.85}
.m-cols span::after{content:"";position:absolute;left:0.625rem;right:0.625rem;bottom:0.75rem;height:0.3125rem;border-radius:0.1875rem;background:#cfd9ea;box-shadow:0 -0.625rem 0 #d9e1ee}
.m-band{margin:0 0.875rem;padding:1.25rem;border-radius:0.875rem;background:var(--b);opacity:.92;color:#fff;font:700 .85rem var(--f-head)}
.m-lines{padding:1.125rem 0.875rem}
.m-lines i{display:block;height:0.4375rem;border-radius:0.25rem;background:#e2e8f2;margin-bottom:0.5rem}.m-lines i:nth-child(2){width:86%}.m-lines i:nth-child(3){width:64%}
.m-foot{margin-top:0.375rem;padding:1.25rem 0.875rem;background:#0f1a3a;display:grid;gap:0.4375rem}
.m-foot i{height:0.375rem;border-radius:0.25rem;background:#2a3868;width:60%}.m-foot i:nth-child(2){width:40%}
.work-meta{display:flex;align-items:center;gap:0.875rem;padding:1rem 1.125rem 1.125rem}
.work-logo{flex:none;width:3.375rem;height:3.375rem;border-radius:0.875rem;overflow:hidden;box-shadow:0 0.5rem 1.25rem -0.5rem rgba(10,19,48,.4);transition:transform .5s var(--ease)}
.work-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.work-logo:hover{transform:rotate(-6deg) scale(1.08)}
.work-meta h3{font-size:1.08rem}
.work-meta p{color:var(--muted);font-size:.88rem;line-height:1.35}
.work-go{margin-left:auto;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--navy);transition:.4s var(--ease)}
.work-go svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work:hover .work-go,.work-go:hover{background:var(--grad);color:#fff;transform:rotate(45deg)}
.trust{margin-top:3.5rem;text-align:center;max-width:48.75rem;margin-left:auto;margin-right:auto}
.trust h3{font-size:1.5rem;margin-bottom:0.625rem}
.trust p{color:var(--muted)}
.marquee{margin:1.75rem -1.25rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:0.875rem;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq{display:inline-flex;align-items:center;justify-content:center;width:11.875rem;height:4.375rem;padding:0 1.375rem;background:#fff;border:1px solid var(--line);border-radius:62.4375rem;box-shadow:var(--sh-1)}
.mq img{max-width:100%;max-height:2.75rem;width:auto;height:auto;object-fit:contain}
@keyframes marq{to{transform:translateX(-50%)}}

/* simulateur */
.sim{position:relative;padding:1.875rem 1.375rem;background:#fff;border:1px solid var(--line);border-radius:1.75rem;box-shadow:var(--sh-2);overflow:hidden}
.sim-bar{position:absolute;left:0;top:0;right:0;height:0.3125rem;background:var(--soft)}
.sim-bar span{display:block;height:100%;width:0;background:var(--grad);transition:width .5s var(--ease)}
.sim-q{animation:pop .5s var(--ease) both}
.sim-q[hidden]{display:none}
.sim-q h3{font-size:1.35rem;margin:0.625rem 0 1.25rem;text-align:center}
.opts{display:grid;gap:0.625rem}
.opt{padding:1rem 1.125rem;border-radius:1rem;border:0.0938rem solid var(--line);background:var(--bg);font-weight:700;text-align:left;transition:.3s var(--ease);position:relative;padding-left:3.25rem}
.opt::before{content:"";position:absolute;left:1rem;top:50%;width:1.5rem;height:1.5rem;margin-top:-0.75rem;background:url("../img/list.png") center/contain no-repeat;opacity:.5;transition:.4s var(--ease)}
.opt:hover{border-color:var(--violet);background:#fff;transform:translateX(0.3125rem);box-shadow:var(--sh-1)}
.opt:hover::before{opacity:1;transform:rotate(90deg)}
.sim-done{text-align:center;display:grid;gap:1rem;justify-items:center}
.sim-done p{color:var(--violet);background:rgba(79,70,229,.07);padding:0.625rem 0.875rem;border-radius:0.75rem;font-size:.85rem}

/* bandeau */
.band{position:relative;overflow:hidden;color:#fff;padding:4rem 0;background:linear-gradient(115deg,#0a1330 0%,#14306f 38%,#4f46e5 72%,#d323a8 100%)}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:2.75rem 2.75rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.band .wm{opacity:.16;filter:brightness(2.4) saturate(.6)}
.band .wm-right{right:-20%;top:-60%}
.band-in{position:relative;z-index:2;display:grid;gap:1.625rem;align-items:center}
.band h2{margin-bottom:0.625rem;color:#fff}
.band p{color:rgba(255,255,255,.88);max-width:38.75rem;font-size:1.08rem}

/* faq */
.faq{display:grid;gap:0.75rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:1.125rem;box-shadow:var(--sh-1);transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--sh-2);border-color:rgba(79,70,229,.3)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.25rem;font:700 1.02rem/1.35 var(--f-head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--soft) url("../img/list.png") center/1rem no-repeat;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg);background-color:#e5f0ff}
.faq details p{padding:0 1.25rem 1.25rem;color:var(--muted);animation:pop .4s var(--ease) both}

/* contact */
.sec-contact{background:radial-gradient(70% 60% at 0% 0%,rgba(9,228,252,.12),transparent 60%),radial-gradient(60% 60% at 100% 100%,rgba(211,35,168,.10),transparent 60%),#fff}
.mail-line{margin-top:1.625rem;color:var(--muted)}
.mail-line a{color:var(--violet);font-weight:700;text-decoration:underline;text-underline-offset:0.1875rem}
.form{position:relative;display:grid;gap:1rem;padding:1.625rem 1.375rem;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:1.75rem;box-shadow:var(--sh-2);backdrop-filter:blur(0.625rem)}
.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:0.375rem}
.field input,.field textarea{width:100%;font:inherit;color:var(--ink);padding:0.875rem 1rem;border-radius:0.875rem;border:0.0938rem solid rgba(10,19,48,.14);background:var(--bg);transition:border-color .25s,box-shadow .25s,background .25s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 0.25rem rgba(9,228,252,.2)}
.err{display:none;color:#c0128f;font-size:.82rem;margin-top:0.375rem;font-weight:600}
.field.invalid input,.field.invalid textarea{border-color:var(--mag);box-shadow:0 0 0 0.25rem rgba(211,35,168,.12)}
.field.invalid .err,#e-consent.show{display:block}
.hp{position:absolute;left:-624.9375rem;width:1px;height:1px;opacity:0}
.check{display:flex;gap:0.75rem;align-items:flex-start;font-size:.88rem;color:var(--muted);cursor:pointer}
.check input{flex:none;width:1.25rem;height:1.25rem;margin-top:2px;accent-color:var(--violet)}
.micro{text-align:center;font-size:.8rem;color:var(--muted)}
.spin{display:none;width:1.125rem;height:1.125rem;border-radius:50%;border:0.1562rem solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.form.loading .spin{display:inline-block}.form.loading button[type=submit]{pointer-events:none;opacity:.85}
.form.done>*:not(.form-ok){display:none}
.form-ok{text-align:center;display:grid;justify-items:center;gap:0.875rem;padding:1.875rem 0.375rem;outline:none}
.form-ok[hidden],.form-ko[hidden]{display:none}
.form-ok p{font:700 1.2rem/1.35 var(--f-head)}
.form-ok svg{width:5.25rem;height:5.25rem;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.form-ok circle{stroke:var(--cyan);stroke-dasharray:152;stroke-dashoffset:152;animation:draw .8s .1s var(--ease) forwards}
.form-ok path{stroke:var(--mag);stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form-ko{color:#c0128f;font-weight:700;text-align:center}

/* footer */
.site-footer{position:relative;overflow:hidden;background:var(--navy);color:rgba(255,254,254,.8);padding:3.5rem 0 1.875rem}
.site-footer .wm{opacity:.08;filter:none}
.site-footer .wm-left{left:-30%;bottom:-40%}
.foot-in{position:relative;z-index:2;display:grid;gap:1.875rem}
.foot-brand img{background:#fff;border-radius:1rem;padding:0.625rem 1.125rem;height:4rem;width:auto;margin-bottom:0.875rem}
.foot-brand .foot-loc{font:500 .9rem var(--f-body);color:rgba(255,255,255,.7);margin-top:.35rem}
.foot-brand p{font:600 1.05rem var(--f-head);color:#fff}
.foot-nav{display:flex;flex-wrap:wrap;gap:0.625rem 1.375rem;align-items:center}
.foot-nav a:not(.btn){font-weight:600;transition:color .2s}
.foot-nav a:not(.btn):hover{color:var(--cyan)}
.foot-links{display:flex;flex-wrap:wrap;gap:0.625rem 1.375rem;align-items:center;font-size:.92rem;padding-top:1.375rem;border-top:1px solid rgba(255,255,255,.12)}
.foot-links a{display:inline-flex;align-items:center;gap:0.5rem;transition:color .2s}
.foot-links a:hover{color:var(--cyan)}
.copy{font-size:.75rem;opacity:.55}

/* flottants */
.to-top,.term-fab{position:fixed;right:1rem;z-index:90;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;box-shadow:0 0.75rem 1.875rem -0.5rem rgba(10,19,48,.5);transition:transform .4s var(--ease),opacity .4s}
.to-top{bottom:1rem;background:var(--grad);opacity:0;transform:translateY(1.25rem);pointer-events:none}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-0.25rem)}
.to-top svg{width:1.25rem;height:1.25rem;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.term-fab{bottom:4.625rem;background:var(--navy);color:var(--cyan);font-size:.78rem;border:1px solid rgba(9,228,252,.4)}
.term-fab:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 1.5rem rgba(9,228,252,.5)}

/* dialogues */
.dlg{width:min(45rem,calc(100% - 1.5rem));max-height:86vh;border:0;border-radius:1.625rem;padding:0;background:#fff;color:var(--ink);box-shadow:0 3.125rem 6.25rem -1.25rem rgba(10,19,48,.6);overflow:hidden}
.dlg::backdrop{background:rgba(6,11,31,.6);backdrop-filter:blur(0.375rem)}
.dlg[open]{animation:pop .4s var(--ease)}
.dlg form{position:absolute;right:0.75rem;top:0.75rem;z-index:2}
.dlg-x{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--soft);font-size:1.5rem;line-height:1;transition:.3s}
.dlg-x:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}
.dlg-body{padding:2.125rem 1.5rem 1.75rem;overflow:auto;max-height:86vh}
.dlg-body h2{font-size:1.6rem;margin-bottom:1rem}
.dlg-body h3{font-size:1.05rem;margin:1.375rem 0 0.375rem}
.dlg-body p,.dlg-body li{color:var(--muted);font-size:.96rem}
.dlg-body li{margin-top:0.375rem}
.dlg-body a{color:var(--violet);text-decoration:underline}
.todo{background:#fff3c4;color:#6b4e00;padding:1px 0.375rem;border-radius:0.375rem;font-family:var(--f-mono);font-size:.82em}
.dlg-term{background:#060b1f;color:#e7edff;border:1px solid rgba(9,228,252,.3);width:min(47.5rem,calc(100% - 1.5rem))}
.dlg-term .dlg-x{background:rgba(255,255,255,.08);color:#fff}
.tm{padding:2.75rem 1.25rem 1.125rem;font-size:.88rem}
.tm-out{height:min(52vh,23.75rem);overflow:auto;white-space:pre-wrap;line-height:1.6}
.tm-out .c{color:var(--cyan)}.tm-out .m{color:var(--mag)}.tm-out .d{color:#8793b8}
.tm-in{display:flex;gap:0.625rem;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid rgba(255,255,255,.12)}
.tm-in span{color:var(--mag)}
.tm-in input{flex:1;background:none;border:0;color:var(--cyan);font:inherit;outline:none}

/* cookies */
.cookie{position:fixed;left:0.75rem;right:0.75rem;bottom:0.75rem;z-index:95;display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;padding:0.875rem 1rem;background:rgba(10,19,48,.94);color:#fff;backdrop-filter:blur(0.875rem);border-radius:1.25rem;box-shadow:0 1.5rem 3.75rem -1rem rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);font-size:.88rem;animation:pop .6s var(--ease) both}
.cookie[hidden]{display:none}
@media (max-width:979px){.has-cookie .to-top,.has-cookie .term-fab{opacity:0;pointer-events:none}}
.cookie p{flex:1 1 13.75rem}
.cookie img{display:none}
@media (min-width:700px){.cookie img{display:block}}
@media (max-width:699px){.cookie{padding:0.625rem 0.75rem;font-size:.8rem;gap:0.5rem 0.75rem;border-radius:1rem}.cookie p{flex:1 1 100%}}

/* =========================================================
   404
   ========================================================= */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:5.625rem 1.25rem 2.5rem}
.nf .big{font:800 clamp(6rem,30vw,14rem)/1 var(--f-head);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.05em;position:relative;display:inline-block}
.nf .big::before,.nf .big::after{content:attr(data-text);position:absolute;inset:0;-webkit-text-fill-color:currentColor;mix-blend-mode:screen;overflow:hidden}
.nf .big::before{color:var(--cyan);animation:gl1 3.5s infinite steps(1)}.nf .big::after{color:var(--mag);animation:gl2 3.5s infinite steps(1)}
.nf-in{position:relative;z-index:3;max-width:40rem}
.nf h1{font-size:clamp(1.4rem,5vw,2rem);margin:0.625rem 0 0.75rem}
.nf p{color:rgba(255,255,255,.78);margin-bottom:1.625rem}
.nf .term{margin:0 auto 1.625rem;text-align:left}
.nf .flower-orbit{opacity:.25;right:50%;margin-right:-50vmin;width:100vmin;top:50%;margin-top:-50vmin;animation:spin 80s linear infinite}

/* =========================================================
   TABLETTE / DESKTOP
   ========================================================= */
@media (min-width:700px){
  .hide-m{display:inline-flex}
  .cta-row .btn{flex:0 0 auto}
  .grid.svc-grid,.why-grid,.work-grid{grid-template-columns:repeat(2,1fr)}
  .svc-wide{grid-column:1/-1}
  .badges{grid-template-columns:1fr}
  .opts{grid-template-columns:repeat(2,1fr)}
  .scroll-hint{display:block}
  .band-in{grid-template-columns:1fr auto}
}
@media (min-width:980px){
  :root{--head:5.625rem}
  .site-header{inset:1rem 0 auto 0}
  .header-in{margin:0 auto;width:calc(100% - 2.5rem);padding:0 0.875rem 0 1.375rem}
  .burger{display:none}
  .nav{position:static;inset:auto;display:flex;align-items:center;gap:2px;padding:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;backdrop-filter:none}
  .nav a:not(.btn){padding:0.625rem 1rem;font-size:.95rem}
  .nav-cta{margin:0 0 0 0.5rem}
  .header-in{justify-content:flex-start}
  .nav{margin-left:auto}
  .header-tools{margin-left:0.5rem}
  .sec{padding:7.25rem 0}
  .two{grid-template-columns:1fr 1fr;gap:4rem}
  .grid.svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc-wide{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;align-items:center}
  .svc-wide>.svc-ico,.svc-wide>h3,.svc-wide>.lead{grid-column:1}
  .svc-wide>.flist{grid-column:2;grid-row:1/span 3}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .wm{width:min(52vw,47.5rem)}
  .wm-right{right:-8%}.wm-left{left:-10%}
  .hero{padding-top:8.125rem}
  .hero-in{max-width:43.75rem;margin-left:max(1.25rem,calc((100vw - 73.75rem)/2))}
  .hero .wrap.hero-in{max-width:43.75rem;margin-left:max(1.25rem,calc((100vw - 73.75rem)/2));padding:0}
  .flower-orbit{width:min(54vw,47.5rem);right:-4vw;top:8%;opacity:1}
  .ring{width:calc(min(54vw,47.5rem) + 9vw);right:calc(-4vw - 4.5vw);top:calc(8% - 4.5vw)}
  .ring.r2{width:calc(min(54vw,47.5rem) + 22vw);right:calc(-4vw - 11vw);top:calc(8% - 11vw)}
  .l-vignette{background:linear-gradient(180deg,rgba(10,19,48,.3),transparent 25%,transparent 75%,rgba(10,19,48,.6)),linear-gradient(90deg,rgba(10,19,48,.82) 0%,rgba(10,19,48,.35) 48%,transparent 75%)}
  .band-in{gap:3.75rem}
  .foot-in{grid-template-columns:1.2fr 1fr;align-items:start}
  .foot-links,.copy{grid-column:1/-1}
  .dlg-body{padding:2.75rem 2.75rem 2.125rem}
  .cookie{left:1.25rem;right:auto;max-width:35rem;bottom:1.25rem}
  .to-top,.term-fab{right:1.5rem}
  .to-top{bottom:1.5rem}.term-fab{bottom:5.25rem}
}
@media (min-width:1280px){
  .glitch{font-size:5.4rem}
  .hero-title{font-size:2.5rem}
}

/* accessibilité */
@media all{
  html.rm{scroll-behavior:auto}
  html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* mouvement réduit : apparition en fondu doux, sans déplacement */
  html.rm.js .reveal{translate:none!important;scale:1!important;transition:opacity .8s var(--ease)!important;transition-delay:var(--d,0s)!important}
  html.rm .layer,html.rm .wm,html.rm .hero-in{transform:none!important}
  html.rm .work:hover .shot,html.rm .work.play .shot{transform:none}
}
@media print{.site-header,.cookie,.to-top,.term-fab,.cursor-glow,.progress{display:none!important}}

/* ===== Rubriques sombres (séparation visuelle) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec.sec-dark{color:#fff;background:radial-gradient(70% 60% at 88% 6%,rgba(9,228,252,.16),transparent 60%),radial-gradient(60% 60% at 4% 100%,rgba(211,35,168,.18),transparent 60%),linear-gradient(180deg,#0a1330,#0d1a44)}
.sec-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(9,228,252,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(9,228,252,.06) 1px,transparent 1px);background-size:3.5rem 3.5rem;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%)}
.sec-dark h2{color:#fff}
.sec-dark .sub,.sec-dark .trust p,.sec-dark .foot-note,.sec-dark .body{color:rgba(255,255,255,.78)}
.sec-dark .trust h3{color:#fff}
.sec-dark .kicker{color:var(--cyan);background:rgba(9,228,252,.1)}
.sec-dark .wm{opacity:.08;filter:brightness(1.8) saturate(1.2)}
.sec-dark :is(.card,.why,.work,.mq){color:var(--ink)}
.sec-dark .card,.sec-dark .why,.sec-dark .work{border-color:rgba(255,255,255,.14);box-shadow:0 1.5rem 3.75rem -1.875rem rgba(0,0,0,.6)}

/* ===== Modernisation ===== */
.duo{display:grid;gap:1.375rem;max-width:65rem;margin:0 auto}
.duo-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;padding:1.75rem 1.5rem;border-radius:1.625rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(0.5rem)}
.duo-card h3{font-size:1.4rem;color:#fff}
.duo-card .lead{color:rgba(255,255,255,.82)}
.duo-card .flist li{color:rgba(255,255,255,.86)}
.duo-card .btn{margin-top:auto}
.duo-card.is-main{background:linear-gradient(160deg,rgba(9,228,252,.14),rgba(211,35,168,.14));border-color:rgba(9,228,252,.5);box-shadow:0 1.875rem 5rem -2.5rem rgba(9,228,252,.55)}
.duo-tag{font-size:.78rem;color:#0a1330;background:var(--cyan);padding:0.3125rem 0.75rem;border-radius:62.4375rem;font-weight:700}
.keep{display:grid;gap:0.875rem;width:100%}
.keep h4{font-family:var(--f-head);font-size:.95rem;color:var(--cyan);margin:0 0 2px;letter-spacing:.02em}
.agnostic{max-width:48.75rem;margin:2.125rem auto 0;text-align:center;color:rgba(255,255,255,.72);font-size:.98rem}
.futur{display:grid;gap:1.625rem;max-width:65rem;margin:2.5rem auto 0;padding:1.75rem 1.375rem;border-radius:1.75rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(0.625rem);scroll-margin-top:calc(var(--head) + 0.75rem)}
.futur h3{font-size:clamp(1.4rem,4.4vw,2rem);color:#fff;margin-bottom:0.625rem}
.futur p{color:rgba(255,255,255,.8)}
.futur .flist li{color:rgba(255,255,255,.88)}
.futur .kicker{margin-bottom:0.75rem}
.futur-form{display:grid;gap:1rem;align-content:center}
.chips{border:0;margin:0;padding:0;display:grid;gap:0.625rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:block;padding:0.8125rem 1rem;border-radius:0.875rem;border:0.0938rem solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-weight:700;font-size:.95rem;text-align:center;transition:.3s var(--ease)}
.chip input:checked+span{background:var(--grad);border-color:transparent;box-shadow:0 0.75rem 1.875rem -0.75rem rgba(9,228,252,.6)}
.chip input:focus-visible+span{outline:0.1875rem solid var(--cyan);outline-offset:2px}
.futur .field label{color:#fff}
.futur .micro{color:rgba(255,255,255,.65)}
.futur .field .err{color:#ff9bd9}
@media(min-width:760px){
  .duo{grid-template-columns:1fr 1.25fr}
  .keep{grid-template-columns:1fr 1fr}
  .futur{grid-template-columns:1.1fr 1fr;align-items:center;padding:2.5rem 2.375rem;gap:2.5rem}
  .chips{grid-template-columns:1fr 1fr}
}
@media(min-width:760px){.cta-row{max-width:43.75rem}}

/* ===== À propos : logo, visuel provisoire, tags ===== */
.about-logo{display:block;width:6.5rem;height:auto;margin:0 0 1.125rem}
.about{align-items:center}
.about-visual{position:relative;width:100%;max-width:32.5rem;aspect-ratio:16/12;margin:0 auto}
.dev-screen{position:absolute;left:0;top:4%;width:88%;aspect-ratio:16/10;border-radius:1rem;background:#fff;border:0.375rem solid var(--navy);box-shadow:var(--sh-2);overflow:hidden}
.dev-bar{display:flex;gap:0.3125rem;padding:0.4375rem 0.625rem;background:var(--soft)}
.dev-bar i{width:0.5rem;height:0.5rem;border-radius:50%;background:rgba(10,19,48,.2)}
.dev-body{display:grid;justify-items:center;align-content:center;gap:0.5rem;padding:0.75rem;height:calc(100% - 1.375rem);background:radial-gradient(80% 80% at 70% 20%,rgba(9,228,252,.22),transparent 60%),radial-gradient(70% 70% at 10% 100%,rgba(211,35,168,.2),transparent 60%),#fff}
.dev-body img{width:3.5rem;height:3.5rem;opacity:.9}
.dev-body b{display:block;width:60%;height:0.5625rem;border-radius:0.375rem;background:var(--grad);opacity:.8}
.dev-body b.s{width:40%;height:0.4375rem;background:rgba(10,19,48,.14)}
.dev-body span{width:5.25rem;height:1.375rem;border-radius:62.4375rem;background:var(--grad)}
.dev-phone{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:9/18;border-radius:1.375rem;background:#fff;border:0.3125rem solid var(--navy);box-shadow:var(--sh-2);overflow:hidden;animation:float 8s ease-in-out infinite}
.dev-notch{position:absolute;left:50%;top:0.3125rem;width:32%;height:0.3125rem;border-radius:0.25rem;background:var(--navy);transform:translateX(-50%);z-index:1}
.dev-phone .dev-body{height:100%;padding-top:1.25rem}
.dev-phone .dev-body img{width:2.125rem;height:2.125rem}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:0.625rem;margin:2.375rem 0 0;padding:0;list-style:none}
.tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem 0.5rem 0.75rem;border-radius:62.4375rem;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.88rem;line-height:1.3}
.tag img{flex:none;width:1.25rem;height:1.25rem}
.tag strong{font-family:var(--f-head)}
.tag span{color:var(--muted)}
@media(max-width:560px){.tag span{display:none}}

/* ===== Expertises : cartes plus compactes ===== */
.svc{padding:1.25rem 1.25rem 1.125rem}
.svc-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.625rem}
.svc .svc-ico{width:2.75rem;height:2.75rem;border-radius:0.8125rem;flex:none}
.svc .svc-ico svg{width:1.375rem;height:1.375rem}
.svc h3{font-size:1.12rem;margin:0}
.svc .lead{font-size:.92rem;line-height:1.5}
.svc .flist li{font-size:.86rem;line-height:1.4;margin-top:0.375rem;padding-left:1.5rem}
.svc .flist li::before{width:1rem;height:1rem;top:.18em}
.svc .wm-card{display:none}
.svc-grid{gap:0.875rem}
@media(min-width:980px){.svc-wide>.svc-head,.svc-wide>.lead{grid-column:1}}

/* ===== Méthode : en ligne, icônes parlantes ===== */
.steps{max-width:none;margin:0;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.steps::before{display:none}
.step{flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1.125rem 1rem 1.125rem}
.step:hover{transform:translateY(-0.3125rem)}
.step .svc-ico{width:2.75rem;height:2.75rem;border-radius:0.8125rem}
.step .svc-ico svg{width:1.375rem;height:1.375rem}
.step:hover .svc-ico svg{transform:scale(1.15) rotate(-6deg);stroke:#fff}
.step-n{position:absolute;right:0.875rem;top:0.75rem;font-size:.78rem;color:var(--violet);opacity:.7}
.step h3{font-size:1.02rem}
.step p{font-size:.86rem}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:1rem}
  .step:not(:last-child)::after{content:"";position:absolute;right:-0.75rem;top:2.125rem;width:0.5rem;height:0.5rem;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);transform:rotate(45deg)}
}

/* ===== Contact : logo horizontal ===== */
.contact-logo{display:block;width:min(13.75rem,60%);height:auto;margin:0 0 1.375rem}
.about-head h2{font-size:clamp(1.6rem,4.6vw,2.4rem);margin-bottom:0.5rem}
.about-row{display:flex;align-items:flex-start;gap:1.25rem;margin-top:0.875rem}
.about-row .about-logo{flex:none;width:5.75rem;margin:0.25rem 0 0}
.about-row .body{margin-top:0}
@media(max-width:520px){.about-row{gap:0.875rem}.about-row .about-logo{width:4rem}}
@media(min-width:900px){.about{grid-template-columns:1.5fr .8fr;gap:2.5rem}}

/* ===== Formulaire de contact : plus compact ===== */
#contactForm{gap:0.6875rem;padding:1.25rem 1.25rem;border-radius:1.375rem}
#contactForm .field label{font-size:.82rem;margin-bottom:0.25rem}
#contactForm .field input,#contactForm .field textarea{padding:0.5625rem 0.75rem;font-size:.95rem;border-radius:0.625rem;border-width:1px}
#contactForm .field textarea{min-height:5.25rem}
#contactForm .btn-lg{padding:0.75rem 1.375rem;font-size:1rem}
#contactForm .check{font-size:.8rem;gap:0.625rem}
#contactForm .micro{font-size:.75rem}
#contactForm .err{font-size:.76rem;margin-top:0.25rem}
#contactForm>*{grid-column:1/-1}
@media(min-width:980px),(min-width:480px) and (max-width:759px){
  #contactForm{grid-template-columns:1fr 1fr}
  #contactForm>.field.half{grid-column:auto}
}

/* Méthode : icônes seules, sans fond ni contour, en rose du thème */
.step .svc-ico{width:auto;height:auto;background:none;box-shadow:none;border-radius:0}
.step .svc-ico::after{display:none}
.step .svc-ico svg{width:2rem;height:2rem;stroke:var(--mag);stroke-width:1.6}
.step:hover .svc-ico svg{stroke:var(--mag)}
.step-top{display:flex;align-items:center;gap:0.625rem;padding-right:1.625rem}
.step-top .svc-ico{flex:none;display:inline-flex}
.step-top h3{margin:0;font-size:1.02rem;line-height:1.2}
.step{gap:0.5rem}
@media(max-width:560px){.step-n{display:none}.step-top{padding-right:0}}

/* Pourquoi Lylium : icônes stylées */
.why-ico{display:inline-grid;place-items:center;width:2.875rem;height:2.875rem;border-radius:0.875rem;background:var(--grad);box-shadow:0 0.75rem 1.625rem -0.625rem rgba(79,70,229,.6);transition:transform .5s var(--ease)}
.why-ico svg{width:1.5rem;height:1.5rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why:hover .why-ico{transform:rotate(-8deg) scale(1.08)}
.why h3{margin-top:0.875rem}

/* Pourquoi Lylium : pastille ronde dans l'angle, en partie débordante */
.why-ico{position:absolute;top:-2.125rem;right:-2.125rem;width:6.5rem;height:6.5rem;border-radius:50%;place-items:end start;padding:0 0 1.625rem 1.6875rem;box-shadow:0 1rem 2.125rem -0.875rem rgba(79,70,229,.6);transition:transform .6s var(--ease)}
.why-ico svg{width:1.625rem;height:1.625rem}
.why:hover .why-ico{transform:scale(1.14) rotate(-10deg)}
.why h3{margin-top:0;padding-right:3.625rem}
.why p{padding-right:0.5rem}
.why p{padding-right:2.75rem}
.fut-hint{margin:0;font-size:.85rem;color:rgba(255,255,255,.72);text-align:center}
.futur-form:has(input[value=audit]:checked) .h-futur,.futur-form:not(:has(input[value=audit]:checked)) .h-audit{display:none}

/* ===== Notre méthode : scène pilotée par le scroll (entrée échelonnée, pause, sortie, puis « Nos réalisations » recouvre) ===== */
.m-hold{display:none}
html.mscroll .m-hold{display:block;height:55vh}
html.mscroll #methode{position:sticky;top:var(--stick,0px);z-index:0;min-height:100vh;display:flex;align-items:center}
html.mscroll #methode>.wrap{width:100%}
html.mscroll #methode~section,html.mscroll .site-footer{position:relative;z-index:1}
html.mscroll #realisations{border-radius:2.125rem 2.125rem 0 0;box-shadow:0 -2.125rem 4.375rem -1.75rem rgba(10,19,48,.38)}
html.mscroll #methode .sec-head{opacity:calc(var(--in,1)*(1 - var(--out,0)));transform:translate3d(0,calc((1 - var(--in,1))*3.75rem - var(--out,0)*5.625rem),0) scale(calc(.94 + .06*var(--in,1)));will-change:transform,opacity}
html.mscroll #methode .step{--tf:translate3d(calc(var(--k,1)*var(--out,0)*8.125rem - var(--k,1)*(1 - var(--in,1))*2.5rem),calc((1 - var(--in,1))*6.875rem - var(--out,0)*6.875rem),0) rotate(calc(var(--k,1)*(var(--out,0) - (1 - var(--in,1)))*7deg)) scale(calc(.8 + .2*var(--in,1) - .12*var(--out,0)));opacity:calc(var(--in,1)*(1 - var(--out,0)));transform:var(--tf);transition:box-shadow .3s,border-color .3s;will-change:transform,opacity}
html.mscroll #methode .step:hover{transform:var(--tf)}

/* ===== Globe réseau + scène du hero + visuel À propos ===== */
.g-zone{position:relative;overflow:clip}
.globe{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.globe canvas{display:block}
/* gabarit mesuré par le JS : globe décalé à droite, 1/4 du diamètre masqué par le bord de l'écran */
.g-slot{--W:min(88vw,32.5rem);position:absolute;pointer-events:none;width:var(--W);aspect-ratio:1;right:calc(var(--W)/-4);top:5%}
.hero-scene{display:none;position:absolute;z-index:3;pointer-events:none;opacity:calc(1 - var(--gt,0)*1.6)}
@media(min-width:900px){
  .g-slot{--W:min(46vw,43.75rem,86vh);top:50%;translate:0 -50%}
  .hero-scene{display:block;width:min(43vw,38.75rem);aspect-ratio:620/520;right:max(2.2vw,calc((100vw - 87.5rem)/2));top:53%;translate:0 -50%}
  .hs-dev{position:absolute;inset:0;transform:translate3d(calc(var(--gt,0)*-4.375rem),0,0)}
}
.hs-grp{position:absolute;inset:0;scale:.93;animation:hsFloat 9s ease-in-out infinite}
@keyframes hsFloat{50%{translate:0 -0.5625rem}}
/* moniteur moderne : dalle fine, pied, socle */
.hs-mon{position:absolute;left:9%;top:10%;width:80%}
.hs-screen{position:relative;width:100%;aspect-ratio:16/9.6;border-radius:1.125rem;border:0.4375rem solid #0e1a3e;background:#0e1a3e;box-shadow:0 0 0 1px rgba(160,225,255,.4),0 0 2.125rem rgba(9,228,252,.22),0 1.875rem 3.75rem -1.125rem rgba(0,0,0,.65);overflow:hidden}
.hs-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 30%)}
.hs-cam{display:none}
.hs-neck{width:9%;height:2.75rem;margin:0 auto;background:#0e1a3e;box-shadow:inset 1px 0 0 rgba(160,225,255,.3),inset -1px 0 0 rgba(160,225,255,.3)}
.hs-base{width:30%;height:0.5rem;margin:0 auto;border-radius:0.1875rem 0.1875rem 0.5rem 0.5rem;background:#0e1a3e;box-shadow:0 0 0 1px rgba(160,225,255,.4),0 0 1.375rem rgba(9,228,252,.2),0 1rem 1.375rem -0.375rem rgba(0,0,0,.6)}
.hs-shots{position:relative;height:100%;min-height:0}
.hs-screen{display:flex;flex-direction:column}
.hs-screen .hs-shots{flex:1;height:auto}
.hs-bar,.hs-pbar{flex:none;display:flex;align-items:center;gap:.28rem;background:rgba(232,238,248,.9)}
.hs-bar{padding:.32rem .55rem}
.hs-bar i{width:.4rem;height:.4rem;border-radius:50%;background:#c9d3e6}
.hs-pbar{padding:.62rem .4rem .22rem}
.hs-url{position:relative;flex:1;display:block;height:.95rem;margin-left:.3rem;background:#fff;border-radius:6rem;overflow:hidden;font-weight:400}
.hs-pbar .hs-url{margin-left:0;height:.8rem}
.hs-url span{position:absolute;inset:0;display:flex;align-items:center;padding:0 .5rem;font:.52rem/1 var(--f-mono);color:var(--muted);opacity:0;white-space:nowrap;animation:hsFade 30s infinite}
.hs-pbar .hs-url span{justify-content:center;font-size:.46rem;padding:0 .3rem}
.hs-url span:nth-child(1){animation-delay:0s}.hs-url span:nth-child(2){animation-delay:-25s}.hs-url span:nth-child(3){animation-delay:-20s}.hs-url span:nth-child(4){animation-delay:-15s}.hs-url span:nth-child(5){animation-delay:-10s}.hs-url span:nth-child(6){animation-delay:-5s}
.hs-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;animation:hsFade 30s infinite}
.hs-shots img:nth-child(1){animation-delay:0s}.hs-shots img:nth-child(2){animation-delay:-25s}.hs-shots img:nth-child(3){animation-delay:-20s}.hs-shots img:nth-child(4){animation-delay:-15s}.hs-shots img:nth-child(5){animation-delay:-10s}.hs-shots img:nth-child(6){animation-delay:-5s}
@keyframes hsFade{0%{opacity:0}2%{opacity:1}15%{opacity:1}17.5%{opacity:0}100%{opacity:0}}
.hs-shots::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 38%);pointer-events:none}
/* téléphone et assistant IA collés à l'écran : un seul objet */
.hs-phone{position:absolute;right:2%;bottom:15%;width:18.5%;border-radius:1.375rem;border:0.3125rem solid #0e1a3e;background:#0e1a3e;box-shadow:0 0 0 1px rgba(160,225,255,.4),0 0 1.875rem rgba(9,228,252,.25),0 1.5rem 2.75rem -0.625rem rgba(0,0,0,.7);overflow:hidden;transform:rotate(4deg)}
.hs-phone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 36%)}
.hs-phone .hs-shots{border-radius:0;overflow:hidden;height:auto;aspect-ratio:1080/2090}   /* ratio des captures : rien n'est coupé sur les bords */
.hs-notch{position:absolute;left:50%;top:0.3125rem;width:32%;height:0.375rem;border-radius:0.375rem;background:#0e1a3e;box-shadow:0 0 0 1px rgba(160,225,255,.3);transform:translateX(-50%);z-index:2}
.hs-bot{position:absolute;left:3%;bottom:27%;display:flex;align-items:center;gap:0.5625rem;padding:0.5rem 0.8125rem 0.5rem 0.5rem;border-radius:1.125rem;background:rgba(14,26,62,.86);border:1px solid rgba(160,225,255,.4);backdrop-filter:blur(0.625rem);-webkit-backdrop-filter:blur(0.625rem);box-shadow:0 1rem 2.5rem -0.625rem rgba(0,0,0,.65),0 0 1.75rem rgba(9,228,252,.22)}
.hs-av{flex:none;width:2.625rem;height:2.625rem;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 0 1.25rem rgba(9,228,252,.55)}
.hs-av svg{width:1.6875rem;height:1.6875rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.hs-av .f{fill:#fff;stroke:none}
.hs-msg{display:grid;gap:0.375rem;width:5.75rem}
.hs-msg b{display:block;height:0.4375rem;border-radius:0.3125rem;background:rgba(255,255,255,.55)}
.hs-msg b.s{width:62%;background:rgba(9,228,252,.6)}
.hs-msg em{display:flex;gap:0.25rem;font-style:normal;margin-top:1px}
.hs-msg em i{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--cyan);animation:hsDot 1.2s ease-in-out infinite}
.hs-msg em i:nth-child(2){animation-delay:.18s}.hs-msg em i:nth-child(3){animation-delay:.36s}
@keyframes hsDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-0.25rem)}}
/* tags autour de l'objet */
.hs-tag{position:absolute;display:flex;align-items:center;justify-content:center;width:3.875rem;height:3.875rem;border-radius:50%;font:700 .88rem/1 var(--f-head);letter-spacing:.06em;text-indent:.06em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.04);border:1px solid rgba(170,230,255,.2);backdrop-filter:blur(0.375rem);-webkit-backdrop-filter:blur(0.375rem);box-shadow:inset 0 0 0.875rem rgba(9,228,252,.06);animation:hsFloat 7s ease-in-out infinite}
.hs-ico svg{display:block;width:1.625rem;height:1.625rem;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.hs-ico.t5 svg{stroke:#ff5fd3}
.hs-tag.t1{left:3%;top:-2%;animation-delay:-1s}.hs-tag.t2{right:22%;top:-5%;width:3.5rem;height:3.5rem;animation-delay:-3s}.hs-tag.t3{right:-2%;top:22%;width:3.75rem;height:3.75rem;animation-delay:-5s}
.hs-tag.t5{right:6%;bottom:-1%;width:3.625rem;height:3.625rem;animation-delay:-4s}.hs-tag.t6{left:27%;bottom:-3%;width:3.5rem;height:3.5rem;animation-delay:-6s}

/* À propos : emplacement du globe (le globe lui-même est dessiné par js/globe.js) */
.about-visual{position:relative;width:100%;max-width:16.75rem;aspect-ratio:1;margin:0.5rem auto 0;display:grid;place-items:center}
.av-logo{position:relative;width:34%;height:auto;opacity:clamp(0,calc((var(--gt,0) - .55)*3),1)}
@media(min-width:900px){.about-visual{margin:0 0.875rem 0 auto}}
@media all{
  html.rm .hs-grp,.hs-tag{animation:none}
  html.rm .glitch::before{animation-duration:4.5s!important;animation-iteration-count:infinite!important}
  html.rm .glitch::after{animation-duration:4.5s!important;animation-iteration-count:infinite!important}
  html.rm .caret{animation-duration:1s!important;animation-iteration-count:infinite!important}
  html.rm .hs-url span{animation-duration:30s!important;animation-iteration-count:infinite!important}
  html.rm .hs-shots img{animation-duration:30s!important;animation-iteration-count:infinite!important}
}

/* filtre sur les captures : moins flashées, plus intégrées au thème */
.hs-shots img{filter:brightness(.87) saturate(.86) contrast(.96)}
.hs-shots::after{background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 30%),linear-gradient(180deg,rgba(10,19,48,.06),rgba(10,19,48,.18))}

/* À propos : anneaux d'icônes autour du globe */
.about-visual svg.orb{max-width:none;position:absolute;left:50%;top:50%;width:190%;height:190%;margin:-95% 0 0 -95%;overflow:visible;pointer-events:none;z-index:4;opacity:0}
.orb .ic circle:nth-child(2){fill:#fff;stroke:rgba(10,19,48,.07);stroke-width:.01}

.btn:disabled,.btn[aria-disabled=true]{background:#d6dae6!important;color:#7b8499!important;box-shadow:none!important;transform:none!important;cursor:not-allowed;filter:grayscale(1)}

@media(max-width:699px){.about-visual{max-width:14.125rem}}   /* mobile : globe d'À propos un peu plus petit */

/* grands écrans (24" et +) : tout le site grandit proportionnellement (les tailles sont en rem) */
@media (min-width:1600px){html{font-size:clamp(16px,calc(16px + (100vw - 1600px) * .0125),34px)}}

/* réseaux sociaux : pastilles rondes réutilisables (Facebook aujourd'hui, Instagram et LinkedIn plus tard) */
.social{display:inline-flex;align-items:center;gap:0.625rem;flex-wrap:wrap}
.soc{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:0 0.5rem 1.25rem -0.5rem rgba(10,19,48,.3);transition:transform .35s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s}
.soc svg{width:1.4rem;height:1.4rem}
.soc:hover,.soc:focus-visible{transform:translateY(-3px) scale(1.07);color:#fff;border-color:transparent;background:#1877f2;box-shadow:0 0.75rem 1.75rem -0.5rem rgba(24,119,242,.55)}
.soc[data-soc=instagram]:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.soc[data-soc=linkedin]:hover{background:#0a66c2}
.follow{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;margin-top:1.125rem;font-weight:600;color:var(--navy)}
.foot-links a.soc{display:grid;width:2.5rem;height:2.5rem;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);box-shadow:none}
.foot-links a.soc:hover{color:#fff;background:#1877f2}
.foot-links a.soc[data-soc=instagram]:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.foot-links a.soc[data-soc=linkedin]:hover{background:#0a66c2}
.nav-social{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-top:0.375rem;padding:0.75rem 1rem 0.125rem;border-top:1px solid var(--line);font-weight:600;color:var(--navy)}
.nav .social a.soc{padding:0;background:var(--soft);box-shadow:none}
.nav .social a.soc:hover{background:#1877f2;color:#fff}
@media (min-width:980px){.nav-social{display:none}}
.follow-c{justify-content:center;margin-top:1.5rem}

/* offre : slider (domaine + hébergement / première proposition) */
.offer-sec{padding:2rem 0 0.5rem}
.offer{position:relative;max-width:none;margin:0 auto;padding:1.25rem 1.25rem 3.25rem;border-radius:1.5rem;color:#fff;overflow:hidden;background:radial-gradient(24rem 12rem at 100% 0,rgba(9,228,252,.22),transparent 70%),radial-gradient(20rem 12rem at 0 100%,rgba(211,35,168,.22),transparent 70%),linear-gradient(150deg,#0a1330,#111d45);box-shadow:0 1.5rem 3rem -1.5rem rgba(10,19,48,.55)}
.offer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,rgba(9,228,252,.9),rgba(79,70,229,.5),rgba(211,35,168,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.offer-track{display:grid}
.offer-slide{grid-area:1/1;display:grid;gap:1rem;align-items:center;opacity:0;visibility:hidden;transform:translateX(1.5rem);transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
.offer-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease}
.offer-ico{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(160,225,255,.35)}
.offer-ico svg{width:1.75rem;height:1.75rem;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.offer .kicker{color:var(--cyan);margin:0 0 0.375rem;font-size:.8rem}
.offer h2,.offer h3{font-size:clamp(1.15rem,4.2vw,1.45rem);line-height:1.15;color:#fff;margin:0 0 0.5rem}
.offer p{color:rgba(255,255,255,.82);margin:0;font-size:.95rem}
.offer-pts{list-style:none;display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;margin:0.75rem 0 0;padding:0;font-weight:600;font-size:.85rem}
.offer-pts li{display:inline-flex;align-items:center;gap:0.5rem}
.offer-pts li::before{content:"";width:.9rem;height:.9rem;border-radius:50%;background:var(--grad);flex:none;box-shadow:0 0 .75rem rgba(9,228,252,.5)}
.offer-act{display:grid;gap:0.5rem;justify-items:start}
.offer-act .btn{padding:.7rem 1.4rem;font-size:.95rem}
.offer-more{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px;font-size:.85rem}
.offer-more:hover{color:var(--cyan)}
.offer-nav{position:absolute;left:0;right:0;bottom:.875rem;display:flex;justify-content:center;align-items:center;gap:.75rem}
.offer-arr{width:1.875rem;height:1.875rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
.offer-arr:hover{border-color:var(--cyan);color:var(--cyan)}
.offer-dots{display:flex;gap:.5rem}
.offer-dots button{width:.625rem;height:.625rem;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.offer-dots button.is-on{width:1.5rem;border-radius:.4rem;background:var(--grad)}
@media (min-width:900px){.offer{padding:1.5rem 2rem 3.25rem}.offer-slide{grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem}.offer-act{justify-items:center}.offer h2,.offer h3{white-space:nowrap}.offer-act .btn{white-space:nowrap}}
@media (min-width:900px) and (max-width:1100px){.offer h2,.offer h3{white-space:normal}}