/* =============================================================
   arbusteo — hero-eco.css
   Intègre l'animation « écosystème en 3 niveaux » (hero-3-niveaux.html)
   DANS le héros de l'accueil, déclenchée au scroll.

   PRINCIPE
   • À l'arrivée : le héros reste STRICTEMENT inchangé (photo plein cadre,
     titre clair, fiche flottante à droite).
   • Au scroll (desktop) : le héros se « fige » (sticky) ; la photo de fond et
     la fiche-app DÉFILENT vers le haut et s'effacent ; le TEXTE MONTE avec
     elles (1:1) dès le premier pixel puis SE FIGE au milieu de l'écran et se
     recolore pour la surface claire ; l'animation de l'écosystème apparaît
     alors à droite (centrée, face au texte) et SE LANCE.
   • Mobile : pas d'épinglage → fond + fiche s'estompent au scroll et
     l'animation se déploie sous le texte.

   Toutes les règles de l'animation sont préfixées « .hero-eco » et la classe
   d'orbite « .layer » a été renommée « .eco-layer » pour ne PAS entrer en
   collision avec le .layer global de css/product.css.
   Doit être chargé EN DERNIER (après images.css) pour gagner les recolorations.
   ============================================================= */

/* =============================================================
   1. SCROLL-PIN — le héros se fige le temps du morph
   ============================================================= */
.hero-scroll { position: relative; }

/* Sans JS, le wrapper n'a pas de hauteur extra → héros en flux normal
   (aucun vide). Avec JS (.js-hero) ET sur grand écran, on lui donne une
   longueur de scroll et on ÉPINGLE le héros le temps du morph.
   Sur mobile : PAS d'épinglage — le héros grandit naturellement et l'éco
   se révèle sous le texte au scroll (impossible de loger texte + animation
   en plein écran sur un téléphone). */
@media (min-width: 921px) {
  .js-hero .hero-scroll { height: var(--hero-pin, 200svh); }
  .js-hero .hero-scroll > .hero {
    position: sticky; top: 0;
    height: 100svh; min-height: 100svh;
  }
}

/* =============================================================
   2. MORPH — la photo DÉFILE, le crème se découvre dessous
   ============================================================= */
/* Surface claire : calque CONSTANT placé DERRIÈRE la photo (z:0). À l'arrivée la
   photo (z:1) la masque entièrement ; quand la photo défile vers le haut et
   s'efface, le crème se découvre. Pas de transition propre : c'est la photo qui
   bouge et disparaît, pas la surface qui « monte ». */
.hero-surface {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(213,234,176,.5), transparent 60%),
    var(--cream-light);
}
.hero .hero-bg { z-index: 1; }
.hero .hero-scrim { z-index: 1; }

/* DESKTOP — la photo + le voile DÉFILENT vers le haut (ils suivent le scroll,
   ≈ 1:1) puis s'effacent, pendant que le texte reste FIXE (héros épinglé).
   Piloté par JS : --bgY (translation verticale) et --bgO (opacité). */
@media (min-width: 921px) {
  .hero .hero-bg,
  .hero .hero-scrim {
    transform: translateY(var(--bgY, 0px));
    opacity: var(--bgO, 1);
    will-change: transform, opacity;
  }
}

/* =============================================================
   3. MORPH — le texte MONTE avec le scroll (1:1, comme la photo) dès le
   premier pixel, puis SE FIGE quand son centre atteint le milieu de
   l'écran (translation --txY plafonnée en JS). La recoloration survient
   ensuite, à l'apparition de l'écosystème.
   ============================================================= */
