/* ============================================================
   auth.css — compléments de la charte pour la connexion et « Mon compte » (voir auth.js)
   Les composants viennent de assets/design.css (.it-connexion, .it-champ, .it-saisie, .it-mdp, .it-force,
   .it-bouton, .it-message, .it-carte, .it-pastille, .it-avatar) : ce fichier ne fait que les placer.
   Racines : #loginOverlay.auth-ov (écran de connexion superposé), #pwdOverlay.auth-compte-ov (Mon compte
   en repli, sans écran #/compte dans index.html) et #monCompte.auth-compte (contenu de Mon compte, dans la
   page ou dans le repli). Les deux surcouches portent .it-app : la base de la charte s'y applique même si
   <body> ne l'a pas encore. assets/design.css est chargé par le <head> d'index.html, après ce fichier.
   Plans : #loginOverlay 700 (au-dessus de tout, sauf l'annonce #toast) ; #pwdOverlay 550, sous les
   confirmations de l'application (600 : « Se déconnecter ? » doit passer devant).
   ============================================================ */

/* ---------- Surcouches ---------- */
#loginOverlay.auth-ov,
#pwdOverlay.auth-compte-ov {
  position: fixed; inset: 0; z-index: 700; min-height: 0;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#loginOverlay.auth-ov { background: var(--it-marine, #1E254F); }
#pwdOverlay.auth-compte-ov { z-index: 550; background: var(--it-creme, #FAF8F4); }
/* Filet de sécurité si assets/design.css ne se charge pas : la carte reste lisible (mêmes valeurs que la charte) */
.auth-ov .it-connexion__carte { background: var(--it-blanc, #FFFFFF); color: var(--it-texte, #1E254F); }
.auth-ov .it-connexion__pied { color: var(--it-texte-inverse-2, #C9CCE0); }

/* ---------- Connexion (DESIGN.md § 5.3, § 7.19) ---------- */
.auth-ov .it-connexion { padding-top: var(--it-e-8); padding-bottom: var(--it-e-8); }
.auth-ov .it-connexion__carte { gap: var(--it-e-5); }
@media (max-width: 599.98px) {
  .auth-ov .it-connexion { padding-top: var(--it-e-6); padding-bottom: var(--it-e-6); gap: var(--it-e-5); }
  .auth-ov .it-connexion__carte { padding: var(--it-e-6) var(--it-e-5); }
}
/* Fenêtres basses (téléphone à l'horizontale, iPad avec le clavier) : logo plus petit, tout reste atteignable */
@media (max-height: 600px) {
  .auth-ov .it-connexion { padding-top: var(--it-e-4); padding-bottom: var(--it-e-4); gap: var(--it-e-4); }
  .auth-ov .it-connexion__logo { height: 48px; }
}
.auth-ov .it-connexion__pied { max-width: 52ch; }
.auth-tete { display: grid; gap: var(--it-e-2); }
.auth-ov .auth-tete .it-texte-2 { max-width: 62ch; }

/* Formulaires : 20 px entre deux champs, bouton principal un peu détaché */
.auth-form { display: grid; gap: var(--it-e-5); }
.auth-form > .it-bouton--grand { margin-top: var(--it-e-3); }
/* Liens d'action sous le bouton principal (« Mot de passe oublié ? », « Retour à la connexion »…) */
.auth-liens { display: flex; flex-direction: column; align-items: center; gap: var(--it-e-1); margin-top: calc(-1 * var(--it-e-3)); }
.auth-liens .it-bouton--discret { text-align: center; }
/* Zones de message (role="alert" / role="status") : rien à l'écran tant qu'elles sont vides */
.auth-zone:empty { display: none; }
.auth-zone { display: grid; gap: var(--it-e-2); }

/* Bouton occupé (« Connexion… », « Changement… ») : il garde sa couleur, la roue de design.css tourne */
.auth-ov .it-bouton--principal[aria-busy="true"],
.auth-compte .it-bouton--principal[aria-busy="true"] { background: var(--it-marine); border-color: var(--it-marine); color: var(--it-blanc); cursor: progress; }
.auth-compte .it-bouton--danger-plein[aria-busy="true"] { background: var(--it-rouge); border-color: var(--it-rouge); color: var(--it-blanc); cursor: progress; }

/* Champs protégés des règles générales de l'ancienne feuille d'index.html (input[type=text], input:focus),
   qui l'emporteraient sur .it-saisie seule (« Afficher » passe le champ en type="text") */
.auth-ov .it-saisie,
.auth-compte .it-saisie {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--it-trait-champ); border-radius: var(--it-rayon-champ);
  background: var(--it-blanc); color: var(--it-texte); font-family: var(--it-police); font-size: var(--it-taille-m); line-height: 1.45; resize: none;
}
.auth-ov .it-mdp .it-saisie,
.auth-compte .it-mdp .it-saisie { padding-right: 116px; }
.auth-ov .it-saisie:focus,
.auth-compte .it-saisie:focus { box-shadow: none; background: var(--it-blanc); }
.auth-compte .it-saisie:disabled { background: var(--it-creme-2); border-color: var(--it-trait); }
.auth-ov .it-mdp__voir, .auth-compte .it-mdp__voir { font-family: var(--it-police); }
/* « Afficher » désactivé (Mon compte pas encore activé) */
.it-mdp__voir:disabled { color: var(--it-texte-2); background: transparent; text-decoration: none; cursor: not-allowed; }
.it-force { margin-top: var(--it-e-1); }

/* Adresse cachée pour le trousseau (iCloud, gestionnaires de mots de passe) */
.auth-cache {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none;
}

/* ---------- Mon compte (DESIGN.md § 5.16) : colonne de 720 px ---------- */
.auth-compte { max-width: var(--it-l-texte, 720px); margin-left: auto; margin-right: auto; }
.auth-compte .it-carte__tete { margin-bottom: var(--it-e-4); }
.auth-compte .it-carte__icone .it-icone { width: 24px; height: 24px; }
.auth-section__corps { display: grid; gap: var(--it-e-4); }
.auth-identite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--it-e-4); }
.auth-identite__texte { flex: 1 1 200px; }
/* « Se déconnecter » : dans la carte du compte connecté, à droite (dessous sur téléphone) */
.auth-identite > .auth-action { margin-left: auto; }
.auth-identite__texte { min-width: 0; display: grid; gap: 2px; }
.auth-identite__email { overflow-wrap: anywhere; }
.auth-etat { display: grid; gap: var(--it-e-3); }
.auth-etat p { overflow-wrap: anywhere; }
.auth-action { display: flex; flex-wrap: wrap; gap: var(--it-e-3); }
.auth-sortie { display: grid; gap: var(--it-e-4); }
@media (max-width: 599.98px) {
  .auth-action .it-bouton, .auth-compte .it-message__actions .it-bouton { width: 100%; }
}
/* Repli : bandeau blanc souligné d'or (même en-tête que l'application), page crème */
#pwdOverlay.auth-compte-ov .it-entete { position: sticky; top: 0; }
#pwdOverlay.auth-compte-ov .it-entete__contenu { min-height: 60px; }

@media (prefers-reduced-motion: reduce) {
  .auth-ov *, .auth-compte * { transition: none !important; }
}