/* Habillage de l'espace adhérent (profil, cours, événements, réservations,
   paiements...) et des écrans de connexion/inscription. Chargé APRÈS
   site.css (voir templates/core/base_espace_adherent.html et
   base_authentification.html) pour réutiliser ses variables (--miel,
   --encre...) et ses classes déjà éprouvées côté site public/back-office
   (.carte, .bouton) — même identité visuelle que le back-office
   (voir backoffice.css), simplifiée : une sidebar sans sections par
   rôle, l'adhérent n'ayant qu'une poignée de liens fixes. */

:root {
    --ea-largeur-sidebar: 14em;
    --ea-rayon: 10px;
    --ea-ombre-carte: 0 1px 2px rgba(23, 20, 15, .04), 0 8px 20px -10px rgba(23, 20, 15, .18);
    --ea-fond-page: #f6f3ec;
}

body {
    background: var(--ea-fond-page);
}

/* Alerte "cotisation à renouveler", en haut de toute page de l'espace
   adhérent (retour utilisateur du 2026-07-11) : pulsation douce plutôt
   qu'un clignotement franc (moins agressif, sans risque pour les
   visiteurs photosensibles), désactivée pour qui préfère moins
   d'animations. Couleur reprise de .messages .error, plus bas. */

.ea-alerte-cotisation {
    background: #fbe4e1;
    color: #a3372a;
    border-bottom: 2px solid #a3372a;
    padding: .75em 1.5em;
    font-weight: 700;
    text-align: center;
    animation: ea-alerte-cotisation-pulsation 1.8s ease-in-out infinite;
}

.ea-alerte-cotisation a {
    color: #a3372a;
}

@keyframes ea-alerte-cotisation-pulsation {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
    .ea-alerte-cotisation {
        animation: none;
    }
}

/* --- Coquille de l'espace adhérent --- */

.ea-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.ea-sidebar {
    flex: none;
    width: var(--ea-largeur-sidebar);
    background: var(--encre);
    color: var(--pied-texte);
}

/* Le fond sombre de `.ea-sidebar` (ci-dessus) s'étire sur toute la
   hauteur de `.ea-shell` (grâce à `align-items: stretch`, aucune
   hauteur fixée ici) — sinon il s'arrêtait à 100vh, avant le bas d'une
   page plus longue qu'un écran (retour utilisateur du 2026-07-11),
   laissant apparaître le fond clair de la page en dessous. La
   navigation, elle, reste épinglée en haut de l'écran au défilement
   (comportement inchangé) grâce à ce conteneur interne. */
.ea-sidebar__sticky {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.ea-sidebar__marque {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: 1.1em 1.25em;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    color: #fff;
    flex: none;
}

.ea-sidebar__marque img {
    width: 32px;
    height: auto;
    flex: none;
}

.ea-sidebar__marque span {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.1em;
    letter-spacing: .02em;
}

.ea-nav {
    list-style: none;
    margin: .75em 0;
    padding: 0;
    flex: 1;
}

.ea-nav__lien {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .65em 1.25em;
    color: var(--pied-texte);
    text-decoration: none;
    font-size: .93em;
    font-weight: 600;
    border-left: 3px solid transparent;
}

.ea-nav__lien:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Le lien de déconnexion est un <button> dans un <form method="post">
   (LogoutView n'accepte que POST) : ce modificateur lui redonne
   exactement l'apparence d'un .ea-nav__lien, en effaçant les styles
   par défaut du navigateur pour un <button>. */
.ea-nav__lien--bouton {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ea-nav__lien--actif {
    background: rgba(238, 158, 18, .14);
    border-left-color: var(--miel);
    color: #fff;
}

.ea-nav__icone {
    flex: none;
    opacity: .85;
}

.ea-sidebar__pied {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: .5em 0;
    flex: none;
}

/* --- Zone principale --- */

.ea-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ea-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25em;
    padding: .85em 1.75em;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    flex: none;
}

.ea-topbar__lien {
    display: flex;
    align-items: center;
    gap: .4em;
    color: var(--texte-doux);
    text-decoration: none;
    font-size: .88em;
    font-weight: 600;
}

.ea-topbar__lien:hover {
    color: var(--miel-fonce);
}

.ea-contenu {
    flex: 1;
    padding: 1.75em 2em 3em;
    max-width: 60em;
    width: 100%;
    margin: 0 auto;
}

.ea-contenu h1 {
    font-size: 1.6rem;
}

/* --- Tableaux --- */

.ea-contenu table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--ea-rayon);
    overflow: hidden;
    margin: 1.25em 0;
}

.ea-contenu th,
.ea-contenu td {
    text-align: left;
    padding: .7em .9em;
    border-bottom: 1px solid var(--bordure);
    font-size: .93em;
}

.ea-contenu th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .74em;
    color: var(--texte-doux);
    background: var(--fond-alt);
}

.ea-contenu tbody tr:last-child td {
    border-bottom: none;
}

/* --- Formulaires --- */

.ea-contenu form {
    max-width: 34em;
}

.ea-contenu form.ea-formulaire-large {
    max-width: 44em;
}

/* Champs groupés sur une même ligne (ex: Nom/Prénom/Année de naissance
   du profil, voir templates/core/profil.html) — repasse en une colonne
   sur un écran étroit. */
.ea-champs-ligne {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.ea-champs-ligne > p {
    flex: 1 1 10em;
    min-width: 0;
}

/* Photo à gauche des 3 premières lignes de champs du profil (retour
   utilisateur du 2026-07-11) — repasse au-dessus sur un écran étroit. */
.ea-profil-entete {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.ea-profil-photo {
    flex: 0 1 10em;
    min-width: 8em;
}

.ea-profil-photo__apercu {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: .6em;
    display: block;
}

.ea-profil-lignes {
    flex: 1 1 20em;
    min-width: 0;
}

.ea-contenu label {
    display: block;
    font-weight: 700;
    font-size: .88em;
    color: var(--encre);
    margin: 1em 0 .3em;
}

.ea-contenu label:first-child {
    margin-top: 0;
}

.ea-contenu input:not([type="checkbox"]):not([type="radio"]),
.ea-contenu select,
.ea-contenu textarea {
    width: 100%;
    padding: .55em .75em;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    font: inherit;
    background: var(--fond);
    color: var(--texte);
}

.ea-contenu input:focus,
.ea-contenu select:focus,
.ea-contenu textarea:focus {
    outline: 2px solid var(--miel);
    outline-offset: 1px;
}

.ea-contenu button,
.ea-contenu input[type="submit"] {
    display: inline-block;
    background: var(--miel);
    color: #fff;
    font-weight: 700;
    border: none;
    padding: .65em 1.4em;
    border-radius: 999px;
    font-size: .95em;
    cursor: pointer;
    margin-top: .5em;
}

.ea-contenu button:hover,
.ea-contenu input[type="submit"]:hover {
    background: var(--miel-fonce);
}

/* --- Messages Django (voir templates/base.html) --- */

.messages {
    list-style: none;
    margin: 0;
    padding: .85em 2em;
    background: var(--fond-alt);
}

.messages li {
    padding: .5em .8em;
    border-radius: 6px;
    margin-bottom: .4em;
    font-size: .9em;
}

.messages .success { background: #e4f3e6; color: #2b6a34; }
.messages .error { background: #fbe4e1; color: #a3372a; }
.messages .warning, .messages .info { background: var(--miel-clair); color: var(--miel-fonce); }

/* --- Écrans de connexion/inscription (pas de sidebar : pas encore authentifié) --- */

.auth-page {
    max-width: 30em;
    margin: 3.5em auto;
    padding: 0 1.5em;
}

.auth-page--large {
    max-width: 40em;
}

.auth-page__marque {
    display: flex;
    align-items: center;
    gap: .6em;
    justify-content: center;
    margin-bottom: 1.75em;
    text-decoration: none;
}

.auth-page__marque img {
    width: 34px;
    height: auto;
}

.auth-page__marque span {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.2em;
    color: var(--encre);
}

.auth-page__carte {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--ea-rayon);
    box-shadow: var(--ea-ombre-carte);
    padding: 1.75em;
}

.auth-page__carte h1 {
    font-size: 1.3rem;
    margin-bottom: .3em;
}

.auth-page__carte > p:first-of-type {
    color: var(--texte-doux);
    font-size: .93em;
    margin-top: 0;
}

.auth-page__carte form {
    max-width: none;
}

.auth-page__carte label {
    display: block;
    font-weight: 700;
    font-size: .88em;
    color: var(--encre);
    margin: 1em 0 .3em;
}

.auth-page__carte label:first-child {
    margin-top: 0;
}

.auth-page__carte input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: .55em .75em;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    font: inherit;
    background: var(--fond);
    color: var(--texte);
}

.auth-page__carte input:focus {
    outline: 2px solid var(--miel);
    outline-offset: 1px;
}

/* Icône "œil" ajoutée par static/core/js/bascule_mot_de_passe.js sur
   chaque champ mot de passe. Sélecteurs `.auth-page__carte .bascule-*`
   (et non `.bascule-*` seul) : la spécificité doit au moins égaler
   `.auth-page__carte button` ci-dessous, sans quoi ce bouton hériterait
   à tort de son style de bouton de soumission (pleine largeur, fond miel). */
.auth-page__carte .bascule-mot-de-passe__conteneur {
    position: relative;
    display: block;
}

.auth-page__carte .bascule-mot-de-passe__conteneur input {
    padding-right: 2.4em;
}

.auth-page__carte .bascule-mot-de-passe {
    display: block;
    position: absolute;
    top: 50%;
    right: .5em;
    transform: translateY(-50%);
    width: auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--pied-texte, #888);
    cursor: pointer;
    line-height: 0;
}

.auth-page__carte .bascule-mot-de-passe:hover {
    color: var(--miel-fonce, var(--miel));
}

.auth-page__carte button,
.auth-page__carte input[type="submit"] {
    display: block;
    width: 100%;
    background: var(--miel);
    color: #fff;
    font-weight: 700;
    border: none;
    padding: .7em 1.4em;
    border-radius: 999px;
    font-size: .95em;
    cursor: pointer;
    margin-top: 1.25em;
}

.auth-page__carte button:hover,
.auth-page__carte input[type="submit"]:hover {
    background: var(--miel-fonce);
}

.auth-page__liens {
    text-align: center;
    margin-top: 1.25em;
    font-size: .88em;
}

.auth-page__erreurs {
    background: #fbe4e1;
    color: #a3372a;
    border-radius: 6px;
    padding: .7em .9em;
    margin: 0 0 1em;
    font-size: .88em;
}

/* Plusieurs actions dans une même cellule de tableau (ex: Mes documents) :
   même principe que .bo-actions-compactes côté back-office
   (static/core/css/backoffice.css) — dupliqué ici plutôt que partagé, cet
   espace utilisant sa propre feuille de style. */
.bo-actions-compactes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .6em;
    white-space: nowrap;
}

.bo-actions-compactes .bo-actions-compactes__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .4em;
    line-height: 1;
    color: var(--encre);
}

