/* Site de la commune de Bar-lès-Buzancy
   Couleurs et polices : charte du magazine communal (blason azur et or).
   Mise en page : principes validés pour le site du SIVU (en-tête clair, bandes crème avec photo ou panneau,
   cartes blanches ombrées, bande de chiffres pleine largeur, appel « Une question ? »).
   Accessibilité : contrastes ≥ 4,5:1 pour le texte et ≥ 3:1 pour les contours de contrôles, en clair comme en sombre ;
   aucun texte sous 14 px ; pas de défilement horizontal à 320 px ni à 200 % de zoom.
   L'or du blason (#D99F09) ne sert que de fond ou de filet ; le texte « or » utilise --or-texte. */

:root {
  --blanc: #FFFFFF; --fond: #FBF8F1; --creme: #F7F1E4; --creme-2: #E9DFCB; --trait: #E3DCCD; --bord: #8C8574;
  --encre: #22203A; --encre-2: #55516A;
  --azur: #342C83; --azur-fond: #342C83; --azur-pale: #ECEAF7; --azur-pale-2: #D9D5EF;
  --or: #D99F09; --or-doux: #FBF1D5; --or-bord: #EBD08A; --sur-or: #3B2A00; --or-texte: #7A5600;
  --tuile: #A8462A; --tuile-pale: #F8E6DD; --riviere: #22607F; --riviere-pale: #E1EEF4; --sepia: #6E4F33; --sepia-pale: #F1E8DC;
  --alerte: #A3271C; --alerte-pale: #FCE9E6; --ok: #1E6B41;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --main: "Caveat", "Segoe Print", cursive;
  --r: 12px;
  --e1: 8px; --e2: 12px; --e3: 16px; --e4: 24px; --e5: 32px; --e6: 48px; --e7: 72px;
  --bande: clamp(28px, 3.2vw, 40px);
  --ombre: 0 1px 2px rgba(34, 32, 58, .06), 0 8px 24px rgba(34, 32, 58, .08);
  --ombre-forte: 0 2px 4px rgba(34, 32, 58, .08), 0 16px 40px rgba(34, 32, 58, .14);
  color-scheme: light;
}
/* Mode clair par défaut ; le mode sombre ne s'applique qu'au clic sur le bouton (choix gardé dans le navigateur) */
:root[data-theme="dark"] {
  --blanc: #18172B; --fond: #121122; --creme: #201E36; --creme-2: #2E2B4A; --trait: #34314F; --bord: #8E8AAE;
  --encre: #EEEDF6; --encre-2: #C2BFD6;
  --azur: #C3BDF7; --azur-fond: #2E2775; --azur-pale: #24214A; --azur-pale-2: #322E63;
  --or: #E0B03A; --or-doux: #3A2E10; --or-bord: #6B5418; --sur-or: #F6E2A8; --or-texte: #F0CB6E;
  --tuile: #F2A48C; --tuile-pale: #3B2219; --riviere: #8CC7E3; --riviere-pale: #16303D; --sepia: #E3C3A0; --sepia-pale: #33271C;
  --alerte: #F4A196; --alerte-pale: #3E1D1A; --ok: #84D2A5;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --ombre-forte: 0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);
  color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--azur); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azur); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--azur); }
h1 { font-size: clamp(2.1rem, 5vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.85rem); }
h3 { font-size: 1.25rem; }
p, ul, ol, dl { margin: 0; }
figure { margin: 0; }
figcaption { font-size: .9375rem; color: var(--encre-2); margin-top: 6px; }
address { font-style: normal; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1140px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sur { font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); font-family: var(--texte); }
.main { font-family: var(--main); font-weight: 600; }
.maj { font-size: .9375rem; color: var(--encre-2); }
.todo { display: inline-block; font-size: .875rem; font-weight: 600; background: var(--or-doux); color: var(--sur-or); border: 1px dashed var(--or-texte); border-radius: 999px; padding: 0 8px; line-height: 1.5; font-family: var(--texte); letter-spacing: 0; text-transform: none; }

/* évitement et bandeau maquette */
.evitement a { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--azur-fond); color: #FFFFFF; padding: 10px 16px; font-weight: 700; border-radius: 8px; }
.evitement a:focus { left: 16px; }
.maquette { background: var(--azur-pale); color: var(--encre); font-size: .9375rem; border-bottom: 1px solid var(--trait); }
.maquette p { padding-block: 6px; }

/* en-tête */
header.site { background: var(--blanc); border-top: 5px solid var(--azur-fond); }
.tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-block: 14px; }
.marque { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--encre); margin-right: auto; }
.marque .blason { flex: none; width: 46px; height: 55px; filter: drop-shadow(0 2px 3px rgba(34, 32, 58, .25)); }
.marque b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.05; color: var(--azur); }
.marque small { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--or-texte); }
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn-alertes { display: inline-flex; align-items: center; gap: 8px; background: var(--or-doux); border: 1px solid var(--or-bord); color: var(--sur-or); font-weight: 700; text-decoration: none; padding: 8px 16px; border-radius: 999px; white-space: nowrap; min-height: 40px; }
.btn-alertes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-alertes:hover { text-decoration: underline; }
.btn-rond { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--bord); background: transparent; color: var(--encre-2); cursor: pointer; flex: none; }
.btn-rond:hover { background: var(--azur-pale); color: var(--azur); border-color: var(--azur); }
.btn-fb .lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.loupe-mobile { display: none !important; }
.btn-theme .ico-soleil, .btn-theme[aria-pressed="true"] .ico-lune { display: none; }
.btn-theme[aria-pressed="true"] .ico-soleil { display: inline; }
.recherche-tete { display: flex; align-items: center; height: 40px; padding: 0 4px 0 16px; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc); }
.recherche-tete:focus-within { border-color: var(--azur); box-shadow: 0 0 0 2px var(--azur); }
.recherche-tete input[type="search"] { font: inherit; font-size: .95rem; width: 9.5rem; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--encre); }
.recherche-tete input[type="search"]:focus-visible { outline: none; }
.recherche-tete input::placeholder { color: var(--encre-2); opacity: 1; }
.recherche-tete input::-webkit-search-cancel-button { display: none; }
.recherche-tete button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--azur-fond); color: #FFFFFF; cursor: pointer; }
.burger { display: none; font: 700 1rem var(--texte); padding: 8px 14px; border-radius: 999px; border: 2px solid var(--azur); background: transparent; color: var(--azur); cursor: pointer; min-height: 40px; }

nav.principale { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); background: var(--blanc); }
nav.principale ul { list-style: none; margin: 0 auto; padding-block: 0; display: flex; flex-wrap: wrap; }
nav.principale a { display: block; padding: 12px 16px 9px; font-weight: 700; font-size: 1.05rem; color: var(--azur); text-decoration: none; border-bottom: 4px solid transparent; }
nav.principale a:hover { text-decoration: underline; }
nav.principale a[aria-current="page"] { border-bottom-color: var(--or); color: var(--encre); }

/* bandeau d'information (accueil) */
.alerte { background: var(--or-doux); border-bottom: 1px solid var(--or-bord); }
.alerte .wrap { display: flex; gap: 8px 14px; align-items: center; padding-block: 10px; flex-wrap: wrap; }
.alerte .pastille { background: var(--tuile-pale); color: var(--tuile); border: 1px solid var(--tuile); font-family: var(--texte); font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 1px 10px; }
.alerte p { flex: 1; min-width: 220px; }
.alerte a { color: var(--encre); font-weight: 600; }

.ariane { background: var(--creme); font-size: .9375rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 8px; }
.ariane li + li::before { content: "›"; margin: 0 8px; color: var(--encre-2); }
.ariane [aria-current] { font-weight: 600; }

/* corps */
main { display: block; }
main:focus { outline: none; }
/* bandes pleine largeur : une seule respiration verticale, fonds alternés */
.bande { padding-block: var(--bande); }
.bande.pale { background: var(--fond); border-block: 1px solid var(--trait); }
.bande.serre { padding-block: var(--e5); }
.bande.serre + .bande.serre { padding-top: 0; }
.bande:not(.pale) + .bande:not(.pale):not(.serre) { padding-top: 0; }
.bande > .wrap > * + * { margin-top: var(--e5); }
.date-maj { padding-block: var(--e4); }
.entete-page { background: var(--creme); border-bottom: 1px solid var(--creme-2); }
.grille-2, .grille-3 { display: grid; gap: var(--e4) var(--e5); align-items: start; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-2.centre { align-items: center; }
.grille-2.large-gauche { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.grille-2 > *, .grille-3 > * { min-width: 0; }
.grille-2 > .encadre, .grille-3 > .encadre { align-self: stretch; }
.grille-2 .collectes { grid-template-columns: minmax(0, 1fr); }
.h3 { font-size: 1.25rem; margin-bottom: var(--e2); }
.actions-ligne { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* sommaire de page */
.sommaire ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1); }
.sommaire a { display: inline-block; padding: 8px 16px; border: 1px solid var(--bord); border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--azur); background: var(--blanc); min-height: 44px; line-height: 26px; }
.sommaire a:hover { border-color: var(--azur); text-decoration: underline; }

