/*
Theme Name: RBZ v9 Traeger
Author: Seobooster LTD
Version: 9.0
Text Domain: rbz-v9-traeger
Description: Thème code-pur écrit de zéro pour ramonage-besancon.fr — direction
artistique sur le modèle traeger.com (DA-V9-TRAEGER.md), noir + rouge Montaclair,
fonds clairs hors héros/bandeaux sombres. Aucun code recopié d'un autre thème.

────────────────────────────────────────────────────────────────────────────
COMPOSANTS DISPONIBLES POUR LES LOTS 2 ET 3 (documentation, pas de pixel ici
qui ne serait pas déjà dans ce fichier — le socle ne fournit AUCUNE couleur) :

Layout .............. .mtc-conteneur / .mtc-section(--blanc|--beige|--noir|--compact)
Boutons .............. .mtc-btn(--primaire|--secondaire|--secondaire-sombre|--pleine)
Lien flèche .......... .mtc-lien-fleche
Surtitre + trait ..... .mtc-surtitre / .mtc-entete-bande(--centre) / .acc
Fil d'Ariane ......... .mtc-hero__fil (retour Mathias 27/09 : DANS le héros, plus de
                        bande blanche entre l'en-tête et le héros — rendu par
                        template-parts/hero.php, param `fil` ; breadcrumbs.php ne
                        rend plus rien, voir ce fichier)
En-tête .............. .mtc-annonce / .mtc-entete / .mtc-nav (plat, 6 entrées max, HM-024) / .mtc-tiroir
Héros ................ .mtc-hero(--accueil|--interieur|--form|--a-fil) / __media __voile __corps
                        __surtitre __titre __texte __actions __pause __preuves __fil
                        __zone-photo __zone-form __carte-form (--form : héros à
                        formulaire, peaufiner B1, voir template-parts/hero.php)
Tuiles photo ......... .mtc-tuiles-photo / .mtc-tuile-photo(__titre|__trait)
Split panneau+photo .. .mtc-split(--inverse) / __panneau / __photo
Bandeau chiffres ..... .mtc-chiffres / __titre / __grille / __col / __icone /
                        .mtc-chiffre (nombre, compté par app.js) / __legende
Typo fantôme ......... .mtc-fantome / __texte / __photo
Grille de cartes ..... .mtc-cartes / .mtc-carte / __photo __titre __trait __ligne __lien
Carrousel ............ .mtc-carrousel / __piste / __item / __fleche(--prec|--suiv) / __progression
Double tuile finale .. .mtc-double-tuile / __item / __photo / __corps
Accordéon FAQ ........ .mtc-faq / .mtc-faq__item (émis par rbz_corps_prepare())
Formulaire ........... .mtc-form (classes gelées, voir formulaire-contact.php)
Diagnostic ........... .mtc-diagnostic (classes gelées, voir diagnostic-module.php)
Carte communes ....... .mtc-carte-section (classes gelées, voir carte-communes.php)
Bande blanche contact . .mtc-bande-blanche / __texte / __etapes(--icones) / __remplissage / __form / .mtc-note-google
Barre mobile ......... .mtc-barre-mobile / __item(--appel|--ecrire)
Pied de page ......... .mtc-pied / __grille / __col / __titre / __communes / __legal / __bas-bande
Accessibilité ........ .mtc-vh / .mtc-vh-jusqua-focus
Mouvement ............ [data-reveal] / .est-visible / .mtc-ech / .mtc-ech--vu
────────────────────────────────────────────────────────────────────────────
*/

