/* =========================================================
   YOHAN BERNARDIN — Bloc 1 : HERO
   ========================================================= */

:root {
  --blue:       #1a4fd6;   /* cobalt principal */
  --blue-deep:  #113dae;   /* profondeur / bas de dégradé */
  --blue-line:  #5b86ec;   /* ondes claires */
  --white:      #ffffff;
  --ink:        #0c1220;
  --red:        #e12d2d;    /* accent (réservé) */

  --font: 'Poppins', system-ui, sans-serif;
  --gutter: clamp(22px, 4vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font); background: var(--white); color: var(--ink); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
::selection { background: var(--white); color: var(--blue); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(130% 100% at 20% 0%, #164fd8 0%, #0d47c8 55%, #0b3fb4 100%);
  overflow: hidden;
  isolation: isolate;
}

/* --- Ondes topographiques ---
   Les deux SVG (hero + next) mappent le même champ bord à bord :
   même géométrie, même animation, même durée → raccord invisible. */
.hero__waves {
  position: absolute;
  top: 0; bottom: 0; left: -30px;
  width: calc(100% + 60px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  animation: waveSway 30s ease-in-out infinite;
  will-change: transform;
}
@keyframes waveSway {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-26px); }
  100% { transform: translateX(0); }
}

/* --- Logo --- */
.logo {
  position: absolute; top: clamp(24px, 3.4vw, 46px); left: var(--gutter);
  z-index: 5; display: inline-flex; align-items: center;
}
.logo img { height: clamp(20px, 2.1vw, 30px); width: auto; display: block; }

/* --- Bloc central --- */
.hero__center {
  position: relative; z-index: 4;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px var(--gutter);
}
.hero__title {
  color: var(--white); font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 5rem);
  line-height: 1.02; letter-spacing: -0.02em;
  text-transform: uppercase; max-width: 13ch;
  text-shadow: 0 6px 40px rgba(6,26,80,.35);
}
.hero__pill {
  margin-top: clamp(24px, 3vw, 40px);
  display: inline-flex; align-items: center;
  color: var(--white); font-weight: 500; font-size: clamp(15px, 1.3vw, 18px);
  padding: 15px 34px; border: 1.6px solid rgba(255,255,255,.85);
  border-radius: 100px; background: rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
  transition: background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
}
.hero__pill:hover { background: var(--white); color: var(--blue); transform: translateY(-2px); }

/* --- Photo + blob --- */
.hero__photo {
  position: absolute; z-index: 3;
  right: clamp(20px, 4vw, 88px);
  top: 52%; transform: translateY(-50%);
  width: clamp(190px, 19vw, 280px);
}
.hero__photo img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 24px 44px rgba(6,22,80,.28));
}

/* --- Fil connecteur discret vers la photo --- */
.hero__connector {
  position: absolute; z-index: 2; inset: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.hero__connector path {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4;
  stroke-dasharray: 4 6;
}

/* =========================================================
   ENTRÉE (load)
   ========================================================= */
.anim { opacity: 0; transform: translateY(22px); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.d1 { animation-delay: .15s; }
.d2 { animation-delay: .35s; }
.d3 { animation-delay: .55s; }
.hero__photo.anim { transform: translateY(-50%) translateX(24px); animation: risePhoto 1s cubic-bezier(.2,.8,.2,1) .3s forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes risePhoto { to { opacity: 1; transform: translateY(-50%) translateX(0); } }

/* =========================================================
   SECTION SUIVANTE (fond blanc)
   ========================================================= */
.next {
  position: relative;
  background: var(--white);
  padding: 0 var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.next__waves {
  position: absolute;
  top: 0; left: -30px;
  width: calc(100% + 60px);
  height: 900px; /* hauteur fixe : le pin allonge la section, les ondes ne s'étirent pas */
  z-index: 0; pointer-events: none;
  animation: waveSway 30s ease-in-out infinite;
  will-change: transform;
}

/* =========================================================
   TYPO COMMUNE (sections récit)
   ========================================================= */
/* Surtitre : pill-sticker rouge, posée légèrement en travers (vocabulaire des pills) */
.kicker {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--red);
  border-radius: 999px;
  color: var(--white);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 10px 22px rgba(225, 45, 45, 0.25);
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 18px;
}
.copy {
  margin-top: 20px; font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65; color: #4b5265; max-width: 46ch;
}
.copy strong { color: var(--ink); }

/* =========================================================
   BLOC 2 — LA CIBLE
   ========================================================= */
.cible {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; align-items: center;
}
.cible__grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center; width: 100%;
  max-width: 1240px; margin: 0 auto;
}
.cible__crowd { position: relative; }
.crowd { width: 100%; height: auto; display: block; }

/* Vibration du personnage rouge révélé */
.person .p-inner, .pulse .p-inner { transform-box: fill-box; transform-origin: 50% 50%; }
.person.target.is-live .p-inner,
.pulse .p-inner {
  animation: targetPulse 1.4s ease-in-out infinite;
}
@keyframes targetPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.06) rotate(-2deg); }
  50%      { transform: scale(1.12) rotate(0deg); }
  75%      { transform: scale(1.06) rotate(2deg); }
}
.cible__caption {
  margin-top: 14px; text-align: center;
  font-size: 1.05rem; color: #4b5265;
}
.cible__caption strong { color: var(--red); }

