/* La parure de l ecran : les lois du royaume. Le socle commun (cadre,
   banniere, jeton, fanion) vit dans parure-socle.css.

   🔴 Pourquoi elle existe. Mot du proprietaire le 16/09/2026, capture a
   l appui : « faut pas que chaque page ressemble a un Wikipedia rempli de
   texte a choix ». L ecran rendait dix lois, chacune en un titre, une phrase
   et deux lignes de texte suivies d un bouton rouge identique. Dix boutons
   rouges alignes ne sont pas une decision, ils sont une liste.

   Ce que la composition pose : une loi est une balance a deux plateaux. Les
   options se font face, celle qui gouverne porte un sceau de cire, l autre
   porte son prix en influence sur un jeton. Le debat en cours devient une
   barre a deux camps au lieu d une phrase de compte. */


.lois__liste {
  display: grid;
  gap: var(--e-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

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


/* ── L en-tete : la balance et le nom de la loi ──────────────────────────── */

.loi__banniere {
  margin: var(--e-2) var(--e-3) var(--e-1);
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
}

.loi__sous {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin: 0 var(--e-3) var(--e-2);
  text-align: center;
}

.loi__marque {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  opacity: 0.65;
}

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


/* ── Les plateaux ────────────────────────────────────────────────────────
   Deux options qui se font face. Le trait central est le fleau de la balance :
   il ne sert a rien d autre qu a dire que l une exclut l autre. */

.loi__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--or-fonce) 28%, transparent);
}

.loi-option {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3) var(--e-3);
  background: color-mix(in srgb, var(--pierre-0) 40%, transparent);
}

.loi-option__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  color: var(--parchemin);
}

.loi-option__effet {
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--texte-pale);
}

/* Celle qui gouverne : fond de cire, filet d or, et le sceau appose. */
.loi-option.est-en-vigueur {
  background:
    radial-gradient(80% 140% at 20% 0%, color-mix(in srgb, var(--or) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--pierre-4) 75%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent);
}

.loi-option.est-en-vigueur .loi-option__nom { color: var(--or-vif); }

.loi-option__sceau {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  justify-self: start;
  padding: var(--e-0) var(--e-2) var(--e-0) var(--e-1);
  border: 1px solid var(--cire-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire) 50%, transparent), color-mix(in srgb, var(--cire-fonce) 60%, transparent));
}

.loi-option__sceau-marque { width: 1.15rem; height: 1.15rem; }

.loi-option__vigueur {
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-vif);
}

/* Le prix d une proposition tient sur un jeton, comme une mise en lice : le
   meme geste, la meme forme, une seule grammaire pour tout le jeu. */
.jeton--influence {
  justify-self: start;
  width: 2.5rem;
  height: 2.5rem;
  background:
    radial-gradient(60% 60% at 35% 30%, color-mix(in srgb, var(--fer) 40%, transparent), transparent 70%),
    linear-gradient(160deg, var(--ombre-magie), var(--verredragon));
  border-color: var(--ombre-magie);
  color: var(--fer);
}

/* Le geste et son prix : le mot, puis le jeton d'influence (6/10/2026). */
.bouton-a-jeton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  justify-self: start;
  align-self: flex-start;
}
.bouton-a-jeton .jeton--influence {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  font-size: var(--t-2);
}

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


/* ── Le debat en cours : deux camps, une barre ───────────────────────────── */

.debat {
  padding: var(--e-2) var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--or-fonce) 40%, transparent);
}

.debat__barre {
  display: flex;
  height: 0.55rem;
  border: 1px solid var(--or-fonce);
  background: color-mix(in srgb, var(--pierre-0) 55%, transparent);
  overflow: hidden;
}

.debat__pour {
  display: block;
  background: linear-gradient(180deg, var(--gain), var(--gain-fond));
}

.debat__contre {
  display: block;
  flex: 1;
  background: linear-gradient(180deg, var(--cire), var(--cire-fonce));
}

.debat__compte {
  margin: var(--e-1) 0 0;
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
}

.debat__compte.est-gagnant { color: var(--gain); }
.debat__compte.est-perdant { color: var(--perte); }

