/*
 * Fiche référence — design aligné sur le design system du site (Avada) :
 * police "segoe-ui", bleu #0077b2, vert #6ba440, boutons pilule, cartes
 * arrondies à ombre légère.
 */
.senova-fiche-wrapper {
	--senova-blue: #0077b2;
	--senova-blue-dark: #005f92;
	--senova-blue-bg: #eaf4f9;
	--senova-green: #6ba440;
	--senova-green-bg: #eef5e5;
	--senova-tint-bg: #f0f7fa;
	--senova-light-bg: #f6f6f6;
	--senova-grey-border: #e0dede;
	/* Un ton plus soutenu que la bordure : sur un tiret de 1.5px, #e0dede se
	   confond avec le blanc de la carte et le trait de l'échelle DPE semble
	   interrompu. */
	--senova-grey-dash: #c9c6c6;
	--senova-grey-text: #747474;
	--senova-dark: #333333;
	--senova-text: #3c3c3b;
	--senova-radius: 20px;
	--senova-radius-sm: 12px;
	--senova-pill-radius: 43px;
	--senova-box-shadow: 3px 3px 14px 0px rgba(51, 51, 51, 0.08);
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 20px 70px;
	font-family: "segoe-ui", Arial, Helvetica, sans-serif;
	color: var(--senova-text);
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.015em;
}

.senova-fiche-wrapper h1,
.senova-fiche-wrapper h2,
.senova-fiche-wrapper h3 {
	font-family: "segoe-ui", Arial, Helvetica, sans-serif;
	color: var(--senova-dark);
}

/* Lien retour */
.senova-fiche-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--senova-grey-text);
	text-decoration: none;
	margin-bottom: 24px;
	transition: color 0.15s ease;
}

.senova-fiche-back:hover {
	color: var(--senova-blue);
}

.senova-fiche-back svg {
	transition: transform 0.15s ease;
}

.senova-fiche-back:hover svg {
	transform: translateX(-3px);
}

/* Eyebrow (petit libellé vert majuscule, utilisé pour les en-têtes de section) */
.senova-fiche-eyebrow {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-green);
	margin: 0 0 8px;
}

/* Pills (typologie / statut) */
.senova-fiche-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.senova-fiche-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: var(--senova-pill-radius);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid var(--senova-blue);
	color: var(--senova-blue);
	background: #fff;
}

.senova-fiche-pill-light {
	background: rgba(255, 255, 255, 0.92);
	color: var(--senova-dark);
	border-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(2px);
}

.senova-fiche-pill-solid {
	background: var(--senova-green);
	color: #fff;
	border-color: var(--senova-green);
}

.senova-fiche-pill-blue {
	background: var(--senova-blue-bg);
	border-color: var(--senova-blue-bg);
	color: var(--senova-blue);
}

/* ===== Hero ===== */
/* Le titre est réordonné en CSS plutôt que dans le HTML : il reste ainsi dans
   le même bloc que le bouton de contact, avec lequel il partage sa mise en
   page en deux colonnes. */
.senova-fiche-hero {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}

.senova-fiche-hero-body {
	order: -1;
	margin-bottom: 24px;
}

/* Le cadre porte le fond arrondi, l'ombre et les étiquettes : c'est donc lui,
   et non l'image seule, qui est réduit puis centré. */
.senova-fiche-hero-media {
	position: relative;
	width: 80%;
	margin: 0 auto 28px;
	border-radius: var(--senova-radius);
	overflow: hidden;
	box-shadow: var(--senova-box-shadow);
}

/* Format imposé : toutes les fiches présentent la même image, quel que soit le
   cadrage du fichier téléversé, que `object-fit: cover` recadre sans le
   déformer. */
.senova-fiche-hero-media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.senova-fiche-hero-media .senova-fiche-hero-tags {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	/* Au-dessus du trait de séparation (z-index 2), qui les traverserait
	   sinon. Les étiquettes avant/après restent, elles, en dessous. */
	z-index: 4;
}

/* ===== Comparateur avant / après =====
   Les règles sont conditionnées à .is-actif, posée par le JS : sans lui, la
   photo "après" occupe seule le cadre, comme une bannière classique. */
.senova-ba-frame {
	position: relative;
	margin: 0;
	line-height: 0;
}

.senova-ba.is-actif .senova-ba-frame {
	/* Réserve le geste horizontal au comparateur en laissant le défilement
	   vertical de la page se faire normalement au doigt. */
	touch-action: pan-y;
	user-select: none;
}

/* Spécificité alignée sur ".senova-fiche-hero-media img", qui l'emporterait sinon.
   Même format que la bannière simple : les deux photos du comparateur se
   superposent donc exactement. */
.senova-fiche-hero-media .senova-ba-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.senova-ba .senova-ba-img-avant {
	display: none;
}

