/* ==========================================================================
   L'Atelier des Communes — feuille de style du site public. Mobile d'abord.

   Deux niveaux de couleurs :
   - la palette de l'association (terre cuite, ardoise, sauge sur fond pierre),
     utilisée partout par défaut ;
   - les couleurs des blasons des communes, réservées à leurs pages dédiées :
     .page-commune--<slug> redéfinit --accent et les couleurs des composants.
   ========================================================================== */

:root {
  /* Palette de l'association */
  --terre: #b4532f;          /* brique romaine */
  --terre-fonce: #8c3d1f;
  --terre-pale: #f6e7de;
  --ardoise: #2e4e6e;        /* le Rhône */
  --ardoise-fonce: #1f3a55;
  --ardoise-pale: #e4ebf2;
  --sauge: #6f8f55;          /* les coteaux */
  --sauge-fonce: #4b6638;
  --sauge-pale: #e9efe2;

  /* Couleurs des blasons : uniquement sur les pages des communes */
  --srg: #b8161d;
  --srg-fonce: #8f1016;
  --srg-pale: #f8e6e6;
  --sc: #2453c7;
  --sc-fonce: #1a3c96;
  --sc-pale: #e6ecfa;

  /* Accent et couleurs des composants (remplacés sur les pages des communes) */
  --accent: var(--terre);
  --accent-fonce: var(--terre-fonce);
  --accent-pale: var(--terre-pale);
  --c-lieux: var(--sauge);
  --c-actus: var(--ardoise);
  --c-agenda: var(--ardoise);
  --c-portraits: var(--terre);

  --encre: #1f262c;
  --texte: #39404a;
  --texte-doux: #5e6570;
  --pierre: #f6f1e9;
  --pierre-2: #ece4d6;
  --blanc: #fff;
  --bord: #e2d9ca;
  --bord-leger: rgb(70 50 30 / .08);

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --rayon: 14px;
  --rayon-petit: 8px;
  /* Ombres chaudes, en couches : du relief sans dureté */
  --ombre-legere: 0 1px 2px rgb(60 40 20 / .07), 0 2px 6px rgb(60 40 20 / .06);
  --ombre: 0 1px 2px rgb(60 40 20 / .06), 0 4px 10px rgb(60 40 20 / .06), 0 14px 30px -10px rgb(60 40 20 / .16);
  --ombre-forte: 0 2px 4px rgb(60 40 20 / .06), 0 10px 20px rgb(60 40 20 / .08), 0 26px 50px -14px rgb(60 40 20 / .26);
  --largeur: 1200px;
  --gouttiere: clamp(1rem, 4vw, 2rem);
  --espace-section: clamp(2.5rem, 6vw, 4.5rem);
}

.page-commune--saint-romain-en-gal {
  --accent: var(--srg); --accent-fonce: var(--srg-fonce); --accent-pale: var(--srg-pale);
}
.page-commune--sainte-colombe {
  --accent: var(--sc); --accent-fonce: var(--sc-fonce); --accent-pale: var(--sc-pale);
}
.page-commune {
  --c-lieux: var(--accent); --c-actus: var(--accent); --c-agenda: var(--accent); --c-portraits: var(--accent);
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--texte);
  background: var(--pierre);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.2;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--ardoise); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-fonce); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.conteneur--texte { width: min(100% - 2 * var(--gouttiere), 46rem); }
.conteneur--moyen { width: min(100% - 2 * var(--gouttiere), 60rem); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--encre); color: var(--blanc); padding: .6rem 1rem; border-radius: var(--rayon-petit);
}
.lien-evitement:focus { top: 1rem; }

/* Rend toute une carte cliquable à partir du lien de son titre */
.lien-etendu { color: inherit; text-decoration: none; }
.lien-etendu:hover { color: inherit; }
.lien-etendu::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lien-etendu:focus-visible { outline: none; }
.lien-etendu:focus-visible::after { outline: 3px solid var(--ardoise); outline-offset: 2px; border-radius: var(--rayon); }

/* --- Logo ---------------------------------------------------------------- */
.logo-symbole { width: 2.75rem; height: 2.75rem; flex: none; }
.marque { display: flex; align-items: center; gap: .65rem; color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.marque__texte { display: grid; line-height: 1.15; }
.marque__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; }
.marque { flex: none; }
.marque__communes { white-space: nowrap; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }

/* --- En-tête et navigation ----------------------------------------------
   Gauche : logo puis navigation publique. Droite, isolé : espace membres. */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--bord-leger);
  box-shadow: 0 1px 3px rgb(60 40 20 / .05), 0 6px 18px -8px rgb(60 40 20 / .12);
}
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: 4.5rem; flex-wrap: wrap; }
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.navigation a {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-radius: 999px;
  color: var(--encre); text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.navigation a:hover { background: var(--pierre); color: var(--encre); }
.navigation__principale a[aria-current="page"] { color: var(--terre-fonce); background: var(--terre-pale); }
.navigation__intitule { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.navigation__membres a { font-size: .95rem; color: var(--ardoise-fonce); }
.navigation__membres a[aria-current="page"] { background: var(--ardoise-pale); }
.navigation__compte { border: 1px solid var(--bord); background: var(--blanc); box-shadow: var(--ombre-legere); padding-left: .4rem !important; }
.navigation__compte:hover { border-color: var(--ardoise); }
.navigation__compte[aria-current="page"] { background: var(--ardoise) !important; color: var(--blanc) !important; border-color: var(--ardoise); }
.navigation__icone { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--ardoise-pale); fill: none; stroke: var(--ardoise); stroke-width: 2; stroke-linecap: round; }
.avatar {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ardoise); color: var(--blanc); font-size: .72rem; font-weight: 700; letter-spacing: .02em; flex: none;
}
.navigation__compte[aria-current="page"] .avatar { background: var(--blanc); color: var(--ardoise); }

.menu-bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 600; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 999px; padding: .45rem .9rem; cursor: pointer;
  box-shadow: var(--ombre-legere);
}
.menu-bouton__icone, .menu-bouton__icone::before, .menu-bouton__icone::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s;
}
.menu-bouton__icone { position: relative; }
.menu-bouton__icone::before, .menu-bouton__icone::after { content: ""; position: absolute; left: 0; }
.menu-bouton__icone::before { top: -6px; }
.menu-bouton__icone::after { top: 6px; }
.menu-bouton[aria-expanded="true"] .menu-bouton__icone { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-bouton__icone::before { transform: translateY(6px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__icone::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1259px) {
  /* Avec JavaScript : menu repliable. Sans JavaScript, la navigation reste visible. */
  .js .navigation { display: none; }
  .js .navigation.est-ouverte { display: grid; }
  .navigation { width: 100%; gap: 1rem; padding-bottom: 1rem; }
  .navigation ul { flex-direction: column; }
  .navigation a { border-radius: var(--rayon-petit); padding: .75rem; }
  .navigation__membres { border-top: 1px solid var(--bord); padding-top: 1rem; display: grid; gap: .4rem; }
  .navigation__compte { justify-content: flex-start; }
}
@media (min-width: 1260px) {
  .menu-bouton { display: none; }
  .entete__barre { flex-wrap: nowrap; }
  .navigation { display: flex; align-items: center; flex: 1; gap: 1rem; }
  .navigation__principale a, .navigation__membres a:not(.navigation__compte) { padding-inline: .65rem; }
  .navigation__principale { flex: 1; }
  .navigation__membres { display: flex; align-items: center; gap: .15rem; padding-left: 1rem; border-left: 1px solid var(--bord); }
  /* Même hauteur pour tous les liens (pastilles et macaron « Mon espace ») : bords hauts et bas alignés */
  .navigation a { height: 2.5rem; padding-block: 0; }
  .navigation__intitule { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Gestionnaire aussi membre : un lien « Gestion » de plus. Tant que la barre est étroite,
   « Mon espace » se réduit à sa pastille (le libellé reste lu par les lecteurs d'écran). */
@media (min-width: 1260px) and (max-width: 1439px) {
  .navigation__compte--compact { padding-right: .4rem; }
  .navigation__compte--compact .navigation__libelle {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .marque__communes { display: none; }
}

/* --- Boutons et liens ---------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid var(--encre);
  background: transparent; color: var(--encre); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.bouton:hover { background: var(--encre); color: var(--blanc); transform: translateY(-1px); box-shadow: var(--ombre); }
.bouton:active { transform: translateY(0); box-shadow: var(--ombre-legere); }
.bouton--plein { background: var(--encre); color: var(--blanc); box-shadow: var(--ombre-legere); }
.bouton--plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton--clair { border-color: var(--blanc); background: var(--blanc); color: var(--encre); box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.bouton--clair:hover { background: var(--pierre); border-color: var(--pierre); color: var(--encre); box-shadow: 0 8px 22px rgb(0 0 0 / .3); }
.bouton--danger { background: var(--terre-fonce); border-color: var(--terre-fonce); color: var(--blanc); }
.bouton--danger:hover { background: var(--encre); border-color: var(--encre); }
.bouton-lien { font: inherit; color: var(--ardoise); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.lien-fleche { font-weight: 600; text-decoration: none; white-space: nowrap; }
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { text-decoration: underline; }
.lien-danger { color: var(--terre-fonce); }

/* --- Badges de commune (neutres, avec le blason en miniature) ------------ */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
  padding: .2rem .6rem .2rem .4rem; border-radius: 999px;
  background: var(--pierre); color: var(--encre); border: 1px solid var(--bord-leger);
}
.badge img { width: .85rem; height: auto; }
.page-commune .badge { background: var(--accent-pale); color: var(--accent-fonce); }

/* --- La une (bandeau d'accueil) ----------------------------------------- */
.une {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: clamp(26rem, 72vh, 44rem);
  color: var(--blanc); background: var(--encre);
  overflow: hidden;
}
.une__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.une::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(20 16 12 / .55) 0%, rgb(20 16 12 / .15) 55%, transparent 80%),
    linear-gradient(180deg, rgb(20 16 12 / .1) 20%, rgb(20 16 12 / .35) 55%, rgb(20 16 12 / .85) 100%);
}
.une__contenu { padding-block: 3rem clamp(4.5rem, 10vw, 7rem); }
.une__surtitre { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: .75rem; opacity: .92; }
.une__titre { color: var(--blanc); font-size: clamp(2.2rem, 1.4rem + 4vw, 4.25rem); max-width: 16ch; text-shadow: 0 2px 16px rgb(0 0 0 / .3); }
.une__accroche { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 40rem; margin-bottom: 1.75rem; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.une__credit { position: absolute; right: .75rem; top: .5rem; margin: 0; font-size: .72rem; opacity: .85; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.une__blason { width: 4.5rem; margin-bottom: 1rem; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .35)); }
.une .image-absente { position: absolute; inset: 0; z-index: -2; }
.une--commune { min-height: clamp(22rem, 55vh, 34rem); border-bottom: 6px solid var(--accent); }

.mises-en-avant {
  position: relative; z-index: 2;
  display: grid; gap: 1rem; margin-top: -3rem;
}
@media (min-width: 760px) { .mises-en-avant { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: -4rem; } }
.mise-en-avant {
  position: relative; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  padding: 1.25rem 1.5rem; border-top: 4px solid var(--c-actus);
  transition: transform .2s, box-shadow .2s;
}
.mise-en-avant:hover { transform: translateY(-3px); }
.mise-en-avant--portrait { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; align-items: center; border-top-color: var(--c-portraits); }
.mise-en-avant__image { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--blanc), 0 0 0 4px var(--bord), var(--ombre-legere); }
.mise-en-avant__type { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--texte-doux); margin-bottom: .3rem; }
.mise-en-avant__titre { font-size: 1.3rem; margin-bottom: .35rem; }
.mise-en-avant p:last-child { margin: 0; }

/* --- Sections ------------------------------------------------------------ */
.section { padding-block: var(--espace-section); }
.section--pierre { background: var(--pierre-2); box-shadow: inset 0 1px 0 var(--bord-leger), inset 0 -1px 0 var(--bord-leger); }
.section__entete { margin-bottom: 1.75rem; }
.section__entete--ligne { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1.5rem; }
.section__titre { margin-bottom: .25rem; }
.section__intro { color: var(--texte-doux); max-width: 46rem; margin: 0; }

.deux-colonnes { display: grid; gap: 0 3rem; }
@media (min-width: 1024px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .deux-colonnes .grille--actus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-colonnes .grille--actus > :first-child { grid-column: 1 / -1; }
}
.deux-colonnes .section { padding-top: 0; }

/* --- Les deux communes --------------------------------------------------- */
.communes { display: grid; gap: 1rem; }
@media (min-width: 720px) { .communes { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.commune-carte {
  position: relative; display: flex; gap: 1.25rem; align-items: center;
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  border: 1px solid var(--bord-leger); padding: 1.5rem;
  transition: transform .2s, box-shadow .2s;
}
.commune-carte__blason { width: 4rem; flex: none; filter: drop-shadow(0 3px 6px rgb(60 40 20 / .2)); }
.commune-carte__nom { font-size: 1.45rem; margin-bottom: .25rem; }
.commune-carte p { margin: 0; color: var(--texte-doux); }
.commune-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }

/* --- Grilles de cartes --------------------------------------------------- */
.grille { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.carte {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre); border: 1px solid var(--bord-leger);
  transition: transform .2s, box-shadow .2s;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte__corps { padding: 1.1rem 1.25rem 1.35rem; border-top: 3px solid var(--c-lieux); flex: 1; }
.carte--actu .carte__corps { border-top-color: var(--c-actus); }
.carte__surtitre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--texte-doux); margin-bottom: .6rem; }
.carte__titre { font-size: 1.25rem; margin-bottom: .4rem; }
.carte p:last-child { margin-bottom: 0; }

.image-absente { display: grid; place-items: center; background: linear-gradient(135deg, var(--pierre-2), var(--pierre)); aspect-ratio: 3 / 2; }
.image-absente .logo-symbole { width: 30%; height: auto; opacity: .35; }

/* --- Galerie de portraits ------------------------------------------------ */
.galerie { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.galerie--grande { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
@media (max-width: 479px) { .galerie { grid-template-columns: 1fr 1fr; } }
.vignette-portrait {
  position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--encre);
  box-shadow: var(--ombre); transition: transform .2s, box-shadow .2s;
}
.vignette-portrait:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.vignette-portrait__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.vignette-portrait:hover .vignette-portrait__image { transform: scale(1.04); }
.vignette-portrait__legende {
  position: absolute; inset: auto 0 0; padding: 2.5rem 1rem .9rem; color: var(--blanc);
  background: linear-gradient(180deg, transparent, rgb(20 16 12 / .85));
}
.vignette-portrait__legende::before {
  content: ""; display: block; width: 2rem; height: 3px; margin-bottom: .5rem; background: var(--c-portraits); border-radius: 2px;
  filter: brightness(1.35);
}
.vignette-portrait__nom { color: var(--blanc); font-size: 1.1rem; margin: 0 0 .15rem; }
.vignette-portrait p { margin: 0; font-size: .85rem; opacity: .9; line-height: 1.35; }

/* --- Agenda -------------------------------------------------------------- */
.liste-evenements { display: grid; gap: 1rem; }
.evenement {
  position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start;
  background: var(--blanc); border-radius: var(--rayon); padding: 1rem;
  box-shadow: var(--ombre); border: 1px solid var(--bord-leger);
  transition: transform .2s, box-shadow .2s;
}
.evenement:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.evenement__date {
  display: grid; place-items: center; align-content: center; aspect-ratio: 1;
  border-radius: var(--rayon-petit); background: var(--c-agenda); color: var(--blanc); line-height: 1;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15), var(--ombre-legere);
}
.evenement__jour { font-family: var(--police-titre); font-size: 1.7rem; font-weight: 700; }
.evenement__mois { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; }
.evenement__titre { font-size: 1.1rem; margin-bottom: .2rem; }
.evenement__infos { font-size: .88rem; color: var(--texte-doux); margin-bottom: .4rem; }
.evenement__infos::first-letter { text-transform: uppercase; }
.evenement p:last-child { margin: 0; }
.liste-evenements--passes .evenement { opacity: .75; }
.liste-evenements--passes .evenement__date { background: var(--texte-doux); }

/* --- Pages intérieures --------------------------------------------------- */
.page { padding-block: clamp(2rem, 5vw, 3.5rem) var(--espace-section); }
.page__entete { margin-bottom: 1.5rem; }
.page__intro { font-size: 1.15rem; color: var(--texte-doux); max-width: 46rem; }
.fil { font-size: .9rem; color: var(--texte-doux); margin-bottom: .5rem; }
.fiche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--texte-doux); font-size: .92rem; }
.chapo { font-size: 1.2rem; line-height: 1.55; color: var(--encre); }
.texte { max-width: 70ch; }
.texte--grand { font-size: 1.12rem; }
.texte h2 { font-size: 1.5rem; margin-top: 1.5em; }
.credit { font-size: .8rem; color: var(--texte-doux); }
.figure { margin: 1.5rem 0; }
.figure img { border-radius: var(--rayon); width: 100%; box-shadow: var(--ombre); }
.encart { background: var(--pierre-2); border-left: 4px solid var(--sauge); padding: .8rem 1rem; border-radius: var(--rayon-petit); }

