/* ===== reset.css ===== */
/* Reset minimal, orienté accessibilité. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-inline-size: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; inline-size: 100%; }
address { font-style: normal; }
:target { scroll-margin-block-start: 6rem; }

/* Respect de la préférence système, et de la préférence exprimée dans le panneau d'affichage. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
[data-anime="0"] *, [data-anime="0"] *::before, [data-anime="0"] *::after {
  animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* ===== tokens.css ===== */
/* ------------------------------------------------------------------------
   Variables de conception. AUCUNE couleur n'est écrite ailleurs que dans
   ce fichier et dans les trois fichiers theme-*.css.
   ------------------------------------------------------------------------ */
:root {
  /* Espacement — échelle de 4 px */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem;
  --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem;

  /* Typographie — fluide, sans jamais descendre sous 16 px pour le corps */
  --police-corps: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-titre: var(--police-corps);
  --graisse-titre: 700;
  --interlettrage-titre: -.01em;

  --t-corps: 1rem;
  --t-petit: .875rem;
  --t-mini: .8125rem;
  --t-grand: 1.125rem;
  --t-h1: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --t-h2: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-h3: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --hauteur-ligne: 1.6;
  --hauteur-ligne-titre: 1.2;

  /* Formes */
  --rayon: 8px;
  --rayon-petit: 4px;
  --rayon-grand: 16px;
  --rayon-pilule: 999px;
  --trait: 1px;
  --ombre: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .05);
  --ombre-forte: 0 2px 4px rgb(0 0 0 / .08), 0 12px 32px rgb(0 0 0 / .10);

  /* Mise en page */
  --largeur: 76rem;
  --largeur-etroite: 48rem;
  --gouttiere: var(--e4);
  --cible: 44px;           /* taille minimale d'une cible tactile — RGAA */

  --transition: 160ms ease;
}

@media (min-width: 48em) { :root { --gouttiere: var(--e6); } }

/* Réglages du panneau d'affichage --------------------------------------- */
[data-taille="grand"]      { font-size: 112.5%; }
[data-taille="tres-grand"] { font-size: 131.25%; }

[data-dyslexie="1"] {
  --police-corps: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --police-titre: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --hauteur-ligne: 1.9;
  letter-spacing: .04em;
  word-spacing: .16em;
}

