/* Habillage du site public (vitrine) de l'USAS/Alveo. Palette et
   typographie reprises du site existant (usas72.fr, propulsé par Yapla) :
   accent miel/orange, titres gras géométriques, corps de texte neutre,
   pied de page sombre — pour que le nouveau site vitrine s'inscrive dans
   la continuité visuelle de l'identité déjà connue des adhérents, plutôt
   que de la réinventer. L'espace back-office n'est pas concerné (voir
   templates/base.html, toujours sans style par défaut). */

:root {
    --miel: #ee9e12;
    --miel-fonce: #a86c0a;
    --miel-clair: #fbe6bf;
    --encre: #17140f;
    --texte: #333;
    --texte-doux: #6b645a;
    --fond: #fff;
    --fond-alt: #f4f1ea;
    --bordure: #e7e2d6;
    --pied-fond: #17140f;
    --pied-texte: #cfc9ba;
    --vert-ok: #2f7d40;
    --vert-ok-fond: #e4f3e7;
    --rouge-alerte: #b42323;
    --rouge-alerte-fond: #fbe4e4;
    --terracotta: #b5602f;
    --terracotta-fond: #f5e6da;

    --police-titre: "Century Gothic", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
    --police-texte: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    /* Filet de sécurité pour tout le site public (retour utilisateur du
       2026-09-07, titre "Bienvenue au rucher école" débordant sur
       mobile) : un mot isolé avec une taille de police très grande,
       tapé à la main dans une page WYSIWYG, peut dépasser la largeur de
       l'écran sans jamais provoquer de retour à la ligne par défaut
       (une espace est la seule occasion de rupture normale) — la page
       entière devenait alors défilable horizontalement, décalant TOUT
       le contenu (pas seulement le titre) vers la droite du cadrage
       visible sur mobile. */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--police-texte);
    color: var(--texte);
    background: var(--fond);
    line-height: 1.6;
}

/* Complète le filet de sécurité ci-dessus : un mot/titre trop grand se
   coupe désormais proprement (retour à la ligne) plutôt que de rester
   caché par overflow-x:hidden (qui masquerait silencieusement une
   partie du texte sans ce `break-word`). */
.site-contenu {
    overflow-wrap: break-word;
}

/* `!important` volontaire : un copier-coller depuis Word (bouton
   "PasteFromWord" du bandeau de l'éditeur — voir TEXT_EDITOR_SETTINGS)
   pose parfois un style en ligne `white-space: nowrap` directement SUR
   l'élément, qui a une priorité plus forte que `overflow-wrap`
   ci-dessus et empêche TOUT retour à la ligne (retour utilisateur du
   2026-09-07 : le titre "Bienvenue au rucher école" débordait encore
   après le correctif précédent). `pre`/`code` volontairement exclus :
   un bloc de code (bouton "CodeBlock") a besoin de garder ses retours
   à la ligne d'origine. */
.site-contenu h1, .site-contenu h2, .site-contenu h3,
.site-contenu p, .site-contenu li, .site-contenu blockquote {
    white-space: normal !important;
}

a {
    color: var(--miel-fonce);
}

h1, h2, h3 {
    font-family: var(--police-titre);
    color: var(--encre);
    line-height: 1.2;
    margin: 0 0 .5em;
}

h1 { font-size: 2.1rem; font-weight: 800; }
h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2.5rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .3em; }

/* --- En-tête --- */

.site-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25em;
    padding: 1em 1.75em;
    border-bottom: 1px solid var(--bordure);
    /* Toujours visible au défilement (retour utilisateur du 2026-07-11) : */
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fond);
}

.site-entete__marque {
    display: flex;
    align-items: center;
    gap: .6em;
    text-decoration: none;
}

.site-entete__logo {
    width: 40px;
    height: auto;
    flex: none;
}

.site-entete__nom {
    font-family: var(--police-titre);
    font-size: 1.15em;
    font-weight: 800;
    color: var(--encre);
    letter-spacing: .01em;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .95em;
}

