/*
Theme Name: Sanibroyeur Coude
Theme URI: https://sanibroyeur.net
Author: Seobooster LTD
Author URI: https://seoboosterltd.com
Description: Thème code pur de sanibroyeur.net — média indépendant sur le WC broyeur dans les Yvelines. Geste signature : le coude de refoulement.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sanibroyeur-coude
*/

/* ==========================================================================
   0. JETONS — palette et typo mesurées dans DIRECTION-ARTISTIQUE.md (26/09/2026).
      Mode clair UNIQUEMENT : décision explicite du site (aucun bouton, aucune
      variante prefers-color-scheme), cf. DA §9 et grille GD-030.
   ========================================================================== */
:root {
	--porcelaine: #F7F5F1;
	--email: #FFFFFF;
	--lavande: #EFE6F2;
	--lin: #ECE6DD;
	--encre: #221A26;
	--encre-2: #5A5060;
	--prune: #733E98;
	--prune-fonce: #59257E;
	--nuit: #2B1836;
	--lilas: #E6D3F0;
	--joint: #E3DCE6;
	--eau: #7FA7C9;
	--vert: #2E7D4F;
	--ambre: #9A5B00;
	--rouge: #B42A24;

	--police-titre: 'M PLUS Rounded 1c', system-ui, sans-serif;
	--police-corps: 'Afacad', system-ui, sans-serif;

	--rayon-carte: 14px;
	--rayon-bouton: 999px;
	--rayon-formulaire: 22px;
	--epaisseur-tuyau: 10px;

	/* Alias utilisés par les schémas SVG injectés dans le contenu (.sb-schema) :
	   jamais de nouvelle couleur, uniquement des noms de secours vers la palette
	   ci-dessus (corrige les aplats noirs constatés au tour 1, point 12). */
	--accent: var(--prune);
	--fond-lavande: var(--lavande);

	--conteneur: 1280px;
	--colonne-lecture: 720px;
	--sidebar: 320px;
}

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--porcelaine);
	color: var(--encre);
	font-family: var(--police-corps);
	font-size: 18px;
	line-height: 1.65;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }
a { color: var(--prune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--prune-fonce); }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
button { cursor: pointer; }
*:focus-visible { outline: 3px solid var(--prune); outline-offset: 2px; }

h1, h2, h3, h4 {
	font-family: var(--police-titre);
	color: var(--encre);
	line-height: 1.15;
	margin: 0 0 .5em;
}
h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 700; }
@media (min-width: 900px) {
	h1 { font-size: 56px; }
	h2 { font-size: 44px; }
	h3 { font-size: 24px; }
}
p { margin: 0 0 1.1em; max-width: 70ch; }
p.sani_chapo, .sani_chapo { font-size: 21px; font-weight: 500; color: var(--encre-2); line-height: 1.5; }
strong { font-weight: 700; }

.container { max-width: var(--conteneur); margin: 0 auto; padding: 0 24px; }
.bande { padding: 56px 0; }
.bande + .bande { border-top: 1px solid var(--joint); }
@media (min-width: 900px) { .bande { padding: 96px 0; } }
.bande-porcelaine { background: var(--porcelaine); }
.bande-blanc { background: var(--email); }
.bande-lavande { background: var(--lavande); }
.bande-lin { background: var(--lin); }
.bande-nuit { background: var(--nuit); color: var(--lilas); }
.bande-nuit h1, .bande-nuit h2, .bande-nuit h3 { color: var(--email); }
.bande-nuit a:not(.btn) { color: var(--lilas); }
.bande-nuit p { color: var(--lilas); }

.surtitre {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--police-corps); font-weight: 600; font-size: 14px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--prune);
	margin-bottom: 12px;
}
.bande-nuit .surtitre { color: var(--lilas); }
.tete-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; max-width: 760px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   2. LE GESTE SIGNATURE — le coude de refoulement, les manchons.
   ========================================================================== */
.sani_coude_section { width: 48px; height: 30px; margin-bottom: 4px; }

.sani_manchon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--email); border: 6px solid var(--prune);
	color: var(--prune); font-family: var(--police-titre); font-weight: 800; font-size: 20px;
	flex: none;
}
.sani_manchon_mini { width: 22px; height: 22px; border-width: 3px; font-size: 11px; }
.bande-nuit .sani_manchon { background: var(--nuit); border-color: var(--lilas); color: var(--lilas); }

.sani_tuyau {
	position: relative; display: flex; align-items: center; gap: 28px;
	padding: 18px 0; overflow-x: auto;
}
.sani_tuyau::before {
	content: ""; position: absolute; left: 28px; right: 28px; top: 50%;
	height: var(--epaisseur-tuyau); background: var(--joint); border-radius: 999px; transform: translateY(-50%); z-index: 0;
}
.sani_tuyau::before { background: var(--lilas); } /* teinté prune, jamais une barre neutre grise (T1 pt 1) */
.sani_tuyau_etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 96px; text-align: center; }
.sani_tuyau_etape span.sani_tuyau_label { font-size: 14px; font-weight: 600; color: var(--encre-2); max-width: 120px; }

/* barre de progression du formulaire : le tuyau qui se remplit */
.sani_progress { position: relative; height: var(--epaisseur-tuyau); background: var(--joint); border-radius: 999px; margin: 0 0 28px; }
.sani_progress_fil { position: absolute; inset: 0; width: 0; background: var(--prune); border-radius: 999px; transition: width .35s ease; }
.sani_progress_manchons { display: flex; justify-content: space-between; margin-top: -32px; padding: 0 0 20px; pointer-events: none; }
.sani_progress_manchons .sani_manchon { width: 26px; height: 26px; border-width: 3px; font-size: 0; background: var(--porcelaine); }
.sani_progress_manchons .sani_manchon.is-fait { background: var(--prune); border-color: var(--prune); }

.sani_voyant { display: inline-flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--rayon-carte); background: var(--email); border: 2px solid var(--joint); font-size: 16px; }
.sani_voyant_puce { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex: none; }
/* Bug corrigé (26/09) : le sélecteur groupé ".sani_voyant_vert, .sani_voyant_puce_vert"
   appliquait le fond plein vert/ambre/rouge à la CARTE ENTIÈRE (pas qu'à la pastille),
   d'où les "barres pleines" au texte sombre (--encre) illisible dessus — reproduit
   partout où [sani_voyant] est utilisé (accueil "après votre demande", encadrés
   sécurité des articles). Seule la pastille reçoit la couleur pleine. */
.sani_voyant_puce_vert { background: var(--vert); }
.sani_voyant_puce_ambre { background: var(--ambre); }
.sani_voyant_puce_rouge { background: var(--rouge); }
.sani_voyant .sani_voyant_puce { background: currentColor; }
.sani_voyant_vert { color: var(--vert); } .sani_voyant_vert .sani_voyant_puce { background: var(--vert); }
.sani_voyant_ambre { color: var(--ambre); } .sani_voyant_ambre .sani_voyant_puce { background: var(--ambre); }
.sani_voyant_rouge { color: var(--rouge); } .sani_voyant_rouge .sani_voyant_puce { background: var(--rouge); }
.sani_voyant span:last-child { color: var(--encre); }

/* ==========================================================================
   3. BOUTONS ET FORMES
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; padding: 0 28px; border-radius: var(--rayon-bouton);
	font-family: var(--police-corps); font-weight: 600; font-size: 17px;
	border: 2px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	cursor: pointer; text-decoration: none; line-height: 1;
}
.btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .0; }
.btn-primary { background: var(--prune); color: var(--email); }
.btn-primary::before { background: var(--email); opacity: 1; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--prune-fonce); color: var(--email); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--prune); border-color: var(--prune); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--lavande); color: var(--prune-fonce); }
.bande-nuit .btn-secondary { color: var(--lilas); border-color: var(--lilas); }
.btn-petit { height: 48px; padding: 0 20px; font-size: 15px; }
.btn-pleine { width: 100%; }

.carte {
	background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte);
	overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease;
	text-decoration: none; color: inherit;
}
a.carte:hover, a.carte:focus-visible { border-color: var(--prune); }
.carte_media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--lin); }
.carte_media img, .carte_media .sani_photo, .carte_media .sani_photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.carte:hover .carte_media img { transform: scale(1.03); }
.carte_pastille {
	position: absolute; left: 16px; bottom: -14px; background: var(--email); color: var(--prune);
	font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--joint);
}
.carte_corps { padding: 30px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte_corps h3 { margin: 0; }
.carte_extrait { color: var(--encre-2); font-size: 15px; margin: 0; }
.carte_lien { margin-top: auto; font-weight: 600; color: var(--prune); font-size: 15px; }

/* Pastilles-communes de la carte « Intervention Yvelines » (T1 pt 3 : carte vide). */
.sani_pastille_commune { display: inline-flex; background: var(--email); border: 1px solid var(--joint); color: var(--encre-2); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }

.grille-cartes { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .grille-cartes-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grille-cartes-3 { grid-template-columns: repeat(3, 1fr); } .grille-cartes-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .grille-cartes-3x3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50; background: var(--email);
	border-bottom: 1px solid var(--joint); height: 76px; display: flex; align-items: center;
}
.btn-devis-court { display: none; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.site-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.sani_logo_marque { width: 30px; height: 30px; flex: none; }
.site-logo-texte { font-family: var(--police-titre); font-weight: 800; font-size: 20px; color: var(--encre); white-space: nowrap; }
.site-logo-texte .accent { color: var(--prune); }

.nav-menu { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 26px; }
.nav-menu li { margin: 0; }
.nav-menu a { color: var(--encre); font-weight: 600; text-decoration: none; font-size: 16px; }
.nav-menu a:hover { color: var(--prune); }
.header-actions { display: flex; align-items: center; gap: 14px; }
@media (min-width: 1080px) { .nav-menu { display: flex; } }

.burger { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 2px solid var(--joint); border-radius: 12px; }
.burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--encre); position: relative; }
.burger span::before { position: absolute; top: -6px; } .burger span::after { position: absolute; top: 6px; }
@media (min-width: 1080px) { .burger { display: none; } }

#sani-menu-toggle { display: none; }
.nav-menu-mobile {
	/* position: absolute — sort du flux flex du .site-header (cause du débordement
	   48px sitewide à 390px : sans ça, ce <ul> était un item flex en ligne à côté de
	   .container et forçait la largeur totale du header au-delà du viewport). */
	position: absolute; top: 100%; left: 0; right: 0; width: 100%; box-sizing: border-box;
	list-style: none; margin: 0; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 4px;
	background: var(--email); border-bottom: 1px solid var(--joint);
	max-height: 0; overflow: hidden;
	/* Replié : invisible ET hors du parcours clavier/lecteur d'écran (visibility),
	   léger retrait (transform) — pas seulement max-height:0, qui suffit visuellement
	   mais laisse les liens focusables. La transition retarde visibility en fermeture
	   pour ne pas couper l'anim d'ouverture. */
	visibility: hidden; opacity: 0; transform: translateY(-6px);
	transition: max-height .25s ease, opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
}
#sani-menu-toggle:checked ~ .nav-menu-mobile {
	max-height: 480px; visibility: visible; opacity: 1; transform: translateY(0);
	transition: max-height .25s ease, opacity .2s ease, transform .25s ease, visibility 0s linear 0s;
}
.nav-menu-mobile a { display: block; padding: 12px 4px; font-weight: 600; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--joint); font-size: 17px; }
.nav-menu-mobile .btn { margin-top: 10px; }
@media (min-width: 1080px) { .nav-menu-mobile { display: none !important; } }

