:root {
  --navy: #222029;
  --bleu: #34303A;
  --jaune: #DDDDE3;
  --blanc: #FFFFFF;
  --teinte: #F3F3F5;
  --teinte-forte: #D9D9DF;
  --texte-doux: #66616C;
  --texte-doux-clair: #D9D5DF;
  --rayon: 4px;
  --largeur: 1200px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}



*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy);
  background: var(--blanc);
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

svg {
  max-width: 100%;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--jaune);
  color: var(--navy);
  font-weight: 700;
}

.lien-evitement:focus {
  top: 0.75rem;
}



:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

.entete :focus-visible,
.heros__intro :focus-visible,
.bloc--navy :focus-visible,
.pied :focus-visible {
  outline-color: var(--jaune);
}



.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.bouton--petit {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
}

.bouton--jaune {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--navy);
}

.bouton--bleu {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.bouton--contour-clair {
  background: transparent;
  border-color: var(--blanc);
  color: var(--blanc);
}



.entete {
  background: var(--navy);
  color: var(--blanc);
}

.entete__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 0.75rem;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--blanc);
}

.logo__info {
  color: var(--jaune);
}

.etiquette-beta {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--texte-doux-clair);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-doux-clair);
}

.menu-bouton {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--blanc);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menu-bouton__barres,
.menu-bouton__barres::before,
.menu-bouton__barres::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
}

.menu-bouton__barres {
  position: relative;
}

.menu-bouton__barres::before,
.menu-bouton__barres::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bouton__barres::before { top: -6px; }
.menu-bouton__barres::after { top: 6px; }

.menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.menu__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.menu__lien {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--blanc);
}

.menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


@media (max-width: 859px) {
  .js .menu-bouton {
    display: inline-flex;
  }

  .js .menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-block: 0.5rem 0.75rem;
    border-top: 1px solid var(--bleu);
  }

  .js .menu.est-ouvert {
    display: flex;
  }

  .js .menu__liste {
    flex-direction: column;
    gap: 0;
  }

  .js .menu__lien {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--bleu);
  }

  .js .menu__actions .bouton {
    flex: 1 1 10rem;
  }
}



.heros {
  background: var(--bleu);
  color: var(--blanc);
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

.heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.heros__intro {
  min-width: 0;
}

.heros__titre {
  font-size: clamp(2.5rem, 9vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.heros__ligne {
  display: block;
}

.heros__ligne--jaune {
  color: var(--jaune);
}

.heros__texte {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: var(--texte-doux-clair);
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.heros__pilote {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--texte-doux-clair);
}

.pastille {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--jaune);
}

@media (min-width: 960px) {
  .heros__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
  }
}



.carte {
  min-width: 0;
  padding: 1rem;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--navy);
}

.carte__nom {
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--jaune);
  font-size: 1.1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.carte__cadre {
  margin-top: 0.75rem;
}

.carte__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
}

.carte__svg[hidden] {
  display: none;
}

.carte__etat {
  padding: 2rem 0.5rem;
  text-align: center;
  color: var(--texte-doux);
}

.carte__etat[hidden] {
  display: none;
}

.carte__aide {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.carte__commune path {
  fill: var(--teinte-forte);
  stroke: var(--navy);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.carte__commune--pilote path {
  fill: var(--jaune);
}

.carte__commune:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

.carte__commune:focus-visible path,
.carte__commune.est-actif path {
  stroke-width: 3;
}

.carte__commune:focus-visible path,
.carte__commune.est-actif path {
  fill: var(--bleu);
}

.carte__commune--pilote:focus-visible path,
.carte__commune--pilote.est-actif path {
  fill: var(--jaune);
}



.bloc {
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.bloc--navy {
  background: var(--navy);
  color: var(--blanc);
}

.bloc--teinte {
  background: var(--teinte);
}

.bloc__titre {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bloc__intro {
  max-width: 40rem;
  margin-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--texte-doux);
}

.bloc--navy .bloc__intro {
  color: var(--texte-doux-clair);
}

.bloc__note {
  max-width: 40rem;
  margin-top: 2.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--jaune);
  color: var(--texte-doux);
}



.recherche {
  max-width: 34rem;
  margin-top: 2rem;
}

.recherche[hidden] {
  display: none;
}

.recherche__label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.recherche__ligne {
  display: flex;
  gap: 0.5rem;
}

.recherche__champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--navy);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--navy);
  font: inherit;
  font-size: 16px;
}

.recherche__bouton {
  flex: none;
}

.recherche__resultat {
  margin-top: 0.75rem;
  overflow-wrap: anywhere;
}

.recherche__resultat:empty {
  display: none;
}

.recherche__message {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--jaune);
  background: var(--teinte);
  font-weight: 600;
}

.recherche__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.recherche__suggestions a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--bleu);
  border-radius: var(--rayon);
  font-weight: 700;
  text-decoration: none;
}



.communes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 2rem;
}

