/* ════════════════════════════════════════════════════════════════════
   Atlas Selfcare — Espace Client (fond clair, teal)
   AUTONOME : le parent=sobercloud ne cascade pas le CSS
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --sc-void: #f0f4f8;
  --sc-panel: #ffffff;
  --sc-surface: #f1f5f9;
  --sc-cyan: #0f766e;
  --sc-cyan-dim: #115e59;
  --sc-text-100: #0f172a;
  --sc-text-80: #334155;
  --sc-text-60: #64748b;
  --sc-text-40: #94a3b8;
  --sc-border: #e2e8f0;
  --sc-radius: 10px;
}

/* ── Global ── */
html.login-pf, body, .login-pf-page {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: var(--sc-void) !important;
  color: var(--sc-text-100) !important;
}

/* ── Header ── */
.login-pf-page-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 1.5rem 0 !important;
}
#kc-header-wrapper {
  font-size: 0 !important;
  text-align: center;
  color: transparent !important;
}
#kc-header-wrapper::before {
  content: '';
  display: block;
  width: 200px;
  height: 36px;
  margin: 0 auto;
  background: url('../img/logo.svg') center / contain no-repeat;
}

/* ── Card ── */
.card-pf {
  max-width: 440px !important;
  margin: 3rem auto !important;
  padding: 2rem 2.5rem !important;
  background: var(--sc-panel) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  
}

/* ── Nuke PF white borders ── */
.pf-c-form-control, .pf-c-button, .pf-c-input-group, #kc-form-login *, .card-pf {
  --pf-c-form-control--BorderTopColor: transparent !important;
  --pf-c-form-control--BorderRightColor: transparent !important;
  --pf-c-form-control--BorderBottomColor: transparent !important;
  --pf-c-form-control--BorderLeftColor: transparent !important;
  --pf-c-form-control--after--BorderBottomColor: transparent !important;
  --pf-c-form-control--before--BorderTopColor: transparent !important;
  --pf-c-form-control--before--BorderRightColor: transparent !important;
  --pf-c-form-control--before--BorderBottomColor: transparent !important;
  --pf-c-form-control--before--BorderLeftColor: transparent !important;
  --pf-c-button--after--BorderColor: transparent !important;
}

/* ── Title ── */
.login-pf-header { margin-bottom: 1.5rem !important; position: relative !important; }
#kc-page-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--sc-text-100) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ── Hide locale ── */
#kc-locale { display: none !important; }

/* ── Form fields ── */
/* La règle parent (sobercloud/login.css) gère désormais le flex + alignement
   inline du label et de son required marker. Ici on ne touche que la
   typo / margin si besoin. */
.form-group { margin-bottom: 1.25rem !important; }
.pf-c-form-control {
  background: #ffffff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.9375rem !important;
  color: var(--sc-text-100) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
}
.pf-c-form-control:focus {
  border-color: var(--sc-cyan) !important;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15) !important;
  outline: none !important;
}
::placeholder { color: var(--sc-text-40) !important; }

/* ── Password toggle ── */
.pf-c-input-group {
  display: flex !important;
  --pf-c-input-group--BackgroundColor: transparent !important;
  background-color: transparent !important;
}
.pf-c-input-group .pf-c-form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
.pf-c-button.pf-m-control {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--sc-text-60) !important;
  padding: 0 0.75rem !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Primary button ── */
.pf-c-button.pf-m-primary, #kc-login {
  background: linear-gradient(135deg, var(--sc-cyan), var(--sc-cyan-dim)) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.8rem 1.5rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Social / IDP — Google mis en avant ── */
/* Repositionne la section sociale AVANT le formulaire dans la carte. Flex
   sur le conteneur main + order:-1 sur la section sociale. Le visiteur voit
   d'abord "Continuer avec Google" (CTA primary), puis "Ou avec mon email" (form). */
.pf-c-login__main, #kc-content-wrapper, #kc-content {
  display: flex !important;
  flex-direction: column !important;
}
.kc-social-section {
  order: -1 !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  padding-top: 0 !important;
}
.kc-social-section hr {
  border: none !important;
  border-top: 1px solid var(--sc-border) !important;
  margin: 1.25rem 0 0 0 !important;
}
.kc-social-section h2,
.kc-social-section .login-pf-social-section-header {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--sc-text-60) !important;
  text-align: center !important;
  margin: 0 0 0.875rem 0 !important;
}
/* Bouton social principal — STYLE PRIMARY pour capter l'œil */
.kc-social-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  background: #ffffff !important;
  border: 2px solid var(--sc-cyan) !important;
  border-radius: 10px !important;
  color: var(--sc-text-100) !important;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08) !important;
}
.kc-social-item:hover {
  background: var(--sc-cyan) !important;
  border-color: var(--sc-cyan) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.18) !important;
}
.kc-social-item .kc-social-provider-logo,
.kc-social-item img,
.kc-social-item svg {
  width: 20px !important;
  height: 20px !important;
}
/* Séparateur "ou continuez avec votre email" entre social et form */
.kc-social-section::after {
  content: 'ou avec votre email' !important;
  display: block !important;
  text-align: center !important;
  font-size: 0.8125rem !important;
  color: var(--sc-text-40) !important;
  margin: 1rem 0 0.5rem !important;
  position: relative !important;
}
.pf-c-login__main-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pf-c-login__main-footer-links li { margin-bottom: 0.5rem !important; }

/* ── Links ── */
a { color: var(--sc-cyan) !important; text-decoration: none !important; }
a:hover { color: var(--sc-cyan-dim) !important; }
.kc-social-item, .kc-social-item:hover { color: var(--sc-text-100) !important; }

/* ── Registration / info ── */
#kc-registration, #kc-info {
  text-align: center !important; margin-top: 1.5rem !important;
  font-size: 0.875rem !important; color: var(--sc-text-60) !important;
}

/* ── Kill all PF outlines ── */
input, .pf-c-button, *, *::before, *::after { outline-color: transparent !important; }

/* ── Hide email duplicate ── */
/* Le realm atlas-selfcare expose à la fois #username (label "Email") et
   #email (label "Courriel") — doublon redondant côté UX. Le JS prefill.js
   ajoute data-atlas-hide="true" sur le form-group de #email et synchronise
   sa value avec #username. À fixer structurellement côté Keycloak admin
   (Realm Settings → "Email as username" + retirer email du User Profile). */
.form-group[data-atlas-hide="true"] { display: none !important; }

/* ── Responsive ── */
@media (max-width: 480px) { .card-pf { margin: 1rem !important; padding: 1.5rem !important; } }