/* Styles des composants — consomme uniquement les variables de theme.css. */

html, body {
  height: 100%;
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-principale);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
}

html:has(.sequence-boot),
html:has(.menu-principal--depuis-boot) {
  overflow: hidden;
}

.jeu {
  display: grid;
  grid-template-columns: 1fr var(--largeur-panneau);
  grid-template-rows: 1fr auto;
  height: 100vh;
  transition: grid-template-columns var(--duree-transition) ease;
  background: var(--couleur-fond);
  background-image:
    radial-gradient(
      ellipse 90% 55% at 38% 0%,
      color-mix(in srgb, var(--couleur-surface) 22%, transparent),
      transparent 62%
    ),
    radial-gradient(
      ellipse 50% 40% at 12% 88%,
      color-mix(in srgb, var(--couleur-fond-panneau) 55%, transparent),
      transparent 70%
    );
}

.jeu:has(.panneau--replie) {
  grid-template-columns: 1fr var(--largeur-panneau-replie);
}

/* --- Colonne narrative : scène sticky + journal scrollable --- */

.colonne-narrative {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  max-width: var(--largeur-colonne-jeu);
  margin-inline: auto;
}

/* Colonne de lecture unique : bannière, repère et prose partagent la même largeur. */
.colonne-narrative__lecture {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: var(--largeur-journal-max);
  margin-inline: auto;
}

.scene {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--couleur-fond-bandeau);
  border-bottom: 1px solid color-mix(in srgb, var(--couleur-bordure) 85%, transparent);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--couleur-texte-attenue) 6%, transparent),
    0 10px 24px color-mix(in srgb, var(--couleur-fond) 45%, transparent);
}

.scene.scene--combat {
  background: color-mix(in srgb, var(--couleur-fond) 55%, var(--couleur-fond-bandeau));
  padding: var(--espacement-sm) var(--espacement-md) var(--espacement-xs);
}

.scene.scene--combat .journal__bloc--combat-visuels {
  margin-bottom: 0;
}

.repere-lieu {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0.45rem var(--espacement-lg) 0.35rem;
  box-sizing: border-box;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--couleur-texte-attenue) 45%, var(--couleur-texte-vif));
  border-bottom: 1px solid color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
  background: color-mix(in srgb, var(--couleur-fond) 40%, var(--couleur-fond-bandeau));
}

.repere-lieu[hidden] {
  display: none;
}

.repere-lieu__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.repere-lieu__zone {
  color: var(--couleur-texte-vif);
  font-weight: 700;
}

.repere-lieu__sep {
  color: var(--couleur-texte-attenue);
  opacity: 0.7;
}

.repere-lieu__salle {
  color: color-mix(in srgb, var(--couleur-texte) 40%, var(--couleur-texte-vif));
}

.scene--vide,
.scene[hidden] {
  display: none;
  border: none;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.scene .journal__bandeau {
  width: 100%;
}

.scene .journal__bloc--bandeau,
.scene .journal__bloc--illustration {
  margin: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* --- Journal (texte scrollable sous la scène) --- */

.journal {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  padding: var(--espacement-md) var(--espacement-lg) var(--espacement-lg);
  scrollbar-color: var(--couleur-bordure) transparent;
}

.journal__bloc {
  margin: 0 0 var(--espacement-sm) 0;
  color: var(--couleur-texte);
}

.journal__bloc--narration {
  color: var(--couleur-texte-vif);
  line-height: 1.7;
  padding: 0 0 var(--espacement-xs);
}

.journal__bloc--narration .journal__paragraphe--suite {
  margin-top: 0.85em;
  padding-top: 0;
  border-top: none;
}

.createur-personnage .journal__bloc--narration {
  color: color-mix(in srgb, var(--couleur-texte-vif) 88%, var(--couleur-texte-chaud) 12%);
}

.journal__bloc--prologue {
  color: var(--couleur-texte-vif);
  line-height: 1.7;
  font-style: italic;
  background: color-mix(in srgb, var(--couleur-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  border-left: 3px solid var(--couleur-texte-chaud);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-md) var(--espacement-lg);
  margin-bottom: var(--espacement-md);
}

.journal__bloc--continuer {
  margin: var(--espacement-sm) 0 var(--espacement-md);
  padding: 0.15rem 0;
  text-align: center;
  color: var(--couleur-texte-attenue);
  font-size: 0.8rem;
  font-style: italic;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  background: transparent;
  user-select: none;
}

.journal__bloc--continuer:hover,
.journal__bloc--continuer:focus,
.journal__bloc--continuer:focus-visible {
  color: var(--couleur-texte-vif);
  outline: none;
}

.journal__bloc--continuer::after {
  content: ' ▾';
  display: inline;
  animation: journal-continuer-pulse 1.8s ease-in-out infinite;
}

@keyframes journal-continuer-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .journal__bloc--continuer::after {
    animation: none;
    opacity: 0.85;
  }
}

.journal__bloc--observation,
.journal__bloc--evenement_entree,
.journal__bloc--normal,
.journal__bloc--systeme {
  color: var(--couleur-texte);
  background: color-mix(in srgb, var(--couleur-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
  border-left: 3px solid var(--couleur-systeme);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--observation,
.journal__bloc--evenement_entree {
  font-style: italic;
}

.journal__bloc--erreur {
  color: var(--couleur-erreur);
  font-style: italic;
  background: color-mix(in srgb, var(--couleur-erreur) 8%, var(--couleur-surface));
  border: 1px solid color-mix(in srgb, var(--couleur-erreur) 35%, var(--couleur-bordure));
  border-left: 3px solid var(--couleur-erreur);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--combat {
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
  border-left: 3px solid var(--couleur-systeme);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--combat_creature {
  color: var(--couleur-texte-vif);
  background: var(--couleur-fond-combat-creature);
  border: 1px solid var(--couleur-bordure-combat-creature);
  border-left: 3px solid var(--couleur-accent-clair);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--combat_joueur {
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
  border-left: 3px solid var(--couleur-systeme);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--combat-visuels {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-xs);
  margin-bottom: var(--espacement-md);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.journal__combat-scene-titre {
  margin: 0;
  padding-bottom: var(--espacement-xs);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-attenue);
  border-bottom: none;
}

.journal__combat-scene-rang {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--espacement-xl);
  flex-wrap: wrap;
  padding: var(--espacement-sm) 0 var(--espacement-xs);
  background: transparent;
  border: none;
  border-radius: 0;
}

.journal__creature-sprite-image {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.journal__creature-sprite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacement-xs);
  min-width: 5.5rem;
  transform-origin: bottom center;
}

.journal__creature-plaque {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 8rem;
}

.journal__creature-nom {
  margin: 0;
  padding-top: var(--espacement-xs);
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--couleur-texte-attenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 80%, transparent);
}

.journal__creature-pv-track {
  display: none;
}

.journal__creature-pv-fill {
  height: 100%;
  width: 100%;
  background: var(--couleur-pv);
  transform-origin: left center;
  transition: transform var(--duree-pv-tween) ease-out;
}

.journal__creature-pv-fill--bas { background: var(--couleur-pv-bas); }
.journal__creature-pv-fill--critique { background: var(--couleur-pv-critique); }

.journal__degats-flottants {
  position: absolute;
  left: 50%;
  top: 0.15rem;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--couleur-accent-clair);
  font-size: 0.85rem;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 1px 0 var(--couleur-fond);
  animation: degats-flottants 700ms ease-out forwards;
}

@keyframes degats-flottants {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -1.6rem);
  }
}

.journal__creature-cadre {
  position: relative;
  display: block;
  line-height: 0;
}

/* Flash 1 frame — lumière froide de la palette (pas de blanc) */
.journal__creature-sprite--flash .journal__creature-cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--couleur-flash);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: creature-flash-voile var(--duree-flash-sprite) steps(1, end);
}

@keyframes creature-flash-voile {
  0%, 100% { opacity: 0; }
  1%, 99% { opacity: 0.9; }
}

.journal__creature-sprite--vaincue {
  animation: creature-vaincue var(--transition-creature-defaite) ease-in forwards;
  pointer-events: none;
}

/* Espace réservé après défaite — le sprite reste dans le flux pour éviter les sauts de texte. */
.journal__creature-sprite--defaite {
  opacity: 0;
  visibility: hidden;
  transform: none;
  filter: none;
  pointer-events: none;
}

@keyframes creature-vaincue {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
    filter: brightness(1);
  }
  18% {
    filter: brightness(2.2) contrast(0.85);
    transform: translateY(-8px) scale(1.06, 1.06);
  }
  42% {
    opacity: 1;
    filter: brightness(0.45);
    transform: translateY(6px) scale(1, 0.65);
  }
  100% {
    opacity: 0;
    transform: translateY(48px) scale(0.55, 0.12);
    filter: brightness(0.15);
  }
}

