/**
 * API Poker Isséenne — habillage de la page de connexion (wp-login.php)
 *
 * À enregistrer dans : votre-theme-enfant/assets/css/api-login.css
 * Chargé uniquement sur wp-login.php via inc/login-page.php
 * (hook `login_enqueue_scripts`, jamais sur le reste du site).
 *
 * Structure DOM générée par le cœur WordPress + notre hook `login_header`
 * (voir inc/login-page.php) :
 *
 *   <body class="login ...">
 *     <div class="api-login-visual">...panneau décoratif (nous)...</div>
 *     <h1 class="screen-reader-text">...</h1>   (invisible, hors flux)
 *     <div id="login">
 *       <h1 class="wp-login-logo"><a>...</a></h1>
 *       <p class="api-login-tagline">...</p>    (notre accroche)
 *       <form id="loginform">...</form>
 *       <p id="nav">...</p>
 *       <p id="backtoblog">...</p>
 *     </div>
 *     <div class="language-switcher">...</div>
 *   </body>
 *
 * `.api-login-visual` et `#login` sont donc frères directs de <body> :
 * il suffit d'un `display:flex` sur `body.login` pour les répartir en
 * 2 colonnes, sans wrapper supplémentaire.
 */

:root{
	--api-blue-900:#162b68;
	--api-blue-800:#203b8a;
	--api-blue-700:#2c4ea8;
	--api-cream:#f5f5f5;
	--api-white:#ffffff;
	--api-ink:#2c2c2c;
	--api-muted:#4a4a4a;
	--api-brass-account:#c9963c;
	--api-brass-account-light:#e3b866;
	--api-brass-soft-account:rgba(201,150,60,.14);
	--api-error:#8b2635;
	--api-error-soft:rgba(139,38,53,.08);
	/* Gris anthracite/ardoise du panneau décoratif — repris de l'anneau
	   argenté du logo (cropped-LOGO-api-nb-small-whiteico), à la demande
	   de l'utilisateur, à la place du bleu marine initial. Les accents
	   dorés (bouton, jetons, symboles) restent inchangés. */
	--api-slate-900:#23262b;
	--api-slate-800:#33373f;
	--api-slate-700:#464b55;
}

/* ---------- Réinitialisation du fond WordPress par défaut ---------- */

html{
	background:var(--api-cream);
}

body.login{
	display:flex;
	flex-direction:row-reverse; /* panneau décoratif à droite, formulaire à gauche (par défaut) */
	align-items:stretch;
	min-height:100vh;
	margin:0;
	padding:0;
	background:var(--api-cream);
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	overflow-x:hidden;
}

/* v1.3.46 : à la demande de l'utilisateur — côté du panneau réglable
   dans le Customizer (voir inc/login-customizer.php), classe posée sur
   <body> via le filtre core `login_body_class` (voir inc/login-page.php).
   `.api-login-visual`/`#login` gardent le même `order` (1/2) dans les
   deux cas — seul le sens du Flexbox change, ce qui suffit à inverser
   leur ordre d'affichage sans toucher au reste des règles. */
body.login.api-login-side-left{
	flex-direction:row;
}

body.login div#login{
	order:2;
}

/* ---------- Panneau décoratif « table de poker » ---------- */

.api-login-visual{
	order:1;
	position:relative;
	flex:1 1 46%;
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:
		radial-gradient(circle at 20% 15%, rgba(255,255,255,.08), transparent 45%),
		radial-gradient(circle at 80% 85%, rgba(255,255,255,.06), transparent 40%),
		linear-gradient(155deg, var(--api-slate-900) 0%, var(--api-slate-800) 55%, var(--api-slate-700) 100%);
}

/* Texture "feutrine" — grille de points discrets, purement décorative */
.api-login-visual::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
	background-size:22px 22px;
	pointer-events:none;
}

