/* ════════════════════════════════════════════════
   Webnexus — Feuille de style principale
   Police : Poppins (Google Fonts)
   Palette :
     Fond          #0a0a0a (+ dégradé rouge radial)
     Near-black    #0a0a0d
     Cartes        rgba(20,20,20,.6) (glassmorphism)
     Accent violet #8385ed
     Violet foncé  #8385ed
     Gris          #8a8a92
     Gris doux     #b8b8c0
     Lignes        rgba(255,255,255,.09)
     Violet soft   rgba(131,133,237,.10)
     Violet glow   rgba(131,133,237,.40)
   Easing         cubic-bezier(.16,1,.3,1)
════════════════════════════════════════════════ */

/* ── Variables globales ── */
:root {
  /* Alias de compatibilité → pointent vers les tokens (tokens.css).
     Permet à tout le CSS existant d'adopter le nouveau design system. */
  --bg:          var(--bg-000);
  --bg-near:     var(--bg-100);
  --bg-card:     var(--bg-200);
  --accent:      var(--violet-500);
  --accent-dark: var(--violet-600);
  --white:       var(--text-100);
  --gray:        var(--text-300);
  --gray-soft:   var(--text-200);
  --line:        var(--border-100);
  /* --violet-soft / --violet-glow : fournis par tokens.css */
  --ease:        var(--ease-out);   /* courbe signature unique (A4) — cohérence = premium */

  --container:   1200px;
  --gap:         clamp(1.5rem, 4vw, 2.5rem);
  --radius:      var(--radius-md);
  --transition:  .4s var(--ease);
}

/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Garde-fou anti scroll horizontal (mobile). Nécessaire au niveau racine pour
     clipper aussi les éléments position:fixed (ex. l'aurora de fond en inset:-6%),
     que overflow-x sur body ne clippe pas. */
  overflow-x: hidden;   /* fallback navigateurs anciens */
  overflow-x: clip;     /* moderne : clippe sans conteneur de scroll → position:sticky préservée */
}

body {
  font-family: var(--font-body);
  background: var(--bg-000);
  color: var(--text-100);
  overflow-x: hidden;   /* fallback */
  overflow-x: clip;     /* moderne — pas de conteneur de scroll (sticky OK) */
}

img, svg { display: block; max-width: 100%; }

ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ════════════════════════════════════════════════
   UTILITAIRES
════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.container--narrow {
  max-width: 760px;
}

.accent { color: var(--accent); }

.section {
  /* §1 — aucun trou vertical > 160px : 56→80px/côté, soit ≤ 160px cumulés entre 2 sections */
  padding-block: clamp(3.5rem, 7vw, 5rem);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ════════════════════════════════════════════════
   §1 — FIXES GLOBAUX (couche craft V3)
════════════════════════════════════════════════ */

/* Contraste : corps de texte remonté en --text-200 (labels restent en --text-300) */
.service-desc, .service-list li,
.avap-list--before li, .avap-list--after li,
.stat-desc, .step-text, .pilier-text,
.node-desc, .temo-quote,
.faq-answer p, .cta-sub, .footer-baseline {
  color: var(--text-200);
}

/* Icônes agrandies — plus lisibles, plus présentes */
.service-icon      { width: 60px; height: 60px; }
.service-icon svg  { width: 32px; height: 32px; }
.pilier-icon svg   { width: 32px; height: 32px; }
.avap-list svg     { width: 20px; height: 20px; }

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -.03em;
  position: relative;
  z-index: 0;
}

/* Lueur violette très douce derrière les grands titres de section,
   comme si le titre émettait sa lumière. Subtil, ne gêne pas la lecture. */
.section-title::before {
  content: "";
  position: absolute;
  inset: -60% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 60% at 50% 50%,
      rgba(131, 133, 237, 0.10), transparent 72%);
}

/* ── Reveal au scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Décalage en cascade pour les grilles */
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  /* Fluide et rapide, uniquement transform/opacité/couleurs (pas de reflow) */
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out),
              background-color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              color .25s var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Bouton primaire : blanc, texte sombre — label lisible dans TOUS les états.
   Hover = même fond clair + texte sombre (contraste ~18:1, WCAG AA) + glow violet. */
.btn--primary {
  background: var(--white);
  color: var(--bg-000);
}

.btn--primary:hover {
  color: var(--bg-000);
  transform: translateY(-2px);   /* léger lift (ignoré sur les boutons magnétiques → GSAP) */
  box-shadow: 0 10px 34px rgba(131, 133, 237, 0.38),
              0 0 0 1px rgba(131, 133, 237, 0.40);   /* glow statique (fallback reduced-motion) */
  animation: btn-glow-pulse 1.8s var(--ease-io) infinite;   /* pulse doux du glow */
}