.journal__bloc--mort {
  color: var(--couleur-erreur);
  font-weight: bold;
}
.journal__bloc--dialogue {
  color: var(--couleur-texte-vif);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--couleur-surface-elevee) 55%, transparent) 0%,
      color-mix(in srgb, var(--couleur-surface) 78%, transparent) 100%
    );
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 80%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--couleur-systeme) 70%, var(--couleur-texte-attenue));
  border-radius: var(--rayon-surface);
  padding: var(--espacement-md);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--couleur-fond) 45%, transparent);
}

.journal__bloc--voyage {
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-left: 3px solid var(--couleur-systeme);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--commerce {
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
  border-left: 3px solid var(--couleur-monnaie);
  border-radius: var(--rayon-surface);
  padding: var(--espacement-sm) var(--espacement-md);
}

.journal__bloc--illustration {
  margin: 0 0 var(--espacement-md) 0;
}

/* --- Bandeau de salle (affiché dans #scene, pas dans le flux texte) --- */

.journal__bloc--bandeau {
  margin: 0;
  padding: 0;
  background: var(--couleur-fond-bandeau);
}

.journal__bandeau {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--couleur-fond-bandeau);
  overflow: hidden;
  min-height: 4rem;
}

/* Vignette latérale : adoucit uniquement le letterbox (ne recouvre pas le sprite) */
.journal__bandeau::before,
.journal__bandeau::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.75rem;
  pointer-events: none;
  z-index: 1;
}

.journal__bandeau::before {
  left: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--couleur-fond-bandeau) 70%, transparent),
    transparent
  );
}

.journal__bandeau::after {
  right: 0;
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--couleur-fond-bandeau) 70%, transparent),
    transparent
  );
}

.journal__bandeau-interieur {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  z-index: 0;
  line-height: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--couleur-bordure) 55%, transparent),
    0 8px 24px color-mix(in srgb, var(--couleur-fond) 65%, transparent);
}

.journal__bandeau-image {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- Portraits dialogue --- */

.journal__bloc--dialogue-portrait {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--couleur-surface-elevee) 62%, transparent) 0%,
      color-mix(in srgb, var(--couleur-surface) 84%, transparent) 100%
    );
}

.journal__dialogue-corps {
  display: flex;
  gap: var(--espacement-md);
  align-items: flex-start;
}

.journal__dialogue-portrait-col {
  flex-shrink: 0;
}

.journal__portrait-image {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--couleur-bordure);
}

.journal__dialogue-nom {
  font-weight: bold;
  color: var(--couleur-texte-vif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: var(--espacement-sm);
}

.journal__dialogue-texte-col {
  flex: 1;
  min-width: 0;
}

.journal__bloc--dialogue .journal__paragraphe:not(.journal__paragraphe--actions) {
  color: var(--couleur-texte-vif);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 62ch;
}

.journal__dialogue-invite {
  display: block;
  width: 100%;
  margin: 0 0 var(--espacement-xs) 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-attenue);
}

.journal__bloc--dialogue .journal__paragraphe--actions,
.journal__bloc--dialogue .journal__paragraphe--dialogue-choix {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: var(--espacement-md);
  padding-top: var(--espacement-sm);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
}

.journal__bloc--dialogue .journal__paragraphe--boutique {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  margin-top: var(--espacement-sm);
  padding: 0;
  background: none;
  border: none;
}

/* --- Icônes inline --- */

.journal__icone-inline {
  display: inline-block;
  vertical-align: text-bottom;
  margin: 0 0.15em;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- Illustrations sprite (objets) --- */

.journal__bloc--sprite {
  display: flex;
  justify-content: center;
  margin-bottom: var(--espacement-md);
}

.journal__illustration-sprite-image {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--couleur-bordure);
}

/* --- Transitions --- */

.journal__bloc--entree {
  animation: journal-bloc-entree var(--transition-bloc) var(--courbe-bloc) both;
}

@keyframes journal-bloc-entree {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journal__voile-nettoyage {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 10;
  pointer-events: none;
}

.journal__voile-nettoyage::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--couleur-fond);
  opacity: 0;
  transition: opacity calc(var(--transition-scene) / 2) var(--courbe-scene);
  pointer-events: none;
}

.journal__voile-nettoyage--actif::after {
  opacity: 1;
}

.journal__voile-nettoyage--sortie::after {
  opacity: 0;
  transition: opacity calc(var(--transition-scene) / 2) var(--courbe-scene);
}

.sprite-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.debug-sprites-overlay {
  position: fixed;
  bottom: var(--espacement-sm);
  left: var(--espacement-sm);
  z-index: 100;
  padding: var(--espacement-xs) var(--espacement-sm);
  background: var(--superposition-scrim);
  color: var(--couleur-texte-attenue);
  font-size: 0.75rem;
  border-radius: 3px;
  pointer-events: none;
}

.inventaire__item-icone {
  vertical-align: text-bottom;
  margin-right: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
  .journal__bloc--entree {
    animation: none;
  }

  .journal__bloc--combat-visuels.journal__bloc--entree {
    animation: none;
  }

  .journal__creature-sprite--vaincue {
    animation: none;
  }

  .journal__creature-sprite--defaite {
    opacity: 0;
    visibility: hidden;
  }

  .journal__creature-sprite--flash .journal__creature-cadre::after,
  .journal__degats-flottants,
  .journal__creature-pv-fill,
  .panneau__pv-fill {
    animation: none;
    transition: none;
  }

  .journal__voile-nettoyage::after {
    transition: none;
  }
}

.journal__illustration {
  margin: 0;
  display: flex;
  justify-content: center;
}

.journal__illustration-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 80%, transparent);
  background: var(--couleur-fond-sombre);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--couleur-fond) 55%, transparent);
}

.journal__paragraphe {
  margin: 0;
}

.journal__paragraphe--suite {
  margin-top: var(--espacement-sm);
  padding-top: var(--espacement-sm);
  border-top: 1px solid var(--couleur-bordure);
}

.journal__paragraphe--chemins {
  color: var(--couleur-texte-attenue);
  margin-top: var(--espacement-md);
  padding-top: var(--espacement-sm);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
  font-size: 0.92rem;
}

.journal__chemins-shell {
  margin-top: var(--espacement-md);
  padding-top: var(--espacement-sm);
  border: none;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 50%, transparent);
}

.journal__chemins {
  margin-top: var(--espacement-sm);
  padding-top: var(--espacement-xs);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 50%, transparent);
}

.journal__chemins-shell > .journal__chemins {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.journal__chemins-shell > .journal__chemins + .journal__chemins,
.journal__chemins-shell > .journal__chemins + .journal__chemins-colonnes {
  margin-top: var(--espacement-sm);
  padding-top: var(--espacement-xs);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 45%, transparent);
}

.journal__chemins + .journal__chemins {
  margin-top: var(--espacement-xs);
  padding-top: var(--espacement-xs);
  border-top: none;
}

.journal__chemins-titre {
  margin: 0 0 0.4em;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--couleur-texte-attenue) 70%, var(--couleur-texte-vif));
  line-height: 1.2;
}

.journal__chemins-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.journal__chemins-item {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--couleur-texte);
  font-size: 0.9rem;
  line-height: 1.35;
  break-inside: avoid;
}

.journal__chemins-item .journal__gras {
  color: var(--couleur-texte-vif);
  font-weight: 700;
}

/* Directions : boutons dominants avec raccourcis */
.journal__chemins--directions .journal__chemins-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.journal__chemins--directions .journal__chemins-item:first-child {
  grid-column: 1 / -1;
}

.journal__chemin {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 80%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--couleur-surface) 55%, transparent);
  color: var(--couleur-texte-vif);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background var(--duree-transition) ease,
    border-color var(--duree-transition) ease,
    opacity var(--duree-transition) ease;
}

.journal__chemin:hover:not(:disabled),
.journal__chemin:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--couleur-surface-elevee) 70%, var(--couleur-fond-panneau));
  border-color: color-mix(in srgb, var(--couleur-texte-attenue) 40%, var(--couleur-bordure));
  outline: none;
}

.journal__chemin--lieu:hover:not(:disabled) .journal__chemin-fleche,
.journal__chemin--lieu:focus-visible:not(:disabled) .journal__chemin-fleche {
  opacity: 1;
}

.journal__chemin--direction {
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--couleur-surface-elevee) 40%, var(--couleur-fond-panneau));
}

/* Sortie secondaire (ex. sortir) : reste discrète, hover neutre sans « highlight » */
.journal__chemin--secondaire {
  opacity: 1;
  color: color-mix(in srgb, var(--couleur-texte-vif) 55%, var(--couleur-texte-attenue));
  background: transparent;
  border-color: color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
}

.journal__chemin--secondaire .journal__chemin-label {
  font-weight: 600;
  color: color-mix(in srgb, var(--couleur-texte-vif) 60%, var(--couleur-texte-attenue));
}

