/* Hypervisible : accueil (/fr/, /en/), ce qu'il faut pour afficher le haut de page : fragments d'application
   (panneaux, logos de marques, disques de rang, courbes) et héros en perspective. Les sections suivantes sont dans
   sections.css, le tableau de bord dans tableau.css, toutes deux appelées dans le corps de la page (non bloquantes
   pour le héros). Jetons : tokens-marque.css ; composants communs : site.css.
   La page est complète et lisible sans script : chaque état ci-dessous est l'état final, visible. Le mouvement
   (assets/js/*.js) n'écrit que des variables (--p, --px, --f, --d…) lues par des transform ; il ne cache rien.
   Une seule source de lumière : le faisceau, à gauche ; les reflets partent du haut à gauche, les ombres tombent
   en bas à droite. Aucune couleur littérale : teintes dérivées des jetons par color-mix(). */

:root {
  --frag-fond: color-mix(in srgb, var(--panneau) 94%, var(--bleu));
  --frag-reflet: linear-gradient(135deg, color-mix(in srgb, var(--encre) 8%, transparent) 0%, transparent 34%);
  --frag-ombre: 0 40px 80px -24px color-mix(in srgb, var(--noir) 90%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--noir) 75%, transparent);
  --bord-lumiere: color-mix(in srgb, var(--bleu-texte) 50%, transparent);
  --lueur-cadre: 0 0 0 1px var(--bord-lumiere), 0 0 40px color-mix(in srgb, var(--bleu) 26%, transparent);
  --halo-scene: color-mix(in srgb, var(--bleu) 20%, transparent);
  --disque-absent: color-mix(in srgb, var(--encre) 26%, transparent);
}

/* ---------- Fragments d'application : des morceaux d'écran posés dans l'espace ---------- */
.frag {
  position: relative; border-radius: var(--rayon-4); background: var(--frag-fond); color: var(--encre);
  border: 1px solid var(--trait); box-shadow: var(--trait-lumiere), var(--frag-ombre);
}
.frag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--frag-reflet); pointer-events: none; }
.frag--lumiere { border-color: var(--bord-lumiere); box-shadow: var(--trait-lumiere), var(--lueur-cadre), var(--frag-ombre); }

.logo-marque {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--encre); color: var(--encre-inverse); box-shadow: 0 0 0 1px var(--trait);
}
.logo-marque svg { width: 62%; height: 62%; fill: currentColor; }
.logo-marque--moi { background: var(--bleu); color: var(--encre); box-shadow: 0 0 18px color-mix(in srgb, var(--bleu) 55%, transparent); }
.logo-marque--grand { width: 40px; height: 40px; }

.disque {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; vertical-align: middle; /* même place, vide ou chiffré */
  background: var(--c, var(--moteur-autre)); color: var(--encre-inverse); font-size: 11px; font-weight: var(--graisse-forte);
  font-variant-numeric: tabular-nums; line-height: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--moteur-autre)) 45%, transparent);
}
.disque.est-absente { background: transparent; box-shadow: inset 0 0 0 1.5px var(--disque-absent); }

.courbe { display: block; width: 100%; height: auto; overflow: visible; }
.courbe-trait { fill: none; stroke: var(--bleu); stroke-width: var(--trait-courbe); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bleu) 60%, transparent)); }
.courbe-point { fill: var(--fond); stroke: var(--bleu-texte); stroke-width: 1.5; }
.courbe-point.est-dernier { fill: var(--bleu); stroke: var(--bleu-clair); filter: drop-shadow(0 0 6px var(--bleu)); }
.courbe-etiquette { fill: var(--encre-2); font-size: 11px; font-weight: var(--graisse-moyenne); text-anchor: middle; }
.g-aire-haut { stop-color: var(--bleu); stop-opacity: .3; }
.g-aire-bas { stop-color: var(--bleu); stop-opacity: 0; }

