/* ===== 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; }
/* Sur grand écran, l'en-tête collant porte aussi la barre de menu (8,5 rem) :
   sans cette marge, le titre de la section atteinte passait dessous. */
@media (min-width: 64em) { :target { scroll-margin-block-start: 9.5rem; } }

/* 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.
   ------------------------------------------------------------------------ */

/* Polices hébergées sur le site lui-même — jamais chargées depuis un tiers
   (src/styles/polices/, copiées dans /assets/polices/ ; licence SIL OFL
   1.1, fichiers de licence à côté). Sous-ensemble latin, français compris
   (œ, €, guillemets, espaces fines). Sans elles, Android affichait Roboto
   et Noto Serif, faute de Trebuchet MS et d'Iowan Old Style.
   - Source Sans 3 (Adobe) : le texte, dans les trois thèmes. Très lisible,
     chiffres et zéro classiques (Atkinson Hyperlegible, essayée, barre son
     zéro : « Ø4 66 8Ø 11 83 »). Un seul fichier variable, toutes graisses.
   - Spectral (Production Type, Paris) : les titres du thème garrigue, en
     graisse 500 seulement. font-synthesis interdit au navigateur d'en
     fabriquer un faux gras quand un titre demande 600. */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/polices/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/polices/spectral-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
html { font-synthesis: style; }

: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: "Source Sans 3", "Trebuchet MS", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-titre: var(--police-corps);
  --graisse-titre: 600;
  --interlettrage-titre: -.01em;

  /* Source Sans 3 a un œil plus petit que Trebuchet MS (hauteur des
     minuscules 0,486 contre 0,523) : un cran de plus (17 px au lieu de 16)
     lui rend la taille apparente de l'ancienne police. */
  --t-corps: 1.0625rem;
  --t-petit: .9375rem;
  --t-mini: .875rem;
  --t-grand: 1.125rem;
  --t-h1: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --t-h2: clamp(1.25rem, .975rem + 1vw, 1.625rem);
  --t-h3: clamp(1rem, .9rem + .43vw, 1.1875rem);
  --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 ------------------------------------------------------------------- */
/* Pas de défilement animé : un lien vers une section (catégories des
   démarches depuis le menu, sommaires « Sur cette page ») y mène directement,
   sans faire défiler toute la page sous les yeux. */

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: 500;
}
.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;
  --eau: #0063cb;
  /* Plan de zonage du PLU (page Urbanisme) : couleurs d'usage des PLU —
     urbaine, à urbaniser, agricole, naturelle. */
  --zone-u: #f0b7b1; --zone-au: #f5cf95; --zone-a: #f1e7a6; --zone-n: #b7d7a8;
  --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: 600;
  --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;
    --eau: #85b9f8;
    --zone-u: #6a3530; --zone-au: #6b4d1e; --zone-a: #5a5326; --zone-n: #2e4f2d;
    --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;
  --eau: #1478b4;
  /* Plan de zonage du PLU (page Urbanisme) : couleurs d'usage des PLU —
     urbaine, à urbaniser, agricole, naturelle. */
  --zone-u: #f0b7b1; --zone-au: #f5cf95; --zone-a: #f1e7a6; --zone-n: #b7d7a8;

  /* 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: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --graisse-titre: 500;
  --interlettrage-titre: 0;
  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-grand: 20px;
  --ombre: 0 1px 2px rgb(75 60 40 / .05), 0 10px 28px -8px rgb(75 60 40 / .14);
  --ombre-forte: 0 4px 10px rgb(75 60 40 / .10), 0 24px 48px -12px rgb(75 60 40 / .20);
}

@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;
    --eau: #6fc2ea;
    --zone-u: #6a3530; --zone-au: #6b4d1e; --zone-a: #5a5326; --zone-n: #2e4f2d;

    --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.
   ------------------------------------------------------------------------- */
/* Le village perché au-dessus des vignes, photo du haut de l'accueil du
   site historique de la mairie (public/img/village-vignes-*.jpg). */
[data-theme="garrigue"] .heros {
  background-image:
    linear-gradient(to bottom, rgb(253 250 245 / .86), rgb(253 250 245 / .8)),
    url("/img/village-vignes-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 / .86) 0%, rgb(253 250 245 / .78) 48%, rgb(253 250 245 / .3) 66%, rgb(253 250 245 / .02) 100%),
      url("/img/village-vignes-1200.jpg");
    /* Voile d'au moins 74 % sous le texte (jusqu'à 47 % de la largeur) : le
       texte secondaire y garde un contraste AA même devant le plus sombre
       des vignes ; au-delà, il s'efface pour laisser voir le village, cadré
       sur ses toits. Même calcul pour le mode sombre, ci-dessous. */
    background-position: center 38%;
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="garrigue"]:not([data-clair]) .heros {
    background-image:
      linear-gradient(to bottom, rgb(28 26 23 / .88), rgb(28 26 23 / .82)),
      url("/img/village-vignes-700.jpg");
  }
  @media (min-width: 48em) {
    [data-theme="garrigue"]:not([data-clair]) .heros {
      background-image:
        linear-gradient(to right, rgb(28 26 23 / .9) 0%, rgb(28 26 23 / .8) 48%, rgb(28 26 23 / .4) 66%, rgb(28 26 23 / .15) 100%),
        url("/img/village-vignes-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; }

[data-theme="garrigue"] .bouton--principal:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(75 60 40 / .22); }
[data-theme="garrigue"] .carte:has(.carte__titre a):hover { transform: translateY(-3px); }
[data-theme="garrigue"] .marque__blason { box-shadow: 0 2px 6px rgb(75 60 40 / .25); }
[data-theme="garrigue"] .recherche__boite,
[data-theme="garrigue"] .heros__statut { box-shadow: var(--ombre); }
[data-theme="garrigue"] .tuile a:hover .tuile__icone { background: var(--accent); color: var(--accent-texte); }

/* ===== 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;
  --eau: #8ec9ff;
  /* Plan de zonage du PLU (page Urbanisme) : couleurs d'usage des PLU —
     urbaine, à urbaniser, agricole, naturelle, assombries pour ce thème. */
  --zone-u: #6a3530; --zone-au: #6b4d1e; --zone-a: #5a5326; --zone-n: #2e4f2d;
  --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: 700;
  --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: 500; line-height: 1.25; text-decoration: none; text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition),
    transform var(--transition), box-shadow 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: 500; }

/* --- En-tête -------------------------------------------------------------
   En-tête clair et sobre : c'est le trait de bordure et la position collante
   qui le détachent du reste de la page, pas un aplat de couleur — la couleur
   d'accent du thème reste réservée au badge du blason et aux accents du menu.
   Fonctionne quel que soit le thème puisque tout passe par --fond-carte et
   --texte, déjà garantis lisibles par les contrôles de contraste du site. */
.entete { position: sticky; inset-block-start: 0; z-index: 60; background: var(--fond-carte); border-block-end: var(--trait) solid var(--bordure); }
.entete__barre { display: flex; align-items: center; gap: var(--e3); min-block-size: 4rem; }

/* Le(s) lien(s) d'annonce (actualités et/ou consultations en cours) partagent
   la barre avec le blason et les actions : blason et actions se voient
   attribuer la même part de largeur (flex: 1 1 0 chacun) pour que le groupe
   d'annonces, entre les deux, tombe pile au centre de la barre quel que soit
   le contenu de part et d'autre. Deux liens possibles (actualités +
   consultations) : ils se répartissent dans ce groupe, avec un retour à la
   ligne si les deux tiennent mal sur une largeur donnée. Masqué sous 48em :
   pas la place pour ces textes à côté du blason et des trois actions sans
   risquer un débordement horizontal. */
.entete__annonces { display: none; }
@media (min-width: 48em) {
  .entete__annonces {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0 var(--e4); flex: 0 1 auto; min-inline-size: 0;
  }
}
.entete__actus {
  display: flex; align-items: center; gap: var(--e2);
  min-block-size: 44px; color: var(--lien);
  font-size: var(--t-petit); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.entete__actus:hover { text-decoration: underline; }
/* Quand la barre manque de largeur (vers 800 px), une annonce trop longue
   se coupe sur « … » au lieu de déborder sur le logo. */
.entete__actus { min-inline-size: 0; max-inline-size: 100%; }
.entete__actus-texte { overflow: hidden; text-overflow: ellipsis; }
.entete__actus .icone { flex-shrink: 0; }
/* Sous 48em, les annonces quittent la barre (masquées plus haut) pour leur
   propre bandeau, juste sous l'en-tête : hors de sa partie collante, il
   défile avec la page au lieu d'agrandir l'en-tête, qui ne doit jamais
   manger plus de 64 px de hauteur d'écran. Le texte y revient à la ligne
   plutôt que d'être coupé sur « … » : à 320 px, une annonce tronquée ne
   dirait plus rien. Remplacé par le groupe de la barre à partir de 48em. */
.annonces-telephone { background: var(--fond-carte); border-block-end: var(--trait) solid var(--bordure); }
.annonces-telephone__inner { display: flex; flex-wrap: wrap; gap: 0 var(--e4); }
.annonces-telephone .entete__actus { white-space: normal; }
@media (min-width: 48em) { .annonces-telephone { display: none; } }

.marque { display: flex; align-items: center; gap: var(--e2); text-decoration: none; color: var(--texte); flex: 1 1 0; padding-block: var(--e2); min-inline-size: 0; }
.marque__blason { flex: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--rayon-petit); background: var(--accent); color: var(--accent-texte); overflow: hidden; }
.marque__logo { inline-size: 100%; block-size: 100%; max-inline-size: none; }
.marque__texte { min-inline-size: 0; }
/* Sur un petit téléphone, le nom de la commune passe sur deux lignes
   (« Mairie de / Lecques ») plutôt que d'être coupé sur « … » : sans le
   sous-titre, masqué ici, deux lignes tiennent dans les 64 px que l'en-tête
   collant ne doit jamais dépasser. Taille fixée à 16 px, indépendante du
   texte courant : à 17 px, « Mairie de » ne tenait plus sur une ligne à
   320 px et le nom en prenait trois. */
.marque__nom { display: block; overflow: hidden; font-family: var(--police-titre); font-weight: 600; font-size: 1rem; line-height: 1.15; letter-spacing: var(--interlettrage-titre); }
.marque__sous { display: none; font-size: var(--t-mini); color: var(--texte-doux); }
.marque:hover .marque__nom { text-decoration: underline; }
@media (min-width: 30em) {
  .marque { gap: var(--e3); }
  .marque__nom { font-size: var(--t-grand); }
  .marque__sous { display: block; }
  /* Dès qu'il y a la place pour une ligne, on n'en prend qu'une. À partir
     de 48em le blason partage la barre à parts égales avec le lien
     "XX actualités…" et les actions (voir .entete__actus plus haut) : si
     le nom doit s'y réduire, un ellipsis plutôt qu'un retour à la ligne
     qui agrandirait toute la barre d'en-tête. */
  .marque__nom, .marque__sous { white-space: nowrap; text-overflow: ellipsis; }
  .marque__sous { overflow: hidden; }
}
/* Le logo et le nom gardent toujours leur place : c'est le groupe
   d'annonces qui passe sur deux lignes quand la barre manque de largeur.
   Sans ce plancher, vers 800 px, les deux annonces et les actions
   prenaient toute la barre et le logo disparaissait. */
@media (min-width: 48em) { .marque { min-inline-size: min-content; } }
/* Pastille agrandie sur grand écran seulement : en dessous, la barre
   partage déjà sa largeur entre logo, annonces et actions. */
@media (min-width: 64em) { .marque__blason { inline-size: 3rem; block-size: 3rem; } }

/* Sur téléphone, les actions ne prennent que la place de leurs boutons : le
   reste revient au nom de la commune. À partir de 48em, blason et actions
   se partagent la barre à parts égales pour que les annonces tombent au
   centre (voir .entete__annonces). */
.entete__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--e1); flex: none; }
@media (min-width: 48em) { .entete__actions { flex: 1 1 0; } }
.entete__recherche span, .entete__a11y span, .entete__menu span { display: none; }
.entete__recherche { text-decoration: none; }
/* Libellés « Rechercher » et « Menu » seulement quand le nom de la commune
   tient en entier à côté (vers 530 px avec les libellés) ; en dessous, les
   icônes seules, nommées pour les lecteurs d'écran. */
