/**
 * Section — Présentation en éditeur riche (pages catégorie, section 2).
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   titre       x 498, y 1162, Cormorant Bold 48
 *   contenu     x 498, largeur 1030, Jost 24 / interligne 1.8
 *   filigrane   x 1232, y 1302, 506 × 506
 *
 * Le hero se termine au filet, à y 1004 : le retrait haut vaut donc 158.
 */

.cat-content {
	position: relative;
	background-color: var(--anidjar-fond);
	padding-block: clamp(3rem, 8.2292vw, 158px) clamp(3rem, 12.2917vw, 236px);
	overflow-x: clip;
}

.cat-content__watermark {
	position: absolute;
	bottom: 0; /* 1302 − 1004, ramené à /1920 */
	left: 75vw; /* 1232 / 1920 */
	z-index: 0;
	width: 25vw; /* 506 / 1920 */
	color: var(--anidjar-or);
	opacity: 0.1;
	pointer-events: none;
}

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

.cat-content__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;

	/* Colonne de lecture de 1030 (largeur de la maquette), centrée. L'ancien
	   retrait de 498 à gauche la calait à droite du centre ; combiné au centrage
	   du bloc, le texte partait beaucoup trop à droite. */
	max-width: calc(1030px + 2 * var(--anidjar-gouttiere));
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
}

.cat-content__title {
	margin: 0 0 26px;
	font-size: clamp(2rem, 2.5vw, 3rem); /* 48px */
	line-height: normal;
}

/* ---------------------------------------------------------------------------
 * Contenu libre — styles appliqués à ce que produit l'éditeur
 * ------------------------------------------------------------------------ */

.cat-content__body {
	font-size: clamp(1.125rem, 1.25vw, 1.5rem); /* 24px */
	line-height: var(--anidjar-interligne-texte);
}

.cat-content__body > :first-child {
	margin-top: 0;
}

.cat-content__body > :last-child {
	margin-bottom: 0;
}

.cat-content__body p {
	margin: 0 0 26px;
}

.cat-content__body h2,
.cat-content__body h3,
.cat-content__body h4 {
	margin: 48px 0 26px;
	font-family: var(--anidjar-police-titre);
	font-weight: var(--anidjar-graisse-titre);
	line-height: var(--anidjar-interligne-titre);
}

.cat-content__body h2 {
	font-size: clamp(1.75rem, 2.0834vw, 2.5rem); /* 40px */
}

.cat-content__body h3 {
	font-size: 1.75rem; /* 28px */
}

.cat-content__body h4 {
	font-size: 1.5rem; /* 24px */
}

.cat-content__body ul,
.cat-content__body ol {
	margin: 0 0 26px;
	padding-left: 1.4em;
}

.cat-content__body li {
	margin-bottom: 0.5em;
}

.cat-content__body ul {
	list-style: none;
	padding-left: 0;
}

.cat-content__body ul li {
	position: relative;
	padding-left: 1.4em;
}

.cat-content__body ul li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.2em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--anidjar-or);
}

.cat-content__body a {
	color: var(--anidjar-texte-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cat-content__body a:hover {
	color: var(--anidjar-brun);
}

.cat-content__body strong {
	font-weight: var(--anidjar-graisse-titre);
}

.cat-content__body blockquote {
	margin: 40px 0;
	padding-left: 26px;
	border-left: 2px solid var(--anidjar-or);
	font-family: var(--anidjar-police-titre);
	font-size: 1.25em;
	font-style: italic;
}

.cat-content__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--anidjar-rayon-carte);
}

.cat-content__body figure {
	margin: 40px 0;
}

.cat-content__body figcaption {
	margin-top: var(--anidjar-espace-2xs);
	font-size: var(--anidjar-fs-xs);
	opacity: 0.7;
}

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

@media (max-width: 900px) {
	.cat-content {
		padding-block: var(--anidjar-espace-2xl);
	}

	.cat-content__watermark {
		top: 4vw;
		left: 45vw;
		width: 70vw;
		opacity: 0.06;
	}

	.cat-content__inner {
		padding-inline: var(--anidjar-gouttiere);
	}
}