.api-login-visual-inner{
	position:relative;
	z-index:1;
	text-align:center;
	padding:48px;
	max-width:420px;
	transition:transform .2s ease-out; /* lissage du parallaxe souris — voir api-login.js */
}

.api-login-badge{
	position:relative;
	z-index:2;
	width:120px;
	height:120px;
	margin:0 auto 28px;
	border-radius:50%;
	background:var(--api-white);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 0 0 6px rgba(201,150,60,.25), 0 18px 40px rgba(0,0,0,.35);
	animation:api-login-badge-pulse 3.6s ease-in-out infinite;
}

.api-login-badge img{
	width:88px;
	height:88px;
	border-radius:50%;
	display:block;
}

.api-login-visual-title{
	position:relative;
	z-index:2;
	margin:0 0 8px;
	font-family:'Fraunces',Georgia,serif;
	font-weight:700;
	font-size:26px;
	line-height:1.25;
	color:var(--api-white);
}

.api-login-visual-subtitle{
	position:relative;
	z-index:2;
	margin:0;
	font-size:15px;
	color:rgba(255,255,255,.72);
	letter-spacing:.02em;
}

/* v1.3.45 : à la demande de l'utilisateur — les symboles/jetons
   décoratifs ne sont plus une longue liste de positions fixées à la main
   en CSS (40 symboles + 12 jetons en v1.3.44), mais générés
   ALÉATOIREMENT en JS à chaque chargement de page (voir
   createLoginFloaters() dans api-login.js), directement dans ce
   conteneur — lui-même enfant direct de .api-login-visual (et non plus
   de .api-login-visual-inner, la petite carte de 420px qui portait le
   badge/titre : les % de position n'y couvraient donc jamais que cette
   carte centrée, jamais tout le panneau). `inset:0` fait de ce conteneur
   un calque occupant tout le panneau, dans lequel le JS positionne
   chaque élément en % de sa propre largeur/hauteur — donc bien de TOUT
   le panneau désormais. */
.api-login-floaters{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	overflow:hidden;
}

/* Symboles de cartes flottants — décoratifs, position/taille/rythme
   d'animation fixés en JS via `style` (voir api-login.js), seule
   l'apparence commune reste ici. */
.api-login-suit{
	position:absolute;
	color:var(--api-brass-account-light);
	line-height:1;
	will-change:transform;
}

/* Jetons de poker — cercles générés en CSS (dégradé conique = tranche
   rayée), également décoratifs et flottants, position/taille/rythme fixés
   en JS. */
/* v1.3.47 : le `background` (tranche à bandes + disque blanc + logo) est
   désormais composé en JS (voir createLoginFloaters() dans api-login.js)
   — il dépend du logo réglé dans le Customizer, donc dynamique. Seules
   les propriétés structurelles/communes restent ici. */
.api-login-chip{
	position:absolute;
	border-radius:50%;
	will-change:transform;
	box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.3);
}

@keyframes api-login-badge-pulse{
	0%, 100%{ box-shadow:0 0 0 6px rgba(201,150,60,.25), 0 18px 40px rgba(0,0,0,.35); }
	50%{ box-shadow:0 0 0 12px rgba(201,150,60,.12), 0 18px 40px rgba(0,0,0,.35); }
}

@keyframes api-login-float-a{
	0%, 100%{ transform:translate(0,0) rotate(0deg); }
	50%{ transform:translate(6px,-14px) rotate(6deg); }
}

@keyframes api-login-float-b{
	0%, 100%{ transform:translate(0,0) rotate(0deg); }
	50%{ transform:translate(-8px,10px) rotate(-5deg); }
}

/* Troisième rythme de flottement (diagonale inverse) — évite que les
   14 symboles ne se synchronisent visuellement par paires trop
   régulières avec seulement 2 variantes. */
@keyframes api-login-float-c{
	0%, 100%{ transform:translate(0,0) rotate(0deg); }
	50%{ transform:translate(-6px,-10px) rotate(4deg); }
}

