/* Les généraux (29/09/2026, interface/composants/generaux.jsx).

   Même habit que le HUD et les talents (cadre.css, talents.css) : plaques de
   pierre sombre à filet d'or, fer pour les gestes. Depuis le 30/09/2026, les
   cartes de la salle sont des cartes de héros : l'illustration peinte est la
   carte entière (cadre, nom, titre, blason, étoiles), montrée au format 2 sur
   3 sans rognage ; trois, quatre ou cinq étoiles donnent la lueur (bronze,
   argent, or). Révélation au recrutement, consumation au renvoi, anneau à la
   montée de niveau : transformations et opacité seulement, coupées sous
   prefers-reduced-motion. Les boutons reprennent le préfixe du cadre commun :
   sans lui, la règle des boutons passe devant. */

.generaux {
  display: grid;
  gap: var(--e-4, 16px);
  min-width: 0;
  color: var(--texte, #e8dcc4);
  font-family: var(--police-corps);
}
.generaux__cadre {
  display: grid;
  gap: var(--e-3, 12px);
  padding: var(--e-3, 12px) var(--e-4, 16px) var(--e-4, 16px);
  border: 1px solid #0b0a09;
  border-radius: 3px;
  background: var(--habit-panneau, linear-gradient(180deg, #1f1b17, #110f0c));
  box-shadow: var(--habit-panneau-filets, inset 0 0 0 1px rgb(184 150 79 / .6));
}
.generaux__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2, 8px); }
.generaux__titre, .generaux__sous-titre {
  margin: 0;
  padding: 0 0 6px;
  background: linear-gradient(90deg, var(--hud-or-filet, #b8964f), rgb(184 150 79 / .35) 45%, transparent 85%) left bottom / 100% 1px no-repeat;
  font-family: var(--police-titre);
  font-size: var(--t-4, 1.25rem);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: .08em;
  color: var(--hud-or-clair, #f0d9a0);
  text-shadow: 0 1px 1px #000;
}
.generaux__sous-titre { font-size: var(--t-3, 1.05rem); }
.generaux__repere { font-family: var(--police-titre); color: var(--or-vif, #e8c36a); font-variant-numeric: tabular-nums; }
.generaux__dit, .generaux__avertir, .generaux__alerte { margin: 0; font-size: var(--t-2, .88rem); line-height: 1.4; color: var(--texte-pale, #b9ab8f); }
.generaux__avertir { padding-left: 10px; border-left: 2px solid #8a2a20; color: #e3c9a8; }
.generaux__alerte { color: #f0b08a; }
.generaux__chronologie { font-style: italic; }

/* ── Les places ─────────────────────────────────────────────────────────── */
.generaux-places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.generaux-place {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 7.2rem;
  padding: 8px 10px;
  border: 1px solid #070605;
  border-radius: 4px;
  background: var(--hud-grain, none), radial-gradient(100% 100% at 50% 30%, #2a241d, #120f0c);
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 2px 8px rgb(0 0 0 / .7);
}
.generaux-place.est-prise { box-shadow: inset 0 0 0 1px #d8b46a, inset 0 0 0 3px #0d0b09, 0 0 12px rgb(240 190 90 / .15); }
.generaux-place.est-scellee {
  background: var(--hud-grain, none), repeating-linear-gradient(135deg, rgb(0 0 0 / .25) 0 6px, transparent 6px 12px), radial-gradient(100% 100% at 50% 30%, #231a17, #0e0a09);
  box-shadow: inset 0 0 0 1px rgb(170 50 40 / .55), inset 0 2px 8px rgb(0 0 0 / .7);
}
.generaux-place__numero { font-family: var(--police-titre); font-variant: small-caps; letter-spacing: .06em; color: var(--or-vif, #e8c36a); font-size: .9rem; }
.generaux-place__vide { display: flex; align-items: center; gap: 8px; color: var(--texte-pale, #b9ab8f); font-family: var(--police-titre); }
.generaux-place__sceau { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .6)); }
.generaux-place__condition { font-size: .8rem; line-height: 1.3; color: #d9b8a0; }
html:not(#cadre#cadre#cadre) button.generaux-place__general {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 2px;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  text-transform: none;
  color: inherit;
}
.generaux-place__blason { grid-row: 1 / 3; width: 34px; height: 40px; object-fit: contain; }
.generaux-place__nom { font-family: var(--police-titre); color: var(--hud-or-clair, #f0d9a0); line-height: 1.15; }
.generaux-place__etat { font-size: .8rem; color: var(--texte-pale, #b9ab8f); }

/* ── Les cartes ─────────────────────────────────────────────────────────── */
/* L'illustration est la carte entière (cadre, nom, titre, blason, étoiles
   peints dedans) : l'écran la montre sans rognage ni second cadre. Il n'y
   pose que le niveau en médaillon sur le coin, un reflet au survol, une lueur
   à la couleur des étoiles, et sous la carte le nom et l'état. */
.generaux, .general-fiche-fond, .revelation, .consumation {
  --e2: #8f959c;
  --e3: #b58450;
  --e4: #c4d0de;
  --e5: #f2c75c;
}
.generaux__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--e-4, 16px) var(--e-3, 12px);
}
.carte-general {
  --lueur: var(--e3);
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  perspective: 900px;
}
.carte-general--e2 { --lueur: var(--e2); }
.carte-general--e4 { --lueur: var(--e4); }
.carte-general--e5 { --lueur: var(--e5); }
html:not(#cadre#cadre#cadre) button.carte-general__ouvrir {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: none;
  text-align: left;
  text-transform: none;
  color: inherit;
  cursor: pointer;
}
html:not(#cadre#cadre#cadre) button.carte-general__ouvrir:focus-visible { outline: 2px solid var(--hud-or-clair, #f0d9a0); outline-offset: 3px; }
.carte-general__carte {
  position: relative;
  display: block;
  border-radius: 10px;
  transform: rotateX(var(--incline-x, 0deg)) rotateY(var(--incline-y, 0deg));
  transition: transform .22s ease-out, filter .2s ease;
  box-shadow: 0 8px 18px rgb(0 0 0 / .65);
}
/* La lueur de rareté : une ombre posée une fois, dont seule l'opacité pulse. */
.carte-general__carte::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  box-shadow: 0 0 16px 3px var(--lueur), inset 0 0 0 1px var(--lueur);
  opacity: .22;
  pointer-events: none;
}
.carte-general--e4 .carte-general__carte::before { animation: lueur-de-rarete 3.4s ease-in-out infinite; }
.carte-general--e5 .carte-general__carte::before { animation: lueur-de-rarete 2.6s ease-in-out infinite; opacity: .4; }
@keyframes lueur-de-rarete { 50% { opacity: .75; } }
.carte-general__illus {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: 10px;
  background: #0a0908;
  overflow: hidden;
}
.carte-general__illus img, .carte-general__illus svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Le reflet qui balaie la carte au survol. */
.carte-general__reflet {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(105deg, transparent 30%, rgb(255 246 220 / .32) 47%, rgb(255 246 220 / .08) 53%, transparent 64%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .carte-general:hover .carte-general__reflet { opacity: 1; animation: balayage-du-reflet .85s ease-out both; }
  .carte-general:hover .carte-general__carte { filter: brightness(1.06); }
}
@keyframes balayage-du-reflet { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.carte-general__niveau {
  position: absolute;
  top: -7px;
  left: -7px;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #8d9399, #26282c 70%);
  box-shadow: 0 0 0 2px var(--lueur), 0 0 0 3px #0d0b09, 0 3px 6px rgb(0 0 0 / .7);
  font-family: var(--police-titre);
  font-size: 1rem;
  color: var(--hud-or-clair, #f0d9a0);
  text-shadow: 0 1px 2px #000;
  z-index: 2;
}
.carte-general__legende { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 2px 0; min-width: 0; }
.carte-general__nom { min-width: 0; font-family: var(--police-titre); font-size: .95rem; line-height: 1.15; color: var(--hud-or-clair, #f0d9a0); text-shadow: 0 1px 1px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etoiles-general { display: inline-flex; flex: none; gap: 1px; }
.etoile-general { width: .8rem; height: .8rem; fill: #3a3128; stroke: #120e0a; stroke-width: 1; }
.etoile-general.est-allumee { fill: var(--lueur, var(--e5)); }
.carte-general__etat {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 2px;
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--texte-pale, #b9ab8f);
}
.carte-general__pastille { display: inline-block; width: .55rem; height: .55rem; margin-right: 5px; border-radius: 50%; vertical-align: .05rem; background: currentColor; box-shadow: 0 0 5px currentColor; }
.carte-general__etat.est-disponible { color: #b9d69a; }
.carte-general__etat.est-verrouille { color: #e3c28a; }
.carte-general__etat.est-indisponible { color: #d99a8a; }
.carte-general__etat.est-service { color: #cfe0a8; }
.carte-general.est-choisie .carte-general__carte { box-shadow: 0 0 0 2px var(--hud-or-clair, #f0d9a0), 0 0 18px rgb(240 217 160 / .4); }

/*
 * Verrouillée : désaturée et un peu assombrie, l'illustration reste lisible.
 * Un petit cadenas au coin et une chaîne fine au bord bas quand une condition
 * manque ; un sceau de cire au coin quand le monde retient le général.
 */
.carte-general:is(.est-verrouille, .est-tenu) .carte-general__illus { filter: grayscale(.7) brightness(.78); }
.carte-general:is(.est-captif, .est-mort, .est-renvoye) .carte-general__illus { filter: grayscale(.9) brightness(.62); }
.carte-general__verrou, .carte-general__cadenas, .carte-general__chute { position: absolute; pointer-events: none; }
.carte-general__verrou.est-chaines { left: 0; right: 0; bottom: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .8)); }
.carte-general__cadenas { top: 5%; right: 6%; width: 15%; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)); }
.carte-general__verrou.est-sceau { top: 4%; right: 5%; width: 20%; transform: rotate(-8deg); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .8)); }

/* La condition se remplit : les chaînes croisées lâchent, le cadenas s'ouvre et tombe. */
.carte-general__chute { inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .8)); }
.chute__chaine { transform-box: view-box; transform-origin: 50% 0; animation: chaine-lachee 1.6s cubic-bezier(.45, 0, .8, .4) forwards; }
.chute__chaine.est-miroir { animation-name: chaine-lachee-miroir; }
.chute__cadenas { animation: cadenas-tombe 1.6s cubic-bezier(.45, 0, .8, .4) forwards; }
.chute__cadenas .cadenas__anse { transform-box: fill-box; transform-origin: 100% 100%; }
@keyframes chaine-lachee {
  0%, 22% { transform: none; opacity: 1; }
  100% { transform: translate(-18px, 190px) rotate(-14deg); opacity: 0; }
}
@keyframes chaine-lachee-miroir {
  0%, 22% { transform: none; opacity: 1; }
  100% { transform: translate(18px, 190px) rotate(14deg); opacity: 0; }
}
@keyframes cadenas-tombe {
  0%, 18% { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(1.25) rotate(-10deg); opacity: 1; }
  100% { transform: translateY(210px) rotate(28deg); opacity: 0; }
}
.carte-general.est-deverrouille .carte-general__illus { animation: illus-rendue 1.6s ease-out; }
@keyframes illus-rendue { from { filter: grayscale(.7) brightness(.78); } to { filter: none; } }
.carte-general:is(.est-verrouille, .est-tenu, .est-captif, .est-mort, .est-renvoye) .carte-general__carte::before { animation: none; opacity: .12; }

/* Montée de niveau : la carte bondit, un anneau s'ouvre, le niveau s'inscrit. */
.carte-general.est-montee .carte-general__carte { animation: montee-de-niveau 1.1s ease-out; }
.carte-general.est-montee .carte-general__carte::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--e5), 0 0 26px 6px rgb(242 199 92 / .7);
  animation: anneau-de-niveau 1.4s ease-out forwards;
  pointer-events: none;
}
.carte-general__montee {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  padding: 4px 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f1d58c, #b98a2e 60%, #6d4c14);
  box-shadow: 0 0 0 1px #2a1d08, 0 4px 10px rgb(0 0 0 / .6);
  font-family: var(--police-titre);
  font-size: 1rem;
  text-align: center;
  color: #1b1208;
  animation: bandeau-de-niveau 2.2s ease-out forwards;
}
@keyframes montee-de-niveau { 30% { transform: translateY(-8px) scale(1.04); } }
@keyframes anneau-de-niveau { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.08); } }
@keyframes bandeau-de-niveau { 0% { opacity: 0; transform: translateY(10px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Nouveau talent : un éclat d'or traverse la carte. */
.carte-general.est-talent .carte-general__reflet { opacity: 1; background-image: linear-gradient(105deg, transparent 25%, rgb(255 214 120 / .7) 47%, rgb(255 240 200 / .3) 53%, transparent 70%); animation: balayage-du-reflet .9s ease-out 2 both; }

/* La carte dessinée tant que l'illustration manque. */
.carte-repli { --repli-clair: #9a8a6c; --repli-milieu: #4b4236; --repli-sombre: #17130f; --repli-fond-clair: #3a2e22; --repli-filet: #b58450; --repli-etoile: #b58450; }
.carte-repli--e2 { --repli-clair: #b3b8bd; --repli-milieu: #54595e; --repli-sombre: #16181a; --repli-fond-clair: #2a2d31; --repli-filet: #8f959c; --repli-etoile: #a9aeb3; }
.carte-repli--e4 { --repli-clair: #d6dde6; --repli-milieu: #6d7680; --repli-sombre: #1a1d21; --repli-fond-clair: #2c3440; --repli-filet: #c4d0de; --repli-etoile: #d8e2ee; }
.carte-repli--e5 { --repli-clair: #f7e3a2; --repli-milieu: #9c7428; --repli-sombre: #2a1c08; --repli-fond-clair: #4a321a; --repli-filet: #f2c75c; --repli-etoile: #f2c75c; }
.carte-repli__nom { font-family: var(--police-titre); font-size: 15px; fill: #f0d9a0; }
.carte-repli__titre { font-family: var(--police-corps); font-size: 10.5px; fill: #cdbb95; font-style: italic; }

.generaux .visuellement-cache, .revelation .visuellement-cache, .consumation .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── La révélation ──────────────────────────────────────────────────────── */
/* Le recrutement est enregistré avant qu'elle commence : elle le met en
   scène. Dos qui tremble (0 à 0,7 s), éclat (0,7 s), retournement (0,8 à
   1,3 s), étoiles une à une (1,4 s puis 0,18 s chacune), braises à cinq
   étoiles. Transformations et opacité seulement. */
.revelation {
  --lueur: var(--e3);
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(70% 60% at 50% 42%, rgb(40 30 20 / .88), rgb(4 3 2 / .96));
  cursor: pointer;
  outline: none;
  animation: fondu-d-entree .25s ease-out both;
}
.revelation--e2 { --lueur: var(--e2); }
.revelation--e4 { --lueur: var(--e4); }
.revelation--e5 { --lueur: var(--e5); }
.revelation__scene { position: relative; display: grid; place-items: center; perspective: 1200px; }
.revelation__carte {
  position: relative;
  width: min(62vw, 40dvh, 22rem);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  animation: tremble-le-dos .7s ease-in-out both, retourne-la-carte .55s cubic-bezier(.3, .7, .3, 1.15) .8s both;
}
.revelation__dos, .revelation__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgb(0 0 0 / .8); }
.revelation__dos svg { width: 100%; height: 100%; display: block; }
.revelation__face { transform: rotateY(180deg); box-shadow: 0 0 0 2px var(--lueur), 0 0 40px 6px var(--lueur), 0 16px 40px rgb(0 0 0 / .8); }
.revelation__face .carte-general__illus { height: 100%; }
.revelation__eclat {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90vmin;
  height: 90vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lueur) 0, transparent 60%);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  pointer-events: none;
  animation: eclat-de-rarete 1.1s ease-out .7s both;
}
.revelation__nom { margin: 0; font-family: var(--police-titre); font-size: clamp(1.3rem, 5vw, 2rem); color: var(--hud-or-clair, #f0d9a0); text-shadow: 0 2px 6px #000; animation: fondu-d-entree .4s ease-out 1.3s both; }
.revelation__etoiles { display: inline-flex; gap: 6px; }
.revelation__etoiles .etoile-general { width: clamp(1.4rem, 6vw, 2rem); height: clamp(1.4rem, 6vw, 2rem); fill: var(--lueur); stroke: #2a1d08; animation: etoile-s-allume .35s ease-out calc(1.4s + var(--i) * .18s) both; }
.revelation--e5 .revelation__etoiles .etoile-general { filter: drop-shadow(0 0 6px var(--e5)); }
.revelation__braises { position: absolute; inset: 0; pointer-events: none; }
.revelation__braises i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d0, var(--e5) 60%, transparent);
  opacity: 0;
  animation: braise 1.6s ease-out calc(1.25s + var(--i) * .04s) both;
  --angle: calc(var(--i) * 25.7deg);
}
html:not(#cadre#cadre#cadre) button.revelation__passer { min-height: 40px; }
@keyframes fondu-d-entree { from { opacity: 0; } }
@keyframes tremble-le-dos {
  0%, 100% { transform: rotateZ(0); }
  15% { transform: rotateZ(-2.5deg) translateX(-3px); }
  30% { transform: rotateZ(2.5deg) translateX(3px); }
  45% { transform: rotateZ(-2deg) translateX(-2px); }
  60% { transform: rotateZ(2deg) translateX(2px); }
  80% { transform: rotateZ(-1deg); }
}
@keyframes retourne-la-carte { from { transform: rotateY(0) scale(1); } 60% { transform: rotateY(190deg) scale(1.06); } to { transform: rotateY(180deg) scale(1); } }
@keyframes eclat-de-rarete { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 25% { opacity: .95; } 100% { opacity: .28; transform: translate(-50%, -50%) scale(1); } }
@keyframes etoile-s-allume { from { opacity: 0; transform: scale(2.2) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes braise {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-38vmin) scale(1.2); }
}

/* ── Le renvoi joué : la carte se consume du bas vers le haut ───────────── */
.consumation { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; background: rgb(4 3 2 / .82); cursor: pointer; animation: fondu-d-entree .2s ease-out both; }
.consumation__carte {
  position: relative;
  width: min(56vw, 38dvh, 19rem);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, transparent 0 var(--brule, 0%), #000 calc(var(--brule, 0%) + 12%));
  mask-image: linear-gradient(0deg, transparent 0 var(--brule, 0%), #000 calc(var(--brule, 0%) + 12%));
  animation: se-consume 1.7s ease-in forwards;
}
.consumation__carte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(255 120 30 / .9), rgb(255 190 80 / .3) 18%, transparent 30%); mix-blend-mode: screen; animation: braises-du-renvoi 1.7s ease-in forwards; }
.consumation__carte .carte-general__illus { height: 100%; }
@property --brule { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes se-consume { from { --brule: -12%; filter: none; } to { --brule: 100%; filter: sepia(.6) brightness(.8); } }
@keyframes braises-du-renvoi { from { transform: translateY(100%); } to { transform: translateY(-10%); } }

@media (prefers-reduced-motion: reduce) {
  .chute__chaine, .chute__cadenas, .carte-general.est-deverrouille .carte-general__illus { animation-duration: .01s; }
  .carte-general__carte { transition: none; transform: none; }
  .carte-general__carte::before, .carte-general.est-montee .carte-general__carte, .carte-general.est-montee .carte-general__carte::after { animation: none !important; }
  .carte-general:hover .carte-general__reflet { animation: none; opacity: .5; }
  .revelation__carte { animation: none; transform: rotateY(180deg); }
  .revelation__eclat { animation: none; opacity: .25; transform: translate(-50%, -50%) scale(1); }
  .revelation__braises { display: none; }
  .revelation__etoiles .etoile-general, .revelation__nom { animation: fondu-d-entree .3s ease-out both; }
  .consumation__carte { animation: none; opacity: .4; }
  .consumation__carte::after { display: none; }
}

/* ── Les gestes ─────────────────────────────────────────────────────────── */
.generaux__filtres { display: flex; flex-wrap: wrap; gap: 6px; }
html:not(#cadre#cadre#cadre) button.general-geste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid #0d0b09;
  border-radius: 3px;
  background: var(--hud-fer, linear-gradient(180deg, #62676d, #1b1d20));
  box-shadow: var(--hud-relief, inset 0 1px 0 rgb(255 232 180 / .22)), 0 0 0 1px rgb(184 150 79 / .55), 0 2px 5px rgb(0 0 0 / .5);
  font-family: var(--police-titre);
  font-size: .98rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--hud-or-clair, #f0d9a0);
  text-shadow: 0 1px 1px #000;
  cursor: pointer;
}
html:not(#cadre#cadre#cadre) button.general-geste small { font-family: var(--police-corps); font-size: .78rem; color: #d9ccb0; }
html:not(#cadre#cadre#cadre) button.general-geste--or:not(:disabled) {
  background: linear-gradient(180deg, #f1d58c, #b98a2e 55%, #6d4c14);
  color: #1b1208;
  text-shadow: 0 1px 0 rgb(255 240 200 / .6);
}
html:not(#cadre#cadre#cadre) button.general-geste--sang:not(:disabled) {
  background: linear-gradient(180deg, #b0412f, #6e1d14 55%, #3a0d09);
  color: #f6e2c8;
}
html:not(#cadre#cadre#cadre) button.general-geste[aria-pressed="true"] {
  background: linear-gradient(180deg, #3d352a, #251f18 55%, #161310);
  box-shadow: inset 0 0 0 1px #d8b46a, 0 0 10px rgb(240 190 90 / .25);
}
html:not(#cadre#cadre#cadre) button.general-geste:not(:disabled):is(:hover, :focus-visible) {
  filter: brightness(1.15);
  box-shadow: var(--hud-relief, none), 0 0 0 1px #f0d9a0, 0 0 10px rgb(240 217 160 / .45);
}
html:not(#cadre#cadre#cadre) button.general-geste:not(:disabled):active { transform: translateY(1px); filter: brightness(.92); }
html:not(#cadre#cadre#cadre) button.general-geste:disabled { opacity: .5; cursor: not-allowed; }

/* ── La fiche ───────────────────────────────────────────────────────────── */
.general-fiche-fond {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(6 5 4 / .8);
  overflow: auto;
  animation: fondu-d-entree .18s ease-out both;
}
.general-fiche {
  --liseré: var(--e3);
  --lueur: var(--e3);
  width: min(100%, 72rem);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: var(--e-3, 12px);
  padding: var(--e-3, 12px) var(--e-4, 16px);
  border-radius: 4px;
  background: var(--habit-coins, none), var(--hud-grain, none), linear-gradient(180deg, #1c1814, #0d0b09);
  box-shadow: inset 0 0 0 1px var(--liseré), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(184 150 79 / .22), 0 6px 16px rgb(0 0 0 / .6);
  outline: none;
}
.general-fiche.carte-general--e2 { --liseré: var(--e2); --lueur: var(--e2); }
.general-fiche.carte-general--e4 { --liseré: var(--e4); --lueur: var(--e4); }
.general-fiche.carte-general--e5 { --liseré: var(--e5); --lueur: var(--e5); }
.general-fiche__etoiles .etoile-general { width: .95rem; height: .95rem; vertical-align: -.1rem; }
.general-fiche__carte { position: relative; display: block; }
.general-fiche__carte .carte-general__illus { box-shadow: 0 0 0 2px var(--liseré), 0 0 22px rgb(0 0 0 / .7); }
.general-fiche__libere { margin: 0; font-size: .92rem; line-height: 1.4; color: #cfe0a8; }
.general-fiche__tete { display: flex; align-items: center; gap: var(--e-3, 12px); }
.general-fiche__blason { width: 48px; height: 58px; object-fit: contain; flex: none; }
.general-fiche__vignette { display: none; }
.general-fiche__titres { flex: 1; min-width: 0; }
.general-fiche__nom { margin: 0; font-family: var(--police-titre); font-size: var(--t-5, 1.5rem); font-weight: 400; color: var(--hud-or-clair, #f0d9a0); }
.general-fiche__sous { margin: 2px 0 0; font-size: .88rem; color: var(--texte-pale, #b9ab8f); }
html:not(#cadre#cadre#cadre) button.general-fiche__fermer { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.4rem; }
.general-fiche__corps { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: var(--e-4, 16px); align-items: start; }
.general-fiche__images { display: grid; gap: var(--e-3, 12px); }
.general-fiche__modele { display: grid; gap: 4px; margin: 0; }
.general-fiche__modele figcaption { font-size: .78rem; color: var(--texte-pale, #b9ab8f); text-align: center; }
.general-fiche__photo { display: block; width: min(100%, 12rem); aspect-ratio: 159 / 320; justify-self: center; border-radius: 4px; background: radial-gradient(90% 80% at 50% 40%, #2a241d, #0a0908); box-shadow: inset 0 0 0 1px rgb(184 150 79 / .35); overflow: hidden; }
.general-fiche__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.general-fiche__infos { display: grid; gap: var(--e-2, 8px); min-width: 0; }
.general-fiche__section {
  margin: var(--e-2, 8px) 0 0;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(184 150 79 / .7), transparent 80%) left bottom / 100% 1px no-repeat;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: .06em;
  color: var(--or-vif, #e8c36a);
}
.general-fiche__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.general-fiche__stat { display: grid; gap: 2px; padding: 6px 4px; border-radius: 3px; background: var(--hud-grain, none), radial-gradient(100% 100% at 50% 30%, #2a241d, #120f0c); box-shadow: inset 0 0 0 1px rgb(184 150 79 / .35); text-align: center; }
.general-fiche__stat dt { font-size: .78rem; color: #a99a7c; font-variant: small-caps; }
.general-fiche__stat dd { margin: 0; font-family: var(--police-titre); font-size: 1.15rem; color: #efe3c8; }
.general-fiche__effets, .general-fiche__traits, .general-conditions { display: grid; gap: 3px; margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.35; }
.general-fiche__traits strong { font-family: var(--police-titre); font-weight: 400; color: var(--hud-or-clair, #f0d9a0); }
.general-conditions .est-atteinte { color: #b9d69a; }
.general-conditions .est-manquante { color: #e3c28a; }
.general-conditions li { display: flex; align-items: baseline; gap: .4rem; }
.general-conditions__marque { flex: none; width: .95em; height: .95em; transform: translateY(.12em); }
.general-fiche__dit, .general-fiche__histoire, .general-fiche__verrou, .general-fiche__avertir, .general-fiche__retour { margin: 0; font-size: .9rem; line-height: 1.4; }
.general-fiche__histoire { color: #e3d6bb; }
.general-fiche__verrou { color: #e3b08a; }
.general-fiche__avertir { padding-left: 10px; border-left: 2px solid #8a2a20; color: #e3c9a8; }
.general-fiche__retour.est-bon { color: #b9d69a; }
.general-fiche__retour.refus { color: #f0a08a; }
.general-fiche__loyaute { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-family: var(--police-titre); color: var(--or-vif, #e8c36a); }
.general-jauge { position: relative; display: block; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #0c0a08, #1d1812); box-shadow: inset 0 1px 3px rgb(0 0 0 / .8), 0 0 0 1px rgb(184 150 79 / .55); overflow: hidden; }
.general-jauge > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #d5e2b0, #6f9146 55%, #3a5222); }
.general-jauge > i { position: absolute; top: 0; bottom: 0; width: 2px; background: #c0392b; }
.general-fiche__gestes, .general-fiche__recrue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.general-fiche__recrue { display: grid; justify-items: start; }

/* ── Le renvoi ──────────────────────────────────────────────────────────── */
.general-renvoi {
  display: grid;
  gap: 8px;
  padding: var(--e-3, 12px) var(--e-4, 16px);
  border-radius: 4px;
  background: var(--hud-grain, none), radial-gradient(130% 90% at 0% 0%, rgb(140 30 24 / .35), transparent 65%), linear-gradient(180deg, #211815, #120d0b);
  box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(170 50 40 / .55), 0 6px 14px rgb(0 0 0 / .6);
}
.general-renvoi__titre { margin: 0; font-family: var(--police-titre); font-size: 1.2rem; font-weight: 400; color: #f3c3a8; }
.general-renvoi__prix { margin: 0; font-family: var(--police-titre); font-size: 1.05rem; color: var(--hud-or-clair, #f0d9a0); }
.general-renvoi__definitif { margin: 0; color: #f0a08a; font-weight: 700; }
.general-renvoi__dit { margin: 0; color: #e3d6bb; }
.general-renvoi__gestes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── La préparation d'une opération ─────────────────────────────────────── */
.camp-preparation__general { display: grid; gap: 6px; }

@media (max-width: 42rem) {
  .generaux-places { grid-template-columns: 1fr; }
  .generaux-place { min-height: 0; }
  .generaux__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .carte-general__nom { font-size: .85rem; }
  .etoile-general { width: .68rem; height: .68rem; }
  .carte-general__etat { font-size: .74rem; -webkit-line-clamp: 4; }
  /* La carte ouverte prend l'écran entier. */
  .general-fiche-fond { padding: 0; place-items: stretch; }
  .general-fiche { width: 100%; max-height: none; min-height: 100dvh; border-radius: 0; padding: var(--e-2, 8px) var(--e-2, 8px) calc(var(--e-4, 16px) + env(safe-area-inset-bottom)); }
  .general-fiche__blason { display: none; }
  .general-fiche__vignette { display: block; flex: none; width: 48px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--liseré), 0 0 10px var(--lueur, transparent); }
  .general-fiche__vignette .carte-general__illus, .general-fiche__vignette img, .general-fiche__vignette svg { display: block; width: 100%; height: 100%; }
  .general-fiche__tete { position: sticky; top: calc(-1 * var(--e-2, 8px)); z-index: 3; padding: 6px 0; background: #16120e; }
  .general-fiche__corps { grid-template-columns: 1fr; }
  .general-fiche__images { grid-template-columns: 1fr 1fr; align-items: start; }
  .general-fiche__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Le général au rapport d'un combat : son nom, puis chaque effet et son calcul. */
.rapport-general { list-style: none; margin: 6px 0; padding: 8px 10px; border-left: 2px solid var(--hud-or, #b8964f); background: rgb(0 0 0 / .22); }
.rapport-general__titre { display: block; font-family: var(--police-titre); color: var(--hud-or-clair, #f0d9a0); margin-bottom: 4px; }
.rapport-general__effets { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: .9rem; }
.rapport-general__ordre { color: #e3c28a; }
/* Les effets du général au rapport : lisibles comme le reste du bilan, serrés, une puce d'or pour tous. */
.rapport-general__effets > li { color: #dccfae; line-height: 1.3; margin: 0; padding: 0; }
.rapport-general__effets > li::marker { color: var(--hud-or, #b8964f); }
.rapport-general__effets > li .chiffre { margin: 0; }