/* ============================================================
   1. POLICES — self-hosted, jamais Google Fonts (P-086).
   ============================================================ */
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('assets/fonts/barlow-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('assets/fonts/barlow-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('assets/fonts/barlow-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('assets/fonts/barlow-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('assets/fonts/barlow-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ============================================================
   2. JETONS — 1 fond neutre + 1 accent (P-116). Palette resserrée
   (DA §2, CM-0752). Deux paires de contraste déclarées et UTILISÉES
   (P-110) : --rbz-encre (texte sur fond clair) et --rbz-neige (texte
   sur fond sombre) — jamais de bascule prefers-color-scheme (GD-030).
   ============================================================ */
:root{
	--rbz-noir:#1A1A1A;         /* barre d'annonce + en-tête */
	--rbz-pied:#171717;         /* pied de page */
	--rbz-blanc:#FFFFFF;
	--rbz-beige:#F5F4F1;
	--rbz-encre:#25282A;        /* texte sur fond clair */
	--rbz-encre-2:#5B5F66;      /* texte secondaire sur fond clair */
	--rbz-filet:#E2E0DB;
	--rbz-rouge:#D30E44;
	--rbz-rouge-survol:#B00C39;
	--rbz-rouge-clair:#FF5C80;  /* texte rouge sur fond sombre, si nécessaire seulement */
	--rbz-neige:#FFFFFF;        /* texte sur fond sombre */
	--rbz-neige-2:#C9CBCE;      /* texte secondaire sur fond sombre */
	/* 26/09 JUGEMENT-V9 (accueil 🟠) : vidéo refaite (hérisson rouge visible à
	   gauche du conduit) — voile concentré en radial autour du bloc de texte
	   (centre, légèrement bas) plutôt qu'un aplat uniforme, pour laisser le
	   sujet visible sur les bords, notamment à gauche. */
	--rbz-voile-sombre:radial-gradient(120% 90% at 50% 62%, rgba(8,8,8,.8) 0%, rgba(8,8,8,.55) 45%, rgba(8,8,8,.18) 100%);
	--rbz-police-affiche:'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
	--rbz-police-corps:'Barlow', -apple-system, 'Segoe UI', Arial, sans-serif;
	--rbz-rayon:4px;
	--rbz-max:1320px;
	--rbz-ombre-aucune:none; /* design plat : rappel volontaire, jamais de box-shadow décorative */
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
	margin:0;
	font-family:var(--rbz-police-corps);
	font-weight:400;
	font-size:17px;
	line-height:1.6;
	color:var(--rbz-encre);
	background:var(--rbz-blanc);
	overflow-x:hidden;
}
@media (min-width:640px){ body{ font-size:18px; } }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul, ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

h1, h2, h3, h4{
	font-family:var(--rbz-police-affiche);
	text-transform:uppercase;
	hyphens:none;
	overflow-wrap:normal;
	word-break:normal;
	margin:0 0 .4em;
	letter-spacing:0;
	color:var(--rbz-encre);
}
h1{ font-weight:800; font-size:clamp(38px, 4.2vw + 20px, 72px); line-height:.95; }
/* 26/09 orchestrateur JUGEMENT-V9 T4 : le mobile perdait son caractère (H2
   à 28px) — clamp exact demandé, épinglé à 44px sous ~400px de large. */
h2{ font-weight:700; font-size:clamp(44px, 11vw, 72px); line-height:.95; }
h3{ font-weight:700; font-size:clamp(22px, 1.4vw + 16px, 30px); line-height:1.08; }
strong, b{ font-weight:600; }
em, i{ font-style:italic; }

/* 26/09 orchestrateur point 1 : motif classique SANS margin:-1px ni !important —
   c'est cette combinaison (position:absolute sans top/left + margin négatif)
   qui faisait déborder la page de 339px en 390 (élément poussé à right=729). */
.mtc-vh{
	position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mtc-vh-jusqua-focus:not(:focus){ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mtc-vh-jusqua-focus:focus{
	position:fixed; top:8px; left:8px; z-index:1000; width:auto; height:auto; padding:10px 16px;
	background:var(--rbz-noir); color:var(--rbz-neige); border-radius:var(--rbz-rayon); clip:auto;
}

:focus-visible{ outline:3px solid var(--rbz-rouge); outline-offset:2px; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.mtc-conteneur{ max-width:var(--rbz-max); margin-inline:auto; padding-inline:24px; }
@media (min-width:960px){ .mtc-conteneur{ padding-inline:40px; } }

.mtc-section{ padding-block:56px; }
@media (min-width:900px){ .mtc-section{ padding-block:96px; } }
.mtc-section--blanc{ background:var(--rbz-blanc); color:var(--rbz-encre); }
.mtc-section--beige, .mtc-section--gris{ background:var(--rbz-beige); color:var(--rbz-encre); } /* .mtc-section--gris : classe émise telle quelle par template-parts/carte-communes.php (compact) */
.mtc-section--noir{ background:var(--rbz-noir); color:var(--rbz-neige); }
.mtc-section--noir h2, .mtc-section--noir h3{ color:var(--rbz-neige); }
.mtc-section--compact{ padding-block:40px; }

/* ============================================================
   5. SURTITRE, TRAIT ROUGE, ENTÊTE DE SECTION
   ============================================================ */
.mtc-surtitre{
	display:inline-block;
	font-family:var(--rbz-police-affiche);
	font-weight:600;
	font-size:clamp(16px, .6vw + 13px, 20px);
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--rbz-rouge);
	margin-bottom:12px;
}
.mtc-section--noir .mtc-surtitre{ color:var(--rbz-rouge-clair); }

.mtc-trait-rouge{ display:block; width:40px; height:3px; background:var(--rbz-rouge); margin:14px 0 18px; border:0; }
.mtc-entete-bande{ max-width:760px; margin-bottom:40px; }
.mtc-entete-bande--centre{ margin-inline:auto; text-align:center; }
/* 26/09 orchestrateur JUGEMENT-V9 T2 (🟠) : Traeger ne colore jamais un mot
   dans un titre — H2 d'une seule couleur, trait rouge 40×3 dessous à la
   place (comme les cartes). `.acc` redevient neutre (encore présent dans
   des gabarits gelés comme carte-communes.php, qu'on ne modifie pas ici). */
.mtc-entete-bande h2 .acc, .acc{ color:inherit; }
.mtc-entete-bande h2{ position:relative; }
.mtc-entete-bande h2::after{ content:''; display:block; width:40px; height:3px; background:var(--rbz-rouge); margin-top:16px; }
.mtc-entete-bande--centre h2::after{ margin-inline:auto; }
.mtc-section--noir .mtc-entete-bande h2::after{ background:var(--rbz-rouge-clair); }
.mtc-chapo{ font-size:clamp(17px, .5vw + 15px, 20px); color:var(--rbz-encre-2); max-width:60ch; }
.mtc-section--noir .mtc-chapo{ color:var(--rbz-neige-2); }

/* ============================================================
   6. BOUTONS — plats, 48px, rayon 4px, uppercase condensé 600 (DA §1).
   Un seul bouton rouge par écran : c'est au gabarit de le respecter.
   ============================================================ */
.mtc-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:48px;
	padding:0 28px;
	border-radius:var(--rbz-rayon);
	border:2px solid transparent;
	font-family:var(--rbz-police-affiche);
	font-weight:600;
	font-size:20px;
	line-height:1;
	text-transform:uppercase;
	letter-spacing:.02em;
	white-space:nowrap;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
	box-shadow:none;
}
.mtc-btn--primaire{ background:var(--rbz-rouge); border-color:var(--rbz-rouge); color:#FFFFFF; }
.mtc-btn--primaire:hover, .mtc-btn--primaire:focus-visible{ background:var(--rbz-rouge-survol); border-color:var(--rbz-rouge-survol); }
.mtc-btn--secondaire{ background:transparent; border-color:var(--rbz-encre); color:var(--rbz-encre); }
.mtc-btn--secondaire:hover, .mtc-btn--secondaire:focus-visible{ background:var(--rbz-encre); color:#FFFFFF; }
.mtc-btn--secondaire-sombre{ background:transparent; border-color:#FFFFFF; color:#FFFFFF; }
.mtc-btn--secondaire-sombre:hover, .mtc-btn--secondaire-sombre:focus-visible{ background:#FFFFFF; color:var(--rbz-noir); }
.mtc-btn--appel{ background:transparent; border-color:currentColor; }
.mtc-btn--pleine{ width:100%; }

.mtc-lien-fleche{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--rbz-police-affiche);
	font-weight:600;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:.02em;
	color:var(--rbz-encre);
}
.mtc-lien-fleche svg{ width:18px; height:18px; stroke:var(--rbz-rouge); transition:transform .18s ease; }
.mtc-lien-fleche:hover svg, .mtc-lien-fleche:focus-visible svg{ transform:translateX(4px); }
.mtc-section--noir .mtc-lien-fleche{ color:#FFFFFF; }

/* ============================================================
   7. FIL D'ARIANE — DANS LE HÉROS (retour Mathias 27/09, point 6 : la bande
   blanche entre l'en-tête et le héros cassait l'immersion). Rendu par
   template-parts/hero.php (param `fil`), en haut du héros, texte blanc
   translucide — plus jamais entre l'en-tête et le héros. Le JSON-LD
   BreadcrumbList continue d'être émis par le socle, indépendamment de ce
   rendu visuel. template-parts/breadcrumbs.php (encore appelé HORS du héros
   par des gabarits non modifiés dans ce lot) ne rend plus rien : silencieux.
   ============================================================ */
.mtc-hero__fil{ position:absolute; top:18px; left:0; right:0; z-index:2; }
.mtc-hero__fil ol{ display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:rgba(255,255,255,.7); }
.mtc-hero__fil li:not(:last-child)::after{ content:'/'; margin-left:6px; color:rgba(255,255,255,.4); }
.mtc-hero__fil a{ color:rgba(255,255,255,.7); }
.mtc-hero__fil a:hover, .mtc-hero__fil a:focus-visible{ color:#FFFFFF; }
.mtc-hero__fil [aria-current="page"]{ color:rgba(255,255,255,.92); font-weight:600; }
.mtc-hero--a-fil .mtc-hero__corps{ padding-top:64px; }
.mtc-hero--a-fil.mtc-hero--form .mtc-hero__zone-photo .mtc-hero__corps{ padding-top:56px; }
@media (max-width:639px){
	.mtc-hero__fil{ top:12px; }
	.mtc-hero__fil ol{ font-size:12px; }
	.mtc-hero--a-fil .mtc-hero__corps{ padding-top:84px; }
}

/* ============================================================
   8. EN-TÊTE — barre d'annonce + sticky + méga-menu + tiroir mobile
   ============================================================ */
.mtc-annonce{ background:var(--rbz-noir); color:var(--rbz-neige-2); height:32px; }
.mtc-annonce__barre{ height:32px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; }
.mtc-annonce__droite{ display:flex; align-items:center; gap:14px; }
.mtc-annonce a{ color:var(--rbz-neige); }
.mtc-annonce a:hover{ color:var(--rbz-rouge-clair); }
/* 26/09 orchestrateur JUGEMENT-V9 T8 : étoile en rouge, pas en blanc. */
.mtc-etoile{ color:var(--rbz-rouge-clair); }
@media (max-width:639px){ .mtc-annonce{ display:none; } }

.mtc-entete{ position:sticky; top:0; z-index:60; background:var(--rbz-noir); height:68px; }
.mtc-entete__barre{ height:68px; display:flex; align-items:center; gap:24px; }

/* 26/09 orchestrateur JUGEMENT-V9 T3 : à 1440 le mot MONTACLAIR faisait ~9px
   (logo trop petit) ; à 390 le nom de la marque disparaissait (HM-008).
   Logo à 56px hors pied ; en 390, pictogramme 44px + « RAMONAGE BESANÇON »
   toujours visible, jamais coupé. */
.mtc-logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mtc-logo:not(.mtc-logo--pied) .mtc-logo__image{ height:56px; width:auto; }
.mtc-logo__texte{ display:flex; flex-direction:column; line-height:1.1; }
.mtc-logo__nom{ font-family:var(--rbz-police-affiche); font-weight:700; font-size:17px; text-transform:uppercase; color:#FFFFFF; white-space:nowrap; }
.mtc-logo__marque{ font-family:var(--rbz-police-corps); font-size:11px; color:var(--rbz-neige-2); }
.mtc-logo--pied .mtc-logo__nom{ font-size:20px; }
@media (max-width:479px){
	.mtc-logo:not(.mtc-logo--pied) .mtc-logo__image{ height:44px; }
	.mtc-logo__texte{ display:flex; }
	.mtc-logo__marque{ display:none; }
}

/* 26/09 orchestrateur point 2 : HM-024 (parc) gagne sur le méga-menu Traeger —
   structure plate uniquement, aucun sous-menu déroulant. */
.mtc-nav{ display:none; flex:1; }
.mtc-nav ul{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:nowrap; }
.mtc-nav__item > a{
	display:flex; align-items:center; height:68px; white-space:nowrap;
	font-family:var(--rbz-police-affiche); font-weight:600; font-size:15px;
	text-transform:uppercase; letter-spacing:.02em; color:#FFFFFF;
	border-bottom:2px solid transparent;
}
.mtc-nav__item > a:hover, .mtc-nav__item > a:focus-visible,
.mtc-nav__item.is-actif > a{ border-color:var(--rbz-rouge); }
@media (min-width:960px){ .mtc-nav{ display:block; } }

.mtc-entete__droite{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.mtc-entete__appel{ display:none; color:#FFFFFF; }
.mtc-entete__appel svg{ width:20px; height:20px; }
@media (min-width:960px){ .mtc-entete__appel{ display:flex; align-items:center; } }
.mtc-entete__devis{ display:none; }
@media (min-width:960px){ .mtc-entete__devis{ display:inline-flex; height:40px; padding:0 20px; font-size:16px; } }

.mtc-hamburger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; }
.mtc-hamburger span{ display:block; width:100%; height:2px; background:#FFFFFF; }
@media (min-width:960px){ .mtc-hamburger{ display:none; } }

/* Tiroir mobile plein écran — visibility:hidden en plus du transform quand
   fermé (26/09 orchestrateur point 1 : un translate seul reste mesurable
   hors écran et peut gonfler le scrollWidth de la page). */
.mtc-tiroir{
	position:fixed; inset:0; z-index:100; background:var(--rbz-noir); color:#FFFFFF;
	display:flex; flex-direction:column; padding:20px 24px 32px;
	transform:translateX(100%); visibility:hidden; transition:transform .24s ease, visibility .24s;
	overflow-y:auto;
}
.mtc-tiroir[data-ouvert="true"]{ transform:translateX(0); visibility:visible; }
.mtc-tiroir__entete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.mtc-tiroir__fermer{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.mtc-tiroir ul{ display:flex; flex-direction:column; }
.mtc-tiroir li{ border-bottom:1px solid rgba(255,255,255,.12); }
.mtc-tiroir > ul > li > a{
	display:flex; align-items:center; width:100%;
	padding:16px 0; font-family:var(--rbz-police-affiche); font-weight:600; font-size:20px; text-transform:uppercase; color:#FFFFFF;
}
.mtc-tiroir__pied{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px; }
body.mtc-menu-ouvert{ overflow:hidden; }
@media (min-width:960px){ .mtc-tiroir{ display:none; } }

/* ============================================================
   9. HÉROS — pleine largeur, sombre, structure fixe (DA §1).
   ============================================================ */
.mtc-hero{ position:relative; display:flex; align-items:flex-end; overflow:hidden; color:#FFFFFF; background:var(--rbz-noir); }
.mtc-hero--accueil{ min-height:88vh; max-height:860px; align-items:center; }
/* 26/09 orchestrateur JUGEMENT-V9 T6 : héros intérieur plus court + moins
   d'espace après lui, pour que le formulaire « en tête » reste visible dans
   les 900 premiers px (pages service/commune, gabarits des autres lots). */
.mtc-hero--interieur{ min-height:56vh; max-height:480px; align-items:center; }
.mtc-hero--interieur + *{ padding-top:48px; }
.mtc-hero__media{ position:absolute; inset:0; z-index:0; }
.mtc-hero__media img, .mtc-hero__media video{ width:100%; height:100%; object-fit:cover; }
@media not (prefers-reduced-motion:reduce){ .mtc-hero__media img, .mtc-hero__media video{ animation:mtc-zoom-lent 16s ease-in-out infinite alternate; } }
@keyframes mtc-zoom-lent{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.mtc-hero__voile{ position:absolute; inset:0; z-index:1; background:var(--rbz-voile-sombre); }
.mtc-hero__corps{ position:relative; z-index:2; width:100%; text-align:center; padding-block:64px; }
.mtc-hero__surtitre{ color:#FFFFFF; }
.mtc-hero__titre{ color:#FFFFFF; font-size:clamp(44px, 6vw + 10px, 112px); line-height:.9; margin-bottom:20px; }
.mtc-hero--interieur .mtc-hero__titre{ font-size:clamp(36px, 4vw + 10px, 72px); }
.mtc-hero__texte{ max-width:640px; margin-inline:auto; font-size:clamp(16px, .5vw + 14px, 19px); color:var(--rbz-neige-2); margin-bottom:28px; }
.mtc-hero__actions{ display:flex; justify-content:center; }
.mtc-hero__preuves{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin-top:36px; padding-top:0; }
.mtc-hero__preuves li{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.mtc-hero__preuve-valeur{ display:block; font-family:var(--rbz-police-affiche); font-weight:700; font-size:22px; color:#FFFFFF; }
.mtc-hero__preuves span{ font-size:13px; color:var(--rbz-neige-2); text-transform:uppercase; letter-spacing:.02em; }
/* 26/09 orchestrateur point 9 : les 3 preuves sur UNE ligne en 390 (plus de 2+1). */
@media (max-width:639px){
	.mtc-hero__preuves{ flex-wrap:nowrap; gap:10px; width:100%; max-width:360px; margin-inline:auto; }
	.mtc-hero__preuves li{ flex:1 1 0; min-width:0; }
	.mtc-hero__preuve-valeur{ font-size:22px; }
	.mtc-hero__preuves span{ font-size:11px; line-height:1.15; }
}
.mtc-hero__pause{
	position:absolute; z-index:3; left:24px; bottom:24px;
	width:40px; height:40px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
	display:flex; align-items:center; justify-content:center; color:#FFFFFF;
	background:rgba(0,0,0,.25);
}
.mtc-hero__pause svg{ width:16px; height:16px; }

/* ============================================================
   9b. HÉROS À FORMULAIRE — /peaufiner B1 (26/09/2026, PL-009/PL-010).
   ui-ux-pro-max : pattern « Hero (Value Prop + Form) »,
   preuves-ui-ux-pro-max/04-peaufiner-heros-formulaire.md. Zone photo
   (texte) + zone formulaire (carte blanche) EMPILÉES dans le flux normal
   (pas superposées) : à 390 la zone photo est plafonnée à 420px puis le
   formulaire suit sur fond clair ; à 900px+ les deux deviennent une grille
   2 colonnes de même hauteur, la zone photo gardant le fond sombre plein
   cadre et la zone formulaire restant sur le même fond sombre (carte
   blanche posée dessus), pour rester un « héros sombre » sur toute sa
   largeur comme demandé.
   ============================================================ */
.mtc-hero--form{ position:static; display:block; overflow:visible; align-items:normal; min-height:0; max-height:none; background:var(--rbz-noir); }
.mtc-hero--form .mtc-hero__zone-photo{ position:relative; overflow:hidden; min-height:260px; max-height:420px; display:flex; align-items:center; }
.mtc-hero--form .mtc-hero__zone-photo .mtc-hero__media{ position:absolute; inset:0; z-index:0; }
.mtc-hero--form .mtc-hero__zone-photo .mtc-hero__voile{ position:absolute; inset:0; z-index:1; }
.mtc-hero--form .mtc-hero__corps{ position:relative; z-index:2; width:100%; text-align:left; padding:32px 24px; }
.mtc-hero--form .mtc-hero__titre{ font-size:clamp(32px, 5vw + 8px, 56px); }
.mtc-hero--form .mtc-hero__texte{ margin-inline:0; max-width:520px; margin-bottom:16px; }
.mtc-hero--form .mtc-hero__preuves{ justify-content:flex-start; margin-top:20px; }
.mtc-hero--form .mtc-hero__preuves li{ align-items:flex-start; text-align:left; }
.mtc-hero--form .mtc-hero__zone-form{ background:var(--rbz-beige); padding:28px 24px 36px; }
.mtc-hero--form .mtc-hero__carte-form{ background:#FFFFFF; padding:32px; border:1px solid var(--rbz-filet); border-radius:var(--rbz-rayon); max-width:560px; margin-inline:auto; }
/* Formulaire resserré pour tenir dans les 900 premiers px avec le héros
   compact (P-116 respecté : aucune couleur, uniquement des espacements et
   la hauteur du champ message). */
.mtc-hero--form .mtc-hero__carte-form .mtc-form{ gap:12px; }
.mtc-hero--form .mtc-hero__carte-form .mtc-champs-2{ gap:12px; }
.mtc-hero--form .mtc-hero__carte-form .mtc-champ{ gap:4px; }
.mtc-hero--form .mtc-hero__carte-form .mtc-champ textarea{ min-height:52px; padding:10px 16px; }
.mtc-hero--form .mtc-hero__carte-form h3{ font-size:20px; }
.mtc-hero--form .mtc-hero__carte-form .mtc-form--carte{ border:0; padding:0; background:transparent; }
@media (min-width:900px){
	.mtc-hero--form{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
	.mtc-hero--form .mtc-hero__zone-photo{ min-height:100%; max-height:none; }
	.mtc-hero--form .mtc-hero__corps{ padding:56px 48px; max-width:560px; margin-inline:auto; }
	.mtc-hero--form .mtc-hero__zone-form{ background:transparent; display:flex; align-items:center; padding:40px 40px 40px 0; }
	.mtc-hero--form .mtc-hero__carte-form{ margin-inline:0; width:100%; flex:1 1 auto; }
}

/* ============================================================
   10. TUILES PHOTO VERTICALES
   ============================================================ */
.mtc-tuiles-photo{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:800px){ .mtc-tuiles-photo{ grid-template-columns:repeat(3, 1fr); } }
.mtc-tuile-photo{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--rbz-noir); }
.mtc-tuile-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 26/09 JUGEMENT-V9 (accueil 🟠, tuile « Certificat remis ») : voile renforcé
   pour garantir le contraste du titre quelle que soit la photo derrière. */
.mtc-tuile-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 60%); }
.mtc-tuile-photo__corps{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:24px; }
/* 26/09 orchestrateur point 4 : Barlow Condensed 700 CAPITALES, 40→56px, interligne .95. */
.mtc-tuile-photo__titre{
	color:#FFFFFF; margin:0; font-family:var(--rbz-police-affiche); font-weight:700;
	text-transform:uppercase; font-size:clamp(40px, 2.4vw + 24px, 56px); line-height:.95;
}
.mtc-tuile-photo__trait{ margin:10px 0 0; }

/* ============================================================
   11. SPLIT PANNEAU + PHOTO
   ============================================================ */
.mtc-split{ display:grid; grid-template-columns:1fr; }
@media (min-width:800px){ .mtc-split{ grid-template-columns:1fr 1fr; } .mtc-split--inverse{ direction:rtl; } .mtc-split--inverse > *{ direction:ltr; } }
.mtc-split__panneau{ background:var(--rbz-beige); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:48px 32px; }
@media (min-width:900px){ .mtc-split__panneau{ padding:64px 72px; } }
.mtc-split__panneau p{ color:var(--rbz-encre-2); margin-bottom:24px; max-width:46ch; }
.mtc-split__photo{ min-height:320px; }
.mtc-split__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:800px){ .mtc-split__photo{ min-height:100%; } }

/* ============================================================
   12. BANDEAU CHIFFRES NOIR
   ============================================================ */
/* 26/09 JUGEMENT-V9 (accueil 🟠) : phrases 32px capitales condensées comme
   Traeger, icônes 32px, padding-block 96px — plus de gros chiffre isolé. */
.mtc-chiffres{ background:var(--rbz-noir); color:#FFFFFF; padding-block:96px; }
.mtc-chiffres__grille-mere{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .mtc-chiffres__grille-mere{ grid-template-columns:1fr 2fr; gap:56px; align-items:center; } }
.mtc-chiffres__titre{ font-size:clamp(28px, 2vw + 16px, 44px); line-height:1.05; color:#FFFFFF; margin:0; }
.mtc-chiffres__grille{ display:grid; grid-template-columns:repeat(2, 1fr); gap:32px 28px; }
@media (min-width:640px){ .mtc-chiffres__grille{ grid-template-columns:repeat(4, 1fr); } }
/* retour Mathias 27/09, point 3 : chaque colonne centrée, icône du jeu
   rbz_icone() (variante sombre) au-dessus du texte — plus de petite icône au
   trait fin statique. */
.mtc-chiffres__col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.mtc-chiffres__icone{ width:32px; height:32px; stroke:var(--rbz-rouge); }
.mtc-chiffres__phrase{
	font-family:var(--rbz-police-affiche); font-weight:600; font-size:32px; line-height:1.05;
	text-transform:uppercase; letter-spacing:.01em; color:#FFFFFF; margin:0;
}

/* ============================================================
   13. TYPOGRAPHIE FANTÔME
   ============================================================ */
/* retour Mathias 27/09, point 1 : bugué (la photo cachait la 2ᵉ ligne et
   sortait coupée en bas de la section). Refait sans aucun chevauchement ni
   marge négative : les deux lignes ENTIÈREMENT lisibles en haut, la photo
   ENTIÈRE (jamais rognée par le bas) posée dessous, section qui s'ajuste
   à son contenu (pas de min-height fixe qui pourrait couper). */
.mtc-fantome{ position:relative; background:var(--rbz-noir); padding:88px 24px 64px; display:flex; flex-direction:column; align-items:center; gap:40px; }
.mtc-fantome__texte{
	position:relative; z-index:0; width:100%; text-align:center; margin:0;
	font-family:var(--rbz-police-affiche); font-weight:800; text-transform:uppercase;
	font-size:clamp(40px, 7vw, 128px); line-height:1.08; color:#2B2B2B;
}
.mtc-fantome__photo{
	position:relative; z-index:1; display:block; width:min(760px, 100%); margin:0 auto;
	aspect-ratio:16/9; object-fit:cover; border-radius:var(--rbz-rayon);
}
@media (max-width:639px){
	.mtc-fantome{ padding:56px 20px 40px; gap:28px; }
	.mtc-fantome__texte{ font-size:clamp(32px, 11vw, 56px); line-height:1.12; color:#333; }
	.mtc-fantome__photo{ width:100%; aspect-ratio:4/3; } /* photo entière, jamais coupée */
}

/* ============================================================
   14. GRILLE DE CARTES + CARROUSEL
   ============================================================ */
.mtc-cartes{ display:grid; grid-template-columns:1fr; gap:32px 28px; }
@media (min-width:640px){ .mtc-cartes{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:960px){ .mtc-cartes{ grid-template-columns:repeat(4, 1fr); } }
.mtc-cartes--2x2{ }
@media (min-width:640px){ .mtc-cartes--2x2{ grid-template-columns:repeat(2, 1fr); } }
.mtc-carte{ display:flex; flex-direction:column; }
.mtc-carte__photo-wrap{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--rbz-beige); margin-bottom:16px; }
.mtc-cartes--carre .mtc-carte__photo-wrap{ aspect-ratio:1/1; }
.mtc-carte__photo-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.mtc-carte:hover .mtc-carte__photo-wrap img{ transform:scale(1.04); }
.mtc-carte__titre{ font-size:22px; margin:0; }
.mtc-carte__trait{ margin:10px 0; }
.mtc-carte__texte{ color:var(--rbz-encre-2); font-size:15px; margin-bottom:12px; }
.mtc-carte__ligne{ font-size:13px; color:var(--rbz-encre-2); text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }

.mtc-carrousel{ position:relative; }
.mtc-carrousel__piste{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
.mtc-carrousel__piste::-webkit-scrollbar{ display:none; }
.mtc-carrousel__item{ flex:0 0 78%; scroll-snap-align:start; }
@media (min-width:640px){ .mtc-carrousel__item{ flex-basis:44%; } }
/* 26/09 JUGEMENT-V9 (accueil 🟠, « Ce qu'on vous explique ») : 3 cartes
   fixes ~400px visibles à 1440 (jamais 6 cartes minuscules qui se divisent
   la largeur) ; au-delà de 3, ça défile au carrousel (overflow-x reste actif,
   contrairement à l'ancienne règle qui l'annulait). */
@media (min-width:960px){ .mtc-carrousel__piste{ gap:28px; } .mtc-carrousel__item{ flex:0 0 calc(33.333% - 19px); } }
.mtc-carrousel__fleches{ display:none; }
@media (min-width:960px){
	.mtc-carrousel__fleches{ display:flex; gap:10px; justify-content:flex-end; margin-bottom:16px; }
	.mtc-carrousel__fleche{ width:44px; height:44px; border:2px solid var(--rbz-encre); border-radius:50%; display:flex; align-items:center; justify-content:center; }
	.mtc-carrousel__fleche:hover{ background:var(--rbz-encre); color:#FFFFFF; }
	.mtc-carrousel__fleche svg{ width:18px; height:18px; }
}
.mtc-carrousel__progression{ position:relative; height:3px; background:var(--rbz-filet); margin-top:20px; border-radius:2px; overflow:hidden; }
.mtc-carrousel__progression-barre{ position:absolute; left:0; top:0; bottom:0; width:25%; background:var(--rbz-rouge); transition:width .2s ease, transform .2s ease; }

/* ============================================================
   14b. AVIS GOOGLE — classes émises telles quelles par
   inc/rbz-avis.php (rbz_avis_carte()), non modifiable (plomberie).
   ============================================================ */
.mtc-avis-grille{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .mtc-avis-grille{ grid-template-columns:repeat(3, 1fr); } }
/* 26/09 JUGEMENT-V9 (accueil 🟡) : Traeger est plat, jamais de carte à
   bordure/coins arrondis — fond blanc sur la section beige suffit à séparer. */
.mtc-avis{ background:#FFFFFF; border:0; border-radius:0; padding:24px; display:flex; flex-direction:column; gap:12px; }
.mtc-avis__etoiles{ display:flex; gap:2px; }
.mtc-avis__etoiles svg{ width:16px; height:16px; fill:var(--rbz-filet); }
.mtc-avis__etoiles svg.est-pleine{ fill:var(--rbz-rouge); }
.mtc-avis__texte{ color:var(--rbz-encre); font-size:15px; flex:1; }
.mtc-avis__signature{ font-size:13px; color:var(--rbz-encre-2); }
.mtc-avis-actions{ display:flex; flex-wrap:wrap; gap:20px; margin-top:32px; }

/* ============================================================
   15. DOUBLE TUILE FINALE
   ============================================================ */
.mtc-double-tuile{ display:grid; grid-template-columns:1fr; gap:2px; }
@media (min-width:800px){ .mtc-double-tuile{ grid-template-columns:1fr 1fr; } }
.mtc-double-tuile__item{ position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; background:var(--rbz-noir); }
.mtc-double-tuile__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mtc-double-tuile__item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.82) 100%); }
/* 26/09 orchestrateur point 5 : voile dédié ≥70% directement sous le texte
   (en plus du voile général ci-dessus) + surtitre en rouge clair (lisible
   sur photo sombre, jamais le rouge plein illisible sur fond chargé). */
.mtc-double-tuile__corps{
	position:relative; z-index:1; width:100%; padding:56px 40px 40px;
	background:linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,.55) 35%, rgba(8,8,8,.92) 100%);
	color:#FFFFFF;
}
.mtc-double-tuile__corps .mtc-surtitre{ color:var(--rbz-rouge-clair); }
.mtc-double-tuile__corps h3{ color:#FFFFFF; font-size:clamp(26px, 2vw + 16px, 38px); }
.mtc-double-tuile__corps p{ color:var(--rbz-neige-2); max-width:44ch; margin-bottom:20px; }

/* ============================================================
   16. FAQ / ACCORDÉON (classes émises par rbz_corps_prepare())
   ============================================================ */
.mtc-faq{ display:flex; flex-direction:column; gap:2px; }
.mtc-faq__item{ background:var(--rbz-blanc); border:1px solid var(--rbz-filet); border-radius:var(--rbz-rayon); padding:0; }
.mtc-faq__item summary{
	list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:18px 20px; cursor:pointer; font-family:var(--rbz-police-affiche); font-weight:600; font-size:17px; text-transform:none;
}
.mtc-faq__item summary::-webkit-details-marker{ display:none; }
.mtc-faq__chevron{ width:20px; height:20px; flex:0 0 auto; transition:transform .18s ease; color:var(--rbz-rouge); }
.mtc-faq__item[open] .mtc-faq__chevron{ transform:rotate(180deg); }
.mtc-faq__item p{ padding:0 20px 18px; color:var(--rbz-encre-2); }

/* ============================================================
   17. FORMULAIRE — classes gelées de formulaire-contact.php
   ============================================================ */
.mtc-form{ display:flex; flex-direction:column; gap:16px; background:var(--rbz-blanc); width:100%; max-width:100%; box-sizing:border-box; }
/* 26/09 orchestrateur JUGEMENT-V9 T5 (🟠, débordements à 1440 sur guide et
   404) : container-type sur la boîte compacte pour que la grille des champs
   sache réagir à SA propre largeur (barre latérale étroite), pas au viewport. */
.mtc-form--carte{ background:var(--rbz-blanc); border:1px solid var(--rbz-filet); border-radius:var(--rbz-rayon); padding:32px; container-type:inline-size; }
.mtc-form h3{ font-size:22px; margin-bottom:0; }
.mtc-piege{ position:absolute; left:-9999px; }
.mtc-badge-delai{ display:inline-flex; align-self:flex-start; font-size:13px; font-weight:600; color:var(--rbz-encre-2); background:var(--rbz-beige); padding:4px 10px; border-radius:20px; margin:0; }
.mtc-champs-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width:479px){ .mtc-champs-2{ grid-template-columns:1fr; } }
@container (max-width:419px){ .mtc-champs-2{ grid-template-columns:1fr; } }
.mtc-champ{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mtc-champ label{ font-size:14px; font-weight:600; color:var(--rbz-encre); }
.mtc-champ input, .mtc-champ select, .mtc-champ textarea{
	width:100%; box-sizing:border-box; height:48px; padding:0 16px; border:2px solid var(--rbz-filet); border-radius:var(--rbz-rayon);
	font-family:var(--rbz-police-corps); font-size:16px; color:var(--rbz-encre); background:#FFFFFF;
	transition:border-color .15s ease;
}
.mtc-champ textarea{ height:auto; padding:12px 16px; resize:vertical; min-height:90px; }
.mtc-champ input:focus, .mtc-champ select:focus, .mtc-champ textarea:focus{ border-color:var(--rbz-rouge); outline:none; }
.mtc-champ.mtc-vh{ display:none; }
.mtc-rgpd{ font-size:12px; color:var(--rbz-encre-2); }
.mtc-rgpd a{ text-decoration:underline; }
.mtc-form-appel{ text-align:center; }
.mtc-confirmation{ padding:16px; background:var(--rbz-beige); border-radius:var(--rbz-rayon); }
.mtc-small{ font-size:13px; color:var(--rbz-encre-2); }
.rbz-lien-tel{ font-weight:600; color:var(--rbz-rouge); white-space:nowrap; }

/* ============================================================
   18. DIAGNOSTIC — classes gelées de diagnostic-module.php
   ============================================================ */
.mtc-diagnostic{ background:var(--rbz-beige); border-radius:var(--rbz-rayon); padding:32px 20px; }
@media (min-width:640px){ .mtc-diagnostic{ padding:48px; } }
.mtc-diagnostic__entete{ text-align:center; margin-bottom:24px; }
.mtc-diagnostic__meta{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; }
.mtc-diagnostic__compteur{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--rbz-encre-2); }
.mtc-progression{ display:flex; gap:6px; width:100%; max-width:360px; }
.mtc-progression span{ flex:1; height:4px; background:var(--rbz-filet); border-radius:2px; }
.mtc-progression span.mtc-fait{ background:var(--rbz-rouge); }
.mtc-progression span.mtc-courant{ background:var(--rbz-encre); }
.mtc-ecran legend{ font-family:var(--rbz-police-affiche); font-weight:700; font-size:clamp(22px,2vw+16px,30px); text-transform:none; padding:0; margin-bottom:20px; text-align:center; width:100%; }
.mtc-options{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .mtc-options{ grid-template-columns:1fr 1fr; } }
.mtc-option label{
	display:flex; align-items:center; gap:14px; padding:16px; background:#FFFFFF;
	border:2px solid var(--rbz-filet); border-radius:var(--rbz-rayon); cursor:pointer; height:100%;
}
.mtc-option input{ position:absolute; opacity:0; pointer-events:none; }
.mtc-option svg{ width:26px; height:26px; flex:0 0 auto; color:var(--rbz-encre-2); }
.mtc-option.is-checked label{ border-color:var(--rbz-rouge); }
.mtc-option.is-checked svg{ color:var(--rbz-rouge); }
.mtc-releve{ margin-top:16px; padding:12px 16px; background:#FFFFFF; border-radius:var(--rbz-rayon); font-size:14px; }
.mtc-diagnostic__nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
.mtc-diagnostic__nav--contact{ justify-content:flex-end; }
.mtc-diagnostic__retour{ font-weight:600; font-size:14px; color:var(--rbz-encre-2); }
.mtc-diagnostic__suivant{ margin-left:auto; }
.mtc-jauge__piste{ height:8px; background:var(--rbz-filet); border-radius:4px; overflow:hidden; }
.mtc-jauge__remplissage{ height:100%; width:0; background:var(--rbz-rouge); transition:width .5s ease; }
.mtc-jauge--0 .mtc-jauge__remplissage, .mtc-jauge__remplissage.mtc-jauge--0{ background:#3AA65A; }
.mtc-jauge__reperes{ display:flex; justify-content:space-between; font-size:12px; color:var(--rbz-encre-2); margin-top:6px; }
.mtc-badge{ background:#FFFFFF; border-radius:var(--rbz-rayon); padding:20px; margin:20px 0; border-left:4px solid var(--rbz-rouge); }
.mtc-badge--niveau-0{ border-color:#3AA65A; }
.mtc-badge__titre{ font-family:var(--rbz-police-affiche); font-weight:700; font-size:20px; text-transform:uppercase; margin:0 0 6px; }
.mtc-badge__raisons{ margin-top:10px; padding-left:18px; list-style:disc; }
.mtc-synthese dl{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:20px 0; font-size:14px; }
.mtc-synthese dt{ color:var(--rbz-encre-2); }
.mtc-synthese dd{ margin:0; font-weight:600; }
.mtc-glisse-avant{ animation:mtc-glisse-a .28s ease; }
.mtc-glisse-arriere{ animation:mtc-glisse-r .28s ease; }
@keyframes mtc-glisse-a{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@keyframes mtc-glisse-r{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mtc-glisse-avant, .mtc-glisse-arriere{ animation:none; } }

/* ============================================================
   19. CARTE DES COMMUNES — classes gelées de carte-communes.php
   ============================================================ */
.mtc-carte-section{ }
.mtc-carte-intro{ margin-bottom:24px; }
.mtc-carte-wrap{ position:relative; background:#FFFFFF; border:1px solid var(--rbz-filet); border-radius:var(--rbz-rayon); padding:16px; }
.mtc-carte-svg{ width:100%; height:auto; }
.mtc-carte-commune{ fill:var(--rbz-beige); stroke:#FFFFFF; stroke-width:1.5; transition:fill .15s ease; cursor:pointer; }
.mtc-carte-commune--inactive{ fill:#EDEBE6; cursor:default; }
.mtc-carte-commune:hover, .mtc-carte-commune.mtc-carte-hover{ fill:var(--rbz-rouge); }
.mtc-carte-commune--active{ fill:var(--rbz-encre); }
.mtc-carte-label{ font-family:var(--rbz-police-corps); font-size:9px; fill:var(--rbz-encre-2); pointer-events:none; }
.mtc-carte-label--siege{ font-weight:700; fill:var(--rbz-rouge); text-anchor:middle; }
.mtc-carte-pin{ fill:var(--rbz-rouge); }
.mtc-carte-pin-oeil{ fill:#FFFFFF; }
.mtc-carte-tooltip{ position:absolute; z-index:5; background:var(--rbz-noir); color:#FFFFFF; font-size:13px; padding:6px 10px; border-radius:4px; pointer-events:none; }
.mtc-carte-liste{ margin-top:32px; }
.mtc-carte-recherche-carte{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.mtc-carte-recherche{ display:flex; align-items:center; gap:10px; border:2px solid var(--rbz-filet); border-radius:var(--rbz-rayon); padding:0 14px; height:48px; flex:1; min-width:220px; }
.mtc-carte-recherche svg{ width:18px; height:18px; color:var(--rbz-encre-2); }
.mtc-carte-recherche input{ border:0; outline:none; height:100%; flex:1; font-size:15px; background:transparent; }
.mtc-carte-liste-compte{ font-size:13px; color:var(--rbz-encre-2); margin:0; }
.mtc-carte-grille{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
@media (min-width:640px){ .mtc-carte-grille{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .mtc-carte-grille{ grid-template-columns:repeat(4,1fr); } }
.mtc-carte-grille__item{ border-bottom:1px solid var(--rbz-filet); padding-bottom:8px; }
.mtc-carte-grille__item a{ font-size:15px; }
.mtc-carte-grille__item a:hover{ color:var(--rbz-rouge); }
.mtc-carte-grille__item.est-actuelle a{ color:var(--rbz-rouge); font-weight:600; }
.mtc-carte-liste-vide{ text-align:center; color:var(--rbz-encre-2); padding:24px 0; }

/* 26/09 JUGEMENT-V9 (Zone, accueil 🟠) : la grille des 67 communes (≈2000px)
   se replie TOUJOURS sous un bouton (« comme en 390 », désormais aussi à
   1440) — posée par assets/js/ui.js (initCarteRepli), les liens restent
   TOUJOURS dans le HTML, seule la hauteur visuelle change. */
.mtc-carte-grille--repliee{ max-height:280px; overflow:hidden; position:relative; }
.mtc-carte-grille--repliee::after{
	content:''; position:absolute; left:0; right:0; bottom:0; height:64px;
	background:linear-gradient(180deg, rgba(255,255,255,0), var(--rbz-blanc));
	pointer-events:none;
}
.mtc-carte-grille--repliee.mtc-carte-grille--ouverte{ max-height:none; overflow:visible; }
.mtc-carte-grille--repliee.mtc-carte-grille--ouverte::after{ display:none; }
.mtc-carte-repli-bouton{
	display:none; margin-top:16px; height:44px; padding:0 24px; width:100%;
	border:2px solid var(--rbz-encre); border-radius:var(--rbz-rayon); background:#FFFFFF;
	font-family:var(--rbz-police-affiche); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.02em;
}

/* Carte et recherche côte à côte à 1440 (carte 60%, recherche + communes
   40%) — ciblage CSS uniquement, template-parts/carte-communes.php est un
   gabarit gelé qu'on n'édite pas ; toutes ses classes sont uniques, donc
   une grille nommée suffit à réagencer sans toucher au PHP. */
@media (min-width:900px){
	.mtc-carte-section .mtc-conteneur{ display:grid; grid-template-columns:60% 1fr; column-gap:40px; align-items:start; }
	.mtc-carte-section .mtc-entete-bande, .mtc-carte-section .mtc-carte-intro{ grid-column:1 / -1; }
	.mtc-carte-section .mtc-carte-wrap{ grid-column:1; width:100%; max-width:none; margin:0 !important; }
	.mtc-carte-section .mtc-carte-liste{ grid-column:2; margin-top:0; }
}
/* 390 : carte carrée pleine largeur, en premier, communes principales en clair. */
@media (max-width:639px){
	.mtc-carte-wrap{ aspect-ratio:1/1; display:flex; align-items:center; }
	.mtc-carte-label--commune{ display:none; } /* noms illisibles à cette taille : seuls le siège et Besançon restent légendés */
}

/* ============================================================
   20. BANDE BLANCHE « ÊTRE RAPPELÉ » (bloc-contact.php)
   ============================================================ */
/* 26/09 orchestrateur point 6 : la section n'a pas de .mtc-conteneur interne
   (formulaire-contact.php est gelé) — elle porte donc ELLE-MÊME sa gouttière,
   comme .mtc-conteneur, pour ne jamais coller au bord.
   Ordre naturel du DOM (texte court PUIS formulaire) conservé à toutes les
   largeurs — aucun `order` qui l'inverse. */
/* 26/09 orchestrateur JUGEMENT-V9 T1 (🔴, 8 pages) : align-items:stretch —
   la colonne gauche s'étire désormais à la hauteur du formulaire, jamais de
   vide face à lui. */
.mtc-bande-blanche{
	display:grid; grid-template-columns:1fr; gap:20px; background:var(--rbz-blanc);
	padding:56px 24px; max-width:var(--rbz-max); margin-inline:auto;
}
@media (min-width:900px){ .mtc-bande-blanche{ grid-template-columns:1fr 1fr; gap:64px; padding:96px 40px; align-items:stretch; } }
.mtc-bande-blanche__texte{ display:flex; flex-direction:column; }
.mtc-bande-blanche__photo{ display:block; width:100%; object-fit:cover; border-radius:var(--rbz-rayon); margin-top:24px; aspect-ratio:4/3; }
@media (min-width:900px){ .mtc-bande-blanche__photo{ flex:1 1 auto; min-height:260px; height:auto; aspect-ratio:auto; } }
.mtc-bande-blanche__etapes{ display:flex; flex-direction:column; gap:16px; margin:24px 0; }
.mtc-bande-blanche__etapes li{ display:flex; flex-direction:column; padding-left:18px; border-left:2px solid var(--rbz-rouge); }
.mtc-bande-blanche__etapes strong{ font-family:var(--rbz-police-affiche); text-transform:uppercase; font-size:15px; }
.mtc-bande-blanche__etapes span{ font-size:14px; color:var(--rbz-encre-2); }
/* retour Mathias 27/09, point 2/6 : variante avec icône du jeu rbz_icone()
   (garanties de rbz_garanties_rappel(), plus de trait fin statique). */
.mtc-bande-blanche__etapes--icones li{ flex-direction:row; align-items:flex-start; gap:14px; padding-left:0; border-left:0; }
.mtc-bande-blanche__etapes--icones li > div{ display:flex; flex-direction:column; gap:2px; }
/* Colonne SANS photo (accueil, retour Mathias 27/09 point 2) : la colonne
   gauche du bloc-contact final ne doit jamais rester vide face au
   formulaire — ce conteneur absorbe l'espace laissé libre par l'absence de
   photo et centre son contenu (icônes + carte avis) dans cet espace. */
.mtc-bande-blanche__remplissage{ display:flex; flex-direction:column; justify-content:center; gap:24px; margin:24px 0; }
@media (min-width:900px){ .mtc-bande-blanche__remplissage{ flex:1 1 auto; } }
.mtc-note-google{ display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--rbz-beige); border-radius:var(--rbz-rayon); }
.mtc-note-google strong{ display:block; font-family:var(--rbz-police-affiche); font-size:22px; text-transform:uppercase; }
.mtc-note-google span{ display:block; font-size:13px; color:var(--rbz-encre-2); }

/* ============================================================
   21. BARRE MOBILE
   ============================================================ */
.mtc-barre-mobile{
	position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex;
	background:#FFFFFF; border-top:1px solid var(--rbz-filet);
	padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
	transition:transform .2s ease;
}
.mtc-barre-mobile[data-masquee="true"]{ transform:translateY(100%); }
.mtc-barre-mobile__item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; font-size:12px; font-weight:600; text-transform:uppercase; }
.mtc-barre-mobile__item svg{ width:20px; height:20px; }
.mtc-barre-mobile__item--appel{ color:var(--rbz-encre); }
.mtc-barre-mobile__item--ecrire{ color:#FFFFFF; background:var(--rbz-rouge); border-radius:var(--rbz-rayon); margin:0 4px; }
@media (min-width:900px){ .mtc-barre-mobile{ display:none; } }
/* 26/09 JUGEMENT-V9 (accueil 🟡) : la réserve de la barre mobile fixe était
   blanche (fond par défaut du body) sous le pied #171717 → bande claire
   visible en bas de page. Fond sombre pour cette réserve, sous 900px. */
body.mtc-a-barre-mobile{ padding-bottom:64px; background:var(--rbz-pied); }
@media (min-width:900px){ body.mtc-a-barre-mobile{ padding-bottom:0; background:var(--rbz-blanc); } }

/* ============================================================
   22. PIED DE PAGE
   ============================================================ */
.mtc-pied{ background:var(--rbz-pied); color:var(--rbz-neige-2); border-top:3px solid var(--rbz-rouge); }
/* 26/09 orchestrateur point 7 : le footer porte 6 blocs (logo, 4 colonnes de
   liens, « Être rappelé ») — la grille doit déclarer 6 pistes, sinon le 6ᵉ
   bloc retombe seul sur une nouvelle ligne (c'était le bug : orphelin sous
   les colonnes). « Être rappelé » reste ainsi à la même hauteur que les listes. */
.mtc-pied__grille{ display:grid; grid-template-columns:1fr; gap:40px; padding-block:56px; }
@media (min-width:700px){ .mtc-pied__grille{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .mtc-pied__grille{ grid-template-columns:1.1fr .8fr .9fr .8fr .9fr 1.2fr; gap:24px; align-items:start; } }
.mtc-pied__baseline{ margin:14px 0 0; max-width:32ch; font-size:14px; }
.mtc-pied__titre{ font-family:var(--rbz-police-affiche); font-weight:600; font-size:15px; text-transform:uppercase; color:#FFFFFF; margin:0 0 16px; }
.mtc-pied__col ul{ display:flex; flex-direction:column; gap:10px; }
.mtc-pied__col a{ font-size:14px; }
.mtc-pied__col a:hover{ color:var(--rbz-rouge-clair); }
.mtc-pied__identite{ font-size:14px; margin:0 0 10px; }
.mtc-pied__mail a{ font-size:14px; }
.mtc-pied__avis{ display:inline-block; margin:12px 0; font-size:14px; }
.mtc-pied__avis strong{ color:#FFFFFF; }
.mtc-pied__rappel{ background:#232323; border-radius:var(--rbz-rayon); padding:24px; }
.mtc-pied__rappel h3{ color:#FFFFFF; font-size:20px; }
.mtc-pied__rappel .mtc-form{ background:transparent; margin-top:14px; }
.mtc-pied__rappel .mtc-champ label{ color:var(--rbz-neige-2); }
.mtc-pied__rappel .mtc-champ input, .mtc-pied__rappel .mtc-champ select{ background:#2C2C2C; border-color:#3A3A3A; color:#FFFFFF; }
.mtc-pied__legal{ margin-top:16px; display:flex; flex-wrap:wrap; gap:4px; font-size:12px; }
.mtc-pied__legal-sep{ margin:0 4px; }
.mtc-pied__mentions{ padding-block:16px; font-size:12px; border-top:1px solid rgba(255,255,255,.1); }
.mtc-pied__bas-bande{ background:#0F0F0F; }
.mtc-pied__bas{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding-block:16px; font-size:12px; }

/* ============================================================
   23. MOUVEMENT — apparitions au défilement (discret), désactivé
   sous prefers-reduced-motion (DA §1, ui-ux-pro-max §motion 6).
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .4s ease, transform .4s ease; }
[data-reveal].est-visible{ opacity:1; transform:none; }
.mtc-ech{ opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.mtc-ech--vu{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	[data-reveal], .mtc-ech{ opacity:1 !important; transform:none !important; transition:none !important; }
	.mtc-hero__media img, .mtc-hero__media video{ animation:none !important; }
}

/* ============================================================
   23b. CONTENU ÉDITORIAL — prose de base pour page.php/single.php
   (the_content). Jamais de long paragraphe centré (P-073).
   ============================================================ */
.mtc-contenu{ max-width:760px; }
.mtc-contenu > *:first-child{ margin-top:0; }
.mtc-contenu h2{ font-size:clamp(26px, 1.6vw + 18px, 38px); margin-top:1.4em; }
.mtc-contenu h3{ margin-top:1.2em; }
.mtc-contenu p, .mtc-contenu ul, .mtc-contenu ol{ margin-bottom:1.1em; color:var(--rbz-encre); text-align:left; }
.mtc-contenu ul, .mtc-contenu ol{ padding-left:22px; }
.mtc-contenu ul{ list-style:disc; }
.mtc-contenu ol{ list-style:decimal; }
.mtc-contenu li{ margin-bottom:.4em; }
.mtc-contenu a{ color:var(--rbz-rouge); text-decoration:underline; text-underline-offset:2px; }
.mtc-contenu a:hover{ color:var(--rbz-rouge-survol); }
.mtc-contenu img{ border-radius:var(--rbz-rayon); margin:1.4em 0; }
.mtc-contenu blockquote{ margin:1.4em 0; padding-left:20px; border-left:3px solid var(--rbz-rouge); color:var(--rbz-encre-2); font-style:italic; }
.mtc-contenu figcaption{ font-size:13px; color:var(--rbz-encre-2); margin-top:8px; }
.mtc-contenu .mtc-faq{ margin-top:1.4em; }

/* ============================================================
   24. TABLEAUX — lisibles et défilables sur mobile (le socle pose
   déjà le wrapper ; on n'habille ici que ce qui se voit).
   ============================================================ */
.mtc-tableau-scroll table{ border-collapse:collapse; width:100%; font-size:15px; }
.mtc-tableau-scroll th, .mtc-tableau-scroll td{ padding:10px 14px; border:1px solid var(--rbz-filet); text-align:left; }
.mtc-tableau-scroll th{ background:var(--rbz-beige); font-family:var(--rbz-police-affiche); text-transform:uppercase; font-size:13px; }

/* ============================================================
   25. TÉLÉPHONE — jamais coupé sur deux lignes (§6)
   ============================================================ */
.rbz-mono, .mtc-btn--appel, a[href^="tel:"]{ white-space:nowrap; }

/* ============================================================
   26. UTILITAIRES
   ============================================================ */
.mtc-espace-t{ margin-top:20px; }
.mtc-bande-blanche--beige{ background:var(--rbz-beige); }


/* ═══ Icônes v9 (retour Mathias 27/09) — template-parts/icone.php, rbz_icone( $nom ).
   Badge carré 72 px (rayon 4 px, Traeger), fond teinté rouge, tracé qui se dessine
   à l'apparition puis léger rebond au survol. Variante --sombre pour fonds noirs. ═══ */
.mtc-ico{ display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--rbz-rayon, 4px); background:rgba(211,14,68,.08); color:var(--rbz-rouge, #D30E44); flex:none; transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s; }
.mtc-ico svg{ width:40px; height:40px; overflow:visible; }
.mtc-ico__fond{ fill:currentColor; opacity:.16; transform-origin:32px 32px; }
.mtc-ico__trait{ fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.mtc-ico__trait > *{ stroke-dasharray:220; stroke-dashoffset:0; }
.mtc-ico--sombre{ background:rgba(255,92,128,.12); color:#FF5C80; }
.mtc-ico--petit{ width:56px; height:56px; } .mtc-ico--petit svg{ width:32px; height:32px; }
@media not (prefers-reduced-motion:reduce){
	.mtc-ico:not(.mtc-ico--vu) .mtc-ico__trait > *{ stroke-dashoffset:220; }
	.mtc-ico:not(.mtc-ico--vu) .mtc-ico__fond{ opacity:0; transform:scale(.4); }
	.mtc-ico--vu .mtc-ico__trait > *{ animation:mtc-ico-trace 1.1s cubic-bezier(.65,0,.35,1) both; }
	.mtc-ico--vu .mtc-ico__trait > *:nth-child(2){ animation-delay:.25s; }
	.mtc-ico--vu .mtc-ico__trait > *:nth-child(3){ animation-delay:.45s; }
	.mtc-ico--vu .mtc-ico__trait > *:nth-child(n+4){ animation-delay:.6s; }
	.mtc-ico--vu .mtc-ico__fond{ animation:mtc-ico-fond .7s .5s cubic-bezier(.2,.8,.2,1) both; }
	*:hover > .mtc-ico, .mtc-ico:hover{ transform:translateY(-4px); background:rgba(211,14,68,.14); }
	*:hover > .mtc-ico .mtc-ico__fond{ animation:mtc-ico-pouls 1.2s ease-in-out infinite; }
}
@keyframes mtc-ico-trace{ from{ stroke-dashoffset:220; } to{ stroke-dashoffset:0; } }
@keyframes mtc-ico-fond{ from{ opacity:0; transform:scale(.4); } to{ opacity:.16; transform:scale(1); } }
@keyframes mtc-ico-pouls{ 0%,100%{ transform:scale(1); opacity:.16; } 50%{ transform:scale(1.12); opacity:.28; } }