/* ==========================================================================
   AKELION — Composants partagés des pages produits et thématiques
   Chargé par Dynafilter, BlueGuest, Dynatank, NWM, applications, essais…
   Complète style.css. Les styles propres à une scène 3D restent dans la
   feuille de sa page (dynafilter.css, blueguest.css, dynatank.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fil d'Ariane / retour
   -------------------------------------------------------------------------- */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

.backlink svg { transition: transform 0.3s var(--ease-out); }
.backlink:hover { color: var(--lime); }
.backlink:hover svg { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   Scènes 3D : grille de fond, chargement, invitation à défiler
   Communs à toutes les scènes (Dynafilter, BlueGuest, Dynatank).
   -------------------------------------------------------------------------- */

.stage__grid {
  position: absolute;
  inset: -5%;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 80%);
}

/* Indicateur de chargement */
.stage__loader {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 3.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity 0.5s var(--ease-out);
}

.stage__loader[hidden] { display: none; }

.stage__bar {
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.stage__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--lime);
  transition: width 0.3s linear;
}

.chapter__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chapter__hint::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  animation: hint-slide 2.2s var(--ease-io) infinite;
}

@keyframes hint-slide {
  0%, 100% { transform: scaleX(0.4); transform-origin: left; }
  50%      { transform: scaleX(1);   transform-origin: left; }
}

/* --------------------------------------------------------------------------
   Bénéfices
   -------------------------------------------------------------------------- */

/* Cartes autonomes : pas de conteneur coloré, donc aucune cellule vide
   ne se dessine quand la grille ne tombe pas juste. */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: stretch;
}

.benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

/* Halo d'angle, révélé au survol */
.benefit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(78% 62% at 100% 0%, rgba(195, 210, 0, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.benefit:hover { border-color: var(--line); transform: translateY(-4px); }
.benefit:hover::before { opacity: 1; }

/* Petit logo au trait (src/icones.svg, inséré par la génération) */
.benefit__icon {
  width: 38px;
  height: 38px;
  flex: none;
  margin-bottom: 1.4rem;
  color: var(--lime);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit__head {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  font-stretch: 106%;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--lime);
  margin-bottom: 0.85rem;
  text-wrap: balance;
}

.benefit__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--paper);
  margin-bottom: 0.7rem;
}

.benefit__text { color: var(--text-muted); font-size: 0.94rem; }

.benefit__note {
  display: block;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Applications
   -------------------------------------------------------------------------- */

.uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.use {
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.use:hover { border-color: var(--line); transform: translateY(-3px); }

.use__mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(195, 210, 0, 0.1);
  clip-path: var(--octagon);
  color: var(--lime);
  margin-bottom: 1.35rem;
}

.use h3 { margin-bottom: 0.55rem; }
.use p { color: var(--text-muted); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Bandeau d'installation (étapes)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step { position: relative; padding-top: 2rem; border-top: 1px solid var(--line-soft); }

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.75rem;
  left: 0;
  padding-right: 0.8rem;
  background: var(--navy-900);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  color: var(--lime);
}

/* Cinq étapes : sur une seule ligne dès que l'écran le permet (sinon la
   grille automatique en mettait quatre, puis une seule en dessous) */
@media (min-width: 1000px) {
  .steps:has(> .step:nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.2vw, 2rem);
  }
}

.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--text-muted); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Bandeau CTA final
   -------------------------------------------------------------------------- */

.cta-band {
  background:
    radial-gradient(58% 70% at 50% 0%, rgba(195, 210, 0, 0.08), transparent 66%),
    linear-gradient(180deg, var(--navy-850), var(--navy-950));
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Principe de fonctionnement
   -------------------------------------------------------------------------- */

.principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.principle__claim {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-stretch: 104%;
  font-weight: 550;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin-bottom: 1.5rem;
}

.principle__claim strong { color: var(--lime); font-weight: 700; }

.principle__text { color: var(--text-muted); }
.principle__text + .principle__text { margin-top: 1.1rem; }

.principle__figure {
  /* Sans cette remise à zéro, la marge par défaut des <figure> (40 px de
     chaque côté) rétrécissait le schéma, surtout sur mobile. */
  margin: 0;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.015);
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
}

