/* =========================================================================
   NextToYourPlace — angles.css
   Layout des pages commune SSG (refonte angle-dominant 2026-05-12).
   Map les classes des templates angles/*.html.j2 sur les tokens DS v2.
   Aucune couleur / typo ajoutée — uniquement des var(--xxx) du DS.
   ========================================================================= */

/* ==================== WRAPPER PAGE COMMUNE ==================== */
.commune-angle {
  background: var(--paper);
  padding: var(--sp-8) 0 var(--sp-12);
}
.commune-angle__inner {
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ==================== HERO ANGLE ==================== */
.angle-hero {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: var(--border-fine);
}
.angle-hero__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0 0 var(--sp-3) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.angle-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 1.1;
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-4) 0;
}
.angle-hero__lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ==================== BODY ARTICLE ==================== */
.angle-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: var(--sp-8);
}
.angle-body p {
  margin: 0 0 var(--sp-4) 0;
}
.angle-body strong {
  color: var(--ink);
  font-weight: var(--fw-semi);
}

/* ==================== SECONDARY SIGNALS ==================== */
.angle-secondary {
  background: var(--paper-ridge);
  border-left: 3px solid var(--sepia);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-8);
}
.angle-secondary__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-3) 0;
  color: var(--ink);
}
.angle-secondary__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.angle-secondary__item {
  padding: var(--sp-2) 0;
  border-bottom: var(--border-fine);
  font-size: var(--fs-body);
  color: var(--ink);
}
.angle-secondary__item:last-child {
  border-bottom: none;
}
.angle-secondary__item strong {
  font-weight: var(--fw-semi);
  color: var(--terracotta);
}

/* ==================== AFFILIATE CTA BLOCK ==================== */
.angle-affiliate {
  background: var(--paper);
  border: 1px solid var(--ink-subtle);
  border-radius: 6px;
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
}
.angle-affiliate h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-4) 0;
  color: var(--ink);
}
.angle-affiliate__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4) 0;
  display: grid;
  gap: var(--sp-4);
}
.angle-affiliate__item {
  padding: var(--sp-3) 0;
  border-bottom: var(--border-fine);
}
.angle-affiliate__item:last-child {
  border-bottom: none;
}
.angle-affiliate__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  margin: 0 0 var(--sp-2) 0;
  color: var(--ink);
}
.angle-affiliate__partner {
  margin: var(--sp-2) 0 0 0;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.angle-affiliate__disclaimer {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: var(--sp-4) 0 0 0;
}
.btn--affiliate {
  display: inline-block;
  background: var(--terracotta);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
}
.btn--affiliate:hover {
  background: var(--terracotta-dark, #A84920);
}

/* ==================== CTA APP ==================== */
.angle-cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-8) var(--sp-6);
  margin: var(--sp-8) 0;
  border-radius: 6px;
  text-align: center;
}
.angle-cta p {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  margin: 0 0 var(--sp-4) 0;
}
.angle-cta strong {
  color: var(--terracotta);
}
.angle-cta .btn {
  display: inline-block;
  background: var(--terracotta);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semi);
}

/* ==================== SOURCES BLOCK ==================== */
.angle-sources {
  border-top: var(--border-fine);
  padding-top: var(--sp-4);
  margin-top: var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.angle-sources h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-3) 0;
  color: var(--ink);
}
.angle-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.angle-sources li {
  padding: var(--sp-2) 0;
}
.angle-sources a {
  color: var(--terracotta);
  text-decoration: underline;
}

/* ==================== SEARCH BAR ADJACENTE WIDGET ==================== */
.commune-widget__address,
.quartier-address-search {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-8);
  max-width: 600px;
}
.commune-widget__address input,
.quartier-address-search input {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ink-subtle);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--paper);
}
.commune-widget__address button,
.quartier-address-search button {
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
}

