/* ==========================================================================
   Lieusaint — proposition de refonte 2026
   Feuille de style unique (vanilla, aucune dépendance)
   PALETTE : charte officielle Lieusaint — navy #1B2A5E + turquoise #1FAE9C
   sur blanc, pour une identité claire et professionnelle.
   ========================================================================== */

:root {
  /* === IDENTITÉ : couleurs charte officielle (logo) === */
  --ink:       #1B2A5E;   /* Navy officiel — texte principal, boutons primary */
  --ink-2:     #0F1B45;   /* Navy + foncé pour profondeur */
  --ink-soft:  #2A3A6B;
  --teal:      #1FAE9C;   /* Turquoise officiel — accents IDENTITAIRES (logo, surlignages) */
  --teal-dark: #178A7C;

  /* === SUPPORTS : blancs et bleus très clairs === */
  --paper:     #FFFFFF;   /* Blanc pur — fond principal */
  --cream:     #F5F9FB;   /* Bleu très clair pour cards / sections alternées */
  --mist:      #E8F7F3;   /* Turquoise pastel pour fonds doux */
  --line:      #E2E8F0;   /* Lignes / bordures — gris bleuté clair */

  /* === ACCENTS (alias turquoise pour rétro-compat) === */
  --terra:     #1FAE9C;   /* alias turquoise (rétro-compat) */
  --terra-soft:#C2EAE0;   /* turquoise pastel */
  --terra-dark:#178A7C;   /* turquoise foncé pour hover */

  /* === DÉGRADÉ TURQUOISE === */
  --leaf-50:   #E8F7F3;
  --leaf-100:  #C2EAE0;
  --leaf-200:  #8FD9C7;
  --leaf-300:  #5CC7AE;
  --leaf-400:  #2EB89A;
  --leaf-500:  #1FAE9C;
  --honey:     #C2EAE0;   /* Highlight turquoise pastel */

  --muted:     #6B7280;   /* Texte secondaire gris bleuté */
  --danger:    #9c1a1a;

  /* Taille de référence pour les icônes inline (remplacement des emojis) */
  --icon-size: 1.1em;

  /* Layout */
  --radius:    18px;
  --radius-sm: 10px;
  --shadow:    0 6px 24px -12px rgba(0,15,57,.25);
  --shadow-lg: 0 24px 60px -30px rgba(0,15,57,.35);
  --wrap:      1240px;
  --narrow:    780px;
  --gap:       clamp(16px, 2.5vw, 28px);

  --font-sans: "Inter", "Brandon Grotesque", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Empêche le scroll horizontal causé par les éléments fixed hors-écran
     (mobile-nav drawer en translateX(100%)). overflow-x:clip est préféré
     à hidden car il ne crée pas de contexte de défilement (préserve
     position:sticky). Fallback hidden pour anciens navigateurs. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--leaf-300); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.wrap.narrow { max-width: var(--narrow); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .8em 1.25em;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
  border: 1.5px solid transparent;
  line-height: 1;
}
.btn.small { padding: .55em 1em; font-size: .9rem; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-ghost.small { padding: .55em 1em; font-size: .9rem; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-light { background: var(--leaf-200); color: var(--ink); }
.btn-light:hover { background: var(--leaf-300); }

.tag, .card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--leaf-100);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--leaf-200);
  color: var(--ink);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.badge.dark { background: var(--ink); color: var(--leaf-200); }

.link { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--leaf-200); padding-bottom: 2px; display: inline-block; }
.link:hover { border-color: var(--ink); }
.link-more { color: var(--ink); font-weight: 600; font-size: .95rem; opacity: .85; }
.link-more:hover { opacity: 1; }

.eyebrow { font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 0 8px; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }
.lead.light { color: rgba(255,255,255,.8); }

.section-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.015em; margin-bottom: .5em; }
.section-title.light { color: #fff; }
.section-lead { color: var(--muted); max-width: 70ch; margin-bottom: 2rem; }

.bullets { margin: 20px 0; }
.bullets li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px; border-radius: 4px; background: var(--leaf-200);
}
.bullets.sm li { font-size: .92rem; margin-bottom: 6px; }
.bullets.sm li::before { top: 7px; width: 10px; height: 10px; }

.muted { color: var(--muted); }
.mt { margin-top: 2rem; }
.hero-note { color: var(--muted); font-size: .9rem; margin-top: 12px; }

/* ---------- TOP (header injecté JS) ---------- */
.top { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.top-grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand svg { color: var(--ink); }
.brand .brand-logo {
  width: 44px;
  height: 52px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  justify-content: center;
}
.brand-text strong {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.2rem;
  color: var(--ink);
}
.brand-text small {
  color: var(--muted);
  font-size: .75rem;
  margin-top: 2px;
}

.search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--muted);
  font-size: .92rem;
  min-width: 260px;
  transition: border-color .2s, background .2s, color .2s;
  cursor: pointer;
  justify-self: start;
  max-width: 420px;
  width: 100%;
}
.search-trigger:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.search-trigger kbd {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: .78rem; margin-left: auto;
  font-family: inherit; color: var(--muted);
}

/* Bouton mode sombre dans le header */
.btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  font-size: 1.05rem;
  padding: 0;
}
.btn-theme:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); }
.btn-theme:focus-visible { outline: 2px solid var(--leaf-400); outline-offset: 2px; }
html.a11y-dark .btn-theme { background: var(--cream); border-color: var(--line); color: var(--ink); }
html.a11y-dark .btn-theme:hover { background: var(--paper); border-color: var(--ink); }

.top-actions { display: flex; gap: 10px; }

.burger { display: none; width: 40px; height: 40px; border-radius: 10px; background: var(--cream); position: relative; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }

.mainnav { border-top: 1px solid var(--line); background: #fff; }
.mainnav ul { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.mainnav ul::-webkit-scrollbar { display: none; }
.mainnav a {
  display: inline-block;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.mainnav a:hover { border-color: var(--leaf-300); }
.mainnav a.current { border-color: var(--ink); color: var(--ink); }

/* ---------- Mobile nav drawer ---------- */
.mobile-nav {
  position: fixed;
  top: 68px;
  bottom: 0;
  right: 0;
  width: min(85vw, 360px);
  z-index: 40;
  background: #fff;
  padding: 20px 0;
  /* Off-screen via visibility + transform : pas d'extension du viewport */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .25s ease, visibility 0s linear .25s;
  border-top: 1px solid var(--line);
  overflow-y: auto;
}
.mobile-nav.open {
  visibility: visible;
  transform: translateX(0);
  transition: transform .25s ease, visibility 0s linear 0s;
}
.mobile-nav ul { padding: 0 var(--gap); }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 18px 4px; font-weight: 600; font-size: 1.05rem; }

/* ---------- Search modal ---------- */
.search-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,15,57,.55);
  backdrop-filter: blur(6px);
  padding: 10vh 20px;
  display: none;
}
.search-modal.open { display: flex; justify-content: center; align-items: flex-start; }
.search-modal-inner {
  width: 100%; max-width: 640px;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.search-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.search-modal-head input {
  flex: 1; border: 0; font-size: 1.1rem; outline: none; background: transparent;
}
.search-modal-head button[data-close] {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: .8rem; color: var(--muted);
}
.search-modal-results {
  flex: 1; overflow-y: auto; padding: 8px;
}
.search-modal-results .hint { color: var(--muted); padding: 30px; text-align: center; font-size: .95rem; }
.search-modal-results .hint-cta {
  display: inline-block; margin-top: 10px; padding: 8px 14px;
  border-radius: 999px; background: var(--leaf-200); color: var(--ink); font-weight: 600;
}
.search-modal-results .res {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .15s;
}
.search-modal-results .res:hover { background: var(--cream); }
.search-modal-results .res-cat {
  font-size: .7rem; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; color: var(--muted);
}
.search-modal-results .res-title { font-weight: 600; }
.search-modal-results .res-arrow { color: var(--muted); }
.search-modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--muted);
}

/* ---------- Hero (home) — fond chaud, sortir du blanc clinique ---------- */
.hero {
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--terra-soft) 0, transparent 55%),
    radial-gradient(800px 400px at -10% 110%, var(--mist) 0, transparent 60%),
    var(--paper);
  padding: clamp(48px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.hero h1 span {
  display: inline-block;
  /* Surlignage : passe d'un dégradé turquoise (clinique) à terra cuite (chaleureux) */
  background: linear-gradient(120deg, var(--terra-soft), var(--terra));
  color: var(--ink);
  padding: 0 10px; border-radius: 12px; color: var(--ink);
}
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 16px; }

.quick {
  background: var(--ink); color: #fff;
  padding: 28px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.quick h2 { font-size: 1.05rem; color: var(--terra-soft); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .08em; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-grid a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s, transform .15s;
}
.quick-grid a:hover { background: rgba(31,174,156,.18); transform: translateY(-1px); }
.quick-grid span { font-size: 1.2rem; }

/* Bandeau alerte : terra cuite pastel (chaleur) au lieu de turquoise pastel (clinique) */
.alert-banner {
  background: var(--terra-soft); color: var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.alert-banner .wrap { display: flex; align-items: center; gap: 10px; padding: 14px var(--gap); flex-wrap: wrap; }
.alert-banner a { margin-left: auto; font-weight: 700; border-bottom: 2px solid var(--ink); }
.alert-pin { font-size: 1.1rem; }

/* ---------- Page hero (pages internes) — fond papier chaud ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--cream), var(--paper));
  padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.page-hero.tight { padding: 20px 0 16px; }
.page-hero.dark {
  background: linear-gradient(160deg, var(--ink) 0%, #021540 100%);
  color: #fff;
}
.page-hero.dark .badge { background: var(--leaf-200); }
.page-hero.dark h1.light { color: #fff; }
.page-hero.dark .lead.light { color: rgba(255,255,255,.85); }
.crumbs { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.crumbs.light { color: rgba(255,255,255,.7); }
.crumbs a { color: inherit; border-bottom: 1px solid currentColor; }
.crumbs span { margin: 0 6px; opacity: .6; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- Personas ---------- */
.personas { padding: 72px 0 32px; }
.persona-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 24px; }
.persona-grid a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.persona-grid a:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.persona-grid b { font-size: 1.05rem; }
.persona-grid span { color: var(--muted); font-size: .85rem; }

/* ---------- Split (actus + agenda) ---------- */
.split { padding: 48px 0 80px; }
.split-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.split-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.card > a { display: contents; color: inherit; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-media {
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  position: relative; display: flex; align-items: flex-end; padding: 14px;
}
.card-media .card-tag { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.92); }
.card-body { padding: 20px 22px 22px; }
.card-body time { color: var(--muted); font-size: .85rem; font-weight: 500; }
.card-body h3 { margin: 8px 0; font-size: 1.1rem; line-height: 1.3; }
.card-feature .card-media { aspect-ratio: 21/9; }
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.card-row.three { grid-template-columns: repeat(3, 1fr); }

.events li {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.events li:last-child { border: 0; }
.events time {
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.events time b { font-size: 1.5rem; font-weight: 800; }
.events time span { font-size: .7rem; letter-spacing: .08em; margin-top: 4px; color: var(--leaf-200); }
.events h3 { font-size: 1rem; margin: 0 0 4px; }
.events p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---------- Services (home) ---------- */
.services { background: var(--cream); padding: 72px 0; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.services-grid a {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  display: block;
}
.services-grid a:hover { border-color: var(--leaf-400); box-shadow: var(--shadow); transform: translateY(-2px); }
.services-grid h3 { font-size: 1.05rem; margin-bottom: 8px; }
.services-grid p { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- Participation bloc home ---------- */
.part {
  background:
    radial-gradient(600px 300px at 120% 20%, rgba(181,228,140,.18) 0, transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #021540 100%);
  color: #fff; padding: 80px 0;
}
.part-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.part-stats { display: grid; grid-template-columns: 1fr; gap: 16px; }
.part-stats > div {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px 24px;
}
.part-stats b { font-size: 2.5rem; font-weight: 800; color: var(--leaf-200); display: block; line-height: 1; }
.part-stats span { color: rgba(255,255,255,.75); font-size: .95rem; }

/* ---------- Map teaser (home) ---------- */
.map-teaser { padding: 72px 0; }
.map-fake {
  display: flex; align-items: center; justify-content: center;
  height: 360px;
  background: linear-gradient(135deg, var(--leaf-100), var(--leaf-200));
  border-radius: var(--radius);
  color: var(--ink); font-weight: 600; font-size: 1.1rem;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.map-fake::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 200px at 20% 30%, rgba(0,15,57,.18), transparent 70%),
    radial-gradient(500px 250px at 80% 70%, rgba(0,15,57,.15), transparent 70%);
  pointer-events: none;
}

/* ---------- Chatbot bloc home ---------- */
.bot { background: var(--cream); padding: 80px 0; }
.bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bot h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 12px; }
.bot-demo {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.msg {
  padding: 12px 16px; border-radius: 16px; max-width: 85%;
  font-size: .95rem; line-height: 1.45;
}
.msg.user { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.bot { background: var(--mist); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.bot a { font-weight: 700; text-decoration: underline; }
.msg.typing { display: inline-flex; gap: 4px; padding: 14px 18px; }
.msg.typing span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft);
  animation: bounce 1.2s infinite ease-in-out;
}
.msg.typing span:nth-child(2) { animation-delay: .15s; }
.msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%,80%,100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-6px); opacity: 1; }
}
.bot-source { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.bot-source a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--leaf-300); }
.bot-feedback { display: flex; gap: 6px; margin-top: 8px; }
.bot-feedback button {
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 8px; font-size: .9rem; cursor: pointer;
}
.bot-feedback button:hover { background: var(--leaf-50); }
.bot-feedback span { color: var(--muted); font-size: .85rem; font-style: italic; }

/* ---------- Directory (home) ---------- */
.dir { padding: 72px 0; }
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.dir-grid a {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .2s, border-color .2s;
}
.dir-grid a:hover { border-color: var(--ink); transform: translateY(-2px); }
.dir-grid b { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.dir-grid span { color: var(--muted); font-size: .92rem; }

/* ---------- Alerts subscribe ---------- */
.alerts { background: linear-gradient(160deg, var(--leaf-50), #fff); padding: 72px 0; }
.alerts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sub {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow);
}
.sub label span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.sub input, .sub select, .sub textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff;
}
.sub input:focus, .sub select:focus, .sub textarea:focus { outline: none; border-color: var(--ink); }
.sub label.inline { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; }
.sub label.inline input { width: auto; }
.sub button { align-self: flex-start; }
.sub .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-ok {
  background: var(--leaf-100); color: var(--ink);
  padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--leaf-400); font-weight: 600;
}

/* ---------- Eco (home) ---------- */
.eco { padding: 72px 0; background: var(--paper); border-top: 1px solid var(--line); }
.eco-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.eco h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 12px; }
.eco-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; }
.eco-stats > div {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.eco-stats dt { color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.eco-stats dd { font-size: 2rem; font-weight: 800; color: var(--ink); margin: 0; line-height: 1; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: #fff; padding-top: 56px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.foot h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leaf-200); margin-bottom: 16px; }
.foot ul li { margin-bottom: 8px; }
.foot a { color: rgba(255,255,255,.85); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-brand p { color: rgba(255,255,255,.75); font-size: .92rem; }
.foot-brand strong { color: #fff; }
.foot-brand .hours { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }

/* Logo du footer — alignement horizontal palme + nom ville */
.foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-decoration: none;
  color: #fff;
}
.foot-logo:hover { text-decoration: none; }
.foot-logo img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.foot-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  justify-content: center;
}
.foot-logo-text strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.foot-logo-text small {
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.social { margin-top: 16px; display: flex; gap: 10px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.social a:hover {
  background: var(--teal);
  color: var(--ink);
  transform: translateY(-2px);
}
.social a i { display: block; }

/* A11y FAB — l'icône FA prend toute la place du bouton rond */
.a11y-fab > button i.fa-universal-access { font-size: 1.4rem; }
.a11y-panel button i {
  width: 18px;
  display: inline-block;
  margin-right: 6px;
  opacity: .7;
}

.foot-legal { background: #000a29; padding: 14px 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.foot-legal a { margin: 0 4px; }
.eco-badge { margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 8px; }
.eco-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf-300); }

/* ---------- List sections (actus/agenda) ---------- */
.list-section { padding: 40px 0 80px; }
.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.sort select { padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; }
.view-toggle { display: inline-flex; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.view-toggle button {
  padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted);
}
.view-toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips.vertical { flex-direction: column; align-items: flex-start; }
.chip {
  padding: 8px 14px; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--line);
  font-weight: 600; font-size: .88rem; color: var(--ink);
  transition: all .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-reset { padding: 8px 14px; color: var(--muted); font-weight: 600; font-size: .88rem; text-decoration: underline; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pager { text-align: center; margin-top: 40px; }

/* Agenda large cards */
.events-big { display: flex; flex-direction: column; gap: 16px; }
.event-card {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  transition: transform .2s, box-shadow .2s;
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-card time {
  background: var(--ink); color: #fff; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 0; line-height: 1;
}
.event-card time b { font-size: 2rem; font-weight: 800; }
.event-card time span { font-size: .78rem; color: var(--leaf-200); letter-spacing: .08em; margin-top: 6px; }
.event-card time em { font-size: .72rem; color: rgba(255,255,255,.6); font-style: normal; margin-top: 4px; }
.event-card h3 { font-size: 1.2rem; margin: 8px 0; }
.event-meta { color: var(--muted); font-size: .92rem; margin-bottom: 6px; }
.event-actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- Démarches ---------- */
.dm-pillars { padding: 60px 0; background: var(--cream); }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.pillar {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pillar:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.p-icon { font-size: 2rem; margin-bottom: 6px; }
.pillar h3 { font-size: 1.2rem; margin: 0; }
.pillar p { color: var(--muted); font-size: .92rem; margin: 0; }

.dm-block { padding: 72px 0; }
.dm-block.alt { background: var(--cream); }
.dm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.dm-card:hover { transform: translateY(-2px); border-color: var(--leaf-400); box-shadow: var(--shadow); }
.dm-step {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  background: var(--leaf-100); color: var(--ink); font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.dm-card h3 { font-size: 1.05rem; margin: 0; }
.dm-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.dm-card .link { margin-top: auto; padding-top: 10px; align-self: flex-start; }

.dm-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.dm-featured h3 { font-size: 1.6rem; margin: 10px 0 12px; }
.dm-featured .btn { margin-right: 10px; }
.dm-list {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px;
}
.dm-list li { padding: 10px 0; border-bottom: 1px dashed var(--line); font-weight: 500; }
.dm-list li:last-child { border: 0; }

.dm-help { padding: 72px 0; }
.dm-help-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.dm-help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dm-help-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.dm-help-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -10px rgba(31, 174, 156, .25);
}
.dm-help-card span { font-size: 2rem; display: block; margin-bottom: 12px; }
/* Icône FA centrée dans un rond turquoise pastel */
.dm-help-card > i {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 14px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.dm-help-card:hover > i {
  background: var(--teal);
  color: #fff;
  transform: scale(1.08);
}
.dm-help-card h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); }
.dm-help-card p { color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Carte interactive ---------- */
.map-main { padding: 0; }
.map-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 70vh;
  border-top: 1px solid var(--line);
}
.map-sidebar {
  border-right: 1px solid var(--line);
  background: var(--cream);
  padding: 22px;
  overflow-y: auto;
  max-height: 80vh;
}
.ms-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.ms-head h2 { margin: 0; font-size: 1.1rem; }
.map-sidebar fieldset {
  border: 0; margin: 0 0 20px; padding: 0;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.map-sidebar legend {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); margin-bottom: 10px;
}
.map-sidebar label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; font-size: .95rem; cursor: pointer;
}
.map-sidebar label .dot {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
}
.map-sidebar input[type=checkbox] { accent-color: var(--ink); width: 16px; height: 16px; }
.ms-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

#map { width: 100%; height: 80vh; min-height: 500px; }
.poi-pin span {
  width: 32px; height: 32px; border-radius: 50% 50% 50% 0;
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-45deg); box-shadow: 0 4px 8px rgba(0,0,0,.2);
  font-size: 16px;
  border: 2px solid #fff;
}
.poi-pin span > * { transform: rotate(45deg); }
.leaflet-popup-content b { color: var(--ink); }
.pop-cat {
  display: inline-block; margin-top: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--leaf-100); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
}

/* ---------- Chatbot plein écran ---------- */
.chat-section { padding: 20px 0 80px; }
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; }
.chat-aside {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; align-self: start;
  position: sticky; top: 100px;
}
.chat-aside h2 { font-size: 1.05rem; margin-top: 0; }
.chat-main {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  min-height: 60vh;
}
.chat-log {
  flex: 1; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  max-height: 60vh;
}
.chat-form {
  display: flex; gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--cream);
  border-radius: 0 0 var(--radius) var(--radius);
}
.chat-form input {
  flex: 1; padding: 14px 18px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 1rem; background: #fff;
}
.chat-form input:focus { outline: none; border-color: var(--ink); }
.chat-form button { width: 52px; height: 52px; border-radius: 50%; padding: 0; }
.chat-foot { padding: 12px 24px 16px; color: var(--muted); font-size: .82rem; }

/* ---------- Participation ---------- */
.part-stats-section { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-row > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  text-align: center;
}
.stats-row b { display: block; font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.stats-row span { color: var(--muted); font-size: .92rem; display: block; margin-top: 6px; }

.pp-block { padding: 72px 0; }
.pp-block.alt { background: var(--cream); }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proj-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.proj-img { aspect-ratio: 16/9; }
.proj-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj-body h3 { margin: 6px 0; font-size: 1.15rem; }
.proj-body p { color: var(--muted); font-size: .92rem; margin: 0; }
.proj-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.progress {
  height: 8px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--leaf-300), var(--teal));
}
.proj-card .btn { align-self: stretch; margin-top: auto; }

.consult-list { display: flex; flex-direction: column; gap: 16px; }
.consult-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.consult-card h3 { margin: 6px 0; font-size: 1.2rem; }
.consult-meta { display: flex; gap: 20px; color: var(--muted); font-size: .9rem; }
.consult-card .btn { align-self: flex-start; margin-top: 6px; }

.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.how-it { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.how-it h3 { margin-top: 0; font-size: 1.2rem; }
.timeline { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px;
  width: 2px; background: var(--leaf-200);
}
.timeline li { position: relative; padding-left: 40px; }
.timeline li::before {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--leaf-400); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--leaf-200);
}
.timeline b { display: block; margin-bottom: 2px; }
.timeline p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---------- Contact ---------- */
.contact-grid-section { padding: 60px 0 40px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}
.contact-card.big { background: var(--cream); }
.c-icon { font-size: 2.4rem; display: block; margin-bottom: 6px; }
.contact-card h2 { margin: 0 0 6px; }
.contact-card h3 { margin-top: 24px; }
.c-line { font-weight: 600; margin: 4px 0; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.hours-table th, .hours-table td { padding: 8px 0; text-align: left; border-bottom: 1px dashed var(--line); }
.hours-table th { font-weight: 600; color: var(--muted); font-size: .9rem; width: 50%; }
.contact-services h2 { margin-top: 0; }
.srv-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.srv-list b { font-size: .95rem; }
.srv-list a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); }

.contact-form-section { padding: 40px 0 80px; background: var(--cream); }
.cf-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }

/* ---------- Article ---------- */
.article-main { padding: 0; }
.article-head { padding: 40px 0 20px; }
.article-head h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 12px 0 14px; }
.article-head .lead { font-size: 1.2rem; }
.article-meta { color: var(--muted); font-size: .9rem; }
.article-hero {
  height: 420px;
  border-radius: var(--radius);
  margin: 0 auto 20px;
  max-width: var(--wrap);
}
.article-toolbar {
  display: flex; gap: 8px; margin: 14px 0 30px; flex-wrap: wrap;
}
.article-toolbar button {
  padding: 8px 14px; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--line);
  font-weight: 600; font-size: .88rem;
}
.article-toolbar button:hover { border-color: var(--ink); }