/* =========================================================
   BLOC 3 — LES HABITUDES
   ========================================================= */
.habitudes {
  position: relative; background: var(--white);
  min-height: 100svh;
  display: flex; align-items: flex-start;
  padding: clamp(48px, 7vh, 90px) var(--gutter) 0;
  overflow: hidden;
}
.habitudes__inner { width: 100%; max-width: 1240px; margin: 0 auto; position: relative; z-index: 2; }
.habitudes__head { max-width: 640px; }

/* --- La planète --- */
.day { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.planet {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Route sur la surface */
.planet-route {
  fill: none; stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2.5; stroke-dasharray: 2 12; stroke-linecap: round;
}
.planet-route-progress {
  fill: none; stroke: var(--red);
  stroke-width: 3.5; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(225, 45, 45, 0.45));
}

/* Étapes horaires */
.planet-dot {
  fill: #0e1424; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.5;
}
.planet-pill {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.2;
}
.planet-time {
  fill: rgba(255, 255, 255, 0.72);
  font-family: var(--font);
  font-size: 19px; font-weight: 600; letter-spacing: 0.05em;
}
.planet-walker { filter: drop-shadow(0 8px 16px rgba(225, 45, 45, 0.4)); }

/* Bulles de dialogue du client (blanc sur planète, écho au blob du hero) */
.say-bg { fill: var(--white); }
.say-tail { fill: var(--white); }
.say-txt {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 18px; font-weight: 700;
}
.planet-say { filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.35)); }

/* Mobile : la journée en bulles de dialogue (même langage que la planète) */
.day-list { display: none; list-style: none; }
.day-list li {
  position: relative;
  margin-bottom: 14px;
  padding: 14px 20px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(16, 24, 60, 0.1);
  color: var(--ink); font-size: 0.98rem; font-weight: 600;
}
.day-list li::after {
  /* petite queue de bulle */
  content: "";
  position: absolute; left: 26px; bottom: -8px;
  border: 9px solid transparent;
  border-top-color: var(--white);
  border-bottom: none;
}
.day-list li:nth-child(even) { margin-left: 10%; }
.day-list strong { color: var(--red); margin-right: 10px; }

/* =========================================================
   BLOC 4 — LA FOURCHE (fond = couleur planète, continuité)
   ========================================================= */
.fourche {
  position: relative;
  background: #0e1424;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(48px, 7vh, 90px) var(--gutter);
  overflow: hidden;
}
.fourche__inner { width: 100%; max-width: 1240px; margin: 0 auto; }

/* Coins de continuité (courbure de la planète qui traverse la frontière) */
.fourche__wedge {
  position: absolute; top: -1px;
  width: calc(100vw * 40 / 1440); height: auto;
  pointer-events: none;
}
.fourche__wedge--l { left: 0; }
.fourche__wedge--r { right: 0; }

.fourche__head { text-align: center; max-width: 720px; margin: 0 auto; }
.h2--light { color: var(--white); }
.copy--light { color: rgba(255, 255, 255, 0.6); margin-left: auto; margin-right: auto; }

.fourche__split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 9vw, 150px);
  margin-top: clamp(44px, 7vh, 80px);
}

/* Trait central : s'allume au scroll */
.fourche__line {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.fourche__line-fill {
  position: absolute; inset: 0;
  background: var(--red);
  border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  box-shadow: 0 0 14px rgba(225, 45, 45, 0.5);
}

/* Colonnes */
.fourche__col[data-side="left"]  { text-align: right; }
.fourche__col[data-side="right"] { text-align: left; }

.col-label {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red);
}
.col-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800; color: var(--white);
  margin-top: 10px; letter-spacing: -0.01em;
}
.col-copy {
  margin-top: 14px;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65; color: rgba(255, 255, 255, 0.62);
}
.fourche__col[data-side="left"] .col-copy { margin-left: auto; max-width: 44ch; }
.fourche__col[data-side="right"] .col-copy { max-width: 44ch; }

