/* Portier BALISE.NC — page de connexion et administration.
   Volontairement autonome : aucune dépendance, aucun build. La porte doit
   s'ouvrir même si le reste de l'application est cassé.

   Les jetons viennent de la charte, chargée par une balise « link » avant ce
   fichier. Les noms locaux ci-dessous sont des ALIAS, jamais des copies : une
   couleur écrite deux fois est une couleur qui finira par diverger. */
:root {
  --fond: var(--color-bg);
  --carte: var(--color-surface);
  --trait: var(--color-border);
  --texte: var(--color-text);
  --attenue: var(--color-text-muted);
  --accent: var(--color-accent);
  --alerte: var(--data-critical);
  /* Champs légèrement en retrait de la surface : un champ de saisie doit se
     lire comme un creux, pas comme une carte posée sur une autre carte. */
  --champ: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface));
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--texte);
  font: 15px/1.55 var(--font-ui);
  padding: 24px;
}
.boite { width: 100%; max-width: 420px; }
.large { max-width: 900px; }

/* Signature de la charte : symbole, puis BALISE en 800, un point jaune, NC en
   graisse moyenne. Composée en HTML pour être identique à celle de la carte. */
.signature { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.signature img { width: 34px; height: 34px; display: block; flex-shrink: 0; }
h1 {
  font-size: 22px; margin: 0; font-weight: 800; letter-spacing: 0.5px;
  color: var(--accent); display: flex; align-items: baseline; gap: 5px;
}
h1 .point {
  width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
  align-self: center; flex-shrink: 0;
}
h1 span { font-weight: 500; }
.sous { color: var(--attenue); font-size: 13px; margin: 0 0 24px; }

form, .panneau {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius-md); padding: var(--space-6);
}
label { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--attenue); margin: 14px 0 6px; }
input, select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--trait); background: var(--champ); color: var(--texte);
  font-size: 15px; font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Bouton principal : fond jaune, texte encre. C'est la règle de la charte en
   mode sombre, et c'est aussi la seule combinaison qui tienne le contraste —
   du jaune sur fond sombre en petit texte serait illisible, et l'inverse
   fatiguerait. */
button {
  margin-top: 18px; width: 100%; padding: 11px; border: 0;
  border-radius: var(--radius-sm);
  background: var(--button-primary-bg); color: var(--button-primary-text);
  font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit;
  letter-spacing: 0.3px;
}
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
button.discret { background: none; border: 1px solid var(--trait);
  color: var(--texte); font-weight: 400; width: auto; padding: 6px 12px;
  margin: 0; font-size: 13px; }

.message { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; display: none; }
.message.erreur { display: block;
  background: color-mix(in srgb, var(--data-critical) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--data-critical) 55%, transparent);
  color: color-mix(in srgb, var(--data-critical) 45%, var(--color-text)); }
/* Pas de vert : la charte n'en définit aucun. Une confirmation se dit en jaune
   signal, qui est sa couleur d'état actif. */
.message.bien { display: block;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent); }

.note { font-size: 12px; color: var(--attenue); margin-top: 14px; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--trait); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--attenue); font-weight: 600; }
/* Un mot de passe provisoire se recopie caractère par caractère : chasse fixe,
   pour qu'un I et un l ne se ressemblent pas. C'est l'usage même que la charte
   assigne à IBM Plex Mono. */
code { background: var(--champ); padding: 3px 7px; border-radius: 5px;
  font-size: 14px; font-family: var(--font-data); user-select: all; }
.rangee-actions { display: flex; gap: 8px; }
.etiquette { font-size: 11px; padding: 2px 7px; border-radius: var(--radius-round, 999px);
  border: 1px solid var(--trait); color: var(--attenue); }
.etiquette.admin { color: var(--accent); border-color: var(--accent); }
.etiquette.inactif { color: var(--alerte); border-color: var(--alerte); }

/* Le titre de page vient APRES la signature : la marque d'abord, ce qu'on y
   fait ensuite. Il n'emprunte donc pas le jaune, qui appartient a la marque. */
.titre-page {
  font-size: 17px; font-weight: 600; margin: 10px 0 4px;
  color: var(--texte); letter-spacing: 0.2px;
}