@media (min-width: 921px) {
  .hero .hero-text {
    transform: translateY(var(--txY, 0px));
    will-change: transform;
  }
}
.hero .hero-title,
.hero .hero-sub { transition: color .6s var(--ease); }
.hero .hero-cta .btn {
  transition: color .5s var(--ease), border-color .5s var(--ease),
              background .3s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.hero-morph .hero-title { color: var(--green-title); }
.hero-morph .hero-rotor { color: var(--olive); }
.hero-morph .hero-sub { color: var(--ink-soft); }
.hero-morph .hero-cta .btn-tonal { color: var(--green-dark); border-color: var(--olive); }
.hero-morph .hero-cta .btn-tonal:hover { background: rgba(123,142,92,.10); }

/* indice « Découvrir le produit » : s'efface dès que le héros se transforme
   (on n'est plus sur le héros d'accueil) ; réapparaît si l'on remonte. */
.hero .hero-cta .hero-link-down {
  transition: opacity .45s var(--ease), visibility .45s var(--ease),
              color .5s var(--ease), border-color .5s var(--ease), background .3s var(--ease);
}
.hero-morph .hero-cta .hero-link-down { opacity: 0; visibility: hidden; pointer-events: none; }

/* =============================================================
   4. MORPH — colonne droite : fiche (sort) ↔ écosystème (entre)
   ============================================================= */
.hero-visual {
  position: relative;            /* mobile : conteneur de l'éco (desktop → static) */
  justify-self: end; align-self: end;
  display: flex; justify-content: flex-end;
  width: 100%;
}

/* la fiche garde EXACTEMENT son rendu d'arrivée à l'arrivée ; au scroll elle
   DÉFILE vers le haut (un peu plus vite que le fond) et s'efface — comme si
   elle « partait » avec la page. Piloté par --fiY / --fiO (desktop). */
@media (min-width: 921px) {
  .hero .hero-fiche-float {
    transform: translateY(var(--fiY, 0px));
    opacity: var(--fiO, 1);
    will-change: transform, opacity;
  }
}

/* l'écosystème : caché à l'arrivée, hors-flux (n'altère pas la mise en page),
   ancré en bas-droite (continuité avec la fiche), déborde vers le haut. */
.hero-eco {
  position: absolute; z-index: 3;
  container: eco / inline-size;   /* responsive piloté par la largeur RÉELLE de l'éco */
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease), transform .8s var(--ease-dec);
}
/* desktop : l'éco est centrée verticalement à droite, face au texte.
   On rétablit la taille d'origine (≈ colonne de hero-3-niveaux.html) :
   proportionnelle à la fenêtre (42vw) pour ne jamais empiéter sur le texte,
   bornée à 544px, et plafonnée par la hauteur visible (svh) sur écran court. */
