/* ============ Quêtes — journal de campagne ============ */
#quetes.page {
  max-width: 96rem;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--echelon-5) 4%, transparent), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 98%, transparent), color-mix(in srgb, var(--pierre-0) 96%, transparent));
}
#quetes.page .dialogue__entete { padding-top: var(--e-6); margin-bottom: var(--e-5); }
#quetes.page .dialogue__titre { color: var(--parchemin); font-size: clamp(2rem,4vw,3.1rem); }
#quetes.page .dialogue__note { max-width: 70ch; font-size: var(--t-4); line-height: 1.5; }
.quetes-synthese {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 12rem)) minmax(16rem, 1fr);
  gap: var(--e-3);
  align-items: stretch;
  margin-bottom: var(--e-5);
}
.quetes-synthese__carte {
  display: grid;
  align-content: center;
  gap: var(--e-1);
  min-height: 5rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--fer) 30%, transparent);
  background: color-mix(in srgb, var(--pierre-3) 68%, transparent);
}
.quetes-synthese__carte strong { color: var(--or-vif); font: var(--t-7)/1 var(--police-titre); }
.quetes-synthese__carte span { color: var(--texte); font-size: var(--t-2); line-height: 1.25; }
.quetes-synthese__carte--ready { border-color: color-mix(in srgb, var(--echelon-5) 55%, transparent); background: color-mix(in srgb, var(--bois) 25%, transparent); }
.quetes-synthese__carte--ready strong { color: var(--or-vif); }
.quetes-synthese__aide {
  align-self: center;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--or-fonce);
  color: var(--texte);
  font-size: var(--t-3);
  line-height: 1.5;
}
.quetes-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .85fr);
  grid-template-areas: 'objectifs defis' 'campagne faits';
  gap: var(--e-4);
  align-items: start;
}
.quetes-grille > section {
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--fer) 30%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pierre-3) 74%, transparent), color-mix(in srgb, var(--pierre-1) 86%, transparent));
  box-shadow: var(--ombre-3);
}
.quetes-grille > .objectifs { grid-area: objectifs; }
.quetes-grille > .defis { grid-area: defis; }
.quetes-grille > .campagne { grid-area: campagne; }
.quetes-grille > .hauts-faits { grid-area: faits; }
.quetes-grille > section > .colonne__titre { margin-top: 0; padding-bottom: var(--e-3); border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 28%, transparent); font-size: var(--t-5); letter-spacing: .09em; }
#objectifs-liste, #defis-liste, #hauts-faits-liste { gap: var(--e-3); }
#quetes.page .objectif {
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--e-2) var(--e-3);
  min-height: 7rem;
  padding: var(--e-4);
  border-color: color-mix(in srgb, var(--fer) 34%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 48%, transparent);
  position: relative;
}
#quetes.page .objectif::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .55rem;
  height: .28rem;
  background: linear-gradient(90deg, var(--echelon-5) var(--progression,0%), color-mix(in srgb, var(--fer) 25%, transparent) var(--progression,0%));
}
#quetes.page .objectif__genre { grid-column: 1 / -1; color: var(--or); font-size: var(--t-1); }
#quetes.page .objectif__titre { color: var(--parchemin-clair); font-size: var(--t-4); line-height: 1.3; }
#quetes.page .objectif__progression { color: var(--or-vif); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#quetes.page .objectif__echeance { grid-column: 1 / -1; color: var(--or); font-size: var(--t-2); }
#quetes.page .objectif__gain { grid-column: 1 / -1; margin: 0; color: var(--or-vif); }
#quetes.page .objectif__statut { grid-column: 1 / -1; color: var(--texte); font-size: var(--t-3); }
#quetes.page .objectif.est-atteint { border-color: color-mix(in srgb, var(--or) 72%, transparent); background: color-mix(in srgb, var(--bois) 25%, transparent); }
#quetes.page .objectif.est-reclame { opacity: .76; }
#quetes.page .objectif__reclamer { grid-column: 1 / -1; min-height: 2.8rem; color: var(--bois-sombre); background: var(--or); border-color: var(--or-vif); font-weight: 700; }
#quetes.page .objectif__verrou { grid-column: 1 / -1; color: var(--texte); font-size: var(--t-3); line-height: 1.45; }
#quetes.page .objectifs__plies { margin-top: var(--e-3); padding: var(--e-1) var(--e-3) var(--e-3); border-color: color-mix(in srgb, var(--fer) 38%, transparent); }
#quetes.page .objectifs__plies summary { min-height: 2.8rem; color: var(--or); }
#quetes.page .campagne__arc { margin: 0; padding: var(--e-4); border-color: color-mix(in srgb, var(--echelon-5) 26%, transparent); background: color-mix(in srgb, var(--pierre-0) 40%, transparent); }
#quetes.page .campagne__titre { margin-top: 0; color: var(--or-vif); }
#quetes.page .campagne__jalons { gap: var(--e-3); }
#quetes.page .campagne__jalon { padding: var(--e-3); border-left-color: var(--or-fonce); color: var(--texte); line-height: 1.45; }
#quetes.page .campagne__reclamer,
#quetes.page .campagne__choisir { min-height: 2.7rem; }

@media (max-width: 60rem) {
  .quetes-synthese { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quetes-synthese__aide { grid-column: 1 / -1; }
  .quetes-grille { grid-template-columns: minmax(0,1fr); grid-template-areas: 'objectifs' 'defis' 'campagne' 'faits'; }
}
@media (max-width: 42rem) {
  .quetes-synthese { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quetes-synthese__aide { grid-column: 1 / -1; }
  #quetes.page .dialogue__entete { display: block; }
  #quetes.page .dialogue__fermer { margin-top: var(--e-4); }
}

#quetes.page .quetes-section__repere {
  margin: 0 0 var(--e-1);
  color: var(--or);
  font: var(--t-1) var(--police-titre);
  letter-spacing: .14em;
  text-transform: uppercase;
}
#quetes.page .quetes-section__note {
  margin: calc(-1 * var(--e-1)) 0 var(--e-4);
  color: var(--texte);
  font-size: var(--t-3);
  line-height: 1.5;
}
#quetes.page .objectif:hover { border-color: color-mix(in srgb, var(--echelon-5) 62%, transparent); background: color-mix(in srgb, var(--pierre-4) 50%, transparent); }
#quetes.page .objectif__reclamer:hover,
#quetes.page .campagne__reclamer:hover,
#quetes.page .campagne__choisir:hover { filter: brightness(1.08); }
#jeu .onglet--compte {
  margin-left: var(--e-1);
  border-left: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  color: var(--or);
  font-weight: 700;
}
#jeu .onglet--compte:hover,
#jeu .onglet--compte:focus-visible { color: var(--or-vif); background: color-mix(in srgb, var(--echelon-5) 8%, transparent); }
#jeu .bandeau__rang { align-items: center; }
#jeu .bandeau__compte {
  min-height: 2.35rem;
  margin-left: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 68%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 85%, transparent), color-mix(in srgb, var(--pierre-4) 95%, transparent));
  color: var(--or-vif);
  font: var(--t-1) var(--police-titre);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
