/*
 * Sélecteur d'onglets — Figma 24725:3981.
 * Colonnes 480px et 664px séparées de 120px (total 1264px).
 */

.igc-onglets {
	--igc-onglets-gouttiere: 120px;

	display: grid;

	/* Les pistes gardent le rapport 480/664 de la maquette sans être rigides :
	   à 1264px de contenu elles valent exactement 480px et 664px, en dessous
	   elles se réduisent ensemble au lieu de pousser une barre de défilement
	   horizontale sur toute la page. */
	grid-template-columns: minmax(0, 480fr) minmax(0, 664fr);
	gap: var(--igc-onglets-gouttiere);
	align-items: start;
}

/* 120px séparent l'introduction de la liste d'onglets — et rien d'autre.
   Les écarts internes de l'introduction valent 32px (Figma 24567:1832). */
.igc-onglets__colonne--intro {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 120px;
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--110);
}

.igc-onglets__entete {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.igc-onglets__entete > * {
	margin: 0;
}

.igc-onglets__colonne--panneaux {
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--110);
}

/* Chapô de la colonne de gauche : 391px au Figma (24567:1836) */
.igc-onglets__intro {
	max-width: 392px;
}

/* --- Liste d'onglets (Figma 24567:1837, largeur 464px) --- */

.igc-onglets__liste {
	width: 464px;
	max-width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
}

/* Le sommaire du mode empilement est une liste de liens : on lui retire ses
   puces et ses marges pour qu'il se présente comme la liste d'onglets. */
.igc-onglets__entrees {
	margin: 0;
	padding: 0;
	list-style: none;
}

.igc-onglets__entree {
	margin: 0;
}

.igc-onglets__onglet {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 16px 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--beige-20);
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-18);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;

	/* Onglet inactif : 40 % d'opacité, sans pastille (Figma 24567:1842). */
	opacity: 0.4;
	transition: opacity 150ms ease;
}

.igc-onglets__onglet[aria-selected="true"],
.igc-onglets__onglet[aria-current="true"] {
	opacity: 1;
}

.igc-onglets__onglet:hover {
	opacity: 0.7;
}

.igc-onglets__onglet[aria-selected="true"]:hover,
.igc-onglets__onglet[aria-current="true"]:hover {
	opacity: 1;
}

.igc-onglets__onglet:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
}

/* La pastille n'apparaît que sur l'onglet actif : le libellé se décale
   alors de 24px, exactement comme dans la maquette. */
.igc-onglets__puce {
	display: none;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}

.igc-onglets__onglet[aria-selected="true"] .igc-onglets__puce,
.igc-onglets__onglet[aria-current="true"] .igc-onglets__puce {
	display: block;
}

/* --- Mode empilement ---------------------------------------------------
   La colonne de gauche reste fixe pendant que les cartes défilent et se
   posent les unes sur les autres.

   Le pas d'empilement vaut 88px : la pastille numérotée d'une carte mesure
   64px et se pose à 16px du haut, il faut donc 80px pour la laisser entière,
   plus 8px d'air. C'est la seule valeur à régler si la pastille change de
   taille. */

/* L'air haut et bas de la section vient du bloc lui-même : les colonnes n'en
   portent plus, pour que leurs deux premiers éléments démarrent sur la même
   ligne. */
.igc-onglets--empilement {
	--igc-empilement-haut: 96px;
	--igc-empilement-pas: 88px;
	--igc-empilement-maintien: 240px;

	/* Au-delà de trois crans, la pile cesse de descendre : sans ce plafond,
	   une section à six cartes pousserait la dernière hors de l'écran
	   (96 + 5 x 88 + 453 = 989px, pour une fenêtre de 900). Les cartes les
	   plus profondes se superposent alors exactement. */
	--igc-empilement-profondeur: 3;

	align-items: stretch;
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--110);
}

/* Les deux colonnes démarrent à la même ligne : aucun rembourrage haut, ni
   au repos ni une fois la colonne épinglée. L'air autour de la section vient
   de la section elle-même. */
.igc-onglets--empilement .igc-onglets__colonne--intro {
	position: sticky;
	top: var(--igc-empilement-haut, 96px);
	align-self: start;
	justify-content: flex-start;
	gap: 48px;
	padding-block: 0;
}

.igc-onglets--empilement .igc-onglets__colonne--panneaux {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 0;
}

/* Les boutons ferment la colonne de gauche : ils restent donc visibles
   pendant tout le défilement de la pile, au lieu d'attendre sous elle.

   Ils se tiennent côte à côte tant que leur largeur naturelle rentre dans la
   colonne plus la gouttière (480 + 120 = 600px) : au-delà de la colonne, ils
   n'empiètent que sur le vide qui la sépare des cartes. S'ils ne tiennent
   même pas là, le retour à la ligne reprend la main. */
.igc-onglets__pied {
	width: max-content;
	max-width: calc(100% + var(--igc-onglets-gouttiere, 120px));
}

.igc-onglets__pied > * {
	margin-block: 0;
}

.igc-onglets__pied .wp-block-buttons {
	justify-content: flex-start;
	gap: 8px;
}

/* Une fois la dernière carte posée, la pile tient encore un instant à l'écran
   avant que la section ne s'en aille. Ce maintien vaut toujours la même chose,
   quel que soit le nombre de cartes : le rythme de dépose, lui, vient du pas
   naturel (hauteur de carte + gouttière − pas d'empilement), pas d'ici. Une
   course proportionnelle n'ajouterait que du défilement à vide en fin de
   section.

   C'est un bloc vide et non du rembourrage : une position collante s'arrête au
   bord de la boîte de contenu, rembourrage exclu. */
.igc-onglets--empilement .igc-onglets__course {
	flex: 0 0 auto;
	height: var(--igc-empilement-maintien, 240px);
}

/* `scroll-margin-top` reprend l'ancrage exact de la carte : un lien du
   sommaire tombe donc juste, même sans JavaScript. */
.igc-onglets--empilement .igc-onglets__panneau {
	position: sticky;
	top: calc(var(--igc-empilement-haut, 96px) + min(var(--igc-empilement-rang, 0), var(--igc-empilement-profondeur, 3)) * var(--igc-empilement-pas, 88px));
	scroll-margin-top: calc(var(--igc-empilement-haut, 96px) + min(var(--igc-empilement-rang, 0), var(--igc-empilement-profondeur, 3)) * var(--igc-empilement-pas, 88px));
}

/* Fenêtre courte : un cran de moins, sinon le bas de la carte du dessus
   passe sous le bord de l'écran. */
@media (max-height: 860px) {

	.igc-onglets--empilement {
		--igc-empilement-profondeur: 2;
	}
}

.igc-onglets--empilement .igc-onglets__panneau:focus {
	outline: none;
}

.igc-onglets--empilement .igc-onglets__panneau:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 4px;
}

/* Cartes à angles vifs dans la pile. */
.igc-onglets--empilement .igc-onglets__panneau .igc-panneau {
	border-radius: 0;
}

/* Les cartes recouvertes reculent d'un cran chacune : la deuxième carte
   sous le sommet est plus petite que la première, sinon la pile paraît
   plate. Aucune variation d'opacité. */
.igc-onglets--empilement .igc-onglets__panneau[data-recouvert] > * {
	transform: scale(calc(1 - var(--igc-profondeur, 1) * 0.04));
	transform-origin: center top;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-onglets--empilement .igc-onglets__panneau > * {
		transition:
			transform 480ms cubic-bezier(0.22, 0.61, 0.24, 1),
			opacity 480ms cubic-bezier(0.22, 0.61, 0.24, 1);
	}
}

/* L'entrée des panneaux ne concerne que le mode onglets : ici tout est déjà
   à l'écran. Sélecteur aligné sur celui de l'animation, sinon c'est elle qui
   l'emporte (elle est déclarée plus loin dans la feuille). */
.igc-onglets--empilement .igc-onglets__panneau:not([hidden]) {
	animation: none;
}

/* En mode empilement, la liste ne fait que nommer la carte en cours de
   lecture : ni curseur de main, ni survol, ni focus — il n'y a rien à
   actionner. */
.igc-onglets--empilement .igc-onglets__onglet {
	cursor: default;
}

.igc-onglets--empilement .igc-onglets__onglet:hover {
	opacity: 0.4;
}

.igc-onglets--empilement .igc-onglets__onglet[data-actif="true"]:hover {
	opacity: 1;
}

/* L'entrée en cours de lecture reprend l'apparence de l'onglet actif. */
.igc-onglets__onglet[data-actif="true"] {
	opacity: 1;
}

.igc-onglets__onglet[data-actif="true"] .igc-onglets__puce {
	display: block;
}

.igc-onglets__panneau:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 4px;
}

.igc-onglets__panneau[hidden] {
	display: none;
}

/* Le panneau qui apparaît monte de 8px en se révélant.
   `display` passant de none à block, l'animation se rejoue à chaque bascule. */
@media (prefers-reduced-motion: no-preference) {

	.igc-onglets__panneau:not([hidden]) {
		animation: igc-panneau-entree 420ms cubic-bezier(0.22, 0.61, 0.24, 1) both;
	}
}

@keyframes igc-panneau-entree {

	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Petits écrans ----------------------------------------------------
   L'empilement demande une colonne d'appui et un écran haut : sous 900px,
   il n'a plus ni l'un ni l'autre. Les cartes redeviennent une simple suite
   verticale, et le sommaire — qui n'est qu'un repère de lecture — disparaît
   puisque chaque carte porte déjà son titre.

   Le mode onglets, lui, garde sa liste : elle sert, elle, à choisir. */

@media (max-width: 900px) {

	.igc-onglets {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.igc-onglets__colonne--intro,
	.igc-onglets__colonne--panneaux {
		padding-block: 0;
	}

	.igc-onglets__entete {
		gap: 24px;
	}

	.igc-onglets__liste {
		width: 100%;
	}

	.igc-onglets--empilement .igc-onglets__colonne--intro {
		position: static;
		gap: 32px;
	}

	.igc-onglets--empilement .igc-onglets__liste {
		display: none;
	}

	.igc-onglets--empilement .igc-onglets__panneau {
		position: static;
	}

	/* Plus d'empilement, donc plus de recul des cartes couvertes. */
	.igc-onglets--empilement .igc-onglets__panneau[data-recouvert] > * {
		transform: none;
	}

	.igc-onglets--empilement .igc-onglets__course {
		display: none;
	}

	.igc-onglets__pied {
		width: auto;
		max-width: none;
	}
}