.site-nav a {
    text-decoration: none;
    color: var(--texte);
    font-weight: 600;
    padding-bottom: .2em;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--miel-fonce);
    border-bottom-color: var(--miel);
}

/* Onglet de la page actuellement affichée (retour utilisateur du
   2026-08-05) : même habillage que le survol, mais permanent — calculé
   côté serveur par apps.core.context_processors.menu_public, pas en JS. */
.site-nav a.site-nav__lien--actif {
    color: var(--miel-fonce);
    border-bottom-color: var(--miel);
}

.site-nav__bouton {
    background: var(--miel);
    color: #fff !important;
    padding: .5em 1.1em !important;
    border-radius: 999px;
    border-bottom: none !important;
}

.site-nav__bouton:hover {
    background: var(--miel-fonce);
    color: #fff !important;
}

/* Sous-menu à bascule des pages filles (retour utilisateur du
   2026-07-12) : fermé par défaut, ouvert au CLIC sur le chevron (pas au
   survol — plus fiable, fonctionne aussi au tactile, voir le script
   dans base_public.html). Toujours en position absolue : ne décale
   JAMAIS les autres éléments du menu ni le contenu en dessous, quel
   que soit son état ouvert/fermé — voir la media query ci-dessous pour
   son affichage différent (toujours visible/indenté) sur mobile. */
.site-nav__parent {
    position: relative;
}

.site-nav__parent-ligne {
    display: inline-flex;
    align-items: center;
    gap: .3em;
}

.site-nav__parent-ligne a {
    line-height: 1;
}

.site-nav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `font: inherit` est nécessaire ici : un `<button>` n'hérite PAS
       automatiquement de la taille de police environnante (contrairement
       à un `<a>`) — sans cette ligne, son texte/sa boîte reste à la
       taille par défaut du navigateur, plus petite que le lien voisin,
       d'où le chevron visuellement décalé (retour utilisateur du
       2026-07-12). Même rythme vertical que les liens du menu ensuite
       (voir ".site-nav a" : padding-bottom + bordure transparente). */
    font: inherit;
    padding: 0 0 .2em;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: transform .15s ease;
}

.site-nav__parent--ouvert .site-nav__chevron {
    transform: rotate(180deg);
}

.site-nav__sousmenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 12em;
    margin: 0;
    padding: .5em 0;
    list-style: none;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(23, 20, 15, .12);
}

.site-nav__parent--ouvert .site-nav__sousmenu {
    display: block;
}

.site-nav__sousmenu li {
    width: 100%;
}

.site-nav__sousmenu a {
    display: block;
    padding: .5em 1em;
    border-bottom: none;
    white-space: nowrap;
}

.site-nav__sousmenu a:hover {
    background: var(--fond-alt);
}

.site-nav-bascule {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    flex: none;
    border: none;
    background: none;
    color: var(--encre);
    cursor: pointer;
}

/* En dessous de cette largeur, le menu ne tient plus sur une seule
   ligne à côté du logo (retour utilisateur du 2026-07-11) : bascule
   sur un menu déroulant plein écran, ouvert/fermé par le bouton
   hamburger (voir base_public.html). */
@media (max-width: 56em) {
    .site-nav-bascule {
        display: flex;
    }

    .site-entete nav {
        width: 100%;
        order: 3;
    }

    .site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: .5em 0 0;
    }

    .site-nav--ouvert {
        display: flex;
    }

    .site-nav li {
        width: 100%;
    }

    .site-nav a {
        display: block;
        padding: .85em 0;
        border-bottom: 1px solid var(--bordure);
    }

    .site-nav__bouton {
        display: inline-block;
        margin: .85em 0;
        text-align: center;
        border-bottom: none !important;
    }

    /* Menu plein écran déjà déplié : pas besoin d'un second clic pour
       voir les pages filles, ni du chevron qui déclenche cette bascule
       sur desktop — le sous-menu reste toujours visible, en liste
       indentée sous son parent, plutôt qu'en overlay positionné en absolu. */
    .site-nav__chevron {
        display: none;
    }

    .site-nav__sousmenu {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        padding: 0 0 0 1.25em;
    }

    .site-nav__sousmenu a {
        padding: .7em 0;
        border-bottom: 1px solid var(--bordure);
    }
}

