/**
 * Section — Onglets (pages catégorie, section 3).
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   section       débute à y 1852 (le suptitre)
 *   fond          y 1996, 1920 × 1721, dégradé « OR » découpé par cat-blob.svg
 *   colonne       x 182, largeur 586 — onglets de 91 de haut, écart 26
 *   panneau       x 842, 869 × 882
 *   le contenu court de x 182 à x 1711, soit 1529 de large
 */

.cat-tabs {
	position: relative;
	background-color: var(--anidjar-fond);

	/* 3241 − 3123 : la section se termine là où la carte du CTA commence. */
	padding-bottom: clamp(2rem, 6.1458vw, 118px);

	/* Le fond déborde en bas, sous le CTA, mais jamais sur les côtés. */
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------------------------------------------------------------------------
 * Fond en dégradé, découpé par la forme
 * ------------------------------------------------------------------------ */

.cat-tabs__bg {
	position: absolute;
	top: 7.5vw; /* 144 / 1920 */
	right: 0;
	bottom: -24.7917vw; /* −476 / 1920 : le fond passe sous le CTA */
	left: 0;
	z-index: 0;
	background-image: var(--anidjar-degrade-or-fond);
	clip-path: url(#cat-blob);
	pointer-events: none;
}

/* Le <svg> qui ne porte que le clipPath ne doit rien occuper. */
.anidjar-clip-source {
	position: absolute;
	width: 0;
	height: 0;
}

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

	/* Colonne de contenu de 1529 (largeur de la maquette), centrée. L'ancien
	   retrait de 182 à gauche, sans contrepartie à droite, décalait tout le bloc
	   même une fois le conteneur centré. */
	max-width: calc(1529px + 2 * var(--anidjar-gouttiere));
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
}

/* Sur l'accueil, la section est reprise des pages catégorie (voir front-page.php)
   mais doit s'aligner sur la colonne du reste de la page : le hero et les
   services sont sur --anidjar-contenu-max, pas sur les 1529 px de la maquette
   catégorie. Sans cela, les bords du bloc débordent de ~120 px de chaque côté. */
.home .cat-tabs__inner {
	max-width: var(--anidjar-contenu-max);
	margin-top: 5em;
}

/* ---------------------------------------------------------------------------
 * En-tête
 * ------------------------------------------------------------------------ */

.cat-tabs__header {
	display: grid;
	grid-template-columns: 59.9738% 40.0262%; /* 917 / 612 sur 1529 */
	align-items: start;
}

.cat-tabs__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.cat-tabs__title {
	margin: 26px 0 0;
	max-width: 694px;
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

.cat-tabs__intro {
	margin-top: 54px; /* 1906 − 1852 */
	max-width: 612px;
}

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

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

/* ---------------------------------------------------------------------------
 * Colonne d'onglets + panneau
 * ------------------------------------------------------------------------ */

.cat-tabs__body {
	display: grid;
	grid-template-columns: 38.3257% 56.8345%; /* 586 / 869 sur 1529 */
	justify-content: space-between; /* l'écart de 74 se déduit */
	align-items: start;
	margin-top: 184px; /* 2241 − (1901 + 156) */
}

.cat-tabs__list {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.cat-tab {
	box-sizing: border-box;
	min-height: 91px;
	padding: var(--anidjar-espace-sm) var(--anidjar-espace-md);
	border: 1px solid var(--anidjar-bordure-carte);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte-opaque);
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
	letter-spacing: 0.2em; /* 3.2px sur 16px */
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--anidjar-transition), color var(--anidjar-transition),
		transform var(--anidjar-transition);

	/* l'interlettrage ajoute une espace après la dernière lettre */
	padding-right: calc(var(--anidjar-espace-md) - 0.2em);
}

/* Sans cela, hello-elementor peint le fond en framboise au survol. */
.cat-tab:hover,
.cat-tab:focus {
	background-color: var(--anidjar-creme);
	color: var(--anidjar-texte);
}

/* Survol : l'onglet inactif glisse et se soulève légèrement. */
.cat-tab:hover:not([aria-selected="true"]),
.cat-tab:focus-visible:not([aria-selected="true"]) {
	transform: translateX(8px);
}

.cat-tab[aria-selected="true"],
.cat-tab[aria-selected="true"]:hover,
.cat-tab[aria-selected="true"]:focus {
	background-color: var(--anidjar-fond-sombre);
	color: var(--anidjar-texte-inverse);
}

.cat-tab:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Panneau
 * ------------------------------------------------------------------------ */

.cat-panel {
	box-sizing: border-box;
	grid-column: 2;
	grid-row: 1;
	min-height: 882px;
	padding: 70px 118px;
	border: 1px solid var(--anidjar-bordure-carte);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte-opaque);
}

