/* ═══════════════════════════════════════════════════════════════════════════
   La porte. Classes préfixées `cx-`.

   Deux panneaux — le formulaire à gauche, une scène à droite. La composition
   est celle qui avait été dessinée pour Cockpit et retrouvée dans la branche
   d'archive : on ne la redessine pas, on change seulement ce qu'elle demande.
   Un mot de passe est devenu un code reçu par courriel.

   ⚠️ Pourquoi la porte porte la même charte que le reste de l'application :
   on tape quelque chose de personnel sur cette page. Une page
   d'authentification qui ne ressemble pas à son application entraîne les gens
   à taper leurs identifiants dans n'importe quoi — c'est exactement le geste
   que l'hameçonnage exploite.

   ⚠️ Aucune couleur n'est écrite à la main : tout passe par un jeton
   var(--…) de tokens.css. Un code hexadécimal recopié ne suit pas la charte
   quand elle bouge, et il ne se signale jamais — il est seulement un peu faux.

   ⚠️ Et il n'y a AUCUN JavaScript derrière cette page. Les deux temps —
   l'adresse, puis le code — sont deux temps du serveur, parce que le code doit
   partir entre les deux. Une porte qui dépendrait d'un script cesserait de
   s'ouvrir au premier chargement incomplet, et une page de connexion cassée ne
   se contourne pas.
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-body);
}

/* ── Le panneau du formulaire ──────────────────────────────────────────── */

.cx-porte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--card);
  padding: var(--s8) var(--s10);
}

.cx-colonne {
  width: 100%;
  max-width: 380px;
}

.cx-marque {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s8) 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--hex-violet);
}

.cx-logo {
  width: var(--s6);
  height: var(--s6);
  border-radius: var(--r-md);
  background: var(--hex-violet);
  color: var(--blanc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.cx-titre {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 var(--s1) 0;
}

.cx-sous-titre {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin: 0 0 var(--s6) 0;
}

/* ── Les champs ────────────────────────────────────────────────────────── */

.cx-groupe { margin-bottom: var(--s3); }

.cx-etiquette {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: var(--s1);
}

.cx-champ {
  width: 100%;
  height: var(--s10);
  box-sizing: border-box;
  padding: 0 var(--s2);
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--text-strong);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

.cx-champ:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

/* Le champ du code. Il se lit chiffre par chiffre : on l'espace, on l'agrandit
   et on le met en chasse fixe. Un code à six chiffres saisi dans la même
   police que le reste se relit mal, et c'est au moment de le vérifier qu'on
   se trompe. */
.cx-champ-code {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  letter-spacing: var(--s2);
  text-align: center;
  height: var(--s10);
}

.cx-bouton {
  width: 100%;
  height: var(--s10);
  border: 0;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--blanc);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms var(--ease);
}

.cx-bouton:hover { background: var(--primary-hover); }

.cx-bouton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Les deux sorties du second temps : « je n'ai rien reçu » et « changer
   d'adresse ». Elles sont discrètes mais elles existent, et c'est ce qui
   évite qu'une personne bloquée ferme l'onglet. */
.cx-sorties {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s4);
}

.cx-sortie {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

.cx-sortie:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Le rappel de l'adresse à laquelle le code est parti. Sans lui, la personne
   qui s'est trompée d'une lettre attend indéfiniment un courriel qui est
   arrivé ailleurs. */
.cx-adresse-rappel {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--s3) 0;
}

.cx-adresse-rappel strong { color: var(--text-strong); }

/* ── Les deux messages ─────────────────────────────────────────────────────
   ⚠️ Le message d'échec ne distingue JAMAIS « adresse inconnue » de « code
   faux ». Les séparer ferait de cette page l'annuaire de l'entreprise : il
   suffirait d'essayer des adresses pour apprendre qui travaille ici.        */

.cx-message {
  background: var(--danger-bg);
  color: var(--primary-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s2);
  margin: 0 0 var(--s3) 0;
  font-size: var(--fs-sm);
}

.cx-avis {
  background: var(--success-bg);
  color: var(--hex-green-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s2);
  margin: 0 0 var(--s3) 0;
  font-size: var(--fs-sm);
}

/* ── Le panneau de droite : la scène ───────────────────────────────────── */

.cx-scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-subtle);
  border-left: 1px solid var(--border);
  padding: var(--s8) var(--s10);
}

.cx-accroche {
  font-size: var(--fs-3xl);
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 var(--s3) 0;
  max-width: 26ch;
}

.cx-carte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s3);
  max-width: 380px;
}

.cx-carte-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-md);
  color: var(--text-body);
}

.cx-carte-ligne:last-child { border-bottom: 0; }

.cx-pastille {
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-full);
  padding: 0 var(--s2);
  line-height: 1.8;
  color: var(--hex-green-deep);
  background: var(--success-bg);
  white-space: nowrap;
}

.cx-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--s3) 0 0 0;
  max-width: 42ch;
}

/* ── Les largeurs ──────────────────────────────────────────────────────────
   Sous 1024 px la scène disparaît : elle n'est qu'un décor, et elle
   écraserait le formulaire sur un écran étroit.                            */

@media (max-width: 1024px) {
  .cx-page { grid-template-columns: minmax(0, 1fr); }
  .cx-scene { display: none; }
  .cx-porte { padding: var(--s8) var(--s4); }
}

@media (max-width: 768px) {
  .cx-porte { padding: var(--s6) var(--s3); }
}

@media (max-width: 390px) {
  .cx-titre { font-size: var(--fs-2xl); }
  .cx-porte { padding: var(--s4) var(--s2); }
}