/* ============================================
   Territoires en Perspectives — feuille de style
   ============================================ */

:root {
  --bordeaux-dark: #3e052c;
  --bordeaux: #5c1c33;
  --bordeaux-light: #7d3350;
  --cream: #f7f2e6;
  --cream-alt: #efe4d0;
  --gold: #ab8a52;
  --gold-light: #cbae7c;
  --ink: #2b2118;
  --ink-soft: #6b5c4f;
  --white: #fffdf9;

  /* Texte clair "fixe", pour les blocs qui restent bordeaux/foncés en
     permanence (header, hero, footer, bloc "Adhérer", bouton panique,
     badges à fond fixe) quel que soit le thème clair/sombre. Contrairement
     à --cream, --cream-alt et --white, ces deux variables ne sont JAMAIS
     redéfinies dans le bloc dark mode ci-dessous : elles doivent rester
     claires dans les deux thèmes. */
  --on-dark: #f7f2e6;
  --on-dark-soft: #efe4d0;

  /* Couleur des titres (h1-h3, labels, nombres du dashboard) et des liens
     d'accent, affichés sur une surface qui s'inverse (page, carte,
     formulaire). En clair ce sont les bordeaux habituels ; en sombre ils
     passent à une teinte or claire, redéfinie dans le bloc dark mode. */
  --heading: var(--bordeaux-dark);
  --accent: var(--bordeaux);

  --serif-display: "Playfair Display", "Georgia", serif;
  --serif-body: "EB Garamond", "Iowan Old Style", "Georgia", serif;
  --serif-cormorant: "Cormorant Garamond", "Georgia", serif;

  --max-width: 1120px;
}

/* ---------- Mode sombre (variables) ----------
   Le bordeaux et l'or restent inchangés (ils fonctionnent déjà bien sur
   fond sombre, notamment l'en-tête et les boutons) : seuls les tons
   neutres (fond de page, cartes, texte) sont inversés. --heading et
   --accent passent à une teinte or claire pour rester lisibles sur les
   surfaces désormais sombres ; --on-dark / --on-dark-soft ne sont
   volontairement PAS redéfinies ici, car elles servent de texte clair sur
   des blocs qui sont déjà bordeaux en permanence dans les deux thèmes.
   Seules les VARIABLES sont redéfinies ici : les surcharges de classes
   précises (bandeaux d'état, badges...) sont regroupées tout en bas du
   fichier plutôt qu'ici. En CSS, à spécificité égale, c'est la dernière
   règle du fichier qui gagne, quelle que soit la media query — les
   mettre ici, avant les règles non conditionnelles qui redéfinissent ces
   mêmes classes plus loin (ex. .bloc-maintenance.actif, .dash-card.
   dash-card-alerte), les ferait perdre la cascade et resterait donc
   toujours affiché avec leurs couleurs claires fixes en mode sombre. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cream: #1a130e;
    --cream-alt: #2f251d;
    --white: #241b15;
    --ink: #f3e9dc;
    --ink-soft: #beac99;
    --heading: var(--gold-light);
    --accent: var(--gold-light);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Empêche un tableau large (beaucoup de colonnes) de casser la mise en
   page sur un écran étroit : le tableau garde sa largeur naturelle et
   défile horizontalement à l'intérieur de ce conteneur plutôt que de
   déborder de la page ou de tasser ses colonnes de façon illisible. */
.table-wrap {
  overflow-x: auto;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  font-family: var(--serif-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
}

/* ---------- Lien d'évitement ("Aller au contenu") ----------
   Invisible tant qu'il n'a pas le focus clavier (premier Tab en arrivant
   sur la page) : permet à une personne naviguant au clavier ou avec un
   lecteur d'écran de sauter directement le menu de navigation, plutôt que
   de devoir tabuler à travers tous les liens du menu à chaque page. */
.lien-evitement {
  position: absolute;
  top: -3rem;
  left: 0.75rem;
  z-index: 1000;
  background: var(--bordeaux-dark);
  color: var(--on-dark);
  padding: 0.6rem 1.1rem;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: top 0.15s ease;
}
.lien-evitement:focus {
  top: 0.75rem;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.15;
}

/* Charte (règle du 13/10/2026) : les titres de page sont toujours en Cormorant Garamond italique ;
   Playfair Display reste pour les intertitres (h2, h3), les chiffres et les boutons. */
h1,
.section-head-admin h2 {
  font-family: var(--serif-cormorant);
  font-style: italic;
}
/* Le Cormorant paraît plus petit que le Playfair à taille égale : titres de page un peu agrandis. */
.section-head h1,
.section-head-admin h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.1rem);
}

/* Texte réservé aux lecteurs d'écran (titre de section non affiché, par exemple). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bordeaux-dark);
  color: var(--on-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.75rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--on-dark);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
}

.brand-name {
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  row-gap: 0.5rem;
  gap: 2.4rem;
}

/* Menu public : espacement resserré sur ordinateur pour que le lien « Les jeunes »
   ne fasse pas passer le menu sur une deuxième ligne. */
@media (min-width: 721px) {
  .main-nav:not(.admin-nav) {
    gap: 1.5rem;
  }
}

/* Barre publique sur ordinateur : avec Agenda, Signer et Hôtel de Ville, le menu remplissait toute la
   largeur du contenu (1120 px) et collait au nom du mouvement. La barre prend un peu plus de large que le
   contenu, garde toujours 2 rem entre le nom et le menu, et se resserre sur les écrans moyens. */
.site-header:not(.admin-header) .wrap {
  column-gap: 2rem;
}
@media (min-width: 721px) {
  .site-header .wrap:has(> .main-nav:not(.admin-nav)) {
    max-width: 1320px;
  }
}
@media (min-width: 721px) and (max-width: 1279px) {
  .main-nav:not(.admin-nav) {
    column-gap: 1.1rem;
  }
  .main-nav:not(.admin-nav) a,
  .main-nav:not(.admin-nav) .nav-pub-bouton {
    font-size: 0.95rem;
  }
  .site-header .wrap:has(> .main-nav:not(.admin-nav)) .brand-name {
    font-size: 1.1rem;
  }
}

.main-nav a {
  text-decoration: none;
  font-size: 1rem;
  color: var(--on-dark-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--on-dark);
  border-color: var(--gold-light);
}

/* Page actuelle mise en évidence dans le menu admin : un simple soulignage
   or, cohérent avec l'état "survol" déjà utilisé, mais permanent. */
.main-nav.admin-nav a.lien-actif {
  color: var(--on-dark);
  border-color: var(--gold);
  font-weight: 600;
}

/* Page courante dans le menu public : même soulignage doré que le survol,
   mais permanent. Pas de changement de graisse : cela élargirait le lien et
   ferait bouger le reste du menu d'une page à l'autre. */
.main-nav a.lien-actif {
  color: var(--on-dark);
  border-color: var(--gold);
}

.nav-cta {
  background: var(--gold);
  color: var(--bordeaux-dark) !important;
  padding: 0.5rem 1.15rem;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none !important;
}