/* Stratégie / leviers */
.col-strat { margin-top: clamp(26px, 4vh, 44px); }
.strat-label {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}
.levers { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.fourche__col[data-side="left"] .levers { align-items: flex-end; }
.fourche__col[data-side="right"] .levers { align-items: flex-start; }
.lever-chip {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 12px 26px;
  background: var(--white);
  border-radius: 999px;
  color: #0b0d12;
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
  cursor: default;
}
.lever-chip strong { font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }

/* La précision : pill rouge cachée DERRIÈRE, qui ressort en biais au survol */
.lever-desc {
  position: absolute; top: 0;
  padding: 11px 22px;
  background: var(--red); color: var(--white);
  border-radius: 999px;
  font-size: 0.84em; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; z-index: -1;
  transform: translateY(4px) rotate(0deg) scale(0.92);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.fourche__col[data-side="left"] .lever-desc { right: 10px; transform-origin: right top; }
.fourche__col[data-side="right"] .lever-desc { left: 10px; transform-origin: left top; }

.lever-chip:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38); z-index: 5; }
.lever-chip:hover .lever-desc { opacity: 1; }
.fourche__col[data-side="left"] .lever-chip:hover .lever-desc {
  transform: translateY(78%) rotate(-4deg) scale(1);
}
.fourche__col[data-side="right"] .lever-chip:hover .lever-desc {
  transform: translateY(78%) rotate(4deg) scale(1);
}

