/* Anofelis Web — page de table : lobby puis tapis.
   Le tapis est un plateau de nuit : les cartes sont les seuls objets clairs, le reste reste discret. */

:root {
  --carte-l: 78px;                /* cartes des zones fixes (échelle 0,62 de 126 × 178) */
  --carte-h: 110px;
  --tapis-fond: #17262b;
  --tapis-fond-2: #0f1a1e;
  --zone: rgba(230, 220, 195, 0.04);
  --zone-filet: rgba(200, 162, 90, 0.35);
}

.page-table { height: 100vh; overflow: hidden; }
.page-table [hidden] { display: none !important; }
.page-table main { max-width: none; padding: 0; }

/* Barre haute --------------------------------------------------------- */

.barre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 3rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--filet);
  background: var(--nuit);
  flex: none;
}
.barre .marque { font-family: var(--serif); font-size: 1.35rem; color: var(--papier); text-decoration: none; }
.barre .titre-table { display: flex; align-items: baseline; gap: 0.8rem; flex: 1; min-width: 0; }
.barre #titre-scenario { font-family: var(--serif); font-size: 1.25rem; white-space: nowrap; }
.barre .code-table { font-weight: 500; letter-spacing: 0.25em; color: var(--dorure-2); }
.barre .lien { font: inherit; font-size: 0.85rem; color: var(--papier-2); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; padding: 0; }
.barre .lien:hover { color: var(--papier); }
.barre a.lien { font-size: 0.85rem; }
.barre .moi { color: var(--papier-2); font-size: 0.95rem; white-space: nowrap; }
/* Astuce plein écran (demande du 2026-09-29) : la barre s'efface en plein écran, l'astuce avec elle ; masquée sur les
   petites largeurs, où elle n'a plus la place (et sans clavier, F11 n'a pas de sens). */
.barre .astuce-ecran { font-style: italic; font-size: 0.85rem; color: var(--papier-2); white-space: nowrap; flex: none; }
@media (max-width: 1200px), (pointer: coarse) { .barre .astuce-ecran { display: none; } }