@media (min-width: 36em) { .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) : une puce de cette couleur
   distingue les 5 rubriques au premier coup d'œil, sans peser la barre d'un
   jeu d'icônes supplémentaire. --------------------------------------------- */
.menu { border-block-start: var(--trait) solid var(--bordure); background: var(--fond-alt); }
.menu__liste { display: grid; }
.menu__entree { display: flex; flex-wrap: wrap; align-items: center; border-block-end: var(--trait) solid var(--bordure); }
.menu__entree:last-child { border-block-end: 0; }
.menu__rubrique {
  display: flex; align-items: flex-start; gap: var(--e3); flex: 1 1 0; min-inline-size: 0;
  padding: var(--e3) 0; text-decoration: none; color: var(--texte);
  border-inline-start: 4px solid transparent;
}
.menu__puce { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--couleur-rubrique); flex: none; margin-block-start: .5em; }
.menu__texte { min-inline-size: 0; }
.menu__libelle { display: block; font-weight: 500; }
.menu__desc { display: block; font-size: var(--t-petit); color: var(--texte-doux); }
.menu__rubrique:hover { border-inline-start-color: var(--couleur-rubrique); background: var(--fond-carte); }
.menu__rubrique:hover .menu__libelle { color: var(--couleur-rubrique); }
.menu__rubrique[aria-current="page"] { border-inline-start-color: var(--couleur-rubrique); padding-inline-start: var(--e3); background: var(--fond-carte); }
.menu__rubrique[aria-current="page"] .menu__libelle { color: var(--couleur-rubrique); }

/* Sur mobile, le menu est replié — mais uniquement si JavaScript est actif.
   Ouvert, il défile dans son propre cadre entre l'en-tête collant (4rem) et
   la barre d'accès rapides (près de 4rem) : une fois les sous-rubriques
   dépliées, il dépasse la hauteur d'un téléphone, et la fin d'un en-tête
   collant plus haut que l'écran ne serait jamais atteignable. */
.js .menu { display: none; }
.js .menu.est-ouvert {
  display: block; overflow-y: auto; overscroll-behavior: contain;
  max-block-size: calc(100vh - 8rem);
  max-block-size: calc(100dvh - 8rem - env(safe-area-inset-bottom));
}

/* Sous-rubriques ----------------------------------------------------------
   Le bouton chevron (affiché seulement quand nav.js a pris la main, classe
   .menu--pilote) déplie les sous-rubriques de son entrée : en accordéon dans
   le menu du téléphone, en panneau déroulant sur ordinateur (plus bas). Les
   sous-rubriques sont masquées par défaut : sans script, elles restent
   atteignables par la page de chaque rubrique, qui les liste toutes. */
.menu__deplier {
  display: none; flex: none; align-items: center; justify-content: center;
  min-inline-size: var(--cible); min-block-size: var(--cible);
  border-radius: var(--rayon); color: var(--texte-doux);
}
.menu--pilote .menu__deplier { display: inline-flex; }
.menu__deplier:hover { background: var(--fond-carte); color: var(--texte); }
.menu__chevron { inline-size: 1.25rem; block-size: 1.25rem; transform: rotate(90deg); transition: transform var(--transition); }
.menu__deplier[aria-expanded="true"] .menu__chevron { transform: rotate(-90deg); }
.menu__sous { display: none; flex-basis: 100%; padding-block-end: var(--e3); padding-inline-start: calc(4px + .55rem + var(--e3)); }
.menu__entree.est-deplie > .menu__sous { display: block; }
.menu__sous a {
  display: flex; align-items: center; min-block-size: var(--cible);
  padding: var(--e1) var(--e3); color: var(--texte); text-decoration: none;
  border-inline-start: 3px solid var(--bordure);
}
.menu__sous a:hover { color: var(--lien); background: var(--fond-carte); border-inline-start-color: var(--couleur-rubrique); text-decoration: underline; }
/* Sous-rubrique précédée d'un trait (« miseEnAvant » dans navigation.json,
   par exemple « S'abonner aux actualités ») : elle et celles qui la suivent
   forment un groupe à part en bas de la liste. */
.menu__sous-avant { margin-block-start: var(--e2); padding-block-start: var(--e2); border-block-start: var(--trait) solid var(--bordure); }

@keyframes menu-deroule { from { opacity: 0; transform: translateY(-.25rem); } }

