/* ==========================================================================
   Chalon en commun · groupe d'opposition municipale de Chalon-sur-Saône
   Feuille de style unique (moteur repris du site PS71). Sommaire :
   1. Jetons (couleurs, typo, espacements)   2. Base   3. Utilitaires
   4. Boutons, liens, chips, tags            5. En-tête & navigation
   6. Accueil (bandeau, chiffres…)           8. Cartes de contenu (actus, agenda, élus)
   9. Pages intérieures                      10. Formulaires, newsletter, pied de page
   11. Animations & mouvement réduit         13. Identité Chalon en commun (grand titre, carte des quartiers…)
   ========================================================================== */

/* Police hébergée sur le site (aucun appel à Google : RGPD). Licence : assets/fonts/LICENCE.txt */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-italique.woff2") format("woff2");
}

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Framboise : le « COMMUN » du logo (#E62D67). Les nuances foncées servent aux textes et boutons (contraste AA) */
  --rose: #E62D67;
  --rose-600: #C81D55;   /* boutons & textes : 5,6:1 sur blanc */
  --rose-700: #A3164A;
  --rose-300: #F57FA3;
  --rose-100: #FCE3EC;
  --rose-50: #FEF3F7;

  /* Vert : le « CHALON » du logo (#006A5F), 6,5:1 sur blanc */
  --vert: #006A5F;
  --vert-100: #E0F2EF;

  /* Turquoise : le « EN » du logo (#00C7BC). Sur fond foncé, ou avec un texte foncé */
  --turq: #00C7BC;
  --turq-800: #00544D;
  --turq-100: #DDF6F4;

  /* Nuit : l'aubergine des photos en bichromie du programme. Fonds foncés, pied de page */
  --nuit-950: #140A24;
  --nuit-900: #1E1033;
  --nuit-800: #2A1846;
  --nuit-700: #3A2260;
  --nuit-300: #B9A8D6;
  --nuit-100: #ECE6F5;

  /* Eau : la Saône */
  --eau: #9FE3DE;
  --eau-800: #00635B;
  --eau-100: #E3F7F5;

  --violet: #8E2C86;
  --violet-800: #5B2A86;
  --violet-100: #F0E6F4;

  /* Fond légèrement rosé, blanc, encres */
  --fond: #FAF7F9;
  --fond-2: #F3EDF2;
  --blanc: #FFFFFF;
  --ink: #1D1726;
  --ink-2: #3F3848;
  --ink-3: #5B5466;
  --line: #E7DEE6;

  --degrade: linear-gradient(90deg, #E62D67 0%, #8E2C86 52%, #00C7BC 100%);
  --focus: var(--nuit-900);

  --f-display: "Montserrat", "Arial Black", system-ui, sans-serif;
  --f-serif: var(--f-display);
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --radius: 12px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-1: 0 1px 2px rgba(30, 16, 51, .06), 0 4px 16px rgba(30, 16, 51, .06);
  --shadow-2: 0 2px 4px rgba(30, 16, 51, .06), 0 18px 48px rgba(30, 16, 51, .12);
  --header-h: 80px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
main:focus { outline: none; }
sup { font-size: .6em; line-height: 0; }
::selection { background: var(--rose); color: #fff; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark, .primaire-band, .section--carte, .footer, .annonce, .page-hero--sombre { --focus: var(--turq); }
/* Sur les fonds framboise, le contour de focus est blanc : l'aubergine n'atteint pas le contraste de 3:1 (RGAA 10.7) */
.page-hero--rose, .newsletter, .annonce--rose, .carte-info--rose { --focus: #fff; }

/* Citations courtes : les guillemets « » sont déjà dans le texte */
q { quotes: none; }
q::before, q::after { content: none; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* 3. Utilitaires ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }
.i { width: 1.15em; height: 1.15em; flex: none; }

.section { padding-block: var(--section); }
.section--creme { background: var(--fond-2); }
.section--blanc { background: var(--blanc); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.section__head--stack { display: block; margin-bottom: 1.75rem; }
.section__head--stack .eyebrow { margin-bottom: .75rem; }
.section__head > div > .eyebrow { margin-bottom: .9rem; }
.section__lead { max-width: 34rem; color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rose-600);
}
.eyebrow::before {
  content: ""; flex: none; width: 1em; height: 1em; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12.2 7.4c-1.7 0-2.8 1.2-2.8 2.6 0 1.5 1.2 2.5 2.6 2.5 1.3 0 2.2-.9 2.2-2 0-1-.8-1.7-1.7-1.7M7.3 8.6c-.7 3.9 1.5 6.9 4.8 7.3M16.4 7.9c1 2.7.1 5.6-2.4 7' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M12 3.4c1.9 0 3.3.9 4 2.3 1.9.2 3.5 1.7 3.5 4.1 0 4.3-3.4 7.6-7.5 7.6s-7.5-3.3-7.5-7.6c0-2.4 1.6-3.9 3.5-4.1.7-1.4 2.1-2.3 4-2.3Z'/%3E%3Cpath d='M13.6 19.2c1.4-1.6 3.6-2.1 5.6-1.4-1.1 1.9-3.4 2.6-5.6 1.4Z'/%3E%3Cpath d='M11.4 17.2h1.2v4.6h-1.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12.2 7.4c-1.7 0-2.8 1.2-2.8 2.6 0 1.5 1.2 2.5 2.6 2.5 1.3 0 2.2-.9 2.2-2 0-1-.8-1.7-1.7-1.7M7.3 8.6c-.7 3.9 1.5 6.9 4.8 7.3M16.4 7.9c1 2.7.1 5.6-2.4 7' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M12 3.4c1.9 0 3.3.9 4 2.3 1.9.2 3.5 1.7 3.5 4.1 0 4.3-3.4 7.6-7.5 7.6s-7.5-3.3-7.5-7.6c0-2.4 1.6-3.9 3.5-4.1.7-1.4 2.1-2.3 4-2.3Z'/%3E%3Cpath d='M13.6 19.2c1.4-1.6 3.6-2.1 5.6-1.4-1.1 1.9-3.4 2.6-5.6 1.4Z'/%3E%3Cpath d='M11.4 17.2h1.2v4.6h-1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eyebrow--rose { color: var(--rose-300); }
.eyebrow--ocre { color: var(--turq); }
.eyebrow--light { color: var(--rose-300); }

.h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.75rem);
  font-weight: 780;
  font-variation-settings: "wdth" 86;
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 18ch;
}
.h2 em, .page-hero__titre em, .newsletter__titre em, .elus-groupe__titre em, .h3 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-variation-settings: normal; letter-spacing: -.01em; color: var(--rose-600);
}
.h2--light { color: var(--fond); }
.h2--light em { color: var(--turq); }
.section--carte .h2--light em { color: var(--eau); }
.h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 750; letter-spacing: -.02em; }
.lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.lead--light { color: rgba(255, 255, 255, .82); }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* 4. Boutons, liens, chips, tags ------------------------------------------- */
.btn {
  --b-bg: var(--ink); --b-fg: #fff; --b-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.35em;
  font-family: var(--f-body); font-size: 1rem; font-weight: 650; line-height: 1.1; text-decoration: none;
  color: var(--b-fg); background: var(--b-bg); border: 2px solid var(--b-bd); border-radius: 999px;
  transition: transform .25s var(--ease-out), background-color .2s, color .2s, box-shadow .25s, border-color .2s;
  white-space: nowrap;
}
.btn .i { transition: transform .3s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { min-height: 44px; padding: .55em 1.1em; font-size: .9375rem; }
.btn--lg { min-height: 58px; padding: .9em 1.7em; font-size: 1.0625rem; }
.btn--primary { --b-bg: var(--rose-600); }
.btn--primary:hover { --b-bg: var(--rose-700); box-shadow: 0 12px 26px -14px rgba(20, 10, 36, .55); }
.btn--outline { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink); }
.btn--outline:hover { --b-bg: var(--ink); --b-fg: var(--fond); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); }
.btn--ghost:hover { --b-bg: rgba(30, 16, 51, .06); }
.btn--ghost .i { color: var(--rose-600); }
.btn--ghost:hover .i { transform: scale(1.15); }
.btn--ocre { --b-bg: var(--turq); --b-fg: var(--nuit-950); }
.btn--ocre:hover { --b-bg: #3FD9CF; box-shadow: 0 12px 26px -14px rgba(20, 10, 36, .45); }
.btn--ghost-light { --b-bg: transparent; --b-fg: var(--fond); --b-bd: rgba(255, 255, 255, .4); }
.btn--ghost-light:hover { --b-bg: rgba(255, 255, 255, .1); --b-bd: var(--fond); }
.btn--light { --b-bg: var(--fond); --b-fg: var(--nuit-950); }
.btn--light:hover { --b-bg: #fff; }
.btn--dark { --b-bg: var(--nuit-950); --b-fg: #fff; }
.btn--dark:hover { --b-bg: var(--ink); }

.pulse-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); flex: none; }
.pulse-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--rose); opacity: 0;
  animation: pulse 1.8s var(--ease-out) 2;
}
.btn--outline:hover .pulse-dot { background: var(--turq); }
.btn--outline:hover .pulse-dot::after { border-color: var(--turq); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 650; color: var(--ink);
  text-decoration: none; background: linear-gradient(var(--rose), var(--rose)) left bottom / 0 2px no-repeat;
  padding-block: .35em; transition: background-size .35s var(--ease-out), color .2s;
}
.link-arrow .i { color: var(--rose-600); transition: transform .3s var(--ease-out); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover .i { transform: translateX(4px); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .4em 1em;
  font-size: .9375rem; font-weight: 600; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--blanc); color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--fond); }
a.chip { text-decoration: none; }
.chip__n { font-size: .8em; opacity: .7; font-variant-numeric: tabular-nums; }
.chip__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.chip__dot--rose { background: var(--rose); }
.chip__dot--ocre { background: var(--turq); }
.chip__dot--eau { background: var(--eau); }
.chip__dot--vert { background: #3FBF8C; }
.chip__dot--lilas { background: #B79CF0; }

.tag {
  display: inline-block; padding: .3em .7em; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  background: var(--fond-2); color: var(--ink-2);
}
.tag--elus { background: var(--rose-100); color: var(--rose-700); }
.tag--primaire { background: var(--turq-100); color: var(--turq-800); }
.tag--federation, .tag--instance { background: var(--nuit-100); color: var(--nuit-800); }
.tag--sections, .tag--rencontre { background: var(--eau-100); color: var(--eau-800); }
.tag--region, .tag--formation, .tag--idees { background: var(--violet-100); color: var(--violet-800); }
.tag--national, .tag--reunion { background: #ECEDEF; color: var(--ink-2); }

/* 5. En-tête & navigation -------------------------------------------------- */
.annonce { background: var(--nuit-950); color: var(--fond); font-size: .875rem; position: relative; z-index: 51; }
.annonce__in { display: flex; align-items: center; justify-content: center; gap: .5rem 1rem; min-height: 44px; flex-wrap: wrap; padding-block: 6px; }
.annonce__badge {
  background: var(--turq); color: var(--nuit-950); font-weight: 700; font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .25em .7em; border-radius: 999px;
}
.annonce__txt strong { color: var(--turq); font-weight: 650; }
.annonce__cd:not(:empty)::before { content: " · "; opacity: .6; }
.annonce__cd { color: var(--turq); font-weight: 650; font-variant-numeric: tabular-nums; }
.annonce__lien { display: inline-flex; align-items: center; gap: .35em; font-weight: 650; text-underline-offset: 3px; }
.annonce__lien:hover { color: var(--turq); }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(30, 16, 51, .35); }
.header__in { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); transition: height .3s var(--ease-out); }
.header.is-scrolled .header__in { height: 68px; }
.header__logo { flex: none; display: block; border-radius: 8px; }
.header__logo img { height: 50px; width: auto; transition: height .3s var(--ease-out); }
.header.is-scrolled .header__logo img { height: 42px; }

.nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .5rem .7rem;
  font-size: .9688rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; border-radius: 10px; transition: color .2s;
}
.nav__link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__link.is-current { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__toggle .i { width: 1em; height: 1em; transition: transform .3s var(--ease-out); }
.nav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
/* Dossier du menu : le titre mène à la page, la flèche ouvre la liste */
.nav__duo { display: flex; align-items: center; }
.nav__duo .nav__principal { padding-right: .15rem; }
.nav__chevron {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 44px; padding: 0;
  color: var(--ink-2); background: none; border: 0; border-radius: 8px;
}
.nav__chevron:hover { color: var(--ink); background: var(--fond-2); }
.nav__item { position: relative; }
.nav__item--mobile { display: none; }
.nav__cta { display: flex; align-items: center; gap: .4rem; }

.drop {
  position: absolute; top: calc(100% + 14px); left: -24px; width: min(660px, 90vw);
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.25rem; padding: 1.25rem;
  background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s;
}
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__item--drop.is-open .drop {
  opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease-out), visibility 0s;
}
.drop__list { display: grid; gap: .25rem; }
.drop__list a {
  display: flex; align-items: flex-start; gap: .9rem; padding: .7rem .8rem; border-radius: 12px; text-decoration: none;
  transition: background-color .2s;
}
.drop__list a:hover { background: var(--fond); }
.drop__list strong { display: block; font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.drop__list small { color: var(--ink-3); font-size: .875rem; }
.drop__n { font-family: var(--f-display); font-weight: 800; color: var(--rose-600); font-size: .875rem; padding-top: .15rem; }
.drop__list a.drop__encart { align-items: center; margin-top: .35rem; padding-block: .85rem; background: var(--turq); color: var(--nuit-950); }
.drop__list a.drop__encart:hover { background: #00B3A9; }
.drop__encart .drop__n { color: var(--nuit-950); padding-top: 0; }
.drop__encart small { color: var(--nuit-900); }
.drop__go { flex: none; width: 1.15em; height: 1.15em; margin-left: auto; transition: transform .25s var(--ease-out); }
.drop__encart:hover .drop__go { transform: translateX(3px); }

.burger {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--blanc); align-items: center; justify-content: center;
}
.burger .i { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

@media (max-width: 1260px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; top: 0; z-index: -1; margin: 0;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 2rem;
    padding: calc(var(--header-h) + 64px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background: var(--fond); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s, transform .4s var(--ease-out), visibility 0s .4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease-out), visibility 0s; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__item--mobile { display: block; }
  .nav__link { width: 100%; justify-content: space-between; min-height: 60px; padding: .75rem 0; font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; color: var(--ink); }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"], .nav__link.is-current { color: var(--rose-600); }
  .drop {
    position: static; width: auto; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: 0; padding: 0 0 1rem; background: transparent;
  }
  .nav__item--drop.is-open .drop { display: grid; }
  .nav__duo { justify-content: space-between; gap: 1rem; }
  .nav__duo .nav__principal { flex: 1; width: auto; }
  .nav__chevron { flex: none; width: 48px; height: 48px; min-height: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--blanc); color: var(--ink); }
  .nav__chevron .i { width: 22px; height: 22px; }
  .nav__item--drop .drop__list { padding-left: .25rem; }
  .nav__cta { flex-direction: column; align-items: stretch; }
  .nav__cta .btn { min-height: 54px; font-size: 1.0625rem; }
  body.menu-ouvert { overflow: hidden; }
  .header.menu-ouvert { background: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 6. Accueil ---------------------------------------------------------------- */
.bandeau { background: var(--nuit-900); color: var(--fond); overflow: hidden; padding-block: 1.1rem; border-block: 1px solid var(--nuit-800); }
.bandeau__track { display: flex; width: max-content; animation: defile 45s linear infinite; }
.bandeau:hover .bandeau__track, .bandeau.is-paused .bandeau__track { animation-play-state: paused; }
.bandeau { position: relative; }
.bandeau__pause { position: absolute; right: max(var(--gutter), 12px); top: 50%; translate: 0 -50%; z-index: 2; }
.bandeau__pause .pause__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bandeau__track span {
  display: inline-flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem;
  font-family: var(--f-display); font-weight: 750; font-variation-settings: "wdth" 80;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.bandeau__track span::after {
  content: ""; width: 14px; height: 14px; background: var(--rose); flex: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.bandeau__track span:nth-child(3n+2)::after { background: var(--turq); }
.bandeau__track span:nth-child(3n)::after { background: var(--eau); }

.chiffres { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); }
.chiffres__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chiffre { padding: .5rem clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line); }
.chiffre:first-child { border-left: 0; padding-left: 0; }
.chiffre__n {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 78;
  font-size: clamp(3rem, 2rem + 3.5vw, 5.5rem); line-height: .9; letter-spacing: -.04em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chiffre:nth-child(2) .chiffre__n { color: var(--rose); }
.chiffre__l { margin-top: .6rem; color: var(--ink-2); font-weight: 500; max-width: 16ch; }

.actus-home { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.actus-home__side { display: grid; gap: 1rem; }

.primaire-band { position: relative; background: var(--nuit-900); color: var(--fond); padding-block: var(--section); overflow: hidden; }
.primaire-band::before {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 199, 188, .18), transparent); pointer-events: none;
}
.primaire-band__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.primaire-band .h2 { margin-block: 1rem 1.5rem; max-width: 14ch; }
.primaire-band .btns { margin-top: 2rem; }
.countdown-card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.countdown-card__label { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nuit-300); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-block: 1rem 2rem; }
.countdown > div { background: var(--nuit-950); border-radius: 16px; padding: .9rem .5rem .7rem; text-align: center; }
.countdown span {
  display: block; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1; color: var(--turq); font-variant-numeric: tabular-nums;
}
.countdown small { display: block; margin-top: .35rem; font-size: .8125rem; color: rgba(255, 255, 255, .75); }
.steps { display: grid; gap: .9rem; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; }
.steps__n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--turq); color: var(--turq); font-family: var(--f-display); font-weight: 800;
}
.steps strong { display: block; font-weight: 650; }
.steps small { color: rgba(255, 255, 255, .72); font-size: .9375rem; }

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.agenda-home .events { margin-bottom: 1.5rem; }
.engage { display: grid; gap: 1rem; }
.engage .section__head { margin-bottom: .75rem; }
.engage-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;
  padding: 1.25rem 1.4rem; border-radius: 22px; text-decoration: none;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.engage-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-2); }
