/* =====================================================================
   Flux Dysign — design system v5
   Layout : nav pilule flottante, sections centrées sur 1240px, bento, grandes typos larges.
   ===================================================================== */
:root{
  --bg:#02040A;            /* noir */
  --bg-2:#050A18;          /* bleu nuit très sombre */
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(160,185,255,.10);
  --line-2:rgba(160,185,255,.20);
  --text:#EEF2FF;
  --mute:#8B95B7;
  --dim:#56607F;
  --blue:#3B6CFF;          /* bleu électrique */
  --cyan:#5CD6FF;          /* cyan */
  --ice:#A9C4FF;
  --night:#0B1640;         /* bleu nuit */
  --ok:#40DCA5; --err:#FF6B81;
  --grad:linear-gradient(100deg,#A9C4FF 0%,#5C8DFF 38%,#5CD6FF 100%);
  --f-disp:"Archivo","Arial Black",system-ui,sans-serif;
  --f-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(18px,4vw,48px); --max:1240px; --r:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}
::selection{background:rgba(59,108,255,.4)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-stretch:115%;font-weight:700;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{margin:0}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.out{color:transparent;-webkit-text-stroke:1.2px rgba(169,196,255,.55)}
.lead{font-size:clamp(16px,1.3vw,18.5px);color:var(--mute);max-width:58ch;line-height:1.65}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.tag b{font-weight:400;color:var(--dim)}
.sec{padding-block:clamp(80px,10vw,130px);position:relative;scroll-margin-top:40px}
.head{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,60px)}
.head h2{font-size:clamp(36px,5.2vw,72px)}
.head.split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:30px}
@media (max-width:860px){.head.split{grid-template-columns:1fr}}
.head .lead{justify-self:start}

/* fond : grain + lueur qui suit la souris + barre de progression */
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(59,108,255,.10),transparent 60%);transition:opacity .4s;opacity:0}
@media (hover:hover){.glow{opacity:1}}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:90}
main,footer,header{position:relative;z-index:1}

