/* ==========================================================================
   LASDA.SITE — Design system « EMERALD & CITRUS »
   Ratio de charte : ink 86% · Voltage (verts) 11% · Citrus (CTA) 3%
   Aucun violet (255–305°) ET aucun bleu (200–255°) dans ce fichier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · TOKENS
   -------------------------------------------------------------------------- */
/* ══════════════════════════════════════════════════════════════════════════
   CHARTE MONOCHROMATIQUE — une seule teinte, déclinée en luminosités

   Le problème réglé ici : l'échelle de fonds était dérivée à 158° (vert
   feuille), ce qui donnait au site un registre agricole. Elle est
   re-dérivée à 193° (pétrole / turquoise), ancrée sur la couleur du
   slogan animé du logo — #51F9F9.

   DEUX couleurs au total, pas une de plus :
     1. AQUA  #51F9F9  — le turquoise du wordmark « .SITE », du slogan animé
                         et du cercle de curseur. Base de TOUTE l'échelle de
                         fonds, de tous les accents ET des boutons
                         secondaires. 12 niveaux de luminosité.
     2. CITRUS #BCD634 — CTA principaux uniquement. Inchangée.

   La menthe #13F4B1 a été retirée : à 162° elle restait dans le registre
   vert. Deux familles suffisent, et l'image de marque en sort renforcée.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 1 · AQUA — l'échelle unique, du très sombre à la lumière ──────────
     Teinte verrouillée entre 180° et 196°, saturation dégressive vers les
     hautes lumières. C'est cette seule rampe qui produit tous les
     dégradés du site : les zones sombres et les zones lumineuses sont la
     même couleur à des luminosités différentes. */
  --ink-950: #03141A;   /* très sombre   L* 5   */
  --ink-900: #061F27;   /* sombre        L* 10  */
  --ink-850: #0A2B35;   /* sombre moyen  L* 16  */
  --ink-800: #0E3743;   /* dark          L* 21  */
  --ink-750: #134553;   /* moyen         L* 27  */
  --ink-700: #195666;   /* normal        L* 34  */
  --ink-600: #216F83;   /* normal clair  L* 43  */
  --ink-500: #2D95AC;   /* clair         L* 57  */
  --ink-400: #3FC3DB;   /* clair vif     L* 73  */
  --ink-300: #51F9F9;   /* ANCRE slogan  L* 90  */
  --ink-200: #8DFCFC;   /* lumière       L* 93  */
  --ink-100: #C4FEFE;   /* lumière haute L* 96  */

  /* Hairlines teintées aqua : elles captent la lumière au lieu de l'éteindre. */
  --line:         rgba(168, 250, 255, .15);
  --line-strong:  rgba(168, 250, 255, .26);
  --line-volt:    rgba(34, 220, 240, .40);

  /* Voiles de lumière réutilisables : posés en tête de section, ils créent
     le dégradé descendant qui empêche les grands aplats de paraître plats. */
  --lift-soft:  radial-gradient(ellipse 120% 80% at 50% 0%, rgba(34,220,240,.13), transparent 62%);
  --lift-mid:   radial-gradient(ellipse 130% 90% at 50% 0%, rgba(34,220,240,.19), transparent 66%);
  --lift-strong:radial-gradient(ellipse 140% 100% at 50% 0%, rgba(34,220,240,.26), transparent 70%);

  /* Sections inversées — Porcelaine.
     La VALEUR de fond est conservée volontairement : c'est celle de la
     section « Choisissez votre parcours », que tu as demandé de ne pas
     toucher. Seuls ses textes basculent en pétrole (ci-dessous). */
  --porcelain:       #D4EEE7;
  --porcelain-pure:  #EDF9F5;
  --porcelain-ink:   #052028;
  --porcelain-muted: #3D6270;
  --porcelain-line:  rgba(5, 32, 40, .13);

  /* Bande médiane teal — troisième niveau de fond pour délimiter les sections.
     La bande est ÉCLAIRCIE : avec un texte sombre, #368895 ne donnait que
     4,11:1. C'est en montant la bande, non en la descendant, qu'on gagne du
     contraste — et cela va aussi dans le sens de plus de lumière. */
  --band-1: #4A99A6;
  --band-2: #59AAB6;
  --band-ink: #042228;

  /* Texte sur ink — désaturé vers l'aqua pour rester dans la famille.
     Les anciennes valeurs étaient teintées vert (#C2DCD1, #A3C6B8) et
     contribuaient à l'effet agricole jusque dans le corps de texte. */
  --fg:   #EAFDFF;
  --fg-2: #BDD8E0;
  --fg-3: #A6C7D1;   /* 4,56:1 sur ink-700, la surface la plus claire */

  /* Accents — même famille aqua, aucune teinte hors 180–196°.
     Ces variables alimentent tous les glows, bordures et surlignages. */
  --volt-300: #A8FCFC;
  --volt-400: #51F9F9;   /* = --ink-300, la couleur du slogan */
  --volt-500: #22DCF0;
  --volt-600: #17B4CC;
  --volt-700: #0F8AA1;
  --volt-800: #0A6478;
  --grad-volt: linear-gradient(135deg, #51F9F9 0%, #22DCF0 48%, #0F8AA1 100%);
  --grad-volt-soft: linear-gradient(135deg, rgba(81,249,249,.18), rgba(15,138,161,.10));
  --glow-volt: 0 0 0 1px rgba(34,220,240,.26), 0 8px 44px -8px rgba(34,220,240,.42);

  /* ── 2 · SECONDAIRE = le turquoise du logo ─────────────────────────────
     La menthe #13F4B1 est SUPPRIMÉE : à 162° elle lisait encore vert
     agricole. La couleur secondaire est désormais le turquoise du wordmark
     « .SITE », du slogan animé et du cercle de curseur — soit exactement
     l'ancre #51F9F9. Le site ne compte plus que DEUX familles : aqua et
     jaune. C'est le maximum de cohérence de marque atteignable. */
  --sec-300: #A8FCFC;
  --sec-400: #51F9F9;
  --sec-500: #22DCF0;
  --sec-600: #17B4CC;
  --glow-sec: 0 0 0 1px rgba(81,249,249,.34), 0 8px 40px -10px rgba(81,249,249,.48);

  /* Citrus — accent d'action, RÉSERVÉ aux CTA de conversion.
     Choisi contre l'orange : luminance L*≈91 sur ink L*≈8, le plus fort
     rapport disponible, tout en restant dans la famille chromatique. */
  --citrus-300: #EDFCA8;
  --citrus-400: #E2F778;
  --citrus-500: #D7EF53;
  --citrus-600: #BCD634;
  --citrus-700: #9BB520;
  --grad-citrus: linear-gradient(135deg, #EDFCA8 0%, #D7EF53 52%, #BCD634 100%);
  --glow-citrus: 0 10px 44px -8px rgba(215,239,83,.42);
  --on-citrus: #04171C;

  /* Sémantiques */
  --success: #22DCF0;
  --warn:    #D7EF53;

  /* Typographie — DEUX familles au total, pas plus */
  --font-display: 'Space Grotesk', 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label:   'Space Grotesk', 'Inter Tight', Inter, system-ui, sans-serif;

  --fs-hero:    clamp(1.9rem, 4.15vw, 3.625rem);
  --fs-h2:      clamp(1.95rem, 4.1vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1.2vw, 1.25rem);
  --fs-body:    clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-body-sm: .9375rem;
  --fs-micro:   .75rem;

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-3xl: 52px;
  --r-pill: 999px;

  /* Rythme — nettement plus aéré */
  --gutter: clamp(22px, 4.5vw, 52px);
  --container: 1320px;
  --container-wide: 1560px;
  --section-y: clamp(104px, 12.5vh, 200px);
  --stack: clamp(28px, 3vw, 48px);
  --grid-gap: clamp(22px, 2.2vw, 34px);
  --card-pad: clamp(30px, 3vw, 46px);

  /* Courbes */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Ombres */
  --sh-1: 0 2px 8px rgba(0,0,0,.3);
  --sh-2: 0 24px 60px -24px rgba(0,0,0,.75);
  --sh-3: 0 40px 120px -32px rgba(0,0,0,.85);

  /* Position du curseur, écrite par main.js sur les cartes */
  --mx: 50%;
  --my: 50%;

  color-scheme: dark;
}

@property --rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* --------------------------------------------------------------------------
   01 · RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Points 4 et 8 — défilement natif : fluide pour les ancres et pour
     l'accrochage, avec une vraie barre de défilement utilisable. */
  scroll-behavior: smooth;
  scroll-padding-top: 92px;          /* compense le header fixe à l'accrochage */
  background-color: var(--ink-900);
  /* Déclarée dès la racine : sans cela, <html> conserve le serif par défaut
     du navigateur et une troisième police apparaît dans l'arbre. */
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

/* ── Point 8 · ACCROCHAGE PAR SECTION ────────────────────────────────────
   `proximity` et non `mandatory` : c'est toute la nuance demandée. Un cran
   de molette laisse parcourir librement la section en cours ; plusieurs
   crans rapprochés franchissent le seuil de proximité et la section
   suivante vient s'aligner d'elle-même. Rien de tout cela ne coûte de
   JavaScript — le compositeur s'en charge.
   La classe est posée par main.js, qui la retire sur écran court. */
html.snap-on { scroll-snap-type: y proximity; }
html.snap-on main > section { scroll-snap-align: start; scroll-snap-stop: normal; }
/* Le hero s'accroche par le haut de page, pas par son propre bord. */
html.snap-on main > section:first-child { scroll-snap-align: none; }

/* ── Point 4 · BARRE DE DÉFILEMENT visible et stylée ─────────────────────
   Elle était absente parce que Lenis désynchronisait sa position. Sur le
   défilement natif elle redevient exploitable : on la rend simplement
   assez large pour être saisie, et aux couleurs de la charte. */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--ink-600) var(--ink-950);
}
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track {
  background: var(--ink-950);
  border-left: 1px solid var(--line);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  border: 3px solid var(--ink-950);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--sec-500), var(--ink-600)); }
::-webkit-scrollbar-thumb:active { background: var(--sec-400); }

body {
  background-color: var(--ink-900);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--volt-500); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--volt-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  transform: translate(-50%, -160%);
  z-index: 10050;
  padding: 12px 22px;
  background: var(--volt-500);
  color: var(--ink-900);
  font-family: var(--font-label);
  font-size: var(--fs-h4);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.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;
}

/* --------------------------------------------------------------------------
   02 · TYPOGRAPHIE
   -------------------------------------------------------------------------- */
/* Point 2 — échelle de titres UNIQUE, déclarée sur les éléments eux-mêmes.
   La taille dépend désormais du niveau du titre, jamais du composant qui
   l'accueille : tous les h2 du site font la même taille, tous les h3 aussi,
   tous les h4 aussi. Les surcharges par composant ont été retirées.
   Ce qui distingue les blocs, c'est la graisse, la couleur et l'espace —
   pas une taille improvisée à chaque section. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--volt-400);
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--volt-500));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--volt-500), transparent);
}

.mono {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Dégradé Voltage sur un fragment de titre */
.highlight-volt {
  position: relative;
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-inline-end: .08em;
}
/* Soulignement tracé sous le fragment */
.highlight-volt::after {
  content: '';
  position: absolute;
  left: 0; right: .08em; bottom: -.06em;
  height: 2px;
  background: var(--grad-volt);
  border-radius: 2px;
  transform: scaleX(var(--underline, 0));
  transform-origin: left;
  transition: transform 1.2s .5s var(--ease-out);
  opacity: .6;
}

/* Alias conservé pour compatibilité avec l'ancien markup */
.highlight-cyan {
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-inline-end: .08em;
}

/* --------------------------------------------------------------------------
   03 · ATMOSPHÈRE — mesh, grille, grain
   -------------------------------------------------------------------------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* PERFORMANCE — `will-change` a été retiré de tous les éléments répétés.
   Il y en avait 138 sur la page. Chaque déclaration promeut définitivement
   l'élément en couche de composition : à ce nombre, la mémoire graphique
   sature et le résultat est l'inverse de l'effet recherché. GSAP pose
   lui-même will-change le temps de ses animations et le retire ensuite, ce
   qui est le comportement correct. Il ne reste ici que les rares éléments
   animés en permanence : les aurores et les deux pistes de marquee. */
.aurora {
  position: absolute;
  border-radius: 50%;
  /* PERFORMANCE — filter: blur(120px) retiré. Un radial-gradient possède
     déjà une décroissance continue : le flou n'ajoutait rien de visible et
     imposait de flouter 700 000 pixels par aurore, en boucle d'animation. */
  will-change: transform;
  opacity: .82;
}
.aurora--1 {
  width: 50vw; height: 50vw;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle, rgba(34,220,240,.52), transparent 68%);
  animation: drift1 44s var(--ease-in-out) infinite;
}
.aurora--2 {
  width: 56vw; height: 56vw;
  top: 30vh; right: -14vw;
  background: radial-gradient(circle, rgba(15,138,161,.46), transparent 68%);
  animation: drift2 58s var(--ease-in-out) infinite;
}
.aurora--3 {
  width: 38vw; height: 38vw;
  bottom: -8vw; left: 24vw;
  background: radial-gradient(circle, rgba(81,249,249,.28), transparent 68%);
  animation: drift3 52s var(--ease-in-out) infinite;
}
/* Quatrième source, chaude et discrète : elle réchauffe le bas de page
   sans consommer le quota Citrus réservé aux CTA. */
.aurora--4 {
  width: 30vw; height: 30vw;
  bottom: 12vh; right: 18vw;
  background: radial-gradient(circle, rgba(215,239,83,.14), transparent 68%);
  animation: drift1 66s var(--ease-in-out) infinite reverse;
}
@keyframes drift1 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes drift2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.1); }
  50%      { transform: translate3d(-12vw, -14vh, 0) scale(.92); }
}
@keyframes drift3 {
  0%, 100% { transform: translate3d(0,0,0) scale(.95); }
  50%      { transform: translate3d(10vw, -8vh, 0) scale(1.2); }
}

/* Grille technique */
.tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(168,250,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168,250,255,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 80%);
}

/* Le grain de film a été retiré (point 7) : un calque fixe plein écran en
   mix-blend-mode avec animation obligeait le compositeur à re-mélanger
   toute la page à chaque pas, pour un effet à 3,5 % d'opacité. */

/* --------------------------------------------------------------------------
   04 · LAYOUT
   -------------------------------------------------------------------------- */
#main-content { position: relative; z-index: 1; }

.section-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-container--wide { max-width: var(--container-wide); }

.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}

/* ── Point 7 · RENDU À LA DEMANDE ────────────────────────────────────────
   content-visibility: auto indique au navigateur de ne pas calculer la
   mise en page, le style ni la peinture d'une section tant qu'elle n'est
   pas proche de la fenêtre. Les animations, les flous et les dégradés
   qu'elle contient ne consomment donc rien hors écran.

   contain-intrinsic-size donne une hauteur estimée : sans elle, la barre de
   défilement sauterait à mesure que les sections se rendent réellement.

   Le hero, la vitrine et la section de contact en sont exclus : le premier
   est visible d'emblée, les deux autres portent des éléments dont la
   position doit rester calculée en permanence (mini-lecteur, formulaire). */
main > section:not(.hero-section):not(.showcase-section):not(.cta-section):not(.videoproof-section) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1120px;
}

/* ── ÉCHELLE DE FONDS ─────────────────────────────────────────────────────
   Trois niveaux d'ink + deux niveaux clairs. Deux sections voisines ne
   partagent jamais le même fond sans trait de séparation entre elles :
   c'est ce qui rend la frontière visible.

   Points 3, 4, 5 — chaque niveau porte désormais son propre voile de
   lumière : un aplat sombre uniforme lit « éteint », un aplat traversé d'un
   dégradé lit « éclairé ». C'est ce qui fait la différence entre les deux
   sans toucher au caractère sombre de la charte. */
