/* ============================================================================
   Cara · Layout · Écran d'authentification
   ----------------------------------------------------------------------------
   Écran de connexion plein-écran : connexion, inscription, mot de passe oublié,
   réinitialisation.

   Ce fichier n'est PAS importé par css/layout/index.css : il est chargé
   explicitement par app/static/auth.html, la seule page qui affiche cet écran.
   L'application ne le porte plus — elle n'a plus de mode visiteur. Les classes
   partagées avec « Compte > Sécurité » (champs, bouton, bascule de mot de
   passe) vivent dans _auth-fields.css, lui toujours dans la chaîne commune.

   Les états `.hidden` / `.show` ont disparu avec l'overlay : cet écran est une
   PAGE, il n'est jamais masqué — on y arrive ou on n'y arrive pas.
   ============================================================================ */

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-4);
    background: var(--ds-color-overlay-strong);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    overflow-y: auto;
    animation: ds-fade-in var(--ds-duration-macro-in) var(--ds-ease-majestic) both;
}

.auth-card {
    width: min(480px, 100%);
    padding: var(--ds-space-7);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-overlay), var(--ds-shadow-inner-edge);
    animation: ds-modal-in var(--ds-duration-macro-in) var(--ds-ease-majestic) both;
}

/* Logo de marque en tête de l'écran de connexion (décoratif : le nom « Cara »
   est déjà dans le h2 → alt="" + on s'appuie sur .cara-orb / .cara-orb--intro). */
.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ds-space-3);
}
.auth-logo__img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    /* Pas de filter (doctrine RDP/DPI). */
}

.auth-card h2 {
    font: var(--ds-typo-h2);
    color: var(--ds-color-text);
    letter-spacing: var(--ds-tracking-tight);
    margin-bottom: var(--ds-space-2);
}

.auth-copy {
    font: var(--ds-typo-body);
    color: var(--ds-color-text-muted);
    margin-bottom: var(--ds-space-5);
}
.auth-copy-compact {
    font: var(--ds-typo-small);
    color: var(--ds-color-text-muted);
    margin-bottom: var(--ds-space-3);
}

/* — Tabs Connexion / Inscription -------------------------------------- */
.auth-tabs {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    margin-bottom: var(--ds-space-5);
    background: var(--ds-color-surface-2);
    border: 1px solid var(--ds-color-divider);
    border-radius: var(--ds-radius-md);
    gap: 2px;
}
.auth-tab {
    padding: var(--ds-space-1_5) var(--ds-space-4);
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-sm);
    font: var(--ds-typo-caption);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-color-text-muted);
    cursor: pointer;
    transition: var(--ds-transition-color);
}
.auth-tab.active {
    background: var(--ds-color-surface);
    color: var(--ds-color-text);
    box-shadow: var(--ds-shadow-xs);
}
.auth-tab:hover { color: var(--ds-color-text); }

/* — Bloc OAuth (Google / Microsoft / Apple) --------------------------- */
.auth-oauth {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-4);
    animation: ds-fade-in var(--ds-duration-standard) var(--ds-ease-smooth) both;
}

.auth-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2_5);
    width: 100%;
    min-height: 44px;
    padding: var(--ds-space-2_5) var(--ds-space-4);
    font: var(--ds-typo-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-xs);
    cursor: pointer;
    transition:
        background-color var(--ds-duration-micro) var(--ds-ease-snappy),
        border-color var(--ds-duration-micro) var(--ds-ease-snappy),
        box-shadow var(--ds-duration-micro) var(--ds-ease-snappy),
        transform var(--ds-duration-micro) var(--ds-ease-snappy);
}
.auth-oauth-btn:hover {
    background: var(--ds-color-brand-bg);
    border-color: var(--ds-color-brand-border);
    color: var(--ds-color-brand-deep);
    box-shadow: var(--ds-shadow-sm);
    transform: translateY(var(--ds-translate-hover));
}
.auth-oauth-btn:active {
    transform: scale(var(--ds-scale-press));
    box-shadow: var(--ds-shadow-pressed);
}
.auth-oauth-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-shadow-sm), var(--ds-focus-ring-strong);
}
.auth-oauth-btn[disabled],
.auth-oauth-btn[data-loading="true"] {
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}
.auth-oauth-btn[data-loading="true"] > span {
    opacity: 0.4;
}
.auth-oauth-btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: var(--ds-space-2);
    border-radius: var(--ds-radius-circle);
    border: 2px solid var(--ds-color-brand);
    border-top-color: transparent;
    animation: ds-spin 0.8s linear infinite;
}

