/*
Theme Name: Essonne Nature Environnement
Theme URI: https://essonne-nature-environnement.fr
Author: ENE
Description: Thème sur-mesure pour Essonne Nature Environnement. Design figé, contenu géré via WordPress (actualités, projet phare, agenda, ressources).
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ene
*/

/* ════════════════════════════════════════════════════════════════
   ESSONNE NATURE ENVIRONNEMENT — FEUILLE DE STYLE CONSOLIDÉE
   ════════════════════════════════════════════════════════════════
   Sommaire :
   1. Tokens & variables
   2. Reset & base
   3. Layout (container, page)
   4. Boutons & liens
   5. Navigation (barre flottante + burger)
   6. Logo flottant (plaque à gauche)
   6b. Flèche flottante d'auto-scroll (accueil)
   7. Hero (page 1)
   8. Contenu page 1 : actualité vedette + actualités
   9. Page 2 : projet phare, agenda, missions, ressources
   9b. Partenaires (bande de l'accueil + page « Partenaires »)
   10. Footer
   11. Visibilité du nom de l'association
   12. Bascule « contenu compact » (desktop court)
   13. Responsive (intermédiaire + mobile)
   14. Pages intérieures (contenu éditorial)
   15. Pages hors accueil (fond image + voile, fit-to-screen, footer épinglé)
   16. Accessibilité (focus visible, masquage accessible, lien d'évitement)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════ */
:root {
  --vert-fonce: #2D4A2D;
  --vert-moyen: #4A7C59;
  --vert-clair: #A8D49F;
  --vert-pale:  #E8F2E2;
  --jaune:      #E8B82C;
  --fond:       #FAFAF7;
  --blanc:      #FFFFFF;
  --texte:      #1A2A1A;
  /* Assombri de #6B7B6B → #647464 (passe d'accessibilité) : le gris moyen
     servait de couleur de texte courant (dates, extraits, méta) mais ne
     tenait que 4.30:1 sur --fond (< 4.5:1 AA). À #647464 : 4.75:1 sur
     --fond, 4.97:1 sur blanc. Écart visuel imperceptible. */
  --gris-mid:   #647464;
  --gris-clair: #E5E9E2;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-full: 9999px;

  --sh-sm: 0 1px 3px rgba(45, 74, 45, .05), 0 2px 8px rgba(45, 74, 45, .04);
  --sh-md: 0 4px 14px rgba(45, 74, 45, .08), 0 8px 24px rgba(45, 74, 45, .06);
  --sh-lg: 0 12px 30px rgba(45, 74, 45, .1), 0 24px 60px rgba(45, 74, 45, .1);

  --font:   'Inter', system-ui, sans-serif;
  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t-med:  300ms cubic-bezier(.4, 0, .2, 1);
}


/* ════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  /* Réserve la gouttière de scrollbar sur toutes les pages pour éviter
     le décalage horizontal entre l'accueil (qui défile) et les autres
     pages (verrouillées sans scroll). */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Accueil : fond transparent pour laisser voir le calque fixe .site-bg.
   Les pages intérieures reçoivent elles aussi un calque .site-bg (posé par
   header.php hors accueil) tamisé par un voile fixe — cf. §15
   (html.no-snap body). */
body.home { background: transparent; }

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
ul       { list-style: none; }
address  { font-style: normal; }
button   { font: inherit; cursor: pointer; border: none; background: none; }


/* ════════════════════════════════════════════
   3. LAYOUT
   ════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Scroll-snap : chaque page snap au sommet du viewport */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  position: relative;
}


/* ════════════════════════════════════════════
   4. BOUTONS & LIENS
   ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.3rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all var(--t-fast);
  border: 1px solid transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.825rem; }

.btn--primary {
  background: var(--vert-fonce);
  color: white;
  box-shadow: 0 4px 14px rgba(45, 74, 45, .2);
}
.btn--primary:hover { background: var(--vert-moyen); }

.btn--outline {
  background: transparent;
  color: var(--vert-fonce);
  border-color: var(--vert-fonce);
}
.btn--outline:hover { background: var(--vert-fonce); color: white; }

.btn--white {
  background: white;
  color: var(--vert-fonce);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vert-moyen);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.link:hover { color: var(--vert-fonce); }

.link--arrow::after {
  content: " →";
  display: inline-block;
  transition: transform var(--t-fast);
}
.link--arrow:hover::after { transform: translateX(3px); }


/* ════════════════════════════════════════════
   5. NAVIGATION (pill flottante + burger)
   ════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 100;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Le container interne de la nav est resserré (relatif au viewport)
   pour libérer la place du logo flottant à sa gauche. */
.nav > .container {
  width: calc(100vw - 20rem);
  max-width: 1200px;
}

.nav__inner {
  display: grid;
  /* Stratégie UNIQUE à toutes les largeurs (pas de bascule de mise en page) :
     - la marque (col 1, auto) est vide (texte masqué) → 0 réservation inutile ;
     - le menu (col 2, minmax(0,1fr)) prend TOUT l'espace restant et peut se
       réduire sous sa largeur de contenu → le priority+ (js/nav.js) n'y replie
       que le strict nécessaire ;
     - la zone droite (col 3, auto) garde sa largeur propre.
     Le conteneur reste `calc(100vw - 20rem)` centré (cap 1200) à toutes les
     largeurs : son bord gauche coïncide avec le bord droit du logo flottant,
     donc le logo reste collé à gauche de la barre (jamais dessous), sans saut. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  height: 48px;                          /* navbar fine, hauteur verrouillée */
  padding: 0 0.55rem 0 0.95rem;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-full);
  box-shadow: var(--sh-md);
}

/* Marque à gauche (vide), menu au centre prenant le reste, zone droite à droite. */
.nav__inner > .nav__brand { grid-column: 1; justify-self: start; }
/* Le menu remplit sa colonne (stretch) pour que sa largeur = espace
   disponible : le priority+ s'appuie dessus pour décider quoi replier. */
.nav__inner > .nav__menu  { grid-column: 2; justify-self: stretch; min-width: 0; }
.nav__inner > .nav__right { grid-column: 3; justify-self: end; }

.nav__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav__brand-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--vert-fonce);
  white-space: nowrap;
}

.nav__menu {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
  /* Sans JS : la barre peut défiler horizontalement plutôt que de casser.
     Avec JS (.has-js), le priority+ (js/nav.js) prend le relais et il n'y a
     plus de débordement — le surplus est replié dans le sur-menu « Plus ». */
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* anciens Edge/IE */
}
.nav__menu::-webkit-scrollbar { display: none; }
/* Avec JS, on rétablit overflow visible pour laisser les sous-menus déborder
   vers le bas (le priority+ garantit l'absence de débordement horizontal). */
.has-js .nav__menu { overflow: visible; }
.nav__menu a {
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;   /* empêche tout libellé (ex. « Qui sommes-nous »)
                            de se couper sur 2 lignes et de casser la pill */
  transition: all var(--t-fast);
}
.nav__menu a:hover         { background: var(--vert-pale); color: var(--vert-fonce); }
.nav__menu a.active        { background: var(--vert-fonce); color: white; }
/* Lien « Nous contacter » dans le menu : caché en desktop (le bouton
   contact suffit). N'apparaît dans le menu qu'à partir de 950px,
   où le bouton est retiré. */
.nav__menu-contact         { display: none; }

/* ── Sous-menus (dropdown) ──
   Item parent enveloppé dans .nav__item--has-sub par
   Ene_Bare_Menu_Walker ; panneau ouvert au survol et au
   focus clavier (:focus-within). */
.nav__item { position: relative; display: inline-flex; }
.nav__item--has-sub > a::after {
  content: "▾";
  margin-left: 0.35em;
  font-size: 0.72em;
  opacity: 0.65;
}
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 190px;
  padding: 0.45rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
/* Pont invisible entre la pill et le panneau : garde le survol actif */
.nav__sub::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item--has-sub.is-open > .nav__sub {   /* ouverture au clic/tap (js/nav.js) */
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__sub a { width: 100%; }

/* ── Sur-menu « Plus » (priority+) ──
   Bouton calqué sur l'apparence d'un lien de menu ; le panneau réutilise
   .nav__sub. Généré par js/nav.js, masqué tant qu'il n'y a rien à replier. */
.nav__more[hidden] { display: none; }
.nav__more-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t-fast);
}
.nav__more-toggle:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.nav__more-toggle::after {
  content: "▾";
  margin-left: 0.35em;
  font-size: 0.72em;
  opacity: 0.65;
}
/* Un item à sous-menu replié dans « Plus » : son propre panneau s'affiche
   en flux (indenté) à l'intérieur du panneau « Plus », plutôt qu'en flottant. */
.nav__more-list .nav__item--has-sub { display: block; }
.nav__more-list .nav__sub {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  min-width: 0;
  padding: 0.1rem 0 0.1rem 0.8rem;
  background: transparent;
  border: none;
  box-shadow: none;
}
.nav__more-list .nav__sub::before { display: none; }
.nav__more-list .nav__item--has-sub > a::after { content: none; }
/* Le sous-menu replié dans « Plus » est TOUJOURS déroulé (liste statique
   indentée). On neutralise donc le transform/position des états ouverts
   (hover/focus/.is-open), dont la spécificité (0,3,0) battait sinon la règle
   statique (0,2,0) et faisait « sortir » le panneau du dropdown. */
.nav__more-list .nav__item--has-sub:hover > .nav__sub,
.nav__more-list .nav__item--has-sub:focus-within > .nav__sub,
.nav__more-list .nav__item--has-sub.is-open > .nav__sub {
  position: static;
  transform: none;
  left: auto;
}

