/* /assets/auth.css */
:root{
  --tapluk-1:#FA8C24; --tapluk-2:#FDBB2D; --tapluk-3:#10C16E;
  --tapluk-4:#04BFD8; --tapluk-5:#1E78FF; --tapluk-6:#7A39C5;
  --ink:#101828; --ink-soft:#667085; --card:#ffffff;
  --radius-xl:28px; --radius-lg:20px;
  --bg:#f5f7fb;
}

html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
.app{ display:flex; flex-direction:column; min-height:100dvh; }

/* App bar */
.appbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:center;
  height:60px; padding:0 16px;
  background: linear-gradient(90deg,var(--tapluk-6),var(--tapluk-5),var(--tapluk-4));
  color:#fff; border-bottom:1px solid rgba(255,255,255,.15);
  z-index:10;
}
.appbar .brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; }
.appbar .brand img{ height:62px; display:block; }

/* Carte centrale “style app” */
.sheet{
  background:var(--card);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: clamp(16px, 4.5vw, 28px);
  width:min(92vw, 560px);
  margin: 24px auto;
}

/* Titres, sous-titres, logo */
.title{ font-size:1.25rem; font-weight:800; text-align:center; color:#111827; }
.subtitle{ font-size:.95rem; color:var(--ink-soft); text-align:center; margin-top:6px; margin-bottom:18px; }
.logo-wrap{ display:flex; justify-content:center; margin-bottom:6px; }
.logo-wrap img{ height:46px; }

/* Formulaires */
.form-label{ font-weight:600; color:#111827; }
.form-control,.form-select{
  border-radius: 14px !important;
  padding: 14px 14px;
  border:1px solid #e7e7e7;
  box-shadow:none !important;
  font-size:16px;
}
.form-control:focus,.form-select:focus{
  border-color: var(--tapluk-5);
  box-shadow: 0 0 0 4px rgba(30,120,255,.15) !important;
}
.input-group .btn{ border-radius:14px; }

/* Boutons */
.btn-primary{
  background: linear-gradient(90deg,var(--tapluk-6),var(--tapluk-5));
  border:none; border-radius:16px; padding:14px 16px; font-weight:700;
  letter-spacing:.2px;
}
.btn-google{
  border-radius:16px; padding:12px 14px; font-weight:700;
  border:1px solid #e6e6e6; background:#fff;
}

/* séparateur “ou” et liens */
.or{
  display:flex; align-items:center; gap:10px; color:#98A2B3; font-size:.9rem; margin:10px 0 4px;
}
.or::before,.or::after{ content:""; height:1px; flex:1; background:#e8e8e8; }
.links{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; text-align:center;
}
.links a{ color:#344054; text-decoration:none; font-weight:600; }
.links a:hover{ text-decoration:underline; }

/* Jauge et checklist MDP */
.pw-meter{ height:8px; border-radius:999px; background:#e9ecef; overflow:hidden; }
.pw-meter > span{ display:block; height:100%; width:0%; transition:width .25s ease; }

/* Petites adaptations mobile */
@media (max-width: 576px){
  .title{ font-size:1.2rem; }
  .form-control,.form-select{ font-size:17px; padding:16px 14px; }
  .btn, .btn-google{ font-size:17px; padding:14px; }
}

/* Optionnel: input login en minuscules si utilisé */
input[name="utilisateur"]{ text-transform: lowercase; }