/* =============================================================================
   Console Iris — page de connexion
   Servie sans session, comme palette.css et connexion.js. Elle ne décrit que
   le formulaire.
   ========================================================================== */

/* --- Écran de connexion ------------------------------------------------------
   Il couvre tout : tant qu'il est là, la console n'a rien à montrer. Le voile
   est opaque et non un simple assombrissement — un écran de dossiers qu'on
   devine derrière une couche translucide reste un écran de dossiers lisible sur
   une capture d'écran. */
#voile-connexion {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--creme);
}
#form-connexion {
  width: min(23rem, 90vw);
  display: flex; flex-direction: column; gap: .85rem;
  padding: 2rem 1.9rem;
  border: 1px solid var(--ligne);
  background: var(--creme-2);
}
#form-connexion h2 {
  font-family: var(--serif); font-weight: 400;
  margin: 0; font-size: 22px; letter-spacing: .01em; color: var(--encre);
}
#form-connexion .sous {
  margin: -.5rem 0 .4rem; font-size: 13px; line-height: 1.5;
  color: var(--encre-2);
}
#form-connexion label {
  display: flex; flex-direction: column; gap: .3rem;
  /* 11,5 px : le plancher de lisibilité posé pour toute la console. Un
     intitulé de formulaire n'y échappe pas sous prétexte qu'il est court. */
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-3);
}
#form-connexion input {
  font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0;
  padding: .55rem .65rem;
  color: var(--encre); background: var(--creme);
  border: 1px solid var(--ligne-2);
}
#form-connexion input:focus-visible {
  outline: 2px solid var(--emeraude); outline-offset: 1px;
}
#form-connexion button {
  margin-top: .4rem; padding: .62rem;
  font: inherit; font-weight: 600; letter-spacing: .03em;
  color: #fff; background: var(--emeraude);
  border: 0; cursor: pointer;
}
/* Deux messages, et ils ne disent pas la même chose. Un refus vient du
   serveur ; une panne dit que la question ne lui est jamais parvenue. Les
   peindre pareil ferait douter d'un mot de passe correct. */
#form-connexion .message { margin: 0; font-size: 13px; line-height: 1.45; }
#form-connexion .message.refus { color: var(--rouge); }
#form-connexion .message.panne {
  color: var(--or-f); border-left: 2px solid var(--or); padding-left: .6rem;
}
#form-connexion button[disabled] { opacity: .55; cursor: default; }

/* Sur la console, sans formulaire : le message de panne est un bandeau en
   tête de page, jamais un voile — il n'y a rien à cacher derrière, la page
   n'a chargé aucune donnée. */
body > #message-connexion {
  margin: 0; padding: .6rem 20px; font-size: 13px; line-height: 1.45;
}
body > #message-connexion.panne {
  color: var(--or-f); background: var(--or-p); border-bottom: 1px solid var(--or);
}
body > #message-connexion.refus { color: var(--rouge); background: var(--rouge-p); }