/* (demande du 03/11, « POC validé : intégrer ») L'interface à médaillons est l'interface du jeu : ce fichier est celui du POC (`medaillons.html`),
   chargé par `index.html` après les règles du jeu. Les blocs du jeu (journal, À faire, case, calques…) sont posés directement dans les tuiles. */
  :root {
    --fond: #14110d; --pierre: #17120e; --pierre2: #211a13; --bronze: #9a7634; --bronze-sombre: #5a4520;
    --or: #e2c275; --pourpre: #5a1a14; --texte: #e8e0d0; --attenue: #a99a80;
    --serif: 'Cinzel', 'Trajan Pro', Georgia, serif;
    /* Taille de la fenêtre exprimée dans l'unité de l'interface (le zoom des menus la change : voir majVue). */
    --vw: 100vw; --vh: 100vh;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body { background: var(--fond); color: var(--texte); font: 14px/1.45 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
  button, select, input { font: inherit; }


  /* ---- couche HUD : ne capte la souris que sur ses éléments ---- */
  #poc-hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
  #poc-hud > * { pointer-events: auto; }

  /* ---- médaillons ---- */
  .medaillon {
    width: 78px; height: 78px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--or); background: radial-gradient(circle at 35% 30%, #4a3a26, #1d1611 72%);
    border: 2px solid var(--bronze);
    box-shadow: inset 0 0 0 3px #1d1611, inset 0 0 0 4px var(--bronze-sombre), 0 4px 10px rgba(0,0,0,.6);
    transition: box-shadow .15s, border-color .15s, color .15s;
  }
  .medaillon svg { width: 42px; height: 42px; }
  .medaillon.grand { width: 96px; height: 96px; }
  .medaillon.grand svg { width: 57px; height: 57px; }
  .medaillon.petit { width: 66px; height: 66px; }
  .medaillon.petit svg { width: 36px; height: 36px; }
  .groupe.survol > .medaillon, .medaillon:focus-visible {
    color: #fff3cf; border-color: var(--or); outline: none;
    background: radial-gradient(circle at 35% 30%, #5c4930, #241b13 72%);
    box-shadow: inset 0 0 0 3px #1d1611, inset 0 0 0 4px var(--bronze), 0 0 14px rgba(226,194,117,.55);
  }
  .groupe.epingle > .medaillon, .medaillon.actif {
    color: #f1d98e; border-color: var(--or);
    background: radial-gradient(circle at 35% 30%, #9a3226, #4a120e 72%);
    box-shadow: inset 0 0 0 3px #2a0b08, inset 0 0 0 4px var(--bronze), 0 4px 10px rgba(0,0,0,.6);
  }

  /* (demande du 04/11) Les dix médaillons de la planche Gemini (web/assets/ui/medaillon-*.png, `web/tools/decouper-planches.py`) : l'image remplace le disque
     dessiné et l'icône SVG. Le survol et le médaillon épinglé ou actif se disent par un halo doré autour du disque, plus par un fond rouge. */
  .medaillon.avec-image, .groupe.survol > .medaillon.avec-image, .groupe.epingle > .medaillon.avec-image, .medaillon.avec-image.actif, .medaillon.avec-image:focus-visible {
    background: none; border: 0; box-shadow: 0 3px 8px rgba(0,0,0,.55);
  }
  .medaillon .med { display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; transition: filter .15s, transform .15s; }
  .groupe.survol > .medaillon.avec-image, .medaillon.avec-image:focus-visible { box-shadow: 0 0 0 2px var(--bronze), 0 0 14px rgba(226,194,117,.65); }
  .groupe.survol > .medaillon.avec-image .med, .medaillon.avec-image:focus-visible .med { filter: brightness(1.12); }
  .groupe.epingle > .medaillon.avec-image, .medaillon.avec-image.actif { box-shadow: 0 0 0 3px var(--or), 0 0 18px rgba(226,194,117,.85); }
  .groupe.epingle > .medaillon.avec-image .med, .medaillon.avec-image.actif .med { filter: brightness(1.08) saturate(1.1); }

  /* ---- groupes (médaillon + panneau) ---- */
  .groupe { position: relative; z-index: 5; }
  .groupe.survol, .groupe.epingle { z-index: 20; }
  .tiroir { position: absolute; top: 0; display: none; }
  .groupe[data-cote="gauche"] > .tiroir { left: 78px; padding-left: 12px; }
  .groupe[data-cote="droite"] > .tiroir { right: 78px; padding-right: 12px; }
  .groupe[data-cote="bas"] > .tiroir { left: 0; top: 96px; padding-top: 10px; }
  .groupe[data-cote="menu"] > .tiroir { right: 0; top: 66px; padding-top: 10px; }
  .groupe.survol > .tiroir, .groupe.epingle > .tiroir { display: block; }

  .panneau {
    width: 340px; max-height: calc(var(--vh) - 240px); display: flex; flex-direction: column;
    background: var(--pierre); color: var(--texte);
    border: 1px solid var(--bronze); outline: 1px solid rgba(154,118,52,.4); outline-offset: 3px;
    box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.7);
  }
  .panneau > header {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px;
    background: var(--pourpre); border-bottom: 1px solid var(--bronze);
    font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--or);
  }
  .panneau > header .etat { font: 400 10px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; color: #e8d6a8; opacity: .8; }
  /* (demande du 04/11) L'en-tête de « À faire » prend le style des fenêtres de règles : marbre rouge (planche 1), filet doré, titre en or vif.
     (demande du 04/11, soir) Toutes les tuiles en font autant : celles de gauche (Puissances, Calques, Journal), celles du menu et le cadre « Case sélectionnée ». */
  .panneau > header {
    min-height: 34px; color: #f1d98c; text-shadow: 0 2px 3px rgba(0,0,0,.6);
    background: radial-gradient(ellipse at 50% 0%, rgba(147,41,29,.35) 0%, rgba(106,24,18,.25) 48%, rgba(30,4,3,.55) 100%), url("../assets/ui/fond-marbre-rouge.jpg") center / cover;
    border-bottom: 2px solid #b8923a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 -10px 16px rgba(0,0,0,.3);
  }
  .panneau > .corps { padding: 10px 12px; overflow-y: auto; font-size: 13px; }

  /* ---- haut ---- */
  /* (liste du 01/11) L'en-tête : la date, les 12 mois de l'année (hiver bleu, été doré, avril et novembre mi-bleu mi-doré : leur
     saison se tire au dé, 9.2), la phase courante et le joueur en gros ; les 8 phases sont rangées dans la marge de droite. */
  #poc-cartouche {
    position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: min(660px, calc(var(--vw) - 800px)); min-width: 440px;
    padding: 8px 14px 10px 20px; background: var(--pierre); border: 1px solid var(--bronze); border-top: 0; border-radius: 0 0 14px 14px;
    outline: 1px solid rgba(154,118,52,.4); outline-offset: 3px; box-shadow: 0 6px 20px rgba(0,0,0,.6);
    display: flex; align-items: stretch; gap: 14px; text-align: center;
  }
  #poc-principal { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  #poc-date { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--or); letter-spacing: .06em; }
  #poc-mois { display: flex; gap: 3px; width: 100%; }
  #poc-mois span {
    flex: 1 1 0; min-width: 0; padding: 3px 0 2px; border-radius: 3px; border: 1px solid transparent;
    font: 700 11px/1.2 var(--serif); letter-spacing: .02em; text-transform: capitalize; white-space: nowrap; overflow: hidden;
  }
  #poc-mois b { font: inherit; }
  #poc-mois .init { display: none; }
  body.etroit #poc-mois .long { display: none; }
  body.etroit #poc-mois .init { display: inline; }
  #poc-mois .hiver { background: #1d3350; color: #bcd5f2; border-color: #36598a; }
  #poc-mois .ete { background: #5c4616; color: #f3dc94; border-color: #9a7634; }
  #poc-mois .de { background: linear-gradient(105deg, #1d3350 0 50%, #5c4616 50% 100%); color: #f6ecd2; border-color: #7e7a60; }
  #poc-mois .courant { outline: 2px solid var(--or); outline-offset: 1px; color: #fff; box-shadow: 0 0 10px rgba(226,194,117,.65); position: relative; z-index: 1; }
  #poc-phases { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 24px); gap: 3px 4px; align-content: center; padding-left: 12px; border-left: 1px solid var(--bronze-sombre); }
  #poc-phases span {
    display: grid; place-items: center; min-width: 30px; height: 24px; padding: 0 4px; border-radius: 2px;
    font: 700 12px/1 var(--serif); color: var(--attenue); border: 1px solid var(--bronze-sombre);
  }
  #poc-phases span.passee { background: #2a2118; color: #7d6e58; border-color: #3a2c1a; }
  #poc-phases span.courante { background: #7a1f1a; color: var(--or); border-color: var(--or); }
  /* (liste du 01/11, soir) La ligne phase + joueur prend la place restante sous les mois et s'y centre verticalement (elle était trop haute). */
  #poc-phase-txt { flex: 1 1 auto; align-self: stretch; margin-bottom: -5px; /* le bas de la tuile a 10 px de marge, le haut 6 : on égalise */ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; color: var(--attenue); }
  #poc-phase { font: 700 17px/1.15 var(--serif); letter-spacing: .05em; color: #fff3cf; text-shadow: 0 1px 6px rgba(226,194,117,.35); }
  #poc-actif {
    --camp: var(--or); display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 8px; border-radius: 12px;
    font: 600 13px/1.3 "Segoe UI", system-ui, sans-serif; color: var(--camp); background: rgba(0,0,0,.35); border: 1px solid var(--camp);
  }
  #poc-actif::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--camp); box-shadow: 0 0 6px var(--camp); }

  #poc-hg { position: fixed; left: 14px; top: 10px; display: flex; gap: 10px; align-items: center; z-index: 30; }
  .plaque { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px; background: rgba(23,18,14,.94); border: 1px solid var(--bronze-sombre); border-radius: 4px; }
  .plaque .titre { font: 700 14px/1.2 var(--serif); letter-spacing: .1em; color: var(--or); }
  /* (liste du 02/11, soir) Le numéro et le nom du scénario sous le titre du jeu */
  .plaque .scenario { font-size: 12px; line-height: 1.25; color: #e8d6a8; max-width: 300px; }
  .plaque .scenario:empty { display: none; }
  .plaque label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--attenue); }
  /* (liste du 01/11) La tuile « Partie » : le choix de la langue y est rangé ; « Nouvelle partie » est un grand bouton (la source du jeu
     porte un style en ligne, d'où !important). */
  #poc-langue { width: 100%; background: #241c15; color: var(--texte); border: 1px solid var(--bronze-sombre); border-radius: 3px; padding: 4px 8px; font-size: 13px; }
  body [data-miroir="menu"] #nouvelle {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 4px;
    padding: 11px 14px !important; font: 700 15px/1.1 var(--serif) !important; letter-spacing: .1em; text-transform: uppercase;
    color: #f6e3b4; cursor: pointer; border: 1px solid var(--or); border-radius: 5px; outline: 1px solid rgba(154,118,52,.5); outline-offset: 2px;
    background: radial-gradient(ellipse at 50% 0, #a8382a, #5a1a14 62%, #3a0f0c); box-shadow: inset 0 1px 0 rgba(255,235,190,.35), 0 4px 12px rgba(0,0,0,.6);
    transition: box-shadow .15s, filter .15s;
  }
  body [data-miroir="menu"] #nouvelle::before { content: "✦"; font-size: 16px; color: var(--or); }
  body [data-miroir="menu"] #nouvelle::after { content: "✦"; font-size: 16px; color: var(--or); }
  body [data-miroir="menu"] #nouvelle:hover { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255,235,190,.35), 0 0 16px rgba(226,194,117,.6); }
  .plaque select, #poc-hd select { background: #241c15; color: var(--texte); border: 1px solid var(--bronze-sombre); border-radius: 3px; padding: 2px 6px; font-size: 12px; max-width: 220px; }
  #poc-hd { position: fixed; right: 14px; top: 12px; display: flex; gap: 10px; align-items: center; z-index: 35; }
  #poc-hd select { font-family: var(--serif); color: var(--or); border-color: var(--bronze); padding: 4px 8px; }

  /* ---- colonnes ---- */
  .colonne { position: fixed; top: 150px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
  .colonne > * { pointer-events: auto; }
  /* La colonne de gauche est abaissée : le panneau « Puissances » (en haut à gauche) ne passe plus dessous.
     Ses panneaux s'ouvrent vers le bas (Calques) ou vers le haut (Journal, ouvert par défaut) pour ne pas
     recouvrir le cadre de la case sélectionnée. */
  #poc-gauche { left: 14px; top: max(320px, calc(var(--vh) * .42)); }
  #poc-gauche .panneau { max-height: calc(var(--vh) - max(320px, var(--vh) * .42) - 110px); }
  /* (issue #729) La tuile du journal suit son contenu (moitié de l'écran au plus, puis elle défile) et sa base repose juste
     au-dessus du cadre « Case sélectionnée » : --bas-h, la hauteur de #poc-bas, est mesurée par le script. */
  #poc-gauche .groupe[data-id="journal"] > .tiroir { position: fixed; top: auto; left: 92px; bottom: calc(14px + var(--bas-h, 78px) + 10px); }
  #poc-gauche .groupe[data-id="journal"] .panneau { max-height: calc(var(--vh) * .5); }
  /* (liste du 01/11, soir) La colonne de droite (dont « À faire ») est un contexte d'empilement à part : sans z-index, « Case sélectionnée »
     (#poc-bas, plus loin dans la page) la recouvrait là où elles se croisent. */
  #poc-droite { right: 14px; z-index: 12; }
  .medaillon .glyphe { font: 700 33px/1 var(--serif); }
  .sw-couleur { cursor: pointer; width: 13px; height: 13px; }
  .sw-couleur:hover { outline: 1px solid var(--or); outline-offset: 1px; }
  /* Fenêtre étroite (ou menus très agrandis) : la plaque du haut gauche se resserre pour ne pas mordre sur la date. */
  body.etroit #poc-hg .titre, body.etroit #poc-hg .scenario { display: none; }
  body.etroit #poc-hg .plaque select { max-width: 130px; }
  body.etroit #poc-cartouche { min-width: 330px; }
  /* (liste du 01/11, soir) Les menus restent visibles quand une fenêtre du jeu (couleurs, combat…) s'ouvre dans le cadre. */
  .zoom-ui { display: flex; align-items: center; gap: 8px; }
  .zoom-ui output { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--or); }

  /* ---- bas ---- */
  #poc-bas { position: fixed; left: 14px; bottom: 14px; display: flex; gap: 12px; align-items: flex-end; pointer-events: none; }
  #poc-bas > * { pointer-events: auto; }
  /* Le cadre court jusqu'au bouton « Phase suivante » (≈ 384 px de réserve à droite) et prend la hauteur
     qu'il lui faut : pas d'ascenseur, il grandit vers le haut. */
  #poc-case { width: calc(var(--vw) - 384px); min-width: 320px; max-height: calc(var(--vh) - 90px); }
  #poc-case[hidden] { display: none; }

  #poc-suivante { position: fixed; right: 14px; bottom: 14px; display: flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; color: #f1e3c0; }
  #poc-suivante .plaque { align-items: flex-end; padding: 8px 40px 8px 16px; margin-right: -30px; border-color: var(--bronze); outline: 1px solid rgba(154,118,52,.4); outline-offset: 3px; }
  #poc-suivante .plaque b { font: 700 16px/1.2 var(--serif); letter-spacing: .06em; color: var(--or); }
  #poc-suivante .plaque span { font-size: 12px; color: var(--attenue); }
  /* (demande du 05/11) Le sablier de la planche 2 (`medaillon-phase-suivante.png`, détouré par decouper-planches.py) remplace le rond rouge et le sablier dessiné. */
  #poc-suivante .rond {
    width: 104px; height: 104px; background: url("../assets/ui/medaillon-phase-suivante.png") center / contain no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); transition: filter .15s, transform .15s;
  }
  #poc-suivante:hover .rond, #poc-suivante:focus-visible .rond { filter: drop-shadow(0 0 10px rgba(226,194,117,.85)) brightness(1.08); }
  #poc-suivante:active .rond { transform: scale(.96); }
  #poc-suivante:focus-visible { outline: none; }
  #poc-suivante:disabled { opacity: .5; cursor: default; }

  /* ---- (demande du 04/11, soir) Les médaillons sont 50 % plus grands : 52 → 78 px, 64 → 96 px (aigle), 44 → 66 px (menu et aide). ---- */

  /* ---- (demande du 04/11, soir) La carte de levée de « À faire » : une tuile de marbre blanc (comme les puissances civilisées), le pion agrandi de 50 %, deux aureus
     à droite en guise de bouton (survol et clic animés), un liseré rouge bien voyant quand la levée dépasse la capacité de ravitaillement, et le petit bouton « Voir ». ---- */
  #poc-droite .groupe[data-id="afaire"] .panneau { width: 390px; } /* plus large : le texte d'une levée tient sur deux lignes */
  .carte-action.avec-voir { position: relative; }
  .carte-action.avec-voir > .titre { padding-right: 62px; }
  .carte-action .carte-voir { position: absolute; top: 6px; right: 8px; }
  /* (demande du 04/11, soir) Tous les boutons « Voir » sont deux fois plus petits : cadre et marges divisés par deux, texte de 13 à 10 px (en dessous, il ne se lit plus). */
  .carte-action .boutons button.voir { --bt-v: 5px; --bt-h: 8px; min-height: 10px; padding: 0 1px; gap: 4px; font: 700 10px/10px 'Cinzel', 'Trajan Pro', Georgia, serif; letter-spacing: .02em; }
  .carte-action .boutons button.avec-pion {
    position: relative; min-height: 62px; padding: 6px 10px; text-align: left; font-weight: 600; font-size: 12px; line-height: 1.3; gap: 8px; color: #1d140b; text-shadow: none; filter: none;
    border: 1px solid rgba(110,80,30,.55); border-image: none; border-radius: 3px;
    background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.45)), url("../assets/ui/fond-marbre-blanc.jpg") center / cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
  }
  .carte-action .boutons button.avec-pion.avec-aureus { padding-right: 84px; } /* la place des deux aureus d'or (levée en Talents) */
  .carte-action .boutons button.avec-pion:hover:not(:disabled) { filter: none; box-shadow: 0 0 0 1px rgba(226,194,117,.9), 0 2px 10px rgba(0,0,0,.55); }
  .carte-action .boutons button.avec-pion img { width: 39px; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
  .carte-action .boutons button.avec-pion.alerte {
    color: #1d140b; border: 3px solid #d4231a; border-image: none;
    box-shadow: 0 0 0 2px rgba(255,70,50,.40), 0 0 14px 2px rgba(220,30,20,.75), 0 2px 6px rgba(0,0,0,.5);
  }
  .carte-action .boutons button.avec-pion.alerte:hover:not(:disabled) { box-shadow: 0 0 0 2px rgba(255,70,50,.55), 0 0 18px 3px rgba(240,40,25,.9), 0 2px 8px rgba(0,0,0,.55); }
  .carte-action .boutons button.avec-pion .aureus { position: absolute; right: 9px; top: 50%; width: 70px; height: 38px; transform: translateY(-50%); pointer-events: none; }
  .aureus i { position: absolute; top: 0; width: 38px; height: 38px; background: center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: transform .18s, filter .18s; }
  .aureus i:nth-child(1) { left: 0; background-image: url("../assets/ui/aureus-1.png"); }
  .aureus i:nth-child(2) { right: 0; background-image: url("../assets/ui/aureus-2.png"); }
  /* (demande du 05/11) Points de mobilisation (règle 26) : un seul aureus, d'argent, à la place des deux d'or des Talents. */
  .carte-action .boutons button.avec-pion.avec-argent { padding-right: 52px; }
  .carte-action .boutons button.avec-pion .aureus.argent { width: 38px; }
  .aureus.argent i:nth-child(1) { background-image: url("../assets/ui/aureus-3.png"); }
  button.avec-pion:hover:not(:disabled) .aureus i:nth-child(1) { transform: translate(-6px, -3px) rotate(-12deg) scale(1.08); filter: drop-shadow(0 0 7px rgba(255,214,90,.95)) brightness(1.15); }
  button.avec-pion:hover:not(:disabled) .aureus i:nth-child(2) { transform: translate(6px, -3px) rotate(12deg) scale(1.08); filter: drop-shadow(0 0 7px rgba(255,214,90,.95)) brightness(1.15); }
  button.avec-pion:active:not(:disabled) .aureus i { transform: translateY(3px) scale(.88); filter: drop-shadow(0 0 3px rgba(255,214,90,.6)) brightness(.88); }
  button.avec-pion:active:not(:disabled) .aureus::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,214,90,.9); animation: aureus-onde .35s ease-out; }
  @keyframes aureus-onde { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

  /* ---- tuile « Règles » et accessoires des tuiles ---- */
  /* (liste du 02/11) Le numéro et le titre du scénario, dans l'en-tête de la tuile Puissances ; la tuile Règles et ses parties repliables */
  .panneau > header .scen { font: 400 11px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; color: #e8d6a8; margin-left: 8px; }
  .panneau > header .scen:not(:empty)::before { content: "— "; }
  /* (demande du 04/11) Plus de tuile « Règles » : quatre médaillons (Puissances, Taxation, Mobilisation, Victoire) sous « À faire », chacun ouvre sa fenêtre
     centrée du style des combats (`dialog.combat.regles`, dans index.html). */
  #poc-regles-boutons { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .rub { font-size: 11px; color: var(--attenue); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
  .rub:first-child { margin-top: 0; }
  .puce { display: inline-block; width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.35); vertical-align: -1px; margin-right: 6px; }
  .choix { display: flex; gap: 7px; align-items: center; padding: 2px 0; }
  input[type=checkbox] { accent-color: #b08a3e; width: 15px; height: 15px; margin: 0; }
  .pastilles { display: flex; flex-wrap: wrap; gap: 4px; }
  .pastilles span { padding: 1px 7px; border: 1px solid var(--bronze-sombre); border-radius: 10px; font-size: 12px; }
  .btn { font-size: 12px; padding: 3px 10px; background: #2a1410; color: #f1e3c0; border: 1px solid var(--bronze); border-radius: 3px; cursor: pointer; }
  .btn:hover { border-color: var(--or); }
  .btn.danger { border-color: #a8322a; color: #f0b4a8; }
  .note { color: var(--attenue); font-size: 12px; }

  /* ---- les blocs du vrai jeu rangés dans les tuiles (classe « miroir » : le jeu y est présenté en tuile, pas en panneau) ---- */
  .miroir h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--attenue); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
  .miroir select, .miroir button, .miroir input:not([type=checkbox]) { background: #241c15; color: var(--texte); border: 1px solid var(--bronze-sombre); border-radius: 3px; padding: 3px 8px; cursor: pointer; }
  .miroir button:hover:not(:disabled) { border-color: var(--or); }
  .miroir button:disabled { opacity: .45; cursor: default; }
  .miroir button.principal { background: #4a1a14; border-color: var(--or); color: #f6e7c0; font-weight: 600; }
  .miroir #aide, .miroir #calques { position: static !important; background: none !important; border: 0 !important; padding: 0 !important; max-width: none !important; }
  .miroir .bloc { padding: 0; border: 0; }
  /* « body » : plus précis que la règle du jeu (`#journal { max-height: 200px }`) reprise en fin de <head> ; c'est le panneau
     qui plafonne (moitié de l'écran) et défile, pas un second ascenseur de 200 px dans le journal (issue #729) */
  body .miroir #journal { max-height: none; overflow: visible; }

  /* ---- cadre « Case sélectionnée » : les pions en tuiles, sans texte, avec la pastille A / B / C du CER ----
     (préfixe « body … #pile » : plus précis que les règles du jeu reprises en fin de <head>) */
  body [data-miroir="case"] #pile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 8px; padding: 12px 0 0; }
  body [data-miroir="case"] #pile > :not(.pion) { flex: 1 0 100%; }
  body [data-miroir="case"] #pile .pion {
    position: relative; display: flex; flex-direction: column; gap: 2px; width: auto; min-width: 36px; padding: 0; border-radius: 3px; }
  body [data-miroir="case"] #pile .pion:hover { background: none; }
  /* (issue #728) La sélection est un liseré épais autour de la tuile (filet sombre puis trait clair : lisible sur toutes les
     couleurs de faction) ; la case à cocher n'est plus dessinée mais reste là, focalisable au clavier (anneau pointillé). */
  body [data-miroir="case"] #pile .pion:has(input:checked) .vignette { border-radius: 4px; box-shadow: 0 0 0 2px #14110d, 0 0 0 5px #fff6e0; }
  body [data-miroir="case"] #pile .pion:has(input:focus-visible) .vignette { outline: 2px dashed var(--or); outline-offset: 7px; }
  /* la tuile fait 47 px de côté (36 px + 20 %, puis + 10 % le 02/11) ; la figurine d'un pion illustré dépasse de son bord haut (l'image est plus haute que large) */
  body [data-miroir="case"] #pile .pion { min-width: 47px; }
  body [data-miroir="case"] #pile .pion .vignette, body [data-miroir="case"] #pile .pion .masque { width: 47px; height: 47px; }
  body [data-miroir="case"] #pile .pion .vignette img { width: 47px; height: auto; position: absolute; left: 0; bottom: 0; }
  body [data-miroir="case"] #pile .pion > div { display: none; }
  body [data-miroir="case"] #pile .pion > span:empty { display: none; }
  body [data-miroir="case"] #pile .pion > input[type=checkbox] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  /* les points de remplissage d'un chariot, sur le bas de son pion ; l'ancre des troupes embarquées passe en bas à gauche */
  body [data-miroir="case"] #pile .pion .vignette .charge { bottom: 4px; gap: 3px; padding: 2px 5px; }
  body [data-miroir="case"] #pile .pion .vignette .charge i { width: 7px; height: 7px; }
  body [data-miroir="case"] #pile .pion .ancre { left: -3px; top: auto; bottom: -2px; font-size: 12px; }
  /* la pastille du CER : disque sombre liseré clair, lettre claire, sur le coin haut-gauche (cf. render.js, pastilleCer) */
  body [data-miroir="case"] #pile .pion[data-cer]::before {
    content: attr(data-cer); position: absolute; left: -4px; top: -4px; z-index: 2; width: 16px; height: 16px; border-radius: 50%;
    background: rgba(20,17,13,.92); border: 1.5px solid #f4ecd8; color: #f4ecd8;
    font: 700 10px/13px system-ui, sans-serif; text-align: center; pointer-events: none; }
  /* seul reste le réglage de charge d'un chariot (arbitre de la table partagée), sous sa tuile */
  body [data-miroir="case"] #pile .pion:has(select.charge-chariot) > div { display: block; font-size: 10px; }
  body [data-miroir="case"] #pile .pion:has(select.charge-chariot) > div > :not(small:has(select)) { display: none; }
  /* (demande du 02/11) Rangée d'un navire : l'en-tête (nom, jauge, places libres) puis le navire et sa cargaison sur la même ligne */
  /* (demande du 02/11, soir) Les rangées se rangent en colonnes selon la place : chacune garde sa largeur de contenu (au plus la ligne) et la pile passe à la colonne suivante au lieu de sortir de l'écran */
  body [data-miroir="case"] #pile .rangee-navire { flex: 0 1 auto; max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 6px 12px 2px 0; border-top: 1px solid #3a2c1a; margin: 2px 0 0; }
  body [data-miroir="case"] #pile .rangee-navire .navire-tete { flex: 1 0 100%; padding: 0; }
  /* (demande du 02/11, soir) Les unités à terre (et les navires vides) forment un groupe, une ligne entière, au lieu de se glisser entre les rangées */
  body [data-miroir="case"] #pile .groupe-pions { padding: 6px 0 2px; border-top: 1px solid #3a2c1a; margin: 2px 0 0; }
  body [data-miroir="case"] #pile .groupe-pions .navire-tete { padding: 0 0 6px; }
  body [data-miroir="case"] #pile .groupe-pions .navire-tete b { font-size: 12px; }
  body [data-miroir="case"] #pile .pions-groupe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
  body [data-miroir="case"] #pile .rangee-navire .navire-tete b { font-size: 12px; }
  body [data-miroir="case"] #pile .cargaison { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; flex: 1 1 0; min-width: 0; margin-left: 0; padding-left: 12px; border-left: 2px solid var(--bronze); }
  body [data-miroir="case"] #pile .pion.halo .vignette { outline: 2px dashed var(--or); outline-offset: 3px; }

  /* ---- cadre « Case sélectionnée » : boutons à gauche des pions, ligne d'identité alignée à gauche ---- */
  body [data-miroir="case"] { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: start; }
  body [data-miroir="case"] > .bloc { display: contents; }
  body [data-miroir="case"] h2 { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; align-items: baseline; gap: 18px; margin: 0; }
  body [data-miroir="case"] h2 > span { margin: 0; }
  /* (liste du 02/11) La ligne « case · ville · province » : à gauche, grande, claire ; le numéro de la case en or, un filet entre les trois */
  /* (« !important » : les règles du jeu reprises plus haut portent un identifiant (`.miroir #panneau h2`) et l'emportent sur toute règle de classe) */
  body [data-miroir="case"] h2 { justify-content: flex-start !important; text-align: left !important; gap: 0 !important; font-size: 17px !important; line-height: 1.3; letter-spacing: .01em !important; text-transform: none !important; font-weight: 700 !important; color: var(--texte) !important; padding-bottom: 6px; border-bottom: 1px solid #3a2c1a; }
  body [data-miroir="case"] h2 > span:first-child { color: var(--attenue) !important; font-weight: 600; }
  body [data-miroir="case"] h2 #nom-case { color: var(--or); font-size: 21px; font-weight: 700; margin-left: 4px; letter-spacing: .03em; }
  body [data-miroir="case"] h2 > span + span:not(:empty)::before { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--bronze); margin: 0 14px; vertical-align: -2px; }
  body [data-miroir="case"] h2 #nom-ville { color: #f6e7c0 !important; }
  body [data-miroir="case"] h2 #info-case { color: var(--texte) !important; font-weight: 600; }
  body [data-miroir="case"] #actions-case { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 5px; width: 168px; }
  body [data-miroir="case"] #actions-case button { text-align: left; white-space: normal; }
  body [data-miroir="case"] #actions-case:empty { display: none; }
  body [data-miroir="case"] #pile { grid-column: 2; grid-row: 2; }
  body [data-miroir="case"] #actions-case:empty + #pile { grid-column: 1 / -1; }



  #poc-aide-touches { position: fixed; right: 14px; bottom: 116px; font-size: 11px; color: var(--attenue); background: rgba(23,18,14,.85); border: 1px solid var(--bronze-sombre); border-radius: 12px; padding: 2px 10px; pointer-events: none; }

  /* ---- le jeu, plein écran sous les menus (le panneau de droite d'avant n'existe plus ; ce qu'il en reste est caché et seul `medaillons.js` le lit) ---- */
  body { display: block; }
  #carte { position: fixed; inset: 0; }
  #panneau { display: none; }
  #legende, #legende-limitanei, #consigne { top: 110px; }
  #legende { left: 50%; transform: translateX(-50%); }
  #legende-limitanei { left: 50%; transform: translateX(-50%); top: 146px; }
  #bandeau { top: 96px; }
  /* les fenêtres du jeu (couleurs, combat…) suivent la taille des menus */
  dialog { zoom: var(--ui, 1); }

  /* les blocs du jeu qui flottaient sur la carte (calques, aide, journal) restent dans le flux de leur tuile, sans leur fond ni leur cadre */
  .miroir > #calques, .miroir > #aide, .miroir > #journal {
    position: static !important; inset: auto !important; transform: none !important; width: auto !important;
    max-width: none !important; background: none !important; border: 0 !important; padding: 0 !important; }
  .miroir > #calques > b:first-child { display: none; } /* le titre est déjà dans l'en-tête de la tuile */