/* style.css — Mise en page pour l'interface complète du jeu : écrans superposés au
   canvas, HUD en cours de partie, canvas centré et responsive. Habillage cyberpunk
   (phase 4A) : fond bleu-nuit assorti à Config.COULEURS.fond (carte.js), touches de
   lueur néon (text-shadow / box-shadow) sur les éléments actifs ou sélectionnés —
   jamais en remplacement des distinctions déjà en place (fond + liseré, jamais la
   couleur seule), seulement en renfort visuel. */

* {
    box-sizing: border-box;
}

/* `display: flex` sur .ecran-superpose et .barre-hud (styles d'auteur) prime sinon
   sur le `display: none` que le navigateur applique par défaut à [hidden] (style
   agent utilisateur) : sans cette règle, un écran ou le HUD masqués via
   `element.hidden = true` resteraient visibles en même temps que les autres. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 16px;
    background: #0b0b14;
    color: #e8e8ec;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Décor d'arrière-plan en parallaxe (phase 7C, decor.js) : un second canvas
   indépendant du canvas de jeu, épinglé derrière tout le reste de la page. `position:
   fixed` + `inset: 0` le fait couvrir tout le viewport ; `width`/`height: 100%` sont
   nécessaires en plus (un <canvas> est un élément remplacé, `inset` seul ne suffit pas
   à l'étirer comme il le ferait pour une boîte ordinaire à dimensions automatiques).
   `z-index: -1` suffit à le faire passer derrière tout le reste du contenu de `body`
   (aucun de ses autres enfants directs — <h1>, #bouton-son, .conteneur-canvas, etc. —
   n'a de z-index propre ni de position qui créerait un contexte d'empilement séparé,
   donc ce z-index négatif s'applique bien dans le contexte d'empilement racine de la
   page entière, pas seulement localement). Le canvas de jeu, lui, garde son fond
   opaque habituel (depuis la phase 1A, renforcé en 4A) : ce décor n'est donc visible
   que dans les marges qui entourent .conteneur-canvas — plus larges sur desktop, quasi
   absentes sous 900px de large où .conteneur-canvas occupe déjà toute la largeur
   disponible. Redimensionné indépendamment du canvas de jeu par Decor.redimensionner()
   (voir decor.js), sur son propre écouteur resize. */
#canvas-decor {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
}

/* Image de fond fixe (phase 7C bis) : positionnée exactement comme #canvas-decor
   ci-dessus (`position: fixed; inset: 0`, plutôt que `position: absolute` — pour
   couvrir tout le viewport, y compris pendant un défilement de page, exactement comme
   le canvas de décor qu'elle recouvre), un niveau au-dessus de lui et en dessous de
   `.conteneur-canvas` : même `z-index: -1`, l'ordre entre les deux vient alors de leur
   ordre dans le DOM (canvas d'abord, image ensuite, voir index.html), pas d'un
   `z-index` distinct. `object-fit: cover` pour remplir la zone sans déformer l'image
   quel que soit son ratio d'origine. Masquée par défaut (`opacity: 0`) : le skyline
   procédural en dessous reste seul visible tant que l'image ne s'est pas chargée avec
   succès (voir Decor.initialiserImageFond, decor.js, qui ajoute `.image-decor--visible`
   sur l'événement `load`) — la transition ne fait qu'adoucir cette apparition, jamais
   utilisée pour masquer une erreur de chargement. `pointer-events: none` : purement
   décorative, ne doit jamais intercepter un clic destiné au jeu en dessous. */
.image-decor {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

.image-decor--visible {
    opacity: 1;
}

/* Voile sombre entre l'image de fond et le plateau de jeu (phase 7C bis) : une photo
   réaliste en pleine luminosité nuirait au contraste de l'interface néon posée
   par-dessus (même principe qu'en phase 4A : la lisibilité du jeu passe avant
   l'esthétique du décor). Même teinte que Config.COULEURS.fond (#0b0b14 = rgb(11, 11,
   20)) à 50 % d'opacité, plutôt qu'un nouvel objet Config.PALETTE qui n'existe pas
   dans ce dépôt (voir l'écart documenté dans ARCHITECTURE.md). Toujours présent, pas
   seulement quand l'image est visible : sans effet perceptible tant que
   .image-decor reste à opacity 0 (il assombrit alors uniquement le skyline
   procédural, d'une teinte déjà proche de la sienne), donc rien à conditionner ici. */
.voile-decor {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 11, 20, 0.5);
    pointer-events: none;
    z-index: -1;
}

