/**
 * Dahu Theme Annad 2026 — carrousel des cartes « Kits sur-mesure » (composition « Accueil — Kits
 * sur-mesure »).
 *
 * Cible les classes déjà posées par la composition : .annad-kits sur le bloc racine,
 * .annad-kits__cards sur le bloc Colonnes, .annad-kits__card sur chaque colonne. Rien à ajouter dans
 * l'éditeur : un bloc déjà inséré devient un carrousel. Chargée seulement sur une page dont le contenu
 * contient .annad-kits__cards (functions.php), et dans l'éditeur (inc/blocks.php).
 *
 * Deux états :
 * 1. Rangée défilable (sans JavaScript, ou mouvement réduit) : défilement horizontal natif avec
 *    aimantation (scroll-snap), aucune copie, rien de caché.
 * 2. Carrousel (.is-kit-carousel, posé par assets/js/kit-carousel.js) : les cartes sont déplacées dans
 *    une piste (.annad-kits__track) suivie de copies inertes ; le script la fait glisser de droite à
 *    gauche par translateX, en boucle, et la met en pause au survol et au focus clavier.
 *
 * Réglages (custom properties, à poser par exemple sur .annad-kits) :
 * --kit-carousel-card-duration : temps de passage d'une carte (défaut 6s depuis 4.44.0, 4s avant),
 *   soit 60 s pour un tour de 10 cartes ; le tour s'adapte au nombre de cartes.
 * --kit-carousel-duration : durée d'un tour complet de la série, prioritaire si elle est posée.
 *   Ex. `.annad-kits { --kit-carousel-duration: 80s; }`.
 * --kit-carousel-gap : écart entre deux cartes (défaut 1rem).
 * --kit-carousel-fade : largeur du fondu sur les bords gauche et droit.
 *
 * Cartes visibles : 4 dès 64em (1024px), 2,5 de 40em à 64em, 1,5 en dessous. La largeur des cartes
 * est calculée sur la largeur du bloc Colonnes (unités de conteneur cqi) : la même dans la rangée
 * et dans la piste du carrousel, dont la largeur dépend justement des cartes.
 */

/* Vitesse par défaut, lue par kit-carousel.js sur la fenêtre. Posée sur le bloc racine, sans
   spécificité : une valeur posée sur .annad-kits (CSS additionnel) l'emporte. */
:where(.annad-kits) {
	--kit-carousel-card-duration: 6s;
}

.annad-kits .annad-kits__cards.wp-block-columns {
	--kit-carousel-gap: 1rem;
	--kit-carousel-fade: 2rem;
	--kit-carousel-visible: 1.5;
	--kit-carousel-card: calc((100cqi - (var(--kit-carousel-visible) - 0.5) * var(--kit-carousel-gap)) / var(--kit-carousel-visible));

	container-type: inline-size;
	gap: var(--kit-carousel-gap);
	/* Le CSS du cœur fait passer les Colonnes à la ligne sous 782px (flex-wrap, en !important). */
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.annad-kits .annad-kits__cards.wp-block-columns::-webkit-scrollbar {
	display: none;
}

@media (min-width: 40em) {
	.annad-kits .annad-kits__cards.wp-block-columns {
		--kit-carousel-visible: 2.5;
	}
}

@media (min-width: 64em) {
	.annad-kits .annad-kits__cards.wp-block-columns {
		--kit-carousel-visible: 4;
		--kit-carousel-fade: 4.5rem;
		/* Aimantation calée sur la marge intérieure du bloc (4.5rem, front-page.css) : la première
		   carte reste à sa place au chargement. */
		scroll-padding-inline: 4.5rem;
		/* 4 cartes pleines : (100cqi - 3 écarts) / 4. */
		--kit-carousel-card: calc((100cqi - 3 * var(--kit-carousel-gap)) / 4);
	}
}

/* Largeur fixe des cartes. !important : le cœur impose flex-basis: 100% !important aux colonnes
   sous 782px ; la spécificité (0-5-0) dépasse la sienne (0-3-0). */
.annad-kits .annad-kits__cards.wp-block-columns .wp-block-column.annad-kits__card {
	flex: 0 0 var(--kit-carousel-card) !important;
	width: var(--kit-carousel-card);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* ---------- Carrousel (JavaScript actif, mouvement non réduit) ---------- */

/* La fenêtre ne défile plus à la main : la piste glisse dedans. Fondu sur les deux bords : les
   cartes apparaissent et disparaissent progressivement. */
.annad-kits .annad-kits__cards.wp-block-columns.is-kit-carousel {
	overflow: hidden;
	scroll-snap-type: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kit-carousel-fade), #000 calc(100% - var(--kit-carousel-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--kit-carousel-fade), #000 calc(100% - var(--kit-carousel-fade)), transparent 100%);
}

.annad-kits__track {
	position: relative; /* repère des offsetLeft lus par le script */
	display: flex;
	flex: none;
	gap: var(--kit-carousel-gap);
	align-items: stretch;
	width: max-content;
	will-change: transform;
}

/* Carte qui a le focus clavier : contour visible (le carrousel est alors en pause). */
.annad-kits .annad-kits__card:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* Mouvement réduit : le script ne pose pas .is-kit-carousel ; filet de sécurité si la préférence
   change après le chargement. */
@media (prefers-reduced-motion: reduce) {
	.annad-kits__track {
		transform: none !important;
	}
}