/* ==========================================================================
   RCF — LOT 14 — POINT 7 · LE POIDS VISUEL DES CONSÉQUENCES MAJEURES.
   --------------------------------------------------------------------------
   CETTE FEUILLE NE CRÉE AUCUN COMPOSANT NOUVEAU. Elle habille deux choses qui
   existaient déjà et que le joueur ne distinguait pas :

     1. les fins SUBIES (licenciement, démission), sur la finale C.8 ;
     2. les scènes de CRISE, sur la carte d'événement.

   Ce qui a déclenché ces règles, mesuré par tools/lot14/L14_ux_audit.js sur la
   baseline a62a0e4 :

     · rendues depuis le même état, les trois fins produisaient 13 057, 13 061
       et 13 058 caractères. Le licenciement différait de la retraite par UN
       segment de contenu sur 398 ;
     · sur 40 événements métier tirés au hasard, le recadrage, l'avertissement
       écrit et l'arrêt de travail ne produisaient AUCUNE classe que les
       événements ordinaires ne produisent pas.

   PRINCIPE DE RETENUE. Les couleurs employées sont celles de tokens.css
   (--red, --orange, --amber) et les jetons de la finale (--c8-*). Aucune
   police, aucune dépendance, aucun asset nouveau : on cherche une rupture
   ÉMOTIONNELLE, pas une rupture de design system.

   ACCESSIBILITÉ. La couleur ne porte jamais seule le sens : chaque palier a
   son titre, son libellé écrit et son épaisseur de filet. Une carte reste
   lisible et utilisable en niveaux de gris.
   ========================================================================== */

/* ==========================================================================
   1. LES FINS SUBIES — LA FINALE C.8 CHANGE DE TONALITÉ
   --------------------------------------------------------------------------
   La classe est posée sur la RACINE `.c8` par screen-c8-finale.js. Une
   retraite n'en reçoit aucune : tout ce bloc reste alors inerte et la page
   est, au caractère près, celle d'avant le point 7.
   ========================================================================== */

/* Le licenciement est la fin la plus dure : le jaune de la finale cède au
   rouge, et la façade s'assombrit franchement. */
#endStage .c8--licenciement{
  --c8-jaune:#ff7b86;
  --c8-jaune-clair:#ffa3ab;
  --c8-trait-fort:rgba(255,100,115,.46);
  --c8-doux:#c3a3a8;
}
/* La démission est négative, mais mélancolique : elle vire au gris-bleu froid
   plutôt qu'au rouge. Le joueur n'a pas été puni, il s'est éteint. */
#endStage .c8--demission{
  --c8-jaune:#9fb6c6;
  --c8-jaune-clair:#c3d4e0;
  --c8-trait-fort:rgba(159,182,198,.40);
  --c8-doux:#93a4b1;
}
/* La façade perd sa lumière. Deux valeurs différentes : le licenciement est
   plus noir que la démission — la hiérarchie tient aussi dans le fond. */
#endStage .c8--licenciement .c8-fond{filter:grayscale(.72) brightness(.42) contrast(1.1)}
#endStage .c8--demission    .c8-fond{filter:grayscale(.86) brightness(.58)}

/* Le titre d'acte 1 devient le moment fort de la page. */
#endStage .c8--licenciement .c8-acte1 .c8-titre,
#endStage .c8--demission    .c8-acte1 .c8-titre{
  font-size:44px;letter-spacing:-.02em;
}
#endStage .c8--licenciement .c8-acte1 .c8-titre{
  color:#ffdfe2;
  text-shadow:0 0 38px rgba(255,80,96,.34),0 4px 22px rgba(0,0,0,.95);
}
#endStage .c8--demission .c8-acte1 .c8-titre{
  color:#e6eef4;
  text-shadow:0 0 30px rgba(120,150,175,.26),0 4px 22px rgba(0,0,0,.95);
}
@media(max-width:430px){
  #endStage .c8--licenciement .c8-acte1 .c8-titre,
  #endStage .c8--demission    .c8-acte1 .c8-titre{font-size:36px}
}
/* Écran court en hauteur : le titre ne doit pas manger tout le viewport et
   repousser la note hors de vue. */
@media(max-height:640px){
  #endStage .c8--licenciement .c8-acte1 .c8-titre,
  #endStage .c8--demission    .c8-acte1 .c8-titre{font-size:32px}
}

/* -- LE BANDEAU DE RUPTURE ------------------------------------------------
   Il porte la compréhension : ce qui s'est passé, et pourquoi. Il vient juste
   après le titre et avant le rang, conformément au § 10 du point 7. */
