/* =====================================================================
   Onglets de catégories (actualités / archives) — défilement horizontal

   Feuille volontairement écrite en CSS simple, hors chaîne Tailwind :
   le build « assets/css/tailwind.css » n'est pas régénéré et ne contient
   ni overflow-x-auto, ni flex-nowrap, ni whitespace-nowrap, ni
   sm:flex-wrap. Aucune classe utilitaire nouvelle n'aurait d'effet ici.

   Tout le contenu de cette feuille est enfermé sous 640px (le
   breakpoint Tailwind « sm ») : au-delà, la barre retrouve exactement
   le rendu d'origine (flex-wrap hérité de Tailwind), sans défilement.
   ===================================================================== */


/* ===== Sous 640px — la barre défile d'un seul tenant ===== */

@media (max-width: 639.98px) {

	.cnf-tabs {

		/* Les onglets ne se replient plus : une seule ligne. */
		flex-wrap: nowrap;

		/*
		 * Le défilement est confiné à la barre : jamais au <body>.
		 * « min-width: 0 » + « max-width: 100% » empêchent la barre de
		 * pousser la largeur de son conteneur parent — c'est ce qui
		 * provoquerait un débordement horizontal de la page entière.
		 */
		overflow-x: auto;
		overflow-y: hidden;
		min-width: 0;
		max-width: 100%;

		/* Le balayage ne se propage ni à la page, ni à l'historique. */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;

		/*
		 * Marge respectée par le navigateur quand IL amène un élément
		 * dans le champ visible — notamment un onglet qui reçoit le
		 * focus clavier. Elle vaut la largeur du repère de défilement
		 * ci-dessous : un onglet focalisé ne se retrouve donc jamais
		 * sous le dégradé.
		 */
		scroll-padding-inline: 1.5rem;

		/*
		 * Barre de défilement masquée visuellement, défilement toujours
		 * actif (tactile, molette, clavier).
		 */
		scrollbar-width: none;
		-ms-overflow-style: none;

		/*
		 * Repère « ça continue au-delà du bord ».
		 *
		 * Quatre dégradés superposés : deux voiles couleur fond fixés au
		 * CONTENU (background-attachment: local) recouvrent deux ombres
		 * fixées au CADRE (scroll). Tant qu'il reste du contenu d'un
		 * côté, le voile est parti avec le défilement et l'ombre reste
		 * visible ; arrivé en butée, le voile revient la masquer. Le
		 * repère s'affiche donc exactement quand il est vrai, sans une
		 * ligne de JavaScript ni élément de balisage supplémentaire.
		 *
		 * Le fond du thème est blanc : aucune règle du thème ne pose de
		 * background sur html ou body.
		 */
		background-color: #fff;
		background-image:
			linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(17, 24, 39, 0.13), rgba(17, 24, 39, 0)),
			linear-gradient(to left, rgba(17, 24, 39, 0.13), rgba(17, 24, 39, 0));
		background-repeat: no-repeat;
		background-position: left center, right center, left center, right center;
		background-size: 2rem 100%, 2rem 100%, 1.5rem 100%, 1.5rem 100%;
		background-attachment: local, local, scroll, scroll;
	}

	.cnf-tabs::-webkit-scrollbar {
		display: none;
	}

	.cnf-tabs__link {

		/* Largeur naturelle : ni compression, ni passage à la ligne. */
		flex: 0 0 auto;
		white-space: nowrap;
	}
}


/* ===== Mouvement réduit ===== */

/*
 * Le recentrage de l'onglet actif au chargement bascule en défilement
 * instantané côté JS (matchMedia sur cette même requête). On neutralise
 * ici tout lissage résiduel qui serait hérité d'une règle ancêtre.
 */
@media (prefers-reduced-motion: reduce) {

	.cnf-tabs {
		scroll-behavior: auto;
	}
}