/* ==========================================================================
   RCF — LOT 12 — C.8 — FIN DE CARRIÈRE CANONIQUE.
   --------------------------------------------------------------------------
   Une SEULE page verticale, quatre actes, dans le conteneur de défilement du
   jeu. Rien ici ne cherche à tenir dans un viewport : la finale se parcourt.

   Direction artistique validée : bleu nuit / acier / jaune RCF, photographie
   d'usine, verre sombre, traits fins, grands titres blancs, accents jaunes,
   lumière chaude qui s'intensifie au dernier acte.

   Tout est scopé sous `.c8` : la feuille ne peut pas déborder sur un écran
   gelé de la C.7F. Les feuilles historiques ne sont pas retouchées.
   ========================================================================== */

/* -- jetons de la finale --------------------------------------------------- */
#endStage .c8{
  --c8-jaune:#ffc928;
  --c8-jaune-clair:#ffd964;
  --c8-encre:#04121e;
  --c8-verre:rgba(8,28,46,.72);
  --c8-verre-clair:rgba(16,44,68,.62);
  --c8-trait:rgba(176,216,244,.20);
  --c8-trait-fort:rgba(255,201,40,.42);
  --c8-texte:#eef5fa;
  --c8-doux:#a9c0d1;
  position:relative;
  padding:0 0 34px;
  color:var(--c8-texte);
}

/* -- la façade, posée une fois pour toute la page -------------------------- */
/* L'image est l'asset GELÉ du menu principal : référencée, jamais modifiée.
   Elle est fixée en haut et s'éteint progressivement pour laisser lire. */
/* Le cadrage n'est pas au jugé : l'image fait 864x1536 et sa façade occupe la
   bande 25-50 % de sa hauteur (mesuré sur la luminance). `center 34%` amène
   donc le bâtiment derrière le titre plutôt que le ciel. */

/* MICRO-CORRECTIF POST-RELEASE V1.1 — LE DÉCOR NE PART PLUS AVEC LE TEXTE.
   -------------------------------------------------------------------------
   `position:absolute` ancrait cette façade au HAUT DU CONTENU, pas à l'écran.
   La finale tient sur une seule page de ~3 450 px : passé l'acte 1, le décor
   était déjà 1 500 px au-dessus de la scène, et les actes « Votre carrière »,
   « Votre histoire » et « Récompenses » se lisaient sur un aplat sombre. C'est
   le défaut remonté après publication, et la mesure le confirmait : à
   mi-défilement, le haut du calque était à −1 551 px.

   Un seul mot change : `fixed`. ET IL NE FIXE PAS À LA FENÊTRE.
   `#rcfStage` porte `transform:translateZ(0)` — posé précisément pour cela
   (stage-916.css) — et un ancêtre transformé devient le bloc conteneur de ses
   descendants `fixed`. Le calque est donc ancré À LA SCÈNE 9:16, il ne déborde
   pas dans les bandes noires du PC, et il ne dépend d'aucun
   `background-attachment`, dont le comportement sur mobile et en défilement
   imbriqué est précisément ce qu'il fallait éviter.

   La GÉOMÉTRIE NE BOUGE PAS : au repos, le calque occupait déjà toute la
   largeur de la scène et ses 620 px du haut (mesuré : 390×620 sur un
   téléphone, 506×620 sur un PC). Même boîte, donc même cadrage `cover`, donc
   acte 1 inchangé — c'est vérifié par comparaison d'images. */
#endStage .c8-fond{
  position:fixed;inset:0 0 auto;height:620px;z-index:0;
  background-position:center 34%;background-size:cover;background-repeat:no-repeat;
  pointer-events:none;
}
#endStage .c8-fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(4,18,30,.20) 0%,
    rgba(4,18,30,.46) 38%,
    rgba(4,18,30,.88) 76%,
    var(--c8-encre) 100%);
}
#endStage .c8-acte{position:relative;z-index:1;padding:0 14px}

