/* ============================================================================
   MonHaras — Landing éleveurs / naisseurs (/decouvrir-eleveurs)
   Feuille de style autonome. Préfixe : elv-
   Palette nuit + or reprise de la page écuries, infléchie vers le chaud
   (vert bronze + ambre) pour éloigner la page du bleu spatial de sa sœur.

   Design fourni par Claude Design. Adaptations d'intégration au gabarit du
   site (repérées par « RACCORD ») :
     - l'en-tête du site est sticky sur 70px (--header-h) : les scènes
       épinglées et le héros s'en décalent, sinon le contenu passe dessous ;
     - la barre de progression passe au-dessus de l'en-tête (z-index) ;
     - raccords de fond et de pied de page via body.elv-body.
   ========================================================================= */

.elv {
  /* Nuit (identique à la page écuries) */
  --pn0: #0B1426;
  --pn1: #101C36;
  --pn2: #16233E;
  --pn3: #1B2A4A;
  --pn4: #26406E;
  /* Or */
  --gold: #C8973F;
  --pgold: #E2B45C;
  --pglow: rgba(226, 180, 92, .45);
  /* Filets et verre */
  --pline: rgba(255, 255, 255, .10);
  --pglass: rgba(255, 255, 255, .06);
  /* Accents secondaires propres à la page éleveurs */
  --moss: #2F5A46;        /* vert profond bronze */
  --moss-lt: #6FA184;
  --amber: #E08A3C;       /* ambre chaud */
  /* Texte */
  --tx: #EAF0FA;
  --tx2: rgba(234, 240, 250, .82);
  --tx3: rgba(234, 240, 250, .62);

  position: relative;
  background: var(--pn0);
  color: var(--tx);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.elv *, .elv *::before, .elv *::after { box-sizing: border-box; }
.elv p, .elv h1, .elv h2, .elv h3, .elv ul, .elv ol, .elv figure, .elv figcaption { margin: 0; padding: 0; }
.elv ul, .elv ol { list-style: none; }

.elv-wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Type ---------- */
.elv-h1 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 6.4vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.elv-h1 em {
  font-style: italic;
  color: var(--pgold);
  text-shadow: 0 0 34px var(--pglow);
}
.elv-h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.elv-kicker {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--pgold);
}
.elv-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--tx2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- Focus visible partout ---------- */
.elv a:focus-visible,
.elv button:focus-visible,
.elv [tabindex]:focus-visible {
  outline: 2px solid var(--pgold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Barre de progression ----------
   RACCORD : z-index 300 (l'en-tête du site est à 100) — même choix que la
   page écuries, la barre reste visible par-dessus l'en-tête. */
.elv-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  height: 3px; background: rgba(255, 255, 255, .06);
}
.elv-progress__bar {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--moss-lt), var(--gold) 45%, var(--pgold));
  box-shadow: 0 0 14px var(--pglow);
}

/* ---------- Révélations ---------- */
.elv-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.elv-rv.is-in { opacity: 1; transform: none; }

/* ---------- Nappes aurora chaudes ---------- */
.elv-aurora {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none;
  will-change: transform;
}
.elv-aurora--gold { width: 46vw; height: 34vw; left: -8vw; top: -6vw; background: radial-gradient(circle, rgba(226,180,92,.55), transparent 70%); animation: elv-drift1 26s ease-in-out infinite; }
.elv-aurora--moss { width: 40vw; height: 40vw; right: -10vw; top: 12vh; background: radial-gradient(circle, rgba(47,90,70,.85), transparent 70%); animation: elv-drift2 32s ease-in-out infinite; }
.elv-aurora--amber { width: 30vw; height: 22vw; left: 30vw; bottom: -8vw; background: radial-gradient(circle, rgba(224,138,60,.42), transparent 70%); animation: elv-drift3 38s ease-in-out infinite; }

@keyframes elv-drift1 { 50% { transform: translate3d(8vw, 5vh, 0) scale(1.15); } }
@keyframes elv-drift2 { 50% { transform: translate3d(-7vw, 8vh, 0) scale(1.1); } }
@keyframes elv-drift3 { 50% { transform: translate3d(6vw, -6vh, 0) scale(1.2); } }

