/* MINUIT — panneau « Journal » du salon de l'hôte (js/journal-hote.js). Sobre : les jetons de base.css (or, bleu nuit), aucune
   animation, une seule couleur vive, le rouge, réservée aux erreurs. Aucune couche nouvelle : la pastille vit dans la barre du haut,
   le panneau dans une modale (1100). Contrastes relevés sur le fond le plus clair de la modale (#151a36) : 4,5:1 au moins. */

/* ---------- pastille du bouton 👑 Hôte : un nombre, posé sur le coin, sans pousser la barre ---------- */
.tb-host { position: relative; }
.jh-pastille { position: absolute; top: -7px; right: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; font: 600 10.5px/1 var(--font-num); letter-spacing: 0; color: var(--gold-hi); background: var(--bg-1);
  border: 1px solid var(--line-strong); pointer-events: none; }
.jh-pastille[hidden] { display: none; }
.jh-pastille.is-grave { color: #fff; background: #b8242f; border-color: #ff8a94; box-shadow: 0 0 0 2px rgba(5,6,11,.9), 0 0 12px rgba(255,90,103,.5); }
.jh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- ligne « Le journal » du salon ---------- */
.jh-entree-row { flex-wrap: wrap; gap: 8px 12px; }
.jh-compte { font-size: 12.5px; color: var(--text-dim); }
.jh-compte[data-ton="neuf"] { color: var(--gold-hi); }
.jh-compte[data-ton="grave"] { color: #ffb3ba; font-weight: 600; }
.jh-compte[data-ton="grave"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--lose); box-shadow: 0 0 8px rgba(255,90,103,.6); }

/* ---------- le panneau ---------- */
.modal.jh-modal { width: min(1120px, 100%); }
.jh { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.jh-principal { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.jh-cote { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jh-cote > * + * { border-top: 1px solid var(--line); padding-top: 12px; }
.jh-h { margin: 0; font: 600 15px/1.3 var(--font-ui); letter-spacing: .02em; color: var(--gold-hi); text-wrap: balance; }
.jh-nb { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.jh-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.jh-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jh-seg > button { height: 30px; padding: 0 12px; font-size: 12.5px; }
.jh-jeu { height: 36px; max-width: 230px; }
.jh-bloc { display: flex; flex-direction: column; gap: 8px; }
.jh-aide { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }

/* alertes : la plus récente en haut ; la liste défile seule, filtres et export restent en vue (1366×768 : tout tient sans défiler) */
.jh-liste { list-style: none; margin: 0; padding: 0; max-height: clamp(220px, calc(100vh - 300px), 680px); overflow: auto; overflow-anchor: auto;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(5,6,11,.45); scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
.jh-liste[hidden] { display: none; }
.jh-liste:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.jh-ligne { padding: 9px 12px 10px; border-top: 1px solid var(--line); }
.jh-ligne:first-child { border-top: 0; }
.jh-ligne[data-niv="erreur"], .jh-ligne[data-niv="fatal"] { background: rgba(210,50,63,.07); }
.jh-ligne.is-nouvelle { background: rgba(222,184,92,.07); }
.jh-ligne.is-nouvelle[data-niv="erreur"], .jh-ligne.is-nouvelle[data-niv="fatal"] { background: rgba(210,50,63,.12); }
.jh-l-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.jh-heure { flex: none; font-size: 12px; color: var(--text-dim); }
.jh-ligne.is-nouvelle .jh-heure::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--gold); }
.jh-niv { flex: none; padding: 0 8px; border-radius: 999px; font: 600 10.5px/1.7 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-hi); border: 1px solid var(--line-strong); background: rgba(222,184,92,.08); }
.jh-ligne[data-niv="erreur"] .jh-niv { color: #ffd9dc; border-color: rgba(255,90,103,.6); background: rgba(210,50,63,.26); }
.jh-ligne[data-niv="fatal"] .jh-niv { color: #fff; border-color: #ff8a94; background: #b8242f; }
.jh-lib { min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.jh-rafale .jh-lib { font-weight: 400; font-style: italic; color: var(--text-dim); }
.jh-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--text); }
.jh-m { min-width: 0; overflow-wrap: anywhere; }
.jh-mk, .jh-evt { color: var(--text-dim); }
.jh-meta .num, .jh-d { font-size: 12px; }
.jh-d { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--text-dim); }
.jh-kv { min-width: 0; overflow-wrap: anywhere; }
.jh-v { color: var(--text); }
.jh-plus { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.jh-plus[hidden], .jh-vide[hidden] { display: none; }
.jh-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.jh-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.jh-export-t { font-size: 12.5px; color: var(--text-dim); }
.jh-export .btn[disabled] { opacity: .45; cursor: default; }
.jh-pied .jh-statut-export { flex-basis: 100%; min-height: 0; text-align: right; }
.jh-statut-export:empty { display: none; }
.jh-vide { padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.jh-vide p { margin: 0 0 8px; max-width: 62ch; }
.jh-vide .jh-vide-t { font-size: 15px; color: var(--text); }

/* état, niveau */
.jh-etat { margin: 0; display: grid; gap: 3px; }
.jh-e { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.35; }
.jh-e dt { color: var(--text-dim); }
.jh-e dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.jh-e[data-ton="warn"] dd { color: var(--warn); }
.jh-e[data-ton="grave"] dd { color: #ffb3ba; }
.jh-releve-row { justify-content: space-between; gap: 8px; }
.jh-releve { font-size: 12px; color: var(--text-dim); }
.jh-phrase { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.jh-phrase[data-niv="trace"] { color: var(--warn); }
.jh-statut { margin: 0; min-height: 1.4em; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; }
.jh-statut[data-ton="ok"] { color: var(--win); }
.jh-statut[data-ton="warn"] { color: var(--warn); }

/* analyser la soirée : replié par défaut */
.jh-analyse summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; border-radius: 6px; }
.jh-analyse summary::-webkit-details-marker { display: none; }
.jh-analyse summary::before { content: "▸"; color: var(--gold); transition: transform .15s ease-out; }
.jh-analyse[open] summary::before { transform: rotate(90deg); }
.jh-analyse summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.jh-analyse[open] { gap: 9px; }
.jh-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,6,11,.7); }
.jh-code { font-size: 12.5px; color: var(--gold-hi); overflow-wrap: break-word; }
.jh-cmd .jh-code { flex: 1 1 100%; min-width: 0; line-height: 1.5; user-select: all; }   /* coupée aux espaces, jamais dans « --donnees » */
.jh-cmd .jh-copier { margin-left: auto; }
.jh-mot { white-space: nowrap; }
.jh-rapport { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.jh-vert { color: var(--win); }
.jh-orange { color: var(--warn); }
.jh-rouge { color: var(--lose); }

/* écran étroit : une seule colonne, les alertes d'abord */
@media (max-width: 980px) {
  .jh { grid-template-columns: minmax(0, 1fr); }
  .jh-liste { max-height: clamp(220px, 56vh, 560px); }
}
@media (max-width: 560px) {
  .jh-e { grid-template-columns: 96px minmax(0, 1fr); }
  .jh-outils, .jh-jeu { width: 100%; max-width: none; }
  .jh-seg { flex-wrap: wrap; }
}