.cat-panel[hidden] {
	display: none;
}

.cat-panel:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

.cat-panel__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.cat-panel__title {
	margin: 26px 0 0;
	font-family: var(--anidjar-police-titre);
	font-size: 2rem; /* 32px */
	font-weight: var(--anidjar-graisse-titre);
	line-height: normal;
}

.cat-panel__text {
	margin-top: 26px;
}

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

.cat-panel__text p + p {
	margin-top: 26px;
}

/* ---------------------------------------------------------------------------
 * Liste d'éléments cochés
 * ------------------------------------------------------------------------ */

.cat-panel__points {
	margin: 21px 0 0;
	padding: 0;
	list-style: none;
}

.cat-panel__point {
	display: flex;
	align-items: center;
	gap: 19px; /* 1022 − (964 + 39) */
	padding-block: 15px;
	border-top: var(--anidjar-filet);
}

/* Survol : la pastille grossit (voir plus bas). Pas de fond ni de décalage :
   les points restent alignés sur la colonne de texte du panneau. */

.cat-panel__check {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 39px;
	height: 39px;
	margin-top: 10px; /* la pastille est 10px sous la 1re ligne de texte */
	border-radius: 50%;
	background-image: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-inverse);
	transition: transform var(--anidjar-transition);
}

.cat-panel__point:hover .cat-panel__check {
	transform: scale(1.12);
}

.cat-panel__check svg {
	width: 18px;
	height: 18px;
}

.cat-panel__point-text {
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

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

@media (max-width: 900px) {
	.cat-tabs__inner {
		padding-inline: var(--anidjar-gouttiere);
	}

	.cat-tabs__header,
	.cat-tabs__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Accordéon : le panneau s'ouvre juste sous SON bouton, au lieu d'arriver
	   après toute la pile d'onglets (il fallait alors scroller pour le voir).
	   `display: contents` fait passer les boutons dans la grille du body, et
	   --tab-order (posé côté PHP) les intercale avec les panneaux. */
	.cat-tabs__list {
		display: contents;
	}

	.cat-tab,
	.cat-panel {
		order: var(--tab-order, 0);
	}

	.cat-tabs__body {
		gap: var(--anidjar-espace-sm);
	}

	.cat-tabs__intro {
		margin-top: var(--anidjar-espace-md);
		max-width: none;
	}

	.cat-tabs__body {
		gap: var(--anidjar-espace-lg);
		margin-top: var(--anidjar-espace-2xl);
	}

	.cat-panel {
		grid-column: 1;
		grid-row: auto;
		min-height: 0;
		padding: var(--anidjar-espace-lg) var(--anidjar-espace-md);
	}

	.cat-tab {
		min-height: 64px;
	}

	.cat-tabs__bg {
		top: 0;
		bottom: -30vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cat-tab,
	.cat-panel__point,
	.cat-panel__check {
		transition: none;
	}

	.cat-tab:hover:not([aria-selected="true"]),
	.cat-tab:focus-visible:not([aria-selected="true"]) {
		transform: none;
	}
}