/*
 * Écrans d'accès de l'espace de gestion : connexion, inscription, mot de
 * passe oublié, nouveau mot de passe.
 *
 * D'après la page de connexion de Clerk (version claire), aux couleurs de la
 * DGTCP. Maquette de référence : docs/superpowers/maquettes/.
 *
 * ---------------------------------------------------------------------------
 * POURQUOI TOUT EST PRÉFIXÉ PAR « .login #login »
 *
 * login.css et forms.css stylent ces écrans avec des sélecteurs comme
 * « .login form .input » ou « .wp-core-ui .button-primary », de spécificité
 * (0,2,1) : une simple classe perdrait sans que rien ne le signale.
 * L'identifiant #login place nos règles au-dessus, sans !important.
 *
 * Cette feuille est enfilée avec la dépendance « login » : elle sort donc
 * APRÈS login.css, à spécificité égale elle l'emporte aussi.
 * ---------------------------------------------------------------------------
 */

/* -------------------------------------------------------------------------
 * Jetons — le seul bloc à modifier le jour où la charte officielle arrive.
 * ---------------------------------------------------------------------- */

:root {
	/* #f0008d, le magenta du logo, n'offre que 4,13:1 sous un texte blanc de
	   14 px : il est réservé aux décors. Le texte et les boutons prennent sa
	   version approfondie, à 5,26:1. */
	--dgtcp-acces-accent: #d1007a;
	--dgtcp-acces-accent-survol: #b30069;
	--dgtcp-acces-marque: #f0008d;

	--dgtcp-acces-encre: #2b2b34;
	--dgtcp-acces-discret: #5f5f6f;
	--dgtcp-acces-fond: #f4f4f6;
	--dgtcp-acces-fond-clair: #fafafb;
	--dgtcp-acces-pied: #6b6b78;
	--dgtcp-acces-erreur: #b42318;

	--dgtcp-acces-contour: rgba(0, 0, 0, .11);
	--dgtcp-acces-voile: rgba(0, 0, 0, .03);
	--dgtcp-acces-trait: rgba(0, 0, 0, .07);

	/* Suisse, la police de Clerk, est commerciale et servie depuis un serveur
	   externe : la pile système en est la plus proche sans dépendance. */
	--dgtcp-acces-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--dgtcp-acces-hauteur: 33px;
	--dgtcp-acces-marge: 40px;
}

/* -------------------------------------------------------------------------
 * Page
 * ---------------------------------------------------------------------- */

/* login.css fixe « html, body { height: 100% } » : le corps de page restait
   à la hauteur de la fenêtre, et une carte plus haute débordait par le haut
   comme par le bas, sans défilement possible — l'inscription perdait son
   logo. On rend la hauteur au contenu, avec la fenêtre pour minimum. */
html,
body.login {
	height: auto;
}

body.login {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 48px 16px 32px;
	overflow-x: hidden;
	background: var(--dgtcp-acces-fond);
	color: var(--dgtcp-acces-encre);
	font-family: var(--dgtcp-acces-police);
	font-size: 14px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
}

/* Les bandes à pans coupés de Clerk, calées sur le haut de la carte et
   fondues vers les bords. */
/* Dessinées DANS la largeur de la page, image calée au centre : un élément
   de 1600 px positionné en absolu la faisait déborder à droite, et
   overflow-x: hidden ne masque que la barre de défilement, pas le débord. */
body.login::before {
	content: "";
	position: absolute;
	top: max(8px, calc(50% - 320px));
	left: 0;
	z-index: 0;
	width: 100%;
	height: 360px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='360' viewBox='0 0 1600 360'%3E%3Cg fill='%23ffffff' fill-opacity='.65' stroke='%23000000' stroke-opacity='.07'%3E%3Cpath d='M-1 60H480l60 60h60v130h-60l-60 60H-1Z'/%3E%3Cpath d='M1601 60H1120l-60 60h-60v130h60l60 60h481Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='.05'%3E%3Cpath d='M-1 24H452l36 36'/%3E%3Cpath d='M1601 24H1148l-36 36'/%3E%3Cpath d='M-1 346H452l36-36'/%3E%3Cpath d='M1601 346H1148l-36-36'/%3E%3C/g%3E%3C/svg%3E") no-repeat center top;
	mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 72%, transparent 100%);
	pointer-events: none;
}

/* Sans soulignement, comme chez Clerk. Un lien pris dans une phrase garde
   alors un indice autre que la couleur — sa graisse, voir #nav —, le magenta
   ne se distinguant du texte gris voisin qu'à 1,2:1. */
.login a,
.login #login a,
.login .dgtcp-acces-bas a {
	color: var(--dgtcp-acces-accent);
	text-decoration: none;
}

.login a:hover,
.login a:active,
.login #login a:hover,
.login .dgtcp-acces-bas a:hover {
	color: var(--dgtcp-acces-accent-survol);
	text-decoration: underline;
}

.login a:focus {
	border-radius: 2px;
	outline: 2px solid var(--dgtcp-acces-marque);
	outline-offset: 2px;
	box-shadow: none;
	color: var(--dgtcp-acces-accent-survol);
}

/* -------------------------------------------------------------------------
 * Carte
 * ---------------------------------------------------------------------- */

.login #login {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 5px 15px rgba(0, 0, 0, .08),
		0 15px 35px -5px rgba(0, 0, 0, .2),
		0 0 0 1px rgba(0, 0, 0, .07),
		0 28px 64px -16px rgba(240, 0, 141, .35);
}

.login #login h1.wp-login-logo {
	margin: 0;
	padding: 32px var(--dgtcp-acces-marge) 0;
}

/* Sans logo réglé, le nom du site en toutes lettres plutôt que celui de
   WordPress. L'image, quand elle existe, est posée par connexion.php. */
.login #login h1.wp-login-logo a {
	display: block;
	width: auto;
	height: auto;
	margin: 0 auto;
	background-image: none;
	color: var(--dgtcp-acces-encre);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	text-indent: 0;
}

/* 64 px : la moitié exacte du fichier fourni (250 × 128), donc net sur écran
   dense, et assez haut pour que « Direction Générale… » reste lisible.
   La classe est posée sur <body> : wp-login.php imprime le <h1> en dur. */
.login.dgtcp-avec-logo #login h1.wp-login-logo a {
	width: 125px;
	height: 64px;
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
}

.login #login .dgtcp-acces-titres {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px var(--dgtcp-acces-marge) 0;
	text-align: center;
}

/* Clerk écrit ses titres en graisse 500, mais Suisse est plus dense que les
   polices système : 600 rend le même poids visuel. */
.login #login .dgtcp-acces-titre {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
}

.login #login .dgtcp-acces-soustitre {
	margin: 0;
	color: var(--dgtcp-acces-discret);
}

/* -------------------------------------------------------------------------
 * Alertes
 * ---------------------------------------------------------------------- */

.login #login .message,
.login #login .notice,
.login #login .success,
.login #login #login_error,
.login #login .dgtcp-alerte {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 24px var(--dgtcp-acces-marge) 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 6px;
	background: #fdf2f8;
	color: var(--dgtcp-acces-encre);
	font-size: 13px;
	line-height: 18px;
	word-wrap: break-word;
	box-shadow: inset 0 0 0 1px rgba(240, 0, 141, .18);
}

.login #login #login_error,
.login #login .notice-error,
.login #login .dgtcp-alerte--erreur {
	background: #fef3f2;
	color: var(--dgtcp-acces-erreur);
	box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .15);
}

.login #login .message p,
.login #login .notice p,
.login #login #login_error p,
.login #login .dgtcp-alerte p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.login #login .dgtcp-alerte p + p {
	margin-top: 4px;
}

.login #login .dgtcp-icone {
	flex: none;
}

.login #login .dgtcp-alerte .dgtcp-icone {
	margin-top: 1px;
}

/* -------------------------------------------------------------------------
 * Formulaires
 * ---------------------------------------------------------------------- */

.login #login form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 24px var(--dgtcp-acces-marge) 32px;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.login #login form p,
.login #login form .user-pass-wrap {
	margin: 0;
}

.login #login form label {
	display: block;
	margin: 0 0 8px;
	color: var(--dgtcp-acces-encre);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.login #login input[type="text"],
.login #login input[type="email"],
.login #login input[type="tel"],
.login #login textarea.dgtcp-champ__saisie,
.login #login input[type="password"],
.login #login select.dgtcp-champ__saisie {
	box-sizing: border-box;
	width: 100%;
	height: var(--dgtcp-acces-hauteur);
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 7px 12px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: var(--dgtcp-acces-encre);
	font-family: inherit;
	font-size: 14px;
	line-height: 19px;
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-contour),
		0 0 1px rgba(0, 0, 0, .07);
	transition: box-shadow .15s ease;
}

/* Liste des structures : même allure que les champs, chevron dessiné. */
.login #login select.dgtcp-champ__saisie {
	max-width: 100%;
	padding-right: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23747686' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Aucune structure choisie : l'invite a la couleur des autres indications. */
.login #login select.dgtcp-champ__saisie:invalid {
	color: #75757f;
}

.login #login select.dgtcp-champ__saisie option {
	color: var(--dgtcp-acces-encre);
}

.login #login input::placeholder,
.login #login textarea::placeholder {
	color: #75757f;
	opacity: 1;
}

.login #login input[type="text"]:hover,
.login #login input[type="email"]:hover,
.login #login input[type="tel"]:hover,
.login #login textarea.dgtcp-champ__saisie:hover,
.login #login input[type="password"]:hover,
.login #login select.dgtcp-champ__saisie:hover {
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .2),
		0 0 1px rgba(0, 0, 0, .07);
}

.login #login input[type="text"]:focus,
.login #login input[type="email"]:focus,
.login #login input[type="tel"]:focus,
.login #login textarea.dgtcp-champ__saisie:focus,
.login #login input[type="password"]:focus,
.login #login select.dgtcp-champ__saisie:focus {
	outline: none;
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-accent),
		0 0 0 4px rgba(240, 0, 141, .2);
}

.login #login input[aria-invalid="true"],
.login #login select[aria-invalid="true"],
.login #login textarea[aria-invalid="true"] {
	box-shadow: 0 0 0 1px var(--dgtcp-acces-erreur);
}

.login #login input[aria-invalid="true"]:focus,
.login #login select[aria-invalid="true"]:focus,
.login #login textarea[aria-invalid="true"]:focus {
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-erreur),
		0 0 0 4px rgba(180, 35, 24, .18);
}

/* Libellé et lien sur une même ligne, comme « Password — Forgot password? »
   chez Clerk. Le lien y est placé par connexion.js. */
.login #login .dgtcp-champ__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}

.login #login .dgtcp-champ__entete label {
	margin: 0;
}

.login #login .dgtcp-champ__lien {
	font-size: 13px;
	font-weight: 500;
}

/* Champ mot de passe et bouton œil, natif (.wp-hide-pw) ou le nôtre. */
.login #login .wp-pwd,
.login #login .dgtcp-champ__groupe {
	position: relative;
}

.login #login .wp-pwd input,
.login #login .dgtcp-champ__groupe input {
	padding-right: 40px;
}

/* Clerk grise l'icône à 41 % ; on descend à 55 % pour tenir le contraste de
   3:1 exigé des composants d'interface. */
.login #login .button.wp-hide-pw,
.login #login .dgtcp-oeil {
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	display: grid;
	place-items: center;
	width: 32px;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: rgba(0, 0, 0, .55);
	box-shadow: none;
	cursor: pointer;
}

.login #login .button.wp-hide-pw:hover,
.login #login .dgtcp-oeil:hover {
	background: transparent;
	color: var(--dgtcp-acces-encre);
}

.login #login .button.wp-hide-pw:focus,
.login #login .dgtcp-oeil:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--dgtcp-acces-marque);
}

/* .wp-pwd contient aussi l'alerte « majuscules activées » : ancré en haut et
   en bas, le bouton natif s'étirait sur toute sa hauteur et chevauchait ce qui
   suit le champ. On le cale sur la hauteur du champ seul. */
.login #login .button.wp-hide-pw {
	bottom: auto;
	height: calc(var(--dgtcp-acces-hauteur) - 6px);
}

.login #login .button.wp-hide-pw .dashicons {
	top: 0;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
}

.login #login .dgtcp-oeil__barre {
	display: none;
}

.login #login .dgtcp-oeil[aria-pressed="true"] .dgtcp-oeil__barre {
	display: inline;
}

/* « Se souvenir de moi » : discret, sa bulle d'aide masquée. */
.login #login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	margin-top: -8px;
}

.login #login .forgetmenot label {
	display: inline;
	margin: 0;
	color: var(--dgtcp-acces-discret);
	font-size: 13px;
	font-weight: 400;
}

.login #login .forgetmenot .wp-tooltip {
	display: none;
}

.login #login input[type="checkbox"] {
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
}

.login #login input[type="checkbox"]:checked {
	border-color: var(--dgtcp-acces-accent);
	background: var(--dgtcp-acces-accent);
}

.login #login input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23ffffff'/%3E%3C/svg%3E");
	width: 18px;
	height: 18px;
	margin: -2px 0 0 -2px;
}

.login #login input[type="checkbox"]:focus {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dgtcp-acces-marque);
}

/* Bouton principal, natif ou le nôtre. */
.login #login p.submit {
	margin-top: 8px;
}

.login #login .button-primary,
.login #login .dgtcp-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: var(--dgtcp-acces-hauteur);
	min-height: 0;
	margin: 0;
	padding: 7px 12px;
	border: 0;
	border-radius: 6px;
	background-color: var(--dgtcp-acces-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	text-shadow: none;
	cursor: pointer;
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-accent),
		inset 0 1px 1px rgba(255, 255, 255, .07),
		0 2px 3px rgba(34, 42, 53, .2),
		0 1px 1px rgba(0, 0, 0, .24);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.login #login .dgtcp-bouton {
	margin-top: 8px;
}

.login #login .button-primary:hover,
.login #login .dgtcp-bouton:hover {
	background-color: var(--dgtcp-acces-accent-survol);
	color: #fff;
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-accent-survol),
		inset 0 1px 1px rgba(255, 255, 255, .07),
		0 2px 3px rgba(34, 42, 53, .2),
		0 1px 1px rgba(0, 0, 0, .24);
}

.login #login .button-primary:focus,
.login #login .dgtcp-bouton:focus {
	outline: none;
	color: #fff;
	box-shadow:
		0 0 0 1px var(--dgtcp-acces-accent),
		0 0 0 4px rgba(240, 0, 141, .3);
}

/* Un <input type="submit"> n'accepte ni enfant ni pseudo-élément : le
   chevron de Clerk y est donc une image de fond, calée après « Continuer ». */
.login #login #loginform .button-primary {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.25 4.75 10.5 8l-4.25 3.25Z' fill='%23ffffff' fill-opacity='.62'/%3E%3C/svg%3E");
	background-position: calc(50% + 44px) center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.login #login .dgtcp-bouton .dgtcp-icone {
	opacity: .62;
}

/* -------------------------------------------------------------------------
 * Nouveau mot de passe (réinitialisation)
 *
 * La jauge de WordPress, sa case « mot de passe faible » et son conseil de
 * douze caractères contredisaient la règle de la DGTCP : notre indicateur les
 * remplace (voir dgtcp_indicateur_reinitialisation()). Sans script, rien
 * n'est masqué que le script ne remplace : .hide-if-no-js s'en charge déjà.
 * ---------------------------------------------------------------------- */

.login #login #resetpassform #pass-strength-result,
.login #login #resetpassform .pw-weak,
.login #login #resetpassform .indicator-hint {
	display: none !important; /* WordPress les affiche en style en ligne. */
}

/* Redit le sous-titre, qui énonce déjà la règle. Seulement au-dessus du
   formulaire : la confirmation « mot de passe réinitialisé » porte la même
   classe, et la masquer vidait la carte. */
.login #login:has(#resetpassform) .message.reset-pass {
	display: none;
}

.login #login #resetpassform .user-pass1-wrap p {
	margin: 0 0 6px;
}

.login #login #resetpassform .dgtcp-force {
	margin-top: 10px;
}

/* Deux boutons pleine largeur, l'action principale d'abord : WordPress les
   mettait côte à côte, et « Enregistrer » passait à la ligne sous l'autre. */
.login #login #resetpassform p.reset-pass-submit {
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	margin-top: 20px;
}

.login #login #resetpassform .button.wp-generate-pw {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: var(--dgtcp-acces-hauteur);
	min-height: 0;
	margin: 0;
	padding: 7px 12px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: var(--dgtcp-acces-encre);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .12),
		0 1px 2px rgba(0, 0, 0, .06);
	cursor: pointer;
}

.login #login #resetpassform .button.wp-generate-pw:hover {
	background: #faf6f8;
	color: var(--dgtcp-acces-encre);
}

.login #login #resetpassform .button.wp-generate-pw:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--dgtcp-acces-marque);
}

/* Confirmation « mot de passe enregistré » : pas de formulaire pour porter
   les marges, le bouton les reçoit de son conteneur. */
.login #login .dgtcp-acces-confirmation {
	padding: 24px var(--dgtcp-acces-marge) 32px;
}

.login #login #resetpassform .button-primary:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Formulaire d'inscription
 * ---------------------------------------------------------------------- */

.login #login .dgtcp-rangee {
	display: flex;
	gap: 16px;
}

.login #login .dgtcp-rangee > .dgtcp-champ {
	flex: 1 1 0;
	min-width: 0;
}

.login #login .dgtcp-champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.login #login .dgtcp-champ .dgtcp-champ__entete,
.login #login .dgtcp-champ label {
	margin: 0;
}

.login #login .dgtcp-champ__aide,
.login #login .dgtcp-champ__erreur {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
}

.login #login .dgtcp-champ__aide {
	color: var(--dgtcp-acces-discret);
}

.login #login .dgtcp-champ__erreur {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--dgtcp-acces-erreur);
}

.login #login .dgtcp-champ__erreur .dgtcp-icone {
	width: 14px;
	height: 14px;
	margin-top: 2px;
}

/* Texte réservé aux lecteurs d'écran. */
.login #login .dgtcp-lecteur {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Indicateur de force du mot de passe.
   Segments colorés à 3:1 au moins sur blanc (composants d'interface),
   libellés à 4,5:1 au moins (texte). */
.login #login .dgtcp-force {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.login #login .dgtcp-force[hidden] {
	display: none;
}

.login #login .dgtcp-force__barre {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.login #login .dgtcp-force__segment {
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, .08);
	transition: background-color .2s ease;
}

.login #login .dgtcp-force[data-niveau="faible"] .dgtcp-force__segment:nth-child(1) {
	background: #d92d20;
}

.login #login .dgtcp-force[data-niveau="moyen"] .dgtcp-force__segment:nth-child(-n+2) {
	background: #d97706;
}

.login #login .dgtcp-force[data-niveau="fort"] .dgtcp-force__segment {
	background: #1f8f4e;
}

.login #login .dgtcp-force__niveau {
	margin: 0;
	color: var(--dgtcp-acces-discret);
	font-size: 13px;
	line-height: 18px;
}

.login #login .dgtcp-force[data-niveau="faible"] .dgtcp-force__libelle {
	color: var(--dgtcp-acces-erreur);
}

.login #login .dgtcp-force[data-niveau="moyen"] .dgtcp-force__libelle {
	color: #9a5b00;
}

.login #login .dgtcp-force[data-niveau="fort"] .dgtcp-force__libelle {
	color: #17602f;
}

.login #login .dgtcp-force__criteres {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	color: var(--dgtcp-acces-discret);
	font-size: 13px;
	line-height: 18px;
	list-style: none;
}

.login #login .dgtcp-force__critere {
	position: relative;
	margin: 0;
	padding-left: 20px;
}

/* Pastille vide tant que le critère manque, cochée quand il est rempli. */
.login #login .dgtcp-force__critere::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .3);
}

.login #login .dgtcp-force__critere.est-rempli {
	color: #17602f;
}

.login #login .dgtcp-force__critere.est-rempli::before {
	background: #1f8f4e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m4 7.2 2 2 4-4.4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
	box-shadow: none;
}

/* Le champ piège : invisible, hors du parcours clavier. Un robot le remplit,
   un agent jamais. */
.login #login .dgtcp-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Pied de carte, bas de page
 * ---------------------------------------------------------------------- */

.login #login #nav,
.login #login #backtoblog,
.login #login .privacy-policy-page-link {
	margin: 0;
	padding: 16px 32px;
	border-top: 1px solid var(--dgtcp-acces-trait);
	background: linear-gradient(var(--dgtcp-acces-voile), var(--dgtcp-acces-voile)), #fff;
	color: var(--dgtcp-acces-discret);
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.login #login #nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
}

.login #login #nav a,
.login #login .privacy-policy-page-link a {
	color: var(--dgtcp-acces-accent);
	font-weight: 600;
}

.login #login #nav a:hover {
	color: var(--dgtcp-acces-accent-survol);
	text-decoration: underline;
}

/* Sans JavaScript, « Mot de passe oublié ? » reste ici, sous l'appel à
   l'inscription. */
.login #login #nav .wp-login-lost-password {
	flex-basis: 100%;
	font-size: 13px;
}

.login #login #backtoblog {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 14px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.login #login #backtoblog strong {
	color: var(--dgtcp-acces-encre);
	font-weight: 700;
	letter-spacing: .04em;
}

.login #login .privacy-policy-page-link {
	padding-top: 0;
	border-top: 0;
	font-size: 12px;
}

.login .dgtcp-acces-bas {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	margin: 32px 0 0;
	color: var(--dgtcp-acces-pied);
	font-size: 13px;
	line-height: 18px;
}

.login .dgtcp-acces-bas a {
	flex: none;
	color: var(--dgtcp-acces-pied);
}

.login .dgtcp-acces-bas a:hover {
	color: var(--dgtcp-acces-encre);
}

/* -------------------------------------------------------------------------
 * Inscription : mise en page scindée
 * ---------------------------------------------------------------------- */

.login .dgtcp-etapes {
	display: none;
}

@media (min-width: 900px) {
	/* Le formulaire prend la place : le panneau des étapes n'est qu'un
	   rappel, 360 px lui suffisent. */
	body.login.login-action-register {
		display: grid;
		grid-template-columns: minmax(0, 1.75fr) minmax(360px, 1fr);
		grid-template-rows: 1fr auto;
		align-items: stretch;
		padding: 0;
		background: var(--dgtcp-acces-fond-clair);
	}

	/* Bandes centrées sur la colonne du formulaire, et non sur la page. */
	body.login.login-action-register::before {
		width: 63.6%;
	}

	/* Six champs contre un seul chez Clerk : à 400 px la carte paraissait
	   perdue sur un écran d'ordinateur. */
	.login-action-register #login {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		width: min(520px, 100% - 32px);
		max-width: 520px;
		margin-top: 48px;
	}

	.login-action-register .dgtcp-acces-bas {
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: min(520px, 100% - 32px);
		max-width: 520px;
		margin: 32px 0;
	}

	/* Collant, et non centré : le formulaire dépasse la hauteur de l'écran,
	   un panneau centré sur toute la colonne sortirait du champ de vision.
	   Cela suppose un volet étiré sur toute la hauteur (align-items: stretch)
	   et aucun ancêtre en overflow hidden. */
	.login .dgtcp-etapes {
		position: relative;
		z-index: 1;
		display: flex;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-items: flex-start;
		padding: 48px clamp(32px, 4vw, 64px);
		border-left: 1px solid var(--dgtcp-acces-trait);
		background: var(--dgtcp-acces-fond);
	}

	.login .dgtcp-etapes__contenu {
		position: sticky;
		top: max(48px, calc(50vh - 170px));
		width: 100%;
		max-width: 420px;
	}
}

.login .dgtcp-etapes__titre {
	margin: 0 0 8px;
	color: var(--dgtcp-acces-encre);
	font-size: 22px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -.01em;
}

.login .dgtcp-etapes__chapeau {
	margin: 0 0 32px;
	color: var(--dgtcp-acces-discret);
	font-size: 15px;
	line-height: 22px;
}

.login .dgtcp-etapes__liste {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.login .dgtcp-etape {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
}

.login .dgtcp-etape:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 36px;
	bottom: -20px;
	left: 13.5px;
	width: 1px;
	background: rgba(0, 0, 0, .1);
}

.login .dgtcp-etape__numero {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--dgtcp-acces-accent);
	font-size: 13px;
	font-weight: 600;
	box-shadow:
		0 0 0 1px rgba(240, 0, 141, .35),
		0 1px 2px rgba(0, 0, 0, .06);
}

.login .dgtcp-etape__titre {
	margin: 3px 0 2px;
	color: var(--dgtcp-acces-encre);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
}

.login .dgtcp-etape__texte {
	margin: 0;
	color: var(--dgtcp-acces-discret);
}

/* -------------------------------------------------------------------------
 * Petits écrans, écrans tactiles, contraste forcé
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	:root {
		--dgtcp-acces-marge: 20px;
	}

	body.login {
		justify-content: flex-start;
		padding: 24px 16px;
	}

	.login #login h1.wp-login-logo {
		padding-top: 28px;
	}

	.login #login form {
		padding-bottom: 28px;
	}

	.login #login #nav,
	.login #login #backtoblog,
	.login #login .privacy-policy-page-link {
		padding-right: 20px;
		padding-left: 20px;
	}

	.login #login .dgtcp-rangee {
		flex-direction: column;
		gap: 24px;
	}

	.login #login .dgtcp-force__criteres {
		grid-template-columns: minmax(0, 1fr);
	}

	.login .dgtcp-acces-bas {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
	}
}

/* 40 px au doigt ; et 16 px de texte, sous lesquels iOS zoome d'autorité sur
   le champ touché. */
@media (pointer: coarse) {
	:root {
		--dgtcp-acces-hauteur: 40px;
	}

	.login #login input[type="text"],
	.login #login input[type="email"],
	.login #login input[type="tel"],
	.login #login textarea.dgtcp-champ__saisie,
	.login #login input[type="password"],
	.login #login select.dgtcp-champ__saisie {
		font-size: 16px;
	}

	.login #login .button.wp-hide-pw,
	.login #login .dgtcp-oeil {
		width: 36px;
	}
}

/* En contraste forcé, Windows efface les ombres : les contours des champs et
   de la carte disparaîtraient avec elles. */
@media (forced-colors: active) {
	.login #login,
	.login #login input[type="text"],
	.login #login input[type="email"],
	.login #login input[type="tel"],
	.login #login textarea.dgtcp-champ__saisie,
	.login #login input[type="password"],
	.login #login select.dgtcp-champ__saisie,
	.login #login .button-primary,
	.login #login .dgtcp-bouton {
		border: 1px solid CanvasText;
	}
}

/* -------------------------------------------------------------------------
 * « Contacter un administrateur » (inc/aide-acces.php)
 * ---------------------------------------------------------------------- */

/* Le message s'écrit sur plusieurs lignes : la hauteur fixe des champs ne
   lui convient pas. */
.login #login textarea.dgtcp-champ__saisie {
	height: auto;
	min-height: 128px;
	padding: 10px 12px;
	resize: vertical;
}

/* Trois temps : qui vous êtes, comment vous joindre, pourquoi vous écrivez. */
.login #login .dgtcp-aide__groupe {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.login #login .dgtcp-aide__groupe legend {
	margin: 0 0 12px;
	padding: 0;
	color: var(--dgtcp-acces-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.login #login .dgtcp-champ__facultatif {
	color: var(--dgtcp-acces-discret);
	font-weight: 400;
}

.login #login .dgtcp-alerte--succes {
	background: #ecfdf3;
	color: #05603a;
	box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .18);
}

/* Lien glissé dans un message d'erreur : souligné, pour se distinguer du
   texte rouge autrement que par sa couleur. */
.login #login .dgtcp-lien-aide {
	color: var(--dgtcp-acces-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.login #login .dgtcp-lien-aide:hover,
.login #login .dgtcp-lien-aide:focus {
	color: var(--dgtcp-acces-accent-survol);
}

.login .dgtcp-acces-bas .dgtcp-acces-bas__liens {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

@media (min-width: 900px) {
	/* Sept champs, comme l'inscription : même largeur de carte. */
	.login-action-dgtcp_aide #login {
		width: min(520px, 100% - 32px);
		max-width: 520px;
	}

	.login-action-dgtcp_aide .dgtcp-acces-bas {
		width: min(520px, 100% - 32px);
		max-width: 520px;
	}
}