#jeu .bandeau__compte:hover,
#jeu .bandeau__compte:focus-visible { border-color: var(--or-vif); background: var(--bois); color: var(--parchemin-clair); }
#jeu .bandeau__compte:disabled { opacity: .62; cursor: wait; }
#jeu .bandeau__compte-etat {
  flex-basis: 100%;
  color: var(--texte);
  font: var(--t-1) var(--police-corps);
  letter-spacing: .03em;
  text-transform: none;
}
@media (max-width: 60rem) {
  #jeu .bandeau__rang { justify-content: flex-end; gap: var(--e-2); }
  #jeu .bandeau__compte { margin-left: var(--e-1); }
  #jeu .bandeau__compte-etat { display: none; }
}

/* Top bar : de vrais boutons de navigation, avec une matière distincte de
   Winter is coming mais une présence comparable. */
#jeu .hud nav.onglets {
  align-items: center;
  gap: var(--e-2);
  padding: .6rem var(--gouttiere) .7rem;
}
#jeu .hud nav.onglets .onglet:not(.onglet--nuit) {
  min-height: 2.55rem;
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--fer) 50%, transparent);
  border-bottom-color: color-mix(in srgb, var(--fer) 70%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 92%, transparent), color-mix(in srgb, var(--pierre-3) 96%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glace-clair) 8%, transparent), var(--ombre-2);
  color: var(--texte);
  letter-spacing: .08em;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
#jeu .hud nav.onglets .onglet:not(.onglet--nuit):hover,
#jeu .hud nav.onglets .onglet:not(.onglet--nuit):focus-visible {
  border-color: color-mix(in srgb, var(--echelon-5) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 95%, transparent), color-mix(in srgb, var(--bois-sombre) 98%, transparent));
  color: var(--or-vif);
  transform: translateY(-1px);
}
#jeu .hud nav.onglets .onglet:not(.onglet--nuit).est-actif {
  border-color: var(--echelon-5);
  border-bottom-color: var(--or);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 98%, transparent), color-mix(in srgb, var(--cuir) 98%, transparent));
  color: var(--or-vif);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--echelon-5) 12%, transparent), var(--ombre-2);
}
#jeu .hud nav.onglets .onglet:not(.onglet--nuit):active { transform: translateY(0); }
@media (max-width: 60rem) {
  #jeu .hud nav.onglets { gap: var(--e-2); padding-inline: var(--e-4); }
  #jeu .hud nav.onglets .onglet:not(.onglet--nuit) { min-height: 2.7rem; }
}
@media (max-width: 45rem) {
  #jeu .hud nav.onglets {
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #jeu .hud nav.onglets::-webkit-scrollbar { display: none; }
}

/* Système de commandes global : chaque action doit ressembler à une action.
   Les liens narratifs restent volontairement plats ; les commandes de jeu ont
   une matière, une profondeur et des états immédiatement lisibles.

   Deux classes sortent de cette règle et de toutes celles qui la suivent :
   `.rangee` et `.sceau-sang`, les boutons taillés dans la parure. Sans cette
   sortie, chaque écran devait écrire des sélecteurs à deux identifiants pour
   récupérer sa propre couleur, et le rail de la forge sortait gris-bleu au
   lieu de rouge et d'or. */
#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque),
#jeu .jeton,
#jeu select,
#jeu summary {
  border: 1px solid color-mix(in srgb, var(--echelon-5) 62%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir-clair) 96%, transparent), color-mix(in srgb, var(--pierre-3) 98%, transparent));
  color: var(--parchemin-clair);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent), var(--ombre-2);
  transition: border-color .16s ease, background .16s ease, color .16s ease,
    transform .12s ease, box-shadow .16s ease;
}

#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque),
#jeu .jeton {
  min-height: 44px; /* la cible tactile minimale, quelle que soit la taille du texte */
  padding: .55rem .82rem;
  cursor: pointer;
}

#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque):hover:not(:disabled),
#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque):focus-visible,
#jeu .jeton:hover,
#jeu .jeton:focus-visible,
#jeu summary:hover,
#jeu summary:focus-visible {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, var(--bois), var(--cuir));
  color: var(--parchemin-clair);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 13%, transparent), var(--ombre-2), 0 0 0 2px color-mix(in srgb, var(--echelon-5) 14%, transparent);
}

#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque):active:not(:disabled),
#jeu .jeton:active { transform: translateY(1px); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--pierre-0) 34%, transparent); }
#jeu button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):not(.bandeau__compte):not(.onglet):not(.coque):disabled,
#jeu .jeton:disabled,
#jeu select:disabled { opacity: .52; cursor: not-allowed; filter: saturate(.55); box-shadow: none; }

#jeu select {
  min-height: 44px; /* la cible tactile minimale, quelle que soit la taille du texte */
  padding: .5rem .72rem;
  cursor: pointer;
}
#jeu select option { color: var(--pierre-4); background: var(--parchemin-clair); }
#jeu select:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }

/* Les titres qui ouvrent un contenu sont des commandes, pas des lignes de texte. */
#jeu details > summary,
#jeu .aide-contextuelle summary,
#jeu .objectifs__plies summary,
#jeu .visage-traits summary,
#jeu .fief__memoire summary,
#jeu .reglages__confidentialite summary {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px; /* la cible tactile minimale, quelle que soit la taille du texte */
  padding: .55rem .75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
#jeu details > summary::-webkit-details-marker { display: none; }
#jeu details > summary::after { content: '＋'; margin-left: auto; color: var(--or); font-size: var(--t-4); }
#jeu details[open] > summary::after { content: '−'; }