@keyframes api-login-spin{
	from{ transform:rotate(0deg); }
	to{ transform:rotate(360deg); }
}

/* ---------- Carte de connexion (#login) ---------- */

body.login #login{
	flex:1 1 54%;
	max-width:480px;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:0 auto;
	padding:56px 48px;
	box-sizing:border-box;
	animation:api-login-card-in .5s ease both;
}

@keyframes api-login-card-in{
	from{ opacity:0; transform:translateY(14px); }
	to{ opacity:1; transform:translateY(0); }
}

/* Le logo par défaut de WordPress (h1.wp-login-logo) fait double emploi
   avec le badge déjà affiché en grand dans le panneau décoratif : masqué
   plutôt que restylé. Son lien "retour au site" reste de toute façon
   couvert par #backtoblog en bas de carte (voir plus bas) — aucune perte
   d'accès pour la navigation clavier/lecteur d'écran. */
body.login h1.wp-login-logo{
	display:none;
}

.api-login-form-title{
	margin:0 0 10px;
	font-family:'Fraunces',Georgia,serif;
	font-weight:700;
	font-size:26px;
	color:var(--api-blue-900);
}

.api-login-tagline{
	margin:0 0 28px;
	font-size:14.5px;
	line-height:1.5;
	color:var(--api-muted);
	max-width:38ch;
}

/* Carte blanche autour du formulaire, cohérente avec les autres cartes
   du site (panier, commande, mon compte — box-shadow légère, coins
   arrondis, pas de bordure dure). */
body.login #loginform{
	background:var(--api-white);
	border:none;
	border-radius:20px;
	box-shadow:0 1px 2px rgba(15,51,39,.06), 0 20px 48px rgba(22,43,104,.10);
	padding:32px;
	box-sizing:border-box;
}

body.login #loginform p{
	margin-bottom:18px;
}

body.login #loginform label{
	display:block;
	margin-bottom:6px;
	font-size:13px;
	font-weight:600;
	color:var(--api-ink);
	letter-spacing:.01em;
}

body.login #loginform input[type="text"],
body.login #loginform input[type="password"]{
	width:100%;
	box-sizing:border-box;
	padding:12px 14px;
	/* Neutralise `.login input[type="password"] { margin:0 6px 16px 0; }`
	   (wp-admin/css/login.css) — cette marge de 16px en bas, invisible,
	   agrandissait le conteneur flex `.wp-pwd` au-delà du champ visible :
	   le bouton "afficher le mot de passe" (centré sur CE conteneur, voir
	   plus bas) se retrouvait donc centré 8px trop haut par rapport au
	   champ réellement affiché (signalé par l'utilisateur, capture à
	   l'appui — persistait malgré la correction de spécificité de la
	   v1.3.43, qui ne traitait que le mauvais symptôme). */
	margin:0;
	font-size:16px; /* >=16px : évite le zoom automatique iOS au focus */
	line-height:1.4;
	color:var(--api-ink);
	background:var(--api-cream);
	border:1.5px solid transparent;
	border-radius:12px;
	box-shadow:none;
	transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body.login #loginform input[type="text"]:focus,
body.login #loginform input[type="password"]:focus{
	background:var(--api-white);
	border-color:var(--api-brass-account);
	box-shadow:0 0 0 4px var(--api-brass-soft-account);
	outline:none;
}

body.login .user-pass-wrap{
	margin-bottom:18px;
}

body.login .wp-pwd{
	display:flex;
	align-items:center;
	position:relative;
}

body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"]{
	padding-right:44px;
}

/* Modernisation : Jetpack (jetpack-account-protection) pose un badge
   « Strong / Powered by Jetpack » sous le champ (`.strength-meter`, coins
   4px à peine arrondis, gris/vert plat) et force en JS un `border-radius`
   4px sur le champ lui-même (`style="border-radius:4px 4px 0 0"`, pour que
   les deux collent visuellement) — très en dessous des coins 12px du reste
   du formulaire (`#loginform input`). `!important` nécessaire uniquement
   sur le champ : c'est le seul des deux où Jetpack pose le rayon en style
   inline (le badge, lui, n'a que sa couleur de fond en inline — son rayon
   se redéfinit normalement). */
body.login .wp-pwd.is-open input[type="text"],
body.login .wp-pwd.is-open input[type="password"]{
	border-radius:12px 12px 0 0 !important;
}

body.login .strength-meter{
	border-radius:0 0 12px 12px;
	padding:8px 16px;
}

body.login .strength-meter .strength{
	font-weight:700;
}

body.login .strength-meter .powered-by{
	opacity:.75;
}

body.login .validation-checklist{
	margin:14px 0 0;
}

body.login .validation-message{
	font-size:13.5px;
}

/* `body.login .wp-pwd .button.wp-hide-pw` (et non `body.login .wp-hide-pw`) :
   le CSS natif de WordPress (wp-admin/css/login.css) cible ce bouton via
   `.login .button.wp-hide-pw { top:0; right:0; }`, 3 classes — plus
   spécifique qu'un sélecteur à 2 classes + élément. Sans ce niveau de
   spécificité, `top:50%`/`right:6px` ci-dessous étaient silencieusement
   ignorés et le bouton restait collé en haut à droite du champ (signalé
   par l'utilisateur, capture à l'appui) au lieu d'être centré
   verticalement. */
body.login .wp-pwd .button.wp-hide-pw{
	position:absolute;
	right:6px;
	top:50%;
	transform:translateY(-50%);
	background:transparent;
	border:none;
	color:var(--api-muted);
	box-shadow:none;
}

body.login .wp-pwd .button.wp-hide-pw:hover{
	color:var(--api-ink);
}

body.login p.forgetmenot{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:24px;
}

/* Coche entièrement redessinée en CSS (`appearance:none` + `::after`) au lieu
   du rendu WordPress natif : wp-admin/css/forms.css redessine DÉJÀ ses
   propres cases à cocher « maison » (`input[type=checkbox]{appearance:none;
   ...}` + `input[type=checkbox]:checked::before{ content:url("data:image/
   svg+xml...")}`, une icône SVG blanche). Cette coche WP core est calibrée
   pour SA propre taille de case (marges/dimensions en `rem`, pensées pour
   ~20px) — sur notre case redimensionnée à 18px, elle apparaît décalée en
   haut à gauche au lieu d'être recentrée (signalé par l'utilisateur, capture
   à l'appui, persistait après les 2 correctifs précédents qui ciblaient
   l'alignement de la case et son anneau de focus, pas la coche elle-même).
   1re tentative de correctif : ajouter NOTRE PROPRE coche (`::after`) par
   dessus SANS supprimer celle de WP core (`::before`) — résultat : une
   double coche superposée (signalé par l'utilisateur). Corrigé en
   neutralisant explicitement la coche `::before` de WP core (`content:none`)
   avant de dessiner la nôtre en `::after`, positionnée en px et calculée
   pour le centre exact de NOTRE case (18px, bordure 1.5px) plutôt que
   reprise approximativement d'un tutoriel générique. */
body.login p.forgetmenot input[type="checkbox"]{
	box-sizing:border-box;
	width:18px;
	height:18px;
	margin:0;
	padding:0;
	-webkit-appearance:none;
	appearance:none;
	background:var(--api-cream);
	border:1.5px solid var(--api-muted);
	border-radius:4px;
	position:relative;
	cursor:pointer;
	transition:background-color .16s ease, border-color .16s ease;
}

body.login p.forgetmenot input[type="checkbox"]:checked{
	background:var(--api-brass-account);
	border-color:var(--api-brass-account);
}