.nav__right    { display: flex; align-items: center; gap: 0.7rem; }
.nav__socials  { display: flex; gap: 0.3rem; }
.nav__socials .social     { width: 32px; height: 32px; }
.nav__socials .social svg { width: 14px; height: 14px; }

/* Burger : masqué en desktop, affiché en mobile */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-full);
  background: var(--vert-pale);
  cursor: pointer;
  transition: background var(--t-fast);
}
.nav__burger:hover { background: var(--vert-clair); }
.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--vert-fonce);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ════════════════════════════════════════════
   6. LOGO FLOTTANT (plaque à gauche)
   ════════════════════════════════════════════
   Position absolue → scrolle avec le document (visible
   sur le hero, hors de vue une fois sur la page 2).
   Aligné sur le bord gauche de la navbar avec un offset
   de 100px vers la gauche pour la marge. */
.floating-logo {
  position: absolute;
  top: 0;
  left: calc(max(10rem, (100vw - 1200px) / 2) - 100px);
  z-index: 110;
  display: block;
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  filter: drop-shadow(0 10px 22px rgba(45, 74, 45, .25));
}
.floating-logo img {
  height: 140px;
  width: auto;                 /* ratio rectangulaire d'origine */
  display: block;
}

/* Pages intérieures (pas de hero) : logo réduit pour s'équilibrer avec la
   navbar. Le logo n'est JAMAIS masqué (exigence : identité toujours présente) ;
   sur les pages intérieures, le titre démarre sous le logo (cf. .page__head),
   donc pas de chevauchement même quand son retrait gauche est levé. */
html.no-snap .floating-logo img { height: 96px; }
/* Sous 768px (mode burger), on réduit encore la plaque pour qu'elle reste
   discrète mais visible au coin supérieur gauche. */
@media (max-width: 768px) {
  html.no-snap .floating-logo img { height: 72px; }
}


/* ════════════════════════════════════════════
   6b. FLÈCHE FLOTTANTE D'AUTO-SCROLL (accueil)
   ════════════════════════════════════════════
   Bouton circulaire « glass » à droite, centré verticalement. Indique et
   permet de passer d'un écran à l'autre (descendre / remonter). Masqué par
   défaut : révélé par js/scroll.js (classe .has-snapnav sur <html>) → sans JS,
   rien ne s'affiche. Masqué en mobile, où le scroll-snap est désactivé. */
.scroll-nav {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;                 /* sous la nav (100) et le logo (110) */
  display: none;               /* révélé par .has-snapnav */
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--blanc);
  background: rgba(45, 74, 45, .8);  /* --vert-fonce translucide (effet glass) */
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-full);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-med);
}
html.has-snapnav .scroll-nav { display: inline-flex; }

.scroll-nav:hover { background: var(--vert-fonce); box-shadow: var(--sh-lg); }
.scroll-nav:focus-visible { outline: 2px solid var(--vert-moyen); outline-offset: 3px; }

.scroll-nav__icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--t-med);
  /* La bascule de direction se fait via `transform`; l'invite « bob » via la
     propriété `translate` (indépendante) → pas de conflit entre les deux. */
  animation: scroll-nav-bob 2.2s ease-in-out infinite;
}
/* Sur l'écran du bas, la flèche pointe vers le haut. */
.scroll-nav--up .scroll-nav__icon { transform: rotate(180deg); }

@keyframes scroll-nav-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-nav__icon { animation: none; }
}
/* Mobile : snap CSS désactivé → pas de flèche. */
@media (max-width: 768px) {
  html.has-snapnav .scroll-nav { display: none; }
}


/* ════════════════════════════════════════════
   7. HERO (page 1)
   ════════════════════════════════════════════
   Hauteur fixe ; le hero absorbe l'espace restant après
   la grille de contenu. Tailles du contenu en cqh
   (container-query height) pour s'adapter à la hauteur
   réelle du hero. */
.page--1 {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.hero {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* Calque image fixé au viewport (immobile au scroll). Sur l'accueil, l'image
   transparaît dans le hero et en page--2 ; elle est masquée par le fond blanc
   de .content-grid (sous le hero). Sur les pages intérieures, le calque est
   posé par header.php et tamisé par un voile fixe (cf. §15).
   Cf. front-page.php / header.php (.site-bg) et body.home. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center 60%;   /* même cadrage que l'ancienne .hero__img */
  background-repeat: no-repeat;
}

/* Calque image propre au hero : même source que .site-bg mais cadré sur le
   bas du panorama (champ de colza). Le calque fixe .site-bg reste intact
   pour le fond transparent de la page 2. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(26, 42, 26, .55) 0%, rgba(26, 42, 26, .15) 60%, transparent 100%),
    linear-gradient(to bottom, transparent 78%, #fff 100%);
}

/* Décalage dynamique aligné sur la position du logo flottant
   pour éviter toute collision : padding = position de la navbar + 130px. */
.hero__inner {
  position: relative;
  height: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  padding-top: clamp(3.5rem, 14cqh, 6rem);
  padding-left: calc(max(10rem, (100vw - 1200px) / 2) + 30px);
}

.hero__content { max-width: 560px; color: white; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-full);
  font-size: clamp(0.65rem, 2cqh, 0.8rem);
  font-weight: 600;
  margin-bottom: clamp(0.5rem, 2.5cqh, 1.1rem);
}
.hero__tag .dot {
  width: 7px;
  height: 7px;
  background: var(--vert-clair);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(168, 212, 159, .25);
}

.hero__content h1 {
  font-size: clamp(1.5rem, 9cqh, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: clamp(0.5rem, 2.5cqh, 1rem);
  text-wrap: balance;
}

.hero__content p {
  font-size: clamp(0.85rem, 3.4cqh, 1.15rem);
  color: rgba(255, 255, 255, .92);
  max-width: 520px;
  line-height: 1.5;
}


/* ════════════════════════════════════════════
   8. CONTENU PAGE 1 — ACTUALITÉ VEDETTE + ACTUALITÉS
   ════════════════════════════════════════════ */
.content-grid {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 1.5rem;
  align-items: stretch;
  padding-block: 1.75rem 2rem;
  min-height: 0;
  background: #fff;
}
/* Fond blanc pleine largeur (le contenu est centré en .container, d'où 100vw)
   qui masque le calque fixe .site-bg sous le hero. */
.content-grid::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fff;
  z-index: -1;
}

/* ── Colonne gauche : actualité vedette en pleine hauteur ──
   Le projet phare a été déplacé en page 2 (colonne gauche du split) :
   la carte vedette occupe désormais toute la hauteur de la colonne
   pour une mise en avant renforcée de la dernière actualité. */
.feature-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}
.feature-col > .card--feature { flex: 1 1 0; min-height: 0; }

/* ── Nos actualités ── */
.news {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.news__actions { display: flex; align-items: center; gap: 0.9rem; }
.news__search { display: flex; }

.section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vert-fonce);
}
.section-title__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-fonce);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.section-title__icon svg { width: 18px; height: 18px; fill: white; }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  flex: 1;
  min-height: 0;
}

.card {
  background: white;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--t-med);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.card__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, 0, .2, 1);
}
.card:hover .card__img { transform: scale(1.04); }
.card__img--empty { background: var(--vert-pale); }

.card__body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__date {
  font-size: 0.78rem;
  color: var(--gris-mid);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--vert-fonce);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.card__excerpt {
  font-size: 0.9rem;
  color: var(--gris-mid);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
.card .link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.85rem;
}

/* ── Carte « actualité vedette » (pleine hauteur de colonne) ──
   Même gabarit que les cartes d'actualité normales : image à la une en
   tête (avec le badge « Dernière actualité » en surimpression), puis
   date au-dessus du titre sous l'image. Depuis le départ du projet phare
   vers la page 2, la carte occupe toute la colonne gauche : image plus
   haute et titre/extrait rehaussés. L'extrait reste l'élément flexible :
   il se tronque pour que le lien « Lire la suite » reste toujours visible. */
.card--feature { position: relative; }
/* Zone image de la carte vedette : conteneur du badge flottant. */
.card__media { position: relative; }
.card--feature .card__img { height: 210px; }
.card--feature .card__body {
  padding: 1.25rem 1.4rem 1.35rem; /* pleine hauteur : corps plus aéré */
}
/* Seul l'extrait absorbe la hauteur (il se tronque) ; les autres éléments
   gardent leur taille pour ne jamais être rognés. */