/* -- indicateur d'acte, discret ------------------------------------------- */
#endStage .c8-jalon{
  position:sticky;top:6px;z-index:5;
  display:flex;justify-content:flex-end;padding:0 14px;
  pointer-events:none;
}
#endStage .c8-jalon b{
  display:inline-block;padding:5px 11px;border-radius:999px;
  border:1px solid var(--c8-trait);background:rgba(4,18,30,.78);
  backdrop-filter:blur(8px);
  font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--c8-texte);
}

/* -- titres d'acte --------------------------------------------------------- */
#endStage .c8-sur{
  margin:0 0 3px;font:700 10px/1 var(--mono);letter-spacing:.26em;
  text-transform:uppercase;color:var(--c8-jaune);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
#endStage .c8-titre{
  margin:0;font-family:var(--disp);font-size:34px;line-height:.96;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
  text-shadow:0 4px 22px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.7);
}
#endStage .c8-sous{
  margin:7px 0 0;font:500 10.5px/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c8-doux);
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
#endStage .c8-losange{
  display:flex;align-items:center;gap:10px;margin:15px 0 13px;
}
#endStage .c8-losange::before,#endStage .c8-losange::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--c8-trait-fort),transparent);
}
#endStage .c8-losange i{
  width:7px;height:7px;transform:rotate(45deg);background:var(--c8-jaune);
  box-shadow:0 0 12px rgba(255,201,40,.8);
}

/* ==========================================================================
   ACTE 1 — L'IMPACT IMMÉDIAT
   ========================================================================== */
#endStage .c8-acte1{padding-top:16px}

/* le rang, moment le plus fort de la page */
#endStage .c8-rang{
  position:relative;display:grid;place-items:center;gap:2px;
  margin:0 0 -14px;padding:20px 16px 26px;
  border-radius:22px 22px 0 0;
  border:1px solid var(--c8-trait);border-bottom:0;
  background:linear-gradient(180deg,rgba(10,34,54,.58),rgba(6,24,40,.80));
  backdrop-filter:blur(10px);
}
#endStage .c8-rang-k{
  font:700 12px/1 var(--mono);letter-spacing:.42em;color:var(--c8-jaune);
  text-indent:.42em;
}
/* C.8F — la couronne ENVELOPPE la lettre au lieu de l'encadrer : elle n'est
   donc plus un voisin dans une rangée, mais une couche posée DERRIÈRE, centrée
   sur la lettre. La lettre reste au-dessus et parfaitement lisible. */
#endStage .c8-rang-l{
  position:relative;display:grid;place-items:center;
  width:150px;height:150px;margin:0 auto;
}
/* C.8D — centrage OPTIQUE avec la lettre : une capitale de police display ne
   remplit pas sa boîte de ligne, elle laisse la descente vide en dessous. Un
   centrage de boîtes calerait donc les boîtes, pas les formes. Le décalage
   ci-dessous est mesuré sur le rendu réel, pas estimé. */
#endStage .c8-couronne{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.95;pointer-events:none;transform:translateY(-4px);
}
#endStage .c8-rang-v{position:relative;z-index:2}
#endStage .c8-rang-v{
  font-family:var(--disp);font-size:82px;line-height:1;color:var(--c8-jaune);
  text-shadow:0 0 34px rgba(255,201,40,.55),0 0 76px rgba(255,201,40,.28);
}
#endStage .c8-rang-n{
  font:700 12px/1 var(--mono);letter-spacing:.34em;color:var(--c8-doux);
  text-indent:.34em;text-transform:uppercase;
}