/* Les groupes d’actions respirent comme des commandes et non comme une phrase. */
#jeu .action__groupe,
#jeu .economie-locale__actions,
#jeu .role__actions,
#jeu .troupe__actions,
#jeu .guerre-ordres__choix,
#jeu .article__prix,
#jeu .vente {
  gap: var(--e-2);
}
#jeu .action__groupe button,
#jeu .economie-locale__actions button,
#jeu .role__actions button,
#jeu .troupe__actions button,
#jeu .guerre-ordres__choix button { min-width: 9rem; }

@media (prefers-reduced-motion: reduce) {
  #jeu button, #jeu .jeton, #jeu select, #jeu summary { transition: none; }
}

/* Landing : une porte d’entrée de grand jeu de stratégie, avant les choix de
   création. Le fond reste piloté par les assets de la coquille pour garder un
   rendu rapide et immersif sur les grandes comme les petites résolutions. */
.landing { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 78% 32%, color-mix(in srgb, var(--bois) 12%, transparent), transparent 34%), linear-gradient(90deg, color-mix(in srgb, var(--pierre-0) 95%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 72%, transparent) 38%, color-mix(in srgb, var(--pierre-0) 12%, transparent) 100%), url('../images/accueil-background.webp') center / cover; }
/* Sur telephone, l'accueil prend l'image cadree pour le portrait. */
@media (max-width: 45rem) {
  .landing {
    background:
      radial-gradient(ellipse at 78% 32%, color-mix(in srgb, var(--bois) 10%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 34%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 16%, transparent) 26%, color-mix(in srgb, var(--pierre-0) 72%, transparent) 52%, color-mix(in srgb, var(--pierre-0) 93%, transparent) 74%, color-mix(in srgb, var(--pierre-0) 97%, transparent) 100%),
      url('../images/accueil-background-mobile.webp') center top / cover no-repeat;
  }
}
.landing__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 8%, transparent), transparent 38%, color-mix(in srgb, var(--pierre-0) 46%, transparent)); pointer-events: none; }
/* Pas de filtre sur ce bloc : trois drop-shadow empiles ici effacent le logo
   sous Safari, sur iPhone comme au banc WebKit. L'ombre se pose sur l'image. */
.landing__logo-hero { position: absolute; z-index: 0; top: 8%; left: 50%; width: min(40vw, 38rem); transform: translateX(-50%); pointer-events: none; }
.landing__logo-hero::after { content: ""; position: absolute; inset: 8% 12% 10%; z-index: -1; border-radius: var(--rayon-rond); background: radial-gradient(ellipse, color-mix(in srgb, var(--or) 20%, transparent), color-mix(in srgb, var(--fer) 9%, transparent) 38%, transparent 70%); filter: blur(1.5rem); opacity: .85; }
.landing__logo-hero img { display: block; width: 100%; height: auto; transform-origin: 50% 58%; animation: logo-arrive 1.35s cubic-bezier(.2,.8,.2,1) both, logo-respire 5.5s ease-in-out 1.35s infinite; }
.landing__flammes { position: absolute; z-index: 0; inset: 25% 13% 12%; display: flex; align-items: flex-end; justify-content: center; gap: 3%; filter: blur(.12rem) drop-shadow(0 0 1.15rem color-mix(in srgb, var(--feu) 80%, transparent)); opacity: 0; animation: flammes-allumage 1.7s ease-out .45s forwards; }
.landing__flammes i { display: block; width: 14%; height: 46%; border-radius: 70% 35% 60% 40%; background: radial-gradient(ellipse at 50% 17%, var(--parchemin-clair) 0 8%, var(--alerte) 22%, transparent 50%), linear-gradient(180deg, var(--feu-lueur) 0%, var(--feu) 38%, var(--barral) 75%, transparent 100%); transform-origin: 50% 100%; mix-blend-mode: screen; animation: flamme-danse 1.35s ease-in-out infinite alternate; }
.landing__flammes i:nth-child(2) { height: 68%; background: radial-gradient(ellipse at 50% 15%, var(--parchemin-clair) 0 7%, var(--alerte) 21%, transparent 48%), linear-gradient(180deg, var(--alerte), var(--feu) 38%, var(--cire-vif) 78%, transparent); animation-delay: -.42s; transform: rotate(-9deg); }
.landing__flammes i:nth-child(3) { width: 18%; height: 82%; background: radial-gradient(ellipse at 50% 13%, var(--parchemin-clair) 0 6%, var(--or-vif) 20%, transparent 48%), linear-gradient(180deg, var(--alerte), var(--feu) 35%, var(--cire-vif) 77%, transparent); animation-delay: -.8s; }
.landing__flammes i:nth-child(4) { height: 60%; animation-delay: -.2s; transform: rotate(8deg); }
.landing__flammes i:nth-child(5) { height: 39%; animation-delay: -.65s; transform: rotate(14deg); }
.landing__logo-hero::before { content: ""; position: absolute; inset: 12% 15% 14%; z-index: -1; border-radius: var(--rayon-rond); background: radial-gradient(ellipse, color-mix(in srgb, var(--feu-lueur) 42%, transparent), color-mix(in srgb, var(--feu) 20%, transparent) 34%, color-mix(in srgb, var(--fer) 8%, transparent) 55%, transparent 74%); filter: blur(2.8rem); opacity: 0; animation: logo-aura 1.4s ease-out .25s forwards, logo-aura-pulse 5.5s ease-in-out 1.65s infinite; }
.landing__flammes { display: none !important; }
.landing__hero { width: min(42rem, calc(100% - 2 * var(--gouttiere))); padding: clamp(5rem, 13vh, 9rem) 0 2rem clamp(1rem, 7vw, 7rem); }
.landing__sur-titre, .landing__repere { margin: 0 0 var(--e-4); color: var(--or); font: var(--t-1) var(--police-titre); letter-spacing: .2em; text-transform: uppercase; }
.landing__titre { margin: 0; color: var(--parchemin-clair); font: 400 clamp(3.3rem, 10vw, 7.2rem)/.84 var(--police-titre); letter-spacing: .08em; text-shadow: var(--ombre-texte), 0 0 30px color-mix(in srgb, var(--echelon-5) 24%, transparent); }
.landing__titre span { display: block; margin: var(--e-1) 0; color: var(--echelon-5); font-size: .34em; letter-spacing: .45em; }
.landing__accroche { max-width: 31rem; margin: var(--e-6) 0 var(--e-3); color: var(--or-vif); font: 700 clamp(1.25rem, 2.6vw, 1.9rem)/1.2 var(--police-titre); }
.landing__intro { max-width: 35rem; margin: 0; color: var(--texte); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; text-shadow: var(--ombre-texte); }
.landing__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.landing__actions button { min-height: 3.25rem; padding: var(--e-3) var(--e-5); border-radius: var(--rayon-case); font: 700 var(--t-3) var(--police-titre); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.landing__cta { border: 1px solid var(--or); background: linear-gradient(180deg, var(--alerte), var(--or-fonce)); color: var(--pierre-2); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 28%, transparent), var(--ombre-2); }
.landing__secondaire { border: 1px solid color-mix(in srgb, var(--parchemin-bas) 70%, transparent); background: color-mix(in srgb, var(--pierre-1) 74%, transparent); color: var(--parchemin); }
.landing__cta:hover, .landing__cta:focus-visible { background: linear-gradient(180deg, var(--or), var(--or-fonce)); transform: translateY(-1px); }
.landing__secondaire:hover, .landing__secondaire:focus-visible { border-color: var(--or); background: color-mix(in srgb, var(--cuir-clair) 82%, transparent); color: var(--parchemin-clair); }
.landing__boucle { width: min(68rem, calc(100% - 2 * var(--gouttiere))); margin: var(--e-4) auto 0; padding: var(--e-5) 0 3rem; border-top: 1px solid color-mix(in srgb, var(--echelon-5) 28%, transparent); }
.landing__boucle h2 { margin: 0 0 var(--e-4); color: var(--parchemin); font: 400 clamp(1.35rem, 2.4vw, 2rem) var(--police-titre); }
.landing__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
.landing__cartes article { min-height: 8rem; padding: var(--e-4); border: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--pierre-3) 88%, transparent), color-mix(in srgb, var(--pierre-0) 74%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 4%, transparent); }
.landing__numero { color: var(--echelon-5); font: 700 var(--t-2) var(--police-titre); letter-spacing: .16em; }
.landing__cartes h3 { margin: var(--e-2) 0 var(--e-1); color: var(--parchemin); font: 700 var(--t-4) var(--police-titre); }
.landing__cartes p { margin: 0; color: var(--texte); font-size: var(--t-3); line-height: 1.45; }
.landing__message { width: min(38rem, calc(100% - 2 * var(--gouttiere))); margin: var(--e-4) auto; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--echelon-5); background: color-mix(in srgb, var(--cuir) 86%, transparent); color: var(--parchemin-clair); }
.creation__logo { display: block; width: min(24rem, 72vw); height: auto; margin: 0 auto var(--e-4); filter: drop-shadow(0 .5rem 1.2rem color-mix(in srgb, var(--pierre-0) 55%, transparent)); }
.bandeau__logo { width: clamp(5rem, 9vw, 8rem); height: auto; object-fit: contain; filter: drop-shadow(0 .2rem .45rem color-mix(in srgb, var(--pierre-0) 70%, transparent)); }
@media (max-width: 45rem) { .landing__logo-hero { position: relative; top: auto; left: auto; width: min(25rem, 84vw); margin: var(--e-4) auto calc(-1 * var(--e-4)); transform: none; } .landing__hero { padding-top: var(--e-6); } .bandeau__logo { width: 5.5rem; } }

