/* Hypervisible : accueil, sections sous le héros (film, méthode et rail des lundis, pile des cinq écrans, surfaces,
   offres). Feuille appelée dans le corps de la page, juste avant le film : elle ne retarde pas l'affichage du héros.
   Mêmes règles que accueil.css : états finals visibles sans script, mouvement par variables lues par des transform,
   aucune couleur littérale. */

/* ---------- Film : un cadre en perspective qui se redresse à l'approche ---------- */
.film-scene { margin-top: clamp(40px, 5vw, 64px); perspective: 1800px; perspective-origin: 50% 0; }
.film-cadre {
  position: relative; overflow: hidden; border-radius: var(--rayon-5); background: var(--noir) center / cover no-repeat;
  border: 1px solid var(--trait); box-shadow: var(--ombre-cadre), var(--trait-lumiere);
  transform-origin: 50% 100%; transform: rotateX(calc(var(--f, 0) * 24deg)) scale(calc(1 - var(--f, 0) * .08));
}
/* L'affiche : une image par langue et par orientation ; seule celle qui s'applique est téléchargée. Le poster de
   <video> est une image transparente : sans script, le lecteur natif laisse voir cette affiche au lieu d'un fond gris. */
html[lang="fr"] .film-cadre { background-image: url("films/affiche-v4-fr.jpg"); }
html[lang="en"] .film-cadre { background-image: url("films/affiche-v4-en.jpg"); }
@media (max-width: 700px) and (orientation: portrait) {
  .film-cadre, .film-video { aspect-ratio: 9 / 16; }
  html[lang="fr"] .film-cadre { background-image: url("films/affiche-v4-9x16-fr.jpg"); }
  html[lang="en"] .film-cadre { background-image: url("films/affiche-v4-9x16-en.jpg"); }
}
html[lang] .film-cadre.est-lance { background-image: none; }
.film-cadre::before {
  content: ""; position: absolute; z-index: -1; inset: auto 10% -30% 10%; height: 60%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo-scene), transparent 70%); filter: blur(40px);
}
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }

/* Lecteur (construit par assets/js/film.js ; sans script, les commandes natives de <video> restent). */
.film-ui { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; color: var(--encre); }
.film-lancer {
  position: absolute; left: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 22px 0 8px; border: 0; border-radius: var(--rayon-pilule); cursor: pointer;
  background: var(--bouton-primaire-fond); color: var(--bouton-primaire-encre); font: inherit; font-size: 15px; font-weight: var(--graisse-moyenne);
  box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--noir) 80%, transparent); z-index: 2;
  transition: transform var(--duree-rapide) var(--courbe), background-color var(--duree-rapide) var(--courbe), opacity var(--duree-normale) var(--courbe), visibility 0s linear 0s;
}
.film-lancer:hover { background: var(--primaire-survol); transform: translateY(-1px); }
.film-lancer:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
.film-lancer .rond { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bleu); color: var(--encre); }
.film-lancer .rond svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.film-lancer small { font-size: 13px; font-weight: var(--graisse-corps); color: color-mix(in srgb, var(--bouton-primaire-encre) 60%, transparent); font-variant-numeric: tabular-nums; }
.film-clic { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: pointer; }
/* La barre passe au-dessus de la zone de clic (.film-clic) : ses boutons reçoivent le pointeur. Masquée (en attente,
   à la fin, ou repliée pendant la lecture quand rien n'y a le focus), elle sort aussi de l'ordre de tabulation. */
.film-barre {
  position: relative; z-index: 1; grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 44px 16px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--noir) 78%, transparent), transparent);
  transition: opacity var(--duree-normale) var(--courbe), transform var(--duree-normale) var(--courbe), visibility 0s linear 0s;
}
.film-ui[data-etat="attente"] .film-barre, .film-ui[data-etat="fin"] .film-barre,
.film-ui[data-etat="lecture"].est-calme:not(:focus-within) .film-barre {
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, var(--duree-normale);
}
.film-ui[data-etat="lecture"] .film-lancer, .film-ui[data-etat="pause"] .film-lancer {
  opacity: 0; pointer-events: none; transform: translateY(6px); visibility: hidden; transition-delay: 0s, 0s, 0s, var(--duree-normale);
}
.film-bouton {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--rayon-2); cursor: pointer;
  background: var(--voile-2); color: var(--encre); transition: background-color var(--duree-rapide) var(--courbe);
}
.film-bouton:hover { background: var(--voile-4); }
.film-bouton:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
.film-bouton svg { width: 18px; height: 18px; fill: currentColor; }
.film-bouton .ic-onde { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film-temps { flex: none; min-width: 84px; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.film-piste { position: relative; flex: 1; height: 24px; display: flex; align-items: center; }
.film-piste input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Le fond visible de la piste laisse passer le pointeur : c'est le curseur (input range, transparent) qui le reçoit. */
.film-piste-fond { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--voile-4); overflow: hidden; pointer-events: none; }
.film-piste-fond i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--t, 0)); background: var(--faisceau); }
.film-piste:focus-within .film-piste-fond { box-shadow: var(--anneau-focus); }
/* Film chargé en entier (serveur sans Range : déplacement non suivi, erreur ou chargement bloqué) : la barre reste
   visible et attend, à l'instant demandé. Après la règle qui la replie : même spécificité, l'ordre décide. */