/* Press tactile — scale 0.98 (le détail qui manque presque toujours).
   Boutons magnétiques : géré en JS (GSAP pilote leur transform → cf. app.js). */
.btn:not([data-magnetic]):active { transform: scale(0.98); }

/* Bouton ghost (secondaire) : bordure animée — un trait de lumière violet
   parcourt le contour en continu (conic-gradient piloté par --btn-angle). */
.btn--ghost {
  background: rgba(255, 255, 255, 0.015);
  color: var(--white);
  border: 0;
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                          /* épaisseur de la bordure */
  background:
    conic-gradient(from var(--btn-angle),
      transparent 210deg,
      var(--violet-500) 300deg,
      var(--violet-400) 330deg,
      transparent 360deg),
    linear-gradient(var(--line), var(--line));   /* rail de base subtil */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;          /* ne garde que l'anneau de bordure */
  animation: btn-border-spin 3.2s linear infinite;
  pointer-events: none;
}

/* Hover : fond violet translucide, léger lift, trait plus intense */
.btn--ghost:hover {
  background: rgba(131, 133, 237, 0.10);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--ghost:hover::before { filter: brightness(1.3); }

.btn--ghost:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-arrow {
  transition: transform .3s var(--ease);
}

/* Bouton blanc (CTA final) — unifié avec le primaire : fond clair conservé + glow violet */
.btn--white {
  background: var(--white);
  color: var(--bg-000);
  font-size: 1.05rem;
  padding: 1rem 2.2rem;
}

.btn--white:hover {
  color: var(--bg-000);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(131, 133, 237, 0.40),
              0 0 0 1px rgba(131, 133, 237, 0.42);
  animation: btn-glow-pulse 1.8s var(--ease-io) infinite;
}

.btn--lg {
  padding: 1.1rem 2.5rem;
  font-size: 1.1rem;
}

/* Mobile : le CTA final (btn--white btn--lg) est trop imposant → padding + taille
   réduits, largeur auto centrée (ne prend pas tout l'écran), texte compact. */
@media (max-width: 768px) {
  .cta-final .btn--white.btn--lg {
    padding: .85rem 1.5rem;
    font-size: .95rem;
    max-width: 100%;
  }
}

/* ── Animations partagées des CTA ── */
/* Bordure lumineuse du ghost : angle piloté pour tourner en continu.
   @property permet l'interpolation fluide de l'angle. */
@property --btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes btn-border-spin {
  to { --btn-angle: 360deg; }
}

/* Glow violet pulsé des boutons pleins au survol */
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 8px 26px rgba(131, 133, 237, 0.28),
                         0 0 0 1px rgba(131, 133, 237, 0.30); }
  50%      { box-shadow: 0 12px 42px rgba(131, 133, 237, 0.48),
                         0 0 0 1px rgba(131, 133, 237, 0.42); }
}

/* ════════════════════════════════════════════════
   CTA INTERMÉDIAIRES (accroche + bouton, entre sections)
   Discrets mais présents, centrés, bien séparés des sections.
════════════════════════════════════════════════ */
.cta-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 4.75rem);
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.cta-inline-hook {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text-100);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}

/* Scrollé : fond semi-transparent + blur */
.site-nav.is-scrolled {
  background: rgba(6, 6, 8, .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.15rem clamp(1.25rem, 5vw, 2.5rem);
  max-width: var(--container);
  margin-inline: auto;
  transition: padding .4s var(--ease);
}

/* Se réduit légèrement au scroll (craft A4 — courbe signature) */
.site-nav.is-scrolled .nav-inner { padding-block: .7rem; }
.site-nav.is-scrolled .nav-logo  { font-size: 1.15rem; }
.nav-logo { transition: font-size .4s var(--ease); }

/* Logo */
.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
}

/* Logo image : hauteur calée sur la nav, largeur auto (proportions gardées).
   Se réduit légèrement au scroll, comme le reste de la nav. */
.nav-logo-img {
  display: block;
  height: 38px;
  width: auto;
  transition: height .4s var(--ease);
}

.site-nav.is-scrolled .nav-logo-img { height: 32px; }

.logo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px var(--accent); }
  50%       { box-shadow: 0 0 18px var(--accent), 0 0 32px var(--violet-glow); }
}

/* Liens nav */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.nav-link {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  color: var(--gray-soft);
  transition: color .25s var(--ease);
}

/* Soulignement qui se déploie de gauche à droite (A5) */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: scaleX(1); }

/* CTA nav — unifié (identique au bouton primaire : blanc solide + glow violet) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.35rem;
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 600;
  background: var(--white);
  color: var(--bg-000);
  transition: box-shadow .3s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}

.nav-cta:hover {
  color: var(--bg-000);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(131, 133, 237, 0.38),
              0 0 0 1px rgba(131, 133, 237, 0.40);
  animation: btn-glow-pulse 1.8s var(--ease-io) infinite;
}

.nav-cta:active { transform: scale(0.98); }

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .4rem;
  margin-left: auto;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Barre nav au-dessus de l'overlay mobile (burger toujours cliquable) */