/* ---------- Héros : texte à gauche, scène en perspective à droite ---------- */
.heros { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-top: clamp(48px, 6vw, 88px); }
.heros::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -130px; left: 40%;
  width: min(1100px, 110vw); height: 700px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), var(--halo-doux) 55%, transparent 72%); filter: blur(30px);
}
.heros-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.heros-tete { position: relative; }
.heros-tete .kicker {
  display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px 0 12px; border-radius: var(--rayon-pilule);
  background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere); font-size: 13px; color: var(--encre-2);
}
.heros-tete .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu-texte); box-shadow: var(--lueur-point); flex: none; }
.titre-heros {
  position: relative; isolation: isolate; max-width: 8em; margin-top: 28px;
  font-size: var(--taille-heros); line-height: var(--interligne-titre); letter-spacing: var(--approche-heros);
}
/* Le faisceau : dessiné sous les lettres, il sort de la fin du titre et traverse la scène, derrière le panneau. */
.titre-heros::before, .titre-heros::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 5.4em; top: 50%; width: 100vw; background: var(--faisceau-titre);
}
.titre-heros::before { height: .13em; margin-top: -.065em; border-radius: 1em; filter: blur(1px); }
.titre-heros::after { height: .9em; margin-top: -.45em; filter: blur(22px); opacity: .4; }
.heros-droite { max-width: 600px; margin-top: 28px; }
.heros-droite .chapeau { margin-top: 0; }
.heros-droite .actions { margin-top: 32px; }
.heros-note { margin-top: 16px; font-size: 13px; color: var(--encre-3); }
.surfaces-ligne { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; }
.heros-scene { position: relative; min-width: 0; }
/* Au-dessus de la scène : l'ombre portée des plans ne doit jamais assombrir ce texte. */
.legende { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--encre-2); }
.legende span { min-width: 0; }
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--attention)); flex: none; }
.legende .pastille, .rail-note .pastille, .pile-exemple .pastille { margin-top: .45em; }

/* La scène : un plateau en perspective ; chaque plan a sa profondeur (--z) et sa vitesse au défilement (--vy). */
.scene { position: relative; perspective: 1500px; perspective-origin: 28% 40%; }
.scene::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 0 12% 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo-scene), transparent 72%); filter: blur(40px);
}
.scene-plateau { position: relative; transform-style: preserve-3d; }
.scene-plateau > * { --z: 0px; --vy: 0px; }

.scene-resume { padding: 18px 20px 20px; }
.fr-tete { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.fr-titre { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--encre-2); }
.fr-titre b { font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.fr-ecran {
  margin-left: auto; 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);
}
.fr-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 24px; padding-top: 16px; }
.fk-valeur { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.fk-chiffre { font-size: 56px; font-weight: var(--graisse-moyenne); line-height: var(--interligne-chiffre); letter-spacing: var(--approche-heros); font-variant-numeric: tabular-nums; }
.fk-chiffre small { font-size: .5em; letter-spacing: -0.02em; color: var(--encre-2); }
.fk-note { margin-top: 6px; font-size: 12px; color: var(--encre-2); }
.fr-courbe { margin-top: 14px; }
.fr-surfaces { display: grid; align-content: center; gap: 12px; }
.fr-surfaces li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; align-items: center; gap: 10px; }
.fr-surfaces .surface { font-size: 12px; }
.fr-surfaces b { text-align: right; font-size: 13px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
.badge { transition: background-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe); }

.scene-marques { display: grid; gap: 10px; }
.scene-marques li { display: flex; align-items: center; gap: 8px; }
.pilule-rang { width: 12px; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; text-align: right; }
.pilule-marque {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 8px; border-radius: var(--rayon-pilule);
  background: var(--frag-fond); border: 1px solid var(--trait-fort); box-shadow: var(--trait-lumiere), var(--frag-ombre);
  font-size: 14px; font-weight: var(--graisse-moyenne); white-space: nowrap;
}
.pilule-marque b { margin-left: 6px; font-weight: var(--graisse-moyenne); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.pilule-marque.est-moi { border-color: var(--bord-lumiere); box-shadow: var(--trait-lumiere), var(--lueur-cadre), var(--frag-ombre); }
.pilule-marque.est-moi b { color: var(--bleu-clair); }

.scene-page { padding: 14px 16px; }
.sp-chemin { margin-top: 6px; font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); overflow-wrap: anywhere; }
.sp-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--encre-2); }
.sp-surfaces { display: flex; gap: 5px; }

.carte-question { padding: 18px 20px; }
.cq-texte { margin-top: 10px; min-height: 1.3em; font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; color: var(--encre); }
.cq-guillemet { color: var(--bleu-texte); }
/* Pendant la frappe : le curseur est le bord droit du texte lui-même (rien ne le suit dans la ligne, donc aucun
   décalage de mise en page) ; le guillemet fermant revient quand la question est écrite. */
.cq-q.est-frappe { border-right: 2px solid var(--bleu); }
.fl-table { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; }
.fl-table th { padding: 0 2px 8px; font-weight: var(--graisse-moyenne); text-align: center; border-bottom: 1px solid var(--trait); }
.fl-table th .surface { flex-direction: column; gap: 5px; font-size: 11px; }
.fl-table th:last-child { width: 44px; font-size: 11px; color: var(--encre-2); text-align: right; vertical-align: bottom; }
.fl-table td { padding: 10px 0 0; text-align: center; }
.fl-table td:last-child { text-align: right; font-size: 14px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
.fl-table .disque { transition: transform var(--duree-normale) var(--expo), background-color var(--duree-normale) var(--courbe); }
.cq-pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 12.5px; color: var(--encre-2);
}
.cq-pied b { font-weight: var(--graisse-moyenne); color: var(--encre); font-variant-numeric: tabular-nums; }

