/* Socrame — mises en page propres au site.
   Les polices, les tokens et les composants sont des feuilles distinctes,
   enfilées avant celle-ci par socrame_assets() dans functions.php.

   Elles étaient chargées ici par @import jusqu'au 18/09/2026. Deux défauts :
   seule la feuille parente portait un numéro de version, donc une correction
   dans components.css n'atteignait jamais un visiteur déjà venu — le navigateur
   gardait sa copie en cache indéfiniment ; et @import sérialise les requêtes au
   lieu de les paralléliser. */

/* ---------- Base du document ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--copper-700); text-decoration: none; }
a:hover { color: var(--copper-600); }
::selection { background: var(--copper-400); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Lien d'évitement — obligatoire pour la navigation au clavier. */
.sc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--surface-brand); color: var(--text-invert);
  padding: var(--sp-3) var(--sp-5); font-family: var(--font-display); font-weight: 700;
}
.sc-skip:focus { left: var(--sp-4); top: var(--sp-4); color: var(--text-invert); }

/* ---------- Conteneurs ---------- */
.sc-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sc-wrap--narrow { max-width: var(--container-narrow); }
.sc-section { padding-block: var(--section-y); }
.sc-section--tight { padding-block: clamp(36px, 6vh, 64px); }
.sc-section--brand { background: var(--surface-brand); color: var(--text-invert); }
.sc-section--raised { background: var(--surface-raised); border-block: 1px solid var(--border); }

/* Le filet cuivre qui ferme les sections sombres — signature du système. */
.sc-edge { height: 4px; background: linear-gradient(90deg, var(--copper-600) 0 22%, transparent 22% 100%); }

/* ---------- Grilles ---------- */
.sc-grid { display: grid; gap: var(--sp-5); }
.sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sc-grid--2, .sc-grid--3, .sc-grid--4 { grid-template-columns: minmax(0, 1fr); }
  :root { --gutter: 20px; --section-y: 56px; --fs-display: 36px; --fs-h1: 32px; --fs-h2: 27px; --fs-h3: 23px; }
}

/* ---------- Contenu éditorial ---------- */
.sc-content { max-width: var(--measure); }
.sc-content h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3);
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: var(--sp-12) 0 var(--sp-4); }
.sc-content h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4);
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: var(--sp-8) 0 var(--sp-3); }
.sc-content p { margin: 0 0 var(--sp-5); }
.sc-content ul, .sc-content ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
.sc-content li { margin-bottom: var(--sp-2); }
.sc-content a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Barre d'annonce et navigation ---------- */
.sc-announce { background: var(--surface-deep); color: var(--teal-100); font-size: var(--fs-caption); }
.sc-announce__in { display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; gap: var(--sp-4); flex-wrap: wrap; }
.sc-announce a { color: var(--copper-400); font-weight: 600; }

.sc-nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.sc-nav__in { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-5); gap: var(--sp-6); }
.sc-logo { display: inline-flex; align-items: center; line-height: 0; }
.sc-logo__img { display: block; width: auto; height: 44px; }
@media (max-width: 900px) { .sc-logo__img { height: 36px; } }
.sc-footer .sc-logo__img { height: 48px; }
.sc-menu { display: flex; gap: var(--sp-8); align-items: center; list-style: none; margin: 0; padding: 0; }
.sc-menu a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs, 14px); color: var(--text-strong); }
.sc-menu a:hover, .sc-menu .current-menu-item > a { color: var(--copper-700); }

/* ---- Sous-menus ----
   Ajoutés le 18/09/2026 : le menu ne couvrait que l'eau chaude, laissant les
   quatre prestations de plomberie et leurs 108 pages communales accessibles
   uniquement depuis les hubs départementaux.

   Pas de JavaScript : au survol et au focus, donc utilisable au clavier.
   .sc-submenu et .sub-menu sont visés ensemble — la seconde est la classe que
   pose WordPress si un menu est un jour assigné dans l'admin. */