/* Base ------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
[data-anime="0"] html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-corps);
  line-height: var(--hauteur-ligne);
  color: var(--texte);
  background: var(--fond);
  min-block-size: 100vh;
  display: flex; flex-direction: column;
  padding-block-end: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  line-height: var(--hauteur-ligne-titre);
  letter-spacing: var(--interlettrage-titre);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { text-wrap: pretty; }

a { color: var(--lien); text-underline-offset: .18em; }
a:hover { color: var(--lien-survol); }

/* Focus : toujours visible, toujours contrasté. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}
.js :focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-doux); color: var(--texte); }

/* Utilitaires ------------------------------------------------------------ */
.sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.conteneur { inline-size: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.conteneur--etroit { inline-size: min(100% - 2 * var(--gouttiere), var(--largeur-etroite)); }

.evitement {
  position: absolute; inset-inline-start: var(--e4); inset-block-start: -100%;
  z-index: 200; padding: var(--e3) var(--e4);
  background: var(--accent); color: var(--accent-texte);
  border-radius: 0 0 var(--rayon) var(--rayon); font-weight: 600;
}
.evitement:focus { inset-block-start: 0; color: var(--accent-texte); }

.icone { inline-size: 1.5em; block-size: 1.5em; flex: none; fill: none; stroke: currentColor; }
.icone--mini { inline-size: 1.125em; block-size: 1.125em; }

.lien-externe .icone--mini { display: inline-block; vertical-align: -.16em; margin-inline-start: .25em; opacity: .75; }

/* ===== theme-republique.css ===== */
/* =========================================================================
   Thème « République » — institutionnel.
   Codes du système de design de l'État : bleu France, rouge Marianne,
   angles nets, hiérarchie sobre. Le plus reconnaissable comme site public.
   ========================================================================= */
[data-theme="republique"] {
  --fond: #ffffff;
  --fond-alt: #f6f6f6;
  --fond-carte: #ffffff;
  --fond-accentue: #f5f5fe;
  --fond-inverse: #161616;
  --texte-inverse: #ffffff;

  --texte: #161616;
  --texte-doux: #3a3a3a;
  --texte-tres-doux: #4f4f4f;

  --bordure: #dddddd;
  --bordure-forte: #7b7b7b;

  --accent: #000091;
  --accent-survol: #1212ff;
  --accent-texte: #ffffff;
  --accent-doux: #e3e3fd;
  --accent-doux-texte: #000091;

  --lien: #000091;
  --lien-survol: #1212ff;
  --focus: #0a76f6;

  --danger: #ce0500;
  --danger-fond: #ffe9e9;
  --succes: #18753c;
  --succes-fond: #dffee6;
  --info: #0063cb;
  --info-fond: #e8edff;
  --attention: #b34000;
  --attention-fond: #fff4f3;

  /* Une couleur par rubrique du menu principal, pour les différencier au
     premier coup d'œil — indépendamment de la lecture du texte. */
  --nav-demarches: #000091;
  --nav-vie-locale: #b34000;
  --nav-enfance-jeunesse: #18753c;
  --nav-cadre-de-vie: #009099;
  --nav-mairie: #6e445a;

  --police-titre: var(--police-corps);
  --graisse-titre: 700;
  --interlettrage-titre: -.01em;
  --rayon: 4px;
  --rayon-petit: 2px;
  --rayon-grand: 6px;
  --ombre: 0 1px 0 var(--bordure);
  --ombre-forte: 0 2px 6px rgb(0 0 0 / .16);
}

@media (prefers-color-scheme: dark) {
  [data-theme="republique"]:not([data-clair]) {
    --fond: #1e1e1e;
    --fond-alt: #262626;
    --fond-carte: #262626;
    --fond-accentue: #21213f;
    --fond-inverse: #f6f6f6;
    --texte-inverse: #161616;
    --texte: #ececec;
    --texte-doux: #cecece;
    --texte-tres-doux: #b9b9b9;
    --bordure: #3a3a3a;
    --bordure-forte: #8e8e8e;
    --accent: #8585f6;
    --accent-survol: #aeaef9;
    --accent-texte: #12124a;
    --accent-doux: #272747;
    --accent-doux-texte: #b1b1f9;
    --lien: #a1a1f8;
    --lien-survol: #c3c3fb;
    --focus: #62a5f5;
    --danger: #ff9a94; --danger-fond: #3a1c1a;
    --succes: #6fdc8c; --succes-fond: #17301f;
    --info: #85b9f8;  --info-fond: #1a2436;
    --attention: #ffb094; --attention-fond: #35211a;
    --ombre: 0 1px 0 var(--bordure);

    --nav-demarches: #8585f6;
    --nav-vie-locale: #ffb094;
    --nav-enfance-jeunesse: #6fdc8c;
    --nav-cadre-de-vie: #6fd9de;
    --nav-mairie: #d9a8c2;
  }
}

[data-theme="republique"][data-contraste="1"] {
  --fond: #ffffff; --fond-alt: #ffffff; --fond-carte: #ffffff; --fond-accentue: #ffffff;
  --texte: #000000; --texte-doux: #000000; --texte-tres-doux: #1a1a1a;
  --bordure: #000000; --bordure-forte: #000000;
  --accent: #00006b; --accent-doux: #ffffff; --accent-doux-texte: #00006b;
  --lien: #00006b; --lien-survol: #000000; --trait: 2px;
  /* En contraste renforcé, la couleur de rubrique cède la place à l'accent
     unique du thème : la lisibilité prime alors sur la distinction par teinte. */
  --nav-demarches: var(--accent); --nav-vie-locale: var(--accent);
  --nav-enfance-jeunesse: var(--accent); --nav-cadre-de-vie: var(--accent); --nav-mairie: var(--accent);
}


/* -------------------------------------------------------------------------
   Photo d'arrière-plan du bandeau d'accueil : la mairie elle-même — le choix
   le plus institutionnel possible pour ce thème. Le voile reste très opaque
   sous la colonne de texte : le contraste du titre et de la recherche ne
   dépend jamais de la photo.
   ------------------------------------------------------------------------- */
[data-theme="republique"] .heros {
  background-image:
    linear-gradient(to bottom, rgb(255 255 255 / .96), rgb(255 255 255 / .93)),
    url("/img/mairie-700.jpg");
  background-size: cover;
  background-position: center 70%;
}

@media (min-width: 48em) {
  [data-theme="republique"] .heros {
    background-image:
      linear-gradient(to right, rgb(255 255 255 / .98) 0%, rgb(255 255 255 / .95) 52%, rgb(255 255 255 / .5) 100%),
      url("/img/mairie-1200.jpg");
    background-position: center 65%;
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="republique"]:not([data-clair]) .heros {
    background-image:
      linear-gradient(to bottom, rgb(30 30 30 / .96), rgb(30 30 30 / .93)),
      url("/img/mairie-700.jpg");
  }
  @media (min-width: 48em) {
    [data-theme="republique"]:not([data-clair]) .heros {
      background-image:
        linear-gradient(to right, rgb(30 30 30 / .98) 0%, rgb(30 30 30 / .95) 52%, rgb(30 30 30 / .5) 100%),
        url("/img/mairie-1200.jpg");
    }
  }
}

/* En contraste renforcé, la photo disparaît : rien ne doit gêner la lecture. */
[data-theme="republique"][data-contraste="1"] .heros { background-image: none; }

/* ===== theme-garrigue.css ===== */
/* =========================================================================
   Thème « Garrigue » — identitaire et chaleureux.
   Olivier, terre cuite et pierre : les couleurs du Gard. Titres à
   empattements, formes adoucies, plus de place au paysage et au patrimoine.
   ========================================================================= */
[data-theme="garrigue"] {
  --fond: #fdfaf5;
  --fond-alt: #f3ece1;
  --fond-carte: #ffffff;
  --fond-accentue: #eaf0e2;
  --fond-inverse: #2b2621;
  --texte-inverse: #fdfaf5;

  --texte: #2b2621;
  --texte-doux: #554c42;
  --texte-tres-doux: #6a5f53;

  --bordure: #e0d5c4;
  --bordure-forte: #9c8c76;

  --accent: #45592f;
  --accent-survol: #34451f;
  --accent-texte: #ffffff;
  --accent-doux: #e7ecdf;
  --accent-doux-texte: #34451f;

  --lien: #7a3520;
  --lien-survol: #5c2415;
  --focus: #b5533c;

  --danger: #9c2c17;
  --danger-fond: #fbe9e4;
  --succes: #36622f;
  --succes-fond: #e7f0e2;
  --info: #2c5468;
  --info-fond: #e5eef2;
  --attention: #8a5300;
  --attention-fond: #fdf1de;

  /* Une couleur par rubrique du menu principal, pour les différencier au
     premier coup d'œil — indépendamment de la lecture du texte. */
  --nav-demarches: #45592f;
  --nav-vie-locale: #b5533c;
  --nav-enfance-jeunesse: #c9932e;
  --nav-cadre-de-vie: #3f7a68;
  --nav-mairie: #7a4a6b;

  --police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --graisse-titre: 600;
  --interlettrage-titre: 0;
  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-grand: 20px;
  --ombre: 0 1px 2px rgb(75 60 40 / .06), 0 6px 16px rgb(75 60 40 / .07);
  --ombre-forte: 0 3px 8px rgb(75 60 40 / .10), 0 16px 40px rgb(75 60 40 / .12);
}

@media (prefers-color-scheme: dark) {
  [data-theme="garrigue"]:not([data-clair]) {
    --fond: #1c1a17;
    --fond-alt: #24211d;
    --fond-carte: #24211d;
    --fond-accentue: #23291d;
    --fond-inverse: #f3ece1;
    --texte-inverse: #24211d;
    --texte: #f0e9df;
    --texte-doux: #cfc4b5;
    --texte-tres-doux: #b8ac9c;
    --bordure: #3b352d;
    --bordure-forte: #857a6a;
    --accent: #a8c48a;
    --accent-survol: #c2d9a9;
    --accent-texte: #1f2a14;
    --accent-doux: #2a3122;
    --accent-doux-texte: #bcd3a1;
    --lien: #e9a487;
    --lien-survol: #f3c0aa;
    --focus: #e9a487;
    --danger: #f0a08c; --danger-fond: #33201b;
    --succes: #a8c48a; --succes-fond: #222a1c;
    --info: #9dc2d4;  --info-fond: #1e2a30;
    --attention: #e8bd7c; --attention-fond: #2f2617;

    --nav-demarches: #a8c48a;
    --nav-vie-locale: #e9a487;
    --nav-enfance-jeunesse: #e0bd6e;
    --nav-cadre-de-vie: #7fc4ae;
    --nav-mairie: #cd9ac0;
  }
}

[data-theme="garrigue"][data-contraste="1"] {
  --fond: #ffffff; --fond-alt: #ffffff; --fond-carte: #ffffff; --fond-accentue: #ffffff;
  --texte: #000000; --texte-doux: #000000; --texte-tres-doux: #1a1a1a;
  --bordure: #000000; --bordure-forte: #000000;
  --accent: #223214; --accent-doux: #ffffff; --accent-doux-texte: #223214;
  --lien: #5c2415; --lien-survol: #000000; --trait: 2px;
  --nav-demarches: var(--accent); --nav-vie-locale: var(--accent);
  --nav-enfance-jeunesse: var(--accent); --nav-cadre-de-vie: var(--accent); --nav-mairie: var(--accent);
}

/* -------------------------------------------------------------------------
   Le bandeau d'accueil du thème Garrigue porte une photo du village.
   L'image n'est téléchargée que si ce thème est actif : les deux autres
   thèmes ne paient jamais son poids.
   Le voile est volontairement très opaque sous la colonne de texte : le
   contraste du titre et du champ de recherche ne dépend jamais de la photo.
   ------------------------------------------------------------------------- */
[data-theme="garrigue"] .heros {
  background-image:
    linear-gradient(to bottom, rgb(253 250 245 / .96), rgb(253 250 245 / .92)),
    url("/img/pont-vidourle-700.jpg");
  background-size: cover;
  background-position: center 60%;
}

@media (min-width: 48em) {
  [data-theme="garrigue"] .heros {
    background-image:
      linear-gradient(to right, rgb(253 250 245 / .98) 0%, rgb(253 250 245 / .96) 52%, rgb(253 250 245 / .45) 100%),
      url("/img/pont-vidourle-1200.jpg");
    background-position: center 55%;
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="garrigue"]:not([data-clair]) .heros {
    background-image:
      linear-gradient(to bottom, rgb(28 26 23 / .96), rgb(28 26 23 / .93)),
      url("/img/pont-vidourle-700.jpg");
  }
  @media (min-width: 48em) {
    [data-theme="garrigue"]:not([data-clair]) .heros {
      background-image:
        linear-gradient(to right, rgb(28 26 23 / .98) 0%, rgb(28 26 23 / .95) 52%, rgb(28 26 23 / .5) 100%),
        url("/img/pont-vidourle-1200.jpg");
    }
  }
}

/* En contraste renforcé, la photo disparaît : rien ne doit gêner la lecture. */
[data-theme="garrigue"][data-contraste="1"] .heros { background-image: none; }

/* ===== theme-guichet.css ===== */
/* =========================================================================
   Thème « Guichet » — utilitaire, façon application.
   Mode sombre natif, recherche dominante, tuiles denses, typographie franche.
   La direction la plus rapide pour agir, la plus efficace à une main.
   ========================================================================= */
[data-theme="guichet"] {
  --fond: #0f151d;
  --fond-alt: #161d29;
  --fond-carte: #18202c;
  --fond-accentue: #122b28;
  --fond-inverse: #f2f6fa;
  --texte-inverse: #0f151d;

  --texte: #f2f6fa;
  --texte-doux: #b3c0d0;
  --texte-tres-doux: #93a2b5;

  --bordure: #2a3546;
  --bordure-forte: #6b7d95;

  --accent: #38d6b0;
  --accent-survol: #6ae6c8;
  --accent-texte: #052b22;
  --accent-doux: #10312a;
  --accent-doux-texte: #6ae6c8;

  --lien: #8ee0ff;
  --lien-survol: #b8ecff;
  --focus: #8ee0ff;

  --danger: #ff9d92;
  --danger-fond: #35201d;
  --succes: #78e3a6;
  --succes-fond: #12301f;
  --info: #8ec9ff;
  --info-fond: #16263a;
  --attention: #ffc46b;
  --attention-fond: #33280f;

  /* Une couleur par rubrique du menu principal, pour les différencier au
     premier coup d'œil — indépendamment de la lecture du texte. */
  --nav-demarches: #38d6b0;
  --nav-vie-locale: #ffc46b;
  --nav-enfance-jeunesse: #c9a4ff;
  --nav-cadre-de-vie: #8ec9ff;
  --nav-mairie: #e8d9b0;

  --police-titre: var(--police-corps);
  --graisse-titre: 800;
  --interlettrage-titre: -.025em;
  --rayon: 10px;
  --rayon-petit: 6px;
  --rayon-grand: 18px;
  --ombre: 0 1px 2px rgb(0 0 0 / .4);
  --ombre-forte: 0 8px 32px rgb(0 0 0 / .5);
}

[data-theme="guichet"][data-contraste="1"] {
  --fond: #000000; --fond-alt: #000000; --fond-carte: #000000; --fond-accentue: #000000;
  --texte: #ffffff; --texte-doux: #ffffff; --texte-tres-doux: #e6e6e6;
  --bordure: #ffffff; --bordure-forte: #ffffff;
  --accent: #5ff0c8; --accent-texte: #000000; --accent-doux: #000000; --accent-doux-texte: #5ff0c8;
  --lien: #a9e9ff; --lien-survol: #ffffff; --trait: 2px;
  --nav-demarches: var(--accent); --nav-vie-locale: var(--accent);
  --nav-enfance-jeunesse: var(--accent); --nav-cadre-de-vie: var(--accent); --nav-mairie: var(--accent);
}


/* -------------------------------------------------------------------------
   Photo d'arrière-plan du bandeau d'accueil : le Vidourle en eaux calmes,
   assombri et teinté vers le sarcelle de l'accent — un traitement sombre et
   graphique, cohérent avec l'esprit « application » du thème. Guichet n'a
   qu'une seule variante (toujours sombre) : pas de déclinaison claire à gérer.
   ------------------------------------------------------------------------- */
[data-theme="guichet"] .heros {
  background-image:
    linear-gradient(to bottom, rgb(8 14 19 / .95), rgb(8 14 19 / .9)),
    url("/img/vidourle-700.jpg");
  background-size: cover;
  background-position: center 55%;
}

@media (min-width: 48em) {
  [data-theme="guichet"] .heros {
    background-image:
      linear-gradient(to right, rgb(8 14 19 / .97) 0%, rgb(9 27 25 / .92) 52%, rgb(9 40 35 / .6) 100%),
      url("/img/vidourle-1200.jpg");
    background-position: center 45%;
  }
}

/* En contraste renforcé, la photo disparaît : rien ne doit gêner la lecture. */
[data-theme="guichet"][data-contraste="1"] .heros { background-image: none; }

/* Le mélange « multiply » de la bannière en écho (composants.css) écrase les
   photos vers le noir sur un thème déjà sombre. On y substitue une teinte
   « color » à faible opacité, qui colore sans jamais assombrir davantage. */
[data-theme="guichet"] .banniere-page img { filter: saturate(.6) contrast(1.08) brightness(1.2); }
[data-theme="guichet"] .banniere-page::after { background: var(--accent); mix-blend-mode: color; opacity: .22; }

/* ===== composants.css ===== */
/* =====================================================================
   Composants. Mobile d'abord : toute media query est en min-width.
   ===================================================================== */

/* --- Boutons ---------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-block-size: var(--cible); padding: var(--e2) var(--e4);
  border-radius: var(--rayon); border: var(--trait) solid transparent;
  font-weight: 600; line-height: 1.25; text-decoration: none; text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton .icone { inline-size: 1.25em; block-size: 1.25em; }
.bouton--principal { background: var(--accent); color: var(--accent-texte); }
.bouton--principal:hover { background: var(--accent-survol); color: var(--accent-texte); }
.bouton--secondaire { background: var(--fond-carte); color: var(--lien); border-color: var(--bordure-forte); }
.bouton--secondaire:hover { background: var(--accent-doux); color: var(--accent-doux-texte); border-color: var(--accent); }
.bouton--fantome { color: var(--texte); padding-inline: var(--e3); }
.bouton--fantome:hover { background: var(--fond-alt); color: var(--texte); }
.bouton--large { inline-size: 100%; }
@media (min-width: 40em) { .bouton--large { inline-size: auto; padding-inline: var(--e5); } }

/* --- Bandeau d'alerte -------------------------------------------------- */
.alerte { background: var(--attention-fond); border-block-end: 3px solid var(--attention); color: var(--texte); }
.alerte--urgence { background: var(--danger-fond); border-color: var(--danger); }
.alerte--info { background: var(--info-fond); border-color: var(--info); }
.alerte__inner { display: flex; align-items: flex-start; gap: var(--e3); padding-block: var(--e3); flex-wrap: wrap; }
.alerte .icone { color: var(--attention); }
.alerte--urgence .icone { color: var(--danger); }
.alerte__texte { flex: 1 1 16rem; }
.alerte__lien { color: var(--lien); font-weight: 600; }

/* --- En-tête -------------------------------------------------------------
   L'en-tête porte la couleur d'accent du thème en fond plein : c'est la
   couleur la plus appuyée de la charte, elle doit détacher nettement l'en-tête
   (et le menu qu'il contient) du reste de la page, quel que soit le thème. */
.entete { position: sticky; inset-block-start: 0; z-index: 60; background: var(--accent); }
.entete__barre { display: flex; align-items: center; gap: var(--e3); min-block-size: 4rem; }

.marque { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--accent-texte); margin-inline-end: auto; padding-block: var(--e2); min-inline-size: 0; }
.marque__blason { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--rayon-petit); background: var(--accent-texte); color: var(--accent); }
.marque__blason .icone { inline-size: 1.5rem; block-size: 1.5rem; }
.marque__nom { display: block; font-weight: 700; font-size: var(--t-grand); line-height: 1.15; letter-spacing: var(--interlettrage-titre); }
.marque__sous { display: none; font-size: var(--t-mini); color: var(--accent-texte); opacity: .8; }
.marque:hover .marque__nom { text-decoration: underline; }
/* Sous 30em, le nom de la commune tient sur une ligne : l'en-tête collant
   ne doit jamais manger plus de 64 px de hauteur d'écran. */