.senova-ba.is-actif .senova-ba-img-avant {
	display: block;
	position: absolute;
	inset: 0;
	height: 100%;
	/* Découpe l'image plutôt que de la redimensionner : le cadrage reste
	   identique des deux côtés de la poignée. La frontière suit une courbe en
	   S plutôt qu'un trait vertical — voir .senova-ba-separation, qui trace la
	   même courbe pour la rendre visible. */
	clip-path: polygon(
		0% 0%,
		var(--senova-ba-pos, 50%) 0.0%,
		calc(var(--senova-ba-pos, 50%) - 0.548% * var(--senova-ba-courbure, 1)) 2.08%,
		calc(var(--senova-ba-pos, 50%) - 1.087% * var(--senova-ba-courbure, 1)) 4.17%,
		calc(var(--senova-ba-pos, 50%) - 1.607% * var(--senova-ba-courbure, 1)) 6.25%,
		calc(var(--senova-ba-pos, 50%) - 2.1% * var(--senova-ba-courbure, 1)) 8.33%,
		calc(var(--senova-ba-pos, 50%) - 2.557% * var(--senova-ba-courbure, 1)) 10.42%,
		calc(var(--senova-ba-pos, 50%) - 2.97% * var(--senova-ba-courbure, 1)) 12.5%,
		calc(var(--senova-ba-pos, 50%) - 3.332% * var(--senova-ba-courbure, 1)) 14.58%,
		calc(var(--senova-ba-pos, 50%) - 3.637% * var(--senova-ba-courbure, 1)) 16.67%,
		calc(var(--senova-ba-pos, 50%) - 3.88% * var(--senova-ba-courbure, 1)) 18.75%,
		calc(var(--senova-ba-pos, 50%) - 4.057% * var(--senova-ba-courbure, 1)) 20.83%,
		calc(var(--senova-ba-pos, 50%) - 4.164% * var(--senova-ba-courbure, 1)) 22.92%,
		calc(var(--senova-ba-pos, 50%) - 4.2% * var(--senova-ba-courbure, 1)) 25.0%,
		calc(var(--senova-ba-pos, 50%) - 4.164% * var(--senova-ba-courbure, 1)) 27.08%,
		calc(var(--senova-ba-pos, 50%) - 4.057% * var(--senova-ba-courbure, 1)) 29.17%,
		calc(var(--senova-ba-pos, 50%) - 3.88% * var(--senova-ba-courbure, 1)) 31.25%,
		calc(var(--senova-ba-pos, 50%) - 3.637% * var(--senova-ba-courbure, 1)) 33.33%,
		calc(var(--senova-ba-pos, 50%) - 3.332% * var(--senova-ba-courbure, 1)) 35.42%,
		calc(var(--senova-ba-pos, 50%) - 2.97% * var(--senova-ba-courbure, 1)) 37.5%,
		calc(var(--senova-ba-pos, 50%) - 2.557% * var(--senova-ba-courbure, 1)) 39.58%,
		calc(var(--senova-ba-pos, 50%) - 2.1% * var(--senova-ba-courbure, 1)) 41.67%,
		calc(var(--senova-ba-pos, 50%) - 1.607% * var(--senova-ba-courbure, 1)) 43.75%,
		calc(var(--senova-ba-pos, 50%) - 1.087% * var(--senova-ba-courbure, 1)) 45.83%,
		calc(var(--senova-ba-pos, 50%) - 0.548% * var(--senova-ba-courbure, 1)) 47.92%,
		var(--senova-ba-pos, 50%) 50.0%,
		calc(var(--senova-ba-pos, 50%) + 0.548% * var(--senova-ba-courbure, 1)) 52.08%,
		calc(var(--senova-ba-pos, 50%) + 1.087% * var(--senova-ba-courbure, 1)) 54.17%,
		calc(var(--senova-ba-pos, 50%) + 1.607% * var(--senova-ba-courbure, 1)) 56.25%,
		calc(var(--senova-ba-pos, 50%) + 2.1% * var(--senova-ba-courbure, 1)) 58.33%,
		calc(var(--senova-ba-pos, 50%) + 2.557% * var(--senova-ba-courbure, 1)) 60.42%,
		calc(var(--senova-ba-pos, 50%) + 2.97% * var(--senova-ba-courbure, 1)) 62.5%,
		calc(var(--senova-ba-pos, 50%) + 3.332% * var(--senova-ba-courbure, 1)) 64.58%,
		calc(var(--senova-ba-pos, 50%) + 3.637% * var(--senova-ba-courbure, 1)) 66.67%,
		calc(var(--senova-ba-pos, 50%) + 3.88% * var(--senova-ba-courbure, 1)) 68.75%,
		calc(var(--senova-ba-pos, 50%) + 4.057% * var(--senova-ba-courbure, 1)) 70.83%,
		calc(var(--senova-ba-pos, 50%) + 4.164% * var(--senova-ba-courbure, 1)) 72.92%,
		calc(var(--senova-ba-pos, 50%) + 4.2% * var(--senova-ba-courbure, 1)) 75.0%,
		calc(var(--senova-ba-pos, 50%) + 4.164% * var(--senova-ba-courbure, 1)) 77.08%,
		calc(var(--senova-ba-pos, 50%) + 4.057% * var(--senova-ba-courbure, 1)) 79.17%,
		calc(var(--senova-ba-pos, 50%) + 3.88% * var(--senova-ba-courbure, 1)) 81.25%,
		calc(var(--senova-ba-pos, 50%) + 3.637% * var(--senova-ba-courbure, 1)) 83.33%,
		calc(var(--senova-ba-pos, 50%) + 3.332% * var(--senova-ba-courbure, 1)) 85.42%,
		calc(var(--senova-ba-pos, 50%) + 2.97% * var(--senova-ba-courbure, 1)) 87.5%,
		calc(var(--senova-ba-pos, 50%) + 2.557% * var(--senova-ba-courbure, 1)) 89.58%,
		calc(var(--senova-ba-pos, 50%) + 2.1% * var(--senova-ba-courbure, 1)) 91.67%,
		calc(var(--senova-ba-pos, 50%) + 1.607% * var(--senova-ba-courbure, 1)) 93.75%,
		calc(var(--senova-ba-pos, 50%) + 1.087% * var(--senova-ba-courbure, 1)) 95.83%,
		calc(var(--senova-ba-pos, 50%) + 0.548% * var(--senova-ba-courbure, 1)) 97.92%,
		var(--senova-ba-pos, 50%) 100.0%,
		0% 100%
	);
}

