/**
 * Écrans de connexion (voir layouts/auth.php).
 *
 * Sobre et institutionnel : un panneau marine uni à gauche, le logo blanc et
 * le monogramme en filigrane ; le formulaire sur blanc à droite.
 *
 * Une seule animation, l'ouverture (voir « Ouverture » en bas), jouée une
 * fois par onglet (auth-intro.js) : ensuite plus rien ne bouge, hormis la
 * roue d'attente du bouton.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue: #1A53FF;
    --blue-dark: #123ec2;
    --blue-soft: #eef2ff;
    --navy: #0B1B3D;

    --surface: #ffffff;
    --surface-2: #f6f8fc;

    --text: #16233f;
    --text-muted: #5a6b8c;
    --text-dim: #8595b3;

    --line: #e3e9f4;
    --line-strong: #d2dbeb;

    --danger-soft: #fdeaec;
    --warning-soft: #fff4e0;

    --radius: 10px;

    --display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

html, body { min-height: 100%; }

.auth-body {
    min-height: 100vh;
    background: var(--surface); color: var(--text);
    font: 15px/1.6 var(--texte);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.auth-shell { display: grid; grid-template-columns: minmax(360px, 42%) minmax(0, 1fr); min-height: 100vh; }

/* ============================================================ La marque == */
.auth-brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px clamp(36px, 4.5vw, 72px);
    background: var(--navy); color: #fff;
}
.auth-brand__logo { position: relative; z-index: 1; align-self: flex-start; }
.auth-brand__logo img { display: block; width: 176px; height: auto; }

/* Le monogramme en filigrane, très grand, rogné par le bord : une signature
   immobile, pas un décor. */
.auth-brand__filigrane {
    position: absolute; right: -14%; bottom: -12%; width: 78%; aspect-ratio: 1;
    background: rgba(255, 255, 255, .045);
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
    pointer-events: none;
}