/* ==========================================================================
   5. HÉROS ACCUEIL
   ========================================================================== */
.hero { padding: 40px 0 0; background: var(--porcelaine); }
/* align-items:start (pas "stretch") en mobile 1 colonne : "stretch" était pensé
   pour le desktop 2 colonnes (ligne suivante) et étirait .hero-visuel à la
   hauteur du bloc texte, faisant déborder la carte-formulaire hors de son
   overflow:hidden (homepage-CONSTAT §1, B-ACC-14/B-ACC-02). */
.hero .container { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 980px) { .hero .container { grid-template-columns: 5fr 7fr; min-height: 640px; align-items: center; } }
.hero-texte { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-visuel { position: relative; border-radius: 28px 0 0 0; overflow: hidden; min-height: 260px; background: var(--lin); }
@media (min-width: 980px) { .hero-visuel { height: 100%; margin-right: calc((100vw - var(--conteneur)) / -2); border-radius: 28px 0 0 28px; } }
.hero-visuel .sani_photo, .hero-visuel img, .hero-visuel .sani_photo_repli { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.hero-carte-form {
	position: relative; margin: -60px 20px 0; background: var(--email); border-radius: var(--rayon-formulaire);
	border: 2px solid var(--joint); padding: 22px; z-index: 2;
}
@media (min-width: 980px) { .hero-carte-form { position: absolute; right: 32px; bottom: 32px; width: min(400px, 90%); margin: 0; } }
/* Mobile (<980px) : la carte-formulaire est un second enfant DANS .hero-visuel
   (avec la photo), qui garde overflow:hidden pour arrondir la photo — c'est ce
   qui rognait la carte à 90% (elle est ~586px, la photo n'en fait que 220).
   On passe .hero-visuel en colonne flex non masquante (bandeau photo court en
   haut, hauteur fixe 220px avec son propre arrondi+overflow), et la carte
   retrouve un flux normal, entièrement visible, sous la photo. Cette règle doit
   rester APRÈS la déclaration de base ci-dessus (même spécificité, l'ordre de
   source tranche). */
@media (max-width: 979px) {
	.hero-visuel { display: flex; flex-direction: column; overflow: visible; min-height: 0; border-radius: 0; margin: 0; }
	.hero-visuel .sani_photo, .hero-visuel img, .hero-visuel .sani_photo_repli {
		height: 220px; min-height: 0; flex: none; border-radius: 20px; overflow: hidden;
	}
	.hero-carte-form { position: static; margin: -32px 8px 0; }
}

/* ==========================================================================
   6. LA COUPE ÉCLATÉE
   ========================================================================== */
/* Schéma en coupe — hauteur plafonnée (520px max), centré (T1 pt 2 : 1000px constatés). */
/* T4 pt 19 (B-TEC-53) : grille de la carte des pannes, sortie du style inline
   (front-page.php) ; la 2ᵉ colonne (desktop) apparaît à partir de 900px, comme
   l'ancien <style> posé en ligne juste après cette section. */
.carte-pannes-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .carte-pannes-grid { grid-template-columns: 7fr 5fr; } }
/* Grille de rubrique dans "Nos guides de fond" — largeur de carte fixe plutôt
   qu'un nombre de colonnes fixe (T4 pt 19, ex-style inline front-page.php). */
.grille-cartes-guides { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Bande finale de l'accueil — sortie du style inline (T4 pt 19). */
.bande-finale-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
/* Bandeau "coupe éclatée" au milieu d'une rubrique — sorti du style inline
   (T4 pt 19, category.php). */
.categorie-coupe-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }

.sani_coupe { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.sani_coupe_point { transition: fill .2s ease; }
.sani_coupe a:hover .sani_coupe_point, .sani_coupe a:focus-visible .sani_coupe_point { fill: var(--prune); }
.sani_coupe a:hover .sani_coupe_chiffre, .sani_coupe a:focus-visible .sani_coupe_chiffre { fill: var(--email); }
.sani_coupe_chiffre { font-family: var(--police-titre); font-weight: 800; font-size: 13px; fill: var(--prune); pointer-events: none; }
/* Légende en 2 colonnes, à côté du schéma — plus d'icône identique répétée 8 fois :
   seul le numéro (manchon) distingue chaque repère (T1 pt 2). */
.liste-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px 20px; align-content: start; }
@media (min-width: 480px) { .liste-pieces { grid-template-columns: 1fr 1fr; } }
.liste-pieces li { display: flex; align-items: center; gap: 12px; }
.liste-pieces li a, .liste-pieces li > span:last-child { font-weight: 600; }

/* Méthode en 4 étapes — cartes larges sur toute la largeur, reliées par le
   coude (T1 pt 5 : minuscule, perdu au centre d'une bande vide). */
.sani_methode { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .sani_methode { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .sani_methode { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.sani_methode_carte { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 20px; }
@media (min-width: 1180px) { .sani_methode_carte { border-radius: 0; border-right: none; } .sani_methode_carte:first-child { border-radius: var(--rayon-carte) 0 0 var(--rayon-carte); } .sani_methode_carte:last-child { border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0; border-right: 2px solid var(--joint); } }
.sani_methode_media { position: relative; aspect-ratio: 4/3; border-radius: var(--rayon-carte); overflow: hidden; background: var(--lin); }
.sani_methode_media img, .sani_methode_media .sani_photo, .sani_methode_media .sani_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.sani_methode_media .sani_manchon { position: absolute; left: 12px; bottom: -18px; box-shadow: 0 2px 6px rgba(34,26,38,.18); }
.sani_methode_texte { padding-top: 6px; }
.sani_methode_texte h3 { margin-bottom: 4px; }
.sani_methode_texte p { margin: 0; font-size: 14px; color: var(--encre-2); }
.sani_methode_coude { display: none; }
@media (min-width: 1180px) {
	.sani_methode_coude { display: block; position: absolute; right: -19px; top: 50%; transform: translateY(-50%) rotate(-90deg); width: 38px; height: 24px; z-index: 2; }
	.sani_methode_coude svg { width: 100%; height: 100%; }
}

/* ==========================================================================
   7. CARTE DES COMMUNES
   ========================================================================== */
.sani_zone { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .sani_zone { grid-template-columns: 3fr 2fr; } }
.sani_zone_carte svg, svg.sani_carte { width: 100%; max-height: 480px; height: auto; display: block; }
.sani_commune_forme { fill: var(--lavande); stroke: var(--email); stroke-width: 2; transition: fill .2s ease; cursor: pointer; }
.sani_commune_forme:hover { fill: var(--prune); }
.sani_commune_active { fill: var(--prune); }
/* T4 pt 13 (I-PL-12) : tracé invisible superposé, trait très épais, pour agrandir
   la zone tactile réelle (6/9 communes < 44x44px sur leur seul tracé visible,
   Viroflay descend à 22px de large) — jamais rendu visuellement (fill/stroke
   transparents), seul le survol/focus de l'ancre parente reste stylé. */
.sani_commune_touche { fill: transparent; stroke: transparent; stroke-width: 20px; pointer-events: stroke; cursor: pointer; }
a:hover .sani_commune_forme, a:focus-visible .sani_commune_forme { fill: var(--prune); }
/* Étiquette de nom posée sur chaque commune (T1 pt 6 : « aucune étiquette sur la carte »). */
.sani_commune_label {
	font-family: var(--police-corps); font-weight: 700; font-size: 12px; fill: var(--encre);
	text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--email); stroke-width: 3px;
}
a:hover .sani_commune_label, a:focus-visible .sani_commune_label,
.sani_commune_label.sani_commune_active { fill: var(--email); stroke: var(--prune); }
.sani_zone_liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; max-height: 420px; overflow-y: auto; }
/* T4 pt 13 (I-PL-12) : liste des communes = boutons ≥44px (secours tactile de la
   carte, toujours affichée SOUS elle en mobile, cf. .sani_zone en grille 1 colonne). */
.sani_zone_item a, .sani_zone_item span { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 6px; text-decoration: none; color: var(--encre); font-weight: 600; border-bottom: 1px solid var(--joint); }
.sani_zone_item_actif a, .sani_zone_item_actif span { color: var(--prune); }
.bande-nuit .sani_zone_item a, .bande-nuit .sani_zone_item span { color: var(--lilas); border-color: rgba(255,255,255,.15); }

/* ==========================================================================
   8. BANDE SOMBRE — "les coupables" + chiffres
   ========================================================================== */
.sani_coupables { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-bottom: 48px; }
.sani_coupable { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; text-align: center; }
.sani_coupable_photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 4px solid var(--lilas); background: var(--email); }
.sani_coupable_photo img, .sani_coupable_photo .sani_photo, .sani_coupable_photo .sani_photo_repli { width: 100%; height: 100%; object-fit: cover; }
.sani_coupable span.sani_coupable_label { font-size: 14px; color: var(--lilas); font-weight: 600; }

.sani_chiffres { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .sani_chiffres { grid-template-columns: repeat(3, 1fr); } }
.sani_chiffre_tuile { text-align: center; padding: 24px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--rayon-carte); }
.sani_chiffre_valeur { font-family: var(--police-titre); font-weight: 800; font-size: 56px; color: var(--lilas); display: block; }
.sani_chiffre_label { font-size: 15px; color: var(--email); }
.sani_chiffre_source { font-size: 12px; color: var(--lilas); opacity: .75; display: block; margin-top: 6px; }