/* --- Bandeau d'accueil (page d'accueil uniquement) --- */

.site-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--miel-fonce) 0%, var(--miel) 65%);
    color: #fff;
    padding: 4.5rem 1.75em;
    text-align: left;
}

.site-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    width: 480px;
    height: 480px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    pointer-events: none;
}

.site-hero__contenu {
    position: relative;
    max-width: 42em;
}

.site-hero h1 {
    color: #fff;
    font-size: 2.5rem;
    text-wrap: balance;
}

.site-hero p {
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255,255,255,.92);
    margin: 0;
}

/* Image de fond à la place du dégradé (retour utilisateur du
   2026-07-11, voir ConfigurationSite.image_bandeau_accueil) : mêmes
   dimensions/mise en page, la forme décorative du dégradé (::before)
   n'a plus lieu d'être sur une photo. */
.site-hero--image {
    background: #000 center / cover no-repeat;
}

.site-hero--image::before {
    content: none;
}

/* Couleur du titre/sous-titre, réglable indépendamment de l'image
   (voir ConfigurationSite.couleur_texte_bandeau) : blanc par défaut,
   au cas où l'image de fond serait claire. */
.site-hero--texte-sombre h1 {
    color: var(--encre);
}

.site-hero--texte-sombre p {
    color: var(--encre);
}

/* --- Contenu --- */

.site-contenu {
    max-width: 60em;
    margin: 0 auto;
    padding: 2.5em 1.75em 3.5em;
}

/* Pages utilisant le bloc "corps_pleine_largeur" (ex: l'espace adhérent) :
   le bloc "contenu_public" y reste vide, ce conteneur ne doit alors
   laisser aucun espace vide entre la coquille et le bandeau des
   partenaires/le pied de page (retour utilisateur du 2026-07-11). */
.site-contenu:empty {
    padding: 0;
}

/* Contenu riche des pages WYSIWYG (ex: une image ou un iframe collé
   avec sa largeur/hauteur d'origine — code d'intégration Google Maps,
   photo en pleine résolution...) : sans ça, un média plus large que
   l'écran élargit toute la page au lieu d'être ramené à sa taille,
   contrairement aux pages où chaque image/carte est déjà stylée à la
   main (ex: templates/public/contact.html, `.contact-carte iframe`) —
   retour utilisateur du 2026-09-07 (page "Rucher école" non adaptée
   sur mobile). `height: auto` réservé aux images (un iframe/vidéo à
   qui l'on force `height: auto` s'effondre à la hauteur par défaut du
   navigateur, ~150px, au lieu de garder sa hauteur d'origine). Un
   tableau large défile horizontalement dans son propre cadre plutôt
   que de déborder de la page. */
.site-contenu img {
    max-width: 100%;
    height: auto;
}

.site-contenu iframe,
.site-contenu video,
.site-contenu embed,
.site-contenu object {
    max-width: 100%;
}

.site-contenu table {
    max-width: 100%;
}

/* Un contenu copié-collé depuis un autre site (retour utilisateur du
   2026-09-07 : tableau "Objectifs" de la page "Rucher école", utilisé
   comme mise en page 2 colonnes — photo à gauche, texte à droite —
   plutôt que comme un vrai tableau de données) porte souvent un
   `width` fixe EN PIXELS directement sur chaque `<span style="...">`
   (ex: 560px, 1120px), pensé pour la largeur du site d'origine, jamais
   pour celle-ci : `max-width:100%` sur l'image/le tableau ne suffit
   pas à empêcher CETTE largeur fixe de forcer le tableau (donc toute
   la ligne) à rester large sur mobile. `!important` : seul moyen de
   passer devant un style posé EN LIGNE. `[style*="width"]` cible
   uniquement les balises qui déclarent explicitement une largeur, sans
   toucher au reste du contenu. */
.site-contenu span[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
}

