/* VivaLocale. Identité du lot 2 de la refonte (VVDN 4107, 15/10/2026). Fiche de design : ../../DESIGN.md */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Palette du cahier (§5.2) : crème, sauge, vert profond, terracotta ; contrastes mesurés dans DESIGN.md. */
  --fond: #f8f6ef;
  --surface: #ffffff;
  --teinte: #eaf3ec;
  --texte: #202b25;
  --texte-2: #56665d;
  --ligne: #dde3da;
  --profond: #193c2d;
  --profond-texte: #f8f6ef;
  --profond-2: #b9cbbf;
  --accent: #256a4e;
  --accent-texte: #ffffff;
  --bouton: var(--accent);
  --bouton-texte: var(--accent-texte);
  --accent-doux: #dcebe1;
  --terre: #c9785c;        /* décor seulement (3,1:1) : filets, pastilles */
  --terre-texte: #a9583b;  /* terracotta lisible (4,7:1 sur crème) */
  --terre-doux: #f6e6dd;
  --ombre: 0 1px 2px rgb(25 60 45 / 0.06), 0 8px 24px rgb(25 60 45 / 0.08);
  --r-carte: 12px;
  --r-champ: 10px;
  --r-bouton: 999px;
  --large: 1240px;
  --titre-couleur: #193c2d;
  --titre: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Sombre neutre (VLIN 565) : anthracite chaud, aucune teinte verte sur les surfaces ; le vert ne sert qu'au bouton principal. */
    --fond: #171614;
    --surface: #23211e;
    --teinte: #2b2825;
    --texte: #f2ede3;
    --texte-2: #b8b1a5;
    --ligne: #403c37;
    --profond: #0e0d0c;
    --profond-texte: #f2ede3;
    --profond-2: #b8b1a5;
    --accent: #f0b79d;
    --accent-texte: #1b120d;
    --bouton: #6fc29b;
    --bouton-texte: #0d1a13;
    --accent-doux: #3b2f29;
    --terre: #c9785c;
    --terre-texte: #f0b79d;
    --terre-doux: #3a2820;
    --titre-couleur: #f2ede3;
    --ombre: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
  /* Les rubriques sont colorées en ligne par commune.js pour fond clair (3:1 sur sombre) : texte neutre en sombre. */
  .adr-rubrique { color: var(--texte-2) !important; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a, button, input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: rgb(37 106 78 / 0.15); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--accent); color: var(--accent-texte); padding: 0.7rem 1rem; border-radius: var(--r-champ); font-weight: 700; }
.lien-evitement:focus { top: 0.6rem; }

.conteneur { width: min(var(--large), 100% - 2.5rem); margin-inline: auto; }

.bandeau-apercu {
  background: var(--terre-doux);
  color: var(--texte);
  font-size: 0.875rem;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.entete .conteneur { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marque { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.marque img { display: block; width: 44px; height: 44px; flex: none; }
.marque-nom { font-family: var(--titre); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.marque-nom span { color: var(--terre-texte); font-style: italic; font-weight: 600; }
.nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--texte-2); font-weight: 600; font-size: 0.98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texte); }
.nav a.bouton-plein:hover, .nav a.bouton-plein[aria-current="page"] { color: var(--accent-texte); }
.ma-commune { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem 0 0.7rem; border: 1.5px solid var(--ligne); border-radius: var(--r-bouton); color: var(--texte) !important; max-width: 16rem; }
.ma-commune span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-commune svg { color: var(--terre-texte); }
.ma-commune:hover { border-color: var(--accent); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: var(--r-bouton);
  font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.6; cursor: progress; }
.bouton-plein { background: var(--bouton); color: var(--bouton-texte); }
.bouton-plein:hover { background: color-mix(in srgb, var(--bouton) 86%, var(--texte)); }
.bouton-trait { border-color: color-mix(in srgb, var(--texte) 70%, transparent); color: var(--texte); background: transparent; }
.bouton-trait:hover { background: var(--teinte); border-color: var(--texte); }
.nav .bouton { color: var(--accent-texte); min-height: 44px; padding: 0 1.2rem; gap: 0; }
.insecable { white-space: nowrap; }

/* Héros */
.heros { padding: 3.5rem 0 3.5rem; }
.heros .conteneur { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.heros .conteneur > * { min-width: 0; }
.surtitre { margin: 0 0 1rem; font-size: 0.92rem; font-weight: 650; color: var(--terre-texte); letter-spacing: 0.01em; }
.surtitre::before { content: ""; display: inline-block; width: 1.6rem; height: 2px; background: var(--terre); vertical-align: middle; margin-right: 0.6rem; }
.heros h1, .commune-tete h1, .form-page h1, .charte h1 {
  font-family: var(--titre); font-weight: 650; font-optical-sizing: auto; letter-spacing: -0.02em; text-wrap: balance;
}
.heros h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.02; margin: 0 0 1.2rem; color: var(--titre-couleur); }
.heros p.chapo { font-size: 1.2rem; color: var(--texte-2); max-width: 40ch; margin: 0 0 2rem; text-wrap: pretty; }
.recherche { display: grid; gap: 0.5rem; max-width: 36rem; }
.recherche label { font-weight: 700; font-size: 0.98rem; }
.recherche-ligne { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.recherche-ligne .choix-commune { flex: 1 1 15rem; }
.recherche .aide { margin-top: 0.2rem; }
/* Champ + « Voir » sur la même ligne, puis « ou », puis la position (VSSV 4436) : le gros bouton vert sous le champ
   se lisait comme sa validation, et un nom tapé sans toucher une proposition partait sur « autour de moi ». */
.recherche-ligne { flex-wrap: nowrap; }
.recherche-ligne .choix-commune { min-width: 0; }
.recherche .bouton-voir { flex: 0 0 auto; width: auto; padding: 0 1.2rem; }
.recherche-ou { display: flex; align-items: center; gap: 0.8rem; margin: 0.2rem 0; color: color-mix(in srgb, var(--texte) 75%, transparent); font-size: 0.95rem; }
.recherche-ou::before, .recherche-ou::after { content: ""; flex: 1; border-top: 1px solid var(--ligne); }
.recherche #autour-de-moi { justify-self: start; }
.icone-champ { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--texte-2); pointer-events: none; }
.recherche input.champ { padding-left: 2.7rem; min-height: 52px; font-size: 1.05rem; border-width: 2px; }
.recherche .bouton { min-height: 52px; }
.heros-image { margin: 0; position: relative; }
.heros-image img { border-radius: 18px 18px 18px 4px; aspect-ratio: 4 / 4.4; object-fit: cover; width: 100%; box-shadow: var(--ombre); }
.heros-zone {
  position: absolute; left: -1.5rem; bottom: 1.5rem; max-width: calc(100% - 1rem);
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--terre); border-radius: var(--r-champ);
  padding: 0.75rem 1rem; box-shadow: var(--ombre); font-size: 0.95rem;
}
.heros-zone a { font-weight: 700; color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; }

.champ, .recherche input, select, textarea {
  font: inherit; color: var(--texte); background: var(--surface);
  border: 1.5px solid var(--ligne); border-radius: var(--r-champ);
  min-height: 48px; padding: 0.6rem 0.9rem; width: 100%;
}
.champ:focus, .recherche input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-doux); }
::placeholder { color: var(--texte-2); opacity: 0.85; }

/* Sections */
section { padding: 4rem 0; }
h2 { font-family: var(--titre); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 0.6rem; text-wrap: balance; }
h3 { font-size: 1.12rem; margin: 0 0 0.3rem; letter-spacing: -0.01em; line-height: 1.3; }
.intro { color: var(--texte-2); max-width: 60ch; margin: 0 0 2rem; }
.petit { font-size: 0.9rem; color: var(--texte-2); }

/* Agenda */
.agenda-tete { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.agenda-tete h2 { margin: 0; }
.agenda { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.evt {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: start;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte);
  padding: 1rem 1.1rem; text-decoration: none; transition: border-color 0.15s ease;
}
a.evt:hover { border-color: var(--accent); box-shadow: var(--ombre); }
.evt .jour { text-align: center; border-radius: 10px; background: var(--teinte); padding: 0.45rem 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.evt .jour b { display: block; font-family: var(--titre); font-size: 1.65rem; font-weight: 650; }
.evt .jour small { font-size: 0.78rem; text-transform: lowercase; color: var(--texte-2); }
.evt h3 { margin: 0 0 0.2rem; }
.evt .meta { font-size: 0.92rem; color: var(--texte-2); margin: 0; }
.evt .meta .doute { font-style: italic; }
.filtre-note { font-size: 0.88rem; color: var(--texte-2); margin: 0.4rem 0 0; }
.evt .par { font-size: 0.85rem; margin: 0.45rem 0 0; color: var(--texte-2); }
.badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--teinte); color: var(--texte); margin-right: 0.3rem; }
.badge-verifie { background: var(--accent-doux); }


/* Thèmes : rangée défilante */
.themes { display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; list-style: none; margin: 0; padding-left: 0; }
.themes li { scroll-snap-align: start; flex: 0 0 auto; }
.puce {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1.5px solid var(--ligne); border-radius: 999px; background: var(--surface);
  font: inherit; font-weight: 600; color: var(--texte); text-decoration: none; cursor: pointer;
}
.puce:hover { border-color: var(--texte); }
.puce[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }


/* Pied */
.pied { background: var(--profond); color: var(--profond-2); padding: 3.5rem 0 2rem; font-size: 0.95rem; margin-top: 2rem; }
.pied a { color: var(--profond-texte); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2rem; }
.pied-marque p { margin: 0 0 0.6rem; max-width: 32ch; }
.pied .marque-nom { color: var(--profond-texte); font-size: 1.7rem; margin-bottom: 0.8rem; }
.pied .marque-nom span { color: #e8a386; }
.pied nav { display: grid; gap: 0.15rem; align-content: start; }
.pied nav a { min-height: 44px; display: inline-flex; align-items: center; }
.pied nav h2 { font-family: inherit; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--profond-2); margin: 0 0 0.5rem; }
.pied-bas { border-top: 1px solid rgb(255 255 255 / 0.14); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.85rem; }
.pied-bas p { margin: 0; }
.pied-bas p + p { margin-top: 0.6rem; }
.pied-bas a { text-decoration: underline; text-underline-offset: 3px; }

/* Page commune */
.commune-tete { padding: 2.5rem 0 1.5rem; }
.commune-tete .conteneur { display: grid; grid-template-columns: 1fr 22rem; gap: 2rem; align-items: end; }
.commune-tete h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 0.5rem; }
.commune-tete img { border-radius: var(--r-carte); aspect-ratio: 16 / 10; object-fit: cover; }
.filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.colonnes { display: grid; grid-template-columns: 1fr 20rem; gap: 2.5rem; align-items: start; }
.fil { display: grid; gap: 0.9rem; list-style: none; padding: 0; margin: 0; }
.aside { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.4rem; position: sticky; top: 90px; }
.aside h2 { font-size: 1.25rem; }
.aside ul { padding-left: 1.1rem; margin: 0 0 1rem; color: var(--texte-2); }
.vide { padding: 2rem; text-align: center; border: 1.5px dashed var(--ligne); border-radius: var(--r-carte); color: var(--texte-2); }
.info { border-left: 3px solid var(--texte-2); }

/* Formulaire */
.form-page { padding: 2.5rem 0 4rem; }
.form-page .conteneur { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: start; }
.form-page h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 0.6rem; }
form { display: grid; gap: 1.25rem; }
.bloc { display: grid; gap: 0.4rem; }
.bloc label, fieldset legend { font-weight: 700; }
.aide { font-size: 0.88rem; color: var(--texte-2); margin: 0; }
.erreur { font-size: 0.9rem; color: var(--accent); margin: 0; font-weight: 600; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.choix label { display: flex; gap: 0.6rem; align-items: center; min-height: 52px; padding: 0.6rem 0.9rem; border: 1.5px solid var(--ligne); border-radius: var(--r-champ); background: var(--surface); font-weight: 600; cursor: pointer; }
.choix input { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.choix label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 500; }
.case input { accent-color: var(--accent); width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex: none; }
.compteur { font-size: 0.85rem; color: var(--texte-2); text-align: right; margin: 0; }
.apercu-colonne { position: sticky; top: 90px; display: grid; gap: 1.2rem; }
.relecture { background: var(--teinte); border-radius: var(--r-carte); padding: 1.3rem 1.4rem; }
.relecture ol { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--texte-2); }
.relecture li { margin-bottom: 0.35rem; }
.message-ok { background: var(--accent-doux); border-radius: var(--r-carte); padding: 1.2rem 1.4rem; }

/* Charte */
.charte { padding: 2.5rem 0 4rem; }
.charte .conteneur { max-width: 860px; }
.charte h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 1rem; }
.charte h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.charte li { margin-bottom: 0.5rem; }
.deux-listes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.deux-listes > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.2rem 1.4rem; }
.deux-listes ul { padding-left: 1.1rem; margin: 0; }
.niveaux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.niveaux > div { background: var(--teinte); border-radius: var(--r-carte); padding: 1.1rem 1.3rem; }
.niveaux p { margin: 0.2rem 0 0; color: var(--texte-2); }

.lien-retour { display: inline-block; margin-bottom: 1rem; color: var(--texte-2); }

