/* La parure de l ecran : la lice. Cette feuille n habille que les affiches de
   tournoi. Le socle commun (cadre, banniere, jauge, fanion) vit dans
   parure-socle.css, et rien n est redefini ici de ce qu il porte deja.

   🔴 Pourquoi elle existe. Les trois blocs partis dans l ecran de la parole
   (la lice, la persuasion, les prisonniers) n avaient aucune parure : treize
   lignes dans guerre.css contre onze mille huit cent soixante-dix pour les
   douze autres ecrans. Une affiche rendait donc un titre, quatre phrases et
   douze boutons de texte, quatre fois de suite. Mot du proprietaire le
   16/09/2026 : « faut pas que chaque page ressemble a un Wikipedia rempli de
   texte a choix ».

   Ce que la composition pose, de haut en bas : une affiche placardee par
   tournoi, son ecu et sa place en tete, le prix d armes en grand a cote d une
   bourse, puis trois pastilles d epreuve qui portent chacune sa jauge de
   chance et ses crans de risque. Les mises ne sortent qu une fois l epreuve
   choisie : avec les quatre mises de chaque epreuve toujours visibles, une
   affiche portait douze boutons et l oeil ne trouvait plus la decision. */


/* ── Le bandeau de la lice ───────────────────────────────────────────────
   Une vue de tilt au crepuscule, tiree pour cet ecran. Elle coiffe la liste
   et donne au bloc un lieu au lieu d un titre nu. Le degrade du bas la fond
   dans la page pour qu aucune arete ne coupe l ecran. */

.lice__titre {
  position: relative;
  display: block;
  margin: 0 0 var(--e-3);
  padding: 4.6rem var(--e-4) var(--e-3);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 25%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 82%, transparent) 62%, var(--pierre-0) 100%),
    url(/jeu/images/lice/bandeau.webp?v=638) center 38% / cover no-repeat;
  border-bottom: 1px solid var(--or-fonce);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}

@media (max-width: 36rem) {
  .lice__titre {
    padding-top: 3.2rem;
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 25%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 82%, transparent) 62%, var(--pierre-0) 100%),
      url(/jeu/images/lice/bandeau-petit.webp?v=638);
  }
}


/* ── Les affiches, deux par rangee quand la place le permet ──────────────── */

/* 🔴 Le maximum de 30rem est la depuis le 16/09/2026, quand les tournois ont
   quitte « La parole » pour leur propre page. Dans une section partagee ils
   avaient huit cents pixels ; en pleine page, `1fr` etirait une affiche seule
   sur toute la largeur et sa jauge de chance devenait un rail vide de mille
   pixels pour un trait d or de trois cents. Une affiche garde donc sa largeur
   de carte, et la grille centre ce qu elle ne remplit pas. */
.lice__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 30rem));
  justify-content: center;
  gap: var(--e-4);
  align-items: start;
}

.affiche {
  padding: 0;
  overflow: hidden;
}


/* ── L en-tete : l ecu, la place, le sablier ─────────────────────────────── */

.affiche__entete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  text-align: left;
}

.affiche__fanion {
  width: 2rem;
  height: 2.4rem;
  font-size: var(--t-4);
}

.affiche__ou {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* « Carré de Torrhen » ne tient pas sur une ligne dans une colonne de vingt
   rem, et un nom de place coupé par des points de suspension ne se reconnaît
   plus. Il passe donc à la ligne. */
.affiche__place {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--or-vif);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.affiche__maison {
  font-size: var(--t-2);
  color: var(--texte-pale);
  font-style: italic;
}

/* Le sablier dit le temps qui reste sans ecrire une phrase : la phrase est en
   infobulle et en `aria-label`, le cadran ne porte que le compte. */
.affiche__sablier {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  flex: none;
  padding: var(--e-0) var(--e-2);
  border: 1px solid var(--or-fonce);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  color: var(--parchemin);
}

.affiche__sablier-marque {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.85;
}


/* ── Le prix d armes ─────────────────────────────────────────────────────
   C est le chiffre qui decide si l on court : il est le plus gros de
   l affiche, et il reste cliquable pour sa decomposition. */

.affiche__prix {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--or-fonce) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--or-fonce) 40%, transparent);
  background:
    radial-gradient(70% 160% at 12% 50%, color-mix(in srgb, var(--or) 13%, transparent), transparent 70%),
    color-mix(in srgb, var(--pierre-0) 25%, transparent);
}

.affiche__prix-marque {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  opacity: 0.9;
}

.affiche__prix-somme {
  font-family: var(--police-titre);
  font-size: var(--t-7);
  line-height: 1;
  color: var(--or-vif);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--ombre-texte);
}