.film-cadre.est-chargement .film-piste input { cursor: progress; }
.film-cadre.est-chargement .film-piste-fond i { opacity: .55; }
.film-cadre.est-chargement .film-ui[data-etat="lecture"] .film-barre { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.film-cadre:fullscreen { border-radius: 0; border: 0; transform: none; display: grid; place-items: center; }
.film-cadre:fullscreen .film-video { height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .film-cadre { border-radius: var(--rayon-3); }
  .film-lancer { height: 44px; padding-right: 16px; font-size: 14px; }
  .film-lancer .rond { width: 30px; height: 30px; }
  .film-barre { gap: 6px; padding: 32px 8px 8px; }
  .film-temps { min-width: 0; font-size: 12px; }
  .film-bouton { width: 32px; height: 32px; }
}

/* ---------- Méthode : le rail des lundis, puis les quatre temps ---------- */
.rail {
  position: relative; margin-top: clamp(40px, 5vw, 64px); padding: 24px clamp(16px, 3vw, 32px) 22px; border-radius: var(--rayon-4);
  border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  /* Un halo suit le dernier lundi allumé : la lumière avance avec le relevé. */
  background: radial-gradient(420px 150px at calc(6% + var(--allume, 1) * 88%) 58%, color-mix(in srgb, var(--bleu) 13%, transparent), transparent 70%), var(--voile-1);
}
@media (max-width: 860px) {
  .rail { background: radial-gradient(260px 220px at 12% calc(18% + var(--allume, 1) * 70%), color-mix(in srgb, var(--bleu) 13%, transparent), transparent 70%), var(--voile-1); }
}
.rail-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.rail-titre { font-size: 15px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.rail-note { display: inline-flex; gap: 8px; font-size: 13px; color: var(--encre-2); }
.rail-liste { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 26px; --y-rail: 39px; }
.rail-liste::before, .rail-liste::after {
  content: ""; position: absolute; left: calc(100% / 18); right: calc(100% / 18); top: var(--y-rail); height: 2px; border-radius: 1px;
}
.rail-liste::before { background: var(--trait-fort); }
/* La part allumée du rail : pleine sans script ; le défilement la fait avancer de lundi en lundi. */
.rail-liste::after { right: calc(100% / 18 + 100% / 9); background: var(--faisceau); box-shadow: var(--lueur); transform-origin: 0 50%; transform: scaleX(var(--allume, 1)); }
.rail-lundi { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.rail-valeur { font-size: 15px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; color: var(--encre); transition: color var(--duree-normale) var(--courbe); }
.rail-noeud {
  position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--bleu);
  border: 2px solid var(--bleu-clair); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bleu) 16%, transparent), var(--lueur-forte);
  transition: background-color var(--duree-normale) var(--courbe), border-color var(--duree-normale) var(--courbe), box-shadow var(--duree-normale) var(--courbe), transform var(--duree-normale) var(--expo);
}
.rail-date { margin-top: 4px; font-size: 13px; font-weight: var(--graisse-moyenne); color: var(--encre-2); white-space: nowrap; }
.rail-num { font-size: 12px; color: var(--encre-3); }
.rail-lundi--prochain .rail-valeur { color: var(--encre-2); font-weight: var(--graisse-corps); }
.rail-lundi--prochain .rail-noeud { background: var(--fond); border: 1.5px solid var(--encre-3); box-shadow: none; }
.rail-lundi--prochain .rail-noeud::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--encre-3); }
.rail--anime .rail-lundi:not(.est-allume):not(.rail-lundi--prochain) .rail-noeud { background: var(--fond); border-color: var(--trait-fort); box-shadow: none; }
.rail--anime .rail-lundi:not(.est-allume):not(.rail-lundi--prochain) .rail-valeur { color: var(--encre-3); }
.rail--anime .rail-lundi.est-courant .rail-noeud { transform: scale(1.25); }
@media (max-width: 860px) {
  .rail-liste { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; padding-left: 28px; --y-rail: 0; }
  .rail-liste::before, .rail-liste::after { left: 6px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .rail-liste::after { bottom: calc(12px + 100% / 9); background: var(--bleu); box-shadow: none; transform-origin: 50% 0; transform: scaleY(var(--allume, 1)); }
  .rail-lundi { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date valeur" "num valeur"; justify-items: start; align-items: center; gap: 0 12px; padding: 7px 0; text-align: left; }
  .rail-noeud { position: absolute; left: 0; margin-top: 4px; }
  .rail-lundi { position: relative; }
  .rail-lundi .rail-noeud { left: -28px; }
  .rail-valeur { grid-area: valeur; }
  .rail-date { grid-area: date; margin-top: 0; }
  .rail-num { grid-area: num; }
}
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; margin-top: 48px; }
.etape { position: relative; padding-top: 22px; border-top: 1px solid var(--trait); }
.etape-num { display: block; font-size: 13px; font-weight: var(--graisse-moyenne); color: var(--bleu-texte); font-variant-numeric: tabular-nums; }
.etape h3 { margin-top: 12px; font-size: 20px; font-weight: var(--graisse-moyenne); line-height: 1.25; letter-spacing: -0.02em; }
.etape p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (max-width: 600px) { .etapes { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; } }

/* ---------- Ce que vous voyez : une rangée de texte par écran, la pile des cinq écrans ---------- */
.ecrans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(48px, 6vw, 80px); }
.ecran-texte h3 { margin-top: 12px; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); font-weight: var(--graisse-moyenne); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.ecran-texte > p { margin-top: 16px; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.points { display: grid; gap: 10px; margin-top: 24px; font-size: 14.5px; line-height: 1.45; color: var(--encre); }
.points li { position: relative; padding-left: 26px; }
.points li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 6px;
  border-left: 1.5px solid var(--encre-2); border-bottom: 1.5px solid var(--encre-2); transform: rotate(-45deg);
}
.pile, .pile-scene { display: contents; }
.ecran-ligne:nth-of-type(1) { grid-row: 1; } .pile-carte[data-ecran="resume"] { grid-row: 2; }
.ecran-ligne:nth-of-type(2) { grid-row: 3; } .pile-carte[data-ecran="questions"] { grid-row: 4; }
.ecran-ligne:nth-of-type(3) { grid-row: 5; } .pile-carte[data-ecran="reputation"] { grid-row: 6; }
.ecran-ligne:nth-of-type(4) { grid-row: 7; } .pile-carte[data-ecran="concurrents"] { grid-row: 8; }
.ecran-ligne:nth-of-type(5) { grid-row: 9; } .pile-carte[data-ecran="sources"] { grid-row: 10; }
.pile-pied { grid-row: 11; }
.ecran-ligne:not(:first-of-type) { margin-top: clamp(32px, 6vw, 56px); }
.pile-carte { margin: 0; padding: 18px 20px 20px; overflow: hidden; transform-origin: 50% 0; transform: perspective(1400px) rotateX(calc(var(--m, 0) * 16deg)) scale(calc(1 - var(--m, 0) * .04)); }
.pile-titre {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--rayon-1);
  background: var(--voile-3); box-shadow: var(--trait-lumiere); font-size: 12px; font-weight: var(--graisse-moyenne); color: var(--encre);
}
.pile-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pile-boutons { display: none; }
.pile-exemple { display: inline-flex; gap: 8px; font-size: 13px; color: var(--encre-2); }
.pc-bloc + .pc-bloc, .pp-ton + .pc-bloc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait); }
.pc-titre { margin-top: 12px; font-size: 15px; font-weight: var(--graisse-moyenne); letter-spacing: -0.01em; }
.pc-bloc + .pc-bloc .pc-titre, .pp-ton + .pc-bloc .pc-titre { margin-top: 0; }
.pc-sous { margin-top: 2px; font-size: 12.5px; color: var(--encre-2); }