@media (max-width: 900px) {
  .heros .conteneur, .commune-tete .conteneur, .colonnes, .form-page .conteneur { grid-template-columns: 1fr; gap: 2rem; }
  .heros { padding-top: 1.5rem; }
  .heros-image img { aspect-ratio: 16 / 9; border-radius: 14px; }
  .heros-zone { left: 0.75rem; bottom: 0.75rem; }
  .agenda { grid-template-columns: 1fr; }
  .aside, .apercu-colonne { position: static; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .nav-texte { display: none; }
}
@media (max-width: 640px) {
  .entete .conteneur { gap: 0.6rem; }
  .marque { gap: 0.45rem; }
  .marque img { width: 36px; height: 36px; }
  .marque-nom { font-size: 1.3rem; }
  .nav { gap: 0.5rem; }
  .nav-long { display: none; }
  .nav .bouton { padding: 0 1rem; }
  .ma-commune { padding: 0 0.7rem; max-width: 9.5rem; }
  section { padding: 3rem 0; }
  .choix, .deux, .deux-listes, .niveaux { grid-template-columns: 1fr; }
  .evt { grid-template-columns: 3.6rem 1fr; gap: 0.8rem; }
  .recherche #autour-de-moi { width: 100%; }
  .pied-grille { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .entete .conteneur { gap: 0.4rem; }
  .marque img { width: 32px; height: 32px; }
  .marque-nom { font-size: 1.15rem; }
  .ma-commune { padding: 0 0.5rem; gap: 0.3rem; max-width: 7.2rem; min-width: 0; flex: 0 1 auto; }
  .nav .bouton { padding: 0 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.actions { display: flex; gap: 1.2rem; margin: 0.5rem 0 0; }
.lien-action { font: inherit; font-size: 0.9rem; font-weight: 650; color: var(--texte-2); background: none; border: 0; padding: 0.5rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-action:hover { color: var(--accent); }
.lien-action[aria-pressed="true"] { color: var(--accent); text-decoration: none; }
@media (min-width: 901px) { .themes { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 640px) { .filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; } .filtres .puce { flex: none; } }

.commune-reponse p { margin: 0 0 0.8rem; max-width: 40ch; }
.commune-reponse:empty { display: none; }
.colonnes > *, .evt > div, .fil li { min-width: 0; }
.evt h3, .evt .par { overflow-wrap: anywhere; }

/* Choix de la commune dans la liste officielle (VVDN 3498) */
.choix-commune { position: relative; }
.communes-liste {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem; list-style: none;
  background: var(--surface); border: 1.5px solid var(--ligne); border-radius: var(--r-champ); box-shadow: var(--ombre);
  max-height: 18rem; overflow-y: auto;
}
.communes-liste li { padding: 0.65rem 0.75rem; border-radius: 8px; cursor: pointer; min-height: 44px; }
.communes-liste li small { color: var(--texte-2); margin-left: 0.3rem; }
.communes-liste li[aria-selected="true"], .communes-liste li:hover { background: var(--accent-doux); }
.communes-liste li.vide { cursor: default; color: var(--texte-2); }
.communes-liste li.vide:hover { background: none; }

/* Mises en avant (VSSV 4040) : en tête de la page commune, marquées « Mis en avant » */
.en-avant { margin: 0 0 2rem; }
.vitrine {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--r-carte); padding: 1rem 1.1rem;
}
.vitrine > div { min-width: 0; flex: 1 1 14rem; }
.vitrine h3 { margin: 0 0 0.2rem; overflow-wrap: anywhere; }
.vitrine .meta { font-size: 0.92rem; color: var(--texte-2); margin: 0; }
.vitrine a.badge { text-decoration: none; }
@media (max-width: 640px) { .vitrine .bouton { width: 100%; } }

/* « Toute l'année » (VSSV 4058) : une carte par adresse, rangée par rubrique */
.adresses { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.adresse {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; height: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1rem 1.1rem;
}
.adresse-avant { border: 1.5px solid var(--accent); }
.adresse > div { min-width: 0; flex: 1 1 12rem; }
.adresse h4 { margin: 0 0 0.2rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.adresse .meta { font-size: 0.92rem; color: var(--texte-2); margin: 0 0 0.2rem; }
.adresse a.badge { text-decoration: none; }
.adresse .bouton { min-height: 44px; }
.horaires summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; min-height: 32px; }
.horaires p { margin: 0.2rem 0 0.3rem; font-size: 0.92rem; color: var(--texte-2); }
.contacts { margin: 0.3rem 0 0; font-size: 0.95rem; font-weight: 600; }
.rubrique .par { font-size: 0.82rem; color: var(--texte-2); margin: 0.6rem 0 0; }
@media (max-width: 760px) { .adresses { grid-template-columns: 1fr; } .adresse .bouton { width: 100%; } }

/* Un élément masqué l'est toujours, même quand sa classe lui donne un display (formulaire Publier, VSSV 4056). */
[hidden] { display: none !important; }
.choix.choix-jours { grid-template-columns: repeat(7, 1fr); gap: 0.4rem; }
.choix-jours label { justify-content: center; padding: 0.5rem 0.3rem; gap: 0.35rem; }
@media (max-width: 640px) { .choix.choix-jours { grid-template-columns: repeat(4, 1fr); } }

/* Accueil (VVDN 4107) : sections « autour de vous » */
.section-tete { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.section-tete > div:first-child { max-width: 46rem; }
.section-tete h2 { margin: 0 0 0.4rem; }
.sous-titre { margin: 0; color: var(--texte-2); text-wrap: pretty; }
.sous-titre a, .commune-reponse a, .filtre-actif a { color: var(--accent); font-weight: 650; }
.section-pied { margin: 1.4rem 0 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 700; color: var(--accent); text-decoration: none; }
.lien-fleche::after { content: "→"; transition: transform 0.2s ease; }
.lien-fleche:hover::after { transform: translateX(3px); }
.lien-bouton { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0 0.2rem; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.commune-reponse { margin-top: 1rem; max-width: 36rem; }
.commune-reponse p { margin: 0; }
.onglets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.onglets .puce { min-height: 44px; }
.filtre-actif { margin: -0.6rem 0 1rem; color: var(--texte-2); }

.section-sorties { padding-top: 4.5rem; }
.agenda { gap: 0.9rem 1.2rem; }
.evt { position: relative; overflow: hidden; }
a.evt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cat, var(--ligne)); }
.evt-marche { --cat: #c9785c; } .evt-concert { --cat: #7a5c8e; } .evt-nature { --cat: #3f7d5a; } .evt-sport { --cat: #3d6e8f; }
.evt-culture { --cat: #b08a3e; } .evt-terroir { --cat: #8e4b4b; } .evt-autre { --cat: #8a938d; }
.cat { font-weight: 700; color: var(--texte); }
.cat::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--cat, var(--ligne)); margin-right: 0.4rem; vertical-align: 0.05em; }

/* Envies : grandes cartes illustrées, la première plus large */
.section-envies { background: var(--teinte); }
.envies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.envies li:first-child { grid-column: span 2; grid-row: span 2; }
.envies-fin-2 li:last-child { grid-column: span 2; } .envies-fin-3 li:last-child { grid-column: span 3; } .envies-fin-4 li:last-child { grid-column: span 4; }
.envies-peu { grid-template-columns: repeat(var(--n, 4), 1fr); } .envies-peu li:first-child { grid-column: auto; grid-row: auto; }
.envies-1 { --n: 1; } .envies-2 { --n: 2; } .envies-3 { --n: 3; }
.envies-peu .envie { min-height: 220px; }
.envie {
  position: relative; display: flex; align-items: flex-end; min-height: 190px; height: 100%; overflow: hidden;
  border-radius: var(--r-carte); text-decoration: none; color: #fff; background: var(--profond); isolation: isolate;
}
.envie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.4s ease; }
.envie::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 28 21 / 0) 30%, rgb(13 28 21 / 0.82) 100%); }
.envie:hover img { transform: scale(1.04); }
.envie-texte { display: grid; gap: 0.15rem; padding: 1rem 1.1rem; }
.envie-titre { font-family: var(--titre); font-size: 1.3rem; font-weight: 650; line-height: 1.15; }
.envies li:first-child .envie-titre { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.envie-compte { font-size: 0.9rem; color: #e4ece6; }
.envie-illustration { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.72rem; color: #fff; background: rgb(13 28 21 / 0.55); padding: 0.05rem 0.45rem; border-radius: 4px; }
.envie-sans-image { background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); border-top: 4px solid var(--terre); }
@media (max-width: 1100px) { .envie.envie-sans-image { min-height: 96px; } }
.envie-sans-image::after { display: none; }
.envie-sans-image .envie-compte { color: var(--texte-2); }

/* Bonnes adresses */
.adresses-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.adr { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.1rem 1.2rem; }
.adr h3 { font-size: 1.15rem; overflow-wrap: anywhere; }
.adr-rub { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--terre-texte); }
.adr .meta { margin: 0; font-size: 0.92rem; color: var(--texte-2); }
.adr-badges { margin: 0.6rem 0 0; }
.adr-lien { margin-top: auto; padding-top: 0.8rem; min-height: 44px; display: inline-flex; align-items: flex-end; font-weight: 700; color: var(--accent); text-decoration: none; }
.adr-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Partenaire VivaComptoir (VVDN 4111) : « Commander » et la fiche VivaCorner, sous le lien de la fiche. */
.adr-action { margin-top: 0.8rem; align-self: flex-start; min-height: 44px; }
.adr-action ~ .adr-lien { margin-top: 0; padding-top: 0.3rem; }
.lien-vivacorner { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0.6rem; font-weight: 700; color: var(--accent); }
.badge-partenaire { background: var(--accent-doux); color: var(--texte); }
a.badge-partenaire { text-decoration: none; }
a.badge-partenaire:hover, a.badge-partenaire:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.badge-ambassadeur { background: var(--bouton); color: var(--bouton-texte); }
.badge-direct { background: var(--bouton); color: var(--bouton-texte); }
.badge-avant { background: var(--terre-doux); color: var(--texte); text-decoration: none; }

/* Rendez-vous de chaque semaine et « à la une » : liste éditoriale */
.reguliers, .une { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; border-top: 1px solid var(--ligne); }
.reguliers li, .une li { border-bottom: 1px solid var(--ligne); }
.reguliers a, .une a { display: grid; gap: 0.1rem; padding: 1rem 0; text-decoration: none; min-height: 44px; }
.reguliers a:hover .reg-titre, .une a:hover .reg-titre { color: var(--accent); }
.reg-quand { font-size: 0.85rem; font-weight: 700; color: var(--terre-texte); }
.reg-titre { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.reguliers .meta, .une .meta { font-size: 0.9rem; color: var(--texte-2); }

/* Publier gratuitement : trois entrées */
.section-publier { background: var(--profond); color: var(--profond-texte); }
.section-publier .sous-titre { color: var(--profond-2); max-width: 60ch; }
.section-publier .sous-titre a { color: var(--profond-texte); }
.publier-tete { margin-bottom: 1.8rem; }
.publier-choix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.publier-choix a {
  display: grid; gap: 0.35rem; height: 100%; padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--r-carte); text-decoration: none;
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.16); transition: background-color 0.2s ease, border-color 0.2s ease;
}
.publier-choix a:hover { background: rgb(255 255 255 / 0.11); border-color: var(--terre); }
.publier-qui { font-size: 0.85rem; font-weight: 700; color: #e8a386; }
.publier-quoi { font-family: var(--titre); font-size: 1.45rem; font-weight: 650; line-height: 1.15; }
.publier-quoi::after { content: "\00a0→"; color: #e8a386; }
.publier-detail { color: var(--profond-2); font-size: 0.95rem; }

/* Partenaires : une rangée mesurée */
.partenaires { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.partenaires li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--ligne); border-radius: var(--r-carte); background: var(--surface); }
.partenaires .badge { align-self: flex-start; margin-bottom: 0.6rem; }
.partenaires .meta { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--texte-2); }
.partenaires .bouton { margin-top: auto; min-height: 44px; }

@media (max-width: 1100px) {
  .envies:not(.envies-peu) { grid-template-columns: repeat(2, 1fr); }
  .envies li:first-child { grid-row: auto; }
  .envies:not(.envies-peu) li:last-child { grid-column: auto; }
  .envies-impair:not(.envies-peu) li:last-child { grid-column: span 2; }
  .envies li:first-child .envie { min-height: 260px; }
  .partenaires { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .adresses-grille { grid-template-columns: repeat(2, 1fr); }
  .publier-choix { grid-template-columns: 1fr; }
  .reguliers, .une { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .adresses-grille, .partenaires { grid-template-columns: 1fr; }
  .envies, .envies:not(.envies-peu) { grid-template-columns: 1fr; gap: 0.7rem; }
  .envies li:first-child, .envies li:last-child, .envies-impair:not(.envies-peu) li:last-child { grid-column: auto; }
  .envie, .envies li:first-child .envie, .envies-peu .envie { min-height: 140px; }
  .envies li:first-child .envie-titre { font-size: 1.5rem; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 0.2rem; }
  .onglets .puce { flex: none; padding: 0 0.95rem; }
  .heros-zone { position: static; margin-top: 0.7rem; max-width: none; font-size: 0.92rem; padding: 0.55rem 0.8rem; box-shadow: none; }
  .section-tete { margin-bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .envie img { transition: none; } }

/* Page de commune, nouveau modèle (VVDN 4108) */
.meta-tete { color: var(--texte-2); margin: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.tete-image { margin: 0; }
.tete-image img { width: 100%; }
.tete-image figcaption { font-size: 0.8rem; color: var(--texte-2); margin-top: 0.35rem; }
.nav-page { position: sticky; top: 0; z-index: 5; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.nav-page .conteneur { display: flex; gap: 0.25rem; overflow-x: auto; }
.nav-page a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.9rem; font-weight: 600; color: var(--texte); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav-page a:hover { border-bottom-color: var(--terre); }
.bloc-page { padding: 2.5rem 0 0.5rem; scroll-margin-top: 56px; }
.bloc-page h2 { margin-bottom: 0.4rem; }
.barre-filtres { display: grid; gap: 0.8rem; margin: 1rem 0 0.4rem; }
.filtre-nom { display: block; font-size: 0.85rem; font-weight: 700; color: var(--texte-2); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; }
.barre-filtres .filtres { margin: 0; }
.etat-filtres { font-size: 0.88rem; color: var(--texte-2); margin: 0 0 0.5rem; min-height: 1.2em; }
.rubrique-titre { font-size: 1.15rem; margin: 1.8rem 0 0.8rem; }
.rubrique-titre .compte { font-size: 0.85rem; color: var(--texte-2); font-weight: 500; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.infos div { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 0.8rem 1rem; }
.infos dt { font-size: 0.82rem; color: var(--texte-2); }
.infos dd { margin: 0.1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-leaflet { height: 360px; border-radius: var(--r-carte); border: 1px solid var(--ligne); margin-top: 0.8rem; }
.voisines { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.4rem 1.5rem; }
.voisines li { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 640px) { .carte-leaflet { height: 240px; } .nav-page a { padding: 0 0.7rem; } }
.barre-filtres > *, .colonne-page > *, .bloc-page > * { min-width: 0; }
.colonne-page > * { max-width: 860px; }

/* Retouches du lot 4 (VVDN 4109) : le `section { padding: 4rem 0 }` global gonflait les groupes de semaines et les rubriques ;
   la colonne de droite d'une page de commune, vide sur ordinateur, porte maintenant un encart « Participer ». */
.groupe, .rubrique { padding: 0; }
.colonne-main > * { max-width: 860px; min-width: 0; }
.colonne-cote { margin-top: 2rem; }
@media (min-width: 1100px) {
  .colonne-page { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; align-items: start; }
  .colonne-page > .colonne-cote { position: sticky; top: 72px; margin-top: 2.5rem; }
}
.encart { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.2rem 1.3rem; margin: 0 0 1rem; }
.encart h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.encart p { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--texte-2); }
.encart .bouton { width: 100%; min-height: 44px; }
.ici-ma-commune { margin: 0.6rem 0 0; font-size: 0.92rem; }
.ici-ma-commune button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0.5rem 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Fiches lieu et événement (VVDN 4109, lot 4) */
.page-fiche { padding: 1.5rem 0 3rem; }
.ariane { font-size: 0.9rem; color: var(--texte-2); margin: 0 0 1.2rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.ariane li + li::before { content: "›"; margin-right: 0.5rem; }
.ariane a { display: inline-flex; align-items: center; min-height: 32px; }
.ariane [aria-current] { color: var(--texte); }
.fiche { max-width: 52rem; }
.fiche-tete .badges { margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fiche-tete .badges .badge { margin-right: 0; }
.fiche-photo { margin: 0 0 1rem; max-width: 40rem; }
.fiche-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-carte); background: var(--surface); }
.fiche-photo figcaption { margin-top: 0.3rem; }
.reservable-vignette { flex: 0 0 auto; }
.reservable-vignette img { display: block; width: 6rem; height: auto; max-height: 6rem; object-fit: cover; border-radius: var(--r-carte); }
.fiche-tete h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.fiche-tete .intro { margin: 0 0 1.2rem; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0.4rem; }
.fiche-actions .bouton { min-height: 48px; }
.fiche-actions [hidden] { display: none; }
.fiche-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; margin: 1.5rem 0; }
.fiche-infos div { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 0.8rem 1rem; min-width: 0; }
.fiche-infos dt { font-size: 0.82rem; font-weight: 700; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.05em; }
.fiche-infos dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.fiche-corps h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
.fiche-corps p { max-width: 42rem; }
.fiche-source { font-size: 0.9rem; color: var(--texte-2); border-top: 1px solid var(--ligne); padding-top: 0.9rem; margin-top: 2rem; }
.fiche-source p { margin: 0 0 0.4rem; max-width: none; }
.fiche-autres { margin-top: 2.5rem; }
.fiche-autres h2 { font-size: 1.2rem; }
.fiche-autres .fil { margin-top: 0.8rem; }
.fiche-vide { color: var(--texte-2); font-style: italic; }
.evt h3 a, .adresse h4 a { color: inherit; text-decoration: none; }
.evt h3 a:hover, .adresse h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.evt .par a.plus { font-weight: 600; }
@media (max-width: 640px) { .fiche-actions .bouton { width: 100%; } }

/* Texte long d'une fiche : la suite se déplie (VVDN 4176) */
.fiche-corps .suite { max-width: 42rem; margin: 0 0 1rem; }
.fiche-corps .suite summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* Publier : sortie peut-être déjà annoncée (VVDN 4168) */
.doublon { background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--accent); border-radius: var(--r-carte); padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.doublon[hidden] { display: none; }

/* Signaler une fiche (VVDN 4169) : un motif par ligne */
.choix-colonne { grid-template-columns: 1fr; }

/* Rubriques de l'en-tête sous 900 px (VVDN 4196) : barre fine, pastille de commune juste après le logo. */
.nav-rubriques { display: none; gap: 0.1rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ligne); background: var(--fond); padding: 0 0.6rem; }
.nav-rubriques::-webkit-scrollbar, .onglets::-webkit-scrollbar { display: none; }
.nav-rubriques a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; font-weight: 600; font-size: 0.92rem; color: var(--texte); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav-rubriques a:hover { border-bottom-color: var(--terre); }
.entete .ma-commune { margin-left: 0.2rem; }
.heros-zone [data-voir-page] { margin-left: 0.3rem; gap: 0.3em; }
@media (max-width: 900px) { .nav-rubriques { display: flex; } }
.jours-court { display: none; }
@media (max-width: 640px) {
  .jours-long { display: none; }
  .jours-court { display: inline; }
  .onglets { scrollbar-width: none; gap: 0.3rem; }
  .onglets .puce { padding: 0 0.6rem; font-size: 0.92rem; }
  .heros-zone { gap: 0 0.9rem; }
  .heros-zone [data-voir-page] { margin-left: 0; }
}

/* Aucune adresse connue : un encart qui invite à ajouter la sienne (VVDN 4197). */
.encart-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; background: var(--teinte); border: 1.5px dashed var(--ligne); border-radius: var(--r-carte); padding: 1.2rem 1.4rem; }
.encart-ajout p { margin: 0; flex: 1 1 18rem; color: var(--texte); }
.encart-ajout .bouton { flex: 0 0 auto; }
@media (max-width: 640px) { .encart-ajout .bouton { width: 100%; } }
.encart-ajout .bouton { white-space: normal; text-align: center; height: auto; padding-top: 0.65rem; padding-bottom: 0.65rem; }

/* Page de commune (VVDN 4237) : dates choisies, thèmes multiples, carte sous les filtres, commerces en tête, questions fréquentes. */
.filtre-aide { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 0.4rem; }
.choix-dates { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.choix-dates label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.choix-dates input { min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--ligne); border-radius: var(--r-champ); background: var(--surface); color: var(--texte); font: inherit; font-variant-numeric: tabular-nums; }
.carte-zone { margin: 0.4rem 0 0.6rem; scroll-margin-top: 56px; }
.carte-zone .carte-leaflet { margin-top: 0.5rem; }
.carte-zone #note-carte { margin: 0.4rem 0 0; font-size: 0.85rem; }
.carte-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.88rem; color: var(--texte-2); }
.carte-legende span, .carte-legende label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; }
.carte-legende label { cursor: pointer; color: var(--texte); font-weight: 600; }
.carte-legende input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); margin: 0; }
.pastille-carte { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid; }
.pastille-ici { background: #c9785c; border-color: #a9583b; }
.pastille-sorties { background: #256a4e; border-color: #193c2d; }
.pastille-commerces { background: #e8a386; border-color: #a9583b; width: 0.65rem; height: 0.65rem; border-width: 1.5px; }
/* Bandeau des commerces : une carte de mise en avant, pas un encadré d'alerte (VVDN 4889 : le fond rosé et le filet gauche
   « faisaient bandeau d'alerte »). Le nombre en titre, l'adresse à la une en pastille verte. */
.bandeau-commerces { margin-top: 0.9rem; padding: 0.85rem 1.1rem 0.95rem; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); box-shadow: var(--ombre); }
.bandeau-commerces p { margin: 0; }
.bandeau-commerces > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; color: var(--texte-2); }
.bandeau-commerces a { color: var(--texte); }
.bandeau-commerces > p:first-child > a:first-child { font-family: var(--titre); font-size: 1.2rem; color: var(--titre-couleur); text-decoration: none; }
.bandeau-commerces > p:first-child > a:first-child b { font-weight: 650; }
.bandeau-commerces > p:first-child > a:first-child:hover { color: var(--accent); }
.bandeau-commerces > p:first-child > a:not(:first-child) { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.75rem; border-radius: var(--r-bouton); background: var(--accent-doux); color: var(--accent); font-weight: 650; text-decoration: none; }
.bandeau-commerces > p:first-child > a:not(:first-child):hover { background: var(--accent); color: var(--accent-texte); }
.puces-commerces { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem !important; }
.puces-commerces .puce { text-decoration: none; background: var(--teinte); border-color: transparent; }
.puces-commerces .puce:hover { border-color: var(--accent); }
/* Une adresse montrée depuis la carte (« Voir dans la liste ») se repère un instant. */
.adresse-montree > .adresse { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-carte); }
.puces-commerces .compte { color: var(--texte-2); font-weight: 500; margin-left: 0.25rem; }
.faq { display: grid; gap: 0.5rem; margin-top: 1rem; }
.faq details { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 0 1rem; }
.faq summary { cursor: pointer; font-weight: 650; min-height: 48px; display: flex; align-items: center; }
.faq details p { margin: 0 0 0.9rem; color: var(--texte-2); }
@media (max-width: 640px) { #filtres.filtres { flex-wrap: wrap; overflow-x: visible; } } /* thèmes multiples : tous visibles d'un coup d'œil */

/* Page de commune, une seule par commune (VVDN 4293) : agenda au format court de l'accueil (la description et la source sont
   sur la fiche « Détails »), « Voir les autres », liste complète des commerces repliée, colonne seule après les bandes. */
.agenda-court .evt p:not([class]), .agenda-court .evt p.source { display: none; }
.voir-plus { margin: 0.4rem 0 1.4rem; max-width: 100%; white-space: normal; }
.replie-adresses > summary { cursor: pointer; font-weight: 600; padding: 0.8rem 0; color: var(--accent); }
.replie-adresses[open] > summary { margin-bottom: 0.4rem; }
.colonne-seule > .colonne-main { max-width: 860px; }
.colonne-page + section, .section-reguliers + .colonne-seule { margin-top: 2.5rem; }

/* Repère de l'entrée d'une fiche « Toute l'année » (VSSV 4433) */
.position-carte { height: 320px; margin-top: 0.75rem; border: 1px solid var(--ligne); border-radius: 12px; }
.repere-entree span { display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); }
.position-carte .leaflet-control-layers label { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.15rem 0.35rem; font-size: 0.9rem; font-weight: 600; min-height: 0; }
.position-carte .leaflet-control-layers-list, .position-carte .leaflet-control-layers-base { margin: 0; padding: 0; }
.position-carte .leaflet-control-layers-separator { display: none; }

