/* =============================================================================
   Quanto — écran de connexion (repris de BatiPrisme)
   Cf. docs/cahier-des-charges-login.md

   Toutes les règles sont portées par `.cnx` et les classes sont préfixées :
   `app.css` définit déjà `.login-card`, `.field`, `.btn` et `.alert`, et les
   réutiliser ferait hériter de leurs styles (piège rencontré sur la refonte
   Consultations, où `.modal{max-width:580px}` bridait une modale de 1360 px).

   Jetons relevés sur https://preprod.batiprisme.fr/login, puis transposés avec
   l'accent de Quanto : orange #E8590C sur fond clair, #FF922B sur fond sombre
   (cf. static/batiprisme/css/tokens.css, deux nuances déjà définies).
   ============================================================================= */

.cnx {
  /* Dégradé du panneau de marque. Le 3e arrêt est LA variable du cahier des
     charges. Retenu le 2026-09-18 : la variante orange, qui tire vers l'accent
     Quanto au lieu de l'ardoise de BatiPrisme. La variante sobre reste à un
     mot près (`--cnx-degrade-fin: #4a5770`). */
  --cnx-degrade-fin: #b4531a;
  --cnx-accent: #e8590c;        /* fond clair : bouton principal, liens */
  --cnx-accent-sombre: #ff922b; /* fond sombre : badge, chiffres clés */
  --cnx-encre: #0f172a;
  --cnx-champ: #f2f4f6;
  --cnx-bord: #cbd5e1;
  --cnx-gris: #475569;

  min-height: 100vh;
  /* Blanc et non le gris du `body` : c'est ce qui apparaît derrière
     l'arrondi, là où le panneau sombre se retire. */
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cnx-encre);
}
/* Variante sobre (ardoise, comme BatiPrisme) : une seule ligne à basculer. */
.cnx--sobre { --cnx-degrade-fin: #4a5770; }

/* ---- panneau de marque -------------------------------------------------- */
.cnx-marque {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Bloc centré horizontalement, texte aligné à gauche à l'intérieur : c'est
     la disposition de l'écran de référence, où le contenu n'est pas collé au
     bord mais posé au milieu du panneau. */
  align-items: center;
  padding: 56px 48px;
  background: linear-gradient(155deg, #0f172a 0%, #1a2440 52%, var(--cnx-degrade-fin) 100%);
  color: #fff;
  /* Séparation arrondie plutôt qu'une arête droite.

     Le panneau DÉBORDE de sa colonne (`margin-right` négatif) et c'est ce
     débord que le rayon elliptique vient creuser : l'arc se dessine alors
     par-dessus le volet blanc. Sans ce débord, le rayon creusait la boîte du
     panneau lui-même et laissait voir le gris du `body` en haut et en bas de
     l'arête — c'est le défaut signalé le 2026-09-18.

     La flèche est volontairement faible — 14 px sur 900 de haut. L'écran de
     référence a une séparation quasiment droite ; à 64 px puis à 28 px la
     courbe restait trop dessinée, et ses extrémités « tournaient » trop vite
     en haut et en bas. C'est le seul réglage à toucher pour l'accentuer. */
  margin-right: -14px;
  border-top-right-radius: 14px 50%;
  border-bottom-right-radius: 14px 50%;
  z-index: 1;
}
/* Titre, accroche et description centrés (comme la référence) ; les
   cartes de chiffres gardent leur alignement à gauche. */
.cnx-contenu { width: 100%; max-width: 330px; text-align: center; }
/* Cercles décoratifs, en `pointer-events:none` pour ne jamais gêner le focus. */
.cnx-marque::before,
.cnx-marque::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}
.cnx-marque::before { width: 420px; height: 420px; top: -120px; right: -110px; }
.cnx-marque::after { width: 300px; height: 300px; bottom: -130px; left: -90px; }
.cnx-contenu { position: relative; }

.cnx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--cnx-accent-sombre);
  color: var(--cnx-encre);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.cnx-accroche { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.cnx-titre {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 14px;
  color: #fff;
}
.cnx-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 38px;
}
.cnx-chiffres { display: flex; flex-direction: column; gap: 10px; }
/* Carte translucide, relevée sur l'écran de référence : fond blanc à 5 %,
   filet à 8 %, rayon 12 px, 12/16 de padding. */
.cnx-chiffre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}
.cnx-chiffre-valeur {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cnx-accent-sombre);
  font-variant-numeric: tabular-nums;
  /* `nowrap` et une colonne assez large : sans ça « −40 % » se coupait entre
     le nombre et le signe, sur deux lignes. */
  white-space: nowrap;
  flex: 0 0 74px;
}
.cnx-chiffre-libelle { font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* ---- panneau formulaire ------------------------------------------------- */
.cnx-volet {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fff;
}
.cnx-carte { width: 100%; max-width: 400px; }
.cnx-carte h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--cnx-encre);
}
.cnx-sous-titre {
  font-size: 13.5px;
  color: var(--cnx-gris);
  text-align: center;
  margin: 4px 0 26px;
}
.cnx-champ { margin-bottom: 16px; }
.cnx-champ label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnx-gris);
  margin-bottom: 7px;
}
.cnx-champ input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--cnx-champ);
  font-family: inherit;
  font-size: 15px;
  color: var(--cnx-encre);
}
.cnx-champ input::placeholder { color: #94a3b8; }
.cnx-champ input:focus {
  outline: none;
  border-color: var(--cnx-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.14);
}
/* Place pour l'œil. La bascule change `type`, d'où les deux sélecteurs. */
.cnx .field-password { position: relative; }
.cnx .field-password input[type="password"],
.cnx .field-password input[type="text"] { padding-right: 46px; }
.cnx .password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: #94a3b8;
  cursor: pointer;
}
.cnx .password-toggle:hover { color: var(--cnx-encre); background: rgba(15, 23, 42, 0.05); }
.cnx .password-toggle:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 1px; }
.cnx .password-toggle .ic { width: 18px; height: 18px; }
.cnx .password-toggle .password-toggle-off { display: none; }
.cnx .password-toggle.is-on .password-toggle-on { display: none; }
.cnx .password-toggle.is-on .password-toggle-off { display: inline-flex; }

.cnx-oubli { text-align: right; margin: -6px 0 20px; }
.cnx-oubli a { font-size: 12.5px; color: var(--cnx-gris); text-decoration: none; }
.cnx-oubli a:hover { color: var(--cnx-accent); text-decoration: underline; }

.cnx-envoyer {
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 12px;
  background: var(--cnx-accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.cnx-envoyer:hover { background: #d24f09; }
.cnx-envoyer:focus-visible { outline: 2px solid var(--cnx-encre); outline-offset: 2px; }
.cnx-envoyer[disabled] { background: #b4531a; cursor: default; }
.cnx-envoyer .ic { width: 17px; height: 17px; }
.cnx-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cnx-rotation 0.7s linear infinite;
}
@keyframes cnx-rotation { to { transform: rotate(360deg); } }

.cnx-message {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #a4342b;
  font-size: 13px;
  line-height: 1.5;
}
.cnx-erreur-champ { margin-top: 6px; font-size: 12.5px; color: #a4342b; }

/* ---- animations : coupées si le système le demande ----------------------- */
@keyframes cnx-apparition {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.cnx-contenu > *, .cnx-carte { animation: cnx-apparition 0.45s ease both; }
.cnx-carte { animation-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) {
  .cnx-contenu > *, .cnx-carte { animation: none; }
  .cnx-spin { animation: none; }
}

/* ---- responsive ---------------------------------------------------------
   `base.html` bloque l'application sous 1024 px (`.responsive-guard`), SAUF
   sur cette page (classe `ecran-libre`, 2026-10-17) : le connecteur Claude
   fait se connecter depuis le navigateur du téléphone. Ces règles servent
   donc pour de vrai.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cnx { grid-template-columns: 1fr; }
  .cnx-marque {
    position: sticky;
    top: 0;
    border-radius: 0;
    margin-right: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
  }
  .cnx-marque::before, .cnx-marque::after,
  .cnx-accroche, .cnx-desc, .cnx-chiffres { display: none; }
  .cnx-contenu { display: flex; align-items: center; gap: 12px; max-width: none; }
  .cnx-badge { width: 32px; height: 32px; font-size: 14px; margin: 0; }
  .cnx-titre { font-size: 19px; margin: 0; }
  .cnx-volet { align-items: flex-start; padding-top: 32px; }
}
@media (max-width: 480px) {
  .cnx-carte h2 { font-size: 22px; }
}