.article-body { padding-bottom: 72px; }
.article-body h2 { font-size: 1.5rem; margin: 36px 0 14px; }
.article-body p, .article-body li { font-size: 1.05rem; line-height: 1.65; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 1em; }
.article-body li { margin-bottom: 6px; list-style: initial; }
.article-body blockquote {
  margin: 30px 0; padding: 24px 28px;
  background: var(--leaf-50); border-left: 4px solid var(--leaf-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.1rem; font-style: italic; color: var(--ink);
}
.article-body blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: .9rem; color: var(--muted); }
.cta-box {
  margin: 40px 0 20px;
  background: var(--ink); color: #fff;
  padding: 32px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.cta-box h3 { color: #fff; }

.related { padding: 72px 0; background: var(--cream); }

/* ---------- Accessibility FAB ---------- */
.a11y-fab { position: fixed; bottom: 20px; right: 20px; z-index: 90; }
.a11y-fab > button {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 1.2rem;
  box-shadow: var(--shadow-lg);
  transition: transform .2s;
}
.a11y-fab > button:hover { transform: scale(1.08); }
.a11y-panel {
  display: none;
  position: absolute; bottom: 60px; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; min-width: 220px;
  box-shadow: var(--shadow-lg);
  flex-direction: column; gap: 4px;
}
.a11y-panel.open { display: flex; }
.a11y-panel button {
  padding: 10px 14px; text-align: left; border-radius: 8px; font-weight: 500;
}
.a11y-panel button:hover { background: var(--cream); }
.a11y-panel button.on { background: var(--leaf-100); }

/* ---------- A11y classes (activées via menu) ---------- */
html.a11y-big { font-size: 112.5%; }
html.a11y-contrast { --muted: #000; --ink-soft: #000; --line: #000; }
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast .btn-primary { background: #000; color: #ff0; border-color: #ff0; }
html.a11y-dyslexia body { font-family: "OpenDyslexic", "Comic Sans MS", var(--font-sans); letter-spacing: .02em; word-spacing: .1em; }

/* ==========================================================================
   Pages : Conseil municipal, Mon espace, Signalement, Salles, Ville, 404
   ========================================================================== */

/* ---------- Conseil municipal ---------- */
.cm-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.archive-table {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.archive-table table { width: 100%; border-collapse: collapse; }
.archive-table th, .archive-table td { padding: 14px 16px; text-align: left; font-size: .95rem; }
.archive-table thead { background: var(--cream); }
.archive-table th { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.archive-table tbody tr { border-top: 1px solid var(--line); }
.archive-table tbody tr:hover { background: var(--leaf-50); }
.archive-table td b { font-weight: 600; }
.archive-table .dl { display: flex; gap: 12px; flex-wrap: wrap; }
.archive-table .dl a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); font-size: .9rem; cursor: pointer; }

.elu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.elu-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.elu-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow); }
.elu-card.highlighted {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: #fff; border-color: transparent;
}
.elu-card.highlighted .elu-role, .elu-card.highlighted .elu-deleg { color: rgba(255,255,255,.8); }
.elu-card.highlighted .link { color: var(--leaf-200); border-color: var(--leaf-300); }
.elu-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
  margin-bottom: 8px;
}
.elu-card h3 { font-size: 1.1rem; margin: 0; }
.elu-role { color: var(--muted); font-weight: 600; margin: 0; font-size: .92rem; }
.elu-deleg { color: var(--muted); font-size: .88rem; margin: 6px 0 10px; }

.commissions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.comm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.comm-card span { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.comm-card h3 { font-size: 1rem; margin: 0 0 4px; }
.comm-card p { color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Mon espace ---------- */
.me-hero {
  background: linear-gradient(160deg, var(--ink), #021540);
  color: #fff;
  padding: 60px 0 40px;
}
.me-hero-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.me-welcome { color: var(--leaf-200); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 8px; }
.me-profile {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.me-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--leaf-200); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
}
.me-profile b { display: block; font-size: 1.1rem; }
.me-profile span { display: block; color: rgba(255,255,255,.7); font-size: .88rem; margin-bottom: 6px; }
.me-profile small { font-size: .78rem; color: rgba(255,255,255,.5); }
.me-profile .link { color: var(--leaf-200); border-color: var(--leaf-300); font-size: .88rem; }

.me-summary { margin-top: -30px; position: relative; z-index: 2; }
.me-sum-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.me-tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  text-align: center;
  transition: transform .15s, border-color .15s;
}
.me-tile:hover { transform: translateY(-2px); border-color: var(--ink); }
.me-tile .tile-icon { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.me-tile b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.me-tile span { color: var(--muted); font-size: .82rem; }

.me-main { padding: 48px 0 80px; }
.me-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.me-col { display: flex; flex-direction: column; gap: 14px; }
.me-proc, .me-signal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
}
.me-proc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.status {
  padding: 3px 10px; border-radius: 999px; font-size: .75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.status.on { background: #fff3cd; color: #856404; }
.status.ok { background: var(--leaf-100); color: var(--leaf-500); }
.status.pending { background: #f8d7da; color: #721c24; }
.me-proc-meta { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }

.progress.steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; height: auto; background: transparent; padding: 10px 0;
}
.progress.steps .step {
  text-align: center; font-size: .78rem; font-weight: 600;
  color: var(--muted); padding: 8px 4px;
  border-top: 3px solid var(--line);
  position: relative;
}
.progress.steps .step.done { color: var(--leaf-500); border-color: var(--leaf-400); }
.progress.steps .step.on { color: var(--ink); border-color: var(--ink); font-weight: 700; }
.progress.steps .step::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 3px solid var(--line);
}
.progress.steps .step.done::before { border-color: var(--leaf-400); background: var(--leaf-400); }
.progress.steps .step.on::before { border-color: var(--ink); background: var(--ink); }

.me-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

.me-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kid {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px;
}
.kid-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: var(--ink);
}
.kid h3 { margin: 0 0 6px; font-size: 1.1rem; }
.kid ul li { font-size: .88rem; padding: 3px 0; color: var(--ink-soft); }

.me-signal { display: grid; grid-template-columns: 60px 1fr; gap: 16px; }
.me-signal-map {
  background: var(--leaf-100); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}

.me-aside { display: flex; flex-direction: column; gap: 16px; }
.me-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.me-box h3 { font-size: 1rem; margin-top: 0; margin-bottom: 14px; }
.me-notifs li {
  padding: 10px 0; border-top: 1px solid var(--line); font-size: .9rem;
}
.me-notifs li:first-child { border: 0; padding-top: 0; }
.me-notifs time { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.bill {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; background: var(--cream); border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.bill b { font-size: 1.3rem; color: var(--ink); }

.me-prefs li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: .95rem;
}
.me-prefs li:first-child { border: 0; }
.toggle {
  width: 40px; height: 24px; border-radius: 999px; background: var(--line);
  position: relative; cursor: pointer; transition: background .2s;
  display: inline-block; flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.toggle.on { background: var(--leaf-400); }
.toggle.on::after { transform: translateX(16px); }

.me-help { background: linear-gradient(160deg, var(--ink), var(--ink-2)); color: #fff; border-color: transparent; }
.me-help h3 { color: var(--leaf-200); }
.me-help p { color: rgba(255,255,255,.8); margin-bottom: 12px; }

/* ---------- Signalement ---------- */
.sig-section { padding: 32px 0 80px; }
.sig-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.sig-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.sig-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.sig-form legend {
  font-size: 1rem; font-weight: 700; padding: 0;
  margin-bottom: 14px; color: var(--ink);
}
.sig-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.sig-types label {
  position: relative; cursor: pointer;
  background: var(--cream); border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 14px 14px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .2s, background .2s;
}
.sig-types label span { font-weight: 700; }
.sig-types label small { color: var(--muted); font-size: .82rem; }
.sig-types input { position: absolute; opacity: 0; }
.sig-types label:has(input:checked) { border-color: var(--ink); background: #fff; }
.sig-loc { display: flex; flex-direction: column; gap: 12px; }
.sig-map {
  width: 100%; height: 280px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sig-form label span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.sig-form input, .sig-form textarea, .sig-form select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.sig-form input:focus, .sig-form textarea:focus, .sig-form select:focus { outline: none; border-color: var(--ink); }
.sig-form label.inline { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: .92rem; }
.sig-form label.inline input { width: auto; }
.sig-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sig-submit { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.sig-aside {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
  position: sticky; top: 100px;
}
.sig-aside h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------- Salles ---------- */
.halls { padding: 60px 0; }
.hall-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 320px 1fr;
  margin-bottom: 20px;
  overflow: hidden;
}
.hall-img {
  position: relative;
  min-height: 240px;
}
.hall-cap {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem;
}
.hall-body { padding: 24px 28px; }
.hall-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.hall-meta { color: var(--muted); margin-bottom: 12px; }
.hall-equip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hall-equip li {
  background: var(--leaf-50); padding: 5px 12px; border-radius: 999px;
  font-size: .85rem; color: var(--ink);
}
.hall-price {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--cream); border-radius: var(--radius-sm); padding: 14px;
  margin-bottom: 16px;
}
.hall-price > div { text-align: center; }
.hall-price b { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hall-price span { font-weight: 700; color: var(--ink); }
.hall-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.hall-book { padding: 60px 0 80px; background: var(--cream); }
.hall-book-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

.cal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal-head b { font-size: 1.15rem; }
.cal-nav {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--line);
  font-size: 1.3rem; font-weight: 700;
}
.cal-nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 4px;
}
.cal-dow span {
  text-align: center; font-size: .78rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 6px 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1/1;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.cal-cell.empty { border: 0; background: transparent; cursor: default; }
.cal-cell.free { background: #f1faea; border-color: var(--leaf-200); color: var(--leaf-500); }
.cal-cell.partial { background: #fff3cd; border-color: #e6c556; color: #856404; }
.cal-cell.full { background: #f8d7da; border-color: #e28f96; color: #721c24; cursor: not-allowed; opacity: .7; }
.cal-cell.past { background: var(--cream); color: var(--muted); cursor: not-allowed; opacity: .5; }
.cal-cell:hover:not(.empty):not(.past):not(.full) { border-color: var(--ink); transform: scale(1.05); }
.cal-cell.selected { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow); }
.cal-cell span { font-size: .95rem; }

.cal-legend { display: flex; gap: 16px; margin-top: 16px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.cal-legend .dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.cal-legend .dot.green { background: var(--leaf-200); }
.cal-legend .dot.red { background: #e28f96; }
.cal-legend .dot.blue { background: var(--ink); }

.booking-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
  position: sticky; top: 100px;
}
.booking-panel h3 { margin-top: 0; font-size: 1.1rem; }
.book-summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.book-summary > div {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line); gap: 10px;
}
.book-summary dt { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: 0; flex-shrink: 0; }
.book-summary dd { margin: 0; font-weight: 600; text-align: right; }
.book-summary select {
  padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem;
}
.book-summary small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.btn.full { width: 100%; margin-bottom: 10px; }

/* ---------- Ville ---------- */
.ville-intro { padding: 60px 0; }
.ville-intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.vi-img {
  height: 380px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.ville-stats { padding: 60px 0; background: var(--ink); color: #fff; }
.ville-stats .section-title { color: #fff; margin-bottom: 28px; }
.vs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vs-grid > div {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px;
  text-align: center;
}
.vs-grid b { display: block; font-size: 2rem; color: var(--leaf-200); font-weight: 800; line-height: 1; margin-bottom: 6px; }
.vs-grid span { font-size: .88rem; color: rgba(255,255,255,.75); }

.axes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.axe-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
  transition: transform .2s, box-shadow .2s;
}
.axe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.axe-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 14px;
}
.axe-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.axe-card p { color: var(--muted); }

.ville-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vl-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  transition: transform .2s, border-color .2s;
}
.vl-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.vl-card span { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.vl-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.vl-card p { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- 404 ---------- */
.err { padding: 80px 0 120px; text-align: center; min-height: 60vh; display: flex; align-items: center; }
.err-wrap { width: 100%; max-width: 720px; margin: 0 auto; }
.err-illus {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.err-illus span {
  font-size: 10rem; font-weight: 800; color: var(--ink); line-height: 1;
  letter-spacing: -0.05em;
}
.err h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 14px; }
.err .lead { margin: 0 auto 28px; color: var(--muted); }
.err-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.err-links { background: var(--cream); padding: 28px; border-radius: var(--radius); text-align: left; }
.err-links h2 { font-size: 1rem; margin: 0 0 14px; }
.err-links ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.err-links li a { font-weight: 600; border-bottom: 2px solid var(--leaf-200); padding-bottom: 2px; }
.err-links li a:hover { border-color: var(--ink); }

/* ==========================================================================
   Pages : Cantine, Déchets, Annuaires, Projets, Démarche détail, Design System
   ========================================================================== */

/* ---------- Cantine ---------- */
.mc-filters { padding: 24px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.mc-filters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mc-filters label { display: block; }
.mc-filters label span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .88rem; }
.mc-filters select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }

.mc-meal { padding: 48px 0 80px; }
.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.mc-stats > div {
  background: var(--leaf-50); border: 1px solid var(--leaf-200); border-radius: var(--radius);
  padding: 18px 20px; text-align: center;
}
.mc-stats b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--leaf-500); line-height: 1; }
.mc-stats span { color: var(--muted); font-size: .85rem; }

.mc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 32px; }
.mc-day {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mc-day header {
  background: var(--ink); color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  text-align: center;
}
.mc-day header b { font-size: .95rem; }
.mc-dishes { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mc-dishes li {
  display: grid; grid-template-columns: 26px 1fr;
  gap: 10px; align-items: start;
  font-size: .92rem; line-height: 1.35;
}
.mc-dishes li > span { font-size: 1.1rem; }
.mc-dishes li em { font-style: normal; font-size: .72rem; background: var(--leaf-100); color: var(--leaf-500); padding: 2px 6px; border-radius: 999px; font-weight: 700; margin-left: 4px; }
.mc-dishes li.veggie { background: var(--leaf-50); margin: -2px -8px; padding: 6px 8px; border-radius: 6px; }
.mc-day footer {
  padding: 10px 16px; border-top: 1px solid var(--line);
  background: var(--cream);
  font-size: .78rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px;
}
.mc-day footer .a11y { font-style: italic; }
.mc-day footer .co2 { font-weight: 600; color: var(--leaf-500); }
.mc-off { background: var(--cream); border-style: dashed; }
.mc-closed {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; text-align: center; color: var(--muted);
}
.mc-closed span { font-size: 2.2rem; margin-bottom: 8px; }
.mc-closed p { margin: 0; font-weight: 600; }
.mc-closed small { font-weight: 400; display: block; margin-top: 4px; font-size: .8rem; }

.mc-legend {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 28px;
}
.mc-legend h3 { margin: 0 0 12px; font-size: 1rem; }
.mc-legend ul { display: flex; gap: 20px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-soft); }
.mc-legend li em { font-style: normal; font-weight: 700; color: var(--ink); margin-right: 4px; }

.mc-help {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center;
}
.mc-contact { background: var(--cream); border-radius: var(--radius-sm); padding: 18px; }
.mc-contact b { font-size: 1rem; display: block; margin-bottom: 8px; color: var(--ink); }
.mc-contact p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ---------- Déchets ---------- */
.dw-search { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.dw-form {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; max-width: 720px; margin: 0 auto;
}
.dw-form label { display: block; }
.dw-form label span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.dw-form input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 1rem; }
.dw-form input:focus { outline: none; border-color: var(--ink); }
.dw-form button { padding: 14px 24px; }

.dw-result { padding: 48px 0; }

.dw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dw-bin {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
  border-left: 6px solid var(--line);
}
.dw-bin.green { border-left-color: #2f6f36; }
.dw-bin.yellow { border-left-color: #e6c556; }
.dw-bin.green-dark { border-left-color: var(--leaf-500); }
.dw-bin.glass { border-left-color: #8c8c8c; }
.dw-bin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dw-bin-icon { font-size: 2rem; line-height: 1; }
.dw-bin h3 { margin: 0 0 2px; font-size: 1.1rem; }
.dw-bin p { margin: 0; color: var(--muted); font-size: .9rem; }
.dw-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px;
}
.dw-days li {
  padding: 10px 6px; border-radius: 8px;
  text-align: center; font-size: .8rem;
  background: var(--cream); color: var(--muted);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 48px;
}
.dw-days li.on { background: var(--ink); color: #fff; font-weight: 700; }
.dw-days li small { font-size: .7rem; color: var(--leaf-200); margin-top: 2px; }
.dw-days li:not(.on) small { display: none; }
.dw-rule { margin: 0; font-size: .88rem; color: var(--ink-soft); }

.dw-consignes { padding: 60px 0; background: var(--cream); }
.dw-rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dw-rule-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px;
}
.dw-rule-card.yes { border-left: 6px solid var(--leaf-400); }
.dw-rule-card.no { border-left: 6px solid var(--danger); }
.dw-rule-card h3 { margin: 0 0 12px; font-size: 1.15rem; }
.dw-rule-card ul { padding-left: 22px; }
.dw-rule-card li { padding: 4px 0; list-style: disc; color: var(--ink-soft); }

.dw-encombrants { padding: 60px 0 80px; }
.dw-enc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.dw-decheterie {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.dw-decheterie h3 { margin: 0 0 12px; font-size: 1.1rem; }
.dw-decheterie p { margin: 0 0 10px; font-size: .92rem; }

/* ---------- Annuaires ---------- */
.an-tabs { padding: 24px 0 0; border-bottom: 1px solid var(--line); background: var(--cream); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  padding: 14px 22px; border-radius: var(--radius) var(--radius) 0 0;
  background: transparent; color: var(--muted);
  font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; border-bottom: 0;
  transition: all .2s;
}
.tab span { background: var(--line); color: var(--ink); padding: 2px 10px; border-radius: 999px; font-size: .78rem; margin-left: 8px; }
.tab:hover { color: var(--ink); }
.tab.on {
  background: #fff; color: var(--ink);
  border-color: var(--line);
  position: relative;
  margin-bottom: -1px;
  padding-bottom: 15px;
}
.tab.on span { background: var(--leaf-200); }

.an-search { padding: 24px 0; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 103px; z-index: 10; }
.an-search-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px; align-items: center;
}
.an-query input { width: 100%; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--cream); font-size: .95rem; }
.an-query input:focus { outline: none; border-color: var(--ink); background: #fff; }
.an-search select { padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: .92rem; }
.an-view { display: inline-flex; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.an-view button { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--muted); }
.an-view button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.an-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.an-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 72px 1fr;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.an-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink); }
.an-logo {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.an-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.an-body h3 { margin: 4px 0; font-size: 1rem; line-height: 1.3; }
.an-body p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.4; }
.an-meta { font-size: .82rem !important; color: var(--muted) !important; }
.an-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.an-actions .link { font-size: .85rem; }
.an-icons { display: flex; gap: 6px; }
.an-icons a {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; cursor: pointer;
  transition: all .15s;
}
.an-icons a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.an-cta { padding: 48px 0; background: var(--leaf-50); }
.an-cta-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; }
.an-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Projets municipaux ---------- */
.pj-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.pj-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.pj-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.pj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pj-card.big { grid-column: span 2; }
.pj-img {
  aspect-ratio: 21/9;
  position: relative;
  display: flex; align-items: flex-end; padding: 20px;
}
.pj-card:not(.big) .pj-img { aspect-ratio: 16/9; }
.pj-stage {
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.pj-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.pj-body h3 { font-size: 1.2rem; margin: 4px 0; }
.pj-body p { color: var(--ink-soft); margin: 0; font-size: .95rem; }

.pj-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin-top: 8px; }
.tl-step {
  padding: 12px 10px;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  border-top: 3px solid var(--line);
  position: relative;
}
.tl-step b { display: block; font-size: .85rem; margin-bottom: 2px; color: var(--ink-soft); }
.tl-step.done { border-top-color: var(--leaf-400); color: var(--leaf-500); }
.tl-step.done b { color: var(--leaf-500); }
.tl-step.on { border-top-color: var(--ink); color: var(--ink); font-weight: 700; }
.tl-step.on b { color: var(--ink); }

.pj-meta { display: flex; gap: 18px; }
.pj-meta > div { display: flex; flex-direction: column; gap: 2px; }
.pj-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pj-meta dd { margin: 0; font-weight: 700; font-size: 1rem; color: var(--ink); }
.pj-meta.compact { flex-wrap: wrap; gap: 12px; font-size: .85rem; color: var(--muted); }
.pj-meta.compact span { display: inline-block; }

.pj-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

.pj-data { padding: 72px 0; background: var(--ink); color: #fff; }
.pj-data .section-title { color: #fff; }
.pj-data .lead { color: rgba(255,255,255,.8); }
.pj-data .bullets li { color: rgba(255,255,255,.85); }
.pj-data .bullets li::before { background: var(--leaf-300); }
.pj-data-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.pj-data-viz {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 28px;
  display: grid; grid-template-columns: 1fr 180px; gap: 20px; align-items: center;
}
.pj-data-viz h3 { color: var(--leaf-200); margin: 0 0 12px; font-size: 1rem; }
.pj-data-viz .pie {
  width: 180px; height: 180px; border-radius: 50%;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.1);
}
.pie-legend { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.pie-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

/* ---------- Démarche détail ---------- */
.dd-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 24px; max-width: 720px;
}
.dd-summary > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; text-align: center;
}
.dd-summary b { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.dd-summary span { display: block; color: var(--muted); font-size: .78rem; }

.dd-section { padding: 60px 0 80px; }
.dd-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.dd-main h2.section-title:not(:first-child) { margin-top: 48px; }
.dd-ul { padding-left: 22px; margin-bottom: 20px; }
.dd-ul li { list-style: disc; margin-bottom: 6px; }

.dd-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; margin: 14px 0 30px; }
.dd-steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
}
.dd-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}
.dd-steps h3 { font-size: 1.05rem; margin: 0 0 4px; }
.dd-steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.dd-cta {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: #fff; padding: 32px; border-radius: var(--radius);
  margin: 40px 0;
}
.dd-cta h3 { color: #fff; margin: 0 0 10px; }
.dd-cta p { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.dd-cta .btn.big { font-size: 1.05rem; padding: 14px 24px; }

.dd-faq { display: flex; flex-direction: column; gap: 10px; }
.dd-faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 22px;
  transition: border-color .15s;
}
.dd-faq details[open] { border-color: var(--ink); }
.dd-faq summary {
  font-weight: 600; cursor: pointer;
  list-style: none;
  position: relative; padding-right: 32px;
}
.dd-faq summary::-webkit-details-marker { display: none; }
.dd-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 0;
  font-size: 1.4rem; font-weight: 400;
  transition: transform .2s;
}
.dd-faq details[open] summary::after { content: "−"; }
.dd-faq p { margin: 12px 0 0; color: var(--ink-soft); }
.dd-faq a { color: var(--ink); border-bottom: 1px solid var(--leaf-300); font-weight: 600; }

.dd-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.dd-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.dd-box h3 { margin-top: 0; font-size: 1rem; }
.dd-box.dd-related { background: var(--leaf-50); }
.dd-geo { display: block; margin-bottom: 10px; }
.dd-geo span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .88rem; }
.dd-geo input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: .9rem; }
.full { width: 100%; }
.dd-help-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.dd-help-list li:last-child { border: 0; }
.dd-help-list a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); }

.dd-falc { padding: 60px 0 80px; background: var(--cream); }
.dd-falc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dd-falc-grid > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}

/* ---------- Design System ---------- */
.ds-section { padding: 60px 0; }
.ds-section.alt { background: var(--cream); }
.ds-section h3 { font-size: 1.15rem; margin-top: 32px; margin-bottom: 12px; color: var(--ink-soft); }
.ds-palette h3:first-child { margin-top: 0; }
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.swatch {
  border-radius: var(--radius-sm); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 110px;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}
.swatch.bordered { border: 1px solid var(--line); }
.swatch b { font-size: .88rem; font-weight: 700; }
.swatch span { font-size: .82rem; opacity: .85; font-family: var(--font-sans); }
.swatch small { font-size: .72rem; margin-top: auto; opacity: .75; font-family: var(--font-sans); }

.ds-typo { display: flex; flex-direction: column; gap: 14px; }
.t-row {
  display: grid; grid-template-columns: 1fr 220px;
  gap: 24px; align-items: center;
  padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ds-section.alt .t-row { background: #fff; }
.t-row p { margin: 0; }
.t-row dl { margin: 0; font-family: ui-monospace, monospace; font-size: .82rem; }
.t-row dt { color: var(--muted); }
.t-row dd { margin: 2px 0 0; font-weight: 600; }

.ds-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.ds-form-demo {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 620px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  margin-bottom: 28px;
}
.ds-section.alt .ds-form-demo { background: var(--cream); }
.ds-form-demo label { display: block; }
.ds-form-demo label span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.ds-form-demo input, .ds-form-demo select, .ds-form-demo textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.ds-form-demo label.inline { grid-column: span 2; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.ds-form-demo label.inline input { width: auto; }

.ds-a11y-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.a11y-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.a11y-card h3 { margin: 0 0 10px; font-size: 1rem; }

.ds-govs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gov {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.gov h3 { margin-top: 0; font-size: 1rem; }
.gov p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ==========================================================================
   Pages : Accessibilité, Mentions légales, RGPD, Emploi, Profil famille,
           Élu détail, Plan du site
   ========================================================================== */

/* ---------- Accessibilité / RGPD tableaux ---------- */
.acc-score {
  display: grid; grid-template-columns: 220px 1fr; gap: 28px;
  align-items: center;
  background: var(--leaf-50); border: 1px solid var(--leaf-200);
  border-radius: var(--radius); padding: 24px 28px;
  margin: 20px 0 32px;
}
.acc-num b { display: block; font-size: 3rem; font-weight: 800; color: var(--leaf-500); line-height: 1; }
.acc-num span { color: var(--ink-soft); font-size: .92rem; }
.progress.big { height: 14px; background: #fff; border-radius: 999px; }
.progress.big span { background: linear-gradient(90deg, var(--leaf-300), var(--teal)); }
.acc-detail { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--ink-soft); }
.acc-detail .dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.acc-contact {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
  margin: 20px 0;
}
.acc-contact b { font-size: 1rem; display: block; margin-bottom: 8px; }
.acc-contact p { margin: 0 0 10px; font-size: .92rem; }

.rgpd-table {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 16px 0 28px;
}
.rgpd-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rgpd-table thead { background: var(--ink); color: #fff; }
.rgpd-table th { text-align: left; padding: 12px 14px; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.rgpd-table td { padding: 12px 14px; border-top: 1px solid var(--line); }
.rgpd-table tr:hover td { background: var(--leaf-50); }

.rgpd-rights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 28px; }
.right-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.right-card h3 { font-size: 1rem; margin-top: 0; }
.right-card p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ---------- Emploi ---------- */
.emp-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.emp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.emp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.emp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink); }
.emp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.emp-urgency {
  padding: 3px 10px; border-radius: 999px;
  background: #fff3cd; color: #856404;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.emp-urgency.alt { background: var(--leaf-100); color: var(--leaf-500); }
.emp-card h3 { font-size: 1.1rem; margin: 2px 0; }
.emp-meta { color: var(--muted); font-size: .9rem; margin: 0; }
.emp-keys { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.emp-keys li { padding: 4px 0; font-size: .88rem; color: var(--ink-soft); position: relative; padding-left: 18px; }
.emp-keys li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--leaf-400);
}
.emp-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--muted);
}
.emp-foot a.link { font-weight: 600; }

.emp-why { padding: 72px 0; background: var(--cream); }
.emp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.why-card span { font-size: 2rem; display: block; margin-bottom: 10px; }
.why-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.why-card p { color: var(--muted); font-size: .9rem; margin: 0; }

.emp-spontan { padding: 72px 0 80px; }
.emp-spontan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* ---------- Profil famille (persona) ---------- */
.persona-hero {
  background: linear-gradient(160deg, var(--leaf-50), #fff);
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.persona-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.persona-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }

.persona-illus {
  position: relative; aspect-ratio: 1/1; max-width: 360px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
}
.persona-illus .blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .7; }
.persona-illus .b1 { width: 60%; height: 60%; top: 10%; left: 10%; background: var(--leaf-200); }
.persona-illus .b2 { width: 50%; height: 50%; bottom: 10%; right: 5%; background: var(--teal); }
.persona-illus .b3 { width: 40%; height: 40%; top: 30%; right: 15%; background: var(--honey); }
.persona-illus .emoji { position: relative; font-size: 7rem; z-index: 2; }

.pf-section { padding: 60px 0; }
.pf-section.alt { background: var(--cream); }

.pf-ages { display: flex; gap: 10px; margin: 14px 0 28px; flex-wrap: wrap; }
.pf-age {
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-weight: 600; color: var(--ink);
  transition: all .15s;
}
.pf-age:hover { border-color: var(--ink); }
.pf-age.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.pf-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pf-srv {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s, box-shadow .15s;
}
.pf-srv:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pf-icon { font-size: 2rem; margin-bottom: 6px; }
.pf-srv h3 { font-size: 1.05rem; margin: 0; }
.pf-srv p { color: var(--muted); font-size: .9rem; margin: 0; }
.pf-srv .link { margin-top: auto; padding-top: 10px; align-self: flex-start; }

.pf-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.pf-checklist li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  list-style: none;
}
.pf-checklist .num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--leaf-300); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}
.pf-checklist h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pf-checklist p { color: var(--ink-soft); margin: 0 0 6px; font-size: .95rem; }