h1 {
    /* Seul titre de la page (l'écran d'accueil n'en a plus de doublon, voir
       index.html) : sensiblement plus grand que les <h2> des écrans superposés
       (Victoire/Défaite) pour bien se lire comme LE titre, pas un sous-titre. */
    font-size: 2rem;
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

h2 {
    font-size: 1.4rem;
    margin: 0;
    color: #00e5ff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.info-graine {
    font-size: 0.9rem;
    color: #a0a0aa;
}

/* Barre du HUD en cours de partie : mêmes contraintes que les autres barres, avec
   les boutons Lancer la vague / Pause / Vitesse. */
.barre-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 900px;
    font-size: 0.9rem;
}

#bouton-lancer-vague,
#bouton-pause,
#bouton-vitesse,
#bouton-son,
#bouton-musique {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.95rem;
    background: #00e5ff;
    color: #10120f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

#bouton-lancer-vague:disabled,
#bouton-musique:disabled {
    background: #3a3a42;
    color: #7a7a84;
    cursor: not-allowed;
    box-shadow: none;
}

/* Réglages du son (octobre 2026) : boutons Son et Musique et curseur de volume,
   regroupés sur une ligne qui passe à la ligne sur les écrans étroits. */
.reglages-son {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#bouton-musique {
    background: #b9a8ff;
    box-shadow: 0 0 8px rgba(185, 168, 255, 0.4);
}

.reglage-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #a0a0aa;
}

.reglage-volume input {
    width: 110px;
    accent-color: #00e5ff;
}

/* Aperçu de la vague suivante, à côté du bouton de lancement. */
.prochaine-vague {
    font-size: 0.85rem;
    color: #a0a0aa;
}

#bouton-pause,
#bouton-vitesse {
    background: #f1c40f;
}

.message-jeu {
    color: #e74c3c;
    font-weight: 600;
}

/* Bonne nouvelle (bonus d'appel anticipé, partie reprise) plutôt qu'une erreur. */
.message-jeu.message-positif {
    color: #2ecc71;
}

/* Fiche de la tour survolée ou sélectionnée, sous la barre de construction. Hauteur
   minimale de deux lignes : passer d'une tour à l'autre ne fait pas sauter la mise en
   page quand la description tient sur une ligne de moins. */
.fiche-tour {
    width: 100%;
    max-width: 900px;
    min-height: 2.6em;
    margin: 0;
    padding: 4px 10px;
    font-size: 0.85rem;
    color: #c8c8d0;
    text-align: center;
    /* Fond sombre : le texte reste lisible par-dessus l'image de fond. */
    background: rgba(11, 11, 20, 0.7);
    border-radius: 6px;
}

.fiche-tour strong {
    color: #00e5ff;
}

/* Barre de sélection du type de tour à construire (phase 2A), affichée sous le HUD.
   Même principe de mise en évidence que .choix-duree : fond ET liseré distincts pour
   le type actif, jamais une teinte seule (lisibilité aux personnes daltoniennes). */
.barre-types-tours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 900px;
}

.barre-types-tours button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.9rem;
    background: #2a2a30;
    color: #e8e8ec;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.barre-types-tours button.selectionne {
    background: #2f4a5a;
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.barre-types-tours button:disabled {
    background: #3a3a42;
    color: #7a7a84;
    cursor: not-allowed;
}

/* Le conteneur porte la largeur maximale et sert d'ancrage de positionnement aux
   écrans superposés (accueil, victoire, défaite). Le canvas prend 100% de sa largeur
   en CSS mais ses attributs width/height (fixés en JS) définissent la vraie
   résolution de dessin, pour éviter tout flou dû à un étirement. */
.conteneur-canvas {
    position: relative;
    width: 100%;
    max-width: 900px;
}