/* En dessous de 640px (même seuil que .bloc-colonnes, le bloc "Grille
   colonnes" du CMS) : un tableau utilisé comme mise en page 2 colonnes
   empile ses cellules en une seule colonne, dans l'ordre où elles
   apparaissent dans le tableau (ex: photo, puis texte) — comme
   `.bloc-colonnes` le fait déjà pour son propre bloc. Un vrai tableau
   de données à plusieurs colonnes défile alors horizontalement dans
   son propre cadre plutôt que d'empiler chaque cellule séparément
   (peu lisible), via `.tableau-donnees` à poser à la main sur un tel
   tableau si besoin un jour (aucun cas de ce type sur le site pour
   l'instant). */
@media (max-width: 640px) {
    .site-contenu table:not(.tableau-donnees),
    .site-contenu table:not(.tableau-donnees) tbody,
    .site-contenu table:not(.tableau-donnees) tr,
    .site-contenu table:not(.tableau-donnees) th,
    .site-contenu table:not(.tableau-donnees) td {
        display: block;
        width: 100%;
    }
}

.section-intro {
    max-width: 46em;
    color: var(--texte-doux);
    margin-bottom: 2rem;
}

.section-intro > *:first-child {
    margin-top: 0;
}

.section-intro h2 {
    color: var(--encre);
    margin-top: 0;
}

/* --- Page 404 (retour utilisateur du 2026-07-11) --- */

.page-404 {
    max-width: 32em;
    margin: 3em auto;
    text-align: center;
}

.page-404__emoji {
    font-size: 3.5em;
    margin: 0 0 .2em;
    line-height: 1;
}

.page-404 h1 {
    color: var(--miel);
}

.page-404 p {
    color: var(--texte-doux);
}

.page-404 .bouton {
    margin-top: 1em;
}

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1.25em;
    list-style: none;
    padding: 0;
    margin: 1.25em 0;
}

.carte {
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 1.1em 1.25em;
    background: var(--fond);
    transition: box-shadow .15s ease, transform .15s ease;
}

.carte:hover {
    box-shadow: 0 6px 20px rgba(23,20,15,.08);
    transform: translateY(-2px);
}

.carte img {
    display: block;
    width: 100%;
    height: 9em;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: .75em;
}

/* Image de cours/événement : contrairement à .carte img ci-dessus (hauteur
   fixe + recadrage, utilisée pour les actualités), on garde ici l'image
   ENTIÈRE et ses proportions d'origine (retour utilisateur du 2026-07-13) :
   ni hauteur fixe, ni object-fit. Sélecteur "img.carte__image" (et non
   ".carte__image" seul) : la spécificité classe+balise doit au moins
   égaler celle de ".carte img" ci-dessus pour la départager (sinon
   ".carte img", plus spécifique, l'emporterait malgré tout et l'image
   resterait rognée). */
img.carte__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
    border-radius: 5px;
    margin-bottom: .75em;
}

/* Fiche cours/événement/actualité : image à gauche, contenu à droite
   (catalogues publics + liste des actualités). Image FLOTTANTE (`float`,
   pas flexbox) — retour utilisateur du 2026-08-31 : avec l'ancien layout
   en flex, un texte plus long que l'image restait coincé dans sa colonne
   étroite sur toute sa hauteur ; avec un float, le texte s'enroule autour
   de l'image puis s'étend naturellement sur toute la largeur de
   l'encadré une fois plus bas que l'image — comportement natif du
   navigateur, aucun JS nécessaire. `overflow: hidden` sur `.carte-fiche`
   sert de clearfix (sans lui, une carte dont l'image dépasse en hauteur
   un texte plus court afficherait une hauteur nulle). Revient en pile
   verticale sous 36em de large (media query plus bas), un float ne
   s'empilant pas tout seul comme le faisait `flex-wrap: wrap`. */
.carte-fiche {
    overflow: hidden;
}

.carte-fiche__image {
    float: left;
    width: 16em;
    margin: 0 1.5em 1em 0;
}

.carte-fiche__image .carte__image {
    margin-bottom: 0;
}

.carte-fiche__contenu {
    min-width: 0;
}

@media (max-width: 36em) {
    .carte-fiche__image {
        float: none;
        width: 100%;
        margin: 0 0 1.5em 0;
    }
}

.carte h3 a {
    text-decoration: none;
    color: var(--encre);
}

.carte h3 a:hover {
    color: var(--miel-fonce);
}

.carte p {
    color: var(--texte-doux);
    font-size: .93em;
    margin: .3em 0;
}

.carte__lien {
    display: inline-block;
    margin-top: .5em;
    font-weight: 700;
    font-size: .9em;
    text-decoration: none;
    color: var(--miel-fonce);
}

.carte__lien::after {
    content: " →";
}

.badge-reserve,
.badge-categorie {
    display: inline-block;
    font-weight: 700;
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .25em .6em;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: .4em;
}

.badge-reserve {
    background: var(--miel-clair);
    color: var(--miel-fonce);
}

.badge-categorie {
    background: var(--fond-alt);
    color: var(--texte-doux);
    border: 1px solid var(--bordure);
    margin-left: 0;
    margin-right: .4em;
}

.badge-cotisation {
    display: inline-block;
    font-weight: 700;
    font-size: .82em;
    padding: .25em .7em;
    border-radius: 999px;
    vertical-align: middle;
}

.badge-cotisation--a-jour {
    background: var(--vert-ok-fond);
    color: var(--vert-ok);
}

.badge-cotisation--a-renouveler {
    background: var(--rouge-alerte-fond);
    color: var(--rouge-alerte);
}

.badge-cotisation--en-attente-tarif {
    background: var(--miel-clair);
    color: var(--miel-fonce);
}

.badge-cotisation--a-prendre {
    background: var(--fond-alt);
    color: var(--texte-doux);
}

.bouton {
    display: inline-block;
    background: var(--miel);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: .65em 1.4em;
    border-radius: 999px;
    border: none;
    font-size: .95em;
}

.bouton:hover {
    background: var(--miel-fonce);
    color: #fff;
}

/* --- Blocs d'actualité (éditeur glisser-déposer, voir
   apps.communication.services.blocs_actualite) --- */

.bloc-texte {
    margin-bottom: 1.2em;
    line-height: 1.6;
}

.bloc-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 1.2em;
    border-radius: 6px;
}

.bloc-bouton {
    margin-bottom: 1.2em;
}

.bloc-separateur {
    border: none;
    border-top: 1px solid var(--bordure);
    margin: 2em 0;
}

/* Mise en page en colonnes (2026-07-10) : réutilisée à l'identique par
   le bloc "colonnes" des actualités (blocs_actualite.py) et par le
   plugin CMS "Grille (colonnes)" des pages (cms_plugins.py) — même
   rendu visuel, deux mécanismes d'édition différents. Flexbox répartit
   la largeur également quel que soit le nombre de colonnes (2, 3, 4...),
   sans classe modificatrice par nombre. */

.bloc-colonnes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 1.2em;
}

.bloc-colonnes__colonne {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .bloc-colonnes {
        flex-direction: column;
    }
}

/* Résumé d'actualité mis en avant (plugin CMS "Actualité (résumé)",
   typiquement une par colonne d'une .bloc-colonnes) */

.bloc-actualite-resume__image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: .6em;
}

.bloc-actualite-resume__titre {
    margin-top: 0;
}

.bloc-actualite-resume__chapo {
    color: var(--texte-doux);
}

/* Carrousel d'images (plugin CMS "Carrousel", navigation manuelle voir
   static/core/js/carrousel.js) */

.carrousel {
    position: relative;
    margin-bottom: 1.5em;
}

.carrousel__piste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 8px;
}

.carrousel__piste::-webkit-scrollbar {
    display: none;
}

.carrousel__diapositive {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    /* Hauteur homogène pour toutes les diapositives, quelle que soit la
       taille/l'orientation de l'image source (retour utilisateur du
       2026-07-11) : `object-fit: cover` ci-dessous recadre chaque image
       pour remplir ce cadre, sans jamais la déformer. */
    height: clamp(220px, 32vw, 420px);
    overflow: hidden;
}