.engage-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .16); }
.engage-card__icon .i { width: 26px; height: 26px; }
.engage-card__txt strong { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 750; line-height: 1.15; }
.engage-card__txt small { display: block; margin-top: .2rem; font-size: .9375rem; opacity: .88; line-height: 1.4; }
.engage-card__go { width: 24px; height: 24px; transition: transform .35s var(--ease-out); }
.engage-card:hover .engage-card__go { transform: translateX(5px); }
.engage-card--rose { background: var(--rose-600); color: #fff; }
.engage-card--rose .engage-card__txt small { opacity: 1; }
.engage-card--vert { background: var(--nuit-900); color: var(--fond); --focus: var(--turq); }
.engage-card--ocre { background: var(--turq); color: var(--nuit-950); }
.engage-card--ocre .engage-card__icon { background: rgba(20, 10, 36, .1); }
.engage__social { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-weight: 650; }

/* 8. Cartes de contenu ------------------------------------------------------- */
.news-card {
  position: relative; display: grid; background: var(--blanc); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond-2); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.news-card:hover .news-card__media img, .news-card:hover .vignette { transform: scale(1.05); }
.news-card__body { display: flex; flex-direction: column; gap: .7rem; padding: 1.35rem 1.4rem 1.5rem; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .875rem; color: var(--ink-3); }
.news-card__titre { font-size: 1.3rem; font-weight: 720; line-height: 1.15; letter-spacing: -.015em; }
.news-card__titre a { text-decoration: none; }
.news-card__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card__titre a:focus-visible { outline: none; }
.news-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.news-card__chapo { color: var(--ink-2); font-size: .9688rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__more { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; font-size: .9375rem; color: var(--rose-600); margin-top: auto; }
.news-card__more .i { transition: transform .3s var(--ease-out); }
.news-card:hover .news-card__more .i { transform: translateX(4px); }
.news-card--une .news-card__media { aspect-ratio: 16 / 11; }
.news-card--une .news-card__titre { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-variation-settings: "wdth" 88; line-height: 1.05; }
.news-card--une .news-card__chapo { font-size: 1.0625rem; -webkit-line-clamp: 4; }
.actus-home__side .news-card { grid-template-columns: 38% 1fr; }
.actus-home__side .news-card__media { aspect-ratio: auto; height: 100%; min-height: 150px; }
.actus-home__side .news-card__body { padding: 1rem 1.1rem 1.1rem; gap: .5rem; }
.actus-home__side .news-card__titre { font-size: 1.0625rem; }
.actus-home__side .news-card__chapo { -webkit-line-clamp: 2; font-size: .9063rem; }
.actus-home__side .news-card__more { display: none; }

.vignette { position: relative; width: 100%; height: 100%; min-height: 100%; display: flex; align-items: flex-end; padding: 1rem 1.1rem; overflow: hidden; transition: transform .8s var(--ease-out); }
.vignette__cat { position: relative; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 78; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; }
.vignette--rose { background: var(--rose); color: #fff; background-image: radial-gradient(rgba(255, 255, 255, .22) 2px, transparent 2.5px); background-size: 18px 18px; }
.vignette--vert { background: var(--nuit-900); color: var(--eau); background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px); }
.vignette--ocre { background: var(--turq); color: var(--nuit-950); background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 14px, rgba(20, 10, 36, .1) 14px 16px); }
.vignette--eau { background: var(--eau); color: var(--nuit-950); background-image: repeating-linear-gradient(0deg, transparent 0 12px, rgba(0, 99, 91, .12) 12px 14px); }
.vignette::before {
  content: ""; position: absolute; right: -12%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid currentColor; opacity: .25;
}

.events { display: grid; gap: .75rem; }
.event {
  display: grid; grid-template-columns: 78px 1fr; gap: 1.1rem; align-items: start;
  padding: 1rem 1.1rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 20px;
  transition: border-color .25s, transform .35s var(--ease-out);
}
.event:hover { border-color: var(--ink); transform: translateX(4px); }
.event__date { display: grid; place-items: center; align-content: center; aspect-ratio: 1; border-radius: 16px; background: var(--fond); }
.event[data-type="primaire"] .event__date { background: var(--turq); }
.event__jour { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 2rem; line-height: 1; }
.event__mois { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.event__body { display: grid; gap: .35rem; }
.event__titre { font-size: 1.125rem; font-weight: 720; line-height: 1.2; }
.event__titre a { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.event__titre a:hover { text-decoration-color: currentColor; }
.event__infos { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; color: var(--ink-3); }
.event__infos span { display: inline-flex; align-items: center; gap: .35rem; }
.event__infos .i { width: 1em; height: 1em; color: var(--rose-600); }
.event__desc { color: var(--ink-2); font-size: .9688rem; margin-top: .2rem; }

.elus-une { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.elu-une {
  position: relative; display: grid; grid-template-columns: .9fr 1.1fr; background: var(--blanc);
  border-radius: 28px; overflow: hidden; border: 1px solid var(--line); min-height: 360px;
}
.elu-une__photo { position: relative; overflow: hidden; }
.elu-une__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--ease-out); }
.elu-une:hover .elu-une__photo img { transform: scale(1.04); }
.elu-une__body { display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.elu-une__mandat { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-600); }
.elu-une__nom { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); font-weight: 800; font-variation-settings: "wdth" 80; line-height: .95; letter-spacing: -.03em; }
.elu-une__bio { color: var(--ink-2); font-size: 1rem; }
.elu-une:nth-child(2) .elu-une__mandat { color: var(--nuit-700); }

.elus-groupe { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-top: 1px solid var(--line); }
.elus-groupe[hidden] { display: none; }
.elus-groupe__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end; margin-bottom: 1.75rem; }
.elus-groupe__head p { color: var(--ink-2); }
.elus-groupe__titre { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-variation-settings: "wdth" 85; letter-spacing: -.025em; }
.elus-groupe__titre em { display: block; font-size: .8em; }
.elus-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.elu-card { display: flex; gap: .9rem; align-items: center; padding: .8rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 18px; transition: border-color .25s, transform .35s var(--ease-out); }
.elu-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.elu-card__img { width: 64px; height: 64px; border-radius: 14px; flex: none; object-fit: cover; }
.elu-card__nom { font-family: var(--f-display); font-weight: 720; font-size: 1.0625rem; line-height: 1.2; }
.elu-card__mandat { font-size: .875rem; color: var(--ink-2); line-height: 1.35; }
.elu-card__detail { font-size: .8125rem; color: var(--ink-3); }