@keyframes logo-arrive { 0% { opacity: 0; transform: scale(.78) translateY(1.3rem); filter: blur(8px) brightness(.55); } 55% { opacity: 1; filter: blur(0) brightness(1.18) drop-shadow(0 .9rem 1.6rem color-mix(in srgb, var(--pierre-0) 72%, transparent)); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1) drop-shadow(0 .9rem 1.6rem color-mix(in srgb, var(--pierre-0) 72%, transparent)); } }
@keyframes logo-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes logo-aura { 0% { opacity: 0; transform: scale(.55); } 65% { opacity: .95; transform: scale(1.08); } 100% { opacity: .5; transform: scale(1); } }
@keyframes logo-aura-pulse { 0%, 100% { opacity: .42; transform: scale(1); } 50% { opacity: .72; transform: scale(1.1); } }
@keyframes flammes-allumage { 0% { opacity: 0; transform: scaleY(.35); } 55% { opacity: .92; transform: scaleY(1.06); } 100% { opacity: .68; transform: scaleY(1); } }
@keyframes flamme-danse { 0% { transform: skewX(-8deg) scaleY(.86) rotate(-5deg); opacity: .55; } 100% { transform: skewX(9deg) scaleY(1.12) rotate(6deg); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .landing__logo-hero img, .landing__logo-hero::before, .landing__flammes, .landing__flammes i { animation: none; } .landing__logo-hero img { opacity: 1; transform: none; filter: drop-shadow(0 .9rem 1.6rem color-mix(in srgb, var(--pierre-0) 72%, transparent)); } .landing__logo-hero::before { opacity: .5; } .landing__flammes { opacity: .6; } }
/* Sur téléphone, l'accueil prend l'image cadrée pour le portrait : celle du
   bureau y coupait la moitié du dessin. */
/* Sur grand ecran, le logo se range en haut a gauche, au-dessus du texte :
   centre, il passait par-dessus le titre et la premiere phrase. */
@media (min-width: 45.01rem) {
  .landing__logo-hero { top: 2.6rem; left: clamp(1rem, 7vw, 7rem); width: min(21vw, 17rem); transform: none; }
  .landing__hero { padding-top: clamp(13rem, 24vh, 17rem); }
}
@media (max-width: 45rem) { .landing { background-position: center top; } .landing__hero { padding-top: 4rem; } .landing__titre { font-size: clamp(3rem, 18vw, 5rem); } .landing__actions { flex-direction: column; align-items: stretch; } .landing__cartes { grid-template-columns: 1fr; } .landing__boucle { margin-top: 0; } }

/* Repère commun : le joueur sait toujours à quoi sert l’écran avant de lire ses actions. */
.page__orientation { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-5); padding: var(--e-4) var(--e-4); border: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent); border-left: 3px solid var(--or, var(--echelon-5)); background: linear-gradient(115deg, color-mix(in srgb, var(--cuir) 82%, transparent), color-mix(in srgb, var(--pierre-2) 72%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 4%, transparent), var(--ombre-3); }
.page__orientation-label { grid-column: 1 / -1; color: var(--or, var(--echelon-5)); font: 700 var(--t-1) var(--police-titre); letter-spacing: .16em; text-transform: uppercase; }
.page__orientation strong { color: var(--parchemin, var(--parchemin)); font: 700 var(--t-4) var(--police-titre); }
.page__orientation p { grid-column: 2; margin: 0; color: var(--texte-pale, var(--texte)); line-height: 1.45; }
.page > .dialogue__entete { min-height: 4.2rem; }
.page > section:not(.dialogue__entete), .page > form, .page > .atlas { border-radius: var(--rayon-case); }
.page button:not(.dialogue__fermer):not(.jeton):not(:disabled), .page select, .page input { transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.page button:not(.dialogue__fermer):not(.jeton):not(:disabled):hover { transform: translateY(-1px); }
@media (max-width: 45rem) { .page__orientation { grid-template-columns: 1fr; gap: var(--e-1); padding: var(--e-3) var(--e-4); } .page__orientation p { grid-column: 1; } }

/* Passe lisibilité : une page de gestion doit se lire comme un tableau de décision. */
.page { width: min(100% - 2rem, 88rem); box-sizing: border-box; }
.page .dialogue__titre { color: var(--parchemin-clair); text-wrap: balance; }
.page .dialogue__note { max-width: 52rem; padding: var(--e-2) var(--e-3); border-left: 2px solid color-mix(in srgb, var(--echelon-5) 62%, transparent); background: color-mix(in srgb, var(--bois-sombre) 42%, transparent); color: var(--parchemin); line-height: 1.55; }
.journee__intro { max-width: 48rem; margin: calc(-1 * var(--e-1)) 0 var(--e-4); padding: var(--e-3) var(--e-3); border-left: 2px solid color-mix(in srgb, var(--echelon-5) 62%, transparent); background: color-mix(in srgb, var(--bois-sombre) 42%, transparent); color: var(--texte); line-height: 1.5; }
.journee__etat { margin: calc(-1 * var(--e-2)) 0 var(--e-4); color: var(--or); font-weight: 700; letter-spacing: .02em; }
.retour-action { max-width: 48rem; margin: var(--e-2) 0 var(--e-4); padding: var(--e-3) var(--e-3); border: 1px solid color-mix(in srgb, var(--echelon-5) 70%, transparent); background: color-mix(in srgb, var(--bois) 30%, transparent); color: var(--parchemin); line-height: 1.45; }
.page > section:not(.dialogue__entete):not(.page__orientation), .page > form { border: 1px solid color-mix(in srgb, var(--echelon-5) 16%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--pierre-2) 74%, transparent), color-mix(in srgb, var(--pierre-0) 58%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 3%, transparent); }
.page h2, .page h3 { text-wrap: balance; }
.page p, .page li, .page dd { line-height: 1.55; }
.page details { border: 1px solid color-mix(in srgb, var(--echelon-5) 20%, transparent); background: color-mix(in srgb, var(--pierre-1) 52%, transparent); }
.page details > summary { min-height: 44px; display: flex; align-items: center; padding: var(--e-2) var(--e-3); color: var(--or-vif); font-weight: 700; cursor: pointer; }
.page details[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 20%, transparent); background: color-mix(in srgb, var(--bois) 18%, transparent); }
.page details > :not(summary) { margin-left: var(--e-3); margin-right: var(--e-3); }
.page button[disabled], .page button:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.35); }
.page button:not(:disabled):focus-visible, .page summary:focus-visible, .page input:focus-visible, .page select:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 3px; }
.page .action__aide:not([hidden]), .page .gestion-aide:not([hidden]) { display: block; margin-top: var(--e-2); padding: var(--e-2) var(--e-3); border-left: 2px solid var(--echelon-5); background: color-mix(in srgb, var(--bois) 22%, transparent); color: var(--parchemin); font-size: var(--t-3); line-height: 1.45; }
.page .sceau, .page button[type="submit"] { box-shadow: var(--ombre-2); }
@media (max-width: 45rem) { .page { width: calc(100% - 1rem); padding-left: var(--e-2); padding-right: var(--e-2); } .page .dialogue__entete { grid-template-columns: 1fr; } .page .dialogue__fermer { justify-self: start; } }

