/*
  Écran de connexion Belgatrans.

  On habille l'écran natif de WordPress plutôt que d'en écrire un nouveau : il gère déjà
  les jetons, la limitation des tentatives et la récupération de mot de passe. Les
  sélecteurs sont donc ceux de WordPress (`#login`, `#loginform`…), qu'on ne choisit pas.

  Même géométrie que l'intranet : une carte arrondie en lévitation sur un fond crème plus
  foncé. La personne doit reconnaître l'endroit où elle saisit son mot de passe.
*/

:root {
	--belga-app:          #EFE8DC;
	--belga-carte:        #FFFFFF;
	--belga-texte:        #1A1A1A;
	--belga-texte-doux:   rgba(26, 26, 26, 0.58);
	--belga-bord:         #E4DCCB;
	--belga-accent:       #D75300; /* accent terracotta plateforme (2026-08-27) */
	--belga-rayon:        12px;
	--belga-rayon-carte:  18px;
	--belga-ombre:        0 18px 44px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
}

body.login {
	background: var(--belga-app);
	font-family: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
	color: var(--belga-texte);
}

/* ------------------------------------------------------------- Le logo */

.login h1 { margin-bottom: 0.5rem; }

.login h1 a {
	/* WordPress pose son propre logo en image de fond de ce lien. On le remplace ici :
	   masquer l'élément ferait disparaître le lien de retour vers le site. */
	background-image: url('../img/logo.svg');
	background-size: 58px 58px;
	background-position: center;
	background-repeat: no-repeat;
	width: 58px;
	height: 58px;
	margin: 0 auto 0.35rem;
	text-indent: -9999px;
	overflow: hidden;
}

.belga-connexion__accroche {
	margin: 0 0 1.25rem;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--belga-texte);
}

/* WordPress place le message avant le formulaire, dans un encadré blanc à liseré bleu
   qu'on neutralise : ici ce n'est pas une alerte, c'est une phrase d'accueil. */
.login .message.belga-neutre,
#login p.message:has(.belga-connexion__accroche) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* ------------------------------------------------------- Le formulaire */

#login { width: 340px; padding: 6vh 0 4vh; }

/* Carte translucide : le fond crème transparaît légèrement à travers le blanc, et le
   flou d'arrière-plan lui donne de l'épaisseur. `background-color` reste opaque à 82 % —
   en dessous, le texte des champs perdrait en lisibilité.

   ⚠️ `backdrop-filter` n'est pas universel : la couleur de repli ci-dessous est déjà
   suffisamment opaque pour que la carte tienne sans le flou. Ne pas descendre le canal
   alpha en comptant sur le flou pour compenser. */
.login form {
	background-color: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--belga-rayon-carte);
	box-shadow: 0 20px 50px rgba(26, 26, 24, 0.13), 0 2px 8px rgba(26, 26, 24, 0.06);
	padding: 1.75rem 1.6rem 1.5rem;
	margin-top: 0;
}

.login form label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--belga-texte);
}

/* Champs translucides eux aussi : opaques, ils formeraient des rectangles blancs qui
   annulent l'effet de la carte. */
.login form .input,
.login input[type="text"],
.login input[type="password"] {
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(26, 26, 24, 0.14);
	border-radius: var(--belga-rayon);
	color: var(--belga-texte);
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.75rem;
	box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--belga-accent);
	box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.18);
	outline: none;
}

/* Le bouton de révélation du mot de passe doit rester lisible sur le nouveau fond. */
.login .button.wp-hide-pw { color: var(--belga-texte-doux); }
.login .button.wp-hide-pw:hover { color: var(--belga-texte); }

.wp-core-ui .button-primary {
	background: var(--belga-accent);
	border: 0;
	border-radius: var(--belga-rayon);
	box-shadow: none;
	text-shadow: none;
	font-family: inherit;
	font-weight: 600;
	padding: 0.15rem 1.1rem;
	height: 40px;
	line-height: 38px;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus { background: #2a86e6; box-shadow: none; }
.wp-core-ui .button-primary:focus-visible { outline: 2px solid var(--belga-texte); outline-offset: 2px; }

/* ------------------------------------------------------------- Erreurs */

.login .notice,
.login #login_error,
.login .message {
	border-radius: var(--belga-rayon);
	border-left-width: 3px;
	background: var(--belga-carte);
	border-color: var(--belga-bord);
	box-shadow: none;
	font-size: 0.86rem;
}
.login #login_error { border-left-color: #C0392B; }

/* -------------------------------------------------------- Liens du bas */

.login #nav,
.login #backtoblog {
	padding: 0.7rem 0 0;
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: var(--belga-texte-doux);
	font-size: 0.8rem;
	text-decoration: none;
}
.login #nav a:hover,
.login #backtoblog a:hover { color: var(--belga-accent); }

/* Retirés à la demande de Rachid : le lien de retour au site n'a pas de sens sur un
   intranet privé — il ramène à cette même page — et la langue est le français, point.
   Le sélecteur est aussi désactivé côté PHP ; cette règle couvre le cas où une extension
   le réafficherait. */
.login #backtoblog,
.login .language-switcher,
.login .privacy-policy-page-link { display: none; }

/* --------------------------------------------------------- Téléphone */

@media (max-width: 420px) {
	#login { width: 100%; padding: 3vh 1rem 2rem; }
}