.fiche__bandeau { background: var(--encre); }
.fiche__image { width: 100%; max-height: 62vh; object-fit: cover; }
.fiche__bandeau .image-absente { max-height: 40vh; width: 100%; }
.fiche__corps { padding-block: 2rem var(--espace-section); }

.portrait-fiche { display: grid; gap: 2rem; padding-block: clamp(2rem, 5vw, 3.5rem) var(--espace-section); }
@media (min-width: 820px) {
  .portrait-fiche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }
  .portrait-fiche__photo { position: sticky; top: 6rem; }
}
.portrait-fiche__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.portrait-fiche__accroche { font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; color: var(--texte-doux); }

.infos-evenement {
  display: grid; gap: .6rem; background: var(--blanc); border-radius: var(--rayon); padding: 1.1rem 1.25rem;
  box-shadow: var(--ombre); border: 1px solid var(--bord-leger); border-left: 4px solid var(--c-agenda); margin: 0 0 1.5rem;
}
.infos-evenement div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; }
.infos-evenement dt { font-weight: 700; color: var(--encre); }
.infos-evenement dd { margin: 0; }
.infos-evenement dd::first-letter { text-transform: uppercase; }

.credits { padding-left: 1.2rem; }
.credits li { margin-bottom: .5rem; }

/* --- Filtres et pagination ----------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.filtres--secondaires { margin-bottom: 1.75rem; }
.filtres a {
  padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--blanc);
  color: var(--encre); text-decoration: none; font-size: .92rem; font-weight: 500;
  box-shadow: var(--ombre-legere); transition: border-color .15s, box-shadow .15s;
}
.filtres a:hover { border-color: var(--encre); box-shadow: var(--ombre); }
.filtres a[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.filtres--secondaires a { font-size: .85rem; padding: .3rem .8rem; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }

/* --- Messages ------------------------------------------------------------ */
.messages { margin-block: 1rem; }
.message {
  padding: .8rem 1rem; border-radius: var(--rayon-petit); box-shadow: var(--ombre-legere);
  background: var(--ardoise-pale); color: var(--ardoise-fonce); border-left: 4px solid var(--ardoise);
}
.message p { margin: 0; }
.message--success { background: var(--sauge-pale); color: var(--sauge-fonce); border-left-color: var(--sauge); }
.message--error { background: var(--terre-pale); color: var(--terre-fonce); border-left-color: var(--terre); }
.message--warning { background: #fbf1dc; color: #6d4a00; border-left-color: #c8962c; }

/* --- Formulaires ---------------------------------------------------------- */
.champ { margin-bottom: 1.15rem; }
.champ label { display: block; font-weight: 600; color: var(--encre); margin-bottom: .35rem; }
.champ input:not([type="checkbox"]):not([type="file"]):not([type="radio"]), .champ select, .champ textarea, .g-recherche input {
  width: 100%; font: inherit; color: var(--encre);
  padding: .7rem .85rem; border: 1px solid #c4bba9; border-radius: var(--rayon-petit); background: var(--blanc);
  box-shadow: inset 0 1px 2px rgb(60 40 20 / .06);
}
.champ textarea { resize: vertical; min-height: 6rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid rgb(46 78 110 / .3); outline-offset: 0; border-color: var(--ardoise); }
.champ--case { display: flex; align-items: center; gap: .6rem; }
.champ--case label { margin: 0; }
.champ--case input { width: 1.2rem; height: 1.2rem; accent-color: var(--ardoise); }
.champ__aide { font-size: .85rem; color: var(--texte-doux); margin-top: .35rem; }
.champ__aide ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.champ__erreur { color: var(--terre-fonce); font-size: .9rem; font-weight: 600; margin: .35rem 0 0; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--terre) !important; }
.obligatoire { color: var(--terre); }
.champ-code { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

/* --- Pages de compte ------------------------------------------------------ */
.compte {
  min-height: calc(100vh - 4.25rem); display: grid; place-items: center; padding: 2rem var(--gouttiere);
  background:
    radial-gradient(60rem 30rem at 0% 0%, rgb(180 83 47 / .08), transparent 60%),
    radial-gradient(60rem 30rem at 100% 100%, rgb(46 78 110 / .09), transparent 60%);
}
.compte__carte {
  width: min(100%, 28rem); background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); border: 1px solid var(--bord-leger); padding: clamp(1.5rem, 5vw, 2.5rem);
}
.compte__carte h1 { font-size: 1.75rem; }
.compte__logo { display: inline-block; margin-bottom: 1rem; }
.compte__logo .logo-symbole { width: 3.25rem; height: 3.25rem; }
.compte__intro { color: var(--texte-doux); }
.compte__lien { margin: 1.25rem 0 0; font-size: .92rem; }
.compte .bouton--plein { width: 100%; }
.page-compte .pied { display: none; }

