/* =====================================================================
   Ville de La Bouilladisse — refonte 2026
   Feuille de style unique, sans framework. Pensée pour être reprise telle
   quelle dans un thème WordPress (classes BEM-light, variables CSS).
   ===================================================================== */

/* ---------- 1. Jetons de design (dérivés du logo et des affiches) ---------- */
:root {
  /* Couleurs du logo communal */
  --terre: #d4532f;        /* rouge-terre du logo (fonds, grands titres) */
  --terre-texte: #b3401f;  /* même teinte, contraste AA sur blanc (5.6:1) */
  --soleil: #f5c531;       /* jaune du logo (fonds uniquement) */
  --garrigue: #3f9a58;     /* vert du logo (fonds) */
  --garrigue-texte: #2b7442; /* vert lisible sur blanc (5.4:1) */
  --noir-logo: #141414;

  /* Couleurs des affiches (Forum, Jonctions, Génération Bouill') */
  --marine: #1b2a4a;
  --marine-sombre: #111b31;
  --canard: #1f6e7d;       /* liens, 5.8:1 sur blanc */
  --canard-clair: #d9eef1;

  /* Neutres */
  --encre: #17202f;
  --encre-douce: #46505f;
  --gris: #6b7280;
  --trait: #e3ded4;
  --papier: #ffffff;
  --sable: #f6f2ea;
  --sable-fonce: #ece5d8;

  /* Typographie */
  --f-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --taille-base: 100%;
  --interligne: 1.55;
  --espace-lettres: 0;
  --espace-mots: 0;

  /* Mise en page */
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --largeur: 76rem;
  --rayon: 14px;
  --rayon-sm: 8px;
  --ombre: 0 10px 30px -12px rgb(27 42 74 / .25);
  --transition: 180ms ease;

  color-scheme: light;
}

/* ---------- 2. Base & accessibilité ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--taille-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: var(--interligne);
  letter-spacing: var(--espace-lettres);
  word-spacing: var(--espace-mots);
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--marine);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--canard);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--marine); }

:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

button { font: inherit; color: inherit; cursor: pointer; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Liens d'évitement */
.skip-links {
  position: absolute; top: 0; left: 0; z-index: 1000;
}
.skip-links a {
  position: absolute; left: -999em; top: 0;
  background: var(--marine); color: #fff;
  padding: .75rem 1.25rem; font-weight: 700;
  border-radius: 0 0 var(--rayon-sm) 0; white-space: nowrap;
}
.skip-links a:focus { left: 0; outline-color: var(--soleil); }

.container {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

/* ---------- 3. La « barre » : signature graphique tirée du logo ---------- */
.barre {
  display: inline-block;
  width: 6px; height: 2.2em;
  border-radius: 3px;
  background: linear-gradient(
    to bottom,
    var(--terre) 0 38%,
    var(--soleil) 38% 62%,
    var(--garrigue) 62% 88%,
    var(--noir-logo) 88% 100%
  );
  vertical-align: middle;
}
.barre--h {
  display: block; width: 100%; height: 6px;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--terre) 0 38%,
    var(--soleil) 38% 62%,
    var(--garrigue) 62% 88%,
    var(--noir-logo) 88% 100%
  );
}

.titre-section {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.5rem;
}
.titre-section h2 { margin: 0; flex: 1 1 0; min-width: 0; }
.titre-section .barre { height: 1.6em; flex: none; }
.titre-section__lien {
  margin-left: auto;
  font-weight: 700; white-space: nowrap;
}

/* ---------- 4. En-tête ---------- */
.topbar {
  background: var(--marine);
  color: #fff;
  font-size: .9rem;
}
.topbar .container {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 2.5rem; flex-wrap: wrap;
}
.topbar a, .topbar button {
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 0; background: none; border: 0;
}
.topbar a:hover, .topbar button:hover { text-decoration: underline; }
.topbar__etat { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__etat .puce {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--garrigue); box-shadow: 0 0 0 3px rgb(63 154 88 / .3);
}
.topbar__droite { margin-left: auto; display: flex; gap: 1.25rem; }
.topbar__a11y { font-weight: 700; }

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
}
.entete .container {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 5rem;
}
.marque {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--marine);
}
.marque img { height: 3.1rem; width: auto; }
.marque__nom {
  font-family: var(--f-display); font-weight: 800; font-size: 1.35rem;
  line-height: 1; letter-spacing: -.02em;
}
.marque__nom small {
  display: block; font-family: var(--f-texte); font-weight: 400;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-douce); margin-top: .3rem;
}