.section--ink-1 {
  background:
    radial-gradient(ellipse 110% 62% at 50% 0%,  rgba(34,220,240,.15), transparent 64%),
    radial-gradient(ellipse 55% 45% at 88% 82%,  rgba(81,249,249,.09), transparent 66%),
    linear-gradient(180deg, #0D3C4A 0%, var(--ink-900) 52%, var(--ink-900) 100%);
}
.section--ink-2 {
  background:
    radial-gradient(ellipse 115% 66% at 50% 0%,  rgba(34,220,240,.19), transparent 66%),
    radial-gradient(ellipse 55% 48% at 10% 78%,  rgba(15,138,161,.13),  transparent 66%),
    linear-gradient(180deg, #124B5B 0%, var(--ink-850) 55%, var(--ink-850) 100%);
}
.section--ink-0 {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%,  rgba(34,220,240,.17), transparent 66%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(15,138,161,.11),  transparent 64%),
    linear-gradient(180deg, #0A3340 0%, var(--ink-950) 58%, var(--ink-950) 100%);
}

/* « Pourquoi LASDA » — nommée explicitement : c'est la section signalée
   comme trop noire. Elle reçoit le voile le plus appuyé de l'échelle ink. */
.why-section {
  background:
    radial-gradient(ellipse 115% 66% at 50% -3%, rgba(34,220,240,.26), transparent 68%),
    radial-gradient(ellipse 62% 52% at 6% 40%,   rgba(15,138,161,.19),  transparent 68%),
    radial-gradient(ellipse 58% 48% at 94% 74%,  rgba(81,249,249,.15), transparent 68%),
    linear-gradient(180deg, #134F60 0%, #0D3C4A 48%, var(--ink-900) 100%);
}

/* Processus — même traitement (point 4) */
.process-section {
  background:
    radial-gradient(ellipse 115% 64% at 50% -2%, rgba(34,220,240,.24), transparent 68%),
    radial-gradient(ellipse 60% 50% at 90% 30%,  rgba(81,249,249,.14), transparent 68%),
    radial-gradient(ellipse 70% 55% at 20% 88%,  rgba(15,138,161,.14),  transparent 68%),
    linear-gradient(180deg, #145566 0%, #0F4353 50%, var(--ink-850) 100%);
}

/* Trait de séparation PLEINE LARGEUR + halo vert au-dessus */
.section--hairline::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line-strong) 22%,
    var(--volt-500) 50%,
    var(--line-strong) 78%,
    transparent 100%);
  opacity: .75;
  z-index: 2;
}
.section--hairline::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(760px, 80vw);
  height: 200px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(34,220,240,.14), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Bande médiane teal — troisième registre de fond */
.section--band {
  background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 100%);
  color: var(--band-ink);
}
.section--band h2, .section--band h3, .section--band h4 { color: #042228; }
/* Opacité pleine : à 90 %, le texte plafonnait à 4,48:1 contre 4,50 requis. */
.section--band .section-desc, .section--band p { color: var(--band-ink); }
.section--band .eyebrow { color: #042228; }
.section--band .eyebrow::before { background: linear-gradient(90deg, transparent, #042228); }
.section--band .eyebrow--center::after { background: linear-gradient(90deg, #042228, transparent); }
.section--band .highlight-volt {
  background: linear-gradient(135deg, #073E4A, #0B5E70);
  -webkit-background-clip: text; background-clip: text;
}

.section-header {
  max-width: 820px;
  margin: 0 auto clamp(56px, 6.5vw, 96px);
  text-align: center;
}
.section-title {
  font-size: var(--fs-h2);
  margin-block: 22px 24px;
}
.section-desc {
  color: var(--fg-2);
  font-size: var(--fs-body);
  max-width: 62ch;
  margin-inline: auto;
}

/* Sections inversées — Porcelain */
.section--porcelain {
  background: var(--porcelain);
  color: var(--porcelain-muted);
  isolation: isolate;
}
.section--porcelain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(5,32,40,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(5,32,40,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%);
}
/* Liserés lumineux aux deux jointures ink → porcelaine : la rupture est
   franche, mais elle reste éclairée au lieu de trancher à sec. */
.section--porcelain::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--volt-600) 30%, var(--volt-500) 50%, var(--volt-600) 70%, transparent);
  z-index: 2;
}
.section--porcelain h1, .section--porcelain h2,
.section--porcelain h3, .section--porcelain h4 { color: var(--porcelain-ink); }
.section--porcelain .section-desc,
.section--porcelain p { color: var(--porcelain-muted); }
.section--porcelain .eyebrow { color: var(--volt-700); }
.section--porcelain .eyebrow::before { background: linear-gradient(90deg, transparent, var(--volt-700)); }
.section--porcelain .eyebrow--center::after { background: linear-gradient(90deg, var(--volt-700), transparent); }
.section--porcelain .highlight-volt {
  background: linear-gradient(135deg, #17B4CC, #0F8AA1);
  -webkit-background-clip: text; background-clip: text;
}
/* Raccords en biseau entre ink et porcelain */
.section--porcelain-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 3px);
}

/* --------------------------------------------------------------------------
   05 · SYSTÈME DE VERRE
   -------------------------------------------------------------------------- */
/* PERFORMANCE — le `backdrop-filter` a été retiré de tous les éléments
   répétés. Il y en avait 111 sur la page : chacun oblige le compositeur à
   réechantillonner puis flouter la zone située derrière lui à chaque
   peinture, et beaucoup se trouvaient dans des marquees en mouvement
   permanent. C'était la cause principale des ralentissements.
   Il ne reste que là où l'effet se voit vraiment et où l'élément flotte
   réellement au-dessus du contenu : barre de menu, menu mobile, bandeau
   cookies, cadre de la vidéo de vente, écran de chargement.
   Les surfaces concernées ont été rendues un peu plus opaques en
   compensation : à l'œil, la différence est imperceptible.

   Le verre est relevé en même temps que le canvas : le voile blanc passe de
   5,5 % à 9 % et la teinte de fond s'éclaircit. Sans cela, les cartes
   disparaîtraient dans un fond devenu plus clair qu'elles. */
.glass-1, .glass-2, .glass-3,
.bento-card, .faq-item, .proposition-card, .testimonial-card {
  position: relative;
  border-radius: var(--r-xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%),
    rgba(14, 55, 67, .58);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    var(--sh-2);
  isolation: isolate;
  overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) {
  .glass-1, .bento-card, .faq-item, .proposition-card, .testimonial-card {
    background:
      linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%),
      rgba(14, 55, 67, .74);
  }
  .glass-2 {
  }
  .glass-3 {
  }
}

.glass-2 {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04),
    var(--sh-3);
}

/* Balayage spéculaire suivant le curseur (--mx/--my écrits par main.js) */
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(255,255,255,.075), transparent 42%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.card-glow:hover::before { opacity: 1; }

/* Jante conique animée — l'élément signature */
.rim-light {
  position: relative;
}
/* Le filament est dessiné à 1px du bord, donc À L'INTÉRIEUR de la zone de
   rognage de `overflow: hidden` (qui découpe à la limite du padding box).
   Posé à `inset: -1px`, il serait purement et simplement invisible. */
.rim-light::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--rim-angle),
    transparent 0deg, transparent 58deg,
    rgba(81,249,249,.05) 66deg,
    var(--volt-500) 78deg,
    rgba(15,138,161,.65) 88deg,
    transparent 100deg, transparent 360deg);
  /* Anneau : on soustrait le content-box du padding-box. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rimSpin 7s linear infinite;
  pointer-events: none;
}
.rim-light--slow::after { animation-duration: 14s; }
.rim-light--citrus::after {
  background: conic-gradient(from var(--rim-angle),
    transparent 0deg, transparent 58deg,
    rgba(237,252,168,.06) 66deg,
    var(--citrus-500) 78deg,
    rgba(188,214,52,.6) 88deg,
    transparent 100deg, transparent 360deg);
}
@keyframes rimSpin { to { --rim-angle: 360deg; } }

/* Élévation au survol */
.bento-card, .proposition-card, .testimonial-card, .service-card, .portfolio-item {
  transition:
    transform .6s var(--ease-out),
    border-color .45s var(--ease-out),
    box-shadow .6s var(--ease-out);
}
/* La promotion en couche n'est demandée qu'au survol, le temps de la
   transition — pas en permanence sur les dizaines de cartes de la page. */
.bento-card:hover, .proposition-card:hover, .testimonial-card:hover,
.service-card:hover, .portfolio-item:hover { will-change: transform; }
.bento-card:hover, .proposition-card:hover, .testimonial-card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: var(--line-volt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sh-3), 0 0 60px -20px rgba(34,220,240,.28);
}

/* --------------------------------------------------------------------------
   06 · BOUTONS — règle absolue : deux icônes
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 15px;
  --btn-px: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .9688rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform .38s var(--ease-spring),
    box-shadow .38s var(--ease-out),
    border-color .38s var(--ease-out),
    color .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn > svg { flex: 0 0 auto; transition: transform .42s var(--ease-spring); }
.btn .btn-icon-left  { transition: transform .5s var(--ease-spring); }
.btn .btn-icon-right { transition: transform .42s var(--ease-spring); }

.btn:hover .btn-icon-right { transform: translateX(4px); }
.btn:hover .btn-icon-left  { transform: rotate(-12deg) scale(1.12); }
.btn:active { transform: scale(.97); }

/* Balayage spéculaire dans le fill */
.btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease-out);
}
.btn:hover::before { left: 130%; }

/* Onde de choc au clic (coordonnées injectées par main.js) */
.btn .btn-ripple {
  position: absolute;
  z-index: -1;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .62s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(26); opacity: 0; }
}

/* — Primaire : Citrus, réservé aux CTA de conversion — */
/* Point 2 — plus aucun dégradé sur les boutons : on retient la couleur de
   droite du dégradé (#BCD634, l'extrémité 100 %) comme aplat unique.
   Texte ink dessus : contraste 11:1. */
.btn-primary {
  color: var(--on-citrus);
  background: var(--citrus-600);
  border: 1px solid var(--citrus-600);
  box-shadow: var(--glow-citrus), inset 0 1px 0 rgba(255,255,255,.32);
  font-weight: 700;
}
.btn-primary .btn-ripple { background: rgba(4,23,28,.28); }
/* Retour au survol par éclaircissement de l'aplat, sans réintroduire de dégradé */
.btn-primary:hover {
  background: var(--citrus-500);
  border-color: var(--citrus-500);
  box-shadow: 0 16px 54px -8px rgba(215,239,83,.6), inset 0 1px 0 rgba(255,255,255,.36);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(-2px) scale(.97); }

/* — Secondaire : verre + hairline Voltage — */
/* Aplat unique également ici : la valeur de fin du dégradé, relevée pour
   rester lisible en verre plat. */
.btn-secondary {
  color: var(--fg);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* Les boutons secondaires portent le TURQUOISE DU LOGO — la même couleur que
   le wordmark « .SITE », le slogan animé et le cercle de curseur. Ils étaient
   auparavant en blanc translucide à 6 %, donc invisibles, puis en menthe, qui
   lisait vert. Fond, bordure et texte turquoise : ils se démarquent tout en
   renforçant l'image de marque. */
.btn-secondary {
  color: #071F26;
  background: rgba(81,249,249,.92);
  border-color: var(--sec-400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 26px -10px rgba(81,249,249,.5);
  font-weight: 600;
}
.btn-secondary > svg { color: #05323D; }
.btn-secondary:hover {
  color: #04171C;
  background: var(--sec-400);
  border-color: #8DFCFC;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--glow-sec);
  transform: translateY(-2px);
}
.btn-secondary:hover > svg { color: #04171C; }
.btn-secondary .btn-ripple { background: rgba(7,31,38,.26); }

/* — Ghost : texte + hairline — */
.btn-ghost {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 12px 20px;
  font-size: .9063rem;
}
.btn-ghost > svg { color: var(--sec-400); }
.btn-ghost:hover {
  border-color: rgba(81,249,249,.44);
  background: rgba(81,249,249,.08);
  color: #fff;
}
.btn-ghost::before { display: none; }

/* — Modificateurs — */
.btn-lg { --btn-py: 19px; --btn-px: 34px; font-size: 1.0625rem; }
.btn-sm { --btn-py: 11px; --btn-px: 18px; font-size: .875rem; gap: 8px; }
.btn-block { width: 100%; }
.btn-header { --btn-py: 12px; --btn-px: 20px; font-size: .9063rem; }

/* Variante sur fond porcelain */
/* Point 1.2 — sur fond clair, le bouton secondaire était blanc translucide,
   donc invisible (c'est le cas signalé sur « Choisissez votre parcours »).
   Il prend le turquoise du logo, en version soutenue pour tenir sur clair. */
.section--porcelain .btn-secondary {
  color: #04212A;
  background: var(--sec-400);
  border-color: #2FD3E8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 28px -12px rgba(15,138,161,.5);
}
.section--porcelain .btn-secondary > svg { color: #04212A; }
.section--porcelain .btn-secondary:hover {
  color: #04171C;
  background: #8DFCFC;
  border-color: var(--sec-400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px -12px rgba(15,138,161,.6);
}
.section--porcelain .btn-secondary:hover > svg { color: #04171C; }

/* Le ghost reste discret sur clair : c'est un lien « en savoir plus », pas un
   point de conversion. Il garde son fond blanc mais son icône devient turquoise. */
.section--porcelain .btn-ghost {
  color: var(--porcelain-ink);
  border-color: var(--porcelain-line);
  background: rgba(255,255,255,.7);
}
.section--porcelain .btn-ghost > svg { color: #056070; }
.section--porcelain .btn-ghost:hover {
  border-color: rgba(15,138,161,.36);
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(15,138,161,.30);
  color: var(--porcelain-ink);
}

/* --------------------------------------------------------------------------
   07 · ICÔNES ANIMÉES
   -------------------------------------------------------------------------- */
.icon-anim {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(81,249,249,.12), rgba(15,138,161,.05));
  border: 1px solid var(--line-volt);
  color: var(--volt-400);
  flex: 0 0 auto;
  transition: transform .55s var(--ease-spring), box-shadow .5s var(--ease-out), border-color .5s;
}
.icon-anim::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,220,240,.28), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.icon-anim > svg { width: 26px; height: 26px; overflow: visible; }
.icon-anim > svg [stroke] { stroke-width: 1.5; }

*:hover > .icon-anim,
.icon-anim:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(34,220,240,.45);
  box-shadow: 0 12px 34px -10px rgba(34,220,240,.45);
}
*:hover > .icon-anim::before,
.icon-anim:hover::before { opacity: 1; }

/* Tracé au reveal : la classe .is-drawn est posée par main.js.

   Point 3 — correctif de la disparition au survol.
   L'état masqué ne s'applique plus qu'AVANT le tracé (:not(.is-drawn)), et
   les keyframes portent un `from` explicite. Sans cela, les animations de
   survol (.icon-spin, .icon-bar…) remplaçaient la propriété `animation` de
   iconDraw, le fill-mode forwards était perdu, et le stroke-dashoffset
   retombait à var(--len) : l'icône devenait invisible. Désormais l'état de
   repos d'une icône tracée est dashoffset 0, donc elle reste visible quelle
   que soit l'animation qui prend le relais. */
.icon-anim [data-draw] { stroke-dasharray: var(--len, 200); }
.icon-anim:not(.is-drawn) [data-draw] { stroke-dashoffset: var(--len, 200); }
.icon-anim.is-drawn [data-draw] {
  stroke-dashoffset: 0;
  animation: iconDraw 1.1s var(--ease-out) forwards;
}
@keyframes iconDraw {
  from { stroke-dashoffset: var(--len, 200); }
  to   { stroke-dashoffset: 0; }
}

/* Animations par icône, au survol de la carte parente */
.why-card:hover .icon-spin       { animation: iSpin 3.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.why-card:hover .icon-orbit      { animation: iOrbit 2.2s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.why-card:hover .icon-flash      { animation: iFlash .9s var(--ease-out) infinite; }
.why-card:hover .icon-sweep      { animation: iSweep 1.6s var(--ease-in-out) infinite; }
.why-card:hover .icon-bar        { animation: iBar 1.2s var(--ease-out) infinite; transform-box: fill-box; transform-origin: bottom; }
.why-card:hover .icon-bar:nth-of-type(2) { animation-delay: .12s; }
.why-card:hover .icon-bar:nth-of-type(3) { animation-delay: .24s; }
.why-card:hover .icon-scanline   { animation: iScan 1.8s var(--ease-in-out) infinite; }
.why-card:hover .icon-pulse      { animation: iPulse 1.6s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }

@keyframes iSpin  { to { transform: rotate(360deg); } }
@keyframes iOrbit { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-3px); } }
@keyframes iFlash { 0%,100% { opacity: 1; filter: none; } 45% { opacity: .5; filter: drop-shadow(0 0 6px var(--volt-400)); } }
@keyframes iSweep { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,3px); } }
@keyframes iBar   { 0% { transform: scaleY(.5); } 55% { transform: scaleY(1.14); } 100% { transform: scaleY(1); } }
@keyframes iScan  { 0% { transform: translateY(-4px); opacity: 0; } 30%,70% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes iPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.16); opacity: .65; } }

/* --------------------------------------------------------------------------
   08 · CURSEUR PERSONNALISÉ
   -------------------------------------------------------------------------- */
.custom-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .custom-cursor { display: block; }
}