/* --- Pied de page ------------------------------------------------------- */
.pied { background: var(--encre); color: #d6d0c6; margin-top: var(--espace-section); font-size: .95rem; }
.pied__grille { display: grid; gap: 2rem 2.5rem; padding-block: 3rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.pied__marque { display: flex; gap: .9rem; align-items: start; grid-column: 1 / -1; max-width: 28rem; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 1.5fr 1.2fr .9fr 1.1fr; } .pied__marque { grid-column: auto; } }
.pied__marque .logo-symbole { width: 3.25rem; height: 3.25rem; background: var(--pierre); border-radius: 12px; padding: .3rem; box-shadow: 0 4px 12px rgb(0 0 0 / .3); }
.pied__marque p { margin: 0; }
.pied strong { color: var(--blanc); font-family: var(--police-titre); font-size: 1.1rem; }
.pied__titre { color: var(--blanc); font-family: var(--police); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pied a { color: #ece8df; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied :focus-visible { outline-color: var(--pierre); }
.pied__contact { font-style: normal; display: grid; gap: .3rem; }
.pied__reseaux { display: flex !important; flex-wrap: wrap; gap: .5rem 1rem !important; margin-top: .9rem !important; }
.pied__communes a { display: inline-flex; align-items: center; gap: .5rem; }
.pied__communes img { width: 1.25rem; }
.pied__legal { border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; color: #b9b3a8; }
.pied__legal-contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.1rem; }
.pied__legal p { margin: 0; }
.pied__legal ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.pied__legal a { color: #d6d0c6; }
.pied__bande { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 5px; }
.pied__bande span:nth-child(1) { background: var(--ardoise); }
.pied__bande span:nth-child(2) { background: var(--sauge); }
.pied__bande span:nth-child(3) { background: var(--terre); }
main:has(> .section--pierre:last-child) + .pied { margin-top: 0; }

/* --- Bandeau de consentement aux cookies ------------------------------- */
.bandeau-cookies {
  position: fixed; z-index: 80; left: var(--gouttiere); right: var(--gouttiere); bottom: var(--gouttiere);
  max-width: 30rem; padding: 1.25rem 1.35rem;
  background: var(--blanc); color: var(--texte); border-radius: var(--rayon);
  border: 1px solid var(--bord-leger); border-top: 4px solid var(--ardoise);
  box-shadow: 0 4px 10px rgb(60 40 20 / .1), 0 24px 60px -12px rgb(60 40 20 / .35);
}
.bandeau-cookies__titre { font-size: 1.15rem; margin-bottom: .35rem; }
.bandeau-cookies p { font-size: .93rem; margin-bottom: 1rem; }
.bandeau-cookies__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bandeau-cookies__actions .bouton { padding: .6rem 1.2rem; flex: 1 1 8rem; }
.bandeau-cookies__lien { flex-basis: 100%; font-size: .88rem; margin-top: .2rem; }

.choix-cookies { background: var(--blanc); border-radius: var(--rayon); padding: 1.1rem 1.25rem; box-shadow: var(--ombre); border: 1px solid var(--bord-leger); margin-bottom: 1.5rem; }
.choix-cookies__boutons { display: flex; flex-wrap: wrap; gap: .6rem; }

.tableau-defile { overflow-x: auto; margin-bottom: 1.5rem; border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--bord-leger); background: var(--blanc); }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--bord-leger); vertical-align: top; }
.tableau th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); background: var(--pierre); }
.tableau tr:last-child td { border-bottom: 0; }