.nav { margin-left: auto; }
.nav + .entete__actions { margin-left: 0; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav__bouton {
  background: none; border: 0; border-radius: var(--rayon-sm);
  padding: .6rem .8rem; font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--marine);
}
.nav__bouton:hover, .nav__bouton[aria-expanded="true"] { background: var(--sable); }
.nav__bouton svg { width: .9em; height: .9em; transition: transform var(--transition); }
.nav__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__panneau {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 20rem;
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: .75rem; z-index: 60;
}
.nav__panneau[hidden] { display: none; }
.nav__panneau:not([hidden]) { animation: apparition 180ms cubic-bezier(.2, .7, .3, 1); }
@keyframes apparition {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.nav__panneau ul { list-style: none; margin: 0; padding: 0; }
.nav__panneau a {
  display: block; padding: .5rem .7rem; border-radius: var(--rayon-sm);
  color: var(--encre); text-decoration: none; font-size: .95rem;
}
.nav__panneau a:hover, .nav__panneau a:focus-visible { background: var(--sable); color: var(--marine); }
.nav__panneau--large { min-width: 34rem; }
.nav__panneau--large ul { columns: 2; column-gap: .5rem; }
.nav__panneau--large li { break-inside: avoid; }

.entete__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.entete__actions .btn { white-space: nowrap; }
@media (min-width: 76rem) { .nav__bouton { white-space: nowrap; } }
.bouton-icone {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--trait); background: var(--papier);
  display: inline-grid; place-items: center; color: var(--marine);
}
.bouton-icone:hover { background: var(--sable); }
.bouton-icone svg { width: 1.25rem; height: 1.25rem; }
.burger { display: none; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  min-height: 2.75rem;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--primaire { background: var(--terre); color: #fff; }
.btn--primaire:hover { background: var(--terre-texte); color: #fff; }
.btn--marine { background: var(--marine); color: #fff; }
.btn--marine:hover { background: var(--marine-sombre); color: #fff; }
.btn--contour { border-color: currentColor; color: var(--marine); background: transparent; }
.btn--contour:hover { background: var(--marine); color: #fff; }
.btn--clair { border-color: rgb(255 255 255 / .6); color: #fff; }
.btn--clair:hover { background: #fff; color: var(--marine); }
.btn--petit { padding: .5rem .95rem; min-height: 2.25rem; font-size: .9rem; }

/* ---------- 5. Hero : une seule image, pleine largeur ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; background: var(--marine-sombre);
  min-height: clamp(30rem, 72vh, 44rem);
  display: flex; align-items: center;
}
.hero__fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(17 27 49 / .55), transparent 40%),
    linear-gradient(100deg, rgb(17 27 49 / .94) 0%, rgb(17 27 49 / .82) 38%, rgb(17 27 49 / .35) 68%, rgb(17 27 49 / .15) 100%);
}
.hero .container {
  display: block; padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__contenu { max-width: 40rem; }
.hero__surtitre {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soleil); font-weight: 700; margin-bottom: 1.25rem;
}
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: .45em; }
.hero h1 em { font-style: normal; color: var(--soleil); }
.hero__texte { font-size: 1.15rem; max-width: 32rem; color: rgb(255 255 255 / .88); }
.hero__credit {
  position: absolute; right: var(--gouttiere); bottom: .75rem;
  font-size: .72rem; color: rgb(255 255 255 / .6);
}

.recherche {
  margin-top: 1.75rem;
  display: flex; background: #fff; border-radius: 999px;
  padding: .35rem .35rem .35rem 1.25rem; align-items: center; gap: .5rem;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .45);
  max-width: 36rem;
}
.recherche svg { width: 1.3rem; height: 1.3rem; color: var(--gris); flex: none; }
.recherche input {
  flex: 1; border: 0; font: inherit; font-size: 1.05rem; min-width: 0;
  color: var(--encre); background: transparent; padding: .6rem 0;
}
.recherche input::placeholder { color: var(--gris); }
.recherche input:focus { outline: none; }
.recherche:focus-within { outline: 3px solid var(--soleil); outline-offset: 3px; }
.recherche button { flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }
.chips__label { font-size: .85rem; color: rgb(255 255 255 / .75); margin-right: .25rem; }
.chip {
  display: inline-flex; align-items: center; padding: .4rem .85rem;
  border-radius: 999px; font-size: .9rem; font-weight: 700;
  color: #fff; text-decoration: none;
  border: 1px solid rgb(255 255 255 / .4); background: rgb(17 27 49 / .35);
  transition: background var(--transition);
}
.chip:hover, .chip:focus-visible { background: #fff; color: var(--marine); }

/* Bandeau « aujourd'hui » */
.aujourdhui {
  background: var(--soleil); color: var(--marine);
}
.aujourdhui .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
  min-height: 3.25rem; padding-block: .5rem; font-size: .95rem;
}
.aujourdhui__titre {
  font-family: var(--f-display); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; font-size: .85rem;
}
.aujourdhui__item { display: inline-flex; align-items: flex-start; gap: .5rem; }
.aujourdhui__item svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2em; }
.aujourdhui a { color: inherit; font-weight: 700; }

/* ---------- 6. Sections ---------- */
.section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section--sable { background: var(--sable); }
.section--marine { background: var(--marine); color: #fff; }
.section--marine h2, .section--marine h3 { color: #fff; }
.section--marine a { color: #fff; }

/* Démarches rapides */
.demarches {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demarche {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: .25rem 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.35rem;
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); text-decoration: none; color: var(--encre);
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
  overflow: hidden;
}
.demarche::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(to bottom, var(--terre) 0 38%, var(--soleil) 38% 62%, var(--garrigue) 62% 88%, var(--noir-logo) 88% 100%);
  transform: scaleY(0); transform-origin: top; transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}
.demarche:hover, .demarche:focus-visible {
  border-color: color-mix(in srgb, var(--tinte, var(--canard)) 45%, var(--trait));
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--tinte, var(--canard)) 55%, transparent);
  color: var(--encre); background: #fffdf8;
}
.demarche:hover::before, .demarche:focus-visible::before { transform: scaleY(1); }
.demarche__icone {
  grid-row: 1 / 3;
  width: 3.25rem; height: 3.25rem; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--tinte-fond, var(--canard-clair)); color: var(--tinte, var(--canard));
  transition: background var(--transition), color var(--transition);
}
.demarche__icone svg { width: 1.75rem; height: 1.75rem; transition: transform 260ms ease; }
.demarche:hover .demarche__icone svg { transform: scale(1.08); }
.demarche:hover .demarche__icone { background: var(--tinte, var(--canard)); color: #fff; }
.demarche strong { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.15; color: var(--marine); align-self: end; overflow-wrap: anywhere; }
.demarche span { font-size: .88rem; color: var(--encre-douce); line-height: 1.4; }
.demarche__fleche {
  position: absolute; right: 1rem; bottom: 1rem; width: 1.1rem; height: 1.1rem;
  color: var(--marine); opacity: 0; transform: translateX(-6px); transition: opacity var(--transition), transform var(--transition);
}
.demarche:hover .demarche__fleche, .demarche:focus-visible .demarche__fleche { opacity: 1; transform: none; }
.demarche__badge {
  grid-column: 2; justify-self: start; margin-top: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px; background: #e3f3e8; color: var(--garrigue-texte);
}
/* Teintes par démarche (palette du logo et des affiches) */
.tinte-canard { --tinte: var(--canard); --tinte-fond: var(--canard-clair); }
.tinte-soleil { --tinte: #b8860b; --tinte-fond: #fff3c4; }
.tinte-terre { --tinte: var(--terre-texte); --tinte-fond: #fde6dd; }
.tinte-garrigue { --tinte: var(--garrigue-texte); --tinte-fond: #dff3e4; }
.tinte-marine { --tinte: var(--marine); --tinte-fond: #e4e9f3; }
.tinte-rose { --tinte: #a4235a; --tinte-fond: #fce4ec; }

/* Actualités */
.actus {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.carte {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.carte:hover { border-color: color-mix(in srgb, var(--canard) 35%, var(--trait)); box-shadow: 0 12px 30px -18px rgb(27 42 74 / .35); }
.carte__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sable-fonce); }
.carte__media img { width: 100%; height: 100%; object-fit: cover; }
.carte__corps { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.carte h3 a, .carte h2 a { color: var(--marine); text-decoration: none; }
.carte h3 a::after, .carte h2 a::after { content: ""; position: absolute; inset: 0; }
.carte h3 a:hover, .carte h2 a:hover { text-decoration: underline; }
.carte { position: relative; }
.carte__meta {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  font-size: .82rem; color: var(--encre-douce);
}
.etiquette {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--canard-clair); color: var(--canard);
}
.etiquette--jeunesse { background: #fce4ec; color: #a4235a; }
.etiquette--sport { background: #e3f3e8; color: var(--garrigue-texte); }
.etiquette--alerte { background: #fdeae4; color: var(--terre-texte); }
.etiquette--mairie { background: #e7ebf3; color: var(--marine); }
.carte--une .carte__media { aspect-ratio: 4 / 3; }
.carte--une h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.carte--une p { color: var(--encre-douce); }

.actus__liste { display: grid; gap: 1rem; align-content: start; }
.carte--ligne { flex-direction: row; }
.carte--ligne .carte__media { width: 9rem; flex: none; aspect-ratio: auto; }
.carte--ligne .carte__corps { padding: 1rem 1.1rem; }
.carte--ligne h3 { font-size: 1.05rem; }

/* Agenda */
.agenda { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.evenement {
  --theme: var(--canard);
  position: relative; display: flex; gap: 1rem; padding: 1rem 1.1rem 1rem 1.25rem;
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}
.evenement::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(to bottom, var(--terre) 0 38%, var(--soleil) 38% 62%, var(--garrigue) 62% 88%, var(--noir-logo) 88% 100%);
  transform: scaleY(0); transform-origin: top; transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}
.evenement:hover, .evenement:focus-within {
  border-color: color-mix(in srgb, var(--theme) 40%, var(--trait));
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--theme) 50%, transparent);
  background: #fffdf8;
}
.evenement:hover::before, .evenement:focus-within::before { transform: scaleY(1); }
.evenement[data-theme="vie-locale"] { --theme: var(--canard); }
.evenement[data-theme="jeunesse"] { --theme: #a4235a; }
.evenement[data-theme="sport"] { --theme: var(--garrigue-texte); }
.evenement[data-theme="culture"] { --theme: var(--terre-texte); }
.evenement[data-theme="mairie"] { --theme: var(--marine); }
.evenement[data-theme="solidarite"] { --theme: #b8860b; }

/* Feuillet de calendrier */
.evenement__date {
  flex: none; width: 4.5rem; text-align: center; align-self: start;
  border: 1px solid var(--trait); border-radius: 10px; overflow: hidden;
  background: var(--papier); font-family: var(--f-display); line-height: 1;
}
.evenement__date small {
  display: block; background: var(--theme); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem 0;
  font-family: var(--f-texte);
}
.evenement__date b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--marine); padding: .45rem 0 .1rem; }
.evenement__date span { display: block; font-size: .72rem; color: var(--encre-douce); padding-bottom: .5rem; font-family: var(--f-texte); }
.evenement__date--recurrent b { font-size: 1.15rem; padding-top: .7rem; }

.evenement__theme { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--theme); display: block; margin-bottom: .25rem; }
.evenement h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.evenement h3 a { color: var(--marine); text-decoration: none; }
.evenement h3 a::after { content: ""; position: absolute; inset: 0; }
.evenement h3 a:hover { text-decoration: underline; }
.evenement__infos { font-size: .88rem; color: var(--encre-douce); display: flex; flex-direction: column; gap: .2rem; }
.evenement__infos span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.evenement__infos svg { width: .95rem; height: .95rem; flex: none; margin-top: .15em; color: var(--theme); }

/* Grands projets */
.projets { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.projet {
  position: relative; border-radius: var(--rayon); overflow: hidden;
  min-height: 19rem; display: flex; align-items: flex-end;
  background: var(--marine-sombre); color: #fff; text-decoration: none;
  isolation: isolate;
}
.projet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .85; transition: transform 400ms ease; }
.projet:hover img { transform: scale(1.04); }
.projet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(17 27 49 / .95) 20%, rgb(17 27 49 / .2) 70%, transparent);
}
.projet__corps { padding: 1.35rem; }
.projet__etat {
  display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .25rem .6rem; border-radius: 999px;
  background: var(--soleil); color: var(--marine); margin-bottom: .6rem;
}
.projet__etat--vert { background: var(--garrigue); color: #fff; }
.projet h3 { color: #fff; margin-bottom: .3rem; }
.projet p { font-size: .92rem; color: rgb(255 255 255 / .85); }
.projet--sans-image { background: var(--canard); }
.projet--sans-image::after { background: none; }
.projet--terre { background: var(--terre); }
.projet--terre .projet__etat { background: #fff; color: var(--terre-texte); }

/* Vie municipale / transparence */
.transparence {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: stretch;
}
.bloc {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.5rem;
}
.bloc h3 { display: flex; align-items: center; gap: .6rem; }
.bloc h3 .barre { height: 1.2em; }
.bloc ul { margin: 0; padding: 0; list-style: none; }
.bloc li { padding: .55rem 0; border-top: 1px solid var(--trait); }
.bloc li:first-child { border-top: 0; }
.bloc li a { text-decoration: none; font-weight: 700; color: var(--marine); }
.bloc li a:hover { text-decoration: underline; }
.bloc li small { display: block; color: var(--encre-douce); font-size: .85rem; }
.maire { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.maire__avatar {
  width: 4rem; height: 4rem; border-radius: 50%; flex: none;
  background: var(--sable-fonce); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; color: var(--marine); font-size: 1.4rem;
}
.maire strong { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--marine); }
.maire span { color: var(--encre-douce); font-size: .9rem; }
.jonctions { display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem; align-items: center; }
.jonctions img { border-radius: var(--rayon-sm); box-shadow: var(--ombre); }

/* Découvrir */
.decouvrir {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.decouvrir img { border-radius: var(--rayon) var(--rayon) 6rem var(--rayon); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.decouvrir__texte p { font-size: 1.1rem; color: rgb(255 255 255 / .88); }
.fiche { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; }
.fiche li { padding: .65rem 0; border-top: 1px solid rgb(255 255 255 / .18); display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.fiche li b { font-family: var(--f-display); font-weight: 800; color: var(--soleil); white-space: nowrap; }

/* Mairie pratique */
.pratique { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
.horaires { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: .75rem; }
.horaires th, .horaires td { text-align: left; padding: .5rem 0; border-top: 1px solid var(--trait); }
.horaires th { font-weight: 700; color: var(--marine); width: 8rem; }
.horaires tr[aria-current="date"] th, .horaires tr[aria-current="date"] td { background: #fff7d6; }
.horaires tr[aria-current="date"] th { padding-left: .4rem; border-left: 4px solid var(--soleil); }
.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.coordonnees li { display: flex; gap: .7rem; align-items: flex-start; }
.coordonnees svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--terre); margin-top: .15rem; }
.pratique__photo { position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 18rem; }
.pratique__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pratique__photo figcaption {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgb(255 255 255 / .92); padding: .75rem 1rem; border-radius: var(--rayon-sm);
  font-size: .9rem;
}

/* ---------- 7. Pied de page ---------- */
.pied { background: var(--marine-sombre); color: rgb(255 255 255 / .85); font-size: .95rem; }
.pied a { color: #fff; }
.pied__haut {
  display: grid; gap: 2rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  padding-block: 3rem 2rem;
}
.pied h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied ul a { text-decoration: none; }
.pied ul a:hover { text-decoration: underline; }
.pied .marque { color: #fff; margin-bottom: 1rem; }
.pied .marque__nom small { color: rgb(255 255 255 / .7); }
.pied__adresse { font-style: normal; line-height: 1.6; }
.reseaux { display: flex; gap: .6rem; margin-top: 1rem; }
.reseaux a {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / .3);
}
.reseaux a:hover { background: rgb(255 255 255 / .12); }
.reseaux svg { width: 1.1rem; height: 1.1rem; }
.pied__bas {
  border-top: 1px solid rgb(255 255 255 / .15);
  padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  font-size: .85rem; align-items: center;
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pied__a11y { display: inline-flex; align-items: center; gap: .5rem; }
.pied__a11y .puce { width: .6rem; height: .6rem; border-radius: 50%; background: var(--soleil); }
.pied__bas .copyright { margin-left: auto; color: rgb(255 255 255 / .6); }

/* ---------- 8. Panneau d'accessibilité ---------- */
.a11y-panneau {
  border: 0; padding: 0; margin: 0;
  max-width: 100vw; max-height: 100vh; width: min(100%, 26rem);
  height: 100dvh; inset: 0 0 0 auto; position: fixed;
  background: var(--papier); color: var(--encre);
  box-shadow: -20px 0 60px -20px rgb(0 0 0 / .4);
}
.a11y-panneau::backdrop { background: rgb(17 27 49 / .55); }
.a11y-panneau__entete {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.25rem 1.5rem; background: var(--marine); color: #fff;
}
.a11y-panneau__entete h2 { color: #fff; margin: 0; font-size: 1.25rem; }
.a11y-panneau__entete .bouton-icone { margin-left: auto; background: transparent; color: #fff; border-color: rgb(255 255 255 / .4); }
.a11y-panneau__corps { padding: 1.5rem; display: grid; gap: 1.5rem; overflow: auto; height: calc(100dvh - 5rem); }
.a11y-groupe { border: 0; padding: 0; margin: 0; }
.a11y-groupe legend { font-weight: 700; color: var(--marine); margin-bottom: .5rem; font-family: var(--f-display); font-size: 1.05rem; }
.a11y-groupe p { font-size: .88rem; color: var(--encre-douce); margin-bottom: .75rem; }
.segments { display: flex; gap: .4rem; }
.segments button {
  flex: 1; padding: .6rem .5rem; border: 2px solid var(--trait); border-radius: var(--rayon-sm);
  background: var(--papier); font-weight: 700;
}
.segments button[aria-pressed="true"] { border-color: var(--marine); background: var(--marine); color: #fff; }
.interrupteur {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-top: 1px solid var(--trait);
}
.interrupteur:first-of-type { border-top: 0; }
.interrupteur button {
  flex: none; width: 3.25rem; height: 1.9rem; border-radius: 999px;
  border: 2px solid var(--gris); background: var(--papier); position: relative;
}
.interrupteur button::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--gris); transition: transform var(--transition);
}
.interrupteur button[aria-pressed="true"] { background: var(--garrigue-texte); border-color: var(--garrigue-texte); }
.interrupteur button[aria-pressed="true"]::after { background: #fff; transform: translateX(1.35rem); }
.a11y-panneau__pied { font-size: .85rem; color: var(--encre-douce); }

/* Préférences appliquées via <html data-…> */
html[data-taille="grand"] { --taille-base: 112.5%; }
html[data-taille="tres-grand"] { --taille-base: 125%; }
html[data-espacement="on"] { --interligne: 1.9; --espace-lettres: .06em; --espace-mots: .16em; }
html[data-espacement="on"] p, html[data-espacement="on"] li { margin-bottom: 1.4em; }
html[data-liens="on"] a { text-decoration: underline !important; text-decoration-thickness: 2px; }
html[data-contraste="on"] {
  --encre: #000; --encre-douce: #1a1a1a; --gris: #333; --trait: #555;
  --canard: #0b4a56; --terre-texte: #8a2f14; --garrigue-texte: #1d5530;
  --sable: #fff; --sable-fonce: #f0f0f0; --canard-clair: #e6f2f4;
}
html[data-contraste="on"] .demarche, html[data-contraste="on"] .carte, html[data-contraste="on"] .evenement, html[data-contraste="on"] .bloc { border-color: #000; }
html[data-contraste="on"] .aujourdhui { background: #ffe97a; }
html[data-contraste="on"] .btn--primaire { background: #8a2f14; }
html[data-animations="off"] *, html[data-animations="off"] *::before, html[data-animations="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html[data-police="systeme"] { --f-display: "Helvetica Neue", Arial, sans-serif; --f-texte: Verdana, "Helvetica Neue", Arial, sans-serif; }

/* ---------- 9. Pages intérieures ---------- */
.bandeau-page { background: var(--sable); border-bottom: 1px solid var(--trait); }
.bandeau-page .container { padding-block: 1.5rem 2.25rem; }
.fil { font-size: .88rem; margin-bottom: 1rem; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fil li + li::before { content: "›"; margin-right: .35rem; color: var(--gris); }
.fil a { text-decoration: none; color: var(--encre-douce); }
.fil a:hover { text-decoration: underline; }
.fil [aria-current="page"] { color: var(--marine); font-weight: 700; }
.bandeau-page h1 { display: flex; align-items: center; gap: 1rem; margin-bottom: .35em; }
.bandeau-page h1 .barre { height: 1.1em; width: 8px; }
.bandeau-page .chapo { font-size: 1.15rem; color: var(--encre-douce); max-width: 46rem; }
.bandeau-page__meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; font-size: .9rem; color: var(--encre-douce); }

.page { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) 20rem; padding-block: clamp(2rem, 5vw, 4rem); }
.page__contenu { max-width: 46rem; }
.page__contenu h2 { font-size: 1.55rem; margin-top: 2.25rem; padding-top: .25rem; }
.page__contenu h2:first-child { margin-top: 0; }
.page__contenu h3 { margin-top: 1.5rem; }
.page__contenu ul, .page__contenu ol { padding-left: 1.25rem; }
.page__contenu li { margin-bottom: .35rem; }
.page__contenu img { border-radius: var(--rayon); }
.aside { display: grid; gap: 1.25rem; align-content: start; }
.aside .bloc { padding: 1.25rem; }
.aside .bloc h3 { font-size: 1.05rem; }
.aside .btn { width: 100%; }

.encadre {
  border-left: 6px solid var(--soleil); background: #fff8dc;
  padding: 1rem 1.25rem; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; margin: 1.5rem 0;
}
.encadre--info { border-color: var(--canard); background: var(--canard-clair); }
.encadre strong { color: var(--marine); }

.equipe { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.equipe li { background: var(--sable); padding: .8rem 1rem; border-radius: var(--rayon-sm); margin: 0 !important; }
.equipe li strong { display: block; color: var(--marine); }
.equipe li span { font-size: .88rem; color: var(--encre-douce); }

.accordeon { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; margin: 1rem 0; }
.accordeon details + details { border-top: 1px solid var(--trait); }
.accordeon summary {
  cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; color: var(--marine);
  display: flex; align-items: center; gap: .75rem; list-style: none; font-family: var(--f-display); font-size: 1.05rem;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::before {
  content: "+"; width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--canard-clair); color: var(--canard); font-weight: 800;
}
.accordeon details[open] summary::before { content: "–"; background: var(--marine); color: #fff; }
.accordeon summary:hover { background: var(--sable); }
.accordeon__corps { padding: 0 1.25rem 1.25rem 4.5rem; }
.accordeon__corps p, .accordeon__corps ul { margin-bottom: .75rem; }
.externe::after { content: " ↗"; font-size: .85em; }

.telechargements { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .5rem; }
.telechargements li { margin: 0 !important; }
.telechargements a {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon-sm); text-decoration: none; color: var(--encre);
}
.telechargements a:hover { background: var(--sable); border-color: color-mix(in srgb, var(--terre) 40%, var(--trait)); }
.telechargements svg { width: 1.4rem; height: 1.4rem; color: var(--terre); flex: none; }
.telechargements strong { color: var(--marine); display: block; }
.telechargements small { color: var(--encre-douce); }

/* Article d'actualité */
.article__visuel { margin: 0 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; }
.article__visuel img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.infos-pratiques { background: var(--marine); color: #fff; border-radius: var(--rayon); padding: 1.5rem; }
.infos-pratiques h2 { color: var(--soleil); font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1rem; }
.infos-pratiques dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; }
.infos-pratiques dt { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: rgb(255 255 255 / .7); }
.infos-pratiques dt svg { width: 1rem; height: 1rem; }
.infos-pratiques dd { margin: 0; font-weight: 700; }
.infos-pratiques .btn { margin-top: 1.25rem; width: 100%; }
.themes { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.theme { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: var(--sable); font-weight: 700; font-size: .92rem; color: var(--marine); }
.theme i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.partage { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.partage span { font-weight: 700; color: var(--marine); margin-right: .25rem; }

/* Agenda page */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filtres button {
  padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--trait); background: var(--papier); font-weight: 700; font-size: .92rem;
}
.filtres button[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.filtres button:hover { border-color: color-mix(in srgb, var(--marine) 35%, var(--trait)); background: var(--sable); }
.mois { margin-top: 2.5rem; }
.mois:first-of-type { margin-top: 0; }
.mois h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.4rem; margin-bottom: 1rem; }
.mois h2::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.evenement[hidden] { display: none; }
.vide { display: none; padding: 2rem; text-align: center; background: var(--sable); border-radius: var(--rayon); color: var(--encre-douce); }
.vide:only-child { display: block; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 64rem) {
  .nav { display: none; }
  .demarches { grid-template-columns: 1fr 1fr; }
  .burger { display: inline-grid; }
  .actus { grid-template-columns: 1fr; }
  .transparence { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .page { grid-template-columns: 1fr; }
  .article__visuel { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .masquer-mobile { display: none !important; }
  .titre-section { flex-wrap: wrap; }
  .titre-section__lien { margin-left: 0; flex-basis: 100%; padding-left: calc(6px + .85rem); }
  .marque__nom { font-size: 1.15rem; }
  .hero::before { background: linear-gradient(to top, rgb(17 27 49 / .96) 55%, rgb(17 27 49 / .45)); }
  .decouvrir, .pratique { grid-template-columns: 1fr; }
  .fiche { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__bas .copyright { margin-left: 0; }
  .carte--ligne .carte__media { width: 6.5rem; }
  .demarches { grid-template-columns: 1fr; gap: .6rem; }
  .demarche { padding: .9rem 1rem .9rem 1.15rem; }
  .demarche__icone { width: 2.75rem; height: 2.75rem; }
  .demarche strong { font-size: 1rem; }
  .demarche span { font-size: .82rem; }
  .hero { min-height: 0; }
  .hero .container { padding-bottom: 3rem; }
  .hero__credit { left: var(--gouttiere); right: auto; bottom: 1rem; }
  .jonctions { grid-template-columns: 6rem 1fr; }
  .accordeon__corps { padding-left: 1.25rem; }
  .infos-pratiques dl { grid-template-columns: 1fr; gap: .2rem; }
  .infos-pratiques dd { margin-bottom: .6rem; }
}

/* Menu mobile */
.menu-mobile {
  border: 0; padding: 0; margin: 0; position: fixed; inset: 0 auto 0 0;
  width: min(100%, 24rem); height: 100dvh; max-height: 100vh; max-width: 100vw;
  background: var(--papier); box-shadow: 20px 0 60px -20px rgb(0 0 0 / .4);
}
.menu-mobile::backdrop { background: rgb(17 27 49 / .55); }
.menu-mobile__entete { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--trait); }
.menu-mobile__entete .bouton-icone { margin-left: auto; }
.menu-mobile__corps { overflow: auto; height: calc(100dvh - 4.75rem); padding: 1rem 1.25rem 2rem; }
.menu-mobile details { border-bottom: 1px solid var(--trait); }
.menu-mobile summary { padding: .9rem 0; font-weight: 700; color: var(--marine); cursor: pointer; font-family: var(--f-display); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary::after { content: "+"; color: var(--terre); }
.menu-mobile details[open] summary::after { content: "–"; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0 0 .75rem; }
.menu-mobile ul a { display: block; padding: .5rem 0 .5rem 1rem; text-decoration: none; color: var(--encre); border-left: 3px solid var(--sable-fonce); }
.menu-mobile ul a:hover { border-color: var(--terre); color: var(--marine); }
.menu-mobile__raccourcis { display: grid; gap: .6rem; margin-top: 1.25rem; }

/* Mouvement réduit respecté par défaut */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .entete, .pied, .hero__visuel, .aside, .partage { display: none !important; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- 11. Recherche plein écran ---------- */
.recherche-overlay {
  border: 0; padding: 0; margin: 0; background: transparent;
  width: min(100% - 2rem, 42rem); max-width: 100vw; max-height: 100vh;
  position: fixed; inset: 0; margin: auto auto auto auto; top: clamp(2rem, 12vh, 8rem); bottom: auto;
  color: var(--encre);
}
.recherche-overlay::backdrop { background: rgb(17 27 49 / .62); backdrop-filter: blur(6px); }
.recherche-overlay[open] .recherche-overlay__boite { animation: apparition 160ms cubic-bezier(.2, .7, .3, 1); }
.recherche-overlay__boite {
  background: var(--papier); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}
.recherche-overlay__champ { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem .5rem 1.25rem; border-bottom: 1px solid var(--trait); }
.recherche-overlay__champ > svg { width: 1.4rem; height: 1.4rem; color: var(--terre); flex: none; }
.recherche-overlay__champ input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1.15rem; padding: .9rem 0; background: transparent; color: var(--encre); }
.recherche-overlay__champ input:focus { outline: none; }
.recherche-overlay__champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche-overlay__fermer { background: none; border: 0; padding: .25rem; }
kbd {
  font-family: var(--f-texte); font-size: .72rem; font-weight: 700; color: var(--encre-douce);
  border: 1px solid var(--trait); border-bottom-width: 2px; border-radius: 6px; padding: .15rem .45rem; background: var(--sable);
}
.recherche-overlay__resultats { list-style: none; margin: 0; padding: .5rem; max-height: min(60vh, 28rem); overflow: auto; }
.recherche-overlay__resultats a {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .75rem;
  padding: .7rem .8rem; border-radius: 10px; text-decoration: none; color: var(--encre);
}
.recherche-overlay__resultats a:hover, .recherche-overlay__resultats [aria-selected="true"] a { background: var(--sable); }
.recherche-overlay__resultats [aria-selected="true"] a { box-shadow: inset 0 0 0 2px var(--marine); }
.recherche-overlay__resultats a > svg { width: 1rem; height: 1rem; color: var(--gris); }
.recherche-overlay__titre { font-weight: 700; color: var(--marine); }
.recherche-overlay__titre mark { background: #fff0b3; color: inherit; border-radius: 3px; padding: 0 .05em; }
.recherche-overlay__rubrique { font-size: .78rem; color: var(--encre-douce); white-space: nowrap; }
.recherche-overlay__type {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px; background: var(--canard-clair); color: var(--canard); white-space: nowrap;
}
.recherche-overlay__type--demarche { background: #e3f3e8; color: var(--garrigue-texte); }
.recherche-overlay__type--evenement { background: #fce4ec; color: #a4235a; }
.recherche-overlay__type--contact { background: #fff3c4; color: #7a5a00; }
.recherche-overlay__type--actualite { background: #fde6dd; color: var(--terre-texte); }
.recherche-overlay__vide { padding: 1.25rem 1rem; color: var(--encre-douce); }
.recherche-overlay__suggestions { padding: 1rem 1.25rem 1.25rem; }
.recherche-overlay__suggestions p { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: .6rem; }
.recherche-overlay__suggestions div { display: flex; flex-wrap: wrap; gap: .5rem; }
.recherche-overlay__suggestions button { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--papier); font-weight: 700; font-size: .9rem; color: var(--marine); }
.recherche-overlay__suggestions button:hover { background: var(--sable); border-color: color-mix(in srgb, var(--canard) 40%, var(--trait)); }
.recherche-overlay__aide { margin: 0; padding: .6rem 1.25rem; border-top: 1px solid var(--trait); font-size: .78rem; color: var(--encre-douce); background: var(--sable); }

/* ---------- 12. Formulaire ---------- */
.formulaire { display: grid; gap: 1.25rem; }
.formulaire__intro { font-size: .9rem; color: var(--encre-douce); margin: 0; }
.obligatoire { color: var(--terre-texte); }
.facultatif { font-weight: 400; color: var(--encre-douce); font-size: .9rem; }
.champ { display: grid; gap: .4rem; }
.champ label { font-weight: 700; color: var(--marine); }
.champ small { font-size: .85rem; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea {
  font: inherit; color: var(--encre); background: var(--papier);
  border: 2px solid var(--trait); border-radius: var(--rayon-sm); padding: .7rem .9rem; min-height: 2.9rem; width: 100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--marine); outline: 3px solid var(--terre); outline-offset: 2px; }
.champ [aria-invalid="true"] { border-color: var(--terre-texte); }
.champ__erreur { margin: 0; font-size: .9rem; font-weight: 700; color: var(--terre-texte); display: flex; gap: .4rem; }
.champ__erreur::before { content: "⚠"; }
.champ-groupe { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.champ--case input { width: 1.35rem; height: 1.35rem; min-height: 0; margin-top: .15rem; accent-color: var(--marine); }
.champ--case label { font-weight: 400; color: var(--encre); }
.champ--case .champ__erreur { grid-column: 1 / -1; }
.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formulaire__note { font-size: .85rem; color: var(--encre-douce); }
.formulaire__succes { display: flex; gap: 1rem; padding: 1.5rem; background: #e3f3e8; border-radius: var(--rayon); margin-bottom: 2rem; }
.formulaire__succes .barre { flex: none; height: auto; align-self: stretch; }
.formulaire__succes h2 { margin-top: 0; }

/* ---------- 13. Composants des pages rédigées ---------- */
.page--large { grid-template-columns: minmax(0, 1fr) 18rem; }
.page__contenu--large { max-width: 52rem; }
.bandeau-page--projet .projet__etat { margin-bottom: .75rem; }

.chiffres { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.chiffres li { background: var(--sable); border-radius: var(--rayon); padding: 1.1rem 1.2rem; display: grid; gap: .25rem; border-left: 6px solid var(--terre); }
.chiffres li:nth-child(2) { border-color: var(--soleil); }
.chiffres li:nth-child(3) { border-color: var(--garrigue); }
.chiffres li:nth-child(4) { border-color: var(--marine); }
.chiffres b { font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; color: var(--marine); line-height: 1; }
.chiffres span { font-size: .88rem; color: var(--encre-douce); }
.chiffres--compact b { font-size: 1.3rem; }

.etapes { list-style: none; margin: 1rem 0 2rem; padding: 0 0 0 1.6rem; position: relative; }
.etapes::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--trait); }
.etapes li { position: relative; padding: 0 0 1.5rem .75rem; margin: 0; display: grid; gap: .15rem; }
.etapes li::before { content: ""; position: absolute; left: -1.6rem; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--papier); border: 3px solid var(--trait); box-sizing: border-box; }
.etapes .etapes__fait::before { background: var(--garrigue); border-color: var(--garrigue); }
.etapes .etapes__encours::before { background: var(--soleil); border-color: var(--terre); }
.etapes time { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terre-texte); }
.etapes strong { color: var(--marine); font-family: var(--f-display); font-size: 1.05rem; }
.etapes span { color: var(--encre-douce); font-size: .95rem; }

.mediateurs { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: center; background: var(--sable); border-radius: var(--rayon); padding: 1.25rem; margin: 1rem 0 2rem; }
.mediateurs img { border-radius: var(--rayon-sm); }

.maire-carte { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; background: var(--sable); border-radius: var(--rayon); padding: 1.5rem; margin-bottom: 2rem; }
.maire-carte__avatar { width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; background: var(--marine); color: var(--soleil); font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; }
.maire-carte h2 { margin-top: 0; font-size: 1.4rem; }
.elus { list-style: none; margin: 0 0 1.5rem; padding: 0 !important; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.elus li { margin: 0 !important; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon-sm); padding: .8rem 1rem; display: grid; gap: .1rem; position: relative; }
.elus li strong { color: var(--marine); }
.elus li span { font-size: .88rem; color: var(--encre-douce); }
.elus li .elu__rang { position: absolute; right: .75rem; top: .6rem; font-family: var(--f-display); font-weight: 800; color: var(--terre); font-size: .95rem; }
.elus--adjoints li { border-left: 4px solid var(--terre); }
.elus--compact { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.archives summary { cursor: pointer; font-weight: 700; color: var(--marine); padding: .5rem 0; }

.en-preparation { display: flex; gap: 1.25rem; padding: 1.5rem; background: var(--sable); border-radius: var(--rayon); margin-bottom: 2rem; }
.en-preparation .barre { flex: none; height: auto; align-self: stretch; width: 8px; }
.en-preparation h2 { margin-top: 0; }
.liste-pages { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .4rem; }
.liste-pages li { margin: 0 !important; }
.liste-pages a { display: block; padding: .6rem .9rem; border: 1px solid var(--trait); border-radius: var(--rayon-sm); text-decoration: none; color: var(--marine); font-weight: 700; }
.liste-pages a:hover { background: var(--sable); border-color: color-mix(in srgb, var(--canard) 40%, var(--trait)); }

.plan-site { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.plan-site h2 { font-size: 1.1rem; display: flex; gap: .6rem; align-items: center; }
.plan-site h2::before { content: ""; width: 6px; height: 1.2em; border-radius: 3px; background: linear-gradient(to bottom, var(--terre) 0 38%, var(--soleil) 38% 62%, var(--garrigue) 62% 88%, var(--noir-logo) 88% 100%); }
.plan-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.plan-site a { text-decoration: none; color: var(--encre); }
.plan-site a:hover { color: var(--marine); text-decoration: underline; }

.actus-grille { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.actus-grille .carte h2 { font-size: 1.15rem; }
.actus-grille .carte p { font-size: .92rem; color: var(--encre-douce); }
.actu-item[hidden] { display: none; }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: 2rem; }
.pagination a, .pagination span { min-width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; padding: 0 .75rem; border-radius: 999px; text-decoration: none; font-weight: 700; }
.pagination a { border: 1px solid var(--trait); color: var(--marine); white-space: nowrap; }
.pagination a:hover { background: var(--sable); border-color: color-mix(in srgb, var(--canard) 40%, var(--trait)); }
.pagination [aria-current="page"] { background: var(--marine); color: #fff; }
.pagination__suivant { margin-left: auto; }
.raccourcis { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9rem; }

/* ---------- 14. Responsive complémentaire ---------- */
@media (max-width: 64rem) {
  .page--large { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .champ-groupe { grid-template-columns: 1fr; }
  .mediateurs { grid-template-columns: 1fr; }
  .mediateurs img { max-width: 14rem; }
  .maire-carte { grid-template-columns: 1fr; }
  .recherche-overlay { top: .75rem; width: min(100% - 1rem, 42rem); }
  .recherche-overlay__resultats a { grid-template-columns: 1fr auto; }
  .recherche-overlay__type { grid-row: 2; justify-self: start; }
  .recherche-overlay__rubrique { display: none; }
  .recherche-overlay__aide { display: none; }
  .pagination__suivant { margin-left: 0; flex-basis: 100%; }
  .bandeau-page .container { padding-block: 1rem 1.5rem; }
  .bandeau-page h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .page { padding-block: 1.75rem; }
  .article__visuel img { max-width: 20rem; margin-inline: auto; }
}
@media (max-width: 30rem) {
  .hero h1 { font-size: 2.4rem; }
  .hero__texte { font-size: 1.02rem; }
  .chips { gap: .4rem; }
  .chip { font-size: .82rem; padding: .35rem .7rem; }
  .chips__label { flex-basis: 100%; }
  .recherche { padding-left: .9rem; }
  .recherche input { font-size: .95rem; }
  .aujourdhui { font-size: .9rem; }
  .agenda { grid-template-columns: 1fr; }
  .evenement { padding-left: 1rem; }
  .projets { grid-template-columns: 1fr; }
  .projet { min-height: 14rem; }
  .fiche li { font-size: .9rem; }
  .pied__bas ul { flex-direction: column; gap: .4rem; }
  .accordeon summary { padding: .85rem 1rem; font-size: 1rem; }
  .accordeon__corps { padding: 0 1rem 1rem; }
  .telechargements a { padding: .7rem .8rem; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .chiffres b { font-size: 1.3rem; }
}