/* Version 2.89 — 2026-10-30 — Lot 5l-c3 — Écran des joueurs : ligne discrète du mode test sous le point de la salle (.jeu-salle-diagnostic, D-141, D-198)
 * Version 2.88 — 2026-10-30 — Lot 5k-c1 — Écran des joueurs : couche de la boussole à réactiver sur iPhone par-dessus la scène (.jeu-scene-boussole, .jeu-scene-boussole-bouton, .jeu-scene-boussole-refus, variables --s08-scene-boussole-taille et --s08-scene-boussole-largeur, D-219)
 * Version 2.87 — 2026-10-30 — Lot 5m-c1 — Écran des joueurs : ligne du mode test de la caméra sur la scène du Photosensible (.jeu-photo-test, D-197)
 * Version 2.86 — 2026-10-30 — Lot 3o-r-e — Écran des joueurs : liste des cibles du porche en mode test (.jeu-porche-cibles, .jeu-porche-cible, .jeu-porche-cible--verrouillee, .jeu-porche-cible-image) dans l'essai du porche et la scène de la Bête (D-222)
 * Version 2.85 — 2026-10-30 — Lot 5l — Écran des joueurs : consigne sous le bouton d'enregistrement d'une photo (.jeu-registre-visionneuse-consigne) et bouton « Enregistrer toutes mes photos » en tête de l'onglet Photos (.jeu-registre-souvenirs-actions, .jeu-registre-souvenirs-tout, .jeu-registre-souvenirs-message), fenêtre « Bravo, explorateur ! » (.jeu-ballon-confirme, .jeu-ballon-confirme-texte) et page de félicitations « Mission accomplie ! » au style du registre (.jeu-salle-ecran--deposee, .jeu-salle-felicitations, .jeu-salle-felicitations-texte, encart noir .jeu-salle-felicitations-encart / .jeu-salle-felicitations-encart-titre / .jeu-salle-felicitations-encart-texte, .jeu-salle-enregistrer-photos, .jeu-salle-voir-carnet, D-191, D-198, D-223)
 * Version 2.84 — 2026-10-29 — Lot 3o-r-d — Écran des joueurs : petit lien « Autre angle → » (.jeu-mega-autre-angle) dans l'étape de cadrage manuel du Méga-Costaud lorsqu'au moins 2 points de vue du porche ont une photo guide (D-222)
 * Version 2.83 — 2026-10-29 — Lot 2u-b-c6 — Écran des joueurs : pictogrammes téléversés en masque CSS (.jeu-element--masque, .jeu-icone-masque avec mask-image / -webkit-mask-image, mask-size: contain, mask-repeat: no-repeat, mask-position: center et background-color: currentColor) et variables CSS de couleur par endroit (--s08-ruban-icone-couleur noir dans le ruban, --s08-ruban-icone-registre-couleur clair dans la case Registre du ruban, --s08-controle-icone-couleur noir sur Recentrer, --s08-rencontre-icone-couleur blanc dans les rencontres et --s08-rencontre-icone-active-couleur noir au maintien du bouton Donner, --s08-fleche-bord-couleur magenta sur la flèche de bord, --s08-tuto-icone-couleur noir dans le didacticiel et les repères [icone:…], D-220)
 * Version 2.82 — 2026-10-27 — Lot 2u-b-c5 — Écran des joueurs : Interface de la carte (S08) — crédit « © » construit (.jeu-mentions-bouton en cercle de --s08-credit-diametre: 24px, fond blanc --s08-credit-fond: #FFFFFF et bordure fine réglable --s08-credit-trait: 1.5px couleur --s08-encre ; .jeu-mentions-pastille affichant la lettre « c » minuscule en Courier Prime de graisse --s08-credit-graisse: 700 et de taille --s08-credit-taille: 15px centrée optiquement ; retrait du disque .jeu-mentions-pastille::before, D-211)
 * Version 2.81 — 2026-10-27 — Lot 2u-b-c4 — Écran des joueurs : Interface de la carte (S08) — crédit « © » sans double cercle (.jeu-mentions-bouton sans bordure ni fond extérieur, symbole « © » seul en Courier Prime 700 agrandi à --s08-credit-taille: 42px pour que son propre cercle mesure --s08-credit-diametre: 24px de diamètre, et disque blanc --s08-credit-fond: #FFFFFF posé derrière lui par .jeu-mentions-pastille::before uniquement à l'intérieur du cercle du symbole sans contour ni filet et sans que rien ne dépasse, D-211)
 * Version 2.80 — 2026-10-27 — Lot 4ag-c1 — Écran des joueurs : feuille blanche des rencontres portée par le conteneur commun .jeu-rencontre-entete (#jeu-rencontre-entete) réunissant la bande noire du nom (#jeu-rencontre-nom) et les bandes kraft de la consigne (#jeu-rencontre-consigne), avec le débord --s08-feuille-debord sur les 4 côtés sans décalage (--s08-scene-consigne-debord-haut conservée inutilisée, D-213)
 * Version 2.79 — 2026-10-27 — Lot 5i-c8 — Écran des joueurs : bouton de fin du didacticiel pleine largeur noir (.jeu-tutoriel-commencer : 100 %, fond --s08-encre, texte --s08-papier, Courier Prime 700 capitales à --s08-tuto-bouton-fin-taille: 18px, min-height: 52px, sans arrondi ni ombre) et nom du monstre des rencontres sur bande noire (2v-c2, .jeu-rencontre-nom : fond --s08-etiquette-fond, texte --s08-papier, Courier Prime 700 capitales à --s08-scene-titre-bande-taille: 15px, espacement et marge intérieure de l'étiquette, découpe irrégulière --bande-decoupe, collée au-dessus de la consigne en bandes ; --s08-scene-titre-taille et --s08-scene-titre-contour conservées inutilisées, D-213, D-216)
 * Version 2.78 — 2026-10-27 — Lot 5i-c7 — Écran des joueurs : retouches du didacticiel (D-216) — « Suivant → » sans aucun encadré ni contour de focus automatique, points de progression (.jeu-tutoriel-points) masqués, marge supérieure du titre (--s08-tuto-titre-marge-haut: 28px), et taille du texte propre au didacticiel (--s08-tuto-texte-taille: 16px par défaut, posée depuis le réglage didacticiel_texte_taille_px sur #jeu-tutoriel) appliquée uniquement aux bandes, au mesureur, au repli en texte simple et aux blocs kraft du didacticiel
 * Version 2.77 — 2026-10-27 — Lot 5i-c6 — Écran des joueurs : habillage du didacticiel (#jeu-tutoriel, D-216) — fond à petits carreaux partagé avec le codex (--registre-papier, --registre-quadrillage-image, --registre-quadrillage-pas, .jeu-registre-sans-quadrillage), titre de page en Londrina Solid 900 encre sur le quadrillage (--s08-tuto-titre-taille: 28px, --s08-tuto-titre-inclinaison: -1deg), paragraphes de texte simple en bandes de papier kraft ligne par ligne (.jeu-tutoriel-paragraphe-bandes, feuille blanche facultative --s08-tuto-feuille-affichage: none), paragraphes formatés et listes en un seul bloc kraft incliné à bords irréguliers (.jeu-tutoriel-bloc-kraft), images posées directement sur le quadrillage sans bande (.jeu-tutoriel-image, --s08-tuto-image-hauteur-max), navigation « ← Précédent · points · Suivant → » et « Passer » en liens S08 (--s08-tuto-lien-taille) avec points encre (--s08-tuto-point-taille, --s08-tuto-point-inactif-opacite), haut-parleur discret en encre, et boutons « C'est parti ! » / « Essayer » à filet 1 px sur fond papier sans arrondi ni ombre (--s08-tuto-bouton-taille, --s08-tuto-bouton-marge-interieure)
 * Version 2.76 — 2026-10-27 — Lot 2v-c1 — Écran des joueurs : retouches des rencontres et pastille noire (D-213, D-214) — nom du monstre en titre (.jeu-rencontre-nom) en haut de la scène en Londrina Solid 900 (--s08-scene-titre-taille: 26px) encre sur fond transparent avec contour papier (--s08-scene-titre-contour) au-dessus de la consigne en bandes ; « Selfie » / « Caméra arrière » (.jeu-photo-commandes-secondaires, .jeu-photo-bascule-camera) placé en bas à droite sur la même ligne de base qu'« Affronter plus tard » ; flèches de bord (.jeu-scene-fleche) réduites à 60 % (--s08-fleche-bord-taille: 34px), magenta #E6336F et légèrement transparentes (--s08-fleche-bord-opacite: 0.75) ; Glouton rangé (.jeu-glouton-bas-droite, .jeu-glouton-reserve-ligne, .jeu-glouton-donner-reserve, .jeu-glouton-reserve-sep, .jeu-glouton-recuperer, .jeu-glouton-confirmation en bas à droite sur la ligne de base d'« Affronter plus tard ») ; équipes du Costaud (.jeu-costaud-etat sous la consigne, .jeu-costaud-equipe en Courier Prime --s08-costaud-equipes-taille: 12px) ; pastille noire « TROUVÉ » sur « Cargaison déposée ! » (.jeu-salle-pastille-trouve, --s08-salle-pastille-taille) et sur [icone:tampon] (.jeu-icone-texte--pastille-trouve)
 * Version 2.75 — 2026-10-27 — Lot 2w — Écran des joueurs : écran de capture réussie (#jeu-rencontre-denouement, D-214) — pastille noire « TROUVÉ » de la carte (.jeu-denouement-pastille-trouve) à la taille --s08-capture-pastille-taille (120 px) avec son animation d'apparition jeu-tampon, titre en Londrina Solid 900 (--s08-capture-titre-taille), et micro tableau des points (.jeu-denouement-points, .jeu-denouement-points-libelle, .jeu-denouement-points-valeur, .jeu-denouement-points-total) au style des éléments de score S08 (fond papier, filet extérieur et séparateurs pleins de 1 px encre, libellés en Courier Prime 700 capitales, chiffres en Londrina Solid 900, ligne Total en aplat encre et texte papier)
 * Version 2.74 — 2026-10-26 — Lot 2v — Écran des joueurs : habillage des rencontres (D-213) — lanterne tenue du bas de la carte (#jeu-tenue) et lanterne au premier plan des scènes (.jeu-scene-lanterne) masquées sans capter les gestes ; variable --s08-scene-lien-taille: 12px et classe .jeu-scene-lien pour les petits liens soulignés à zone de toucher >= 44 px (« Affronter plus tard » en bas à gauche, « Appeler à l'aide » du Costaud en bas à droite, « Récupérer mes bonbons » et « OUI / NON » du Glouton, « Selfie » / « Caméra arrière » du Photosensible en bas à droite à hauteur du bouton rond) ; consignes en haut des scènes (#jeu-rencontre-consigne) rendues en bandes de papier kraft sur feuille blanche comme sur la carte ; fond quadrillé du codex sur le Savant (.jeu-scene-decor) ; bouton rond partagé avec le Costaud pour le Glouton (.jeu-glouton-donner avec picto bonbon et réserve dessous) et le Photosensible / Photo de groupe (.jeu-photo-declencheur avec picto appareil photo)
 * Version 2.73 — 2026-10-26 — Lot 2u-b-c3 — Écran des joueurs : Interface de la carte (S08) — alertes à deux choix avec « J'Y VAIS → / PLUS TARD » à la suite du texte (.jeu-message-choix-secondaire, .jeu-message-separateur-choix, .jeu-message-lien--principal, .jeu-message-lien--secondaire, .jeu-zone-message--deux-choix), étiquette d'alerte sans croix (.jeu-message-fermer masqué), découpe kraft portée par .jeu-message-bande::before pour laisser les zones de toucher >= 44 px de haut (.jeu-message-lien::after, .jeu-message-lien--toucher-haut, .jeu-message-lien--toucher-bas) dépasser sans recouvrement entre les deux liens (D-212)
 * Version 2.72 — 2026-10-26 — Lot 2u-b-c2 — Écran des joueurs : Interface de la carte (S08) — retouches du ruban du bas (case Temps à 1,3 part --s08-ruban-part-temps, Registre à 1 part --s08-ruban-part-registre, filet haut de 1 px --s08-ruban-filet, libellés centrés avec chevron › en position absolue à 2 px --s08-ruban-chevron-ecart, icône Bonbons à hauteur 1 × chiffre --s08-ruban-icone-bonbon-echelle), du crédit et des mentions (© en Courier Prime 700 15 px dans un cercle blanc de 24 px à filet 1 px encre --s08-credit-diametre / --s08-credit-fond / --s08-credit-taille, aucun déplacement de la colonne ni du © au dépli, mentions par-dessus le © et la colonne et repliées au toucher, logo descendu de --s08-logo-decalage-haut = 18 px) et du refus explicite « PLUS TARD ✕ » à droite de l'étiquette des alertes (zone de toucher >= 44 px de haut couvrant le mot et la ✕ sans recouvrir les bandes, D-211, D-212)
 * Version 2.71 — 2026-10-26 — Lot 2u-b-c1 — Écran des joueurs : Interface de la carte (S08) — correction de la visibilité des bandes de message (isolation: isolate sur .jeu-zone-message, feuille blanche et filet en z-index négatifs -1 / -2 sous .jeu-message-bandes, @keyframes jeu-bande-apparition sans variables imbriquées dans transform, classe de secours .jeu-message-bande--repli), symbole © hors de la colonne encadrée (.jeu-controles-haut-droite, .jeu-mentions-bouton sans fond ni filet avec zone de toucher 44 × 44 px sans chevaucher Recentrer), mentions (.leaflet-control-attribution) dans #jeu-carte-zone au-dessus du logo et des tuiles, Recentrer toujours sur fond papier, filets et séparateurs pleins de 1 px (--s08-separateur, --s08-fermer-separateur) sans aucun pointillé, et ruban du bas porté à 48 px (chiffres 22 px, libellés 10 px, D-211, D-212)
 * Version 2.70 — 2026-10-26 — Lot 2u-b — Écran des joueurs : Interface de la carte (S08) — messages de la zone de message en bandes de papier kraft (.jeu-message-bandes, .jeu-message-bande, .jeu-message-mesureur) posées sur une feuille blanche à filet de 0,5 px (.jeu-zone-message::before / ::after), étiquette d'alerte (.jeu-message-etiquette, .jeu-message-etiquette-texte) avec ✕ à zone de toucher 44 × 44 px (.jeu-message-fermer), lien d'action souligné à la suite du texte (.jeu-message-lien), animations d'apparition et de disparition (@keyframes jeu-bande-apparition, .jeu-zone-message--sortie), masquage des anciens boutons et restylage de la fenêtre « Message de l'organisation » (.jeu-message-orga, .jeu-message-orga-boite, .jeu-message-orga-texte, .jeu-message-orga-lien, D-212)
 * Version 2.69 — 2026-10-26 — Lot 2u-a — Écran des joueurs : Interface de la carte (S08) — bloc de variables CSS (--s08-…), colonne de contrôles en haut à droite (.jeu-controles-colonne : © 32 × 20 px, Recentrer, +, − en 32 × 32 px à zone de toucher 44 × 44 px, Recentrer en aplat #111 lorsque la carte est déplacée), mentions dépliées en une ligne pleine largeur en haut (.leaflet-control-attribution), ruban du bas de 34 px pleine largeur en portrait et en paysage (.jeu-bas / #jeu-bandeau : Temps · Points · Bonbons · Cocons · Registre), case Temps magenta à l'heure trouble (.jeu-compteur-temps--urgent) et bulle du temps (.jeu-bulle-temps), masquage de #jeu-rappel-retour, et zone de message (.jeu-zone-message) posée à 14 px au-dessus du ruban (D-211)
 * Version 2.68 — 2026-10-26 — Lot 3l-g — Écran des joueurs : jauge circulaire du Rôdeur en rose magenta par défaut et réglable via --rodeur-jauge-couleur (3q, .jeu-scene-viseur-arc), et vignettes cliquables des photos d'un Photosensible dans le bloc « Captures » de la fiche du monstre (.jeu-registre-captures .jeu-registre-vignettes, .jeu-registre-vignette.jeu-registre-capture-photo, D-209)
 * Version 2.67 — 2026-10-26 — Lot 4ag — Écran des joueurs : messagerie organisateur ↔ équipes — fenêtre « Message de l'organisation » par-dessus la carte (.jeu-message-orga, .jeu-message-orga-boite, .jeu-message-orga-texte), fenêtre de saisie « Envoyer un message à l'organisation » (.jeu-message-probleme, .jeu-message-probleme-boite, .jeu-message-probleme-saisie, .jeu-message-probleme-compteur), et section « Messages de l'organisation » + zone « J'ai un problème ? » en bas de Registre > Règles (.jeu-registre-messages-section, .jeu-registre-messages-historique, .jeu-registre-messages-liste, .jeu-registre-message-ligne, .jeu-registre-message-ligne--equipe, .jeu-registre-message-ligne--orga, .jeu-registre-message-heure, .jeu-registre-message-texte, .jeu-registre-message-prefixe, .jeu-registre-messages-vide, .jeu-registre-probleme-section, .jeu-registre-probleme-bouton, .jeu-registre-messages-confirmation, D-208)
 * Version 2.66 — 2026-10-25 — Lot 4ae — Écran des joueurs : bouton haut-parleur discret du didacticiel (.jeu-tutoriel-entete-droite, .jeu-tutoriel-voix >= 44 × 44 px, .jeu-tutoriel-voix--muet, .jeu-tutoriel-voix--attente, @keyframes jeu-tutoriel-voix-attente) et bouton « ↻ Autre nom » (.jeu-equipe-nom-hasard, .jeu-equipe-nom-hasard-icone, 5i-c5)
 * Version 2.65 — 2026-10-25 — Lot 5j — Écran des joueurs : retrait de l'assombrissement de la carte en mode approche (.jeu-en-approche ne filtre plus les tuiles avec --carte-assombrie, ne remplace plus le fond par --carte-papier-assombri et n'estompe plus les zones : la carte reste normale dans le rayon d'un monstre)
 * Version 2.64 — 2026-10-25 — Lot 5c-c1 — Classement complet visible pendant toute la partie : 5e onglet « Scores » du registre (.jeu-registre-onglet:nth-child(1..5), .jeu-registre-scores, .jeu-registre-scores-tete, .jeu-registre-scores-meta, .jeu-registre-scores-corps, .jeu-registre-scores-liste, .jeu-scores-ligne-corps, .jeu-scores-ligne-etat, .jeu-scores-ligne-etat--en-jeu, .jeu-scores-ligne-etat--deposee) et classement en direct sur l'écran de la salle (.salle-grille-basse en 3 colonnes, .salle-bloc-classement-direct, .salle-panneau-meta, .salle-classement-etat, .salle-classement-etat--en-jeu, .jeu-scores-ligne-etat--deposee, D-202)
 * Version 2.63 — 2026-10-24 — Lot 6a — Écran de la salle (/pages/salle.php, #salle-ecran) : mise en page plein écran 16:9 au style du registre (papier, quadrillage, encre, Londrina Solid, Courier Prime, couleur d'accent --registre-accent) lisible à 3 m sur 1280 × 720 comme sur 1920 × 1080 — en-tête (.salle-entete, .salle-logo, .salle-titre, .salle-fin, .salle-fin-rebours, .salle-outils, .salle-hors-ligne, .salle-bouton-discret), vue pendant la partie (.salle-en-cours, 4 grands compteurs .salle-compteurs / .salle-compteur, fil des captures .salle-captures-liste / .salle-capture-ligne, carte de la pieuvre .salle-bloc-pieuvre selon data-etat) et révélation du classement (.salle-revelation, podium animé .salle-podium / .salle-podium-marche et liste complète .salle-classement-liste / .salle-classement-ligne, D-200)
 * Version 2.62 — 2026-10-24 — Lot 5c — Écran des joueurs : tableau des scores (#jeu-scores) au style du registre (fond papier et quadrillage, Londrina Solid, Courier Prime) — en-tête et mention hors ligne (.jeu-scores-entete, .jeu-scores-hors-ligne), vue pendant la partie (.jeu-scores-en-cours, grand rang .jeu-scores-rang, total .jeu-scores-total, phrase d'attente .jeu-scores-attente), liste du classement complet après l'heure de fin (.jeu-scores-liste, .jeu-scores-ligne, .jeu-scores-ligne-rang, .jeu-scores-ligne-nom, .jeu-scores-ligne-points) avec mise en valeur des 3 premiers (.jeu-scores-ligne--podium, .jeu-scores-ligne--rang-1, .jeu-scores-ligne--rang-2, .jeu-scores-ligne--rang-3) et surlignage de l'équipe (.jeu-scores-ligne--mon-equipe), et pied .jeu-scores-pied (D-199)
 * Version 2.61 — 2026-10-23 — Lot 5b-a — Écran des joueurs : fin de partie — pulsation de la salle de retour sur la carte pendant l'heure trouble (.jeu-salle-heure-trouble, .jeu-salle-onde, @keyframes jeu-salle-pulsation, @keyframes jeu-salle-onde), bandeau discret et permanent de rappel de retour (#jeu-rappel-retour, .jeu-rappel-retour) et écran d'accueil à la salle, de dépôt de la cargaison et de fin de partie (.jeu-salle-ecran, .jeu-salle-ecran-boite, .jeu-salle-ecran-visuel, .jeu-salle-ecran-titre, .jeu-salle-ecran-equipe, .jeu-salle-ecran-total, .jeu-salle-ecran-bonus, .jeu-salle-ecran-actions, .jeu-salle-ecran-confirmation, .jeu-salle-ecran-confirmation-texte, .jeu-salle-ecran-confirmation-boutons, D-198)
 * Version 2.60 — 2026-10-23 — Lot 3g-c7 — Écran des joueurs : Photosensible — silhouette de positionnement en aplat clair translucide (.jeu-photo-contour avec --photo-silhouette-position-opacite, 0.18 par défaut, sans ombre portée) et interface de calibrage au doigt des 4 variantes d'écran en mode test (.jeu-photo-commandes-secondaires, .jeu-photo-calibrer-ouvrir, .jeu-photo-calibrage, .jeu-photo-calibrage-entete, .jeu-photo-calibrage-variante, .jeu-photo-calibrage-cibles, .jeu-photo-calibrage-cible, .jeu-photo-calibrage-taille, .jeu-photo-calibrage-curseur, .jeu-photo-calibrage-actions, .jeu-photo-calibrage-cible-active, D-197)
 * Version 2.59 — 2026-10-23 — Lot 2t-c1 — Écran des joueurs : barre du bas (#jeu-bas, portrait et paysage) — bordure régulière de même épaisseur sur les quatre côtés des boutons (.jeu-compteur-carre sans ombre inférieure qui épaississait le trait du bas, enfoncement .jeu-compteur-touchable:active par léger déplacement et assombrissement sans changer l'épaisseur de bordure) et chevron fin « › » après chaque nom en CSS (.jeu-compteur-etiquette::after, espace insécable + chevron sans toucher aux textes du catalogue, D-194)
 * Version 2.58 — 2026-10-23 — Lot 2t — Écran des joueurs : barre du bas (#jeu-bas) en 4 vrais boutons (.jeu-compteur-carre, Points · Bonbons · Cocons groupés à gauche et Registre .jeu-compteur-creatures seul à droite, icône et nombre sur une ligne .jeu-compteur-ligne, nom à cheval sur le trait du bas .jeu-compteur-etiquette, relief et enfoncement au toucher, indicateur hors ligne flottant sans décaler la grille), écran minimal du tableau des scores (.jeu-scores-ecran, .jeu-scores-boite, .jeu-scores-titre, .jeu-scores-equipe, .jeu-scores-total) et mode paysage (boutons compacts regroupés en bas à droite sur la carte pleine largeur, logo réduit sur titre, équipe, carte et registre, D-194)
 * Version 2.57 — 2026-10-23 — Lot 2r — Écran des joueurs : zone de couleur de la famille Méga-Costaud sous la tache d'encre de la pieuvre (.jeu-zone-mega-costaud .jeu-zone-mega-visuel centrée sur --mega-tache-cote par-dessus le disque SVG, .jeu-zone-reussie .jeu-zone-disque atténué à --zone-opacite-attenuee après la victoire, et .jeu-zone-mega-etiquette calée sous la tache d'encre, D-192)
 * Version 2.56 — 2026-10-23 — Lot 3g-c6 — Écran des joueurs : Photosensible — suppression de la transition de filtre sur .jeu-photo-creature-silhouette (transition: none, maintenue uniquement sur .jeu-photo-creature-revelee à la révélation) pour empêcher tout fondu depuis une image non filtrée (D-190)
 * Version 2.55 — 2026-10-22 — Lot 4y — Écran des joueurs : masquage propre de .jeu-element[hidden] et .jeu-scene-cadre[hidden], et superposition de l'image téléversée éventuelle de scene-viseur sous l'anneau-jauge dans .jeu-scene-viseur (D-188)
 * Version 2.54 — 2026-10-22 — Lot 4z — Écran des joueurs : didacticiel — mise en forme du contenu HTML filtré dans .jeu-tutoriel-texte (p, h2, ul, ol, blockquote, img, a) et des icônes du jeu résolues dans le texte à la taille de la ligne (.jeu-icone-texte, D-187)
 * Version 2.53 — 2026-10-22 — Lot 5i-c4 — Écran des joueurs : écran d'équipe — logo du jeu centré en haut (.jeu-equipe-logo, max-height: 84px) et ligne de saisie du nom avec bouton 🎲 (.jeu-equipe-nom-ligne, .jeu-equipe-nom-hasard >= 44 px) (D-186)
 * Version 2.52 — 2026-10-22 — Lot 3c-r-c2 — Écran des joueurs : bouton court de secours sous le cadre de la caméra du ballon (.jeu-ballon-secours-bouton, discret mais lisible, hors de l'image, min-height: 44px, D-185)
 * Version 2.51 — 2026-10-22 — Lot 3l-f — Écran des joueurs : registre « carnet de terrain » — sous-compteur « N ramassé(s) » sous le nom de la case Cocon dans la grille Espèces (.jeu-registre-famille-cocon-compte) et mention discrète « 1 / N » à droite en tête de la page d'un monstre (.jeu-registre-tete-monstre-meta, .jeu-registre-monstre-compte) avec balayage horizontal sur la page (.jeu-registre-page-monstre) (D-184)
 * Version 2.50 — 2026-10-22 — Lot 5i-c3 — Écran des joueurs : didacticiel — masquage propre du lien discret « Passer l'histoire » hors des pages de l'histoire (.jeu-lien-discret[hidden], .jeu-tutoriel-passer[hidden]) et du conteneur visuel sur les pages sans illustration (.jeu-tutoriel-visuel[hidden], .jeu-tutoriel-visuel:empty) ; Registre > Règles — petit encadré en pointillés du code de reprise de l'équipe (.jeu-registre-code-reprise, .jeu-registre-code-reprise-titre, .jeu-registre-code-reprise-valeur, .jeu-registre-code-reprise-texte) (D-183)
 * Version 2.49 — 2026-10-22 — Lot 3l-e — Écran des joueurs : registre « carnet de terrain » — titre « CARNET DE TERRAIN » (.jeu-registre-entete-etiquette) agrandi à 18 px (×1,5) en Londrina Solid sans débordement à 360 px ; frise de famille en bas d'une page de monstre (.jeu-registre-frise, .jeu-registre-frise-titre, .jeu-registre-frise-ligne, .jeu-registre-frise-connue, .jeu-registre-frise-inconnue) avec petit titre au-dessus et taches d'encre inertes ; page d'espèce du Cocon (.jeu-registre-cocon-bilan, .jeu-registre-cocon-compteurs, .jeu-registre-cocon-compteur, .jeu-registre-cocon-compteur-valeur, .jeu-registre-cocon-compteur-libelle, .jeu-registre-cocon-attente, .jeu-registre-cocon-eclosions, .jeu-registre-cocon-eclosions-titre, .jeu-registre-cocon-liste, .jeu-registre-cocon-ligne, .jeu-registre-cocon-ligne-image, .jeu-registre-cocon-ligne-nom, .jeu-registre-cocon-ligne-points) (D-182)
 * Version 2.48 — 2026-10-22 — Lot 5i-c2 — Écran des joueurs : navigation du didacticiel sortie de #jeu-tutoriel-carte et placée juste dessous dans le flux (sans position: sticky), sur une seule ligne (.jeu-tutoriel-navigation : lien texte discret .jeu-tutoriel-precedent à gauche gardant sa place sur la 1re page, petits points de 6 px .jeu-tutoriel-points / .jeu-tutoriel-point au centre, lien texte discret .jeu-tutoriel-suivant à droite gardant sa place sur la dernière page, tous deux >= 44 × 44 px sans fond ni bordure ni ombre), bouton secondaire modeste « C'est parti ! » (.jeu-tutoriel-commencer) centré sous la ligne sur la dernière page, bouton « Essayer » (.jeu-tutoriel-essayer) conservé dans l'encadré en couleur d'accent, et lien discret « Suivant → » (.jeu-rencontre .jeu-glouton-passer-tutoriel) en bas de la scène caméra de l'essai (D-180)
 * Version 2.47 — 2026-10-22 — Lot 3o-r-c — Écran des joueurs : essai du porche en mode test (.jeu-essai-porche-reglages, .jeu-essai-porche-curseur, .jeu-essai-porche-curseur-libelle, .jeu-essai-porche-curseur-valeur) et retouches du registre (Espèces : bandeau de la bête .jeu-registre-pieuvre encadré avec trait pointillé en bas, titre à gauche et flèche à droite .jeu-registre-pieuvre-fleche ; Photos : note de confidentialité .jeu-registre .jeu-registre-souvenirs-note centrée avec mêmes marges latérales que le contenu et marge intérieure 1rem 1.25rem)
 * Version 2.46 — 2026-10-22 — Lot 5i-c1 — Écran des joueurs : navigation du didacticiel (.jeu-tutoriel, .jeu-tutoriel-carte, .jeu-tutoriel-actions en flux sous le texte avec position: sticky en bas si le contenu dépasse, .jeu-tutoriel-navigation avec .jeu-tutoriel-precedent à gauche et .jeu-tutoriel-suivant / .jeu-tutoriel-commencer ≥ 48 px, .jeu-tutoriel-points sous le bouton, .jeu-tutoriel-essayer) et zones sûres (100dvh avec repli 100vh et marges safe-area-inset) sur tous les écrans plein écran (.jeu, .jeu-ecran, .jeu-accueil, .jeu-histoire, .jeu-tutoriel, .jeu-premiers-pas, .jeu-rencontre, .jeu-temps, .jeu-temps-scene, .jeu-rencontre-plus-tard, .jeu-scene-lanterne, .jeu-photo-resultat, .jeu-registre, .jeu-registre-onglets, .jeu-registre-pied, .jeu-registre-visionneuse, .jeu-ballon-ecran, .jeu-eclosion-ecran, .jeu-essai-porche)
 * Version 2.45 — 2026-10-22 — Lot 3l-d — Écran des joueurs : registre « carnet de terrain » — bandeau de la bête sur papier sans image ni état (.jeu-registre-pieuvre, .jeu-registre-pieuvre-nom), ligne de la bête sur papier sans image dans Règles (.jeu-registre-famille-ligne-boss), note de confidentialité en tête de l'onglet Photos (.jeu-registre-souvenirs-note), et retrait du bouton de mise à jour sur la carte (.jeu-organisateur-maj, .jeu-organisateur-maj-bouton)
 * Version 2.44 — 2026-10-22 — Lot 3i-c6 — Écran des joueurs : pieuvre — message quand 8th Wall est indisponible (.jeu-mega-porche-indisponible, .jeu-mega-porche-autre-telephone, .jeu-mega-porche-autre), fin de la pieuvre (.jeu-mega-fin-partenaires, pieuvre à sa place fixe .jeu-mega-photo-fixe, lien « Pas de photo » .jeu-mega-photo-passer, boutons de sortie .jeu-mega-fin-sorties) ; porche perdu = cadre caché (.jeu-mega-cadre--perdu et .jeu-essai-porche-cadre--perdu plus posés, gardés jusqu'au lot 5h)
 * Version 2.43 — 2026-10-22 — Lot 3o-r-b — Écran des joueurs : pieuvre accrochée au porche par 8th Wall dans le combat (.jeu-mega-porche-toile, .jeu-mega-cadre--porche, .jeu-mega-cadre--perdu, indication « Vise le porche » .jeu-mega-porche-viser, lien discret « Cadrer à la main » .jeu-mega-porche-lien et ligne de mesures du mode test .jeu-mega-porche-mesures)
 * Version 2.42 — 2026-10-22 — Lot 3o-r-a-c2 — Écran des joueurs : essai du porche (mode test) — ligne de mesures sur deux lignes (white-space: pre-line sur .jeu-essai-porche-mesures) pour afficher « Accrochage : OK / échec (raison) · N/s » sous les mesures existantes
 * Version 2.41 — 2026-10-22 — Lot 3c-r-c1 — Écran des joueurs : petit lien discret de secours en bas du cadre caméra du ballon (.jeu-ballon-secours-lien, fond papier translucide, zone de toucher >= 44 px)
 * Version 2.40 — 2026-10-22 — Lot 4x — Écran des joueurs : petit bouton discret « Mettre à jour l'app » en bas de la carte (.jeu-organisateur-maj, .jeu-organisateur-maj-bouton) réservé à l'organisateur connecté lorsque le mode test est coupé
 * Version 2.39 — 2026-10-22 — Lot 3o-r-a-c1 — Écran des joueurs : essai du porche (mode test) — contour projeté de la cible en trait vif au-dessus de la pieuvre (.jeu-essai-porche-contour, .jeu-essai-porche-contour-svg, .jeu-essai-porche-contour-forme) et case « Afficher le contour de la cible » sur une seconde ligne de la barre du haut (.jeu-essai-porche-case, .jeu-essai-porche-haut passée en flex-wrap)
 * Version 2.38 — 2026-10-22 — Lot 3k — Écran des joueurs : indices réglables dans la bulle du Savant (.jeu-savant-question-texte, .jeu-savant-indice), bouton grisé au 1er essai (.jeu-reponse.jeu-reponse-grisee), bouton « Indice » (.jeu-savant-bouton-indice), mention du coût en points (.jeu-savant-indice-cout, .jeu-denouement-points-indice) et ligne de test du Savant (.jeu-savant-test)
 * Version 2.37 — 2026-10-22 — Lot 3g-c4 — Écran des joueurs : note touchable « 📷 Photo prise : retrouve-la dans Photos » (.jeu-registre-capture-photo) sous une ligne du bloc « Captures » de la page d'un monstre au registre
 * Version 2.36 — 2026-10-22 — Lot 3c-r — Écran des joueurs : écran du ballon en mode « couleur » — vidéo de la caméra du jeu dans le cadre 3:4 (.jeu-ballon-video), cadre central de 40 % où l'orange est compté (.jeu-ballon-viseur-couleur), ligne de test en direct (.jeu-ballon-test-couleur) ; le champ du mot de secours réutilise .jeu-ballon-mot-bloc et .jeu-ballon-mot-saisie
 * Version 2.35 — 2026-10-22 — Lot 5i — Écran des joueurs : tutoriel de démarrage à écrans « Suivant » après l'histoire (.jeu-tutoriel, .jeu-tutoriel-entete, .jeu-tutoriel-progression, .jeu-tutoriel-compteur, .jeu-tutoriel-points, .jeu-tutoriel-point, .jeu-tutoriel-passer, .jeu-tutoriel-carte, .jeu-tutoriel-visuel, .jeu-tutoriel-lanternes, .jeu-tutoriel-pastille-cadre, .jeu-tutoriel-bonbons, .jeu-tutoriel-actions, .jeu-tutoriel-connais) et bouton « Revoir le tutoriel » (.jeu-registre-regles-actions, .jeu-registre-revoir-tutoriel) dans Registre > Règles
 * Version 2.34 — 2026-10-22 — Lot 5a-c2 — Écran des joueurs : barre d'action « Mettre à jour l'app » en haut du panneau de test (.jeu-test-maj-bloc)
 * Version 2.33 — 2026-10-22 — Lot 4t — Écran des joueurs : interrupteur général « Jeu ouvert au public » — écran de fermeture au style du jeu (.jeu-ferme, .jeu-ferme-carte, .jeu-ferme-logo, .jeu-ferme-message, masquage de tous les autres écrans sous .jeu.jeu--ferme) et bandeau discret pour l'organisateur connecté (.jeu-bandeau-organisateur)
 * Version 2.32 — 2026-10-22 — Lot 3g-c3 — Écran des joueurs : section « Ta lanterne » dans Registre > Règles illustrée par 3 petites lanternes de 40 px (.jeu-registre-lanterne-icone) à flamme droite et immobile aux couleurs des paliers (--flamme-couleur de .lanterne-loin, .lanterne-approche et .lanterne-pres)
 * Version 2.31 — 2026-10-22 — Lot 3c-c2 — Écran des joueurs : ballon orange bien visible sur la carte avec taille (--ballon-taille, 44 px par défaut, de 24 à 80 px), opacité d'un ballon déjà pris (--ballon-opacite-pris, 80 % par défaut, de 20 à 100 % ; 100 % si non pris) et contour sombre contrasté sur le fond de carte ; bloc du bouton de secours (.jeu-ballon-secours-bloc) sur l'écran du ballon
 * Version 2.30 — 2026-10-21 — Lot 3l-c — Écran des joueurs : registre « carnet de terrain » (3/3, maquette S05) — écran Règles (.tete, .points9, .section, .jeu-registre-lanterne-paliers et .jeu-registre-lanterne-pastille aux vraies couleurs des paliers de la lanterne, .famille-ligne avec image 46 px .jeu-registre-regle-image, nom Londrina 18 et consigne 14 px, .famille-ligne.boss en aplat noir à silhouette blanche, .cocon en italique), écran L'artiste (.heros en aplat noir avec photo facultative .photo, nom Londrina 46 et sous-titre Courier ; .html-libre : h2 avec 9 points, ol à pastilles rondes de 26 px, .galerie 2 colonnes avec légende Courier 11, ul.liens 48 px avec →, blockquote en aplat noir pleine largeur) et cadre d'aperçu téléphone (.jeu-registre--apercu)
 * Version 2.29 — 2026-10-21 — Lot 3l-b-c1 — Écran des joueurs : registre « carnet de terrain » — bloc « Captures » (.jeu-registre-captures / .captures, .jeu-registre-captures-titre, .jeu-registre-captures-liste, .jeu-registre-capture en Courier 13 séparées par des pointillés) sous l'étiquette de spécimen à 2 cases, et défilement de la page d'un monstre sans que la frise fixée en bas masque la dernière ligne
 * Version 2.28 — 2026-10-21 — Lot 3o-r-a — Écran des joueurs : page d'essai de reconnaissance du porche par 8th Wall en mode test (.jeu-essai-porche plein écran, .jeu-essai-porche-toile, .jeu-essai-porche-scene, .jeu-essai-porche-cadre projeté par matrix3d et atténué .jeu-essai-porche-cadre--perdu quand la cible est perdue, ligne de mesures lisible au soleil .jeu-essai-porche-mesures, bouton Fermer .jeu-essai-porche-fermer et consigne « Vise le porche » .jeu-essai-porche-consigne)
 * Version 2.27 — 2026-10-21 — Lot 3l-a-c1 — Écran des joueurs : registre « carnet de terrain » — contrainte stricte de toutes les images du registre (emblème téléversé ou provisoire, image de registre, image normale, animation, silhouette) dans leur boîte de la maquette S05 (object-fit: contain, centrées, sans débordement)
 * Version 2.26 — 2026-10-21 — Lot 3l-b — Écran des joueurs : registre « carnet de terrain » (2/3, maquette S05) — page d'un monstre (.tete-monstre, .corps 52 % dessin + 48 % .notes à 3 annotations avec .puce 22 px et filet 30 px, .note.cachee à 0,45 et filet en tirets, .tampon « Retrouvé » 14 px à -9°, .etiquette-spec 2 × 2 en pointillés, .frise fixée en bas 64 px à vignettes 44 px et .courant soulignée de 2,5 px) et bouton « Retour à la carte » (#jeu-registre-fermer) ramené à 44 px avec marges verticales d'Espèces ajustées pour tenir sans défilement sur 360 × 740
 * Version 2.25 — 2026-10-21 — Lot 3l-a — Écran des joueurs : registre « carnet de terrain » (1/3, maquette S05) — polices locales Londrina Solid 900 et Courier Prime 400/700, papier #FBFAF7 à quadrillage 18 px rgba(17,17,17,.07) désactivable, encre #111, pointillés 1.5px dotted, accent #E6336F réservé aux tampons, intercalaires en trapèze à zone de toucher 44 px, écran Espèces sans défilement sur 360 × 740 (logo incliné -2°, compteur N / M, grille des 6 familles ordinaires, bandeau noir de la pieuvre), écran d'une espèce (retour 44 px, en-tête 84 px, consigne en aplat noir, grille des spécimens 224 px), silhouette nette brightness(0)
 * Version 2.24 — 2026-10-21 — Lot 2p — Écran des joueurs : pastille « trouvé » sur la carte (maquette S05 : disque noir #111 plein de 46 px dans un cadre SVG 56 × 56 px, coche couleur papier #FBFAF7, libellé « TROUVÉ » en arc centré en haut à cheval sur le bord, rendu net sans filtre)
 * Version 2.23 — 2026-10-21 — Lot 4u — Écran des joueurs : transparence par zone selon la couleur #RRGGBBAA de sa famille (--zone-opacite posée sur chaque .jeu-zone, et --zone-opacite-attenuee calculée au tiers sur chaque .jeu-zone pour la pause « zzz » et le ratage sous sablier)
 * Version 2.22 — 2026-10-21 — Lot 3i-c3 — Écran des joueurs : onde de rassemblement du Méga-Costaud couvrant toute la carte affichée avec cercles plus épais et plus contrastés (.jeu-balise-detresse-mega, @keyframes jeu-balise-onde-mega) et étiquette permanente lisible au soleil sous la tache d'encre (.jeu-zone-mega-etiquette, .jeu-zone-mega-etiquette-combat)
 * Version 2.22 — 2026-10-21 — Lot 3f-c1 — Écran des joueurs : cocon ancré au sol immobile (.jeu-cocon-creature sans pulsation et avec zone de toucher élargie ::before pour les petits doigts)
 * Version 2.21 — 2026-10-20 — Lot 3p — Écran des joueurs : salle de retour sur la carte (.jeu-salle-boite, .jeu-salle, .jeu-salle-icone, .jeu-salle-nom) et écran d'éclosion des cocons (.jeu-eclosion-ecran : tremblement .jeu-eclosion-cocon-tremble, ouverture .jeu-eclosion-cocon-ouvre, révélation de la famille .jeu-eclosion-famille-revelee, récapitulatif .jeu-eclosion-liste et total .jeu-eclosion-total)
 * Version 2.20 — 2026-10-20 — Lot 2m — Écran des joueurs : zones de monstre sur la carte en aplat vif de la couleur de la famille sans contour ni pointillés (opacité réglable --zone-opacite, 85 % par défaut), aplat atténué au tiers (--zone-opacite-attenuee) pour une zone en pause (.jeu-zone-pause) ou ratée (.jeu-zone-ratee), léger halo clair et coloré sur la zone ciblée ou choisie (.jeu-zone-ciblee, .jeu-zone-choisie) et fusion neutre (mix-blend-mode: normal)
 * Version 2.19 — 2026-10-20 — Lot 3c — Écran des joueurs : ballons orange sur la carte (.jeu-ballon-boite, .jeu-ballon, .jeu-ballon-obtenu atténué), compteur de bonbons touchable (.jeu-compteur-touchable) et écran « J'ai trouvé un ballon orange » (.jeu-ballon-ecran : scan caméra au format 3:4 .jeu-ballon-cadre, saisie du mot de secours .jeu-ballon-mot-bloc et résultat .jeu-ballon-resultat)
 * Version 2.18 — 2026-10-20 — Lot 3i-c2 — Écran des joueurs : ligne secondaire sous les boutons dans la zone de message (.jeu-zone-message-detail, ex. « Elle sera de nouveau là dans XX min »)
 * Version 2.17 — 2026-10-20 — Lot 3o — Écran des joueurs : Méga-Costaud — cadre commun au format de la photo du guide (.jeu-mega-cadre), photo du guide à 40 % d'opacité (.jeu-mega-guide), calque de masque de décor avec mask-image et -webkit-mask-image (.jeu-mega-masque, .jeu-mega-masque-actif), boîte de créature positionnée dans le cadre (.jeu-mega-creature-boite, .jeu-mega-creature-corps) et boutons « C'est cadré » / « Recadrer » (.jeu-mega-bouton-cadrer, .jeu-mega-recadrer)
 * Version 2.16 — 2026-10-17 — Lot 3i — Écran des joueurs : tache d'encre noire irrégulière animée du Méga-Costaud sur la carte (.jeu-zone-mega-costaud, .jeu-zone-mega-visuel, .jeu-tache-encre-masse, @keyframes jeu-mega-tache-ondule)
 * Version 2.15 — 2026-10-16 — Lot 3n — Écran des joueurs : appel à l'aide du Costaud (bouton « Appeler à l'aide » .jeu-costaud-appel et message court « Appel lancé ! » .jeu-costaud-appel-message), balise de détresse pulsante sur la zone du Costaud (.jeu-zone-detresse, .jeu-balise-detresse, .jeu-balise-onde, .jeu-balise-coeur), cercles des zones d'alerte en mode test (.jeu-zone-alerte-test) et second bouton facultatif dans la zone de message
 * Version 2.14 — 2026-10-16 — Lot 5a-c1 — Écran des joueurs : boutons « Rejouer les créatures (garder l'équipe) » et « Nouvelle partie (tout effacer) » et boîte de confirmation dans le panneau de test (.jeu-test-actions-partie, .jeu-test-confirmation)
 * Version 2.13 — 2026-10-16 — Lot 5a — Écran des joueurs : ouverture de la partie (écran titre avec logo et 3 rappels, saisie et affichage du code de reprise, création de l'équipe avec choix d'âge, pastilles de couleur de la lanterne et frisson, écran de l'histoire en paragraphes avec bouton « Passer », lien discret « Je connais déjà » sur le Glouton d'essai, 3 bulles d'aide et carte des ballons orange sur la carte, onglet « Règles » du registre)
 * Version 2.12 — 2026-10-15 — Lot 3h-c2 — Écran des joueurs : Costaud refondu (compteur « k / N équipes » .jeu-costaud-etat avec puces d'équipes colorées et marque de tenue .jeu-costaud-equipe-tient, gros bouton rond « Lance ton rayon ! » .jeu-costaud-bouton à maintenir entouré de l'anneau-jauge .jeu-costaud-jauge-svg, ligne de test .jeu-costaud-test, retrait de l'agitation)
 * Version 2.11 — 2026-10-15 — Lot 3e — Écran des joueurs : épreuve du Timide (flamme qui suit la voix en bas de l'écran avec zone « tout doux » et arc d'apaisement sans chiffre .jeu-timide-foyer, secousse quand la créature pouffe à mi-jauge .jeu-timide-pouffe, replongeon au cri .jeu-timide-replonge, bouton du mode secours sans micro .jeu-timide-secours-bouton et ligne de test .jeu-timide-test)
 * Version 2.10 — 2026-10-15 — Lot 3h-c1 — Écran des joueurs : pastille d'état de l'association de deux équipes sur le Costaud (.jeu-costaud-pastille, colorée à la couleur de l'équipe partenaire quand elle est présente)
 * Version 2.9 — 2026-10-15 — Lot 3g-c2 — Écran des joueurs : silhouette floue en aplat d'encre pour les créatures non capturées au registre (--registre-silhouette-flou, --registre-silhouette-opacite), page de détail d'une créature capturée (.jeu-registre-detail, grande image touchable, vignettes photos), galerie « Souvenirs » (.jeu-registre-souvenirs-grille) et visionneuse plein écran (.jeu-registre-visionneuse)
 * Version 2.8 — 2026-10-15 — Lot 3h — Écran des joueurs : épreuve du Costaud (canvas des rayons .jeu-costaud-rayons, agitation de la créature qui se débat .jeu-costaud-debat, mention « Avec l’équipe … ! » centrée au dénouement réussi)
 * Version 2.7 — 2026-10-15 — Lot 3g-c1 — Écran des joueurs : Photosensible corrigé (jetons --photo-silhouette-opacite, --photo-silhouette-filtre et --photo-revelation-duree pour la silhouette en aplat d'encre révélée à la prise de vue, contour en guide non cliquable, écran de la photo avec message des Téléchargements, Refaire et C'est bon !)
 * Version 2.6 — 2026-10-15 — Lot 3g — Écran des joueurs : épreuve du Photosensible (aperçu vidéo en miroir en mode selfie, créature à peine visible à 25 % puis révélée en fondu, contour de personne en pointillés touchable, bascule Selfie / Caméra arrière, bouton « Prends la photo ! », photo développée en fondu depuis le blanc avec « Enregistrer la photo » et « Partager »)
 * Version 2.5 — 2026-10-15 — Lot 3d-c3 — Écran des joueurs : minuteur de fuite du Rôdeur (fine barre horizontale sous la consigne de la scène en encre claire, sans ombre, clignotement les 5 dernières secondes) et fondu de fuite de la créature (.jeu-rodeur-fuite)
 * Version 2.4 — 2026-10-15 — Lot 2j — Écran des joueurs : mentions du fond de carte repliables en un petit bouton rond « © » en bas à droite de la carte (.jeu-mentions-bouton : zone de toucher de 44 px, pastille ronde discrète noire sur papier de 24 px, sans ombre)
 * Version 2.3 — 2026-10-14 — Lot 5g — Écran des joueurs : consignation dans le registre (image de la créature en fondu avec tampon de réussite, lignes d'annotations « … à découvrir ») et zone d'un lieu en pause atténuée sur la carte avec « zzz » près du nom
 * Version 2.2 — 2026-10-14 — Lot 3m — Écran des joueurs : épreuve du Glouton à jauge de satiété (jauge verticale sur le côté, gros bouton « Donner un bonbon » avec réserve, vol du bonbon vers la créature, croc animé, « Récupérer mes bonbons » et confirmation)
 * Version 2.1 — 2026-10-14 — Lot 3d-c1 — Écran des joueurs : viseur et jauge unifiés en un seul élément (.jeu-scene-viseur : rail circulaire fin ~2 px en encre claire --scene-viseur-rail et arc épais ~12 px en or kraft --scene-viseur-arc, visibles dès le début de l'épreuve)
 * Version 2.0 — 2026-10-14 — Lot 3d — Écran des joueurs : flèche de bord de la scène en or kraft (--scene-jauge)
 * Version 1.9 — 2026-10-13 — Lot 5f-c2 — Écran des joueurs : jauge du Rôdeur réparée (plus de stroke-dashoffset dans la feuille, qui écrasait la valeur posée par le jeu ; trait épais or kraft #C4935A, fond encre semi-transparente, sans ombre) ; bouton « Plus tard » des rencontres (bas à gauche, bande réservée sous l'épreuve) ; animation d'entrée sur --apparition-duree ; classe de l'état technique du panneau de test renommée (.jeu-test-etat-technique), qui cassait les icônes des boutons d'état
 * Version 1.8 — 2026-10-13 — Lot 2i — Écran des joueurs : bandeau du haut retiré ; logo de l'événement en haut à gauche de la carte (sans fond, ne capte pas le doigt, titre provisoire en serif cerné de blanc) ; bandeau du bas (quatre carrés icône + nombre, icône « hors ligne », registre en grand avec son étiquette) ; zone de message en bas, au-dessus de la mention du fond de carte ; « Recentrer » et boutons + / − réduits (32 px, toucher 44 px) en haut à droite ; zones sûres du téléphone (variables --securite-…)
 * Version 1.7 — 2026-10-13 — Lot 5f-c1 — Écran des joueurs : taille du viseur central en variable (--scene-viseur-taille), jauge circulaire du viseur (anneau de progression, Rôdeur)
 * Version 1.6 — 2026-10-13 — Lot 5f — Écran des joueurs : UNE zone de message sous l'en-tête des compteurs (texte + un bouton), icône « hors ligne » de l'en-tête, état technique du panneau de test ; règles retirées avec leurs éléments (pile de messages, bandeau de la cible, bulles, remarques, fiche d'une zone, panneau d'approche du bas, pastille d'envoi)
 * Version 1.5 — 2026-10-13 — Lot 1f — Écran des joueurs : panneau de test redimensionnable (variables --test-…, poignée de partage, en-tête aux trois états, contenu qui défile, mini-bandeau replié, plein écran au-dessus de l'app rendue invisible, carte inerte pendant le glissement, marges de sécurité, paysage)
 * Version 1.4 — 2026-10-13 — Lot 2e-c1 — Écran des joueurs : première palette Mr Smuggler (noir, blanc, papier, pointes de couleur ; variables du socle redéfinies ici pour l'écran des joueurs seulement, ombres nettes) ; fond de carte noir et blanc sans filtre de couleur (contraste réglable), filtre noir et blanc renforcé du fond de secours ; faisceau de la couleur de la flamme ; nom des zones dans la couleur de la famille, contour clair ; lanterne de la carte cernée de blanc ; bulles de la lanterne revenues en haut de la carte
 * Version 1.3 — 2026-10-13 — Lot 3j-c1 — Écran des joueurs : scène des rencontres corrigée (entrée en simple fondu, plus d'encre qui se répand, de voile, de grain ni de bord sombre ; fond de secours uni ; viseur en option ; couche des objets fixés à l'écran ; décor illustré ; cadre de lanterne facultatif ; lanterne rangée), consigne sur fond légèrement opaque, Savant sur papier et capture animée (elle s'incline puis file dans la lanterne)
 * Version 1.2 — 2026-10-13 — Lot 2e — Écran des joueurs : fond de carte très contrasté (encre et papier), zones de couleur avec le nom en arrondi (plus d'emblème), zone illuminée par le faisceau, faisceau de la grande lanterne, pastille de couleur (fiche, bandeau de la cible), lanterne « tenue » en bas de l'écran (bulles, visage, huile, boutons), cap simulé du mode test
 * Version 1.1 — 2026-10-13 — Lot 3j — Écran des joueurs : scène caméra de la rencontre (couches, objets posés au sol, ombre, respiration, flèche de bord, lanterne-viseur, transition carte → encre), temps posés sur la scène, bulle du Savant, Glouton dans la scène (anciennes règles de son décor retirées)
 * Version 1.0 — 2026-10-12 — Lot 4b — Écran des joueurs : section 9 de l'ancienne app.css (version 2.0, lot 2d-c1), DÉPLACÉE TELLE QUELLE (aucune règle ni aucun sélecteur modifié)
 *
 * Chargée par le gabarit (FEUILLES_HISTORIQUES de includes/gabarit.php)
 * juste APRÈS app.css, qui garde le socle utilisé par le jeu (variables
 * --fond, --espace, --rayon…, body, .bouton, .message, .choix, .champ,
 * .carte, .lieu-actions…). Même ensemble de règles, même ordre qu'avant :
 * l'écran des joueurs reste identique.
 * Le Cahier de l'artiste utilise aussi --carte-encre, défini ici.
 */

