/* =============================================================================
   tokens.css · Source unique des décisions visuelles.
   Aucune règle de mise en page ici : uniquement des variables.
   Toute évolution de charte (couleur, échelle typographique, rythme) se fait
   dans ce fichier et se propage à l'ensemble du site.
   ========================================================================== */

:root {
  /* --- Couleurs de marque -------------------------------------------------
     Issues du logo Mellion : bleu nuit, bleu, cyan, blanc. Rien d'autre. */
  --navy-900: #030817;   /* fond général */
  --navy-850: #050c1c;
  --navy-800: #071226;
  --navy-700: #081a31;   /* surface posée sur le fond */
  --navy-600: #0b2340;   /* surface surélevée (cartes premium) */
  --blue: #1768ff;
  --blue-soft: #72a7ff;
  --cyan: #20d5df;

  /* --- Extensions de palette ----------------------------------------------
     Quatre teintes ajoutées pour la lisibilité et la mise en avant des chiffres.
     Elles restent dans la famille du logo (bleu → cyan), sauf --gain, réservé
     aux bénéfices quantifiés : le vert d'eau signale un gain sans ambiguïté,
     là où le cyan sert déjà d'accent générique.
     Toutes ont été vérifiées au contraste (≥ 4,5:1 sur leur fond d'usage).
     Pour revenir à la charte d'origine, il suffit de remplacer ici
     --cyan-bright et --gain par --cyan, --indigo et --blue-ink par --blue. */
  --cyan-bright: #5ef2fa;  /* chiffres clés, survol, emphase sur fond sombre */
  --indigo: #4a63ff;       /* second bleu : dégradés, halos, profondeur */
  --gain: #4fd6a8;

  /* Chiffre fantome des cartes numerotees (.rail__num). */
  --num-ghost: rgba(150, 195, 255, 0.42);         /* uniquement les gains chiffrés */
  --gain-deep: #0d7a5a;    /* le même gain, lisible sur fond clair */
  --blue-ink: #1156d6;     /* bleu assez foncé pour les chiffres sur fond clair */

  /* --- Texte sur fond sombre --------------------------------------------- */
  --ink: #f5f8ff;        /* titres */
  --ink-strong: #dfe7f4; /* texte fort */
  --ink-muted: #b8c5d7;  /* texte courant (contraste AA sur navy-900) */
  --ink-subtle: #93a2b7; /* texte secondaire */
  --ink-faint: #6d7c93;  /* micro-libellés */

  /* --- Texte sur fond clair (bandeaux « papier ») ------------------------- */
  --paper-ink: #07162b;
  --paper-ink-muted: #385570;
  --paper-ink-subtle: #49637d;
  --paper-accent: #076b98;

  /* --- Filets et surfaces ------------------------------------------------- */
  --line: rgba(160, 185, 225, 0.16);
  --line-strong: rgba(139, 178, 235, 0.26);
  --line-paper: rgba(7, 36, 70, 0.18);
  --glass: rgba(5, 14, 32, 0.66);
  --surface: rgba(7, 19, 40, 0.78);

  /* Couleur d'accent contextuelle : cyan sur fond sombre, bleu profond sur les
     bandeaux clairs (voir .section--paper dans components.css). Les composants
     utilisent var(--accent) : ils s'adaptent donc sans règle supplémentaire. */
  --accent: var(--cyan);

  /* Couleur des gains chiffrés, elle aussi contextuelle. */
  --accent-gain: var(--gain);

  /* --- Dégradés récurrents ------------------------------------------------ */
  --gradient-brand: linear-gradient(90deg, var(--blue), var(--cyan));
  --gradient-deep: linear-gradient(120deg, var(--indigo), var(--cyan));
  --gradient-title: linear-gradient(94deg, #f7f9ff 5%, #77a8ff 51%, #27dbe0 94%);
  --gradient-paper: linear-gradient(150deg, #fbfdff 0%, #edf6ff 58%, #deefff 100%);

  /* --- Typographie --------------------------------------------------------
     Geist (variable 100-900) est auto-hébergée : voir base.css.
     Les piles de repli couvrent le cas où la police n'est pas encore chargée. */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
    "Cascadia Mono", Consolas, monospace;

  /* Serif à fort contraste réservée aux grands titres et aux chiffres clés.
     Une seule graisse : voir la note sur font-synthesis dans base.css. */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia,
    "Times New Roman", serif;

  /* Échelle fluide : min lisible sur 360 px, max maîtrisé sur 1920 px. */
  --fs-display: clamp(2.9rem, 5.4vw, 5.25rem);  /*  46 → 84 px  (h1 accueil) */
  --fs-h1: clamp(3rem, 6.4vw, 5.75rem);         /*  48 → 92 px  (h1 pages)   */
  --fs-h2: clamp(2.35rem, 4.6vw, 4.25rem);      /*  38 → 68 px               */
  --fs-h2-sm: clamp(2rem, 3.4vw, 2.9rem);       /*  32 → 46 px               */
  --fs-h3: clamp(1.3rem, 1.7vw, 1.55rem);       /*  21 → 25 px               */
  --fs-lead: clamp(1.05rem, 1.3vw, 1.32rem);    /*  17 → 21 px               */
  --fs-body: 1rem;                              /*  16 px                    */
  --fs-small: 0.9375rem;                        /*  15 px                    */
  --fs-tiny: 0.8125rem;                         /*  13 px                    */
  --fs-mono: 0.625rem;                          /*  10 px (libellés mono)    */

  --lh-display: 0.98;
  --lh-title: 1.06;
  --lh-body: 1.72;
  --tracking-display: -0.015em;  /* chasse du serif, plus ouverte */
  --tracking-mono: 0.14em;

  /* --- Rythme vertical et gouttières -------------------------------------- */
  --shell-max: 1320px;
  --shell-gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 130px);
  --section-y-sm: clamp(56px, 6vw, 90px);
  --block-gap: clamp(28px, 4vw, 56px);

  /* --- Formes ------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-card: 0 28px 70px rgba(2, 11, 28, 0.32);
  --shadow-float: 0 42px 90px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 16px 50px rgba(32, 213, 223, 0.14);

  /* --- Mouvement ----------------------------------------------------------
     Trois durées seulement, pour que le site garde un tempo homogène. */
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 800ms;

  /* --- Empilement ---------------------------------------------------------- */
  --z-ambient: 0;
  --z-content: 2;
  --z-header: 50;
  --z-skip: 100;
  --z-consent: 1200;
  --z-intro: 1400;
}

/* =============================================================================
   base.css · Polices, remise à zéro et typographie par défaut.
   Chargé sur toutes les pages, juste après tokens.css.
   ========================================================================== */

/* --- Polices auto-hébergées -------------------------------------------------
   Geist et Geist Mono, licence SIL Open Font License 1.1 (Vercel).
   Deux fichiers variables par famille : « latin » couvre le français courant,
   « latin-ext » prend le relais pour les caractères rares. Le navigateur ne
   télécharge « latin-ext » que si la page en a besoin (unicode-range).
   font-display: swap → le texte reste lisible pendant le chargement. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Remise à zéro ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Les ancres ne passent plus sous l'en-tête collant. */
  scroll-padding-top: 116px;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-optical-sizing: auto;
  line-height: var(--lh-body);
  /* Le rendu fin des glyphes clairs sur fond sombre évite l'effet « gras ». */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* --- Typographie ------------------------------------------------------------
   Les titres sont serrés (letter-spacing négatif) et équilibrés sur plusieurs
   lignes ; les paragraphes évitent les lignes veuves. */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 560;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-title);
  text-wrap: balance;
}

/* Les grands titres et les chiffres clés passent en serif à fort contraste.
   Instrument Serif n'existe qu'en une seule graisse : font-synthesis-weight
   empêche le navigateur d'en fabriquer un faux gras, quelle que soit la graisse
   demandée par une feuille de page. */
h1,
h2,
.stat__figure,
.offer-card__num,
.pillar h3,
.board__stats strong,
.timeline__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-synthesis: none;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--fs-h2);
}

/* Le serif porte mieux des tailles plus généreuses que le sans. */
h1,
h2 { line-height: 1.02; }

h3 {
  font-size: var(--fs-h3);
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Un titre ne colle jamais au texte qui le suit. */
:is(h1, h2, h3) + p {
  margin-top: 20px;
}

strong {
  font-weight: 580;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  color: var(--navy-900);
  background: var(--cyan);
}

/* --- Accessibilité ---------------------------------------------------------- */

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

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--navy-900);
  border-radius: var(--radius-sm);
  background: var(--cyan);
  font-size: var(--fs-tiny);
  font-weight: 580;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Masqué à l'écran, restitué par les lecteurs d'écran. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Mouvement réduit --------------------------------------------------------
   Préférence système respectée sur tout le site : plus d'animation décorative,
   les vidéos laissent la place à leur image d'affiche (voir components.css). */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   layout.css · Ossature commune à toutes les pages :
   fond ambiant, conteneur, en-tête, pied de page, en-tête de page intérieure.
   ========================================================================== */

/* --- Racine et fond ---------------------------------------------------------- */

.site-root {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  /* Trois foyers de couleur superposés : la page respire au lieu d'être
     uniformément sombre. */
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(74, 99, 255, 0.13), transparent 70%),
    radial-gradient(ellipse 60% 45% at 88% 22%, rgba(32, 213, 223, 0.08), transparent 70%),
    radial-gradient(circle at 12% 62%, rgba(14, 83, 198, 0.08), transparent 34rem),
    var(--navy-900);
}

/* Le contenu passe devant le décor ambiant. L'en-tête est volontairement exclu :
   il gère lui-même son empilement (position: sticky + --z-header) et une règle
   plus spécifique ici écraserait son z-index. */
.site-root > main,
.site-root > footer {
  position: relative;
  z-index: var(--z-content);
}

/* Trame technique discrète, posée derrière tout le contenu. */
.site-root::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.27;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

/* --- Lion ambiant -----------------------------------------------------------
   Filigrane de marque piloté par le défilement (assets/js/modules/ambient.js).
   La variable --ambient-progress va de 0 (haut de page) à 1 (bas de page). */

.ambient {
  --ambient-progress: 0;
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient__lion {
  position: absolute;
  width: min(44vw, 680px);
  top: calc(8vh + var(--ambient-progress) * 34vh);
  right: calc(-14vw + var(--ambient-progress) * 6vw);
  opacity: 0.035;
  filter: blur(5px) saturate(1.2) drop-shadow(0 0 90px rgba(23, 104, 255, 0.42));
  transform: rotate(calc(-8deg + var(--ambient-progress) * 20deg))
    scale(calc(1 + var(--ambient-progress) * 0.18));
}

.ambient__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(100px);
  mix-blend-mode: screen;
  opacity: 0.13;
  will-change: transform;
}

.ambient__orb--blue {
  width: 42vw;
  height: 42vw;
  top: 5%;
  right: -18%;
  background: var(--blue);
  transform: translate3d(calc(var(--ambient-progress) * -9vw), calc(var(--ambient-progress) * 28vh), 0);
  animation: ambient-drift-a 14s ease-in-out infinite alternate;
}

.ambient__orb--cyan {
  width: 31vw;
  height: 31vw;
  top: 46%;
  left: -16%;
  background: var(--cyan);
  transform: translate3d(calc(var(--ambient-progress) * 11vw), calc(var(--ambient-progress) * -18vh), 0);
  animation: ambient-drift-b 18s ease-in-out infinite alternate;
}