/* faits en liste (école) */
.faits { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.faits li { display: grid; gap: 2px; background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--or); border-radius: var(--r); padding: var(--e3) var(--e4); }
.faits b { font-family: var(--display); font-weight: 650; font-size: 1.1rem; color: var(--azur); }

/* cartes simples sur 4 colonnes (associations) */
.cartes-4 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.cartes-4 li { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: var(--e4); display: grid; gap: 4px; align-content: start; }
.cartes-4 b { font-family: var(--display); font-weight: 650; font-size: 1.15rem; color: var(--azur); }
.cartes-4 span { color: var(--encre-2); }

/* bienvenue (nouveaux habitants) */
.bienvenue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e4); align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); padding: var(--e5); }
.bienvenue > svg { width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: var(--azur-pale); stroke: var(--azur); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bienvenue h2 { font-size: 1.5rem; margin-bottom: 6px; }

/* numéros utiles */
.numeros { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e2); }
.numeros li { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e3) var(--e4); display: grid; gap: 2px; }
.numeros span { color: var(--encre-2); font-size: .9375rem; }
.numeros b { font-family: var(--display); font-size: 1.35rem; color: var(--azur); font-variant-numeric: tabular-nums; }
.numeros .urgent { border-color: var(--alerte); background: var(--alerte-pale); }
.numeros .urgent span { color: var(--encre); }
.numeros .urgent b { color: var(--alerte); font-size: 1.8rem; }

/* encart avec logo (France Services) */
.encart-logo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e4); align-items: center; background: var(--creme); border: 1px solid var(--creme-2); border-radius: 16px; padding: var(--e4) var(--e5); }
.encart-logo img { width: 120px; height: 120px; object-fit: contain; background: #FFFFFF; border-radius: 10px; padding: 6px; }
.encart-logo h2 { font-size: 1.4rem; margin-bottom: 6px; }

/* nature : photo en bandeau puis trois encadrés */
.nature { display: grid; gap: var(--e4); }
.nature figure img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; object-position: center 40%; border-radius: 16px; }
.page-tete { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; padding-block: var(--e5) var(--e6); }
.page-tete.seul { grid-template-columns: minmax(0, 1fr); padding-block: var(--e5) var(--e5); }
.page-tete-texte { display: grid; gap: 12px; }
.page-tete .chapeau { font-size: 1.15rem; color: var(--encre-2); max-width: 60ch; }
.page-tete figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: var(--ombre-forte); }
.page-tete figure img[src*="eglise"] { object-position: center 18%; }
.panneau { background: var(--azur-fond); color: #FFFFFF; border-radius: 16px; padding: 26px 28px; display: grid; gap: 10px; box-shadow: var(--ombre-forte); position: relative; overflow: hidden; }
.panneau::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(217, 159, 9, .22); }
.panneau > * { position: relative; z-index: 1; }
.panneau .sur { color: #F9EDC8; }
.panneau svg { width: 40px; height: 40px; stroke: #FFFFFF; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.panneau .grand { font-family: var(--display); font-weight: 650; font-size: 1.9rem; line-height: 1.1; }
.panneau a { color: #FFFFFF; }
.panneau .todo { background: #F9EDC8; color: #3B2A00; border-color: #7A5600; }

.titre-bloc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; margin-bottom: var(--e4); border-bottom: 1px solid var(--trait); position: relative; }
.titre-bloc::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 4px; border-radius: 2px; background: var(--or); }
.titre-bloc a { font-weight: 600; }
.deux { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pile { display: grid; gap: 28px; align-content: start; min-width: 0; }
.prose { max-width: 70ch; display: grid; gap: 14px; }
.prose h2 { margin-top: 18px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 6px; }
.intro { max-width: none; color: var(--encre-2); margin-top: calc(-1 * var(--e2)); margin-bottom: var(--e4); }

/* L'essentiel (réponse directe en tête de page) */
.essentiel { border-left: 5px solid var(--or); border-radius: 0 var(--r) var(--r) 0; background: var(--creme); padding: 18px 24px; display: grid; gap: 10px; }
.essentiel h2 { font-family: var(--texte); font-weight: 700; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); }
.essentiel ul { padding-left: 20px; columns: 2 24rem; column-gap: 48px; }
.essentiel li { break-inside: avoid; margin-bottom: 6px; }

/* accueil : bandeau photo et cartouche */
.bandeau { position: relative; }
.bandeau-photo img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; object-position: center 55%; }
.bandeau-photo figcaption { position: absolute; right: 12px; top: 10px; margin: 0; background: rgba(0, 0, 0, .6); color: #FFFFFF; font-size: .875rem; padding: 3px 8px; border-radius: 4px; }
.cartouche { position: relative; margin-top: -88px; }
.cartouche > div { background: var(--blanc); border-top: 4px solid var(--or); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--ombre-forte); padding: 26px 30px 28px; max-width: 780px; display: grid; gap: 8px; }
.cartouche h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 700; line-height: 1; }
.cartouche .annot { font-size: 1.9rem; color: var(--tuile); transform: rotate(-2deg); transform-origin: left; justify-self: start; line-height: 1.1; }
.cartouche .chapeau { font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--encre-2); max-width: 62ch; margin-top: 4px; }

