/* =========================================================
   NAYT PROD — Feuille de style (v2, orientée conversion)
   Thème sombre · bleu électrique · lisibilité renforcée
   ========================================================= */

:root{
  --bg:        #05070d;
  --bg-2:      #080b13;
  --surface:   #0c1220;
  --surface-2: #111a2c;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --blue:      #2f8bff;
  --blue-2:    #6aabff;
  --blue-deep: #0d5bd6;
  --green:     #34d27f;
  --glow:      rgba(47,139,255,.38);
  --glow-soft: rgba(47,139,255,.12);

  --text:  #eef2fb;
  --muted: #a7b2c8;   /* secondaire plus lisible */
  --dim:   #808da6;

  --font-display: 'Clash Display','General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:    'Inter','General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:   'Instrument Serif',Georgia,'Times New Roman',serif;

  --container: 1200px;
  --pad: clamp(20px, 5vw, 56px);

  --radius:    16px;   /* rayon unique pour les cartes */
  --radius-lg: 22px;   /* grandes surfaces */
  --radius-pill: 100px;
  --shadow: 0 24px 60px -34px rgba(0,0,0,.85);
  --shadow-hover: 0 34px 70px -30px rgba(0,0,0,.9);

  --section-y: clamp(64px, 8vw, 120px);
  --head-gap:  clamp(28px, 4vw, 46px);
  --card-gap:  20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--font-body);
  background:var(--bg); color:var(--text);
  line-height:1.62; font-size:clamp(16px,1.05vw,17.5px);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100vh;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue-2); outline-offset:3px; border-radius:6px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(56vw 56vw at 80% -12%, rgba(47,139,255,.08), transparent 60%),
    radial-gradient(44vw 44vw at -8% 18%, rgba(47,139,255,.05), transparent 55%);
}

/* ---------- Fond animé : aurores qui dérivent lentement (subtil) ---------- */
.site-bg{ position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }
.site-bg .blob{ position:absolute; border-radius:50%; filter:blur(70px); will-change:transform,opacity; }
.blob--1{ width:48vw; height:48vw; max-width:680px; max-height:680px; background:radial-gradient(circle,rgba(47,139,255,1),transparent 66%); top:-10vh; left:-8vw; animation:drift1 19s ease-in-out infinite; }
.blob--2{ width:42vw; height:42vw; max-width:600px; max-height:600px; background:radial-gradient(circle,rgba(20,100,230,1),transparent 66%); top:30vh; right:-12vw; animation:drift2 23s ease-in-out infinite; }
.blob--3{ width:38vw; height:38vw; max-width:560px; max-height:560px; background:radial-gradient(circle,rgba(90,130,255,.92),transparent 66%); bottom:-10vh; left:30vw; animation:drift3 21s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.26; } 50%{ transform:translate(14vw,16vh) scale(1.28); opacity:.46; } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1.12); opacity:.46; } 50%{ transform:translate(-15vw,-12vh) scale(1); opacity:.26; } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.28; } 50%{ transform:translate(12vw,-15vh) scale(1.3); opacity:.48; } }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:-200%; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)} 80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)} }

/* ---------- Curseur ---------- */
.cursor{ position:fixed; top:0; left:0; width:24px; height:24px; z-index:10000; border:1.5px solid var(--blue-2); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s; display:grid; place-items:center; mix-blend-mode:difference; opacity:0; }
.cursor__label{ font-size:11px; font-weight:600; color:#fff; opacity:0; transform:scale(.6); transition:.25s var(--ease); white-space:nowrap; }
.cursor.is-active{ width:72px; height:72px; background:var(--blue); border-color:var(--blue); mix-blend-mode:normal; }
.cursor.is-active .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-hidden{ opacity:0 !important; }
@media (hover:hover) and (pointer:fine){ .cursor{ opacity:1; } }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:10001; background:var(--bg); display:grid; place-items:center; transition:opacity .6s var(--ease),visibility .6s; }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.loader__mark{ font-family:var(--font-display); font-size:60px; font-weight:600; color:transparent; -webkit-text-stroke:1.5px var(--blue-2); animation:pulseMark 1.4s var(--ease) infinite; }
@keyframes pulseMark{ 0%,100%{opacity:.3} 50%{opacity:1} }
.loader__bar{ width:170px; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-2)); }
.loader__pct{ font-family:var(--font-display); font-size:13px; color:var(--muted); letter-spacing:.1em; }
.loader__pct::after{ content:"%"; }

/* =========================================================
   Éléments partagés
   ========================================================= */
.eyebrow{ font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
.eyebrow__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--glow-soft); vertical-align:middle; margin-right:9px; position:relative; top:-1px; }