/* Signature de contexte : même système, matière différente selon la décision. */
#siege.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--echelon-5) 58%, transparent); }
#siege.page .page__orientation { border-left-color: var(--echelon-5); }
#quetes.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--or) 58%, transparent); }
#nuit.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--glace) 65%, transparent); }
#nuit.page .page__orientation { border-left-color: var(--glace); background: linear-gradient(115deg, color-mix(in srgb, var(--glace-fond) 62%, transparent), color-mix(in srgb, var(--glace-nuit) 75%, transparent)); }
#guerre.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--cire-vif) 65%, transparent); }
#guerre.page .page__orientation { border-left-color: var(--perte); background: linear-gradient(115deg, color-mix(in srgb, var(--cire-fonce) 58%, transparent), color-mix(in srgb, var(--pierre-1) 76%, transparent)); }
#forge.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--or-sourd) 58%, transparent); }
#forge.page .page__orientation { border-left-color: var(--parchemin-bas); background: linear-gradient(115deg, color-mix(in srgb, var(--verredragon) 62%, transparent), color-mix(in srgb, var(--pierre-0) 76%, transparent)); }
#boutique.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--ombre-magie) 60%, transparent); }
#boutique.page .page__orientation { border-left-color: var(--ombre-magie); background: linear-gradient(115deg, color-mix(in srgb, var(--verredragon) 62%, transparent), color-mix(in srgb, var(--pierre-0) 76%, transparent)); }
#famille.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--or-fonce) 62%, transparent); }
#classements.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--fer) 62%, transparent); }
#journal.page .dialogue__entete { border-bottom-color: color-mix(in srgb, var(--or-sourd) 62%, transparent); }
.page .refus:not([hidden]) { margin: var(--e-3) 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid color-mix(in srgb, var(--perte) 55%, transparent); border-left: 3px solid var(--perte); background: color-mix(in srgb, var(--cire-fonce) 46%, transparent); color: var(--texte); line-height: 1.5; }
/* Un verrou n'est pas un refus : le joueur n'a rien tenté. Fer et pierre au
   lieu du rouge, pour que l'œil ne le lise pas comme une erreur. La règle vise
   `p.verrou` et pas `.verrou` : la classe sert aussi de marque sur des `span`
   au fil d'une ligne, qui ne veulent ni cadre ni marge. */
