/* ==========================================================================
   Thème Marne et Gondoire — feuille de style du front (chargée via wp_enqueue_style).
   Les couleurs et typographies sont des variables : la charte officielle se branche
   ici (et dans theme.json pour l'éditeur) sans toucher aux gabarits.
   ========================================================================== */
:root {
  /* Couleurs : kit graphique Marne et Gondoire Agglo (neutre #857a7f et les 7 champs d'action) */
  --brume: #F5F3F4;
  --papier: #FFFFFF;
  --encre: #2E292B;
  --encre-douce: #6E6468;
  --filet: #DAD5D7;
  --gondoire: #3D3639;
  --gondoire-clair: #524A4E;
  --gondoire-texte: #F4F2F3;
  --gondoire-doux: #C9C2C5;
  --marne: #5FC3E1;
  --accent-texte: #0079A7;
  --colibri: #E40045;
  --colibri-survol: #CA043D;
  --sur-colibri: #FFFFFF;
  --soleil: #FDC300;
  --sur-soleil: #2E292B;
  --teinte: #EEEBEC;
  --neutre: #857A7F;
  /* Champs d'action du kit (étiquettes thématiques) */
  --c-tourisme: #FDC300; --c-territoire: #F18700; --c-habitat: #5FC3E1; --c-social: #0079A7;
  --c-culture: #E40045; --c-environnement: #D3D700; --c-securite: #662382; --c-neutre: #DAD5D7;
  /* Bandeau « carte » (identique en mode sombre) */
  --nuit: #1E1A1C; --nuit-2: #3B3336; --sur-nuit: #F4F2F3; --sur-nuit-doux: #B9B1B4; --marne-vif: #8ED8EE;
  /* Illustrations (passent au crépuscule en mode sombre) */
  --v-ciel: #E6F4F9; --v-ciel2: #FDE9A8; --v-eau: #5FC3E1; --v-eau2: #0079A7;
  --v-vert: #7FA62A; --v-vert2: #4F7A1A; --v-pierre: #EFEBE7; --v-toit: #E40045;
  --v-miroir1: #EAF6FA; --v-miroir2: #9ED9EC; --v-sombre: #2E292B;
  /* Typographies du kit : VAG Rounded (titres, exergues) et Helvetica Neue LT Std Condensed (texte).
     Les fichiers officiels (licence) se déposent dans assets/fonts/charte/ ; en attendant, Nunito et Roboto Condensed (OFL) prennent le relais. */
  --f-titre: "VAG Rounded Std", "VAG Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  --f-texte: "Helvetica Neue LT Std", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  /* Échelle typographique */
  --t-xs: .85rem; --t-s: .975rem; --t-m: 1.1rem; --t-l: 1.3rem; --t-xl: 1.55rem;
  --t-2xl: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  --t-3xl: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem);
  /* Formes */
  --rayon: 0; --rayon-s: 0; --rayon-xs: 0; /* 1.6.9 : angles droits partout (demande de la CAMG) sauf sur les boutons, l'en-tête en pastille et les commandes du carrousel ; valeurs d'origine 14px, 8px, 5px */
  --ombre: 0 1px 2px rgb(46 41 43 / .06), 0 10px 28px -14px rgb(46 41 43 / .28);
  --conteneur: 1240px;
  --interligne: 1.6; --interlettre: 0; --intermot: 0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brume: #171415; --papier: #221E20; --encre: #ECE8E9; --encre-douce: #B7AFB2; --filet: #3A3336;
    --gondoire: #2A2527; --gondoire-clair: #3B3437; --gondoire-texte: #F4F2F3; --gondoire-doux: #B9B1B4;
    --marne: #7FD3EC; --accent-texte: #7FD3EC; --colibri: #FF5C86; --colibri-survol: #FF8AA8; --sur-colibri: #2A0A14; --soleil: #FDC300; --teinte: #2E292B; --neutre: #A79EA2;
    --c-neutre: #4A4346;
    --v-ciel: #2A2F4A; --v-ciel2: #8B577A; --v-eau: #2F6F8A; --v-eau2: #1F5370; --v-vert: #3F5A1A; --v-vert2: #2C4012;
    --v-pierre: #9A9284; --v-toit: #B0163D; --v-miroir1: #5F7FA3; --v-miroir2: #35567A; --v-sombre: #141112;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -14px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brume: #171415; --papier: #221E20; --encre: #ECE8E9; --encre-douce: #B7AFB2; --filet: #3A3336;
  --gondoire: #2A2527; --gondoire-clair: #3B3437; --gondoire-texte: #F4F2F3; --gondoire-doux: #B9B1B4;
  --marne: #7FD3EC; --accent-texte: #7FD3EC; --colibri: #FF5C86; --colibri-survol: #FF8AA8; --sur-colibri: #2A0A14; --soleil: #FDC300; --teinte: #2E292B; --neutre: #A79EA2;
  --c-neutre: #4A4346;
  --v-ciel: #2A2F4A; --v-ciel2: #8B577A; --v-eau: #2F6F8A; --v-eau2: #1F5370; --v-vert: #3F5A1A; --v-vert2: #2C4012;
  --v-pierre: #9A9284; --v-toit: #B0163D; --v-miroir1: #5F7FA3; --v-miroir2: #35567A; --v-sombre: #141112;
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -14px rgb(0 0 0 / .6);
  color-scheme: dark;
}
/* Options d'accessibilité (panneau « Affichage ») */
:root.texte-115 { font-size: 115%; }
:root.texte-130 { font-size: 130%; }
:root.espacement { --interligne: 1.85; --interlettre: .12em; --intermot: .16em; }
:root.espacement p, :root.espacement li, :root.espacement dd { margin-block-end: 2em; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; }
body {
  margin: 0; background: var(--brume); color: var(--encre);
  font: 400 var(--t-m)/var(--interligne) var(--f-texte);
  letter-spacing: var(--interlettre); word-spacing: var(--intermot);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-titre); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
h3 { font-size: var(--t-l); line-height: 1.25; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--colibri); outline-offset: 3px; border-radius: 3px; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }
.ico--plein { fill: currentColor; stroke: none; }
.conteneur {
  width: 100%; max-width: calc(var(--conteneur) + 2 * max(16px, env(safe-area-inset-left, 0px)));
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) { .conteneur { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); max-width: calc(var(--conteneur) + 64px); } }

/* Liens d'évitement (RGAA 12.7) */
.evitement { position: absolute; top: 0; left: 0; z-index: 100; display: flex; gap: .5rem; padding: .5rem; transform: translateY(-120%); }
.evitement:focus-within { transform: none; }
.evitement a { background: var(--colibri); color: var(--sur-colibri); padding: .5rem .9rem; border-radius: var(--rayon-s); font-weight: 700; text-decoration: none; }

.ruban-maquette {
  background: repeating-linear-gradient(-45deg, var(--soleil) 0 14px, #E3B000 14px 28px);
  color: var(--sur-soleil); font-size: var(--t-xs); font-weight: 700; text-align: center; letter-spacing: .04em;
  padding-block: .35rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: var(--t-s); text-decoration: none; line-height: 1.2; transition: background .15s, color .15s, border-color .15s;
}
.btn--plein { background: var(--colibri); color: var(--sur-colibri); }
.btn--plein:hover { background: var(--colibri-survol); }
.btn--contour { border-color: currentColor; background: transparent; }
.btn--contour:hover { background: var(--teinte); }
.btn--clair { background: var(--gondoire-texte); color: var(--gondoire); }
.btn--clair:hover { background: #fff; }
.lien-fleche { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; color: var(--encre); }
.lien-fleche .ico { transition: transform .2s; }
.lien-fleche:hover .ico { transform: translateX(3px); }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- En-tête (rétractable au scroll) ----------
   Fixe (hors flux) : sa rétractation ne déplace plus la page sous le doigt.
   Sa hauteur ne change jamais : en mode réduit, il remonte de la hauteur de la barre haute (--barre-h, mesurée en JS).
   On anime « top » et non « transform » : un transform sur l'en-tête deviendrait le repère du tiroir mobile (.nav en position fixe). */
.entete { --entete-top: env(safe-area-inset-top, 0px); position: fixed; top: var(--entete-top); left: 0; right: 0; z-index: 50; background: transparent; padding: 0 var(--pastille-marge) var(--pastille-bas); --pastille-marge: 16px; --pastille-bas: 0px; transition: top .25s ease; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--papier); }
.entete.est-reduit { top: calc(var(--entete-top) + 10px - var(--barre-h, 3.75rem)); }
.barre-haute { position: relative; z-index: 2; font-size: var(--t-s); transition: opacity .2s, visibility 0s linear 0s; }
.entete.est-reduit .barre-haute { opacity: 0; visibility: hidden; pointer-events: none; border-bottom-color: transparent; transition: opacity .2s, visibility 0s linear .2s; }
.barre-haute__in { display: flex; align-items: center; gap: 1rem; min-height: 2.9rem; }
.barre-haute__gauche { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.barre-haute__liens { display: flex; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.barre-haute__liens a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .2rem; font-weight: 700; color: var(--encre); text-decoration: none; }
.barre-haute__liens a:hover, .barre-haute__liens a:focus-visible { text-decoration: underline; }
@media (max-width: 600px) { .barre-haute__liens { display: none; } }
.jesuis { position: relative; }
.jesuis__btn, .acces__btn {
  display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; padding: .4rem .2rem;
  font-weight: 700; color: var(--encre); min-height: 40px;
}
.jesuis__btn .chevron, .nav__btn .chevron { width: .9em; height: .9em; transition: transform .2s; }
[aria-expanded="true"] > .chevron { transform: rotate(180deg); }
.jesuis__menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 70; width: min(560px, calc(100vw - 32px));
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; list-style: none;
}
.jesuis__menu a { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--rayon-s); text-decoration: none; font-weight: 600; }
.jesuis__menu a:hover, .jesuis__menu a:focus-visible { background: var(--teinte); }
.jesuis__menu .ico { color: var(--colibri); }
.barre-haute__droite { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.reseaux { display: flex; gap: .15rem; list-style: none; }
.reseaux a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--encre-douce); }
.reseaux a:hover { background: var(--teinte); color: var(--encre); }
.reseaux .ico { width: 1.15rem; height: 1.15rem; }
.acces { position: relative; }
.acces__btn { border: 1.5px solid var(--filet); border-radius: 999px; padding: .3rem .8rem; }
.acces__btn:hover { border-color: var(--encre-douce); }
@media (min-width: 1361px) { .acces__btn, .recherche-btn { min-width: 8.5rem; justify-content: center; } }
.acces__panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: min(320px, calc(100vw - 32px));
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.1rem;
  display: grid; gap: 1rem;
}
.acces__panneau fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.acces__panneau legend { font-weight: 700; font-size: var(--t-s); margin-bottom: .4rem; padding: 0; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--brume); border-radius: 999px; padding: 3px; }
.segment label { position: relative; text-align: center; padding: .4rem .3rem; border-radius: 999px; font-size: var(--t-s); cursor: pointer; }
.segment input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segment label:has(input:checked) { background: var(--papier); box-shadow: 0 1px 3px rgb(0 0 0 / .15); font-weight: 700; }
.segment label:has(input:focus-visible) { outline: 3px solid var(--colibri); outline-offset: 1px; }
.acces__reinit { justify-self: start; background: none; border: 0; padding: 0; text-decoration: underline; font-size: var(--t-s); color: var(--encre-douce); }

.entete__in { display: flex; align-items: center; gap: 1.25rem; min-height: 5.5rem; }
/* En-tête en pastille flottante : logo d'origine, filet bleu vertical, liseré bas */
.entete__in {
  background: var(--papier); border-radius: 999px; border-bottom: 3px solid var(--marne); box-shadow: var(--ombre);
  max-width: calc(var(--conteneur) + 64px); padding-left: clamp(18px, 2.5vw, 32px); padding-right: 12px;
}
.entete__in .marque { position: relative; padding-right: clamp(14px, 2vw, 28px); margin-right: clamp(0px, 1vw, 8px); }
.entete__in .marque::after {
  content: ""; position: absolute; right: 0; top: 50%; height: 56%; width: 2px; border-radius: 2px;
  background: var(--marne); transform: translateY(-50%);
}
.entete__in .marque:focus-visible { outline-color: var(--marne); outline-offset: 4px; border-radius: var(--rayon-s); }
/* Le premier bloc de la page (bandeau .une, tête de page…) passe sous l'en-tête fixe : son fond continue derrière la pastille */
#contenu > :first-child { padding-top: var(--entete-h, 9.25rem); }
body:has(#contenu > .une:first-child) .entete:not(.est-reduit) :is(.jesuis__btn, .acces__btn, .barre-haute__liens a, .reseaux a) { color: var(--sur-nuit); }
body:has(#contenu > .une:first-child) .entete:not(.est-reduit) :is(.acces__btn, .burger) { border-color: rgb(255 255 255 / .3); }
body:has(#contenu > .une:first-child) .entete:not(.est-reduit) :is(.reseaux a:hover, .acces__btn:hover) { background: rgb(255 255 255 / .12); }
.marque { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--encre); flex: none; }
.marque .logo { width: auto; height: 72px; display: block; }
.logo__texte, .logo__colibri { fill: currentColor; }
.marque__texte { display: grid; line-height: .92; }
.marque__nom { font-family: var(--f-titre); font-weight: 700; font-size: 1.6rem; letter-spacing: .005em; }
.marque__nom em { font-style: normal; color: var(--colibri); }
.marque__agglo { font-size: .72rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--encre-douce); margin-top: .2rem; }

.nav { margin-left: auto; min-width: 0; }
.nav__liste { display: flex; flex-wrap: nowrap; list-style: none; gap: .1rem; justify-content: flex-end; }
.nav__btn {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; border-radius: var(--rayon-s);
  padding: .6rem .7rem; font-weight: 700; font-size: var(--t-s); color: var(--encre); min-height: 44px; white-space: nowrap;
}
.nav__btn:hover, .nav__btn[aria-expanded="true"] { background: var(--teinte); }
.nav__btn[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--accent-menu, var(--colibri)); }
/* Rubrique courante : même couleur que sa rubrique (choix de l'agglo), rouge colibri sans rubrique. */
.nav__item.est-courant > .nav__btn { box-shadow: inset 0 -3px 0 var(--accent-menu, var(--colibri)); }
/* Couleur de rubrique = champ d'action du kit (réglable dans Options de la page) : survols et liserés du panneau. Tourisme et Environnement en nuance « soutien », les teintes vives ne tiennent pas en trait fin. */
.nav__item[data-champ="tourisme"] { --accent-menu: #E3B000; }
.nav__item[data-champ="territoire"] { --accent-menu: var(--c-territoire); }
.nav__item[data-champ="habitat"] { --accent-menu: var(--c-habitat); }
.nav__item[data-champ="social"] { --accent-menu: var(--c-social); }
.nav__item[data-champ="culture"] { --accent-menu: var(--c-culture); }
.nav__item[data-champ="environnement"] { --accent-menu: #B3B800; }
.nav__item[data-champ="securite"] { --accent-menu: var(--c-securite); }
.nav__item[data-champ="neutre"] { --accent-menu: var(--neutre); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--papier); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); box-shadow: var(--ombre);
}
.mega__in { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 2.5rem; padding-block: 2rem 2.25rem; }
.mega__titre { font-family: var(--f-titre); font-size: 2.1rem; font-weight: 700; margin-bottom: 1rem; }
.mega__liens { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 1.5rem; }
.mega__liens a { display: block; padding: .6rem .5rem .6rem .75rem; border-left: 2px solid var(--filet); text-decoration: none; }
.mega__liens a:hover, .mega__liens a:focus-visible { border-left-color: var(--accent-menu, var(--colibri)); background: var(--brume); }
.mega__liens strong { display: block; font-size: var(--t-s); }
.mega__liens span { display: block; font-size: var(--t-xs); color: var(--encre-douce); line-height: 1.4; }
.mega__zoom { border-radius: var(--rayon); overflow: hidden; background: var(--gondoire); color: var(--gondoire-texte); text-decoration: none; display: grid; }
.mega__zoom svg { width: 100%; height: 140px; display: block; }
.mega__zoom div { padding: .9rem 1rem 1.1rem; display: grid; gap: .25rem; }
.mega__zoom small { display: flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--gondoire-doux); }
.mega__zoom small::before { content: ""; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--accent-menu, var(--soleil)); flex: none; }
.mega__zoom strong { font-size: var(--t-m); }
.entete__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.recherche-btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .95rem; border-radius: 999px;
  border: 0; background: var(--gondoire); color: var(--gondoire-texte); font-weight: 700; font-size: var(--t-s);
}
.recherche-btn:hover { background: var(--gondoire-clair); }
.recherche-btn kbd { display: none; }
.burger { display: none; background: none; border: 1.5px solid var(--filet); border-radius: 8px; width: 44px; height: 44px; place-items: center; color: var(--encre); }