.journal__chemin--secondaire .journal__chemin-raccourci {
  opacity: 0.65;
  border-color: color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  color: var(--couleur-texte-attenue);
}

.journal__chemin--secondaire:hover:not(:disabled),
.journal__chemin--secondaire:focus-visible:not(:disabled) {
  opacity: 1;
  background: color-mix(in srgb, var(--couleur-surface) 35%, transparent);
  border-color: color-mix(in srgb, var(--couleur-bordure) 85%, transparent);
  color: color-mix(in srgb, var(--couleur-texte-vif) 65%, var(--couleur-texte-attenue));
}

.journal__chemin--visite {
  color: color-mix(in srgb, var(--couleur-texte-vif) 72%, var(--couleur-texte-attenue));
}

.journal__chemin--bloque {
  opacity: 0.45;
  cursor: not-allowed;
}

.journal__chemin--bloque:hover,
.journal__chemin--bloque:focus-visible {
  background: transparent;
  border-color: color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
  opacity: 0.45;
}

.journal__chemin-raccourci {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.2em;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 90%, var(--couleur-texte-vif));
  border-radius: 2px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-fond) 50%, transparent);
}

.journal__chemin-marqueur {
  flex: 0 0 auto;
  color: var(--couleur-avertissement-clair);
  font-size: 0.75em;
  line-height: 1;
}

.journal__chemin--visite .journal__chemin-marqueur {
  color: color-mix(in srgb, var(--couleur-texte-attenue) 80%, var(--couleur-texte));
}

.journal__chemin-marqueur--inline {
  margin-left: 0.35em;
}

.journal__chemin-corps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
}

.journal__chemin-label {
  font-weight: 700;
  color: var(--couleur-texte-vif);
}

.journal__chemin--visite .journal__chemin-label {
  font-weight: 600;
  color: color-mix(in srgb, var(--couleur-texte-vif) 75%, var(--couleur-texte));
}

.journal__chemin-descripteur {
  color: color-mix(in srgb, var(--couleur-texte-attenue) 40%, var(--couleur-texte));
  font-size: 0.88em;
  font-weight: 400;
}

.journal__chemin-fleche {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--couleur-texte-attenue);
  transition: opacity var(--duree-transition) ease;
}

.journal__chemins-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  margin-top: var(--espacement-sm);
  padding-top: var(--espacement-xs);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 45%, transparent);
}

.journal__chemins-colonnes .journal__chemins {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.journal__chemins-colonnes .journal__chemin--lieu {
  border: none;
  background: transparent;
  padding: 0.2rem 0.35rem;
  border-radius: 2px;
}

.journal__chemins-colonnes .journal__chemin--lieu:hover:not(:disabled),
.journal__chemins-colonnes .journal__chemin--lieu:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--couleur-surface-elevee) 55%, transparent);
}

.journal__chemins-legende {
  margin: var(--espacement-sm) 0 0;
  padding-top: var(--espacement-xs);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 40%, transparent);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--couleur-texte-attenue) 70%, var(--couleur-texte));
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .journal__chemins-colonnes {
    grid-template-columns: 1fr;
  }

  .journal__chemins--directions .journal__chemins-liste {
    grid-template-columns: 1fr;
  }

  .journal__chemins--directions .journal__chemins-item:first-child {
    grid-column: auto;
  }
}

.journal__gras {
  font-weight: bold;
  color: var(--couleur-texte-vif);
  letter-spacing: 0.02em;
}

.journal__bloc--narration > .journal__paragraphe:first-child .journal__gras:first-child {
  display: inline;
  font-size: 1.05em;
  letter-spacing: 0.04em;
}

.journal__couleur--accent { color: var(--couleur-accent-clair); }
.journal__couleur--attenue { color: var(--couleur-texte-attenue); }
.journal__couleur--erreur { color: var(--couleur-erreur); }
.journal__couleur--vif { color: var(--couleur-texte-vif); }
.journal__couleur--succes { color: var(--couleur-succes); }

.journal__action {
  display: inline;
  margin: 0 0.1em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--couleur-bordure);
  border-radius: 3px;
  background: var(--couleur-fond-suggestion);
  color: var(--couleur-texte-vif);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  vertical-align: baseline;
  transition: background var(--duree-transition) ease, color var(--duree-transition) ease, border-color var(--duree-transition) ease;
}

button.journal__action.journal__chemin {
  display: flex;
  width: 100%;
  margin: 0;
  vertical-align: stretch;
}

.journal__paragraphe--actions .journal__action {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0.2em 0.55em;
  text-align: left;
  border-radius: 3px;
  background: var(--couleur-fond-suggestion);
  border-color: var(--couleur-bordure);
}

.journal__paragraphe--dialogue-choix .journal__action--choix {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 85%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--couleur-surface-elevee) 42%, var(--couleur-fond-panneau));
  color: var(--couleur-texte-vif);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duree-transition) ease,
    border-color var(--duree-transition) ease,
    color var(--duree-transition) ease;
}

.journal__paragraphe--dialogue-choix .journal__action--choix:hover:not(:disabled),
.journal__paragraphe--dialogue-choix .journal__action--choix:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--couleur-surface-elevee) 72%, var(--couleur-fond-panneau));
  border-color: color-mix(in srgb, var(--couleur-texte-attenue) 45%, var(--couleur-bordure));
  color: var(--couleur-texte-vif);
  outline: none;
  box-shadow: var(--ombre-focus);
}

.journal__action-index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.2em;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 90%, var(--couleur-texte-vif));
  border-radius: 2px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-fond) 50%, transparent);
}

.journal__action-libelle {
  flex: 1 1 auto;
  min-width: 0;
}

.journal__action-marqueur {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--couleur-texte-attenue) 85%, var(--couleur-texte));
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.85;
}

.journal__paragraphe--dialogue-choix .journal__action--separateur {
  margin-top: var(--espacement-sm);
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.journal__paragraphe--dialogue-choix .journal__action--fin,
.journal__paragraphe--dialogue-choix .journal__action--retour {
  color: color-mix(in srgb, var(--couleur-texte-vif) 62%, var(--couleur-texte-attenue));
  background: transparent;
  border-color: color-mix(in srgb, var(--couleur-bordure) 60%, transparent);
}

.journal__paragraphe--dialogue-choix .journal__action--fin:hover:not(:disabled),
.journal__paragraphe--dialogue-choix .journal__action--fin:focus-visible:not(:disabled),
.journal__paragraphe--dialogue-choix .journal__action--retour:hover:not(:disabled),
.journal__paragraphe--dialogue-choix .journal__action--retour:focus-visible:not(:disabled) {
  color: var(--couleur-texte-vif);
  background: color-mix(in srgb, var(--couleur-surface) 40%, transparent);
  border-color: color-mix(in srgb, var(--couleur-bordure) 90%, transparent);
}

.journal__paragraphe--dialogue-choix .journal__action--deja {
  color: color-mix(in srgb, var(--couleur-texte-vif) 68%, var(--couleur-texte-attenue));
  background: color-mix(in srgb, var(--couleur-fond-suggestion) 55%, transparent);
  border-color: color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
}

.journal__paragraphe--dialogue-choix .journal__action--deja .journal__action-libelle {
  color: inherit;
}

.journal__paragraphe--dialogue-choix .journal__action--deja:hover:not(:disabled),
.journal__paragraphe--dialogue-choix .journal__action--deja:focus-visible:not(:disabled) {
  color: var(--couleur-texte);
  border-color: var(--couleur-texte-attenue);
  background: var(--couleur-fond-suggestion);
}

.journal__paragraphe--actions .journal__action:hover:not(:disabled),
.journal__paragraphe--actions .journal__action:focus-visible:not(:disabled) {
  background: var(--couleur-surface-elevee);
  border-color: var(--bordure-focus);
  color: var(--couleur-texte-vif);
}

.journal__paragraphe--boutique .journal__action {
  display: block;
  width: 100%;
  padding: 0.28em 0.55em;
}

.journal__action--commerce {
  color: var(--couleur-monnaie);
  border-color: color-mix(in srgb, var(--couleur-monnaie) 35%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-monnaie) 6%, var(--couleur-fond-suggestion));
}

.journal__action--commerce:hover:not(:disabled),
.journal__action--commerce:focus-visible:not(:disabled) {
  color: var(--couleur-texte-vif);
  border-color: color-mix(in srgb, var(--couleur-monnaie) 55%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-monnaie) 12%, var(--couleur-surface-elevee));
}

.journal__paragraphe--dialogue-choix .journal__action--commerce {
  color: var(--couleur-monnaie);
  border-color: color-mix(in srgb, var(--couleur-monnaie) 40%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-monnaie) 8%, var(--couleur-fond-suggestion));
}