.nav-inner { position: relative; z-index: 2; }

/* Menu mobile — plein écran, liens en cascade */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;              /* fallback */
  height: 100dvh;            /* couvre tout l'écran malgré la barre d'URL mobile */
  z-index: 90;               /* au-dessus de TOUT le contenu de page, sous la barre nav
                                (z-100) → le logo et la croix de fermeture restent cliquables */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Air en haut : les liens démarrent bien sous la barre logo/croix, sans coller */
  padding: clamp(6rem, 16vh, 9rem) clamp(1.5rem, 8vw, 3rem) 3rem;
  background: var(--bg-100);  /* fond PLEIN et opaque — on ne voit plus la page derrière */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-link {
  padding: 1rem 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-100);
  border-bottom: 1px solid var(--line);
  /* Cascade — état de départ */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s var(--ease);
}

.mobile-link:hover { color: var(--accent); }

.mobile-menu.is-open .mobile-link {
  opacity: 1;
  transform: none;
}

/* Décalage régulier ~0.08s entre chaque lien (stagger constant A4) */
.mobile-menu.is-open .mobile-link:nth-child(1) { transition-delay: .06s; }
.mobile-menu.is-open .mobile-link:nth-child(2) { transition-delay: .14s; }
.mobile-menu.is-open .mobile-link:nth-child(3) { transition-delay: .22s; }
.mobile-menu.is-open .mobile-link:nth-child(4) { transition-delay: .30s; }
.mobile-menu.is-open .mobile-link:nth-child(5) { transition-delay: .38s; }

.mobile-link--cta {
  margin-top: 2rem;
  padding: .95rem 1.5rem;
  border-bottom: none;
  border-radius: 100px;
  text-align: center;
  background: var(--white);
  color: var(--bg-000);
  font-size: 1.05rem;
  font-weight: 600;
}

.mobile-link--cta:hover {
  color: var(--bg-000);
  box-shadow: 0 10px 32px rgba(131, 133, 237, 0.38),
              0 0 0 1px rgba(131, 133, 237, 0.40);
  animation: btn-glow-pulse 1.8s var(--ease-io) infinite;
}

/* Scroll de fond verrouillé quand le menu est ouvert */
body.nav-open { overflow: hidden; }

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-logo-img { height: 32px; }
}

/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  /* Respire en bas : évite que la trust-bar touche le marquee (≥ --space-lg) */
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

/* Fond */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Grille subtile */
.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: 60px 60px;
  /* masque radial : visible au centre, disparaît sur les bords */
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}

/* Aurora glow violet derrière le titre */
.hero-aurora {
  position: absolute;
  left: 50%;
  top: 16%;
  width: min(1100px, 120vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
      var(--violet-glow) 0%,
      rgba(131, 133, 237, 0.12) 38%,
      transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

/* Contenu */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-soft);
  background: var(--violet-soft);
  margin-bottom: 1rem;   /* rapproché du H1 (avant 2rem) */
  letter-spacing: .04em;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

/* ── Preuve sociale (au-dessus du badge) ──
   Plus petite et plus légère que l'eyebrow : hiérarchie preuve → badge → H1.
   Toute la ligne est un lien vers la fiche Google (curseur pointer natif). */
.hero-proof {
  display: flex;                  /* block-level + fit-content centré → sa propre ligne, au-dessus du badge */
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;           /* petit espace entre la preuve et le badge en dessous */
  padding: .3rem .7rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-soft);
  white-space: nowrap;            /* reste sur une seule ligne, jamais d'overflow */
  transition: color .25s var(--ease),
              background-color .25s var(--ease);
}

.hero-proof-count { color: var(--gray); }

.hero-proof-score {
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}

/* Petit point séparateur entre le compteur et la note */
.hero-proof-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  flex-shrink: 0;
}

/* Étoiles : remplissage violet (DA) + fin contour blanc, alignées au texte */
.hero-proof-stars {
  display: inline-flex;
  align-items: center;
  gap: .12rem;
}

.hero-proof-stars svg {
  width: .95em;
  height: .95em;
  fill: var(--violet-500);
  stroke: rgba(255, 255, 255, .82);
  stroke-width: 1.25;
  transition: filter .25s var(--ease);
}

/* Hover : légère illumination (fond violet doux + texte plus clair + halo étoiles) */
.hero-proof:hover {
  color: var(--white);
  background: rgba(131, 133, 237, 0.10);
}

.hero-proof:hover .hero-proof-count { color: var(--gray-soft); }