.page p.page__verrou:not([hidden]) { margin: var(--e-3) 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid color-mix(in srgb, var(--or-sourd) 32%, transparent); border-left: 3px solid var(--or-sourd); background: color-mix(in srgb, var(--verredragon) 50%, transparent); color: var(--parchemin); line-height: 1.5; }
.page .est-atteint, .page .est-gagnee { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--or) 72%, transparent); }
.page:not([hidden]) { animation: page-enter .28s ease-out both; }
.onglet.est-actif { position: relative; box-shadow: inset 0 -3px 0 var(--or), var(--ombre-2); }
.onglet.est-actif::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -.2rem; height: .16rem; border-radius: var(--rayon-pilule); background: currentColor; opacity: .8; }
.dialogue__fermer { transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.dialogue__fermer:hover, .dialogue__fermer:focus-visible { background: color-mix(in srgb, var(--echelon-5) 12%, transparent); transform: translateX(-2px); }
@keyframes page-enter { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page:not([hidden]) { animation: none; } }

/* Signatures d’univers : la commande reste reconnaissable, mais chaque page
   porte sa propre matière. */
#jeu .onglet#ouvrir-nuit {
  border-color: var(--glace);
  background: linear-gradient(180deg, var(--glace-fond), var(--glace-ardoise));
  color: var(--glace-clair);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glace-clair) 18%, transparent), 0 0 12px color-mix(in srgb, var(--glace) 22%, transparent);
}
#jeu .onglet#ouvrir-nuit:hover,
#jeu .onglet#ouvrir-nuit:focus-visible,
#jeu .onglet#ouvrir-nuit.est-actif { border-color: var(--glace-clair); background: linear-gradient(180deg, var(--fer), var(--glace-fond)); color: var(--glace-clair); }

#jeu .onglet#ouvrir-siege,
#siege.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton) {
  border-color: var(--or-sourd);
  background: linear-gradient(180deg, var(--bois), var(--pierre-4));
  color: var(--or-vif);
}
#jeu .onglet#ouvrir-siege:hover,
#jeu .onglet#ouvrir-siege:focus-visible,
#siege.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):hover:not(:disabled),
#siege.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):focus-visible { border-color: var(--or-vif); background: linear-gradient(180deg, var(--or-fonce), var(--cuir-clair)); }

#jeu .onglet#ouvrir-carte,
#carte.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton) {
  border-color: var(--gain-fond);
  background: linear-gradient(180deg, var(--fer-sombre), var(--pierre-3));
  color: var(--parchemin-clair);
}
#jeu .onglet#ouvrir-carte:hover,
#jeu .onglet#ouvrir-carte:focus-visible,
#carte.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):hover:not(:disabled),
#carte.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):focus-visible { border-color: var(--gain); background: linear-gradient(180deg, var(--gain-fond), var(--cuir)); }

/* 🔴 Le jeton est exclu de la teinte d ecran depuis le 16/09/2026. C est une
   forme du socle, comme la rangee et le sceau : une piece de mise doit
   ressembler a de l or et un jeton d influence a de l influence, sur tous les
   ecrans. Sans cette exclusion, la page de guerre repeignait les deux en
   rouge et le joueur voyait dix boutons identiques. */
#jeu .onglet#ouvrir-guerre,
#guerre.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton) {
  border-color: var(--perte);
  background: linear-gradient(180deg, var(--cire-fonce), var(--pierre-4));
  color: var(--texte);
}
#jeu .onglet#ouvrir-guerre:hover,
#jeu .onglet#ouvrir-guerre:focus-visible,
#guerre.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):hover:not(:disabled),
#guerre.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):focus-visible { border-color: var(--perte); background: linear-gradient(180deg, var(--cire), var(--cire-fonce)); }

#jeu .onglet#ouvrir-forge,
#forge.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton) {
  border-color: var(--fer);
  background: linear-gradient(180deg, var(--fer-sombre), var(--verredragon));
  color: var(--parchemin-clair);
}
#jeu .onglet#ouvrir-forge:hover,
#jeu .onglet#ouvrir-forge:focus-visible,
#forge.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):hover:not(:disabled),
#forge.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):focus-visible { border-color: var(--parchemin-clair); background: linear-gradient(180deg, var(--fer), var(--cuir)); }

#jeu .onglet#ouvrir-boutique,
#boutique.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton) {
  border-color: var(--fer);
  background: linear-gradient(180deg, var(--valyrien), var(--verredragon));
  color: var(--texte);
}
#jeu .onglet#ouvrir-boutique:hover,
#jeu .onglet#ouvrir-boutique:focus-visible,
#boutique.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):hover:not(:disabled),
#boutique.page button:not(.rangee):not(.sceau-sang):not(.lien):not(.dialogue__fermer):not(.jeton):focus-visible { border-color: var(--fer); background: linear-gradient(180deg, var(--ombre-magie), var(--verredragon)); }

/* Les libellés de section restent informatifs ; les sous-titres cliquables
   portent seuls le traitement de bouton afin d’éviter les faux contrôles. */
#jeu .page__entete h2,
#jeu .colonne__titre,
#jeu .bloc__titre { text-shadow: var(--ombre-texte), 0 0 14px color-mix(in srgb, var(--echelon-5) 12%, transparent); }
#quetes.page .defis .objectif { border-left: 3px solid var(--or-fonce); }
#quetes.page .campagne__arc + .campagne__arc { margin-top: var(--e-3); }

/* Deux colonnes indépendantes : chaque famille de quêtes s'empile sans
   imposer la hauteur de la colonne voisine. */
#quetes.page .quetes-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .85fr);
  grid-template-areas: none;
  gap: var(--e-4);
  align-items: start;
}
#quetes.page .quetes-colonne {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  min-width: 0;
}
#quetes.page .quetes-colonne > section {
  margin: 0;
}
#quetes.page .quetes-grille > .quetes-colonne > section {
  grid-area: auto;
}
@media (max-width: 60rem) {
  #quetes.page .quetes-grille { grid-template-columns: minmax(0,1fr); }
  #quetes.page .quetes-colonne { gap: var(--e-4); }
}
@media (max-width: 40rem) {
  .boucle-jour { grid-template-columns: 1fr; }
  .boucle-jour__etape { min-height: 64px; }
}

/* Demeure : le HUD doit rester un repère, pas devenir une seconde page. */
#jeu .hud .bandeau {
  min-height: 3.25rem;
  padding: .25rem var(--gouttiere);
  gap: var(--e-1) var(--e-2);
}
#jeu .bandeau__logo { width: clamp(2.6rem, 3.4vw, 3.5rem); }
#jeu .bandeau__compte {
  min-height: 1.95rem;
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-1);
}
#jeu .bandeau__compte-etat { display: none; }
#jeu .hud nav.onglets {
  gap: var(--e-1);
  padding: .2rem var(--gouttiere) .25rem;
}
#jeu .hud nav.onglets .onglet:not(.onglet--nuit),
#jeu .hud nav.onglets .onglet--nuit {
  min-height: 2.05rem;
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-1);
}

