/* ==========================================================================
   Qwifon TV — panneau de gestion, phase P3.
   Ajouts propres aux trois écrans : connexion, tableau de bord, journal.

   tokens.css, bundle.css (système) et panneau.css (bloc de la maquette du
   19/10/2026) sont copiés tels quels, jamais modifiés. Ce fichier-ci ne
   contient AUCUNE couleur écrite en dur : tout passe par les jetons.
   ========================================================================== */

/* La maquette du 19/10 est dessinée à racine 20 px (1 rem = 20 px) : ses
   feuilles ont été converties en rem (÷ 20) dans les planches. Nos copies du
   système gardent leurs px, donc on fixe la même racine pour que panneau.css
   rende à l'identique. */
html { font-size: 20px }

[hidden] { display: none !important }

/* Le contenu défile verticalement s'il dépasse (journal long, actions
   nombreuses). panneau.css le figeait pour la maquette ; un écran de gestion
   ne doit jamais couper des lignes. Aucun défilement horizontal. */
.contenu {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ------------------------------------------------------------ barre latérale */
/* panneau.css ne style que les liens de la barre. Les entrées « à venir » sont
   des spans (donc inactifs) : on leur donne exactement la même tenue. */
.nav .entree {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.05rem;
  padding: 0 0.55rem;
  border-radius: var(--r2);
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 600;
  text-decoration: none;
}
.nav .entree .ico { width: 0.9rem; height: 0.9rem; flex: none }
.nav .entree.actif {
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
}
.nav .entree.actif::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 0.1rem;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.nav .desactive {
  color: var(--faint-lisible);
  cursor: not-allowed;
}
.nav .desactive:hover { color: var(--faint-lisible) }
.nav .a-venir {
  margin-left: auto;
  padding: 0 0.32rem;
  border: 0.05rem solid var(--line);
  border-radius: var(--r-pill);
  color: var(--faint-lisible);
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* Le bouton de déconnexion est un vrai bouton : on lui retire l'habillage
   natif pour qu'il garde la tenue du lien de la maquette. */
.lien-sortie {
  background: none;
  border: 0;
  align-self: flex-start;
  text-align: left;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.5;
}

.compte .nom {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ connexion */
.erreur-connexion {
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-left: 0.1rem solid var(--accent);
  border-radius: 0 var(--r1) var(--r1) 0;
  background: var(--accent-soft);
  color: var(--accent-texte);
  font-size: 0.56rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ messages */
.message {
  margin: 0;
  padding: 0.35rem 0;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.5;
}
.message.erreur { color: var(--accent-texte) }

.portee {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.5;
}
.portee-liste {
  margin: 0.15rem 0 0;
  padding-left: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.55rem;
  line-height: 1.5;
}
.portee-liste b { color: var(--text); font-weight: 600 }

/* ------------------------------------------------------------------ tableau de bord */
.kpi .v { margin-top: 0.12rem }

/* ---------------------------------------------------------------------- journal */
.contenu > .card.journal-carte { min-height: 0 }

.journal { table-layout: fixed }
.journal th:nth-child(1), .journal td:nth-child(1) { width: 5.6rem }
.journal th:nth-child(2), .journal td:nth-child(2) { width: 10.5rem }
.journal th:nth-child(3), .journal td:nth-child(3) { width: 25% }
.journal th:nth-child(4), .journal td:nth-child(4) { width: 19% }
.journal td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.journal .vide {
  padding: 0.9rem 0;
  color: var(--muted);
  font-size: 0.6rem;
}
.journal .sous {
  display: block;
  margin-top: 0.04rem;
  color: var(--faint-lisible);
  font-size: 0.48rem;
  font-weight: 400;
}

/* Le compteur du pied de liste peut être long : il se replie, il ne pousse pas. */
.pied-liste { flex-wrap: wrap }

/* ------------------------------------------------------------------------ panne */
.panne { padding: 1.3rem 1.6rem 1.5rem }
.panne .message { margin-bottom: 0.6rem }

/* Texte réservé aux lecteurs d'écran (légende du tableau). */
.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}