.page--erreur { text-align: center; }

/* --- Membres et votes --------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; line-height: 1.3;
  padding: .2rem .65rem; border-radius: 999px; background: var(--pierre-2); color: var(--encre); white-space: nowrap;
}
.tag--actif, .tag--fait, .tag--verdict-adopte { background: var(--sauge-pale); color: var(--sauge-fonce); }
.tag--ouvert { background: var(--ardoise-pale); color: var(--ardoise-fonce); }
.tag--attente { background: #fbf1dc; color: #6d4a00; }
.tag--renouveler, .tag--verdict-rejete { background: var(--terre-pale); color: var(--terre-fonce); }
.tag--renouveler::before { content: "\21BB"; }

.champ--site_web { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.adhesion { display: grid; gap: 2rem; }
@media (min-width: 900px) { .adhesion { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; } }
.etapes { padding-left: 1.3rem; display: grid; gap: .6rem; }
.carte-formulaire {
  background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--ombre); border: 1px solid var(--bord-leger);
}
.carte-formulaire .bouton--plein { width: 100%; margin-top: .5rem; }

.appel-vote {
  background: var(--ardoise); color: var(--blanc); border-radius: var(--rayon); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  box-shadow: var(--ombre-forte);
}
.appel-vote h2 { color: var(--blanc); font-size: 1.3rem; }
.appel-vote ul { margin: 0; padding-left: 1.2rem; }
.appel-vote a { color: var(--blanc); font-weight: 600; }
.tuiles-membre { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tuile-membre { background: var(--blanc); border-radius: var(--rayon); padding: 1.25rem 1.35rem; box-shadow: var(--ombre); border: 1px solid var(--bord-leger); }
.tuile-membre h2 { font-size: 1.25rem; }
.infos { display: grid; gap: .45rem; margin: 0 0 1rem; }
.infos div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--bord); padding-bottom: .35rem; }
.infos dt { color: var(--texte-doux); }
.infos dd { margin: 0; font-weight: 600; color: var(--encre); text-align: right; }

.liste-votes { display: grid; gap: 1rem; }
.carte-vote {
  position: relative; background: var(--blanc); border-radius: var(--rayon); padding: 1.1rem 1.35rem;
  box-shadow: var(--ombre); border: 1px solid var(--bord-leger); border-left: 4px solid var(--bord);
  transition: transform .2s, box-shadow .2s;
}
.carte-vote:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.carte-vote--ouvert { border-left-color: var(--ardoise); }
.carte-vote--ferme { border-left-color: var(--sauge); }
.carte-vote__entete { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.carte-vote__titre { font-size: 1.2rem; margin-bottom: .25rem; }
.carte-vote__meta { font-size: .88rem; color: var(--texte-doux); margin: 0; }
.carte-vote__action { margin: .5rem 0 0; font-weight: 700; color: var(--ardoise); }
.vide { color: var(--texte-doux); }

.conditions-vote { background: var(--pierre-2); border-radius: var(--rayon); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.conditions-vote h2 { font-size: .95rem; font-family: var(--police); text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); }
.conditions-vote ul { margin: 0 0 .5rem; padding-left: 1.2rem; }

.bulletin { background: var(--blanc); border-radius: var(--rayon); padding: 1.35rem; box-shadow: var(--ombre-forte); border: 1px solid var(--bord-leger); border-top: 4px solid var(--ardoise); margin-bottom: 1rem; }
.bulletin fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.bulletin legend { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 700; color: var(--encre); margin-bottom: .75rem; }
.bulletin__options { display: grid; gap: .5rem; margin-bottom: 1rem; }
.bulletin__option {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  cursor: pointer; font-weight: 600; color: var(--encre); background: var(--pierre); transition: border-color .15s, background-color .15s;
}
.bulletin__option:hover { border-color: var(--ardoise); }
.bulletin__option:has(input:checked) { border-color: var(--ardoise); background: var(--ardoise-pale); box-shadow: inset 0 0 0 1px var(--ardoise); }
.bulletin__option input { width: 1.2rem; height: 1.2rem; accent-color: var(--ardoise); }

.verdict { border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1.25rem; background: var(--pierre-2); border-left: 6px solid var(--texte-doux); }
.verdict--adopte { background: var(--sauge-pale); border-left-color: var(--sauge); }
.verdict--rejete { background: var(--terre-pale); border-left-color: var(--terre); }
.verdict__libelle { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--texte-doux); }
.verdict__texte { margin: .15rem 0 0; font-family: var(--police-titre); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; color: var(--encre); line-height: 1.2; }
.chiffres-vote { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.chiffres-vote div { background: var(--blanc); border: 1px solid var(--bord-leger); border-radius: var(--rayon-petit); padding: .6rem .8rem; box-shadow: var(--ombre-legere); }
.chiffres-vote dt { font-size: .8rem; color: var(--texte-doux); }
.chiffres-vote dd { margin: 0; font-size: 1.35rem; font-weight: 600; color: var(--encre); }
.chiffres-vote dd span { font-size: .85rem; font-weight: 400; color: var(--texte-doux); }
.barres-vote { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: 1rem; }
.barres-vote__texte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .3rem; }
.barres-vote__nom { font-weight: 600; color: var(--encre); display: inline-flex; gap: .5rem; align-items: center; }
.barres-vote__valeur { font-variant-numeric: tabular-nums; color: var(--texte); }
.barres-vote__piste { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--pierre-2); overflow: hidden; }
.barres-vote__barre { fill: var(--ardoise); }
.barres-vote__ligne--gagnante .barres-vote__barre { fill: var(--sauge-fonce); }
.barres-vote__ligne--abstention .barres-vote__barre { fill: #a39b8d; }
.barres-vote__ligne--abstention .barres-vote__nom { font-weight: 400; color: var(--texte-doux); }
.suites { margin-top: 2rem; background: var(--blanc); border-radius: var(--rayon); padding: 1.25rem 1.5rem; box-shadow: var(--ombre); border-left: 4px solid var(--terre); }
.suites h2 { font-size: 1.3rem; }

/* --- Projets et entraide ------------------------------------------------ */
.page__entete--actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.actions-proposer { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag--projet { background: var(--sauge-pale); color: var(--sauge-fonce); }
.tag--solidarite { background: var(--terre-pale); color: var(--terre-fonce); }
.carte-initiative--solidarite .carte__corps { border-top-color: var(--terre); }
.tag--offre { background: var(--ardoise-pale); color: var(--ardoise-fonce); }
.carte-initiative--offre .carte__corps { border-top-color: var(--ardoise); }
.carte-initiative__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .88rem; color: var(--texte-doux); margin: .75rem 0 0 !important; }
.mes-propositions { background: var(--blanc); border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--ombre); border-left: 4px solid #c8962c; }
.mes-propositions h2 { font-size: 1.1rem; }
.mes-propositions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mes-propositions li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.mes-propositions .credit { margin: 0; }

