/* ════════════════════════════════════════════════════════════════════
   In Z Web — ACCUEIL « Le Z comme architecture »
   Mise en page éditoriale en zig-zag, ligne or qui se dessine au scroll.
   Chargé uniquement sur la page d'accueil. Scopé sous .zflow.
   ════════════════════════════════════════════════════════════════════ */

/* ── Conteneur global du flux post-hero ───────────────────────────── */
.zflow {
  position: relative;
  /* overflow-x: clip → empêche le débordement horizontal des numéros géants
     SANS casser le position:sticky (contrairement à overflow:hidden). */
  overflow-x: clip;
  background:
    radial-gradient(1200px 600px at 80% -5%, rgba(212,145,10,.06), transparent 60%),
    radial-gradient(1000px 500px at -10% 30%, rgba(14,158,153,.05), transparent 55%),
    var(--bg);
}

/* ── La colonne vertébrale en Z (SVG dessiné au scroll) ───────────── */
.z-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                  /* DERRIÈRE le contenu : ne couvre jamais textes/cartes */
  pointer-events: none;
}
.z-spine path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Ligne or SANS filtre (perf). Comme elle passe derrière le contenu sur
   fond clair : or franc pour rester lisible. halo = trait large translucide,
   cœur = trait fin. Aucun drop-shadow → repaint léger au scroll. */
.z-spine .z-halo { stroke: rgba(212,145,10,.20); stroke-width: 7; }
.z-spine .z-draw { stroke: #c9830a; stroke-width: 2.2; }
/* Rail fantôme (trajectoire complète, à peine visible) */
.z-spine .z-track { stroke: rgba(212,145,10,.13); stroke-width: 1.3; }

/* Les sections passent AU-DESSUS de la spine */
.zflow > section { position: relative; z-index: 1; }

/* La spine est DERRIÈRE le contenu : on rend les sections claires
   transparentes pour qu'elle se devine derrière (dans les espaces, autour
   des titres), sans jamais recouvrir textes ni cartes — ceux-ci ont leur
   propre fond opaque. Les sections sombres (stats, process, services)
   restent opaques : la ligne s'y glisse derrière et réapparaît plus bas. */
.zflow .approach-z,
.zflow .portfolio,
.zflow .pricing,
.zflow .testimonials,
.zflow .faq,
.zflow .cta-section { background: transparent; }

/* ── Rythme éditorial : numéro géant + décalage alterné ───────────── */
.zsection {
  position: relative;
  padding: clamp(72px, 11vh, 150px) 0;
}

/* Grand numéro de section, façon revue (Bebas, or translucide) */
.zsection[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: clamp(24px, 6vh, 70px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 22vw, 320px);
  line-height: .8;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(212,145,10,.16);
  text-stroke: 1.5px rgba(212,145,10,.16);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.zsection--l[data-num]::before { left: clamp(8px, 4vw, 64px); }
.zsection--r[data-num]::before { right: clamp(8px, 4vw, 64px); }

/* Décalage du header vers le côté du rail → lecture en zig-zag */
.zsection .container { position: relative; z-index: 1; }
.zsection .section-header { max-width: 720px; }
.zsection--l .section-header { margin-left: 0;    margin-right: auto; text-align: left; }
.zsection--r .section-header { margin-left: auto;  margin-right: 0;    text-align: right; }

/* Le tag de section gagne un petit trait or animé */
.zsection .section-tag { position: relative; }
.zsection--l .section-header .section-title em,
.zsection--r .section-header .section-title em { font-style: italic; }

/* Aligne le « desc » comme le header */
.zsection--r .section-header .section-desc { margin-left: auto; }

/* ── Surcouche typographique éditoriale ───────────────────────────── */
.zflow .section-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .5px;
  line-height: .98;
  font-size: clamp(40px, 5.5vw, 76px);
}
.zflow .section-tag {
  letter-spacing: .2em;
}

/* ════════════════════════════════════════════════════════════════════
   STATS — bande pleine largeur, gros chiffres Bebas
   ════════════════════════════════════════════════════════════════════ */
.zflow .stats-bar {
  background: linear-gradient(180deg, var(--bg-navy), var(--bg-navy-2));
  border-block: 1px solid rgba(212,145,10,.18);
  padding: clamp(48px,7vh,84px) 0;
}
.zflow .stats-bar .stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 104px);
  line-height: .9;
  color: #fff;
}
.zflow .stats-bar .stat-number .counter { color: var(--accent); }
.zflow .stats-bar .stat-label { color: rgba(255,255,255,.6); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.zflow .stats-bar .stat-item { transition: transform .4s cubic-bezier(.4,0,.2,1); }
.zflow .stats-bar .stat-item:hover { transform: translateY(-6px); }

/* ════════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS communes
   ════════════════════════════════════════════════════════════════════ */
/* Cartes services : élévation + liseré or au survol */
.zflow .service-card,
.zflow .pricing-card,
.zflow .portfolio-card,
.zflow .testimonial-card {
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s, border-color .45s;
}
.zflow .service-card:hover { transform: translateY(-8px); }
.zflow .service-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); }
.zflow .service-icon { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }

/* Lien « En savoir plus » : la flèche glisse */
.zflow .service-link i { transition: transform .35s ease; }
.zflow .service-card:hover .service-link i { transform: translateX(6px); }

/* Portfolio : léger zoom de la capture au survol */
.zflow .portfolio-img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.zflow .portfolio-card:hover .portfolio-img { transform: scale(1.04); }

/* Fonds des captures portfolio (sortis des styles inline → pas d'erreur linter,
   et l'URL est réécrite par collectstatic en production). */
/* WebP via image-set (repli JPEG sur la ligne précédente pour vieux navigateurs) */
.zflow .portfolio-img--kidiland,
.zflow .portfolio-img--immo,
.zflow .portfolio-img--barbier { background-position: center; background-size: cover; background-repeat: no-repeat; }
.zflow .portfolio-img--kidiland {
  background-color: #1E1B4B;
  background-image: url("../img/portfolio/kidiland.f00c611b2931.jpg");
  background-image: image-set(url("../img/portfolio/kidiland.a4bb4f5eb677.webp") type("image/webp"), url("../img/portfolio/kidiland.f00c611b2931.jpg") type("image/jpeg"));
}
.zflow .portfolio-img--immo {
  background-color: #1a1200;
  background-image: url("../img/portfolio/immo.4d55a13ed19c.jpg");
  background-image: image-set(url("../img/portfolio/immo.1a606f9ad4b4.webp") type("image/webp"), url("../img/portfolio/immo.4d55a13ed19c.jpg") type("image/jpeg"));
}
.zflow .portfolio-img--barbier {
  background-color: #0d1b2a;
  background-image: url("../img/portfolio/barbier.7aba31835860.jpg");
  background-image: image-set(url("../img/portfolio/barbier.6691c1087827.webp") type("image/webp"), url("../img/portfolio/barbier.7aba31835860.jpg") type("image/jpeg"));
}

/* Process : chaque étape APPARAÎT une à une au scroll, avec son numéro orange.
   L'état caché ne s'active que si le JS a posé .js-reveal sur le conteneur
   → sans JavaScript, toutes les étapes restent visibles (repli sûr). */
.zflow .process-steps.js-reveal .process-step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.zflow .process-steps.js-reveal .process-step.shown {
  opacity: 1;
  transform: translateY(0);
}
/* Numéro orange une fois l'étape apparue (ou au survol) */
.zflow .step-number {
  transition: background .4s, color .4s, box-shadow .4s;
  border-radius: 10px;
}
.zflow .process-step.shown .step-number,
.zflow .process-step:hover .step-number {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(212,145,10,.18);
}