.events-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.events-3col li { border-bottom: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

.pf-help-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.pf-help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pf-help {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
  transition: border-color .15s, transform .15s;
}
.pf-help:hover { border-color: var(--ink); transform: translateY(-2px); }
.pf-help span { font-size: 2rem; display: block; margin-bottom: 6px; }
.pf-help h3 { font-size: 1rem; margin: 0 0 4px; }
.pf-help p { color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Élu détail ---------- */
.elu-page { padding: 20px 0 80px; }
.elu-page-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.elu-side {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 10px;
}
.elu-portrait {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: #fff; font-weight: 800; font-size: 3rem; letter-spacing: .05em;
}
.elu-side h1 { font-size: 1.6rem; margin: 0 0 4px; }
.elu-fonction { color: var(--ink-soft); font-weight: 700; margin: 0; }
.elu-party { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.elu-data { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.elu-data > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px dashed var(--line); }
.elu-data > div:first-child { border: 0; padding-top: 0; }
.elu-data dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); margin: 0; }
.elu-data dd { margin: 2px 0 0; font-weight: 500; font-size: .95rem; }

.elu-main h2.section-title { margin-top: 40px; }
.elu-main h2.section-title:first-child { margin-top: 0; }
.elu-actions { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.elu-actions li {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
}
.elu-actions li span { font-size: 1.6rem; line-height: 1; }
.elu-actions h3 { font-size: 1.05rem; margin: 0 0 4px; }
.elu-actions p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Plan du site ---------- */
.pds-section { padding: 40px 0 80px; }
.pds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pds-col h2 { font-size: 1.05rem; margin: 0 0 14px; }
.pds-col h2.mt { margin-top: 32px; }
.pds-col > ul > li {
  padding: 6px 0; font-weight: 600; border-bottom: 1px dashed var(--line);
}
.pds-col > ul > li:last-child { border: 0; }
.pds-col > ul > li > ul {
  margin: 8px 0 4px 18px; padding: 0; border-left: 2px solid var(--line);
}
.pds-col > ul > li > ul > li {
  padding: 4px 0 4px 12px; font-weight: 500; font-size: .9rem; color: var(--ink-soft);
}
.pds-col a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .15s; }
.pds-col a:hover { border-color: var(--leaf-400); }
.pds-col kbd { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: .78rem; margin-left: 6px; }

/* ==========================================================================
   Pages : CCAS, Patrimoine, Jumelages, Commande publique, Dark mode, Cookie banner
   ========================================================================== */

/* ---------- CCAS ---------- */
.cc-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.cc-missions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.cc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cc-card > span { font-size: 2rem; margin-bottom: 6px; }
.cc-card h3 { margin: 0; font-size: 1.1rem; }
.cc-card p { color: var(--ink-soft); margin: 0; font-size: .92rem; }
.cc-card .link { margin-top: auto; padding-top: 8px; align-self: flex-start; }

.cc-seniors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-srv {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.cc-srv h3 { margin: 0 0 8px; font-size: 1.05rem; }
.cc-srv p { margin: 0 0 8px; color: var(--ink-soft); font-size: .92rem; }
.cc-srv .price {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--leaf-500); font-weight: 700; font-size: .88rem;
}

.cc-urgent { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cc-urg-card {
  background: linear-gradient(160deg, #fff, var(--leaf-50));
  border: 1.5px solid var(--leaf-200); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.cc-urg-card .n { display: block; font-size: 2.2rem; font-weight: 800; color: var(--danger); line-height: 1; letter-spacing: -0.02em; }
.cc-urg-card b { display: block; margin: 8px 0 4px; font-size: .95rem; }
.cc-urg-card p { margin: 0; color: var(--muted); font-size: .82rem; }

.cc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* ---------- Patrimoine ---------- */
.pa-timeline { padding: 60px 0; background: var(--cream); }
.pa-history { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.pa-history::before {
  content: ""; position: absolute; left: 100px; top: 14px; bottom: 14px;
  width: 3px; background: var(--leaf-200);
}
.pa-history li {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 32px; padding: 14px 0 14px 0;
  position: relative;
}
.pa-history time {
  font-weight: 800; color: var(--ink); font-size: 1rem;
  text-align: right; padding-right: 18px;
  letter-spacing: -0.01em;
}
.pa-history li::before {
  content: ""; position: absolute; left: 94px; top: 20px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--leaf-400); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--leaf-200);
}
.pa-history h3 { margin: 0 0 4px; font-size: 1.1rem; }
.pa-history p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.pa-monuments { padding: 60px 0; }
.pa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pa-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.pa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pa-img { aspect-ratio: 16/10; }
.pa-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.pa-body h3 { font-size: 1.1rem; margin: 4px 0; }
.pa-body p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.pa-meta { font-size: .85rem !important; color: var(--muted) !important; }

.pa-visit { padding: 60px 0 80px; background: var(--ink); color: #fff; }
.pa-visit .section-title { color: #fff; }
.pa-visit .lead { color: rgba(255,255,255,.85); }
.pa-visit .bullets li { color: rgba(255,255,255,.85); }
.pa-visit .bullets li::before { background: var(--leaf-300); }
.pa-visit .badge { background: var(--leaf-200); color: var(--ink); }
.pa-visit-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.pa-events {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 24px;
}
.pa-events h3 { color: var(--leaf-200); margin-top: 0; }
.pa-events .events li { border-bottom-color: rgba(255,255,255,.1); }
.pa-events .events h3 { color: #fff; margin: 0 0 4px; }
.pa-events .events p { color: rgba(255,255,255,.7); }

/* ---------- Jumelages ---------- */
.ju-list { padding: 60px 0; display: flex; flex-direction: column; gap: 20px; }
.ju-list > .wrap { display: flex; flex-direction: column; gap: 20px; }
.ju-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 180px 1fr;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ju-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ju-flag {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ju-flag .ju-emo {
  font-size: 4rem;
  background: rgba(255,255,255,.92);
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.ju-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.ju-body h3 { font-size: 1.3rem; margin: 4px 0; }
.ju-meta { color: var(--muted); font-size: .92rem; margin: 0; }
.ju-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 4px; }
.ju-stats > div { padding: 10px 0; border-top: 1px dashed var(--line); }
.ju-stats dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 0; }
.ju-stats dd { margin: 2px 0 0; font-weight: 600; font-size: .95rem; color: var(--ink); }

.ju-asso { padding: 72px 0; background: var(--cream); }
.ju-asso-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.ju-map {
  aspect-ratio: 4/3; border-radius: var(--radius);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.ju-pin {
  position: absolute;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  border: 3px solid #fff;
}
.ju-pin.p0 { width: 52px; height: 52px; background: var(--ink); color: var(--leaf-200); }

/* ---------- Commande publique ---------- */
.cp-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.cp-list { display: flex; flex-direction: column; gap: 14px; }
.cp-row {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px;
  display: grid; grid-template-columns: 180px 1fr auto; gap: 24px;
  align-items: center;
  transition: border-color .15s, transform .15s;
}
.cp-row:hover { border-color: var(--ink); transform: translateY(-1px); }
.cp-row.featured {
  border-left: 6px solid var(--leaf-400);
  background: linear-gradient(90deg, var(--leaf-50), #fff 120px);
}
.cp-col-ref { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cp-ref { font-family: ui-monospace, SF Mono, Menlo, monospace; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.cp-col-body h3 { font-size: 1.1rem; margin: 0 0 8px; }
.cp-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; margin: 0; }
.cp-meta span { white-space: nowrap; }
.cp-col-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.cp-help-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.cp-data {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.cp-data h3 { margin-top: 0; font-size: 1.1rem; }
.cp-data-list { margin-top: 14px; }
.cp-data-list li { padding: 10px 0; border-top: 1px dashed var(--line); }
.cp-data-list li:first-child { border: 0; }
.cp-data-list a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--leaf-300); }
.cp-data-list small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }

.cp-engagements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-eng {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.cp-eng span { font-size: 2rem; display: block; margin-bottom: 10px; }
.cp-eng h3 { font-size: 1.05rem; margin: 0 0 6px; }
.cp-eng p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---------- Nouvel arrivant : check-list persistée ---------- */
.pna-checklist { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin-top: 24px; }
.pna-checklist li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: all .2s;
}
.pna-checklist li label {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  font-weight: 500;
}
.pna-checklist input[type=checkbox] {
  width: 20px; height: 20px; accent-color: var(--leaf-500); flex-shrink: 0;
}
.pna-checklist li.done {
  background: var(--leaf-50); border-color: var(--leaf-200);
}
.pna-checklist li.done label span { text-decoration: line-through; color: var(--muted); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px;
  z-index: 80;
  background: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0;
  transform: translateY(120%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: 900px;
  margin: 0 auto;
}
.cookie-banner.open { transform: translateY(0); opacity: 1; }
.cb-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  padding: 22px 26px;
  align-items: center;
}
.cb-text b { display: block; font-size: 1rem; margin-bottom: 6px; }
.cb-text p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.cb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cookie-settings {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,15,57,.55);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.cookie-settings.open { display: flex; }
.cs-inner {
  background: #fff; border-radius: var(--radius);
  max-width: 600px; width: 100%;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.cs-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  font-size: 1.1rem; cursor: pointer;
}
.cs-close:hover { background: var(--ink); color: #fff; }
.cs-inner h2 { margin-top: 0; }
.cs-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.cs-row:first-of-type { border-top: 0; margin-top: 16px; }
.cs-row b { display: block; font-size: 1rem; margin-bottom: 4px; }
.cs-row small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.cs-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Dark mode (classe a11y-dark) ---------- */
html.a11y-dark {
  --paper: #0d1326;
  --cream: #151b32;
  --mist: #1e2540;
  --ink: #e7ecf8;
  --ink-2: #c9d0e8;
  --ink-soft: #a9b4d0;
  --line: #2a3356;
  --muted: #8a95b5;
  --leaf-50: #152a1f;
  --leaf-100: #1e3b2a;
  --shadow: 0 6px 24px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -30px rgba(0,0,0,.6);
}
html.a11y-dark body { background: var(--paper); color: var(--ink); }
html.a11y-dark .btn-primary { background: var(--leaf-400); color: #0d1326; }
html.a11y-dark .btn-primary:hover { background: var(--leaf-300); }
html.a11y-dark .btn-ghost { color: var(--ink); border-color: var(--ink); }
html.a11y-dark .btn-ghost:hover { background: var(--ink); color: var(--paper); }
html.a11y-dark .top, html.a11y-dark .mainnav,
html.a11y-dark .card, html.a11y-dark .services-grid a,
html.a11y-dark .dm-card, html.a11y-dark .cc-card,
html.a11y-dark .pa-card, html.a11y-dark .ju-card,
html.a11y-dark .cp-row, html.a11y-dark .emp-card,
html.a11y-dark .pf-srv, html.a11y-dark .pillar,
html.a11y-dark .ville-links .vl-card, html.a11y-dark .axe-card,
html.a11y-dark .event-card, html.a11y-dark .dir-grid a,
html.a11y-dark .persona-grid a, html.a11y-dark .booking-panel,
html.a11y-dark .me-proc, html.a11y-dark .me-signal, html.a11y-dark .me-box,
html.a11y-dark .kid, html.a11y-dark .sig-form,
html.a11y-dark .hall-card, html.a11y-dark .archive-table,
html.a11y-dark .elu-card, html.a11y-dark .elu-side,
html.a11y-dark .pj-card, html.a11y-dark .proj-card,
html.a11y-dark .consult-card, html.a11y-dark .mc-day,
html.a11y-dark .sub, html.a11y-dark .dw-bin,
html.a11y-dark .dw-rule-card, html.a11y-dark .an-card,
html.a11y-dark .cal, html.a11y-dark .right-card,
html.a11y-dark .pna-checklist li, html.a11y-dark .contact-card,
html.a11y-dark .cookie-banner, html.a11y-dark .cs-inner,
html.a11y-dark .search-modal-inner, html.a11y-dark .search-trigger {
  background: var(--cream); color: var(--ink); border-color: var(--line);
}
html.a11y-dark .card-media .card-tag { background: rgba(10,20,45,.9); color: var(--ink); }
html.a11y-dark .tag, html.a11y-dark .card-tag { background: var(--leaf-100); color: var(--leaf-200); }
html.a11y-dark .events time, html.a11y-dark .event-card time { background: var(--leaf-500); }
html.a11y-dark input, html.a11y-dark select, html.a11y-dark textarea,
html.a11y-dark .chip, html.a11y-dark .search-modal-head input {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
html.a11y-dark .chip.active { background: var(--leaf-400); color: var(--paper); border-color: var(--leaf-400); }
html.a11y-dark .foot, html.a11y-dark .part, html.a11y-dark .me-hero,
html.a11y-dark .page-hero.dark, html.a11y-dark .pa-visit, html.a11y-dark .pj-data {
  background: #020719;
}
html.a11y-dark .quick { background: var(--leaf-500); color: var(--paper); }
html.a11y-dark .quick-grid a { background: rgba(255,255,255,.08); color: #fff; }
html.a11y-dark .quick h2 { color: var(--leaf-200); }

/* Correctifs dark mode : éléments avec background: #fff hard-codé */
html.a11y-dark .chat-main,
html.a11y-dark .stats-row > div,
html.a11y-dark .proj-card,
html.a11y-dark .consult-card,
html.a11y-dark .how-it,
html.a11y-dark .archive-table,
html.a11y-dark .archive-table thead,
html.a11y-dark .a11y-panel {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--line);
}
html.a11y-dark .chat-form { background: var(--paper); border-top-color: var(--line); }
html.a11y-dark .chat-form input,
html.a11y-dark .search-trigger kbd {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html.a11y-dark .stats-row b { color: var(--ink); }
html.a11y-dark .stats-row span { color: var(--ink-soft); }
html.a11y-dark .a11y-panel button { color: var(--ink); }
html.a11y-dark .a11y-panel button:hover { background: var(--paper); }
html.a11y-dark .a11y-panel button.on { background: var(--leaf-500); color: #fff; }
html.a11y-dark .search-trigger:hover { background: var(--paper); }
html.a11y-dark .archive-table tbody tr:hover { background: var(--paper); }
html.a11y-dark .archive-table .dl a { color: var(--ink); border-bottom-color: var(--leaf-300); }

/* Bulles du chatbot en dark mode */
html.a11y-dark .chat-msg.bot .bubble,
html.a11y-dark .bubble.bot,
html.a11y-dark .msg.bot { background: var(--paper); color: var(--ink); border-color: var(--line); }
html.a11y-dark .chat-msg.user .bubble,
html.a11y-dark .bubble.user,
html.a11y-dark .msg.user { background: var(--leaf-500); color: #fff; }

/* Garantie de contraste pour le panneau a11y, même en mode clair */
.a11y-panel button { color: var(--ink); }

/* Bandeau alerte (consultation) en dark mode : fond vert foncé, lien lisible */
html.a11y-dark .alert-banner {
  background: var(--leaf-500);
  color: #fff;
  border-color: var(--leaf-400);
}
html.a11y-dark .alert-banner b { color: #fff; }
html.a11y-dark .alert-banner a {
  color: #fff;
  border-bottom-color: #fff;
}
html.a11y-dark .alert-banner a:hover { color: var(--leaf-100); border-bottom-color: var(--leaf-100); }

/* Bouton accessibilité FAB en dark mode : fond turquoise au lieu de --ink (devient blanc) */
html.a11y-dark .a11y-fab > button {
  background: var(--leaf-500);
  color: #fff;
  border: 2px solid var(--leaf-300);
}
html.a11y-dark .a11y-fab > button:hover { background: var(--leaf-400); }

/* Améliore aussi le contraste en mode clair sur l'alert-banner :
   le fond pastel turquoise (#C2EAE0) + ink (bleu marine) c'est OK,
   mais s'assurer que le lien reste lisible */
.alert-banner a { color: var(--ink); }
.alert-banner a:hover { color: var(--leaf-500); border-bottom-color: var(--leaf-500); }

/* ==========================================================================
   Pages : Événement détail, Offre emploi détail, Projet détail, Toast
   ========================================================================== */

/* ---------- Événement détail ---------- */
.evt-head .evt-date {
  display: inline-block;
  background: var(--leaf-100); color: var(--ink);
  padding: 6px 14px; border-radius: 999px;
  font-weight: 600; margin: 8px 0;
}
.evt-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.evt-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
  padding: 40px 0 60px;
  align-items: start;
}
.evt-main { display: flex; flex-direction: column; gap: 20px; }
.evt-hero {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.evt-assos { list-style: disc; padding-left: 24px; }
.evt-assos li { margin-bottom: 4px; }

.evt-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.evt-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.evt-card h3 { margin: 0 0 14px; font-size: 1rem; }
.evt-info { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.evt-info > div {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.evt-info > div:last-of-type { border: 0; }
.evt-info dt { color: var(--muted); font-size: .85rem; margin: 0; }
.evt-info dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; }
.evt-map { width: 100%; height: 220px; border-radius: var(--radius-sm); margin-bottom: 10px; }

/* ---------- Offre emploi détail ---------- */
.oed-head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: end;
  padding-top: 16px;
}
.oed-head h1 { margin: 10px 0; }
.oed-summary {
  color: var(--ink-soft); font-size: .95rem;
  display: flex; flex-wrap: wrap; gap: 16px;
}
.oed-summary::first-letter { text-transform: none; }
.oed-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oed-cta .big { padding: 14px 28px; font-size: 1rem; }

.oed-section { padding: 48px 0 80px; }
.oed-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.oed-main h2 { font-size: 1.3rem; margin: 32px 0 12px; }
.oed-main h2:first-child { margin-top: 0; }
.oed-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.oed-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.oed-card h3 { margin: 0 0 14px; font-size: 1rem; }
.oed-contact {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  align-items: center; margin-bottom: 10px;
}
.oed-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--ink);
}
.oed-contact b { display: block; font-size: .95rem; }
.oed-contact small { color: var(--muted); font-size: .82rem; }

/* ---------- Projet détail ---------- */
.pjd-hero {
  background: linear-gradient(160deg, var(--ink) 0%, #021540 60%, var(--leaf-500) 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative;
  overflow: hidden;
}
.pjd-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 80% 20%, rgba(181,228,140,.2) 0, transparent 60%);
  pointer-events: none;
}
.pjd-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 14px; }
.pjd-hero .badge { background: var(--leaf-200); color: var(--ink); }
.pjd-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 32px;
  position: relative; z-index: 2;
}
.pjd-kpi > div {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 20px;
  text-align: center;
}
.pjd-kpi b { display: block; font-size: 2rem; color: var(--leaf-200); font-weight: 800; line-height: 1; }
.pjd-kpi span { color: rgba(255,255,255,.8); font-size: .88rem; display: block; margin-top: 6px; }

.pjd-timeline { padding: 60px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.pjd-phases {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 24px;
}
.ph {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; position: relative;
  border-top: 4px solid var(--line);
}
.ph.done { border-top-color: var(--leaf-400); background: var(--leaf-50); }
.ph.on { border-top-color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.ph-num {
  position: absolute; top: -18px; right: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--muted); border: 3px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.ph.done .ph-num { color: var(--leaf-500); border-color: var(--leaf-400); background: var(--leaf-100); }
.ph.on .ph-num { color: #fff; background: var(--ink); border-color: var(--ink); }
.ph h3 { font-size: 1.05rem; margin: 0 0 4px; }
.ph time { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; margin-bottom: 10px; }
.ph p { color: var(--ink-soft); font-size: .88rem; margin: 0; }

.pjd-budget { padding: 60px 0; }
.pjd-budget-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.pjd-fin { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; }
.pjd-fin > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.pjd-fin dt { color: var(--ink-soft); font-weight: 500; margin: 0; }
.pjd-fin dd { margin: 0; font-weight: 700; font-size: 1rem; }
.pjd-fin small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.pjd-engaged { font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.pjd-pie {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.pjd-pie h3 { font-size: 1rem; margin: 0 0 16px; }
.pjd-pie .pie {
  width: 200px; height: 200px; border-radius: 50%;
  margin: 0 auto 16px;
  box-shadow: inset 0 0 0 8px var(--paper);
}
.pjd-pie .pie-legend { text-align: left; display: inline-flex; flex-direction: column; gap: 4px; font-size: .88rem; }

.pjd-jalons { padding: 60px 0; background: var(--cream); }
.pjd-j { max-width: 640px; margin-left: 28px; }
.pjd-j .now {
  background: var(--honey); color: var(--ink);
  padding: 2px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  margin-left: 8px;
}

.pjd-doc { padding: 60px 0; }
.pjd-docs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 900px;
}
.pjd-docs li { list-style: none; }
.pjd-docs a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s, transform .15s;
}
.pjd-docs a:hover { border-color: var(--ink); transform: translateY(-1px); }
.pjd-docs small { color: var(--muted); font-size: .82rem; }

.pjd-follow {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: #fff;
  padding: 60px 0;
}
.pjd-follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.pjd-follow .section-title.light { color: #fff; }
.pjd-follow .lead.light { color: rgba(255,255,255,.85); }
.pjd-follow .bullets li { color: rgba(255,255,255,.85); }
.pjd-follow .bullets li::before { background: var(--leaf-300); }

.pjd-related { padding: 72px 0; }

/* ---------- Page recherche (Lunr) ---------- */
.sr-form { max-width: 820px; margin: 16px 0; }
.sr-wrap {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow);
}
.sr-wrap > svg { color: var(--ink); }
.sr-wrap input {
  flex: 1; border: 0; background: transparent;
  padding: 12px 0; font-size: 1.1rem; min-width: 0;
}
.sr-wrap input:focus { outline: none; }
.sr-wrap button { padding: 12px 22px; }
.sr-hint { margin: 12px 0 0; font-size: .88rem; }
.sr-hint kbd { background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: .78rem; margin: 0 2px; font-family: inherit; }

.sr-layout { padding: 30px 0 80px; }
.sr-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }

.sr-facets {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  position: sticky; top: 100px;
}
.sr-facets h2 { font-size: 1rem; margin: 0 0 12px; }
.sr-types { display: flex; flex-direction: column; gap: 4px; }
.sr-types label {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 4px; cursor: pointer; font-size: .92rem;
  border-radius: 6px;
  transition: background .15s;
}
.sr-types label:hover { background: rgba(255,255,255,.7); }
.sr-types input { accent-color: var(--ink); }
.sr-types em {
  font-style: normal; color: var(--muted); font-size: .82rem;
  background: #fff; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line);
}
.sr-sort {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.sr-reset {
  background: transparent; padding: 8px 0; margin-top: 12px;
  color: var(--muted); text-decoration: underline; font-size: .88rem;
  border: 0; cursor: pointer; width: 100%; text-align: left;
}
.sr-reset:hover { color: var(--ink); }

.sr-summary p { margin: 0; }
.sr-list { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.sr-item { }
.sr-item a {
  display: block; padding: 20px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sr-item a:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.sr-type {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--leaf-100); color: var(--ink);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 8px;
}
.sr-item h3 { font-size: 1.1rem; margin: 6px 0; }
.sr-item p { color: var(--ink-soft); margin: 0 0 10px; font-size: .92rem; line-height: 1.5; }
.sr-item mark { background: var(--honey); color: var(--ink); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.sr-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.sr-score { margin-left: auto; color: var(--leaf-500); font-family: ui-monospace, monospace; }

.sr-noresult {
  background: var(--cream); border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 48px 32px; text-align: center;
}
.sr-noresult-inner { max-width: 480px; margin: 0 auto; }
.sr-noresult span { font-size: 3rem; display: block; margin-bottom: 10px; }
.sr-noresult h2 { font-size: 1.2rem; margin: 0 0 8px; }
.sr-noresult p { color: var(--muted); margin: 0 0 20px; }

.sr-popular { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ==========================================================================
   Pages : Connexion, Urbanisme, Newsletter, Annuaire fiche, Culture
   ========================================================================== */

/* ---------- Connexion ---------- */
.cx-section { padding: 40px 0 80px; }
.cx-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.cx-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.cx-card h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 16px 0 10px; }

.cx-fc { margin: 28px 0 32px; text-align: center; padding: 24px; background: var(--cream); border-radius: var(--radius); }
.cx-fc-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: #0053b3; color: #fff;
  padding: 14px 28px; border-radius: 8px;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: background .2s, transform .15s;
}
.cx-fc-btn:hover { background: #003d82; transform: translateY(-1px); }
.cx-fc-what { margin: 12px 0 0; }
.cx-fc-what a { color: var(--ink); border-bottom: 1px solid var(--leaf-300); font-size: .88rem; }

.cx-providers-label { font-size: .95rem; font-weight: 600; margin: 0 0 14px; color: var(--ink-soft); }
.cx-grid-providers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cx-prov {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-weight: 600; text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.cx-prov:hover { border-color: var(--ink); transform: translateY(-1px); }
.cx-prov-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}
.cx-prov-name { font-size: .92rem; }

.cx-separator {
  position: relative; text-align: center; margin: 30px 0 24px;
  color: var(--muted);
}
.cx-separator::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line);
}
.cx-separator span { position: relative; background: #fff; padding: 0 16px; font-size: .88rem; }

.cx-local { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cx-local .btn { width: 100%; }
.cx-legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.cx-aside {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
  position: sticky; top: 100px;
}
.cx-aside h2 { font-size: 1.1rem; margin: 0 0 14px; }
.cx-security {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.cx-security h3 { font-size: 1rem; margin: 0 0 10px; }
.cx-help-link { text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.cx-help-link a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--leaf-300); }

/* ---------- Urbanisme ---------- */
.ur-quick { padding: 60px 0; background: var(--cream); }
.ur-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ur-quick-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.ur-quick-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow); }
.ur-quick-card span { font-size: 2rem; display: block; margin-bottom: 8px; }
.ur-quick-card h3 { font-size: .98rem; margin: 0 0 2px; }
.ur-quick-card p { color: var(--muted); font-size: .85rem; margin: 0; }

.ur-gnau { padding: 72px 0; }
.ur-gnau-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.ur-gnau-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.ur-gnau-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ur-gnau-stats > div {
  background: linear-gradient(160deg, var(--leaf-50), #fff);
  border: 1px solid var(--leaf-200); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.ur-gnau-stats b { display: block; font-size: 2rem; color: var(--leaf-500); font-weight: 800; line-height: 1; }
.ur-gnau-stats span { color: var(--ink-soft); font-size: .85rem; display: block; margin-top: 6px; }

.ur-types { padding: 60px 0; background: var(--cream); }

.ur-plu { padding: 72px 0; }
.ur-plu-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.ur-plu-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ur-plu-zones {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.ur-plu-zones h3 { margin-top: 0; font-size: 1.1rem; }
.zone-list { display: flex; flex-direction: column; gap: 8px; }
.zone-list li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; padding: 6px 0; font-size: .92rem; }
.zone-chip {
  display: inline-block; width: 50px;
  padding: 4px 0; border-radius: 6px;
  text-align: center; font-weight: 800; font-size: .88rem;
  color: var(--ink);
}

.ur-contact { padding: 60px 0 80px; background: var(--ink); color: #fff; }
.ur-contact .section-title { color: #fff; }
.ur-contact .lead { color: rgba(255,255,255,.85); }
.ur-contact a { color: var(--leaf-200); }
.ur-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.ur-contact-links {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 24px;
}
.ur-contact-links h3 { color: var(--leaf-200); margin: 0 0 14px; }
.ur-contact-links .srv-list li { border-bottom-color: rgba(255,255,255,.1); }
.ur-contact-links .srv-list b { color: #fff; }

/* ---------- Newsletter ---------- */
.nl-section { padding: 40px 0 80px; }
.nl-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.nl-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.nl-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.nl-form legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: 10px; color: var(--ink); }
.nl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nl-field { display: block; margin-bottom: 14px; }
.nl-field > span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.nl-field input, .nl-field select, .nl-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s;
}
.nl-field input:focus { outline: none; border-color: var(--ink); }
.nl-field input[aria-invalid=true] { border-color: var(--danger); }
.err { display: none; margin-top: 4px; color: var(--danger); font-size: .85rem; font-weight: 500; }

.nl-themes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nl-theme {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 12px; align-items: start;
  padding: 14px 16px;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.nl-theme:hover { border-color: var(--ink); }
.nl-theme:has(input:checked) { background: var(--leaf-50); border-color: var(--leaf-400); }
.nl-theme.highlighted { background: linear-gradient(160deg, #fff3cd, #fff); border-color: #e6c556; }
.nl-theme input { margin-top: 4px; }
.nl-theme b { display: block; margin-bottom: 2px; }
.nl-theme small { color: var(--muted); font-size: .82rem; }

.nl-inline { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .92rem; }
.nl-inline input { margin-top: 4px; }

.nl-actions { margin-top: 14px; }
.nl-actions .btn.big { padding: 14px 28px; font-size: 1rem; }
.nl-actions p { margin-top: 10px; }

.nl-success {
  background: var(--leaf-100); border: 2px solid var(--leaf-400);
  border-radius: var(--radius); padding: 40px 32px;
  text-align: center;
}
.nl-success span { font-size: 3rem; display: block; margin-bottom: 10px; }
.nl-success h3 { margin: 0 0 10px; font-size: 1.4rem; color: var(--leaf-500); }
.nl-success p { color: var(--ink); margin: 0; max-width: 420px; margin-inline: auto; }

.nl-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.nl-box {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.nl-box h3 { margin: 0 0 14px; font-size: 1rem; }
.nl-box-dark { background: var(--ink); color: #fff; border-color: transparent; }
.nl-box-dark h3 { color: var(--leaf-200); }
.nl-box-dark p { color: rgba(255,255,255,.8); }
.nl-box-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.nl-box-dark .btn-ghost:hover { background: #fff; color: var(--ink); }

.nl-preview {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px;
  font-size: .88rem;
}
.nl-prev-head { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.nl-prev-head strong { display: block; font-size: .95rem; }
.nl-prev-head small { color: var(--muted); }
.nl-prev-body { padding-left: 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); }
.nl-prev-body li { list-style: disc; font-size: .85rem; }
.nl-prev-foot { display: block; margin-top: 10px; font-size: .78rem; }

/* ---------- Annuaire fiche ---------- */
.af { padding: 0 0 60px; }
.af-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; padding-top: 20px; }
.af-head {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center;
  margin-bottom: 24px;
}
.af-logo {
  width: 96px; height: 96px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--ink);
}
.af-head h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 6px 0; }
.af-subtitle { color: var(--muted); font-size: .92rem; margin: 0 0 10px; }
.af-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.af-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 140px 140px;
  gap: 10px;
  margin-bottom: 24px;
}
.af-img {
  border-radius: var(--radius-sm);
  transition: transform .15s;
  cursor: pointer;
}
.af-img:hover { transform: scale(1.02); }
.af-img:first-child { grid-row: span 2; }

.af-body h2 { font-size: 1.3rem; margin: 30px 0 12px; }
.af-body h2:first-child { margin-top: 0; }
.af-activities { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 16px 0 24px; }
.af-activities > div {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.af-activities b { font-size: .95rem; display: block; margin-bottom: 4px; }
.af-activities p { margin: 0; color: var(--muted); font-size: .85rem; }

.af-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.af-contact-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.af-contact-box h3 { margin: 0 0 14px; font-size: 1rem; }
.af-social { display: flex; gap: 8px; margin-top: 12px; }
.af-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; cursor: pointer;
  transition: all .15s;
}
.af-social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.af-access { margin-top: 12px; }
.af-access li { padding: 6px 0; font-size: .88rem; border-bottom: 1px dashed var(--line); }
.af-access li:last-child { border: 0; }
.af-claim { background: var(--leaf-50); border-color: var(--leaf-200); }

/* ---------- Culture ---------- */
.cu-hero {
  background: linear-gradient(160deg, #2c1555 0%, #000f39 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative; overflow: hidden;
}
.cu-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 80% 20%, rgba(181,228,140,.2) 0, transparent 60%);
  pointer-events: none;
}
.cu-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0; }
.cu-hero .badge { background: var(--leaf-200); color: var(--ink); position: relative; z-index: 2; }
.cu-hero .hero-actions { position: relative; z-index: 2; }

.cu-equip { padding: 72px 0; }
.cu-equip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cu-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.cu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cu-img {
  aspect-ratio: 16/9; position: relative;
  display: flex; align-items: flex-end; padding: 20px;
}
.cu-cap {
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.cu-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; }
.cu-body h3 { font-size: 1.2rem; margin: 4px 0; }
.cu-body p { color: var(--ink-soft); margin: 0; font-size: .92rem; }
.cu-meta { color: var(--muted); font-size: .88rem !important; }
.cu-body .link { margin-top: auto; padding-top: 6px; align-self: flex-start; }

.cu-saison { padding: 72px 0; background: var(--cream); }

.cu-tarifs { padding: 72px 0; }
.cu-tarifs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.cu-tar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.cu-tar-price {
  display: block; font-size: 2.8rem; font-weight: 800; color: var(--ink); line-height: 1;
  margin-bottom: 10px;
}
.cu-tar b { display: block; font-size: 1rem; margin-bottom: 6px; }
.cu-tar p { color: var(--muted); font-size: .85rem; margin: 0; }
.cu-tar.highlighted { background: var(--leaf-100); border: 2px solid var(--leaf-400); }
.cu-tar.highlighted .cu-tar-price { color: var(--leaf-500); }

.cu-news { padding: 72px 0; background: var(--ink); color: #fff; }
.cu-news .section-title { color: #fff; text-align: center; margin-bottom: 28px; }
.cu-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cu-news-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px;
  transition: border-color .15s, transform .15s;
}
.cu-news-card:hover { border-color: var(--leaf-200); transform: translateY(-2px); }
.cu-news-card span { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.cu-news-card h3 { color: var(--leaf-200); font-size: 1rem; margin: 0 0 4px; }
.cu-news-card p { color: rgba(255,255,255,.75); font-size: .85rem; margin: 0; }

/* ==========================================================================
   Pages : Sport, Jeunesse, Petite enfance, Publications, Presse, Environnement, FAQ, Offline
   ========================================================================== */

/* ---------- Sport ---------- */
.sp-hero {
  background: linear-gradient(160deg, #002d5e 0%, #000f39 60%, #006e4e 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative; overflow: hidden;
}
.sp-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 70% 30%, rgba(181,228,140,.2) 0, transparent 60%);
  pointer-events: none;
}
.sp-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0; }
.sp-hero .badge { background: var(--leaf-200); color: var(--ink); position: relative; z-index: 2; }
.sp-hero .hero-actions { position: relative; z-index: 2; }

.sp-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.sp-equip { padding: 72px 0; }
.sp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.sp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sp-img {
  aspect-ratio: 16/9; position: relative;
  display: flex; align-items: flex-end; padding: 18px;
}
.sp-cap {
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.sp-body { padding: 22px 26px; }
.sp-body h3 { font-size: 1.15rem; margin: 6px 0; }
.sp-meta { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.sp-equip-list { margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-equip-list li { font-size: .9rem; color: var(--ink-soft); padding: 3px 0; }
.sp-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--muted);
}

.sp-dispos { padding: 60px 0; background: var(--cream); }
.sp-disciplines {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.sp-discipline {
  padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line);
  font-weight: 600; font-size: .95rem;
  transition: all .15s;
  cursor: pointer;
}
.sp-discipline:hover { border-color: var(--ink); transform: translateY(-1px); background: var(--leaf-50); }

.sp-sante { padding: 72px 0; }
.sp-sante-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sp-sante-grid > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}
.sp-handi {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: #fff;
}
.sp-handi .section-title { color: #fff; }
.sp-handi .lead { color: rgba(255,255,255,.85); }
.sp-handi .bullets li { color: rgba(255,255,255,.85); }
.sp-handi .bullets li::before { background: var(--leaf-300); }
.sp-handi .badge { background: var(--leaf-200); color: var(--ink); }

.sp-events { padding: 60px 0 80px; background: var(--cream); }

/* ---------- Jeunesse ---------- */
.ju-hero {
  background: linear-gradient(160deg, #4a1a5e 0%, #000f39 70%, #3a9b67 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative; overflow: hidden;
}
.ju-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 30% 30%, rgba(228,250,136,.2) 0, transparent 60%);
  pointer-events: none;
}
.ju-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0; }
.ju-hero .badge { background: var(--honey); color: var(--ink); }
.ju-hero .hero-actions { position: relative; z-index: 2; }

.jy-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.jy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jy-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.jy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.jy-icon { font-size: 2.2rem; display: block; margin-bottom: 10px; }
.jy-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.jy-card p { color: var(--muted); font-size: .88rem; margin: 0; }

.jy-contact {
  background: var(--leaf-50); border: 1px solid var(--leaf-200);
  border-radius: var(--radius); padding: 22px 26px;
  margin-top: 28px; font-size: .95rem;
}
.jy-contact b { display: block; font-size: 1.05rem; margin-bottom: 8px; }

.jy-disp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jy-disp {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  transition: border-color .15s, transform .15s;
}
.jy-disp:hover { border-color: var(--ink); transform: translateY(-2px); }
.jy-disp-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.jy-disp h3 { font-size: 1.1rem; margin: 0 0 8px; }
.jy-disp p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 10px; }

.jy-access { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.jy-access-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.jy-access-card > span { font-size: 2rem; display: block; margin-bottom: 10px; }
.jy-access-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.jy-access-card p { color: var(--ink-soft); margin: 0 0 12px; }
.jy-access-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jy-access-card ul li { font-size: .88rem; color: var(--muted); }
.jy-access-card ul li a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); }

/* ---------- Petite enfance ---------- */
.pe-hero {
  background: linear-gradient(180deg, #fffbe6 0%, #f1faea 100%);
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--line);
}
.pe-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0; }

.pe-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.pe-modes { display: flex; flex-direction: column; gap: 18px; }
.pe-mode {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 220px 1fr;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.pe-mode:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pe-mode-img {
  display: flex; align-items: center; justify-content: center;
}
.pe-mode-img span { font-size: 4rem; }
.pe-mode-body { padding: 26px 30px; }
.pe-mode-body h3 { font-size: 1.3rem; margin: 6px 0; }
.pe-mode-meta { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.pe-mode-plus { margin: 10px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pe-mode-plus li { list-style: none; padding: 3px 0 3px 18px; position: relative; font-size: .9rem; color: var(--ink-soft); }
.pe-mode-plus li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--leaf-500); font-weight: 800;
}
.pe-mode-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: .9rem; color: var(--ink-soft);
}

.pe-rpe { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.pe-rpe-main { }
.pe-rpe-main h3 { margin-top: 24px; font-size: 1.05rem; }
.pe-rpe-side {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  position: sticky; top: 100px;
}
.pe-rpe-side h3 { margin: 0 0 14px; font-size: 1rem; }

.pe-sante-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pe-sante {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.pe-sante > span { font-size: 2rem; display: block; margin-bottom: 10px; }
.pe-sante h3 { font-size: 1.1rem; margin: 0 0 8px; }
.pe-sante p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 10px; }
.pe-sante ul { list-style: none; padding: 0; }
.pe-sante ul li { font-size: .85rem; color: var(--muted); padding: 2px 0; }

/* ---------- Publications ---------- */
.pb-lieusaint-mag { padding: 60px 0; }
.pb-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }

.mag-cover {
  aspect-ratio: 3/4;
  background: linear-gradient(165deg, #000f39 0%, #0a1c52 40%, #52b69a 100%);
  color: #fff; padding: 28px 24px;
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -15px rgba(0,15,57,.5);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  max-width: 360px; margin-left: auto;
}
.mag-cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 80% 20%, rgba(181,228,140,.25) 0, transparent 60%);
}
.mag-head { display: flex; align-items: baseline; gap: 8px; position: relative; }
.mag-head strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--leaf-200); }
.mag-head span { font-size: 1rem; font-weight: 700; color: #fff; }
.mag-number { font-size: .82rem; opacity: .8; letter-spacing: .1em; margin-top: 6px; }
.mag-date { font-size: .82rem; opacity: .7; margin-top: 2px; }
.mag-main { flex: 1; margin-top: 40px; position: relative; }
.mag-main h3 { font-size: 1.6rem; line-height: 1.15; color: #fff; margin: 0 0 10px; }
.mag-sub { font-size: .88rem; color: var(--leaf-200); margin: 0; }
.mag-foot { border-top: 1px solid rgba(255,255,255,.15); padding-top: 10px; }
.mag-foot small { color: rgba(255,255,255,.7); font-size: .78rem; }

.pb-year-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 24px; }
.pb-year-filter .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pb-mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pb-mag {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.pb-mag:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pb-mag-cover {
  aspect-ratio: 3/4;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 18px;
  border-radius: var(--radius-sm);
  color: #fff;
  box-shadow: var(--shadow);
}
.pb-mag-cover span { background: rgba(255,255,255,.95); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: .78rem; }
.pb-mag h3 { font-size: 1rem; margin: 6px 0 2px; }
.pb-mag p { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.pb-mag-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pb-mag-links a {
  padding: 4px 10px; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-weight: 600; font-size: .78rem;
  transition: background .15s;
}
.pb-mag-links a:hover { background: var(--leaf-100); }

.pb-reports { display: flex; flex-direction: column; gap: 14px; }
.pb-report {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px;
  display: grid; grid-template-columns: 54px 1fr; gap: 20px;
}
.pb-icon { font-size: 2.4rem; line-height: 1; }
.pb-report h3 { font-size: 1.1rem; margin: 0 0 4px; }
.pb-report p { margin: 0 0 6px; color: var(--ink-soft); font-size: .92rem; }
.pb-meta { color: var(--muted); font-size: .82rem !important; }
.pb-report a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); font-size: .9rem; display: inline-block; margin-top: 4px; }

.pb-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pb-guide {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
  transition: transform .15s, border-color .15s;
}
.pb-guide:hover { transform: translateY(-2px); border-color: var(--ink); }
.pb-guide span { font-size: 2rem; display: block; margin-bottom: 10px; }
.pb-guide h3 { font-size: 1rem; margin: 0 0 4px; }
.pb-guide p { color: var(--muted); font-size: .82rem; margin: 0; }

.pb-subscribe-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }

/* ---------- Presse ---------- */
.pr-contact { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.pr-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pr-contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
}
.pr-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: var(--ink);
}
.pr-contact-card h3 { margin: 4px 0; font-size: 1.15rem; }
.pr-contact-card p { font-size: .92rem; margin: 0 0 8px; }

.pr-comm-list { display: flex; flex-direction: column; gap: 14px; }
.pr-comm {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px;
  border-left: 4px solid var(--leaf-400);
}
.pr-comm time { color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pr-comm h3 { font-size: 1.15rem; margin: 6px 0 8px; line-height: 1.35; }
.pr-comm p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 10px; }
.pr-comm-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pr-comm-links a { font-size: .88rem; }

.pr-dossiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pr-dossier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.pr-dossier:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pr-dossier-img { aspect-ratio: 21/9; }
.pr-dossier-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.pr-dossier-body h3 { font-size: 1.2rem; margin: 4px 0; }

.pr-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pr-photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  margin: 0; position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .15s;
}
.pr-photo:hover { transform: scale(1.02); }
.pr-photo figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,15,57,.88));
  color: #fff; padding: 20px 14px 12px;
  font-size: .82rem; font-weight: 500;
}

.pr-resources-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.pr-fast-facts {
  background: var(--ink); color: #fff;
  border-radius: var(--radius); padding: 28px;
}
.pr-fast-facts h3 { color: var(--leaf-200); margin: 0 0 16px; }
.pr-facts { display: flex; flex-direction: column; gap: 10px; }
.pr-facts > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}
.pr-facts dt { color: rgba(255,255,255,.75); font-size: .88rem; margin: 0; }
.pr-facts dd { margin: 0; font-weight: 700; color: var(--leaf-200); }

/* ---------- Environnement ---------- */
.env-hero {
  background: linear-gradient(160deg, #003a24 0%, #0a2e1a 60%, #52b69a 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative; overflow: hidden;
}
.env-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 70% 30%, rgba(181,228,140,.25) 0, transparent 60%);
  pointer-events: none;
}
.env-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0; }
.env-hero .badge { background: var(--leaf-200); color: var(--ink); }
.env-hero .hero-actions { position: relative; z-index: 2; }

