/*
LOT 2 — page.php / page-lieu.php / page-zone.php (DA-V9-TRAEGER.md).
Chargé après style.css (functions.php, handle rbz-v9-pages, dépendance
sbs-style). N'utilise que les jetons --rbz-* de style.css (P-116) : aucune
couleur neuve ici. Corrections JUGEMENT-V9.md du 26/09/2026 incluses
(sections Ramonage/Démoussage/Pirey/Zone/FAQ — les défauts transversaux
T1-T6 sont traités par le designer du socle, pas ici).

Galerie produit (page.php) en mosaïque .mtc-galerie > __principale / __pile / __vignette
Panneau local (page commune) ... .mtc-panneau-local-section > .mtc-panneau-local(__stats) + carte-situation.php
Arguments en tuiles ............ .mtc-arguments / .mtc-argument
Bloc auteur ..................... .mtc-auteur / __ecusson / __nom / __role
Pastilles (communes) ........... .mtc-pastilles / .mtc-pastille(--active)
Bandeau photo dans le contenu .. .mtc-bandeau-contenu
Blocs profils d'habitat (zone) . .mtc-profils / .mtc-profil
*/

/* ============================================================
   1. GALERIE EN MOSAÏQUE (page.php) — RETOUR MATHIAS 27/09 : l'ancienne
   version (colonne étroite centrée + rangée de vignettes de 72 px)
   laissait un grand vide blanc de chaque côté et une des 3 vignettes
   dupliquait la grande photo. Reconstruite à la Traeger : une grande photo
   (2/3 de la largeur) + deux photos empilées de hauteurs égales (1/3),
   pleine largeur du conteneur, sans vide au-dessus ni en dessous. Mêmes
   classes qu'avant (.mtc-galerie/__principale/__vignette) : le JS minimal
   inline en bas de page.php (< 1 Ko, visionneuse au clic) fonctionne à
   l'identique.
   ============================================================ */
.mtc-galerie{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:clamp(320px, 30vw, 560px); }
.mtc-galerie__principale{ grid-column:1; grid-row:1 / span 2; overflow:hidden; background:var(--rbz-beige); border-radius:var(--rbz-rayon); }
.mtc-galerie__principale img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtc-galerie__pile{ display:contents; }
.mtc-galerie__vignette{ width:100%; height:100%; padding:0; border:2px solid transparent; border-radius:var(--rbz-rayon); overflow:hidden; cursor:pointer; background:var(--rbz-beige); }
.mtc-galerie__vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtc-galerie__vignette[aria-current="true"]{ border-color:var(--rbz-rouge); }
.mtc-galerie__vignette:focus-visible{ outline:3px solid var(--rbz-rouge); outline-offset:2px; }
@media (max-width:639px){
	.mtc-galerie{ height:auto; grid-template-columns:1fr; grid-template-rows:none; }
	.mtc-galerie__principale{ grid-column:1; grid-row:auto; aspect-ratio:4/3; }
	.mtc-galerie__pile{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
	.mtc-galerie__vignette{ aspect-ratio:4/3; height:auto; }
}

/* ============================================================
   3. PANNEAU LOCAL (page-lieu.php) — trois ancrages vérifiables (commune +
   code postal, distance réelle, profil du bâti — PL-007/PL-008). /peaufiner
   B1 : section autonome, le formulaire a quitté cette section pour le
   héros (plus de hauteur à égaler). /peaufiner B2/B3 : la photo générique
   (parfois hors sujet) est remplacée par la mini-carte de situation
   (carte-situation.php, §14) — voir .mtc-panneau-local-section, §15.
   ============================================================ */
.mtc-panneau-local{ background:var(--rbz-beige); padding:32px 28px; border-radius:var(--rbz-rayon); }
.mtc-panneau-local__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:20px 0 0; }
.mtc-panneau-local__stats dt{ font-size:13px; color:var(--rbz-encre-2); text-transform:uppercase; letter-spacing:.02em; }
.mtc-panneau-local__stats dd{ margin:4px 0 0; font-family:var(--rbz-police-affiche); font-weight:700; font-size:22px; }
.mtc-panneau-local p{ color:var(--rbz-encre-2); margin-top:18px; }

/* ============================================================
   4. ARGUMENTS EN TUILES — bénéfices vérifiés, icône + titre + phrase.
   RETOUR MATHIAS 27/09 : icône rbz_icone() (jeu maison, template-parts/
   icone.php — style .mtc-ico déjà posé dans style.css par le designer du
   socle) CENTRÉE au-dessus de chaque colonne, colonnes centrées.
   ============================================================ */