/* ==========================================================================
   9. FAQ, VOYANTS, ARBRE — accordéons et infographies propres au site
   ========================================================================== */
.sani_faq { display: flex; flex-direction: column; gap: 10px; }
.sani_faq_item { background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 4px 20px; }
.sani_faq_item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; font-weight: 700; font-family: var(--police-titre); }
.sani_faq_item summary::-webkit-details-marker { display: none; }
.sani_faq_plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--prune); position: relative; flex: none; }
.sani_faq_plus::before, .sani_faq_plus::after { content: ""; position: absolute; background: var(--prune); top: 50%; left: 50%; }
.sani_faq_plus::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.sani_faq_plus::after { width: 2px; height: 14px; transform: translate(-50%,-50%); transition: opacity .15s ease; }
.sani_faq_item[open] .sani_faq_plus::after { opacity: 0; }
.sani_faq_item p { color: var(--encre-2); padding-bottom: 18px; margin: 0; }

.sani_arbre { display: flex; flex-direction: column; gap: 14px; margin: 0 0 1.4em; }
.sani_branche { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 16px 18px; }
.sani_branche_symptome { grid-column: 1 / -1; font-family: var(--police-titre); }
.sani_branche_cause, .sani_branche_verif { display: block; color: var(--encre-2); font-size: 15px; grid-column: 1 / -1; }
.sani_branche .sani_voyant_puce { width: 12px; height: 12px; border-radius: 50%; align-self: center; grid-row: 1; }