/* 9. Jeu (joueurs) -------------------------------------------------- */
/* Polices locales du registre « carnet de terrain » (lot 3l-a, S05) :
   portée limitée au registre ; font-display: swap. */
@font-face {
    font-family: "Londrina Solid";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/assets/fonts/londrina-solid-latin-900-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
}
/* Habillage du jeu, réglé ICI seulement :
   - palette Mr Smuggler (lot 2e-c1) : linogravure, noir, blanc et papier,
     quelques pointes de couleur (familles, flamme, accent) ;
   - fond de carte (lot 2e-c1) : tuiles noir et blanc (Stamen Toner par
     défaut), jamais modifiées, seulement un réglage de contraste
     (--carte-contraste) ; fond de secours (OpenStreetMap) passé en noir et
     blanc renforcé (--carte-filtre-secours) ; sans tuiles (pas de réseau),
     le papier --carte-papier reste visible ;
   - flamme de la lanterne : repos (aucune trace suivie), bleue de loin,
     or en approchant, rose tout près (seuils : réglages lanterne_seuil_…) ;
     le faisceau de la carte prend la même couleur ;
   - marques (tampon, sablier) et écrans sombres (approche, signal). */
:root {
    /* Palette Mr Smuggler (lot 2e-c1) : seules couleurs « de base » de
       l'écran des joueurs ; tout le reste en découle. */
    --smuggler-encre: #141414;
    --smuggler-papier: #f1ece0;
    --smuggler-blanc: #ffffff;
    --smuggler-gris: #4d4a44;
    --smuggler-accent: #e8432e;
    /* Variables du socle (app.css) redéfinies pour l'écran des joueurs
       seulement (jeu.css n'est chargée que là) : un seul thème, clair,
       même si le téléphone est réglé en sombre. */
    --fond: var(--smuggler-papier);
    --surface: var(--smuggler-blanc);
    --texte: var(--smuggler-encre);
    --texte-doux: var(--smuggler-gris);
    --bordure: var(--smuggler-encre);
    --accent: var(--smuggler-encre);
    --accent-texte: var(--smuggler-blanc);
    --info-fond: var(--smuggler-blanc);
    --info-texte: var(--smuggler-encre);
    --succes-fond: var(--smuggler-blanc);
    --succes-texte: #1d5c2b;
    --erreur-fond: var(--smuggler-blanc);
    --erreur-texte: #b3261e;
    --danger: var(--smuggler-accent);
    --focus: var(--smuggler-accent);
    color-scheme: light;
    /* Traits et ombres nettes, façon gravure (pas de flou). */
    --trait: 2px;
    --trait-fort: 3px;
    --ombre-jeu: 3px 3px 0 var(--smuggler-encre);
    --ombre-fiche: 0 calc(var(--trait-fort) * -1) 0 var(--smuggler-encre);
    --carte-papier: var(--smuggler-papier);
    --carte-encre: var(--smuggler-encre);
    /* Lot 2e-c1 : fond noir et blanc franc, aucun filtre de couleur ;
       --carte-contraste permet de l'ajuster sur place (1 = tuiles telles
       quelles). Avant (lot 2e, papier et encre bleue) :
       grayscale(1) brightness(0.94) contrast(1.8) sepia(0.6) hue-rotate(175deg) saturate(1.7). */
    --carte-contraste: 1;
    --carte-filtre: contrast(var(--carte-contraste));
    /* Fond de secours (OpenStreetMap en couleur) : noir et blanc renforcé. */
    --carte-filtre-secours: grayscale(1) brightness(0.92) contrast(1.8);
    --flamme-repos: #8fb0e6;
    --flamme-loin: #3d7be0;
    --flamme-approche: #e5a800;
    --flamme-pres: #e0488f;
    /* Lot 2e-c1 : le tampon de réussite porte l'accent (pointe de couleur).
       Lot 2p : pastille « trouvé » sur la carte (maquette S05). */
    --tampon: var(--smuggler-accent);
    --pastille-trouve-encre: #111111;
    --pastille-trouve-papier: #fbfaf7;
    --pastille-trouve-halo: #ffffff;
    --sablier: #7a5a1e;
    --nuit-fond: var(--smuggler-encre);
    --nuit-lueur: #2a2a2a;
    --nuit-texte: var(--smuggler-papier);
    --nuit-creature: #d9d6cc;
    /* Mode approche (lot 2c) : carte assombrie (lot 5f : plus de panneau
       noir en bas, le texte passe dans la zone de message). */
    --carte-assombrie: brightness(0.5);
    --carte-papier-assombri: #6f6b62;
    /* Zone de message unique (lot 5f) : retrait du bord gauche, couleur de
       l'icône « hors ligne ». Lot 2i : la zone est en bas, les boutons de
       zoom en haut à droite : simple marge (4rem avant) ; écart au-dessus de
       la mention du fond de carte. */
    --zone-message-gauche: 0.5rem;
    --zone-message-marge: 0.4rem;
    --hors-ligne-couleur: var(--smuggler-accent);
    /* Lot 2i : zones sûres du téléphone (encoche, barre du bas). Elles
       valent 0 tant que la page n'a pas viewport-fit=cover (lot 2h) : rien
       ne bouge d'ici là, tout est prêt ensuite. */
    --securite-haut: env(safe-area-inset-top, 0px);
    --securite-bas: env(safe-area-inset-bottom, 0px);
    --securite-gauche: env(safe-area-inset-left, 0px);
    --securite-droite: env(safe-area-inset-right, 0px);
    /* Lot 2i : logo de l'événement — environ 40 % de la largeur de la carte
       sur téléphone, plafonné sur ordinateur ; hauteur maximale d'une image
       très haute ; titre provisoire en serif (police de titre de la charte,
       hébergée au lot 2h ; sinon serif du téléphone), contour clair. */
    --logo-largeur: min(40%, 15rem);
    --logo-hauteur-max: 9rem;
    --logo-marge: 0.5rem;
    --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
    --logo-texte-taille: clamp(1.05rem, 5.2vw, 1.6rem);
    --logo-contour: 0.22em;
    /* Lots 2i, 2t : barre du bas — boutons des compteurs (largeur, hauteur,
       icône, chiffre, arrondi), icône du registre (40 px), marges. */
    --compteur-largeur: clamp(4.35rem, 20.5vw, 5.25rem);
    --compteur-taille: 3rem;
    --compteur-icone: 1.25rem;
    --compteur-chiffre-taille: 1.05rem;
    --compteur-rayon: 6px;
    --registre-icone: 2.5rem;
    --bas-marge: 0.35rem;
    /* Lot 2i : contrôles de la carte — « Recentrer » (44 px), boutons + / −
       dessinés à 32 px, écart entre eux (zones de toucher de 44 px séparées).
       Lot 2j : bouton « © » des mentions repliées (toucher 44 px, pastille
       ronde discrète de 24 px). */
    --recentrer-taille: 44px;
    --zoom-taille: 32px;
    --zoom-ecart: 12px;
    --mention-bouton-toucher: 44px;
    --mention-bouton-taille: 24px;
    /* Épreuves (lot 3a) : réponse juste, réponse fausse. */
    --reponse-bonne: #2e7d32;
    --reponse-fausse: #b3261e;
    /* Registre « carnet de terrain » (lot 3l-a, maquette S05) : papier #FBFAF7,
       quadrillage CSS 18 px, encre #111, pointillés 1.5px dotted, accent
       réservé aux tampons (#E6336F par défaut), polices locales Londrina Solid,
       Courier Prime et police système. */
    --registre-encre: #111111;
    --registre-papier: #fbfaf7;
    --registre-accent: #e6336f;
    --registre-pointille: 1.5px dotted var(--registre-encre);
    --registre-quadrillage-trait: rgba(17, 17, 17, 0.07);
    --registre-quadrillage-pas: 18px;
    --registre-quadrillage-image:
        linear-gradient(var(--registre-quadrillage-trait) 1px, transparent 1px),
        linear-gradient(90deg, var(--registre-quadrillage-trait) 1px, transparent 1px);
    --registre-police-titre: "Londrina Solid", sans-serif;
    --registre-police-etiquette: "Courier Prime", monospace;
    --registre-police-texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --registre-feuille: var(--registre-papier);
    --registre-texte: var(--registre-encre);
    --registre-doux: var(--smuggler-gris);
    --registre-trait: var(--registre-encre);
    --registre-inconnue: var(--registre-encre);
    --registre-silhouette-flou: 0px;
    --registre-silhouette-opacite: 1;
    /* Bonbons et épreuve du Glouton (lot 3b) : couleur des bonbons
       provisoires, fumée sucrée. */
    --bonbon: #d94f9b;
    --fumee-sucree: #f2b8d8;
    /* Scène des rencontres (lot 3j ; lot 3j-c1 : plus de voile ni d'encre) :
       fond de secours uni (sans caméra ni décor ; lot 2e-c1 : encre noire,
       bleu soutenu avant), durée du fondu d'entrée,
       fond légèrement opaque de la consigne, lumière du viseur et des
       flèches, panneau du dénouement, bulle du Savant, durée de la capture
       du Savant (elle s'incline puis file dans la lanterne). */
    --scene-fond: var(--smuggler-encre);
    --scene-fondu-duree: 0.45s;
    --scene-consigne-fond: rgba(20, 20, 20, 0.45);
    --savant-capture-duree: 1.6s;
    --scene-lumiere: #ffe7a8;
    /* Lot 5f-c1 / 3d-c1 : viseur-jauge unifié au centre de la scène (Rôdeur) :
       rail circulaire fin (~2 px à l'écran, encre claire lisible sur la
       caméra) et arc épais (~12 px à l'écran, or kraft #C4935A). Unités du
       dessin SVG : 100 = diamètre (55vmin). */
    --scene-viseur-taille: 55vmin;
    --scene-viseur-rail: rgba(241, 236, 224, 0.85);
    --scene-viseur-rail-epaisseur: 1;
    --scene-viseur-arc: #c4935a;
    --rodeur-jauge-couleur: #e6336f;
    --scene-viseur-arc-epaisseur: 5.5;
    --scene-viseur-arc-opacite-repos: 0.85;
    --scene-jauge: var(--scene-viseur-arc);
    /* Lot 3d-c3 : minuteur de fuite du Rôdeur (fine barre horizontale sous la
       consigne de la scène, encre claire lisible sur la caméra, sans ombre)
       et durée du fondu de fuite de la créature. */
    --scene-temps-hauteur: 3px;
    --scene-temps-couleur: var(--smuggler-papier);
    --scene-temps-piste: rgba(241, 236, 224, 0.22);
    --rodeur-fuite-fondu-duree: 0.6s;
    /* Lot 3g-c1 / 3g-c2 : Photosensible — silhouette en aplat d'encre avant la
       photo (forme pleine noire, opacité ~0,8), durée du fondu court qui
       révèle la vraie image au déclenchement et durée du développement (~2 s). */
    --photo-silhouette-opacite: 0.8;
    --photo-silhouette-filtre: brightness(0);
    --photo-revelation-duree: 0.4s;
    --photo-developpement-duree: 1.8s;
    /* Lot 5f-c2 : bouton « Plus tard » des rencontres (discret, en bas à
       gauche de la scène ; place réservée sous l'épreuve) ; durée par
       défaut de l'animation d'entrée d'une créature (une famille au rythme
       propre la remplace par --apparition-duree, posée par jeu_rencontre.js). */
    --plus-tard-fond: rgba(20, 20, 20, 0.55);
    --plus-tard-texte: var(--smuggler-papier);
    --plus-tard-hauteur: 44px;
    --apparition-duree-defaut: 1.6s;
    --scene-panneau: rgba(20, 20, 20, 0.62);
    --scene-bulle: var(--smuggler-blanc);
    --scene-bulle-texte: var(--smuggler-encre);
    /* Lot 2e : faisceau de la grande lanterne (lumière posée « en
       multiplication » sur le fond clair ; lot 2e-c1 : couleur de la flamme,
       --flamme-…), zone illuminée, lanterne du bas (taille, hauteur
       au-dessus de la mention de la carte), huile. */
    --faisceau-opacite: 0.85;
    --zone-eclairee-lueur: #ffbf2e;
    /* Lot 2e-c1 : contour clair du nom des zones (écrit dans la couleur de
       la famille) et de la lanterne de la carte, lisibles sur le noir et
       blanc. Lot 2m : opacité de l'aplat des zones de recherche (réglage
       carte_zone_opacite_pct, posé par jeu_carte.js, 85 % par défaut) et
       opacité atténuée au tiers en pause ou après un ratage. */
    --zone-opacite: 0.85;
    --zone-opacite-attenuee: calc(var(--zone-opacite) / 3);
    --zone-nom-contour: var(--smuggler-blanc);
    --lanterne-contour: var(--smuggler-blanc);
    --tenue-taille: min(36vw, 9rem);
    --tenue-bas: 1.75rem;
    --huile-couleur: #c98a1b;
    /* Panneau de test (lot 1f, jeu_panneau_test.js) : part de la hauteur de
       l'écran principal en mode fractionné (fraction ; défaut et bornes,
       lus aussi par le script ; --test-part est réécrite par la poignée),
       poignée (zone tactile d'au moins 24 px, trait bien visible, couleur
       pendant le glissement), en-tête (boutons de 44 px), mini-bandeau de
       l'état replié, plan du plein écran (au-dessus de la carte et de ses
       panneaux, sous la pastille d'envoi, le registre et la rencontre),
       marges de sécurité du téléphone. */
    --test-part: 0.35;
    --test-part-min: 0.2;
    --test-part-max: 0.8;
    --test-poignee-hauteur: 1.75rem;
    --test-poignee-trait-largeur: 3.5rem;
    --test-poignee-trait-epaisseur: 0.375rem;
    --test-poignee-active: var(--smuggler-accent);
    --test-entete-hauteur: 44px;
    --test-replie-hauteur: 32px;
    --test-plan: 10;
    --test-securite-bas: env(safe-area-inset-bottom, 0px);
    --test-securite-gauche: env(safe-area-inset-left, 0px);
    --test-securite-droite: env(safe-area-inset-right, 0px);

    /* --- Interface de la carte (S08) --- */
    --s08-papier: #FBFAF7; /* Couleur de fond papier des contrôles, du ruban et de la bulle du temps */
    --s08-papier-mentions: rgba(251, 250, 247, 0.94); /* Fond papier à 94 % d'opacité de la ligne des mentions dépliées */
    --s08-encre: #111111; /* Couleur d'encre noire du texte, des icônes, des filets et de la case Registre */
    --s08-magenta: #E6336F; /* Couleur magenta de la case Temps pendant l'heure trouble et après la fin */
    --s08-police-chiffre: "Londrina Solid", sans-serif; /* Police des chiffres du ruban et du titre de la bulle du temps */
    --s08-police-libelle: "Courier Prime", monospace; /* Police des libellés du ruban et des mentions du fond de carte */
    --s08-police-texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Police du texte courant de la bulle du temps */
    --s08-ruban-hauteur: 48px; /* Hauteur dessinée hors zone sûre du ruban du bas (48 px) */
    --s08-ruban-z: 6; /* Plan d'empilement du ruban du bas au-dessus de la carte */
    --s08-ruban-part-case: 1; /* Part de largeur normale d'une case du ruban (Points, Bonbons, Cocons) */
    --s08-ruban-part-temps: 1.3; /* Part de largeur élargie de la case Temps (1,3 part) */
    --s08-ruban-part-registre: 1; /* Part de largeur de la case Registre (1 part) */
    --s08-ruban-chiffre-taille: 22px; /* Taille des chiffres et du temps restant sur la ligne 1 du ruban (22 px) */
    --s08-ruban-chiffre-graisse: 900; /* Graisse de Londrina Solid pour les chiffres du ruban et le titre de la bulle */
    --s08-ruban-icone-echelle: 0.82; /* Facteur de hauteur de l'icône par rapport au chiffre (0,82 × taille du chiffre) */
    --s08-ruban-icone-taille: calc(var(--s08-ruban-chiffre-taille) * var(--s08-ruban-icone-echelle)); /* Taille calculée de l'icône sur la ligne 1 du ruban */
    --s08-ruban-icone-bonbon-echelle: 1; /* Facteur de hauteur du picto Bonbons par rapport au chiffre (1 × taille du chiffre) */
    --s08-ruban-icone-bonbon-taille: calc(var(--s08-ruban-chiffre-taille) * var(--s08-ruban-icone-bonbon-echelle)); /* Hauteur calculée du picto Bonbons sur la ligne 1 du ruban */
    --s08-ruban-ligne-ecart: 3px; /* Écart horizontal entre l'icône et le chiffre sur la ligne 1 d'une case */
    --s08-ruban-lignes-ecart: 2px; /* Écart vertical entre la ligne 1 (icône + chiffre) et la ligne 2 (libellé) */
    --s08-ruban-case-marge-h: 3px; /* Marge intérieure horizontale d'une case du ruban */
    --s08-ruban-libelle-taille: 10px; /* Taille des libellés en capitales sur la ligne 2 du ruban (10 px) */
    --s08-ruban-libelle-graisse: 700; /* Graisse de Courier Prime pour les libellés du ruban */
    --s08-ruban-libelle-espacement: 0.04em; /* Espacement des lettres des libellés du ruban */
    --s08-ruban-libelle-interligne: 1; /* Interligne des libellés du ruban */
    --s08-ruban-chevron-ecart: 2px; /* Écart entre le libellé centré et le chevron › en position absolue (2 px) */
    --s08-ruban-toucher-hauteur: 48px; /* Hauteur de la zone de toucher d'une case du ruban (>= 44 px) */
    --s08-ruban-filet-epaisseur: 1px; /* Épaisseur du filet haut du ruban du bas (1 px) */
    --s08-ruban-filet: var(--s08-ruban-filet-epaisseur) solid var(--s08-encre); /* Filet haut plein de 1 px #111 du ruban du bas */
    --s08-controle-largeur: 32px; /* Largeur des cases de la colonne de contrôles de la carte */
    --s08-controle-hauteur: 32px; /* Hauteur des cases Recentrer, + et − de la colonne de contrôles */
    --s08-credit-diametre: 24px; /* Diamètre du cercle du crédit © construit au-dessus de la colonne (24 px) */
    --s08-credit-fond: #FFFFFF; /* Couleur de fond blanc (#FFFFFF) du cercle du crédit © construit */
    --s08-credit-trait: 1.5px; /* Épaisseur de la bordure circulaire couleur --s08-encre du crédit © construit (1,5 px) */
    --s08-credit-graisse: 700; /* Graisse de Courier Prime de la lettre « c » au centre du crédit © construit (700) */
    --s08-credit-taille: 15px; /* Taille Courier Prime de la lettre « c » minuscule au centre du crédit © construit (15 px) */
    --s08-controle-credit-hauteur: var(--s08-credit-diametre); /* Alias de hauteur du bouton © construit */
    --s08-controle-credit-ecart: 6px; /* Écart vertical entre le bouton © construit et le haut de la colonne Recentrer / + / − */
    --s08-controle-icone-taille: 18px; /* Taille des icônes dans les cases de contrôle (Recentrer, +, −) */
    --s08-controle-credit-taille: var(--s08-credit-taille); /* Alias de taille de la lettre « c » du bouton © construit */
    --s08-controle-toucher: 44px; /* Taille de la zone de toucher (44 × 44 px) par pseudo-élément des contrôles */
    --s08-controle-desactive-opacite: 0.38; /* Opacité d'un bouton de zoom arrivé en butée */
    --s08-filet-epaisseur: 2px; /* Épaisseur du filet de la bulle du temps et de la fenêtre de l'organisation (2 px) */
    --s08-filet: var(--s08-filet-epaisseur) solid var(--s08-encre); /* Filet plein de 2 px à l'encre #111 */
    --s08-separateur-epaisseur: 1px; /* Épaisseur du filet extérieur de la colonne de contrôles et des séparateurs pleins (1 px) */
    --s08-separateur: var(--s08-separateur-epaisseur) solid var(--s08-encre); /* Filet extérieur et séparateur plein de 1 px #111 (contrôles et cases du ruban) */
    --s08-mentions-filet-epaisseur: 1px; /* Épaisseur du filet bas de la ligne des mentions dépliées */
    --s08-mentions-filet: var(--s08-mentions-filet-epaisseur) solid var(--s08-encre); /* Filet bas plein de 1 px #111 des mentions dépliées */
    --s08-mentions-taille: 9.5px; /* Taille de police Courier Prime des mentions dépliées en haut de l'écran */
    --s08-mentions-graisse: 400; /* Graisse de Courier Prime des mentions dépliées */
    --s08-mentions-interligne: 1.25; /* Interligne de la ligne des mentions dépliées */
    --s08-mentions-marge-v: 3px; /* Marge intérieure verticale de la ligne des mentions dépliées */
    --s08-mentions-marge-h: 6px; /* Marge intérieure horizontale de la ligne des mentions dépliées */
    --s08-mentions-z: 8; /* Plan d'empilement de la ligne des mentions dépliées (par-dessus le © et la colonne) */
    --s08-logo-decalage-haut: 18px; /* Décalage vertical fixe du logo sous la hauteur de la ligne des mentions (18 px) */
    --s08-controle-marge: 8px; /* Décalage haut et droit de la colonne de contrôles (8 px + safe-area) */
    --s08-message-ecart-bas: 14px; /* Décalage de la zone de message au-dessus du haut du ruban (14 px) */
    --s08-message-marge-cote: 7px; /* Marge gauche et droite de la zone de message (7 px + safe-area) */
    --s08-bulle-temps-gauche: 8px; /* Décalage gauche (et droit maximal) de la bulle du temps (8 px) */
    --s08-bulle-temps-ecart-bas: 8px; /* Écart entre la bulle du temps et le haut du ruban */
    --s08-bulle-temps-largeur-max: 19rem; /* Largeur maximale de la bulle du temps */
    --s08-bulle-temps-marge-v: 10px; /* Marge intérieure verticale de la bulle du temps */
    --s08-bulle-temps-marge-h: 12px; /* Marge intérieure horizontale de la bulle du temps */
    --s08-bulle-temps-ecart: 4px; /* Écart vertical entre le titre et le texte de la bulle du temps */
    --s08-bulle-temps-titre-taille: 18px; /* Taille du titre Londrina Solid de la bulle du temps */
    --s08-bulle-temps-texte-taille: 14px; /* Taille du texte d'explication de la bulle du temps */
    --s08-bulle-temps-texte-interligne: 1.35; /* Interligne du texte de la bulle du temps */
    --s08-bulle-temps-z: 7; /* Plan d'empilement de la bulle du temps au-dessus de la carte */
    --s08-bande-papier: #E7D6B8; /* Couleur papier kraft des bandes de message et de la fenêtre de l'organisation */
    --s08-bande-encre: #111111; /* Couleur d'encre du texte des bandes de message et de la fenêtre de l'organisation */
    --s08-bande-police: "Courier Prime", monospace; /* Police Courier Prime des bandes de message et de la fenêtre de l'organisation */
    --s08-bande-graisse: 400; /* Graisse normale Courier Prime 400 du texte des bandes de message */
    --s08-bande-taille: 14px; /* Taille de police des bandes de message (14 px) */
    --s08-bande-interligne: 1.22; /* Interligne des bandes de message (1,22) */
    --s08-bande-marge-interieure: 2px 11px 3px; /* Marge intérieure d'une bande de papier (2 px haut, 11 px côtés, 3 px bas) */
    --s08-bande-ecart: 3px; /* Écart vertical entre les bandes de papier (2 px) */
    --s08-bande-inclinaison-moyenne: -0.8deg; /* Inclinaison moyenne des bandes de papier (−0,8°, lue par le JS) */
    --s08-bande-inclinaison-ecart: 0.44deg; /* Écart d'inclinaison autour de la moyenne (±0,44°, lu par le JS) */
    --s08-bande-decalage-max: 2px; /* Décalage horizontal maximal d'une bande (±2 px, lu par le JS) */
    --s08-bande-irregularite: 4px; /* Irrégularité maximale des bords déchirés en clip-path (4 px, lue par le JS) */
    --s08-bande-ombre: none; /* Ombre portée d'une bande de papier (aucune par défaut, variable prévue) */
    --s08-feuille-affichage: block; /* Affichage de la feuille blanche sous le bloc de message (block ou none pour la retirer) */
    --s08-feuille-fond: rgba(255, 255, 255, 0.9); /* Couleur de fond blanche opaque de la feuille sous le bloc de bandes */
    --s08-feuille-debord: 18px; /* Débord de la feuille blanche à gauche, à droite et en haut du bloc (8 px) */
    --s08-feuille-filet-couleur: #111111; /* Couleur du filet entourant la feuille blanche (#111) */
    --s08-feuille-filet-epaisseur: 0px; /* Épaisseur du filet entourant la feuille blanche (0,5 px) */
    --s08-etiquette-fond: #111111; /* Couleur de fond noire de la bande d'étiquette des alertes */
    --s08-etiquette-texte: #FFFFFF; /* Couleur papier kraft du texte de l'étiquette (var(--s08-bande-papier)) des alertes */
    --s08-etiquette-police: "Courier Prime", monospace; /* Police Courier Prime de l'étiquette des alertes */
    --s08-etiquette-graisse: 700; /* Graisse Courier Prime 700 de l'étiquette des alertes */
    --s08-etiquette-taille: 10.5px; /* Taille de police de l'étiquette des alertes (10,5 px) */
    --s08-etiquette-casse: uppercase; /* Casse en capitales de l'étiquette des alertes */
    --s08-etiquette-espacement: 0.1em; /* Espacement des lettres de l'étiquette des alertes (0,08 em) */
    --s08-etiquette-marge-interieure: 2px 9px 2px; /* Marge intérieure du libellé de l'étiquette des alertes */
    --s08-fermer-police: "Courier Prime", monospace; /* Police Courier Prime du bouton « PLUS TARD ✕ » des alertes */
    --s08-fermer-graisse: 700; /* Graisse Courier Prime 700 du bouton « PLUS TARD ✕ » des alertes */
    --s08-fermer-taille: 10.5px; /* Taille de police du bouton « PLUS TARD ✕ » des alertes (10,5 px) */
    --s08-fermer-separateur-epaisseur: 1px; /* Épaisseur du séparateur plein de « PLUS TARD ✕ » (1 px) */
    --s08-fermer-separateur: var(--s08-fermer-separateur-epaisseur) solid var(--s08-etiquette-texte); /* Séparateur plein de 1 px entre l'étiquette et « PLUS TARD ✕ » */
    --s08-fermer-marge-h: 8px; /* Marge intérieure horizontale autour de « PLUS TARD ✕ » dans l'étiquette */
    --s08-fermer-toucher: 44px; /* Hauteur minimale (44 px) de la zone de toucher de « PLUS TARD ✕ » par pseudo-élément */
    --s08-lien-police: "Courier Prime", monospace; /* Police Courier Prime du lien d'action à la suite du texte */
    --s08-lien-graisse: 700; /* Graisse Courier Prime 700 du lien d'action */
    --s08-lien-taille: 0.92em; /* Taille relative du lien d'action (0,92 em) */
    --s08-lien-casse: uppercase; /* Casse en capitales du lien d'action */
    --s08-lien-soulignement-epaisseur: 2px; /* Épaisseur du soulignement du lien d'action (2 px) */
    --s08-lien-soulignement-decalage: 3px; /* Décalage du soulignement du lien d'action (3 px) */
    --s08-scene-lien-taille: 12px; /* Taille des petits liens soulignés des scènes de rencontre (12 px, lot 2v) */
    --s08-scene-boussole-taille: 15px; /* Taille Courier Prime 700 en capitales du bouton de la boussole et de son message de refus (15 px, lot 5k-c1) */
    --s08-scene-boussole-largeur: 20rem; /* Largeur maximale du bouton de la boussole et de son message de refus (lot 5k-c1) */
    --s08-scene-titre-taille: 26px; /* (ne sert plus depuis le lot 2v-c2 / 5i-c8, conservée : ancienne taille Londrina du titre des rencontres du lot 2v-c1) */
    --s08-scene-titre-contour: 0.16em; /* (ne sert plus depuis le lot 2v-c2 / 5i-c8, conservée : ancien contour papier du titre des rencontres du lot 2v-c1) */
    --s08-scene-titre-bande-taille: 15px; /* Taille Courier Prime 700 en capitales du nom du monstre sur bande noire en haut des rencontres (15 px, lot 2v-c2 / 5i-c8) */
    --s08-scene-consigne-debord-haut: 6px; /* (ne sert plus depuis le lot 4ag-c1, conservée : la feuille blanche couvre tout #jeu-rencontre-entete avec --s08-feuille-debord tout autour) */
    --s08-fleche-bord-taille: 34px; /* Taille de la flèche de bord des scènes (~60 % de 56 px, lot 2v-c1) */
    --s08-fleche-bord-opacite: 0.75; /* Opacité de la flèche de bord des scènes (0,75, lot 2v-c1) */
    --s08-costaud-equipes-taille: 12px; /* Taille Courier Prime des équipes présentes du Costaud (12 px, lot 2v-c1) */
    --s08-salle-pastille-taille: 72px; /* Taille de la pastille noire « TROUVÉ » sur « Cargaison déposée ! » (72 px, lot 2v-c1) */
    --s08-anim-apparition-duree: 320ms; /* Durée de l'animation d'apparition d'une bande (320 ms) */
    --s08-anim-apparition-courbe: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* Courbe d'accélération de l'apparition d'une bande */
    --s08-anim-apparition-montee: 10px; /* Montée verticale initiale à l'apparition d'une bande (10 px) */
    --s08-anim-apparition-echelle: 1.04; /* Échelle de départ à l'apparition d'une bande (1,04 → 1) */
    --s08-anim-decalage-ligne: 90ms; /* Décalage d'apparition entre deux lignes consécutives (90 ms, lu par le JS) */
    --s08-anim-disparition-duree: 200ms; /* Durée de disparition en fondu du message (200 ms, lue par le JS) */
    --s08-capture-pastille-taille: 120px; /* Taille de la pastille noire « TROUVÉ » sur l'écran de capture réussie (120 px, lot 2w) */
    --s08-capture-titre-taille: 30px; /* Taille du titre Londrina Solid de l'écran de capture réussie (30 px, lot 2w) */
    --s08-capture-points-largeur-max: 19rem; /* Largeur maximale du micro tableau des points de la capture réussie (19 rem, lot 2w) */
    --s08-capture-points-marge-v: 7px; /* Marge intérieure verticale d'une ligne du micro tableau des points (7 px, lot 2w) */
    --s08-capture-points-marge-h: 12px; /* Marge intérieure horizontale d'une ligne du micro tableau des points (12 px, lot 2w) */
    --s08-capture-points-libelle-taille: 12px; /* Taille des libellés en Courier Prime 700 capitales du micro tableau des points (12 px, lot 2w) */
    --s08-capture-points-chiffre-taille: 20px; /* Taille des chiffres en Londrina Solid 900 du micro tableau des points (20 px, lot 2w) */
    --s08-capture-points-total-chiffre-taille: 24px; /* Taille du chiffre du total mis en avant dans le micro tableau des points (24 px, lot 2w) */
    --s08-tuto-largeur-max: 32rem; /* Largeur maximale de la colonne de contenu du didacticiel sur le quadrillage (lot 5i-c6) */
    --s08-tuto-texte-largeur-max: 24rem; /* Largeur maximale de la zone de texte et des bandes du didacticiel (lot 5i-c6) */
    --s08-tuto-texte-taille: 16px; /* Taille de police des bandes, du repli et des blocs kraft du didacticiel (16 px par défaut, lot 5i-c7) */
    --s08-tuto-titre-taille: 28px; /* Taille en Londrina Solid 900 du titre d'une page du didacticiel (28 px, lot 5i-c6) */
    --s08-tuto-titre-marge-haut: 28px; /* Espace supplémentaire au-dessus du titre d'une page du didacticiel (28 px, lot 5i-c7) */
    --s08-tuto-titre-inclinaison: -1deg; /* Légère inclinaison facultative du titre d'une page du didacticiel (−1°, lot 5i-c6) */
    --s08-tuto-feuille-affichage: none; /* Feuille blanche sous les bandes du didacticiel (none par défaut car le quadrillage sert de fond, lot 5i-c6) */
    --s08-tuto-bloc-ecart: 8px; /* Écart vertical entre paragraphes, blocs kraft et images du didacticiel (lot 5i-c6) */
    --s08-tuto-bloc-marge-interieure: 6px 12px 7px; /* Marge intérieure d'un bloc kraft formaté du didacticiel (lot 5i-c6) */
    --s08-tuto-image-hauteur-max: 11rem; /* Hauteur maximale d'une image posée sur le quadrillage dans le didacticiel (lot 5i-c6) */
    --s08-tuto-lien-taille: 13px; /* Taille Courier Prime 700 des liens de navigation et « Passer » du didacticiel (lot 5i-c6) */
    --s08-tuto-compteur-taille: 12px; /* Taille Courier Prime 700 du compteur d'étape du didacticiel (lot 5i-c6) */
    --s08-tuto-point-taille: 6px; /* Diamètre des points de progression encre du didacticiel (6 px, lot 5i-c6) */
    --s08-tuto-point-ecart: 5px; /* Écart entre les points de progression du didacticiel (lot 5i-c6) */
    --s08-tuto-point-inactif-opacite: 0.35; /* Opacité d'un point de progression non actif du didacticiel (lot 5i-c6) */
    --s08-tuto-bouton-taille: 14px; /* Taille Courier Prime 700 du bouton « Essayer » du didacticiel (lot 5i-c6) */
    --s08-tuto-bouton-fin-taille: 18px; /* Taille Courier Prime 700 en capitales du bouton pleine largeur « C'est parti ! » en fin de didacticiel (18 px, lot 5i-c8) */
    --s08-tuto-bouton-marge-interieure: 8px 18px; /* Marge intérieure des boutons « C'est parti ! » et « Essayer » du didacticiel (lot 5i-c6) */
    /* --- Couleurs des pictogrammes par endroit (lot 2u-b-c6, D-220) --- */
    --s08-ruban-icone-couleur: var(--s08-encre); /* Couleur des pictogrammes des cases claires du ruban du bas (Points, Bonbons, Cocons : noir #111111, lot 2u-b-c6) */
    --s08-ruban-icone-registre-couleur: var(--s08-papier); /* Couleur du pictogramme de la case sombre Registre du ruban du bas (clair #FBFAF7, lot 2u-b-c6) */
    --s08-controle-icone-couleur: var(--s08-encre); /* Couleur du pictogramme Recentrer dans la colonne de contrôles de la carte (noir #111111, lot 2u-b-c6) */
    --s08-rencontre-icone-couleur: #FFFFFF; /* Couleur des pictogrammes dans les écrans de rencontre (bonbon de la jauge, du bouton Donner et en vol : blanc #FFFFFF, lot 2u-b-c6) */
    --s08-rencontre-icone-active-couleur: var(--s08-encre); /* Couleur du pictogramme du bouton rond Donner lorsqu'il est pressé en rencontre (noir #111111, lot 2u-b-c6) */
    --s08-fleche-bord-couleur: var(--s08-magenta); /* Couleur du pictogramme de la flèche de bord dans les scènes de rencontre (magenta #E6336F, lot 2u-b-c6) */
    --s08-tuto-icone-couleur: var(--s08-encre); /* Couleur des pictogrammes dans le didacticiel et les repères [icone:…] (noir #111111, lot 2u-b-c6) */
}

