/* La page de connexion de la porte « I-seul » (#1004.2). ⛔ Aucune couleur en dur : les jetons de la charte. */
body.admin-connexion { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg-primary);
  font-family: var(--font-body); color: var(--text-primary); }
/* (#213.2) la largeur COMPREND la marge intérieure : sur un téléphone la carte débordait de l'écran (417 px dans 390,
   mesuré au navigateur) — 436 px = les 380 d'avant et leurs deux marges de 28. */
.admin-connexion-carte { box-sizing: border-box; width: min(436px, 92vw); background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 28px; display: grid; gap: 14px; }
.admin-connexion-logo { max-width: 200px; max-height: 64px; object-fit: contain; justify-self: start; }   /* (#1020.1) */
.admin-connexion-carte h1 { margin: 0; font-size: var(--text-xl); color: var(--titre); }
.admin-connexion-carte p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.admin-connexion-carte form { display: grid; gap: 12px; }
.admin-connexion-carte label { display: grid; gap: 4px; font-size: var(--text-sm); color: var(--text-secondary); }
.admin-connexion-carte input { font: inherit; padding: 8px 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); }
.admin-connexion-carte button { font: inherit; padding: 9px 12px; border: 1px solid var(--accent); border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-text); cursor: pointer; }
/* (0.17.0) Un lien de la carte (l'inscription, l'accord d'un client) : un bouton secondaire. */
.admin-connexion-carte a { font: inherit; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary); text-align: center; text-decoration: none; }
/* ── (#213.2) L'ÉCRAN UNIQUE : les fournisseurs d'abord, le mot de passe replié dessous ───────────────────────────────
   ⭐ CHAQUE BOUTON DE FOURNISSEUR EST CELUI DE SON ÉDITEUR, pas un bouton de la charte : son cadre (fond, texte, bord,
      coins, cotes) suit ses règles de marque, et son logo est le fichier officiel, jamais retouché. ⛔ Ce sont LES SEULES
      couleurs écrites en toutes lettres dans cette feuille, et c'est voulu. Le schéma suit le thème de la page
      (`html[data-mode="sombre"]`, posé par /static/apparence.js).
   · MICROSOFT — la documentation Entra de Microsoft, page « howto-add-branding-in-apps » (« Visual guidance
     for sign-in », relu le 12/10/2026) : 41 px de haut ; 12 px avant le logo, 12 px entre le logo et le texte, 12 px
     après ; logo de 21 px ; texte Segoe UI 15 px, graisse 600 ; coins droits ; clair : fond #FFFFFF, texte #5E5E5E,
     bord 1 px #8C8C8C ; sombre : fond #2F2F2F, texte #FFFFFF, aucun bord.
   · GOOGLE — les « branding guidelines » de Google Identity (relu le 12/10/2026) : le « G » aux couleurs
     standard ; 40 px de haut ; 12 px avant le logo, 10 px entre le logo et le texte, 12 px après ; texte 14/20, graisse
     moyenne (Google Sans, à défaut Roboto) ; coins de 4 px ; clair : fond #FFFFFF, bord 1 px #747775, texte #1F1F1F ;
     sombre : fond #131314, bord 1 px #8E918F, texte #E3E3E3.
   ⭐ (connecteur-kaordia #598.5, n° 108 de l'audit du 19/10) EN SOMBRE, LES DEUX GARDENT LEUR VARIANTE CLAIRE : le gris
      de Microsoft à côté du noir de Google ne faisaient pas une paire. Chaque éditeur admet sa variante claire sur un
      fond sombre (Microsoft : « light or dark » ; Google : « light, dark or neutral », quel que soit le fond) : les
      règles du sombre écrivent donc les valeurs claires, à l'identique, et rien d'autre.
   ⛔ Aucun survol coloré : ni l'un ni l'autre n'en donne. */