.card--feature .card__badge,
.card--feature .card__date,
.card--feature .card__title,
.card--feature .link { flex-shrink: 0; }
.card--feature .card__title {
  font-size: 1.45rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card--feature .card__excerpt {
  font-size: 1rem;
  line-height: 1.55;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.card--feature .link { margin-top: auto; }

/* Badge d'habillage « Dernière actualité ». */
.card__badge {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.32rem 0.7rem;
  background: var(--vert-fonce);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
}
/* Variante flottante : badge en surimpression, coin haut-gauche de l'image. */
.card__badge--float {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  margin: 0;
}

/* ── Projet phare (styles de base) ──
   Le bloc vit désormais en PAGE 2 (colonne gauche du .missions-split,
   cf. §9) et en variante .projet--standalone sur la page « Projet
   phare » ; les styles de base restent ici, près du motif visuel
   partagé avec la carte vedette. */
.projet {
  position: relative;
  background: var(--vert-fonce);
  color: white;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.projet__img-wrap { position: absolute; inset: 0; }
.projet__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 45%, black 100%);
}

.projet__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.projet__kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 0.55rem;
}
.projet__body h2 {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
.projet__body > p,
.projet__desc p {
  font-size: 0.975rem;
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
  max-width: 62%;
}
.projet__desc p + p { margin-top: 0.55rem; }

.projet .btn {
  margin-top: 1.1rem;
  align-self: flex-start;
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
}


/* ════════════════════════════════════════════
   9. PAGE 2 — PROJET PHARE / AGENDA / MISSIONS / RESSOURCES
   ════════════════════════════════════════════
   Hauteur fixe ; les marges entre blocs sont réparties
   dynamiquement par justify-content sur la flex column. */
.page--2 {
  background: transparent;   /* laisse réapparaître le calque fixe .site-bg */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Compactage (arrivée du projet phare) : padding-top réduit pour que
     les 4 blocs + partenaires + footer tiennent dans les 100vh. */
  padding-top: clamp(3.25rem, 6.5dvh, 4.5rem);
  padding-bottom: 0;
  gap: 0.5rem;
}
/* ── Voile « verre dépoli » réutilisable (.voile-page) ──
   Mécanisme générique : un calque fixe .site-bg (image du hero) transparaît
   sous la section, tamisé par un voile en ::before. Réutilisable sur les
   pages intérieures : poser .voile-page sur le conteneur de section (avec un
   .site-bg présent dans la page). Rendu moderne : dégradé teinté aux couleurs
   du thème, plus transparent aux bords (l'image apporte la couleur), dense au
   centre (zone de texte), + verre dépoli (flou/saturation) qui homogénéise la
   luminance sous les textes → contrastes AA préservés (vert-fonce sur voile
   clair ≥ 4.5:1). Repli sans backdrop-filter : voile crème dense d'origine. */
.voile-page { position: relative; }
.voile-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Repli (navigateurs sans backdrop-filter) : lisibilité garantie */
  background: rgba(250, 250, 247, 0.82);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .voile-page::before {
    /* Zone centrale densifiée (.80/.76 → .85/.81, passe d'accessibilité) :
       les petits textes gris-mid/vert-moyen posés directement sur le voile
       (lien « Voir tout l'agenda », leads) restent ≥ 4.5:1 tant que l'image
       tamisée par le flou reste claire ; sur image sombre, seuls les textes
       vert-fonce/--texte (≥ 5.9:1 même sur noir) sont garantis. Les bords
       restent transparents : aucun texte n'y est posé. */
    background: linear-gradient(
      175deg,
      rgba(232, 242, 226, 0.55) 0%,     /* haut : image + teinte vert-pale   */
      rgba(250, 250, 247, 0.85) 35%,    /* centre : dense sous les textes    */
      rgba(250, 250, 247, 0.81) 70%,
      rgba(232, 242, 226, 0.50) 100%    /* bas : couleur avant le footer     */
    );
    -webkit-backdrop-filter: blur(7px) saturate(1.3);
    backdrop-filter: blur(7px) saturate(1.3);
  }
}
.page--2__inner { padding-top: 0; flex: 0 0 auto; }

/* ── Layout : projet phare | agenda en haut, puis actions | ressources ──
   Réorganisation de l'accueil : le projet phare (venu de la page 1)
   occupe la colonne gauche du rang supérieur, l'agenda la colonne
   droite ; missions et liens utiles restent en dessous. Rang supérieur
   étiré (stretch) : le projet phare cale sa hauteur sur l'agenda. */
.missions-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "projet  events"
    "actions resources";
  gap: 1.1rem clamp(1.5rem, 4vw, 3.5rem);
  align-content: center;
  align-items: start;
  min-height: 0;
}
.missions-split .projet    { grid-area: projet; align-self: stretch; }
.missions-split .actions   { grid-area: actions; }
.missions-split .resources { grid-area: resources; }
.missions-split .events    { grid-area: events; }

/* Projet phare compacté dans le split (rendu d'origine conservé :
   fond vert, image masquée à droite, texte blanc ; seuls padding et
   tailles sont resserrés pour tenir dans le rang supérieur). */
.missions-split .projet { min-height: 200px; }
.missions-split .projet__body { padding: 1.1rem 1.25rem 1.2rem; }
.missions-split .projet__kicker { margin-bottom: 0.4rem; }
.missions-split .projet__body h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.missions-split .projet__desc p {
  font-size: 0.9rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}
/* Hauteur bornée (contrainte 100vh) : seul le 1er paragraphe s'affiche
   dans le split ; le texte complet reste lisible sur la page dédiée. */
.missions-split .projet__desc p:not(:first-child) { display: none; }
.missions-split .projet__desc { margin-bottom: 0.8rem; } /* écart minimal avant le bouton */
.missions-split .projet .btn {
  margin-top: auto;            /* bouton calé en bas du bloc étiré */
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.85rem;
}

/* ── Typographie display (titres de section) ── */
.h-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vert-fonce);
  text-wrap: balance;
}
.h-display em {
  font-style: italic;
  color: var(--vert-moyen);
  font-weight: 500;
}

.kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--vert-pale);
  color: var(--vert-fonce);
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.lead {
  font-size: 0.95rem;
  color: var(--gris-mid);
  line-height: 1.5;
  max-width: 90ch;
}

.section-head {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  text-align: center;
}
.section-head .kicker { margin-bottom: 0.55rem; }
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.55rem;
  white-space: nowrap;
}
.section-head .lead { margin-inline: auto; }
/* Sur les pages intérieures, le centrage de .section-head serait cumulatif
   avec le padding-left de .page__head → on le neutralise. */
.section-head.page__head { max-width: none; margin-inline: 0; }

/* Intitulés alignés à gauche dans chaque colonne du split
   (marge resserrée : compactage de la page 2 réorganisée) */
.missions-split .section-head {
  text-align: left;
  margin-inline: 0;
  margin-bottom: 0.85rem;
  max-width: none;
}
.missions-split .section-head h2 {
  white-space: normal;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}

/* ── Champs d'actions : grille de cartes-icônes ── */
.actions     { padding: 0; }
.actions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
/* Dans le split, 2 colonnes (demi-largeur) */
.missions-split .actions__grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.action {
  padding: 0.95rem 1rem 1.05rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  transition: all var(--t-med);
}
.action:hover {
  transform: translateY(-2px);
  border-color: var(--vert-moyen);
  background: var(--vert-pale);
  box-shadow: var(--sh-md);
}
/* Carte cliquable (lien vers la page migrée) : apparence identique à la carte. */
a.action,
.action--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.action__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-pale);
  color: var(--vert-fonce);
  border-radius: var(--r-sm);
  margin-bottom: 0.55rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.action__icon svg                 { width: 18px; height: 18px; fill: currentColor; }
.action__icon svg[fill="none"]    { stroke: currentColor; }
.action:hover .action__icon       { background: var(--vert-fonce); color: white; }

.action h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vert-fonce);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.action p {
  font-size: 0.74rem;
  color: var(--gris-mid);
  line-height: 1.4;
}

/* ── Ressources : liste numérotée ── */
.resources   { padding: 0; }
.resources__list {
  display: grid;
  gap: 0.4rem;
}
.resources__list a,
.resources__list .resources__static {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  transition: all var(--t-med);
}
/* Ligne sans page liée : non cliquable (pas de survol/flèche animée). */
.resources__list .resources__static { cursor: default; }
.resources__list .resources__static .resources__arrow { display: none; }
.resources__list a:hover {
  border-color: var(--vert-moyen);
  background: var(--vert-pale);
  transform: translateX(4px);
}
.resources__title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--vert-fonce);
}
.resources__meta {
  font-size: 0.72rem;
  color: var(--gris-mid);
  font-weight: 500;
}
.resources__arrow {
  font-size: 1.05rem;
  color: var(--vert-moyen);
  transition: transform var(--t-fast);
}
.resources__list a:hover .resources__arrow { transform: translateX(3px); }

/* Ressources dans le split : la liste s'aère ; pas de compaction
   (méta + tailles conservées en toutes hauteurs) */
.missions-split .resources__list  { gap: 0.5rem; }
.missions-split .resources__meta  { display: inline; }
.missions-split .resources__title { font-size: 0.88rem; }

/* Page « Liens » : ressources groupées par catégorie */
.liens-group       { margin-bottom: 2.5rem; }
.liens-group > h2  { margin-bottom: 0.8rem; }

/* ── Agenda : événements à venir ── */
.events {
  display: flex;
  flex-direction: column;
}
.events__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Rangée titre + lien « Voir tout l'agenda » : même motif que .news__head
   (bloc actualités, page 1) — titre à gauche, lien fléché à droite.
   flex-wrap : dans la demi-colonne droite du split, le lien passe à la
   ligne plutôt que d'écraser le titre si la place manque. */
.events__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.9rem;
}
.events__head h2 { margin-bottom: 0; }

/* (Réorganisation de l'accueil : l'agenda occupe la colonne DROITE du rang
   supérieur du split, en vis-à-vis du projet phare — les 2 cartes événement
   restent empilées ; l'ancienne bande pleine largeur horizontale est
   supprimée.) */

.event {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.9rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.event:hover {
  border-color: var(--vert-moyen);
  background: var(--vert-pale);
  transform: translateX(4px);
}
.event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  padding: 0.3rem 0;
  background: var(--vert-fonce);
  color: white;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  line-height: 1;
}
.event__day {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.event__month {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}
/* Année : ligne dédiée (événements passés, plusieurs millésimes).
   Vert-clair sur la pastille vert-fonce (.event__date) : 5.99:1, AA ok. */
.event__year {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.12rem;
  color: var(--vert-clair);
}
.event__info       { flex: 1; min-width: 0; }
/* :is(h2, h3) : permet aux gabarits de choisir le niveau de titre adapté à la
   hiérarchie de chaque page (h2 sur /agenda/ pour éviter le saut h1→h3, h3
   sur l'accueil) sans dupliquer la règle — passe d'accessibilité (T12). */
.event__info :is(h2, h3) {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vert-fonce);
  line-height: 1.25;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.event__info p {
  font-size: 0.76rem;
  color: var(--gris-mid);
}
.event__arrow {
  color: var(--vert-moyen);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.event:hover .event__arrow { transform: translateX(3px); }

/* ── Accueil : agenda en petits carrés « date seule » ──
   Modificateur .event--square (n'affecte pas la page /agenda/ qui réutilise
   .event). Chaque carré n'affiche que la date ; titre + lieu apparaissent
   dans un panneau flottant au survol / focus clavier. */
.events__list--squares {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.event--square {
  position: relative;
  flex-direction: column;
  width: 84px;
  height: 84px;
  padding: 0;
  gap: 0;
  overflow: visible;   /* laisse déborder le panneau info */
  border: 0;
}
.event--square:hover { transform: none; background: transparent; } /* pas de décalage du carré */
.event--square .event__date {
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  min-height: 0;
}
.event--square .event__day  { font-size: 1.55rem; }
.event--square .event__month { font-size: 0.62rem; margin-top: 0.2rem; }
/* Panneau info révélé au survol / focus. */
.event--square .event__info {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 180px;
  max-width: 240px;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.event--square:hover .event__info,
.event--square:focus-within .event__info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Page Agenda (/agenda/) : onglets + liste paginée ── */
.agenda-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.agenda-tabs a {
  padding: 0.45rem 1.1rem;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte);
  background: white;
  border: 1px solid var(--gris-clair);
  transition: all var(--t-fast);
}
.agenda-tabs a:hover  { background: var(--vert-pale); color: var(--vert-fonce); }
.agenda-tabs a.active { background: var(--vert-fonce); border-color: var(--vert-fonce); color: white; }

.agenda-list {
  list-style: none;
  margin: 1.4rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
/* Cartes plus aérées qu'en accueil (page pleine largeur) */
.agenda-list .event { padding: 0.85rem 1.1rem; }
@media (max-width: 900px) {
  .agenda-list { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════
   9b. PARTENAIRES (bande de l'accueil + page « Partenaires »)
   ════════════════════════════════════════════
   Accueil : bande fine entre .missions-split et le footer de la page 2
   (contrainte 100vh → hauteur contenue). Libellé au-dessus, logos
   cliquables à gauche en dessous sur cartes blanches (lisibilité des
   logos sous le voile verre dépoli .voile-page::before). */
.partners {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: 0;
  padding-bottom: 0;
}
/* Titre de section « Partenaires » : vrai titre (plus de pastille verte),
   harmonisé avec le motif serif des autres titres de la page 2. */
.partners__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vert-fonce);
  letter-spacing: -0.01em;
}
.partners__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem 0.9rem;
}
.partner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0.4rem 0.8rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-med);
}
a.partner__link:hover {
  transform: translateY(-2px);
  border-color: var(--vert-moyen);
  box-shadow: var(--sh-md);
}
.partner__logo {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Variante page « Partenaires » : grille de cartes avec nom sous le logo. */
.partners__grid--page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
  justify-content: stretch;
}
.partners__grid--page .partner__link {
  flex-direction: column;
  gap: 0.7rem;
  height: auto;
  padding: 1.2rem 1rem 1rem;
  text-align: center;
}
.partners__grid--page .partner__logo {
  max-height: 72px;
  max-width: 160px;
}
.partner__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vert-fonce);
  line-height: 1.35;
}


/* ════════════════════════════════════════════
   10. FOOTER
   ════════════════════════════════════════════ */
.footer {
  background: white;
  border-top: 1px solid var(--gris-clair);
  padding: 1.25rem 2rem 0.85rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
}
.footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer__logo {
  height: 72px;
  width: auto;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.footer__tagline {
  font-size: 0.78rem;
  color: var(--gris-mid);
  line-height: 1.35;
  margin-bottom: 0.45rem;
  max-width: 220px;
}

.socials { display: flex; gap: 0.35rem; }
.social {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-pale);
  color: var(--vert-fonce);
  border-radius: var(--r-full);
  transition: all var(--t-fast);
}
.social:hover { background: var(--vert-fonce); color: white; transform: translateY(-2px); }
.social svg   { width: 11px; height: 11px; }

/* Colonne centrale : menu puis copyright (le bas de footer a été supprimé). */
.footer__nav-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer__copy {
  font-size: 0.72rem;
  color: var(--gris-mid);
  margin: 0;
}
.footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.footer__nav a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vert-fonce);
  transition: color var(--t-fast);
  white-space: nowrap;
}
.footer__nav a:hover { color: var(--vert-moyen); }

/* Sous-menus du footer : mêmes panneaux .nav__sub que le header, mais
   ouverts VERS LE HAUT (le footer est en bas de page). */
.footer__nav .nav__item--has-sub { position: relative; display: inline-flex; }
.footer__nav .nav__sub {
  top: auto;
  bottom: calc(100% + 10px);
}
.footer__nav .nav__sub::before {
  top: auto;
  bottom: -12px;
}
.footer__nav .nav__sub a {
  display: block;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}
/* Chevron orienté vers le haut au footer (le menu s'ouvre au-dessus). */
.footer__nav .nav__item--has-sub > a::after { content: '▴'; }

.footer__contact-col {
  text-align: right;
  font-size: 0.75rem;
  color: var(--gris-mid);
  line-height: 1.45;
}
.footer__contact-col address { margin-bottom: 0.15rem; }
.footer__contact {
  font-weight: 500;
  color: var(--vert-fonce);
}
.footer__contact a         { transition: color var(--t-fast); }
.footer__contact a:hover   { color: var(--vert-moyen); }
.footer__sep               { color: var(--gris-mid); margin: 0 0.35rem; }


/* ════════════════════════════════════════════
   11. VISIBILITÉ DU NOM DE L'ASSOCIATION
   ════════════════════════════════════════════
   Le nom est masqué dans la barre à TOUTES les largeurs : le logo
   flottant porte déjà l'identité, et la marque texte (large) faisait
   doublon tout en étranglant le menu sur les grands écrans (> 1450px),
   où elle réapparaissait et poussait des liens dans le sur-menu « Plus »
   alors qu'il y avait la place. La masquer libère ~280px → tous les liens
   de 1er niveau tiennent (centrage conservé) ; « Plus » ne se déclenche
   plus que si le menu est réellement trop large. */
.nav__brand-text { display: none; }


/* ════════════════════════════════════════════
   12. BASCULE COMPACTE — desktop court (≤ 890px de hauteur)
   ════════════════════════════════════════════
   Quand la version pleine ne tient plus en hauteur :
   - les cartes « Nos missions » passent en horizontal, la
     description s'affiche en tooltip flottant ;
   - le projet phare (colonne gauche du rang supérieur) se resserre
     encore : description sur 2 lignes, corps réduit ;
   - l'agenda (colonne droite du rang supérieur) reste empilé ;
   - « À lire » reste inchangé (pas de compaction). */
