/* ============================================================================ RCF · EI-01B — MODE FOCUS DE L'ENTRETIEN, ET CTA DE PRIORITÉ ACCESSIBLE ---------------------------------------------------------------------------- Chargé EN DERNIER, volontairement : `lot12-c7-targeted.css` gagne sur `interview-v5.css` par l'ordre de chargement autant que par le poids de ses sélecteurs. Plutôt que de surenchérir en `!important` depuis un fichier qui se charge trop tôt, ce correctif arrive après tout le monde. CE QUI EST DÉJÀ FAIT AILLEURS, ET QU'ON NE REFAIT PAS : `lot12-c7-targeted.css` masque déjà `#plate`, `#stats`, `.rig`, `details.log` et `#formBanner` pendant un entretien. Les re-masquer ne changerait rien à l'écran et gonflerait le rapport pour rien. CE QUI RESTAIT VRAIMENT À L'ÉCRAN, MESURÉ À 320x568 PAR `tools/ei/EI_01B_sonde_hud.js` AVANT CE CORRECTIF : 8 843 px² #careerBtn « CARRIÈRE 0 » 4 334 px² #punch « Hiver 2028 · 18 ANS » 4 038 px² #ambChip « 🎯 Autodidacte ☆☆☆☆ » 1 890 px² #gameMenuBtn « ⌂ » 1 755 px² #bibleBtn --------- 20 860 px² de HUD, soit 11,5 % de la fenêtre, pour une carte d'entretien qui n'en occupait que 43 %. Aucun de ces blocs n'est utile PENDANT l'entretien : ni la saison, ni l'âge, ni le palier d'ambition, ni le carnet de carrière, ni la Bible. Ce sont exactement les éléments qui font dire « une carte s'est ouverte dans l'écran de carrière » au lieu de « je suis entré dans un moment d'entretien ». CE N'EST QUE DE LA PRÉSENTATION : aucun état de jeu n'est touché, aucune donnée n'est supprimée, aucune navigation métier n'est modifiée. Tout est accroché à `body.rcf-milestone-event`, que le renderer pose et retire déjà à chaque écran d'entretien (`turnOn()` / `turnOff()`). ========================================================================== */ /* ── 1. LA SORTIE RESTE LÀ, MAIS ELLE NE PARLE PLUS FORT QUE LA SCÈNE ─────── Le retour au menu est le seul chemin dont le joueur peut avoir besoin en cours d'entretien ; on ne le supprime pas. On l'éteint, et il se rallume dès qu'on le survole ou qu'on l'atteint au clavier. */ body.rcf-milestone-event .wrap:has(#scGame.on) #gameMenuBtn{ opacity:.34; transition:opacity .28s ease; } body.rcf-milestone-event .wrap:has(#scGame.on) #gameMenuBtn:hover, body.rcf-milestone-event .wrap:has(#scGame.on) #gameMenuBtn:focus-visible{ opacity:1 } /* ── 2. MOBILE — CE QUI NE SERT PAS SORT DU FLUX ──────────────────────────── Sur un écran étroit, atténuer ne suffit pas : la place occupée compte autant que l'attention captée. Retirer ces blocs du flux rend au décor ET à la carte les pixels qu'ils prenaient — c'est aussi ce qui fait tenir le bouton de validation de l'écran priorité au-dessus de la ligne de flottaison à 320x568. */ @media (max-width:860px){ body.rcf-milestone-event .wrap:has(#scGame.on) #punch, body.rcf-milestone-event .wrap:has(#scGame.on) #ambChip, /* `!important` À CONTRECŒUR, ET POUR UNE RAISON MESURÉE : `lot12-v4.css` ligne 178 écrit `.wrap:has(#scGame.on) .career-btn{ … display:flex !important … }`. Sans le même niveau, la règle ci-dessous est ignorée — vérifié à la sonde : #punch et #ambChip disparaissaient, ces deux-là restaient à `display:flex`. Les deux autres sélecteurs, eux, n'ont pas besoin d'y recourir. */ body.rcf-milestone-event .wrap:has(#scGame.on) #careerBtn, body.rcf-milestone-event .wrap:has(#scGame.on) #bibleBtn{ display:none!important } /* La barre d'outils n'a plus qu'un bouton : elle se resserre au lieu de laisser un rang vide en travers de la scène. */ body.rcf-milestone-event .wrap:has(#scGame.on) .toolbar{ margin:0 0 8px; gap:0; justify-content:flex-start; } } /* ── 3. DESKTOP — ON ÉTEINT SANS DÉMÉNAGER ───────────────────────────────── Au-delà de 860 px, la scène est encadrée par de la place disponible : retirer ces blocs du flux creuserait un vide au lieu de calmer l'écran. On les laisse exactement où ils sont, et on baisse leur présence. Ils redeviennent lisibles au survol, pour qui veut vérifier une valeur sans quitter l'entretien. */ @media (min-width:861px){ body.rcf-milestone-event .wrap:has(#scGame.on) #punch, body.rcf-milestone-event .wrap:has(#scGame.on) #ambChip, body.rcf-milestone-event .wrap:has(#scGame.on) #careerBtn, body.rcf-milestone-event .wrap:has(#scGame.on) #bibleBtn{ opacity:.16; filter:saturate(.25); transition:opacity .35s ease, filter .35s ease; } body.rcf-milestone-event .wrap:has(#scGame.on) #punch:hover, body.rcf-milestone-event .wrap:has(#scGame.on) #ambChip:hover, body.rcf-milestone-event .wrap:has(#scGame.on) #careerBtn:hover, body.rcf-milestone-event .wrap:has(#scGame.on) #bibleBtn:hover, body.rcf-milestone-event .wrap:has(#scGame.on) #careerBtn:focus-visible, body.rcf-milestone-event .wrap:has(#scGame.on) #bibleBtn:focus-visible{ opacity:1; filter:none; } } /* ── 3bis. L'IDENTITÉ RESTE, SA PRÉSENCE BAISSE ──────────────────────────── §5 demande de conserver l'identité RCF : le bandeau de marque n'est donc pas retiré. Mesuré à 15 574 px² à 320x568, il pesait autant que tout le reste du HUD réuni une fois la saison et l'âge partis. On le laisse en place, en retrait — le logo se voit encore, il ne se dispute plus la lecture avec l'entretien. */ body.rcf-milestone-event .wrap:has(#scGame.on) header.top{ opacity:.42; transition:opacity .3s ease; } body.rcf-milestone-event .wrap:has(#scGame.on) header.top:hover{ opacity:1 } /* ── 4. LE DÉCOR RESPIRE UN PEU PLUS ──────────────────────────────────────── §5 interdit l'écran noir et la boîte centrale : le fond d'entretien et son tirage aléatoire restent intacts. On desserre seulement le voile général d'un cran pendant l'entretien, pour que l'usine se voie. */ body.rcf-milestone-event .wrap:has(#scGame.on) .rcf-game-scrim{ opacity:.82; transition:opacity .4s ease; } /* ── 5. LE BOUTON DE VALIDATION DE L'ÉCRAN PRIORITÉ ───────────────────────── §8 : à 320x568, l'écran priorité reste plus haut qu'une fenêtre, et le bouton passait sous la ligne de flottaison. Il devient collant au bas de la carte : le contenu défile derrière lui, l'action reste visible. §9, garde-fous, et pourquoi cette forme-là : - `position:sticky` GARDE l'élément dans le flux. Il réserve donc sa place en fin de carte : arrivé en bas, il ne recouvre rien. Il ne surplombe qu'en cours de défilement — un `position:fixed`, lui, aurait mangé les dernières lignes de la dernière carte de priorité. - un dégradé opaque en haut du bloc évite que du texte transparaisse à moitié sous le bouton pendant le défilement ; - la règle ne s'applique qu'à `.intv-cta-fixe`, une classe que SEUL l'écran priorité porte : les trois boutons de réponse des écrans 2 et 3 ne deviennent jamais collants ; - au-delà de 860 px de large, ou quand la hauteur suffit, le comportement collant ne coûte rien : l'élément est déjà visible et `sticky` n'a alors aucun effet observable. */ #eventCard.milestone-event .choices.intv-cta-fixe{ position:sticky; bottom:0; z-index:3; margin-top:12px; padding:12px 0 4px; background:linear-gradient(to top, rgba(4,16,27,.97) 0%, rgba(4,16,27,.97) 66%, rgba(4,16,27,0) 100%); } /* ── 6. §9 — LE CTA COLLANT NE DOIT RECOUVRIR AUCUN CHOIX ─────────────────── Première mesure après la pose du bouton collant, à 320x568, écran priorité, sans défilement : CTA top=481 bottom=561 / 568 recouvre « 🎓 Formation / expertise » sur 32 px « 🤝 Équipe / transmission » sur 42 px Deux cartes sur quatre étaient donc à moitié sous le bouton tant que le joueur n'avait pas fait défiler. Un `padding-bottom` compensatoire ne corrige RIEN ici : il rallonge le document sous la grille, mais les cartes restent aux mêmes coordonnées à l'arrêt, donc toujours sous le bouton. Ce qui corrige vraiment, c'est de remonter la grille. On resserre donc l'écran priorité d'encore quelques pixels — sans retirer un seul choix, ni le salaire, ni les lignes d'explication — jusqu'à ce que la dernière carte finisse AU-DESSUS du bouton. Les valeurs ci-dessous sont celles qui amènent le recouvrement à zéro, mesurées, pas estimées. */ @media (max-height:640px){ #eventCard.milestone-event .prio-grille{ gap:5px; margin:6px 0 0 } #eventCard.milestone-event .prio-carte{ min-height:44px; padding:6px 10px; gap:8px } #eventCard.milestone-event .prio-nom{ font-size:13.5px } #eventCard.milestone-event .prio-l{ font-size:10.5px; line-height:1.28 } #eventCard.milestone-event .prio-check{ width:21px; height:21px } /* L'indication « Choisissez d'abord un point à défendre. » double la hauteur du bouton tant que rien n'est choisi. Elle reste — elle dit au joueur pourquoi le bouton est inerte — mais elle se resserre. */ #eventCard.milestone-event .choices.intv-cta-fixe{ margin-top:8px; padding:8px 0 2px } #eventCard.milestone-event .choices.intv-cta-fixe .choice{ min-height:0; padding:9px 12px } #eventCard.milestone-event .choices.intv-cta-fixe .ch{ font-size:10.5px; line-height:1.25 } /* L'amorce de l'écran priorité porte deux phrases : elle se resserre aussi. */ #eventCard.milestone-event .intv-amorce{ margin:4px 0 6px } } /* Mesure des blocs de l'écran priorité à 320x568, après la première passe de compaction : en-tête 77 px, amorce 36, question 45, grille 240, bouton 74, soit 533 px de carte pour 458 px disponibles sous la barre d'outils. Il manquait donc 75 px, et c'est la grille (240 px pour quatre cartes) puis la question (45 px, deux lignes en 18 px) qui les portaient. Second tour, sur les seuls écrans vraiment courts. Rien ne disparaît : la question, les quatre choix, leurs lignes d'explication et le salaire sont tous encore là, simplement composés plus serré. */ @media (max-height:600px){ #eventCard.milestone-event .intv-head{ line-height:1.2 } #eventCard.milestone-event .intv-scene{ font-size:10px; margin:0 } #eventCard.milestone-event .intv-poste{ font-size:14px; margin:1px 0 0 } #eventCard.milestone-event .intv-paie{ font-size:11px; margin:1px 0 0 } #eventCard.milestone-event .etitle{ font-size:15px!important; line-height:1.16!important; margin:2px 0 4px!important } #eventCard.milestone-event .prio-carte{ min-height:0; padding:5px 9px } #eventCard.milestone-event .prio-l{ font-size:10px; line-height:1.22 } #eventCard.milestone-event .prio-ic{ font-size:17px } #eventCard.milestone-event .choices.intv-cta-fixe .choice{ padding:7px 11px } } /* ── 7. §9 TENU JUSQU'AU BOUT — LA GRILLE DEVIENT LA ZONE QUI DÉFILE ──────── Après deux tours de compaction, la carte de l'écran priorité descend de 533 px à 512 px, mais la fenêtre n'en offre que 458 sous la barre d'outils : la dernière carte de choix restait sous le bouton tant qu'on n'avait pas fait défiler de 84 px. Mesuré, pas supposé — et §9 dit « le CTA ne doit pas masquer les dernières lignes d'un choix ». On arrête donc de gratter des pixels et on change de structure, sur les seuls écrans courts : la carte se borne à la hauteur disponible, et c'est LA GRILLE DE CHOIX qui défile à l'intérieur. L'en-tête, l'amorce, la question et le bouton restent fixes et entièrement visibles ; les quatre choix restent tous atteignables ; et plus rien n'est jamais recouvert, puisque le bouton n'est plus en surimpression mais en fin de colonne. Portée volontairement étroite : la règle exige `.intv-cta-fixe`, que seul l'écran priorité porte. Les écrans 1 à 4 et les deux clôtures ne sont pas concernés. */ @media (max-height:600px){ #eventCard.milestone-event:has(.intv-cta-fixe){ display:flex; flex-direction:column; max-height:calc(100dvh - 124px); overflow:hidden; } #eventCard.milestone-event:has(.intv-cta-fixe) .prio-grille{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; /* Un liseré discret en bas dit qu'il reste quelque chose à voir. */ mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent 100%); } /* EI-05 §8 — LA CARTE NE DOIT PAS ÊTRE PLUS COURTE QUE SON TEXTE. La grille est une colonne flex : ses enfants se laissent comprimer quand la place manque. Avec la nouvelle amorce, plus haute de deux lignes, les quatre cartes perdaient 4 à 5 px chacune et leur description sortait du cadre — mesuré à 320x568 : débordement de 1/4 px au départ, 3/6 px après. La grille défile déjà : elle n'a pas besoin de rogner ses cartes. */ #eventCard.milestone-event:has(.intv-cta-fixe) .prio-carte{ flex:0 0 auto } /* Le bouton n'a plus besoin d'être collant : il est en fin de colonne, donc toujours visible. On neutralise la surimpression et son dégradé. */ #eventCard.milestone-event:has(.intv-cta-fixe) .choices.intv-cta-fixe{ position:static; flex:0 0 auto; background:none; } }