/* le score, dans son cadre lumineux */
#endStage .c8-score{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:18px;
  border:1.5px solid var(--c8-jaune);
  background:linear-gradient(180deg,rgba(12,38,58,.82),rgba(5,21,35,.90));
  box-shadow:0 0 34px -14px rgba(255,201,40,.75),inset 0 1px 0 rgba(255,255,255,.06);
}
#endStage .c8-score-i{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--c8-jaune);color:var(--c8-jaune);
}
#endStage .c8-score-i svg{width:24px;height:24px}
#endStage .c8-score-v{
  font-family:var(--disp);font-size:44px;line-height:1;color:var(--c8-jaune);
  font-variant-numeric:tabular-nums;
}
#endStage .c8-score-t{
  font-family:var(--disp);font-size:30px;line-height:1;color:#9fb4c4;
}
#endStage .c8-score-p{
  margin:4px 0 0;font-size:12px;line-height:1.3;color:var(--c8-doux);
}

/* le dernier poste et l'identité */
#endStage .c8-poste{
  display:flex;align-items:center;gap:13px;margin-top:11px;
  padding:13px 15px;border-radius:16px;
  border:1px solid var(--c8-trait);background:var(--c8-verre);
}
#endStage .c8-poste-i{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--c8-trait-fort);color:var(--c8-jaune);
}
#endStage .c8-poste-i svg{width:23px;height:23px}
#endStage .c8-poste-k{
  font:700 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--c8-doux);
}
#endStage .c8-poste-n{
  margin:5px 0 0;font-family:var(--disp);font-size:19px;line-height:1.1;color:#fff;
}
#endStage .c8-poste-q{margin:3px 0 0;font-size:13px;color:var(--c8-doux)}

/* les quatre dimensions — INTITULÉS SEULS, décision utilisateur C.8 */
#endStage .c8-dims{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px;
}
#endStage .c8-dim{
  display:flex;align-items:center;gap:10px;min-height:58px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--c8-trait);background:var(--c8-verre-clair);
}
#endStage .c8-dim-i{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--c8-trait-fort);color:var(--c8-jaune);
}
#endStage .c8-dim-i svg{width:17px;height:17px}
#endStage .c8-dim-n{
  flex:1 1 auto;min-width:0;
  font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--c8-texte);
}

/* l'invitation à défiler */
#endStage .c8-defiler{
  display:grid;place-items:center;gap:5px;margin:22px 0 4px;
  color:var(--c8-jaune);
}
#endStage .c8-defiler svg{width:26px;height:15px;opacity:.9}
#endStage .c8-defiler span{
  font:600 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--c8-doux);text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  #endStage .c8-defiler svg{animation:c8Descendre 2.2s ease-in-out infinite}
}
@keyframes c8Descendre{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(4px);opacity:1}
}

/* ==========================================================================
   ACTE 2 — QUI VOUS ÊTES DEVENU
   ========================================================================== */
#endStage .c8-acte2,#endStage .c8-acte3,#endStage .c8-acte4{padding-top:26px}

#endStage .c8-carte{
  padding:14px 15px;border-radius:18px;margin-top:10px;
  border:1px solid var(--c8-trait);background:var(--c8-verre);
}
#endStage .c8-carte-t{
  margin:0 0 10px;font:700 11px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--c8-jaune);
}

/* la grille de faits : étiquette au-dessus, valeur en dessous */
#endStage .c8-faits{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
#endStage .c8-fait{
  min-width:0;padding:9px 11px;border-radius:11px;
  border:1px solid rgba(165,205,233,.13);background:rgba(4,20,33,.50);
}
#endStage .c8-fait span{
  display:block;font:600 8.6px/1.25 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:#8aa3b6;
}
#endStage .c8-fait b{
  display:block;margin-top:3px;font:650 13px/1.3 var(--body);color:#f1f6f9;
  overflow-wrap:anywhere;
}
#endStage .c8-fait--large{grid-column:1/-1}

/* Ambition : étoiles réelles, verdict réel */
#endStage .c8-etoiles{
  display:flex;gap:4px;margin:2px 0 7px;color:var(--c8-jaune);
}
#endStage .c8-etoiles svg{width:17px;height:17px}
#endStage .c8-etoiles .off{color:rgba(255,201,40,.24)}
#endStage .c8-verdict{margin:0;font-size:13px;line-height:1.45;color:var(--c8-texte)}
#endStage .c8-reorient{
  margin:8px 0 0;padding-top:8px;border-top:1px solid var(--c8-trait);
  font-size:12px;line-height:1.4;color:var(--c8-doux);
}

