/**
 * Slider Loisirs — styles front + éditeur.
 * Aucune dépendance, pur CSS, animations GPU (transform/opacity).
 * Couleurs reprises du theme.json via variables CSS natives WP.
 */

.tof-loisirs-slider {
	position: relative;
	--tof-slider-duration: 700ms;
	--tof-slider-easing: cubic-bezier( 0.22, 1, 0.36, 1 );
	--tof-slider-inactive-opacity: 0.5;
	--tof-slider-nav-size: clamp( 2.75rem, 5vw, 3.5rem );
	--tof-slider-nav-bg: var( --wp--preset--color--custom-ble, #2b2c7c );
	--tof-slider-nav-fg: var( --wp--preset--color--base, #fff );
	--tof-slide-width: clamp( 220px, 32vw, 340px );
}

.tof-loisirs-slider:focus {
	outline: none;
}

.tof-loisirs-slider:focus-visible {
	outline: 3px solid var( --tof-slider-nav-bg );
	outline-offset: 6px;
}

/* --- Décorations damier (haut-gauche + bas-gauche) -------------------- */
/* Pures pseudo-éléments : aucune entrée dans l'arbre d'accessibilité,
   aucun changement des tailles existantes du slider. */

.tof-loisirs-slider::before,
.tof-loisirs-slider::after {
	content: '';
	position: absolute;
	left: 0;
	width: clamp( 120px, 14vw, 220px );
	/* Ratio du SVG 524.95 × 134.61 ≈ 3.9 : 1 (bandeau horizontal) */
	aspect-ratio: 524.95 / 134.61;
	background: url( '/wp-content/uploads/2026/04/damier-loisirs-time-out-factory.svg' ) center / contain no-repeat;
	pointer-events: none;
	z-index: 1;
}

/* Forcés à ras des bords haut/bas du wrapper, sans tenir compte d'un
   éventuel padding interne, pour un effet vraiment collé aux bords. */
.tof-loisirs-slider::before {
	top: 0;
	margin-top: 0;
}

.tof-loisirs-slider::after {
	bottom: 0;
	margin-bottom: 0;
}

.tof-loisirs-slider__viewport {
	position: relative;
	/* overflow-x: clip pour ne clipper QUE l'horizontal (slides cachées
	   qui quittent par les côtés). overflow-y visible laisse le picto
	   et le contenu respirer. */
	overflow-x: clip;
	overflow-y: visible;
	/* Hauteur suffisante pour contenir la slide active au format portrait
	   (image 3/4 + titre + prix + âge) sur tous les breakpoints. */
	min-height: clamp( 520px, 68vw, 720px );
}

.tof-loisirs-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	height: 100%;
	min-height: inherit;
}

/* --- Slides ---------------------------------------------------------- */

/* Positionnement absolu : seuls `transform` + `opacity` animent
   (GPU-only, aucun reflow, transitions silky). */
.tof-loisirs-slider__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var( --tof-slide-width );
	transform: translate( -50%, -50% ) scale( 0.6 );
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	transition:
		transform var( --tof-slider-duration ) var( --tof-slider-easing ),
		opacity calc( var( --tof-slider-duration ) * 0.8 ) var( --tof-slider-easing );
}

.tof-loisirs-slider__slide.is-prev {
	transform: translate( -150%, -50% ) scale( 0.85 );
	opacity: var( --tof-slider-inactive-opacity );
}

.tof-loisirs-slider__slide.is-active {
	transform: translate( -50%, -50% ) scale( 1 );
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}

.tof-loisirs-slider__slide.is-next {
	transform: translate( 50%, -50% ) scale( 0.85 );
	opacity: var( --tof-slider-inactive-opacity );
}

/* Slides cachées, directionnelles : la slide qui quitte par la gauche
   continue son mouvement à gauche, idem à droite. */
.tof-loisirs-slider__slide.is-hidden-left {
	transform: translate( -260%, -50% ) scale( 0.7 );
	opacity: 0;
}

.tof-loisirs-slider__slide.is-hidden-right {
	transform: translate( 160%, -50% ) scale( 0.7 );
	opacity: 0;
}

/* --- Lien couvrant (slide active cliquable) --------------------------- */

.tof-loisirs-slider__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* aucun texte visible : le nom accessible vient de aria-labelledby */
	overflow: hidden;
	text-indent: -10000px;
	white-space: nowrap;
	/* pas d'outline par défaut — focus stylisé ci-dessous */
	border-radius: inherit;
}

/* Seule la slide active est cliquable */
.tof-loisirs-slider__slide:not( .is-active ) .tof-loisirs-slider__link {
	pointer-events: none;
}

/* Focus clavier visible (RGAA 10.7) */
.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__link:focus-visible {
	outline: 3px solid var( --tof-slider-nav-bg );
	outline-offset: 4px;
}

