/**
 * Dahlia Bricks Kit — Barre de progression de slider
 *
 * Deux modes :
 *   scroll  le curseur se déplace, sa largeur dit combien de diapositives sont
 *           visibles sur le total (modèle barre de défilement) ;
 *   fill    le même bord droit, mais ancré à gauche : la barre se remplit.
 *
 * Le curseur est déplacé en `transform` (pas en `left`) : la transition est
 * prise en charge par le compositeur, donc fluide même sur mobile.
 *
 * Variables posées par les contrôles Bricks :
 *   --dbk-sprogress-height   épaisseur          (défaut 4px)
 *   --dbk-sprogress-gap      écart aux cartes   (défaut 2.4rem)
 *   --dbk-sprogress-speed    durée en ms        (défaut 400)
 *   --dbk-sprogress-easing   courbe             (défaut cubic-bezier douce)
 *
 * Variables calculées par le JS :
 *   --dbk-sprogress-size     largeur du curseur en %
 *   --dbk-sprogress-x        décalage du curseur en px
 */

.dbk-sprogress {
	position: relative;
	width: 100%;
	height: var(--dbk-sprogress-height, 4px);
	margin-top: var(--dbk-sprogress-gap, 2.4rem);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
	cursor: pointer;
	touch-action: none; /* pour que le glissé au doigt ne défile pas la page */
}

.dbk-sprogress[data-dbk-position='top'] {
	margin-top: 0;
	margin-bottom: var(--dbk-sprogress-gap, 2.4rem);
}

.dbk-sprogress[data-dbk-seek='false'] {
	cursor: default;
}

/* Bricks pose un display sur ses éléments : sans !important, [hidden] perdrait. */
.dbk-sprogress[hidden] {
	display: none !important;
}

.dbk-sprogress__thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--dbk-sprogress-size, 100%);
	border-radius: inherit;
	background: currentColor;
	transform: translateX(var(--dbk-sprogress-x, 0px));
	transition:
		transform calc(var(--dbk-sprogress-speed, 400) * 1ms) var(--dbk-sprogress-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		width calc(var(--dbk-sprogress-speed, 400) * 1ms) var(--dbk-sprogress-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.dbk-sprogress:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Pendant le glissé, le curseur colle au doigt : pas de latence. */
.dbk-sprogress[data-dbk-dragging='true'] .dbk-sprogress__thumb {
	transition: none;
}

/**
 * Barre posée au-dessus des diapositives : les flèches de Bricks sont en
 * position absolue par rapport à la racine du slider et passeraient dessous.
 * Une marge les décale sans écraser la valeur « top » réglée dans le builder.
 */
.dbk-sp-offset-arrows .splide__arrow {
	margin-top: calc(var(--dbk-sprogress-height, 4px) + var(--dbk-sprogress-gap, 2.4rem));
}

@media (prefers-reduced-motion: reduce) {
	.dbk-sprogress__thumb {
		transition: none;
	}
}