.mtc-arguments{ display:grid; grid-template-columns:1fr; gap:32px; justify-items:center; }
@media (min-width:560px){ .mtc-arguments{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:960px){ .mtc-arguments{ grid-template-columns:repeat(4, 1fr); } }
.mtc-argument{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; max-width:260px; }
.mtc-argument__titre{ font-family:var(--rbz-police-affiche); font-weight:700; font-size:18px; text-transform:uppercase; margin:4px 0 0; }
.mtc-argument__texte{ font-size:14px; color:var(--rbz-encre-2); margin:0; }

/* ============================================================
   5. BLOC AUTEUR — écusson + nom + rôle, sous le corps de texte (gabarit
   partagé page.php + page-lieu.php).
   ============================================================ */
.mtc-auteur{ display:flex; align-items:center; gap:14px; margin-top:40px; padding-top:24px; border-top:1px solid var(--rbz-filet); }
.mtc-auteur__ecusson{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--rbz-beige); display:flex; align-items:center; justify-content:center; }
.mtc-auteur__ecusson img{ width:26px; height:26px; object-fit:contain; }
.mtc-auteur__nom{ display:block; font-weight:600; }
.mtc-auteur__role{ display:block; font-size:14px; color:var(--rbz-encre-2); }

/* ============================================================
   6. PASTILLES — communes desservies / voisines / par profil d'habitat.
   JUGEMENT-V9 (🟡 Ramonage) : 12px → 15px, plus lisible.
   ============================================================ */
.mtc-pastilles{ display:flex; flex-wrap:wrap; gap:10px; }
.mtc-pastille{ display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:20px; background:var(--rbz-blanc); border:1px solid var(--rbz-filet); font-size:15px; color:var(--rbz-encre); }
a.mtc-pastille:hover, a.mtc-pastille:focus-visible{ background:var(--rbz-rouge); border-color:var(--rbz-rouge); color:#FFFFFF; }
.mtc-pastille--active{ background:var(--rbz-rouge); border-color:var(--rbz-rouge); color:#FFFFFF; font-weight:600; }

/* ============================================================
   7. BANDEAU PHOTO DANS LE CONTENU — intercalé tous les 2 H2 par
   rbz_intercaler_photos() (page-lieu.php / page-zone.php) : JUGEMENT-V9
   « mur de texte de 5 000 px sans une image » (Pirey, Zone).
   ============================================================ */
.mtc-bandeau-contenu{ margin:2.2em 0; }
.mtc-bandeau-contenu img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--rbz-rayon); display:block; }

/* ============================================================
   8. INTERTITRES DU CONTENU — JUGEMENT-V9 (🟠 Démoussage) : des pages
   utilisent un paragraphe tout en gras (`<p><strong>…</strong></p>`) en
   guise d'intertitre plutôt qu'un vrai `<h3>` : la base h1-h4 de style.css
   ne peut pas s'appliquer à ce qui n'est pas une balise de titre. On donne
   donc le même traitement à un paragraphe qui ne contient QUE du gras.
   ============================================================ */
.mtc-contenu p > strong:only-child{ display:block; font-family:var(--rbz-police-affiche); font-weight:700; text-transform:uppercase; font-size:clamp(22px, 1.6vw + 14px, 28px); margin:1.6em 0 .5em; }
.mtc-contenu .mtc-faq + p{ margin-top:32px; }

/* ============================================================
   9. BLOCS PROFILS D'HABITAT (page-zone.php) — JUGEMENT-V9 🔴 : remplace le
   tableau HTML brut de 67 lignes (~9 000 px en 390). Données lues depuis
   rbz_communes() (champ `profil`, déjà en base — inc/rbz-communes.php),
   regroupées en 3 blocs, communes en pastilles cliquables. Aucune donnée
   inventée, aucune modification de la base.
   ============================================================ */
.mtc-profils{ display:flex; flex-direction:column; gap:2px; }
.mtc-profil{ display:grid; grid-template-columns:1fr; gap:24px; background:#FFFFFF; padding:32px 0; }
@media (min-width:800px){ .mtc-profil{ grid-template-columns:280px 1fr; gap:40px; align-items:start; padding:40px 0; } }
.mtc-profil__photo{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--rbz-rayon); background:var(--rbz-beige); }
.mtc-profil__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtc-profil__titre{ margin:0 0 6px; }
.mtc-profil__texte{ color:var(--rbz-encre-2); margin:0 0 18px; max-width:60ch; }
.mtc-profil:not(:last-child){ border-bottom:1px solid var(--rbz-filet); }