.commune {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  height: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--navy);
  border-radius: var(--rayon);
  background: var(--blanc);
  text-decoration: none;
}

.commune__nom {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.commune__nl {
  font-size: 0.9rem;
  color: var(--texte-doux);
  overflow-wrap: anywhere;
}

.commune__pilote {
  flex-basis: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.commune--pilote {
  background: var(--jaune);
  border-color: var(--navy);
}

.commune--pilote .commune__nl {
  color: var(--navy);
}

.commune.est-actif {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.commune.est-actif .commune__nl {
  color: var(--texte-doux-clair);
}

.commune--pilote.est-actif {
  background: var(--jaune);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy);
}

.commune--pilote.est-actif .commune__nl {
  color: var(--navy);
}

@media (min-width: 560px) {
  .communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .communes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .communes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}



.sujets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.sujet {
  position: relative;
  display: block;
  height: 100%;
  min-height: 11rem;
  padding: 1.5rem 3.5rem 1.5rem 1.5rem;
  border: 2px solid var(--blanc);
  border-radius: var(--rayon);
  text-decoration: none;
}

.sujet__nom {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--jaune);
}

.sujet__texte {
  display: block;
  margin-top: 0.6rem;
  color: var(--texte-doux-clair);
}

.sujet__fleche {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--jaune);
}

@media (min-width: 860px) {
  .sujets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}



.gestes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.geste {
  min-width: 0;
}

.geste__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--jaune);
  font-size: 1.5rem;
  font-weight: 800;
}

.geste__titre {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.25;
}

.geste__texte {
  margin-top: 0.5rem;
  color: var(--texte-doux);
}

@media (min-width: 860px) {
  .gestes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}



.pied {
  padding-block: 2.5rem;
  background: var(--navy);
  color: var(--blanc);
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.logo--pied {
  margin: 0;
}

.pied__texte {
  max-width: 28rem;
  margin-top: 0.75rem;
  color: var(--texte-doux-clair);
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pied__liste a {
  display: inline-block;
  padding: 0.4rem 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  .pied__grille {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}



@media (hover: hover) and (pointer: fine) {
  .bouton--jaune:hover { background: var(--blanc); border-color: var(--blanc); }
  .bouton--bleu:hover { background: var(--navy); border-color: var(--navy); }
  .bouton--contour-clair:hover { background: var(--blanc); color: var(--navy); }
  .menu__lien:hover { text-decoration: underline; text-underline-offset: 4px; }
  .recherche__suggestions a:hover { background: var(--bleu); color: var(--blanc); }
  .sujet:hover { background: var(--bleu); }
  .pied__liste a:hover { color: var(--jaune); }
  .carte__commune:hover path { stroke-width: 3; }
  .carte__commune:not(.carte__commune--pilote):hover path { fill: var(--bleu); }
}



@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .bouton,
  .commune,
  .sujet,
  .carte__commune path {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, fill 0.15s ease;
  }
}

.visuellement-cache { overflow: hidden; }

/* Identité BXLinfo : composition éditoriale et carte polychrome. */
:root { --largeur: 1320px; --rayon: 0; }
body { background: #fff; color: #222029; }
.entete { background:#fff; color:#222029; border-bottom:1px solid #dcdbe0; }
.entete__interieur { min-height:84px; gap:20px; }
.logo, .logo__info { color:#222029; }
.logo { font-size:30px; letter-spacing:-.065em; font-weight:900; }
.etiquette-beta { color:#66616c; border-color:#dcdbe0; font-size:10px; letter-spacing:.12em; border-radius:0; }
.bouton { border-radius:999px; font-size:15px; }
.bouton--jaune { background:#222029; color:white; border-color:#222029; }
.bouton--contour-clair { color:#222029; border-color:#222029; }
.entete .bouton--contour-clair { border-color:transparent; }
.menu-bouton { color:#222029; border-color:#222029; }
.menu-bouton__barres, .menu-bouton__barres::before, .menu-bouton__barres::after { background:#222029; }
.heros { background:white; color:#222029; padding-block:48px 64px; }
.heros__grille { gap:28px; align-items:center; }
.heros__titre { font-size:clamp(3rem,6.3vw,5.5rem); font-weight:850; letter-spacing:-.065em; line-height:1.04; }
.heros__ligne--jaune { color:#222029; font-family:Georgia,'Times New Roman',serif; font-weight:normal; font-style:italic; letter-spacing:-.05em; }
.heros__texte { color:#66616c; font-size:18px; max-width:25rem; line-height:1.65; }
.heros__pilote { color:#66616c; font-size:13px; }
.pastille { background:#222029; width:7px; height:7px; }
.heros__intro::before { content:'BRUXELLES, EN COMMUN'; display:block; font-family:monospace; letter-spacing:.13em; font-size:12px; margin-bottom:24px; }
.carte { background:transparent; padding:0; }
.carte__nom { border-bottom:1px solid #dcdbe0; font-size:15px; min-height:38px; font-weight:500; }
.carte__svg { max-height:560px; }
.carte__aide { font-size:11px; color:#66616c; margin-top:4px; }
.carte__commune path { stroke:#fff; stroke-width:2.2; }
.carte__commune--pilote path { stroke:#222029; stroke-width:2; }
.carte__commune.est-actif path, .carte__commune:focus-visible path { stroke:#222029; stroke-width:3; }
.bloc { border-top:1px solid #e6e5e9; padding-block:56px; }
.bloc--navy, .bloc--teinte { background:white; color:#222029; }
.bloc__titre { font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.05em; }
.commune { border:0; border-bottom:1px solid #dcdbe0; border-radius:0; padding:18px 4px; }
.commune--pilote { background:#f1f0f3; color:#222029; border-bottom:2px solid #222029; }
.commune__pilote { font-size:9px; letter-spacing:.08em; }
.sujet { border:0; border-top:3px solid #222029; padding:24px 28px 30px 0; min-height:160px; }
.sujet:nth-child(1) { border-top-color:#dd765f; }
.sujet:nth-child(2) { border-top-color:#9885b6; }
.sujet:nth-child(3) { border-top-color:#cf9b50; }
.sujet__nom { color:#222029; font-size:28px; letter-spacing:-.045em; }
.sujet__texte { color:#66616c; }
.sujet__fleche { color:#222029; right:4px; }
.geste__numero { background:transparent; border:1px solid #aaa4b2; color:#222029; border-radius:0; width:38px; height:38px; font:18px monospace; }
.pied { background:#f3f3f5; color:#222029; border-top:1px solid #dcdbe0; }
.pied__texte { color:#66616c; }
.entete :focus-visible,.heros__intro :focus-visible,.bloc--navy :focus-visible,.pied :focus-visible { outline-color:#222029; }
@media (hover:hover) and (pointer:fine) {
 .bouton--jaune:hover { background:#4a444f; border-color:#4a444f; color:white; }
 .bouton--contour-clair:hover { background:#f1f0f3; color:#222029; }
 .sujet:hover { background:#f3f3f5; }
 .pied__liste a:hover { color:#222029; }
 .commune:hover { background:#f1f0f3; color:#222029; }
}
@media (min-width:960px) { .heros__grille { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; } }
@media (max-width:859px) { .menu { background:#fff; color:#222029; border-top:1px solid #ddd; } .entete__interieur{min-height:70px;gap:10px;} }
@media (max-width:600px) { .heros { padding-block:32px 40px; } .heros__titre { font-size:clamp(42px,12vw,66px); } .heros__texte{font-size:16px;} .heros__intro::before{font-size:10px;} .heros__grille{gap:36px;} .bloc{padding-block:40px;} }

.carte__commune[data-slug="anderlecht"] path { fill:#EF8D75; }
.carte__commune[data-slug="auderghem"] path { fill:#B6A2CF; }
.carte__commune[data-slug="berchem-sainte-agathe"] path { fill:#E2B36D; }
.carte__commune[data-slug="bruxelles-ville"] path { fill:#AEBBC6; }
.carte__commune[data-slug="etterbeek"] path { fill:#D5CCD6; }
.carte__commune[data-slug="evere"] path { fill:#EF8D75; }
.carte__commune[data-slug="forest"] path { fill:#B6A2CF; }
.carte__commune[data-slug="ganshoren"] path { fill:#E2B36D; }
.carte__commune[data-slug="ixelles"] path { fill:#AEBBC6; }
.carte__commune[data-slug="jette"] path { fill:#D5CCD6; }
.carte__commune[data-slug="koekelberg"] path { fill:#EF8D75; }
.carte__commune[data-slug="molenbeek-saint-jean"] path { fill:#B6A2CF; }
.carte__commune[data-slug="saint-gilles"] path { fill:#E2B36D; }
.carte__commune[data-slug="saint-josse-ten-noode"] path { fill:#AEBBC6; }
.carte__commune[data-slug="schaerbeek"] path { fill:#D5CCD6; }
.carte__commune[data-slug="uccle"] path { fill:#EF8D75; }
.carte__commune[data-slug="watermael-boitsfort"] path { fill:#B6A2CF; }
.carte__commune[data-slug="woluwe-saint-lambert"] path { fill:#E2B36D; }
.carte__commune[data-slug="woluwe-saint-pierre"] path { fill:#AEBBC6; }
@media (hover:hover) and (pointer:fine) { .carte__commune:hover path { opacity:.82; } }

.menu__lien { color:#222029; }
.bloc--navy .bloc__texte, .bloc--navy .bloc__intro { color:#66616c; }
.sujets > :nth-child(2) .sujet, .sujets > .sujet:nth-child(2) { border-top-color:#9885b6; }
.sujets > :nth-child(3) .sujet, .sujets > .sujet:nth-child(3) { border-top-color:#cf9b50; }

.heros__intro::before { content:none; }