/* Style pixel art : police pixel, bords carrés, ombres "dures" décalées */
* { box-sizing: border-box; }

/* Police Jersey 10 (licence OFL, fichier dans /fonts) */
@font-face {
  font-family: "Jersey 10";
  src: url("/fonts/jersey-10-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --noir: #1a1423;
  --fond: #2b2238;
  --panneau: #3a2f4b;
  --bord: #6b5a85;
  --texte: #f4f0e8;
  --or: #f2c14e;
  --or-fonce: #b57f2a;
  --rouge: #ff8a7a;
  --vert: #4f9a3c;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1a3350;
  color: var(--texte);
  font-family: "Jersey 10", "Courier New", monospace;
  font-size: 20px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#jeu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  cursor: none; /* le viseur pixel remplace le curseur */
  image-rendering: pixelated;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 4px),
    rgba(26, 51, 80, 0.92);
  z-index: 10;
  overflow-y: auto;
  touch-action: pan-y;
}
/* La carte est centrée par ses marges automatiques : si elle dépasse, on peut défiler jusqu'en haut */
.overlay { align-items: flex-start; }
.overlay > .carte-accueil { margin: auto 0; }
.overlay.cache { display: none; }

.carte-accueil {
  width: 100%;
  max-width: 420px;
  padding: 22px;
  background: var(--panneau);
  border: 4px solid var(--noir);
  box-shadow: inset 0 0 0 3px var(--bord), 6px 6px 0 var(--noir);
  image-rendering: pixelated;
  touch-action: auto;
}

h1 {
  margin: 0;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 3px;
  text-align: center;
  color: var(--or);
  text-shadow: 3px 3px 0 var(--or-fonce), 6px 6px 0 var(--noir);
}
h2 { margin: 0 0 8px; text-align: center; color: var(--or); text-shadow: 2px 2px 0 var(--noir); }

/* Numéro de version, en petit à côté du titre */
.version { font-size: 14px; letter-spacing: 1px; opacity: 0.55; vertical-align: middle; color: var(--creme, #e8dcb8); text-shadow: none; }
.sous-titre { margin: 6px 0 18px; text-align: center; opacity: 0.8; letter-spacing: 2px; }

label { display: block; margin: 14px 0 6px; font-size: 20px; color: var(--or); }

input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 22px; /* 16px minimum : évite le zoom automatique sur iPhone */
  border: 3px solid var(--noir);
  box-shadow: inset 3px 3px 0 rgba(0,0,0,0.35);
  background: var(--fond);
  color: var(--texte);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
input:focus { border-color: var(--or); }

.perso { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.perso canvas {
  width: 120px;
  height: 120px;
  flex: none;
  image-rendering: pixelated;
  background: #4f9a3c;
  border: 3px solid var(--noir);
  box-shadow: inset 0 0 0 3px #3f7a30, 3px 3px 0 var(--noir);
}
.perso-droite { flex: 1; min-width: 0; }
.perso-droite label { margin-top: 0; }
.indice { color: var(--texte); opacity: 0.55; font-size: 16px; }

.petit-bouton {
  margin-top: 10px;
  width: 100%;
  padding: 6px;
  font: inherit;
  font-size: 18px;
  border: 3px solid var(--noir);
  background: var(--fond);
  color: var(--texte);
  box-shadow: 3px 3px 0 var(--noir);
  cursor: pointer;
}
.petit-bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noir); }

.arme {
  padding: 6px 4px 8px;
  border: 3px solid var(--noir);
  background: var(--fond);
  box-shadow: 3px 3px 0 var(--noir);
  color: inherit;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.arme canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.arme small { opacity: 0.7; font-size: 15px; line-height: 1; }
.arme.choisie { border-color: var(--or); background: #4a3d60; }
.arme:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noir); }

.atelier {
  padding: 8px 10px 10px;
  background: var(--fond);
  border: 3px solid var(--noir);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
}
.sous-label { display: block; margin: 4px 0 4px; font-size: 16px; opacity: 0.8; }
.sous-label.inactif, .pastilles.inactif { opacity: 0.3; pointer-events: none; }

.pastilles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pastille {
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid var(--noir);
  cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.25);
}
.pastille.choisie { outline: 3px solid var(--or); outline-offset: 1px; }

.motifs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.motif {
  padding: 2px;
  border: 3px solid var(--noir);
  background: var(--panneau);
  cursor: pointer;
  line-height: 0;
}
.motif canvas { width: 100%; image-rendering: pixelated; }
.motif.choisie { border-color: var(--or); }

/* v0.47 : modèles de chapeau (un clic ouvre les variantes) */
.modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-bottom: 8px; }
.modele {
  font: inherit; font-size: 15px; color: var(--texte); line-height: 1.05;
  padding: 4px 2px 5px; border: 3px solid var(--noir); background: var(--panneau); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.modele canvas { width: 60px; height: 60px; image-rendering: pixelated; }
.modele.choisie { border-color: var(--or); background: #4a3d5e; }
.modele .fleche { font-size: 12px; color: var(--or); }
.atelier.cache { display: none; }
/* v0.52 : choix de l'emplacement d'accessoire (yeux, bouche, coiffe, cou) */
.emplacements { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.emplacement {
  font: inherit; font-size: 17px; color: var(--texte); padding: 3px 12px; border: 3px solid var(--noir);
  background: var(--panneau); cursor: pointer;
}
.emplacement.choisi { border-color: var(--or); background: #4a3d5e; color: var(--or); }
.emplacement .point { color: var(--or); }
.cache-motifs { display: none !important; }
.titre-variantes { display: block; color: var(--or); font-size: 18px; margin-bottom: 2px; }

.bouton {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font: inherit;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 2px;
  border: 3px solid var(--noir);
  background: var(--or);
  color: var(--noir);
  box-shadow: inset -4px -4px 0 var(--or-fonce), 4px 4px 0 var(--noir);
  cursor: pointer;
}
.bouton:active { transform: translate(3px, 3px); box-shadow: inset -4px -4px 0 var(--or-fonce), 1px 1px 0 var(--noir); }
.bouton:disabled { opacity: 0.5; cursor: default; }

.message { min-height: 20px; margin: 12px 0 0; text-align: center; color: var(--rouge); font-size: 19px; }

/* ---------- Modes de jeu ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modes.cartes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.modes.cartes .mode small { font-size: 0.85em; }
.mode {
  padding: 8px 6px;
  border: 3px solid var(--noir);
  background: var(--fond);
  box-shadow: 3px 3px 0 var(--noir);
  color: inherit;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
  text-align: center;
  line-height: 1.05;
}
.mode small { display: block; opacity: 0.7; font-size: 15px; margin-top: 3px; }
.mode.choisie { border-color: var(--or); background: #4a3d60; }
/* v0.42 : type de partie (Classique / Classé / Entraînement) ; Classé grisé pour l'instant */
.modes.types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.8); }
.mode:disabled:active { transform: none; box-shadow: 3px 3px 0 var(--noir); }
#bloc-classique.cache, #bloc-entrainement.cache { display: none; }
#bloc-classique > h2, #bloc-entrainement > h2 { margin-top: 18px; }
.mode:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noir); }