.jeu {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}

.conteneur-centre {
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--securite-haut) + var(--espace)) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + var(--espace)) calc(var(--securite-gauche) + var(--espace));
}

/* Lot 4t : lorsque le jeu est fermé au public, seul l'écran #jeu-ferme est affiché. */
.jeu.jeu--ferme > :not(#jeu-ferme) {
    display: none !important;
}

.jeu-ferme {
    min-height: 100vh;
    min-height: 100dvh;
}

.jeu-ferme-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre-jeu);
    text-align: center;
}

.jeu-ferme-logo {
    margin-bottom: 0;
}

.jeu-ferme-logo img {
    max-width: 100%;
    max-height: 9rem;
    height: auto;
    object-fit: contain;
}

.jeu-ferme-message {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--texte);
    white-space: pre-line;
}

/* Lot 4t : petit bandeau affiché lorsque l'organisateur connecté joue alors que le jeu est fermé au public. */
.jeu-bandeau-organisateur {
    flex: 0 0 auto;
    width: 100%;
    padding: calc(var(--securite-haut) + 0.3rem) 0.75rem 0.3rem;
    border-bottom: var(--trait) solid var(--smuggler-accent);
    background: var(--smuggler-encre);
    color: var(--smuggler-papier);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.jeu:has(> .jeu-bandeau-organisateur:not([hidden])) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.jeu:has(> .jeu-bandeau-organisateur:not([hidden])) > .jeu-principal {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.jeu:has(> .jeu-bandeau-organisateur:not([hidden])) > .jeu-ecran {
    flex: 1 1 auto;
    min-height: 0;
}

.jeu-ecran {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.jeu-accueil {
    justify-content: center;
    max-width: 32rem;
    margin: 0 auto;
    padding: calc(var(--securite-haut) + var(--espace)) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + 1.25rem) calc(var(--securite-gauche) + var(--espace));
    text-align: center;
}

.jeu-accueil h1 {
    font-size: 1.8rem;
}

.jeu-demarrer {
    min-height: 4.5rem;
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.jeu-aide-position {
    margin-top: var(--espace);
    text-align: left;
}

.jeu-aide-position ul {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.jeu-aide-position li {
    margin-bottom: 0.5rem;
}

/* --- Ouverture de la partie (lot 5a) : écran titre, équipe, code de reprise et histoire. */
.jeu-ouverture-etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

.jeu-ouverture-etape[hidden] {
    display: none;
}

.jeu-titre-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 18rem;
    max-height: 9rem;
    margin-bottom: 0.25rem;
    color: var(--carte-encre);
}

.jeu-titre-logo .jeu-element,
.jeu-titre-logo img,
.jeu-titre-logo svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 9rem;
    object-fit: contain;
    object-position: center;
}

.jeu-titre-logo .jeu-logo-provisoire,
.jeu-titre-logo h1 {
    margin: 0;
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
}

.jeu-titre-rappels {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    margin: 0.25rem 0;
    padding: 0.75rem 1rem;
    list-style: none;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre-jeu);
    text-align: left;
}

.jeu-titre-rappels li {
    position: relative;
    padding-left: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.jeu-titre-rappels li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--smuggler-accent);
}

.jeu-lien-discret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.jeu-lien-discret:disabled {
    opacity: 0.5;
    cursor: default;
}

.jeu-lien-discret[hidden] {
    display: none;
}

.jeu-reprise-bloc {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    width: 100%;
    margin-top: 0.25rem;
    text-align: left;
}

.jeu-reprise-bloc[hidden] {
    display: none;
}

.jeu-reprise-bloc h2,
.jeu-reprise-bloc p {
    margin: 0;
}

.jeu-saisie {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}

.jeu-reprise-saisie {
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.jeu-ouverture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jeu-ouverture-actions .bouton {
    flex: 1 1 8rem;
    min-height: 44px;
}

.jeu-equipe-formulaire {
    text-align: left;
}

.jeu-equipe-logo {
    max-width: 14rem;
    max-height: 84px;
    margin: 0 auto;
}

.jeu-equipe-logo .jeu-element,
.jeu-equipe-logo img,
.jeu-equipe-logo svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 84px;
    object-fit: contain;
    object-position: center;
}

.jeu-equipe-formulaire h2 {
    width: 100%;
    margin: 0;
    text-align: center;
}

.jeu-equipe-nom-ligne {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
}

.jeu-equipe-nom-ligne .jeu-saisie {
    flex: 1 1 auto;
    min-width: 0;
}

.jeu-equipe-nom-hasard {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 48px;
    min-height: 44px;
    padding: 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.jeu-equipe-nom-hasard-icone {
    font-size: 1.15rem;
    line-height: 1;
}

.jeu-champ-bloc,
.jeu-champ-groupe {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
}

.jeu-champ-groupe[hidden] {
    display: none;
}

.jeu-champ-libelle,
.jeu-champ-groupe legend {
    padding: 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.jeu-choix-boutons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
    gap: 0.45rem;
}

.jeu-choix-pastille {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.jeu-choix-pastille input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.jeu-choix-pastille:has(input:checked),
.jeu-choix-pastille.jeu-choix-pastille-actif {
    background: var(--texte);
    color: var(--surface);
}

.jeu-choix-pastille:has(input:focus-visible) {
    outline: var(--trait-fort) solid var(--focus);
    outline-offset: 2px;
}

.jeu-couleurs-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.2rem 0;
}

.jeu-couleur-pastille {
    --pastille-couleur: #c4935a;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: 50%;
    background: var(--pastille-couleur);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.jeu-couleur-pastille[aria-checked="true"] {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--bordure);
    transform: scale(1.08);
}

.jeu-couleur-pastille:focus-visible {
    outline: var(--trait-fort) solid var(--focus);
    outline-offset: 4px;
}

.jeu-couleur-pastille-coche {
    display: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.72);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.2rem;
    text-align: center;
}

.jeu-couleur-pastille[aria-checked="true"] .jeu-couleur-pastille-coche {
    display: block;
}

.jeu-code-bloc {
    padding: 1.25rem 1rem;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre-jeu);
}

.jeu-code-bloc h2 {
    margin: 0;
}

.jeu-code-reprise-valeur {
    margin: 0.25rem 0;
    padding: 0.65rem 1rem;
    border: 2px dashed var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.jeu-code-reprise-consigne {
    margin: 0;
    font-weight: 700;
}

/* --- Écran Histoire (lot 5a, lot 5i-c1 : zones sûres). */
.jeu-histoire {
    justify-content: space-between;
    max-width: 32rem;
    margin: 0 auto;
    padding: calc(var(--securite-haut) + 1.5rem) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + 1.25rem) calc(var(--securite-gauche) + var(--espace));
    background: var(--nuit-fond);
    color: var(--nuit-texte);
    text-align: center;
}

.jeu-ecran.jeu-histoire[hidden] {
    display: none;
}

.jeu-histoire-cadre {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}

.jeu-histoire-auteur {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--flamme-approche);
}

.jeu-histoire-paragraphes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 9rem;
    padding: 1.1rem 1.2rem;
    border: var(--trait) solid rgba(241, 236, 224, 0.35);
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, 0.06);
}

.jeu-histoire-paragraphe {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.45;
    animation: jeu-scene-fondu 0.45s ease-out both;
}

.jeu-histoire-points {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.jeu-histoire-point {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgba(241, 236, 224, 0.3);
}

.jeu-histoire-point-actif {
    background: var(--flamme-approche);
    transform: scale(1.2);
}

.jeu-histoire-pied {
    display: flex;
    justify-content: center;
    min-height: 48px;
}

.jeu-histoire-passer {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border-color: var(--smuggler-papier);
    background: transparent;
    color: var(--smuggler-papier);
    font-weight: 700;
}

/* --- Tutoriel de démarrage (lots 5i, 5i-c1, 5i-c2) : un écran à la fois au style
   du jeu, compteur et lien « Passer » toujours visibles en haut, encadré central
   (visuel, titre, texte, et bouton « Essayer » sur la page du Glouton), suivi dans
   le flux sous l'encadré d'une ligne de navigation discrète (« ← Précédent » à
   gauche, petits points de progression ● ○ ○ au centre, « Suivant → » à droite)
   et, sur la dernière page, du bouton modeste « C'est parti ! » centré dessous ;
   balayage gauche / droite pris en charge. */
.jeu-tutoriel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 38;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: calc(var(--securite-haut) + 0.65rem) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + 1.25rem) calc(var(--securite-gauche) + var(--espace));
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--s08-encre);
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    box-sizing: border-box;
}

.jeu-tutoriel.jeu-registre-sans-quadrillage {
    --registre-quadrillage-image: none;
    background-image: none;
}

.jeu-ecran.jeu-tutoriel[hidden] {
    display: none;
}

.jeu-tutoriel:focus {
    outline: none;
}

.jeu-tutoriel-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--s08-tuto-largeur-max);
    min-height: 44px;
    flex: 0 0 auto;
}

.jeu-tutoriel-progression {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.jeu-tutoriel-compteur {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--s08-encre);
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-tuto-compteur-taille);
    font-weight: var(--s08-lien-graisse);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.jeu-tutoriel-points {
    display: none !important;
}

.jeu-tutoriel-point {
    width: var(--s08-tuto-point-taille);
    height: var(--s08-tuto-point-taille);
    border: var(--s08-separateur);
    border-radius: 50%;
    background: transparent;
    opacity: var(--s08-tuto-point-inactif-opacite);
    box-sizing: border-box;
}

.jeu-tutoriel-point-actif {
    background: var(--s08-encre);
    border-color: var(--s08-encre);
    opacity: 1;
}

.jeu-tutoriel-passer,
.jeu-tutoriel-precedent,
.jeu-tutoriel-suivant {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.4rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--s08-encre);
    font-family: var(--s08-lien-police);
    font-size: var(--s08-tuto-lien-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    text-decoration-line: underline;
    text-decoration-thickness: var(--s08-lien-soulignement-epaisseur);
    text-underline-offset: var(--s08-lien-soulignement-decalage);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.jeu-tutoriel-passer:focus,
.jeu-tutoriel-passer:focus-visible,
.jeu-tutoriel-precedent:focus,
.jeu-tutoriel-precedent:focus-visible,
.jeu-tutoriel-suivant:focus,
.jeu-tutoriel-suivant:focus-visible {
    outline: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.jeu-tutoriel-passer {
    flex: 0 0 auto;
    justify-content: center;
}

.jeu-tutoriel-passer[hidden] {
    display: none !important;
}

.jeu-tutoriel-entete-droite {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.jeu-tutoriel-voix {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--s08-encre);
    opacity: 0.85;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s ease, transform 0.12s ease;
}

.jeu-tutoriel-voix:hover,
.jeu-tutoriel-voix:focus-visible {
    opacity: 1;
}

.jeu-tutoriel-voix:focus-visible,
.jeu-tutoriel-commencer:focus-visible,
.jeu-tutoriel-essayer:focus-visible {
    outline: var(--s08-separateur);
    outline-offset: 2px;
}

.jeu-tutoriel-voix-icone {
    width: 21px;
    height: 21px;
    display: block;
}

.jeu-tutoriel-voix-icone--muet {
    display: none;
}

.jeu-tutoriel-voix--muet {
    opacity: 0.45;
}

.jeu-tutoriel-voix--muet .jeu-tutoriel-voix-icone--actif {
    display: none;
}

.jeu-tutoriel-voix--muet .jeu-tutoriel-voix-icone--muet {
    display: block;
}

.jeu-tutoriel-voix--attente {
    opacity: 1;
    animation: jeu-tutoriel-voix-attente 1.4s ease-in-out infinite;
}

.jeu-tutoriel-voix--attente::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--s08-magenta);
}

@keyframes jeu-tutoriel-voix-attente {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.jeu-tutoriel-carte {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--s08-tuto-largeur-max);
    margin-bottom: 0;
    padding: 0.35rem 0 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jeu-tutoriel-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6.25rem;
}

.jeu-tutoriel-visuel[hidden],
.jeu-tutoriel-visuel:empty {
    display: none;
}

.jeu-tutoriel-illustration,
.jeu-tutoriel-ballon,
.jeu-tutoriel-carnet,
.jeu-tutoriel-lanterne-finale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.25rem;
    height: 7.25rem;
    max-width: 100%;
    color: var(--s08-encre);
}

.jeu-tutoriel-illustration > .jeu-element,
.jeu-tutoriel-illustration img,
.jeu-tutoriel-illustration svg,
.jeu-tutoriel-ballon > .jeu-element,
.jeu-tutoriel-ballon img,
.jeu-tutoriel-ballon svg,
.jeu-tutoriel-carnet > .jeu-element,
.jeu-tutoriel-carnet img,
.jeu-tutoriel-carnet svg,
.jeu-tutoriel-lanterne-finale .lanterne {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 7.25rem;
    max-height: 7.25rem;
    object-fit: contain;
    object-position: center;
}

.jeu-tutoriel-lanternes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
}

.jeu-tutoriel-lanterne-icone {
    display: inline-block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

.jeu-tutoriel-lanterne-icone .lanterne,
.jeu-tutoriel-lanterne-finale .lanterne {
    filter: drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 0 1px var(--lanterne-contour));
}

.jeu-tutoriel-lanterne-icone .lanterne-flamme,
.jeu-tutoriel-lanterne-finale .lanterne-flamme {
    transform: none;
    transition: none;
}

.jeu-tutoriel-pastille-cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
}

.jeu-tutoriel-pastille-trouve {
    transform: scale(1.25);
}

.jeu-tutoriel-bonbons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--s08-tuto-icone-couleur);
}

.jeu-tutoriel-bonbon-icone {
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

.jeu-tutoriel-bonbon-icone .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-tutoriel-titre {
    margin: var(--s08-tuto-titre-marge-haut) 0 0;
    color: var(--s08-encre);
    font-family: var(--s08-police-chiffre);
    font-size: var(--s08-tuto-titre-taille);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: 1.08;
    letter-spacing: 0.01em;
    transform: rotate(var(--s08-tuto-titre-inclinaison));
}

.jeu-tutoriel-texte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s08-tuto-bloc-ecart);
    max-width: var(--s08-tuto-texte-largeur-max);
    width: 100%;
    margin: 0;
    color: var(--s08-bande-encre);
    font-family: var(--s08-bande-police);
    font-size: var(--s08-tuto-texte-taille);
    font-weight: var(--s08-bande-graisse);
    line-height: var(--s08-bande-interligne);
}

.jeu-tutoriel-paragraphe-bandes {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--s08-tuto-texte-taille);
    text-align: left;
    box-sizing: border-box;
}

.jeu-tutoriel .jeu-message-bande,
.jeu-tutoriel .jeu-message-bande--repli,
.jeu-tutoriel .jeu-message-mesureur {
    font-size: var(--s08-tuto-texte-taille);
}

.jeu-tutoriel-paragraphe-bandes::before {
    display: var(--s08-tuto-feuille-affichage);
    content: "";
    position: absolute;
    top: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    right: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    bottom: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    left: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    border: var(--s08-feuille-filet-epaisseur) solid var(--s08-feuille-filet-couleur);
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -2;
}

.jeu-tutoriel-paragraphe-bandes::after {
    display: var(--s08-tuto-feuille-affichage);
    content: "";
    position: absolute;
    top: calc(var(--s08-feuille-debord) * -1);
    right: calc(var(--s08-feuille-debord) * -1);
    bottom: calc(var(--s08-feuille-debord) * -1);
    left: calc(var(--s08-feuille-debord) * -1);
    background: var(--s08-feuille-fond);
    border-radius: 0;
    pointer-events: none;
    z-index: -1;
}

.jeu-tutoriel-bloc-kraft {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--s08-tuto-bloc-marge-interieure);
    background: transparent;
    color: var(--s08-bande-encre);
    font-family: var(--s08-bande-police);
    font-size: var(--s08-tuto-texte-taille);
    font-weight: var(--s08-bande-graisse);
    line-height: var(--s08-bande-interligne);
    text-align: left;
    box-sizing: border-box;
    transform: translateX(var(--bande-decalage, 0px)) rotate(var(--bande-inclinaison, 0deg));
}

.jeu-tutoriel-bloc-kraft::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--s08-bande-papier);
    box-shadow: var(--s08-bande-ombre);
    -webkit-clip-path: var(--bande-decoupe, none);
    clip-path: var(--bande-decoupe, none);
    pointer-events: none;
}

.jeu-tutoriel-bloc-kraft strong,
.jeu-tutoriel-bloc-kraft b {
    font-weight: var(--s08-lien-graisse);
}

.jeu-tutoriel-bloc-kraft em,
.jeu-tutoriel-bloc-kraft i {
    font-style: italic;
}

.jeu-tutoriel-texte p {
    margin: 0;
}

.jeu-tutoriel-texte h2 {
    margin: 0.35rem 0 0.15rem;
    color: var(--s08-encre);
    font-family: var(--s08-police-chiffre);
    font-size: calc(var(--s08-tuto-titre-taille) * 0.82);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: 1.1;
}

.jeu-tutoriel-texte h2:first-child {
    margin-top: 0;
}

.jeu-tutoriel-texte ul,
.jeu-tutoriel-texte ol {
    margin: 0;
    padding-left: 1.35rem;
    text-align: left;
}

.jeu-tutoriel-texte li + li {
    margin-top: 0.2rem;
}

.jeu-tutoriel-texte blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.jeu-tutoriel-texte blockquote > strong:first-child,
.jeu-tutoriel-texte blockquote > p:first-child > strong:first-child {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--s08-police-chiffre);
    font-size: calc(var(--s08-tuto-titre-taille) * 0.78);
    font-weight: var(--s08-ruban-chiffre-graisse);
}

.jeu-tutoriel-texte img,
.jeu-tutoriel-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--s08-tuto-image-hauteur-max);
    margin: 0.25rem auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

.jeu-tutoriel-texte a {
    color: var(--s08-bande-encre);
    font-weight: var(--s08-lien-graisse);
    text-decoration-line: underline;
    text-decoration-thickness: var(--s08-lien-soulignement-epaisseur);
    text-underline-offset: var(--s08-lien-soulignement-decalage);
}

/* Lot 4z (D-187) : icône du jeu insérée dans un texte par repère [icone:…], à la taille du texte. */
.jeu-icone-texte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin: 0 0.12em;
    vertical-align: -0.2em;
    color: var(--s08-tuto-icone-couleur);
}

.jeu-icone-texte .jeu-element,
.jeu-icone-texte img,
.jeu-icone-texte svg,
.jeu-icone-texte .jeu-icone-masque {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jeu-icone-texte--pastille-trouve {
    width: 1.65em;
    height: 1.65em;
    vertical-align: -0.35em;
}

.jeu-icone-texte--pastille-trouve svg {
    overflow: visible;
}

.jeu-tutoriel-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: var(--s08-tuto-largeur-max);
    flex: 0 0 auto;
}

.jeu-tutoriel-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
}

.jeu-tutoriel-precedent {
    justify-content: flex-start;
    justify-self: start;
}

.jeu-tutoriel-suivant {
    justify-content: flex-end;
    justify-self: end;
}

.jeu-tutoriel-precedent[hidden],
.jeu-tutoriel-suivant[hidden] {
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
}

.jeu-tutoriel-commencer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: var(--s08-tuto-texte-largeur-max);
    min-width: 44px;
    min-height: 52px;
    padding: var(--s08-tuto-bouton-marge-interieure);
    border: var(--s08-separateur);
    border-radius: 0;
    background: var(--s08-encre);
    color: var(--s08-papier);
    box-shadow: none;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-tuto-bouton-fin-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
}

.jeu-tutoriel-essayer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: var(--s08-tuto-bouton-marge-interieure);
    border: var(--s08-separateur);
    border-radius: 0;
    background: var(--s08-papier);
    color: var(--s08-encre);
    box-shadow: none;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-tuto-bouton-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    text-decoration-line: underline;
    text-decoration-thickness: var(--s08-lien-soulignement-epaisseur);
    text-underline-offset: var(--s08-lien-soulignement-decalage);
    cursor: pointer;
    touch-action: manipulation;
}

.jeu-tutoriel-connais {
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
}

.jeu-tutoriel-commencer[hidden],
.jeu-tutoriel-essayer[hidden],
.jeu-tutoriel-connais[hidden] {
    display: none !important;
}

/* --- Premiers pas sur la carte : 3 bulles d'aide + carte des ballons (lot 5a). */
.jeu-premiers-pas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--securite-haut) + var(--espace)) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + var(--espace)) calc(var(--securite-gauche) + var(--espace));
    background: rgba(20, 20, 20, 0.48);
}

.jeu-premiers-pas[hidden] {
    display: none;
}

.jeu-aide-bulle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 22rem;
    min-height: 7rem;
    padding: 1.15rem 1.25rem;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-jeu);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.jeu-aide-bulle[hidden] {
    display: none;
}

.jeu-aide-bulle-etape {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--texte);
    color: var(--surface);
    font-size: 0.8rem;
    font-weight: 800;
}

.jeu-aide-bulle-texte {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
}

.jeu-aide-bulle-toucher {
    color: var(--texte-doux);
    font-size: 0.88rem;
    font-weight: 600;
}

.jeu-aide-ballons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 22rem;
    padding: 1.2rem;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-jeu);
    text-align: center;
}

.jeu-aide-ballons[hidden] {
    display: none;
}

.jeu-aide-ballons-titre {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.jeu-aide-ballons-texte {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* --- Écran principal (lot 2i) : la carte sur toute la hauteur libre, puis
   le bandeau du bas (puis, en mode test, le panneau de test). Plus de
   bandeau en haut : le logo de l'événement et les contrôles de la carte
   sont posés PAR-DESSUS la carte. 100dvh : hauteur visible réelle sur
   téléphone. */
.jeu-principal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* --- Logo de l'événement (lot 2i) : en haut à gauche de la carte, zone
   sûre comprise, sans fond ; il ne capte JAMAIS le doigt (la carte glisse
   dessous, même sur sa surface). Image : fichier téléversé ou livré
   (aligné en haut à gauche, proportions gardées) ; sinon titre écrit en
   serif, cerné de blanc pour rester lisible sur les rues noires (contour,
   pas d'ombre). */
.jeu-logo {
    position: absolute;
    top: calc(var(--securite-haut) + var(--s08-logo-decalage-haut) + var(--logo-marge));
    left: calc(var(--securite-gauche) + var(--logo-marge));
    z-index: 4;
    width: var(--logo-largeur);
    pointer-events: none;
}

.jeu-logo .jeu-element {
    height: auto;
}

.jeu-logo .jeu-element img {
    width: 100%;
    height: auto;
    max-height: var(--logo-hauteur-max);
    object-fit: contain;
    object-position: left top;
}

.jeu-logo-provisoire {
    display: block;
    color: var(--smuggler-encre);
    font-family: var(--police-titre);
    font-size: var(--logo-texte-taille);
    font-weight: 700;
    line-height: 1.05;
    overflow-wrap: break-word;
    -webkit-text-stroke: var(--logo-contour) var(--smuggler-blanc);
    paint-order: stroke fill;
}

/* --- Ruban du bas (lots 2i, 2t, 2u-a, D-194, D-211) : ruban de 34 px de haut
   (+ safe-area-inset-bottom), en portrait comme en paysage, sur toute la largeur.
   Fond papier, filet haut de 2 px #111, cases séparées par des pointillés de
   1,5 px. Ordre : Temps · Points · Bonbons · Cocons · Registre (1,3 part, aplat
   #111 et texte papier). Zone de toucher de 44 px alignée en bas de la case. */
.jeu-bas,
#jeu-bandeau {
    position: relative;
    z-index: var(--s08-ruban-z);
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    width: 100%;
    height: calc(var(--s08-ruban-hauteur) + var(--securite-bas));
    padding: 0 var(--securite-droite) var(--securite-bas) var(--securite-gauche);
    border-top: var(--s08-ruban-filet);
    background: var(--s08-papier);
    box-sizing: border-box;
}

.jeu-principal:has(> .jeu-test:not([hidden])) > .jeu-bas,
.jeu-principal:has(> .jeu-test:not([hidden])) > #jeu-bandeau {
    height: var(--s08-ruban-hauteur);
    padding-bottom: 0;
}

.jeu-compteurs {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    width: 100%;
    height: var(--s08-ruban-hauteur);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-compteur-carre {
    position: relative;
    display: flex;
    flex: var(--s08-ruban-part-case) 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s08-ruban-lignes-ecart);
    min-width: 0;
    height: var(--s08-ruban-hauteur);
    min-height: 0;
    padding: 0 var(--s08-ruban-case-marge-h);
    border: 0;
    border-radius: 0;
    background: var(--s08-papier);
    color: var(--s08-encre);
    box-sizing: border-box;
}

.jeu-compteur-carre[hidden] {
    display: none;
}

.jeu-compteur-carre:not([hidden]) ~ .jeu-compteur-carre:not([hidden]) {
    border-left: var(--s08-separateur);
}

.jeu-compteur-carre::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--s08-ruban-toucher-hauteur);
}

.jeu-compteur-temps {
    flex: var(--s08-ruban-part-temps) 1 0%;
}

.jeu-compteur-creatures {
    flex: var(--s08-ruban-part-registre) 1 0%;
    margin-left: 0;
    background: var(--s08-encre);
    color: var(--s08-papier);
}

.jeu-compteur-temps.jeu-compteur-temps--urgent {
    background: var(--s08-magenta);
    color: var(--s08-papier);
}

.jeu-compteur-ligne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s08-ruban-ligne-ecart);
    width: 100%;
    min-width: 0;
    line-height: var(--s08-ruban-libelle-interligne);
}

.jeu-compteur-carre .jeu-compteur-icone {
    flex: 0 0 auto;
    width: var(--s08-ruban-icone-taille);
    height: var(--s08-ruban-icone-taille);
    color: var(--s08-ruban-icone-couleur);
}

.jeu-compteur-creatures .jeu-compteur-icone {
    color: var(--s08-ruban-icone-registre-couleur);
}

.jeu-compteur-bonbons .jeu-compteur-icone {
    width: auto;
    height: var(--s08-ruban-icone-bonbon-taille);
}

.jeu-compteur-bonbons .jeu-compteur-icone img,
.jeu-compteur-bonbons .jeu-compteur-icone svg {
    width: auto;
    height: 100%;
}

.jeu-compteur-bonbons .jeu-compteur-icone .jeu-icone-masque {
    width: auto;
    height: 100%;
    aspect-ratio: var(--icone-masque-ratio, 4 / 3);
}

.jeu-compteur-valeur {
    font-family: var(--s08-police-chiffre);
    font-size: var(--s08-ruban-chiffre-taille);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: var(--s08-ruban-libelle-interligne);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jeu-compteur-etiquette {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 10px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-ruban-libelle-taille);
    font-weight: var(--s08-ruban-libelle-graisse);
    line-height: var(--s08-ruban-libelle-interligne);
    letter-spacing: var(--s08-ruban-libelle-espacement);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    transform: none;
    pointer-events: none;
}

.jeu-compteur-etiquette::after {
    content: "›";
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: var(--s08-ruban-chevron-ecart);
}

.jeu-compteur-touchable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.jeu-compteur-touchable:active {
    background: var(--s08-papier);
}

.jeu-compteur-creatures.jeu-compteur-touchable:active {
    background: var(--s08-encre);
}

.jeu-compteur-temps.jeu-compteur-temps--urgent.jeu-compteur-touchable:active {
    background: var(--s08-magenta);
}

.jeu-compteur-touchable:active .jeu-compteur-etiquette {
    background: transparent;
    box-shadow: none;
}

.jeu-compteur-touchable:focus-visible {
    outline: var(--s08-filet);
    outline-offset: calc(var(--s08-filet-epaisseur) * -1);
}

/* Ancien bouton séparé du registre (lot 2i ; masqué au lot 2t, code conservé). */
.jeu-bas-registre {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.1rem 0.25rem;
    border: 0;
    border-radius: var(--compteur-rayon);
    background: transparent;
    color: var(--carte-encre);
    font: inherit;
    cursor: pointer;
}

.jeu-bas-registre[hidden] {
    display: none;
}

.jeu-bas-registre:focus-visible {
    outline: var(--trait-fort) solid var(--focus);
    outline-offset: 2px;
}

.jeu-bas-registre-icone {
    display: block;
    width: var(--registre-icone);
    height: var(--registre-icone);
}

.jeu-bas-registre-etiquette {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Icône « hors ligne » (lots 5f, 2i, 2t) : affichée au-dessus de la barre
   du bas sans jamais déplacer ni casser l'alignement des boutons. */
.jeu-hors-ligne {
    position: absolute;
    left: calc(var(--securite-gauche) + 0.5rem);
    bottom: calc(100% + 0.35rem);
    z-index: 6;
    display: block;
    width: 28px;
    height: 28px;
    padding: 3px;
    border: var(--trait) solid var(--bordure);
    border-radius: 50%;
    background: var(--surface);
    color: var(--hors-ligne-couleur);
    box-shadow: var(--ombre-jeu);
    pointer-events: none;
}

.jeu-hors-ligne[hidden] {
    display: none;
}

/* Mode test : choix de la tranche d'âge de l'équipe (lot 3a). */
.jeu-test-tranche {
    margin-bottom: 0.5rem;
}

/* Mode test (lot 5a-c2) : bouton « Mettre à jour l'app » et son état en haut du panneau. */
.jeu-test-maj-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.jeu-test-maj-bloc .message {
    margin: 0;
}

/* Mode test (lot 5a-c1) : boutons de remise en jeu et boîte de confirmation dans l'app. */
.jeu-test-actions-partie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.jeu-test-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
}

.jeu-test-confirmation[hidden] {
    display: none;
}

.jeu-test-confirmation-texte {
    margin: 0;
    font-weight: 700;
}

.jeu-test-confirmation-actions {
    display: flex;
    gap: 0.5rem;
}

.jeu-test-confirmation-actions .bouton {
    min-width: 5rem;
    min-height: 44px;
}

/* Mode test : interrupteur « Voir les points exacts » (lot 3c), 44 px. */
.jeu-test-exacts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}

.jeu-test-exacts input {
    width: 1.25rem;
    height: 1.25rem;
}

/* Mode test : curseur du cap simulé (lot 2e), 44 px de haut. */
.jeu-test-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-bottom: 0.5rem;
}

.jeu-test-cap input {
    flex: 1 1 12rem;
    min-height: 44px;
}

/* --- Carte (Leaflet). z-index 0 : les calques de Leaflet restent sous
   les messages et la fiche posés par-dessus. */
.jeu-carte-zone {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.jeu-carte {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: var(--carte-papier);
}

.jeu-carte.leaflet-container {
    background: var(--carte-papier);
    font-family: inherit;
}

/* Filtre du fond affiché (lot 2e-c1) : fond principal, ou fond de secours
   (classe jeu-carte-secours posée par jeu_carte.js). */
.jeu-carte {
    --carte-filtre-actif: var(--carte-filtre);
}

.jeu-carte.jeu-carte-secours {
    --carte-filtre-actif: var(--carte-filtre-secours);
}

.jeu-carte .leaflet-tile-pane {
    filter: var(--carte-filtre-actif);
}

/* Colonne de contrôles en haut à droite (lots 2i, 2j, 2u-a, 2u-b-c1, 2u-b-c2, 2u-b-c4, 2u-b-c5, D-211) :
   top et right fixes à 8 px + safe-area (rien ne bouge au dépli des mentions).
   En haut : bouton « © » construit en cercle de 24 px (--s08-credit-diametre),
   fond blanc (#FFFFFF, --s08-credit-fond), bordure de 1,5 px (--s08-credit-trait)
   couleur --s08-encre, contenant la lettre « c » minuscule en Courier Prime de
   graisse 700 (--s08-credit-graisse) et de taille 15 px (--s08-credit-taille)
   centrée optiquement (zone de toucher 44 × 44 px sans chevaucher Recentrer).
   Dessous : colonne encadrée (.jeu-controles-colonne) contenant Recentrer, +
   et − (32 × 32 px), filet extérieur plein de 1 px #111, séparateurs pleins de
   1 px, fond papier (Recentrer toujours papier), icônes de 18 px, toucher 44 px. */
.jeu-carte .leaflet-top {
    top: calc(var(--securite-haut) + var(--s08-controle-marge));
}

.jeu-carte .leaflet-right {
    right: calc(var(--securite-droite) + var(--s08-controle-marge));
}

.jeu-carte .leaflet-bar.leaflet-control-zoom {
    display: none;
}

.jeu-carte .leaflet-control.jeu-controles-haut-droite {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--s08-controle-largeur);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.jeu-carte .jeu-mentions-bouton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s08-credit-diametre);
    height: var(--s08-credit-diametre);
    margin: 0 0 var(--s08-controle-credit-ecart);
    padding: 0;
    border: var(--s08-credit-trait) solid var(--s08-encre);
    border-radius: 50%;
    background: var(--s08-credit-fond);
    color: var(--s08-encre);
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
}

.jeu-carte .jeu-mentions-bouton::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: var(--s08-controle-toucher);
    height: var(--s08-controle-toucher);
    transform: translateX(-50%);
}

.jeu-carte .jeu-mentions-pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--s08-encre);
    box-shadow: none;
    font-family: system-ui, sans-serif;
    font-size: var(--s08-credit-taille);
    font-weight: 400;
    line-height: 1;
    transform: translateY(-2px);
}

.jeu-carte .leaflet-control.jeu-controles-colonne,
.jeu-carte .jeu-controles-colonne {
    display: flex;
    flex-direction: column;
    width: var(--s08-controle-largeur);
    margin: 0;
    padding: 0;
    border: var(--s08-separateur);
    background: var(--s08-papier);
    box-shadow: none;
    box-sizing: content-box;
}

.jeu-carte .jeu-controle-bouton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s08-controle-largeur);
    height: var(--s08-controle-hauteur);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--s08-papier);
    color: var(--s08-encre);
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
}

.jeu-carte .jeu-controle-bouton + .jeu-controle-bouton {
    border-top: var(--s08-separateur);
}

.jeu-carte .jeu-controle-bouton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--s08-controle-toucher);
    height: var(--s08-controle-toucher);
    transform: translate(-50%, -50%);
}

.jeu-carte .jeu-controle-bouton.jeu-controle-zoom-moins::after {
    top: 0;
    bottom: auto;
    transform: translateX(-50%);
}

.jeu-carte .jeu-controle-bouton:focus-visible,
.jeu-carte .jeu-mentions-bouton:focus-visible {
    outline: var(--s08-separateur);
    outline-offset: calc(var(--s08-separateur-epaisseur) * -1);
}

.jeu-carte .jeu-controle-bouton .jeu-element,
.jeu-carte .jeu-controle-icone-zoom {
    display: block;
    width: var(--s08-controle-icone-taille);
    height: var(--s08-controle-icone-taille);
    color: var(--s08-controle-icone-couleur);
}

.jeu-carte .jeu-controle-bouton.jeu-recentrer,
.jeu-carte .jeu-controle-bouton.jeu-recentrer.jeu-recentrer-actif {
    background: var(--s08-papier);
    color: var(--s08-encre);
}

.jeu-carte .jeu-controle-bouton.leaflet-disabled,
.jeu-carte .jeu-controle-bouton:disabled {
    opacity: var(--s08-controle-desactive-opacite);
    cursor: default;
}

/* Mentions du fond de carte (lots 2j, 2u-a, 2u-b-c1, D-211) : dépliées, elles
   forment une seule ligne pleine largeur collée en haut de l'écran, au-dessus
   du logo et de la carte (Courier Prime 400, 9,5 px, fond papier à 94 %, filet
   bas de 1 px #111, coupure « … » si trop long). */
.jeu-carte-zone .leaflet-control-attribution,
.jeu-carte .leaflet-control-attribution {
    position: absolute;
    top: var(--securite-haut);
    left: 0;
    right: 0;
    z-index: var(--s08-mentions-z);
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--s08-mentions-marge-v) calc(var(--securite-droite) + var(--s08-mentions-marge-h)) var(--s08-mentions-marge-v) calc(var(--securite-gauche) + var(--s08-mentions-marge-h));
    border: 0;
    border-bottom: var(--s08-mentions-filet);
    background: var(--s08-papier-mentions);
    color: var(--s08-encre);
    box-shadow: none;
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-mentions-taille);
    font-weight: var(--s08-mentions-graisse);
    line-height: var(--s08-mentions-interligne);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
}

.jeu-carte-zone .leaflet-control-attribution[hidden],
.jeu-carte .leaflet-control-attribution[hidden] {
    display: none !important;
}

.jeu-carte-zone .leaflet-control-attribution a,
.jeu-carte .leaflet-control-attribution a {
    color: var(--s08-encre);
}

/* Zone de message UNIQUE des joueurs (lot 5f, jeu_zone_message.js).
   Lot 2u-a (D-211) : posée à 14 px au-dessus du haut du ruban, avec left et
   right à 7 px + safe-area ; masquée tant que la bulle du temps est ouverte. */
.jeu-carte-zone {
    --mention-hauteur: 0px;
}

.jeu-zone-message {
    position: absolute;
    right: calc(var(--securite-droite) + var(--s08-message-marge-cote));
    bottom: var(--s08-message-ecart-bas);
    left: calc(var(--securite-gauche) + var(--s08-message-marge-cote));
    z-index: 5;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    pointer-events: none;
}

.jeu-zone-message[hidden] {
    display: none !important;
}

.jeu-zone-message--actionnable {
    cursor: pointer;
    pointer-events: auto;
}

.jeu-zone-message--deux-choix .jeu-message-lien {
    pointer-events: auto;
}

.jeu-zone-message--sortie {
    opacity: 0;
    transition: opacity var(--s08-anim-disparition-duree) ease-out;
    pointer-events: none;
}

/* Lot 2u-b / 2u-b-c1 (D-212) : feuille blanche opaque sous tout le bloc de
   bandes (z-index négatifs -2 et -1 dans le contexte isolé de .jeu-zone-message
   pour rester toujours sous les bandes et le texte de secours), débordant de
   8 px à gauche, à droite et en haut et descendant jusqu'au haut du ruban,
   avec un filet #111 de 0,5 px dessous (bords droits). */
.jeu-zone-message::before {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    right: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    bottom: calc(var(--s08-message-ecart-bas) * -1);
    left: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    border: var(--s08-feuille-filet-epaisseur) solid var(--s08-feuille-filet-couleur);
    border-bottom: 0;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -2;
}

.jeu-zone-message::after {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc(var(--s08-feuille-debord) * -1);
    right: calc(var(--s08-feuille-debord) * -1);
    bottom: calc(var(--s08-message-ecart-bas) * -1);
    left: calc(var(--s08-feuille-debord) * -1);
    background: var(--s08-feuille-fond);
    border-radius: 0;
    pointer-events: none;
    z-index: -1;
}

.jeu-carte-zone.jeu-bulle-temps-ouverte .jeu-zone-message {
    display: none !important;
}

/* Bulle du temps (lot 2u-a, D-211) : ouverte par un appui sur la case Temps,
   au-dessus du ruban à 8 px du bord gauche, fond papier, filet de 2 px #111,
   titre Londrina Solid 18 px et texte de 14 px. */
.jeu-bulle-temps {
    position: absolute;
    bottom: var(--s08-bulle-temps-ecart-bas);
    left: calc(var(--securite-gauche) + var(--s08-bulle-temps-gauche));
    right: calc(var(--securite-droite) + var(--s08-bulle-temps-gauche));
    z-index: var(--s08-bulle-temps-z);
    display: flex;
    flex-direction: column;
    gap: var(--s08-bulle-temps-ecart);
    max-width: var(--s08-bulle-temps-largeur-max);
    padding: var(--s08-bulle-temps-marge-v) var(--s08-bulle-temps-marge-h);
    border: var(--s08-filet);
    background: var(--s08-papier);
    color: var(--s08-encre);
    box-sizing: border-box;
    cursor: pointer;
}

.jeu-bulle-temps[hidden] {
    display: none;
}

.jeu-bulle-temps-titre {
    margin: 0;
    font-family: var(--s08-police-chiffre);
    font-size: var(--s08-bulle-temps-titre-taille);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: var(--s08-ruban-libelle-interligne);
}

.jeu-bulle-temps-texte {
    margin: 0;
    font-family: var(--s08-police-texte);
    font-size: var(--s08-bulle-temps-texte-taille);
    line-height: var(--s08-bulle-temps-texte-interligne);
}

/* Lot 2u-b / 2u-b-c1 (D-212) : conteneur des bandes de papier kraft, étiquette
   d'alerte, bouton ✕ à zone de toucher 44 × 44 px, lien d'action, mesureur DOM
   et repli en texte simple. */
.jeu-message-bandes {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s08-bande-ecart);
    width: 100%;
}

.jeu-message-etiquette {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    margin: 0;
    background: var(--s08-etiquette-fond);
    color: var(--s08-etiquette-texte);
    font-family: var(--s08-etiquette-police);
    font-size: var(--s08-etiquette-taille);
    font-weight: var(--s08-etiquette-graisse);
    text-transform: var(--s08-etiquette-casse);
    letter-spacing: var(--s08-etiquette-espacement);
    line-height: 1.25;
    box-sizing: border-box;
    opacity: 1;
    transform: translateX(var(--bande-decalage, 0px)) rotate(var(--bande-inclinaison, 0deg));
}

.jeu-message-etiquette-texte {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s08-etiquette-marge-interieure);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jeu-message-fermer {
    display: none !important;
}

.jeu-message-bande {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: var(--s08-bande-marge-interieure);
    background: transparent;
    color: var(--s08-bande-encre);
    font-family: var(--s08-bande-police);
    font-size: var(--s08-bande-taille);
    font-weight: var(--s08-bande-graisse);
    line-height: var(--s08-bande-interligne);
    white-space: nowrap;
    overflow: visible;
    box-sizing: border-box;
    opacity: 1;
    transform: translateX(var(--bande-decalage, 0px)) rotate(var(--bande-inclinaison, 0deg));
}

.jeu-message-bande::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--s08-bande-papier);
    box-shadow: var(--s08-bande-ombre);
    -webkit-clip-path: var(--bande-decoupe, none);
    clip-path: var(--bande-decoupe, none);
    pointer-events: none;
}

.jeu-message-bande--repli {
    display: block;
    width: auto;
    max-width: 100%;
    background: var(--s08-bande-papier);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
}

.jeu-message-bande--repli::before {
    display: none;
}

.jeu-message-bande--entree,
.jeu-message-etiquette--entree {
    animation: jeu-bande-apparition var(--s08-anim-apparition-duree) var(--s08-anim-apparition-courbe) var(--bande-delai, 0ms) backwards;
}

@keyframes jeu-bande-apparition {
    from {
        opacity: 0;
        translate: 0 var(--s08-anim-apparition-montee);
        scale: var(--s08-anim-apparition-echelle);
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

.jeu-message-mesureur {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: -1;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    visibility: hidden;
    pointer-events: none;
    clip-path: none;
    transform: none;
    animation: none;
}

.jeu-message-mesureur::before {
    display: none;
}

.jeu-message-choix-secondaire {
    display: inline;
    white-space: nowrap;
}

.jeu-message-separateur-choix {
    display: inline;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-lien-taille);
    font-weight: var(--s08-lien-graisse);
    text-decoration: none;
    white-space: pre;
    pointer-events: none;
}

.jeu-message-lien {
    position: relative;
    display: inline-block;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-lien-taille);
    font-weight: var(--s08-lien-graisse);
    text-transform: var(--s08-lien-casse);
    text-decoration-line: underline;
    text-decoration-thickness: var(--s08-lien-soulignement-epaisseur);
    text-underline-offset: var(--s08-lien-soulignement-decalage);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.jeu-message-lien--principal::after,
.jeu-message-lien--secondaire::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: var(--s08-fermer-toucher);
    transform: translateY(-50%);
}

.jeu-message-lien--toucher-haut::after {
    top: auto;
    bottom: 0;
    transform: none;
}

.jeu-message-lien--toucher-bas::after {
    top: 0;
    bottom: auto;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .jeu-message-bande--entree,
    .jeu-message-etiquette--entree,
    .jeu-zone-message--sortie {
        animation: none !important;
        transition: none !important;
    }
}

/* Lot 2u-b : anciens éléments de la zone de message conservés dans le DOM, masqués */
.jeu-zone-message .message,
.jeu-zone-message > .bouton,
.jeu-zone-message-detail {
    display: none !important;
}

/* --- Lanterne « tenue » en bas de l'écran (lot 2e ; lot 2v : masquée en
   permanence et sans aucune prise aux gestes, D-213). */
.jeu-tenue,
#jeu-tenue {
    position: absolute;
    bottom: var(--tenue-bas);
    left: 50%;
    z-index: 6;
    display: none !important;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: min(86vw, 22rem);
    transform: translateX(-50%);
    pointer-events: none !important;
}

.jeu-tenue *,
#jeu-tenue * {
    pointer-events: none !important;
}

.jeu-tenue-lanterne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    max-width: min(60vw, 14rem);
    pointer-events: none;
}

.jeu-tenue-cadre {
    position: relative;
    display: block;
    width: var(--tenue-taille);
    height: var(--tenue-taille);
}

.jeu-tenue-dessin {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Huile : jauge DÉCORATIVE (pleine) jusqu'au lot 5b. */
.jeu-tenue-huile {
    --huile-niveau: 1;
    position: absolute;
    top: 22%;
    left: -0.6rem;
    width: 0.6rem;
    height: 50%;
    overflow: hidden;
    border: 2px solid var(--carte-encre);
    border-radius: 999px;
    background: var(--surface);
}

.jeu-tenue-huile-niveau {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--huile-niveau) * 100%);
    background: var(--huile-couleur);
}

.jeu-tenue-ranger {
    position: absolute;
    top: 0;
    right: -2.75rem;
    min-height: 44px;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.jeu-tenue-allumer {
    min-height: 44px;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.jeu-tenue-note {
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte-doux);
    font-size: 0.85rem;
    text-align: center;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Lanterne rangée par le joueur : la lanterne fermée, à sa place, la
   ressort. */
.jeu-tenue-sortir {
    display: block;
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 2px solid var(--carte-encre);
    border-radius: 50%;
    background: var(--surface);
    color: var(--carte-encre);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    pointer-events: auto;
}

/* Mode test : panneau sous la carte. Lot 1f : contenant redimensionnable
   (jeu_panneau_test.js), trois états posés en classes sur #jeu-principal :
   - fractionné (aucune classe, par défaut) : part --test-part de la hauteur
     de l'écran principal, bornée entre --test-part-min et --test-part-max ;
     poignée, en-tête, puis le contenu qui défile à l'intérieur ;
   - replié (jeu-test-replie) : seul le mini-bandeau reste, la carte prend
     tout le reste de la hauteur ;
   - plein écran (jeu-test-plein) : le panneau couvre l'écran principal ;
     bandeau et carte sont seulement rendus invisibles (ils gardent leur
     taille : GPS, file et minuteurs continuent).
   Avant le lot 1f : hauteur selon le contenu, au plus 35vh. */
.jeu-test {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: calc(clamp(var(--test-part-min), var(--test-part), var(--test-part-max)) * 100%);
    min-height: calc(var(--test-poignee-hauteur) + var(--test-entete-hauteur) + var(--test-securite-bas));
    padding: 0 var(--test-securite-droite) var(--test-securite-bas) var(--test-securite-gauche);
    background: var(--surface);
}

.jeu-test h2 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

/* Poignée de partage : se glisse à la souris ou au doigt (la page ne
   défile pas sous le doigt : touch-action). */
.jeu-test-poignee {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: var(--test-poignee-hauteur);
    border-top: var(--trait-fort) solid var(--bordure);
    border-bottom: 1px dashed var(--bordure);
    background: var(--fond);
    cursor: row-resize;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.jeu-test-poignee-trait {
    width: var(--test-poignee-trait-largeur);
    height: var(--test-poignee-trait-epaisseur);
    border-radius: 999px;
    background: var(--texte);
}

.jeu-test-poignee:hover .jeu-test-poignee-trait,
.jeu-test-glisse .jeu-test-poignee-trait {
    background: var(--test-poignee-active);
}

/* En-tête : titre, puis les trois boutons d'état (44 px). */
.jeu-test-entete {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--test-entete-hauteur);
    padding: 0 0.75rem;
}

.jeu-test-entete h2 {
    flex: 1 1 auto;
    margin: 0;
}

.jeu-test-etats {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
}

.jeu-test-etat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0.55rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    cursor: pointer;
}

.jeu-test-etat svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-test-etat[aria-pressed="true"] {
    background: var(--texte);
    color: var(--surface);
}

.jeu-test-contenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0.75rem 0.5rem;
}

/* Mini-bandeau : seulement dans l'état replié. */
.jeu-test-deplier {
    display: none;
}

.jeu-test-replie .jeu-test {
    height: auto;
    min-height: 0;
}

.jeu-test-replie .jeu-test-poignee,
.jeu-test-replie .jeu-test-entete,
.jeu-test-replie .jeu-test-contenu,
.jeu-test-plein .jeu-test-poignee {
    display: none;
}

.jeu-test-replie .jeu-test-deplier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: var(--test-replie-hauteur);
    padding: 0 0.75rem;
    border: 0;
    border-top: var(--trait-fort) solid var(--bordure);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

/* Plein écran : le panneau se pose sur tout l'écran principal. */
.jeu-principal.jeu-test-plein {
    position: relative;
}

.jeu-test-plein .jeu-test {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--test-plan);
    height: auto;
}

.jeu-test-plein > .jeu-bas,
.jeu-test-plein > .jeu-carte-zone {
    visibility: hidden;
}

/* Pendant le glissement : la carte ne reçoit plus le doigt (elle ne
   défile pas), aucun texte ne se sélectionne. */
.jeu-test-glisse {
    cursor: row-resize;
    -webkit-user-select: none;
    user-select: none;
}

.jeu-test-glisse .jeu-carte {
    pointer-events: none;
}

/* Téléphone en paysage (peu de hauteur, lots 1f, 2t, 2u-a, D-194, D-211) :
   - poignée du panneau de test ramenée à 24 px ;
   - ruban du bas de 34 px identique au portrait sur toute la largeur ;
   - logo nettement réduit sur tous les écrans (titre, équipe, carte, registre) ;
   - zones sûres respectées. */
