/* ==========================================================================
   ProCareLink — Connexion (2 espaces sécurisés)
   Le thème (rose Soignant / teal ProCareLink) est piloté par l'attribut
   data-space sur .login. ⚠️ Pas de transition CSS sur le fond des onglets
   (piège documenté dans le README du handoff).
   ========================================================================== */

.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg)}

.login[data-space="soignant"]{
  --accent:var(--rose);
  --accent-tint:rgba(214,38,107,0.18);
  --accent-shadow:rgba(214,38,107,0.32);
  --note-bg:var(--rose-50);
  --note-text:#7A4A60;
}
.login[data-space="operationnel"]{
  --accent:var(--teal);
  --accent-tint:rgba(31,158,146,0.18);
  --accent-shadow:rgba(31,158,146,0.30);
  --note-bg:var(--teal-50);
  --note-text:#1A6B62;
}

/* --------------------------------------------------------------------------
   Panneau de marque (gauche, clair)
   -------------------------------------------------------------------------- */
.brand-panel{position:relative;background:#FFFFFF;color:var(--ink);padding:46px 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:100vh}
.panel-blob-1{position:absolute;right:-150px;top:-130px;width:520px;height:520px;border-radius:46% 54% 52% 48%;background:linear-gradient(150deg,var(--rose-50),var(--cream))}
.panel-blob-2{position:absolute;left:-150px;bottom:-150px;width:420px;height:420px;border-radius:54% 46% 48% 52%;background:var(--teal-50)}
.panel-blob-3{position:absolute;right:90px;top:300px;width:120px;height:120px;border-radius:50%;background:var(--rose-50);opacity:0.8}
.panel-watermark{position:absolute;right:64px;bottom:150px;width:120px;height:auto;opacity:0.10}

.panel-brand{position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px;align-self:flex-start}
.panel-brand img{height:32px;width:auto;display:block}
.panel-brand span{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--ink)}

.panel-body{position:relative;z-index:2;max-width:440px}
.space-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:100px;margin-bottom:22px;background:var(--accent);border:1px solid transparent}
.space-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.space-badge span:last-child{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#fff}
.panel-body h1{font-family:var(--font-display);font-weight:800;font-size:42px;line-height:1.0;letter-spacing:-0.035em;margin:0 0 16px;text-wrap:balance;color:var(--ink)}
.panel-body .panel-desc{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 28px}

.panel-bullets{display:flex;flex-direction:column;gap:12px}
.panel-bullet{display:flex;gap:13px;align-items:flex-start}
.panel-bullet-icon{flex:none;width:30px;height:30px;border-radius:9px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-top:1px}
.panel-bullet-icon span{width:11px;height:11px;border-radius:3px;background:var(--accent)}
.panel-bullet-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.2}
.panel-bullet-desc{font-size:13px;color:var(--text);line-height:1.4;margin-top:2px}

.panel-reassure{position:relative;z-index:2;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}

/* --------------------------------------------------------------------------
   Carte de connexion (droite)
   -------------------------------------------------------------------------- */
.login-side{display:flex;align-items:center;justify-content:center;padding:48px 40px;min-height:100vh}
.login-card{width:100%;max-width:420px}

.login-head{margin-bottom:26px}
.login-title{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-0.03em;color:var(--ink);margin-bottom:6px}
.login-sub{font-size:14.5px;color:var(--text);line-height:1.5}

/* Segmented control — changement d'état instantané, sans transition */
.space-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--border);border-radius:14px;padding:5px;margin-bottom:26px}
.tab{height:42px;border:none;border-radius:10px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-0.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--muted)}
.tab svg{display:block}
.tab.active{background:#ffffff;box-shadow:0 2px 8px rgba(34,26,40,0.12)}
.tab-s.active{color:var(--rose)}
.tab-o.active{color:var(--teal)}

/* Champs */
.field{margin-bottom:16px}
.field.pw{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-strong);margin-bottom:7px}
.field input{width:100%;height:48px;border:1.5px solid var(--border-input);border-radius:12px;padding:0 15px;font-size:15px;color:var(--ink);background:#fff;transition:border-color 0.15s}
.field input:focus{border-color:var(--accent)}

.login-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.remember input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #CFC9D6;margin:0;cursor:pointer;background:#fff}
.remember input:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--accent)}
.forgot{font-size:13px;font-weight:600;color:var(--accent)}

.btn-login{width:100%;height:50px;border:none;border-radius:13px;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 24px var(--accent-shadow)}
.btn-login .arrow{font-size:17px}

.login-divider{display:flex;align-items:center;gap:14px;margin:22px 0}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--border-input)}
.login-divider span{font-size:12px;color:var(--muted)}

.btn-sso{width:100%;height:48px;border:1.5px solid var(--border-input);border-radius:13px;background:#fff;color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}

.login-note{margin-top:24px;background:var(--note-bg);border-radius:12px;padding:14px 16px;display:flex;gap:11px;align-items:flex-start}
.login-note-icon{flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:1px}
.login-note p{font-size:12.5px;line-height:1.5;color:var(--note-text);margin:0}

.login-help{margin-top:24px;text-align:center;font-size:13px;color:var(--text)}
.login-help a{font-weight:600;color:var(--accent)}

.login-back{margin-top:18px;text-align:center}
.login-back a{font-size:13px;color:var(--muted)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .brand-panel{display:none}
  .login-side{padding:40px 24px}
}