.hero-proof:hover .hero-proof-stars svg {
  filter: drop-shadow(0 0 5px var(--violet-glow));
}

/* Titre hero */
.hero-title {
  font-family: var(--font-title);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;   /* tracking optique : plus c'est gros, plus c'est serré (A2) */
  /* Marge négative : annule visuellement le padding-bottom (0.18em) de la dernière
     .hero-line et rapproche franchement le paragraphe. Ne clippe rien (le clip est
     interne aux .hero-line). Tout le bloc paragraphe → boutons → trust-bar remonte
     d'un bloc, distances internes inchangées. */
  margin-bottom: -0.35rem;
  text-wrap: balance;
}

/* Lignes du titre — masque + révélation verticale (GSAP) */
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em; /* évite le rognage des jambages (p, g, y) + le surligneur */
}

.hero-line-inner {
  display: block;
  will-change: transform;
}

/* Surligneur violet sous un mot du titre — trait épais, légèrement organique.
   Pas un underline « lien » : un coup de surligneur posé sous le mot. */
.hl-underline {
  position: relative;
  white-space: nowrap;
}

.hl-underline::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: -.05em;   /* petit espace entre le bas des lettres et le trait */
  height: clamp(3px, 0.1em, 5px);
  background: var(--violet-500);
  border-radius: 6px 7px 5px 8px / 7px 5px 8px 6px;   /* arrondi irrégulier = organique */
  transform: rotate(-.5deg);
  transform-origin: left center;
}

/* Mot en italique dans le titre (reste blanc) */
.hl-italic { font-style: italic; }

/* Image remplaçant visuellement « inverse » dans le titre (desktop).
   Hauteur ≈ cap-height, alignée sur la ligne de base des mots voisins ;
   petites marges = une espace-mot de chaque côté. N'élargit pas assez la
   ligne pour casser le retour à la ligne (l'image est plus étroite que le mot). */
.hero-title-img {
  height: 2.5em;                /* taille inchangée */
  width: auto;
  display: inline-block;
  vertical-align: -.2em;        /* descendue pour mieux s'asseoir sur la ligne de base */
  /* Marges VERTICALES négatives : la boîte de ligne ne grandit plus (2.5em − 1.56em
     ≈ 0.95em = line-height du titre) → l'espacement entre « capte vos clients » et
     « On … la tendance » redevient identique aux autres lignes. L'image déborde
     visuellement de sa ligne sans forcer un line-height plus grand.
     Marges HORIZONTALES resserrées pour un ensemble « On [flèche] la tendance »
     plus compact : marge négative qui rogne une partie de l'espace-mot, en gardant
     une petite respiration (les mots ne touchent pas l'image).
     Asymétrique : côté droit resserré davantage (flèche → « la tendance »).
     Ordre : haut / droite / bas / gauche (vertical inchangé à -.78em). */
  margin: -.78em -.24em -.78em -.14em;
}

/* Desktop uniquement — dernier resserrement horizontal autour du symbole
   (surtout à droite, entre la flèche et « la tendance »). Le mobile, validé,
   conserve les marges de base ci-dessus. Vertical inchangé (-.78em). */
@media (min-width: 769px) {
  .hero-title-img { margin: -.78em -.34em -.78em -.19em; }
}

/* ── Titre hero sur mobile — répartition contrôlée de la 3e ligne ──
   Sous 768px, « On [symbole] la » reste soudé sur une ligne (nowrap) et
   « tendance. » retombe seul, centré, dessous. Desktop inchangé : la ligne
   tient entière, donc la règle ne s'applique jamais au-delà du breakpoint. */
@media (max-width: 768px) {
  .hero-onreverse { white-space: nowrap; }
  /* Un peu d'air entre le header/logo et le début du hero (bloc preuve sociale) */
  .hero { padding-top: 104px; }
}

/* Masquage visuel accessible : « inverse » reste lu par Google et les
   lecteurs d'écran (« On inverse la tendance »), sans être affiché. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  color: var(--text-200);
  max-width: 60ch;          /* ~65 caractères max : au-delà, l'œil décroche (A2) */
  margin-inline: auto;
  margin-bottom: var(--space-md);   /* 24px — rapproche les boutons du paragraphe (avant 48px) */
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  /* Plus d'air entre les CTA et la trust-bar */
  margin-bottom: 2.75rem;
}

/* Réassurance */
.hero-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-reassurance li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray);
}

/* ── Logos d'outils flottants (décoratifs) ── */
.hero-logos {
  position: absolute;
  inset: 0;
  z-index: 0;              /* au-dessus du fond, SOUS le contenu (z-index:1) → jamais devant le texte */
  pointer-events: none;
}