@media (min-width: 64em) {
  /* Bande de la couleur principale du thème (essai d'octobre 2026) : sur
     fond crème, la barre se confondait avec la page. Sans les pastilles de
     couleur, qui se perdaient sur ce fond. Texte, soulignement et contour
     de focus en --accent-texte sur --accent : la
     paire du bouton principal, déjà contrôlée AA dans les trois thèmes
     (tools/check.mjs). Le contour de focus habituel (--focus, terre cuite
     en Garrigue) ne se verrait pas sur ce fond. */
  .js .menu, .menu { display: block; background: var(--accent); border-block-start: 0; }
  /* Menu du téléphone resté ouvert avant un agrandissement de la fenêtre :
     son cadre de défilement rognerait les panneaux déroulants. */
  .js .menu.est-ouvert { max-block-size: none; overflow: visible; }
  /* Une seule ligne en temps normal ; en très grand texte, les entrées
     passent à la ligne plutôt que de faire défiler la page. */
  .menu__liste { display: flex; flex-wrap: wrap; gap: var(--e1); }
  /* L'entrée entière (lien et chevron) forme un seul onglet : fond éclairci
     au survol et pendant que son panneau est ouvert, soulignée sur la
     rubrique en cours. */
  .menu__entree { position: relative; flex-wrap: nowrap; align-items: stretch; }
  .menu__liste > .menu__entree { border-block-end: 3px solid transparent; }
  .menu__entree:hover, .menu__entree.est-deplie { background: color-mix(in srgb, var(--accent-texte) 14%, var(--accent)); }
  .menu__entree--active { background: color-mix(in srgb, var(--accent-texte) 16%, var(--accent)); }
  .menu__liste > .menu__entree--active { border-block-end-color: var(--accent-texte); }
  .menu__rubrique { flex: none; align-items: center; border-inline-start: 0; color: var(--accent-texte); padding: var(--e2) var(--e3); }
  .menu--pilote .menu__rubrique:not(:last-child) { padding-inline-end: 0; }
  .menu__rubrique:hover, .menu__rubrique[aria-current="page"] { background: none; }
  .menu__rubrique:hover .menu__libelle, .menu__rubrique[aria-current="page"] .menu__libelle { color: var(--accent-texte); }
  .menu__rubrique:focus-visible, .menu__deplier:focus-visible { outline-color: var(--accent-texte); outline-offset: -4px; }
  .menu__puce { display: none; }
  /* 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; }
  .menu__deplier { border-radius: 0; color: var(--accent-texte); }
  .menu__deplier:hover { background: none; color: var(--accent-texte); }

  /* Panneau déroulant, accroché sous son entrée. Il touche la barre : la
     souris passe de l'entrée au panneau sans le refermer (le panneau fait
     partie de l'entrée survolée). La dernière entrée l'aligne sur son bord
     droit ; nav.js corrige tout panneau qui sortirait de l'écran. */
  .menu__sous {
    position: absolute; inset-block-start: calc(100% + 3px); inset-inline-start: 0; z-index: 1;
    inline-size: max-content; min-inline-size: max(100%, 15rem); max-inline-size: 22rem;
    max-block-size: 70vh; overflow-y: auto;
    padding: var(--e2) 0; background: var(--fond-carte);
    border: var(--trait) solid var(--bordure); border-block-start: 3px solid var(--couleur-rubrique);
    border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: var(--ombre-forte);
    animation: menu-deroule var(--transition);
  }
  .menu__entree:last-child .menu__sous, .menu__sous.menu__sous--droite { inset-inline: auto 0; }
  .menu__entree .menu__sous.menu__sous--gauche { inset-inline: 0 auto; }
  /* Sans script : ouverture au survol et au focus clavier. */
  .menu:not(.menu--pilote) .menu__entree:hover > .menu__sous,
  .menu:not(.menu--pilote) .menu__entree:focus-within > .menu__sous { display: block; }
  .menu__sous a { padding: var(--e2) var(--e4); border-inline-start-color: transparent; }
  .menu__sous a:hover { background: var(--fond-alt); }
  /* Contour de focus à l'intérieur du lien : le panneau, qui peut défiler,
     rognerait un contour débordant sur ses côtés. */
  .menu__sous a:focus-visible { outline-offset: -3px; }
}

/* --- 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: 500; margin-block-end: var(--e2); }
.panneau-a11y__aide { font-size: var(--t-petit); color: var(--texte-doux); }
.panneau-a11y__fermer { justify-self: start; border: var(--trait) solid var(--bordure-forte); }
.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: 500;
}
.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, .panneau-a11y__fermer { 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: 500; }

/* --- Recherche --------------------------------------------------------- */
.recherche { position: relative; }
.recherche__label { display: block; font-weight: 500; margin-block-end: var(--e2); }
.recherche--grande .recherche__label { font-size: var(--t-grand); }
/* Pilule pleine largeur avec un bouton rond flottant, plutôt qu'un bouton
   texte accolé : le champ de saisie reste la cible principale. */
.recherche__boite {
  position: relative; display: flex; align-items: center;
  background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: var(--rayon-pilule);
  padding-inline-start: var(--e4);
}
.recherche__boite:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.recherche__champ {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--cible);
  padding: var(--e2) calc(var(--cible) + var(--e3)) 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 {
  position: absolute; inset-inline-end: .3rem; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: var(--cible); block-size: var(--cible); padding: 0; border-radius: 50%; flex: none;
}
.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: 500; }
.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: var(--cible); padding: var(--e1) var(--e3);
  font-size: var(--t-mini);
  background: var(--fond-carte); color: var(--texte-doux); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-pilule);
  font-weight: 500; 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(--fond-accentue); color: var(--texte); border-color: var(--accent); }

/* --- 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); }

/* --- Photo en taille réelle ---------------------------------------------
   Ouverte par src/scripts/photo.js à la place d'une navigation vers le
   fichier image seul (voir ce fichier : sans cette bascule, certains
   navigateurs mobiles affichent l'image sans aucun bouton retour). Le voile
   ET la photo ferment tous les deux la fenêtre au clic. */
.overlay--photo { display: grid; align-items: center; justify-items: center; padding: var(--e4); }
.overlay--photo .overlay__voile { background: rgb(0 0 0 / .85); }
.overlay--photo .overlay__photo {
  position: relative; max-inline-size: min(100%, 60rem); max-block-size: calc(100vh - 2 * var(--e4));
  object-fit: contain; border-radius: var(--rayon); cursor: zoom-out;
}
.overlay--photo .overlay__fermer {
  position: absolute; top: var(--e4); right: var(--e4); inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .5); color: #fff; cursor: pointer;
}
.overlay--photo .overlay__fermer svg { inline-size: 1.5rem; block-size: 1.5rem; }
.overlay--photo .overlay__fermer:focus-visible { outline: var(--e1) solid var(--focus); outline-offset: 2px; }

/* --- Cartes ------------------------------------------------------------ */
.carte {
  background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-grand);
  box-shadow: var(--ombre); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.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; }
/* Tronque avec des points de suspension plutôt que de laisser un texte trop
   long (résumé d'actualité collé de travers, par exemple) étirer la carte et
   écraser son image — le texte complet reste à un clic, sur la page de
   détail. */
.carte__resume {
  color: var(--texte-doux);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.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: 500; }
.carte__nom { font-weight: 600; }
.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-forte); }

/* Carte à liens multiples (ex. « Acteurs économiques ») : pas de lien
   étiré sur tout le bloc puisqu'aucun lien n'y est prioritaire — chaque
   entrée reste un lien normal, cliquable pour lui-même. Sur la carte
   Actualités, l'action secondaire (s'abonner) doit au contraire rester
   cliquable malgré le lien étiré du titre : d'où sa propre pile
   (position + z-index) pour passer devant le ::after du titre. */
.carte__titre .compteur { margin-inline-start: var(--e2); vertical-align: middle; }
.carte__action { position: relative; z-index: 1; }
.carte__liens { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.carte__lien { display: inline-flex; align-items: center; gap: var(--e2); min-block-size: var(--cible); font-weight: 600; color: var(--lien); text-decoration: none; }
.carte__lien:hover { color: var(--lien-survol); text-decoration: underline; }
.carte__lien .icone { flex-shrink: 0; }

.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)); }

/* Élus du conseil : portrait rond à gauche, nom et fonction à droite — une
   seule colonne sur téléphone, deux dès que la page est assez large. Le
   portrait est un carré de 240 px tiré du trombinoscope ; son alt est vide
   parce que le nom est écrit juste à côté. */
.grille-cartes--elus { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.carte--elu { flex-direction: row; align-items: center; gap: var(--e4); }
.carte__portrait {
  flex: none; inline-size: 5rem; block-size: 5rem; border-radius: 50%; object-fit: cover;
  background: var(--fond-alt); border: var(--trait) solid var(--bordure);
}

.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: 500;
}
.etiquette--epingle { background: var(--accent-doux); color: var(--accent-doux-texte); }

.compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.75rem; padding: .0625rem var(--e2); border-radius: var(--rayon-pilule);
  background: var(--accent); color: var(--accent-texte); font-size: var(--t-petit); font-weight: 600;
}

.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: 500; border: var(--trait) solid currentColor;
}
.lieu--mairie { color: var(--succes); }
.lieu--enligne { color: var(--info); }
.lieu--ailleurs { color: var(--attention); }
.lieu--ouverte { color: var(--succes); }
.lieu--fermee { color: var(--danger); }

/* --- Tuiles « Je veux… » ------------------------------------------------ */
/* minmax(0, 1fr) : une colonne 1fr ne descend pas sous son mot le plus long
   (« Encombrants »), et en très grand texte la grille élargissait la page à
   320 px. Le mot trop long se coupe alors dans sa tuile. */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 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-grand);
  box-shadow: var(--ombre);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tuile a:hover { border-color: var(--accent); background: var(--fond-accentue); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.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); transition: background var(--transition), color var(--transition); }
.tuile__titre { font-weight: 500; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.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--sirene .page-entete__intro { margin-block-end: 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); min-block-size: var(--cible); font-weight: 500; text-decoration: none; }
.lien-suite:hover { text-decoration: underline; }

.page-entete { margin-block-end: var(--e6); display: grid; gap: var(--e3); }
.page-entete h1 { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.page-entete__intro { font-size: var(--t-grand); color: var(--texte-doux); max-inline-size: 44rem; }
.page-entete .recherche { max-inline-size: 46rem; }

.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: var(--cible);
  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: 500;
}
.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: 500; }

/* --- 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); }
/* flex-wrap : l'étiquette « PDF, 1,7 Mo », insécable (voir .documents
   .poids), passe sous le libellé au lieu d'élargir la page. */
.liste-documents a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-weight: 500; }
.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; }

/* --- Carte des acteurs économiques ---------------------------------------
   Fond de plan (contour + voirie) et projection calculés à la main dans
   src/templates/views.mjs, à partir d'un relevé OpenStreetMap récupéré une
   fois pour toutes (content/carte-fond.json) : aucune tuile ni aucun appel
   réseau ici, conformément à la règle « zéro requête tierce ». Les points
   restent de petite taille (carte dense, ~70 établissements) : le cercle
   transparent qui les entoure agrandit un peu la zone cliquable, mais la
   liste ci-dessous — dont chaque lien atteint bien la cible tactile de
   44 px — reste le moyen d'accès de référence. */