.affiche__prix-somme .chiffre { color: inherit; font-size: inherit; }

.affiche__prix-dit {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.affiche__prix-nom {
  font-size: var(--t-2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--or);
}

.affiche__prix-second {
  font-size: var(--t-1);
  color: var(--texte-pale);
}


/* ── Les trois pastilles d epreuve ───────────────────────────────────────── */

.affiche__epreuves {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--or-fonce) 28%, transparent);
}

.epreuve-pastille {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 0;
  background: color-mix(in srgb, var(--pierre-0) 40%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.epreuve-pastille:hover,
.epreuve-pastille:focus-visible {
  background: color-mix(in srgb, var(--or) 10%, transparent);
}

.epreuve-pastille[aria-pressed="true"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--or) 20%, transparent), color-mix(in srgb, var(--or) 5%, transparent) 60%, transparent),
    color-mix(in srgb, var(--pierre-0) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--or);
}

.epreuve-pastille__marque {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  opacity: 0.8;
}

/* La vue de l epreuve : assez grande pour qu on reconnaisse une joute d une
   melee, cadrée d un filet d or, et un peu assombrie pour que le texte de la
   pastille reste le premier lu. */
.epreuve-pastille__vue {
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--or-fonce);
  filter: saturate(0.85) brightness(0.72);
  transition: filter 140ms ease;
}

.epreuve-pastille:hover .epreuve-pastille__vue,
.epreuve-pastille:focus-visible .epreuve-pastille__vue,
.epreuve-pastille[aria-pressed="true"] .epreuve-pastille__vue {
  filter: saturate(1) brightness(0.95);
  border-color: var(--or);
}

.epreuve-pastille[aria-pressed="true"] .epreuve-pastille__marque { opacity: 1; }

.epreuve-pastille__mot {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e-0) var(--e-2);
}

.epreuve-pastille__nom {
  grid-column: 1 / -1;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--parchemin);
}

/* La jauge du socle, ramenee a la hauteur d une ligne : sur une pastille elle
   sert de lecture au premier coup d oeil, pas de graphique. */
.affiche__jauge { gap: var(--e-2); }
.affiche__jauge .jauge-parure__rail { height: 0.42rem; }
.affiche__jauge .jauge-parure__valeur {
  font-size: var(--t-2);
  min-width: 3.1rem;
  text-align: right;
}

.epreuve-pastille__face {
  grid-column: 1 / -1;
  font-size: var(--t-1);
  color: var(--texte-pale);
  font-variant-numeric: tabular-nums;
}


/* ── Les crans de risque ─────────────────────────────────────────────────
   Cinq crans, un par huit pour cent de chute. La phrase entiere reste en
   infobulle : ici on ne lit pas, on compte. */

.affiche__risque {
  display: inline-flex;
  flex: none;
  gap: var(--e-0);
  align-self: center;
}

.affiche__cran {
  width: 0.3rem;
  height: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--or-fonce) 50%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 50%, transparent);
}

.affiche__cran.est-plein {
  background: linear-gradient(180deg, var(--cire-vif), var(--cire));
  border-color: var(--cire-vif);
}


/* ── Les jetons de mise ──────────────────────────────────────────────────
   Des pieces, pas des boutons de formulaire. Elles n apparaissent qu une fois
   l epreuve choisie. */

.affiche__mises-place:empty { display: none; }

.affiche__mises {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3) var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--or-fonce) 40%, transparent);
  background: color-mix(in srgb, var(--or) 5%, transparent);
}

.affiche__mises-dit {
  flex: 1 0 100%;
  font-size: var(--t-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--or);
}

.jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon-rond);
  background:
    radial-gradient(60% 60% at 35% 30%, color-mix(in srgb, var(--or-vif) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--or-fonce), var(--bois-sombre));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pierre-0) 55%, transparent), var(--ombre-2);
  color: var(--or-vif);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease;
}

.jeton:hover:not([disabled]),
.jeton:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pierre-0) 55%, transparent), var(--ombre-2);
}

.jeton[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}


/* ── Sur telephone ──────────────────────────────────────────────────────── */

@media (max-width: 36rem) {
  .epreuve-pastille__vue { width: 2.9rem; height: 2.9rem; }
  .affiche__prix-somme { font-size: var(--t-6); }
  .epreuve-pastille { padding: var(--e-2) var(--e-2); }
  .affiche__jauge .jauge-parure__valeur { min-width: 2.8rem; }
  .jeton { width: 2.4rem; height: 2.4rem; font-size: var(--t-3); }
}