@media (max-width: 1360px) {
  .recherche-btn .libelle { display: none; }
  .recherche-btn { width: 44px; padding: 0; justify-content: center; }
  .nav__btn { font-size: .9rem; padding: .55rem .5rem; gap: .25rem; }
  .marque .logo { height: 60px; }
  .entete__in { gap: .9rem; min-height: 5rem; }
}
@media (max-width: 1180px) {
  .burger { display: grid; }
  .entete__actions { margin-left: auto; }
  .reseaux { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); z-index: 80; margin: 0;
    background: var(--papier); box-shadow: var(--ombre); overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 4.5rem) max(16px, env(safe-area-inset-right, 0px)) 2rem 16px;
    transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s;
  }
  body.nav-ouverte .nav { transform: none; visibility: visible; }
  body.nav-ouverte::after { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 49; }
  .nav__fermer { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: max(16px, env(safe-area-inset-right, 0px)); }
  .nav__liste { flex-direction: column; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--filet); }
  .nav__btn { width: 100%; justify-content: space-between; font-size: var(--t-m); padding: .9rem .25rem; border-radius: 0; }
  .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: none; }
  .mega { position: static; box-shadow: none; border: 0; background: none; }
  .mega__in { grid-template-columns: 1fr; padding: 0 0 1rem; gap: 1rem; }
  .mega__titre, .mega__zoom { display: none; }
  .mega__liens { grid-template-columns: 1fr; }
}
@media (min-width: 1181px) {
  .nav__fermer { display: none; }
  .mega { top: calc(100% + 6px); left: var(--pastille-marge); right: var(--pastille-marge); max-width: calc(var(--conteneur) + 64px); margin-inline: auto; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
}
@media (max-width: 560px) {
  .marque__nom { font-size: 1.3rem; }
  .marque .logo { height: 54px; }
  .acces__btn .libelle { display: none; }
  .entete__in { gap: .6rem; padding-left: 14px; padding-right: 8px; }
  .entete { --pastille-marge: 10px; }
  .entete__in .marque { padding-right: 12px; }
}

/* ---------- Une (bandeau d'ouverture) ---------- */
.une { background: var(--gondoire); color: var(--gondoire-texte); position: relative; overflow: hidden; }
.une::before {
  content: ""; position: absolute; inset: auto -10% -40% 30%; height: 90%;
  background: radial-gradient(closest-side, rgb(95 195 225 / .18), transparent); pointer-events: none;
}
.une__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2.25rem, 5vw, 4.25rem); align-items: center; }
.surtitre { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marne); }
.une h1 { font-size: var(--t-3xl); margin-block: .6rem 1.1rem; max-width: 15ch; }
.une h1 .ligne { display: block; }
.une h1 .accent, .une h1 .mot { color: var(--marne); }
.une h1 .mot { display: inline-grid; vertical-align: top; overflow: hidden; padding-block: .08em .16em; margin-block: -.08em -.16em; }
.une h1 .mot > span { grid-area: 1 / 1; display: block; transition: transform .55s cubic-bezier(.3, .8, .2, 1), opacity .4s; }
.une h1 .mot > span.sort { transform: translateY(-105%); opacity: 0; }
.une h1 .mot > span.vient { transform: translateY(105%); opacity: 0; transition: none; }
.une__chapo { color: var(--gondoire-doux); max-width: 46ch; margin-bottom: 1.6rem; font-family: var(--f-titre); font-weight: 300; font-size: var(--t-l); line-height: 1.4; }
.recherche { position: relative; max-width: 560px; }
.recherche__label { display: block; font-weight: 700; margin-bottom: .5rem; }
.recherche__champ { display: flex; align-items: center; background: var(--papier); color: var(--encre); border-radius: 0; padding: .35rem .35rem .35rem 1.1rem; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .45); }
.recherche__champ:focus-within { outline: 3px solid var(--marne); outline-offset: 2px; }
.recherche__champ input[type="search"] { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; padding: .55rem .4rem; outline: none; font-size: var(--t-m); }
.recherche__champ input::placeholder { color: var(--encre-douce); }
.recherche__champ .btn { flex: none; }
.pastilles { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; align-items: center; font-size: var(--t-s); }
.pastilles span { color: var(--gondoire-doux); margin-right: .2rem; }
.pastilles a { padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .28); text-decoration: none; }
.pastilles a:hover { background: rgb(255 255 255 / .1); border-color: var(--marne); }

/* Suggestions de recherche (listbox) */
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; list-style: none; background: var(--papier); color: var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--filet); padding: .4rem; max-height: 22rem; overflow-y: auto; }
.suggestions li { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--rayon-s); cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--teinte); }
.suggestions mark { background: none; color: var(--colibri); font-weight: 700; }
.type-badge { flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .45rem; border-radius: var(--rayon-xs); background: var(--brume); color: var(--encre-douce); }
.suggestions__vide { color: var(--encre-douce); font-size: var(--t-s); cursor: default !important; }

/* Carrousel À la Une : défilement manuel uniquement (écoconception + RGAA 13.8) */
.alaune { position: relative; }
.alaune__piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--rayon); list-style: none; }
.alaune__piste::-webkit-scrollbar { display: none; }
.diapo { position: relative; scroll-snap-align: start; background: var(--papier); color: var(--encre); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.diapo__visuel { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--v-ciel); }
.diapo__visuel svg { width: 100%; height: 100%; display: block; }
.diapo__type { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .35rem; background: var(--papier); color: var(--encre); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 0; }
.diapo__jouer { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--colibri); color: var(--sur-colibri); display: grid; place-items: center; }
.diapo__corps { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: .45rem; align-content: start; }
.diapo__corps h2 { font-family: var(--f-texte); font-size: var(--t-l); font-weight: 700; line-height: 1.25; }
.diapo__corps h2 a { text-decoration: none; }
.diapo__corps h2 a::after { content: ""; position: absolute; inset: 0; }
.diapo__corps h2 a:hover { text-decoration: underline; }
.diapo__corps p { color: var(--encre-douce); font-size: var(--t-s); }
.alaune__commandes { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.alaune__commandes button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .35); background: none; color: var(--gondoire-texte); display: grid; place-items: center; }
.alaune__commandes button:hover { background: rgb(255 255 255 / .1); border-color: var(--marne); }
.alaune__commandes button:disabled { opacity: .35; cursor: default; }
.alaune__points { display: flex; gap: .4rem; list-style: none; }
.alaune__points button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; padding: 0; }
.alaune__points button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .35); transition: width .2s; }
.alaune__points button[aria-current="true"]::before { background: var(--marne); width: 22px; border-radius: 6px; }
.alaune__etat { margin-left: auto; font-size: var(--t-s); color: var(--gondoire-doux); font-variant-numeric: tabular-nums; }
/* Défilement automatique (1.5.0) : le point actif se remplit pendant la durée d'affichage ; bouton pause / lecture */
.alaune__points button { position: relative; }
.alaune__points button::after { content: ""; position: absolute; left: 3px; top: 50%; width: 0; height: 9px; margin-top: -4.5px; border-radius: 6px; background: #fff; opacity: .85; pointer-events: none; }
.alaune.est-en-lecture .alaune__points button[aria-current="true"]::after { animation: alaune-jauge var(--duree, 6s) linear forwards; }
@keyframes alaune-jauge { to { width: 22px; } }
.alaune__commandes .alaune__lecture { width: 36px; height: 36px; border-color: rgb(255 255 255 / .22); }
.alaune__lecture .ico { width: 1rem; height: 1rem; }
.alaune__lecture .ico--lecture, .alaune__lecture.est-en-pause .ico--pause { display: none; }
.alaune__lecture.est-en-pause .ico--lecture { display: block; margin-left: 2px; }
.alaune__commandes .alaune__lecture:hover { background: rgb(255 255 255 / .1); border-color: var(--marne); }

/* Mode « carte » : fond nocturne animé (canvas), carte lumineuse, vague de transition */
.une--aurore { background: var(--nuit); color: var(--sur-nuit); isolation: isolate; }
.une--aurore::before { display: none; }
.une__ciel { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 85% 30%, var(--nuit-2) 0%, var(--nuit) 55%), var(--nuit); }
.une__aurore { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.une--aurore .une__in { padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(4.5rem, 8vw, 7rem); }
.une--aurore .surtitre { color: var(--marne-vif); }
.une--aurore .une__chapo, .une--aurore .pastilles span { color: var(--sur-nuit-doux); }
.une--aurore .recherche__champ { box-shadow: 0 20px 60px -20px rgb(95 195 225 / .45), 0 0 0 1px rgb(255 255 255 / .1); }
.une--aurore .recherche__champ:focus-within { outline-color: var(--soleil); }
.une--aurore :focus-visible { outline-color: var(--soleil); }
.une__carte { position: relative; transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.une__carte::before { content: ""; position: absolute; inset: 8% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(95 195 225 / .32), transparent 70%); filter: blur(18px); z-index: -1; }
/* Nom de la commune éclairée : posé sur la carte, en haut à gauche (zone vide du dessin), libellé dessous */
.carte__nom { position: absolute; left: 0; top: 7%; z-index: 2; max-width: 52%; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.05; color: var(--sur-nuit); text-wrap: balance; pointer-events: none; }
.carte__nom small { font-family: var(--f-texte); font-weight: 700; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--marne-vif); }
.une__svg { width: 100%; height: auto; display: block; max-height: 560px; margin-inline: auto; overflow: visible; }
.une__svg .carte-ombre { fill: rgb(0 0 0 / .35); }
.une__svg .commune path { fill: rgb(255 255 255 / .06); stroke: var(--marne); stroke-width: 1.4; stroke-linejoin: round; transition: fill .35s, filter .35s; transform-box: fill-box; transform-origin: center; cursor: pointer; }
.une__svg .commune:hover path, .une__svg .commune:focus-visible path, .une__svg .commune.est-lumiere path { fill: rgb(95 195 225 / .5); filter: drop-shadow(0 0 10px rgb(142 216 238 / .9)); }
.une__svg .commune.est-mienne path { fill: var(--soleil); stroke: #fff; }
.une__svg .commune:focus-visible { outline: none; }
.une__svg .commune:focus-visible path { stroke: var(--soleil); stroke-width: 3; }
.une__svg .riviere { stroke: var(--marne-vif); stroke-width: 3; stroke-dasharray: 7 9; filter: drop-shadow(0 0 6px rgb(142 216 238 / .9)); }
.une__svg .riviere--gondoire { stroke-width: 1.8; }
.une__svg .riviere-nom { fill: #fff; font-weight: 700; letter-spacing: .08em; paint-order: stroke; stroke: var(--nuit); stroke-width: 3px; stroke-linejoin: round; }
.une__svg .point { fill: var(--soleil); stroke: var(--nuit); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.une__svg .siege circle { fill: var(--colibri); stroke: #fff; stroke-width: 2; }
.une__svg .siege path { fill: #fff; }
.siege { pointer-events: none; } /* le pictogramme du siège laisse passer le survol et le clic à la commune */
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; font-size: var(--t-s); color: var(--sur-nuit-doux); }
.carte__pied p { margin: 0; }
.carte__pied strong { color: var(--sur-nuit); }
.carte__pied a { color: var(--sur-nuit); font-weight: 700; }
.ma-commune { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 0; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .15); }
/* Fiche de la commune choisie (1.7.1) : coordonnées de la mairie, population, liens */
.carte__fiche { width: 100%; display: grid; gap: .3rem; padding: .7rem .9rem; background: rgb(255 255 255 / .06); border-left: 3px solid var(--soleil); font-size: var(--t-s); line-height: 1.45; }
.carte__fiche[hidden] { display: none; }
.carte__fiche-habitants { font-weight: 700; color: var(--sur-nuit); }
.carte__fiche-liens { display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
.dlg-carte .carte__fiche { max-width: 24rem; margin-top: .9rem; background: rgb(255 255 255 / .08); color: #fff; border-left-color: var(--marne); }
.dlg-carte .carte__fiche a { color: #fff; }
.macommune__info { display: grid; gap: .3rem; }
.macommune__info .carte__fiche-adresse { color: var(--gondoire-texte); }
.macommune__info .carte__fiche-habitants { color: var(--gondoire-texte); }
.macommune__info a { color: var(--gondoire-texte); font-weight: 700; }
.ma-commune .ico { color: var(--soleil); }
/* Mode « carrousel » (1.5.0) : même ciel nocturne animé et même vague que le mode carte ; le carrousel prend la place de la carte,
   avec le même halo bleu derrière lui. La carte reste accessible par le bouton « Ma commune » de l'en-tête (ci-dessous). */
.une--alaune .alaune::before { content: ""; position: absolute; inset: 6% 8% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(95 195 225 / .3), transparent 70%); filter: blur(18px); z-index: -1; pointer-events: none; }
.une--alaune .alaune__piste { box-shadow: 0 30px 70px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08); }
.une--alaune .alaune__commandes button { color: var(--sur-nuit); border-color: rgb(255 255 255 / .3); }
.une--alaune .alaune__etat { color: var(--sur-nuit-doux); }
/* Présentation « grande image défilante » (1.6.7, par défaut en mode carrousel) : plus de colonne de gauche, le carrousel
   occupe toute la largeur. Écran large : image en plein cadre, cartouche de texte sombre en bas à gauche (contraste
   assuré quelle que soit la photo), commandes en bas à droite, alignés sur la grille du site. Écran étroit : image puis texte. */
.une--plein { --vague: clamp(40px, 7vw, 96px); --bord: 16px; background: var(--nuit); color: var(--sur-nuit); isolation: isolate; padding-bottom: var(--vague); }
.une--plein::before { display: none; }
.une--plein .alaune__piste { border-radius: 0; }
.une--plein .alaune__piste:focus-visible { outline: 3px solid var(--soleil); outline-offset: -3px; }
.une--plein .diapo { background: var(--nuit); color: var(--sur-nuit); }
.une--plein .diapo__visuel { aspect-ratio: 16 / 9; }
.une--plein .diapo__corps { padding: 1.1rem var(--bord) 1.2rem; }
.une--plein .diapo__cadre { display: grid; gap: .55rem; justify-items: start; max-width: 40rem; }
.une--plein .diapo__type { position: static; background: var(--marne-vif); color: var(--nuit); }
.une--plein .diapo__corps h2 { font-family: var(--f-titre); font-size: var(--t-xl); line-height: 1.15; }
.une--plein .diapo__corps h2 a { color: inherit; }
.une--plein .diapo__corps p { color: #DCD6D8; font-size: var(--t-m); line-height: 1.45; }
.une--plein .alaune__commandes { margin-top: .4rem; padding-inline: var(--bord); }
.une--plein .alaune__commandes button { color: var(--sur-nuit); border-color: rgb(255 255 255 / .35); }
.une--plein .alaune__points button::before { background: rgb(255 255 255 / .55); }
.une--plein .alaune__points button[aria-current="true"]::before { background: var(--marne-vif); }
.une--plein .alaune__etat { color: var(--sur-nuit-doux); }
.une--plein :focus-visible { outline-color: var(--soleil); }
@media (max-width: 600px) { .une--plein .diapo__visuel { aspect-ratio: 3 / 2; } }
@media (min-width: 900px) { .une--plein { --bord: max(32px, calc((100% - var(--conteneur)) / 2)); } }
@media (min-width: 1024px) {
  /* L'image remonte sous l'en-tête flottant ; un voile sombre en haut garde lisibles les liens blancs de la barre haute */
  #contenu > .une--plein:first-child { padding-top: 0; }
  .une--plein { padding-bottom: 0; }
  .une--plein .alaune__piste { height: clamp(560px, 88vh, 940px); grid-template-rows: minmax(0, 1fr); overflow-y: hidden; }
  .une--plein .diapo__visuel::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: calc(var(--entete-h, 9.25rem) + 4rem); background: linear-gradient(rgb(30 26 28 / .72), rgb(30 26 28 / .35) 60%, transparent); pointer-events: none; }
  .une--plein .diapo { grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; }
  .une--plein .diapo__visuel, .une--plein .diapo__corps { grid-area: 1 / 1; min-height: 0; }
  .une--plein .diapo__visuel { aspect-ratio: auto; overflow: hidden; }
  .une--plein .diapo__visuel::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(30 26 28 / .5)); pointer-events: none; }
  .une--plein .diapo__corps { position: relative; z-index: 1; display: flex; align-items: flex-end; padding: calc(var(--entete-h, 9.25rem) + 1rem) var(--bord) calc(var(--vague) + 1.5rem); }
  .une--plein .diapo__cadre { max-width: min(36rem, 50%); padding: 1.25rem 1.5rem 1.4rem; border-radius: var(--rayon); background: rgb(30 26 28 / .86); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .6); }
  .une--plein .diapo__corps h2 { font-size: var(--t-2xl); }
  .une--plein .alaune__commandes { position: absolute; z-index: 2; right: var(--bord); bottom: calc(var(--vague) + 1.5rem); margin: 0; padding: .35rem .9rem .35rem .4rem; gap: .5rem; border-radius: 999px; background: rgb(30 26 28 / .82); }
  .une--plein .alaune__etat { margin-left: .2rem; }
}
/* Bouton « Ma commune » de l'en-tête (toutes les pages depuis la 1.7.0) : à gauche de la recherche, même gabarit (44 px),
   pastille bleu Marne, picto blanc, anneau translucide ; point jaune une fois la commune choisie ; chargement au premier clic sur les pages intérieures */
.carte-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--marne); color: #fff; cursor: pointer; box-shadow: 0 0 0 4px rgb(95 195 225 / .22); transition: background-color .2s, box-shadow .25s, transform .25s cubic-bezier(.3, 1.4, .4, 1); }
.carte-btn[hidden] { display: none; }
.carte-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.carte-btn .ico { width: 20px; height: 20px; color: #fff; }
.carte-btn:hover, .carte-btn:focus-visible, .carte-btn[aria-expanded="true"] { background: #4AB3D4; box-shadow: 0 0 0 6px rgb(95 195 225 / .3); transform: scale(1.05); }
.carte-btn:focus-visible { outline: 3px solid var(--soleil); outline-offset: 6px; }
.carte-btn.a-commune::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--soleil); box-shadow: 0 0 0 2px var(--papier); }
/* Boîte de dialogue de la carte (1.6.9, maquette XD « Modal-CARTE » de la CAMG) : panneau gris foncé à angles droits ;
   à gauche « Le territoire / Les 20 communes », la commune survolée ou choisie en grand, « Ma commune » souligné en bas ;
   à droite la carte en aplats (communes grises, frontières claires, rivières au trait, commune choisie en bleu Marne). */