.senova-ba-poignee,
.senova-ba-range {
	display: none;
}

/* Trait de séparation : un SVG étiré sur toute la hauteur, dont la courbe
   reprend celle du clip-path ci-dessus. Il suit la poignée par translation. */
.senova-ba.is-actif .senova-ba-separation {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 2;
}

.senova-ba-separation svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* non-scaling-stroke fige l'épaisseur en pixels écran : elle se règle donc
   ici, et non dans le viewBox du tracé. */
.senova-ba-separation path {
	stroke-width: 3px;
	filter: drop-shadow(0 0 3px rgba(51, 51, 51, 0.55)) drop-shadow(0 0 1px rgba(51, 51, 51, 0.4));
}

.senova-ba.is-actif .senova-ba-poignee {
	display: flex;
	position: absolute;
	top: 50%;
	left: var(--senova-ba-pos, 50%);
	transform: translate(-50%, -50%);
	/* Décalé de la même quantité que la courbe à mi-hauteur, pour rester posé
	   dessus plutôt qu'à côté. */
	margin-left: 0;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 3;
}

.senova-ba-poignee::before {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--senova-box-shadow);
}

/* La poignée ne fait que 2px de large : sans flex-shrink:0 les chevrons y
   seraient compressés jusqu'à disparaître. */
.senova-ba-poignee svg {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	color: var(--senova-blue);
}

.senova-ba.is-actif .senova-ba-range {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 3;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

/* Le curseur étant invisible, le focus clavier est matérialisé par la poignée. */
.senova-ba-range:focus-visible ~ .senova-ba-poignee::before {
	outline: 3px solid var(--senova-blue);
	outline-offset: 2px;
}

.senova-ba-etiquette {
	position: absolute;
	bottom: 16px;
	z-index: 1;
	padding: 6px 16px;
	border-radius: var(--senova-pill-radius);
	background: rgba(51, 51, 51, 0.72);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	pointer-events: none;
}

.senova-ba .senova-ba-etiquette-avant {
	display: none;
}

/* Chaque pastille est portée par un calque couvrant tout le cadre et découpé
   comme l'image qu'elle légende : la poignée la recouvre progressivement au
   lieu de la laisser flotter au-dessus de l'autre photo. Le clip est posé sur
   le calque, dont les pourcentages se rapportent bien au cadre — sur la
   pastille elle-même, ils se rapporteraient à sa propre largeur. */
.senova-ba.is-actif .senova-ba-etiquette {
	position: static;
}

.senova-ba.is-actif .senova-ba-calque {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.senova-ba.is-actif .senova-ba-calque-avant {
	clip-path: inset(0 calc(100% - var(--senova-ba-pos, 50%)) 0 0);
}

.senova-ba.is-actif .senova-ba-calque-apres {
	clip-path: inset(0 0 0 var(--senova-ba-pos, 50%));
}

.senova-ba.is-actif .senova-ba-calque .senova-ba-etiquette {
	position: absolute;
	bottom: 16px;
}

.senova-ba.is-actif .senova-ba-etiquette-avant {
	display: block;
	left: 16px;
}

.senova-ba-etiquette-apres {
	right: 16px;
}

.senova-fiche-hero-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.senova-fiche-hero-body--no-media .senova-fiche-hero-tags {
	margin-bottom: 14px;
}

.senova-fiche-hero-heading {
	flex: 1 1 380px;
}

.senova-fiche-hero-heading h1 {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 12px;
}

.senova-fiche-accroche {
	font-size: 19px;
	font-weight: 600;
	color: var(--senova-dark);
	margin: 0 0 12px;
	line-height: 1.4;
}

.senova-fiche-adresse {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--senova-grey-text);
	font-size: 16px;
	margin: 0;
}

.senova-fiche-adresse svg {
	flex-shrink: 0;
	color: var(--senova-blue);
}

.senova-fiche-maps-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--senova-grey-text);
	opacity: 0.65;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.senova-fiche-maps-link:hover {
	opacity: 1;
	color: var(--senova-blue);
}

.senova-fiche-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 23px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.015em;
	color: #fff;
	background: var(--senova-green);
	border: 1px solid var(--senova-green);
	border-radius: var(--senova-pill-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.senova-fiche-contact-btn svg {
	transition: transform 0.15s ease;
}

.senova-fiche-contact-btn:hover {
	background: #5a8a34;
	border-color: #5a8a34;
	transform: translateY(-1px);
}

.senova-fiche-contact-btn:hover svg {
	transform: translateX(3px);
}

.senova-fiche-contact-btn:active {
	transform: translateY(0);
}

/* Bouton pilule secondaire (contour bleu) */
.senova-fiche-cta-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 600;
	color: var(--senova-blue);
	background: #fff;
	border: 1px solid var(--senova-blue);
	border-radius: var(--senova-pill-radius);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.senova-fiche-cta-outline:hover {
	background: var(--senova-blue);
	color: #fff;
}

/* ===== Chiffres clés (style "stat" du site) ===== */
.senova-fiche-main-infos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 4px;
	margin-top: 28px;
	background: var(--senova-tint-bg);
	border-radius: var(--senova-radius);
	padding: 8px;
}