/* Bouton « Faire un don » de la nav : contour or, à côté du bouton plein « Adhérer ». */
.nav-don {
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  padding: calc(0.5rem - 1px) 1.05rem;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
}
.nav-don:hover,
.nav-don:focus-visible {
  background: var(--gold);
  color: var(--bordeaux-dark) !important;
}
/* « Faire un don » en bouton contour : texte or clair, comme dans le menu, pour le distinguer des autres boutons secondaires. */
.btn.btn-don {
  color: var(--gold-light);
  border-color: var(--gold);
  font-weight: 600;
}
.btn.btn-don:hover,
.btn.btn-don:focus-visible {
  color: var(--bordeaux-dark);
  background: var(--gold);
  border-color: var(--gold);
}
/* Bandeau du pied de page (« Prêt(e) à agir… ») : « Faire un don » se remplit d'or au survol, comme les autres boutons don. */
.pied-bandeau .btn-ghost:hover,
.pied-bandeau .btn-ghost:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bordeaux-dark);
}
/* Accueil : lien discret vers les actualités, sous les deux boutons (la section suit juste après). */
.hero-lien-actus {
  margin-top: 1.4rem;
}
.hero-lien-actus a {
  color: var(--on-dark-soft, #e8dfd0);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-light);
  font-size: 0.98rem;
}
.hero-lien-actus a:hover,
.hero-lien-actus a:focus-visible {
  color: var(--gold-light);
}
/* Menu public sur ordinateur : textes des liens et des deux boutons sur la même ligne de base
   (centrés boîte par boîte, le texte des boutons tombait plus bas que celui des liens). Les deux boutons
   ont exactement la même hauteur : même marge intérieure, même filet de 1 px. */
@media (min-width: 721px) {
  .main-nav:not(.admin-nav) {
    align-items: baseline;
  }
}
.main-nav a.nav-cta,
.main-nav a.nav-don {
  padding: 0.3rem 1.1rem;
  border: 1px solid var(--gold) !important;
}

/* Accueil, bloc « Adhérer » : les deux boutons côte à côte, l'un sous l'autre sur téléphone. */
.adherer-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* Nav de l'espace admin : beaucoup plus d'entrées que la nav publique.
   On la place sur sa propre ligne, sous la marque et les actions de compte,
   avec assez d'air pour ne jamais s'écraser. */
.admin-header {
  padding-bottom: 0.6rem;
}

.admin-header .admin-header-top {
  padding-top: 0.85rem;
  padding-bottom: 0.6rem;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.admin-header .wrap:last-child {
  padding-top: 0.7rem;
  padding-bottom: 0.15rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.main-nav.admin-nav {
  flex-wrap: wrap;
  row-gap: 0.6rem;
  column-gap: 1.6rem;
  justify-content: flex-start;
}

.main-nav.admin-nav a {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Sur téléphone, le menu admin se comporte comme le menu public : caché
   derrière un bouton ☰, affiché en menu déroulant au clic. On le positionne
   par rapport à l'en-tête admin (qui a deux lignes, contrairement à l'en-tête
   public) plutôt qu'avec un décalage fixe en pixels. */
@media (max-width: 720px) {
  .admin-header {
    position: relative;
  }

  /* La ligne du haut (marque, bouton "Mon compte", bouton ☰) tient sur une
     seule ligne en masquant le nom du mouvement à côté du logo (l'icône
     seule suffit à identifier la marque ici) : ça libère la place pour que
     le badge de compte et le bouton ☰ restent groupés à droite, sans
     laisser le badge de compte seul sur sa propre ligne. */
  .admin-header-top {
    flex-wrap: nowrap;
    gap: 0.6rem;
  }

  .admin-header-top .brand {
    order: 1;
    flex-shrink: 0;
  }

  .admin-header-top .brand-name {
    display: none;
  }

  .admin-header-actions {
    order: 2;
    margin-left: auto;
  }

  .admin-header-top .nav-toggle {
    order: 3;
  }

  /* Bloc "Bouton panique" (mode Cloudflare "Sous attaque") du tableau de
     bord : en desktop, le texte et le bouton sont côte à côte sur une
     ligne (space-between). Sur mobile, le bouton (grand, flex-shrink:0)
     ne trouve plus la place à côté du texte et se retrouve poussé de
     travers au lieu de s'aligner proprement sous le texte. On empile les
     deux verticalement et on fait prendre toute la largeur au bouton. */
  .cf-panique-mini {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .cf-panique-mini .libelle-mini {
    max-width: none;
  }

  .cf-panique-mini form {
    flex-shrink: 1;
  }

  .btn-panique {
    width: 100%;
    font-size: 1.15rem;
    padding: 0.85rem 1.2rem;
  }

  .main-nav.admin-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--bordeaux-dark);
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: 1.1rem 1.5rem 1.5rem;
    gap: 1rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
    box-shadow: 0 12px 20px rgba(0,0,0,0.18);
  }

  .main-nav.admin-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .admin-header .wrap:last-child {
    padding: 0;
    border-top: none;
  }
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--gold-light);
}

/* Bouton "Adhérer" transformé en petit menu déroulant natif (<details>,
   sans JavaScript nécessaire pour l'ouverture/fermeture) proposant deux
   choix : adhérer, ou faire un don. Prend exactement la même place que
   l'ancien bouton "Adhérer" seul — c'est ce qui permet au menu de tenir
   sur une ligne — et affiche le don comme une option rattachée à
   l'adhésion plutôt que comme un lien de plus dans le menu. */
.cta-details {
  position: relative;
}

.cta-details summary.nav-cta {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cta-details summary.nav-cta::-webkit-details-marker {
  display: none;
}

/* <summary> n'a pas d'anneau de focus cohérent d'un navigateur à l'autre
   par défaut (contrairement aux <a> du reste du menu, déjà stylées via
   .nav-cta:focus-visible ci-dessus) : on désactive l'anneau natif du
   navigateur et on le remplace par le même contour or utilisé ailleurs
   sur le site pour les champs de formulaire, afin que le focus clavier
   soit visuellement identique quel que soit l'élément. */
.cta-details summary.nav-cta:focus {
  outline: none;
}

.cta-details summary.nav-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Flèche dessinée en CSS pur plutôt qu'avec le caractère "▾" : ce
   caractère n'est pas toujours présent dans les polices du site
   (Cormorant Garamond / EB Garamond / Playfair Display) et peut s'afficher
   comme un simple point selon le navigateur — même correctif que pour les
   menus déroulants de l'admin (voir nav-groupes.css). */
.cta-details summary.nav-cta .fleche-cta {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  font-size: 0;
  line-height: 0;
  vertical-align: -1px;
  transition: transform 0.15s ease;
}

.cta-details summary.nav-cta .fleche-cta::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.cta-details[open] summary.nav-cta .fleche-cta {
  transform: rotate(180deg);
}

.cta-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  overflow: hidden;
  z-index: 60;
}

.cta-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}

.cta-menu a:hover,
.cta-menu a:focus-visible {
  background: var(--cream-alt);
  color: var(--heading);
}

/* Menu groupé « Le mouvement » du header public : regroupe Présentation,
   Le président, Le bureau, Les jeunes et Nos soutiens sous un seul libellé
   pour que la barre respire. S'ouvre au clic (nav-toggle.js) et, sur les
   appareils avec souris, au survol. */
.nav-pub {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-pub-bouton {
  font: inherit;
  font-size: 1rem;
  color: var(--on-dark-soft);
  background: none;
  border: none;
  /* Même boîte que les liens voisins (.main-nav a) pour un alignement
     vertical identique. */
  border-bottom: 1px solid transparent;
  /* La base commune des boutons arrondit les coins (3px) : sans cette
     remise à zéro, les extrémités du trait du bas apparaissent courbées. */
  border-radius: 0;
  padding: 0 0 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-pub-bouton:hover,
.nav-pub-bouton:focus-visible,
.nav-pub-bouton[aria-expanded="true"],
.nav-pub-bouton.groupe-actif {
  color: var(--on-dark);
  border-color: var(--gold-light);
  /* La base commune des boutons (:where(button):hover plus bas) donne un
     fond crème au survol : on le neutralise ici. */
  background: none;
}

.nav-pub-bouton.groupe-actif {
  border-color: var(--gold);
}

/* Flèche en CSS pur (le caractère ▾ n'existe pas dans toutes les polices). */
.nav-pub-bouton .fleche {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  transition: transform 0.15s ease;
}

.nav-pub-bouton .fleche::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.nav-pub-bouton[aria-expanded="true"] .fleche {
  transform: rotate(180deg);
}

.nav-pub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  overflow: hidden;
  z-index: 60;
}

/* Le pont invisible entre le bouton et le menu est porté par .nav-pub::after (voir plus bas) : placé dans le
   menu lui-même (qui a overflow:hidden), il était rogné et le menu se refermait en traversant l'espace. */

.nav-pub-menu.ouvert {
  display: block;
}

@media (hover: hover) and (min-width: 1081px) {
  .nav-pub:hover .nav-pub-menu,
  .nav-pub:has(:focus-visible) .nav-pub-menu {
    display: block;
  }
  /* Pont invisible sous le bouton : tant que la souris traverse l'espace avant le menu, le survol continue. */
  .nav-pub:hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    height: 1.2rem;
  }
}

.main-nav .nav-pub-menu a {
  display: block;
  padding: 0.65rem 1.1rem;
  color: var(--ink);
  font-size: 0.95rem;
  border-bottom: none;
}

.main-nav .nav-pub-menu a:hover,
.main-nav .nav-pub-menu a:focus-visible {
  background: var(--cream-alt);
  color: var(--heading);
}

.main-nav .nav-pub-menu a.lien-actif {
  background: var(--cream-alt);
  color: var(--heading);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--on-dark);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}

/* La base commune des boutons (:where(button):hover plus bas) donne un fond
   crème au survol. Sur iPhone, le survol reste actif après le toucher : le
   bouton du menu devenait un carré crème avec l'icône crème, invisible tant
   que le menu était ouvert. On garde le fond transparent. */
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle[aria-expanded="true"] {
  background: none;
  color: var(--on-dark);
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(to bottom, var(--bordeaux-dark) 0%, var(--bordeaux) 100%);
  color: var(--on-dark);
  padding: 5rem 0 6.5rem;
  text-align: center;
  position: relative;
}

.hero-mark {
  /* Arbre crème détouré : pas de carré de fond visible sur le dégradé bordeaux. */
  display: block;
  width: auto;
  height: 76px;
  margin: 0 auto 1.6rem;
}

.hero h1 {
  color: var(--on-dark);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-style: italic;
  font-family: var(--serif-cormorant);
}

.hero .tagline {
  /* Charte : slogan en Cormorant Garamond italique 500. */
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--gold-light);
  margin-top: 0.85rem;
}

.hero p.lede {
  max-width: 640px;
  margin: 1.75rem auto 0;
  font-size: 1.15rem;
  color: var(--on-dark-soft);
}

.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  font-family: var(--serif-body);
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--bordeaux-dark);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--gold-light);
}

.btn-ghost {
  border-color: var(--gold-light);
  color: var(--on-dark);
  /* Transparent explicite : sur un <button> (et non un lien), le fond gris
     par défaut du navigateur apparaissait sur les pages claires de l'admin
     (Mon compte, Sauvegarde, Utilisateurs...). */
  background: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255,255,255,0.08);
}

/* Dans l'admin (fond crème), .btn-ghost garde un texte bordeaux : sans cela, le texte crème prévu
   pour les fonds bordeaux du site public devenait invisible (ex. « Afficher sur l'accueil »). */
.admin-section .btn-ghost {
  color: var(--accent);
  border-color: var(--gold);
}
.admin-section .btn-ghost:hover,
.admin-section .btn-ghost:focus-visible {
  background: var(--gold);
  color: var(--bordeaux-dark);
}