/* boutons */
.btn{--h:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 24px;border-radius:999px;font-weight:500;font-size:15px;border:0;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn-w{background:var(--text);color:#03060F}
.btn-w:hover{box-shadow:0 0 0 6px rgba(169,196,255,.12),0 18px 50px -12px rgba(92,141,255,.7)}
.btn-b{background:linear-gradient(135deg,#4A7BFF,#2C55E8 55%,#2A8BE8);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 34px -10px rgba(59,108,255,.9)}
.btn-b:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 6px rgba(59,108,255,.15),0 18px 50px -10px rgba(59,108,255,1)}
.btn-g{background:var(--surface);border:1px solid var(--line-2);color:var(--text);backdrop-filter:blur(10px)}
.btn-g:hover{background:var(--surface-2);border-color:rgba(169,196,255,.35)}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-sm{--h:40px;padding:0 16px;font-size:14px}

/* carte à bord lumineux */
.gb{position:relative;border-radius:var(--r);background:linear-gradient(180deg,rgba(18,30,72,.45),rgba(5,10,24,.75));isolation:isolate}
.gb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(169,196,255,.35),rgba(169,196,255,.06) 35%,rgba(169,196,255,.03) 65%,rgba(92,214,255,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.gb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--x,50%) var(--y,-30%),rgba(92,141,255,.16),transparent 55%);opacity:0;transition:opacity .4s;z-index:-1}
.gb:hover::after{opacity:1}

/* ===== nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) 0;pointer-events:none;display:flex;justify-content:center}
.nav .bar{pointer-events:auto;width:100%;max-width:1080px;display:flex;align-items:center;justify-content:space-between;gap:14px;height:62px;padding:0 8px 0 18px;border-radius:999px;background:rgba(5,10,24,.55);border:1px solid var(--line);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);transition:background .35s,box-shadow .35s}
.nav.on .bar{background:rgba(5,10,24,.82);box-shadow:0 20px 60px -30px #000}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-stretch:115%;font-weight:700;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.logo .mk{width:30px;height:30px;flex:none}
.logo span{opacity:.55;font-weight:400}
.menu{display:flex;gap:2px;font-size:14px;color:var(--mute);position:relative}
.menu a{position:relative;padding:9px 15px;border-radius:999px;transition:color .25s,background .25s}
.menu a:hover{color:var(--text);background:var(--surface-2)}
.menu a[aria-current=page]{color:var(--text);background:rgba(59,108,255,.16);box-shadow:inset 0 0 0 1px rgba(92,141,255,.35)}
.nav .right{display:flex;align-items:center;gap:8px}
.nav .btn{--h:46px;padding:0 20px;font-size:14px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);position:relative;cursor:pointer}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:14px;right:14px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger::before{top:17px}.burger span{top:22px}.burger::after{top:27px}
.burger[aria-expanded=true]::before{transform:translateY(5px) rotate(45deg)}.burger[aria-expanded=true] span{opacity:0}.burger[aria-expanded=true]::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:900px){.menu{display:none}.burger{display:block}.nav .right>.btn{display:none}}
.sheet{position:fixed;inset:0;z-index:55;background:rgba(2,4,10,.97);backdrop-filter:blur(16px);padding:calc(env(safe-area-inset-top,0px) + 110px) var(--gut) 40px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.sheet a{font-family:var(--f-disp);font-stretch:115%;font-size:clamp(30px,8vw,44px);font-weight:700;letter-spacing:-.04em;padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.sheet a small{font-family:var(--f-mono);font-size:12px;color:var(--dim);font-weight:400;letter-spacing:.08em}
.sheet .btn{margin-top:26px;font-family:var(--f-sans);font-size:17px;--h:58px;border:0;justify-content:center;letter-spacing:0}
body.lock{overflow:hidden}

/* ===== héros accueil ===== */
.hero{position:relative;min-height:min(1000px,100svh);padding-block:150px 0;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center}
.aurora{position:absolute;inset:-20% -10% 20%;z-index:-3;filter:blur(70px);opacity:.9;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:55%;height:60%;left:5%;top:5%;background:radial-gradient(circle,rgba(43,82,230,.55),transparent 65%)}
.aurora i:nth-child(2){width:45%;height:50%;right:5%;top:0;background:radial-gradient(circle,rgba(92,214,255,.28),transparent 65%);animation-duration:22s;animation-delay:-6s}
.aurora i:nth-child(3){width:60%;height:55%;left:22%;top:30%;background:radial-gradient(circle,rgba(11,22,64,.95),transparent 70%);animation-duration:26s}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.08)}100%{transform:translate(-5%,2%) scale(.95)}}
.hero .gridbg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(160,185,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(160,185,255,.06) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%)}
#gl{position:absolute;left:0;right:0;bottom:0;height:62%;width:100%;z-index:-1;display:block}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:0;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 6px 0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);backdrop-filter:blur(10px);font-size:13.5px;color:#C9D4F4}
.pill b{font-weight:500;height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(59,108,255,.22);color:#D6E2FF;font-size:12.5px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(64,220,165,.15)}
.hero h1{font-size:clamp(46px,8.6vw,132px);font-weight:800;line-height:.92;letter-spacing:-.05em;margin-top:26px;max-width:12ch}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;animation:rise 1.1s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{margin:26px auto 0;max-width:54ch;animation:fade 1s .35s both}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px;animation:fade 1s .5s both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .space{flex:1;min-height:clamp(260px,38vh,420px)}

/* bandeau défilant */
.strip{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.strip .t{display:flex;width:max-content;animation:mq 45s linear infinite}
.strip span{display:flex;align-items:center;gap:44px;padding-right:44px;font-family:var(--f-disp);font-stretch:115%;font-weight:600;font-size:22px;letter-spacing:-.02em;color:#6F7BA3;white-space:nowrap}
.strip span::after{content:"✦";font-size:14px;color:var(--blue)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== bento services (accueil) ===== */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento>*{min-width:0}
.bx{padding:30px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .4s var(--ease)}
.bx:hover{transform:translateY(-4px)}
.bx .n{font-family:var(--f-mono);font-size:12px;color:var(--dim);letter-spacing:.08em}
.bx h3{font-size:clamp(26px,2.6vw,36px)}
.bx p{color:var(--mute);font-size:15px;max-width:44ch}
.bx .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:18px}
.bx .go{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);transition:background .3s,transform .4s var(--ease)}
.bx:hover .go{background:var(--text);color:#03060F;transform:rotate(-45deg)}
.b1{grid-column:span 7;grid-row:span 2;min-height:440px}
.b2{grid-column:span 5}.b3{grid-column:span 5}
.b4{grid-column:span 6}.b5{grid-column:span 6}
@media (max-width:960px){.b1,.b2,.b3,.b4,.b5{grid-column:1/-1;grid-row:auto;min-height:0}}
.b1 .vis{position:relative;flex:1;min-height:220px;margin:6px -30px -30px;overflow:hidden}
.b1 .vis .scr{position:absolute;left:12%;right:-8%;top:16px;bottom:-30px;border-radius:16px 16px 0 0;overflow:hidden;background:#F4F6FB;color:#0E1530;box-shadow:0 40px 80px -30px #000;transform:perspective(1200px) rotateX(10deg) rotateY(-10deg);transform-origin:left top;transition:transform .8s var(--ease)}
.b1:hover .vis .scr{transform:perspective(1200px) rotateX(4deg) rotateY(-4deg) translateY(-8px)}
.scr .top{height:30px;background:#E6EAF3;display:flex;align-items:center;gap:6px;padding:0 12px}
.scr .top i{width:9px;height:9px;border-radius:50%;background:#C6CEDF;display:block}
.scr .top em{margin-left:10px;font-family:var(--f-mono);font-style:normal;font-size:10px;color:#7A86A6;background:#fff;border-radius:6px;padding:2px 10px}
.scr .pg{padding:22px 26px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.scr .nv{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:#56627F}
.scr .nv b{color:#0E1530;font-size:13px}
.scr h4{font-size:28px;letter-spacing:-.04em;line-height:1;color:#0E1530}
.scr h4 em{font-style:normal;color:#2F5BE0}
.scr .ln{height:7px;border-radius:4px;background:#DDE3F0;margin-top:9px}
.scr .bt{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;background:#0E1530;color:#fff;border-radius:99px;padding:7px 14px}
.scr .ph{aspect-ratio:1;border-radius:14px;background:linear-gradient(150deg,#A9C1FF,#2F5BE0 60%,#0B1A55)}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(59,108,255,.25),rgba(59,108,255,.06));border:1px solid rgba(169,196,255,.2);color:var(--ice)}

/* prix */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.price .pf{font-size:12.5px;color:var(--mute)}
.price .pa{font-family:var(--f-disp);font-stretch:110%;font-size:24px;font-weight:700;letter-spacing:-.03em}
.price .pu{font-size:13px;color:var(--mute)}

/* chiffres / process court (accueil) */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.flow{grid-template-columns:1fr}}
.flow div{padding:28px 24px 0 0;display:grid;gap:10px;align-content:start;position:relative}
.flow div::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.flow b{font-family:var(--f-mono);font-weight:400;font-size:12px;color:var(--ice);letter-spacing:.08em}
.flow h3{font-size:24px}
.flow p{color:var(--mute);font-size:14.5px}

/* ===== en-tête des pages intérieures ===== */
.phero{position:relative;padding-block:180px 70px;overflow:hidden;isolation:isolate}
.phero .aurora{inset:-40% -10% 10%;opacity:.7}
.phero .gridbg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(160,185,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(160,185,255,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(70% 70% at 30% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 30% 20%,#000,transparent 75%)}
.phero h1{font-size:clamp(46px,7.4vw,112px);font-weight:800;letter-spacing:-.05em;line-height:.92;max-width:13ch;margin-top:22px}
.phero .lead{margin-top:26px}
.crumbs{font-family:var(--f-mono);font-size:12px;color:var(--dim);letter-spacing:.06em;display:flex;gap:8px;align-items:center}
.crumbs a:hover{color:var(--text)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.jump a{height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#C9D4F4;background:var(--surface);transition:all .25s}
.jump a:hover{border-color:var(--line-2);color:var(--text);background:var(--surface-2)}
.jump a b{font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--cyan)}

/* ===== offres détaillées ===== */
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);padding-block:clamp(60px,8vw,96px);border-top:1px solid var(--line);scroll-margin-top:90px}
@media (max-width:900px){.offer{grid-template-columns:1fr}}
.offer .side{position:sticky;top:110px;align-self:start;display:grid;gap:18px}
@media (max-width:900px){.offer .side{position:static}}
.offer .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.offer h2{font-size:clamp(36px,4.4vw,58px)}
.offer .tg{color:var(--mute);font-size:17px;max-width:42ch}
.facts2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:6px}
.facts2>div{background:var(--bg);padding:16px 18px;display:grid;gap:4px}
.facts2 small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.facts2 b{font-weight:500;font-size:16px}
.offer .side .btn{justify-self:start}
.offer .body{display:grid;gap:30px;min-width:0}
.offer h3,.mini-t{font-family:var(--f-mono);font-size:12px;font-weight:400;font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.incl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
@media (max-width:620px){.incl{grid-template-columns:1fr}}
.incl li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:#D6DDF5}
.incl li::before,.chk::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:rgba(59,108,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%235CD6FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.for{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.for span{font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:#C9D4F4;background:var(--surface)}
.tip{display:flex;gap:14px;padding:18px 20px;border-radius:18px;background:linear-gradient(90deg,rgba(59,108,255,.12),rgba(59,108,255,.02));border:1px solid rgba(169,196,255,.16);font-size:15px;color:#C9D4F4}
.tip svg{flex:none;color:var(--cyan);margin-top:2px}

/* comparatif */
.tablewrap{overflow-x:auto;border-radius:var(--r)}
table.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:#D6DDF5}
.cmp thead th{font-weight:500;font-size:16px;vertical-align:bottom;padding-top:24px;font-family:var(--f-disp);font-stretch:110%;letter-spacing:-.02em}
.cmp thead th small{display:block;font-family:var(--f-mono);font-stretch:100%;font-size:11px;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;font-weight:400;margin-bottom:4px}
.cmp thead .price{justify-content:center;margin-top:8px}.cmp thead .price .pa{font-size:18px}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:rgba(255,255,255,.015)}
.cmp .y{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(92,214,255,.6)}
.cmp .o{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);letter-spacing:.06em}.cmp .n{color:var(--dim)}
.cmp col.hl{background:rgba(59,108,255,.06)}

/* options, garanties */
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.opts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.opt b{font-weight:500;font-size:16px}
.opt p{color:var(--mute);font-size:14px}
.opt .op{font-family:var(--f-mono);font-size:13px;color:var(--cyan);margin-top:6px}
.legal-note{font-size:13px;color:var(--dim);margin-top:18px}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards4{grid-template-columns:1fr}}
.cards4>div{padding:26px;display:grid;gap:12px;align-content:start;min-width:0}
.cards4 b{font-family:var(--f-disp);font-stretch:110%;font-weight:600;font-size:19px;letter-spacing:-.02em}
.cards4 p{color:var(--mute);font-size:14.5px}
.big-n{font-family:var(--f-disp);font-stretch:115%;font-weight:800;font-size:56px;letter-spacing:-.05em;line-height:1}

/* étapes (studio) */
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:30px;padding:32px;align-items:start}
@media (max-width:860px){.step{grid-template-columns:1fr;gap:14px}}
.step .num{font-family:var(--f-disp);font-stretch:115%;font-weight:800;font-size:64px;line-height:.9;letter-spacing:-.05em}
.step h3{font-size:30px}
.step p{color:var(--mute);margin-top:10px}
.step .del{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.step .del span{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:#C2CCEA;background:var(--surface)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,90px)}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:18px;font-weight:500;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary .pm{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .35s var(--ease),background .3s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary .pm{transform:rotate(45deg);background:rgba(59,108,255,.2)}
details p{padding:0 0 26px;color:var(--mute);max-width:62ch}

/* ===== réalisations ===== */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filters button{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--mute);font-size:14px;cursor:pointer;transition:all .25s}
.filters button:hover{color:var(--text);border-color:var(--line-2)}
.filters button[aria-pressed=true]{background:var(--text);color:#03060F;border-color:var(--text)}
.filters button span{font-family:var(--f-mono);font-size:11px;opacity:.6;margin-left:6px}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.works.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.works.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.works,.works.three{grid-template-columns:1fr}}
.work{display:grid;gap:16px;min-width:0;align-content:start;color:inherit}
.work .shot{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#07102A;max-width:100%;transition:border-color .3s,box-shadow .5s,transform .5s var(--ease)}
.work:hover .shot{border-color:var(--line-2);box-shadow:0 40px 90px -40px rgba(59,108,255,.6);transform:translateY(-4px)}
.work .shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.2s var(--ease)}
.work:hover .shot img{transform:scale(1.04)}
.work .ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 80% at 30% 20%,rgba(59,108,255,.45),transparent 60%),radial-gradient(50% 60% at 90% 90%,rgba(92,214,255,.2),transparent 60%),#06102A;font-family:var(--f-disp);font-stretch:120%;font-weight:800;font-size:clamp(40px,5vw,70px);letter-spacing:-.05em;color:rgba(238,242,255,.9)}
.work .go{position:absolute;right:14px;bottom:14px;height:38px;padding:0 16px;border-radius:999px;background:var(--text);color:#03060F;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;opacity:0;transform:translateY(8px);transition:all .4s var(--ease)}
.work:hover .go,.work:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.work .go{opacity:1;transform:none}}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.work h3{font-size:24px}
.work .cat{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.work p{color:var(--mute);font-size:15px;margin-top:-6px}
.work .host{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.sample{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(255,190,90,.14);color:#FFC97A;border:1px solid rgba(255,190,90,.3)}
.empty-state{padding:60px 30px;text-align:center;display:grid;gap:14px;justify-items:center}
.empty-state p{color:var(--mute)}

/* ===== vidéos ===== */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.videos.one{grid-template-columns:minmax(0,1fr)}.videos.one .frame{aspect-ratio:21/9}
.videos.two{grid-template-columns:1fr 1fr}
@media (max-width:960px){.videos{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.videos,.videos.two{grid-template-columns:1fr}.videos.one .frame{aspect-ratio:16/9}}
.vid{display:grid;gap:14px;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.vid .frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#050A18;max-width:100%}
.vid .frame video,.vid .frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease),filter .4s}
.vid:hover .frame video,.vid:hover .frame img{transform:scale(1.04);filter:brightness(.75)}
.vid .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(2,4,10,.75))}
.vid .play{position:absolute;left:50%;top:50%;z-index:2;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);transition:transform .4s var(--ease),background .3s}
.vid:hover .play{transform:scale(1.1);background:var(--blue)}
.vid .dur{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--f-mono);font-size:12px;padding:3px 8px;border-radius:6px;background:rgba(2,4,10,.7)}
.vid h3{font-size:22px}
.vid p{color:var(--mute);font-size:15px;margin-top:-6px}
.lightbox{width:min(1100px,calc(100% - 24px));max-height:none;padding:0;border:1px solid var(--line-2);background:#000;border-radius:20px;overflow:hidden;color:var(--text)}
.lightbox::backdrop{background:rgba(2,4,10,.85);backdrop-filter:blur(8px)}
.lightbox .lb{position:relative;aspect-ratio:16/9;background:#000;max-width:100%}
.lightbox .lb video,.lightbox .lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.lightbox .x{position:absolute;top:10px;right:10px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.55);color:#fff;font-size:20px;cursor:pointer}
.lightbox .cap{padding:14px 18px;font-size:15px;color:var(--mute);background:var(--bg-2)}
.lightbox .cap b{color:var(--text);font-weight:500}

/* ===== bandeau CTA ===== */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:clamp(40px,7vw,96px) clamp(26px,6vw,80px);text-align:center;display:grid;justify-items:center;gap:22px;isolation:isolate}
.cta .aurora{inset:-30%;opacity:.85;filter:blur(60px)}
.cta::before{z-index:2}
.cta h2{font-size:clamp(40px,6.6vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.95;max-width:13ch}
.cta p{color:#C2CCEA;max-width:52ch}
.cta .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.cta .mail{font-size:14px;color:var(--mute)}
.cta .mail b{color:var(--text);font-weight:500;user-select:all}

/* ===== devis ===== */
.dv{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(24px,3vw,40px);align-items:start;padding-bottom:clamp(80px,10vw,130px)}
@media (max-width:980px){.dv{grid-template-columns:1fr}}
.summary{position:sticky;top:100px;display:grid;gap:16px}
@media (max-width:980px){.summary{position:static}}
.sumcard{padding:24px}
.sumrows div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.sumrows div:last-child{border-bottom:0}
.sumrows span{color:var(--mute)}
.sumrows b{font-weight:500;text-align:right}
.est{margin-top:16px;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(59,108,255,.22),rgba(92,214,255,.06));border:1px solid rgba(169,196,255,.25)}
.est small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.est .v{font-family:var(--f-disp);font-stretch:115%;font-size:38px;font-weight:800;letter-spacing:-.04em;margin-top:4px}
.est p{font-size:12.5px;color:var(--mute);margin-top:6px}
.mailbox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 16px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);flex-wrap:wrap}
.mailbox small{display:block;font-size:11px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.mailbox b{font-weight:500;font-size:15.5px;word-break:break-all;user-select:all}
.assure{display:grid;gap:12px;font-size:14.5px;color:#C2CCEA}
.assure div{display:flex;gap:12px;align-items:flex-start}
.assure svg{flex:none;margin-top:3px;color:var(--cyan)}
.wiz{overflow:hidden}
.wiz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.wiz-head .st{font-family:var(--f-mono);font-size:12px;color:var(--mute);letter-spacing:.06em}
.prog{display:flex;gap:6px}
.prog i{width:28px;height:4px;border-radius:2px;background:var(--line-2);transition:background .4s}
.prog i.on{background:var(--grad)}
.wiz-body{padding:clamp(24px,3vw,34px)}
.pane{display:grid;gap:22px}
.pane h3{font-size:28px}
.pane .hint{color:var(--mute);font-size:14.5px;margin-top:-10px}
.typecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.typecards{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.typecards{grid-template-columns:1fr}}
.tc{position:relative}
.tc input,.chip input{position:absolute;opacity:0;pointer-events:none}
.tc label{display:grid;gap:10px;padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(2,4,10,.5);cursor:pointer;height:100%;transition:border-color .25s,background .25s}
.tc label svg{color:var(--ice)}
.tc label b{font-weight:500;font-size:16px}
.tc label span{font-size:13px;color:var(--mute)}
.tc label:hover{border-color:var(--line-2)}
.tc input:checked+label{border-color:transparent;background:linear-gradient(135deg,rgba(59,108,255,.25),rgba(92,214,255,.06));box-shadow:inset 0 0 0 1.5px var(--blue)}
.tc input:focus-visible+label,.chip input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip label{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;cursor:pointer;transition:all .2s;background:rgba(2,4,10,.5)}
.chip input:checked+label{border-color:var(--blue);background:rgba(59,108,255,.2);color:#fff}
.chip label small{font-family:var(--f-mono);font-size:11px;color:var(--cyan);margin-left:8px}
.grp{display:grid;gap:10px}
.grp>.lab{font-size:14px;font-weight:500;color:#C9D4F4}
.grp>.lab em{color:var(--dim);font-style:normal;font-weight:400}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.f{display:grid;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:13.5px;font-weight:500;color:#C9D4F4}
.f label em{font-style:normal;color:var(--dim);font-weight:400}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:rgba(2,4,10,.6);border:1px solid var(--line);border-radius:14px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
textarea{min-height:130px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,108,255,.18)}
.f.bad input,.f.bad textarea{border-color:var(--err)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--mute)}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue);flex:none}
.consent a{color:var(--ice);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px clamp(22px,3vw,34px);border-top:1px solid var(--line);flex-wrap:wrap}
.wiz-foot .msg{font-size:14px;min-height:1.4em;flex:1 1 200px}
.wiz-foot .msg.err{color:var(--err)}
.wiz-foot .nav-b{display:flex;gap:10px;margin-left:auto}
.done{display:grid;justify-items:center;text-align:center;gap:16px;padding:40px 10px}
.done .ok{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(64,220,165,.1);border:1px solid rgba(64,220,165,.35);color:var(--ok);box-shadow:0 0 60px -10px rgba(64,220,165,.6)}
.done .tg2{font-family:var(--f-mono);font-size:12px;color:var(--ice);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px}

/* ===== footer ===== */
footer{border-top:1px solid var(--line);padding-block:70px calc(36px + env(safe-area-inset-bottom,0px));margin-top:20px}
.f-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:36px}
@media (max-width:800px){.f-top{grid-template-columns:1fr 1fr}.f-top>div:first-child{grid-column:1/-1}}
.f-top h5{margin:0 0 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:400}
.f-top ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:var(--mute)}
.f-top a:hover,.f-top button:hover{color:var(--text)}
.f-top button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-size:14.5px;text-align:left}
.f-top p{color:var(--mute);font-size:14.5px;max-width:34ch;margin-top:14px}
.wordmark{display:block;width:100%;height:auto;margin-top:60px}
.wordmark text{font-family:var(--f-disp);font-stretch:125%;font-weight:800;letter-spacing:-8px}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:26px;font-size:13px;color:var(--dim)}

/* modales */
dialog.dlg-legal{width:min(760px,calc(100% - 32px));max-height:min(80vh,820px);padding:0;border:1px solid var(--line-2);border-radius:24px;background:var(--bg-2);color:var(--text);box-shadow:0 60px 140px -40px #000}
dialog.dlg-legal::backdrop{background:rgba(2,4,10,.75);backdrop-filter:blur(6px)}
.dlg{display:grid;grid-template-rows:auto 1fr;max-height:min(80vh,820px)}
.dlg header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line)}
.dlg header h3{font-size:24px}
.dlg .x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--text)}
.dlg .ct{overflow:auto;padding:22px 26px 30px;font-size:14.5px;color:#C2CCEA;display:grid;gap:14px}
.dlg h4{font-size:16px;font-family:var(--f-sans);font-stretch:100%;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-top:8px}
.dlg .fill{color:var(--cyan);font-family:var(--f-mono);font-size:13px}

/* bouton devis collant (mobile) */
.mcta{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:50;display:none}
.mcta .btn{width:100%;--h:56px;box-shadow:0 20px 50px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22)}
@media (max-width:760px){.mcta{display:block;transform:translateY(150%);transition:transform .45s var(--ease)}.mcta.show{transform:none}}

/* 404 */
.nf{min-height:86vh;display:grid;place-items:center;text-align:center;padding-block:150px 80px}
.nf .big{font-family:var(--f-disp);font-stretch:125%;font-size:clamp(120px,26vw,300px);font-weight:800;letter-spacing:-.07em;line-height:.85}

/* apparition */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.pre{opacity:0;transform:translateY(34px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv.pre{opacity:1;transform:none}}

@media (max-width:560px){.b1 .vis{display:none}}

/* accueil épuré : 3 accès rapides */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.quick{grid-template-columns:1fr}}
.qk{display:flex;align-items:center;gap:18px;padding:22px 22px 22px 24px;transition:transform .4s var(--ease)}
.qk:hover{transform:translateY(-4px)}
.qk>div:nth-child(2){flex:1;min-width:0;display:grid;gap:6px}
.qk h3{font-size:22px}
.qk .price .pa{font-size:16px}.qk .price .pf{font-size:12px}
.qk .go{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);transition:background .3s,transform .4s var(--ease),color .3s}
.qk:hover .go{background:var(--text);color:#03060F;transform:rotate(-45deg)}
.more-l{margin-top:22px;text-align:center;font-size:14.5px;color:var(--mute)}
.more-l a:hover{color:var(--text)}

/* =====================================================================
   v6 — plus vivant : fond bleu nuit, couleurs par offre, lueurs, animations
   ===================================================================== */
:root{
  --bg:#040A1F; --bg-2:#071233;
  --violet:#A78BFA; --pink:#F472B6;
  --grad:linear-gradient(100deg,#8FB2FF 0%,#4D7CFF 30%,#A78BFA 62%,#22D3EE 100%);
}
body{background:
  radial-gradient(900px 700px at 0% 0%,rgba(77,124,255,.16),transparent 60%),
  radial-gradient(800px 700px at 100% 30%,rgba(167,139,250,.12),transparent 60%),
  radial-gradient(900px 800px at 30% 100%,rgba(34,211,238,.09),transparent 60%),
  var(--bg);background-attachment:fixed}
.g{background-size:220% 100%;animation:shine 8s ease-in-out infinite alternate}
@keyframes shine{from{background-position:0% 50%}to{background-position:100% 50%}}
.aurora i:nth-child(1){background:radial-gradient(circle,rgba(77,124,255,.7),transparent 65%)}
.aurora i:nth-child(2){background:radial-gradient(circle,rgba(167,139,250,.5),transparent 65%)}
.aurora i:nth-child(3){background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}
.aurora{opacity:1}

/* sphères brillantes autour du titre */
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none}
.orbs i{position:absolute;border-radius:50%;animation:bob 9s ease-in-out infinite;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.orbs .o1{width:110px;height:110px;left:8%;top:22%;background:radial-gradient(circle at 30% 28%,#fff 0%,#9DBBFF 12%,#4D7CFF 45%,#1B2E8A 100%)}
.orbs .o2{width:70px;height:70px;right:10%;top:18%;background:radial-gradient(circle at 30% 28%,#fff 0%,#D9CCFF 12%,#A78BFA 45%,#4B2E9E 100%);animation-delay:-3s;animation-duration:11s}
.orbs .o3{width:46px;height:46px;right:20%;top:52%;background:radial-gradient(circle at 30% 28%,#fff 0%,#B5F3FF 14%,#22D3EE 45%,#0E6A86 100%);animation-delay:-5s}
.orbs .o4{width:34px;height:34px;left:18%;top:58%;background:radial-gradient(circle at 30% 28%,#fff 0%,#FFD0BF 14%,#FF8A65 45%,#9A3A1D 100%);animation-delay:-1s;animation-duration:12s}
@keyframes bob{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-22px)}}
@media (max-width:760px){.orbs .o1{width:60px;height:60px;left:-20px;top:46%}.orbs .o2{width:40px;height:40px;right:-8px;top:31%}.orbs .o3,.orbs .o4{display:none}}

/* badge rond qui tourne */
.spin{position:absolute;right:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));top:clamp(320px,44vh,430px);width:118px;height:118px;display:grid;place-items:center;z-index:2;border-radius:50%;background:rgba(7,18,51,.6);backdrop-filter:blur(8px);border:1px solid var(--line-2);transition:transform .4s var(--ease)}
.spin:hover{transform:scale(1.06)}
.spin svg{position:absolute;inset:0;width:100%;height:100%;animation:rot 16s linear infinite}
.spin text{font-family:var(--f-mono);font-size:9.6px;letter-spacing:.18em;fill:#C9D6FF}
.spin span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:20px;font-weight:600}
@keyframes rot{to{transform:rotate(360deg)}}
@media (max-width:900px){.spin{display:none}}

/* boutons plus éclatants */
.btn-b{background:linear-gradient(120deg,#4D7CFF,#7C6CFF 50%,#22B8E8);background-size:160% 100%;transition:background-position .6s var(--ease),transform .3s var(--ease),box-shadow .3s}
.btn-b:hover{background-position:100% 0}
.btn-shine{overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.6s ease-in-out infinite}
.btn-w.btn-shine::after{background:linear-gradient(100deg,transparent,rgba(77,124,255,.35),transparent)}
@keyframes sweep{0%,55%{left:-60%}85%,100%{left:130%}}
.pill i{background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.18),0 0 14px #34D399}
.pill b{background:linear-gradient(120deg,rgba(77,124,255,.35),rgba(167,139,250,.35))}

/* couleur propre à chaque offre (--c) */
[style*="--c"] .ico{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 45%,transparent),color-mix(in srgb,var(--c) 10%,transparent));border-color:color-mix(in srgb,var(--c) 45%,transparent);color:#fff;box-shadow:0 10px 30px -10px var(--c)}
.qk,.bx{--c:var(--blue)}
.qk::after,.bx::after{background:radial-gradient(420px circle at var(--x,50%) var(--y,-30%),color-mix(in srgb,var(--c) 30%,transparent),transparent 55%)}
.qk:hover,.bx:hover{box-shadow:0 30px 70px -35px var(--c)}
.qk:hover .go,.bx:hover .go{background:var(--c);color:#fff;border-color:transparent}
.qmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.qmeta .dl{font-size:12.5px;color:#C9D6FF;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.offer .k{color:var(--c)}
.offer h2{background:linear-gradient(100deg,#fff 30%,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.offer .facts2>div{background:color-mix(in srgb,var(--c) 6%,var(--bg))}
.offer .incl li::before{background-color:color-mix(in srgb,var(--c) 28%,transparent)}
.offer .tip{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.offer .tip svg{color:var(--c)}
.offer .btn-b{background:linear-gradient(120deg,var(--c),color-mix(in srgb,var(--c) 55%,#4D7CFF));box-shadow:0 12px 34px -12px var(--c)}
.tc label svg{color:var(--c,var(--ice))}
.tc input:checked+label{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),transparent);box-shadow:inset 0 0 0 1.5px var(--c)}
.jump a b{color:var(--violet)}

/* cartes : un peu plus lumineuses */
.gb{background:linear-gradient(180deg,rgba(28,44,110,.42),rgba(8,16,44,.78))}
.cta .aurora i:nth-child(2){background:radial-gradient(circle,rgba(244,114,182,.28),transparent 65%)}
.cta{box-shadow:0 40px 120px -50px rgba(124,108,255,.6)}
.wordmark text{fill:url(#wm)}
.big-n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cards4>div:nth-child(1){--c:#4D7CFF}.cards4>div:nth-child(2){--c:#22D3EE}.cards4>div:nth-child(3){--c:#A78BFA}.cards4>div:nth-child(4){--c:#34D399}
.cards4>div{border-top:2px solid color-mix(in srgb,var(--c,#4D7CFF) 70%,transparent)}
.step:nth-child(2) .num{filter:hue-rotate(40deg)}.step:nth-child(3) .num{filter:hue-rotate(80deg)}.step:nth-child(4) .num{filter:hue-rotate(-60deg)}
.est{background:linear-gradient(135deg,rgba(77,124,255,.28),rgba(167,139,250,.18),rgba(34,211,238,.10))}
.prog i.on{background:linear-gradient(90deg,#4D7CFF,#A78BFA)}
.progress{background:linear-gradient(90deg,#4D7CFF,#A78BFA,#22D3EE)}
.filters button[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent}
.cmp .y{background:linear-gradient(135deg,#4D7CFF,#A78BFA)}
@supports not (color:color-mix(in srgb,red,blue)){[style*="--c"] .ico{background:rgba(77,124,255,.25)}}

/* ===== v7 — 3D ===== */
.c3d{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.phero .wrap{position:relative;z-index:1}
@media (max-width:900px){.phero .c3d{opacity:.55}}
.nf .c3d{z-index:-1;opacity:.9}
/* cartes inclinables en 3D */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .25s var(--ease),opacity 1s var(--ease),box-shadow .4s,border-color .3s}
.tilt.tilting{transition:transform .08s linear,box-shadow .4s}
.tilt .ico,.tilt h3,.tilt .go,.tilt .big-n,.tilt .num{transform:translateZ(36px)}
.tilt .price,.tilt .qmeta,.tilt b{transform:translateZ(22px)}
/* apparition en perspective */
.js .rv.pre{transform:perspective(1100px) translateY(46px) rotateX(16deg);transform-origin:50% 100%}
/* titres de section avec profondeur */
.head h2,.phero h1,.hero h1{text-shadow:0 1px 0 rgba(255,255,255,.04),0 18px 40px rgba(20,40,120,.45)}
.hero h1 .g,.phero h1 .g,.head h2 .g{text-shadow:none;filter:drop-shadow(0 10px 30px rgba(77,124,255,.35))}