.fourche__note {
  margin-top: clamp(36px, 6vh, 60px);
  text-align: center;
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   BLOC 5 — L'ENTONNOIR (fond sombre, continuité fourche)
   ========================================================= */
.funnel {
  position: relative;
  background: var(--white); /* coins bas gauche/droite blancs */
  min-height: 100svh;
  margin-top: -1px; /* chevauche la section précédente : pas de liseré à la jonction */
  padding: clamp(32px, 4.5vh, 56px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* Fond : triangle sombre, pointe en bas au centre */
.funnel__bgsvg {
  position: absolute; top: -2px; left: 0;
  width: 100%; height: calc(100% + 2px);
  z-index: 0; pointer-events: none;
}
/* .funnel__bgfill : dégradé défini dans le SVG (funnelGrad), pas de fill CSS */
.funnel__bgfill--m { display: none; } /* variante mobile du triangle */

.funnel__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; }
.funnel__head { text-align: center; max-width: 720px; margin: 0 auto; }

/* Scène : l'entonnoir dessiné au centre */
.funnel__scene {
  position: relative;
  width: min(590px, 88%);
  margin: clamp(8px, 1.5vh, 18px) auto 0;
  aspect-ratio: 800 / 560;
}
.funnel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.funnel__wall {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 12;
  stroke-linejoin: round; stroke-linecap: round;
}
.funnel__grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round;
}

/* Chips discours : filtres statiques au-dessus de la bouche (pills DA) */
.fchip {
  position: absolute;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 11px 22px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.fchip strong {
  color: #0b0d12; font-size: 0.9rem;
  font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
}
.fchip span { color: var(--red); font-size: 0.82rem; font-weight: 600; }

/* posées à cheval sur l'embouchure de l'entonnoir */
.fchip--a { left: 7%; top: 7%; transform: rotate(-2deg); }
.fchip--b { right: 7%; top: 7%; transform: rotate(2deg); }

/* Les utilisateurs qui tombent + les +1 de conversion */
.funnel__svg .drop {
  opacity: 0;
  filter: drop-shadow(0 0 7px currentColor); /* halo luciole, suit la couleur */
}
.d-inner { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.plus1 {
  fill: var(--red);
  font-family: var(--font);
  font-size: 24px; font-weight: 800;
  opacity: 0;
}

/* Label A/B au coeur de l'entonnoir */
.funnel__ab {
  position: absolute; left: 50%; top: 42%;
  transform: translateX(-50%);
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red);
}

/* Data analysis : pills-stickers blanches, posées en léger désordre */
.fmetrics {
  position: absolute; right: 2%; top: 30%;
  list-style: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fmetrics li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 20px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #0b0d12;
  white-space: nowrap;
}
.fmetrics li:nth-child(1) { transform: rotate(-2deg); }
.fmetrics li:nth-child(2) { transform: rotate(1.5deg); }
.fmetrics li:nth-child(3) { transform: rotate(-1.5deg); }
.fmetrics strong { color: var(--red); font-size: 1rem; }

/* =========================================================
   BLOC 6 — POUR ALLER PLUS LOIN (slider techniques)
   ========================================================= */
.more {
  background: var(--white);
  padding: clamp(70px, 11vh, 130px) var(--gutter);
}
.more__inner { position: relative; max-width: 1240px; margin: 0 auto; }

/* La volée : le groupe rouge arrivé du funnel, garé au-dessus des cartes */
.more__flock {
  position: absolute;
  left: 50%; top: 10px;
  width: 158px; height: 56px;
  transform: translateX(-50%);
  opacity: 0; /* révélée par l'animation d'arrivée */
  z-index: 3;
  pointer-events: none;
}
.flock-guy {
  position: absolute;
  width: 24px;
  color: var(--red);
  filter: drop-shadow(0 0 7px currentColor); /* même halo que dans le funnel */
}
.flock-guy svg { display: block; width: 100%; height: auto; animation: twinkle 1.8s ease-in-out infinite; }
.flock-guy:nth-child(even) svg { animation-delay: 0.9s; }
/* en vrac, comme à la sortie du funnel : serrés, penchés, qui se chevauchent
   (taille unique : c'est le même bonhomme qui descendra se poser sur la carte) */
.flock-guy:nth-child(1) { left: 0;     top: 8px;  transform: rotate(-8deg); }
.flock-guy:nth-child(2) { left: 17px;  top: 0;    transform: rotate(5deg); }
.flock-guy:nth-child(3) { left: 37px;  top: 10px; transform: rotate(-4deg); }
.flock-guy:nth-child(4) { left: 54px;  top: 2px;  transform: rotate(11deg); }
.flock-guy:nth-child(5) { left: 73px;  top: 9px;  transform: rotate(-13deg); }
.flock-guy:nth-child(6) { left: 91px;  top: 1px;  transform: rotate(6deg); }
.flock-guy:nth-child(7) { left: 109px; top: 7px;  transform: rotate(-5deg); }
.flock-guy:nth-child(8) { left: 128px; top: 3px;  transform: rotate(9deg); }

.more__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 14px;
}
.more__intro { max-width: 620px; }

.more__nav { display: flex; gap: 10px; flex-shrink: 0; }
.more__arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: #0e1424; color: var(--white);
  font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s;
}
.more__arrow:hover { background: var(--red); transform: translateY(-2px); }

/* Piste scrollable */
.more__track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* pleine largeur d'écran : les cartes des côtés se font couper par les bords.
     padding latéral = la carte active se cale pile au centre ;
     padding haut = l'espace du bonhomme perché ;
     padding bas = l'arrondi et l'ombre des cartes respirent (pas de coupe) */
  margin-inline: calc(50% - 50vw);
  padding: 44px calc(50vw - min(160px, 39vw)) 64px;
  scrollbar-width: none;
}
.more__track::-webkit-scrollbar { display: none; }