.principle__figure svg { width: 100%; height: auto; }

.principle__caption {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Domaine de fonctionnement
   -------------------------------------------------------------------------- */

.specs {
  border-top: 1px solid var(--line-soft);
}

.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease-out);
}

.spec:hover { background: rgba(255, 255, 255, 0.018); }

.spec__key {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: center;
}

.spec__val {
  font-size: 1rem;
  font-weight: 450;
  color: var(--paper);
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.spec__val small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 350;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Essai pilote — résultats mesurés
   -------------------------------------------------------------------------- */

.trial-band {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-850) 50%, var(--navy-900));
  border-block: 1px solid var(--line-soft);
}

.trial-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.trial-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.trial-meta li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.trial-meta span {
  font-family: var(--font-mono);
  color: var(--text-faint);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* Avant / après */
.ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.ba__card {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line-soft);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
}

.ba__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ba__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}
.ba__row:last-child { border-bottom: 0; padding-bottom: 0; }

.ba__name { font-size: 0.92rem; color: var(--text-muted); }

.ba__num {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-stretch: 104%;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.ba__card--after { border-color: var(--line); }
.ba__card--after .ba__label { color: var(--lime); }
.ba__card--after .ba__num { color: var(--lime); }

.trial-note {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-faint);
  max-width: 74ch;
}

@media (max-width: 900px) {
  .principle,
  .trial-head { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding-block: 1rem; }
  .trial-meta li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}


@media (max-width: 560px) {
  .stage__loader { bottom: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__hint::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Deux colonnes : texte d'introduction + contenu (liste, FAQ…)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.split__note {
  margin-top: 1.25rem;
  color: var(--text-muted);
  max-width: 52ch;
}

.split--faq .h-section { margin-bottom: 2.5rem; }

/* Liste à repères (intégration, prérequis, données à préparer) */
.checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.checklist__item:first-child { padding-top: 0.2rem; }
.checklist__item .h-card { margin-bottom: 0.45rem; }
.checklist__item p { color: var(--text-muted); font-size: 0.96rem; }
.checklist__item a { color: var(--text); text-underline-offset: 2px; }
.checklist__item a:hover { color: var(--lime); }

.checklist__mark {
  width: 10px;
  height: 10px;
  margin-top: 0.55rem;
  background: var(--lime);
  clip-path: var(--octagon);
}

/* --------------------------------------------------------------------------
   Encadré « Entretien et exploitation » (organisation des intégrateurs)
   -------------------------------------------------------------------------- */

.partners-note {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  max-width: 62rem;
}

.partners-note__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.partners-note p:not(.partners-note__title) { color: var(--text); max-width: 72ch; }
.partners-note .link-arrow { justify-self: start; margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   FAQ : <details> natifs, accessibles au clavier sans script
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-soft); }

.faq__item { border-bottom: 1px solid var(--line-soft); }

.faq__item summary {
  position: relative;
  display: block;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--lime); }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--lime), var(--lime)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--lime), var(--lime)) center / 1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__item p {
  padding: 0 3rem 1.5rem 0;
  color: var(--text-muted);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Documents : format, langue et poids affichés à côté du lien
   -------------------------------------------------------------------------- */

.docs { display: grid; gap: 0.75rem; margin-top: 0.5rem; max-width: 30rem; }

.docs__title {
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 3.2rem 1rem 1.1rem;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.doc:hover { border-color: var(--lime); background: rgba(195, 210, 0, 0.05); }

.doc::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--lime);
  /* flèche de téléchargement */
  clip-path: polygon(40% 0, 60% 0, 60% 55%, 80% 38%, 92% 50%, 50% 88%, 8% 50%, 20% 38%, 40% 55%);
}
.doc--request::after { clip-path: polygon(0 40%, 62% 40%, 62% 18%, 100% 50%, 62% 82%, 62% 60%, 0 60%); }