/* Demeure : une page de jeu, pas une collection de cartes. L'espace large
   sert aux affaires que le joueur doit trancher ; les informations de contexte
   restent sur un rail discret. */
#jeu .colonnes.grand-salle {
  width: min(100% - clamp(1rem, 3vw, 3.5rem), 104rem);
  max-width: none;
  gap: var(--e-5);
  padding-top: var(--e-4);
}
#jeu .salle-hero {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding: 0 0 var(--e-4);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
}
#jeu .identite {
  padding: 0;
  background: none;
  border: 0;
}
#jeu .salle-hero__texte { gap: var(--e-3); }
#jeu .salle-hero .jauges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--fer) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fer) 30%, transparent);
}
#jeu .salle-hero .jauge,
#jeu .salle-hero .jauge--experience {
  flex: 1 1 7rem;
  min-width: 0;
  padding: var(--e-2) var(--e-3);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#jeu .salle-hero .jauge + .jauge { border-left: 1px solid color-mix(in srgb, var(--fer) 26%, transparent); }
#jeu .salle-hero .jauge--experience { flex-basis: 100%; border-bottom: 1px solid color-mix(in srgb, var(--fer) 26%, transparent); }

#jeu .demeure-grille {
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
  gap: clamp(1.25rem, 3vw, 3.5rem);
}
#jeu .salle-journee {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
#jeu .journee__intro {
  max-width: 65ch;
  margin: var(--e-1) 0 var(--e-4);
  padding: 0;
  border: 0;
  background: none;
}
#jeu .priorites {
  margin-bottom: var(--e-4);
  padding: var(--e-4) 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  background: none;
}
#jeu .priorite,
#jeu .priorite--focus {
  padding: var(--e-2) 0 var(--e-2) var(--e-3);
  background: none;
  box-shadow: none;
}
#jeu .priorite + .priorite { border-top: 1px solid color-mix(in srgb, var(--fer) 20%, transparent); }

#jeu .demeure-appuis { gap: var(--e-5); }
#jeu .demeure-appuis .montee,
#jeu .demeure-appuis .salle-tresor,
#jeu .demeure-fiche {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
#jeu .demeure-appuis .montee {
  padding-left: var(--e-4);
  border-left: 2px solid var(--cire);
}
#jeu .demeure-appuis .salle-tresor { padding-top: var(--e-4); border-top: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent); }
#jeu .salle-tresor .ressources { gap: 0; }
#jeu .salle-tresor .ressource { min-width: 100%; padding: var(--e-1) 0; background: none; }
#jeu .salle-tresor .ressource + .ressource { border-top: 1px solid color-mix(in srgb, var(--fer) 20%, transparent); }
#jeu .demeure-fiche {
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .5fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  padding-top: var(--e-5);
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
}

@media (max-width: 60rem) {
  #jeu .colonnes.grand-salle { width: min(100% - 1rem, 104rem); gap: var(--e-4); }
  #jeu .salle-hero { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); }
  #jeu .demeure-grille, #jeu .demeure-fiche { grid-template-columns: 1fr; gap: var(--e-4); }
}
@media (max-width: 38rem) {
  #jeu .salle-hero { display: block; }
  #jeu .salle-hero .portrait { width: min(9rem, 38vw); margin: 0 0 var(--e-3); }
  #jeu .salle-hero .jauge--experience { flex-basis: 100%; }
}

/* Les surfaces indiquent une prise : contenu à lire, action à faire, ou
   réserve à gérer. Le fond nu est réservé aux transitions entre ces zones. */
#jeu .salle-hero {
  padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 32%, transparent);
  background: linear-gradient(105deg, color-mix(in srgb, var(--cuir) 45%, transparent), color-mix(in srgb, var(--pierre-1) 72%, transparent) 48%, color-mix(in srgb, var(--pierre-1) 40%, transparent));
}
#jeu .identite { padding: var(--e-0) var(--e-1); }
#jeu .salle-hero .jauges {
  background: color-mix(in srgb, var(--pierre-0) 28%, transparent);
  border-color: color-mix(in srgb, var(--echelon-5) 40%, transparent);
}
#jeu .salle-hero .jauge {
  min-height: 3.7rem;
  transition: background-color 140ms ease;
}
#jeu .salle-hero .jauge:hover { background: color-mix(in srgb, var(--echelon-5) 10%, transparent); }

#jeu .priorites {
  padding: var(--e-3) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 42%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 52%, transparent);
}
#jeu .priorite,
#jeu .priorite--focus {
  padding: var(--e-3) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--fer) 36%, transparent);
  border-left: 3px solid var(--or-sourd);
  background: color-mix(in srgb, var(--pierre-0) 34%, transparent);
}
#jeu .priorite--focus {
  border-left-color: var(--or);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bois) 30%, transparent), color-mix(in srgb, var(--pierre-0) 34%, transparent));
}
#jeu .priorite + .priorite { margin-top: var(--e-2); border-top-color: color-mix(in srgb, var(--fer) 36%, transparent); }

#jeu .demeure-appuis .montee,
#jeu .demeure-appuis .salle-tresor {
  padding: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 32%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 70%, transparent);
}
#jeu .demeure-appuis .montee { border-left: 3px solid var(--cire); }
#jeu .demeure-appuis .salle-tresor { border-top-color: color-mix(in srgb, var(--echelon-5) 32%, transparent); }
#jeu .salle-tresor .ressource {
  min-width: 0;
  padding: var(--e-2) var(--e-0);
  border-radius: var(--rayon-case);
}
#jeu .salle-tresor .ressource:hover { background: color-mix(in srgb, var(--echelon-5) 8%, transparent); }
#jeu .demeure-fiche {
  padding: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 26%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 52%, transparent);
}