.auth-brand__pied { position: relative; z-index: 1; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.auth-brand__pied a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.auth-brand__pied a:hover { color: #fff; }

/* ========================================================== Formulaire == */
.auth-main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; padding: 48px 24px;
}
.auth-main__logo { display: none; margin-bottom: 36px; }
.auth-main__logo img { display: block; width: 147px; height: auto; }
.auth-main__content { width: 100%; max-width: 400px; }

.card__head { margin-bottom: 28px; }
.card__eyebrow { margin-bottom: 10px; font: 700 11.5px var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.card__title { font: 700 28px/1.2 var(--display); letter-spacing: -.03em; color: var(--navy); }
.card__subtitle { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }

/* -------------------------------------------------------------- Alertes -- */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius);
    font-size: 13.5px; line-height: 1.5;
}
.alert svg {
    width: 17px; height: 17px; flex: none; margin-top: 1px;
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.alert--error { background: var(--danger-soft); color: #91202f; }
.alert--warning { background: var(--warning-soft); color: #8a5200; }
.alert--success { background: #e6f7f0; color: #0b6e50; }

/* ------------------------------------------------------------ Formulaire -- */
.form { display: flex; flex-direction: column; gap: 18px; }

.field__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.field__lien { font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.field__lien:hover { text-decoration: underline; }

.field__control { position: relative; display: flex; align-items: center; }

.field__icon {
    position: absolute; left: 14px; width: 17px; height: 17px;
    fill: none; stroke: var(--text-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
}

.field__input {
    width: 100%; height: 48px; padding: 0 14px 0 42px;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: 15px var(--texte);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field__input::placeholder { color: var(--text-dim); }
.field__input:hover { border-color: #bccae3; }
.field__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 83, 255, .12); }
.field__control:focus-within .field__icon { stroke: var(--blue); }

/* Une adresse déjà connue (voir auth.js) : présentée comme un acquis. */
.field.is-identifie .field__input {
    padding-right: 96px; border-color: var(--line); background: var(--surface-2);
    font-weight: 600; color: var(--navy); cursor: default;
}
.field.is-identifie .field__input:focus { box-shadow: none; border-color: var(--line); }
.field__changer {
    position: absolute; right: 8px; padding: 6px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--blue); font: 600 12.5px var(--display); cursor: pointer;
}
.field__changer:hover { background: var(--blue-soft); }

.field__control:has(.field__toggle) .field__input { padding-right: 48px; }
.field__toggle {
    position: absolute; right: 7px; display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer;
}
.field__toggle:hover { background: var(--surface-2); color: var(--text); }
.field__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.field__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-eye-off { display: none; }
.field__toggle[aria-pressed="true"] .icon-eye { display: none; }
.field__toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.field__hint { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.field__alerte {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px 4px 7px; border-radius: 999px;
    background: var(--warning-soft); color: #8a5200; font-size: 12px; font-weight: 600;
}
.field__alerte[hidden], .field__changer[hidden] { display: none; }
.field__alerte svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Bouton -- */
.btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 48px; margin-top: 6px; padding: 0 22px;
    border: 0; border-radius: var(--radius);
    cursor: pointer; font: 600 15px var(--display); letter-spacing: -.01em;
    transition: background .15s var(--ease);
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--blue); }
.btn--primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a.btn { text-decoration: none; }

.btn__arrow { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn__spinner {
    display: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: tourne .7s linear infinite;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label, .btn.is-loading .btn__arrow { display: none; }
.btn.is-loading .btn__spinner { display: block; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ Bas du bloc -- */
.card__help {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.55; color: var(--text-muted);
}
.card__help a { color: var(--blue); text-decoration: none; font-weight: 600; }
.card__help a:hover { text-decoration: underline; }

.card__secure { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.card__secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Le filet de lumière de l'ouverture (voir plus bas) : invisible au repos. */
.auth-brand__trait { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }

/* ============================================================ Réponsive == */
/* Sur tablette et mobile, le panneau se retire : le logo en couleur passe
   au-dessus du formulaire. */
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { display: none; }
    .auth-main { justify-content: flex-start; padding: 40px 20px; }
    .auth-main__logo { display: block; }
}

/* =========================================================== Ouverture == */
/* Le panneau se déploie de gauche à droite, porté par un filet de lumière
   (le cyan de la marque) qui s'écoule vers le bas une fois arrivé. Derrière
   lui, le monogramme glisse plus lentement - un peu de profondeur - puis le
   formulaire se pose élément par élément, le titre en faisant sa mise au
   point. La même lumière passe enfin une fois sur le bouton : c'est là que
   le regard doit finir.
   Rien pour qui a demandé moins d'animations, ni au second affichage de
   l'onglet (classe .sans-intro, voir auth-intro.js). */
@media (prefers-reduced-motion: no-preference) {
    :root:not(.sans-intro) { --t0: .62s; }

    :root:not(.sans-intro) .auth-brand { animation: intro-panneau 1.05s cubic-bezier(.77, 0, .18, 1) both; }

    :root:not(.sans-intro) .auth-brand__trait { opacity: 1; animation: intro-course 1.05s cubic-bezier(.77, 0, .18, 1) both; }
    .auth-brand__trait::before, .auth-brand__trait::after { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; }
    /* Le halo qui précède le filet, puis le filet lui-même. */
    .auth-brand__trait::before {
        width: 45%;
        background: linear-gradient(90deg, rgba(0, 212, 255, 0), rgba(0, 212, 255, .09));
        animation: intro-halo .5s .95s ease-out both;
    }
    .auth-brand__trait::after {
        width: 2px;
        background: linear-gradient(180deg, rgba(0, 212, 255, 0), #00D4FF 22%, #8fb2ff 62%, rgba(26, 83, 255, 0));
        box-shadow: 0 0 16px 2px rgba(0, 212, 255, .5), 0 0 64px 10px rgba(26, 83, 255, .35);
        transform-origin: bottom;
        animation: intro-ecoule .75s .98s cubic-bezier(.55, 0, .45, 1) both;
    }

    :root:not(.sans-intro) .auth-brand__filigrane { animation: intro-filigrane 2s .2s cubic-bezier(.16, 1, .3, 1) both; }
    :root:not(.sans-intro) .auth-brand__logo { animation: intro-logo .9s .55s cubic-bezier(.16, 1, .3, 1) both; }
    :root:not(.sans-intro) .auth-brand__pied { animation: intro-pose .8s .85s ease-out both; }

    /* Le formulaire, en cascade. */
    :root:not(.sans-intro) .auth-main__logo,
    :root:not(.sans-intro) .card__eyebrow,
    :root:not(.sans-intro) .card__subtitle,
    :root:not(.sans-intro) .card > .alert,
    :root:not(.sans-intro) .form > *,
    :root:not(.sans-intro) .card__help,
    :root:not(.sans-intro) .card__secure { animation: intro-monte .8s calc(var(--t0) + var(--d, 0s)) cubic-bezier(.16, 1, .3, 1) both; }
    :root:not(.sans-intro) .card__title { animation: intro-nettete 1s calc(var(--t0) + .06s) cubic-bezier(.16, 1, .3, 1) both; }

    .auth-main__logo { --d: -.1s; }
    .card__subtitle { --d: .16s; }
    .card > .alert { --d: .22s; }
    .form > :nth-child(1) { --d: .26s; }
    .form > :nth-child(2) { --d: .32s; }
    .form > :nth-child(3) { --d: .38s; }
    .form > :nth-child(4) { --d: .44s; }
    .form > :nth-child(n+5) { --d: .5s; }
    .card__help { --d: .54s; }
    .card__secure { --d: .6s; }

    :root:not(.sans-intro) .btn--primary::after {
        content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(0, 212, 255, .38) 55%, rgba(255, 255, 255, 0));
        transform: translateX(-120%) skewX(-18deg); pointer-events: none;
        animation: intro-reflet 1s calc(var(--t0) + .95s) cubic-bezier(.45, 0, .2, 1) both;
    }

    /* Sans panneau (tablette, mobile), le formulaire n'attend personne. */
    @media (max-width: 900px) { :root:not(.sans-intro) { --t0: .12s; } }
}

@keyframes intro-panneau { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-course { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes intro-halo { to { opacity: 0; } }
@keyframes intro-ecoule { from { transform: scaleY(1); opacity: 1; } to { transform: scaleY(0); opacity: .2; } }
@keyframes intro-filigrane { from { opacity: 0; transform: translateX(-9%) scale(1.04); } }
@keyframes intro-logo { from { opacity: 0; transform: translateX(-14px); } }
@keyframes intro-pose { from { opacity: 0; } }
@keyframes intro-monte { from { opacity: 0; transform: translateY(12px); } }
@keyframes intro-nettete { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } }
@keyframes intro-reflet { to { transform: translateX(330%) skewX(-18deg); } }