/* Fiche : gérer et signaler en liens discrets sous les boutons (VVDN 4722). */
.fiche-discret { margin: 0.3rem 0 0.8rem; font-size: 0.92rem; color: var(--texte-2); }
.fiche-discret a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.fiche-discret a:hover { color: var(--accent); }
/* « Ajouter à mon agenda » (VLIN 473) : un repli, deux liens de 44 px, sans JavaScript. */
.agenda-ajout { margin: 0.2rem 0 0.6rem; }
.agenda-ajout summary { cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; list-style: none; }
.agenda-ajout summary::-webkit-details-marker { display: none; }
.agenda-ajout ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.agenda-ajout li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .agenda-ajout summary { width: 100%; justify-content: center; } }
/* « Je gère cette fiche » (VLIN 381) : un vrai bouton au trait sous les actions de la fiche, avec ce que ça rapporte ; en 390 pleine largeur. */
.fiche-revendiquer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.2rem 0 0.8rem; }
.fiche-revendiquer .bouton { min-height: 48px; }
.fiche-revendiquer .meta { margin: 0; flex: 1 1 14rem; }
@media (max-width: 640px) { .fiche-revendiquer .bouton { width: 100%; } .fiche-revendiquer .meta { flex-basis: 100%; } }
/* Formulaire de revendication raccourci (VLIN 381) : les précisions facultatives derrière une ligne de 44 px. */
.form-page summary.precisions-lieu { cursor: pointer; min-height: 44px; display: flex; align-items: center; margin: 0 0 0.6rem; font-weight: 600; color: var(--accent); }

/* En-tête de commune compact (VVDN 4722) : pas de photo de paysage, un bandeau sobre sur sauge, filet terracotta ;
   une photo de la commune ne reviendra que vraie et avec ses droits. Les premiers résultats remontent d'autant. */
.commune-tete-compacte { padding: 1.4rem 0 1.1rem; background: var(--teinte); border-bottom: 3px solid var(--terre); }
.commune-tete-compacte .conteneur { grid-template-columns: minmax(0, 1fr); gap: 0; }
.commune-tete-compacte .conteneur > * { min-width: 0; }
.commune-tete-compacte h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 0.3rem; }
.commune-tete-compacte .intro { font-size: 1.05rem; }
.tete-lieu { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--terre-texte); }
.tete-lieu a { font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }
.commune-tete-compacte .bandeau-commerces { margin-top: 0.7rem; }
@media (max-width: 640px) {
  .commune-tete-compacte { padding: 1rem 0 0.8rem; }
  .commune-tete-compacte .meta-tete { font-size: 0.88rem; }
  /* Les rubriques de commerces sur une ligne qui défile, au lieu de trois étages avant l'agenda. */
  .commune-tete-compacte .puces-commerces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .commune-tete-compacte .puces-commerces .puce { flex: none; }
  .bandeau-commerces > p:first-child > .meta { display: none; }
}

/* Accueil (VVDN 4722) : l'image du héros s'efface dès qu'une commune est choisie, et toujours sur téléphone ;
   reste le rappel « Vous regardez … », en carte simple. */
.heros-choisi { padding: 2rem 0 1.5rem; }
.heros-choisi .conteneur { grid-template-columns: minmax(0, 46rem); gap: 1rem; }
.heros-choisi h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 0.8rem; }
.heros-choisi p.chapo { margin-bottom: 1.2rem; }
.heros-choisi .heros-image img { display: none; }
.heros-choisi .heros-zone { position: static; max-width: none; box-shadow: none; }
@media (max-width: 640px) {
  .heros-image img { display: none; }
  .heros-image .heros-zone { position: static; max-width: none; box-shadow: none; }
  .heros { padding-bottom: 1.5rem; }
  .heros-choisi p.chapo { display: none; }
}

/* Page de commune au format liste et carte (VVDN 4807, maquette validée par David le 20/10/2026) :
   filtres en haut, ruban de 14 jours, liste à gauche, carte à droite qui reste à l'écran ; sur téléphone, la carte au-dessus. */
.plan-commune { padding: 1.5rem 0 0.5rem; scroll-margin-top: 56px; }
.plan-commune > .conteneur > h2 { margin: 0 0 0.6rem; }
.plan-filtres { margin-top: 0.4rem; }
.plan-filtres .filtre { min-width: 0; }
.ruban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.2rem, 1fr); gap: 0.3rem; overflow-x: auto; margin-top: 0.55rem; padding-bottom: 0.2rem; scrollbar-width: thin; }
.jour-ruban { border: 1.5px solid var(--ligne); background: var(--surface); color: var(--texte); border-radius: 10px; padding: 0.35rem 0.1rem; text-align: center; cursor: pointer; min-height: 4rem; line-height: 1.15; font: inherit; }
.jour-ruban small { display: block; font-size: 0.75rem; color: var(--texte-2); }
.jour-ruban b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.jour-ruban i { display: block; font-style: normal; font-size: 0.72rem; color: var(--terre-texte); font-weight: 700; }
.jour-ruban.jour-we { border-color: var(--terre); }
.jour-ruban:hover { border-color: var(--texte); }
.jour-ruban[aria-pressed="true"] { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); }
.jour-ruban[aria-pressed="true"] small, .jour-ruban[aria-pressed="true"] i { color: inherit; }
.jour-ruban:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pastille-rubrique { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.05em; }
.seule { margin: 0 0 0.6rem; }
.plan { display: grid; gap: 1.2rem; align-items: start; }
.plan-carte { margin: 0; }
.plan-carte .carte-leaflet { height: 300px; margin-top: 0; }
.plan-liste { min-width: 0; }
.plan-liste .groupe-jour .rubrique-titre { margin: 1.2rem 0 0.7rem; color: var(--terre-texte); }
.plan-liste .groupe-jour:first-child .rubrique-titre { margin-top: 0.4rem; }
.plan-liste .evt .jour { border-left: 4px solid transparent; }
/* Ligne d'adresse (VLIN 513) : une colonne, la rubrique en texte coloré avec son icône, plus de pastille à lettre. */
.evt-adresse { grid-template-columns: 1fr; gap: 0; }
.evt-adresse > div { min-width: 0; }
.adr-rubrique { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 700; }
.adr-icone { flex: none; }
.badge-doux { background: var(--terre-doux); }
.epingle { border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 13px "Figtree", system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); transition: opacity 0.15s; }
.epingle-ici { box-shadow: 0 0 0 3px #193c2d, 0 1px 4px rgb(0 0 0 / 0.35); }
.encarts-plan { display: grid; gap: 1rem; margin-top: 2rem; }
.encarts-plan .encart { margin: 0; }
@media (min-width: 720px) { .encarts-plan { grid-template-columns: 1fr 1fr; } .encarts-plan .encart .bouton { width: auto; } }
@media (max-width: 899px) {
  .plan-filtres .filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; }
  .plan-filtres .filtres .puce { flex: none; }
}
@media (min-width: 900px) {
  .plan-filtres { gap: 0.55rem; }
  .plan-filtres .filtre { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; column-gap: 0.6rem; }
  .plan-filtres .filtre-nom { margin: 0; }
  .plan-filtres .filtre-aide { display: block; margin: 0; font-size: 0.75rem; }
  .plan-filtres .ruban { grid-column: 2; margin-top: 0.4rem; }
  .plan-filtres .puce { min-height: 38px; }
  .jour-ruban { min-height: 3.4rem; padding: 0.25rem 0.1rem; }
}
@media (max-width: 899px) { .plan-filtres #filtres.filtres { flex-wrap: nowrap; overflow-x: auto; } } /* téléphone : une ligne qui défile, la carte reste près */
/* Contre-audit, lot 3 (VVDN 4851) : quand et rayon restent visibles ; envies (sorties) et adresses se replient dans « Filtres ». */
.panneau-filtres { border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface); }
.panneau-filtres > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.9rem; font-weight: 650; }
.panneau-filtres > summary::after { content: "▾"; margin-left: auto; color: var(--texte-2); }
.panneau-filtres[open] > summary::after { content: "▴"; }
.panneau-filtres .filtres-compte { color: var(--terre-texte); font-weight: 600; }
.panneau-filtres > .filtre { padding: 0 0.9rem 0.7rem; display: grid; gap: 0.3rem; }
.panneau-filtres > .filtre[hidden] { display: none; }

/* Encart « Vous êtes ce professionnel ? » d'une fiche non partenaire (ASDC 4864) : discret, une phrase, un lien. */
.encart-pro { margin: 1.6rem 0 0; padding: 1rem 1.2rem; background: var(--teinte); border-radius: 12px; }
.encart-pro h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.encart-pro p { margin: 0 0 0.6rem; }
.encart-pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0 !important; }
.encart-pro-liste { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.encart-pro-liste li { margin: 0 0 0.25rem; }
.encart-pro-relier { color: var(--texte-2); }
.encart-pro .lien-discret { color: var(--texte-2); }
.encart-pro-actions .bouton { white-space: normal; text-align: center; }

/* Lieux nommés dans la bulle de la carte de l'accueil (VVDN 4898) */
.pop-lieux { list-style: none; margin: 0.4rem 0; padding: 0; max-height: 9rem; overflow: auto; }
.pop-lieux li { margin: 0.15rem 0; line-height: 1.3; }

/* Page de commune : bandeau court, deux vues, barre compacte, filtres en dialogue, « en pratique » replié (VVDN 4934). */
.commune-tete-courte { padding: 1.1rem 0 0.9rem; }
.commune-tete-courte h1 { margin: 0.1rem 0 0.2rem; }
.commune-tete-courte .intro { margin: 0; font-size: 1rem; }
.commune-tete-courte .tete-lieu { min-height: 0; }
.tete-liens { margin: 0.15rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; color: var(--texte-2); }
.tete-liens a { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.plan-commune[data-vue="sorties"] [data-vue="adresses"], .plan-commune[data-vue="adresses"] [data-vue="sorties"] { display: none; }
.onglets-vue { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--ligne); margin: 0 0 0.8rem; }
.onglets-vue[hidden] { display: none; }
.onglets-vue [role="tab"] { font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--texte-2); background: none; border: 0; border-bottom: 3px solid transparent; min-height: 48px; padding: 0 1.1rem; margin-bottom: -1px; cursor: pointer; }
.onglets-vue [role="tab"][aria-selected="true"] { color: var(--titre-couleur); border-bottom-color: var(--terre); }
.onglets-vue [role="tab"]:hover { color: var(--texte); }
.barre-compacte { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.8rem; margin: 0 0 0.5rem; }
.barre-nom { font-size: 0.8rem; font-weight: 700; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.04em; }
.choix-periode { position: relative; }
.choix-periode[hidden] { display: none; }
.choix-periode > summary, .bouton-filtres { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--ligne); border-radius: var(--r-bouton); background: var(--surface); color: var(--texte); font: inherit; font-weight: 650; cursor: pointer; list-style: none; }
.choix-periode > summary::-webkit-details-marker { display: none; }
.choix-periode > summary::after { content: "▾"; color: var(--texte-2); }
.choix-periode[open] > summary::after { content: "▴"; }
.choix-periode > summary:hover, .bouton-filtres:hover { border-color: var(--texte); }
.choix-periode-corps { position: absolute; z-index: 1000; top: calc(100% + 0.4rem); left: 0; width: min(42rem, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); box-shadow: var(--ombre); padding: 0.8rem; }
.choix-periode-corps .filtres { margin: 0; flex-wrap: wrap; }
.ruban-aide { margin: 0.7rem 0 0; }
.choix-rayon { display: flex; align-items: center; gap: 0.5rem; }
.choix-rayon[hidden] { display: none; }
.choix-rayon .filtres { margin: 0; flex-wrap: nowrap; }
.choix-rayon .puce { min-height: 44px; }
.bouton-filtres .filtres-compte { color: var(--terre-texte); }
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.filtres-actifs[hidden] { display: none; }
.puce-active { background: var(--accent-doux); border-color: transparent; }
.dialogue-filtres { width: min(38rem, calc(100vw - 1.5rem)); max-height: min(85vh, 46rem); padding: 0; border: 0; border-radius: var(--r-carte); background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.dialogue-filtres::backdrop { background: rgb(25 60 45 / 0.45); }
.dialogue-filtres[open] { display: flex; flex-direction: column; }
.dialogue-tete { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.6rem 0.4rem 1.1rem; border-bottom: 1px solid var(--ligne); }
.dialogue-tete h2 { margin: 0; font-size: 1.35rem; }
.dialogue-fermer { font: inherit; font-size: 1.2rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--texte); cursor: pointer; }
.dialogue-fermer:hover { background: var(--teinte); }
.dialogue-corps { overflow-y: auto; padding: 0.9rem 1.1rem; display: grid; gap: 1rem; }
.dialogue-corps .filtre { display: grid; gap: 0.35rem; }
.dialogue-corps .filtre[hidden] { display: none; }
.dialogue-corps .filtres { flex-wrap: wrap; overflow: visible; margin: 0; }
.dialogue-corps .puce { min-height: 44px; }
.dialogue-pied { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--ligne); }
.seule { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.seule b { font-family: var(--titre); font-size: 1.15rem; color: var(--titre-couleur); }
.annuaire { padding-top: 0.5rem; }
.annuaire .bloc-page:first-child { padding-top: 1.5rem; }
.annuaire > .encart-ajout { margin-top: 1.5rem; }
.en-pratique { padding: 2.5rem 0 1rem; scroll-margin-top: 56px; }
.en-pratique h2 { margin: 0 0 0.8rem; }
.accordeons { display: grid; gap: 0.5rem; }
.accordeons > details { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 0 1rem; scroll-margin-top: 56px; }
.accordeons > details > summary { cursor: pointer; font-weight: 700; min-height: 52px; display: flex; align-items: center; font-size: 1.05rem; }
.accordeons > details[open] { padding-bottom: 0.9rem; }
.accordeons .faq { margin-top: 0.2rem; }
.rappel-publier { margin: 1.4rem 0 0; color: var(--texte-2); }
.rappel-publier a { color: var(--accent); font-weight: 650; }
.rappel-erreur { display: inline-block; }
@media (max-width: 640px) {
  .barre-compacte { gap: 0.5rem; }
  .choix-rayon .barre-nom { display: none; }
  .choix-rayon .puce { padding: 0 0.7rem; }
  .onglets-vue [role="tab"] { flex: 1 1 0; }
  .dialogue-filtres { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-carte) var(--r-carte) 0 0; }
}
@media (min-width: 720px) {
  .commune-tete-courte { padding: 0.9rem 0 0.7rem; }
  .commune-tete-courte .intro { display: inline; margin-right: 0.9rem; }
  .commune-tete-courte .tete-liens { display: inline-flex; margin: 0; }
  .commune-tete-courte .tete-liens a { min-height: 32px; }
}

/* Panneau « Changer de commune » (VLIN 661) : le nom de la commune en tête est un bouton. Feuille du bas sur téléphone,
   menu sous le nom dès 720 px (position posée par changer-commune.js : --haut, --gauche). */
.nom-commune { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0 0.1em; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; text-align: left; border-bottom: 2px dashed var(--accent); border-radius: 2px; }
.nom-commune svg { flex: none; color: var(--accent); width: 0.6em; height: 0.6em; min-width: 20px; min-height: 20px; }
.nom-commune:hover { background: var(--accent-doux); }
.nom-commune:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dialogue-commune { width: min(30rem, calc(100vw - 1.5rem)); max-height: min(85vh, 40rem); padding: 0; border: 0; border-radius: var(--r-carte); background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.dialogue-commune::backdrop { background: rgb(25 60 45 / 0.35); }
.dialogue-commune[open] { display: flex; flex-direction: column; }
.dialogue-commune .dialogue-corps h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--texte-2); text-transform: none; letter-spacing: 0; }
.commune-chercher { display: grid; gap: 0.35rem; position: relative; }
.commune-chercher label { font-weight: 700; }
.commune-propositions { list-style: none; margin: 0; padding: 0.25rem; border: 1px solid var(--ligne); border-radius: var(--r-carte); background: var(--surface); max-height: 14rem; overflow-y: auto; }
.commune-propositions[hidden] { display: none; }
.commune-propositions li { padding: 0.6rem 0.75rem; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; border-radius: 6px; cursor: pointer; }
.commune-propositions li small { color: var(--texte-2); }
.commune-propositions li[aria-selected="true"], .commune-propositions li:hover { background: var(--accent-doux); }
.commune-propositions li.vide { cursor: default; color: var(--texte-2); }
.commune-moi { justify-self: start; min-height: 44px; }
.commune-voir { margin: 0 0 0.9rem; }
.commune-voir .bouton { min-height: 44px; display: inline-flex; align-items: center; }
.commune-voir[hidden] { display: none; }
.ma-commune:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dialogue-commune .meta:empty { display: none; }
.commune-moi[hidden], #bloc-voisines[hidden], #bloc-vues[hidden] { display: none; }
.commune-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.commune-puces .puce { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--texte); }
@media (max-width: 719px) {
  .dialogue-commune { width: 100vw; max-width: 100vw; max-height: 90vh; margin: auto 0 0; border-radius: var(--r-carte) var(--r-carte) 0 0; }
}
@media (min-width: 720px) {
  .dialogue-commune { position: fixed; inset: auto; top: var(--haut, 8rem); left: var(--gauche, 2rem); margin: 0; }
  .dialogue-commune::backdrop { background: transparent; }
}

/* Page de commune : carte panoramique pleine largeur, « Agrandir la carte », grille de 6 fiches (VVDN 4935). La place de la
   carte est réservée avant Leaflet : rien ne saute à son arrivée. */
.plan { gap: 0.9rem; }
.plan-carte .carte-leaflet { height: 350px; margin-top: 0; }
.carte-cadre { position: relative; z-index: 0; isolation: isolate; /* les repères Leaflet (z 600) passaient sur l'en-tête collant, VVDN 4945 */ min-height: 350px; border-radius: var(--r-carte); background: var(--teinte); }
.carte-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; margin-top: 0.4rem; }
.carte-zone .carte-pied #note-carte { margin: 0; flex: 1 1 18rem; }
.bouton-agrandir { min-height: 44px; }
.recentrer-carte { min-height: 44px; background: var(--surface); color: var(--texte); font-size: 0.85rem; padding: 0.3rem 0.7rem; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.message-carte { max-width: 22rem; margin: 0 0 1.4rem 0.6rem; padding: 0.5rem 0.7rem; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 0.9rem; }
.message-carte[hidden] { display: none; }
.bouton-agrandir[hidden] { display: none; }
.epingle-contexte { background: #9aa39e; opacity: 0.75; font-size: 12px; }
.dialogue-carte { width: calc(100vw - 2rem); max-width: 1400px; height: calc(100vh - 2rem); max-height: none; padding: 0; border: 0; border-radius: var(--r-carte); background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.dialogue-carte::backdrop { background: rgb(25 60 45 / 0.45); }
.dialogue-carte[open] { display: flex; flex-direction: column; }
.dialogue-carte .dialogue-tete { gap: 0.8rem; }
.dialogue-carte .dialogue-tete > div { flex: 1 1 auto; min-width: 0; }
.dialogue-carte .dialogue-tete h2 { font-size: 1.2rem; }
.dialogue-carte .dialogue-tete .meta { margin: 0; font-size: 0.88rem; }
.dialogue-carte .lien-bouton[hidden] { display: none; }
.carte-grande { flex: 1 1 auto; min-height: 0; }
.carte-grande .carte-leaflet { height: 100%; border: 0; border-radius: 0 0 var(--r-carte) var(--r-carte); margin: 0; }
.grille-fiches { display: grid; grid-template-columns: 1fr; gap: 0.9rem; list-style: none; padding: 0; margin: 0.3rem 0 0; }
.grille-fiches > li { min-width: 0; display: flex; }
.grille-fiches .evt { flex: 1 1 auto; height: 100%; }
.plan-liste .evt .jour { border-left: 4px solid transparent; }
.liste-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.9rem 0 1.2rem; }
.liste-pied .voir-plus { margin: 0; }
.liste-pied .meta:empty { display: none; }
.vide-gestes p { margin: 0 0 0.6rem; }
.vide-gestes .gestes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.vide-gestes .bouton { min-height: 44px; }
@media (min-width: 640px) { .grille-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille-fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .plan-carte .carte-leaflet, .carte-cadre { height: 280px; min-height: 280px; }
  .dialogue-carte { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; }
  .carte-grande .carte-leaflet { border-radius: 0; }
  .bouton-agrandir { width: 100%; }
}
/* VLIN 378 : au téléphone, les fiches d'abord. La carte (468 px) passe après la grille des fiches et son « Voir plus », avant la longue liste
   « Dans la commune » ; `.plan-liste` s'efface pour que ses enfants se rangent dans la grille de `.plan`. L'ordre du HTML ne change pas
   (lecteurs d'écran, carte chargée à son arrivée à l'écran par commune.js). */
@media (max-width: 639px) {
  .plan-liste { display: contents; }
  .plan-carte { order: 1; }
  #liste-page { order: 2; }
}

/* Partenaires à réservation intégrée (VVDN 4945, 4966) : un seul signe — carré vert profond, coche blanche, liseré terracotta — dans
   le badge « Partenaire <réseau> », le titre de l'encadré, la légende et le repère de carte. */
.signe-partenaire { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-right: 0.35em; vertical-align: -0.15em; border-radius: 4px; background: #193c2d; box-shadow: 0 0 0 2px var(--terre); }
.signe-partenaire::after { content: "✓"; color: #fff; font: 700 0.7em/1 "Figtree", system-ui, sans-serif; }
.badge-partenaire .signe-partenaire { width: 0.95em; height: 0.95em; box-shadow: 0 0 0 1.5px var(--terre); }
.epingle-partenaire { border-radius: 7px; background: #193c2d; border: 2.5px solid var(--terre); font-size: 14px; }
.legende-carte { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--texte); }
.encadre-reservables { margin: 0.9rem 0; padding: 0.7rem 1rem 0.8rem; border: 1px solid var(--ligne); border-left: 4px solid var(--terre); border-radius: var(--r-carte); background: var(--surface); }
/* Une seule carte, en une rangée (VVDN 4983, F06) : le titre en petit, puis badge, nom, lieu et bouton côte à côte. */
.encadre-reservables h2 { margin: 0 0 0.4rem; font-family: inherit; font-size: 0.88rem; line-height: 1.3; font-weight: 600; color: var(--texte-2); }
.encadre-reservables > .meta { margin: 0 0 0.5rem; color: var(--texte-2); font-size: 0.9rem; }
.grille-suite { margin-top: 0; }
.reservables { list-style: none; margin: 0; padding: 0; }
.reservable { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.reservable-texte { flex: 1 1 14rem; min-width: 0; }
.reservable h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.reservable h3 a { color: var(--texte); }
.reservable .meta { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--texte-2); }
.reservable .reservable-badges { margin: 0 0 0.15rem; }
.reservable .bouton { min-height: 44px; flex: 0 0 auto; }
.reservable .mention-action { flex-basis: 100%; margin: 0; font-size: 0.85rem; }
.bouton-bulle { display: inline-flex; margin-top: 0.4rem; min-height: 36px; padding: 0.35rem 0.9rem; color: #fff !important; text-decoration: none; }
@media (max-width: 640px) { .reservable .bouton { width: 100%; } }
.filtre-note { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--texte-2); }
.voir-reservables { margin: 0.3rem 0 0; font-weight: 600; font-size: 0.9rem; }
.voir-reservables a { display: inline-block; padding: 0.3rem 0; min-height: 24px; }
/* Aperçu des adresses sous l'agenda (VVDN 4968) : une rangée par famille, 4 fiches courtes ; défilement horizontal sur téléphone. */
.apercu-adresses { margin: 2.4rem 0 0.6rem; }
.apercu-adresses h2 { margin: 0 0 0.6rem; }
.apercu-rangee { margin: 0 0 1.2rem; }
.apercu-rangee .rubrique-titre { margin: 0 0 0.5rem; }
.apercu-fiches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.apercu-fiche { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0.9rem; border: 1px solid var(--ligne); border-radius: var(--r-carte); background: var(--surface); min-width: 0; }
.apercu-fiche.apercu-avant { border-left: 4px solid var(--terre); }
.apercu-fiche h4 { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.apercu-fiche h4 a { color: var(--texte); display: inline-block; min-height: 44px; padding: 0.55rem 0; margin: -0.55rem 0; }
.apercu-fiche .meta { margin: 0; font-size: 0.88rem; color: var(--texte-2); }
.apercu-badges { margin: 0.2rem 0 0; }
.apercu-voir { margin: 0.35rem 0 0; }
.apercu-voir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 760px) {
  .apercu-fiches { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
  .apercu-fiche { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Trouver un soignant (VVDN 4969) : numéros de garde en tête, puis une ligne par commune et trois liens de plateforme. */
.soignants { margin: 2rem 0 1rem; scroll-margin-top: 90px; }
.soignants h2 { font-family: var(--titre); color: var(--titre-couleur); margin: 0 0 0.7rem; }
.soignants-garde { background: var(--terre-doux); border-left: 3px solid var(--terre); border-radius: var(--r-carte); padding: 0.7rem 1rem; margin-bottom: 0.8rem; }
.soignants-garde-titre { font-weight: 700; margin: 0 0 0.3rem; }
/* Bloc compact (VVDN 4983, F07) : les quatre numéros sur une rangée, les précisions en une ligne dessous. */
.soignants-garde ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.soignants-numero { display: inline-block; font-weight: 700; font-size: 1.1rem; color: var(--terre-texte); min-height: 32px; line-height: 32px; margin-right: 0.25em; }
.soignants-garde-notes { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--texte-2); }
.soignants-garde-notes a { color: var(--terre-texte); font-weight: 700; }
.soignants-panneau { border: 1px solid var(--ligne); border-radius: var(--r-carte); background: var(--surface); padding: 0 1rem; }
.soignants-panneau > summary { cursor: pointer; font-weight: 650; min-height: 48px; display: flex; align-items: center; color: var(--accent); }
.soignants-panneau[open] { padding-bottom: 0.8rem; }
.soignants-autres { margin-top: 0.5rem; }
.soignants-autres > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.soignants-panneau > summary::before, .soignants-autres > summary::before { content: "▸"; margin-right: 0.5em; }
.soignants-panneau[open] > summary::before, .soignants-autres[open] > summary::before { content: "▾"; }
.soignants-choix { margin: 0 0 1rem; }
.soignants-choix select { width: 100%; max-width: 22rem; min-height: 44px; border: 1px solid var(--ligne); border-radius: var(--r-champ); padding: 0 0.8rem; background: var(--surface); color: var(--texte); font: inherit; }
.soignants-titre { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.soignants-lignes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ligne); }
.soignants-lignes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--ligne); }
.soignants-commune { font-weight: 600; }
.soignants-liens { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.soignants-liens a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.9rem; border: 1px solid var(--accent); border-radius: var(--r-bouton); color: var(--accent); text-decoration: none; font-weight: 600; }
.soignants-pole { font-weight: 400; margin-left: 0.3em; }
.soignants-liens a:hover, .soignants-liens a:focus-visible { background: var(--accent-doux); }
@media (max-width: 640px) { .soignants-lignes li { flex-direction: column; align-items: stretch; } .soignants-liens a { flex: 1; justify-content: center; padding: 0 0.5rem; } }

/* Conditions de la mise en avant : l'essentiel en tête de page (22/10/2026). */
.en-bref { margin: 1rem 0 1.5rem; padding: 0.8rem 1.1rem 0.9rem; border: 1px solid var(--ligne); border-left: 4px solid var(--terre); border-radius: var(--r-carte); background: var(--surface); }
.en-bref h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.en-bref ul { margin: 0; padding-left: 1.1rem; }
.en-bref li { margin: 0.25rem 0; }

/* VLIN 379 : cibles tactiles de 44 px au moins sur téléphone et écrans tactiles (le Conseil design du 26/10 en comptait 31 sous ce seuil sur l'accueil).
   Mesure : `node collecte/outils/cibles-tactiles.js <url>…` (390 px, formulaire replié puis ouvert). Un lien au milieu d'une phrase en est dispensé (WCAG 2.5.8) ;
   un lien en liste, seul sur sa ligne ou en fin de phrase n'en est pas. Les titres de fiche gardent leur place dans la page : la zone de toucher déborde
   de 0,55 rem en haut et en bas par une marge négative, comme `.apercu-fiche h4 a`. */
@media (pointer: coarse), (max-width: 760px) {
  .marque { min-height: 44px; }
  .lien-discret { display: flex; align-items: center; min-height: 44px; }
  a.badge { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 0.9rem; }
  .evt h3 a, .reservable h3 a { display: inline-block; min-height: 44px; padding: 0.55rem 0; margin: -0.55rem 0; }
  .apercu-fiche h4 a { min-width: 44px; }
  .voisines a { display: inline-flex; align-items: center; min-height: 44px; }
  .soignants-numero { min-width: 44px; min-height: 44px; line-height: 44px; }
  .pied-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.3rem; }
  /* « Annoncer un événement · Ajouter un commerce · Partager une info » et « Signaler » : des appels à l'action, pas des liens de lecture. */
  .rappel-publier a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; }
  /* Boutons de zoom de la carte : Leaflet les fait de 30 px ; son propre CSS (chargé plus tard) est battu par la double classe. */
  .leaflet-container .leaflet-bar a, .leaflet-container.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
}
/* Lettre « Ce week-end à <commune> » (VLIN 474) : un champ et un bouton, en 390 l'un sous l'autre ; le champ piège sort de l'écran. */
.lettre { margin: 1.4rem 0; padding: 1rem 1.1rem; border: 1px solid var(--ligne); border-radius: 12px; }
.lettre h2, .lettre h3 { margin: 0 0 0.3rem; }
.lettre p { margin: 0.2rem 0 0.6rem; }
.lettre-form label { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.lettre-champ { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lettre-champ input { flex: 1 1 14rem; min-height: 48px; padding: 0 0.8rem; font: inherit; border: 1px solid var(--ligne); border-radius: 8px; }
.lettre-champ .bouton { min-height: 48px; }
.lettre-choix { margin: 0.6rem 0; }
.lettre-choix summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.lettre-choix fieldset { border: 1px solid var(--ligne); border-radius: 8px; margin: 0.5rem 0; padding: 0.3rem 0.8rem; }
.lettre-choix legend { font-weight: 600; padding: 0 0.3rem; }
.lettre-form .lettre-case { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0; font-weight: 400; }
.lettre-case input { width: 1.25rem; height: 1.25rem; flex: none; }
.lettre-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lettre-retour { min-height: 1.4em; font-weight: 600; }
@media (max-width: 640px) { .lettre-champ .bouton { width: 100%; } }

/* Installer comme une application (VLIN 612) : une ligne discrète en bas de page */
.pied-bas .installer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0; }
.installer[hidden], .installer [hidden] { display: none; }
.installer-bouton { min-height: 44px; padding: 0 1rem; border: 1px solid currentColor; border-radius: var(--r-bouton); background: transparent; color: var(--profond-texte); font: inherit; cursor: pointer; }
.installer-bouton:hover { text-decoration: underline; text-underline-offset: 3px; }
.installer-aide { font-size: 0.9rem; flex-basis: 100%; order: 3; }
.installer-fermer { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--profond-texte); font-size: 1.3rem; cursor: pointer; }

/* Recherche par mot (VLRE 642) : case des pages commune et page de résultats */
.chercher { display: grid; gap: 0.4rem; max-width: 36rem; margin: 1rem 0 0.4rem; }
.chercher label { font-weight: 700; font-size: 0.98rem; }
.chercher-ligne { display: flex; gap: 0.6rem; }
.chercher-ligne .champ { flex: 1 1 auto; min-width: 0; }
.chercher-ligne .bouton { flex: 0 0 auto; min-height: 48px; padding: 0 1.2rem; }
.resultats-page .chercher { max-width: 40rem; margin-top: 1.2rem; }
.resultats-nb { margin: 1.6rem 0 0.8rem; color: var(--texte-2); font-size: 1rem; }
.resultats-nb strong { color: var(--texte); }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.resultat { position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 1rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; transition: border-color 0.15s, box-shadow 0.15s; }
.resultat:hover { border-color: var(--texte-2); box-shadow: var(--ombre); }
.resultat h2 { font-family: var(--titre); font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.resultat h2 a { color: var(--texte); text-decoration: none; }
.resultat h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.resultat:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.resultat h2 a:focus-visible { outline: none; }
.resultat .badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.resultat .badges .badge { margin: 0; }
.resultat .lieu-ligne { margin: 0; color: var(--texte-2); font-size: 0.95rem; }
.resultat .date-ligne { margin: 0; color: var(--terre-texte); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.resultats-vide { background: var(--teinte); border-radius: 12px; padding: 1.2rem 1.3rem; max-width: 40rem; }
.resultats-vide p { margin: 0 0 0.5rem; }
.resultats-vide p:last-child { margin: 0; }
.resultats-page h1 { font-family: var(--titre); font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.08; margin: 0.6rem 0 0; text-wrap: balance; }
.resultat { border-color: color-mix(in srgb, var(--texte) 22%, var(--ligne)); padding-right: 2.6rem; }
.resultat::after { content: "→"; position: absolute; right: 1rem; top: 1rem; color: var(--accent); font-weight: 700; transition: transform 0.15s; }
.resultat:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .resultat, .resultat::after { transition: none; } .resultat:hover::after { transform: none; } }