.sc-menu__group { position: relative; }
.sc-menu__label { font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xs, 14px); color: var(--text-strong); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; }
.sc-menu__label::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-base) var(--ease); }
.sc-menu__label[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.sc-menu__label[data-actif="true"] { color: var(--copper-700); }
.sc-submenu, .sc-menu .sub-menu { list-style: none; margin: 0; padding: 0; }

@media (min-width: 901px) {
  .sc-menu__group:hover > .sc-menu__label { color: var(--copper-700); }
  .sc-submenu, .sc-menu .sub-menu {
    position: absolute; top: 100%; left: calc(var(--sp-4) * -1);
    min-width: 260px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-sm); box-shadow: 0 12px 28px rgb(9 42 42 / 12%);
    padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
                visibility var(--dur-base) var(--ease);
    z-index: 60;
  }
  /* Deux voies additives : le survol, et le bouton pour le clavier et le tactile. */
  .sc-menu__group:hover > .sc-submenu,
  .sc-menu__label[aria-expanded="true"] + .sc-submenu,
  .sc-menu li:hover > .sub-menu,
  .sc-menu li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .sc-submenu a, .sc-menu .sub-menu a { display: block; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm); white-space: nowrap; }
  .sc-submenu a:hover, .sc-menu .sub-menu a:hover { background: var(--surface-raised); }
  /* Pont invisible : le curseur traverse l'espace sans refermer le déroulé. */
  .sc-menu__group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--sp-5); }
}

@media (max-width: 900px) {
  /* Même mécanique qu'en desktop, pour que aria-expanded dise la vérité sur
     les deux tailles : replié par défaut, déplié au clic. */
  .sc-menu__label { color: var(--text-invert); font-size: 18px; margin: 0;
    width: 100%; justify-content: space-between; }
  .sc-submenu, .sc-menu .sub-menu { display: none; flex-direction: column;
    gap: var(--sp-4); margin-top: var(--sp-4); padding-left: var(--sp-4);
    border-left: 2px solid rgb(255 255 255 / 18%); }
  .sc-menu__label[aria-expanded="true"] + .sc-submenu { display: flex; }
  .sc-menu__group { width: 100%; }
}

/* Menu : entre 901 et ~1 180 px, « Chauffage électrique » et « Entretien et
   dépannage » passaient sur deux lignes alors que le menu tient sans retour à la
   ligne dès 901 px (mesuré le 30/09/2026). Libellés insécables, écart resserré. */
@media (min-width: 901px) {
  .sc-menu > li > a, .sc-menu__label { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .sc-menu { gap: var(--sp-5); }
}

.sc-burger { display: none; background: none; border: 0; cursor: pointer;
  width: var(--touch-min); height: var(--touch-min); padding: 12px; color: var(--teal-900); }
.sc-burger span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform var(--dur-base) var(--ease); }

@media (max-width: 900px) {
  .sc-burger { display: block; }
  .sc-menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--surface-brand); flex-direction: column; align-items: flex-start;
    padding: var(--sp-20) var(--sp-6); gap: var(--sp-5); transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease); z-index: 9999; }
  .sc-menu a { color: var(--text-invert); font-size: 18px; }
  body.sc-nav-open .sc-menu { transform: none; }
  body.sc-nav-open { overflow: hidden; }
}

/* ---------- Pied de page ---------- */
.sc-footer { background: var(--surface-deep); color: var(--teal-100); }
.sc-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--sp-10);
  padding-block: var(--sp-16) var(--sp-10); }
.sc-footer a { color: var(--teal-100); font-size: var(--fs-xs, 14px); }
.sc-footer a:hover { color: var(--copper-400); }
.sc-footer__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-100); margin-bottom: var(--sp-3); display: block; }
.sc-footer__legal { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  border-top: 1px solid rgba(214,230,229,.18); padding-block: var(--sp-5); font-size: var(--fs-caption); color: var(--ink-300); }
.sc-footer__legal a { color: var(--ink-300); font-size: var(--fs-caption); }
@media (max-width: 1100px) { .sc-footer__cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .sc-footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sc-footer__cols { grid-template-columns: minmax(0,1fr); } }

/* ---------- Barre d'appel mobile ---------- */
.sc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--surface-brand); border-top: 2px solid var(--copper-600); }
.sc-sticky .sc-btn { flex: 1; }
@media (max-width: 767px) { .sc-sticky { display: flex; } body { padding-bottom: 76px; } }