.more-card {
  position: relative;
  flex: 0 0 auto;
  width: min(320px, 78vw);
  scroll-snap-align: center;
  background: #0e1424;
  border-radius: 20px;
  padding: 28px 26px 30px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 36px rgba(14, 20, 36, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.more-card:hover { transform: translateY(-5px); }

/* Le client rouge perché sur sa carte : MÊME icône que funnel et volée
   (même taille, même halo, même scintillement) */
.card-guy {
  position: absolute; top: -27px;
  left: calc(50% - 12px);
  width: 24px;
  color: var(--red);
  opacity: 0;
  filter: drop-shadow(0 0 7px currentColor);
  z-index: 2;
  pointer-events: none;
}
.card-guy svg { display: block; width: 100%; height: auto; animation: twinkle 1.8s ease-in-out infinite; }
.more-card:nth-child(even) .card-guy svg { animation-delay: 0.7s; }

.more-card__tag {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(225, 45, 45, 0.14);
  color: #ff6b6b;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.more-card__name {
  color: var(--white);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
}
.more-card__desc {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem; line-height: 1.55;
}

/* =========================================================
   BLOC RÉALISATIONS — LES PREUVES (marquee de logos + cas)
   ========================================================= */
.cases {
  position: relative;
  background: #f5f7fb;
  padding: clamp(70px, 11vh, 130px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.cases__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }

/* Nappe de logos en filigrane */
.cases__logos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.logo-row {
  position: absolute; left: 0;
  display: flex; gap: 80px;
  white-space: nowrap;
  font-weight: 800; font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: 0.04em;
  color: #e2e7f2;
  will-change: transform;
}
.logo-row--a { top: 34%; animation: marquee 70s linear infinite; }
.logo-row--b { top: 64%; animation: marquee 85s linear infinite reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* En-tête + grille visuelle des cas */
.cases__head { max-width: 640px; margin-bottom: clamp(30px, 5vh, 50px); }

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  background: var(--white);
  border-radius: 20px;
  padding: 16px 16px 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px rgba(14, 20, 36, 0.1);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 54px rgba(14, 20, 36, 0.16);
}

/* Zone visuelle : le logo client (zone grise en attendant les fichiers) */
.case-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #e8ecf4;
  display: grid; place-items: center;
  overflow: hidden;
}
.case-card__media span {
  color: #b3bccf;
  font-weight: 800; font-size: 1.15rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.case-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14%;
  background: var(--white);
}

.case-card__tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(225, 45, 45, 0.1);
  color: var(--red);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.case-card__client {
  color: var(--ink);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
  padding-inline: 6px;
}
.case-card__mission {
  color: #5a6274;
  font-size: 0.95rem; line-height: 1.55;
  padding-inline: 6px;
}
.case-card__kpis {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 6px;
  padding-inline: 6px;
}
.case-card__kpis li {
  padding: 8px 16px;
  background: #0e1424;
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--white);
}

/* =========================================================
   BLOC PITCH — QUI JE SUIS
   ========================================================= */
.pitch {
  background: var(--white);
  padding: clamp(80px, 12vh, 150px) var(--gutter);
}
.pitch__grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.pitch__photo img {
  display: block; width: 100%; max-width: 360px; height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 24px 44px rgba(6, 22, 80, 0.22));
}
.pitch__sign {
  margin-top: 18px;
  font-weight: 800; color: var(--red);
}

/* =========================================================
   BLOC 7 — BANDEAU CTA (fond hero : cobalt + ondes)
   ========================================================= */
.cta {
  background: var(--white);
  padding: clamp(16px, 3vh, 36px) var(--gutter) clamp(80px, 12vh, 140px);
}
.cta__banner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(130% 100% at 20% 0%, #164fd8 0%, #0d47c8 55%, #0b3fb4 100%);
  padding: clamp(56px, 9vh, 104px) clamp(24px, 6vw, 80px);
  text-align: center;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(13, 71, 200, 0.25);
}
.cta__waves {
  position: absolute;
  top: 0; bottom: 0; left: -30px;
  width: calc(100% + 60px);
  height: 100%;
  z-index: 0; pointer-events: none;
  animation: waveSway 30s ease-in-out infinite;
}
.cta__content { position: relative; z-index: 1; }
.cta__content .h2 { max-width: 24ch; margin-inline: auto; }
.cta__btn {
  display: inline-flex; align-items: center;
  margin-top: clamp(26px, 4vh, 40px);
  padding: 18px 42px;
  background: var(--white);
  border-radius: 999px;
  color: #0b0d12;
  font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px rgba(6, 22, 80, 0.35);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, color 0.3s;
}
.cta__btn:hover {
  background: var(--red); color: var(--white);
  transform: translateY(-3px);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  background: #0e1424;
  padding: 44px var(--gutter);
  color: rgba(255, 255, 255, 0.55);
}
.footer__guy {
  position: absolute; top: -26px; left: 9%;
  width: 26px; color: var(--red);
  filter: drop-shadow(0 0 7px currentColor);
}
.footer__guy svg { display: block; width: 100%; height: auto; }
.footer__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer__brand img { display: block; height: 22px; width: auto; }
.footer__links { display: flex; gap: 26px; }
.footer__links a {
  color: var(--white); font-size: 0.95rem; font-weight: 600;
  transition: color 0.25s;
}
.footer__links a:hover { color: var(--red); }
.footer__legal { font-size: 0.85rem; }
.footer__legal a { color: inherit; text-decoration: underline; }

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

/* =========================================================
   RESPONSIVE (blocs récit)
   ========================================================= */