.cursor-dot {
  position: absolute;
  width: 5px; height: 5px;
  background: var(--volt-400);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--volt-500);
}
.cursor-glow {
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid rgba(34,220,240,.5);
  background: rgba(34,220,240,.05);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px rgba(34,220,240,.2), inset 0 0 14px rgba(34,220,240,.12);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              background-color .35s, border-color .35s, backdrop-filter .35s;
}
.cursor-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .22s;
  white-space: nowrap;
}

body.cursor-hover-active .cursor-glow {
  width: 76px; height: 76px;
  background: rgba(34,220,240,.9);
  border-color: transparent;
  box-shadow: 0 0 40px rgba(34,220,240,.5);
}
body.cursor-hover-active .cursor-text { opacity: 1; }
body.cursor-hover-active .cursor-dot { opacity: 0; }

/* --------------------------------------------------------------------------
   09 · PRELOADER
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ink-900);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--ease-in-out);
}
.preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34,220,240,.10), transparent 70%);
}
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }

.preloader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.preloader-logo {
  width: 74px;
  color: var(--fg);
  filter: drop-shadow(0 0 22px rgba(34,220,240,.35));
  opacity: 0;
  transform: scale(.86);
  animation: plLogo 1.1s var(--ease-out) forwards;
}
@keyframes plLogo { to { opacity: 1; transform: scale(1); } }

.preloader-progress-bar {
  position: relative;
  width: 240px; height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-progress-fill {
  height: 100%; width: 0%;
  background: var(--grad-volt);
  box-shadow: 0 0 12px var(--volt-500);
  transition: width .18s linear;
}
.preloader-counter {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  color: var(--volt-400);
}
.preloader-tagline {
  font-family: var(--font-display);
  font-size: .9375rem;
  color: var(--fg-3);
  letter-spacing: -.01em;
  max-width: 30ch;
  opacity: 0;
  transform: translateY(10px);
  animation: plTag .9s .35s var(--ease-out) forwards;
}
@keyframes plTag { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   10 · HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 18px var(--gutter);
  transition: padding .5s var(--ease-out);
}
.site-header.is-scrolled { padding-block: 10px; }

.header-container {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out),
              box-shadow .5s var(--ease-out), backdrop-filter .5s;
}
.site-header.is-scrolled .header-container {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(10,43,53,.80);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 44px -22px rgba(0,0,0,.9);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Logo — lockup animé */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--fg);
  flex: 0 0 auto;
}
.logo-mark {
  width: 30px; height: 30px;
  overflow: visible;
  color: currentColor;
}
.logo-mark .blade-spine { fill: currentColor; transition: transform .5s var(--ease-spring); }
.logo-mark .blade-foot  { fill: url(#lgVolt); transition: transform .5s var(--ease-spring); }
.logo-mark .blade-beam  { opacity: 0; }
.site-logo:hover .blade-spine { transform: translate(-1.5px, 0); }
.site-logo:hover .blade-foot  { transform: translate(2px, 0); }
.site-logo:hover .logo-mark { filter: drop-shadow(0 0 12px rgba(81,249,249,.60)); }
.logo-mark { transition: filter .5s var(--ease-out); }

.logo-word {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.035em;
  color: currentColor;
  line-height: 1;
}
.logo-word .dot { color: var(--sec-400); }
.logo-word .tld {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  /* Point 1.2 — « .SITE », le slogan animé et les boutons secondaires
     partagent désormais strictement la même valeur. */
  color: var(--sec-400);
}

/* Navigation */
.main-navigation { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  display: block;
  padding: 9px 15px;
  font-size: .9063rem;
  font-weight: 500;
  color: var(--fg-2);
  border-radius: var(--r-pill);
  transition: color .3s var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 4px;
  height: 1px;
  background: var(--grad-volt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.nav-link:hover { color: var(--fg); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--fg); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: rgba(255,255,255,.04);
  transition: border-color .3s, background .3s;
}
.nav-toggle:hover { border-color: var(--line-volt); background: rgba(34,220,240,.07); }
.nav-toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .42s var(--ease-out), opacity .28s;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5.25px; }
.nav-toggle-bars span:nth-child(3) { top: 10.5px; }
body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Overlay mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(6,31,39,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  /* flex-start au lieu de center : centré verticalement, le premier item
     remontait sous la barre de menu. La liste part maintenant franchement
     en dessous du header et défile si nécessaire. */
  justify-content: flex-start;
  overflow-y: auto;
  /* La barre mobile fait 48 px de haut plus 12 px d'écart : 96 px dégagent
     le premier item sans creuser un vide inutile. */
  padding: 96px var(--gutter) 48px;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path .8s var(--ease-in-out);
  pointer-events: none;
  overflow-y: auto;
}
body.nav-open .mobile-menu {
  clip-path: circle(150% at calc(100% - 46px) 46px);
  pointer-events: auto;
}
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 80% 10%, rgba(34,220,240,.14), transparent 70%);
  pointer-events: none;
}
/* Point 1 — les titres étaient en clamp(2rem, 9vw, 3rem) : énormes, sans
   harmonie, et le premier passait sous la barre de menu. Ils descendent à une
   taille de lecture et la liste est décalée sous le header (cf. le padding
   de .mobile-menu). */
.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 32px; }
.mobile-nav-links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.mobile-nav-links .idx { font-size: .6875rem; letter-spacing: .16em; }
body.nav-open .mobile-nav-links a { opacity: 1; transform: none; }
body.nav-open .mobile-nav-links a:nth-child(1) { transition-delay: .18s; }
body.nav-open .mobile-nav-links a:nth-child(2) { transition-delay: .26s; }
body.nav-open .mobile-nav-links a:nth-child(3) { transition-delay: .34s; }
body.nav-open .mobile-nav-links a:nth-child(4) { transition-delay: .42s; }
body.nav-open .mobile-nav-links a:nth-child(5) { transition-delay: .50s; }
.mobile-nav-links a:hover { color: var(--volt-400); }
.mobile-nav-links .idx {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--volt-500);
}
.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s .58s var(--ease-out), transform .6s .58s var(--ease-out);
}
body.nav-open .mobile-menu-footer { opacity: 1; transform: none; }
.mobile-menu-footer .contact-line {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   11 · HERO
   -------------------------------------------------------------------------- */
/* Point 1 — le fond du hero reçoit trois couches de lumière superposées :
   un halo haut centré, une nappe émeraude latérale et un voile bas. Le noir
   n'apparaît plus nulle part en aplat. */
.hero-section {
  position: relative;
  padding-block: clamp(140px, 20vh, 210px) clamp(80px, 10vh, 130px);
  overflow: clip;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(34,220,240,.20), transparent 64%),
    radial-gradient(ellipse 70% 60% at 8% 30%,   rgba(15,138,161,.16),  transparent 66%),
    radial-gradient(ellipse 65% 55% at 95% 60%,  rgba(81,249,249,.13), transparent 66%),
    radial-gradient(ellipse 120% 70% at 50% 108%, rgba(215,239,83,.07), transparent 62%),
    linear-gradient(180deg, #0C3A47 0%, var(--ink-900) 62%, var(--ink-900) 100%);
}
.hero-glow-1, .hero-glow-2 {
  position: absolute;
  border-radius: 50%;
  /* Même raison que les aurores : le dégradé radial suffit. */
  pointer-events: none;
  z-index: 0;
}
.hero-glow-1 {
  width: 52vw; height: 52vw;
  top: -12vw; left: 50%;
  transform: translateX(-70%);
  background: radial-gradient(circle, rgba(34,220,240,.34), transparent 64%);
}
.hero-glow-2 {
  width: 46vw; height: 46vw;
  top: 6vw; right: -8vw;
  background: radial-gradient(circle, rgba(15,138,161,.30), transparent 64%);
}

.hero-container { position: relative; z-index: 1; }

.hero-content {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 11px;
  margin-bottom: 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.hero-badge .pulse-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}
.hero-badge .pulse-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: dotPulse 2s var(--ease-out) infinite;
}
@keyframes dotPulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(3.6); opacity: 0; }
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: -.04em;
  font-weight: 600;
  margin-bottom: 26px;
}
.hero-subtitle {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  color: var(--fg-2);
  max-width: 66ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* Point 5 — les boutons étaient serrés entre le sous-titre au-dessus et les
   arguments de conversion en dessous. Marges portées à 54 px en haut et
   58 px en bas : le bloc d'action respire et se détache. */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(34px, 4vw, 54px);
  margin-bottom: clamp(34px, 4.2vw, 58px);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 0;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 13px; height: 13px; color: var(--success); flex: 0 0 auto; }

/* — Propositions : split asymétrique — */
/* Point 9 — la colonne de gauche était en 1.08fr contre 1fr à droite : 8 %
   de largeur en plus, ce qui rendait l'image de gauche plus grande. Les deux
   colonnes sont désormais strictement égales, et `stretch` garantit la même
   hauteur. */
.hero-propositions-row {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.proposition-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: var(--card-pad);
  min-height: 268px;
}
.proposition-card::after { border-radius: inherit; }
.proposition-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.proposition-card--citrus .proposition-badge {
  color: var(--citrus-400);
  background: rgba(215,239,83,.10);
  border: 1px solid rgba(237,252,168,.28);
}
.proposition-card--volt .proposition-badge {
  color: var(--volt-400);
  background: rgba(34,220,240,.09);
  border: 1px solid var(--line-volt);
}
.proposition-headline {
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -.032em;
  margin-bottom: 12px;
}
.proposition-desc { color: var(--fg-2); font-size: 1rem; }
.proposition-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.proposition-meta span {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.proposition-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* — Coverflow 3D — */
.hero-videos-carousel {
  position: relative;
  height: clamp(300px, 40vw, 470px);
  margin-bottom: clamp(40px, 4vw, 64px);
  perspective: 1800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.hero-video-card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(260px, 38vw, 480px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3);
  transform-style: preserve-3d;
  cursor: pointer;
}
.hero-video-card.card-center {
  border-color: var(--line-volt);
  box-shadow: var(--sh-3), 0 0 90px -24px rgba(34,220,240,.4);
}

/* Chrome de navigateur */
.mockup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--line);
}
.mockup-header .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  flex: 0 0 auto;
}
.mockup-header .dot:nth-child(1) { background: rgba(215,239,83,.55); }
.mockup-header .dot:nth-child(2) { background: rgba(215,239,83,.5); }
.mockup-header .dot:nth-child(3) { background: rgba(34,220,240,.5); }
.mockup-url {
  flex: 1 1 auto;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-video-wrapper {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--ink-900);
}
.hero-video-wrapper video,
.hero-video-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.hero-video-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3,20,26,.55));
  pointer-events: none;
}
.hero-video-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-top: 1px solid var(--line);
  background: rgba(14,55,67,.62);
}
.hero-video-title .tag { color: var(--volt-400); }

.carousel-controls {
  position: absolute;
  bottom: -46px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.carousel-dot {
  width: 26px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.14);
  transition: background .4s var(--ease-out), width .4s var(--ease-out);
}
.carousel-dot.is-active { width: 44px; background: var(--grad-volt); box-shadow: 0 0 12px rgba(34,220,240,.5); }