/* ---------- États vides : recherche, archive, 404 ---------- */
.sc-empty { padding-block: var(--sp-24); }
.sc-empty__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2);
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: 0 0 var(--sp-4); }
.sc-results { list-style: none; margin: var(--sp-10) 0 0; padding: 0; }
.sc-results li { border-top: 1px solid var(--border); padding-block: var(--sp-6); }
.sc-results h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4);
  letter-spacing: var(--tr-display); margin: 0 0 var(--sp-2); }
.sc-results h2 a { color: var(--text-strong); }
.sc-results h2 a:hover { color: var(--copper-700); }
.sc-searchform { display: flex; gap: var(--sp-3); max-width: 520px; margin-top: var(--sp-6); }
.sc-searchform input[type="search"] { flex: 1; min-height: var(--touch-min); padding: 0 var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-body-s); color: var(--text-strong);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-sm); }
/* Le champ de recherche gardait sa largeur intrinsèque et poussait le bouton
   hors de l'écran sur mobile : 7 px de défilement horizontal sur la 404 et la
   page de recherche (contrôle du 02/10/2026). */
.sc-searchform input[type="search"] { min-width: 0; }
@media (max-width: 480px) {
  .sc-searchform { flex-wrap: wrap; }
  .sc-searchform input[type="search"], .sc-searchform .sc-btn { flex: 1 1 100%; }
}

/* ---------- Bouton de devis dans la barre ---------- */
.sc-nav__cta { flex: none; }
@media (max-width: 900px) { .sc-nav__cta { display: none; } }

/* État actif : soulignement cuivre, comme sur la maquette. */
.sc-menu .current-menu-item > a,
.sc-menu a[aria-current="page"] {
  color: var(--text-strong);
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--copper-600);
}

/* ---------- Héros d'accueil ---------- */
.sc-hero { background: var(--surface-brand); position: relative; }
/* Héros : chaque espace suit la hauteur de l'écran. Mesuré le 25/09/2026 en
   1366 × 768 : le héros de l'accueil faisait 102 % de la hauteur visible —
   ni les chiffres clés ni la section suivante n'apparaissaient. */
.sc-hero__in { display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 4vw, 64px); align-items: start;
  padding-block: clamp(28px, 6vh, 80px) clamp(28px, 5vh, 64px); }
.sc-hero__in--page { padding-block: clamp(16px, 3vh, 40px) 0; }
.sc-hero__wrap { padding-block: clamp(16px, 3vh, 32px) clamp(32px, 6vh, 64px); }
.sc-hero__actions { display: flex; gap: var(--sp-4); margin-top: clamp(20px, 3.5vh, 40px); flex-wrap: wrap; }
.sc-hero__stats { margin-top: clamp(24px, 4.5vh, 56px); border-top: 1px solid var(--teal-800); padding-top: clamp(16px, 3vh, 32px); }
.sc-hero__edge { position: absolute; left: 0; bottom: 0; width: 240px; height: 4px; background: var(--copper-600); }
@media (max-width: 900px) { .sc-hero__in { grid-template-columns: minmax(0,1fr); gap: var(--sp-10); } }

/* ---------- Réserves d'image ---------- */
.sc-ph { display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--sp-8); font-size: var(--fs-caption); letter-spacing: var(--tr-overline);
  text-transform: uppercase; line-height: 1.9; }
.sc-ph--dark { border: 1px solid var(--teal-800); min-height: 420px; color: var(--copper-400);
  background-image: repeating-linear-gradient(135deg, rgba(214,230,229,.10) 0 1px, transparent 1px 9px); }
.sc-ph--light { background: var(--teal-50); border: 1px solid var(--teal-100);
  min-height: 340px; color: var(--teal-600); }

/* ---------- Deux colonnes texte / image ---------- */
.sc-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-16); align-items: center; }
@media (max-width: 900px) { .sc-split { grid-template-columns: minmax(0,1fr); gap: var(--sp-10); } }

/* ---------- Encadré secondaire ---------- */
.sc-aside { display: flex; align-items: center; gap: var(--sp-10);
  border-left: 3px solid var(--copper-600); flex-wrap: wrap; }

