/*
Theme Name: Hérault Travaux
Theme URI: https://abss34.fr
Author: Seobooster LTD
Description: Devis de travaux dans l'Hérault — devis d'artisans, de Béziers à Montpellier.
Version: 1.0.0
Text Domain: herault-travaux
*/

/* ==========================================================================
   0. POLICES — self-hosted, variables (P-086)
   ========================================================================== */
@font-face {
	font-family: 'Red Hat Display Variable';
	src: url('assets/fonts/red-hat-display-var.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Albert Sans Variable';
	src: url('assets/fonts/albert-sans-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. RESET SOBRE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azur); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   2. JETONS DE COULEUR — thème clair uniquement (CM-0575, 18/09 : prime sur P-351)
   ========================================================================== */
:root {
	--chaux: #FFFFFF;
	--ecume: #E7F1F6;
	--encre: #15222B;
	--texte-douce: #4A5C66;
	--azur: #0A6FA8;
	--sur-azur: #FFFFFF;
	--terre: #C2521F;
	--sur-terre: #FFFFFF;
	--nuit: #132A36;
	--succes: #1E7A46;
	--erreur: #B3261E;
	--ombre: 0 6px 20px rgba(19, 42, 54, .10);
	--rayon: 14px;
	--rayon-pilule: 999px;
	--conteneur: 1240px;

	/* fixes : ne s'inversent JAMAIS — pour tout texte posé sur une surface qui ne
	   change pas de nature avec le mode (bande Nuit, voile photo, badge terre cuite) */
	--sur-nuit: #EAF1F5;
	--sur-photo: #FFFFFF;
	color-scheme: light; /* CM-0575 : thème clair uniquement, le navigateur ne doit rien assombrir de lui-même */
}

body {
	background: var(--chaux);
	color: var(--encre);
	font-family: 'Albert Sans Variable', system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.65;
	transition: background .2s ease, color .2s ease;
}
h1, h2, h3, .ht_titraille {
	font-family: 'Red Hat Display Variable', system-ui, sans-serif;
	color: var(--encre);
	text-wrap: balance;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 900; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.15; }
h3 { font-size: clamp(1.2rem, 2vw, 1.375rem); font-weight: 800; }
p.ht_chapo { font-size: 1.15rem; color: var(--texte-douce); }
small, .ht_petit { font-size: .875rem; }
.ht_majuscule { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: .875rem; }

.ht_conteneur { max-width: var(--conteneur); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .ht_conteneur { padding-inline: 16px; } }

.ht_bande { padding-block: 72px; }
.ht_bande--chaux { background: var(--chaux); }
.ht_bande--ecume { background: var(--ecume); }
.ht_bande--nuit  { background: var(--nuit); color: var(--sur-nuit); }
.ht_bande--nuit h2, .ht_bande--nuit h3, .ht_bande--nuit p { color: var(--sur-nuit); }
.ht_bande--nuit .ht_texte-doux { color: #B9CBD3; }
@media (max-width: 640px) { .ht_bande { padding-block: 48px; } }

.ht_entete_bande { max-width: 720px; margin-bottom: 40px; }
.ht_entete_bande h2 { margin-bottom: 12px; }

/* frise de tuiles : faîtage entre deux bandes (procédé 3) — un seul SVG, teinté par masque */
.ht_frise {
	display: block; width: 100%; height: 28px;
	-webkit-mask-image: url('assets/svg/frise-tuiles.svg'); mask-image: url('assets/svg/frise-tuiles.svg');
	-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
	-webkit-mask-size: 56px 28px; mask-size: 56px 28px;
}
.ht_frise--terre { background-color: var(--terre); }
.ht_frise--azur { background-color: var(--azur); opacity: .45; }

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */
.ht_bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 2px solid transparent; border-radius: var(--rayon-pilule);
	padding: 14px 26px; font-weight: 700; font-size: 1rem; line-height: 1;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ht_bouton--azur { background: var(--azur); color: var(--sur-azur); }
.ht_bouton--azur:hover { transform: translateY(-1px); }
/* Pas de variante terre cuite (verdict 18/09 N2) : l'azur est le seul accent d'action, la terre cuite reste la matière. */
.ht_bouton--fantome { background: transparent; border-color: currentColor; color: inherit; }
.ht_bouton--contour-clair { background: transparent; border-color: var(--sur-nuit); color: var(--sur-nuit); }
.ht_bouton--pleine { width: 100%; }

/* ==========================================================================
   4. EN-TÊTE + MENU (P-004 : flex, sans puces)
   ========================================================================== */
.ht_bandeau_util { background: var(--nuit); color: var(--sur-nuit); font-size: .8125rem; padding-block: 8px; }
.ht_bandeau_util .ht_conteneur { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ht_bandeau_util a { text-decoration: underline; }
@media (max-width: 640px) {
	/* Une seule ligne de 32 px (n°21) : le lien Actualité est déjà dans le menu, pas besoin ici */
	.ht_bandeau_util { padding-block: 6px; }
	.ht_bandeau_util .ht_conteneur { flex-wrap: nowrap; }
	.ht_bandeau_util span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
	.ht_bandeau_util a { display: none; }
}

.ht_entete { position: sticky; top: 0; z-index: 40; background: var(--chaux); box-shadow: var(--ombre); }
.ht_entete_barre { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.ht_logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ht_logo svg { height: 36px; width: auto; }
.ht_logo_toit_azur { fill: var(--azur); }
.ht_logo_toit_terre, .ht_logo_toit_terre_dot { fill: var(--terre); }
.ht_logo_texte { fill: var(--encre); }
.ht_logo--pied .ht_logo_texte { fill: var(--sur-nuit); }
.ht_logo--pied .ht_logo_toit_terre_dot { fill: var(--terre); }

.ht_nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.ht_nav > .ht_nav_item { position: relative; }
.ht_nav_lien { background: none; border: 0; color: inherit; font-size: 1rem; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--rayon); font-weight: 700; }
.ht_nav_lien:hover, .ht_nav_lien[aria-expanded="true"] { background: var(--ecume); }
.ht_mega { position: absolute; top: 100%; left: 0; background: var(--chaux); box-shadow: var(--ombre); border-radius: var(--rayon); padding: 20px; display: none; min-width: 560px; z-index: 50; }
.ht_nav_item:hover .ht_mega, .ht_mega.is-open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ht_mega a { display: block; padding: 8px 10px; border-radius: 8px; font-size: .9375rem; }
.ht_mega a:hover { background: var(--ecume); color: var(--azur); }

.ht_entete_actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.ht_burger { display: none; background: none; border: none; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; }
.ht_burger span { display: block; height: 2px; background: var(--encre); border-radius: 2px; }

@media (max-width: 960px) {
	.ht_nav { display: none; }
	.ht_burger { display: flex; }
	.ht_entete.is-ouvert .ht_nav {
		display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 68px 0 0 0;
		background: var(--chaux); padding: 16px; overflow-y: auto; gap: 0;
	}
	.ht_entete.is-ouvert .ht_mega { position: static; box-shadow: none; display: none; grid-template-columns: 1fr; min-width: 0; }
	.ht_entete.is-ouvert .ht_mega.is-open { display: grid; }
	.ht_entete_actions .ht_bouton { display: none; }
	.ht_entete.is-ouvert .ht_entete_actions .ht_bouton { display: inline-flex; margin: 12px 0; }
}

/* ==========================================================================
   5. HERO + BARRE QUOI/OÙ (procédé 1)
   ========================================================================== */
.ht_hero { position: relative; padding-block: 96px 140px; min-height: 560px; color: #fff; overflow: hidden; display: flex; align-items: flex-end; }
.ht_hero_fond { position: absolute; inset: 0; z-index: 0; }
.ht_hero_fond img, .ht_hero_fond .ht_photo { width: 100%; height: 100%; object-fit: cover; }
/* voile plus dense en bas-gauche : le H1 reste lisible même sur des toits clairs (n°3) */
.ht_hero_voile {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(0deg, rgba(10,24,32,.95) 0%, rgba(10,24,32,.55) 45%, rgba(10,24,32,.15) 80%),
		linear-gradient(100deg, rgba(10,24,32,.55) 0%, rgba(10,24,32,0) 55%);
}
.ht_hero_contenu { position: relative; z-index: 2; width: 100%; }
.ht_hero_contenu h1, .ht_hero_contenu p { max-width: 720px; }
.ht_hero h1 { color: #fff; }
.ht_hero p.ht_chapo { color: #DDEAF0; }

.ht_recherche { position: relative; margin-top: -64px; z-index: 5; }
.ht_recherche_barre { background: var(--chaux); border-radius: var(--rayon-pilule); box-shadow: var(--ombre); display: flex; align-items: stretch; padding: 8px; gap: 8px; max-width: 900px; }
.ht_recherche_champ { flex: 1; display: flex; flex-direction: column; padding: 8px 18px; border-radius: var(--rayon-pilule); }
.ht_recherche_champ:hover { background: var(--ecume); }
.ht_recherche_champ label { font-size: .75rem; font-weight: 700; color: var(--texte-douce); }
.ht_recherche_champ select { border: none; background: none; font-weight: 700; font-size: 1rem; padding: 2px 0; }
.ht_recherche_barre .ht_bouton { flex-shrink: 0; }
@media (max-width: 720px) {
	.ht_recherche_barre { flex-direction: column; border-radius: var(--rayon); }
	.ht_recherche_champ { border-radius: var(--rayon); }
	.ht_recherche_barre .ht_bouton { width: 100%; }
}

.ht_pastilles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ht_pastille { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: var(--rayon-pilule); padding: 8px 16px; font-weight: 600; font-size: .875rem; }
.ht_pastille:hover { background: rgba(255,255,255,.26); }
.ht_pastille--claire { color: var(--encre); background: var(--ecume); border-color: var(--ecume); }
.ht_pastille--claire:hover { background: var(--chaux); border-color: var(--azur); }
.ht_pastille--claire.is-active { background: var(--azur); border-color: var(--azur); color: var(--sur-azur); }
.ht_grille--1-2 { grid-template-columns: 1fr 2fr; align-items: start; }
.ht_grille--2-1 { grid-template-columns: 2fr 1fr; }
/* Autonome (verdict 18/09 n°9) : ne dépend plus de .ht_grille_3, dont grid-template-columns (plus loin dans la
   feuille, même spécificité) écrasait 5fr/7fr par ordre de source quand les deux classes étaient combinées. */
.ht_grille--5-7 { display: grid; gap: 20px; grid-template-columns: 5fr 7fr; align-items: start; }
.ht_grille--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 860px) { .ht_grille--1-2, .ht_grille--2-1, .ht_grille--5-7 { grid-template-columns: 1fr; } .ht_grille--6 { grid-template-columns: repeat(3, 1fr); } }

/* Grille des métiers voisins (page métier×ville, n°8) : jamais de tuile double héritée de l'accueil */
.ht_grille_voisins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ht_grille_voisins .ht_tuile { aspect-ratio: 4/3; }
@media (max-width: 900px) { .ht_grille_voisins { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ht_grille_voisins { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   6. GRILLES DE TUILES (métiers / villes / actus / guides)
   ========================================================================== */
.ht_grille_metiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.ht_grille_metiers .ht_tuile:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .ht_grille_metiers { grid-template-columns: repeat(2, 1fr); } .ht_grille_metiers .ht_tuile:first-child { grid-column: span 2; grid-row: span 1; } }

.ht_tuile { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4/3; display: block; }
.ht_grille_metiers .ht_tuile:first-child { aspect-ratio: 8/5; }
.ht_tuile .ht_photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Repli générique (n°18) : jamais de bloc blanc/vide en attendant une photo, quel que soit le bloc */
.ht_photo--manque { background: linear-gradient(135deg, var(--ecume), var(--nuit)); }
.ht_tuile_voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19,42,54,.85) 0%, rgba(19,42,54,0) 55%); }
.ht_tuile_picto { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--ombre); }
.ht_tuile_picto svg { width: 20px; height: 20px; color: var(--azur); }
.ht_tuile_prix { position: absolute; bottom: 46px; right: 12px; background: var(--terre); color: var(--sur-terre); font-weight: 700; font-size: .75rem; padding: 5px 10px; border-radius: var(--rayon-pilule); }
.ht_tuile_titre { position: absolute; bottom: 14px; left: 14px; right: 14px; color: var(--sur-photo); font-family: 'Red Hat Display Variable'; font-weight: 800; font-size: 1.1rem; }
@media (max-width: 900px) {
	/* Verdict v4 : sur 2 colonnes, un nom long (« Installateur panneaux solaires ») recouvrait le prix.
	   Le prix monte en haut, sur une ligne (le pictogramme décoratif s'efface sur les petites tuiles) ; le nom tient sur 2 lignes maximum. */
	.ht_grille_metiers .ht_tuile:not(:first-child) .ht_tuile_picto { display: none; }
	.ht_grille_metiers .ht_tuile_prix { top: 12px; bottom: auto; right: 10px; white-space: nowrap; }
	.ht_grille_metiers .ht_tuile:not(:first-child) .ht_tuile_prix { left: 10px; right: auto; }
	.ht_grille_metiers .ht_tuile_titre { font-size: 1rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.ht_tuile:hover .ht_tuile_voile { background: linear-gradient(0deg, rgba(10,111,168,.75) 0%, rgba(19,42,54,.35) 100%); }

.ht_grille_3, .ht_grille_4 { display: grid; gap: 20px; }
.ht_grille_3 { grid-template-columns: repeat(3, 1fr); }
.ht_grille_4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ht_grille_3, .ht_grille_4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ht_grille_3, .ht_grille_4 { grid-template-columns: 1fr; } }

.ht_carte_article { background: var(--chaux); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.ht_carte_article_img { position: relative; aspect-ratio: 16/9; }
.ht_carte_article_img .ht_photo { width: 100%; height: 100%; object-fit: cover; }
/* Pastilles ville + métier en surimpression (verdict 18/09 N6) : jamais deux pastilles de la même couleur côte à côte. */
.ht_carte_article_pastilles { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.ht_carte_article_pastille { background: var(--terre); color: var(--sur-terre); font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--rayon-pilule); }
.ht_carte_article_pastille--azur { background: var(--azur); color: var(--sur-azur); }
.ht_carte_article_corps { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ht_carte_article_corps h3 a:hover { color: var(--azur); }
.ht_carte_article_date { color: var(--texte-douce); }

.ht_une_avant { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 24px; align-items: start; }
.ht_une_avant_principale { min-width: 0; width: 100%; position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--ombre); }
.ht_une_avant_principale .ht_photo { width: 100%; height: 100%; object-fit: cover; }
.ht_une_avant_texte { position: absolute; inset: auto 0 0 0; padding: 24px; background: linear-gradient(0deg, rgba(19,42,54,.92), rgba(19,42,54,0)); }
.ht_une_avant_texte h3 { color: #fff; font-size: 1.5rem; }
.ht_une_avant_secondaires { display: flex; flex-direction: column; gap: 16px; }
/* Verdict v3 N8 : retour au 16:9 fixe (l'étirement en hauteur de N5 recadrait la photo en portrait flou) —
   c'est le nombre de cartes secondaires (2 au lieu de 3, front-page.php) qui rapproche les deux hauteurs. */
@media (max-width: 860px) { .ht_une_avant { grid-template-columns: minmax(0,1fr); } .ht_une_avant .ht_une_avant_principale { min-height: 0; width: 100%; } }

/* ==========================================================================
   7. COMMENT ÇA MARCHE (3 étapes avec photo)
   ========================================================================== */
.ht_etape_carte { background: var(--chaux); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.ht_etape_carte_img { aspect-ratio: 4/3; position: relative; }
.ht_etape_carte_img .ht_photo { width: 100%; height: 100%; object-fit: cover; }
.ht_etape_num { position: absolute; top: 16px; left: 16px; width: 52px; height: 52px; border-radius: 50%; background: var(--azur); color: var(--sur-azur); display: flex; align-items: center; justify-content: center; font-family: 'Red Hat Display Variable'; font-weight: 900; font-size: 1.5rem; box-shadow: var(--ombre); }
.ht_etape_corps { padding: 30px 20px 22px; }

/* ==========================================================================
   8. CARTE DE L'HÉRAULT (procédé 2)
   ========================================================================== */
.ht_carte_zone { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.ht_carte_svg_bloc { position: relative; border-radius: var(--rayon); overflow: hidden; background: rgba(255,255,255,.03); }
.ht_carte_svg_bloc svg.ht_carte_fond { width: 100%; height: auto; display: block; }
.ht_carte_points { position: absolute; inset: 0; }
.ht_carte_ville { position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); background: none; border: none; padding: 0; z-index: 1; }
.ht_carte_ville:hover, .ht_carte_ville:focus-visible, .ht_carte_ville.is-active { z-index: 3; }
.ht_carte_point { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--azur); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(10,111,168,.35); }
.ht_carte_ville.is-active .ht_carte_point { background: var(--terre); box-shadow: 0 0 0 4px rgba(194,82,31,.35); }
/* Étiquette opaque, positionnée par rapport au POINT (le point tombe pile sur la vraie coordonnée) */
.ht_carte_nom { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--sur-nuit); background: rgba(10,24,32,.9); padding: 2px 8px; border-radius: var(--rayon-pilule); white-space: nowrap; pointer-events: none; }
.ht_carte_ville.is-active .ht_carte_nom { background: var(--terre); color: var(--sur-terre); font-weight: 800; }
.ht_carte_ville[data-ancre="n"] .ht_carte_nom { top: auto; bottom: calc(100% + 4px); }
.ht_carte_ville[data-ancre="e"] .ht_carte_nom { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.ht_carte_ville[data-ancre="o"] .ht_carte_nom { left: auto; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
/* Grappe montpelliéraine : 9 communes en 15 km, les noms se chevaucheraient à toute largeur.
   Le point reste ; le nom apparaît au survol, au focus clavier, ou quand la ville est choisie. */
.ht_carte_ville[data-secondaire="1"] .ht_carte_nom { display: none; }
.ht_carte_ville[data-secondaire="1"]:hover .ht_carte_nom, .ht_carte_ville[data-secondaire="1"]:focus-visible .ht_carte_nom, .ht_carte_ville[data-secondaire="1"].is-active .ht_carte_nom { display: block; }

@media (max-width: 640px) {
	/* En 390 px, seuls les 7 pôles gardent leur nom affiché ; les autres restent des points cliquables */
	.ht_carte_ville[data-mobile="0"] .ht_carte_nom { display: none; }
	.ht_carte_ville[data-mobile="0"]:focus-visible .ht_carte_nom, .ht_carte_ville[data-mobile="0"].is-active .ht_carte_nom { display: block; }
	.ht_carte_nom { font-size: .6875rem; padding: 1px 6px; }
}
/* Mini-carte des villes voisines (page métier×ville, n°9) : même composant, format réduit */
.ht_mini_carte_svg { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); aspect-ratio: 151.4/100; }
.ht_mini_carte_svg .ht_carte_fond { width: 100%; height: 100%; }
.ht_mini_carte_svg .ht_carte_ville { transform: translate(-50%, -50%) scale(.85); }

.ht_carte_selecteur { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ht_carte_selecteur button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: var(--sur-nuit); border-radius: var(--rayon-pilule); padding: 8px 14px; font-size: .8125rem; font-weight: 600; }
.ht_carte_selecteur button.is-active { background: var(--azur); border-color: var(--azur); color: var(--sur-azur); }

.ht_carte_liste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 24px; }
/* Même filet/espacement, ville avec ou sans page (verdict v3 N10) : sinon les <span> (pas encore de page)
   perdent le filet des <a> et paraissent désaligncés au milieu des villes cliquables. */
.ht_carte_liste a, .ht_carte_liste span { display: block; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--sur-nuit); }
.ht_carte_liste span { opacity: .6; }
.ht_carte_liste a:hover { color: var(--terre); }

.ht_carte_panneau { background: rgba(255,255,255,.06); border-radius: var(--rayon); padding: 20px; min-height: 120px; }
.ht_carte_panneau h4 { font-family: 'Red Hat Display Variable'; font-weight: 800; color: var(--sur-nuit); margin-bottom: 8px; }
.ht_carte_panneau p { color: #B9CBD3; margin-bottom: 12px; }

@media (max-width: 900px) { .ht_carte_zone { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. CALENDRIER DES SAISONS (procédé 5)
   ========================================================================== */
.ht_calendrier { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
/* Mois neutre sur fond Chaux + filet (n°11) : sur une bande Écume, un fond Écume rendait la pastille invisible */
.ht_mois { text-align: center; padding: 14px 4px; border-radius: 10px; background: var(--chaux); border: 1px solid var(--ecume); font-size: .75rem; font-weight: 700; color: var(--encre); }
.ht_mois.is-bon { background: var(--azur); border-color: var(--azur); color: var(--sur-azur); }
/* À éviter (n°11) : hachures fines sur fond Chaux, texte encre — jamais du blanc sur des hachures foncées */
.ht_mois.is-eviter {
	background: repeating-linear-gradient(45deg, var(--chaux), var(--chaux) 5px, rgba(194,82,31,.32) 5px, rgba(194,82,31,.32) 8px);
	border-color: var(--terre); color: var(--encre); font-weight: 800;
}
@media (max-width: 700px) { .ht_calendrier { grid-template-columns: repeat(4, 1fr); } }

.ht_calendrier_legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: .8125rem; color: var(--texte-douce); }
.ht_calendrier_legende li { display: flex; align-items: center; gap: 8px; }
.ht_legende_puce { display: inline-block; width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.ht_legende_puce.is-bon { background: var(--azur); }
.ht_legende_puce.is-eviter { background: repeating-linear-gradient(45deg, var(--chaux), var(--chaux) 5px, rgba(194,82,31,.32) 5px, rgba(194,82,31,.32) 8px); border: 1px solid var(--terre); }

/* ==========================================================================
   10. CARTES-LIGNES DE PRIX (jamais de <table>)
   ========================================================================== */
.ht_lignes_prix { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: var(--chaux); }
.ht_ligne_prix { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ecume); }
.ht_ligne_prix:last-child { border-bottom: none; }
.ht_ligne_prix strong { font-family: 'Red Hat Display Variable'; color: var(--azur); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ht_prix_geant { text-align: center; padding: 32px 20px; background: var(--chaux); border-radius: var(--rayon); box-shadow: var(--ombre); }
.ht_prix_geant .ht_valeur { font-family: 'Red Hat Display Variable'; font-weight: 900; font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--terre); font-variant-numeric: tabular-nums; }
.ht_prix_geant .ht_source { display: block; margin-top: 10px; color: var(--texte-douce); }

/* ==========================================================================
   11. FAQ (accordéon natif, sans JS)
   ========================================================================== */
.ht_faq details { background: var(--chaux); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 4px 0; margin-bottom: 12px; }
.ht_faq summary { cursor: pointer; list-style: none; padding: 18px 24px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.ht_faq summary::-webkit-details-marker { display: none; }
.ht_faq summary::after { content: '+'; font-size: 1.5rem; color: var(--azur); transition: transform .2s ease; }
.ht_faq details[open] summary::after { transform: rotate(45deg); }
.ht_faq details p { padding: 0 24px 20px; color: var(--texte-douce); }

/* ==========================================================================
   12. FORMULAIRE MULTI-ÉTAPES (procédé 6)
   ========================================================================== */
.ht_form { background: var(--chaux); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px; }
.ht_form--compact { padding: 20px; }
.ht_piege { position: absolute; left: -9999px; }
/* 3 marches en pastilles numérotées reliées par un filet (n°7) — jamais le cadre <fieldset> natif du navigateur */
.ht_pas { border: 0; padding: 0; margin: 0; min-width: 0; }
.ht_etapes { display: flex; align-items: flex-start; margin-bottom: 24px; }
.ht_etape_item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.ht_etape_puce { width: 34px; height: 34px; border-radius: 50%; background: var(--ecume); color: var(--texte-douce); display: flex; align-items: center; justify-content: center; font-family: 'Red Hat Display Variable'; font-weight: 800; font-size: .9375rem; }
.ht_etape_puce.is-active, .ht_etape_puce.is-fait { background: var(--azur); color: var(--sur-azur); }
.ht_etape_label { font-size: .6875rem; font-weight: 700; color: var(--texte-douce); text-align: center; max-width: 76px; line-height: 1.2; }
.ht_etape_trait { flex: 1; height: 3px; background: var(--ecume); margin: 16px 6px 0; border-radius: 2px; }
.ht_etape_trait.is-fait { background: var(--azur); }
.ht_pas legend { font-family: 'Red Hat Display Variable'; font-weight: 800; font-size: 1.15rem; margin-bottom: 14px; padding: 0; width: 100%; }
.ht_choix_boutons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ht_choix { display: block; position: relative; }
.ht_choix input { position: absolute; opacity: 0; }
.ht_choix span { display: block; padding: 14px 18px; border: 2px solid var(--ecume); border-radius: var(--rayon); font-weight: 600; }
.ht_choix input:checked + span { border-color: var(--azur); background: var(--ecume); color: var(--azur); }
.ht_choix input:focus-visible + span { outline: 3px solid var(--azur); outline-offset: 2px; }
.ht_champ { display: block; margin-bottom: 14px; font-weight: 700; font-size: .875rem; }
.ht_champ input, .ht_champ textarea { display: block; width: 100%; margin-top: 6px; padding: 13px 16px; border: 2px solid var(--ecume); border-radius: var(--rayon); background: var(--ecume); font-weight: 400; }
.ht_champ input:focus, .ht_champ textarea:focus { border-color: var(--azur); background: var(--chaux); }
.ht_case { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; margin-bottom: 18px; }
.ht_pas .ht_bouton { margin-top: 4px; }
.ht_pas .ht_precedent { margin-right: 10px; }
.ht_envoye { color: var(--succes); font-weight: 700; margin-top: 12px; }

.ht_barre_mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px; background: var(--chaux); box-shadow: 0 -6px 20px rgba(19,42,54,.15); transform: translateY(110%); transition: transform .25s ease; }
.ht_barre_mobile.is-visible { transform: translateY(0); }
.ht_barre_mobile .ht_bouton { width: 100%; min-height: 56px; }
@media (min-width: 961px) { .ht_barre_mobile { display: none; } }

/* ==========================================================================
   13. FICHES ET ENCADRÉS
   ========================================================================== */
.ht_fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .ht_fiches { grid-template-columns: 1fr; } }
.ht_fiche { background: var(--chaux); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 22px; }
.ht_fiche_picto { width: 44px; height: 44px; border-radius: 50%; background: var(--ecume); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ht_fiche_picto svg { width: 22px; height: 22px; color: var(--azur); }

.ht_encadre { border-left: 4px solid var(--azur); background: var(--ecume); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 18px 22px; margin-block: 24px; }
.ht_encadre--attention { border-color: var(--terre); }
.ht_encadre_cta { border-left: 4px solid var(--terre); background: var(--ecume); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 20px 24px; margin-block: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   14. ARTICLE / GUIDE — colonne 720px + latérale 340px collante (aucune bande blanche à droite)
   ========================================================================== */
.ht_article_entete { background: var(--ecume); padding-block: 40px; }
.ht_article_pastille { display: inline-block; background: var(--azur); color: var(--sur-azur); font-size: .8125rem; font-weight: 700; padding: 5px 14px; border-radius: var(--rayon-pilule); margin-bottom: 14px; }
.ht_article_meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ht_auteur_photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ht_auteur_photo--initiale { display: flex; align-items: center; justify-content: center; background: var(--azur); color: var(--sur-azur); font-family: 'Red Hat Display Variable'; font-weight: 800; }

.ht_article_une { max-width: var(--conteneur); margin: -30px auto 0; padding-inline: 24px; }
.ht_article_une_img { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); max-height: 460px; aspect-ratio: 16/9; }
.ht_article_une_img .ht_photo { width: 100%; height: 100%; object-fit: cover; }

.ht_article_grille { display: grid; grid-template-columns: minmax(0, 720px) 340px; gap: 48px; justify-content: center; max-width: var(--conteneur); margin-inline: auto; padding: 48px 24px 80px; }
.ht_article_corps { min-width: 0; }
.ht_article_corps img { border-radius: var(--rayon); aspect-ratio: 16/9; object-fit: cover; height: auto; margin-block: 24px; }
.ht_article_corps p { margin-bottom: 20px; }
.ht_article_corps h2 { margin-top: 44px; margin-bottom: 16px; }
.ht_article_corps h3 { margin-top: 30px; margin-bottom: 12px; }
.ht_article_corps ul, .ht_article_corps ol { margin-bottom: 20px; }
.ht_article_corps li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.ht_article_corps ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--azur); }

.ht_lateral { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - 110px); overflow: visible; }
.ht_sommaire { background: var(--ecume); border-radius: var(--rayon); padding: 20px; }
.ht_sommaire strong { display: block; margin-bottom: 10px; font-family: 'Red Hat Display Variable'; }
.ht_sommaire li { margin-bottom: 6px; }
.ht_sommaire a { display: block; padding: 6px 10px; border-radius: 8px; font-size: .9375rem; border-left: 3px solid transparent; }
.ht_sommaire a.is-actif { color: var(--azur); border-left-color: var(--azur); background: var(--chaux); }
.ht_lateral_guides li { margin-bottom: 14px; }
.ht_lateral_guides a { display: flex; gap: 10px; align-items: center; }
.ht_lateral_guides .ht_photo { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

.ht_auteur_bloc { display: flex; gap: 16px; background: var(--ecume); border-radius: var(--rayon); padding: 22px; margin-top: 48px; }
.ht_auteur_bloc .ht_auteur_photo { width: 64px; height: 64px; flex-shrink: 0; }
.ht_auteur_bloc strong { display: block; font-family: 'Red Hat Display Variable'; }

@media (max-width: 980px) {
	.ht_article_grille { grid-template-columns: 1fr; }
	.ht_lateral { position: static; max-height: none; }
}

/* ==========================================================================
   15. PAGE MÉTIER × VILLE — premier écran (R-0133 / R-0221)
   ========================================================================== */
.ht_lead_ecran { background: var(--ecume); padding-block: 40px 60px; }
/* Grille nommée (n°6) : H1 → chapô → formulaire → photo en mobile, jamais le formulaire avant le H1 */
.ht_lead_grille {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 40px; align-items: start;
	grid-template-areas: "texte form" "photo form";
}
.ht_lead_texte { grid-area: texte; }
.ht_lead_photo { grid-area: photo; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 16/9; margin-top: 24px; }
.ht_lead_photo .ht_photo { width: 100%; height: 100%; object-fit: cover; }
.ht_lead_form_col { grid-area: form; position: sticky; top: 90px; }
@media (max-width: 900px) {
	.ht_lead_grille { grid-template-columns: 1fr; grid-template-areas: "texte" "form" "photo"; }
	.ht_lead_form_col { position: static; }
	.ht_lead_photo { margin-top: 20px; }
}
@media (max-width: 640px) {
	/* H1 réduit (n°6) : l'étape 1 du formulaire doit tenir dans les 844 px du premier écran */
	.ht_lead_ecran h1 { font-size: 2rem; }
}

/* ==========================================================================
   16. BLOC PRO
   ========================================================================== */
.ht_pro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ht_pro_photo { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4/3; }
.ht_pro_photo .ht_photo { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .ht_pro { grid-template-columns: 1fr; } .ht_pro_photo { order: -1; } }

/* ==========================================================================
   17. PIED DE PAGE
   ========================================================================== */
.ht_pied { background: var(--nuit); color: var(--sur-nuit); padding-block: 56px 28px; }
.ht_pied_grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.ht_pied h4 { font-family: 'Red Hat Display Variable'; color: var(--sur-nuit); margin-bottom: 16px; font-size: 1rem; }
.ht_pied li { margin-bottom: 8px; }
.ht_pied a { color: #C4D6DD; }
.ht_pied a:hover { color: var(--terre); }
.ht_pied_bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: #9FB3BC; font-size: .8125rem; }
@media (max-width: 860px) { .ht_pied_grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ht_pied_grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. FIL D'ARIANE
   ========================================================================== */
.ht_fil { padding-block: 16px; }
.ht_fil ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--texte-douce); }
.ht_fil li:not(:last-child)::after { content: '›'; margin-left: 6px; }
.ht_fil a:hover { color: var(--azur); }

/* ==========================================================================
   19. INFOGRAPHIES DU SOCLE (sbs_*) — le style leur appartient au thème
   ========================================================================== */
.sbs_tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rayon); box-shadow: var(--ombre); margin-block: 24px; }
.sbs_tableau table { width: 100%; border-collapse: collapse; min-width: 480px; }
.sbs_tableau th, .sbs_tableau td { padding: 12px 16px; border-bottom: 1px solid var(--ecume); text-align: left; white-space: nowrap; }
.sbs_tableau th { background: var(--ecume); font-family: 'Red Hat Display Variable'; }

/* Écume + azur (verdict 18/09 N7a) : jamais le sable/beige et les numéros kaki du rendu natif du navigateur
   (meter non stylé) — reset complet des pseudo-éléments, aucune couleur héritée du socle (qui n'en pose aucune). */
.sbs_lieu, .sbs_tarifs, .sbs_frise, .sbs_jauges { display: block; background: var(--ecume); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 22px; margin-block: 24px; }
.sbs_lieu_nom, .sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre { display: block; font-family: 'Red Hat Display Variable'; font-weight: 800; color: var(--azur); margin-bottom: 14px; }
.sbs_lieu_adresse, .sbs_lieu_acces { display: block; color: var(--texte-douce); margin-bottom: 6px; }
.sbs_lieu_carte { display: inline-flex; align-items: center; gap: 6px; color: var(--azur); font-weight: 700; margin-top: 10px; }
.sbs_icone_repere { fill: currentColor; }

.sbs_tarif { display: block; margin-bottom: 16px; }
.sbs_tarif_libelle { display: block; margin-bottom: 6px; font-weight: 600; }
.sbs_tarif_barre { -webkit-appearance: none; appearance: none; border: none; width: 100%; height: 30px; border-radius: var(--rayon-pilule); background: var(--chaux); }
.sbs_tarif_barre::-webkit-meter-bar { background: var(--chaux); border-radius: var(--rayon-pilule); border: none; }
.sbs_tarif_barre::-webkit-meter-optimum-value,
.sbs_tarif_barre::-webkit-meter-suboptimum-value,
.sbs_tarif_barre::-webkit-meter-even-less-good-value { background: var(--azur); border-radius: var(--rayon-pilule); }
.sbs_tarif_barre::-moz-meter-bar { background: var(--azur); border-radius: var(--rayon-pilule); }

.sbs_frise { display: flex; flex-direction: column; gap: 18px; }
.sbs_etape { display: block; padding-left: 20px; border-left: 3px solid var(--azur); }
.sbs_etape_date { display: block; font-weight: 700; color: var(--azur); }
.sbs_etape_titre { display: block; font-family: 'Red Hat Display Variable'; margin-block: 4px; }
.sbs_etape_desc { color: var(--texte-douce); }

.sbs_jauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sbs_jauge { text-align: center; }
.sbs_jauge_valeur { display: block; font-family: 'Red Hat Display Variable'; font-weight: 900; font-size: 2rem; color: var(--azur); font-variant-numeric: tabular-nums; }
.sbs_jauge_libelle { display: block; color: var(--texte-douce); margin-top: 6px; }
.sbs_source { display: block; margin-top: 12px; color: var(--texte-douce); }
@media (max-width: 700px) { .sbs_jauges { grid-template-columns: 1fr; } }

/* Filet de sécurité (verdict v3 B3) : des encadrés restent sable/beige à numéros kaki dans l'article — contenu
   V1/ancien rendu qui porte sa propre couleur (classe non listée ci-dessus, ou style="" en ligne). On force la
   palette sur TOUT encadré de `.ht_article_corps`, quelle que soit sa provenance ; scope strict à l'article. */
.ht_article_corps .sbs_lieu, .ht_article_corps .sbs_tarifs, .ht_article_corps .sbs_frise, .ht_article_corps .sbs_jauges,
.ht_article_corps blockquote, .ht_article_corps .wp-block-quote, .ht_article_corps .wp-block-pullquote,
.ht_article_corps .wp-block-group, .ht_article_corps [style*="background"], .ht_article_corps [style*="color"] {
	background: var(--ecume) !important;
	border-color: var(--azur) !important;
	color: var(--encre) !important;
}
.ht_article_corps .sbs_lieu *, .ht_article_corps .sbs_tarifs *, .ht_article_corps .sbs_frise *, .ht_article_corps .sbs_jauges *,
.ht_article_corps blockquote *, .ht_article_corps .wp-block-quote *, .ht_article_corps .wp-block-pullquote *,
.ht_article_corps .wp-block-group *, .ht_article_corps [style*="background"] *, .ht_article_corps [style*="color"] * {
	color: var(--encre) !important;
}
.ht_article_corps .sbs_lieu_nom, .ht_article_corps .sbs_tarifs_titre, .ht_article_corps .sbs_frise_titre, .ht_article_corps .sbs_jauges_titre,
.ht_article_corps .sbs_etape_date, .ht_article_corps .sbs_jauge_valeur, .ht_article_corps .sbs_lieu_carte {
	color: var(--azur) !important;
}

/* ==========================================================================
   20. UTILITAIRES
   ========================================================================== */
.ht_masque_ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ht_centre { text-align: center; }
.ht_espace-32 { margin-bottom: 32px; }