.sani_refoulement { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 0 0 1.4em; background: var(--lin); border-radius: var(--rayon-carte); padding: 20px; }
.sani_refoulement svg { width: 100%; max-width: 420px; height: auto; }
.sani_refoulement_texte { font-family: var(--police-corps); font-weight: 600; font-size: 14px; fill: var(--encre); }
.sani_refoulement_legende { color: var(--encre-2); font-size: 15px; margin: 0; }

.sani_independance { font-size: 14px; color: var(--encre-2); }
.bande-nuit .sani_independance { color: var(--lilas); }

/* ==========================================================================
   10. AUTEUR
   ========================================================================== */
.sani_auteur { display: flex; gap: 18px; align-items: flex-start; background: var(--lavande); border-radius: var(--rayon-carte); padding: 24px; }
.sani_auteur_photo, .sani_auteur_photo img, .sani_avatar_img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.sani_auteur_texte { display: flex; flex-direction: column; gap: 4px; }
.sani_auteur_nom { font-family: var(--police-titre); font-weight: 800; font-size: 18px; text-decoration: none; color: var(--encre); }
.sani_auteur_ecusson { display: inline-flex; width: fit-content; font-size: 12px; font-weight: 600; color: var(--prune); background: var(--email); border: 1px solid var(--joint); border-radius: 999px; padding: 3px 12px; }
.sani_auteur_bio { margin: 6px 0 0; color: var(--encre-2); font-size: 15px; }

/* ==========================================================================
   11. FORMULAIRE MULTI-ÉTAPES
   ========================================================================== */
html.js .sani_form_noscript { display: none; }
html:not(.js) .sani_form_js { display: none; }
noscript .sani_form_js { display: none; }

.sani_form { display: flex; flex-direction: column; gap: 18px; }
.sani_form_titre { font-family: var(--police-titre); font-weight: 800; font-size: 20px; margin: 0; }
.sani_etape { border: 0; margin: 0; padding: 0; display: none; flex-direction: column; gap: 14px; }
.sani_etape.is-active { display: flex; }
.sani_etape legend { font-weight: 700; font-family: var(--police-titre); padding: 0 0 4px; font-size: 17px; }

.sani_tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sani_tuile { position: relative; }
.sani_tuile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sani_tuile label {
	display: flex; align-items: center; gap: 10px; min-height: 88px; padding: 14px;
	border: 2px solid var(--joint); border-radius: var(--rayon-carte); background: var(--email);
	cursor: pointer; font-weight: 600; font-size: 15px; transition: border-color .15s ease, background .15s ease;
}
.sani_tuile input:checked + label { border-color: var(--prune); background: var(--lavande); }
.sani_tuile input:focus-visible + label { outline: 3px solid var(--prune); outline-offset: 2px; }
.sani_tuile_coche { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--joint); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.sani_tuile input:checked + label .sani_tuile_coche { border-color: var(--prune); background: var(--prune); }
.sani_tuile input:checked + label .sani_tuile_coche::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--email); border-bottom: 2px solid var(--email); transform: rotate(-45deg) translateY(-1px); }
.sani_tuile_pico { width: 22px; height: 22px; flex: none; }

.sani_champ { display: flex; flex-direction: column; gap: 6px; }
.sani_champ label { font-weight: 600; font-size: 15px; }
.sani_champ input[type="email"], .sani_champ input[type="text"], .sani_champ input[type="tel"], .sani_champ textarea, .sani_champ select {
	border: 2px solid var(--joint); border-radius: 14px; padding: 14px 16px; background: var(--email); color: var(--encre); width: 100%;
}
.sani_champ input:focus, .sani_champ textarea:focus, .sani_champ select:focus { border-color: var(--prune); outline: none; }
.sani_champ_rgpd { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--encre-2); }
.sani_champ_rgpd input { margin-top: 4px; }
.sani_champ_rgpd a { color: var(--prune); }

