/*
Style « Slider » pour le bloc Requête (core/query), sans JavaScript.

Deux niveaux :

1. scroll-snap — fonctionne partout. Le lecteur fait défiler au doigt, à la
   molette ou au clavier, et les articles s'accrochent proprement.
2. Boutons et pastilles de pagination via ::scroll-button() et
   ::scroll-marker — spécification CSS Overflow 5, encore récente. Enfermés
   dans @supports : là où ce n'est pas géré, il reste le défilement du point 1.
*/

.wp-block-query.is-style-slider,
.wp-block-query.has-slider {
	--slide-width: clamp(15rem, 30vw, 22rem);
	--slider-gap: var(--wp--preset--spacing--40, 1.5rem);

	position: relative;

	/* Indispensable quand le slider est posé dans un groupe en rangée : un
	   élément flex a min-width:auto et refuse de rétrécir sous la largeur de
	   son contenu. Sans ça, la piste s'étale au lieu de défiler. */
	min-width: 0;
	max-width: 100%;
}

.wp-block-query.is-style-slider .wp-block-post-template,
.wp-block-query.has-slider .wp-block-post-template {
	min-width: 0;
}

/* Le bloc Requête impose sa grille et ses colonnes : la piste doit être une
   rangée défilante. */
.wp-block-query.is-style-slider .wp-block-post-template.is-layout-grid,
.wp-block-query.has-slider .wp-block-post-template.is-layout-grid {
	display: flex;
	grid-template-columns: none;
}

.wp-block-query.is-style-slider .wp-block-post-template,
.wp-block-query.has-slider .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--slider-gap);
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30, 1rem);
	list-style: none;

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.wp-block-query.is-style-slider .wp-block-post-template > li,
.wp-block-query.has-slider .wp-block-post-template > li {
	flex: 0 0 var(--slide-width);
	margin: 0;
	scroll-snap-align: start;
}

/* Le conteneur défilant doit rester atteignable au clavier. */
.wp-block-query.is-style-slider .wp-block-post-template:focus-visible,
.wp-block-query.has-slider .wp-block-post-template:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query.is-style-slider .wp-block-post-template,
	.wp-block-query.has-slider .wp-block-post-template,
	.wp-block-query.is-style-slider .wp-block-post-template,
	.wp-block-query.has-slider .wp-block-post-template {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------- Boutons de défilement (si gérés) */

@supports selector(::scroll-button(right)) {
	/* Posés à l'intérieur de la piste, pas en débord : un slider collé au bord
	   droit de la fenêtre y gagnerait sinon un défilement horizontal. */
	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(left),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(left),
	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(right),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(right) {
		position: absolute;
		top: 40%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid currentColor;
		border-radius: 50%;
		background-color: var(--wp--preset--color--snow);
		color: var(--wp--preset--color--ink);
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
	}

	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(left),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(left) {
		content: "\2039";
		left: 0;
	}

	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(right),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(right) {
		content: "\203A";
		right: 0;
	}

	/* Le navigateur désactive lui-même le bouton en bout de course. */
	.wp-block-query.is-style-slider
		.wp-block-post-template::scroll-button(*):disabled,
	.wp-block-query.has-slider
		.wp-block-post-template::scroll-button(*):disabled {
		opacity: 0.35;
		cursor: default;
	}
}

/* ------------------------------------------ Pastilles de position (si gérées) */

@supports selector(::scroll-marker) {
	.wp-block-query.is-style-slider .wp-block-post-template,
	.wp-block-query.has-slider .wp-block-post-template,
	.wp-block-query.is-style-slider .wp-block-post-template,
	.wp-block-query.has-slider .wp-block-post-template {
		scroll-marker-group: after;
	}

	.wp-block-query.is-style-slider .wp-block-post-template::scroll-marker-group,
	.wp-block-query.has-slider .wp-block-post-template::scroll-marker-group {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		padding-block-start: var(--wp--preset--spacing--30, 1rem);
	}

	.wp-block-query.is-style-slider .wp-block-post-template > li::scroll-marker,
	.wp-block-query.has-slider .wp-block-post-template > li::scroll-marker {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border: 1px solid var(--wp--preset--color--ink);
		border-radius: 50%;
		cursor: pointer;
	}

	.wp-block-query.is-style-slider
		.wp-block-post-template
		> li::scroll-marker:target-current,
	.wp-block-query.has-slider
		.wp-block-post-template
		> li::scroll-marker:target-current {
		background-color: var(--wp--preset--color--ink);
	}
}

/* ------------------------------------------------------- Glisser à la souris

   Ajouté par assets/js/slider.js. Sans JavaScript, le slider reste utilisable
   au doigt, à la molette et au clavier : ces règles ne font que signaler et
   accompagner le drag. */

.wp-block-query.is-style-slider .wp-block-post-template,
.wp-block-query.has-slider .wp-block-post-template {
	cursor: grab;
}

.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Pendant le glissement, les liens ne doivent pas réagir au relâchement. */
.is-dragging a,
.is-dragging img {
	pointer-events: none;
}

/* --------------------------------------------------- Défilement automatique

   Actif avec la classe additionnelle « has-autoplay » sur le bloc Requête.
   Le bouton est créé par assets/js/slider.js : sans JavaScript, il n'y a pas
   de défilement automatique, donc pas besoin de pouvoir l'arrêter. */

.wp-block-query.is-style-slider,
.wp-block-query.has-slider.has-autoplay {
	position: relative;
}

.slider-autoplay-toggle {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: var(--wp--preset--color--snow);
	color: var(--wp--preset--color--ink);
	font-size: 0.7rem;
	line-height: 1;
	cursor: pointer;
}

.slider-autoplay-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 2px;
}

@media (max-width: 768px) {

	@supports selector(::scroll-button(right)) {
	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(left),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(left),
	.wp-block-query.is-style-slider .wp-block-post-template::scroll-button(right),
	.wp-block-query.has-slider .wp-block-post-template::scroll-button(right) {
		display: none;}
												}
	
}

.Siider figure a::before{
content: none;}