.ambient__orb--indigo {
  width: 38vw;
  height: 38vw;
  top: 68%;
  right: -6%;
  background: var(--indigo);
  opacity: 0.1;
  transform: translate3d(calc(var(--ambient-progress) * -6vw), calc(var(--ambient-progress) * -22vh), 0);
  animation: ambient-drift-a 21s ease-in-out infinite alternate;
}

/* La dérive utilise « translate », propriété indépendante qui se compose avec
   le « transform » du défilement. Animer des marges, comme c'était le cas,
   obligeait le navigateur à refaire la mise en page à chaque image. */
@keyframes ambient-drift-a { to { translate: -7vw 9vh; } }
@keyframes ambient-drift-b { to { translate: 8vw -7vh; } }

@media (prefers-reduced-motion: reduce) {
  .ambient { display: none; }
}

/* --- Conteneur ---------------------------------------------------------------
   Une seule largeur de référence : en-tête, contenu et pied de page sont
   alignés sur la même colonne. */

.shell {
  width: min(var(--shell-max), 100% - var(--shell-gutter) * 2);
  margin-inline: auto;
}

/* --- En-tête ------------------------------------------------------------------ */

/* Barre de navigation flottante : une pilule posée sur la page, plutôt qu'un
   bandeau collé au bord. Le voile en dégradé évite que le texte de la page
   apparaisse crûment dans les quelques pixels au-dessus. */
.site-header {
  position: sticky;
  z-index: var(--z-header);
  top: 14px;
  margin-top: 14px;
}

.site-header::before {
  position: absolute;
  z-index: -1;
  inset: -22px 0 auto;
  height: 104px;
  content: "";
  pointer-events: none;
  background: linear-gradient(var(--navy-900) 35%, transparent);
}