/* Signature : descriptive, sans étoile ni rareté */
#endStage .c8-signature{
  border-color:var(--c8-trait-fort);
  background:linear-gradient(155deg,rgba(255,198,42,.07),rgba(7,25,40,.80));
}
#endStage .c8-signature-n{
  margin:0;font-family:var(--disp);font-size:23px;line-height:1.08;color:#fff;
}
#endStage .c8-signature-p{
  margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--c8-doux);
}

/* le radar six axes */
#endStage .c8-radar{display:grid;place-items:center;padding-top:4px}
#endStage .c8-radar svg{width:100%;max-width:320px;height:auto}
/* C.8B — le radar final adopte l'accent or de la Finale. Le profil initial
   conserve son trait froid pour rester immédiatement distinguable. */
#endStage .c8-radar .pt-radar-final{fill:rgba(255,201,40,.22)!important;stroke:var(--c8-jaune)!important;stroke-width:2.4!important}
#endStage .c8-radar .pt-radar-dot{fill:var(--c8-jaune-clair)!important;stroke:#fff1a8!important;stroke-width:.8!important}
#endStage .c8-legende{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:8px;
}
#endStage .c8-legende span{
  display:inline-flex;align-items:center;gap:6px;
  font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--c8-doux);
}
#endStage .c8-legende i{width:14px;height:3px;border-radius:2px;display:inline-block}
#endStage .c8-legende .fin{background:var(--c8-jaune)}
#endStage .c8-legende .deb{background:rgba(150,196,228,.75)}

/* ==========================================================================
   PC — la scène reste 9:16, on ne bascule jamais en interface horizontale
   ========================================================================== */
@media (min-width:780px){
  #endStage .c8-titre{font-size:38px}
  #endStage .c8-rang-v{font-size:92px}
  /* C.8E puis C.8F — la lettre grandit de 82 à 92 px : la couronne suit dans la
     même proportion, sinon elle serre une lettre plus haute. */
  #endStage .c8-rang-l{width:168px;height:168px}
}

/* petits écrans : on ne casse pas la lecture */
@media (max-width:370px){
  #endStage .c8-titre{font-size:30px}
  #endStage .c8-rang-v{font-size:72px}
  #endStage .c8-rang-l{width:132px;height:132px}
  #endStage .c8-dims{grid-template-columns:1fr}
  #endStage .c8-faits{grid-template-columns:1fr}
}

/* ==========================================================================
   ACTE 3 — VOTRE HISTOIRE
   --------------------------------------------------------------------------
   La maquette est une référence de COMPOSITION, pas un gabarit au pixel : elle
   est rendue large, la scène RCF fait 390 px de large sur téléphone. Les
   grilles à deux et trois colonnes de la maquette sont donc rendues en lignes
   pleine largeur — le contenu est le même, la lecture reste possible.
   ========================================================================== */

/* -- rubriques de section -------------------------------------------------- */
#endStage .c8-rub{
  display:flex;align-items:center;gap:11px;
  margin:20px 0 9px;
  font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--c8-jaune);
}
#endStage .c8-rub::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--c8-trait-fort),transparent);
}
#endStage .c8-note{
  margin:8px 2px 0;font-size:11.5px;line-height:1.4;color:var(--c8-doux);
}

/* -- la frise : le curseur natif porte l'interaction ----------------------- */
#endStage .c8-frise{position:relative;padding:14px 8px 4px}
#endStage .c8-frise-piste{
  position:absolute;left:16px;right:16px;top:30px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,201,40,.30),rgba(255,201,40,.62));
  pointer-events:none;
}
#endStage .c8-frise-rep{position:absolute;inset:0;display:block}
#endStage .c8-frise-rep i{
  position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--c8-encre);
  border:2px solid var(--c8-jaune);box-shadow:0 0 10px rgba(255,201,40,.55);
}
/* 48 px, pas 34 : le curseur EST une action, il tombe donc sous la règle des
   cibles tactiles du §8. Mesuré par la recette, pas estimé. La piste visuelle
   reste fine — c'est la zone de saisie qui grandit, pas le trait. */
