/* ============================================================
   Écran de connexion aux couleurs du projet (inc/login.php).
   Chargée après login.css du cœur. Feuille autonome : la page de
   connexion ne charge ni base.css ni les polices du thème. Reporter
   ici les valeurs des tokens (design/tokens.css) et les @font-face.

   Mise en page :
   - mobile : bandeau photo en haut, formulaire dessous ;
   - ≥ 960 px : photo sur la moitié gauche, formulaire centré à droite ;
   - sans photo (page de Password Protected, qui n'appelle pas
     login_header ; reconnexion en fenêtre) : formulaire au centre.
   ============================================================ */

/* @font-face { font-family: "Police Titres"; font-weight: 400 800; font-display: swap; src: url("../fonts/police-titres.woff2") format("woff2"); } */

body.login {
  --login-fond: #F7F5EF;
  --login-carte: #ffffff;
  --login-encre: #1B2631;
  --login-texte: #4F5B67;
  --login-bord: #D5CFC2;
  --login-accent: #2F5A7E;
  --login-accent-fonce: #234664;
  --login-rayon: 6px;
  --login-titres: system-ui, -apple-system, "Segoe UI", sans-serif;
  --login-corps: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* WordPress 7 teinte case à cocher, œil du mot de passe et focus avec ces variables. */
  --wp-admin-theme-color: var(--login-accent);
  --wp-admin-theme-color--rgb: 47, 90, 126;
  --wp-admin-theme-color-darker-10: var(--login-accent-fonce);
  --wp-admin-theme-color-darker-10--rgb: 35, 70, 100;
  --wp-admin-theme-color-darker-20: var(--login-accent-fonce);
  --wp-admin-theme-color-darker-20--rgb: 35, 70, 100;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--login-fond);
  color: var(--login-texte);
  font-family: var(--login-corps);
}

/* ---- Panneau photo ---- */
.login-panneau {
  position: relative;
  min-height: 34vh;
  overflow: hidden;
  background: var(--login-encre);
}
.login-panneau__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%;
}
.login-panneau::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.55) 100%);
}
.login-panneau__titre {
  position: absolute; z-index: 1; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px);
  margin: 0; color: #fff;
  font-family: var(--login-titres); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.05; font-weight: 700;
}
.login-panneau__titre .accent { font-style: normal; color: var(--login-accent); }

@media (min-width: 960px) {
  body.login:has(> .login-panneau) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .login-panneau { position: fixed; inset: 0 50% 0 0; min-height: 0; }
  body.login #login { grid-column: 2; }
  body.login .language-switcher, body.login .privacy-policy-page-link { grid-column: 2; }
}

/* ---- Formulaire ---- */
body.login #login { width: min(360px, calc(100% - 40px)); padding: 6vh 0 24px; margin: 0 auto; }
/* Centré en hauteur par les marges : le cœur fixe body à 100 %, rien ne sort par le haut. */
body.login:not(:has(> .login-panneau)) #login { margin-block: auto; padding-block: 24px; }

body.login h1 a {
  width: 100%; height: 72px; margin-bottom: 20px;
  background-image: var(--login-logo, none);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

body.login form {
  margin-top: 0; padding: 28px 24px;
  background: var(--login-carte);
  border: 1px solid var(--login-bord);
  border-radius: var(--login-rayon);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.08);
}

body.login label { color: var(--login-encre); font-weight: 500; }

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  border: 1px solid var(--login-bord);
  border-radius: calc(var(--login-rayon) - 2px);
  font-size: 16px;
  padding: 8px 12px;
  box-shadow: none;
}
body.login input:focus { border-color: var(--login-accent); box-shadow: 0 0 0 2px rgba(var(--wp-admin-theme-color--rgb), 0.35); }

body.login #wp-submit,
body.login .button-primary {
  background: var(--login-accent);
  border-color: var(--login-accent);
  border-radius: calc(var(--login-rayon) - 2px);
  color: #fff;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
body.login #wp-submit:hover,
body.login #wp-submit:focus,
body.login .button-primary:hover,
body.login .button-primary:focus { background: var(--login-accent-fonce); border-color: var(--login-accent-fonce); }

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a { color: var(--login-texte); }
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover { color: var(--login-accent-fonce); }

body.login .message,
body.login .notice,
body.login #login_error { border-left-color: var(--login-accent); border-radius: calc(var(--login-rayon) - 2px); }