.env-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.env-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.env-axe {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  transition: transform .15s, box-shadow .15s;
}
.env-axe:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.env-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.env-axe h3 { font-size: 1.1rem; margin: 0 0 8px; }
.env-axe p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 14px; }
.env-progress { margin-top: auto; }
.env-progress .progress { margin-bottom: 6px; }

.env-biodiv { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.env-wild {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.env-wild h3 { font-size: 1.05rem; margin: 0 0 12px; }
.env-wild-list { display: flex; flex-direction: column; gap: 6px; }
.env-wild-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
  font-size: .92rem;
}
.env-wild-list li:last-child { border: 0; }
.env-wild-list small { color: var(--muted); font-size: .78rem; }

.env-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.env-action {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
  transition: transform .15s, border-color .15s;
}
.env-action:hover { transform: translateY(-2px); border-color: var(--leaf-400); }
.env-action span { font-size: 2rem; display: block; margin-bottom: 8px; }
.env-action h3 { font-size: 1rem; margin: 0 0 4px; }
.env-action p { color: var(--muted); font-size: .82rem; margin: 0; }

.env-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.env-live-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.env-live-val {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-bottom: 10px;
}
.env-live-val b { font-size: 2.4rem; font-weight: 800; color: var(--leaf-500); line-height: 1; }
.env-live-val small { font-size: .88rem; color: var(--muted); font-weight: 600; }
.env-live-card h3 { font-size: 1rem; margin: 0 0 4px; }
.env-live-card p { color: var(--muted); font-size: .82rem; margin: 0 0 10px; }
.env-live-card a { display: inline-block; }

/* ---------- FAQ ---------- */
.faq-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  max-width: 520px; margin-top: 18px;
  box-shadow: var(--shadow);
}
.faq-search svg { color: var(--ink); }
.faq-search input {
  flex: 1; border: 0; background: transparent;
  padding: 12px 0; font: inherit;
}
.faq-search input:focus { outline: none; }

.faq-layout { padding: 40px 0 80px; }
.faq-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.faq-nav {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  position: sticky; top: 100px;
}
.faq-nav h2 { font-size: 1rem; margin: 0 0 12px; }
.faq-nav ul { display: flex; flex-direction: column; gap: 4px; }
.faq-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--ink);
  transition: background .15s;
}
.faq-nav a:hover { background: #fff; }
.faq-nav a.on { background: var(--ink); color: #fff; }

.faq-content { }
.faq-content section { margin-bottom: 36px; scroll-margin-top: 100px; }
.faq-content details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 22px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.faq-content details[open] { border-color: var(--ink); box-shadow: var(--shadow); }
.faq-content summary {
  font-weight: 600; cursor: pointer; list-style: none;
  position: relative; padding-right: 32px;
}
.faq-content summary::-webkit-details-marker { display: none; }
.faq-content summary::after {
  content: "+"; position: absolute; right: 0; top: 0;
  font-size: 1.4rem; font-weight: 400; color: var(--muted);
  transition: transform .2s;
}
.faq-content details[open] summary::after { content: "−"; color: var(--ink); }
.faq-content p { margin: 14px 0 0; color: var(--ink-soft); line-height: 1.6; }

.faq-cta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.faq-cta-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center;
  transition: border-color .15s, transform .15s;
}
.faq-cta-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.faq-cta-card span { font-size: 2rem; display: block; margin-bottom: 8px; }
.faq-cta-card h3 { font-size: 1rem; margin: 0 0 4px; }
.faq-cta-card p { color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Offline ---------- */
.off-hero {
  background: linear-gradient(160deg, var(--cream), #fff);
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.off-hero h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 16px 0; }
.off-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: #fff3cd; color: #856404;
  font-weight: 700; font-size: .88rem;
}
.off-status.online { background: var(--leaf-100); color: var(--leaf-500); }
.off-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e6c556;
  box-shadow: 0 0 0 4px rgba(230,197,86,.25);
  animation: pulse 1.8s ease-in-out infinite;
}
.off-status.online .off-dot { background: var(--leaf-500); box-shadow: 0 0 0 4px rgba(58,155,103,.25); }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .7; } }

.off-info { padding: 60px 0; }
.off-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.off-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  transition: transform .15s, border-color .15s;
}
.off-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.off-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.off-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.off-card p { color: var(--muted); font-size: .88rem; margin: 0 0 8px; }

.off-urgences {
  background: linear-gradient(160deg, #fff, var(--leaf-50));
  border: 2px solid var(--leaf-200);
  border-radius: var(--radius); padding: 28px;
}
.off-urgences h3 { margin: 0 0 16px; color: var(--ink); }
.off-urg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.off-urg {
  background: #fff; border: 1.5px solid var(--danger); border-radius: var(--radius-sm);
  padding: 16px; text-align: center;
  color: var(--ink);
  transition: transform .15s;
}
.off-urg:hover { transform: translateY(-2px); }
.off-urg b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--danger); line-height: 1; }
.off-urg span { font-size: .78rem; color: var(--muted); display: block; margin-top: 4px; }