#endStage .c8-frise-in{
  position:relative;z-index:2;-webkit-appearance:none;appearance:none;
  width:100%;height:48px;margin:0;background:transparent;
  touch-action:pan-y;cursor:pointer;
}
#endStage .c8-frise-in::-webkit-slider-runnable-track{height:48px;background:transparent}
#endStage .c8-frise-in::-moz-range-track{height:48px;background:transparent}
/* La poignée est volontairement large : c'est une cible tactile, pas un point. */
#endStage .c8-frise-in::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:11px;border-radius:50%;
  background:var(--c8-jaune);border:3px solid #06192a;
  box-shadow:0 0 0 3px rgba(255,201,40,.28),0 0 20px rgba(255,201,40,.75);
}
#endStage .c8-frise-in::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--c8-jaune);border:3px solid #06192a;
  box-shadow:0 0 0 3px rgba(255,201,40,.28),0 0 20px rgba(255,201,40,.75);
}
#endStage .c8-frise-in:focus-visible{outline:2px solid var(--c8-jaune-clair);outline-offset:4px}
#endStage .c8-frise-b{
  display:flex;justify-content:space-between;padding:0 6px;
  font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--c8-doux);
}

/* -- le snapshot annuel ---------------------------------------------------- */
#endStage .c8-snap-h{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
#endStage .c8-snap-h b{
  font-family:var(--disp);font-size:40px;line-height:.9;color:var(--c8-jaune);
  font-variant-numeric:tabular-nums;
}
#endStage .c8-snap-h span{
  font:700 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--c8-doux);
}
#endStage .c8-snap-h em{
  margin-left:auto;font-style:normal;
  font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--c8-texte);
}
#endStage .c8-snap-txt{
  margin:0 0 11px;font-size:13px;line-height:1.5;color:var(--c8-texte);
  min-height:1.5em;
}
#endStage .c8-snap-g{display:grid;gap:8px}
#endStage .c8-snap-p{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:9px 11px;border-radius:12px;
  border:1px solid rgba(165,205,233,.13);background:rgba(4,20,33,.50);
}
#endStage .c8-snap-pi{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--c8-trait-fort);color:var(--c8-jaune);
}
#endStage .c8-snap-pi svg{width:16px;height:16px}
#endStage .c8-snap-pt{min-width:0}
#endStage .c8-snap-pt span{
  display:block;font:600 8.6px/1.25 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:#8aa3b6;
}
#endStage .c8-snap-pt b{
  display:block;margin-top:2px;font:650 13.5px/1.3 var(--body);color:#f1f6f9;
  overflow-wrap:anywhere;
}

/* -- le radar de l'année --------------------------------------------------- */
#endStage .c8-radar3{display:grid;place-items:center;margin-top:12px}
#endStage .c8-radar3-svg{width:100%;max-width:340px;height:auto}
#endStage .c8-r-ring{fill:none;stroke:rgba(160,200,230,.13);stroke-width:1}
#endStage .c8-r-spoke{stroke:rgba(160,200,230,.16);stroke-width:1}
#endStage .c8-r-axe{
  fill:#9db4c6;font:700 9px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;
}
#endStage .c8-r-aire{
  fill:rgba(255,201,40,.30);stroke:var(--c8-jaune);stroke-width:2;
  stroke-linejoin:round;
}
#endStage .c8-r-pt{fill:var(--c8-jaune);stroke:#06192a;stroke-width:1.2}
@media (prefers-reduced-motion:no-preference){
  #endStage .c8-r-aire,#endStage .c8-r-pt{transition:all .16s ease-out}
}