/* ============================================================
   10. CARTE INTERACTIVE — page /zone-intervention/ (page-zone.php),
   scopée à `.rbz-zone-carte` (wrapper posé par mon gabarit, la plomberie
   carte-communes.php elle-même n'est pas modifiée). JUGEMENT-V9 🟠 : carte
   et recherche côte à côte au lieu d'un empilement centré avec un grand
   vide entre les deux ; espace en bas du bouton "Voir les X communes".
   ============================================================ */
@media (min-width:900px){
	.rbz-zone-carte .mtc-carte-section .mtc-conteneur{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
	.rbz-zone-carte .mtc-entete-bande{ grid-column:1/-1; }
	.rbz-zone-carte .mtc-carte-intro{ grid-column:1/-1; margin-top:-16px; }
	.rbz-zone-carte .mtc-carte-wrap{ grid-column:1; margin-top:0; }
	.rbz-zone-carte .mtc-carte-liste{ grid-column:2; margin-top:0; }
}
.rbz-zone-carte .mtc-espace-t{ margin-bottom:32px; }

/* ============================================================
   11. CORRECTIF DE LECTURE — template-parts/carte-communes.php (plomberie
   gelée, DA §3 : « tu ne changes que leur habillage via CSS »). Ce fichier
   embarque un <style> interne écrit pour une V8 disparue (jetons --conduit,
   --trait, --craie, --gris-bloc, --encre… qui n'existent pas dans ce
   thème : seuls les jetons --rbz-* de style.css existent ici) : sur un
   `fill` SVG (propriété héritée), une valeur invalide retombe sur la valeur
   HÉRITÉE, pas sur la règle style.css sinon gagnante — visible surtout sur
   les communes SANS page publiée (`.mtc-carte-commune--inactive`, un
   <path> sans <a> parent). On réaffirme donc les jetons réels ici, en
   !important pour ne dépendre d'aucun ordre de source. Signalé à
   l'orchestrateur pour une correction à la source (DA §0).
   ============================================================ */
.mtc-carte-wrap{ background:#FFFFFF !important; border:1px solid var(--rbz-filet) !important; border-radius:var(--rbz-rayon) !important; }
.mtc-carte-commune path, path.mtc-carte-commune{ fill:var(--rbz-beige) !important; stroke:#FFFFFF !important; stroke-width:1.5 !important; }
path.mtc-carte-commune--inactive{ fill:#EDEBE6 !important; }
a.mtc-carte-commune:hover path, a.mtc-carte-commune:focus-visible path, a.mtc-carte-commune.mtc-carte-hover path{ fill:var(--rbz-rouge) !important; stroke:#FFFFFF !important; }
a.mtc-carte-commune.mtc-carte-commune--active path{ fill:var(--rbz-encre) !important; stroke:#FFFFFF !important; }
.mtc-carte-label{ font-family:var(--rbz-police-corps) !important; fill:var(--rbz-encre-2) !important; stroke:#FFFFFF !important; stroke-width:3px !important; font-weight:600 !important; }
.mtc-carte-label--ville{ font-size:14px !important; }
.mtc-carte-label--siege{ fill:var(--rbz-rouge) !important; font-weight:800 !important; }
.mtc-carte-pin{ fill:var(--rbz-rouge) !important; }
.mtc-carte-pin-oeil{ fill:#FFFFFF !important; }
.mtc-carte-tooltip{ background:var(--rbz-noir) !important; color:#FFFFFF !important; border-radius:4px !important; }
.mtc-carte-tooltip::after{ background:var(--rbz-noir) !important; }
.mtc-carte-recherche-carte{ background:var(--rbz-beige) !important; border-top:3px solid var(--rbz-rouge) !important; box-shadow:none !important; }
.mtc-carte-recherche{ background:#FFFFFF !important; border-color:var(--rbz-filet) !important; }
.mtc-carte-grille__item a{ color:var(--rbz-encre) !important; }
.mtc-carte-grille__item span{ color:var(--rbz-encre-2) !important; }
.mtc-carte-grille__item.est-actuelle span{ color:var(--rbz-rouge) !important; font-weight:700 !important; }
/* Ordre mobile DA §3 (page-zone) : carte D'ABORD, liste ENSUITE — la règle
   interne du fichier gelé inverse ce point. Correction d'ordre uniquement
   (property `order`), aucun pixel de couleur neuf (P-116 respecté). */
@media (max-width:639px){
	.mtc-carte-section .mtc-conteneur{ display:flex !important; flex-direction:column !important; }
	.mtc-carte-section .mtc-entete-bande{ order:0 !important; }
	.mtc-carte-section .mtc-carte-intro{ order:1 !important; }
	.mtc-carte-section .mtc-carte-wrap{ order:2 !important; margin-top:24px !important; }
	.mtc-carte-section .mtc-carte-liste{ order:3 !important; margin-top:24px !important; }
	.mtc-carte-section .mtc-espace-t{ order:4 !important; }
}

/* ============================================================
   14. MINI-CARTE DE SITUATION — /peaufiner B2 (template-parts/
   carte-situation.php). Posée DANS le panneau local, jamais pleine largeur.
   ============================================================ */
.mtc-mini-carte{ background:#FFFFFF; border:1px solid var(--rbz-filet); border-radius:var(--rbz-rayon); padding:14px; }
.mtc-mini-carte__svg{ width:100%; height:auto; aspect-ratio:1/1; display:block; overflow:visible; }
.mtc-mini-carte__point{ fill:var(--rbz-filet); }
.mtc-mini-carte__ligne{ stroke:var(--rbz-rouge); stroke-width:2.5; stroke-dasharray:8 8; opacity:.5; }
.mtc-mini-carte__repere circle{ fill:var(--rbz-encre-2); }
.mtc-mini-carte__repere text{ font:600 16px 'Barlow', sans-serif; fill:var(--rbz-encre-2); text-anchor:middle; }
.mtc-mini-carte__siege path{ fill:var(--rbz-encre); }
.mtc-mini-carte__siege-oeil{ fill:#FFFFFF; }
.mtc-mini-carte__siege-texte{ font:700 15px 'Barlow', sans-serif; fill:var(--rbz-encre); text-anchor:middle; }
.mtc-mini-carte__actuelle-halo{ fill:rgba(211,14,68,.18); }
.mtc-mini-carte__actuelle-point{ fill:var(--rbz-rouge); stroke:#FFFFFF; stroke-width:2.5; }
.mtc-mini-carte__actuelle-texte{ font:800 24px 'Barlow Condensed', sans-serif; text-transform:uppercase; fill:var(--rbz-rouge); text-anchor:middle; paint-order:stroke; stroke:#FFFFFF; stroke-width:6px; stroke-linejoin:round; }

/* ============================================================
   15. PANNEAU LOCAL — variante « avec mini-carte » (remplace la photo
   générique, /peaufiner B2+B3 : supprime du même coup le risque de photo
   hors sujet dans ce panneau). Section autonome (plus de colonne à
   étirer en face d'un formulaire, le formulaire a quitté cette section
   pour le héros — B1) : mise en page en 2 colonnes à l'aise, empilée en
   mobile.
   ============================================================ */
.mtc-panneau-local-section{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:800px){ .mtc-panneau-local-section{ grid-template-columns:1.1fr .9fr; gap:48px; } }

/* ============================================================
   16. VOILE DES HÉROS INTÉRIEURS — JUGEMENT-V9 🔴 (FAQ : « texte illisible
   sur la photo du héros ») : --rbz-voile-sombre (style.css) descend à 35 %
   d'opacité en son centre, exactement où vit le texte. On réaffirme un
   voile UNIFORME ≥ 65 % pour tous les héros intérieurs de ce lot (page.php,
   page-lieu.php, page-zone.php) — spécificité (2 classes) suffisante pour
   gagner sur la règle générique de style.css, aucun !important nécessaire.
   ============================================================ */
.mtc-hero--interieur .mtc-hero__voile{ background:linear-gradient(180deg, rgba(8,8,8,.68) 0%, rgba(8,8,8,.66) 45%, rgba(8,8,8,.78) 100%); }

/* /peaufiner v9 — mini-carte : vraie géométrie des communes (PL-001). */
.mtc-mini-carte__commune{ fill:#F5F4F1; stroke:#FFFFFF; stroke-width:2; }
.mtc-mini-carte__commune--actuelle{ fill:rgba(211,14,68,.22); stroke:var(--rbz-rouge); stroke-width:3; }