.senova-fiche-main-info {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 20px 24px;
}

.senova-fiche-main-info strong {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--senova-grey-text);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.senova-fiche-main-info span {
	font-size: 32px;
	font-weight: 700;
	color: var(--senova-blue);
	line-height: 1.15;
}

/* ===== Points forts (mise en avant, juste après le hero) ===== */
.senova-fiche-points-forts-section {
	margin-bottom: 32px;
}

.senova-fiche-points-forts-card {
	background: #fff;
	border: 1px solid var(--senova-grey-border);
	border-radius: var(--senova-radius);
	padding: 24px 28px;
}

.senova-fiche-points-forts-card h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-grey-text);
	margin: 0 0 14px;
}

.senova-fiche-points-forts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 10px 28px;
}

.senova-fiche-points-forts li {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--senova-dark);
}

.senova-fiche-points-forts li::before {
	content: "✓";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--senova-green);
	border-radius: 50%;
}

/* ===== Échelle DPE chiffrée ===== */
/* Les largeurs de ce bloc sont exprimées hors padding : l'escalier des barres
   et le trait pointillé qui se cale dessus supposent ce modèle de boîte. Les
   thèmes appliquant couramment `border-box` à tout le document, le modèle est
   réimposé ici pour que le rendu ne dépende pas du thème hôte. */
.senova-dpe-reglette,
.senova-dpe-reglette *,
.senova-dpe-reglette *::before,
.senova-dpe-reglette *::after {
	box-sizing: content-box;
}

/* Deux colonnes distinctes : l'échelle à gauche, les repères et la pastille
   à droite. Les barres ayant des largeurs fixes, la première colonne se cale
   sur la plus longue (G) et les repères s'alignent tous verticalement. */
.senova-dpe-reglette {
	/* Largeur de la classe la plus longue (G) : voir le calcul des largeurs
	   dans render_fiche_content(). Chaque ligne s'aligne dessus, de sorte que
	   les repères de droite forment une colonne parfaitement verticale. */
	--senova-dpe-col: 282px;
	/* Largeur de la colonne des repères (étiquettes + libellés) : plafonnée
	   pour qu'elle ne s'étire pas avec la carte. */
	--senova-dpe-col2: 100px;
	/* Hauteur réservée à la pastille, qui coiffe la colonne des repères. */
	--senova-dpe-eco: 104px;
	/* Épaisseur du trait pointillé. Déclarée ici car elle sert deux fois : à
	   la hauteur du trait et au recentrage vertical qui en dépend. */
	--senova-dpe-trait: 1.5px;
	display: grid;
	grid-template-columns: var(--senova-dpe-col) var(--senova-dpe-col2, 100px);
	column-gap: 0;
	align-items: center;
}

/* La pastille se cale sur la carte, au-dessus du titre, plutôt que dans le
   flux de la réglette où elle recouvrirait les premières classes. */
.senova-fiche-info-bloc--dpe {
	position: relative;
}

/* L'unité coiffe la colonne des barres. */
.senova-dpe-unite {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	/* Compense la hauteur de la pastille pour que l'échelle démarre sous elle. */
	padding-top: calc(var(--senova-dpe-eco) - 18px);
	font-size: 13px;
	color: var(--senova-grey-text);
	padding-left: 12px;
}

/* Pastille "62 % d'économies", cerclée et inclinée comme sur la plaquette.
   Elle coiffe la colonne de droite, au-dessus des repères. */
.senova-dpe-economies {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 104px;
	height: 104px;
	padding: 6px;
	border: 2px solid var(--senova-blue);
	border-radius: 50%;
	color: var(--senova-blue);
	text-align: center;
	line-height: 1.15;
	transform: rotate(15deg);
}

.senova-dpe-economies strong {
	font-size: 26px;
	font-weight: 700;
}

.senova-dpe-economies span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.senova-dpe-ligne {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: var(--senova-dpe-col) var(--senova-dpe-col2, 100px);
	align-items: center;
}

/* La barre s'allonge d'une classe à l'autre ; la pointe droite est obtenue
   par un découpage, plus léger qu'une image de fond. */
.senova-dpe-barre {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* Largeurs fixes et croissantes, reprises de la plaquette : elles ne
	   dépendent pas de la largeur du bloc, qui varie selon la mise en page. */
	width: var(--senova-dpe-largeur);
	flex-shrink: 0;
	padding: 7px 26px 7px 12px;
	border-radius: 3px;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
	color: #fff;
}

.senova-dpe-lettre {
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
}