@media (min-width: 30em) { .marque__sous { display: block; } }
@media (max-width: 29.99em) {
  .marque__nom { font-size: var(--t-corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .marque__texte { min-inline-size: 0; }
  .marque { gap: var(--e2); }
}

.entete__actions { display: flex; align-items: center; gap: var(--e1); flex: none; }
.entete__actions .bouton--fantome { color: var(--accent-texte); }
.entete__actions .bouton--fantome:hover { background: var(--accent-survol); color: var(--accent-texte); }
.entete__recherche span, .entete__a11y span, .entete__menu span { display: none; }
.entete__recherche { text-decoration: none; }
@media (min-width: 30em) { .entete__recherche span, .entete__menu span { display: inline; } }
@media (min-width: 64em) { .entete__a11y .entete__label { display: inline; } }

.entete__menu .icone--fermer { display: none; }
.entete__menu[aria-expanded="true"] .icone--menu { display: none; }
.entete__menu[aria-expanded="true"] .icone--fermer { display: block; }
@media (min-width: 64em) { .entete__menu { display: none; } }

/* --- Menu principal -----------------------------------------------------
   Chaque entrée porte sa propre couleur (--couleur-rubrique, posée en style
   inline depuis la teinte --nav-* du thème actif) et sa propre icône : les
   5 rubriques se distinguent ainsi au premier coup d'œil, pas seulement à
   la lecture du texte. -------------------------------------------------- */
.menu { border-block-start: var(--trait) solid var(--bordure); background: var(--fond-alt); }
.menu__liste { display: grid; gap: var(--trait); }
.menu__liste a {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) 0; text-decoration: none; color: var(--texte);
  border-block-end: var(--trait) solid var(--bordure);
  border-inline-start: 4px solid transparent;
}
.menu__liste li:last-child a { border-block-end: 0; }
.menu__liste a .icone { color: var(--couleur-rubrique); margin-block-start: .1em; }
.menu__texte { min-inline-size: 0; }
.menu__libelle { display: block; font-weight: 600; }
.menu__desc { display: block; font-size: var(--t-petit); color: var(--texte-doux); }
.menu__liste a:hover { border-inline-start-color: var(--couleur-rubrique); background: var(--fond-carte); }
.menu__liste a:hover .menu__libelle { color: var(--couleur-rubrique); }
.menu__liste a[aria-current="page"] { border-inline-start-color: var(--couleur-rubrique); padding-inline-start: var(--e3); background: var(--fond-carte); }
.menu__liste a[aria-current="page"] .menu__libelle { color: var(--couleur-rubrique); }

/* Sur mobile, le menu est replié — mais uniquement si JavaScript est actif. */
.js .menu { display: none; }
.js .menu.est-ouvert { display: block; }

@media (min-width: 64em) {
  .js .menu, .menu { display: block; background: var(--fond); border-block-start: 0; }
  .menu__liste { grid-auto-flow: column; justify-content: start; gap: var(--e1); }
  .menu__liste a {
    align-items: center; border-inline-start: 0;
    border-block-end: 3px solid transparent; padding: var(--e2) var(--e3);
  }
  .menu__liste a:hover { background: var(--fond-alt); }
  .menu__liste a[aria-current="page"] {
    background: none; border-block-end-color: var(--couleur-rubrique); padding-inline-start: var(--e3);
  }
  /* Sur grand écran l'en-tête reste collé en haut : on garde une seule ligne de
     navigation. Les descriptions restent visibles dans le menu mobile, sur la
     page d'accueil et sur chaque sommaire de rubrique. */
  .menu__desc { display: none; }
}

/* --- Panneau d'affichage (accessibilité) -------------------------------- */
.panneau-a11y { background: var(--fond-alt); border-block-end: var(--trait) solid var(--bordure); }
.panneau-a11y__inner { display: grid; gap: var(--e4); padding-block: var(--e4); }
.panneau-a11y legend { font-weight: 600; margin-block-end: var(--e2); }
.panneau-a11y__aide { font-size: var(--t-petit); color: var(--texte-doux); }
.segments { display: flex; flex-wrap: wrap; gap: var(--e2); }
.segments button {
  min-block-size: var(--cible); padding: var(--e2) var(--e3);
  border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon);
  background: var(--fond-carte); color: var(--texte); font-size: var(--t-petit); font-weight: 600;
}
.segments button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
@media (min-width: 48em) { .panneau-a11y__inner { grid-template-columns: auto auto; align-items: start; gap: var(--e6); } .panneau-a11y__aide { grid-column: 1 / -1; } }