/* ── Process PINNÉ : la section se fige le temps que les 4 étapes
   apparaissent, puis le scroll reprend ──────────────────────────────── */
.zflow .process-pin {
  height: 200vh;        /* hauteur de défilement qui « consomme » le pin */
  padding: 0;
}
.zflow .process-pin .process-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vh, 90px) 0;
}
/* Le numéro géant suit le bloc figé (au lieu de rester en haut des 200vh) */
.zflow .process-pin[data-num]::before { content: none; }
.zflow .process-pin .process-sticky[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: clamp(20px, 6vh, 64px);
  right: clamp(8px, 4vw, 64px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(110px, 20vw, 300px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(212,145,10,.16);
  text-stroke: 1.5px rgba(212,145,10,.16);
  z-index: 0; pointer-events: none; user-select: none;
}
.zflow .process-pin .process-sticky .container { position: relative; z-index: 1; }

/* Mobile : pas de pin (la pile verticale défile normalement) */
@media (max-width: 768px) {
  .zflow .process-pin { height: auto; padding: clamp(72px,11vh,150px) 0; }
  .zflow .process-pin .process-sticky { position: static; min-height: 0; padding: 0; display: block; }
}

/* ── Reveal enrichi : translation + flou léger ────────────────────── */
/* (le flou de reveal a été retiré : il forçait une couche + un calcul de blur
   sur chaque élément, coûteux surtout sur mobile. L'apparition opacité +
   translation de .reveal-up suffit.) */

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — la spine se simplifie, les décalages s'annulent
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .zsection[data-num]::before { font-size: clamp(90px, 26vw, 150px); opacity: .7; }
  .zsection--l .section-header,
  .zsection--r .section-header { margin: 0 auto; text-align: center; }
  .zsection--r .section-header .section-desc { margin: 0 auto; }
  /* Sur mobile la spine devient un simple fil vertical à gauche */
  .z-spine { left: 16px; width: 2px; }
  .z-spine path { stroke-width: 2; }
}
@media (max-width: 560px) {
  .z-spine { display: none; }
  .zsection[data-num]::before { font-size: 88px; top: 12px; opacity: .5; }
}

/* ── Respect de prefers-reduced-motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .zflow .service-card:hover,
  .zflow .process-step:hover,
  .zflow .stats-bar .stat-item:hover,
  .zflow .portfolio-card:hover .portfolio-img { transform: none; }
  /* Pas d'apparition animée : les étapes restent visibles d'emblée */
  .zflow .process-steps.js-reveal .process-step { opacity: 1; transform: none; transition: none; }
  .z-spine path { transition: none; }
  .svc-aura::before, .svc-aura::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SECTION « APPROCHE » — manifeste éditorial
   ════════════════════════════════════════════════════════════════════ */
.approach-z {
  position: relative; z-index: 1;
  padding: clamp(96px, 15vh, 200px) 0;
  text-align: center;
  background: var(--bg);
}
.approach-z .section-tag { display: inline-block; margin-bottom: 24px; }
.approach-z-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.9vw, 52px);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--text);
  max-width: 980px;
  margin: 0 auto;
}
.approach-z-title em { font-style: normal; font-weight: 600; color: var(--accent); }
.approach-z-lead {
  max-width: 600px; margin: 30px auto 0;
  color: var(--text-muted);
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION SERVICES — cartes empilées qui s'envolent (scroll piné)
   ════════════════════════════════════════════════════════════════════ */
.svc-fly { position: relative; z-index: 1; height: 360vh; background: #0a1320; isolation: isolate; }

/* Fond immersif : halos dérivants + grille estompée */
.svc-aura { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* Glow obtenu uniquement par dégradé radial (déjà flou) → PAS de filter:blur,
   qui allouait une grande couche floutée coûteuse en mémoire. */
.svc-aura::before, .svc-aura::after {
  content: ''; position: absolute; border-radius: 50%; opacity: .55;
}
.svc-aura::before {
  width: 60vw; height: 60vw; left: -12vw; top: -10vw;
  background: radial-gradient(circle, rgba(212,145,10,.30), transparent 70%);
}
.svc-aura::after {
  width: 55vw; height: 55vw; right: -14vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(14,158,153,.20), transparent 70%);
}

.svc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1; }
.svc-sticky::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 25%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 46%, #000 25%, transparent 72%);
  pointer-events: none;
}