.senova-dpe-bornes {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.senova-dpe-barre-a { background: #00a651; }
.senova-dpe-barre-b { background: #4cb648; }
.senova-dpe-barre-c { background: #a0c93d; }
.senova-dpe-barre-d { background: #f5d800; }
.senova-dpe-barre-e { background: #f7941e; }
.senova-dpe-barre-f { background: #f26522; }
.senova-dpe-barre-g { background: #ed1c24; }

/* Les repères sont détachés du flux : quelle que soit leur largeur, les barres
   de classe conservent exactement la même position d'une ligne à l'autre.
   Ils sont calés à droite, au-delà de la plus longue des barres. */
.senova-dpe-reperes {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: right;
	min-height: 44px;
}

/* Trait pointillé reliant la barre à son étiquette, sur les deux seules
   lignes repérées. Il court d'une pointe de chevron à l'autre : celle de la
   barre (largeur nominale + les 18px découpés par son clip-path) et celle de
   l'étiquette, qui occupe le bord gauche de la colonne des repères pour les
   deux repères (voir .senova-dpe-repere).

   Le motif est peint en dégradé répété plutôt qu'en `border-dashed`, dont le
   navigateur ajuste la longueur des tirets à la largeur disponible : elle
   varierait donc d'une classe à l'autre. */
.senova-dpe-ligne.is-active::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(var(--senova-dpe-largeur) + 18px);
	right: var(--senova-dpe-col2, 100px);
	/* `top` positionne le bord haut : on retranche la moitié de l'épaisseur
	   pour centrer l'axe du trait sur celui de la barre. */
	top: calc(50% - (var(--senova-dpe-trait) / 2));
	height: var(--senova-dpe-trait);
	background: repeating-linear-gradient(to right, var(--senova-grey-dash) 0 5px, transparent 5px 10px);
}

/* Repère "avant" : contour discret, l'état de départ n'est pas ce qu'on
   met en avant. "Après" : plein, dans le bleu de la marque.

   Les deux étiquettes occupent toute la colonne, quelle que soit la longueur
   de leur texte : leurs pointes de chevron se retrouvent ainsi exactement au
   même endroit, et le trait pointillé peut s'arrêter à une distance fixe du
   bord — sans dépendre ni de la classe, ni du nombre de chiffres affichés. */
.senova-dpe-repere {
	position: relative;
	display: flex;
	width: 100%;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.senova-dpe-repere-valeur {
	flex: 1;
	text-align: center;
}

.senova-dpe-repere-titre {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--senova-grey-text);
}

/* Les libellés sont recentrés sur la partie rectangulaire de leur étiquette :
   la pointe de 14px les décalerait autrement de sa moitié. */
.senova-dpe-repere-titre {
	bottom: calc(100% + 4px);
	margin-left: 7px;
}

/* "Avant" se place sous son étiquette, "Après" au-dessus de la sienne : les
   deux libellés s'écartent ainsi du trait pointillé qui relie chaque étiquette
   à sa barre, au lieu de s'y superposer quand les deux classes sont voisines. */
.senova-dpe-repere--avant .senova-dpe-repere-titre {
	bottom: auto;
	top: calc(100% + 4px);
}

.senova-dpe-repere-valeur {
	position: relative;
	z-index: 1;
	padding: 7px 16px;
	border-radius: 3px;
	background: #fff;
}

.senova-dpe-repere--apres .senova-dpe-repere-valeur {
	background: var(--senova-blue);
	color: #fff;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	padding-left: 24px;
}

.senova-dpe-repere--apres .senova-dpe-repere-titre {
	color: var(--senova-dark);
}

/* Même forme que le repère "après", mais en contour : l'état de départ est
   rappelé sans être mis en avant. Le chevron est dessiné par un fond dégradé
   plutôt que par une bordure, qu'un clip-path rognerait. */
.senova-dpe-repere--avant .senova-dpe-repere-valeur {
	background: var(--senova-grey-border);
	color: var(--senova-grey-text);
	font-weight: 600;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	padding-left: 24px;
}

/* Le contour est obtenu en superposant un fond blanc légèrement réduit. */
.senova-dpe-repere--avant .senova-dpe-repere-valeur::before {
	content: "";
	position: absolute;
	inset: 1px 1px 1px 1px;
	background: #fff;
	clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
	z-index: -1;
}

/* ===== Performance énergétique (badges DPE) =====
   Couplés à .senova-dpe-badge : sur une seule classe, la règle
   ".senova-fiche-main-info span" l'emporterait et repeindrait la lettre
   en bleu, illisible sur le fond coloré de l'étiquette. */
.senova-dpe-badge.senova-dpe-a { background: #009a44; color: #fff; }
.senova-dpe-badge.senova-dpe-b { background: #4cb648; color: #fff; }
.senova-dpe-badge.senova-dpe-c { background: #a0c93d; color: #fff; }
.senova-dpe-badge.senova-dpe-d { background: #ffcc00; color: #fff; }
.senova-dpe-badge.senova-dpe-e { background: #f7941e; color: #fff; }
.senova-dpe-badge.senova-dpe-f { background: #f26522; color: #fff; }
.senova-dpe-badge.senova-dpe-g { background: #ed1c24; color: #fff; }

.senova-dpe-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--senova-radius-sm);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.senova-dpe-badge--sm {
	width: 44px;
	height: 44px;
	border-radius: 7px;
}

.senova-dpe-compact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--senova-grey-text);
}

.senova-fiche-main-info .senova-dpe-compact svg {
	color: var(--senova-grey-text);
	flex-shrink: 0;
}

.senova-dpe-scale {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.senova-dpe-etat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.senova-dpe-etat-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-grey-text);
}

.senova-dpe-arrow {
	color: var(--senova-grey-text);
	flex-shrink: 0;
	margin-bottom: 24px;
}

.senova-dpe-fallback {
	display: block;
	text-align: center;
	width: fit-content;
	margin: 0 auto;
}

.senova-fiche-dpe-wrap {
	display: flex;
	flex-direction: column;
	align-items: left;
	gap: 16px;
}

/* ===== Sections génériques ===== */
.senova-fiche-section {
	margin-bottom: 40px;
}

.senova-fiche-section h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 22px;
	text-align: center;
}

.senova-fiche-section h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-grey-text);
	margin: 0 0 16px;
}

/* Section "Toutes les informations" */
.senova-fiche-toutes-infos {
	background: var(--senova-tint-bg);
	border-radius: var(--senova-radius);
	padding: 36px 32px;
}

.senova-fiche-infos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.senova-fiche-info-bloc {
	background: #fff;
	border-radius: var(--senova-radius);
	padding: 24px;
	box-shadow: var(--senova-box-shadow);
}

.senova-fiche-info-bloc-full {
	grid-column: 1 / -1;
}

/* Programme de travaux et performance énergétique côte à côte : le programme
   prend la largeur dont son texte a besoin, l'étiquette DPE se contente du
   reste. Le bloc DPE est marqué "-full" dans le HTML ; sa mise en colonne se
   fait ici par surcharge, sans toucher au rendu PHP. */
@media (min-width: 1180px) {
	.senova-fiche-infos-grid:has(> .senova-fiche-info-bloc--programme) {
		/* L'échelle DPE a une largeur propre (barres + repères) : sa colonne
		   s'y ajuste, le programme de travaux occupe tout le reste. */
		grid-template-columns: minmax(0, 1fr) max-content;
	}

	.senova-fiche-infos-grid:has(> .senova-fiche-info-bloc--programme) > .senova-fiche-info-bloc--dpe {
		grid-column: auto;
	}

	/* Une seule colonne de cases à cocher : sur cette largeur, deux colonnes
	   produiraient des lignes trop courtes. */
	.senova-fiche-info-bloc--programme .senova-fiche-programme {
		grid-template-columns: 1fr;
	}
}

/* Checklist (programme de travaux) — même codes que les points forts projet du site */
.senova-fiche-programme {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 10px 24px;
}

.senova-fiche-programme li {
	position: relative;
	padding-left: 26px;
	line-height: 1.5;
	color: var(--senova-text);
}

.senova-fiche-programme li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--senova-green);
}

/* Avant / après */
.senova-fiche-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.senova-fiche-photo {
	flex: 1 1 320px;
	max-width: 460px;
	margin: 0;
	text-align: center;
}

.senova-fiche-photo img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--senova-radius);
	box-shadow: var(--senova-box-shadow);
	display: block;
}

.senova-fiche-photo figcaption {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--senova-grey-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}


/* Acteurs du projet */
.senova-fiche-acteurs-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.senova-fiche-acteur {
	flex: 1 1 190px;
	max-width: 240px;
	text-align: center;
	padding: 22px 16px;
	background: #fff;
	border-radius: var(--senova-radius-sm);
	box-shadow: var(--senova-box-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.senova-fiche-acteur img {
	max-width: 100%;
	max-height: 56px;
	object-fit: contain;
	border-radius: 8px;
}

.senova-fiche-acteur strong {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-grey-text);
	font-weight: 700;
}

.senova-fiche-acteur span {
	font-size: 15px;
	font-weight: 600;
	color: var(--senova-dark);
}

/* Vidéo */
.senova-fiche-video {
	position: relative;
	overflow: hidden;
	border-radius: var(--senova-radius);
	box-shadow: var(--senova-box-shadow);
}

.senova-fiche-video iframe,
.senova-fiche-video embed,
.senova-fiche-video object {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

/* Galerie : carrousel horizontal */
.senova-fiche-galerie-carrousel {
	position: relative;
}

.senova-fiche-galerie {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 20px 4px 8px;
	/* La navigation se fait aux points : la barre native est masquée, le
	   défilement tactile et la molette restent actifs. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.senova-fiche-galerie::-webkit-scrollbar {
	display: none;
}

/* Pagination à points */
.senova-galerie-points {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.senova-galerie-point {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--senova-grey-border);
	cursor: pointer;
	transition: background 0.2s ease, width 0.25s ease;
}

.senova-galerie-point:hover {
	background: var(--senova-grey-text);
}

/* Le point courant s'allonge en pilule plutôt que de seulement changer de
   couleur : le repère reste lisible même en vision réduite. */
.senova-galerie-point.is-active {
	width: 22px;
	border-radius: 43px;
	background: var(--senova-blue);
}

/* Cales de centrage : sans elles, la première et la dernière photo ne
   pourraient jamais atteindre le centre du cadre, faute de matière à faire
   défiler avant et après elles. */
.senova-fiche-galerie::before,
.senova-fiche-galerie::after {
	content: "";
	flex: 0 0 calc( ( 100% - 32px ) / 3 );
	pointer-events: none;
}

/* Trois vignettes visibles au maximum : chacune prend le tiers de la largeur,
   déduction faite des deux gouttières. La photo courante est mise en avant,
   ses voisines sont réduites. */
.senova-fiche-galerie-item {
	display: block;
	position: relative;
	flex: 0 0 calc( ( 100% - 32px ) / 3 );
	scroll-snap-align: center;
	border-radius: var(--senova-radius-sm);
	overflow: hidden;
	box-shadow: var(--senova-box-shadow);
	cursor: pointer;
	/* Réduction des périphériques. L'origine basse aligne les vignettes par
	   le bas plutôt que par leur centre. */
	transform: scale(0.86);
	transform-origin: center bottom;
	opacity: 0.72;
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.senova-fiche-galerie-item img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

/* Photo courante : taille pleine, au-dessus de ses voisines. */
.senova-fiche-galerie-item.is-current {
	transform: scale(1);
	opacity: 1;
	z-index: 2;
	box-shadow: 0 10px 28px rgba(51, 51, 51, 0.18);
}

/* Le survol agrandit la bulle, sans jamais dépasser la photo courante. */
.senova-fiche-galerie-item:hover {
	transform: scale(0.9);
	opacity: 1;
	z-index: 1;
}

.senova-fiche-galerie-item.is-current:hover {
	transform: scale(1.04);
}

/* Flèches de navigation : révélées au survol du carrousel. Le bouton reste
   un disque de 40px, mais sa zone cliquable couvre toute la hauteur du
   carrousel via le pseudo-élément ci-dessous. */
.senova-galerie-nav {
	position: absolute;
	top: 20px;
	bottom: 8px;
	z-index: 5;
	width: 40px;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Le disque visible : centré verticalement dans la hitbox. */
.senova-galerie-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	background: var(--senova-blue);
	box-shadow: var(--senova-box-shadow);
	transition: background 0.2s ease;
}

/* Le chevron repasse au-dessus du disque. */
.senova-galerie-nav svg {
	position: relative;
	z-index: 1;
}

.senova-fiche-galerie-carrousel:hover .senova-galerie-nav,
.senova-galerie-nav:focus-visible {
	opacity: 1;
	visibility: visible;
}

.senova-galerie-nav:hover::before {
	background: var(--senova-blue-dark);
}

/* Masquée lorsqu'il n'y a plus rien à faire défiler de ce côté. */
.senova-galerie-nav[disabled] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.senova-galerie-prev {
	left: 6px;
}

.senova-galerie-next {
	right: 6px;
}

@media ( max-width: 900px ) {
	.senova-fiche-galerie-item {
		flex-basis: calc( ( 100% - 16px ) / 2 );
	}

	/* Cales recalculées sur la largeur de vignette de ce palier. */
	.senova-fiche-galerie::before,
	.senova-fiche-galerie::after {
		flex-basis: calc( ( 100% - 16px ) / 4 );
	}
}

@media ( max-width: 600px ) {
	.senova-fiche-galerie-item {
		flex-basis: 78%;
	}

	.senova-fiche-galerie-item img {
		height: 190px;
	}

	.senova-fiche-galerie::before,
	.senova-fiche-galerie::after {
		flex-basis: 11%;
	}

	.senova-galerie-nav {
		display: none;
	}
}

/* Lightbox (ouverture de la galerie photos) */
.senova-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 100000;
}

.senova-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.senova-lightbox-img {
	max-width: 88vw;
	max-height: 84vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.senova-lightbox-close,
.senova-lightbox-prev,
.senova-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.senova-lightbox-close:hover,
.senova-lightbox-prev:hover,
.senova-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.senova-lightbox-close {
	top: 20px;
	right: 20px;
}

.senova-lightbox-prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.senova-lightbox-next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.senova-lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: rgba(255, 255, 255, 0.12);
	padding: 6px 14px;
	border-radius: 20px;
}

.senova-fiche-libre {
	line-height: 1.6;
}

.senova-fiche-libre p {
	margin: 0 0 1em;
}

/* Labels visés */
.senova-fiche-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	align-items: center;
}

.senova-fiche-labels-texte {
	justify-content: flex-start;
	gap: 10px;
}

.senova-fiche-label-logo {
	max-width: 120px;
	max-height: 76px;
	width: auto;
	height: auto;
	object-fit: contain;
	background: var(--senova-light-bg);
	padding: 10px;
	border-radius: var(--senova-radius-sm);
	box-shadow: var(--senova-box-shadow);
}

/* Tableau affiché directement (sans volet déroulant) */
/* ===== Blocs dépliables (tableaux d'entreprises) =====
   Reposent sur <details>/<summary> : pliage natif, accessible au clavier et
   contenu lisible même sans JavaScript. */
.senova-fiche-depliant > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	padding: 2px 0;
}

/* Masque la flèche que les navigateurs ajoutent d'office. */
.senova-fiche-depliant > summary::-webkit-details-marker {
	display: none;
}

.senova-fiche-depliant > summary::marker {
	content: "";
}

.senova-fiche-depliant > summary h3 {
	margin: 0;
}

.senova-fiche-depliant > summary:hover h3 {
	color: var(--senova-blue);
}

.senova-fiche-depliant > summary:focus-visible {
	outline: 2px solid var(--senova-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Signe + / − tracé en CSS, sans dépendance à une police d'icônes. */
.senova-fiche-depliant-icone {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--senova-blue);
}

.senova-fiche-depliant-icone::before,
.senova-fiche-depliant-icone::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.senova-fiche-depliant-icone::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Ouvert : la barre verticale disparaît, le "+" devient "−". */
.senova-fiche-depliant[open] .senova-fiche-depliant-icone::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.senova-fiche-depliant[open] > summary {
	margin-bottom: 16px;
}

.senova-fiche-table-wrap {
	border: 1px solid var(--senova-grey-border);
	border-radius: var(--senova-radius-sm);
	overflow: hidden;
	background: #fff;
}

/* Tableaux entreprises */
.senova-fiche-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.senova-fiche-table th,
.senova-fiche-table td {
	padding: 12px 18px;
	text-align: left;
	border-bottom: 1px solid var(--senova-grey-border);
}

.senova-fiche-table th {
	background: var(--senova-light-bg);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--senova-grey-text);
}

.senova-fiche-table tbody tr:last-child td {
	border-bottom: none;
}

.senova-fiche-table tbody tr:hover {
	background: #fafbfc;
}

/* ===== Projets à proximité ===== */
.senova-projets-proximite {
	margin-top: 44px;
	padding-top: 36px;
	border-top: 1px solid var(--senova-grey-border);
}

.senova-projets-proximite h3 {
	font-size: 26px;
	font-weight: 700;
	color: var(--senova-dark);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 20px;
	text-align: center;
}

.senova-projets-proximite-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 20px;
}

.senova-projet-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--senova-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	box-shadow: var(--senova-box-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.senova-projet-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(51, 51, 51, 0.14);
}

.senova-projet-card-media {
	position: relative;
	overflow: hidden;
}

.senova-projet-card-media img,
.senova-projet-card-media .senova-thumb-placeholder {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
	background: var(--senova-tint-bg);
	transition: transform 0.3s ease;
}

.senova-projet-card:hover .senova-projet-card-media img {
	transform: scale(1.05);
}

.senova-projet-card-distance {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--senova-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--senova-pill-radius);
	backdrop-filter: blur(2px);
}

.senova-projet-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.senova-projet-card-body strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--senova-dark);
}