.avertissement-entraide {
  background: var(--blanc); border-radius: var(--rayon); padding: 1.1rem 1.35rem; margin: 1.5rem 0;
  border: 1px solid var(--bord-leger); border-left: 4px solid var(--sauge); box-shadow: var(--ombre-legere); font-size: .95rem;
}
.avertissement-entraide__titre { font-size: 1.1rem; margin-bottom: .5rem; }
.avertissement-entraide__titre::before { content: "\2665  "; color: var(--terre); }
.avertissement-entraide p:last-child { margin-bottom: 0; }
.avertissement-entraide--compact { margin: 0; }

.proposer { display: grid; gap: 2rem; }
@media (min-width: 960px) { .proposer { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; } }

.fiche-initiative { display: grid; gap: 2rem; }
@media (min-width: 960px) {
  .fiche-initiative { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .fiche-initiative__retours { position: sticky; top: 6rem; }
}
.fiche-initiative__retours { background: var(--blanc); border-radius: var(--rayon); padding: 1.25rem 1.35rem; box-shadow: var(--ombre); border: 1px solid var(--bord-leger); }
.fiche-initiative__retours h2 { font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; }
.compteur { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: 999px; background: var(--ardoise); color: var(--blanc); font: 700 .85rem var(--police); }
.retour-formulaire { background: var(--pierre); border-radius: var(--rayon-petit); padding: 1rem; margin-bottom: 1.25rem; }
.retour-formulaire h3 { font-size: 1.05rem; }
.cases { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.cases legend { font-weight: 600; color: var(--encre); margin-bottom: .35rem; }
.case { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.case input { width: 1.1rem; height: 1.1rem; accent-color: var(--ardoise); }
.retour-formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.retours { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.retour { padding: .8rem .9rem; border-radius: var(--rayon-petit); border: 1px solid var(--bord-leger); background: var(--blanc); }
.retour--moi { border-color: var(--ardoise); background: var(--ardoise-pale); }
.retour__nom { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--encre); margin-bottom: .4rem; }
.retour__formes { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.retour__message { margin: 0; font-size: .95rem; }

/* --- Page « L'association » ------------------------------------------- */
.une__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.bouton--contour-clair { border-color: rgb(255 255 255 / .85); color: var(--blanc); background: rgb(20 16 12 / .25); backdrop-filter: blur(4px); }
.bouton--contour-clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--encre); }

.asso-entete {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); text-align: center;
  background:
    radial-gradient(50rem 22rem at 15% 0%, rgb(180 83 47 / .10), transparent 65%),
    radial-gradient(50rem 22rem at 85% 100%, rgb(46 78 110 / .10), transparent 65%);
}
.asso-entete h1 { font-size: clamp(1.7rem, 1rem + 2.6vw, 2.6rem); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 900px) { .asso-entete h1 { white-space: nowrap; } }
.asso-entete .commun { text-align: left; }
.surtitre-page { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terre); margin-bottom: .6rem; }