/* Résumé : ce qui a changé, et quatre chiffres. */
.pr-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px 28px; margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--trait); }
.pr-kpi + .pc-bloc { margin-top: 14px; }
.pr-valeur { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--encre-2); }
.pr-valeur b { font-size: 44px; font-weight: var(--graisse-moyenne); line-height: 1; letter-spacing: -0.04em; color: var(--encre); font-variant-numeric: tabular-nums; }
.pr-valeur b small { font-size: .5em; color: var(--encre-2); }
.pr-courbe { max-height: 64px; }
.pr-changes { display: grid; gap: 10px; margin-top: 12px; }
.pr-changes li { display: flex; gap: 12px; align-items: flex-start; }
.pr-fleche { position: relative; flex: none; width: 26px; height: 26px; border-radius: var(--rayon-2); background: var(--mieux-fond); }
.pr-fleche::before { content: ""; position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; margin-left: -4px; border-left: 1.5px solid var(--mieux); border-top: 1.5px solid var(--mieux); transform: rotate(45deg); }
.pr-fleche::after { content: ""; position: absolute; left: 50%; top: 9px; width: 1.5px; height: 10px; margin-left: -1px; background: var(--mieux); }
.pr-changes p { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--encre-2); }
.pr-changes b { font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.pr-changes .surface { font-size: 12.5px; }
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait); }
.pr-stats li { display: grid; align-content: start; gap: 4px; font-size: 12px; color: var(--encre-2); }
.pr-stats b { font-size: 22px; font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; color: var(--encre); font-variant-numeric: tabular-nums; }
.pr-stats .badge { justify-self: start; height: 20px; font-size: 11px; }

/* Questions : classées par demande, un disque par surface. */
.pq-tete, .pq-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) 60px 146px 30px; align-items: center; gap: 10px; }
.pq-tete { margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); font-size: 11.5px; color: var(--encre-2); }
.pq-tete > span:first-child { grid-column: 2; text-align: right; white-space: nowrap; }
.pq-disques { display: flex; justify-content: space-between; }
.pq-tete .pq-disques { grid-column: 3; }
.pq-surface { display: grid; place-items: center; width: 22px; height: 10px; }
.pq-surface::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pq-lignes li { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.pq-lignes li:last-child { border-bottom: 0; }
.pq-question { font-size: 13.5px; line-height: 1.35; color: var(--encre); }
.pq-demande { text-align: right; font-size: 13px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
.pq-compte { text-align: right; font-size: 13px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }

/* Réputation : le ton, les marques proposées à côté, un fait énoncé. */
.pp-chiffre { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--encre-2); }
.pp-chiffre b { font-size: 34px; font-weight: var(--graisse-moyenne); letter-spacing: -0.04em; line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; }
.pp-barre { display: flex; height: 6px; margin-top: 12px; border-radius: 3px; overflow: hidden; background: var(--moins); }
.pp-barre i { display: block; width: var(--v); height: 100%; }
.pp-pos { background: var(--mieux); } .pp-neu { background: var(--moteur-autre); }
.pp-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 12px; color: var(--encre-2); }
.pp-legende li { display: inline-flex; align-items: center; gap: 6px; }
.pp-legende b { color: var(--encre); font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
.pp-pastille-pos { --c: var(--mieux); } .pp-pastille-neu { --c: var(--moteur-autre); } .pp-pastille-neg { --c: var(--moins); }
.pp-alternatives { display: grid; gap: 7px; margin-top: 10px; }
.pp-alternatives li { display: grid; grid-template-columns: 12px 24px 104px minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 13px; }
.pa-rang { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.pp-alternatives b { text-align: right; font-size: 12px; font-weight: var(--graisse-moyenne); color: var(--encre-2); white-space: nowrap; }
.pp-fait { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--rayon-2); background: var(--voile-1); border: 1px solid var(--trait); }
.pp-fait p { font-size: 13px; line-height: 1.45; color: var(--encre); }
.pp-fait footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pp-fait .surface { font-size: 12px; }
.pp-fait .badge { height: 20px; font-size: 11px; }

/* Concurrents : surface par surface, le disque grandit avec le taux. */
.pm-tete, .pm-lignes li { display: grid; grid-template-columns: 128px repeat(5, minmax(0, 1fr)); align-items: center; gap: 4px; }
.pm-tete { margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); }
.pm-tete .surface { flex-direction: column; gap: 4px; font-size: 11px; }
.pm-tete > span { display: flex; justify-content: center; }
.pm-lignes li { padding: 6px 0; border-bottom: 1px solid var(--trait); }
.pm-lignes li:last-child { border-bottom: 0; }
.pm-lignes li.est-moi { background: color-mix(in srgb, var(--bleu) 7%, transparent); border-radius: var(--rayon-1); }
.pm-marque { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--graisse-moyenne); white-space: nowrap; }
.pm-marque .logo-marque { width: 22px; height: 22px; }
.pm-cellule { display: grid; justify-items: center; gap: 2px; }
/* Le disque grandit avec le taux ; à 0 % il reste un point, jamais une case vide. */
.pm-disque { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--moteur-autre); transform: scale(max(var(--v), 18%)); }
.est-moi .pm-disque { background: var(--bleu); box-shadow: 0 0 10px color-mix(in srgb, var(--bleu) 50%, transparent); }
.pm-cellule b { font-size: 11px; font-weight: var(--graisse-moyenne); color: var(--encre-2); font-variant-numeric: tabular-nums; }