.carte-lecques { margin-block: var(--e4); }
.carte-lecques svg {
  display: block; inline-size: 100%; block-size: auto;
  background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.carte-lecques__contour { fill: var(--fond-accentue); stroke: var(--bordure-forte); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.carte-lecques__routes {
  fill: none; stroke: var(--bordure-forte); stroke-width: 1; opacity: .6;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.carte-lecques__riviere {
  fill: none; stroke: var(--eau); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* Noms de voies : un halo (paint-order: stroke, de la couleur du fond de
   carte) plutôt qu'un encart plein, pour rester lisible sur le tracé des
   routes ou le contour vert sans alourdir la carte d'un aplat de plus. Le
   choix de savoir où poser ces étiquettes se fait déjà en amont, dans
   src/templates/views.mjs (etiquettesVoies) : uniquement là où aucun
   marqueur ni aucune autre étiquette n'est à proximité. */
.carte-lecques__etiquettes text {
  font-size: 10px; fill: var(--texte-doux); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--fond-carte); stroke-width: 3px; stroke-linejoin: round;
}
.carte-lecques__marqueurs a { cursor: pointer; }

/* --- Plan de zonage du PLU (views.mjs, planZonage) ----------------------
   Les couleurs de zone (--zone-u, --zone-au, --zone-a, --zone-n) suivent
   l'usage des PLU ; tools/check.mjs vérifie que le nom d'une zone reste
   lisible dessus, dans chaque thème. */
.plan-zonage { margin-block: var(--e5); display: grid; gap: var(--e4); }
.plan-zonage > :is(h2, h3), .plan-zonage p { margin: 0; }
/* La carte en pleine largeur, la légende dessous : à côté de la légende,
   la carte (haute et étroite) devenait trop petite pour être lue. */
.plan-zonage__duo { display: grid; gap: var(--e4); }
.plan-zonage__carte { margin: 0; display: grid; gap: var(--e2); }
.plan-zonage__carte figcaption { font-size: var(--t-petit); color: var(--texte-doux); }
.plan-zonage__carte svg {
  display: block; inline-size: 100%; block-size: auto;
  background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
}
.plan-zonage__zone { stroke: var(--fond-carte); stroke-width: 1; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.plan-zonage__zone:hover { stroke: var(--texte); stroke-width: 2.5; }
.plan-zonage__zone--u, .plan-zonage__puce--u { fill: var(--zone-u); background: var(--zone-u); }
.plan-zonage__zone--au, .plan-zonage__puce--au { fill: var(--zone-au); background: var(--zone-au); }
.plan-zonage__zone--a, .plan-zonage__puce--a { fill: var(--zone-a); background: var(--zone-a); }
.plan-zonage__zone--n, .plan-zonage__puce--n { fill: var(--zone-n); background: var(--zone-n); }
.plan-zonage__contour { fill: none; stroke: var(--bordure-forte); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Rien de ce qui est dessiné par-dessus les zones (routes, Vidourle,
   contour, mairie, noms) ne doit intercepter le survol : l'infobulle
   s'ouvre partout où l'on voit la couleur d'une zone. */
.plan-zonage svg :is(.carte-lecques__routes, .carte-lecques__riviere, .plan-zonage__contour, .carte-lecques__mairie-halo, .carte-lecques__mairie-point) { pointer-events: none; }
.plan-zonage__zone { cursor: help; }
.plan-zonage__zone.est-survolee { stroke: var(--texte); stroke-width: 2.5; }
/* Infobulle de zone (src/scripts/plan-zonage.js), placée près du pointeur. */
.infobulle-zone {
  position: fixed; z-index: 50; max-inline-size: min(20rem, calc(100vw - 2rem));
  padding: var(--e2) var(--e3); border-radius: var(--rayon-petit);
  background: var(--fond-inverse); color: var(--texte-inverse); box-shadow: var(--ombre-forte);
  font-size: var(--t-petit); line-height: 1.4; pointer-events: none;
}
.infobulle-zone[hidden] { display: none; }
.infobulle-zone strong { display: block; font-size: 1rem; }
/* Taille des noms de zone : attribut font-size posé par views.mjs, propre à
   chaque carte (le repère du village est plus serré). */
.plan-zonage__etiquettes text { font-weight: 700; fill: var(--texte); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.plan-zonage__legende { display: grid; gap: var(--e4); }
.plan-zonage__legende :is(h3, h4) { font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); margin: 0 0 var(--e2); }
.plan-zonage__legende dl { margin: 0; display: grid; gap: var(--e2); }
.plan-zonage__legende dl > div { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--e2); align-items: baseline; }
.plan-zonage__legende dt { font-weight: 700; display: inline-flex; align-items: center; gap: var(--e2); }
.plan-zonage__legende dd { margin: 0; }
.plan-zonage__puce { inline-size: 1rem; block-size: 1rem; border-radius: var(--rayon-petit); border: 1px solid var(--bordure-forte); flex-shrink: 0; }
.carte-lecques__point { fill: var(--lien); stroke: var(--fond-carte); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.carte-lecques__point--association { fill: var(--accent); }
.carte-lecques__marqueurs a:hover .carte-lecques__point,
.carte-lecques__marqueurs a:focus-visible .carte-lecques__point { stroke: var(--focus); stroke-width: 3; }
.carte-lecques__marqueurs a:focus-visible { outline: none; }
.carte-lecques__mairie-halo { fill: var(--accent-doux); }
.carte-lecques__mairie-point { fill: var(--texte); stroke: var(--fond-carte); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.carte-lecques__legende { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-block-start: var(--e3); font-size: var(--t-petit); color: var(--texte-doux); }
.carte-lecques__legende span { display: inline-flex; align-items: center; gap: var(--e1); }
.carte-lecques__puce { inline-size: .7rem; block-size: .7rem; border-radius: 50%; flex-shrink: 0; }
.carte-lecques__puce--commerce { background: var(--lien); }
.carte-lecques__puce--association { background: var(--accent); }
.carte-lecques__puce--mairie { background: var(--texte); }
.carte-lecques__trait { inline-size: .85rem; block-size: 2px; background: var(--eau); flex-shrink: 0; }

/* --- Carte « Autour de Lecques » (page Tourisme, views.mjs carteTourisme) --
   Fond SVG dessiné au build ; repères HTML posés par-dessus, en % du plan,
   pour garder leur taille réelle (28 px, zone sensible de 44 px) quelle que
   soit l'échelle. Le plan ne descend pas sous 36 rem : plus petit, les
   repères voisins se chevaucheraient. Sur un écran étroit, il défile donc
   dans son cadre, jamais la page. Les min-inline-size: 0 empêchent cette
   largeur minimale de remonter jusqu'à la grille de .prose. */
.carte-tourisme, .carte-tourisme__figure, .carte-tourisme__cadre { min-inline-size: 0; }
.carte-tourisme { display: grid; gap: var(--e4); }
.carte-tourisme__figure { margin: 0; position: relative; display: grid; gap: var(--e2); }
.carte-tourisme__figure figcaption { display: grid; gap: var(--e2); }
.carte-tourisme__figure figcaption p { margin: 0; }
.carte-tourisme__cadre {
  overflow-x: auto; position: relative;
  background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
}
.carte-tourisme__plan { position: relative; min-inline-size: 36rem; }
.carte-tourisme__plan svg { display: block; inline-size: 100%; block-size: auto; }
.carte-tourisme__limite { fill: none; stroke: var(--bordure-forte); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.carte-tourisme__rivieres {
  fill: none; stroke: var(--eau); stroke-width: 1; opacity: .7;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.carte-tourisme__routes {
  fill: none; stroke: var(--bordure-forte); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.carte-tourisme__routes--locale { stroke-width: .8; opacity: .55; }
.carte-tourisme__routes--autoroute { stroke: var(--texte-doux); stroke-width: 2.4; }
.carte-tourisme__trace {
  fill: none; stroke: var(--succes); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.carte-tourisme__renvois { fill: var(--texte-doux); stroke: var(--texte-doux); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Noms de villages : même halo que les noms de rues (.carte-lecques__etiquettes). */
.carte-tourisme__noms { fill: var(--texte-doux); font-size: 12px; }
.carte-tourisme__noms text { paint-order: stroke; stroke: var(--fond-carte); stroke-width: 3px; stroke-linejoin: round; }
.carte-tourisme__lecques { font-size: 14px; font-weight: 700; fill: var(--texte); }
.carte-tourisme__echelle path { fill: none; stroke: var(--texte); stroke-width: 1.5; }
.carte-tourisme__echelle text { font-size: 11px; fill: var(--texte); paint-order: stroke; stroke: var(--fond-carte); stroke-width: 3px; }

.prose .carte-tourisme__reperes { display: block; padding: 0; }
.carte-tourisme__reperes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.prose .carte-tourisme__reperes > li { list-style: none; }
.carte-tourisme__reperes > li { position: absolute; inline-size: 0; block-size: 0; }
/* Rond pour un site, carré pour une randonnée : le type se lit sans la couleur. */
.carte-tourisme__repere, .tourisme-site__numero {
  display: grid; place-items: center; flex-shrink: 0;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-texte); border: 2px solid var(--fond-carte);
  font-size: var(--t-mini); font-weight: 700; line-height: 1; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.carte-tourisme__repere--rando, .tourisme-site--rando .tourisme-site__numero {
  border-radius: var(--rayon-petit); background: var(--fond-carte); color: var(--succes); border: 3px solid var(--succes);
}
.carte-tourisme__repere {
  position: absolute; inset-block-start: -.875rem; inset-inline-start: -.875rem;
  pointer-events: auto; box-shadow: var(--ombre-forte); transition: transform var(--transition);
}
.carte-tourisme__repere::before { content: ""; position: absolute; inset: -.5rem; }
.carte-tourisme__repere:hover, .carte-tourisme__repere[aria-expanded="true"] { transform: scale(1.15); z-index: 1; }
.carte-tourisme__repere:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .carte-tourisme__repere { transition: none; } }

.carte-tourisme__glisser { font-size: var(--t-petit); color: var(--texte-doux); }
@media (min-width: 40em) { .carte-tourisme__glisser { display: none; } }
.carte-tourisme__puce { inline-size: .8rem; block-size: .8rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.carte-tourisme__puce--rando { border-radius: 2px; background: var(--fond-carte); border: 2px solid var(--succes); }
.carte-tourisme__trait--trace { block-size: 3px; background: var(--succes); }
.carte-tourisme__trait--limite { block-size: 0; background: none; border-block-start: 2px dashed var(--bordure-forte); }

/* Infobulle d'un repère (src/scripts/carte-tourisme.js), placée sous le
   repère ou au-dessus, sa pointe (--fleche) tournée vers lui. */
.infobulle-tourisme {
  position: absolute; z-index: 20; inline-size: min(19rem, calc(100% - 1rem));
  display: grid; gap: var(--e2); padding: var(--e3) var(--e4);
  background: var(--fond-carte); color: var(--texte);
  border: 2px solid var(--bordure-forte); border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  font-size: var(--t-petit); line-height: 1.45;
  scroll-margin-block: 9rem 4.5rem; /* entre l'en-tête collant (.entete) et la barre mobile */
}
.infobulle-tourisme[hidden] { display: none; }
.infobulle-tourisme::before {
  content: ""; position: absolute; left: calc(var(--fleche, 50%) - 7px); top: -8px;
  inline-size: 12px; block-size: 12px; background: var(--fond-carte);
  border-left: 2px solid var(--bordure-forte); border-top: 2px solid var(--bordure-forte); transform: rotate(45deg);
}
.infobulle-tourisme--dessus::before { top: auto; bottom: -8px; border: 0; border-right: 2px solid var(--bordure-forte); border-bottom: 2px solid var(--bordure-forte); }
.infobulle-tourisme:focus { outline: none; }
.infobulle-tourisme:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.infobulle-tourisme .tourisme-site__corps { gap: var(--e2); }
.infobulle-tourisme__titre { font-weight: 700; font-size: 1rem; padding-inline-end: 2rem; }
.infobulle-tourisme__fermer {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  display: grid; place-items: center; inline-size: var(--cible); block-size: var(--cible);
  background: none; border: 0; border-radius: var(--rayon); color: var(--texte); cursor: pointer;
}

/* Liste des sites sous la carte : la référence, avec ou sans JavaScript. */
.prose .tourisme-sites { gap: var(--e5); padding: 0; }
.prose .tourisme-sites > li { list-style: none; }
.tourisme-site { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--e3); align-items: start; }
.tourisme-site:target { outline: 2px solid var(--accent); outline-offset: var(--e2); border-radius: var(--rayon-petit); }
.tourisme-site__corps { display: grid; gap: var(--e1); }
.tourisme-site__corps p { margin: 0; }
.tourisme-site__nom { font-size: var(--t-grand); margin: 0; }
.tourisme-site__infos { font-size: var(--t-petit); color: var(--texte-doux); }
.tourisme-site__lien a { display: inline-flex; align-items: center; gap: var(--e1); min-block-size: var(--cible); }

/* --- Liste dense (annuaire Sirene, page Professionnels) -----------------
   Une colonne, deux lignes maxi par entrée (nom sur la première, activité/
   adresse/date sur la seconde, chacune tronquée avec des points de
   suspension plutôt que de déborder) — délibérément plus compacte et plus
   sobre que les cartes de l'annuaire manuel au-dessus, pour marquer que la
   source est différente (générée automatiquement, pas relue à la main). */
.liste-entreprises { margin-block-start: var(--e4); border-block-start: var(--trait) solid var(--bordure); }
.ligne-entreprise { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) 0; border-block-end: var(--trait) solid var(--bordure); }
.ligne-entreprise .icone { flex-shrink: 0; margin-block-start: .2em; color: var(--texte-tres-doux); }
/* grid-template-columns: minmax(0, 1fr) — sans lui, la colonne implicite
   "auto" d'une grille se dimensionne sur le contenu maximal (le texte non
   coupé) quel que soit l'overflow:hidden posé sur les enfants ; c'est ce
   qui poussait la page en débordement horizontal malgré leur ellipsis. */
.ligne-entreprise__corps { min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* min-inline-size: 0 est indispensable ici : sans lui, cet élément (enfant
   d'une grille elle-même enfant d'une ligne flex) refuse de rétrécir sous
   la largeur de son contenu non coupé — l'ellipsis ne s'active jamais et
   la ligne entière pousse la page en débordement horizontal.
   position: relative fait de ce cadre la référence de la mention cachée
   « (nouvelle fenêtre) » (.sr-only, positionnée en absolu) : sinon elle
   échappe à la coupe et élargit la page à 320 px. */
.ligne-entreprise__nom { position: relative; display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ligne-entreprise__enseigne { font-weight: 400; color: var(--texte-doux); }
.ligne-entreprise__meta { display: block; font-size: var(--t-petit); color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Filtre par section NAF (annuaire Sirene) -----------------------------
   Pastilles-liens : sans JavaScript elles mènent au groupe de leur section,
   avec src/scripts/filtre-naf.js elles filtrent la liste ; la section
   affichée porte aria-current. */
.filtre-naf { margin-block: var(--e5) var(--e2); }
.filtre-naf__titre { font-weight: 600; margin-block-end: var(--e2); }
.filtre-naf__liste { display: flex; flex-wrap: wrap; gap: var(--e2); }
.filtre-naf__liste a {
  display: inline-flex; align-items: center; gap: var(--e2); min-block-size: var(--cible); padding: var(--e1) var(--e3);
  font-size: var(--t-petit); font-weight: 500; line-height: 1.3; text-decoration: none;
  background: var(--fond-carte); color: var(--texte); border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon-pilule);
}
.filtre-naf__liste a:hover { background: var(--fond-accentue); border-color: var(--accent); }
.filtre-naf__liste a[aria-current="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.filtre-naf__lettre { font-weight: 700; }
.filtre-naf__nombre { font-size: var(--t-mini); font-variant-numeric: tabular-nums; opacity: .85; }
.filtre-naf__statut { margin-block-start: var(--e2); font-size: var(--t-petit); color: var(--texte-doux); }
.filtre-naf__statut:empty { display: none; }
.groupe-naf { margin-block-start: var(--e5); scroll-margin-block-start: var(--e4); }
.groupe-naf__nombre { font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.groupe-naf .liste-entreprises { margin-block-start: var(--e2); }

/* --- 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 h2 { 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 h2, .pied__horaires-bloc h2 { 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: 500; }
/* « 10h – 12h et 14h – 17h » : la ligne se coupe avant « et », jamais dans un
   créneau (src/horaires.mjs, creneauxSansCoupure). */
.horaire-creneau { white-space: nowrap; }

/* 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; }
/* Même aspect que les titres du pied, sans en être un (voir piedDePage). */
.pied__rubrique {
  font-family: var(--police-titre); font-weight: var(--graisse-titre); line-height: var(--hauteur-ligne-titre);
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte); font-size: var(--t-petit);
}
.pied__colonne summary:hover .pied__rubrique { 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: 500; 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. Positionné, pour que les textes .sr-only
   (en position absolue, ex. « (nouvelle fenêtre) » des liens externes) se
   placent dans le cadre et y soient rognés, au lieu d'élargir la page. */
.tableau-defilant { overflow-x: auto; position: relative; }
.tableau-defilant:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Pas de hauteur limitée avec défilement vertical (ancienne variante
   « ascenseur », retirée en octobre 2026) : sur les tableaux des séances,
   seules trois lignes sur cinq à sept se voyaient, et des PV pourtant
   publiés semblaient manquer. Les ancres d'année servent de raccourcis. */
.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: 600; }
.tableau tfoot th, .tableau tfoot td { font-weight: 600; }
.tableau td:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }
/* Le tableau des conseils municipaux a un lien (icône + texte) en deuxième
   colonne, pas un nombre : on annule l'alignement à droite hérité ci-dessus. */
.tableau--conseils td:not(:first-child) { text-align: start; font-variant-numeric: normal; }
/* Bibliothèque documentaire : plusieurs thèmes possibles par document, qui
   passent à la ligne sans se coller. */
.tableau--bibliotheque .etiquette { margin-block: .125rem; }

/* --- Prose (pages Markdown) ---------------------------------------------- */
.prose { display: grid; gap: var(--e4); max-inline-size: 42rem; }
/* Une adresse web ou électronique ne forme qu'un seul mot : sur un écran
   étroit, ou en très grand texte, elle élargissait la page au lieu de
   passer à la ligne (« multisportsloisirsLEK@yahoo.com »). */
.prose > p, .prose a, .carte a, .contact-liste a, .pratique__contacts a { overflow-wrap: anywhere; }
.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. Seules l'image et sa teinte sont arrondies (même
   hauteur, même rayon) : la légende, dessous, reste hors du cadre, sans quoi
   le coin arrondi rognait sa première lettre et la teinte la recouvrait. */
.banniere-page { position: relative; margin-block-end: var(--e5); }
.banniere-page img {
  display: block; inline-size: 100%; block-size: clamp(9.5rem, 24vw, 16rem); object-fit: cover;
  border-radius: var(--rayon-grand);
  filter: saturate(.55) contrast(.94) brightness(1.04);
}
.banniere-page::after {
  content: ""; position: absolute; inset: 0 0 auto; block-size: clamp(9.5rem, 24vw, 16rem);
  border-radius: var(--rayon-grand); 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); }
/* « PDF, 10,6 Mo » d'un seul tenant : sur un écran étroit, c'est le libellé
   qui passe à la ligne, jamais l'étiquette coupée en deux cadres. */
.documents .poids {
  font-size: var(--t-mini); font-weight: 500; color: var(--texte-doux); white-space: nowrap;
  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; }

/* --- Prochains passages (page Transports) --------------------------------
   Rendu sans JavaScript comme un horaire théorique normal (voir
   src/templates/views.mjs, widgetTransportLio) ; src/scripts/transport-lio.js
   vient seulement remplir .transport-lio__statut, vide au départ. */
.transport-lio { margin-block-start: var(--e5); padding: var(--e4); background: var(--fond-alt); border-radius: var(--rayon); }
.transport-lio h2 { font-size: var(--t-h3); margin-block: 0 var(--e3); }
.transport-lio__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
/* Le widget est inséré dans .prose : on annule le retrait et les puces
   de .prose ul, comme pour .direct__stations et .liste-dae. */
.prose .transport-lio__liste { padding: 0; }
.prose .transport-lio__liste > li { list-style: none; }
.transport-lio__depart {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3); align-items: baseline;
  padding: var(--e3); background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-petit);
}
.transport-lio__heure { font-weight: 700; font-size: var(--t-grand); grid-row: 1 / 3; align-self: center; }
.transport-lio__direction { font-weight: 500; }
.transport-lio__jours { grid-column: 2; font-size: var(--t-mini); color: var(--texte-doux); }
.transport-lio__statut { grid-column: 2; font-size: var(--t-petit); font-weight: 600; }
.transport-lio__statut:empty { display: none; }
.transport-lio__statut--aheure { color: var(--succes); }
.transport-lio__statut--retard { color: var(--attention); }
.transport-lio__statut--supprime { color: var(--danger); }
.transport-lio__statut--absent { color: var(--texte-tres-doux); font-weight: 400; }
.transport-lio__arrets { grid-column: 1 / -1; margin-block-start: var(--e2); }
.transport-lio__arrets summary {
  display: flex; align-items: center; gap: var(--e1); cursor: pointer;
  font-size: var(--t-mini); color: var(--texte-doux); list-style: none; min-height: 44px;
}
.transport-lio__arrets summary::-webkit-details-marker { display: none; }
.transport-lio__arrets summary:hover { color: var(--lien); }
.transport-lio__chevron { color: var(--texte-doux); transition: transform var(--transition); flex-shrink: 0; }
.transport-lio__arrets[open] .transport-lio__chevron { transform: rotate(90deg); }
.transport-lio__arrets ol { margin: var(--e2) 0 0; padding-inline-start: 1.25em; font-size: var(--t-mini); color: var(--texte-doux); display: grid; gap: var(--e1); }
.transport-lio__note { margin-block-start: var(--e3); font-size: var(--t-mini); color: var(--texte-doux); }
@media (min-width: 30em) {
  .transport-lio__depart { grid-template-columns: 5rem 1fr auto; }
  .transport-lio__heure { grid-row: 1; }
  .transport-lio__jours { grid-column: 2; grid-row: 2; }
  .transport-lio__statut { grid-column: 3; grid-row: 1 / 3; align-self: center; text-align: end; }
}

/* --- Données en direct : Vidourle et restrictions d'eau -----------------------
   Rendu sans JavaScript : des liens vers les sources officielles (Vigicrues,
   VigiEau). src/scripts/vidourle.js et restrictions-eau.js remplissent
   ensuite les mesures du jour (voir worker/donnees-publiques.mjs). Fond de
   carte partout : les couleurs d'état (--succes, --danger…) n'y sont
   vérifiées qu'à cet endroit par tools/check.mjs. */
.direct {
  margin-block: var(--e5); padding: var(--e4); background: var(--fond-carte);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon); display: grid; gap: var(--e3);
}
/* "display: grid" l'emporterait sur l'attribut hidden : un encart qui ne sert
   qu'avec JavaScript (risques à une adresse) resterait visible sans lui. */
.direct[hidden] { display: none; }
.direct h3 { font-size: var(--t-h3); margin: 0; }
.direct__note { font-size: var(--t-mini); color: var(--texte-doux); margin: 0; }
.direct__stations { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.prose .direct__stations { padding: 0; }
.prose .direct__stations li { list-style: none; }
@media (min-width: 40em) { .direct__stations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.station {
  padding: var(--e3) var(--e4); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-petit);
  display: grid; gap: var(--e1); align-content: start; min-inline-size: 0;
}
.station__nom { font-size: var(--t-grand); margin: 0; }
.station p { margin: 0; }
.station__position, .station__resume, .station__reperes { font-size: var(--t-mini); color: var(--texte-doux); }
.station__mesure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); margin-block: var(--e1); }
.station__hauteur { font-size: var(--t-h2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.station__tendance { font-size: var(--t-petit); font-weight: 600; }
.station__tendance--stable { color: var(--succes); }
.station__tendance--hausse { color: var(--danger); }
.station__tendance--baisse { color: var(--info); }
.station__heure { inline-size: 100%; font-size: var(--t-mini); color: var(--texte-doux); }
.station__courbe[hidden] { display: none; }
.station__svg { display: block; inline-size: 100%; block-size: 4rem; }
.station__ligne { fill: none; stroke: var(--eau); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.secheresse { display: grid; gap: var(--e3); }
/* Qualité de l'eau du robinet (src/scripts/qualite-eau.js). */
.qualite-eau { display: grid; gap: var(--e2); }
.qualite-eau p, .qualite-eau ul { margin: 0; }
.qualite-eau__verdict { font-weight: 600; }
.qualite-eau__verdict--conforme { color: var(--succes); }
.qualite-eau__verdict--alerte { color: var(--danger); }
.qualite-eau__mesures { padding-inline-start: var(--e4); }
/* « Ma maison face aux risques » (src/scripts/risques-adresse.js). */
.adresse-risques { display: grid; gap: var(--e2); max-inline-size: 32rem; }
.adresse-risques label { font-weight: 500; }
.adresse-risques input {
  inline-size: 100%; padding: var(--e3); font: inherit; color: var(--texte); background: var(--fond);
  border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon-petit); min-block-size: var(--cible);
}
.adresse-risques .bouton { justify-self: start; }
.resultat-risques { display: grid; gap: var(--e3); }
.resultat-risques:empty { display: none; }
.resultat-risques p, .resultat-risques ul { margin: 0; }
.resultat-risques ul { padding-inline-start: var(--e4); display: grid; gap: var(--e2); }
.resultat-risques__alerte { color: var(--danger); font-weight: 600; }
.resultat-risques__ok { color: var(--succes); font-weight: 600; }
.secheresse p { margin: 0; }
.secheresse__aucune { color: var(--succes); font-weight: 600; }
.secheresse__niveau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); font-weight: 500; }
.secheresse__badge {
  display: inline-block; padding: var(--e1) var(--e3); border-radius: var(--rayon-pilule);
  font-weight: 700; background: var(--attention-fond); color: var(--attention);
}
.secheresse__niveau--alerte_renforcee .secheresse__badge,
.secheresse__niveau--crise .secheresse__badge { background: var(--danger-fond); color: var(--danger); }
.secheresse__arrete { font-size: var(--t-petit); }
.secheresse__theme { font-size: var(--t-corps); margin: var(--e2) 0 0; }
.secheresse__usages { display: grid; gap: var(--e2); margin: 0; padding-inline-start: var(--e5); font-size: var(--t-petit); }
.secheresse__description { white-space: pre-line; }

/* --- Défibrillateurs ------------------------------------------------------- */
.liste-dae { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.prose .liste-dae { padding: 0; }
.prose .liste-dae li { list-style: none; }
.dae {
  padding: var(--e3) var(--e4); background: var(--fond-carte); border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-petit); display: grid; gap: var(--e1);
}
.dae--lecques { border: 2px solid var(--danger); }
.dae p { margin: 0; }
.dae__distance { font-size: var(--t-petit); color: var(--texte-doux); white-space: nowrap; }
.dae__acces, .dae__carte { font-size: var(--t-petit); color: var(--texte-doux); }
.note-source { font-size: var(--t-mini); color: var(--texte-doux); }

/* --- Comptes de la commune (page Budgets) --------------------------------- */
.comptes { display: grid; gap: var(--e5); margin-block: var(--e4); }
@media (min-width: 48em) { .comptes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comptes__bloc { display: grid; gap: var(--e3); align-content: start; }
.comptes__bloc h3 { font-size: var(--t-h3); margin: 0; }
.comptes__titre { font-size: var(--t-h3); margin-block: var(--e5) var(--e3); }
.repartition { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.repartition li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e1) var(--e3); align-items: baseline; }
.repartition__libelle { font-size: var(--t-petit); }
.repartition__part { font-weight: 700; font-variant-numeric: tabular-nums; }
.repartition__piste { grid-column: 1 / -1; display: block; block-size: .5rem; background: var(--fond-alt); border-radius: var(--rayon-pilule); overflow: hidden; }
.repartition__valeur { display: block; block-size: 100%; background: var(--accent); border-radius: var(--rayon-pilule); }
.comptes__historique { margin-block-start: var(--e4); }
.comptes__historique summary { cursor: pointer; font-weight: 500; min-block-size: var(--cible); display: flex; align-items: center; color: var(--lien); }

/* --- Calendriers, fiche pratique ------------------------------------------ */
.calendriers { display: grid; gap: var(--e5); margin-block-end: var(--e5); }
.carte--calendrier { padding: var(--e5); gap: var(--e3); }
.carte--calendrier h2 { font-size: var(--t-h3); }
.carte--calendrier p { margin: 0; }
.liste-rdv { display: grid; gap: var(--e2); margin: 0; padding-inline-start: var(--e5); }
.liste-rdv li { list-style: disc; }
.liste-rdv li::marker { color: var(--accent); }
.calendrier__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.adresse-agenda { overflow-wrap: anywhere; font-size: .95em; background: var(--fond-alt); padding: .1em .35em; border-radius: var(--rayon-petit); }
.article__agenda { margin-block-start: var(--e4); }

.fiche-pratique { display: grid; gap: var(--e4); margin-block-end: var(--e4); }
@media (min-width: 40em) { .fiche-pratique { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiche-pratique__bloc {
  padding: var(--e4); background: var(--fond-carte); border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon); display: grid; gap: var(--e2); align-content: start; min-inline-size: 0;
}
.fiche-pratique__bloc h2 { font-size: var(--t-h3); }
.fiche-pratique__bloc p { margin: 0; }
.fiche-pratique__bloc--urgence { border-color: var(--danger); }
.fiche-pratique__horaires { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e1); font-size: var(--t-petit); }
.fiche-pratique__horaires li { display: flex; justify-content: space-between; gap: var(--e3); }
.fiche-pratique__liste { display: grid; gap: var(--e2); margin: 0; padding-inline-start: var(--e5); font-size: var(--t-petit); }
.fiche-pratique__liste li { list-style: disc; }

/* --- Abonnement : choix des thèmes ---------------------------------------- */
.champ-themes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e2); min-inline-size: 0; }
.champ-themes legend { font-weight: 500; padding: 0; margin-block-end: var(--e1); }
.champ-themes__facultatif { font-weight: 400; color: var(--texte-doux); }
.champ-themes__aide { font-size: var(--t-petit); color: var(--texte-doux); margin: 0; }
.cases { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--e3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.cases li { display: flex; align-items: center; gap: var(--e2); min-block-size: var(--cible); }
.cases input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.cases label { cursor: pointer; }

/* ===== 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); } }
/* Vigilance météo orange ou rouge (views.mjs, bandeauVigilanceMeteo) : le
   bandeau prend alors la place du héros contre l'en-tête, et le héros se
   pose dessous au lieu de le recouvrir. */
.principal > .alerte:first-child { margin-block-start: calc(-1 * var(--e5)); }
.alerte:not([hidden]) + script + .heros { margin-block-start: 0; }
.heros__titre { max-inline-size: 20ch; font-size: clamp(1.5625rem, 1.08rem + 2.16vw, 2.375rem); }
.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: 600; margin-block-end: var(--e2); }

/* Statut du secrétariat remonté dans le héros : même mécanique que
   .pratique__statut (horaires.js cible tout élément [data-statut-mairie]).
   Texte et lien forment un seul bloc à côté du point, pour que le point reste
   en tête de la première ligne quand le texte se replie. Encadré à rayon
   normal sur téléphone, où le texte tient souvent sur deux lignes ; pilule
   seulement quand il y a la place de tenir sur une seule. */
.pratique__statut.heros__statut {
  display: inline-flex; background: var(--fond-carte);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
  padding: var(--e2) var(--e4); font-size: var(--t-petit); margin-block: 0 var(--e4);
}
@media (min-width: 48em) { .pratique__statut.heros__statut { border-radius: var(--rayon-pilule); } }
.heros__statut a { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; margin-inline-start: var(--e1); }

.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); }
/* Point calé sur la première ligne du texte (1lh = hauteur de ligne, qui
   varie avec l'interlignage choisi) plutôt que centré sur tout le bloc. */
.pratique__statut { display: flex; align-items: flex-start; gap: var(--e2); margin-block: var(--e3); font-weight: 500; }
.pastille {
  inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: var(--texte-tres-doux); flex: none;
  margin-block-start: .4em; margin-block-start: calc((1lh - .75rem) / 2);
}
[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 > span:last-child { text-align: end; }
.pratique__horaires li[data-aujourdhui] { font-weight: 600; 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); }

/* Une seule carte pour les horaires, les coordonnées et l'aide du secrétariat
   — trois colonnes séparées par un trait, une seule sous 56em. */
.carte--pratique { padding: 0; }
.pratique-grille { display: grid; }
@media (min-width: 56em) { .pratique-grille { grid-template-columns: repeat(3, 1fr); } }
.pratique-colonne { padding: var(--e5); border-block-end: var(--trait) solid var(--bordure); }
.pratique-colonne:last-child { border-block-end: 0; }
@media (min-width: 56em) {
  .pratique-colonne { border-block-end: 0; border-inline-end: var(--trait) solid var(--bordure); }
  .pratique-colonne:last-child { border-inline-end: 0; }
}
.pratique-colonne h3 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-corps); margin-block-end: var(--e3); }
.pratique-colonne h3 .icone { color: var(--accent); }
.pratique__contacts { display: grid; gap: var(--e3); margin-block: var(--e3); }
.pratique__contacts li { display: flex; gap: var(--e3); align-items: center; }
/* Téléphone et courriel : une ligne de texte ne fait que 27 px, la cible
   tactile en demande 44. */
