/* =========================================================
   Style "Diaporama (Slide)" pour le bloc Galerie natif
   Classe générée automatiquement par WordPress : is-style-slide
   ========================================================= */

/* Conteneur externe fixe (ajouté en JS) : ne défile jamais.
   C'est lui qui sert de repère de positionnement pour les flèches. */
.blocgallerieslidewam-wrapper {
	position: relative;
}

.wp-block-gallery.is-style-slide {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 0;
	scrollbar-width: none; /* Firefox : masque la barre de défilement */
}

/* Masque la barre de défilement (Chrome, Safari, Edge) */
.wp-block-gallery.is-style-slide::-webkit-scrollbar {
	display: none;
}

/* Chaque image occupe toute la largeur du conteneur = un slide */
.wp-block-gallery.is-style-slide .wp-block-image {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-gallery.is-style-slide .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Légendes éventuelles */
.wp-block-gallery.is-style-slide .wp-block-image figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.75em 1em;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/* Clones utilisés pour la boucle infinie : identiques visuellement,
   mais non interactifs (déjà masqués via aria-hidden + inert en JS) */
.blocgallerieslidewam-clone {
	pointer-events: none;
}

/* =========================================================
   Boutons de navigation (ajoutés en JS sur le wrapper fixe,
   donc ils ne défilent jamais avec les images)
   ========================================================= */

.blocgallerieslidewam-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: color-mix( in srgb, var( --blocgallerieslidewam-bg-color, #000 ) 75%, transparent );
	color: var( --blocgallerieslidewam-fg-color, #fff );
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.blocgallerieslidewam-nav:hover,
.blocgallerieslidewam-nav:focus {
	background: var( --blocgallerieslidewam-bg-color, #000 );
	outline: none;
}

.blocgallerieslidewam-prev {
	left: 12px;
}

.blocgallerieslidewam-next {
	right: 12px;
}

/* =========================================================
   Puces de navigation (bullets) — optionnelles, activables
   depuis Réglages > Galerie Slide WAM
   ========================================================= */

.blocgallerieslidewam-bullets {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 8px;
	padding: 6px 10px;
	background: color-mix( in srgb, var( --blocgallerieslidewam-bg-color, #000 ) 30%, transparent );
	border-radius: 999px;
}

.blocgallerieslidewam-bullet {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var( --blocgallerieslidewam-fg-color, #fff );
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.blocgallerieslidewam-bullet:hover,
.blocgallerieslidewam-bullet:focus {
	opacity: 0.8;
	outline: none;
}

.blocgallerieslidewam-bullet.is-active {
	opacity: 1;
	transform: scale( 1.25 );
}

/* =========================================================
   Compteur de slides [n/total] — optionnel, activable
   depuis Réglages > Galerie Slide WAM
   ========================================================= */

.blocgallerieslidewam-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: color-mix( in srgb, var( --blocgallerieslidewam-bg-color, #000 ) 85%, transparent );
	color: var( --blocgallerieslidewam-fg-color, #fff );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	padding: 4px 10px;
	border-radius: 999px;
}