/* ─── INTRO LOGIN — animée par js/login.js (Motion One) ────────────────
   Le fond clair existant (avec ses orbes radiaux ::before/::after) est conservé.
   Motion anime : les deux halos, la card, le logo, les champs.
   Ce fichier n'a que les états statiques + skip + reduced-motion. */

/* Helper a11y */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Wrapper de l'intro V (overlay transparent au-dessus du formulaire) ── */
.login-intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: transparent;
    perspective: 1200px;
}
.login-intro .login-v {
    width: clamp(200px, 30vmin, 320px);
    height: auto;
    /* État initial : flou + invisible. Motion l'anime vers net + visible. */
    opacity: 0;
    filter: blur(24px);
    transform: scale(1.05);
    will-change: transform, opacity, filter;
}

/* Modes où l'intro V ne doit pas s'afficher */
html.login-no-intro .login-intro,
html.login-intro-finished .login-intro {
    display: none;
}

/* ── État INITIAL au paint (anti-FOUC) ──────────────────────────────────
   On force tout à opacity:0 + animation:none PAR DÉFAUT.
   Sans le `animation: none !important`, les animations héritées de
   global.css (loginBoxIn, loginLogoIn, loginFieldIn) écraseraient
   notre opacity:0 et créeraient un flash apparition/disparition. */

.login-box,
.login-box .login-logo,
.login-box .form-group,
.login-box .form-actions,
.login-box .login-error,
.login-credit {
    opacity: 0;
    animation: none !important;
}
.login-container::before,
.login-container::after {
    opacity: 0;
}

/* ── Halos animés (orbes radiaux flottants) ────────────────────────────
   Pas d'effet d'entrée : les halos sont visibles à leur position dès le
   chargement et font juste leur breath subtil en boucle infinie. */

@keyframes loginHaloBreath1 {
    0%, 100% { transform: scale(1)    translate(0, 0);       opacity: 0.85; }
    50%      { transform: scale(1.06) translate(20px, 15px); opacity: 1;    }
}
@keyframes loginHaloBreath2 {
    0%, 100% { transform: scale(1)    translate(0, 0);         opacity: 0.85; }
    50%      { transform: scale(1.08) translate(-25px, -20px); opacity: 1;    }
}

html.login-intro-active .login-container::before,
html.login-no-intro .login-container::before,
html.login-intro-finished .login-container::before {
    opacity: 1;
    animation: loginHaloBreath1 8s ease-in-out infinite;
    will-change: transform, opacity;
}
html.login-intro-active .login-container::after,
html.login-no-intro .login-container::after,
html.login-intro-finished .login-container::after {
    opacity: 1;
    animation: loginHaloBreath2 9s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Mobile : on retire complètement les halos (sinon découpe disgracieuse
   avec la Dynamic Island / encoche, et perf moindre sur petits appareils).
   On aplatit aussi le fond en couleur unie (pas de dégradé). */
@media (max-width: 640px) {
    .login-container::before,
    .login-container::after {
        display: none !important;
    }
    .login-container {
        background: #fafbfc;
    }
    html, body {
        background: #fafbfc;
    }
}

/* ── Mode INTRO ACTIVE : Motion va tout animer en JS ─────────────────── */

/* Désactiver les animations CSS héritées de global.css pour ne pas avoir
   de double animation pendant que Motion travaille. */
html.login-intro-active .login-box,
html.login-intro-active .login-box .login-logo,
html.login-intro-active .login-box .form-group,
html.login-intro-active .login-box .form-actions,
html.login-intro-active .login-box .login-error {
    animation: none !important;
    will-change: opacity, transform, filter;
}

/* États initiaux explicites pour Motion (point de départ des transforms) */
html.login-intro-active .login-box {
    transform: translateY(24px) scale(0.96);
    filter: blur(6px);
    pointer-events: none;
}
html.login-intro-active .login-box .login-logo {
    transform: translateY(-4px) scale(0.94);
}
html.login-intro-active .login-box .form-group,
html.login-intro-active .login-box .form-actions,
html.login-intro-active .login-box .login-error {
    transform: translateY(10px);
}

/* ── Mode NO-INTRO : on rend tout visible, animations CSS classiques ── */
/* Les keyframes loginBoxIn / loginLogoIn / loginFieldIn de global.css
   partent à opacity:0 et finissent à opacity:1, donc avec animation-fill: both
   (déjà en place dans global.css) la valeur finale sera opacity:1. */

html.login-no-intro .login-box,
html.login-no-intro .login-box .login-logo,
html.login-no-intro .login-box .form-group,
html.login-no-intro .login-box .form-actions,
html.login-no-intro .login-box .login-error,
html.login-no-intro .login-credit,
html.login-no-intro .login-container::before,
html.login-no-intro .login-container::after {
    opacity: 1;
}

/* ── Skip (clic / Échap pendant l'intro) ───────────────────────────── */
html.login-skip .login-container::before,
html.login-skip .login-container::after {
    transition: opacity 200ms ease-out, transform 200ms ease-out !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}
html.login-skip .login-box {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: opacity 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out !important;
    pointer-events: auto;
}
html.login-skip .login-box .login-logo,
html.login-skip .login-box .form-group,
html.login-skip .login-box .form-actions,
html.login-skip .login-box .login-error,
html.login-skip .login-credit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 200ms ease-out !important;
}