@media (orientation: landscape) and (max-height: 34rem) {
    :root {
        --logo-largeur: min(22%, 7.5rem);
        --logo-hauteur-max: 3.25rem;
        --logo-texte-taille: clamp(0.85rem, 3vw, 1.1rem);
    }

    .jeu-titre-logo {
        max-width: 9rem;
        max-height: 3.25rem;
        margin-bottom: 0.1rem;
    }

    .jeu-titre-logo .jeu-element,
    .jeu-titre-logo img,
    .jeu-titre-logo svg,
    .jeu-ferme-logo img {
        max-height: 3.25rem;
    }

    .jeu-titre-logo .jeu-logo-provisoire,
    .jeu-titre-logo h1 {
        font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    }

    .jeu-equipe-logo {
        max-width: 8rem;
        max-height: 44px;
    }

    .jeu-equipe-logo .jeu-element,
    .jeu-equipe-logo img,
    .jeu-equipe-logo svg {
        max-height: 44px;
    }

    .jeu-registre-entete-logo,
    .jeu-registre-entete-logo img,
    .jeu-registre-entete-logo svg {
        height: 44px;
        max-height: 44px;
    }

    .jeu-test {
        --test-poignee-hauteur: 1.5rem;
    }

    .jeu-test-contenu {
        padding-top: 0;
    }
}

.jeu-test-mesures {
    margin: 0 0 0.5rem;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.85rem;
}

/* Lot 5f : état technique (signal GPS, carte, remarques du « Démarrer »,
   envois en attente), une ligne par sujet. Lot 5f-c2 : classe renommée
   (.jeu-test-etat avant) — elle portait le même nom que les trois boutons
   d'état du panneau (lot 1f), dont elle écrasait le retrait intérieur :
   leurs icônes n'avaient plus de place. */
.jeu-test-etat-technique {
    padding-left: 1.2rem;
}

/* --- Éléments de l'inventaire (fichier de l'artiste ou dessin provisoire). */
.jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-element[hidden] {
    display: none;
}

.jeu-element img,
.jeu-element svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Lot 2u-b-c6 (D-220) : affichage commun en masque CSS pour les icônes de
   type pictogramme téléversées — la forme vient du fichier (--icone-masque-url)
   et la couleur vient de background-color: currentColor. */
.jeu-element .jeu-icone-masque,
.jeu-icone-masque {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: var(--icone-masque-url);
    mask-image: var(--icone-masque-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.jeu-silhouette-oeil {
    fill: var(--nuit-fond);
}

/* Silhouette en aplat d'encre CALCULÉE à partir de l'image d'une créature
   (registre, créature pas encore capturée, lot 3l-a : brightness(0) sans flou). */
.jeu-element-silhouette img,
.jeu-element-silhouette svg {
    filter: brightness(0);
}

/* --- Lanterne : flamme (tournée vers la trace suivie) sous le corps. */
.lanterne {
    --flamme-couleur: var(--flamme-repos);
    --flamme-angle: 0deg;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.lanterne-loin { --flamme-couleur: var(--flamme-loin); }
.lanterne-approche { --flamme-couleur: var(--flamme-approche); }
.lanterne-pres { --flamme-couleur: var(--flamme-pres); }

.lanterne-flamme,
.lanterne-corps,
.lanterne-visage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.lanterne-flamme {
    color: var(--flamme-couleur);
    transform: rotate(var(--flamme-angle));
    transform-origin: 50% 50%;
    transition: transform 0.6s ease, color 0.6s ease;
}

/* Halo coloré derrière la flamme : il teinte aussi une flamme fournie
   par l'artiste (fichier lanterne-flamme.png). */
.lanterne-flamme::before {
    content: "";
    position: absolute;
    top: 18%;
    right: 18%;
    bottom: 18%;
    left: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--flamme-couleur) 0%, transparent 70%);
    opacity: 0.6;
}

.lanterne-flamme .jeu-element {
    position: relative;
}

.lanterne-corps,
.lanterne-visage {
    color: var(--carte-encre);
}

/* Lanterne tenue (lot 2e) : la flamme suit la boussole à chaque image,
   sans transition de rotation (seule la couleur glisse). */
.lanterne-tenue .lanterne-flamme {
    transition: color 0.6s ease;
}

.jeu-lanterne-boite {
    background: transparent;
    border: 0;
}

/* Lot 2e-c1 : cernée de clair (--lanterne-contour), pour ne pas se perdre
   dans les rues noires du fond. */
.jeu-lanterne-boite .lanterne {
    filter: drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* --- Repères sur la carte (tampon, sablier au centre d'une zone ratée) :
   boîte de 44 px (TAILLE_TRACE de jeu_carte.js). */
.jeu-trace-boite {
    background: transparent;
    border: 0;
}

.jeu-trace {
    display: block;
    width: 44px;
    height: 44px;
    padding: 3px;
    color: var(--carte-encre);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.jeu-trace-reussi { color: var(--tampon); }
.jeu-trace-rate { color: var(--sablier); }

/* Lot 2p : pastille « trouvé » sur la carte (maquette S05) — disque noir
   #111 plein de 46 px de diamètre (dans un cadre SVG 56 × 56 px, viewBox
   48 × 48), coche couleur papier #FBFAF7, et « TROUVÉ » écrit en arc centré
   en haut à cheval sur le bord, rendu net sans filtre. */
.jeu-trace.jeu-pastille-trouve,
.jeu-pastille-trouve {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    color: var(--pastille-trouve-encre);
    filter: none;
    pointer-events: none;
}

.jeu-pastille-trouve svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jeu-pastille-trouve-chemin {
    fill: none;
    stroke: none;
}

.jeu-pastille-trouve-disque {
    fill: var(--pastille-trouve-encre);
    stroke: none;
}

.jeu-pastille-trouve-coche {
    fill: none;
    stroke: var(--pastille-trouve-papier);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jeu-pastille-trouve-libelle {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    font-size: 7.6px;
    letter-spacing: 0.9px;
    fill: var(--pastille-trouve-encre);
    stroke: var(--pastille-trouve-halo);
    stroke-width: 2.2px;
    stroke-linejoin: round;
    paint-order: stroke;
    pointer-events: none;
}

/* Zone choisie par le joueur (« Y aller ») : repère cerclé. */
.jeu-trace-choisie {
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--carte-encre);
}

/* --- Ballons orange sur la carte des joueurs (lots 3c, 3c-c2) : seule icône
   ajoutée à la carte (fichier partagé), taille réglable (--ballon-taille,
   44 px par défaut) dans une boîte touchable d'au moins 44 px, opacité 100 %
   si non pris et --ballon-opacite-pris (80 % par défaut) si déjà pris, avec
   contour sombre net pour ressortir sur le fond de carte noir et blanc. */
.jeu-ballon-boite {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
}

.jeu-ballon {
    --ballon-taille: 44px;
    --ballon-opacite-pris: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ballon-taille);
    height: var(--ballon-taille);
    padding: 0;
    opacity: 1;
    color: var(--carte-encre);
    filter: drop-shadow(0 0 1.5px var(--carte-encre)) drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    cursor: pointer;
}

.jeu-ballon > .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-ballon.jeu-ballon-obtenu {
    opacity: var(--ballon-opacite-pris, 0.8);
}

/* Zone de recherche (lot 3c ; lot 2e : dessin SVG de jeu_carte.js, dans
   une boîte Leaflet). Cercle simple de la couleur de la famille
   (--zone-couleur, posée par jeu_carte.js), nom écrit en arrondi sur le
   bord, souligné d'un halo de papier. Seul le cercle capte le doigt : les
   coins de la boîte laissent glisser la carte. */
.jeu-carte .leaflet-jeuZones-pane {
    z-index: 350; /* sur le fond (200), sous les points exacts (400) */
}

.jeu-carte .leaflet-jeuFaisceau-pane {
    z-index: 450; /* sur les zones, sous les repères et la lanterne (600) */
    pointer-events: none;
}

.jeu-zone-boite {
    background: transparent;
    border: 0;
}

.jeu-carte .jeu-zone-boite.leaflet-interactive {
    pointer-events: none;
}

.jeu-zone {
    --zone-couleur: var(--carte-encre);
    --zone-opacite: 0.85;
    --zone-opacite-attenuee: calc(var(--zone-opacite) / 3);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    isolation: isolate;
    mix-blend-mode: normal;
}

.jeu-zone svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Lot 2m : aplat franc de la couleur de la famille, sans contour ni
   pointillés, d'opacité réglable (--zone-opacite, 85 % par défaut). */
.jeu-zone-disque {
    fill: var(--zone-couleur);
    fill-opacity: var(--zone-opacite);
    stroke: none;
    pointer-events: auto;
    cursor: pointer;
}

.jeu-zone-chemin {
    fill: none;
    stroke: none;
}

/* Lot 2e-c1 : nom écrit dans la couleur de la zone (famille ; encre pour
   une trace trouble), contour clair pour rester lisible sur le noir et
   blanc. */
.jeu-zone-nom {
    fill: var(--zone-couleur);
    stroke: var(--zone-nom-contour);
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.06em;
    pointer-events: none;
}

.jeu-zone-trouble .jeu-zone-nom {
    letter-spacing: 0.2em;
}

/* Lot 2m : zone ciblée par la lanterne ou choisie par le joueur — plus de
   contour ni de pointillés, remplacés par un léger halo clair et coloré
   de la couleur de la famille autour de l'aplat. */
.jeu-zone-ciblee .jeu-zone-disque,
.jeu-zone-choisie .jeu-zone-disque {
    filter: drop-shadow(0 0 2px var(--zone-nom-contour)) drop-shadow(0 0 6px var(--zone-couleur));
}

/* Lieu en pause après « Plus tard » (lot 5g) ou raté (sablier, lot 2m) :
   même aplat sans contour, nettement atténué au tiers de l'opacité normale,
   avec le petit « zzz » près du nom (en pause) ou le sablier (ratée). */
.jeu-trace-pause {
    opacity: 0.42;
}

.jeu-zone-pause .jeu-zone-disque,
.jeu-zone-ratee .jeu-zone-disque,
.jeu-zone-reussie .jeu-zone-disque {
    fill-opacity: var(--zone-opacite-attenuee);
}

.jeu-zone-reussie .jeu-zone-disque {
    pointer-events: none;
    cursor: default;
}

.jeu-zone-zzz {
    font-size: 0.8em;
    font-style: italic;
    letter-spacing: 0.04em;
}

/* Zone ciblée croisée par le faisceau (lot 2e, lot 2m) : elle s'illumine
   sans contour. */
.jeu-zone-eclairee {
    filter: drop-shadow(0 0 8px var(--zone-eclairee-lueur));
}

.jeu-zone-eclairee .jeu-zone-disque {
    fill-opacity: min(1, calc(var(--zone-opacite) + 0.12));
}

/* Lot 3i : représentation énigmatique du Méga-Costaud sur la carte — tache
   d'encre noire irrégulière qui ondule lentement (ou image téléversée),
   sans nom ni couleur de famille. */
.jeu-zone-mega-costaud {
    color: var(--carte-encre);
    pointer-events: none;
}

.jeu-zone-mega-costaud .jeu-zone-mega-visuel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: var(--mega-tache-cote, 100%);
    height: var(--mega-tache-cote, 100%);
    margin: auto;
    pointer-events: auto;
    cursor: pointer;
    transform-origin: 50% 50%;
    animation: jeu-mega-tache-ondule 6.5s ease-in-out infinite;
}

.jeu-zone-mega-costaud .jeu-tache-encre-halo {
    transform-origin: 50% 50%;
    animation: jeu-mega-tache-halo 5.2s ease-in-out infinite alternate;
}

.jeu-zone-mega-costaud.jeu-zone-choisie .jeu-zone-mega-visuel {
    filter: drop-shadow(0 0 0 var(--surface)) drop-shadow(0 0 4px var(--carte-encre));
}

.jeu-zone-mega-costaud.jeu-zone-reussie .jeu-zone-mega-visuel {
    pointer-events: none;
    cursor: default;
}

/* Lot 3i-c3 : étiquette permanente sous la tache d'encre de la pieuvre,
   lisible en plein soleil (fond opaque, contraste fort) et cohérente avec
   les étiquettes de la carte (.jeu-salle-nom). */
.jeu-zone-mega-etiquette {
    position: absolute;
    top: calc(50% + (var(--mega-tache-cote, 100%) / 2) + 2px);
    left: 50%;
    z-index: 3;
    display: inline-block;
    padding: 0.14rem 0.45rem;
    border: var(--trait) solid var(--carte-encre);
    border-radius: 4px;
    background: var(--surface);
    color: var(--carte-encre);
    box-shadow: 2px 2px 0 var(--carte-encre);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
}

.jeu-zone-mega-etiquette-combat {
    border-color: var(--carte-encre);
    background: var(--danger);
    color: var(--surface);
}

@keyframes jeu-mega-tache-ondule {
    0%, 100% {
        transform: scale(1, 1) rotate(0deg);
    }
    33% {
        transform: scale(1.06, 0.94) rotate(3deg);
    }
    66% {
        transform: scale(0.95, 1.05) rotate(-3deg);
    }
}

@keyframes jeu-mega-tache-halo {
    from {
        transform: scale(0.96) rotate(-4deg);
        opacity: 0.75;
    }
    to {
        transform: scale(1.08) rotate(4deg);
        opacity: 1;
    }
}

/* Balise de détresse sur la zone d'un Costaud en appel à l'aide (lot 3n) :
   ondes concentriques pulsantes et cœur d'alerte au centre de la zone,
   visibles seulement pour les équipes situées dans la zone d'alerte. */
.jeu-balise-detresse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.jeu-balise-onde {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid var(--danger);
    border-radius: 50%;
    background: rgba(232, 67, 46, 0.16);
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
    animation: jeu-balise-onde 2s ease-out infinite;
}

.jeu-balise-onde-2 {
    animation-delay: 1s;
}

.jeu-balise-coeur {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2.5px solid var(--surface);
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--carte-encre);
    transform: translate(-50%, -50%);
    animation: jeu-balise-coeur 1s ease-in-out infinite alternate;
}

@keyframes jeu-balise-onde {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0.92;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.65);
        opacity: 0;
    }
}

@keyframes jeu-balise-coeur {
    from { transform: translate(-50%, -50%) scale(0.9); }
    to { transform: translate(-50%, -50%) scale(1.18); }
}

/* Lot 3i-c3 : onde de rassemblement de la pieuvre — cercles plus épais et plus
   contrastés qui s'étendent depuis la tache d'encre jusqu'à couvrir toute la
   partie visible de la carte (--mega-onde-diametre calculé par jeu_carte.js),
   au même rythme de pulsation (2 s, deux cercles décalés d'1 s). */
.jeu-balise-detresse.jeu-balise-detresse-mega {
    z-index: 2;
    width: var(--mega-onde-diametre, 100vmax);
    height: var(--mega-onde-diametre, 100vmax);
}

.jeu-balise-detresse-mega .jeu-balise-onde {
    width: var(--mega-onde-depart-px, 28px);
    height: var(--mega-onde-depart-px, 28px);
    border: 5px solid var(--danger);
    background: rgba(232, 67, 46, 0.14);
    box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 2px var(--surface);
    transform: translate(-50%, -50%);
    animation: jeu-balise-onde-mega 2s ease-out infinite;
}

.jeu-balise-detresse-mega .jeu-balise-onde-2 {
    animation-delay: 1s;
}

.jeu-balise-detresse-mega .jeu-balise-coeur {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

@keyframes jeu-balise-onde-mega {
    0% {
        width: var(--mega-onde-depart-px, 28px);
        height: var(--mega-onde-depart-px, 28px);
        opacity: 0.96;
    }
    70% {
        opacity: 0.65;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

/* Mode test uniquement (lot 3n, case « Voir les zones d'alerte ») :
   cercle en pointillés du rayon de chaque alerte d'aide active. */
.jeu-zone-alerte-test {
    stroke: var(--danger);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    fill: var(--danger);
    fill-opacity: 0.08;
    pointer-events: none;
}

/* Mode test uniquement (lot 5l) : cercle en pointillés orange de la zone de
   déclenchement automatique de la caméra autour de chaque ballon signalé. */
.jeu-zone-ballon-test {
    stroke: var(--bonbon);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    fill: var(--bonbon);
    fill-opacity: 0.14;
    pointer-events: none;
}

.jeu-zone-ballon-test.jeu-zone-ballon-test--obtenu {
    stroke-opacity: 0.35;
    fill-opacity: 0.04;
}

/* Pendant l'animation du zoom, zones et faisceau (taille en pixels,
   recalculée à la fin du zoom) sont cachés un instant. */
.jeu-carte .leaflet-zoom-anim .jeu-zone,
.jeu-carte .leaflet-zoom-anim .jeu-faisceau {
    visibility: hidden;
}

/* Faisceau de la grande lanterne (lot 2e) : cône posé sur la lanterne
   (taille, découpe et rotation posées par jeu_carte.js). Lot 2e-c1 :
   couleur de la flamme — la boîte .jeu-faisceau reçoit la classe
   lanterne-{palier} (jeu_lanterne.js), qui pose --flamme-couleur ; sans
   palier, couleur de repos. */
.jeu-faisceau-boite {
    background: transparent;
    border: 0;
}

.jeu-faisceau {
    position: absolute;
    top: 0;
    left: 0;
}

.jeu-faisceau-cone {
    position: absolute;
    display: block;
    color: var(--flamme-couleur, var(--flamme-repos));
    opacity: var(--faisceau-opacite);
    mix-blend-mode: multiply;
    transform-origin: 50% 50%;
    will-change: transform;
}

.jeu-faisceau-cone .jeu-element img,
.jeu-faisceau-cone .jeu-element svg {
    object-fit: fill;
}

.jeu-faisceau-eteint {
    display: none;
}

/* Pastille de couleur d'une zone (lot 2e) : fiche d'une zone, bandeau de
   la cible (à la place de l'emblème). Trace trouble : encre en pointillés. */
.jeu-pastille-zone {
    --zone-couleur: var(--carte-encre);
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--zone-couleur);
    box-shadow: inset 0 0 0 3px var(--surface);
    border: 2px solid var(--zone-couleur);
}

.jeu-pastille-zone.jeu-pastille-trouble {
    background: transparent;
    box-shadow: none;
    border: 3px dashed var(--carte-encre);
}

/* Mode test (lot 3c) : vrai emplacement d'un lieu ouvert. */
.jeu-point-exact {
    stroke: var(--surface);
    stroke-width: 2;
    fill: var(--danger);
    fill-opacity: 1;
}

/* --- Mode approche (lot 2c ; lot 5j : assombrissement retiré, la carte
   reste normale dans le rayon d'un monstre). */
.jeu-en-approche .jeu-carte .leaflet-tile-pane {
    filter: var(--carte-filtre-actif);
}

.jeu-en-approche .jeu-carte.leaflet-container {
    background: var(--carte-papier);
}

.jeu-en-approche .jeu-trace:not(.jeu-trace-ciblee),
.jeu-en-approche .jeu-zone:not(.jeu-zone-ciblee) {
    opacity: 1;
}

.jeu-rencontre .bouton {
    max-width: 22rem;
}

/* --- Rencontre en six temps : plein écran, par-dessus tout. Lot 3j : le
   fond est la SCÈNE (#jeu-rencontre-fond : caméra arrière, décor illustré
   ou fond de secours ; créature posée au sol ou fixée à l'écran ; lot
   3j-c1), les temps sont posés dessus.
   La classe jeu-etape-… (posée par jeu_rencontre.js) donne l'ambiance. */
.jeu-rencontre {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: transparent;
    color: var(--nuit-texte);
    text-align: center;
}

.jeu-rencontre:focus {
    outline: none;
}

/* Un temps couvre l'écran mais ne capte le doigt que sur ses éléments :
   la créature, posée dans la scène dessous, reste touchable. */
.jeu-temps {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace);
    padding: calc(var(--securite-haut) + var(--espace)) calc(var(--securite-droite) + var(--espace)) calc(var(--securite-bas) + var(--espace)) calc(var(--securite-gauche) + var(--espace));
    pointer-events: none;
}

.jeu-temps > * {
    width: 100%;
    max-width: 26rem;
    pointer-events: auto;
}

.jeu-temps-signal,
.jeu-temps-denouement {
    justify-content: center;
}

/* Lot 5f-c2 / 5i-c1 / 2v (D-213) : temps « scène » — consigne en bandes en haut
   sous la zone sûre, épreuve au-dessus de la bande du bas où figurent les petits
   liens soulignés (« Affronter plus tard » en bas à gauche, « Appeler à l'aide »
   en bas à droite). */
.jeu-temps-scene {
    justify-content: space-between;
    padding-top: calc(var(--securite-haut) + var(--s08-message-ecart-bas));
    padding-bottom: calc(var(--securite-bas) + var(--plus-tard-hauteur) + var(--espace));
}

/* Petits liens soulignés des scènes de rencontre (lot 2v, D-213) : variables
   --s08-lien-… (Courier Prime 700, capitales, souligné) à la taille
   --s08-scene-lien-taille (12 px) et zone de toucher >= 44 px. */
.jeu-scene-lien,
.jeu-temps > .jeu-rencontre-plus-tard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0.25rem 0.35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--s08-papier);
    box-shadow: none;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-lien-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    text-decoration-line: underline;
    text-decoration-thickness: var(--s08-lien-soulignement-epaisseur);
    text-underline-offset: var(--s08-lien-soulignement-decalage);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.jeu-scene-lien[hidden],
.jeu-temps > .jeu-rencontre-plus-tard[hidden] {
    display: none !important;
}

.jeu-scene-lien:disabled,
.jeu-temps > .jeu-rencontre-plus-tard:disabled {
    opacity: 0.48;
    cursor: default;
}

.jeu-rencontre-illustree .jeu-scene-lien,
.jeu-rencontre-illustree .jeu-temps > .jeu-rencontre-plus-tard {
    color: var(--s08-encre);
    text-shadow: none;
}

/* « Affronter plus tard » (lots 5f-c2, 2v, D-213) : petit lien souligné en bas
   à gauche de la scène, de l'apparition au dénouement. Zone de toucher >= 44 px. */
.jeu-temps > .jeu-rencontre-plus-tard {
    position: absolute;
    bottom: calc(var(--securite-bas) + 0.4rem);
    left: calc(var(--securite-gauche) + var(--espace));
    z-index: 3;
    justify-content: flex-start;
    text-align: left;
}

/* Dénouement : l'image de la scène reste visible, assombrie. */
.jeu-temps-denouement {
    overflow-y: auto;
    background: var(--scene-panneau);
}

/* Consigne en haut de la scène (lots 3j-c1, 2v, D-213) : rendue en bandes de
   papier kraft sur feuille blanche exactement comme les messages de la carte
   (mêmes variables S08, même coupe mesurée dans le DOM, même repli en texte
   simple), placée en haut de la scène sous la zone sûre. */
.jeu-scene-haut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}

.jeu-temps > .jeu-scene-haut {
    pointer-events: none;
}

/* Lot 4ag-c1 (D-213) : conteneur commun de la bande noire du nom du monstre
   (#jeu-rencontre-nom) et des bandes kraft de la consigne (#jeu-rencontre-consigne),
   portant la feuille blanche (::after) et son filet (::before) avec le débord
   --s08-feuille-debord sur les 4 côtés, sans décalage. */
.jeu-rencontre-entete {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
    pointer-events: none;
}

.jeu-rencontre-entete[hidden],
.jeu-rencontre-entete:empty {
    display: none !important;
}

.jeu-rencontre-entete::before {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    right: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    bottom: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    left: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    border: var(--s08-feuille-filet-epaisseur) solid var(--s08-feuille-filet-couleur);
    border-top: 0;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -2;
}

.jeu-rencontre-entete::after {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc(var(--s08-feuille-debord) * -1);
    right: calc(var(--s08-feuille-debord) * -1);
    bottom: calc(var(--s08-feuille-debord) * -1);
    left: calc(var(--s08-feuille-debord) * -1);
    background: var(--s08-feuille-fond);
    border-radius: 0;
    pointer-events: none;
    z-index: -1;
}

.jeu-signal-texte {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 800;
    animation: jeu-pulsation 1s ease-in-out infinite alternate;
}

@keyframes jeu-pulsation {
    from { opacity: 0.55; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.jeu-rencontre-nom {
    position: relative;
    z-index: 3;
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    margin: 0 0 var(--s08-bande-ecart);
    padding: var(--s08-etiquette-marge-interieure);
    background: var(--s08-etiquette-fond);
    color: var(--s08-papier);
    font-family: var(--s08-etiquette-police);
    font-size: var(--s08-scene-titre-bande-taille);
    font-weight: var(--s08-etiquette-graisse);
    text-transform: var(--s08-etiquette-casse);
    letter-spacing: var(--s08-etiquette-espacement);
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-text-stroke: 0;
    -webkit-clip-path: var(--bande-decoupe, none);
    clip-path: var(--bande-decoupe, none);
    transform: translateX(var(--bande-decalage, 0px)) rotate(var(--bande-inclinaison, 0deg));
    pointer-events: none;
}

.jeu-rencontre-nom:last-child,
.jeu-rencontre-nom:has(+ .jeu-rencontre-consigne[hidden]) {
    margin-bottom: 0;
}

.jeu-rencontre-nom[hidden],
.jeu-rencontre-nom:empty {
    display: none !important;
}

/* Créature : bouton posé dans la scène (boîte d'objet de la scène). Hors
   scène (secours si elle n'a pas pu être posée), au milieu de l'écran. */
.jeu-rencontre-creature {
    display: block;
    width: min(60vw, 16rem);
    height: min(60vw, 16rem);
    padding: 0;
    border: 0;
    border-radius: var(--rayon);
    background: transparent;
    color: var(--nuit-creature);
    cursor: pointer;
    transform-origin: 50% 100%;
}

.jeu-scene .jeu-scene-objet .jeu-rencontre-creature {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.jeu-rencontre-creature:disabled {
    cursor: default;
}

/* Apparition : le corps de l'objet (sous l'ombre) surgit au sol. */
.jeu-etape-apparition .jeu-scene-creature .jeu-scene-corps {
    animation: jeu-apparition var(--apparition-duree, var(--apparition-duree-defaut)) ease-out both;
}

@keyframes jeu-apparition {
    from { opacity: 0; transform: scale(0.4); filter: blur(6px); }
    to { opacity: 1; transform: scale(1); filter: none; }
}

.jeu-etape-epreuve .jeu-rencontre-creature:not(:disabled) {
    animation: jeu-pulsation 1.2s ease-in-out infinite alternate;
}

/* Cocon ancré au sol (lot 3f-c1) : immobile (aucune pulsation) et zone de
   toucher un peu plus large que le dessin pour les petits doigts. */
.jeu-rencontre .jeu-rencontre-creature.jeu-cocon-creature,
.jeu-etape-epreuve .jeu-rencontre-creature.jeu-cocon-creature:not(:disabled) {
    position: relative;
    animation: none;
}

.jeu-rencontre .jeu-rencontre-creature.jeu-cocon-creature::before {
    content: "";
    position: absolute;
    top: -18%;
    right: -18%;
    bottom: -18%;
    left: -18%;
}

.jeu-rencontre-consigne {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--s08-bande-police);
    font-size: var(--s08-bande-taille);
    font-weight: var(--s08-bande-graisse);
    line-height: var(--s08-bande-interligne);
    color: var(--s08-bande-encre);
    text-align: left;
    box-sizing: border-box;
    pointer-events: none;
}

.jeu-rencontre-consigne[hidden],
.jeu-rencontre-consigne:empty {
    display: none !important;
}

.jeu-rencontre-consigne::before {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    right: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    bottom: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    left: calc((var(--s08-feuille-debord) + var(--s08-feuille-filet-epaisseur)) * -1);
    border: var(--s08-feuille-filet-epaisseur) solid var(--s08-feuille-filet-couleur);
    border-top: 0;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -2;
}

.jeu-rencontre-consigne::after {
    display: var(--s08-feuille-affichage);
    content: "";
    position: absolute;
    top: calc(var(--s08-feuille-debord) * -1);
    right: calc(var(--s08-feuille-debord) * -1);
    bottom: calc(var(--s08-feuille-debord) * -1);
    left: calc(var(--s08-feuille-debord) * -1);
    background: var(--s08-feuille-fond);
    border-radius: 0;
    pointer-events: none;
    z-index: -1;
}

.jeu-rencontre-entete > .jeu-rencontre-consigne::before,
.jeu-rencontre-entete > .jeu-rencontre-consigne::after {
    display: none !important;
}

/* Fine barre horizontale du minuteur de fuite (lot 3d-c3, Rôdeur 7 ans et
   plus), sous la consigne de la scène : encre claire lisible sur la caméra,
   sans chiffre ni ombre ; clignote pendant les 5 dernières secondes. */
.jeu-scene-temps {
    width: 100%;
    height: var(--scene-temps-hauteur);
    margin-top: calc(var(--s08-feuille-debord, 18px) + 6px);
    overflow: hidden;
    border-radius: 999px;
    background: var(--scene-temps-piste);
    box-shadow: none;
}

.jeu-scene-temps-barre {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--scene-temps-couleur);
    box-shadow: none;
}

.jeu-scene-temps-urgent .jeu-scene-temps-barre {
    animation: jeu-scene-temps-clignotement 0.3s ease-in-out infinite alternate;
}

@keyframes jeu-scene-temps-clignotement {
    from { opacity: 1; }
    to { opacity: 0.15; }
}

/* Fuite du Rôdeur (lot 3d-c3) : la créature s'efface en fondu. */
.jeu-rencontre .jeu-rencontre-creature.jeu-rodeur-fuite {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--rodeur-fuite-fondu-duree) ease-out, transform var(--rodeur-fuite-fondu-duree) ease-out;
}

.jeu-epreuve-zone:empty {
    display: none;
}

/* --- Scène des rencontres (lot 3j, couches construites par jeu_scene.js ;
   socle corrigé au lot 3j-c1). De bas en haut : fond de secours (couleur
   de la scène), vidéo, décor illustré, monde (objets ancrés), écran
   (objets fixés), viseur (option), flèche de bord, lanterne, cadre de
   lanterne (facultatif). Entrée : simple fondu, aucun effet noir, aucun
   bord sombre. Seuls la créature et la lanterne captent le doigt. */
.jeu-scene {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Fondu d'entrée sur la carte ; fond de secours uni (sans caméra ni décor). */
.jeu-scene-preparee {
    background: var(--scene-fond);
    animation: jeu-scene-fondu var(--scene-fondu-duree) ease-out both;
}

@keyframes jeu-scene-fondu {
    from { opacity: 0; }
}

.jeu-scene-video,
.jeu-scene-decor,
.jeu-scene-monde,
.jeu-scene-ecran,
.jeu-scene-cadre {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Vidéo : apparaît en fondu quand la caméra tourne (jusque-là, le fond de
   secours est dessous). */
.jeu-scene-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--scene-fondu-duree) ease;
}

.jeu-scene-camera .jeu-scene-video {
    opacity: 1;
}

/* Mode selfie (lot 3g, Photosensible) : l'aperçu vidéo est en miroir,
   tandis que la photo finale dessinée sur le canvas ne l'est pas. */
.jeu-scene-miroir .jeu-scene-video {
    transform: scaleX(-1);
}

/* Décor illustré (Savant, lots 3j-c1, 2v, D-213) : fond en petits carreaux
   comme le codex (mêmes variables que le registre : --registre-papier,
   --registre-quadrillage-image, --registre-quadrillage-pas, --registre-encre). */
.jeu-scene-decor,
.jeu-rencontre-illustree .jeu-scene-preparee {
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--registre-encre);
}

.jeu-scene-decor {
    opacity: 0;
    transition: opacity var(--scene-fondu-duree) ease;
}

.jeu-scene-illustree .jeu-scene-decor {
    opacity: 1;
}

.jeu-scene-decor .jeu-element-provisoire {
    display: none;
}

.jeu-scene-decor .jeu-element img {
    object-fit: cover;
}

/* Cadre de lanterne sur le pourtour (fichier livré seulement), par-dessus
   toute la scène, étiré aux proportions de l'écran ; jamais touchable. */
.jeu-scene-cadre .jeu-element img {
    object-fit: fill;
}

.jeu-scene-cadre[hidden] {
    display: none;
}

.jeu-scene-ombre .jeu-element img {
    object-fit: fill;
}

/* Viseur-jauge unifié (lot 3d-c1, Rôdeur) : un seul élément au centre de
   l'écran, visible dès le premier instant de l'épreuve :
   - rail complet au trait fin (--scene-viseur-rail, --scene-viseur-rail-epaisseur) ;
   - par-dessus, arc épais or kraft (--scene-viseur-arc, --scene-viseur-arc-epaisseur)
     qui part du haut et avance dans le sens des aiguilles d'une montre
     (longueur posée en style par jeu_scene.js). */
.jeu-scene-viseur {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--scene-viseur-taille);
    height: var(--scene-viseur-taille);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.jeu-scene-viseur > .jeu-element {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.jeu-scene-viseur svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.jeu-scene-viseur-rail,
.jeu-scene-viseur-arc {
    fill: none;
}

.jeu-scene-viseur-rail {
    stroke: var(--scene-viseur-rail);
    stroke-width: var(--scene-viseur-rail-epaisseur);
}

.jeu-scene-viseur-arc {
    stroke: var(--rodeur-jauge-couleur, var(--scene-viseur-arc));
    stroke-width: var(--scene-viseur-arc-epaisseur);
    stroke-linecap: butt;
    opacity: var(--scene-viseur-arc-opacite-repos);
}

.jeu-scene-viseur-actif .jeu-scene-viseur-arc {
    opacity: 1;
}

/* Monde : tourne avec le roulis du téléphone (posé par jeu_scene.js). */
.jeu-scene-monde {
    transform-origin: 50% 50%;
}

/* Objet posé : boîte de 400 px (BASE_PX de jeu_scene.js), déplacée et mise
   à l'échelle autour de son point d'appui (--appui-x, --appui-y). */
.jeu-scene-objet {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    transform-origin: calc(var(--appui-x, 0.5) * 100%) calc(var(--appui-y, 1) * 100%);
    will-change: transform;
}

.jeu-scene-objet-cache {
    visibility: hidden;
}

.jeu-scene-corps,
.jeu-scene-souffle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: calc(var(--appui-x, 0.5) * 100%) calc(var(--appui-y, 1) * 100%);
}

/* Légère respiration. */
.jeu-scene-respiration {
    animation: jeu-scene-respiration 3.2s ease-in-out infinite;
}

@keyframes jeu-scene-respiration {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.015, 1.035); }
}

/* Ombre au sol, centrée sous le point d'appui, écrasée. */
.jeu-scene-ombre {
    position: absolute;
    top: calc(var(--appui-y, 1) * 100% - 6%);
    left: calc(var(--appui-x, 0.5) * 100% - 30%);
    width: 60%;
    height: 12%;
    color: #000000;
}

/* Flèche de bord : du côté où se tourner (retournée pour la gauche), réduite à
   60 % (--s08-fleche-bord-taille: 34px), magenta #E6336F (currentColor sur le
   SVG par défaut) et légèrement transparente (--s08-fleche-bord-opacite: 0.75,
   lot 2v-c1). */
.jeu-scene-fleche {
    position: absolute;
    top: 50%;
    width: var(--s08-fleche-bord-taille);
    height: var(--s08-fleche-bord-taille);
    margin-top: calc(var(--s08-fleche-bord-taille) / -2);
    color: var(--s08-fleche-bord-couleur);
    opacity: var(--s08-fleche-bord-opacite);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.55));
    animation: jeu-fleche-pulsation 0.8s ease-in-out infinite alternate;
}