/* Grand écran : les plans flottent autour du Résumé, chacun à sa profondeur. */
@media (min-width: 1100px) {
  .heros-grille { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 24px; align-items: center; }
  .heros .titre-heros { font-size: clamp(3rem, 1.1rem + 3.4vw, 4.25rem); }
  .heros-droite { margin-top: 24px; }
  .heros-scene { margin-right: calc(-1 * var(--gouttiere)); }
  .scene { height: 640px; }
  .scene-plateau {
    position: absolute; inset: 0;
    transform: translate3d(0, calc(var(--p, 0) * -36px), 0) rotateX(calc(8deg + var(--p, 0) * 9deg + var(--px, 0deg))) rotateY(calc(15deg - var(--p, 0) * 5deg + var(--py, 0deg)));
  }
  .scene-plateau > * { position: absolute; transform: translate3d(0, calc(var(--p, 0) * var(--vy)), calc(var(--z) * (1 + var(--p, 0) * .7))); }
  .scene-resume { left: 176px; top: 70px; width: 560px; --vy: -10px; }
  .scene-marques { left: 0; top: 84px; --z: 120px; --vy: -80px; }
  .scene-page { right: 4px; top: -22px; width: 330px; --z: 70px; --vy: -46px; }
  .sp-chemin { font-size: 13px; white-space: nowrap; }
  /* Assez large pour que chaque question tienne sur une ligne : la frappe ne change jamais la hauteur de la carte. */
  .carte-question { left: 96px; top: 408px; width: 470px; --z: 96px; --vy: -110px; }
  .fr-saillie { transform: translateZ(40px); }
  .legende { justify-content: flex-end; padding-right: var(--gouttiere); margin-top: 44px; }
}
/* Petit écran d'ordinateur (1100 à 1365 px : portables 1280 et 1366, ou 1920 à 150 %) : la colonne de la scène ne
   fait que 480 à 680 px et le héros coupe tout ce qui dépasse (overflow: clip). Les plans s'ancrent donc à DROITE,
   à 20 px du bord, et leur largeur se borne à la colonne ; les positions fixes du grand écran (left: 176px…) faisaient
   sortir le Résumé de 20 à 113 px (mesuré le 30/09 : « l'écran est coupé » sur le petit PC de Martin). */
@media (min-width: 1100px) and (max-width: 1365px) {
  .scene-plateau > * { scale: .88; }
  .scene-resume { left: auto; right: 20px; width: min(560px, calc(100% - 20px)); }
  .scene-page { right: 24px; }
  .carte-question { left: auto; right: 60px; width: min(470px, calc(100% - 40px)); }
}
/* Écran moyen et mobile : la scène se simplifie (le Résumé, les pilules de marques, la question). */
@media (max-width: 1099px) {
  .scene { padding: 8px 0 0; }
  .scene-plateau { transform: rotateX(5deg) rotateY(-5deg); transform-origin: 50% 0; }
  .scene-marques { position: absolute; z-index: 2; right: -6px; top: -26px; grid-auto-flow: column; transform: translateZ(40px); }
  .scene-marques li:nth-child(n+3) { display: none; }
  .scene-page { display: none; }
  .carte-question { width: calc(100% - 32px); margin: -28px 0 0 16px; transform: translateZ(30px); }
}
@media (max-width: 640px) {
  .fr-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fk-chiffre { font-size: 48px; }
  .fr-surfaces li { grid-template-columns: 92px minmax(0, 1fr) 34px; }
  .scene-marques { top: -22px; right: -4px; }
  .scene-marques .pilule-marque { height: 34px; font-size: 13px; }
  .scene-marques .pilule-rang { display: none; }
  .carte-question { width: auto; margin: -24px 8px 0; padding: 16px; }
  .cq-texte { min-height: 2.6em; font-size: 16.5px; }
  .fl-table th .surface { font-size: 10px; }
}

/* Les plans inclinés ne débordent jamais sur le côté de la page (clip ne crée pas de conteneur de défilement :
   la pile collante continue de coller). */
main > .bande { overflow-x: clip; }

/* ---------- Mouvement réduit : la scène est posée, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene-plateau, .scene-plateau > * { transition: none !important; }
}