.off-tip { padding: 60px 0 80px; background: var(--cream); }
.off-tip-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.off-tip-grid ol.bullets { padding-left: 22px; counter-reset: step; list-style: none; }
.off-tip-grid ol.bullets li::before {
  content: counter(step); counter-increment: step;
  width: 22px; height: 22px; top: 4px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .8rem; font-weight: 700;
}
.off-phone {
  display: flex; align-items: center; justify-content: center;
}
.off-phone-frame {
  width: 220px; height: 440px; border-radius: 32px;
  background: #1a1a1a;
  padding: 14px 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
  position: relative;
}
.off-phone-frame::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 18px; background: #000; border-radius: 0 0 12px 12px;
}
.off-phone-screen {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  height: 100%;
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
}
.off-phone-icon {
  width: 80px; height: 80px;
  background: #fff; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.off-phone-screen b { font-size: .92rem; font-weight: 700; color: var(--leaf-200); }
.off-phone-screen small { font-size: .72rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   Pages : FALC, Wizard démarche, Salle détail, PLU, Kiosque, Cookies
   ========================================================================== */

/* ---------- FALC ---------- */
.falc {
  font-family: "Atkinson Hyperlegible", "Verdana", var(--font-sans);
}
.falc-topbar { padding: 14px 0; background: var(--cream); border-bottom: 2px solid var(--ink); }
.falc-toggle { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.falc-hero { padding: 40px 0; background: var(--leaf-50); border-bottom: 2px solid var(--leaf-400); }
.falc-hero h1 { font-size: 3rem; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 20px; }
.falc-intro { font-size: 1.6rem; text-align: center; color: var(--ink); line-height: 1.5; max-width: 720px; margin: 0 auto 32px; }
.falc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; }
.falc-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 22px 16px;
  font-size: 1.15rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-decoration: none;
  text-align: center;
}
.falc-btn:hover { background: var(--honey); transform: translateY(-2px); }
.falc-emoji { font-size: 2.8rem; line-height: 1; }
.falc-emoji.big { font-size: 3.2rem; }

.falc-block { padding: 56px 0; }
.falc-block.alt { background: var(--cream); }
.falc-block h2 {
  font-size: 2.4rem; font-weight: 800; color: var(--ink);
  margin: 0 0 14px;
  text-align: center;
}
.falc-block p { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.falc-big { font-size: 1.4rem; line-height: 1.6; }
.falc-block .wrap { max-width: 860px; }

.falc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
.falc-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 24px;
  display: flex; align-items: center; gap: 20px;
  font-family: inherit;
  color: var(--ink); text-decoration: none;
  transition: background .15s, transform .15s;
}
.falc-card:hover { background: var(--leaf-50); transform: translateY(-2px); }
.falc-picto {
  width: 80px; height: 80px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; flex-shrink: 0;
}
.falc-picto.big { width: 110px; height: 110px; font-size: 4rem; }
.falc-card h3 { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.falc-card p { font-size: 1.1rem; margin: 0; color: var(--ink); }

.falc-address {
  display: flex; align-items: center; gap: 28px;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 32px;
}

.falc-hours {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: 20px;
}
.falc-day {
  background: #fff; border: 3px solid var(--line); border-radius: 12px;
  padding: 16px 10px; text-align: center;
}
.falc-day.open { border-color: var(--leaf-400); background: var(--leaf-50); }
.falc-day.closed { border-color: var(--line); color: var(--muted); background: var(--cream); }
.falc-day-name { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }
.falc-day-hours { font-size: .92rem; font-weight: 600; line-height: 1.3; }

.falc-tip {
  background: var(--honey); border: 3px solid var(--ink); border-radius: 18px;
  padding: 28px; display: flex; align-items: center; gap: 20px;
  font-size: 1.3rem; line-height: 1.6; margin-top: 24px;
}

.falc-urgent { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.falc-urg {
  display: flex; align-items: center; gap: 24px;
  background: #fff; border: 3px solid var(--danger); border-radius: 18px;
  padding: 24px 32px; font-family: inherit; color: var(--ink); text-decoration: none;
  transition: background .15s, transform .15s;
}
.falc-urg:hover { background: #fee; transform: translateY(-2px); }
.falc-urg-num { font-size: 4rem; font-weight: 800; color: var(--danger); line-height: 1; min-width: 100px; }
.falc-urg-label { font-size: 1.25rem; line-height: 1.5; }

.falc-help { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; list-style: none; padding: 0; }
.falc-help li {
  background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 24px 28px;
  display: flex; align-items: center; gap: 24px;
}
.falc-help b { font-size: 1.4rem; display: block; margin-bottom: 8px; }
.falc-help p { font-size: 1.15rem; margin: 0; }
.falc-help a { color: var(--ink); border-bottom: 2px solid var(--leaf-400); font-weight: 700; }

.falc-about { background: var(--leaf-50); border: 3px solid var(--leaf-400); border-radius: 18px; padding: 40px; }
.falc-rules { font-size: 1.3rem; line-height: 1.8; padding: 10px 0 10px 20px; }
.falc-rules li { margin-bottom: 8px; list-style: none; }
.falc-link { background: var(--ink); color: #fff !important; padding: 12px 24px; border-radius: 999px; display: inline-block; text-decoration: none !important; font-weight: 700; font-size: 1.2rem; }

/* ---------- Wizard démarche ---------- */
.wz-top { padding: 24px 0 0; background: var(--cream); }
.wz-top h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 10px 0 12px; }
.wz-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .88rem; padding-bottom: 20px; }
.wz-meta span { display: inline-flex; align-items: center; }

.wz-stepper { padding: 24px 0 18px; background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.wz-nav { display: flex; gap: 4px; padding: 0; list-style: none; overflow-x: auto; }
.wz-nav li {
  flex: 1; min-width: 120px; text-align: center;
  padding: 10px 8px; border-radius: 8px;
  font-size: .88rem;
  color: var(--muted); cursor: pointer;
  transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.wz-nav li b {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
.wz-nav li.done b { background: var(--leaf-400); border-color: var(--leaf-400); color: #fff; }
.wz-nav li.on { color: var(--ink); }
.wz-nav li.on b { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.1); }
.wz-progress { height: 4px; background: var(--line); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.wz-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf-400), var(--teal)); transition: width .3s ease; }

.wz-body { padding: 32px 0 60px; }
.wz-form { max-width: 820px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }

.wz-step { animation: wzIn .25s ease; }
@keyframes wzIn { from { opacity: 0; transform: translateY(10px); } }

.wz-fc-box { background: var(--leaf-50); border: 1.5px solid var(--leaf-200); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; }
.wz-fc-inner b { color: var(--ink); }

.wz-fields { display: flex; flex-direction: column; gap: 14px; }
.wz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-field { display: block; }
.wz-field > span { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.wz-field input, .wz-field select, .wz-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.wz-field input:focus, .wz-field select:focus, .wz-field textarea:focus { outline: none; border-color: var(--ink); }
.wz-field small { display: block; margin-top: 4px; font-size: .82rem; }

.wz-fieldset { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; margin-top: 10px; }
.wz-fieldset legend { font-weight: 700; font-size: .95rem; padding: 0 8px; }
.wz-fieldset.wz-final { background: var(--leaf-50); border-color: var(--leaf-200); }

.wz-radio-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.wz-radio-group label {
  padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: .92rem; font-weight: 600;
  transition: all .15s;
}
.wz-radio-group label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.wz-radio-group input { position: absolute; opacity: 0; pointer-events: none; }

.wz-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: .95rem; cursor: pointer; }
.wz-check input { margin-top: 4px; flex-shrink: 0; }

.wz-sect { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.wz-sect-info { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.wz-sect-info > span { font-size: 2rem; line-height: 1; }
.wz-sect-info b { display: block; margin-bottom: 4px; }
.wz-sect-info p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.wz-files { display: flex; flex-direction: column; gap: 14px; }
.wz-file { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.wz-file-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; margin-bottom: 12px; }
.wz-file-icon { font-size: 2rem; line-height: 1; }
.wz-file-head b { display: block; font-size: 1rem; }
.wz-file-head small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.wz-file-status { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.wz-file-status.ok { background: var(--leaf-100); color: var(--leaf-500); }
.wz-file-status.pending { background: #fff3cd; color: #856404; }

.wz-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px;
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wz-dropzone:hover { border-color: var(--ink); background: var(--leaf-50); }
.wz-drop-icon { font-size: 2rem; }
.wz-dropzone b { font-size: .95rem; }
.wz-dropzone small { color: var(--muted); font-size: .82rem; }

.wz-file-preview { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--leaf-50); border-radius: var(--radius-sm); font-size: .9rem; }
.wz-file-preview small { color: var(--muted); font-size: .82rem; }
.wz-file-rm { background: transparent; color: var(--danger); font-size: .85rem; font-weight: 600; cursor: pointer; }

.wz-recap { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.wz-recap-sect { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.wz-recap-sect h3 { margin: 0 0 12px; font-size: 1.05rem; }
.wz-recap-sect dl { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.wz-recap-sect dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.wz-recap-sect dl > div:last-child { border: 0; }
.wz-recap-sect dt { color: var(--muted); font-size: .88rem; margin: 0; }
.wz-recap-sect dd { margin: 0; font-weight: 600; font-size: .92rem; text-align: right; }
.wz-recap-sect dd.warn { color: #856404; }

.wz-actions {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  max-width: 820px; margin: 24px auto 0;
  padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.wz-save { flex: 1; text-align: center; }

.wz-success {
  background: linear-gradient(160deg, var(--leaf-100), #fff);
  border: 2px solid var(--leaf-400); border-radius: var(--radius);
  padding: 48px 32px; text-align: center; max-width: 640px; margin: 40px auto;
}
.wz-success > span { font-size: 4rem; display: block; margin-bottom: 14px; }
.wz-success h2 { color: var(--leaf-500); margin: 0 0 14px; }

/* ---------- Salle détail ---------- */
.sd-hero { padding: 32px 0 24px; background: var(--cream); border-bottom: 1px solid var(--line); }
.sd-hero h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 10px 0 14px; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .9rem; font-weight: 500; }

.sd-gallery-wrap { padding: 24px 0; }
.sd-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; height: 420px; }
.sd-main-img {
  border-radius: var(--radius); position: relative;
  background-size: cover; background-position: center;
}
.sd-360 {
  position: absolute; bottom: 20px; right: 20px;
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: .9rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s;
}
.sd-360:hover { transform: scale(1.05); }
.sd-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 12px; }
.sd-thumb {
  border-radius: var(--radius-sm); cursor: pointer;
  background-size: cover; background-position: center;
  transition: transform .15s;
}
.sd-thumb:hover { transform: scale(1.03); }
.sd-thumb.more {
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem;
}

.sd-layout { padding: 0 0 80px; }
.sd-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }

.sd-main { display: flex; flex-direction: column; gap: 32px; }
.sd-section { background: #fff; padding: 0; }
.sd-section h2 { font-size: 1.4rem; margin: 0 0 16px; }

.sd-equip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-equip > div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.sd-equip > div > span { font-size: 1.4rem; grid-row: span 2; align-self: center; }
.sd-equip b { font-size: .95rem; display: block; }
.sd-equip small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }

.sd-floorplan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.sd-svg { width: 100%; height: auto; max-height: 340px; }

.sd-review-sum {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.sd-rating { text-align: center; }
.sd-stars { color: #e6c556; font-size: 1.4rem; letter-spacing: 2px; }
.sd-rating b { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; margin: 6px 0 4px; }
.sd-rating small { color: var(--muted); font-size: .85rem; }
.sd-breakdown { display: flex; flex-direction: column; gap: 8px; }
.sd-breakdown > div { display: grid; grid-template-columns: 160px 1fr 50px; gap: 12px; align-items: center; font-size: .88rem; }
.sd-breakdown b { color: var(--leaf-500); text-align: right; }
.sd-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.sd-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf-400), var(--teal)); }

.sd-review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 10px;
}
.sd-review header { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; }
.sd-review b { font-size: .95rem; }
.sd-review header span { color: #e6c556; font-size: .95rem; }
.sd-review time { color: var(--muted); font-size: .82rem; margin-left: auto; }
.sd-review p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.sd-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.sd-booking, .sd-map-box, .sd-similar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.sd-booking h3 { margin: 0 0 16px; }
.sd-price-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.sd-price-grid > div {
  background: var(--cream); border-radius: var(--radius-sm); padding: 12px 8px;
  text-align: center;
}
.sd-price-grid b { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; display: block; margin-bottom: 4px; letter-spacing: .04em; }
.sd-price-grid span { font-weight: 700; font-size: .88rem; color: var(--ink); }
.sd-price-grid .sd-highlight { background: var(--leaf-100); border: 1px solid var(--leaf-400); }
.sd-price-grid .sd-highlight span { color: var(--leaf-500); }

.sd-avail { background: var(--cream); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.sd-avail .cal-grid { gap: 2px; }
.sd-avail .cal-cell { border-width: 1px; border-radius: 6px; font-size: .82rem; }

.sd-similar-item {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--radius-sm);
  transition: background .15s;
}
.sd-similar-item:hover { background: var(--cream); }
.sd-similar-item > div:first-child { height: 48px; border-radius: 8px; }
.sd-similar-item b { display: block; font-size: .92rem; }
.sd-similar-item small { color: var(--muted); font-size: .82rem; }

/* ---------- PLU ---------- */
.plu-search { max-width: 720px; margin-top: 20px; }

.plu-map-section { padding: 40px 0; }
.plu-map-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.plu-legend {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  position: sticky; top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.plu-legend h2 { font-size: 1.05rem; margin: 0 0 12px; }
.plu-legend h3 { font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.plu-legend h3:first-of-type + ul { margin-top: 0; }
.plu-zones { display: flex; flex-direction: column; gap: 6px; }
.plu-zones li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.plu-zones li:last-child { border: 0; }
.plu-zones b { display: block; }
.plu-zones small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.plu-chip {
  display: inline-block; padding: 4px 0;
  text-align: center; font-weight: 800; font-size: .82rem;
  border-radius: 6px;
  color: var(--ink);
}
.plu-chip.big { display: inline-block; padding: 10px 16px; font-size: 1.1rem; min-width: 60px; }

.plu-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .88rem; cursor: pointer; border-bottom: 1px dashed var(--line); }
.plu-toggle:last-child { border: 0; }
.plu-toggle input { accent-color: var(--ink); }

.plu-map {
  position: relative;
  background: #f7f9f2;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  min-height: 400px;
}
.plu-svg { width: 100%; height: auto; display: block; }
.plu-map-actions {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.plu-ctrl {
  width: 36px; height: 36px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
.plu-ctrl:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.plu-map-note {
  position: absolute; bottom: 14px; left: 14px; right: 60px;
  background: rgba(255,255,255,.95); padding: 8px 14px; border-radius: 999px;
  font-size: .85rem; color: var(--ink-soft);
}

.plu-zone-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plu-zone-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px;
}
.plu-zone-card header { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.plu-zone-card header h3 { margin: 0 0 2px; font-size: 1.1rem; }
.plu-zone-card header small { color: var(--muted); font-size: .85rem; }
.plu-zone-rules { display: flex; flex-direction: column; gap: 8px; }
.plu-zone-rules > div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.plu-zone-rules > div:last-child { border: 0; }
.plu-zone-rules dt { color: var(--muted); font-weight: 600; margin: 0; }
.plu-zone-rules dd { margin: 0; font-weight: 500; }

/* ---------- Kiosque ---------- */
.kiosk {
  background: linear-gradient(160deg, #f7f9f2, #eef3e6);
  min-height: 100vh;
  margin: 0;
}
.kiosk-app {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-rows: auto auto 1fr auto auto;
  min-height: 100vh;
  padding: 24px;
  gap: 18px;
}
.kiosk-top {
  display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center;
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 18px 28px;
}
.kiosk-brand { display: flex; align-items: center; gap: 16px; }
.kiosk-brand strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.kiosk-brand small { display: block; color: var(--muted); font-size: .88rem; }
.kiosk-time { text-align: right; }
.kiosk-time b { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.kiosk-time small { color: var(--muted); font-size: .88rem; text-transform: capitalize; }
.kiosk-actions { display: flex; gap: 10px; }
.kiosk-lang, .kiosk-a11y {
  background: var(--cream); border: 2px solid var(--line); border-radius: 12px;
  padding: 12px 16px; font-weight: 700; cursor: pointer;
  transition: border-color .15s;
}
.kiosk-a11y { font-size: 1.5rem; padding: 10px 16px; }
.kiosk-lang:hover, .kiosk-a11y:hover { border-color: var(--ink); }

.kiosk-hero { text-align: center; padding: 30px 0; }
.kiosk-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 10px; color: var(--ink); }
.kiosk-hero p { color: var(--muted); font-size: 1.1rem; margin: 0; }

.kiosk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kiosk-tile {
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 28px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  transition: all .15s;
  min-height: 160px;
  position: relative;
}
.kiosk-tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kiosk-icon { font-size: 3rem; line-height: 1; margin-bottom: 4px; }
.kiosk-tile b { font-size: 1.2rem; color: var(--ink); font-weight: 700; }
.kiosk-tile small { color: var(--muted); font-size: .88rem; line-height: 1.3; }
.kiosk-tile.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.kiosk-tile.primary b, .kiosk-tile.primary small { color: #fff; }
.kiosk-tile.accent { background: linear-gradient(160deg, var(--leaf-200), var(--teal)); border-color: var(--leaf-400); }
.kiosk-tile.accent b { color: var(--ink); }
.kiosk-hint {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.25); padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}

.kiosk-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.kiosk-wait, .kiosk-alert, .kiosk-emergency {
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 18px 22px;
}
.kiosk-wait b, .kiosk-alert b, .kiosk-emergency b { display: block; font-size: 1rem; margin-bottom: 12px; }
.kiosk-queue { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.kq-box { background: var(--cream); border-radius: 10px; padding: 10px 8px; text-align: center; }
.kq-box span { display: block; font-size: .78rem; color: var(--muted); }
.kq-box b { font-size: 1.8rem; font-weight: 800; color: var(--ink); display: block; margin: 0; line-height: 1.2; }

.kiosk-alert { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: #fff3cd; border-color: #e6c556; }
.kiosk-dot { width: 12px; height: 12px; border-radius: 50%; background: #e6c556; margin-top: 6px; box-shadow: 0 0 0 4px rgba(230,197,86,.3); }
.kiosk-alert p { margin: 4px 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }

.kiosk-emergency b { color: var(--danger); }
.kiosk-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kiosk-numbers span { background: #fff; border: 1px solid var(--danger); border-radius: 8px; padding: 8px; text-align: center; font-weight: 700; font-size: .85rem; color: var(--danger); }

.kiosk-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: rgba(0,15,57,.04);
  border-radius: 12px;
  font-size: .85rem; color: var(--muted);
}
.kiosk-back { background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 700; cursor: pointer; }

/* ---------- Maintenance ---------- */
.maint-eta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 640px; margin: 32px auto;
}
.maint-eta > div {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; text-align: center;
}
.maint-eta b { display: block; font-size: .75rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; margin-bottom: 6px; font-weight: 700; }
.maint-eta span { font-weight: 600; font-size: 1rem; }
.err-ref {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-top: 28px;
  text-align: left;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.err-ref b { font-weight: 700; }
.err-ref code { background: #fff; padding: 6px 12px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: .92rem; color: var(--ink); border: 1px solid var(--line); }
.err-ref button { background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.err-ref p { width: 100%; margin: 6px 0 0; }

/* ---------- Cookies ---------- */
.ck-panel { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.ck-manage {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.ck-manage h2 { margin-top: 0; font-size: 1.3rem; }
.ck-row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.ck-row:first-of-type { border-top: 0; margin-top: 12px; }
.ck-row b { display: block; font-size: 1rem; margin-bottom: 4px; }
.ck-row small { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.ck-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ==========================================================================
   Pages : Dashboards, Tribune, Galerie, Vidéos, Sondages, Agents
   ========================================================================== */

/* ---------- Dashboards ---------- */
.tb-hero {
  background: linear-gradient(160deg, #000f39 0%, #0a2347 60%, #2c5f4a 100%);
  color: #fff; padding: 50px 0 60px;
  position: relative; overflow: hidden;
}
.tb-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 80% 20%, rgba(181,228,140,.2) 0, transparent 60%);
  pointer-events: none;
}
.tb-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.tb-hero .badge { background: var(--leaf-200); color: var(--ink); position: relative; z-index: 2; }
.tb-switcher {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px;
  position: relative; z-index: 2;
}
.tb-switch {
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1.5px solid rgba(255,255,255,.2);
  font-weight: 600; font-size: .92rem;
  transition: all .15s;
}
.tb-switch:hover { border-color: var(--leaf-200); }
.tb-switch.on { background: var(--leaf-200); color: var(--ink); border-color: var(--leaf-200); }

.tb-kpis { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.tb-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tb-kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
  transition: transform .15s, border-color .15s;
}
.tb-kpi:hover { transform: translateY(-2px); border-color: var(--ink); }
.tb-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tb-kpi-head span { font-size: 1.4rem; }
.tb-kpi-head small { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tb-kpi b { display: block; font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1; }
.tb-kpi-trend { font-size: .82rem; color: var(--muted); font-weight: 600; display: block; margin-top: 6px; }
.tb-kpi-trend.up { color: var(--leaf-500); }

.tb-block { padding: 60px 0; }
.tb-block.alt { background: var(--cream); }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tb-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px;
}
.tb-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.tb-card-head h2 { font-size: 1.15rem; margin: 0; }
.tb-card-actions { display: flex; gap: 6px; }
.tb-ctrl {
  background: var(--cream); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-size: .82rem; cursor: pointer;
}
.tb-ctrl:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.tb-chart { margin-top: 18px; }
.tb-pie-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.tb-pie-wrap .pie { width: 180px; height: 180px; border-radius: 50%; box-shadow: inset 0 0 0 8px #fff; }
.tb-legend { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; margin: 0; padding: 0; list-style: none; }
.tb-legend li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.tb-legend li:last-child { border: 0; }
.tb-legend .dot { width: 12px; height: 12px; border-radius: 3px; }
.tb-legend b { color: var(--ink); font-weight: 700; }

.tb-svg { width: 100%; height: auto; max-height: 220px; }

.tb-aqi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin-top: 14px; }
.tb-aqi-gauge svg { width: 100%; height: auto; max-height: 160px; }
.tb-aqi-scale { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.tb-aqi-scale > div { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; padding: 4px 0; font-size: .88rem; }
.tb-aqi-scale dt { width: 14px; height: 14px; border-radius: 3px; margin: 0; }
.tb-aqi-scale dd { margin: 0; color: var(--ink-soft); }
.tb-aqi-scale .current dd b { color: var(--ink); }

.tb-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.tb-bars li { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; font-size: .88rem; }
.tb-bar-lab { color: var(--ink-soft); font-weight: 500; }
.tb-bar { background: var(--line); border-radius: 4px; height: 24px; overflow: hidden; position: relative; }
.tb-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--leaf-400), var(--teal));
  color: #fff; font-weight: 700; font-size: .78rem;
  padding: 0 10px; line-height: 24px;
  text-align: right;
  transition: width .8s ease;
}

.tb-perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.tb-perf {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tb-perf-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.tb-perf-val { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.tb-perf-val.big { font-size: 3.2rem; color: var(--leaf-500); }
.tb-perf small { color: var(--muted); font-size: .82rem; }
.tb-perf-spark svg { width: 100%; max-width: 120px; height: 30px; }
.tb-perf-circle {
  --p: 0;
  width: 80px; height: 80px; border-radius: 50%;
  background: conic-gradient(var(--leaf-400) calc(var(--p) * 1%), var(--line) 0);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0;
}
.tb-perf-circle::before {
  content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%;
}
.tb-perf-circle span { position: relative; font-weight: 800; font-size: 1.3rem; }

.tb-datasets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tb-dataset {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  transition: border-color .15s, transform .15s;
}
.tb-dataset:hover { border-color: var(--ink); transform: translateY(-2px); }
.tb-dataset > span { font-size: 2rem; line-height: 1; }
.tb-dataset b { display: block; font-size: .95rem; margin-bottom: 4px; }
.tb-dataset small { color: var(--muted); font-size: .8rem; line-height: 1.3; }

.tb-api-box {
  margin-top: 28px;
  background: var(--ink); color: #fff;
  border-radius: var(--radius); padding: 28px 32px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.tb-api-box > span { font-size: 2.8rem; }
.tb-api-box h3 { color: var(--leaf-200); margin: 0 0 6px; }
.tb-api-box p { color: rgba(255,255,255,.85); margin: 0 0 8px; font-size: .92rem; }
.tb-api-box code { background: rgba(255,255,255,.1); padding: 6px 12px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: .88rem; color: var(--leaf-200); }
.tb-api-box .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- Tribune ---------- */
.tr-months { padding: 24px 0 0; background: var(--cream); }
.tr-month-nav { padding-bottom: 16px; overflow-x: auto; }

.tr-grid { display: flex; flex-direction: column; gap: 20px; }
.tr-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px;
  border-left: 6px solid var(--line);
}
.tr-card.majorite { border-left-color: var(--ink); background: linear-gradient(180deg, #f8faef, #fff 80%); }
.tr-card.opposition { border-left-color: #c85420; }
.tr-card.opposition:nth-of-type(3) { border-left-color: #c50033; }

.tr-head { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tr-logo {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.tr-head h3 { margin: 4px 0; font-size: 1.2rem; }
.tr-head small { font-size: .85rem; }

.tr-content h4 { font-size: 1.1rem; font-weight: 700; margin: 0 0 14px; color: var(--ink); }
.tr-content p { line-height: 1.65; margin: 0 0 12px; color: var(--ink-soft); font-size: .95rem; }
.tr-content em { color: var(--ink); font-style: normal; font-weight: 600; }

.tr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.tr-words { font-family: ui-monospace, monospace; }

.tr-rules-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.tr-rules-box {
  background: var(--leaf-50); border: 1.5px solid var(--leaf-200); border-radius: var(--radius);
  padding: 28px;
}
.tr-rules-box h3 { margin: 0 0 14px; }
.tr-rules-box p { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.tr-rules-box i { color: var(--ink-soft); }

/* ---------- Galerie ---------- */
.gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gl-album {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.gl-album:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gl-cover {
  aspect-ratio: 4/3;
  position: relative; cursor: pointer;
  display: flex; align-items: flex-end; padding: 14px;
}
.gl-cover::after {
  content: "🔍"; position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.8); transition: all .2s;
}
.gl-cover:hover::after { opacity: 1; transform: scale(1); }
.gl-count { background: rgba(0,15,57,.92); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.gl-body { padding: 18px 22px; }
.gl-body time { color: var(--muted); font-size: .85rem; font-weight: 600; }
.gl-body h3 { font-size: 1.05rem; margin: 6px 0; }
.gl-body p { color: var(--ink-soft); font-size: .9rem; margin: 0; }

.gl-contrib {
  display: grid; grid-template-columns: 2fr 1fr; gap: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
  align-items: center;
}
.gl-contrib-rules h3 { margin: 0 0 12px; }

/* Lightbox */
.gl-lightbox {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,15,57,.96);
  display: none; align-items: center; justify-content: center;
}
.gl-lightbox.open { display: flex; }
.gl-lb-close, .gl-lb-prev, .gl-lb-next, .gl-lb-dl, .gl-lb-share {
  position: absolute; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  font-size: 1.6rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gl-lb-close { top: 24px; right: 24px; }
.gl-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.gl-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.gl-lb-close:hover, .gl-lb-prev:hover, .gl-lb-next:hover { background: rgba(255,255,255,.25); }

.gl-lb-fig {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 90vw; max-height: 82vh;
  margin: 0;
}
.gl-lb-img {
  width: 78vw; max-width: 1200px;
  height: 72vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.gl-lb-fig figcaption { color: #fff; font-size: 1rem; font-weight: 500; text-align: center; max-width: 600px; }

.gl-lb-meta {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
  background: rgba(0,0,0,.6); border-radius: 999px;
  padding: 8px 20px;
  color: #fff; font-size: .88rem; font-weight: 600;
}
.gl-lb-meta button {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  font-size: .88rem;
  position: static; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gl-lb-meta button:hover { background: rgba(255,255,255,.25); }

/* ---------- Vidéothèque ---------- */
.vd-featured { padding: 40px 0; background: linear-gradient(180deg, var(--cream), #fff); border-bottom: 1px solid var(--line); }
.vd-hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.vd-player {
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative; cursor: pointer;
}
.vd-player-bg {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s;
}
.vd-player:hover .vd-player-bg { transform: scale(1.02); }
.vd-play { background: transparent; border: 0; cursor: pointer; transition: transform .15s; }
.vd-play:hover { transform: scale(1.1); }
.vd-player-overlay {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px; display: flex; justify-content: space-between; align-items: center;
}
.vd-captions, .vd-duration {
  background: rgba(0,15,57,.85); color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: .78rem; font-weight: 700;
}
.vd-captions b { color: var(--leaf-200); margin-right: 4px; }

.vd-hero-body h2 { font-size: 1.6rem; margin: 10px 0 6px; }
.vd-a11y-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.vd-a11y-row span {
  background: var(--leaf-100); color: var(--ink);
  padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.vd-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.vd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vd-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.vd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vd-thumb {
  aspect-ratio: 16/9;
  position: relative;
  display: flex; align-items: flex-end; padding: 12px;
  cursor: pointer;
}
.vd-thumb .vd-duration { margin-left: auto; }
.vd-thumb .vd-a11y {
  background: var(--leaf-200); color: var(--ink);
  padding: 3px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  position: absolute; top: 10px; left: 10px;
}
.vd-play-s {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: transparent; border: 0; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.vd-thumb:hover .vd-play-s { opacity: 1; }

.vd-body { padding: 16px 20px; }
.vd-body h3 { font-size: 1rem; margin: 6px 0; }
.vd-meta { color: var(--muted); font-size: .82rem; margin: 0; }

.vd-live-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.vd-live-card {
  display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start;
  background: #fff; border: 1.5px solid var(--leaf-400); border-radius: var(--radius);
  padding: 22px 26px; margin-top: 14px;
}
.vd-live-date time {
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.vd-live-date b { font-size: 1.6rem; font-weight: 800; }
.vd-live-date span { font-size: .78rem; color: var(--leaf-200); margin-top: 4px; }
.vd-live-card b { font-size: 1.05rem; display: block; margin-bottom: 4px; }
.vd-live-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.vd-subscribe {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.vd-subscribe h3 { margin: 0 0 10px; }
.vd-channels { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.vd-channels li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.vd-channels li:last-child { border: 0; }
.vd-channels a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--leaf-300); }

/* ---------- Sondages ---------- */
.so-active { padding: 40px 0; }
.so-card.current {
  background: linear-gradient(160deg, #fff, var(--leaf-50));
  border: 2px solid var(--leaf-400); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-lg);
}
.so-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.so-status { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); font-weight: 600; }
.so-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf-500); }
.so-dot.live { animation: pulse 1.8s ease-in-out infinite; }
.so-card h3 { font-size: 1.4rem; margin: 6px 0 10px; }

.so-choices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin: 20px 0; }
.so-choice {
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 22px;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.so-choice:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.so-choice.voted { background: var(--leaf-100); border-color: var(--leaf-400); }
.so-choice b { font-size: 1.05rem; color: var(--ink); }
.so-choice span { font-weight: 500; color: var(--ink); font-size: .95rem; }
.so-choice small { color: var(--muted); font-size: .82rem; margin-top: auto; }

.so-results { background: #fff; border-radius: var(--radius-sm); padding: 22px; }
.so-results h4 { margin: 0 0 14px; font-size: 1rem; }
.so-bars { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.so-bars li { display: grid; grid-template-columns: 200px 1fr 60px; gap: 12px; align-items: center; }
.so-lab { font-size: .9rem; font-weight: 600; }
.so-bar { height: 24px; background: var(--line); border-radius: 6px; overflow: hidden; }
.so-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--leaf-400), var(--teal));
  color: #fff; font-size: .78rem; font-weight: 700;
  text-align: right; padding: 0 10px; line-height: 24px;
  transition: width 1s ease;
}
.so-bars b { text-align: right; color: var(--ink); font-weight: 700; }

.so-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .85rem; }

.so-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.so-past {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px;
}
.so-past .so-head { margin-bottom: 8px; }
.so-closed { font-size: .82rem; color: var(--muted); font-weight: 600; }
.so-past h3 { font-size: 1.1rem; margin: 6px 0 14px; }
.so-mini-bars { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.so-mini-bars li { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; font-size: .88rem; }
.so-mini-bars li.winner .so-lab, .so-mini-bars li.winner span { font-weight: 700; color: var(--leaf-500); }
.so-mini-bars li > span { color: var(--ink-soft); }

.so-how-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.so-stats-box {
  background: var(--ink); color: #fff;
  border-radius: var(--radius); padding: 28px;
}
.so-stats-box h3 { color: var(--leaf-200); margin: 0 0 14px; }
.so-stats-box dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.so-stats-box dl > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.2); }
.so-stats-box dt { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0; }
.so-stats-box dd { margin: 0; font-weight: 700; color: var(--leaf-200); font-size: 1.1rem; }

.so-proposer { max-width: 720px; }

/* ---------- Agents / Organigramme ---------- */
.ag-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.ag-grid.top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 20px; }
.ag-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.ag-card.big {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center;
}
.ag-card.big .ag-avatar { width: 96px; height: 96px; border-radius: 50%; font-size: 2rem; }
.ag-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: var(--ink);
  margin-bottom: 10px;
}
.ag-card h3 { font-size: 1.1rem; margin: 4px 0; }
.ag-card.big h3 { font-size: 1.4rem; }
.ag-role { color: var(--ink-soft); font-weight: 600; font-size: .95rem; margin: 0 0 8px; }

.ag-dirs { display: flex; flex-direction: column; gap: 12px; }
.ag-dir {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0;
  transition: border-color .15s;
}
.ag-dir[open] { border-color: var(--ink); box-shadow: var(--shadow); }
.ag-dir summary {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.ag-dir summary::-webkit-details-marker { display: none; }
.ag-dir-icon { font-size: 2.2rem; line-height: 1; }
.ag-dir summary b { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.ag-dir summary small { color: var(--muted); font-size: .88rem; }
.ag-dir-chev {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
  transition: transform .2s;
}
.ag-dir[open] .ag-dir-chev { transform: rotate(45deg); background: var(--ink); color: #fff; }

.ag-dir-body { padding: 0 26px 26px; border-top: 1px solid var(--line); }
.ag-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 20px;
}
.ag-service {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color .15s, transform .15s;
}
.ag-service:hover { border-color: var(--ink); transform: translateY(-2px); }
.ag-service b { display: block; font-size: .95rem; margin-bottom: 4px; }
.ag-service p { margin: 0 0 8px; color: var(--ink-soft); font-size: .85rem; line-height: 1.4; }
.ag-service small { color: var(--muted); font-size: .8rem; font-weight: 500; }

.ag-values-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.ag-qualite {
  background: var(--leaf-50); border: 1px solid var(--leaf-200); border-radius: var(--radius);
  padding: 28px;
}
.ag-qualite h3 { margin: 0 0 14px; }
.ag-labels { margin: 0; padding: 0; list-style: none; }
.ag-labels li { padding: 10px 0; border-bottom: 1px dashed var(--leaf-200); font-size: .95rem; }
.ag-labels li:last-child { border: 0; }

/* ==========================================================================
   Pages : Économie, Stationnement, API docs, Coffre-fort, Calendrier, Santé
   ========================================================================== */

/* ---------- Économie ---------- */
.ec-hero {
  background: linear-gradient(160deg, #0a1c52 0%, #000f39 60%, #1a7a5c 100%);
  color: #fff; padding: 50px 0 60px;
  position: relative; overflow: hidden;
}
.ec-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 75% 25%, rgba(181,228,140,.22) 0, transparent 60%); pointer-events: none; }
.ec-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.ec-hero .badge { background: var(--leaf-200); color: var(--ink); position: relative; z-index: 2; }
.ec-hero .hero-actions { position: relative; z-index: 2; }

.ec-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.ec-poles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ec-pole {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ec-pole:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ec-pole-img { aspect-ratio: 16/8; position: relative; display: flex; align-items: flex-end; padding: 18px; }
.ec-pole-cap { background: rgba(255,255,255,.95); color: var(--ink); padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.ec-pole-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.ec-pole-body h3 { font-size: 1.2rem; margin: 4px 0; }
.ec-pole-meta { color: var(--muted); font-size: .88rem; margin: 0; }
.ec-pole-body p { color: var(--ink-soft); margin: 0; font-size: .92rem; }
.ec-pole-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); flex-wrap: wrap; gap: 8px; }

.ec-aides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ec-aide { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .15s, border-color .15s; }
.ec-aide:hover { transform: translateY(-2px); border-color: var(--leaf-400); }
.ec-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.ec-aide h3 { font-size: 1.05rem; margin: 0 0 8px; }
.ec-aide p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 10px; }

.ec-partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ec-partner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; transition: transform .15s, border-color .15s; }
.ec-partner:hover { transform: translateY(-2px); border-color: var(--ink); }
.ec-partner span { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.ec-partner b { font-size: .95rem; display: block; margin-bottom: 4px; }
.ec-partner small { color: var(--muted); font-size: .82rem; }

.ec-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ec-contact-card { display: grid; grid-template-columns: 72px 1fr; gap: 20px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.ec-contact-card .pr-avatar { width: 72px; height: 72px; font-size: 1.4rem; }

/* ---------- Stationnement ---------- */
.pk-live { padding: 40px 0; background: linear-gradient(180deg, var(--cream), #fff); border-bottom: 1px solid var(--line); }

.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pk-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
  border-left-width: 6px;
  transition: transform .15s;
}
.pk-card:hover { transform: translateY(-2px); }
.pk-card.available { border-left-color: var(--leaf-500); }
.pk-card.partial { border-left-color: #e6c556; }
.pk-card.full { border-left-color: var(--danger); background: linear-gradient(90deg, #fee, #fff 20%); }

.pk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .82rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pk-status { width: 10px; height: 10px; border-radius: 50%; }
.pk-status.dot-green { background: var(--leaf-500); box-shadow: 0 0 0 4px rgba(58,155,103,.25); animation: pulse 1.8s ease-in-out infinite; }
.pk-status.dot-orange { background: #e6c556; box-shadow: 0 0 0 4px rgba(230,197,86,.25); }
.pk-status.dot-red { background: var(--danger); }
.pk-count { display: block; font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; margin: 4px 0 10px; }
.pk-count small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.pk-card h3 { font-size: 1rem; margin: 4px 0; }
.pk-card p { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }

.pk-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pk-zone { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pk-zone-head { padding: 16px 20px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.pk-zone-head b { font-size: .95rem; letter-spacing: .05em; }
.pk-zone-head span { font-size: .82rem; font-weight: 600; }
.pk-zone-body { padding: 18px 20px; }
.pk-zone-body p { margin: 0 0 6px; font-size: .92rem; color: var(--ink-soft); }
.pk-zone-body p:last-child { margin-bottom: 0; }

.pk-pay-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.pk-ways { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pk-way { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.pk-way-icon { font-size: 2rem; line-height: 1; }
.pk-way h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.pk-way p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.pk-calc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.pk-calc h3 { margin: 0 0 14px; }
.pk-total { display: flex; justify-content: space-between; align-items: center; background: var(--cream); padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.pk-total b { font-size: 1.6rem; color: var(--ink); }

.pk-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.pk-sub { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.pk-sub.highlighted { background: linear-gradient(160deg, var(--leaf-50), #fff); border-color: var(--leaf-400); box-shadow: var(--shadow); transform: scale(1.03); }
.pk-sub b { display: block; font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
.pk-sub h3 { margin: 6px 0 10px; font-size: 1.1rem; }
.pk-sub .bullets { margin: 0; text-align: left; }
.pk-apply { text-align: center; }

.pk-alt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pk-alt-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 14px; text-align: center; transition: transform .15s, border-color .15s; }
.pk-alt-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.pk-alt-card span { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.pk-alt-card b { display: block; font-size: .92rem; }
.pk-alt-card small { color: var(--muted); font-size: .78rem; display: block; margin-top: 2px; }

/* ---------- API docs ---------- */
.api-hero {
  background: linear-gradient(160deg, #0a1429 0%, #000f39 60%, #0e3f2f 100%);
  color: #fff; padding: 50px 0 60px;
  position: relative; overflow: hidden;
}
.api-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 20%, rgba(181,228,140,.2) 0, transparent 60%); pointer-events: none; }
.api-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.api-hero .badge { background: var(--leaf-200); color: var(--ink); position: relative; z-index: 2; }

.api-endpoint-big {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin: 24px 0 16px;
  position: relative; z-index: 2;
}
.api-endpoint-big code { font-family: ui-monospace, monospace; color: var(--leaf-200); font-size: 1.05rem; font-weight: 600; }

.api-quick { display: flex; flex-wrap: wrap; gap: 14px; position: relative; z-index: 2; }
.api-quick a { color: rgba(255,255,255,.85); font-weight: 600; font-size: .92rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.api-quick a:hover { color: var(--leaf-200); border-color: var(--leaf-200); }

.api-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.api-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.api-sidebar { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
.api-sidebar h2 { font-size: 1.05rem; margin: 0 0 10px; }
.api-sidebar h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 6px; }
.api-sidebar h3:first-of-type { margin-top: 0; }
.api-sidebar ul { display: flex; flex-direction: column; gap: 2px; }
.api-sidebar a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 6px 4px; font-size: .85rem; color: var(--ink); border-radius: 4px; font-family: ui-monospace, monospace; }
.api-sidebar a:hover { background: #fff; }
.api-verb {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: .7rem; font-weight: 800; text-align: center;
  font-family: var(--font-sans); letter-spacing: .04em;
}
.api-verb.get { background: var(--leaf-400); color: #fff; }
.api-verb.post { background: #0053b3; color: #fff; }
.api-verb.put { background: #e6c556; color: var(--ink); }
.api-verb.delete { background: var(--danger); color: #fff; }

.api-content { display: flex; flex-direction: column; gap: 32px; }
.api-endpoint { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; scroll-margin-top: 100px; }
.api-endpoint header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.api-endpoint header code { font-family: ui-monospace, monospace; font-weight: 600; font-size: 1rem; background: var(--cream); padding: 4px 10px; border-radius: 6px; }
.api-endpoint .api-badge { background: var(--leaf-100); color: var(--leaf-500); padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.api-endpoint .api-badge.auth { background: #fff3cd; color: #856404; }

.api-endpoint h4 { font-size: .9rem; margin: 20px 0 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.api-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 8px; }
.api-table th, .api-table td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--line); }
.api-table thead { background: var(--cream); }
.api-table th { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.api-table code { font-family: ui-monospace, monospace; background: var(--cream); padding: 1px 6px; border-radius: 4px; font-size: .85em; }

.api-code {
  background: #0a1429; color: #b5e48c;
  padding: 18px 22px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: .88rem; line-height: 1.5;
  font-family: ui-monospace, monospace;
  margin: 0;
}

.api-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.api-auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.api-auth-card code { background: var(--cream); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; }
.api-auth-icon { font-size: 2rem; display: block; margin-bottom: 10px; }

.api-limits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.api-limit { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 22px; text-align: center; }
.api-limit b { display: block; font-size: 2rem; color: var(--leaf-200); font-weight: 800; line-height: 1; }
.api-limit span { font-size: .85rem; color: rgba(255,255,255,.75); display: block; margin-top: 6px; }

.api-sdks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.api-sdk { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.api-sdk > span { font-size: 2rem; display: block; margin-bottom: 10px; }
.api-sdk h3 { margin: 4px 0 8px; font-family: ui-monospace, monospace; font-size: 1rem; }

.api-play { display: grid; grid-template-columns: 320px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.api-play-left { display: flex; flex-direction: column; gap: 12px; }
.api-play-left label { display: block; }
.api-play-left label span { display: block; margin-bottom: 4px; font-weight: 600; font-size: .85rem; }
.api-play-left input, .api-play-left select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); }
.api-play-right { display: flex; flex-direction: column; gap: 10px; }
.api-play-right b { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.api-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.api-changelog { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.api-changelog h3 { margin: 0 0 14px; }
.api-changelog ul { display: flex; flex-direction: column; gap: 14px; }
.api-changelog li { border-left: 2px solid var(--leaf-400); padding-left: 12px; font-size: .88rem; }
.api-changelog b { font-family: ui-monospace, monospace; }
.api-changelog time { color: var(--muted); font-size: .8rem; }
.api-changelog code { background: var(--paper); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .85em; }

/* ---------- Mon espace documents ---------- */
.doc-toolbar { padding: 20px 0; background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 103px; z-index: 10; }
.doc-toolbar-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.doc-filters { display: flex; gap: 6px; flex-wrap: wrap; overflow-x: auto; }
.doc-filters .chip em { background: var(--line); color: var(--ink); padding: 1px 8px; border-radius: 999px; font-size: .78rem; margin-left: 6px; font-style: normal; }
.doc-filters .chip.active em { background: var(--leaf-200); }
.doc-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px; min-width: 260px; }
.doc-search input { flex: 1; border: 0; background: transparent; font: inherit; }
.doc-search input:focus { outline: none; }
.doc-sort { display: flex; gap: 8px; align-items: center; }
.doc-sort select { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .88rem; }
.doc-view { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.doc-view button { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--muted); }
.doc-view button.on { background: var(--ink); color: #fff; }

.doc-pinned { display: flex; flex-direction: column; gap: 14px; }
.doc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center;
}
.doc-card.important { border-left: 4px solid var(--leaf-400); background: linear-gradient(90deg, var(--leaf-50), #fff 20%); }
.doc-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.doc-icon.sm { width: 40px; height: 40px; font-size: 1.3rem; }
.doc-body h3 { margin: 4px 0; font-size: 1.05rem; }
.doc-meta { color: var(--muted); font-size: .85rem; margin: 0 0 4px; }
.doc-valid { color: var(--leaf-500); font-size: .85rem; margin: 0; font-weight: 600; }
.doc-actions { display: flex; gap: 6px; flex-direction: column; }

.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-row {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 20px;
  display: grid; grid-template-columns: 40px 1fr 140px 70px auto; gap: 16px; align-items: center;
  transition: background .15s, border-color .15s;
}
.doc-row:hover { background: var(--cream); border-color: var(--ink); }
.doc-info b { display: block; font-size: .95rem; }
.doc-info small { color: var(--muted); font-size: .82rem; }
.doc-tag { background: var(--leaf-100); color: var(--ink); padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.doc-size { color: var(--muted); font-size: .82rem; font-family: ui-monospace, monospace; text-align: right; }
.doc-quick { display: flex; gap: 4px; }
.doc-quick button { width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid var(--line); cursor: pointer; }
.doc-quick button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.doc-share-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.doc-share-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }

.doc-garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.doc-gar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.doc-gar > span { font-size: 2rem; display: block; margin-bottom: 10px; }
.doc-gar h3 { margin: 0 0 8px; font-size: 1.05rem; }
.doc-gar p { color: var(--ink-soft); font-size: .9rem; margin: 0; }

/* ---------- Calendrier scolaire ---------- */
.cs-switcher { padding: 24px 0 0; background: var(--cream); }

.cs-year { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 36px; }
.cs-year::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; background: var(--line); }
.cs-period { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; position: relative; }
.cs-period .cs-dot { position: absolute; left: -36px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.cs-period.start .cs-dot, .cs-period.end .cs-dot { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.cs-period.vacation .cs-dot { background: var(--leaf-400); box-shadow: 0 0 0 2px var(--leaf-200); }
.cs-period.vacation { background: linear-gradient(90deg, var(--leaf-50), #fff 10%); border-left: 4px solid var(--leaf-400); }
.cs-period.holiday .cs-dot { background: #e6c556; box-shadow: 0 0 0 2px #f0d988; }
.cs-period.special .cs-dot { background: #9fe26e; box-shadow: 0 0 0 2px #b5e48c; }
.cs-period.current { background: var(--honey); border-color: #e6c556; box-shadow: var(--shadow); }
.cs-period b { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.cs-period time { display: block; color: var(--ink-soft); font-weight: 600; margin-bottom: 2px; font-size: .95rem; }
.cs-period small { color: var(--muted); font-size: .85rem; }
.cs-now-tag { position: absolute; top: 18px; right: 24px; background: var(--ink); color: var(--honey); padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; }

.cs-month {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.cs-month-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.1rem; }
.cs-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cs-cell {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 6px;
  min-height: 70px;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .88rem;
}
.cs-cell b { font-weight: 700; color: var(--ink); }
.cs-cell.other { opacity: .4; }
.cs-cell.weekend { background: var(--cream); }
.cs-cell.school { background: #fff; }
.cs-cell.pont { background: linear-gradient(180deg, #fffbe6, #fff); }
.cs-cell.special { background: linear-gradient(180deg, var(--leaf-50), #fff); }
.cs-cell.event { background: linear-gradient(180deg, #f1faea, #fff); }
.cs-tag { font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; align-self: flex-start; letter-spacing: .02em; }

.cs-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: .82rem; color: var(--muted); }
.cs-legend .dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(0,0,0,.1); }

.cs-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-srv { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.cs-srv > span { font-size: 2rem; line-height: 1; }
.cs-srv h3 { margin: 4px 0 8px; font-size: 1.05rem; }
.cs-srv p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.cs-srv .link { margin-top: auto; padding-top: 8px; align-self: flex-start; }

.cs-sub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }

/* ---------- Santé ---------- */
.sa-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.sa-equip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sa-equip .sa-card.featured { grid-column: span 2; display: grid; grid-template-columns: 280px 1fr; }
.sa-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.sa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sa-card-img { aspect-ratio: 16/9; position: relative; display: flex; align-items: flex-end; padding: 16px; }
.sa-equip .sa-card.featured .sa-card-img { aspect-ratio: auto; }
.sa-cap { background: rgba(255,255,255,.95); color: var(--ink); padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.sa-card-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.sa-card-body h3 { font-size: 1.1rem; margin: 4px 0; }
.sa-meta { color: var(--muted); font-size: .88rem; margin: 0; }
.sa-card-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }

.sa-dispo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-dispo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, border-color .15s; }
.sa-dispo:hover { transform: translateY(-2px); border-color: var(--leaf-400); }
.sa-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.sa-dispo h3 { font-size: 1.05rem; margin: 0 0 8px; }
.sa-dispo p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 8px; }
.sa-dispo .link { margin-top: auto; padding-top: 4px; align-self: flex-start; }

.sa-ages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sa-age { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; }
.sa-age-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.sa-age h3 { font-size: 1rem; margin: 0 0 10px; }

.sa-cls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.sa-cls-axe { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; }
.sa-cls-axe > b { position: absolute; top: 14px; right: 14px; background: var(--ink); color: var(--leaf-200); padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sa-cls-axe h3 { font-size: 1.05rem; margin: 4px 0 8px; }
.sa-cls-axe p { color: var(--ink-soft); font-size: .9rem; margin: 0; }

.sa-urg-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.sa-numbers { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.sa-numbers h3 { margin: 0 0 14px; }
.sa-num {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--cream);
  margin-bottom: 6px;
  color: var(--ink);
  transition: background .15s;
}
.sa-num:hover { background: var(--leaf-50); }
.sa-num.red { background: #fee; }
.sa-num.red:hover { background: #fdd; }
.sa-num b { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; text-align: center; }
.sa-num.red b { color: var(--danger); }
.sa-num span { font-weight: 600; font-size: .92rem; }

/* ==========================================================================
   Pages : Status, Inclusion num., Festivités, Annonces légales, Partenaires, Budget citoyen
   ========================================================================== */

/* ---------- Status ---------- */
.st-hero { padding: 40px 0 50px; background: var(--cream); border-bottom: 1px solid var(--line); }
.st-overall {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}
.st-overall.ok { border-left: 6px solid var(--leaf-400); }
.st-overall.warn { border-left: 6px solid #e6c556; background: linear-gradient(90deg, #fffbe6, #fff 10%); }
.st-overall.err { border-left: 6px solid var(--danger); background: linear-gradient(90deg, #fee, #fff 10%); }
.st-big-dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--leaf-400);
  box-shadow: 0 0 0 8px rgba(58,155,103,.15);
  animation: pulse 2s ease-in-out infinite;
}
.st-overall.warn .st-big-dot { background: #e6c556; box-shadow: 0 0 0 8px rgba(230,197,86,.2); }
.st-overall.err .st-big-dot { background: var(--danger); box-shadow: 0 0 0 8px rgba(156,26,26,.2); }
.st-overall h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 6px; }
.st-overall p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.st-stats-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.st-stats-small > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; text-align: center; }
.st-stats-small b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.st-stats-small span { color: var(--muted); font-size: .82rem; display: block; margin-top: 4px; }

.st-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.st-srv {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px;
  border-left: 4px solid var(--leaf-400);
}
.st-srv.warn { border-left-color: #e6c556; }
.st-srv.err { border-left-color: var(--danger); }

.st-srv-head { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.st-srv-head h3 { margin: 0; font-size: 1.05rem; }
.st-srv .st-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--leaf-400); box-shadow: 0 0 0 4px rgba(58,155,103,.2); }
.st-srv.warn .st-dot { background: #e6c556; box-shadow: 0 0 0 4px rgba(230,197,86,.2); }
.st-srv.err .st-dot { background: var(--danger); }
.st-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--leaf-500); }
.st-srv.warn .st-label { color: #856404; }
.st-srv.err .st-label { color: var(--danger); }

.st-srv-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.st-srv-meta b { color: var(--ink); font-weight: 600; }

.st-sparkline { display: flex; gap: 2px; height: 28px; align-items: flex-end; }
.st-sparkline .bar { flex: 1; height: 100%; border-radius: 2px; background: var(--leaf-400); }
.st-sparkline .bar.warn { background: #e6c556; }
.st-sparkline .bar.err { background: var(--danger); }

.st-srv-note { margin: 10px 0 0; padding: 10px 14px; background: #fff3cd; border-radius: var(--radius-sm); color: #856404; font-size: .88rem; }

.st-incidents { display: flex; flex-direction: column; gap: 16px; }
.st-incident {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.st-incident header { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); align-items: start; }
.st-inc-date {
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 10px 8px; text-align: center;
  display: flex; flex-direction: column;
}
.st-inc-date b { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.st-inc-date span { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.st-inc-date time { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.st-incident header h3 { margin: 4px 0; font-size: 1.1rem; }
.st-inc-type {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.st-inc-type.warn { background: #fff3cd; color: #856404; }
.st-inc-type.err { background: #f8d7da; color: var(--danger); }
.st-inc-type.maj { background: var(--leaf-100); color: var(--leaf-500); }

.st-inc-body { padding: 20px 24px; }
.st-inc-timeline { display: flex; flex-direction: column; gap: 16px; position: relative; padding-left: 24px; }
.st-inc-timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.st-inc-step { position: relative; }
.st-inc-step::before {
  content: ""; position: absolute; left: -24px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
}
.st-inc-step.on::before { background: #e6c556; border-color: #856404; }
.st-inc-step time { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--muted); }
.st-inc-step b { display: block; font-size: .95rem; margin: 2px 0 4px; }
.st-inc-step p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.st-sub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }

/* ---------- Inclusion numérique ---------- */
.in-hero {
  background: linear-gradient(160deg, #f1faea 0%, #fff 100%);
  padding: 50px 0 60px;
  border-bottom: 1px solid var(--line);
}
.in-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }

.in-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.in-needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.in-need {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.in-need:hover { border-color: var(--ink); transform: translateY(-2px); }
.in-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.in-need h3 { font-size: 1.1rem; margin: 0 0 4px; line-height: 1.3; }
.in-need p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 8px; }
.in-need small { color: var(--leaf-500); font-size: .85rem; font-weight: 600; margin-top: auto; }

.in-fs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.in-fs-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.in-fs-img { aspect-ratio: 21/9; }
.in-fs-body { padding: 24px 28px; }
.in-partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.in-partners-grid li {
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 10px; display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 500;
}
.in-partners-grid li span { font-size: 1.2rem; }

.in-fs-info {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}

.in-atelier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.in-atelier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 80px 1fr; gap: 18px; align-items: start;
  padding: 20px; transition: transform .15s, box-shadow .15s;
}
.in-atelier:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.in-atelier time {
  background: var(--leaf-400); color: #fff;
  border-radius: 12px; padding: 10px 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.in-atelier time b { font-size: 1.6rem; font-weight: 800; }
.in-atelier time span { font-size: .72rem; margin-top: 4px; opacity: .9; }
.in-atelier time em { font-size: .68rem; font-style: normal; margin-top: 2px; opacity: .8; }
.in-atelier-body h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.in-atelier-body p { color: var(--ink-soft); font-size: .9rem; margin: 0 0 6px; }
.in-atelier-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: .85rem; }

.in-pn-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.in-pn-card {
  background: linear-gradient(160deg, #e6c556, #f0d988);
  border: 2px solid #ccb044;
  border-radius: var(--radius);
  padding: 28px;
  max-width: 340px;
  margin-left: auto;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.2);
  position: relative; overflow: hidden;
}
.in-pn-card::after {
  content: ""; position: absolute; top: -20px; right: -20px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.in-pn-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.in-pn-header span { font-size: 2rem; }
.in-pn-header b { font-size: 1.1rem; color: #5a4000; font-weight: 800; }
.in-pn-amount { text-align: center; margin: 20px 0; position: relative; }
.in-pn-amount span { display: block; color: #7a5500; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.in-pn-amount b { display: block; font-size: 3.2rem; font-weight: 800; color: #3a2800; line-height: 1; margin: 6px 0 2px; }
.in-pn-amount small { color: #7a5500; font-size: .8rem; }
.in-pn-feats { display: flex; flex-direction: column; gap: 4px; position: relative; }
.in-pn-feats li { color: #3a2800; font-weight: 600; font-size: .88rem; }

.in-mat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.in-mat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.in-mat-icon { font-size: 2rem; display: block; margin-bottom: 8px; }

.in-charter {
  background: linear-gradient(160deg, var(--leaf-50), #fff);
  border: 2px solid var(--leaf-400);
  border-radius: var(--radius);
  padding: 40px;
}
.in-charter-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; list-style: none; padding: 0; }
.in-charter-list li { padding: 10px 0; font-size: .95rem; color: var(--ink-soft); }
.in-charter-list b { color: var(--ink); }

/* ---------- Festivités ---------- */
.fe-hero {
  background: linear-gradient(160deg, #c85420 0%, #e6c556 60%, #3a9b67 100%);
  color: #fff; padding: 50px 0 60px;
  position: relative; overflow: hidden;
}
.fe-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 70% 30%, rgba(255,255,255,.15) 0, transparent 60%); pointer-events: none; }
.fe-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.fe-hero .badge { background: rgba(255,255,255,.95); color: var(--ink); position: relative; z-index: 2; }

.fe-year { padding: 60px 0; }
.fe-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fe-month {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
  transition: transform .15s, box-shadow .15s;
}
.fe-month:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fe-month.current { border: 2px solid var(--leaf-400); background: linear-gradient(160deg, var(--leaf-50), #fff); }
.fe-month header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.fe-month header b { font-size: 1.1rem; }
.fe-month header small { font-size: 1.4rem; }
.fe-month ul { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; }
.fe-month li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; font-size: .88rem; }
.fe-date {
  background: var(--cream); border-radius: 6px;
  text-align: center; font-weight: 800; font-size: .82rem;
  padding: 3px 0; color: var(--ink);
}
.fe-major { font-weight: 700; color: var(--leaf-500); }

.fe-majors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fe-major-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.fe-major-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fe-major-img { aspect-ratio: 16/9; position: relative; display: flex; align-items: flex-end; padding: 16px; }
.fe-major-date { background: rgba(255,255,255,.95); color: var(--ink); padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.fe-major-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.fe-major-body h3 { font-size: 1.1rem; margin: 4px 0; }
.fe-major-body p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.fe-major-body .muted { color: var(--muted); font-size: .82rem; }

.fe-eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fe-eco-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; border-left: 4px solid var(--leaf-400); display: flex; flex-direction: column; gap: 8px; }
.fe-eco-icon { font-size: 2rem; line-height: 1; }
.fe-eco-card h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.fe-eco-card p { color: var(--ink-soft); font-size: .9rem; margin: 0 0 10px; }
.fe-eco-impact {
  background: var(--leaf-100); color: var(--leaf-500);
  padding: 4px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  align-self: flex-start;
}

.fe-orga-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }

/* ---------- Annonces légales ---------- */
.al-stats { padding: 40px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.al-filters { padding: 24px 0; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 103px; z-index: 10; }
.al-filters .chips { margin-bottom: 14px; }
.al-filters .chip em { background: var(--line); color: var(--ink); padding: 1px 8px; border-radius: 999px; font-size: .78rem; margin-left: 6px; font-style: normal; }
.al-filters .chip.active em { background: var(--leaf-200); }

.al-search { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; background: var(--cream); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px; }
.al-search input { border: 0; background: transparent; font: inherit; padding: 4px 0; }
.al-search input:focus { outline: none; }
.al-search select { padding: 6px 14px; border: 0; background: transparent; font-size: .88rem; font-weight: 600; border-left: 1px solid var(--line); }

.al-enquetes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.al-enq { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; }
.al-enq-badge {
  position: absolute; top: 0; right: 20px;
  padding: 6px 14px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
}
.al-enq-badge.live { background: var(--danger); color: #fff; }
.al-enq-badge.upcoming { background: #e6c556; color: var(--ink); }
.al-enq-badge.closed { background: var(--muted); color: #fff; }
.al-enq h3 { font-size: 1.15rem; margin: 10px 0; padding-right: 120px; }
.al-enq-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.al-vote { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.al-vote.yes { background: var(--leaf-100); color: var(--leaf-500); }
.al-vote.no { background: #f8d7da; color: var(--danger); }
.al-vote.info { background: #cfe2ff; color: #084298; }

.al-arretes { display: flex; flex-direction: column; gap: 14px; }
.al-arrete { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; }
.al-arr-ref { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.al-arr-ref code { background: var(--cream); padding: 3px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 700; }
.al-arrete h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.al-arrete p { margin: 0 0 6px; font-size: .92rem; color: var(--ink-soft); }
.al-arr-links { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; font-size: .85rem; }
.al-arr-links a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--leaf-300); }

.al-budgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.al-budget { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; }
.al-budget > span { font-size: 2rem; }
.al-budget b { display: block; font-size: .95rem; }
.al-budget small { color: var(--muted); font-size: .82rem; }
.al-budget a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--leaf-300); font-size: .85rem; }

.al-sub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }

/* ---------- Partenaires ---------- */
.pa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pa-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: grid; grid-template-columns: 72px 1fr; gap: 18px;
  transition: border-color .15s, transform .15s;
}
.pa-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.pa-card.feat { grid-column: span 2; padding: 28px; }
.pa-logo {
  width: 72px; height: 72px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; text-align: center; line-height: 1.2;
  padding: 4px;
}
.pa-card h3 { font-size: 1.1rem; margin: 4px 0; }
.pa-card p { margin: 0 0 6px; font-size: .92rem; color: var(--ink-soft); }
.pa-card .muted { color: var(--muted); font-size: .85rem; }

.pa-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pa-label {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem;
  flex-direction: column;
  text-align: center;
}
.pa-label small { color: var(--muted); font-size: .78rem; display: block; margin-top: 2px; }

.pa-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pa-link-cat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.pa-link-cat h3 { margin: 0 0 14px; font-size: 1rem; }
.pa-link-cat ul { display: flex; flex-direction: column; gap: 4px; }
.pa-link-cat li { padding: 6px 0; border-top: 1px dashed var(--line); font-size: .88rem; }
.pa-link-cat li:first-child { border: 0; padding-top: 0; }
.pa-link-cat a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--leaf-300); }

/* ---------- Budget citoyen ---------- */
.bc-hero {
  background: linear-gradient(160deg, #0a2347 0%, #000f39 60%, #3a9b67 100%);
  color: #fff; padding: 50px 0 60px;
  position: relative; overflow: hidden;
}
.bc-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 75% 25%, rgba(228,250,136,.2) 0, transparent 60%); pointer-events: none; }
.bc-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; position: relative; z-index: 2; }
.bc-hero .badge { background: var(--honey); color: var(--ink); position: relative; z-index: 2; }

.bc-euro { padding: 60px 0; background: var(--cream); border-bottom: 1px solid var(--line); }

.bc-coin-viz {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px;
  align-items: center;
  margin-top: 24px;
}
.bc-coin {
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5d76e, #d4a017);
  box-shadow: 0 0 0 8px #f5d76e22, 0 20px 40px -10px rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: #5a4000;
  position: relative;
}
.bc-coin::before {
  content: ""; position: absolute; inset: 24px;
  border: 3px dashed #b78a0d; border-radius: 50%;
}
.bc-coin-total { font-size: 2.8rem; font-weight: 800; color: #3a2800; line-height: 1; }
.bc-coin small { color: #7a5500; font-size: .92rem; font-weight: 600; margin-top: 6px; }

.bc-slices { display: flex; flex-direction: column; gap: 6px; }
.bc-slice {
  --pct: 0;
  position: relative;
  display: grid; grid-template-columns: 60px 1fr; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--leaf-50) 0%, var(--leaf-50) calc(var(--pct) * 1%), #fff calc(var(--pct) * 1%), #fff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.bc-slice > span {
  background: var(--ink); color: var(--honey);
  padding: 6px 10px; border-radius: 6px;
  font-weight: 800; font-family: ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
}
.bc-slice b { display: block; font-size: .95rem; }
.bc-slice small { color: var(--muted); font-size: .82rem; }

.bc-sources { display: flex; flex-direction: column; gap: 10px; }
.bc-source { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; }
.bc-src-bar { height: 32px; border-radius: 6px; transition: width .6s ease; }
.bc-src-info b { display: block; font-size: 1rem; margin-bottom: 4px; }
.bc-amt { font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.bc-amt small { color: var(--muted); font-size: .85rem; font-weight: 500; margin-left: 4px; }

.bc-calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.bc-calc-form { display: flex; flex-direction: column; gap: 14px; }
.bc-calc-form label { display: block; }
.bc-calc-form label span { display: block; margin-bottom: 4px; font-weight: 600; font-size: .9rem; }
.bc-calc-form input, .bc-calc-form select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); }

.bc-result { background: var(--leaf-50); border: 1px solid var(--leaf-200); border-radius: var(--radius); padding: 24px; }
.bc-result h3 { margin: 0 0 10px; font-size: 1rem; }
.bc-result-total { text-align: center; margin-bottom: 14px; }
.bc-result-total b { display: block; font-size: 2.8rem; font-weight: 800; color: var(--ink); line-height: 1; }
.bc-result-total small { color: var(--muted); font-size: .88rem; }
.bc-receive { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; font-size: .88rem; }
.bc-receive li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed var(--leaf-200); }
.bc-receive li:first-child { border: 0; }
.bc-receive li b { color: var(--ink); }
.bc-receive li span { color: var(--muted); font-size: .85rem; }
.bc-roi {
  margin-top: 16px; padding: 14px 18px;
  background: linear-gradient(90deg, var(--honey), var(--leaf-200));
  border-radius: var(--radius-sm);
  text-align: center; color: var(--ink); font-weight: 600;
}

.bc-dest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bc-dest-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.bc-dest-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.bc-dest-head b { font-size: 1.1rem; color: var(--ink); }
.bc-dest-head span { font-weight: 700; font-size: 1rem; }
.bc-dest-head small { color: var(--muted); font-size: .85rem; font-weight: 500; margin-left: 4px; }
.bc-dest-card .progress { height: 8px; margin-bottom: 14px; }
.bc-dest-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bc-dest-card li { padding: 4px 0; font-size: .88rem; color: var(--ink-soft); border-top: 1px dashed var(--line); }
.bc-dest-card li:first-child { border: 0; }

.bc-evol .archive-table tr.current { background: var(--leaf-50); }
.bc-trend.up { color: var(--leaf-500); font-weight: 700; }
.bc-trend.down { color: var(--danger); font-weight: 700; }

.bc-trust-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.bc-indics { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 28px; }
.bc-indics h3 { color: var(--leaf-200); margin: 0 0 14px; }
.bc-indics dl { display: flex; flex-direction: column; gap: 10px; }
.bc-indics dl > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.2); }
.bc-indics dt { color: rgba(255,255,255,.75); font-size: .88rem; margin: 0; }
.bc-indics dd { margin: 0; font-weight: 700; color: var(--leaf-200); }
.bc-indics small { color: rgba(255,255,255,.5); font-size: .78rem; font-weight: 400; margin-left: 4px; }

/* ==========================================================================
   Améliorations UX v2 — back-to-top, aide raccourcis, confetti, read-progress
   ========================================================================== */

/* ---------- Back to top ---------- */
.back-top {
  position: fixed; bottom: 20px; right: 20px; z-index: 85;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 1.3rem; font-weight: 700;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: all .25s ease;
  cursor: pointer;
}
.back-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-top:hover { background: var(--leaf-400); color: var(--ink); transform: translateY(-2px) scale(1.05); }
@media (max-width: 780px) {
  .back-top { bottom: 80px; right: 14px; width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ---------- Aide raccourcis clavier (?) ---------- */
.kbd-help {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,15,57,.55);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.kbd-help.open { display: flex; animation: fade-in .2s ease; }
.kbd-help-inner {
  background: #fff; border-radius: var(--radius);
  padding: 32px 36px;
  max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: scale-in .25s cubic-bezier(.2,.8,.2,1);
}
.kbd-help-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  font-size: 1rem; cursor: pointer;
}
.kbd-help-close:hover { background: var(--ink); color: #fff; }
.kbd-help-inner h2 { margin: 0 0 6px; font-size: 1.3rem; }
.kbd-help-inner > p { margin: 0 0 18px; color: var(--muted); }
.kbd-list { display: flex; flex-direction: column; gap: 8px; }
.kbd-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.kbd-list > div:last-child { border: 0; }
.kbd-list dt { margin: 0; order: 2; display: flex; gap: 4px; align-items: center; }
.kbd-list dd { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.kbd-list kbd {
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 22px;
  text-align: center;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes scale-in {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Read progress bar (articles) ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--leaf-400), var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform .1s linear;
  pointer-events: none;
}

/* ---------- Confetti à la soumission d'un formulaire ---------- */
.confetti-piece {
  position: fixed; top: -10px; left: 0;
  width: 10px; height: 14px;
  background: var(--c, var(--leaf-400));
  transform: translateX(var(--x, 50vw)) rotate(var(--r, 0deg));
  animation: confetti-fall var(--d, 1.5s) ease-in forwards;
  pointer-events: none;
  z-index: 200;
  border-radius: 2px;
}
@keyframes confetti-fall {
  to { top: 100vh; transform: translateX(calc(var(--x, 50vw) + 60px)) rotate(calc(var(--r, 0deg) + 720deg)); opacity: 0; }
}

/* ---------- View Transitions ---------- */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .25s;
  }
  ::view-transition-old(root) { animation-name: vt-fade-out; }
  ::view-transition-new(root) { animation-name: vt-fade-in; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
}

/* ---------- Micro-polish global ---------- */
/* Bouton — animation plus douce au clic */
.btn:active { transform: scale(.97); transition: transform .1s ease; }

/* Liens externes — petit chevron */
a[href^="http"]:not([href*="ville-lieusaint.fr"])::after {
  content: " ↗";
  font-size: .85em;
  opacity: .6;
}

/* Focus ring universel amélioré */
*:focus-visible {
  outline: 3px solid var(--leaf-400);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset .15s ease;
}

/* Sélection texte aux couleurs de la marque */
::selection {
  background: var(--leaf-200);
  color: var(--ink);
}

/* Smooth scroll désactivé pour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .back-top, .kbd-help-inner, .confetti-piece, .read-progress { transition: none; animation: none; }
  .confetti-piece { display: none; }
}

/* ==========================================================================
   Sitemap visuel (vue d'ensemble proto)
   ========================================================================== */
.sv-hero { padding: 50px 0 40px; background: linear-gradient(160deg, var(--cream), #fff); border-bottom: 1px solid var(--line); }
.sv-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0; }
.sv-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; max-width: 680px; }
.sv-metrics > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; text-align: center; }
.sv-metrics b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.sv-metrics span { color: var(--muted); font-size: .82rem; display: block; margin-top: 4px; }

.sv-search { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 18px; max-width: 520px; }
.sv-search input { border: 0; background: transparent; font: inherit; padding: 6px 0; }
.sv-search input:focus { outline: none; }

.sv-section { padding: 32px 0; }
.sv-section.alt { background: var(--cream); }
.sv-section .section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sv-section .section-title small { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 500; background: #fff; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.sv-pill { display: inline-block; width: 10px; height: 28px; border-radius: 4px; }
.sv-pill.c1 { background: #000f39; } .sv-pill.c2 { background: #52b69a; }
.sv-pill.c3 { background: #0053b3; } .sv-pill.c4 { background: #b5e48c; }
.sv-pill.c5 { background: #9fe26e; } .sv-pill.c6 { background: #e6c556; }
.sv-pill.c7 { background: #c85420; } .sv-pill.c8 { background: #3a9b67; }
.sv-pill.c9 { background: #8b4798; } .sv-pill.c10 { background: #c50033; }
.sv-pill.c11 { background: #00afa5; } .sv-pill.c12 { background: #5e6b7a; }
.sv-pill.c13 { background: #9c1a1a; }

.sv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sv-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s;
  border-left: 3px solid var(--line);
  color: var(--ink);
  min-height: 100px;
}
.sv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--ink); }
.sv-card.c1 { border-left-color: #000f39; }
.sv-card.c2 { border-left-color: #52b69a; }
.sv-card.c3 { border-left-color: #0053b3; }
.sv-card.c4 { border-left-color: #b5e48c; }
.sv-card.c5 { border-left-color: #9fe26e; }
.sv-card.c6 { border-left-color: #e6c556; }
.sv-card.c7 { border-left-color: #c85420; }
.sv-card.c8 { border-left-color: #3a9b67; }
.sv-card.c9 { border-left-color: #8b4798; }
.sv-card.c10 { border-left-color: #c50033; }
.sv-card.c11 { border-left-color: #00afa5; }
.sv-card.c12 { border-left-color: #5e6b7a; }
.sv-card.c13 { border-left-color: #9c1a1a; }
.sv-ico { font-size: 1.6rem; line-height: 1; }
.sv-card b { font-size: .95rem; }
.sv-card small { color: var(--muted); font-size: .78rem; line-height: 1.35; }

.sv-summary { padding: 60px 0 80px; background: var(--ink); color: #fff; }
.sv-summary .section-title { color: #fff; text-align: center; margin-bottom: 28px; }
.sv-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-summ { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; }
.sv-summ > span { font-size: 2rem; display: block; margin-bottom: 8px; }
.sv-summ h3 { color: var(--leaf-200); font-size: 1.05rem; margin: 0 0 8px; }
.sv-summ p { color: rgba(255,255,255,.8); font-size: .9rem; margin: 0; line-height: 1.5; }

@media (max-width: 1100px) {
  .sv-grid { grid-template-columns: repeat(3, 1fr); }
  .sv-summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .sv-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-metrics { grid-template-columns: repeat(2, 1fr); }
  .sv-summary-grid { grid-template-columns: 1fr; }
}

/* ---------- Toast (rich, multiline-friendly) ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 14px 24px;
  border-radius: 14px;
  box-shadow: 0 10px 40px -10px rgba(0,15,57,.4), 0 0 0 1px rgba(255,255,255,.05);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.4;
  max-width: min(420px, calc(100vw - 32px));
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast strong { color: var(--leaf-200); }
.toast code {
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .85em;
  display: inline-block;
  margin-top: 6px;
}
.toast.toast-error { background: var(--danger); }

/* Vue mois (agenda) — grille type calendrier */
.events-big.view-month {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.events-big.view-month .event-card {
  flex-direction: column;
}
.events-big.view-month .event-card .event-body p:not(.event-meta) {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-grid { grid-template-columns: repeat(3, 1fr); }
  .part-grid, .bot-grid, .eco-grid, .alerts-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .dm-cards { grid-template-columns: repeat(2, 1fr); }
  .dm-featured { grid-template-columns: 1fr; }
  .dm-help-grid { grid-template-columns: 1fr; }
  .dm-help-cards { grid-template-columns: repeat(3, 1fr); }
  .pp-two { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .cf-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-aside { position: static; }
  .card-row.three { grid-template-columns: 1fr; }
  .elu-grid, .commissions-grid, .axes-grid, .ville-links { grid-template-columns: repeat(2, 1fr); }
  .me-hero-grid, .me-grid, .sig-grid, .hall-book-grid, .ville-intro-grid { grid-template-columns: 1fr; }
  .me-sum-grid { grid-template-columns: repeat(3, 1fr); }
  .me-kids { grid-template-columns: 1fr; }
  .vs-grid { grid-template-columns: repeat(2, 1fr); }
  .sig-aside, .booking-panel { position: static; }
  .hall-card { grid-template-columns: 1fr; }
  .hall-img { min-height: 180px; }
  .mc-filters-grid { grid-template-columns: 1fr 1fr; }
  .mc-stats { grid-template-columns: repeat(2, 1fr); }
  .mc-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-help { grid-template-columns: 1fr; }
  .dw-grid { grid-template-columns: 1fr; }
  .dw-rules-grid { grid-template-columns: 1fr; }
  .dw-enc-grid { grid-template-columns: 1fr; }
  .an-grid { grid-template-columns: repeat(2, 1fr); }
  .an-search-grid { grid-template-columns: 1fr 1fr; }
  .an-cta-grid { grid-template-columns: 1fr; }
  .an-cta-btns { justify-content: flex-start; }
  .pj-grid { grid-template-columns: 1fr; }
  .pj-card.big { grid-column: span 1; }
  .pj-data-grid { grid-template-columns: 1fr; }
  .pj-data-viz { grid-template-columns: 1fr; justify-items: center; }
  .dd-grid { grid-template-columns: 1fr; }
  .dd-aside { position: static; }
  .dd-falc-grid { grid-template-columns: 1fr; }
  .dd-summary { grid-template-columns: repeat(2, 1fr); }
  .swatch-row, .ds-a11y-grid, .ds-govs { grid-template-columns: repeat(2, 1fr); }
  .acc-score { grid-template-columns: 1fr; text-align: center; }
  .acc-contact { grid-template-columns: 1fr; }
  .rgpd-rights { grid-template-columns: repeat(2, 1fr); }
  .emp-grid { grid-template-columns: 1fr; }
  .emp-why-grid { grid-template-columns: repeat(2, 1fr); }
  .emp-spontan-grid { grid-template-columns: 1fr; }
  .persona-hero-grid { grid-template-columns: 1fr; }
  .persona-illus { max-width: 280px; margin: 0 auto; }
  .persona-illus .emoji { font-size: 5rem; }
  .pf-services { grid-template-columns: repeat(2, 1fr); }
  .events-3col { grid-template-columns: 1fr; }
  .pf-help-grid { grid-template-columns: 1fr; }
  .pf-help-cards { grid-template-columns: 1fr; }
  .elu-page-grid { grid-template-columns: 1fr; }
  .elu-side { position: static; }
  .pds-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-missions, .cc-seniors-grid, .pa-grid, .cp-engagements { grid-template-columns: repeat(2, 1fr); }
  .cc-urgent { grid-template-columns: repeat(3, 1fr); }
  .cc-contact { grid-template-columns: 1fr; }
  .pa-visit-grid, .ju-asso-grid, .cp-help-grid { grid-template-columns: 1fr; }
  .ju-card { grid-template-columns: 120px 1fr; }
  .cp-row { grid-template-columns: 1fr; gap: 12px; }
  .cp-col-actions { align-items: flex-start; flex-direction: row; }
  .cb-inner { grid-template-columns: 1fr; }
  .evt-layout, .oed-layout, .pjd-budget-grid, .pjd-follow-grid { grid-template-columns: 1fr; }
  .evt-side, .oed-side { position: static; }
  .oed-head { grid-template-columns: 1fr; }
  .oed-cta { align-items: flex-start; }
  .pjd-phases { grid-template-columns: repeat(2, 1fr); }
  .pjd-kpi { grid-template-columns: repeat(2, 1fr); }
  .pjd-docs { grid-template-columns: 1fr; }
  .sr-grid { grid-template-columns: 1fr; }
  .sr-facets { position: static; }
  .sp-grid, .sp-sante-grid { grid-template-columns: 1fr; }
  .jy-grid, .jy-disp-grid, .jy-access { grid-template-columns: repeat(2, 1fr); }
  .pe-mode { grid-template-columns: 1fr; }
  .pe-mode-img { aspect-ratio: 16/4; }
  .pe-rpe { grid-template-columns: 1fr; }
  .pe-rpe-side { position: static; }
  .pe-sante-grid { grid-template-columns: 1fr; }
  .pb-hero-grid, .pb-subscribe-grid { grid-template-columns: 1fr; }
  .mag-cover { max-width: 280px; margin: 0 auto; }
  .pb-mag-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-guides { grid-template-columns: repeat(2, 1fr); }
  .pr-contact-grid, .pr-dossiers, .pr-resources-grid { grid-template-columns: 1fr; }
  .pr-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .env-axes { grid-template-columns: repeat(2, 1fr); }
  .env-biodiv { grid-template-columns: 1fr; }
  .env-actions-grid, .env-live { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-nav { position: static; }
  .faq-cta { grid-template-columns: 1fr; }
  .off-grid { grid-template-columns: repeat(2, 1fr); }
  .off-urg-grid { grid-template-columns: repeat(3, 1fr); }
  .off-tip-grid { grid-template-columns: 1fr; }
  .falc-grid { grid-template-columns: 1fr; }
  .falc-actions { grid-template-columns: 1fr; }
  .falc-hours { grid-template-columns: repeat(3, 1fr); }
  .falc-urgent { grid-template-columns: 1fr; }
  .wz-row { grid-template-columns: 1fr; }
  .sd-grid { grid-template-columns: 1fr; }
  .sd-side { position: static; }
  .sd-gallery { grid-template-columns: 1fr; height: auto; }
  .sd-main-img { height: 320px; }
  .sd-equip { grid-template-columns: 1fr; }
  .sd-review-sum { grid-template-columns: 1fr; gap: 20px; }
  .plu-map-grid { grid-template-columns: 1fr; }
  .plu-legend { position: static; max-height: none; }
  .plu-zone-cards { grid-template-columns: 1fr; }
  .kiosk-tiles { grid-template-columns: repeat(3, 1fr); }
  .kiosk-bottom { grid-template-columns: 1fr 1fr; }
  .maint-eta { grid-template-columns: 1fr; }
  .tb-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-grid { grid-template-columns: 1fr; }
  .tb-pie-wrap { grid-template-columns: 1fr; }
  .tb-pie-wrap .pie { margin: 0 auto; }
  .tb-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-datasets { grid-template-columns: repeat(2, 1fr); }
  .tb-api-box { grid-template-columns: 1fr; text-align: left; }
  .tr-rules-grid { grid-template-columns: 1fr; }
  .gl-grid { grid-template-columns: repeat(2, 1fr); }
  .gl-contrib { grid-template-columns: 1fr; }
  .vd-hero { grid-template-columns: 1fr; }
  .vd-grid { grid-template-columns: repeat(2, 1fr); }
  .vd-live-grid { grid-template-columns: 1fr; }
  .so-choices { grid-template-columns: 1fr; }
  .so-bars li { grid-template-columns: 140px 1fr 50px; }
  .so-grid { grid-template-columns: 1fr; }
  .so-mini-bars li { grid-template-columns: 140px 1fr; }
  .so-how-grid { grid-template-columns: 1fr; }
  .ag-grid.top { grid-template-columns: 1fr; }
  .ag-services { grid-template-columns: repeat(2, 1fr); }
  .ag-values-grid { grid-template-columns: 1fr; }
  .ec-poles { grid-template-columns: 1fr; }
  .ec-aides, .ec-partners { grid-template-columns: repeat(2, 1fr); }
  .ec-contact-grid { grid-template-columns: 1fr; }
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-zones, .pk-pay-grid, .pk-subs { grid-template-columns: 1fr; }
  .pk-sub.highlighted { transform: none; }
  .pk-alt { grid-template-columns: repeat(3, 1fr); }
  .api-grid { grid-template-columns: 1fr; }
  .api-sidebar { position: static; max-height: none; }
  .api-auth-grid, .api-sdks, .api-play, .api-contact-grid { grid-template-columns: 1fr; }
  .api-limits { grid-template-columns: repeat(2, 1fr); }
  .doc-toolbar-grid { grid-template-columns: 1fr; gap: 12px; }
  .doc-search { min-width: auto; width: 100%; }
  .doc-row { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .doc-row .doc-tag, .doc-row .doc-size { display: none; }
  .doc-share-grid { grid-template-columns: 1fr; }
  .doc-garanties { grid-template-columns: repeat(2, 1fr); }
  .cs-services { grid-template-columns: repeat(2, 1fr); }
  .cs-sub-grid { grid-template-columns: 1fr; }
  .cs-grid { font-size: .82rem; }
  .cs-cell { min-height: 58px; padding: 6px 4px; }
  .sa-equip { grid-template-columns: 1fr; }
  .sa-equip .sa-card.featured { grid-column: auto; grid-template-columns: 1fr; }
  .sa-dispo-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-ages { grid-template-columns: repeat(3, 1fr); }
  .sa-cls { grid-template-columns: repeat(2, 1fr); }
  .sa-urg-grid { grid-template-columns: 1fr; }
  .st-services { grid-template-columns: 1fr; }
  .st-sub-grid { grid-template-columns: 1fr; }
  .st-stats-small { grid-template-columns: repeat(2, 1fr); }
  .in-needs, .in-mat, .in-atelier-grid, .al-enquetes, .al-sub-grid { grid-template-columns: 1fr; }
  .in-fs { grid-template-columns: 1fr; }
  .in-pn-grid { grid-template-columns: 1fr; }
  .in-pn-card { margin: 0 auto; }
  .in-charter-list { grid-template-columns: 1fr; }
  .in-partners-grid { grid-template-columns: repeat(2, 1fr); }
  .fe-calendar { grid-template-columns: repeat(2, 1fr); }
  .fe-majors, .fe-eco { grid-template-columns: 1fr; }
  .fe-orga-grid { grid-template-columns: 1fr; }
  .al-budgets { grid-template-columns: 1fr; }
  .pa-grid { grid-template-columns: 1fr; }
  .pa-card.feat { grid-column: auto; }
  .pa-labels, .pa-links-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-coin-viz, .bc-calc, .bc-trust-grid, .bc-dest { grid-template-columns: 1fr; }
  .bc-coin { margin: 0 auto; }
  .bc-source { grid-template-columns: 1fr; gap: 12px; }
  .al-enq h3 { padding-right: 0; }
  .al-enq-badge { position: static; display: inline-block; margin-bottom: 6px; border-radius: 6px; }
  .cx-grid, .ur-gnau-grid, .ur-plu-grid, .ur-contact-grid { grid-template-columns: 1fr; }
  .cx-aside { position: static; }
  .nl-grid { grid-template-columns: 1fr; }
  .nl-aside { position: static; }
  .af-grid { grid-template-columns: 1fr; }
  .af-side { position: static; }
  .ur-quick-grid { grid-template-columns: repeat(3, 1fr); }
  .cu-equip-grid { grid-template-columns: 1fr; }
  .cu-tarifs-grid { grid-template-columns: repeat(2, 1fr); }
  .cu-news-grid { grid-template-columns: repeat(2, 1fr); }
  .af-activities { grid-template-columns: 1fr 1fr; }
  .af-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px; }
  .af-gallery :nth-child(4) { display: none; }
}
@media (max-width: 780px) {
  .top-grid { grid-template-columns: auto auto; }
  .top-grid .search-trigger { display: none; }
  .top-actions { display: none; }
  .burger { display: block; justify-self: end; }
  .services-grid, .dir-grid, .pillars-grid, .dm-cards, .dm-help-cards, .proj-grid { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .eco-stats { grid-template-columns: 1fr 1fr; }
  .card-row { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  .map-sidebar { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .event-card { grid-template-columns: 72px 1fr; gap: 16px; padding: 16px; }
  .sub .row { grid-template-columns: 1fr; }
  .elu-grid, .commissions-grid, .axes-grid, .ville-links, .vs-grid { grid-template-columns: 1fr; }
  .me-sum-grid { grid-template-columns: repeat(2, 1fr); }
  .sig-types { grid-template-columns: 1fr 1fr; }
  .sig-form .row { grid-template-columns: 1fr; }
  .hall-price { grid-template-columns: 1fr; gap: 6px; }
  .err-illus span { font-size: 6rem; }
  .err-illus svg { width: 80px; height: 96px; }
  .err-links ul { grid-template-columns: 1fr; }
  .progress.steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .progress.steps .step { text-align: left; padding-left: 30px; padding-top: 4px; border-top: 0; border-left: 3px solid var(--line); }
  .progress.steps .step::before { top: 6px; left: -9px; }
  .mc-filters-grid { grid-template-columns: 1fr; }
  .mc-stats, .mc-grid { grid-template-columns: 1fr; }
  .mc-legend ul { flex-direction: column; gap: 6px; }
  .dw-form { grid-template-columns: 1fr; }
  .dw-days { grid-template-columns: repeat(4, 1fr); }
  .an-grid, .ds-a11y-grid, .ds-govs, .swatch-row { grid-template-columns: 1fr; }
  .an-search-grid { grid-template-columns: 1fr; }
  .an-card { grid-template-columns: 1fr; }
  .an-logo { aspect-ratio: 16/5; }
  .pj-timeline { grid-auto-flow: row; grid-auto-columns: auto; }
  .dd-summary { grid-template-columns: 1fr; }
  .dd-steps li { grid-template-columns: 40px 1fr; gap: 12px; }
  .tl-step { border-top: 0; border-left: 3px solid var(--line); text-align: left; padding: 6px 0 6px 14px; }
  .tl-step.done { border-left-color: var(--leaf-400); border-top-color: transparent; }
  .tl-step.on { border-left-color: var(--ink); border-top-color: transparent; }
  .t-row { grid-template-columns: 1fr; }
  .ds-form-demo { grid-template-columns: 1fr; }
  .rgpd-table { overflow-x: auto; }
  .rgpd-table table { min-width: 640px; }
  .rgpd-rights { grid-template-columns: 1fr; }
  .emp-why-grid { grid-template-columns: 1fr; }
  .pf-services { grid-template-columns: 1fr; }
  .pf-ages { flex-direction: column; align-items: stretch; }
  .pf-checklist li { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; }
  .elu-page-grid { gap: 20px; }
  .elu-actions li { grid-template-columns: 32px 1fr; gap: 10px; padding: 16px; }
  .pds-grid { grid-template-columns: 1fr; }
  .cc-missions, .cc-seniors-grid, .pa-grid, .cp-engagements { grid-template-columns: 1fr; }
  .cc-urgent { grid-template-columns: repeat(2, 1fr); }
  .pjd-phases, .pjd-kpi { grid-template-columns: 1fr; }
  .pa-history::before { left: 10px; }
  .pa-history li { grid-template-columns: 80px 1fr; gap: 16px; padding-left: 26px; }
  .pa-history li::before { left: 4px; }
  .pa-history time { text-align: left; padding-right: 8px; font-size: .9rem; }
  .ju-card { grid-template-columns: 1fr; }
  .ju-flag { aspect-ratio: 16/4; }
  .ju-stats { grid-template-columns: 1fr; }
  .cb-actions { justify-content: flex-start; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cs-inner { padding: 24px 20px; }
  .ur-quick-grid { grid-template-columns: 1fr 1fr; }
  .cx-grid-providers { grid-template-columns: 1fr; }
  .nl-row { grid-template-columns: 1fr; }
  .nl-themes { gap: 6px; }
  .cu-tarifs-grid, .cu-news-grid { grid-template-columns: 1fr; }
  .af-head { grid-template-columns: 72px 1fr; gap: 14px; }
  .af-logo { width: 72px; height: 72px; font-size: 2.2rem; }
  .af-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(2, 120px); }
  .af-gallery > :nth-child(n+3) { display: none; }
  .af-activities { grid-template-columns: 1fr; }
  .sr-wrap { grid-template-columns: 1fr; padding: 12px; border-radius: var(--radius); }
  .sr-wrap input { padding: 10px 6px; }
  .sp-disciplines { gap: 6px; }
  .sp-discipline { padding: 8px 12px; font-size: .85rem; }
  .jy-grid, .jy-disp-grid, .jy-access { grid-template-columns: 1fr; }
  .pb-mag-grid, .pb-guides { grid-template-columns: 1fr; }
  .pb-report { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; }
  .pb-icon { font-size: 2rem; }
  .pr-contact-card { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px; }
  .pr-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
  .pr-photo-grid { grid-template-columns: 1fr; }
  .env-axes, .env-actions-grid, .env-live { grid-template-columns: 1fr; }
  .off-grid { grid-template-columns: 1fr; }
  .off-urg-grid { grid-template-columns: repeat(2, 1fr); }
  .off-phone-frame { width: 180px; height: 360px; }
  .faq-search { max-width: 100%; }
  .falc-hero h1 { font-size: 2.2rem; }
  .falc-intro { font-size: 1.25rem; }
  .falc-block h2 { font-size: 1.8rem; }
  .falc-big { font-size: 1.15rem; }
  .falc-hours { grid-template-columns: repeat(2, 1fr); }
  .falc-card { flex-direction: column; text-align: center; }
  .falc-picto { width: 60px; height: 60px; font-size: 2.2rem; }
  .falc-picto.big { width: 80px; height: 80px; font-size: 3rem; }
  .falc-address, .falc-tip, .falc-help li { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wz-nav li { min-width: 80px; font-size: .78rem; }
  .wz-actions { flex-wrap: wrap; }
  .wz-save { width: 100%; order: -1; }
  .sd-meta { gap: 10px; font-size: .82rem; }
  .sd-price-grid { grid-template-columns: 1fr; }
  .sd-breakdown > div { grid-template-columns: 100px 1fr 40px; font-size: .82rem; }
  .kiosk-app { padding: 12px; gap: 12px; }
  .kiosk-top { grid-template-columns: 1fr; text-align: center; }
  .kiosk-tiles { grid-template-columns: repeat(2, 1fr); }
  .kiosk-tile { min-height: 130px; padding: 18px 10px; }
  .kiosk-icon { font-size: 2.2rem; }
  .kiosk-tile b { font-size: 1rem; }
  .kiosk-bottom { grid-template-columns: 1fr; }
  .ck-row { grid-template-columns: 1fr; gap: 14px; }
  .ck-actions { justify-content: flex-start; }
  .plu-map { min-height: 300px; }
  .plu-zone-card header { grid-template-columns: 54px 1fr; }
  .tb-kpi-grid, .tb-datasets, .tb-perf-grid { grid-template-columns: 1fr; }
  .tb-bars li { grid-template-columns: 120px 1fr; }
  .gl-grid, .vd-grid { grid-template-columns: 1fr; }
  .tr-head { grid-template-columns: 48px 1fr; gap: 12px; }
  .tr-card { padding: 20px; }
  .so-bars li, .so-mini-bars li { grid-template-columns: 1fr; gap: 4px; }
  .ag-services { grid-template-columns: 1fr; }
  .ag-dir summary { grid-template-columns: 40px 1fr auto; padding: 16px 18px; }
  .ag-dir-body { padding: 0 18px 18px; }
  .gl-lb-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .gl-lb-prev, .gl-lb-next { width: 44px; height: 44px; }
  .gl-lb-img { height: 60vh; }
  .ec-aides, .ec-partners { grid-template-columns: 1fr; }
  .pk-grid { grid-template-columns: 1fr; }
  .pk-alt { grid-template-columns: repeat(2, 1fr); }
  .pk-card { padding: 18px 20px; }
  .api-limits { grid-template-columns: 1fr; }
  .api-quick { gap: 10px; }
  .api-endpoint { padding: 20px 18px; }
  .api-code { font-size: .78rem; padding: 14px 16px; }
  .doc-garanties, .cs-services { grid-template-columns: 1fr; }
  .sa-dispo-grid { grid-template-columns: 1fr; }
  .sa-ages { grid-template-columns: repeat(2, 1fr); }
  .sa-cls { grid-template-columns: 1fr; }
  .st-stats-small { grid-template-columns: 1fr 1fr; }
  .in-partners-grid { grid-template-columns: 1fr; }
  .in-atelier { grid-template-columns: 64px 1fr; gap: 12px; padding: 16px; }
  .in-pn-card { padding: 20px; }
  .in-pn-amount b { font-size: 2.6rem; }
  .fe-calendar { grid-template-columns: 1fr; }
  .fe-month ul li { grid-template-columns: 42px 1fr; }
  .al-filters { position: static; }
  .al-search { grid-template-columns: 20px 1fr; }
  .al-search select { display: none; }
  .pa-labels, .pa-links-grid { grid-template-columns: 1fr; }
  .pa-card { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; }
  .pa-logo { width: 56px; height: 56px; font-size: .82rem; }
  .bc-coin { width: 200px; height: 200px; }
  .bc-coin-total { font-size: 2.2rem; }
  .bc-slice { grid-template-columns: 52px 1fr; padding: 10px 12px; }
  .bc-result-total b { font-size: 2.2rem; }
  .cs-cell { min-height: 42px; padding: 4px 2px; font-size: .75rem; }
  .cs-tag { font-size: .6rem; padding: 1px 4px; }
  .cs-year { padding-left: 24px; }
  .cs-year::before { left: 4px; }
  .cs-period .cs-dot { left: -26px; top: 18px; width: 12px; height: 12px; }
  .cs-period { padding: 14px 18px; }
  .cs-now-tag { position: static; display: inline-block; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .top, .foot-legal, .mainnav, .a11y-fab, .search-modal, .chat-form, .article-toolbar { display: none !important; }
}


/* ============================================================
   Icônes inline (remplacement runtime emoji → SVG Lucide)
   ============================================================ */
.emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: -0.18em;
  margin: 0 0.05em;
  flex-shrink: 0;
  color: currentColor;
}
.emoji-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Tailles dérivées par contexte */
h1 .emoji-icon, h2 .emoji-icon { --icon-size: 0.85em; }
.btn .emoji-icon, .badge .emoji-icon, .tag .emoji-icon { --icon-size: 1em; }
.eyebrow .emoji-icon, small .emoji-icon { --icon-size: 1em; vertical-align: -0.2em; }
.a11y-fab .emoji-icon { --icon-size: 1.3em; }

/* ============================================================
   Pages détail dynamiques (actualité / événement)
   ============================================================ */
.article-main { padding: 32px 0 64px; }
.wrap.narrow { max-width: 780px; }

.detail-skeleton .sk-h1,
.detail-skeleton .sk-meta,
.detail-skeleton .sk-img,
.detail-skeleton .sk-p {
  background: linear-gradient(90deg, var(--mist) 0%, var(--cream) 50%, var(--mist) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite ease-in-out;
  border-radius: 8px;
  margin-bottom: 16px;
}
.detail-skeleton .sk-h1   { height: 40px; width: 70%; }
.detail-skeleton .sk-meta { height: 18px; width: 50%; }
.detail-skeleton .sk-img  { height: 280px; width: 100%; border-radius: 14px; margin: 24px 0; }
.detail-skeleton .sk-p    { height: 14px; width: 100%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.article-head { margin-bottom: 24px; }
.article-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 12px 0 8px; }
.article-meta { color: var(--muted); font-size: 0.95rem; }
.article-meta time { font-weight: 600; }
.article-hero { margin: 24px 0 32px; }
.article-hero img {
  width: 100%; height: auto; max-height: 480px; object-fit: cover;
  border-radius: 14px; display: block;
}
.article-content { line-height: 1.7; }
.article-lead { font-size: 1.15rem; color: var(--ink); font-weight: 500; margin-bottom: 20px; }
.article-content h2 { font-size: 1.4rem; margin: 32px 0 12px; }
.article-content ul { padding-left: 24px; margin: 12px 0; }
.article-content li { margin-bottom: 6px; }

.article-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 16px;
}
.article-share { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; }
.share-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mist); color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s;
}
.share-btn:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }

/* Événement : grosse date à gauche */
.event-head { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.event-date-big {
  flex-shrink: 0;
  background: var(--ink); color: #fff;
  width: 96px; height: 96px;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.event-date-big .ed-day { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.event-date-big .ed-month { font-size: 0.9rem; letter-spacing: 0.1em; margin-top: 4px; color: var(--terra-soft); }

.event-detail .event-actions {
  display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap;
}
.event-meta-list {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px;
  background: var(--cream); padding: 20px; border-radius: 12px; margin: 24px 0;
}
.event-meta-list dt { font-weight: 700; color: var(--ink); }
.event-meta-list dd { margin: 0; color: var(--muted); }

.detail-notfound { padding: 64px 0; text-align: center; }
.detail-notfound h1 { font-size: 2rem; margin-bottom: 16px; }
.detail-error { padding: 32px 0; text-align: center; color: var(--danger); }

/* ============================================================
   Polish Lighthouse — font-display swap (anti-FOIT / CLS)
   La police Inter doit afficher du texte fallback immédiatement,
   puis basculer sur Inter une fois chargée. Évite l'écran blanc.
   ============================================================ */
@font-face {
  font-family: 'Inter Fallback';
  font-display: swap;
  size-adjust: 107%;
  ascent-override: 90%;
  src: local('Arial');
}
:root {
  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ============================================================
   Carte interactive — pins, popups, sidebar
   ============================================================ */
.map-main { padding: 0; }
.map-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 220px);
  min-height: 600px;
}
.map-sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 20px;
  overflow-y: auto;
}
.map-sidebar .ms-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.map-sidebar .ms-head h2 {
  margin: 0; font-size: 1.1rem;
}
.map-sidebar .btn.small {
  font-size: .82rem; padding: 6px 12px;
}
.map-sidebar fieldset {
  border: none; padding: 0; margin: 0 0 18px;
}
.map-sidebar legend {
  font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 8px;
}
.map-sidebar label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; cursor: pointer; font-size: .92rem;
  transition: color .15s;
}
.map-sidebar label:hover { color: var(--ink); }
.map-sidebar label .dot {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%; flex-shrink: 0;
}
.map-sidebar label .poi-count {
  margin-left: auto; font-size: .75rem;
  background: var(--mist); color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}

.map-sidebar .ms-search {
  position: relative; margin-bottom: 16px;
}
.map-sidebar .ms-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .9rem;
}
.map-sidebar .ms-search input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: inherit; font-size: .92rem;
  background: var(--cream);
  transition: border-color .15s, background .15s;
}
.map-sidebar .ms-search input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--paper);
}

.map-sidebar .ms-foot {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.map-sidebar .ms-foot p { margin-bottom: 8px; }

#map {
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* Pins POI : pastille colorée + icône FA + flèche dirigée vers le sol */
.poi-pin {
  background: transparent;
  border: none;
}
.poi-pin-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid #fff;
  transition: transform .2s ease;
}
.poi-pin-inner i {
  transform: rotate(45deg); /* contre-rotation pour remettre l'icône droite */
}
.poi-pin:hover .poi-pin-inner {
  transform: rotate(-45deg) scale(1.12);
}

/* Popup style Lieusaint (au lieu du style Leaflet par défaut) */
.poi-popup-wrapper .leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 40px -10px rgba(27, 42, 94, 0.3);
}
.poi-popup-wrapper .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  font-family: var(--font-sans);
}
.poi-popup-wrapper .leaflet-popup-tip {
  background: var(--paper);
  box-shadow: 0 6px 12px -2px rgba(27, 42, 94, 0.15);
}

.poi-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
}
.poi-popup-head i {
  font-size: 1.15rem;
}
.poi-popup-cat {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: .72rem;
  opacity: 0.95;
}
.poi-popup h3 {
  margin: 14px 18px 8px;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.25;
}
.poi-popup .poi-addr,
.poi-popup .poi-hours,
.poi-popup .poi-desc {
  margin: 0 18px 8px;
  font-size: .87rem;
  line-height: 1.4;
}
.poi-popup .poi-addr,
.poi-popup .poi-hours {
  color: var(--muted);
}
.poi-popup .poi-addr i,
.poi-popup .poi-hours i {
  margin-right: 6px;
  color: var(--teal);
  width: 12px;
}
.poi-popup .poi-desc {
  color: var(--ink);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.poi-popup .poi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.poi-popup .popup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.poi-popup .popup-link:hover {
  background: var(--mist);
  border-color: var(--teal);
}
.poi-popup .popup-link-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.poi-popup .popup-link-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
}
.poi-popup .popup-link i {
  font-size: .8rem;
}

/* Responsive : sidebar passe au-dessus sur mobile */
@media (max-width: 840px) {
  .map-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .map-sidebar {
    max-height: 280px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  #map {
    height: 60vh;
    min-height: 400px;
  }
}

/* ============================================================
   RESPONSIVE TABLETTE (768–1199px)
   Cible : iPad portrait, iPad Air, Samsung Tab, Surface Go
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {

  /* === Container width === */
  .wrap { padding-left: 24px; padding-right: 24px; }

  /* === Header === */
  .top { padding: 12px 0; }
  .top-grid {
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
  }
  .top-actions { display: flex; gap: 8px; }
  .top-actions .btn { padding: 8px 14px; font-size: 0.88rem; }
  .top-actions .btn-ghost { display: inline-flex; }
  .brand-text strong { font-size: 1.1rem; }
  .brand-text small { font-size: 0.72rem; }
  .search-trigger {
    display: inline-flex;
    padding: 8px 14px;
    font-size: 0.88rem;
    max-width: 320px;
  }
  .search-trigger kbd { display: none; } /* gain de place */
  .burger { display: none; }

  /* Navigation principale : éviter le wrap */
  .mainnav ul {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .mainnav ul::-webkit-scrollbar { height: 4px; }
  .mainnav a {
    padding: 10px 12px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* === Hero accueil === */
  .hero { padding: clamp(40px, 6vw, 72px) 0; }
  .hero-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
  }
  .hero h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .quick-grid a { padding: 12px; font-size: 0.88rem; }

  /* === Personas (6 colonnes → 3) === */
  .persona-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* === Split sections : 2 colonnes ratio 1.4/1 === */
  .split-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
  }

  /* === Card grids === */
  .news-grid       { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .services-grid   { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .dir-grid        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pillars-grid    { grid-template-columns: repeat(2, 1fr); }
  .dm-cards        { grid-template-columns: repeat(2, 1fr); }
  .dm-help-cards   { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .proj-grid       { grid-template-columns: repeat(2, 1fr); }
  .stats-row       { grid-template-columns: repeat(4, 1fr); }
  .card-row        { grid-template-columns: 1fr 1fr; gap: 16px; }
  .events-big      { grid-template-columns: 1fr; }

  /* === Footer 4 colonnes → 2 colonnes === */
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .foot-brand { grid-column: 1 / -1; max-width: 540px; }

  /* === Carte interactive === */
  .map-layout {
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 200px);
  }
  .map-sidebar { padding: 16px; }
  .map-sidebar label { font-size: 0.88rem; padding: 5px 0; }

  /* === Chatbot === */
  .chat-layout {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  .chat-aside h2 { font-size: 0.95rem; }
  .chat-aside .chip { font-size: 0.82rem; padding: 8px 12px; }

  /* === Pages détail === */
  .wrap.narrow { max-width: 92%; padding: 0 24px; }
  .article-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
  .article-hero img { max-height: 360px; }
  .event-date-big { width: 84px; height: 84px; }
  .event-date-big .ed-day { font-size: 1.8rem; }
  .event-meta-list { grid-template-columns: 140px 1fr; }

  /* === Démarches === */
  .dm-featured { grid-template-columns: 1fr 1fr; }
  .dm-help-grid { grid-template-columns: 1fr; }
  .dm-help-cards { grid-template-columns: repeat(3, 1fr); }

  /* === Wizard === */
  .wz-stepper { gap: 6px; }
  .wz-stepper .wz-step-label { font-size: 0.78rem; }

  /* === Annuaires === */
  .annuaires-grid, .ag-grid { grid-template-columns: repeat(2, 1fr); }

  /* === Élus / commissions === */
  .elu-grid, .commissions-grid, .axes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ville-links { grid-template-columns: repeat(3, 1fr); }
  .ville-intro-grid { grid-template-columns: 1fr; }

  /* === Mon espace === */
  .me-hero-grid { grid-template-columns: 1.2fr 1fr; }
  .me-grid { grid-template-columns: 1fr; }
  .me-sum-grid { grid-template-columns: repeat(4, 1fr); }
  .me-kids { grid-template-columns: 1fr; }
  .vs-grid { grid-template-columns: repeat(3, 1fr); }

  /* === Signalement === */
  .sig-grid { grid-template-columns: 1.2fr 1fr; }
  .sig-form .row { grid-template-columns: 1fr 1fr; }
  .sig-types { grid-template-columns: repeat(3, 1fr); }
  .sig-aside { position: static; }

  /* === Salle / réservation === */
  .hall-card { grid-template-columns: 1fr; }
  .hall-img { min-height: 220px; }
  .hall-book-grid { grid-template-columns: 1.2fr 1fr; }
  .booking-panel { position: static; }

  /* === Participation === */
  .part-grid { grid-template-columns: repeat(2, 1fr); }
  .bot-grid { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-stats { grid-template-columns: repeat(4, 1fr); }
  .alerts-grid { grid-template-columns: repeat(2, 1fr); }

  /* === FAQ / accordion === */
  .faq-search { max-width: 540px; }

  /* === Erreurs / 404 === */
  .err-illus span { font-size: 8rem; }
  .err-links ul { grid-template-columns: repeat(2, 1fr); }

  /* === Touch targets ≥ 44px (WCAG 2.5.5) === */
  .btn, .chip, .quick-grid a, .persona-grid a {
    min-height: 44px;
  }
  .a11y-fab > button {
    width: 56px; height: 56px;
  }
  .social a {
    width: 44px; height: 44px;
  }
  .share-btn {
    width: 44px; height: 44px;
  }

  /* === Wizard progress en haut === */
  .wz-actions {
    gap: 12px;
    flex-wrap: wrap;
  }
  .wz-actions .btn {
    padding: 12px 18px;
  }

  /* === Mega menu : pas de fly-out sur tablette tactile === */
  .mega-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  /* === Tables responsives === */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* === Cookie banner === */
  .cookie-banner .cb-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 18px;
  }

  /* === Toast légèrement plus large === */
  .toast { max-width: min(480px, calc(100vw - 32px)); }
}

/* ============================================================
   AJUSTEMENT TABLET LANDSCAPE (1024–1199)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-grid { grid-template-columns: 1.5fr 1fr; }
  .persona-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .persona-grid a { padding: 14px 10px; }
  .persona-grid a b { font-size: 0.95rem; }
  .persona-grid a span { font-size: 0.78rem; }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
  .map-layout { grid-template-columns: 300px 1fr; }
}

/* ============================================================
   ORIENTATION : si tablette en paysage, on remet le mega menu
   ============================================================ */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1199px) {
  .mega-menu {
    position: absolute;
  }
}
/* ============================================================
   RESPONSIVE MOBILE (≤ 767px)
   Cible : iPhone SE/14, Pixel, Galaxy S, mobile portrait & paysage
   ============================================================ */

/* === iOS safe areas (notch / home bar) === */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 767px) {

  /* === Container padding ajusté + safe areas === */
  .wrap {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }

  /* === Typographie mobile === */
  body { font-size: 15px; }
  h1   { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; }
  h2, .section-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  h3   { font-size: 1.1rem; }
  .lead { font-size: 1rem; }

  /* === Header sticky + safe-top === */
  .top {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding-top: max(8px, var(--safe-top));
    padding-bottom: 8px;
    box-shadow: 0 2px 8px -4px rgba(27, 42, 94, 0.08);
  }
  .top-grid {
    /* brand stretches, boutons packés à droite */
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 0;
    align-items: center;
  }
  .brand .brand-logo { width: 38px; height: 44px; }
  .brand-text strong { font-size: 1.05rem; }
  .brand-text small  { font-size: 0.7rem; }

  /* Bouton search en icône seul (visible sur mobile) — taille via variable */
  .top-grid .search-trigger {
    --iconbtn-size: 40px;
    display: inline-flex !important;
    align-items: center;
    padding: 0;
    border-radius: 50%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    color: var(--ink);
    width: var(--iconbtn-size);
    height: var(--iconbtn-size);
    min-width: var(--iconbtn-size) !important;  /* override le min-width:260px de la base */
    max-width: var(--iconbtn-size);
    min-height: var(--iconbtn-size);
    flex: 0 0 var(--iconbtn-size);
    justify-content: center;
    aspect-ratio: 1 / 1;
  }
  .top-grid .search-trigger svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
  }
  .top-grid .search-trigger:active {
    background: var(--mist);
    transform: scale(0.96);
  }
  .top-grid .search-trigger span,
  .top-grid .search-trigger kbd { display: none; }
  .top-actions { display: none !important; }
  .burger {
    --iconbtn-size: 40px;
    display: block !important;
    width: var(--iconbtn-size);
    height: var(--iconbtn-size);
    min-width: var(--iconbtn-size);
    min-height: var(--iconbtn-size);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1;
    justify-self: end;
  }
  .burger:active {
    background: var(--mist);
    transform: scale(0.96);
  }
  .burger span {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, opacity .25s;
  }
  .burger span:nth-child(1) { top: 13px; }
  .burger span:nth-child(2) { top: 19px; }
  .burger span:nth-child(3) { top: 25px; }
  .burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }

  /* === Mega-nav cachée, drawer prend le relais === */
  .mainnav { display: none; }

  /* === Mobile-nav drawer === plein écran, fond clair, typo généreuse */
  .mobile-nav-close {
    position: absolute;
    top: max(16px, calc(var(--safe-top) + 12px));
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1;
  }
  .mobile-nav-close:active {
    background: var(--mist);
    transform: scale(0.96);
  }
  .mobile-nav {
    position: fixed;
    top: 0; right: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    /* Fermé : invisible + hors-écran via visibility (sans contribuer au document width) */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s;
    z-index: 95;
    padding: max(72px, calc(var(--safe-top) + 64px)) 24px max(24px, var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav.open {
    visibility: visible;
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
  }
  .mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
  .mobile-nav li:last-child { border-bottom: 0; }
  .mobile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 8px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    transition: color .15s, padding-left .15s;
    min-height: 52px;
    border-radius: 0;
  }
  .mobile-nav a:hover, .mobile-nav a:focus-visible {
    color: var(--leaf-400);
    padding-left: 16px;
  }
  .mobile-nav a.current {
    color: var(--leaf-400);
    border-left: 3px solid var(--leaf-400);
    padding-left: 13px;
    background: transparent;
  }

  /* Pas de backdrop : le drawer prend 100vw donc le couvre déjà */
  .mobile-nav-backdrop { display: none; }

  /* === Hero accueil mobile === */
  .hero { padding: 28px 0 36px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero .eyebrow { font-size: 0.78rem; }
  .hero .cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero .cta .btn { width: 100%; justify-content: center; padding: 14px 18px; }
  .hero-note { font-size: 0.78rem; flex-wrap: wrap; gap: 4px 12px; display: flex; }
  .quick {
    padding: 20px;
    border-radius: 14px;
  }
  .quick-grid { grid-template-columns: 1fr; gap: 8px; }
  .quick-grid a { padding: 14px 12px; font-size: 0.92rem; }

  /* === Personas (2 cols) === */
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .persona-grid a {
    padding: 14px 12px;
    min-height: 86px;
  }
  .persona-grid a b { font-size: 0.95rem; }
  .persona-grid a span { font-size: 0.78rem; }

  /* === Cards / news === */
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
  .card-media { aspect-ratio: 16 / 9; min-height: 0; }
  .card-feature .card-media { aspect-ratio: 16/9; }
  .card-body { padding: 16px; }
  .card-body h3 { font-size: 1.05rem; }
  .card-body p { font-size: 0.92rem; }

  /* === Agenda events === */
  .events ul, .events { gap: 12px; }
  .events li {
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 14px 0;
  }
  .events time {
    width: 56px;
    padding: 8px 4px;
  }
  .events time b { font-size: 1.4rem; }
  .events time span { font-size: 0.7rem; }
  .event-card {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 14px;
  }
  .event-card time {
    width: 64px;
    padding: 8px 4px;
  }
  .event-card time b { font-size: 1.6rem; line-height: 1; }
  .event-card .event-body h3 { font-size: 1.05rem; }
  .event-actions {
    flex-direction: column;
    gap: 8px;
  }
  .event-actions .btn { width: 100%; justify-content: center; }
  .event-actions .link { text-align: center; }

  /* === Pages détail === */
  .article-main { padding: 16px 0 40px; }
  .wrap.narrow { max-width: 100%; padding: 0 16px; }
  .article-head h1 { font-size: clamp(1.5rem, 6vw, 2rem); margin: 10px 0 6px; }
  .article-hero { margin: 16px 0 24px; }
  .article-hero img {
    max-height: 240px;
    border-radius: 10px;
  }
  .article-content { font-size: 1rem; line-height: 1.6; }
  .article-lead { font-size: 1.05rem; }
  .article-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .article-share { justify-content: center; }
  .event-head { flex-direction: column; gap: 14px; }
  .event-date-big { width: 72px; height: 72px; }
  .event-date-big .ed-day { font-size: 1.6rem; }
  .event-meta-list {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 4px 0;
  }
  .event-meta-list dt { margin-top: 8px; }
  .event-meta-list dt:first-child { margin-top: 0; }

  /* === Carte mobile === */
  .map-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .map-sidebar {
    max-height: 220px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .map-sidebar .ms-head h2 { font-size: 0.95rem; }
  .map-sidebar fieldset { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
  .map-sidebar legend { font-size: 0.72rem; width: 100%; }
  .map-sidebar fieldset label {
    flex: 0 0 calc(50% - 3px);
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    margin: 0;
  }
  .map-sidebar fieldset label .poi-count {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 1px 6px;
  }
  #map {
    height: calc(100vh - 320px);
    min-height: 360px;
  }

  /* === Chatbot mobile === */
  .chat-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chat-aside {
    position: static;
    order: 2;
  }
  .chat-aside h2 { font-size: 0.95rem; margin: 16px 0 8px; }
  .chat-aside .chips.vertical { flex-direction: row; flex-wrap: wrap; }
  .chat-aside .chip { font-size: 0.82rem; padding: 8px 12px; }
  .chat-main { order: 1; }
  .chat-log {
    min-height: 320px;
    max-height: 60vh;
  }
  .chat-form { gap: 8px; }
  .chat-form input {
    font-size: 16px; /* éviter le zoom iOS */
    padding: 12px 14px;
  }
  .chat-form .btn { padding: 12px; width: 48px; }

  /* === Forms mobile === */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .form-row, .row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  fieldset { padding: 0; border: none; }

  /* === Buttons === */
  .btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.95rem;
  }
  .btn-primary, .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .btn-inline-mobile,
  .actions-inline .btn {
    width: auto;
  }

  /* === Filter chips horizontal scroll === */
  .chips:not(.vertical) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .chips::-webkit-scrollbar { height: 4px; }
  .chip, .chip-reset {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 40px;
  }

  /* === Footer mobile === */
  .foot { padding-top: 32px; padding-bottom: max(20px, var(--safe-bottom)); }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .foot-logo img { width: 48px; height: 48px; }
  .foot-logo-text strong { font-size: 1.25rem; }
  .foot-brand p { font-size: 0.88rem; }
  .foot h3 { font-size: 0.85rem; margin-bottom: 10px; }
  .foot a { font-size: 0.92rem; padding: 6px 0; display: inline-block; }
  .foot-legal {
    text-align: center;
    font-size: 0.78rem;
    padding: 16px 16px max(16px, var(--safe-bottom));
  }
  .foot-legal a { display: inline-block; padding: 4px 6px; }
  .eco-badge { font-size: 0.72rem; justify-content: center; }
  .social {
    margin-top: 12px;
    justify-content: flex-start;
  }

  /* === A11y FAB & toast (placement safe-area) === */
  .a11y-fab {
    bottom: calc(20px + var(--safe-bottom));
    right: 16px;
  }
  .a11y-fab > button {
    width: 52px; height: 52px;
  }
  .a11y-fab > button i.fa-universal-access { font-size: 1.25rem; }
  .a11y-panel {
    right: 0;
    bottom: 60px;
    max-width: calc(100vw - 32px);
  }
  .toast {
    bottom: calc(16px + var(--safe-bottom));
    left: 16px; right: 16px;
    transform: translateY(20px);
    max-width: none;
    width: auto;
  }
  .toast.show { transform: translateY(0); }

  /* === Cookie banner mobile === */
  .cookie-banner {
    left: 12px; right: 12px;
    bottom: calc(12px + var(--safe-bottom));
    max-width: none;
  }
  .cookie-banner .cb-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  .cookie-banner .cb-actions {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%;
  }
  .cookie-banner .cb-actions .btn { width: 100%; }

  /* === Wizard mobile === */
  .wz-stepper {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 8px;
  }
  .wz-stepper > * { flex-shrink: 0; min-width: 120px; }
  .wz-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .wz-actions .btn { width: 100%; }

  /* === Quick stats / value tiles === */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-row > * { padding: 16px 12px; }

  /* === Tables mobile : scroll horizontal === */
  .table-responsive, table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-width: 100%;
  }

  /* === Helpers === */
  .desktop-only,
  .hide-mobile { display: none !important; }
  .mobile-only { display: block; }
}

/* ============================================================
   PETITES MOBILES (≤ 380px) — iPhone SE
   ============================================================ */
@media (max-width: 380px) {
  body { font-size: 14.5px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 1.5rem; }
  .brand-text small { display: none; }
  .persona-grid { grid-template-columns: 1fr; }
  .quick-grid a { padding: 12px 10px; font-size: 0.88rem; }
  .top-grid .search-trigger,
  .burger {
    --iconbtn-size: 36px;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
  }
  .brand .brand-logo { width: 34px; height: 40px; }
}

/* ============================================================
   LANDSCAPE MOBILE (≤ 767 + height < 480) — éviter perte verticale
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 480px) {
  .hero { padding: 16px 0 24px; }
  .top { position: static; }
  .hero h1 { font-size: 1.5rem; }
  .chat-log { max-height: 40vh; }
}

/* ---------- Attribution Leaflet : discrète mais légalement présente (ODbL) ---------- */
.leaflet-control-attribution {
  background: rgba(255,255,255,0.5) !important;
  font-size: 9px !important;
  padding: 1px 4px !important;
  color: #888 !important;
  opacity: 0.55;
  transition: opacity .2s;
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a {
  color: #666 !important;
  text-decoration: none !important;
}