/* Sous env. 480 px de large, le canvas (ratio fixe 20:12) devient si bas que le
   contenu de l'écran d'accueil — le plus dense des trois écrans superposés — déborderait
   de sa boîte et chevaucherait ce qui se trouve juste au-dessus dans le flux normal de
   la page (le <h1>, et le bouton Son depuis la phase 4B) : les écrans superposés sont
   centrés verticalement par flexbox dans une boîte `inset: 0` calée sur la hauteur du
   canvas, et un contenu plus haut que cette boîte déborde de façon symétrique, aussi
   bien en haut qu'en bas, sans qu'`overflow` ne le limite.
   Cette valeur (initialement 420px, phase 1D) a été mesurée insuffisante : l'écran
   d'accueil a grossi depuis (niveau/XP et liste des cinq paliers de bonus permanents,
   phases 3A/3B) sans que cette hauteur minimale n'ait été révisée en conséquence —
   c'est ce qui produisait, en pratique, le chevauchement du bouton Son observé sur
   mobile (à tort attribué à un positionnement propre au bouton : il n'a jamais eu de
   `position: fixed`/`absolute`, voir son style partagé avec les autres boutons du HUD
   plus haut). Mesuré à nouveau à 360px et 320px (son contenu ne dépend pas de la
   largeur à ces deux tailles, les mêmes quatre boutons de durée y passent déjà sur
   deux lignes) : 461px de contenu réel, d'où cette marge.
   Relevée à nouveau à 600px (défi du jour, contenu additionnel post-lancement) :
   l'encart ajouté sous le bouton Jouer (voir .defi-du-jour plus bas) a fait remonter
   le contenu réel à 557px (mesuré via ecran-accueil.scrollHeight à 375px de large,
   même chevauchement du bouton Son observé et corrigé avant d'ajuster cette valeur),
   au-delà des 500px fixés en phase 3B — même cause, même correctif, la marge de
   sécurité déjà en place s'appliquant à cette nouvelle valeur.
   Réservée aux moments où un écran superposé est affiché (classe `ecran-affiche`,
   posée par Interface.mettreAJourEcrans) : appliquée aussi en partie, elle laissait
   sous le plateau un vide d'environ 400px qui repoussait le HUD, ses messages et la
   barre des tours sous le bord inférieur de l'écran d'un téléphone. */
@media (max-width: 480px) {
    .conteneur-canvas.ecran-affiche {
        min-height: 600px;
    }
}

#canvas-jeu {
    display: block;
    width: 100%;
    height: auto;
    /* Empêche le geste de défilement tactile de « voler » les interactions avec la
       grille (pose de tours au tap). */
    touch-action: none;
    border-radius: 4px;
}

/* Panneau d'amélioration/vente d'une tour sélectionnée (phase 2B). Positionné dans un
   coin fixe du plateau (le conteneur du canvas est déjà en position: relative) plutôt
   que de suivre la tour cliquée, comme demandé : plus simple et tout aussi lisible. */
.panneau-amelioration {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(11, 11, 20, 0.92);
    border: 2px solid #00e5ff;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
    text-align: left;
    font-size: 0.85rem;
    /* Sur les plus petits écrans, le plateau peut être moins haut que le panneau
       (Caserne surtout, au texte plus long) : il défile alors à l'intérieur plutôt
       que de déborder sur le HUD placé juste sous le plateau. */
    max-height: calc(100% - 16px);
    overflow-y: auto;
}

/* Tour sélectionnée dans la moitié droite du plateau : le panneau passe à gauche pour
   ne pas la cacher (voir Interface.mettreAJourPanneauAmelioration). */
.panneau-amelioration.panneau-a-gauche {
    right: auto;
    left: 8px;
}

.panneau-amelioration h3 {
    margin: 0;
    font-size: 1rem;
}

.panneau-amelioration p {
    margin: 0;
}

.panneau-amelioration button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.85rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

#bouton-ameliorer {
    background: #00e5ff;
    color: #10120f;
}

#bouton-ameliorer:disabled {
    background: #3a3a42;
    color: #7a7a84;
    cursor: not-allowed;
}

#panneau-niveau-max {
    color: #f1c40f;
    font-weight: 600;
}

#bouton-vendre {
    background: #e74c3c;
    color: #10120f;
}

#bouton-ciblage {
    background: #2f4a5a;
    color: #e8e8ec;
    border: 1px solid #00e5ff;
}