.doc__name { font-family: var(--font-display); font-weight: 600; color: var(--paper); }
.doc__meta { font-size: 0.82rem; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Cartes cliquables (applications)
   -------------------------------------------------------------------------- */

.use--link { display: block; color: inherit; text-decoration: none; }
.use--link:hover { border-color: var(--lime); }
.use__go {
  display: inline-flex;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.use__go::after { content: "→"; margin-left: 0.5rem; transition: transform 0.3s var(--ease-out); }
.use--link:hover .use__go::after { transform: translateX(4px); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Figure pleine largeur (schéma, illustration)
   -------------------------------------------------------------------------- */

.figure-wide {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.015);
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.figure-wide img { display: block; width: 100%; height: auto; }

.figure-wide figcaption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.steps--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --------------------------------------------------------------------------
   Raccordements (piquages) et limites de fourniture
   -------------------------------------------------------------------------- */

.ports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ports li {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.ports b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-stretch: 104%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lime);
}

.ports span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.scope__col { padding: clamp(1.3rem, 2.4vw, 1.9rem); background: var(--navy-900); }

.scope__title {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lime);
}

.scope__col:last-of-type .scope__title { color: var(--text-muted); }

.scope ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.scope li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

.scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: currentColor;
  opacity: 0.45;
  clip-path: var(--octagon);
}

.scope__note {
  grid-column: 1 / -1;
  padding: 1rem clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--navy-900);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
}

/* Étiquettes de secteurs */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: clamp(1.75rem, 3vw, 2.25rem);
}

.tags span {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .scope { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Callouts projetés sur un modèle 3D (Dynafilter, Dynatank)
   -------------------------------------------------------------------------- */

.callouts {
  position: absolute;
  inset: 0;
  /* Au-dessus du voile des chapitres (z-index 2), sinon les étiquettes
     passent derrière le dégradé bleu. */
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}

.callouts.is-active { opacity: 1; }

.callout {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
}

.callout__dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--lime);
  clip-path: var(--octagon);
}

.callout__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--lime);
  clip-path: var(--octagon);
  opacity: 0.45;
  animation: callout-pulse 2.8s var(--ease-io) infinite;
}

@keyframes callout-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.45; }
  50%      { transform: scale(1.5); opacity: 0; }
}

.callout__line {
  width: clamp(28px, 5vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, var(--lime), rgba(195, 210, 0, 0.25));
  flex: none;
}

.callout__body {
  padding: 0.55rem 0.9rem;
  background: rgba(8, 8, 26, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 2px solid var(--lime);
}

.callout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--paper);
}