#endStage .c8-rupture{
  position:relative;z-index:1;
  margin:2px 0 20px;padding:15px 16px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--c8-trait);
  border-left:4px solid var(--c8-jaune);
  background:rgba(4,18,30,.80);
  backdrop-filter:blur(9px);
}
#endStage .c8-rupture-k{
  margin:0 0 7px;
  font:700 10px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--c8-jaune);
}
#endStage .c8-rupture-p{
  margin:0;font-size:14.5px;line-height:1.5;color:var(--c8-texte);
}
#endStage .c8-rupture-t{
  margin:14px 0 7px;
  font:700 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--c8-doux);
}
#endStage .c8-rupture-l{
  margin:0;padding:0;list-style:none;display:grid;gap:6px;
}
#endStage .c8-rupture-l li{
  position:relative;padding-left:17px;
  font-size:13px;line-height:1.42;color:var(--c8-doux);
}
/* Le losange est un signe de FORME, pas de couleur : il reste visible en
   niveaux de gris et pour un lecteur qui ne distingue pas le rouge. */
#endStage .c8-rupture-l li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:6px;height:6px;transform:rotate(45deg);
  background:var(--c8-jaune);
}
/* Le licenciement porte un filet plus épais que la démission : même quand la
   couleur ne passe pas, la hiérarchie se lit à l'épaisseur. */
#endStage .c8-rupture--licenciement{border-left-width:6px}
#endStage .c8-rupture--demission{border-left-width:4px}

/* ==========================================================================
   2. LA HIÉRARCHIE DES CRISES — LA CARTE D'ÉVÉNEMENT
   --------------------------------------------------------------------------
   Quatre paliers, posés par applyCriseSeverity() dans src/ui/render.js :

       (événement ordinaire)  <  alerte  <  recadrage  <  avertissement  <  arrêt

   Chacun monte d'un cran sur TROIS dimensions à la fois — l'épaisseur du
   filet, l'intensité du halo et la taille du titre — pour que la montée en
   gravité soit perceptible sans lire l'étiquette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   POURQUOI `!important` SUR LA CARTE D'ÉVÉNEMENT, ET SEULEMENT LÀ.

   DÉFAUT TROUVÉ PAR LA RECETTE NAVIGATEUR, pas par relecture : la carte d'arrêt
   mesurait un filet de 1 px au lieu de 7, et un titre de 20 px au lieu de 30.
   La hiérarchie que ce fichier déclarait n'était donc PAS celle que le joueur
   voyait — un contrôle sur le code seul ne l'aurait jamais vu.

   La cause est dans `lot12-v4.css` : `#rcfStage #eventCard` y pose
   `border:1px solid …!important`, et `.wrap:has(#scGame.on) .etitle` un
   `font-size:20px!important`. Aucune spécificité ne bat un `!important` ; seul
   un autre `!important`, dans une feuille chargée plus tard, y parvient.

   C'est la convention déjà employée par toutes les feuilles de surcharge du
   Lot 12 (C.5, C.6, C.7) : on ne retouche pas les feuilles antérieures, on
   surcharge après elles. On le limite ici aux SEULES propriétés qui portent la
   gravité — épaisseur du filet, couleur du filet, taille du titre. Tout le
   reste de la carte reste gouverné par les feuilles d'origine.

   ET `!important` NE SUFFIT PAS. Deuxième passage du même contrôle : les
   paliers mesuraient toujours 1 px. Entre deux déclarations `!important`, c'est
   la SPÉCIFICITÉ qui tranche — et `#rcfStage #eventCard` vaut
   (1 identifiant, 2 classes) contre (1, 1) pour `#eventCard.crise--arret`.
   Les règles de gravité sont donc portées par le MÊME contexte : la carte de
   crise n'existe de toute façon qu'en partie, ce préfixe dit la vérité au lieu
   d'être un artifice de poids.
   -------------------------------------------------------------------------- */
#rcfStage #eventCard.crise-active[data-crise]{
  position:relative;
  border-left:4px solid var(--steel)!important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
/* L'étiquette de rubrique cesse d'être une pastille parmi d'autres. */
#rcfStage #eventCard.crise-active .etag{
  font-weight:700;letter-spacing:.22em;
  border:1px solid currentColor;
}
/* Le libellé de palier, en toutes lettres. C'est LUI qui porte le sens quand
   la couleur n'est pas perçue — jamais la teinte seule (§ 19). */