@media (max-width: 820px) {
  /* Ondes : on élargit la toile pour éviter l'écrasement horizontal
     (le viewBox 1440 est mappé sur ~3 écrans, recadré au centre) */
  .hero__waves, .next__waves {
    left: -100vw;
    width: calc(300vw + 60px);
  }

  .cible { min-height: auto; padding: 40px 0; }
  .cible__grid { grid-template-columns: 1fr; }
  .habitudes { min-height: auto; padding-bottom: 60px; flex-direction: column; align-items: stretch; }
  .day { position: static; pointer-events: auto; }
  .planet { display: none; }
  .day-list { display: block; margin-top: 24px; }

  /* L'entonnoir vit aussi sur mobile : triangle + pluie visibles */
  .funnel { min-height: auto; padding-bottom: 70px; }
  .funnel__bgfill { display: none; }        /* triangle pointu : desktop */
  .funnel__bgfill--m { display: block; }    /* triangle évasé : mobile */
  /* Scène pleine largeur (hors gutter) + boîte plus haute que le viewBox :
     avec preserveAspectRatio=slice, le SVG est recadré → entonnoir plus gros */
  .funnel__scene {
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    aspect-ratio: 10 / 9;
    margin-top: 168px; /* place aux deux pills empilées + air sous le texte */
    margin-bottom: 108px;
  }
  /* Les deux discours : empilés et centrés au-dessus de l'embouchure,
     en taille lisible (côte à côte ils ne tiennent pas sur 375px) */
  .fchip { padding: 13px 24px; }
  .fchip strong { font-size: 0.95rem; }
  .fchip--a { left: 50%; right: auto; top: -116px; transform: translateX(-50%) rotate(-2deg); }
  .fchip--b { left: 50%; right: auto; top: -58px; transform: translateX(-50%) rotate(2deg); }
  /* A/B TEST : pill sombre pour rester lisible par-dessus la foule */
  .funnel__ab {
    font-size: 16px; letter-spacing: 0.16em;
    background: rgba(11, 13, 18, 0.6);
    padding: 10px 20px; border-radius: 999px;
  }
  .fmetrics li { padding: 12px 22px; font-size: 0.95rem; }
  .fmetrics strong { font-size: 1.15rem; }
  /* les stats passent SOUS la scène, en rangée centrée */
  .fmetrics {
    position: absolute; top: 100%; right: auto; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 18px;
  }

  .more__head { flex-direction: column; align-items: flex-start; }
  .more { padding-bottom: 44px; }

  /* Bandeau CTA : resserré (les clamp desktop laissent trop de vide autour) */
  .cta { padding: 12px var(--gutter) 52px; }
  .cta__banner { padding: 44px 24px; }
  .card-guy { opacity: 1; } /* mobile : bonhommes posés d'office, sans séquence */
  .cases__grid { grid-template-columns: 1fr; }
  .pitch__grid { grid-template-columns: 1fr; }
  .pitch__photo img { max-width: 260px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }

  .fourche { min-height: auto; }
  .fourche__split { grid-template-columns: 1fr; gap: 40px; }
  .fourche__line { display: none; }
  .fourche__col[data-side="left"] { text-align: left; }
  .fourche__col[data-side="left"] .col-copy { margin-left: 0; }
  .fourche__col[data-side="left"] .levers { align-items: flex-start; }

  /* Tactile : la précision des leviers est visible d'office, dans la pill */
  .lever-chip { white-space: normal; flex-wrap: wrap; }
  .lever-desc {
    position: static;
    opacity: 1; transform: none;
    z-index: 0; /* sinon le flex item passe DERRIÈRE le fond de la pill */
    margin-left: 8px; padding: 5px 12px;
    font-size: 0.72rem;
  }
}

@media (max-width: 820px) {
  /* Un seul écran : titre + pill + photo groupés et centrés dans 100svh
     (sinon .hero__center garde son 100svh desktop et la photo passe
     sous le pli, avec un grand vide bleu au milieu) */
  .hero { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 88px var(--gutter) 36px; }
  .hero__center { min-height: 0; padding: 0; }
  .hero__photo { position: relative; top: auto; right: auto; transform: none; margin: 26px auto 0; width: min(46vw, 190px); }
  .hero__photo.anim { transform: translateY(22px); animation: rise 1s cubic-bezier(.2,.8,.2,1) .3s forwards; }
  .hero__connector { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__waves { animation: none; }
  .d-inner { animation: none; }
  .anim { opacity: 1; transform: none; animation: none; }
  .hero__photo.anim { transform: translateY(-50%); }
}