/* ============================== HÉROS ============================== */
/* RACCORD : on retranche la hauteur de l'en-tête sticky du site. */
.elv-hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--header-h, 70px));
  display: flex; align-items: center;
  padding: clamp(6rem, 14vh, 10rem) 0 clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}
.elv-hero__decor { position: absolute; inset: 0; z-index: -1; }
/* Rai de lumière oblique */
.elv-shaft {
  position: absolute; top: -20%; left: 8%; width: 46vw; height: 150%;
  background: linear-gradient(100deg, transparent, rgba(226,180,92,.10) 45%, transparent 62%);
  transform: rotate(-8deg); mix-blend-mode: screen;
}
.elv-pollen { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Filigrane double hélice */
.elv-helix {
  position: absolute; right: 4vw; top: -10%; height: 130%; width: clamp(110px, 14vw, 230px);
  opacity: .5;
}
.elv-helix__g { animation: elv-helixslide 24s linear infinite; }
.elv-helix__strand { fill: none; stroke: rgba(226,180,92,.55); stroke-width: 1.1; }
.elv-helix__strand--b { stroke: rgba(111,161,132,.5); }
.elv-helix__rungs path { stroke: rgba(226,180,92,.22); stroke-width: .8; }
@keyframes elv-helixslide { to { transform: translateY(-225px); } }

.elv-hero__inner { position: relative; display: grid; gap: 1.4rem; justify-items: start; }
.elv-hero__inner .elv-lead { margin-top: .2rem; }

/* Boutons */
.elv-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.elv-btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .9rem 1.6rem;
  font: 600 .95rem/1 Inter, system-ui, sans-serif; letter-spacing: .01em;
  text-decoration: none; border-radius: 999px; white-space: nowrap;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.elv-btn--gold {
  color: #16130C;
  background: linear-gradient(135deg, var(--pgold), var(--gold));
  box-shadow: 0 10px 30px rgba(200,151,63,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.elv-btn--gold:hover { color: #16130C; box-shadow: 0 14px 40px rgba(226,180,92,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.elv-btn--ghost {
  color: var(--tx);
  background: var(--pglass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.elv-btn--ghost:hover { color: var(--tx); background: rgba(255,255,255,.11); border-color: rgba(226,180,92,.5); }

/* Puces de réassurance */
.elv-assur { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: var(--tx3); font-size: .9rem; }
.elv-assur li { display: flex; align-items: center; gap: .5rem; }
.elv-assur li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pgold); box-shadow: 0 0 10px var(--pglow);
}

.elv-scrollhint {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx3);
}
.elv-scrollhint span {
  display: block; width: 1px; height: 30px;
  background: linear-gradient(var(--pgold), transparent);
  animation: elv-hint 2.4s ease-in-out infinite;
}
@keyframes elv-hint { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================== MARQUEE ============================== */
.elv-marquee {
  border-top: 1px solid var(--pline); border-bottom: 1px solid var(--pline);
  background: linear-gradient(180deg, var(--pn1), var(--pn0));
  overflow: hidden; padding: .9rem 0;
}
.elv-marquee__track {
  display: flex; gap: 1.6rem; width: max-content;
  will-change: transform;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; color: var(--tx3);
}
.elv-marquee__track i { color: var(--pgold); font-style: normal; }

/* ============================== SCÈNES ÉPINGLÉES ==============================
   RACCORD : le bloc épinglé se cale sous l'en-tête sticky du site (70px) et
   sa hauteur est réduite d'autant, sinon son haut disparaît dessous. */
.elv-scene { position: relative; }
.elv-scene__sticky {
  position: sticky; top: var(--header-h, 70px);
  height: calc(100svh - var(--header-h, 70px));
  display: flex; align-items: center;
  overflow: hidden;
}
/* Longueur de défilement des scènes épinglées.
   Valeurs d'origine : 380/340/300vh, soit 10 écrans rien que pour trois scènes
   (page à 14 écrans au total) — épuisant plutôt que satisfaisant sur ordinateur.
   Ramené à ~2 écrans par scène : l'animation garde sa progression, mais on
   atteint le bas de la page en deux fois moins de gestes. */
.elv-scene--tree { height: 200vh; }
.elv-scene--ring { height: 170vh; }
.elv-scene::before {
  /* filet dégradé de séparation */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pline) 20%, var(--pline) 80%, transparent);
}

/* ---------- Scène 1 : arbre de lignée ---------- */
.elv-tree {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; padding: 4rem 0;
}
.elv-tree__copy { display: grid; gap: 1rem; }
.elv-steps { display: grid; gap: .55rem; margin-top: .6rem; counter-reset: elv-s; }
.elv-steps li {
  counter-increment: elv-s;
  position: relative; padding: .85rem 1rem .85rem 3rem;
  border: 1px solid var(--pline); border-radius: 14px;
  /* Fond opaque : ces quatre blocs vivent dans une scène animée au défilement,
     où un backdrop-filter est recomposé à chaque image (source de saccades). */
  background: #16223B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--tx3); font-size: .93rem;
  opacity: .45; transform: translateX(-6px);
  transition: opacity .45s ease, transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.elv-steps li strong { display: block; color: var(--tx); font-weight: 600; }
.elv-steps li::before {
  content: counter(elv-s, decimal-leading-zero);
  position: absolute; left: 1rem; top: .95rem;
  font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .1em; color: var(--pgold);
}
.elv-steps li.is-on {
  opacity: 1; transform: none;
  border-color: rgba(226,180,92,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 34px rgba(226,180,92,.12);
}

.elv-tree__graph { display: grid; gap: .9rem; }
.elv-tree__graph-scroll { overflow: visible; }
.elv-tree__graph-scroll svg { width: 100%; height: auto; overflow: visible; display: block; }
.elv-tree__graph figcaption { color: var(--tx3); font-size: .85rem; max-width: 46ch; }
/* Balise de balayage : masquée par défaut, réservée au mode défilement mobile
   défini plus bas (elle n'a de sens que quand le dessin dépasse l'écran). */
.elv-tree__hint { display: none; }

.elv-tree__links path {
  stroke: var(--pgold); stroke-width: 1.6; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(226,180,92,.55));
}
.elv-node { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .5s ease; }
.elv-node.is-on { opacity: 1; }
.elv-node circle {
  fill: rgba(255,255,255,.05); stroke: var(--pline); stroke-width: 1;
}
.elv-node__halo { fill: none; stroke: rgba(226,180,92,.55); }
.elv-node.is-on .elv-node__halo { animation: elv-pulse 3.2s ease-out infinite; }
.elv-node--focus circle:first-child { fill: rgba(226,180,92,.14); stroke: rgba(226,180,92,.6); }
.elv-node--sm .elv-node__halo { stroke: rgba(111,161,132,.6); }
.elv-node text {
  fill: var(--tx); font: 600 13px Inter, sans-serif; text-anchor: middle;
}
.elv-node__sub { fill: var(--tx3); font-weight: 400; font-size: 11px; }
@keyframes elv-pulse {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ============================== LES 4 PILIERS (grille) ==============================
   Remplace l'ancien rail horizontal détourné : même contenu, une hauteur d'écran
   au lieu de 340vh, et une vraie animation d'entrée décalée (--rd sur .elv-rv). */
.elv-pillars { padding: clamp(4rem, 10vh, 7rem) 0; border-top: 1px solid var(--pline); }
.elv-pillars .elv-kicker { margin-bottom: .6rem; }
.elv-pillars__grid {
  margin-top: 2.4rem;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.elv-pillar {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--pline);
  /* Fond opaque plutôt que verre dépoli : `backdrop-filter` sur autant de
     surfaces faisait tomber le défilement en saccades (18 plans floutés
     recomposés à chaque image). Le rendu visuel est équivalent sur ce fond. */
  background: linear-gradient(158deg, #17233C, #121C33);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.28);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
/* Numéro : petite pastille en tête de carte.
   Il était auparavant en très grand filigrane calé à `top: -.35em` dans un
   conteneur `overflow: hidden` — il ressortait donc tronqué net en haut de
   chaque carte, et chevauchait le titre. Un repère discret et entièrement
   contenu vaut mieux qu'un effet qui se coupe. */
.elv-pillar__num {
  font: 600 .72rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .22em; color: var(--pgold);
  opacity: .85; margin-bottom: .9rem;
}
.elv-pillar h3 {
  font-family: Fraunces, Georgia, serif; font-size: 1.34rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.01em;
  /* Hauteur réservée pour deux lignes : sans elle, « Suivi de reproduction »
     passe sur deux lignes et décale tout le corps de cette carte par rapport
     aux trois autres — l'alignement de la rangée partait de travers. */
  min-height: 2.4em;
}
/* Filet doré sous le titre, qui s'étire à l'entrée */
.elv-pillar h3::after {
  content: ""; display: block; height: 2px; width: 34px; margin-top: .7rem;
  border-radius: 2px; background: linear-gradient(90deg, var(--pgold), transparent);
  transform: scaleX(.25); transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1) .2s;
}
.elv-pillar.is-in h3::after { transform: scaleX(1); }
.elv-pillar > p { color: var(--tx2); font-size: .93rem; line-height: 1.6; margin-top: .85rem; }
.elv-pillar__arg {
  /* Poussé en bas : les arguments s'alignent d'une carte à l'autre, quelle que
     soit la longueur du paragraphe qui précède. */
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--pline);
  color: var(--tx3); font-size: .86rem; line-height: 1.5; font-style: italic;
}
.elv-pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(226,180,92,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px rgba(0,0,0,.42), 0 0 40px rgba(226,180,92,.10);
}
/* Le pilier différenciant (reproduction) porte l'accent */
.elv-pillar--gold {
  background: linear-gradient(158deg, rgba(226,180,92,.14), rgba(47,90,70,.13) 55%, #131E36);
  border-color: rgba(226,180,92,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.32), 0 0 34px rgba(226,180,92,.09);
}

/* Bordure dégradée des cartes de fonctionnalités / confiance */
.elv-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(226,180,92,.55), rgba(255,255,255,.06) 45%, rgba(111,161,132,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Spotlight au survol */
.elv-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--sx) var(--sy), rgba(226,180,92,.16), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.elv-card:hover::after { opacity: 1; }

/* ============================== CHIFFRES ============================== */
.elv-stats { padding: clamp(4rem, 10vh, 7rem) 0; border-top: 1px solid var(--pline); }
.elv-stats__grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.elv-stat { display: grid; gap: .35rem; padding-left: 1.1rem; border-left: 1px solid rgba(226,180,92,.35); }
.elv-stat__num {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1;
  color: var(--pgold); text-shadow: 0 0 28px rgba(226,180,92,.25);
}
.elv-stat__lbl { color: var(--tx3); font-size: .9rem; text-wrap: pretty; }

/* ============================== FONCTIONNALITÉS ============================== */
.elv-feat { padding: clamp(4rem, 10vh, 7rem) 0; }
.elv-feat .elv-kicker { margin-bottom: .6rem; }
.elv-feat__grid {
  margin-top: 2rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.elv-card {
  --sx: 50%; --sy: 50%;
  position: relative; display: grid; gap: .5rem;
  padding: 1.5rem 1.4rem;
  border-radius: 18px;
  /* Idem : dix cartes floutées simultanément coûtaient cher au défilement. */
  background: linear-gradient(158deg, #17233C, #131D34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease, opacity .7s ease;
}
.elv-card h3 { font-family: Fraunces, Georgia, serif; font-size: 1.22rem; font-weight: 600; }
.elv-card p { color: var(--tx3); font-size: .93rem; text-wrap: pretty; }
.elv-card--flat::before { background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); }

/* ============================== SCÈNE 3 : ANNEAU ============================== */
.elv-ring {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center; padding: 4rem 0;
}
.elv-ring__copy { display: grid; gap: 1rem; }
.elv-ring__legend { display: grid; gap: .5rem; margin-top: .4rem; }
.elv-ring__legend li {
  display: grid; gap: .1rem; padding-left: 1.1rem; position: relative;
  color: var(--tx3); font-size: .92rem;
  opacity: .45; transition: opacity .4s ease;
}
.elv-ring__legend li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.25); transition: background .4s ease, box-shadow .4s ease;
}
.elv-ring__legend li.is-on { opacity: 1; }
.elv-ring__legend li.is-on::before { background: var(--pgold); box-shadow: 0 0 12px var(--pglow); }
.elv-ring__legend b { color: var(--tx); font-weight: 600; }

.elv-ring__dial { position: relative; display: grid; place-items: center; }
.elv-ring__dial svg { width: min(420px, 78vw); height: auto; transform: rotate(-90deg); overflow: visible; }
.elv-ring__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.elv-ring__fill {
  fill: none; stroke: var(--pgold); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(226,180,92,.5));
}
.elv-ring__miles circle { fill: var(--pn0); stroke: rgba(255,255,255,.3); stroke-width: 2; transition: stroke .4s ease, fill .4s ease; }
.elv-ring__miles circle.is-on { fill: var(--pgold); stroke: rgba(226,180,92,.9); }
.elv-ring__readout { position: absolute; display: grid; justify-items: center; gap: .2rem; text-align: center; }
.elv-ring__day {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.elv-ring__unit { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; color: var(--tx3); }

/* ============================== BANDEAU INCLINÉ ============================== */
.elv-band {
  margin: clamp(3rem, 8vh, 6rem) 0;
  transform: rotate(-1.6deg);
  background: linear-gradient(90deg, var(--gold), var(--pgold) 55%, var(--amber));
  padding: 1.5rem 1rem;
}
.elv-band__txt {
  transform: rotate(1.6deg);
  text-align: center; color: #1A1509;
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  text-wrap: balance;
}

/* ============================== CONFIANCE ============================== */
.elv-trust { padding: clamp(3rem, 8vh, 6rem) 0; }
.elv-trust .elv-kicker { margin-bottom: .6rem; }
.elv-trust__grid {
  margin-top: 2rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ============================== CTA FINAL ============================== */
.elv-final {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 14vh, 9rem) 0;
  border-top: 1px solid var(--pline);
}
.elv-final__decor { position: absolute; inset: 0; z-index: -1; opacity: .8; }
.elv-final__inner { display: grid; gap: 1.1rem; justify-items: start; }
.elv-final__note { color: var(--tx3); font-size: .85rem; }

/* Viewports peu hauts : on comprime les scènes épinglées pour que rien
   ne tombe sous la ligne de flottaison pendant l'épinglage. */
@media (min-width: 901px) and (max-height: 820px) {
  .elv-tree, .elv-ring { padding: 2rem 0; gap: 2rem; }
  .elv-steps { gap: .4rem; }
  .elv-steps li { padding: .6rem .9rem .6rem 2.7rem; font-size: .86rem; }
  .elv-tree__graph figcaption { font-size: .78rem; }
  .elv-ring__dial svg { width: min(320px, 60vw); }
}
@media (min-width: 901px) and (max-height: 660px) {
  .elv-tree, .elv-ring { padding: 1rem 0; }
  .elv-steps li { font-size: .8rem; padding: .5rem .8rem .5rem 2.5rem; }
  .elv-ring__dial svg { width: min(250px, 50vw); }
}

/* ============================== MOBILE (< 900px) ==============================
   Les scènes épinglées se désépinglent (position: static) — le détournement du
   défilement (scroll-jacking) est une mauvaise pratique au doigt. En échange,
   l'arbre de lignée et l'anneau de gestation jouent CHACUN leur propre
   animation une fois qu'on les fait défiler dans l'écran (voir
   assets/js/elevage-landing.js, IntersectionObserver dédié) : contrairement à
   la version précédente, ils ne s'affichent plus intégralement tracés d'un
   coup — d'où le retrait ci-dessous des règles qui forçaient `opacity:1` sur
   les étapes/jalons/nœuds, qui empêchaient justement cette animation de se
   voir. */
@media (max-width: 900px) {
  .elv-scene--tree, .elv-scene--ring { height: auto; }
  .elv-scene__sticky {
    position: static; height: auto; min-height: 0;
    padding: clamp(3.4rem, 10vh, 5.5rem) 0;
  }
  .elv-tree, .elv-ring { grid-template-columns: 1fr; padding: 0; gap: 2.2rem; }
  .elv-tree__copy, .elv-ring__copy { gap: 1.15rem; }
  .elv-tree__graph { order: 2; }

  /* Étapes de reproduction : un peu plus d'air qu'en colonne desktop, où
     l'œil ne voit qu'une étape active à la fois — ici elles s'empilent
     toutes et ont besoin de mieux se détacher les unes des autres. */
  .elv-steps { gap: .8rem; }
  .elv-steps li { padding: 1rem 1.15rem 1rem 3.2rem; }
  .elv-steps li::before { left: 1.1rem; top: 1.05rem; }

  /* Diagramme de lignée : défilement horizontal plutôt que réduction à la
     largeur de l'écran. Le viewBox (620×460) garde sa taille de rendu
     naturelle sur un socle de 560px — en dessous, le texte des nœuds
     (13px/11px dans le repère du SVG) tombait à ~7px réels et devenait
     illisible, ce qui donnait l'impression de « texte qui se superpose ». */
  .elv-tree__graph-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Espace de respiration : le halo des nœuds (jusqu'à 1,7× leur rayon en
       pulsation) et le trait doré (drop-shadow) ont besoin de marge pour ne
       pas être rognés par le bord du cadre de défilement. */
    padding: .5rem .25rem 1rem;
    margin: -.5rem -.25rem -1rem;
  }
  .elv-tree__graph-scroll::-webkit-scrollbar { display: none; }
  .elv-tree__graph-scroll svg { width: 560px; max-width: none; flex: none; }
  .elv-tree__hint {
    display: block; margin: 0;
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tx3); text-align: center;
  }

  /* Jalons de gestation : même logique que les étapes ci-dessus. */
  .elv-ring__legend { gap: .75rem; }
  .elv-ring__legend li { padding-left: 1.3rem; font-size: .95rem; }
  .elv-ring__dial { margin-top: .4rem; }

  .elv-helix { opacity: .3; right: -6vw; }
  .elv-hero { min-height: auto; padding-bottom: clamp(3rem, 8vh, 5rem); }
  .elv-hero__inner { gap: 1.6rem; }

  /* Bandeau incliné : rotation réduite (au lieu de 1.6°) pour que le texte
     ne s'approche pas des bords du cadre sur un écran étroit, et padding
     latéral augmenté pour la même raison. */
  .elv-band { transform: rotate(-.9deg); padding: 1.7rem 1.3rem; }
  .elv-band__txt { transform: rotate(.9deg); }

  .elv-marquee { padding: 1.05rem 0; }
  .elv-pillars__grid { gap: 1rem; }
}

/* ============================== MOUVEMENT RÉDUIT ============================== */
@media (prefers-reduced-motion: reduce) {
  .elv *, .elv *::before, .elv *::after {
    animation: none !important;
    transition: none !important;
  }
  .elv-scene--tree, .elv-scene--ring { height: auto; }
  .elv-scene__sticky { position: static; height: auto; min-height: 0; padding: clamp(3rem, 9vh, 5rem) 0; }
  .elv-rv { opacity: 1 !important; transform: none !important; }
  .elv-steps li, .elv-ring__legend li { opacity: 1 !important; transform: none !important; }
  .elv-node { opacity: 1 !important; }
  .elv-tree__links path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .elv-ring__fill { stroke-dashoffset: 0 !important; }
  .elv-ring__miles circle { fill: var(--pgold); stroke: rgba(226,180,92,.9); }
  .elv-progress__bar { transform: scaleX(1); }
  .elv-pollen, .elv-shaft { display: none; }
  .elv-marquee__track { transform: none !important; flex-wrap: wrap; width: auto; }
  .elv-btn { transform: none !important; }
  .elv-pillar, .elv-card { transform: none !important; }
  .elv-pillar h3::after { transform: scaleX(1) !important; }
}

/* ---------- RACCORD : gabarit du site (via body.elv-body) ----------
   Même principe que body.pres-body sur la page écuries : le fond sombre
   déborde derrière le pied de page, qui se colle au contenu. */
.elv-body { background: #0B1426; }
.elv-body main { padding: 0; }
.elv-body .site-footer { margin-top: 0; }

/* RACCORD ESSENTIEL — couleur des titres.
   assets/css/style.css pose `h1, h2, h3, h4 { color: var(--ink) }`, soit une
   encre TRÈS SOMBRE. Le design n'ayant pas besoin de déclarer `color` sur ses
   titres quand il vivait seul (ils héritaient du conteneur clair), ce
   sélecteur de type l'emporte ici sur la couleur héritée de `.elv` : sans la
   règle ci-dessous, tous les titres s'affichent noir sur fond nuit, donc
   illisibles. On rétablit explicitement la couleur voulue.
   Les exceptions (or de `.elv-h1 em`, encre foncée du bandeau doré) portent
   sur d'autres éléments et ne sont donc pas écrasées. */
.elv h1, .elv h2, .elv h3, .elv h4 { color: var(--tx); }