.journal__action--vendre {
  color: var(--couleur-succes);
  border-color: color-mix(in srgb, var(--couleur-succes) 35%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-succes) 6%, var(--couleur-fond-suggestion));
}

.journal__action--vendre:hover:not(:disabled),
.journal__action--vendre:focus-visible:not(:disabled) {
  color: var(--couleur-texte-vif);
  border-color: color-mix(in srgb, var(--couleur-succes) 55%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-succes) 12%, var(--couleur-surface-elevee));
}

.journal__action--repos {
  color: var(--couleur-succes);
  border-color: color-mix(in srgb, var(--couleur-succes) 55%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-succes) 12%, var(--couleur-fond-suggestion));
}

.journal__action--repos:hover:not(:disabled),
.journal__action--repos:focus-visible:not(:disabled) {
  color: var(--couleur-succes);
  border-color: var(--couleur-succes);
  background: color-mix(in srgb, var(--couleur-succes) 22%, var(--couleur-fond-suggestion));
}

.inventaire__tag-nourriture {
  flex-shrink: 0;
  margin-left: 0.35em;
  padding: 0 0.3em;
  border-radius: 2px;
  font-size: 0.75em;
  line-height: 1.4;
  background: color-mix(in srgb, var(--couleur-succes) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--couleur-succes) 40%, transparent);
  color: var(--couleur-succes);
}

.journal__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.journal__action--consomme:disabled {
  cursor: default;
}

button.journal__action.journal__chemin--bloque:disabled {
  cursor: not-allowed;
}

.journal__action--deja {
  color: var(--couleur-texte-attenue);
  border-color: color-mix(in srgb, var(--couleur-bordure) 70%, var(--couleur-texte-attenue));
  background: color-mix(in srgb, var(--couleur-fond-suggestion) 80%, var(--couleur-fond-panneau));
}

.journal__action--deja:hover:not(:disabled),
.journal__action--deja:focus-visible:not(:disabled) {
  color: var(--couleur-texte);
  border-color: var(--couleur-texte-attenue);
  background: var(--couleur-fond-suggestion);
}

.journal__action:hover:not(:disabled),
.journal__action:focus-visible:not(:disabled) {
  background: var(--couleur-surface-elevee);
  border-color: var(--bordure-focus);
  color: var(--couleur-texte-vif);
  outline: none;
}

button.journal__action.journal__chemin--secondaire:hover:not(:disabled),
button.journal__action.journal__chemin--secondaire:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--couleur-surface) 35%, transparent);
  border-color: color-mix(in srgb, var(--couleur-bordure) 85%, transparent);
  color: color-mix(in srgb, var(--couleur-texte-vif) 65%, var(--couleur-texte-attenue));
}

button.journal__action.journal__chemin--bloque:hover,
button.journal__action.journal__chemin--bloque:focus-visible,
button.journal__action.journal__chemin--bloque:disabled:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
  color: color-mix(in srgb, var(--couleur-texte-vif) 55%, var(--couleur-texte-attenue));
}

.journal__texte {
  display: block;
}

/* Paragraphes / chemins pas encore révélés (machine à écrire immersive). */
.journal__paragraphe--attente,
.journal__chemins--attente,
.journal__chemins-shell--attente {
  display: none;
}

.journal__reveal--masque {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .journal__paragraphe--attente,
  .journal__chemins--attente,
  .journal__chemins-shell--attente,
  .journal__reveal--masque {
    display: revert !important;
    visibility: visible;
  }
}

.journal__bloc--continuer-paragraphe {
  margin-top: var(--espacement-xs, 0.35rem);
  margin-bottom: var(--espacement-sm);
}

/* --- Panneau d'état --- */

.panneau {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--couleur-surface) 28%, var(--couleur-fond-panneau)),
      var(--couleur-fond-panneau) 7rem
    );
  border-left: 1px solid var(--couleur-bordure);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--couleur-texte-attenue) 4%, transparent);
  overflow: hidden;
  transition: width var(--duree-transition) ease;
}

.panneau__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacement-sm);
  flex-shrink: 0;
  padding: var(--espacement-sm) var(--espacement-md);
  border-bottom: 1px solid var(--couleur-bordure);
  background: color-mix(in srgb, var(--couleur-surface) 55%, var(--couleur-fond-panneau));
}

.panneau__titre {
  margin: 0;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-texte-vif);
}

.panneau--replie .panneau__corps,
.panneau--replie .panneau__joueur,
.panneau--replie .panneau__titre {
  display: none;
}

.panneau__corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--espacement-md);
  scrollbar-color: var(--couleur-bordure) var(--couleur-fond-panneau);
}

.panneau__inventaire {
  list-style: none;
  padding: 0;
  margin: var(--espacement-sm) 0 0 0;
}

.panneau__inventaire li {
  padding: var(--espacement-xs) 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.panneau__inventaire-vide {
  margin: var(--espacement-lg) 0 0;
  padding: var(--espacement-md);
  text-align: center;
  color: var(--couleur-texte-attenue);
  font-size: 0.85rem;
  font-style: italic;
  border: 1px dashed color-mix(in srgb, var(--couleur-bordure) 80%, transparent);
  border-radius: var(--rayon-surface);
  background: color-mix(in srgb, var(--couleur-fond) 35%, transparent);
}

/* --- Inventaire (panneau) --- */

.inventaire__titre {
  margin: 0;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--couleur-texte-vif);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.inventaire__equipement {
  margin-bottom: var(--espacement-md);
}

.inventaire__equipement .inventaire__titre {
  margin-bottom: var(--espacement-sm);
}

.inventaire__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "arme armure"
    "acc1 acc2";
  gap: var(--espacement-sm);
  align-items: stretch;
}

.inventaire__slot {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.35rem;
  min-width: 0;
  min-height: 0;
}

.inventaire__slot--arme { grid-area: arme; }
.inventaire__slot--armure { grid-area: armure; }
.inventaire__slot--accessoire_1 { grid-area: acc1; }
.inventaire__slot--accessoire_2 { grid-area: acc2; }

.inventaire__slot-entete {
  display: flex;
  align-items: center;
  gap: var(--espacement-xs);
  min-height: 1rem;
}

.inventaire__slot-icone {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
}

.inventaire__slot-label {
  flex: 1;
  min-width: 0;
  font-size: 0.62rem;
  font-weight: bold;
  color: var(--couleur-texte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventaire__slot-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  height: 100%;
  min-height: 2.5rem;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  color: var(--couleur-texte);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--duree-transition) ease,
    background var(--duree-transition) ease,
    color var(--duree-transition) ease;
}

.inventaire__slot-zone:hover,
.inventaire__slot-zone:focus-visible {
  border-color: var(--bordure-focus);
  background: var(--couleur-surface-elevee);
  outline: none;
}

.inventaire__slot-zone--vide {
  color: var(--couleur-texte-attenue);
  background: color-mix(in srgb, var(--couleur-fond) 45%, var(--couleur-surface));
  border-color: color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
}

.inventaire__slot-zone--vide:hover,
.inventaire__slot-zone--vide:focus-visible {
  border-color: var(--couleur-texte-attenue);
  color: var(--couleur-texte);
}

.inventaire__slot-vide {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.inventaire__slot-hint {
  font-size: 0.6rem;
  color: var(--couleur-texte-attenue);
  opacity: 0.75;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.inventaire__slot-zone--equipe {
  border-color: color-mix(in srgb, var(--couleur-texte-attenue) 28%, var(--couleur-bordure));
  background: var(--couleur-fond-slot-equipe);
}

.inventaire__slot-zone--equipe:hover,
.inventaire__slot-zone--equipe:focus-visible {
  border-color: var(--bordure-focus);
  background: var(--couleur-fond-slot-equipe-hover);
}

.inventaire__slot-objet-nom {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--couleur-texte-vif);
  font-weight: bold;
}

.inventaire__slot .inventaire__menu {
  left: 0;
  right: auto;
  min-width: 100%;
}

.inventaire__poids {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  margin: 0 0 var(--espacement-md);
  padding-bottom: var(--espacement-md);
  border-bottom: 1px solid var(--couleur-bordure);
}

.inventaire__poids-val {
  flex-shrink: 0;
  min-width: 3.25rem;
  font-size: 0.72rem;
  color: var(--couleur-texte);
  font-variant-numeric: tabular-nums;
}

.inventaire__poids-track {
  flex: 1;
  height: 5px;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  overflow: hidden;
}

.inventaire__poids-fill {
  height: 100%;
  background: var(--couleur-succes);
  transition: width var(--duree-transition) ease;
}

.inventaire__poids--encombre .inventaire__poids-fill { background: var(--couleur-avertissement); }
.inventaire__poids--bloque .inventaire__poids-fill { background: var(--couleur-accent-clair); }
.inventaire__poids--encombre .inventaire__poids-val,
.inventaire__poids--bloque .inventaire__poids-val { color: var(--couleur-texte-vif); }

.inventaire__sac {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

.inventaire__entete-sac {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

.inventaire__outils {
  display: flex;
  gap: var(--espacement-xs);
  align-items: stretch;
}

.inventaire__filtre,
.inventaire__tri {
  min-width: 0;
  box-sizing: border-box;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  color: var(--couleur-texte-vif);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  transition: border-color var(--duree-transition) ease, background var(--duree-transition) ease;
}

.inventaire__filtre {
  flex: 1.4;
}

.inventaire__tri {
  flex: 1;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--couleur-texte-attenue) 50%),
    linear-gradient(135deg, var(--couleur-texte-attenue) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 7px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.4rem;
}

.inventaire__filtre::placeholder {
  color: var(--couleur-texte-attenue);
}

.inventaire__filtre:hover,
.inventaire__tri:hover {
  border-color: color-mix(in srgb, var(--couleur-texte-attenue) 40%, var(--couleur-bordure));
}

.inventaire__filtre:focus,
.inventaire__tri:focus {
  outline: none;
  border-color: var(--bordure-focus);
  background-color: var(--couleur-surface-elevee);
  box-shadow: var(--ombre-focus);
}

.inventaire__categorie {
  margin-top: var(--espacement-xs);
}

.inventaire__categorie-entete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacement-sm);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte);
  font: inherit;
  font-size: 0.78rem;
  padding: var(--espacement-xs) 0;
  cursor: pointer;
  transition: color var(--duree-transition) ease;
}