/* Micro-interaction au survol (tolérée par l'exception animations) */
.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__link:hover ~ .tof-loisirs-slider__media .tof-loisirs-slider__image,
.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__link:focus-visible ~ .tof-loisirs-slider__media .tof-loisirs-slider__image {
	transform: scale( 1.03 );
}

/* --- Média ----------------------------------------------------------- */

.tof-loisirs-slider__media {
	position: relative;
	aspect-ratio: 3 / 4;
}

.tof-loisirs-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Coins rognés uniquement sur l'image, pas sur le conteneur :
	   cela permet au pictogramme de déborder librement. */
	border-radius: inherit;
	transition: transform 250ms var( --tof-slider-easing );
}

/* Pictogramme décoratif en surimpression sur la slide active.
   Positionné sur le bord bas-droit de l'image et débordant volontairement. */
.tof-loisirs-slider__picto {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp( 90px, 28%, 170px );
	height: auto;
	pointer-events: none;
	z-index: 2;
	transform: translate( 30%, 60% ) rotate( -15deg );
	opacity: 0;
	transition:
		opacity var( --tof-slider-duration ) var( --tof-slider-easing ),
		transform var( --tof-slider-duration ) var( --tof-slider-easing );
}

.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__picto {
	opacity: 1;
	transform: translate( 30%, 35% ) rotate( 0 );
	transition-delay: 300ms;
}

/* --- Contenu texte --------------------------------------------------- */

.tof-loisirs-slider__content {
	margin-top: 1.25rem;
}

/* Sur slides non actives : on ne montre que l'image. */
.tof-loisirs-slider__slide:not( .is-active ) .tof-loisirs-slider__content {
	display: none;
}

.tof-loisirs-slider__title {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.25rem, 2.2vw, 1.75rem );
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	opacity: 0;
	transform: translateY( 12px );
	transition:
		opacity var( --tof-slider-duration ) var( --tof-slider-easing ),
		transform var( --tof-slider-duration ) var( --tof-slider-easing );
}

.tof-loisirs-slider__meta {
	margin: 0;
	padding: 0.5rem 0;
	border-top: 1px solid currentColor;
	font-size: 1rem;
	opacity: 0;
	transform: translateY( 12px );
	transition:
		opacity var( --tof-slider-duration ) var( --tof-slider-easing ),
		transform var( --tof-slider-duration ) var( --tof-slider-easing );
}

.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__title {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 200ms;
}

.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__prix {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 320ms;
}

.tof-loisirs-slider__slide.is-active .tof-loisirs-slider__age {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 440ms;
}

/* --- Navigation ------------------------------------------------------ */

.tof-loisirs-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: var( --tof-slider-nav-size );
	height: var( --tof-slider-nav-size );
	border: 0;
	border-radius: 50%;
	background-color: var( --tof-slider-nav-bg );
	color: var( --tof-slider-nav-fg );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition:
		background-color 150ms ease,
		transform 150ms ease;
}

.tof-loisirs-slider__nav svg {
	width: 50%;
	height: auto;
}

.tof-loisirs-slider__nav:hover {
	transform: translateY( -50% ) scale( 1.08 );
}

.tof-loisirs-slider__nav:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.tof-loisirs-slider__nav--prev {
	left: clamp( 2%, 8%, 14%);
}

.tof-loisirs-slider__nav--next {
	right: clamp( 2%, 8%, 14% );
}

/* --- Région live ----------------------------------------------------- */

.tof-loisirs-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	border: 0;
	white-space: nowrap;
}

/* --- État vide ------------------------------------------------------- */

.tof-loisirs-slider__empty {
	text-align: center;
	padding: 2rem 1rem;
	font-style: italic;
}

/* --- Responsive ------------------------------------------------------ */

@media ( max-width: 600px ) {
	.tof-loisirs-slider {
		--tof-slide-width: clamp( 180px, 62vw, 260px );
		--tof-slider-nav-size: 2.5rem;
	}
	.tof-loisirs-slider__slide.is-prev {
		transform: translate( -135%, -50% ) scale( 0.75 );
	}
	.tof-loisirs-slider__slide.is-next {
		transform: translate( 35%, -50% ) scale( 0.75 );
	}
	.tof-loisirs-slider__picto {
		width: clamp( 60px, 26%, 100px );
	}
}

/* --- Accessibilité : respect des préférences utilisateur ------------- */
/* RGAA 13.8 / RGESN : couper les animations si l'utilisateur le demande. */

@media ( prefers-reduced-motion: reduce ) {
	.tof-loisirs-slider *,
	.tof-loisirs-slider *::before,
	.tof-loisirs-slider *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* --- Éditeur Gutenberg ---------------------------------------------- */

.tof-loisirs-slider-editor-wrap .tof-loisirs-slider__nav {
	pointer-events: none;
}