/* auth-claire.css : connexion, inscription, mot de passe oublié et nouveau
   mot de passe, dans la veine de la landing claire.

   Ces quatre pages portaient chacune 250 à 350 lignes de style recopiées dans
   leur en-tête, avec les mêmes classes `auth-*`. Elles chargent maintenant
   cette seule feuille : leur balisage n'a pas changé, un champ ajouté à l'une
   prend le dessin des autres sans qu'on y pense.

   C'EST ICI QUE L'ENTONNOIR CASSE (80 personnes sur 102 perdues au mur, cf.
   CLAUDE.md). La page ne montre donc qu'une chose, le formulaire, sur le même
   fond et dans la même fonte que la page d'où l'on vient : arriver sur un
   autre site au moment de donner son adresse est une raison de plus de
   partir. */

:root {
    --encre: #1a1712;
    --encre-douce: #57503f;
    --fond: #f7f2e9;
    --carte: #fffdf8;
    --trait: rgba(26, 23, 18, 0.12);
    --vert: #266741;
    --bleu: #3d6a8f;
    --rouge: #a13c3c;
    --titre: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --texte: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --detente: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Le halo de la landing, derrière la carte. Chaque lueur s'éteint avant le
   bord de la couche : elle dérive, et un bord coupé entrerait dans le cadre. */
body::before {
    content: '';
    position: fixed;
    inset: 5% 10%;
    z-index: -1;
    background:
        radial-gradient(24% 34% at 34% 44%, rgba(47, 125, 79, 0.3), transparent),
        radial-gradient(24% 32% at 66% 40%, rgba(61, 106, 143, 0.3), transparent),
        radial-gradient(22% 26% at 52% 68%, rgba(164, 99, 42, 0.24), transparent);
    filter: blur(48px);
    pointer-events: none;
}

.auth-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2.5rem 1.25rem;
}

/* ===== Le logo, qui ramène à l'accueil ===== */
.auth-logo { margin-bottom: 1.75rem; }

.auth-logo a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--encre);
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* Une découpe : le SVG est dessiné en `currentColor`, qui ne vaut rien dans
   une balise `<img>`. En masque il prend la couleur du lien. */
.auth-logo-mark {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('../img/logo-mr.svg') center / contain no-repeat;
    mask: url('../img/logo-mr.svg') center / contain no-repeat;
}

/* ===== La carte ===== */
.auth-card {
    width: 100%;
    max-width: 26.5rem;
    padding: 2.5rem 2.25rem 2rem;
    border: 1px solid var(--trait);
    border-radius: 1.75rem;
    background: var(--carte);
    box-shadow: 0 2.5rem 5rem -2rem rgba(26, 23, 18, 0.25);
}

.auth-header { margin-bottom: 1.75rem; text-align: center; }

.auth-header h1 {
    margin: 0;
    font-family: var(--titre);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.auth-header p {
    margin: 0.6rem 0 0;
    color: var(--encre-douce);
    font-size: 1rem;
    text-wrap: balance;
}

/* ===== Les champs ===== */
.auth-form-group { margin-bottom: 1.1rem; }

.auth-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* 16 px au minimum : en dessous, Safari sur iPhone zoome dans la page dès
   qu'on touche le champ, et ne dézoome pas en sortant. */
.auth-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--trait);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--encre);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder { color: rgba(26, 23, 18, 0.38); }
.auth-input:hover { border-color: rgba(26, 23, 18, 0.3); }

.auth-input:focus {
    outline: none;
    border-color: var(--encre);
    box-shadow: 0 0 0 4px rgba(26, 23, 18, 0.1);
}

.auth-help { margin: 0.4rem 0 0; color: var(--encre-douce); font-size: 0.8125rem; }

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1.5rem;
    font-size: 0.875rem;
}

.auth-checkbox { display: flex; align-items: center; gap: 0.5rem; color: var(--encre-douce); }
.auth-checkbox input { width: 1rem; height: 1rem; accent-color: var(--encre); }
.auth-checkbox label { cursor: pointer; }

.auth-forgot, .auth-link {
    color: var(--encre);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(26, 23, 18, 0.3);
    text-underline-offset: 0.22em;
}

.auth-forgot:hover, .auth-link:hover { text-decoration-color: var(--encre); }

/* ===== Les deux boutons =====
   Le même poids pour les deux : Google est la voie la plus courte pour
   beaucoup, il n'a pas à passer pour un second choix. */
.auth-button, .auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    height: 3.1rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--detente);
}

.auth-button { margin-top: 0.5rem; border: 1px solid var(--encre); background: var(--encre); color: var(--fond); }
.auth-button:hover { background: #000; }

.auth-google { border: 1px solid var(--trait); background: #fff; color: var(--encre); }
.auth-google:hover { border-color: rgba(26, 23, 18, 0.35); }
.auth-google svg { width: 1.15rem; height: 1.15rem; flex: none; }

.auth-button:active, .auth-google:active { transform: scale(0.98); }

.auth-button:focus-visible, .auth-google:focus-visible, .auth-link:focus-visible, .auth-forgot:focus-visible, .auth-logo a:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 3px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.4rem 0;
    color: var(--encre-douce);
    font-size: 0.8125rem;
}

.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--trait); }

/* ===== Les messages =====
   Une couleur par nature, sur son voile : la même convention que les
   pastilles d'état du produit. */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 0.85rem;
    background: rgba(161, 60, 60, 0.1);
    color: var(--rouge);
    font-size: 0.9rem;
    line-height: 1.4;
}

.auth-alert svg { flex: none; margin-top: 0.1rem; }
.auth-alert-success { background: rgba(47, 125, 79, 0.12); color: var(--vert); }
.auth-alert-info { background: rgba(61, 106, 143, 0.12); color: var(--bleu); }

.auth-footer {
    margin-top: 1.75rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--trait);
    color: var(--encre-douce);
    font-size: 0.9rem;
    text-align: center;
}

.auth-footer p { margin: 0; }

/* ===== Le mouvement =====
   En animation à remplissage « backwards » : l'état de départ n'existe que
   pendant l'animation, donc un formulaire ne peut pas rester invisible. */
@media (prefers-reduced-motion: no-preference) {
    .auth-logo { animation: auth-monter 0.8s var(--detente) backwards; }
    .auth-card { animation: auth-surgir 0.9s var(--detente) 0.08s backwards; }
    body::before { animation: auth-deriver 18s ease-in-out infinite alternate; }

    @keyframes auth-monter { from { opacity: 0; transform: translateY(14px); } }
    @keyframes auth-surgir { from { opacity: 0; transform: translateY(22px) scale(0.97); } }
    @keyframes auth-deriver {
        from { transform: translate(-2%, 1.5%) scale(1); }
        to { transform: translate(2.5%, -2%) scale(1.08); }
    }
}

@media (max-width: 480px) {
    .auth-wrapper { justify-content: flex-start; padding-top: 2rem; }
    .auth-card { padding: 2rem 1.4rem 1.6rem; border-radius: 1.4rem; }
    .auth-header h1 { font-size: 1.7rem; }
}