.sani_form_actions { display: flex; justify-content: space-between; gap: 12px; }
.sani_form_erreur {
	position: fixed; inset: 0; background: rgba(34,26,38,.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.sani_form_erreur.is-visible { display: flex; }
.sani_form_erreur_boite { background: var(--email); border-radius: var(--rayon-carte); padding: 28px; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.sani_form_erreur_boite strong { color: var(--rouge); font-family: var(--police-titre); }

.sani_form_honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sani_form_confirmation { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px 0; }

/* le sélecteur "grand format" (modale centrée) pour les listes longues type marque */
.sani_modale { position: fixed; inset: 0; background: rgba(34,26,38,.5); display: none; align-items: center; justify-content: center; z-index: 210; padding: 20px; }
.sani_modale.is-visible { display: flex; }
.sani_modale_boite { background: var(--email); border-radius: var(--rayon-carte); padding: 24px; max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto; }

/* ==========================================================================
   12. ARTICLE
   ========================================================================== */
.article-tete { padding-top: 32px; }
.fil-ariane { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: 14px; color: var(--encre-2); }
.fil-ariane a { color: var(--encre-2); }
.fil-ariane li:not(:last-child)::after { content: "›"; margin-left: 6px; }

.article-corps-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1100px) { .article-corps-wrap { grid-template-columns: var(--colonne-lecture) var(--sidebar); justify-content: center; } }
.article-colonne { max-width: var(--colonne-lecture); }
/* Déplacée DANS .article-colonne (single.php) : largeur bornée à --colonne-lecture
   (720px) au lieu du conteneur entier (I-ART-08). Hauteur réduite sous le plafond
   du lot (≤360/≤220) pour que titre+chapô+DÉBUT DU TEXTE restent visibles sans
   défiler à 1440×900 ET 390×844 (B-ART-09) : au plafond exact, l'empilement
   fil d'Ariane+surtitre+H1+chapô+badge auteur dépassait déjà la ligne de
   flottaison à lui seul. */
.article-image-une { border-radius: var(--rayon-carte); overflow: hidden; max-height: 160px; margin: 16px 0 24px; }
.article-image-une img, .article-image-une .sani_photo, .article-image-une .sani_photo_repli { width: 100%; height: 160px; object-fit: cover; }
@media (min-width: 900px) { .article-image-une, .article-image-une img, .article-image-une .sani_photo, .article-image-une .sani_photo_repli { max-height: 240px; height: 240px; } }

/* Barre de progression de lecture — collée sous le header, jamais un chiffre figé */
.sani_lecture_barre { position: sticky; top: 76px; z-index: 40; height: 4px; background: var(--joint); }
.sani_lecture_barre_fil { height: 100%; width: 0; background: var(--prune); transition: width .1s linear; }
.article-corps { font-size: 18px; }
.article-corps h2 { margin-top: 1.6em; scroll-margin-top: 96px; }
.article-corps h2 .sani_coude_section { display: block; margin-bottom: 8px; }
.article-corps img { border-radius: var(--rayon-carte); margin: 1.2em 0; }
.article-corps a { text-decoration-thickness: 2px; }

/* Photo réelle insérée par le gabarit après le 2ᵉ H2 (B-ART-06, functions.php
   sani_inserer_photo_corps). Marge propre des deux côtés : jamais collée à un
   autre bloc. Légende de crédit discrète, réutilisée par sani_photo(). */
.article-photo-corps { margin: 1.8em 0; }
.article-photo-corps img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: var(--rayon-carte); margin: 0; }
@media (min-width: 900px) { .article-photo-corps img { height: 340px; } }
.sani_credit { display: block; margin-top: 8px; font-size: 13px; color: var(--encre-2); }

.sani_sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.sani_sommaire { border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 20px; background: var(--email); }
.sani_sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--joint); display: flex; flex-direction: column; gap: 4px; }
.sani_sommaire li { position: relative; padding: 6px 0 6px 22px; }
.sani_sommaire li::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--email); border: 3px solid var(--joint); }
.sani_sommaire li.is-actif::before { border-color: var(--prune); background: var(--prune); }
.sani_sommaire a { text-decoration: none; color: var(--encre); font-size: 15px; }
.sani_sommaire li.is-actif a { color: var(--prune); font-weight: 700; }
.sani_lecture_temps { font-size: 13px; color: var(--encre-2); margin-top: 10px; display: block; }

.sani_bloc_source { background: var(--lin); border-radius: var(--rayon-carte); padding: 22px; margin: 2em 0; }
.sani_bloc_source h3 { margin-bottom: .5em; font-size: 17px; }
.sani_bloc_source ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--encre-2); }

/* Bloc « Sources » posé par la chaîne de rédaction (div/aside.sb-sources, contenu
   en <p> ou <ul><li>) — rendu compact, jamais une liste brute (T1 pt 16, CM-0517). */
.sb-sources {
	background: var(--lin); border-radius: var(--rayon-carte); padding: 22px 26px; margin: 2.4em 0 1.6em;
}
.sb-sources h2 {
	font-family: var(--police-corps); font-size: 13px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--encre-2); margin: 0 0 12px; scroll-margin-top: 96px;
}
.sb-sources p, .sb-sources li { font-size: 13px; line-height: 1.6; color: var(--encre-2); margin: 0 0 8px; }
.sb-sources p:last-child { margin-bottom: 0; }
.sb-sources ul { list-style: none; margin: 0; padding: 0; }
.sb-sources li { position: relative; padding-left: 16px; margin-bottom: 8px; }
.sb-sources li:last-child { margin-bottom: 0; }
.sb-sources li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--prune); }

