/* ---------------------------------------------------------------------------
 * Escape Cards v2 — Feuille de style des pages JOUEUR (écran de jeu)
 * Fichier : public/assets/css/jeu.css
 * Lot     : 5.1
 * ---------------------------------------------------------------------------
 * Reprend, telles quelles, les règles que jeu.php de la v1 écrivait dans sa
 * balise <style> (fond plein écran, cadre arrondi, minuteur, boutons ronds,
 * clignotement à zéro) et les paliers de couleur de la barre de vie de
 * css/styles.css (classes .bg-levelV-*). Tout ce qui dépend du THÈME du jeu
 * (couleurs, police, image de fond) est écrit par le gabarit entete-jeu.php.
 *
 * Bootstrap 4 → 5 : « .sr-only » devient « .visually-hidden », « .close »
 * devient « .btn-close », les utilitaires « align="center" » deviennent des
 * classes « text-center » ; l'aspect à l'écran ne change pas.
 * --------------------------------------------------------------------------- */

/* Le fond du thème, fixé, plein écran, derrière tout le reste (v1). */
.fond-jeu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  z-index: -2;
}

body.page-jeu { background-color: #000; }

/* Le cadre du jeu (v1 : .cadre-Jeu). Couleurs et police : entete-jeu.php. */
.cadre-Jeu {
  position: relative;
  box-sizing: content-box;
  margin-top: 6px;
  padding: 15px;
  border-radius: 20px;
  font: normal normal 16px/1;
  text-align: center;
  text-overflow: ellipsis;
}
.cadre-Jeu h1 { font-family: inherit; font-size: 2.5rem; margin-bottom: .5rem; }

/* La zone minuteur / vie / score (v1 : .accentuation .minuteur). */
.accentuation {
  text-align: center;
  font-size: 25px;
}
.minuteur {
  border-radius: 30px;
  vertical-align: middle;
  padding: 5px;
  padding-top: 8px;
  padding-bottom: 1px;
}
.minuteur .progress { height: 1rem; background-color: #e9ecef; }

/* ---------------------------------------------------------------------------
 * Les boutons ronds (v1 : .boutonJeu).
 * ---------------------------------------------------------------------------
 * IMP-010e (20/09/2026) — L'ICÔNE EST DÉSORMAIS AU CENTRE DU CERCLE.
 *
 * Ce qui n'allait pas, et que Guillaume a vu à l'œil : l'icône était posée
 * 6 px TROP HAUT dans chaque pastille (9 px dans « Actualiser », qui est un
 * lien et non un bouton). Mesuré : 16 px de vide au-dessus, 28 px en dessous.
 *
 * Pourquoi. La v1 posait l'icône comme du TEXTE : une ligne de 60 px de haut
 * (`line-height: 1.5` × 40 px) dans une zone intérieure de 66 px. La ligne se
 * cale en haut, il reste donc 6 px inutilisés en bas — et, dans cette ligne,
 * le dessin se pose sur une LIGNE DE BASE, qui n'a aucune raison de tomber au
 * milieu du cercle. Le décalage variait même d'un bouton à l'autre selon que
 * la balise était un `<button>` ou un `<a>`.
 *
 * La correction : le bouton devient une boîte souple qui centre son contenu
 * dans les deux sens. Le centrage ne dépend plus ni de la hauteur de ligne, ni
 * de la ligne de base, ni de la nature de la balise. Mesuré après correction :
 * autant de vide au-dessus qu'en dessous, sur les six pastilles.
 *
 * `line-height: 1` remplace le 1,5 de la v1 : il ne sert plus à rien pour le
 * placement, et un interligne de 1,5 rendrait la boîte de l'icône plus haute
 * que son dessin.
 * ------------------------------------------------------------------------ */
.boutonJeu, .boutonJeuLance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  vertical-align: middle;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  text-decoration: none;
  width: 84px;
  height: 84px;
  font-size: 40px;
  text-align: center;
  line-height: 1;
}

/* Le petit bouton des crédits de la musique suit la même règle. */
.boutonMusique {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.boutonJeuLance, .boutonJeu[disabled] { cursor: not-allowed; opacity: .6; }
.boutonJeuLance:hover, .boutonJeu[disabled]:hover {
  background-color: black !important;
  color: darkred !important;
  border-color: darkred !important;
}
/* Un formulaire autour d'un bouton rond ne doit rien changer à sa place. */
.cadre-Jeu form.d-inline { display: inline; margin: 0; }

/* ---------------------------------------------------------------------------
 * LES TROIS RANGÉES DE PASTILLES — IMP-010d (20/09/2026)
 * ---------------------------------------------------------------------------
 * Ce qu'on veut : une pyramide RÉGULIÈRE. Les trois pastilles du bas occupent
 * toute la largeur du minuteur ; les deux du milieu tombent exactement entre
 * elles ; celle du haut est au centre.
 *
 * Ce qui n'allait pas. Chaque rangée avait ses propres colonnes Bootstrap, et
 * les proportions ne tombaient pas juste : mesuré sur la capture de Guillaume
 * du 20/09/2026, les deux pastilles du milieu étaient écartées de 290 px quand
 * celles du bas ne l'étaient que de 248 — la rangée du milieu était donc PLUS
 * large que celle du bas, et rien ne tombait au-dessus de rien. L'œil y lisait
 * une pyramide « presque » régulière, et c'est ce presque qui faisait désordre.
 *
 * Comment c'est réglé. Un seul écart, le même pour les trois rangées : ce qui
 * reste de la largeur une fois posées les trois pastilles du bas. Les rangées
 * sont simplement centrées. La géométrie en découle toute seule :
 *   - rangée du bas   : 3 pastilles + 2 écarts = toute la largeur ;
 *   - rangée du milieu: 2 pastilles + 1 écart, centrées — donc chacune pile au
 *     milieu de ses deux voisines du dessous, quelle que soit la largeur ;
 *   - rangée du haut  : 1 pastille, centrée.
 * Aucun nombre magique, aucun point de rupture : c'est vrai de 1920 à 390 px.
 *
 * Le plancher de 6 px évite que les pastilles se chevauchent sur un écran plus
 * étroit que 3 × 84 px. Le `font-size: 0` de l'enveloppe supprime la largeur
 * des espaces du code source, qui sinon décaleraient chaque pastille de
 * quelques pixels.
 * ------------------------------------------------------------------------ */
.jeu-rangee {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: max(6px, calc((100% - 3 * 84px) / 2));
}
.jeu-pastille {
  flex: 0 0 auto;
  font-size: 0;
}

/* Le petit bouton des crédits de la musique (v1 : .boutonMusique). */
.boutonMusique {
  border-radius: 30px;
  border: 0;
  vertical-align: top;
  padding: 2px;
  margin: 3px 0 3px 8px;
  text-decoration: none;
  width: 30px;
  min-height: 30px;
  font-size: 22px;
  text-align: center;
}
.zone-musique { text-align: center; margin-top: 6px; }
.zone-musique audio { vertical-align: middle; max-width: 100%; }

/* Le minuteur (v1 : #time), qui clignote en rouge à zéro. */
#time {
  text-align: center;
  font-size: 2em;
}
#time.on {
  color: red;
  animation: blinker 1s linear infinite;
}
@keyframes blinker { 50% { opacity: 0; } }

