/* Une seule voix : greffe de la série « hub-ai-site », adaptée aux jetons du nouveau site (jetons.css).
   Panneau sombre arrondi (coquille.css), signal = var(--accent), Instrument Sans, pastilles en pilule.
   Sans JS ou en mouvement réduit : état « avant / après » fixe (SVG). Avec mouvement : section épinglée. */
.voix__colle { padding-block: 0; }
.voix__haut { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-8) var(--e-12); align-items: end; }
.voix__repere { margin-bottom: var(--e-4); }
.voix__tete .t-titre { max-width: 20ch; }
.voix__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.voix__etapes li { display: grid; grid-template-columns: 2.5em 1fr; column-gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--rayon); border: var(--trame) solid var(--bordure); transition: border-color var(--duree-lente) var(--courbe), background-color var(--duree-lente) var(--courbe), opacity var(--duree-lente) var(--courbe); }
.voix__etapes .t-donnees { color: var(--texte-doux); grid-row: span 2; padding-top: 0.2em; }
.voix__etapes h3 { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.voix__etapes p { margin: var(--e-1) 0 0; color: var(--texte-doux); font-size: var(--t-s); line-height: var(--interligne-texte); }
.voix__scene { display: none; margin: 0; }
.voix__statique { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); margin-top: var(--e-16); }
.voix__statique figure { margin: 0; padding: var(--e-6); border-radius: var(--rayon); background: var(--surface); }
.voix__statique figcaption { margin-bottom: var(--e-4); }
.voix__statique figcaption b { color: var(--accent); font-weight: var(--graisse-interface); }
.voix__statique svg { display: block; width: 100%; height: clamp(150px, 16vw, 240px); }
.voix__noms-s { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.voix__noms-s li, .voix__nom, .voix__une { display: inline-flex; align-items: center; gap: var(--e-2); padding: 0.3em 0.8em; border-radius: var(--rayon-action); background: var(--fond); border: var(--trame) solid var(--bordure); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-xs); color: var(--texte); white-space: nowrap; }
.voix__noms-s i, .voix__nom i, .voix__une i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.voix [data-i="1"] { --c: var(--accent-2); }
.voix [data-i="2"] { --c: var(--texte-doux); }
.voix__bas { margin-top: var(--e-12); }
.voix__fin { margin: 0; max-width: 16ch; }
.voix__fin .pastille { letter-spacing: -0.03em; }

/* Avec mouvement : piste épinglée */
.js-mouvement .voix { height: 330vh; padding-block: 0; }
.js-mouvement .voix__colle { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--barre) + var(--e-6)) 0 var(--e-8); overflow: hidden; border-radius: var(--rayon-panneau); }
.js-mouvement .voix__statique { display: none; }
.js-mouvement .voix__scene { display: block; position: relative; flex: 1; min-height: 170px; }
.voix__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voix__ligne { position: absolute; top: 4%; bottom: 4%; left: 0; width: 2px; border-radius: 2px; background: var(--accent); transform: translateX(var(--lx, 0px)); opacity: var(--lo, 1); }
.voix__diag { position: absolute; top: -0.6em; left: 12px; font-size: var(--t-xs); font-family: var(--police-interface); font-weight: var(--graisse-interface); padding: 0.35em 0.8em; transform: translateX(var(--dl, 0)); white-space: nowrap; }
.voix__noms { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.voix__nom { position: absolute; right: var(--gouttiere); top: 50%; transform: translateY(calc(var(--y, 0px) - 50%)); opacity: var(--o, 1); }
.voix__une { position: absolute; left: var(--gouttiere); top: 50%; transform: translateY(calc(-50% - clamp(56px, 9vh, 96px))); opacity: var(--uo, 0); }
.js-mouvement .voix__bas { margin-top: var(--e-6); }
.js-mouvement .voix__fin { font-size: var(--t-titre); opacity: var(--fo, 0.22); transform: translateY(calc((1 - var(--fo, 0.22)) * 20px)); }
.js-mouvement .voix__etapes li { opacity: 0.62; }
.js-mouvement .voix__etapes li[aria-current] { opacity: 1; border-color: var(--accent); background: var(--surface); }
.js-mouvement .voix__etapes li[aria-current] .t-donnees { color: var(--accent); }

@media (max-width: 900px) {
  .voix__haut { grid-template-columns: 1fr; }
  .voix__statique { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .js-mouvement .voix { height: 300vh; }
  .js-mouvement .voix__colle { padding-top: calc(var(--barre) + var(--e-2)); }
  .js-mouvement .voix__haut { gap: var(--e-3); }
  .js-mouvement .voix__tete .t-titre { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .js-mouvement .voix__repere { margin-bottom: var(--e-2); }
  .js-mouvement .voix__etapes { display: block; position: relative; min-height: 7.4em; }
  .js-mouvement .voix__etapes li { position: absolute; inset: 0 0 auto; opacity: 0; }
  .js-mouvement .voix__etapes li[aria-current] { opacity: 1; }
  .voix__nom { right: auto; left: var(--gouttiere); }
  .js-mouvement .voix__fin { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}