.callout__value {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Callouts orientés vers la gauche */
.callout--left { flex-direction: row-reverse; }
.callout--left .callout__line { background: linear-gradient(270deg, var(--lime), rgba(195, 210, 0, 0.25)); }
.callout--left .callout__body { border-left: 0; border-right: 2px solid var(--lime); text-align: right; }

@media (max-width: 900px) {
  /* Callouts resserrés, l'espace est compté */
  .callout__line { width: 20px; }
  .callout__body { padding: 0.42rem 0.7rem; }
  .callout__label { font-size: 0.66rem; }
  .callout__value { font-size: 0.6rem; }
}

@media (max-width: 560px) {
  .callout--hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .callout__dot::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Scènes 3D sur téléphone (Dynafilter, Dynatank, BlueGuest)
   La 3D n'y est pas chargée (scene-loader.js) : un croquis au trait vert,
   en fond, se redessine à chaque chapitre (main.js, section 10). Au centre
   sur l'écran d'ouverture, plus bas ensuite, sous le texte. Même croquis
   sur ordinateur en mode léger (fin de section).
   -------------------------------------------------------------------------- */

.stills { display: none; }

.has-stills .stills {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: var(--lime);
}

.stills__sketch {
  position: absolute;
  left: 50%;
  top: 70%;
  width: min(140%, 48rem);
  height: auto;
  opacity: 0.55;
  transform: translate(-50%, -50%);
  transition: top 0.9s var(--ease-out);
  animation: sketch-drift 14s ease-in-out infinite alternate;
}

.is-intro .stills__sketch { top: 50%; }

/* Dynafilter : élévation détaillée du rotor (image SVG animée de l'accueil),
   accouplement à gauche, empilement de disques qui sort de l'écran */
.stills__elev {
  position: absolute;
  left: 4%;
  top: 72%;
  height: 52vh;
  height: 52svh;
  width: auto;
  max-width: none;
  opacity: 0.55;
  transform: translateY(-50%);
  transition: top 0.9s var(--ease-out), height 0.9s var(--ease-out);
}

.is-intro .stills__elev { top: 50%; height: 80vh; height: 80svh; }

/* Élévation pilotée par le défilement (main.js) : le dézoom suit le
   défilement, sans transition ; --elev-h0 = part de la hauteur de l'écran
   à l'arrivée, --elev-s = dézoom (mise à l'échelle depuis le bord gauche,
   bien moins coûteuse qu'un changement de taille), --elev-y = position
   verticale du centre. is-moving : pendant le mouvement, le dessin déjà
   tracé est mis à l'échelle sans être retracé. */
svg.stills__elev,
.is-intro svg.stills__elev {
  top: calc(var(--elev-y, 0.5) * 100%);
  height: calc(var(--elev-h0, 0.8) * 100vh);
  height: calc(var(--elev-h0, 0.8) * 100svh);
  transform: translateY(-50%) scale(var(--elev-s, 1));
  transform-origin: 0 50%;
  transition: none;
}

svg.stills__elev.is-moving { will-change: transform; }

.stills.is-drawing .stills__sketch :is(path, circle)[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sketch-draw 2.6s var(--ease-out) forwards;
}

@keyframes sketch-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes sketch-drift {
  to { transform: translate(-50%, -50%) translateY(-10px) rotate(-1.5deg); }
}

/* Téléphone : lisibilité du texte devant le croquis. Un voile sombre aux
   bords très doux suit chaque bloc de texte (chapitres suivants) ou le
   titre et le paragraphe du premier écran, où le bloc occupe tout l'écran
   (le voile ayant la couleur du fond, son chevauchement entre titre et
   paragraphe ne se voit pas) : le croquis
   s'estompe derrière le texte et garde son intensité ailleurs. */
@media (max-width: 900px) {
  .has-stills :is(.chapter, .dt-chapter, .bg-chapter) + :is(.chapter, .dt-chapter, .bg-chapter) :is(.chapter__box, .dt-chapter__box, .bg-chapter__box),
  .has-stills :is(.chapter, .dt-chapter, .bg-chapter):first-child :is(.chapter__title, .dt-chapter__title, .bg-chapter__title, .chapter__text, .dt-chapter__text, .bg-chapter__text) {
    position: relative;
    isolation: isolate;
  }

  .has-stills :is(.chapter, .dt-chapter, .bg-chapter) + :is(.chapter, .dt-chapter, .bg-chapter) :is(.chapter__box, .dt-chapter__box, .bg-chapter__box)::before,
  .has-stills :is(.chapter, .dt-chapter, .bg-chapter):first-child :is(.chapter__title, .dt-chapter__title, .bg-chapter__title, .chapter__text, .dt-chapter__text, .bg-chapter__text)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 18px;
    background: rgba(8, 8, 26, 0.62);
    box-shadow: 0 0 34px 26px rgba(8, 8, 26, 0.62);
    pointer-events: none;
  }
}

/* Dynatank, BlueGuest (téléphone) : croquis détaillé calculé depuis le
   modèle (tools/croquis), chargé et piloté par main.js. Il remplace le
   croquis simple ; l'image d'attente (img[data-src]) ne s'affiche jamais.
   Traits d'épaisseur constante à l'écran, quel que soit le cadrage. */
img.stills__croquis { display: none; }
.has-croquis .stills__sketch { display: none; }

svg.stills__croquis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.58;
}