/* — Marquee de logos clients — */
.hero-client-logos { text-align: center; }
.logos-title {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 26px;
}
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(38px, 5vw, 76px);
  width: max-content;
  animation: marquee var(--marquee-dur, 34s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track--reverse { animation-direction: reverse; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.logo-item {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-3);
  opacity: .55;
  white-space: nowrap;
  transition: color .35s var(--ease-out), opacity .35s var(--ease-out), text-shadow .35s;
}
.logo-item:hover { color: var(--volt-400); opacity: 1; text-shadow: 0 0 22px rgba(34,220,240,.45); }

/* --------------------------------------------------------------------------
   12 · STATISTIQUES
   -------------------------------------------------------------------------- */
/* La section porte désormais un en-tête complet : elle reprend le rythme
   vertical normal au lieu du padding réduit qu'elle avait sans titre. */
.stats-section { padding-block: var(--section-y); }
.bento-grid { display: grid; gap: var(--grid-gap); }
.stats-grid { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  justify-content: flex-end;
}
.stat-card::after { border-radius: inherit; }
.stat-arc {
  position: absolute;
  top: clamp(22px, 2.4vw, 30px);
  right: clamp(22px, 2.4vw, 30px);
  width: 40px; height: 40px;
  opacity: .9;
}
.stat-arc circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.stat-arc .arc-bg { stroke: rgba(255,255,255,.08); }
.stat-arc .arc-fill {
  stroke: url(#statVolt);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.stat-number, .stat-number-decimal {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--fg);
  background: linear-gradient(180deg, #FFFFFF 20%, #8FA9B4 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.6;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   13 · POURQUOI LASDA — bento
   -------------------------------------------------------------------------- */
/* Point 3 — la grille était en 4 colonnes : une carte simple ne faisait
   qu'un quart de largeur, et la scission texte/infographie n'y tenait pas.
   D'où des blocs étirés en hauteur et l'impression de désordre sur
   ordinateur. En 2 colonnes, chaque carte dispose de la place nécessaire :
   texte à gauche, infographie à droite, sur une hauteur normale. */
.bento-why-grid { grid-template-columns: repeat(2, 1fr); }

.why-card {
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
  min-height: 0;
}
.why-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* L'infographie est un carré : plus d'align-self: stretch, qui l'étirait sur
   toute la hauteur de la carte et cassait sa géométrie. */
.why-info {
  flex: 0 0 auto;
  width: clamp(108px, 10vw, 148px);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(81,249,249,.14), transparent 66%),
    rgba(10,43,53,.5);
  border: 1px solid var(--line);
  align-self: center;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   2 · GIF DE DÉMONSTRATION dans les propositions
   Placé entre le badge et le titre, dans un cadre à bordure marquée.
   -------------------------------------------------------------------------- */
.prop-gif {
  position: relative;
  margin-block: 4px 6px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid rgba(81,249,249,.34);
  background: linear-gradient(150deg, var(--ink-750), var(--ink-850));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 4px rgba(81,249,249,.08),
    0 18px 40px -24px rgba(3,20,26,.6);
}
.prop-gif img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-out);
}
.proposition-shell:hover .prop-gif img { transform: scale(1.04); }
.prop-gif-tag {
  position: absolute;
  left: 10px; bottom: 9px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(3,20,26,.78);
  border: 1px solid rgba(81,249,249,.4);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sec-300);
}
/* Sur fond porcelaine, le cadre se referme en teinte foncée */
.section--porcelain .prop-gif {
  border-color: rgba(15,138,161,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 4px rgba(15,138,161,.07),
    0 18px 40px -26px rgba(5,32,40,.4);
}
.info-svg { width: 100%; height: auto; display: block; overflow: visible; }
.info-svg text {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  fill: var(--sec-400);
}

/* ── 1 · DESIGN — échantillons de palette en cascade ─────────────────────── */
.info-design .d-frame {
  fill: none; stroke: var(--line-strong); stroke-width: 1.4;
  stroke-dasharray: 6 5;
  animation: dFrame 22s linear infinite;
}
@keyframes dFrame { to { stroke-dashoffset: -88; } }
.info-design .d-sw { animation: dPulse 3.6s var(--ease-in-out) infinite; transform-origin: center; }
.info-design .d-sw1 { fill: var(--sec-400); animation-delay: 0s; }
.info-design .d-sw2 { fill: var(--sec-500); animation-delay: .3s; }
.info-design .d-sw3 { fill: var(--ink-600); animation-delay: .6s; }
.info-design .d-sw4 { fill: var(--citrus-500); animation-delay: .9s; }
@keyframes dPulse {
  0%, 100% { opacity: .42; transform: scale(.92); }
  45%      { opacity: 1;   transform: scale(1); }
}
.info-design .d-cursor {
  fill: #FFFFFF;
  animation: dCursor 5.2s var(--ease-in-out) infinite;
}
@keyframes dCursor {
  0%, 100% { transform: translate(-18px, -18px); }
  25%      { transform: translate(18px, -18px); }
  50%      { transform: translate(18px, 18px); }
  75%      { transform: translate(-18px, 18px); }
}

/* ── 2 · ULTRA RAPIDE — aiguille et arc de jauge ─────────────────────────── */
.info-speed path { fill: none; stroke-linecap: round; }
.info-speed .s-arc-bg { stroke: var(--line-strong); stroke-width: 7; }
.info-speed .s-arc-fill {
  stroke: var(--sec-400); stroke-width: 7;
  stroke-dasharray: 138; stroke-dashoffset: 138;
  animation: sFill 3.2s var(--ease-out) infinite;
  filter: drop-shadow(0 0 5px rgba(81,249,249,.7));
}
@keyframes sFill {
  0%       { stroke-dashoffset: 138; }
  38%, 88% { stroke-dashoffset: 16; }
  100%     { stroke-dashoffset: 138; }
}
.info-speed .s-needle {
  stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round;
  transform-origin: 60px 88px;
  animation: sNeedle 3.2s var(--ease-out) infinite;
}
@keyframes sNeedle {
  0%       { transform: rotate(-82deg); }
  38%, 88% { transform: rotate(66deg); }
  100%     { transform: rotate(-82deg); }
}
.info-speed .s-hub { fill: var(--sec-400); }
.info-speed .s-ticks line { stroke: var(--fg-3); stroke-width: 1.4; }

/* ── 3 · SEO — barres croissantes et courbe de tendance ──────────────────── */
.info-seo .q-axis { stroke: var(--line-strong); stroke-width: 1.4; }
.info-seo .q-bar {
  fill: var(--sec-500);
  transform-origin: 50% 102px;
  animation: qGrow 3.4s var(--ease-out) infinite;
}
.info-seo .q-b1 { animation-delay: 0s;   opacity: .5; }
.info-seo .q-b2 { animation-delay: .16s; opacity: .66; }
.info-seo .q-b3 { animation-delay: .32s; opacity: .82; }
.info-seo .q-b4 { animation-delay: .48s; fill: var(--sec-400); }
@keyframes qGrow {
  0%, 100% { transform: scaleY(.12); }
  34%, 84% { transform: scaleY(1); }
}
.info-seo .q-trend {
  fill: none; stroke: var(--citrus-500); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 108; stroke-dashoffset: 108;
  animation: qTrend 3.4s var(--ease-out) infinite;
}
@keyframes qTrend {
  0%       { stroke-dashoffset: 108; }
  46%, 86% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 108; }
}
.info-seo .q-dot { fill: var(--citrus-500); animation: qDot 3.4s var(--ease-out) infinite; }
@keyframes qDot { 0%, 44% { opacity: 0; } 56%, 88% { opacity: 1; } 100% { opacity: 0; } }
.info-seo .q-rank { fill: var(--citrus-500); animation: qDot 3.4s var(--ease-out) infinite; }

/* ── 4 · CONVERSION — entonnoir et gouttes ───────────────────────────────── */
.info-conv .c-funnel {
  fill: rgba(81,249,249,.10);
  stroke: var(--sec-400); stroke-width: 1.8; stroke-linejoin: round;
}
.info-conv .c-drop { fill: var(--citrus-500); animation: cDrop 2.8s var(--ease-in-out) infinite; }
.info-conv .c-d1 { animation-delay: 0s; }
.info-conv .c-d2 { animation-delay: .34s; }
.info-conv .c-d3 { animation-delay: .68s; }
@keyframes cDrop {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  14%  { opacity: 1; }
  62%  { transform: translateY(70px) scale(.5); opacity: 1; }
  78%, 100% { transform: translateY(86px) scale(.2); opacity: 0; }
}
.info-conv .c-ring {
  fill: none; stroke: var(--sec-400); stroke-width: 2;
  animation: cRing 2.8s var(--ease-out) infinite;
  transform-origin: 60px 104px;
}
@keyframes cRing {
  0%, 55%  { transform: scale(.82); opacity: .45; }
  70%      { transform: scale(1.14); opacity: 1; }
  100%     { transform: scale(.82); opacity: .45; }
}
.info-conv .c-core { fill: var(--citrus-500); animation: cRing 2.8s var(--ease-out) infinite; }

/* ── 5 · RESPONSIVE — trois appareils, contenu qui se recompose ──────────── */
.info-resp rect { fill: rgba(81,249,249,.07); stroke: var(--sec-400); stroke-width: 1.7; }
.info-resp .r-stand, .info-resp .r-base { stroke: var(--sec-400); stroke-width: 1.7; stroke-linecap: round; }
.info-resp .r-line {
  stroke: var(--fg-2); stroke-width: 2.4; stroke-linecap: round;
  transform-origin: left center;
  animation: rReflow 4.2s var(--ease-in-out) infinite;
}
.info-resp .r-l1 { animation-delay: 0s; }
.info-resp .r-l2 { animation-delay: .12s; }
.info-resp .r-l3 { animation-delay: .24s; }
.info-resp .r-l4 { animation-delay: .5s; }
.info-resp .r-l5 { animation-delay: .62s; }
.info-resp .r-l6 { animation-delay: .9s; }
.info-resp .r-l7 { animation-delay: 1.02s; }
.info-resp .r-l8 { animation-delay: 1.14s; }
@keyframes rReflow {
  0%, 100% { transform: scaleX(.3); opacity: .3; }
  30%, 70% { transform: scaleX(1);  opacity: 1; }
}
.info-resp .r-pulse {
  fill: none; stroke: var(--sec-400); stroke-width: 1.4;
  transform-origin: 56px 101px;
  animation: rPulse 4.2s var(--ease-out) infinite;
}
@keyframes rPulse {
  0%, 100% { transform: scale(.5); opacity: 0; }
  40%      { transform: scale(.9); opacity: .5; }
  75%      { transform: scale(1.3); opacity: 0; }
}
.col-span-2 { grid-column: span 2; }

.card-icon-container { margin-bottom: 6px; }
.card-title {
  font-size: var(--fs-h3);
  letter-spacing: -.03em;
  margin-top: auto;
}
.card-desc { color: var(--fg-2); font-size: 1rem; }

/* Micro-démo « ultra rapide » */
.speed-meter { margin-top: 14px; }
.speed-meter-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.speed-meter-fill {
  height: 100%; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--success), var(--volt-500));
  box-shadow: 0 0 10px rgba(34,220,240,.5);
}
.why-card:hover .speed-meter-fill { animation: speedFill 1.5s var(--ease-out) infinite; }
@keyframes speedFill {
  0%   { width: 0; opacity: 1; }
  55%  { width: 96%; opacity: 1; }
  100% { width: 96%; opacity: .25; }
}
.speed-meter-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.speed-meter-legend b { color: var(--success); font-weight: 500; }

/* --------------------------------------------------------------------------
   14 · SERVICES (section porcelain)
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--porcelain-pure);
  border: 1px solid var(--porcelain-line);
  box-shadow: 0 2px 4px rgba(5,32,40,.03), 0 18px 40px -24px rgba(5,32,40,.18);
  overflow: hidden;
  isolation: isolate;
}
.service-card:hover {
  transform: translate3d(0, -8px, 0);
  border-color: rgba(15,138,161,.22);
  box-shadow: 0 4px 8px rgba(10,12,17,.04), 0 36px 70px -30px rgba(15,138,161,.32);
}
/* Point 2 — ce qu'on prenait pour une ombre grise en bas des images était en
   réalité un mask-image en fondu : l'image s'effaçait sur les 32 derniers
   pour-cent et laissait voir le fond gris du conteneur. Masque supprimé et
   fond neutralisé : les images sont franches jusqu'au bord. */
.service-img-wrapper {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--ink-850);
}
.service-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out);
}
.service-card:hover .service-img { transform: scale(1.08); }
.service-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(23,180,204,.22), transparent 60%);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.service-card:hover .service-card-glow { opacity: 1; }
.service-index {
  position: absolute;
  top: 18px; left: 20px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--porcelain-muted);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--porcelain-line);
}
/* Point 8 — le contenu remontait de 34 px sous l'image et collait le h3 au
   visuel. Il repart de la ligne de base, avec un padding haut généreux et une
   hairline qui matérialise la séparation image / texte. */
.service-card-content {
  padding: clamp(30px, 2.8vw, 42px) clamp(28px, 2.6vw, 38px) clamp(28px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  margin-top: 0;
  position: relative;
  border-top: 1px solid var(--porcelain-line);
}
.service-title {
  font-size: var(--fs-h3);
  letter-spacing: -.03em;
  color: var(--porcelain-ink);
}
.service-text { color: var(--porcelain-muted); font-size: .9688rem; }
.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}
.service-features li {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--porcelain-muted);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: #F2F4F7;
  border: 1px solid var(--porcelain-line);
}
.service-card-content .btn { align-self: flex-start; margin-top: auto; }

/* --------------------------------------------------------------------------
   15 · PORTFOLIO — galerie vidéo + études de cas
   -------------------------------------------------------------------------- */
.portfolio-section { overflow: clip; }

/* Galerie horizontale */
/* Point 5 — les cartes du rail étaient rasées contre le haut de leur
   conteneur. Celui-ci reçoit un vrai padding interne et un fond nettement
   plus clair, deux crans au-dessus du fond de section. */
.recent-projects {
  position: relative;
  margin-bottom: clamp(72px, 9vw, 120px);
  padding: clamp(26px, 2.8vw, 40px) 0 clamp(30px, 3vw, 44px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(81,249,249,.16), transparent 66%),
    linear-gradient(180deg, rgba(45,149,172,.30) 0%, rgba(25,86,102,.34) 52%, rgba(19,69,83,.28) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.recent-projects .recent-projects-head { padding-inline: clamp(22px, 2.4vw, 36px); }
/* La piste garde une marge haute : les cartes ne touchent plus le bord. */
.recent-projects .projects-viewport { padding-block: 6px 8px; }
.recent-projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.recent-projects-head h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.035em;
}
.recent-projects-head p { color: var(--fg-3); font-size: .9688rem; max-width: 48ch; }
.recent-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.recent-hint svg { width: 15px; height: 15px; color: var(--volt-400); animation: hintSlide 2.4s var(--ease-in-out) infinite; }
@keyframes hintSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.projects-viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* Marge de respiration pour que la dernière carte ne colle pas au bord */
  padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
}
.projects-viewport::-webkit-scrollbar { display: none; }

.projects-track {
  display: flex;
  gap: clamp(22px, 2.2vw, 32px);
  width: max-content;
  padding-right: clamp(20px, 6vw, 90px);
  will-change: transform;
}
.project-card { scroll-snap-align: start; }

.project-card {
  position: relative;
  flex: 0 0 clamp(280px, 30vw, 420px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  transition: transform .7s var(--ease-out), border-color .5s, box-shadow .6s, opacity .5s;
}
.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-900);
}
.project-media video,
.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}
.project-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,10,.32) 0%, transparent 34%, rgba(5,6,10,.72) 100%);
  pointer-events: none;
}
.project-card:hover { transform: translate3d(0,-8px,0); border-color: var(--line-volt); box-shadow: var(--sh-3), 0 0 70px -22px rgba(34,220,240,.35); }
.project-card:hover .project-media video,
.project-card:hover .project-media img { transform: scale(1.07); }
.projects-track.is-hovered .project-card:not(:hover) { opacity: .45; }

.project-index {
  position: absolute;
  top: 16px; left: 18px;
  z-index: 2;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  color: var(--volt-400);
}
.project-year {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 2;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--fg-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(5,6,10,.5);
  border: 1px solid var(--line-strong);
}
.project-live {
  position: absolute;
  bottom: 16px; left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(3,20,26,.55);
  border: 1px solid var(--line-strong);
}
.project-live .pulse-dot {
  position: relative;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
}
.project-live .pulse-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: dotPulse 2s var(--ease-out) infinite;
}

.project-body {
  padding: clamp(24px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.project-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.project-eyebrow .sep { width: 12px; height: 1px; background: var(--line-strong); }
.project-name {
  font-size: var(--fs-h4);
  letter-spacing: -.035em;
}
.project-desc { color: var(--fg-2); font-size: .9375rem; }

.project-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.project-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--volt-400);
  line-height: 1.1;
}
.project-metric span {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tags li {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.project-body .btn { align-self: flex-start; }

.projects-progress {
  margin-top: 30px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.projects-progress-fill {
  height: 100%; width: 12%;
  border-radius: 2px;
  background: var(--grad-volt);
  box-shadow: 0 0 12px rgba(34,220,240,.5);
}

/* Études de cas mises en avant */
/* Point 11.2 — 4 réalisations en 2 × 2 */
.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
.portfolio-media-wrapper { display: grid; }
.portfolio-item {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  box-shadow: var(--sh-2);
  cursor: pointer;
}
.portfolio-item:hover {
  transform: translate3d(0,-8px,0);
  border-color: var(--line-volt);
  box-shadow: var(--sh-3), 0 0 90px -26px rgba(34,220,240,.35);
}
.portfolio-media-wrapper { position: relative; }
.portfolio-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}
.portfolio-item:hover .portfolio-img { transform: scale(1.08); }
.portfolio-media-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(5,6,10,.86) 100%);
  pointer-events: none;
}
.portfolio-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(10px);
  transition: transform .7s var(--ease-out);
}
.portfolio-item:hover .portfolio-info { transform: translateY(0); }
.project-tag {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--volt-400);
}
.portfolio-info .project-name { font-size: var(--fs-h3); }
.portfolio-info .project-desc { max-width: 46ch; }
.portfolio-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.portfolio-item:hover .portfolio-cta { opacity: 1; transform: none; }
.portfolio-cta svg { width: 14px; height: 14px; color: var(--volt-400); }

/* --------------------------------------------------------------------------
   16 · PROCESSUS
   -------------------------------------------------------------------------- */
.timeline-container {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}
.timeline-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--line);
}
.timeline-progress {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0%;
  background: var(--grad-volt);
  box-shadow: 0 0 14px rgba(34,220,240,.7);
  transition: height .5s var(--ease-out);
}
.timeline-progress::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--volt-400);
  box-shadow: 0 0 18px 3px rgba(34,220,240,.7);
}
.timeline-steps { display: flex; flex-direction: column; gap: clamp(44px, 4.6vw, 76px); }
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
}
.timeline-step:nth-child(even) .step-content { grid-column: 3; text-align: left; }
.timeline-step:nth-child(odd)  .step-content { grid-column: 1; text-align: right; }
.timeline-step:nth-child(odd) .step-content .btn { margin-left: auto; }

