:root {
      --teal: #00C9A7; --teal-dk: #00A888;
      --navy: #0A1628; --navy-md: #162A52;
      --text: #111827; --text-md: #374151; --text-mt: #6B7280;
      --bg: #fff; --bg-s: #F6F8FC;
      --bd: #E5E9F0; --bd-md: #D1D9E6;
      --err: #DC2626; --err-bg: #FEE2E2;
      --r: 11px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Manrope', sans-serif;
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* ── Left panel (navy) ── */
    .login-left {
      width: 45%;
      background: var(--navy);
      display: flex;
      flex-direction: column;
      padding: 48px 52px;
      position: relative;
      overflow: hidden;
    }
    .login-left::before {
      content: '';
      position: absolute;
      top: -120px; right: -120px;
      width: 380px; height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,201,167,.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .login-left::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -80px;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,201,167,.10) 0%, transparent 70%);
      pointer-events: none;
    }

    .login-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: auto;
    }
    .login-logo__icon {
      width: 40px; height: 40px;
      background: var(--teal);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .login-logo__icon svg { width: 22px; height: 22px; fill: var(--navy); }
    .login-logo__text {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.3px;
    }

    .login-hero {
      margin-top: auto;
      padding-bottom: 20px;
      position: relative;
      z-index: 1;
    }
    .login-hero__eyebrow {
      display: inline-block;
      background: rgba(0,201,167,.12);
      border: 1px solid rgba(0,201,167,.25);
      color: var(--teal);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 18px;
    }
    .login-hero h1 {
      font-size: 32px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -.6px;
      margin-bottom: 14px;
    }
    .login-hero h1 span { color: var(--teal); }
    .login-hero p {
      font-size: 14px;
      color: rgba(255,255,255,.55);
      line-height: 1.7;
      max-width: 340px;
    }

    .login-stats {
      display: flex;
      gap: 28px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .login-stat__value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 20px;
      font-weight: 700;
      color: var(--teal);
    }
    .login-stat__label {
      font-size: 11px;
      color: rgba(255,255,255,.4);
      margin-top: 3px;
      font-weight: 500;
    }

    /* ── Right panel (form) ── */
    .login-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-s);
      padding: 40px;
    }
    .login-form-wrap {
      width: 100%;
      max-width: 380px;
    }
    .login-form-wrap h2 {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px;
      margin-bottom: 6px;
    }
    .login-form-wrap p {
      font-size: 13.5px;
      color: var(--text-mt);
      margin-bottom: 28px;
    }

    .form-group { margin-bottom: 16px; }
    label {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-md);
      margin-bottom: 6px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid var(--bd-md);
      border-radius: var(--r);
      font-family: 'Manrope', sans-serif;
      font-size: 13.5px;
      color: var(--text);
      background: var(--bg);
      outline: none;
      transition: border-color .18s, box-shadow .18s;
    }
    input[type="text"]:focus, input[type="password"]:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,201,167,.15);
    }

    .btn-login {
      width: 100%;
      padding: 11px;
      background: var(--teal);
      color: var(--navy);
      border: none;
      border-radius: var(--r);
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
      transition: all .18s;
    }
    .btn-login:hover {
      background: var(--teal-dk);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,201,167,.3);
    }

    .alert-error {
      background: var(--err-bg);
      color: var(--err);
      border: 1px solid #FECACA;
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .login-footer {
      margin-top: 28px;
      text-align: center;
      font-size: 12px;
      color: var(--text-mt);
    }
    .login-footer a { color: var(--teal-dk); font-weight: 600; }

    @media (max-width: 768px) {
      .login-left { display: none; }
      .login-right { background: var(--bg); }
    }
/* Portail : logo AdaSwitch (fichier de l'admin) sur le panneau navy */
.login-logo img { width: 210px; height: auto; display: block; }
.login-form-wrap .info { background: #F0FBF8; color: #047857; border: 1px solid #A7F3D0; border-radius: var(--r); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.login-mobile-logo { display: none; background: var(--navy); border-radius: var(--r); padding: 10px 14px; margin-bottom: 24px; }
.login-mobile-logo img { width: 170px; display: block; }
@media (max-width: 768px) { .login-mobile-logo { display: block; } body { height: auto; min-height: 100vh; overflow: auto; } }