/* ==================== CHIFFRES CLÉS COMMUNE ==================== */
.commune-key-figures {
  background: var(--paper-ridge);
  padding: var(--sp-8) 0;
  margin: var(--sp-8) 0;
}
.commune-key-figures__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.commune-key-figures__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin: 0 0 var(--sp-2) 0;
}
.commune-key-figures__hint {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0 0 var(--sp-6) 0;
}
.commune-key-figures__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.kf-item {
  background: var(--paper);
  border: 1px solid var(--ink-subtle);
  border-radius: 6px;
  padding: var(--sp-4) var(--sp-4);
}
.kf-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kf-value {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.1;
}
.kf-hint {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.4;
}
.kf-hint small { font-size: inherit; }
.kf-source {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  margin: var(--sp-2) 0 0 0;
  font-style: italic;
}
/* Badge "Rang X sur Y communes du département" — couleur par quartile.
   Restauré 2026-05-17 (présent avant le refacto 714452d). */
.kf-item .commune-card__rank {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  margin: var(--sp-2) 0;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  font-weight: var(--fw-semi);
}
.kf-item .commune-card__rank--top    { background: #d4f4dd; color: #1a5128; }
.kf-item .commune-card__rank--upper  { background: #e8f4d4; color: #4a5128; }
.kf-item .commune-card__rank--lower  { background: #fde7c9; color: #6b4a1a; }
.kf-item .commune-card__rank--bottom { background: #fcd4d4; color: #7a1a1a; }
.kf-item .commune-card__rank--neutral { background: var(--paper); color: var(--fg-muted); }

/* ==================== COMMUNE — HERO STANDARD ==================== */
.commune-hero {
  background: var(--paper);
  padding: var(--sp-12) 0 var(--sp-8);
  border-bottom: var(--border-fine);
}
.commune-hero__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  /* Override grid 2-col défini dans commune-page.css (ancien layout) */
  display: block !important;
  grid-template-columns: none !important;
}
.commune-hero__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0 0 var(--sp-8) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.commune-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 1.05;
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-6) 0;
  text-align: center;
}
.commune-hero__lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-align: left;
  max-width: none;
  width: 100%;
}

