/* Ecran de combat (BIBLE § 5), repris de la maquette validee maquettes/format/ecran-combat.html.
   Tailles rapportees a la HAUTEUR de l'ecran (cqh = 1 % de .tel). Les positions qui suivent les
   personnages (nom du monstre, « ! », chiffres) sont donnees par 04-interface.js (transform). */
:root {
  --nuit: #1d1a2e; --terre: #b5532c; --terre-fonce: #7c3219; --sable: #f3dfb4;
  --or: #f2b632; --vie: #4fbf4a; --mal: #d8402f; --encre: #2a1a10; --eau: #6fc3e8;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--nuit); font-family: Nunito, sans-serif; color: var(--encre);
       -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
.tel { position: relative; max-width: 480px; height: 100dvh; min-height: 640px; margin: 0 auto; display: flex;
       flex-direction: column; overflow: hidden; background: var(--sable); container-type: size;
       user-select: none; -webkit-user-select: none; }

.livraison { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
             background: var(--terre-fonce); color: var(--sable); font-size: 14px; }
.livraison b { font-family: Cinzel, serif; font-size: 15px; color: var(--or); white-space: nowrap; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; }
.livraison .route { margin-left: auto; font-size: 13px; opacity: .9; white-space: nowrap; }

.scene { position: relative; flex: 0 0 57cqh; overflow: hidden;
         background: url(../assets/decors/nemee.webp) center bottom / cover; }
.combat { position: absolute; inset: 0; width: 100%; height: 100%; }
/* la vie du decor d'une course (07-ambiance.js) : derriere Phidippides, et les elements proches devant lui */
.arriere-plan, .premier-plan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.en-ville .arriere-plan, .en-ville .premier-plan { display: none; }
.etiquette, .alerte, .bulle, .choc { position: absolute; left: 0; top: 0; pointer-events: none; }
.etiquette { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.nom { font: 700 13px Cinzel, serif; color: var(--or); -webkit-text-stroke: 3px var(--encre);
       paint-order: stroke; white-space: nowrap; }
.barre { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.bouclier { width: 16px; height: 16px; flex: none; }          /* ennemi renforce */
.mini { position: relative; width: 58px; height: 8px; border: 2px solid var(--encre);
        border-radius: 5px; background: #3b2a20; overflow: hidden; }
.chef .mini { width: 84px; }
.mini i, .jauge i { position: absolute; left: 0; top: 0; bottom: 0; }
.mini .vie { background: var(--mal); }
.mini .retard, .jauge .retard { background: #fff3c9; }
/* monstre qui fuit (la biche de Cerynie) : sa barre est son endurance (or, comme ses bois), et les secondes qui restent
   pour le rattraper, en rouge a la fin */
.fuyante .mini .vie { background: var(--or); }
.chrono { font: 800 13px/1 Nunito, sans-serif; color: #fff6c2; -webkit-text-stroke: 3px var(--encre);
          paint-order: stroke; min-width: 24px; }
.chrono.presse { color: #ff7a5c; }

/* le « ! » avant le coup du monstre */
.alerte { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
          font: 800 26px/1 Nunito, sans-serif; color: var(--encre); background: var(--or);
          border: 3px solid var(--encre); box-shadow: 0 0 0 3px #fff6c2; transform-origin: 50% 100%; }

/* nom du chef en grand a son arrivee, sa legende dessous */
.bandeau-chef { position: absolute; left: 50%; top: 22%; pointer-events: none; white-space: nowrap;
                display: flex; flex-direction: column; align-items: center; gap: 2px;
                font: 700 30px Cinzel, serif; color: var(--or); -webkit-text-stroke: 6px var(--encre);
                paint-order: stroke; letter-spacing: .02em; }
.bandeau-chef .legende { font: 800 15px Nunito, sans-serif; color: #fff6c2; -webkit-text-stroke: 4px var(--encre);
                         letter-spacing: 0; }

.bulles { position: absolute; inset: 0; pointer-events: none; }
.bulle { font: 800 22px Nunito, sans-serif; white-space: nowrap; -webkit-text-stroke: 4px var(--encre);
         paint-order: stroke; transform-origin: 50% 100%; will-change: transform, opacity; }
.bulle.monstre { color: #fff; }
.bulle.heros { color: #ff6b5a; }
.bulle.soin { color: #7fe07a; }
.bulle.contre { color: var(--or); font-size: 30px; }
.bulle.charge { color: #fff; font-size: 27px; }
.bulle.critique { color: var(--or); font-size: 36px; -webkit-text-stroke-width: 5px; }
.bulle.critique-titre { font: 700 20px Cinzel, serif; color: #ffe07a; -webkit-text-stroke: 5px var(--encre); }
.bulle.esquive, .bulle.furieux { font-family: Cinzel, serif; font-size: 18px; color: #fff6c2; }
.bulle.furieux { color: #ff8a5a; }
.bulle.reduit { color: #c9cfd2; font-size: 17px; }             /* lance sur un renforce : elle glisse */
.bulle.renforce { font: 700 16px Cinzel, serif; color: #e3ad55; -webkit-text-stroke: 4px var(--encre); }
.bulle.pare-titre { font: 700 18px Cinzel, serif; color: #f0c46a; -webkit-text-stroke: 4px var(--encre); }   /* bouclier */
.bulle.pare { color: #e3ad55; font-size: 18px; }                /* degats reduits par le bouclier */
.modele-choc, .modele-eclat { display: none; }
.choc { width: 34px; height: 34px; }
.choc.metal path { fill: #eef1f2; stroke: #7d8a90; }
.eclat.bronze path:last-child { stroke: #e3ad55; }
/* les tetes qui repoussent (l'Hydre de Lerne) : un trait par cran sur sa barre de vie ; Percer l'a passe (le feu) ou un
   autre coup (la tete repousse) */
.mini .cran { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--encre); }
.eclat.feu path:last-child { stroke: #ff8a3a; }
.bulle.brule { font: 700 18px Cinzel, serif; color: #ff9a4a; -webkit-text-stroke: 4px var(--encre); }
.bulle.repousse { font: 700 18px Cinzel, serif; color: #8fe07a; -webkit-text-stroke: 4px var(--encre); }
.eclat { position: absolute; left: 0; top: 0; width: 56px; height: 56px; pointer-events: none; }

/* didacticiel (06-didacticiel.js) : ce qu'il faut faire, sur un parchemin roule aux deux bouts, dans le ciel ; le
   bouton a toucher : une fleche d'or au-dessus, un anneau d'or qui pulse autour (regles par 06-didacticiel.js).
   Temps fige (il attend un geste) : le parchemin brille. */
.aide { position: absolute; left: 50%; top: 30%; width: max-content; max-width: min(84%, 340px); padding: 9px 16px;
        background: var(--sable); border: 3px solid var(--encre); border-radius: 6px; pointer-events: none;
        box-shadow: 0 4px 0 var(--terre-fonce); transform-origin: 50% 100%; }
.aide::before, .aide::after { content: ""; position: absolute; top: -7px; bottom: -7px; width: 13px; border-radius: 7px;
        background: #d9b77a; border: 3px solid var(--encre); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18); }
.aide::before { left: -12px; }
.aide::after { right: -12px; }
.aide p { font: 800 16px/1.3 Nunito, sans-serif; color: var(--encre); text-align: center; text-wrap: balance; }
.aide.fige { box-shadow: 0 4px 0 var(--terre-fonce), 0 0 16px 6px rgba(255, 214, 90, .8); }
.bouton.montre .rond::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  border: 4px solid #ffd34d; box-shadow: 0 0 10px 2px rgba(255, 214, 90, .7);
  transform: scale(var(--anneau, 1)); opacity: var(--anneau-o, 1); }
.fleche { position: absolute; left: 0; top: 0; width: 42px; height: 42px; pointer-events: none; z-index: 2;
         filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }

.erreur { position: absolute; inset: 30% 10% auto; padding: 10px; background: var(--sable);
          border: 2px solid var(--encre); font-size: 14px; }

/* fin du combat */
.fin, .carte { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(84%, 320px);
       padding: 18px 18px 16px; text-align: center; background: var(--sable); border: 4px solid var(--encre);
       border-radius: 14px; box-shadow: 0 6px 0 var(--terre-fonce), 0 12px 30px rgba(0, 0, 0, .35); }
.fin h2, .carte h2 { font: 700 26px Cinzel, serif; color: var(--terre-fonce); margin-bottom: 10px; }
.fin.defaite h2 { font-size: 20px; }
.fin dl, .carte dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; text-align: left;
          margin-bottom: 14px; }
.fin dd, .carte dd { font-weight: 800; text-align: right; }
/* un niveau gagne pendant la course : sa ligne doree */
.carte dt.doree, .carte dd.doree { padding: 2px 6px; font-weight: 800; background: var(--or); }
.carte dt.doree { margin-right: -12px; padding-right: 18px; border-radius: 6px 0 0 6px; }
.carte dd.doree { border-radius: 0 6px 6px 0; }
/* ce que le niveau apporte, sous sa ligne doree */
.carte dd.phrase { grid-column: 1 / -1; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center;
                   text-wrap: balance; color: var(--terre-fonce); }
.fin button, .carte button { min-height: 48px; padding: 0 28px; font: 800 17px Nunito, sans-serif; color: var(--encre);
              background: var(--or); border: 3px solid var(--encre); border-radius: 12px;
              box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; }
.fin button:active, .carte button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre-fonce); }
/* course (07-course.js) : le message a porter au depart, la ville a l'arrivee, sur le modele de l'ecran de fin */
.carte h2 { margin-bottom: 0; }
.carte .sous-titre { font: 700 14px Cinzel, serif; color: var(--terre); margin: 2px 0 10px; }
.carte .texte { font-size: 15px; line-height: 1.35; margin-bottom: 12px; text-wrap: balance; }
.carte.arrivee .texte { font-weight: 800; color: var(--terre-fonce); }
/* la carte d'ouverture du prologue (06-didacticiel.js) : l'annee, puis la phrase */
.carte.ouverture .sous-titre { display: none; }
.carte.ouverture .texte { margin-top: 10px; font-size: 16px; }
/* petit telephone (360 x 640) : la carte de la ville, avec un niveau gagne, est presque aussi haute que la scene
   (365 px) : elle part du haut et peut descendre sur la frise, comme celle de la forge (la scene ne la coupe plus) */
@media (max-height: 700px) {
  .carte.arrivee { top: 8px; transform: translateX(-50%); }
  .scene:has(> .carte.arrivee:not([hidden])) { overflow: visible; z-index: 1; }
}
/* Athenes : deux boutons cote a cote (l'alchimiste, Partir) ; l'alchimiste (08-ville.js), son portrait en tete */
.carte .choix { display: flex; justify-content: center; gap: 10px; }
.carte .choix button { padding: 0 12px; white-space: nowrap; }
.carte button.autre { background: var(--sable); }
.carte button small { display: block; font-size: 13px; line-height: 1.1; margin-bottom: 2px; }
.carte button:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 0 4px 0 var(--terre-fonce); }
/* medaillon : bord de bronze, fond sable ; la tete du marchand dedans (canvas, 08-ville.js) */
.carte .portrait { display: none; width: 72px; height: 72px; margin: -54px auto 4px; border-radius: 50%;
                   background: var(--sable); border: 4px solid var(--encre); box-shadow: inset 0 0 0 4px #e3ad55,
                   0 3px 0 rgba(0, 0, 0, .25); }
.carte.alchimiste .portrait, .carte.forge .portrait, .carte.relais .portrait, .carte.boucliers .portrait,
.carte.armure .portrait { display: block; }
/* la carte de la forge (427 px) est plus haute que la scene d'un petit telephone (365 px sur 360 x 640) : elle part du
   haut, son medaillon sous le bandeau, et descend s'il le faut sur la frise ; en ville, la scene ne coupe plus ses
   cartes (les decors voisins restent caches : .tel coupe sur les cotes) */
.en-ville .scene { overflow: visible; z-index: 1; }
.carte.forge, .carte.relais, .carte.boucliers, .carte.armure { top: 40px; transform: translateX(-50%); }
.carte.alchimiste .texte, .carte.forge .texte, .carte.relais .texte, .carte.boucliers .texte,
.carte.armure .texte { font-style: italic; }
/* le relais d'Hermes (08-ville.js, class Relais) : l'echelle des grades, les grades a venir pales */
.carte.relais dd:empty { min-height: 1em; }
.carte.relais dt:has(+ dd:empty) { opacity: .55; }

.frise { flex: 0 0 18px; background: var(--terre-fonce) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='18'><path d='M0 15H18V3H6V11H13V7' fill='none' stroke='%23f3dfb4' stroke-width='2'/></svg>") repeat-x left center; }

.commandes { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
             padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--terre);
             background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.08) 18px 20px); }
.moi { display: flex; align-items: center; gap: 10px; color: var(--sable); }
.niveau { font-weight: 800; font-size: 14px; background: var(--or); color: var(--encre);
          border: 2px solid var(--encre); border-radius: 6px; padding: 1px 8px; }
.moi b { font-family: Cinzel, serif; font-size: 18px; }
.vie-texte { margin-left: auto; font-size: 13px; }
.jauge { position: relative; margin: 6px 0 18px; height: 16px; border: 2px solid var(--encre); border-radius: 8px;
         background: #3b2a20; overflow: hidden; }
.jauge .vie { background: var(--vie); }

/* Boutons en medaillons de bronze (valides par Romain le 2026-10-01, BIBLE § 5) : un fond de couleur par geste
   (on les reconnait sans lire) ; icones dessinees par l'atelier chibi (dessins/icones.py). */
.boutons { display: flex; justify-content: space-around; }
.bouton[data-geste="frapper"]  { --champ: #c4452f; }
.bouton[data-geste="charger"]  { --champ: #7d4595; }
.bouton[data-geste="esquiver"] { --champ: #3c93cc; }
.bouton[data-geste="boire"]    { --champ: #4a9c46; }
.bouton { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--sable);
          font-weight: 800; font-size: 14px; letter-spacing: .01em; -webkit-text-stroke: 3px var(--encre);
          paint-order: stroke; background: none; border: 0; font-family: inherit; padding: 0;
          cursor: pointer; touch-action: none; -webkit-touch-callout: none; }
/* quatre boutons sur une ligne : 72 px, un peu moins sur les petits telephones (360 px : 65 px) */
.rond { position: relative; width: min(72px, 18vw); height: min(72px, 18vw); border-radius: 50%; display: grid;
        place-items: center; background: var(--champ);
        border: 5px solid #c98b3c;                                   /* le bord de bronze */
        box-shadow: 0 0 0 3px var(--encre),                          /* contour du medaillon */
                    inset 0 0 0 3px var(--encre),                    /* trait entre le bronze et le fond */
                    inset 7px -9px 0 3px rgba(0, 0, 0, .2),          /* ombre en croissant, en bas a gauche */
                    0 6px 0 3px #5e2410;                             /* relief : le bouton s'enfonce */
        transition: transform 60ms, box-shadow 60ms, filter 150ms, opacity 150ms; }
.rond::before { content: ""; position: absolute; right: 14%; top: 9%; width: 30%; height: 16%; border-radius: 50%;
                background: rgba(255, 255, 255, .28); transform: rotate(32deg); }   /* reflet, en haut a droite */
.rond img { position: relative; width: 84%; height: 84%; pointer-events: none; -webkit-user-drag: none; }
.bouton.appuye .rond { transform: translateY(5px);
  box-shadow: 0 0 0 3px var(--encre), inset 0 0 0 3px var(--encre), inset 7px -9px 0 3px rgba(0, 0, 0, .2),
              0 1px 0 3px #5e2410; }
.bouton.inactif { cursor: default; color: rgba(243, 223, 180, .6); }
.bouton.inactif .rond { filter: grayscale(1) brightness(.85); opacity: .55; }
/* contre-attaque prete : Frapper en or, qui rayonne */
.bouton.contre .rond { --champ: #f2b632; border-color: #ffe07a;
  box-shadow: 0 0 0 3px var(--encre), inset 0 0 0 3px var(--encre), inset 7px -9px 0 3px rgba(0, 0, 0, .15),
              0 6px 0 3px #5e2410, 0 0 20px 9px rgba(255, 214, 90, .85); }
/* les tetes qui repoussent : Percer passerait le cran, il s'allume aux couleurs du feu */
.bouton.feu .rond { --champ: #e8642a; border-color: #ffb36b;
  box-shadow: 0 0 0 3px var(--encre), inset 0 0 0 3px var(--encre), inset 7px -9px 0 3px rgba(0, 0, 0, .15),
              0 6px 0 3px #5e2410, 0 0 20px 9px rgba(255, 138, 58, .85); }
/* sur ordinateur (souris), la touche du clavier ecrite en petit sur chaque bouton (05-commandes.js) */
.touche { display: none; }
@media (hover: hover) and (pointer: fine) {
  .touche { display: block; position: absolute; left: -10px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 4px;
            border-radius: 5px; background: var(--sable); border: 2px solid var(--encre); box-shadow: 0 2px 0 var(--encre);
            font: 800 13px/18px Nunito, sans-serif; color: var(--encre); -webkit-text-stroke: 0; text-align: center; }
}
/* gorgees qui restent : une goutte d'eau */
.compte { position: absolute; top: -9px; right: -11px; min-width: 28px; height: 28px; border-radius: 14px;
          background: var(--eau); border: 3px solid var(--encre); font: 800 14px/22px Nunito, sans-serif;
          color: var(--encre); -webkit-text-stroke: 0; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .15); }

/* Ville (08-ville.js) : les tableaux cote a cote sous le canvas, Phidippides au milieu ; fleches sur les cotes ;
   en bas, a la place des gestes : la bourse, l'outre et le bouton du lieu. */
.ville { position: absolute; inset: 0; display: none; will-change: transform; }
.lieu { position: absolute; top: 0; bottom: 0; width: 100%; background: center bottom / cover; }
.lieu:nth-child(2) { left: 100%; } .lieu:nth-child(3) { left: 200%; } .lieu:nth-child(4) { left: 300%; }
.en-ville .ville { display: block; }
.vers { display: none; position: absolute; top: 30%; width: 48px; height: 48px; padding: 9px; border-radius: 50%;
        color: var(--encre); background: var(--or); border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--terre-fonce);
        cursor: pointer; }
.vers svg { display: block; width: 100%; height: 100%; }
.vers.gauche { left: 10px; } .vers.gauche svg { transform: scaleX(-1); }
.vers.droite { right: 10px; }
.vers:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre-fonce); }
.en-ville .vers { display: block; }
.ville-bas { display: none; flex-direction: column; align-items: center; gap: 12px; }
.en-ville .boutons { display: none; }
.en-ville .ville-bas { display: flex; }
.bourse { display: flex; gap: 18px; color: var(--sable); font-weight: 800; font-size: 15px; }
.ville-bas .aller { min-height: 52px; padding: 0 26px; font: 800 18px Nunito, sans-serif; color: var(--encre);
                    background: var(--or); border: 3px solid var(--encre); border-radius: 12px;
                    box-shadow: 0 5px 0 #5e2410; cursor: pointer; }
.ville-bas .aller:active { transform: translateY(4px); box-shadow: 0 1px 0 #5e2410; }
.ville-bas .aller:disabled { opacity: .55; cursor: default; transform: none; box-shadow: 0 5px 0 #5e2410; }
/* passage d'un tableau a l'autre : fondu au noir (on ne voit jamais le bord d'un decor) */
.fondu { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* le panneau de la porte : une ligne par course, comme une planche de bois clouee */
.carte .liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.carte .liste:empty { display: none; }
.carte button.une-course { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  min-height: 56px; padding: 8px 12px; text-align: left; font: 700 13px Nunito, sans-serif;
  background: #e8c48a; border-radius: 10px; box-shadow: 0 4px 0 var(--terre-fonce); }
.une-course b { font: 700 15px Cinzel, serif; color: var(--terre-fonce); }
.une-course .vers-ville { grid-column: 1; color: var(--encre); }
.une-course .etat { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; font-size: 13px; padding: 3px 8px;
  border-radius: 6px; background: var(--sable); border: 2px solid var(--encre); }
.une-course.nouvelle .etat { background: var(--or); }
/* le panneau des courses (sept courses de l'Attique et l'epreuve, 2026-10-03) : il part du haut de la scene (centre,
   il sortait par le haut de l'ecran) ; le titre sur toute la largeur, d'une ligne, la ville, les drachmes et l'etat
   dessous ; la liste defile si elle ne tient pas sur l'ecran */
.carte.panneau { top: 8px; transform: translateX(-50%); width: min(92%, 340px); padding: 16px 12px 14px; }
.carte.panneau .liste { max-height: calc(max(100dvh, 640px) - 290px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 4px 6px; margin: 0 -4px 14px; }
/* le chapitre de l'histoire (HISTOIRE.md) au-dessus du titre, sa question en dessous (une ligne de plus : la liste
   defile un peu plus tot) */
.carte .chapitre { display: inline-block; margin: 0 0 6px; padding: 2px 10px; font: 700 13px Cinzel, serif;
  color: var(--encre); background: var(--or); border: 2px solid var(--encre); border-radius: 8px; }
.carte .chapitre[hidden] { display: none; }
.carte.a-chapitre .texte { font-style: italic; font-weight: 800; color: var(--terre-fonce); }
.carte.panneau.a-chapitre .liste { max-height: calc(max(100dvh, 640px) - 322px); }
.carte.panneau .une-course { flex-shrink: 0; min-height: 50px; padding: 6px 10px; gap: 2px 8px; }
.carte.panneau .une-course b { grid-column: 1 / -1; white-space: nowrap; }
.carte.panneau .une-course .vers-ville { white-space: nowrap; }
.carte.panneau .une-course .etat { grid-row: 2; white-space: nowrap; padding: 1px 7px; }
/* la forge (08-ville.js) : une ligne par piece, le prix a cote de son nom, ce qui change dessous sur toute la largeur
   (avant → apres, jamais coupe) */
.carte.forge .une-course .etat, .carte.boucliers .une-course .etat { grid-row: 1; white-space: nowrap; }
.carte.forge .une-course .vers-ville, .carte.boucliers .une-course .vers-ville { grid-column: 1 / -1; white-space: nowrap; }
/* la tisserande : le nom de la piece sur toute la largeur (« Casque de bronze » se coupait sur 360 px), dessous ce
   qu'elle change et son prix */
.carte.armure { width: min(92%, 340px); padding: 16px 12px 14px; }
.carte.armure .une-course { padding: 6px 10px; gap: 2px 8px; }
.carte.armure .une-course b { grid-column: 1 / -1; white-space: nowrap; }
.carte.armure .une-course .vers-ville { white-space: nowrap; }
.carte.armure .une-course .etat { grid-row: 2; white-space: nowrap; padding: 1px 7px; }
/* les rayons de la tisserande (Megare) : trois onglets au-dessus de ses pieces, celui qu'on regarde en or */
.carte .rayons { display: flex; gap: 6px; margin-bottom: 10px; }
.carte .rayons:empty { display: none; }
.carte .rayons button.rayon { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; font: 700 13px Cinzel, serif;
  color: var(--terre-fonce); background: var(--sable); }
.carte .rayons button.rayon[aria-pressed="true"] { background: var(--or); color: var(--encre); }
/* la forge : la lance qu'il porte deja n'est pas grisee (seulement sans action) */
.carte button.une-course.equipee:disabled { opacity: 1; background: #f6d989; }

/* le sac (08-ville.js, class Inventaire ; BIBLE § 4, valide par Romain le 2026-10-03) : bouton a cote de la bourse,
   en ville ; l'ecran couvre la scene et le bas de l'ecran, sous le bandeau (top donne par le JS) */
.bourse { align-items: center; gap: 10px; }
.ouvrir-sac, .ou-aller { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
              font: 800 15px Nunito, sans-serif; color: var(--encre); background: var(--sable);
              border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 #5e2410; cursor: pointer; }
.ouvrir-sac svg { width: 22px; height: 22px; }
.ouvrir-sac:active, .ou-aller:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e2410; }
.ouvrir-sac:disabled, .ou-aller:disabled { opacity: .55; cursor: default; transform: none; box-shadow: 0 4px 0 #5e2410; }
/* « Où aller ? » (07-course.js) : un point d'interrogation, la place manque a cote de la bourse sur 360 px */
.ou-aller { justify-content: center; min-width: 44px; padding: 0; font-size: 20px; }
/* changer les touches (05-touches.js) : ordinateur seulement, comme les lettres sur les boutons */
.ouvrir-touches { display: none; min-height: 44px; padding: 0 12px; font: 800 15px Nunito, sans-serif; color: var(--encre);
                  background: var(--sable); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 #5e2410;
                  cursor: pointer; }
.ouvrir-touches:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e2410; }
@media (hover: hover) and (pointer: fine) { .ouvrir-touches { display: block; } }
/* sous le bouton son : a cote, il touchait les cheveux de Phidippides */
.sac .ouvrir-touches { position: absolute; top: 60px; left: 8px; z-index: 1; box-shadow: 0 4px 0 var(--terre-fonce); }
.fenetre-touches { margin: auto; width: min(84vw, 320px); padding: 18px; text-align: center; color: var(--encre);
                   background: var(--sable); border: 4px solid var(--encre); border-radius: 14px;
                   box-shadow: 0 6px 0 var(--terre-fonce); }
.fenetre-touches::backdrop { background: rgba(0, 0, 0, .55); }
.fenetre-touches h2 { font: 700 26px Cinzel, serif; color: var(--terre-fonce); margin-bottom: 6px; }
.fenetre-touches .consigne { min-height: 2.7em; font-size: 15px; line-height: 1.35; margin-bottom: 10px; text-wrap: balance; }
.fenetre-touches .lignes { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 14px; }
.fenetre-touches li { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 16px; }
.fenetre-touches li button { min-width: 64px; min-height: 44px; font: 800 18px Nunito, sans-serif; color: var(--encre);
                             background: #e8c48a; border: 3px solid var(--encre); border-radius: 10px;
                             box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; }
.fenetre-touches li button.ecoute { background: var(--or); }
.fenetre-touches .choix { display: flex; justify-content: center; gap: 10px; }
.fenetre-touches .choix button { min-height: 44px; padding: 0 12px; font: 800 15px Nunito, sans-serif; color: var(--encre);
                                 background: var(--sable); border: 3px solid var(--encre); border-radius: 12px;
                                 box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; white-space: nowrap; }
.fenetre-touches .choix .fermer-touches { background: var(--or); }
.sac { position: absolute; left: 0; right: 0; bottom: 0; top: 41px; z-index: 10; overflow-y: auto;
       display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
       background: var(--sable); color: var(--encre); }
.sac h3 { font: 700 17px Cinzel, serif; color: var(--terre-fonce); }
.sac-haut { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 10px;
            background: #e8c48a; border: 3px solid var(--encre); border-radius: 14px;
            box-shadow: 0 4px 0 var(--terre-fonce); }
.sac-heros { display: block; width: 100%; height: clamp(110px, 18cqh, 170px); }
/* le niveau et l'experience vers le suivant (barre doree) */
.sac-niveau { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.sac-niveau b { font: 700 17px Cinzel, serif; color: var(--terre-fonce); white-space: nowrap; }
.sac-niveau .barre { flex: 1; height: 12px; background: var(--sable); border: 2px solid var(--encre); border-radius: 7px;
                     overflow: hidden; }
.sac-niveau .barre span { display: block; height: 100%; background: var(--or); }
.sac-niveau small { font-size: 13px; font-weight: 800; white-space: nowrap; }
.sac-grade { font: 700 15px Cinzel, serif; color: var(--terre-fonce); }
.sac-chiffres { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px 10px; font-size: 15px; }
.sac-chiffres dt { font-weight: 700; }
.sac-chiffres dd { font-weight: 800; text-align: right; white-space: nowrap; }
/* le message au coucou : une case comme les lances, mais rien a toucher (il ne s'ouvre pas) */
.sac-message { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 2px 12px; padding: 6px 12px;
  font: 700 13px Nunito, sans-serif; line-height: 1.3; background: #f6d989; border: 3px solid var(--encre);
  border-radius: 10px; }
.sac-message img { grid-row: 1 / span 2; width: 64px; height: 64px; }
.sac-message b { font: 700 15px Cinzel, serif; color: var(--terre-fonce); align-self: end; }
.sac-message p { align-self: start; text-wrap: balance; }
.emplacements { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emplacements li { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 10px;
                   font-size: 13px; font-weight: 700; line-height: 1.2; background: #e8c48a;
                   border: 2px solid var(--encre); border-radius: 10px; }
.emplacements li b { font: 700 13px Cinzel, serif; color: var(--terre-fonce); }
/* une place sans armure : pale, en pointilles */
.emplacements li.vide { opacity: .55; border-style: dashed; }
.sac-lances, .sac-boucliers, .sac-armure { display: flex; flex-direction: column; gap: 8px; }
.une-lance { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 2px 10px; min-height: 56px;
             padding: 6px 10px; text-align: left; font: 700 13px Nunito, sans-serif; color: var(--encre);
             background: #e8c48a; border: 3px solid var(--encre); border-radius: 10px;
             box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; }
.une-lance:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre-fonce); }
.une-lance img { grid-row: 1 / span 2; width: 72px; height: auto; }
/* une piece d'armure : la tete casquee, le corps, la jambe, centres dans la meme case que les lances */
.une-piece img { height: 48px; object-fit: contain; }
.une-lance b { font: 700 15px Cinzel, serif; color: var(--terre-fonce); }
.une-lance .etat { justify-self: end; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--or);
                   border: 2px solid var(--encre); }
.une-lance .chiffres { grid-column: 2 / span 2; white-space: nowrap; }
.une-lance.portee { background: #f6d989; cursor: default; }
.une-lance.portee .etat { background: var(--sable); }
/* « Fermer » en haut a droite, visible des l'ouverture (en bas, sur un petit telephone, il cachait les lances) */
.sac .fermer { position: absolute; top: 8px; right: 8px; z-index: 1; min-height: 44px; padding: 0 16px;
               font: 800 16px Nunito, sans-serif;
               color: var(--encre); background: var(--or); border: 3px solid var(--encre); border-radius: 12px;
               box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; }
.sac .fermer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre-fonce); }
/* le bouton son, en face de « Fermer » (son dessin : accueil.css) */
.sac .son { position: absolute; top: 8px; left: 8px; z-index: 1; box-shadow: 0 4px 0 var(--terre-fonce); }
.sac .son:active { box-shadow: 0 1px 0 var(--terre-fonce); }

/* le relais d'Hermes (BIBLE § 4) : un grade attend Hermes, un petit caducee dore brille sur la fleche qui y mene */
.vers .caducee { display: none; position: absolute; top: -12px; right: -10px; width: 26px; height: 26px; padding: 2px;
                 color: var(--encre); background: #ffe58a; border: 2px solid var(--encre); border-radius: 50%;
                 animation: appel 1.1s ease-in-out infinite alternate; }
.vers.gauche .caducee { right: auto; left: -10px; }
.vers.gauche .caducee svg { transform: none; }
.vers.appel .caducee { display: block; }
@keyframes appel { from { box-shadow: 0 0 0 0 rgba(255, 214, 90, .9); } to { box-shadow: 0 0 0 8px rgba(255, 214, 90, 0); } }
/* la banderole doree de la ceremonie (taille et transparence donnees par le JS, a l'horloge du jeu) */
.banderole { position: absolute; left: 50%; top: 30%; width: max-content; max-width: 92%; padding: 10px 22px 8px;
             text-align: center; pointer-events: none; color: var(--encre);
             background: linear-gradient(#ffe9a0, var(--or) 55%, #c98b3c); border: 3px solid var(--encre);
             border-radius: 12px; box-shadow: 0 5px 0 var(--terre-fonce), 0 10px 26px rgba(0, 0, 0, .35); }
.banderole b { display: block; font: 700 24px Cinzel, serif; letter-spacing: .04em; }
.banderole span { display: block; font: 800 15px Nunito, sans-serif; }

/* Une scene de l'histoire (08-dialogue.js, 08-prologue.js ; bulle validee par Romain le 2026-10-23, maquette
   maquettes/dialogue/) : la bulle a la place des gestes du bas, rien du combat par-dessus la scene. Un parchemin comme
   les cartes ; le medaillon de bronze de celui qui parle, du cote ou il se tient dans la scene ; son nom ; deux lignes
   au plus ; la fleche qui dit « touche pour la suite » ; « Passer » en dessous, a droite. */
.parole { display: none; flex-direction: column; gap: 10px; padding-top: 46px; cursor: pointer; }
.en-scene .commandes { justify-content: flex-start; }
.en-scene .parole { display: flex; }
.en-scene :is(.moi, .jauge, .boutons, .ville-bas, .alerte, .bulles, .aide, .fin, .bandeau-chef,
              .arriere-plan, .premier-plan, .ville, .vers, .carte, .fleche) { display: none; }
/* une scene au milieu d'un combat (le Taureau du prologue) : le nom et la vie des monstres restent */
.en-scene:not(.dans-combat) .etiquette { display: none; }
/* une scene en ville (Hermes au relais) : le decor reste */
.en-scene.en-ville .ville { display: block; }
/* une scene sur le dernier plan d'un film (Iris, Hera) : la vie du decor reste (le Lion sur son rocher) */
.en-scene.sur-film :is(.arriere-plan, .premier-plan) { display: block; }
.replique { position: relative; padding: 10px 16px 14px; background: var(--sable); border: 4px solid var(--encre);
            border-radius: 14px; box-shadow: 0 5px 0 var(--terre-fonce); }
.replique.vide { visibility: hidden; }                /* personne ne parle : « Passer » reste a sa place */
.replique .portrait { position: absolute; left: 8px; top: -50px; width: 84px; height: 84px; border-radius: 50%;
                      background: var(--sable); border: 4px solid var(--encre);
                      box-shadow: inset 0 0 0 4px #e3ad55, 0 3px 0 rgba(0, 0, 0, .25); }
.replique.droite .portrait { left: auto; right: 8px; }
.replique .qui { display: block; min-height: 24px; padding-left: 90px; font: 700 17px Cinzel, serif;
                 color: var(--terre-fonce); }
.replique.droite .qui { padding: 0 90px 0 0; text-align: right; }
.replique .texte { margin-top: 6px; font: 800 17px/1.35 Nunito, sans-serif; color: var(--encre); min-height: 2.7em;
                   text-wrap: balance; }                /* jamais un mot seul en derniere ligne (pretty : pas dans Firefox) */
.replique .texte .reste { visibility: hidden; }      /* la phrase garde sa place pendant qu'elle s'ecrit */
.replique .suite { position: absolute; right: 12px; bottom: 5px; width: 0; height: 0; border: 8px solid transparent;
                   border-top: 10px solid var(--terre); border-bottom: 0; opacity: 0;
                   animation: suite .9s ease-in-out infinite alternate; }
.replique.finie .suite { opacity: 1; }
@keyframes suite { to { transform: translateY(4px); } }
.parole-bas { display: flex; justify-content: flex-end; }
.parole-bas.attend { visibility: hidden; }            /* au milieu d'un combat : 08-dialogue.js, PASSER_APRES */
.parole .passer { min-height: 44px; padding: 0 18px; font: 800 15px Nunito, sans-serif; color: var(--encre);
                  background: var(--sable); border: 3px solid var(--encre); border-radius: 12px;
                  box-shadow: 0 4px 0 var(--terre-fonce); cursor: pointer; }
.parole .passer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre-fonce); }
.parole-fin { align-self: center; min-height: 52px; margin-top: 18px; padding: 0 28px; font: 800 18px Nunito, sans-serif;
              color: var(--encre); background: var(--or); border: 3px solid var(--encre); border-radius: 12px;
              box-shadow: 0 5px 0 #5e2410; cursor: pointer; }
.parole-fin:active { transform: translateY(4px); box-shadow: 0 1px 0 #5e2410; }
.lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* telephone etroit (360 px) : une taille de moins, pour garder deux lignes */
@media (max-width: 370px) {
  .en-scene .commandes { padding-left: 12px; padding-right: 12px; }
  .replique .texte { font-size: 16px; }
}
/* petit telephone (360 x 640) : le bas fait 220 px, la bulle et « Passer » y tiennent un peu plus serres */
@media (max-height: 700px) {
  .parole { padding-top: 36px; gap: 8px; }
  .replique .portrait { width: 74px; height: 74px; top: -44px; }
  .replique .qui { padding-left: 80px; } .replique.droite .qui { padding-right: 80px; }
}
@media (prefers-reduced-motion: reduce) { .replique .suite { animation: none; } }