@media (min-width: 1181px) and (max-height: 890px) {

  /* Projet phare : cran de compaction supplémentaire */
  .missions-split .projet          { min-height: 170px; }
  .missions-split .projet__body    { padding: 0.85rem 1rem 0.95rem; }
  .missions-split .projet__body h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
  .missions-split .projet__desc p  { -webkit-line-clamp: 2; font-size: 0.85rem; }

  /* Agenda : cartes événement resserrées */
  .missions-split .event           { padding: 0.45rem 0.75rem; }

  /* Cartes missions horizontales + tooltip */
  .missions-split .actions__grid { gap: 0.5rem; }
  .missions-split .action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    position: relative;
    overflow: visible;
  }
  .missions-split .action__icon     { width: 30px; height: 30px; margin-bottom: 0; }
  .missions-split .action__icon svg { width: 15px; height: 15px; }
  .missions-split .action h3        { font-size: 0.82rem; margin-bottom: 0; }

  /* La description devient un tooltip flottant */
  .missions-split .action p {
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 60;
    width: max-content;
    max-width: 220px;
    padding: 0.5rem 0.7rem;
    background: var(--vert-fonce);
    color: white;
    font-size: 0.74rem;
    line-height: 1.35;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }
  .missions-split .action p::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--vert-fonce);
  }
  .missions-split .action:hover p {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .missions-split .action:hover { transform: none; }

  /* (L'agenda garde sa pile verticale de la colonne droite — layout de
     base du split réorganisé, section 9.) */

  /* Section-head condensé + footer resserré (hauteur courte) */
  .section-head             { margin-bottom: 0.7rem; }
  .section-head .kicker     { margin-bottom: 0.35rem; }
  .section-head h2          { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  .section-head .lead       { display: none; }
  .footer                   { padding: 0.85rem 2rem 0.6rem; }
  .footer__inner            { gap: 1.75rem; }

  /* Bande partenaires compactée (préserve le 100vh) */
  .partners .partner__link  { height: 44px; padding: 0.3rem 0.6rem; }
  .partners .partner__logo  { max-height: 32px; max-width: 110px; }
}


/* ════════════════════════════════════════════
   13. RESPONSIVE
   ════════════════════════════════════════════ */

/* Étape intermédiaire (1181–1320px) : on resserre la colonne de
   gauche (actualité vedette) sans toucher au reste de la navbar. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .content-grid { grid-template-columns: 380px 1fr; }
}

/* ─── Étape « nav allégée » — déclenchée dès 1180px ──
   La mise en page de la navbar (grille auto/1fr/auto + conteneur centré)
   est INCHANGÉE ici : elle est la même à toutes les largeurs, ce qui évite
   tout saut. On ne fait que COMPACTER les éléments (gaps, tailles) pour
   gagner de la place ; le priority+ replie au besoin. Pas de burger ici. */
@media (max-width: 1180px) {
  /* Nav plus légère : mêmes éléments qu'en desktop, plus compacts */
  .nav__menu                { gap: 0.1rem; }
  .nav__menu a              { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
  .nav__right               { gap: 0.5rem; }
  .nav__socials             { gap: 0.2rem; }
  .nav__socials .social     { width: 26px; height: 26px; }
  .nav__socials .social svg { width: 11px; height: 11px; }
  .nav__right > .btn        { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

  /* Désactivation du fit-to-viewport ; flux naturel scrollable */
  html                      { scroll-snap-type: none; }
  .page                     { min-height: auto; }
  .page--1, .page--2 {
    height: auto;
    overflow: visible;
  }
  .page--2 {
    display: block;
    padding-top: 4.5rem;
    gap: 0;
  }

  /* Hero : hauteur fixe */
  .hero {
    flex: none;
    height: 300px;
    container-type: normal;
  }
  .hero__inner              { padding-top: 4rem; }
  .hero__content h1         { font-size: clamp(1.75rem, 4vw, 2.5rem); }
  .hero__content p          { font-size: 1rem; }

  /* Mise en pile : actualité vedette puis grille actus.
     Les blocs reprennent une hauteur naturelle. */
  .content-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-col > .card--feature { flex: none; }
  .news__grid               { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .card__img                { height: 130px; }
  /* Vedette empilée : hauteur naturelle (image en tête + corps). */
  .card--feature .card__excerpt { flex: none; overflow: visible; }
  .card--feature .link      { margin-top: auto; }

  /* Sections page 2 en pile : projet phare, agenda, missions, liens.
     Le projet phare reprend de la hauteur (image de fond visible) et sa
     description s'étale à nouveau sur toute la largeur. */
  .actions                  { padding: 1.5rem 0; }
  .resources                { padding: 0.5rem 0 2rem; }
  .missions-split {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "projet" "events" "actions" "resources";
    gap: 2.5rem;
  }
  .missions-split .projet   { min-height: 320px; }
  .projet__body > p,
  .projet__desc p           { max-width: 100%; }
  .missions-split .actions__grid { grid-template-columns: repeat(4, 1fr); }

  /* Bande partenaires : flux naturel (page 2 en display:block) */
  .partners                 { margin: 0 auto 2rem; }

  .footer__inner            { flex-wrap: wrap; }
}

/* Les réseaux sociaux restent visibles jusqu'au passage en mode burger
   (≤ 768px) : le priority+ se charge de la place du menu (repli dans « Plus »)
   sans qu'on ait à masquer les icônes à un seuil réglé à la main. */

/* Le bouton « Nous contacter » reste visible jusqu'au passage en mode burger
   (≤ 768px, où il est masqué et remplacé par le lien .nav__menu-contact dans
   le panneau déroulant). Entre-temps, c'est le priority+ qui gère la place du
   menu — plus besoin de masquer le bouton à un seuil réglé à la main. */

@media (max-width: 900px) {
  .section-head h2 { white-space: normal; }
}

@media (max-width: 768px) {
  .news__grid               { grid-template-columns: 1fr; }
  .actions__grid            { grid-template-columns: repeat(2, 1fr); }
  .missions-split .actions__grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero mobile : plus haut, texte abaissé sous le logo, ramené au
     bord gauche de l'écran. */
  .hero                     { height: 460px; }
  .hero__inner {
    align-items: flex-start;
    padding-top: 170px;     /* sous le logo (hauteur 140 + petit gap) */
    padding-left: 1.25rem;  /* proche du bord gauche */
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .footer__nav-col          { align-items: flex-start; }
  .footer__nav              { justify-content: flex-start; }
  .footer__contact-col      { text-align: left; }

  /* Bande partenaires mobile : logos réduits (la pile libellé/logos est
     désormais la règle de base) */
  .partners__grid           { gap: 0.5rem 0.7rem; }
  .partner__link            { height: 46px; padding: 0.3rem 0.6rem; }
  .partner__logo            { max-height: 36px; max-width: 110px; }
}

/* ════════════════════════════════════════════
   ─── NOUVEAU MODE MOBILE (≤ 740px) ───────────
   Déclenché quand le nom de l'association est à
   nouveau masqué. La navbar est entièrement cachée
   (la pill devient invisible et ses éléments sont
   retirés), seul le burger flotte au bord droit de
   l'écran. Le menu s'ouvre en panneau déroulant
   ancré sous le burger.
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* La pill devient invisible (transparente, sans bordure ni ombre) */
  .nav__menu-contact   { display: flex; }
  .nav__inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    height: auto;
    padding: 0;
    pointer-events: none;
  }
  .nav > .container       { width: auto; max-width: none; padding-inline: 0; }

  /* On masque tout le contenu de la navbar sauf le burger */
  .nav__inner > .nav__brand,
  .nav__right > .nav__socials,
  .nav__right > .btn      { display: none; }
  .nav__right             { pointer-events: auto; }

  /* Burger en position fixe, au bord droit de l'écran */
  .nav__burger {
    display: flex;
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--sh-md);
    z-index: 110;
    pointer-events: auto;
  }

  /* Menu déroulant en position fixe, ancré sous le burger à droite */
  .nav__menu {
    display: none;
    position: fixed;
    top: calc(1rem + 40px + 0.5rem);
    right: 1rem;
    left: auto;
    width: max-content;
    min-width: 200px;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    pointer-events: auto;
    z-index: 110;
  }
  .nav--open .nav__menu     { display: flex; }
  .nav__menu a              { padding: 0.65rem 1rem; width: 100%; }

  /* Sous-menus : en flux, indentés dans le panneau burger */
  .nav__item { display: contents; }
  .nav__sub {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 0 0.9rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav__sub::before { display: none; }
  .nav__sub a       { font-size: 0.85rem; }
}


/* ════════════════════════════════════════════
   PAGES INTÉRIEURES — contenu éditorial
   (article seul, pages statiques, listes d'articles)
   Classes partagées remplaçant les styles en ligne
   répétés d'un template à l'autre.
   ════════════════════════════════════════════ */
.page--interior              { padding-top: 7rem; }
.page--interior > .container { padding-bottom: 4rem; }

/* En-tête de page (grand titre), aligné à gauche avec clearance logo flottant */
.page__head {
  text-align: left;
  margin-bottom: 1.5rem;
  padding-left: 9rem; /* logo ≈ 160 px bord droit ; container padding ≈ 40 px → marge ≥ 20 px */
}
@media (max-width: 900px) {
  .page__head { padding-left: 0; }
}

/* Corps de texte éditorial — GABARIT CIBLE unique des pages intérieures,
   cohérent avec la typographie de l'accueil :
   - largeur de colonne : 760 px max (confort de lecture) ;
   - alignement : à gauche, jamais justifié (comme les textes de l'accueil) ;
   - rythme vertical : interligne 1.7, paragraphes espacés de 1.1rem,
     titres 1.8rem au-dessus / 0.7rem en dessous (cf. règles plus bas) ;
   - marges : héritées du .container parent (+ 4rem en pied de page).
   Les écarts du contenu migré (styles inline) sont neutralisés plus bas
   (§ « Alignements inline hérités de l'ancien éditeur »).
   flow-root : clôt les flottants (alignleft/right) pour que le footer
   (.single__footer) et le bouton de retour (.page__back) passent dessous. */
.page__content {
  max-width: 760px;
  line-height: 1.7;
  text-align: left;
  display: flow-root;
}

/* Images insérées dans le contenu : jamais plus larges que la colonne */
.page__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* Alignements WordPress (classes des images du contenu migré) */
.page__content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.page__content .alignleft {
  float: left;
  margin: 0.4rem 1.5rem 1rem 0;
  max-width: 50%;
}
.page__content .alignright {
  float: right;
  margin: 0.4rem 0 1rem 1.5rem;
  max-width: 50%;
}
.page__content .alignnone { height: auto; }

/* Légendes d'images */
.page__content .wp-caption { max-width: 100%; }
.page__content .wp-caption-text {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--gris-mid);
}

/* Mobile : les images alignées passent en pleine largeur */
@media (max-width: 640px) {
  .page__content .alignleft,
  .page__content .alignright {
    float: none;
    display: block;
    margin: 1rem auto;
    max-width: 100%;
  }
  /* Rangées d'images multiples : empilées et centrées */
  .page__content p:has(img ~ img),
  .page__content p:has(a ~ a > img),
  .page__content p:has(a > img ~ a) { flex-direction: column; align-items: center; }
  .page__content .wp-block-columns { flex-direction: column; }
  /* Titres : échelle réduite */
  .page__content h2 { font-size: 1.4rem; }
  .page__content h3 { font-size: 1.2rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CONTENU ÉDITORIAL GÉNÉRIQUE
   Couche de style scopée sous .page__content (articles + pages). Elle redonne
   un rendu propre à n'importe quel agencement de paragraphes / images / listes
   issu de l'éditeur, SANS toucher au contenu en BDD. La portée .page__content
   prime sur les resets globaux (a, ul, img) sans avoir à les modifier.
   ────────────────────────────────────────────────────────────────────────── */

/* Liens du corps de texte (le reset global les rend invisibles).
   On exclut boutons / pilules / liens utilitaires et les liens enrobant une image. */
.page__content a:not(.btn):not(.tag-pill):not(.link) {
  color: var(--vert-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast);
}
.page__content a:not(.btn):not(.tag-pill):not(.link):hover { color: var(--vert-fonce); }
.page__content a:has(> img) { text-decoration: none; }

/* Listes (le reset global supprime les puces) */
.page__content ul,
.page__content ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.page__content ul { list-style: disc; }
.page__content ol { list-style: decimal; }
.page__content li { margin-bottom: 0.35rem; }
.page__content li > ul,
.page__content li > ol { margin: 0.35rem 0; }

/* Rythme des paragraphes. Les text-align inline du contenu migré sont
   neutralisés plus bas (§ « Alignements inline hérités de l'ancien éditeur »). */
.page__content p { margin: 0 0 1.1rem; }
.page__content p:last-child { margin-bottom: 0; }
.page__content > :first-child { margin-top: 0; }

/* Titres dans le contenu : police d'affichage Fraunces, échelle harmonisée */
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5,
.page__content h6 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--vert-fonce);
  margin: 1.8rem 0 0.7rem;
  text-wrap: balance;
}
.page__content h2 { font-size: 1.6rem; }
.page__content h3 { font-size: 1.3rem; }
.page__content h4 { font-size: 1.1rem; }
.page__content h5 { font-size: 1rem; }
.page__content h6 {
  font-size: 0.9rem;
  color: var(--gris-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Citations / séparateurs / figures */
.page__content blockquote {
  margin: 1.5rem 0;
  padding: 0.6rem 0 0.6rem 1.2rem;
  border-left: 3px solid var(--vert-clair);
  color: var(--gris-mid);
  font-style: italic;
}
.page__content blockquote p:last-child { margin-bottom: 0; }
.page__content hr { border: none; height: 1px; background: var(--gris-clair); margin: 2rem 0; }
.page__content figure { margin: 1.5rem 0; }
.page__content figure img { border-radius: var(--r-md); }
.page__content figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--gris-mid); }

/* Plusieurs images dans un même paragraphe → rangée souple côte à côte
   (sans casser une image flottante seule alignleft/right ni aligncenter). */
.page__content p:has(img ~ img),
.page__content p:has(a ~ a > img),
.page__content p:has(a > img ~ a) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  justify-content: center;
}
.page__content p:has(img ~ img) img,
.page__content p:has(a ~ a > img) img,
.page__content p:has(a > img ~ a) img { width: auto; max-width: 100%; }

/* Blocs Gutenberg (défensif : contenu futur). Plafonnés à la colonne (design figé). */
.page__content .wp-block-image,
.page__content .wp-block-gallery,
.page__content .wp-block-embed,
.page__content .wp-block-quote,
.page__content .wp-block-separator,
.page__content .wp-block-button { margin: 1.5rem 0; }
.page__content .wp-block-image img { border-radius: var(--r-md); height: auto; }
.page__content .wp-block-image figcaption { font-size: 0.85rem; color: var(--gris-mid); }
.page__content .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.page__content .wp-block-gallery .wp-block-image { margin: 0; flex: 1 1 180px; }
.page__content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.page__content .wp-block-column { flex: 1 1 240px; }
.page__content .wp-block-embed iframe { max-width: 100%; }
.page__content .wp-block-button__link {
  display: inline-block;
  background: var(--vert-fonce);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.3rem;
  border-radius: var(--r-full);
  font-weight: 600;
}
.page__content .wp-block-button__link:hover { background: var(--vert-moyen); }
.page__content .wp-block-separator { border: none; height: 1px; background: var(--gris-clair); }
.page__content .wp-block-quote {
  border-left: 3px solid var(--vert-clair);
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--gris-mid);
}
.page__content .alignwide,
.page__content .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }

/* Neutralisation des artefacts de migration (anciens plugins / collages bureautiques).
   Attribut HTML align (div/p/titres) → alignement du gabarit ; un simple
   « inherit » suffit (l'attribut présentationnel perd face à toute règle CSS).
   Les blocs contenant un média gardent leur centrage (images centrées volontaires). */
.page__content :is(div, p, h1, h2, h3, h4, h5, h6)[align]:not(:has(img, iframe, video, embed, object)) {
  text-align: inherit;
}
.page__content .tribe_events,
.page__content [class*="type-tribe_events"] { all: unset; display: block; }
.page__content p.western { margin: 0 0 1.1rem; font-family: inherit; }

/* ── Alignements inline hérités de l'ancien éditeur ──
   Le contenu migré est truffé de text-align inline (justifié : ~420 contenus,
   centré : ~130) qui priment sur toute règle du thème : seul !important peut
   les neutraliser (choix assumé, scopé à .page__content ; on ne réécrit PAS
   la BDD). Règle cible : texte à gauche partout, comme l'accueil.
   - justifié → gauche, toujours (jamais légitime dans le design) ;
   - centré   → gauche pour le texte seul ; les centrages légitimes sont
     préservés : blocs contenant un média, et légende centrée placée juste
     sous un paragraphe image (exception plus bas) ;
   - text-align: right (rare, signatures) et retraits inline (padding-left
     d'énumérations) volontairement conservés.
   Portée limitée aux blocs de texte : les cellules de tableaux et les
   légendes .wp-caption ne sont pas concernées. */
.page__content :is(p, div, h1, h2, h3, h4, h5, h6, li, blockquote)[style*="text-align: justify" i],
.page__content :is(p, div, h1, h2, h3, h4, h5, h6, li, blockquote)[style*="text-align:justify" i] {
  text-align: left !important;
}
.page__content :is(p, div, h1, h2, h3, h4, h5, h6, li, blockquote)[style*="text-align: center" i]:not(:has(img, iframe, video, embed, object)),
.page__content :is(p, div, h1, h2, h3, h4, h5, h6, li, blockquote)[style*="text-align:center" i]:not(:has(img, iframe, video, embed, object)) {
  text-align: left !important;
}
/* Exception légende : un paragraphe centré qui suit immédiatement un paragraphe
   image reste centré (motif migré : image puis « <p centré><em>Source…</em> »).
   Déclarée après la neutralisation et plus spécifique (0,2,4 vs 0,2,2) → gagne. */
.page__content p:has(img) + p[style*="text-align: center" i]:not(:has(img)),
.page__content p:has(img) + p[style*="text-align:center" i]:not(:has(img)) {
  text-align: center !important;
}

/* Polices inline (font-family) héritées de l'ancien éditeur WYSIWYG : présentes
   dans le contenu migré (ex. <span style="font-family: Arial">). Un style inline
   prime sur tout sélecteur du thème → on réimpose les polices du thème (seul le
   !important bat l'inline). On ne touche PAS aux font-size / color inline. */
.page__content [style*="font-family"] {
  font-family: var(--font) !important;
}
/* Titres : conserver la police d'affichage même si un font-family inline traîne
   (sur le titre lui-même ou sur un span enfant). */
.page__content :is(h1, h2, h3, h4, h5, h6)[style*="font-family"],
.page__content :is(h1, h2, h3, h4, h5, h6) [style*="font-family"] {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* Projet phare présenté seul (page dédiée) */
.projet--standalone {
  max-width: 880px;
  min-height: 340px;
  margin-bottom: 2.5rem;
}

/* Image d'illustration (vignette d'article seul) */
.page__media {
  width: 100%;
  max-width: 820px;
  border-radius: var(--r-md);
  margin-bottom: 2rem;
}

/* Lien de retour / pagination en bas de contenu */
.page__back,
.page__pagination            { margin-top: 2.5rem; }

/* ── Tableaux ──────────────────────────────────────────────────────────
   Deux origines, MÊME rendu :
   - en local, le repli du thème génère « .ene-table » (cf. functions.php) ;
   - en ligne, le plugin TablePress génère « .tablepress ».
   Les règles ciblent les deux et sont préfixées par « main » pour primer sur
   la feuille de style par défaut de TablePress (en-tête bleu) sans !important.
   ──────────────────────────────────────────────────────────────────────── */
.ene-table-wrap {
  width: 100%;
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
}
main .ene-table,
main .tablepress {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
main .ene-table th,
main .ene-table td,
main .tablepress th,
main .tablepress td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--gris-clair);
  vertical-align: top;
  background: white;
}
main .ene-table thead th,
main .ene-table tfoot th,
main .tablepress thead th,
main .tablepress tfoot th {
  background: var(--vert-pale);
  color: var(--texte);
  font-weight: 600;
}
main .ene-table tbody tr:nth-child(even) td,
main .tablepress tbody tr:nth-child(even) td {
  background: var(--fond);
}
main .ene-table tbody tr:last-child td,
main .tablepress tbody tr:last-child td {
  border-bottom: none;
}
main .ene-table a,
main .tablepress a {
  color: var(--texte);
  text-decoration: underline;
}

/* TablePress en ligne : neutralise l'habillage DataTables résiduel
   (au cas où use_datatables ne serait pas pris en compte) et les flèches de
   tri, pour rester identique à la table simple du local. */
main .tablepress thead th {
  background-image: none !important;
  cursor: default;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  display: none;
}


/* ── Page « Adhérents » : bascule Liste / Cartes ── */
.adherents__toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 1.5rem 0 0.5rem;
}
.adh-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--gris-clair);
  border-radius: 999px;
}
.adh-toggle__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gris-mid);
  transition: background 0.15s ease, color 0.15s ease;
}
.adh-toggle__btn.is-active {
  background: white;
  color: var(--texte);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Affichage conditionnel selon la vue active (sélecteurs qualifiés .adherents
   pour primer sur la mise en page .adherents__cards définie plus bas). */
.adherents .adherents__cards,
.adherents .adherents__map { display: none; }
.adherents.view-cards .adherents__cards { display: grid; }
.adherents.view-map .adherents__map { display: block; }
.adherents.view-cards .adherents__list,
.adherents.view-map .adherents__list { display: none; }

/* Carte Leaflet */
#adh-map {
  height: 520px;
  width: 100%;
  margin: 1rem 0 0.5rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  position: relative;
  z-index: 0;
}
.adherents__map-note {
  margin: 0 0 2rem;
  font-size: 0.85rem;
  color: var(--gris-mid);
}
.adherents__map .leaflet-popup-content strong { color: var(--texte); }
.adherents__map .leaflet-popup-content span { color: var(--gris-mid); }