.pratique__contacts a { display: inline-flex; align-items: center; min-block-size: var(--cible); }
.pratique__contacts .icone { color: var(--accent); flex: none; }
.pratique__boutons { display: flex; flex-wrap: wrap; gap: var(--e3); margin-block-start: var(--e4); }

.liste-actus { display: grid; gap: var(--e4); }

/* --- 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; }

/* --- Page « Actualités » : une à la une + grille -------------------------
   Les actualités épinglées ressortent en grand format (image et texte côte
   à côte à partir de 40em), les autres se rangent dans une grille de cartes
   qui se densifie avec la largeur d'écran, plutôt qu'une simple liste. */
.liste-actus--une { gap: var(--e5); margin-block-end: var(--e5); }
.carte--actu-une { border-color: var(--accent); }
.carte--actu-une .carte__titre { font-size: var(--t-h2); }
@media (min-width: 40em) {
  .carte--actu-une:has(.carte__image) { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e5); align-items: center; }
  .carte--actu-une .carte__image { aspect-ratio: 4 / 3; margin-block-end: 0; }
  .carte--actu-une .carte__resume { -webkit-line-clamp: 5; line-clamp: 5; }
}
.grille-actus { display: grid; gap: var(--e4); }
@media (min-width: 40em) { .grille-actus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grille-actus { grid-template-columns: repeat(3, 1fr); } }
/* .article__corps enveloppe l'image et le texte : le clearfix (::after)
   empêche l'image flottante (voir plus bas, à partir de 40em) de déborder
   sur les blocs suivants ("Pour aller plus loin", lien de retour) quand le
   texte est plus court que l'image. */