/* Écrans superposés au canvas (accueil, victoire, défaite) : un seul à la fois est
   visible, les autres portent l'attribut `hidden` (basculé par
   Interface.mettreAJourEcrans).
   `overflow-y: auto` (contenu additionnel post-lancement, « phase 7I ») : filet de
   sécurité générique, plutôt que réservé au seul mode paysage mobile comme jusqu'ici
   (voir l'ancienne règle dans la media query plus bas, devenue redondante avec
   celle-ci). L'écran d'accueil (le plus dense des trois écrans superposés) a
   continué de grossir phase après phase — niveau/XP et paliers (3A/3B), défi du
   jour, puis difficulté supérieure — et son contenu dépasse désormais la hauteur du
   canvas (dérivée du seul ratio COLONNES:LIGNES, sans rapport avec la quantité de
   contenu de l'accueil) même à une largeur de canvas confortable (578px de contenu
   mesuré pour 540px de hauteur de canvas à 900px de large, la largeur maximale de
   .conteneur-canvas) — pas seulement sous 480px de large comme le corrigeait la
   règle mobile ci-dessous jusqu'ici. Un défilement interne à l'écran superposé
   (plutôt qu'un défilement de la page entière, qui décalerait aussi le canvas et le
   reste de l'interface) absorbe cet excédent quelle que soit la largeur, sans
   dépendre d'une valeur de `min-height` sans cesse recalibrée à chaque nouvel ajout
   de contenu (voir l'historique de ce recalibrage dans la note sur
   `@media (max-width: 480px)` plus bas, conservée pour donner au canvas une hauteur
   généreuse sur téléphone, mais qui n'a plus besoin d'être parfaitement exacte
   puisque ce filet de sécurité couvre désormais le reste). Sans effet visible tant
   que le contenu tient dans la boîte (seul un contenu qui déborde réellement
   déclenche la barre de défilement).
   Centrage vertical par marges automatiques (premier et dernier enfant) plutôt que
   `justify-content: center` : avec ce dernier, un contenu plus haut que la boîte
   déborde aussi vers le HAUT, hors de portée du défilement — le niveau du joueur et
   sa barre d'XP, en tête de l'écran d'accueil, étaient ainsi coupés et
   inaccessibles. Les marges automatiques centrent pareil quand tout tient, et
   s'annulent sinon, laissant le contenu partir du haut et défiler normalement. */
.ecran-superpose {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(16, 16, 18, 0.92);
    border-radius: 4px;
    text-align: center;
    overflow-y: auto;
}

.ecran-superpose > :first-child {
    margin-top: auto;
}

.ecran-superpose > :last-child {
    margin-bottom: auto;
}

.choix-duree {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
}

.choix-duree button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.95rem;
    background: #2a2a30;
    color: #e8e8ec;
    /* Bordure transparente par défaut plutôt qu'absente, pour que le passage à
       .selectionne ne fasse pas sauter la taille du bouton. */
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

/* Le bouton actif se distingue par un fond ET un liseré coloré (pas seulement une
   teinte différente), pour rester lisible aux personnes daltoniennes. */
.choix-duree button.selectionne {
    background: #2f4a5a;
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Difficulté supérieure (contenu additionnel post-lancement, « phase 7I ») :
   ensemble à part de .choix-duree ci-dessus (gap plus petit, boutons plus étroits)
   pour rester visuellement distinct — un réglage orthogonal à la durée, jamais une
   cinquième case dans la même rangée. Teinte d'accent rouge (#e74c3c, déjà utilisée
   ailleurs pour un signal d'alerte — bouton Vendre, message d'erreur du HUD) plutôt
   que le cyan de .choix-duree, pour ne jamais laisser croire que les deux groupes
   de boutons ne forment qu'un seul réglage. */
.choix-difficulte {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}

.choix-difficulte button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.85rem;
    background: #2a2a30;
    color: #e8e8ec;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.choix-difficulte button.selectionne {
    background: #4a2a2a;
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.choix-difficulte button:disabled {
    cursor: not-allowed;
}

/* Neutralisation visuelle (contenu additionnel post-lancement) pendant toute
   interaction avec l'encart Défi du jour plus bas (voir Interface.initialiser,
   js/interface.js) : ce réglage n'a alors aucun effet, l'opacité réduite l'indique
   sans dépendre de la seule désactivation des boutons (déjà appliquée en JS via
   `disabled`, voir juste au-dessus), pour rester perceptible même par un survol
   rapide. */
.choix-difficulte.difficulte-neutralisee {
    opacity: 0.4;
}

/* Niveau et barre d'XP du joueur (phase 3A), affichés sur l'écran d'accueil. */
.progression-joueur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 260px;
}

.niveau-joueur {
    margin: 0;
    font-weight: 600;
}

.barre-xp-conteneur {
    width: 100%;
    height: 10px;
    background: #2a2a30;
    border-radius: 5px;
    overflow: hidden;
}

.barre-xp-remplissage {
    height: 100%;
    background: #00e5ff;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
    /* La largeur (pourcentage de xpActuelle / seuil du niveau) est fixée en JS par
       Interface.mettreAJourProgressionAccueil. */
    width: 0%;
}

.texte-niveau-max-joueur {
    margin: 0;
    font-size: 0.85rem;
    color: #f1c40f;
    font-weight: 600;
}

/* Liste des paliers de bonus permanents (phase 3B), sous la barre d'XP. Débloqué vs
   verrouillé se distingue par la couleur ET par le symbole (✓ contre 🔒) — jamais la
   couleur seule, même principe que partout ailleurs dans l'interface. */
.liste-paliers-bonus {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    font-size: 0.78rem;
    text-align: left;
}

.liste-paliers-bonus li {
    padding: 4px 8px;
    border-radius: 4px;
    background: #1a1a1e;
}

.liste-paliers-bonus li.palier-debloque {
    color: #2ecc71;
    font-weight: 600;
}

.liste-paliers-bonus li.palier-verrouille {
    color: #7a7a84;
}

/* Mention de passage de niveau sur les écrans de victoire/défaite : suffisamment
   visible pour ne pas passer inaperçue, sans pour autant bloquer la lecture du reste
   de l'écran (même principe de mise en évidence que .vague-atteinte.score-sansfin). */
.niveau-superieur {
    margin: 0;
    font-weight: 700;
    color: #f1c40f;
}

/* Mention de difficulté supérieure sur les écrans de victoire/défaite (contenu
   additionnel post-lancement, « phase 7I ») : même teinte rouge que .choix-difficulte
   ci-dessus, pour rester cohérente avec le réglage qu'elle rappelle — jamais un
   indicateur permanent dans le HUD, seulement ce rappel ponctuel en fin de partie
   (voir Interface.afficherResumeProgression, js/interface.js). */
.difficulte-superieure {
    margin: 0;
    font-weight: 700;
    color: #e74c3c;
}

.description-duree {
    color: #a0a0aa;
    font-size: 0.9rem;
    margin: 0;
    min-height: 1.2em;
}

.bouton-principal,
.bouton-secondaire,
.bouton-defi-du-jour {
    min-height: 44px;
    padding: 0 24px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.bouton-principal {
    background: #39ff88;
    color: #10120f;
    box-shadow: 0 0 10px rgba(57, 255, 136, 0.5);
}

.bouton-principal:hover {
    background: #29e070;
}

.bouton-secondaire {
    background: #3a3a42;
    color: #e8e8ec;
}

/* Défi du jour (contenu additionnel post-lancement) : encart distinct des quatre
   boutons de durée (.choix-duree ci-dessus), sur l'écran d'accueil. Teinté dans
   Config.COULEURS.arrivee (#ff2d6b, carte.js) plutôt que le cyan déjà associé à
   la sélection de durée/type de tour — une couleur d'accent différente, en plus
   du cadre et du fond propres à cette carte, pour qu'il ne puisse jamais se lire
   comme une cinquième durée parmi les autres au premier coup d'œil. */
.defi-du-jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 280px;
    padding: 10px 14px;
    background: #1a1a1e;
    border: 2px solid #ff2d6b;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 45, 107, 0.35);
}

.defi-du-jour-titre {
    margin: 0;
    font-weight: 700;
    color: #ff2d6b;
    text-shadow: 0 0 6px rgba(255, 45, 107, 0.5);
}

.defi-du-jour-date,
.defi-du-jour-score {
    margin: 0;
    font-size: 0.85rem;
    color: #a0a0aa;
}

.bouton-defi-du-jour {
    margin-top: 4px;
    background: #ff2d6b;
    color: #10120f;
    box-shadow: 0 0 10px rgba(255, 45, 107, 0.5);
}

.bouton-defi-du-jour:hover {
    background: #e0245c;
}

/* Reprise d'une partie laissée en cours (octobre 2026), mise en avant sur l'écran
   d'accueil : c'est sans doute ce que veut faire un joueur qui revient. */
/* Bandeau « nouvelle version prête » (écran d'accueil, voir la fin de js/jeu.js). */
.bandeau-mise-a-jour {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid #39ff88;
    border-radius: 6px;
}

.bandeau-mise-a-jour p {
    margin: 0;
}

.bouton-reprendre {
    min-height: 44px;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 600;
    background: #00e5ff;
    color: #10120f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Partage du score du défi du jour, plus discret que les boutons principaux. */
.bouton-partager {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent;
    color: #ff2d6b;
    border: 2px solid #ff2d6b;
    border-radius: 6px;
    cursor: pointer;
}

/* Raccourcis clavier, sous le plateau, seulement sur un appareil avec une souris (donc
   probablement un clavier) : inutiles et encombrants sur un téléphone. */
.aide-clavier {
    display: none;
    margin: 0;
    max-width: 900px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #a0a0aa;
    text-align: center;
    background: rgba(11, 11, 20, 0.7);
    border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
    .aide-clavier {
        display: block;
    }
}

kbd {
    padding: 0 4px;
    border: 1px solid #4a4a55;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.95em;
    color: #c8c8d0;
}

/* Section « À propos », tout en bas de la page : même fond sombre que .aide-clavier
   (le texte reste lisible par-dessus l'image de fond), mais sans la lueur néon des
   autres titres : c'est une simple mention, pas un élément du jeu. */
.a-propos {
    width: 100%;
    max-width: 900px;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #c8c8d0;
    text-align: center;
    background: rgba(11, 11, 20, 0.7);
    border-radius: 6px;
}

.a-propos h2 {
    margin-bottom: 4px;
    font-size: 0.95rem;
    color: #c8c8d0;
    text-shadow: none;
}

.a-propos p {
    margin: 0 0 4px;
}

/* Ligne du lien : plus petite et plus discrète que le texte au-dessus. Le lien garde
   la couleur du texte autour (juste souligné) ; une adresse trop longue pour un petit
   écran passe à la ligne au lieu de déborder. */
.a-propos-lien {
    font-size: 0.75rem;
    color: #a0a0aa;
}

.a-propos-lien a {
    color: inherit;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* Statistiques de fin de partie (octobre 2026). */
.statistiques-partie {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 340px;
    font-size: 0.85rem;
    color: #c8c8d0;
}

.statistiques-partie:empty {
    display: none;
}

.statistiques-partie p {
    margin: 0;
}

/* Une ligne par type de tour : nom, barre proportionnelle à sa part des dégâts,
   pourcentage. */
.graphique-degats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.graphique-degats li {
    display: grid;
    grid-template-columns: 90px 1fr 42px;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.graphique-degats-barre {
    height: 8px;
    background: #2a2a30;
    border-radius: 4px;
    overflow: hidden;
}

.graphique-degats-barre span {
    display: block;
    height: 100%;
}

.boutons-fin-partie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Met en évidence la vague atteinte à l'écran de défaite quand elle constitue le
   score final du joueur (mode Sans fin) plutôt qu'une simple statistique parmi
   d'autres. */
.vague-atteinte.score-sansfin {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1c40f;
}

/* Mode paysage mobile (contenu additionnel post-lancement) : la mise en page
   habituelle empile tout verticalement (titre, bouton Son, canvas, HUD, barre de
   tours), pensée pour un écran plus haut que large. En paysage sur téléphone, c'est
   l'inverse (large mais bas) : le canvas, dimensionné jusqu'ici sur la seule largeur
   disponible (voir Jeu.redimensionner, jeu.js), déborderait largement de la hauteur
   réelle de l'écran, forçant à faire défiler la page pendant la partie — inconfortable
   sur un jeu qui demande des taps rapides et précis sur la grille.
   Cible seulement les téléphones (hauteur de viewport réduite), pas les tablettes ou
   ordinateurs en paysage qui ont déjà assez de place verticale avec la mise en page
   habituelle : `max-height: 500px` couvre les téléphones actuels en paysage (320 à
   ~430px de hauteur utile selon le modèle) sans capturer une tablette (768px et plus).
   Voir Jeu.MEDIA_PAYSAGE_MOBILE (jeu.js), la même requête, dupliquée côté JS pour que
   Jeu.redimensionner() sache quand plafonner aussi la hauteur du canvas (indispensable
   ici : une grille en CSS donne enfin à .conteneur-canvas une vraie hauteur mesurable
   (voir plus bas), mais sans ce plafond JS le canvas continuerait de ne considérer
   que la largeur et déborderait quand même de cette hauteur).
   Grid plutôt que flex : permet de placer titre/bouton Son/HUD/barre de tours dans une
   colonne à droite malgré leur ordre entrecoupé dans le DOM (le canvas est entre les
   deux dans index.html) sans avoir à les envelopper dans un nouvel élément — chaque
   règle ci-dessous ne fait que leur assigner une cellule de la grille par nom de ligne,
   peu importe leur position dans le HTML. */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-rows: auto auto 1fr auto auto;
        min-height: 100dvh;
        padding: 8px;
        gap: 8px;
    }

    h1 {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.15rem;
    }

    .reglages-son {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
        gap: 6px;
    }

    #bouton-son,
    #bouton-musique {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.8rem;
    }

    .reglage-volume input {
        width: 80px;
    }

    /* S'étire sur toutes les lignes de la grille (peu importe qu'elle en compte trois
       ou davantage) : c'est ce qui donne enfin à ce conteneur une vraie hauteur
       mesurable par Jeu.redimensionner() (`conteneur.clientHeight`), au lieu de la
       laisser dériver du canvas lui-même comme en mise en page habituelle (portrait).
       `display: flex` + centrage : le canvas, dimensionné en JS à la taille exacte qui
       tient dans cet espace en conservant son ratio (voir Jeu.redimensionner), ne
       remplit pas forcément à la fois toute la largeur et toute la hauteur de cette
       cellule — le centrer évite qu'il ne colle contre un bord plutôt que l'autre.
       `max-height` + `position: sticky` : sur le plus petit des téléphones visés par
       cette media query, la colonne de droite (titre, bouton Son, HUD, barre de tours)
       peut rester plus haute que l'écran malgré sa mise en page compacte — dans ce cas,
       la grille grandit au-delà de 100dvh et la page devient globalement défilable
       (aucun `overflow: hidden` forcé ici, qui aurait simplement rendu le bas de cette
       colonne inaccessible). Sans `max-height`, ce conteneur grandirait alors lui aussi
       au-delà de la hauteur de l'écran (il s'étire sur la même grille), et une partie du
       plateau resterait invisible sous le bord inférieur de l'écran ; `max-height`
       l'empêche de dépasser la hauteur réelle du viewport, et `position: sticky` le
       garde alors visible et jouable pendant que le reste de la page défile autour de
       lui, plutôt que de le laisser défiler hors champ avec le reste.
       `align-self: start` : sans lui, le `align-items: center` hérité de la règle
       `body` de base centrait ce conteneur dans une zone de grille plus haute que
       l'écran (quand la colonne de droite déborde), repoussant le bas du plateau
       sous le bord inférieur de l'écran dès le chargement. */
    .conteneur-canvas {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        max-width: none;
        height: 100%;
        max-height: calc(100dvh - 16px);
        position: sticky;
        top: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Sans ces deux propriétés, le canvas garderait son étirement habituel (width:
       100%; height: auto, voir plus bas) et couvrirait toute la largeur de
       .conteneur-canvas en déformant son ratio au lieu de respecter la taille exacte
       fixée par Jeu.redimensionner() sur ses attributs width/height. */
    #canvas-jeu {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    /* Colonne de droite : au lieu du centrage habituel sur toute la largeur de l'écran
       (pensé pour une bande étroite en portrait), les items s'accumulent verticalement
       du haut de leur cellule plutôt qu'au centre, plus lisible dans une colonne
       étroite (200px) qu'un centrage qui les ferait flotter au milieu d'un espace
       vertical généreux. */
    .barre-hud,
    .barre-types-tours {
        grid-column: 2;
        max-width: none;
        justify-content: flex-start;
        font-size: 0.82rem;
        gap: 6px;
    }

    .barre-hud {
        grid-row: 3;
    }

    .barre-types-tours {
        grid-row: 4;
    }

    .aide-clavier {
        grid-column: 2;
    }

    .fiche-tour {
        grid-column: 2;
        grid-row: 5;
        font-size: 0.75rem;
        text-align: left;
    }

    /* overflow-y: auto sur .ecran-superpose vit désormais dans la règle de base
       (contenu additionnel post-lancement, « phase 7I ») — plus besoin de la
       répéter ici spécifiquement pour ce mode paysage mobile, qui en hérite déjà. */
}

/* Note d'installation (section À propos) : inutile une fois l'application
   installée, puisqu'elle s'ouvre alors dans sa propre fenêtre (mode
   d'affichage autre que « browser », celui d'un onglet de navigateur). */
@media not all and (display-mode: browser) {
  .note-installation { display: none; }
}