/* Neutralise la coche SVG de wp-admin/css/forms.css (voir docblock
   ci-dessus) — DOIT rester avant la règle `::after` suivante pour que la
   nôtre soit bien la seule visible. */
body.login p.forgetmenot input[type="checkbox"]:checked::before{
	content:none;
}

/* Rectangle 4×8 (avant rotation), bordures droite+bas de 2px — trace visible
   après `rotate(45deg)` une forme de coche « ✓ ». Son centre géométrique
   (avant rotation, la rotation ne le déplace pas) doit tomber sur le centre
   exact de la case : centre case = (18/2, 18/2) = (9, 9) en coordonnées
   bord-à-bord (border-box) ; `left`/`top` d'un élément en position absolue
   se comptent depuis le bord INTÉRIEUR de la bordure (padding-box) du
   parent, donc décalés de +1.5px (l'épaisseur de bordure) par rapport au
   bord-à-bord. left = 9 − 1.5(bordure) − 4/2(largeur du rectangle) = 5.5 ;
   top = 9 − 1.5 − 8/2 = 3.5. */
body.login p.forgetmenot input[type="checkbox"]:checked::after{
	content:"";
	position:absolute;
	left:5.5px;
	top:3.5px;
	width:4px;
	height:8px;
	border:solid var(--api-white);
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}

/* wp-admin/css/login.css pose son propre anneau de focus au clic/tap sur la
   case (`box-shadow:0 0 0 2px #fff, 0 0 0 4px #3858e9` — bleu générique de
   l'admin WordPress), qui déborde de façon asymétrique autour de la case et
   donne l'impression d'un mauvais centrage par rapport au texte (signalé
   par l'utilisateur, capture à l'appui — persistait après la correction du
   `margin-bottom` du label). Neutralisé au profit d'un anneau doré,
   cohérent avec le focus des champs texte (`#loginform input:focus`
   plus haut). Volontairement sur `:focus` (pas seulement `:focus-visible`) :
   contrairement à un bouton, le focus d'une case à cocher au clic/tap est
   attendu, pas seulement au clavier. */
body.login p.forgetmenot input[type="checkbox"]:focus{
	outline:none;
	box-shadow:0 0 0 4px var(--api-brass-soft-account);
}

/* `body.login #loginform p.forgetmenot label` (et non `body.login
   p.forgetmenot label`) : `body.login #loginform label` (règle générique
   ci-dessus, pensée pour les vrais labels de champs comme « Identifiant »/
   « Mot de passe ») pose `display:block` + `margin-bottom:6px` — grâce à
   l'id `#loginform`, elle gagne sur un sélecteur à seulement 2 classes et
   continue de s'appliquer à CE label malgré le `margin:0` ci-dessous. Cette
   marge basse résiduelle casse le centrage vertical de la case à cocher
   dans la ligne flex (le label garde une boîte plus haute que son texte,
   qui remonte donc légèrement au-dessus du centre de la case — signalé par
   l'utilisateur sur mobile, capture à l'appui). Il faut au moins le même
   niveau de spécificité (id + 2 classes) pour gagner à coup sûr. */
body.login #loginform p.forgetmenot label{
	display:inline;
	margin:0;
	font-size:14px;
	font-weight:500;
	color:var(--api-muted);
}

body.login p.submit{
	margin-bottom:0;
}

/* Page de réinitialisation (`resetpassform`) : le bouton « Générer un mot de
   passe » (`.wp-generate-pw`, WP core) et le bouton « Enregistrer le mot de
   passe » (`#wp-submit`, ci-dessous) partagent le même `<p class="submit">`
   — à la demande de l'utilisateur, empilés proprement avec un espacement
   constant plutôt que la marge par défaut de wp-admin/css/login.css. */
body.login p.reset-pass-submit{
	display:flex;
	flex-direction:column;
	gap:10px;
}