.hero-logo {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;     /* fond transparent conservé, aucun cadre carré */
  border-radius: 15px;
  opacity: .85;
  filter: drop-shadow(0 0 12px rgba(131, 133, 237, 0.22));   /* halo doux épousant le logo */
  will-change: transform;
  transform: rotate(var(--rot, 0deg));   /* inclinaison (conservée en reduced-motion) */
  animation: hero-logo-float 4s ease-in-out infinite;
}

/* Positions (hauteurs inchangées) + léger rapprochement vers le centre + inclinaison.
   Gauche : rotation négative ; droite : rotation positive. */
.hero-logo--1 { top: 21%; left:  11%;  --rot: -7deg; animation-duration: 4.2s; animation-delay: 0s;  }
.hero-logo--2 { top: 70%; left:  12.5%; --rot: -6deg; animation-duration: 3.4s; animation-delay: .6s; }
.hero-logo--3 { top: 30%; right: 12%;  --rot:  7deg; animation-duration: 4.8s; animation-delay: .3s; }
.hero-logo--4 { top: 78%; right: 11%;  --rot:  6deg; animation-duration: 3.8s; animation-delay: .9s; }

/* Le flottement conserve l'inclinaison : rotate constant + translateY animé */
@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0)    rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
}

/* Tablette/mobile (< 900px) : masqués → jamais de chevauchement avec le texte */
@media (max-width: 899px) {
  .hero-logos { display: none; }
}

/* Mouvement réduit : logos figés mais visibles */
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

/* ════════════════════════════════════════════════
   MARQUEE
════════════════════════════════════════════════ */
.marquee-wrap {
  overflow: hidden;                 /* clippe la piste → aucun overflow horizontal de page */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  background: transparent;
}

/* Piste = 6 groupes IDENTIQUES. L'animation translate de -50% = décalage de
   3 groupes ; comme tous les groupes sont identiques, le motif reboucle sans
   la moindre coupure. Une moitié (3 groupes) est bien plus large que l'écran,
   donc aucun vide n'apparaît jamais à droite. Durée calée pour conserver la
   vitesse d'origine (~47px/s). */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 80s linear infinite;
}


/* Un groupe = le motif complet des 6 services + losanges.
   padding-right referme le motif → espacement uniforme au raccord entre groupes. */
.marquee-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}

.marquee-item {
  font-size: .95rem;
  font-weight: 500;
  color: var(--gray-soft);
  white-space: nowrap;
}

.marquee-sep {
  color: var(--accent);
  font-size: 1rem;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════
   SERVICES
════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;   /* cartes de hauteur égale par rangée */
}

@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  /* Survol identique et rapide sur les 6 cards */
  transition: transform .2s var(--ease-out),
              border-color .2s var(--ease-out),
              box-shadow .2s var(--ease-out);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 0 40px var(--violet-soft);
}

/* Le décalage de cascade .reveal (nth-child) ne doit pas ralentir le survol :
   délai nul et uniforme sur les 6 cards (sinon la card 4 « traîne »). */
.services-grid .service-card { transition-delay: 0s; }

/* Halo qui suit le curseur dans la carte (--mx / --my via JS) */
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 200px at var(--mx, 50%) var(--my, 50%),
    var(--violet-soft), transparent 70%
  );
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.service-card:hover .card-glow { opacity: 1; }

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--violet-soft);
  border: 1px solid rgba(131, 133, 237, .2);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.service-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .6rem;
  white-space: nowrap;   /* chaque titre tient sur une seule ligne en desktop */
}

.service-desc {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  min-height: 4.5rem;   /* réserve ~3 lignes → les puces démarrent à la même hauteur sur une rangée */
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.service-list li {
  font-size: .85rem;
  color: var(--gray-soft);
  padding-left: 1.1rem;
  position: relative;
}

.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* ════════════════════════════════════════════════
   AVANT / APRÈS
════════════════════════════════════════════════ */
.avant-apres { background: transparent; }

.avap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 700px) {
  .avap-grid { grid-template-columns: 1fr; }
}

.avap-card {
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Carte "Après" : dégradé violet + bordure accentuée */
.avap-card--after {
  border-color: rgba(131, 133, 237, .3);
  background: linear-gradient(135deg, var(--bg-card), rgba(131, 133, 237, .08));
}

.avap-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.5rem;
}

.avap-label--after { color: var(--accent); }

.avap-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.avap-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .92rem;
  line-height: 1.55;
}

.avap-list--before li { color: var(--gray); }
.avap-list--after  li { color: var(--gray-soft); }

.avap-list svg { flex-shrink: 0; margin-top: .15em; }

/* Croix de la colonne « sans dispositif » — rouge doux désaturé (pas criard),
   opacité légèrement réduite pour rester dans l'ambiance dark premium.
   Surcharge l'attribut stroke inline (#8a8a92). N'affecte pas les checks violets. */
