/* ============================================================
   ÉCRAN DE CONNEXION — la couche de page
   Bloc T3 du fil technique. Cette feuille est la DERNIÈRE de la cascade :
   elle pose la plomberie d'un document qui n'a pas de thème, puis la mise en
   page de la carte. Elle ne redéfinit AUCUN composant du design system —
   boutons, champs et encarts arrivent tels quels de `assets/ds/`, transportés
   du registre.

   Tout ce qui suit est écrit sur les tokens. Aucune valeur de couleur, aucune
   taille de police, aucun rayon en dur : si la DA bouge, cet écran suit sans
   qu'on l'édite.

   POURQUOI UNE PLOMBERIE ICI. Le socle du site pose ses règles de base dans
   `kadence-neutralisation.css`, qui vit dans le child theme et ne parle que de
   Kadence. L'écran étant rendu hors thème, il doit déclarer lui-même ses
   marges, sa boîte et sa fonte. C'est la seule raison d'être des dix premières
   règles.
   ============================================================ */

/* --- Plomberie du document --------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.lcdi-connexion {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.lcdi-connexion img { max-width: 100%; height: auto; }

.lcdi-connexion a { color: var(--link); }
.lcdi-connexion a:hover { color: var(--link-hover); }

/* --- La scène ----------------------------------------------------------
   `100dvh` et non `100vh` : sur téléphone, la barre d'adresse mange le second
   et la carte se retrouve coupée au chargement. */

.lcdi-connexion__scene {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
}

/* --- La carte ----------------------------------------------------------
   PAS d'`overflow: hidden` ici, alors que le bandeau sombre déborderait
   volontiers : la carte contient des éléments focusables, et l'anneau de focus
   du système est une `box-shadow` — un `overflow: hidden` l'avalerait. Les
   coins du bandeau sont donc arrondis à la main (règle d'usage des tokens). */

.lcdi-connexion__carte {
  width: 100%;
  max-width: 27rem;
  background: var(--surface-raised);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

/* --- L'enseigne : le chrome du site, qui est sombre partout -------------
   Le logo de LCDI est le logo BLANC : il lui faut son fond. `--surface-structure`
   est justement le rôle qui ne bascule jamais, celui du header et du pied. */

.lcdi-connexion__enseigne {
  background: var(--surface-structure);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: var(--space-5) var(--space-6);
  text-align: center;
}

.lcdi-connexion__marque {
  display: inline-block;
  max-width: 12rem;
  text-decoration: none;
}

.lcdi-connexion__marque img { display: block; width: 100%; height: auto; }

.lcdi-connexion__nom {
  color: var(--text-on-structure);
  font-family: var(--font-display);
  font-size: var(--type-h6);
  font-weight: var(--weight-title);
  line-height: var(--lh-snug);
}

/* --- Le corps ----------------------------------------------------------- */

.lcdi-connexion__corps { padding: var(--space-6); }

.lcdi-connexion__titre {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: var(--weight-title);
  line-height: var(--lh-title);
  color: var(--text-strong);
}

.lcdi-connexion__chapeau {
  margin: 0 0 var(--space-5);
  color: var(--text-body);
  font-size: var(--type-caption);
  line-height: var(--lh-body);
}

/* --- Le message d'état -------------------------------------------------
   L'encart du registre (`.lcdi-notice`) fournit la forme ; le ton fournit la
   couleur, prise aux rôles d'état. Les voiles sont à 8-10 % : le texte de
   l'encart reste sur un fond quasi blanc, donc au-dessus de 9:1. */

.lcdi-connexion__message { margin: 0 0 var(--space-5); }

.lcdi-connexion__message--succes {
  border-color: var(--state-success);
  background: var(--state-success-veil);
}

.lcdi-connexion__message--erreur {
  border-color: var(--state-danger);
  background: var(--state-danger-veil);
}

.lcdi-connexion__message--info {
  border-color: var(--state-info);
  background: var(--state-info-veil);
}

/* --- Les actions -------------------------------------------------------
   Les deux voix du système, empilées : le CTA (l'action) au-dessus, la voix
   d'exploration (le second chemin) en dessous, plus serrées entre elles
   qu'avec le champ — elles forment un bloc de décision. */

.lcdi-connexion__actions {
  display: grid;
  gap: var(--space-3);
}

.lcdi-connexion__aparte {
  margin: var(--space-1) 0 0;
  text-align: center;
  font-size: var(--type-fine);
  line-height: var(--lh-body);
  color: var(--text-body);   /* jamais `--text-soft` : 3,32:1 ne porte pas du petit texte */
}

/* --- Le pied ------------------------------------------------------------ */

.lcdi-connexion__pied {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--type-fine);
}

/* --- Téléphone ---------------------------------------------------------- */

@media (max-width: 479px) {
  .lcdi-connexion__scene { padding: var(--space-4) var(--space-3); align-content: start; }
  .lcdi-connexion__corps { padding: var(--space-5); }
  .lcdi-connexion__enseigne { padding: var(--space-4) var(--space-5); }
  .lcdi-connexion__marque { max-width: 9.5rem; }
}