/**
 * Page de connexion (wp-login.php) — habillage « Espace membres ».
 *
 * Les variables du thème (--wp--preset--*) ne sont pas chargées sur wp-login.php :
 * les valeurs de theme.json sont donc recopiées ici en variables locales.
 * En cas de changement dans theme.json, mettre à jour ce bloc.
 */

body.login {
  --peep-bleu: #0072BE; /* palette : bleu */
  --peep-bleu-fonce: #005A96; /* palette : bleu-fonce (survol) */
  --peep-bleu-clair: #E5F3FB; /* palette : bleu-clair */
  --peep-orange: #F3A842; /* palette : orange */
  --peep-orange-clair: #FEF4E6; /* palette : orange-clair */
  --peep-encre: #1F2A37; /* palette : encre */
  --peep-gris-clair: #F5F7F9; /* palette : gris-clair */
  --peep-texte-doux: #5B6673; /* styles.blocks.core/post-date */
  --peep-rayon-carte: 16px; /* custom.radius.carte */
  --peep-rayon-encadre: 14px; /* custom.radius.encadre */
  --peep-rayon-pilule: 999px; /* custom.radius.pill */
  --peep-ombre-carte: 0 8px 24px rgba(0, 58, 100, 0.08); /* shadow.carte */
  --peep-hauteur-champ: 48px; /* custom.header.bouton */

  background: var(--peep-gris-clair);
  color: var(--peep-encre);
  font-family: "myriad-pro", "Myriad Pro", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* Conteneur */
body.login #login {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  padding: 8vh 16px 32px;
}

/* En-tête : pastille cadenas + titre */
body.login .wp-login-logo {
  margin: 0;
  text-align: center;
}

body.login .wp-login-logo::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--peep-bleu-clair)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")
    center / 28px no-repeat;
}

/* WordPress remplace le texte du lien par son logo : on l'annule pour afficher le titre. */
body.login .wp-login-logo a {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  background: none;
  color: var(--peep-encre);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-indent: 0;
}

body.login .wp-login-logo a:hover,
body.login .wp-login-logo a:focus {
  color: var(--peep-bleu);
}

body.login .wp-login-logo a:focus {
  outline: 2px solid var(--peep-bleu);
  outline-offset: 4px;
  box-shadow: none;
}

/* Phrase d'intro (filtre login_message) */
body.login .peep-login-intro {
  margin: 8px 0 24px;
  color: var(--peep-texte-doux);
  font-size: 15px;
  text-align: center;
}

/* Carte du formulaire */
body.login form {
  margin-top: 0;
  padding: 28px 24px;
  border: 1px solid var(--peep-bleu-clair);
  border-radius: var(--peep-rayon-carte);
  background: #FFFFFF;
  box-shadow: var(--peep-ombre-carte);
}

body.login label {
  display: block;
  margin-bottom: 6px;
  color: var(--peep-encre);
  font-size: 15px;
  font-weight: 700;
}

/* Champs (bordure #5B6673 : contraste ≥ 3:1 exigé pour les composants d'interface) */
body.login form .input {
  box-sizing: border-box;
  min-height: var(--peep-hauteur-champ);
  margin: 0 0 18px;
  padding: 0 16px;
  border: 1px solid var(--peep-texte-doux);
  border-radius: var(--peep-rayon-encadre);
  background: #FFFFFF;
  box-shadow: none;
  color: var(--peep-encre);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
}

body.login form .input:focus {
  border-color: var(--peep-bleu);
  box-shadow: 0 0 0 2px var(--peep-bleu);
  outline: 2px solid transparent;
}

/* Champ mot de passe + bouton « afficher » */
body.login .wp-pwd {
  position: relative;
}

body.login .wp-pwd .input {
  padding-right: 52px;
}

body.login .wp-pwd .button.wp-hide-pw {
  top: 0;
  right: 0;
  width: var(--peep-hauteur-champ);
  height: var(--peep-hauteur-champ);
  min-height: var(--peep-hauteur-champ);
  border-radius: var(--peep-rayon-encadre);
  color: var(--peep-texte-doux);
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
  color: var(--peep-bleu);
}

body.login .wp-pwd .button.wp-hide-pw:focus {
  border-color: var(--peep-bleu);
  box-shadow: 0 0 0 2px var(--peep-bleu);
}

/* Bouton principal */
body.login .submit {
  margin: 8px 0 0;
}

body.login #wp-submit {
  float: none;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--peep-hauteur-champ);
  padding: 0 26px;
  border: 1px solid var(--peep-bleu);
  border-radius: var(--peep-rayon-pilule);
  background: var(--peep-bleu);
  box-shadow: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-shadow: none;
}

body.login #wp-submit:hover,
body.login #wp-submit:active {
  border-color: var(--peep-bleu-fonce);
  background: var(--peep-bleu-fonce);
  color: #FFFFFF;
}

body.login #wp-submit:focus {
  border-color: var(--peep-bleu-fonce);
  background: var(--peep-bleu-fonce);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--peep-bleu);
  color: #FFFFFF;
  outline: 2px solid transparent;
}

/* Liens sous la carte : « Mot de passe oublié ? » et retour au site */
body.login #nav,
body.login #backtoblog {
  margin: 20px 0 0;
  padding: 0;
  text-align: center;
}

body.login #backtoblog {
  margin-top: 8px;
}

body.login #nav a,
body.login #backtoblog a {
  color: var(--peep-texte-doux);
  font-size: 15px;
  text-decoration: none;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
  color: var(--peep-bleu-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Éléments absents de la maquette : sélecteur de langue, « Se souvenir de moi » */
body.login .language-switcher,
body.login .forgetmenot {
  display: none;
}

/* Messages : information (bleu) et erreur (orange — la charte ne comporte pas de rouge) */
body.login .notice,
body.login .message,
body.login #login_error {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 0;
  border-left: 4px solid var(--peep-bleu);
  border-radius: var(--peep-rayon-encadre);
  background: var(--peep-bleu-clair);
  box-shadow: none;
  color: var(--peep-encre);
  font-size: 15px;
}

body.login .notice-error,
body.login #login_error {
  border-left-color: var(--peep-orange);
  background: var(--peep-orange-clair);
}

body.login .notice p,
body.login .message p {
  margin: 0;
}

/* Petits écrans */
@media (max-width: 480px) {
  body.login #login {
    padding-top: 24px;
  }

  body.login form {
    padding: 20px 16px;
  }
}

/* Cloudflare Turnstile (peep-core/securite.php) : aligné sur les champs, pas de marge négative. */
#loginform .cf-turnstile,
#lostpasswordform .cf-turnstile {
  margin: 4px 0 20px !important;
}