/* --- Fil d'Ariane ------------------------------------------------------ */
.fil { inline-size: min(100% - 2 * var(--gouttiere), var(--largeur)); margin: var(--e4) auto 0; font-size: var(--t-petit); }
.fil ol { display: flex; flex-wrap: wrap; gap: var(--e2); color: var(--texte-doux); }
.fil li + li::before { content: "›"; margin-inline-end: var(--e2); color: var(--texte-tres-doux); }
.fil [aria-current="page"] { color: var(--texte); font-weight: 600; }

/* --- Recherche --------------------------------------------------------- */
.recherche { position: relative; }
.recherche__label { display: block; font-weight: 600; margin-block-end: var(--e2); }
.recherche--grande .recherche__label { font-size: var(--t-grand); }
.recherche__boite {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
  padding-inline-start: var(--e3);
}
.recherche__boite:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.recherche__loupe { color: var(--texte-doux); flex: none; }
.recherche__champ {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--cible);
  padding: var(--e2) 0; border: 0; background: none; font-size: var(--t-corps);
}
.recherche__champ:focus { outline: none; }
.recherche__champ::-webkit-search-cancel-button { cursor: pointer; }
.recherche__bouton { border-radius: 0 calc(var(--rayon) - 2px) calc(var(--rayon) - 2px) 0; flex: none; }

/* Sur les petits écrans, le bouton passe sous le champ : la saisie reste large. */
@media (max-width: 29.99em) {
  .recherche__boite { flex-wrap: wrap; padding: var(--e2) var(--e3); gap: var(--e2) var(--e2); }
  .recherche__champ { flex: 1 1 8rem; }
  .recherche__bouton { flex: 1 1 100%; border-radius: var(--rayon-petit); }
}
.recherche__aide { font-size: var(--t-petit); color: var(--texte-doux); margin-block-start: var(--e2); }

.recherche__resultats {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% - 1.5rem); z-index: 70;
  background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); max-block-size: min(70vh, 32rem); overflow-y: auto;
}
.recherche__resultats[hidden] { display: none; }
.resultat {
  display: block; padding: var(--e3) var(--e4); text-decoration: none; color: var(--texte);
  border-block-end: var(--trait) solid var(--bordure);
}
.resultat:last-child { border-block-end: 0; }
.resultat:hover, .resultat[aria-selected="true"] { background: var(--accent-doux); color: var(--accent-doux-texte); }
.resultat__titre { display: block; font-weight: 600; }
.resultat__resume { display: block; font-size: var(--t-petit); color: var(--texte-doux); }
.resultat:hover .resultat__resume, .resultat[aria-selected="true"] .resultat__resume { color: inherit; }
.resultat__cat { display: inline-block; font-size: var(--t-mini); color: var(--texte-doux); }
.resultat--reponse { background: var(--info-fond); }
.resultat--reponse .resultat__titre::before { content: "Réponse rapide — "; font-weight: 400; color: var(--texte-doux); }
.resultat__vide { padding: var(--e4); color: var(--texte-doux); }

.suggestions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.suggestions a {
  display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: var(--e1) var(--e3);
  font-size: var(--t-mini);
  background: var(--accent-doux); color: var(--accent-doux-texte); border-radius: var(--rayon-pilule);
  font-weight: 600; text-decoration: none; line-height: 1.35;
}
@media (min-width: 40em) { .suggestions a { font-size: var(--t-petit); padding: var(--e2) var(--e3); } }
.suggestions a:hover { background: var(--accent); color: var(--accent-texte); }

/* --- Fenêtre de recherche ---------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; align-items: start; }
.overlay[hidden] { display: none; }
.overlay__voile { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.overlay__boite {
  position: relative; inline-size: min(100% - 2 * var(--e4), 44rem); margin: var(--e5) auto;
  background: var(--fond); border-radius: var(--rayon-grand); padding: var(--e5);
  box-shadow: var(--ombre-forte); max-block-size: calc(100vh - 2 * var(--e5)); overflow-y: auto;
}
.overlay__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-block-end: var(--e4); }
.overlay__suggestions { margin-block-start: var(--e5); }
.overlay__suggestions h3 { font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-block-end: var(--e2); }

/* --- Cartes ------------------------------------------------------------ */
.carte {
  background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
  padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2);
}
.carte__titre { font-size: var(--t-h3); }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; }
.carte { position: relative; }
.carte__titre a:hover { color: var(--lien); text-decoration: underline; }
.carte__resume { color: var(--texte-doux); }
.carte__detail { font-size: var(--t-petit); color: var(--texte-doux); }
.carte__meta { font-size: var(--t-petit); color: var(--texte-doux); display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.carte__enseigne { font-weight: 600; }
.carte__nom { font-weight: 700; }
.carte__fonction { color: var(--texte-doux); font-size: var(--t-petit); }
.carte:has(.carte__titre a):hover { border-color: var(--accent); box-shadow: var(--ombre); }

.grille-cartes { display: grid; gap: var(--e4); }
@media (min-width: 40em) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } }
.grille-cartes--large { grid-template-columns: 1fr; }
@media (min-width: 48em) { .grille-cartes--large { grid-template-columns: repeat(2, 1fr); } }
.grille-cartes--compacte { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.etiquette {
  display: inline-block; padding: .125rem var(--e2); border-radius: var(--rayon-petit);
  background: var(--fond-alt); color: var(--texte-doux); font-size: var(--t-mini); font-weight: 600;
}
.etiquette--epingle { background: var(--accent-doux); color: var(--accent-doux-texte); }

.lieu {
  display: inline-flex; align-items: center; gap: var(--e1); align-self: flex-start;
  padding: .125rem var(--e2); border-radius: var(--rayon-pilule);
  font-size: var(--t-mini); font-weight: 600; border: var(--trait) solid currentColor;
}
.lieu--mairie { color: var(--succes); }
.lieu--enligne { color: var(--info); }
.lieu--ailleurs { color: var(--attention); }

/* --- Tuiles « Je veux… » ------------------------------------------------ */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
@media (min-width: 40em) { .tuiles { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }
@media (min-width: 64em) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile a {
  display: flex; flex-direction: column; gap: var(--e2); block-size: 100%;
  padding: var(--e4); text-decoration: none; color: var(--texte);
  background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.tuile a:hover { border-color: var(--accent); background: var(--fond-accentue); transform: translateY(-2px); }
.tuile__icone { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--rayon-petit); background: var(--accent-doux); color: var(--accent-doux-texte); }
.tuile__titre { font-weight: 600; line-height: 1.3; }
.tuile__lieu { font-size: var(--t-mini); color: var(--texte-doux); margin-block-start: auto; }

/* --- Sections ---------------------------------------------------------- */
.principal { flex: 1 0 auto; padding-block: var(--e5) var(--e8); }
.section { margin-block-start: var(--e7); }
.section:first-child { margin-block-start: 0; }
.section__entete { margin-block-end: var(--e4); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e4); }
.section__entete h2 { display: flex; align-items: center; gap: var(--e2); }
.section__entete p { color: var(--texte-doux); flex: 1 1 100%; }
.section__pied { margin-block-start: var(--e4); }
.lien-suite { display: inline-flex; align-items: center; gap: var(--e1); font-weight: 600; text-decoration: none; }
.lien-suite:hover { text-decoration: underline; }

.page-entete { margin-block-end: var(--e6); display: grid; gap: var(--e3); }
.page-entete__intro { font-size: var(--t-grand); color: var(--texte-doux); max-inline-size: 44rem; }

.ancres { margin-block: var(--e5); }
.ancres ul { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ancres a {
  display: inline-flex; align-items: center; gap: var(--e1); min-block-size: 2.5rem;
  padding: var(--e2) var(--e3); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-pilule);
  text-decoration: none; color: var(--texte); font-size: var(--t-petit); font-weight: 600;
}
.ancres a:hover { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-doux-texte); }

.sommaire {
  inline-size: min(100% - 2 * var(--gouttiere), var(--largeur-etroite)); margin: 0 auto var(--e5);
  padding: var(--e4); background: var(--fond-alt); border-radius: var(--rayon);
}
.sommaire h2 { font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-block-end: var(--e2); }
.sommaire ol { display: grid; gap: var(--e1); }
.sommaire a { font-weight: 600; }

/* --- Listes de contenu -------------------------------------------------- */
.liste-simple { display: grid; gap: var(--e1); }
.liste-simple li { padding-block: var(--e2); border-block-end: var(--trait) solid var(--bordure); display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: space-between; }
.liste-simple__lieu { font-size: var(--t-mini); color: var(--texte-doux); }
.liste-detail { display: grid; gap: var(--e4); }
.liste-detail li { padding: var(--e4); border: var(--trait) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
.liste-detail h3 { margin-block-end: var(--e2); }
.liste-documents { display: grid; gap: var(--e1); }
.liste-documents li { padding-block: var(--e2); border-block-end: var(--trait) solid var(--bordure); }
.liste-documents a { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; }
.liste-documents .indisponible { color: var(--texte-doux); display: flex; align-items: center; gap: var(--e2); }
.liste-documents .indisponible em { font-size: var(--t-petit); }
.titre-groupe { display: flex; align-items: center; gap: var(--e2); margin-block: var(--e5) var(--e2); }

.contact-liste { display: grid; gap: var(--e1); font-size: var(--t-petit); margin-block-start: var(--e2); }
.contact-liste li { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texte-doux); }
.contact-liste .icone { color: var(--texte-tres-doux); margin-block-start: .15em; }
.contact-liste a { position: relative; z-index: 1; }

/* --- Encadré ------------------------------------------------------------ */
.encadre {
  margin-block-start: var(--e6); padding: var(--e5);
  background: var(--fond-accentue); border-inline-start: 4px solid var(--accent); border-radius: var(--rayon);
  display: grid; gap: var(--e3);
}
.encadre h2 { font-size: var(--t-h3); }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  margin-block-start: var(--e5); background: var(--fond-alt); border-block-start: var(--trait) solid var(--bordure);
  font-size: var(--t-petit); line-height: 1.5;
}
@media (min-width: 48em) { .pied { margin-block-start: var(--e7); } }
.pied h3 { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin: 0; }
.pied ul { display: grid; gap: var(--e2); }
.pied a { color: var(--texte); }
.pied a:hover { color: var(--lien); }

