/**
 * Section — Hero des pages catégorie.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px, frame « Service ») :
 *   forme       x 500, 1856 × 1078  (même courbe que l'accueil, autre boîte)
 *   filigrane   x −219, y 227, 744 × 744
 *   contenu     x 182
 *   suptitre    y 371   titre y 420   texte y 602   bouton y 691
 *   filet       y 1003 (1294 de large)
 */

.cat-hero {
	position: relative;
	background-color: var(--anidjar-fond);
	overflow-x: clip;
	overflow-y: visible;
	margin-bottom: 5em;

	/* Le hero doit contenir sa courbe, sinon elle descend sur la section de
	   contenu et le texte passe par-dessus l'image. Hauteur du décor :
	   96.6667vw × 1221/2102 = 56.15vw (il part de top: 0). */
	min-height: 56.15vw;
}

/* ---------------------------------------------------------------------------
 * Décor
 * ------------------------------------------------------------------------ */

/* Empilement : filet et filigrane derrière (0), image au-dessus (1) pour la
   recouvrir, texte tout en haut (2) pour rester lisible. */
.cat-hero__decor {
	position: absolute;
	top: 0;
	left: 26.0417vw; /* 500 / 1920 */
	z-index: 1;
	width: 96.6667vw; /* 1856 / 1920 */
	aspect-ratio: 2102 / 1221; /* la courbe garde ses proportions */
	pointer-events: none;
}

/* Filet du bas : aligné à gauche avec le texte, passe SOUS l'image. */
/* Dans le flux, juste sous le contenu : il ne doit PAS suivre le bas du hero,
   que le min-height allonge pour contenir la courbe. z-index 0 = il passe sous
   l'image du décor, comme avant. */
.cat-hero__line {
	display: block;
	position: relative;
	z-index: 0;
	margin-left: clamp(var(--anidjar-gouttiere), 9.4792vw, 182px); /* aligné au texte */
	margin-right: var(--anidjar-gouttiere);
	height: 1px;
	background-color: var(--anidjar-filet-fonce);
}

.cat-hero__decor-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cat-hero__watermark {
	position: absolute;
	top: 11.8229vw; /* 227 / 1920 */
	left: -11.4063vw; /* −219 / 1920 */
	z-index: 1;
	width: 38.75vw; /* 744 / 1920 */
	color: var(--anidjar-or);
	opacity: 0.1;
	pointer-events: none;
}

.cat-hero__watermark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Contenu
 * ------------------------------------------------------------------------ */

.cat-hero__inner {
	position: relative;
	z-index: 2; /* texte au-dessus du décor, pour rester lisible */
	box-sizing: border-box;
	padding-inline: clamp(var(--anidjar-gouttiere), 9.4792vw, 182px); /* 182 / 1920 */
	padding-block: clamp(3rem, 19.3229vw, 371px) clamp(2rem, 3.39vw, 65px);
}

/* Surtitre en <h1> : police et graisse redéclarées pour neutraliser la règle
   `h1, h2, h3` de style.css (police titre, graisse 700), qui changerait sinon
   son rendu. L'interligne est déjà fixé plus bas. */
.cat-hero__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	font-weight: var(--anidjar-graisse-texte);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.cat-hero__title {
	margin: 26px 0 0;
	max-width: 587px;
	font-size: var(--anidjar-fs-xl);

	/* 78 / 64 : la hauteur de ligne du titre dans la maquette. */
	line-height: 1.21875;
}

.cat-hero__lede {
	margin-top: 26px;
	max-width: 438px;
}

.cat-hero__lede p {
	margin: 0;
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

.cat-hero__lede p + p {
	margin-top: var(--anidjar-espace-sm);
}

.cat-hero__inner .btn {
	margin-top: var(--anidjar-espace-lg);
}

/* ---------------------------------------------------------------------------
 * Avis Google (shortcode Trustindex) — occupe la place des anciens chiffres clés.
 * ------------------------------------------------------------------------ */

.cat-hero__reviews {
	margin-top: 2em;
	max-width: 1294px;
}

.ti-widget.ti-goog .ti-widget-container {
		text-align: left!important;
	}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Lisibilité : sous 1400px, le titre et le chapô mordent sur la courbe (elle
 * remonte vers la gauche à mesure que la largeur diminue). On éclaircit alors
 * la photo, d'autant plus que l'écran est étroit.
 * ------------------------------------------------------------------------ */

@media (max-width: 1400px) {
	.cat-hero__decor-svg .anidjar-masked-veil {
		opacity: 0.7;
	}
}

@media (max-width: 1100px) {
	.cat-hero__decor-svg .anidjar-masked-veil {
		opacity: 1;
	}
}

@media (max-width: 900px) {
	/* Voile uniforme et franc : en pleine largeur le texte couvre toute la forme. */
	.cat-hero__decor-svg .anidjar-masked-veil {
		opacity: 0.8;
	}

	/* Pas de min-height ici : le voile ci-dessus rend le texte lisible même là où
	   la courbe déborde, donc inutile d'allonger le hero — cela ne faisait que
	   creuser un grand vide sous le contenu entre 600 et 900px. */
	.cat-hero {
		min-height: 0;
	}

	.cat-hero__decor {
		left: 20vw;
		width: 140vw;
	}

	.cat-hero__watermark {
		top: 8vw;
		left: -24vw;
		width: 80vw;
		opacity: 0.07;
	}

	.cat-hero__inner {
		padding-block: var(--anidjar-espace-3xl) var(--anidjar-espace-2xl);
	}

	.cat-hero__title,
	.cat-hero__lede {
		max-width: none;
	}
}