/* css/style.css
   La palette est celle du projet Poker, pas celle de Winamax : on reprend la
   DISPOSITION d'une table (sieges, jeton du donneur, barre d'action en bas),
   jamais la charte de quelqu'un d'autre.

   Les couleurs de geste vont du passif a l'agressif. Elles ne portent jamais
   l'information toute seule : la legende ecrit le mot, et le libelle verbatim
   s'affiche au toucher. */

:root {
  color-scheme: dark;

  --fond: #14161a;
  --panneau: #1e2126;
  --bord: #2c3038;
  --texte: #e8e9eb;
  --texte-att: #9aa0aa;
  --accent: #4a9eff;
  --vert: #2e8b57;
  --erreur: #d9534f;

  /* Les neuf gestes, du plus passif au plus agressif. */
  --g-fold: #3a3f47;
  --g-check: #4d5a63;
  --g-call: #2e8b57;
  --g-limp: #2f6f8f;
  --g-minraise: #4a9eff;
  --g-trois-x: #7a6bd6;
  --g-iso: #c08a2e;
  --g-trois-bet: #d9663d;
  --g-tapis: #d9534f;
  --g-indecis: #5b4d78;

  --feutre: #1b3a2b;
}

* { box-sizing: border-box; }

/* L'ATTRIBUT `hidden` NE SE DEFEND PAS TOUT SEUL.
   Il ne vaut qu'un `display: none` de la feuille de style du navigateur, donc
   la moindre regle a nous qui pose un `display` le bat. Constate le
   01/09/2026 : la barre d'action (`display: flex`) restait a l'ecran apres la
   reponse, on pouvait donc repondre deux fois a la meme question. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.05rem; margin: 0; letter-spacing: .04em; }
h2 { font-size: .95rem; margin: 1.1rem 0 .3rem; }

/* --------------------------------------------------------------- bandeau */

.bandeau {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: max(.6rem, env(safe-area-inset-top)) .9rem .6rem;
  background: var(--panneau);
  border-bottom: 1px solid var(--bord);
}

.onglets { display: flex; gap: .4rem; }

.onglet {
  min-height: 40px; padding: .35rem .9rem;
  background: transparent; color: var(--texte-att);
  border: 1px solid var(--bord); border-radius: 8px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.onglet.actif { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }

.ecran { padding: .9rem; max-width: 720px; margin: 0 auto; }

.panneau {
  background: var(--panneau); border: 1px solid var(--bord);
  border-radius: 10px; padding: .8rem .9rem; margin: .9rem 0;
}

.aide { color: var(--texte-att); font-size: .82rem; margin: .3rem 0; }
.petit { font-size: .76rem; }

.champ { display: block; font-size: .78rem; color: var(--texte-att); margin-bottom: .25rem; }

select, .bouton, .action, textarea {
  font-family: inherit; font-size: .9rem;
}

select {
  width: 100%; min-height: 44px; padding: .5rem .6rem;
  background: #101215; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
}

.bouton {
  min-height: 44px; padding: .5rem 1rem;
  background: var(--panneau); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
  font-weight: 600; cursor: pointer;
}
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #0a0a0a; width: 100%; }
.bouton.discret { color: var(--texte-att); }
.rangee { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* ------------------------------------------------------ ecran 1, la grille */

/* LA GRILLE TIENT DANS LA LARGEUR, ET C'EST UN ARBITRAGE ASSUME.
   Le cahier des charges disait « 44 px minimum de cote, quitte a ce que la
   grille defile ». A l'usage c'etait le mauvais choix : 13 cases de 44 px
   font 572 px, donc sur un telephone de 375 px la moitie droite sortait de
   l'ecran, et cette moitie-la porte les mains ASSORTIES, celles qu'on
   regarde en premier. Une grille de ranges se lit d'un coup d'oeil ou ne se
   lit pas.
   La case tombe donc a environ 25 px sur un telephone. C'est sous les 44 px
   recommandes pour une cible tactile, et la contrepartie est reelle ; elle
   est rattrapee par le fait que toucher a cote se VOIT tout de suite, le
   panneau du dessous ecrivant le nom de la main touchee. Sur un ecran large,
   la case retrouve ses 44 px. */
.grille-boite { margin: .6rem 0; }

.grille {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 600px;   /* 13 x 44 px plus les gouttieres : au-dela, inutile */
}

.grille .case {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  font-size: clamp(8px, 2.1vw, 11px);
  font-family: ui-monospace, Menlo, monospace;
  border-radius: 4px; color: #f2f4f7; cursor: pointer;
  user-select: none;
}
.grille .case:focus-visible { outline: 2px solid var(--texte); outline-offset: 1px; }
/* Le « stack off » de la charte de cash : meme vert, cadre fonce. */
.grille .case-bordure { box-shadow: inset 0 0 0 2px #0b3d0b; }
.legende-item .pastille.pastille-bordure { box-shadow: inset 0 0 0 2px #0b3d0b; }

.legende { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .8rem; margin: .5rem 0; }
.legende-item { display: inline-flex; align-items: center; gap: .35rem; }
.pastille { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

.detail { min-height: 4.5rem; }
.detail-main { font-size: 1.3rem; font-weight: 700; margin: 0; font-family: ui-monospace, Menlo, monospace; }
.detail-libelle { font-size: 1rem; margin: .2rem 0 0; color: var(--accent); }

/* LES TEINTES DES CASES VIENNENT DU GUIDE, PAS D'ICI.
   Elles sont posees en style sur chaque case et chaque pastille depuis
   `js/data/ranges.js`, qui les tient de `donnees/couleurs_killtilt.json`,
   lui-meme lu dans la legende de chaque page du PDF. Une palette ecrite ici
   serait une seconde verite a tenir en phase avec la source. */

/* -------------------------------------------------------- ecran 2, le drill */

.enonce {
  font-size: .95rem; font-weight: 600; margin: .7rem 0 .2rem;
  color: var(--texte);
}
/* Ce que la reference precise, ou refuse de preciser, sur l'action adverse. */
.precision { margin: 0 0 .7rem; font-style: italic; }

.zone-jeu { touch-action: pan-y; }

/* La table 6-max du cash : six sieges au lieu de deux ou trois. Elle est plus
   haute, pour que les sieges des flancs ne se chevauchent pas. */
.feutre-6max { height: 210px; border-radius: 110px / 72px; }
.place6-bas          { left: 50%; transform: translateX(-50%); bottom: -14px; }
.place6-bas-gauche   { left: 2px; bottom: 14px; }
.place6-haut-gauche  { left: 2px; top: 14px; }
.place6-haut         { left: 50%; transform: translateX(-50%); top: -14px; }
.place6-haut-droite  { right: 2px; top: 14px; }
.place6-bas-droite   { right: 2px; bottom: 14px; }

/* Ce que la charte ne dit pas, ecrit sous la table plutot que devine. */
.reserve-cash { margin: .45rem 0 0; font-style: italic; }

/* Le feutre : la disposition d'une table, en aplats. Aucune image. */
.table-zone { margin-bottom: .8rem; }

.feutre {
  position: relative;
  height: 152px;
  border-radius: 95px / 52px;
  background: radial-gradient(ellipse at 50% 45%, #24503c 0%, var(--feutre) 70%);
  border: 2px solid #2e8b5744;
}

.siege {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: .3rem .5rem;
  background: var(--panneau); border: 1px solid var(--bord);
  border-radius: 8px; font-size: .74rem; line-height: 1.25;
}
.siege-nom { font-weight: 700; letter-spacing: .06em; }
.siege-info { color: var(--texte-att); }
.siege-heros { border-color: var(--accent); }
.siege-heros .siege-info { color: var(--accent); font-weight: 700; }
.siege-couche { opacity: .45; }

.place-bas { left: 50%; transform: translateX(-50%); bottom: -14px; }
.place-haut { left: 50%; transform: translateX(-50%); top: -14px; }
.place-haut-gauche { left: 4px; top: 6px; }
.place-haut-droite { right: 4px; top: 6px; }

.jeton-bouton {
  position: absolute; right: -10px; top: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #f0f2f5; color: #14161a;
  font-size: .65rem; font-weight: 800; line-height: 20px; text-align: center;
}

.cartes { display: flex; justify-content: center; gap: .6rem; margin: 1.4rem 0 1rem; }

.carte {
  width: 70px; height: 100px; border-radius: 8px;
  background: #f2f4f7; color: #14161a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px #0006;
  user-select: none;
}
.carte-rouge { color: #c0392b; }
.carte-rang { font-size: 2rem; font-weight: 800; line-height: 1; }
.carte-symbole { font-size: 1.7rem; line-height: 1.1; }

.question {
  font-size: .82rem; color: var(--texte-att); margin: 0 0 .4rem;
  text-transform: uppercase; letter-spacing: .08em;
}

/* La barre d'action, en bas, comme a la table.
   LES QUATRE BOUTONS NE DEPENDENT QUE DU CONTEXTE : voir `barreDe` dans
   grilles.js. Leurs couleurs sont donc fixes, elles ne disent rien de la
   grille tiree. Le second temps, lui, prend les teintes du guide. */
.barre-action { display: flex; gap: .4rem; }
.barre-action.barre-large { flex-wrap: wrap; }
.barre-action.barre-large .action { flex: 1 1 46%; }

.barre-fold    { background: #3a3f47; color: var(--texte); }
.barre-check   { background: #4d5a63; }
.barre-suivre  { background: #2f6f8f; }
.barre-relance { background: #4a9eff; color: #0a0a0a; }
.barre-tapis   { background: #d9534f; }

/* Un bouton teinte par le guide porte un libelle verbatim, parfois long. */
.action-teintee .action-mot { font-size: .8rem; line-height: 1.2; }
.action-teintee { color: #14161a; text-shadow: 0 1px 0 #ffffff55; }

.action {
  flex: 1; min-height: 56px; padding: .4rem .3rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: none; border-radius: 8px; color: #f2f4f7;
  font-weight: 700; cursor: pointer;
}
.action-mot { font-size: .88rem; }
.action-fleche { font-size: .8rem; opacity: .75; }

.verdict { margin: .9rem 0; padding: .8rem .9rem; border-radius: 10px; border: 1px solid var(--bord); background: var(--panneau); }
.verdict.juste { border-color: var(--vert); }
.verdict.faux { border-color: var(--erreur); }
.verdict.indecis { border-color: var(--g-indecis); }
.verdict-titre { margin: 0; font-size: 1.05rem; font-weight: 800; }
.verdict.juste .verdict-titre { color: var(--vert); }
.verdict.faux .verdict-titre { color: var(--erreur); }
.verdict-attendu { margin: .3rem 0 0; font-size: .88rem; }
.verdict-plan { margin: .5rem 0 0; padding-left: .6rem; font-size: 1rem; color: var(--accent); font-weight: 600; }
/* Ce qu'il a fait en vrai sur cette main, apres la reponse et jamais avant. */
.verdict-partie { margin: .5rem 0 0; font-size: .8rem; color: var(--texte-att); }
.verdict-partie.partie-ratee { color: #e6a23c; }

/* ---------------------------------------------------------------- bilan */

.bilan-ligne {
  display: grid; grid-template-columns: 8.6rem 1fr 2.6rem 2.6rem;
  align-items: center; gap: .5rem; font-size: .82rem; margin: .35rem 0;
}
.bilan-entete { color: var(--texte-att); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.bilan-entete span { text-align: right; }
.bilan-ligne strong { text-align: right; }
.bilan-plan { color: var(--texte-att); font-weight: 600; }
.bilan-barre { height: 8px; background: var(--bord); border-radius: 4px; overflow: hidden; }
.bilan-barre i { display: block; height: 100%; background: var(--vert); }

.rapport {
  width: 100%; margin-top: .6rem; padding: .5rem;
  background: #101215; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: .75rem;
}

/* ============================================================ le drill de cotes

   Les memes briques que le drill de ranges, avec trois ajouts : des cartes
   plus petites (un tableau de river en fait sept a l'ecran, contre deux),
   un bloc de verdict qui S'EMPILE au lieu de se remplacer, et deux teintes de
   carte qui disent leur role.

   LES DEUX TEINTES NE PORTENT JAMAIS L'INFORMATION SEULES : chaque groupe de
   cartes est precede de sa phrase en toutes lettres, exactement comme la
   legende de la grille ecrit le mot du geste a cote de sa couleur. */

.cartes-serrees { gap: .3rem; margin: .5rem 0 .9rem; flex-wrap: wrap; }
.cartes-serrees .carte { width: 44px; height: 62px; border-radius: 6px; }
.cartes-serrees .carte-rang { font-size: 1.25rem; }
.cartes-serrees .carte-symbole { font-size: 1.05rem; }

.carte-board { box-shadow: 0 2px 6px #0008, 0 0 0 2px var(--feutre); }
.carte-out { box-shadow: 0 2px 6px #0008, 0 0 0 2px var(--vert); }
/* Une carte qu'on aurait comptee a tort : elle s'efface, elle ne se barre pas.
   Un trait rouge en travers se lit comme « interdit » ; ici elle n'est pas
   interdite, elle ne compte simplement pas. */
.carte-morte { opacity: .42; box-shadow: none; }

.verdict-etape { padding: .1rem 0 .7rem; border-bottom: 1px solid var(--bord); }
.verdict-etape:last-child { border-bottom: 0; padding-bottom: 0; }
.verdict-etape.juste .verdict-titre { color: var(--vert); }
.verdict-etape.faux .verdict-titre { color: var(--erreur); }
.verdict-fin .verdict-titre { color: var(--texte-att); }

/* Une question qu'on ne pose pas. NI VERT NI ROUGE, et c'est le point : on
   n'a rien demande, donc il n'y a eu ni reussite ni faute. Le tiret du titre
   remplace le ✓ ou le ✗ pour la meme raison. */
.verdict-saut .verdict-titre { color: var(--texte-att); }
.verdict-saut { border-left: 3px solid var(--bord); padding-left: .7rem; }

/* Le calcul lui-meme, en chasse fixe : c'est une ligne qu'on relit chiffre
   par chiffre, pas une phrase. */
.verdict-calcul {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem; margin: .12rem 0; color: var(--texte);
  overflow-x: auto; white-space: pre;
}
.verdict-ecart { margin: .2rem 0 .4rem; }
.verdict-ecart .cartes-serrees { margin: .2rem 0 .1rem; }

.bilan-cote { margin: .15rem 0; font-size: .92rem; }

/* ------------------------------------------------------- la saisie chiffree

   LE CHAMP REMPLACE LES SEAUX A CLIQUER, et c'est la reforme du 02/09/2026 :
   « on ne me demande pas une reponse, on me propose des choix, donc je ne
   fais pas vraiment le calcul ». Un seau se reconnait, un nombre se calcule.

   IL EST LARGE ET GRAND (2 rem, 56 px de haut), a la taille du pouce et pas
   a celle du texte : c'est le seul endroit de l'appli ou l'on tape, et un
   champ etroit sur un telephone se manque une fois sur trois. */

.barre-saisie { align-items: center; gap: .45rem; }

.saisie {
  flex: 1; min-width: 0; min-height: 56px;
  padding: .3rem .7rem;
  background: #101215; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; text-align: center;
}
.saisie:focus { outline: none; border-color: var(--accent); }
/* Une saisie illisible ne se note pas : le champ le DIT au lieu de compter
   une faute. Un doigt qui derape n'est pas une erreur de calcul. */
.saisie-refusee { border-color: var(--erreur); }
.saisie-unite {
  color: var(--texte-att); font-size: 1rem; font-weight: 700;
  min-width: 3.2rem;
}
/* La teinte de `.bouton.principal` SANS son `width: 100%`, qui dans une
   rangee flex reduirait le champ de saisie a un trait. */
.saisie-valider {
  flex: 0 0 auto; width: auto;
  min-height: 56px; padding: .5rem 1rem;
  background: var(--accent); border-color: var(--accent); color: #0a0a0a;
  font-weight: 700;
}

/* ---------------------------------------------------------------- le chrono

   Demande de Loic, 02/09/2026 : « un chrono de 5 secondes pour me mettre la
   pression ». Il MONTRE le temps, il ne juge pas : depasser le budget ne rend
   pas la reponse fausse, ca la sort d'une colonne separee du bilan. La barre
   passe donc a l'orange et pas au rouge d'erreur, qui est reserve aux fautes.

   `aria-hidden` est pose cote JS : repeint dix fois par seconde, ce compteur
   serait relu en boucle par un lecteur d'ecran. */

.chrono { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.chrono-barre {
  flex: 1; height: 6px; background: var(--bord);
  border-radius: 3px; overflow: hidden;
}
.chrono-barre i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .1s linear;
}
.chrono-dit {
  min-width: 3rem; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; color: var(--texte-att);
}
.chrono-depasse .chrono-barre i { background: #e6a23c; }
.chrono-depasse .chrono-dit { color: #e6a23c; }

/* Le temps pris, au bout du titre de chaque temps. Il est TOUJOURS la, pas
   seulement quand il deborde : savoir qu'on a mis 8,4 s sur un budget de 10
   apprend de combien on est large, la ou « trop tard » ne dit rien. */
.verdict-titre-chrono {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem;
}
.verdict-temps {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; font-weight: 600; color: var(--texte-att);
}
/* L'ORANGE ET PAS LE ROUGE. Le rouge est la couleur des fautes, et depasser
   le budget n'en est pas une : rien n'a ete coupe, la reponse compte, c'est
   la vitesse qui est en retard. */
.verdict-temps-long { color: #e6a23c; }

.verdict-total {
  margin: .1rem 0 .5rem; font-size: .82rem; font-weight: 600;
  color: var(--texte-att);
}
.verdict-total.verdict-temps-long { color: #e6a23c; }

/* Un telephone en mouvement, un pouce, une horloge : la transition de la
   barre est la seule animation de l'appli, et elle se coupe pour qui la
   refuse. Le nombre de secondes, lui, reste. */
@media (prefers-reduced-motion: reduce) {
  .chrono-barre i { transition: none; }
}

/* ============================================================ LE TAPIS
   Une table dessinee aux codes d'une salle en ligne, sans aucune marque :
   feutre sombre, pods de siege, jeton du donneur, mises devant les sieges.
   Demande de Loic du 06/09/2026 : voir les JETONS et les CARTES plutot que
   lire l'action en une phrase. Tout est en CSS, aucune image. */

.tapis { margin: .2rem 0 1rem; }

.feutre2 {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  max-height: 46vh;
  border-radius: 50% / 50%;
  background:
    radial-gradient(ellipse at 50% 42%, #2b6047 0%, var(--feutre) 62%, #12261c 100%);
  box-shadow: inset 0 0 0 6px #0d1c15, inset 0 0 0 9px #6b4a25,
              0 6px 18px rgba(0, 0, 0, .45);
}

/* Les pods : ancres par leur CENTRE sur l'ellipse, sinon un siege du flanc
   droit deborde de la table alors que celui de gauche ne la touche pas. */
.pod {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 4.6rem;
  padding: .32rem .45rem;
  border-radius: .55rem;
  background: rgba(10, 16, 13, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
  line-height: 1.15;
}
.pod-nom { display: block; font-weight: 800; letter-spacing: .05em; font-size: .82rem; }
.pod-tapis { display: block; font-size: .72rem; color: var(--texte-att); }
.pod-heros { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.pod-heros .pod-nom { color: var(--accent); }
.pod-couche { opacity: .38; }

/* La mise : des jetons, et le montant SEULEMENT quand la source le donne. */
.mise {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .34rem .12rem .2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
}
.mise-jetons { position: relative; display: inline-block; width: 1.5rem; height: .95rem; }
.jeton {
  position: absolute;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .75);
}
.jeton-0 { left: 0;    top: .1rem;  background: #c8442f; }
.jeton-1 { left: .26rem; top: .05rem; background: #2f6f8f; }
.jeton-2 { left: .52rem; top: 0;     background: #d8b13a; }
.mise-montant { font-size: .74rem; font-weight: 700; color: #ffe9b8; white-space: nowrap; }
/* Une mise dont on ignore la taille le DIT, elle ne s'invente pas un chiffre. */
.mise-inconnue .mise-montant { color: var(--texte-att); font-style: italic; }
.mise-tapis .mise-montant { color: #ff9d8a; text-transform: uppercase; letter-spacing: .04em; }

.donneur {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: #f4f1e8;
  color: #16241c;
  font-weight: 900;
  font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Les cartes du heros, sous la table, a la taille ou on les lit d'un coup. */
.main-heros { display: flex; justify-content: center; gap: .5rem; margin-top: -1.1rem; }

.carte2 {
  position: relative;
  width: 3.4rem; height: 4.8rem;
  border-radius: .4rem;
  background: linear-gradient(#fff, #eceae2);
  color: #16181c;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  overflow: hidden;
  animation: carte-arrive .22s ease-out both;
}
.carte2:nth-child(2) { animation-delay: .09s; }
@keyframes carte-arrive {
  from { transform: translateY(-18px) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .carte2 { animation: none; }
}
.carte2-rouge { color: #c0392b; }
.carte2-coin {
  position: absolute; top: .12rem; left: .28rem;
  font-size: 1.05rem; font-weight: 800; line-height: 1;
}
.carte2-pip {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
}

/* Plusieurs sieges « toi » : la charte de cash groupe des positions. Le lisere
   devient pointille pour dire « l'un de ces deux-la », au lieu de laisser
   croire qu'on est assis a deux endroits. */
.pod-heros-ambigu { border-style: dashed; }
.pod-heros-ambigu .pod-tapis { font-style: italic; }

/* Les deux chiffres d'une case coupee, dans les coins de leur triangle, comme
   le Range Manager les imprime. Ils sont petits par construction : ils ne
   doivent pas concurrencer le nom de la main, seulement dire la repartition
   d'un coup d'oeil. Le texte complet vit dans le title et l'aria-label. */
.case-coupee { position: relative; }
.case-part {
  position: absolute;
  font-size: .52em;
  font-weight: 800;
  line-height: 1;
  opacity: .85;
  pointer-events: none;
}
.case-part-hg { top: .1em; left: .18em; }
.case-part-bd { bottom: .1em; right: .18em; }