/* `.wp-generate-pw` gardait le style bouton par défaut de wp-admin (fond
   blanc, bordure bleue anguleuse) — signalé par l'utilisateur comme
   détonnant avec le reste du formulaire. Repris en pilule secondaire
   « creuse » (bordure dorée, fond crème) : même famille visuelle que
   `#wp-submit` (pilule dorée pleine) ci-dessous, mais en second plan
   puisque « Générer » est une action secondaire par rapport à
   « Enregistrer ». */
body.login .wp-generate-pw{
	width:100%;
	box-sizing:border-box;
	padding:12px 20px;
	background:var(--api-cream);
	border:1.5px solid var(--api-brass-account);
	border-radius:999px;
	color:var(--api-blue-900);
	font-size:14px;
	font-weight:600;
	letter-spacing:.01em;
	text-shadow:none;
	box-shadow:none;
	transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}

body.login .wp-generate-pw:hover{
	background:var(--api-brass-soft-account);
	border-color:var(--api-brass-account-light);
}

body.login .wp-generate-pw:active{
	transform:translateY(1px);
}

/* Anneau de focus doré cohérent avec le reste du formulaire (voir
   `#loginform input:focus` plus haut) plutôt que l'anneau bleu par défaut
   du navigateur — au clavier uniquement (`:focus-visible`), pas au clic
   souris/tactile. */
body.login .wp-generate-pw:focus,
body.login #wp-submit:focus{
	outline:none;
}

body.login .wp-generate-pw:focus-visible,
body.login #wp-submit:focus-visible{
	box-shadow:0 0 0 4px var(--api-brass-soft-account);
}

body.login #wp-submit{
	width:100%;
	padding:14px 20px;
	background:linear-gradient(135deg, var(--api-brass-account) 0%, var(--api-brass-account-light) 100%);
	border:none;
	border-radius:999px;
	color:var(--api-blue-900);
	font-size:15px;
	font-weight:700;
	letter-spacing:.02em;
	text-shadow:none;
	box-shadow:0 10px 24px rgba(201,150,60,.35);
	transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.login #wp-submit:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 30px rgba(201,150,60,.45);
	filter:brightness(1.03);
}

body.login #wp-submit:active{
	transform:translateY(0);
	box-shadow:0 6px 16px rgba(201,150,60,.35);
}

/* Générique : tout autre champ ajouté par un plugin (ex. la vérification
   anti-robot déclenchée par Jetpack Protect après plusieurs échecs)
   hérite du même style de carte que le reste du formulaire, sans
   sélecteur dédié fragile. */
body.login #loginform > p:not(.forgetmenot):not(.submit) input[type="text"],
body.login #loginform > p:not(.forgetmenot):not(.submit) input[type="number"]{
	width:100%;
	box-sizing:border-box;
	padding:12px 14px;
	font-size:16px;
	background:var(--api-cream);
	border:1.5px solid transparent;
	border-radius:12px;
}

/* ---------- Messages d'erreur / d'information ---------- */

body.login #login_error,
body.login .message{
	background:var(--api-error-soft);
	border:none;
	border-left:4px solid var(--api-error);
	border-radius:10px;
	padding:14px 16px;
	margin:0 0 20px;
	font-size:14px;
	color:var(--api-error);
	box-shadow:none;
}

body.login .message{
	background:var(--api-brass-soft-account);
	border-left-color:var(--api-brass-account);
	color:var(--api-ink);
}

/* ---------- Liens sous le formulaire ---------- */

body.login #nav,
body.login #backtoblog{
	text-align:center;
	margin:16px 0 0;
	font-size:13.5px;
}

body.login #nav a,
body.login #backtoblog a{
	color:var(--api-blue-800);
	text-decoration:none;
	font-weight:600;
}

body.login #nav a:hover,
body.login #backtoblog a:hover{
	text-decoration:underline;
}

body.login .privacy-policy-page-link{
	text-align:center;
	margin-top:8px;
}

body.login .privacy-policy-page-link a{
	font-size:12.5px;
	color:var(--api-muted);
}

/* ---------- Sélecteur de langue — retiré du flux, coin bas-droit ---------- */

body.login .language-switcher{
	order:3; /* derrière .api-login-visual (1) et #login (2) — sans quoi son
	            ordre par défaut (0) le ferait passer devant les deux dès
	            que position:fixed n'est plus actif (voir media query
	            ci-dessous, où il repasse en flux normal). */
	position:fixed;
	right:16px;
	bottom:16px;
	z-index:5;
	background:var(--api-white);
	border-radius:12px;
	box-shadow:0 6px 18px rgba(22,43,104,.12);
	padding:6px 10px;
}

body.login .language-switcher select,
body.login .language-switcher .button{
	font-size:12px;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
	body.login{
		flex-direction:column;
	}

	body.login #login{
		order:2;
		max-width:520px;
		padding:32px 24px 48px;
	}

	.api-login-visual{
		order:1;
		flex:0 0 auto;
		min-height:220px;
		padding:0;
	}

	.api-login-visual-inner{
		padding:28px 24px;
		max-width:100%;
	}

	.api-login-badge{
		width:84px;
		height:84px;
		margin-bottom:14px;
	}

	.api-login-badge img{
		width:60px;
		height:60px;
	}

	.api-login-visual-title{
		font-size:20px;
	}

	.api-login-visual-subtitle{
		font-size:13px;
	}

	body.login .language-switcher{
		position:static;
		display:flex;
		justify-content:center;
		margin:20px auto 0;
		box-shadow:none;
		background:transparent;
	}
}

@media (max-width:480px){
	body.login #login{
		padding:28px 16px 40px;
	}

	body.login #loginform{
		padding:24px 20px;
		border-radius:16px;
	}
}

/* `.wp-pwd` (champ « Nouveau mot de passe », page de réinitialisation) est en
   `display:flex` sur une seule ligne — le champ ET le badge Jetpack
   « Strong / Powered by Jetpack » (jetpack-account-protection, injecté en JS
   dans un `<div>` sans classe, frère du `<input>`) s'y partagent la largeur.
   Le badge ne descend jamais sous ~300px de large (texte "Strong" + "Powered
   by" + logo Jetpack, non compressible sans se mettre à retomber à la
   ligne au milieu des mots) : dès que `.wp-pwd` fait moins d'environ
   700-750px, il écrase le champ jusqu'à le rendre illisible. Corrigé une
   première fois seulement `max-width:600px` (mobile) — signalé de nouveau
   par l'utilisateur sur la mise en page 2 colonnes desktop (panneau
   décoratif à droite, `#login` à gauche, capture à l'appui : même
   écrasement du champ + badge dont le texte se casse au milieu de "Powered
   by"). Plutôt que de chasser un nouveau seuil, la règle est désormais
   INCONDITIONNELLE, à toutes les tailles d'écran : le champ en pleine
   largeur, le badge Jetpack en dessous. `:has()` cible ce `<div>` sans
   avoir besoin de lui ajouter une classe (markup généré par Jetpack, hors
   de notre contrôle) — supporté par tous les navigateurs modernes. */
body.login .wp-pwd{
	flex-wrap:wrap;
}

body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"]{
	flex:1 1 100%;
}

body.login .wp-pwd > div:has(.strength-meter){
	flex:1 1 100%;
	margin-top:8px;
}

/* ---------- Accessibilité : moins de mouvement ---------- */

@media (prefers-reduced-motion: reduce){
	.api-login-badge,
	.api-login-suit,
	.api-login-chip,
	body.login #login{
		animation:none !important;
	}

	body.login #wp-submit,
	body.login #loginform input[type="text"],
	body.login #loginform input[type="password"],
	.api-login-visual-inner{
		transition:none !important;
	}
}