/* Coordonnées et horaires : bloc le plus consulté, toujours ouvert */
.pied__contact { display: grid; gap: var(--e5); padding-block: var(--e5); border-block-end: var(--trait) solid var(--bordure); }
@media (min-width: 40em) { .pied__contact { grid-template-columns: 1fr 1fr; gap: var(--e6); } }
.pied__coordonnees h3, .pied__horaires-bloc h3 { margin-block-end: var(--e2); }
.pied__coordonnees address { font-style: normal; }
.pied__horaires { gap: 0; margin-block-end: var(--e2); }
.pied__horaires li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e3);
  padding-block: var(--e1); border-block-end: var(--trait) solid var(--bordure);
}
.pied__horaires li:last-child { border-block-end: none; }
.pied__horaires li span:first-child { font-weight: 600; }

/* Plan du site : les rubriques secondaires se replient pour rester courtes */
.pied__plan { padding-block: var(--e1); border-block-end: var(--trait) solid var(--bordure); }
.pied__colonne { border-block-end: var(--trait) solid var(--bordure); }
.pied__colonne:last-child { border-block-end: none; }
.pied__colonne summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-block-size: var(--cible); padding-block: var(--e2); cursor: pointer; list-style: none;
}
.pied__colonne summary::-webkit-details-marker { display: none; }
.pied__colonne summary h3 { color: var(--texte); font-size: var(--t-petit); }
.pied__colonne summary:hover h3 { color: var(--lien); }
.pied__chevron { color: var(--texte-doux); transition: transform var(--transition); }
.pied__colonne[open] .pied__chevron { transform: rotate(90deg); }
.pied__colonne ul { padding-block-end: var(--e3); }
@media (min-width: 64em) {
  .pied__plan { display: grid; grid-template-columns: repeat(5, 1fr); border-block-end: none; }
  .pied__colonne { border-block-end: none; border-inline-start: var(--trait) solid var(--bordure); padding-inline-start: var(--e4); }
  .pied__colonne:first-child { border-inline-start: none; padding-inline-start: 0; }
}

.pied__liens-utiles { padding-block: var(--e5); }
.pied__liens-utiles ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }

.pied__bas { background: var(--fond); border-block-start: var(--trait) solid var(--bordure); }
.pied__bas-inner { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); justify-content: space-between; align-items: center; padding-block: var(--e4); }
.pied__bas-inner .pied__legal { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.pied__copyright { color: var(--texte-doux); }

/* --- Barre d'action mobile ---------------------------------------------- */
.barre-mobile {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--fond); border-block-start: var(--trait) solid var(--bordure);
  padding-block-end: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgb(0 0 0 / .08);
}
.barre-mobile a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-block-size: 3.5rem; min-inline-size: 0; padding: var(--e2) 2px;
  font-size: var(--t-mini); font-weight: 600; color: var(--texte); text-decoration: none;
}
/* À 320 px, quatre libellés doivent tenir sans jamais provoquer de défilement
   horizontal : ils se réduisent, puis se tronquent proprement. */
.barre-mobile a > span:not(.sr-only) {
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 22.5em) { .barre-mobile a { font-size: .75rem; letter-spacing: -.01em; } }
.barre-mobile a:hover { color: var(--lien); background: var(--fond-alt); }
.barre-mobile .icone { inline-size: 1.375rem; block-size: 1.375rem; }
.barre-mobile .lien-externe .icone--mini { display: none; }
body { padding-block-end: 3.5rem; }
@media (min-width: 64em) { .barre-mobile { display: none; } body { padding-block-end: 0; } }

/* --- Tableaux ------------------------------------------------------------ */
/* Un tableau trop large défile dans son propre cadre : la page, elle, ne
   défile jamais horizontalement (RGAA 10.11). Le cadre est focalisable pour
   rester atteignable au clavier. */
.tableau-defilant { overflow-x: auto; }
.tableau-defilant:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tableau { font-size: var(--t-petit); min-inline-size: 22rem; }
.tableau th, .tableau td { padding: var(--e3); text-align: start; border-block-end: var(--trait) solid var(--bordure); }
.tableau thead th { background: var(--fond-alt); font-weight: 700; }
.tableau tfoot th, .tableau tfoot td { font-weight: 700; }
.tableau td:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }

/* --- Prose (pages Markdown) ---------------------------------------------- */
.prose { display: grid; gap: var(--e4); max-inline-size: 42rem; }
.prose h2 { margin-block-start: var(--e5); }
.prose h3 { margin-block-start: var(--e3); }
.prose ul, .prose ol { display: grid; gap: var(--e2); padding-inline-start: var(--e5); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose ul li::marker, .prose ol li::marker { color: var(--accent); }
.prose blockquote {
  padding: var(--e4) var(--e5); background: var(--fond-alt);
  border-inline-start: 4px solid var(--accent); border-radius: var(--rayon-petit); font-style: italic;
}
.prose hr { border: 0; border-block-start: var(--trait) solid var(--bordure); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--fond-alt); padding: .1em .35em; border-radius: var(--rayon-petit); }

/* --- Bannière en écho ------------------------------------------------------
   Une photo cliquée dans la galerie d'accueil doit se retrouver, adoucie, sur
   la page appelée : le fil visuel entre les deux. Couleurs atténuées via un
   filtre CSS, puis une teinte de la couleur d'accent du thème en surimpression
   — jamais de couleur codée en dur, uniquement les variables déjà définies.
   Aucun texte ne repose sur cette image : le contraste du titre, en dessous,
   ne dépend jamais d'elle. ------------------------------------------------- */
.banniere-page { position: relative; margin-block-end: var(--e5); border-radius: var(--rayon-grand); overflow: hidden; }
.banniere-page img {
  display: block; inline-size: 100%; block-size: clamp(9.5rem, 24vw, 16rem); object-fit: cover;
  filter: saturate(.55) contrast(.94) brightness(1.04);
}
.banniere-page::after {
  content: ""; position: absolute; inset: 0; background: var(--accent-doux);
  mix-blend-mode: multiply; opacity: .4; pointer-events: none;
}
.banniere-page figcaption { margin-block-start: var(--e2); font-size: var(--t-mini); color: var(--texte-doux); }

.documents { margin-block-start: var(--e6); padding: var(--e5); background: var(--fond-alt); border-radius: var(--rayon); }
.documents h2 { font-size: var(--t-h3); margin-block-end: var(--e3); }
.documents .poids {
  font-size: var(--t-mini); font-weight: 600; color: var(--texte-doux);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon-petit); padding: 0 .35em;
}

.liens-utiles { margin-block-start: var(--e6); padding: var(--e5); background: var(--fond-alt); border-radius: var(--rayon); }
.liens-utiles h2 { font-size: var(--t-h3); margin-block-end: var(--e3); }
.liens-utiles__boutons { display: flex; flex-wrap: wrap; gap: var(--e3); list-style: none; padding: 0; margin: 0; }

/* Logo d'un site partenaire : plaque blanche fixe, pour rester lisible quel que
   soit le thème (y compris en mode sombre), le logo lui-même n'étant pas prévu
   pour être posé sur un fond coloré. */
.logo-lien { background: #fff; border-color: var(--bordure-forte); padding-inline: var(--e4); }
.logo-lien:hover { border-color: var(--accent); }
.logo-lien img { display: block; width: auto; height: auto; max-inline-size: 11rem; max-block-size: 2.5rem; }
.logo-lien .icone { display: none; }

/* ===== pages.css ===== */
/* =====================================================================
   Styles propres à certaines pages.
   ===================================================================== */

/* --- Accueil : héros ---------------------------------------------------- */
.heros { padding-block: var(--e5) var(--e6); background: var(--fond-accentue); border-block-end: var(--trait) solid var(--bordure); margin-block-start: calc(-1 * var(--e5)); }
@media (min-width: 48em) { .heros { padding-block: var(--e6) var(--e7); } }
.heros__titre { max-inline-size: 20ch; }
.heros__intro { color: var(--texte-doux); margin-block: var(--e2) var(--e4); max-inline-size: 44rem; }
@media (min-width: 48em) { .heros__intro { font-size: var(--t-grand); margin-block-end: var(--e5); } }
.heros .recherche { max-inline-size: 46rem; }
.heros__suggestions { margin-block-start: var(--e4); max-inline-size: 46rem; }
.heros__suggestions-titre { font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); font-weight: 700; margin-block-end: var(--e2); }