.step-marker {
  grid-column: 2;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--fg-3);
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  z-index: 2;
  transition: color .5s var(--ease-out), border-color .5s, box-shadow .5s, background .5s;
}
.timeline-step.active .step-marker {
  color: var(--ink-900);
  background: var(--grad-volt);
  border-color: transparent;
  box-shadow: 0 0 34px -4px rgba(34,220,240,.6);
}
.timeline-step.active .step-marker::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--volt-500);
  animation: markerPulse 2.2s var(--ease-out) infinite;
}
@keyframes markerPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.step-content {
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(12,15,22,.4);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sh-2);
  transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .6s var(--ease-out);
}
.timeline-step.active .step-content {
  border-color: var(--line-volt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--sh-2), 0 0 60px -26px rgba(34,220,240,.4);
}
.step-label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--volt-400);
  display: block;
  margin-bottom: 9px;
}
.step-title { font-size: var(--fs-h3); letter-spacing: -.03em; margin-bottom: 10px; }
.step-text { color: var(--fg-2); font-size: .9688rem; }
.step-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   17 · DASHBOARD PERFORMANCE
   -------------------------------------------------------------------------- */
.dashboard-card { padding: clamp(26px, 3.4vw, 52px); }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.dashboard-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.dashboard-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; color: var(--success);
}
.dashboard-chrome .live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: iPulse 1.8s var(--ease-out) infinite;
}
.dashboard-title { font-size: var(--fs-h3); letter-spacing: -.03em; margin-bottom: 10px; }
.dashboard-subtitle { color: var(--fg-2); font-size: .9375rem; margin-bottom: 30px; }

.control-item { margin-bottom: 24px; }
.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 11px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.control-val { color: var(--volt-400); font-weight: 500; }

.dashboard-slider {
  --p: 95%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: grab;
}
.dashboard-slider:active { cursor: grabbing; }
.dashboard-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--volt-700), var(--volt-500)) 0 / var(--p) 100% no-repeat,
    rgba(255,255,255,.08);
}
.dashboard-slider::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
}
.dashboard-slider::-moz-range-progress {
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--volt-700), var(--volt-500));
}
.dashboard-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--volt-500);
  box-shadow: 0 0 0 4px rgba(34,220,240,.16), 0 2px 8px rgba(0,0,0,.5);
  transition: box-shadow .28s, transform .28s var(--ease-spring);
}
.dashboard-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--volt-500);
  box-shadow: 0 0 0 4px rgba(34,220,240,.16);
}
.dashboard-slider:hover::-webkit-slider-thumb,
.dashboard-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 7px rgba(34,220,240,.22), 0 2px 12px rgba(0,0,0,.6);
}

.dashboard-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 30px);
}
.gauge-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
}
.gauge-ring { position: relative; width: clamp(84px, 9vw, 116px); aspect-ratio: 1; }
.gauge-circle-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-circle-svg circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.gauge-bg { stroke: rgba(255,255,255,.07); }
.gauge-fill {
  stroke: url(#gaugeVolt);
  transition: stroke-dashoffset .55s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(34,220,240,.55));
}
.gauge-ticks { position: absolute; inset: 0; opacity: .45; }
.gauge-ticks line { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.gauge-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--fg);
}
.gauge-label {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   18 · TÉMOIGNAGES (porcelain)
   -------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
.section--porcelain .testimonial-card {
  background: var(--porcelain-pure);
  border-color: var(--porcelain-line);
  box-shadow: 0 2px 4px rgba(5,32,40,.03), 0 18px 40px -24px rgba(5,32,40,.18);
}
.section--porcelain .testimonial-card:hover {
  border-color: rgba(15,138,161,.22);
  box-shadow: 0 4px 8px rgba(10,12,17,.04), 0 36px 70px -30px rgba(15,138,161,.3);
}
.testimonial-card {
  position: relative;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial-card::after {
  content: '”';
  position: absolute;
  top: -26px; right: 18px;
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 1;
  color: rgba(23,180,204,.08);
  pointer-events: none;
}
/* Point 8 — les etoiles jaunes disparaissaient sur le fond clair. Elles sont
   posees dans un bloc sombre arrondi qui les fait ressortir. */
.testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  border: 1px solid rgba(5,32,40,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.testimonial-stars svg {
  width: 15px; height: 15px;
  color: var(--citrus-500);
  filter: drop-shadow(0 0 4px rgba(215,239,83,.55));
}
.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--porcelain-ink);
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--porcelain-line);
  margin-top: auto;
}
.author-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid var(--porcelain-pure);
  box-shadow: 0 0 0 2px rgba(23,180,204,.4);
}
.author-info { display: flex; flex-direction: column; gap: 2px; }
.author-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9688rem;
  letter-spacing: -.02em;
  color: var(--porcelain-ink);
}
.author-role {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--porcelain-muted);
}

/* --------------------------------------------------------------------------
   19 · TECHNOLOGIES
   -------------------------------------------------------------------------- */
.tech-marquee-wrapper { display: flex; flex-direction: column; gap: 18px; }
/* Point 8 — les vrais logos officiels (tracés simple-icons, licence CC0)
   remplacent les libellés texte.

   Décision sur la couleur : les marques sont rendues en MONOCHROME au repos,
   et reprennent leur couleur officielle au survol (--brand, posé en attribut
   sur chaque puce). Raison : cinq de ces logos sont bleus et un est violet
   (TypeScript, PostgreSQL, Framer, Vite, Stripe) — les afficher en couleur
   en permanence réintroduirait dans la page les teintes que tu as fait
   retirer partout ailleurs. Le survol donne la couleur authentique sans
   casser la discipline de la charte.
   Pour un affichage coloré permanent, il suffit de déplacer la règle `fill`
   du bloc :hover vers le bloc de base. */
.tech-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(.9375rem, 1.35vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--porcelain-line);
  background: var(--porcelain-pure);
  color: var(--porcelain-ink);
  opacity: .72;
  transition: opacity .35s var(--ease-out), border-color .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.tech-mark {
  width: clamp(19px, 1.7vw, 24px);
  height: clamp(19px, 1.7vw, 24px);
  flex: 0 0 auto;
  display: block;
}
.tech-mark path,
.tech-mark circle,
.tech-mark ellipse,
.tech-mark polygon {
  fill: var(--porcelain-ink);
  transition: fill .35s var(--ease-out);
}
.tech-logo:hover .tech-mark path,
.tech-logo:hover .tech-mark circle,
.tech-logo:hover .tech-mark ellipse,
.tech-logo:hover .tech-mark polygon {
  fill: var(--brand, var(--porcelain-ink));
}
.tech-logo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #22DCF0, #0F8AA1);
  flex: 0 0 auto;
}
.tech-logo:hover {
  opacity: 1;
  transform: translateY(-3px);
  border-color: rgba(15,138,161,.3);
  box-shadow: 0 14px 34px -14px rgba(15,138,161,.4);
}

/* --------------------------------------------------------------------------
   20 · FAQ
   -------------------------------------------------------------------------- */
.faq-container {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item { border-radius: var(--r-lg); overflow: hidden; }
.faq-item.active { border-color: var(--line-volt); }
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  text-align: left;
  transition: background .35s var(--ease-out);
}
.faq-trigger:hover { background: rgba(255,255,255,.025); }
.faq-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--fg);
  line-height: 1.4;
}
.faq-item.active .faq-title { color: #fff; }
.faq-icon-wrapper {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--volt-400);
  transition: border-color .4s, background .4s, transform .5s var(--ease-spring);
}
.faq-item.active .faq-icon-wrapper {
  border-color: transparent;
  background: var(--grad-volt);
  color: var(--ink-900);
  transform: rotate(180deg);
}
.faq-icon { width: 17px; height: 17px; }
.faq-content { height: 0; overflow: hidden; }
.faq-content-inner {
  padding: 0 clamp(20px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px);
  max-width: 78ch;
}
.faq-content-inner p { color: var(--fg-2); font-size: .9688rem; }

/* --------------------------------------------------------------------------
   21 · CTA + FORMULAIRE
   -------------------------------------------------------------------------- */
.cta-section { padding-bottom: clamp(100px, 12vw, 170px); }
.cta-card {
  position: relative;
  padding: clamp(32px, 4.5vw, 76px);
  border-radius: var(--r-2xl);
}
.cta-glow {
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 70%; aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(34,220,240,.22), transparent 62%);
  /* blur retiré : le dégradé radial suffit (performance). */
  pointer-events: none;
}
.cta-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.cta-title {
  font-size: var(--fs-h2);
  letter-spacing: -.04em;
  line-height: 1.02;
  margin-block: 18px 20px;
}
.cta-text { color: var(--fg-2); font-size: var(--fs-body); max-width: 44ch; }
.cta-assurances {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.cta-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .9375rem;
  color: var(--fg-2);
}
.cta-assurances svg { width: 18px; height: 18px; color: var(--success); flex: 0 0 auto; margin-top: 2px; }
.cta-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

/* Formulaire */
.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--r-lg);
  background: rgba(5,6,10,.5);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; position: relative; }
.field label {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field label .req { color: var(--citrus-500); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-size: .9375rem;
  font-family: var(--font-body);
  transition: border-color .3s var(--ease-out), background .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 108px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8B2C1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.field select option { background: var(--ink-800); color: var(--fg); }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--volt-500);
  background: rgba(34,220,240,.045);
  box-shadow: 0 0 0 3px rgba(34,220,240,.14);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--citrus-500);
  box-shadow: 0 0 0 3px rgba(215,239,83,.14);
}
.field-error {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--citrus-400);
  min-height: 0;
  opacity: 0;
  transition: opacity .25s;
}
.field.has-error .field-error { opacity: 1; }

.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .8438rem;
  line-height: 1.5;
  color: var(--fg-3);
}
.field-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px; height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: background .25s, border-color .25s;
  position: relative;
}
.field-consent input[type="checkbox"]:checked {
  background: var(--grad-volt);
  border-color: transparent;
}
.field-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5.5px; top: 2.5px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  transform: rotate(42deg);
}
.field-consent a { color: var(--volt-400); text-decoration: underline; text-underline-offset: 2px; }
.field-consent.has-error input[type="checkbox"] { border-color: var(--citrus-500); }

.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-status {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 16px;
}
.form-status[data-state="error"]   { color: var(--citrus-400); }
.form-status[data-state="success"] { color: var(--success); }
.form-status[data-state="loading"] { color: var(--volt-400); }

.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .btn-icon-left { animation: iSpin .9s linear infinite; }

/* --------------------------------------------------------------------------
   22 · FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
  overflow: clip;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(70%, 700px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--volt-500), transparent);
  opacity: .5;
}
.footer-container {
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(48px, 6vw, 76px);
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.footer-logo { color: var(--fg); }
.footer-tagline { color: var(--fg-3); font-size: .9375rem; max-width: 32ch; }
.footer-socials { display: flex; gap: 9px; margin-top: 4px; }
.footer-socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  transition: transform .4s var(--ease-spring), border-color .35s, color .35s, box-shadow .35s;
}
.footer-socials svg { width: 17px; height: 17px; }
.footer-socials a:hover {
  transform: translateY(-3px);
  border-color: var(--line-volt);
  color: var(--volt-400);
  box-shadow: 0 10px 24px -10px rgba(34,220,240,.5);
}

.footer-links-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col-title {
  /* Point 2 — aligné sur l'échelle h4 comme tous les autres titres de ce
     niveau ; sa distinction vient des capitales et du tracking, pas d'une
     taille inventée. */
  font-family: var(--font-label);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 18px;
}
.footer-links-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-links-col a,
.footer-address {
  font-size: .9375rem;
  color: var(--fg-2);
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
  display: inline-block;
}
.footer-links-col a:hover { color: var(--volt-400); transform: translateX(3px); }

/* Point 1 — le wordmark était un simple contour à 7 % d'opacité, donc
   quasi absent sur un fond aussi sombre. Il reçoit maintenant un
   remplissage dégradé lumineux et un halo : il se lit franchement tout en
   restant un élément de décor. */
.footer-wordmark {
  font-family: var(--font-display);
  /* Le minimum descend à 2.75rem : à 320 px de large, 3.5rem débordait
     puisque le wordmark est en white-space: nowrap. */
  font-size: clamp(2.75rem, 15vw, 15rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .8;
  /* Point 7 — décalé vers la droite pour dégager le coin bas-gauche, où
     s'affiche le mini-lecteur. Le débordement reste maîtrisé : c'est un
     padding, pas une translation, donc rien n'est coupé. */
  text-align: right;
  padding-right: clamp(var(--gutter), 4vw, 72px);
  padding-left: clamp(180px, 26vw, 420px);
  background: linear-gradient(180deg,
    rgba(168, 252, 254, .58) 0%,
    rgba(34, 220, 240, .30) 48%,
    rgba(15, 138, 161, .12) 82%,
    rgba(15, 138, 161, 0) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(34, 220, 240, .22));
  user-select: none;
  pointer-events: none;
  margin-bottom: -.14em;
  padding-inline: var(--gutter);
  white-space: nowrap;
  overflow: hidden;
}
/* Point 5 — le wordmark reçoit la même machine à écrire que le slogan du
   header : mêmes classes .slogan-char pilotées par initTypewriter, donc un
   seul mécanisme d'animation pour les deux. */
.wordmark-text { display: inline-flex; }
.wordmark-text .slogan-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(.14em);
  transition: opacity .2s ease-out, transform .3s var(--ease-out);
}
.wordmark-text .slogan-char.is-in { opacity: 1; transform: none; }
.wordmark-text .slogan-char.is-space { width: .3em; }
.wordmark-caret {
  display: inline-block;
  width: .045em;
  height: .78em;
  margin-left: .04em;
  vertical-align: baseline;
  background: var(--sec-400);
  box-shadow: 0 0 24px var(--sec-400);
  animation: caretBlink 1s steps(2, jump-none) infinite;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.copyright,
.legal-links a {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 22px; }
.legal-links a { transition: color .3s; }
.legal-links a:hover { color: var(--volt-400); }

/* --------------------------------------------------------------------------
   23 · BANDEAU COOKIES
   -------------------------------------------------------------------------- */
/* Le bandeau migre à droite : le mini-lecteur occupe désormais la gauche. */
.cookie-banner {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 1200;
  max-width: 420px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: rgba(8,10,15,.9);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--sh-3);
  transform: translateY(calc(100% + 30px));
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease-out);
}
.cookie-banner.is-visible { transform: none; opacity: 1; }
.cookie-banner h4 { font-size: var(--fs-h4); margin-bottom: 8px; letter-spacing: -.02em; }
.cookie-banner p { font-size: .8438rem; color: var(--fg-3); margin-bottom: 18px; }
.cookie-banner p a { color: var(--volt-400); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   24 · PAGES ANNEXES (légales, merci)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(140px, 18vh, 200px) clamp(40px, 5vw, 60px);
  text-align: center;
  position: relative;
}
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -.04em; margin-block: 18px 16px; }
.page-hero p { color: var(--fg-2); max-width: 56ch; margin-inline: auto; }

.legal-content {
  max-width: 820px;
  margin-inline: auto;
  padding-bottom: clamp(80px, 10vw, 130px);
}
.legal-content h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  letter-spacing: -.03em;
  margin-block: 48px 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal-content h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-content h3 { font-size: var(--fs-h3); margin-block: 26px 10px; color: var(--fg); }
.legal-content p, .legal-content li { color: var(--fg-2); font-size: .9688rem; margin-bottom: 12px; }
.legal-content ul { padding-left: 20px; }
.legal-content ul li { list-style: none; position: relative; }
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: -18px; top: .68em;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--volt-500);
}
.legal-content a { color: var(--volt-400); text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { color: var(--fg); font-weight: 600; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 18px 26px;
  font-size: .9063rem;
}
.legal-table th, .legal-table td {
  padding: 13px 16px;
  text-align: left;
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.legal-table th {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(255,255,255,.03);
}
.legal-scroll { overflow-x: auto; }

/* Page merci */
.thanks-card {
  max-width: 700px;
  margin-inline: auto;
  padding: clamp(36px, 5vw, 68px);
  border-radius: var(--r-2xl);
  text-align: center;
}
.thanks-check {
  display: grid;
  place-items: center;
  width: 86px; height: 86px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: rgba(34,220,240,.1);
  border: 1px solid rgba(34,220,240,.35);
  color: var(--success);
}
.thanks-check svg { width: 40px; height: 40px; }
.thanks-check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: iconDraw .9s .3s var(--ease-out) forwards;
}
.thanks-steps {
  display: grid;
  gap: 14px;
  text-align: left;
  margin-block: 34px;
  padding-block: 28px;
  border-block: 1px solid var(--line);
}
.thanks-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: .9375rem; color: var(--fg-2); }
.thanks-steps .num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--volt-400);
  border: 1px solid var(--line-volt);
  background: rgba(34,220,240,.07);
}
.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   25 · ÉTATS D'ANIMATION AU SCROLL
   -------------------------------------------------------------------------- */