.sani_encadre_cta, aside.sb-appel { background: var(--lavande); border: 2px solid var(--prune); border-radius: var(--rayon-carte); padding: 24px; margin: 2em 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sani_encadre_cta p, aside.sb-appel p { margin: 0; }

/* Colonne sidebar : formulaire court d'abord, sommaire ensuite, jamais de scroll interne */
.sani_sidebar_form { background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 20px; }
.sani_sidebar_form .sani_form_titre { font-size: 17px; }

/* Tableaux du corps (socle .sbs_tableau) — habillés par le thème (P-004/AR-008) */
.sbs_tableau { overflow-x: auto; border-radius: var(--rayon-carte); border: 2px solid var(--joint); margin: 1.4em 0; }
.sbs_tableau table { border-collapse: collapse; width: 100%; min-width: 480px; }
.sbs_tableau th, .sbs_tableau td { padding: 12px 16px; border-bottom: 1px solid var(--joint); text-align: left; font-size: 15px; }
.sbs_tableau th { background: var(--lavande); font-family: var(--police-titre); white-space: nowrap; }

/* Infographies du socle */
.sbs_lieu, .sbs_tarifs, .sbs_frise, .sbs_jauges { display: block; background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte); padding: 22px; margin: 1.4em 0; }
.sbs_lieu_nom, .sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre { display: block; font-family: var(--police-titre); font-size: 17px; margin-bottom: 12px; }
.sbs_lieu_adresse, .sbs_lieu_acces { display: block; font-size: 14px; color: var(--encre-2); margin-bottom: 4px; }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; }
.sbs_icone_repere path { fill: var(--prune); }
.sbs_tarif { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sbs_tarif_libelle { font-weight: 600; }
.sbs_tarif_barre { width: 100%; height: 14px; }
.sbs_tarifs_notes, .sbs_frise .sbs_source, .sbs_source { display: block; font-size: 12px; color: var(--encre-2); margin-top: 10px; }
.sbs_frise { display: flex; flex-direction: column; gap: 16px; }
.sbs_etape { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.sbs_etape_date { font-weight: 700; color: var(--prune); }
/* [sbs_jauges] du socle : anneau (manchon) autour de chaque valeur, reliés par
   le coude horizontal — même geste que .sani_tuyau (T1 point 13, 9 pages ville). */
.sbs_jauges { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 36px; position: relative; padding-top: 8px; }
.sbs_jauges::before { content: ""; position: absolute; left: 56px; right: 56px; top: 50px; height: var(--epaisseur-tuyau); background: var(--joint); border-radius: 999px; z-index: 0; }
.sbs_jauge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 108px; text-align: center; }
.sbs_jauge_valeur {
	display: inline-flex; align-items: baseline; justify-content: center; gap: 2px;
	width: 88px; height: 88px; border-radius: 50%; background: var(--email); border: 6px solid var(--prune);
	font-family: var(--police-titre); font-weight: 800; font-size: 24px; color: var(--prune); line-height: 1;
}
.sbs_jauge_unite { font-size: 12px; font-weight: 600; color: var(--encre-2); }
.sbs_jauge_libelle { display: block; font-size: 14px; color: var(--encre-2); max-width: 130px; }

/* Schémas SVG du contenu (figure.sb-schema) — T1 point 12 : fond doux, largeur
   maîtrisée, figcaption lisible. */
.sb-schema {
	max-width: 760px; margin: 2em auto; padding: 20px; background: var(--lin);
	border-radius: var(--rayon-carte); text-align: center;
}
.sb-schema svg { width: 100%; height: auto; display: block; margin: 0 auto; }
.sb-schema figcaption { margin-top: 14px; font-size: 13px; color: var(--encre-2); text-align: left; }

/* Accordéon FAQ posé par la chaîne de rédaction (details/summary.sb-faq) — même
   geste que .sani_faq_item (T1 point 14). */
details.sb-faq {
	background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-carte);
	padding: 4px 20px; margin: 0 0 10px;
}
details.sb-faq summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 0; cursor: pointer; font-weight: 700; font-family: var(--police-titre); color: var(--encre);
}
details.sb-faq summary::-webkit-details-marker { display: none; }
details.sb-faq summary::after {
	content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--prune);
	color: var(--prune); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
}
details.sb-faq[open] summary::after { content: "–"; }
details.sb-faq p { color: var(--encre-2); padding-bottom: 18px; margin: 0; }

/* ==========================================================================
   13. PIED DE PAGE
   ========================================================================== */