/* -- les chapitres --------------------------------------------------------- */
#endStage .c8-chaps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#endStage .c8-chap{
  display:flex;align-items:flex-start;gap:12px;min-width:0;
  padding:12px 13px;border-radius:15px;
  border:1px solid var(--c8-trait);background:var(--c8-verre);
}
#endStage .c8-chap--on{
  border-color:var(--c8-jaune);
  background:linear-gradient(150deg,rgba(255,198,42,.10),rgba(7,25,40,.86));
  box-shadow:0 0 26px -12px rgba(255,201,40,.85);
}
#endStage .c8-chap-i{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--c8-trait-fort);color:var(--c8-jaune);
}
#endStage .c8-chap-i svg{width:19px;height:19px}
#endStage .c8-chap-c{flex:1 1 auto;min-width:0}
#endStage .c8-chap-t{
  font-family:var(--disp);font-size:17px;line-height:1.14;color:#fff;
}
#endStage .c8-chap-p{
  margin-top:4px;font-size:12px;line-height:1.42;color:var(--c8-doux);
}
#endStage .c8-chap-y{
  flex:0 0 auto;text-align:right;
  font:700 11px/1.45 var(--mono);letter-spacing:.05em;color:var(--c8-jaune);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   ACTE 4 — RÉCOMPENSES & HÉRITAGE
   ========================================================================== */

/* -- l'allègement : plié = absent de l'écran, JAMAIS absent de la page ----- */
#endStage .c8-plie{display:none}
#endStage .c8-plus{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:9px;padding:11px 14px;min-height:48px;border-radius:13px;
  border:1px dashed var(--c8-trait-fort);background:rgba(255,201,40,.06);
  color:var(--c8-jaune);cursor:pointer;
  font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
#endStage .c8-plus svg{width:16px;height:16px}
#endStage .c8-plus:active{transform:scale(.985)}
#endStage .c8-plus:focus-visible{outline:2px solid var(--c8-jaune-clair);outline-offset:3px}

/* -- les maîtrises --------------------------------------------------------- */
#endStage .c8-mts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#endStage .c8-mt{
  position:relative;padding:12px 13px;border-radius:15px;
  border:1px solid var(--c8-trait);
  background:linear-gradient(150deg,rgba(255,198,42,.055),rgba(7,25,40,.80));
}
#endStage .c8-mt-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
#endStage .c8-mt-j{
  font-family:var(--disp);font-size:17px;line-height:1.12;color:#fff;min-width:0;
}
#endStage .c8-mt-l{
  flex:0 0 auto;font:700 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c8-jaune);
}
#endStage .c8-mt-b{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--c8-trait);
}
#endStage .c8-mt-b span{font-size:12px;color:var(--c8-doux);min-width:0}
#endStage .c8-mt-b b{
  flex:0 0 auto;font:700 11px/1 var(--mono);letter-spacing:.1em;color:var(--c8-texte);
}
#endStage .c8-mt-f{
  display:inline-block;margin-top:7px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--c8-trait-fort);
  font:700 8.6px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--c8-jaune);
}

/* -- les expertises, dans leur propre section ------------------------------ */
#endStage .c8-exps{display:grid;gap:8px}
#endStage .c8-exp{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;border-radius:14px;
  border:1px solid var(--c8-trait);background:var(--c8-verre-clair);
}
#endStage .c8-exp-n{
  min-width:0;font:650 13.5px/1.3 var(--body);color:#f1f6f9;overflow-wrap:anywhere;
}
#endStage .c8-exp-e{flex:0 0 auto;display:flex;gap:4px}
#endStage .c8-exp-e i{
  width:8px;height:8px;transform:rotate(45deg);background:var(--c8-jaune);
  box-shadow:0 0 8px rgba(255,201,40,.6);
}
#endStage .c8-exp-e i.off{background:rgba(255,201,40,.20);box-shadow:none}