.article__corps::after { content: ""; display: table; clear: both; }
.article__image { margin: 0 0 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); }
/* Auteur et licence d'une photo reprise d'ailleurs (Wikimedia Commons…),
   obligatoires pour la plupart des licences libres (champ image.credit,
   lien image.source vers la page d'origine). */
.article__credit { display: block; color: var(--texte-doux); }
/* Le chapeau vit ici (dans .article__corps, pas dans l'en-tête) précisément
   pour qu'il s'enroule lui aussi autour de l'image comme le corps — sinon un
   chapeau long (résumé saisi trop généreusement) resterait affiché en pleine
   largeur au-dessus de l'image, sans profiter de l'habillage ci-dessous. */
.article__corps .page-entete__intro { margin-block-end: var(--e4); }
/* Au-delà de 40em, l'image se cale en haut à gauche et le texte l'enveloppe
   plutôt que de s'empiler dessous — utile pour un texte long. En dessous,
   l'image reste en pleine largeur au-dessus du texte (mobile d'abord) : un
   texte flotté trop tôt réduirait la colonne de lecture à presque rien. */
@media (min-width: 40em) {
  .article__corps:has(.article__image) .article__image {
    float: inline-start;
    inline-size: min(45%, 18rem);
    margin: 0 var(--e5) var(--e4) 0;
  }
  .article__corps:has(.article__image) .article__image img { aspect-ratio: 4 / 3; }
  .article__corps:has(.article__image) .prose { display: block; }
  .article__corps:has(.article__image) .prose p + p { margin-block-start: var(--e4); }
}