/* Sources et évolution : les domaines à conquérir, la trajectoire. */
.ps-domaines { display: grid; gap: 8px; margin-top: 10px; }
.ps-domaines li { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr) 96px; align-items: center; gap: 10px; font-size: 13px; }
.ps-initiale { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--rayon-1); background: var(--voile-3); font-size: 10px; font-weight: var(--graisse-forte); color: var(--encre-2); }
.ps-domaines b { text-align: right; font-size: 12px; font-weight: var(--graisse-moyenne); color: var(--attention); white-space: nowrap; }
.jauge--attention i { background: var(--attention); }
.ps-ecart { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--encre-2); }
.ps-courbe { margin-top: 6px; }

/* Grand écran avec script : la pile tient à droite pendant que les textes défilent, elle s'ouvre en éventail et se feuillette. */
@media (min-width: 1100px) {
  .ecrans { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 5vw, 80px); }
  .ecran-ligne { grid-column: 1; display: flex; align-items: center; min-height: 72vh; }
  .ecran-ligne:not(:first-of-type) { margin-top: 0; }
  .ecran-ligne:nth-of-type(1) { grid-row: 1; } .ecran-ligne:nth-of-type(2) { grid-row: 2; } .ecran-ligne:nth-of-type(3) { grid-row: 3; }
  .ecran-ligne:nth-of-type(4) { grid-row: 4; } .ecran-ligne:nth-of-type(5) { grid-row: 5; }
  .pile { display: grid; grid-column: 2; grid-row: 1 / span 5; align-self: start; position: sticky; top: calc(var(--hauteur-barre) + 5vh); gap: 18px; perspective: 1800px; perspective-origin: 20% 0; }
  /* La pile est un objet dans l'espace : légèrement tournée vers le texte, penchée en arrière. */
  .pile-scene {
    display: block; position: relative; height: 590px; transform-style: preserve-3d;
    transform: rotateX(7deg) rotateY(-9deg); transform-origin: 50% 60%;
  }
  .pile-carte {
    --i: 0; position: absolute; left: 0; right: 0; top: 76px; height: 500px; grid-row: auto;
    transform-origin: 0 100%;
    transform: translate3d(0, calc(var(--d, 0) * -19px), calc(var(--d, 0) * -64px));
    z-index: calc(10 - var(--d, 0));
    transition: transform 760ms var(--expo);
  }
  /* Voile des écrans de derrière : grand écran seulement ; à plat (petit écran, sans script), aucune carte n'est voilée. */
  .pile-carte::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: var(--noir); opacity: calc(var(--d, 0) * .16); pointer-events: none; transition: opacity 700ms var(--expo); }
  .pile-carte:nth-child(2) { --i: 1; --d: 1; } .pile-carte:nth-child(3) { --i: 2; --d: 2; }
  .pile-carte:nth-child(4) { --i: 3; --d: 3; } .pile-carte:nth-child(5) { --i: 4; --d: 4; }
  /* L'éventail tourne autour du coin bas gauche : les écrans de derrière s'ouvrent vers le haut et la droite,
     jamais vers le texte. Entrouverte (survol) : la même ouverture, à moitié. */
  .pile--entrouverte .pile-carte {
    transform-origin: 0 100%;
    transform: translate3d(0, calc(var(--d, 0) * -14px), calc(var(--d, 0) * -64px)) rotateZ(calc(var(--d, 0) * -1.1deg));
  }
  .pile--eventail .pile-carte {
    transform-origin: 0 100%;
    transform: translate3d(0, calc(var(--d, 0) * -10px), calc(var(--d, 0) * -48px)) rotateZ(calc(var(--d, 0) * -2.6deg));
  }
  .pile-carte.est-cliquable { cursor: pointer; }
  .pile-pied { grid-row: auto; }
  .pile-boutons { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rayon-2); background: var(--voile-2); border: 1px solid var(--trait); }
  .pile-bouton {
    height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--encre-2); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: var(--graisse-moyenne); white-space: nowrap;
    transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
  }
  .pile-bouton:hover { color: var(--encre); }
  .pile-bouton.est-actif { background: var(--panneau-3); color: var(--encre); box-shadow: var(--trait-lumiere); }
  .pile-bouton:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
}
@media (max-width: 640px) {
  .pile-carte { padding: 16px 14px 18px; }
  .pq-tete, .pq-lignes li { grid-template-columns: minmax(0, 1fr) 128px 28px; gap: 8px; }
  .pq-tete > span:first-child, .pq-demande { display: none; }
  .pq-tete .pq-disques { grid-column: 2; }
  .pq-disques { gap: 4px; }
  .pq-lignes .disque { width: 20px; height: 20px; }
  .pq-lignes li:nth-child(n+6) { display: none; }
  .pp-alternatives li { grid-template-columns: 12px 24px minmax(0, 1fr) 76px; }
  .pp-alternatives .jauge { display: none; }
  .pm-tete, .pm-lignes li { grid-template-columns: 96px repeat(5, minmax(0, 1fr)); }
  .pm-marque { font-size: 12px; gap: 6px; }
  .pm-tete .surface { font-size: 9.5px; }
  .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .ps-domaines li { grid-template-columns: 22px minmax(0, 1fr) 88px; }
  .ps-domaines .jauge { display: none; }
}

