/* La page de connexion — deux panneaux, calquée sur celle de Mon Pilote.
 *
 * Pourquoi une feuille à part et non `cockpit.css` : cette mise en page ne sert
 * qu'à UNE page. La verser dans la feuille commune la ferait charger sur les
 * vingt-six autres écrans, pour des règles qui n'y trouvent jamais leur
 * élément.
 *
 * ── Pourquoi des variables `--cx-*` et non les jetons de Cockpit ────────────
 *
 * Cockpit a ses propres couleurs de fond, de champ et de bordure, et elles ne
 * sont PAS celles de la page de connexion de Mon Pilote : son fond est un
 * lavande très pâle, celui de Mon Pilote est blanc pur. Employer les jetons
 * aurait donné une page qui ressemble à Cockpit — or ce qu'on cherche ici est
 * qu'elle ressemble à L'AUTRE PORTE. Les valeurs ci-dessous sont donc celles de
 * `login.css` de Mon Pilote, relevées une par une.
 *
 * Ce n'est pas un caprice de mise en page. Les mêmes gens ouvrent les deux
 * applications dans la même journée. Deux portes qui se ressemblent se
 * reconnaissent, et une porte qu'on reconnaît est une porte devant laquelle on
 * hésite moins à taper son mot de passe. Une différence franche entre deux
 * portes du même trousseau apprend exactement l'inverse.
 *
 * `tokens.css` est une COPIE de Mon Pilote et ne se modifie pas ici : cette
 * feuille n'y touche pas. Elle lui emprunte l'espacement, les rayons et la
 * police, qui, eux, concordent.
 */

/* ── Le relevé de la page de Mon Pilote ─────────────────────────────────── */
:root {
  --cx-bg: #ffffff;
  --cx-bg-champ: #f6f6f6;
  --cx-t1: #181b24;
  --cx-t2: #6b7280;
  --cx-t3: #9aa0ad;
  --cx-label: #374151;
  --cx-bd: #e5e7eb;
  --cx-rose: #dc179b;
  --cx-anneau: rgba(220, 23, 155, 0.15);
  /* Le panneau de droite : gris très clair en clair, presque noir en sombre —
     c'est la teinte intégrée aux illustrations de Mon Pilote, reprise telle
     quelle pour que le raccord entre les deux applications soit invisible. */
  --cx-scene-bg: #f6f6f6;
  --cx-scene-t1: #181b24;
  --cx-scene-t2: #4b5563;
  --cx-carte-bg: #ffffff;
  --cx-carte-bd: rgba(24, 27, 36, 0.07);
  /* Le bouton SSO : le bleu Interstis, celui du bouton « collaborateurs » de
     Mon Pilote — pas le rose, qui est celui du bouton principal. Deux portes
     de la meme couleur se disputeraient le regard. */
  --cx-sso-bg: #ffffff;
  --cx-sso-survol: #f2f2ff;
  --cx-sso-puce: #e8e8ff;
  --cx-sso-fg: #4541ff;
}
[data-theme="dark"] {
  --cx-bg: #13151c;
  --cx-bg-champ: #1e212b;
  --cx-t1: #f2f4f8;
  --cx-t2: #9aa1b0;
  --cx-t3: #6e7484;
  --cx-label: #c3c8d2;
  --cx-bd: #2a2e3a;
  --cx-anneau: rgba(220, 23, 155, 0.28);
  --cx-scene-bg: #0c0e12;
  --cx-scene-t1: #f2f4f8;
  --cx-scene-t2: #9aa1b0;
  --cx-carte-bg: #1a1d26;
  --cx-carte-bd: rgba(255, 255, 255, 0.08);
  --cx-sso-bg: #1a1d26;
  --cx-sso-survol: #191a2b;
  --cx-sso-puce: rgba(69, 65, 255, 0.22);
  --cx-sso-fg: #b4b2ff;
}

/* ── La coque ───────────────────────────────────────────────────────────── */
.ck-cx-body { margin: 0; padding: 0; min-height: 100vh; display: block;
  background: var(--cx-bg); font-family: var(--font-sans); }