.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: 500; 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: 600; 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: 600; margin-block-end: var(--e1); }
.paire dd { margin: 0; color: var(--texte-doux); }

.retour { margin-block-start: var(--e6); }
/* Flèche du lien de retour : la même icône, tournée vers la gauche. */
.icone--retour { transform: scaleX(-1); }

/* --- Bibliothèque documentaire : page d'un document ----------------------
   Le document s'affiche dans le site (voir V.pageDocumentBibliotheque),
   jamais plus large que la colonne : une image ou une vidéo se réduit, un
   texte trop long défile dans son propre cadre. */
.document__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-block: var(--e4) var(--e5); }
.document__actions .poids { font-weight: 400; }
.document__vue img, .document__vue video { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--rayon); }
.document__vue video { inline-size: 100%; background: var(--fond-inverse); }
.document__vue audio { inline-size: 100%; }
.document__pdf {
  display: block; inline-size: 100%; block-size: 80vh; min-block-size: 24rem;
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte);
}
.document__pdf p { padding: var(--e4); }
.document__texte {
  margin: 0; padding: var(--e4); max-block-size: 70vh; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-petit);
  background: var(--fond-carte); border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
}
.document__texte:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.retour a { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 500; }
.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); }
/* Grille plutôt que flex : la ligne reste centrée dans la cible de 44 px
   (align-content), le numéro et son libellé alignés sur leur ligne de base,
   et un libellé long passe à la ligne à côté du numéro, pas dessous. */
