/* =============================================================================
   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;
}

/* 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; }
}