.avatar { overflow: hidden; }
.avatar__bg { fill: var(--av-bg); }
.avatar__fg { fill: var(--av-fg); }
.avatar--rose { --av-bg: var(--rose-100); --av-fg: #F5A3BD; }
.avatar--vert { --av-bg: var(--nuit-100); --av-fg: #B9A8D6; }
.avatar--ocre { --av-bg: var(--turq-100); --av-fg: #7FDDD6; }
.avatar--eau { --av-bg: var(--eau-100); --av-fg: #9FE3DE; }

.ps-card {
  display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 0; overflow: hidden;
  background: var(--nuit-900); color: var(--fond); border-radius: 32px; --focus: var(--turq);
}
.ps-card__photo { position: relative; min-height: 320px; }
.ps-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-card__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.ps-card__nom { font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.5rem); font-weight: 800; font-variation-settings: "wdth" 80; letter-spacing: -.03em; line-height: .95; }
.ps-card__mot { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.4; color: rgba(255, 255, 255, .88); }

.membres--cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.membre { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .75rem 1.1rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 22px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.membre:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.membre__img { width: 100%; aspect-ratio: 1; height: auto; border-radius: 16px; margin-bottom: .6rem; object-fit: cover; object-position: 50% 15%; }
.membre__nom { font-family: var(--f-display); font-weight: 750; font-size: 1.15rem; line-height: 1.15; padding-inline: .25rem; }
.membre__role { font-size: .9063rem; color: var(--ink-2); line-height: 1.35; padding-inline: .25rem; }
.membre__section { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--ink-3); padding-inline: .25rem; margin-top: auto; padding-top: .35rem; }
.membre__section .i { width: 1em; height: 1em; color: var(--rose-600); }
.membres--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.membre-c { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: 16px; background: var(--blanc); border: 1px solid var(--line); }
.membre-c__img { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.membre-c__nom { font-weight: 650; line-height: 1.2; }
.membre-c__section { font-size: .8125rem; color: var(--ink-3); }
.membres--mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .25rem 1rem; }
.membre-m { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.membre-m span { display: flex; flex-direction: column; line-height: 1.25; color: var(--ink-3); font-size: .8125rem; }
.membre-m strong { color: var(--ink); font-size: .9375rem; font-weight: 650; }
.membre-m .membre-m__role { color: var(--ink-2); }
.membres--encarts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.membre-e { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 20px; }
.membre-e strong { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.membre-e__role { font-size: .9063rem; color: var(--ink-2); line-height: 1.35; }
.membre-e__section { display: flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .2rem; font-size: .8125rem; color: var(--ink-3); }
.membre-e__section .i { width: 1em; height: 1em; color: var(--rose-600); }

.sec-groupe { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sec-groupe__titre { display: flex; align-items: center; gap: .7rem; font-size: 1.6rem; margin-bottom: 1.1rem; }
.sec-groupe__titre .chip__dot { width: 14px; height: 14px; }
.sec-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.sec-card { display: grid; gap: .45rem; padding: 1.2rem 1.25rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 20px; }
.sec-card__nom { font-size: 1.3rem; font-variation-settings: "wdth" 88; margin-bottom: .25rem; }
.sec-card__row { display: flex; gap: .55rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.sec-card__row .i { color: var(--rose-600); margin-top: .2rem; width: 1em; height: 1em; }
.sec-card .link-arrow { font-size: .9375rem; justify-self: start; margin-top: .25rem; }

/* 9. Pages intérieures ------------------------------------------------------- */
.page-hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 4rem; align-items: end; }
.ariane { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .875rem; color: var(--ink-3); margin-bottom: 1.75rem; list-style: none; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.ariane a { text-underline-offset: 3px; }
.ariane a:hover { color: var(--rose-600); }
.page-hero__titre {
  font-size: clamp(2.7rem, 1.4rem + 5vw, 6rem); font-weight: 800; font-variation-settings: "wdth" 80;
  line-height: .92; letter-spacing: -.035em;
}
.page-hero__lead { margin-top: 1.5rem; }
.page-hero__aside { justify-self: end; }
.page-hero--sombre { background: var(--nuit-900); color: var(--fond); border-bottom: 0; }
.page-hero--sombre .ariane { color: rgba(255, 255, 255, .7); }
.page-hero--sombre .page-hero__titre em { color: var(--turq); }
.page-hero--sombre .lead { color: rgba(255, 255, 255, .82); }
.page-hero--rose { background: var(--rose-600); color: #fff; border-bottom: 0; --focus: var(--nuit-950); }
.page-hero--rose .ariane { color: #fff; }
.page-hero--rose .page-hero__titre em { color: var(--nuit-950); }
.page-hero--rose .eyebrow { color: #fff; }
.page-hero--rose .lead { color: #fff; }
.page-hero__deco {
  position: absolute; right: -2vw; bottom: -.18em; font-family: var(--f-display); font-weight: 800;
  font-variation-settings: "wdth" 75; font-size: clamp(8rem, 22vw, 20rem); line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(30, 16, 51, .07); pointer-events: none; user-select: none;
}
.page-hero--sombre .page-hero__deco { -webkit-text-stroke-color: rgba(255, 255, 255, .09); }
.page-hero--rose .page-hero__deco { -webkit-text-stroke-color: rgba(255, 255, 255, .25); }

.subnav { position: sticky; top: 68px; z-index: 20; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .6rem; list-style: none; margin: 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; white-space: nowrap;
  text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: background-color .2s, color .2s;
}
.subnav a:hover { background: var(--fond-2); color: var(--ink); }
.subnav a.is-active { background: var(--ink); color: var(--fond); }
.subnav a.subnav__encart { background: var(--turq); color: var(--nuit-950); }
.subnav a.subnav__encart:hover { background: #00B3A9; color: var(--nuit-950); }

.instances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.instance { position: relative; padding: 1.5rem; border-radius: 24px; background: var(--blanc); border: 1px solid var(--line); overflow: hidden; }
.instance .instance__n { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 78; font-size: 3.5rem; line-height: .9; letter-spacing: -.04em; color: var(--rose); }
.instance h3 { font-size: 1.35rem; margin: .6rem 0 .4rem; }
.instance p { color: var(--ink-2); font-size: .9688rem; }
.instance--1 { background: var(--nuit-900); color: var(--fond); border-color: var(--nuit-900); }
.instance--1 p { color: rgba(255, 255, 255, .8); }
.instance--1 .instance__n { color: var(--turq); }

.bloc { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.bloc + .bloc { border-top: 1px solid var(--line); }
.bloc__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.bloc__head p { color: var(--ink-2); }
.bloc__count { font-family: var(--f-display); font-weight: 800; color: var(--rose); }

.projet { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.toc { position: sticky; top: 100px; display: grid; gap: .25rem; }
.toc p { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.toc a { display: grid; grid-template-columns: 34px 1fr; gap: .3rem; padding: .55rem .7rem; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: background-color .2s, color .2s; }
.toc a span { font-family: var(--f-display); font-weight: 800; color: var(--rose-600); }
.toc a:hover { background: var(--fond-2); color: var(--ink); }
.toc a.is-active { background: var(--ink); color: var(--fond); }
.toc a.is-active span { color: var(--turq); }
.priorite { padding-block: 0 clamp(3rem, 2rem + 3vw, 5rem); scroll-margin-top: 110px; }
.priorite__n { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--rose); }
.priorite h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); font-variation-settings: "wdth" 85; letter-spacing: -.025em; margin: .75rem 0 1.25rem; max-width: 22ch; }
.priorite .prose { max-width: 44rem; }
.mesures { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin-top: 1.75rem; list-style: none; padding: 0; }
.mesures li { display: flex; gap: .7rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--blanc); border: 1px solid var(--line); font-size: .9688rem; color: var(--ink-2); }
.mesures .i { color: #fff; background: var(--rose-600); border-radius: 50%; padding: 4px; width: 24px; height: 24px; flex: none; }
.citation { margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: 28px; background: var(--rose); color: #fff; }
.citation p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.2; }
.citation footer { margin-top: 1rem; font-weight: 650; }

.prose { color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--ink); margin-top: 2em; }
.prose h3 { font-size: 1.35rem; color: var(--ink); margin-top: 1.8em; }
.prose a { color: var(--rose-600); text-underline-offset: 3px; font-weight: 600; }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--rose); }
.prose blockquote { margin: 1.6em 0; font-family: var(--f-body); font-weight: 700; font-size: 1.35rem; color: var(--rose-600); line-height: 1.4; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.article__cover { border-radius: 28px; overflow: hidden; margin-bottom: 2.5rem; }
.article__cover img { width: 100%; }
.article__cover figcaption { font-size: .875rem; color: var(--ink-3); padding-top: .6rem; }
.article .prose { font-size: 1.125rem; max-width: 42rem; }
/* Premier paragraphe en grand : seulement si la case « accroche » de l'actualité est cochée */
.article .prose--accroche > p:first-child { font-size: 1.3rem; color: var(--ink); line-height: 1.5; }
.chiffres-cles { display: grid; gap: .75rem; position: sticky; top: 100px; }
.chiffre-cle { padding: 1.25rem; border-radius: 20px; background: var(--blanc); border: 1px solid var(--line); }
.chiffre-cle strong { display: block; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 2.6rem; line-height: 1; color: var(--rose); letter-spacing: -.03em; }
.chiffre-cle span { font-size: .9375rem; color: var(--ink-2); }
.sources { font-size: .875rem; color: var(--ink-3); }
.sources a { color: var(--ink-2); }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.carte-info { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: 26px; background: var(--blanc); border: 1px solid var(--line); }
.carte-info__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--rose-100); color: var(--rose-700); }
.carte-info__icon .i { width: 26px; height: 26px; }
.carte-info h3 { font-size: 1.45rem; }
.carte-info p { color: var(--ink-2); }
.carte-info .btn, .carte-info .link-arrow { margin-top: auto; align-self: flex-start; }
.carte-info--rose { background: var(--rose-600); color: #fff; border-color: var(--rose-600); --focus: var(--nuit-950); }
.carte-info--rose p { color: rgba(255, 255, 255, .92); }
.carte-info--rose .carte-info__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.carte-info--vert { background: var(--nuit-900); color: var(--fond); border-color: var(--nuit-900); --focus: var(--turq); }
.carte-info--vert p { color: rgba(255, 255, 255, .82); }
.carte-info--vert .carte-info__icon { background: rgba(255, 255, 255, .1); color: var(--turq); }

.faq { display: grid; gap: .6rem; max-width: 52rem; }
.faq details { background: var(--blanc); border: 1px solid var(--line); border-radius: 18px; transition: border-color .25s; }
.faq details[open] { border-color: var(--ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 1rem 1.25rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { flex: none; transition: transform .3s var(--ease-out); color: var(--rose-600); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }

.candidats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.candidat { padding: 1.1rem; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.candidat .avatar { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .75rem; }
.candidat strong { display: block; font-family: var(--f-display); font-size: 1.1rem; line-height: 1.15; }

.timeline, .timeline[role="list"] { position: relative; display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0 0 0 2.25rem; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--rose), var(--turq)); border-radius: 2px; }
.timeline li { position: relative; padding: 1.1rem 1.25rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 18px; }
.timeline li::before { content: ""; position: absolute; left: calc(-2.25rem + 4px); top: 1.35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 3px solid var(--rose); }
.timeline li.is-cle::before { background: var(--rose); }
.timeline__quand { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-600); }
.timeline strong { display: block; font-family: var(--f-display); font-size: 1.2rem; margin-top: .2rem; }
.timeline p { color: var(--ink-2); font-size: .9688rem; margin-top: .2rem; }

.agenda-mois { margin-bottom: 2.5rem; }
.agenda-mois[hidden] { display: none; }
.agenda-mois__titre { display: flex; align-items: baseline; gap: .6rem; font-size: 2rem; font-variation-settings: "wdth" 85; margin-bottom: 1rem; }
.agenda-mois__titre span { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--rose-600); }
.event[hidden], .news-card[hidden] { display: none; }
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 2rem; }
.filtres__label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; font-size: .9375rem; color: var(--ink-2); }
.grille-actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; list-style: none; padding: 0; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .5rem; border-radius: 12px; text-decoration: none; font-weight: 650; border: 1px solid var(--line); background: var(--blanc); }
.pagination [aria-current] { background: var(--ink); color: var(--fond); border-color: var(--ink); }

.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.coords { display: grid; gap: 1rem; }
.coord { display: flex; gap: 1rem; padding: 1.2rem; border-radius: 20px; background: var(--blanc); border: 1px solid var(--line); }
.coord .i { width: 24px; height: 24px; color: var(--rose-600); flex: none; margin-top: .15rem; }
.coord strong { display: block; font-family: var(--f-display); font-size: 1.1rem; }
.coord p, .coord a { color: var(--ink-2); }

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: 32px; background: var(--turq); color: var(--nuit-950);
  position: relative; overflow: hidden;
}

.cta-band > * { position: relative; z-index: 1; }
.cta-band .h3 em { color: var(--nuit-950); }
.cta-band p { max-width: 40rem; margin-top: .5rem; }
.projet__contenu .cta-band { margin-top: 1rem; }

.elus-top { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.elus-top[hidden] { display: none; }
.elus-une--page .elu-une { min-height: 440px; }
.filtres--elus { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

.actus-une-page { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.actus-une-page .news-card--une { grid-template-columns: 1.2fr 1fr; }
.actus-une-page .news-card--une .news-card__media { aspect-ratio: auto; min-height: 360px; }
.actus-une-page .news-card--une .news-card__body { justify-content: center; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

.article__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; color: var(--ink-3); font-size: .9375rem; }
.article__titre { max-width: 16ch; }

.points-vote { display: grid; gap: .6rem; }
.points-vote li { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 18px; }
.points-vote .i { color: var(--rose-600); margin-top: .2rem; }
.points-vote strong { display: block; font-family: var(--f-display); font-size: 1.1rem; }
.points-vote span { font-size: .9375rem; color: var(--ink-3); }
.points-vote div > span { display: block; }
.points-vote .points-vote__h { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-weight: 600; color: var(--ink-2); }
.points-vote__h .i { width: 1em; height: 1em; margin-top: 0; flex: none; }

.page-hero__btns { margin-top: 2rem; }
.page-hero__grid--primaire { align-items: center; }
.page-hero--sombre .countdown-card .countdown { margin-bottom: 0; }

.agir-bloc { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; scroll-margin-top: 140px; }
.agir-bloc--inverse .agir-bloc__visuel { order: -1; }
.agir-bloc__txt .h2 { margin-block: .9rem 1.25rem; }
.agir-bloc__btns { margin-top: 2rem; }
.agir-bloc__visuel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  aspect-ratio: 1; border-radius: 40px; overflow: hidden; text-align: center; padding: 2rem;
}
.agir-bloc__visuel img { width: 62%; }
.agir-bloc__visuel--rose { background: var(--rose-600); box-shadow: 0 40px 80px -40px rgba(20, 10, 36, .45); }
.agir-bloc__visuel--vert { background: var(--nuit-900); color: var(--turq); }
.agir-bloc__visuel--ocre { background: var(--turq); color: var(--nuit-950); }
.agir-bloc__visuel::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px dashed currentColor; opacity: .25;
}
.agir-bloc__visuel--rose::before { color: #fff; }
.agir-bloc__big { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: .85; letter-spacing: -.05em; }
.agir-bloc__small { font-weight: 650; font-size: 1.125rem; }
.don-exemples { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.5rem; }
.don { padding: 1rem; border-radius: 18px; background: var(--blanc); border: 1px solid var(--line); }
.don strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; line-height: 1; color: var(--rose-600); }
.don span { font-size: .875rem; color: var(--ink-3); }
.legal { max-width: 46rem; }
.legal h2:first-child { margin-top: 0; }

/* Éléments pilotés depuis l'espace admin */
.split--seul { grid-template-columns: 1fr; }
.vide { display: flex; gap: .8rem; align-items: flex-start; padding: 1.25rem 1.4rem; border-radius: 20px; border: 1.5px dashed #CEC3CF; color: var(--ink-2); font-weight: 500; background: rgba(255, 255, 255, .5); }
.vide .i { color: var(--rose-600); margin-top: .15rem; }
.vide[hidden] { display: none; }
.agenda-passes { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.agenda-passes summary { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; list-style: none; }
.agenda-passes summary::-webkit-details-marker { display: none; }
.agenda-passes summary .i { color: var(--rose-600); transition: transform .3s var(--ease-out); }
.agenda-passes[open] summary .i { transform: rotate(45deg); }
.agenda-passes .events { margin-top: 1rem; opacity: .75; }
.plus { display: flex; justify-content: center; margin-top: 2.5rem; }
.plus[hidden] { display: none; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ko { padding: 1rem 1.2rem; border-radius: 14px; background: #FCE3EC; color: #7A1038; font-weight: 600; }
.form-ko[hidden] { display: none; }
.newsletter .form-ko { margin-top: 1rem; }
.newsletter__texte { margin-top: 1rem; color: rgba(255, 255, 255, .92); max-width: 34rem; }
.article--seul { grid-template-columns: minmax(0, 1fr); max-width: 50rem; }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-weight: 650; color: var(--ink-2); }
.partage a { color: var(--rose-600); text-underline-offset: 3px; }
.compte { font-family: var(--f-display); font-weight: 800; color: var(--rose); font-size: max(1.1em, 1.17rem); }
.page-hero__titre .compte { color: inherit; font-family: inherit; }
h1 .compte, h2 .compte, h3 .compte { font-size: inherit; }
.chip__dot--gris { background: #A7ACB3; }
.candidat .candidat__img { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .75rem; object-fit: cover; }
.elu-une__avatar { position: absolute; inset: 0; width: 100%; height: 100%; }
.erreur { min-height: 60vh; display: flex; align-items: center; }

/* Secrétariat général : le mot + 3 encarts photo */
.sg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; }
.sg__mot {
  margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: 32px; background: var(--nuit-900); color: var(--fond); --focus: var(--turq);
  position: relative; overflow: hidden;
}
.sg__mot::before { content: "«"; position: absolute; right: 1.25rem; top: -1.5rem; font-family: var(--f-serif); font-size: 12rem; line-height: 1; color: rgba(0, 199, 188, .18); pointer-events: none; }
.sg__mot .prose { color: rgba(255, 255, 255, .9); font-family: var(--f-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.45; position: relative; }
.sg__mot .prose strong { color: #fff; }
.sg__mot footer { font-weight: 700; color: var(--turq); letter-spacing: .02em; }
.sg__membres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.sg__membre { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .75rem 1.1rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 24px; }
.sg__img { width: 100%; aspect-ratio: 3 / 4; height: auto; border-radius: 18px; margin-bottom: .75rem; object-fit: cover; }
.sg__nom { font-family: var(--f-display); font-weight: 750; font-size: 1.15rem; line-height: 1.15; padding-inline: .25rem; }
.sg__role { font-size: .9063rem; color: var(--ink-2); padding-inline: .25rem; }
.sg__section { padding-top: .15rem; }
/* Une seule personne : le mot en grand, la photo à côté */
.sg--seul { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; }
.sg--seul .sg__membres { grid-template-columns: 1fr; max-width: 340px; }
.sg--seul .sg__nom { font-size: 1.3rem; }
.sg--seul .sg__role { font-size: .9375rem; }
.sg--seul .sg__mot { gap: 1.25rem; padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); }
.sg--equipe { align-items: start; }
.sg__gauche { display: grid; gap: .75rem; align-content: start; }
.sg__gauche .membres--encarts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sg--seul .sg__mot .prose { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.35; padding-right: clamp(0rem, 4vw, 4.5rem); }

/* Pages composées de blocs (éditeur visuel) ------------------------------------ */
.bloc-c + .bloc-c > .bloc { border-top: 1px solid var(--line); }
/* Fond « Aucun, sans filet » : même rythme que le filet, sans trait ni double espace */
.bloc-c.bloc-c--serre > .bloc { border-top: 0; }
.bloc-c--serre + .bloc-c--serre > .bloc { padding-top: 0; }
.page-hero + .bloc-c > .bloc, .page-hero + .subnav + .bloc-c > .bloc { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.bloc[id], .section[id], .demi[id] { scroll-margin-top: 56px; }
.engage__cartes { display: grid; gap: 1rem; }
.engage__cartes:empty { display: none; }
.drop--simple { grid-template-columns: 1fr; width: min(400px, 90vw); }
.projet--seul { grid-template-columns: minmax(0, 1fr); }
.projet--seul .projet__contenu { max-width: 52rem; }
.annonce--rose { background: var(--rose-600); }
.annonce--rose .annonce__badge { background: #fff; color: var(--rose-700); }
.annonce--rose .annonce__txt strong, .annonce--rose .annonce__cd { color: #fff; }
.annonce--ocre { background: var(--turq); color: var(--nuit-950); --focus: var(--nuit-950); }
.annonce--ocre .annonce__badge { background: var(--nuit-950); color: var(--turq); }
.annonce--ocre .annonce__txt strong, .annonce--ocre .annonce__cd { color: var(--nuit-950); }
.annonce + .annonce { border-top: 1px solid rgba(255, 255, 255, .12); }
.citation--vert { background: var(--nuit-900); color: var(--fond); }
.citation--ocre { background: var(--turq); color: var(--nuit-950); }
.section > .container > .citation, .bloc > .citation { margin-bottom: 0; }
.agir-bloc__visuel--photo { padding: 0; background: var(--fond-2); }
.agir-bloc__visuel--photo::before { display: none; }
.agir-bloc__visuel--photo img { width: 100%; height: 100%; object-fit: cover; }
.candidat__role { display: block; margin-top: .25rem; font-size: .875rem; opacity: .75; }
.figure { margin: 0; }
.figure img { width: 100%; border-radius: 28px; }
.figure--texte { max-width: 46rem; }
.figure figcaption { font-size: .875rem; color: var(--ink-3); padding-top: .6rem; }
.video { margin: 0; max-width: 60rem; }
.video__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--nuit-950); }
.video__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: .875rem; color: var(--ink-3); padding-top: .6rem; }
/* Blocs sur fond vert foncé */
.on-dark .bloc__head p, .on-dark .section__lead, .on-dark > .container > p { color: rgba(255, 255, 255, .8); }
.on-dark .prose { color: rgba(255, 255, 255, .85); }
.on-dark .prose strong, .on-dark .prose h2, .on-dark .prose h3 { color: #fff; }
.on-dark .prose a { color: var(--turq); }
.on-dark .faq details { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.on-dark .faq details[open] { border-color: var(--turq); }
.on-dark .faq details > div, .on-dark .timeline p { color: rgba(255, 255, 255, .82); }
.on-dark .membre, .on-dark .membre-c { color: var(--ink); }

.modifier-page {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.1rem; border-radius: 999px; background: var(--nuit-950); color: #fff; font-weight: 650; font-size: .9375rem;
  text-decoration: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); --focus: var(--turq);
}
.modifier-page::before { content: "✎"; }
.modifier-page:hover { background: var(--rose-600); }
@media print { .modifier-page { display: none; } }
/* Sur téléphone, l'éditeur ne sert qu'à écrire une actualité, ajouter un événement et voir les stats (admin/editeur.css) */
@media (max-width: 700px) { .modifier-page { display: none; } }

/* 10. Formulaires, newsletter, pied de page --------------------------------- */
.form { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--blanc); border: 1px solid var(--line); border-radius: 28px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; align-content: start; }
.field label, .field legend { font-weight: 650; font-size: .9375rem; }
.field .req { color: var(--rose-600); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem; border: 1.5px solid #8A7F92; border-radius: var(--radius-sm);
  background: var(--blanc); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--nuit-900); box-shadow: 0 0 0 4px rgba(30, 16, 51, .15); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #B5174C; }
.field__aide { font-size: .875rem; color: var(--ink-3); }
.field__erreur { font-size: .875rem; font-weight: 600; color: #A3164A; }
.field__erreur:empty { display: none; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.check input { width: 22px; height: 22px; min-height: 0; margin-top: .15rem; accent-color: var(--rose-600); flex: none; }
.check .req { color: var(--rose-600); }
.check .field__aide { margin-top: .3rem; }
.check .field__aide a { color: var(--rose-600); text-underline-offset: 3px; font-weight: 600; }
.form-ok { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--nuit-100); color: var(--nuit-900); font-weight: 600; }
.form-ok[hidden] { display: none; }

.newsletter { background: var(--rose-600); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); position: relative; overflow: hidden; --focus: var(--nuit-950); }
.newsletter::before {
  content: ""; position: absolute; right: -8%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .07); pointer-events: none;
}
.newsletter__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.newsletter .eyebrow { color: #fff; margin-bottom: 1rem; }
.newsletter__titre { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); font-variation-settings: "wdth" 85; letter-spacing: -.025em; line-height: 1; }
.newsletter__titre em { color: #fff; opacity: .95; }
.newsletter label { color: #fff; }
.field__row { display: flex; gap: .5rem; padding: .4rem; background: #fff; border-radius: 999px; }
.field__row input { border: 0; border-radius: 999px; min-height: 52px; background: transparent; }
.field__row input:focus { box-shadow: none; outline: none; }
.field__row:focus-within { box-shadow: 0 0 0 3px var(--rose-600), 0 0 0 6px #fff; }
.field__row .btn { flex: none; --b-bg: var(--nuit-950); }
.field__row .btn:hover { --b-bg: var(--ink); box-shadow: none; }
.newsletter .field__aide { color: rgba(255, 255, 255, .9); }
.newsletter .field__aide a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.newsletter .field__erreur { color: #fff; background: rgba(0, 0, 0, .2); padding: .4rem .8rem; border-radius: 10px; }
.newsletter .form-ok { margin-top: 1rem; }

.footer { background: var(--nuit-950); color: var(--fond); padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: .9fr 1.6fr; gap: 3rem; }
.footer__brand img { height: 64px; width: auto; margin-bottom: 1.5rem; }
.footer__brand address { font-style: normal; color: rgba(255, 255, 255, .78); line-height: 1.8; }
.footer__brand address a { text-underline-offset: 3px; }
.footer__brand address a:hover { color: var(--rose-300); }
.footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer__h { font-family: var(--f-body); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--turq); margin-bottom: 1rem; }
.footer__nav ul { display: grid; gap: .15rem; }
.footer__nav a { display: inline-flex; align-items: center; gap: .35em; min-height: 36px; text-decoration: none; color: rgba(255, 255, 255, .85); transition: color .2s; }
.footer__nav a .i { width: .9em; height: .9em; opacity: .6; }
.footer__nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 4px; }
.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); color: var(--fond); transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--ease-spring); }
.social .i { width: 19px; height: 19px; }
.social:hover { background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-3px); }
.socials--dark { margin-top: 0; }
.socials--dark .social { border-color: var(--line); color: var(--ink); background: var(--blanc); }
.socials--dark .social:hover { background: var(--rose-600); border-color: var(--rose-600); color: #fff; }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem; color: rgba(255, 255, 255, .7); position: relative; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__bottom a { text-underline-offset: 3px; }
.footer__bottom a:hover { color: #fff; }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid, .primaire-band__grid, .split, .newsletter__in, .contact, .article { grid-template-columns: 1fr; }
  .hero__art { max-width: 560px; width: 100%; margin-inline: auto; }
  .carte { grid-template-columns: 1fr; }
  .actus-home { grid-template-columns: 1fr; }
  .elus-une { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .grille-actus, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .candidats { grid-template-columns: repeat(3, 1fr); }
  .projet { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; flex-wrap: wrap; }
  .toc p { width: 100%; }
  .chiffres-cles { position: static; grid-template-columns: repeat(3, 1fr); }
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__aside { justify-self: start; }
  .sg { grid-template-columns: 1fr; }
  .agir-bloc { grid-template-columns: 1fr; }
  .agir-bloc--inverse .agir-bloc__visuel { order: 0; }
  .agir-bloc__visuel { max-width: 420px; width: 100%; }
  .actus-une-page .news-card--une { grid-template-columns: 1fr; }
  .actus-une-page .news-card--une .news-card__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  :root { --header-h: 68px; }
  body { font-size: 1rem; }
  .annonce__in { justify-content: flex-start; text-align: left; }
  .header__logo img, .header.is-scrolled .header__logo img { height: 40px; }
  .header.is-scrolled .header__in { height: var(--header-h); }
  .chiffres__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
  .chiffre:nth-child(3) { border-left: 0; padding-left: 0; }
  .actus-home__side .news-card { grid-template-columns: 1fr; }
  .actus-home__side .news-card__media { min-height: 0; aspect-ratio: 16 / 9; }
  .elu-une { grid-template-columns: 1fr; }
  .elu-une__photo { aspect-ratio: 4 / 3.4; }
  .elus-groupe__head, .bloc__head { grid-template-columns: 1fr; }
  .instances { grid-template-columns: 1fr; }
  .grille-actus, .cards-3 { grid-template-columns: 1fr; }
  .candidats { grid-template-columns: repeat(2, 1fr); }
  .ps-card { grid-template-columns: 1fr; }
  .ps-card__photo { min-height: 0; aspect-ratio: 1; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .field__row { flex-direction: column; border-radius: 22px; }
  .field__row .btn { width: 100%; }
  .chiffres-cles { grid-template-columns: 1fr; }
  .countdown { gap: .4rem; }
  .sticker--1 { left: -2%; }
  .sticker--2 { right: -2%; }
  .badge-rond { right: -1%; }
  .event { grid-template-columns: 64px 1fr; gap: .9rem; }
  .carte__legende { position: static; margin-top: 1rem; }
  .pin__label { font-size: .75rem; }
  .pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .pin__dot { width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--nuit-950), 0 0 0 3.5px rgba(255, 255, 255, .9); }
  .pin__dot::after { inset: -4px; }
  .carte__tlabels { display: none; }
  /* Sur téléphone, les points prennent toute la place : pas de noms de rivières (la légende reste) */
  .carte__labels { display: none; }
  .carte__clabel { display: none; }
  .carte__river { stroke-width: 6; }
  .pin--etiquette .pin__label { opacity: 0; }
  .pin--etiquette.pin--cle .pin__label { opacity: 1; }
  .hero__cta .btn { flex: 1 1 100%; }
  .don-exemples { grid-template-columns: 1fr; }
  /* Accueil sur téléphone : seulement l'actualité épinglée (les suivantes sont dans « Toutes les actualités ») */
  .hero__art, .actus-home__side { display: none; }
  /* Équipe du quotidien : 3 par ligne, comme le secrétariat général */
  .membres--cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .membres--cartes .membre { gap: .25rem; padding: .5rem .5rem .8rem; border-radius: 18px; }
  .membres--cartes .membre__img { aspect-ratio: 3 / 4; border-radius: 18px; margin-bottom: .75rem; }
  .membres--cartes .membre__nom { font-size: .95rem; }
  .membres--cartes .membre__role { font-size: .8125rem; }
  .sg__membres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .sg__membre { padding: .5rem .5rem .8rem; border-radius: 18px; }
  .sg__nom { font-size: .95rem; }
  .sg__role { font-size: .8125rem; }
  .elus-une--page .elu-une { min-height: 0; }
  /* Accueil sur téléphone : les deux élus côte à côte, en cartes réduites */
  .elus-une:not(.elus-une--page) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .elus-une:not(.elus-une--page) .elu-une { min-height: 0; border-radius: 20px; grid-template-rows: auto 1fr; }
  .elus-une:not(.elus-une--page) .elu-une__photo { aspect-ratio: 3 / 3.4; }
  .elus-une:not(.elus-une--page) .elu-une__body { gap: .35rem; padding: .85rem .85rem 1rem 1.1rem; justify-content: flex-start; }
  .elus-une:not(.elus-une--page) .elu-une__mandat { font-size: .6875rem; letter-spacing: .06em; }
  .elus-une:not(.elus-une--page) .elu-une__nom { font-size: 1.35rem; }
  .elus-une:not(.elus-une--page) .elu-une__bio { display: none; }
}

/* 11. Animations -------------------------------------------------------------- */
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes tourne-entree { from { transform: rotate(-120deg); } }
@keyframes defile { to { transform: translateX(-50%); } }
@keyframes fiche { from { opacity: 0; transform: translateY(10px); } }
@keyframes monte { from { transform: translateY(105%); } }
@keyframes trace { from { stroke-dashoffset: 1; } }
@keyframes tombe { from { opacity: 0; transform: translateY(-30px) scale(.8); } }

/* Apparition au défilement (seulement si JS actif) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .bandeau__track { animation: none; flex-wrap: wrap; width: auto; }
  .pin__dot::after, .pulse-dot::after { display: none; }
  .bandeau__pause { display: none; }
}

/* Défilement doux uniquement si l'utilisateur ne demande pas moins d'animations */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.page-hero + .section, .page-hero + .subnav + .container .bloc:first-child { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Le mot avec une seule photo et des encarts : sur petit écran, le texte, puis la photo, puis les encarts */
@media (max-width: 1080px) {
  .sg--equipe .sg__gauche { display: contents; }
  .sg--equipe .sg__mot { order: 1; }
  .sg--equipe .sg__membres { order: 2; }
  .sg--equipe .membres--encarts { order: 3; }
}

/* 12. Accessibilité : boutons pause, plan du site ------------------------------ */
/* Bouton « Mettre en pause » des contenus qui bougent seuls (compte à rebours, bandeau défilant) */
.pause {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .85rem;
  font-size: .8125rem; font-weight: 650; color: inherit; background: transparent;
  border: 1.5px solid currentColor; border-radius: 999px;
}
.pause[hidden] { display: none; }
.pause .i { width: .95em; height: .95em; }
.pause__ico { display: inline-flex; }
.pause__ico--play, .pause.is-paused .pause__ico--pause { display: none; }
.pause.is-paused .pause__ico--play { display: inline-flex; }
.pause:hover { background: rgba(255, 255, 255, .1); }
.countdown__pause { margin: -1rem 0 1.75rem; }
.page-hero .countdown__pause { margin-bottom: 0; margin-top: 1rem; }
.bandeau__pause { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--nuit-900); color: var(--fond); box-shadow: -22px 0 18px 4px var(--nuit-900); }
.bandeau__pause:hover { background: var(--nuit-800); }

/* Plan du site */
.plan { max-width: 56rem; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.plan__liste > li { padding: 1.15rem 1.3rem; background: var(--blanc); border: 1px solid var(--line); border-radius: 18px; }
.plan__liste > li > a, .plan__dossier { font-family: var(--f-display); font-weight: 750; font-size: 1.2rem; color: var(--ink); }
.plan a { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.plan a:hover { text-decoration-color: currentColor; }
.plan li ul { display: grid; gap: .45rem; margin-top: .75rem; padding-left: 1rem; border-left: 2px solid var(--rose-100); }
.plan li li a { color: var(--ink-2); font-weight: 550; }

/* 13. Identité Chalon en commun ---------------------------------------------------
   Les codes du programme 2026 : Montserrat Black en capitales, framboise / turquoise / vert,
   photos de Chalon en bichromie, flèches, étiquette penchée. Cette couche prime sur les styles ci-dessus. */

/* Typographie : titres en Montserrat Black, capitales pour les grands titres ; le mot entre étoiles en couleur */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; font-variation-settings: normal; }
.h2, .page-hero__titre, .priorite h2 { font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .96; }
.h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.35rem); max-width: 20ch; }
.page-hero__titre { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); max-width: 18ch; }
.article__titre { text-transform: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); letter-spacing: -.025em; line-height: 1.05; max-width: 24ch; }
.h2 em, .page-hero__titre em, .newsletter__titre em, .elus-groupe__titre em, .h3 em, .priorite h2 em {
  font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--rose-600);
}
.h2--light em, .page-hero--sombre .page-hero__titre em, .primaire-band .h2 em { color: var(--turq); }
.page-hero--rose .page-hero__titre em { color: var(--nuit-950); }
.h3 { font-weight: 800; }

/* Surtitre : un trait aux trois couleurs du logo (à la place du symbole du PS) */
.eyebrow { font-weight: 800; letter-spacing: .14em; }
.eyebrow::before { -webkit-mask: none; mask: none; width: 28px; height: 3px; border-radius: 2px; background: var(--degrade); opacity: 1; }
.eyebrow--ocre, .eyebrow--light, .eyebrow--rose { color: var(--turq); }

/* Boutons : plus nets, comme les aplats du programme */
.btn { border-radius: 6px; font-weight: 800; letter-spacing: .005em; }
.btn--ocre { --b-fg: var(--nuit-950); }
.btn--ocre:hover { --b-bg: #3FD9CF; }
.btn--light { --b-bg: #fff; --b-fg: var(--nuit-950); }
.btn--light:hover { --b-bg: var(--rose-50); }
.btn--ghost-light { --b-fg: #fff; --b-bd: rgba(255, 255, 255, .55); }
.tag { border-radius: 4px; }
.link-arrow { font-weight: 800; }

/* L'étiquette penchée du programme (« CE 15 MARS ») */
.sticker {
  display: inline-block; padding: .5em .9em; border-radius: 3px;
  background: var(--rose-600); color: #fff; box-shadow: 0 10px 22px -14px rgba(20, 10, 36, .6);
  font-family: var(--f-display); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase;
  rotate: -2deg; text-wrap: balance;
}

/* Logo : trois tracés colorés par la feuille de style */
.logo { display: block; height: auto; }
.logo--classique .logo__chalon { fill: var(--vert); }
.logo--classique .logo__en { fill: var(--turq); }
.logo--classique .logo__commun { fill: var(--rose); }
.logo--blanc path { fill: #fff; }
.header { background: rgba(255, 255, 255, .9); }
.header__logo .logo { width: 150px; transition: width .3s var(--ease-out); }
.header.is-scrolled .header__logo .logo { width: 128px; }
.header__logo:hover .logo__en { fill: var(--rose); }
.header__logo .logo__en { transition: fill .3s; }
/* Fil de lecture aux couleurs du logo, sous l'en-tête */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--degrade);
  transform: scaleX(var(--lecture, 0)); transform-origin: left; pointer-events: none;
}
.nav__link { font-weight: 700; }
.drop__n { color: var(--rose-600); }
.drop__list strong { font-weight: 800; }

/* Accueil : « CHALON » puis les mots qui défilent jusqu'à « EN COMMUN », sur Chalon en bichromie */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(86svh, 820px); padding-block: clamp(4.5rem, 3rem + 8vw, 9rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--nuit-900); color: #fff;
}
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 10, 36, .94) 0%, rgba(20, 10, 36, .74) 40%, rgba(20, 10, 36, .2) 78%, rgba(20, 10, 36, .06) 100%),
    linear-gradient(0deg, rgba(20, 10, 36, .7) 0%, rgba(20, 10, 36, 0) 42%);
}
.hero__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; width: 100%; }
.hero__text { max-width: 760px; }
.hero__sticker { margin-bottom: 1.6rem; }
.hero__titre { font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .84; color: #fff; }
.hero__fixe { display: block; font-size: clamp(3.8rem, 1.2rem + 10vw, 9.25rem); }
.hero__mots {
  position: relative; display: block; overflow: hidden; height: 1.12em; margin-top: .06em;
  font-size: clamp(2.1rem, .9rem + 4.8vw, 4.9rem); line-height: 1.12; letter-spacing: -.03em; color: var(--turq);
}
.hero__mot { position: relative; display: inline-block; white-space: nowrap; }
.hero__mot.is-final { color: #fff; }
.hero__mot.is-final::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: .09em; border-radius: 1px;
  background: var(--degrade); transform-origin: left;
}
.hero__lead { margin-top: 1.6rem; max-width: 36rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; color: rgba(255, 255, 255, .9); }
.hero__lead strong { color: #fff; font-weight: 800; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__rdv {
  flex: none; width: 340px; display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
  background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-2); --focus: var(--nuit-900);
}
.hero__rdv-date {
  flex: none; display: grid; place-items: center; align-content: center; width: 64px; height: 72px; border-radius: var(--radius-sm);
  background: var(--rose-50); color: var(--rose-600); font-size: .8rem; font-weight: 800; line-height: 1; text-transform: uppercase;
}
.hero__rdv-date span { font-size: 1.85rem; font-weight: 900; letter-spacing: -.03em; color: var(--rose-600); }
.hero__rdv-label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-600); }
.hero__rdv-titre { margin-top: .2rem; font-weight: 800; line-height: 1.3; }
.hero__rdv-titre a { text-decoration: none; }
.hero__rdv-infos { font-size: .9rem; color: var(--ink-3); }
.hero .ed-image-vide { position: absolute; inset: 0; z-index: -2; }
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__grid { flex-direction: column; align-items: stretch; }
  .hero__rdv { width: auto; }
}

