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

   Deux panneaux — formulaire à gauche, scène à droite — calqués sur la page de
   connexion de Mon Pilote. On tape un mot de passe sur cette page : une page
   d'authentification qui ne dit pas de quelle application elle est entraîne à
   taper son mot de passe dans n'importe quoi.

   Ce qui N'EST PAS repris : l'illustration de Mon Pilote. Elle porte sa marque
   et une capture de ses écrans ; l'afficher ici mettrait Mon Pilote sur la
   porte de Cockpit. On garde la composition — panneau clair, accroche en gros,
   une carte, une pastille — avec le seul signe que Cockpit possède.

   Cette feuille entre dans les contrôles du harnais et NON dans une exception :
   une feuille que le contrôle de code mort ne lit pas est précisément l'endroit
   où les règles orphelines s'accumulent.
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

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

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

.cx-colonne { width: 100%; max-width: var(--cx-colonne); }

.cx-marque {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-6) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--hex-violet);
}

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

.cx-titre {
  font-size: var(--cx-titre);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 var(--sp-1) 0;
}

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

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

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

.cx-etiquette {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  margin-bottom: var(--sp-1);
}

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

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

.cx-bouton {
  width: 100%;
  height: var(--cx-bouton);
  border: 0;
  border-radius: var(--r-md);
  background: var(--primary-fill);
  color: var(--card);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--duree-courte) var(--ease);
}

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

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

/* « ← Changer » : le retour du second temps vers le premier. */
.cx-changer {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--primary-txt);
  cursor: pointer;
  text-decoration: underline;
}

.cx-changer:focus-visible {
  outline: var(--nudge) solid var(--primary-txt);
  outline-offset: var(--nudge);
  border-radius: var(--r-sm);
}

.cx-adresse-rappel {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--sp-3) 0;
}

/* ── Le message d'échec. Il ne distingue jamais deux cas. ──────────────── */

.cx-message {
  background: var(--danger-bg);
  color: var(--danger-txt);
  border: var(--hair) solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  margin: 0 0 var(--sp-3) 0;
  font-size: var(--fs-sm);
}

/* ── Le bouton SSO ─────────────────────────────────────────────────────────
   En BLEU Interstis et non en rose : deux portes de la même couleur se
   disputeraient le regard. L'anneau conique qui tourne est le même signe que
   sur la page de Mon Pilote — il dit « cette porte-là mène chez l'autre
   application ».                                                          */

.cx-separateur {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cx-trait {
  flex: 1 1 auto;
  height: var(--hair);
  background: var(--border-strong);
}

/* L'anneau est une BORDURE, pas un padding — et c'est aussi ce qu'il est
   sémantiquement. Le contrôle 5 a refusé trois fois ma tentative de le faire
   avec `padding: var(--nudge)` : il avait raison, un anneau de 2 px n'est pas
   de l'espacement. La technique correcte est le dégradé en border-box avec le
   fond du bouton en padding-box.

   ⚠️ ET C'EST LE DÉGRADÉ QUI TOURNE, JAMAIS LA BOÎTE. La première version
   animait `transform: rotate()` : une transformation fait tourner *l'élément*,
   pas la peinture qu'il porte. Mesuré à 90° sur le vrai gabarit — la boîte
   occupait 380 × 56 et en peignait 56 × 380, soit un rectangle de 380 px
   balayant un disque de 384 px par-dessus le formulaire. Deux hélices bleues
   sur la page de connexion, parties en production sous onze contrôles verts.
   C'est Thomas qui l'a vu, en regardant la page.

   `@property` n'est pas décoratif : sans enregistrement, une propriété
   personnalisée est une CHAÎNE, et une chaîne ne s'interpole pas — l'anneau
   sauterait de 0° à 360° sans passer par les valeurs intermédiaires, donc ne
   tournerait pas. Si le navigateur ne connaît pas `@property`, le dégradé
   devient invalide et il n'y a simplement pas d'anneau : un repli qui montre
   moins, jamais un repli qui casse. */
@property --cx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.cx-sso-cadre {
  position: relative;
  --cx-angle: 0deg;
  border: var(--nudge) solid transparent;
  border-radius: var(--r-md);
  background:
    conic-gradient(from var(--cx-angle), var(--hex-blue-light), var(--hex-blue),
                   var(--hex-blue-deep), var(--hex-blue-light)) border-box;
  animation: cx-tourne 4s linear infinite;
}

@keyframes cx-tourne {
  to { --cx-angle: 360deg; }
}

/* Plus aucune contre-rotation ici : elle n'existait que pour défaire la
   rotation de l'enveloppe. Une contre-rotation est toujours le signe qu'on
   fait tourner ce qu'il ne fallait pas. */
.cx-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 100%;
  height: var(--cx-bouton);
  box-sizing: border-box;
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--hex-blue-deep);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.cx-sso:hover { background: var(--info-bg); }

.cx-sso:focus-visible {
  outline: var(--nudge) solid var(--hex-blue-deep);
  outline-offset: var(--nudge);
}

.cx-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--info-txt);
  background: var(--info-bg);
  border-radius: var(--r-full);
  padding: 0 var(--sp-1);
  line-height: 1.8;
}

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

.cx-scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-subtle);
  border-left: var(--hair) solid var(--border);
  padding: var(--sp-6) var(--sp-7);
}

.cx-accroche {
  font-size: var(--cx-accroche);
  line-height: 1.3;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 var(--sp-3) 0;
  max-width: 26ch;
}

.cx-carte {
  background: var(--card);
  border: var(--hair) solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3);
  max-width: var(--cx-colonne);
}

.cx-carte-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: var(--hair) 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: var(--fw-medium);
  border-radius: var(--r-full);
  padding: 0 var(--sp-1);
  line-height: 1.8;
  color: var(--success-txt);
  background: var(--success-bg);
  white-space: nowrap;
}

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

/* ── Le second temps ──────────────────────────────────────────────────────
   Le masquage n'existe QUE sous `ck-cx-js`, posée par connexion.js. Sans
   script, les deux champs s'affichent ensemble et le formulaire fonctionne
   d'un seul tenant : masquer par défaut aurait rendu la page inutilisable au
   premier incident de chargement, et une page de connexion cassée ne se
   contourne pas.                                                          */

.ck-cx-js .cx-temps-2,
.ck-cx-js .cx-changer { display: none; }

.ck-cx-js.cx-au-temps-2 .cx-temps-1 { display: none; }
.ck-cx-js.cx-au-temps-2 .cx-temps-2,
.ck-cx-js.cx-au-temps-2 .cx-changer { display: block; }

/* ── Les cinq largeurs ─────────────────────────────────────────────────── */

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

@media (max-width: 768px) {
  .cx-porte { padding: var(--sp-5) var(--sp-3); }
}

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