/*
 * Bloc « onglets ». Section pleine largeur, contenu contraint. Barre d'onglets (pilules) + panneaux.
 * Progressive enhancement : sans .is-enhanced (pas de JS), la barre est masquee et TOUS les panneaux sont
 * empiles et visibles (chacun avec son intitule). Avec .is-enhanced (JS), la barre s'affiche et les panneaux
 * sont empiles en GRILLE (seul l'actif visible) -> zero CLS + fondu.
 */

.mx-onglets {
	box-sizing: border-box;
	/* Retrait du block-gap WP entre sections (regle commune aux blocs de section, cf. bloc-contact) :
	   sans ca, une bande de 24px du fond de page apparaissait au-dessus du bloc (ex. sous le hero
	   de la page Innovation). */
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-onglets__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--45); /* 32 */
}

.mx-onglets__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

/* ---- Barre d'onglets (pilules, centrees, repli en plusieurs lignes si besoin) ---- */
.mx-onglets__tablist,
.mx-onglets__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20); /* 8 (cote Figma) */
}

/* Mode NAVIGATION : barre de liens (memes pilules .mx-onglets__tab), bande plus fine (nav inter-pages). */
.mx-onglets--nav {
	padding-block: var(--wp--preset--spacing--50); /* 40 (cote Figma, bande de nav) */
}

.mx-onglets__tab {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); /* 8 24 (cote Figma) */
	border: 1px solid var(--wp--preset--color--orange-dark);
	border-radius: var(--mx-radius-s); /* 4 */
	background-color: transparent;
	color: var(--wp--preset--color--grey-dark);
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700; /* CAP Bold (cote Figma) */
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mx-transition), border-color var(--mx-transition), color var(--mx-transition);
}

/* Onglet actif : fond orange-middle, sans contour (cote Figma). */
.mx-onglets__tab.is-active {
	background-color: var(--wp--preset--color--orange-middle);
	border-color: var(--wp--preset--color--orange-middle);
	color: var(--wp--preset--color--grey-dark);
}

.mx-onglets__tab:hover {
	background-color: var(--wp--preset--color--grey-ultralight);
}

.mx-onglets__tab.is-active:hover {
	background-color: var(--wp--preset--color--orange-middle); /* pas de survol sur l'actif */
}

.mx-onglets__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

/* ---- Panneaux : intitule interne + contenu (primitives de charte) ---- */
.mx-onglets__panel-titre {
	margin: 0 0 var(--wp--preset--spacing--30); /* 16 */
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 */
	line-height: 1;
}

.mx-onglets__panel-texte {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

.mx-onglets__panel-texte p {
	margin: 0 0 var(--wp--preset--spacing--30); /* 16 */
}

.mx-onglets__panel-texte p:last-child {
	margin-bottom: 0;
}

.mx-onglets__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30); /* 16 */
	margin-block-start: var(--wp--preset--spacing--40); /* 24 */
}

/* Espacement entre panneaux empiles SANS JS (progressive enhancement). */
.mx-onglets__panel + .mx-onglets__panel {
	margin-block-start: var(--wp--preset--spacing--50); /* 40 */
}

/* ---- SANS JS : barre masquee (les intitules internes suffisent), panneaux empiles visibles ---- */
.mx-onglets:not(.is-enhanced) .mx-onglets__tablist {
	display: none;
}

/* ---- Avec JS : mode onglets. Panneaux empiles en GRILLE (memes cellule) -> hauteur = plus grand panneau
   (zero CLS), seul l'actif visible (visibility -> hors arbre a11y), fondu via opacity. Intitule interne
   masque (l'onglet sert de label, lie par aria-labelledby). ---- */
.mx-onglets.is-enhanced .mx-onglets__panels {
	display: grid;
}

.mx-onglets.is-enhanced .mx-onglets__panel {
	grid-area: 1 / 1;
	margin-block-start: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.mx-onglets.is-enhanced .mx-onglets__panel.is-active {
	visibility: visible;
	opacity: 1;
}

.mx-onglets.is-enhanced .mx-onglets__panel-label {
	display: none; /* l'onglet (bouton) sert de label, via aria-labelledby */
}

/* ---- Responsive ---- */
@media (max-width: 680px) {
	.mx-onglets__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}

	/* Onglets empiles les uns sous les autres, pleine largeur, plus hauts : cibles tactiles confortables.
	   La hauteur passe de ~32 a ~64px (padding-block 8 -> 24, soit ~+40px), bien au-dela des 44px requis. */
	.mx-onglets__tablist,
	.mx-onglets__nav {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.mx-onglets__tab {
		box-sizing: border-box; /* sinon width:100% + padding + bordure debordent */
		width: 100%;
		padding-block: var(--wp--preset--spacing--40); /* 24 (etait 8) : onglet nettement plus haut */
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-onglets.is-enhanced .mx-onglets__panel {
		transition: none; /* bascule instantanee */
	}
}