/* « PERDU », « GAGNÉ », « Partie terminée » sous la barre (v1 écrivait le mot en clair). */
.fin-partie { display: block; font-size: 25px; margin-top: 4px; }

/* Les paliers de couleur de la barre de vie : couleurs EXACTES de la v1
   (css/styles.css lignes 549 à 623). */
.bg-levelV-90 { background-color: #4FC74A !important; }
.bg-levelV-80 { background-color: #78D913 !important; }
.bg-levelV-70 { background-color: #95EB02 !important; }
.bg-levelV-60 { background-color: #C7F90E !important; }
.bg-levelV-50 { background-color: #D2D800 !important; }
.bg-levelV-40 { background-color: #E89E00 !important; }
.bg-levelV-30 { background-color: #E57200 !important; }
.bg-levelV-20 { background-color: #E44E00 !important; }
.bg-levelV-10 { background-color: #DC0003 !important; }
.bg-levelV-5  { background-color: #780002 !important; }
.bg-levelV-0  { background-color: #000000 !important; }

/* La barre de vie : le cœur rouge devant, la barre derrière (v1). */
.barre-vie { color: red; display: flex; align-items: center; }
.barre-vie .progress { flex: 1 1 auto; }
/* La barre de score : chiffres noirs sur la barre, trophée derrière (v1). */
.barre-score { color: black; font-size: 22px; display: flex; align-items: center; }
.barre-score .progress { flex: 1 1 auto; height: 1.6rem; }

/* Les fenêtres modales : le bouton de fermeture reste visible sur un fond sombre. */
.modalSkin1 .btn-close, .modalSkin2 .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------------------------------------------------------------------------
 * Lot 5.2 — L'écran d'introduction
 * ------------------------------------------------------------------------- */
.zone-intro      { font-size: 20px; }
.zone-intro p    { margin-bottom: .75rem; }
.intro-media     { margin: .5rem 0; }
/* Les médias intégrés (vidéo, activité) s'adaptent à la largeur du cadre. */
.intro-media iframe, .resultat-media iframe { max-width: 100%; border: 0; }
.intro-media img, .resultat-media img       { max-width: 100%; height: auto; }
.intro-media audio, .resultat-media audio   { max-width: 100%; }
.petit-jeu       { font-size: 14px; opacity: .85; margin-top: .25rem; }

/* ---------------------------------------------------------------------------
 * Lots 5.3 et 5.4 — La fenêtre de résultat d'un code ou d'un indice (U-9)
 * ------------------------------------------------------------------------- */
.resultat-joueur { text-align: center; }
/* AM-12 (IMP-015) : le champ de saisie est devenu une ZONE DE TEXTE, où l'on
   peut donc appuyer sur Entrée. Sans cette règle, les retours à la ligne saisis
   par l'auteur seraient avalés à l'affichage et son paragraphe reviendrait en un
   seul bloc. « pre-line » les conserve SANS toucher à l'échappement : le texte
   reste affiché comme du texte, jamais interprété comme du HTML. */
.resultat-texte  { font-size: 20px; margin-bottom: .75rem; white-space: pre-line; }
.resultat-media  { margin: .5rem 0; }
/* « Déjà pris en compte » : discret, sous le contenu (décision D-37). */
.resultat-deja   { font-size: 14px; opacity: .85; margin-top: .75rem; margin-bottom: 0; }
/* La fenêtre de résultat peut être haute (une vidéo, un long texte) : elle
   défile à l'intérieur plutôt que de déborder de l'écran. */
#ResultatJoueur .modal-body { max-height: 70vh; overflow-y: auto; }
/* Sans JavaScript, la fenêtre arrive ouverte : le bouton de fermeture est un
   vrai lien, il doit donc ressembler à la croix de Bootstrap. */
a.btn-close { text-decoration: none; }

/* ===========================================================================
   LOT 12 (IMP-012) — LE CONFORT SUR TÉLÉPHONE ET TABLETTE
   ===========================================================================
   Trois choses, et rien d'autre : le bouton de plein écran, les encoches, et
   le paysage. Aucune n'ajoute de dépendance ni ne change ce qui s'affiche sur
   un ordinateur.
   ------------------------------------------------------------------------ */

/* --- 12.1 Le bouton de plein écran ----------------------------------------
   Il n'est écrit dans aucune page : assets/js/confort-mobile.js le pose, et
   seulement si le navigateur sait faire le plein écran ET que la page n'est pas
   dans le cadre d'un ENT (impératif Q-11). Sans JavaScript, il n'existe pas.

   Discret par construction (arbitrage Q-19) : en haut à droite du cadre, sans
   fond ni bordure, à la couleur du texte du thème — il se voit quand on le
   cherche et s'oublie quand on joue. La zone tactile fait 44 px, comme tout le
   reste depuis le Lot 10.3. */
.bouton-plein-ecran {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;      /* la couleur de texte du thème du jeu */
  opacity: .55;
  font-size: 18px;
  cursor: pointer;
}
.bouton-plein-ecran:hover,
.bouton-plein-ecran:focus-visible { opacity: 1; }
/* Le titre du jeu ne doit pas passer sous le bouton sur un écran étroit. */
.cadre-Jeu h1 { padding-right: 46px; padding-left: 46px; }

/* En plein écran, le cadre occupe tout l'écran : il lui faut le fond du thème,
   qu'il n'a pas puisque c'est un élément de derrière (.fond-jeu) qui le porte.
   Sans cette règle, le plein écran afficherait le cadre sur du noir. */
.cadre-Jeu:fullscreen {
  overflow-y: auto;
  padding: 24px 15px;
  background-color: inherit;
}

/* --- 12.2 Encoches et barre gestuelle -------------------------------------
   L'en-tête de l'écran de jeu demande « viewport-fit=cover » : la page occupe
   alors TOUT l'écran, encoche comprise. C'est ce qu'on veut pour le fond du
   thème — mais le cadre, lui, ne doit pas passer dessous. On lui ajoute donc
   la hauteur de l'encoche et celle de la barre gestuelle.

   env() vaut 0 partout où il n'y a pas d'encoche : cette règle ne change donc
   rien sur un ordinateur ni sur un téléphone sans encoche. */
body.page-jeu {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Le fond, lui, reste bien en plein écran : il est en position fixe et doit
   déborder sous l'encoche, sinon une bande noire apparaît en haut. */
.fond-jeu { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; }

/* --- 12.2 Le paysage -------------------------------------------------------
   Retourner le téléphone donne beaucoup de largeur et très peu de hauteur :
   la pyramide de six pastilles ne tient plus, et le minuteur sort de l'écran.
   En paysage ET sur un écran bas, les trois rangées se resserrent et le titre
   maigrit. La disposition en pyramide est conservée : c'est le choix de
   Guillaume du 20/09/2026, on ne le défait pas, on le compacte. */
@media (orientation: landscape) and (max-height: 500px) {
  .cadre-Jeu          { margin-top: 2px; padding: 8px 12px; }
  .cadre-Jeu h1       { font-size: 1.5rem; margin-bottom: .25rem; }
  .accentuation       { font-size: 19px; }
  .jeu-rangee         { gap: max(4px, calc((100% - 3 * 64px) / 2)); }
  .jeu-rangee + .jeu-rangee { margin-top: 2px; }
  .boutonJeu          { width: 54px; height: 54px; font-size: 20px; }
}

/* --- 12.2 Le champ que le clavier ne doit pas recouvrir --------------------
   Sur un téléphone, le clavier virtuel monte par-dessus le bas de l'écran. La
   fenêtre du code et celle de l'indice sont centrées : leur champ se retrouvait
   dessous, et l'on tapait sans voir. La fenêtre est donc alignée en HAUT dès
   que l'écran est bas, et son contenu défile à l'intérieur. */
@media (max-height: 640px) {
  #ModalCode .modal-dialog-centered,
  #Indice .modal-dialog-centered { align-items: flex-start; margin-top: 8px; }
  #ModalCode .modal-body,
  #Indice .modal-body { max-height: 60vh; overflow-y: auto; }
}

/* --- 12.2 Pas de rebond de défilement parasite ----------------------------
   Sur l'écran de jeu, tirer la page vers le bas la faisait rebondir, et sur
   certains téléphones déclenchait le rechargement de la page — en pleine
   partie. « contain » garde le défilement à l'intérieur de la page.
   LE ZOOM À DEUX DOIGTS RESTE AUTORISÉ : c'est une exigence d'accessibilité,
   et rien ici ne le bride — ni dans la balise « viewport », ni par une règle
   qui confisquerait les gestes tactiles. Un contrôle unitaire
   (test_confort_mobile.php) refuse qu'on le bride un jour. */
body.page-jeu { overscroll-behavior-y: contain; }

/* ---------------------------------------------------------------------------
   R-21 (IMP-015) — LE BANDEAU DE MAINTENANCE, CÔTÉ JOUEUR
   ---------------------------------------------------------------------------
   Une seule ligne, en haut de l'écran de jeu, quand une maintenance totale est
   en cours et qu'une partie déjà commencée va à son terme.

   Pourquoi `position: fixed` : l'écran de jeu se dimensionne sur la hauteur de
   la fenêtre. Un bandeau posé dans le flux décalerait tout vers le bas et
   pousserait les pastilles hors de l'écran sur un téléphone — le défaut que
   IMP-010d a justement corrigé. Fixé en haut, il se superpose sans rien
   déplacer.

   `pointer-events: none` : il ne doit jamais intercepter un clic destiné au
   jeu qui se joue dessous. Il informe, il ne gêne pas.
--------------------------------------------------------------------------- */
.bandeau-maintenance-jeu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1080;                 /* au-dessus du jeu, sous les fenêtres modales */
  padding: 4px 10px;
  background-color: #b02a37;     /* le rouge « danger » de la charte */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}