.dlg-carte { --dlg-fond: #5A5256; width: min(1040px, calc(100vw - 24px)); max-height: min(94vh, 900px); margin: auto; padding: 0; border: 0; border-radius: 0; background: var(--dlg-fond); color: #fff; box-shadow: 0 30px 80px -24px rgb(0 0 0 / .6); overflow: auto; }
.dlg-carte::backdrop { background: rgb(30 26 28 / .62); backdrop-filter: blur(4px); }
.dlg-carte__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); }
.dlg-carte__tete { grid-column: 1; grid-row: 1; }
.dlg-carte__tete .surtitre { color: var(--marne-vif); font-family: var(--f-titre); font-size: var(--t-s); letter-spacing: .02em; }
.dlg-carte__tete h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 700; text-transform: uppercase; margin-top: .15rem; color: #fff; }
.dlg__x { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.dlg__x .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.4; }
.dlg__x:hover { background: rgb(127 127 127 / .14); }
.dlg-carte :focus-visible { outline-color: var(--soleil); }
.dlg-carte .une__carte { display: contents; }
.dlg-carte .une__carte::before { display: none; }
.dlg-carte .carte__nom { position: static; grid-column: 1; grid-row: 2; align-self: center; max-width: none; margin: 2rem 0; flex-direction: column-reverse; gap: .35rem; font-family: var(--f-titre); font-weight: 300; font-size: clamp(1.9rem, 1rem + 2.4vw, 3rem); line-height: 1.08; color: var(--marne); overflow-wrap: break-word; }
.dlg-carte .carte__nom small { font-family: var(--f-texte); font-weight: 700; font-size: var(--t-xs); letter-spacing: .1em; color: #fff; }
.dlg-carte .une__svg { grid-column: 2; grid-row: 1 / 4; width: 100%; height: auto; max-height: min(80vh, 760px); margin: 0; justify-self: center; align-self: center; }
.dlg-carte .carte__pied { grid-column: 1; grid-row: 3; justify-content: flex-start; text-align: left; margin: 0; }
.dlg-carte .ma-commune { width: 100%; max-width: 24rem; padding: .7rem 0; background: none; border: 0; border-bottom: 1px solid rgb(255 255 255 / .6); color: #fff; font-family: var(--f-titre); font-weight: 300; }
.dlg-carte .ma-commune .ico { color: var(--marne-vif); }
.dlg-carte .ma-commune strong { font-weight: 400; }
.dlg-carte .ma-commune a { color: #fff; }
.dlg-carte .carte__legende { display: none; }
/* Carte en aplats dans la boîte de dialogue (pas de halo ni de pointillés animés) ; frontières claires : contraste ≥ 3:1 avec le fond (RGAA 3.3) */
.dlg-carte .une__svg .carte-ombre, .dlg-carte .une__svg .point, .dlg-carte .une__svg .siege, .dlg-carte .une__svg .riviere-nom { display: none; }
.dlg-carte .une__svg .commune path { fill: #7A7074; stroke: #CFC9CB; stroke-width: .7; filter: none; }
.dlg-carte .une__svg .commune:hover path, .dlg-carte .une__svg .commune:focus-visible path, .dlg-carte .une__svg .commune.est-lumiere path { fill: #8FD0E6; filter: none; }
.dlg-carte .une__svg .commune.est-mienne path { fill: var(--marne); stroke: #fff; }
.dlg-carte .une__svg .commune:focus-visible path { stroke: var(--soleil); stroke-width: 2.5; }
.dlg-carte .une__svg .riviere { stroke: var(--marne); stroke-width: 1.6; stroke-dasharray: none; filter: none; animation: none; }
.dlg-carte .une__svg .riviere--gondoire { stroke-width: 1; }
@media (max-width: 760px) {
  .dlg-carte__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 1.5rem; }
  .dlg-carte__tete, .dlg-carte .carte__nom, .dlg-carte .une__svg, .dlg-carte .carte__pied { grid-column: 1; grid-row: auto; }
  .dlg-carte .carte__nom { margin: 1.1rem 0 .6rem; font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .dlg-carte .une__svg { max-height: 58vh; margin-bottom: 1rem; }
}
/* Vague du bandeau */
.une__vague { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: clamp(40px, 7vw, 96px); display: block; color: var(--brume); pointer-events: none; }
.une__vague path { fill: currentColor; }
.une:has(+ .section--papier) .une__vague { color: var(--papier); }
/* Vagues de la bande agenda : trois couches de la Marne qui glissent à des vitesses différentes */
.vagues { position: absolute; left: 0; right: 0; height: clamp(40px, 7vw, 96px); overflow: hidden; color: var(--brume); pointer-events: none; }
.vagues--haut { top: -1px; transform: scaleY(-1); }
.vagues--bas { bottom: -1px; }
.section--papier + .section--agenda .vagues--haut, .section--agenda:has(+ .section--papier) .vagues--bas { color: var(--papier); }
/* Sur la bande sombre, les couches arrière sont bleu Marne comme dans le bandeau ; seule la couche avant prend la couleur de la section voisine. */
.section--agenda .vagues__couche--1, .section--agenda .vagues__couche--2 { color: var(--marne); }
.vagues__couche { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 100%; display: block; }
.vagues__couche path { fill: currentColor; }
.vagues__couche--1 { opacity: .32; }
.vagues__couche--2 { opacity: .55; }
@keyframes vague-glisser { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Animations du bandeau (désactivées si l'utilisateur préfère réduire les animations) */
@media (prefers-reduced-motion: no-preference) {
  .une--aurore .surtitre, .une--aurore h1, .une--aurore .une__chapo, .une--aurore .recherche, .une--aurore .pastilles, .une__carte, .une--aurore .alaune { animation: une-monter .8s both; }
  .une--aurore h1 { animation-delay: .08s; } .une--aurore .une__chapo { animation-delay: .16s; } .une--aurore .recherche { animation-delay: .24s; } .une--aurore .pastilles { animation-delay: .32s; } .une__carte, .une--aurore .alaune { animation-delay: .2s; animation-duration: 1s; }
  .une__svg .commune path { animation: une-eclore .7s both; animation-delay: calc(var(--i, 0) * 55ms + .35s); }
  .une__svg .riviere { animation: une-couler 2.8s linear infinite; }
  .une__svg .point { animation: une-battre 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 130ms); }
  .une__vague-fond { animation: une-onduler 9s ease-in-out infinite alternate; }
  .vagues__couche--1 { animation: vague-glisser 28s linear infinite; }
  .vagues__couche--2 { animation: vague-glisser 18s linear infinite reverse; }
  .vagues__couche--3 { animation: vague-glisser 12s linear infinite; }
}
@keyframes une-onduler { from { transform: translateX(0); } to { transform: translateX(-4%); } }
@keyframes une-monter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes une-eclore { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes une-couler { to { stroke-dashoffset: -48; } }
@keyframes une-battre { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
@keyframes une-onduler { from { transform: translateX(0); } to { transform: translateX(-4%); } }

@media (max-width: 900px) {
  .une__in { grid-template-columns: 1fr; }
  .une h1 { max-width: 16ch; }
  .une__carte { max-width: 520px; margin-inline: auto; width: 100%; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.section--papier { background: var(--papier); }
.section--teinte { background: var(--teinte); }
.section__tete { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.section__tete h2 { font-size: var(--t-2xl); }
.section__tete p { color: var(--encre-douce); margin-top: .4rem; max-width: 60ch; font-family: var(--f-titre); font-weight: 300; font-size: var(--t-l); line-height: 1.4; }

/* Bandeaux d'accès rapides (pictos) */
/* Accès rapides : tuiles sur 4 colonnes (2 rangées pour 8 liens), relief au survol */
.rapides { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rapides a {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; min-height: 170px; height: 100%;
  padding: 1.2rem; border-radius: var(--rayon); background: var(--papier); border: 1px solid var(--filet); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform .3s, box-shadow .3s;
}
.section--papier .rapides a { background: var(--brume); }
.rapides a::after { content: ""; position: absolute; inset: auto -30% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--marne) 35%, transparent), transparent); z-index: -2; transform: scale(.4); opacity: 0; transition: transform .5s, opacity .5s; }
.rapides a:hover { transform: translateY(-5px); box-shadow: var(--ombre); }
.rapides a:hover::after { transform: scale(1.3); opacity: 1; }
/* Colibri du logo, retourné, qui entre dans le halo bleu au survol (au-dessus du halo, derrière le texte) */
.rapides a::before { content: ""; position: absolute; right: 1.2rem; bottom: 3.4rem; z-index: -1; width: clamp(60px, 28%, 96px); aspect-ratio: 338 / 194; background: var(--encre-douce); -webkit-mask: url("../img/colibri.svg") center / contain no-repeat; mask: url("../img/colibri.svg") center / contain no-repeat; opacity: 0; transform: translate(30px, 16px) rotate(10deg); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.rapides a:hover::before, .rapides a:focus-visible::before { opacity: .85; transform: none; }
@media (prefers-reduced-motion: reduce) { .rapides a::before { transform: none; } }
.rapides .pastille-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--colibri); transition: transform .4s cubic-bezier(.3, 1.6, .4, 1); }
.rapides a:hover .pastille-ico { transform: translateY(-4px) rotate(-6deg); }
.rapides .pastille-ico .ico { width: 2.4rem; height: 2.4rem; stroke-width: 1.6; }
.rapides strong { display: block; font-size: var(--t-l); line-height: 1.2; font-family: var(--f-titre); font-weight: 700; }
.rapides span { display: block; margin-top: .3rem; color: var(--encre-douce); font-size: var(--t-s); line-height: 1.4; }
@media (max-width: 1080px) { .rapides { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .rapides a { min-height: 150px; padding: 1rem; } }
@media (max-width: 700px) {
  .rapides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .rapides a { min-height: 0; gap: .9rem; padding: .9rem; }
  .rapides strong { font-size: var(--t-m); }
}
/* Présentation « pictos » (1.5.0, d'après la maquette graphique) : pictogrammes circulaires de la charte, centrés,
   6 par rangée, dernière rangée centrée ; la tuile, son relief et le colibri du survol sont ceux de la v1. */
.picto { fill: currentColor; stroke: none; }
.picto--trait > use, .picto--trait > svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rapides--pictos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.rapides--pictos li { flex: 0 1 calc((100% - 5rem) / 6); min-width: 0; }
.rapides--pictos a { align-items: center; justify-content: flex-start; text-align: center; gap: 1rem; min-height: 0; padding: 1.5rem 1rem 1.35rem; }
.rapides--pictos a::before { right: .55rem; bottom: auto; top: .55rem; width: 52px; transform: translate(24px, -10px) rotate(10deg); }
.rapides--pictos a:hover::before, .rapides--pictos a:focus-visible::before { transform: none; }
.picto-rond { display: block; width: clamp(5rem, 7.2vw, 6rem); aspect-ratio: 1; color: var(--encre-douce); transition: transform .45s cubic-bezier(.3, 1.6, .4, 1), color .3s; }
.picto-rond .picto { display: block; width: 100%; height: 100%; }
/* Couleurs de la charte : anneau bleu Marne, pictogramme gris (#6E6468) ; au survol, léger relief et tons un cran plus soutenus */
/* (variable --anneau : elle traverse le <use> du sprite, contrairement aux sélecteurs descendants) */
.picto__anneau { fill: var(--anneau, var(--marne)); transition: fill .3s; }
circle.picto__anneau { fill: none; stroke: var(--anneau, var(--marne)); transition: stroke .3s; }
.rapides--pictos a:hover .picto-rond, .rapides--pictos a:focus-visible .picto-rond { transform: translateY(-3px); color: var(--encre); --anneau: #4AB3D4; }
.rapides--pictos strong { font-size: var(--t-m); }
.rapides--pictos span { font-size: var(--t-xs); margin-top: .25rem; }
@media (max-width: 1080px) {
  .rapides--pictos { gap: .75rem; }
  .rapides--pictos li { flex-basis: calc((100% - 2.25rem) / 4); }
  .rapides--pictos a { padding: 1.2rem .8rem 1.1rem; }
}
@media (max-width: 700px) {
  .rapides--pictos { gap: .6rem; }
  .rapides--pictos li { flex-basis: calc((100% - .6rem) / 2); }
  .rapides--pictos a { gap: .7rem; padding: 1rem .7rem .9rem; }
  .picto-rond { width: 4.5rem; }
}
@media (max-width: 560px) {
  .recherche__champ .btn span { display: none; }
  .recherche__champ .btn { width: 46px; padding: 0; }
}

/* Agenda de l'accueil : piste horizontale sur fond sombre */
.btn--soleil { background: var(--soleil); color: var(--sur-soleil); }
.btn--soleil:hover { background: #FFD24D; transform: translateY(-1px); }
.section--agenda { background: var(--gondoire); color: var(--gondoire-texte); overflow: hidden; position: relative; padding-block: calc(clamp(2.75rem, 6vw, 4.75rem) + clamp(28px, 4.5vw, 64px)); }
.section--agenda .section__tete p { color: var(--gondoire-doux); }
.section--agenda .surtitre { display: inline-flex; align-items: center; gap: .6rem; color: var(--marne); margin-bottom: .35rem; }
.section--agenda .surtitre::before { content: ""; width: 2.2rem; height: 3px; border-radius: 2px; background: var(--soleil); }
.section--agenda :focus-visible { outline-color: var(--soleil); }
.agenda__piste { list-style: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .25rem 1rem; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .agenda__piste { margin-inline: calc(-1 * max(32px, env(safe-area-inset-left, 0px))) calc(-1 * max(32px, env(safe-area-inset-right, 0px))); padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px)); } }
.agenda__piste::-webkit-scrollbar { display: none; }
.evt-piste { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.25rem 1.3rem; border-radius: var(--rayon); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); transition: transform .3s, background .3s, border-color .3s; }
.evt-piste:hover { background: rgb(255 255 255 / .1); border-color: var(--marne); transform: translateY(-4px); }
/* Photo d'illustration en tête de carte (1.5.0, maquette graphique) : bord à bord, sous le grand numéro du jour */
.evt-piste__visuel { margin: -1.2rem -1.25rem .15rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon) var(--rayon) 0 0; background: var(--gondoire-clair); }
.evt-piste__visuel img, .evt-piste__visuel svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.evt-piste:hover .evt-piste__visuel img, .evt-piste:hover .evt-piste__visuel svg { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .evt-piste:hover .evt-piste__visuel img, .evt-piste:hover .evt-piste__visuel svg { transform: none; } }
.evt-piste__date { display: flex; align-items: baseline; gap: .5rem; font-family: var(--f-titre); font-weight: 700; line-height: .9; }
.evt-piste__date .jour { font-size: 3.6rem; color: var(--soleil); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.evt-piste__date .mois { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }
.evt-piste__date .semaine { margin-left: auto; font: 700 var(--t-xs) var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gondoire-doux); }
.evt-piste h3 { font-size: var(--t-l); line-height: 1.25; }
.evt-piste h3 a { text-decoration: none; }
.evt-piste h3 a::after { content: ""; position: absolute; inset: 0; }
.evt-piste:hover h3 a { text-decoration: underline; }
.evt-piste__lieu { display: flex; align-items: center; gap: .4rem; font-size: var(--t-s); color: var(--gondoire-doux); }
.evt-piste__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.evt-piste__tags span { font-size: var(--t-xs); font-weight: 700; padding: .25rem .6rem; border-radius: 0; background: rgb(255 255 255 / .1); }
.evt-piste__tags .gratuit { background: var(--marne); color: var(--nuit); }
.evt-piste .evt__proche { position: static; margin-left: auto; }
.agenda__barre { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.agenda__jauge { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .15); overflow: hidden; }
.agenda__jauge i { display: block; height: 100%; width: 25%; background: var(--soleil); border-radius: 2px; transition: width .2s; }
.agenda__nav { display: flex; gap: .5rem; }
.agenda__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .4); background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.agenda__nav button:hover { background: var(--marne); color: var(--nuit); border-color: var(--marne); }
.section--agenda .vide-inline { color: var(--gondoire-doux); }

/* Étiquettes de catégories */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 0; background: var(--c-neutre); color: var(--encre); }
/* Étiquettes aux couleurs des 7 champs d'action du kit (texte foncé sur les teintes claires, blanc sur les foncées) */
.tag--tourisme { background: var(--c-tourisme); color: #2E292B; }
.tag--territoire { background: var(--c-territoire); color: #2E292B; }
.tag--habitat { background: var(--c-habitat); color: #2E292B; }
.tag--environnement { background: var(--c-environnement); color: #2E292B; }
.tag--social { background: var(--c-social); color: #fff; }
.tag--culture { background: var(--c-culture); color: #fff; }
.tag--securite { background: var(--c-securite); color: #fff; }

/* Actualités */
.actus { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; }
.carte-actu { position: relative; display: grid; gap: .7rem; align-content: start; }
.carte-actu__visuel { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--v-ciel); }
.carte-actu__visuel svg { width: 100%; height: 100%; display: block; transition: transform .4s; }
.carte-actu:hover .carte-actu__visuel svg { transform: scale(1.03); }
.carte-actu h3 a { text-decoration: none; }
.carte-actu h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-actu:hover h3 a { text-decoration: underline; }
.carte-actu p { color: var(--encre-douce); font-size: var(--t-s); }
.meta { font-size: var(--t-xs); color: var(--encre-douce); font-variant-numeric: tabular-nums; display: flex; gap: .4rem .8rem; flex-wrap: wrap; align-items: center; }
.carte-actu--une h3 { font-family: var(--f-titre); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 700; line-height: 1; }
.actus__liste { display: grid; gap: 1.25rem; align-content: start; }
.actus__liste .carte-actu { grid-template-columns: 132px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.actus__liste .carte-actu { row-gap: .45rem; }
.actus__liste .carte-actu__visuel { grid-row: span 4; aspect-ratio: 1; }
.actus__liste .carte-actu h3 { font-size: var(--t-m); }
.actus__liste .carte-actu__extrait { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
@media (max-width: 860px) { .actus { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .actus__liste .carte-actu { grid-template-columns: 92px minmax(0, 1fr); } }

/* Agenda : cartes datées */
.evts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.evt { position: relative; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); display: grid; grid-template-rows: auto 1fr; overflow: hidden; height: 100%; }
.section--papier .evt { background: var(--brume); }
.evt__visuel { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--v-ciel); }
.evt__visuel svg { width: 100%; height: 100%; display: block; }
.evt__date {
  position: absolute; left: .75rem; bottom: -1.4rem; display: grid; justify-items: center; min-width: 4rem;
  background: var(--colibri); color: var(--sur-colibri); border-radius: var(--rayon-s); padding: .35rem .5rem .3rem; line-height: 1;
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5);
}
.evt__date small { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.evt__date strong { font-family: var(--f-titre); font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.evt__corps { padding: 2rem 1rem 1.1rem; display: grid; gap: .5rem; align-content: start; }
.evt__corps h3 { font-size: var(--t-m); }
.evt__corps h3 a { text-decoration: none; }
.evt__corps h3 a::after { content: ""; position: absolute; inset: 0; }
.evt:hover h3 a { text-decoration: underline; }
.evt__infos { list-style: none; display: grid; gap: .2rem; font-size: var(--t-xs); color: var(--encre-douce); }
.evt__infos li { display: flex; gap: .4rem; align-items: start; }
.evt__infos .ico { width: 1rem; height: 1rem; margin-top: .12rem; }
.evt__proche { position: absolute; right: .6rem; top: .6rem; background: var(--soleil); color: var(--sur-soleil); font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 0; }
@media (max-width: 1080px) { .evts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .evts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; } .evts > li { scroll-snap-align: start; } }

/* Territoire : carte des 20 communes */
.territoire { background: var(--gondoire); color: var(--gondoire-texte); }
.territoire__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.territoire h2 { font-size: var(--t-2xl); margin-block: .5rem 1rem; }
.territoire__chapo { color: var(--gondoire-doux); max-width: 48ch; font-family: var(--f-titre); font-weight: 300; font-size: var(--t-l); line-height: 1.4; }
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; margin-block: 2rem; }
.chiffres strong { display: block; font-family: var(--f-titre); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 700; line-height: .95; color: var(--gondoire-texte); font-variant-numeric: tabular-nums; }
.chiffres span { font-size: var(--t-s); color: var(--gondoire-doux); }
.chiffres sup { font-size: .45em; line-height: 0; vertical-align: 1.1em; }
.macommune { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.macommune label { font-weight: 700; font-size: var(--t-s); }
.macommune select { width: auto; min-width: 15rem; max-width: 100%; min-height: 44px; border-radius: 0; border: 1.5px solid rgb(255 255 255 / .3); background: var(--gondoire-clair); color: var(--gondoire-texte); padding: .4rem 2.2rem .4rem 1rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.1rem center, right .8rem center; background-size: 6px 6px; background-repeat: no-repeat; }
.macommune__info { font-size: var(--t-s); color: var(--gondoire-doux); width: 100%; }
.carte-zone { position: relative; max-width: 400px; justify-self: center; width: 100%; }
.carte { width: 100%; height: auto; display: block; overflow: visible; }
.carte-ombre { fill: rgb(0 0 0 / .22); }
.commune path { fill: var(--gondoire-clair); stroke: var(--gondoire); stroke-width: 2; transition: fill .15s; cursor: pointer; }
.commune:hover path, .commune:focus-visible path, .commune.est-active path { fill: color-mix(in srgb, var(--marne) 55%, var(--gondoire-clair)); }
.commune.est-mienne path { fill: var(--colibri); }
.commune:focus-visible { outline: none; }
.commune:focus-visible path { stroke: var(--gondoire-texte); stroke-width: 3; }
.riviere { fill: none; stroke: var(--marne); stroke-linecap: round; pointer-events: none; }
.riviere--marne { stroke-width: 5; }
.riviere--gondoire { stroke-width: 2.2; }
.riviere-nom { fill: var(--gondoire-texte); font: italic 600 13px var(--f-texte); letter-spacing: .06em; pointer-events: none; paint-order: stroke; stroke: var(--gondoire); stroke-width: 3px; stroke-linejoin: round; }
.riviere-nom--petit { font-size: 11px; }
.point { fill: var(--gondoire-texte); pointer-events: none; }
.siege circle { fill: var(--soleil); } .siege path { fill: var(--gondoire); }
.carte-bulle {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  background: var(--papier); color: var(--encre); font-weight: 700; font-size: var(--t-s); padding: .35rem .7rem; border-radius: var(--rayon-s); box-shadow: var(--ombre);
}
.carte-legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--t-xs); color: var(--gondoire-doux); margin-top: .5rem; justify-content: center; }
.carte-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.carte-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.territoire__in--sans-carte { grid-template-columns: 1fr; }
@media (max-width: 900px) { .territoire__in { grid-template-columns: 1fr; } }

/* Kiosque */
.kiosque { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.publi { display: grid; gap: .8rem; align-content: start; }
.couv {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 0; overflow: hidden; box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 18px 30px -18px rgb(0 0 0 / .55);
  display: grid; grid-template-rows: auto 1fr auto; padding: 1rem; color: #fff; transform: rotate(0); transition: transform .25s;
}
.publi:hover .couv { transform: translateY(-4px); }
.couv small { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.couv strong { align-self: end; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); line-height: .95; }
.couv em { font-style: normal; font-size: .7rem; opacity: .85; margin-top: .5rem; }
.couv svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.couv { isolation: isolate; }
.couv--mag { background-color: #0079A7; background-image: radial-gradient(ellipse 120% 45% at 50% 115%, #5FC3E1 0 48%, transparent 50%); }
.couv--rapport { background-color: #662382; background-image: linear-gradient(0deg, rgb(255 255 255 / .22) 0 32%, transparent 32% 36%, rgb(255 255 255 / .16) 36% 52%, transparent 52% 56%, rgb(255 255 255 / .1) 56% 66%, transparent 66%); background-size: 60% 100%; background-repeat: no-repeat; background-position: right bottom; }
.couv--guide { background-color: #B3B800; background-image: radial-gradient(circle at 85% 18%, #FDC300 0 22%, rgb(253 195 0 / .35) 23% 40%, transparent 41%); }
.couv--saison { background-color: #501966; background-image: radial-gradient(circle at 50% 30%, #E40045 0 15%, transparent 16%), linear-gradient(165deg, transparent 45%, rgb(246 225 176 / .18) 45%); }
.publi h3 { font-size: var(--t-m); }
.publi__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.publi__actions .btn { min-height: 38px; padding: .35rem .8rem; font-size: var(--t-xs); }
@media (max-width: 980px) { .kiosque { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vidéo + réseaux */
/* L'agglo en images : grande vidéo (façade) et fil des réseaux, comme la maquette vitrine */
.medias { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.video { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: var(--v-sombre); isolation: isolate; }
.video svg.scene { width: 100%; height: 100%; display: block; transition: transform 1s; }
.video:hover svg.scene, .video:hover img.scene { transform: scale(1.04); }
.video__btn { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .75rem; background: linear-gradient(0deg, rgb(30 26 28 / .9), transparent 55%); border: 0; color: #fff; }
.video__btn .rond { width: 92px; height: 92px; border-radius: 50%; background: var(--colibri); color: var(--sur-colibri); display: grid; place-items: center; transition: transform .2s; box-shadow: 0 0 0 0 rgb(228 0 69 / .55); }
@media (prefers-reduced-motion: no-preference) { .video__btn .rond { animation: mg-pulser 2.2s infinite; } }
@keyframes mg-pulser { 0% { box-shadow: 0 0 0 0 rgb(228 0 69 / .55); } 70% { box-shadow: 0 0 0 16px rgb(228 0 69 / 0); } 100% { box-shadow: 0 0 0 0 rgb(228 0 69 / 0); } }
.video__btn:hover .rond { transform: scale(1.07); }
.video__btn .ico { width: 2.4rem; height: 2.4rem; margin-left: .25rem; }
.video__legende { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; text-align: left; color: #fff; pointer-events: none; display: flex; flex-direction: column; gap: .3rem; }
.video__legende strong { display: block; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; }
.video__legende span { font-size: var(--t-s); opacity: .85; }
.video__note { font-size: var(--t-xs); color: var(--encre-douce); margin-top: .6rem; }
.video--chaine { display: block; text-decoration: none; color: #fff; }
.video--chaine .video__btn { pointer-events: none; }
.posts { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.post { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--rayon-s); background: var(--brume); border: 1px solid var(--filet); transition: transform .25s, box-shadow .25s; }
.section--papier .post { background: var(--brume); }
.post:hover { transform: translateX(6px); box-shadow: var(--ombre); }
.post .scene, .post img { display: none; }
.post__reseau { flex: none; width: 1.6rem; height: 1.6rem; color: var(--colibri); display: grid; place-items: center; }
.post__reseau .ico { width: 1.6rem; height: 1.6rem; }
.post a { text-decoration: none; font-size: var(--t-s); line-height: 1.45; color: inherit; }
.post a::after { content: ""; position: absolute; inset: 0; }
.post:hover a { text-decoration: underline; }
.post small { display: block; margin-top: .25rem; color: var(--encre-douce); font-size: var(--t-xs); }
@media (max-width: 960px) { .medias { grid-template-columns: 1fr; } }

/* Offres d'emploi (Jobaffinity) */
.offres { display: grid; gap: 1rem; }
.offres__compte, .offres__vide, .offres__note { color: var(--encre-douce); }
.offres__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.offre { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.25rem 1.4rem; display: grid; gap: .45rem; }
.offre__titre { font-size: var(--t-lg); margin: 0; }
.offre__meta, .offre__limite { margin: 0; color: var(--encre-douce); font-size: var(--t-s); }
.offre__limite { font-weight: 700; color: var(--encre); }
.offre__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 0; }

/* Lettres d'information (Sarbacane) */
.lettre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.4rem, 4vw, 2.5rem); }
.lettre h2 { font-size: var(--t-2xl); }
.lettre p { color: var(--encre-douce); margin-top: .5rem; }
.form-lettre { display: grid; gap: .8rem; }
.form-lettre__ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.form-lettre__ligne input { flex: 1 1 220px; min-width: 0; }
.choix { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--t-s); }
.choix label { display: inline-flex; align-items: center; gap: .45rem; }
/* Lettres : une pastille par lettre, le secteur des médiathèques s'ouvre sous les pastilles */
.choix--lettres { display: grid; gap: .6rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.choix--lettres legend { font-weight: 700; padding: 0; margin-bottom: .1rem; }
.choix--lettres .puces { gap: .45rem; }
.choix--lettres .puce { font-weight: 500; background: transparent; }
.choix--lettres .puce:has(input:checked) { font-weight: 600; }
.choix--lettres .puce:has(input[aria-expanded])::after { content: ""; width: .5em; height: .5em; margin-left: .1rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s; }
.choix--lettres .puce:has(input[aria-expanded="true"])::after { transform: translateY(.1em) rotate(225deg); }
.choix__secteur { display: grid; gap: .3rem; max-width: 420px; }
.choix__secteur label { font-size: var(--t-s); color: var(--encre-douce); }
.choix__secteur select { width: 100%; }
.form-lettre__ligne .erreur { flex-basis: 100%; }
.mention { font-size: var(--t-xs); color: var(--encre-douce); }
.confirmation { display: flex; gap: .6rem; align-items: start; background: var(--teinte); border-radius: var(--rayon-s); padding: .8rem 1rem; font-size: var(--t-s); }
@media (max-width: 860px) { .lettre { grid-template-columns: 1fr; } }
/* Invitation à s'abonner (1.6.11) : encart non bloquant en bas à droite (en bas de l'écran sur mobile), angles droits */
.invit-lettre { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 1.3rem 1.3rem 1.1rem; background: var(--papier); color: var(--encre); border-top: 4px solid var(--marne); box-shadow: 0 20px 60px -15px rgb(0 0 0 / .35), 0 0 0 1px var(--filet); }
.invit-lettre[hidden] { display: none; }
.invit-lettre .invit-lettre__x { top: .3rem; right: .3rem; color: var(--encre-douce); }
.invit-lettre__titre { display: flex; align-items: center; gap: .55rem; margin: 0 2.6rem .35rem 0; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); line-height: 1.2; }
.invit-lettre__titre .ico { width: 1.5rem; height: 1.5rem; color: var(--accent-texte, var(--marne)); }
.invit-lettre__texte { margin: 0 0 .9rem; color: var(--encre-douce); font-size: var(--t-s); }
.invit-lettre .form-lettre { gap: .65rem; }
.invit-lettre .form-lettre__ligne input { flex: 1 1 170px; }
.invit-lettre .choix legend { font-size: var(--t-xs); }
.invit-lettre .puce { min-height: 34px; padding: .25rem .7rem; font-size: var(--t-xs); }
.invit-lettre .mention { font-size: .75rem; margin: 0; }
.invit-lettre :focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .invit-lettre { transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .3s; }
  .invit-lettre:not(.est-visible) { transform: translateY(24px); opacity: 0; }
}
@media (max-width: 560px) { .invit-lettre { left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; padding-bottom: max(1.1rem, env(safe-area-inset-bottom, 0px)); } }
@media print { .invit-lettre { display: none !important; } }

/* Champs de formulaire */
.champ { display: grid; gap: .35rem; }
.champ label { font-weight: 700; font-size: var(--t-s); }
.champ .aide { font-size: var(--t-xs); color: var(--encre-douce); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], select, textarea {
  min-height: 46px; padding: .55rem .85rem; border-radius: var(--rayon-s); border: 1.5px solid var(--filet); background: var(--papier); color: var(--encre); width: 100%;
}
input[type="file"] { font-size: var(--t-s); }
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--colibri); outline-offset: 1px; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--colibri); }
.requis { color: var(--colibri); }

/* ---------- Pied de page ---------- */
.pied { background: var(--gondoire); color: var(--gondoire-texte); }
.pied a { color: var(--gondoire-texte); }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
.pied .marque { color: var(--gondoire-texte); }
.pied .marque .logo, .pied__logo { height: 96px; width: auto; display: block; } /* 1.6.1 : logo officiel en blanc, même dessin que l'en-tête */
.pied .marque__agglo { color: var(--gondoire-doux); }
.pied address { font-style: normal; display: grid; gap: .55rem; margin-top: 1.4rem; font-size: var(--t-s); }
.pied address p { display: flex; gap: .55rem; align-items: start; }
.pied address .ico { margin-top: .2rem; color: var(--marne); }
.pied h2 { font-family: var(--f-texte); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marne); margin-bottom: 1rem; line-height: 1.3; }
.pied__communes { list-style: none; columns: 2; column-gap: 1.5rem; font-size: var(--t-s); }
.pied__communes li { padding-block: .18rem; break-inside: avoid; }
.pied__communes a, .pied__liens a { text-decoration: none; }
.pied__communes a:hover, .pied__liens a:hover { text-decoration: underline; }
.pied__liens { list-style: none; display: grid; gap: .45rem; font-size: var(--t-s); }
.pied .reseaux a { color: var(--gondoire-texte); border: 1px solid rgb(255 255 255 / .25); width: 42px; height: 42px; }
.pied .reseaux a:hover { background: var(--gondoire-clair); }
.pied .reseaux { display: flex; margin-top: 1rem; gap: .4rem; }
.pied__bas { border-top: 1px solid rgb(255 255 255 / .14); }
.pied__bas-in { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-block: 1.2rem 1.6rem; font-size: var(--t-xs); align-items: center; }
.pied__bas-in ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; }
.pied__bas-in a { text-decoration: none; }
.pied__bas-in a:hover { text-decoration: underline; }
.pied__bas-in .copy { margin-left: auto; color: var(--gondoire-doux); }
.rss { display: inline-flex; gap: .35rem; align-items: center; }
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } .pied__haut > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } .pied__bas-in .copy { margin-left: 0; } }

/* ---------- Dialogue de recherche (1.6.9, maquette XD « Modal-RECHERCHE » de la CAMG) ----------
   Panneau blanc à angles droits, croix en haut à droite, grand champ souligné, recherches fréquentes en pastilles grises. */
.dlg-recherche { position: relative; width: min(1065px, calc(100vw - 24px)); max-height: min(80vh, 760px); margin: 9vh auto auto; padding: 0; border: 0; border-radius: 0; background: var(--papier); color: var(--encre); box-shadow: 0 3px 30px rgb(0 0 0 / .18); overflow: hidden; }
.dlg-recherche::backdrop { background: rgb(30 26 28 / .45); backdrop-filter: blur(3px); }
.dlg-recherche .dlg__x { color: var(--encre-douce); }
.dlg__tete { display: flex; align-items: center; gap: 1rem; margin: clamp(3rem, 6vw, 3.75rem) clamp(1.1rem, 3vw, 2.5rem) 0; padding: 0 0 .6rem; border-bottom: 1px solid var(--filet); transition: border-color .2s, box-shadow .2s; }
.dlg__tete:focus-within { border-bottom-color: var(--marne); box-shadow: 0 1px 0 var(--marne); }
.dlg__tete input[type="search"] { border: 0; border-radius: 0; padding: .3rem 0; font-family: var(--f-titre); font-weight: 300; font-size: clamp(1.1rem, .8rem + 1.8vw, 1.9rem); outline: none; min-height: 48px; background: none; flex: 1; min-width: 0; color: var(--encre); }
.dlg__tete input::placeholder { color: var(--encre-douce); opacity: .85; }
.dlg__tete input:focus-visible { outline: none; }
.dlg__tete .ico { width: 1.6rem; height: 1.6rem; color: var(--encre-douce); stroke-width: 1.6; }
.dlg__options { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .7rem 1.1rem; font-size: var(--t-xs); color: var(--encre-douce); border-bottom: 1px solid var(--filet); }
.dlg__options .segment { font-size: var(--t-xs); }
.dlg__options .segment label { padding: .25rem .8rem; font-size: var(--t-xs); }
.dlg__corps { overflow-y: auto; max-height: calc(min(80vh, 760px) - 8rem); padding: 1.4rem clamp(1.1rem, 3vw, 2.5rem) 2rem; }
.resultats { list-style: none; display: grid; gap: .2rem; }
.resultats a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; padding: .7rem .8rem; border-radius: var(--rayon-s); text-decoration: none; }
.resultats a:hover, .resultats a:focus-visible, .resultats a.est-actif { background: var(--teinte); }
.resultats .type-badge { grid-row: span 2; align-self: start; margin-top: .15rem; }
.resultats strong { font-size: var(--t-m); }
.resultats span.extrait { font-size: var(--t-xs); color: var(--encre-douce); }
.resultats mark { background: var(--soleil); color: var(--sur-soleil); border-radius: 2px; padding-inline: .1em; }
.dlg__note { font-size: var(--t-s); color: var(--encre-douce); padding: 0 0 .8rem; }
.dlg__suggest { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0 0 .4rem; }
.dlg__suggest button { min-height: 40px; border: 0; background: var(--teinte); color: var(--encre); border-radius: 999px; padding: .45rem 1.5rem; font-size: var(--t-s); cursor: pointer; transition: background-color .2s; }
.dlg__suggest button:hover, .dlg__suggest button:focus-visible { background: var(--filet); }

/* Toast (liens non inclus dans la maquette) */
.toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 1rem); z-index: 120; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--encre); color: var(--brume); padding: .7rem 1.1rem; border-radius: 0; font-size: var(--t-s); font-weight: 600; max-width: calc(100vw - 32px); text-align: center; }
.toast.est-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.fil { font-size: var(--t-xs); padding-top: 1.4rem; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.fil li + li::before { content: "›"; margin-right: .35rem; color: var(--encre-douce); }
.fil a { color: var(--encre-douce); }
.fil [aria-current] { font-weight: 700; }
.tete-page { background: var(--papier); border-bottom: 1px solid var(--filet); }
.tete-page__in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr); gap: 2rem; align-items: end; padding-bottom: 2.25rem; }
.tete-page h1 { font-size: var(--t-3xl); margin-block: 1.25rem .9rem; }
.tete-page .chapo { font-family: var(--f-titre); font-weight: 300; font-size: var(--t-xl); color: var(--encre-douce); max-width: 58ch; line-height: 1.4; }
.tete-page__visuel { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 2 / 1; max-width: 100%; }
.tete-page__visuel svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) { .tete-page__in { grid-template-columns: 1fr; } .tete-page__visuel { display: none; } }

/* Vignettes N3 (page rubrique / page « Je suis… ») */
.vignettes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.vignette { position: relative; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.3rem 1.3rem 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; align-content: start; height: 100%; transition: border-color .15s, box-shadow .15s; }
.vignette:hover { border-color: var(--gondoire-clair); box-shadow: var(--ombre); }
.vignette .pastille-ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 0; display: grid; place-items: center; background: var(--teinte); color: var(--gondoire); }
:root[data-theme="dark"] .vignette .pastille-ico { color: var(--marne); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vignette .pastille-ico { color: var(--marne); } }
.vignette .pastille-ico .ico { width: 26px; height: 26px; }
.vignette h3 { font-size: var(--t-m); }
.vignette h3 a { text-decoration: none; }
.vignette h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.vignette:hover h3 a { text-decoration: underline; }
.vignette p { font-size: var(--t-s); color: var(--encre-douce); }
.vignette__cible { grid-column: 2; font-size: var(--t-xs); font-weight: 700; color: var(--colibri); margin-top: .35rem; }
/* Vignette d'illustration (1.7.0) : photo bord à bord en haut du rectangle, pictogramme posé sur son bord inférieur */
.vignette--image { padding-top: 0; }
.vignette__visuel { grid-column: 1 / -1; margin: 0 -1.3rem .35rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teinte); }
.vignette__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.vignette--image:hover .vignette__visuel img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .vignette--image:hover .vignette__visuel img { transform: none; } }
.vignette--image .pastille-ico { margin-top: -26px; position: relative; z-index: 1; background: var(--papier); box-shadow: 0 0 0 3px var(--papier), 0 1px 2px rgb(46 41 43 / .12); }
.vignette--image h3 { margin-top: .5rem; }
@media (max-width: 980px) { .vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vignettes { grid-template-columns: 1fr; } }

