/**
* 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) :
*
*
* ...panneau décoratif (nous)...
* ...
(invisible, hors flux)
*
*
*
...
(notre accroche)
*
*
...
*
...
*
...
*
*
* `.api-login-visual` et `#login` sont donc frères directs de :
* 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
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;
}
/* `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;
}
body.login p.forgetmenot input[type="checkbox"]{
width:18px;
height:18px;
margin:0;
accent-color:var(--api-brass-account);
border-radius:4px;
}
body.login p.forgetmenot label{
margin:0;
font-size:14px;
font-weight:500;
color:var(--api-muted);
}
body.login p.submit{
margin-bottom:0;
}
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;
}
}
/* ---------- 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;
}
}