/* ---------- Attente et fin de match ---------- */
.centre { text-align: center; }
.gros { font-size: 30px; margin: 8px 0; color: var(--or); text-shadow: 2px 2px 0 var(--noir); }
.petit { font-size: 16px; opacity: 0.75; margin: 8px 0 0; }
.barre { height: 16px; border: 3px solid var(--noir); background: var(--fond); margin: 10px 0; }
.barre div { height: 100%; width: 0; background: var(--or); transition: width 0.25s linear; }
#fin-titre { font-size: 46px; margin-bottom: 0; }
#fin-titre.victoire { color: #7ec850; }
#fin-titre.defaite { color: #ff8a7a; }
/* Résumé de fin de match du mode Armée : deux colonnes (une par camp), puis le détail par type d'unité */
#fin .carte-accueil:has(.fin-resume:not(.cache)) { max-width: 940px; width: calc(100% - 24px); }
.fin-resume.cache, #fin-stats.cache { display: none; }
.fin-resume { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; text-align: left; }
.fin-duree { grid-column: 1 / -1; text-align: center; opacity: 0.8; font-size: 16px; }
.resume-equipe { background: rgba(0, 0, 0, 0.22); border: 2px solid var(--bord); padding: 8px 10px; }
.resume-equipe.bleus { border-color: #4a8fe0; }
.resume-equipe.rouges { border-color: #e0503f; }
.resume-equipe.gagnant { box-shadow: 0 0 0 2px var(--or); }
.resume-equipe h3 { margin: 0 0 6px; font-size: 22px; font-weight: 400; }
.resume-equipe.bleus h3 { color: #9fd0ff; }
.resume-equipe.rouges h3 { color: #ffaa9a; }
.resume-equipe h3 small { color: var(--texte); opacity: 0.7; font-size: 15px; margin-left: 6px; }
.resume-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.resume-chiffres div { background: rgba(0, 0, 0, 0.25); padding: 3px 6px; }
.resume-chiffres small { display: block; font-size: 13px; opacity: 0.75; }
.resume-chiffres b { font-weight: 400; color: var(--or); font-size: 20px; }
.resume-types { width: 100%; border-collapse: collapse; font-size: 15px; }
.resume-types th { color: var(--or); font-weight: 400; text-align: right; padding: 1px 3px; }
.resume-types th:first-child, .resume-types td:first-child { text-align: left; }
.resume-types td { text-align: right; padding: 1px 3px; border-top: 1px solid rgba(0, 0, 0, 0.3); white-space: nowrap; }
.resume-types canvas { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; }
.resume-types tr.mvp td:first-child { color: var(--or); }
.barre-comparee { grid-column: 1 / -1; display: flex; height: 14px; border: 2px solid var(--noir); }
.barre-comparee span:first-child { background: #4a8fe0; }
.barre-comparee span:last-child { background: #e0503f; }
@media (max-width: 640px) { .fin-resume { grid-template-columns: 1fr; } .resume-types { font-size: 13px; } }
.stats { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 17px; }
.stats th { color: var(--or); font-weight: 400; padding: 2px 4px; }
.stats td { padding: 1px 4px; border-top: 2px solid rgba(0,0,0,0.25); }
.stats td:first-child { text-align: left; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats tr.bleus td:first-child { color: #9fd0ff; }
.stats tr.rouges td:first-child { color: #ffaa9a; }
.stats tr.moi td { color: var(--or); }

/* ---------- Composition de l'armée ---------- */
.aide { margin: 0 0 8px; font-size: 16px; opacity: 0.75; line-height: 1.1; }
.composition { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
/* v0.65 : filtre des unités par catégorie */
.filtre-unites { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filtre-unites .emplacement { padding: 4px 10px; }
.unite.filtree { display: none; }
#filtre-vide.cache { display: none; }
.unite {
  min-width: 0;
  padding: 4px 1px 5px;
  border: 3px solid var(--noir);
  background: var(--fond);
  box-shadow: 3px 3px 0 var(--noir);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
}
.unite.active { border-color: var(--or); background: #4a3d60; }
.unite canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.unite .compteur { display: flex; align-items: center; justify-content: center; gap: 1px; width: 100%; }
.unite .compteur button {
  flex: none;
  width: 19px;
  height: 21px;
  padding: 0;
  border: 2px solid var(--noir);
  background: var(--panneau);
  color: var(--texte);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.unite .compteur button:active { transform: translate(1px, 1px); }
.unite .compteur button:disabled { opacity: 0.35; cursor: default; }
.unite .compteur span { min-width: 15px; text-align: center; font-size: 19px; color: var(--or); }
.boutons-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Bouton Quitter de l'entraînement : en haut au centre, sous le compteur de dégâts */
#quitter {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  margin: 0;
  padding: 4px 12px;
  font-size: 16px;
  z-index: 5;
}
#quitter:active { transform: translate(calc(-50% + 2px), 2px); }
#quitter.cache { display: none; }
/* Replay de fin de match (v0.43) : bouton Passer en bas à droite, au-dessus de la bande noire */
#replay { position: fixed; right: 16px; bottom: calc(9vh + 12px); z-index: 5; }
#replay.cache { display: none; }
#revoir-replay { width: auto; margin: 0 0 6px; padding: 3px 16px; }
#revoir-replay.cache { display: none; }
#passer-replay { width: auto; margin: 0; padding: 6px 16px; font-size: 18px; }
#entrainement { margin-top: 8px; }

/* ---------- Éditeur de la barre de sorts (mode Armée) ---------- */
.barre-cases { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.case-barre {
  position: relative;
  min-width: 0;
  padding: 12px 0 2px;
  border: 3px solid var(--noir);
  background: var(--fond);
  box-shadow: 2px 2px 0 var(--noir);
  cursor: pointer;
  line-height: 0;
}
.case-barre canvas { width: 100%; max-width: 32px; image-rendering: pixelated; }
.case-barre span { position: absolute; top: 1px; left: 3px; font-size: 13px; line-height: 1; color: var(--texte); opacity: 0.8; }
.case-barre em { position: absolute; bottom: 1px; right: 2px; font-style: normal; font-size: 12px; line-height: 1; color: var(--or); }
.case-barre.vide canvas { opacity: 0.2; }
.case-barre.choisie { border-color: var(--or); background: #4a3d60; }
.barre-info { margin: 6px 0 4px; min-height: 18px; color: var(--or); opacity: 1; }
.barre-sorts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.sort-barre {
  min-width: 0;
  padding: 3px 1px 4px;
  border: 3px solid var(--noir);
  background: var(--fond);
  box-shadow: 2px 2px 0 var(--noir);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sort-barre canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.sort-barre.active { border-color: var(--or); background: #4a3d60; }
.sort-barre.absent { opacity: 0.4; }

/* Cases en boucle */
.case-barre i { display: none; position: absolute; bottom: 1px; left: 0; right: 0; font-style: normal; font-size: 10px; line-height: 1; color: var(--noir); background: var(--or); }
.case-barre.en-boucle { border-color: #7ec850; }
.case-barre.en-boucle i { display: block; }
.case-barre.en-boucle.choisie { border-color: var(--or); }
#barre-boucle.actif { background: #7ec850; color: var(--noir); }
.case-barre.en-boucle.tour { border-color: #6cb4e8; }
.case-barre.en-boucle.tour i { background: #6cb4e8; }

/* Menu en jeu : fond plus transparent pour voir le match qui continue */
#menu-jeu { background: rgba(26, 20, 35, 0.55); }
#menu-jeu .bouton { margin-top: 12px; }
#abandonner { color: var(--rouge); }
/* Sur téléphone, le score est en bas : le bouton Menu monte tout en haut */
@media (max-width: 639px) { #quitter { top: 10px; } }
#abandonner.cache { display: none; }

/* =====================================================================
   Accueil v0.23 : en-tête (titre + onglets), un onglet à la fois + fiche à droite, pied fixe.
   Plus gros et lisible ; pensé aussi pour le téléphone à l'horizontale (chaque onglet tient sur l'écran).
   Cadres en pixel art repris de Project_inko (public/ui) : pierre = panneaux, bois = fiche,
   pointillés dorés = sélection.
   ===================================================================== */
.accueil.overlay { padding: 0; align-items: stretch; overflow: hidden; }
.ecran-accueil {
  width: 100%;
  max-width: 1500px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 24px;
}

/* En-tête : titre à gauche, onglets à droite */
.entete-accueil {
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px 10px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.entete-accueil h1 { flex: none; text-align: left; font-size: 50px; line-height: 1; white-space: nowrap; }
.onglets { flex: 1; display: flex; gap: 8px; justify-content: flex-end; }
.onglets button {
  padding: 10px 20px 8px;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  color: var(--texte);
  background: var(--fond);
  border: 3px solid var(--noir);
  box-shadow: 3px 3px 0 var(--noir);
  cursor: pointer;
  white-space: nowrap;
}
.onglets button small { font-size: 18px; opacity: 0.75; margin-left: 4px; }
.onglets button.choisi { background: var(--or); color: var(--noir); box-shadow: inset -3px -3px 0 var(--or-fonce), 3px 3px 0 var(--noir); }
.onglets button.choisi small { opacity: 0.85; }
.onglets button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noir); }
/* v0.74 : le bouton Jouer passe en or puis redevient normal, pour attirer les nouveaux joueurs */
.onglets button.appel { animation: appel-jouer 1.6s ease-in-out infinite; }
@keyframes appel-jouer {
  0%, 100% { background: var(--fond); color: var(--texte); }
  50% { background: var(--or); color: var(--noir); box-shadow: 0 0 14px rgba(242, 193, 78, 0.7), 3px 3px 0 var(--noir); }
}
@media (prefers-reduced-motion: reduce) { .onglets button.appel { animation: none; border-color: var(--or); color: var(--or); } }
/* v0.74 : actualités */
.liste-actus { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.actu { border: 3px solid var(--noir); background: var(--fond); padding: 12px 16px; box-shadow: 3px 3px 0 var(--noir); text-align: left; }
.actu.derniere { border-color: var(--or-fonce); box-shadow: 0 0 0 2px var(--noir), 3px 3px 0 var(--noir); }
.actu .date-actu { font-size: 16px; color: #b9aacd; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.actu .date-actu .badge { transform: none; margin-left: 0; }
.actu h3 { margin: 4px 0 6px; font-size: 30px; font-weight: normal; color: var(--or); text-shadow: 2px 2px 0 var(--noir); }
.actu p { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.actu p b { color: var(--or); font-weight: normal; }
.icones-actu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.icones-actu canvas { width: 56px; height: 56px; image-rendering: pixelated; background: var(--panneau); border: 2px solid var(--noir); }
.actu .petit-bouton { margin: 0; width: auto; padding-left: 18px; padding-right: 18px; }

/* Corps : contenu de l'onglet (défile) + fiche */
.corps-accueil {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  padding: 0 20px 14px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.corps-accueil.sans-fiche { grid-template-columns: minmax(0, 1fr); }
.corps-accueil.sans-fiche .fiche { display: none; }
.contenu-accueil { min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.onglet { display: none; }
.onglet.visible { display: block; }

/* Panneau : même fond que les fenêtres de base (v0.26 : plus de cadre PNG, ses coins laissaient voir le fond) */
.panneau {
  min-width: 0;
  min-height: 100%;
  padding: 14px 20px 20px;
  background: var(--panneau);
  border: 4px solid var(--noir);
  box-shadow: inset 0 0 0 3px var(--bord);
}
.panneau h2 { margin: 0 0 10px; text-align: left; font-size: 32px; font-weight: 400; line-height: 1.1; }
.panneau h2:not(:first-child), #bloc-armee h2:not(:first-child) { margin-top: 18px; }
.panneau h3 { margin: 18px 0 8px; font-size: 28px; font-weight: 400; color: var(--or); }
.panneau .indice { font-size: 20px; }
.panneau .sous-titre { margin: 0 0 6px; text-align: left; font-size: 22px; }
.aide { margin: 10px 0; font-size: 20px; opacity: 0.8; line-height: 1.15; }

/* Modes et cartes : grandes cases */
.mode { padding: 14px 10px; font-size: 30px; }
.mode small { font-size: 19px; margin-top: 6px; }
.modes { gap: 12px; }
.modes.cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

/* Composition : 7 colonnes, cartes lisibles et boutons faciles à toucher */
.composition { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.unite { padding: 6px 2px 8px; font-size: 19px; gap: 4px; }
.unite canvas { width: 44px; height: 44px; }
.unite > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.unite .compteur { gap: 4px; }
.unite .compteur button { width: 32px; height: 32px; font-size: 26px; border-width: 3px; }
.unite .compteur span { min-width: 22px; font-size: 26px; }
.petit-bouton { font-size: 22px; padding: 8px; }
.boutons-ligne { margin-top: 4px; }
.boutons-ligne.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Barre de sorts : 10 grandes cases, sorts de l'armée à glisser dedans */
.barre-cases { gap: 6px; }
.case-barre { padding: 18px 0 6px; border-width: 3px; touch-action: none; }
.case-barre canvas { max-width: 56px; }
.case-barre span { font-size: 18px; top: 2px; left: 5px; }
.case-barre em { font-size: 16px; }
.case-barre i { font-size: 13px; }
.case-barre.survol { outline: 4px solid #7ec850; outline-offset: -2px; }
.barre-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; margin: 10px 0; color: var(--or); font-size: 22px; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  font: inherit;
  font-size: 20px;
  color: var(--texte);
  background: var(--fond);
  border: 3px solid var(--noir);
  cursor: pointer;
}
.puce canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.puce b { font-weight: 400; color: var(--rouge); padding: 0 6px; font-size: 24px; line-height: 1; }
/* v0.32 : numéro d'ordre de lancement, boutons « avancer » et « retirer » */
.puce i { font-style: normal; color: var(--or); margin-right: 2px; }
.puce button { font: inherit; font-size: 24px; line-height: 1; padding: 0 6px; background: none; border: 0; cursor: pointer; }
.puce .avancer { color: var(--or); }
.puce .retirer { color: var(--rouge); }
.barre-sorts { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.sort-barre { padding: 6px 2px 8px; font-size: 18px; touch-action: none; cursor: grab; }
.sort-barre canvas { width: 40px; height: 40px; }
.sort-barre.absent { display: none; }
.fantome-glisse {
  position: fixed;
  z-index: 50;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  pointer-events: none;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 var(--noir));
}

/* Onglet Chef */
.perso { gap: 18px; }
.medaillon {
  flex: none;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  /* v0.55 (demande de Kevin) : cadre dans le style des fenêtres (plus de cadre PNG de Project_inko) : bordure noire,
     liseré clair, fond sombre, coins en escalier comme un pixel art */
  background: var(--fond);
  border: 4px solid var(--noir);
  box-shadow: inset 0 0 0 3px var(--bord), inset 0 0 0 6px var(--noir);
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
}
.medaillon canvas, .perso .medaillon canvas { width: 100px; height: 100px; border: 0; border-radius: 0; box-shadow: none; background: #4f9a3c; }
label { font-size: 24px; }
input { font-size: 26px; }
.competences { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.competences .arme { padding: 6px 4px 8px; font-size: 22px; }
.competences .arme canvas { width: 44px; height: 44px; }
.arme small { font-size: 17px; }
.sous-label { font-size: 20px; }
.pastilles { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.motifs { grid-template-columns: repeat(7, minmax(0, 56px)); }

/* Sélection : cadre en pointillés dorés (PNG 22 px, bordure 2 px agrandie x3) */
.arme.choisie, .mode.choisie, .unite.active, .sort-barre.active, .case-barre.choisie {
  border: 6px solid transparent;
  border-image: url("/ui/cadre_or.png") 3 / 6px stretch;
  background: #4a3d60;
  box-shadow: none;
}
.arme, .mode { border-width: 3px; }

/* Fiche : défile seule */
.fiche {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 18px;
  background: var(--panneau);
  border: 4px solid var(--noir);
  box-shadow: inset 0 0 0 3px var(--bord);
  line-height: 1.15;
}
.fiche-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fiche-tete .medaillon { width: 88px; height: 88px; }
/* v0.49 : aperçu du chapeau bien plus grand dans la fenêtre Profil */
.bloc-profil .perso .medaillon { width: 240px; height: 240px; }
.bloc-profil .perso .medaillon canvas { width: 222px; height: 222px; }
.fiche-tete .medaillon canvas { width: 72px; height: 72px; background: #2b2238; }
.fiche h2 { margin: 0; font-size: 38px; font-weight: 400; text-align: left; color: var(--or); line-height: 1; }
.fiche .fiche-genre { margin: 2px 0 0; font-size: 19px; opacity: 0.75; }
.fiche h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 26px; font-weight: 400; color: var(--texte); }
.fiche h3 canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.fiche h3 small { color: var(--or); font-size: 26px; }
.fiche p { margin: 0 0 10px; font-size: 22px; }
.fiche .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin: 0; }
.fiche .stats div { padding: 4px 8px 5px; background: #1c1825; border: 2px solid #564654; }
.fiche .stats dt { font-size: 17px; opacity: 0.75; }
.fiche .stats dd { margin: 0; font-size: 28px; line-height: 1; color: var(--or); }
.fiche .note { margin-top: 12px; padding: 6px 8px; font-size: 19px; color: #c9f0a8; background: rgba(79, 154, 60, 0.18); border-left: 3px solid #7ec850; }

/* Pied fixe : message, réglages du son, Entraînement (mode Armée) et Jouer */
.pied-accueil {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  background: rgba(26, 20, 35, 0.94);
  border-top: 3px solid var(--noir);
}
.pied-accueil .message { flex: 1; margin: 0; text-align: left; font-size: 22px; }
.pied-accueil .bouton { width: auto; min-width: 240px; margin: 0; padding: 10px 34px; font-size: 36px; }
.pied-accueil .petit-bouton { width: auto; margin: 0; padding: 10px 16px; font-size: 22px; white-space: nowrap; }
#entrainement.cache { display: none; }

/* Premier écran (déblocage du son) */
.demarrage { z-index: 30; align-items: center; background: #1a3350; }
.demarrage.cache { display: none; }
#commencer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font: inherit;
  color: var(--texte);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.titre-demarrage { font-size: min(14vw, 110px); line-height: 1; color: var(--or); text-shadow: 4px 4px 0 var(--or-fonce), 8px 8px 0 var(--noir); text-align: center; }
.appel { font-size: min(6vw, 34px); animation: clignote 1.2s steps(2, start) infinite; }
@keyframes clignote { to { visibility: hidden; } }

/* PC moyen : fiche plus étroite */
@media (max-width: 1250px) {
  .corps-accueil { grid-template-columns: minmax(0, 1fr) 320px; }
  .composition { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .entete-accueil h1 { font-size: 42px; }
  .onglets button { font-size: 24px; padding: 8px 14px 6px; }
}

/* Téléphone à l'horizontale (écran bas) : tout sur une ligne, en-tête et pied compacts */
@media (max-height: 520px) {
  .ecran-accueil { font-size: 18px; }
  .entete-accueil { gap: 12px; padding-top: 6px; padding-bottom: 6px; }
  .entete-accueil h1 { font-size: 26px; text-shadow: 2px 2px 0 var(--or-fonce), 3px 3px 0 var(--noir); letter-spacing: 1px; }
  .entete-accueil h1 .version { display: none; }
  .onglets { gap: 6px; }
  .onglets button { font-size: 20px; padding: 6px 10px 5px; }
  .onglets button small { font-size: 15px; }
  .corps-accueil { grid-template-columns: minmax(0, 1fr) 250px; gap: 8px; padding-bottom: 6px; }
  .panneau { padding: 8px 12px 10px; }
  .panneau h2 { font-size: 24px; margin-bottom: 6px; }
  .panneau h2:not(:first-child), #bloc-armee h2:not(:first-child) { margin-top: 8px; }
  .panneau h3 { font-size: 22px; margin: 8px 0 4px; }
  .panneau .indice, .panneau .sous-titre { font-size: 16px; }
  .aide { font-size: 16px; margin: 6px 0; }
  .mode { padding: 8px 6px; font-size: 22px; }
  .mode small { font-size: 15px; margin-top: 3px; }
  .modes { gap: 8px; }
  .composition { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .unite { padding: 2px 1px 3px; font-size: 14px; gap: 1px; }
  .unite canvas { width: 26px; height: 26px; }
  .unite .compteur { gap: 1px; }
  .unite .compteur button { width: 22px; height: 24px; font-size: 20px; border-width: 2px; }
  .unite .compteur span { min-width: 14px; font-size: 19px; }
  .aide-longue { display: none; }
  .petit-bouton { font-size: 18px; padding: 5px; margin-top: 6px; }
  .case-barre { padding: 13px 0 3px; }
  .case-barre canvas { max-width: 40px; }
  .case-barre span { font-size: 14px; }
  .barre-info { min-height: 34px; margin: 6px 0; font-size: 18px; }
  .puce { font-size: 16px; }
  .puce canvas { width: 20px; height: 20px; }
  .barre-sorts { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
  .sort-barre { font-size: 15px; padding: 3px 1px 4px; }
  .sort-barre canvas { width: 30px; height: 30px; }
  .medaillon { width: 100px; height: 100px; }
  .medaillon canvas, .perso .medaillon canvas { width: 86px; height: 86px; }
  label { font-size: 18px; margin: 4px 0; }
  input { font-size: 20px; padding: 6px 8px; }
  .competences .arme { font-size: 18px; }
  .competences .arme canvas { width: 32px; height: 32px; }
  .arme small { font-size: 14px; }
  .sous-label { font-size: 16px; }
  .fiche { padding: 8px 12px 10px; }
  .fiche-tete .medaillon { width: 60px; height: 60px; }
  .bloc-profil .perso .medaillon { width: 170px; height: 170px; }
  .bloc-profil .perso .medaillon canvas { width: 156px; height: 156px; }
  .fiche-tete .medaillon canvas { width: 48px; height: 48px; }
  .fiche h2 { font-size: 26px; }
  .fiche .fiche-genre { font-size: 15px; }
  .fiche h3, .fiche h3 small { font-size: 20px; margin: 8px 0 4px; }
  .fiche h3 canvas { width: 26px; height: 26px; }
  .fiche p { font-size: 17px; margin-bottom: 6px; }
  .fiche .stats { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; }
  .fiche .stats dt { font-size: 14px; }
  .fiche .stats dd { font-size: 20px; }
  .fiche .note { font-size: 15px; }
  /* La fiche devient une fenêtre posée à droite : ouverte en touchant une unité, fermée en la touchant */
  .corps-accueil, .corps-accueil.sans-fiche { grid-template-columns: minmax(0, 1fr); position: relative; }
  .fiche { display: none; position: absolute; z-index: 5; top: 0; right: max(8px, env(safe-area-inset-right, 0px)); bottom: 6px; width: 300px; box-shadow: -6px 6px 0 rgba(0, 0, 0, 0.5); }
  .fiche.ouverte { display: block; }
  .corps-accueil.sans-fiche .fiche.ouverte { display: none; }
  .fiche::before { content: '×'; float: right; font-size: 30px; line-height: 1; color: var(--rouge); }
  .composition { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .barre-sorts { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .pied-accueil { gap: 8px; padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
  .pied-accueil .message { font-size: 16px; }
  .pied-accueil .bouton { min-width: 150px; padding: 4px 18px; font-size: 26px; }
  .pied-accueil .petit-bouton { padding: 5px 8px; font-size: 16px; }
}

/* Téléphone à la verticale : onglets sur toute la largeur, fiche sous le contenu */
@media (max-width: 700px) and (min-height: 521px) {
  .ecran-accueil { font-size: 18px; }
  .entete-accueil { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 8px 6px; }
  .entete-accueil h1 { text-align: center; font-size: 34px; }
  .onglets { justify-content: stretch; flex-wrap: wrap; }
  .onglets button { flex: 1 1 40%; font-size: 20px; padding: 8px 6px 6px; }
  .corps-accueil { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 0 8px 8px; gap: 8px; }
  /* La fiche devient une fenêtre (comme sur téléphone à l'horizontale) */
  .corps-accueil, .corps-accueil.sans-fiche { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; position: relative; }
  .fiche { display: none; position: absolute; z-index: 5; left: 8px; right: 8px; bottom: 8px; max-height: 70%; box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.5); }
  .fiche.ouverte { display: block; }
  .corps-accueil.sans-fiche .fiche.ouverte { display: none; }
  .fiche::before { content: '×'; float: right; font-size: 30px; line-height: 1; color: var(--rouge); }
  .unite .compteur { gap: 2px; }
  .unite .compteur button { width: 26px; height: 28px; font-size: 22px; }
  .panneau { padding: 2px 6px 10px; }
  .composition { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .barre-cases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .barre-sorts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .sort-barre { font-size: 14px; }
  .sort-barre canvas { width: 32px; height: 32px; }
  .modes.cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-accueil { flex-wrap: wrap; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .pied-accueil .reglage { flex: 1; padding: 5px 4px; font-size: 16px; }
  .pied-accueil .bouton { flex: 1 1 60%; min-width: 0; font-size: 28px; }
  .pied-accueil .message:empty { display: none; }
  .pied-accueil .message { flex-basis: 100%; margin: 0; }
  .pastilles { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

/* Menu en jeu, attente et fin de match : plus gros (v0.23) */
#menu-jeu .carte-accueil, #attente .carte-accueil { max-width: 520px; }
#menu-jeu .petit-bouton, #attente .petit-bouton, #fin .petit-bouton { font-size: 22px; padding: 10px; }
#menu-jeu h2, #attente h2 { font-size: 34px; }
#menu-jeu .petit, #attente .petit { font-size: 18px; }
@media (max-height: 520px) {
  #menu-jeu .carte-accueil { padding: 12px 16px; }
  #menu-jeu .bouton { padding: 6px; font-size: 26px; margin-top: 8px; }
  #menu-jeu .petit-bouton { padding: 6px; font-size: 18px; margin-top: 6px; }
  #menu-jeu h2 { font-size: 26px; margin-bottom: 2px; }
}

/* ---------- Compte (v0.25) ---------- */
.bouton-compte {
  flex: none;
  max-width: 230px;
  padding: 10px 16px 8px;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  color: var(--or);
  background: var(--fond);
  border: 3px solid var(--noir);
  box-shadow: 3px 3px 0 var(--noir);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bouton-compte::before { content: '◆ '; font-size: 0.7em; vertical-align: 0.1em; }
.bouton-compte.connecte { color: var(--texte); border-color: var(--or); }
.bouton-compte.connecte::before { color: #6fd36f; }
.bouton-compte:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noir); }
.bouton-compte.cache { display: none; }
#compte { z-index: 30; }
.fenetre-compte { position: relative; max-width: 460px; }
.fenetre-compte:has(.vue-profil) { max-width: 720px; }
.bloc-profil { margin: 8px 0 4px; text-align: left; }
.bloc-profil.cache { display: none; }
.bloc-profil h3 { margin: 12px 0 6px; color: var(--or); }
/* v0.54 : menu du profil en onglets */
.onglets-profil { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.onglet-profil {
  font: inherit; font-size: 19px; color: var(--texte); padding: 4px 14px; border: 3px solid var(--noir);
  background: var(--panneau); cursor: pointer;
}
.onglet-profil.choisi { border-color: var(--or); color: var(--or); background: #4a3d5e; }
.onglet-profil.deconnexion { margin-left: auto; color: #f0a0a0; }
.section-profil { display: none; }
.bloc-profil[data-onglet="profil"] .section-profil[data-section="profil"],
.bloc-profil[data-onglet="skin"] .section-profil[data-section="skin"],
.bloc-profil[data-onglet="options"] .section-profil[data-section="options"] { display: block; }
.section-profil input { width: 100%; }
.options-liste { display: flex; flex-direction: column; gap: 8px; }
.options-liste .petit-bouton { width: 100%; font-size: 20px; }
/* v0.54 : éditeur des accessoires posés */
.reglage-accessoire { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.reglage-accessoire.cache { display: none; }
.boutons-accessoire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.boutons-accessoire .petit-bouton { margin: 0; padding: 4px 2px; font-size: 18px; }
.boutons-accessoire [data-action="centre"], .boutons-accessoire [data-action="retirer"] { grid-column: span 2; }
.poses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pose {
  font: inherit; font-size: 15px; color: var(--texte); padding: 2px 6px 2px 2px; border: 3px solid var(--noir);
  background: var(--panneau); cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.pose canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.pose.choisie { border-color: var(--or); background: #4a3d5e; }
.modele.plein { opacity: 0.45; }
#apercu { touch-action: none; cursor: grab; }
.vue-profil .boutons-ligne { margin-top: 10px; }
.fermer-compte {
  position: absolute; top: 6px; right: 10px;
  font: inherit; font-size: 36px; line-height: 1;
  color: var(--rouge); background: none; border: 0; cursor: pointer;
}
.form-compte h2 { font-size: 36px; margin-bottom: 4px; }
.form-compte .bouton { width: 100%; margin-top: 10px; }
.form-compte .message { margin-top: 8px; font-size: 18px; }
.form-compte .message.ok { color: #8fe08f; }
.form-compte .petit { font-size: 19px; line-height: 1.25; }
.lien-compte {
  display: block; width: 100%; margin-top: 10px; padding: 4px;
  font: inherit; font-size: 20px; color: var(--or);
  background: none; border: 0; text-decoration: underline; cursor: pointer;
}
input[readonly] { opacity: 0.75; }
@media (max-width: 1250px) { .bouton-compte { font-size: 24px; padding: 8px 12px 6px; max-width: 180px; } }
@media (max-height: 520px) {
  .bouton-compte { font-size: 20px; padding: 6px 8px 5px; max-width: 130px; }
  .fenetre-compte { padding: 10px 18px; }
  .form-compte h2 { font-size: 26px; }
  .form-compte label { margin: 6px 0 3px; font-size: 17px; }
  .form-compte .bouton { padding: 4px; font-size: 26px; margin-top: 6px; }
  .form-compte .petit { font-size: 16px; margin: 4px 0; }
  .lien-compte { font-size: 17px; margin-top: 4px; padding: 2px; }
}
@media (max-width: 700px) and (min-height: 521px) {
  .bouton-compte { align-self: center; max-width: 100%; font-size: 20px; padding: 6px 12px 5px; }
}

/* ---------- Presets d'armée (v0.26) ---------- */
.presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.preset {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: var(--fond); border: 3px solid var(--noir); box-shadow: 3px 3px 0 var(--noir);
}
.preset.vide { opacity: 0.75; }
.preset.charge { border-color: var(--or); }
.preset input { font-size: 18px; padding: 4px 6px; }
.preset small { font-size: 16px; opacity: 0.75; min-height: 1.2em; }
.preset .boutons-ligne { margin: 0; gap: 4px; }
.preset .petit-bouton { margin: 0; font-size: 17px; padding: 4px 2px; }
.preset .supprimer { color: var(--rouge); }
.presets-invite { display: flex; align-items: center; gap: 12px; }
.presets-invite .petit-bouton { width: auto; margin: 0; padding: 6px 14px; }
.presets.cache, .presets-invite.cache { display: none; }
@media (max-width: 1250px) { .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-height: 520px) {
  .presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .preset { padding: 4px; }
  .preset input { font-size: 15px; padding: 2px 4px; }
  .preset small { font-size: 13px; }
  .preset .petit-bouton { font-size: 14px; padding: 3px 1px; }
}
@media (max-width: 700px) and (min-height: 521px) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Onglet Armée (v0.33) : presets à gauche ; composition puis barre de sorts à droite ---------- */
.panneau-armee.visible { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.colonne-presets { min-width: 0; padding-right: 16px; border-right: 3px solid var(--bord); }
.colonne-presets .indice { margin: -4px 0 10px; font-size: 18px; opacity: 0.8; }
.colonne-armee { min-width: 0; }
.panneau-armee .presets { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.panneau-armee .presets-invite { flex-direction: column; align-items: stretch; gap: 6px; }
.panneau-armee .presets-invite .aide { margin: 0; }
.panneau-armee .titre-barre { margin-top: 22px; padding-top: 14px; border-top: 3px solid var(--bord); }
/* Cartes d'unités aussi larges que leur compteur (- 2 +), autant de colonnes que la place le permet */
.panneau-armee .composition { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
@media (max-width: 1250px) {
  .panneau-armee.visible { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
  .colonne-presets { padding-right: 12px; }
}
@media (max-height: 520px) {
  .panneau-armee.visible { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
  .colonne-presets { padding-right: 8px; }
  .colonne-presets .indice { font-size: 13px; margin: -4px 0 6px; }
  .panneau-armee .presets { gap: 5px; }
  .panneau-armee .preset .boutons-ligne { grid-template-columns: 1fr 1fr; }
  .panneau-armee .titre-barre { margin-top: 10px; padding-top: 8px; }
  .panneau-armee .composition { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .panneau-armee .barre-sorts { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
}
@media (max-width: 700px) and (min-height: 521px) {
  .panneau-armee.visible { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .colonne-presets { padding: 0 0 10px; border-right: 0; border-bottom: 3px solid var(--bord); }
  .panneau-armee .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau-armee .composition { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* v0.42 : type de partie sur téléphone à la verticale : noms plus petits pour tenir sur 3 colonnes */
@media (max-width: 700px) and (min-height: 521px) {
  .modes.types { gap: 6px; }
  .modes.types .mode { padding: 10px 2px; font-size: 17px; }
  .modes.types .mode small { font-size: 14px; }
}

/* v0.49 : téléphone à la verticale, l'aperçu du chapeau passe au-dessus du pseudo (il est plus grand) */
@media (max-width: 520px) {
  .bloc-profil .perso { flex-direction: column; align-items: stretch; }
  .bloc-profil .perso .medaillon { align-self: center; width: 210px; height: 210px; }
  .bloc-profil .perso .medaillon canvas { width: 194px; height: 194px; }
}

/* ---------- v0.57 : écus et boutique ---------- */
.ecu-i { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; background: var(--ecu) center / contain no-repeat; image-rendering: pixelated; }
.ecu-i.grand { width: 26px; height: 26px; vertical-align: -6px; }
.tete-boutique { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tete-boutique h2 { margin: 0; }
.solde { font-size: 30px; color: var(--or); display: flex; align-items: center; gap: 8px; }
.objets-boutique { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.objet {
  font: inherit; color: var(--texte); border: 3px solid var(--noir); background: var(--fond); padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.objet canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.objet .nom-objet { font-size: 17px; line-height: 1; min-height: 17px; }
.objet .acheter { width: 100%; margin: 0; padding: 3px 4px; font-size: 18px; }
.objet .acheter.confirmer { background: var(--or); color: var(--noir); }
.objet.possede { border-color: #3f7a3a; }
.objet.possede .acheter { color: #9fe08a; background: transparent; box-shadow: none; border-color: transparent; }
.objet.trop-cher .acheter { opacity: 0.55; }
.objet.surbrillance { animation: surbrillance 1.2s ease-out 2; }
@keyframes surbrillance { 0%, 100% { border-color: var(--noir); } 40% { border-color: var(--or); background: #4a3d5e; } }
/* ---------- v0.73 : vitrine de la boutique (à la une, soldes, nouveautés) ---------- */
.emplacement.rayon-vitrine { color: var(--or); }
.objet { position: relative; }
.objet .badges { position: absolute; top: -6px; left: -6px; right: -6px; display: flex; justify-content: space-between; pointer-events: none; z-index: 1; }
.badge { font-size: 15px; line-height: 1; padding: 3px 5px 2px; border: 2px solid var(--noir); box-shadow: 2px 2px 0 var(--noir); text-transform: uppercase; }
.badge-solde { background: #d6423b; color: #fff6e0; transform: rotate(-6deg); }
.badge-nouveau { background: #4fc3d8; color: var(--noir); margin-left: auto; transform: rotate(5deg); }
.objet .rayon-objet { font-size: 14px; line-height: 1; color: #b9aacd; }
.ancien-prix { color: #ffd2c8; font-size: 15px; text-decoration-thickness: 2px; text-decoration-color: var(--noir); }
.objet.en-solde { border-color: #8a2a2a; }
.objet.en-solde .acheter:not(:disabled) { background: #d6423b; color: #fff6e0; }
.objets-boutique.vitrine, #objets-boutique.vitrine { display: flex; flex-direction: column; gap: 18px; }
#objets-boutique.vitrine > .vitrine-section { display: flex; flex-direction: column; gap: 10px; }
.titre-vitrine { display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--noir); padding-bottom: 2px; }
.titre-vitrine h3 { margin: 0; font-size: 28px; font-weight: normal; color: var(--or); text-shadow: 2px 2px 0 var(--noir); }
.titre-vitrine .sous-titre { font-size: 17px; color: #b9aacd; }
.vitrine-soldes .titre-vitrine h3 { color: #ff6f5e; }
.vitrine-soldes .compte-soldes { color: #ffb0a5; margin-left: auto; }
.vitrine-nouveautes .titre-vitrine h3 { color: #7fe0f0; }
/* affiche « à la une » : fond à rayons dorés, une grande carte et deux plus petites */
.affiche {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; padding: 14px; border: 3px solid var(--noir);
  background: repeating-conic-gradient(from 0deg at 50% 60%, #4a3a1e 0deg 10deg, #3a2e1c 10deg 20deg);
  box-shadow: inset 0 0 0 3px var(--or-fonce);
}
.affiche .objet { background: rgba(43, 34, 56, 0.92); border-color: var(--or-fonce); justify-content: center; }
.affiche .objet canvas { width: 88px; height: 88px; }
.affiche .objet.grande { grid-row: span 1; border-color: var(--or); box-shadow: 0 0 0 2px var(--noir), 0 0 18px rgba(242, 193, 78, 0.45); }
.affiche .objet.grande canvas { width: 140px; height: 140px; animation: flotte 2.4s ease-in-out infinite; }
.affiche .objet.grande .nom-objet { font-size: 26px; color: var(--or); }
.affiche .objet.grande::before { content: "★ LA PIÈCE DE LA SEMAINE ★"; font-size: 14px; color: var(--or); letter-spacing: 1px; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 700px) {
  .affiche { grid-template-columns: 1fr 1fr; padding: 10px; }
  .affiche .objet.grande { grid-column: span 2; }
  .affiche .objet.grande canvas { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) { .affiche .objet.grande canvas { animation: none; } }
/* objets à acheter dans l'éditeur de skin : grisés, cadenas et prix */
.modele.verrou, .motif.verrou { position: relative; }
.modele.verrou canvas, .motif.verrou canvas { opacity: 0.45; filter: grayscale(0.6); }
.prix-verrou { font-size: 13px; color: var(--or); line-height: 1; white-space: nowrap; }
.motif .prix-verrou { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 11px; text-shadow: 1px 1px 0 var(--noir); }
.fin-ecus { font-size: 26px; color: var(--or); margin: 4px 0; }
.fin-ecus.cache { display: none; }
/* v0.60 : niveau du compte (Profil, écran de fin) */
.jauge-niveau { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.plaque-niveau { min-width: 44px; height: 44px; padding: 0 6px; display: grid; place-items: center; font-size: 28px;
  color: var(--or); background: #3a2c18; border: 3px solid var(--noir); box-shadow: inset 0 3px 0 var(--or); }
.jauge-contenu { flex: 1; min-width: 0; }
.jauge-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 20px; color: var(--creme, #f4f0e8); }
.jauge-barre { height: 12px; margin-top: 3px; background: var(--noir); border: 2px solid var(--noir); box-shadow: 0 0 0 2px var(--bord); }
.jauge-remplie { height: 100%; background: var(--or); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.fin-xp { width: min(360px, 90%); margin: 2px auto 6px; }
.fin-xp.cache { display: none; }
.gain-xp { font-size: 22px; color: var(--creme, #f4f0e8); margin: 2px 0; text-align: center; }
.gain-xp.monte { color: var(--or); font-size: 26px; }

/* ---------- v0.58 : écran Jouer en grands choix, éditeur d'armées dans le Profil ---------- */
.types-partie { display: flex; flex-direction: column; gap: 18px; padding: 10px 2% 4px; }
.gros-choix {
  font: inherit; color: var(--texte); text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
  background: var(--panneau); border: 4px solid var(--noir); box-shadow: inset 0 0 0 3px var(--bord), 4px 4px 0 var(--noir);
  padding: 22px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
  max-height: 200px; overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease, border-width 0.35s ease, transform 0.1s;
}
.gros-choix strong { font-size: 64px; font-weight: 400; line-height: 1; }
.gros-choix small { font-size: 20px; opacity: 0.7; text-transform: none; letter-spacing: 0; }
.gros-choix:hover:not(:disabled) { box-shadow: inset 0 0 0 3px var(--or), 4px 4px 0 var(--noir); }
.gros-choix:hover:not(:disabled) strong { color: var(--or); }
.gros-choix:active:not(:disabled) { transform: translate(2px, 2px); }
.gros-choix.bientot { cursor: default; opacity: 0.45; }
.gros-choix .retour-type { display: none; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--or); text-transform: none; letter-spacing: 0; }
/* un choix fait : il reste seul en haut (plus petit), les autres s'effacent */
.types-partie.replie { gap: 0; }
.types-partie.replie .gros-choix:not(.choisie) { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; box-shadow: none; margin: 0; pointer-events: none; }
.types-partie.replie .gros-choix.choisie { padding: 10px 10px 8px; box-shadow: inset 0 0 0 3px var(--or), 4px 4px 0 var(--noir); }
.types-partie.replie .gros-choix.choisie strong { font-size: 44px; color: var(--or); }
.types-partie.replie .gros-choix.choisie .retour-type { display: block; }
.etape { display: none; padding: 0 2%; }
.etape.visible { display: block; animation: apparaitre 0.35s ease-out both; }
#etape-armee.visible { animation-delay: 0.15s; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.resume-armee { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pastille-unite { display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 2px; background: var(--fond); border: 3px solid var(--noir); font-size: 20px; }
.pastille-unite canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.choix-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#modifier-armees { width: auto; }
.pied-accueil .bouton.cache-jouer { visibility: hidden; }
/* Profil > Armées : fenêtre large, éditeur à gauche, fiche à droite */
.fenetre-compte.large, .fenetre-compte.large:has(.vue-profil) { max-width: min(1280px, 96vw); }
#section-armees { position: relative; }
.bloc-profil[data-onglet="armees"] .section-profil[data-section="armees"] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
#section-armees .fiche { position: sticky; top: 0; max-height: 80vh; }
@media (max-width: 1000px) {
  .bloc-profil[data-onglet="armees"] .section-profil[data-section="armees"] { display: block; }
  #section-armees .fiche { position: fixed; display: none; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 70%; z-index: 30; }
  #section-armees .fiche.ouverte { display: block; }
}
@media (max-height: 520px) {
  .gros-choix { padding: 10px 8px 8px; }
  .gros-choix strong { font-size: 34px; }
  .gros-choix small { font-size: 15px; }
  .types-partie { gap: 8px; padding-top: 4px; }
  .types-partie.replie .gros-choix.choisie strong { font-size: 28px; }
}
@media (max-width: 700px) {
  .gros-choix strong { font-size: 38px; }
}
@media (max-width: 700px) {
  .types-partie.replie .gros-choix.choisie .retour-type { position: static; transform: none; order: -1; align-self: flex-start; }
}

/* v0.59 : illustrations des grands choix (pixel art, une de chaque côté) et éditeur d'armée dans l'écran Jouer */
.gros-choix { min-height: 146px; justify-content: center; }
.gros-choix .illu { position: absolute; top: 50%; transform: translateY(-50%); height: 136px; width: auto; image-rendering: pixelated; pointer-events: none; }
.gros-choix .illu.gauche { left: 3%; }
.gros-choix .illu.droite { right: 3%; }
.gros-choix.bientot .illu { filter: grayscale(0.8); opacity: 0.6; }
.types-partie.replie .gros-choix.choisie { min-height: 0; }
.types-partie.replie .gros-choix.choisie .illu { height: 76px; }
.types-partie.replie .gros-choix.choisie .illu.gauche { left: 120px; }
.types-partie.replie .gros-choix:not(.choisie) { min-height: 0; }
#etape-armee { margin-top: 16px; padding-top: 10px; border-top: 3px solid var(--bord); }
@media (max-height: 520px) {
  .gros-choix { min-height: 0; }
  .gros-choix .illu { height: 76px; }
  .types-partie.replie .gros-choix.choisie .illu { height: 48px; }
}
@media (max-width: 700px) {
  /* téléphone à la verticale : la scène au-dessus du titre (sinon elle le cache) */
  .gros-choix { min-height: 0; padding-top: 70px; }
  .gros-choix .illu { top: 2px; transform: none; height: 68px; }
  .gros-choix .illu.gauche { left: 6%; }
  .gros-choix .illu.droite { right: 6%; }
  .types-partie.replie .gros-choix.choisie { padding-top: 10px; }
  .types-partie.replie .gros-choix.choisie .illu { display: none; }
}

/* ---------- Tutoriel (v0.66 ; v0.67 : en haut au centre, plus gros et plus lisible) ---------- */
.tuto {
  position: fixed; z-index: 6; top: 10px; left: 50%; transform: translateX(-50%);
  width: clamp(440px, calc(100vw - 600px), 760px); padding: 10px 20px 12px; pointer-events: none; text-align: center;
  background: rgba(30, 23, 42, 0.94); border: 4px solid var(--noir); box-shadow: inset 0 0 0 3px var(--or), 0 6px 0 rgba(0, 0, 0, 0.45);
  color: var(--texte); line-height: 1.15;
}
.tuto.cache, .tuto[data-etape="armee"] { display: none; }
.tuto-haut { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tuto-progres { display: flex; gap: 5px; }
.tuto-progres i { width: 14px; height: 14px; border: 2px solid var(--noir); background: #4a3d5e; }
.tuto-progres i.fait { background: #6fcf5f; }
.tuto-progres i.actuel { background: var(--or); animation: tutoPoint 0.9s ease-in-out infinite alternate; }
@keyframes tutoPoint { to { transform: scale(1.25); } }
.tuto-num { font-size: 18px; color: #c8bfd8; }
.tuto-menu { margin-left: auto; pointer-events: auto; font: inherit; font-size: 17px; color: var(--texte); padding: 2px 10px; background: var(--panneau); border: 3px solid var(--noir); box-shadow: inset 0 0 0 2px var(--bord); cursor: pointer; }
.tuto-titre { display: block; font-size: 46px; font-weight: normal; color: var(--or); text-shadow: 3px 3px 0 var(--noir); letter-spacing: 1px; }
.tuto-texte { margin: 2px 0 2px; font-size: 31px; color: #fff; text-shadow: 2px 2px 0 var(--noir); }
.tuto-texte b { color: var(--or); font-weight: normal; }
.tuto kbd {
  display: inline-block; min-width: 1.2em; margin: 0 2px; padding: 0 6px; font: inherit; line-height: 1.2;
  color: var(--noir); background: var(--or); border: 3px solid var(--noir); box-shadow: 0 3px 0 var(--noir); text-shadow: none;
}
.tuto-info { margin: 4px 0 0; font-size: 21px; color: #d8d0e8; }
.tuto-info:empty { display: none; }
.tuto-objectif {
  display: inline-block; margin: 8px 0 0; padding: 3px 14px; font-size: 25px;
  color: #9fd6ff; background: rgba(0, 0, 0, 0.35); border: 2px solid #4a6a8a;
}
.tuto-objectif::before { content: '▢ '; }
.tuto.reussi { box-shadow: inset 0 0 0 3px #6fcf5f, 0 6px 0 rgba(0, 0, 0, 0.45); }
.tuto.reussi .tuto-objectif { font-size: 32px; color: #b8ff9f; border-color: #6fcf5f; background: rgba(40, 90, 30, 0.6); }
.tuto.reussi .tuto-objectif::before { content: '✔ '; }
.tuto.arrivee { animation: tutoArrivee 0.4s ease-out; }
.tuto.reussite { animation: tutoReussite 0.55s ease-out; }
@keyframes tutoArrivee { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tutoReussite { 0% { transform: translateX(-50%) scale(1); } 35% { transform: translateX(-50%) scale(1.07); } 100% { transform: translateX(-50%) scale(1); } }
/* Étape de lecture (v0.67.1) : panneau plus large, explication en liste, bouton OK cliquable */
/* v0.67.2 (demande de Kevin) : même place que la fenêtre des étapes (en haut au centre) ; défile si l'écran est petit */
.tuto.lecture { max-height: calc(100vh - 20px); overflow-y: auto; pointer-events: auto; }
.tuto-lecture { display: none; margin: 8px 0 0; padding: 0; list-style: none; text-align: left; }
.tuto.lecture .tuto-lecture { display: block; }
.tuto-lecture li { position: relative; margin: 0 0 7px; padding-left: 22px; font-size: 18px; color: #ece6f6; line-height: 1.18; }
.tuto-lecture li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; background: var(--or); border: 2px solid var(--noir); }
.tuto-lecture b { color: var(--or); font-weight: normal; }
.tuto-ok { display: block; width: auto; margin: 8px auto 0; padding: 6px 26px; font-size: 26px; pointer-events: auto; }
.tuto-ok.cache { display: none; }
.tuto-ok:disabled { opacity: 0.65; cursor: default; font-size: 20px; }
/* Combat final : panneau compact à droite (le score occupe le haut) */
.tuto[data-etape="combat"] { top: 190px; left: auto; right: 14px; transform: none; width: 360px; padding: 8px 14px 10px; }
.tuto[data-etape="combat"] .tuto-titre { font-size: 28px; }
.tuto[data-etape="combat"] .tuto-texte { font-size: 21px; }
.tuto[data-etape="combat"] .tuto-info { font-size: 16px; }
.tuto[data-etape="combat"] .tuto-objectif { font-size: 18px; }
.tuto[data-etape="combat"].arrivee { animation: none; }
/* le bouton Menu du jeu est remplacé par celui du panneau pendant le tutoriel */
body.en-tuto #quitter { display: none; }
/* Téléphone à l'horizontale */
@media (max-height: 520px) {
  .tuto { top: 4px; width: min(520px, calc(100vw - 440px)); padding: 4px 10px 6px; }
  .tuto-haut { margin-bottom: 0; gap: 6px; }
  .tuto-progres i { width: 9px; height: 9px; }
  .tuto-num { font-size: 13px; }
  .tuto-menu { font-size: 13px; padding: 0 6px; }
  .tuto-titre { font-size: 24px; }
  .tuto-texte { font-size: 18px; margin: 1px 0; }
  .tuto kbd { border-width: 2px; box-shadow: 0 2px 0 var(--noir); padding: 0 4px; }
  .tuto-info { font-size: 13px; margin-top: 1px; }
  .tuto-objectif { font-size: 15px; margin-top: 3px; padding: 1px 8px; }
  .tuto.reussi .tuto-objectif { font-size: 20px; }
  .tuto[data-etape="combat"] { top: 4px; left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100vw - 440px)); }
  .tuto[data-etape="combat"] .tuto-titre { font-size: 18px; }
  .tuto[data-etape="combat"] .tuto-texte { font-size: 15px; }
  .tuto[data-etape="combat"] .tuto-info { display: none; }
  .tuto[data-etape="combat"] .tuto-objectif { font-size: 13px; }
}
@media (max-height: 520px) {
  .tuto.lecture { max-height: calc(100vh - 8px); }
  .tuto-lecture { margin-top: 3px; }
  .tuto-lecture li { font-size: 12px; margin-bottom: 2px; padding-left: 14px; }
  .tuto-lecture li::before { width: 5px; height: 5px; top: 4px; left: 2px; }
  .tuto-ok { font-size: 17px; padding: 2px 16px; margin-top: 3px; }
  .tuto-ok:disabled { font-size: 14px; }
}
/* Téléphone à la verticale */
@media (max-width: 700px) and (min-height: 521px) {
  .tuto, .tuto[data-etape="combat"] { top: 6px; left: 8px; right: 8px; width: auto; transform: none; padding: 6px 10px 8px; }
  .tuto-titre { font-size: 28px; }
  .tuto-texte { font-size: 20px; }
  .tuto-info { font-size: 15px; }
  .tuto-objectif { font-size: 17px; }
  .tuto.reussi .tuto-objectif { font-size: 22px; }
  @keyframes tutoArrivee { from { opacity: 0; } to { opacity: 1; } }
  .tuto.reussite { animation: none; }
  .tuto.lecture { max-height: 70vh; }
  .tuto-lecture li { font-size: 15px; margin-bottom: 4px; }
  .tuto-ok { font-size: 20px; }
}
/* Fenêtre d'armée du tutoriel : visite guidée, éditeur (sans les presets) et fiche */
.tuto-armee { z-index: 20; background: rgba(26, 20, 35, 0.75); }
.tuto-armee-carte { max-width: none; width: min(1280px, 96vw); max-height: 94vh; overflow-y: auto; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px 14px; align-items: start; }
.tuto-armee-tete, .tuto-guide, .tuto-armee-pied { grid-column: 1 / -1; }
.tuto-armee-tete { display: flex; align-items: baseline; gap: 14px; }
.tuto-armee-tete h2 { margin: 0; color: var(--or); }
.tuto-guide { padding: 8px 12px; border: 3px solid var(--or); background: #3a2f4c; position: sticky; top: -14px; z-index: 3; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
.tuto-guide strong { color: var(--or); font-size: 22px; font-weight: normal; }
.tuto-guide p { margin: 4px 0 6px; font-size: 19px; }
.tuto-guide b { color: var(--or); font-weight: normal; }
.tuto-guide .boutons-ligne { margin: 0; }
.tuto-armee-editeur { display: contents; }
.tuto-armee-editeur .panneau-armee.visible { grid-template-columns: minmax(0, 1fr); }
.tuto-armee-editeur .colonne-presets { display: none; }
.tuto-armee-editeur .fiche { position: sticky; top: 0; max-height: 70vh; }
.tuto-armee-pied { display: flex; justify-content: flex-end; align-items: center; gap: 14px; position: sticky; bottom: -14px; padding: 8px 0 4px; background: var(--panneau); }
.tuto-armee-pied .bouton { width: auto; margin: 0; padding: 8px 28px; }
.tuto-armee-pied .bouton:disabled { opacity: 0.45; cursor: default; }
.tuto-surligne { outline: 4px solid var(--or); outline-offset: 3px; animation: tutoPulse 1s ease-in-out infinite alternate; }
@keyframes tutoPulse { from { outline-color: var(--or); } to { outline-color: rgba(242, 193, 78, 0.35); } }
@media (max-width: 1000px), (max-height: 520px) {
  .tuto-armee-carte { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; max-height: 98vh; width: 98vw; }
  .tuto-guide { top: -8px; }
  .tuto-armee-editeur .fiche { position: fixed; display: none; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 70%; z-index: 30; }
  .tuto-armee-editeur .fiche.ouverte { display: block; }
  .tuto-guide p { font-size: 16px; }
  .tuto-guide strong { font-size: 18px; }
}
@media (max-height: 520px) {
  .tuto-armee-tete h2 { font-size: 24px; }
  .tuto-guide { padding: 5px 8px; }
  .tuto-guide p { font-size: 14px; margin: 2px 0 4px; }
  .tuto-armee-pied .bouton { padding: 4px 18px; font-size: 22px; }
}
#bloc-tutoriel.cache { display: none; }
.etapes-tuto { margin: 0 0 8px; padding-left: 26px; font-size: 21px; line-height: 1.25; }
.etapes-tuto b { color: var(--or); font-weight: normal; }
@media (max-height: 520px) { .etapes-tuto { font-size: 16px; } }
/* v0.69 : armée incomplète (il faut 20 unités pour jouer) */
#armee-total.incomplete { color: #ff8a7a; opacity: 1; }
.pied-accueil .bouton:disabled { opacity: 0.5; cursor: not-allowed; }