.publics { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.publics a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--filet); text-decoration: none; font-weight: 600; font-size: var(--t-s); min-height: 40px; }
.publics a:hover { border-color: var(--encre-douce); }
.publics a[aria-current="page"] { background: var(--gondoire); border-color: var(--gondoire); color: var(--gondoire-texte); }

/* Mise en page fiche : contenu + aside */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(2rem, 5vw, 4.5rem); padding-block: 2.5rem 4rem; align-items: start; }
.fiche__aside { position: sticky; top: 6rem; display: grid; gap: 1rem; }
@media (max-width: 960px) { .fiche { grid-template-columns: 1fr; } .fiche__aside { position: static; } }
.contenu { display: grid; gap: 2.75rem; min-width: 0; }
.contenu h2 { font-size: clamp(1.7rem, 1.35rem + 1vw, 2.2rem); margin-bottom: 1rem; }
.contenu p + p { margin-top: .8rem; }
/* Texte courant (1.6.0) : paragraphes et listes qui se suivent restent groupés ; l'espacement de 2,75 rem sépare les blocs. */
.contenu > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: -1.95rem; }
.contenu .lead { font-family: var(--f-titre); font-weight: 300; font-size: var(--t-xl); line-height: 1.4; }
.enbref { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.enbref div { padding: 1rem 1.1rem; border-right: 1px solid var(--filet); display: grid; gap: .25rem; align-content: start; }
.enbref div:last-child { border-right: 0; }
.enbref dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); display: flex; gap: .35rem; align-items: center; }
.enbref dd { margin: 0; font-weight: 700; line-height: 1.35; }
@media (max-width: 720px) { .enbref { grid-template-columns: 1fr 1fr; } .enbref div:nth-child(2) { border-right: 0; } .enbref div:nth-child(-n+2) { border-bottom: 1px solid var(--filet); } }