.debat__delai {
  margin: var(--e-0) 0 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}


/* ── Les voix des maisons ────────────────────────────────────────────────── */

.loi__maisons {
  list-style: none;
  margin: 0;
  padding: 0 var(--e-3) var(--e-3);
  display: grid;
  gap: 1px;
}

.voix {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  background: color-mix(in srgb, var(--pierre-0) 35%, transparent);
  border-left: 3px solid transparent;
  font-size: var(--t-2);
}

.voix.est-pour { border-left-color: var(--gain); }
.voix.est-contre { border-left-color: var(--cire-vif); }

.voix__maison {
  flex: 1;
  min-width: 0;
  font-family: var(--police-titre);
  color: var(--parchemin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voix__poids,
.voix__payee {
  flex: none;
  font-size: var(--t-1);
  color: var(--texte-pale);
  font-variant-numeric: tabular-nums;
}

.voix__payee { color: var(--or); }


@media (max-width: 36rem) {
  .loi-option { padding: var(--e-2) var(--e-2) var(--e-2); }
  .jeton--influence { width: 2.2rem; height: 2.2rem; }
}


/* ── Le Trone de Fer ────────────────────────────────────────────────────────
   🔴 Mot du proprietaire le 16/09/2026 : « faut illustrer les pages aussi je
   veux pas un ramassis de ligne en mode Wikipedia surtout pour le throne faut
   une superbe illus du VRAI throne de fer ».

   🔴 Et l image vient de la SERIE, pas d une generation. Deuxieme mot du meme
   jour : « Je veux que des illus tire de Game of Thrones pas d inventions et
   pas d images avec du brut ». Elle est prise par
   `outils/references-des-cites.mjs`, qui cherche des images d au moins 700
   pixels de large : le trone d epees dans la salle du Donjon Rouge, sous la
   lumiere du vitrail, en 1 920 sur 1 080, sans logo, sans personnage.

   🔴 Elle est un BANDEAU et pas un fond de page. En fond, `background-size`
   n en montrait que le ciel : une page qui defile etire l image sur toute sa
   hauteur, et le trone tombait hors du champ visible. Une illustration se
   regarde, donc elle a sa place et sa hauteur. */
#trone.page { background-color: var(--pierre-0); }

/* Le titre et la phrase du dessus se lisent sur l image, donc ils portent leur
   propre ombre au lieu de compter sur le voile. */
#trone .dialogue__titre,
#trone .dialogue__note,
#trone .trone__sang {
  text-shadow: var(--ombre-texte);
}

/* La tenue du trône (lot 7) : une phrase longue, avec son chiffre expliqué. Elle se lit comme une note sous le
   bandeau du sang royal, pas en bandeau : le bandeau centre ses morceaux et coupait la phrase autour du chiffre. */
#trone .trone__tenue {
  margin: var(--e-2) 0 var(--e-1);
  padding: var(--e-2) var(--e-4);
  font-family: var(--police-corps);
  line-height: 1.5;
  color: var(--parchemin);
  background: color-mix(in srgb, var(--pierre-1) 62%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--or) 60%, transparent);
  text-shadow: var(--ombre-texte);
}

/* Les demandes du roi dans le même registre que le trône. */
.cour-royale { margin: 1.2rem 0; padding: 1rem; }
.cour-royale__titre { margin: 0 0 .7rem; color: var(--or, #dac589); }
.cour-royale__affaire { padding: .9rem 0; border-top: 1px solid #7e6542; }
.cour-royale__nom { margin: 0 0 .4rem; color: #e1c98e; }
.cour-royale__etat { margin: .4rem 0 .7rem; }
.cour-royale__choix { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; align-items: center; gap: .5rem .9rem; margin: .6rem 0; }
.cour-royale__choix .charge__bouton { min-height: 44px; width: 100%; }
.cour-royale__effets { margin: 0; font-size: .95rem; }
.cour-royale__refus { grid-column: 1 / -1; color: #f0a177; margin: 0; }
.cour-royale__fait { color: #b7ce96; }
@media (max-width: 600px) { .cour-royale { padding: .7rem; } .cour-royale__choix { grid-template-columns: 1fr; } }