@keyframes jeu-fleche-pulsation {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

.jeu-scene-fleche-droite {
    right: 0.5rem;
}

.jeu-scene-fleche-gauche {
    left: 0.5rem;
}

.jeu-scene-fleche-gauche .jeu-element {
    transform: scaleX(-1);
}

/* Lanterne au premier plan (lot 3j ; lot 2v : retirée de toutes les scènes de
   rencontre et rendue inerte aux gestes, D-213). */
.jeu-scene-lanterne {
    position: absolute;
    bottom: calc(var(--securite-bas) - 1.5rem);
    left: 50%;
    display: none !important;
    width: min(32vw, 9rem);
    height: min(32vw, 9rem);
    transform: translateX(-50%);
    filter: drop-shadow(0 0 12px rgba(255, 220, 150, 0.45));
    opacity: 0 !important;
    pointer-events: none !important;
    touch-action: none;
    transition: opacity var(--scene-fondu-duree) ease;
}

.jeu-scene-lanterne .lanterne-flamme {
    transform: none;
}

/* Lanterne rangée (lot 3j-c1, ex. pendant les questions du Savant). */
.jeu-scene-lanterne.jeu-scene-lanterne-rangee {
    opacity: 0;
    pointer-events: none;
}

/* Boussole à réactiver sur iPhone (lot 5k-c1, D-219) : au centre, par-dessus la
   scène (la créature comprise). Seul le bouton capte le doigt. */
.jeu-scene-boussole {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% - 2 * var(--espace));
    max-width: var(--s08-scene-boussole-largeur);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.jeu-scene-boussole-bouton {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1rem;
    border: var(--s08-separateur);
    border-radius: 0;
    background: var(--s08-encre);
    color: var(--s08-papier);
    box-shadow: none;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-boussole-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    box-sizing: border-box;
}

.jeu-scene-boussole-refus {
    margin: 0;
    padding: 0.75rem 1rem;
    border: var(--s08-separateur);
    background: var(--s08-papier);
    color: var(--s08-encre);
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-boussole-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.3;
}

/* Zone de l'épreuve posée en bas de l'image : seuls ses éléments captent
   le doigt (la lanterne, dessous, reste touchable). */
.jeu-temps-scene .jeu-epreuve-zone {
    pointer-events: none;
}

.jeu-temps-scene .jeu-epreuve-zone > * {
    pointer-events: auto;
}

.jeu-denouement-marque {
    flex-shrink: 0;
    width: min(55vw, 12rem);
    height: min(55vw, 12rem);
}

.jeu-denouement-marque[hidden] {
    display: none !important;
}

.jeu-etape-reussite .jeu-denouement-marque {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s08-capture-pastille-taille);
    height: var(--s08-capture-pastille-taille);
    color: var(--s08-encre);
    animation: jeu-tampon 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.jeu-denouement-marque .jeu-pastille-trouve,
.jeu-denouement-pastille-trouve {
    width: 100%;
    height: 100%;
}

@keyframes jeu-tampon {
    from { opacity: 0; transform: scale(2.2) rotate(8deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.jeu-etape-ratage .jeu-denouement-marque {
    color: var(--sablier);
    animation: jeu-sablier 1.2s ease-in-out both;
}

@keyframes jeu-sablier {
    from { opacity: 0; transform: rotate(180deg); }
    to { opacity: 1; transform: rotate(0deg); }
}

.jeu-denouement-texte {
    margin: 0;
    color: var(--s08-papier);
    font-family: var(--s08-police-chiffre);
    font-size: var(--s08-capture-titre-taille);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
}

/* Conseil de la lanterne après un ratage (ou mention des équipes partenaires au dénouement réussi du Costaud, lots 3h, 2w). */
.jeu-denouement-conseil {
    max-width: var(--s08-capture-points-largeur-max);
    margin: 0;
    padding: var(--s08-capture-points-marge-v) var(--s08-capture-points-marge-h);
    border: var(--s08-separateur);
    border-radius: 0;
    background: var(--s08-papier);
    color: var(--s08-encre);
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-bande-taille);
    font-style: italic;
    line-height: var(--s08-bulle-temps-texte-interligne);
    text-align: left;
    box-sizing: border-box;
}

.jeu-etape-reussite .jeu-denouement-conseil {
    font-style: normal;
    font-weight: var(--s08-ruban-libelle-graisse);
    text-align: center;
}

/* Points d'une rencontre réussie, ligne par ligne (lots 3a, 2w, D-214) :
   style des éléments de score S08 (fond papier, filet extérieur et séparateurs
   pleins de 1 px encre, libellés en Courier Prime 700 capitales, chiffres en
   Londrina Solid 900, ligne Total mise en avant en aplat encre et texte papier). */
.jeu-denouement-points {
    width: 100%;
    max-width: var(--s08-capture-points-largeur-max);
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--s08-separateur);
    border-radius: 0;
    background: var(--s08-papier);
    color: var(--s08-encre);
    text-align: left;
    box-sizing: border-box;
}

.jeu-denouement-points li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s08-capture-points-marge-h);
    margin: 0;
    padding: var(--s08-capture-points-marge-v) var(--s08-capture-points-marge-h);
    box-sizing: border-box;
}

.jeu-denouement-points li + li {
    border-top: var(--s08-separateur);
}

.jeu-denouement-points-libelle,
.jeu-denouement-points li > span:first-child {
    min-width: 0;
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-capture-points-libelle-taille);
    font-weight: var(--s08-ruban-libelle-graisse);
    line-height: 1.2;
    letter-spacing: var(--s08-ruban-libelle-espacement);
    text-transform: uppercase;
}

.jeu-denouement-points-valeur,
.jeu-denouement-points li > span:last-child {
    flex: 0 0 auto;
    font-family: var(--s08-police-chiffre);
    font-size: var(--s08-capture-points-chiffre-taille);
    font-weight: var(--s08-ruban-chiffre-graisse);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jeu-denouement-points .jeu-denouement-points-total {
    margin-top: 0;
    background: var(--s08-encre);
    color: var(--s08-papier);
}

.jeu-denouement-points .jeu-denouement-points-total .jeu-denouement-points-valeur,
.jeu-denouement-points .jeu-denouement-points-total > span:last-child {
    font-size: var(--s08-capture-points-total-chiffre-taille);
}

/* --- Épreuve du Savant (lot 3a) : question, trois gros boutons, voix de
   la lanterne. Lot 3j : posée en bas de l'image de la scène, la créature
   reste dans la rue au-dessus ; la question est dans une bulle qui la
   désigne. */
.jeu-epreuve-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.jeu-savant-question {
    position: relative;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--scene-bulle);
    color: var(--scene-bulle-texte);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.jeu-savant-question-texte {
    margin: 0;
}

.jeu-savant-indice {
    margin: 0.55rem 0 0;
    padding-top: 0.5rem;
    border-top: 1.5px dotted rgba(20, 20, 20, 0.28);
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.35;
}

/* Pointe de la bulle, vers la créature (au-dessus). */
.jeu-savant-question::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    margin-left: -12px;
    border: 12px solid transparent;
    border-top: 0;
    border-bottom-color: var(--scene-bulle);
}

.jeu-savant-retour {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.jeu-reponses {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.jeu-rencontre .jeu-reponse {
    max-width: none;
    min-height: 3.75rem;
    font-size: 1.2rem;
}

/* Lot 3j-c1 : Savant sur son écran illustré (papier et encre, sans
   caméra). Créature et textes à l'encre sur le papier. */
.jeu-rencontre-illustree .jeu-rencontre-creature {
    color: var(--carte-encre);
}

.jeu-rencontre-illustree .jeu-savant-retour {
    color: var(--carte-encre);
    text-shadow: none;
}

/* Capture à la réussite : elle s'incline, puis file dans la lanterne
   (--capture-x, --capture-y : du bas de la créature au centre de la
   lanterne, posés par familles/savant.js). Plus spécifique que la
   pulsation d'une créature touchable. */
.jeu-rencontre .jeu-rencontre-creature.jeu-savant-capture {
    animation: jeu-savant-capture var(--savant-capture-duree) ease-in-out forwards;
}

@keyframes jeu-savant-capture {
    0% { transform: none; opacity: 1; }
    30% { transform: rotate(-12deg); opacity: 1; }
    42% { transform: rotate(-12deg) scale(1.04); opacity: 1; }
    100% { transform: translate(var(--capture-x, 0px), var(--capture-y, 0px)) rotate(-30deg) scale(0.05); opacity: 0; }
}

/* La lanterne s'illumine quand la créature y entre. */
.jeu-scene-lanterne.jeu-savant-lanterne-capture {
    animation: jeu-savant-lanterne 0.6s ease-out calc(var(--savant-capture-duree) * 0.8) both;
}

@keyframes jeu-savant-lanterne {
    0% { filter: drop-shadow(0 0 12px rgba(255, 220, 150, 0.45)); }
    50% { filter: drop-shadow(0 0 28px rgba(255, 220, 150, 0.95)); }
    100% { filter: drop-shadow(0 0 12px rgba(255, 220, 150, 0.45)); }
}

.jeu-reponse.jeu-reponse-bonne {
    background: var(--reponse-bonne);
    border-color: var(--reponse-bonne);
    color: #ffffff;
    opacity: 1;
}

.jeu-reponse.jeu-reponse-fausse {
    background: var(--reponse-fausse);
    border-color: var(--reponse-fausse);
    color: #ffffff;
    opacity: 1;
}

.jeu-reponse.jeu-reponse-fausse.jeu-reponse-grisee {
    background: var(--smuggler-gris);
    border-color: var(--smuggler-gris);
    color: var(--smuggler-papier);
    opacity: 0.6;
    text-decoration: line-through;
}

.jeu-savant-bouton-indice {
    align-self: center;
    min-height: 44px;
    padding: 0.45rem 1.15rem;
    font-weight: 700;
}

.jeu-savant-indice-cout {
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.08);
    color: var(--carte-encre);
    font-size: 0.95rem;
    font-weight: 700;
}

.jeu-denouement-points .jeu-denouement-points-indice {
    color: var(--s08-encre);
    font-style: normal;
}

.jeu-savant-test {
    margin: 0.25rem 0 0;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-family: "Courier Prime", monospace;
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
}

.jeu-savant-retour {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Voix de la lanterne pendant une épreuve (indice) : même allure que le
   conseil du dénouement. */
.jeu-epreuve-lanterne {
    max-width: 22rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--flamme-approche);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    font-style: italic;
    text-align: left;
}

/* --- Épreuve du Glouton à jauge de satiété (lot 3m). La créature est fixée
   à l'écran au centre, sur la caméra. Sur le côté droit : jauge verticale
   de satiété avec le nombre « 7 / 10 ». En bas : gros bouton « Donner un
   bonbon » avec la réserve affichée, petit bouton secondaire « Récupérer
   mes bonbons » (avec confirmation dans la scène) et message si la réserve
   est vide. */
.jeu-glouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.jeu-temps-scene .jeu-epreuve-zone > .jeu-glouton {
    pointer-events: none;
}

/* Jauge de satiété verticale sur le côté droit de la scène. */
.jeu-glouton-jauge {
    --glouton-satiete: 0;
    position: fixed;
    top: 43%;
    right: calc(var(--securite-droite) + 0.75rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.4rem;
    border: var(--trait) solid var(--smuggler-papier);
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.72);
    color: var(--smuggler-papier);
    transform: translateY(-50%);
    pointer-events: none;
}

.jeu-glouton-jauge-icone {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--s08-rencontre-icone-couleur);
}

.jeu-glouton-jauge-piste {
    position: relative;
    width: 1rem;
    height: min(36vh, 11rem);
    overflow: hidden;
    border: var(--trait) solid var(--smuggler-papier);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.jeu-glouton-jauge-niveau {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--glouton-satiete) * 100%);
    background: var(--bonbon);
    transition: height 0.2s ease-out;
}

.jeu-glouton-jauge-texte {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Commandes en bas de la scène : message de réserve vide, gros bouton
   « Donner un bonbon », petit bouton « Récupérer mes bonbons » et boîte
   de confirmation. */
.jeu-glouton-commandes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    pointer-events: auto;
}

.jeu-glouton-message {
    text-align: center;
    font-style: normal;
    font-weight: 700;
}

.jeu-rencontre .jeu-glouton-donner {
    --costaud-ma-couleur: var(--bonbon);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 6.1rem;
    height: 6.1rem;
    min-height: 6.1rem;
    max-width: none;
    padding: 0.5rem;
    border: var(--trait-fort) solid var(--smuggler-papier);
    border-radius: 50%;
    background: var(--smuggler-encre);
    color: var(--smuggler-blanc);
    touch-action: manipulation;
}

.jeu-rencontre .jeu-glouton-donner:active:not(:disabled) {
    border-color: var(--bonbon);
    background: var(--bonbon);
    color: var(--smuggler-encre);
    transform: scale(0.95);
}

.jeu-rencontre .jeu-glouton-donner:active:not(:disabled) .jeu-glouton-donner-icone {
    color: var(--s08-rencontre-icone-active-couleur);
}

.jeu-glouton-donner-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    color: var(--s08-rencontre-icone-couleur);
    pointer-events: none;
}

.jeu-glouton-donner-icone .jeu-element,
.jeu-glouton-donner-icone img,
.jeu-glouton-donner-icone svg,
.jeu-glouton-donner-icone .jeu-icone-masque {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jeu-glouton-donner-textes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-align: center;
}

.jeu-glouton-donner-libelle {
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

/* Lot 2v-c1 : en bas à droite, sur la même ligne de base qu'« Affronter plus tard » :
   « TES BONBONS : {n} · RÉCUPÉRER MES BONBONS » ou « Reprendre tes {n} bonbons ? OUI / NON » */
.jeu-glouton-bas-droite {
    position: absolute;
    right: calc(var(--securite-droite) + var(--espace));
    bottom: calc(var(--securite-bas) + 0.4rem);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    max-width: calc(100% - var(--securite-gauche) - var(--securite-droite) - 10rem);
    text-align: right;
    pointer-events: auto;
}

.jeu-glouton-bas-droite[hidden] {
    display: none !important;
}

.jeu-glouton-reserve-ligne {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 0.25rem;
    min-height: 44px;
}

.jeu-glouton-reserve-ligne[hidden] {
    display: none !important;
}

.jeu-glouton-donner-reserve,
.jeu-glouton-reserve-sep {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0.25rem 0;
    color: var(--s08-papier);
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-lien-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-transform: var(--s08-lien-casse);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jeu-glouton-reserve-sep[hidden] {
    display: none !important;
}

.jeu-rencontre .jeu-glouton-recuperer {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.25rem 0.15rem;
}

.jeu-rencontre .jeu-glouton-passer-tutoriel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--nuit-texte);
    opacity: 0.85;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.jeu-rencontre .jeu-glouton-passer-tutoriel[hidden] {
    display: none;
}

.jeu-glouton-confirmation {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 0.35rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--s08-papier);
    box-shadow: none;
    text-align: right;
}

.jeu-glouton-confirmation[hidden] {
    display: none !important;
}

.jeu-glouton-confirmation-texte {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0.25rem 0;
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-lien-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
}

.jeu-glouton-confirmation-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    min-height: 44px;
}

.jeu-rencontre .jeu-glouton-confirmer-lien {
    min-width: 34px;
    min-height: 44px;
    padding: 0.25rem 0.2rem;
}

.jeu-glouton-confirmation-sep {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--s08-papier);
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-lien-taille);
    font-weight: var(--s08-lien-graisse);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

/* Bonbon qui file du bouton vers la créature à chaque appui. */
.jeu-glouton-envols {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.jeu-glouton-envol {
    position: fixed;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    margin-top: -22px;
    color: var(--s08-rencontre-icone-couleur);
    pointer-events: none;
    animation: jeu-glouton-envol 0.32s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes jeu-glouton-envol {
    0% { transform: translate(0, 0) scale(0.9); opacity: 1; }
    80% { transform: translate(var(--vol-x, 0px), var(--vol-y, -120px)) scale(1.1); opacity: 1; }
    100% { transform: translate(var(--vol-x, 0px), var(--vol-y, -120px)) scale(0.3); opacity: 0; }
}

/* Petit croc animé sur la créature à chaque bonbon donné. */
.jeu-glouton-croque {
    animation: jeu-glouton-croque 0.36s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes jeu-glouton-croque {
    0% { transform: scale(1); }
    40% { transform: scale(1.12, 0.92); }
    75% { transform: scale(0.97, 1.05); }
    100% { transform: scale(1); }
}

/* --- Épreuve du Photosensible (lots 3g, 3g-c1). Avant la photo, la créature
   est affichée en silhouette d'aplat d'encre (--photo-silhouette-opacite,
   --photo-silhouette-filtre) à côté du contour guide en pointillés ; au
   déclenchement, elle révèle sa vraie image par un fondu court
   (--photo-revelation-duree) pendant que la photo se développe depuis le
   blanc, puis s'affiche avec Partager / Enregistrer, Refaire et C'est bon !. */
.jeu-rencontre .jeu-rencontre-creature.jeu-photo-creature-silhouette {
    opacity: var(--photo-silhouette-opacite);
    filter: var(--photo-silhouette-filtre);
    transition: none;
}

.jeu-rencontre .jeu-rencontre-creature.jeu-photo-creature-revelee {
    opacity: 1;
    filter: none;
    transition: opacity var(--photo-revelation-duree) ease, filter var(--photo-revelation-duree) ease;
}

.jeu-rencontre .jeu-rencontre-creature.jeu-photo-creature-cachee {
    opacity: 0;
    pointer-events: none;
}

.jeu-photo-contour {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--smuggler-papier);
    opacity: var(--photo-silhouette-position-opacite, 0.18);
    pointer-events: none;
}

.jeu-scene .jeu-scene-objet .jeu-photo-contour {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.jeu-rencontre .jeu-rencontre-creature.jeu-photo-calibrage-cible-active,
.jeu-photo-contour.jeu-photo-calibrage-cible-active {
    outline: 2px dashed var(--smuggler-or);
    outline-offset: 4px;
    border-radius: var(--rayon);
}

.jeu-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    pointer-events: none;
}

.jeu-temps-scene .jeu-epreuve-zone > .jeu-photo {
    pointer-events: none;
}

.jeu-photo-commandes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 6.1rem;
    pointer-events: auto;
}

/* Lot 5m-c1 : caméra demandée et obtenue, en mode test seulement. */
.jeu-photo-test {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.72rem;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.jeu-photo-commandes-secondaires {
    position: absolute;
    right: calc(var(--securite-droite) + var(--espace));
    bottom: calc(var(--securite-bas) + 0.4rem);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
    pointer-events: auto;
}

.jeu-rencontre .jeu-photo-declencheur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 6.1rem;
    height: 6.1rem;
    min-height: 6.1rem;
    max-width: none;
    padding: 0.5rem;
    border: var(--trait-fort) solid var(--smuggler-papier);
    border-radius: 50%;
    background: var(--smuggler-encre);
    color: var(--smuggler-blanc);
    touch-action: manipulation;
}

.jeu-rencontre .jeu-photo-declencheur:active:not(:disabled) {
    border-color: var(--scene-viseur-arc);
    background: var(--scene-viseur-arc);
    color: var(--smuggler-encre);
    transform: scale(0.95);
}

.jeu-photo-declencheur-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
}

.jeu-photo-declencheur-icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-photo-declencheur-libelle {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.jeu-rencontre .jeu-photo-bascule-camera {
    justify-content: flex-end;
    text-align: right;
    white-space: normal;
}

.jeu-rencontre .jeu-photo-calibrer-ouvrir {
    width: auto;
    min-height: 44px;
    border-color: var(--smuggler-papier);
    background: rgba(20, 20, 20, 0.65);
    color: var(--smuggler-papier);
    font-size: 0.9rem;
    font-weight: 600;
}

.jeu-photo-calibrage {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    max-width: 24rem;
    padding: 0.65rem 0.75rem;
    border: var(--trait) solid var(--smuggler-papier);
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.86);
    color: var(--smuggler-papier);
    pointer-events: auto;
    touch-action: manipulation;
}

.jeu-photo-calibrage[hidden] {
    display: none;
}

.jeu-photo-calibrage-entete {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.jeu-photo-calibrage-variante {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--smuggler-or);
}

.jeu-photo-calibrage-cibles {
    display: flex;
    gap: 0.4rem;
    width: 100%;
}

.jeu-rencontre .jeu-photo-calibrage-cible {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border-color: var(--smuggler-papier);
    background: rgba(20, 20, 20, 0.65);
    color: var(--smuggler-papier);
    font-size: 0.85rem;
    font-weight: 600;
}

.jeu-rencontre .jeu-photo-calibrage-cible[aria-pressed="true"] {
    border-color: var(--smuggler-or);
    background: var(--smuggler-or);
    color: var(--smuggler-encre);
    font-weight: 800;
}

.jeu-photo-calibrage-taille {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 36px;
    font-size: 0.85rem;
}

.jeu-photo-calibrage-taille-libelle {
    flex: 0 0 auto;
    font-weight: 600;
}

.jeu-photo-calibrage-curseur {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--smuggler-or);
}

.jeu-photo-calibrage-taille-valeur {
    flex: 0 0 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.jeu-photo-calibrage-message {
    margin: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
}

.jeu-photo-calibrage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}

.jeu-rencontre .jeu-photo-calibrage-enregistrer {
    flex: 1 1 11rem;
    min-height: 44px;
    font-size: 0.88rem;
}

.jeu-rencontre .jeu-photo-calibrage-annuler {
    flex: 0 1 auto;
    min-height: 44px;
    border-color: var(--smuggler-papier);
    background: rgba(20, 20, 20, 0.65);
    color: var(--smuggler-papier);
    font-size: 0.88rem;
}

.jeu-temps-scene {
    touch-action: none;
}

.jeu-photo-resultat {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: calc(var(--securite-haut) + 0.75rem) calc(var(--securite-droite) + 0.75rem) calc(var(--securite-bas) + 0.75rem) calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.88);
    pointer-events: auto;
}

.jeu-photo-cadre {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(92vw, 26rem);
    max-height: 58vh;
    max-height: 58dvh;
    overflow: hidden;
    border: var(--trait-fort) solid var(--smuggler-blanc);
    border-radius: var(--rayon);
    background: var(--smuggler-encre);
    box-shadow: var(--ombre-jeu);
}