/* [data-reveal] : plus de will-change, GSAP le gère pendant le tween. */

/* Masque de révélation mot par mot. Le padding/margin compense les
   jambages que `overflow: hidden` couperait sinon. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.split-word-inner {
  display: inline-block;
}

/* ==========================================================================
   25b · NOUVEAUX COMPOSANTS — refonte n°2
   ========================================================================== */

/* --------------------------------------------------------------------------
   A · SLOGAN ANIMÉ « Création de site »
   Machine à écrire en boucle infinie. Piloté par transitions CSS et non par
   requestAnimationFrame : le slogan continue de tourner même quand le moteur
   d'animation est suspendu.

   Point 3 — le slogan se place SOUS le nom du logo : les deux forment un
   bloc de marque unique, aligné sur la gauche du wordmark.
   -------------------------------------------------------------------------- */
.logo-text-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.logo-slogan {
  display: none;
  align-items: center;
  gap: 2px;
  font-family: var(--font-label);
  font-size: .625rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sec-400);
  white-space: nowrap;
  line-height: 1.1;
  min-height: 1.1em;        /* réserve la place : le header ne tremble pas */
  min-width: 16ch;
  user-select: none;
}
@media (min-width: 640px) { .site-header .logo-slogan { display: inline-flex; } }

.slogan-text { display: inline-flex; }
.slogan-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .18s ease-out, transform .26s var(--ease-out);
}
.slogan-char.is-in { opacity: 1; transform: none; }
.slogan-char.is-space { width: .38em; }

.slogan-caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 2px;
  background: var(--volt-500);
  box-shadow: 0 0 7px var(--volt-500);
  animation: caretBlink 1s steps(2, jump-none) infinite;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Version footer : plus grande, toujours sous le wordmark */
.footer-brand .logo-slogan {
  display: inline-flex;
  font-size: .75rem;
  letter-spacing: .22em;
  min-width: 0;
}
.footer-brand .logo-mark { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   5.3 · COQUILLE DES PROPOSITIONS
   Un conteneur externe en verre enveloppe chaque carte. La carte intérieure
   garde sa jante de lumière animée.
   -------------------------------------------------------------------------- */
.proposition-shell {
  position: relative;
  padding: clamp(18px, 1.6vw, 26px);
  border-radius: var(--r-3xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 100%),
    rgba(19, 69, 83, .76);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px -30px rgba(0,0,0,.7);
  isolation: isolate;
  transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .6s var(--ease-out);
}
.proposition-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(34,220,240,.09), transparent 44%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.proposition-shell:hover::before { opacity: 1; }
.proposition-shell:hover {
  border-color: var(--line-volt);
  transform: translate3d(0, -4px, 0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 40px 90px -34px rgba(0,0,0,.8), 0 0 80px -30px rgba(34,220,240,.3);
}
.proposition-shell--citrus:hover {
  border-color: rgba(215,239,83,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 40px 90px -34px rgba(0,0,0,.8), 0 0 80px -30px rgba(215,239,83,.28);
}
/* Point 9 — les deux coquilles s'étiraient bien à la même hauteur, mais la
   carte intérieure, elle, gardait la hauteur de son contenu. La proposition 2
   ayant un élément méta de moins, sa carte finissait 49 px plus courte : d'où
   la bordure basse qui ne « suivait » pas celle de gauche.
   La coquille devient une colonne flex et la carte s'étend pour la remplir.
   Les deux cartes atteignent donc exactement la même hauteur. */
.proposition-shell {
  display: flex;
  flex-direction: column;
}
.proposition-shell .proposition-card {
  border-radius: var(--r-xl);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.proposition-shell .proposition-card:hover { transform: none; }

/* Le bloc d'action est poussé en bas : l'espace excédentaire se répartit
   au-dessus, et les deux boutons se retrouvent sur la même ligne de base. */
.proposition-shell .proposition-actions { margin-top: auto; padding-top: 20px; }
/* Boutons de largeur identique, quelle que soit la longueur du libellé */
.proposition-shell .proposition-actions .btn { width: 100%; }

/* ── Point 5 · Propositions sur fond porcelaine ─────────────────────────
   Les cartes reprennent exactement le traitement des témoignages : surface
   blanche, hairline sombre, ombre portée douce. Sans cela, du verre conçu
   pour le sombre devient illisible sur un fond clair. */
.section--porcelain .proposition-shell {
  background: rgba(255,255,255,.42);
  border-color: var(--porcelain-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px -34px rgba(5,32,40,.34);
}
.section--porcelain .proposition-shell::before {
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(15,138,161,.10), transparent 44%);
}
.section--porcelain .proposition-shell:hover {
  border-color: rgba(15,138,161,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 34px 76px -34px rgba(5,32,40,.42), 0 0 60px -30px rgba(15,138,161,.24);
}
.section--porcelain .proposition-shell--citrus:hover {
  border-color: rgba(155,181,32,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 34px 76px -34px rgba(5,32,40,.42), 0 0 60px -30px rgba(188,214,52,.34);
}
.section--porcelain .proposition-card {
  background: var(--porcelain-pure);
  border-color: var(--porcelain-line);
  box-shadow: 0 12px 34px -22px rgba(5,32,40,.3);
}
.section--porcelain .proposition-headline { color: var(--porcelain-ink); }
.section--porcelain .proposition-desc { color: var(--porcelain-muted); }
.section--porcelain .shell-tag { color: var(--porcelain-muted); }
.section--porcelain .shell-tag .shell-tag-num { color: var(--volt-700); }
.section--porcelain .proposition-shell--citrus .shell-tag .shell-tag-num { color: var(--citrus-700); }
.section--porcelain .proposition-badge {
  color: var(--volt-700);
  background: rgba(15,138,161,.10);
  border-color: rgba(15,138,161,.26);
}
.section--porcelain .proposition-card--citrus .proposition-badge {
  color: #6E8210;
  background: rgba(188,214,52,.16);
  border-color: rgba(155,181,32,.34);
}
.section--porcelain .proposition-meta li span {
  color: var(--porcelain-muted);
  border-color: var(--porcelain-line);
  background: rgba(255,255,255,.6);
}
/* La jante de lumière animée est conservée, retournée pour le fond clair */
.section--porcelain .rim-light::after { opacity: .5; }

/* Étiquette de la coquille, en tête */
.shell-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 8px 16px;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.shell-tag .shell-tag-num { color: var(--volt-400); }
.proposition-shell--citrus .shell-tag .shell-tag-num { color: var(--citrus-500); }

/* --------------------------------------------------------------------------
   5.1 · BADGES DE PROPOSITION — agrandis et en italique
   -------------------------------------------------------------------------- */
.proposition-badge {
  font-family: var(--font-label);
  font-size: 1rem !important;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .01em !important;
  text-transform: none !important;
  padding: 9px 18px !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4 · ARGUMENTS DE CONVERSION SOUS LES CTA
   Point 4 — plus aucun contour ni pastille : chaque bloc est simplement
   souligné d'un trait. Le regard suit la ligne de base, l'ensemble est plus
   lisible et nettement plus éditorial que quatre pastilles cerclées.
   -------------------------------------------------------------------------- */
.hero-trust {
  gap: 0 !important;
  font-size: .875rem !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--fg) !important;
  flex-wrap: wrap;
}
.hero-trust li {
  position: relative;
  gap: 10px;
  padding: 14px 26px 14px 0;
  margin-right: 26px;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 500;
  transition: color .35s var(--ease-out);
}
/* Le trait de soulignement */
.hero-trust li::after {
  content: '';
  position: absolute;
  left: 0; right: 26px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--volt-500), rgba(34,220,240,.22) 65%, transparent);
  transform-origin: left center;
  transition: background .4s var(--ease-out);
}
.hero-trust li:last-child { margin-right: 0; }
.hero-trust li:last-child::after { right: 0; }
.hero-trust li:hover { color: var(--volt-300); }
.hero-trust li:hover::after {
  background: linear-gradient(90deg, var(--volt-400), var(--volt-500) 70%, rgba(34,220,240,.4));
}
.hero-trust svg { width: 16px; height: 16px; color: var(--volt-500); }

/* --------------------------------------------------------------------------
   2 · VITRINE VIDÉO — section claire à motif animé
   Placée entre le hero et les logos clients. Fond clair, motif de pointillés
   en dérive perpétuelle, les 3 vidéos en lecture bouclée permanente.
   -------------------------------------------------------------------------- */
.showcase-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,220,240,.14), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F2FBF7 46%, var(--porcelain) 100%);
  color: var(--porcelain-muted);
  isolation: isolate;
  overflow: clip;
}
/* Motif de pointillés — deux trames de tailles différentes en dérive lente
   et opposée : la surface reste vivante sans jamais capter l'attention. */
.showcase-section::before {
  content: '';
  position: absolute;
  inset: -60px;
  z-index: -2;
  background-image:
    radial-gradient(circle, rgba(15,138,161,.30) 1.4px, transparent 1.5px),
    radial-gradient(circle, rgba(34,220,240,.22) 1px, transparent 1.1px);
  background-size: 34px 34px, 19px 19px;
  background-position: 0 0, 9px 9px;
  animation: dotDrift 26s linear infinite;
}
/* Voile radial : les pointillés s'estompent vers les bords, le centre
   reste net. Sans ce masque, le motif écraserait les vidéos. */
.showcase-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(255,255,255,.92) 30%, rgba(255,255,255,0) 78%);
  pointer-events: none;
}
@keyframes dotDrift {
  0%   { background-position: 0 0, 9px 9px; }
  100% { background-position: 34px 34px, -19px 38px; }
}

/* Liseré lumineux à la jointure haute avec le hero */
.showcase-section .section-container { position: relative; z-index: 1; }

.showcase-section .hero-videos-carousel {
  opacity: 1;
  margin-top: 0;
  margin-bottom: 0;
}
/* Les cartes passent en habillage clair : du verre sombre sur fond blanc
   serait un trou noir au milieu de la section. */
.showcase-section .hero-video-card {
  background: #FFFFFF;
  border-color: rgba(5,32,40,.10);
  box-shadow: 0 2px 6px rgba(5,32,40,.05), 0 30px 70px -34px rgba(5,32,40,.30);
}
.showcase-section .mockup-header {
  background: var(--porcelain);
  border-bottom-color: rgba(5,32,40,.10);
}
.showcase-section .mockup-url { color: var(--porcelain-muted); }
.showcase-section .mockup-header .dot { background: rgba(5,32,40,.18); }
.showcase-section .hero-video-title {
  color: var(--porcelain-ink);
  background: rgba(255,255,255,.94);
  border-top-color: rgba(5,32,40,.10);
}
/* Même correction : le volt-700 sur un voile vert clair tombait à 2,74:1. */
.showcase-section .hero-video-title .tag {
  color: #044450;
  background: rgba(15,138,161,.12);
  border-color: rgba(15,138,161,.30);
}
.showcase-section .hero-video-wrapper::after {
  background: linear-gradient(180deg, transparent 62%, rgba(5,32,40,.24));
}
.showcase-section .carousel-dot { background: rgba(5,32,40,.18); }
.showcase-section .carousel-dot.is-active {
  background: var(--volt-700);
  box-shadow: 0 0 12px rgba(15,138,161,.45);
}
.showcase-section .showcase-head h2 { color: var(--porcelain-ink); }
.showcase-section .showcase-head p { color: var(--porcelain-muted); }
/* #0F8AA1 sur blanc ne donnait que 3,06:1. Le vert profond monte à 6,4:1
   sans changer la teinte perçue. */
.showcase-section .eyebrow { color: #05515F; }
.showcase-section .eyebrow::before { background: linear-gradient(90deg, transparent, #05515F); }
.showcase-section .showcase-live {
  color: #084E5C;
  background: rgba(15,138,161,.12);
  border-color: rgba(15,138,161,.30);
}

/* --------------------------------------------------------------------------
   Logos clients — section autonome, entre la vitrine et les propositions
   -------------------------------------------------------------------------- */
.logos-section { padding-block: clamp(52px, 6vw, 84px); }
.logos-section .hero-client-logos { opacity: 1; margin: 0; }

/* --------------------------------------------------------------------------
   7 · TÉMOIGNAGES EN MARQUEE
   Chaque avis est enveloppé dans une coquille de verre qui réunit l'image du
   site livré et le témoignage lui-même. Défilement droite → gauche continu,
   suspendu au survol pour laisser le temps de lire.
   -------------------------------------------------------------------------- */
.testimonials-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 10px 4px;
  /* Les bords s'estompent : les cartes entrent et sortent sans coupure nette */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.testimonials-track {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2vw, 30px);
  width: max-content;
  animation: marquee 84s linear infinite;
  will-change: transform;
}
.testimonials-marquee:hover .testimonials-track { animation-play-state: paused; }

/* La coquille : verre, grand rayon, marges internes généreuses */
.testimonial-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  flex: 0 0 auto;
  width: clamp(300px, 33vw, 430px);
  padding: clamp(16px, 1.6vw, 24px);
  /* Point 8 — le rayon passe de --r-3xl (52 px) a --r-lg (22 px), soit
     exactement celui des images de site : les deux niveaux s'accordent. */
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 100%),
    rgba(255,255,255,.22);
  border: 1px solid var(--porcelain-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 26px 60px -34px rgba(5,32,40,.34);
  isolation: isolate;
  transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.testimonials-marquee:hover .testimonial-shell:hover {
  border-color: rgba(15,138,161,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 34px 76px -34px rgba(5,32,40,.42);
  transform: translateY(-4px);
}
.testimonial-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(15,138,161,.10), transparent 44%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.testimonial-shell:hover::before { opacity: 1; }

/* L'image du site, dans son conteneur à fond coloré */
.testimonial-site {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-750) 0%, var(--ink-850) 100%);
  border: 1px solid rgba(5,32,40,.10);
  flex: 0 0 auto;
}
.testimonial-site img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  transition: transform 1.1s var(--ease-out);
}
.testimonial-shell:hover .testimonial-site img { transform: scale(1.05); }
.testimonial-site::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(3,20,26,.62));
  pointer-events: none;
}
.testimonial-site-label {
  position: absolute;
  left: 12px; bottom: 10px;
  z-index: 1;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(3,20,26,.72);
  border: 1px solid var(--line-volt);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--volt-300);
}

/* La carte de témoignage garde son design d'origine, sans double cadre */
.testimonial-shell .testimonial-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 8px 8px;
  flex: 1 1 auto;
}

/* Avatars par initiales pour les avis sans photo fournie */
.author-avatar--initials {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ink-600), var(--ink-750));
  color: var(--volt-300);
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid rgba(5,32,40,.14);
  flex: 0 0 auto;
}

.testimonials-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(26px, 3vw, 40px);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--porcelain-muted);
}
.testimonials-hint svg { width: 15px; height: 15px; }
/* Point 5 — l'en-tête était en deux blocs opposés : texte à gauche, badge
   rejeté à droite. Tout passe en colonne centrée, si bien que le badge
   « Lecture en continu » se retrouve dans l'axe, juste au-dessus de la
   vidéo centrale. */
.showcase-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: clamp(24px, 2.6vw, 38px);
}
.showcase-head h2 {
  font-size: var(--fs-h2);
  letter-spacing: -.035em;
  margin-top: 6px;
}
.showcase-head p {
  color: var(--fg-2);
  font-size: .9688rem;
  max-width: 62ch;
  margin-inline: auto;
}
/* Badge resserré : hauteur ramenée de 34 à 22 px pour ne pas peser dans l'axe */
.showcase-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-volt);
  background: rgba(81,249,249,.08);
  font-family: var(--font-label);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sec-300);
  white-space: nowrap;
}
.showcase-live .pulse-dot { width: 6px; height: 6px; }

/* --------------------------------------------------------------------------
   2 · TITRE HERO — saut de ligne forcé pour tenir sur exactement 2 lignes
   -------------------------------------------------------------------------- */
.hero-content { max-width: 1180px !important; }
.hero-title { text-wrap: initial; }
.hero-br { display: none; }
@media (min-width: 900px) { .hero-br { display: inline; } }

/* --------------------------------------------------------------------------
   11.1 · RAIL DES RÉALISATIONS — marquee automatique droite → gauche
   -------------------------------------------------------------------------- */
.projects-viewport {
  overflow: hidden;
  cursor: default;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.projects-track {
  animation: marquee 52s linear infinite;
  padding-right: 0;
}
/* Le survol suspend le défilement pour laisser regarder les vidéos. */
.projects-viewport:hover .projects-track { animation-play-state: paused; }
.projects-track .project-card { scroll-snap-align: none; }

/* --------------------------------------------------------------------------
   11.2 · CARTES DE RÉALISATION — grille 2 × 2
   -------------------------------------------------------------------------- */
.portfolio-item .portfolio-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}
.portfolio-item:hover .portfolio-video { transform: scale(1.08); }

.portfolio-item--invite {
  display: grid;
  place-items: center;
  min-height: 340px;
  text-align: center;
  padding: var(--card-pad);
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(34,220,240,.10), transparent 70%),
    var(--ink-800);
  border-style: dashed;
  border-color: var(--line-strong);
}
.portfolio-item--invite:hover { border-style: solid; }
.invite-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 38ch; }
.invite-inner h3 { font-size: var(--fs-h3); letter-spacing: -.035em; }
.invite-inner p { color: var(--fg-2); font-size: .9688rem; }
.invite-slot {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-volt);
  color: var(--volt-400);
  background: rgba(34,220,240,.06);
}
.invite-slot svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   12 · PROCESSUS — deux parcours de conversion en parallèle
   -------------------------------------------------------------------------- */
/* Point 4 — colonne unique centrée, avec un intervalle franc entre les deux
   parcours. Deux colonnes forçaient une lecture en parallèle alors que le
   visiteur doit comparer séquentiellement, puis choisir. */
.paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 7vw, 104px);
  max-width: 860px;
  margin-inline: auto;
}

/* Vidéo de présentation en tête de chaque parcours (remplaçable) */
.path-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 56px -30px rgba(0,0,0,.7);
  margin-bottom: 8px;
}
.path-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.path-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(3,20,26,.52));
  pointer-events: none;
}
.path-media-tag {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(3,20,26,.72);
  border: 1px solid var(--line-volt);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--volt-300);
}
.path-col--citrus .path-media-tag {
  border-color: rgba(215,239,83,.34);
  color: var(--citrus-300);
}
.path-media-tag svg { width: 13px; height: 13px; }
.path-col {
  position: relative;
  padding: clamp(26px, 2.6vw, 42px);
  border-radius: var(--r-2xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
    rgba(19, 69, 83, .78);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), var(--sh-2);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.path-col--citrus { border-color: rgba(215,239,83,.26); }
.path-head { display: flex; flex-direction: column; gap: 12px; }
.path-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-style: italic;
  letter-spacing: .06em;
  color: var(--volt-400);
  background: rgba(34,220,240,.09);
  border: 1px solid var(--line-volt);
}
.path-col--citrus .path-kicker {
  color: var(--citrus-500);
  background: rgba(215,239,83,.10);
  border-color: rgba(215,239,83,.3);
}
.path-title { font-size: var(--fs-h3); letter-spacing: -.035em; }
.path-lead { color: var(--fg-2); font-size: .9688rem; }
.path-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.path-meta span {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* Rail vertical par parcours */
.path-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}
.path-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding-block: 14px;
  align-items: start;
}
.path-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px; top: 46px; bottom: -6px;
  width: 1px;
  background: var(--line-strong);
}
.path-step.active:not(:last-child)::after { background: linear-gradient(180deg, var(--volt-500), var(--line-strong)); }
.path-num {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  transition: color .45s var(--ease-out), background .45s, border-color .45s, box-shadow .45s;
  z-index: 1;
}
.path-step.active .path-num {
  color: var(--on-citrus);
  background: var(--grad-volt);
  border-color: transparent;
  box-shadow: 0 0 26px -4px rgba(34,220,240,.6);
}
.path-col--citrus .path-step.active .path-num {
  background: var(--grad-citrus);
  box-shadow: 0 0 26px -4px rgba(215,239,83,.6);
}
.path-step h4 { font-size: var(--fs-h4); letter-spacing: -.02em; margin-bottom: 5px; }
.path-step p { color: var(--fg-2); font-size: .9063rem; }
.path-col > .btn { align-self: stretch; margin-top: auto; }

.path-outcome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: rgba(34,220,240,.07);
  border: 1px solid var(--line-volt);
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--volt-300);
}
.path-col--citrus .path-outcome {
  background: rgba(215,239,83,.08);
  border-color: rgba(215,239,83,.28);
  color: var(--citrus-300);
}
.path-outcome svg { width: 19px; height: 19px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   12 · TARIFS — grille inspirée de la référence HORIZONX
   -------------------------------------------------------------------------- */
/* Point 5 — la section tarifs était la plus sombre du site alors que c'est
   celle où l'on décide d'acheter. Elle reçoit le voile le plus généreux. */
.pricing-section {
  background:
    radial-gradient(ellipse 95% 62% at 50% -2%, rgba(54,136,149,.36), transparent 70%),
    radial-gradient(ellipse 60% 50% at 12% 78%, rgba(34,220,240,.16), transparent 68%),
    radial-gradient(ellipse 60% 50% at 88% 22%, rgba(81,249,249,.13), transparent 68%),
    linear-gradient(180deg, #145260 0%, #114A58 45%, #0D4250 100%);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
  align-items: stretch;
}

/* ── Point 5 · COQUILLE GLASSMORPHE DES TARIFS ─────────────────────────
   Reproduction de la référence HORIZONX : chaque table est enveloppée dans
   un cadre de verre à grand rayon et forte marge interne. La coquille de
   l'offre recommandée est vert vif et rayonne. La carte intérieure est
   rétrécie d'autant, si bien que l'ensemble conserve l'encombrement de
   l'ancienne carte seule. */
/* Point 1 — les coquilles reprennent l'éclairage de la section « Pourquoi
   LASDA » : un halo aqua en tête plus deux nappes latérales, sur une base
   qui monte à ink-750 au lieu de rester dans les tons bas. C'est ce qui
   donne à cette section la lisibilité que tu as relevée sur pourquoi-nous. */
.price-shell {
  position: relative;
  display: flex;
  padding: clamp(14px, 1.5vw, 22px);
  border-radius: var(--r-3xl);
  background:
    radial-gradient(ellipse 115% 66% at 50% -3%, rgba(34,220,240,.26), transparent 68%),
    radial-gradient(ellipse 62% 52% at 6% 40%,   rgba(15,138,161,.19), transparent 68%),
    radial-gradient(ellipse 58% 48% at 94% 74%,  rgba(81,249,249,.15), transparent 68%),
    linear-gradient(180deg, rgba(25,86,102,.62) 0%, rgba(14,55,67,.52) 48%, rgba(10,43,53,.46) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 26px 64px -32px rgba(0,0,0,.6);
  isolation: isolate;
  transition: transform .6s var(--ease-out), border-color .5s var(--ease-out), box-shadow .6s var(--ease-out);
}
.price-shell:hover {
  transform: translate3d(0, -6px, 0);
  border-color: var(--line-volt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 36px 84px -34px rgba(0,0,0,.7), 0 0 70px -30px rgba(34,220,240,.32);
}
.price-shell > .price-card {
  width: 100%;
  border-radius: calc(var(--r-3xl) - clamp(14px, 1.5vw, 22px) + 4px);
}
/* C'est la coquille qui s'élève : la carte ne bouge plus toute seule. */
.price-shell > .price-card:hover { transform: none; }

/* Coquille de l'offre recommandée : aqua plein et halo, comme la référence.
   Le padding haut est augmenté pour dégager le sticker « Recommandé ». */
.price-shell--featured {
  background:
    radial-gradient(ellipse 118% 70% at 50% -4%, rgba(81,249,249,.34), transparent 70%),
    radial-gradient(ellipse 60% 50% at 8% 44%,   rgba(34,220,240,.22), transparent 68%),
    linear-gradient(180deg, rgba(33,111,131,.72) 0%, rgba(19,69,83,.62) 50%, rgba(14,55,67,.56) 100%);
  border-color: var(--volt-500);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 1px rgba(34,220,240,.34),
    0 30px 90px -30px rgba(34,220,240,.52);
  padding-top: clamp(38px, 3.4vw, 52px);
}
.price-shell--featured::before {
  content: '';
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: calc(var(--r-3xl) + 34px);
  background: radial-gradient(ellipse 72% 62% at 50% 32%, rgba(34,220,240,.26), transparent 70%);
  pointer-events: none;
}
.price-shell--featured:hover {
  border-color: var(--volt-400);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(34,220,240,.46),
    0 40px 104px -32px rgba(34,220,240,.62);
}
/* Point 1 — le sticker « Recommandé » était posé à 11 px du haut de la
   coquille, donc écrasé contre la carte intérieure. Il remonte à cheval sur
   la bordure de la coquille, à l'extérieur, où il se lit d'un coup d'œil. */
.price-shell .price-flag {
  top: -15px;
  padding: 8px 22px;
  font-size: .75rem;
  z-index: 3;
  /* La bordure du sticker reprend exactement celle de la coquille sur
     laquelle il est pose : meme couleur lumineuse, plus de cerne sombre. */
  border: 1px solid var(--sec-400);
  box-shadow: 0 8px 26px -6px rgba(81,249,249,.75), 0 0 0 4px rgba(81,249,249,.22);
}
/* La carte est rétrécie : la coquille reprend l'encombrement que la carte
   occupait seule. Les marges internes restent confortables sans que les
   deux niveaux de padding s'additionnent. */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 2vw, 30px);
  border-radius: var(--r-2xl);
  /* Point 7 — la carte etait trop sombre : la base monte de ink-800 a
     ink-700 et le voile aqua est renforce. */
  background:
    radial-gradient(ellipse 115% 60% at 50% 0%, rgba(81,249,249,.18), transparent 64%),
    linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(25, 86, 102, .78);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), var(--sh-2);
  isolation: isolate;
  transition: transform .6s var(--ease-out), border-color .5s, box-shadow .6s;
}
/* Boutons resserrés en cohérence avec la carte rétrécie */
.price-card .btn {
  --btn-px: 16px;
  font-size: .875rem;
}
.price-card .btn > svg { width: 16px; height: 16px; }
.price-card:hover { transform: translate3d(0,-6px,0); border-color: var(--line-volt); }

/* L'offre recommandée : la carte reste sombre et lisible, c'est la coquille
   qui porte le vert vif et le rayonnement — exactement comme la référence,
   où le cadre est vert et l'intérieur presque noir. */
.price-card--featured {
  border-color: rgba(34,220,240,.30);
  /* Point 6 — le haut de ce conteneur recevait de plein fouet le halo de la
     coquille : les textes s'y noyaient. Le voile aqua du haut est retiré et
     remplacé par un voile SOMBRE opaque décroissant, qui ne couvre que le
     tiers supérieur. La lumière de la coquille externe reste intacte : c'est
     uniquement la transparence du fond interne qui est réduite, et
     uniquement vers le haut. */
  background:
    linear-gradient(180deg, rgba(4, 26, 33, .82) 0%, rgba(4, 26, 33, .40) 22%, rgba(4, 26, 33, 0) 42%),
    linear-gradient(165deg, rgba(34,220,240,.10), rgba(34,220,240,.03)),
    rgba(30, 98, 116, .80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
/* Le halo est porté par .price-shell--featured : pas de doublon ici. */
.price-flag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: var(--volt-500);
  color: var(--on-citrus);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(34,220,240,.7);
}

.price-name {
  font-size: var(--fs-h3);
  letter-spacing: -.03em;
}
.price-card--featured .price-name { color: var(--volt-400); }
.price-lead { color: var(--fg-2); font-size: .9063rem; min-height: 3.4em; }
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-block: 4px 6px;
}
.price-amount strong {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--fg);
}
.price-amount .price-unit {
  font-family: var(--font-label);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--fg-3);
}
.price-note {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.price-features {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .9063rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.price-features svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--volt-500); }
.price-features b { color: var(--fg); font-weight: 600; }
.price-card--featured .price-features svg { color: var(--volt-400); }
.price-card .btn { align-self: stretch; }

/* Bande du parcours autonome, sous la grille */
/* Point 6 — le prix était poussé à l'extrémité opposée par un flex-grow sur
   le texte, ce qui creusait un vide au milieu. Le bloc passe en largeurs
   ajustées au contenu : texte, prix et bouton se suivent sans trou. */
.pricing-selfserve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--r-2xl);
  background:
    linear-gradient(120deg, rgba(215,239,83,.08), rgba(34,220,240,.04) 60%, transparent),
    rgba(14, 55, 67, .80);
  border: 1px solid var(--line-strong);
}
/* flex: 0 1 auto au lieu de 1 1 380px : le texte ne s'étire plus pour
   occuper toute la largeur disponible, donc plus de vide entre lui et le prix. */
.pricing-selfserve .ss-body { flex: 0 1 auto; max-width: 56ch; }
.pricing-selfserve h3 { font-size: var(--fs-h3); letter-spacing: -.03em; margin-block: 10px 8px; }
.pricing-selfserve p { color: var(--fg-2); font-size: .9375rem; max-width: 54ch; }
/* Séparateur vertical entre le texte et le prix : il structure l'espace
   au lieu de le laisser vide. */
.pricing-selfserve .ss-price { padding-left: clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line-strong); }
.pricing-selfserve .ss-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
}
.pricing-selfserve .ss-price strong {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--citrus-500);
}
.pricing-selfserve .ss-price span {
  font-family: var(--font-label);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--fg-3);
}

.pricing-reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: clamp(26px, 3vw, 40px);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pricing-reassurance li { display: inline-flex; align-items: center; gap: 8px; }
.pricing-reassurance svg { width: 14px; height: 14px; color: var(--volt-500); }

/* --------------------------------------------------------------------------
   10 · TECHNOLOGIES sur bande teal
   -------------------------------------------------------------------------- */