svg.stills__croquis :is(path, circle) { vector-effect: non-scaling-stroke; }
svg.stills__croquis .ext { stroke-width: 1; }
svg.stills__croquis .int { stroke-width: 0.75; }
/* Disques des wagons : trait fin, sinon ils forment des pavés pleins */
svg.stills__croquis .wag { stroke-width: 0.6; stroke-opacity: 0.85; }
/* En 3/4 (Dynatank), les disques sont moins serrés : trait plus marqué */
svg.stills__croquis .wag.appuye { stroke-width: 1.1; stroke-opacity: 1; }
svg.stills__croquis .foot { stroke-width: calc(1.2px + 1.4px * var(--glow, 0)); }
svg.stills__croquis .foot .dim { stroke-width: 0.9; }

svg.stills__croquis text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.02em;
}
svg.stills__croquis .area { opacity: 0.85; }

/* Bulles d'aération, vues de dessus : elles éclosent sur place */
svg.stills__croquis .bub circle {
  stroke-width: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: croquis-bulle linear infinite;
}

@keyframes croquis-bulle {
  from { transform: scale(0.2); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

/* Vue 3/4 (BlueGuest sur ordinateur) : les bulles montent dans la cuve
   (direction du haut à l'écran : --rx, --ry, posées par le croquis) */
svg.stills__croquis .bub.monte circle { animation-name: croquis-monte; }

@keyframes croquis-monte {
  from { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  to { transform: translate(var(--rx, 0), var(--ry, 0)); opacity: 0; }
}

/* Ordinateur sans carte graphique (main.js : stepMode) : un état par
   chapitre, atteint par fondus ; rien ne s'anime en continu */
svg.stills__croquis.is-steps [data-layer] {
  transition: opacity 0.7s var(--ease-out), transform 1s var(--ease-out);
}
svg.stills__croquis.is-steps .bub circle { animation: none; }

/* Grand écran, mode léger (scene-loader.js, main.js section 10) : le
   croquis prend la place de la 3D, à droite du texte, dans la scène
   épinglée. Plus marqué que sur téléphone : il n'est pas sous le texte. */
@media (min-width: 901px) {
  .has-stills .stills__sketch {
    left: auto;
    right: max(var(--gutter), 3vw);
    top: 50%;
    width: min(50%, 50rem);
    opacity: 0.8;
    transform: translateY(-50%);
    animation-name: sketch-drift-side;
  }

  /* Élévation : taille et hauteur pilotées par main.js (svg.stills__elev),
     sauf la version fixe (moins d'animations) */
  .has-stills .stills__elev { left: 44%; opacity: 0.8; }
  /* Cadrage fixe : l'élévation entière, à droite du texte (main.js,
     ZOOM_DESK) ; même place pour la version fixe, sans carte graphique */
  .has-stills svg.stills__elev,
  .has-stills img.stills__elev {
    top: 52%;
    height: min(50vh, 30vw);
    transform: translateY(-50%);
  }
  /* Sans carte graphique : l'élévation fixe en morceaux immobiles (main.js)
     qui apparaissent par fondu, chapitre par chapitre ; un fondu d'opacité
     sur un calque à part ne redessine rien */
  .has-stills img.stills__elev.is-part {
    opacity: 0;
    transition: opacity 0.9s var(--ease-out);
    will-change: opacity;
  }
  .has-stills img.stills__elev.is-part.is-on { opacity: 0.8; }

  /* Croquis détaillé : à droite du texte, cadré par son animation */
  .has-stills svg.stills__croquis { opacity: 0.85; }
}

@keyframes sketch-drift-side {
  to { transform: translateY(-50%) translateY(-10px) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stills__sketch,
  .stills.is-drawing .stills__sketch :is(path, circle)[pathLength] {
    animation: none;
    stroke-dashoffset: 0;
  }
  svg.stills__croquis .bub circle { animation: none; }
}