.admin-connexion-moyens { display: grid; gap: 12px; }
/* tant que la porte n'a pas dit ses moyens de connexion, rien n'est montré : ni clignotement, ni saut */
html[data-script] .admin-connexion-carte[data-moyens="inconnu"] .admin-connexion-moyens { visibility: hidden; }
.admin-connexion-carte a.admin-connexion-fournisseur { display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.admin-connexion-carte a.admin-connexion-fournisseur img { flex: none; }
.admin-connexion-carte a[data-fournisseur="microsoft"] { gap: 12px; height: 41px; padding: 0 12px;
  font: 600 15px/1 "Segoe UI", var(--font-body); background: #FFFFFF; color: #5E5E5E; border: 1px solid #8C8C8C; border-radius: 0; }
html[data-mode="sombre"] .admin-connexion-carte a[data-fournisseur="microsoft"] { background: #FFFFFF; color: #5E5E5E; border: 1px solid #8C8C8C; }
.admin-connexion-carte a[data-fournisseur="google"] { gap: 10px; height: 40px; padding: 0 12px;
  font: 500 14px/20px "Google Sans", Roboto, var(--font-body); background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; border-radius: 4px; }
html[data-mode="sombre"] .admin-connexion-carte a[data-fournisseur="google"] { background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; }
/* « attendue » : le bouton est là, inactif — ni clic, ni main ; la phrase dessous dit pourquoi */
.admin-connexion-carte a.admin-connexion-fournisseur[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.admin-connexion-carte .admin-connexion-aide { margin-top: -6px; text-align: center; }
/* le mot de passe, en second : un lien qui déplie le formulaire */
.admin-connexion-carte button.admin-connexion-deplier { justify-self: center; padding: 6px 4px; border: 0; background: none;
  color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }
.admin-connexion-refus { color: var(--color-error); font-size: var(--text-sm); }
/* ⛔ (#1012.1) `.admin-connexion-carte form { display: grid }` l'emportait sur l'attribut `hidden` : le bloc « mot de passe
   provisoire » s'affichait à tout visiteur (l'application B, 01/10). Ce qui est caché le reste, quelle que soit la règle. */
[hidden] { display: none !important; }
/* (connecteur-kaordia #598.5) la phrase sous le titre, le mot de passe oublié, le pied légal : des jetons seuls */
.admin-connexion-carte .admin-connexion-phrase { color: var(--text-secondary); }
.admin-connexion-oubli { font-size: var(--text-sm); color: var(--text-muted); }
.admin-connexion-oubli summary { cursor: pointer; justify-self: center; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.admin-connexion-oubli p { margin-top: 8px; }
.admin-connexion-carte .admin-connexion-pied { text-align: center; font-size: var(--text-xs, 12px); }
.admin-connexion-carte .admin-connexion-pied a { padding: 0; border: 0; background: none; display: inline; font-weight: 400; }
/* (0.20.0, #59.4) L'inscription : les deux choix sont deux grands boutons, un titre et une phrase ;
   la suite de « Pour mon organisation » s'ouvre dessous. ⛔ Aucune classe de plus : la carte de la connexion. */
.admin-connexion-carte button[data-choix] { display: grid; gap: 4px; text-align: left; padding: 14px 16px;
  background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-default); }
.admin-connexion-carte button[data-choix]:hover, .admin-connexion-carte button[data-choix]:focus-visible { border-color: var(--accent); }
.admin-connexion-carte button[data-choix] strong { font-size: var(--text-base); color: var(--titre); }
.admin-connexion-carte button[data-choix] span { font-size: var(--text-sm); color: var(--text-muted); }
.admin-connexion-carte section { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-light); }
/* (#504.4) L'écran de l'accord que l'annuaire exige : une adresse longue se coupe où elle peut, sans couleur à elle. */
.admin-connexion-accord { display: grid; gap: 8px; font-size: var(--text-sm); }
.admin-connexion-accord h2 { margin: 0; font-size: var(--text-base); }
.admin-connexion-accord ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.admin-connexion-accord-lien a { overflow-wrap: anywhere; word-break: break-all; }