/* Grille de cartes */
.adherents__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.adh-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
}
.adh-card__tag {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: hsl(var(--tag-h, 130) 45% 92%);
  color: hsl(var(--tag-h, 130) 45% 28%);
}
.adh-card__name {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}
.adh-card__name a {
  color: var(--texte);
  text-decoration: none;
}
.adh-card__name a:hover {
  text-decoration: underline;
}
.adh-card__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gris-mid);
}

/* Déclencheurs de la carte au survol (lignes du tableau + cartes) */
.adh-trigger { cursor: help; }
.adherents__cards .adh-trigger { cursor: pointer; }
.adh-trigger:focus-visible {
  outline: 2px solid var(--vert-moyen);
  outline-offset: 2px;
}

/* Carte flottante au survol / focus : panneau unique en position fixed,
   rempli en JS depuis les data-* du déclencheur (voir page-adherents.php). */
.adh-pop {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.adh-pop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.adh-pop__logo {
  align-self: flex-start;
  max-width: 100%;
  max-height: 64px;
  height: auto;
  object-fit: contain;
}
.adh-pop__sigle {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texte);
}
.adh-pop__nom {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte);
}
.adh-pop__commune {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vert-moyen);
}
.adh-pop__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--gris-mid);
}
.adh-pop__link {
  align-self: flex-start;
  margin-top: 0.2rem;
}


/* ════════════════════════════════════════════
   Pages hors accueil : pas de scroll-snap / smooth.
   Le document défile normalement et le pied de page suit le contenu
   (il se place en bas de la page, pas épinglé au bas de l'écran).
   ════════════════════════════════════════════ */
html.no-snap {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* Sticky-footer souple : la page fait au moins la hauteur de l'écran pour
   que le pied de page ne remonte pas quand le contenu est court, mais le
   document grandit et défile naturellement dès que le contenu dépasse.
   Fond transparent : laisse voir le calque fixe .site-bg (image du hero)
   posé par header.php sur toutes les pages hors accueil. */
html.no-snap body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
}
/* ── Fond image des pages intérieures : voile de lisibilité fixe ──
   Déclinaison du mécanisme .voile-page de la page 2 de l'accueil (cf. §9) :
   le calque fixe .site-bg transparaît sous toute la page (contenu, marges,
   pourtour du footer), tamisé par un voile lui aussi fixé au viewport.
   body::after (dernier de l'ordre de peinture parmi les z-index négatifs)
   passe AU-DESSUS du .site-bg tout en restant sous le contenu. Voile plus
   uniforme que sur l'accueil : les pages intérieures portent des colonnes de
   texte longues qui traversent tout l'écran au défilement, la zone dense
   couvre donc l'essentiel du viewport (contrastes AA sur le texte), seuls les
   bords laissent davantage transparaître la couleur de l'image. */
html.no-snap body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Repli (navigateurs sans backdrop-filter) : voile crème dense, lisibilité garantie */
  background: rgba(250, 250, 247, 0.92);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.no-snap body::after {
    /* Zone de lecture densifiée (.86/.84 → .90/.88, bords .68 → .72 —
       passe d'accessibilité) : les pages intérieures posent beaucoup de
       petits textes gris-mid/vert-moyen directement sur le voile (dates et
       extraits des rangées d'actualités, liens précédent/suivant…) ; la
       densification les maintient ≥ 4.5:1 sur l'image claire du bandeau.
       Les textes vert-fonce/--texte tiennent ≥ 7:1 même sur image noire. */
    background: linear-gradient(
      175deg,
      rgba(232, 242, 226, 0.72) 0%,     /* haut : teinte vert-pale, sous la nav  */
      rgba(250, 250, 247, 0.90) 20%,    /* zone de lecture : dense sous le texte */
      rgba(250, 250, 247, 0.88) 82%,
      rgba(232, 242, 226, 0.72) 100%    /* bas : l'image apporte la couleur      */
    );
    -webkit-backdrop-filter: blur(7px) saturate(1.3);
    backdrop-filter: blur(7px) saturate(1.3);
  }
}
/* Le contenu pousse le pied de page vers le bas sans jamais se rétrécir. */
html.no-snap main {
  flex: 1 0 auto;
}
/* Sélecteur « section.page » et non « .page » : WordPress ajoute la classe
   « page » au <body> des pages statiques. Sans cette restriction, ce reset
   mettrait min-height:0 sur le <body>, annulant le min-height:100vh défini
   plus haut et empêchant le pied de page de descendre en bas de l'écran. */
html.no-snap section.page {
  min-height: 0;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
/* Le pied de page suit le contenu, en bas de la page.
   margin-top:auto absorbe l'espace restant : si le contenu est plus court que
   l'écran, le pied descend en bas de la fenêtre ; sinon il suit le contenu. */
html.no-snap .site-footer-wrap {
  flex: 0 0 auto;
  margin-top: auto;
}


/* ════════════════════════════════════════════
   16. PAGE ACTUALITÉS — layout fit-to-screen
   Grille + pagination + footer tiennent dans un seul viewport.
   Hauteurs de cartes uniformes quel que soit le contenu.
   ════════════════════════════════════════════ */

/* ── Pagination WordPress (page-numbers) ────────────────────── */
.page__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.page__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vert-fonce);
  background: transparent;
  border: 1px solid var(--gris-clair);
  text-decoration: none;
  transition: all var(--t-fast);
}
.page__pagination .page-numbers:hover {
  background: var(--vert-pale);
  border-color: var(--vert-clair);
}
.page__pagination .page-numbers.current {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: white;
}
.page__pagination .page-numbers.dots {
  border-color: transparent;
  pointer-events: none;
}
.page__pagination .prev.page-numbers,
.page__pagination .next.page-numbers {
  padding: 0 0.85rem;
  background: var(--vert-pale);
  border-color: var(--vert-clair);
}
.page__pagination .prev.page-numbers:hover,
.page__pagination .next.page-numbers:hover {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: white;
}

/* ── Fit-to-screen (desktop ≥ 1025px) ──────────────────────── */
@media (min-width: 1025px) {

  /* Corps : hauteur exacte du viewport, pas de défilement vertical. */
  html.no-snap body.actualites-page {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  /* main : toute la hauteur disponible entre nav et footer. */
  html.no-snap body.actualites-page main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Section : flex colonne, remplit main. */
  body.actualites-page .page--actualites {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 7rem;
    overflow: hidden;
  }

  /* Container : flex colonne, remplit la section. */
  body.actualites-page .page--actualites > .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.75rem;
  }

  /* Titre : clearance logo via padding-left (règle de base .page__head).
     On empêche seulement le container-flex de le rétrécir. */
  body.actualites-page .page__head {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
  }

  /* Barre de filtre : hauteur fixe, ne rétrécit jamais. */
  body.actualites-page .actus-filter {
    flex-shrink: 0;
  }

  /* Compteur de résultats : hauteur fixe. */
  body.actualites-page .actus-count {
    flex-shrink: 0;
  }

  /* Liste : absorbe tout l'espace restant, défile en interne. */
  body.actualites-page .actus-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Pagination : compacte, toujours visible sous la liste. */
  body.actualites-page .page__pagination {
    flex-shrink: 0;
    margin-top: 0.5rem;
  }

  /* Message vide : ne doit pas pousser la mise en page. */
  body.actualites-page .actus-empty {
    flex-shrink: 0;
  }
}


/* ════════════════════════════════════════════
   17. COMPOSANTS ACTUALITÉS — liste filtrée + article individuel
   Barre de filtre, liste de rangées, pills d'étiquettes,
   navigation article individuel.
   ════════════════════════════════════════════ */

/* ── Pills d'étiquettes (partagé : liste + article) ─────────── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--vert-pale);
  color: var(--vert-fonce);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.tag-pill:hover {
  background: var(--vert-clair);
}

/* ── Page Contact : formulaire natif + coordonnées ───────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 980px;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
}
.contact-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.contact-form__field--full,
.contact-form__actions { grid-column: 1 / -1; }
.contact-form__field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--vert-fonce);
}
.contact-form__req { color: var(--vert-moyen); }
.contact-form__field input,
.contact-form__field textarea {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-family: inherit;
  background: white;
  color: var(--vert-fonce);
  transition: border-color var(--t-fast);
}
.contact-form__field textarea { resize: vertical; }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--vert-moyen);
}
/* Honeypot : sorti de l'écran (pas display:none, certains robots l'évitent) */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
}

.contact-notice {
  max-width: 980px;
  margin-bottom: 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.9rem;
}
.contact-notice--ok  { background: var(--vert-pale); color: var(--vert-fonce); border: 1px solid var(--vert-clair); }
.contact-notice--err { background: #fdecea; color: #8a2a1d; border: 1px solid #f2c4bd; }

.contact-aside h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--vert-fonce);
  margin-bottom: 0.6rem;
}
.contact-aside ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.contact-aside li { font-size: 0.92rem; line-height: 1.5; }
.contact-aside a  { color: var(--vert-moyen); }
.contact-aside a:hover { text-decoration: underline; }

/* ── Barre de filtre ─────────────────────────────────────────── */
.actus-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gris-clair);
  margin-bottom: 0.6rem;
  position: relative;
}

/* Champ de recherche */
.actus-filter__search {
  position: relative;
  display: flex;
  align-items: center;
}
.actus-filter__icon {
  position: absolute;
  left: 0.6rem;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--gris-mid);
  pointer-events: none;
  flex-shrink: 0;
}
.actus-filter__input {
  padding: 0.32rem 0.75rem 0.32rem 2rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-full);
  font-size: 0.83rem;
  font-family: inherit;
  background: white;
  color: var(--vert-fonce);
  width: 175px;
  transition: border-color var(--t-fast);
}
.actus-filter__input:focus {
  outline: none;
  border-color: var(--vert-moyen);
}

/* Sélecteur d'année */
.actus-filter__select-wrap {
  position: relative;
}
.actus-filter__select {
  padding: 0.32rem 2rem 0.32rem 0.75rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-full);
  font-size: 0.83rem;
  font-family: inherit;
  background: white;
  color: var(--vert-fonce);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A7C59' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.95rem;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.actus-filter__select:focus {
  outline: none;
  border-color: var(--vert-moyen);
}

/* Sélecteur d'étiquettes (details / summary sans JS) */
.actus-filter__tags {
  position: relative;
}
.actus-filter__tags-btn {
  list-style: none;
  padding: 0.32rem 0.85rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-full);
  font-size: 0.83rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--vert-fonce);
  user-select: none;
  background: white;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.actus-filter__tags-btn::-webkit-details-marker { display: none; }
.actus-filter__tags[open] .actus-filter__tags-btn {
  border-color: var(--vert-moyen);
  background: var(--vert-pale);
}
.actus-filter__tags-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 30;
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  box-shadow: 0 4px 18px rgba(0,0,0,0.11);
  padding: 0.65rem 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 0.15rem;
  min-width: 380px;
  max-height: 260px;
  overflow-y: auto;
}
.actus-filter__tag-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.actus-filter__tag-label:hover { background: var(--vert-pale); }
.actus-filter__tag-count {
  color: var(--gris-mid);
  font-size: 0.65rem;
  margin-left: auto;
}

/* Bouton et lien de réinitialisation */
.actus-filter .btn--sm {
  flex-shrink: 0;
}
.actus-filter__reset {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── Compteur de résultats ───────────────────────────────────── */
.actus-count {
  font-size: 0.8rem;
  color: var(--gris-mid);
  margin: 0 0 0.4rem;
}
.actus-empty {
  padding: 2.5rem 0;
  color: var(--gris-mid);
  font-size: 0.95rem;
}

/* ── Liste d'articles ────────────────────────────────────────── */
.actus-list {
  display: flex;
  flex-direction: column;
}

/* ── Rangée d'article ────────────────────────────────────────── */
.actus-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--gris-clair);
  border-left: 3px solid transparent;
  transition: background var(--t-fast), border-left-color 0.2s ease;
  border-radius: var(--r-sm);
}
.actus-row:last-child { border-bottom: none; }
.actus-row:hover {
  background: var(--vert-pale);
  border-left-color: var(--vert-moyen);
}

/* Vignette avec image */
.actus-row__img-wrap {
  display: block;
  width: 96px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.actus-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.actus-row:hover .actus-row__img { transform: scale(1.04); }

/* Placeholder sans image */
.actus-row__img-placeholder {
  width: 96px;
  height: 72px;
  border-radius: var(--r-sm);
  background: var(--vert-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vert-clair);
}
.actus-row__img-placeholder svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* Variante : pas d'image → colonne unique, border-left héritée du parent */
.actus-row--no-img {
  grid-template-columns: 1fr;
  padding-left: 0.75rem;
}

/* Corps de rangée */
.actus-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

/* Ligne méta : date + étiquettes */
.actus-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.actus-row__date {
  font-size: 0.75rem;
  color: var(--gris-mid);
  white-space: nowrap;
}
.actus-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Titre */
.actus-row__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.actus-row__title a {
  color: var(--vert-fonce);
  text-decoration: none;
}
.actus-row__title a:hover { text-decoration: underline; }

/* Extrait */
.actus-row__excerpt {
  font-size: 0.82rem;
  color: var(--gris-mid);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lien "Lire la suite" */
.actus-row .link--arrow {
  font-size: 0.78rem;
  align-self: flex-start;
  margin-top: 0.1rem;
}

/* Scrollbar discrète sur la liste (desktop) */
.actus-list {
  scrollbar-width: thin;
  scrollbar-color: var(--vert-clair) transparent;
}
.actus-list::-webkit-scrollbar { width: 5px; }
.actus-list::-webkit-scrollbar-track { background: transparent; }
.actus-list::-webkit-scrollbar-thumb {
  background: var(--vert-clair);
  border-radius: var(--r-full);
}

/* ── Article individuel ──────────────────────────────────────── */
.single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.single__date {
  font-size: 0.85rem;
  color: var(--gris-mid);
}
.single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* ── Fiche événement : panneau date / horaire / lieu ─────────── */
.event-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  max-width: 760px;
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--vert-pale);
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
}
.event-detail__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--texte);
}
.event-detail__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--vert-moyen);
}
.event-detail__item time { font-weight: 600; }

/* ── Fiche événement enrichie : image, « passé », blocs méta ───────── */
.event-past {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gris-mid);
  background: var(--gris-clair);
  border-radius: var(--r-full);
}

.event-figure {
  max-width: 760px;
  margin: 0 0 1.75rem;
}
.event-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.event-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: 2rem 0 0;
}
.event-meta__block {
  padding: 1rem 1.25rem;
  background: var(--vert-pale);
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
}
.event-meta__block h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vert-fonce);
  margin: 0 0 0.5rem;
}
.event-meta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.92rem;
  color: var(--texte);
}
.event-meta__name { font-weight: 600; color: var(--vert-fonce); }
.event-meta__org + .event-meta__org { margin-top: 0.75rem; }

.event-tax__chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  margin: 0.1rem 0.15rem 0.1rem 0;
  font-size: 0.8rem;
  color: var(--vert-fonce);
  background: white;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-full);
}

.event-cal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 760px;
  margin: 1.5rem 0 0;
}
.event-cal__label {
  margin-right: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vert-fonce);
}

.single__nav-prev,
.single__nav-next { color: var(--vert-moyen); font-size: 0.9rem; }
.single__nav-prev:hover,
.single__nav-next:hover { color: var(--vert-fonce); }

@media (max-width: 700px) {
  .event-meta { grid-template-columns: 1fr; }
}

.single__footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}
.single__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.single__nav-prev,
.single__nav-next {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.single__nav-all { flex-shrink: 0; }

/* ── Responsive mobile (< 768px) ────────────────────────────── */
@media (max-width: 767px) {
  .actus-filter__tags-panel {
    grid-template-columns: repeat(2, 1fr);
    min-width: 260px;
    left: auto;
    right: 0;
  }
  .actus-row {
    grid-template-columns: 80px 1fr;
    gap: 0.65rem;
  }
  .actus-row--no-img {
    grid-template-columns: 1fr;
    padding-left: 0.6rem;
  }
  .actus-row__img-wrap,
  .actus-row__img-placeholder {
    width: 80px;
    height: 60px;
  }
  .single__nav {
    flex-direction: column;
    align-items: stretch;
  }
  .single__nav .btn {
    text-align: center;
    max-width: none;
    white-space: normal;
  }
}


/* ════════════════════════════════════════════
   16. ACCESSIBILITÉ
   (focus visible, masquage accessible, lien d'évitement)
   ════════════════════════════════════════════ */

/* ── Focus visible global ──
   Anneau de focus commun à tous les éléments interactifs (liens, boutons,
   champs, onglets agenda, burger, bascule adhérents, résumés <details>…).
   :focus-visible ne s'affiche qu'à la navigation clavier (pas au clic
   souris), c'est le motif déjà employé dans le thème (.scroll-nav) — pas
   besoin de repli :focus généralisé. Vert-fonce : 9.43:1 sur --fond,
   9.86:1 sur blanc, 8.56:1 sur vert-pale (≥ 3:1 requis pour un indicateur
   de focus) ; l'offset fait ressortir l'anneau du composant lui-même. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 2px;
}

/* Sur le hero (fond photographique), l'anneau vert-fonce serait peu visible
   → anneau blanc (l'ombre portée assure la visibilité quelle que soit
   l'image). */
.hero :is(a, button):focus-visible {
  outline-color: var(--blanc);
}
.hero :is(a, button):focus-visible {
  box-shadow: 0 0 0 6px rgba(26, 42, 26, 0.55); /* liseré sombre autour de l'anneau blanc */
}

/* Champs de formulaire (contact, filtres) : leurs règles :focus posent
   outline:none + bordure vert-moyen (retour visuel au clic). Au clavier,
   on rétablit un anneau net par-dessus (même spécificité, déclaré après →
   prioritaire quand :focus-visible s'applique). */
.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible,
.actus-filter__input:focus-visible,
.actus-filter__select:focus-visible {
  outline: 2px solid var(--vert-fonce);
  outline-offset: 1px;
}

/* ── Masquage accessible (motif WordPress .screen-reader-text) ──
   Texte retiré de l'écran mais lu par les lecteurs d'écran. Requis par le
   lien d'évitement et utilisable pour tout libellé destiné aux seules
   technologies d'assistance. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Lien d'évitement « Aller au contenu » ──
   Premier élément focusable de la page (cf. header.php : <a class="skip-link
   screen-reader-text" href="#…">). Invisible hors focus (masquage ci-dessus),
   il apparaît en plaque vert-fonce/blanc (9.86:1) au premier Tab, au-dessus
   de la nav flottante. */
.skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 400;                 /* au-dessus de la nav flottante et du logo */
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  clip: auto;
  clip-path: none;
  overflow: visible;
  background: var(--vert-fonce);
  color: var(--blanc);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--r-full);
  box-shadow: var(--sh-md);
  outline: 3px solid var(--vert-fonce);
  outline-offset: 2px;
}