/**
 * The Scrolling shape for a core gallery: one line that slides along.
 *
 * UNE DISPOSITION ET RIEN D'AUTRE, comme la maçonnerie. Les images gardent la
 * largeur que le cœur leur donne d'après le nombre de colonnes de la galerie
 * (deux colonnes : deux images à la fois), mais ne passent plus à la ligne :
 * la galerie devient une bande qui défile, aimantée image par image. Les
 * flèches sont des boutons nus que le script ajoute après la galerie ; le
 * thème les dessine et les place.
 *
 * `:not(#individual-image)` donne aux règles des images le poids d'un
 * identifiant, comme le cœur le fait lui-même : sa règle de largeur pèse
 * (0,3,1), et c'est elle qu'il faut suivre sans la contredire.
 *
 * @package cab-useful-options
 * @since   1.33.0
 */

/*
 * CE QUI DÉFILE : LA PISTE, DANS LA GALERIE (1.43.0). Les images sont posées
 * par le serveur dans `div.cab-uo-scroll__track` (inc/gallery-scroll.php) ; la
 * galerie, devenue une simple boîte, garde fond, bordure, arrondi et
 * marges intérieures, et contient la piste, les flèches et sa légende. La
 * piste reprend l'écart que le cœur donne à la galerie (`gap: inherit`), celui
 * que ses largeurs d'images déduisent déjà.
 *
 * Sans piste (l'éditeur, ou une page mise en cache avant la 1.43.0), c'est la
 * galerie elle-même qui défile, comme avant.
 */
.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images.has-cab-uo-scroll-track {
	display: block;
}

.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images > .cab-uo-scroll__track {
	display: flex;
	flex-wrap: nowrap;
	gap: inherit;
}

.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images:not(.has-cab-uo-scroll-track),
.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images > .cab-uo-scroll__track {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images:not(.has-cab-uo-scroll-track)::-webkit-scrollbar,
.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images > .cab-uo-scroll__track::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-shrink: 0;
	scroll-snap-align: start;
}

/*
 * DANS L'ÉDITEUR, LES FLÈCHES COMME SUR LA PAGE (1.38.0, editor-gallery-scroll.js),
 * et donc pas de barre de défilement. Elle ne revient qu'à une galerie que ne
 * suivent pas les flèches, si leur script manquait : sans barre, les images
 * au-delà de la ligne ne se laisseraient atteindre qu'au pavé tactile.
 */
.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images.block-editor-block-list__block:not(:has(+ div.cab-uo-scroll-nav)) {
	scrollbar-width: thin;
}

.wp-block-gallery.is-style-cab-uo-scroll.has-nested-images.block-editor-block-list__block:not(:has(+ div.cab-uo-scroll-nav))::-webkit-scrollbar {
	display: block;
	height: 8px;
}

/*
 * LES FLÈCHES : UNE PLACE, PAS UNE ROBE. Côte à côte, centrées sous la ligne,
 * à l'écart des rangées de la galerie. Sur la page, dans la galerie depuis la
 * 1.43.0 (après la piste) ; dans l'éditeur, juste après elle.
 *
 * Deux classes (div + classe), pour passer devant la règle de mise en page du
 * cœur, `:root :where(...) > *`, qui remet à zéro la marge de tout ce qui suit
 * un bloc. DANS LA GALERIE, UN CRAN DE PLUS (1.43.1) : la galerie est une mise
 * en page flex, et le cœur y remet à zéro la marge de chaque enfant,
 * `.is-layout-flex > :is(*, div)`, du même poids et servi après ; les flèches
 * touchaient les images (page exemple, Cyrille, 3 novembre 2026).
 * `figure > div.cab-uo-scroll-nav` pèse (0,1,2) : assez pour passer devant le
 * cœur, pas assez pour passer devant un thème qui place les flèches lui-même
 * (`.cab-clients div.cab-uo-scroll-nav`, (0,2,1)).
 *
 * `hidden` quand tout tient sur la ligne : il n'y a rien à faire défiler.
 */
div.cab-uo-scroll-nav,
figure > div.cab-uo-scroll-nav {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-block-start: var(--wp--style--unstable-gallery-gap, 0.5em);
}

div.cab-uo-scroll-nav[hidden] {
	display: none;
}