/* ============================================================
   Layout « Vitrine » — volet de marque (gauche) + formulaire.
   Reprend la maquette d'authentification : aplat arrondi, photo
   fondue dans le dégradé de marque, logo, filet d'accent puis
   accroche, le tout révélé par une séquence d'animations.
   ============================================================ */
.auth-shell {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

/* ---------- Volet de marque ----------
   Le tenant pilote la largeur (--auth-brand-width), l'aplat
   (--auth-panel-bg), le visuel (--auth-brand-image) et son cadrage
   (--auth-photo-position). Sans visuel, l'aplat seul reste lisible. */
.auth-brand {
    flex: 0 0 var(--auth-brand-width, 66%);
    min-width: 380px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(36px, 4.4vw, 72px);
    overflow: hidden;
    color: var(--auth-panel-ink);
    background-color: var(--auth-panel-bg);
    border-radius: 0 var(--auth-panel-radius) var(--auth-panel-radius) 0;
    animation: auth-wipe-in 1s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* ---------- Visuel : photo + deux voiles dégradés ---------- */
.brand-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: auth-fade-in 1.6s ease-out .35s backwards;
}

.brand-visual span {
    position: absolute;
    inset: 0;
    display: block;
}

.brand-photo {
    background-image: var(--auth-brand-image, none);
    background-size: cover;
    background-position: var(--auth-photo-position);
    background-repeat: no-repeat;
    opacity: var(--auth-photo-opacity);
    filter: var(--auth-photo-filter);
    animation: auth-slow-zoom 3.2s cubic-bezier(.22, 1, .36, 1) .35s backwards;
}

/* Voile latéral : dense à gauche pour porter le texte, transparent à droite. */
.brand-scrim {
    background: linear-gradient(101deg,
        var(--auth-panel-bg) 0%,
        color-mix(in srgb, var(--auth-panel-bg) var(--auth-scrim-near), transparent) 30%,
        color-mix(in srgb, var(--auth-panel-bg) var(--auth-scrim-mid), transparent) 58%,
        color-mix(in srgb, var(--auth-panel-bg) var(--auth-scrim-far), transparent) 100%);
}

/* Voile bas : assoit l'accroche sur un fond plus dense. */
.brand-veil {
    background: linear-gradient(0deg,
        color-mix(in srgb, var(--auth-panel-shade) 72%, transparent) 0%,
        color-mix(in srgb, var(--auth-panel-shade) 12%, transparent) 42%,
        transparent 62%);
}

/* ---------- Logo ---------- */
.brand-logo {
    position: relative;
    z-index: 1;
    width: fit-content;
    animation: auth-settle-in .85s cubic-bezier(.16, 1, .3, 1) .7s backwards;
}

.brand-logo i {
    display: block;
    width: var(--auth-logo-width);
    height: calc(var(--auth-logo-width) * var(--auth-logo-ratio));
    background: var(--logo-url) no-repeat left center;
    background-size: contain;
    filter: var(--auth-logo-filter);
}

/* ---------- Accroche ---------- */
.brand-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 26px);
    max-width: 720px;
}

.brand-rule {
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--auth-panel-rule);
    transform-origin: left center;
    animation: auth-rule-in .7s cubic-bezier(.16, 1, .3, 1) .95s backwards;
}

.brand-headline {
    margin: 0;
    font-size: clamp(28px, 3.5vw, 56px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--auth-panel-ink);
    text-wrap: pretty;
    animation: auth-glide-in 1s cubic-bezier(.16, 1, .3, 1) 1.05s backwards;
}

.brand-subtitle {
    margin: 0;
    max-width: 600px;
    font-size: clamp(15px, 1.35vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--auth-panel-ink-soft);
    text-wrap: pretty;
    animation: auth-glide-in 1s cubic-bezier(.16, 1, .3, 1) 1.22s backwards;
}

/* ---------- Colonne formulaire ---------- */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px clamp(24px, 4vw, 76px);
}

.auth-form {
    width: 100%;
    max-width: 400px;
}

/* Entrée séquencée du formulaire, après la révélation du volet.
   Remplissage « backwards » : passée l'animation, plus aucune transformation
   ne subsiste, donc aucun bloc conteneur parasite pour les éléments
   position:fixed (.reg-messages). */
.auth-form > *:not(form),
.auth-form > form > * {
    animation: auth-settle-in .8s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: 1.5s;
}

.auth-form > form > *:nth-child(2) {
    animation-delay: 1.58s;
}

.auth-form > form > *:nth-child(3) {
    animation-delay: 1.66s;
}

.auth-form > form > *:nth-child(4) {
    animation-delay: 1.74s;
}

.auth-form > form > *:nth-child(n+5) {
    animation-delay: 1.82s;
}

/* Les messages flottants (wizard) doivent rester en place immédiatement. */
.auth-form .reg-messages {
    animation: none;
}

/* ---------- Séquence ---------- */
@keyframes auth-wipe-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes auth-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes auth-slow-zoom {
    from { transform: scale(1.09); }
    to { transform: scale(1); }
}

@keyframes auth-settle-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes auth-glide-in {
    from { opacity: 0; transform: translate3d(-26px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes auth-rule-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---------- Continuité d'un écran à l'autre ----------
   Chaque étape du parcours est un rechargement complet : l'écran est repeint à neuf
   et le visuel du volet « clignote » au passage. Le navigateur enchaîne désormais les
   deux pages par un fondu : le volet étant identique de part et d'autre, il paraît
   parfaitement immobile et seule la colonne formulaire change. Amélioration
   progressive, sans effet là où les transitions de vue ne sont pas gérées.
   Aucun view-transition-name n'est posé : nommer un élément le promeut en couche de
   composition (texte moins bien lissé) et le sort du rognage arrondi du volet. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .2s;
}

/* Séquence déjà jouée dans cet onglet (marqueur posé par _Layout.cshtml) : les écrans
   suivants du parcours s'affichent directement, sans rejouer l'ouverture. */
.anim-off .auth-brand,
.anim-off .brand-visual,
.anim-off .brand-photo,
.anim-off .brand-logo,
.anim-off .brand-rule,
.anim-off .brand-headline,
.anim-off .brand-subtitle,
.anim-off .auth-form * {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
}

/* Même liste que .anim-off, volontairement dupliquée : l'accessibilité ne doit pas
   dépendre de l'exécution du script qui pose la classe. */
@media (prefers-reduced-motion: reduce) {
    .auth-brand,
    .brand-visual,
    .brand-photo,
    .brand-logo,
    .brand-rule,
    .brand-headline,
    .brand-subtitle,
    .auth-form * {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .brand-subtitle {
        display: none;
    }
}

@media (max-width: 900px) {
    .auth-shell {
        flex-direction: column;
    }

    .auth-brand {
        flex: none;
        max-width: none;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 18px 22px;
        border-radius: 0 0 24px 24px;
    }

    .brand-logo i {
        width: 108px;
        height: 40px;
    }

    .brand-copy {
        gap: 0;
    }

    .brand-rule {
        display: none;
    }

    .brand-headline {
        font-size: 15px;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .auth-main {
        padding: 28px 20px 40px;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .brand-headline {
        display: none;
    }
}