/* 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;
}

/* Silhouette générique tant qu'aucune photo n'est enregistrée. */
.ea-profil-photo__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    margin-bottom: .6em;
    background: var(--fond);
    border: 1px solid var(--bordure);
    color: var(--texte-doux);
}

/* Piège déjà documenté ailleurs sur ce projet (voir static/messagerie/css/chat.css) :
   un sélecteur de classe avec `display` l'emporte sur l'attribut `[hidden]` à
   spécificité égale si l'ordre de cascade le favorise — ces deux règles, plus
   spécifiques, garantissent que `hidden` masque bien l'élément visé. */
.ea-profil-photo__apercu[hidden],
.ea-profil-photo__placeholder[hidden] {
    display: none;
}

.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 { 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: flex` + `align-items`/`justify-content` (pas juste
       `line-height: 0` sur un `display: block`) : un SVG inline garde
       son alignement "baseline" par défaut (comme du texte), ce qui le
       décale visuellement de quelques pixels vers le bas même à
       l'intérieur d'un bouton de hauteur nulle — piège découvert le
       2026-08-31, l'œil paraissait légèrement décentré verticalement. */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: .5em;
    transform: translateY(-50%);
    width: auto;
    /* `margin: 0` indispensable : `.auth-page__carte button` ci-dessous
       (le bouton "Se connecter") pose `margin-top: 1.25em` pour l'espacer
       du champ au-dessus — sans ce reset explicite, ce bouton œil en
       hérite aussi (les propriétés qu'une règle ne fixe pas restent
       déterminées par la règle la moins spécifique suivante, même si
       CETTE règle l'emporte sur les autres propriétés) : le décale visuellement
       vers le bas de ~19px, piège découvert le 2026-08-31 (la correction
       précédente centrait bien le SVG dans le bouton, mais le bouton
       lui-même restait décalé). */
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--pied-texte, #888);
    cursor: pointer;
}

.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;
    }
}

/* "Chapeau" résumant l'objectif d'un cours (retour utilisateur du
   2026-09-15, apps.formations.views.SupportsCoursView) : reprend la
   description WYSIWYG déjà rédigée côté Communication — un média collé
   avec sa taille d'origine ne doit pas pouvoir élargir la page (même
   piège que sur le site public, voir static/core/css/site.css). */
.chapeau-cours {
    margin: .3em 0 1.2em;
    color: var(--texte-doux);
}

.chapeau-cours img {
    max-width: 100%;
    height: auto;
}

.chapeau-cours table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}