/* Questionnaire « Suis-je concerné ? » */
.quiz { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.4rem; display: grid; gap: 1.1rem; }
.quiz fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.quiz legend { font-weight: 700; padding: 0; margin-bottom: .4rem; }
.quiz .options { display: flex; flex-wrap: wrap; gap: .5rem; }
.quiz .options label { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--filet); cursor: pointer; font-size: var(--t-s); min-height: 40px; }
.quiz .options label:has(input:checked) { border-color: var(--gondoire-clair); background: var(--teinte); font-weight: 700; }
.verdict { border-radius: var(--rayon-s); padding: 1rem 1.1rem; display: flex; gap: .7rem; align-items: start; background: var(--brume); font-size: var(--t-s); }
.verdict--oui { background: color-mix(in srgb, var(--colibri) 12%, var(--papier)); }
.verdict--non { background: var(--teinte); }
.verdict strong { display: block; font-size: var(--t-m); }

/* Étapes (séquence réelle → numérotation) */
.etapes { list-style: none; counter-reset: etape; display: grid; gap: 0; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gondoire); color: var(--gondoire-texte); font-family: var(--f-titre); font-weight: 700; font-size: 1.35rem; }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: 1.3rem; top: 2.8rem; bottom: .2rem; width: 2px; background: var(--filet); }
.etapes h3 { font-size: var(--t-m); margin-top: .45rem; }
.etapes p { color: var(--encre-douce); font-size: var(--t-s); margin-top: .25rem; }

/* Liste de pièces à cocher */
.pieces { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.pieces__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--filet); font-size: var(--t-s); }
.jauge { flex: 1; max-width: 180px; height: 8px; border-radius: 0; background: var(--brume); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: var(--marne); transition: width .25s; }
.pieces ul { list-style: none; }
.pieces li + li { border-top: 1px solid var(--filet); }
.pieces label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: .85rem 1.1rem; cursor: pointer; }
.pieces label:has(input:checked) strong { text-decoration: line-through; text-decoration-color: var(--marne); }
.pieces input { margin-top: .2rem; }
.pieces small { display: block; color: var(--encre-douce); font-size: var(--t-xs); }

.encadre { border-left: 4px solid var(--soleil); background: var(--papier); padding: 1.1rem 1.25rem; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; display: grid; gap: .4rem; }
.encadre h3 { display: flex; gap: .5rem; align-items: center; font-size: var(--t-m); }

/* FAQ (details/summary natifs) */
.faq { display: grid; gap: .5rem; }
.faq details { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon-s); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-titre); font-size: 1.6rem; line-height: 1; color: var(--colibri); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.1rem 1.1rem; color: var(--encre-douce); font-size: var(--t-s); }

/* Documents à télécharger */
.docs { list-style: none; display: grid; gap: .5rem; }
.docs a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon-s); text-decoration: none; }
.docs a:hover { border-color: var(--gondoire-clair); }
.docs .format { font-size: .68rem; font-weight: 700; letter-spacing: .06em; background: var(--colibri); color: var(--sur-colibri); padding: .5rem .45rem; border-radius: 0; }
.docs small { display: block; color: var(--encre-douce); font-size: var(--t-xs); }

