/* =====================================================
   BIEN DANS MES PATTES · Pages d'authentification
   =====================================================
   Connexion, création de compte, mot de passe oublié,
   réinitialisation, vérification d'email, renvoi de
   vérification et second facteur administrateur.

   Le vocabulaire de classes est inchangé pour que les
   pages existantes n'aient rien à modifier ; seules les
   valeurs viennent désormais de css/tokens.css.
   ===================================================== */

@import url("tokens.css");

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

.auth-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--bdmp-cream) 0%, var(--bdmp-cream-alt) 100%);
  color: var(--bdmp-ink);
  font-family: var(--bdmp-font-body);
  line-height: var(--bdmp-leading);
  -webkit-font-smoothing: antialiased;
}

.auth-page a { color: var(--bdmp-orange-dark); text-decoration: none; }
.auth-page a:hover { color: var(--bdmp-orange); }
.auth-page input, .auth-page button { font-family: inherit; }
.auth-page ::selection { background: var(--bdmp-orange); color: #fff; }
.auth-page :focus-visible { outline: 2px solid var(--bdmp-orange); outline-offset: 2px; }

/* ---------- En-tête ---------- */

.auth-simple-header {
  padding: 18px 26px;
  background: #fff;
  border-bottom: 1px solid var(--bdmp-border);
}
.auth-simple-header .container {
  max-width: var(--bdmp-container);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.auth-simple-header img { height: 58px; width: auto; display: block; }
.auth-simple-header a {
  color: var(--bdmp-ink-soft);
  font-size: .9rem;
  font-weight: 600;
}
.auth-simple-header a:hover { color: var(--bdmp-orange-dark); }

/* ---------- Panneau ---------- */

.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(40px, 7vw, 80px) 16px;
}

.auth-panel {
  width: min(100%, 480px);
  background: #fff;
  border: 1px solid var(--bdmp-border);
  border-radius: var(--bdmp-r-card-lg);
  box-shadow: var(--bdmp-shadow-card);
  padding: clamp(26px, 4vw, 44px);
}

.auth-panel h1 {
  font-family: var(--bdmp-font-display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: var(--bdmp-tracking-display);
  text-align: center;
  margin: 0 0 10px;
  text-wrap: balance;
}
.auth-panel .lead {
  text-align: center;
  color: var(--bdmp-ink-muted);
  font-size: .95rem;
  margin: 0 0 28px;
}

.auth-panel form { display: grid; gap: 17px; }

/* ---------- Champs ---------- */

.auth-field { display: grid; gap: 7px; }
.auth-field label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: var(--bdmp-tracking-label);
  text-transform: uppercase;
  color: var(--bdmp-ink-muted);
}
.auth-field input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--bdmp-border-input);
  border-radius: var(--bdmp-r-input);
  background: var(--bdmp-cream);
  color: var(--bdmp-ink);
  font-size: .95rem;
  transition: border-color var(--bdmp-t-fast) ease,
              box-shadow var(--bdmp-t-fast) ease,
              background var(--bdmp-t-fast) ease;
}
.auth-field input:focus {
  outline: none;
  background: #fff;
  border-color: var(--bdmp-orange);
  box-shadow: 0 0 0 4px rgba(232, 114, 44, .12);
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 6.5rem; }
.password-toggle {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .45rem .6rem;
  border: none;
  border-radius: 8px;
  background: var(--bdmp-cream-alt);
  color: var(--bdmp-orange-dark);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--bdmp-t-fast) ease;
}
.password-toggle:hover { background: var(--bdmp-badge-bg); }

.password-hint {
  font-size: .78rem;
  color: var(--bdmp-ink-muted);
  margin: 0;
  line-height: 1.5;
}
.password-hint input[type="checkbox"] { accent-color: var(--bdmp-orange); margin-right: 6px; }

/* ---------- Bouton ---------- */

.auth-submit {
  padding: 15px 22px;
  border: none;
  border-radius: var(--bdmp-r-btn-lg);
  background: var(--bdmp-orange);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--bdmp-shadow-btn);
  transition: transform var(--bdmp-t-fast) ease,
              box-shadow var(--bdmp-t-fast) ease,
              background var(--bdmp-t-fast) ease;
}
.auth-submit:hover {
  background: var(--bdmp-orange-dark);
  transform: translateY(var(--bdmp-lift-btn));
  box-shadow: var(--bdmp-shadow-btn-lg);
}
.auth-submit:disabled {
  background: var(--bdmp-border-input);
  color: var(--bdmp-ink-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ---------- Messages ---------- */

.auth-alert {
  padding: 14px 16px;
  border-radius: var(--bdmp-r-input);
  margin-bottom: 22px;
  font-size: .91rem;
}
.auth-alert.error {
  background: var(--bdmp-error-bg);
  color: var(--bdmp-error-text);
  border: 1px solid var(--bdmp-error-border);
}
.auth-alert.success {
  background: var(--bdmp-success-bg);
  color: var(--bdmp-success-text);
}
.auth-alert.info {
  background: var(--bdmp-pending-bg);
  color: var(--bdmp-pending-text);
  border: 1px solid var(--bdmp-pending-border);
}

/* ---------- Liens ---------- */

.auth-help {
  text-align: center;
  color: var(--bdmp-ink-muted);
  font-size: .9rem;
  margin: 24px 0 0;
}
.auth-help a,

.auth-help-row { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth-help-row a { font-size: .85rem; color: var(--bdmp-orange-dark); font-weight: 600; }

.auth-footer {
  text-align: center;
  padding: 26px 16px;
  color: var(--bdmp-ink-muted);
  font-size: .82rem;
}
.auth-footer a { color: var(--bdmp-ink-soft); }

/* Les trois liens légaux de includes/legal-links.php. Le partial est
   aussi inclus par le pied de page de l'admin, mais seules les pages
   d'authentification chargent cette feuille : ailleurs, les liens
   héritent du style de leur pied de page. */
.footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.footer-legal-links a:hover { color: var(--bdmp-orange-dark); }

@media (max-width: 560px) {
  .auth-simple-header img { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}