.site-footer { background: var(--nuit); color: var(--lilas); padding: 64px 0 28px; }
.footer-grille { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 780px) { .footer-grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-bloc h4 { color: var(--email); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.footer-bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-bloc a { color: var(--lilas); text-decoration: none; font-size: 15px; }
.footer-bloc a:hover { color: var(--email); }
.footer-marque { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-marque .sani_logo_marque path { stroke: var(--lilas); }
.footer-marque .sani_logo_marque circle { stroke: var(--lilas); }
.footer-marque-texte { font-family: var(--police-titre); font-weight: 800; font-size: 20px; color: var(--email); }
.footer-bas { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 13px; color: var(--lilas); }
/* T1 pt 10 : ces liens héritaient de la couleur globale `a { color: var(--prune) }`,
   quasi invisible sur le fond --nuit (violet sur violet foncé). */
.footer-bas a { color: var(--lilas); text-decoration: underline; text-underline-offset: 3px; }
.footer-bas a:hover, .footer-bas a:focus-visible { color: var(--email); }

/* ==========================================================================
   14. CATÉGORIE / RUBRIQUE
   ========================================================================== */
.categorie-tete { background: var(--lavande); padding: 48px 0; }
.categorie-tete .container { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px) { .categorie-tete .container { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.categorie-manchons { display: flex; gap: 20px; margin-top: 14px; }
.categorie-manchon-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.categorie-manchon-item span.label { font-size: 13px; color: var(--encre-2); }
/* T4 pt 16 (B-CAT-10) : la carte vers le hub commercial se distingue visuellement
   des cartes éditoriales "Autres guides" (fond lavande + bordure prune), jamais
   la même carte blanche neutre — deux blocs, deux habillages. */
.carte-hub { display: flex; flex-direction: row; gap: 20px; align-items: center; max-width: 560px; padding: 16px; background: var(--lavande); border-color: var(--prune); }
.carte-hub .carte_media { width: 96px; height: 96px; flex: none; border-radius: var(--rayon-carte); overflow: hidden; }
.carte-hub .carte_corps { padding: 0; }
.carte-hub .carte_extrait { margin: 4px 0 0; font-size: 14px; color: var(--encre-2); }

/* ==========================================================================
   15. PAGE VILLE
   ========================================================================== */
.ville-hero { padding: 32px 0 0; }
.ville-hero .container { display: grid; grid-template-columns: 1fr; gap: 28px; }
/* T4 pt 11 (B-PL-04) : formulaire DANS la grille du héros, jamais un bloc séparé
   qui s'empile après. Mobile (1 colonne) : H1 + chapô + formulaire d'abord, la
   photo après (order) ; desktop : photo à gauche, texte + formulaire à droite,
   ordre naturel du DOM (order remis à 0). */
.ville-photo { order: 2; border-radius: var(--rayon-carte); overflow: hidden; }
.ville-photo img, .ville-photo .sani_photo, .ville-photo .sani_photo_repli { width: 100%; height: 260px; object-fit: cover; }
.ville-texte { order: 1; display: flex; flex-direction: column; gap: 14px; }
.ville-form-carte { max-width: 560px; background: var(--email); border: 2px solid var(--joint); border-radius: var(--rayon-formulaire); padding: 24px; }
/* T4 pt 10 (B-PL-17) : crédit photo rendu hors du héros, discret, en pied de la
   photo de commune (jamais dans le héros). */
.ville-credit-pied { margin: 10px auto 0; padding: 0 24px; max-width: var(--conteneur); }
@media (min-width: 980px) {
	.ville-hero .container { grid-template-columns: 5fr 7fr; align-items: start; }
	.ville-photo, .ville-texte { order: 0; }
}
.ville-alterne { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; margin: 32px 0; }
@media (min-width: 900px) { .ville-alterne { grid-template-columns: 1fr 1fr; } }
.ville-alterne.inverse .ville-alterne-texte { order: 2; }

/* ==========================================================================
   16. PAGE CONTACT
   ========================================================================== */
/* T4 pt 15 (I-CTC-01) : sur mobile, le formulaire passe AVANT le bloc de
   réassurance (order) — sans ça, le bouton "Continuer" de l'étape 1 était à
   ~755px sous la ligne de flottaison. Desktop : ordre naturel (gauche/droite). */
.contact-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .contact-split { grid-template-columns: 5fr 7fr; min-height: calc(100vh - 76px); } }
.contact-gauche { order: 2; background: var(--nuit); color: var(--lilas); padding: 56px 40px; display: flex; flex-direction: column; gap: 26px; justify-content: center; }
.contact-gauche h1, .contact-gauche h2 { color: var(--email); }
.contact-droite { order: 1; padding: 56px 40px; display: flex; align-items: center; }
@media (min-width: 980px) { .contact-gauche, .contact-droite { order: 0; } }
.contact-droite .sani_form_wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.contact-voyants { display: flex; flex-direction: column; gap: 14px; }
.contact-voyants .sani_voyant { width: 100%; } /* cartes pleine largeur, pas des puces (T1 pt 9) */
/* Sur fond --nuit (bande finale accueil / colonne gauche contact) : carte sombre
   (pas la carte claire par défaut) + texte clair, pastille-voyant seule colorée
   (DA : "3 cartes sombres avec pastille-voyant colorée et texte clair"). */
.contact-voyants .sani_voyant { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.contact-voyants .sani_voyant span:last-child { color: var(--lilas); }

/* ==========================================================================
   17. PAGES ANNEXES (page.php)
   ========================================================================== */
.page-annexe { padding: 56px 0 80px; }
.page-annexe .container { max-width: 780px; }
.page-annexe .container > *:first-child { margin-top: 0; }
.page-annexe h2 { margin-top: 1.6em; }
.page-annexe ul, .page-annexe ol { padding-left: 1.4em; }

/* ==========================================================================
   18. 404
   ========================================================================== */
.page-404 { padding: 80px 0; text-align: center; }
.page-404 svg { width: 220px; height: auto; margin: 0 auto 24px; }
.page-404 .container { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 640px; }
.recherche-404 { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.recherche-404 input { flex: 1; border: 2px solid var(--joint); border-radius: 999px; padding: 0 20px; height: 52px; }
.recherche-404 button { border-radius: 999px; }
.recherche-index { margin: 20px 0 32px; max-width: 480px; }

/* ==========================================================================
   19. QUI SOMMES-NOUS
   ========================================================================== */
.propos-tete { padding: 48px 0; }
.propos-tete .container { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px) { .propos-tete .container { grid-template-columns: 5fr 7fr; align-items: center; } }
.propos-photo { border-radius: var(--rayon-carte); overflow: hidden; }
.propos-photo img, .propos-photo .sani_photo, .propos-photo .sani_photo_repli { width: 100%; height: 320px; object-fit: cover; }
.equipe-grille { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .equipe-grille { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   20. MOBILE — 0 débordement à 390px, libellés courts sur une ligne
   ========================================================================== */
@media (max-width: 899px) {
	.container { padding: 0 18px; }
	.sani_tuiles { grid-template-columns: 1fr 1fr; }
	.sani_zone_liste { grid-template-columns: 1fr; max-height: none; overflow: visible; }
	/* .hero-visuel / .hero-carte-form : réglés en section 5 (@media max-width:979px),
	   ne pas redéclarer ici (ce bloc est plus tardif dans la cascade et écraserait
	   le correctif du 26/09 sur la carte-formulaire coupée). */
	.sani_sidebar { position: static; }
	.contact-gauche, .contact-droite { padding: 40px 20px; }
	.categorie-manchons { flex-wrap: wrap; }
}
@media (max-width: 480px) {
	body { font-size: 16px; }
	.btn { padding: 0 20px; font-size: 16px; }
	.sani_tuile label { font-size: 14px; }

	/* Header à 390px (B-HDR / constat rubrique) : le bouton "Demander un devis"
	   en toutes lettres + le burger ne tenaient plus dans les 354px utiles du
	   conteneur — le burger se retrouvait poussé quasi hors écran. Bouton
	   compact "Devis", logo resserré, burger 44x44 intact et toujours visible. */
	.site-logo-texte { font-size: 17px; }
	.sani_logo_marque { width: 26px; height: 26px; }
	.header-actions { gap: 8px; }
	.btn-devis { height: 40px; padding: 0 14px; font-size: 14px; gap: 0; }
	.btn-devis-long { display: none; }
	.btn-devis-court { display: inline; }
}

/* Réduction de mouvement : aucune animation essentielle n'en dépend */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}