/* ---------- Contenu + colonne latérale ---------- */
.sc-withside { display: grid; grid-template-columns: 1.5fr 0.85fr; gap: var(--sp-16); align-items: start; }
.sc-side { display: flex; flex-direction: column; gap: var(--sp-6); }
.sc-panel { background: var(--surface-raised); border: 1px solid var(--border); padding: var(--sp-8); }
.sc-dl { margin: 0; font-size: var(--fs-body-s); }
.sc-dl dt { color: var(--text-muted); }
.sc-dl dd { margin: 2px 0 var(--sp-4); color: var(--text-strong); font-weight: 600; }
.sc-dl dd:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .sc-withside { grid-template-columns: minmax(0,1fr); gap: var(--sp-12); } }

/* ---------- Hub départemental ---------- */
.sc-hub__in { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-14); padding-top: var(--sp-10); }
.sc-hub__code { font-family: var(--font-display); font-weight: 800; font-size: 132px;
  line-height: .8; color: var(--copper-600); letter-spacing: -0.05em; flex: none;
  font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sc-hub__code { font-size: 80px; } }
@media (max-width: 640px) { .sc-hub__in { flex-direction: column; align-items: flex-start; gap: var(--sp-8); } }

/* ---------- Formulaire ---------- */
.sc-form { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 720px; }
.sc-fld { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; border: 0; padding: 0; }
.sc-fld > label, .sc-fld > legend {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-overline);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-body); padding: 0; }
.sc-fld input[type="text"], .sc-fld input[type="tel"], .sc-fld input[type="email"], .sc-fld textarea {
  font-family: var(--font-body); font-size: var(--fs-body-s); color: var(--text-strong);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-sm);
  min-height: var(--touch-min); padding: var(--sp-3) var(--sp-4); width: 100%; }
.sc-fld textarea { min-height: 132px; resize: vertical; }
.sc-fld input::placeholder, .sc-fld textarea::placeholder { color: var(--ink-300); }

.sc-seg { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); }
.sc-seg__opt { position: relative; }
.sc-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sc-seg__opt span { display: flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-5); border: 1px solid var(--border); background: var(--surface-raised);
  border-radius: var(--r-sm); font-size: var(--fs-body-s); font-weight: 500; cursor: pointer; }
.sc-seg__opt input:checked + span { border-color: var(--copper-600); border-width: 2px;
  background: var(--surface-wash); color: var(--copper-800); }
.sc-seg__opt input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.sc-consent { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-4); font-size: var(--fs-caption); color: var(--text-body); }
.sc-consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.sc-form__hint { margin-left: var(--sp-4); font-size: var(--fs-caption); color: var(--text-muted); }
.sc-dl--invert dt { color: var(--text-on-teal); }
.sc-dl--invert dd { color: var(--text-invert); }

/* Prose sur deux colonnes de lecture confortables pour les sections longues. */
.sc-prose--wide { max-width: 74ch; }
.sc-prose--wide p { margin: 0 0 var(--sp-5); }
.sc-prose--wide p:last-child { margin-bottom: 0; }

/* ---------- Tableau comparatif ---------- */
.sc-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.sc-table { width: 100%; border-collapse: collapse; background: var(--surface-raised);
  font-size: var(--fs-body-s); min-width: 760px; }
.sc-table th, .sc-table td { padding: var(--sp-4) var(--sp-5); text-align: left;
  vertical-align: top; border-bottom: 1px solid var(--border); }
.sc-table thead th { font-family: var(--font-display); font-weight: 800;
  letter-spacing: var(--tr-display); color: var(--text-invert);
  background: var(--surface-brand); border-bottom: 0; }
.sc-table thead th:first-child { color: var(--text-on-teal); font-weight: 600; }
.sc-table tbody th { font-family: var(--font-display); font-weight: 700;
  color: var(--text-strong); white-space: nowrap; background: var(--chalk-100); }
.sc-table tbody tr:last-child th, .sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table td strong { color: var(--copper-700); }