.site-header__inner {
  height: 74px;
  padding: 0 14px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(6, 14, 32, 0.74);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.brand {
  --logo-w: 168px;
  width: var(--logo-w);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: var(--fs-small);
  font-weight: 530;
}

.nav a {
  position: relative;
  padding: 12px 0;
  color: var(--ink-strong);
  transition: color var(--dur-fast) var(--ease);
}

.nav a:hover { color: var(--ink); }

/* Trait dégradé animé sous l'onglet survolé ou actif. */
.nav a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] { color: var(--ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 0 18px 0 22px;
  color: var(--ink-strong);
  border: 1px solid rgba(112, 165, 255, 0.35);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: 560;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.header-cta:hover {
  border-color: var(--cyan);
  background: rgba(32, 213, 223, 0.08);
}

.header-cta span { color: var(--cyan); }

/* --- Menu mobile ------------------------------------------------------------
   Construit avec <details> : il fonctionne même si le JavaScript est bloqué.
   nav.js n’ajoute que le confort (fermeture par Échap ou clic extérieur). */

.nav-drawer { display: none; position: relative; }

.nav-drawer > summary {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.nav-drawer > summary::-webkit-details-marker { display: none; }

.nav-drawer > summary span {
  width: 18px;
  height: 1.5px;
  display: block;
  background: var(--ink-strong);
  border-radius: 2px;
  transform-origin: center;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-mid) var(--ease);
}

.nav-drawer[open] > summary span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-drawer[open] > summary span:nth-child(2) { opacity: 0; }
.nav-drawer[open] > summary span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-drawer__panel {
  position: absolute;
  top: 62px;
  right: 0;
  width: min(330px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  padding: 10px;
  overflow-y: auto;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(4, 11, 27, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.nav-drawer__brand {
  min-height: auto;
  margin-bottom: 4px;
  padding: 2px 0 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
}

.nav-drawer__brand > img {
  width: min(224px, 72vw);
  height: auto;
  display: block;
}

.nav-drawer__panel > a:not(.nav-drawer__brand) {
  min-height: 56px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}

.nav-drawer__panel > a:not(.nav-drawer__brand):last-child { border-bottom: 0; }
.nav-drawer__panel > a:not(.nav-drawer__brand):hover { color: var(--cyan); }
.nav-drawer__panel > a:not(.nav-drawer__brand) > span { color: var(--cyan); font: var(--fs-mono) var(--font-mono); }

/* --- En-tête de page intérieure ---------------------------------------------- */

.page-hero {
  position: relative;
  padding: clamp(90px, 12vw, 150px) 0 clamp(64px, 8vw, 110px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
}

.page-hero__lion {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 45px;
  width: min(43vw, 560px);
  opacity: 0.075;
  filter: drop-shadow(0 0 55px rgba(32, 124, 255, 0.5));
}

.page-hero > *:not(.page-hero__lion) { position: relative; z-index: 2; }

.page-hero h1 { max-width: 16ch; }

.page-hero h1 span,
.gradient-text {
  color: transparent;
  background: linear-gradient(90deg, #e5efff, var(--blue-soft) 55%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}

.page-hero__lead {
  max-width: 62ch;
  margin: 36px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.66;
}

.page-hero__index {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-hero__index a {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font: 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.page-hero__index a:hover {
  color: var(--cyan);
  border-color: rgba(32, 213, 223, 0.35);
}

/* --- Pied de page --------------------------------------------------------------- */

.site-footer {
  padding: var(--section-y-sm) 0 28px;
  border-top: 1px solid var(--line);
  background: #020612;
}

.footer-grid {
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 64px;
}

.footer-brand a {
  --logo-w: 180px;
  width: var(--logo-w);
  display: flex;
  flex-direction: column;
}

.footer-brand a > img { width: 100%; height: auto; display: block; }

.footer-brand p {
  max-width: 40ch;
  margin: 22px 0 0;
  color: var(--ink-subtle);
  font-size: 14px;
  line-height: 1.7;
}

.footer-column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 13px;
}

.footer-column a,
.footer-column p:not(.footer-column__label) {
  color: var(--ink-subtle);
  font-size: 14px;
}

.footer-column a:hover { color: var(--cyan); }

/* Lien social du pied de page : l'icône s'aligne sur la ligne de base du texte
   et prend sa couleur, y compris au survol. */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-social__icon {
  flex-shrink: 0;
  display: block;
}

.footer-column__label {
  margin-bottom: 8px;
  color: var(--ink-faint);
  font: var(--fs-mono) var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  font: var(--fs-mono) var(--font-mono);
  line-height: 1.6;
  text-transform: uppercase;
}

.footer-bottom__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-bottom__legal a { padding: 5px 0; }
.footer-bottom__legal a:hover { color: var(--cyan); }

/* --- Adaptations ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-drawer { display: block; }
  .header-actions { margin-left: auto; }
  .footer-grid { gap: 40px; }
}

@media (max-width: 820px) {
  .site-header__inner { height: 66px; padding: 0 10px 0 18px; }
  .brand { --logo-w: 148px; }
  .header-cta { display: none; }
  .page-hero__lion { right: -26%; width: 80vw; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-column:last-child { display: none; }
}

@media (max-width: 560px) {
  .page-hero__index { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

/* =============================================================================
   components.css · Briques réutilisables, indépendantes des pages.
   Toute page peut les employer ; aucune ne dépend d'une page en particulier.

   Sommaire
     1. Sections et inversion « papier »
     2. Titres de section
     3. Boutons et liens
     4. Rails (grilles à filets) et cartes
     5. Cas type (bloc dl)
     6. Bandeau d'appel à l'action
     7. Cadres vidéo
     8. FAQ
     9. Écran d'introduction
    10. Bandeau de consentement
    11. Apparition au défilement
    12. Animations partagées
    13. Interactions : survol, projecteur, chiffres, progression
   ========================================================================== */

/* --- 1. Sections et inversion « papier » ------------------------------------
   .section : rythme vertical standard.
   .section--paper : bandeau clair. Il redéfinit les jetons sémantiques, si
   bien que tous les composants imbriqués basculent automatiquement en version
   claire · sans surcharge dédiée. */

.section {
  padding: var(--section-y) 0;
}

.section--tight { padding: var(--section-y-sm) 0; }

.section--paper {
  --ink: var(--paper-ink);
  --ink-strong: #16324d;
  --ink-muted: var(--paper-ink-muted);
  --ink-subtle: var(--paper-ink-subtle);
  --ink-faint: #5a738d;
  --line: var(--line-paper);
  --line-strong: rgba(7, 36, 70, 0.26);
  --accent: var(--paper-accent);
  --num-ghost: rgba(7, 74, 122, 0.32);
  --accent-gain: var(--gain-deep);
  --surface: rgba(255, 255, 255, 0.72);
  color: var(--paper-ink);
  background: var(--gradient-paper);
}

.section--paper h1,
.section--paper h2,
.section--paper h3 {
  color: var(--paper-ink);
  font-weight: 610;
}

/* --- 2. Titres de section ---------------------------------------------------- */

/* Sur-titre en pastille : un point lumineux, un libellé court, un contour
   discret. Il annonce chaque section sans concurrencer le titre. */
.kicker {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.kicker::before {
  display: none;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  content: "";
}

/* Titre à gauche, phrase d'appui à droite. */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}

.section-heading h2 span { color: var(--blue-soft); }

.section-heading > p {
  max-width: 52ch;
  margin: 0 0 5px;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.72;
}

.section-heading--stack {
  grid-template-columns: 1fr;
  align-items: start;
}

.section-lead {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.72;
}

@media (max-width: 900px) {
  .section-heading { grid-template-columns: 1fr; align-items: start; gap: 26px; }
}

/* --- 3. Boutons et liens -------------------------------------------------------- */

.btn {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 590;
  text-align: center;
  /* Un bouton ne se coupe jamais en deux lignes dans une grille serrée. */
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  color: #03101d;
  background: linear-gradient(110deg, #eef5ff, #72dfe5);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover { box-shadow: 0 18px 60px rgba(32, 213, 223, 0.24); }

.btn--ghost {
  color: var(--ink-strong);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
}

.btn--ghost:hover { border-color: rgba(112, 165, 255, 0.45); }

.section--paper .btn--ghost {
  color: var(--paper-ink);
  border-color: var(--line-paper);
  background: rgba(255, 255, 255, 0.5);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Le rembourrage porte la zone cliquable au-delà de 24 px de haut
     (critère « taille de cible » du RGAA / WCAG 2.2). */
  padding: 6px 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}

.text-link:hover { gap: 14px; }

.status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  animation: pulse 2.2s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* --- 4. Rails et cartes ------------------------------------------------------------
   Le « rail » est la grille à filets utilisée sur presque toutes les pages :
   un numéro en haut, un titre et un texte calés en bas de chaque colonne.
   --rail-cols pilote le nombre de colonnes ; le repli mobile est automatique. */

.rail {
  --rail-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--rail-cols), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rail--3 { --rail-cols: 3; }

.rail > * {
  min-height: 246px;
  padding: clamp(26px, 2.3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--line);
}

.rail > *:first-child { border-left: 0; }

/* Le contenu part du haut : les repères d'une même ligne restent alignés,
   quel que soit le nombre de lignes des titres voisins. */

/* Le numéro est un vrai repère de lecture : chiffre en romain display, filet
   dégradé dessous. La classe sert aussi dans les cartes .card, hors rail. */
.rail__num {
  display: block;
  color: var(--num-ghost);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.4vw, 3.15rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 0.86;
  margin-bottom: 4px;
}

.rail__num::after {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
  content: "";
}

.rail h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.9vw, 1.78rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
}

.rail p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* Les liens se calent en pied de colonne : ils forment une ligne de lecture. */
.rail a.text-link { margin-top: auto; padding-top: 22px; }

@media (max-width: 1080px) {
  .rail { --rail-cols: 2; }
  .rail > *:nth-child(2n + 1) { border-left: 0; }
  .rail > *:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .rail--3 { --rail-cols: 1; }
  .rail--3 > * { border-left: 0; }
  .rail--3 > * + * { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .rail { --rail-cols: 1; }
  .rail > * { min-height: 0; border-left: 0; }
  .rail > * + * { border-top: 1px solid var(--line); }
  .rail > * > :first-child { margin-bottom: 44px; }
}

/* Carte simple posée sur le fond. */
.card {
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 18, 38, 0.6);
}

/* Même cadrage que les colonnes de rail : contenu calé en haut, titre en
   romain display. Les trois cartes d'une ligne restent alignées. */
.card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.9vw, 1.78rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
}
.card p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.72; }

/* Panneau premium : dégradé radial + filet bleuté. */
.panel {
  position: relative;
  padding: clamp(32px, 4.5vw, 70px);
  overflow: hidden;
  border: 1px solid rgba(83, 150, 245, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16% 50%, rgba(23, 104, 255, 0.17), transparent 24rem),
    var(--navy-800);
}

.list-arrow { display: grid; }

.list-arrow li {
  position: relative;
  padding: 15px 0 15px 24px;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.list-arrow li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "\2197";
}

/* --- 5. Cas type ---------------------------------------------------------------- */

.case {
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 32px clamp(32px, 5vw, 72px);
  border: 1px solid rgba(98, 159, 246, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(32, 213, 223, 0.1), transparent 22rem),
    linear-gradient(135deg, #08172e, #071123);
}

.section--paper .case {
  border-color: var(--line-paper);
  background: rgba(255, 255, 255, 0.7);
}

.case__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Le titre du cas vit dans une colonne étroite : il reste lisible plutôt que
   spectaculaire, sinon un mot court occupe une ligne entière. */
.case h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.case dl > div {
  padding: 0 0 22px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.case dl > div + div { padding-top: 22px; }

.case dt {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case dd { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.68; }

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

@media (max-width: 560px) {
  .case dl > div { grid-template-columns: 1fr; gap: 8px; }
}

/* --- 6. Bandeau d'appel à l'action ------------------------------------------------ */

.cta-band {
  position: relative;
  margin: var(--section-y-sm) 0 var(--section-y);
  padding: clamp(34px, 4.5vw, 58px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(75, 150, 246, 0.24);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(13, 37, 78, 0.92), rgba(4, 13, 31, 0.93));
}

.cta-band__lion {
  position: absolute;
  right: 22%;
  bottom: -75%;
  width: 420px;
  opacity: 0.08;
}

.cta-band > div,
.cta-band > a { position: relative; z-index: 2; }

.cta-band h2 { margin: 0; font-size: var(--fs-h2); }

.cta-band p {
  max-width: 58ch;
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.72;
}

@media (max-width: 820px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn { justify-self: start; }
}

/* --- 7. Cadres vidéo --------------------------------------------------------------
   Les vidéos sont décoratives : muettes, sans son ni contrôle, remplacées par
   leur image d'affiche si l'utilisateur demande moins d'animations. */

.frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(111, 170, 255, 0.24);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  box-shadow: var(--shadow-float);
}

.frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.frame__grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(93, 148, 235, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 148, 235, 0.18) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, black 25%, transparent 78%);
}

.frame__label {
  position: absolute;
  z-index: 4;
  color: rgba(198, 218, 248, 0.68);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
}

.frame__label--top { top: 24px; left: 26px; }
.frame__label--bottom { right: 26px; bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  .frame video { display: none; }
  .frame {
    background: var(--navy-900) url("/assets/img/lion-poster.jpg") center / cover no-repeat;
  }
}

/* --- 8. FAQ ---------------------------------------------------------------------- */

.faq-list { border-top: 1px solid var(--line); }

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

.faq-item > summary {
  min-height: 96px;
  padding: 18px 0;
  display: grid;
  grid-template-columns: 54px 1fr 34px;
  align-items: center;
  gap: 18px;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item__num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.faq-item__q {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 540;
  line-height: 1.35;
}

.faq-item__sign {
  color: var(--accent);
  font-size: 25px;
  font-style: normal;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease);
}

.faq-item[open] .faq-item__sign { transform: rotate(45deg); }

.faq-item > p {
  max-width: 76ch;
  margin: -4px 34px 32px 72px;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.78;
}

@media (max-width: 560px) {
  .faq-item > summary { grid-template-columns: 34px 1fr 26px; gap: 12px; }
  .faq-item > p { margin: 0 0 28px 46px; }
}

/* --- 9. Écran d'introduction --------------------------------------------------------
   Affiché une seule fois par session, uniquement si le navigateur n'a pas
   demandé de réduire les animations. Créé par assets/js/modules/intro.js. */

.intro {
  position: fixed;
  z-index: var(--z-intro);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(23, 104, 255, 0.2), transparent 28rem),
    #061328;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}

.intro.is-closing { visibility: hidden; opacity: 0; }

.intro__grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(114, 167, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 167, 255, 0.07) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle, black, transparent 72%);
}

.intro__brand {
  --logo-w: min(420px, 70vw);
  position: relative;
  width: var(--logo-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: intro-wipe 1.25s cubic-bezier(0.65, 0, 0.2, 1) both;
}

.intro__brand > img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(32, 213, 223, 0.18));
}

.intro__scan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 82vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 28px rgba(32, 213, 223, 0.7);
  transform: translate(-50%, 42px) scaleX(0);
  animation: intro-scan 1.35s 180ms ease both;
}

/* --- 10. Bandeau de consentement ----------------------------------------------------
   Reste invisible tant qu'aucun identifiant de mesure n'est déclaré dans
   assets/js/config.js. Voir docs/ANALYTICS.md. */

.consent {
  position: fixed;
  z-index: var(--z-consent);
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: 920px;
  margin: auto;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(105, 165, 246, 0.34);
  border-radius: var(--radius-md);
  background: rgba(5, 17, 37, 0.97);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(22px);
}

.consent strong { font-size: 17px; }
.consent p { margin: 8px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.consent a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.consent__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }

.consent__actions button,
.consent-settings {
  color: var(--ink);
  border: 1px solid rgba(114, 167, 255, 0.32);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 13px;
}

.consent__actions button { min-width: 112px; min-height: 46px; }
.consent__actions button:hover { border-color: var(--cyan); background: rgba(32, 213, 223, 0.09); }

.consent-settings {
  position: fixed;
  z-index: 100;
  bottom: 14px;
  left: 14px;
  padding: 8px 10px;
  color: var(--ink-subtle);
  font-size: 11px;
}

@media (max-width: 620px) {
  .consent { grid-template-columns: 1fr; }
  .consent__actions button { width: 100%; }
}

/* --- 11. Apparition au défilement ----------------------------------------------------
   Progressive enhancement : sans JavaScript, le contenu est simplement visible.
   reveal.js ajoute .is-revealed dès que l'élément entre dans l'écran. */

.js .reveal.is-reveal-pending {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js .reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal.is-reveal-pending { opacity: 1; transform: none; }
}

/* Repères territoriaux ouverts, sans nouvelle carte décorative. */
.regional-note {
  margin-top: 32px;
  margin-bottom: clamp(48px, 7vw, 88px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.regional-note h2 { max-width: 32ch; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.regional-note p { max-width: 78ch; margin-top: 16px; color: var(--ink-muted); line-height: 1.8; }
.regional-note a:not(.btn) { color: #72cfe3; text-decoration: underline; text-underline-offset: 4px; }
.regional-note .text-link { margin-top: 14px; }

/* --- 12. Animations partagées ---------------------------------------------------- */

@keyframes pulse { 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes breathe { 50% { opacity: 0.62; transform: scale(1.12); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-reverse { to { transform: rotate(-360deg); } }

@keyframes scan {
  0%, 18% { left: -40%; opacity: 0; }
  35%, 60% { opacity: 0.9; }
  82%, 100% { left: 100%; opacity: 0; }
}

@keyframes hud-wave { to { transform: scaleY(0.45); opacity: 0.5; } }

@keyframes convergence {
  0% { opacity: 0; transform: scaleX(0.05); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes intro-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes intro-scan {
  0% { opacity: 0; transform: translate(-50%, 42px) scaleX(0); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 42px) scaleX(1); }
}

@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =============================================================================
   13. Interactions · survol, projecteur, chiffres, progression
   Tout ce qui suit est décoratif : le site reste complet sans JavaScript et
   sans pointeur, et tout est neutralisé si l'utilisateur demande moins
   d'animations.
   ========================================================================== */

/* --- 13.1 Soulèvement au survol ---------------------------------------------
   Les blocs autonomes (cartes, notes, rôles, étapes du fil) se soulèvent
   légèrement. Réservé aux appareils dotés d'un vrai survol : sur mobile, un
   « hover » resterait collé après le tap. */

.card,
.role,
.note,
.pillar,
.offer-card,
.engagement__grid .card {
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    border-color 260ms var(--ease),
    background 260ms var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover,
  .role:hover,
  .note:hover {
    transform: translateY(-6px);
    border-color: rgba(32, 213, 223, 0.4);
    box-shadow: 0 26px 60px rgba(2, 11, 28, 0.42);
  }

  .section--paper .note:hover {
    border-color: rgba(7, 116, 154, 0.42);
    box-shadow: 0 26px 60px rgba(23, 74, 122, 0.16);
  }
}

/* Les cellules de rail sont séparées par des filets : les soulever casserait
   la grille. Elles réagissent autrement · trait dégradé, fond, numéro vif. */
.rail > * {
  position: relative;
  transition: background 240ms var(--ease);
}

.rail > *::after {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 2px;
  content: "";
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
}

.rail__num { transition: color 260ms var(--ease); }

.rail__num::after {
  transition: width 420ms var(--ease), opacity 260ms var(--ease);
}

@media (hover: hover) {
  .rail > *:hover { background: rgba(114, 167, 255, 0.05); }
  .rail > *:hover::after { transform: scaleX(1); }
  .rail > *:hover .rail__num,
  .card:hover .rail__num { color: var(--cyan-bright); }
  .rail > *:hover .rail__num::after,
  .card:hover .rail__num::after { width: 66px; opacity: 1; }
  .section--paper .rail > *:hover { background: rgba(7, 116, 154, 0.05); }
  .section--paper .rail > *:hover .rail__num,
  .section--paper .card:hover .rail__num { color: var(--blue-ink); }
}

/* --- 13.2 Projecteur ---------------------------------------------------------
   Un halo suit le curseur sur les blocs marqués .spot. Les coordonnées sont
   posées par assets/js/modules/spotlight.js via le CSSOM (--mx / --my), donc
   sans style en ligne dans le HTML. Sans JavaScript, le halo reste centré et
   n'apparaît qu'au survol. */

.spot { position: relative; }

.spot::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(32, 213, 223, 0.12),
    transparent 68%
  );
  transition: opacity 320ms var(--ease);
}

/* Le contenu repasse devant le halo. */
.spot > * { position: relative; z-index: 1; }

@media (hover: hover) {
  .spot:hover::before { opacity: 1; }
}

.section--paper .spot::before {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(7, 116, 154, 0.12),
    transparent 68%
  );
}

/* --- 13.3 Chiffres clés -------------------------------------------------------
   Bandeau de statistiques. Les valeurs numériques portent data-count et sont
   comptées à l'entrée dans l'écran (assets/js/modules/counters.js) ; le texte
   du HTML reste la valeur finale, donc lisible sans JavaScript. */

.stats {
  --stats-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats > * {
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--line);
}

.stats > *:first-child { border-left: 0; }

/* Un repère qui n'est pas un chiffre ferme la rangée sur toute la largeur :
   il ne laisse pas trois cellules vides derrière lui. */
.stats > .stat--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
  align-items: start;
  gap: clamp(14px, 3vw, 48px);
  border-top: 1px solid var(--line);
  border-left: 0;
}

.stats > .stat--wide .stat__note { max-width: 78ch; }

.stat__figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--cyan-bright);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 620;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__figure small {
  color: var(--blue-soft);
  font-size: 0.42em;
  font-weight: 560;
  letter-spacing: -0.02em;
}

/* Sur fond clair, le bleu du logo tombe à 4,3:1 : on descend d'un cran pour
   rester au-dessus du seuil AA, y compris si la taille du chiffre est réduite. */
.section--paper .stat__figure { color: var(--blue-ink); }
.section--paper .stat__figure small { color: var(--paper-accent); }

.stat__label {
  color: var(--ink-strong);
  font-size: var(--fs-small);
  font-weight: 560;
  line-height: 1.4;
}

.stat__note {
  color: var(--ink-subtle);
  font-size: var(--fs-tiny);
  line-height: 1.55;
}

/* Mention de prudence sous un bandeau de chiffres. */
.stats-caveat {
  margin-top: 20px;
  color: var(--ink-faint);
  font-size: var(--fs-tiny);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .stats { --stats-cols: 2; }
  .stats > *:nth-child(2n + 1) { border-left: 0; }
  .stats > *:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .stats > .stat--wide { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stats { --stats-cols: 1; }
  .stats > * { border-left: 0; }
  .stats > * + * { border-top: 1px solid var(--line); }
}

/* --- 13.4 Gain chiffré ---------------------------------------------------------
   Pastille utilisée dans les cas types : un ordre de grandeur, jamais un
   engagement. Le libellé « Gain visé » doit rester présent. */

.gain {
  width: fit-content;
  margin-top: 22px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--accent-gain);
  border: 1px solid color-mix(in srgb, var(--accent-gain) 34%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-gain) 8%, transparent);
  font-size: var(--fs-small);
  font-weight: 580;
}

.gain span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- 13.4 bis Précision ---------------------------------------------------------
   Encart court qui explique un terme ou détaille une méthode, sans casser le
   rythme du bloc qui l'accueille. */

.precision {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid rgba(32, 213, 223, 0.2);
  border-radius: var(--radius-md);
  background: rgba(32, 213, 223, 0.05);
}

.precision strong {
  margin-bottom: 8px;
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.precision p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; }

/* --- 13.5 Barre de progression de lecture ----------------------------------
   Créée par assets/js/modules/progress.js et posée sous l'en-tête collant. */

.reading-progress {
  position: fixed;
  z-index: calc(var(--z-header) + 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  background: var(--gradient-deep);
  box-shadow: 0 0 12px rgba(32, 213, 223, 0.55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
}

/* --- 13.6 Étiquette technique animée ------------------------------------------
   Petit détail « machine » : un point qui bat devant certains libellés mono. */

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--ink-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tech-tag::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  content: "";
  animation: pulse 2.2s ease-in-out infinite;
}

/* =============================================================================
   14. Bandeau de références
   Un ruban de marques qui défile en continu. Deux pistes identiques se suivent :
   chacune se décale de sa propre largeur, la boucle est donc invisible. La
   seconde piste est masquée aux lecteurs d'écran, qui ne doivent entendre la
   liste qu'une fois.
   Les marques sont traitées en filigrane blanc : discrètes au repos, elles
   reprennent toute leur densité au survol.
   ========================================================================== */

.references { padding: var(--section-y-sm) 0; }

.references__heading { max-width: 62ch; }

.references__heading p {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--ink-muted);
  line-height: 1.75;
}

.logo-wall {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Les extrémités s'estompent : le ruban n'a ni début ni fin visibles. */
  mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}

.logo-wall__track {
  flex-shrink: 0;
  min-width: 100%;
  padding-right: clamp(44px, 6vw, 96px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(44px, 6vw, 96px);
  animation: marquee 42s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* Le ruban s'arrête sous le curseur : on peut lire une marque au passage. */
.logo-wall:hover .logo-wall__track,
.logo-wall:focus-within .logo-wall__track {
  animation-play-state: paused;
}

.logo-wall li { display: flex; align-items: center; }

/* Le fichier du logo Au cœur de l’Est contient un fond carré noir. On le
   présente dans une pastille ronde, afin de ne garder que le médaillon blanc,
   puis son nom rejoint le ruban comme les références composées en texte. */
.logo-wall__aucoeur {
  gap: 10px;
  white-space: nowrap;
}

.logo-wall .logo-wall__aucoeur img {
  width: clamp(34px, 3.6vw, 46px);
  height: clamp(34px, 3.6vw, 46px);
  border-radius: 50%;
  object-fit: cover;
}

.logo-wall img {
  width: auto;
  height: clamp(30px, 3.4vw, 44px);
  opacity: 0.42;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}

/* Les PNG sont déjà détourés en blanc. Les SVG arrivent en couleurs : le filtre
   #filigrane (défini dans la page) les aplatit sur blanc puis convertit la
   luminosité en transparence. Un simple brightness(0) invert(1) ne conviendrait
   pas : il remplirait les contreformes, et le « a » d'Atecna comme l'anneau de
   Caast disparaîtraient. */
.logo-wall img[src$=".svg"] { filter: url(#filigrane); }

/* Le bloc qui porte la définition du filtre ne doit rien occuper. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo-wall__word {
  color: var(--ink);
  opacity: 0.42;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}

@media (hover: hover) {
  .logo-wall li:hover img,
  .logo-wall li:hover .logo-wall__word {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.references__note {
  max-width: 88ch;
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: var(--fs-tiny);
  line-height: 1.65;
}

/* Sans animation : le ruban devient une simple grille, lisible d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .logo-wall { mask-image: none; flex-wrap: wrap; }
  .logo-wall__track {
    min-width: 0;
    padding-right: 0;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }
  .logo-wall__track[aria-hidden="true"] { display: none; }
  .logo-wall img,
  .logo-wall__word { opacity: 0.72; }
}

/* =============================================================================
   pages/accueil.css · Page d'accueil uniquement.
     1. Hero
     2. Le fil Mellion (lion au défilement)
     3. Les piliers de l'offre
     4. Pourquoi Mellion
     5. Chiffres clés
     6. Aperçu de la méthode
   ========================================================================== */

/* --- 1. Hero -------------------------------------------------------------------- */

.hero {
  padding: clamp(52px, 6vw, 84px) 0 clamp(48px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(480px, 1.05fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.hero__copy { position: relative; z-index: 2; }

.hero h1 {
  max-width: 14ch;
  font-size: var(--fs-display);
  font-weight: 540;
  letter-spacing: var(--tracking-display);
}

.hero h1 span {
  color: transparent;
  background: var(--gradient-title);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lead {
  max-width: 54ch;
  margin: 28px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.65;
}

.hero__lead a { text-decoration: underline; text-decoration-color: rgba(114, 207, 227, .55); text-underline-offset: 4px; }
.hero__lead a:hover { color: #72cfe3; }

.hero__coverage { margin-top: 20px; max-width: 54ch; color: var(--ink-subtle); font-size: var(--fs-small); line-height: 1.6; }
.hero__coverage strong { color: var(--ink-muted); font-weight: 500; }

/* La force d’Insight Group doit être comprise avant même le premier clic.
   Le bloc reste volontairement ouvert, sans carte, pour prolonger la lecture
   du hero plutôt que de le transformer en accumulation de panneaux. */
.hero__insight {
  max-width: 56ch;
  margin-top: 25px;
  padding: 14px 0 2px 18px;
  border-left: 1px solid color-mix(in srgb, var(--cyan) 62%, var(--line));
}

.hero__insight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero__insight-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(32, 213, 223, 0.78);
}

.hero__insight-title {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 590;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.hero__insight-copy {
  margin: 5px 0 0;
  color: var(--ink-subtle);
  font-size: var(--fs-small);
  line-height: 1.62;
}

.hero__insight a {
  display: inline-flex;
  gap: 8px;
  margin-top: 9px;
  color: var(--cyan);
  font-size: var(--fs-small);
  font-weight: 590;
  text-decoration: none;
}

.hero__insight a:hover { color: #b8f8fb; }
.hero__insight a span { transition: transform var(--dur-fast) var(--ease); }
.hero__insight a:hover span { transform: translateX(3px); }

.hero__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__trust {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__trust-num {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 22px;
}

.hero__trust p {
  padding-left: 18px;
  color: var(--ink-subtle);
  border-left: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.hero__trust strong { color: var(--ink-strong); font-weight: 540; }

/* Visuel : cadre vidéo en léger 3D, halo, orbites et pastilles flottantes. */

.hero__visual {
  position: relative;
  min-height: 555px;
  perspective: 1200px;
}

.hero__glow {
  position: absolute;
  inset: 18% 14%;
  border-radius: 50%;
  background: rgba(17, 97, 255, 0.23);
  filter: blur(80px);
  animation: breathe 5s ease-in-out infinite;
}

/* Deux mouvements cohabitent sans se gêner : le flottement utilise `translate`
   (propriété indépendante), l'inclinaison au curseur utilise `transform`.
   --tilt-x / --tilt-y sont posées par assets/js/modules/tilt.js. */
.hero__frame {
  position: absolute;
  inset: 37px 50px;
  transform: rotateY(calc(-7deg + var(--tilt-y, 0deg))) rotateX(calc(2deg + var(--tilt-x, 0deg)));
  transition: transform 220ms var(--ease);
  animation: float-y 7s ease-in-out infinite;
}

@keyframes float-y {
  50% { translate: 0 -9px; }
}

.hero__frame::before,
.hero__frame::after {
  position: absolute;
  z-index: 3;
  content: "";
  pointer-events: none;
}

.hero__frame::before {
  inset: 0;
  background:
    linear-gradient(120deg, rgba(13, 30, 61, 0.42), transparent 42%),
    radial-gradient(circle at 50% 52%, transparent 30%, rgba(1, 5, 15, 0.43) 78%);
}

/* Ligne de balayage qui traverse le cadre. */
.hero__frame::after {
  width: 40%;
  height: 1px;
  top: 21%;
  left: -40%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 18px rgba(32, 213, 223, 0.8);
  animation: scan 4.8s ease-in-out infinite;
}

.hero__video { position: relative; width: 100%; height: 100%; }

/* Logo révélé à la fin de la boucle vidéo (hero-video.js). */
.hero__brand {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity var(--dur-slow) var(--ease), transform 1150ms var(--ease);
}

.hero__brand.is-visible { opacity: 1; transform: scale(1); }

.hero__frame:has(.hero__brand.is-visible) video {
  opacity: 0.16;
  transform: scale(1.08);
}

.hero__frame video { transition: opacity 700ms var(--ease), transform 1100ms var(--ease); }

.hero__brand-lockup {
  position: relative;
  z-index: 2;
  width: 86%;
  display: flex;
  flex-direction: column;
}

.hero__brand-lockup > img {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 14px 35px rgba(21, 107, 255, 0.28));
}

.hero__brand-line {
  position: absolute;
  width: 74%;
  height: 1px;
  left: 13%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 30px rgba(32, 213, 223, 0.65);
  opacity: 0;
}

.hero__brand.is-visible .hero__brand-line {
  animation: convergence 1.3s var(--ease) both;
}

.hero__hud {
  position: absolute;
  z-index: 5;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero__hud > span {
  width: 2px;
  height: 9px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(32, 213, 223, 0.7);
  animation: hud-wave 1.2s ease-in-out infinite alternate;
}

.hero__hud > span:nth-child(2) { height: 15px; animation-delay: -0.4s; }
.hero__hud > span:nth-child(3) { height: 6px; animation-delay: -0.8s; }

.hero__hud small {
  margin-left: 8px;
  color: #84a3c3;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.hero__orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(69, 136, 241, 0.14);
  border-radius: 50%;
}

.hero__orbit::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  content: "";
}

.hero__orbit--one { inset: 0 18px; animation: rotate 18s linear infinite; }
.hero__orbit--one::after { top: 7%; left: 22%; }
.hero__orbit--two { inset: 72px -6px; animation: rotate-reverse 14s linear infinite; }
.hero__orbit--two::after { right: 3%; bottom: 26%; }

.hero__chip {
  position: absolute;
  z-index: 5;
  padding: 11px 15px;
  color: var(--ink-muted);
  border: 1px solid rgba(132, 173, 239, 0.24);
  border-radius: 9px;
  background: rgba(5, 15, 34, 0.78);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__chip span { margin-right: 12px; color: var(--cyan); }
.hero__chip--one { top: 2px; right: 11%; }
.hero__chip--two { bottom: 4px; left: 2%; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr 0.9fr; gap: 20px; }
  .hero__visual { min-height: 500px; }
  .hero__frame { inset: 45px 0; }
}

@media (max-width: 860px) {
  .hero { padding-top: 56px; grid-template-columns: 1fr; }
  .hero__visual { min-height: 440px; margin-top: 24px; }

  @media (prefers-reduced-motion: no-preference) {
    .hero__brand img { animation: mobile-brand-pulse 4.8s ease-in-out infinite; }
  }
}

@keyframes mobile-brand-pulse {
  50% { filter: drop-shadow(0 14px 42px rgba(32, 213, 223, 0.42)); transform: scale(1.018); }
}

@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__visual { min-height: 340px; }
  .hero__frame { inset: 30px 0; border-radius: var(--radius-lg); }
  .hero__chip { display: none; }
}

/* --- 2. Le fil Mellion -------------------------------------------------------------
   Section haute avec scène collante : le lion suit le ruban dessiné en canvas
   pendant que l'utilisateur fait défiler (assets/js/modules/lion-journey.js). */

.journey {
  position: relative;
  height: 260vh;
  min-height: 1800px;
  border-top: 1px solid rgba(123, 167, 238, 0.16);
  border-bottom: 1px solid rgba(123, 167, 238, 0.16);
  background:
    radial-gradient(circle at 50% 50%, rgba(23, 104, 255, 0.12), transparent 27rem),
    linear-gradient(180deg, var(--navy-900), #061127 52%, var(--navy-900));
}

.journey__stage {
  --journey-progress: 0;
  --journey-rotation: 0deg;
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

.journey__stage::before,
.journey__stage::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.journey__stage::before {
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(108, 154, 224, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 154, 224, 0.06) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.journey__stage::after {
  width: min(52vw, 760px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(114, 167, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 84px rgba(80, 139, 232, 0.025), 0 0 0 168px rgba(80, 139, 232, 0.018);
  transform: translate(-50%, -50%);
}

.journey__canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.journey__heading {
  position: absolute;
  z-index: 3;
  /* La scène est collée en haut de l'écran : le titre doit rester sous
     l'en-tête, lui aussi collant (92 px, 78 px sur mobile). */
  top: max(116px, 12vh);
  left: max(var(--shell-gutter), calc((100vw - var(--shell-max)) / 2));
  max-width: 520px;
}

.journey__heading { max-width: 440px; }
.journey__heading h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.journey__heading h2 span { color: #84adf2; }

.journey__prompt {
  width: min(330px, 100%);
  margin-top: 28px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(32, 213, 223, 0.26);
  border-radius: 16px;
  background: rgba(7, 22, 47, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25), 0 0 32px rgba(32, 213, 223, 0.06);
  backdrop-filter: blur(16px);
}

.journey__prompt p { color: var(--ink-subtle); font-size: 12px; line-height: 1.45; }
.journey__prompt strong { color: var(--ink-strong); font: 0.7rem var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.journey__prompt b { color: var(--cyan); font-size: 21px; font-weight: 400; animation: journey-arrow 1.35s ease-in-out infinite; }

.journey__mouse {
  width: 25px;
  height: 38px;
  display: grid;
  justify-items: center;
  border: 1px solid rgba(114, 167, 255, 0.45);
  border-radius: 14px;
}

.journey__mouse i {
  width: 3px;
  height: 7px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(32, 213, 223, 0.75);
  animation: journey-wheel 1.35s ease-in-out infinite;
}

@keyframes journey-wheel {
  0% { opacity: 0; transform: translateY(0); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

@keyframes journey-arrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

.journey__lion {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 52%;
  width: clamp(150px, 17vw, 255px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  will-change: transform;
}

.journey__lion::before,
.journey__lion::after,
.journey__lion i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  content: "";
}

.journey__lion::before {
  background: rgba(23, 104, 255, 0.22);
  box-shadow: 0 0 100px 34px rgba(23, 104, 255, 0.2);
  filter: blur(18px);
}

.journey__lion::after {
  inset: -18%;
  border: 1px solid rgba(32, 213, 223, 0.28);
  border-right-color: transparent;
  border-left-color: rgba(114, 167, 255, 0.08);
  transform: rotate(var(--journey-rotation));
}

.journey__lion i { inset: -36%; border: 1px dashed rgba(114, 167, 255, 0.12); }

.journey__lion img {
  position: relative;
  z-index: 2;
  width: 72%;
  filter: drop-shadow(0 0 18px rgba(32, 213, 223, 0.42)) drop-shadow(0 18px 38px rgba(0, 0, 0, 0.48));
}

/* Les quatre étapes sont placées en grille plutôt qu'en pourcentages : la
   première ligne de la colonne de gauche reste vide, ce qui réserve la place du
   titre quelle que soit la hauteur d'écran. */
.journey__steps {
  position: absolute;
  z-index: 3;
  inset: max(116px, 12vh) 0 36px;
  padding: 0 clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 310px) 1fr minmax(0, 310px);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  gap: 12px;
}

.journey__steps li {
  padding: 20px;
  display: flex;
  gap: 16px;
  border: 1px solid rgba(123, 167, 238, 0.15);
  border-radius: var(--radius-md);
  background: var(--glass);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  opacity: 0.28;
  transform: scale(0.94);
  transition: opacity 220ms var(--ease), transform var(--dur-mid) var(--ease),
    border-color 220ms var(--ease), background 220ms var(--ease);
  backdrop-filter: blur(18px);
}

.journey__steps li:nth-child(1) { grid-column: 1; grid-row: 2; }
.journey__steps li:nth-child(2) { grid-column: 3; grid-row: 1; }
.journey__steps li:nth-child(3) { grid-column: 3; grid-row: 2; }
.journey__steps li:nth-child(4) { grid-column: 1; grid-row: 3; }

.journey__stage[data-active="0"] [data-step="0"],
.journey__stage[data-active="1"] [data-step="1"],
.journey__stage[data-active="2"] [data-step="2"],
.journey__stage[data-active="3"] [data-step="3"] {
  border-color: rgba(32, 213, 223, 0.46);
  background: rgba(8, 28, 56, 0.86);
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(32, 213, 223, 0.18);
}

.journey__stage[data-active="0"] [data-step="0"] > span,
.journey__stage[data-active="1"] [data-step="1"] > span,
.journey__stage[data-active="2"] [data-step="2"] > span,
.journey__stage[data-active="3"] [data-step="3"] > span { color: var(--cyan-bright); }

.journey__steps li > span { color: var(--cyan); font: var(--fs-mono) var(--font-mono); }
.journey__steps strong { display: block; font-size: 20px; font-weight: 580; }
.journey__steps p { margin-top: 8px; color: var(--ink-subtle); font-size: 14px; line-height: 1.55; }

.journey__meter {
  position: absolute;
  z-index: 4;
  right: max(var(--shell-gutter), calc((100vw - var(--shell-max)) / 2));
  bottom: 42px;
  width: 120px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(114, 167, 255, 0.15);
}

.journey__meter span {
  width: calc(var(--journey-progress) * 100%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--gradient-brand);
  box-shadow: 0 0 12px var(--cyan);
}

@media (max-width: 980px) {
  .journey { height: 235vh; min-height: 1520px; }
  .journey__heading { left: var(--shell-gutter); max-width: 360px; }
  .journey__steps { grid-template-columns: minmax(0, 250px) 1fr minmax(0, 250px); padding: 0 var(--shell-gutter); }
  .journey__steps li { padding: 16px; }
  .journey__steps strong { font-size: 18px; }
}

@media (max-width: 720px) {
  .journey { height: 220vh; min-height: 1400px; }
  .journey__stage { min-height: 620px; }
  .journey__heading { top: 100px; right: 24px; left: 24px; }
  .journey__heading h2 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .journey__prompt { width: min(290px, 86vw); margin-top: 20px; padding: 11px 13px; }
  .journey__prompt p { font-size: 11px; }
  .journey__lion { top: 52%; width: 160px; }

  /* Sur mobile, une seule étape est visible à la fois, en bas de l'écran. */
  .journey__steps {
    inset: auto 20px 24px;
    min-height: 132px;
    display: block;
    padding: 0;
  }

  .journey__steps li {
    position: absolute;
    inset: auto 0 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
  }

  .journey__stage[data-active="0"] [data-step="0"],
  .journey__stage[data-active="1"] [data-step="1"],
  .journey__stage[data-active="2"] [data-step="2"],
  .journey__stage[data-active="3"] [data-step="3"] { opacity: 1; transform: translateY(0); }

  .journey__meter { right: 24px; bottom: 20px; width: calc(100% - 48px); }
}

/* Repli du fil Mellion · deux cas, une seule mise en page.
   « Mouvement réduit » d'abord, mais aussi le téléphone : la scène collante
   fait 260 vh, le ruban est redessiné en canvas à chaque image de défilement
   (trois tracés en shadowBlur plus vingt-six points) et les quatre étapes se
   placent autour du lion sur trois colonnes. Sur un petit écran, ni la place
   ni le processeur graphique ne suivent. Les étapes redeviennent donc une
   liste, et lion-journey.js ne se charge même pas (voir main.js). */
@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  .journey { height: auto; min-height: 0; }
  .journey__stage { position: relative; height: auto; min-height: 0; padding: var(--section-y) 0; }
  .journey__heading { position: static; margin: 0 auto 48px; max-width: var(--shell-max); padding: 0 var(--shell-gutter); }
  .journey__canvas, .journey__lion, .journey__meter, .journey__prompt { display: none; }
  .journey__steps {
    position: static;
    inset: auto;
    width: min(var(--shell-max), 100% - var(--shell-gutter) * 2);
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
  }
  /* Les quatre placements sont posés par :nth-child, plus spécifique que
     `.journey__steps li` : sans les annuler au même niveau, les étapes
     reconstituaient trois colonnes implicites au lieu de s'empiler, et le
     texte finissait en colonnes de deux mots. */
  .journey__steps li,
  .journey__steps li:nth-child(1),
  .journey__steps li:nth-child(2),
  .journey__steps li:nth-child(3),
  .journey__steps li:nth-child(4) {
    position: static;
    grid-column: 1;
    grid-row: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }
}

/* --- 3. Les six piliers -------------------------------------------------------- */

.pillars__grid {
  margin-top: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(620px, auto);
  gap: 16px;
}

.pillar {
  height: 100%;
  min-height: 620px;
  padding: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 70px rgba(23, 74, 122, 0.08);
  color: var(--paper-ink);
  text-decoration: none;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}

.pillar:hover {
  border-color: rgba(12, 118, 170, 0.42);
  box-shadow: 0 34px 86px rgba(23, 74, 122, 0.16);
  transform: translateY(-7px);
}

/* Une carte sur deux passe en version sombre : le damier crée le rythme. */
.pillar--dark {
  --ink: #f6f9ff;
  --ink-strong: #dbe6f4;
  --ink-muted: #b9c9dd;
  --ink-subtle: #9eb1c8;
  --line: rgba(174, 205, 239, 0.16);
  --accent: var(--cyan);
  color: #f6f9ff;
  border-color: rgba(67, 144, 245, 0.24);
  background:
    radial-gradient(circle at 90% 5%, rgba(32, 213, 223, 0.14), transparent 20rem),
    linear-gradient(140deg, #07172d, #0a2443);
  box-shadow: 0 34px 78px rgba(2, 11, 28, 0.22);
}

.pillar--dark h3 { color: #f6f9ff; }

.pillar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Numéro en pastille : on doit lire 01, 02, 03 d'un seul coup d'oeil. */
.pillar__num {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  border-radius: var(--radius-md);
  background: var(--blue-ink);
  box-shadow: 0 10px 26px rgba(17, 86, 214, 0.26);
  font-size: 1.2rem;
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pillar--dark .pillar__num {
  color: var(--navy-900);
  background: var(--cyan);
  box-shadow: 0 10px 26px rgba(32, 213, 223, 0.24);
}

.pillar__tag {
  padding: 8px 11px;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pillar--dark .pillar__tag { color: var(--cyan); border-color: rgba(32, 213, 223, 0.26); }

.pillar h3 {
  max-width: 18ch;
  margin: clamp(38px, 4vw, 62px) 0 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 610;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.pillar__promise {
  max-width: 42ch;
  margin: 20px 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
}

.pillar__response {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pillar__response > span,
.pillar__case > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pillar__response ul { margin-top: 12px; }

.pillar__response li {
  position: relative;
  padding: 9px 0 9px 20px;
  color: var(--ink-strong);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.pillar__response li::before { position: absolute; left: 0; color: var(--accent); content: "\2197"; }

.pillar__case {
  margin-top: auto;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(224, 241, 255, 0.56);
}

.pillar--dark .pillar__case { background: rgba(5, 15, 34, 0.42); }
.pillar__case strong { margin-top: 12px; display: block; font-size: 18px; line-height: 1.35; }
.pillar__case p { margin-top: 10px; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.6; }

.pillars__bottom {
  margin-top: 40px;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.pillar:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.pillars__bottom strong { font-size: 18px; }
.pillars__bottom p { max-width: 62ch; margin: 8px auto 0; color: var(--ink-muted); font-size: var(--fs-body); line-height: 1.65; }

.pillars__bottom-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pillar > .text-link { margin-top: 18px; align-self: flex-start; }

@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pillar { height: auto; min-height: 0; }
}

@media (max-width: 620px) {
  .pillar { padding: 28px; }
  .pillar__case { margin-top: 32px; padding: 22px; }
  .pillars__bottom { align-items: center; }
}

/* --- 4. Pourquoi Mellion --------------------------------------------------------- */

.why {
  padding: var(--section-y) 0;
  border-top: 1px solid rgba(114, 167, 255, 0.2);
  border-bottom: 1px solid rgba(114, 167, 255, 0.2);
  background:
    radial-gradient(circle at 14% 10%, rgba(32, 213, 223, 0.12), transparent 26rem),
    linear-gradient(135deg, #0b2747, #07182f 72%);
}

.why__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.why h2 { max-width: 18ch; }
.why h2 span { color: #78aaf5; }
.why__layout > .why__heading p { max-width: 62ch; margin-top: 22px; color: #c0cede; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.75; }

/* Badge lion rotatif. */
.lion-badge {
  position: relative;
  width: 280px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(32, 213, 223, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 104, 255, 0.2), transparent 70%);
}

.lion-badge > img {
  width: 104px;
  opacity: 0.9;
  filter: drop-shadow(0 12px 30px rgba(32, 213, 223, 0.22));
}

.lion-badge__ring {
  position: absolute;
  inset: 9px;
  color: #8ed5e8;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  animation: rotate 24s linear infinite;
}

.lion-badge__ring span { position: absolute; }
.lion-badge__ring span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.lion-badge__ring span:nth-child(2) { top: 50%; right: -43px; transform: rotate(90deg); }
.lion-badge__ring span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%) rotate(180deg); }
.lion-badge__ring span:nth-child(4) { top: 50%; left: -47px; transform: rotate(-90deg); }

.why .rail { margin-top: clamp(36px, 5vw, 64px); grid-column: 1 / -1; }
.why .rail p { color: #afbed1; }

@media (max-width: 760px) {
  .why__layout { grid-template-columns: 1fr; }
  .lion-badge { width: 240px; justify-self: center; }
  .lion-badge__ring { font-size: 10px; }
  .lion-badge__ring span:nth-child(2) { right: -40px; }
  .lion-badge__ring span:nth-child(4) { left: -43px; }
}

/* --- 5. Chiffres clés ---------------------------------------------------------------- */

.key-figures { padding: var(--section-y-sm) 0; }
.key-figures .stats { margin-top: clamp(28px, 3vw, 40px); }

.key-figures__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 700px) {
  .key-figures__heading { align-items: flex-start; flex-direction: column; }
}

/* --- 6. Aperçu de la méthode ------------------------------------------------------ */

.process .rail { margin-top: clamp(40px, 5vw, 66px); }
.notes .rail { margin-top: clamp(40px, 5vw, 64px); }
.notes .rail small {
  display: block;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.notes .rail h3 { margin-top: 4px; font-size: clamp(1.4rem, 1.8vw, 1.65rem); }

.notes__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 620px) {
  .notes__heading { align-items: flex-start; flex-direction: column; }
}

/* --- 7. Simulateur de gains ------------------------------------------------------
   Colonne de curseurs à gauche, résultat à droite. Les curseurs sont des
   <input type="range"> natifs : accessibles au clavier, colorés par
   accent-color, sans dépendance ni style en ligne. */

/* La section précédente ferme déjà l'espace : pas de double respiration. */
.simulator { padding: 0 0 var(--section-y); }

.simulator__panel {
  padding: clamp(26px, 3.6vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(30px, 4vw, 62px);
  border: 1px solid rgba(83, 150, 245, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 60% at 15% 10%, rgba(74, 99, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 92% 85%, rgba(32, 213, 223, 0.12), transparent 70%),
    var(--navy-800);
  box-shadow: var(--shadow-card);
}

.simulator__intro p {
  max-width: 52ch;
  margin-top: 18px;
  color: var(--ink-muted);
  line-height: 1.75;
}

.simulator__fields { margin-top: 30px; display: grid; gap: 22px; }

.simulator__field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-strong);
  font-size: var(--fs-small);
  font-weight: 540;
}

.simulator__value {
  color: var(--cyan-bright);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.simulator__value small {
  margin-left: 4px;
  color: var(--ink-subtle);
  font-size: 11px;
}

.simulator__field input[type="range"] {
  width: 100%;
  height: 22px;
  margin-top: 10px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.simulator__field input[type="range"]:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

/* Résultat */

.simulator__result {
  align-self: start;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(32, 213, 223, 0.24);
  border-radius: var(--radius-md);
  background: rgba(4, 12, 28, 0.6);
  backdrop-filter: blur(10px);
}

.simulator__result-label {
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.simulator__headline {
  margin: 14px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--cyan-bright);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.simulator__headline small {
  color: var(--blue-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 560;
}

.simulator__equiv { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; }
.simulator__equiv strong { color: var(--ink); }

.simulator__grid {
  margin-top: 26px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid var(--line);
}

.simulator__grid p { color: var(--ink-subtle); font-size: var(--fs-tiny); line-height: 1.5; }

.simulator__grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.simulator__result .btn { width: 100%; margin-top: 24px; }

.simulator__note {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.6;
}

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


/* V1 mobile finalisée · offres compactes et flux de méthode. */
.process-flow {
  position: relative;
  margin-top: clamp(38px, 5vw, 62px);
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(88, 155, 224, .25);
  border-radius: 4px 24px 4px 24px;
  background:
    linear-gradient(rgba(94, 161, 210, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 161, 210, .055) 1px, transparent 1px),
    linear-gradient(130deg, rgba(15, 39, 69, .9), rgba(3, 13, 28, .98));
  background-size: 24px 24px, 24px 24px, auto;
}
.process-flow ol {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 58px);
  list-style: none;
}
.process-flow__line {
  position: absolute;
  z-index: 1;
  top: calc(clamp(24px, 3vw, 34px) + 20px);
  left: calc(clamp(24px, 3vw, 34px) + 20px);
  right: calc(clamp(24px, 3vw, 34px) + 20px);
  height: 1px;
  overflow: hidden;
  background: #31556d;
}
.process-flow__line i {
  display: block;
  width: 34%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #88edf0 45% 58%, transparent);
  box-shadow: 0 0 15px rgba(63, 221, 229, .75);
  transform: translateX(-105%);
}
.process-flow__node {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #9ef3f2;
  border: 1px solid #4b9fb0;
  border-radius: 50%;
  background: #07182a;
  font-family: var(--font-mono);
  font-size: 10px;
  box-shadow: 0 0 0 6px rgba(11, 34, 56, .9);
}
.process-flow h3 { margin-top: 25px; color: #eaf3fc; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.process-flow li p { max-width: 25ch; margin-top: 8px; color: #aebfd1; font-size: 14px; line-height: 1.6; }
.process-flow__principle {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding-top: 18px;
  color: #b9cbdb;
  border-top: 1px solid rgba(133, 179, 209, .2);
  font-size: 13px;
}
.process-flow__principle span { margin-right: 9px; color: var(--cyan); }

@media (prefers-reduced-motion: no-preference) {
  .process-flow.is-revealed .process-flow__line i {
    animation: process-signal-x 3.8s cubic-bezier(.22, .61, .36, 1) 1 both;
  }
}
@keyframes process-signal-x {
  0% { opacity: 0; transform: translateX(-105%); }
  12% { opacity: 1; }
  88% { opacity: .8; }
  100% { opacity: 0; transform: translateX(295%); }
}

@media (max-width: 620px) {
  .pillars .section-heading { gap: 18px; }
  .pillars__grid { margin-top: 30px; gap: 12px; border-top: 0; }
  .pillar,
  .pillar--dark {
    --mobile-offer-bg: linear-gradient(145deg, #f9fdff 0%, #e8f4fa 100%);
    --mobile-offer-ink: var(--paper-ink);
    --mobile-offer-muted: var(--paper-ink-muted);
    --mobile-offer-accent: var(--paper-accent);
    --mobile-offer-border: rgba(7, 107, 152, .22);
    --ink: #102135;
    --ink-strong: #243950;
    --ink-muted: #53687d;
    --ink-subtle: #667a8e;
    --line: rgba(28, 65, 99, .16);
    --accent: #075d83;
    min-height: 0;
    padding: 22px 20px;
    color: var(--mobile-offer-ink);
    border: 1px solid var(--mobile-offer-border);
    border-radius: 14px;
    background: var(--mobile-offer-bg);
    box-shadow: 0 12px 30px rgba(17, 55, 88, .06);
    transform: none;
  }

  .pillar:nth-child(2) {
    --mobile-offer-bg: linear-gradient(145deg, var(--navy-600) 0%, var(--navy-700) 100%);
    --mobile-offer-ink: #f5fbff;
    --mobile-offer-muted: #b8cbe0;
    --mobile-offer-accent: var(--cyan-bright);
    --mobile-offer-border: rgba(32, 213, 223, .3);
  }

  .pillar:nth-child(3) {
    --mobile-offer-bg: linear-gradient(145deg, #f7faff 0%, #e6edff 100%);
    --mobile-offer-accent: var(--blue-ink);
    --mobile-offer-border: rgba(23, 104, 255, .22);
  }

  .pillar:nth-child(4) {
    --mobile-offer-bg: linear-gradient(145deg, #f1f7ff 0%, #dceaff 100%);
    --mobile-offer-accent: var(--blue);
    --mobile-offer-border: rgba(23, 104, 255, .27);
  }

  .pillar:nth-child(5) {
    --mobile-offer-bg: linear-gradient(145deg, #111f52 0%, var(--navy-700) 100%);
    --mobile-offer-ink: #f5f8ff;
    --mobile-offer-muted: #bdc9df;
    --mobile-offer-accent: var(--blue-soft);
    --mobile-offer-border: rgba(74, 99, 255, .42);
  }

  .pillar:nth-child(6) {
    --mobile-offer-bg: linear-gradient(145deg, #f8fbff 0%, #e4eaf3 100%);
    --mobile-offer-accent: var(--indigo);
    --mobile-offer-border: rgba(74, 99, 255, .22);
  }

  .pillar:hover,
  .pillar--dark:hover {
    color: var(--mobile-offer-ink);
    border-color: var(--mobile-offer-border);
    background: var(--mobile-offer-bg);
    box-shadow: 0 12px 30px rgba(17, 55, 88, .06);
    transform: none;
  }
  .pillar__top { justify-content: flex-start; gap: 12px; }
  .pillar__num,
  .pillar--dark .pillar__num {
    width: 30px; height: 30px; color: var(--mobile-offer-accent); border: 1px solid color-mix(in srgb, var(--mobile-offer-accent) 52%, transparent);
    border-radius: 50%; background: color-mix(in srgb, var(--mobile-offer-accent) 7%, transparent); box-shadow: none;
    font: 600 10px/1 var(--font-mono);
  }
  .pillar__tag,
  .pillar--dark .pillar__tag { padding: 0; color: var(--mobile-offer-accent); border: 0; }
  .pillar h3,
  .pillar--dark h3 { max-width: none; margin-top: 16px; color: var(--mobile-offer-ink); font-size: clamp(1.55rem, 7.2vw, 1.9rem); line-height: 1.08; }
  .pillar__promise { margin-top: 10px; color: var(--mobile-offer-muted); font-size: 15px; line-height: 1.55; }
  .pillar__response, .pillar__case { display: none; }
  .pillar > .text-link { margin-top: 16px; color: var(--mobile-offer-accent); font-size: 0; }
  .pillar > .text-link::before { content: "En savoir plus"; font-size: 13px; }
  .pillar > .text-link > span { margin-left: 7px; font-size: 13px; }
  .pillars__bottom { margin-top: 28px; padding-top: 0; border-top: 0; }

  .process .section-heading { gap: 18px; }
  .process-flow { margin-top: 30px; padding: 22px 18px; border-radius: 3px 18px 3px 18px; background-size: 22px 22px, 22px 22px, auto; }
  .process-flow ol { grid-template-columns: 1fr; gap: 0; }
  .process-flow li { position: relative; min-height: 116px; padding: 0 0 26px 56px; }
  .process-flow li:last-child { min-height: auto; padding-bottom: 0; }
  .process-flow__node { position: absolute; top: 0; left: 0; width: 38px; height: 38px; }
  .process-flow h3 { margin-top: 0; padding-top: 4px; font-size: 1.35rem; }
  .process-flow li p { max-width: 31ch; margin-top: 5px; font-size: 13px; }
  .process-flow__line { top: 41px; bottom: 97px; left: 37px; right: auto; width: 1px; height: auto; }
  .process-flow__line i { width: 100%; height: 30%; transform: translateY(-105%); background: linear-gradient(180deg, transparent, #88edf0 45% 58%, transparent); }
  .process-flow__principle { margin-top: 24px; padding-top: 16px; font-size: 12px; line-height: 1.55; }
  @media (prefers-reduced-motion: no-preference) {
    .process-flow.is-revealed .process-flow__line i { animation-name: process-signal-y; }
  }
}
@keyframes process-signal-y {
  0% { opacity: 0; transform: translateY(-105%); }
  12% { opacity: 1; }
  88% { opacity: .8; }
  100% { opacity: 0; transform: translateY(335%); }
}
@media (prefers-reduced-motion: reduce) {
  .process-flow__line i { opacity: .42; transform: none; animation: none; }
}

/* V1 ordinateur compacte.
   Le téléphone conserve strictement la composition validée ci-dessus. Sur un
   grand écran, la frise narrative faisait répéter la méthode pendant plusieurs
   hauteurs de fenêtre : le flux synthétique placé plus bas suffit à expliquer
   le parcours. Les offres deviennent un index éditorial, toujours explicite et
   entièrement cliquable, tandis que les détails restent sur leurs pages. */
@media (min-width: 861px) {
  .hero {
    padding-top: clamp(42px, 4.5vw, 64px);
    padding-bottom: clamp(42px, 4.5vw, 60px);
  }

  .hero__visual { min-height: 480px; }

  .references { padding: clamp(48px, 5vw, 68px) 0; }
  .logo-wall { margin-top: 26px; padding: 24px 0; }

  /* Présente sur mobile, supprimée sur ordinateur pour éviter le doublon avec
     le schéma « Un flux, de bout en bout » situé près de la méthode. */
  .journey { display: none; }

  .pillars { padding: clamp(64px, 6vw, 86px) 0; }
  .pillars__grid {
    margin-top: 38px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0 clamp(26px, 3vw, 44px);
    border-top: 1px solid #c8d6e2;
  }

  .pillar,
  .pillar--dark {
    --ink: #102135;
    --ink-strong: #243950;
    --ink-muted: #53687d;
    --ink-subtle: #667a8e;
    --line: rgba(28, 65, 99, .16);
    --accent: #075d83;
    height: auto;
    min-height: 238px;
    padding: 28px 2px 26px;
    color: #102135;
    border: 0;
    border-bottom: 1px solid #c8d6e2;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .pillar:hover,
  .pillar--dark:hover {
    border-color: #9fb8c9;
    background: rgba(255, 255, 255, .28);
    box-shadow: none;
    transform: none;
  }

  .pillar__top { justify-content: flex-start; gap: 14px; }
  .pillar__num,
  .pillar--dark .pillar__num {
    width: 34px;
    height: 34px;
    color: #075d83;
    border: 1px solid #8cb0c5;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    font: 600 10px/1 var(--font-mono);
  }

  .pillar__tag,
  .pillar--dark .pillar__tag {
    padding: 0;
    color: #64788a;
    border: 0;
  }

  .pillar h3,
  .pillar--dark h3 {
    max-width: none;
    margin-top: 22px;
    color: #102135;
    font-size: clamp(1.65rem, 2.35vw, 2.25rem);
    line-height: 1.04;
  }

  .pillar__promise {
    max-width: 38ch;
    margin-top: 12px;
    color: #53687d;
    font-size: 15px;
    line-height: 1.5;
  }

  .pillar__response,
  .pillar__case { display: none; }

  .pillar > .text-link {
    margin-top: auto;
    padding-top: 22px;
    color: #075d83;
    font-size: 13px;
  }

  .pillars__bottom {
    margin-top: 30px;
    padding-top: 28px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .pillars__bottom p { margin-inline: 0; }
  .pillars__bottom-actions { flex-direction: row; }

  .why { padding: clamp(64px, 6vw, 82px) 0; }
  .why__layout { align-items: start; }
  .why .lion-badge { display: none; }
  .why .rail {
    --rail-cols: 2;
    margin-top: 42px;
  }
  .why .rail > * {
    min-height: 210px;
    padding: 24px;
  }
  .why .rail > *:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .why .rail > *:nth-child(4) { border-top: 1px solid var(--line); }

  .key-figures { padding: clamp(58px, 5vw, 74px) 0; }
  .key-figures .stats { margin-top: 28px; }
  .key-figures .stats > * { padding: 24px; }

  .simulator { padding-bottom: clamp(58px, 5vw, 74px); }
  .simulator__panel { padding: clamp(30px, 3vw, 42px); }

  .process,
  .notes { padding: clamp(64px, 6vw, 82px) 0; }
  .process-flow,
  .notes .rail { margin-top: 34px; }

  .notes .rail {
    --rail-cols: 3;
  }
  .notes .rail > * {
    min-height: 222px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .notes .rail > *:first-child { border-left: 0; }
}

@media (min-width: 1081px) {
  .pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .why__layout {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  }
  .why .rail {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .simulator__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
  }
  .simulator__field label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Identité des six offres sur ordinateur.
   Les variations restent strictement dans la palette Mellion : bleu nuit,
   bleu, indigo, cyan et surfaces papier bleutées. */
@media (min-width: 861px) {
  .pillars__grid {
    gap: 16px;
    border-top: 0;
  }

  .pillar,
  .pillar--dark {
    --offer-bg: linear-gradient(145deg, #f8fbff 0%, #e8f1fb 100%);
    --offer-ink: var(--paper-ink);
    --offer-muted: var(--paper-ink-muted);
    --offer-accent: var(--paper-accent);
    --offer-border: rgba(7, 107, 152, .22);
    min-height: 260px;
    padding: 26px;
    color: var(--offer-ink);
    border: 1px solid var(--offer-border);
    border-radius: 16px;
    background: var(--offer-bg);
    box-shadow: 0 18px 44px rgba(17, 55, 88, .07);
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
  }

  .pillar:nth-child(1) {
    --offer-bg: linear-gradient(145deg, #f9fdff 0%, #e4f6fb 100%);
    --offer-ink: var(--paper-ink);
    --offer-muted: var(--paper-ink-muted);
    --offer-accent: var(--paper-accent);
    --offer-border: rgba(7, 107, 152, .24);
  }

  .pillar:nth-child(2) {
    --offer-bg: linear-gradient(145deg, var(--navy-600) 0%, var(--navy-700) 100%);
    --offer-ink: #f5fbff;
    --offer-muted: #b8cbe0;
    --offer-accent: var(--cyan-bright);
    --offer-border: rgba(32, 213, 223, .3);
  }

  .pillar:nth-child(3) {
    --offer-bg: linear-gradient(145deg, #f7faff 0%, #e6edff 100%);
    --offer-ink: var(--paper-ink);
    --offer-muted: var(--paper-ink-muted);
    --offer-accent: var(--blue-ink);
    --offer-border: rgba(23, 104, 255, .23);
  }

  .pillar:nth-child(4) {
    --offer-bg: linear-gradient(145deg, #f2f8ff 0%, #dcecff 100%);
    --offer-ink: var(--paper-ink);
    --offer-muted: var(--paper-ink-muted);
    --offer-accent: var(--blue);
    --offer-border: rgba(23, 104, 255, .27);
  }

  .pillar:nth-child(5) {
    --offer-bg: linear-gradient(145deg, #111f52 0%, var(--navy-700) 100%);
    --offer-ink: #f5f8ff;
    --offer-muted: #bdc9df;
    --offer-accent: var(--blue-soft);
    --offer-border: rgba(74, 99, 255, .42);
  }

  .pillar:nth-child(6) {
    --offer-bg: linear-gradient(145deg, #f8fbff 0%, #e8eef8 100%);
    --offer-ink: var(--paper-ink);
    --offer-muted: var(--paper-ink-muted);
    --offer-accent: var(--indigo);
    --offer-border: rgba(74, 99, 255, .23);
  }

  .pillar h3,
  .pillar--dark h3 { color: var(--offer-ink); }

  .pillar__promise { color: var(--offer-muted); }

  .pillar__num,
  .pillar--dark .pillar__num {
    color: var(--offer-accent);
    border-color: color-mix(in srgb, var(--offer-accent) 55%, transparent);
    background: color-mix(in srgb, var(--offer-accent) 8%, transparent);
  }

  .pillar__tag,
  .pillar--dark .pillar__tag,
  .pillar > .text-link { color: var(--offer-accent); }

  .pillar:hover,
  .pillar--dark:hover {
    color: var(--offer-ink);
    border-color: color-mix(in srgb, var(--offer-accent) 62%, var(--offer-border));
    background: var(--offer-bg);
    box-shadow: 0 24px 54px rgba(17, 55, 88, .14);
    transform: translateY(-3px);
  }
}

/* =============================================================================
   mobile.css · Allègement du rendu sur petits écrans et appareils tactiles.

   Chargée en dernier, après pages/*.css, pour pouvoir neutraliser n'importe
   quel décor. Tout ce que le site désactive sur mobile est ici, et nulle part
   ailleurs : un seul fichier à lire pour comprendre ce qui change.

   Pourquoi ce fichier existe
   --------------------------
   Le poids n'était pas en cause : l'accueil pèse 110 Ko et se charge en moins
   de 300 ms. Ce qui coûtait cher, c'était le travail d'affichage à chaque image
   du défilement :

     · trois halos de 42vw en « filter: blur(100px) » avec « mix-blend-mode:
       screen », repositionnés à chaque image par --ambient-progress. Un flou de
       ce rayon combiné à un mode de fusion oblige le navigateur à relire le
       fond et à recomposer toute la zone ;
     · l'en-tête collant en « backdrop-filter: blur(22px) », posé juste au-dessus
       de ces halos, donc reflouté à chaque image lui aussi ;
     · les animations décoratives permanentes (orbites, balayage, respiration
       des halos), qui empêchent le processeur graphique de se reposer.

   Un ordinateur absorbe tout cela sans broncher. Un téléphone, non : d'où un
   site fluide sur PC et poussif sur mobile.

   Le point de bascule : moins de 860 px de large, ou aucun survol possible
   (téléphones et tablettes). Un ordinateur portable à écran tactile garde le
   décor complet, puisqu'il déclare « hover: hover » pour sa souris.
   ========================================================================== */

@media (max-width: 860px), (hover: none) {
  /* --- 1. Le décor ambiant s'efface ---------------------------------------
     Les trois dégradés radiaux de .site-root suffisent à donner sa couleur au
     fond. Les halos flous n'ajoutent qu'une nuance, pour un coût majeur. */

  .ambient {
    display: none;
  }

  /* --- 2. Plus aucun flou d'arrière-plan -----------------------------------
     Le fond est déjà très sombre : un aplat un peu plus opaque rend la même
     lisibilité que le flou, sans le recalcul permanent. */

  .site-header__inner {
    backdrop-filter: none;
    background: rgba(6, 14, 32, 0.94);
  }

  .consent,
  .card,
  .note,
  .simulator__panel,
  .simulator__result,
  .journey__prompt,
  .journey__steps li,
  .hero__chip {
    backdrop-filter: none;
  }

  /* --- 3. Les grands flous décoratifs ---------------------------------------
     Un rayon de flou coûte proportionnellement à sa surface. Le halo du hero
     devient un dégradé, visuellement très proche et pratiquement gratuit. */

  .hero__glow {
    background: radial-gradient(circle, rgba(17, 97, 255, 0.26), transparent 68%);
    filter: none;
    animation: none;
  }

  .ambient__lion {
    filter: none;
  }

  /* --- 4. Les animations permanentes s'arrêtent ----------------------------
     Elles ne portent aucune information : elles habillent. Sur mobile, elles
     maintiennent le processeur graphique éveillé en continu, y compris quand
     la page est immobile. Le défilement et les apparitions restent animés. */

  .hero__orbit,
  .hero__frame::after,
  .hero__hud span,
  .lion-badge__ring,
  .security__ring--a,
  .security__ring--b {
    animation: none;
  }

  .hero__frame::after {
    opacity: 0;
  }

  /* --- 5. L'écran d'introduction, en version courte ------------------------
     Il est conservé : c'est la signature de la marque. Mais il est la seule
     chose qui s'interpose entre le visiteur et le contenu, et sur téléphone
     boot.js l'efface dès que la page est prête, avec un plancher de 1,2 s.
     Les deux animations sont réglées ici pour occuper ce temps sans le
     dépasser : le mouvement se termine vers 1 130 ms, juste avant que l'écran
     ne commence à s'effacer. Pour ralentir davantage l'ouverture, augmenter
     PLANCHER dans boot.js et ces deux durées dans le même rapport. */

  .intro__brand {
    animation-duration: 1s;
  }

  .intro__scan {
    animation-duration: 1s;
    animation-delay: 130ms;
  }

  /* Le bandeau de références continue de défiler : il porte du contenu, et
     « translate » reste une transformation composée, sans recalcul de mise en
     page. On demande simplement au navigateur de préparer sa couche une fois
     pour toutes, au lieu de repeindre les logos filtrés à chaque image. */

  .logo-wall__track {
    will-change: transform;
  }

  /* Note pour la suite · « content-visibility: auto » a été essayé sur les
     sections, puis retiré. Mesuré sur l'accueil à 375 px : la page annonçait
     8 666 px au lieu de 18 854 px tant que les sections n'avaient pas été
     rendues une première fois. Les sections font ici 1 400 px en moyenne, très
     loin de la taille de réserve, et la barre de défilement sautait pendant la
     lecture. Le remède était pire que le mal. À reconsidérer seulement avec une
     taille de réserve mesurée section par section. */
}

/* Le mouvement réduit reste prioritaire : il coupe déjà le décor ambiant, et
   il ne doit pas réactiver ce que la règle ci-dessus a désactivé. */
@media (prefers-reduced-motion: reduce) {
  .logo-wall__track {
    animation: none;
  }
}

/* Proposition mobile du 9 septembre · le lion de marque, sans vidéo ni flou.
   Le schéma est maintenant dans Méthode, sur tous les écrans.
   Aucun contenu métier ne dépend du JavaScript ou d’une animation. */
@media (max-width: 860px) {
  .hero { padding-top: 32px; gap: 0; }
  .hero h1 { max-width: 100%; font-size: clamp(2.35rem, 10.5vw, 4rem); line-height: 1.05; }
  .hero .eyebrow { margin-bottom: 20px; color: #a5b7d0; letter-spacing: .1em; font-size: 10px; }
  .hero__lead { margin-top: 20px; font-size: 16px; line-height: 1.65; }
  /* Même lion que sur ordinateur, réordonné entre le texte et les boutons.
     Le décor est ignoré par les lecteurs d’écran ; l’ordre de lecture reste intact. */
  .hero__copy { display: contents; }
  .hero .eyebrow { order: 0; }
  .hero h1 { order: 1; }
  .hero__lead { order: 2; }
  .hero__visual { display: block; order: 3; min-height: 0; height: 216px; width: 100%; max-width: 520px; margin: 20px auto 0; perspective: none; }
  .hero__actions { order: 4; }
  .hero__coverage { order: 5; }
  .hero__insight { order: 6; }
  .hero__trust { order: 7; }
  .hero__frame {
    inset: 0; border: 0; border-radius: 0; box-shadow: none;
    background: #020b17 url('/assets/img/lion-poster.jpg') center / cover no-repeat;
    transform: none; translate: none; transition: none; animation: none;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .hero__video, .hero__brand, .hero__glow, .hero__orbit { display: none; }
  .hero__frame::before {
    z-index: 3; inset: 0; border: 0;
    background: linear-gradient(180deg, #030b19, transparent 14%, transparent 86%, #030b19);
  }
  .hero__frame::after {
    top: 8%; left: 12%; width: 76%; height: 1px; opacity: 0;
    background: linear-gradient(90deg, transparent, #9fe9f7, transparent);
    box-shadow: 0 0 12px rgba(102, 213, 242, .45); animation: none;
  }
  .hero__frame .frame__grid {
    z-index: 2; opacity: .12;
    background-image: linear-gradient(rgba(121, 190, 233, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(121, 190, 233, .35) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  .hero__brand img { animation: none; }
  .hero__actions { margin-top: 22px; gap: 10px; }
  .hero__actions .btn { min-height: 48px; }
  .hero__coverage { margin-top: 20px; font-size: 13px; line-height: 1.7; }
  .hero__coverage strong { color: #d7e5f6; }
  .hero__insight { margin-top: 28px; }
  .hero__trust { margin-top: 24px; }

  /* La démarche devient une ligne de progression lisible, pas quatre encarts. */
  .journey__stage { padding-block: 54px; background: linear-gradient(180deg, rgba(7, 26, 47, .65), transparent); }
  .journey__heading { margin-bottom: 30px; }
  .journey__steps { gap: 0; }
  .journey__steps li,
  .journey__steps li:nth-child(n) {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 15px;
    position: relative; margin-left: 16px; padding: 0 0 28px 0;
    border: 0; border-left: 1px solid #315a71; border-radius: 0; box-shadow: none; background: none;
  }
  .journey__steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .journey__stage[data-active] .journey__steps [data-step] { background: none; box-shadow: none; }
  .journey__steps li > span { position: relative; left: -16px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #468b9e; border-radius: 50%; background: #071628; color: #a9f1f2; font-size: 10px; }
  .journey__steps li > div { margin-left: -16px; padding-top: 3px; }
  .journey__steps strong { color: #dce8f7; font-size: 18px; }
  .journey__steps p { margin-top: 5px; font-size: 14px; line-height: 1.6; }

  /* Repère de construction commun aux pages d’offre, sans charger un décor animé. */
  .service-hero, .page-hero, .article__header { position: relative; }
  .service-hero::after, .page-hero::after, .article__header::after {
    content: ""; display: block; width: 76px; height: 2px; margin-top: 25px;
    background: linear-gradient(90deg, #80d5e2 0 56%, transparent 56% 65%, #426780 65% 84%, transparent 84% 91%, #426780 91%);
  }
}

@media (min-width: 560px) and (max-width: 860px) {
  .hero__visual { height: 270px; }
  .hero__actions { flex-direction: row; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 2.2rem; }
}

/* Un seul passage lumineux de 3,6 s : pas de boucle ni de travail continu.
   Le lion est visible dès le premier rendu, même sans JS ou mouvement. */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .hero__frame::after { animation: lion-mobile-scan 3.6s cubic-bezier(.22, .61, .36, 1) 1 both; }
}
@keyframes lion-mobile-scan {
  0% { opacity: 0; transform: translateY(0); }
  16% { opacity: .75; }
  82% { opacity: .5; }
  100% { opacity: 0; transform: translateY(175px); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .hero__frame, .hero__frame::after { animation: none; transform: none; }
}