/* Chiffres : alternance framboise / vert, suffixe plus petit */
.chiffres { background: #fff; }
.chiffre__n { font-weight: 900; letter-spacing: -.045em; color: var(--rose-600); }
.chiffre:nth-child(2) .chiffre__n, .chiffre:nth-child(4) .chiffre__n { color: var(--vert); }
.chiffre__s { font-size: .5em; margin-left: .08em; letter-spacing: 0; }

/* Cartes, mots signés, citations : coins nets, guillemets en Montserrat */
.carte-info h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.3rem; }
.carte-info--vert .carte-info__icon { color: var(--turq); }
.sg__mot::before { font-family: var(--f-display); font-weight: 900; color: rgba(0, 199, 188, .22); }
.sg__mot .prose { font-family: var(--f-body); font-style: normal; font-weight: 500; }
.sg__mot .prose strong { font-weight: 800; }
.sg__nom { font-weight: 800; }
.sg__membre { color: var(--ink); }
.sg--seul .sg__mot .prose { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); line-height: 1.5; }
.citation p { font-family: var(--f-display); font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; }
.prose blockquote { font-family: var(--f-body); font-style: normal; font-weight: 600; }
.prose li::marker { color: var(--rose-600); }
.membre, .membre-e, .sg__membre, .news-card, .mesures li, .citation, .carte-info, .engage-card, .article__cover { border-radius: var(--radius); }
.sg__img, .membre__img { border-radius: var(--radius-sm); }

/* Listes à flèches, comme dans le programme */
.mesures .i { background: none; color: var(--rose-600); padding: 0; width: 20px; height: 20px; margin-top: .15em; }
.mesures li { align-items: flex-start; color: var(--ink-2); }
.mesures strong { color: var(--ink); font-weight: 800; }
.agir-bloc .mesures { grid-template-columns: 1fr; gap: .5rem; }
.agir-bloc .mesures li { padding: .7rem .9rem; }

/* Programme : une photo en bichromie par chantier, numéros en couleur */
.priorite__photo { margin: 0 0 1.75rem; overflow: hidden; border-radius: var(--radius); }
.priorite__photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.priorite__n { -webkit-text-stroke-color: var(--vert); }
.priorite--rose .priorite__n { -webkit-text-stroke-color: var(--rose); }
.priorite--rose .mesures .i { color: var(--vert); }
.priorite h2 { font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.7rem); }
.toc a.is-active { background: var(--nuit-900); }

/* Texte et visuel : étiquette sur la photo, logo blanc sur aplat */
.agir-bloc__visuel { position: relative; }
.agir-bloc__visuel .logo { width: 64%; }
.agir-bloc__pastille { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; }

/* Carte des quartiers et signalement */
.quartiers { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.quartiers__carte { margin: 0; }
.quartiers__scene { position: relative; }
.quartiers__svg { width: 100%; height: auto; overflow: visible; }
.quartiers__zone {
  fill: #DCD3EC; stroke: #fff; stroke-width: 3; stroke-linejoin: round; cursor: pointer;
  transition: fill .25s var(--ease-out);
}
.quartiers__zone:nth-child(3n+1) { fill: #F8CCDA; }
.quartiers__zone:nth-child(3n+2) { fill: #BFEAE5; }
.quartiers__zone--activite { fill: #E4DFE5; }
.quartiers__zone:hover, .quartiers__zone.is-survol { fill: var(--rose-300); }
.quartiers__zone.is-choisi:hover { fill: var(--rose-600); }
.quartiers__zone.is-choisi { fill: var(--rose); }
.quartiers__eau { fill: var(--eau); pointer-events: none; }
.quartiers__saone {
  fill: none; stroke: var(--turq); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none;
  stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-out) .2s;
}
.js .quartiers__carte.reveal:not(.is-in) .quartiers__saone { stroke-dashoffset: 1; }
.quartiers__nom {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; translate: -50% -50%;
  padding: .35em .7em; border-radius: 4px; background: var(--nuit-900); color: #fff; box-shadow: var(--shadow-1);
  font-size: .8125rem; font-weight: 800; white-space: nowrap; pointer-events: none;
}
.quartiers__nom.is-choisi { background: var(--rose-600); }
.quartiers__saone-nom {
  position: absolute; left: 74%; top: 53%; rotate: -38deg; pointer-events: none;
  font-size: clamp(.65rem, .55rem + .4vw, .85rem); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: var(--eau-800);
}
.quartiers__source { margin-top: .75rem; font-size: .75rem; line-height: 1.5; color: var(--ink-3); }
.quartiers__form {
  position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.quartiers__form .h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); text-transform: uppercase; font-weight: 900; }
.quartiers__form .field, .quartiers__form .check { margin: 0; }
@media (max-width: 960px) {
  .quartiers { grid-template-columns: 1fr; }
  .quartiers__form { position: static; }
}

/* Les élu·es du groupe */
.elus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.elu {
  display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); gap: 1.25rem; align-items: start;
  padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.elu:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.elu--tete { grid-column: 1 / -1; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); padding: clamp(1rem, 2vw, 1.5rem); gap: clamp(1.25rem, 3vw, 2.5rem); }
.elu__photo { overflow: hidden; border-radius: var(--radius-sm); }
.elu__photo img, .elu__photo .avatar { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease-out); }
.elu:hover .elu__photo img { transform: scale(1.03); }
.elu__corps { padding-block: .25rem; }
.elu__nom { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }
.elu--tete .elu__nom { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.elu__mandat { margin-top: .4rem; font-size: .9375rem; font-weight: 700; line-height: 1.35; color: var(--rose-600); }
.elu:nth-child(even) .elu__mandat { color: var(--vert); }
.elu__bio { margin-top: .9rem; color: var(--ink-2); max-width: 46rem; }
.elu__mandats { margin-top: 1rem; }
.elu__mandats-titre { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; }
.elu__mandats ul { display: grid; gap: .3rem; }
.elu__mandats li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.elu__mandats .i { width: 1em; height: 1em; margin-top: .25em; color: var(--vert); }
.elu__contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.elu__contact .socials { margin: 0; }
.elus--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.elu--mini { display: block; padding: 0; border: 0; background: none; }
.elu--mini .elu__nom { font-size: 1rem; margin-top: .75rem; }
.elu--mini .elu__mandat { font-size: .8125rem; }
@media (max-width: 960px) {
  .elus { grid-template-columns: 1fr; }
  .elus--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .elu, .elu--tete { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; padding: .85rem; }
  .elu--tete { grid-template-columns: 1fr; }
  .elu--tete .elu__photo { max-width: 260px; }
  .elus--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* HelloAsso */
.helloasso iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); background: #fff; }

/* Pied de page : logo blanc, réseaux avec leur nom */
.footer { background: var(--nuit-950); }
.footer { background-image: var(--degrade); background-size: 100% 4px; background-repeat: no-repeat; background-position: top; }
.footer__logo { width: 200px; margin-bottom: 1.25rem; }
.footer__texte { max-width: 26rem; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .82); }
.footer__nav { grid-template-columns: repeat(3, 1fr); }
.footer__suivre { margin-top: 1.5rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--turq); }
.footer .socials--noms { margin-top: .6rem; }
.social--nom { display: inline-flex; gap: .55rem; width: auto; height: 44px; padding: 0 1.05rem 0 .85rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.social--nom .i { width: 18px; height: 18px; }

/* Animations d'entrée du grand titre (désactivées si l'on demande moins d'animations) */
@keyframes mot-entre { from { transform: translateY(100%); opacity: 0; } }
@keyframes mot-sort { to { transform: translateY(-100%); opacity: 0; } }
@keyframes souligne { from { transform: scaleX(0); } }
@keyframes zoom-doux { from { transform: scale(1.08); } }
.js .hero__photo { animation: zoom-doux 2.4s var(--ease-out) both; }
.js .hero__text > * { animation: fiche .8s var(--ease-out) both; }
.js .hero__text > :nth-child(2) { animation-delay: .1s; }
.js .hero__text > :nth-child(3) { animation-delay: .28s; }
.js .hero__text > :nth-child(4) { animation-delay: .4s; }
.js .hero__sticker { animation-name: tombe; animation-timing-function: var(--ease-spring); animation-duration: .7s; }
.js .hero__rdv { animation: fiche .9s var(--ease-out) .55s both; }
.js .hero__mot.is-entre { animation: mot-entre .42s var(--ease-out) both; }
.js .hero__mot.is-sort { position: absolute; left: 0; top: 0; animation: mot-sort .34s cubic-bezier(.65, 0, .35, 1) forwards; }
.js .hero__mot.is-final.is-entre::after { animation: souligne .7s var(--ease-out) .15s both; }
@media (prefers-reduced-motion: reduce) {
  .header::after { display: none; }
}

/* Corrections issues du contrôle de design (contrastes, halos, cartes) */
.citation { background: var(--rose-600); }
.carte-info--vert .link-arrow, .carte-info--rose .link-arrow, .on-dark .link-arrow, .primaire-band .link-arrow { color: #fff; }
.carte-info--vert .link-arrow .i, .on-dark .link-arrow .i, .primaire-band .link-arrow .i { color: var(--turq); }
.carte-info--rose .link-arrow .i { color: #fff; }
.btn--primary:hover { box-shadow: 0 12px 26px -14px rgba(20, 10, 36, .55); }
.btn--ocre:hover { box-shadow: 0 12px 26px -14px rgba(20, 10, 36, .45); }
.sticker { line-height: 1.35; }
.js .hero__sticker { animation-name: fiche; animation-timing-function: var(--ease-out); }
/* Cartes : l'icône à côté du titre, sans pastille */
.carte-info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: .75rem; row-gap: .75rem; }
.carte-info > * { grid-column: 1 / -1; }
.carte-info > .carte-info__icon { grid-column: 1; width: auto; height: auto; background: none; border-radius: 0; color: var(--rose-600); align-self: center; }
.carte-info > h3 { grid-column: 2; align-self: center; }
.carte-info__icon .i { width: 28px; height: 28px; }
.carte-info--vert > .carte-info__icon { background: none; color: var(--turq); }
.carte-info--rose > .carte-info__icon { background: none; color: #fff; }

/* Téléphone : pas de flash gris au toucher (le retour visuel vient des états :active), carte des quartiers sans zoom au double-tap */
a, button, .quartiers__zone { -webkit-tap-highlight-color: transparent; }
.quartiers__svg { touch-action: manipulation; }
@media (hover: none) {
  .btn:hover, .elu:hover, .news-card:hover { transform: none; }
}

/* Corrections de la revue finale --------------------------------------------- */
/* Énoncés : un grand mot en capitales, une flèche, une phrase (valeurs, devise) */
.enonces { display: grid; border-top: 2px solid var(--nuit-900); }
.enonce {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  padding-block: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-bottom: 1px solid var(--line);
}
.enonce__mot {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .95;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); color: var(--rose-600);
}
.enonce:nth-child(3n+2) .enonce__mot { color: var(--vert); }
.enonce:nth-child(3n) .enonce__mot { color: var(--nuit-900); }
.enonce__corps { display: flex; gap: .9rem; align-items: flex-start; }
.enonce__fleche { width: 26px; height: 26px; margin-top: .2em; color: var(--rose-600); flex: none; }
.enonce__texte { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.enonce .link-arrow { margin-top: .5rem; }
.enonces__source { margin-top: 1rem; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 760px) { .enonce { grid-template-columns: 1fr; gap: .6rem; } }


/* Le mot signé : guillemets à leur place, au-dessus du texte ; cartes photo à leur hauteur naturelle */
.sg { align-items: start; }
.sg__membres { align-items: start; }
.sg__mot { padding-top: clamp(4.25rem, 3.5rem + 2vw, 5.5rem); }
.sg__mot::before { left: clamp(1.5rem, 1rem + 2.5vw, 3rem); right: auto; top: .9rem; font-size: 6rem; line-height: 1; color: var(--turq); opacity: .55; }

/* Carte des quartiers : teintes du logo (framboise, turquoise, vert) */
.quartiers__zone { fill: #CFE5E1; }
.quartiers__zone:nth-child(3n+1) { fill: #F8CCDA; }
.quartiers__zone:nth-child(3n+2) { fill: #BFEAE5; }
.quartiers__zone--activite { fill: #E4DFE5; }
.quartiers__zone:hover, .quartiers__zone.is-survol { fill: var(--rose-300); }
.quartiers__zone.is-choisi { fill: var(--rose); }

/* En-têtes de section : le titre et son texte côte à côte, sans retour à la ligne forcé */
.section__head > div { flex: 0 1 auto; }
.section__head > .section__lead { flex: 1 1 22rem; }

/* Actualités : la vignette du communiqué reste lisible */
.news-card__media img { object-position: 50% 30%; }
.sg .sg__mot, .sg--seul .sg__mot { padding-top: clamp(4.5rem, 3.75rem + 2vw, 5.75rem); }
.enonce__mot { font-size: clamp(2rem, 1rem + 2.9vw, 3.6rem); overflow-wrap: anywhere; }
/* Guillemets du mot signé : dans le flux, au-dessus du texte, à toutes les largeurs */
.sg .sg__mot, .sg--seul .sg__mot { padding-top: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.sg__mot::before { position: static; display: block; height: .5em; margin-bottom: -.25rem; font-size: clamp(4rem, 3rem + 2vw, 5.5rem); line-height: .8; }

/* 14. Direction artistique : l'affiche ---------------------------------------------
   Une seule grammaire répétée partout, tirée des tracts : papier déchiré, grain d'impression,
   capitales Montserrat Black, mot surligné d'un bandeau de couleur, flèches. */
:root {
  --jaune: #FFD43B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  --dechire: url("../img/dechire.svg");
  --dechire-h: clamp(14px, 1rem + .8vw, 28px);
}

/* Titres : le mot entre étoiles devient un bandeau imprimé (comme « NOTRE VISION » dans le programme) */
.h2 { font-size: clamp(2.15rem, 1.2rem + 3.1vw, 4rem); line-height: .95; letter-spacing: -.035em; }
.h2 em, .elus-groupe__titre em, .priorite h2 em, .newsletter__titre em {
  background: var(--rose-600); color: #fff; padding: .02em .16em 0; margin-inline: -.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.12;
}
.on-dark .h2 em, .h2--light em, .primaire-band .h2 em { background: var(--turq); color: var(--nuit-950); }
.h3 em { color: var(--rose-600); }

/* En-tête de page : une affiche pleine largeur, photo en bichromie, voile de couleur, grain, bord déchiré */
.page-hero {
  --ph-bg: var(--nuit-900); --ph-fg: #fff; --ph-doux: rgba(255, 255, 255, .86); --ph-em-bg: var(--turq); --ph-em-fg: var(--nuit-950);
  isolation: isolate; background: var(--ph-bg); color: var(--ph-fg); border-bottom: 0;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) calc(clamp(3rem, 2rem + 4vw, 6rem) + var(--dechire-h));
}
.page-hero--rose { --ph-bg: var(--rose-600); --ph-em-bg: var(--nuit-950); --ph-em-fg: #fff; --focus: #fff; }
.page-hero--turq { --ph-bg: var(--turq); --ph-fg: var(--nuit-950); --ph-doux: var(--nuit-900); --ph-em-bg: var(--nuit-950); --ph-em-fg: var(--turq); --focus: var(--nuit-950); }
.page-hero--jaune { --ph-bg: var(--jaune); --ph-fg: var(--nuit-950); --ph-doux: var(--nuit-900); --ph-em-bg: var(--rose-600); --ph-em-fg: #fff; --focus: var(--nuit-950); }
.page-hero__fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.page-hero__voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain), linear-gradient(90deg, var(--ph-bg) 0%, var(--ph-bg) 38%, color-mix(in srgb, var(--ph-bg) 55%, transparent) 72%, color-mix(in srgb, var(--ph-bg) 20%, transparent) 100%);
}
.page-hero:not(.page-hero--photo) .page-hero__voile { background: var(--grain); }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--dechire-h); background: var(--fond);
  -webkit-mask: var(--dechire) 0 0 / 100% 100% no-repeat; mask: var(--dechire) 0 0 / 100% 100% no-repeat;
}
.page-hero:has(+ .section--creme)::after { background: var(--fond-2); }
.page-hero .ariane, .page-hero .ariane a { color: var(--ph-doux); }
.page-hero .ariane a:hover { color: var(--ph-fg); }
.page-hero__grid { grid-template-columns: minmax(0, 1fr) auto; }
.page-hero__titre {
  font-size: clamp(2.6rem, 1rem + 5.6vw, 6.4rem); line-height: .9; letter-spacing: -.04em; max-width: 14ch; color: var(--ph-fg);
}
.page-hero .page-hero__titre em {
  color: var(--ph-em-fg); background: var(--ph-em-bg); padding: .03em .14em 0; margin-inline: -.03em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.1;
}
.page-hero .lead { color: var(--ph-doux); font-weight: 500; max-width: 36rem; }
.page-hero__sticker { margin-bottom: 1.4rem; }
.page-hero--rose .page-hero__sticker { background: var(--nuit-950); }
.page-hero--jaune .page-hero__sticker, .page-hero--turq .page-hero__sticker { background: var(--rose-600); }
.page-hero--photo .page-hero__texte { max-width: 46rem; }
@media (max-width: 760px) {
  .page-hero__voile { background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--ph-bg) 88%, transparent), var(--ph-bg) 70%); }
  .page-hero__fond { object-position: 60% 30%; }
}

/* Bandeau jaune de la grande enquête, tout en haut */
.annonce--jaune { background: var(--grain), var(--jaune); color: var(--nuit-950); --focus: var(--nuit-950); }
.annonce--jaune .annonce__badge { background: var(--nuit-950); color: var(--jaune); rotate: -2deg; border-radius: 2px; }
.annonce--jaune .annonce__txt strong { color: var(--nuit-950); font-weight: 800; }
.annonce--jaune .annonce__lien { color: var(--nuit-950); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.annonce--jaune .annonce__lien:hover { color: var(--rose-700); }

/* Pied de page */
.footer { background: var(--nuit-950); background-image: none; }
.footer__h { font-family: var(--f-display); font-weight: 900; font-size: .8125rem; }
/* Affiche de l'enquête : un point d'interrogation géant en guise d'image */
.page-hero--jaune .page-hero__voile::before {
  content: "?"; position: absolute; right: max(2vw, calc(50% - 600px)); bottom: -.12em; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(16rem, 10rem + 26vw, 40rem); line-height: .8; color: var(--rose-600); rotate: 8deg;
}
@media (max-width: 760px) { .page-hero--jaune .page-hero__voile::before { opacity: .16; } }
/* Le grand titre d'accueil se déchire comme les affiches de page */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--dechire-h); background: var(--fond); z-index: 2;
  -webkit-mask: var(--dechire) 0 0 / 100% 100% no-repeat; mask: var(--dechire) 0 0 / 100% 100% no-repeat;
}

/* 15. Feuilles déchirées, accueil, carte ------------------------------------------- */
:root { --dechire-bas: url("../img/dechire-bas.svg"); }
/* Chaque bande de couleur est une feuille : bords haut et bas déchirés */
.section--creme, .section--jaune, .primaire-band, .newsletter, .footer {
  position: relative;
  -webkit-mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, var(--dechire-bas) bottom / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--dechire-h) + 2px) no-repeat;
  mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, var(--dechire-bas) bottom / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--dechire-h) + 2px) no-repeat;
}
.footer {
  -webkit-mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
  mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
  padding-top: calc(clamp(3rem, 2rem + 3vw, 4.5rem) + var(--dechire-h));
}
.section--creme { background: var(--grain), var(--fond-2); }
.section--jaune { background: var(--grain), var(--jaune); color: var(--nuit-950); --focus: var(--nuit-950); }
.section--jaune .bloc__head p, .section--jaune .lead, .section--jaune .split__txt p, .section--jaune p { color: var(--nuit-900); }
.section--jaune .sticker, .section--jaune .pastille { background: var(--rose-600); color: #fff; }
.primaire-band { background: var(--grain), var(--nuit-900); }

/* Accueil : le titre se referme sur le logo blanc (« EN » à côté de « CHALON ») */
.hero__titre { display: grid; font-size: clamp(3.8rem, 1.2rem + 10vw, 9.25rem); }
.hero__anim, .hero__logo { grid-area: 1 / 1; align-self: start; }
.hero__fixe { font-size: 1em; }
.hero__mots { font-size: .53em; }
.hero__logo { width: min(100%, 4.62em); margin-top: .04em; }
.hero__anim { visibility: hidden; }
.hero__titre.is-anim .hero__anim, .hero__titre.is-edition .hero__anim { visibility: visible; }
.hero__titre.is-anim .hero__logo { opacity: 0; }
.hero__titre.is-edition .hero__logo { display: none; }
.hero__titre.is-logo .hero__anim { opacity: 0; transition: opacity .25s ease; }
.hero__titre.is-logo .hero__logo { opacity: 1; }
.hero__logo path { transform-box: fill-box; }
.hero__titre.is-logo .logo__chalon { animation: logo-fondu .3s ease both; }
.hero__titre.is-logo .logo__en { transform-origin: 0 100%; animation: logo-en .65s var(--ease-spring) .18s both; }
.hero__titre.is-logo .logo__commun { animation: logo-commun .55s var(--ease-out) .06s both; }
@keyframes logo-fondu { from { opacity: 0; } }
@keyframes logo-en { from { opacity: 0; transform: scale(.55) rotate(-10deg); } }
@keyframes logo-commun { from { opacity: 0; transform: translateY(45%); } }
.hero__mot.is-final::after { content: none; }

/* Chiffres animés sous le grand titre : sans filets, sur le papier */
.chiffres { background: var(--fond); border-bottom: 0; padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem) clamp(1rem, .5rem + 1vw, 1.5rem); }
.chiffres__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.75rem clamp(1rem, 2.5vw, 2.5rem); }
.chiffre, .chiffre:first-child, .chiffre:nth-child(3) { border-left: 0; padding: 0; }
.chiffre__n { font-size: clamp(2.6rem, 1.6rem + 2.8vw, 4.4rem); line-height: .9; }
.chiffre:nth-child(3) .chiffre__n { color: var(--nuit-900); }
.chiffre:nth-child(5) .chiffre__n { color: var(--turq-800); }
.chiffre__l { font-size: .9375rem; line-height: 1.4; max-width: 18ch; }

/* Énoncés : resserrés, côte à côte, sans traits */
.enonces { border-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.enonce { display: block; padding: 0; border: 0; }
.enonce__mot { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.75rem); margin-bottom: .7rem; }
.enonce__corps { gap: .6rem; }
.enonce__fleche { width: 22px; height: 22px; margin-top: .15em; }
.enonce__texte { font-size: 1.0625rem; }

/* Le récap du conseil : une bande framboise plus basse, avant le pied de page */
.newsletter {
  background: var(--grain), var(--rose-600);
  padding-block: calc(clamp(1.75rem, 1.25rem + 2vw, 2.75rem) + var(--dechire-h));
}
.newsletter::before { content: none; }
.newsletter__titre { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
.newsletter__titre em { background: var(--nuit-950); color: #fff; opacity: 1; }
.newsletter__texte { margin-top: .75rem; }
.newsletter .btn--primary { --b-bg: var(--nuit-950); }
.newsletter .btn--primary:hover { --b-bg: #000; }

/* Carte : grandes rues, leurs noms, et deux monuments dessinés */
.quartiers__routes, .quartiers__ruelles { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.quartiers__routes { stroke-width: 4.5; }
.quartiers__ruelles { stroke-width: 2; opacity: .75; }
.quartiers__rue {
  font-family: var(--f-display); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  fill: var(--nuit-700); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none;
}
.quartiers__monument { pointer-events: none; }
.quartiers__monument .monument__corps { fill: var(--nuit-900); stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; paint-order: stroke; }
.quartiers__monument .monument__jour { fill: #fff; stroke: #fff; }
@media (max-width: 600px) { .quartiers__rue { display: none; } }
/* Citations et accroches : Montserrat droite, comme sur les documents de campagne (pas d'italique) */
.ps-card__mot, .citation p, .agenda-mois__titre span, .sg__mot .prose, .h2 em, .h3 em { font-style: normal; }
.citation p, .sg__mot .prose { font-weight: 600; }
.agenda-mois__titre span { font-weight: 800; }
@media (max-width: 600px) {
  .chiffres__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .chiffre:first-child { grid-column: 1 / -1; }
}
.cta-band .h3 { text-transform: uppercase; font-weight: 900; letter-spacing: -.02em; }

/* 16. Retouches -------------------------------------------------------------------- */
/* Menu : blanc translucide et flouté quand on descend dans la page (comme le site PS71) */
.header { background: rgba(255, 255, 255, .94); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.header.is-scrolled:not(.menu-ouvert) { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header.is-scrolled:not(.menu-ouvert) { background: rgba(255, 255, 255, .96); } }

/* Récap du conseil : le pied de page aubergine se déchire directement dans la framboise */
.newsletter {
  -webkit-mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
  mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
}
.newsletter + .footer, .footer { z-index: 1; }
.newsletter + .footer { margin-top: calc(-1 * var(--dechire-h)); }
/* Champ e-mail carré, séparé du bouton */
.newsletter .field__row { background: transparent; padding: 0; border-radius: 0; gap: .5rem; }
.newsletter .field__row input { background: #fff; border-radius: 4px; padding-inline: 1rem; min-height: 52px; }
.newsletter .field__row:focus-within { box-shadow: none; }
.newsletter .field__row input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.newsletter .field__row .btn { border-radius: 4px; min-height: 52px; }
@media (max-width: 760px) { .newsletter .field__row { border-radius: 0; } }

/* Chiffres : aubergine, le pourcentage en framboise ; un filet très léger avant « Une ambition claire » */
.chiffre .chiffre__n, .chiffre:nth-child(n) .chiffre__n { color: var(--nuit-900); }
.chiffre__n:has(.chiffre__s) { color: var(--rose-600) !important; }
.chiffres .container { padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); border-bottom: 1px solid rgba(30, 16, 51, .1); }
.chiffres { padding-bottom: 0; }
@media (max-width: 600px) { .chiffre:first-child { grid-column: auto; } }

/* Pied de page : de l'air entre les réseaux et le filet du bas */
.footer__bottom { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* En-têtes de page : plus compacts, boutons à droite */
.page-hero { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem) calc(clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem) + var(--dechire-h)); }
.page-hero .ariane { margin-bottom: 1.1rem; }
.page-hero__titre { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); max-width: 20ch; }
.page-hero .lead { margin-top: 1rem; max-width: 44rem; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); }
.page-hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; }
.page-hero__actions .page-hero__btns { margin-top: 0; justify-content: flex-end; }
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__actions .page-hero__btns { justify-content: flex-start; }
}

/* Bulle d'appel : moins d'espace autour */
.bloc-c--serre > .bloc:has(.cta-band) { padding-block: 0 clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* Carte plus grande, noms de rues du centre, lieux repères */
@media (min-width: 961px) { .quartiers { grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); } }
.quartiers__rue--petit { font-size: 12.5px; letter-spacing: .03em; fill: var(--nuit-900); }
.quartiers__lieu {
  font-family: var(--f-display); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  fill: var(--nuit-900); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
}
.quartiers__monument .monument__pelouse { fill: #3FBF8C; }
.quartiers__monument .monument__drapeau { fill: var(--rose-600); stroke: #fff; stroke-width: 1.2; }
.quartiers__monument .monument__drapeau { stroke-linejoin: round; }
@media (max-width: 600px) { .quartiers__lieu { display: none; } }

/* 17. Menu flottant, bulles transparentes, enquête, carte qui se dessine --------------- */
/* Menu : transparent sur l'affiche du haut de page, blanc dès qu'on descend */
.header--flotte { margin-bottom: calc(-1 * var(--header-h)); }
.header--flotte:not(.is-scrolled):not(.menu-ouvert) { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header--flotte + main > .hero:first-child { padding-top: calc(clamp(4.5rem, 3rem + 8vw, 9rem) + var(--header-h)); }
.header--flotte + main > .page-hero:first-child { padding-top: calc(clamp(1.75rem, 1.25rem + 2vw, 3rem) + var(--header-h)); }
.header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .header__logo .logo path { fill: #fff; }
.header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) :is(.nav__link, .nav__chevron, .burger, .nav__cta .btn--ghost) { color: #fff; }
.header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .nav__cta .btn--ghost .i { color: #fff; }
.header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .burger { border-color: rgba(255, 255, 255, .45); background: transparent; }
.header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .nav__link[aria-current="page"], .header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .nav__link.is-current { color: #fff; }
.header__logo .logo path, .nav__link, .nav__chevron { transition: fill .3s, color .3s; }
@media (max-width: 1260px) {
  /* Menu ouvert sur téléphone : textes sombres sur fond clair */
  .header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) .nav :is(.nav__link, .nav__chevron, .nav__cta .btn--ghost) { color: var(--ink); }
}

/* Intranet : un simple lien, sans bulle (comme « Faire un don » sur le site PS71) */
.nav__cta .btn--ghost { padding-inline: .6rem; --b-bd: transparent; }
.nav__cta .btn--ghost .i { color: var(--rose-600); }
.nav__cta .btn--ghost:hover { --b-bg: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* Bulles transparentes dans les en-têtes de page */
.page-hero .btn--outline { --b-bg: transparent; --b-fg: var(--nuit-950); --b-bd: var(--nuit-950); }
.page-hero .btn--outline:hover { --b-bg: rgba(20, 10, 36, .08); --b-fg: var(--nuit-950); }

/* Bas de page : le récap du conseil se déchire directement dans le dernier bloc coloré */
main > :is(.section--creme, .section--jaune, .primaire-band):last-child {
  -webkit-mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
  mask: var(--dechire) top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
}
main + .newsletter { position: relative; z-index: 1; margin-top: calc(-1 * var(--dechire-h)); }

/* Association : la quatrième carte (« Des outils en commun ») prend toute la largeur */
.cards-3 > .carte-info:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

/* Grande enquête : toute la page en jaune jusqu'au récap du conseil */
.main--jaune { background: var(--grain), var(--jaune); color: var(--nuit-950); --focus: var(--nuit-950); }
.main--jaune .page-hero::after { content: none; }
.main--jaune .page-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.main--jaune .lead, .main--jaune p { color: var(--nuit-900); }
.main--jaune .cta-band { background: var(--nuit-950); color: #fff; }
.main--jaune .cta-band p, .main--jaune .cta-band .h3 { color: #fff; }
.main--jaune .cta-band .btn--dark { --b-bg: var(--jaune); --b-fg: var(--nuit-950); }

/* Gros bouton d'appel */
.geant { display: grid; justify-items: center; text-align: center; gap: 1.25rem; padding-block: clamp(1rem, .5rem + 2vw, 2.5rem); }
.geant__titre { max-width: 22ch; }
.geant__btn {
  position: relative; display: inline-flex; align-items: center; gap: .6em; padding: .9em 1.5em .9em 1.7em; border-radius: 999px;
  background: var(--nuit-950); color: var(--jaune); text-decoration: none;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem); box-shadow: 0 18px 40px -22px rgba(20, 10, 36, .7);
  transition: transform .16s var(--ease-out), background-color .2s ease;
}
.geant__btn::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 3px solid var(--nuit-950); opacity: 0; pointer-events: none;
}
.geant__fleche { width: 1em; height: 1em; flex: none; transition: transform .25s var(--ease-out); }
.geant__btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .geant__btn:hover { background: var(--rose-600); color: #fff; }
  .geant__btn:hover .geant__fleche { transform: translateX(.18em); }
}
.geant__aide { font-size: .9375rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  /* Une onde qui part du bouton toutes les 2,4 s, pour attirer l'œil sans bouger le texte */
  .geant__btn::before { animation: onde 2.4s cubic-bezier(.23, 1, .32, 1) infinite; }
  .geant__fleche { animation: pousse 2.4s cubic-bezier(.23, 1, .32, 1) infinite; }
}
@keyframes onde { 0% { opacity: .55; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes pousse { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(.22em); } }

/* Carte des quartiers : elle se dessine à l'arrivée (quartiers, puis rues et Saône, puis repères) */
@media (prefers-reduced-motion: no-preference) {
  .js .quartiers__carte.reveal { transform: none; transition: opacity .3s ease; }
  .js .quartiers__carte .quartiers__zone { transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), fill .2s ease; transition-delay: calc(var(--i, 0) * 28ms); }
  .js .quartiers__carte:not(.is-in) .quartiers__zone { opacity: 0; transform: scale(.94); }
  .js .quartiers__carte :is(.quartiers__routes, .quartiers__ruelles) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) .35s; }
  .js .quartiers__carte:not(.is-in) :is(.quartiers__routes, .quartiers__ruelles) { stroke-dashoffset: 1; }
  .js .quartiers__carte .quartiers__saone { transition: stroke-dashoffset 1.1s var(--ease-out) .45s; }
  .js .quartiers__carte :is(.quartiers__monument, .quartiers__rue) { transition: opacity .3s var(--ease-out); transition-delay: calc(.95s + var(--i, 0) * 50ms); }
  .js .quartiers__carte:not(.is-in) :is(.quartiers__monument, .quartiers__rue) { opacity: 0; }
}
/* Menu flottant : le « en » du logo reste lisible sur turquoise et jaune ; « Adhérer » en blanc sur framboise */
.header--sur-clair:not(.is-scrolled):not(.menu-ouvert) .header__logo .logo__en { fill: var(--nuit-950); }
.header--fond-rose:not(.is-scrolled):not(.menu-ouvert) .nav__cta .btn--primary { --b-bg: #fff; --b-fg: var(--rose-700); }
.header--fond-rose:not(.is-scrolled):not(.menu-ouvert) .nav__cta .btn--ghost .i { color: #fff; }
/* Enquête : la bulle de question garde son mot en couleur */
.main--jaune .cta-band .h3 em { color: var(--jaune); }
.main--jaune .bloc-c:has(.geant) + .bloc-c > .bloc { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* 18. Retouches (20 octobre, suite) ------------------------------------------------- */
/* Chiffres répartis sur toute la largeur */
@media (min-width: 761px) { .chiffres__grid { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* Pastille ronde qui tourne une fois à l'apparition, grand point d'interrogation derrière la photo */
.agir-bloc__visuel--photo { position: relative; overflow: visible; }
.agir-bloc__visuel--photo img { position: relative; z-index: 1; }
.agir-bloc__signe {
  position: absolute; z-index: 0; right: -.12em; top: 50%; translate: 0 -54%; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-weight: 900; line-height: .8; font-size: clamp(16rem, 10rem + 18vw, 30rem); color: var(--rose-600); rotate: 9deg;
}
.section--jaune .agir-bloc__visuel--photo { margin-right: clamp(2rem, 6vw, 6rem); }
.pastille-ronde { position: absolute; z-index: 2; width: clamp(104px, 9vw, 132px); top: -34px; left: -34px; overflow: visible; rotate: -8deg; }
.pastille-ronde__fond { fill: var(--nuit-950); }
.pastille-ronde__tour { fill: var(--jaune); font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: .14em; }
.pastille-ronde__point { fill: var(--rose); }
.pastille-ronde .pastille-ronde__tour { transform-origin: 100px 100px; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-in .pastille-ronde__tour { animation: tourne-pastille 4s cubic-bezier(.23, 1, .32, 1) .2s both; }
  .js .reveal.is-in .pastille-ronde__point { animation: clignote 1.6s ease-in-out 1.2s 3; }
}
@keyframes tourne-pastille { from { transform: rotate(-140deg); } }
@keyframes clignote { 50% { opacity: .25; } }
@media (max-width: 760px) { .agir-bloc__signe { font-size: 14rem; right: -.05em; } .pastille-ronde { top: -24px; left: -14px; } }

/* Menu flottant : logo blanc sur toutes les affiches tant qu'on n'a pas bougé */
.header--flotte:not(.is-scrolled):not(.menu-ouvert) .header__logo .logo path,
.header--sur-clair:not(.is-scrolled):not(.menu-ouvert) .header__logo .logo__en { fill: #fff; }

/* Sous-menu discret : pas de pastille pleine, un simple trait sous la partie en cours */
.subnav { background: rgba(255, 255, 255, .86); }
.subnav a { border-radius: 0; background: none; padding-inline: .9rem; box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease; }
.subnav a:hover { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--line); }
.subnav a.is-active { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--rose-600); }
.subnav a.subnav__encart, .subnav a.subnav__encart:hover { border-radius: 999px; background: var(--turq); color: var(--nuit-950); box-shadow: none; margin-left: .5rem; }

/* Citation du programme : en minuscules, légende sous la phrase */
.projet .citation p { text-transform: none; }
.projet .citation footer { margin-top: 1rem; font-weight: 700; font-size: 1rem; }

/* Pied de page : déchirure inversée, pour qu'elle ne répète pas celle du récap */
.footer, main + .newsletter + .footer {
  -webkit-mask: url("../img/dechire-inverse.svg") top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
  mask: url("../img/dechire-inverse.svg") top / 100% var(--dechire-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dechire-h) + 1px) no-repeat;
}

/* Carte : lacs bien visibles ; « toute la ville » teinte tous les quartiers */
.quartiers__eau { fill: var(--turq); opacity: .55; }
.quartiers__lac { fill: var(--turq); pointer-events: none; }
.quartiers__lieu--lac { fill: #fff; stroke: var(--turq-800); stroke-width: 3.5px; font-size: 13px; }
.quartiers--ville .quartiers__zone { fill: var(--rose-300); }
.quartiers--ville .quartiers__zone:nth-child(2n) { fill: #F59AB7; }

/* Équipe (bureau) : six cartes sur une ligne */
.sg__membres.equipe { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }

/* Page 404 : un grand 404 en filigrane dans l'affiche */
.page-hero.erreur::before {
  content: "404"; position: absolute; z-index: -1; right: -2vw; bottom: -.12em; pointer-events: none;
  font-family: var(--f-display); font-weight: 900; font-size: clamp(9rem, 4rem + 22vw, 24rem); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, .14);
}
.page-hero.erreur .page-hero__sticker { background: var(--jaune); color: var(--nuit-950); }
.projet .citation p { font-weight: 700; letter-spacing: -.01em; line-height: 1.25; font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); }
/* Retouches après vérification */
.pastille-ronde { width: clamp(124px, 11vw, 156px); top: -46px; left: -46px; }
.pastille-ronde__tour { letter-spacing: 0; }
.agir-bloc__signe { right: -.5em; translate: 0 -50%; }
.bloc__head:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
.sg__membres.equipe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.page-hero.erreur { min-height: min(72vh, 680px); align-items: flex-end; }
.page-hero.erreur::before { z-index: 0; color: rgba(255, 255, 255, .05); -webkit-text-stroke: 3px rgba(0, 199, 188, .55); bottom: calc(var(--dechire-h) - .1em); }
.page-hero.erreur > .container { position: relative; z-index: 1; }
.page-hero.erreur::before { top: calc(var(--header-h) + 1.5rem); bottom: auto; }

/* 19. Retouches (actualités, agenda, carte, association) ----------------------------- */
/* Sous-menu de page : il n'apparaît qu'une fois l'en-tête dépassé, juste sous le menu principal */
.subnav {
  position: fixed; top: 68px; left: 0; right: 0; z-index: 45;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .3s var(--ease-out), opacity .2s ease, visibility 0s linear .3s;
}
.subnav.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease-out), opacity .2s ease, visibility 0s; }
html:has(.subnav) { scroll-padding-top: 150px; }
@media (prefers-reduced-motion: reduce) { .subnav { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; } }

/* Pastille « En ligne » : le point clignote doucement, comme un voyant allumé */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-in .pastille-ronde__point { animation: voyant 1.6s ease-in-out infinite; }
}
@keyframes voyant { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* Grande enquête : un « ? » géant, coupé par le haut et le bas du bloc */
.section--jaune { overflow: hidden; }
.agir-bloc__signe { font-size: clamp(30rem, 20rem + 36vw, 62rem); right: -.42em; top: 50%; translate: 0 -50%; line-height: .74; rotate: 8deg; }
@media (max-width: 760px) { .agir-bloc__signe { font-size: 30rem; right: -.35em; } }

/* Intranet : au survol, une bulle transparente plutôt qu'un soulignement */
.nav__cta .btn--ghost:hover { text-decoration: none; --b-bd: currentColor; --b-bg: transparent; }

/* Programme : même espace entre l'introduction, la citation et le chantier 01 */
.projet__intro { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.projet .citation { margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* Bureau : toutes les cartes à la même hauteur */
.sg__membres.equipe { align-items: stretch; }

/* Actualités : recherche, auteur */
.filtres:has(.recherche) { flex-wrap: wrap; row-gap: .75rem; }
.recherche { position: relative; flex: 1 1 100%; max-width: 34rem; order: -1; }
.recherche__icone { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.recherche__champ { width: 100%; min-height: 48px; padding: .6rem 1rem .6rem 2.75rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; color: var(--ink); }
.recherche__champ:focus-visible { outline: 3px solid var(--rose-600); outline-offset: 2px; border-color: transparent; }
.news-card__auteur { color: var(--ink-3); }
.news-card__auteur::before { content: "·"; margin-inline: .4em; }
.article__auteur { color: var(--ink-2); font-weight: 600; }

/* Agenda : abonnement et ajout à son agenda */
.agenda-abo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink-2); }
.agenda-abo > .i { color: var(--rose-600); width: 22px; height: 22px; }
.event__ics { display: inline-flex; align-items: center; gap: .4em; margin-top: .6rem; font-size: .875rem; font-weight: 700; color: var(--rose-600); text-underline-offset: 3px; }
.event__ics .i { width: 1em; height: 1em; }

/* Carte : île Saint-Laurent, quartiers populaires nommés, repères, légende */
.quartiers__ile { fill: #F8CCDA; stroke: var(--rose-600); stroke-width: 2.5; stroke-dasharray: 5 4; pointer-events: none; }
.quartiers__quartier { font-family: var(--f-display); font-size: 17px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; fill: var(--rose-700); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.quartiers__monument .monument__croix { fill: #fff; }
.quartiers__monument .monument__arbre { fill: #2E9E6E; stroke: #fff; stroke-width: 2; paint-order: stroke; }
.quartiers__monument .monument__tronc { fill: var(--nuit-900); }
.quartiers__monument .monument__trait { fill: none; stroke: var(--nuit-900); stroke-width: 3.6; stroke-linecap: round; }
.quartiers__legende { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.quartiers__legende li { display: inline-flex; align-items: center; gap: .4rem; }
.quartiers__legende svg { width: 22px; height: 19px; flex: none; overflow: visible; }

/* Carte : elle se dessine plus doucement */
@media (prefers-reduced-motion: no-preference) {
  .js .quartiers__carte .quartiers__zone { transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1), fill .2s ease; transition-delay: calc(var(--i, 0) * 45ms); }
  .js .quartiers__carte :is(.quartiers__routes, .quartiers__ruelles) { transition: stroke-dashoffset 1.6s cubic-bezier(.23, 1, .32, 1) .6s; }
  .js .quartiers__carte .quartiers__saone { transition: stroke-dashoffset 1.8s cubic-bezier(.23, 1, .32, 1) .7s; }
  .js .quartiers__carte :is(.quartiers__ile, .quartiers__lac) { transition: opacity .6s ease 1.1s; }
  .js .quartiers__carte:not(.is-in) :is(.quartiers__ile, .quartiers__lac) { opacity: 0; }
  .js .quartiers__carte :is(.quartiers__monument, .quartiers__rue) { transition: opacity .5s ease; transition-delay: calc(1.6s + var(--i, 0) * 70ms); }
}
.agir-bloc__signe { right: -.16em; }
@media (max-width: 760px) { .agir-bloc__signe { right: -.2em; } }
.agir-bloc__signe { font-size: clamp(30rem, 18rem + 56vw, 86rem); right: -.2em; }
@media (max-width: 760px) { .agir-bloc__signe { font-size: 34rem; } .pastille-ronde { left: -4px; top: -30px; width: 108px; } }
.agir-bloc__signe { font-size: clamp(30rem, 16rem + 46vw, 70rem); right: -.34em; }
/* Agenda : l'abonnement en bas, après les événements passés */
.agenda-page .agenda-abo { margin: 2rem 0 0; }
/* Accueil : grain léger sur la photo */
.hero__voile::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .8; pointer-events: none; }

/* 20. Carte des quartiers : variante « Plan » (eau en surface, île Saint-Laurent, toutes les rues) ---- */
.quartiers__svg { overflow: hidden; }
.quartiers__zone { fill: #FBE3EB; stroke: #fff; stroke-width: 2.5; }
.quartiers__zone:nth-child(3n+1) { fill: #FBE3EB; }
.quartiers__zone:nth-child(3n+2) { fill: #DDF3F0; }
.quartiers__zone:nth-child(3n) { fill: #EEE7F3; }
.quartiers__zone--activite, .quartiers__zone--activite:nth-child(n) { fill: #EDEAE4; }
.quartiers__ile, .quartiers__ile:nth-child(n) { fill: #FBE3EB; stroke: #3FBFB5; stroke-width: 1.5; stroke-dasharray: none; pointer-events: auto; }
.quartiers__zone:hover, .quartiers__zone.is-survol { fill: var(--rose-300); }
.quartiers__zone.is-choisi { fill: var(--rose); }
.quartiers--ville .quartiers__zone, .quartiers--ville .quartiers__zone:nth-child(n) { fill: #F7B6CB; }
.quartiers__ruelles { stroke: #fff; stroke-width: 1.6; opacity: .9; }
.quartiers__routes { stroke: #fff; stroke-width: 5; }
.quartiers__routes-bord { fill: none; stroke: rgba(30, 16, 51, .12); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.quartiers__eaux { pointer-events: none; }
.quartiers__riviere, .quartiers__lac { fill: #7FDCD5; opacity: 1; }
.quartiers__rive { fill: none; stroke: #3FBFB5; stroke-width: 1.5; }
.quartiers__monument .monument__corps { stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js .quartiers__carte .quartiers__eaux { transition: opacity .8s ease .5s; }
  .js .quartiers__carte:not(.is-in) .quartiers__eaux { opacity: 0; }
  .js .quartiers__carte .quartiers__routes-bord { transition: opacity .6s ease 1.2s; }
  .js .quartiers__carte:not(.is-in) .quartiers__routes-bord { opacity: 0; }
}

/* 21. Relecture des animations ---------------------------------------------------------- */
/* Menu : il ne change plus de hauteur au défilement (pas d'animation de mise en page) ; le logo se réduit par transform */
.header__in, .header.is-scrolled .header__in { height: var(--header-h); transition: none; }
.header__logo .logo, .header.is-scrolled .header__logo .logo { width: 150px; transition: transform .25s cubic-bezier(.23, 1, .32, 1); transform-origin: 0 50%; }
.header.is-scrolled .header__logo .logo { transform: scale(.86); }
.subnav { top: var(--header-h); }
/* Apparitions au défilement : plus courtes et plus discrètes (elles reviennent sur chaque page) */
.js .reveal { transform: translateY(16px); transition: opacity .5s cubic-bezier(.23, 1, .32, 1), transform .55s cubic-bezier(.23, 1, .32, 1); transition-delay: var(--d, 0s); }
/* Écrans tactiles : aucun mouvement au survol (le toucher déclenche de faux survols) */
@media (hover: none) {
  .btn:hover, .btn:hover .i, .btn--ghost:hover .i, .link-arrow:hover .i, .drop__encart:hover .drop__go, .engage-card:hover, .engage-card:hover .engage-card__go,
  .news-card:hover, .news-card:hover .news-card__media img, .news-card:hover .vignette, .news-card:hover .news-card__more .i, .event:hover, .elu-une:hover .elu-une__photo img,
  .elu-card:hover, .membre:hover, .social:hover, .elu:hover, .elu:hover .elu__photo img { transform: none; }
}
/* Boucles : elles s'arrêtent d'elles-mêmes en moins de 5 secondes (RGAA 13.8) */
@media (prefers-reduced-motion: no-preference) {
  .geant__btn::before { animation-iteration-count: 2; }
  .geant__fleche { animation-iteration-count: 2; }
  .js .reveal.is-in .pastille-ronde__point { animation-iteration-count: 3; }
}

/* 22. Crash-test : données longues, écrans de 320 px, listes vides ou très longues --------- */
/* 1. Agenda : le texte d'un événement reste dans sa carte */
.event { grid-template-columns: 78px minmax(0, 1fr); }
@media (max-width: 760px) { .event { grid-template-columns: 64px minmax(0, 1fr); } }
.event__body { min-width: 0; }
.event__titre, .event__infos, .event__desc, .event__meta { overflow-wrap: anywhere; }
.event__infos span { min-width: 0; }
/* 2. Pied de page : colonnes qui rétrécissent, adresses longues coupées proprement */
.footer__top, .footer__nav { min-width: 0; }
.footer__top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); }
.footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__nav a, .footer__brand address, .footer__texte { overflow-wrap: anywhere; }
@media (max-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 3. Carte et formulaire : colonnes qui rétrécissent, liste déroulante à la largeur du champ */
.quartiers > * { min-width: 0; }
.quartiers__form select, .form select { width: 100%; max-width: 100%; }
/* 4. Boutons : jamais plus larges que l'écran, le texte passe à la ligne si besoin */
.btn { max-width: 100%; white-space: normal; text-align: center; }
/* 5. Étiquettes de thème longues : elles passent à la ligne au lieu d'être coupées */
.tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.news-card__meta { flex-wrap: wrap; row-gap: .35rem; }
/* 8. Bureau sur téléphone : deux colonnes */
@media (max-width: 600px) { .sg__membres.equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg__nom { overflow-wrap: anywhere; }
/* 10. Agenda : les mois suivants attendent un clic */
.agenda-page:not(.is-tout) .agenda-mois--plus { display: none; }
/* Contact : colonnes qui rétrécissent, coordonnées longues coupées proprement */
.contact > *, .coord > div, .form__row > * { min-width: 0; }
.coord p, .coord a, .coord span { overflow-wrap: anywhere; }
/* Carte : survol et choix toujours visibles, y compris sur l'île et les zones d'activités, et en mode « toute la ville » */
@media (hover: hover) and (pointer: fine) {
  .quartiers__svg .quartiers__zone.quartiers__zone:hover { fill: var(--rose-300); }
}
.quartiers__svg .quartiers__zone.quartiers__zone.is-survol { fill: var(--rose-300); }
.quartiers__svg .quartiers__zone.quartiers__zone.is-choisi { fill: var(--rose); }
.quartiers__zone { cursor: pointer; }
.quartiers__nom.is-suit { translate: -50% calc(-100% - 14px); transition: none; }
/* Carte : le délai d'apparition ne touche que l'entrée (opacité, échelle) ; la couleur au survol et au clic répond tout de suite */
@media (prefers-reduced-motion: no-preference) {
  .js .quartiers__carte .quartiers__zone {
    transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1), fill .12s ease;
    transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s;
  }
}
/* Accessibilité : texte d'introduction en blanc plein sur les en-têtes framboise (contraste 5,6:1) */
.page-hero--rose { --ph-doux: #fff; }
.agenda-passes__titre { display: inline; font: inherit; letter-spacing: inherit; text-transform: none; }

/* 23. Lisibilité sur téléphone ---------------------------------------------- */
/* Programme : la colonne ne doit jamais dépasser l'écran */
@media (max-width: 1080px) { .projet { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  /* Titres : seuls les mots trop longs pour l'écran (« intergénérationnelle ») se coupent, avec un tiret */
  :is(h1, h2, h3, .h2, .page-hero__titre) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
  .article__titre { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.2rem); line-height: 1.08; }
  .article .prose { font-size: 1.0625rem; }
  .article .prose--accroche > p:first-child { font-size: 1.1875rem; }
  /* Fil d'Ariane : le titre de la page courante tient sur une ligne */
  .ariane li:last-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Boutons groupés : pleine largeur et de même taille, comme dans l'accueil */
  .btns > .btn { flex: 1 1 100%; }
  /* Cartes « Rejoindre » : la flèche suffit, le pictogramme laisse la place au texte */
  .engage-card { grid-template-columns: minmax(0, 1fr) auto; padding: 1.1rem 1.2rem; }
  .engage-card__icon { display: none; }
  /* Pied de page : la flèche des liens externes suit le texte */
  .footer__nav a { display: block; padding-block: .4rem; min-height: 0; line-height: 1.35; }
  .footer__nav a .i { display: inline; vertical-align: -.1em; margin-left: .3em; }
  /* Coprésidence : cartes de même hauteur */
  .sg__membres { align-items: stretch; }
}
@media (max-width: 560px) {
  /* Élu·es : nom et fonction à côté de la photo, délégations et contacts sur toute la largeur */
  .elu:not(.elu--tete) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; row-gap: 0; }
  .elu:not(.elu--tete) .elu__corps { display: contents; }
  .elu:not(.elu--tete) .elu__photo { grid-row: 1 / span 2; }
  .elu:not(.elu--tete) .elu__nom { align-self: end; }
  .elu:not(.elu--tete) .elu__mandat { align-self: start; }
  .elu:not(.elu--tete) .elu__corps > :not(.elu__nom, .elu__mandat) { grid-column: 1 / -1; }
}
/* Focus clavier visible sur les en-têtes sombres (photo de l'accueil, en-tête transparent) */
.hero, .header--sur-sombre:not(.is-scrolled):not(.menu-ouvert) { --focus: #fff; }
/* Liens légaux du pied de page : zone de toucher de 44 px sur téléphone */
@media (max-width: 760px) { .footer__bottom a { display: inline-block; padding-block: .75rem; } .footer__bottom ul { row-gap: 0; } }