.btn-dark {
  background: var(--bordeaux-dark);
  color: var(--on-dark);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--bordeaux);
}

/* ---------- Sections generic ---------- */

section {
  padding: 5rem 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
}

.rule {
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin: 1.1rem auto 0;
}

.section-head p {
  color: var(--ink-soft);
  margin-top: 1rem;
}

/* ---------- Actualités ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.news-card {
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-card .thumb {
  height: 160px;
  background: linear-gradient(135deg, var(--bordeaux-light), var(--bordeaux));
  position: relative;
}

.video-badge {
  position: absolute;
  bottom: 0.65rem;
  left: 0.65rem;
  background: rgba(0,0,0,0.65);
  color: var(--on-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Intégration responsive (16:9) d'une vidéo YouTube */
.video-embed-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.video-embed-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-card .body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-date {
  font-size: 0.85rem;
  /* --gold en texte sur fond clair ne passe pas le contraste minimum
     (environ 3,1:1, WCAG AA en demande 4,5:1 pour du texte de cette
     taille) : --accent est la même teinte "or" en mode sombre, mais
     redevient un bordeaux bien plus lisible en mode clair. */
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.news-card h3 {
  font-size: 1.25rem;
  margin-top: 0.5rem;
}

.news-card p {
  color: var(--ink-soft);
  margin-top: 0.65rem;
  font-size: 1rem;
  flex: 1;
}

.news-card .read-more {
  margin-top: 1rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--gold);
  align-self: flex-start;
}

/* ---------- Galerie teaser ---------- */

.gallery-teaser {
  background: var(--white);
}

.gallery-teaser .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.gallery-teaser h2 {
  text-align: left;
}

.gallery-teaser .section-head {
  text-align: left;
  margin: 0;
  max-width: none;
}

.gallery-teaser .rule {
  margin-left: 0;
}

.gallery-teaser .section-head + .btn {
  margin-top: 1.5rem;
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 90px);
  gap: 0.5rem;
}

.gallery-mosaic div {
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-light));
  border-radius: 3px;
}

.gallery-mosaic div:nth-child(2) { background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.gallery-mosaic div:nth-child(4) { background: linear-gradient(135deg, var(--bordeaux-dark), var(--bordeaux)); }
.gallery-mosaic div:nth-child(6) { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }

/* ---------- Adhérer ---------- */

.join {
  background: var(--bordeaux);
  color: var(--on-dark);
  text-align: center;
}

.join h2 {
  color: var(--on-dark);
}

.join .section-head p {
  color: var(--on-dark-soft);
}

.join-reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2.5rem 0 3rem;
  text-align: left;
}

.join-reasons h3 {
  color: var(--gold-light);
  font-size: 1.1rem;
}

.join-reasons p {
  color: var(--on-dark-soft);
  font-size: 0.98rem;
  margin-top: 0.5rem;
}

/* ---------- Président ---------- */

#president { background: var(--white); }

#president .wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Portrait rond, cadré sur le visage, un seul filet doré (accueil uniquement ; president.php a son propre style). */
#president .president-photo {
  width: 300px;
  height: 300px;
  justify-self: center;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold);
  background: var(--cream-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-align: center;
}

#president .president-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* Sur-titre au-dessus d'un titre (charte : Cormorant Garamond italique). Couleur --accent et non
   --gold : l'or en texte sur crème ne passe pas le contraste minimum (voir .news-date ci-dessus). */
