/* Régions et Départements
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE. */
:root {
  --fond: #0f1620;
  --fond-2: #16202c;
  --fond-3: #1e2a38;
  --bord: #2c3a4c;
  --texte: #e6edf5;
  --texte-doux: #9aabbf;
  --accent: #f0b429;
  --accent-sombre: #b88a12;
  --mer: #0d1a26;
  --danger: #ef4444;
  --rayon: 10px;
  --panneau-l: 340px;
  /* Les pieces d'echecs et le dos de carte ne sont pas dans toutes les polices
     d'interface : on nomme celles qui les portent avant de laisser faire. */
  --symboles: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2",
              "DejaVu Sans", "Symbola", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* dvh plutot que % : sur telephone, la barre d'adresse se retracte et 100%
     laisserait alors une bande vide sous la page */
  height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;          /* pas de rebond ni de « tirer pour recharger » */
  -webkit-text-size-adjust: 100%;     /* iOS n'agrandit pas le texte tout seul */
}

button, input, select { font: inherit; color: inherit; }

.ecran { height: 100%; min-width: 0; }
[hidden] { display: none !important; }
.pousse { flex: 1; }

/* ─────────────────────────────── boutons ─────────────────────────────── */

.btn {
  border: 1px solid var(--bord);
  background: var(--fond-3);
  color: var(--texte);
  padding: 8px 14px;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #27374a; border-color: #3d5069; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primaire {
  background: linear-gradient(180deg, #f5c24a, var(--accent));
  border-color: var(--accent-sombre);
  color: #221a05;
  font-weight: 650;
}
.btn-primaire:hover:not(:disabled) { background: #f7cd63; border-color: var(--accent); }

.btn-danger { background: #7f1d1d; border-color: #a03030; }
.btn-danger:hover:not(:disabled) { background: #991b1b; }

.btn-fantome { background: transparent; }
.btn-mini { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn-large { width: 100%; padding: 11px 14px; }

/* ───────────────────────────── configuration ───────────────────────────── */

#ecran-config {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(1100px 620px at 50% -8%, #1d2c3e 0%, transparent 70%),
    var(--fond);
}

.config-boite {
  width: min(760px, 100%);
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 16px;
  box-shadow: 0 24px 70px #0008;
  overflow: hidden;
}

.config-entete { padding: 26px 28px 18px; border-bottom: 1px solid var(--bord); }
.config-entete h1 { margin: 0; font-size: 27px; letter-spacing: -.4px; }
/* le nom du jeu s'affiche d'un seul tenant : le découper en deux tailles
   ferait passer sa seconde moitié pour un sous-titre */
.sous-titre { margin: 8px 0 0; color: var(--texte-doux); font-size: 14px; }
.sous-titre .rappel { opacity: .72; font-size: 13px; }

.config-corps { padding: 22px 28px; display: grid; gap: 18px; }

.champ-ligne { display: flex; align-items: center; gap: 16px; }
.champ-ligne > label { font-weight: 600; }

.segment { display: flex; gap: 6px; }
.segment button {
  width: 42px; height: 38px;
  border: 1px solid var(--bord);
  background: var(--fond-3);
  border-radius: 9px;
  cursor: pointer;
  font-weight: 600;
}
.segment button[aria-checked="true"] {
  background: var(--accent); color: #221a05; border-color: var(--accent-sombre);
}

.liste-joueurs { display: grid; gap: 8px; }

.joueur-ligne {
  display: grid;
  grid-template-columns: 26px 1fr 128px 128px;
  gap: 10px;
  align-items: center;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 8px 10px;
}
.pastille { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0006; }
.joueur-ligne input[type="text"],
.joueur-ligne select {
  background: #101823;
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 7px 9px;
  width: 100%;
}
.joueur-ligne select:disabled { opacity: .35; }

.options { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-3); }
.options summary { padding: 10px 14px; cursor: pointer; font-weight: 600; }
.options-corps { padding: 4px 14px 14px; display: grid; gap: 10px; }
.case { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 14px; }
.case em { color: var(--texte-doux); font-style: normal; }
.ligne-graine input { width: 170px; background: #101823; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 9px; }

.erreur { color: #fca5a5; background: #7f1d1d33; border: 1px solid #7f1d1d; padding: 9px 12px; border-radius: 8px; font-size: 14px; }

.config-pied {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 28px; border-top: 1px solid var(--bord); background: #121b26;
}

/* ───────────────────────────────── jeu ───────────────────────────────── */

/* Sans min-width, un enfant de grille refuse de descendre sous la largeur
   minimale de son contenu : la barre d'outils imposait alors 761 points de
   large a toute la page, et la carte sortait de l'ecran d'un telephone. */
#ecran-jeu { display: grid; grid-template-rows: auto 1fr; height: 100%; min-width: 0; }

#barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
  padding: 9px 14px;
  padding-top: max(9px, env(safe-area-inset-top));
  background: var(--fond-2);
  border-bottom: 1px solid var(--bord);
}
.barre-gauche, .barre-droite { display: flex; align-items: center; gap: 10px; }
.barre-droite { margin-left: auto; }

.jeton-joueur {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; padding: 4px 12px 4px 8px;
  border-radius: 999px; background: var(--fond-3); border: 1px solid var(--bord);
}
.jeton-joueur::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--couleur, #888); box-shadow: 0 0 0 2px #0005;
}
.etiquette {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); border: 1px solid #6b520f; background: #2a2109;
  padding: 3px 10px; border-radius: 999px;
}

.etiquette-vitesse {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .06em;
}
.etiquette-vitesse select { padding: 4px 6px; }

#plateau { display: grid; grid-template-columns: 1fr var(--panneau-l); min-height: 0; min-width: 0; }

#zone-carte { position: relative; background: var(--mer); overflow: hidden; min-width: 0; min-height: 0; }
#carte { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#carte.deplace { cursor: grabbing; }

/* ─────────────────────────────── carte SVG ─────────────────────────────── */

.dep {
  stroke: #0b131c;
  stroke-width: .8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: filter .1s;
}
/* Le nom du departement survole s'affiche desormais dans le panneau, loin du
   curseur : le survol doit donc se voir franchement sur la carte, sinon on ne
   sait plus lequel des deux voisins le panneau decrit. Un filtre plutot qu'un
   contour, car le trace porte deja des contours de selection et de cible, et
   un style en ligne pour les regions completes. */
@media (hover: hover) {
  .dep:hover { filter: brightness(1.28) drop-shadow(0 0 2.5px #fff); }
}
.dep.inactif { cursor: default; }
.dep.inactif:hover { filter: none; }

.dep.selection { stroke: var(--accent); stroke-width: 3.2; filter: brightness(1.2); }
.dep.cible { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 6 4; animation: pulse 1.1s infinite; }
.dep.possible { stroke: #ffffffb0; stroke-width: 1.9; }
.dep.attenue { opacity: .55; }

@keyframes pulse { 50% { stroke-opacity: .35; } }

.contour-region-fond {
  fill: none;
  stroke: #060c12;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.contour-region {
  fill: none;
  stroke: #f2f7fc;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* région entièrement contrôlée : le trait prend la couleur de son propriétaire */
.contour-region.mienne { stroke-width: 3.4; }

/* nom de région, inscrit au plus large de chaque région */
.nom-region {
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: #ffffffb0;
  stroke: #0b131c99;
  stroke-width: 3px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* effectif inscrit directement sur le département, lisible sur toutes les couleurs */
.effectif {
  /* pas de font-size ici : il est posé en attribut et suit le niveau de zoom */
  font-weight: 800;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #fff;
  stroke: #0b131c;
  stroke-width: 3.2px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.fil-pion {
  stroke: #000000a8; stroke-width: 1.6;
  vector-effect: non-scaling-stroke; pointer-events: none;
}

.lien-mer {
  stroke: #ffffff30; stroke-width: 1.6; stroke-dasharray: 5 6; fill: none;
  vector-effect: non-scaling-stroke; pointer-events: none;
}

/* Ce qu'il y a sous le curseur s'ecrit dans le panneau, jamais sur la carte :
   une bulle qui suit la souris masque les departements voisins, c'est-a-dire
   exactement ceux qu'on regarde pour decider ou attaquer.

   Deux precautions, apprises d'un defaut bien reel : le bloc se range APRES
   l'action, et sa hauteur est figee. Place avant et libre de grandir, il se
   remplissait au survol de la carte puis se vidait des que le curseur la
   quittait -- c'est-a-dire a l'instant precis ou le doigt visait le bouton
   jaune, qui remontait alors de cent points et laissait le clic tomber a
   cote. Il fallait presser deux fois. Sur iPhone rien ne paraissait, faute de
   survol ; sur iPad, ou Safari annonce un survol qu'il n'a pas, si. */
.bloc-survol { min-height: 108px; }
#bloc-action { order: -1; }
.survol-nom { font-size: 16px; font-weight: 650; }
.survol-nom span { color: var(--texte-doux); font-weight: 400; font-size: 14px; }
.survol-region { color: var(--texte-doux); font-size: 13.5px; margin-bottom: 4px; }
.bloc-survol .puce {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 3px; box-shadow: 0 0 0 2px #0005;
}
.survol-chances { color: var(--accent); font-size: 13.5px; margin-top: 5px; }
.survol-vide { color: var(--texte-doux); font-size: 13.5px; }
/* Les raccourcis clavier n'ont pas de sens la ou l'on joue au doigt. */
@media (hover: none) { .aide .clavier { display: none; } }
/* Au doigt il n'y a pas de survol : le bloc n'y afficherait jamais que son
   invite. On ne le masque cependant que dans la feuille du bas, ou il vient
   apres l'action -- ailleurs, le faire disparaitre deplacerait le panneau. */

.annonce {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  background: #0b131cf0; border: 1px solid var(--accent); color: var(--accent);
  padding: 9px 20px; border-radius: 999px; font-weight: 650; z-index: 6;
  animation: apparait .25s;
}
@keyframes apparait { from { opacity: 0; transform: translate(-50%, -10px); } }

/* ─────────────────────────────── panneau ─────────────────────────────── */

#panneau {
  background: var(--fond-2);
  border-left: 1px solid var(--bord);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Seul le corps defile : la tete, quand elle existe, tient sa place dans le
   flux. Aucun « position: sticky » n'est donc en jeu ici -- sa zone sensible
   se decale sur certains navigateurs tactiles apres un defilement. */
.corps-panneau {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
.tete-feuille { display: none; }     /* elle ne sert qu'au telephone */
.bloc { padding: 13px 15px; border-bottom: 1px solid var(--bord); }
.bloc h3 {
  margin: 0 0 9px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texte-doux);
}
.bloc-journal { flex: 1; min-height: 150px; display: flex; flex-direction: column; }

.aide { color: var(--texte-doux); font-size: 13.5px; margin: 0 0 10px; }
.aide kbd {
  background: var(--fond-3); border: 1px solid var(--bord); border-bottom-width: 2px;
  border-radius: 5px; padding: 0 5px; font-size: 12px; font-family: inherit;
}

.compteur-renforts {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
}
.compteur-renforts b { font-size: 30px; color: var(--accent); line-height: 1; }
.compteur-renforts span { color: var(--texte-doux); font-size: 13.5px; }

.actions { display: grid; gap: 8px; }
.actions .rangee { display: flex; gap: 8px; }
.actions .rangee > * { flex: 1; }

/* combat */
.duel {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 10px; margin-bottom: 10px; text-align: center;
}
.duel .camp b { display: block; font-size: 13.5px; }
.duel .camp span { font-size: 22px; font-weight: 700; }
.duel .contre { color: var(--texte-doux); font-size: 12px; }
.proba { text-align: center; font-size: 13.5px; color: var(--texte-doux); margin-bottom: 9px; }
.proba b { color: var(--texte); font-size: 16px; }

/* qui attaque qui : l'information principale d'un assaut, pas un détail */
.assaut-noms {
  display: flex; justify-content: center; align-items: baseline; gap: 8px;
  flex-wrap: wrap; text-align: center; font-size: 15px; margin: 2px 0 8px;
}
.assaut-noms span { color: var(--texte-doux); font-size: 12.5px; }

.des { display: flex; justify-content: center; gap: 14px; margin: 4px 0 10px; }
.des .groupe { display: flex; gap: 5px; }
.de {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; border: 1px solid #0006;
  animation: apparait .18s;
}
.de.att { background: #b91c1c; color: #fff; }
.de.def { background: #1d4ed8; color: #fff; }
.de.perdu { opacity: .35; }

.curseur { display: grid; gap: 6px; margin-bottom: 10px; }
.curseur input[type="range"] { width: 100%; accent-color: var(--accent); }
.curseur .valeur { text-align: center; font-size: 15px; }
.curseur .valeur b { color: var(--accent); font-size: 20px; }

/* cartes */
.main-cartes { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-jeu {
  border: 1px solid var(--bord); background: var(--fond-3); border-radius: 8px;
  padding: 6px 8px; font-size: 12.5px; cursor: pointer; min-width: 78px;
  transition: border-color .12s, background .12s;
}
.carte-jeu .sym { font-size: 17px; margin-right: 4px; }
/* jamais en emoji : ces symboles doivent s'aligner sur le texte qui les suit */
.sym { font-family: var(--symboles); font-variant-emoji: text; line-height: 1; }
.carte-jeu .nom { display: block; color: var(--texte-doux); font-size: 11px; }
.carte-jeu.choisie { border-color: var(--accent); background: #2a2109; }
.carte-jeu.possede { box-shadow: inset 3px 0 0 var(--accent); }
.carte-jeu:disabled { cursor: default; opacity: .75; }

/* joueurs */
.ligne-joueur {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 9px; align-items: center;
  padding: 6px 8px; border-radius: 8px; font-size: 13.5px;
}
.ligne-joueur.actif { background: #ffffff10; box-shadow: inset 0 0 0 1px var(--bord); }
.ligne-joueur.mort { opacity: .4; text-decoration: line-through; }
.ligne-joueur .puce { width: 13px; height: 13px; border-radius: 50%; }
.ligne-joueur .nom small { color: var(--texte-doux); font-weight: 400; }
.ligne-joueur .chiffres { color: var(--texte-doux); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ligne-joueur .chiffres b { color: var(--texte); }

/* régions */
.grille-regions { display: grid; gap: 3px; }
.ligne-region {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  font-size: 12.5px; padding: 3px 6px; border-radius: 6px; cursor: default;
}
.ligne-region:hover { background: #ffffff0d; }
.ligne-region .prog { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.ligne-region .bonus {
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 5px;
  padding: 0 6px; font-weight: 600; min-width: 30px; text-align: center;
}
.ligne-region.complete .bonus { background: var(--accent); color: #221a05; border-color: var(--accent-sombre); }
.ligne-region .drapeau { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* journal */
#journal {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  font-size: 12.5px; line-height: 1.45;
}
#journal li { padding: 3px 0 3px 9px; border-left: 2px solid var(--bord); color: var(--texte-doux); }
#journal li.tour { border-left-color: var(--accent); color: var(--texte); font-weight: 600; margin-top: 5px; }

/* ─────────────────────────────── modale ─────────────────────────────── */

.modale {
  position: fixed; inset: 0; background: #000a; display: grid; place-items: center;
  z-index: 50; padding: 20px; backdrop-filter: blur(2px);
}
.modale-boite {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 14px;
  width: min(620px, 100%); max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 26px 70px #000b;
}
.modale-entete {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--bord);
}
.modale-entete h2 { margin: 0; font-size: 19px; }
.modale-entete button { margin-left: auto; }
.modale-corps { padding: 18px; overflow-y: auto; }
.modale-corps h4 { margin: 16px 0 6px; color: var(--accent); font-size: 14px; }
.modale-corps h4:first-child { margin-top: 0; }
.modale-corps p, .modale-corps li { font-size: 14px; color: #cfdae7; }
.modale-corps ul { margin: 6px 0; padding-left: 20px; }
.modale-pied { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--bord); }

.podium { display: grid; gap: 7px; margin-top: 12px; }
.podium .rang {
  display: grid; grid-template-columns: 26px 14px 1fr auto; gap: 10px; align-items: center;
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 11px;
}
.podium .rang .puce { width: 13px; height: 13px; border-radius: 50%; }
.podium .rang.premier { border-color: var(--accent); background: #2a2109; }

/* ─────────────────────────────── responsive ─────────────────────────────── */

@media (max-width: 900px) {
  :root { --panneau-l: 300px; }
  .joueur-ligne { grid-template-columns: 22px 1fr 110px; }
  .joueur-ligne select:last-child { grid-column: 2 / -1; }
}
/* ───────────────────────── telephones et tablettes ─────────────────────────
   La carte est le jeu : elle prend tout ce qui reste, et le panneau devient une
   feuille au bas de l'ecran, repliable d'un doigt. Les outils de la barre du
   haut descendent dans la tete de cette feuille -- une seule ligne en haut, a
   portee de pouce en bas.
   La feuille suppose un ecran haut : un telephone couche n'a pas la hauteur de
   l'empiler sous la carte, il garde donc le panneau sur le cote. */
@media (max-width: 820px) and (min-height: 560px) {
  #plateau { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #panneau {
    border-left: none; border-top: 1px solid var(--bord);
    max-height: 38dvh;
  }
  /* repliee, la feuille n'est plus que sa barre d'outils */
  #panneau.replie { max-height: none; }
  #panneau.replie .corps-panneau { display: none; }

  .tete-feuille {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 10px; background: var(--fond-2);
    border-bottom: 1px solid var(--bord);
    flex: 0 0 auto;
  }
  .corps-panneau { padding-bottom: env(safe-area-inset-bottom); }
  /* display:contents dissout le groupe : les boutons deviennent les enfants
     directs de la tete et se rangent avec la poignee sur la meme ligne, au
     lieu de former un pave qui passe a la ligne d'un bloc */
  .tete-feuille .barre-droite { display: contents; }
  .tete-feuille .btn-mini { padding: 7px 9px; font-size: 12.5px; }
  /* le bouton d'etape prend toute la ligne suivante : on ne peut pas le manquer */
  .tete-feuille .btn-phase { order: 1; flex: 1 0 100%; margin: 0; padding: 10px 14px; }
  /* et l'original reste dans le panneau sans s'y montrer deux fois */
  #bloc-action #a-suite { display: none; }
  .tete-feuille #vitesse { max-width: 88px; }
  /* La partie se sauvegarde d'elle-meme apres chaque action et apres chaque
     tour d'ordinateur : sur un ecran etroit, le bouton ne vaut pas la ligne
     supplementaire qu'il ferait prendre a la barre d'outils. */
  .tete-feuille #btn-sauver { display: none; }
  .poignee {
    width: 40px; min-height: 34px; border: 1px solid var(--bord);
    background: var(--fond-3); border-radius: var(--rayon); cursor: pointer;
    display: grid; place-items: center;
  }
  .poignee::before {
    content: ""; width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 7px solid var(--texte-doux);
  }
  #panneau.replie .poignee::before {
    border-top: 0; border-bottom: 7px solid var(--texte-doux);
  }

  /* la barre du haut ne garde que l'etat de la partie */
  #barre { gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  #barre-tour { white-space: nowrap; font-size: 14px; }
  .jeton-joueur { padding: 3px 10px 3px 7px; font-weight: 600; }
  .etiquette { font-size: 11px; padding: 2px 9px; }
  .etiquette-vitesse .mot { display: none; }   /* le menu se lit tout seul */
  .btn-mini { padding: 7px 10px; font-size: 13px; }

  /* Sur la feuille, le survol se reduit a une ligne : il se remplit au toucher
     d'un departement, pas au survol, et disparait tant qu'on n'a touche a rien.
     Le test porte sur la taille de l'ecran et non sur « hover », que les
     navigateurs des tablettes annoncent a tort. */
  .bloc-survol {
    min-height: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  }
  .bloc-survol.vide { display: none; }
  .bloc-survol h3 { display: none; }
  .survol-nom { font-size: 15px; }
  .survol-region { margin-bottom: 0; }
  .survol-chances { margin-top: 0; width: 100%; }

  .compteur-renforts b { font-size: 26px; }
  /* scrollIntoView respecte cette marge : le bouton ramene a l'ecran ne se
     colle pas au bord bas, la ou vit la barre de geste d'un telephone */
  #bloc-action .btn { scroll-margin-block: 14px; }
  .bloc { padding: 11px 13px; }
  .bloc-journal { min-height: 110px; }
}

/* Ecran couche et bas : chaque point de hauteur compte. */
@media (max-height: 520px) {
  #barre { padding: 5px 10px; gap: 8px; }
  .bloc { padding: 9px 13px; }
  .compteur-renforts b { font-size: 24px; }
}

/* ────────────────────────────── petits ecrans ────────────────────────────── */
@media (max-width: 560px) {
  /* Plein ecran plutot qu'une carte posee au milieu : l'en-tete et le pied
     tiennent leur place, seul le corps defile. « Commencer la partie » ne quitte
     donc jamais l'ecran, meme a six joueurs et options depliees -- la liste
     mesure alors plus du double d'un ecran de 640 points. */
  #ecran-config { padding: 0; place-items: stretch; overflow: hidden; }
  .config-boite {
    width: 100%; border: 0; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; min-height: 0;
  }
  .config-entete {
    padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
    flex: 0 0 auto;
  }
  .config-entete h1 { font-size: 22px; }
  .config-corps { padding: 16px; gap: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .config-pied {
    padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    flex: 0 0 auto; flex-wrap: wrap;
  }
  .config-pied .btn { flex: 1 1 auto; }

  /* six lignes de joueur remplissent l'ecran : on les resserre un peu */
  .joueur-ligne { padding: 7px 9px; gap: 7px; }
  .joueur-ligne input[type="text"], .joueur-ligne select { padding: 6px 9px; }
  .champ-ligne { flex-wrap: wrap; gap: 10px; }
  /* le nom prend la premiere ligne, le type et le niveau la seconde */
  .joueur-ligne { grid-template-columns: 22px 1fr 1fr; gap: 8px; }
  .joueur-ligne input[type="text"] { grid-column: 2 / -1; }
  .joueur-ligne select:nth-of-type(1) { grid-column: 1 / 3; }
  .joueur-ligne select:nth-of-type(2) { grid-column: 3 / -1; }
  .ligne-graine input { width: 100%; }
  .modale { padding: 10px; }
  .modale-boite { max-height: 88dvh; }
  .modale-entete, .modale-pied { padding: 12px 14px; }
  .modale-corps { padding: 14px; }
  /* un bouton de modale se vise au pouce : il prend la largeur */
  .modale-pied { flex-wrap: wrap; }
  .modale-pied .btn { flex: 1 1 auto; }

  /* Podium : le nom et le decompte ne tiennent pas cote a cote sur 360 points,
     ou chacun se coupait en trois lignes. Le decompte passe sous le nom. */
  .podium .rang { grid-template-columns: 26px 14px 1fr; row-gap: 1px; padding: 8px 10px; }
  .podium .rang > span:last-child {
    grid-column: 3 / -1; font-size: 13px; color: var(--texte-doux);
  }
}