/* ---------- Décomposition de devis ---------- */
.sc-devis { list-style: none; margin: 0; padding: 0; counter-reset: poste;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.sc-devis__item { counter-increment: poste; background: var(--surface-raised);
  border: 1px solid var(--border); border-top: 2px solid var(--copper-600);
  border-radius: var(--r-sm); padding: var(--sp-6); }
.sc-devis__poste { font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: 0 0 var(--sp-3); }
.sc-devis__poste::before { content: counter(poste, decimal-leading-zero);
  display: block; font-size: var(--fs-caption); color: var(--copper-700);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sp-2); }
.sc-devis__quoi { margin: 0; font-size: var(--fs-body-s); color: var(--text-body); }
.sc-devis__note { margin: var(--sp-3) 0 0; font-size: var(--fs-caption);
  color: var(--copper-800); background: var(--surface-wash);
  border-left: 2px solid var(--copper-400); padding: var(--sp-2) var(--sp-3); }
@media (max-width: 768px) { .sc-devis { grid-template-columns: minmax(0,1fr); } }

/* Avertissement de relecture — ne doit jamais passer inaperçu en preprod. */
.sc-warn { margin: var(--sp-6) 0 0; max-width: 70ch; font-size: var(--fs-body-s);
  font-weight: 600; color: var(--copper-800); background: var(--surface-wash);
  border: 1px solid var(--copper-400); border-left-width: 4px;
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); }

/* ---------- Photos ---------- */
.sc-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-photo--hero { min-height: clamp(240px, 42vh, 420px); }
.sc-photo--large { min-height: clamp(220px, 36vh, 340px); }
/* Sur mobile, la photo du héros passe sous le texte : 42 % de la hauteur
   d'écran la rendait à elle seule plus haute que les boutons et les chiffres
   réunis. Elle garde sa hauteur naturelle, avec un plancher de 200 px. */
@media (max-width: 640px) {
  .sc-photo--hero, .sc-photo--large { min-height: 200px; }
}
figure.sc-figure { margin: 0; }

/* ---------- Dureté de l'eau ---------- */
.sc-eau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-8);
  align-items: start; margin-top: var(--sp-12); padding: var(--sp-8);
  background: var(--teal-50); border: 1px solid var(--teal-100);
  border-left: 4px solid var(--teal-700); border-radius: var(--r-sm); max-width: 720px; }
.sc-eau__mesure { display: flex; flex-direction: column; align-items: flex-start; }
.sc-eau__valeur { font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: 1; letter-spacing: var(--tr-display); color: var(--teal-700);
  font-variant-numeric: tabular-nums; }
.sc-eau__unite { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body);
  color: var(--teal-600); margin-top: 2px; }
.sc-eau__classe { margin-top: var(--sp-3); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--teal-700); white-space: nowrap; }
.sc-eau__texte h3 { margin: 0 0 var(--sp-3); }
.sc-eau__texte p { margin: 0 0 var(--sp-3); font-size: var(--fs-body-s); color: var(--text-body); }
.sc-eau__source { font-size: var(--fs-caption) !important; color: var(--text-muted) !important; margin-bottom: 0 !important; }
@media (max-width: 640px) { .sc-eau { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); } }

/* ---------- Parc immobilier ---------- */
.sc-parc { margin-top: var(--sp-8); padding: var(--sp-8); max-width: 720px;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-left: 4px solid var(--copper-600); border-radius: var(--r-sm); }
.sc-parc h3 { margin: 0 0 var(--sp-5); }
.sc-parc p { margin: 0 0 var(--sp-3); font-size: var(--fs-body-s); color: var(--text-body); }
.sc-parc p:last-child { margin-bottom: 0; }
.sc-parc__chiffres { display: flex; gap: var(--sp-10); flex-wrap: wrap;
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border); }
.sc-parc__item { display: flex; flex-direction: column; }
.sc-parc__valeur { font-family: var(--font-display); font-weight: 800; font-size: 28px;
  letter-spacing: var(--tr-display); color: var(--copper-700);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.sc-parc__label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }

/* Cartes des départements : autant de colonnes que la place en permet. Une
   grille à quatre colonnes laissait la cinquième carte seule sur sa ligne. */
.sc-grid--zones { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }