/* ================================================================
   AUTHENTIFICATION — connexion, inscription, mot de passe oublié
   Gabarit : templates/security/_auth_layout.html.twig
   Desktop (>= 992px) : carte du formulaire à gauche, visuel Mérilac à droite.
   Mobile : formulaire seul, sans image.
   S'appuie sur znv-ui.css (.znv-form, .znv-field, .znv-btn, .znv-alert...).
   ================================================================ */

.znv-auth {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 70px);
    min-height: calc(100svh - 70px);
    background:
        radial-gradient(70% 55% at 0% 0%, rgba(56, 193, 233, .14), transparent 70%),
        radial-gradient(60% 50% at 100% 100%, rgba(0, 247, 206, .08), transparent 70%),
        #0f1014;
}

/* ---------- Colonne formulaire ---------- */
.znv-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 1rem + 4vw, 4rem) 1rem;
}

.znv-auth-card {
    width: 100%;
    max-width: 460px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--znv-line);
    border-radius: var(--znv-r-lg);
    background: rgba(21, 22, 27, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.znv-auth-title {
    margin: 0 0 .6rem;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
    line-height: 1.05;
    overflow-wrap: anywhere;    /* pseudo très long sur "Bienvenue X !" */
    text-wrap: balance;
}

.znv-auth-lead {
    margin: 0 0 1.75rem;
    color: var(--znv-text-dim) !important;
    font-size: 1rem;
    line-height: 1.6;
}

.znv-auth-lead:empty {
    display: none;
}

/* Messages (flash, erreurs globales) */
.znv-auth-messages > .znv-alert,
.znv-auth-card > .znv-alert {
    margin-bottom: 1rem;
}

.znv-auth .znv-alert {
    color: var(--znv-text);
}

/* Listes d'erreurs rendues par Symfony (<ul><li>) */
.znv-auth .znv-alert ul,
.znv-auth .znv-field-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.znv-auth .znv-field-error {
    display: grid;
    gap: .2rem;
    font-weight: 500;
}

/* ---------- Champs ---------- */
.znv-auth-form {
    gap: 1.2rem;
}

/* Les inputs Symfony n'ont pas de classe : on reprend le style .znv-field */
.znv-auth .znv-field input:not([type="checkbox"]) {
    min-height: 52px;
}

/* Champ mot de passe + bouton "Afficher" */
.znv-auth-password {
    position: relative;
}

.znv-auth-password input {
    padding-right: 3.5rem !important;
}

.znv-auth-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--znv-r-sm);
    background: transparent;
    color: var(--znv-text-dim);
    font-size: 1.15rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s, background-color .2s;
}

.znv-auth-toggle[hidden] {
    display: none;
}

.znv-auth-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.znv-auth-toggle[aria-pressed="true"] {
    color: var(--znv-accent);
}

.znv-auth-toggle:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 0;
}

/* Masque l'œil natif d'Edge pour éviter deux boutons */
.znv-auth-password input::-ms-reveal,
.znv-auth-password input::-ms-clear {
    display: none;
}

/* Case à cocher : zone cliquable d'au moins 44 px */
.znv-auth-check {
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}

.znv-auth-check input[type="checkbox"] {
    margin-top: 0;
    cursor: pointer;
}

.znv-auth-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 2px;
}

.znv-auth-check label {
    cursor: pointer;
}

.znv-auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-top: -.35rem;
}

/* Liens texte (mot de passe oublié, créer un compte...) */
.znv-auth-inline-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--znv-accent) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
    transition: color .2s;
}

.znv-auth-inline-link:hover {
    color: var(--znv-accent-2) !important;
}

.znv-auth-inline-link:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dans une phrase (alertes, case CGU), le lien ne doit pas casser la ligne */
.znv-alert .znv-auth-inline-link,
.znv-auth-check .znv-auth-inline-link {
    display: inline;
    min-height: 0;
}

.znv-auth-form .znv-btn {
    margin-top: .35rem;
}

.znv-auth-actions {
    margin-top: 1.5rem;
}

/* Ligne "Nouveau sur Zenavia ? Créer un compte" */
.znv-auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .4rem;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--znv-line);
    color: var(--znv-text-dim) !important;
    font-size: .95rem;
    text-align: center;
}

.znv-auth-code {
    padding: .1rem .4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: var(--znv-mono);
    font-size: .9em;
}

/* ---------- Colonne visuel (desktop uniquement) ---------- */
.znv-auth-visual {
    display: none;
}

@media (min-width: 992px) {
    .znv-auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .znv-auth-panel {
        padding: 3rem clamp(1.5rem, 4vw, 4rem);
    }

    .znv-auth-visual {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 1rem 1rem 1rem 0;
        overflow: hidden;
        border: 1px solid var(--znv-line);
        border-radius: var(--znv-r-xl);
        /* Couleur de repli le temps que l'image arrive */
        background: #1f2a36;
    }

    .znv-auth-visual picture {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .znv-auth-visual-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 60% 40%;
    }

    .znv-auth-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(180deg, rgba(10, 12, 16, .15) 0%, rgba(10, 12, 16, 0) 35%, rgba(10, 12, 16, .88) 100%);
        pointer-events: none;
    }

    .znv-auth-visual-caption {
        position: relative;
        z-index: 2;
        max-width: 30rem;
        padding: clamp(1.75rem, 3vw, 3rem);
    }

    .znv-auth-visual-caption .znv-eyebrow {
        color: var(--znv-accent-2) !important;
    }

    .znv-auth-visual-text {
        margin: 0;
        color: #fff !important;
        font-family: 'Paytone One', sans-serif;
        font-size: clamp(1.6rem, 1rem + 1.4vw, 2.3rem);
        line-height: 1.15;
        text-transform: uppercase;
        text-wrap: balance;
        text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    }

    /* Skin du joueur (page d'inscription) */
    .znv-auth-skin {
        position: absolute;
        right: clamp(1.5rem, 4vw, 4rem);
        bottom: clamp(5rem, 12vh, 8rem);
        z-index: 2;
        width: auto;
        height: min(52vh, 440px);
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
    }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 480px) {
    .znv-auth-panel {
        align-items: flex-start;
        padding: 1.5rem .75rem 2.5rem;
    }

    .znv-auth-card {
        padding: 1.4rem 1.1rem;
    }

    .znv-auth-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .znv-auth *,
    .znv-auth *::before,
    .znv-auth *::after {
        transition: none !important;
    }
}

/* Remplissage automatique du navigateur : garde le fond sombre */
.znv-auth .znv-field input:-webkit-autofill,
.znv-auth .znv-field input:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    box-shadow: 0 0 0 1000px #121318 inset;
    transition: background-color 9999s ease-out 0s;
}

.znv-auth .znv-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px #121318 inset, 0 0 0 3px rgba(56, 193, 233, .25);
}

/* ---------- Étape 1 de l'inscription (authentification/index) ---------- */
.znv-auth-token-figure {
    margin: 0;
    padding: .6rem;
    border-radius: var(--znv-r-md);
    border: 1px solid var(--znv-line);
    background: rgba(0, 0, 0, .35);
}

.znv-auth-token-figure img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;        /* capture Minecraft : garder les pixels nets */
}

.znv-auth-tip {
    margin-top: 1.25rem;
    font-size: .88rem;
}

.znv-auth-tip > .bi {
    color: var(--znv-discord);
}

.znv-auth-tip a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}