/* ================================================================
   KOPHI'S MUSIC — Login Page CSS v3.1
   Centrage parfait · Copyright sur 1 ligne · Full height
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;700&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ── PAGE ──────────────────────────────────────────────────── */
.km-login-page {
  font-family:'DM Sans',system-ui,sans-serif;
  background:#07090F;
  min-height:100vh;
  display:flex;
  align-items:stretch;
}

/* ── GRILLE 2 colonnes ─────────────────────────────────────── */
.km-login-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  min-height:100vh;
}

/* ══════════════════════════════════════════════════════════════
   PANNEAU GAUCHE — BRANDING
══════════════════════════════════════════════════════════════ */
.km-login-brand {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(145deg, #070A14 0%, #0C1428 50%, #080D1C 100%);
  border-right:1px solid rgba(245,166,35,.12);
  overflow:hidden;
  padding:40px 32px;
  min-height:100vh;
}

/* Vinyle décoratif */
.km-brand-vinyl {
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.04) 0%, transparent 70%);
  border:1px solid rgba(245,166,35,.06);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.km-brand-vinyl::before {
  content:'';
  position:absolute; inset:60px;
  border-radius:50%;
  border:1px solid rgba(245,166,35,.04);
}
.km-brand-vinyl::after {
  content:'';
  position:absolute; inset:140px;
  border-radius:50%;
  border:1px solid rgba(245,166,35,.06);
  background:radial-gradient(circle, rgba(245,166,35,.03) 0%, transparent 60%);
}

/* Logo — en haut */
.km-brand-logo {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  margin-bottom:0;
}
.km-brand-logo img { height:52px; width:auto; filter:brightness(1.08); }
.km-brand-logo-fallback {
  width:52px; height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,#F5A623,#C9940E);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:900; font-size:1.4rem; color:#0D0D1A;
}
.km-brand-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.km-brand-logo-text strong { font-family:'Outfit',sans-serif; font-size:1rem; font-weight:900; color:#EEF2FF; letter-spacing:-.01em; }
.km-brand-logo-text span  { font-size:.65rem; font-weight:600; color:#F5A623; letter-spacing:.12em; text-transform:uppercase; }

/* Contenu central — centré verticalement en absolu */
.km-brand-content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:100%;
  padding:0 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.km-brand-content h2 {
  font-family:'Outfit',sans-serif;
  font-size:2.4rem;
  font-weight:900;
  color:#EEF2FF;
  letter-spacing:-.04em;
  line-height:1.15;
}
.km-brand-content h2 em {
  font-style:normal;
  background:linear-gradient(135deg,#F5A623,#FFCF6E);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.km-brand-tagline {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.km-brand-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:rgba(245,166,35,.07);
  border:1px solid rgba(245,166,35,.2);
  border-radius:30px;
  font-size:.72rem; font-weight:700;
  color:#C4A84A;
  letter-spacing:.05em;
}

.km-brand-notes {
  position:absolute;
  font-size:3rem; opacity:.04; pointer-events:none;
  z-index:1;
  letter-spacing:.3em;
  top:50%; left:50%; transform:translate(-50%,-50%);
  white-space:nowrap;
}

/* Copyright — en bas absolu */
.km-brand-copyright {
  position:absolute;
  bottom:24px;
  left:0; right:0;
  z-index:2;
  text-align:center;
  padding:0 24px;
}
.km-copyright-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px 10px;
  flex-wrap:wrap;
  font-size:.66rem;
  color:#B8C8DC;
  line-height:1.5;
}
.km-copyright-line .km-sep {
  color:#F5A623;
  opacity:.6;
  font-size:.6rem;
}
.km-copyright-sub { color:#7A8FAA; margin-top:3px; }

/* ══════════════════════════════════════════════════════════════
   PANNEAU DROIT — FORMULAIRE
══════════════════════════════════════════════════════════════ */
.km-login-form-panel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:48px 40px;
  min-height:100vh;
  background:#07090F;
  overflow-y:auto;
}

.km-login-form-panel > * { width:100%; max-width:380px; }

.km-login-form-panel h1 {
  font-family:'Outfit',sans-serif;
  font-size:1.9rem; font-weight:900;
  color:#EEF2FF;
  letter-spacing:-.04em;
  margin-bottom:8px;
  line-height:1.1;
}
.km-subtitle {
  font-size:.82rem;
  color:#5A6A8A;
  margin-bottom:32px;
  line-height:1.5;
}

/* Alerte */
.km-alert {
  padding:12px 16px;
  border-radius:8px;
  font-size:.82rem;
  margin-bottom:20px;
  border:1px solid transparent;
}
.km-alert-error {
  background:rgba(255,78,106,.08);
  border-color:rgba(255,78,106,.25);
  color:#FF6B84;
}

/* Champs formulaire */
.km-field { margin-bottom:18px; }
.km-field label {
  display:block;
  font-size:.72rem;
  font-weight:700;
  color:#7A8FAA;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.km-field input {
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.09);
  border-radius:10px;
  color:#EEF2FF;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;
}
.km-field input:focus {
  border-color:#F5A623;
  background:rgba(245,166,35,.04);
  box-shadow:0 0 0 3px rgba(245,166,35,.1);
}
.km-field input::placeholder { color:#3D4E68; }

/* Remember */
.km-remember {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:#5A6A8A;
  cursor:pointer;
  margin-bottom:24px;
  user-select:none;
}
.km-remember input[type=checkbox] { accent-color:#F5A623; width:15px; height:15px; }

/* Bouton connexion */
.km-btn-login {
  display:block;
  width:100%;
  padding:14px 24px;
  background:linear-gradient(135deg,#F5A623,#E09400);
  border:none;
  border-radius:10px;
  color:#07090F;
  font-family:'Outfit',sans-serif;
  font-size:.95rem; font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  margin-bottom:24px;
}
.km-btn-login:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(245,166,35,.35);
}
.km-btn-login:active { transform:translateY(0); }

/* Footer form */
.km-login-footer {
  text-align:center;
  margin-top:16px;
}
.km-login-footer a {
  color:#F5A623;
  text-decoration:none;
  font-size:.78rem;
  opacity:.8;
  transition:opacity .15s;
}
.km-login-footer a:hover { opacity:1; text-decoration:underline; }

.km-login-divider {
  text-align:center;
  margin:16px 0;
  font-size:.68rem;
  color:#2A3550;
  position:relative;
}
.km-login-divider::before {
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  height:1px;
  background:rgba(255,255,255,.06);
}
.km-login-divider span { background:#07090F; padding:0 14px; position:relative; color:#2A3550; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:900px) {
  .km-login-grid { grid-template-columns:1fr; }
  .km-login-brand { min-height:280px; padding:32px 24px 64px; }
  .km-brand-content { position:relative; top:auto; left:auto; transform:none; padding:0; margin:20px 0; }
  .km-brand-content h2 { font-size:1.8rem; }
  .km-brand-copyright { position:static; margin-top:20px; }
  .km-brand-vinyl { width:300px; height:300px; }
  .km-login-form-panel { min-height:auto; padding:40px 28px; }
}
@media (max-width:480px) {
  .km-login-brand { padding:24px 20px 56px; }
  .km-brand-content h2 { font-size:1.5rem; }
  .km-login-form-panel { padding:32px 20px; }
  .km-brand-logo img { height:40px; }
}