/* ==================== SPOTLIGHT CALLOUT (anomalies saillantes) ==================== */
.commune-spotlight {
  max-width: var(--w-page);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-6);
  background: var(--paper-ridge);
  border-left: 3px solid var(--fg-muted);
  border-radius: 4px;
}
.commune-spotlight__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-3) 0;
}
.commune-spotlight__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.commune-spotlight__text a,
.commune-spotlight__item a {
  color: var(--terracotta);
  text-decoration: underline;
}
.commune-spotlight__list {
  list-style: none;
  margin: 0 0 var(--sp-2) 0;
  padding: 0;
}
.commune-spotlight__list + .commune-spotlight__list {
  margin-top: var(--sp-2);
}
.commune-spotlight__item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--sp-1) 0;
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}
.commune-spotlight__sign {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body-l);
  line-height: 1;
  flex-shrink: 0;
  width: 1.2em;
  text-align: center;
}
.commune-spotlight__list--positive .commune-spotlight__sign { color: var(--forest, #4a7a4a); }
.commune-spotlight__list--negative .commune-spotlight__sign { color: var(--terracotta); }

/* ==================== SECTIONS THÉMATIQUES (4 sections fiche standard) ==================== */
.commune-section {
  background: var(--paper);
  padding: var(--sp-8) 0;
  border-bottom: var(--border-fine);
}
.commune-section:nth-of-type(even) {
  background: var(--paper-ridge);
}
.commune-section__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.commune-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin: 0 0 var(--sp-6) 0;
  letter-spacing: -0.01em;
}
.commune-section__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}
.commune-card {
  background: var(--paper);
  border: 1px solid var(--ink-subtle);
  border-radius: 6px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.commune-section:nth-of-type(even) .commune-card {
  background: var(--paper);
}
.commune-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--sp-3) 0;
}
.commune-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 var(--sp-2) 0;
  white-space: nowrap;
}
.commune-card__unit {
  margin: 0 0 var(--sp-3) 0;
  font-family: var(--font-body);
  color: var(--fg-muted);
}
.commune-card__narrative {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--sp-4) 0;
  flex-grow: 1;
}
.commune-card__source {
  font-family: var(--font-body);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0;
}
.commune-card__rank {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  margin: var(--sp-2) 0 0 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  display: inline-block;
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}
.commune-card__rank--top {
  background: color-mix(in oklab, var(--forest, #4a7a4a) 18%, var(--paper));
  color: var(--forest, #2f5230);
}
.commune-card__rank--upper {
  background: color-mix(in oklab, var(--forest, #4a7a4a) 9%, var(--paper));
  color: var(--forest, #4a7a4a);
}
.commune-card__rank--lower {
  background: color-mix(in oklab, var(--terracotta) 8%, var(--paper));
  color: color-mix(in oklab, var(--terracotta) 75%, var(--ink));
}
.commune-card__rank--bottom {
  background: color-mix(in oklab, var(--terracotta) 16%, var(--paper));
  color: var(--terracotta);
}
.commune-card__rank--neutral {
  background: var(--paper-ridge);
  color: var(--fg-muted);
}

/* ==================== HEADER RESPONSIVE FIX (2026-05-15) ====================
   Le CSS legacy dans style.css/commune-page.css cible des classes obsolètes
   (`.nav-v2`, `.lang-toggle-v2`) qui n'existent plus dans base.html.j2.
   Résultat : nav + lang buttons sans styling, et sur mobile FR/EN wrap en
   vertical. Patch ici qui cible les classes réelles utilisées. */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.header-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-soft);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.header-nav a:hover { color: var(--terracotta); }
.header-lang {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.header-lang button {
  background: transparent;
  border: 1px solid var(--ink-subtle);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--fg-soft);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.header-lang button.is-active {
  border-color: var(--ink);
  color: var(--ink);
}
.header-lang button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Mobile : sous 720px, nav links cachés (accessibles via menu hamburger
   à l'avenir si besoin), brand reste, FR/EN restent side-by-side mais
   compactés. */
@media (max-width: 720px) {
  .header-nav { display: none; }
  .header-v2 .wrap { gap: var(--sp-3); }
  .header-v2 .brand { font-size: var(--fs-h3); }
  .header-lang button {
    padding: 4px 8px;
    font-size: var(--fs-caption);
  }
}

/* Sur écrans 720-1024 (tablettes / petits laptops) : les 3 nav links
   peuvent être étroits, on réduit le gap. */
@media (max-width: 1024px) and (min-width: 721px) {
  .header-nav { gap: var(--sp-3); font-size: var(--fs-caption); }
}

/* ==================== KEY FIGURES GRID RESPONSIVE ==================== */
/* La grille "Toulouse en chiffres" peut avoir 11 KPIs maintenant. Sur
   mobile on force 2 colonnes pour rester scannable (4-6 cards visibles
   au-dessus du fold), sinon ça scrolle 11 lignes. */
@media (max-width: 720px) {
  .commune-key-figures__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3);
  }
  .kf-value { font-size: var(--fs-h3); }
}

/* ==================== COMMUNE HERO RESPONSIVE ==================== */
/* Sur mobile, le titre commune (--fs-display-l) peut être trop gros (Paris
   1er — Centre s'étalerait sur 3 lignes). Réduction progressive. */
@media (max-width: 720px) {
  .commune-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .commune-hero__title { font-size: var(--fs-display-m); }
  .commune-hero__lede { font-size: var(--fs-body); }
}

/* ==================== WIDGET MAP RESPONSIVE ==================== */
/* La carte H3 a une height fixe 480px en inline style sur le template,
   ce qui occupe la majorité d'un écran mobile. Réduit à 380px sous 720px. */
@media (max-width: 720px) {
  .ntyp-widget { height: 380px !important; }
}

/* ==================== AFFILIATE SLOT ==================== */
/* Slot inséré APRÈS les cards de chaque section thématique. Visuellement
   distinct (background paper-ridge + bord italique) pour signaler que
   c'est une suggestion partenaire et pas une donnée NTYP. Disclaimer
   LCEN/DGCCRF systématique. */
.affiliate-slot {
  max-width: var(--w-page);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-ridge);
  border: 1px dashed color-mix(in oklab, var(--fg-muted) 35%, transparent);
  border-radius: 6px;
}
.affiliate-slot__advertiser {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--sp-2) 0;
}
.affiliate-slot__cta {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--terracotta);
  text-decoration: none;
  display: inline-block;
  margin: 0 0 var(--sp-2) 0;
  border-bottom: 1px solid var(--terracotta);
}
.affiliate-slot__cta:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.affiliate-slot__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  margin: 0 0 var(--sp-2) 0;
}
.affiliate-slot__disclaimer {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0;
}

/* ==================== WIDGET + RECHERCHE ADRESSE ==================== */
.commune-widget {
  background: var(--paper);
  padding: var(--sp-8) 0;
  border-bottom: var(--border-fine);
}
.commune-widget__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.commune-widget__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin: 0 0 var(--sp-3) 0;
}
.commune-widget__hint {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
  margin: 0 0 var(--sp-4) 0;
  max-width: 70ch;
}

