/* Page d'index des outils : onglets par famille (outils/lib/index-outils.php, assets/outils-onglets.js) ;
   même barre, en liens vers /outils/#famille, sur chaque page d'outil (gabarit.php, pd_barre_onglets).
   Sans JavaScript, la liste d'onglets reste cachée et tous les panneaux s'affichent l'un sous l'autre. */

.onglets { margin-top: 2.2em; }

/* Barre d'onglets : défile à l'horizontale au téléphone plutôt que de passer sur deux lignes */
.onglets-liste {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 0.3em;
	margin: 0 -0.2em 1.6em;
	padding: 0.5em 0.2em 0;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--blanc);
	border-bottom: 1px solid var(--trait);
}
.onglets-liste::-webkit-scrollbar { display: none; }
.onglet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 0.95em 0.75em;
	border-radius: 0.7em 0.7em 0 0;
	color: var(--gris);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 0.19em solid transparent;
	margin-bottom: -1px;
	transition: color .15s, background .15s, border-color .15s;
}
.onglet:hover { color: var(--encre); background: var(--brume); }
.onglet[aria-selected="true"], .onglet[aria-current] { color: var(--encre); border-bottom-color: var(--orange); }
.onglet:focus-visible { outline: 0.15em solid var(--orange-texte); outline-offset: -0.15em; }
.onglet-n { font-size: 0.72em; padding: 0.15em 0.5em; border-radius: 1em; background: var(--brume); color: var(--gris); }
.onglet[aria-selected="true"] .onglet-n, .onglet[aria-current] .onglet-n { background: var(--peche); color: var(--orange-texte); }

/* Panneaux */
.onglet-panneau { scroll-margin-top: 4em; }
.onglet-panneau + .onglet-panneau { margin-top: 3.5em; }
.onglet-panneau:focus { outline: 0; }
.onglet-titre {
	margin: 0 0 0.3em;
	padding-top: 0.8em;
	border-top: 0.19em solid var(--encre);
	font-family: var(--titre);
	font-size: 1.6em;
	letter-spacing: -0.01em;
}
.onglet-intro { margin: 0 0 1.4em; color: var(--gris); max-width: 42em; }
.onglet-analyse { margin-bottom: 0.4em; }

/* Avec JavaScript : un seul panneau visible, son titre porté par l'onglet */
.onglets.actifs .onglet-panneau { display: none; }
.onglets.actifs .onglet-panneau.courant { display: block; margin-top: 0; }
.onglets.actifs .onglet-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Groupes à l'intérieur d'un onglet */
.outils-index .outils-groupe { margin-top: 2em; }
.outils-groupe-titre {
	margin: 0 0 0.9em;
	font: 500 0.78em/1.3 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--orange-texte);
}
.outil-carte h4 { margin: 0 0 0.4em; font-family: var(--titre); font-size: 1.2em; line-height: 1.15; }

/* Ressource mise à part (OBNL) */
.outils-ressources { margin-top: 3.5em; }
.outils-ressources .outils-cartes { grid-template-columns: 1fr; }
.outil-carte.ressource { background: #f3f3f3; border-color: transparent; padding: 1.5em 1.6em 1.3em; }
.outil-carte.ressource h4 { font-size: 1.4em; }

@media (max-width: 40em) {
	.onglets-liste { margin-left: -1em; margin-right: -1em; padding-left: 0.6em; padding-right: 0.6em; }
	.onglet { padding: 0.65em 0.75em 0.7em; }
}

/* Barre sur les pages d'outils : même largeur que le contenu */
.onglets-barre { max-width: 60em; margin: 1.2em auto 0; padding: 0 1.1em; }
.onglets-barre .onglets-liste { margin-bottom: 0; }