.senova-projet-card-body span {
	font-size: 14px;
	color: var(--senova-grey-text);
}

.senova-projet-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--senova-blue);
}

/* Lien de retour à la carte, en bas de fiche */
.senova-fiche-back-bottom {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {
	.senova-fiche-wrapper {
		padding: 24px 14px 46px;
		font-size: 16px;
	}

	/* Sur mobile la largeur disponible est déjà étroite : le cadre reprend
	   toute la colonne, la réduction à 80% du desktop le rendrait minuscule. */
	.senova-fiche-hero-media {
		width: 100%;
	}

	.senova-ba-poignee::before {
		width: 38px;
		height: 38px;
	}

	.senova-ba-etiquette {
		bottom: 10px;
		padding: 5px 12px;
		font-size: 11px;
	}

	.senova-ba.is-actif .senova-ba-etiquette-avant {
		left: 10px;
	}

	.senova-ba-etiquette-apres {
		right: 10px;
	}

	.senova-fiche-hero-body {
		align-items: flex-start;
	}

	.senova-fiche-hero-heading h1 {
		font-size: 28px;
	}

	/* Largeur calée sur le libellé plutôt que sur la colonne : le bouton reste
	   un bouton, là où une pleine largeur le fait lire comme une barre. */
	.senova-fiche-contact-btn {
		width: auto;
		justify-content: center;
	}

	.senova-fiche-main-infos {
		grid-template-columns: 1fr;
	}

	.senova-fiche-infos-grid {
		grid-template-columns: 1fr;
	}

	.senova-fiche-toutes-infos {
		padding: 24px 18px;
	}

	.senova-fiche-photo img {
		height: 200px;
	}

	.senova-fiche-acteur {
		flex: 1 1 140px;
		max-width: 100%;
	}

	.senova-fiche-table th,
	.senova-fiche-table td {
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ===== Mobile : mise à l'échelle de la réglette DPE =====
   La réglette a des largeurs fixes : la colonne des barres se cale sur la
   classe G (282px, calculée dans render_fiche_content()) et la colonne des
   repères fait 100px, soit 382px au total. Elle débordait et provoquait un
   défilement horizontal de toute la page.

   Le seuil suit le passage mobile de la fiche (768px, où .senova-fiche-wrapper
   resserre son padding et où les grilles passent en une colonne) : sous cette
   largeur, les paddings imbriqués retirent 112px à la fenêtre — wrapper 2×14,
   .senova-fiche-toutes-infos 2×18 et .senova-fiche-info-bloc 2×24. La réglette
   déborde donc dès 494px de fenêtre, et non à 420px. On la met à l'échelle sur
   toute la plage mobile plutôt qu'à partir d'un seuil intermédiaire, ce qui
   laissait une bande de largeurs non couverte.

   Plutôt que de toucher au calcul PHP — l'escalier des barres doit rester
   proportionnel — on réduit les deux colonnes. */
@media (max-width: 768px) {
	.senova-dpe-reglette {
		--senova-dpe-col: 100%;
		/* clamp() plutôt qu'une valeur fixe : la colonne des repères garde ses
		   100px tant qu'il y a la place, et se resserre jusqu'à 84px sur les
		   écrans les plus étroits, où chaque pixel compte pour les barres. */
		--senova-dpe-col2: clamp(84px, 22vw, 100px);
		/* minmax(0, …) autorise la colonne à passer sous la largeur de son
		   contenu : sans cela, les barres en largeur fixe la maintiendraient
		   à 282px malgré le 100%. */
		grid-template-columns: minmax(0, 1fr) var(--senova-dpe-col2);
	}

	/* Les barres suivent la colonne au lieu de leur largeur inline. Le
	   flex-shrink: 0 de la règle de base les empêcherait de rétrécir, et un
	   max-width seul ne suffirait donc pas. Le ratio de l'escalier est
	   préservé : chaque barre garde sa largeur relative via le pourcentage
	   calculé sur la largeur inline (100px pour A … 282px pour G). */
	.senova-dpe-ligne {
		max-width: 100%;
	}

	.senova-dpe-barre {
		width: calc(var(--senova-dpe-largeur) / 282 * 100%);
		max-width: 100%;
		flex-shrink: 1;
		/* Le padding droit de 26px réserve la pointe du chevron : resserré
		   ici pour ne pas manger le libellé sur une barre devenue étroite. */
		padding-right: 20px;
	}

	/* Le trait pointillé part de la pointe du chevron : il doit suivre la même
	   mise à l'échelle, sans quoi il démarrerait dans le vide. */
	.senova-dpe-ligne.is-active::before {
		left: calc((var(--senova-dpe-largeur) / 282 * 100%) + 12px);
		right: var(--senova-dpe-col2);
	}
}