.avap-list--before svg path { stroke: rgba(229, 115, 115, 0.85); }

/* ════════════════════════════════════════════════
   STATS
════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-item {
  padding: 2.5rem 2rem;
  text-align: center;
  border-right: 1px solid var(--line);
}

.stat-item:last-child { border-right: none; }

@media (max-width: 900px) {
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--line); }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 500px) {
  .stat-item { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-item:last-child { border-bottom: none; }
}

.stat-number {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;              /* A2 — jamais 800/900 */
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .6rem;
}

.stat-desc {
  font-size: .85rem;
  color: var(--gray);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════
   MÉTHODE — SCROLL-DRIVEN
════════════════════════════════════════════════ */
.methode { background: transparent; }

.methode-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 900px) {
  .methode-layout { grid-template-columns: 1fr; }
}

/* ── Étapes scrollables (colonne gauche) ── */
.methode-steps {
  display: flex;
  flex-direction: column;
}

.methode-step {
  display: flex;
  gap: 1.5rem;
  padding-block: clamp(3rem, 6vw, 5rem);
  opacity: .35;
  transition: opacity .5s var(--ease);
}

.methode-step.is-active {
  opacity: 1;
}

.methode-step:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.step-number {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .1em;
  padding-top: .3rem;
  flex-shrink: 0;
  width: 28px;
}

.step-body { flex: 1; }

.step-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray);
  margin-bottom: .5rem;
}

.step-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: .75rem;
}

.step-text {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.7;
}

/* ── Panneau sticky (colonne droite) ── */
.methode-panel {
  position: sticky;
  top: 120px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  overflow: hidden;
}

/* Halo qui se déplace verticalement derrière le noeud actif */
.panel-halo {
  position: absolute;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--violet-soft) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: top .6s var(--ease);
  filter: blur(20px);
}

/* Noeuds */
.panel-nodes {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.panel-node {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: .25rem;
  position: relative;
}

/* ── Ligne de progression continue ──
   Un seul rail gris, du centre du 1er point au centre du dernier
   (calé précisément en JS). Le remplissage violet grandit de haut
   en bas, proportionnel au scroll — jamais segmenté. */
.panel-line {
  position: absolute;
  left: 8px;                 /* centré sur l'axe des points (18px → centre à 9px) */
  top: 11px;                 /* fallback ; recalé au centre exact des points en JS */
  bottom: 11px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  z-index: 0;
}

.panel-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;                 /* piloté au scroll (JS) */
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--violet-glow);
}

/* Dot du noeud — tous rigoureusement identiques */
.node-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--gray);
  background: #0a0a0d;
  flex-shrink: 0;
  margin-top: .15rem;
  transition: border-color .4s, background .4s, box-shadow .4s;
  position: relative;
  z-index: 1;
}

/* Point déjà passé : plein violet */
.panel-node.is-past .node-dot {
  border-color: var(--accent);
  background: var(--accent);
}

/* Point actif : plein violet + glow */
.panel-node.is-active .node-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--violet-soft), 0 0 14px var(--violet-glow);
}

.node-content {
  padding-bottom: 2.5rem;
}

/* Dernier noeud : pas d'espace superflu sous le point */
.panel-node:last-child .node-content { padding-bottom: 0; }

.node-title {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .15rem;
  color: var(--gray-soft);
  transition: color .4s;
}

.panel-node.is-active .node-title,
.panel-node.is-past   .node-title { color: var(--white); }

.node-desc {
  font-size: .8rem;
  color: var(--gray);
}

/* Desktop — titres d'étapes un cran plus présents dans le panneau timeline
   (sous-texte relevé très légèrement pour l'équilibre). Alignement, points,
   progress bar et layout inchangés ; mobile (≤900px) garde les tailles de base. */
@media (min-width: 901px) {
  .node-title { font-size: 1.05rem; }
  .node-desc  { font-size: .82rem; }
}

.panel-caption {
  margin-top: 1.5rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray);
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

/* Sur mobile : sticky désactivé */
@media (max-width: 900px) {
  .methode-panel { position: static; }
}

/* ════════════════════════════════════════════════
   POURQUOI WEBNEXUS
════════════════════════════════════════════════ */
/* ── Grille bento asymétrique (desktop) ──
   Card « hero » haute à gauche, une large en haut à droite,
   deux plus compactes dessous : rythme volontaire et équilibré. */
.piliers-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: minmax(190px, auto);
  gap: 1.25rem;
}

.pilier-card:nth-child(1) { grid-column: 1;          grid-row: 1 / span 2; }
.pilier-card:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.pilier-card:nth-child(3) { grid-column: 2;          grid-row: 2; }
.pilier-card:nth-child(4) { grid-column: 3;          grid-row: 2; }

/* Tablette : 2 colonnes égales, on annule le bento */
@media (max-width: 900px) {
  .piliers-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .pilier-card:nth-child(1),
  .pilier-card:nth-child(2),
  .pilier-card:nth-child(3),
  .pilier-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
  .pilier-card:nth-child(1) { justify-content: flex-start; }
}

/* Mobile (< 768px) : pile de cards identiques, chiffres de taille égale */
@media (max-width: 768px) {
  .piliers-grid { grid-template-columns: 1fr; }

  /* Taille FIXE et identique pour les 4 chiffres (en rem, indépendante de la card).
     Spécificité renforcée (.piliers-grid …) pour battre la règle desktop du 01,
     qui est déclarée plus bas dans le fichier. */
  .piliers-grid .pilier-num {
    font-size: 3.25rem;
    top: .9rem;
    right: 1.2rem;
  }
  .piliers-grid .pilier-card:nth-child(1) .pilier-num {
    font-size: 3.25rem;
  }
}

.pilier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-100);
  border-radius: var(--radius);
  padding: 2rem;
  /* Survol : bordure + ombre douces, rapides et identiques sur les 4 */
  transition: transform .25s var(--ease-out),
              border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
  /* État masqué (révélation au scroll) */
  opacity: 0;
  transform: translateY(26px);
}

/* La cascade .reveal (nth-child) ne doit pas ralentir le survol :
   délai de transition nul et uniforme (le stagger passe par animation-delay). */
.piliers-grid .pilier-card { transition-delay: 0s; }

/* Card « hero » (première) : plus d'air, titre plus grand, léger fond violet */
.pilier-card:nth-child(1) {
  justify-content: space-between;
  padding: 2.4rem;
  background: linear-gradient(160deg, var(--bg-card), rgba(131, 133, 237, .06));
}

.pilier-card:nth-child(1) .pilier-title { font-size: 1.35rem; }

/* Révélation au scroll — cascade via animation (indépendante du survol) */
.pilier-card.is-visible {
  opacity: 1;
  transform: none;
  animation: pilier-reveal .6s var(--ease-out) backwards;
}

.piliers-grid .pilier-card:nth-child(1).is-visible { animation-delay: 0s;   }
.piliers-grid .pilier-card:nth-child(2).is-visible { animation-delay: .08s; }
.piliers-grid .pilier-card:nth-child(3).is-visible { animation-delay: .16s; }
.piliers-grid .pilier-card:nth-child(4).is-visible { animation-delay: .24s; }

@keyframes pilier-reveal {
  from { opacity: 0; transform: translateY(26px); }
}

/* Survol : lift subtil + bordure qui s'illumine */
.piliers-grid .pilier-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-glow);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Spotlight violet qui suit le curseur (--mx / --my via JS) */
.pilier-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
              rgba(131, 133, 237, .14), transparent 62%);
  z-index: 0;
}

.pilier-card:hover .pilier-glow { opacity: 1; }

/* Grand chiffre décoratif, éditorial, en fond très translucide */
.pilier-num {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  font-family: var(--font-title);
  font-size: clamp(3.75rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text-100);
  opacity: .04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: color .3s var(--ease-out), opacity .3s var(--ease-out);
}

/* Au survol : le chiffre passe en violet, toujours translucide (synchronisé sur les 4) */
.pilier-card:hover .pilier-num {
  color: var(--violet-500);
  opacity: .12;
}

.pilier-card:nth-child(1) .pilier-num {
  font-size: clamp(6rem, 11vw, 10rem);
}

/* Desktop bento : 03/04 sont sur des cards plus hautes (rangée du bas) ; leur
   chiffre paraît « posé plus bas » à top:1rem. On le remonte d'un cran pour
   aligner le haut des 4 chiffres. Scopé au bento (ne touche ni tablette ni mobile). */
@media (min-width: 901px) {
  .pilier-card:nth-child(3) .pilier-num,
  .pilier-card:nth-child(4) .pilier-num {
    top: .6rem;
  }
}

/* Icône dans une pastille arrondie (cohérent avec les services) */
.pilier-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--violet-soft);
  border: 1px solid rgba(131, 133, 237, .2);
  margin-bottom: 1.25rem;
}

.pilier-body {
  position: relative;
  z-index: 1;
}

.pilier-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

.pilier-text {
  font-size: .88rem;
  color: var(--gray);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════
   TÉMOIGNAGES
════════════════════════════════════════════════ */
.temoignages { background: transparent; }

.temo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .temo-grid { grid-template-columns: 1fr; }
}

.temo-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.temo-stars {
  display: flex;
  gap: .25rem;
}

.temo-quote {
  flex: 1;
  font-size: .92rem;
  color: var(--gray-soft);
  line-height: 1.7;
  font-style: normal;
}

.temo-author {
  display: flex;
  align-items: center;
  gap: .85rem;
}

/* Avatar initial dans un rond dégradé violet */
.temo-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.temo-name {
  font-size: .9rem;
  font-weight: 700;
}

.temo-role {
  font-size: .78rem;
  color: var(--gray);
  margin-top: .1rem;
}

/* ════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child { border-bottom: none; }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.4rem 1.75rem;
  text-align: left;
  font-size: .95rem;
  font-weight: 600;
  color: var(--white);
  background: var(--bg-card);
  transition: color .25s;
}

.faq-trigger:hover { color: var(--accent); }

.faq-trigger[aria-expanded="true"] { color: var(--accent); }

/* Icône +/× — deux barres en pseudo-éléments, PARFAITEMENT centrées (indépendant de
   la police, identique desktop + mobile à toute taille). Rotation 45° à l'ouverture → +  devient ×. */
.faq-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--gray);
  transition: border-color .3s, color .3s, transform .4s var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
}

.faq-icon::before {          /* barre horizontale */
  width: 11px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}

.faq-icon::after {           /* barre verticale */
  width: 1.6px;
  height: 11px;
  transform: translate(-50%, -50%);
}

.faq-trigger[aria-expanded="true"] .faq-icon {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(45deg);
}

/* Réponse animée en hauteur */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease), padding .45s var(--ease);
}

/* L'attribut hidden est retiré par JS, max-height animé via JS inline */
.faq-answer:not([hidden]) {
  max-height: 600px;
}

.faq-answer p {
  padding: 0.75rem 1.75rem 1.6rem;
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════
   CTA FINAL
════════════════════════════════════════════════ */
.cta-final {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.cta-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(131, 133, 237, .18), transparent);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}

.cta-sub {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem 4rem;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  max-width: var(--container);
  margin-inline: auto;
  align-items: start;
}

/* Sous 900px : la marque passe au-dessus des colonnes (4 colonnes = besoin de largeur) */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-bottom: .9rem;
}

/* Logo image du footer — même visuel que le header, hauteur adaptée */
.footer-logo-img {
  display: block;
  height: 40px;
  width: auto;
}

.footer-baseline {
  font-size: .85rem;
  color: var(--gray);
  line-height: 1.65;
}

/* Réseaux sociaux — icônes discrètes, hover violet */
.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-300);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}

.footer-social-link:hover {
  color: var(--accent);
  border-color: var(--border-glow);
}

.footer-social-link:active { transform: scale(0.94); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;          /* 4 colonnes : repli propre si la largeur manque */
  gap: 2.5rem 3rem;
}

@media (max-width: 600px) {
  .footer-nav { flex-direction: column; gap: 1.5rem; }
}

.footer-col-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray);
  margin-bottom: .85rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-col a {
  font-size: .85rem;
  color: var(--gray-soft);
  transition: color .25s;
}

.footer-col a:hover { color: var(--white); }

/* Barre du bas */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem clamp(1.25rem, 5vw, 2.5rem);
  max-width: var(--container);
  margin-inline: auto;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--gray);
}

/* ════════════════════════════════════════════════
   PAGES DE CONTENU STANDARD (Mentions légales, Confidentialité, Cookies…)
   Rendu prose lisible sur fond dark, cohérent avec le design system.
════════════════════════════════════════════════ */
.page-main {
  /* Dégage la barre de navigation fixe en haut, respire avant le footer */
  padding-top: clamp(7rem, 12vh, 9.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  min-height: 70vh;
}

.legal-content {
  color: var(--text-200);
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Titre principal de la page (1er h2 du contenu) */
.legal-content h2 {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text-100);
  margin-bottom: 1.5rem;
}

/* Sous-titres de section */
.legal-content h3 {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-100);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}

.legal-content p { margin-bottom: 1.1rem; }

.legal-content strong { color: var(--text-100); font-weight: 600; }

/* Listes — on restaure les puces (le reset global met list-style:none) */
.legal-content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1.1rem;
}

.legal-content li { margin-bottom: .5rem; }

.legal-content li::marker { color: var(--accent); }

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .25s var(--ease);
}

.legal-content a:hover { color: var(--violet-400); }

/* ════════════════════════════════════════════════
   prefers-reduced-motion
   Toutes les animations sont désactivées,
   le contenu reste visible
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .word-reveal {
    opacity: 1;
    transform: none;
  }

  .logo-dot,
  .eyebrow-dot { animation: none; }

  .marquee-track { animation: none; }

  /* CTA : bordure qui tourne + pulse désactivés ; boutons statiques,
     lisibles et cliquables (le glow au survol reste, en version statique). */
  .btn--ghost::before { animation: none; }
  .btn--primary:hover,
  .btn--white:hover,
  .nav-cta:hover,
  .mobile-link--cta:hover { animation: none; }
}