/* ============================================================
   AU FIL DES ÂMES — assets/css/auth.css
   Styles partagés par toutes les pages d'authentification :
   connexion, inscription, reset_mot_passe, nouveau_mot_passe,
   validation_email.
   Esthétique revue littéraire — petit livret d'entrée au jardin.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. EN-TÊTE DE MARQUE (includes/header_auth.php)
   ════════════════════════════════════════════════════════════ */

.header-auth {
    text-align: center;
    padding: 2.4rem 1rem 1.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bordure-douce, #ece8e1);
    background: transparent;
}
.header-auth-logo {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}
.header-auth-logo:hover {
    opacity: .75;
}
.header-auth-titre {
    display: block;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--texte, #1e1c1a);
    line-height: 1.1;
}
.header-auth-devise {
    display: block;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-size: 1rem;
    color: #6e6a64;
    margin-top: .55rem;
    letter-spacing: .01em;
}


/* ════════════════════════════════════════════════════════════
   2. CONTENEUR PRINCIPAL
   ════════════════════════════════════════════════════════════ */

main.container-auth {
    max-width: 460px;
    margin: 2.4rem auto 4rem;
    padding: 0 1.2rem;
}

main.container-auth > h1 {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--texte, #1e1c1a);
    margin: 0 0 .5rem;
    letter-spacing: .01em;
    text-align: center;
    line-height: 1.15;
}

/* Paragraphes prose (états succès/erreur) — par défaut */
main.container-auth > p {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.1rem;
    color: #5a564f;
    text-align: center;
    margin: 0 auto 1.2rem;
    max-width: 460px;
    line-height: 1.65;
}

/* Chapeau — surcharge le style prose */
main.container-auth > p.chapeau {
    font-style: italic;
    font-size: 1.15rem;
    color: #6e6a64;
    margin-bottom: 2.4rem;
    line-height: 1.55;
}

/* Liens dans les paragraphes prose (états succès/erreur, hors classes spécifiques) */
main.container-auth > p:not(.chapeau):not(.lien-connexion):not(.lien-inscription):not(.lien-reset) a {
    color: var(--accent, #4a6741);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color .2s;
}
main.container-auth > p:not(.chapeau):not(.lien-connexion):not(.lien-inscription):not(.lien-reset) a:hover {
    color: #3d5736;
}


/* ════════════════════════════════════════════════════════════
   3. BANDEAU D'ERREURS
   ════════════════════════════════════════════════════════════ */

main.container-auth .erreurs {
    background: #fdf0f0;
    border-left: 4px solid #c87070;
    color: #7a2020;
    border-radius: 6px;
    padding: .9rem 1.2rem;
    margin-bottom: 1.6rem;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .9rem;
    line-height: 1.5;
    text-align: left;
    animation: auth-apparait .35s ease-out;
}
main.container-auth .erreurs p {
    margin: .15rem 0;
}
@keyframes auth-apparait {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════
   4. FORMULAIRE EN CARTE BLANCHE
   ════════════════════════════════════════════════════════════ */

main.container-auth form {
    background: #fff;
    border: 1px solid var(--bordure-douce, #ece8e1);
    border-radius: 10px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .04);
    padding: 2.2rem 2rem;
}

/* Champs de formulaire */
main.container-auth .champ {
    margin-bottom: 1.3rem;
}
main.container-auth .champ:last-of-type {
    margin-bottom: 1.5rem;
}

main.container-auth .champ > label {
    display: block;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .82rem;
    color: #5a564f;
    margin-bottom: .45rem;
    letter-spacing: .03em;
    font-weight: 500;
}

main.container-auth .champ input[type="text"],
main.container-auth .champ input[type="email"],
main.container-auth .champ input[type="password"] {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #ddd6cc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    background: #fdfcfa;
    color: var(--texte, #1e1c1a);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

main.container-auth .champ input:focus {
    outline: none;
    border-color: var(--accent, #4a6741);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, .12);
}

/* Aide sous un champ */
main.container-auth .champ .aide {
    display: block;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .78rem;
    color: #8a857d;
    margin-top: .35rem;
    line-height: 1.45;
    font-style: normal;
}


/* ════════════════════════════════════════════════════════════
   5. CHAMP CHECKBOX (charte de bienveillance, etc.)
   ════════════════════════════════════════════════════════════ */

main.container-auth .champ-checkbox {
    background: #fafaf7;
    border: 1px solid var(--bordure-douce, #ece8e1);
    border-radius: 6px;
    padding: .85rem 1rem;
    margin-bottom: 1.5rem;
}
main.container-auth .champ-checkbox > label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    cursor: pointer;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1rem;
    color: var(--texte, #1e1c1a);
    line-height: 1.5;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
main.container-auth .champ-checkbox input[type="checkbox"] {
    accent-color: var(--accent, #4a6741);
    margin-top: .2rem;
    cursor: pointer;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   6. AIDE RGPD — note de confidentialité au cœur du formulaire
   ════════════════════════════════════════════════════════════ */

.aide-rgpd {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-size: .92rem;
    color: #6e6a64;
    line-height: 1.55;
    background: #fafaf7;
    border-left: 3px solid var(--bordure-douce, #ece8e1);
    padding: .8rem 1rem;
    border-radius: 0 4px 4px 0;
    margin: -.4rem 0 1.5rem;
    text-align: left;
}


/* ════════════════════════════════════════════════════════════
   7. ALERTE PSEUDO RESSEMBLE À UN PRÉNOM RÉEL
   ════════════════════════════════════════════════════════════ */

.alerte-pseudo {
    background: #fdf6e4;
    border-left: 4px solid #d4ae5a;
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin: -.6rem 0 1.5rem;
    color: #6b5010;
    animation: auth-apparait .35s ease-out;
}
.alerte-pseudo p {
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .9rem;
    line-height: 1.55;
    margin: 0 0 .9rem;
    text-align: left;
    color: inherit;
    max-width: none;
}
.alerte-pseudo .case-conscience {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    cursor: pointer;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: .98rem;
    color: #6b5010;
    line-height: 1.5;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0;
}
.alerte-pseudo .case-conscience input[type="checkbox"] {
    accent-color: #d4ae5a;
    margin-top: .25rem;
    cursor: pointer;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   8. BOUTONS
   ════════════════════════════════════════════════════════════ */

/* Bouton submit dans un formulaire — pleine largeur */
main.container-auth button[type="submit"] {
    width: 100%;
    background: var(--accent, #4a6741);
    color: #fff;
    border: 1px solid var(--accent, #4a6741);
    padding: .8rem 1.6rem;
    border-radius: 6px;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
    letter-spacing: .02em;
    margin-top: .2rem;
}
main.container-auth button[type="submit"]:hover {
    background: #3d5736;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74, 103, 65, .25);
}
main.container-auth button[type="submit"]:active {
    transform: translateY(0);
}

/* Bouton-lien (.bouton) pour les états succès — inline-block centré */
.bouton {
    display: inline-block;
    background: var(--accent, #4a6741);
    color: #fff !important;
    border: 1px solid var(--accent, #4a6741);
    padding: .75rem 1.8rem;
    border-radius: 6px;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .98rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
    letter-spacing: .02em;
}
.bouton:hover {
    background: #3d5736;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74, 103, 65, .25);
}

/* Quand le bouton est en enfant direct de main (sans wrapper <p>) */
main.container-auth > a.bouton {
    display: block;
    width: max-content;
    margin: 1.5rem auto 0;
}


/* ════════════════════════════════════════════════════════════
   9. LIENS DU BAS (vers connexion / inscription / reset)
   ════════════════════════════════════════════════════════════ */

main.container-auth > p.lien-connexion,
main.container-auth > p.lien-inscription,
main.container-auth > p.lien-reset {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-size: 1rem;
    color: #6e6a64;
    text-align: center;
    line-height: 1.55;
    max-width: none;
}

/* Premier lien sous le formulaire = trait de séparation */
main.container-auth form + p.lien-connexion,
main.container-auth form + p.lien-inscription,
main.container-auth form + p.lien-reset {
    margin: 1.8rem 0 .4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--bordure-douce, #ece8e1);
}

/* Liens secondaires (qui suivent un autre lien) — plus petits */
main.container-auth > p.lien-reset:not(:first-of-type) {
    margin-top: 0;
    margin-bottom: .4rem;
    padding-top: 0;
    border-top: none;
    font-size: .92rem;
    color: #8a857d;
}

main.container-auth p.lien-connexion a,
main.container-auth p.lien-inscription a,
main.container-auth p.lien-reset a {
    color: var(--accent, #4a6741);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
    font-style: normal;
}
main.container-auth p.lien-connexion a:hover,
main.container-auth p.lien-inscription a:hover,
main.container-auth p.lien-reset a:hover {
    color: #3d5736;
    border-bottom-color: currentColor;
}


/* ════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .header-auth {
        padding: 1.6rem .8rem 1.2rem;
    }
    .header-auth-titre {
        font-size: 1.35rem;
        letter-spacing: .14em;
    }
    .header-auth-devise {
        font-size: .9rem;
    }

    main.container-auth {
        margin-top: 1.4rem;
        padding: 0 .8rem;
    }
    main.container-auth > h1 {
        font-size: 2rem;
    }
    main.container-auth > p {
        font-size: 1.02rem;
    }
    main.container-auth > p.chapeau {
        font-size: 1.05rem;
        margin-bottom: 1.8rem;
    }
    main.container-auth form {
        padding: 1.8rem 1.4rem;
    }
}