.auth-oauth-btn { position: relative; }

.auth-oauth-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Variante Apple : fond noir, texte blanc — convention Apple HIG */
.auth-oauth-btn--apple {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
}
.auth-oauth-btn--apple:hover {
    background: #1d1d1f;
    color: #FFFFFF;
    border-color: #1d1d1f;
}

/* — Divider "ou" ------------------------------------------------------ */
.auth-divider {
    position: relative;
    margin-block: var(--ds-space-4);
    text-align: center;
    font: var(--ds-typo-overline);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-wider);
    color: var(--ds-color-text-soft);
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - var(--ds-space-6));
    height: 1px;
    background: var(--ds-color-divider);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider > span {
    display: inline-block;
    padding: 0 var(--ds-space-2);
    background: var(--ds-color-surface);
}

/* Masquage du bloc OAuth dans les modes 'forgot' et 'reset' (lien retour) */
.auth-gate[data-mode="forgot"] .auth-oauth,
.auth-gate[data-mode="forgot"] .auth-divider,
.auth-gate[data-mode="reset"]  .auth-oauth,
.auth-gate[data-mode="reset"]  .auth-divider {
    display: none;
}

/* — Formulaire -------------------------------------------------------- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}
.auth-form-hidden { display: none; }

.auth-inline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-2);
    margin-top: -var(--ds-space-1);
}

.auth-link-btn {
    background: transparent;
    border: 0;
    font: var(--ds-typo-caption);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-color-brand-deep);
    cursor: pointer;
    padding: 2px var(--ds-space-1);
    border-radius: var(--ds-radius-xs);
    transition: var(--ds-transition-color);
}
.auth-link-btn:hover {
    color: var(--ds-color-brand);
    background: var(--ds-color-brand-bg);
}

.auth-feedback {
    margin-top: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-sm);
    font: var(--ds-typo-small);
    display: none;
}
.auth-feedback.show { display: block; }
.auth-feedback.success { background: var(--ds-color-success-bg); border: 1px solid var(--ds-color-success-border); color: var(--ds-color-success-text); }
.auth-feedback.error   { background: var(--ds-color-error-bg);   border: 1px solid var(--ds-color-error-border);   color: var(--ds-color-error-text); }
.auth-feedback.info    { background: var(--ds-color-info-bg);    border: 1px solid var(--ds-color-info-border);    color: var(--ds-color-info-text); }

.auth-helper {
    margin-top: var(--ds-space-2);
    font: var(--ds-typo-caption);
    color: var(--ds-color-text-soft);
    text-align: center;
}

/* ── Écran de transition : adresse email confirmée ────────────────────────────
   Affiché à la place des formulaires quand un lien `?auth=confirm` aboutit. Il
   remplace une redirection immédiate pendant laquelle l'utilisateur ne voyait
   RIEN : il cliquait un lien reçu par email et se retrouvait dans l'application
   sans confirmation que son adresse était validée. */
.auth-confirmed.auth-form-hidden { display: none; }

/* L'état masqué doit l'emporter. `.auth-form-hidden` est déclarée PLUS HAUT dans
   ce fichier ; à spécificité égale, la règle la plus tardive gagne — donc le
   `display:flex` ci-dessous annulait le masquage et l'écran « adresse
   confirmée » restait affiché en permanence, y compris à un visiteur qui
   n'avait jamais cliqué de lien. Un sélecteur composé (0,2,0) tranche
   définitivement, quel que soit l'ordre des règles. */
.auth-confirmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-4) 0 var(--ds-space-2);
    text-align: center;
    animation: ds-fade-in var(--ds-duration-macro-in) var(--ds-ease-majestic) both;
}

.auth-confirmed__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--ds-space-1);
    border-radius: 50%;
    color: var(--ds-color-success-text);
    background: var(--ds-color-success-bg);
    border: 1px solid var(--ds-color-success-border);
}

.auth-confirmed__title {
    font: var(--ds-typo-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text);
}

.auth-confirmed__sub {
    font: var(--ds-typo-caption);
    color: var(--ds-color-text-soft);
}

/* Le repli manuel reste discret : on ne veut pas qu'il concurrence la
   redirection automatique, seulement qu'il existe si elle n'aboutit pas. */
.auth-confirmed .auth-link-btn {
    margin-top: var(--ds-space-1);
}