/* ============ Quêtes en cours (lot 12) : une carte par parole donnée ============ */
/* Panneau de pierre au filet d'or, échéance en cire, promesse et prix de l'échec côte à côte, deux gestes. */
#quetes.page .quetes-en-cours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
#quetes.page .quete-carte {
  position: relative;
  display: grid; gap: var(--e-3);
  padding: var(--e-4) var(--e-5) var(--e-4) calc(var(--e-5) + 6px);
  border: 1px solid color-mix(in srgb, var(--or) 42%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--or-fonce) 70%, transparent) 0 4px, transparent 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--pierre-3) 82%, transparent), color-mix(in srgb, var(--pierre-1) 92%, transparent));
  box-shadow: var(--ombre-3), inset 0 1px 0 rgb(255 255 255 / .05);
  color: var(--texte);
}
#quetes.page .quete-carte.est-urgente { border-color: color-mix(in srgb, #c0503e 70%, transparent); background:
    linear-gradient(90deg, #9a1f1c 0 4px, transparent 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--pierre-3) 82%, transparent), color-mix(in srgb, var(--pierre-1) 92%, transparent)); }
#quetes.page .quete-carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); }
#quetes.page .quete-carte__titre { color: var(--parchemin-clair); font: var(--t-5)/1.2 var(--police-titre); letter-spacing: .04em; }
#quetes.page .quete-carte__donneur { color: var(--or); font-size: var(--t-2); }
#quetes.page .quete-carte__objectif { margin: 0; color: var(--texte-fort); font-size: var(--t-4); line-height: 1.4; }
#quetes.page .quete-carte__echeance { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: center; font-size: var(--t-3); }
#quetes.page .quete-carte__reste {
  padding: 2px var(--e-3); border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--or-vif) 85%, white), var(--or-fonce)); color: var(--bois-sombre); font-weight: 700;
  box-shadow: 0 1px 2px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 240 200 / .3);
}
#quetes.page .quete-carte.est-urgente .quete-carte__reste { background: radial-gradient(circle at 35% 30%, #c4443a, #7c1717 70%); color: #fff1e6; }
/* La feuille du camp visé par une quête, sur la carte : la parole donnée en tête, filet de cire. */
.camp-fiche__quete { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); border-left: 3px solid #9a1f1c; background: color-mix(in srgb, #5e0f10 22%, transparent); color: #f3d6c8; font-size: var(--t-3); line-height: 1.45; }
#quetes.page .quete-carte__termes { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
#quetes.page .quete-carte__termes > div { padding: var(--e-2) var(--e-3); border-left: 2px solid var(--or-fonce); background: color-mix(in srgb, var(--pierre-0) 45%, transparent); }
#quetes.page .quete-carte__termes > .est-perte { border-left-color: #a8392c; }
#quetes.page .quete-carte__termes dt { color: var(--or); font: var(--t-1) var(--police-titre); letter-spacing: .12em; text-transform: uppercase; }
#quetes.page .quete-carte__termes dd { margin: var(--e-1) 0 0; color: var(--texte-fort); font-size: var(--t-3); font-variant-numeric: tabular-nums; }
#quetes.page .quete-carte__cible { margin: 0; color: var(--texte); font-size: var(--t-3); }
#quetes.page .quete-carte__gestes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
#quetes.page .quete-carte__gestes button { min-height: 2.75rem; padding-inline: var(--e-4); }
#quetes.page .quete-carte__renoncer.est-confirme { border-color: #a8392c; color: #f3c9bd; }
#quetes.page .quetes-en-cours__vide { margin: 0; padding: var(--e-4); border-left: 2px solid var(--or-fonce); color: var(--texte); font-size: var(--t-3); line-height: 1.5; background: color-mix(in srgb, var(--pierre-0) 40%, transparent); }
#quetes.page .quetes-finies { margin-top: var(--e-4); }
#quetes.page .quetes-finies summary { min-height: 2.75rem; color: var(--or); cursor: pointer; }
#quetes.page .quetes-finies ul { list-style: none; margin: 0; padding: 0; }
/* Les colonnes se partagent entre les lignes (subgrid) : titre, donneur, issue et pertes alignés d’une dénouée à l’autre. */
#quetes.page .quetes-finies__liste { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(8rem, 1fr) auto auto; column-gap: var(--e-3); }
#quetes.page .quetes-finies__ligne { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: var(--e-1) var(--e-3); align-items: center; padding: var(--e-2) var(--e-3); border-bottom: var(--filet-cuir); font-size: var(--t-3); }
#quetes.page .quetes-finies__ligne strong { color: var(--texte-fort); }
#quetes.page .quetes-finies__ligne.est-tenue span:nth-of-type(2) { color: var(--or-vif); }
#quetes.page .quetes-finies__ligne :is(.est-perte),
#quetes.page .quetes-finies__ligne:is(.est-manquee, .est-renoncee) span:nth-of-type(2) { color: #e39a88; }
/* La parole (tranche 3) : le gage de la quête en cours, celui des dénouées sous la perte, les donneurs méfiants. */
#quetes.page .quete-carte__gage { margin: 0; padding: var(--e-1) var(--e-3); border-left: 2px solid var(--or); color: var(--texte-fort); font-size: var(--t-3); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--or-fonce) 14%, transparent); }
#quetes.page .quetes-finies__ligne > .quetes-finies__gage { grid-column: -2 / -1; }
#quetes.page .quetes-finies__ligne > .quetes-finies__gage.est-gain { color: var(--or-vif); }
#quetes.page .quetes-finies .quetes-mefiance { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-3); list-style: none; display: grid; gap: var(--e-1); border-left: 2px solid #a8392c; color: var(--texte); font-size: var(--t-3); line-height: 1.45; background: color-mix(in srgb, #5e0f10 16%, transparent); }
#quetes.page .quetes-finies .quetes-mefiance > .est-perte { color: #e39a88; }
@media (max-width: 42rem) {
  #quetes.page .quete-carte { padding: var(--e-3) var(--e-3) var(--e-3) calc(var(--e-3) + 6px); }
  #quetes.page .quete-carte__termes { grid-template-columns: minmax(0, 1fr); }
  #quetes.page .quete-carte__gestes button { flex: 1 1 100%; }
  /* Le titre et l'issue en tête, le donneur dessous : un nom de Meereen (« Mhazdan de la pyramide de Rhaez ») cassait
     « Tenue le jour 3 » sur deux lignes (07/10/2026). */
  #quetes.page .quetes-finies__liste { display: block; }
  #quetes.page .quetes-finies__ligne { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e-1); }
  #quetes.page .quetes-finies__ligne > span:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  #quetes.page .quetes-finies__ligne > span:nth-of-type(2) { grid-column: 2; grid-row: 1; white-space: nowrap; }
  #quetes.page .quetes-finies__ligne > :is(.est-perte, .quetes-finies__gage) { grid-column: 1 / -1; }
}