/* accès rapides */
.acces ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.acces a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: center; height: 100%; padding: 18px 20px; background: var(--blanc); border-radius: var(--r); text-decoration: none; color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.acces a > svg { grid-row: 1 / span 2; align-self: center; }
.acces a:hover { border-color: var(--azur); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.acces a:hover b { text-decoration: underline; }
.acces svg { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: var(--azur-pale); stroke: var(--azur); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acces b { font-family: var(--display); font-weight: 650; font-size: 1.15rem; color: var(--azur); line-height: 1.15; }
.acces span { font-size: .9375rem; color: var(--encre-2); line-height: 1.35; }

/* canaux officiels */
.canaux-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4); align-items: stretch; }
.canaux-grille > .pile { gap: var(--e4); grid-template-rows: auto 1fr; }
.canal-carte { border-radius: 16px; padding: var(--e5); display: grid; gap: 12px; align-content: start; }
.canal-carte h3 { font-size: 1.6rem; }
.canal-icone { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canal-carte.pp { background: var(--azur-fond); color: #FFFFFF; box-shadow: var(--ombre-forte); position: relative; overflow: hidden; }
.canal-carte.pp::after { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(217, 159, 9, .2); }
.canal-carte.pp > * { position: relative; z-index: 1; }
.canal-carte.pp h3 { color: #FFFFFF; }
.canal-carte.pp .canal-icone { stroke: #F9EDC8; }
.canal-carte.pp :focus-visible { outline-color: #F9EDC8; }
.canal-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 4px; }
.canal-carte.fb { background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.canal-carte.fb .canal-icone { stroke: var(--azur); }
.qr { display: flex; gap: 12px; align-items: center; }
.qr img { background: #FFFFFF; padding: 6px; border-radius: 8px; width: 112px; height: 112px; }
.qr figcaption { color: #FFFFFF; margin: 0; max-width: 9rem; }
.etapes-panneau { list-style: none; counter-reset: p; padding: 0; display: grid; gap: 10px; }
.etapes-panneau li { counter-increment: p; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 12px; align-items: center; font-weight: 600; }
.etapes-panneau li::before { content: counter(p); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #F9EDC8; color: #3B2A00; font-family: var(--display); font-weight: 700; }

/* actualités : la carte entière est cliquable par le lien du titre */
.actus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); list-style: none; padding: 0; }
.actu { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.actu:hover { border-color: var(--azur); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.actu .vignette { height: 130px; }
.actu .vignette svg { width: 100%; height: 100%; display: block; }
.actu .corps { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.actu .rub { justify-self: start; font-size: .875rem; font-weight: 700; border-radius: 999px; padding: 1px 10px; border: 1px solid currentColor; }
.rub.sepia { background: var(--sepia-pale); color: var(--sepia); }
.rub.tuile { background: var(--tuile-pale); color: var(--tuile); }
.rub.riviere { background: var(--riviere-pale); color: var(--riviere); }
.rub.azur { background: var(--azur-pale); color: var(--azur); }
.actu h3 { font-size: 1.2rem; line-height: 1.25; }
.actu h3 a { color: var(--encre); text-decoration: none; }
.actu h3 a::after { content: ""; position: absolute; inset: 0; }
.actu:hover h3 a { text-decoration: underline; }
.actu h3 a:focus-visible { outline: none; }
.actu:focus-within { outline: 3px solid var(--azur); outline-offset: 3px; }
.actu p { color: var(--encre-2); }
.actu .date-pub { font-size: .9375rem; }
.actu.une { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto; }
.actu.une .vignette { height: auto; min-height: 300px; position: relative; }
.actu.une .vignette img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.actu.une .corps { padding: 28px 32px; gap: 10px; align-content: center; }
.actu.une h3 { font-size: 1.75rem; }
.actu.une p:not(.date-pub) { font-size: 1.0625rem; }
.vignette-photo, .vignette-photo picture { height: 100%; }
.vignette-photo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 30%; }

/* agenda */
.agenda { list-style: none; padding: 0; display: grid; gap: 14px; }
.agenda li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 14px; align-items: start; }
.date { display: grid; text-align: center; background: var(--azur-fond); color: #FFFFFF; border-radius: 10px; box-shadow: var(--ombre); padding: 6px 0 7px; line-height: 1; }
.date b { font-family: var(--display); font-size: 1.55rem; font-weight: 700; }
.date span { font-size: .875rem; font-weight: 700; margin-top: 3px; }
.agenda strong { display: block; line-height: 1.3; }
.agenda .lieu { font-size: .9375rem; color: var(--encre-2); }
.agenda-bande { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.agenda-bande li { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: 16px; }

/* encadrés */
.encadre { background: var(--creme); border: 1px solid var(--creme-2); border-radius: var(--r); padding: var(--e4); display: grid; gap: 12px; align-content: start; }
.encadre.blanc { background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.pale .encadre:not(.blanc) { background: var(--blanc); border-color: var(--trait); }
.encadre h2 { font-size: 1.45rem; }
.encadre h3 { font-size: 1.2rem; }
.encadre .tableau { background: var(--blanc); }
.encadre details summary { cursor: pointer; font-weight: 600; color: var(--azur); padding-left: 2px; }
.encadre .btn { justify-self: start; }
ul.coches { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.coches li { padding-left: 28px; position: relative; }
ul.coches li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 14px; border: 2px solid var(--or-texte); border-radius: 50%; }
.liste { list-style: none; padding: 0; display: grid; }
.liste li { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.liste li:last-child { border-bottom: 0; }

/* mot du maire */
.edito { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e5); align-items: center; background: var(--creme); border: 1px solid var(--creme-2); border-radius: 16px; padding: var(--e5) var(--e6); }
.edito .sur { margin-bottom: 10px; }
.edito blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.45; max-width: 40em; }
.edito .signature { margin-top: 14px; font-size: 1.9rem; color: var(--azur); }
.edito .signature span { display: block; font-family: var(--texte); font-size: .9375rem; color: var(--encre-2); font-weight: 400; }
.portrait img { width: 150px; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 6px; border: 6px solid #FFFFFF; box-shadow: var(--ombre); transform: rotate(-2deg); }

/* bande de chiffres */
.bande-chiffres { background: var(--azur-fond); color: #FFFFFF; position: relative; overflow: hidden; }
.bande-chiffres::before { content: ""; position: absolute; left: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(217, 159, 9, .16); }
.bande-chiffres .wrap { position: relative; padding-block: 44px 48px; display: grid; gap: 24px; }
.bande-chiffres h2 { color: #FFFFFF; }
.bande-chiffres .sur { color: #F9EDC8; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.chiffres div { border-left: 3px solid rgba(249, 237, 200, .75); padding: 4px 0 4px 18px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.chiffres dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 2.7rem; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.chiffres dt { font-size: .9375rem; color: #E4E1F5; line-height: 1.35; }

/* carte de situation */
.deux-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.deux-carte .carte { max-width: 440px; width: 100%; justify-self: center; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); padding: 12px; }
.carte svg { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--fond); }
.carte .voisines path { fill: var(--creme); stroke: var(--bord); stroke-width: 1.2; stroke-linejoin: round; }
.carte path.bar { fill: var(--azur-pale-2); stroke: var(--azur); stroke-width: 3; stroke-linejoin: round; }
.carte text { font-family: var(--texte); font-weight: 600; font-size: 19px; fill: var(--encre-2); text-anchor: middle; paint-order: stroke; stroke: var(--blanc); stroke-width: 5px; stroke-linejoin: round; }
.carte circle.village { fill: var(--or); stroke: var(--azur); stroke-width: 3; }
.carte text.nom-bar { font-family: var(--display); font-weight: 700; font-size: 24px; fill: var(--azur); }
.carte figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 4px 2px; margin: 0; }
.legende { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--encre); }
.legende i { width: 18px; height: 14px; border-radius: 3px; display: inline-block; }
.l-bar { background: var(--azur-pale-2); border: 2px solid var(--azur); }
.l-village { background: var(--or); border-radius: 50% !important; width: 14px !important; border: 2px solid var(--azur); }
.carte figcaption .maj { flex-basis: 100%; font-size: .875rem; }

/* questions fréquentes */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: 0 20px; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; margin-right: 4px; border-right: 2.5px solid var(--azur); border-bottom: 2.5px solid var(--azur); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .75em; }
.faq summary:focus-visible { outline: 3px solid var(--azur); outline-offset: 2px; border-radius: 4px; }
.faq summary h3 { display: inline; font-family: var(--texte); font-size: 1.0625rem; font-weight: 700; color: var(--encre); }
.faq summary:hover h3 { color: var(--azur); text-decoration: underline; }
.faq details > div { padding: 0 0 16px; }

/* tableaux et listes */
td .todo { white-space: nowrap; }
.tableau { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r); background: var(--blanc); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
caption { text-align: left; font-weight: 700; padding: 12px 14px 4px; color: var(--azur); font-family: var(--display); font-size: 1.1rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th { font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); background: var(--creme); border-bottom: 2px solid var(--azur); }
tbody th { font-weight: 600; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarif { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--or); box-shadow: var(--ombre); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 2px; align-content: start; }
.tarif .prix { font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: var(--azur); font-variant-numeric: tabular-nums; }
.tarif .quoi { font-weight: 700; }
.tarif .plus { font-size: .9375rem; color: var(--encre-2); }
.collectes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -4px; }
.collecte { background: var(--creme); border: 1px solid var(--creme-2); border-top: 4px solid var(--azur-fond); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.collecte h3 { font-size: 1.15rem; }
.collecte dl { display: grid; gap: 2px; margin-top: 6px; }
.collecte dt { font-weight: 700; margin-top: 6px; }
.collecte dd { margin: 0; }
.seances { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.seances li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 6px 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.seances h3 { font-size: 1.1rem; color: var(--azur); }
.seances .doc { justify-self: end; }
.elus { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none; padding: 0; }
.elus li { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: 14px 16px; display: grid; gap: 4px; }
.elus b { font-family: var(--display); font-size: 1.1rem; font-weight: 650; color: var(--azur); }
.elus span { font-size: .9375rem; color: var(--encre-2); }
.liste-docs { list-style: none; padding: 0; display: grid; }
.liste-docs li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.liste-docs li > span:not(.todo) { color: var(--encre-2); font-size: .9375rem; }
.liste-docs li > span b { color: var(--encre); font-size: 1.0625rem; }

/* démarches */
.recherche-dem { display: grid; gap: 10px; margin-bottom: 20px; }
.recherche-dem label { font-weight: 700; }
.recherche-dem input { width: 100%; max-width: 36rem; font: 1.0625rem var(--texte); padding: 12px 18px; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc); color: var(--encre); }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; }
.filtres legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.filtres button { font: 600 1rem var(--texte); border: 1px solid var(--bord); background: var(--blanc); color: var(--encre); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 44px; }
.filtres button[aria-pressed="true"] { background: var(--azur-fond); color: #FFFFFF; border-color: var(--azur-fond); }
.compteur { font-weight: 600; color: var(--encre-2); }
.demarches { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; list-style: none; padding: 0; }
.dem { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px; display: grid; gap: 6px; align-content: start; }
.dem .theme { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or-texte); }
.dem h3 { font-family: var(--texte); font-size: 1.1rem; font-weight: 700; color: var(--encre); }
.dem p { color: var(--encre-2); }
.dem .ou { font-size: .9375rem; font-weight: 600; color: var(--azur); }

/* formulaires */
.formulaire { display: grid; gap: 14px; }
.champ { display: grid; gap: 4px; }
.champ label, .etiquette { font-weight: 700; }
.aide { font-size: .9375rem; color: var(--encre-2); }
.champ input, .champ select, .champ textarea, .prose input[type="search"] { font: 1.0625rem var(--texte); padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); color: var(--encre); width: 100%; max-width: 36rem; }
[aria-invalid="true"] { border-color: var(--alerte) !important; border-width: 2px !important; }
.erreur { color: var(--alerte); font-weight: 600; font-size: .9375rem; }
.erreur:empty { display: none; }
.resume-erreurs { background: var(--alerte-pale); border: 2px solid var(--alerte); border-radius: 8px; padding: 12px 16px; }
.resume-erreurs h3 { font-size: 1.1rem; color: var(--alerte); }
.resume-erreurs ul { margin: 6px 0 0; padding-left: 20px; }
.ok { border: 2px solid var(--ok); color: var(--ok); border-radius: 8px; padding: 10px 14px; font-weight: 600; }
.obligatoire { font-weight: 400; color: var(--encre-2); }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { display: inline-block; font: 700 1rem var(--texte); background: var(--azur-fond); color: #FFFFFF; border: 2px solid var(--azur-fond); border-radius: 999px; padding: 10px 22px; cursor: pointer; text-decoration: none; min-height: 44px; justify-self: start; }
.btn:hover { text-decoration: underline; }
.btn.clair { background: var(--blanc); color: var(--azur); border-color: var(--azur); }
.btn.or { background: #F9EDC8; color: #3B2A00; border-color: #F9EDC8; }

/* découvrir */
.frise { list-style: none; margin: 0 0 0 8px; padding: 0; border-left: 3px solid var(--sepia); }
.frise li { position: relative; padding: 0 0 var(--e4) var(--e4); }
.frise li:last-child { padding-bottom: 0; }
.frise li::before { content: ""; position: absolute; left: -9px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--sepia-pale); border: 3px solid var(--sepia); }
.frise h3 { font-size: 1.15rem; color: var(--sepia); }
.balades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); list-style: none; padding: 0; }
.distance { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--azur); }
.pastille-km { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--encre); }
.pastille-km.rouge { background: #D7261E; } .pastille-km.bleu { background: #2B4FB3; } .pastille-km.jaune { background: #F2D20C; } .pastille-km.vtt { background: #1E6B41; }
.balade dl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9375rem; margin-top: 4px; }
.balade dl div { display: flex; gap: 4px; }
.balade .trace { margin-top: auto; padding-top: 8px; font-weight: 600; }
.balade { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.balade > div { padding: var(--e3) var(--e4) var(--e4); display: flex; flex-direction: column; gap: 6px; }
.balade h3 { font-size: 1.15rem; }
.balade p { color: var(--encre-2); }
.balade dl { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .9375rem; }
.balade dt { font-weight: 700; }
.balade dd { margin: 0; }
.balade-photo img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); align-items: start; }
.trio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.photo-flottante { float: right; width: 38%; margin: 0 0 8px 16px; }
.photo-flottante img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.avec-photo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e5) var(--e6); align-items: center; }
.avec-photo img { max-height: 520px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; width: 100%; }
.avec-photo > div { display: grid; gap: 10px; }
.carte-postale img { border: 8px solid #FFFFFF; box-shadow: var(--ombre-forte); border-radius: 2px; transform: rotate(-1deg); }

/* contact */
.coord { display: grid; gap: 4px; }
.coord dt { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); margin-top: 10px; }
.coord dt:first-child { margin-top: 0; }
.coord dd { margin: 0; }
.copie { font: 600 .9375rem var(--texte); border: 1px solid var(--azur); color: var(--azur); background: var(--blanc); border-radius: 999px; padding: 4px 12px; margin-left: 8px; cursor: pointer; min-height: 36px; }