.inventaire__categorie-entete:hover,
.inventaire__categorie-entete:focus-visible {
  color: var(--couleur-texte-vif);
  outline: none;
}

.inventaire__categorie-libelle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventaire__categorie-compte {
  flex-shrink: 0;
  min-width: 1.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--rayon-surface);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte-attenue);
  font-size: 0.68rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.inventaire__liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inventaire__item {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--couleur-bordure) 65%, transparent);
}

.inventaire__item--essentiel { border-left: 2px solid var(--couleur-accent-clair); }
.inventaire__item--nouveau .inventaire__item-nom::after {
  content: ' •';
  color: var(--couleur-accent-clair);
}

.inventaire__item-bouton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--espacement-xs);
  padding: 0.45rem 0.15rem;
  background: none;
  border: none;
  border-radius: var(--rayon-surface);
  color: var(--couleur-texte);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--duree-transition) ease, color var(--duree-transition) ease;
}

.inventaire__item-bouton:hover,
.inventaire__item-bouton:focus-visible {
  background: color-mix(in srgb, var(--couleur-surface) 70%, transparent);
  color: var(--couleur-texte-vif);
  outline: none;
}

.inventaire__item-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventaire__badge-qte {
  font-size: 0.7rem;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  padding: 0 0.35em;
  border-radius: var(--rayon-surface);
  color: var(--couleur-texte-attenue);
  font-variant-numeric: tabular-nums;
}

.inventaire__pastille-nonlu {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--couleur-accent-clair);
}

.inventaire__epingle {
  color: var(--couleur-accent-clair);
  font-size: 0.7rem;
}

.inventaire__menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  background: var(--couleur-surface-elevee);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  min-width: 8rem;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--couleur-fond) 70%, transparent);
}

.inventaire__menu-action {
  display: block;
  width: 100%;
  padding: 0.45rem var(--espacement-sm);
  background: none;
  border: none;
  color: var(--couleur-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inventaire__menu-action:hover,
.inventaire__menu-action:focus-visible {
  background: var(--couleur-surface);
  color: var(--couleur-texte-vif);
  outline: none;
}

.inventaire__delta--plus { color: var(--couleur-succes); }
.inventaire__delta--moins { color: var(--couleur-erreur); }

.panneau__bascule {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  color: var(--couleur-texte);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  line-height: 1;
  transition: border-color var(--duree-transition) ease, color var(--duree-transition) ease, background var(--duree-transition) ease;
}

.panneau__bascule:hover,
.panneau__bascule:focus-visible {
  border-color: var(--bordure-focus);
  color: var(--couleur-texte-vif);
  background: var(--couleur-surface-elevee);
  outline: none;
}

/* --- Saisie --- */

.saisie {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 90%, transparent);
  padding: var(--espacement-sm) var(--espacement-lg) var(--espacement-md);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--couleur-surface-elevee) 55%, var(--couleur-surface)),
      var(--couleur-surface) 42%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--couleur-texte-vif) 5%, transparent),
    0 -10px 28px color-mix(in srgb, var(--couleur-fond) 35%, transparent);
}

.saisie__commande {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
  width: 100%;
  max-width: var(--largeur-colonne-jeu);
  margin-inline: auto;
}

.saisie__ligne {
  position: relative;
}

.saisie__ligne::before {
  content: '›';
  position: absolute;
  left: var(--espacement-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--couleur-texte-chaud);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* --- Journal des jets de dés --- */

.journal-des {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  border-radius: var(--rayon-surface);
  background: color-mix(in srgb, var(--couleur-fond) 55%, var(--couleur-surface));
  overflow: hidden;
  transition:
    border-color var(--duree-transition) ease,
    background var(--duree-transition) ease;
}

.journal-des--replie {
  border-color: transparent;
  background: transparent;
}

.journal-des--replie:not(.journal-des--vide) {
  border-color: color-mix(in srgb, var(--couleur-bordure) 45%, transparent);
  background: color-mix(in srgb, var(--couleur-fond) 40%, transparent);
}

.journal-des--replie.journal-des--vide .journal-des__bascule {
  opacity: 0.4;
}

.journal-des--replie.journal-des--vide:hover,
.journal-des--replie.journal-des--vide:focus-within {
  opacity: 1;
}

.journal-des--replie.journal-des--vide .journal-des__bascule:hover {
  opacity: 1;
  color: var(--couleur-texte-attenue);
}

.journal-des--vide .journal-des__effacer {
  visibility: hidden;
  pointer-events: none;
}

.journal-des__entete {
  display: flex;
  align-items: stretch;
  gap: var(--espacement-xs);
}

.journal-des__bascule {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--espacement-xs);
  min-width: 0;
  background: none;
  border: none;
  color: var(--couleur-texte-attenue);
  font-family: var(--police-principale);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.2rem var(--espacement-xs);
  text-align: left;
}

.journal-des:not(.journal-des--replie) .journal-des__bascule {
  padding: var(--espacement-xs) var(--espacement-sm);
  font-size: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
}

.journal-des__bascule:hover {
  color: var(--couleur-texte);
}

.journal-des__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 0.75rem;
  font-size: 0.65rem;
  line-height: 1;
  transition: transform var(--duree-transition) ease;
}

.journal-des--replie .journal-des__chevron {
  transform: rotate(-90deg);
}

.journal-des__titre {
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-des__compteur {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.05rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  border-radius: 999px;
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--couleur-texte-attenue);
}

.journal-des__effacer {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: 1px solid transparent;
  color: var(--couleur-texte-attenue);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 var(--espacement-xs);
  margin-right: var(--espacement-xs);
}

.journal-des__effacer:hover {
  color: var(--couleur-texte);
  border-color: var(--couleur-bordure);
}

.journal-des__liste {
  max-height: 5.5rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--espacement-xs) var(--espacement-sm);
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.35;
  font-family: var(--police-principale);
  color: var(--couleur-texte-attenue);
  scrollbar-color: var(--couleur-bordure) transparent;
}

.journal-des--replie .journal-des__liste {
  display: none;
}

.journal-des__item {
  padding: 0.1rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--couleur-bordure) 50%, transparent);
}

.journal-des__item:last-child {
  border-bottom: none;
}

.journal-des__item--vide {
  font-style: italic;
  border-bottom: none;
}

.journal-des__item--occulte {
  font-style: italic;
  color: color-mix(in srgb, var(--couleur-texte-attenue) 85%, var(--couleur-accent-clair));
}

.journal-des--admin .journal-des__titre::after {
  content: ' · admin';
  font-size: 0.65rem;
  color: var(--couleur-accent-clair);
  text-transform: none;
  letter-spacing: 0;
}

.saisie__champ {
  width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--couleur-fond) 88%, var(--couleur-surface));
  color: var(--couleur-texte-vif);
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 90%, transparent);
  border-radius: var(--rayon-surface);
  font-family: var(--police-principale);
  font-size: var(--taille-texte);
  padding: 0.65rem var(--espacement-sm) 0.65rem 1.6rem;
  transition:
    border-color var(--duree-transition) ease,
    box-shadow var(--duree-transition) ease,
    background var(--duree-transition) ease;
}

.saisie__champ::placeholder {
  color: var(--couleur-texte-attenue);
  opacity: 0.85;
}

.saisie__champ:focus {
  outline: none;
  border-color: var(--bordure-focus);
  background: var(--couleur-fond);
  box-shadow: var(--ombre-focus);
}

