/* ===========================================================================
   ÉCRAN DE CONNEXION — mise en page
   ===========================================================================

   Ce fichier ne porte QUE la mise en page. Les champs viennent de
   `formulaires.css`, les boutons de `boutons.css`, les messages de
   `alertes.css`. Un écran de connexion n'a pas de style à lui : c'est un
   formulaire court, centré, sur une page qui ne propose rien d'autre.

   ---------------------------------------------------------------------------
   CE QUE CET ÉCRAN IMPLÉMENTE, ET OÙ C'EST EXIGÉ
   ---------------------------------------------------------------------------
   Il applique `../auth/spec.md`. Il ne la réécrit pas, et il ne la résume pas :

     IF-9   un seul message d'échec, écrit UNE SEULE FOIS dans le module, quelle
            que soit la cause. Deux formulations finiront par diverger et
            trahiront quel compte existe.
     IF-15  l'écran d'attente du code ne montre NI le code, NI l'adresse de
            destination. Il peut dire où en est l'acheminement et combien
            d'essais restent.
     RE-1   standard du 21/09/2026 : le lien « mot de passe oublié » est
            TOUJOURS présent (voir ../AUTH.md). Sans courriel, pas de
            connexion : aucune voie de rechange.
     HT-4   aucune ressource chargée depuis un tiers. Pas de police à
            télécharger, pas d'image externe, pas de script d'ailleurs. La
            flèche de la liste déroulante de `formulaires.css` est pour cette
            raison dessinée dans l'adresse et non déposée en fichier.

   ---------------------------------------------------------------------------
   CE QUE CE FICHIER N'EST PAS
   ---------------------------------------------------------------------------
   Ce n'est PAS une bibliothèque d'authentification, et il n'y en aura pas :
   `auth/README.md` l'interdit pour que les modules restent vendables
   séparément. Ce sont des STYLES et un BALISAGE à recopier, comme le pied de
   page — aucun module n'en dépend à l'exécution.

   La différence n'est pas de forme. Copier un fragment ne crée aucun couplage :
   deux modules peuvent le faire évoluer différemment sans se casser l'un
   l'autre. Partager du code en crée un, et c'est ce que la spécification
   refuse.

   Voir `connexion.html`.
   =========================================================================== */

.iav-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  /* `1 0 auto` : la zone prend la hauteur restante sans jamais se comprimer
     sous sa taille réelle. Elle s'insère dans la colonne flex posée par
     `pied-de-page.css`, qui garde le pied en bas. */
  flex: 1 0 auto;
  padding: var(--iav-espace-section, 32px) var(--iav-espace-grand, 16px);
}

.iav-connexion-panneau {
  width: 100%;
  max-width: 380px;
  padding: var(--iav-espace-section, 32px) var(--iav-espace-large, 24px);
  background: var(--iav-fond-page, #FFFFFF);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon-grand, 12px);
  box-shadow: var(--iav-ombre-carte, 0 1px 2px rgba(27, 39, 51, 0.06));
}

.iav-connexion-marque {
  text-align: center;
  margin-bottom: var(--iav-espace-large, 24px);
}

.iav-connexion-logo {
  /* HAUTEUR fixée, largeur libre — `logo-document.png` fait 400 × 196 et son
     dessin n'occupe qu'une bande centrale. Poser une largeur le déformerait.
     Sur jeton depuis le 24/08/2026 : les quatre emplacements du logo se règlent
     au même endroit. */
  height: var(--iav-connexion-logo-hauteur, 48px);
  width: auto;
  display: inline-block;
}

.iav-connexion-titre {
  font-size: var(--iav-taille-titre, 19px);
  font-weight: var(--iav-graisse-forte, 700);
  color: var(--iav-texte-principal, #1B2733);
  margin: var(--iav-espace-moyen, 12px) 0 var(--iav-espace-minuscule, 4px);
}

.iav-connexion-sous-titre {
  font-size: var(--iav-taille-secondaire, 12px);
  color: var(--iav-texte-secondaire, #5A6B7F);
  margin: 0;
}

/* --- La zone de lien sous le formulaire (« mot de passe oublié ») ----------
   Nom de classe historique, GARDÉ tel quel : des sites existants l'emploient
   (le cockpit de JARVIS lit cette feuille en direct). Le standard du
   21/09/2026 (../AUTH.md) affiche ce lien dès le premier affichage et porte sa
   propre classe, `iav-auth-lien`, dans le module.
   --------------------------------------------------------------------------- */
.iav-connexion-secours {
  margin-top: var(--iav-espace-grand, 16px);
  padding-top: var(--iav-espace-grand, 16px);
  border-top: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  text-align: center;
  font-size: var(--iav-taille-secondaire, 12px);
}

/* --- L'écran d'attente du code (IF-15) ------------------------------------- */

.iav-connexion-code {
  /* Le code se saisit en gros, en chasse fixe, largement espacé : on le recopie
     depuis un autre écran, chiffre par chiffre. */
  font-family: var(--iav-police-mono, ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace);
  font-size: var(--iav-taille-valeur, 32px);
  letter-spacing: 0.28em;
  text-align: center;
  /* Le dernier chiffre paraît décollé du bord : l'espacement s'applique APRÈS
     chaque caractère, y compris le dernier. On lui rend sa place. */
  text-indent: 0.28em;
  min-height: 56px;
}

.iav-connexion-essais {
  font-size: var(--iav-taille-secondaire, 12px);
  color: var(--iav-texte-secondaire, #5A6B7F);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Quand il ne reste qu'un essai, l'avertissement change de ton. Le bordeaux,
   jamais l'accent rouge de « depuis 2008 ». */
.iav-connexion-essais-dernier {
  color: var(--iav-avertissement-texte, #7B241C);
  font-weight: var(--iav-graisse-semi, 600);
}

/* --- Le pied du panneau ---------------------------------------------------- */
.iav-connexion-note {
  margin-top: var(--iav-espace-grand, 16px);
  font-size: var(--iav-taille-petite, 11px);
  color: var(--iav-texte-secondaire, #5A6B7F);
  text-align: center;
  line-height: var(--iav-interligne-aere, 1.6);
}