/* ==========================================================================
   Acephal — sign-in: header block and /connexion/retour/ page.
   Mobile-first, loaded after home.css (reuses .button, .button--ghost, tokens).
   ========================================================================== */

/* Component classes set display; keep the hidden attribute authoritative. */
.nav-auth [hidden],
.auth-callback [hidden] {
    display: none !important;
}

/* <button> elements styled as .button need the native look removed. */
button.button {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

button.button--ghost {
    border: 1px solid color-mix(in srgb, var(--acephal-white) 60%, transparent);
}

button.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* ---- Header block ------------------------------------------------------ */
.nav-auth {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nav-auth__user {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* "Mon compte" (personal space /mes-projets/): shown once signed in.
   Styled exactly like the menu links (.site-nav__list a, home.css). */
.nav-auth__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: var(--weight-medium);
    color: inherit;
    text-decoration: none;
}

.nav-auth__link:hover,
.nav-auth__link[aria-current="page"] {
    color: var(--acephal-cyan);
}

/* Phone menu panel: same rows as the menu links. */
.js .nav-auth__link {
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid var(--acephal-line);
    font-size: 1.05rem;
}

.nav-auth__error {
    max-width: 22rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--acephal-orange);
}

/* Inside the collapsible phone menu: separate from the section links. */
.js .nav-auth {
    padding-top: var(--space-4);
    border-top: 1px solid var(--acephal-line);
}

/* Inline desktop navigation (see home.css, 1240px breakpoint). */
@media (min-width: 1240px) {
    /* Once signed in, the greeting takes the place of the "Découvrir" shortcut. */
    .site-nav:has(.nav-auth.is-signed-in) .site-nav__cta {
        display: none;
    }

    .nav-auth,
    .js .nav-auth {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        border-top: 0;
    }

    .nav-auth__user {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
    }

    /* Inline like the menu links (0.86rem in the compact range, home.css). */
    .nav-auth__link,
    .js .nav-auth__link {
        width: auto;
        min-height: 44px;
        border: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.6);
        font-size: 0.95rem;
    }

    .nav-auth__error {
        position: absolute;
        top: 100%;
        right: var(--gutter);
    }
}

/* Compact desktop header (1240-1439px, see home.css): same size as the menu links. */
@media (min-width: 1240px) and (max-width: 1439px) {
    .nav-auth__link,
    .js .nav-auth__link {
        font-size: 0.86rem;
    }
}

/* ---- /connexion/retour/ page ------------------------------------------ */
.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-page .top {
    flex: none;
}

.auth-callback {
    flex: 1 0 auto;
    display: grid;
    align-content: start;
    padding-block: var(--space-7) var(--space-8);
}

.auth-callback__panel {
    max-width: 32rem;
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--acephal-line);
    border-radius: var(--radius-panel);
    background: var(--acephal-night);
    box-shadow: var(--shadow-card);
}

.auth-callback__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

/* The error heading receives programmatic focus only (tabindex="-1"). */
.auth-callback__title:focus {
    outline: none;
}

.auth-callback__text {
    margin-top: var(--space-4);
    line-height: 1.6;
    color: var(--acephal-gray);
}

.auth-callback__status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.auth-spinner {
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--acephal-line);
    border-top-color: var(--acephal-cyan);
    border-radius: 50%;
    animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-spinner {
        animation-duration: 3s;
    }
}