.saisie__ligne:has(.suggestions:not([hidden])) .saisie__champ {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: color-mix(in srgb, var(--couleur-bordure) 40%, transparent);
}

.suggestions {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--couleur-surface-elevee);
  border: 1px solid var(--couleur-bordure);
  border-bottom: none;
  border-radius: var(--rayon-surface) var(--rayon-surface) 0 0;
  box-shadow: 0 -6px 20px color-mix(in srgb, var(--couleur-fond) 75%, transparent);
  max-height: 9rem;
  overflow-y: auto;
  scrollbar-color: var(--couleur-bordure) transparent;
}

.suggestions__item {
  padding: 0.3rem var(--espacement-sm) 0.3rem 1.5rem;
  cursor: pointer;
  color: var(--couleur-texte);
  font-size: 0.92rem;
  border-bottom: 1px solid color-mix(in srgb, var(--couleur-bordure) 35%, transparent);
  transition: background var(--duree-transition) ease, color var(--duree-transition) ease;
}

.suggestions__item:last-child {
  border-bottom: none;
}

.suggestions__item:hover {
  background: color-mix(in srgb, var(--couleur-surface-elevee) 70%, transparent);
  color: var(--couleur-texte-vif);
}

.suggestions__item--actif {
  background: var(--couleur-surface-elevee);
  color: var(--couleur-texte-vif);
}

/* --- Indicateur de synchronisation --- */

.sync {
  position: fixed;
  top: var(--espacement-sm);
  right: var(--espacement-sm);
  font-size: 0.75rem;
  line-height: 1;
  z-index: 100;
  cursor: default;
  user-select: none;
}

.sync--ok { color: var(--couleur-succes); }
.sync--offline { color: var(--couleur-texte-attenue); opacity: 0.6; }
.sync--attente { color: var(--couleur-texte-attenue); }
.sync--cours { color: var(--couleur-accent-clair); }
.sync--erreur { color: var(--couleur-erreur); }

/* --- Boutons partagés (menu, modales, auth) --- */

.menu-principal__bouton,
.auth-forme__bouton,
.auth-modal__bouton {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--bouton-bordure);
  background: var(--bouton-fond);
  color: var(--couleur-texte);
  padding: var(--espacement-sm) var(--espacement-md);
  border-radius: var(--rayon-surface);
  transition:
    background var(--duree-transition) ease,
    border-color var(--duree-transition) ease,
    transform var(--duree-transition) ease,
    box-shadow var(--duree-transition) ease;
}

.menu-principal__bouton:hover,
.auth-forme__bouton:hover,
.auth-forme__bouton:focus-visible,
.auth-modal__bouton:hover,
.auth-modal__bouton:focus-visible {
  border-color: var(--bouton-bordure-hover);
  background: var(--bouton-fond-hover);
  box-shadow: none;
  transform: none;
}

.menu-principal__bouton--focus,
.menu-principal__bouton:focus-visible {
  border-color: var(--couleur-accent-clair);
  background: var(--bouton-fond);
  box-shadow: none;
  outline: none;
  transform: none;
}

.menu-principal__bouton--primaire.menu-principal__bouton--focus,
.menu-principal__bouton--primaire:focus-visible {
  background: var(--bouton-fond-primaire);
}

.menu-principal__bouton--primaire,
.auth-forme__bouton--primaire,
.auth-modal__bouton--primaire {
  border-color: var(--bouton-bordure-primaire);
  color: var(--couleur-texte-vif);
  background: var(--bouton-fond-primaire);
}

.menu-principal__bouton--secondaire,
.auth-forme__bouton--secondaire,
.auth-modal__bouton--secondaire {
  color: var(--couleur-texte-attenue);
}

.auth-forme__bouton--secondaire,
.auth-modal__bouton--secondaire {
  margin-top: var(--espacement-xs);
  width: 100%;
}

.menu-principal__bouton:disabled,
.auth-forme__bouton:disabled,
.auth-modal__bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--couleur-texte-attenue);
}

.menu-principal__bouton:hover:disabled,
.menu-principal__bouton--focus:disabled,
.menu-principal__bouton:focus-visible:disabled,
.auth-forme__bouton:hover:disabled,
.auth-forme__bouton:focus-visible:disabled,
.auth-modal__bouton:hover:disabled,
.auth-modal__bouton:focus-visible:disabled {
  border-color: var(--couleur-bordure);
  background: var(--couleur-fond-panneau);
  box-shadow: none;
  transform: none;
}

/* --- Modal d'authentification --- */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superposition-fond);
  backdrop-filter: blur(4px);
  padding: var(--espacement-md);
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal__carte {
  width: min(100%, 28rem);
  padding: var(--espacement-lg);
  background: var(--modal-fond-carte);
  border: 1px solid var(--modal-bordure-carte);
  border-radius: var(--rayon-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--couleur-texte-vif) 6%, transparent);
  backdrop-filter: blur(6px);
}

.auth-modal__titre {
  margin: 0 0 var(--espacement-sm);
  font-size: 1.1rem;
  color: var(--couleur-texte-vif);
}

.auth-modal__message {
  margin: 0 0 var(--espacement-sm);
  color: var(--couleur-texte-attenue);
  font-size: 0.9rem;
}

.auth-modal__forme {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

.auth-modal__label {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-xs);
  color: var(--couleur-texte);
  font-size: 0.9rem;
}

.auth-modal__label input {
  padding: var(--espacement-xs) var(--espacement-sm);
  background: var(--couleur-fond);
  color: var(--couleur-texte-vif);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  font-family: var(--police-principale);
}

.auth-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-sm);
  margin-top: var(--espacement-xs);
}

.auth-modal__bouton {
  flex: 1;
  padding: var(--espacement-xs) var(--espacement-sm);
}

/* --- Formulaire auth (menu principal ou modal) --- */

.auth-forme__titre {
  margin: 0 0 var(--espacement-md);
  font-size: 1.1rem;
  color: var(--couleur-texte-vif);
  font-weight: normal;
}

.auth-forme__message {
  margin: 0 0 var(--espacement-md);
  color: var(--couleur-texte-attenue);
  font-style: italic;
}

.auth-forme__corps {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-md);
}

.auth-forme__label {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-xs);
  color: var(--couleur-texte);
  font-size: 0.9rem;
}

.auth-forme__label input {
  font: inherit;
  padding: var(--espacement-sm);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  background: var(--couleur-fond);
  color: var(--couleur-texte-vif);
}

.auth-forme__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-sm);
}

.menu-principal__panneau--compte .auth-forme__titre {
  text-align: center;
}

.menu-principal__compte-connecte {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-md);
}

.menu-principal__compte-info {
  margin: 0;
  color: var(--couleur-texte);
}

.menu-principal__compte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-sm);
}

/* --- Ambiance sombre partagée (boot + menu) --- */

.ambiance-sombre {
  position: relative;
  overflow: hidden;
  background: var(--couleur-fond);
  background-image:
    radial-gradient(
      ellipse 120% 80% at 50% 110%,
      color-mix(in srgb, var(--couleur-surface) 18%, transparent),
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 50% 38%,
      color-mix(in srgb, var(--couleur-surface) 32%, var(--couleur-fond)),
      var(--couleur-fond) 72%
    );
}

.ambiance-sombre::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    transparent 35%,
    color-mix(in srgb, var(--couleur-fond) 55%, transparent) 100%
  );
  z-index: 0;
}

.ambiance-sombre::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  z-index: 0;
}

.ambiance-sombre__brume {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 55% 35% at 30% 60%,
      color-mix(in srgb, var(--couleur-surface) 10%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 30% at 72% 35%,
      color-mix(in srgb, var(--couleur-texte-vif) 4%, transparent),
      transparent 68%
    );
  animation: ambiance-brume 14s ease-in-out infinite alternate;
}

@keyframes ambiance-brume {
  from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: 0.55; }
  to { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 0.85; }
}

/* --- Séquence de boot --- */

.sequence-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 600ms ease;
}

.sequence-boot--sortie {
  opacity: 0;
  pointer-events: none;
}

.sequence-boot__contenu {
  position: relative;
  z-index: 1;
  width: min(36rem, calc(100% - 2 * var(--espacement-lg)));
  text-align: center;
  animation: boot-contenu-entree 900ms ease-out both;
}

.sequence-boot--pret-menu .sequence-boot__contenu {
  animation: boot-contenu-pret-menu 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes boot-contenu-entree {
  from { opacity: 0; transform: translateY(1rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes boot-contenu-pret-menu {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
  to {
    opacity: 1;
    transform: translateY(calc(-1 * var(--menu-boot-decalage-titre)));
    filter: none;
  }
}

.sequence-boot__titre,
.menu-principal__titre {
  margin: 0 0 var(--espacement-sm);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: normal;
  color: var(--couleur-texte-vif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sequence-boot__separateur,
.menu-principal__separateur {
  width: min(14rem, 60vw);
  height: 1px;
  margin: 0 auto var(--espacement-md);
  background: linear-gradient(
    90deg,
    transparent,
    var(--menu-bordure-carte) 18%,
    var(--couleur-accent-clair) 50%,
    var(--menu-bordure-carte) 82%,
    transparent
  );
  opacity: 0.75;
}

.sequence-boot__sous-titre,
.menu-principal__tagline {
  margin: 0 0 var(--espacement-lg);
  color: color-mix(in srgb, var(--couleur-texte-vif) 72%, var(--couleur-texte-attenue));
  font-style: italic;
  letter-spacing: 0.06em;
}

.sequence-boot__sous-titre {
  animation: boot-sous-titre 1.2s ease-out 0.35s both;
}

@keyframes boot-sous-titre {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

.sequence-boot__chargeur {
  width: min(10rem, 40vw);
  height: 2px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
  border-radius: 1px;
  overflow: hidden;
}

.sequence-boot__chargeur span {
  display: block;
  height: 100%;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--couleur-accent-clair),
    transparent
  );
  animation: boot-chargeur 1.1s ease-in-out infinite;
}

@keyframes boot-chargeur {
  from { transform: translateX(-120%); }
  to { transform: translateX(380%); }
}

/* --- Menu principal --- */

.jeu--menu .colonne-narrative,
.jeu--menu .journal,
.jeu--menu .panneau,
.jeu--menu .journal-des,
.jeu--menu .saisie,
.jeu--menu .sync {
  visibility: hidden;
  pointer-events: none;
}

.menu-principal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacement-lg);
  opacity: 1;
  transition: opacity var(--duree-transition) ease;
}

.menu-principal--depuis-boot {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  overflow: hidden;
}

.menu-principal[hidden] {
  display: none !important;
}

.menu-principal--entree .menu-principal__panneau--accueil {
  animation: menu-panneau-entree var(--duree-menu-entree) ease-out both;
}

.menu-principal--entree .menu-principal__entree {
  animation: menu-entree-item 420ms ease-out both;
  animation-delay: calc(180ms + var(--menu-entree-delai, 0ms));
}

.menu-principal--depuis-boot .menu-principal__panneau--accueil {
  width: min(36rem, 100%);
  animation: none;
  padding-top: 0;
  margin-top: clamp(7rem, 20vh, 11rem);
  overflow: hidden;
  max-height: none;
}

.menu-principal--depuis-boot .menu-principal__entete {
  margin-bottom: 0;
  text-align: center;
}

.menu-principal__entete--transfere {
  pointer-events: none;
  margin-bottom: 0;
  z-index: 1;
}

.menu-principal__panneau--accueil:has(> .menu-principal__entete--transfere) {
  margin-top: clamp(7rem, 20vh, 11rem);
}

.menu-principal--depuis-boot .menu-principal__avertissement,
.menu-principal--depuis-boot .menu-principal__liste {
  animation: menu-depuis-boot-monte 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.menu-principal--depuis-boot .menu-principal__avertissement {
  animation-delay: 60ms;
}

.menu-principal--depuis-boot .menu-principal__liste {
  animation-delay: 120ms;
}

.menu-principal--depuis-boot .menu-principal__entree {
  animation: menu-entree-item 420ms ease-out both;
  animation-delay: calc(300ms + var(--menu-entree-delai, 0ms));
}

@keyframes menu-depuis-boot-monte {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-panneau-entree {
  from { opacity: 0; transform: translateY(1.25rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes menu-entree {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes menu-entree-item {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ambiance-sombre__brume,
  .sequence-boot__chargeur span,
  .sequence-boot__contenu,
  .sequence-boot__sous-titre {
    animation: none;
  }

  .menu-principal,
  .menu-principal--entree .menu-principal__panneau--accueil,
  .menu-principal--entree .menu-principal__entree,
  .sequence-boot--pret-menu .sequence-boot__contenu,
  .menu-principal--depuis-boot .menu-principal__avertissement,
  .menu-principal--depuis-boot .menu-principal__liste,
  .menu-principal--depuis-boot .menu-principal__entree {
    animation: none;
    transition: none;
  }
}

.menu-principal__panneau {
  position: relative;
  z-index: 1;
  width: min(36rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
}

.menu-principal__entree[data-entree-id="langue"] {
  display: none;
}

.menu-principal__panneau--accueil,
.menu-principal__panneau--slots,
.menu-principal__panneau--langue,
.menu-principal__panneau--compte {
  padding: 0;
}

.menu-principal__entete {
  margin-bottom: var(--espacement-lg);
  text-align: center;
}

.menu-principal__sous-titre {
  margin: 0 0 var(--espacement-md);
  font-size: 1.1rem;
  color: var(--couleur-texte-vif);
  letter-spacing: 0.04em;
}

.menu-principal__avertissement {
  margin: 0 0 var(--espacement-md);
  text-align: center;
  font-size: 0.9rem;
  color: var(--couleur-texte-attenue);
  font-style: italic;
  padding: var(--espacement-sm) var(--espacement-md);
  border-left: 2px solid var(--couleur-bordure);
  background: color-mix(in srgb, var(--couleur-surface) 40%, transparent);
}

.menu-principal__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

.menu-principal__entree {
  margin: 0;
}

.menu-principal__bouton--entree {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--espacement-xs);
  cursor: pointer;
  color: var(--couleur-texte-vif);
  padding-left: var(--espacement-md);
  transition:
    border-color var(--duree-transition) ease,
    background var(--duree-transition) ease;
}

.menu-principal__bouton--entree.menu-principal__bouton--focus,
.menu-principal__bouton--entree:focus-visible {
  border-color: var(--couleur-accent-clair);
  background: var(--bouton-fond);
  box-shadow: none;
  outline: none;
}

.menu-principal__entree-detail {
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
}

.menu-principal__bouton--secondaire {
  margin-top: var(--espacement-md);
}

.menu-principal__bouton--petit {
  font-size: 0.85rem;
  padding: var(--espacement-xs) var(--espacement-sm);
}

.menu-principal__bouton--danger {
  border-color: var(--couleur-danger);
  color: var(--couleur-danger);
}

.menu-principal__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

.menu-principal__slot {
  border: 1px solid color-mix(in srgb, var(--couleur-bordure) 85%, transparent);
  padding: var(--espacement-sm);
  background: color-mix(in srgb, var(--couleur-fond-panneau) 88%, transparent);
  border-radius: var(--rayon-surface);
  transition: border-color var(--duree-transition) ease, box-shadow var(--duree-transition) ease;
}

.menu-principal__slot--focus {
  border-color: var(--couleur-accent-clair);
  box-shadow: none;
  outline: none;
}

.menu-principal__slot-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacement-xs);
  margin-bottom: var(--espacement-sm);
}

.menu-principal__slot-titre {
  color: var(--couleur-texte-vif);
}

.menu-principal__slot-meta {
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
}

.menu-principal__slot-meta--vide {
  font-style: italic;
}

.menu-principal__slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-xs);
}

.menu-principal__note {
  margin: var(--espacement-sm) 0 0;
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
  font-style: italic;
}

.menu-principal__dialogue[hidden] {
  display: none !important;
  pointer-events: none;
}

.menu-principal__dialogue {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superposition-fond);
  backdrop-filter: blur(4px);
  padding: var(--espacement-md);
}

.menu-principal__dialogue-cartouche {
  width: min(28rem, 100%);
  border: 1px solid var(--modal-bordure-carte);
  background: var(--modal-fond-carte);
  padding: var(--espacement-lg);
  border-radius: var(--rayon-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--couleur-texte-vif) 6%, transparent);
}

.menu-principal__dialogue-texte {
  margin: 0 0 var(--espacement-md);
  color: var(--couleur-texte);
}

.menu-principal__dialogue-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacement-sm);
  align-items: stretch;
}

.menu-principal__dialogue-actions .menu-principal__bouton {
  width: 100%;
}

.menu-principal__dialogue-actions:has(.menu-principal__bouton:only-child) {
  grid-template-columns: 1fr;
}

.menu-principal__dialogue-actions .menu-principal__bouton:last-child:not(:only-child):not(.menu-principal__bouton--primaire) {
  grid-column: 1 / -1;
}

.menu-principal__dialogue-actions:has(.menu-principal__bouton:nth-child(2):last-child) .menu-principal__bouton:last-child {
  grid-column: auto;
}

/* ── Créateur de personnage — scène d'ouverture type journal ── */

.createur-personnage {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacement-lg);
  box-sizing: border-box;
  background: var(--couleur-fond);
  background-image: radial-gradient(
    ellipse 90% 65% at 50% 42%,
    color-mix(in srgb, var(--couleur-surface) 28%, var(--couleur-fond)),
    var(--couleur-fond) 72%
  );
  color: var(--couleur-texte);
}

.createur-personnage[hidden] {
  display: none !important;
}

.createur-personnage__scene {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 34rem);
  max-height: min(100%, 44rem);
}

.createur-personnage__journal {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0;
}

.createur-personnage__entree {
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    opacity var(--transition-bloc) var(--courbe-bloc),
    transform var(--transition-bloc) var(--courbe-bloc);
}

.createur-personnage__entree--visible,
.createur-personnage--entree .createur-personnage__entree {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .createur-personnage__entree {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.createur-personnage__sur-titre {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--couleur-accent-clair);
}

.createur-personnage__separateur {
  width: min(10rem, 45%);
  height: 1px;
  margin: var(--espacement-sm) auto var(--espacement-md);
  background: linear-gradient(
    90deg,
    transparent,
    var(--menu-bordure-carte) 18%,
    color-mix(in srgb, var(--couleur-texte-attenue) 55%, var(--couleur-bordure)) 50%,
    var(--menu-bordure-carte) 82%,
    transparent
  );
  opacity: 0.75;
}

.createur-personnage__titre {
  margin: 0 0 var(--espacement-md);
  font-size: 1.25rem;
  font-weight: normal;
  text-align: center;
  color: color-mix(in srgb, var(--couleur-texte-vif) 82%, var(--couleur-texte-attenue));
  font-style: italic;
  letter-spacing: 0.06em;
}

.createur-personnage__intro {
  margin: 0;
  text-align: left;
}

.createur-personnage__recapitulatif {
  margin-bottom: var(--espacement-md);
}

.createur-personnage__recap {
  margin-bottom: var(--espacement-sm);
}

.createur-personnage__corps {
  margin-top: var(--espacement-md);
}

.createur-personnage__pied {
  flex: 0 0 auto;
  margin-top: var(--espacement-lg);
  border-top: 1px solid color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  padding: var(--espacement-md) 0 0;
  background: transparent;
}

.createur-personnage__saisie {
  margin-bottom: var(--espacement-md);
}

.createur-personnage__champ-nom {
  margin: 0;
  background: var(--couleur-surface);
  border-color: var(--couleur-bordure);
}

.createur-personnage__champ-nom:focus {
  border-color: var(--bordure-focus);
  box-shadow: var(--ombre-focus);
}

.createur-personnage__progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-sm);
  margin: 0 0 var(--espacement-sm);
}

.createur-personnage__point {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--couleur-texte-attenue) 35%, transparent);
  transition: background var(--duree-transition) ease, transform var(--duree-transition) ease;
}

.createur-personnage__point--active {
  background: var(--couleur-texte-vif);
  transform: scale(1.35);
}

.createur-personnage__point--faite {
  background: color-mix(in srgb, var(--couleur-texte-attenue) 70%, var(--couleur-texte-vif));
}

.createur-personnage__points {
  margin: 0 0 var(--espacement-md);
}

.createur-personnage__points--epuise {
  font-style: normal;
  color: var(--couleur-texte-attenue);
}

.createur-personnage__liste-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.createur-personnage__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacement-md);
  padding: var(--espacement-sm) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
}

.createur-personnage__stat:first-of-type {
  border-top: 1px dotted color-mix(in srgb, var(--couleur-bordure) 55%, transparent);
}

.createur-personnage__stat-infos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.createur-personnage__stat-libelle {
  color: var(--couleur-texte-vif);
  font-size: 0.95rem;
}

.createur-personnage__stat-desc {
  color: var(--couleur-texte-attenue);
  font-size: 0.78rem;
  line-height: 1.4;
  font-style: italic;
}

.createur-personnage__stat-controles {
  display: flex;
  align-items: center;
  gap: var(--espacement-xs);
  flex-shrink: 0;
}

.createur-personnage__stat-bouton {
  font: inherit;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--couleur-texte-attenue);
  padding: 0;
  line-height: 1;
}

.createur-personnage__stat-bouton:hover:not(:disabled),
.createur-personnage__stat-bouton:focus-visible:not(:disabled) {
  color: var(--couleur-texte-vif);
}

.createur-personnage__stat-bouton:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.createur-personnage__stat-valeur {
  min-width: 1.25rem;
  text-align: center;
  color: var(--couleur-texte-vif);
  font-size: 0.9rem;
}

.createur-personnage__atelier {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-md);
  align-items: center;
}

.createur-personnage__portrait-parties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacement-xs);
}

.createur-personnage__portrait-partie {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--couleur-texte-attenue);
  padding: var(--espacement-xs) var(--espacement-sm);
  border-bottom: 2px solid transparent;
  transition: color var(--duree-transition) ease, border-color var(--duree-transition) ease;
}

.createur-personnage__portrait-partie:hover,
.createur-personnage__portrait-partie:focus-visible {
  color: var(--couleur-texte-vif);
}

.createur-personnage__portrait-partie--active {
  color: var(--couleur-texte-vif);
  border-bottom-color: var(--couleur-texte-vif);
}

.createur-personnage__portrait-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.createur-personnage__portrait-apercu {
  flex-shrink: 0;
  padding: var(--espacement-md);
  border: 1px dotted color-mix(in srgb, var(--couleur-bordure) 70%, transparent);
  background: color-mix(in srgb, var(--couleur-fond-panneau) 65%, transparent);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.createur-personnage__portrait-apercu .journal__portrait-image {
  image-rendering: pixelated;
}

.createur-personnage__portrait-fleche {
  font: inherit;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  border: 1px solid var(--couleur-bordure);
  background: none;
  color: var(--couleur-texte-attenue);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  transition: color var(--duree-transition) ease, border-color var(--duree-transition) ease;
}

.createur-personnage__portrait-fleche:hover,
.createur-personnage__portrait-fleche:focus-visible {
  color: var(--couleur-texte-vif);
  border-color: var(--bordure-focus);
}

.createur-personnage__portrait-indice {
  margin: 0;
  text-align: center;
}

.createur-personnage__erreur {
  margin: var(--espacement-md) 0 0;
}

.createur-personnage__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacement-md);
}

.createur-personnage__action {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: var(--espacement-xs) 0;
  color: var(--couleur-texte-attenue);
  transition: color var(--duree-transition) ease;
}

.createur-personnage__action:hover,
.createur-personnage__action:focus-visible {
  color: var(--couleur-texte-vif);
}

.createur-personnage__action--suivant {
  margin-left: auto;
  color: var(--couleur-texte-vif);
}

.createur-personnage__action--suivant:hover,
.createur-personnage__action--suivant:focus-visible {
  color: var(--couleur-texte-vif);
}

.panneau__identite {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  margin: 0 0 var(--espacement-sm);
}

.panneau__joueur {
  flex-shrink: 0;
  margin: 0;
  padding: var(--espacement-md);
  background: color-mix(in srgb, var(--couleur-surface) 72%, var(--couleur-fond-panneau));
  border-bottom: 1px solid var(--couleur-bordure);
}

.panneau__joueur-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacement-sm) var(--espacement-md);
  align-items: start;
}

.panneau__joueur-infos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.panneau__portrait-joueur {
  flex-shrink: 0;
  image-rendering: pixelated;
  border-radius: var(--rayon-surface);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--couleur-bordure),
    0 4px 12px color-mix(in srgb, var(--couleur-fond) 45%, transparent);
}

.panneau__portrait-joueur .journal__portrait-image {
  border-color: transparent;
  display: block;
}

.panneau__nom-joueur {
  margin: 0;
  color: var(--couleur-texte-vif);
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.panneau__pv {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.panneau__pv-track {
  height: 7px;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-surface);
  overflow: hidden;
}

.panneau__pv-fill {
  height: 100%;
  width: 100%;
  background: var(--couleur-pv-ok);
  transform-origin: left center;
  transition: transform var(--duree-pv-tween) ease-out, background var(--duree-pv-tween) ease;
}

.panneau__pv-fill--bas {
  background: var(--couleur-pv-bas);
}

.panneau__pv-fill--critique {
  background: var(--couleur-pv-critique);
}

.panneau__pv-label {
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--couleur-texte);
  font-variant-numeric: tabular-nums;
}

.panneau__pv-label--bas {
  color: var(--couleur-pv-bas);
}

.panneau__pv-label--critique {
  color: var(--couleur-pv-critique);
}

.panneau__joueur-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.65rem;
  font-size: 0.72rem;
  color: var(--couleur-texte-attenue);
}

.panneau__niveau,
.panneau__xp,
.panneau__bourse {
  margin: 0;
}

.panneau__bourse {
  color: var(--couleur-monnaie);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.panneau__afflictions {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--couleur-avertissement-clair);
}

.panneau__badge-points {
  margin: 0;
  color: var(--couleur-accent-clair);
  font-size: 0.72rem;
}