/* Montant estimé en direct du tunnel d'adhésion (voir
   static/finance/js/calcul_montant_cotisation.js) : bien visible,
   jamais confondu avec un simple paragraphe de texte courant. */
.montant-total-cotisation {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--miel-clair);
    border: 1px solid var(--miel);
    border-radius: 8px;
    padding: .8em 1.2em;
    margin-bottom: 1.2em;
    font-size: 1.05em;
}

.montant-total-cotisation p {
    margin: .2em 0;
}

/* Indicateur d'étapes du tunnel d'adhésion (Panier/Inscription/Résumé/
   Paiement/Confirmation), voir templates/finance/_etapes_adhesion.html. */
.etapes-adhesion {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em;
    gap: .5em;
}

.etapes-adhesion li {
    flex: 1;
    text-align: center;
    padding-bottom: .6em;
    border-bottom: 3px solid var(--miel-clair);
    color: #999;
    font-size: .9em;
}

.etapes-adhesion__etape--faite {
    border-bottom-color: var(--miel-fonce);
    color: var(--encre);
}

.etapes-adhesion__etape--courante {
    border-bottom-color: var(--miel);
    color: var(--encre);
    font-weight: bold;
}

.etapes-adhesion__numero {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    border-radius: 50%;
    background: var(--miel-clair);
    margin-right: .3em;
}

.etapes-adhesion__etape--faite .etapes-adhesion__numero,
.etapes-adhesion__etape--courante .etapes-adhesion__numero {
    background: var(--miel);
    color: #fff;
}

/* --- Responsive : sidebar repliable sous les petits écrans --- */

.ea-topbar__bascule {
    display: none;
}

@media (max-width: 60em) {
    .ea-sidebar {
        position: fixed;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 0 100vmax rgba(23, 20, 15, 0);
    }

    .ea-shell--sidebar-ouverte .ea-sidebar {
        transform: translateX(0);
        box-shadow: 0 0 0 100vmax rgba(23, 20, 15, .45);
    }

    .ea-topbar__bascule {
        display: inline-flex;
        align-items: center;
        gap: .4em;
        margin-right: auto;
        background: none;
        border: 1px solid var(--bordure);
        border-radius: 999px;
        padding: .4em .9em;
        font: inherit;
        font-weight: 700;
        color: var(--encre);
        cursor: pointer;
    }

    .ea-contenu {
        padding: 1.25em 1em 2.5em;
    }
}