.ck-cx, .ck-cx * { box-sizing: border-box; }
.ck-cx { display: flex; min-height: 100vh; width: 100%;
  background: var(--cx-bg); color: var(--cx-t1);
  transition: background-color .22s ease, color .22s ease; }

/* ── Panneau gauche : la marque, puis le formulaire ─────────────────────── */
.ck-cx-gauche { flex: 1 1 50%; display: flex; flex-direction: column;
  padding: 48px 56px; min-width: 0; }

.ck-cx-haut { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; }
.ck-cx-lockup { display: flex; align-items: center; gap: 12px; }
.ck-cx-logo { width: 46px; height: 46px; flex: none; display: block; }
.ck-cx-nom { display: flex; flex-direction: column; line-height: 1.1; }
.ck-cx-nom-1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--cx-t1); }
.ck-cx-nom-2 { font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cx-t3); margin-top: 3px; }

/* Le bouton de thème porte `data-bascule-theme` : `theme.js` câble tous les
   boutons qui l'ont, sans une ligne de script de plus ici. */
.ck-cx-theme { width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 10px; border: 1px solid var(--cx-bd);
  background: var(--cx-bg); color: var(--cx-t2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s, border-color .16s; }
.ck-cx-theme:hover { border-color: var(--cx-t3); }
/* Une seule des deux icônes : celle du thème vers lequel on VA. Montrer celui
   où l'on est ferait un bouton qui a l'air déjà enfoncé. */
[data-theme="light"] .ck-cx-soleil { display: none; }
[data-theme="dark"] .ck-cx-lune { display: none; }

.ck-cx-aire { flex: 1; display: flex; flex-direction: column;
  justify-content: center; }
.ck-cx-bloc { width: 100%; max-width: 380px; margin: 0 auto; }

.ck-cx-titre { font-size: 34px; font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 8px; color: var(--cx-t1); text-align: left; }
.ck-cx-sous { font-size: 15px; color: var(--cx-t2); margin: 0 0 8px;
  line-height: 1.5; text-align: left; }

/* Les trois traits de couleur, mêmes longueurs et mêmes teintes. */
.ck-cx-barre { display: flex; gap: 6px; margin: 14px 0 34px; }
.ck-cx-barre span { height: 4px; border-radius: 99px; }
.ck-cx-barre .ck-cx-cb1 { width: 26px; background: #dc179b; }
.ck-cx-barre .ck-cx-cb2 { width: 14px; background: #00af9f; }
.ck-cx-barre .ck-cx-cb3 { width: 14px; background: #ff7a1a; }

/* ── Le formulaire ──────────────────────────────────────────────────────────
   Il continue d'être écrit avec le macro `champ()` : c'est lui qui porte
   `autocomplete`, donc la possibilité d'un mot de passe long qu'on ne retient
   pas. On le REHABILLE ici, on ne le recopie pas — un second formulaire écrit
   à la main perdrait cet attribut au premier oubli.

   Mon Pilote demande l'adresse, PUIS le mot de passe : c'est chez lui la
   condition d'un aiguillage SSO qui se décide sur le domaine de l'adresse.
   Cockpit n'a pas cet aiguillage. Reproduire les deux temps y mettrait un
   écran de plus devant le mot de passe sans rien en faire. */
.ck-cx-form { display: flex; flex-direction: column; align-items: stretch;
  gap: 0; }
.ck-cx-form .ck-form-ligne { display: block; margin: 0 0 18px; }
.ck-cx-form .ck-label { display: block; font-size: 13px; font-weight: 600;
  color: var(--cx-label); margin-bottom: 8px; }
.ck-cx-form .ck-champ { width: 100%; height: 50px; padding: 0 16px;
  font-family: inherit; font-size: 15px; color: var(--cx-t1);
  background: var(--cx-bg-champ); border: 1px solid var(--cx-bd);
  border-radius: 10px; transition: border-color .16s, box-shadow .16s; }
.ck-cx-form .ck-champ:focus { outline: none; border-color: var(--cx-rose);
  box-shadow: 0 0 0 3px var(--cx-anneau); }
.ck-cx-form .ck-champ::placeholder { color: var(--cx-t3); }

.ck-cx-entrer { width: 100%; height: 52px; margin-top: 20px; border: none;
  border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 15px;
  font-weight: 700; color: #ffffff;
  background: linear-gradient(135deg, #dc179b 0%, #b8117f 100%);
  transition: filter .16s, box-shadow .16s; }
.ck-cx-entrer:hover { filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(220, 23, 155, 0.36); }
.ck-cx-entrer:active { filter: brightness(0.96); }

/* ── Les deux temps ─────────────────────────────────────────────────────────
   Le masquage n'existe QUE sous `.ck-cx-js`, une classe posee par
   `connexion.js` au chargement. Sans script, les deux temps s'affichent
   ensemble et le formulaire fonctionne d'un seul tenant : masquer par defaut
   aurait rendu la page inutilisable au premier incident de chargement, et une
   page de connexion cassee ne se contourne pas. */
.ck-cx-form.ck-cx-js .ck-cx-etape.ck-cx-off { display: none; }
.ck-cx-fleche { display: inline-block; margin-left: 4px; }

/* L'adresse retenue, avec le chemin du retour a cote d'elle. Sans ce retour,
   corriger une faute de frappe demanderait de recharger la page. */
.ck-cx-fige { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 14px; margin: 0 0 18px; border-radius: 10px;
  background: var(--cx-bg-champ); border: 1px solid var(--cx-bd); }
.ck-cx-fige-adresse { font-size: 14px; font-weight: 600; color: var(--cx-t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cx-changer { flex: none; border: none; background: none; padding: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--cx-rose); cursor: pointer; white-space: nowrap; }
.ck-cx-changer:hover { text-decoration: underline; }

/* ── L'autre porte ──────────────────────────────────────────────────────── */
.ck-cx-ou { display: flex; align-items: center; gap: 14px; margin: 28px 0 16px; }
.ck-cx-ou-trait { flex: 1; height: 1px; background: var(--cx-bd); }
.ck-cx-ou-txt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--cx-t3); }

/* L'anneau conique tourne autour du bouton : c'est le meme signe que sur la
   page de Mon Pilote, et le sens de rotation y est INVERSE de celui du bouton
   principal — ici il n'y a qu'un bouton, on garde le sens du sien. La comete
   est un pseudo-element large qui tourne DERRIERE le bouton ; c'est le
   `padding` de 1.6 px du cadre qui la laisse depasser, et rien d'autre. */
@keyframes ck-cx-tour { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ck-cx-sso-cadre { position: relative; border-radius: 11px; padding: 1.6px;
  background: var(--cx-bd); overflow: hidden; }
.ck-cx-sso-cadre::before { content: ''; position: absolute; top: 50%; left: 50%;
  width: 680px; height: 680px; transform: translate(-50%, -50%);
  animation: ck-cx-tour 3.4s linear infinite; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 290deg,
    #cfceff 312deg, #4541ff 338deg, #ffffff 350deg, #4541ff 360deg); }
.ck-cx-sso { position: relative; z-index: 1; width: 100%; height: 50px;
  border: none; border-radius: 9.6px; background: var(--cx-sso-bg);
  cursor: pointer; font-family: inherit; display: flex; align-items: center;
  gap: 12px; padding: 0 14px; text-decoration: none;
  transition: background .16s; }
.ck-cx-sso:hover { background: var(--cx-sso-survol); }
.ck-cx-sso-puce { width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-sso-puce); }
.ck-cx-sso-point { width: 13px; height: 13px; border-radius: 50%;
  background: #4541ff; }
.ck-cx-sso-txt { flex: 1; text-align: left; font-size: 14.5px;
  font-weight: 600; color: var(--cx-t1); }
.ck-cx-sso-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  border-radius: 5px; padding: 4px 7px; color: var(--cx-sso-fg);
  background: var(--cx-sso-puce); }

.ck-cx-avis, .ck-cx-erreur { display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.45; padding: 12px 14px; border-radius: 10px;
  margin: 0 0 18px; }
.ck-cx-erreur { color: #9e1058; background: #fdeaf5;
  border: 1px solid rgba(220, 23, 155, 0.28); }
.ck-cx-avis { color: #102c96; background: #eaeeff;
  border: 1px solid rgba(69, 65, 255, 0.24); }
[data-theme="dark"] .ck-cx-erreur { color: #f5a6d4;
  background: rgba(220, 23, 155, 0.14); }
[data-theme="dark"] .ck-cx-avis { color: #b4b2ff;
  background: rgba(69, 65, 255, 0.16); }

.ck-cx-pied { font-size: 12.5px; color: var(--cx-t3); text-align: center;
  margin: 22px 0 0; }

/* ── Panneau droit : la scène ───────────────────────────────────────────────
   Mon Pilote y sert une illustration de son produit. Elle porte SA marque et
   une capture de SES écrans : la reprendre ici afficherait Mon Pilote sur la
   porte de Cockpit, ce qui est exactement l'inverse de ce qu'une page
   d'authentification doit faire.
   On garde donc la composition — panneau clair, accroche en gros, une carte,
   une pastille — avec le seul signe que Cockpit possède : son logo. */
.ck-cx-droite { flex: 1 1 50%; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 60px; background: var(--cx-scene-bg);
  transition: background-color .22s ease; }
.ck-cx-scene { position: relative; width: 100%; max-width: 520px;
  margin: 0 auto; }

.ck-cx-bandeau { display: flex; align-items: center; gap: 22px;
  margin-bottom: 40px; }
.ck-cx-embleme { width: 92px; height: 92px; flex: none; display: block; }
.ck-cx-bandeau h2 { font-size: 52px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.03em; color: var(--cx-scene-t1); margin: 0;
  text-align: left; }

.ck-cx-carte { background: var(--cx-carte-bg); border: 1px solid var(--cx-carte-bd);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 12px 32px rgba(24, 27, 36, 0.08); }
.ck-cx-carte p { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 700;
  color: var(--cx-scene-t1); }
.ck-cx-carte span { display: block; margin-top: 8px; font-size: 14px;
  font-weight: 500; line-height: 1.5; color: var(--cx-scene-t2); }

.ck-cx-pilule { display: inline-flex; align-items: center; gap: 10px;
  margin: 18px 0 0 22px; padding: 10px 18px 10px 12px; border-radius: 99px;
  font-size: 15px; font-weight: 700; color: #ffffff;
  background: linear-gradient(135deg, #dc179b 0%, #b8117f 100%);
  box-shadow: 0 10px 26px rgba(220, 23, 155, 0.3); }
.ck-cx-pilule i { width: 24px; height: 24px; flex: none; border-radius: 99px;
  background: rgba(255, 255, 255, 0.22); display: flex; align-items: center;
  justify-content: center; font-style: normal; font-size: 13px; }

/* ── Étroit ─────────────────────────────────────────────────────────────────
   Sous 900 px la scène disparaît : la réduire donnerait une bande qui
   occuperait la moitié d'un écran de téléphone sans rien y dire. */
@media (max-width: 900px) {
  .ck-cx-droite { display: none; }
  .ck-cx-gauche { flex-basis: 100%; padding: 40px 24px; }
}
@media (max-width: 480px) {
  .ck-cx-gauche { padding: 28px 18px; }
  .ck-cx-titre { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-cx, .ck-cx-droite, .ck-cx-theme, .ck-cx-entrer { transition: none; }
  /* Une comete qui tourne en boucle est exactement ce que ce reglage demande
     d'arreter. Le cadre reste, et le bouton se lit pareil. */
  .ck-cx-sso-cadre::before { animation: none; }
}