/* ============================================================
   login.css — styles propres à testlogin.php. S'appuie sur les
   classes utilitaires génériques définies dans utilities.css,
   qui doit être chargé avant ce fichier.
   ============================================================ */

body {
    background: linear-gradient(160deg, #eff6ff 0%, #f8faff 45%, #ffffff 100%);
}

/* Mise en page 'floating' : une carte positionnable, sans colonne image (voir
   src/templates/login.php — $formVAlign/$formHAlign). flex-direction:column fait de
   justify-content l'axe vertical (haut/milieu/bas) et de align-items l'axe horizontal
   (gauche/centre/droite) ; 'middle'/'center' sont déjà le comportement par défaut ci-dessous.
   Les classes 'split-*' plus bas restent disponibles pour une future variante à deux colonnes. */
.login-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.login-page[data-valign="top"] { justify-content: flex-start; }
.login-page[data-valign="bottom"] { justify-content: flex-end; }
.login-page[data-halign="left"] { align-items: flex-start; }
.login-page[data-halign="right"] { align-items: flex-end; }
.login-card { width: 100%; max-width: 26rem; background: #ffffff; }

.login-logo {
    display: inline-block; height: 6rem; width: auto;
}

.login-input {
    display: block; width: 100%; font: inherit; color: #1f2937;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input::placeholder { color: #9ca3af; }
.login-input:focus {
    outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
#password.login-input { padding-inline-end: 2.5rem; }

.login-eye-btn {
    position: absolute; inset-inline-end: 0.5rem; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; color: #9ca3af;
    transition: color .15s ease;
}
.login-eye-btn:hover { color: #4b5563; }

.login-checkbox { width: 1rem; height: 1rem; border-radius: 0.25rem; accent-color: #3b82f6; }

.login-link { color: #3b82f6; transition: color .15s ease; }
.login-link:hover { color: #2563eb; text-decoration: underline; }

.login-submit {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.625rem 1rem; margin-top: 0.5rem;
    background: #3b82f6; color: #ffffff; font-size: 0.875rem; font-weight: 600;
    border-radius: 0.5rem; text-align: center; cursor: pointer;
    transition: background .15s ease;
    box-shadow: none;
}
.login-submit:hover { background: #2563eb; }
.login-submit:active { background: #1d4ed8; }

.icon-login { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.icon-login .arrow { transform-box: fill-box; transform-origin: center; }
.login-submit:hover .icon-login .arrow {
    animation: login-arrow-nudge .6s ease-in-out infinite;
}
@keyframes login-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}

.login-alert {
    display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem;
    padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem;
    color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
}

/* Same shape as .login-alert, positive framing — e.g. "mot de passe défini" after
   /set-password redirects back here (see login.php's $successMessage). */
.login-success {
    display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem;
    padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem;
    color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
}

/* ---- Mode 'split' : formulaire dans une colonne, image(s) dans l'autre ---- */
#login-split.split-reverse { flex-direction: row-reverse; }

.split-form-col {
    flex: 1 1 50%; display: flex; flex-direction: column;
    padding: 2rem; overflow-y: auto;
}

.login-form-body { flex: 1 1 auto; display: flex; justify-content: center; width: 100%; }

/* Scopé à la colonne 'split' seulement : un margin-top:auto sur .login-copyright pris pour un
   enfant direct de .login-page (mise en page 'floating') absorbe tout l'espace libre du flex
   container avant le justify-content de .login-page — ça neutralise le centrage vertical (le
   contenu se retrouve collé en haut, le copyright collé en bas) au lieu de laisser
   $formVAlign="middle" centrer la carte. */
.split-form-col .login-copyright { margin-top: auto; }

/* Répartition 'compact' : la colonne du formulaire s'ajuste à sa largeur naturelle, l'image prend le reste */
#login-split.split-compact .split-form-col { flex: 0 1 auto; width: min(480px, 100%); }
#login-split.split-compact .split-image-col { flex: 1 1 auto; }

.split-image-col { flex: 1 1 50%; position: relative; overflow: hidden; background: #0f172a; }
.split-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s ease;
}
.split-slide.active { opacity: 1; }

@media (max-width: 767px) {
    .split-image-col { display: none; }
    .split-form-col { flex: 1 1 100%; padding: 1.5rem; }
}

/* ---- Taille / épaisseur de police héritées du dashboard ----
   testlogin.php n'a pas son propre sélecteur (voir login.js) — mêmes règles que app.css pour
   que la page rende pareil que le reste de l'app une fois le réglage lu depuis localStorage.
   Les icônes ici sont déjà dimensionnées en rem (.icon-login, .login-eye-btn, w-4 h-4 …), donc
   suivent automatiquement le %-scaling ci-dessous. Font-weight n'affecte que le texte — pas
   le stroke-width des icônes (voir app.css pour le même choix et pourquoi). */
:root[data-font-size="large"] { font-size: 108%; }
:root[data-font-size="xlarge"] { font-size: 118%; }
:root[data-font-weight="medium"] body, :root[data-font-weight="medium"] body * { font-weight: 600 !important; }
:root[data-font-weight="bold"] body, :root[data-font-weight="bold"] body * { font-weight: 700 !important; }