/*
 * Brique onglets : structure seule, le pilote habille dans le CSS de sa section.
 * Sans JS : chaque panneau sous son titre. Avec JS (.is-actif) : la liste d'onglets, un panneau visible.
 */

.dqb-onglets__panneau + .dqb-onglets__panneau {
	margin-block-start: var(--espace-6);
}

.dqb-onglets.is-actif .dqb-onglets__panneau + .dqb-onglets__panneau {
	margin-block-start: 0;
}

/* Défile si les onglets dépassent ; position: relative pour que rien de masqué n'élargisse la page. */
.dqb-onglets__liste {
	position: relative;
	display: flex;
	gap: var(--espace-2);
	margin-block-end: var(--espace-5);
	overflow-x: auto;
	border-block-end: 1px solid var(--couleur-trait);
}

.dqb-onglets__onglet {
	flex-shrink: 0;
	min-height: 44px;
	padding: var(--espace-2) var(--espace-4);
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	color: var(--couleur-texte-doux);
	font: inherit;
	font-weight: var(--graisse-forte);
	cursor: pointer;

	&[aria-selected="true"] {
		border-block-end-color: var(--couleur-primaire);
		color: var(--couleur-primaire);
	}

	/* La liste défile : un contour dessiné à l'extérieur serait rogné, il passe à l'intérieur. */
	&:focus-visible {
		outline-offset: calc(-1 * var(--focus-epaisseur));
	}
}

.dqb-onglets__panneau[hidden],
.dqb-onglets__titre[hidden] {
	display: none;
}