.page-accueil .section--tuiles { margin-block-start: var(--e7); }

/* --- Accueil : bloc pratique -------------------------------------------- */
.section--pratique { background: var(--fond-alt); padding-block: var(--e7); margin-block-start: var(--e7); }
.pratique { display: grid; gap: var(--e6); }
@media (min-width: 48em) { .pratique { grid-template-columns: repeat(2, 1fr); gap: var(--e7); } }
.pratique__statut { display: flex; align-items: center; gap: var(--e2); margin-block: var(--e3); font-weight: 600; }
.pastille { inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: var(--texte-tres-doux); flex: none; }
[data-ouverte="1"] .pastille { background: var(--succes); }
[data-ouverte="0"] .pastille { background: var(--danger); }
.pratique__horaires { display: grid; gap: var(--e1); max-inline-size: 26rem; }
.pratique__horaires li { display: flex; justify-content: space-between; gap: var(--e3); padding-block: var(--e2); border-block-end: var(--trait) solid var(--bordure); }
.pratique__horaires li.ferme { color: var(--texte-tres-doux); }
.pratique__horaires li[data-aujourdhui] { font-weight: 700; color: var(--texte); }
.pratique__horaires li[data-aujourdhui] span:first-child::after { content: " · aujourd'hui"; font-weight: 400; font-size: var(--t-mini); color: var(--texte-doux); }

.popup-horaires {
  position: fixed; margin: auto; inset: 0; max-block-size: calc(100vh - 2 * var(--e5));
  inline-size: min(100% - 2 * var(--e4), 26rem); overflow-y: auto;
  background: var(--fond); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-grand);
  padding: var(--e5); box-shadow: var(--ombre-forte);
}
.popup-horaires::backdrop { background: rgb(0 0 0 / .5); }
.popup-horaires__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-block-end: var(--e3); }
.popup-horaires__entete h3 { margin: 0; }
.pratique__contacts { display: grid; gap: var(--e3); margin-block: var(--e3); }
.pratique__contacts li { display: flex; gap: var(--e3); align-items: flex-start; }
.pratique__contacts .icone { color: var(--accent); flex: none; }
.pratique__boutons { display: flex; flex-wrap: wrap; gap: var(--e3); margin-block-start: var(--e4); }

.grille-editoriale { display: grid; gap: var(--e6); margin-block-start: var(--e7); }
@media (min-width: 64em) { .grille-editoriale { grid-template-columns: 1.6fr 1fr; gap: var(--e7); } .grille-editoriale .section { margin-block-start: 0; } }
.liste-actus, .liste-agenda { display: grid; gap: var(--e4); }
.liste-actus--pleine, .liste-agenda--pleine { gap: var(--e5); }
.carte--evt .evt__quand, .carte--evt .evt__ou { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--t-petit); color: var(--texte-doux); }

/* --- Image d'actualité -------------------------------------------------
   Même principe que .carte-galerie : aspect-ratio fixe + object-fit: cover,
   pour un rendu uniforme quelle que soit la photo envoyée par la mairie.
   L'article, lui, propose un lien vers l'image d'origine non recadrée. */
.carte__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon); margin-block-end: var(--e3); }
.carte__image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.carte__texte { display: flex; flex-direction: column; gap: var(--e2); min-inline-size: 0; }

/* Dans la liste des actualités (pas l'aperçu d'accueil) : une vignette carrée
   à gauche du texte s'il y a du texte, une image capée à 300 px sans
   recadrage si l'actualité n'a qu'une image (pas de texte à mettre à côté).
   :has() est le même mécanisme que .carte:has(.carte__titre a) ci-dessus. */
.liste-actus--pleine .carte--actu:has(.carte__image):has(.carte__resume) {
  flex-direction: row;
  align-items: flex-start;
}
.liste-actus--pleine .carte--actu:has(.carte__image):has(.carte__resume) .carte__image {
  flex: 0 0 auto; inline-size: 6.5rem; block-size: 6.5rem; aspect-ratio: 1 / 1; margin-block-end: 0;
}
.liste-actus--pleine .carte--actu:has(.carte__image):not(:has(.carte__resume)) .carte__image {
  max-inline-size: 300px; aspect-ratio: auto; overflow: visible;
}
.liste-actus--pleine .carte--actu:has(.carte__image):not(:has(.carte__resume)) .carte__image img {
  inline-size: 100%; block-size: auto; object-fit: contain;
}
.article__image { margin: var(--e5) 0; }
.article__image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); }
.article__image figcaption { margin-block-start: var(--e2); font-size: var(--t-mini); }
.article__image figcaption a { color: var(--texte-doux); }

.rubriques { display: grid; gap: var(--e4); }
@media (min-width: 40em) { .rubriques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rubriques { grid-template-columns: repeat(5, 1fr); } }

.section--appli { margin-block-start: var(--e7); }
.appli { display: grid; gap: var(--e4); padding: var(--e5); background: var(--fond-accentue); border-radius: var(--rayon-grand); }
.appli p { color: var(--texte-doux); margin-block-start: var(--e2); }
.appli__boutons { display: flex; flex-wrap: wrap; gap: var(--e3); }
@media (min-width: 56em) { .appli { grid-template-columns: 1.6fr auto; align-items: center; gap: var(--e6); } }

/* --- Fiche de démarche --------------------------------------------------- */
.fiche { display: grid; gap: var(--e6); }
.fiche__entete { display: grid; gap: var(--e3); }
.fiche__categorie { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-petit); font-weight: 600; color: var(--texte-doux); }
.fiche__resume { font-size: var(--t-grand); color: var(--texte-doux); }
.fiche__ou {
  display: grid; gap: var(--e2); padding: var(--e4);
  background: var(--fond-alt); border-radius: var(--rayon); border: var(--trait) solid var(--bordure);
}
.fiche__ou .lieu { justify-self: start; }
.fiche__ou p { font-size: var(--t-petit); color: var(--texte-doux); }
.fiche__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-block-start: var(--e2); }
.fiche__bloc { display: grid; gap: var(--e3); }
.fiche__bloc h2 { font-size: var(--t-h3); padding-block-end: var(--e2); border-block-end: 2px solid var(--accent); }
.fiche__contact { background: var(--fond-alt); padding: var(--e5); border-radius: var(--rayon); }
.fiche__contact h2 { border-block-end: 0; padding-block-end: 0; }

.etapes { counter-reset: etape; display: grid; gap: var(--e4); }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 2rem 1fr; gap: var(--e3); align-items: start; }
.etapes li::before {
  content: counter(etape); display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-texte); font-weight: 700; font-size: var(--t-petit);
}
.pieces { display: grid; gap: var(--e2); }
.pieces li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e2); align-items: start; }
.pieces .icone { color: var(--succes); margin-block-start: .2em; }

.paire { display: grid; gap: var(--e4); }
@media (min-width: 40em) { .paire { grid-template-columns: repeat(2, 1fr); } }
.paire dt { display: flex; align-items: center; gap: var(--e2); font-weight: 700; margin-block-end: var(--e1); }
.paire dd { margin: 0; color: var(--texte-doux); }

.retour { margin-block-start: var(--e6); }
.retour a { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; }
.retour .icone { transform: scaleX(-1); }
.liens-suite { margin-block-start: var(--e5); padding: var(--e4); background: var(--fond-alt); border-radius: var(--rayon); }
.liens-suite h2 { font-size: var(--t-h3); margin-block-end: var(--e2); }
.liens-suite ul { display: grid; gap: var(--e2); }