.jeu-photo-image {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    max-height: 58dvh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.jeu-photo-flash {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
}

.jeu-photo-developpement .jeu-photo-flash {
    animation: jeu-photo-developpement var(--photo-developpement-duree) ease-out both;
}

@keyframes jeu-photo-developpement {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.jeu-photo-message {
    width: 100%;
    max-width: 24rem;
    padding: 0.5rem 0.85rem;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.jeu-photo-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 24rem;
}

.jeu-photo-actions > .bouton {
    width: 100%;
    max-width: 24rem;
    min-height: 44px;
}

.jeu-photo-actions-secondaires {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.jeu-photo-actions-secondaires .bouton {
    flex: 1 1 8rem;
    min-height: 44px;
}

/* --- Épreuve du Costaud (lots 3h, 3h-c1, 3h-c2) : canvas des rayons (traits
   ondulés enroulés, lueur, étincelles d'encre), compteur « k / N équipes »
   avec puces colorées et marque de tenue en haut, et gros bouton « Lance ton
   rayon ! » entouré de l'anneau de jauge commune en bas. */
.jeu-costaud-rayons {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.jeu-costaud-etat {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: calc(var(--s08-feuille-debord, 18px) + 4px);
}

.jeu-costaud-compteur {
    margin: 0;
    padding: 0.2rem 0.7rem;
    border: 1.5px solid rgba(241, 236, 224, 0.55);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.jeu-costaud-equipes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-costaud-equipe {
    --costaud-equipe-couleur: var(--smuggler-papier);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.14rem 0.45rem;
    border: 1px solid rgba(241, 236, 224, 0.45);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-family: var(--s08-police-libelle);
    font-size: var(--s08-costaud-equipes-taille);
    font-weight: 700;
    line-height: 1.15;
}

.jeu-costaud-equipe-point {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--costaud-equipe-couleur);
}

.jeu-costaud-equipe-tient {
    border-color: var(--costaud-equipe-couleur);
    background: rgba(20, 20, 20, 0.92);
    color: var(--smuggler-blanc);
}

.jeu-costaud-equipe-tient .jeu-costaud-equipe-point {
    box-shadow: 0 0 6px var(--costaud-equipe-couleur);
}

.jeu-costaud-equipe-marque {
    color: var(--costaud-equipe-couleur);
    font-size: var(--s08-costaud-equipes-taille);
    line-height: 1;
}

.jeu-costaud-commandes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.jeu-temps-scene .jeu-epreuve-zone > .jeu-costaud-commandes {
    pointer-events: none;
}

.jeu-costaud-foyer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.75rem;
    height: 7.75rem;
    pointer-events: auto;
}

.jeu-costaud-jauge-svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
    pointer-events: none;
}

.jeu-costaud-jauge-rail,
.jeu-costaud-jauge-arc {
    fill: none;
}

.jeu-costaud-jauge-rail {
    stroke: var(--scene-viseur-rail);
    stroke-width: 3.5;
    opacity: 0.65;
}

.jeu-costaud-jauge-arc {
    stroke: var(--scene-viseur-arc);
    stroke-width: 7;
    stroke-linecap: butt;
    opacity: 0.9;
}

.jeu-costaud-foyer-actif .jeu-costaud-jauge-arc {
    opacity: 1;
}

.jeu-rencontre .jeu-costaud-bouton {
    --costaud-ma-couleur: var(--scene-viseur-arc);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.1rem;
    height: 6.1rem;
    min-height: 6.1rem;
    padding: 0.5rem;
    border: var(--trait-fort) solid var(--smuggler-papier);
    border-radius: 50%;
    background: var(--smuggler-encre);
    color: var(--smuggler-blanc);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
    transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.jeu-rencontre .jeu-costaud-bouton.jeu-costaud-bouton-actif {
    border-color: var(--costaud-ma-couleur);
    background: var(--costaud-ma-couleur);
    color: var(--smuggler-encre);
    transform: scale(0.95);
}

.jeu-rencontre .jeu-costaud-bouton:disabled {
    border-style: dashed;
    border-color: rgba(241, 236, 224, 0.45);
    background: rgba(20, 20, 20, 0.65);
    color: rgba(241, 236, 224, 0.7);
    opacity: 0.85;
}

.jeu-costaud-bouton-texte {
    display: block;
    pointer-events: none;
}

.jeu-rencontre .jeu-costaud-appel {
    position: absolute;
    right: calc(var(--securite-droite) + var(--espace));
    bottom: calc(var(--securite-bas) + 0.4rem);
    z-index: 3;
    justify-content: flex-end;
    text-align: right;
}

.jeu-costaud-appel-message {
    position: absolute;
    right: calc(var(--securite-droite) + var(--espace));
    bottom: calc(var(--securite-bas) + 2.8rem);
    z-index: 3;
    margin: 0;
    padding: 0.15rem 0.35rem;
    background: transparent;
    color: var(--flamme-approche);
    font-family: var(--s08-lien-police);
    font-size: var(--s08-scene-lien-taille);
    font-weight: var(--s08-lien-graisse);
    text-transform: var(--s08-lien-casse);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.jeu-costaud-test {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* --- Méga-Costaud : cadrage du porche et masque de décor (lot 3o) :
   cadre commun (.jeu-mega-cadre) ajusté à l'écran en mode « couvrir » (cover)
   et centré, contenant la photo du guide à 40 % d'opacité (.jeu-mega-guide)
   et le calque masqué (.jeu-mega-masque) qui découpe la créature et ses
   animations par mask-image / -webkit-mask-image. */
.jeu-mega-cadre {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.jeu-mega-guide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.4;
    pointer-events: none;
}

.jeu-mega-guide[hidden],
.jeu-mega-masque[hidden] {
    display: none;
}

.jeu-mega-masque {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.jeu-mega-masque-actif {
    -webkit-mask-image: var(--mega-masque-url);
    mask-image: var(--mega-masque-url);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.jeu-mega-creature-boite {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.jeu-mega-creature-corps {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
}

.jeu-mega-creature-corps.jeu-mega-apparition {
    animation: jeu-apparition var(--apparition-duree, var(--apparition-duree-defaut)) ease-out both;
}

.jeu-mega-creature-boite .jeu-rencontre-creature {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.jeu-rencontre .jeu-mega-bouton-cadrer {
    pointer-events: auto;
}

.jeu-rencontre .jeu-mega-autre-angle[hidden] {
    display: none !important;
}

.jeu-rencontre .jeu-mega-recadrer {
    width: auto;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border-color: rgba(241, 236, 224, 0.55);
    background: rgba(20, 20, 20, 0.68);
    color: var(--smuggler-papier);
    font-size: 0.88rem;
    font-weight: 700;
    pointer-events: auto;
}

/* --- Méga-Costaud accroché au porche par 8th Wall (lot 3o-r-b, D-174) :
   canvas du moteur tout au fond de la scène (.jeu-mega-porche-toile), cadre
   commun à sa taille de référence placé par matrix3d depuis son coin haut
   gauche (.jeu-mega-cadre--porche) et atténué quand le porche est perdu
   (.jeu-mega-cadre--perdu), indication « Vise le porche », lien discret
   « Cadrer à la main » et ligne de mesures du mode test. */
.jeu-mega-porche-toile {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.jeu-mega-cadre--porche {
    transform-origin: 0 0;
    will-change: transform, opacity;
    transition: opacity 0.15s ease-out;
}

.jeu-mega-cadre--perdu {
    opacity: 0.42;
}

.jeu-mega-porche-viser {
    margin: 0;
    padding: 0.55rem 1.15rem;
    border: 2px solid var(--smuggler-papier);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.92);
    color: var(--smuggler-papier);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}

.jeu-rencontre .jeu-mega-porche-lien {
    width: auto;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.55);
    color: var(--smuggler-papier);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    pointer-events: auto;
}

.jeu-mega-porche-mesures {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Lot 3o-r-e (D-222) : cibles du porche chargées (mode test), trait vert sur la cible verrouillée */
.jeu-porche-cibles {
    display: flex;
    flex: 1 0 100%;
    gap: 0.3rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.jeu-porche-cible {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.15rem 0.25rem;
    border: 2px solid transparent;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.66rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.jeu-porche-cible--verrouillee {
    border-color: #b8f28b;
}

.jeu-porche-cible-image {
    flex: 0 0 auto;
    width: 2.1rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* --- Pieuvre (lot 3i-c6, D-176, D-177) : porche perdu = cadre caché (attribut
   hidden ; .jeu-mega-cadre--perdu et .jeu-essai-porche-cadre--perdu ne sont
   plus posés), message quand 8th Wall est indisponible, fin de la pieuvre
   (ligne des équipes partenaires, pieuvre à sa place fixe pour le selfie,
   lien « Pas de photo », boutons de sortie sous la photo). */
.jeu-mega-porche-indisponible,
.jeu-mega-porche-autre-telephone,
.jeu-mega-fin-partenaires {
    margin: 0;
    padding: 0.55rem 1rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.88);
    color: var(--smuggler-papier);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}

.jeu-mega-porche-autre {
    gap: 0.75rem;
}

.jeu-mega-photo-fixe {
    position: absolute;
    pointer-events: none;
}

.jeu-mega-photo-fixe .jeu-element,
.jeu-mega-photo-fixe .jeu-element img,
.jeu-mega-photo-fixe .jeu-element svg,
.jeu-mega-photo-fixe img,
.jeu-mega-photo-fixe svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.jeu-rencontre .jeu-mega-photo-passer {
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.55);
    color: var(--smuggler-papier);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    pointer-events: auto;
}

.jeu-mega-fin-sorties {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    max-width: 24rem;
}

.jeu-mega-fin-sorties > .bouton {
    width: 100%;
    min-height: 44px;
}

/* --- Épreuve du Timide (lot 3e) : en bas de l'écran, flamme qui suit la voix
   avec zone « tout doux » marquée et anneau d'apaisement sans chiffre,
   secousse animée quand il pouffe à mi-jauge, replongeon au cri et bouton
   de secours sans micro. */
.jeu-timide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.jeu-temps-scene .jeu-epreuve-zone > .jeu-timide {
    pointer-events: none;
}

.jeu-timide-foyer {
    --timide-flamme-echelle: 0.4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8.5rem;
    height: 8.5rem;
    pointer-events: none;
}

.jeu-timide-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jeu-timide-jauge-rail,
.jeu-timide-jauge-arc {
    fill: none;
    transform: rotate(-90deg);
    transform-origin: 70px 70px;
}

.jeu-timide-jauge-rail {
    stroke: var(--scene-viseur-rail);
    stroke-width: 3;
    opacity: 0.55;
}

.jeu-timide-jauge-arc {
    stroke: var(--scene-viseur-arc);
    stroke-width: 6.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.jeu-timide-zone-cercle {
    fill: rgba(229, 168, 0, 0.12);
    stroke: var(--flamme-approche);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    transition: fill 0.2s ease, stroke-width 0.2s ease;
}

.jeu-timide-foyer[data-etat="doux"] .jeu-timide-zone-cercle {
    fill: rgba(229, 168, 0, 0.26);
    stroke-width: 2.8;
}

.jeu-timide-foyer[data-etat="cri"] .jeu-timide-zone-cercle {
    fill: rgba(232, 67, 46, 0.24);
    stroke: var(--smuggler-accent);
}

.jeu-timide-seuil-bas {
    fill: rgba(20, 20, 20, 0.35);
    stroke: rgba(241, 236, 224, 0.45);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

.jeu-timide-flamme {
    transform: scale(var(--timide-flamme-echelle));
    transform-origin: 70px 88px;
    transition: transform 0.08s ease-out;
}

.jeu-timide-flamme-corps {
    fill: var(--flamme-repos);
    stroke: var(--smuggler-papier);
    stroke-width: 1.5;
    transition: fill 0.18s ease;
}

.jeu-timide-foyer[data-etat="doux"] .jeu-timide-flamme-corps {
    fill: var(--flamme-approche);
}

.jeu-timide-foyer[data-etat="cri"] .jeu-timide-flamme-corps {
    fill: var(--smuggler-accent);
}

.jeu-timide-flamme-coeur {
    fill: var(--smuggler-papier);
    opacity: 0.85;
}

.jeu-timide-etiquette-doux {
    margin-top: -0.35rem;
    padding: 0.1rem 0.55rem;
    border: 1.5px solid var(--flamme-approche);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.jeu-timide-foyer[data-etat="doux"] .jeu-timide-etiquette-doux {
    background: var(--flamme-approche);
    color: var(--smuggler-encre);
}

.jeu-rencontre .jeu-timide-secours-bouton {
    width: 100%;
    max-width: 18rem;
    min-height: 3.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    pointer-events: auto;
}

.jeu-timide-test {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--rayon);
    background: rgba(20, 20, 20, 0.78);
    color: var(--smuggler-papier);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* À mi-jauge, le Timide pouffe : petite secousse espiègle. */
.jeu-rencontre .jeu-rencontre-creature.jeu-timide-pouffe {
    animation: jeu-timide-pouffe 0.55s ease-in-out both;
}

@keyframes jeu-timide-pouffe {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    20% { transform: translateY(-6%) rotate(-4deg) scale(1.04, 0.96); }
    40% { transform: translateY(2%) rotate(4deg) scale(0.97, 1.04); }
    60% { transform: translateY(-4%) rotate(-3deg) scale(1.03, 0.98); }
    80% { transform: translateY(1%) rotate(2deg) scale(0.99, 1.02); }
}

/* Au cri, le Timide sursaute en replongeant vers son bord. */
.jeu-rencontre .jeu-rencontre-creature.jeu-timide-replonge {
    animation: jeu-timide-replonge 0.38s ease-out both;
}

@keyframes jeu-timide-replonge {
    0% { transform: scale(1); }
    30% { transform: scale(0.88, 1.1) rotate(-6deg); }
    100% { transform: scale(1); }
}

/* Dénouement d'un refus (lot 3b) : pas de marque, lieu toujours ouvert.
   Lot 3j : posé sur l'image assombrie de la scène. */
.jeu-etape-refus .jeu-denouement-texte {
    color: var(--nuit-creature);
}

/* --- Registre « carnet de terrain » (lot 3l-a, maquette S05) : écran plein,
   papier #FBFAF7 et quadrillage 18 px, encre #111, pointillés 1.5px dotted.
   Sous la rencontre (50), qui le cède au 5e temps. */
.jeu-registre {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--registre-encre);
    font-family: var(--registre-police-texte);
    font-size: 15px;
    line-height: 1.45;
}

.jeu-registre.jeu-registre-sans-quadrillage {
    --registre-quadrillage-image: none;
    background-image: none;
}

.jeu-registre.jeu-registre--apercu {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 360px;
    max-width: 100%;
    height: 740px;
    min-height: 740px;
    border: 10px solid #2a2a2a;
    border-radius: 34px;
    overflow: hidden;
    box-sizing: border-box;
}

.jeu-registre:focus {
    outline: none;
}

/* Titre caché visuellement, conservé pour aria-labelledby du dialogue. */
.jeu-registre-titre {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Typographie du registre (S05). */
.jeu-registre-titre-typo {
    font-family: var(--registre-police-titre);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
}

.jeu-registre-etiq {
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.jeu-registre-etiq b,
.jeu-registre-etiq strong {
    font-weight: 700;
}

/* Intercalaires (S05) : barre de 46 px, décalée de 12 px du bord gauche, sur un
   filet de 1,5 px ; onglets en trapèze qui se chevauchent, actif devant en aplat
   noir, inactifs au contour ; zone de toucher étendue à 44 px. */
.jeu-registre-onglets {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 0 0 calc(46px + var(--securite-haut));
    height: calc(46px + var(--securite-haut));
    padding: var(--securite-haut) var(--securite-droite) 0 calc(12px + var(--securite-gauche));
    background: var(--registre-papier);
}

.jeu-registre--apercu .jeu-registre-onglets {
    flex: 0 0 46px;
    height: 46px;
    padding: 0 0 0 12px;
}

.jeu-registre-onglets::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1.5px solid var(--registre-encre);
    pointer-events: none;
    z-index: 7;
}

.jeu-registre-onglet {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 44px;
    height: 44px;
    padding: 0;
    margin-right: -11px;
    border: 0;
    background: transparent;
    color: var(--registre-encre);
    font: inherit;
    cursor: pointer;
}

.jeu-registre-onglet[hidden] {
    display: none;
}

.jeu-registre-onglet:nth-child(1) { z-index: 5; }
.jeu-registre-onglet:nth-child(2) { z-index: 4; }
.jeu-registre-onglet:nth-child(3) { z-index: 3; }
.jeu-registre-onglet:nth-child(4) { z-index: 2; }
.jeu-registre-onglet:nth-child(5) { z-index: 1; }

.jeu-registre-onglet[aria-selected="true"],
.jeu-registre-onglet.actif {
    z-index: 6;
}

.jeu-registre-onglet-forme {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    background: var(--registre-encre);
    color: var(--registre-encre);
    clip-path: polygon(0 100%, 11px 0, calc(100% - 11px) 0, 100% 100%);
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.jeu-registre-onglet:not([aria-selected="true"]):not(.actif) .jeu-registre-onglet-forme::before {
    content: "";
    position: absolute;
    inset: 1.5px 1.5px 0 1.5px;
    background: var(--registre-papier);
    clip-path: polygon(0 100%, 10px 0, calc(100% - 10px) 0, 100% 100%);
}

.jeu-registre-onglet[aria-selected="true"] .jeu-registre-onglet-forme,
.jeu-registre-onglet.actif .jeu-registre-onglet-forme {
    height: 36px;
    padding: 0 16px;
    color: var(--registre-papier);
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.03em;
}

.jeu-registre-onglet-libelle {
    position: relative;
    z-index: 1;
}

.jeu-registre-contenu {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.jeu-registre-pied {
    flex: 0 0 auto;
    padding: 6px calc(16px + var(--securite-droite)) calc(8px + var(--securite-bas)) calc(16px + var(--securite-gauche));
    border-top: var(--registre-pointille);
    background: var(--registre-papier);
}

.jeu-registre--apercu .jeu-registre-pied {
    padding: 4px 16px;
}

.jeu-registre-pied .bouton {
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 0;
    box-shadow: none;
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jeu-registre p {
    margin: 0;
}

/* Briques communes du registre (S05). */
.jeu-registre-retour-barre {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-bottom: var(--registre-pointille);
    background: transparent;
    color: var(--registre-encre);
    text-align: left;
    cursor: pointer;
}

.jeu-registre-dessin {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: normal;
}

.jeu-registre-dessin > .jeu-element {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

.jeu-registre-dessin img,
.jeu-registre-dessin svg,
img.jeu-registre-dessin,
svg.jeu-registre-dessin {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: normal;
}

.jeu-registre-silhouette,
.jeu-registre-silhouette img,
.jeu-registre-silhouette svg {
    filter: brightness(0);
}

.jeu-registre-tampon {
    position: absolute;
    padding: 2px 7px;
    border: 2px solid var(--registre-accent);
    color: var(--registre-accent);
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-9deg);
    pointer-events: none;
}

.jeu-registre-aplat {
    background: var(--registre-encre);
    color: var(--registre-papier);
}

/* Écran 1 : Espèces (S05 — tient sans défilement sur 360 × 740 avec le pied à 44 px). */
.jeu-registre-entete {
    padding: 8px 16px 4px;
    text-align: center;
}

.jeu-registre-entete-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 84px;
    max-width: 100%;
    transform: rotate(-2deg);
}

.jeu-registre-entete-logo img,
.jeu-registre-entete-logo svg {
    display: block;
    width: auto;
    height: 84px;
    max-width: 100%;
    max-height: 84px;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-entete-etiquette {
    margin-top: 4px;
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.jeu-registre-compteur {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 6px 16px 0;
    padding: 5px 0;
    border-top: var(--registre-pointille);
    border-bottom: var(--registre-pointille);
}

.jeu-registre-compteur-nombres {
    font-size: 30px;
}

.jeu-registre-grille-familles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0 16px;
}

.jeu-registre-famille {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 126px;
    min-height: 126px;
    padding: 18px 12px 12px;
    border: 0;
    border-bottom: var(--registre-pointille);
    border-radius: 0;
    background: transparent;
    color: var(--registre-encre);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.jeu-registre-famille:nth-child(odd) {
    border-right: var(--registre-pointille);
}

.jeu-registre-famille-compte {
    position: absolute;
    left: 10px;
    top: 8px;
    font-size: 10px;
}

.jeu-registre-famille-image {
    width: 100px;
    height: 60px;
    max-width: 100%;
    max-height: 60px;
    flex: 0 0 auto;
}

.jeu-registre-famille-nom {
    font-size: 20px;
    overflow-wrap: anywhere;
}

.jeu-registre-famille-cocon-compte {
    margin-top: -3px;
    margin-bottom: -10px;
    font-size: 10px;
    line-height: 1.1;
}

.jeu-registre-famille-tampon {
    right: 8px;
    top: 8px;
    font-size: 10px;
}

.jeu-registre-pieuvre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: calc(100% - 32px);
    height: 74px;
    min-height: 74px;
    margin: 0 16px;
    padding: 10px 14px;
    border: 0;
    border-bottom: var(--registre-pointille);
    border-radius: 0;
    background: transparent;
    color: var(--registre-encre);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jeu-registre-pieuvre-image {
    width: 46px;
    height: 58px;
    max-width: 46px;
    max-height: 58px;
    flex: 0 0 46px;
}

.jeu-registre-pieuvre-image img,
.jeu-registre-pieuvre-image svg {
    filter: brightness(0) invert(1);
}

.jeu-registre-pieuvre-textes {
    min-width: 0;
}

.jeu-registre-pieuvre-nom {
    font-size: 28px;
    overflow-wrap: anywhere;
}

.jeu-registre-pieuvre-fleche {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 26px;
}

/* Écran 2 : Une espèce (S05). */
.jeu-registre-tete-espece {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.jeu-registre-espece-image {
    width: 84px;
    height: 84px;
    max-width: 84px;
    max-height: 84px;
    flex: 0 0 84px;
}

.jeu-registre-espece-textes {
    min-width: 0;
}

.jeu-registre-espece-nom {
    margin: 2px 0;
    font-size: 40px;
    overflow-wrap: anywhere;
}

.jeu-registre-espece-description {
    padding: 0 16px 10px;
}

.jeu-registre-consigne {
    margin: 4px 16px 0;
    padding: 10px 12px;
}

.jeu-registre-consigne-etiq {
    margin-bottom: 3px;
}

/* Page d'espèce du Cocon (lot 3l-e) : 3 compteurs et liste des créatures écloses. */
.jeu-registre-cocon-bilan {
    margin: 12px 16px 14px;
}

.jeu-registre-cocon-compteurs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--registre-pointille);
    border-bottom: var(--registre-pointille);
}

.jeu-registre-cocon-compteur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 8px 6px;
    text-align: center;
}

.jeu-registre-cocon-compteur + .jeu-registre-cocon-compteur {
    border-left: var(--registre-pointille);
}

.jeu-registre-cocon-compteur-valeur {
    font-size: 28px;
    line-height: 0.95;
}

.jeu-registre-cocon-compteur-libelle {
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.jeu-registre-cocon-attente {
    margin: 12px 0 0;
    padding: 14px 12px;
    border: 1.5px dashed var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.jeu-registre-cocon-eclosions {
    margin-top: 10px;
}

.jeu-registre-cocon-eclosions-titre {
    margin-bottom: 4px;
}

.jeu-registre-cocon-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--registre-pointille);
}

.jeu-registre-cocon-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 0;
    border-bottom: var(--registre-pointille);
}

.jeu-registre-cocon-ligne-image {
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
    flex: 0 0 46px;
}

.jeu-registre-cocon-ligne-nom {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.jeu-registre-cocon-ligne-points {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.jeu-registre-grille-specimens {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 14px 16px 0;
}

.jeu-registre-specimen {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 224px;
    min-height: 224px;
    padding: 26px 12px 14px;
    border: 0;
    border-bottom: var(--registre-pointille);
    border-radius: 0;
    background: transparent;
    color: var(--registre-encre);
    font: inherit;
    text-align: center;
}

.jeu-registre-specimen:nth-child(odd) {
    border-right: var(--registre-pointille);
}

.jeu-registre-specimen-derniere-ligne {
    border-bottom: none;
}

.jeu-registre-specimen-connu {
    cursor: pointer;
}

.jeu-registre-specimen-num {
    position: absolute;
    left: 10px;
    top: 8px;
    font-size: 10px;
}

.jeu-registre-specimen-image {
    width: 100%;
    height: 136px;
    max-width: 100%;
    max-height: 136px;
    margin: 0 0 10px;
}

.jeu-registre-specimen-nom {
    font-size: 20px;
    overflow-wrap: anywhere;
}

.jeu-registre-specimen-tampon {
    right: 8px;
    top: 6px;
    font-size: 10px;
}

/* Styles conservés pour la page d'une créature (lot 3l-b) et les onglets Règles / Photos. */
.jeu-registre-embleme {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
    overflow: hidden;
}

.jeu-registre-embleme .jeu-element,
.jeu-registre-embleme img,
.jeu-registre-embleme svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-retour {
    margin-bottom: 0.75rem;
    color: var(--registre-encre);
}

.jeu-registre-famille-entete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--espace);
}

.jeu-registre-famille-titre {
    margin: 0 0 0.4rem;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.jeu-registre-creatures,
.jeu-registre-lieux {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-registre-creature,
.jeu-registre-lieu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    border-bottom: var(--registre-pointille);
    background: transparent;
}

.jeu-registre-creature:first-child,
.jeu-registre-lieu:first-child {
    border-top: var(--registre-pointille);
}

.jeu-registre-creature-choisie {
    border-color: var(--registre-encre);
}

.jeu-registre-creature-image {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    color: var(--registre-encre);
}

.jeu-registre-creature-tampon {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: block;
    width: 30px;
    height: 30px;
    color: var(--registre-accent);
    pointer-events: none;
}

/* Consignation dans le registre après une capture (lot 5g ; lot 3l-b : sur
   le dessin et le tampon « Retrouvé » de la page d'un monstre). */
.jeu-registre-creature-consignee .jeu-registre-creature-image > .jeu-element,
.jeu-registre-creature-consignee .jeu-registre-detail-image > .jeu-element,
.jeu-registre-creature-consignee .jeu-registre-corps-dessin > .jeu-element {
    animation: jeu-registre-consignation 0.9s ease-out both;
}

.jeu-registre-creature-consignee .jeu-registre-creature-tampon,
.jeu-registre-creature-consignee .jeu-registre-monstre-tampon {
    animation: jeu-tampon 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.4s both;
}

@keyframes jeu-registre-consignation {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

.jeu-registre-creature-inconnue .jeu-registre-creature-image {
    color: var(--registre-encre);
    opacity: 1;
}

.jeu-registre-creature-ouvrable {
    padding: 0;
}

.jeu-registre-creature-bouton {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jeu-registre-creature-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--registre-encre);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

/* Écran 3 : Page d'un monstre capturé (lots 3l-b, 3l-f, maquette S05). */
.jeu-registre-page-monstre {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    touch-action: pan-y;
}

.jeu-registre-tete-monstre,
.jeu-registre .tete-monstre {
    flex-shrink: 0;
    padding: 12px 16px 6px;
}

.jeu-registre-tete-monstre-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.jeu-registre-monstre-compte {
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 0.72;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.jeu-registre-monstre-nom {
    margin: 2px 0 0;
    font-size: 44px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.jeu-registre-corps,
.jeu-registre .corps {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    min-height: 310px;
    padding: 0 16px;
    touch-action: pan-y;
}

.jeu-registre .corps > img,
.jeu-registre-corps-dessin {
    width: 52%;
    max-width: 52%;
    height: 310px;
    max-height: 310px;
    min-width: 0;
    flex: 0 0 52%;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--registre-encre);
    overflow: hidden;
    cursor: pointer;
}

.jeu-registre-corps-dessin .jeu-element,
.jeu-registre-corps-dessin img,
.jeu-registre-corps-dessin svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 310px;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-monstre-tampon {
    left: 12px;
    top: 14px;
    font-size: 14px;
    z-index: 2;
}

.jeu-registre-notes,
.jeu-registre .notes {
    width: 48%;
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 8px;
    padding: 4px 0 4px 6px;
}

.jeu-registre-note,
.jeu-registre .note {
    position: relative;
    margin: 0;
    font-family: var(--registre-police-etiquette);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.jeu-registre-note::before,
.jeu-registre .note::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 10px;
    width: 30px;
    border-top: 1px solid var(--registre-encre);
    pointer-events: none;
}

.jeu-registre-puce,
.jeu-registre .puce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 50%;
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    vertical-align: -3px;
}

.jeu-registre-note-cachee,
.jeu-registre .note.cachee {
    opacity: 0.45;
}

.jeu-registre-note-cachee::before,
.jeu-registre .note.cachee::before {
    border-top-style: dashed;
}

.jeu-registre-etiquette-spec,
.jeu-registre .etiquette-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 0;
    margin: 8px 16px 0;
    border-top: var(--registre-pointille);
}

.jeu-registre-etiquette-spec > div,
.jeu-registre .etiquette-spec div {
    padding: 6px 0;
    border-bottom: var(--registre-pointille);
    min-width: 0;
}

.jeu-registre-etiquette-spec > div:nth-child(odd),
.jeu-registre .etiquette-spec div:nth-child(odd) {
    border-right: var(--registre-pointille);
    padding-right: 8px;
}

.jeu-registre-etiquette-spec > div:nth-child(even),
.jeu-registre .etiquette-spec div:nth-child(even) {
    padding-left: 10px;
}

.jeu-registre-etiquette-spec b,
.jeu-registre .etiquette-spec b {
    display: block;
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.jeu-registre-captures,
.jeu-registre .captures {
    flex-shrink: 0;
    margin: 0 16px 8px;
    padding-top: 6px;
    border-bottom: var(--registre-pointille);
}

.jeu-registre-captures-titre {
    margin-bottom: 2px;
}

.jeu-registre-captures-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-registre-capture {
    padding: 5px 0;
    font-family: var(--registre-police-etiquette);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.jeu-registre-capture + .jeu-registre-capture {
    border-top: var(--registre-pointille);
}

.jeu-registre-capture-photo {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.jeu-registre-captures .jeu-registre-vignettes {
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 6.75rem));
    gap: 8px;
    margin-top: 6px;
}

.jeu-registre-vignette.jeu-registre-capture-photo {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 0;
    padding: 0;
    border: 1.5px solid var(--registre-encre);
    background: var(--registre-encre);
    text-decoration: none;
}

.jeu-registre-frise,
.jeu-registre .frise {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-height: 64px;
    margin-top: auto;
    padding: 6px 16px 8px;
    border-top: var(--registre-pointille);
    background: var(--registre-papier);
    touch-action: pan-y;
}

.jeu-registre-frise-titre {
    font-size: 11px;
    line-height: 1.2;
}

.jeu-registre-frise-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 46px;
}

.jeu-registre .frise img,
.jeu-registre-frise-vignette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 46px;
    max-width: 30px;
    max-height: 46px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    color: var(--registre-encre);
    overflow: hidden;
}

.jeu-registre-frise-vignette .jeu-element,
.jeu-registre-frise-vignette img,
.jeu-registre-frise-vignette svg {
    display: block;
    width: 30px;
    height: 44px;
    max-width: 30px;
    max-height: 44px;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-frise-connue {
    cursor: pointer;
}

.jeu-registre-frise-connue:active {
    transform: scale(0.92);
}

.jeu-registre-frise-inconnue {
    pointer-events: none;
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.jeu-registre-frise-courant,
.jeu-registre .frise .courant {
    border-bottom: 2.5px solid var(--registre-encre);
    padding-bottom: 2px;
}

.jeu-registre-frise-indication {
    margin-left: auto;
    white-space: nowrap;
}

.jeu-registre-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 12px 16px;
    border: 0;
    background: transparent;
}

.jeu-registre-detail-image {
    position: relative;
    display: block;
    width: min(62vw, 14rem);
    height: min(62vw, 14rem);
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--registre-encre);
    cursor: pointer;
}

.jeu-registre-detail-image .jeu-registre-creature-tampon {
    right: -8px;
    bottom: -8px;
    width: 40px;
    height: 40px;
}

.jeu-registre-detail-nom {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: 36px;
    font-weight: 900;
    line-height: 0.92;
    text-transform: uppercase;
    text-align: center;
}

.jeu-registre-detail-famille {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.jeu-registre-detail-famille .jeu-registre-embleme {
    width: 28px;
    height: 28px;
}

.jeu-registre-detail-texte {
    width: 100%;
    line-height: 1.45;
    white-space: pre-line;
}

.jeu-registre-detail .jeu-registre-notes,
.jeu-registre-detail-photos {
    width: 100%;
    padding-top: 0.5rem;
    border-top: var(--registre-pointille);
}

.jeu-registre-vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.jeu-registre-vignette {
    display: block;
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    border: 1.5px solid var(--registre-encre);
    border-radius: 0;
    background: var(--registre-encre);
    cursor: pointer;
}

.jeu-registre-vignette-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Galerie « Photos » (Souvenirs) dans le registre (lots 3g-c2, 3l-d, 3o-r-c). */
.jeu-registre .jeu-registre-souvenirs-note,
.jeu-registre-souvenirs-note {
    margin: 14px 16px 0;
    padding: 1rem 1.25rem;
    border-bottom: var(--registre-pointille);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.jeu-registre-souvenirs-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 12px 16px 0;
}

.jeu-registre-souvenirs-actions:has(> .jeu-registre-souvenirs-tout[hidden]) {
    display: none;
}

.jeu-registre-souvenirs-tout {
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 0;
    box-shadow: none;
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jeu-registre-souvenirs-message {
    margin: 0;
    color: var(--registre-encre);
    font-size: 12px;
}

.jeu-registre-souvenirs {
    padding: 14px 16px;
}

.jeu-registre-souvenirs-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.jeu-registre-souvenir {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: var(--registre-pointille);
    border-radius: 0;
    background: transparent;
    color: var(--registre-encre);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jeu-registre-souvenir-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    background: var(--registre-encre);
    object-fit: cover;
}

.jeu-registre-souvenir-nom {
    font-family: var(--registre-police-titre);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.jeu-registre-souvenir-lieu {
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

/* Visionneuse plein écran d'une photo souvenir ou d'une créature (lot 3g-c2). */
.jeu-registre-visionneuse {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: calc(var(--securite-haut) + 0.6rem) calc(var(--securite-droite) + 0.75rem) calc(var(--securite-bas) + 0.75rem) calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.94);
    color: var(--smuggler-papier);
}

.jeu-registre-visionneuse-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;
}

.jeu-registre-visionneuse-titre {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.jeu-registre-visionneuse-cadre {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 26rem;
    min-height: 0;
    overflow: hidden;
}

.jeu-registre-visionneuse-cadre-creature {
    cursor: pointer;
}

.jeu-registre-visionneuse-cadre > .jeu-element,
.jeu-registre-visionneuse-cadre > .jeu-element img,
.jeu-registre-visionneuse-cadre > .jeu-element svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-visionneuse-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: var(--trait) solid var(--smuggler-blanc);
    border-radius: var(--rayon);
    object-fit: contain;
}

.jeu-registre-visionneuse-message {
    width: 100%;
    max-width: 24rem;
    text-align: center;
    font-style: normal;
    font-weight: 700;
}

.jeu-registre-visionneuse-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;
}

.jeu-registre-visionneuse-actions .jeu-registre-souvenir-enregistrer {
    flex: 1 1 100%;
    min-height: 44px;
}

.jeu-registre-visionneuse-consigne {
    flex: 1 1 100%;
    margin: -0.15rem 0 0.15rem;
    color: var(--smuggler-papier);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
    opacity: 0.9;
}

.jeu-registre-visionneuse-actions .jeu-registre-souvenir-partager,
.jeu-registre-visionneuse-actions .jeu-registre-souvenir-supprimer {
    flex: 1 1 8rem;
    min-height: 44px;
}

.jeu-registre-visionneuse-actions .jeu-registre-souvenir-supprimer {
    border-color: var(--smuggler-papier);
    background: transparent;
    color: var(--smuggler-papier);
}

.jeu-registre-visionneuse-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 22rem;
    padding: 0.65rem 0.9rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
}

.jeu-registre-visionneuse-confirmation-texte {
    margin: 0;
    font-weight: 700;
}

.jeu-registre-visionneuse-confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

.jeu-registre-visionneuse-confirmation-actions .bouton {
    min-width: 5.5rem;
    min-height: 44px;
}

.jeu-registre-creature-corps {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.jeu-registre-creature-nom,
.jeu-registre-lieu-nom {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.jeu-registre-creature-inconnue .jeu-registre-creature-nom {
    color: var(--registre-doux);
    letter-spacing: 0.15em;
}

.jeu-registre-creature-lieux,
.jeu-registre-lieu-etat,
.jeu-registre-intro {
    color: var(--registre-doux);
    font-size: 0.9rem;
}

.jeu-registre-intro {
    margin-bottom: 0.75rem;
}

.jeu-registre-sous-titre {
    color: var(--registre-encre);
    font-size: 0.9rem;
    font-weight: 700;
}

.jeu-registre-notes-liste {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.jeu-registre-note-nouvelle {
    font-weight: 700;
}

.jeu-registre-note-nouvelle .etiquette {
    margin-left: 0.4rem;
}

.jeu-registre-note-a-decouvrir {
    color: var(--registre-doux);
    font-style: italic;
}

.jeu-registre-conseils {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: var(--espace);
}

.jeu-registre-conseil {
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--flamme-approche);
    border-radius: var(--rayon);
    background: var(--registre-feuille);
    font-style: italic;
}

.jeu-registre-lieu {
    align-items: center;
}

.jeu-registre-lieu-marque {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 2px dashed var(--registre-trait);
    border-radius: 50%;
}

.jeu-registre-lieu-reussi .jeu-registre-lieu-marque,
.jeu-registre-lieu-rate .jeu-registre-lieu-marque {
    border: 0;
}

.jeu-registre-lieu-reussi .jeu-registre-lieu-marque { color: var(--tampon); }
.jeu-registre-lieu-rate .jeu-registre-lieu-marque { color: var(--sablier); }

.jeu-registre-vide {
    margin: 14px 16px;
    padding: 1.5rem var(--espace);
    border: 1.5px dashed var(--registre-encre);
    border-radius: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

/* --- Registre > Règles et L'artiste (lot 3l-c, maquette S05) --- */
.jeu-registre-points9,
.jeu-registre .points9 {
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    letter-spacing: 5px;
    line-height: 1.2;
}

.jeu-registre-regles-tete,
.jeu-registre .tete {
    padding: 18px 16px 8px;
}

.jeu-registre-regles-titre {
    margin: 4px 0 0;
    font-size: 42px;
}

.jeu-registre-regles-actions {
    margin-top: 10px;
}

.jeu-registre .jeu-registre-revoir-tutoriel {
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 0;
    box-shadow: none;
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.jeu-registre-code-reprise {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1.5px dashed var(--registre-encre);
    background: var(--registre-papier);
}

.jeu-registre .jeu-registre-code-reprise-titre {
    margin: 0;
    font-family: var(--registre-police-etiquette);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.jeu-registre-code-reprise-valeur {
    letter-spacing: 0.08em;
}

.jeu-registre .jeu-registre-code-reprise-texte {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
}

.jeu-registre-regles-section,
.jeu-registre .section {
    padding: 14px 16px 4px;
}

.jeu-registre-regles-section h2,
.jeu-registre .section h2 {
    margin: 2px 0 8px;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.jeu-registre-regles-section p,
.jeu-registre .section p {
    margin: 0 0 10px;
}

.jeu-registre-regles-histoire {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.jeu-registre-regles-paragraphe {
    line-height: 1.45;
}

/* Section « Ta lanterne » : 3 petites lanternes de 40 px aux vraies couleurs des paliers (--flamme-couleur) */
.jeu-registre-lanterne-paliers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.jeu-registre-lanterne-palier {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    line-height: 1.4;
}

.jeu-registre-lanterne-icone {
    display: inline-block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.jeu-registre-lanterne-icone .lanterne {
    filter: drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 0 1px var(--lanterne-contour)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.jeu-registre-lanterne-icone .lanterne-flamme {
    transform: none;
    transition: none;
}

.jeu-registre-lanterne-pastille {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 50%;
    background-color: var(--flamme-couleur, var(--flamme-repos));
}

.jeu-registre-lanterne-texte {
    min-width: 0;
}

/* Section « Comment les approcher » */
.jeu-registre-famille-ligne,
.jeu-registre .famille-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 0;
    border: 0;
    border-bottom: var(--registre-pointille);
    background: transparent;
}

.jeu-registre-famille-ligne:first-child,
.jeu-registre .famille-ligne:first-child {
    border-top: var(--registre-pointille);
}

.jeu-registre-regle-image,
.jeu-registre .famille-ligne > img {
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
    flex: 0 0 46px;
}

.jeu-registre-famille-ligne-corps {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
}

.jeu-registre-famille-ligne-nom,
.jeu-registre .famille-ligne .nom {
    margin: 0;
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.jeu-registre-regle-description {
    line-height: 1.35;
}

.jeu-registre-regle-consigne,
.jeu-registre .famille-ligne p {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.jeu-registre-famille-ligne-boss,
.jeu-registre .famille-ligne.boss {
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: var(--registre-pointille);
    background: transparent;
    color: var(--registre-encre);
}

.jeu-registre-famille-ligne-boss .jeu-registre-famille-ligne-nom,
.jeu-registre .famille-ligne.boss .nom {
    font-size: 20px;
}

.jeu-registre-famille-ligne-boss .jeu-registre-regle-image img,
.jeu-registre-famille-ligne-boss .jeu-registre-regle-image svg,
.jeu-registre .famille-ligne.boss img {
    filter: brightness(0);
}

.jeu-registre-regle-cocon,
.jeu-registre .cocon {
    margin: 0;
    padding: 12px 0 12px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
}

/* Écran « L'artiste » : haut fixe en aplat noir + corps en HTML filtré (maquette S05) */
.jeu-registre-artiste {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 0 16px;
    white-space: normal;
}

.jeu-registre-artiste-heros,
.jeu-registre .heros {
    position: relative;
    margin: 0;
    padding: 16px 16px 18px;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.jeu-registre-artiste-photo,
.jeu-registre .heros img.photo {
    display: block;
    width: 100%;
    height: 210px;
    max-height: 210px;
    margin: 0 0 14px;
    object-fit: cover;
    object-position: center;
}

.jeu-registre-artiste-nom {
    margin: 0;
    color: var(--registre-papier);
    font-size: 46px;
    overflow-wrap: anywhere;
}

.jeu-registre-artiste-sous-titre {
    margin-top: 6px;
    color: var(--registre-papier);
    overflow-wrap: anywhere;
}

.jeu-registre-artiste-corps,
.jeu-registre .html-libre {
    padding: 4px 16px 0;
}

.jeu-registre-artiste-corps > p:first-child,
.jeu-registre .html-libre > p:first-child {
    margin-top: 14px;
}

.jeu-registre-artiste-corps h2,
.jeu-registre .html-libre h2 {
    margin: 22px 0 8px;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.jeu-registre-artiste-corps h2::before,
.jeu-registre .html-libre h2::before {
    content: "•••••••••";
    display: block;
    margin-bottom: 6px;
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 5px;
    line-height: 1.2;
}

.jeu-registre-artiste-corps p,
.jeu-registre .html-libre p {
    margin: 0 0 10px;
}

.jeu-registre-artiste-corps ol,
.jeu-registre .html-libre ol {
    margin: 4px 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.jeu-registre-artiste-corps ol li,
.jeu-registre .html-libre ol li {
    counter-increment: etape;
    position: relative;
    padding: 6px 0 8px 38px;
    border-bottom: var(--registre-pointille);
}

.jeu-registre-artiste-corps ol li::before,
.jeu-registre .html-libre ol li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 50%;
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
}

.jeu-registre-artiste-galerie,
.jeu-registre .galerie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 6px 0 12px;
}

.jeu-registre-artiste-galerie--seule {
    grid-template-columns: minmax(0, 1fr);
}

.jeu-registre-artiste-figure,
.jeu-registre .galerie figure {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: var(--registre-pointille);
    min-width: 0;
}

.jeu-registre-artiste-figure img,
.jeu-registre .galerie img {
    display: block;
    width: 100%;
    height: 150px;
    max-height: 150px;
    object-fit: contain;
    object-position: center;
}

.jeu-registre-artiste-legende,
.jeu-registre .galerie figcaption {
    margin-top: 4px;
    font-family: var(--registre-police-etiquette);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.jeu-registre-artiste-corps blockquote,
.jeu-registre .html-libre blockquote {
    margin: 16px -16px;
    padding: 16px;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.jeu-registre-artiste-corps blockquote > strong:first-child,
.jeu-registre-artiste-corps blockquote > p:first-child > strong:first-child,
.jeu-registre .html-libre blockquote > strong:first-child,
.jeu-registre .html-libre blockquote > p:first-child > strong:first-child {
    display: block;
    margin-bottom: 6px;
    font-family: var(--registre-police-titre);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.jeu-registre-artiste-corps ul,
.jeu-registre .html-libre ul {
    margin: 6px 0 10px;
    padding-left: 18px;
}

.jeu-registre-artiste-corps ul.liens,
.jeu-registre-artiste-liens,
.jeu-registre .liens {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.jeu-registre-artiste-liens a,
.jeu-registre .liens a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    padding: 6px 0;
    border-bottom: var(--registre-pointille);
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.jeu-registre-artiste-liens li:first-child a,
.jeu-registre .liens li:first-child a {
    border-top: var(--registre-pointille);
}

.jeu-registre-artiste-liens a::after,
.jeu-registre .liens a::after {
    content: "→";
    flex: 0 0 auto;
}

/* --- Écran « J'ai trouvé un ballon orange » (lot 3c) : scan du sceau 8th Wall
   avec cadre portrait 3:4, saisie du mot de secours et résultat (+ 5 bonbons !). */
.jeu-ballon-ecran {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 42;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--securite-haut) + 0.75rem) calc(var(--securite-droite) + 0.75rem) calc(var(--securite-bas) + 0.75rem) calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.82);
}

.jeu-ballon-ecran[hidden] {
    display: none;
}

.jeu-ballon-ecran:focus {
    outline: none;
}

.jeu-ballon-boite-modale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
    max-height: 100%;
    padding: 1rem;
    overflow-y: auto;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-jeu);
}

.jeu-ballon-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.jeu-ballon-titre {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.jeu-ballon-scan,
.jeu-ballon-secours-bloc,
.jeu-ballon-mot-bloc,
.jeu-ballon-resultat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: center;
}

.jeu-ballon-scan[hidden],
.jeu-ballon-secours-bloc[hidden],
.jeu-ballon-mot-bloc[hidden],
.jeu-ballon-resultat[hidden] {
    display: none;
}

.jeu-ballon-consigne {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.jeu-ballon-cadre {
    position: relative;
    width: min(74vw, 17.5rem);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--smuggler-encre);
    box-shadow: var(--ombre-jeu);
}

.jeu-ballon-toile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jeu-ballon-repere {
    position: absolute;
    top: 8%;
    right: 8%;
    bottom: 8%;
    left: 8%;
    border: 2px dashed rgba(241, 236, 224, 0.85);
    border-radius: 6px;
    pointer-events: none;
}

.jeu-ballon-mot-saisie {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.2rem;
}

/* Lot 3c-r : mode « couleur » — vidéo de la caméra du jeu (même cadre 3:4 que
   le scan du sceau), cadre central de 40 % (de 30 % à 70 %) où l'orange est
   compté, et ligne de test en direct (mode test seulement). */
.jeu-ballon-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jeu-ballon-viseur-couleur {
    position: absolute;
    top: 30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
    border: 3px solid rgba(241, 236, 224, 0.92);
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.55);
    pointer-events: none;
}

.jeu-ballon-test-couleur {
    width: 100%;
    margin: 0;
    font-family: var(--registre-police-etiquette, monospace);
    font-size: 0.85rem;
    text-align: center;
}

.jeu-ballon-test-couleur[hidden] {
    display: none;
}

.jeu-ballon-secours-lien {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.35rem 0.65rem;
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon);
    background: rgba(251, 250, 247, 0.9);
    color: var(--smuggler-encre);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

.jeu-ballon-secours-lien[hidden] {
    display: none;
}

.jeu-ballon-secours-bouton {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.jeu-ballon-mot-bloc .jeu-ballon-mot-saisie {
    width: 100%;
    min-height: 44px;
}

.jeu-ballon-resultat-icone {
    width: 4.5rem;
    height: 4.5rem;
    color: var(--carte-encre);
}

.jeu-ballon-resultat-bonbons {
    margin: 0;
    color: var(--bonbon);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
}

.jeu-ballon-resultat-points {
    margin: 0;
    color: var(--texte);
    font-size: 1.15rem;
    font-weight: 700;
}

#jeu-ballon-message {
    width: 100%;
    margin: 0;
    text-align: center;
}

/* --- Salle de retour sur la carte et écran d'éclosion des cocons (lots 3p, 5b-a) --- */
.jeu-salle-boite {
    background: transparent;
    border: 0;
    pointer-events: none;
}

.jeu-salle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 52px;
    height: 52px;
    color: var(--carte-encre);
    filter: drop-shadow(0 0 2px var(--surface)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

.jeu-salle-heure-trouble .jeu-salle-icone {
    animation: jeu-salle-pulsation 1.3s ease-in-out infinite;
}

.jeu-salle-heure-trouble .jeu-salle-nom {
    background: var(--smuggler-accent);
    color: var(--smuggler-papier);
}

.jeu-salle-onde {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border: 3px solid var(--smuggler-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    animation: jeu-salle-onde 2.2s ease-out infinite;
}

.jeu-salle-onde-2 {
    animation-delay: 1.1s;
}

@keyframes jeu-salle-pulsation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}

@keyframes jeu-salle-onde {
    0% {
        transform: translate(-50%, -50%) scale(0.55);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.1);
        opacity: 0;
    }
}

/* Lot 2u-a (D-211) : #jeu-rappel-retour (bandeau d'heure trouble) est masqué,
   remplacé par la case Temps du ruban du bas (conservé dans le DOM et le CSS). */
.jeu-rappel-retour,
#jeu-rappel-retour,
#jeu-bandeau-heure-trouble {
    display: none !important;
}

.jeu-rappel-retour[hidden] {
    display: none;
}

.jeu-salle-ecran {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--securite-haut) + 0.75rem) calc(var(--securite-droite) + 0.75rem) 0.75rem calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.85);
}

.jeu-salle-ecran[hidden] {
    display: none;
}

.jeu-salle-ecran:focus {
    outline: none;
}

.jeu-salle-ecran-boite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 22rem;
    max-height: 100%;
    padding: 1.25rem 1.1rem;
    overflow-y: auto;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-jeu);
    text-align: center;
}

.jeu-salle-ecran-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--carte-encre);
}

.jeu-salle-ecran-visuel[hidden],
.jeu-salle-ecran-visuel:empty {
    display: none;
}

.jeu-salle-ecran-visuel .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-salle-ecran-visuel:has(> .jeu-salle-pastille-trouve) {
    width: var(--s08-salle-pastille-taille);
    height: var(--s08-salle-pastille-taille);
}

.jeu-salle-ecran-visuel .jeu-pastille-trouve,
.jeu-salle-pastille-trouve {
    width: 100%;
    height: 100%;
}

.jeu-salle-ecran-titre {
    margin: 0;
    font-family: var(--registre-police-titre);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.jeu-salle-ecran-equipe {
    margin: 0;
    color: var(--texte-doux);
    font-size: 0.95rem;
    font-weight: 700;
}

.jeu-salle-ecran-equipe[hidden] {
    display: none;
}

.jeu-salle-ecran-total {
    margin: 0.15rem 0;
    color: var(--tampon);
    font-family: var(--registre-police-titre);
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.jeu-salle-ecran-bonus {
    margin: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--registre-feuille);
    border: 1px dashed var(--registre-trait);
    color: var(--texte);
    font-size: 0.9rem;
    font-weight: 700;
}

.jeu-salle-ecran-bonus[hidden] {
    display: none;
}

.jeu-salle-ecran-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
}

.jeu-salle-ecran-actions[hidden] {
    display: none;
}

.jeu-salle-ecran-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--registre-feuille);
}

.jeu-salle-ecran-confirmation[hidden] {
    display: none;
}

.jeu-salle-ecran-confirmation-texte {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.jeu-salle-ecran-confirmation-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.jeu-salle-ecran-confirmation-boutons .bouton {
    flex: 1 1 7rem;
}

.jeu-salle-icone {
    display: block;
    width: 32px;
    height: 32px;
}

.jeu-salle-icone .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

/* Lot 5l (D-191) : fenêtre « Bravo, explorateur ! » */
.jeu-ballon-confirme {
    z-index: 30;
}

.jeu-ballon-confirme-texte {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
}

/* Lot 5l (D-198) : page de félicitations « Mission accomplie ! » au style du registre */
.jeu-salle-ecran.jeu-salle-ecran--deposee {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--registre-encre);
    font-family: var(--registre-police-texte);
}

.jeu-salle-ecran.jeu-salle-ecran--deposee.jeu-registre-sans-quadrillage {
    background-image: none;
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-boite {
    max-width: 30rem;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: calc(var(--securite-haut) + 1.25rem) calc(var(--securite-droite) + 1rem) calc(var(--securite-bas) + 1rem) calc(var(--securite-gauche) + 1rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--registre-encre);
    box-shadow: none;
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-titre {
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-equipe {
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-total {
    color: var(--registre-accent, var(--tampon));
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-bonus {
    border-radius: 0;
    border: 1.5px dashed var(--registre-encre);
    background: var(--registre-papier);
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
}

.jeu-salle-felicitations {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
}

.jeu-salle-felicitations[hidden] {
    display: none;
}

.jeu-salle-felicitations-texte {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-texte);
    font-size: 0.95rem;
    line-height: 1.5;
}

.jeu-salle-felicitations-encart {
    padding: 1rem 1.1rem;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.jeu-salle-felicitations-encart-titre {
    margin: 0 0 0.4rem;
    color: var(--registre-papier);
    font-family: var(--registre-police-titre);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jeu-salle-felicitations-encart-texte {
    margin: 0;
    color: var(--registre-papier);
    font-family: var(--registre-police-texte);
    font-size: 0.9rem;
    line-height: 1.48;
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-ecran-actions {
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: var(--registre-pointille);
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-enregistrer-photos,
.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-voir-carnet {
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--registre-encre);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-enregistrer-photos {
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.jeu-salle-ecran.jeu-salle-ecran--deposee .jeu-salle-voir-carnet {
    background: var(--registre-papier);
    color: var(--registre-encre);
}

.jeu-salle-photos-message {
    margin: 0;
    color: var(--registre-encre);
    font-size: 0.85rem;
}

.jeu-salle-nom {
    padding: 0 0.3rem;
    border-radius: 4px;
    background: rgba(243, 238, 225, 0.92);
    color: var(--carte-encre);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

/* Lot 5l-c3 : ligne du mode test sous le point de la salle (D-141, D-198). */
.jeu-salle-diagnostic {
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    max-width: 240px;
    margin-top: 2px;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: rgba(243, 238, 225, 0.92);
    color: var(--carte-encre);
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    transform: translateX(-50%);
}

/* --- Tableau des scores au style du registre (lots 2t, 5c, D-194, D-199) --- */
.jeu-scores-ecran {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 44;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--securite-haut) + 0.75rem) calc(var(--securite-droite) + 0.75rem) calc(var(--securite-bas) + 0.75rem) calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.85);
}

.jeu-scores-ecran[hidden] {
    display: none;
}

.jeu-scores-ecran:focus {
    outline: none;
}

.jeu-scores-boite {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    width: 100%;
    max-width: 24rem;
    max-height: 100%;
    padding: 1.25rem 1.1rem;
    overflow: hidden;
    border: var(--trait-fort) solid var(--registre-encre);
    border-radius: var(--rayon);
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--registre-encre);
    font-family: var(--registre-police-texte);
    box-shadow: var(--ombre-jeu);
    text-align: center;
}

.jeu-scores-ecran.jeu-registre-sans-quadrillage .jeu-scores-boite {
    background-image: none;
}

.jeu-scores-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding-bottom: 0.6rem;
    border-bottom: var(--registre-pointille);
}

.jeu-scores-titre {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jeu-scores-hors-ligne {
    margin: 0;
    padding: 0.15rem 0.6rem;
    border: 1.5px dashed var(--registre-encre);
    border-radius: 999px;
    background: var(--registre-papier);
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jeu-scores-hors-ligne[hidden] {
    display: none;
}

.jeu-scores-en-cours {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.25rem;
}

.jeu-scores-en-cours[hidden] {
    display: none;
}

.jeu-scores-equipe {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jeu-scores-equipe[hidden] {
    display: none;
}

.jeu-scores-rang {
    margin: 0.15rem 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: 2.55rem;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.jeu-scores-total {
    margin: 0.1rem 0;
    color: var(--registre-accent, var(--tampon));
    font-family: var(--registre-police-titre);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.jeu-scores-attente {
    margin: 0.35rem 0 0;
    padding-top: 0.75rem;
    border-top: var(--registre-pointille);
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 0.92rem;
    line-height: 1.4;
}

.jeu-scores-liste {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 58vh;
    max-height: 58dvh;
    margin: 0;
    padding: 0.15rem 0.15rem;
    overflow-y: auto;
    list-style: none;
    text-align: left;
}

.jeu-scores-liste[hidden] {
    display: none;
}

.jeu-scores-ligne {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-bottom: var(--registre-pointille);
    border-radius: 6px;
    color: var(--registre-encre);
}

.jeu-scores-ligne-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 1.5px solid var(--registre-encre);
    border-radius: 999px;
    background: var(--registre-papier);
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.jeu-scores-ligne-corps {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.jeu-scores-ligne-nom {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--registre-police-etiquette);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.jeu-scores-ligne-etat {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px dashed var(--registre-encre);
    border-radius: 999px;
    font-family: var(--registre-police-etiquette);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.jeu-scores-ligne-etat--deposee {
    border-style: solid;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

/* Lot 5c-c1 (D-202) : 5e onglet « Scores » dans le registre (#jeu-registre) */
.jeu-registre-scores {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

.jeu-registre-scores-meta {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 7px 4px;
}

.jeu-registre-scores-maj[hidden] {
    display: none;
}

.jeu-registre-scores-corps {
    padding: 0;
}

.jeu-registre .jeu-registre-scores-liste {
    max-height: none;
    overflow: visible;
    padding: 10px 16px 4px;
}

.jeu-scores-ligne-points {
    flex: 0 0 auto;
    font-family: var(--registre-police-etiquette);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.jeu-scores-ligne--podium {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border: 1.5px solid var(--registre-encre);
    background: rgba(251, 250, 247, 0.92);
}

.jeu-scores-ligne--podium .jeu-scores-ligne-nom {
    font-family: var(--registre-police-titre);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.jeu-scores-ligne--podium .jeu-scores-ligne-points {
    font-family: var(--registre-police-titre);
    font-size: 1.2rem;
    font-weight: 900;
}

.jeu-scores-ligne--rang-1 .jeu-scores-ligne-rang {
    width: 2.35rem;
    height: 2.35rem;
    flex-basis: 2.35rem;
    border-width: 2px;
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-size: 1.35rem;
}

.jeu-scores-ligne--rang-2 .jeu-scores-ligne-rang,
.jeu-scores-ligne--rang-3 .jeu-scores-ligne-rang {
    border-width: 2px;
    font-size: 1.25rem;
}

.jeu-scores-ligne--mon-equipe {
    border: 2.5px solid var(--registre-accent, var(--tampon));
    background: rgba(230, 51, 111, 0.12);
    box-shadow: 0 0 0 1px var(--registre-papier) inset;
}

.jeu-scores-ligne--mon-equipe .jeu-scores-ligne-nom,
.jeu-scores-ligne--mon-equipe .jeu-scores-ligne-points {
    font-weight: 700;
}

.jeu-scores-ligne--mon-equipe:not(.jeu-scores-ligne--rang-1) .jeu-scores-ligne-rang {
    border-color: var(--registre-accent, var(--tampon));
    background: var(--registre-accent, var(--tampon));
    color: var(--registre-papier);
}

.jeu-scores-pied {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0.25rem;
}

.jeu-scores-pied .bouton {
    width: 100%;
    min-height: 44px;
    border-color: var(--registre-encre);
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-family: var(--registre-police-titre);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jeu-eclosion-ecran {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 44;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--securite-haut) + 0.75rem) calc(var(--securite-droite) + 0.75rem) calc(var(--securite-bas) + 0.75rem) calc(var(--securite-gauche) + 0.75rem);
    background: rgba(20, 20, 20, 0.85);
}

.jeu-eclosion-ecran[hidden] {
    display: none;
}

.jeu-eclosion-ecran:focus {
    outline: none;
}

.jeu-eclosion-boite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
    max-height: 100%;
    padding: 1.1rem 1rem;
    overflow-y: auto;
    border: var(--trait-fort) solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-jeu);
    text-align: center;
}

.jeu-eclosion-titre {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.jeu-eclosion-progression {
    margin: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--registre-papier);
    color: var(--registre-doux);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.jeu-eclosion-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0;
}

.jeu-eclosion-scene[hidden] {
    display: none;
}

.jeu-eclosion-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    color: var(--carte-encre);
}

.jeu-eclosion-visuel .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-eclosion-cocon-tremble {
    animation: jeu-eclosion-tremble 0.14s ease-in-out infinite alternate;
}

.jeu-eclosion-cocon-ouvre {
    animation: jeu-eclosion-ouvre 0.24s ease-out forwards;
}

.jeu-eclosion-famille-revelee {
    animation: jeu-eclosion-revelation 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes jeu-eclosion-tremble {
    0% { transform: translate(-4px, 1px) rotate(-7deg) scale(1.02); }
    50% { transform: translate(4px, -2px) rotate(7deg) scale(0.98); }
    100% { transform: translate(-3px, -1px) rotate(-5deg) scale(1.04); }
}

@keyframes jeu-eclosion-ouvre {
    0% { transform: scale(1); opacity: 1; }
    60% { transform: scale(1.32); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes jeu-eclosion-revelation {
    from { opacity: 0; transform: scale(0.35) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.jeu-eclosion-texte {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
}

.jeu-eclosion-points {
    margin: 0;
    color: var(--tampon);
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.jeu-eclosion-liste {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-eclosion-liste[hidden] {
    display: none;
}

.jeu-eclosion-ligne {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--registre-trait);
    border-radius: var(--rayon);
    background: var(--registre-feuille);
    text-align: left;
}

.jeu-eclosion-ligne-embleme {
    display: block;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
}

.jeu-eclosion-ligne-embleme .jeu-element {
    display: block;
    width: 100%;
    height: 100%;
}

.jeu-eclosion-ligne-nom {
    flex: 1 1 auto;
    font-weight: 700;
}

.jeu-eclosion-ligne-points {
    flex: 0 0 auto;
    color: var(--tampon);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.jeu-eclosion-total {
    width: 100%;
    margin: 0;
    padding-top: 0.45rem;
    border-top: 2px solid var(--bordure);
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- Essai de reconnaissance du porche par 8th Wall (lot 3o-r-a, mode test uniquement) --- */
.jeu-essai-porche {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 46;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--smuggler-encre);
    color: var(--smuggler-papier);
}

.jeu-essai-porche[hidden] {
    display: none;
}

.jeu-essai-porche:focus {
    outline: none;
}

.jeu-essai-porche-toile {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jeu-essai-porche-scene {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}

.jeu-essai-porche-cadre {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform, opacity;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

.jeu-essai-porche-cadre[hidden] {
    display: none;
}

.jeu-essai-porche-cadre--perdu {
    opacity: 0.42;
}

.jeu-essai-porche-cadre .jeu-element,
.jeu-essai-porche-cadre .jeu-element img,
.jeu-essai-porche-cadre .jeu-element svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Lot 3o-r-a-c1 : contour projeté de la cible 8th Wall (diagnostic du mode test),
   dessiné directement en pixels CSS de l'écran d'essai, sans transformation. */
.jeu-essai-porche-contour {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.jeu-essai-porche-contour[hidden] {
    display: none;
}

.jeu-essai-porche-contour-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jeu-essai-porche-contour-forme {
    fill: none;
    stroke: #39ff14;
    stroke-width: 3;
    stroke-linejoin: round;
}

.jeu-essai-porche-haut {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: calc(var(--securite-haut) + 0.5rem) calc(var(--securite-droite) + 0.6rem) 0.5rem calc(var(--securite-gauche) + 0.6rem);
    background: rgba(17, 17, 17, 0.94);
    border-bottom: 2px solid #fbfaf7;
}

.jeu-essai-porche-mesures {
    flex: 1 1 auto;
    margin: 0;
    color: #fbfaf7;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    /* Lot 3o-r-a-c2 : la ligne « Accrochage » passe à la ligne (\n dans le texte) */
    white-space: pre-line;
}

.jeu-essai-porche-mesures[data-etat-suivi="reconnu"] {
    color: #b8f28b;
}

.jeu-essai-porche-mesures[data-etat-suivi="perdu"] {
    color: #ffd166;
}

.jeu-essai-porche-fermer {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0.35rem 0.85rem;
    border: 2px solid #fbfaf7;
    background: #fbfaf7;
    color: #111111;
    font-size: 0.9rem;
    font-weight: 800;
}

/* Lot 3o-r-a-c1 : case « Afficher le contour de la cible », seule sur la
   seconde ligne de la barre du haut (zone de toucher 44 px via .jeu-test-exacts). */
.jeu-essai-porche-case {
    flex: 1 0 100%;
    margin: 0;
    color: #fbfaf7;
    font-size: 0.88rem;
    font-weight: 800;
}

/* Lot 3o-r-c (D-181) : curseurs de réglage sur place dans l'essai du porche (mode test). */
.jeu-essai-porche-reglages {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem calc(var(--securite-droite) + 0.65rem) calc(var(--securite-bas) + 0.5rem) calc(var(--securite-gauche) + 0.65rem);
    background: rgba(17, 17, 17, 0.92);
    border-top: 2px solid #fbfaf7;
}

.jeu-essai-porche-curseur {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 4.4rem;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.65rem;
    margin: 0;
    color: #fbfaf7;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
}

.jeu-essai-porche-curseur-libelle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jeu-essai-porche-curseur input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: #ffd166;
}

.jeu-essai-porche-curseur-valeur {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jeu-essai-porche-consigne {
    position: absolute;
    left: 50%;
    bottom: calc(var(--securite-bas) + 10.5rem);
    z-index: 2;
    margin: 0;
    padding: 0.55rem 1.15rem;
    border: 2px solid #fbfaf7;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.94);
    color: #fbfaf7;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.jeu-essai-porche-consigne[hidden] {
    display: none;
}

.jeu-essai-porche-message {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 50%;
    z-index: 3;
    max-width: 24rem;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .lanterne-flamme {
        transition: none;
    }
    .jeu-signal-texte,
    .jeu-rencontre-creature,
    .jeu-denouement-marque,
    .jeu-scene-preparee,
    .jeu-scene-corps,
    .jeu-mega-creature-corps.jeu-mega-apparition,
    .jeu-scene-respiration,
    .jeu-scene-fleche,
    .jeu-scene-lanterne,
    .jeu-registre-creature-consignee .jeu-registre-creature-image > .jeu-element,
    .jeu-registre-creature-consignee .jeu-registre-corps-dessin > .jeu-element,
    .jeu-registre-creature-consignee .jeu-registre-creature-tampon,
    .jeu-registre-creature-consignee .jeu-registre-monstre-tampon,
    .jeu-photo-contour,
    .jeu-photo-developpement .jeu-photo-flash,
    .jeu-salle-heure-trouble .jeu-salle-icone,
    .jeu-salle-onde,
    .jeu-eclosion-cocon-tremble,
    .jeu-eclosion-cocon-ouvre,
    .jeu-eclosion-famille-revelee {
        animation: none !important;
    }
    .jeu-scene-video,
    .jeu-scene-decor,
    .jeu-scene-lanterne {
        transition: none;
    }
}

/* --- Écran de la salle (/pages/salle.php, lot 6a, D-200) : format 16:9 plein
   écran lisible à 3 m (1280 × 720 à 1920 × 1080) au style du registre --- */
.salle-ecran {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--registre-papier);
    background-image: var(--registre-quadrillage-image);
    background-size: var(--registre-quadrillage-pas) var(--registre-quadrillage-pas);
    color: var(--registre-encre);
    font-family: var(--registre-police-texte);
    user-select: none;
}

.salle-ecran.jeu-registre-sans-quadrillage {
    background-image: none;
}

.salle-scene {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.75rem, 1.8vh, 1.5rem);
    width: 100%;
    height: 100%;
    max-width: calc(100dvh * 16 / 9);
    margin: 0 auto;
    padding: clamp(0.85rem, 2.2vh, 2rem) clamp(1.25rem, 2.8vw, 2.75rem);
    box-sizing: border-box;
}

.salle-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex: 0 0 auto;
    padding-bottom: clamp(0.5rem, 1.2vh, 1rem);
    border-bottom: 3px solid var(--registre-encre);
}

.salle-marque {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
    min-width: 0;
}

.salle-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.salle-logo[hidden] {
    display: none;
}

.salle-logo-image {
    display: block;
    width: auto;
    height: clamp(3.2rem, 7.4vh, 5.4rem);
    max-width: clamp(6rem, 13vw, 12rem);
    object-fit: contain;
    transform: rotate(-2deg);
}

.salle-marque-textes {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.salle-sur-titre {
    margin: 0;
    color: var(--registre-accent, var(--tampon));
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.82rem, 1.45vh, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.salle-titre {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.9rem, 4.2vh, 3.5rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salle-entete-droite {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.salle-fin {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.35rem);
    padding: clamp(0.35rem, 0.85vh, 0.7rem) clamp(0.85rem, 1.6vw, 1.35rem);
    border: 2.5px solid var(--registre-encre);
    background: var(--registre-encre);
    color: var(--registre-papier);
    box-shadow: 4px 4px 0 var(--registre-accent, var(--tampon));
}

.salle-fin[hidden] {
    display: none;
}

.salle-fin-texte {
    margin: 0;
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.9rem, 1.65vh, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.salle-fin-rebours {
    margin: 0;
    padding-left: clamp(0.65rem, 1.2vw, 1rem);
    border-left: 2px dotted var(--registre-papier);
    color: var(--registre-papier);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.8rem, 3.8vh, 3.1rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.salle-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.salle-hors-ligne {
    padding: 0.25rem 0.65rem;
    border: 1.5px dashed var(--registre-accent, var(--tampon));
    background: var(--registre-papier);
    color: var(--registre-accent, var(--tampon));
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.75rem, 1.25vh, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.salle-hors-ligne[hidden] {
    display: none;
}

.salle-bouton-discret {
    min-height: 44px;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--registre-encre);
    background: rgba(251, 250, 247, 0.88);
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.75rem, 1.25vh, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.78;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.salle-bouton-discret:hover,
.salle-bouton-discret:focus-visible {
    opacity: 1;
}

.salle-bouton-discret[aria-pressed="true"] {
    opacity: 1;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.salle-bouton-discret[hidden] {
    display: none;
}

.salle-en-cours {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.8vh, 1.5rem);
    flex: 1 1 auto;
    min-height: 0;
}

.salle-en-cours[hidden] {
    display: none;
}

.salle-compteurs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
    flex: 0 0 auto;
}

.salle-compteur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: clamp(0.65rem, 1.6vh, 1.35rem) 0.75rem;
    border: 2.5px solid var(--registre-encre);
    background: var(--registre-papier);
    box-shadow: 4px 4px 0 var(--registre-encre);
    text-align: center;
}

.salle-compteur-valeur {
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(2.5rem, 6vh, 4.9rem);
    font-weight: 900;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
}

.salle-compteur-libelle {
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.85rem, 1.55vh, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.salle-grille-basse {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: clamp(0.85rem, 1.8vw, 1.65rem);
    flex: 1 1 auto;
    min-height: 0;
}

.salle-panneau-meta {
    flex: 0 0 auto;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.85rem, 1.55vh, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.salle-panneau {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(0.75rem, 1.8vh, 1.4rem) clamp(0.95rem, 1.8vw, 1.6rem);
    border: 2.5px solid var(--registre-encre);
    background: var(--registre-papier);
    box-shadow: 4px 4px 0 var(--registre-encre);
}

.salle-panneau-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding-bottom: clamp(0.4rem, 0.9vh, 0.75rem);
    border-bottom: var(--registre-pointille);
}

.salle-panneau-titre {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.45rem, 3vh, 2.35rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.salle-captures-vide,
.salle-classement-vide {
    margin: auto 0;
    padding: 1.5rem 1rem;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(1rem, 1.9vh, 1.4rem);
    font-weight: 700;
    text-align: center;
}

.salle-captures-vide[hidden],
.salle-classement-vide[hidden] {
    display: none;
}

.salle-captures-liste {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: clamp(0.25rem, 0.6vh, 0.5rem) 0 0;
    overflow: hidden;
    list-style: none;
}

.salle-captures-liste[hidden] {
    display: none;
}

.salle-capture-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    padding: clamp(0.32rem, 0.75vh, 0.62rem) 0;
    border-bottom: var(--registre-pointille);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.98rem, 1.95vh, 1.48rem);
    line-height: 1.25;
}

.salle-capture-ligne:last-child {
    border-bottom: 0;
}

.salle-capture-phrase {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salle-capture-equipe {
    font-family: var(--registre-police-titre);
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.salle-capture-creature {
    color: var(--registre-accent, var(--tampon));
    font-family: var(--registre-police-titre);
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.salle-capture-heure {
    flex: 0 0 auto;
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.salle-bloc-pieuvre {
    justify-content: space-between;
}

.salle-bloc-pieuvre[data-etat="reveillee"] {
    background: var(--registre-encre);
    color: var(--registre-papier);
    box-shadow: 5px 5px 0 var(--registre-accent, var(--tampon));
}

.salle-bloc-pieuvre[data-etat="reveillee"] .salle-panneau-entete {
    border-bottom-color: var(--registre-papier);
}

.salle-bloc-pieuvre[data-etat="reveillee"] .salle-panneau-titre,
.salle-bloc-pieuvre[data-etat="reveillee"] .salle-pieuvre-etat,
.salle-bloc-pieuvre[data-etat="reveillee"] .salle-pieuvre-detail {
    color: var(--registre-papier);
}

.salle-bloc-pieuvre[data-etat="vaincue"] {
    border-color: var(--registre-accent, var(--tampon));
    box-shadow: 5px 5px 0 var(--registre-accent, var(--tampon));
}

.salle-bloc-pieuvre[data-etat="vaincue"] .salle-pieuvre-etat {
    color: var(--registre-accent, var(--tampon));
}

.salle-pieuvre-corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.45rem, 1.2vh, 1rem);
    flex: 1 1 auto;
    padding: 0.75rem;
    text-align: center;
}

.salle-pieuvre-etat {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(2.35rem, 5.4vh, 4.4rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.salle-pieuvre-detail {
    margin: 0;
    padding: 0.35rem 0.95rem;
    border: 2px dashed currentColor;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(1rem, 2.05vh, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Révélation du classement : podium animé puis liste complète --- */
.salle-revelation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.85rem, 2vw, 1.75rem);
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.salle-revelation.salle-revelation--complet {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
}

.salle-revelation[hidden] {
    display: none;
}

.salle-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.65rem, 1.4vw, 1.25rem);
    height: 100%;
    min-height: 0;
    padding: clamp(0.5rem, 1.5vh, 1.25rem) clamp(0.25rem, 0.8vw, 0.75rem) 0;
}

.salle-podium-marche {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 1.25, 0.35, 1);
}

.salle-podium-marche--cachee,
.salle-podium-marche--absente {
    opacity: 0;
    transform: translateY(2.2rem) scale(0.92);
    pointer-events: none;
}

.salle-podium-marche--visible:not(.salle-podium-marche--absente) {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.salle-podium-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.3rem, 0.8vh, 0.65rem);
    padding: clamp(0.65rem, 1.5vh, 1.25rem) clamp(0.5rem, 1vw, 0.95rem);
    border: 2.5px solid var(--registre-encre);
    border-bottom: 0;
    background: var(--registre-papier);
    text-align: center;
}

.salle-podium-marche--1 .salle-podium-carte {
    border-width: 3px;
    border-color: var(--registre-accent, var(--tampon));
    box-shadow: 0 -4px 0 var(--registre-encre);
}

.salle-podium-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(2.6rem, 5.5vh, 4.4rem);
    height: clamp(2.6rem, 5.5vh, 4.4rem);
    padding: 0 0.5rem;
    border: 2.5px solid var(--registre-encre);
    border-radius: 999px;
    background: var(--registre-papier);
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.35rem, 3vh, 2.35rem);
    font-weight: 900;
    line-height: 1;
}

.salle-podium-marche--1 .salle-podium-rang {
    border-color: var(--registre-accent, var(--tampon));
    background: var(--registre-accent, var(--tampon));
    color: var(--registre-papier);
    font-size: clamp(1.6rem, 3.5vh, 2.75rem);
}

.salle-podium-nom {
    margin: 0;
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.35rem, 2.8vh, 2.25rem);
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.salle-podium-marche--1 .salle-podium-nom {
    font-size: clamp(1.55rem, 3.3vh, 2.65rem);
}

.salle-podium-points {
    margin: 0;
    color: var(--registre-accent, var(--tampon));
    font-family: var(--registre-police-etiquette);
    font-size: clamp(1rem, 2vh, 1.55rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.salle-podium-socle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid var(--registre-encre);
    background: var(--registre-encre);
    color: var(--registre-papier);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.8rem, 4vh, 3.2rem);
    font-weight: 900;
}

.salle-podium-marche--1 .salle-podium-socle {
    height: clamp(5.5rem, 19vh, 11.5rem);
    background: var(--registre-accent, var(--tampon));
    border-color: var(--registre-encre);
}

.salle-podium-marche--2 .salle-podium-socle {
    height: clamp(4rem, 13.5vh, 8.2rem);
}

.salle-podium-marche--3 .salle-podium-socle {
    height: clamp(2.8rem, 9.5vh, 5.8rem);
}

.salle-classement-conteneur {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.salle-classement-conteneur--cache {
    display: none;
    opacity: 0;
    transform: translateX(1.5rem);
}

.salle-classement-conteneur--visible {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.salle-classement-liste {
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 0.75vh, 0.6rem);
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: clamp(0.45rem, 1vh, 0.85rem) 0.2rem 0.2rem;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.salle-classement-liste[hidden] {
    display: none;
}

.salle-classement-ligne {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1.2vw, 1.15rem);
    padding: clamp(0.45rem, 1vh, 0.8rem) clamp(0.65rem, 1.2vw, 1.1rem);
    border-bottom: var(--registre-pointille);
    color: var(--registre-encre);
}

.salle-classement-ligne--podium {
    border: 2px solid var(--registre-encre);
    background: rgba(251, 250, 247, 0.94);
}

.salle-classement-ligne--rang-1 {
    border-color: var(--registre-accent, var(--tampon));
    box-shadow: 3px 3px 0 var(--registre-encre);
}

.salle-classement-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(2.4rem, 4.6vh, 3.6rem);
    width: clamp(2.4rem, 4.6vh, 3.6rem);
    height: clamp(2.4rem, 4.6vh, 3.6rem);
    border: 2px solid var(--registre-encre);
    border-radius: 999px;
    background: var(--registre-papier);
    color: var(--registre-encre);
    font-family: var(--registre-police-titre);
    font-size: clamp(1.1rem, 2.2vh, 1.75rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.salle-classement-ligne--rang-1 .salle-classement-rang {
    border-color: var(--registre-accent, var(--tampon));
    background: var(--registre-accent, var(--tampon));
    color: var(--registre-papier);
}

.salle-classement-nom {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--registre-police-titre);
    font-size: clamp(1.2rem, 2.4vh, 1.95rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salle-classement-etat {
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    border: 1.5px dashed var(--registre-encre);
    border-radius: 999px;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(0.75rem, 1.35vh, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.salle-classement-etat--deposee {
    border-style: solid;
    background: var(--registre-encre);
    color: var(--registre-papier);
}

.salle-classement-points {
    flex: 0 0 auto;
    color: var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: clamp(1.05rem, 2.05vh, 1.65rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.salle-classement-ligne--podium .salle-classement-points {
    color: var(--registre-accent, var(--tampon));
}

/* --- Lot 4ag (D-208) / Lot 2u-b (D-212) : Messagerie organisateur ↔ équipes --- */

.jeu-message-orga {
    z-index: 32;
    cursor: pointer;
}

.jeu-message-orga-boite {
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: var(--s08-filet);
    border-radius: 0;
    background: var(--s08-bande-papier);
    color: var(--s08-bande-encre);
    font-family: var(--s08-bande-police);
    box-shadow: var(--s08-bande-ombre);
    text-align: left;
    cursor: pointer;
}

.jeu-message-orga .jeu-salle-ecran-titre {
    display: inline-block;
    margin: 0;
    padding: var(--s08-etiquette-marge-interieure);
    background: var(--s08-etiquette-fond);
    color: var(--s08-etiquette-texte);
    font-family: var(--s08-etiquette-police);
    font-size: var(--s08-etiquette-taille);
    font-weight: var(--s08-etiquette-graisse);
    text-transform: var(--s08-etiquette-casse);
    letter-spacing: var(--s08-etiquette-espacement);
    line-height: 1.25;
}

.jeu-message-orga-texte {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--s08-bande-encre);
    font-family: var(--s08-bande-police);
    font-size: var(--s08-bande-taille);
    font-weight: var(--s08-bande-graisse);
    line-height: var(--s08-bande-interligne);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.jeu-message-orga .jeu-salle-ecran-actions {
    display: none !important;
}

.jeu-message-probleme {
    position: fixed;
    z-index: 48;
}

.jeu-message-probleme-boite {
    max-width: 24rem;
}

.jeu-message-probleme-saisie {
    width: 100%;
    min-height: 6.5rem;
    padding: 0.65rem 0.75rem;
    line-height: 1.4;
    resize: vertical;
}

.jeu-message-probleme-compteur {
    width: 100%;
    margin: -0.25rem 0 0;
    color: var(--texte-doux);
    font-family: var(--registre-police-etiquette);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.jeu-registre-messages-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jeu-registre-message-ligne {
    padding: 8px 10px;
    border: 1.5px dotted var(--registre-encre);
    background: var(--registre-papier);
}

.jeu-registre-message-ligne--orga {
    border-style: solid;
}

.jeu-registre-message-heure {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    opacity: 0.75;
}

.jeu-registre .jeu-registre-message-texte {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.jeu-registre-message-prefixe {
    font-family: var(--registre-police-etiquette);
    font-weight: 700;
}

.jeu-registre .jeu-registre-messages-vide {
    margin: 0;
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    opacity: 0.75;
}

.jeu-registre-probleme-section {
    padding-bottom: 18px;
}

.jeu-registre .jeu-registre-messages-confirmation {
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1.5px dashed var(--registre-encre);
    font-family: var(--registre-police-etiquette);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.jeu-registre .jeu-registre-messages-confirmation[hidden] {
    display: none;
}