@media (min-width: 921px) {
  .hero-visual { position: static; }   /* l'éco se cale alors sur .hero-img-inner */
  .hero-eco {
    right: 0; top: 50%;
    width: min(clamp(408px, 42vw, 544px), 70svh);
    transform: translateY(-50%) translateX(30px) scale(.95);
    transform-origin: center right;
  }
  .hero-morph .hero-eco { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
}

/* =============================================================
   5. ANIMATION « ÉCOSYSTÈME » — styles repris de hero-3-niveaux.html,
      intégralement préfixés .hero-eco (+ .layer → .eco-layer)
   ============================================================= */
.hero-eco {
  /* tokens locaux : palette exacte de l'animation, isolée du site */
  --green-deep:#2E5D34; --green-title:#3b4c21; --green-dark:#536437;
  --olive:#7B8E5C; --olive-soft:#9fae7e; --olive-light:#dcebbe; --olive-wash:#eef4e0;
  --sage:#A8B98C; --sage-light:#e7edd8;
  --ocre:#855100; --ocre-soft:#b07b33; --ocre-light:#f1e4cf;
  --cream:#EEEDDB; --cream-light:#fbfae8; --paper:#ffffff;
  --ink:#2b2e22; --ink-soft:#5d614f; --line:#e2e3d2;
  --font:"Roboto Flex","Roboto",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(0.2,0,0,1);
  --ease-out:cubic-bezier(0.05,0.7,0.1,1);
  --spin-1:80s; --spin-2:116s; --spin-3:150s;
  font-family: var(--font); color: var(--ink);
}
.hero-eco .material-symbols-outlined {
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  user-select:none; line-height:1;
}

.hero-eco .eco {
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:600px; margin-inline:auto;
}

/* ---- légende (zone dédiée) ---- */
.hero-eco .eco-caption {
  order:2; width:100%; min-height:88px;
  margin-top:12px; padding:0 6px;
  display:grid; text-align:center;
}
.hero-eco .cap {
  grid-area:1/1; opacity:0; transform:translateY(8px);
  transition:opacity 520ms var(--ease), transform 520ms var(--ease);
  pointer-events:none;
}
.hero-eco .cap-eyebrow {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--green-dark); margin-bottom:8px; min-height:18px;
}
.hero-eco .cap-eyebrow .material-symbols-outlined { font-size:18px; }
.hero-eco .cap-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--olive); display:inline-block; }
.hero-eco .cap--2 .cap-eyebrow { color:#6c7a47; }
.hero-eco .cap--3 .cap-eyebrow { color:var(--ocre); }
.hero-eco .cap-line {
  margin:0; color:var(--green-title);
  font-weight:600; letter-spacing:-.3px;
  font-size:clamp(17px,1.5vw,21px); line-height:1.3;
  max-width:26ch; margin-inline:auto; text-wrap:balance;
}
.hero-eco .eco[data-step="0"] .cap--0,
.hero-eco .eco[data-step="1"] .cap--1,
.hero-eco .eco[data-step="2"] .cap--2,
.hero-eco .eco[data-step="3"] .cap--3,
.hero-eco .eco[data-step="4"] .cap--4 { opacity:1; transform:none; }

/* ---- scène ---- */
.hero-eco .eco-stage {
  order:1; position:relative;
  width:100%; aspect-ratio:1/1;
  overflow:visible; cursor:pointer;
}
.hero-eco .eco-rings { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hero-eco .ring { fill:none; stroke-width:1.6; opacity:0; transition:opacity 760ms var(--ease); }
.hero-eco .ring--1 { stroke:var(--olive-soft); }
.hero-eco .ring--2 { stroke:var(--sage); }
.hero-eco .ring--3 { stroke:var(--ocre-soft); stroke-dasharray:2 7; }
.hero-eco .eco.r1 .ring--1 { opacity:.14; }
.hero-eco .eco.r2 .ring--2 { opacity:.14; }
.hero-eco .eco.r3 .ring--3 { opacity:.14; }
.hero-eco .eco[data-step="1"] .ring--1 { opacity:.5 !important; }
.hero-eco .eco[data-step="2"] .ring--2 { opacity:.5 !important; }
.hero-eco .eco[data-step="3"] .ring--3 { opacity:.48 !important; }
.hero-eco .eco[data-step="4"] .ring { opacity:0 !important; }

.hero-eco .track { fill:none; stroke-width:56; opacity:0; transition:opacity 760ms var(--ease); }
.hero-eco .track--1 { stroke:rgba(123,142,92,.26); }
.hero-eco .track--2 { stroke:rgba(120,126,104,.22); }
.hero-eco .track--3 { stroke:rgba(176,123,51,.21); }
.hero-eco .eco[data-step="4"] .track { opacity:1; }

.hero-eco .eco-names { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:6; transition:opacity 600ms var(--ease); }
.hero-eco .ename {
  position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  padding:3px 11px; border-radius:999px;
}
.hero-eco .ename--1 { top:29%; color:var(--green-deep); background:#d6e6b5; }
.hero-eco .ename--2 { top:16%; color:#474b39; background:#e4e6d9; }
.hero-eco .ename--3 { top:7%;  color:#6e4400; background:#efddc3; }

/* ---- couches orbitales (.layer → .eco-layer) ---- */
.hero-eco .eco-layer {
  position:absolute; inset:0; transform-origin:50% 50%; will-change:transform;
  display:block; padding:0; margin:0; gap:0; border-radius:0;  /* neutralise le .layer global */
}
.hero-eco .eco-layer--1 { z-index:5; animation:ecoSpin var(--spin-1) linear infinite; }
.hero-eco .eco-layer--2 { z-index:4; animation:ecoSpin var(--spin-2) linear infinite reverse; }
.hero-eco .eco-layer--3 { z-index:3; animation:ecoSpin var(--spin-3) linear infinite; }
@keyframes ecoSpin { to { transform:rotate(360deg); } }

.hero-eco .layer-conn { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; transition:opacity 760ms var(--ease); }
.hero-eco .conn {
  fill:none; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 900ms var(--ease-out);
}
.hero-eco .conn--1 { stroke:var(--olive);     stroke-width:2.2; }
.hero-eco .conn--2 { stroke:var(--olive-soft);stroke-width:2; }
.hero-eco .conn--3 { stroke:var(--ocre-soft); stroke-width:1.8; }
.hero-eco .eco.r1 .conn--1 { stroke-dashoffset:0; }
.hero-eco .eco.r2 .conn--2 { stroke-dashoffset:0; }
.hero-eco .eco.r3 .conn--3 { stroke-dashoffset:0; }
.hero-eco .eco[data-step="1"] .eco-layer--1 .layer-conn { opacity:.5; }
.hero-eco .eco[data-step="2"] .eco-layer--2 .layer-conn { opacity:.48; }
.hero-eco .eco[data-step="3"] .eco-layer--3 .layer-conn { opacity:.44; }
.hero-eco .eco[data-step="4"] .layer-conn { opacity:.22; }

/* ---- noyau central (fixe) ---- */
.hero-eco .eco-core {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; z-index:6;
}
.hero-eco .core-disc {
  position:relative;
  width:clamp(82px,16%,104px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #8ca169, var(--olive) 58%, #6b7d4e);
  display:grid; place-items:center; color:var(--cream-light);
  box-shadow:0 10px 26px rgba(62,79,31,.32), inset 0 2px 6px rgba(255,255,255,.25);
}
.hero-eco .core-disc::before {
  content:""; position:absolute; inset:-30%; border-radius:50%;
  background:radial-gradient(circle, rgba(123,142,92,.24), rgba(123,142,92,0) 70%); z-index:-1;
}
.hero-eco .core-disc::after {
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1.5px solid rgba(123,142,92,.30);
}
.hero-eco .core-glyph { width:58%; height:58%; display:block; }
.hero-eco .core-name {
  margin-top:11px; font-size:14px; font-weight:600; letter-spacing:.3px;
  color:var(--green-title); white-space:nowrap;
}

/* ---- pastilles ---- */
.hero-eco .pas {
  position:absolute; width:0; height:0;
  transform:translate(-50%,-50%) scale(var(--s,.5));
  opacity:var(--o,0);
  transition:opacity 520ms var(--ease), transform 560ms var(--ease-out);
}
.hero-eco .pas-rot { position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.hero-eco .eco-layer--1 .pas-rot { animation:ecoSpin var(--spin-1) linear infinite reverse; }
.hero-eco .eco-layer--2 .pas-rot { animation:ecoSpin var(--spin-2) linear infinite; }
.hero-eco .eco-layer--3 .pas-rot { animation:ecoSpin var(--spin-3) linear infinite reverse; }

.hero-eco .pas-dot {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; border-radius:50%;
  transition:box-shadow 560ms var(--ease);
}
.hero-eco .pas-dot .material-symbols-outlined { font-size:24px; }
.hero-eco .pas-lab {
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:12.5px; font-weight:600; letter-spacing:.2px;
  padding:1px 9px; border-radius:999px; opacity:0;
  transition:opacity 460ms var(--ease);
}

.hero-eco .lvl1 .pas-dot {
  width:54px; height:54px; background:var(--olive-light); color:var(--green-deep);
  border:1.5px solid rgba(123,142,92,.40); box-shadow:0 4px 12px rgba(40,50,20,.10);
}
.hero-eco .lvl1 .pas-lab { color:var(--green-title); background:var(--olive-wash); }
.hero-eco .lvl1 .pas-dot .material-symbols-outlined { font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24; }

.hero-eco .lvl2 .pas-dot {
  width:50px; height:50px; background:var(--paper); color:var(--green-dark);
  border:1.5px solid var(--sage); box-shadow:0 4px 11px rgba(40,50,20,.08);
}
.hero-eco .lvl2 .pas-lab { color:var(--green-dark); background:var(--sage-light); }

.hero-eco .lvl3 .pas-dot {
  width:48px; height:48px; background:var(--ocre-light); color:var(--ocre);
  border:1.5px solid rgba(133,81,0,.30); box-shadow:0 4px 11px rgba(80,50,10,.10);
}
.hero-eco .lvl3 .pas-lab { color:#6e4400; background:#f6ecdb; font-size:12px; }

.hero-eco .lvl1 .pas-lab { top:calc(50% + 38px); }
.hero-eco .lvl2 .pas-lab { top:calc(50% + 36px); }
.hero-eco .lvl3 .pas-lab { top:calc(50% + 35px); }
.hero-eco .lvl3.lab-up .pas-lab { top:calc(50% - 35px); }
.hero-eco .eco[data-step="4"] .pas.o-up .pas-lab { top:calc(50% - 34px) !important; }

/* ---- états : focus du niveau actif ---- */
.hero-eco .eco.r1 .lvl1.pas { --s:.42; --o:.15; }
.hero-eco .eco.r2 .lvl2.pas { --s:.42; --o:.15; }
.hero-eco .eco.r3 .lvl3.pas { --s:.42; --o:.15; }
.hero-eco .eco[data-step="1"] .lvl1.pas { --s:1 !important; --o:1 !important; }
.hero-eco .eco[data-step="2"] .lvl2.pas { --s:1 !important; --o:1 !important; }
.hero-eco .eco[data-step="3"] .lvl3.pas { --s:1 !important; --o:1 !important; }
.hero-eco .eco[data-step="4"] .pas { --s:1 !important; --o:1 !important; }

.hero-eco .eco[data-step="1"] .lvl1 .pas-lab,
.hero-eco .eco[data-step="2"] .lvl2 .pas-lab,
.hero-eco .eco[data-step="3"] .lvl3 .pas-lab,
.hero-eco .eco[data-step="4"] .pas-lab { opacity:1; }

.hero-eco .eco[data-step="1"] .lvl1 .pas-dot { box-shadow:0 8px 20px rgba(62,79,31,.26), 0 0 0 6px rgba(123,142,92,.14); }
.hero-eco .eco[data-step="2"] .lvl2 .pas-dot { box-shadow:0 8px 20px rgba(62,79,31,.20), 0 0 0 6px rgba(168,185,140,.20); }
.hero-eco .eco[data-step="3"] .lvl3 .pas-dot { box-shadow:0 8px 20px rgba(80,50,10,.22), 0 0 0 6px rgba(176,123,51,.18); }

.hero-eco .eco-layer .pas:nth-of-type(1) { transition-delay:40ms; }
.hero-eco .eco-layer .pas:nth-of-type(2) { transition-delay:110ms; }
.hero-eco .eco-layer .pas:nth-of-type(3) { transition-delay:180ms; }
.hero-eco .eco-layer .pas:nth-of-type(4) { transition-delay:250ms; }
.hero-eco .eco-layer .pas:nth-of-type(5) { transition-delay:320ms; }

/* ---- entrée du noyau (une fois) ---- */
@keyframes ecoRise { from { opacity:0; transform:translateY(14px); } }
.hero-eco .eco.intro .core-disc { animation:ecoRise 700ms var(--ease-out) both; }
.hero-eco .eco.intro .core-name { animation:ecoRise 700ms var(--ease-out) 90ms both; }

/* ---- rejeu (affordance discrète) ---- */
.hero-eco .eco-replay {
  order:3; margin-top:10px;
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:.2px;
  color:var(--green-dark);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity 400ms var(--ease), transform 400ms var(--ease), color .2s var(--ease);
}
.hero-eco .eco-replay .material-symbols-outlined { font-size:18px; }
.hero-eco .eco-replay:hover { color:var(--green-deep); }
.hero-eco .eco.done .eco-replay { opacity:.85; transform:none; pointer-events:auto; }

/* =============================================================
   6. RESPONSIVE
   ============================================================= */
/* L'accueil passe en une colonne à 920px (cf. images.css). L'animation
   se place alors SOUS le texte, centrée. Comme elle est hors-flux, on fait
   grandir .hero-visual au morph pour lui réserver la place (transition). */
@media (max-width: 920px) {
  .hero-visual { justify-content: flex-start; }

  /* mobile : pas d'épinglage → fond + fiche défilent naturellement avec le héros.
     On les estompe simplement (fondu) au morph ; le texte suit le scroll. */
  .hero .hero-bg, .hero .hero-scrim {
    transform: none; opacity: 1;
    transition: opacity .6s var(--ease);
  }
  .hero-morph .hero-bg, .hero-morph .hero-scrim { opacity: 0; }
  .hero .hero-fiche-float {
    transform: none; opacity: 1;
    transition: opacity .5s var(--ease), transform .6s var(--ease-dec);
  }
  .hero-morph .hero-fiche-float { opacity: 0; transform: translateY(16px) scale(.97); }

  .hero-eco {
    right: auto; left: 50%; bottom: 0; top: auto;
    transform: translateX(-50%) translateY(22px) scale(.96);
    transform-origin: bottom center;
    width: min(544px, 88vw, 82svh);
  }
  .hero-morph .hero-eco { opacity: 1; pointer-events: auto; transform: translateX(-50%); }

  /* l'éco étant hors-flux, on réserve sa hauteur réelle (mesurée en JS → --eco-h)
     au morph (transition douce) → le texte reste en haut, l'éco se déploie dessous */
  .js-hero .hero-visual {
    min-height: var(--fiche-h, 168px);
    transition: min-height .6s var(--ease-dec);
  }
  .js-hero .hero-morph .hero-visual { min-height: var(--eco-h, 460px); }
}

/* =============================================================
   6b. RESPONSIVE INTERNE — piloté par la LARGEUR RÉELLE de l'animation
   (container query sur .hero-eco), pas par l'appareil → lisible partout :
   les étiquettes n'apparaissent que s'il y a la place pour elles.
   ============================================================= */
/* < 500px : la « vue d'ensemble » (15 étiquettes simultanées) ne tient plus →
   on garde les pastilles + pistes colorées et on bascule sur les 3 bandes
   nommées (Élément / Actions / Réseau). Les étapes 1-3 (5 étiquettes à la fois)
   restent étiquetées. */
@container eco (max-width: 499px) {
  .hero-eco .eco[data-step="4"] .pas-lab { display:none !important; }
  .hero-eco .eco[data-step="4"] .eco-names { opacity:1; }
}
/* < 400px (mobile) : plus assez de place pour AUCUNE étiquette → pastilles
   seules (un peu réduites), noyau réduit ; et la vue d'ensemble se simplifie
   en 3 bandes + pistes (pastilles masquées) pour rester nette. */
@container eco (max-width: 399px) {
  .hero-eco .pas-lab { display:none !important; }
  .hero-eco .lvl1 .pas-dot { width:46px; height:46px; }
  .hero-eco .lvl2 .pas-dot { width:42px; height:42px; }
  .hero-eco .lvl3 .pas-dot { width:40px; height:40px; }
  .hero-eco .pas-dot .material-symbols-outlined { font-size:21px; }
  .hero-eco .core-disc { width:74px; }
  .hero-eco .core-name { font-size:13px; }
  .hero-eco .cap-line { font-size:18px; }
  .hero-eco .eco[data-step="4"] .pas { opacity:0 !important; }
  .hero-eco .eco[data-step="4"] .layer-conn { opacity:0 !important; }
}

/* =============================================================
   7. ACCESSIBILITÉ — mouvement réduit : morph instantané, état final direct
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-eco *,
  .hero .hero-bg, .hero .hero-scrim, .hero-surface,
  .hero .hero-text, .hero .hero-title, .hero .hero-sub,
  .hero .hero-fiche-float, .hero-eco, .hero .hero-cta .btn,
  .js-hero .hero-visual {
    transition: none !important; animation: none !important;
  }
  .hero-eco .conn { stroke-dashoffset:0 !important; }
}