/* -- ce que cette carrière a marqué ---------------------------------------- */
#endStage .c8-neufs{display:grid;gap:8px}
#endStage .c8-neuf{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:14px;
  border:1px solid var(--c8-trait-fort);
  background:linear-gradient(150deg,rgba(255,198,42,.09),rgba(7,25,40,.82));
}
#endStage .c8-neuf-i{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--c8-jaune);color:var(--c8-jaune);
}
#endStage .c8-neuf-i svg{width:18px;height:18px}
#endStage .c8-neuf span{
  display:block;font:700 8.6px/1.25 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c8-jaune);
}
#endStage .c8-neuf b{
  display:block;margin-top:3px;font:650 13.5px/1.3 var(--body);color:#f1f6f9;
  overflow-wrap:anywhere;
}

/* -- il s'en est fallu de peu ---------------------------------------------- */
#endStage .c8-near{list-style:none;margin:0;padding:0;display:grid;gap:7px}
#endStage .c8-nr{
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(165,205,233,.13);background:rgba(4,20,33,.50);
  font-size:12.5px;line-height:1.42;color:var(--c8-texte);
}

/* -- l'héritage : le point le plus lumineux de la page --------------------- */
#endStage .c8-heritage{
  position:relative;margin-top:20px;padding:24px 18px 22px;
  border-radius:22px;text-align:center;
  border:1.5px solid var(--c8-jaune);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,201,40,.20),transparent 62%),
    linear-gradient(180deg,rgba(14,42,64,.88),rgba(5,21,35,.94));
  box-shadow:0 0 60px -22px rgba(255,201,40,.95),inset 0 1px 0 rgba(255,255,255,.07);
}
#endStage .c8-her-h{
  width:58px;height:58px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--c8-jaune);color:var(--c8-jaune);
  box-shadow:0 0 34px -8px rgba(255,201,40,.9);
}
#endStage .c8-her-h svg{width:29px;height:29px}
#endStage .c8-her-k{
  margin:0;font:700 9.5px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--c8-jaune);text-indent:.28em;
}
#endStage .c8-her-n{
  margin:9px 0 0;font-family:var(--disp);font-size:27px;line-height:1.06;color:#fff;
}
#endStage .c8-her-p{
  margin:10px auto 0;max-width:30em;
  font-size:13.5px;line-height:1.55;color:var(--c8-doux);
}

/* -- les CTA du mode ------------------------------------------------------- */
#endStage .c8-cta{display:grid;gap:9px;margin-top:18px}
#endStage .c8-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:13px 18px;border-radius:15px;
  border:1px solid var(--c8-trait-fort);background:var(--c8-verre);
  color:var(--c8-texte);cursor:pointer;
  font:700 12.5px/1.1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-align:center;
}
#endStage .c8-btn--p{
  border:1.5px solid var(--c8-jaune);color:var(--c8-encre);
  background:linear-gradient(180deg,var(--c8-jaune-clair),var(--c8-jaune));
  box-shadow:0 0 34px -12px rgba(255,201,40,.95);
}
/* 48 px aussi : « Retour au menu » est un CTA tertiaire, pas une mention —
   il agit, donc il respecte la même cible tactile que les deux autres. */
#endStage .c8-btn--t{
  min-height:48px;border-style:solid;border-color:var(--c8-trait);
  background:transparent;color:var(--c8-doux);font-size:11px;
}
#endStage .c8-btn:active{transform:scale(.985)}
#endStage .c8-btn:focus-visible{outline:2px solid var(--c8-jaune-clair);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  #endStage .c8-btn,#endStage .c8-plus{transition:transform .18s cubic-bezier(.22,1,.36,1)}
  #endStage .c8-chap{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
}

/* -- PC : la scène reste 9:16, on gagne seulement en respiration ----------- */
@media (min-width:780px){
  #endStage .c8-snap-h b{font-size:46px}
  #endStage .c8-her-n{font-size:31px}
}
@media (max-width:370px){
  #endStage .c8-snap-h b{font-size:34px}
  #endStage .c8-chap-t{font-size:16px}
  #endStage .c8-her-n{font-size:24px}
}