.kicker {
  display: block;
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.president-text h2 {
  margin-top: 0.35rem;
}

.president-titles {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}

.president-titles span {
  display: block;
}

.president-text p.bio {
  margin-top: 1.5rem;
  color: var(--ink);
}

/* ---------- Contact : deux cartes (formulaire / coordonnées + newsletter) ---------- */

.contact {
  background: var(--cream-alt);
}

.contact-cartes {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
}

/* Carte de gauche : le formulaire (la classe .contact-form reste partagée
   avec d'autres pages, d'où le préfixe .contact). */
.contact .contact-form {
  padding: 2.25rem 2.5rem;
  border-top: 4px solid var(--gold);
  box-shadow: 0 14px 40px rgba(62, 5, 44, 0.10);
  border-radius: 8px;
}

.contact .contact-form h3,
.contact-carte-infos h3 {
  font-size: 1.5rem;
}

.carte-sous-titre {
  color: var(--ink-soft);
  margin: 0.35rem 0 1.4rem;
}

.contact .contact-form .form-note { color: var(--ink-soft); }

/* Carte de droite : bordeaux foncé, coordonnées puis newsletter. */
.contact-carte-infos {
  background: var(--bordeaux-dark);
  color: var(--on-dark);
  border-radius: 8px;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 14px 40px rgba(62, 5, 44, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact-carte-infos h3 { color: var(--on-dark); }
/* Sans le bloc newsletter, la carte ne contient que deux lignes : elle ne s'étire pas sur la hauteur du formulaire. */
.contact-carte-infos.sans-newsletter { align-self: start; }

.contact-info .info-ligne {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.3rem;
  line-height: 1.4;
  word-break: break-word;
}

.info-icone {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold-light);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-libelle {
  display: block;
  color: var(--gold-light);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-newsletter {
  border-top: 1px solid rgba(203, 174, 124, 0.35);
  padding-top: 1.75rem;
}

.contact-newsletter .intro {
  margin: 0.4rem 0 1rem;
  color: var(--on-dark-soft);
  font-size: 0.95rem;
}

.contact-newsletter .ligne {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.contact-newsletter .ligne input {
  flex: 1;
  min-width: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(203, 174, 124, 0.5);
  color: var(--on-dark);
}

.contact-newsletter .ligne input::placeholder { color: rgba(247, 242, 230, 0.6); }

.contact-newsletter .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--on-dark-soft);
}

.contact-newsletter .consent input {
  width: auto;
  margin-top: 0.2rem;
}

.contact-newsletter .btn {
  margin-top: 0.9rem;
}

.contact-form {
  background: var(--white);
  padding: 2rem;
  border-radius: 4px;
  border: 1px solid #e4d8c2;
}

.form-row {
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.35rem;
}

/* Les cases à cocher/boutons radio sont exclus : la règle "width: 100%"
   ci-dessous est prévue pour les champs texte/date/etc, pas pour une case
   à cocher, qui se retrouverait alors étirée sur toute la largeur de la
   ligne (visible ex. sur admin-adherent-modifier.php, la case
   "communications du mouvement" au lieu d'être toute petite). */
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row textarea {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d8cab0;
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
}

.form-row select {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d8cab0;
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* Message d'erreur d'un formulaire public (don, adhésion, billetterie) : même encadré partout. */
.form-note.form-erreur-bloc {
  color: #8f2a2a;
  background: #fbe7e7;
  border-left: 3px solid #b3261e;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bordeaux-dark);
  color: var(--on-dark-soft);
  padding: 3rem 0 2rem;
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.footer-brand {
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--on-dark);
  order: 1;
  flex-shrink: 0;
}

.footer-nav {
  display: flex;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  order: 2;
}

.social-links {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  order: 3;
  margin-left: auto;
  flex-shrink: 0;
}

.footer-nav a {
  text-decoration: none;
  color: var(--on-dark-soft);
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--gold-light);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  order: 4;
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem;
}

.footer-legal a {
  text-decoration: none;
  color: rgba(239, 228, 208, 0.6);
}

.footer-legal a:hover {
  color: var(--gold-light);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--on-dark-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.social-links a:hover {
  background: var(--gold);
  color: var(--bordeaux-dark);
}

.footer-bottom {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  text-align: center;
}

/* Footer compact (footer.php) : une seule bande — marque, réseaux sociaux
   et liens légaux — puis le copyright. Le menu n'y est plus répété : le
   header reste affiché en permanence (collant) et porte déjà la navigation.
   Réservé à .site-footer-compact pour ne pas toucher aux autres footers
   (espace adhérent, connexion, pages simples). */
.site-footer.site-footer-compact {
  padding: 1.75rem 0 1.5rem;
}

.site-footer-compact .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.site-footer-compact .footer-brand {
  order: 0;
}

.site-footer-compact .social-links {
  order: 0;
  margin-left: 0;
}

.site-footer-compact .footer-legal {
  order: 0;
  flex-basis: auto;
  width: auto;
  margin: 0;
  padding: 0;
  border-top: none;
  gap: 0.35rem 1.6rem;
  font-size: 0.9rem;
}

.site-footer-compact .footer-legal a {
  color: rgba(239, 228, 208, 0.8);
}

.site-footer-compact .footer-legal a:hover {
  color: var(--gold-light);
}

.site-footer-compact .footer-bottom {
  flex-basis: 100%;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  text-align: left;
  color: rgba(239, 228, 208, 0.6);
}

@media (max-width: 720px) {
  .site-footer-compact .wrap {
    justify-content: flex-start;
  }
  .site-footer-compact .social-links {
    margin-left: auto;
  }
  .site-footer-compact .footer-legal {
    flex-basis: 100%;
  }
}

.admin-footer-credit {
  margin-top: 2rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.78rem;
  color: var(--on-dark-soft);
  background: var(--bordeaux-dark);
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .news-grid { grid-template-columns: 1fr; }
  .gallery-teaser .wrap,
  #president .wrap,
  .contact-cartes {
    grid-template-columns: 1fr;
  }
  .contact .contact-form,
  .contact-carte-infos { padding: 1.75rem 1.4rem; }
  #president .president-text { text-align: center; }
  .join-reasons { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--bordeaux-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 1.75rem;
    gap: 1.1rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-toggle {
    display: block;
  }

  .nav-cta {
    align-self: flex-start;
  }

  /* Menu long (groupe déplié + entrées) : défilement plutôt que débordement
     hors de l'écran. */
  .main-nav {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Le groupe « Le mouvement » se déplie en place, en liste indentée, au
     lieu d'une bulle flottante. */
  .nav-pub {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-pub-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.7rem;
    background: transparent;
    border: none;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
  }

  .nav-pub-menu::before {
    display: none;
  }

  .main-nav .nav-pub-menu a {
    color: var(--on-dark-soft);
    padding: 0.5rem 0 0.5rem 1rem;
  }

  .main-nav .nav-pub-menu a:hover,
  .main-nav .nav-pub-menu a:focus-visible,
  .main-nav .nav-pub-menu a.lien-actif {
    background: transparent;
    color: var(--on-dark);
  }

  /* Le menu "Adhérer / Faire un don" est calé à droite du bouton en
     desktop (le bouton est tout à droite de la barre, donc le menu
     déborderait à droite sinon). En mobile, le bouton est collé à gauche
     du menu : caler le menu déroulant à gauche à la place évite qu'il
     déborde hors de l'écran (et devienne illisible) côté gauche. */
  .cta-menu {
    left: 0;
    right: auto;
  }

  section {
    padding: 3.5rem 0;
  }

  .hero {
    padding: 3.5rem 0 4.5rem;
  }
}

/* Tablette (721 à 1080 px) : le menu public complet ne tient pas sur une ligne, il s'ouvre par ☰ comme sur
   téléphone. Le reste de la mise en page tablette ne change pas ; l'en-tête de l'admin non plus. */
@media (min-width: 721px) and (max-width: 1080px) {
  .site-header:not(.admin-header) .main-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--bordeaux-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 1.75rem;
    gap: 1.1rem;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .site-header:not(.admin-header) .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-header:not(.admin-header) .nav-toggle { display: block; }
  .site-header:not(.admin-header) .nav-cta { align-self: flex-start; }
  .site-header:not(.admin-header) .main-nav a,
  .site-header:not(.admin-header) .main-nav .nav-pub-bouton { font-size: 1rem; }
  .site-header:not(.admin-header) .nav-pub { flex-direction: column; align-items: flex-start; width: 100%; }
  .site-header:not(.admin-header) .nav-pub-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.7rem;
    background: transparent;
    border: none;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
  }
  .site-header:not(.admin-header) .nav-pub-menu::before { display: none; }
  .site-header:not(.admin-header) .main-nav .nav-pub-menu a { color: var(--on-dark-soft); padding: 0.5rem 0 0.5rem 1rem; }
  .site-header:not(.admin-header) .main-nav .nav-pub-menu a:hover,
  .site-header:not(.admin-header) .main-nav .nav-pub-menu a:focus-visible,
  .site-header:not(.admin-header) .main-nav .nav-pub-menu a.lien-actif { background: transparent; color: var(--on-dark); }
  .site-header:not(.admin-header) .cta-menu { left: 0; right: auto; }
}

/* ---------- Page article (article.php) ---------- */

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--gold);
}

.article-page .wrap {
  max-width: 780px;
}

.article-full h1 {
  margin-top: 0.5rem;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.article-image {
  margin: 2rem 0;
  border-radius: 4px;
  overflow: hidden;
}

.article-image img {
  display: block;
  width: 100%;
  /* Redimensionnement automatique : une photo ou miniature verticale (reel, story) ne prend plus tout l'écran,
     elle est centrée à la hauteur maximale, sans être rognée ni déformée. */
  max-height: min(70vh, 600px);
  object-fit: contain;
}
.article-image video {
  max-height: min(75vh, 640px);
  background: #000;
}

.article-body {
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: 1.1rem;
}

/* ---------- Connexion / création de compte ---------- */

.auth-section .wrap-narrow {
  /* 560 px : « Espace d'administration » tient sur une ligne sur ordinateur. */
  max-width: 560px;
}

/* ---------- Administration ---------- */

.admin-section .wrap {
  max-width: 1200px;
}
/* Titre de page remonté sur toutes les pages d'administration (le padding global des sections est fait pour le site public) */
.admin-section {
  padding: 1.5rem 0 2.5rem;
}
/* Même largeur de contenu sur toutes les pages d'administration */
section.admin-section > .wrap {
  max-width: 1120px !important; /* = largeur de l'en-tête : le titre s'aligne sur le logo */
}
/* Pied de page collé en bas de la fenêtre, même sur les pages courtes */
body:has(> .admin-footer-credit) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(> .admin-footer-credit) > .admin-footer-credit {
  margin-top: auto;
}

.admin-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.maintenance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: #eef6ee;
  border: 1px solid #bfdcc0;
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.maintenance-banner strong {
  color: #2a7d46;
  font-size: 1.05rem;
}

.maintenance-banner p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 46ch;
}

.maintenance-banner.actif {
  background: #fbeaea;
  border-color: #e3b3b3;
}

.maintenance-banner.actif strong {
  color: #a33;
}

.admin-form-col h3,
.admin-list-col h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.admin-list {
  list-style: none;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 4px;
  overflow: hidden;
}

.admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cream-alt);
  flex-wrap: wrap;
}

.admin-list-item:last-child {
  border-bottom: none;
}

.admin-list-item strong {
  display: block;
  color: var(--heading);
  font-family: var(--serif-display);
}

.admin-list-actions {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.admin-list-actions a {
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--gold);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #a33;
  border-bottom: 1px solid #a33;
  cursor: pointer;
}

@media (max-width: 880px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tableau de bord admin (déplacé depuis admin-dashboard.php) ---------- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}
/* Évite la carte orpheline sur la dernière ligne (5 + 1) : 6 cartes = 3 × 2 ;
   4 cartes = 2 × 2 dès que la largeur ne permet plus de les mettre sur une ligne. */
@media (min-width: 720px) {
  .dash-grid:has(> .dash-card:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 720px) and (max-width: 1100px) {
  .dash-grid:has(> .dash-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dash-card {
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  position: relative;
}
.dash-card a.dash-card-link {
  position: absolute;
  inset: 0;
  border-radius: 4px;
}
.dash-card .nombre {
  font-family: var(--serif-display);
  font-size: 2.1rem;
  color: var(--heading);
  display: block;
  line-height: 1.1;
}
.dash-card .libelle {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.dash-card .detail {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  border-top: 1px solid var(--cream-alt);
  padding-top: 0.5rem;
}
.dash-card .alerte {
  color: #a33;
}
.dash-card-cloudflare .detail {
  position: relative;
  z-index: 1;
}
.dash-card-cloudflare form {
  display: inline;
}
.dash-card-cloudflare button.lien-discret {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent);
  border-bottom: 1px solid var(--gold);
  cursor: pointer;
}
.dash-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1rem;
}
@media (max-width: 880px) {
  .dash-columns { grid-template-columns: 1fr; }
}
.dash-columns h3 {
  color: var(--heading);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.dash-columns-seule { grid-template-columns: 1fr; }
.dash-voir-tout { float: right; font-size: 0.8rem; font-weight: normal; color: var(--ink-soft); }
.actu-minis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.actu-mini {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cream-alt);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.actu-mini:hover, .actu-mini:focus-visible { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.actu-mini-vignette {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--cream-alt) center / cover no-repeat;
}
.actu-mini-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--ink-soft); }
.actu-mini-video { position: absolute; left: .4rem; bottom: .4rem; background: rgba(0,0,0,.7); color: #fff; font-size: .7rem; padding: .1rem .4rem; border-radius: 3px; }
.actu-mini-texte { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .7rem .7rem; }
.actu-mini-date { font-size: .75rem; color: var(--ink-soft); }
.actu-mini-titre {
  font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--heading);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
ul.activite-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.activite-liste li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--cream-alt);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
}
ul.activite-liste li:last-child { border-bottom: none; }
ul.activite-liste .quand {
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}
.badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 0.4rem;
}
.badge-paye { background: #d3ebd9; color: #1b5530; }
.badge-attente { background: #f3dcae; color: #634405; }
.badge-on { background: #d3ebd9; color: #1b5530; }
.badge-off { background: var(--cream-alt); color: var(--ink); }

.cf-panique-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 6px;
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.cf-panique-mini.actif {
  background: #fbeaea;
  border-color: #d98787;
}
.cf-panique-mini .libelle-mini {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 520px;
}
.cf-panique-mini .libelle-mini strong {
  color: #a33;
}
.cf-panique-mini form {
  margin: 0;
  flex-shrink: 0;
}
.btn-mini {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  border: 1px solid #a33;
  background: none;
  color: #a33;
  cursor: pointer;
  font-family: inherit;
}
.btn-mini.actif {
  background: #a33;
  color: var(--on-dark);
}
.btn-mini:hover { opacity: 0.85; }

.bloc-maintenance {
  border: 1px solid var(--cream-alt);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  background: var(--white);
}
.bloc-maintenance.actif {
  background: #fdf1e9;
  border-color: #e8b98a;
}
.maintenance-ligne {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.interrupteur {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.interrupteur input { opacity: 0; width: 0; height: 0; }
.glissiere {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #b23b3b;
  transition: 0.2s;
  border-radius: 26px;
}
.glissiere::before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background-color: var(--white);
  transition: 0.2s;
  border-radius: 50%;
}
.interrupteur input:checked + .glissiere {
  background-color: #2f8f52;
}
.interrupteur input:checked + .glissiere::before {
  transform: translateX(20px);
}
.etat-maintenance-label {
  font-weight: 600;
  color: var(--ink);
}
.etat-maintenance-detail {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.maintenance-message-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-alt);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.maintenance-message-form textarea {
  flex: 1;
  min-width: 260px;
  min-height: 70px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d8cab0;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

/* Bloc "détails" repliable pour le message et le compte à rebours de maintenance */
.bloc-maintenance-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-alt);
}
.bloc-maintenance-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.bloc-maintenance-details summary::-webkit-details-marker { display: none; }
.bloc-maintenance-details summary::after {
  content: "▾";
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.bloc-maintenance-details[open] summary::after {
  transform: rotate(180deg);
}
.bloc-maintenance-details .maintenance-message-form:first-of-type {
  margin-top: 1rem;
  padding-top: 0;
  border-top: none;
}

/* ---------- Messages de retour (succès / erreur) ---------- */

.message-succes {
  color: #2a7d46;
}

.message-erreur {
  color: #a33;
}

/* ---------- En-tête de section admin aligné à gauche ---------- */

.section-head-admin {
  text-align: left;
  margin-left: 0;
  max-width: none;
}

.section-head-admin .rule {
  margin-left: 0;
}

/* ---------- Bouton "enregistrer" discret des formulaires admin ---------- */

.btn-ghost-admin {
  color: var(--accent);
  border-color: var(--gold);
  align-self: flex-start;
}

/* ---------- Champ pleine largeur dans un formulaire flex ---------- */

.champ-flexible {
  flex: 1;
  min-width: 260px;
}

.label-champ {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}

.champ-date {
  padding: 0.55rem 0.7rem;
  border: 1px solid #d8cab0;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.92rem;
}

/* Champ + bouton « enregistrer » sur une même ligne, même largeur de bouton que le formulaire du message (maintenance). */
.ligne-champ-bouton {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.ligne-champ-bouton .tep-dp-champ {
  flex: 1 1 13rem;
  min-width: 0;
}
.ligne-champ-bouton .champ-date {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ligne-champ-bouton .btn-ghost-admin {
  flex: 1 1 17rem;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  align-self: stretch;
}
.maintenance-message-form .btn-ghost-admin {
  flex: 0 0 17rem;
  white-space: nowrap;
  text-align: center;
}

.texte-aide {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.texte-vide {
  color: var(--ink-soft);
}

/* ---------- Bouton panique (mode Cloudflare "Sous attaque") ---------- */

.btn-panique {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.9rem 2.1rem;
  border-radius: 6px;
  border: 2px solid #7a0000;
  background: #d10000;
  color: var(--on-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 0 #7a0000;
}

.cf-panique-explication {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}

.btn-panique:hover {
  background: #ff1a1a;
  opacity: 1;
}

.btn-panique:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7a0000;
}

.btn-panique.actif {
  background: #7a0000;
  border-color: #4d0000;
}

/* ---------- Bandeau repliable (maintenance, panique...) quand tout va bien ---------- */

.bloc-repliable-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.bloc-repliable-resume .etat-ok {
  color: #2a7d46;
  font-weight: 600;
}

.bloc-repliable-resume .chevron {
  color: var(--ink-soft);
  transition: transform 0.15s ease;
  font-size: 0.85rem;
}

.bloc-repliable-resume[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.bloc-repliable-contenu {
  display: none;
  padding: 0 1.5rem 1.25rem;
}

.bloc-repliable-contenu.ouvert {
  display: block;
}

/* ---------- Groupes de cartes du dashboard, avec priorité visuelle ---------- */

.dash-groupe {
  margin-bottom: 2rem;
}

.dash-groupe-titre {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.dash-card-prioritaire {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-light);
}

.dash-card.dash-card-alerte {
  border-color: #d98787;
  background: #fdf7f7;
}

/* ---------- Modale de confirmation ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.modal-overlay.ouverte {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--white);
  border-radius: 6px;
  padding: 1.75rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  transform: translateY(-12px);
  transition: transform 0.15s ease;
}

.modal-overlay.ouverte .modal-box {
  transform: translateY(0);
}

.modal-box h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  color: var(--heading);
}

.modal-box p {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.modal-actions .btn-annuler {
  background: none;
  border: 1px solid #d8cab0;
  color: var(--ink-soft);
  padding: 0.55rem 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
}

.modal-actions .btn-confirmer {
  background: #a33;
  color: var(--on-dark);
  border: none;
  padding: 0.55rem 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}

.modal-actions .btn-confirmer:hover { background: #c13d3d; }
.modal-actions .btn-annuler:hover { background: var(--cream); }

/* ---------- Mode sombre (surcharges de classes) ----------
   Placé volontairement tout en bas du fichier : les couleurs sémantiques
   (succès / attente / erreur, bandeaux d'état) sont écrites plus haut avec
   des teintes claires FIXES (ex. .bloc-maintenance.actif { background:
   #fdf1e9 }), pas des variables — pour les surcharger en mode sombre à
   spécificité égale, cette règle doit être postérieure dans le fichier,
   sans quoi la règle claire non conditionnelle l'emporterait quand même. */
@media (prefers-color-scheme: dark) {
  .maintenance-banner {
    background: rgba(42, 125, 70, 0.16);
    border-color: rgba(111, 207, 143, 0.35);
  }
  .maintenance-banner strong { color: #7fd39a; }
  .maintenance-banner.actif {
    background: rgba(163, 51, 51, 0.18);
    border-color: rgba(224, 138, 138, 0.4);
  }
  .maintenance-banner.actif strong { color: #e08a8a; }

  .badge-paye, .badge-on { background: rgba(42, 125, 70, 0.22); color: #7fd39a; }
  .badge-attente { background: rgba(138, 100, 21, 0.25); color: #e0b96a; }

  .cf-panique-mini.actif {
    background: rgba(163, 51, 51, 0.18);
    border-color: rgba(217, 135, 135, 0.4);
  }
  .cf-panique-mini .libelle-mini strong { color: #e08a8a; }

  .bloc-maintenance.actif {
    background: rgba(217, 141, 66, 0.16);
    border-color: rgba(232, 185, 138, 0.4);
  }

  .message-succes { color: #7fd39a; }
  .message-erreur { color: #e08a8a; }

  .dash-card.dash-card-alerte {
    background: rgba(163, 51, 51, 0.1);
    border-color: rgba(217, 135, 135, 0.4);
  }
}

/* Champs de saisie hors ".form-row" (filtres, réglages, petits formulaires
   d'administration) : même apparence que le reste du site. :where() garde
   une spécificité nulle, donc toute règle plus précise garde la priorité. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]), select, textarea) {
  font-family: var(--serif-body);
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #d8cab0;
  border-radius: 3px;
  background-color: var(--cream);
  color: var(--ink);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea):focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
/* Évite le fond bleu du remplissage automatique du navigateur */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cream) inset;
  -webkit-text-fill-color: var(--ink);
}

/* ---------- Champ « fichier » aux couleurs du site (champ-fichier.js) ---------- */
.champ-fichier {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.champ-fichier-bouton {
  font-family: var(--serif-body);
  font-size: 0.95rem;
  padding: 0.5rem 1.1rem;
  background: var(--white, #fff);
  color: var(--accent, #5a1038);
  border: 1px solid var(--gold);
  border-radius: 3px;
  cursor: pointer;
}
.champ-fichier-bouton:hover,
.champ-fichier-bouton:focus-visible {
  background: var(--cream-alt);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.champ-fichier-nom {
  font-size: 0.9rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.champ-fichier-nom.choisi { color: var(--ink); }
.champ-fichier-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Barre de progression d'envoi (envoi-formulaire.js) ---------- */
.envoi-progression-fond {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(58, 2, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.envoi-progression {
  background: var(--white, #fff);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.envoi-progression-titre { font-family: var(--serif-display, inherit); font-size: 1.15rem; color: var(--heading, #3a0228); }
.envoi-progression-piste {
  height: 12px;
  background: var(--cream-alt);
  border-radius: 999px;
  overflow: hidden;
  margin: 1rem 0 0.6rem;
}
.envoi-progression-barre {
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.envoi-progression-detail { font-size: 0.9rem; color: var(--ink); }
.envoi-progression-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

/* ---------- Boutons : aucun bouton « d'origine » du navigateur ----------
   Base commune à tout <button> / bouton de formulaire. :where() garde une
   spécificité nulle : .btn, .btn-primary, .link-button, etc. gardent la
   priorité quand ils sont utilisés. */
:where(button, input[type="submit"], input[type="button"], input[type="reset"]) {
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 0.5rem 1.1rem;
  background-color: var(--white, #fff);
  color: var(--accent, #5a1038);
  border: 1px solid var(--gold);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):hover {
  background-color: var(--cream-alt);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Interrupteur vert / rouge (ouvert-activé = vert, fermé-désactivé = rouge) ---------- */
.interrupteur-vr {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
  margin: 0;
}
.interrupteur-vr input { opacity: 0; width: 0; height: 0; position: absolute; }
.glissiere-vr {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #b23b3b;
  border-radius: 30px;
  transition: background-color 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.glissiere-vr::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.interrupteur-vr input:checked + .glissiere-vr { background-color: #2f8f52; }
.interrupteur-vr input:checked + .glissiere-vr::before { transform: translateX(26px); }
.interrupteur-vr input:focus-visible + .glissiere-vr { outline: 2px solid var(--gold); outline-offset: 2px; }
.ligne-interrupteur {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--cream-alt);
}
.ligne-interrupteur:first-of-type { border-top: 0; }
.ligne-interrupteur form { margin: 0; }
.ligne-interrupteur .ligne-titre { font-weight: 600; color: var(--heading); }
.ligne-interrupteur .ligne-detail { font-size: 0.85rem; color: var(--ink-soft); margin: 0.2rem 0 0; }
.pastille-etat {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.pastille-etat.on { background: #2f8f52; }
.pastille-etat.off { background: #b23b3b; }

/* ---------- Liste déroulante avec recherche (select-recherche.js) ---------- */
.sr-boite { position: relative; min-width: 16rem; }
.sr-champ { width: 100%; box-sizing: border-box; padding-right: 2rem !important; }
.sr-champ.choisi { font-weight: 600; }
.sr-effacer {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  padding: 0 0.45rem !important; border: 0 !important; background: transparent !important;
  color: var(--ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.sr-liste {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: 0.25rem; list-style: none;
  max-height: 16rem; overflow-y: auto;
  background: var(--white); border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sr-liste li { padding: 0.45rem 0.65rem; border-radius: 3px; cursor: pointer; font-size: 0.95rem; font-weight: 400; color: var(--ink); }
.sr-liste li.actif, .sr-liste li[role=option]:hover { background: var(--cream-alt); color: var(--heading); }
.sr-liste li.sr-vide { color: var(--ink-soft); cursor: default; }

/* ---------- Cases à cocher et boutons radio aux couleurs du site (spécificité nulle : les styles locaux gardent la main) ---------- */
:where(input[type="checkbox"]:not(.interrupteur-vr input), input[type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  background: var(--white);
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"]:not(.interrupteur-vr input), input[type="radio"]):hover { border-color: var(--bordeaux); }
:where(input[type="checkbox"]:not(.interrupteur-vr input), input[type="radio"]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type="checkbox"]:checked:not(.interrupteur-vr input) { background: var(--bordeaux); border-color: var(--bordeaux); }
:where(input[type="checkbox"]:not(.interrupteur-vr input)):checked::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 14%;
  width: 28%;
  height: 55%;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked { border-color: var(--bordeaux); background: radial-gradient(circle, var(--bordeaux) 0 42%, var(--white) 46%); }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }

/* ============================================
   Embellissements (6 octobre 2026) : liseré du hero,
   cartes relevées, photos cerclées d'or, barre « Adhérer » mobile.
   Placé en fin de fichier et préfixé par body pour passer devant les
   styles propres à chaque page.
   ============================================ */

/* Liseré or sous le hero */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  pointer-events: none;
}

/* Séparateur : arbre du logo en or entre deux filets, en tête des sections de l'accueil qui ont un titre centré (Actualités, Témoignages).
   Les filets sont un seul dégradé de 360px avec un vide au centre pour laisser la place à l'arbre. */
#actualites::before,
#temoignages::before {
  content: "";
  display: block;
  height: 64px;
  margin: -1rem auto 1.2rem;
  background:
    url("separateur-arbre.svg") center / auto 64px no-repeat,
    linear-gradient(90deg, transparent 0, var(--gold) calc(50% - 50px), transparent calc(50% - 49px), transparent calc(50% + 49px), var(--gold) calc(50% + 50px), transparent 100%) center / 380px 1px no-repeat;
}
@media (max-width: 720px) {
  #actualites::before,
  #temoignages::before {
    height: 48px;
    background:
      url("separateur-arbre.svg") center / auto 48px no-repeat,
      linear-gradient(90deg, transparent 0, var(--gold) calc(50% - 40px), transparent calc(50% - 39px), transparent calc(50% + 39px), var(--gold) calc(50% + 40px), transparent 100%) center / 240px 1px no-repeat;
  }
}

/* Cartes : liseré or en haut, ombre douce, élévation au survol */
body .news-card,
body .jeunes-card,
body .bureau-card,
body .soutien-card,
body .soutien-mini-card {
  background: var(--white);
  border: 0;
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(62, 5, 44, 0.10);
  /* opacity/transform : garde l'apparition au défilement (.reveal) */
  transition: opacity 0.6s ease, transform 0.35s ease, box-shadow 0.25s ease;
}
body .bureau-card,
body .soutien-card,
body .soutien-mini-card {
  padding: 1.4rem 1rem 1.2rem;
}
body .news-card:hover,
body .jeunes-card:hover,
body .bureau-card:hover,
body .soutien-card:hover,
body .soutien-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(62, 5, 44, 0.16);
}

/* Photos rondes : fin cadre doré */
body .bureau-photo,
body .soutien-photo,
body .soutien-mini-photo {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--gold);
}

/* Barre « Adhérer » fixe, mobile uniquement (affichée par barre-adherer.js après le hero) */
.barre-adherer {
  display: none;
}
@media (max-width: 720px) {
  .barre-adherer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--bordeaux-dark);
    border-top: 2px solid var(--gold);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .barre-adherer.visible {
    transform: none;
  }
  .barre-adherer a {
    display: block;
    text-align: center;
    background: var(--gold);
    color: var(--bordeaux-dark);
    font-weight: 600;
    padding: 0.7rem;
    border-radius: 3px;
    text-decoration: none;
  }
  .site-footer {
    padding-bottom: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .news-card,
  body .jeunes-card,
  body .bureau-card,
  body .soutien-card,
  body .soutien-mini-card,
  .barre-adherer {
    transition: none;
  }
}

/* Actualités issues des réseaux : mention discrète « Aussi sur Facebook · Instagram » */
.news-reseaux {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.news-reseaux a {
  color: var(--accent);
}

/* ---------- Listes déroulantes aux couleurs du site (select-style.js) ---------- */
/* Repli (écran tactile, sans JavaScript) : liste native mais fermée aux couleurs du site. */
:where(select:not([multiple]):not([size])) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235c1c33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}
:where(select) option { font-family: var(--serif-body); color: var(--ink); background: var(--white); }

.sl-boite { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.sl-boite.sl-pleine { display: block; }
.sl-natif { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.sl-bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; box-sizing: border-box; text-align: left;
  font-family: var(--serif-body); font-size: 1rem; font-weight: 400; line-height: 1.4;
  padding: 0.5rem 0.7rem; border: 1px solid #d8cab0; border-radius: 3px;
  background: var(--cream); color: var(--ink); cursor: pointer;
  min-height: 2.4rem;
}
.sl-bouton::after {
  content: ''; flex: none; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--bordeaux); border-bottom: 2px solid var(--bordeaux);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.sl-bouton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.sl-bouton:hover { border-color: var(--gold); }
.sl-bouton:focus-visible, .sl-bouton[aria-expanded="true"] { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.sl-bouton:disabled { opacity: .55; cursor: not-allowed; }
.sl-bouton.sl-vide .sl-texte { color: var(--ink-soft); }
.sl-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-liste {
  position: fixed; z-index: 10000; margin: 0; padding: 0.25rem; list-style: none;
  max-height: 18rem; overflow-y: auto; box-sizing: border-box; max-width: calc(100vw - 8px);
  background: var(--white); border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 10px 28px rgba(62, 5, 44, 0.2);
  font-family: var(--serif-body);
}
.sl-liste[hidden] { display: none; }
.sl-liste li { padding: 0.45rem 0.7rem; border-radius: 3px; cursor: pointer; font-size: 0.97rem; color: var(--ink); white-space: nowrap; }
.sl-liste li.actif { background: var(--cream-alt); color: var(--heading); }
.sl-liste li.choisi { font-weight: 700; color: var(--bordeaux); }
.sl-liste li.choisi::after { content: ' ✓'; color: var(--gold); }
.sl-liste li.sl-desactive { opacity: .45; cursor: not-allowed; }
.sl-liste li.sl-groupe { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); cursor: default; padding-top: .6rem; }

/* Hashtags des publications importées : pastilles discrètes sous le texte */
.actu-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; }
.actu-tags a {
  font-size: 0.82rem; color: var(--ink-soft);
  border: 1px solid var(--cream-alt); border-radius: 999px; padding: 1px 10px;
  background: var(--cream);
}

.actu-tags a { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.actu-tags a:hover, .actu-tags a:focus-visible { border-color: var(--gold); color: var(--accent); }

/* Image d'un post vidéo : cliquable, avec un bouton lecture */
.image-video-reseau { position: relative; display: block; }
.image-video-reseau .lecture-video,
.lecteur-reseau .lecture-video {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  display: grid; place-items: center; padding-left: 0.3rem;
  background: rgba(62, 5, 44, 0.78); color: #fff; font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform .2s ease, background .2s ease;
}
.image-video-reseau:hover .lecture-video,
.lecteur-reseau-bouton:hover .lecture-video, .lecteur-reseau-bouton:focus-visible .lecture-video { transform: translate(-50%, -50%) scale(1.08); background: rgba(92, 28, 51, 0.92); }

/* Boutons « Voir la vidéo » sous la miniature d'un post vidéo des réseaux */
.boutons-video-reseau { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0.9rem 0 1.4rem; }
.boutons-video-reseau a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--white); color: var(--accent);
  font-size: 0.95rem; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.boutons-video-reseau a:hover, .boutons-video-reseau a:focus-visible { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }

/* Lecteur Facebook / Instagram en deux temps : aperçu hébergé sur le site, iframe chargée au clic seulement */
.lecteur-reseau-bouton {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 4px; overflow: hidden; background: #1c0f16; cursor: pointer;
  font: inherit; color: inherit;
}
.lecteur-reseau-bouton img { display: block; width: 100%; height: auto; max-height: min(70vh, 600px); object-fit: contain; }
.lecteur-reseau-vide { display: block; width: 100%; }
.lecteur-reseau-bouton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lecteur-reseau-note { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); text-align: center; }
.lecteur-reseau.lecteur-charge iframe { border-radius: 4px; }

/* « J'aime » sans cookies : lien vers le post d'origine, où le visiteur like depuis son propre compte */
.boutons-aime { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.9rem 0 1.4rem; }
.boutons-aime-titre { font-size: 0.92rem; color: var(--ink-soft); margin-right: 0.3rem; }
.boutons-aime a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 1rem; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--white); color: var(--accent);
  font-size: 0.92rem; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.boutons-aime .coeur { color: #b23b5b; font-size: 1rem; line-height: 1; }
.boutons-aime a:hover, .boutons-aime a:focus-visible { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.boutons-aime a:hover .coeur, .boutons-aime a:focus-visible .coeur { color: #f3b6c7; }

/* ---------- Actualités : une « à la une » + grille ---------- */

.news-grid .news-card--une {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  box-shadow: 0 14px 40px rgba(62, 5, 44, 0.10);
}

.news-card--une .thumb {
  height: auto;
  min-height: 340px;
}

.news-card--une .body {
  padding: 2.25rem 2.5rem;
  justify-content: center;
}

.news-card--une h3 {
  font-size: 1.9rem;
  line-height: 1.2;
}

.news-card--une .body > p {
  font-size: 1.05rem;
  margin: 0.4rem 0 1rem;
}

.une-etiquette {
  align-self: flex-start;
  background: var(--bordeaux-dark);
  color: var(--on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: 99px;
  margin-bottom: 0.9rem;
}

@media (max-width: 900px) {
  .news-grid .news-card--une { grid-template-columns: 1fr; }
  .news-card--une .thumb { min-height: 220px; }
  .news-card--une .body { padding: 1.5rem; }
  .news-card--une h3 { font-size: 1.5rem; }
}

/* ---------- Pied de page enrichi (footer.php, pages éditoriales) ---------- */

.site-footer.site-footer-riche { padding: 0; }

.site-footer-riche .pied-bandeau {
  /* Même fond que le reste du pied de page : un simple filet or sépare l'appel à l'action. */
  background: transparent;
  border-bottom: 1px solid rgba(203, 174, 124, 0.35);
  padding: 2.25rem 0;
}

.site-footer-riche .pied-bandeau .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.site-footer-riche .pied-bandeau-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer-riche .pied-bandeau p {
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--on-dark);
}

.site-footer-riche .pied-colonnes {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr;
  gap: 3rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 2.25rem;
}

.site-footer-riche .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
}

.site-footer-riche .footer-brand img { height: 46px; width: auto; }

.site-footer-riche .pied-marque p {
  margin: 0.75rem 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
  opacity: 0.9;
}

.site-footer-riche .social-links { margin-left: 0; }

.site-footer-riche .social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer-riche .pied-liens h2,
.site-footer-riche .pied-actu h2 {
  font-family: var(--serif-cormorant);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 0.9rem;
}

.site-footer-riche .pied-liens a {
  display: block;
  color: var(--on-dark-soft);
  text-decoration: none;
  margin-bottom: 0.55rem;
}

.site-footer-riche .pied-liens a:hover { color: var(--gold-light); }

.pied-actu-carte {
  display: flex;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(203, 174, 124, 0.25);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--on-dark);
}

.pied-actu-carte:hover { border-color: var(--gold-light); }

.pied-actu-image {
  flex: none;
  width: 100px;
  background-size: cover;
  background-position: center;
}

.pied-actu-texte {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem 0.8rem 0;
}

.pied-actu-carte:not(:has(.pied-actu-image)) .pied-actu-texte { padding-left: 0.9rem; }

.pied-actu-texte small { color: var(--gold-light); font-size: 0.8rem; }

.pied-actu-texte strong {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}

.pied-actu-texte span { font-size: 0.85rem; opacity: 0.8; }

.site-footer-riche .pied-bas { border-top: 1px solid rgba(255, 255, 255, 0.12); }

.site-footer-riche .pied-bas .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-size: 0.8rem;
  color: rgba(239, 228, 208, 0.65);
}

.site-footer-riche .footer-legal {
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  flex-basis: auto;
  gap: 0.35rem 1.2rem;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .site-footer-riche .pied-colonnes { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer-riche .pied-bandeau p { font-size: 1.3rem; }
}

/* ---------- Actualités côté visiteurs : partage, navigation, newsletter, archive ---------- */

.article-partage {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--cream-alt);
  border-bottom: 1px solid var(--cream-alt);
}
.article-partage-titre {
  font-family: var(--serif-display);
  color: var(--heading);
  font-size: 1.1rem;
}
.article-partage .partage { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-partage .partage-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  /* Le bouton « Copier le lien » est un <button> : sans ces réglages, le style général des boutons
     (marges intérieures, police) écrasait son icône. */
  padding: 0;
  font: inherit;
  line-height: 1;
}
.article-partage .partage-lien svg { flex-shrink: 0; width: 18px; height: 18px; }
.article-partage .partage-lien:hover,
.article-partage .partage-lien:focus-visible { background: var(--gold); color: var(--bordeaux-dark); }

.article-voisines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.article-voisines .voisine {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
}
.article-voisines .voisine:hover,
.article-voisines .voisine:focus-visible { border-color: var(--gold); }
.article-voisines .voisine-suivante { text-align: right; grid-column: 2; }
.article-voisines .voisine-precedente { grid-column: 1; }
.article-voisines .voisine-sens { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.article-voisines .voisine-titre { font-family: var(--serif-display); color: var(--heading); font-size: 1.05rem; line-height: 1.3; }

.article-newsletter {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 4px;
}
.article-newsletter h2 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.article-newsletter p { margin: 0 0 1rem; color: var(--ink); }
.article-newsletter .ligne { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.article-newsletter .ligne input {
  flex: 1 1 200px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--cream-alt);
  border-radius: 3px;
  font: inherit;
  background: var(--cream);
  color: var(--ink);
}
.article-newsletter .consent { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0; font-size: 0.85rem; color: var(--ink-soft); }
.article-newsletter .consent input { margin-top: 0.2rem; }
.article-newsletter .form-note { margin: 0.75rem 0 0; min-height: 1.2em; font-size: 0.9rem; }

.autres-actus { margin-top: 3rem; }
.autres-actus h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }
.autres-actus .news-grid { gap: 1rem; }
.autres-actus .news-card h3 { font-size: 1.05rem; }
.autres-actus .news-card p { display: none; }
.autres-actus-tout { margin: 1.25rem 0 0; text-align: right; }

.actualites-page .wrap { padding-top: 1rem; padding-bottom: 3rem; }
.pagination-actus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.pagination-actus a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pagination-actus a:hover { text-decoration: underline; }
.pagination-etat { color: var(--ink-soft); }

@media (max-width: 900px) {
  .autres-actus .news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .article-voisines { grid-template-columns: 1fr; }
  .article-voisines .voisine-suivante,
  .article-voisines .voisine-precedente { grid-column: 1; text-align: left; }
}

/* ---------- Bandeau « Reconstruction de l'Hôtel de Ville » (accueil) ---------- */
.bandeau-hdv {
  background: var(--bordeaux);
  border-top: 1px solid rgba(203,174,124,0.35);
  border-bottom: 1px solid rgba(203,174,124,0.35);
  padding: 1.25rem 0;
}
.bandeau-hdv .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  text-align: center;
}
.bandeau-hdv p {
  margin: 0;
  font-family: var(--serif-cormorant);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--on-dark);
}
.bandeau-hdv .btn { padding: 0.6rem 1.4rem; }

/* ---------- Admin > Textes des pages : compteur de la souscription Hôtel de Ville ---------- */
.compteur-admin {
  margin: 0.25rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--cream-alt);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.compteur-admin summary { cursor: pointer; }
.compteur-admin .ligne-titre { font-weight: 600; color: var(--heading); }
.compteur-admin .ligne-detail { font-size: 0.88rem; color: var(--ink-soft); margin: 0.6rem 0 0; }
.compteur-admin .ligne-detail a { color: var(--accent); }
.compteur-admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 1rem;
  margin-top: 0.75rem;
}
.compteur-admin-actions { grid-column: 1 / -1; }
.form-erreur-compteur {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  background: #fbeaea;
  border-left: 3px solid #b3261e;
  color: #7a1a14;
  font-size: 0.9rem;
}
.compteur-admin-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem; }
.compteur-admin-boutons form { margin: 0; }
.compteur-admin-lien { font-size: 0.88rem; color: var(--accent); }
.compteur-admin-secours { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--cream-alt); }
.compteur-admin-secours summary { cursor: pointer; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Animations au défilement (animations.js, scroll-reveal.js) ----------
   Les états de départ (.rule-a-tracer, .jauge-a-remplir) ne sont posés que par
   le script, qui ne fait rien si le visiteur a demandé à réduire les animations. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.rule.rule-a-tracer {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.rule.rule-a-tracer.rule-tracee {
  transform: scaleX(1);
}

.jauge-a-remplir {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.jauge-a-remplir.jauge-remplie {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .rule.rule-a-tracer,
  .jauge-a-remplir {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Animations du site, deuxième série (animations.js) ----------
   1 accueil · 2 en-tête · 3 carte · 4 photos · 5 portraits · 6 agenda ·
   7 barre de lecture · 8 menu · 9 reflet · 10 actualités · 11 coche · 12 retour en haut */

/* 1. Accueil : l'arbre puis le titre, la devise et les boutons entrent en scène. */
@keyframes tep-monter { from { opacity: 0; transform: translateY(16px); } }
@keyframes tep-arbre { from { opacity: 0; transform: scale(0.82); } }
.hero > .wrap > * { animation: tep-monter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero > .wrap > .hero-mark { animation: tep-arbre 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero > .wrap > :nth-child(2) { animation-delay: 0.3s; }
.hero > .wrap > :nth-child(3) { animation-delay: 0.45s; }
.hero > .wrap > :nth-child(4) { animation-delay: 0.6s; }
.hero > .wrap > :nth-child(5) { animation-delay: 0.75s; }
.hero > .wrap > :nth-child(n+6) { animation-delay: 0.9s; }

/* 2. En-tête qui se resserre quand on descend. */
.site-header { transition: box-shadow 0.3s ease; }
.site-header .wrap { transition: padding 0.3s ease; }
.site-header .brand-mark { transition: width 0.3s ease, height 0.3s ease; }
.site-header.en-tete-serre { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
.site-header.en-tete-serre .wrap { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.site-header.en-tete-serre .brand-mark { width: 28px; height: 28px; }

/* 3. Carte des référents : les départements couverts s'allument un à un. */
.carte-a-allumer .carte-pub-dep.couvert path {
  fill: #e6dccb;
  transition: fill 0.6s ease calc(var(--i, 0) * 0.14s), opacity 0.15s;
}
.carte-a-allumer .carte-pub-dep.couvert text {
  fill: #6b5c4f;
  transition: fill 0.6s ease calc(var(--i, 0) * 0.14s);
}
.carte-a-allumer.carte-allumee .carte-pub-dep.couvert path { fill: #6b1d4a; }
.carte-a-allumer.carte-allumee .carte-pub-dep.couvert text { fill: #fffdf9; }

/* 4. Photos de la galerie dévoilées comme un rideau. */
.rideau { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.6s ease, transform 0.6s ease; }
.rideau.rideau-ouvert { clip-path: inset(0 0 0 0); }

/* 5. Portraits qui se posent. */
.portrait-a-poser { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.portrait-a-poser.portrait-pose { transform: none; }

/* 6. Dates de l'agenda qui basculent. */
.date-a-basculer { opacity: 0; transform: perspective(300px) rotateX(-90deg); transform-origin: top center; }
.date-a-basculer.date-basculee {
  opacity: 1; transform: none;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.3s ease 0.15s;
}

/* 7. Barre de lecture des articles. */
.barre-lecture {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* 8. Menu public : soulignement doré qui glisse depuis la gauche (liens seulement : ni « Adhérer » ni « Faire un don », qui sont des boutons). */
.main-nav:not(.admin-nav) a { position: relative; }
.main-nav:not(.admin-nav) a:hover,
.main-nav:not(.admin-nav) a:focus-visible { border-color: transparent; }
.main-nav:not(.admin-nav) a.lien-actif:hover,
.main-nav:not(.admin-nav) a.lien-actif:focus-visible { border-color: var(--gold); }
/* Dans le déroulant « Le mouvement », le lien de la page courante (lien-actif) n'a pas de bordure dorée
   permanente (border-bottom: none) : il garde donc le trait au survol, comme les autres liens du déroulant. */
.main-nav:not(.admin-nav) a:not(.nav-cta):not(.nav-don):not(.lien-actif)::after,
.main-nav:not(.admin-nav) .nav-pub-menu a.lien-actif::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold-light); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-nav:not(.admin-nav) a:not(.nav-cta):not(.nav-don):not(.lien-actif):hover::after,
.main-nav:not(.admin-nav) a:not(.nav-cta):not(.nav-don):not(.lien-actif):focus-visible::after,
.main-nav:not(.admin-nav) .nav-pub-menu a.lien-actif:hover::after,
.main-nav:not(.admin-nav) .nav-pub-menu a.lien-actif:focus-visible::after { transform: scaleX(1); }
/* Dans le déroulant, le trait est dessiné dans le lien (bottom: 0) et non 1 px dessous : le déroulant a
   overflow: hidden, qui coupait le trait du dernier lien (« Les jeunes » quand Nos référents et Nos soutiens
   sont désactivés). */
.main-nav:not(.admin-nav) .nav-pub-menu a:not(.nav-cta):not(.nav-don)::after { bottom: 0; }

/* 9. Reflet de lumière sur les boutons dorés (et sur « Adhérer » du menu, « Suivre sur Instagram »). */
.btn-primary, .main-nav a.nav-cta, .btn-instagram { position: relative; overflow: hidden; }
.btn-primary::after, .main-nav a.nav-cta::after, .btn-instagram::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@keyframes tep-reflet { to { left: 130%; } }
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.main-nav a.nav-cta:hover::after,
.main-nav a.nav-cta:focus-visible::after,
.btn-instagram:hover::after,
.btn-instagram:focus-visible::after { animation: tep-reflet 0.8s ease; }
/* « Suivre sur Instagram » : contour or, rempli d'or au survol comme « Faire un don ». */
.btn.btn-instagram { color: var(--accent); border-color: var(--gold); }
.btn.btn-instagram:hover,
.btn.btn-instagram:focus-visible { background: var(--gold); color: var(--bordeaux-dark); }

/* 10. Image des actualités qui s'approche au survol. */
.news-card .thumb { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.news-card .body { position: relative; background: inherit; }
.news-card:hover .thumb,
.news-card:focus-within .thumb { transform: scale(1.06); }

/* 11. Coche dorée des confirmations (adhésion, don, paiement, signature). */
.coche-merci { display: block; width: 64px; height: 64px; margin: 0 auto 0.9rem; }
.coche-merci.petite { display: inline-block; width: 22px; height: 22px; margin: 0 0.4rem 0 0; vertical-align: -5px; }
.coche-merci circle { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 190; stroke-dashoffset: 190; animation: tep-tracer 0.8s ease-out 0.2s forwards; }
.coche-merci path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tep-tracer 0.45s ease-out 0.85s forwards; }
@keyframes tep-tracer { to { stroke-dashoffset: 0; } }

/* 12. Bouton « Retour en haut ». */
.retour-haut {
  position: fixed; z-index: 55;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--bordeaux-dark); color: var(--gold-light);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 16px rgba(62, 5, 44, 0.25);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.retour-haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.retour-haut:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 720px) {
  /* Sur téléphone : le bouton remonte au-dessus de la barre « Adhérer » quand
     elle est affichée (hauteur de la barre + 1 rem d'écart, encoche iOS comprise),
     et redescend quand elle se cache (pied de page, section « Adhérer »). */
  .retour-haut { transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease; }
  .barre-adherer.visible ~ .retour-haut { bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero > .wrap > *,
  .btn-primary:hover::after,
  .btn-primary:focus-visible::after,
  .main-nav a.nav-cta:hover::after,
  .main-nav a.nav-cta:focus-visible::after,
  .btn-instagram:hover::after,
  .btn-instagram:focus-visible::after { animation: none; }
  .coche-merci circle, .coche-merci path { animation: none; stroke-dashoffset: 0; }
  .site-header, .site-header .wrap, .site-header .brand-mark,
  .news-card .thumb, .main-nav:not(.admin-nav) a::after, .retour-haut { transition: none; }
  .news-card:hover .thumb, .news-card:focus-within .thumb { transform: none; }
}

/* Menu court des espaces mandataire et référent (admin-header.php) : liens crème sur bordeaux,
   page en cours soulignée d'or, sur une ou plusieurs lignes selon la largeur (pas de bouton ☰). */
.admin-nav.espace-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; padding: 0.55rem 0 0.7rem; }
.admin-nav.espace-nav a {
  color: var(--on-dark); text-decoration: none; font-family: var(--serif-body); font-size: 0.98rem;
  padding: 0.2rem 0; border-bottom: 2px solid transparent;
}
.admin-nav.espace-nav a:hover, .admin-nav.espace-nav a:focus-visible { border-bottom-color: var(--gold-light); }
.admin-nav.espace-nav a.lien-actif { border-bottom-color: var(--gold); font-weight: 600; }
@media (max-width: 720px) {
  /* Le menu admin complet s'ouvre par ☰ (bandeau sans marge) ; le menu court des espaces reste affiché,
     aligné sur le logo, avec le filet du haut. */
  .admin-header .wrap:last-child:has(> .espace-nav) { padding: 0 1.5rem; border-top: 1px solid rgba(255,255,255,0.14); }
}