.urgences a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: center; column-gap: var(--e3); min-block-size: var(--cible); 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[hidden] { display: none; }
.barres li { display: grid; gap: var(--e1); }
.barres__label { font-size: var(--t-petit); font-weight: 500; }
.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); }

/* --- Formulaires simples (abonnement / désabonnement) ---------------------- */
.formulaire-simple { border: var(--trait) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); padding: var(--e5); margin-block-end: var(--e5); }
.formulaire-simple h2 { font-size: var(--t-h3); margin-block-end: var(--e3); }
.formulaire-simple__form { display: grid; gap: var(--e4); max-inline-size: 28rem; }
.formulaire-simple .champ { display: grid; gap: var(--e2); }
.formulaire-simple .champ label { font-weight: 500; }
.formulaire-simple .champ input {
  padding: var(--e3); font: inherit; color: var(--texte); background: var(--fond);
  border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon-petit); min-block-size: var(--cible);
}
.formulaire-simple .champ input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.formulaire-simple__note { margin-block-start: var(--e4); font-size: var(--t-petit); color: var(--texte-doux); }
/* Piège à robots : présent dans le DOM (contrairement à un champ "hidden",
   souvent ignoré par les scripts de collecte automatisée) mais renvoyé hors
   écran — invisible et hors du parcours au clavier (tabindex="-1"). */
.champ-piege { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 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; }

/* --- Conseils municipaux : recherche dans les comptes-rendus ---------------
   Amélioration progressive ajoutée par recherche-pv.js : sans JavaScript,
   #recherche-pv reste vide et n'affiche rien (voir src/templates/views.mjs,
   pageConseils) — le tableau des séances demeure la seule voie d'accès,
   entièrement fonctionnelle sans script. */
.recherche-pv__boite { margin-block-end: var(--e5); max-inline-size: 34rem; }
.recherche-pv__boite label { display: block; font-weight: 500; margin-block-end: var(--e2); }
.recherche-pv__champ {
  inline-size: 100%; min-block-size: var(--cible); box-sizing: border-box;
  padding: var(--e2) var(--e3); border: 2px solid var(--bordure-forte); border-radius: var(--rayon-pilule);
  background: var(--fond-carte); color: var(--texte); font-size: var(--t-corps);
}
.recherche-pv__champ:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Bibliothèque documentaire : filtre par thème à côté du champ, dessous sur
   petit écran. */
.recherche-pv__champs { display: grid; gap: var(--e3); }
.recherche-pv__boite--themes { max-inline-size: 46rem; }
@media (min-width: 40em) {
  .recherche-pv__boite--themes .recherche-pv__champs { grid-template-columns: 3fr 2fr; align-items: end; }
}
.recherche-pv__theme {
  inline-size: 100%; min-block-size: var(--cible); box-sizing: border-box;
  padding: var(--e2) var(--e3); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
  background: var(--fond-carte); color: var(--texte); font-size: var(--t-corps);
}
.recherche-pv__theme:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.recherche-pv__champ::-webkit-search-cancel-button { cursor: pointer; }
.recherche-pv__statut { font-size: var(--t-petit); color: var(--texte-doux); margin-block: var(--e2) 0; }
.recherche-pv__resultats { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }
.recherche-pv__resultat {
  padding: var(--e3) var(--e4); background: var(--fond-carte);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon);
}
.recherche-pv__resultat a { font-weight: 500; }
.recherche-pv__extrait { margin: var(--e2) 0 0; color: var(--texte-doux); font-size: var(--t-petit); }

/* --- 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); } }

/* Variante « accueil » : un bandeau qui défile dans son propre cadre plutôt
   qu'une grille — la page, elle, ne défile jamais horizontalement. */
.galerie--defilante {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); padding-block-end: var(--e2);
}
.galerie--defilante li { flex: 0 0 auto; inline-size: 12.5rem; scroll-snap-align: start; }
@media (min-width: 40em) { .galerie--defilante li { inline-size: 15rem; } }

.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: 600; 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); }

/* --- Consultations citoyennes ---------------------------------------------- */
.carte--consultation-une {
  display: grid; gap: var(--e3); padding: var(--e5);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon-grand);
  background: var(--fond-carte); box-shadow: var(--ombre);
}
.carte--consultation-une h2 { font-size: var(--t-h2); }

.consultation-compteur { font-size: var(--t-h3); font-weight: 600; margin-block-start: var(--e3); }

.vote-options { display: grid; gap: var(--e4); margin-block: var(--e5); }
.vote-options fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.vote-options legend { font-weight: 600; font-size: var(--t-h3); margin-block-end: var(--e2); padding: 0; }
.vote-options__option {
  display: flex; align-items: center; gap: var(--e3); min-block-size: var(--cible);
  padding: var(--e3); border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon-petit);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.vote-options__option:hover { border-color: var(--accent); background: var(--fond-accentue); }
.vote-options__option input { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; accent-color: var(--accent); }
.vote-options__option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.vote-options__commentaire { display: grid; gap: var(--e1); font-weight: 500; }
.vote-options__commentaire .aide { font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.vote-options__commentaire textarea {
  padding: var(--e3); font: inherit; color: var(--texte); background: var(--fond);
  border: var(--trait) solid var(--bordure-forte); border-radius: var(--rayon-petit); resize: vertical;
}
.vote-options__commentaire textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.consultation-confirmation {
  display: flex; align-items: center; gap: var(--e2); margin-block: var(--e4);
  padding: var(--e3) var(--e4); border-radius: var(--rayon-petit);
  background: var(--succes-fond); color: var(--succes); font-weight: 500;
}
/* Même spécificité que la règle [hidden] du navigateur (une classe = un
   attribut) : sans ce couple, "display: flex" ci-dessus l'emporterait sur
   [hidden] et le bandeau resterait visible en permanence, JS ou pas — voir
   le même correctif déjà appliqué à .barres[hidden] plus haut. */
.consultation-confirmation[hidden] { display: none; }
.consultation-confirmation--deja { background: var(--info-fond); color: var(--info); }
[data-theme="garrigue"] .carte-galerie__libelle { font-family: var(--police-titre); font-weight: 500; letter-spacing: .01em; }

/* ===== impression.css ===== */
/* Impression : une fiche de démarche doit rester utilisable sur papier. */
@media print {
  .entete, .annonces-telephone, .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; }
}

/* Fiche pratique (/mairie/fiche-pratique.html) : tenir sur une page A4, en
   deux colonnes, sans l'habillage du site. */
@media print {
  .page-fiche-pratique .pied, .page-fiche-pratique .page-entete__intro,
  .page-fiche-pratique [data-imprimer], .page-fiche-pratique .banniere-page { display: none !important; }
  .page-fiche-pratique h1 { font-size: 18pt; margin: 0 0 8pt; }
  .fiche-pratique { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; font-size: 10pt; }
  .fiche-pratique__bloc { border: 1px solid #999; border-radius: 0; padding: 6pt 8pt; box-shadow: none; background: #fff; break-inside: avoid; }
  .fiche-pratique__bloc--urgence { border: 2px solid #000; }
  .fiche-pratique__bloc h2 { font-size: 12pt; }
  .fiche-pratique .urgences strong { color: #000; font-size: 13pt; }
  .fiche-pratique a { text-decoration: none; }
  .fiche-pratique a[href^="http"]::after { content: none; }
}