/* --- Contact ------------------------------------------------------------- */
.contact-grille { display: grid; gap: var(--e5); }
@media (min-width: 48em) { .contact-grille { grid-template-columns: repeat(2, 1fr); } }
.carte--contact { gap: var(--e3); padding: var(--e5); }
.carte--contact h2 { font-size: var(--t-h3); }
.carte--urgence { border-color: var(--danger); }
.urgences { display: grid; gap: var(--e2); }
.urgences a { display: flex; align-items: baseline; gap: var(--e3); text-decoration: none; padding-block: var(--e1); }
.urgences strong { font-size: var(--t-h3); color: var(--danger); font-variant-numeric: tabular-nums; }
.urgences span { color: var(--texte); }
.urgences a:hover span { text-decoration: underline; }

/* --- Budget --------------------------------------------------------------- */
.barres { display: grid; gap: var(--e3); margin-block-start: var(--e5); }
.barres li { display: grid; gap: var(--e1); }
.barres__label { font-size: var(--t-petit); font-weight: 600; }
.barres__piste { display: block; block-size: .75rem; background: var(--fond-alt); border-radius: var(--rayon-pilule); overflow: hidden; }
.barres__valeur { display: block; block-size: 100%; background: var(--accent); border-radius: var(--rayon-pilule); }

/* --- Page de recherche ----------------------------------------------------- */
.resultats-page { margin-block-start: var(--e6); }
.resultats-page[hidden] { display: none; }
.resultats-page .resultat { border: var(--trait) solid var(--bordure); border-radius: var(--rayon); margin-block-end: var(--e3); }
.page-recherche .recherche__resultats { display: none; }

/* --- Page des thèmes -------------------------------------------------------- */
.choix-themes { display: grid; gap: var(--e5); }
@media (min-width: 56em) { .choix-themes { grid-template-columns: repeat(3, 1fr); } }
.carte--theme { padding: 0; overflow: hidden; }
.carte--theme > *:not(.apercu) { margin-inline: var(--e4); }
.carte--theme > *:last-child { margin-block-end: var(--e4); }
.carte--theme .carte__meta { margin-block-start: var(--e4); }

.apercu { display: grid; gap: var(--e2); padding: var(--e4); block-size: 11rem; border-block-end: var(--trait) solid var(--bordure); }
.apercu__barre { block-size: .75rem; border-radius: var(--rayon-pilule); inline-size: 45%; }
.apercu__titre { block-size: 1.25rem; border-radius: var(--rayon-petit); inline-size: 80%; }
.apercu__champ { block-size: 2rem; border-radius: var(--rayon-petit); border: 2px solid; }
.apercu__tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.apercu__tuiles i { display: block; block-size: 2.25rem; border-radius: var(--rayon-petit); }

.apercu--republique { background: #ffffff; }
.apercu--republique .apercu__barre { background: #e1000f; }
.apercu--republique .apercu__titre { background: #161616; }
.apercu--republique .apercu__champ { border-color: #000091; background: #ffffff; }
.apercu--republique .apercu__tuiles i { background: #e3e3fd; border: 1px solid #000091; }

.apercu--garrigue { background: #fdfaf5; }
.apercu--garrigue .apercu__barre { background: #b5533c; }
.apercu--garrigue .apercu__titre { background: #2b2621; border-radius: 4px; }
.apercu--garrigue .apercu__champ { border-color: #45592f; background: #ffffff; border-radius: 10px; }
.apercu--garrigue .apercu__tuiles i { background: #e7ecdf; border: 1px solid #9c8c76; border-radius: 10px; }

.apercu--guichet { background: #0f151d; }
.apercu--guichet .apercu__barre { background: #38d6b0; }
.apercu--guichet .apercu__titre { background: #f2f6fa; }
.apercu--guichet .apercu__champ { border-color: #38d6b0; background: #18202c; }
.apercu--guichet .apercu__tuiles i { background: #18202c; border: 1px solid #2a3546; }

/* --- Page des designs : nuance du thème actif ------------------------------ */
[data-theme="republique"] .carte--theme:has([data-theme-choix="republique"]),
[data-theme="garrigue"] .carte--theme:has([data-theme-choix="garrigue"]),
[data-theme="guichet"] .carte--theme:has([data-theme-choix="guichet"]) {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent);
}

/* Les aperçus suivent la préférence d'affichage du visiteur : ce qu'il voit
   dans la vignette est exactement ce qu'il obtiendra en appliquant le thème. */
@media (prefers-color-scheme: dark) {
  :root:not([data-contraste="1"]) .apercu--republique { background: #1e1e1e; }
  :root:not([data-contraste="1"]) .apercu--republique .apercu__titre { background: #ececec; }
  :root:not([data-contraste="1"]) .apercu--republique .apercu__champ { border-color: #8585f6; background: #262626; }
  :root:not([data-contraste="1"]) .apercu--republique .apercu__tuiles i { background: #272747; border-color: #8585f6; }

  :root:not([data-contraste="1"]) .apercu--garrigue { background: #1c1a17; }
  :root:not([data-contraste="1"]) .apercu--garrigue .apercu__barre { background: #e9a487; }
  :root:not([data-contraste="1"]) .apercu--garrigue .apercu__titre { background: #f0e9df; }
  :root:not([data-contraste="1"]) .apercu--garrigue .apercu__champ { border-color: #a8c48a; background: #24211d; }
  :root:not([data-contraste="1"]) .apercu--garrigue .apercu__tuiles i { background: #2a3122; border-color: #857a6a; }
}

/* --- Galerie « Lecques en images » (accueil) ---------------------------- */
/* 9 photos : une grille 3x3 à partir de la tablette garde des vignettes
   assez grandes pour se lire comme des photos, pas comme de la vignette. */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
@media (min-width: 40em) { .galerie { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }

.carte-galerie a {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--rayon); text-decoration: none;
}
.carte-galerie img {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 240ms ease;
}
.carte-galerie a:hover img { transform: scale(1.05); }
.carte-galerie__libelle {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--e3) var(--e2) var(--e2);
  background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / 0));
  color: #fff; font-size: var(--t-mini); font-weight: 700; line-height: 1.25;
}
.carte-galerie a:focus-visible { outline-offset: 3px; }

/* Le thème Garrigue accentue l'effet « village » : coins plus doux, légère profondeur. */
[data-theme="garrigue"] .carte-galerie a { border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
[data-theme="garrigue"] .carte-galerie__libelle { font-family: var(--police-titre); font-weight: 600; letter-spacing: .01em; }

/* ===== impression.css ===== */
/* Impression : une fiche de démarche doit rester utilisable sur papier. */
@media print {
  .entete, .barre-mobile, .overlay, .panneau-a11y, .recherche, .suggestions,
  .fil, .pied__contact, .pied__plan, .pied__liens-utiles, .ancres, .sommaire, .evitement,
  .section--appli, .heros__suggestions { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .conteneur, .conteneur--etroit { inline-size: auto; margin: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .carte, .encadre, .fiche__ou, .fiche__contact { border: 1px solid #999; box-shadow: none; background: #fff; }
  .etapes li::before { border: 1px solid #000; background: #fff; color: #000; }
  h1, h2, h3 { break-after: avoid; }
  .fiche__bloc, .carte, li { break-inside: avoid; }
  .pied__bas-inner::before { content: "Mairie de Lecques — 233 rue du 26 Août 1944, 30250 Lecques — 04 66 80 11 83 — mairie30@lecques.fr"; display: block; }
}