/* ── Reduced motion : défense en profondeur ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html.login-intro-active .login-container::before,
    html.login-intro-active .login-container::after,
    html.login-intro-active .login-box,
    html.login-intro-active .login-box .login-logo,
    html.login-intro-active .login-box .form-group,
    html.login-intro-active .login-box .form-actions,
    html.login-intro-active .login-box .login-error,
    html.login-intro-active .login-credit {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ─── Surcharges existantes (couleurs marque Vethys) ──────────────────── */

.login-container::before {
    background: radial-gradient(circle, rgba(12, 23, 39, 0.4) 0%, rgba(12, 23, 39, 0) 70%);
}

.login-container::after {
    background: radial-gradient(circle, rgba(211, 141, 46, 0.35) 0%, rgba(211, 141, 46, 0) 70%);
}

.login-box .btn-primary {
    background: #0C1727;
    border-color: #0C1727;
    box-shadow:
        0 1px 2px rgba(12, 23, 39, 0.3),
        0 2px 6px rgba(12, 23, 39, 0.15);
}

.login-box .btn-primary:hover {
    background: #D38D2E;
    border-color: #D38D2E;
    box-shadow:
        0 2px 4px rgba(211, 141, 46, 0.35),
        0 6px 16px rgba(211, 141, 46, 0.22);
}

/* Credit "iatko" : on désactive le gradient multicolore (défini dans
   global.css) pour rester sur une couleur foncée plate, cohérente avec
   la marque Vethys. */
.login-credit .login-credit-link {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0C1727 !important;
    color: #0C1727 !important;
    animation: none !important;
}

/* Le soulignement de hover (::after de global.css) couvrait tout le lien,
   y compris le logo iatko. On le neutralise et on le réapplique uniquement
   sur le <span class="iatko-text"> qui entoure le mot "iatko". */
.login-credit .login-credit-link::after {
    display: none;
}
.login-credit .iatko-text {
    position: relative;
    display: inline-block;
}
.login-credit .iatko-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #0C1727;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.login-credit .login-credit-link:hover .iatko-text::after {
    transform: scaleX(1);
}

/* ── Case "Se souvenir de moi" — minimal navy & or ───────────────────────── */
.form-group-remember {
    margin-top: -0.25rem;
    margin-bottom: 1.5rem;
}

/* On annule l'héritage .form-group label (uppercase, bold, etc.) */
label.remember-me {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #0C1727;
    cursor: pointer;
    user-select: none;
}

/* Native checkbox hors flux mais focusable */
.remember-me input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

/* Boîte custom */
.remember-me-box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid rgba(12, 23, 39, 0.28);
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.remember-me:hover .remember-me-box {
    border-color: rgba(12, 23, 39, 0.55);
}

.remember-me input[type="checkbox"]:focus-visible + .remember-me-box {
    border-color: #0C1727;
    box-shadow: 0 0 0 3px rgba(12, 23, 39, 0.12);
}

.remember-me input[type="checkbox"]:checked + .remember-me-box {
    background: #0C1727;
    border-color: #0C1727;
}

.remember-me-box svg {
    width: 11px;
    height: 11px;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 130ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.remember-me input[type="checkbox"]:checked + .remember-me-box svg {
    opacity: 1;
    transform: scale(1);
}

/* Filet doré subtil quand cochée — clin d'œil au V de Vethys */
.remember-me input[type="checkbox"]:checked + .remember-me-box::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 7px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    pointer-events: none;
}
.remember-me-box {
    position: relative;
}

.remember-me-text {
    display: block;
    line-height: 1.3;
}

.remember-me-text small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(12, 23, 39, 0.55);
    letter-spacing: 0;
    text-transform: none;
}