/* partenaires */
.partenaires { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.partenaires li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px 20px; }
.partenaires li > div { display: grid; gap: 6px; }
.partenaires h2 { font-size: 1.15rem; }
.partenaires p { font-size: .9375rem; color: var(--encre-2); }
.logo-cadre { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 10px; height: 96px; display: grid; place-items: center; padding: 12px; }
.logo-cadre img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; }
.logo-cadre svg.sans-logo { width: 48px; height: 48px; stroke: #342C83; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* facile à lire */
.falc { font-size: 1.25rem; line-height: 1.7; max-width: 46ch; display: grid; gap: 26px; }
.falc section { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.falc svg { width: 64px; height: 64px; stroke: var(--azur); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: var(--azur-pale); border-radius: 12px; padding: 10px; }
.falc h2 { font-size: 1.6rem; margin-bottom: 4px; }

/* recherche */
.resultats { list-style: none; padding: 0; display: grid; gap: 4px; }
.resultats li { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.resultats a { font-weight: 700; font-size: 1.08rem; }
.resultats p { font-size: .95rem; color: var(--encre-2); }

/* plan du site */
.plan ul { display: grid; gap: 6px; padding-left: 20px; }

/* appel et pied de page */
.appel { background: var(--creme); border-top: 1px solid var(--creme-2); }
.appel .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); padding-block: var(--e6); }
.appel h2 { font-size: 1.8rem; }
.appel p { color: var(--encre-2); max-width: 54ch; }
.appel .actions { display: flex; flex-wrap: wrap; gap: 10px; }
footer.site { background: var(--azur-fond); color: #E4E1F5; border-top: 4px solid var(--or); }
footer.site .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding-block: 44px 28px; }
footer.site .blason { width: 58px; height: 70px; margin-bottom: 14px; }
footer.site h2 { font-family: var(--texte); font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 10px; }
footer.site ul { list-style: none; padding: 0; display: grid; gap: 6px; }
footer.site a { color: #FFFFFF; }
footer.site :focus-visible { outline-color: #F9EDC8; }
footer .bas { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 16px; font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
footer .bas ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lien-cookies { font: inherit; background: none; border: 0; padding: 0; color: #FFFFFF; text-decoration: underline; cursor: pointer; }

/* bandeau cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto; background: var(--blanc); color: var(--encre); border: 1px solid var(--trait); border-top: 4px solid var(--azur-fond); border-radius: var(--r); box-shadow: var(--ombre-forte); padding: 18px 20px; display: grid; gap: 12px; }
.cookies h2 { font-size: 1.3rem; }
.cookies .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (max-width: 900px) {
  .deux, .deux-carte, .canaux-grille, .grille-2, .grille-2.large-gauche, .avec-photo { grid-template-columns: minmax(0, 1fr); }
  .grille-3 { grid-template-columns: minmax(0, 1fr); }
  .balades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bienvenue { grid-template-columns: auto minmax(0, 1fr); }
  .bienvenue .btn { grid-column: 1 / -1; }
  .nature figure img { aspect-ratio: 2 / 1; }
  .actus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .deux-carte .carte { justify-self: start; }
  .acces ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .page-tete { grid-template-columns: minmax(0, 1fr); }
  .page-tete figure img { aspect-ratio: 16 / 9; }
  .partenaires { grid-template-columns: minmax(0, 1fr); }
  footer.site .wrap { grid-template-columns: minmax(0, 1fr); }
  .recherche-tete input[type="search"] { width: 7rem; }
}
@media (max-width: 760px) {
  .js .burger { display: inline-block; }
  .js nav.principale { display: none; }
  .js nav.principale.ouvert { display: block; }
  nav.principale ul { flex-direction: column; }
  nav.principale a { border-bottom: 0; border-left: 4px solid transparent; }
  nav.principale a[aria-current="page"] { border-left-color: var(--or); }
  .tete { gap: 12px; padding-block: 12px; }
  .marque { flex: 1 1 0; min-width: 0; gap: 10px; }
  .marque .blason { width: 38px; height: 46px; }
  .marque small { font-size: .8125rem; letter-spacing: .04em; }
  .burger { order: 1; }
  .outils { order: 2; flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  .recherche-tete { display: none; }
  .loupe-mobile { display: inline-flex !important; }
  .btn-alertes, .btn-fb { flex: 1 1 0; justify-content: center; padding-inline: 10px; min-width: 0; }
  .btn-alertes .lib-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-fb { width: auto; border-radius: 999px; gap: 6px; font-weight: 700; color: var(--azur); text-decoration: none; }
  .btn-fb .lib { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .alerte .wrap { display: grid; gap: 6px; }
  .alerte .pastille { justify-self: start; }
  .cartouche h1 { font-size: 2.3rem; }
  .cartouche { margin-top: -40px; }
  .cartouche > div { padding: 18px; }
  .actus, .tarifs, .agenda-bande { grid-template-columns: minmax(0, 1fr); }
  .seances li { grid-template-columns: minmax(0, 1fr); }
  .collectes { grid-template-columns: minmax(0, 1fr); }
  .seances .doc { justify-self: start; }
  .actu.une .corps { padding: 18px; }
  .actu.une h3 { font-size: 1.4rem; }
  .avec-photo { grid-template-columns: minmax(0, 1fr); }
  .avec-photo img { aspect-ratio: 16 / 10; }
  .actu.une { grid-template-columns: minmax(0, 1fr); }
  .actu.une .vignette { min-height: 220px; }
  .edito { grid-template-columns: minmax(0, 1fr); padding: var(--e4); }
  .portrait img { width: 120px; }
  .cartes-4, .balades { grid-template-columns: minmax(0, 1fr); }
  .bienvenue { grid-template-columns: minmax(0, 1fr); padding: var(--e4); }
  .encart-logo { grid-template-columns: 80px minmax(0, 1fr); padding: var(--e4); }
  .encart-logo img { width: 80px; height: 80px; }
  .bande.serre { padding-block: var(--e4); }
  .partenaires li { grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; }
  .logo-cadre { height: 72px; padding: 8px; }
  .logo-cadre img { max-height: 54px; }
  .page-tete { padding-block: 22px 32px; }
}
@media (max-width: 520px) {
  .acces ul { gap: 10px; }
  .acces a { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px; }
  .acces a > svg { grid-row: auto; width: 40px; height: 40px; padding: 9px; }
  .acces b { font-size: 1.05rem; }
  .acces span { display: none; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio .photo:first-child { grid-column: 1 / -1; }
  .trio .photo:first-child img { aspect-ratio: 4 / 3; }
  .photo-flottante { float: none; width: 100%; margin: 0; }
  .marque b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .date, .actu .rub, .alerte .pastille, .filtres button[aria-pressed="true"], .btn, .panneau, .canal-carte, .bande-chiffres { border: 2px solid CanvasText; }
  nav.principale a[aria-current="page"] { border-bottom-color: Highlight; }
  .actu:focus-within { outline: 3px solid Highlight; }
}
@media print {
  header.site .outils, nav.principale, .evitement, .maquette, .appel, .cookies, footer.site { display: none; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
}

/* élus : rang du tableau et liste */
.elus { counter-reset: none; }
.elus li { position: relative; padding-top: 14px; }
.elus .rang { position: absolute; top: 10px; right: 12px; font-family: var(--display); font-weight: 700; font-size: .9375rem; color: var(--encre-2); }
.elus b { padding-right: 24px; }
.liste-elu { justify-self: start; margin-top: 4px; font-size: .875rem; font-weight: 600; border-radius: 999px; padding: 1px 10px; background: var(--azur-pale); color: var(--azur); border: 1px solid var(--azur-pale-2); }
.liste-elu.autre { background: var(--sepia-pale); color: var(--sepia); border-color: currentColor; }
.poids { font-size: .875rem; color: var(--encre-2); white-space: nowrap; }
.seances .doc { font-weight: 600; }
.balade .trace.fiche { margin-top: 0; padding-top: 0; }
.encadre-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.photo-bandeau { margin-bottom: var(--e4); }
.photo-bandeau img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 60%; border-radius: 12px; }
.elus li { grid-template-rows: auto auto 1fr; align-content: start; }
.liste-elu { align-self: end; line-height: 1.4; }

.commissions-2c2a { margin-top: var(--e4); }
.liste-com { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e2) var(--e4); }
.liste-com div { border-left: 3px solid var(--or); padding: 2px 0 2px 12px; }
.liste-com dt { font-weight: 700; }
.liste-com dd { margin: 0; color: var(--encre-2); }
.portrait img { aspect-ratio: 3 / 4; object-position: center top; }

/* Territoire : repères et distances */
.reperes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); margin: var(--e4) 0 0; }
.reperes div { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--or); border-radius: var(--r); padding: var(--e2) var(--e3); display: flex; flex-direction: column-reverse; gap: 2px; }
.reperes dd { margin: 0; font-family: var(--display); font-weight: 650; font-size: 1.25rem; color: var(--azur); }
.reperes dt { font-size: .9375rem; color: var(--encre-2); }
.trajets-titre { margin-top: var(--e5); font-size: 1.1rem; }
.trajets { list-style: none; padding: 0; margin: var(--e2) 0 0; border-top: 1px solid var(--trait); }
.trajets li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.trajets b { font-variant-numeric: tabular-nums; color: var(--azur); }
@media (max-width: 420px) { .reperes { grid-template-columns: minmax(0, 1fr); } }
.carte .etangs path { fill: #4A90B8; stroke: #4A90B8; stroke-width: 3.5; stroke-linejoin: round; }
.l-etang { background: #4A90B8; border: 1px solid #2B6F96; }
.doc-phare { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e4); align-items: start; background: var(--creme); border: 1px solid var(--creme-2); border-left: 5px solid var(--or); border-radius: var(--r); padding: var(--e4) var(--e5); margin-bottom: var(--e5); }
.doc-phare > svg { width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: var(--blanc); stroke: var(--azur); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doc-phare h3 { font-size: 1.3rem; margin-bottom: 4px; }
.doc-phare .doc-lien { margin-top: var(--e2); font-weight: 600; }
@media (max-width: 420px) { .doc-phare { grid-template-columns: minmax(0, 1fr); } }

/* Les étangs de Bar */
.etangs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e5); align-items: start; }
.etangs-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.etangs-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.etangs-points li { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--riviere); border-radius: var(--r); padding: var(--e3) var(--e4) var(--e4); }
.etangs-points h3 { font-size: 1.15rem; margin-bottom: 6px; color: var(--riviere); }
.etangs-note { margin-top: var(--e4); max-width: 72ch; color: var(--encre-2); }
@media (max-width: 900px) { .etangs { grid-template-columns: minmax(0, 1fr); } .etangs-photo img { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .etangs-points { grid-template-columns: minmax(0, 1fr); } }
.faces { list-style: none; padding: 0; margin: var(--e3) 0 0; display: flex; flex-wrap: wrap; gap: var(--e3); }
.faces a { display: block; text-decoration: none; color: var(--encre); }
.faces .face { margin: 0; width: 170px; }
.faces img { width: 100%; height: auto; border: 1px solid var(--trait); border-radius: 6px; box-shadow: var(--ombre); background: #fff; transition: transform .15s ease; }
.faces a:hover img, .faces a:focus-visible img { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.faces figcaption { margin-top: 6px; font-weight: 600; text-align: center; font-size: .9375rem; }

/* Page Infos municipales */
.info-mois { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.info-source { color: var(--encre-2); margin: 4px 0 var(--e4); }
.infos-grille { columns: 2 340px; column-gap: var(--e4); }
.info { break-inside: avoid; background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--azur); border-radius: var(--r); padding: var(--e3) var(--e4); margin: 0 0 var(--e4); }
.info h3 { font-size: 1.15rem; margin: 0 0 8px; line-height: 1.25; }
.info-date { display: inline-block; font-family: var(--texte); font-size: .875rem; font-weight: 600; color: var(--encre-2); background: var(--azur-pale); border-radius: 999px; padding: 1px 10px; margin-left: 6px; vertical-align: middle; }
.info ul { padding-left: 1.1em; margin: 0; display: grid; gap: 6px; }
.info p + p, .info ul + p, .info p + ul { margin-top: 8px; }
.info table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: .9375rem; }
.info caption { text-align: left; font-weight: 600; margin-bottom: 4px; }
.info th, .info td { border-bottom: 1px solid var(--trait); padding: 6px 4px; text-align: left; }
.info td { font-variant-numeric: tabular-nums; }
.info-pdf { margin: -8px 0 var(--e4); font-weight: 600; }
.info-pdf + .info-pdf { margin-top: calc(-1 * var(--e3)); }
.faces.grilles { gap: var(--e5); }
.faces.grilles > li { width: 260px; }
.faces.grilles .face { width: 100%; }
.faces.grilles p { margin-top: 8px; }

/* Accueil : infos municipales et alertes */
.une { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--e5); align-items: start; }
.une-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.une-liste li { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--azur); border-radius: var(--r); padding: var(--e3) var(--e4) var(--e4); display: flex; flex-direction: column; gap: 6px; }
.une-date { font-size: .875rem; font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
.une-liste h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.une-liste h3 a { color: var(--azur); text-decoration: none; }
.une-liste h3 a:hover, .une-liste h3 a:focus-visible { text-decoration: underline; }
.une-liste p:last-child { color: var(--encre-2); font-size: .9375rem; }
.une-alertes { background: var(--azur); color: #FFFFFF; border-radius: 16px; padding: var(--e4); display: grid; gap: var(--e2); }
.une-alertes h3 { color: #FFFFFF; font-size: 1.3rem; margin: 0; }
.une-alertes p { margin: 0; color: #E9E6FA; }
.une-alertes .btn { width: 100%; justify-content: center; text-align: center; }
.une-alertes .btn.clair { background: #FFFFFF; color: var(--azur); border-color: #FFFFFF; }
.une-alertes a:not(.btn) { color: #FFFFFF; }
.qr.petit { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; }
.qr.petit img { background: #FFFFFF; border-radius: 8px; padding: 6px; width: 96px; height: 96px; }
.canal-note { color: var(--encre-2); margin: 0; }
.liste-titre { font-size: 1.1rem; margin: var(--e3) 0 var(--e2); }
.liste-titre:first-of-type { margin-top: 0; }
@media (max-width: 900px) { .une { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .une-liste { grid-template-columns: minmax(0, 1fr); } }
.reperes.taux { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--e2); } @media (max-width: 560px) { .reperes.taux { grid-template-columns: minmax(0, 1fr); } }
.reperes.taux div { justify-content: flex-end; } section > .tarifs + .liste-titre { margin-top: var(--e5); }

/* Fils en direct : PanneauPocket et Facebook */
.direct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
.direct h3 { font-size: 1.2rem; margin: 0 0 var(--e2); }
.fil { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; max-width: 360px; }
.fil iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.fil-pp iframe { height: 518px; }
.une-alertes .fil { max-width: none; border: 0; }
.une-alertes .fil-pp iframe { height: 330px; }
.fil-fb { min-height: 300px; display: grid; }
.fil-fb.charge iframe { height: 518px; }
.tiers-avis { padding: var(--e4); display: grid; gap: var(--e2); align-content: center; text-align: center; justify-items: center; background: var(--creme); }
.tiers-avis p { margin: 0; max-width: 32ch; }
.tiers-icone { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: var(--azur-pale); stroke: var(--azur); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.direct > div > p { margin-top: var(--e2); font-weight: 600; }
@media (max-width: 760px) { .direct { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .une-liste li:nth-child(n+3) { display: none; } }

/* Découvrir : encart vers la page Histoire ; page Histoire : « À voir au village » */
.encart-histoire { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e5); align-items: center; }
.encart-histoire .carte-postale { max-width: 420px; justify-self: end; margin: 0; }
.encart-histoire p + p { margin-top: var(--e3); }
.voir li { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--or); border-radius: var(--r); padding: var(--e3) var(--e4) var(--e4); }
.voir h3 { font-size: 1.1rem; margin: 0 0 6px; }
.voir h3 a { color: var(--azur); }
@media (max-width: 760px) { .encart-histoire { grid-template-columns: minmax(0, 1fr); } .encart-histoire .carte-postale { justify-self: start; } }
.panneau-liste { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: .9375rem; } .panneau-liste strong { white-space: nowrap; }

/* Vivre ici : calendriers et déchèterie */
.calendriers, .decheterie { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e3) var(--e4) var(--e4); }
.calendriers h3, .decheterie h3 { font-size: 1.15rem; margin: 0 0 var(--e2); }
.calendriers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-weight: 600; }
.decheterie { border-left: 4px solid var(--or); }
.decheterie table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e2); font-size: .9375rem; }
.decheterie th, .decheterie td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.decheterie thead th { font-size: .875rem; color: var(--encre-2); }
.decheterie tbody th span { font-weight: 400; font-size: .875rem; color: var(--encre-2); }
.decheterie td { font-variant-numeric: tabular-nums; }
.decheterie p + p { margin-top: 6px; }
.cal-bloc + .cal-bloc { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--trait); }
.cal-bloc > p { font-weight: 600; margin: 0 0 var(--e2); }
.faces-cal { margin-top: 0; gap: var(--e2); }
.faces-cal .face { width: 120px; }
.calendriers ul.faces-cal { display: flex; flex-wrap: wrap; font-weight: 600; }

/* Page des panneaux du patrimoine */
.carte-et-liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--e5); align-items: start; }
.liste-panneaux { padding-left: 1.4em; display: grid; gap: 8px; margin: 0 0 var(--e3); font-weight: 600; }
.approx-txt { font-weight: 400; color: var(--encre-2); font-size: .9375rem; }
.carte-panneaux svg { background: #F4F1E8; }
.c-fond { fill: #F4F1E8; }
.c-bat { fill: #D9D2C3; stroke: #C8BFAE; stroke-width: .5; }
.c-eau { fill: #A9CFE3; }
.c-riv { fill: none; stroke: #6FA9C9; stroke-width: 2; stroke-linecap: round; }
.c-route { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.c-piste { fill: none; stroke: #B7A98E; stroke-width: 1.6; stroke-dasharray: 4 3; }
.c-chemin { fill: none; stroke: #B7A98E; stroke-width: 1.2; stroke-dasharray: 2 3; }
.carte-panneaux .lieu { font-family: var(--display); font-size: 17px; font-weight: 700; fill: var(--azur); paint-order: stroke; stroke: #F4F1E8; stroke-width: 5px; text-anchor: start; }
.repere circle { fill: var(--azur); stroke: #FFFFFF; stroke-width: 3; }
.repere text { fill: #FFFFFF; font-family: var(--texte); font-weight: 700; font-size: 16px; text-anchor: middle; stroke: none; }
.repere.approx circle { fill: #FFFFFF; stroke: var(--azur); stroke-width: 3; stroke-dasharray: 5 3; }
.repere.approx text { fill: var(--azur); }
.carte-panneaux a:hover circle, .carte-panneaux a:focus circle { stroke: var(--or); stroke-width: 4; }
.echelle path { stroke: var(--encre); stroke-width: 3; fill: none; }
.echelle text, .nord text { font-size: 13px; font-weight: 700; fill: var(--encre); text-anchor: start; stroke: none; }
.nord path { fill: var(--encre); }
.nord text { text-anchor: middle; }
.l-repere { background: var(--azur); border-radius: 50% !important; width: 16px !important; height: 16px !important; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--azur); }
.l-repere.approx { background: #FFFFFF; border: 2px dashed var(--azur); box-shadow: none; }
.panneau-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.panneau-txt p + p { margin-top: var(--e2); }
.num-panneau { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azur); color: #FFFFFF; font-weight: 700; font-size: 1.2rem; margin: 0 0 var(--e2); }
.panneau-txt h2 { margin-bottom: var(--e3); }
.panneau-txt details.en { margin-top: var(--e3); }
.panneau-txt details.en summary { cursor: pointer; font-weight: 600; color: var(--azur); }
.panneau-image { display: block; }
.panneau-image img { border-radius: 10px; box-shadow: var(--ombre); }
.avec-photo.inverse > .panneau-image { order: 2; }
@media (max-width: 900px) { .carte-et-liste, .panneau-txt { grid-template-columns: minmax(0, 1fr); } .avec-photo.inverse > .panneau-image { order: 0; } }
.carte-panneaux .lieu.fin { text-anchor: end; }
nav.principale a[aria-current="true"] { border-bottom-color: var(--or); color: var(--encre); }
@media (max-width: 760px) { nav.principale a[aria-current="true"] { border-left-color: var(--or); } }
.plan ul ul { margin-top: 6px; }
.plan h2 { font-size: 1.3rem; margin-top: var(--e4); }
.plus-loin { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.plus-loin a { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--e3); align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e3); text-decoration: none; color: var(--encre-2); box-shadow: var(--ombre); }
.plus-loin a:hover, .plus-loin a:focus-visible { border-color: var(--azur); }
.plus-loin .photo { margin: 0; }
.plus-loin img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; width: 100%; height: auto; }
.plus-loin b { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--azur); margin-bottom: 4px; }
.plus-loin a:hover b { text-decoration: underline; }
@media (max-width: 760px) { .plus-loin { grid-template-columns: minmax(0, 1fr); } .plus-loin a { grid-template-columns: 110px minmax(0, 1fr); } }

/* Infos municipales : fil des mois à gauche, colonne « En direct » à droite */
.infos-mise { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e5); align-items: start; }
.infos-fil { display: grid; gap: var(--e5); }
.mois { display: grid; gap: var(--e3); padding-top: var(--e4); border-top: 2px solid var(--trait); }
.mois:first-child { border-top: 0; padding-top: 0; }
.mois-tete .info-source { margin-bottom: var(--e2); }
.mois-tete .info-pdf { margin: 0 0 4px; }
.mois-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--e3); }
.mois-tete > div { min-width: 0; flex: 1 1 260px; }
.faces.faces-lettres { margin: 0; gap: var(--e2); }
.faces-lettres .face { width: 120px; }
/* Magazine annuel : couverture à gauche, texte à droite */
.magazine { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-start; }
.magazine-une { display: block; flex: 0 0 auto; }
.magazine-une .face { margin: 0; width: 210px; }
.magazine-une img { width: 100%; height: auto; border: 1px solid var(--trait); border-radius: 6px; box-shadow: var(--ombre); background: #fff; transition: transform .15s ease; }
.magazine-une:hover img, .magazine-une:focus-visible img { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.magazine-texte { flex: 1 1 280px; min-width: 0; max-width: 62ch; }
.magazine-texte p:first-child { margin-top: 0; }
@media (max-width: 520px) { .faces-lettres .face { width: 96px; } .magazine-une .face { width: 160px; } }
.infos-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
.infos-liste .info { margin: 0; }
.direct-cote { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); display: grid; gap: var(--e2); background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: var(--e4); }
.direct-cote h2 { font-size: 1.4rem; margin: 0; }
.direct-cote h3 { font-size: 1.1rem; margin: var(--e3) 0 0; }
.direct-intro { color: var(--encre-2); margin: 0; font-size: .9375rem; }
.direct-cote .fil { max-width: none; border-radius: 10px; }
.direct-cote .fil-pp iframe { height: 470px; }
.direct-cote .fil-fb { min-height: 0; }
.direct-cote .tiers-avis { padding: var(--e3); }
.direct-liens { margin: 0; }
.direct-liens .btn { width: 100%; justify-content: center; }
@media (max-width: 1080px) { .infos-liste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .infos-mise { grid-template-columns: minmax(0, 1fr); } .direct-cote { position: static; order: -1; } }
.cartes-4 li > a { margin-top: 4px; font-weight: 600; font-size: .9375rem; }
.dem-lien { margin-top: 4px; font-weight: 600; font-size: .9375rem; }

/* Années : l'année en cours affichée, les précédentes repliées (même structure d'une année à l'autre) */
.annee-titre { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--azur); margin: 0 0 var(--e3); }
h4.annee-titre { font-size: 1.15rem; margin: var(--e2) 0; }
.annee-prec { margin-top: var(--e4); border: 1px solid var(--trait); border-radius: var(--r); background: var(--blanc); }
.annee-prec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); }
.annee-prec > summary::-webkit-details-marker { display: none; }
.annee-prec > summary::after { content: ""; flex: none; width: .6em; height: .6em; border-right: 2px solid var(--azur); border-bottom: 2px solid var(--azur); transform: rotate(45deg); margin: -.25em .25em 0 0; transition: transform .2s; }
.annee-prec[open] > summary::after { transform: rotate(-135deg); margin-top: .25em; }
.annee-prec > summary .annee-titre { margin: 0; }
.annee-prec > summary:focus-visible { outline: 3px solid var(--focus, var(--azur)); outline-offset: 2px; }
.annee-prec > div { padding: 0 var(--e4) var(--e4); }
.info h4 { font-size: 1.15rem; margin: 0 0 8px; line-height: 1.25; }
.seances h4 { font-size: 1.1rem; color: var(--azur); margin: 0; }
.infos-fil > .mois:first-of-type, .infos-fil > .annee-titre + .mois { border-top: 0; padding-top: 0; }
.infos-fil .mois + .mois { margin-top: var(--e5); }

/* Page Infos : les deux flux en direct côte à côte, en tête de page */
.direct-infos .fil { max-width: none; }
.direct-infos .fil-pp iframe { height: 520px; }
.direct-infos .fil-fb, .direct-infos .fil-fb.charge iframe { min-height: 520px; }

/* Onglets des sous-rubriques (Découvrir, Mairie) */
.sous-nav { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.sous-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; padding-top: 12px; padding-bottom: 12px; margin: 0 auto; }
.sous-nav a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--trait); text-decoration: none; font-weight: 600; color: var(--encre-2); }
.sous-nav a:hover { border-color: var(--azur); color: var(--azur); }
.sous-nav a[aria-current="page"] { background: var(--azur); border-color: var(--azur); color: var(--blanc); }

/* Accueil : trois portes d'entrée vers Découvrir */
.plus-loin.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plus-loin.trois a { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .plus-loin.trois { grid-template-columns: minmax(0, 1fr); } .plus-loin.trois a { grid-template-columns: 110px minmax(0, 1fr); align-items: center; } }

/* Dernières publications Facebook, recopiées dans la page (sans module ni cookie Facebook) */
.fil-fb-liste { max-width: none; padding: var(--e3) var(--e4); }
.fil-fb-liste ul { list-style: none; margin: 0; padding: 0; display: grid; }
.fil-fb-liste li { padding: var(--e3) 0; border-bottom: 1px solid var(--trait); display: grid; gap: 4px; }
.fil-fb-liste li:first-child { padding-top: 0; }
.fil-fb-liste time { font-size: .875rem; font-weight: 600; color: var(--encre-2); text-transform: uppercase; letter-spacing: .03em; }
.fil-fb-liste a:not(.btn) { font-family: var(--display); font-size: 1.15rem; font-weight: 650; color: var(--azur); }
.fil-fb-liste p { margin: 0; }
.fil-fb-liste .fb-suivre { margin-top: var(--e3); }
/* Le module PanneauPocket a une largeur fixe (environ 330 px) : sa colonne s'y ajuste, Facebook prend le reste */
.direct-infos { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.direct-infos .fil-pp { border: 0; background: transparent; }
@media (max-width: 760px) { .direct-infos { grid-template-columns: minmax(0, 1fr); } .direct-infos .fil-pp { max-width: 360px; } }

/* Accueil : les cartes d'infos s'étirent jusqu'au bas du bloc d'alertes, sans vide dessous */
.une { align-items: stretch; }
/* sur ordinateur, la hauteur du bloc vient des cartes ; le bloc d'alertes s'y ajuste (le module PanneauPocket raccourcit ou s'allonge) */
@media (min-width: 901px) {
  .une-alertes { contain: size; display: flex; flex-direction: column; overflow: hidden; }
  .une-alertes .fil { flex: 1 1 auto; min-height: 200px; display: flex; }
  .une-alertes .fil-pp iframe { height: auto; flex: 1 1 auto; }
}

/* Sommaire « Sur cette page » : barre collante en haut de l'écran, section en cours surlignée */
.barre-sommaire { position: sticky; top: 0; z-index: 30; background: var(--blanc); border-bottom: 1px solid var(--trait); box-shadow: 0 6px 14px -12px rgba(20, 16, 60, .45); }
.barre-sommaire .sommaire ul { flex-wrap: wrap; padding-block: 10px; }
/* Avec JavaScript : une seule ligne, le surplus passe dans le menu « Plus » (pas d'ascenseur horizontal) */
.barre-sommaire .sommaire.avec-plus > ul { flex-wrap: nowrap; overflow: visible; }
.barre-sommaire .sommaire.avec-plus > ul > li:not(.sommaire-plus) { min-width: 0; }
.sommaire-plus { position: relative; margin-left: auto; }
.sommaire-plus-bouton { font: inherit; font-weight: 600; font-size: .9375rem; color: var(--azur); background: var(--blanc); border: 1px solid var(--bord); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.sommaire-plus-bouton:hover, .sommaire-plus-bouton[aria-expanded="true"] { border-color: var(--azur); }
.sommaire-plus-bouton.actif { background: var(--azur-fond); border-color: var(--azur-fond); color: #fff; }
.barre-sommaire .sommaire .sommaire-plus-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; gap: 4px; min-width: 220px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; padding: 8px; margin: 0; list-style: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(20, 16, 60, .45); }
.barre-sommaire .sommaire .sommaire-plus-liste[hidden] { display: none; }
.barre-sommaire .sommaire .sommaire-plus-liste a { display: block; width: 100%; white-space: normal; border-color: transparent; }
.barre-sommaire .sommaire .sommaire-plus-liste a:hover { border-color: var(--bord); }
/* Menu « Lettres d'info » : les mois de l'année en cours, puis les années précédentes */
.sommaire-groupe { position: relative; }
.sommaire-groupe summary { list-style: none; display: inline-block; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--azur); background: var(--blanc); border: 1px solid var(--bord); border-radius: 999px; padding: 8px 14px; min-height: 40px; line-height: 22px; white-space: nowrap; }
.sommaire-groupe summary::-webkit-details-marker { display: none; }
.sommaire-groupe summary:hover, .sommaire-groupe details[open] summary { border-color: var(--azur); }
.sommaire-groupe.actif summary { background: var(--azur-fond); border-color: var(--azur-fond); color: #fff; }
.barre-sommaire .sommaire .sommaire-groupe ul { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; display: grid; gap: 4px; min-width: 220px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; padding: 8px; margin: 0; list-style: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(20, 16, 60, .45); flex-wrap: nowrap; }
.barre-sommaire .sommaire .sommaire-groupe ul a { display: block; width: 100%; white-space: normal; border-color: transparent; }
.barre-sommaire .sommaire .sommaire-groupe ul a:hover { border-color: var(--bord); }
.sommaire-groupe-sep { border-top: 1px solid var(--trait); padding-top: 4px; }
.barre-sommaire .sommaire li { flex: none; }
.barre-sommaire .sommaire a { min-height: 40px; line-height: 22px; padding: 8px 14px; font-size: .9375rem; white-space: nowrap; }
.barre-sommaire .sommaire a[aria-current="true"] { background: var(--azur-fond); border-color: var(--azur-fond); color: #fff; }
html { scroll-padding-top: 84px; }
@media print { .barre-sommaire { position: static; box-shadow: none; } }
/* Page Infos : les deux colonnes « En direct » finissent à la même hauteur (le module PanneauPocket s'allonge) */
.direct-infos { align-items: stretch; }
.direct-infos > div { display: flex; flex-direction: column; }
.direct-infos .fil { flex: 1 1 auto; }
.direct-infos .fil-pp { display: flex; }
.direct-infos .fil-pp iframe { height: auto; min-height: 520px; flex: 1 1 auto; }
@media (max-width: 760px) { .direct-infos .fil-pp iframe { min-height: 480px; } }
/* Cartes de l'agenda de l'accueil : même hauteur sur une même ligne */
.agenda-bande { align-items: start; }
/* Carte des panneaux : la liste reste visible à côté de la carte quand on fait défiler */
@media (min-width: 901px) { .carte-et-liste > :first-child { position: sticky; top: 84px; } }

/* Onglets de la rubrique et sommaire de la page : une seule barre qui reste en haut de l'écran */
.barres-collantes { position: sticky; top: 0; z-index: 30; background: var(--blanc); box-shadow: 0 6px 14px -12px rgba(20, 16, 60, .45); }
.barres-collantes .barre-sommaire { position: static; box-shadow: none; }
.barres-collantes .sous-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-top: 8px; padding-bottom: 8px; }
.barres-collantes .sous-nav li { flex: none; }
.barres-collantes .sous-nav a { padding: 6px 14px; white-space: nowrap; }
.barres-collantes .sommaire ul { padding-block: 8px; }
html:has(.barres-collantes .sous-nav + .barre-sommaire) { scroll-padding-top: 130px; }
@media (min-width: 901px) { .barres-collantes ~ * .carte-et-liste > :first-child, .carte-et-liste > :first-child { top: calc(var(--haut-barres, 84px) + 12px); } }
@media print { .barres-collantes { position: static; box-shadow: none; } }
.barres-collantes ul { scrollbar-width: none; }
.barres-collantes ul::-webkit-scrollbar { display: none; }

/* Resserrage général : le premier bloc sous les barres collantes et l'en-tête de page démarrent plus près */
.barres-collantes + .bande, .entete-page + .bande { padding-top: var(--e4); }
.bande.serre { padding-block: var(--e4); }
.titre-bloc { margin-bottom: var(--e3); }
.page-tete { padding-block: var(--e4) var(--e5); }
.date-maj { padding-block: var(--e2); }
@media (max-width: 760px) { .page-tete { padding-block: 16px 24px; } }

/* Panneaux du patrimoine : poème de Léopold Roger et légendes des images */
.poeme { margin: var(--e3) 0; padding: var(--e3) var(--e4); border-left: 4px solid var(--or); background: var(--blanc); border-radius: 0 var(--r) var(--r) 0; font-family: var(--display); font-style: italic; color: var(--encre); }
.poeme p { margin: 0 0 var(--e2); line-height: 1.6; }
.poeme footer { font-family: var(--texte); font-style: normal; font-size: .9rem; color: var(--encre-2); }
.legendes { font-size: .9rem; color: var(--encre-2); font-style: italic; }
/* Page Mairie : budget et taux sur une ligne, publications en deux colonnes en dessous */
.budget-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--e5); align-items: start; }
.budget-ligne .liste-titre { margin-top: 0; }
.publications { margin-top: var(--e5); }
@media (max-width: 900px) { .budget-ligne { grid-template-columns: minmax(0, 1fr); } }
/* Page Mairie : chiffres clés du budget et des taux dans un seul panneau homogène */
.chiffres-cles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--or); border-radius: var(--r); box-shadow: var(--ombre); }
.groupe-chiffres { padding: var(--e3) var(--e4); min-width: 0; }
.groupe-chiffres + .groupe-chiffres { border-left: 1px solid var(--trait); }
.groupe-chiffres h3 { margin: 0; font-size: 1.05rem; }
.groupe-chiffres .note { margin: 2px 0 var(--e3); font-size: .9375rem; color: var(--encre-2); }
.groupe-chiffres dl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e3); margin: 0; }
.groupe-chiffres dl div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.groupe-chiffres dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--azur); font-variant-numeric: tabular-nums; white-space: nowrap; }
.groupe-chiffres dt { font-size: .9375rem; font-weight: 600; color: var(--encre); }
.groupe-chiffres dt span { display: block; font-weight: 400; color: var(--encre-2); font-size: .875rem; }
@media (max-width: 900px) { .chiffres-cles { grid-template-columns: minmax(0, 1fr); } .groupe-chiffres + .groupe-chiffres { border-left: 0; border-top: 1px solid var(--trait); } }
@media (max-width: 520px) { .groupe-chiffres dl { grid-auto-flow: row; } }
/* Élus : la liste d'appartenance devient un liseré de couleur, expliqué par une légende */
.elus li { border-top: 4px solid var(--azur); }
.elus li.autre { border-top-color: var(--sepia); }
.legende-listes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 var(--e3); font-size: .9375rem; color: var(--encre-2); }
.puce-liste { display: inline-flex; align-items: center; gap: 8px; }
.puce-liste::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--azur); }
.puce-liste.autre::before { background: var(--sepia); }
.elus li .rang { color: var(--azur); }
.elus li.autre .rang { color: var(--sepia); }
.elus li .rang { font-size: 1.05rem; }
/* Vivre ici : eau potable plus large, foyer rural à sa hauteur naturelle (pas de vide sous le texte) */
.grille-2.eau-foyer { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grille-2.eau-foyer > .encadre { align-self: start; }
@media (max-width: 900px) { .grille-2.eau-foyer { grid-template-columns: minmax(0, 1fr); } }
/* École : logo complet du Pôle scolaire à côté du premier paragraphe (fond blanc pour rester lisible en mode sombre) */
.ecole-tete { display: flex; gap: var(--e4); align-items: flex-start; }
.ecole-tete p { margin: 0; min-width: 0; }
.logo-sivu { flex: 0 0 168px; background: #FFFFFF; border: 1px solid var(--trait); border-radius: 10px; padding: 10px; line-height: 0; }
.logo-sivu img { width: 100%; height: auto; }
.logo-sivu:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
@media (max-width: 520px) { .ecole-tete { flex-direction: column; } .logo-sivu { flex-basis: auto; width: 150px; } }
/* Page Numéros utiles : urgences en grand, recherche, rubriques en colonnes de lignes « nom … numéro » */
.num-urgences { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--e2); }
.num-urgences a { display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: var(--e3); border: 1px solid var(--alerte); border-radius: var(--r); background: var(--alerte-pale); color: var(--encre); text-decoration: none; }
.num-urgences a:hover { box-shadow: var(--ombre); }
.num-urgences a:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.num-urgences b { font-family: var(--display); font-size: 2rem; line-height: 1.1; color: var(--alerte); font-variant-numeric: tabular-nums; }
.num-urgences .quoi { font-weight: 700; }
.num-urgences .plus { font-size: .875rem; color: var(--encre-2); }
.num-signaler { margin-top: var(--e3); }
@media (max-width: 520px) { .num-urgences { grid-template-columns: repeat(2, minmax(0, 1fr)); } .num-urgences b { font-size: 1.6rem; } }
@media print { .recherche-dem, .num-signaler { display: none; } }

/* Numéros utiles : fiches identiques à celles des démarches, numéro mis en valeur */
.numeros-fiches { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.numeros-fiches .dem { padding: 14px 16px; }
.numeros-fiches .dem h3 { font-size: 1.02rem; }
.numeros-fiches .dem p { font-size: .9375rem; }
.dem-tel { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--azur); font-variant-numeric: tabular-nums; white-space: nowrap; }

.autre-specialiste { margin-top: var(--e4); max-width: 60rem; }
.autre-specialiste h3 { margin: 0 0 6px; }

.choix-spe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.choix-spe label { font-weight: 700; }
.choix-spe select { font: 1rem var(--texte); min-height: 44px; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc); color: var(--encre); max-width: 100%; }
.choix-spe select:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }