/* ==========================================================================
   toodrome.com | feuille de style unique
   Palette tiree du logo : vert #149114, corail #FF3D48, ambre #F8B133.
   Aucune ressource externe : pas de Google Fonts, pas de CDN.
   ========================================================================== */

:root {
  /* Marque */
  --vert:        #149114;
  --vert-fonce:  #0d6b12;
  --vert-nuit:   #10301a;
  --vert-pale:   #e8f5e6;
  --vert-brume:  #f2f9f0;
  --vert-titre:  #4e7d43;   /* vert sourd des titres et des accents editoriaux */

  --corail:      #ff3d48;
  --corail-pale: #ffecec;
  --ambre:       #f8b133;
  --ambre-pale:  #fff5e2;

  /* Neutres */
  --encre:       #14201a;
  --encre-douce: #4d5b52;
  --encre-pale:  #7c8a81;
  --papier:      #ffffff;
  --papier-creux:#f5f8f4;
  --trait:       #e2e9df;
  --trait-fort:  #c9d5c5;

  --rayon:    18px;
  --rayon-s:  10px;
  --rayon-xs: 999px;
  --ombre:    0 2px 4px rgba(16,48,26,.04), 0 10px 28px rgba(16,48,26,.07);
  --ombre-f:  0 4px 10px rgba(16,48,26,.07), 0 22px 54px rgba(16,48,26,.13);

  /* Titres en serif : aucune police externe, uniquement des polices systeme. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --titre: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --sans:  "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.72;
  color: var(--encre);
  background: var(--papier);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vert-fonce); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--corail); }

h1, h2, h3, h4 {
  font-family: var(--titre); font-weight: 800; line-height: 1.14;
  margin: 0 0 .45em; letter-spacing: -.025em; color: var(--encre);
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 1.8em; font-weight: 750; }
h4 { font-size: 1.1rem; margin-top: 1.5em; font-weight: 700; letter-spacing: -.01em; }
h2 + h3, h3 + h4 { margin-top: 1em; }

/* Barre verte devant chaque H2 de contenu */
.article-corps > h2,
.bloc-texte > h2 {
  position: relative; padding-top: .5em;
}
.article-corps > h2::before,
.bloc-texte > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--vert), var(--ambre));
}

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.25em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
li::marker { color: var(--vert); }
strong { font-weight: 700; }
small { font-size: .86rem; }

.container { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
/* Colonne de lecture. Elargie a 1080 px le 13 aout 2026 : a 860 px, le texte
   revenait a la ligne alors qu'il restait 500 px de vide de chaque cote. */
.container-etroit { max-width: 1080px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vert); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--rayon-s) 0;
  font-weight: 700;
}
.saut-contenu:focus { left: 0; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   En-tete
   ========================================================================== */
.entete {
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 100;
}
.entete-barre { display: flex; align-items: center; gap: 26px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo img { height: 42px; width: auto; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: 9px 15px; border-radius: var(--rayon-xs);
  color: var(--encre-douce); text-decoration: none; font-size: .95rem; font-weight: 650;
  white-space: nowrap;
}
.nav a:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.nav a.actif { color: #fff; background: var(--vert); }

.nav-toggle {
  display: none; margin-left: auto; background: var(--vert); color: #fff;
  border: 0; border-radius: var(--rayon-xs); padding: 11px 20px; cursor: pointer;
  font-size: .95rem; font-family: inherit; font-weight: 700;
}

/* --- En-tete : navigation courte au centre, recherche puis bouton Menu ---- */
.nav-court { margin-left: 34px; }
.nav-court ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-court li { margin: 0; }
.nav-court a {
  display: block; padding: 10px 16px; border-radius: var(--rayon-xs);
  color: var(--encre-douce); text-decoration: none; font-family: var(--sans);
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap; position: relative;
}
.nav-court a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--vert-titre); transform: scaleX(0);
  transform-origin: left; transition: transform .18s;
}
.nav-court a:hover { color: var(--vert-fonce); }
.nav-court a:hover::after { transform: scaleX(1); }
.nav-court a.actif { color: var(--vert-fonce); background: var(--vert-pale); }
.nav-court a.actif::after { transform: scaleX(1); }
@media (max-width: 1080px) { .nav-court { display: none; } }

/* Le bouton Menu ouvre le panneau des neuf territoires, a toutes les tailles. */
.entete-barre .nav-toggle { display: block; margin-left: 14px; background: var(--vert-nuit); }
.entete-barre .nav-toggle::after { content: " \2261"; }
.entete-barre .nav-toggle:hover { background: var(--vert-fonce); }
.entete-barre .nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre-f); padding: 14px 24px 20px; margin-left: 0;
}
.entete-barre .nav.ouvert { display: block; }
.entete-barre .nav ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 18px; max-width: var(--largeur); margin: 0 auto; padding: 0; list-style: none;
}
.entete-barre .nav a { padding: 12px 16px; border-radius: var(--rayon-s); font-family: var(--sans); }
@media (max-width: 430px) { .entete-barre .nav ul { grid-template-columns: 1fr; } }
@media (max-width: 430px) {
  .logo img { height: 34px; }
  .entete-barre { gap: 12px; min-height: 64px; }
  .container { padding: 0 18px; }
  .nav-toggle { padding: 10px 16px; }
}

/* ==========================================================================
   Bandeau
   ========================================================================== */
.bandeau { position: relative; background: var(--vert-nuit); color: #fff; overflow: hidden; }
.bandeau-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.bandeau::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 460px at 90% -12%, rgba(20,145,20,.34), transparent 64%),
    linear-gradient(180deg, rgba(16,48,26,.62) 0%, rgba(16,48,26,.36) 42%, rgba(16,48,26,.90) 100%);
}
.bandeau-contenu { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 74px; }
.bandeau h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 2px 26px rgba(0,0,0,.34); }
/* L'accroche occupe toute la largeur : pas de max-width court, sinon le texte
   casse au tiers de la ligne. */
.bandeau-accroche {
  font-size: clamp(1.12rem, 2.05vw, 1.45rem); line-height: 1.5; font-weight: 450;
  color: rgba(255,255,255,.95); margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.bandeau-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; padding: 0;
}
.bandeau-meta li {
  margin: 0; font-size: .92rem; font-weight: 750;
  background: rgba(255,255,255,.94); border: 0;
  color: var(--vert-nuit); padding: 9px 19px; border-radius: var(--rayon-xs);
}
.bandeau-meta li:nth-child(2) { background: var(--ambre); color: #3d2600; }
.bandeau-meta li:nth-child(3) { background: var(--corail); color: #fff; }
.bandeau-meta li:nth-child(4) { background: var(--vert); color: #fff; }
.bandeau-compact .bandeau-contenu { padding-top: 58px; padding-bottom: 50px; }
.bandeau-uni { background: linear-gradient(135deg, var(--vert-nuit) 0%, #17492a 55%, var(--vert-fonce) 100%); }
.bandeau-uni::after {
  background: radial-gradient(760px 380px at 92% 0%, rgba(248,177,51,.24), transparent 60%);
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.ariane { background: var(--vert-brume); border-bottom: 1px solid var(--trait); font-size: .9rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 13px 0; color: var(--encre-pale); }
.ariane li { margin: 0; display: flex; gap: 8px; align-items: center; }
.ariane li + li::before { content: "›"; color: var(--trait-fort); font-weight: 700; }
.ariane a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.ariane a:hover { color: var(--vert-fonce); text-decoration: underline; }

/* ==========================================================================
   Mise en page. Les colonnes sont posees explicitement : le rendu ne doit
   jamais dependre de l'ordre du HTML.
   ========================================================================== */
.page-corps { padding: 56px 0 84px; }
.avec-aside {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start;
}
.avec-aside > .article-corps { grid-column: 1; min-width: 0; }
.avec-aside > .colonne { grid-column: 2; min-width: 0; position: sticky; top: 100px; }
@media (max-width: 1080px) {
  .avec-aside { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .avec-aside > .article-corps, .avec-aside > .colonne { grid-column: 1; position: static; }
}

.article-corps > *:first-child { margin-top: 0; }
.article-corps figure { margin: 2.2em 0; }
.article-corps figure img { border-radius: var(--rayon); box-shadow: var(--ombre-f); width: 100%; }
.article-corps figcaption { font-size: .86rem; color: var(--encre-pale); margin-top: .7em; line-height: 1.5; }

.chapeau {
  font-size: clamp(1.12rem, 1.55vw, 1.3rem); line-height: 1.62; color: var(--encre-douce); font-weight: 450;
}
.chapeau strong { color: var(--encre); font-weight: 750; }

/* ==========================================================================
   Sommaire
   ========================================================================== */
.sommaire {
  background: var(--vert-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 24px 28px; margin: 0 0 36px;
}
.sommaire p {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--vert); margin: 0 0 14px;
}
.sommaire ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 36px; }
.sommaire li { margin-bottom: .45em; font-size: .96rem; break-inside: avoid; }
.sommaire a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.sommaire a:hover { color: var(--vert-fonce); text-decoration: underline; }
@media (max-width: 640px) { .sommaire ol { columns: 1; } }

/* ==========================================================================
   Encadres. Un seul av-callout par page, un seul av-warning.
   ========================================================================== */
.av-warning, .av-callout, .av-note {
  border-radius: var(--rayon); padding: 22px 26px; margin: 2em 0; line-height: 1.62;
}
.av-warning {
  background: var(--papier-creux); border: 1px solid var(--trait);
  color: var(--encre-douce); font-size: .93rem;
}
.av-callout {
  background: linear-gradient(135deg, var(--corail-pale), #fff7f0);
  border: 1px solid #ffd4d4; border-left: 6px solid var(--corail);
  font-size: 1.02rem;
}
.av-note { background: var(--vert-pale); border: 1px solid #cfe6c9; border-left: 6px solid var(--vert); }
.av-warning > *:last-child, .av-callout > *:last-child, .av-note > *:last-child { margin-bottom: 0; }
.av-warning > *:first-child, .av-callout > *:first-child, .av-note > *:first-child { margin-top: 0; }
.av-titre {
  display: block; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--corail); margin-bottom: .6em;
}
.av-note .av-titre { color: var(--vert-fonce); }
.av-warning .av-titre { color: var(--encre-pale); }

/* Fiche de lieu */
.av-place {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 26px 28px; margin: 1.5em 0; box-shadow: var(--ombre);
  border-top: 5px solid var(--vert);
}
.av-place h3 { margin-top: 0; margin-bottom: .45em; font-size: 1.3rem; }
.av-place-meta {
  list-style: none; margin: 0 0 1em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .87rem;
}
.av-place-meta li {
  margin: 0; background: var(--vert-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon-xs); padding: 4px 13px; color: var(--encre-douce);
}
.av-place-meta b { font-weight: 750; color: var(--encre); }
.av-place > p:last-child { margin-bottom: 0; }

/* Chiffres cles */
.av-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; margin: 2.2em 0; padding: 0; list-style: none;
}
.av-figures li {
  background: var(--vert-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 22px 24px; margin: 0; min-width: 0;
  position: relative; overflow: hidden;
}
.av-figures li::after {
  content: ""; position: absolute; right: -26px; top: -26px;
  width: 84px; height: 84px; border-radius: 50%; background: rgba(20,145,20,.07);
}
.av-figures li:nth-child(2) { background: var(--ambre-pale); border-color: #f4e3c4; }
.av-figures li:nth-child(2)::after { background: rgba(248,177,51,.14); }
.av-figures li:nth-child(3) { background: var(--corail-pale); border-color: #ffd8d8; }
.av-figures li:nth-child(4) { background: var(--vert-pale); border-color: #cfe6c9; }
.av-figures li:nth-child(3)::after { background: rgba(255,61,72,.10); }
.av-figures b {
  display: block; font-size: 2.3rem; font-weight: 800; line-height: 1.02;
  letter-spacing: -.035em; color: var(--vert-fonce); position: relative;
}
.av-figures li:nth-child(2) b { color: #b3760a; }
.av-figures li:nth-child(3) b { color: var(--corail); }
.av-figures span {
  display: block; font-size: .89rem; color: var(--encre-douce);
  margin-top: 8px; line-height: 1.45; position: relative;
}

/* ==========================================================================
   Tableaux : ils defilent dans leur conteneur, jamais la page
   ========================================================================== */
.tableau-scroll {
  overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff;
}
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 480px; }
caption {
  caption-side: bottom; text-align: left; font-size: .84rem;
  color: var(--encre-pale); padding: 12px 20px 16px; line-height: 1.5;
}
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th {
  background: var(--vert-nuit); color: #fff; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 800; white-space: nowrap; border-bottom: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--vert-brume); }
tbody tr:hover { background: var(--vert-pale); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin: 2em 0 0; }
.faq details {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--vert); box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer; padding: 20px 26px; font-weight: 700; font-size: 1.08rem;
  list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
/* Le « + » pivote en croix a l'ouverture : evite un caractere tiret dans le CSS. */
.faq summary::after {
  content: "+"; color: #fff; background: var(--vert); width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; flex-shrink: 0; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-reponse { padding: 0 26px 20px; font-size: 1rem; color: var(--encre-douce); }
.faq-reponse > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Colonne laterale
   ========================================================================== */
.bloc-aside {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--ombre);
}
.bloc-aside h2, .bloc-aside h3 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--vert); margin: 0 0 16px;
}
.bloc-aside h2::before { display: none; }
.bloc-aside ul { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.bloc-aside li { margin-bottom: .8em; line-height: 1.48; }
.bloc-aside li:last-child { margin-bottom: 0; }
.bloc-aside a { text-decoration: none; }
.bloc-aside a:hover { text-decoration: underline; }
.bloc-aside .repere { display: block; font-size: .82rem; color: var(--encre-pale); font-weight: 400; }
.bloc-aside--accent {
  background: linear-gradient(150deg, var(--vert-nuit), #17492a);
  border-color: transparent; color: rgba(255,255,255,.92);
}
.bloc-aside--accent h2 { color: var(--ambre); }
.bloc-aside--accent a { color: #fff; }
.bloc-aside--ambre { background: var(--ambre-pale); border-color: #f4e3c4; }
.bloc-aside--ambre h2 { color: #b3760a; }

.fiche-pratique { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.fiche-pratique li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--trait); margin: 0;
}
.fiche-pratique li:last-child { border-bottom: 0; }
.fiche-pratique span { color: var(--encre-pale); flex-shrink: 0; }
.fiche-pratique b { font-weight: 750; text-align: right; }

/* ==========================================================================
   Cartes
   ========================================================================== */
.grille-cartes {
  /* min() : sous 320 px de viewport, la carte ne doit pas imposer sa largeur
     minimale, sinon la page deborde. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px; margin: 2.4em 0; list-style: none; padding: 0;
}
.grille-cartes > li { margin: 0; min-width: 0; }
.carte {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre); transition: box-shadow .2s, transform .2s;
  position: relative;
}
.carte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--vert), var(--ambre));
}
.grille-cartes > li:nth-child(3n+2) .carte::before { background: linear-gradient(90deg, var(--ambre), var(--corail)); }
.grille-cartes > li:nth-child(3n+3) .carte::before { background: linear-gradient(90deg, var(--corail), var(--vert)); }
a.carte { text-decoration: none; color: inherit; }
a.carte:hover { box-shadow: var(--ombre-f); transform: translateY(-4px); }
.carte-corps { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.carte h3 { margin: 0 0 .45em; font-size: 1.3rem; }
a.carte:hover h3 { color: var(--vert-fonce); }
.carte p { font-size: .97rem; color: var(--encre-douce); margin: 0 0 1.3em; }
.carte-pied {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait);
  font-size: .84rem; color: var(--encre-pale);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.carte-pied b { color: var(--vert-fonce); font-weight: 800; }

/* ==========================================================================
   Liste des communes
   ========================================================================== */
.liste-communes {
  columns: 3; column-gap: 38px; list-style: none; margin: 1.6em 0; padding: 0; font-size: .97rem;
}
.liste-communes li {
  break-inside: avoid; margin-bottom: .5em;
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--trait); padding-bottom: .38em;
}
.liste-communes .hab { color: var(--encre-pale); font-size: .84rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.liste-communes a { text-decoration: none; }
.liste-communes span.nom { color: var(--encre-douce); min-width: 0; }
@media (max-width: 900px) { .liste-communes { columns: 2; } }
@media (max-width: 540px) { .liste-communes { columns: 1; } }

/* Index alphabetique */
.index-lettres {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 10px; padding: 14px 0;
  position: sticky; top: 76px; background: #fff; z-index: 20; border-bottom: 1px solid var(--trait);
}
.index-lettres li { margin: 0; }
.index-lettres a {
  display: block; min-width: 40px; text-align: center; padding: 7px 10px;
  border: 1px solid var(--trait); border-radius: var(--rayon-s);
  background: var(--vert-brume); text-decoration: none; font-weight: 800; font-size: .95rem;
  color: var(--vert-fonce);
}
.index-lettres a:hover { background: var(--vert); color: #fff; border-color: var(--vert); }
.index-groupe { margin-top: 2.6em; }
.index-groupe h2 {
  margin: 0 0 .5em; font-size: 2rem; color: var(--vert);
  border-bottom: 3px solid var(--vert-pale); padding-bottom: .15em;
}
.index-groupe h2::before { display: none; }
.champ-filtre {
  width: 100%; padding: 16px 22px; font-size: 1.05rem; font-family: inherit;
  border: 2px solid var(--trait-fort); border-radius: var(--rayon); background: #fff;
  margin: 8px 0 6px; color: var(--encre);
}
.champ-filtre:focus { outline: 3px solid var(--vert); outline-offset: 1px; border-color: var(--vert); }
.filtre-resultat { font-size: .92rem; color: var(--encre-pale); margin: 0 0 18px; }

/* ==========================================================================
   Carte Leaflet
   ========================================================================== */
.carte-lieu {
  height: 470px; border-radius: var(--rayon); border: 1px solid var(--trait);
  margin: 2em 0 .7em; z-index: 1; box-shadow: var(--ombre);
}
.carte-legende { font-size: .86rem; color: var(--encre-pale); margin-top: -.3em; }
@media (max-width: 640px) { .carte-lieu { height: 360px; } }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied { background: var(--vert-nuit); color: rgba(255,255,255,.74); margin-top: 80px; font-size: .96rem; }
.pied-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; padding: 64px 0 48px; }
.pied h2 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--ambre); margin: 0 0 18px;
}
.pied h2::before { display: none; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .65em; }
.pied a { color: rgba(255,255,255,.86); text-decoration: none; font-weight: 500; }
.pied a:hover { color: var(--ambre); text-decoration: underline; }
.pied-logo { margin: 0 0 1em; }
.pied-logo img { height: 40px; width: auto; }
.pied-desc { line-height: 1.65; margin: 0; color: rgba(255,255,255,.62); }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.13); padding: 22px 0 32px;
  font-size: .88rem; color: rgba(255,255,255,.52);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 34px; padding: 48px 0 34px; } }
@media (max-width: 540px) { .pied-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Divers
   ========================================================================== */
.mention-source { font-size: .89rem; color: var(--encre-pale); }
/* URL de source, en clair et non cliquable : le lecteur peut verifier, et le
   site ne distribue pas de lien sortant. overflow-wrap est indispensable, une
   URL longue deborde sinon la colonne sur mobile. */
.source-url {
  display: inline-block;
  font-size: .82em;
  color: var(--encre-pale);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.badge {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 13px; border-radius: var(--rayon-xs);
  background: var(--corail-pale); color: var(--corail); vertical-align: middle;
}
.badge-vert { background: var(--vert-pale); color: var(--vert-fonce); }
.badge-ambre { background: var(--ambre-pale); color: #b3760a; }

.bouton {
  display: inline-block; background: var(--vert); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: var(--rayon-xs); font-weight: 750; font-size: 1rem;
  border: 2px solid var(--vert); box-shadow: 0 6px 18px rgba(20,145,20,.24);
}
.bouton:hover { background: var(--vert-fonce); color: #fff; border-color: var(--vert-fonce); }
.bouton-clair { background: #fff; color: var(--vert-fonce); border-color: var(--trait-fort); box-shadow: none; }
.bouton-clair:hover { background: var(--vert-pale); color: var(--vert-fonce); border-color: var(--vert); }

/* Bandeau de rupture pleine largeur */
.ruban {
  background: linear-gradient(135deg, var(--vert-nuit), #17492a);
  color: #fff; border-radius: var(--rayon); padding: 42px 46px; margin: 3em 0;
}
.ruban h2 { color: #fff; margin-top: 0; }
.ruban h2::before { display: none; }
.ruban p { color: rgba(255,255,255,.86); }
.ruban > *:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .ruban { padding: 30px 24px; } }

hr { border: 0; border-top: 1px solid var(--trait); margin: 3em 0; }

@media print {
  .entete, .pied, .nav, .colonne, .sommaire { display: none; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   Accueil : mise en page editoriale (13 aout 2026)
   Prefixe .hp- : ces regles ne servent qu'a la page d'accueil et a
   /territoires/. Elles n'affectent aucune page commune.
   ========================================================================== */

/* --- Heros ---------------------------------------------------------------- */
.hp-hero {
  position: relative;
  background: linear-gradient(180deg, #fbfcfa 0%, #f4f7f2 100%);
  overflow: hidden;
}
.hp-hero-photo {
  position: absolute; inset: 0 0 0 40%;
  background-size: cover; background-position: 50% 45%;
}
.hp-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f6f8f4 0%, rgba(246,248,244,.88) 15%, rgba(246,248,244,0) 48%);
}
.hp-hero-grille {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: 40px; padding-top: 74px; padding-bottom: 120px;
}
.hp-hero h1 {
  font-family: var(--serif); font-size: clamp(2.15rem, 4.1vw, 3.3rem);
  line-height: 1.07; letter-spacing: -.032em; margin: 0 0 .55em;
}
.hp-hero h1 .hp-italique {
  display: block; font-style: italic; font-weight: 700; color: var(--vert-titre);
}
.hp-hero-texte {
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62;
  color: var(--encre-douce); margin: 0 0 30px; max-width: 30em;
}
.hp-chiffres { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hp-chiffres li {
  margin: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px;
  padding: 12px 20px 12px 14px; box-shadow: 0 1px 2px rgba(16,48,26,.04), 0 8px 22px rgba(16,48,26,.06);
}
.hp-pastille {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
  display: grid; place-items: center;
}
.hp-pastille svg { width: 19px; height: 19px; }
.hp-pastille-vert  { background: var(--vert-pale); color: var(--vert-fonce); }
.hp-pastille-ambre { background: var(--ambre-pale); color: #a06a06; }
.hp-pastille-corail{ background: var(--corail-pale); color: #c62b35; }
.hp-chiffre-b { display: block; font-weight: 800; font-size: 1.12rem; line-height: 1.15; color: var(--encre); }
.hp-chiffre-l { display: block; font-size: .8rem; color: var(--encre-pale); }

/* Barre de recherche a cheval sur le bas du heros */
.hp-recherche-enveloppe {
  /* La barre chevauche le bas du heros, mais il faut de l'air en dessous :
     sans ce padding, elle colle a la limite de la photo. */
  position: relative; z-index: 3; margin-top: -46px; padding-bottom: 40px;
}
.hp-recherche {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-xs);
  padding: 10px 10px 10px 24px; box-shadow: var(--ombre-f); max-width: 720px; margin: 0 auto;
}
.hp-recherche svg { width: 20px; height: 20px; color: var(--encre-pale); flex: 0 0 20px; }
.hp-recherche input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem;
  color: var(--encre); padding: 12px 0;
}
.hp-recherche input::placeholder { color: var(--encre-pale); }
.hp-recherche input:focus { outline: none; }
.hp-recherche button {
  flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 750; font-size: .98rem;
  background: var(--vert-titre); color: #fff; padding: 14px 30px; border-radius: var(--rayon-xs);
}
.hp-recherche button:hover { background: var(--vert-fonce); }

@media (max-width: 900px) {
  .hp-hero-photo { inset: 0; opacity: .2; }
  .hp-hero-photo::after { background: linear-gradient(180deg, rgba(246,248,244,.55), rgba(246,248,244,.92)); }
  .hp-hero-grille { grid-template-columns: minmax(0, 1fr); padding-top: 52px; padding-bottom: 96px; }
  .hp-recherche { flex-wrap: wrap; padding: 14px; }
  .hp-recherche input { flex: 1 1 100%; padding: 6px 8px; }
  .hp-recherche button { flex: 1 1 100%; }
}

/* --- Titres de section de l'accueil -------------------------------------- */
.hp-section { padding: 66px 0 0; }
/* La partie editoriale de l'accueil respire plus large que la colonne de
   lecture : 1480 px au lieu de 1240. */
.hp-large { max-width: 1480px; }
.hp-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.hp-tete h2 {
  font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.05rem); margin: 0;
  letter-spacing: -.02em; padding-left: 18px; position: relative;
}
.hp-tete h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; border-radius: 999px; background: var(--vert-titre);
}
.hp-lien-tete {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-xs);
  padding: 11px 22px; font-size: .93rem; font-weight: 650; color: var(--encre-douce);
  box-shadow: 0 1px 2px rgba(16,48,26,.04);
}
.hp-lien-tete:hover { border-color: var(--vert-titre); color: var(--vert-fonce); }

/* --- Rangee de cartes territoire ---------------------------------------- */
/* Grille 3 x 3 : les neuf territoires tiennent en trois rangees pleines, sans
   carte coupee au bord ni defilement horizontal. */
.hp-rangee {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; list-style: none; margin: 0; padding: 0;
}
.hp-rangee > li { margin: 0; min-width: 0; }
@media (max-width: 1080px) { .hp-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .hp-rangee { grid-template-columns: minmax(0, 1fr); } }

.hp-carte {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,48,26,.04), 0 10px 24px rgba(16,48,26,.05);
  transition: box-shadow .2s, transform .2s;
}
.hp-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-f); color: inherit; }
.hp-carte img { width: 100%; height: 210px; object-fit: cover; }
.hp-carte-corps { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hp-carte h3 { font-family: var(--serif); font-size: 1.24rem; margin: 0 0 .5em; letter-spacing: -.015em; }
.hp-carte p { font-size: .93rem; line-height: 1.55; color: var(--encre-douce); margin: 0 0 1.3em; }
.hp-carte-pied {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait);
  font-size: .83rem; color: var(--encre-pale); display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.hp-carte-pied b { color: var(--encre); font-weight: 800; }
.hp-carte-pied span + span::before { content: "\2022"; color: var(--trait-fort); margin-right: 8px; }

/* --- Panneau des mille visages ------------------------------------------- */
.hp-panneau {
  background: var(--papier-creux); border-radius: 22px; padding: 48px;
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px;
  align-items: center; margin-top: 34px;
}
.hp-panneau-texte > *:first-child { margin-top: 0; }
.hp-etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 750; color: var(--vert-titre); margin: 0 0 .5em;
}
.hp-etiquette svg { width: 17px; height: 17px; }
.hp-panneau h2 {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin: 0 0 .6em; letter-spacing: -.02em;
}
.hp-panneau h2::before { display: none; }
.hp-panneau p { font-size: .96rem; line-height: 1.62; color: var(--encre-douce); }
.hp-bouton-fonce {
  display: inline-block; background: var(--vert-nuit); color: #fff; text-decoration: none;
  padding: 14px 26px; border-radius: var(--rayon-xs); font-weight: 700; font-size: .95rem;
}
.hp-bouton-fonce:hover { background: var(--vert-fonce); color: #fff; }
.hp-mosaique {
  display: grid; grid-template-columns: 1.55fr 1fr .95fr; grid-template-rows: 1fr 1fr;
  gap: 12px; min-width: 0; padding: 0; margin: 0; list-style: none;
}
.hp-mosaique li { margin: 0; min-width: 0; }
.hp-mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.hp-mosaique > li:nth-child(1) { grid-row: 1 / 3; }
.hp-mosaique > li:nth-child(2) { grid-row: 1 / 3; }
@media (max-width: 900px) {
  .hp-panneau { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .hp-mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
  .hp-mosaique > li:nth-child(1) { grid-row: 1 / 2; }
  .hp-mosaique > li:nth-child(2) { grid-row: 2 / 3; }
}

/* Recadrages : l'objet interessant n'est pas toujours au centre du cliche. */
.hp-mosaique > li:nth-child(2) img { object-position: 45% 42%; }

/* --- A la une ------------------------------------------------------------ */
.hp-une {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 22px; list-style: none; margin: 0; padding: 0;
}
.hp-une > li { margin: 0; min-width: 0; }
.hp-une-carte {
  display: grid; grid-template-columns: minmax(0, 1fr) 42%;
  background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit; height: 100%;
  box-shadow: 0 1px 2px rgba(16,48,26,.04), 0 10px 24px rgba(16,48,26,.05);
  transition: box-shadow .2s, transform .2s;
}
.hp-une-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-f); color: inherit; }
.hp-une-texte { padding: 22px 20px; display: flex; flex-direction: column; min-width: 0; }
.hp-cat {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 12px;
}
.hp-cat-vert { color: var(--vert-titre); }
.hp-cat-ambre { color: #b07806; }
.hp-cat-corail { color: var(--corail); }
.hp-une-carte h3 {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.25; margin: 0 0 1.1em;
  letter-spacing: -.01em;
}
.hp-lire {
  margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--encre);
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-une-carte:hover .hp-lire { color: var(--vert-fonce); }
.hp-une-carte img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; object-position: 50% 42%; }

/* --- Recherche de l'en-tete ---------------------------------------------- */
.entete-recherche {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  background: var(--papier-creux); border: 1px solid var(--trait);
  border-radius: var(--rayon-xs); padding: 7px 16px; min-width: 210px;
}
.entete-recherche svg { width: 16px; height: 16px; color: var(--encre-pale); flex: 0 0 16px; }
.entete-recherche input {
  border: 0; background: none; font: inherit; font-size: .88rem; width: 100%; min-width: 0;
  color: var(--encre); padding: 3px 0;
}
.entete-recherche input:focus { outline: none; }
.entete-recherche input::placeholder { color: var(--encre-pale); }
@media (max-width: 1080px) {
  .entete-recherche { display: none; }
  /* Sans le champ de recherche, plus rien ne pousse le bouton Menu a droite. */
  .entete-barre .nav-toggle { margin-left: auto; }
}

/* --- Pied de page : icones rondes ---------------------------------------- */
.pied-icones { display: flex; gap: 12px; margin-top: 22px; padding: 0; list-style: none; }
.pied-icones li { margin: 0; }
.pied-icones a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.86);
}
.pied-icones a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.pied-icones svg { width: 18px; height: 18px; }

/* --- Grille des neuf territoires (page /territoires/) -------------------- */
.hp-grille-territoires {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 26px; list-style: none; margin: 2.4em 0 0; padding: 0;
}
.hp-grille-territoires > li { margin: 0; min-width: 0; }

/* --- Ne jamais renvoyer a la ligne pour rien -----------------------------
   Un tableau de donnees enferme dans la colonne de lecture (860 px) casse ses
   cellules sur deux lignes alors qu'il reste 300 px de vide de chaque cote.
   Au-dela de 1240 px de fenetre, les tableaux debordent donc symetriquement
   de leur colonne. Verifie : a 1240 px le bord gauche reste a +30 px, il n'y
   a aucun debordement de page. */
@media (min-width: 1400px) {
  .article-corps .tableau-scroll,
  .bloc-texte .tableau-scroll {
    width: calc(100% + 200px);
    margin-left: -100px;
  }
  /* Sauf quand l'article partage la ligne avec une colonne : la debordait de
     100 px a gauche et recouvrait la colonne de droite de 40 px. Le
     debordement symetrique n'a de sens que sur une page en pleine largeur. */
  .avec-aside > .article-corps .tableau-scroll {
    width: 100%;
    margin-left: 0;
  }
}