.svc-head { position: absolute; top: clamp(54px, 9vh, 100px); left: 0; right: 0; text-align: center; z-index: 2; padding: 0 20px; }
.svc-head .section-tag { background: none; color: #f3c265; }
.svc-head .section-title { color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 5vw, 70px); letter-spacing: .5px; margin-top: 12px; line-height: 1; }
.svc-head .section-title em { color: var(--accent); font-style: italic; }
.svc-sub { color: rgba(255,255,255,.6); max-width: 520px; margin: 14px auto 0; font-size: 15px; line-height: 1.6; }
.svc-counter { margin-top: 16px; font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 3px; color: rgba(255,255,255,.4); }
.svc-counter-now { color: var(--accent); }

.svc-deck { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.svc-card {
  position: absolute; left: 50%; top: 50%;
  width: min(340px, 82vw);
  padding: 26px 26px 22px;
  border-radius: 18px;
  background: #16243a;          /* opaque → pas de backdrop-filter (coûteux au scroll) */
  border: 1px solid rgba(212,145,10,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  color: #fff;
  transform-origin: center center;
  will-change: transform;
  pointer-events: auto;
}
.svc-card--accent { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 70px rgba(0,0,0,.55); }
.svc-card-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, #e8a020, #d4910a); margin-bottom: 16px; box-shadow: 0 8px 22px rgba(212,145,10,.4); }
.svc-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.svc-card p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.68); }
.svc-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.svc-card-price { font-family: 'Bebas Neue', sans-serif; font-size: 23px; color: var(--accent); letter-spacing: 1px; }
.svc-card-link { font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; }
.svc-card-link i { transition: transform .3s ease; margin-left: 4px; }
.svc-card-link:hover i { transform: translateX(5px); }

/* Fallback : sous 768px, pile verticale classique (pas d'animation pinée) */
@media (max-width: 768px) {
  .svc-fly { height: auto; }
  .svc-sticky { position: static; height: auto; padding: 60px 0 30px; }
  .svc-sticky::before { display: none; }
  .svc-head { position: static; margin-bottom: 34px; }
  .svc-counter { display: none; }
  .svc-deck { position: static; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 20px; }
  .svc-card { position: static; transform: none !important; width: min(440px, 92vw); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   TARIFS (home) — 3 cartes simplifiées + lien « voir tout »
   ════════════════════════════════════════════════════════════════════ */
.zflow .pricing-card { display: flex; flex-direction: column; }
.pricing-pitch {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 26px;
  flex: 1;
}
.pricing-seeall,
.testimonials-seeall { text-align: center; margin-top: 40px; }
.pricing-seeall .btn i,
.testimonials-seeall .btn i { transition: transform .3s ease; margin-left: 6px; }
.pricing-seeall .btn:hover i,
.testimonials-seeall .btn:hover i { transform: translateX(6px); }

/* ════════════════════════════════════════════════════════════════════
   TÉMOIGNAGES — état vide (« soyez le premier à laisser un avis »)
   ════════════════════════════════════════════════════════════════════ */
.testimonials-empty {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(40px, 6vw, 64px) 32px;
  box-shadow: var(--shadow-sm);
}
.testimonials-empty-icon {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; color: #fff;
  background: linear-gradient(135deg, #e8a020, #d4910a);
  box-shadow: 0 10px 26px rgba(212,145,10,.4);
}
.testimonials-empty h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 12px;
}
.testimonials-empty p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 440px;
  margin: 0 auto 28px;
}

/* Bandeau « pas assez d'avis pour être crédibles ? » (quand des avis s'affichent) */
.testimonials-credible {
  margin-top: 48px;
  text-align: center;
}
.testimonials-credible p {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .03em;
  color: var(--text);
  margin: 0 auto 22px;
  max-width: 640px;
}
.testimonials-credible-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.testimonials-credible-actions .btn i.fa-arrow-right { transition: transform .3s ease; margin-left: 6px; }
.testimonials-credible-actions .btn:hover i.fa-arrow-right { transform: translateX(6px); }

/* ════════════════════════════════════════════════════════════════════
   PUNCHLINE — phrase d'accroche juste après le hero
   ════════════════════════════════════════════════════════════════════ */
.punchline {
  position: relative; z-index: 1;
  padding: clamp(72px, 12vh, 150px) 0;
  text-align: center;
}
.punchline .container { max-width: 960px; }

/* Petit intitulé doré au-dessus de la phrase */
.punchline-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
  position: relative;
}
.punchline-kicker::before,
.punchline-kicker::after {
  content: ''; position: absolute; top: 50%;
  width: clamp(18px, 5vw, 48px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,145,10,.6));
}
.punchline-kicker::before { right: calc(100% + 16px); transform: scaleX(-1); }
.punchline-kicker::after  { left:  calc(100% + 16px); }

/* La phrase, avec un grand guillemet décoratif derrière */
.punchline-text {
  position: relative; z-index: 0;
  margin: 0; border: 0; padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(25px, 4.4vw, 50px);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--text);
}
.punchline-text::before {
  content: '\201C';                       /* “ décoratif */
  position: absolute; z-index: -1;
  top: -.66em; left: 50%; transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(150px, 22vw, 280px); line-height: 1;
  color: rgba(212,145,10,.10);
  pointer-events: none; user-select: none;
}
.punchline-text em {
  font-style: normal; font-weight: 700; color: var(--accent);
  /* surlignage doré sous « son site web » */
  background-image: linear-gradient(transparent 60%, rgba(212,145,10,.22) 0);
  padding: 0 .04em;
}
/* Filet doré centré sous la phrase */
.punchline::after {
  content: ''; display: block;
  width: 70px; height: 3px; margin: clamp(28px,4vh,40px) auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

/* ── Titre du bandeau de chiffres : « In Z Web, c'est : » ───────────── */
.zflow .stats-bar .stats-title {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  margin-bottom: clamp(30px, 5vh, 54px);
}
.zflow .stats-bar .stats-title span { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   INVITATION → flèche qui se dessine vers la section « approche »
   ════════════════════════════════════════════════════════════════════ */
.lead-down {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(64px, 10vh, 120px) 0 clamp(40px, 7vh, 80px);
}
.lead-down-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 clamp(22px, 4vh, 38px);
}
.lead-down-text em { font-style: normal; font-weight: 700; color: var(--accent); }

.lead-down-arrow {
  display: inline-flex;
  width: clamp(34px, 5vw, 46px);
  color: var(--accent);
}
.lead-down-arrow .arrow-svg { width: 100%; height: auto; display: block; }
/* Tracé : le trait est masqué puis se dessine quand la section devient visible */
.lead-down-arrow .arrow-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s ease .15s;
}
.lead-down.visible .arrow-draw { stroke-dashoffset: 0; }
/* Petit rebond invitant au scroll, une fois la flèche dessinée */
.lead-down.visible .lead-down-arrow { animation: leadBob 1.9s ease-in-out 1.25s infinite; }
@keyframes leadBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@media (prefers-reduced-motion: reduce) {
  .lead-down-arrow .arrow-draw { transition: none; stroke-dashoffset: 0; }
  .lead-down.visible .lead-down-arrow { animation: none; }
}