/*
 * Extrait de templates/public/_auth_styles.html.twig le 17/08/2026.
 *
 * POURQUOI CE FICHIER EXISTE. Ces règles étaient écrites dans un bloc <style>
 * au milieu du gabarit. Un style inline est retransmis DANS LE HTML à chaque
 * affichage de la page : le navigateur ne peut pas le mettre en cache, il le
 * retélécharge et le ré-analyse à chaque navigation, pour un contenu
 * rigoureusement identique. Sur l'ensemble de l'intranet, cela représentait
 * environ 370 Ko renvoyés en boucle.
 *
 * Servi comme fichier, il est mis en cache un an par le navigateur (le nom
 * porte une empreinte du contenu : toute modification produit un nom neuf, il
 * ne peut donc pas y avoir de version périmée servie par erreur).
 *
 * NE PAS MODIFIER CE FICHIER À LA MAIN sans savoir qu'il est référencé par son
 * empreinte dans le gabarit d'origine : changer l'un sans l'autre ferait servir
 * l'ancienne feuille. Voir docs/statiques-extraits.md.
 */
body {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(89, 165, 216, 0.24), transparent 24%),
            radial-gradient(circle at bottom right, rgba(19, 60, 85, 0.18), transparent 28%),
            linear-gradient(135deg, #edf5fb 0%, #f8fbff 48%, #eef4fa 100%);
        color: #17324d;
    }

    .auth-page {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-layout {
        width: min(1160px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(380px, 465px);
        gap: 1.5rem;
        align-items: stretch;
    }

    /* ── Vitrine (panneau bleu de gauche) ─────────────────────────────── */
    .auth-showcase {
        position: relative;
        overflow: hidden;
        min-height: 700px;
        border-radius: 38px;
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #fff;
        background:
            linear-gradient(135deg, rgba(8, 29, 44, 0.72), rgba(8, 29, 44, 0.2)),
            radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 18%),
            radial-gradient(circle at 82% 26%, rgba(255,255,255,.12), transparent 14%),
            linear-gradient(135deg, #12344c 0%, #24577a 44%, #5ca9db 100%);
        box-shadow: 0 34px 80px rgba(19, 60, 85, 0.24);
    }

    .auth-showcase::before,
    .auth-showcase::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
    }

    .auth-showcase::before {
        width: 320px; height: 320px; right: -120px; top: -120px;
        background: rgba(255,255,255,.08);
    }

    .auth-showcase::after {
        width: 280px; height: 280px; left: -120px; bottom: -130px;
        background: rgba(255,255,255,.06);
    }

    .auth-brand,
    .auth-showcase__content { position: relative; z-index: 1; }

    .auth-brand { display: flex; align-items: center; gap: 1rem; }

    .auth-brand__mark {
        width: 78px; height: 78px;
        border-radius: 24px;
        background: rgba(255,255,255,.96);
        display: inline-flex; align-items: center; justify-content: center;
        padding: .55rem;
        box-shadow: 0 18px 42px rgba(12, 24, 38, 0.22);
    }

    .auth-brand__mark img { width: 100%; height: 100%; object-fit: contain; }

    .auth-brand__fallback {
        font-size: 1.55rem; font-weight: 800; letter-spacing: .02em; color: #17324d;
    }

    .auth-brand__eyebrow,
    .auth-panel__eyebrow {
        text-transform: uppercase; letter-spacing: .18em;
        font-size: .72rem; font-weight: 700;
    }

    .auth-brand__eyebrow { color: rgba(255,255,255,.78); }

    .auth-brand__title {
        display: block; font-size: 1.65rem; line-height: 1.05; font-weight: 800; color: #fff;
    }

    .auth-showcase__content { display: grid; gap: 1rem; }

    .auth-showcase__heading {
        font-size: .82rem; font-weight: 700; letter-spacing: .18em;
        text-transform: uppercase; color: rgba(255,255,255,.76); margin: 0 0 .15rem;
    }

    .auth-feature-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
    }

    .auth-feature {
        display: flex; align-items: center; gap: .9rem;
        padding: 1rem 1.1rem; border-radius: 22px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.08);
        backdrop-filter: blur(10px);
    }

    .auth-feature__icon {
        width: 48px; height: 48px; border-radius: 16px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.14); color: #fff; flex: 0 0 auto;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .auth-feature__icon svg {
        width: 24px; height: 24px; stroke: currentColor; fill: none;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    }

    .auth-feature__title { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.3; }

    /* ── Panneau blanc (formulaire) ───────────────────────────────────── */
    .auth-panel {
        border-radius: 32px; padding: 2rem;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12);
        display: flex; flex-direction: column; justify-content: center;
    }

    .auth-panel__eyebrow { color: #6b7c8f; margin-bottom: .85rem; }

    .auth-panel__title {
        font-size: 2rem; line-height: 1.05; font-weight: 800; color: #17324d; margin-bottom: .55rem;
    }

    .auth-panel__lead { color: #5b7288; font-weight: 600; margin-bottom: 1rem; }
    .auth-panel__lead strong { color: #17324d; }

    .auth-alert {
        border-radius: 18px; border: 0; padding: .95rem 1rem; margin-bottom: 1rem; font-weight: 600;
    }

    /* ── Champs ───────────────────────────────────────────────────────── */
    .auth-form__group + .auth-form__group { margin-top: 1rem; }

    .auth-label {
        display: block; font-size: .9rem; font-weight: 700; color: #17324d; margin-bottom: .45rem;
    }

    .auth-input {
        height: 58px; padding: 0 1rem; border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
        color: #17324d; font-size: 1rem; font-weight: 600; width: 100%;
        box-shadow: none !important;
    }

    .auth-input:focus {
        border-color: rgba(43, 122, 175, 0.45);
        box-shadow: 0 0 0 4px rgba(89, 165, 216, 0.12) !important;
        outline: none;
    }

    .auth-hint {
        margin-top: .5rem; margin-bottom: 0; font-size: .82rem; font-weight: 600; color: #8296aa;
    }

    .auth-hint a { color: #2d73a7; font-weight: 700; text-decoration: none; }
    .auth-hint a:hover { text-decoration: underline; }

    /* Champ mot de passe + bouton afficher/masquer */
    .auth-input-wrap { position: relative; }

    .auth-input--password { padding-right: 3.1rem; }

    .auth-pw-toggle {
        position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0; border: 0; border-radius: 12px;
        background: transparent; color: #6b7c8f; cursor: pointer;
        transition: color .15s ease, background .15s ease;
    }

    .auth-pw-toggle:hover,
    .auth-pw-toggle:focus-visible {
        color: #17324d; background: rgba(148, 163, 184, 0.16); outline: none;
    }

    .auth-pw-toggle svg {
        width: 20px; height: 20px; stroke: currentColor; fill: none;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    }

    .auth-pw-toggle .icon-eye-off { display: none; }
    .auth-pw-toggle.is-visible .icon-eye { display: none; }
    .auth-pw-toggle.is-visible .icon-eye-off { display: inline-flex; }

    /* Champ code à 6 chiffres */
    .auth-code-input {
        text-align: center;
        font-size: 1.7rem;
        letter-spacing: .55rem;
        font-weight: 800;
        padding-left: .55rem; /* compense l'espacement pour rester centré */
    }

    /* Ligne « rester connecté » + lien d'appoint */
    .auth-form__meta {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
    }

    .auth-check {
        display: inline-flex; align-items: center; gap: .5rem; margin: 0;
        font-size: .9rem; font-weight: 600; color: #17324d; cursor: pointer;
    }

    .auth-check input {
        width: 18px; height: 18px; accent-color: #2d73a7; cursor: pointer;
    }

    .auth-form__meta a {
        color: #5b7288; font-weight: 600; font-size: .9rem; text-decoration: none;
    }

    .auth-form__meta a:hover { color: #17324d; }

    /* ── Boutons ──────────────────────────────────────────────────────── */
    .auth-submit {
        margin-top: 1.35rem; height: 58px; border: 0; border-radius: 18px;
        width: 100%;
        font-size: 1rem; font-weight: 800; color: #fff;
        background: linear-gradient(135deg, #133c55 0%, #2d73a7 54%, #59a5d8 100%);
        box-shadow: 0 20px 40px rgba(19, 60, 85, 0.22);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .auth-submit:hover,
    .auth-submit:focus {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 24px 46px rgba(19, 60, 85, 0.26);
    }

    .auth-submit:disabled {
        opacity: .72; cursor: progress; transform: none;
        box-shadow: 0 20px 40px rgba(19, 60, 85, 0.22);
    }

    /* Séparateur « ou » + action secondaire */
    .auth-divider {
        display: flex; align-items: center; gap: .8rem;
        margin: 1.3rem 0 .9rem;
        color: #9aa8b8; font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .14em;
    }

    .auth-divider::before,
    .auth-divider::after {
        content: ""; flex: 1; height: 1px; background: rgba(148, 163, 184, 0.28);
    }

    .auth-secondary {
        display: flex; align-items: center; justify-content: center; gap: .6rem;
        height: 54px; border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        background: #fff; color: #17324d !important;
        font-weight: 700; font-size: .98rem; text-decoration: none;
        transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    .auth-secondary:hover,
    .auth-secondary:focus {
        border-color: rgba(43, 122, 175, 0.5);
        background: rgba(89, 165, 216, 0.08);
        color: #133c55 !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(19, 60, 85, 0.10);
    }

    .auth-secondary svg {
        width: 20px; height: 20px; stroke: currentColor; fill: none;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── Pied de panneau (liens discrets) ─────────────────────────────── */
    .auth-panel__footer { margin-top: 1.1rem; text-align: center; display: grid; gap: .5rem; }

    .auth-panel__footer a { color: #5b7288; font-weight: 600; text-decoration: none; font-size: .92rem; }
    .auth-panel__footer a:hover { color: #17324d; }

    /* ── Responsive ───────────────────────────────────────────────────── */
    @media (max-width: 991.98px) {
        .auth-page { padding: 1rem; }
        .auth-layout { grid-template-columns: 1fr; }
        /* Le FORMULAIRE d'abord : empilée dans l'ordre du DOM, la vitrine
           « Les essentiels » reléguait le champ e-mail sous deux écrans de
           défilement — sur téléphone on vient pour se connecter. */
        .auth-panel { order: 1; }
        .auth-showcase {
            order: 2;
            min-height: auto; padding: 1.8rem; justify-content: flex-start; gap: 1.5rem;
        }
        .auth-feature-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 575.98px) {
        .auth-panel, .auth-showcase { border-radius: 26px; padding: 1.4rem; }
        .auth-panel__title { font-size: 1.7rem; }
    }