/* =========================================================
   Cloud Studio v4 — feuille de styles
   Accueil resserré : hero · comparateur Web/IA · galerie ·
   automatisation fonctionnelle · tarifs sur le ciel · FAQ
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#08192B; --ink-2:#3F5166; --ink-3:#7B8A9B;
  --sky:#1E7FE8; --sky-deep:#0B57B5; --sky-pale:#EAF3FE; --glow:#62B0FF;
  --night:#070F22; --night-2:#0C1730;
  --paper:#FFFFFF; --soft:#F3F7FC;
  --line:rgba(8,25,43,.10); --line-soft:rgba(8,25,43,.06); --line-dark:rgba(255,255,255,.12);
  --green:#22B573; --purple:#8B6CF0;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --sh-sm:0 1px 2px rgba(8,25,43,.05),0 6px 18px rgba(8,25,43,.06);
  --sh-md:0 2px 4px rgba(8,25,43,.05),0 16px 40px rgba(8,25,43,.10);
  --sh-xl:0 6px 14px rgba(6,32,58,.08),0 40px 90px rgba(6,32,58,.24);
  --wrap:1200px;
  --ease:cubic-bezier(.22,.75,.28,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img,svg,picture{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; }
p,dl,dd,figure,blockquote,q{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:6px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }

/* ---------- Curseur ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; display:none; }
html.has-cursor .cursor{ display:block; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label{ cursor:none; }
.cursor-dot,.cursor-ring{ position:absolute; top:0; left:0; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:7px; height:7px; background:#fff; mix-blend-mode:difference; }
.cursor-ring{ width:38px; height:38px; border:1.5px solid rgba(255,255,255,.9); mix-blend-mode:difference; transition:width .35s var(--ease), height .35s var(--ease), opacity .3s, background .3s; }
html.cursor-hover .cursor-ring{ width:64px; height:64px; background:rgba(255,255,255,.18); }
html.cursor-down .cursor-ring{ width:26px; height:26px; }
html.cursor-drag .cursor-ring{ width:20px; height:20px; opacity:0; }

/* ---------- Typo ---------- */
.eyebrow{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky-deep); margin-bottom:18px; }
.eyebrow span{ font-family:var(--serif); font-size:15px; letter-spacing:0; opacity:.55; }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.5; }
.eyebrow-light{ color:var(--glow); }
.eyebrow-white{ color:#fff; }
.h-display{ font-family:var(--serif); font-weight:400; font-size:clamp(50px,7.6vw,108px); line-height:.98; letter-spacing:-.025em; }
.h-display em{ font-style:italic; }
.h-display-sm{ font-size:clamp(40px,5.4vw,72px); }
.h-sec{ font-family:var(--serif); font-size:clamp(38px,5vw,62px); line-height:1.02; letter-spacing:-.02em; }
.h-sec em{ font-style:italic; color:var(--sky-deep); }
.night .h-sec em, .contact .h-sec em{ color:var(--glow); }
.sec-head{ max-width:720px; margin:0 auto 64px; text-align:center; }
.sec-head-left{ margin-inline:0; text-align:left; max-width:760px; }
.sec-head .eyebrow{ justify-content:center; }
.sec-head-left .eyebrow, .sec-head-row .eyebrow{ justify-content:flex-start; }
.sec-head-row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; text-align:left; }
.sec-head-light{ color:#fff; }
.sec-head-light .h-sec em{ color:#fff; }
.sec-head-light .sec-sub{ color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(4,26,52,.3); }
.sec-head-light .h-sec{ text-shadow:0 2px 26px rgba(4,26,52,.25); }
.sec-sub{ margin-top:22px; font-size:17.5px; color:var(--ink-2); line-height:1.6; }
.night .sec-sub, .contact .sec-sub{ color:rgba(255,255,255,.72); }
.section{ padding:120px 0; }

.js [data-split] .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.js [data-split] .wi{ display:inline-block; will-change:transform; }
@media (prefers-reduced-motion:no-preference){
  .js [data-split]:not(.in) .wi{ transform:translateY(112%); }
  .js [data-split].in .wi{ transform:none; transition:transform .9s var(--ease-out) calc(var(--i,0) * 55ms); }
  .js [data-reveal]{ opacity:0; transform:translateY(30px); }
  .js [data-reveal].in{ opacity:1; transform:none; transition:opacity .8s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s); }
}

/* ---------- Boutons ---------- */
.btn{ --bg:var(--ink); --fg:#fff; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 24px; border-radius:999px; border:1px solid transparent; background:var(--bg); color:var(--fg); font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; transition:background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease); will-change:transform; }
.btn > span{ position:relative; z-index:1; }
.btn svg{ width:16px; height:16px; position:relative; z-index:1; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-lg{ padding:17px 30px; font-size:16.5px; }
.btn-block{ display:flex; width:100%; }
.btn-dark{ box-shadow:0 2px 6px rgba(8,25,43,.18); }
.btn-dark:hover{ --bg:#12314f; box-shadow:0 12px 28px rgba(8,25,43,.26); }
.btn-white{ --bg:#fff; --fg:var(--ink); box-shadow:0 2px 6px rgba(6,32,58,.16), 0 16px 40px rgba(6,32,58,.22); }
.btn-white:hover{ box-shadow:0 4px 10px rgba(6,32,58,.18), 0 24px 54px rgba(6,32,58,.3); }
.cursor-ico{ transform:rotate(-8deg); }
.btn-white:hover .cursor-ico{ transform:rotate(-8deg) translate(2px,-1px); }
.btn-glass{ --bg:rgba(255,255,255,.14); --fg:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-glass:hover{ --bg:rgba(255,255,255,.26); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ --bg:#fff; border-color:rgba(8,25,43,.24); box-shadow:var(--sh-sm); }

/* =========================================================
   NAV — capsule + menu
   ========================================================= */
.navwrap{ position:fixed; top:18px; left:0; right:0; z-index:100; display:flex; justify-content:center; padding:0 16px; transition:transform .55s var(--ease), top .4s var(--ease); pointer-events:none; }
.navwrap.is-hidden{ transform:translateY(-150%); }
.navwrap.is-scrolled{ top:12px; }
.capsule{ pointer-events:auto; display:flex; align-items:center; gap:8px; padding:9px 9px 9px 18px; border-radius:999px; border:1px solid; backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%); transition:background .45s var(--ease), border-color .45s, color .45s, box-shadow .45s, padding .45s var(--ease); }
.navwrap.is-scrolled .capsule{ padding:6px 6px 6px 16px; }
[data-nav-theme="sky"]  .capsule{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.38); color:#fff; box-shadow:0 10px 40px rgba(4,26,52,.14); }
[data-nav-theme="light"] .capsule{ background:rgba(255,255,255,.78); border-color:rgba(8,25,43,.09); color:var(--ink); box-shadow:0 8px 32px rgba(8,25,43,.10); }
[data-nav-theme="dark"]  .capsule{ background:rgba(12,23,48,.55); border-color:rgba(255,255,255,.14); color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.35); }
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.02em; font-size:17px; }
.brand-mark{ width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(160deg,#5CB0FF,#1E7FE8 62%,#0B57B5); box-shadow:0 2px 8px rgba(30,127,232,.4), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .4s var(--ease); }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.06); }
.brand-mark svg{ width:18px; height:18px; }
.brand-name i{ font-style:normal; font-weight:400; opacity:.62; }
.links{ position:relative; display:flex; align-items:center; margin:0 6px; }
.links li{ position:relative; z-index:1; }
.links a{ display:block; padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; opacity:.82; transition:opacity .25s; }
.links a:hover, .links a.is-active{ opacity:1; }
.links li.links-pill{ position:absolute; z-index:0; top:2px; bottom:2px; left:0; width:0; border-radius:999px; background:currentColor; opacity:0; transition:left .4s var(--ease-out), width .4s var(--ease-out), opacity .3s; }
.links.has-pill .links-pill{ opacity:.12; }
[data-nav-theme="light"] .links.has-pill .links-pill{ opacity:.07; }
.btn-nav{ padding:9px 16px 9px 18px; font-size:13.5px; }
[data-nav-theme="sky"] .btn-nav, [data-nav-theme="dark"] .btn-nav{ --bg:#fff; --fg:var(--ink); }
[data-nav-theme="light"] .btn-nav{ --bg:var(--ink); --fg:#fff; }
.burger{ display:none; width:38px; height:38px; border-radius:50%; border:1px solid currentColor; background:transparent; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:inherit; }
.burger span{ display:block; width:15px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease); }
.burger[aria-expanded="true"]{ color:#fff; border-color:rgba(255,255,255,.5); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }
.menu{ position:fixed; inset:0; z-index:90; color:#fff; visibility:hidden; opacity:0; pointer-events:none; clip-path:circle(0% at calc(100% - 48px) 40px); transition:clip-path .7s var(--ease-out), opacity .3s, visibility .7s; }
.menu.open{ visibility:visible; opacity:1; pointer-events:auto; clip-path:circle(150% at calc(100% - 48px) 40px); }
.menu-sky{ position:absolute; inset:0; background:var(--night) url("assets/sky-night-mobile.webp") center/cover; }
.menu-sky::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,15,34,.35), rgba(7,15,34,.7)); }
.menu-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; padding:100px 32px 40px; }
.menu-links li{ overflow:hidden; }
.menu-links a{ display:flex; align-items:baseline; gap:14px; padding:10px 0; font-family:var(--serif); font-size:clamp(38px,9vw,60px); line-height:1.05; letter-spacing:-.02em; transform:translateY(110%); transition:transform .8s var(--ease-out) calc(var(--i,0) * 60ms + .15s); }
.menu.open .menu-links a{ transform:none; }
.menu-links small{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; opacity:.55; }
.menu-foot{ margin-top:40px; display:flex; flex-direction:column; gap:18px; align-items:flex-start; opacity:0; transform:translateY(12px); transition:opacity .5s .5s, transform .6s var(--ease-out) .5s; }
.menu.open .menu-foot{ opacity:1; transform:none; }
.menu-mail{ font-size:15px; opacity:.75; border-bottom:1px solid rgba(255,255,255,.35); }

/* =========================================================
   CIEL & NUAGES
   ========================================================= */
.sky{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.sky picture, .sky img{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; object-position:50% 40%; will-change:transform; }
.sky-shade{ position:absolute; inset:0; background:radial-gradient(120% 70% at 50% 6%, rgba(3,32,66,.36), rgba(3,32,66,0) 60%), linear-gradient(to bottom, rgba(3,32,66,.16), rgba(3,32,66,0) 32%, rgba(255,255,255,0) 74%, rgba(255,255,255,.55) 92%, #fff 100%); }
.cloud{ position:absolute; pointer-events:none; will-change:transform; }
.cloud i{ position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,.25) 55%, rgba(255,255,255,0)); translate:calc(var(--mx,0) * var(--d)) calc(var(--my,0) * var(--d)); transition:translate .9s var(--ease-out); animation:drift var(--t,26s) ease-in-out infinite alternate; }
.cloud-a{ --d:.35; left:-6%; bottom:14%; width:52vw; height:26vw; }
.cloud-a i:nth-child(1){ left:0; top:20%; width:60%; height:70%; --t:28s; }
.cloud-a i:nth-child(2){ left:28%; top:0; width:50%; height:80%; --t:32s; animation-delay:-8s; }
.cloud-a i:nth-child(3){ left:50%; top:35%; width:46%; height:60%; --t:24s; animation-delay:-14s; opacity:.8; }
.cloud-b{ --d:.6; right:-8%; top:34%; width:46vw; height:22vw; }
.cloud-b i:nth-child(1){ left:10%; top:10%; width:60%; height:80%; --t:30s; animation-delay:-4s; }
.cloud-b i:nth-child(2){ left:45%; top:30%; width:52%; height:60%; --t:26s; animation-delay:-18s; opacity:.75; }
.cloud-c{ --d:.9; left:18%; bottom:-4%; width:70vw; height:20vw; opacity:.85; }
.cloud-c i:nth-child(1){ left:0; top:30%; width:45%; height:70%; --t:34s; animation-delay:-10s; }
.cloud-c i:nth-child(2){ left:30%; top:0; width:45%; height:90%; --t:29s; animation-delay:-2s; }
.cloud-c i:nth-child(3){ left:60%; top:25%; width:40%; height:70%; --t:31s; animation-delay:-20s; }
@keyframes drift{ from{ transform:translateX(-3%) } to{ transform:translateX(3%) } }
.stars{ position:absolute; inset:0; z-index:1; opacity:.8; pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 44% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 58% 30%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 70% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 84% 26%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 92% 14%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 6% 60%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 36% 66%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 78% 58%, #fff 50%, transparent 52%);
  animation:twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle{ from{ opacity:.45 } to{ opacity:.95 } }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(91,227,154,.6) } 70%{ box-shadow:0 0 0 9px rgba(91,227,154,0) } 100%{ box-shadow:0 0 0 0 rgba(91,227,154,0) } }
@keyframes bob{ from{ translate:0 0 } to{ translate:0 -10px } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; z-index:2; padding:176px 0 260px; color:#fff; isolation:isolate; overflow-x:clip; } /* la brume déborde à gauche/droite : coupée ici, jamais en bas */
.hero-content{ position:relative; z-index:2; text-align:center; }
.pill{ display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:13px; font-weight:500; color:#fff; text-shadow:0 1px 6px rgba(4,26,52,.25); }
.pill-dot{ width:7px; height:7px; border-radius:50%; background:#5BE39A; animation:ping 2.2s ease-out infinite; }
.hero .h-display{ margin-top:26px; text-shadow:0 2px 30px rgba(4,26,52,.22); }
.hero-sub{ margin:28px auto 0; max-width:640px; font-size:clamp(15.5px,1.5vw,18px); line-height:1.6; color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(4,26,52,.28); }
.hero-actions{ margin-top:38px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.hero-note{ margin-top:18px; font-size:13.5px; color:rgba(255,255,255,.82); text-shadow:0 1px 10px rgba(4,26,52,.3); }
@media (prefers-reduced-motion:no-preference){
  .js [data-hero]:where(:not([data-hero="title"]):not([data-hero="showroom"]):not([data-hero="phone"])){ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); }
  .js body.hero-in [data-hero]{ opacity:1; transform:none; }
  .js body.hero-in [data-hero="pill"]{ transition-delay:.1s; }
  .js body.hero-in [data-hero="sub"]{ transition-delay:.55s; }
  .js body.hero-in [data-hero="actions"]{ transition-delay:.7s; }
  .js body.hero-in [data-hero="note"]{ transition-delay:.85s; }
  /* showroom & téléphone : entrée via `translate` (compose avec les transforms 3D) */
  .js [data-hero="showroom"]{ opacity:0; translate:0 90px; transition:opacity 1.2s var(--ease-out) .5s, translate 1.5s var(--ease-out) .5s; }
  .js body.hero-in [data-hero="showroom"]{ opacity:1; translate:0 0; transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,0deg)); }
  .js [data-hero="phone"]{ opacity:0; translate:0 50px; transition:opacity .9s var(--ease-out) 1.4s, translate 1.1s var(--ease-out) 1.4s; }
  .js body.hero-in [data-hero="phone"]{ opacity:1; translate:0 0; transform:translateZ(160px) rotateY(-6deg); }
  .js body.hero-done [data-hero]:not([data-hero="showroom"]){ transition:none; }
  .js body.hero-done [data-hero="showroom"]{ transition:transform .6s var(--ease-out); }
}
/* ---------- Brume de transition (couches en parallaxe) ---------- */
.mist{ position:absolute; left:-12vw; right:-12vw; bottom:-150px; height:380px; z-index:4; pointer-events:none; }
.mist i{
  position:absolute; border-radius:50%; will-change:transform;
  background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,.35) 52%, rgba(255,255,255,0) 70%);
  animation:mdrift var(--t,32s) ease-in-out infinite alternate;
}
.mist .m1{ left:-8%; bottom:120px; width:66%; height:250px; --t:36s; opacity:.85; }
.mist .m2{ left:28%; bottom:70px; width:78%; height:300px; --t:29s; animation-delay:-9s; }
.mist .m3{ left:-18%; bottom:0; width:92%; height:300px; --t:41s; animation-delay:-18s; }
.mist .m4{ left:40%; bottom:-30px; width:80%; height:280px; --t:33s; animation-delay:-4s; }
@keyframes mdrift{ from{ translate:-3% 0 } to{ translate:3% 0 } }
.mist-dusk{ top:-190px; bottom:auto; height:360px; z-index:3; }
.mist-dusk i{ background:radial-gradient(ellipse at center, rgba(12,23,48,.98) 0%, rgba(12,23,48,.7) 32%, rgba(12,23,48,.22) 54%, rgba(12,23,48,0) 70%); }
.mist-dusk .m1{ bottom:auto; top:150px; opacity:.5; } .mist-dusk .m2{ bottom:auto; top:110px; opacity:.7; } .mist-dusk .m3{ bottom:auto; top:70px; } .mist-dusk .m4{ bottom:auto; top:40px; }

/* =========================================================
   DEUX MÉTIERS — deux chapitres (Web le jour, IA la nuit)
   ========================================================= */
.metiers{ position:relative; z-index:1; background:#fff; padding:130px 0 0; }
.metiers .sec-head{ margin-bottom:64px; }
.chapter{ display:grid; grid-template-columns:.85fr 1.25fr; gap:72px; align-items:start; padding-bottom:90px; }
.chapter-side{ position:sticky; top:96px; }
.panel{ position:relative; border-radius:28px; overflow:hidden; color:#fff; isolation:isolate; box-shadow:var(--sh-xl); }
.panel picture, .panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; z-index:-1; }
.panel::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(to bottom, rgba(3,32,66,.18), rgba(3,32,66,.6)); }
.panel-night{ background:radial-gradient(120% 80% at 80% 0%, #1A2D5C 0%, var(--night-2) 45%, var(--night) 100%); border:1px solid rgba(255,255,255,.1); }
.panel-night::before{ background:radial-gradient(1.4px 1.4px at 18% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 70% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 84% 40%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 36% 60%, #fff 50%, transparent 52%), linear-gradient(to bottom, rgba(7,15,34,0), rgba(7,15,34,.5)); }
.panel-in{ position:relative; z-index:1; padding:34px 34px 32px; display:flex; flex-direction:column; min-height:580px; }
.panel-label{ font-family:var(--serif); font-style:italic; font-size:92px; line-height:.88; letter-spacing:-.03em; text-shadow:0 4px 40px rgba(4,26,52,.35); }
.panel h3{ margin-top:auto; padding-top:44px; font-family:var(--serif); font-size:34px; line-height:1.06; letter-spacing:-.015em; text-shadow:0 2px 20px rgba(4,26,52,.3); }
.panel-in > p{ margin-top:12px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(4,26,52,.3); }
.panel-stats{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:18px; border-top:1px solid rgba(255,255,255,.28); }
.panel-stats dt{ font-family:var(--serif); font-size:27px; line-height:1; letter-spacing:-.01em; }
.panel-stats dd{ margin-top:5px; font-size:11.5px; line-height:1.3; color:rgba(255,255,255,.78); }
.panel-actions{ margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.panel-link{ font-size:14px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.5); }

.chapter-main .block{ padding:26px 0; border-top:1px solid var(--line); }
.chapter-main .block:first-child{ border-top:0; padding-top:0; }
.block h4{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.block > p{ font-size:16.5px; line-height:1.62; color:var(--ink-2); max-width:660px; }
.block > p b{ color:var(--ink); font-weight:600; }
.block > p + .flow{ margin-top:24px; }
.deliv li{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--line-soft); }
.deliv li:first-child{ border-top:0; padding-top:2px; }
.deliv span{ font-family:var(--serif); font-size:22px; color:var(--sky); line-height:1.2; }
.deliv b{ display:block; font-size:17.5px; font-weight:600; letter-spacing:-.01em; }
.deliv p{ margin-top:5px; font-size:14.8px; line-height:1.6; color:var(--ink-2); max-width:600px; }
.deliv em{ display:inline-block; margin-top:9px; font-style:normal; font-size:12.5px; font-weight:600; color:var(--sky-deep); background:var(--sky-pale); padding:4px 10px; border-radius:999px; }
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 18px; counter-reset:f; }
.flow li{ position:relative; padding:14px 0 6px; counter-increment:f; border-top:2px solid var(--line); }
.flow li::before{ content:""; position:absolute; top:-2px; left:0; width:34px; height:2px; background:var(--sky); }
.flow li::after{ content:counter(f,decimal-leading-zero); position:absolute; top:12px; right:0; font-family:var(--serif); font-size:14px; color:var(--ink-3); }
.flow b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; padding-right:26px; }
.flow small{ display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--ink-3); }
.formules{ border-top:1px solid var(--line); }
.formule{ display:grid; grid-template-columns:1fr auto 34px; gap:28px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); color:inherit; transition:padding-left .35s var(--ease); }
.formule:hover{ padding-left:8px; }
.formule > div > b{ font-family:var(--serif); font-size:25px; letter-spacing:-.01em; line-height:1.1; }
.formule p{ margin-top:4px; font-size:14px; line-height:1.55; color:var(--ink-2); max-width:520px; }
.f-price{ text-align:right; }
.f-price b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.f-price small{ display:block; margin-top:2px; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.f-arrow{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); position:relative; transition:background .3s, border-color .3s, transform .35s var(--ease); }
.f-arrow::before{ content:""; position:absolute; top:50%; left:50%; width:7px; height:7px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:translate(-60%,-50%) rotate(45deg); }
.formule:hover .f-arrow{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateX(4px); }
.nolist li{ position:relative; padding:9px 0 9px 26px; font-size:15px; color:var(--ink-2); border-top:1px solid var(--line-soft); }
.nolist li:first-child{ border-top:0; padding-top:0; }
.nolist li::before{ content:""; position:absolute; left:2px; top:calc(50% - 1px); width:12px; height:2px; background:var(--ink-3); border-radius:2px; }
.nolist li:first-child::before{ top:10px; }

/* chapitre IA : nuit */
.chapter-night{ position:relative; z-index:2; color:#fff; background:var(--night); border-radius:48px 48px 0 0; padding:110px 0 0; overflow-x:clip; } /* brume bleu nuit : coupée sur les côtés seulement */
.chapter-night .night-sky{ border-radius:48px 48px 0 0; overflow:hidden; }
.chapter-night .chapter{ position:relative; z-index:1; padding-bottom:70px; }
.chapter-night .block{ border-color:rgba(255,255,255,.12); }
.chapter-night .block h4{ color:rgba(255,255,255,.5); }
.chapter-night .block > p{ color:rgba(255,255,255,.78); } .chapter-night .block > p b{ color:#fff; }
.chapter-night .deliv li{ border-color:rgba(255,255,255,.08); }
.chapter-night .deliv span{ color:var(--glow); }
.chapter-night .deliv p{ color:rgba(255,255,255,.72); }
.chapter-night .deliv em{ color:#BFE0FF; background:rgba(98,176,255,.16); }
.chapter-night .flow li{ border-color:rgba(255,255,255,.16); } .chapter-night .flow li::before{ background:var(--glow); }
.chapter-night .flow small, .chapter-night .flow li::after{ color:rgba(255,255,255,.55); }
.chapter-night .formules, .chapter-night .formule{ border-color:rgba(255,255,255,.12); }
.chapter-night .formule p{ color:rgba(255,255,255,.7); }
.chapter-night .f-price small{ color:rgba(255,255,255,.55); }
.chapter-night .f-arrow{ border-color:rgba(255,255,255,.3); }
.chapter-night .formule:hover .f-arrow{ background:#fff; color:var(--ink); border-color:#fff; }
.chapter-night .nolist li{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.08); } .chapter-night .nolist li::before{ background:rgba(255,255,255,.5); }
.both{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:26px; padding-bottom:110px; }
.both::before{ content:""; position:absolute; left:28px; right:28px; top:0; height:1px; background:rgba(255,255,255,.14); }
.both p{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.78); max-width:720px; } .both p b{ color:#fff; font-weight:600; }
.both .btn{ flex:none; }

/* =========================================================
   RÉALISATIONS — mini-sites qui défilent
   ========================================================= */
.gallery{ position:relative; z-index:3; background:#fff; border-radius:48px 48px 0 0; margin-top:-48px; padding-top:120px; }
.gallery .sec-head{ margin-bottom:48px; }
.works{ display:grid; grid-template-columns:1fr 1fr; gap:40px 28px; }
.work{ display:block; color:inherit; }
.work-frame{ position:relative; height:400px; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#fff; box-shadow:var(--sh-sm); transition:box-shadow .45s var(--ease), transform .5s var(--ease); }
.work:hover .work-frame{ box-shadow:var(--sh-xl); transform:translateY(-4px); }
.site-chrome{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:10px 14px; background:#F7F9FC; border-bottom:1px solid var(--line-soft); }
.dots{ display:flex; gap:5px; } .dots i{ width:8px; height:8px; border-radius:50%; background:#DEE4EC; }
.url{ flex:1; text-align:center; font-size:11px; color:var(--ink-3); background:#fff; border:1px solid var(--line-soft); border-radius:6px; padding:3px 10px; }
.wp{ position:relative; background:var(--bg); color:var(--fg); font-family:var(--wpf,var(--sans)); padding:14px 22px 22px; transition:transform 1.2s var(--ease-out); will-change:transform; }
.work:hover .wp{ transform:translateY(calc(-100% + 361px)); transition:transform 3.2s cubic-bezier(.45,0,.2,1); }
.wp-nav{ display:flex; align-items:center; gap:14px; font-size:10.5px; color:var(--muted); font-family:var(--sans); }
.wp-nav b{ font-family:var(--wpf,var(--sans)); font-size:16px; color:var(--fg); letter-spacing:-.01em; font-weight:var(--wpw,400); } .wp-nav b i{ font-style:italic; }
.wp-nav em{ margin-left:auto; font-style:normal; font-size:10px; font-weight:600; color:var(--accent-fg); background:var(--accent); padding:6px 11px; border-radius:999px; white-space:nowrap; }
.wp-hero{ margin:14px -22px 0; padding:36px 22px 28px; background:var(--hero-bg,none); }
.wp-hero small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text,var(--accent)); font-weight:600; }
.wp-hero h4{ margin-top:8px; font-size:var(--h4,34px); line-height:.98; letter-spacing:-.02em; font-weight:var(--wpw,400); }
.wp-hero p{ margin-top:12px; font-family:var(--sans); font-size:11.5px; line-height:1.5; color:var(--muted); max-width:320px; }
.wp-btn{ display:inline-block; margin-top:16px; font-family:var(--sans); font-size:10.5px; font-weight:600; color:var(--accent-fg); background:var(--accent); padding:8px 14px; border-radius:999px; }
.wp-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 0; border-top:1px solid var(--wl); font-family:var(--sans); }
.wp-row b{ display:block; font-size:11px; font-weight:600; margin-bottom:3px; } .wp-row span{ font-size:10px; line-height:1.45; color:var(--muted); }
.ph{ display:block; height:72px; border-radius:8px; margin-bottom:8px; background:var(--ph,#eee); }
.ph-1{ --ph:linear-gradient(150deg,#3E8F5E,#1E5A3B); } .ph-2{ --ph:linear-gradient(150deg,#7DBE7A,#3E8F5E); } .ph-3{ --ph:linear-gradient(150deg,#2F7A4E,#0F3D2E); }
.ph-4{ --ph:linear-gradient(150deg,#CFE3F6,#8FB9E0); } .ph-5{ --ph:linear-gradient(150deg,#E8EFF7,#B9CFE6); } .ph-6{ --ph:linear-gradient(150deg,#9CC5EA,#4F8FCB); }
.wp-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 0; border-top:1px solid var(--wl); }
.wp-band b{ display:block; font-size:24px; line-height:1; letter-spacing:-.02em; font-weight:var(--wpw,400); } .wp-band span{ display:block; margin-top:4px; font-family:var(--sans); font-size:10px; color:var(--muted); }
.wp-cta{ margin-top:6px; padding:20px 22px; border-radius:12px; background:var(--cta-bg); color:var(--cta-fg); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wp-cta h5{ font-size:15px; line-height:1.2; letter-spacing:-.01em; font-weight:var(--wpw,400); }
.wp-cta .wp-btn{ margin:0; flex:none; background:var(--cta-btn,var(--accent)); color:var(--cta-btn-fg,var(--accent-fg)); }

.theme-lemaire{ --bg:#fff; --fg:#0B1F3A; --muted:#6B7A8C; --accent:#0B57B5; --accent-fg:#fff; --wl:rgba(11,31,58,.1); --wpf:var(--serif); --hero-bg:linear-gradient(180deg,#F1F6FD,#fff); --cta-bg:#0B1F3A; --cta-fg:#fff; --cta-btn:#fff; --cta-btn-fg:#0B1F3A; }
.theme-verte{ --bg:#0F3D2E; --fg:#F4F1E8; --muted:rgba(244,241,232,.62); --accent:#C8E87A; --accent-fg:#0F3D2E; --wl:rgba(244,241,232,.14); --wpf:var(--serif); --hero-bg:radial-gradient(90% 100% at 100% 0%, rgba(200,232,122,.18), transparent 60%); --cta-bg:#C8E87A; --cta-fg:#0F3D2E; --cta-btn:#0F3D2E; --cta-btn-fg:#F4F1E8; }
.theme-roux{ --bg:#F6F1E9; --fg:#2B1D14; --muted:#8A7566; --accent:#8B5A2B; --accent-fg:#fff; --wl:rgba(43,29,20,.12); --wpf:var(--serif); --hero-bg:linear-gradient(180deg,#EFE6D8,#F6F1E9); --cta-bg:#2B1D14; --cta-fg:#F6F1E9; --cta-btn:#F6F1E9; --cta-btn-fg:#2B1D14; }
.theme-nebula{ --bg:#0B0A1F; --fg:#fff; --muted:rgba(255,255,255,.55); --accent:#7B62E0; --accent-fg:#fff; --accent-text:#B9A6FF; --wl:rgba(255,255,255,.12); --wpf:var(--sans); --wpw:700; --h4:36px; --hero-bg:radial-gradient(70% 90% at 80% 0%, rgba(123,98,224,.45), transparent 60%); --cta-bg:linear-gradient(135deg,#7B62E0,#3E8BFF); --cta-fg:#fff; --cta-btn:#fff; --cta-btn-fg:#0B0A1F; }
.theme-nebula .wp-hero h4{ letter-spacing:-.035em; }
.theme-marine{ --bg:#fff; --fg:#0A2A4A; --muted:#6D8199; --accent:#1E7FE8; --accent-fg:#fff; --wl:rgba(10,42,74,.1); --wpf:var(--sans); --wpw:600; --h4:32px; --hero-bg:linear-gradient(180deg,#EAF3FE,#fff); --cta-bg:#EAF3FE; --cta-fg:#0A2A4A; --cta-btn:#1E7FE8; --cta-btn-fg:#fff; }
.theme-marine .wp-hero h4{ letter-spacing:-.03em; }
.theme-kairos{ --bg:#111; --fg:#fff; --muted:rgba(255,255,255,.5); --accent:#fff; --accent-fg:#111; --accent-text:rgba(255,255,255,.6); --wl:rgba(255,255,255,.14); --wpf:var(--sans); --wpw:700; --h4:44px; --cta-bg:#fff; --cta-fg:#111; --cta-btn:#111; --cta-btn-fg:#fff; }
.theme-kairos .wp-hero h4{ letter-spacing:-.045em; }

.work-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:18px 4px 0; }
.work-meta h3{ font-family:var(--serif); font-size:25px; letter-spacing:-.015em; line-height:1.05; }
.work-meta p{ margin-top:4px; font-size:13.5px; color:var(--ink-3); }
.work-meta b{ flex:none; font-size:12.5px; font-weight:600; color:var(--sky-deep); background:var(--sky-pale); padding:5px 11px; border-radius:999px; white-space:nowrap; }

/* — page portfolio — */
.page-hero{ position:relative; z-index:2; padding:170px 0 90px; color:#fff; isolation:isolate; }
.page-hero-inner{ position:relative; z-index:2; text-align:center; }
.page-hero .h-display{ margin-top:22px; text-shadow:0 2px 26px rgba(4,26,52,.25); }
.gallery-page{ padding-top:70px; }
.filters{ display:flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; width:max-content; max-width:100%; margin:0 auto 52px; background:var(--soft); }
.filters button{ padding:10px 18px; border:0; border-radius:999px; background:transparent; font-size:14px; font-weight:600; color:var(--ink-3); cursor:pointer; transition:background .3s, color .3s, box-shadow .3s; white-space:nowrap; }
.filters button small{ margin-left:6px; font-size:11px; font-weight:600; opacity:.7; }
.filters button[aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:var(--sh-sm); }
.works-page{ display:flex; flex-direction:column; gap:26px; }
/* chaque projet est une « scène » teintée par sa propre palette */
#lemaire{ --scene:#0B57B5; --scene-soft:#EAF3FE; --scene-glow:rgba(30,127,232,.2); }
#verte{ --scene:#1E5A3B; --scene-soft:#EAF5EC; --scene-glow:rgba(62,143,94,.24); }
#roux{ --scene:#8B5A2B; --scene-soft:#F6EFE5; --scene-glow:rgba(139,90,43,.22); }
#nebula{ --scene:#5D45C9; --scene-soft:#EFECFB; --scene-glow:rgba(123,98,224,.24); }
#marine{ --scene:#1E7FE8; --scene-soft:#EAF3FE; --scene-glow:rgba(30,127,232,.2); }
#kairos{ --scene:#111; --scene-soft:#F1F1F1; --scene-glow:rgba(17,17,17,.14); }
.work-full{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; padding:48px 56px; border-radius:32px; background:linear-gradient(135deg, var(--scene-soft,var(--soft)), #fff 72%); overflow:hidden; isolation:isolate; }
.work-full::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 0% 100%, var(--scene-glow,transparent), transparent 70%); pointer-events:none; }
.work-full:nth-child(even)::before{ background:radial-gradient(60% 80% at 100% 100%, var(--scene-glow,transparent), transparent 70%); }
.work-full:nth-child(even) .work-frame{ order:2; }
.work-full .work-frame{ height:440px; border-radius:16px; border-color:rgba(8,25,43,.08); box-shadow:0 30px 60px -22px rgba(8,25,43,.38), 0 2px 6px rgba(8,25,43,.08); transform:perspective(1400px) rotateY(6deg) rotateX(2deg); transition:transform .8s var(--ease-out), box-shadow .6s var(--ease); }
.work-full:nth-child(even) .work-frame{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.work-full:hover .work-frame{ transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); box-shadow:0 50px 90px -30px rgba(8,25,43,.5), 0 2px 6px rgba(8,25,43,.08); }
.work-full.is-hidden{ display:none; }
.work-num{ display:block; margin-bottom:14px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--scene,var(--sky-deep)); }
.work-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.work-tags span{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--scene,var(--sky-deep)); background:rgba(255,255,255,.72); border:1px solid rgba(8,25,43,.08); padding:4px 10px; border-radius:999px; }
.work-detail h3{ margin-top:16px; font-family:var(--serif); font-size:40px; letter-spacing:-.015em; line-height:1; }
.work-sector{ margin-top:8px; font-size:14px; color:var(--ink-3); }
.work-text{ margin-top:16px; font-size:15px; line-height:1.6; color:var(--ink-2); } .work-text b{ color:var(--ink); font-weight:600; }
.work-metrics{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.work-metrics div{ padding:14px 16px 13px; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(8,25,43,.07); }
.work-metrics dt{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.work-metrics dd{ margin-top:6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--serif); font-size:32px; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.work-metrics s{ order:-1; font-family:var(--sans); font-size:13px; color:var(--ink-3); text-decoration:line-through; }
.work-detail q{ display:block; margin-top:18px; font-family:var(--serif); font-size:20px; line-height:1.3; color:var(--ink); quotes:"« " " »"; }
.work-detail cite{ display:block; margin-top:6px; font-style:normal; font-size:12.5px; color:var(--ink-3); }
.works-cta{ text-align:center; padding:72px 0 10px; }
.works-cta-title{ font-family:var(--serif); font-size:clamp(34px,4vw,52px); line-height:1.05; letter-spacing:-.02em; }
.works-cta-title em{ color:var(--sky); }
.works-cta-sub{ margin:12px auto 24px; max-width:460px; font-size:15.5px; color:var(--ink-2); }

/* =========================================================
   AUTOMATISATION — exemple fonctionnel (nuit)
   ========================================================= */
.night{ position:relative; z-index:2; color:#fff; padding:150px 0 130px; margin-top:-48px; border-radius:48px 48px 0 0; overflow:hidden; isolation:isolate; background:var(--night); }
.gallery + .night{ margin-top:0; }
.night-sky{ position:absolute; inset:0; z-index:-1; }
.night-sky picture, .night-sky img{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; object-position:50% 30%; opacity:.9; will-change:transform; }
.night-sky::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,15,34,.35), rgba(7,15,34,.55) 60%, var(--night) 100%); }
.auto .sec-head{ margin-bottom:52px; }
.auto .sec-sub{ max-width:540px; margin:16px auto 0; }

/* — la démo : téléphone du client + coulisses — */
.demo{ display:grid; grid-template-columns:380px 1fr; gap:64px; align-items:start; max-width:1060px; margin:0 auto; }

/* téléphone */
.phone{ position:relative; width:100%; max-width:380px; height:700px; margin:0 auto; display:flex; flex-direction:column; border-radius:46px; background:#0B1530; border:1px solid rgba(255,255,255,.16); box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 7px #040A19; overflow:hidden; }
.phone::before{ content:""; position:absolute; top:16px; left:50%; width:98px; height:28px; margin-left:-49px; border-radius:20px; background:#040A19; z-index:3; }
.phone-top{ display:flex; justify-content:space-between; align-items:center; padding:24px 30px 0; font-size:13px; font-weight:600; color:#fff; }
.phone-sig{ display:flex; gap:3px; align-items:flex-end; }
.phone-sig i{ width:3px; background:#fff; border-radius:1px; height:6px; opacity:.9; } .phone-sig i:nth-child(2){ height:9px } .phone-sig i:nth-child(3){ height:12px }
.phone-head{ display:flex; align-items:center; gap:10px; padding:16px 22px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.phone-head b{ display:block; font-size:14px; color:#fff; } .phone-head small{ display:block; font-size:11.5px; color:#8FE6B8; margin-top:1px; }
.ava-cs{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,#5CB0FF,#1E7FE8); font-size:12px; font-weight:700; color:#fff; }
.thread{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:22px 16px 10px; display:flex; flex-direction:column; gap:8px; scrollbar-width:none; mask-image:linear-gradient(to bottom, transparent, #000 22px); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22px); }
.thread::-webkit-scrollbar{ display:none; }
.bub{ max-width:84%; padding:10px 13px; border-radius:18px; font-size:13.5px; line-height:1.45; color:#fff; animation:bubIn .4s var(--ease-out) both; }
.bub-out{ align-self:flex-end; background:linear-gradient(150deg,#3B93F0,#1E7FE8); border-bottom-right-radius:6px; }
.bub-in{ align-self:flex-start; background:rgba(255,255,255,.1); border-bottom-left-radius:6px; }
.bub-sys{ align-self:center; max-width:100%; font-size:11px; color:rgba(255,255,255,.45); padding:4px 0; text-align:center; }
.bub time{ display:block; margin-top:4px; font-size:10.5px; opacity:.6; text-align:right; }
.typing{ display:inline-flex; gap:4px; align-items:center; height:16px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); animation:tdot 1.2s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes tdot{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
@keyframes bubIn{ from{ opacity:0; transform:translateY(8px) scale(.97) } }
.composer{ padding:10px 14px 18px; border-top:1px solid rgba(255,255,255,.08); }
.samples{ display:flex; gap:6px; margin-bottom:8px; overflow-x:auto; scrollbar-width:none; }
.samples::-webkit-scrollbar{ display:none; }
.samples button{ flex:none; padding:6px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.75); font:500 12px/1 var(--sans); cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.samples button:hover, .samples button.is-on{ background:#fff; color:var(--ink); border-color:#fff; }
.composer-row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
.composer input, .composer textarea{ width:100%; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; font:500 13px/1.4 var(--sans); }
.composer input::placeholder, .composer textarea::placeholder{ color:rgba(255,255,255,.38); }
.composer input:focus, .composer textarea:focus{ outline:none; border-color:var(--glow); background:rgba(255,255,255,.1); }
.composer-msg{ position:relative; }
.composer textarea{ display:block; resize:none; padding-right:50px; border-radius:16px; min-height:40px; max-height:84px; overflow-y:auto; scrollbar-width:none; }
.composer textarea::-webkit-scrollbar{ display:none; }
.send{ position:absolute; right:7px; bottom:7px; width:34px; height:34px; border-radius:50%; border:0; background:var(--sky); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s, transform .25s; }
.send:hover{ background:#fff; color:var(--ink); transform:scale(1.06); }
.send[disabled]{ opacity:.45; cursor:default; transform:none; }

/* coulisses */
.backstage{ position:relative; padding-top:8px; }
.bs-head{ display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }
.bs-title{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); padding-bottom:8px; }
.bs-title i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s; }
.is-running .bs-title i{ background:#5BE39A; animation:ping 1.6s ease-out infinite; }
.bs-clock{ font-family:var(--mono); font-size:34px; line-height:1; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; }
.bs-log{ display:flex; flex-direction:column; }
.bs-empty{ padding:30px 0; font-size:14px; color:rgba(255,255,255,.45); }
.ev{ display:grid; grid-template-columns:62px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); animation:fadeUp .5s var(--ease-out) both; }
.ev-t{ font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.45); padding-top:5px; }
.ev-b b{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#fff; }
.ev-ic{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; color:#fff; font-style:normal; }
.ev-ic svg{ width:13px; height:13px; }
.ev-msg .ev-ic{ background:linear-gradient(150deg,#5CB0FF,#1E7FE8); }
.ev-ia .ev-ic{ background:linear-gradient(150deg,#B79CFF,#7C5CF0); }
.ev-crm .ev-ic{ background:linear-gradient(150deg,#FFB26B,#E0713A); }
.ev-slack .ev-ic{ background:#5B2C5D; }
.ev-cal .ev-ic{ background:linear-gradient(150deg,#5BE39A,#1FA466); }
.ev-next .ev-ic{ background:rgba(255,255,255,.14); }
.ev p{ margin-top:6px; font-size:13px; line-height:1.5; color:rgba(255,255,255,.7); }
.ev p b{ display:inline; color:#fff; font-size:inherit; font-weight:600; }
.ev-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.ev-tags span{ font-size:12px; padding:4px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.88); animation:fadeUp .35s var(--ease-out) both; }
.ev-tags span em{ font-style:normal; color:rgba(255,255,255,.45); margin-right:3px; }
.ev-tags span.hot{ border-color:rgba(255,150,80,.55); color:#FFC49A; }
.ev-tags span.ok{ border-color:rgba(91,227,154,.45); color:#8FE6B8; }
.crm-row{ margin-top:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 16px; font-size:12.5px; }
.crm-row dt{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.crm-row dd{ color:#fff; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slack-line{ margin-top:8px !important; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.06); }
.bs-compare{ margin-top:18px; font-size:13px; line-height:1.5; color:rgba(255,255,255,.55); }
.bs-compare b{ color:#FFC49A; }

.auto-cta{ margin:48px auto 0; max-width:760px; display:none; align-items:center; justify-content:center; gap:14px 24px; flex-wrap:wrap; text-align:center; }
.auto-cta.is-on{ display:flex; animation:fadeUp .5s var(--ease-out) both; }
.auto-cta p{ font-size:16px; line-height:1.45; color:rgba(255,255,255,.8); } .auto-cta p b{ color:#fff; }
.auto-cta .btn{ flex:none; }

/* =========================================================
   TARIFS — formules qui flottent sur le ciel
   ========================================================= */
.prix{ position:relative; z-index:3; color:#fff; padding:150px 0 150px; margin-top:-48px; border-radius:48px 48px 0 0; overflow:hidden; isolation:isolate; }
.prix > .wrap{ position:relative; z-index:2; }
.sky-shade-prix{ background:radial-gradient(120% 70% at 50% 0%, rgba(3,32,66,.42), rgba(3,32,66,0) 60%), linear-gradient(to bottom, rgba(3,32,66,.22), rgba(3,32,66,0) 30%, rgba(3,32,66,0) 78%, rgba(3,32,66,.3) 100%); }
.prix .sec-head{ margin-bottom:70px; }
.prix-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.pcard{ position:relative; background:#fff; color:var(--ink); border-radius:28px; padding:30px 28px 30px; box-shadow:0 2px 6px rgba(4,26,52,.08), 0 30px 80px rgba(4,26,52,.28); animation:bob 7s ease-in-out infinite alternate; }
.pcard::after{ content:""; position:absolute; left:8%; right:8%; bottom:-28px; height:44px; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(18px); z-index:-1; }
.pcard:nth-child(1){ animation-delay:-2s; } .pcard:nth-child(2){ animation-delay:-5s; } .pcard:nth-child(3){ animation-delay:-1s; }
.pcard-hi{ margin-top:-22px; box-shadow:0 0 0 2px var(--sky), 0 40px 100px rgba(4,26,52,.36); }
.pflag{ position:absolute; top:-14px; left:50%; margin-left:-52px; width:104px; text-align:center; background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:6px 0; border-radius:999px; box-shadow:0 6px 16px rgba(8,25,43,.25); }
.pcloud{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--sky-pale); color:var(--sky); margin-bottom:18px; } .pcloud svg{ width:22px; height:22px; }
.pcard h3{ font-family:var(--serif); font-size:32px; letter-spacing:-.01em; line-height:1; }
.pfor{ margin-top:8px; font-size:14px; color:var(--ink-3); min-height:42px; line-height:1.45; }
.pprice{ margin:16px 0 20px; }
.pprice small{ display:block; font-size:12.5px; color:var(--ink-3); }
.pprice b{ display:block; font-size:42px; font-weight:600; letter-spacing:-.03em; line-height:1.1; } .pprice b i{ font-style:normal; font-size:16px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.pprice span{ display:block; margin-top:4px; font-size:12.5px; color:var(--ink-3); }
.plist{ margin-top:24px; border-top:1px solid var(--line); }
.plist li{ position:relative; padding:11px 0 11px 18px; border-bottom:1px solid var(--line-soft); font-size:14px; color:var(--ink-2); }
.plist li::before{ content:""; position:absolute; left:2px; top:19px; width:6px; height:6px; border-radius:50%; background:var(--sky); }
.audit-glass{ margin-top:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 28px; border-radius:20px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.audit-glass p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(4,26,52,.3); } .audit-glass b{ color:#fff; font-weight:600; }
.audit-glass .btn{ flex:none; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-sec{ position:relative; z-index:4; background:#fff; border-radius:48px 48px 0 0; margin-top:-48px; padding:120px 0 110px; }
.faq-wrap{ max-width:860px; }
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; gap:18px; font-size:18px; font-weight:500; letter-spacing:-.01em; transition:color .2s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--sky-deep); }
.faq summary i{ margin-left:auto; flex:none; position:relative; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); transition:background .3s, border-color .3s; }
.faq summary i::before,.faq summary i::after{ content:""; position:absolute; top:50%; left:50%; background:var(--ink-3); transform:translate(-50%,-50%); transition:transform .3s var(--ease), background .2s; }
.faq summary i::before{ width:12px; height:1.5px; } .faq summary i::after{ width:1.5px; height:12px; }
.faq details[open] summary{ color:var(--sky-deep); }
.faq details[open] summary i{ background:var(--ink); border-color:var(--ink); }
.faq details[open] summary i::before,.faq details[open] summary i::after{ background:#fff; }
.faq details[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details > div p{ padding:0 64px 26px 4px; font-size:15.5px; line-height:1.68; color:var(--ink-2); }
.faq details[open] > div p{ animation:fadeUp .4s var(--ease-out) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* =========================================================
   CONTACT (compact) + FOOTER
   ========================================================= */
.contact{ position:relative; z-index:2; background:var(--night); color:#fff; padding:110px 0 100px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.contact-direct{ margin-top:26px; font-size:14.5px; color:rgba(255,255,255,.7); }
.contact-direct a{ color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.4); }
.form{ background:#fff; color:var(--ink); border-radius:var(--r-xl); padding:32px 32px 26px; box-shadow:var(--sh-xl); display:flex; flex-direction:column; gap:15px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form label{ display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:600; letter-spacing:-.01em; }
.form input,.form select,.form textarea{ width:100%; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; font-size:14.5px; font-weight:400; transition:border-color .2s, box-shadow .2s; }
.form textarea{ resize:vertical; min-height:96px; }
.form input::placeholder,.form textarea::placeholder{ color:#A9B6C4; }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3.5px rgba(30,127,232,.14); }
.form-note{ font-size:12.5px; color:var(--ink-3); text-align:center; }
.form-note.ok{ color:var(--green); font-weight:600; } .form-note.err{ color:#D9503A; font-weight:600; }

.footer{ position:relative; background:var(--night); color:#fff; padding:70px 0 28px; overflow:hidden; border-top:1px solid rgba(255,255,255,.1); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.brand-light{ color:#fff; }
.footer-brand p{ margin-top:18px; max-width:320px; font-size:14.5px; color:rgba(255,255,255,.62); line-height:1.62; }
.footer-mail{ display:inline-block; margin-top:14px; color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.3); }
.footer nav{ display:flex; flex-direction:column; gap:11px; }
.footer h4{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; }
.footer nav a{ position:relative; width:fit-content; font-size:14.5px; color:rgba(255,255,255,.72); transition:color .2s; }
.footer nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.footer nav a:hover{ color:#fff; } .footer nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer-big{ margin-top:60px; font-family:var(--serif); font-size:clamp(64px,15.5vw,236px); line-height:.9; letter-spacing:-.04em; white-space:nowrap; color:rgba(255,255,255,.08); overflow:hidden; user-select:none; }
.footer-big .c{ display:inline-block; transition:transform 1s var(--ease-out) calc(var(--i,0) * 35ms); }
@media (prefers-reduced-motion:no-preference){ .js .footer-big:not(.in) .c{ transform:translateY(60%); } }
.footer-big .c.sp{ width:.22em; }
.footer-bottom{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.45); }
.footer-legal a{ margin-left:20px; transition:color .2s; } .footer-legal a:hover{ color:#fff; }

/* =========================================================
   CONVERSION : preuves, CTA de formule, étapes, barre collante
   ========================================================= */
.trust{ margin-top:20px; display:flex; justify-content:center; gap:8px 22px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(4,26,52,.3); }
.trust li{ position:relative; padding-left:18px; }
.trust li::before{ content:""; position:absolute; left:0; top:7px; width:9px; height:5px; border-left:1.8px solid #8FE6B8; border-bottom:1.8px solid #8FE6B8; transform:rotate(-45deg); }
.deliv-short li{ padding:11px 0; }
.deliv-short p{ margin-top:3px; font-size:14.5px; max-width:560px; }
.deliv-short em{ margin-top:7px; }
.formule{ grid-template-columns:1fr auto auto; }
.f-cta{ display:inline-flex; align-items:center; padding:9px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:600; white-space:nowrap; transition:background .3s, color .3s, border-color .3s, transform .35s var(--ease); }
.formule:hover .f-cta{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateX(3px); }
.chapter-night .f-cta{ border-color:rgba(255,255,255,.3); }
.chapter-night .formule:hover .f-cta{ background:#fff; color:var(--ink); border-color:#fff; }
.noline{ margin-top:16px; font-size:13px; color:var(--ink-3); }
.chapter-night .noline{ color:rgba(255,255,255,.5); }
.form-title{ font-family:var(--serif); font-size:26px; letter-spacing:-.01em; line-height:1.1; margin-bottom:2px; }
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:95;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 16px; border-radius:18px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); box-shadow:0 12px 40px rgba(8,25,43,.18);
  transform:translateY(120%); transition:transform .5s var(--ease-out);
}
.sticky-cta.show{ transform:none; }
.sticky-cta b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.sticky-cta small{ display:block; font-size:12px; color:var(--ink-3); }
.sticky-cta .btn{ padding:11px 18px; font-size:14px; flex:none; }
@media (max-width:940px){
  .sticky-cta{ display:flex; }
  body.has-sticky{ padding-bottom:0; }
}
@media (max-width:780px){
  .trust{ gap:6px 14px; font-size:12.5px; }
  .formule{ grid-template-columns:1fr; gap:8px; }
  .f-cta{ justify-self:start; }
  .auto-cta{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   LECTURE RAPIDE : grille de livrables, démo centrée, stepper
   ========================================================= */
.deliv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
.deliv-grid li{ padding:12px 0; border-top:1px solid var(--line-soft); }
.deliv-grid li:nth-child(-n+2){ border-top:0; padding-top:2px; }
.deliv-grid b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.deliv-grid span{ display:block; margin-top:2px; font-size:13px; color:var(--ink-3); }
.chapter-night .deliv-grid li{ border-color:rgba(255,255,255,.08); }
.chapter-night .deliv-grid span{ color:rgba(255,255,255,.55); }

@media (max-width:780px){
  .deliv-grid{ grid-template-columns:1fr; }
  .deliv-grid li:nth-child(2){ border-top:1px solid var(--line-soft); padding-top:12px; }
  .chapter-night .deliv-grid li:nth-child(2){ border-color:rgba(255,255,255,.08); }
}

/* =========================================================
   LOGO (SVG inline) + CARROUSEL 3D DES RÉALISATIONS
   ========================================================= */
/* le logo est le fichier fourni (PNG transparent) ; passé en blanc sur le ciel et la nuit */
.brand-img{ display:block; height:30px; width:auto; transition:filter .45s, transform .4s var(--ease); }
@media (max-width:780px){ .brand-img{ height:26px; } }
.brand:hover .brand-img{ transform:translateY(-1px); }
[data-nav-theme="sky"] .brand-img, [data-nav-theme="dark"] .brand-img{ filter:brightness(0) invert(1); }
.footer .brand-img{ height:30px; filter:brightness(0) invert(1); }

.cf{ position:relative; --cf-card:clamp(230px, 27vw, 380px); --cf-zoom:.6; --cf-vis:400px; margin-top:8px; }
.cf-frame{ overflow:hidden; padding:36px 0 46px; cursor:grab; outline:none; touch-action:pan-y; }
.cf-frame:active{ cursor:grabbing; }
.cf-frame:focus-visible{ box-shadow:inset 0 0 0 2px var(--sky); border-radius:12px; }
.cf-track{ position:relative; height:calc(var(--cf-card) * 1.22); transform-style:preserve-3d; user-select:none; -webkit-user-select:none; }
.cf-card{
  position:absolute; left:50%; top:0; width:var(--cf-card); height:calc(var(--cf-card) * 1.22);
  display:block; color:var(--ink); border-radius:18px; overflow:hidden; background:#fff; border:1px solid rgba(8,25,43,.14);
  /* pas de box-shadow : sur des cartes en 3D, Chrome la rend en rectangle net. L'ombre est au sol (.cf-floor). */
  will-change:transform, opacity;
}
.cf-floor{ position:absolute; left:50%; bottom:-16px; width:calc(var(--cf-card) * 1.6); height:44px; transform:translate(-50%,0) translateZ(-2px); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(8,25,43,.26) 0%, rgba(8,25,43,.1) 40%, rgba(8,25,43,0) 70%); }
.cf-shot{ width:560px; height:calc(100% / var(--cf-zoom)); transform:scale(var(--cf-zoom)); transform-origin:0 0; pointer-events:none; display:flex; flex-direction:column; }
.cf-shot .wp{ flex:1; }   /* le mini-site remplit la carte jusqu'en bas, plus de bande blanche */
.cf-shot .wp{ transition:transform 1.2s var(--ease-out); }
.cf-card.is-active:hover .cf-shot .wp{ transform:translateY(calc(-100% + var(--cf-vis))); transition:transform 3.4s cubic-bezier(.45,0,.2,1); }
.cf-btn{
  position:absolute; top:calc(36px + var(--cf-card) * .61); z-index:200; width:46px; height:46px; margin-top:-23px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; cursor:pointer; color:var(--ink); box-shadow:var(--sh-sm);
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.cf-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.06); }
.cf-btn svg{ width:18px; height:18px; }
.cf-prev{ left:max(16px, calc((100% - var(--wrap)) / 2 + 28px)); }
.cf-next{ right:max(16px, calc((100% - var(--wrap)) / 2 + 28px)); }
.cf-caption{ text-align:center; margin-top:-10px; min-height:96px; }
.cf-caption b{ display:block; font-family:var(--serif); font-size:28px; letter-spacing:-.015em; line-height:1.05; }
.cf-caption span{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3); }
.cf-caption em{ display:inline-block; margin-top:10px; font-style:normal; font-size:12.5px; font-weight:600; color:var(--sky-deep); background:var(--sky-pale); padding:5px 12px; border-radius:999px; }
.cf-caption a{ display:inline-block; margin:10px 0 0 10px; font-size:13px; font-weight:600; border-bottom:1px solid var(--line); transition:border-color .3s; }
.cf-caption a:hover{ border-color:var(--ink); }
.cf-caption.in{ animation:fadeUp .4s var(--ease-out) both; }
.cf-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.cf-dots button{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--ink); opacity:.22; cursor:pointer; transition:opacity .3s, transform .3s var(--ease); }
.cf-dots button:hover{ opacity:.5; }
.cf-dots button[aria-current="true"]{ opacity:1; transform:scale(1.3); }
@media (max-width:780px){
  .brand-cloud{ width:32px; height:21px; } .brand-word{ font-size:12.5px; }
  .cf{ --cf-card:min(250px, 66vw); }
  .cf-frame{ padding:24px 0 34px; }
  .cf-btn{ display:none; }
  .cf-caption b{ font-size:24px; }
}

/* =========================================================
   CONTACT — retour au jour, humain, créneau, preuves
   ========================================================= */
.contact{ position:relative; z-index:5; color:var(--ink); padding:130px 0 100px; margin-top:-48px; border-radius:48px 48px 0 0; overflow:hidden; isolation:isolate; background:var(--soft); }
.contact > .wrap{ position:relative; z-index:1; }
.contact .eyebrow{ color:var(--sky-deep); }
.contact-grid{ align-items:center; gap:72px; }
.contact .h-display{ margin-top:6px; font-size:clamp(34px,3.6vw,48px); color:var(--ink); }
.contact .h-display em{ color:var(--sky); }
.contact-sub{ margin-top:12px; max-width:480px; font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.sticker{ position:absolute; top:-46px; right:-34px; width:124px; height:124px; border-radius:50%; background:var(--sky); color:#fff; box-shadow:0 14px 34px rgba(26,124,245,.35); display:grid; place-items:center; transform:rotate(-8deg); }
.sticker > svg{ position:absolute; inset:0; width:100%; height:100%; }
.paper:hover .sticker > svg, .paper.is-live .sticker > svg{ animation:spin-slow 16s linear infinite; }
.sticker text{ font-family:var(--sans); font-size:10.6px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; fill:#fff; }
.sticker-ico{ width:40px; height:40px; border-radius:50%; background:#fff; color:var(--sky-deep); display:grid; place-items:center; }
.sticker-ico svg{ width:18px; height:18px; }
@keyframes spin-slow{ to{ transform:rotate(360deg) } }
.contact .proof{ color:var(--ink-2); text-shadow:none; }
.contact .proof b{ color:var(--ink); }
.contact .proof i{ background:rgba(8,25,43,.18); }
.contact .alt-link{ color:var(--sky-deep); }
.form-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.form-head .form-title{ margin:0; }
.slot{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); background:var(--soft); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.slot i{ width:7px; height:7px; border-radius:50%; background:#22B573; animation:ping 2s ease-out infinite; }
.slot b{ font-weight:600; color:var(--ink); }
.audit .btn-lg svg{ transition:transform .3s var(--ease); }
.audit .btn-lg:hover svg{ transform:translateX(4px); }
.alt-link{ text-align:center; font-size:13.5px; font-weight:600; color:var(--sky-deep); margin-top:-4px; }
.alt-link:hover{ text-decoration:underline; }
.proof{ margin-top:34px; display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(4,26,52,.3); }
.proof b{ font-family:var(--serif); font-size:23px; margin-right:7px; color:#fff; letter-spacing:-.01em; }
.proof i{ width:1px; height:24px; background:rgba(255,255,255,.4); }
@media (max-width:940px){ .contact-grid{ gap:40px; } }
@media (max-width:780px){
  .contact{ padding:90px 0 80px; border-radius:32px 32px 0 0; }
  .sticker{ top:-30px; right:-10px; width:92px; height:92px; }
  .sticker text{ font-size:11.5px; }
  .sticker-ico{ width:30px; height:30px; } .sticker-ico svg{ width:14px; height:14px; }
  .proof{ gap:12px 18px; margin-top:44px; }
  .proof i{ display:none; }
  .form-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =========================================================
   MINI-AUDIT EN 3 ÉTAPES (formulaire de contact)
   ========================================================= */
@keyframes bump{ 0%{ transform:scale(.88); color:var(--sky); } 100%{ transform:none; } }

/* =========================================================
   CONTACT — crépuscule en CSS (entre le jour de la FAQ et la nuit du footer)
   ========================================================= */
.contact{ color:#fff; padding:96px 0 72px; background:linear-gradient(180deg, #8DB3E8 0%, #5A86CB 26%, #2A4A8E 56%, #0F2049 82%, var(--night) 100%); }
.dusk{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sun{
  position:absolute; left:50%; top:34%; width:640px; height:640px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,226,1) 0%, rgba(255,226,178,.78) 14%, rgba(255,196,140,.34) 32%, rgba(255,176,130,.1) 48%, rgba(255,170,120,0) 64%);
  animation:sunset 12s ease-in-out infinite alternate;
}
@keyframes sunset{ from{ transform:translate(-50%,-50%) scale(1) } to{ transform:translate(-50%,-48%) scale(1.06) } }
.dusk .stars{ top:40%; opacity:.7; mask-image:linear-gradient(to bottom, transparent, #000 55%); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%); }
.mist-sunset{ top:auto; bottom:18%; height:340px; z-index:1; }
.mist-sunset i{ opacity:.55; background:radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,236,214,.6) 30%, rgba(255,255,255,.18) 54%, rgba(255,255,255,0) 70%); }
.mist-sunset .m1{ bottom:140px; opacity:.4; } .mist-sunset .m2{ bottom:80px; } .mist-sunset .m3{ bottom:10px; } .mist-sunset .m4{ bottom:-40px; opacity:.45; }
.contact .eyebrow{ color:#FFD9A0; }
.contact .h-display{ color:#fff; text-shadow:0 2px 30px rgba(4,12,32,.35); }
.contact .h-display em{ color:#FFD9A0; }
.contact-sub{ color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(4,12,32,.35); }
.contact .proof{ color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(4,12,32,.35); }
.contact .proof b{ color:#fff; }
.contact .proof i{ background:rgba(255,255,255,.35); }

/* ---------- Le mini-audit, posé dans le crépuscule (pas de carte) ---------- */
.contact-grid-audit{ grid-template-columns:minmax(0,1.2fr) minmax(360px,440px); gap:72px; align-items:start; }
.audit{ margin-top:20px; }
.steps-bar{ display:flex; gap:6px; margin-bottom:14px; }
.steps-bar li{ flex:1; position:relative; padding-top:10px; font-size:12px; font-weight:600; letter-spacing:.03em; color:rgba(255,255,255,.55); white-space:nowrap; transition:color .3s; }
.steps-bar li::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:rgba(255,255,255,.25); transition:background .3s; }
.steps-bar li b{ font-family:var(--mono); font-weight:500; margin-right:6px; color:#FFD9A0; transition:color .3s; }
.steps-bar li.is-on{ color:#fff; } .steps-bar li.is-on::before{ background:#fff; }
.steps-bar li.is-done{ color:rgba(255,255,255,.85); cursor:pointer; } .steps-bar li.is-done::before{ background:#8FE6B8; } .steps-bar li.is-done b{ color:#8FE6B8; }
.steps-bar li.is-done b::after{ content:" ✓"; }
.steps-track{ position:relative; overflow:hidden; transition:height .5s var(--ease-out); }
.step{ position:absolute; left:0; top:0; width:100%; opacity:0; transform:translateX(40px); transition:opacity .35s, transform .5s var(--ease-out); pointer-events:none; }
.step.is-on{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.step.is-past{ transform:translateX(-40px); }
.q-title{ font-family:var(--serif); font-size:25px; line-height:1.1; letter-spacing:-.01em; color:#fff; text-shadow:0 1px 14px rgba(4,12,32,.35); margin-bottom:10px; }
.q-title small{ font-family:var(--sans); font-size:13px; letter-spacing:0; color:rgba(255,255,255,.62); margin-left:10px; }
.step-nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px; }
.step-nav .btn{ margin-left:auto; } .step-nav .btn[disabled]{ opacity:.4; cursor:not-allowed; }
.step-hint{ font-size:12.5px; color:rgba(255,255,255,.6); }
.step-back{ background:none; border:0; padding:6px 0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.7); cursor:pointer; transition:color .2s; }
.step-back:hover{ color:#fff; }
.pills-label{ margin:10px 0 6px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.pills-label small{ font-weight:400; letter-spacing:0; text-transform:none; margin-left:6px; font-size:11.5px; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.opt span{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.05); color:#fff; font-size:13.5px; font-weight:500; line-height:1.2; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .2s; }
.opt:hover span{ border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-1px); }
.opt input:checked + span{ background:#fff; color:var(--ink); border-color:#fff; }
.opt input:focus-visible + span{ outline:2px solid #fff; outline-offset:3px; }
.opt em{ font-style:normal; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.65); }
.opt input:checked + span em{ color:var(--sky-deep); }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fields label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.fields input{ width:100%; padding:10px 0; border:0; border-bottom:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font:400 17px/1.3 var(--sans); border-radius:0; transition:border-color .2s; }
.fields input::placeholder{ color:rgba(255,255,255,.35); }
.fields input:focus{ outline:none; border-bottom-color:#fff; }
.audit .form-note{ margin-top:14px; text-align:left; color:rgba(255,255,255,.62); }
.audit .form-note .alt-link{ display:inline; margin:0 0 0 4px; font-size:12.5px; color:#FFD9A0; }
.audit .form-note.ok{ color:#8FE6B8; } .audit .form-note.err{ color:#FFB3A6; }

/* ---------- La fiche d'audit : une feuille qui s'écrit en direct ---------- */
.paper-wrap{ position:sticky; top:96px; }
.paper{ position:relative; background:#FFFCF4; color:var(--ink); border-radius:6px; padding:22px 24px 20px; box-shadow:0 30px 80px rgba(4,12,32,.5), 0 8px 24px rgba(4,12,32,.28); transform:rotate(-1.6deg); transition:transform .6s var(--ease-out); }
.paper::after{ content:""; position:absolute; left:14px; right:14px; bottom:-8px; height:8px; border-radius:0 0 6px 6px; background:rgba(255,252,244,.55); z-index:-1; }
.paper.is-live, .paper:hover{ transform:rotate(0deg); }
.paper-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(8,25,43,.16); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.paper-date{ letter-spacing:.02em; text-transform:none; color:var(--ink-3); }
.paper-lines{ margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.paper-lines div{ display:flex; align-items:baseline; gap:10px; font-size:14px; }
.paper-lines dt{ flex:none; color:var(--ink-3); }
.paper-lines i{ flex:1; border-bottom:1px dotted rgba(8,25,43,.35); transform:translateY(-4px); }
.paper-lines dd{ flex:none; max-width:60%; text-align:right; font-weight:600; color:var(--ink); }
.paper-lines dd.empty{ color:rgba(8,25,43,.3); font-weight:400; }
.paper-lines dd.bump, .paper-nums b.bump{ animation:bump .5s var(--ease-out); }
.paper-nums{ margin-top:14px; padding:12px 0; border-top:1px dashed rgba(8,25,43,.28); border-bottom:1px dashed rgba(8,25,43,.28); display:grid; grid-template-columns:.9fr .9fr 1.35fr; gap:10px; }
.paper-nums b{ display:block; font-family:var(--serif); font-size:28px; line-height:1; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.paper-nums span{ display:block; margin-top:5px; font-size:11.5px; line-height:1.3; color:var(--ink-3); }
.paper-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.paper-plan{ margin-top:12px; }
.paper-plan ul{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.paper-plan li{ position:relative; padding-left:16px; font-size:13px; line-height:1.45; color:var(--ink); animation:fadeUp .35s var(--ease-out) both; }
.paper-plan li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--sky); }
.paper-plan li.muted{ color:var(--ink-3); } .paper-plan li.muted::before{ background:rgba(8,25,43,.2); }
.paper-after{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(8,25,43,.12); font-family:var(--mono); font-size:10.5px; line-height:1.55; color:var(--ink-3); }
.paper .slot{ margin-top:12px; background:rgba(8,25,43,.06); }
@media (max-width:1023px){
  .contact-grid-audit{ grid-template-columns:1fr; gap:40px; }
  .paper-wrap{ position:static; }
  .paper{ max-width:520px; transform:none; }
}
@media (max-width:780px){
  .q-title{ font-size:23px; }
  .opt span{ padding:9px 13px; font-size:13.5px; }
  .fields{ grid-template-columns:1fr; gap:16px; }
  .step-nav{ flex-wrap:wrap; } .step-nav .btn-lg{ width:100%; justify-content:center; margin-left:0; }
  .paper{ padding:24px 20px 20px; }
  .paper-top{ padding-right:64px; flex-wrap:wrap; gap:4px; } /* laisse la place au sticker */
  .paper-nums{ gap:8px; } .paper-nums b{ font-size:24px; }
  .steps-bar li{ font-size:11px; }
}

.footer{ border-top:0; }
@media (max-width:780px){
  .contact{ padding:100px 0 90px; }
  .sun{ width:380px; height:380px; top:22%; }
  .mist-sunset{ bottom:30%; height:240px; }
  .mist-sunset .m1{ height:160px; } .mist-sunset .m2{ height:190px; } .mist-sunset .m3{ height:190px; } .mist-sunset .m4{ height:170px; }
}

/* ---------- Défilement continu (bande de noms) ---------- */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.marquee-track{ display:flex; align-items:center; gap:56px; width:max-content; padding-right:56px; animation:marquee 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track li{ font-family:var(--serif); font-size:28px; letter-spacing:-.01em; color:var(--ink); opacity:.42; white-space:nowrap; transition:opacity .3s; }
.marquee-track li:hover{ opacity:.9; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- Indicateur de défilement : capsule « souris » + point qui tombe, ancré au bas de l'écran ---------- */
.scroll-cue{ position:fixed; left:50%; bottom:28px; z-index:60; width:36px; height:62px; margin-left:-18px; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(8,25,43,.32); text-decoration:none; opacity:1; transition:opacity .6s ease .9s, box-shadow .3s; }
.scroll-cue::before{ content:''; position:absolute; left:50%; top:8px; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--ink); animation:scroll 1.5s ease-out infinite; }
.scroll-cue:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.js body:not(.hero-in) .scroll-cue{ opacity:0; }
body.is-scrolled .scroll-cue{ opacity:0 !important; pointer-events:none; transition-delay:0s; }
@keyframes scroll{ 0%{ opacity:1; transform:translateY(0) } 100%{ opacity:0; transform:translateY(38px) } }
@media (prefers-reduced-motion:reduce){ .scroll-cue::before{ animation:none; } }
@media (max-height:700px){ .scroll-cue{ display:none; } } /* écrans courts : la capsule chevaucherait la ligne de preuves */
@media (max-width:780px){
  .scroll-cue{ bottom:20px; width:30px; height:52px; margin-left:-15px; border-radius:16px; }
  .scroll-cue::before{ width:6px; height:6px; margin-left:-3px; top:7px; }
  @keyframes scroll{ 100%{ opacity:0; transform:translateY(30px) } }
}

/* =========================================================
   PAGE MENTIONS LÉGALES
   ========================================================= */
.legal{ padding:150px 0 100px; background:#fff; }
.legal-wrap{ max-width:720px; }
.legal .h-sec{ margin-top:10px; text-align:left; }
.legal-note{ margin-top:18px; font-size:13px; color:var(--ink-3); }
.legal h2{ margin-top:40px; font-family:var(--serif); font-size:26px; letter-spacing:-.01em; }
.legal p{ margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.legal p b{ color:var(--ink); }
.legal p a{ color:var(--sky-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-back{ margin-top:44px; font-weight:600; }
.legal-back a{ text-decoration:none !important; }
@media (max-width:780px){ .legal{ padding:120px 0 70px; } .legal h2{ font-size:22px; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1120px){
  .chapter{ grid-template-columns:.9fr 1.2fr; gap:48px; }
  .panel-label{ font-size:76px; }
}
@media (max-width:1023px){
  .demo{ grid-template-columns:1fr; gap:44px; }
  .phone{ height:640px; }
  .chapter{ grid-template-columns:1fr; gap:40px; }
  .chapter-side{ position:static; }
  .panel-in{ min-height:0; }
  .panel h3{ padding-top:28px; }
  .flow{ grid-template-columns:1fr 1fr; gap:6px 18px; }
}
@media (max-width:940px){
  .links, .btn-nav{ display:none; }
  .burger{ display:flex; }
  .capsule{ padding:7px 7px 7px 16px; gap:14px; }
  .navwrap.is-scrolled .capsule{ padding:6px 6px 6px 14px; }
  .sec-head-row{ flex-direction:column; align-items:flex-start; }
  .prix-grid{ grid-template-columns:1fr; gap:30px; max-width:520px; margin:0 auto; }
  .pcard-hi{ order:-1; margin-top:0; }
  .audit-glass{ flex-direction:column; align-items:flex-start; }
  .work-full{ grid-template-columns:1fr; gap:28px; padding:28px; border-radius:24px; }
  .work-full .work-frame, .work-full:nth-child(even) .work-frame, .work-full:hover .work-frame{ transform:none; }
  .work-full:nth-child(even) .work-frame{ order:0; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:780px){
  .wrap{ padding-inline:20px; }
  .hero{ padding-top:126px; }
  .hero .h-display br, .h-sec br, .page-hero .h-display br{ display:none; }
  .hero-actions{ flex-direction:column; align-items:center; }
  .hero{ padding-bottom:200px; }
  .mist{ bottom:-110px; height:280px; }
  .mist .m1{ height:180px; } .mist .m2{ height:220px; } .mist .m3{ height:220px; } .mist .m4{ height:200px; }
  .mist-dusk{ top:-170px; height:280px; }
  .section{ padding:84px 0; }
  .sec-head{ margin-bottom:40px; }

  .metiers{ padding-top:90px; }
  .metiers .sec-head{ margin-bottom:40px; }
  .chapter{ padding-bottom:70px; }
  .panel{ border-radius:22px; }
  .panel-in{ padding:26px 24px 24px; }
  .panel-label{ font-size:64px; }
  .panel h3{ font-size:28px; padding-top:22px; }
  .panel-stats{ grid-template-columns:repeat(3,1fr); gap:8px; } .panel-stats dt{ font-size:22px; } .panel-stats dd{ font-size:10.5px; }
  .deliv li{ grid-template-columns:34px 1fr; gap:10px; padding:14px 0; } .deliv span{ font-size:19px; }
  .deliv b{ font-size:16px; }
  .flow{ grid-template-columns:1fr; gap:4px; }
  .formule{ grid-template-columns:1fr; gap:8px; }
  .f-price{ text-align:left; display:flex; gap:10px; align-items:baseline; }
  .f-price small{ margin:0; }
  .chapter-night{ padding-top:90px; border-radius:32px 32px 0 0; } .chapter-night .night-sky{ border-radius:32px 32px 0 0; }
  .both{ flex-direction:column; align-items:flex-start; padding-bottom:84px; }

  .gallery{ padding-top:84px; border-radius:32px 32px 0 0; }
  .works{ grid-template-columns:1fr; gap:34px; }
  .work-frame{ height:360px; }
  .work:hover .wp{ transform:translateY(calc(-100% + 321px)); }
  .wp{ padding:12px 16px 18px; } .wp-hero{ margin:12px -16px 0; padding:28px 16px 22px; }
  .wp-hero h4{ font-size:28px; } .theme-nebula, .theme-kairos, .theme-marine{ --h4:28px; }
  .wp-row, .wp-band{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .wp-row span{ display:none; }
  .wp-band b{ font-size:18px; }
  .wp-cta{ flex-direction:column; align-items:flex-start; }
  .work-meta{ flex-direction:column; align-items:flex-start; gap:8px; }
  .filters{ width:100%; overflow:auto; }
  .work-detail h3{ font-size:30px; }
  .work-full{ padding:18px 16px 22px; border-radius:20px; }
  .work-full .work-frame{ height:360px; }
  .work-metrics dd{ font-size:26px; }
  .works-cta{ padding:56px 0 0; }

  .night{ padding:100px 0 90px; border-radius:32px 32px 0 0; }
  .phone{ height:580px; border-radius:38px; }
  .bs-clock{ font-size:26px; }
  .ev{ grid-template-columns:50px 1fr; gap:12px; }
  .crm-row{ grid-template-columns:1fr 1fr; }
  .auto-cta p{ font-size:15px; }

  .prix{ padding:110px 0 120px; border-radius:32px 32px 0 0; }
  .prix .sec-head{ margin-bottom:50px; }
  .faq-sec{ padding:90px 0 80px; border-radius:32px 32px 0 0; }
  .faq summary{ font-size:16.5px; padding:20px 2px; } .faq details > div p{ padding-right:24px; }
  .contact{ padding:84px 0; }
  .chips-grid{ grid-template-columns:1fr 1fr; }
  .form{ padding:24px 20px 22px; } .form .row{ grid-template-columns:1fr; }
  .page-hero{ padding:140px 0 70px; }
  .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; } .footer-legal a{ margin:0 20px 0 0; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .menu-links a, .menu-foot{ transform:none; opacity:1; }
}