/* Module « Voir aussi » (bouton déroulant) */
.voiraussi { border-top: 1px solid var(--filet); padding-top: 1.5rem; }
.voiraussi__btn { display: inline-flex; align-items: center; gap: .5rem; }
.voiraussi ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.voiraussi ul a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--filet); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.voiraussi ul a:hover { border-color: var(--gondoire-clair); }

/* Formulaire de contact (sujet présélectionné) */
.form-contact { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.2rem, 3vw, 1.8rem); display: grid; gap: 1rem; }
.form-contact .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-groupe { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; min-width: 0; }
.form-groupe legend { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); padding: 0; margin-bottom: .2rem; }
.form-groupe + .form-groupe { margin-top: .6rem; }
@media (max-width: 560px) { .form-contact .duo { grid-template-columns: 1fr; } }
/* Formulaires sur mesure (1.7.0) : champs en grille (pleine ou demi-largeur), sections en fieldset, choix radio et cases, conditions */
.form-sur-mesure .form-intro { font-family: var(--f-titre); font-weight: 300; font-size: var(--t-l); line-height: 1.4; }
.form-groupe--grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-groupe--grille > .champ { align-content: start; }
.form-groupe--grille > .champ--pleine, .form-groupe--grille > .champ--paragraphe, .form-groupe--grille > .champ--zone, .form-groupe--grille > .champ--case { grid-column: 1 / -1; }
.form-groupe__aide { grid-column: 1 / -1; font-size: var(--t-s); color: var(--encre-douce); margin: -.4rem 0 .2rem; }
.form-sur-mesure fieldset.champ { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-sur-mesure fieldset.champ legend { font-weight: 700; font-size: var(--t-s); padding: 0; margin-bottom: .45rem; }
.form-sur-mesure .choix { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.form-sur-mesure .choix label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border: 1.5px solid var(--filet); border-radius: 999px; background: var(--papier); font-weight: 600; font-size: var(--t-s); cursor: pointer; }
.form-sur-mesure .choix label:hover { border-color: var(--encre-douce); }
.form-sur-mesure .choix label:has(input:checked) { border-color: var(--gondoire); background: var(--teinte); }
.form-sur-mesure .choix label:has(input:focus-visible) { outline: 3px solid var(--colibri); outline-offset: 2px; }
.form-sur-mesure .champ--paragraphe p + p { margin-top: .4rem; }
.form-sur-mesure .champ--paragraphe { font-size: var(--t-s); color: var(--encre-douce); }
.form-sur-mesure .champ--fichier input[type="file"] { padding: .55rem .85rem; border: 1.5px dashed var(--filet); border-radius: var(--rayon-s); background: var(--brume); width: 100%; min-height: 46px; }
.form-sur-mesure .champ--fichier input[type="file"]:focus-visible { outline: 3px solid var(--colibri); outline-offset: 1px; }
.form-sur-mesure [hidden] { display: none !important; }
.form-sur-mesure .champ--erreur fieldset, .form-sur-mesure fieldset.champ--erreur .choix label { border-color: var(--colibri); }
@media (max-width: 560px) { .form-groupe--grille { grid-template-columns: 1fr; } }

/* Cartes d'aside */
.boite { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.25rem; display: grid; gap: .7rem; }
.boite--action { background: var(--gondoire); color: var(--gondoire-texte); border-color: var(--gondoire); }
.boite--action p { color: var(--gondoire-doux); font-size: var(--t-s); }
.boite h2 { font-family: var(--f-texte); font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
.boite .btn { width: 100%; }
.boite address { font-style: normal; display: grid; gap: .4rem; font-size: var(--t-s); }
.boite address p { display: flex; gap: .5rem; align-items: start; }
.boite address .ico { margin-top: .2rem; color: var(--colibri); }
.utile { display: flex; gap: .5rem; flex-wrap: wrap; }
.utile button { min-height: 40px; padding: .35rem 1rem; border-radius: 999px; border: 1.5px solid var(--filet); background: none; font-weight: 700; }
.utile button:hover { background: var(--teinte); }
.maj { font-size: var(--t-xs); color: var(--encre-douce); }

/* Agenda : barre de filtres */
.filtres { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.1rem 1.2rem; display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.filtres__ligne { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: end; }
.filtres__ligne .champ { flex: 1 1 200px; min-width: 0; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.puce { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--filet); background: var(--papier); font-size: var(--t-s); font-weight: 600; min-height: 38px; cursor: pointer; }
.puce:hover { border-color: var(--encre-douce); }
.puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.puce:has(input:checked), .puce[aria-pressed="true"] { background: var(--gondoire); border-color: var(--gondoire); color: var(--gondoire-texte); }
.puce:has(input:focus-visible) { outline: 3px solid var(--colibri); outline-offset: 2px; }
.filtres__themes { border: 0; padding: 0; margin: 0; }
.puce .compte { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.filtres__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; font-size: var(--t-s); }
.filtres__bas p { font-weight: 700; }
.lien-discret { background: none; border: 0; padding: 0; text-decoration: underline; color: var(--encre-douce); font-size: var(--t-s); }
.mois { font-size: var(--t-xl); margin: 2rem 0 1rem; display: flex; align-items: baseline; gap: .8rem; }
.mois::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.liste-agenda { list-style: none; display: grid; gap: .75rem; }
.ligne-evt { position: relative; display: grid; grid-template-columns: 5.2rem 160px minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: .8rem; }
.ligne-evt:hover { border-color: var(--gondoire-clair); }
.ligne-evt__date { display: grid; justify-items: center; line-height: 1; padding: .3rem; }
.ligne-evt__date small { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.ligne-evt__date strong { font-family: var(--f-titre); font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ligne-evt__visuel { border-radius: var(--rayon-s); overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; }
.ligne-evt__visuel svg { width: 100%; height: 100%; display: block; }
.ligne-evt__corps { display: grid; gap: .35rem; min-width: 0; }
.ligne-evt__corps :is(h3, h4) { font-size: var(--t-m); line-height: 1.25; font-weight: 700; }
.ligne-evt__corps :is(h3, h4) a { text-decoration: none; }
.ligne-evt__corps :is(h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.ligne-evt:hover :is(h3, h4) a { text-decoration: underline; }
/* Bloc Agenda en liste dans les pages (1.7.0) : même habillage que la page Agenda, sur fond clair ; filtres du bloc rappelés en pastilles */
.section--agenda-liste .section__tete { margin-bottom: 1.1rem; }
.agenda-liste__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); font-size: var(--t-s); }
.agenda-liste__filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.puce--fixe { background: var(--gondoire); border-color: var(--gondoire); color: var(--gondoire-texte); cursor: default; min-height: 34px; padding: .25rem .8rem; }
.agenda-liste__compte { font-weight: 700; }
.agenda-liste .mois { font-size: var(--t-l); margin: 1.5rem 0 .8rem; }
.agenda-liste .groupe-mois:first-child .mois { margin-top: .5rem; }
.agenda-liste .ligne-evt__visuel { background: var(--brume); }
.ligne-evt__prix { font-size: var(--t-xs); font-weight: 700; padding: .3rem .7rem; border-radius: 0; background: var(--brume); white-space: nowrap; align-self: start; }
@media (max-width: 760px) {
  .ligne-evt { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .ligne-evt__visuel { display: none; }
  .ligne-evt__prix { grid-column: 2; justify-self: start; }
}
.vide { text-align: center; padding: 3rem 1rem; background: var(--papier); border: 1px dashed var(--filet); border-radius: var(--rayon); display: grid; gap: .6rem; justify-items: center; }
.vide strong { font-family: var(--f-titre); font-size: var(--t-xl); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .entete, .pied, .ruban-maquette, .fiche__aside, .evitement { display: none; }
  body { background: #fff; color: #000; }
}
.dlg__tete input::-webkit-search-cancel-button, .recherche__champ input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ==========================================================================
   Compléments WordPress
   ========================================================================== */
.admin-bar .entete { --entete-top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { .admin-bar .entete { --entete-top: calc(46px + env(safe-area-inset-top, 0px)); } }
.marque__fond { fill: var(--gondoire); } .marque__onde { fill: none; stroke: var(--marne); stroke-width: 4.4; stroke-linecap: round; } .marque__trait { fill: none; stroke: var(--colibri); stroke-width: 2.4; stroke-linecap: round; }
.marque__logo { height: 52px; width: auto; max-width: 240px; }
.nav__vide { font-size: var(--t-s); color: var(--encre-douce); }
.mega__zoom span { font-size: var(--t-xs); color: var(--gondoire-doux); line-height: 1.4; }
.a-115 { font-size: 1.12em; } .a-130 { font-size: 1.28em; }
.legende-colibri { background: var(--colibri); } .legende-soleil { background: var(--soleil); }
.tete-page__in--seul { grid-template-columns: 1fr; }
.meta--article { margin-bottom: .6rem; font-size: var(--t-s); }
.tete-page .tags { margin-top: .8rem; }
.fiche--large { grid-template-columns: 1fr; }
.fiche--large .contenu { max-width: none; }
.contenu > .section { margin-inline: calc(50% - 50vw); width: 100vw; }
.contenu > .section > .conteneur { max-width: calc(var(--conteneur) + 64px); }
.contenu > .une, .contenu > .territoire { margin-inline: calc(50% - 50vw); width: 100vw; }
.fiche:not(.fiche--large) .contenu > .section { margin-inline: 0; width: auto; }
/* Dans une page avec colonne latérale, les bandeaux pleine largeur restent dans la colonne de contenu */
.fiche:not(.fiche--large) .contenu > :is(.une, .territoire) { margin-inline: 0; width: auto; border-radius: var(--rayon); }
.fiche:not(.fiche--large) .contenu > :is(.une, .territoire) > .conteneur { padding-inline: clamp(1rem, 3vw, 2rem); }
.fiche:not(.fiche--large) .contenu > .territoire .territoire__in { grid-template-columns: 1fr; padding-block: 2rem; }
.fiche:not(.fiche--large) .contenu > .une .une__in { grid-template-columns: 1fr; min-height: 0; }
.fiche:not(.fiche--large) .contenu > .section > .conteneur { padding-inline: 0; }
.section--vignettes { padding-block: 0; }
.fiche--large .section--vignettes + .section { margin-top: 3rem; }
.maj { margin-top: .5rem; }
.vide-inline { color: var(--encre-douce); font-size: var(--t-s); }
.evts--seul { display: contents; }
.actus--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 860px) { .actus--grille { grid-template-columns: 1fr; } }
.medias--seul { grid-template-columns: minmax(0, 1fr); }
.medias--seul .video { max-width: 860px; }
.kiosque--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; }
@media (max-width: 980px) { .kiosque--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1.6.6 : couvertures à largeur fixe dans le Kiosque (4 colonnes conservées). Calaméo fournit des images de 300 px :
   affichées à 152 px, elles restent nettes sur les écrans haute densité. */
.kiosque .couv { width: min(100%, 152px); }
.couv--image { padding: 0; display: block; }
.couv--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.publics--filtre { margin: 0 0 1.5rem; }
.boite--service { align-self: start; }
.boite--nav .liste-liee [aria-current] { font-weight: 700; }
.liste-liee { list-style: none; display: grid; gap: .55rem; }
.liste-liee li { display: grid; gap: .1rem; }
.liste-liee .meta { font-size: var(--t-xs); }
.champ--case label { display: flex; gap: .6rem; align-items: start; font-weight: 400; cursor: pointer; }
.champ--case input { margin-top: .25rem; flex: none; }
.champ--case-ligne label { display: flex; gap: .5rem; align-items: center; min-height: 46px; font-weight: 700; cursor: pointer; }
.champ--bouton { flex: 0 0 auto; }
.filtres__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--colibri); border-width: 2px; }
.erreur { display: block; font-size: var(--t-s); font-weight: 700; color: var(--colibri); }
.erreurs { border-left: 4px solid var(--colibri); background: color-mix(in srgb, var(--colibri) 10%, var(--papier)); padding: 1rem 1.1rem; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; }
.erreurs ul { list-style: disc; padding-left: 1.2rem; margin-top: .4rem; font-size: var(--t-s); }
.mg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.facade { position: relative; }
.facade--calameo { border-radius: var(--rayon); overflow: hidden; background: var(--teinte); padding: 2rem 1rem; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.facade--calameo iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; background: #fff; }
.facade--calameo.facade--chargee { padding: 0; display: block; }
.facade__btn { border: 0; background: none; padding: 0; display: grid; gap: .6rem; justify-items: center; font-weight: 700; color: inherit; }
.facade__corps { display: grid; gap: .6rem; justify-items: center; }
.facade__appel { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; }
.facade--calameo .rond { width: 64px; height: 64px; border-radius: 50%; background: var(--gondoire); color: var(--gondoire-texte); display: grid; place-items: center; transition: background .15s; }
.facade__btn:hover .rond { background: var(--colibri); color: var(--sur-colibri); }
/* 1.7.4 : en mode sombre, --gondoire est presque la couleur du fond de la façade (rond invisible) : rond clair, contraste RGAA 3.3. */
:root[data-theme="dark"] .facade--calameo .rond { background: var(--gondoire-texte); color: var(--gondoire); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .facade--calameo .rond { background: var(--gondoire-texte); color: var(--gondoire); } }
:root[data-theme="dark"] .facade__btn:hover .rond { background: var(--colibri); color: var(--sur-colibri); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .facade__btn:hover .rond { background: var(--colibri); color: var(--sur-colibri); } }
.facade__note { font-size: var(--t-xs); color: var(--encre-douce); }
/* 1.7.3 : façade avec couverture et titre de la publication (couverture du Kiosque, ou copiée depuis Calaméo). */
.facade--couv { padding: 1.5rem; text-align: left; justify-items: stretch; gap: 1rem; }
.facade--couv .facade__btn { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); gap: 1.6rem; align-items: center; justify-items: start; width: 100%; text-align: left; }
.facade__couv { display: block; align-self: center; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 18px 30px -18px rgb(0 0 0 / .55); transform: rotate(0); transition: transform .25s; }
.facade__couv img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; } /* 1.7.4 : couverture entière, à ses proportions (A4, carré, paysage…) */
.facade__btn:hover .facade__couv { transform: translateY(-4px); }
.facade--couv .facade__corps { justify-items: start; gap: .35rem; }
.facade__cat { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce); }
.facade__titre { font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.1; color: var(--encre); text-wrap: balance; }
.facade--couv .facade__appel { flex-direction: row; margin-top: .9rem; }
.facade--couv .rond { width: 48px; height: 48px; }
.facade--couv .facade__note { margin: 0; }
@media (max-width: 560px) {
  .facade--couv { padding: 1.5rem 1rem; text-align: center; }
  .facade--couv .facade__btn { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.1rem; }
  .facade__couv { width: min(170px, 60%); }
  .facade--couv .facade__corps { justify-items: center; }
}
@media (prefers-reduced-motion: reduce) { .facade__couv, .facade--calameo .rond { transition: none; } .facade__btn:hover .facade__couv { transform: none; } }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .scene { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-actu__visuel img, .evt__visuel img, .ligne-evt__visuel img, .diapo__visuel img, .tete-page__visuel img, .mega__zoom img, .asso__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega__zoom img { height: 140px; }
.tri { display: inline-flex; gap: .3rem; align-items: center; font-size: var(--t-s); }
.tri span { color: var(--encre-douce); margin-right: .3rem; }
.tri a { padding: .3rem .8rem; border-radius: 999px; border: 1.5px solid var(--filet); text-decoration: none; font-weight: 600; }
.tri a[aria-current] { background: var(--gondoire); border-color: var(--gondoire); color: var(--gondoire-texte); }
.resultats__tete { margin-bottom: 1rem; }
.resultats--page a { background: var(--papier); border: 1px solid var(--filet); }
.resultats--page .meta { grid-column: 2; }
.dlg__suggest--page { padding: 0; }
.pagination, .navigation.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; gap: .3rem; min-width: 44px; min-height: 44px; padding: .4rem .8rem; justify-content: center; border-radius: 999px; border: 1.5px solid var(--filet); text-decoration: none; font-weight: 600; background: var(--papier); }
.pagination .page-numbers.current { background: var(--gondoire); border-color: var(--gondoire); color: var(--gondoire-texte); }
.pagination .page-numbers.dots { border: 0; background: none; }
.pagination .screen-reader-text { position: absolute !important; }
.agenda { padding-block: 2rem 4rem; }

/* Trombinoscope */
.elus { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.elu { display: grid; gap: .25rem; align-content: start; text-align: center; }
.elu__photo { aspect-ratio: 4 / 5; border-radius: var(--rayon); overflow: hidden; background: var(--teinte); display: grid; place-items: center; margin-bottom: .5rem; }
.elu__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elu__initiales { font-family: var(--f-titre); font-size: 4rem; font-weight: 700; color: var(--gondoire); }
.elu__nom, .elu h3 { font-size: var(--t-m); }
/* Trombinoscope regroupé (président, bureau, titulaires, suppléants) */
.trombi--groupes { display: grid; gap: 2.75rem; }
.trombi--groupes > h2 { margin-bottom: 0; }
.trombi__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: 1.1rem; font-size: var(--t-xl); line-height: 1.2; }
.trombi__nombre { font: 400 var(--t-s) var(--f-texte); color: var(--encre-douce); }
.trombi__groupe--president .elus { grid-template-columns: minmax(0, 240px); }
.elu .meta { justify-content: center; text-align: center; }
.elu__fonction { font-weight: 700; color: var(--colibri); font-size: var(--t-s); }
.elu__delegation { font-size: var(--t-s); color: var(--encre-douce); }
@media (max-width: 900px) { .elus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Annuaire */
.assos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.asso { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: .8rem; position: relative; align-self: start; }
.asso:hover { border-color: var(--gondoire-clair); }
.asso__tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; }
.asso__visuel { aspect-ratio: 1; border-radius: var(--rayon-s); overflow: hidden; }
.asso h3 { font-size: var(--t-m); }
.asso__theme { font-size: var(--t-s); color: var(--encre-douce); }
/* 1.7.2 : la fiche se déplie sur place (bouton dans le titre, chevron) */
.asso__btn { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.asso__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.asso__btn:focus-visible { outline: none; }
.asso:has(.asso__btn:focus-visible) { outline: 3px solid var(--colibri); outline-offset: 2px; }
.asso:hover .asso__btn { text-decoration: underline; }
.asso__chevron { flex: none; width: 18px; height: 18px; color: var(--encre-douce); transition: transform .25s; }
.asso__btn[aria-expanded="true"] .asso__chevron { transform: rotate(180deg); }
.asso__btn[aria-expanded="true"] { text-decoration: none; }
.asso.est-ouverte { grid-column: 1 / -1; border-color: var(--gondoire-clair); box-shadow: var(--ombre); }
.asso__detail { position: relative; z-index: 1; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.asso__detail[hidden] { display: none; }
.asso__detail-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.25rem 2rem; align-items: start; }
.asso__detail-in:not(:has(.asso__grand)) { grid-template-columns: 1fr; }
.asso__grand { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon-s); background: var(--teinte); }
.asso__grand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asso__infos { display: grid; gap: 1rem; min-width: 0; }
.asso__texte p + p { margin-top: .6rem; }
.asso__contact { font-style: normal; display: grid; gap: .45rem; font-size: var(--t-s); }
.asso__contact p { display: flex; gap: .55rem; align-items: start; }
.asso__contact .ico { flex: none; margin-top: .2rem; color: var(--colibri); }
.asso__lien { margin-top: .2rem; }
.fiche--contact-seul .contenu { max-width: 48rem; }
.boite--fiche { display: grid; gap: .7rem; }
.boite--fiche address p span, .boite address p span { white-space: pre-line; }
@media (max-width: 760px) { .assos { grid-template-columns: 1fr; } .asso__detail-in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Blocs natifs dans le contenu
   ========================================================================== */
.contenu > * { min-width: 0; }
.contenu > p, .contenu > ul, .contenu > ol, .contenu > blockquote, .contenu > .wp-block-table, .contenu > figure, .contenu > .wp-block-group, .contenu > .wp-block-details, .contenu > .wp-block-buttons, .contenu > .wp-block-columns, .contenu > .wp-block-file { max-width: 68ch; }
.contenu > h2, .contenu > h3, .contenu > h4 { max-width: 30ch; }
.contenu > h2 + *, .contenu > h3 + * { margin-top: -1.75rem; }
.contenu > h3 { font-size: var(--t-xl); line-height: 1.2; }
.contenu > h4 { font-size: var(--t-l); }
.contenu > ul:not([class]), .contenu > ol:not([class]), .wp-block-list, .wp-block-group > ul, .wp-block-group > ol, .wp-block-column > ul, .wp-block-details > ul { padding-left: 1.3rem; display: grid; gap: .4rem; }
.contenu > ul:not([class]), ul.wp-block-list, .wp-block-group > ul { list-style: disc; }
.contenu > ol:not([class]), ol.wp-block-list { list-style: decimal; }
.wp-block-list li::marker, .contenu > ul:not([class]) > li::marker, .contenu > ol:not([class]) > li::marker { color: var(--colibri); font-weight: 700; }
.contenu blockquote, .wp-block-quote { border-left: 4px solid var(--filet-citation, var(--marne)); padding: .5rem 0 .5rem 1.25rem; font-size: var(--t-l); margin: 0; } /* 1.8.4 : filet à la couleur du champ d'action de la page quand il y en a une */
.wp-block-quote cite { display: block; font-size: var(--t-s); color: var(--encre-douce); margin-top: .5rem; font-style: normal; }
.wp-block-image img { border-radius: var(--rayon); height: auto; }
.wp-block-image figcaption, .wp-block-gallery figcaption, .wp-block-video figcaption { font-size: var(--t-xs); color: var(--encre-douce); margin-top: .5rem; text-align: left; }
.wp-block-gallery { gap: .75rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.wp-block-table { overflow-x: auto; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--filet); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.wp-block-table th { background: var(--teinte); font-weight: 700; }
.wp-block-table caption { caption-side: top; font-weight: 700; text-align: left; margin-bottom: .5rem; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; background: var(--colibri); color: var(--sur-colibri); font-weight: 700; font-size: var(--t-s); text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.wp-block-button__link:hover { background: var(--colibri-survol); }
.is-style-contour .wp-block-button__link, .is-style-outline .wp-block-button__link { background: transparent; border-color: currentColor; color: var(--encre); }
.is-style-contour .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:hover { background: var(--teinte); }
.wp-block-separator { border: 0; border-top: 1px solid var(--filet); margin-block: .5rem; max-width: 68ch; }
.wp-block-spacer { margin: 0 !important; }
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon-s); padding: .9rem 1.1rem; }
.wp-block-file a:first-child { font-weight: 700; }
.wp-block-file__button { display: inline-flex; min-height: 40px; align-items: center; padding: .35rem 1rem; border-radius: 999px; background: var(--gondoire); color: var(--gondoire-texte) !important; text-decoration: none; font-size: var(--t-s); font-weight: 700; }
.wp-block-group.is-style-encadre { border-left: 4px solid var(--soleil); background: var(--papier); padding: 1.1rem 1.25rem; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; display: grid; gap: .6rem; }
.wp-block-group.is-style-encadre h3 { font-size: var(--t-m); display: flex; gap: .5rem; align-items: center; }
.wp-block-group.is-style-encadre h3::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; border: 2px solid currentColor; flex: none; background: radial-gradient(circle at 50% 35%, currentColor 1.2px, transparent 1.6px), linear-gradient(currentColor, currentColor) 50% 65% / 2px 35% no-repeat; }
.wp-block-group.is-style-boite { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.25rem; display: grid; gap: .7rem; }
.wp-block-details { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon-s); }
.contenu > .wp-block-details + .wp-block-details { margin-top: -2.2rem; } /* 1.8.0 : seulement sur le site (grille .contenu, écart 2,75 rem) : dans l'éditeur, les volets se superposaient */
.wp-block-details summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-family: var(--f-titre); font-size: 1.6rem; line-height: 1; color: var(--colibri); transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { padding: 0 1.1rem 1.1rem; color: var(--encre-douce); font-size: var(--t-s); }
.wp-block-details > p + p { margin-top: .6rem; }
.wp-block-details > .wp-block-heading { font-size: var(--t-m); line-height: 1.3; color: var(--encre); margin: .3rem 0 0; padding-bottom: .4rem; max-width: none; }
.wp-block-details > .wp-block-heading + * { margin-top: 0; }
.wp-block-details > :not(summary):not(:last-child) { padding-bottom: .55rem; }
.wp-block-columns { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wp-block-column { flex: 1 1 240px; min-width: 0; }
.wp-block-video video { width: 100%; border-radius: var(--rayon); }
.wp-block-embed__wrapper { position: relative; }
/* La façade remplace l'iframe : pas de réservation de ratio (évite un grand blanc au-dessus de la vidéo). */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper.wp-block-embed__wrapper::before { content: none; padding-top: 0; }
.wp-element-caption { font-size: var(--t-xs); color: var(--encre-douce); }
.has-text-align-center { text-align: center; }
.alignwide { margin-inline: calc(50% - 50vw); width: 100vw; max-width: none !important; }
.alignfull { margin-inline: calc(50% - 50vw); width: 100vw; max-width: none !important; }
.has-colibri-color { color: var(--colibri); } .has-gondoire-color { color: var(--gondoire); } .has-marne-color { color: var(--marne); } .has-encre-douce-color { color: var(--encre-douce); }
.has-teinte-background-color { background: var(--teinte); } .has-brume-background-color { background: var(--brume); } .has-papier-background-color { background: var(--papier); } .has-gondoire-background-color { background: var(--gondoire); color: var(--gondoire-texte); }
.has-petit-font-size { font-size: var(--t-s); } .has-courant-font-size { font-size: var(--t-m); } .has-grand-font-size { font-size: var(--t-l); } .has-tres-grand-font-size { font-size: var(--t-xl); }

/* =========================================================================
 * Animations (octobre 2026) : colibri, chiffres, chemin des étapes, transitions de page, jour/nuit.
 * Toutes s'effacent avec « réduire les animations ».
 * ====================================================================== */

/* Colibri du logo : arrive en vol à la première page de la session, respire, s'envole vers la recherche */
.logo__colibri { transform-box: fill-box; transform-origin: 50% 60%; }
/* Pendant le vol, le colibri du logo est masqué (le haut du logo, au-dessus du texte, est rogné). Même chose pour un logo image envoyé dans l'identité du site. */
.marque .logo, .marque .marque__logo { clip-path: inset(-10% -10% -10% -10%); transition: clip-path .3s ease; }
html.colibri-parti .marque .logo, html.colibri-bat .marque .logo { clip-path: inset(37% -10% -10% -10%); }
html.colibri-parti .marque .marque__logo, html.colibri-bat .marque .marque__logo { clip-path: inset(var(--colibri-bas, 36%) -10% -10% -10%); }
/* Battement d'ailes au survol du logo (animations.js) : silhouette en deux parties posée sur le colibri du logo. */
.marque { position: relative; }
.colibri-ailes { position: absolute; z-index: 2; pointer-events: none; }
.colibri-ailes svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.colibri-ailes__ailes { transform-box: view-box; transform-origin: 138px 92px; }
.colibri-vol { position: fixed; left: 0; top: 0; z-index: 95; width: 64px; height: 37px; background: var(--marne-vif); -webkit-mask: url("../img/colibri.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/colibri.svg") 0 0 / 100% 100% no-repeat; transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(calc(var(--f, 1) * var(--s, 1)), var(--s, 1)); transition: transform 1.15s cubic-bezier(.3, .9, .25, 1), opacity .25s, background-color .8s; opacity: 0; pointer-events: none; }
.colibri-vol.est-visible { opacity: 1; }
@keyframes colibri-arriver { 0% { transform: translate(-230px, -130px) rotate(16deg) scale(.6); } 70% { transform: translate(8px, 6px) rotate(-5deg) scale(1.02); } 100% { transform: none; } }
@keyframes colibri-respirer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes colibri-respirer-vol { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* Logo image : le colibri est rogné le temps que son double arrive en vol (animations.js), puis réapparaît. */
@keyframes colibri-rideau { 0%, 85% { clip-path: inset(var(--colibri-bas, 36%) -10% -10% -10%); } 100% { clip-path: inset(-10% -10% -10% -10%); } }
@media (prefers-reduced-motion: no-preference) {
  .logo__colibri { animation: colibri-respirer 5s ease-in-out 2s infinite; }
  html.colibri-arrive .logo__colibri { animation: colibri-arriver 1.5s cubic-bezier(.3, .9, .25, 1) both, colibri-respirer 5s ease-in-out 2s infinite; }
  .colibri-vol.est-pose { animation: colibri-respirer-vol 2.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  html.colibri-arrive .marque .marque__logo { animation: colibri-rideau 1.7s linear; }
}
/* Logo image en mode sombre : inversé pour rester lisible sur l'en-tête sombre (un logo clair dédié peut remplacer ce traitement). */
:root[data-theme="dark"] .marque__logo, :root[data-theme="dark"] .colibri-vol--image, :root[data-theme="dark"] .colibri-ailes--image { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marque__logo, :root:not([data-theme="light"]) .colibri-vol--image, :root:not([data-theme="light"]) .colibri-ailes--image { filter: invert(1) hue-rotate(180deg) brightness(1.15); } }

/* Chiffres clés : comptés à l'apparition, ponctués par le point jaune de la carte */
.chiffres li { position: relative; }
.chiffres li::before { content: ""; position: absolute; left: 0; top: -.75rem; width: 8px; height: 8px; border-radius: 50%; background: var(--soleil); opacity: 0; }
.chiffres li.est-compte::before { opacity: 1; }
@keyframes chiffre-point { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) { .chiffres li.est-compte::before { animation: chiffre-point 1.2s ease-out both; } }

/* Chemin de la démarche : le fil se trace au défilement et allume chaque étape franchie */
.etapes { position: relative; }
.etapes.est-anime::before { content: ""; position: absolute; left: calc(1.3rem - 1px); top: 2.8rem; width: 2px; height: calc(var(--p, 0) * (100% - 4.5rem)); max-height: calc(100% - 4.5rem); background: var(--marne); border-radius: 2px; z-index: 1; transition: height .25s linear; }
.etapes li::before { position: relative; z-index: 2; transition: background-color .4s, color .4s, box-shadow .4s; }
.etapes.est-anime li.est-fait::before { background: var(--marne); color: var(--nuit); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marne) 25%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .etapes.est-anime li > div { transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .etapes.est-anime li:not(.est-fait) > div { opacity: .55; transform: translateX(6px); }
}

/* Transitions de page : fondu glissé entre deux pages, en-tête stable, titre partagé depuis la tuile cliquée */
@view-transition { navigation: auto; }
.entete { view-transition-name: mg-entete; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-sortie .22s ease both; }
  ::view-transition-new(root) { animation: vt-entree .34s ease both; }
  ::view-transition-group(mg-titre) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(mg-titre), ::view-transition-new(mg-titre) { animation-duration: .3s; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Jour / nuit : soleil qui devient lune dans le panneau Affichage, couleurs qui glissent */
.acces__theme legend { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.astre { width: 26px; height: 26px; flex: none; }
.astre svg { width: 100%; height: 100%; overflow: hidden; display: block; }
.astre__rayons { stroke: var(--soleil); stroke-width: 2.4; stroke-linecap: round; transform-origin: 20px 20px; transition: opacity .35s, transform .7s cubic-bezier(.3, .9, .25, 1); }
.astre__disque { fill: var(--soleil); transition: fill .5s; }
.astre__ombre { fill: var(--papier); transform: translate(32px, -14px); transition: transform .7s cubic-bezier(.3, .9, .25, 1), fill .5s; }
:root[data-theme="dark"] .astre__rayons { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .astre__disque { fill: var(--gondoire-texte); }
:root[data-theme="dark"] .astre__ombre { transform: translate(8px, -6px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .astre__rayons { opacity: 0; transform: rotate(90deg) scale(.6); }
  :root:not([data-theme="light"]) .astre__disque { fill: var(--gondoire-texte); }
  :root:not([data-theme="light"]) .astre__ombre { transform: translate(8px, -6px); }
}
html.theme-glisse, html.theme-glisse *, html.theme-glisse *::before, html.theme-glisse *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important; }

/* ==========================================================================
   1.6.0 — Diaporama (style « Diaporama » du bloc Galerie), Calaméo avec introduction
   ========================================================================== */
.contenu > .diaporama, .contenu > .wp-block-gallery.is-style-diaporama { max-width: none; }
/* Les règles du bloc Galerie de WordPress (largeurs en colonnes, recadrage, légende en surimpression floutée) sont
   neutralisées : une diapositive = toute la largeur, image entière, légende sous l'image. */
.wp-block-gallery.has-nested-images.is-style-diaporama { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: var(--rayon); background: #FFFFFF; border: 1px solid var(--filet); margin: 0; align-items: stretch !important; }
@media (prefers-reduced-motion: no-preference) { .wp-block-gallery.is-style-diaporama { scroll-behavior: smooth; } }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image) { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: flex-start; align-self: stretch !important; background: #FFFFFF; }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image) > a { display: block; flex: none !important; width: 100% !important; height: auto !important; margin: 0; cursor: zoom-in; }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image) > a:focus-visible { outline: 3px solid var(--colibri); outline-offset: -5px; }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image)::before { content: none !important; display: none !important; }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image) img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none; object-fit: contain !important; border-radius: 0; flex: none !important; }
.wp-block-gallery.has-nested-images.is-style-diaporama figure.wp-block-image:not(#individual-image) figcaption { position: static !important; background: none !important; max-height: none !important; overflow: visible; padding: 1rem 1.1rem .4rem !important; order: -1; margin: 0; color: #2E292B !important; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-m) !important; text-align: left !important; text-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; flex: none; }
.diaporama { display: grid; gap: .75rem; min-width: 0; }
.diaporama__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.diaporama__etat { font-size: var(--t-s); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.diaporama__etat strong { color: var(--encre); }
.diaporama__nav { display: flex; gap: .5rem; }
.diaporama__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--filet); background: var(--papier); color: var(--encre); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.diaporama__nav button:hover:not([aria-disabled="true"]) { background: var(--marne); border-color: var(--marne); color: var(--nuit); }
.diaporama__nav button[aria-disabled="true"] { opacity: .45; cursor: default; }
.diaporama__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diaporama__nav .diaporama__prec svg { transform: scaleX(-1); }
.calameo { display: grid; gap: .6rem; }
.calameo__intro { font-weight: 700; }


/* =========================================================================
 * 1.8.0 (5 novembre 2026) : cadrage des visuels, diapositives photo et vidéo, couleur du champ d'action
 * dans le contenu, boîte des événements, carte de l'annuaire.
 * ====================================================================== */

/* Cadrage du visuel mis en avant : recadré calé en haut ou en bas, ou entier (carré, portrait) sur une copie floutée en fond */
.carte-actu__visuel, .ligne-evt__visuel, .evt-piste__visuel, .tete-page__visuel, .asso__visuel, .asso__grand, .vignette__visuel, .diapo__visuel { position: relative; overflow: hidden; }
.evt__visuel .visuel-fond { transform: none; } /* la pastille de date déborde du cadre : pas de rognage ici */
img.visuel--haut { object-position: 50% 0; }
img.visuel--bas { object-position: 50% 100%; }
img.visuel--entier { object-fit: contain; position: relative; }
.visuel-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.25); transform: scale(1.15); opacity: .6; pointer-events: none; }
.tete-page__visuel--entier { aspect-ratio: 4 / 3; background: var(--teinte); }
.tete-page__visuel--entier img.visuel--entier { padding: .75rem; }

/* Diapositives « À la Une » : vidéo YouTube lancée sur place (façade), photo sans lien */
button.diapo__jouer { border: 0; padding: 0; cursor: pointer; z-index: 2; background: var(--colibri); color: var(--sur-colibri); /* prime sur .facade__btn */ box-shadow: 0 10px 28px -10px rgb(0 0 0 / .6); transition: transform .2s, background-color .2s; }
button.diapo__jouer:hover, button.diapo__jouer:focus-visible { transform: scale(1.08); background: var(--colibri-survol); }
button.diapo__jouer:focus-visible { outline: 3px solid var(--soleil); outline-offset: 4px; }
.diapo__jouer .ico { width: 28px; height: 28px; }
.diapo__visuel.facade--chargee { background: #000; }
.diapo__visuel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.diapo__corps h2:not(:has(a)) { color: inherit; }
.diapo__note { font-size: var(--t-xs) !important; }
.diapo__note a { color: inherit; }
.diapo--photo .diapo__visuel { background: var(--teinte); }
.une--plein .diapo__corps { pointer-events: none; }
.une--plein .diapo__cadre { pointer-events: auto; }
.une--plein .diapo.est-en-lecture .diapo__cadre { display: none; }
.une--plein .diapo.est-en-lecture .diapo__visuel::before, .une--plein .diapo.est-en-lecture .diapo__visuel::after { content: none; }
@media (prefers-reduced-motion: reduce) { button.diapo__jouer { transition: none; } button.diapo__jouer:hover { transform: none; } }

/* Boîte « Informations pratiques » d'un événement (colonne de droite) : lieu et adresse, public, autres infos sur plusieurs lignes */
.boite--evenement address p span { white-space: normal; }
.boite--service .meta { margin-top: -.3rem; }

/* Couleur du champ d'action de la page sur les petits éléments graphiques du contenu (puces, boutons, vignettes PDF, volets…)
   et de la colonne de droite (pictos du service référent, bouton d'action) : réglée dans Options de la page, héritée par les
   sous-pages ; même rendu dans l'éditeur (.is-root-container). Les textes posés sur ces couleurs restent lisibles (sombre sur
   les teintes claires du kit, blanc sur les foncées). 1.8.1 : colonne de droite comprise ; 1.8.4 : filet des citations. */
.fiche[data-accent], .is-root-container[data-accent] { --filet-citation: var(--colibri); }
.fiche[data-accent="tourisme"], .is-root-container[data-accent="tourisme"] { --colibri: #FDC300; --colibri-survol: #E3B000; --sur-colibri: #2E292B; }
.fiche[data-accent="territoire"], .is-root-container[data-accent="territoire"] { --colibri: #F18700; --colibri-survol: #D47600; --sur-colibri: #2E292B; }
.fiche[data-accent="habitat"], .is-root-container[data-accent="habitat"] { --colibri: #5FC3E1; --colibri-survol: #4AB3D4; --sur-colibri: #2E292B; }
.fiche[data-accent="social"], .is-root-container[data-accent="social"] { --colibri: #0079A7; --colibri-survol: #006085; --sur-colibri: #FFFFFF; }
.fiche[data-accent="culture"], .is-root-container[data-accent="culture"] { --colibri: #E40045; --colibri-survol: #CA043D; --sur-colibri: #FFFFFF; }
.fiche[data-accent="environnement"], .is-root-container[data-accent="environnement"] { --colibri: #D3D700; --colibri-survol: #B3B800; --sur-colibri: #2E292B; }
.fiche[data-accent="securite"], .is-root-container[data-accent="securite"] { --colibri: #662382; --colibri-survol: #501B67; --sur-colibri: #FFFFFF; }
:root[data-theme="dark"] .fiche[data-accent="social"], :root[data-theme="dark"] .is-root-container[data-accent="social"] { --colibri: #4FB5E0; --colibri-survol: #7FCBEA; --sur-colibri: #1B1417; }
:root[data-theme="dark"] .fiche[data-accent="securite"], :root[data-theme="dark"] .is-root-container[data-accent="securite"] { --colibri: #B27CD1; --colibri-survol: #C79BE0; --sur-colibri: #1B1417; }
:root[data-theme="dark"] .fiche[data-accent="culture"], :root[data-theme="dark"] .is-root-container[data-accent="culture"] { --colibri: #FF5C86; --colibri-survol: #FF8AA8; --sur-colibri: #2A0A14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fiche[data-accent="social"], :root:not([data-theme="light"]) .is-root-container[data-accent="social"] { --colibri: #4FB5E0; --colibri-survol: #7FCBEA; --sur-colibri: #1B1417; }
  :root:not([data-theme="light"]) .fiche[data-accent="securite"], :root:not([data-theme="light"]) .is-root-container[data-accent="securite"] { --colibri: #B27CD1; --colibri-survol: #C79BE0; --sur-colibri: #1B1417; }
  :root:not([data-theme="light"]) .fiche[data-accent="culture"], :root:not([data-theme="light"]) .is-root-container[data-accent="culture"] { --colibri: #FF5C86; --colibri-survol: #FF8AA8; --sur-colibri: #2A0A14; }
}

/* Carte de l'annuaire (bloc Annuaire, réglage « Carte ») : carte des 20 communes à gauche (fixe au défilement sur grand écran),
   filtres et liste à droite ; un repère par fiche localisée, coloré par catégorie ; commune choisie en bleu Marne. */
.annuaire__grille { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 1.5rem; }
.annuaire__cote { position: sticky; top: calc(var(--entete-h, 6rem) + 1rem); }
.annuaire__carte { position: relative; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1rem; }
.annuaire--avec-carte .assos { grid-template-columns: 1fr; margin-top: 1rem; }
.annuaire--avec-carte .filtres { margin-bottom: 0; }
.annuaire--avec-carte .annuaire__principal > .filtres__bas { margin: .25rem 0 0; color: var(--encre-douce); font-size: var(--t-s); }
.carte--annuaire .carte-ombre, .carte--annuaire .point, .carte--annuaire .siege { display: none; }
.carte--annuaire .commune path { fill: var(--teinte); stroke: var(--papier); stroke-width: 1.4; }
.carte--annuaire .commune:hover path, .carte--annuaire .commune:focus-visible path { fill: color-mix(in srgb, var(--marne) 40%, var(--teinte)); }
.carte--annuaire .commune.est-choisie path { fill: var(--marne); }
.carte--annuaire .commune:focus-visible path { stroke: var(--encre); stroke-width: 2.5; }
.carte--annuaire .riviere { stroke: var(--marne); }
.carte--annuaire .riviere--marne { stroke-width: 3.5; }
.carte--annuaire .riviere--gondoire { stroke-width: 1.6; }
.carte--annuaire .riviere-nom { fill: var(--encre-douce); stroke: var(--papier); font-size: 11px; }
.carte--annuaire .riviere-nom--petit { font-size: 9px; }
.carte--annuaire .repere { cursor: pointer; --c: var(--colibri); }
.carte--annuaire .repere__point { fill: var(--c); stroke: var(--papier); stroke-width: 2; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.carte--annuaire .repere__halo { fill: var(--c); opacity: 0; transition: opacity .15s; }
.carte--annuaire .repere:hover .repere__point, .carte--annuaire .repere:focus-visible .repere__point, .carte--annuaire .repere.est-visee .repere__point { transform: scale(1.35); }
.carte--annuaire .repere:hover .repere__halo, .carte--annuaire .repere:focus-visible .repere__halo, .carte--annuaire .repere.est-visee .repere__halo { opacity: .3; }
.carte--annuaire .repere:focus-visible { outline: none; }
.carte--annuaire .repere--approx .repere__point { stroke-dasharray: 3 2; fill-opacity: .7; }
.carte--annuaire .repere[hidden] { display: none; }
.carte--annuaire .repere--c1, .legende-c1 { --c: var(--c-habitat); } .carte--annuaire .repere--c2, .legende-c2 { --c: var(--c-territoire); } .carte--annuaire .repere--c3, .legende-c3 { --c: var(--c-culture); } .carte--annuaire .repere--c4, .legende-c4 { --c: #9DA100; } .carte--annuaire .repere--c5, .legende-c5 { --c: var(--c-social); } .carte--annuaire .repere--c6, .legende-c6 { --c: var(--c-securite); } .carte--annuaire .repere--c7, .legende-c7 { --c: #D9A700; }
.carte-legende--categories { list-style: none; padding: 0; margin: .75rem 0 0; justify-content: flex-start; color: var(--encre-douce); }
.carte-legende--categories li { display: inline-flex; align-items: center; gap: .35rem; }
.carte-legende--categories i { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--colibri)); flex: none; }
.carte-legende--categories .legende-approx { background: transparent; border: 2px dashed var(--encre-douce); }
.annuaire__choix { margin: .75rem 0 0; font-size: var(--t-s); }
.annuaire__carte-note { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--encre-douce); }
.button-lien { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-texte); text-decoration: underline; cursor: pointer; }
.button-lien:hover { text-decoration: none; }
.asso.est-visee { border-color: var(--marne); }
.asso--c1 .asso__theme::before, .asso--c2 .asso__theme::before, .asso--c3 .asso__theme::before, .asso--c4 .asso__theme::before, .asso--c5 .asso__theme::before, .asso--c6 .asso__theme::before, .asso--c7 .asso__theme::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; background: var(--c); vertical-align: middle; }
.asso--c1 { --c: var(--c-habitat); } .asso--c2 { --c: var(--c-territoire); } .asso--c3 { --c: var(--c-culture); } .asso--c4 { --c: #9DA100; } .asso--c5 { --c: var(--c-social); } .asso--c6 { --c: var(--c-securite); } .asso--c7 { --c: #D9A700; }
@media (max-width: 900px) { .annuaire__grille { grid-template-columns: 1fr; } .annuaire__cote { position: static; } .annuaire__carte { max-width: 420px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .carte--annuaire .repere__point, .carte--annuaire .repere__halo { transition: none; } }

/* 1.8.1 : événements sur plusieurs jours — date de fin précédée de « du 18 sept. au » ou « jusqu'au » (en cours) */
.evt-piste__date .prefixe { font: 700 var(--t-xs) var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gondoire-doux); white-space: nowrap; }
.evt-piste__date--periode { flex-wrap: wrap; row-gap: .1rem; }
.evt-piste__date--periode .prefixe { flex: 1 0 100%; margin-bottom: .2rem; }
.evt__date--periode small:first-child, .ligne-evt__date--periode small:first-child { white-space: nowrap; }

/* 1.8.2 : widget externe en façade (bloc Widget) : même habillage que la façade Calaméo, iframe à la hauteur annoncée par le widget */
.facade--widget { border-radius: var(--rayon); background: var(--teinte); padding: 1.75rem 1rem; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.facade--widget .facade__corps { gap: .8rem; }
.facade--widget .facade__titre { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.facade--widget .rond { width: 56px; height: 56px; border-radius: 50%; background: var(--gondoire); color: var(--gondoire-texte); display: grid; place-items: center; transition: background .15s; }
.facade--widget .facade__btn:hover .rond { background: var(--colibri); color: var(--sur-colibri); }
.facade--widget.facade--chargee { padding: 0; display: block; background: var(--papier); border: 1px solid var(--filet); }
.facade--widget iframe { width: 100%; border: 0; display: block; background: #fff; }
:root[data-theme="dark"] .facade--widget .rond { background: var(--gondoire-texte); color: var(--gondoire); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .facade--widget .rond { background: var(--gondoire-texte); color: var(--gondoire); } }

/* 1.8.3 : recherche de locaux (BureauxLocaux) — formulaire du site, résultats dans un nouvel onglet */
.recherche-locaux { background: var(--papier); border: 1px solid var(--filet); border-left: 4px solid var(--colibri); border-radius: var(--rayon); padding: 1.25rem 1.4rem 1.2rem; display: grid; gap: .9rem; }
.recherche-locaux > h2, .recherche-locaux > h3 { font-size: var(--t-xl); line-height: 1.15; max-width: none; margin: 0; }
.recherche-locaux > p { color: var(--encre-douce); font-size: var(--t-s); }
.recherche-locaux__form { display: grid; grid-template-columns: auto minmax(200px, 1fr) auto; gap: 1rem 1.25rem; align-items: end; }
.recherche-locaux__choix { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .35rem; }
.recherche-locaux__choix legend { font-weight: 700; font-size: var(--t-s); padding: 0; margin-bottom: .35rem; }
.recherche-locaux__form .champ select { min-height: 44px; width: 100%; }
.recherche-locaux__form .btn { white-space: nowrap; }
.recherche-locaux .mention { margin: 0; }
@media (max-width: 720px) { .recherche-locaux__form { grid-template-columns: 1fr; align-items: stretch; } .recherche-locaux__form .btn { justify-content: center; } }