.bandeau { margin: 0; padding: 0.5rem 1rem; background: #4a3419; color: var(--papier); font-size: 0.95rem; }
.page-table .etat { margin: 0; padding: 0.6rem 1rem; color: var(--papier-2); }
.page-table .etat.erreur { color: var(--wip); font-size: 1.1rem; padding: 2rem 1.5rem; }

/* Lobby ----------------------------------------------------------------- */

.lobby { height: calc(100vh - 3rem); overflow-y: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.lobby-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lobby .surtitre { margin: 0; color: var(--papier-2); }
.lobby h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.lobby .partage { text-align: right; }
.lobby .partage .etiquette { margin: 0; color: var(--papier-2); font-size: 0.95rem; }
.lobby .partage .code-table { margin: 0 0 0.5rem; font-weight: 500; font-size: 2.6rem; letter-spacing: 0.3em; color: var(--dorure-2); line-height: 1.1; }

.sieges-lobby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 1100px) { .sieges-lobby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.siege-lobby { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 1rem 1rem; background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 3px; min-height: 15rem; }
.siege-lobby.moi { border-color: var(--dorure); }
.siege-lobby header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.siege-lobby h2 { font-size: 1.3rem; }
.siege-lobby .nom { color: var(--papier-2); }
.vous { font-size: 0.8rem; color: var(--nuit); background: var(--dorure-2); padding: 0 0.4em; border-radius: 2px; }
.etoile { color: var(--dorure-2); }
.etat-siege { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--prevu); flex: none; }
.etat-siege.connecte { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

.siege-lobby .corps { flex: 1; }
.siege-lobby .vignette { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 4px; display: block; background: var(--tapis-fond-2); }
.siege-lobby .fiche { display: grid; gap: 0.1rem; margin-top: 0.6rem; padding-left: 0.6rem; border-left: 3px solid var(--faction, var(--papier-2)); }
.siege-lobby .fiche .sous, .siege-lobby .fiche .stats { color: var(--papier-2); font-size: 0.9rem; }
.siege-lobby .fiche .classe { font-size: 0.9rem; }
.vide { color: var(--papier-2); font-style: italic; margin: 0; }
.siege-lobby .actions { display: grid; gap: 0.5rem; }
.champ-nom { font: inherit; padding: 0.4rem 0.6rem; background: var(--nuit); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; }
.champ-nom:focus { border-color: var(--dorure); outline: none; }
.siege-lobby .aide, .lobby .aide { color: var(--papier-2); font-size: 0.9rem; margin: 0; }

.reglages { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .reglages { grid-template-columns: 1fr; } }
.reglage { border: 1px solid var(--filet); border-radius: 3px; padding: 0.75rem 1rem 1rem; margin: 0; display: grid; gap: 0.35rem; align-content: start; }
.reglage legend { font-family: var(--serif); font-size: 1.3rem; padding: 0 0.4rem; }
.reglage .choix { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6rem; align-items: baseline; cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 2px; }
.reglage .choix.actif { background: rgba(200, 162, 90, 0.12); }
.reglage .choix .libelle { font-weight: 500; }
.reglage .choix .sous { color: var(--papier-2); font-size: 0.9rem; }
.reglage .choix-ligne { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.reglage input[type="radio"] { accent-color: var(--dorure); }

.lancement { display: grid; gap: 0.5rem; justify-items: start; margin-bottom: 1rem; }
.bouton.grand { font-size: 1.25rem; padding: 0.7rem 1.6rem; }
.lancement .attente { margin: 0; color: var(--papier-2); }
.lobby .spectateurs { color: var(--papier-2); font-size: 0.9rem; }

/* Fenêtre de choix d'un enquêteur */
.dialogue-inv { width: min(60rem, 92vw); height: 82vh; padding: 0; border: 1px solid var(--dorure); border-radius: 3px; background: var(--nuit); color: var(--papier); display: flex; flex-direction: column; }
.dialogue-inv[open] { display: flex; }
.dialogue-inv::backdrop { background: rgba(8, 14, 16, 0.7); }
.dialogue-inv header { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--filet); }
.dialogue-inv h2 { font-size: 1.5rem; flex: 1; }
.dialogue-inv .recherche { font: inherit; padding: 0.4rem 0.7rem; width: 18rem; max-width: 40%; background: var(--nuit-2); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; }
.liste-inv { overflow-y: auto; padding: 0.5rem 1.2rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.4rem 1rem; align-content: start; }
.liste-inv h3 { grid-column: 1 / -1; font-size: 1.2rem; margin: 0.9rem 0 0.2rem; padding-left: 0.6rem; border-left: 4px solid var(--faction, var(--papier-2)); }
/* .inv = enquêteur ArkhamDB, .inv-custom = entrée « Enquêteur personnalisé » (même rendu, classe distincte pour les scripts) */
.liste-inv .inv, .liste-inv .inv-custom { display: grid; grid-template-columns: 4rem 1fr; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; text-align: left; font: inherit; color: var(--papier); background: var(--nuit-2); border: 1px solid transparent; border-left: 3px solid var(--faction, var(--papier-2)); border-radius: 2px; padding: 0.35rem 0.5rem; cursor: pointer; }
.liste-inv .inv:hover:not(:disabled), .liste-inv .inv-custom:hover { border-color: var(--dorure); }
.liste-inv .inv:disabled { opacity: 0.4; cursor: not-allowed; }
.liste-inv .inv img { grid-row: 1 / 3; width: 4rem; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 2px; background: var(--tapis-fond-2); }
.liste-inv .inv .nom, .liste-inv .inv-custom .nom { font-weight: 500; }
.liste-inv .inv .sous, .liste-inv .inv .meta, .liste-inv .inv-custom .sous, .liste-inv .inv-custom .meta { color: var(--papier-2); font-size: 0.85rem; font-weight: 400; }
/* Enquêteur personnalisé : entrée « Hors collection » puis formulaire dans la même fenêtre */
.liste-inv .inv-custom .icone { grid-row: 1 / 3; width: 4rem; aspect-ratio: 7 / 5; display: grid; place-items: center; font-size: 1.6rem; color: var(--dorure-2); background: var(--tapis-fond-2); border-radius: 2px; }
.form-custom { grid-column: 1 / -1; display: grid; gap: 0.8rem; max-width: 40rem; }
.form-custom h3 { margin-top: 0.9rem; }
.form-custom .aide { margin: 0; color: var(--papier-2); font-size: 0.9rem; }
.form-custom .champs { display: grid; gap: 0.7rem; }
.form-custom .champ { display: grid; gap: 0.25rem; }
.form-custom .champ .libelle { font-weight: 500; }
.form-custom .champ input { font: inherit; padding: 0.4rem 0.6rem; background: var(--nuit-2); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; }
.form-custom .champ input:focus { border-color: var(--dorure); outline: none; }
.form-custom .jauges { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-custom .jauges input { width: 6rem; }
.apercu-custom { width: 14rem; aspect-ratio: 7 / 5; display: grid; place-items: center; background: var(--tapis-fond-2); border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; }
.apercu-custom img { width: 100%; height: 100%; object-fit: contain; }
.apercu-custom .vide { padding: 0.5rem; text-align: center; }
.form-custom .erreur-form { margin: 0; color: #e07a7a; }
.form-custom .boutons { display: flex; gap: 0.6rem; }
.siege-lobby .vignette.custom { object-fit: contain; }
.siege-lobby div.vignette.sans-image { display: grid; place-items: center; font-family: var(--serif); font-size: 1.3rem; text-align: center; padding: 0.5rem; }

/* Tapis ------------------------------------------------------------------ */

.tapis {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 19rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - 3rem);
  background: var(--tapis-fond-2);
}
.tapis h2 { font-size: 1.05rem; color: var(--papier-2); margin: 0 0 0.5rem; }

.barre-phase { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; padding: 0.35rem 1rem; background: var(--nuit); border-bottom: 1px solid var(--filet); }
.manche-phase { display: flex; align-items: center; gap: 0.7rem; }
.manche-phase #manche { color: var(--papier-2); font-size: 1rem; font-family: var(--sans); }
.barre-phase .tour { flex: 1; color: var(--papier-2); font-size: 0.95rem; }
.barre-phase .commandes { display: flex; align-items: center; gap: 0.6rem; }
.barre-phase .hote { display: flex; gap: 0.4rem; }
.barre-phase .bouton { font-size: 0.95rem; padding: 0.35rem 0.9rem; }
.bouton.danger { color: var(--wip); }

.gauche, .droite { overflow-y: auto; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 1rem; background: var(--nuit); }
.gauche { border-right: 1px solid var(--filet); }
.droite { border-left: 1px solid var(--filet); }
.gauche section, .droite section { padding-bottom: 0.9rem; border-bottom: 1px solid var(--filet); }
.gauche section:last-child, .droite section:last-child { border-bottom: 0; }

/* Cartes (zones fixes) */
.carte { position: relative; width: var(--carte-l); height: var(--carte-h); flex: none; border-radius: 4px; background: var(--tapis-fond-2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.carte img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.carte.paysage { width: var(--carte-h); height: var(--carte-l); }
/* Enquêteur personnalisé : image entière (jamais recadrée) ; sans image, le nom sur fond uni */
.carte.custom img { object-fit: contain; }
.carte .nom-custom { display: none; }
.carte.custom.sans-image img { visibility: hidden; }
.carte.custom.sans-image .nom-custom { display: grid; position: absolute; inset: 0; place-items: center; padding: 8px 10px; text-align: center; font-family: var(--serif); font-size: 1.05rem; line-height: 1.15; color: var(--papier); border-radius: 4px; background: radial-gradient(ellipse at center, #2b3f47, var(--tapis-fond-2)); border: 2px solid var(--dorure); box-sizing: border-box; overflow: hidden; }
.carte.epuisee { transform: rotate(90deg); }
/* Jetons posés là où la carte imprime la valeur correspondante : indices en bas à droite des lieux,
   doom en bas à gauche des agendas, dégâts/horreur en bas à droite des enquêteurs ; ailleurs en haut à gauche. */
/* Les jetons posés sur une carte (indices, doom, ressources, dégâts, horreur, uses, générique) sont des chips empilées en
   bas à droite, comme les jauges (voir « Compteurs de dégâts et d'horreur » plus bas) — uniformisé le 2026-09-10. */

/* Colonne gauche */
.histoire-cartes { display: grid; gap: 0.8rem; }
.histoire .bloc { display: grid; gap: 0.15rem; }
.histoire .bloc .carte.paysage { width: 100%; height: auto; aspect-ratio: 178 / 126; }
.histoire .bloc .carte:not(.paysage):not(.absente) { width: 8.5rem; height: auto; aspect-ratio: 126 / 178; justify-self: center; }
.histoire .bloc.scenario .carte { width: 4.5rem; height: auto; aspect-ratio: 126 / 178; }
.histoire .bloc.scenario { grid-template-columns: auto 1fr; align-items: end; column-gap: 0.6rem; }
.compte { margin: 0.2rem 0 0; font-size: 0.95rem; }
.compte strong { color: var(--dorure-2); font-weight: 500; }
.sous { margin: 0; color: var(--papier-2); font-size: 0.85rem; }

/* Outils de table posés sur la zone des lieux : pioche, défausse, sac du chaos — compacts, à gauche */
.table-outils { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.6rem; align-items: flex-end; padding: 0.45rem 0.55rem; background: rgba(30, 45, 51, 0.88); border: 1px solid var(--filet); border-radius: 4px; cursor: default; }
.pioches { display: flex; gap: 0.5rem; }
.pile { position: relative; }
.pile .badge { position: absolute; right: -6px; top: -6px; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: var(--nuit); background: var(--dorure-2); border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none; }
.dos-pile { width: var(--carte-l); height: var(--carte-h); border-radius: 4px; border: 1px dashed var(--zone-filet); display: grid; place-items: center; }
.dos-pile img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.dos-pile .carte { box-shadow: none; }

.chaos { position: relative; align-self: stretch; display: flex; align-items: flex-end; }
.sac { position: relative; display: flex; gap: 0.5rem; align-items: center; }
.sac-popover { display: none; position: absolute; left: 0; bottom: calc(100% + 0.5rem); width: 24rem; padding: 0.6rem 0.8rem; background: var(--nuit); border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); z-index: 5; }
.sac:hover .sac-popover, .sac-popover.epingle { display: block; }
/* La composition qui s'ouvre au survol ne capte pas le pointeur : une carte glissée par-dessus le sac (board joueur :
   le sac est sur la bande Commit) doit pouvoir être lâchée derrière elle (retour de test du 2026-09-09). */
.sac-popover:not(.epingle) { pointer-events: none; }
.sac-popover .compte { margin: 0 0 0.4rem; }
.sac-popover .composition { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: none; }
.sac-popover .sous { margin-top: 0.4rem; }
.tires .remettre { width: 1.5rem; height: 1.5rem; }
/* Le sac du chaos : deux gravures au même cadre (scripts/build_sac.py, 714 × 954) — fermé, ou ouvert (`.ouvert`) tant que
   des jetons révélés ne sont pas remis ; le nombre de jetons du sac en pastille. */
.sac-forme { position: relative; width: 4.2rem; aspect-ratio: 714 / 954; flex: none; padding: 0; background: none; }
.sac-forme .sac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.sac-forme .sac-img.ouvert, .sac-forme.ouvert .sac-img.ferme { visibility: hidden; }
.sac-forme.ouvert .sac-img.ouvert { visibility: visible; }
.sac-forme .compte-sac { position: absolute; right: -0.35rem; bottom: -0.15rem; min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--nuit); background: var(--dorure-2); border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.sac-info .compte { margin: 0; }
.composition { list-style: none; margin: 0; padding: 0.5rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; position: absolute; left: 0; bottom: 100%; width: 28rem; background: var(--nuit); border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.jeton-chaos { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.jeton-chaos .nombre { color: var(--papier-2); }
.jeton-chaos-img { display: block; border-radius: 50%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }

/* Zone des lieux */
.plateau-zone { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, var(--tapis-fond) 0%, var(--tapis-fond-2) 75%); cursor: grab; touch-action: none; }
.plateau-zone.glisse { cursor: grabbing; }
.plateau { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 0; height: 0; }
.plateau .carte { position: absolute; width: 126px; height: 178px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
.plateau .carte.paysage { width: 178px; height: 126px; }
.mini { position: absolute; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--faction, var(--prevu)); border: 3px solid var(--faction, var(--prevu)); outline: 2px solid var(--papier); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7); display: grid; place-items: center; }
.mini img { position: absolute; left: 0; top: 0; width: 250%; height: auto; margin: -23% 0 0 -9%; max-width: none; pointer-events: none; }
.mini span { position: relative; font-size: 0.85rem; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000; display: none; }
.mini.custom img { position: static; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.mini.cle { background: var(--nuit-2); border-color: var(--dorure); }
.mini.cle img { position: static; width: 34px; height: 34px; margin: 0; }
.mini.cle.couleur img { width: 38px; height: 38px; }
.mini.cle.cachee { border-style: dashed; border-color: var(--papier-2); }
/* Jeton d'inondation d'un lieu (TIC) : à deux faces, en haut à gauche, hors de la pile des pions. */
.carte .inondation { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); pointer-events: none; }
.plateau .carte .inondation { left: 6px; top: 6px; width: 34px; height: 34px; }
.menu-carte .inondation-ligne .pm.niveau { width: auto; padding: 0 0.45rem; font-size: 0.8rem; border-radius: 0.7rem; margin-left: 0.2rem; }
.menu-carte .inondation-ligne .pm.niveau.actif { background: var(--dorure); color: var(--nuit); }
.bloc.maree h3 { margin: 0.4rem 0 0.2rem; font-size: 1rem; }
/* Cartes de référence et pistes (The Vanishing of Elina Harper) dans la colonne Agenda et acte */
.bloc.reference { margin-top: 0.4rem; }
.bloc.pistes h3 { margin: 0.4rem 0 0.2rem; font-size: 1rem; }
.listes-pistes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.6rem; margin-bottom: 0.4rem; }
.listes-pistes > div { display: grid; gap: 0.1rem; }
.piste { font: inherit; font-size: 0.85rem; text-align: left; padding: 0.05rem 0.2rem; border: 0; background: none; color: var(--papier); cursor: pointer; border-radius: 3px; }
.piste:hover:not(:disabled) { background: var(--nuit-2); }
.piste.rayee { text-decoration: line-through; color: var(--papier-2); }
.piste.en-jeu::after { content: " ●"; color: var(--dorure-2); font-size: 0.7em; }
.piste:disabled { cursor: default; }
.colonnes-accusation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.colonne-accusation h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.choix-piste { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; cursor: pointer; }
.choix-piste.grise { color: var(--papier-2); }
/* Pistes révélées par le Parley : à côté de la pile Leads, toutes visibles avec « Prendre » */
.pistes-revelees { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem; border: 1px dashed var(--dorure); border-radius: 4px; }
.piste-revelee { display: grid; gap: 0.25rem; justify-items: center; }
.pile.secrete .dos-pile img { opacity: 0.85; }
/* Barrières (In Too Deep) : jeton ressource au milieu d'une arête, nombre, − / + au survol */
.plateau .chip.barriere { position: absolute; cursor: pointer; font-size: 1rem; padding: 2px 8px 2px 2px; background: rgba(20, 24, 32, 0.92); border: 1px solid var(--dorure); }
.plateau .chip.barriere img { width: 30px; height: 30px; }
.plateau .chip.barriere .chip-n { min-width: 1.2em; }
.bloc.maree .ligne-boutons { flex-wrap: wrap; gap: 0.3rem; }
.bloc.maree .bouton.actif { background: var(--dorure); color: var(--nuit); border-color: var(--dorure); }
.mini.sans-image img { display: none; }
.mini.sans-image span { display: block; }
.zoom { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.25rem; }
.zoom button { font: inherit; font-size: 0.9rem; min-width: 2rem; padding: 0.25rem 0.5rem; background: var(--nuit); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; cursor: pointer; }
.zoom button:hover { border-color: var(--dorure); }

/* Colonne droite */
.bande { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: var(--carte-h); align-items: flex-start; padding: 0.4rem; border: 1px dashed var(--zone-filet); border-radius: 4px; background: var(--zone); }
.bande .vide { font-size: 0.9rem; align-self: center; }
.journal { flex: 1; display: flex; flex-direction: column; min-height: 10rem; }
.journal ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 0.9rem; display: grid; gap: 0.35rem; align-content: start; }
.journal .entree { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.4rem; padding-left: 0.5rem; border-left: 2px solid var(--filet); }
.journal .entree time { color: var(--papier-2); font-size: 0.8rem; padding-top: 0.1rem; }
.journal .entree.reminder { border-left-color: var(--dorure); }
.journal .entree.phase { border-left-color: var(--ok); }
.journal .entree.system { border-left-color: var(--wip); }

/* Sièges */
.sieges { grid-column: 1 / -1; display: flex; gap: 0.75rem; padding: 0.6rem 0.9rem; overflow-x: auto; background: var(--nuit); border-top: 1px solid var(--filet); }
.siege { flex: 1 1 0; min-width: 22rem; display: grid; gap: 0.4rem; padding: 0.5rem 0.7rem; border: 1px solid var(--filet); border-left: 4px solid var(--faction, var(--papier-2)); border-radius: 3px; background: var(--nuit-2); }
.siege.moi { border-top-color: var(--dorure); border-right-color: var(--dorure); border-bottom-color: var(--dorure); }
.siege.actif { box-shadow: 0 0 0 2px var(--ok) inset; }
.siege header { display: flex; align-items: baseline; gap: 0.5rem; }
.siege header .sous { font-size: 0.85rem; }
.siege-corps { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; }
.siege .carte.kind-investigator { width: 156px; height: 110px; }
.siege .carte.kind-investigator.epuisee { transform: none; }
.compteurs { display: grid; gap: 0.25rem; margin: 0; font-size: 0.9rem; align-content: start; }
.compteur { display: grid; grid-template-columns: 5.2rem auto; column-gap: 0.4rem; align-items: center; }
.compteur dt { display: flex; align-items: center; gap: 0.35rem; color: var(--papier-2); }
.compteur dt img { width: 1.35rem; height: 1.35rem; }
.compteur dd { margin: 0; font-weight: 500; }
.compteur dd.detail { grid-column: 2; font-weight: 400; color: var(--wip); font-size: 0.8rem; }
.actions-pips { display: flex; gap: 0.3rem; align-items: center; margin-top: 0.2rem; }
.pip { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid var(--dorure); }
.pip.plein { background: var(--dorure); }
.actions-pips .plus { font-size: 0.8rem; color: var(--dorure-2); }
.menace { display: flex; gap: 0.4rem; min-height: var(--carte-h); padding: 0.3rem; border: 1px dashed var(--zone-filet); border-radius: 4px; background: var(--zone); overflow-x: auto; align-items: flex-start; }
.menace .vide { font-size: 0.85rem; align-self: center; padding: 0 0.4rem; }

/* Encarts et loupe */
.rappels { position: fixed; top: 3.6rem; left: 50%; transform: translateX(-50%); display: grid; gap: 0.5rem; width: min(38rem, 90vw); z-index: 50; pointer-events: none; }
.encart { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0.9rem; background: var(--papier); color: var(--nuit); border-left: 5px solid var(--dorure); border-radius: 2px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); pointer-events: auto; font-size: 0.98rem; }
.encart.erreur { border-left-color: var(--wip); }
.encart.info { border-left-color: var(--ok); }
.encart .fermer { margin-left: auto; font: inherit; font-size: 1.2rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--nuit); }
.loupe { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 40; pointer-events: none; width: 19rem; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75); }
.loupe.paysage { width: 27rem; }
.loupe img { display: block; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .carte { transition: transform 150ms ease; }
}

/* Étape 2 : commandes et interactions ---------------------------------- */

.phases { display: flex; gap: 0.15rem; }
.phases .phase { font: inherit; font-family: var(--serif); font-size: 1.1rem; padding: 0.15rem 0.6rem; background: none; color: var(--papier-2); border: 1px solid transparent; border-radius: 2px; cursor: pointer; }
.phases .phase:hover:not(:disabled) { color: var(--papier); border-color: var(--filet); }
.phases .phase.courante { color: var(--papier); border-color: var(--dorure); background: rgba(200, 162, 90, 0.12); }
.phases .phase:disabled { cursor: default; }

.bouton.petit { font-size: 0.85rem; padding: 0.2rem 0.6rem; }
.ligne-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.lien-outil { font: inherit; font-size: 0.85rem; color: var(--dorure-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.lien-outil:hover:not(:disabled) { color: var(--papier); }
.lien-outil:disabled { color: var(--papier-2); opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.compte.alerte strong { color: var(--wip); }

.pm { font: inherit; font-size: 0.9rem; line-height: 1; width: 1.35rem; height: 1.35rem; padding: 0; display: inline-grid; place-items: center; background: var(--nuit); color: var(--papier); border: 1px solid var(--filet); border-radius: 50%; cursor: pointer; }
.pm:hover:not(:disabled) { border-color: var(--dorure); color: var(--dorure-2); }
.pm:disabled { opacity: 0.35; cursor: not-allowed; }
.compteur dd { display: inline-flex; align-items: center; gap: 0.3rem; }
.compteur dd .valeur { min-width: 2.6rem; text-align: center; }
.compteur.actions dd.actions-pips { margin-top: 0; }
.siege .compteur.actions { grid-template-columns: auto auto; column-gap: 0.6rem; }
.siege header .espace { flex: 1; }
.siege.joue { opacity: 0.6; }
.siege.actif { opacity: 1; }

.dos-pile[data-drop] { cursor: pointer; padding: 0; font: inherit; color: inherit; background: none; }
.dos-pile[data-drop]:disabled { cursor: default; }
.tires { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.2rem; max-width: 14rem; }
.tires .jeton-chaos-img { animation: jeton-sort 250ms ease-out; }
@keyframes jeton-sort { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tires .jeton-chaos-img { animation: none; } }
.sac-forme { border: 0; font: inherit; cursor: pointer; }
.sac-forme:hover:not(:disabled) .sac-img { filter: brightness(1.15) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.sac-forme:disabled { cursor: default; }

/* Glisser-déposer */
.carte, .mini { touch-action: none; cursor: grab; }
.carte.en-deplacement, .mini.en-deplacement { opacity: 0.35; }
.fantome { position: fixed; z-index: 100; pointer-events: none; opacity: 0.9; transform: rotate(2deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7); }
.fantome .chips { display: none; }
.depot-ok { outline: 2px solid var(--dorure-2); outline-offset: -2px; }
#board.depot-ok { outline-offset: -4px; }
.menace.depot-ok, .bande.depot-ok { background: rgba(200, 162, 90, 0.12); }

/* Menu contextuel */
.menu-carte { position: fixed; z-index: 120; min-width: 14rem; padding: 0.3rem; background: var(--nuit); color: var(--papier); border: 1px solid var(--dorure); border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); display: grid; }
.menu-carte .titre-menu { margin: 0.2rem 0.6rem 0.3rem; font-family: var(--serif); font-size: 1.05rem; color: var(--dorure-2); border-bottom: 1px solid var(--filet); padding-bottom: 0.2rem; }
.menu-carte .item { font: inherit; font-size: 0.95rem; text-align: left; padding: 0.3rem 0.6rem; background: none; color: var(--papier); border: 0; border-radius: 2px; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
.menu-carte button.item:hover:not(:disabled) { background: var(--nuit-2); }
.menu-carte .item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-carte .item.danger { color: var(--wip); }
.menu-carte .jetons-ligne { cursor: default; }
.menu-carte .jetons-ligne > span:first-child { flex: 1; }
.menu-carte .jetons-ligne .valeur { min-width: 1.5rem; text-align: center; }

/* Dialogues (recherche, sac, indices) */
.dialogue { width: min(64rem, 92vw); max-height: 85vh; padding: 0; border: 1px solid var(--dorure); border-radius: 3px; background: var(--nuit); color: var(--papier); display: flex; flex-direction: column; }
.dialogue[open] { display: flex; }
.dialogue::backdrop { background: rgba(8, 14, 16, 0.7); }
.dialogue header { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--filet); }
.dialogue h2 { font-size: 1.3rem; flex: 1; margin: 0; color: var(--papier); }
.dialogue > :not(header) { overflow-y: auto; padding: 1rem 1.2rem; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.8rem; }
.carte-peek { margin: 0; display: grid; gap: 0.3rem; }
.carte-peek img { width: 100%; border-radius: 6px; }
.carte-peek figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; }
.ajust-sac, .depense { display: grid; gap: 0.4rem; }
/* Fenêtre de choix à l'avancée d'un acte (actChoice) : la question, puis un bouton par suite possible. */
.dialogue:has(.choix-acte) { width: min(34rem, 92vw); }
.choix-acte { display: grid; gap: 0.6rem; }
.choix-acte p { margin: 0 0 0.2rem; }
.choix-acte .bouton { white-space: normal; text-align: left; }
.ajust-ligne { display: flex; align-items: center; gap: 0.5rem; }
.ajust-ligne .libelle { flex: 1; }
.ajust-ligne .valeur { min-width: 1.6rem; text-align: center; }
.ajust-ligne input { font: inherit; width: 5rem; padding: 0.2rem 0.4rem; background: var(--nuit-2); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; }

/* Retours du 2026-09-03 ------------------------------------------------- */

.tapis, .barre { user-select: none; -webkit-user-select: none; }
.tapis input, .tapis textarea { user-select: text; -webkit-user-select: text; }
.tapis img { -webkit-user-drag: none; }

/* Zone « de côté » floutée tant qu'on n'y interagit pas (pas de lecture involontaire). */
#aside .bande { transition: filter 200ms ease; }
#aside .bande.floue .carte { filter: blur(6px) saturate(0.6); transition: filter 200ms ease; }
#aside .bande.floue::after { content: "click to view"; position: absolute; inset: auto 0.5rem 0.4rem auto; font-size: 0.75rem; color: var(--papier-2); font-style: italic; }
#aside .bande { position: relative; }

/* Pioche de rencontre : la première carte révélée reste sur la pile */
.dos-bouton { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.dos-bouton img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.dos-bouton:disabled { cursor: default; }
.dos-bouton.vide { display: grid; place-items: center; }
.dos-pile.revelee { border-color: var(--dorure-2); box-shadow: 0 0 0 2px rgba(224, 192, 122, 0.35); }
.dos-pile .carte { cursor: grab; }

/* Bouton d'action (flèche) à droite du nom, pendant son tour */
.bouton-action { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem 0.1rem 0.35rem; font: inherit; font-weight: 700; color: var(--nuit); background: var(--dorure-2); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.bouton-action .fleche { display: inline-grid; width: 1.35rem; height: 1.35rem; }
.bouton-action .fleche svg { width: 100%; height: 100%; }
.bouton-action:hover:not(:disabled) { background: var(--papier); }
.bouton-action:active:not(:disabled) { transform: translateY(1px); }
.bouton-action:disabled { background: var(--prevu); color: var(--nuit-2); cursor: not-allowed; box-shadow: none; }

/* Chips des cartes : jauges (dégâts des ennemis, dégâts / horreur des soutiens, uses) et jetons posés (indices, doom,
   ressources, générique), empilés en bas à droite et ancrés à droite — au survol la pastille s'allonge vers la gauche
   pour loger le « − » (ou le « + » d'une chip inverse), l'icône et le nombre ne bougent pas. */
.chips { position: absolute; right: 3px; bottom: 3px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.plateau .chips { right: 6px; bottom: 6px; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px; border-radius: 999px; background: rgba(20, 30, 34, 0.85); color: #fff; font-size: 0.75rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.chip img, .chip .chip-disque { width: 18px; height: 18px; border-radius: 50%; }
.chip .chip-disque { display: inline-block; background: var(--dorure); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.plateau .chip img, .plateau .chip .chip-disque { width: 26px; height: 26px; }
/* Agenda et acte de la colonne de gauche : chips à la taille des jauges d'un soutien (uses, 30 px) — retour de test du 2026-09-10. */
.histoire .carte.kind-agenda .chip, .histoire .carte.kind-act .chip { font-size: 1rem; gap: 3px; padding: 2px 7px 2px 2px; }
.histoire .carte.kind-agenda .chip img, .histoire .carte.kind-act .chip img, .histoire .carte.kind-agenda .chip .chip-disque, .histoire .carte.kind-act .chip .chip-disque { width: 30px; height: 30px; }
.plateau .chip { font-size: 0.95rem; }
.chip .chip-n { min-width: 0.9em; text-align: center; }
.chip-moins, .chip-plus { display: none; font: inherit; line-height: 1; width: 1.1em; height: 1.1em; padding: 0; border: 0; border-radius: 50%; background: var(--papier); color: var(--nuit); cursor: pointer; }
/* `.ouverte` = survol maintenu par le script (garderChipsDeployees, dom.js) : le bouton reste déployé d'un clic à l'autre. */
.chip:is(:hover, .ouverte) .chip-moins, .chip:is(:hover, .ouverte) .chip-plus { display: inline-grid; place-items: center; }
.carte.epuisee .chips { transform: rotate(-90deg); }

/* Chemins entre lieux (calque SVG sous les cartes du tapis) */
.plateau .chemins { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.plateau .chemins line { stroke-width: 9; stroke-linecap: round; opacity: 0.85; }
.plateau .chemins line.temp { stroke: var(--papier); stroke-dasharray: 14 10; opacity: 0.7; }
body.mode-lien #plateau .carte.kind-location { outline: 2px dashed var(--dorure-2); cursor: crosshair; }

/* Piles : tout le bloc (dos, compte, liens) accepte un dépôt */
.pile.depot-ok { outline: 2px solid var(--dorure-2); outline-offset: 4px; border-radius: 4px; }
.pile .dos-pile.depot-ok { outline: none; }
.chip .chip-n { font-variant-numeric: tabular-nums; }
/* Jauges d'un enquêteur (sièges du tapis, entête du board) : la même chip, hors carte */
.jauges-inv { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.siege .jauges-col { display: grid; gap: 0.4rem; align-content: start; }
/* Deux jauges par ligne (dégâts + horreur, ressources + indices, compteurs du scénario à la suite), les actions en dessous :
   la colonne tient dans la hauteur de la carte d'enquêteur (2026-09-10). La gouttière entre les colonnes et la marge
   à gauche de la colonne réservent la place du « − » qui se déploie au survol (voir .jauge-inv plus bas). */
.siege .jauges-col { margin-left: 0.7rem; }
.siege .jauges-inv { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.35rem 1.4rem; justify-items: start; }
.siege .jauges-inv .chip { font-size: 1rem; gap: 3px; padding: 2px 7px 2px 2px; }
.siege .jauges-inv .chip img { width: 26px; height: 26px; }
.siege .jauges-inv .chip .chip-n { min-width: 1.75em; }
/* Même geste que sur les cartes (retour de l'utilisateur du 2026-09-10) : au survol, la pastille s'allonge vers la gauche
   pour loger le « − » et l'icône comme le nombre ne bougent pas. Sur une carte, la chip est ancrée à droite ; ici elle est
   ancrée à gauche, donc la pastille avance d'autant vers la gauche (marge négative) qu'elle gagne de retrait intérieur,
   le bouton est posé en absolu dans ce retrait — la gouttière voisine doit mesurer au moins 1.1em + l'écart. */
.jauge-inv { position: relative; }
.jauge-inv .chip-moins { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); }
.siege .jauge-inv:not(.inactive):is(:hover, .ouverte) { margin-left: calc(-1.1em - 3px); padding-left: calc(1.1em + 5px); }
.chip.inactive { cursor: default; }
.chip.inactive:is(:hover, .ouverte) .chip-moins { display: none; }

/* Agenda / acte hors de l'histoire : emplacement vide qui explique où est la carte */
.carte.absente { display: grid; place-items: center; gap: 0.3rem; border: 1px dashed var(--zone-filet); background: var(--zone); box-shadow: none; color: var(--papier-2); font-size: 0.85rem; text-align: center; padding: 0.4rem; cursor: default; }
.histoire .bloc .carte.absente.paysage { width: 100%; height: auto; aspect-ratio: 178 / 126; }
.histoire.depot-ok { outline: 2px dashed var(--dorure-2); outline-offset: -4px; border-radius: 4px; }
.aide-depot { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--papier-2); font-style: italic; }

/* Questions de mise en place (lobby) et piles déclarées par le scénario */
.reglage.questions { margin-bottom: 1.5rem; }
.reglage.questions .question { display: grid; gap: 0.2rem; margin-top: 0.4rem; }
.reglage.questions .question > .libelle { margin: 0; font-weight: 500; }
.reglage.questions input.nombre { width: 4.5rem; margin-left: 0.4rem; padding: 0.2rem 0.4rem; font: inherit; color: var(--papier); background: var(--nuit-2, #182028); border: 1px solid var(--zone-filet); border-radius: 4px; }
.reglage.questions input.nombre:disabled { opacity: 0.6; }
.pile .etiquette-pile { position: absolute; left: 0; right: 0; bottom: -1.1rem; text-align: center; font-size: 0.7rem; color: var(--papier-2); white-space: nowrap; pointer-events: none; }
/* Étiquette cliquable sous une défausse (table et board) : rechercher dedans sans la mélanger */
.pile .etiquette-pile.cliquable { pointer-events: auto; font: inherit; font-size: 0.7rem; padding: 0.05rem 0; border: 0; background: none; color: var(--papier-2); text-decoration: underline dotted; text-underline-offset: 0.15em; cursor: pointer; }
.pile .etiquette-pile.cliquable:hover:not(:disabled) { color: var(--dorure-2); }
.pile .etiquette-pile.cliquable:disabled { text-decoration: none; cursor: default; }
.pioches { padding-bottom: 0.9rem; }

/* Outil « Générer une carte » */
.bouton.icone { padding: 0.25rem 0.45rem; display: inline-grid; place-items: center; }
.bouton.icone svg { width: 1.3rem; height: 1.3rem; }
.generateur { display: grid; gap: 0.8rem; }
.generateur .recherche.large { width: 100%; max-width: none; font-size: 1.05rem; padding: 0.5rem 0.8rem; background: var(--nuit-2); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; font: inherit; }
.generateur .carte-peek figcaption { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.generateur .carte-peek .meta { display: block; color: var(--papier-2); font-size: 0.78rem; }
.generateur .grille-cartes > .vide { grid-column: 1 / -1; }   /* consigne et messages sur toute la largeur, pas dans une case de 9 rem */
/* Proposition après un import sans l'option : petite fenêtre Oui / Non */
.proposition-anofelis { width: min(30rem, 92vw); }
.proposition-anofelis .proposition { display: grid; gap: 0.9rem; }
.proposition-anofelis .proposition p { margin: 0; }
.proposition-anofelis .boutons { display: flex; gap: 0.6rem; justify-content: flex-end; }
/* Fenêtre « Cartes Anofelis » : option pour le deck, puis une section par face avec ses illustrations (officielle, versions) */
.illustrations { gap: 1.1rem; }
.illustrations .entete-option, .illustrations .option-taboo { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.illustrations .entete-option input, .illustrations .option-taboo input { margin-top: 0.3rem; }
.illustrations .entete-option .meta, .illustrations .option-taboo .meta { display: block; color: var(--papier-2); font-size: 0.85rem; }
.face-anofelis { display: grid; gap: 0.35rem; }
.face-anofelis h3 { margin: 0; font-size: 1rem; color: var(--papier); }
.face-anofelis h3 .meta { color: var(--papier-2); font-size: 0.85rem; font-weight: normal; }
.face-anofelis .versions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.face-anofelis .version { width: 7.5rem; display: grid; gap: 0.2rem; padding: 0; border: 0; background: none; color: var(--papier-2); font: inherit; font-size: 0.8rem; text-align: center; cursor: pointer; }
.face-anofelis .version.paysage { width: 10.5rem; }
/* Le cadre suit la carte : debout (5:7), couché (7:5) pour un enquêteur. Dit ici en toutes lettres : `.version img` de la
   galerie (site.css, chargé aussi par la table) impose sinon son cadre debout et rogne les enquêteurs (2026-10-03). */
.face-anofelis .version img, .face-anofelis .version .cache { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.1s; }
.face-anofelis .version.paysage img, .face-anofelis .version.paysage .cache { aspect-ratio: 7 / 5; }
.face-anofelis .version:hover img, .face-anofelis .version:hover .cache { outline-color: var(--filet); }
.face-anofelis .version.actif img, .face-anofelis .version.actif .cache { outline-color: var(--dorure); }
.face-anofelis .version.actif { color: var(--dorure-2); }
/* Illustrations Taboo (18+) : cachées tant que la coche n'est pas mise (avertissement de la galerie) ; une illustration
   Taboo choisie mais cachée garde sa place, sans son image. */
.illustrations .option-taboo .sceau { width: 1.5rem; height: 1.5rem; font-size: 0.66rem; vertical-align: 0.12em; }
.face-anofelis .version.taboo .meta { color: #d98c80; }
.face-anofelis .version.taboo.actif .meta { color: var(--dorure-2); }
.face-anofelis .version .cache { display: grid; place-items: center; background: var(--nuit-2); border: 1px dashed var(--filet); }
/* Carte personnalisée (image en lien) sous la recherche */
.carte-perso { border-top: 1px solid var(--filet); padding-top: 0.8rem; }
.carte-perso h3 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--papier-2); }
.carte-perso-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.carte-perso-champs { display: grid; gap: 0.5rem; }
.carte-perso .champ-nom { width: 100%; max-width: none; font: inherit; padding: 0.4rem 0.7rem; background: var(--nuit-2); color: var(--papier); border: 1px solid var(--filet); border-radius: 2px; }
.carte-perso select.champ-nom { width: auto; }
.carte-perso .ligne-boutons { margin-top: 0; }
.carte-perso input.nombre { width: 5rem; padding: 0.35rem 0.5rem; font: inherit; color: var(--papier); background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 2px; }
.carte-perso .aide { margin: 0; font-size: 0.85rem; color: var(--papier-2); }
.carte-perso .erreur { color: var(--wip); font-style: normal; }
.carte-perso .apercu { width: 9rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }

/* Plein écran (F11) : la barre du haut s'efface pour gagner de la place (retour de test du 2026-09-09).
   Media query display-mode (Chrome, Firefox) doublée d'une classe posée par le script quand la fenêtre remplit l'écran. */
@media (display-mode: fullscreen) {
  .barre { display: none; }
  .tapis, .lobby, .board-joueur, .attente-joueur { height: 100vh; }
}
html.plein-ecran .barre { display: none; }
html.plein-ecran .tapis, html.plein-ecran .lobby, html.plein-ecran .board-joueur, html.plein-ecran .attente-joueur { height: 100vh; }

/* Jetons du chaos scellés sur une carte (COB III) */
.carte .scelles { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; pointer-events: none; }
.carte .scelles img { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }