/* ============================================================================
 * PAGE DE CONNEXION — feuille de la brique. Voir briques/connexion.js.
 *
 * Modèles de charte : LOGIN-CARTE (1101) et LOGIN-MODES (1102).
 *
 * Écrite sur les JETONS de la charte avec un repli pour chacun, comme
 * compte.css : une app qui n'a pas encore adopté les jetons s'affiche juste,
 * celle qui les a adoptés suit son thème (bleu #50a2ff en perso, #006ED2 en
 * thème Commend) sans qu'on touche à ce fichier.
 * ========================================================================== */

/* (!) box-sizing : les apps du parc le posent globalement, mais la brique ne peut
   pas le SUPPOSER -- elle doit s'afficher juste dans une app qui ne l'a pas.
   Sans lui, la carte fait 418 px au lieu de 360 : le padding s'ajoute a la
   largeur au lieu de s'y inscrire. Constate en montant la brique dans Strata. */
.cx-fond, .cx-fond * { box-sizing: border-box; }

/* Le FOND est le seul point de personnalisation par app avec le titre : une
   couleur, un dégradé ou une image, posé par la brique en variable. */
.cx-fond {
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: var(--cx-fond, var(--c-bg, #eef1f5)) center / cover no-repeat;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--c-g900, #1f2937);
}

/* --- 1101 · la carte, valeurs relevées sur Titulus (app/login.html) -------- */
.cx-carte {
  width: min(360px, 92vw);
  background: var(--c-blanc, #fff); border: 1px solid var(--c-g200, #e5e7eb);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(16, 40, 80, .12);
  padding: 30px 28px;
}
/* TOUT EST CENTRÉ — logo, nom, sous-titre, et le retour : cinq éléments à 0 px
   de l'axe. « Une carte de connexion n'a qu'un axe, le regard n'a pas à en
   changer » (décision du 11/08 sur APCA, mesurée). Les boutons de mode gardent
   en revanche leur alignement interne à gauche : logo puis texte. */
.cx-marque { text-align: center; margin: 0 0 4px; }
.cx-marque svg, .cx-marque img { display: block; margin: 0 auto 8px; }
.cx-marque b {
  display: block; font-size: 26px; font-weight: 700; letter-spacing: .5px;
  color: var(--c-accent-fort, #2b7de0);
}
.cx-sous {
  margin: 4px 0 22px; font-size: 12.5px; color: var(--c-g500, #6b7280);
  text-align: center;
}

/* --- 1102 · les modes ----------------------------------------------------- */
/* EN COLONNE, jamais côte à côte : on les compare en descendant, et la colonne
   tient la largeur de la carte quel que soit leur nombre. */
.cx-modes { display: flex; flex-direction: column; gap: 8px; }
.cx-mode {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; text-align: left; cursor: pointer;
  background: var(--c-blanc, #fff); border: 1px solid var(--c-g300, #d1d5db);
  border-radius: var(--r-ctl, 9px); font: inherit; color: inherit;
}
.cx-mode:hover { background: var(--c-g50, #f9fafb); border-color: var(--c-g400, #9ca3af); }
.cx-mode:focus-visible {
  outline: 0; border-color: var(--c-accent, #50a2ff);
  box-shadow: var(--halo-focus, 0 0 0 3px rgba(80, 162, 255, .18));
}
.cx-mode svg, .cx-mode img { flex: none; }
.cx-mode .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-mode .nom { font-size: 13px; font-weight: 500; }
.cx-mode .det { font-size: 11px; color: var(--c-g500, #6b7280); }

/* Emplacement d'un bouton dessine par son fournisseur. On ne lui impose RIEN --
   Google interdit de retoucher le sien -- on lui reserve seulement la place et la
   hauteur des notres, pour que la colonne garde son rythme. */
.cx-rendu { min-height: 40px; display: flex; }
.cx-rendu > * { flex: 1; }

/* --- le formulaire, quand il est demandé ---------------------------------- */
.cx-champ label {
  display: block; font-size: 12.5px; color: var(--c-g500, #6b7280); margin: 14px 0 6px;
}
.cx-champ input {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--c-g300, #d1d5db); border-radius: 9px;
  font: inherit; font-size: 14px; color: inherit;
  background: var(--c-blanc, #fff); outline: none;
}
.cx-champ input:focus {
  border-color: var(--c-accent, #50a2ff);
  box-shadow: var(--halo-focus, 0 0 0 3px rgba(80, 162, 255, .18));
}
.cx-valider {
  width: 100%; margin-top: 20px; padding: 12px;
  border: 1px solid var(--c-accent, #50a2ff); border-radius: 10px;
  background: var(--c-accent, #50a2ff); color: var(--c-blanc, #fff);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.cx-valider:hover {
  background: var(--c-accent-fort, #2b7de0); border-color: var(--c-accent-fort, #2b7de0);
}
.cx-valider:disabled {
  background: var(--c-g300, #c9d0d8); border-color: var(--c-g300, #c9d0d8); cursor: default;
}

.cx-bascule { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--c-g500, #6b7280); }
.cx-bascule button {
  border: 0; background: none; color: var(--c-accent, #50a2ff);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
}
.cx-bascule button:hover { text-decoration: underline; }

/* Retour au choix des modes. Discret : ce n'est pas l'action principale. */
.cx-retour {
  display: block; margin: 0 auto 14px; padding: 0; border: 0; background: none;
  color: var(--c-accent-fort, #2b7de0); font: inherit; font-size: 11.5px; cursor: pointer;
}
.cx-retour:hover { text-decoration: underline; }

/* Bandeau d'erreur de la charte : fond red-50, texte red-600, bordure red-400.
   Une erreur venue du formulaire y ramène directement, sans faire re-choisir
   son mode (règle du modèle LOGIN-MODES). */
.cx-msg { display: none; margin-bottom: 14px; padding: 9px 11px;
          border-radius: var(--r-ctl, 9px); font-size: 12.5px; line-height: 1.4; }
.cx-msg.err {
  display: block; background: var(--c-erreur-fond, #fef2f2);
  border: 1px solid var(--c-erreur-bord, #f87171); color: var(--c-erreur, #de3a3a);
}
.cx-msg.ok {
  display: block; background: #f0fdf4; border: 1px solid #86efac; color: #15803d;
}