.section{ position:relative; padding:var(--section-y) 0; }
.section__head{ max-width:760px; margin-bottom:var(--head-gap); }
.section__head--split{ max-width:none; display:grid; grid-template-columns:1.25fr .9fr; gap:36px; align-items:end; }
.section__idx{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-2); margin-bottom:18px; }
.section__idx::before{ content:""; width:22px; height:1px; background:var(--blue-2); opacity:.7; }
.section__title{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.02em; font-size:clamp(1.9rem,4.3vw,3.4rem); color:#fff; }
.section__intro{ color:var(--muted); font-size:1.075rem; max-width:52ch; line-height:1.6; }
.section__intro b{ color:var(--text); font-weight:600; }
.hl{ color:var(--blue-2); font-style:italic; font-family:var(--font-serif); font-weight:400; }

/* Boutons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 24px; border-radius:var(--radius-pill); font-weight:600; font-size:1rem;
  background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#04122c;
  box-shadow:0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden; isolation:isolate; transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s; will-change:transform;
}
.btn svg{ transition:transform .3s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#fff,var(--blue-2)); opacity:0; transition:opacity .3s var(--ease); }
.btn:hover{ box-shadow:0 16px 34px -10px var(--glow); }
.btn:hover::before{ opacity:1; }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); filter:brightness(.97); }
.btn--lg{ min-height:56px; padding:17px 30px; font-size:1.05rem; }
.btn--sm{ min-height:44px; padding:11px 20px; font-size:.94rem; }
.btn--ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost::before{ background:rgba(255,255,255,.06); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--blue); color:#fff; }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.96rem; color:var(--blue-2); min-height:36px; position:relative; }
.link-arrow svg{ transition:transform .3s var(--ease); }
.link-arrow::after{ content:""; position:absolute; left:0; bottom:6px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.link-arrow:hover::after{ transform:scaleX(1); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{ position:fixed; top:0; left:0; right:0; z-index:900; transition:transform .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s; border-bottom:1px solid transparent; }
.nav.is-scrolled{ background:rgba(6,9,16,.8); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:22px; height:78px; }
.nav__logo{ height:40px; width:auto; }
.nav__menu{ display:flex; gap:4px; margin-left:auto; }
.nav__link{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 15px; font-size:.96rem; font-weight:500; color:var(--muted); border-radius:var(--radius-pill); transition:color .3s; }
.nav__link::after{ content:""; position:absolute; left:15px; right:15px; bottom:10px; height:1px; background:var(--blue-2); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav__link:hover{ color:#fff; }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:#fff; }
.nav__cta{ flex:none; }
.nav__burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:20px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
.nav__burger.is-open span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger.is-open span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.menu-mobile{ position:fixed; inset:0; z-index:850; background:var(--bg-2); padding:110px var(--pad) 40px; display:flex; flex-direction:column; justify-content:space-between; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); pointer-events:none; }
.menu-mobile.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu-mobile__nav{ display:flex; flex-direction:column; }
.menu-mobile__nav a{ font-family:var(--font-display); font-size:clamp(1.9rem,8vw,2.8rem); font-weight:500; color:#fff; padding:14px 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:16px; opacity:0; transform:translateY(20px); transition:.5s var(--ease); }
.menu-mobile.is-open .menu-mobile__nav a{ opacity:1; transform:none; }
.menu-mobile.is-open .menu-mobile__nav a:nth-child(1){transition-delay:.06s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(2){transition-delay:.11s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(3){transition-delay:.16s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(4){transition-delay:.21s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(5){transition-delay:.26s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(6){transition-delay:.31s}
.menu-mobile.is-open .menu-mobile__nav a:nth-child(7){transition-delay:.36s}
.menu-mobile__idx{ font-size:.85rem; color:var(--blue-2); font-family:var(--font-body); }
.menu-mobile__foot .btn{ width:100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:104px; padding-bottom:56px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__grid{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 82%); -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 82%); opacity:.4; }
.orb{ position:absolute; border-radius:50%; filter:blur(80px); }
.orb--1{ width:460px; height:460px; background:radial-gradient(circle,var(--blue),transparent 66%); top:-120px; right:-70px; opacity:.32; }
.orb--2{ width:400px; height:400px; background:radial-gradient(circle,var(--blue-deep),transparent 62%); bottom:-140px; left:-90px; opacity:.28; }

.hero__inner{ display:grid; grid-template-columns:minmax(0,1fr) clamp(330px,36%,450px); align-items:center; gap:clamp(30px,5vw,60px); width:100%; }
.hero__content{ min-width:0; position:relative; z-index:2; }
.hero__title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.04; font-size:clamp(2.3rem,4.9vw,4.3rem); color:#fff; margin:20px 0 22px; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > *{ display:inline; }
.hero__lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--muted); max-width:46ch; line-height:1.55; }
.hero__lead b{ color:#fff; font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.hero__trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:.95rem; }
.hero__trust span{ display:inline-flex; align-items:center; gap:7px; }
.hero__trust svg{ color:var(--blue-2); }
.hero__trust i{ width:4px; height:4px; border-radius:50%; background:var(--dim); }

/* Carte preuve */
.hero__visual{ position:relative; height:min(66vh,500px); }
.hcard{ position:absolute; border-radius:var(--radius-lg); border:1px solid var(--line-2); background:linear-gradient(160deg,rgba(20,29,48,.9),rgba(11,17,29,.92)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.hcard--main{ inset:6% 3% 8% 6%; padding:24px; display:flex; flex-direction:column; box-shadow:0 40px 90px -34px rgba(0,0,0,.85), 0 0 0 1px var(--line), 0 0 50px -26px var(--glow); }
.hcard__top{ display:flex; }
.hcard__badge{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; padding:6px 11px; border-radius:var(--radius-pill); background:rgba(47,139,255,.12); color:var(--blue-2); border:1px solid rgba(47,139,255,.28); }
.hcard__kpi{ margin-top:18px; display:flex; align-items:flex-end; gap:14px; }
.hcard__num{ font-family:var(--font-display); font-size:clamp(2.6rem,4.2vw,3.4rem); font-weight:600; color:#fff; letter-spacing:-.02em; line-height:.9; }
.hcard__num em{ color:var(--green); font-style:normal; }
.hcard__sub{ font-size:.86rem; color:var(--muted); line-height:1.35; padding-bottom:4px; }
.hcard__sub b{ color:#fff; font-weight:600; }
.hcard__chart{ width:100%; height:96px; margin-top:auto; overflow:visible; }
.hcard__line{ filter:drop-shadow(0 6px 12px var(--glow)); }
.hcard__foot{ display:flex; justify-content:space-between; margin-top:12px; }
.hcard__month{ font-size:.68rem; color:var(--dim); }

.hcard--chip{ display:flex; align-items:center; gap:11px; padding:12px 15px; }
.hcard--chip strong{ display:block; font-size:.9rem; color:#fff; font-weight:700; }
.hcard--chip small{ font-size:.72rem; color:var(--muted); }
.hcard--chip1{ top:0; right:-3%; }
.hcard--chip2{ bottom:4%; left:-2%; }
.chip-ico{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:.86rem; background:rgba(52,210,127,.14); color:var(--green); border:1px solid rgba(52,210,127,.3); }
.chip-ico--blue{ background:rgba(47,139,255,.14); color:var(--blue-2); border-color:rgba(47,139,255,.3); }

/* =========================================================
   CLIENTS
   ========================================================= */
.clients{ padding:clamp(40px,6vw,60px) 0; border-block:1px solid var(--line); }
.clients__title{ text-align:center; color:var(--muted); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:30px; }
.marquee{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee__track{ display:flex; align-items:center; gap:clamp(24px,3.5vw,48px); padding-right:clamp(24px,3.5vw,48px); animation:scrollx var(--dur,42s) linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-100%); } }
/* Chaque logo occupe une "case" de largeur fixe et est centré dedans :
   espacement régulier, aucun chevauchement (les logos partagent un grand canvas 2048×1187). */
.client{ flex:none; width:clamp(116px,13vw,156px); display:grid; place-items:center; height:64px; }
.client img{ max-height:44px; max-width:100%; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.55; transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease); }
.client:hover img{ filter:none; opacity:1; transform:scale(1.06); }

/* =========================================================
   RÉSULTATS / CAS
   ========================================================= */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.case{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; }
.case:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-hover); }
.case__cover{ position:relative; aspect-ratio:16/10; padding:22px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.case__cover::after{ content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E"); }
.case__cover--a{ background:linear-gradient(140deg,#123163,#0a1120); }
.case__cover--b{ background:linear-gradient(140deg,#2a2160,#0a1120); }
.case__cover--c{ background:linear-gradient(140deg,#0e3c4d,#0a1120); }
.case__sector{ position:relative; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; padding:6px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); }
.case__big{ position:relative; display:flex; flex-direction:column; gap:3px; }
.case__big .pos{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; color:var(--green); line-height:1; letter-spacing:-.01em; }
.case__big small{ color:#d4dcec; font-size:.86rem; }
.case__body{ padding:22px; display:grid; gap:11px; }
.case__ba{ font-size:.95rem; color:var(--muted); display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:baseline; }
.case__ba span{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--blue-2); }
.case__quote{ font-family:var(--font-serif); font-style:italic; font-size:1.08rem; color:#e7edf8; line-height:1.4; padding:12px 0 2px; border-top:1px solid var(--line); margin-top:4px; }
.case__body .link-arrow{ margin-top:2px; }

/* =========================================================
   CAPACITÉS (vision globale + visuel)
   ========================================================= */
.capax{ position:relative; overflow:hidden; }
.capax__aura{ position:absolute; left:24%; top:26%; width:min(560px,60vw); height:420px; transform:translateX(-50%); background:radial-gradient(circle,var(--glow-soft),transparent 68%); filter:blur(34px); pointer-events:none; }
.capax__grid{ position:relative; display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,68px); align-items:center; }
.capax__media{ position:relative; --vlit:0; }
/* Halo qui "respire" derrière le cadre */
.capax__media::before{ content:""; position:absolute; inset:-9%; background:radial-gradient(circle at 50% 52%,var(--glow),transparent 62%); filter:blur(34px); opacity:.7; z-index:-1; animation:visionAura 2.6s ease-in-out infinite; }
/* L'image "respire" (luminosité uniforme) : l'ampoule reste la plus lumineuse, aucun point mal placé.
   Le halo grandit avec le scroll (--vlit piloté en JS). */
.capax__media img{ position:relative; width:100%; border-radius:var(--radius-lg); border:1px solid var(--line-2); box-shadow:var(--shadow),0 0 calc(42px + 74px*var(--vlit)) -16px var(--glow); animation:visionGlow 2.6s ease-in-out infinite; }
/* Projecteur qui suit le curseur (souris uniquement) */
.capax__spot{ position:absolute; inset:0; border-radius:var(--radius-lg); pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .45s ease; background:radial-gradient(circle 34% at var(--mx,50%) var(--my,55%),rgba(165,212,255,.55),rgba(80,160,255,.16) 46%,transparent 72%); }
@media (hover:hover) and (pointer:fine){
  .capax__media:hover .capax__spot{ opacity:1; }
}
@keyframes visionAura{ 0%,100%{ opacity:.42; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.14); } }
@keyframes visionGlow{ 0%,100%{ filter:brightness(.94) saturate(.98); } 50%{ filter:brightness(1.3) saturate(1.2); } }
/* Étincelles lumineuses qui montent de l'ampoule (mouvement bien visible) */
.capax__sparks{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-lg); pointer-events:none; z-index:2; }
.capax__sparks span{ position:absolute; left:var(--x,50%); bottom:40%; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle,#ffffff 16%,#a9d0ff 46%,transparent 72%); box-shadow:0 0 14px 3px rgba(190,222,255,.95); opacity:0; animation:sparkRise var(--sd,4.6s) ease-in infinite; animation-delay:var(--dl,0s); }
@keyframes sparkRise{ 0%{ transform:translateY(0) scale(.4); opacity:0; } 10%{ opacity:1; } 70%{ opacity:1; } 100%{ transform:translateY(-175px) scale(1.15); opacity:0; } }
.capax__content .section__intro{ margin:0 0 24px; }
.expertise{ display:flex; flex-wrap:wrap; gap:10px; }
.xp{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:var(--radius-pill); border:1px solid var(--line-2); background:linear-gradient(180deg,var(--surface),var(--bg-2)); color:var(--text); font-size:1.02rem; font-weight:500; cursor:default; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,color .3s; }
.xp__dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 0 4px var(--glow-soft); transition:.3s var(--ease); flex:none; }
.xp:hover{ transform:translateY(-3px); border-color:var(--blue); color:#fff; box-shadow:0 14px 28px -16px var(--glow); }
.xp:hover .xp__dot{ box-shadow:0 0 0 5px var(--glow-soft),0 0 14px var(--glow); }
.capax__cta{ margin-top:26px; display:flex; }

/* =========================================================
   SECTEURS (bande compacte)
   ========================================================= */
.secteurs-band{ padding:clamp(48px,6vw,72px) 0; border-top:1px solid var(--line); }
.secteurs-band__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,56px); align-items:center; }
.secteurs-band__lead h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); color:#fff; letter-spacing:-.01em; margin-bottom:10px; }
.secteurs-band__lead h3 b{ color:var(--blue-2); font-weight:600; }
.secteurs-band__lead p{ color:var(--muted); font-size:1rem; max-width:34ch; }
.secteurs-band__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.secteurs-band__chips li{ padding:10px 16px; border-radius:var(--radius-pill); border:1px solid var(--line-2); background:var(--surface); color:var(--text); font-size:.94rem; font-weight:500; transition:.3s var(--ease); }
.secteurs-band__chips li:hover{ border-color:var(--blue); color:#fff; transform:translateY(-2px); }

/* =========================================================
   MÉTHODE (timeline animée)
   ========================================================= */
.methode__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:start; }
.methode__intro{ position:sticky; top:118px; }
.methode__stats{ display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
.stat__num{ display:block; font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:600; color:#fff; line-height:1; letter-spacing:-.02em; }
.stat__lbl{ font-size:.86rem; color:var(--muted); }

.steps{ position:relative; padding-left:18px; }
.steps__line{ position:absolute; left:31px; top:16px; bottom:24px; width:2px; background:var(--line); }
.steps__line i{ position:absolute; inset:0 0 auto 0; height:0; background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 0 12px var(--glow); border-radius:2px; }
.step{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:24px; padding:16px 0 34px; }
.step__no{ width:28px; height:28px; margin-left:5px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:.76rem; font-weight:600; color:var(--muted); background:var(--surface); border:2px solid var(--line-2); position:relative; z-index:1; transition:.4s var(--ease); }
.step.is-on .step__no{ color:#04122c; background:var(--blue-2); border-color:var(--blue-2); box-shadow:0 0 0 5px var(--glow-soft),0 0 18px var(--glow); }
.step__c h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.5vw,2rem); color:#fff; letter-spacing:-.02em; }
.step__c p{ color:var(--muted); margin-top:6px; max-width:46ch; font-size:1rem; }

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */
.tmos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.tmo{ padding:28px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:16px; transition:transform .45s var(--ease),border-color .45s; }
.tmo:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.tmo__stars{ color:#ffc555; letter-spacing:2px; font-size:.95rem; }
.tmo blockquote{ font-size:1.08rem; color:#e7edf8; line-height:1.5; flex:1; }
.tmo figcaption{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.tmo__av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:#04122c; background:linear-gradient(180deg,var(--blue-2),var(--blue)); flex:none; }
.tmo figcaption b{ display:block; color:#fff; font-size:.95rem; }
.tmo figcaption small{ color:var(--muted); font-size:.85rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start; }
.faq__head{ position:sticky; top:110px; }
.faq__cta{ margin-top:22px; }
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.qa{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:border-color .3s; }
.qa[open]{ border-color:var(--line-2); }
.qa summary{ list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-display); font-weight:500; font-size:1.1rem; color:#fff; min-height:44px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ position:relative; width:16px; height:16px; flex:none; }
.qa summary i::before,.qa summary i::after{ content:""; position:absolute; background:var(--blue-2); border-radius:2px; transition:transform .3s var(--ease); }
.qa summary i::before{ top:7px; left:0; width:16px; height:2px; }
.qa summary i::after{ left:7px; top:0; width:2px; height:16px; }
.qa[open] summary i::after{ transform:scaleY(0); }
.qa__a{ padding:0 22px 22px; }
.qa__a p{ color:var(--muted); font-size:1rem; line-height:1.6; max-width:60ch; }

/* =========================================================
   DIFFÉRENCE (comparatif)
   ========================================================= */
.diff__title{ max-width:16ch; margin-bottom:var(--head-gap); }
.compare{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare__col,.compare__row{ display:grid; grid-template-columns:1fr 1fr; }
.compare__col--head span{ padding:16px 24px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--surface); }
.compare__col--head .compare__no{ color:var(--dim); }
.compare__col--head .compare__yes{ color:var(--blue-2); }
.compare__row{ border-top:1px solid var(--line); }
.compare__row span{ padding:18px 24px; font-size:1.02rem; display:flex; align-items:center; gap:12px; }
.compare__no{ color:var(--muted); position:relative; }
.compare__no::before{ content:"✕"; color:#e06565; font-size:.8rem; font-weight:700; flex:none; }
.compare__yes{ color:#fff; font-weight:500; background:rgba(47,139,255,.045); border-left:1px solid var(--line); }
.compare__yes::before{ content:"✓"; color:var(--green); font-weight:700; flex:none; }
.compare__col--head .compare__no::before,.compare__col--head .compare__yes::before{ display:none; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{ position:relative; overflow:hidden; }
.cta__glow{ position:absolute; left:22%; top:18%; width:min(620px,58vw); height:440px; transform:translateX(-50%); background:radial-gradient(circle,var(--glow-soft),transparent 66%); filter:blur(30px); pointer-events:none; }
.cta__grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,64px); align-items:center; }
.cta__inner{ position:relative; z-index:1; }
.cta__title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(2rem,4.4vw,3.3rem); color:#fff; line-height:1.06; margin:14px 0 18px; }
.cta__lead{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.18rem); max-width:52ch; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:13px; margin:28px 0 16px; }
.cta__reassure{ color:var(--dim); font-size:.92rem; letter-spacing:.02em; }
.cta__media{ position:relative; --vlit:0; }
/* Halo ambiant qui grandit avec le scroll (--vlit piloté en JS) */
.cta__media::before{ content:""; position:absolute; inset:-6%; background:radial-gradient(circle at 50% 50%,var(--glow),transparent 62%); filter:blur(32px); opacity:calc(.45 + .45*var(--vlit)); transform:scale(calc(1 + .1*var(--vlit))); z-index:-1; transition:opacity .3s,transform .3s; }
/* Lueur de la base : lévitation + pulsation */
.cta__media::after{ content:""; position:absolute; left:50%; bottom:2%; width:52%; height:14%; background:radial-gradient(ellipse at center,rgba(96,175,255,.6),transparent 68%); filter:blur(8px); mix-blend-mode:screen; pointer-events:none; animation:signBase 5s ease-in-out infinite; }
/* La pancarte flotte doucement */
.cta__media img{ position:relative; width:100%; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); animation:signFloat 5s ease-in-out infinite; will-change:transform; }
/* Projecteur qui suit le curseur (souris uniquement) */
.cta__spot{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .45s ease; background:radial-gradient(circle 30% at var(--mx,50%) var(--my,45%),rgba(150,200,255,.5),rgba(70,150,255,.14) 46%,transparent 72%); }
@media (hover:hover) and (pointer:fine){
  .cta__media:hover img{ filter:drop-shadow(0 32px 54px rgba(0,0,0,.6)) brightness(1.08) saturate(1.06); }
  .cta__media:hover .cta__spot{ opacity:1; }
}
@keyframes signFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes signBase{ 0%,100%{ opacity:.45; transform:translateX(-50%) translateY(0) scale(.92); } 50%{ opacity:.8; transform:translateX(-50%) translateY(-10px) scale(1.06); } }
/* Icônes marketing flottantes autour de la pancarte */
.cta__icons{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.fico{ position:absolute; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(180deg,rgba(20,32,58,.92),rgba(10,16,30,.88)); border:1px solid rgba(99,169,255,.42); box-shadow:0 10px 24px -10px rgba(0,0,0,.7),0 0 20px -8px var(--glow); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:ficoFloat var(--d,6s) ease-in-out infinite; }
.fico svg{ width:22px; height:22px; fill:none; stroke:var(--blue-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fico--1{ top:2%; left:8%; --d:5.6s; animation-delay:0s; }
.fico--2{ top:-1%; right:19%; --d:6.6s; animation-delay:.5s; }
.fico--3{ bottom:31%; left:2%; --d:6.1s; animation-delay:1s; }
.fico--4{ bottom:15%; right:4%; --d:7s; animation-delay:.3s; }
.fico--5{ bottom:5%; left:18%; --d:5.9s; animation-delay:1.3s; }
@keyframes ficoFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-15px) rotate(3deg); } }

/* =========================================================
   PAGE SOLUTIONS — 1. Héros de page (centré, plus court)
   ========================================================= */
.hero--page{ min-height:auto; padding-top:clamp(130px,15vw,168px); padding-bottom:clamp(48px,7vw,86px); text-align:center; }
.hero--page .hero__inner{ grid-template-columns:1fr; }
.hero--page .hero__content{ max-width:940px; margin-inline:auto; }
.hero--page .hero__title{ font-size:clamp(2.1rem,4.6vw,3.9rem); }
.hero--page .hero__lead{ max-width:60ch; margin-inline:auto; }
.hero--page .hero__actions,
.hero--page .hero__trust{ justify-content:center; }
.hero--page .hero__grid{ mask-image:radial-gradient(72% 78% at 50% 40%,#000,transparent 80%); -webkit-mask-image:radial-gradient(72% 78% at 50% 40%,#000,transparent 80%); }
.hero--page .orb--1{ top:-160px; right:-120px; }
.hero--page .orb--2{ bottom:-200px; left:-120px; }

/* =========================================================
   PAGE SOLUTIONS — 2+3. Les bons leviers (intro + visuel)
   ========================================================= */
.leviers{ overflow:hidden; }
.leviers__head{ max-width:820px; margin-inline:auto; text-align:center; }
.leviers__head .section__idx{ justify-content:center; }
.leviers__head .section__intro{ max-width:62ch; margin-inline:auto; }
/* Le crayon est un détourage transparent : il flotte, sans cadre (comme la pancarte) */
.leviers__media{ position:relative; --vlit:0; width:min(700px,100%); margin:clamp(6px,2vw,18px) auto 0; }
.leviers__media::before{
  content:""; position:absolute; inset:-8% -14%;
  background:radial-gradient(circle at 50% 48%,var(--glow),transparent 62%);
  filter:blur(38px); z-index:-1;
  opacity:calc(.4 + .5*var(--vlit)); transform:scale(calc(1 + .1*var(--vlit)));
  transition:opacity .3s,transform .3s;
}
.leviers__media img{ position:relative; width:100%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation:leviersFloat 6.5s ease-in-out infinite; will-change:transform; }
.leviers__spot{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(circle 28% at var(--mx,50%) var(--my,45%),rgba(150,200,255,.42),rgba(70,150,255,.12) 46%,transparent 72%);
}
@media (hover:hover) and (pointer:fine){
  .leviers__media:hover img{ filter:drop-shadow(0 36px 58px rgba(0,0,0,.65)) brightness(1.07) saturate(1.05); }
  .leviers__media:hover .leviers__spot{ opacity:1; }
}
@keyframes leviersFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* =========================================================
   PAGE SOLUTIONS — 4. « Pas toujours la publicité »
   ========================================================= */
.notalways{ border-top:1px solid var(--line); }
.notalways__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:center; }
.notalways__head .section__title{ max-width:14ch; }
.maybes{ display:grid; gap:12px; }
.maybe{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .4s var(--ease),border-color .4s,box-shadow .4s; }
.maybe:hover{ transform:translateX(5px); border-color:var(--line-2); box-shadow:var(--shadow); }
.maybe__ico{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(47,139,255,.1); border:1px solid rgba(47,139,255,.26); }
.maybe__ico svg{ width:21px; height:21px; fill:none; stroke:var(--blue-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.maybe p{ font-size:1.05rem; color:var(--muted); }
.maybe p b{ color:#fff; font-weight:600; }
.maybe__lead{ font-family:var(--font-serif); font-style:italic; color:var(--dim); margin-right:5px; }
.notalways__concl{
  margin-top:clamp(30px,4vw,48px); padding:26px clamp(22px,4vw,38px);
  border-radius:var(--radius); border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(47,139,255,.07),rgba(47,139,255,.02));
  color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.55; text-align:center;
}
.notalways__concl b{ display:block; margin-top:4px; color:#fff; font-weight:600; }

/* =========================================================
   PAGE SOLUTIONS — 5. Nos solutions principales
   ========================================================= */
/* 8 solutions : grille 2 colonnes (1 sur mobile). Espacements resserrés —
   la page doit rester légère malgré le nombre de cartes. */
.sols{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--card-gap); }
.sol{ display:flex; flex-direction:column; padding:clamp(22px,2.6vw,28px); border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; }
.sol:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-hover); }
.sol__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.sol__ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(180deg,rgba(47,139,255,.16),rgba(47,139,255,.05)); border:1px solid rgba(47,139,255,.3); transition:.4s var(--ease); }
.sol__ico svg{ width:23px; height:23px; fill:none; stroke:var(--blue-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sol:hover .sol__ico{ border-color:var(--blue); box-shadow:0 0 22px -6px var(--glow); }
.sol__no{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:rgba(255,255,255,.26); letter-spacing:-.02em; transition:color .4s var(--ease); }
.sol:hover .sol__no{ color:var(--blue-2); }
.sol__t{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,1.9vw,1.5rem); color:#fff; letter-spacing:-.02em; line-height:1.2; }
.sol__for{ margin-top:9px; color:var(--muted); font-size:.99rem; line-height:1.5; }
.sol__lbl{ margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-2); }
.sol__list{ margin-top:12px; display:grid; gap:7px; }
.sol__list li{ position:relative; padding-left:25px; color:var(--text); font-size:.97rem; line-height:1.42; }
.sol__list li::before{
  content:""; position:absolute; left:0; top:.36em; width:15px; height:15px; border-radius:50%;
  background:rgba(47,139,255,.14); border:1px solid rgba(47,139,255,.4);
}
.sol__list li::after{
  content:""; position:absolute; left:4.5px; top:.66em; width:6px; height:3px;
  border-left:1.6px solid var(--blue-2); border-bottom:1.6px solid var(--blue-2);
  transform:rotate(-45deg);
}
.sol__res{ margin-top:auto; padding-top:18px; color:var(--muted); font-size:.97rem; line-height:1.48; }
.sol__res span{
  display:block; margin-bottom:4px; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green);
}

/* =========================================================
   PAGE CAPACITÉS — Introduction + visuel des pôles
   ========================================================= */
.poles-intro{ overflow:hidden; }
.poles-intro__head{ max-width:820px; margin-inline:auto; text-align:center; }
.poles-intro__head .section__idx{ justify-content:center; }
.poles-intro__head .section__intro{ max-width:62ch; margin-inline:auto; }
/* Visuel détouré (fond transparent) : il flotte, sans cadre, comme le crayon/la pancarte.
   L'ampoule "s'allume" : pulsation de luminosité + halo qui respire + onde d'énergie
   qui irradie vers les pôles connectés. */
.poles-intro__media{ position:relative; width:min(760px,100%); margin:clamp(10px,2.5vw,26px) auto 0; }
/* Halo qui respire derrière l'ampoule (allumage) */
.poles-intro__media::before{
  content:""; position:absolute; inset:-8% -6%;
  background:radial-gradient(circle at 50% 44%,var(--glow),transparent 60%);
  filter:blur(46px); z-index:-1;
  animation:bulbAura 3.2s ease-in-out infinite;
}
/* Onde d'énergie qui part de l'ampoule vers les pôles */
.poles-intro__media::after{
  content:""; position:absolute; left:50%; top:43%; width:56%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4); border-radius:50%;
  background:radial-gradient(circle,rgba(99,169,255,.3),transparent 62%);
  z-index:-1; pointer-events:none; opacity:0;
  animation:bulbWave 3.2s ease-out infinite;
}
.poles-intro__media img{ position:relative; width:100%; will-change:transform,filter; animation:leviersFloat 7s ease-in-out infinite, bulbPower 3.2s ease-in-out infinite; }
.poles-intro__spot{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(circle 26% at var(--mx,50%) var(--my,45%),rgba(150,200,255,.4),rgba(70,150,255,.12) 46%,transparent 72%);
}
@media (hover:hover) and (pointer:fine){
  .poles-intro__media:hover .poles-intro__spot{ opacity:1; }
}
/* L'ampoule s'allume et s'atténue (bien visible) */
@keyframes bulbPower{
  0%,100%{ filter:drop-shadow(0 24px 44px rgba(0,0,0,.5)) brightness(.9) saturate(.92); }
  50%    { filter:drop-shadow(0 30px 52px rgba(0,0,0,.55)) brightness(1.26) saturate(1.3); }
}
@keyframes bulbAura{
  0%,100%{ opacity:.36; transform:scale(.9); }
  50%    { opacity:.92; transform:scale(1.12); }
}
@keyframes bulbWave{
  0%{ opacity:.55; transform:translate(-50%,-50%) scale(.35); }
  70%{ opacity:0; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3); }
}

/* =========================================================
   PAGE CAPACITÉS — Grille des pôles d'expertise (3 colonnes)
   ========================================================= */
.poles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.pole{ display:flex; flex-direction:column; padding:clamp(22px,2.4vw,28px); border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; }
.pole:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-hover); }
.pole__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; background:linear-gradient(180deg,rgba(47,139,255,.16),rgba(47,139,255,.05)); border:1px solid rgba(47,139,255,.3); transition:.4s var(--ease); }
.pole__ico svg{ width:25px; height:25px; fill:none; stroke:var(--blue-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pole:hover .pole__ico{ border-color:var(--blue); box-shadow:0 0 22px -6px var(--glow); }
.pole__t{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.18rem,1.5vw,1.35rem); color:#fff; letter-spacing:-.02em; line-height:1.25; }
.pole__d{ margin-top:11px; color:var(--muted); font-size:.98rem; line-height:1.55; }

/* Variante bouton WhatsApp (icône verte, contour) */
.btn--wa{ gap:11px; }
.btn--wa svg{ color:#2bd66a; }
.btn--wa:hover svg{ transform:none; }

/* =========================================================
   PAGE CONTACT / DIAGNOSTIC — hero + formulaire
   ========================================================= */
.contact-hero{ position:relative; overflow:hidden; padding-top:clamp(128px,15vw,166px); padding-bottom:var(--section-y); }
.contact-hero .hero__grid{ mask-image:radial-gradient(70% 70% at 40% 30%,#000,transparent 82%); -webkit-mask-image:radial-gradient(70% 70% at 40% 30%,#000,transparent 82%); }
.contact-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr clamp(380px,42%,500px); gap:clamp(34px,5vw,60px); align-items:start; }
.contact-hero__title{ font-size:clamp(2.3rem,4.6vw,3.7rem); margin:18px 0 20px; }
.contact-hero__intro .hero__lead{ max-width:46ch; }
.contact-hero__intro .hero__trust{ margin-top:22px; }

/* Coordonnées directes */
.cmethods{ display:grid; gap:12px; margin-top:30px; max-width:440px; }
.cmethod{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; }
.cmethod:hover{ transform:translateX(4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.cmethod__ico{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:rgba(47,139,255,.1); border:1px solid rgba(47,139,255,.26); }
.cmethod--wa .cmethod__ico{ background:rgba(43,214,106,.12); border-color:rgba(43,214,106,.32); color:#2bd66a; }
.cmethod__txt b{ display:block; color:#fff; font-size:.98rem; font-weight:600; }
.cmethod__txt span{ color:var(--muted); font-size:.9rem; }

/* Carte formulaire */
.cform{ position:relative; padding:clamp(24px,3vw,34px); border-radius:var(--radius-lg); border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(20,29,48,.72),rgba(11,17,29,.82)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow),0 0 60px -30px var(--glow); }
.cform__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.2vw,1.7rem); color:#fff; letter-spacing:-.02em; }
.cform__sub{ margin-top:8px; margin-bottom:22px; color:var(--muted); font-size:.98rem; }
.field{ margin-bottom:15px; }
.field > label{ display:block; font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:7px; }
.field label em{ color:var(--blue-2); font-style:normal; }
.field input,.field textarea{ width:100%; font:inherit; font-size:1rem; color:var(--text); background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; min-height:50px; transition:border-color .25s,box-shadow .25s; }
.field textarea{ min-height:118px; resize:vertical; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--glow-soft); }
.field input:not(:placeholder-shown):invalid{ border-color:rgba(224,101,101,.55); }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field--row > div{ margin:0; }
.cform__submit{ width:100%; margin-top:8px; }
.cform__note{ margin-top:14px; font-size:.84rem; color:var(--dim); text-align:center; line-height:1.55; }
.cform__note a{ color:var(--blue-2); font-weight:600; }

/* Comment ça se passe */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--card-gap); }
.flow__step{ position:relative; padding:26px 22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .4s var(--ease),border-color .4s; }
.flow__step:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.flow__n{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--blue-2); letter-spacing:-.02em; }
.flow__step h3{ margin-top:10px; font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:#fff; letter-spacing:-.01em; }
.flow__step p{ margin-top:8px; color:var(--muted); font-size:.94rem; line-height:1.5; }
.flow-sec__cta{ margin-top:clamp(30px,4vw,46px); display:flex; justify-content:center; }

/* --- Champ select (menu déroulant) --- */
.field select{
  width:100%; font:inherit; font-size:1rem; color:var(--text);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px;
  padding:13px 42px 13px 15px; min-height:50px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aabff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:18px;
  transition:border-color .25s,box-shadow .25s;
}
.field select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--glow-soft); }
.field select:required:invalid{ color:var(--dim); }
/* La liste déroulante est dessinée par l'OS : on force un fond sombre ET un texte clair,
   sinon (thème sombre) le texte des options devient illisible. `color-scheme:dark` fait
   rendre le popup natif en mode sombre ; les couleurs explicites servent de garde-fou. */
.field select{ color-scheme:dark; }
.field select option,
.field select optgroup{ background-color:#0e1729; color:#e9edf8; }
.field select option:disabled{ color:#7d8aa3; }

/* --- Panneau de confirmation après envoi --- */
.cform__body[hidden]{ display:none; }
.cform__done[hidden]{ display:none; }
.cform__done{ text-align:center; padding:clamp(30px,4vw,50px) clamp(18px,3vw,30px); }
.cform__check{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; color:#2bd66a; background:rgba(43,214,106,.14); border:1px solid rgba(43,214,106,.4); }
.cform__done h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.4vw,1.9rem); color:#fff; letter-spacing:-.02em; }
.cform__done > p{ margin-top:10px; color:var(--muted); font-size:1.05rem; line-height:1.55; }
.cform__done-help{ margin-top:20px !important; font-size:.88rem !important; color:var(--dim) !important; }
.cform__done-help a{ color:var(--blue-2); font-weight:600; }

/* --- Petits points dans le héros --- */
.hero__points{ margin-top:24px; display:grid; gap:10px; }
.hero__points li{ position:relative; padding-left:28px; color:var(--muted); font-size:1rem; line-height:1.45; }
.hero__points li::before{ content:""; position:absolute; left:0; top:.1em; width:19px; height:19px; border-radius:50%; background:rgba(47,139,255,.14); border:1px solid rgba(47,139,255,.42); }
.hero__points li::after{ content:""; position:absolute; left:6px; top:.45em; width:6px; height:3.5px; border-left:2px solid var(--blue-2); border-bottom:2px solid var(--blue-2); transform:rotate(-45deg); }

/* =========================================================
   PAGE CONTACT — sections (Pour qui, Analyse, Recevez, WhatsApp…)
   ========================================================= */
.section__head--center{ max-width:760px; margin-inline:auto; text-align:center; }
.section__head--center .section__idx{ justify-content:center; }

/* Checklists (Pour qui + Ce que vous recevez) */
.checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px 30px; }
.checklist li{ position:relative; padding-left:36px; color:var(--text); font-size:1.05rem; line-height:1.5; }
.checklist li::before{ content:""; position:absolute; left:0; top:.02em; width:24px; height:24px; border-radius:50%; background:rgba(47,139,255,.14); border:1px solid rgba(47,139,255,.42); }
.checklist li::after{ content:""; position:absolute; left:8px; top:.5em; width:8px; height:4.5px; border-left:2px solid var(--blue-2); border-bottom:2px solid var(--blue-2); transform:rotate(-45deg); }
.checklist--1{ grid-template-columns:1fr; gap:13px; }

/* Ce que nous analysons (liste + visuel clé) */
.analyse__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,60px); align-items:center; }
.analyse__list{ display:grid; gap:14px; }
.analyse__item{ display:flex; gap:16px; padding:18px 20px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; }
.analyse__item:hover{ transform:translateX(4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.analyse__ico{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; background:rgba(47,139,255,.1); border:1px solid rgba(47,139,255,.26); }
.analyse__ico svg{ width:22px; height:22px; fill:none; stroke:var(--blue-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.analyse__item h3{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:#fff; letter-spacing:-.01em; }
.analyse__item p{ margin-top:4px; color:var(--muted); font-size:.95rem; line-height:1.5; }
.analyse__media{ width:100% !important; max-width:460px; margin:0 auto !important; }

/* Ce que vous recevez (panneau) */
.receive{ max-width:780px; margin-inline:auto; padding:clamp(26px,3.5vw,42px); border-radius:var(--radius-lg); border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(47,139,255,.06),rgba(47,139,255,.015)); }
.receive__lead{ color:#fff; font-weight:600; font-size:1.08rem; margin-bottom:20px; }

/* Alternative WhatsApp */
.wa-alt{ display:flex; align-items:center; gap:24px; padding:clamp(22px,3vw,32px); border-radius:var(--radius-lg); border:1px solid rgba(43,214,106,.3); background:linear-gradient(160deg,rgba(16,44,30,.55),rgba(11,17,29,.72)); }
.wa-alt__ico{ width:62px; height:62px; flex:none; border-radius:16px; display:grid; place-items:center; color:#2bd66a; background:rgba(43,214,106,.12); border:1px solid rgba(43,214,106,.32); }
.wa-alt__txt{ flex:1; min-width:0; }
.wa-alt__txt h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2vw,1.45rem); color:#fff; letter-spacing:-.01em; }
.wa-alt__txt p{ margin-top:6px; color:var(--muted); font-size:1rem; line-height:1.55; max-width:58ch; }
.wa-alt__btn{ flex:none; }

/* Sans engagement */
.reassure-band{ max-width:820px; margin-inline:auto; text-align:center; padding:clamp(28px,4vw,48px); border-radius:var(--radius-lg); border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(20,29,48,.5),rgba(11,17,29,.62)); }
.reassure-band .section__idx{ justify-content:center; }
.reassure-band p{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.62; max-width:64ch; margin:0 auto; }
.reassure-band p + p{ margin-top:16px; }
.reassure-band b{ color:#fff; font-weight:600; }

/* FAQ centrée (page contact) */
.faq__list--center{ max-width:820px; margin-inline:auto; }

/* =========================================================
   LANDING PAGE — Diagnostic (annonce Facebook/Instagram)
   ========================================================= */
/* Header simple (logo + WhatsApp + Diagnostic) — pas de menu */
.lp-header{ position:fixed; top:0; left:0; right:0; z-index:900; background:rgba(6,9,16,.82); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); }
.lp-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.lp-header__actions{ display:flex; align-items:center; gap:10px; }
.lp-header__wa{ gap:8px; }
.lp-header__wa svg{ color:#2bd66a; }

/* Hero */
.lp-hero{ position:relative; overflow:hidden; padding-top:clamp(102px,13vw,130px); padding-bottom:var(--section-y); }
.lp-hero .hero__grid{ mask-image:radial-gradient(70% 70% at 35% 25%,#000,transparent 82%); -webkit-mask-image:radial-gradient(70% 70% at 35% 25%,#000,transparent 82%); }
.lp-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr clamp(380px,42%,500px); gap:clamp(34px,5vw,60px); align-items:start; }
.lp-hero__title{ font-size:clamp(2.2rem,4.6vw,3.7rem); margin:18px 0 20px; }
.lp-hero__text{ display:grid; gap:12px; color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.12rem); line-height:1.6; max-width:54ch; }
.lp-hero__text b{ color:#fff; font-weight:600; }
.lp-hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:26px; }
.lp-hero .hero__trust{ margin-top:20px; }
.lp-hero__form{ position:sticky; top:96px; }

/* Visuel (puzzle) dans le héros */
.lp-hero__intro .lp-visual{ width:min(440px,100%); margin:clamp(20px,3vw,34px) 0 0; }
.lp-visual__cap{ margin-top:16px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--muted); letter-spacing:-.01em; max-width:34ch; }
.lp-visual__cap b{ color:#fff; }
.lp-visual__sub{ margin-top:8px; color:var(--dim); font-size:.98rem; max-width:44ch; }

/* Statement (comparaison) */
.statement{ max-width:820px; margin-inline:auto; text-align:center; }
.statement .section__title{ margin-bottom:20px; }
.statement p{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.62; max-width:62ch; margin:0 auto 14px; }
.statement p.statement__punch{ margin-top:22px; color:#fff; font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,1.8vw,1.5rem); }
.statement p.statement__punch b{ color:var(--blue-2); }

/* Pôle pleine largeur (dernier item de "ce que nous analysons") */
.pole--wide{ grid-column:1 / -1; }

/* Ce que vous recevez — phrase de bas */
.receive__foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:1.02rem; text-align:center; }
.receive__foot b{ color:#fff; }

/* Confirmation — boutons */
.cform__done-actions{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* "Le vrai problème" — visuel (loupe) sur carte claire + texte */
.invisible-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,60px); align-items:center; }
/* L'image a un texte sombre incrusté (conçu pour fond clair) → carte claire */
.lp-invisible{ padding:clamp(20px,3vw,38px); border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.14); background:linear-gradient(150deg,#eef3fc,#dbe6f6); box-shadow:var(--shadow),0 0 70px -34px var(--glow); }
.lp-invisible img{ width:100%; display:block; }
.invisible-txt .section__intro{ margin-top:16px; }
.invisible-txt__punch{ margin-top:18px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.4rem); color:var(--muted); line-height:1.4; }
.invisible-txt__punch b{ color:#fff; }

/* Grille "ce que nous analysons" à 4 (LP confiance) */
.poles--4{ grid-template-columns:repeat(4,1fr); }

/* "Comment ça se passe" — pastille numérotée (même gabarit que .pole__ico) */
.pole__num{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--blue-2); background:linear-gradient(180deg,rgba(47,139,255,.16),rgba(47,139,255,.05)); border:1px solid rgba(47,139,255,.3); }

/* "Pour qui / Pas pour qui" — filtre à deux colonnes (attirer le sérieux, écarter le curieux) */
.forwho{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,26px); max-width:960px; margin-inline:auto; align-items:start; }
.forwho__col{ padding:clamp(22px,2.6vw,30px); border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); }
.forwho__col--yes{ border-color:rgba(47,139,255,.32); background:linear-gradient(180deg,rgba(47,139,255,.06),rgba(47,139,255,.015)); }
.forwho__col--no{ border-color:rgba(224,101,101,.22); background:linear-gradient(180deg,rgba(224,101,101,.05),rgba(224,101,101,.012)); }
.forwho__h{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.12rem,1.5vw,1.35rem); color:#fff; margin-bottom:18px; letter-spacing:-.01em; }
.forwho .checklist li{ font-size:1rem; }
.forwho .avoid{ padding:13px 16px; }
.avoids.avoids--col{ grid-template-columns:1fr; gap:12px; }

/* ============ STORY — scénario défilant cinématique (réutilise .steps/.step/.steps__line animés par main.js) ============ */
.story-sec{ overflow:hidden; }
.story{ max-width:770px; margin-inline:auto; }
.story .step{ padding:clamp(24px,5vw,58px) 0; align-items:start; }
.story .step__no{ background:var(--bg); }
.story .step__c{ transition:opacity .7s var(--ease),transform .7s var(--ease); }
.js .story .step__c{ opacity:.3; transform:translateY(12px); }
.story .step.is-on .step__c{ opacity:1; transform:none; }
.scene__time{ display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.2em; color:var(--blue-2); padding:5px 13px; border:1px solid rgba(47,139,255,.32); border-radius:999px; background:rgba(47,139,255,.07); margin-bottom:16px; }
.story .step__c h3{ font-size:clamp(1.7rem,4.2vw,3rem); line-height:1.06; letter-spacing:-.025em; }
.story .step__c p{ font-size:clamp(1.05rem,1.5vw,1.2rem); max-width:54ch; margin-top:14px; line-height:1.6; }
.story .step--turn .scene__time{ color:#ff9a9a; border-color:rgba(224,101,101,.4); background:rgba(224,101,101,.09); }
.story .step--turn.is-on .step__no{ background:#ff8f8f; border-color:#ff8f8f; box-shadow:0 0 0 5px rgba(224,101,101,.18),0 0 18px rgba(224,101,101,.5); }

/* ============ COMMENT ÇA SE PASSE — bande horizontale (pas de cartes) ============ */
.hiw{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); max-width:960px; margin:clamp(30px,4vw,50px) auto 0; position:relative; }
.hiw::before{ content:""; position:absolute; top:27px; left:17%; right:17%; height:1px; background:linear-gradient(90deg,transparent,rgba(47,139,255,.4),transparent); }
.hiw__item{ position:relative; z-index:1; text-align:center; }
.hiw__n{ width:54px; height:54px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--blue-2); background:radial-gradient(circle at 50% 38%,rgba(47,139,255,.22),rgba(47,139,255,.04)); border:1px solid rgba(47,139,255,.42); box-shadow:0 0 28px -8px var(--glow); }
.hiw__t{ font-family:var(--font-display); font-weight:600; font-size:1.16rem; color:#fff; letter-spacing:-.01em; }
.hiw__d{ margin-top:8px; color:var(--muted); font-size:.98rem; line-height:1.55; max-width:32ch; margin-inline:auto; }

/* ============ L'ÉCART — contraste "ce que vous êtes" vs "ce qu'on perçoit" (LP diagnostic) ============ */
.gap{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,26px); max-width:1000px; margin:clamp(30px,4vw,48px) auto 0; align-items:stretch; }
.gap__col{ padding:clamp(22px,2.8vw,32px); border-radius:var(--radius-lg); border:1px solid var(--line); }
.gap__col--you{ border-color:rgba(47,139,255,.34); background:linear-gradient(180deg,rgba(47,139,255,.08),rgba(47,139,255,.02)); box-shadow:0 0 60px -30px var(--glow); }
.gap__col--seen{ border-color:var(--line-2); background:linear-gradient(180deg,rgba(20,29,48,.5),rgba(11,17,29,.6)); }
.gap__h{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.08rem,1.5vw,1.3rem); letter-spacing:-.01em; margin-bottom:18px; }
.gap__col--you .gap__h{ color:#fff; }
.gap__col--seen .gap__h{ color:var(--muted); }
.gap__col ul{ display:flex; flex-direction:column; gap:12px; }
.gap__col li{ position:relative; padding-left:26px; font-size:1.01rem; line-height:1.45; }
.gap__col--you li{ color:#e7edf8; }
.gap__col--you li::before{ content:""; position:absolute; left:0; top:.42em; width:9px; height:9px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 10px var(--glow); }
.gap__col--seen li{ color:var(--muted); }
.gap__col--seen li::before{ content:""; position:absolute; left:2px; top:.62em; width:13px; height:2px; border-radius:2px; background:rgba(224,101,101,.55); }
.gap__vs{ display:grid; place-items:center; }
.gap__vs span{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--blue-2); width:52px; height:52px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(47,139,255,.4); background:var(--bg); box-shadow:0 0 30px -8px var(--glow); }

/* ============ L'ÉCART — statement cinématique : valeur nette vs perception floue ============ */
.reveal-gap{ max-width:920px; margin-inline:auto; text-align:center; }
.reveal-gap .section__idx{ justify-content:center; margin-bottom:clamp(20px,3vw,32px); }
.reveal-gap__line{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,6vw,4.2rem); line-height:1.05; letter-spacing:-.03em; }
.reveal-gap__line--strong{ color:#fff; }
.reveal-gap__line--ghost{ color:rgba(233,237,248,.5); filter:blur(2px); margin-top:.1em; }
.reveal-gap__punch{ margin-top:clamp(32px,4.5vw,58px); font-family:var(--font-display); font-weight:500; font-size:clamp(1.25rem,2.3vw,1.85rem); color:var(--muted); line-height:1.4; max-width:26ch; margin-inline:auto; }
.reveal-gap__punch b{ color:#fff; font-weight:600; }
/* variante "mythe barré" (LP stratégie) : la croyance rayée en bleu, puis le démenti net */
.reveal-gap__myth{ color:rgba(233,237,248,.4); text-decoration:line-through; text-decoration-color:var(--blue); text-decoration-thickness:.055em; }
/* variante "amoindri → grand" (LP partenaire) : le prestataire petit & terne, le partenaire immense */
.reveal-gap__faint{ font-size:clamp(1.2rem,2.4vw,1.85rem); font-weight:500; color:var(--muted); letter-spacing:0; margin-bottom:.18em; }

/* ============ BOUCLE DE CONFIANCE — cercle vertueux (LP attirer) ============ */
.loop{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:clamp(10px,1.3vw,16px); max-width:1060px; margin:clamp(30px,4vw,48px) auto 0; }
.loop__step{ flex:1 1 190px; max-width:236px; padding:clamp(20px,2.3vw,26px) 18px; border-radius:var(--radius); border:1px solid rgba(47,139,255,.26); background:linear-gradient(180deg,rgba(47,139,255,.07),rgba(47,139,255,.015)); text-align:center; transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; }
.loop__step:hover{ transform:translateY(-5px); border-color:var(--blue); box-shadow:0 16px 34px -20px var(--glow); }
.loop__ico{ width:46px; height:46px; margin:0 auto 14px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(180deg,rgba(47,139,255,.18),rgba(47,139,255,.05)); border:1px solid rgba(47,139,255,.34); }
.loop__ico svg{ width:22px; height:22px; fill:none; stroke:var(--blue-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.loop__t{ font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:#fff; letter-spacing:-.01em; }
.loop__d{ margin-top:7px; color:var(--muted); font-size:.93rem; line-height:1.5; }
.loop__arrow{ flex:0 0 auto; display:grid; place-items:center; color:var(--blue-2); opacity:.75; }
.loop__arrow svg{ width:20px; height:20px; }
.loop__back{ margin-top:clamp(20px,2.6vw,30px); text-align:center; font-family:var(--font-display); font-weight:600; font-size:clamp(1.08rem,1.7vw,1.35rem); color:var(--blue-2); display:flex; align-items:center; justify-content:center; gap:12px; }
.loop__back svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Visuel large centré (aimant) */
.magnet-media{ width:min(900px,100%); margin-inline:auto; }

/* Footer léger (LP uniquement) */
.lp-footer{ border-top:1px solid var(--line); padding:clamp(36px,5vw,52px) 0 96px; }
.lp-footer__inner{ display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start; padding-bottom:26px; }
.lp-footer__brand .footer__logo{ height:40px; margin-bottom:14px; }
.lp-footer__brand .footer__tag{ color:var(--text); font-weight:600; margin-bottom:6px; }
.lp-footer__brand p{ color:var(--muted); max-width:46ch; font-size:.98rem; }
.lp-footer__contact{ display:grid; gap:8px; align-content:start; }
.lp-footer__contact a{ color:var(--muted); font-size:.98rem; width:fit-content; transition:color .3s; }
.lp-footer__contact a:hover{ color:#fff; }
.lp-footer__bottom{ padding-top:22px; border-top:1px solid var(--line); color:var(--dim); font-size:.86rem; text-align:center; }

/* =========================================================
   PAGE SECTEURS — message rassurant (2 colonnes texte + image)
   ========================================================= */
.reassure__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,64px); align-items:center; }
.reassure__content .section__title{ margin-bottom:6px; }
.reassure__content .section__intro{ margin-top:16px; }
.reassure__cta{ margin-top:26px; display:flex; }
.reassure__media{ width:100% !important; max-width:420px; margin:0 auto !important; }

/* Cartes secteurs : réutilisent .sol mais sans checklist ; l'objectif est poussé en bas */
.secteurs-grid .step__obj{ margin-top:auto; }
.secteurs-grid .sol__for{ margin-bottom:18px; }

/* =========================================================
   PAGE SECTEURS — besoins communs (puces plus lisibles)
   ========================================================= */
.common__head{ max-width:760px; }
.common__list{ margin-top:clamp(24px,3vw,36px); }
.common__list .xp{ font-size:1.02rem; }

/* =========================================================
   PAGE MÉTHODE — timeline pleine largeur (7 étapes) + objectif
   ========================================================= */
.methode-full__head{ max-width:760px; margin-inline:auto; text-align:center; }
.methode-full__head .section__idx{ justify-content:center; }
.methode-full__head .section__intro{ max-width:56ch; margin-inline:auto; }
/* On réutilise .steps/.step (animés par main.js) mais centrés en une colonne */
.steps--page{ max-width:720px; margin:clamp(30px,4vw,50px) auto 0; }
.steps--page .step{ padding:16px 0 40px; }
.step__obj{ margin-top:12px; padding:11px 16px; border-radius:var(--radius);
  background:rgba(47,139,255,.07); border:1px solid rgba(47,139,255,.22);
  color:var(--text); font-size:.95rem; line-height:1.45; }
.step__obj span{ font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  font-size:.72rem; color:var(--blue-2); margin-right:8px; }

/* =========================================================
   PAGE MÉTHODE — éléments animés autour du visuel
   (scopé à .methode-viz : n'affecte pas le crayon de Solutions)
   ========================================================= */
.methode-viz{ overflow:visible; }
.methode-viz .mfx{ position:absolute; inset:0; pointer-events:none; z-index:3; }
/* Icônes de croissance qui flottent (chips vitrées, dans les zones sombres à gauche/haut) */
.methode-viz .mfx__ico{
  position:absolute; width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(180deg,rgba(20,32,58,.92),rgba(10,16,30,.88));
  border:1px solid rgba(99,169,255,.42);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7),0 0 22px -8px var(--glow);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:ficoFloat var(--d,6s) ease-in-out infinite;
}
.methode-viz .mfx__ico svg{ width:23px; height:23px; fill:none; stroke:var(--blue-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.methode-viz .mfx__ico--1{ top:5%;  left:1%;  --d:5.6s; animation-delay:0s; }
.methode-viz .mfx__ico--2{ top:42%; left:-3%; --d:6.4s; animation-delay:.7s; }
.methode-viz .mfx__ico--3{ bottom:9%; left:7%; --d:6s;   animation-delay:1.3s; }
.methode-viz .mfx__ico--4{ top:16%; left:27%; --d:6.8s; animation-delay:.4s; }
/* Particules qui montent (renforcent le mouvement ascendant) */
.methode-viz .mfx__parts span{
  position:absolute; bottom:6%; left:var(--x,20%); width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,#ffffff 20%,#6aabff 52%,transparent 72%);
  box-shadow:0 0 12px 2px rgba(120,180,255,.85);
  opacity:0; animation:mfxRise var(--d,6s) linear infinite; animation-delay:var(--dl,0s);
}
@keyframes mfxRise{
  0%{ transform:translateY(0) scale(.4); opacity:0; }
  15%{ opacity:1; }
  80%{ opacity:.9; }
  100%{ transform:translateY(-320px) scale(1.05); opacity:0; }
}

/* =========================================================
   PAGE MÉTHODE — « Ce que notre méthode évite »
   ========================================================= */
.avoids{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.avoid{ display:flex; align-items:center; gap:14px; padding:20px 22px;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-size:1.02rem; font-weight:500;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s; }
.avoid:hover{ transform:translateY(-4px); border-color:rgba(224,101,101,.4); box-shadow:var(--shadow); }
.avoid__x{ position:relative; flex:none; width:34px; height:34px; border-radius:10px;
  background:rgba(224,101,101,.12); border:1px solid rgba(224,101,101,.35); }
.avoid__x::before,.avoid__x::after{ content:""; position:absolute; left:50%; top:50%;
  width:15px; height:2px; border-radius:2px; background:#e06565; }
.avoid__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.avoid__x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================================================
   PAGE SOLUTIONS — 6. Transition vers la page Services
   ========================================================= */
.bridge{ padding-top:0; }
.bridge__card{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(34px,5vw,62px) clamp(22px,4vw,56px);
  border-radius:var(--radius-lg); border:1px solid rgba(47,139,255,.3);
  background:linear-gradient(160deg,rgba(19,36,70,.8),rgba(10,16,30,.72));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.bridge__card::before{
  content:""; position:absolute; left:50%; top:-46%; width:min(660px,92%); height:340px;
  transform:translateX(-50%); background:radial-gradient(circle,var(--glow),transparent 66%);
  filter:blur(46px); pointer-events:none;
}
.bridge__card > *{ position:relative; }
.bridge__card .section__idx{ justify-content:center; }
.bridge__card .section__title{ max-width:22ch; margin-inline:auto; }
.bridge__lead{ margin:20px auto 0; max-width:64ch; color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.1rem); line-height:1.62; }
.bridge__lead b{ color:#fff; font-weight:600; }
.bridge__cta{ margin-top:28px; display:flex; justify-content:center; }

/* =========================================================
   PAGE SOLUTIONS — 7. CTA centré (sans visuel)
   ========================================================= */
.cta--center{ text-align:center; }
.cta--center .cta__inner{ max-width:860px; margin-inline:auto; }
.cta--center .section__idx{ justify-content:center; }
.cta--center .cta__lead{ margin-inline:auto; }
.cta--center .cta__lead b{ color:#fff; font-weight:600; }
.cta--center .cta__actions{ justify-content:center; }
.cta--center .cta__glow{ left:50%; top:10%; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line); padding-top:clamp(48px,6vw,68px); padding-bottom:100px; }
.footer__grid{ display:grid; grid-template-columns:1.8fr 1fr 1.15fr; gap:40px; padding-bottom:44px; }
.footer__logo{ height:42px; margin-bottom:16px; }
.footer__brand p{ color:var(--muted); max-width:38ch; font-size:.98rem; }
.footer__brand .footer__tag{ color:var(--text); font-weight:600; font-size:1rem; margin-bottom:8px; }
.footer__col h4{ font-family:var(--font-display); font-weight:600; font-size:.98rem; color:#fff; margin-bottom:15px; }
.footer__col a{ display:block; color:var(--muted); padding:7px 0; min-height:22px; transition:color .3s,transform .3s; width:fit-content; }
.footer__col a:hover{ color:#fff; transform:translateX(4px); }
/* Le bouton du footer ne doit pas hériter des styles de lien de colonne
   (`.footer__col a` est plus spécifique que `.btn`, ce qui écrasait son padding). */
.footer__col a.btn{ display:inline-flex; width:auto; min-height:44px; padding:11px 20px; margin-top:16px; color:#04122c; }
.footer__col a.btn:hover{ color:#04122c; transform:none; }
.footer__bottom{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); color:var(--dim); font-size:.86rem; }

/* =========================================================
   CTA collante (mobile) + WhatsApp
   ========================================================= */
.sticky-cta{ position:fixed; left:12px; right:12px; bottom:12px; z-index:801; display:none; gap:10px; transform:translateY(140%); transition:transform .4s var(--ease); }
.sticky-cta.is-visible{ transform:none; }
.sticky-cta__btn{ flex:1; display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:14px; font-weight:600; font-size:1rem; color:#04122c; background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 14px 30px -10px var(--glow); }
.sticky-cta__wa{ width:54px; flex:none; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(180deg,#2bd66a,#12a850); }

.wa{ position:fixed; right:22px; bottom:22px; z-index:800; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#2bd66a,#12a850); box-shadow:0 14px 32px -12px rgba(18,168,80,.7); transition:transform .4s var(--ease); }
.wa:hover{ transform:scale(1.07) translateY(-2px); }
.wa__pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid #2bd66a; animation:wapulse 2.6s ease-out infinite; }
@keyframes wapulse{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.75);opacity:0} }

/* =========================================================
   Révélations
   ========================================================= */
.js [data-reveal]{ opacity:0; transform:translateY(24px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.js .hero__title .line > *{ transform:translateY(100%); }

/* Mode statique (aperçu / impression) */
html.is-static{ scroll-behavior:auto; }
html.is-static.is-flow .hero{ min-height:auto; padding:120px 0 80px; }
html.is-static .loader,html.is-static .grain,html.is-static .cursor{ display:none !important; }
html.is-static [data-reveal],html.is-static .reveal-lines,html.is-static .hero__title .line > *,html.is-static .hero__visual .hcard{ opacity:1 !important; transform:none !important; }
html.is-static .step .step__no{ color:#04122c; background:var(--blue-2); border-color:var(--blue-2); }
html.is-static .steps__line i{ height:100% !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .section__head--split{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .faq__grid{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .secteurs-band__inner{ grid-template-columns:1fr; }
  .methode__grid{ grid-template-columns:1fr; gap:8px; }
  .methode__intro{ position:static; }
  .notalways__grid{ grid-template-columns:1fr; gap:30px; align-items:start; }
  .notalways__head .section__title{ max-width:20ch; }
  /* Page Services : 11 pôles → 2 colonnes sur tablette */
  .poles{ grid-template-columns:repeat(2,1fr); }
  /* Page Méthode : évite → 2 colonnes */
  .avoids{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav__menu,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ height:min(58vh,420px); margin-top:8px; order:2; }
  .cases{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .tmos{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .capax__grid{ grid-template-columns:1fr; gap:28px; }
  .capax__media{ max-width:340px; margin-inline:auto; }
  .reassure__grid{ grid-template-columns:1fr; gap:30px; }
  .reassure__media{ max-width:340px; order:-1; }
  .reassure__cta{ justify-content:flex-start; }
  /* Page Contact : formulaire sous le texte */
  .contact-hero__grid{ grid-template-columns:1fr; gap:30px; }
  .cform{ order:2; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .analyse__grid{ grid-template-columns:1fr; gap:30px; }
  .analyse__media{ max-width:380px; order:-1; }
  .wa-alt{ flex-direction:column; text-align:center; gap:18px; }
  .wa-alt__txt p{ margin-inline:auto; }
  .wa-alt__btn{ width:100%; }
  /* Landing page : texte + visuel, puis formulaire */
  .lp-hero__grid{ grid-template-columns:1fr; gap:30px; }
  .lp-hero__form{ position:static; order:2; }
  .lp-hero__intro .lp-visual{ margin-inline:auto; }
  .lp-visual__cap,.lp-visual__sub{ text-align:center; margin-inline:auto; }
  .lp-header__cta{ display:none; }
  .lp-footer__inner{ grid-template-columns:1fr; gap:22px; }
  /* LP confiance */
  .invisible-grid{ grid-template-columns:1fr; gap:28px; }
  .lp-invisible{ order:-1; }
  .poles--4{ grid-template-columns:repeat(2,1fr); }
  .forwho{ grid-template-columns:1fr; max-width:520px; }
  .hiw{ grid-template-columns:1fr; gap:28px; max-width:420px; }
  .hiw::before{ display:none; }
  .gap{ grid-template-columns:1fr; max-width:520px; gap:14px; }
  .gap__vs span{ width:44px; height:44px; font-size:1.15rem; }
  .loop{ flex-direction:column; max-width:420px; }
  .loop__step{ max-width:none; width:100%; }
  .loop__arrow{ transform:rotate(90deg); }
  .cta__grid{ grid-template-columns:1fr; gap:26px; text-align:center; }
  .cta__lead{ margin-inline:auto; }
  .cta__actions{ justify-content:center; }
  .cta__media{ max-width:320px; margin-inline:auto; order:-1; }
  .cta .section__idx{ justify-content:center; }
  /* Page Solutions */
  .sols{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .leviers__media{ width:min(460px,100%); }
  /* Page Services */
  .poles{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  /* Page Méthode */
  .avoids{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
}
@media (max-width:768px){
  .sticky-cta{ display:flex; }
  .wa{ display:none; }
  .footer{ padding-bottom:120px; }
  .fico{ width:38px; height:38px; border-radius:11px; }
  .fico svg{ width:18px; height:18px; }
  .methode-viz .mfx__ico{ width:38px; height:38px; border-radius:11px; }
  .methode-viz .mfx__ico svg{ width:19px; height:19px; }
  .methode-viz .mfx__ico--2{ left:0; }
}
@media (max-width:620px){
  .methode__stats{ gap:22px; }
  .compare__col span,.compare__row span{ padding:14px 16px; font-size:.95rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .footer__brand{ grid-column:span 2; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hcard--chip{ display:none; }
  .case__ba{ grid-template-columns:52px 1fr; }
  /* Page Solutions */
  .cta--center .cta__actions{ flex-direction:column; align-items:stretch; }
  .cta--center .cta__actions .btn{ width:100%; }
  /* « Découvrir tous nos services » est long : on récupère de la place sur les
     petits écrans (carte moins large en padding, bouton pleine largeur, moins de
     padding interne) pour que le libellé tienne sur une seule ligne jusqu'à ~360px. */
  .bridge__card{ padding-inline:16px; }
  .bridge__cta .btn{ width:100%; padding-inline:14px; font-size:1rem; }
  .maybe{ padding:15px 16px; gap:13px; }
  .maybe p{ font-size:1rem; }
  .maybe__ico{ width:40px; height:40px; border-radius:11px; }
  /* Petit visuel : on allège à 2 icônes flottantes pour ne pas surcharger */
  .methode-viz .mfx__ico--2,
  .methode-viz .mfx__ico--4{ display:none; }
  /* Page Contact : formulaire et étapes en pleine largeur */
  .field--row{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .flow-sec__cta .btn{ width:100%; }
  .checklist{ grid-template-columns:1fr; gap:13px; }
  /* Landing page : boutons héros + confirmation pleine largeur */
  .lp-hero__actions{ flex-direction:column; align-items:stretch; }
  .lp-hero__actions .btn{ width:100%; }
  .cform__done-actions{ flex-direction:column; }
  .cform__done-actions .btn{ width:100%; }
  .poles--4{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  /* Les libellés sont incrustés dans l'image : on la laisse aller bord à bord
     sur petit écran pour qu'ils restent lisibles. */
  .leviers__media{ width:calc(100% + var(--pad) * 2); margin-inline:calc(var(--pad) * -1); }
}
@media (max-width:420px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__brand{ grid-column:span 1; }
  .compare__col,.compare__row{ grid-template-columns:1fr; }
  .compare__yes{ border-left:none; border-top:1px solid var(--line); }
  .compare__col--head{ display:none; }
}
@media (min-width:1600px){ :root{ --container:1280px; } }

@media (hover:none){ .cursor{ display:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js [data-reveal],.js .reveal-lines,.js .hero__title .line > *,.js .hero__visual .hcard{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
}