.section--band .tech-logo {
  background: rgba(255,255,255,.9);
  border-color: rgba(4,33,31,.14);
  color: #052028;
  opacity: .9;
}
.section--band .tech-logo:hover {
  opacity: 1;
  border-color: rgba(4,33,31,.3);
  box-shadow: 0 14px 34px -14px rgba(4,33,31,.5);
}
.section--band .tech-logo::before { background: linear-gradient(135deg, #17B4CC, #0F8AA1); }

/* --------------------------------------------------------------------------
   26 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .col-span-2 { grid-column: span 2; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-container { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .price-shell--featured { order: -1; }
}

@media (max-width: 1024px) {
  .main-navigation { display: none; }
  .nav-toggle { display: grid; }
  .header-actions .btn-header { display: none; }
  .header-container {
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(10,43,53,.82);
    border-color: var(--line);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 44px -22px rgba(0,0,0,.9);
  }
  .hero-propositions-row {
  align-items: stretch; grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .cta-content { grid-template-columns: 1fr; }
  .cta-text { max-width: none; }
  .portfolio-gallery { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: repeat(2, 1fr); }
  .paths-grid { grid-template-columns: 1fr; }
  .vp-benefits { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --section-y: clamp(64px, 9vh, 104px); }

  /* Timeline sur une colonne */
  .timeline-line { left: 28px; }
  .timeline-step { grid-template-columns: 58px 1fr; gap: 20px; align-items: start; }
  .timeline-step:nth-child(odd) .step-content,
  .timeline-step:nth-child(even) .step-content { grid-column: 2; text-align: left; }
  .timeline-step:nth-child(odd) .step-content .btn { margin-left: 0; }
  .step-marker { grid-column: 1; justify-self: start; }

  .services-grid { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .footer-links-wrapper { grid-template-columns: repeat(2, 1fr); }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }

  /* Coverflow : les 3 vidéos restent visibles, les latérales débordent
     volontairement des bords de la section (point 2). */
  .hero-videos-carousel { height: clamp(280px, 66vw, 360px); }
  .hero-video-card { width: min(64vw, 280px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   1 · SECTION VIDÉO DE VENTE — fond clair, cadre glassmorphe blanc
   ══════════════════════════════════════════════════════════════════════════ */
.videoproof-section {
  background:
    radial-gradient(ellipse 78% 52% at 22% 0%, rgba(81,249,249,.20), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F3FBFD 46%, #E2F2F6 100%);
  color: var(--porcelain-muted);
  isolation: isolate;
  overflow: clip;
}
.videoproof-section::before {
  content: '';
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sec-500) 30%, var(--sec-400) 50%, var(--sec-500) 70%, transparent);
  z-index: 2;
}
.videoproof-section h2 { color: var(--porcelain-ink); }
.videoproof-section .eyebrow { color: #056070; }
.videoproof-section .eyebrow::before { background: linear-gradient(90deg, transparent, #056070); }
.videoproof-section .highlight-volt {
  background: linear-gradient(135deg, #0B5E70, #056070);
  -webkit-background-clip: text; background-clip: text;
}

/* Point 1 — la section est réorganisée en une seule colonne centrée :
   en-tête, puis la vidéo, puis les bénéfices sur deux colonnes, puis le CTA.
   L'ancienne disposition côte à côte est remplacée. */
.vp-header { margin-bottom: clamp(32px, 3.4vw, 50px); }

/* La vidéo, centrée. Largeur portée de 880 à 1080 px : elle occupe davantage
   la section sans dépasser le conteneur, et le cadre respire toujours. */
.vp-stage {
  max-width: 1080px;
  margin-inline: auto;
}

/* Les bénéfices : deux colonnes sur ordinateur, une seule sur mobile */
.vp-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 44px);
  max-width: 1040px;
  margin: clamp(38px, 4vw, 62px) auto 0;
}

/* ── Le cadre de la vidéo : bordures blanches en verre, ombre subtile ───── */
.vp-frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: clamp(9px, .9vw, 14px);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 6px rgba(5,32,40,.05),
    0 26px 60px -30px rgba(5,32,40,.30);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  isolation: isolate;
}
.vp-frame video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--r-2xl) - clamp(9px, .9vw, 14px) + 2px);
  background: var(--ink-850);
}

/* Superposition d'invitation, tant que la lecture n'a pas été engagée */
.vp-invite {
  position: absolute;
  inset: clamp(9px, .9vw, 14px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  border-radius: calc(var(--r-2xl) - clamp(9px, .9vw, 14px) + 2px);
  background: linear-gradient(180deg, rgba(3,20,26,.28) 0%, rgba(3,20,26,.62) 100%);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .45s var(--ease-out), background .45s var(--ease-out);
}
.vp-invite:hover { background: linear-gradient(180deg, rgba(3,20,26,.20) 0%, rgba(3,20,26,.54) 100%); }
.vp-play {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--sec-400);
  color: #04212A;
  box-shadow: 0 0 0 10px rgba(81,249,249,.22), 0 14px 40px -10px rgba(81,249,249,.7);
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out);
}
.vp-play svg { width: 28px; height: 28px; margin-left: 3px; }
.vp-invite:hover .vp-play {
  transform: scale(1.09);
  box-shadow: 0 0 0 14px rgba(81,249,249,.26), 0 18px 50px -10px rgba(81,249,249,.85);
}
.vp-invite-text { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.vp-invite-text strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.vp-invite-text span {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sec-300);
}

/* Commandes, visibles une fois la lecture engagée */
.vp-controls {
  position: absolute;
  left: clamp(18px, 1.6vw, 26px);
  bottom: clamp(18px, 1.6vw, 26px);
  z-index: 3;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.vp-ctrl {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(3,20,26,.62);
  color: #fff;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .3s var(--ease-spring);
}
.vp-ctrl:hover { background: var(--sec-400); color: #04212A; border-color: var(--sec-400); transform: scale(1.07); }
.vp-ctrl svg { width: 17px; height: 17px; }

/* Bascules d'icônes selon l'état */
.vp-ico-play, .vp-ico-off { display: none; }
.vp-frame[data-state="paused"] .vp-ico-play { display: block; }
.vp-frame[data-state="paused"] .vp-ico-pause { display: none; }
.vp-frame.is-muted .vp-ico-off { display: block; }
.vp-frame.is-muted .vp-ico-on { display: none; }

/* États du cadre */
.vp-frame.is-engaged .vp-invite { opacity: 0; pointer-events: none; }
.vp-frame.is-engaged .vp-controls { opacity: 1; transform: none; pointer-events: auto; }

.vp-caption {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 9px;
  margin-top: 16px;
  font-size: .875rem;
  color: var(--porcelain-muted);
}
.vp-caption svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: #056070; }

/* ── Colonne de droite : les bénéfices ─────────────────────────────────── */
.vp-title {
  font-size: var(--fs-h2);
  letter-spacing: -.04em;
  margin-block: 14px 14px;
}
.vp-lead { color: var(--porcelain-muted); font-size: var(--fs-body); max-width: 54ch; }

.vp-list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
}
.vp-list li { display: flex; align-items: flex-start; gap: 14px; }

/* Case à cocher carrée à coins arrondis, fond sombre de la charte */
.vp-check {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-850));
  border: 1px solid rgba(5,32,40,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -6px rgba(5,32,40,.4);
  color: #FFFFFF;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.vp-check svg { width: 15px; height: 15px; }
.vp-list li:hover .vp-check {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px -6px rgba(15,138,161,.6);
}
.vp-benefit { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-benefit strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--porcelain-ink);
}
.vp-benefit > span { font-size: .9063rem; color: var(--porcelain-muted); line-height: 1.55; }

.vp-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 3.6vw, 54px);
}

/* Le mini-lecteur flottant a été SUPPRIMÉ à la demande : garder une vidéo
   décodée en permanence hors de sa section coûtait un flux vidéo continu
   pour toute la durée de la visite. La vidéo vit désormais uniquement
   dans sa section, où l'IntersectionObserver la met en pause dès qu'elle
   quitte l'écran. */

/* --------------------------------------------------------------------------
   10 · BIBLIOTHÈQUE DES SITES RÉALISÉS — section à fond clair
   Trois colonnes sur trois lignes, chaque site dans sa coquille de verre.
   -------------------------------------------------------------------------- */
.library-section {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(81,249,249,.16), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4FBFD 44%, #E4F3F7 100%);
  color: var(--porcelain-muted);
  isolation: isolate;
}
.library-section::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sec-500) 30%, var(--sec-400) 50%, var(--sec-500) 70%, transparent);
  z-index: 2;
}
.library-section h2, .library-section h3 { color: var(--porcelain-ink); }
.library-section .section-desc { color: var(--porcelain-muted); }
.library-section .eyebrow { color: #056070; }
.library-section .eyebrow::before { background: linear-gradient(90deg, transparent, #056070); }
.library-section .eyebrow--center::after { background: linear-gradient(90deg, #056070, transparent); }
.library-section .highlight-volt {
  background: linear-gradient(135deg, #0B5E70, #056070);
  -webkit-background-clip: text; background-clip: text;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}

/* La coquille : verre clair, marges internes généreuses */
.library-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 1.4vw, 20px);
  border-radius: var(--r-2xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.42) 100%),
    rgba(255,255,255,.3);
  border: 1px solid var(--porcelain-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 48px -30px rgba(5,32,40,.30);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
.library-card:hover {
  transform: translateY(-5px);
  border-color: rgba(15,138,161,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 64px -30px rgba(5,32,40,.38);
}
.library-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-750), var(--ink-850));
  border: 1px solid rgba(5,32,40,.10);
}
.library-media video,
.library-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
  transition: transform 1.1s var(--ease-out);
}
.library-card:hover .library-media video,
.library-card:hover .library-media img { transform: scale(1.05); }
.library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 2px;
}
.library-domain {
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--porcelain-ink);
}
.library-tag {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #056070;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(15,138,161,.10);
  border: 1px solid rgba(15,138,161,.24);
  white-space: nowrap;
}
.library-footer { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 60px); }

/* --------------------------------------------------------------------------
   Point 2 · BOUTON DE CONVERSION STICKY — barre de menu mobile
   Il vit dans la barre sticky, entre le logo et le hamburger. Masqué sur
   ordinateur, où le CTA complet du header prend le relais.
   -------------------------------------------------------------------------- */
.btn-mobile-cta { display: none; }

@media (max-width: 1024px) {
  /* Bouton compact : 7 px de padding vertical au lieu de 15, pour une hauteur
     totale de 30 px. Il doit s'inscrire dans la barre, pas la dilater. */
  .btn-mobile-cta {
    display: inline-flex;
    --btn-py: 7px;
    --btn-px: 13px;
    font-size: .75rem;
    line-height: 1;
    gap: 6px;
    white-space: nowrap;
    border-radius: var(--r-pill);
  }
  .btn-mobile-cta > svg { width: 13px; height: 13px; }

  /* La barre est resserrée d'autant : le bouton et le hamburger tiennent
     dans une hauteur de 48 px au lieu de 64. */
  .header-container { padding: 7px 9px 7px 14px; gap: 10px; }
  .nav-toggle { width: 34px; height: 34px; }
  .nav-toggle-bars { width: 16px; }
  .site-header { padding-top: 12px; }

  /* Point 1 — le CTA collait au logo : en space-between il était plaqué au
     bord gauche de la zone d'actions. Il se regroupe désormais avec le
     hamburger, à droite de la barre. */
  .header-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-left: 10px;
    gap: 10px;
  }
}
@media (max-width: 420px) {
  .btn-mobile-cta { --btn-px: 10px; font-size: .6875rem; gap: 4px; }
  .btn-mobile-cta .btn-icon-right { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   28 · MOBILE — corrections dédiées (points 1, 1.1, 2 et 6)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Le slogan animé était masqué sous 640 px. Il réapparaît, réduit, sous le
     wordmark : le bloc de marque reste complet sur mobile. */
  .site-header .logo-slogan {
    display: inline-flex;
    font-size: .5rem;
    letter-spacing: .16em;
    min-width: 13ch;
  }
  .site-header .logo-mark { width: 26px; height: 26px; }
  .site-header .logo-word { font-size: 1.0625rem; }
  .logo-text-block { gap: 0; }
  .slogan-caret { width: 1px; }

  /* H1 : les deux lignes se touchaient à line-height .96 */
  .hero-title { line-height: 1.16; letter-spacing: -.03em; }
  .hero-title .highlight-volt { line-height: 1.16; }

  /* Point 1.1 — les deux boutons empilés restaient collés. Le gap seul ne
     suffisait pas : une marge externe explicite sous le bouton jaune porte
     l'écart total à 36 px, franchement lisible. */
  .hero-buttons { flex-direction: column; gap: 20px; margin-top: 30px; }
  .hero-buttons .btn { width: 100%; }
  .hero-buttons .btn-primary { margin-bottom: 16px; }

  /* Tarifs : les coquilles se touchaient presque */
  .pricing-grid { gap: 34px; }
  .price-shell { padding: 18px; }
  .price-card { padding: 24px 22px; }
  .price-shell--featured { padding-top: 34px; }
  .pricing-selfserve { gap: 22px; padding: 26px 22px; }
  .pricing-selfserve .ss-price {
    padding-left: 0;
    border-left: 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-strong);
    width: 100%;
  }
  .pricing-selfserve .btn { width: 100%; }

  /* Parcours : la vidéo de tête reste lisible */
  .paths-grid { gap: 44px; }
  .path-col { padding: 22px 18px; }
}

@media (max-width: 680px) {
  .stats-grid { grid-template-columns: 1fr; }
  .bento-why-grid { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }
  .why-card { grid-template-columns: minmax(0,1fr) auto; }
  .vp-benefits { grid-template-columns: 1fr; gap: 16px; }
  .vp-caption { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .vp-play { width: 54px; height: 54px; }
  .vp-play svg { width: 22px; height: 22px; }
  .form-row { grid-template-columns: 1fr; }
  .dashboard-gauges { grid-template-columns: 1fr; gap: 12px; }
  .gauge-item { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 16px 20px; }
  .gauge-ring { width: 68px; }
  .gauge-label { text-align: left; }
  .footer-links-wrapper { grid-template-columns: 1fr; }
  .hero-buttons .btn { width: 100%; }
  .recent-projects-head { flex-direction: column; align-items: flex-start; }
  .btn { --btn-px: 22px; }
  .hero-trust { flex-direction: column; align-items: stretch; }
  .hero-trust li { margin-right: 0; padding-right: 0; }
  .hero-trust li::after { right: 0; }
  .pricing-selfserve { flex-direction: column; align-items: flex-start; }
  .portfolio-item--invite { min-height: 260px; }
  .library-grid { grid-template-columns: 1fr; }
  .why-card { grid-template-columns: 1fr; }
  .why-info { width: 100%; max-width: 150px; justify-self: start; align-self: auto; }
  .testimonial-shell { width: min(84vw, 340px); }
  .services-grid { grid-template-columns: 1fr; }
}

/* Le flou coûte cher : on l'allège sur petits écrans */
@media (max-width: 860px) {
  .glass-1, .bento-card, .faq-item, .proposition-card, .testimonial-card {
  }
  .glass-2, .glass-3 {
  }

}

/* --------------------------------------------------------------------------
   27 · MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora { animation: none !important; }
  .custom-cursor { display: none !important; }
  .preloader { display: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .projects-track { animation: none !important; transform: none !important; }
  .projects-viewport { overflow-x: auto !important; }
  .testimonials-track { animation: none !important; transform: none !important; flex-wrap: wrap; width: 100%; justify-content: center; }
  .testimonials-marquee { overflow-x: auto !important; -webkit-mask-image: none !important; mask-image: none !important; }
  /* Slogan : affiché en entier, sans frappe ni curseur clignotant */
  .slogan-char { opacity: 1 !important; transform: none !important; }
  .slogan-caret, .wordmark-caret { animation: none !important; opacity: 1; }
  .info-svg *, .info-svg { animation: none !important; }
  .info-seo .q-bar { transform: scaleY(1) !important; }
  .info-seo .q-trend { stroke-dashoffset: 0 !important; }
  .info-seo .q-dot, .info-seo .q-rank { opacity: 1 !important; }
  .info-speed .s-arc-fill { stroke-dashoffset: 16 !important; }
  .info-speed .s-needle { transform: rotate(50deg) !important; }
  .info-resp .r-line { transform: scaleX(1) !important; opacity: 1 !important; }
  .info-design .d-sw { opacity: 1 !important; transform: none !important; }
  .info-conv .c-drop { opacity: 0 !important; }
  .info-conv .c-ring, .info-conv .c-core { transform: scale(1) !important; opacity: 1 !important; }
  .highlight-volt::after { transform: scaleX(1); }
  .icon-anim [data-draw],
  .icon-anim:not(.is-drawn) [data-draw] { stroke-dashoffset: 0 !important; }
  .stat-arc .arc-fill { transition: none; }
  [data-reveal], .split-word, .hero-title, .hero-subtitle,
  .hero-propositions-row, .hero-videos-carousel, .hero-client-logos, .hero-buttons {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Impression */
@media print {
  .atmosphere, .grain, .custom-cursor, .preloader, .site-header,
  .cookie-banner, .footer-wordmark, .hero-videos-carousel { display: none !important; }
  body { background: #fff; color: #000; }
  * { box-shadow: none !important; backdrop-filter: none !important; }
}