.carrousel__diapositive img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carrousel__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: .6em 1em;
    background: rgba(23, 20, 15, .6);
    color: #fff;
}

.carrousel__fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .85);
    border: none;
    border-radius: 50%;
    width: 2.4em;
    height: 2.4em;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    color: var(--encre);
}

.carrousel__fleche--precedente {
    left: .6em;
}

.carrousel__fleche--suivante {
    right: .6em;
}

.carrousel__puces {
    display: flex;
    justify-content: center;
    gap: .5em;
    margin-top: .6em;
}

.carrousel__puce {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    border: none;
    background: var(--bordure);
    cursor: pointer;
    padding: 0;
}

.carrousel__puce--active {
    background: var(--miel);
}

/* Album photos (plugin CMS "Album photos", agrandissement en
   superposition voir static/core/js/album_photos.js) */

.album-photos__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75em;
    margin-bottom: 1.2em;
}

.album-photos__vignette {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

.album-photos__vignette img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.album-photos__lightbox {
    border: none;
    border-radius: 8px;
    padding: 1.5em 1em 1em;
    max-width: 90vw;
    max-height: 90vh;
}

.album-photos__lightbox::backdrop {
    background: rgba(23, 20, 15, .8);
}

.album-photos__lightbox img {
    max-width: 100%;
    max-height: 75vh;
    display: block;
    margin: 0 auto;
}

.album-photos__lightbox-fermer {
    position: absolute;
    top: .5em;
    right: .5em;
    background: none;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    color: var(--encre);
}

.album-photos__lightbox-legende {
    text-align: center;
    margin: .6em 0 0;
    color: var(--texte-doux);
}

/* Trombinoscope (plugin CMS "Trombinoscope", ex: composition du CA/Bureau,
   retour utilisateur du 2026-07-11) */

.trombinoscope {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5em;
    margin-bottom: 1.2em;
}

.trombinoscope__carte {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 1.25em 1em;
    text-align: center;
    box-shadow: 0 1px 4px rgba(23, 20, 15, .08);
}

.trombinoscope__photo {
    display: block;
    width: 6.5em;
    height: 8.5em;
    margin: 0 auto .75em;
    border-radius: 50%/40%;
    object-fit: cover;
}

.trombinoscope__photo--vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fond-alt);
    color: var(--texte-doux);
}

.trombinoscope__nom {
    margin: 0;
    font-weight: 700;
    color: var(--encre);
}

.trombinoscope__fonction {
    margin: .2em 0 0;
    font-size: .9em;
    color: var(--texte-doux);
}

/* Page de contact : formulaire à gauche, carte Google Maps à droite
   (retour utilisateur du 2026-07-11, calqué sur l'ancien site usas72.fr). */

.contact-mise-en-page {
    display: flex;
    gap: 2.5em;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 1.5em;
}

.contact-formulaire {
    flex: 1 1 22em;
    min-width: 0;
}

.contact-carte {
    flex: 1 1 22em;
    min-width: 0;
    min-height: 22em;
}

.contact-carte iframe {
    width: 100%;
    height: 100%;
    min-height: 22em;
    border: none;
    border-radius: 8px;
}

.contact-formulaire label {
    display: block;
    font-weight: 700;
    color: var(--encre);
    margin: 1.1em 0 .35em;
}

.contact-formulaire label:first-child {
    margin-top: 0;
}

.contact-requis {
    color: var(--miel);
    margin-left: .2em;
}

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

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

.contact-formulaire button {
    margin-top: 1.5em;
}

/* --- Bandeau des partenaires (au-dessus du pied de page, retour
   utilisateur du 2026-07-11) --- */

.site-partenaires {
    background: var(--fond-alt);
    padding: 2.5em 1.75em;
}

.site-partenaires__contenu {
    max-width: 60em;
    margin: 0 auto;
}

.site-partenaires__groupe {
    margin-bottom: 2em;
}

.site-partenaires__groupe:last-child {
    margin-bottom: 0;
}

.site-partenaires__groupe h3 {
    margin: 0 0 1em;
}

.site-partenaires__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25em;
}

.site-partenaires__logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: .6em 1em;
}

.site-partenaires__logos img {
    display: block;
    max-width: 130px;
    max-height: 55px;
    width: auto;
    height: auto;
}

/* --- Pied de page --- */

.site-pied {
    background: var(--pied-fond);
    color: var(--pied-texte);
    padding: 2.5em 1.75em;
}

.site-pied__contenu {
    max-width: 60em;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2em 3em;
    align-items: flex-start;
}

.site-pied__bloc--marque {
    display: flex;
    align-items: center;
    gap: 1em;
}

.site-pied__logo {
    width: 3.25em;
    height: auto;
    flex: none;
}

.site-pied__bloc h4 {
    font-family: var(--police-titre);
    color: #fff;
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .5em;
}

.site-pied__bloc p {
    margin: 0 0 .25em;
    font-size: .92em;
}

.site-pied__bloc a {
    color: var(--miel);
    text-decoration: none;
}

.site-pied__bloc a:hover {
    text-decoration: underline;
}

.site-pied__contact-ligne {
    display: flex;
    align-items: center;
    gap: .5em;
}

.site-pied__contact-ligne a {
    display: flex;
    align-items: center;
    gap: .5em;
}

.site-pied__contact-ligne svg {
    flex: none;
    opacity: .85;
}

.site-pied__reseaux {
    display: flex;
    gap: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-pied__reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--pied-texte);
}

.site-pied__reseaux a:hover {
    background: var(--miel);
    color: #fff;
}

.site-pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5em 2em;
    margin-top: 2em;
    padding-top: 1.25em;
    border-top: 1px solid rgba(255,255,255,.12);
}

.site-pied__mentions {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8em;
}

.site-pied__mentions a {
    color: rgba(207,201,186,.7);
}

.site-pied__mentions a:hover {
    color: var(--miel);
}

.site-pied__signature {
    margin: 0;
    font-size: .8em;
    color: rgba(207,201,186,.7);
}

@media (max-width: 40em) {
    .site-hero { padding: 3rem 1.25em; }
    .site-hero h1 { font-size: 1.9rem; }
}

/* --- Retour en haut de page (voir base_public.html), retour utilisateur du 2026-07-11 --- */
.retour-haut {
    position: fixed;
    right: 1.5em;
    bottom: 1.5em;
    z-index: 90;
    width: 2.75em;
    height: 2.75em;
    border: none;
    border-radius: 50%;
    background: var(--miel);
    color: #fff;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(23, 20, 15, .3);
}

.retour-haut:hover {
    background: var(--miel-fonce);
}

/* --- Bandeau de consentement cookies (voir base_public.html) --- */
.bandeau-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .9rem 1.5rem;
    background: var(--encre);
    color: var(--pied-texte);
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}

.bandeau-cookies[hidden] {
    display: none;
}

.bandeau-cookies p {
    margin: 0;
    max-width: 60ch;
    font-size: .9rem;
}

.bandeau-cookies__actions {
    display: flex;
    flex-shrink: 0;
    gap: .6rem;
}

.bandeau-cookies button {
    flex-shrink: 0;
    padding: .5rem 1.2rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

/* "Tout refuser" à égalité visuelle avec "Tout accepter" (aucun des deux
   ne doit paraître pré-sélectionné ou moins légitime que l'autre). */
.bandeau-cookies__bouton-secondaire {
    background: transparent;
    color: var(--pied-texte);
    border: 1px solid var(--pied-texte);
}

.bandeau-cookies__bouton-secondaire:hover {
    background: rgba(255,255,255,.08);
}

.bandeau-cookies__bouton-principal {
    background: var(--miel);
    color: var(--encre);
}

.bandeau-cookies__bouton-principal:hover {
    background: var(--miel-fonce);
    color: #fff;
}

/* Indicateur d'étapes du tunnel d'adhésion (Panier/Inscription/Résumé/
   Paiement/Confirmation), voir templates/finance/_etapes_adhesion.html —
   même style que sa contrepartie dans espace_adherent.css (l'étape 1 est
   publique, les suivantes dans l'espace adhérent connecté). */
.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;
}