.objectifs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 760px) { .objectifs { grid-template-columns: 1fr 1fr; } }
.objectif {
  background: var(--blanc); border-radius: var(--rayon); padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--ombre);
  border: 1px solid var(--bord-leger); border-top: 4px solid var(--sauge);
}
.objectif--terre { border-top-color: var(--terre); }
.objectif--ardoise { border-top-color: var(--ardoise); }
.objectif__icone {
  width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; margin-bottom: .9rem;
  fill: none; stroke: var(--sauge-fonce); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--sauge-pale);
}
.objectif--terre .objectif__icone { stroke: var(--terre-fonce); background: var(--terre-pale); }
.objectif--ardoise .objectif__icone { stroke: var(--ardoise); background: var(--ardoise-pale); }
.objectif h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.objectif p { margin: 0; color: var(--texte); }

.droits { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 760px) { .droits { grid-template-columns: 1fr 1fr; } }
.droit { display: flex; gap: 1rem; align-items: flex-start; background: var(--blanc); border-radius: var(--rayon); padding: 1.25rem; box-shadow: var(--ombre); border: 1px solid var(--bord-leger); }
.droit__num {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--ardoise); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15);
}
.droit h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.droit p { margin: 0; font-size: .95rem; }
.asso-action { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; }

.commun {
  position: relative; background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: var(--ombre-forte); border: 1px solid var(--bord-leger); font-size: 1.08rem;
}
.commun::before {
  content: "\201C"; position: absolute; top: -.35em; left: .35em; font-family: var(--police-titre); font-size: 6rem; line-height: 1; color: var(--terre); opacity: .35;
}
.commun h2 { margin-bottom: 1rem; }
.commun__conviction {
  font-family: var(--police-titre); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.55rem); line-height: 1.4; color: var(--encre);
  border-left: 4px solid var(--sauge); padding-left: 1rem; margin: 1.5rem 0 1rem;
}
.commun__conviction--finale { border-left-color: var(--terre); }
.commun__signature { margin: 0; text-align: right; font-style: italic; color: var(--texte-doux); }

/* --- Étiquettes des projets et de l'entraide ---------------------------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; position: relative; z-index: 2; }
.etiquette {
  display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.3; padding: .15rem .55rem;
  border-radius: 999px; background: var(--blanc); color: var(--ardoise-fonce); border: 1px solid var(--ardoise-pale);
  text-decoration: none;
}
a.etiquette:hover { border-color: var(--ardoise); color: var(--ardoise-fonce); }
.filtres--etiquettes { align-items: center; margin-bottom: 1.5rem; }
.filtres--etiquettes a { font-size: .85rem; padding: .3rem .8rem; }
.filtres__intitule { font-size: .85rem; font-weight: 600; color: var(--texte-doux); margin-right: .25rem; }
.filtres__nb { display: inline-block; min-width: 1.2rem; margin-left: .2rem; padding: 0 .3rem; border-radius: 999px; background: var(--pierre-2); font-size: .72rem; text-align: center; color: var(--encre); }
.filtres a[aria-current="true"] .filtres__nb { background: rgb(255 255 255 / .2); color: var(--blanc); }

/* --- Statuts ------------------------------------------------------------- */
.asso-statuts { padding-bottom: var(--espace-section); }
.asso-statuts__carte {
  display: grid; gap: 1rem 1.5rem; align-items: center; background: var(--blanc); border-radius: var(--rayon);
  padding: 1.4rem 1.6rem; box-shadow: var(--ombre); border: 1px solid var(--bord-leger); border-left: 4px solid var(--ardoise);
}
@media (min-width: 760px) { .asso-statuts__carte { grid-template-columns: auto 1fr auto; } }
.asso-statuts__carte h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.asso-statuts__carte p { margin: 0; color: var(--texte); }
.asso-statuts__icone { width: 3rem; height: 3rem; padding: .65rem; border-radius: 50%; background: var(--ardoise-pale); fill: none; stroke: var(--ardoise); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.statuts__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre-legere); border: 1px solid var(--bord-leger); }
.statuts__date { margin: 0; font-weight: 600; color: var(--encre); }
.statuts__texte h2 { font-size: 1.3rem; margin-top: 1.8em; padding-top: .8em; border-top: 1px solid var(--bord); }
.statuts__texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.icone-bouton { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Préférences utilisateur --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .entete, .pied, .filtres, .pagination, .mises-en-avant, .bandeau-cookies { display: none; }
  body { background: var(--blanc); }
  .carte, .evenement, .commune-carte { box-shadow: none; }
}