/* PIXIARTI : page de connexion (wp-login.php). Scène animée à gauche, formulaire à droite. */
:root {
  --encre: #111216; --encre-2: #5b606b; --encre-3: #80858f; --fond: #eceef2; --ligne: #dfe2e8;
  --accent: #3b34f0; --accent-fonce: #2a23c9; --accent-doux: #ecebfe; --erreur: #c2341b;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}
html, body.login { height: 100%; }
body.login {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr); min-height: 100vh; margin: 0;
  background: var(--fond); font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--encre);
  -webkit-font-smoothing: antialiased;
}
body.login > *:not(.px-scene):not(#login) { grid-column: 2; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Scène ---------- */
.px-scene {
  grid-column: 1; grid-row: 1 / span 20; position: relative; overflow: hidden; isolation: isolate; color: #fff;
  display: flex; align-items: flex-end; padding: 56px;
  background:
    radial-gradient(70% 60% at 85% 10%, rgb(59 52 240 / .65), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgb(124 92 255 / .35), transparent 70%),
    #111216;
}
.px-scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgb(255 255 255 / .09) 1.2px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent);
}
.px-pixels { position: absolute; inset: 0; z-index: -1; }
.px-pixels i {
  position: absolute; bottom: -16px; left: calc(2% + var(--i) * 4.5%); width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); opacity: 0; animation: px-monte 12s linear infinite; animation-delay: calc(var(--i) * -.57s);
}
.px-pixels i:nth-child(3n) { width: 5px; height: 5px; background: #fff; }
.px-pixels i:nth-child(4n+1) { background: #8f8aff; animation-duration: 15s; }
@keyframes px-monte { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .45; } 100% { transform: translateY(-110vh) rotate(120deg); opacity: 0; } }

/* Trois publications cadrées qui flottent */
.px-cartes { position: absolute; top: 12%; right: 10%; width: 46%; aspect-ratio: 1; }
.px-carte {
  position: absolute; width: 52%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
  animation: px-arrive 1.1s var(--sortie) backwards, px-flotte 7s ease-in-out infinite alternate;
}
.px-carte b { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #fff; }
.px-carte b::before { content: ""; position: absolute; left: 10%; top: 50%; width: 9%; aspect-ratio: 1; margin-top: -4.5%; border-radius: 2px; background: var(--accent); }
.px-carte b::after { content: ""; position: absolute; left: 24%; top: 50%; width: 46%; height: 10%; margin-top: -5%; border-radius: 4px; background: #d9dbe2; }
.px-carte.c1 { left: 0; top: 18%; --r: -9deg; transform: rotate(var(--r)); background: linear-gradient(150deg, #6e89a8, #2d3b52 70%); animation-delay: .25s, 0s; }
.px-carte.c2 { left: 30%; top: 0; z-index: 2; --r: 4deg; transform: rotate(var(--r)); background: linear-gradient(160deg, #e0a36b, #9c4a2e 75%); animation-delay: .4s, -2s; }
.px-carte.c3 { left: 46%; top: 40%; z-index: 1; --r: 11deg; transform: rotate(var(--r)); background: linear-gradient(140deg, #8fb5a3, #2f5a4e 75%); animation-delay: .55s, -4s; }
.px-carte.c2 b { background: #3b34f0; }
.px-carte.c2 b::before { background: #fff; }
.px-carte.c2 b::after { background: rgb(255 255 255 / .45); }
@keyframes px-arrive { from { opacity: 0; translate: 0 70px; scale: .85; } }
@keyframes px-flotte { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-16px) rotate(calc(var(--r) * .6)); } }

.px-texte { position: relative; max-width: 460px; }
.px-logo { margin: 0 0 26px; display: inline-flex; align-items: flex-end; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; padding-top: 10px; }
.px-logo .i { position: relative; display: inline-block; }
.px-logo .i b { position: absolute; left: 50%; top: -9px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 2px; background: var(--accent); animation: px-tombe .8s var(--sortie) backwards; }
.px-logo .i:nth-of-type(2) b { animation-delay: .1s; }
.px-logo .i:nth-of-type(3) b { animation-delay: .2s; }
@keyframes px-tombe { from { transform: translateY(-40px); opacity: 0; } 70% { transform: translateY(2px); } }
.px-accroche { margin: 0 0 12px; font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; animation: px-entre .8s .15s var(--sortie) backwards; }
.px-sous { margin: 0; font-size: 16px; line-height: 1.5; color: rgb(255 255 255 / .7); max-width: 36ch; animation: px-entre .8s .25s var(--sortie) backwards; }
@keyframes px-entre { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Formulaire ---------- */
#login { grid-column: 2; align-self: center; justify-self: center; width: min(380px, 100% - 48px); padding: 40px 0; }
.login h1 { margin-bottom: 18px; text-align: left; animation: px-entre .6s var(--sortie) backwards; }
.login h1 a {
  width: 48px; height: 48px; margin: 0; background: url("../app/favicon.svg") center / 48px no-repeat;
  text-indent: -9999px; overflow: hidden;
}
#login::before { content: "Connexion"; display: block; margin: 0 0 4px; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; order: 1; animation: px-entre .6s .05s var(--sortie) backwards; }
#login { display: flex; flex-direction: column; }
#login > h1 { order: 0; }
#login > * { order: 2; }
#login::after { content: "Accès réservé à l'administrateur."; order: 1; display: block; margin: 0 0 22px; font-size: 14px; color: var(--encre-2); animation: px-entre .6s .1s var(--sortie) backwards; }
.login form {
  margin: 0; padding: 26px; border: 1px solid var(--ligne); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgb(17 18 22 / .05), 0 24px 48px -24px rgb(17 18 22 / .25);
  animation: px-entre .7s .15s var(--sortie) backwards;
}
.login label { font-size: 13px; font-weight: 600; color: var(--encre); margin-bottom: 6px; display: inline-block; }
.login form .input, .login input[type="text"], .login input[type="password"] {
  margin: 0 0 16px; padding: 10px 12px; min-height: 46px; font-size: 16px; border: 1px solid var(--ligne); border-radius: 11px;
  background: #fff; box-shadow: none; transition: border-color .2s, box-shadow .25s var(--sortie);
}
.login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux); outline: none;
}
.login .wp-pwd { position: relative; }
.login .button.wp-hide-pw { top: 3px; right: 3px; height: 40px; min-height: 40px; width: 40px; color: var(--encre-2); border-radius: 9px; }
.login .button.wp-hide-pw:focus { box-shadow: 0 0 0 2px var(--accent); }
.login .forgetmenot { margin: 2px 0 18px; float: none; }
.login .forgetmenot label { font-weight: 500; color: var(--encre-2); }
.login input[type="checkbox"] { border-radius: 5px; border-color: #c9cdd6; }
.login input[type="checkbox"]:checked::before { filter: hue-rotate(10deg); }
.login .submit { margin: 0; }
.login .button-primary, .wp-core-ui .button-primary {
  position: relative; overflow: hidden; float: none; width: 100%; min-height: 48px; border: 0; border-radius: 12px;
  background: var(--accent); font-size: 15px; font-weight: 600; text-shadow: none;
  box-shadow: 0 1px 2px rgb(42 35 201 / .3), inset 0 1px 0 rgb(255 255 255 / .14);
  background-image: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .25) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; background-repeat: no-repeat;
  transition: background-color .2s, background-position .9s var(--sortie), transform .15s, box-shadow .25s;
}
.login .button-primary:hover, .wp-core-ui .button-primary:hover { background-color: var(--accent-fonce); background-position: -20% 0; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgb(42 35 201 / .6); }
.login .button-primary:active { transform: scale(.98); }
.login .button-primary:focus { box-shadow: 0 0 0 3px var(--accent-doux), 0 0 0 1px var(--accent); }
.login #nav, .login #backtoblog { margin: 18px 0 0; padding: 0; text-align: center; animation: px-entre .6s .3s var(--sortie) backwards; }
.login #nav a { color: var(--encre-2); font-size: 13px; text-decoration: none; }
.login #nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.login #backtoblog, .language-switcher, .login .privacy-policy-page-link { display: none; }
.login .message, .login .notice, .login #login_error {
  margin: 0 0 16px; padding: 12px 14px; border: 0; border-radius: 12px; box-shadow: none; font-size: 13px; background: #fff;
}
.login #login_error { background: #fbebe7; color: var(--erreur); animation: px-secoue .45s; }
.login .message, .login .notice-info, .login .success { background: var(--accent-doux); color: var(--encre); }
@keyframes px-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  body.login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  body.login > *:not(.px-scene):not(#login) { grid-column: 1; }
  .px-scene { grid-row: 1; min-height: 260px; padding: 28px 24px; }
  .px-cartes { top: 10%; right: -6%; width: 54%; }
  .px-logo { font-size: 30px; margin-bottom: 14px; }
  .px-accroche { font-size: 30px; }
  .px-sous { display: none; }
  #login { grid-column: 1; grid-row: 2; align-self: start; padding: 28px 0 40px; }
  .login h1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}