/* Plans 3 à 6 : les machines, en vrai. Une photo plein cadre par machine ; le nom, trois chiffres et le prix sont écrits dessus. */
.machines { position: relative; background: var(--nuit); }
.machines__ancres, .machines__compteur, .machines__nav { display: none; }

/* Sans mouvement : quatre plans empilés, photos fixes. */
.machine { position: relative; min-height: 100svh; overflow: hidden; }
.machine__photo, .machine__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine__photo img { object-fit: cover; }
/* Voile : dense en haut (le nom et « ou équivalent ») et en bas (chiffres et prix), la machine reste lisible au milieu. */
.machine__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(10 18 25 / .84), rgb(10 18 25 / .62) 40%, rgb(10 18 25 / .26) 56%, rgb(10 18 25 / .86) 82%, rgb(10 18 25 / .94));
}
.machine__cadre {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "nom nom" ". ." "chiffres prix";
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0 48px; min-height: calc(100svh - var(--entete-h)); margin-top: var(--entete-h); padding-block: 8px calc(var(--bas) + 88px);
}
/* « ou équivalent » tient au nom, 12 px sous sa ligne de base ; sous « Spark », le jambage du p lui fait place. */
.machine__titre { grid-area: nom; }
.machine__nom { margin-bottom: -.08em; font-weight: 300; font-size: clamp(112px, min(23vw, 34svh), 340px); line-height: .86; white-space: nowrap; }
.machine__nom--jambage { padding-bottom: .27em; }
.machine__equiv { margin-top: 8px; font-size: 17px; color: var(--ecume); }
.machine__chiffres { grid-area: chiffres; align-self: end; display: flex; gap: clamp(28px, 4.5vw, 72px); }
.machine__chiffres > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.machine__chiffres dt { font-size: 14px; color: var(--reflet); }
.machine__chiffres dd { font-size: 56px; white-space: nowrap; }
.machine__prix { grid-area: prix; align-self: end; max-width: 26em; font-size: 16px; color: var(--reflet); }
.machine__prix ul { margin-bottom: 12px; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; color: var(--ecume); }
.machine__prix li b { font-weight: 400; }
.machine__prix li:not(:first-child) { color: var(--reflet); }
.machine__prix p + p { margin-top: 2px; }
.machine__prix .lien { margin-top: 6px; color: var(--ecume); }
.machine__mot { font-size: clamp(34px, 3.4vw, 56px); font-weight: 300; line-height: 1.04; color: var(--ecume); }
.machine__mot span { display: block; }

/* ---------- avec mouvement : scène collante de 100 svh sur une piste de 400 svh, quatre repères ---------- */
.anime .machines { height: 400svh; }
.anime .machines__ancres { display: block; position: absolute; inset: 0; pointer-events: none; }
.anime .machines__ancres i { display: block; height: 100svh; }
.anime .machines__scene { position: sticky; top: 0; height: 100svh; overflow: clip; }
.anime .machine { position: absolute; inset: 0; min-height: 0; }
.anime .machine__photo { will-change: opacity; }
.anime .machine__photo img { will-change: transform; }
.anime .machine:not(:first-of-type) .machine__photo { opacity: 0; }
/* Les textes cachés restent atteignables au clavier : un lien qui prend le focus amène sa machine à l'écran. */
.anime .machine:not(:first-of-type) .machine__cadre { opacity: 0; pointer-events: none; }
.anime .machine__cadre { height: calc(100% - var(--entete-h)); min-height: 0; }
.anime .machines__cadre { position: absolute; z-index: 2; left: 0; right: 0; top: var(--entete-h); bottom: 0; pointer-events: none; }
.anime .machines__cadre:focus { outline: none; }
.anime .machines__nav { position: absolute; bottom: calc(var(--bas) + 24px); display: flex; gap: 28px; pointer-events: auto; }
.machines__nav a { display: flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; color: var(--brume); text-decoration: none; }
.machines__nav a[aria-current] { color: var(--ecume); font-weight: 700; }
@media (hover: hover) { .machines__nav a:hover { color: var(--ecume); } }

/* ---------- téléphone : nom à 34 vw en haut, trois chiffres à 66 % de la hauteur, prix dans la bande basse ---------- */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
  .machine__photo::after { background: linear-gradient(to bottom, rgb(10 18 25 / .84), rgb(10 18 25 / .62) 32%, rgb(10 18 25 / .2) 50%, rgb(10 18 25 / .9) 70%, rgb(10 18 25 / .95)); }
  .machine__cadre {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "nom" "." "chiffres" "prix"; padding-block: 34px calc(var(--bas) + 20px);
  }
  .machine__nom { font-size: min(34vw, 22svh); }
  .machine__equiv { margin-top: 8px; font-size: 16px; }
  .machine__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .machine__chiffres dd { font-size: clamp(32px, 9.2vw, 56px); }
  .machine__chiffres dt { font-size: 14px; }
  /* Au téléphone, le prix est dans la bande basse : le plan garde le nom, trois chiffres et la formule. */
  .machine__prix { max-width: none; margin-top: clamp(12px, 2.2svh, 22px); font-size: 16px; line-height: 1.4; }
  .machine__prix ul, .machine__saison { display: none; }
  .anime .machine__prix .lien { display: none; }
  .machine__mot { font-size: clamp(34px, 9.6vw, 60px); }
  .machine__mot span { display: inline; }
  .anime .machines__compteur { display: block; position: absolute; top: 10px; font-size: 14px; color: var(--reflet); font-variant-numeric: tabular-nums; }
  .anime .machines__nav { display: none; }
}
@media (min-width: 768px) and (orientation: portrait) and (max-width: 1023px) {
  .anime .machine__prix .lien { display: inline-flex; }
}
@media (max-height: 640px) and (max-width: 767px) { .machine__saison { display: none; } }
/* Téléphone couché : 390 px de haut, le nom rapetisse et la navigation des noms s'efface. */
@media (max-height: 520px) and (orientation: landscape) {
  .machine__nom { font-size: 22svh; }
  .machine__cadre { padding-bottom: 24px; }
  .anime .machines__nav { display: none; }
  .machine__chiffres dd { font-size: 32px; }
  .machine__prix { font-size: 14px; }
  .machine__prix ul { font-size: 24px; }
}