#rcfStage #eventCard.crise-active .ehead::after{
  /* Le libellé exact vient des quatre règles ci-dessous, une par palier. Sans
     palier connu, rien ne s'affiche plutôt qu'une pastille vide. */
  content:"";display:none;
  font:700 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;align-self:center;
}
#rcfStage #eventCard.crise-active[data-crise] .ehead::after{display:inline-block}
#rcfStage #eventCard.crise-active[data-crise="alerte"]        .ehead::after{content:"Signal"}
#rcfStage #eventCard.crise-active[data-crise="recadrage"]     .ehead::after{content:"Recadrage"}
#rcfStage #eventCard.crise-active[data-crise="avertissement"] .ehead::after{content:"Avertissement"}
#rcfStage #eventCard.crise-active[data-crise="arret"]         .ehead::after{content:"Arrêt de travail"}

/* -- palier 1 · SIGNAL — le corps ou l'envie qui parlent. Discret. --------- */
#rcfStage #eventCard.crise-active.crise--alerte[data-crise]{border-left-color:var(--amber)!important}
#rcfStage #eventCard.crise--alerte .etag{color:var(--amber)}
#rcfStage #eventCard.crise--alerte .ehead::after{
  color:var(--amber);background:rgba(255,189,25,.09);border:1px solid rgba(255,189,25,.34);
}

/* -- palier 2 · RECADRAGE — premier signal négatif renforcé. --------------- */
#rcfStage #eventCard.crise-active.crise--recadrage[data-crise]{
  border-left-width:5px!important;border-left-color:var(--orange)!important;
  box-shadow:inset 3px 0 22px -10px rgba(255,142,75,.55);
}
#rcfStage #eventCard.crise--recadrage .etag{color:var(--orange)}
#rcfStage #eventCard.crise--recadrage .etitle{font-size:25px!important}
#rcfStage #eventCard.crise--recadrage .ehead::after{
  color:var(--orange);background:rgba(255,142,75,.11);border:1px solid rgba(255,142,75,.42);
}

/* -- palier 3 · AVERTISSEMENT — nettement négatif. ------------------------- */
#rcfStage #eventCard.crise-active.crise--avertissement[data-crise]{
  border-left-width:6px!important;border-left-color:var(--red)!important;
  box-shadow:inset 4px 0 30px -10px rgba(255,100,115,.62);
}
#rcfStage #eventCard.crise--avertissement .etag{color:var(--red)}
#rcfStage #eventCard.crise--avertissement .etitle{font-size:27px!important;color:#ffe6e9!important}
#rcfStage #eventCard.crise--avertissement .ehead::after{
  color:var(--red);background:rgba(255,100,115,.12);border:1px solid rgba(255,100,115,.48);
}

/* -- palier 4 · ARRÊT DE TRAVAIL — scène majeure. --------------------------
   C'est la conséquence la plus grave qui ne termine PAS la carrière. Elle doit
   donc peser plus qu'un avertissement et moins qu'une fin : d'où une scène
   pleine, mais aucun vocabulaire de fin de partie et aucun voile rouge. */
#rcfStage #eventCard.crise-active.crise--arret[data-crise]{
  border-left-width:7px!important;border-left-color:var(--cyan)!important;
  box-shadow:inset 5px 0 44px -12px rgba(91,199,232,.45),0 26px 62px -40px #000;
  background:linear-gradient(180deg,rgba(9,34,52,.94),rgba(4,16,28,.97));
}
#rcfStage #eventCard.crise--arret .etag{color:var(--cyan)}
#rcfStage #eventCard.crise--arret .etitle{
  font-size:30px!important;line-height:1.05!important;color:#e9f7fd!important;
  text-shadow:0 0 26px rgba(91,199,232,.26);
}
#rcfStage #eventCard.crise--arret .ebody{color:#cfe1ec}
#rcfStage #eventCard.crise--arret .ehead::after{
  color:var(--cyan);background:rgba(91,199,232,.13);border:1px solid rgba(91,199,232,.52);
}
/* Le filet supérieur signe la scène : une carte d'événement n'en a pas. */
#rcfStage #eventCard.crise-active.crise--arret::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.75;pointer-events:none;
}

/* -- responsive : la gravité ne doit pas casser la lecture au téléphone --- */
@media(max-width:430px){
  #rcfStage #eventCard.crise--recadrage     .etitle{font-size:21px!important}
  #rcfStage #eventCard.crise--avertissement .etitle{font-size:22px!important}
  #rcfStage #eventCard.crise--arret         .etitle{font-size:24px!important}
  #rcfStage #eventCard.crise-active .ehead::after{font-size:8.5px;letter-spacing:.14em;padding:4px 7px}
}
/* Écran court : on rend les marges au contenu, les choix doivent rester
   atteignables sans défilement supplémentaire. */
@media(max-height:640px){
  #rcfStage #eventCard.crise--arret .etitle{font-size:22px!important}
}

/* -- mouvement : on respecte le réglage système. -------------------------- */
@media(prefers-reduced-motion:reduce){
  #rcfStage #eventCard.crise-active[data-crise]{transition:none}
}

/* -- la scène de l'arrêt : entête de mesure et pied de reprise -------------
   Rendus par criseEnteteArret() / criseFooterArret() dans src/ui/render.js.
   Ils n'existent QUE sur l'arrêt de travail : aucune autre carte ne les porte.
   Leur rôle, côté ressenti, est de séparer deux choses que le joueur doit
   comprendre d'un coup — c'est grave, et ce n'est pas fini. */
#rcfStage #eventCard .crise-scene{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0 0 13px;padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(91,199,232,.30);
  background:rgba(91,199,232,.07);
}
#rcfStage #eventCard .crise-scene-k{
  font:700 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);
}
#rcfStage #eventCard .crise-scene-d{
  margin-left:auto;
  font-family:var(--disp);font-size:18px;line-height:1;color:#eaf8fd;
  letter-spacing:.01em;
}
#rcfStage #eventCard .crise-suite{
  margin:13px 0 0;padding-top:11px;
  border-top:1px solid rgba(91,199,232,.22);
  font:500 12px/1.45 var(--body);color:#a8c5d4;
}
@media(max-width:430px){
  #rcfStage #eventCard .crise-scene{gap:7px;padding:8px 10px}
  #rcfStage #eventCard .crise-scene-d{margin-left:0;font-size:16px}
  #rcfStage #eventCard .crise-scene-k{font-size:8.5px;letter-spacing:.14em}
}

/* ==========================================================================
   3. CORRECTIF DE RECETTE — LES GRILLES DE LA FINALE SUR ÉCRAN COURT
   --------------------------------------------------------------------------
   DÉFAUT TROUVÉ PAR LA RECETTE NAVIGATEUR, pas par relecture de code
   (tools/lot14/recette/L14_recette_visuelle.js, format « court » 900x620) :
   l'écran de fin débordait horizontalement, `#rcfScroll` mesurant 364 px de
   contenu pour 349 px de large. Les coupables, mesurés : deux `.c8-dim`
   de 186 px dans une grille à deux colonnes.

   LA CAUSE. La scène RCF est un cadre 9:16 dont la largeur est commandée par
   la HAUTEUR disponible : sur un écran de 620 px de haut, elle ne fait plus
   que 349 px de large — moins qu'un téléphone. Or le point de rupture qui
   remet ces grilles sur une colonne est écrit en `@media (max-width:370px)`,
   c'est-à-dire sur la largeur du NAVIGATEUR. Sur un écran large et bas, il ne
   se déclenche jamais, alors que la scène, elle, est étroite. Le média query
   mesurait la mauvaise chose.

   CE DÉFAUT EST ANTÉRIEUR AU POINT 7 : il touche aussi la retraite, et aucune
   règle de la section 1 de cette feuille n'y participe. Il est corrigé ici
   parce que la recette de la phase finale l'a mis au jour sur un format qu'elle
   avait mission de contrôler.

   LA CORRECTION. On ne déplace pas le point de rupture — on le SUPPRIME comme
   critère : `auto-fit` + `minmax` fait refluer la grille sur la largeur
   réellement disponible, quelle que soit celle de la fenêtre. À 349 px, deux
   colonnes de 150 px plus la gouttière ne tiennent pas : la grille passe
   d'elle-même sur une colonne. À 390 px et au-delà, elle en garde deux —
   le rendu téléphone et bureau ne change pas.

   La feuille C.8 n'est pas retouchée : cette feuille est chargée après elle.
   ========================================================================== */
#endStage .c8-dims{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
#endStage .c8-faits{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
/* `.c8-fait--large` occupe toute la largeur : il le faisait déjà par une règle
   de la C.8, on s'assure qu'`auto-fit` ne le ramène pas à une demi-colonne. */
#endStage .c8-fait--large{ grid-column:1/-1 }

/* SECONDE CAUSE, trouvée en remesurant : la grille refluait bien, mais trois
   pixels de défilement horizontal subsistaient à 348,75 px de scène. Ce n'était
   pas un arrondi — à 393,75 px, également fractionnaire, le débordement est nul.

   C'est le `min-width:auto` implicite des enfants de flex et de grid : un
   cartouche refuse de descendre sous la largeur de son contenu, et le nom de la
   dimension ne se coupe jamais. On rend donc les deux compressibles. C'est le
   correctif canonique, pas un rognage arbitraire de largeur. */
#endStage .c8-dim{ min-width:0 }
#endStage .c8-dim-n{ min-width:0; overflow-wrap:anywhere }
#endStage .c8-fait{ min-width:0 }

/* ==========================================================================
   4. ⓘ INFO → DÉTAILS GAMEPLAY
   --------------------------------------------------------------------------
   La rubrique vit dans la feuille ⓘ Infos existante. Son habillage reprend
   celui de la feuille (`l12-sheet`) : mêmes couleurs, même typographie, même
   rythme. On n'introduit pas un second langage visuel pour une page d'aide.
   ========================================================================== */
#l12SheetInfos .dg-ouvrir{
  display:block;width:100%;margin:14px 0 0;padding:11px 13px;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  background:rgba(255,255,255,.05);color:inherit;font:inherit;
  font-weight:700;text-align:left;cursor:pointer;
  min-height:var(--tap);
}
#l12SheetInfos .dg-ouvrir:hover{background:rgba(255,255,255,.09);border-color:var(--amber)}
#l12SheetInfos .dg-ouvrir::after{content:" ›";opacity:.6;float:right}

#l12SheetInfos #dgStage{margin-top:12px}
#l12SheetInfos .dg-chapeau{
  margin:0 0 14px;font-size:12.5px;line-height:1.45;opacity:.72;font-style:italic;
}
#l12SheetInfos .dg-sec{
  margin:0 0 18px;padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
#l12SheetInfos .dg-sec:last-child{border-bottom:0;padding-bottom:0}
#l12SheetInfos .dg-t{
  margin:0 0 6px;font-family:var(--disp);font-size:17px;font-weight:600;
  letter-spacing:.01em;color:var(--amber);
}
#l12SheetInfos .dg-t:focus{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
#l12SheetInfos .dg-intro{margin:0 0 10px;font-size:13px;line-height:1.5;opacity:.86}
#l12SheetInfos .dg-p{margin:0 0 9px;font-size:13px;line-height:1.5;opacity:.8}
#l12SheetInfos .dg-p:last-child{margin-bottom:0}
#l12SheetInfos .dg-note{
  margin:10px 0 0;padding:9px 11px;border-radius:10px;
  border-left:3px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  font-size:12.5px;line-height:1.45;opacity:.78;
}
#l12SheetInfos .dg-l{margin:0;display:grid;gap:9px}
#l12SheetInfos .dg-l dt{
  font-weight:700;font-size:13px;
  /* Le nom de la jauge se lit d'abord : c'est la clé d'entrée du joueur. */
}
#l12SheetInfos .dg-l dd{
  margin:2px 0 0;font-size:12.5px;line-height:1.45;opacity:.78;
}
@media(max-width:430px){
  #l12SheetInfos .dg-t{font-size:16px}
  #l12SheetInfos .dg-intro,#l12SheetInfos .dg-p{font-size:12.5px}
}

/* ==========================================================================
   5. LE CONTEXTE « MOMENT MARQUANT »
   --------------------------------------------------------------------------
   Mesuré en jouant, pas déduit : quand la carte d'arrêt porte en plus le
   gabarit `milestone-event` du Lot 12, son filet de gravité retombait à 1 px
   alors que le titre, lui, restait correct. La hiérarchie était donc juste sur
   une carte ordinaire et perdue sur une carte marquante — c'est-à-dire
   précisément sur la conséquence la plus grave.

   On nomme ce contexte explicitement plutôt que d'ajouter du poids à l'aveugle.
   Le sélecteur est long, mais il dit ce qu'il fait : même présentée comme un
   moment marquant, une crise garde le filet de son palier.
   ========================================================================== */
body.rcf-milestone-event #rcfStage #eventCard.crise-active[data-crise]{
  border-left-style:solid!important;
}
body.rcf-milestone-event #rcfStage #eventCard.crise-active.crise--alerte[data-crise]{
  border-left-width:4px!important;border-left-color:var(--amber)!important;
}
body.rcf-milestone-event #rcfStage #eventCard.crise-active.crise--recadrage[data-crise]{
  border-left-width:5px!important;border-left-color:var(--orange)!important;
}
body.rcf-milestone-event #rcfStage #eventCard.crise-active.crise--avertissement[data-crise]{
  border-left-width:6px!important;border-left-color:var(--red)!important;
}
body.rcf-milestone-event #rcfStage #eventCard.crise-active.crise--arret[data-crise]{
  border-left-width:7px!important;border-left-color:var(--cyan)!important;
}