/* ==================== PARTNER / CTA Le Dossier ==================== */
.commune-partner {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-12) 0;
}
.commune-partner__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 720px) {
  .commune-partner__inner { grid-template-columns: 1fr; }
}
.commune-partner__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--paper);
  margin: 0 0 var(--sp-4) 0;
}
.commune-partner__copy {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.85;
  margin: 0 0 var(--sp-3) 0;
  max-width: 60ch;
}
.commune-partner__price-line {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--paper);
  opacity: 0.9;
  font-style: italic;
  margin: 0;
}
.commune-partner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--terracotta);
  color: var(--paper);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semi);
}
.commune-partner__cta-arrow { display: inline-block; }

/* ==================== TABLE CLASSEMENT ==================== */
.classement-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.classement-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--ink-subtle);
}
.classement-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-fine);
  color: var(--ink);
}
.classement-table tbody tr:nth-child(even) {
  background: var(--paper-ridge);
}
.classement-table__rank {
  font-weight: var(--fw-semi);
  color: var(--terracotta);
  width: 4em;
}
.classement-table__value {
  font-family: var(--font-display);
  text-align: right;
  font-weight: var(--fw-semi);
  white-space: nowrap;
}
.classement-table a {
  color: var(--ink);
  text-decoration: underline;
}
.classement-table a:hover { color: var(--terracotta); }

/* ==================== TABLE DISTRIBUTION BRUIT QUARTIER ==================== */
.quartier-noise-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  margin-top: var(--sp-3);
}
.quartier-noise-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--ink-subtle);
}
.quartier-noise-table tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-fine);
}
.quartier-noise-table tbody tr:last-child td { border-bottom: none; }
.commune-card--wide { grid-column: 1 / -1; }

/* ==================== INDEX COMMUNES DU DÉPARTEMENT ==================== */
.departement-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.departement-index__item a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--ink-subtle);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.departement-index__item a:hover {
  border-color: var(--terracotta);
}
.departement-index__cp {
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}
.departement-index__pop {
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}

/* ==================== MAILLAGE INTERNE (voisines + comparables) ==================== */
.commune-related {
  background: var(--paper);
  padding: var(--sp-8) 0;
  border-top: var(--border-fine);
}
.commune-related__inner {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.commune-related__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin: 0 0 var(--sp-6) 0;
}
.commune-related__group {
  margin-bottom: var(--sp-6);
}
.commune-related__group:last-child {
  margin-bottom: 0;
}
.commune-related__group-title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--sp-3) 0;
}
.commune-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.commune-related__item {
  background: var(--paper-ridge);
  border: 1px solid var(--ink-subtle);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4);
}
.commune-related__item a {
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semi);
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: var(--sp-1);
}
.commune-related__item a:hover {
  color: var(--terracotta);
  text-decoration: underline;
}
.commune-related__hint {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  font-style: italic;
}