/* ============================================================
   TCRM — Page de connexion (layout spécifique)
   Dépend de design-system/tcrm.css (tokens + composants).
   ============================================================ */
body { background: var(--gray-100); }
.login { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 100vh; }

/* ---------- panneau marque (gauche) ---------- */
.left { position: relative; padding: var(--space-12) 56px; color: var(--white); overflow: hidden; background: var(--gray-900); display: flex; flex-direction: column; }
.left::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 8% 4%, rgba(255,255,255,.10) 0%, transparent 46%), linear-gradient(180deg, transparent, rgba(0,0,0,.14)); }
.left::after { content: ""; position: absolute; right: -130px; bottom: -130px; width: 380px; height: 380px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.14); }
.left .brand .name { color: var(--white); }
.left .brand .sub { color: rgba(255,255,255,.66); }
.left .lead { position: relative; margin-top: 64px; }
.left .lead h1 { font-weight: 700; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; max-width: 12ch; }
.left .lead p { margin-top: var(--space-4); font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 38ch; }
.left .features { position: relative; margin-top: var(--space-12); display: flex; flex-direction: column; }
.left .feat { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid rgba(255,255,255,.16); }
.left .feat:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.left .feat .fi { width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
.left .feat h3 { font-size: 14.5px; font-weight: 600; }
.left .feat span { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.45; display: block; margin-top: 3px; }
.left .statusrow { position: relative; margin-top: auto; padding-top: var(--space-10); display: flex; gap: var(--space-6); align-items: center; font-size: 13px; color: rgba(255,255,255,.74); }
.left .statusrow a { color: var(--white); text-decoration: none; font-weight: 600; }
.left .statusrow .badge-status { background: rgba(255,255,255,.14); color: var(--white); }
.left .statusrow .badge-status .g { box-shadow: 0 0 0 3px rgba(40,167,69,.4); }

/* ---------- panneau formulaire (droite) ---------- */
.right { display: flex; align-items: center; justify-content: center; padding: var(--space-12); }
.formcol { width: 100%; max-width: 436px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: var(--space-10); box-shadow: var(--shadow-lg); }
.formcol .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.formcol h2 { font-weight: 700; font-size: 30px; letter-spacing: -.01em; margin-top: var(--space-3); }
.formcol .desc { color: var(--gray-600); font-size: 15px; margin-top: var(--space-2); line-height: 1.5; }
.formcol .stack { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.foot-note { margin-top: var(--space-8); font-size: 13.5px; color: var(--gray-600); line-height: 1.5; }

@media (max-width: 880px) {
  .login { grid-template-columns: 1fr; }
  .left { display: none; }
  .right { padding: var(--space-6); }
}