/* ============================================================================
   Zone Auth — pages d'authentification (login, MFA, recovery, logout).
   Servies sur auth.{domain}. Heritent layouts/auth.html.twig.

   Shell deux colonnes (desktop) :
     - GAUCHE : logo (haut) + photo (rempli le reste)
     - DROITE : contenu form centre verticalement

   Mobile (< 768px) : photo en banniere compacte au-dessus, contenu dessous.
   ============================================================================ */

.auth-body {
    height: 100vh;
    background: #fff;
    overflow: hidden;
}

/* Shell strict 100vh : la viewport est la borne haute, jamais
   depassee. `min-height: 0` sur les cellules (regle ci-dessous) leur
   permet d'etre contraintes a la hauteur du row au lieu de s'auto-
   sizer sur leur contenu (defaut grid `min-height: auto` qui ferait
   deborder). La colonne form scrolle en interne via `overflow-y: auto`
   si son contenu depasse. */
.auth-shell {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 100vh;
    overflow: hidden;
}

/* En dev, la toolbar Symfony Profiler (position:fixed bas, ~36-42px
   ouverte) chevauche le bas du shell. Detection via :has() sur la
   classe .sf-toolbar (uniquement injectee par le profiler dev). En
   prod, ce selecteur ne matche aucun element donc no-op. */
body:has(.sf-toolbar) .auth-shell {
    height: calc(100vh - 42px);
    grid-template-rows: calc(100vh - 42px);
}

/* Variante MFA : colonne contenu plus large pour les cartes
   methodes (passkey + TOTP cote a cote, tabs challenge, codes
   de secours en grille). */
.auth-shell--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.auth-shell--wide .auth-shell__content {
    max-width: 48rem;
    /* Contenu MFA toujours plus haut que la rangee grid (deux methodes
       cote a cote, QR code, grille de 10 codes de secours). Avec le
       `justify-content: center` herite, le debordement se fait haut ET
       bas : le titre remonte par-dessus la rangee header et passe sous
       le logo ANCESU (le `main` ne peut pas scroller au-dessus de son
       bord haut). On ancre en haut : le debordement ne va plus que vers
       le bas, ou le `overflow-y: auto` du main le rend scrollable. */
    justify-content: flex-start;
}

/* ── Colonne gauche : photo dans une carte avec padding autour ───── */

.auth-shell__photo {
    display: flex;
    background: #fff;
    padding: 1.5rem;
    /* min-height: 0 obligatoire sur les cellules grid pour qu'elles
       respectent la hauteur du row au lieu de fitter leur contenu
       (par defaut grid `min-height: auto`). */
    min-height: 0;
    overflow: hidden;
}

.auth-shell__photo-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.auth-shell__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth-shell__photo-credit {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    margin: 0;
    padding: 0.3rem 0.625rem;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    border-radius: 0.25rem;
    line-height: 1.4;
    backdrop-filter: blur(2px);
}
.auth-shell__photo-credit a {
    color: inherit;
    text-decoration: underline;
}
.auth-shell__photo-credit a:hover {
    text-decoration: none;
}

/* ── Colonne droite : contenu form ──────────────────────────────────── */

.auth-shell__main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 2rem 2.5rem;
    /* Idem : min-height: 0 pour respecter la hauteur du row. Sans ca,
       un contenu form long pousse la cellule, le row, le shell, et
       fait deborder en bas. */
    min-height: 0;
    overflow-y: auto;
}

/* Logo en haut de la colonne form (ligne 1 du grid). */

.auth-shell__header {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    text-align: center;
}

.auth-shell__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.auth-shell__brand:hover,
.auth-shell__brand:focus-visible {
    opacity: 0.85;
}
.auth-shell__brand:focus-visible {
    outline: 2px solid var(--color-primary, #1e3a5f);
    outline-offset: 2px;
}

.auth-shell__logo {
    height: 4.5rem;
    width: auto;
    display: inline-block;
}

/* Contenu form centre verticalement dans la ligne 2 (minmax 0 1fr). */

.auth-shell__content {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 1.5rem 0;
}

/* Footer cohérent : CGU, Mentions légales, FAQ + copyright (ligne 3). */

.auth-shell__footer {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    color: var(--color-text-light, #6b7280);
    font-size: 0.8rem;
}

.auth-shell__footer-links {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
}
.auth-shell__footer-links a {
    color: inherit;
    text-decoration: none;
}
.auth-shell__footer-links a:hover,
.auth-shell__footer-links a:focus-visible {
    text-decoration: underline;
}

/* En-tete typo cohérente pour les pages auth (titre + lead optionnel) */

.auth-heading {
    margin: 0 0 0.5rem 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-text, #313131);
    line-height: 1.2;
}

.auth-lead {
    margin: 0 0 1.75rem 0;
    color: var(--color-text-light, #6b7280);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Alerts ramassees sous le titre (composant _alerts_stack inclus). */

.auth-alert {
    margin-bottom: 1.25rem;
}

/* Passkey CTA + separateur "ou recevez un code par email". */

.auth-passkey {
    margin-bottom: 1.5rem;
}

.auth-passkey__error {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.auth-passkey__divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--color-text-light, #6b7280);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.auth-passkey__divider::before,
.auth-passkey__divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.auth-passkey__divider span {
    padding: 0 0.75rem;
}

/* Footer secondaire : "Pas de compte ?", liens d'aide, FAQ. */

.auth-secondary {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: var(--color-text-light, #6b7280);
}
.auth-secondary p {
    margin: 0 0 0.5rem 0;
}
.auth-secondary p:last-child {
    margin-bottom: 0;
}
.auth-secondary__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.auth-secondary a {
    color: var(--color-primary, #1e3a5f);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-secondary a:hover {
    text-decoration: none;
}

/* ── Mobile : photo masquee, contenu seul, page scrollable ─────────── */

@media (max-width: 768px) {
    /* On rend la page scrollable : la borne 100vh stricte du desktop
       (overflow hidden + ligne contenu minmax(0,1fr)) ecrasait la piste
       contenu sous sa taille reelle des qu'il depassait, ce qui faisait
       remonter le footer au niveau du champ email. */
    .auth-body {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    /* La photo n'apporte rien sur petit ecran : on ne montre que le
       contenu utile (logo + form + footer). */
    .auth-shell__photo {
        display: none;
    }
    /* Flex column plutot que grid : le contenu (flex:1, jamais reduit)
       pousse le footer en bas quand il est court, et la page scrolle
       quand il est long. Plus de superposition footer/contenu. */
    .auth-shell__main {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: 1.5rem 1.25rem;
    }
    .auth-shell__logo {
        height: 3.5rem;
    }
    .auth-shell__content {
        flex: 1 0 auto;
        padding: 1.5rem 0;
    }
}

/* ── Tablet large : photo + contenu plus aere ─────────────────────── */

@media (min-width: 1280px) {
    .auth-shell__photo {
        padding: 2rem;
    }
    .auth-shell__main {
        padding: 4rem 3rem;
    }
    .auth-shell__logo {
        height: 8rem;
    }
}