/* ---------- Surfaces : cinq cartes qui basculent ---------- */
.surfaces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 64px; perspective: 1400px; }
.carte-surface {
  position: relative; display: flex; flex-direction: column; padding: 22px 22px 26px; border-radius: var(--rayon-3);
  background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  transform-origin: 50% 100%; transform: rotateX(var(--bx, 0deg)) rotateY(var(--by, 0deg));
  transition: transform 900ms var(--expo), background-color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.carte-surface:hover { background: var(--voile-3); border-color: var(--trait-fort); }
/* Reflet sous le pointeur : la carte capte la lumière là où on la penche. */
.carte-surface::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--encre) 10%, transparent), transparent 62%);
  transition: opacity var(--duree-normale) var(--courbe);
}
.carte-surface.est-suivie::after { opacity: 1; }
.carte-surface.est-suivie { transition-duration: 160ms, var(--duree-rapide), var(--duree-rapide); }
@supports (grid-template-rows: subgrid) {
  .surfaces { grid-template-rows: auto auto auto auto; }
  .carte-surface { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.logo-ia {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--encre);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--c) 60%, transparent);
}
.logo-ia img { width: 20px; height: 20px; }
.carte-surface h3 { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 18px; font-weight: var(--graisse-moyenne); line-height: 1.3; letter-spacing: -0.01em; }
.carte-surface h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.carte-surface .kicker { margin-top: 22px; font-size: 12px; color: var(--encre-2); }
.carte-surface p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--encre-2); }
@media (max-width: 1100px) {
  .surfaces { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .carte-surface { grid-column: span 2; }
  .carte-surface:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 640px) {
  .surfaces { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .carte-surface, .carte-surface:nth-child(n+4) { grid-column: auto; grid-row: auto; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: none; gap: 0 14px; padding: 18px 18px 20px; }
  .carte-surface .logo-ia { grid-row: span 3; }
  .carte-surface h3 { margin-top: 6px; }
  .carte-surface .kicker { margin-top: 10px; }
}

/* ---------- Offres : les cartes se posent, la lumière passe sur Fondateurs ---------- */
.offres { perspective: 1600px; }
.offre { transform-origin: 50% 100%; transform: translate3d(0, var(--oy, 0px), 0) rotateX(var(--ox, 0deg)); transition: transform 900ms var(--expo), background-color var(--duree-rapide) var(--courbe); }
.offre--mise::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; pointer-events: none;
  background: var(--ligne-faisceau); transform-origin: 0 50%; transform: scaleX(var(--balayage, 1)); opacity: .9;
  transition: transform 1400ms var(--expo);
}

/* ---------- Mouvement réduit : tout est à sa place, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .film-cadre, .pile-carte, .carte-surface, .offre { transition: none !important; }
  .film-cadre { transform: none; }
  .rail-noeud, .rail-valeur, .pile-carte::before { transition: none; }
}