/**
 * diaporama — habille le carrousel Splide (ff_components/splide, voir
 * diaporama.js). La structure `.splide > .splide__track > .splide__list >
 * .splide__slide` et les classes `.splide__arrow`, `.splide__pagination`
 * sont imposées par Splide : ne pas les remplacer par d'autres classes.
 *
 * Couleurs, mesures et durées passent par les jetons `--ffc-*` du module,
 * chacun avec un repli neutre : le composant reste présentable sans thème.
 *
 * Trois partis pris, valables pour les trois modes :
 *
 * 1. Tous les médias partagent une hauteur, `--ffc-slider-hauteur`, et laissent
 *    leur largeur suivre. En mode continu c'est ce qui fait une bande ; en mode
 *    simple c'est ce qui empêche la page de sauter d'une slide à l'autre. Le
 *    repli est une hauteur réelle et non `auto` : sans elle, une image de 440px
 *    de large déborde d'un écran de 390px, et le fondu change la hauteur du
 *    bloc à chaque transition.
 * 2. Les commandes sont des carrés de papier posés sur un filet 1px, pas des
 *    pastilles translucides. Elles font 44px au minimum, cible tactile comprise,
 *    et le glyphe a une taille propre : hérité, il tombait à 13px sur un fond
 *    de la même couleur que lui, donc invisible.
 * 3. Le survol ne change que la couleur, et tout mouvement disparaît sous
 *    `prefers-reduced-motion`.
 */

/* ------------------------------------------------------------------ */
/* Cadre                                                              */
/* ------------------------------------------------------------------ */

/**
 * Les commandes sortent de l'image. Splide les pose en absolu par-dessus le
 * média ; ici elles descendent sur une ligne à elles, sous la bande — la
 * pagination à gauche, les flèches à droite. Splide range `.splide__arrows`,
 * `.splide__track` et `.splide__pagination` comme trois enfants directs de la
 * racine : une grille suffit à les remettre dans cet ordre.
 */
.comp--diaporama.splide {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'track track'
		'jauge arrows';
	align-items: center;
	row-gap: var(--ffc-gouttiere, 1.5rem);

	--ffc-chevron-gauche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
	--ffc-chevron-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/**
 * Jauge de défilement du mode continu : une piste d'un pixel, un trait d'accent
 * dessus. Splide règle la largeur de la barre lui-même dès que ce balisage
 * existe. Elle dit ce que la bande ne dit pas — combien il reste à droite.
 */
.comp--diaporama.splide .splide__progress {
	grid-area: jauge;
	align-self: center;
	height: 1px;
	background: var(--ffc-filet, rgba(28, 26, 22, 0.14));
}

.comp--diaporama.splide .splide__progress__bar {
	height: 3px;
	margin-block-start: -1px;
	background: var(--ffc-accent, #2c6f7a);
}

.comp--diaporama.splide .splide__track {
	grid-area: track;
	/* Sans cela, une piste plus large que la colonne étire la grille. */
	min-width: 0;
	max-width: 100%;
}

/**
 * Une slide est un `li`, donc les règles d'espacement de listes du thème
 * (`.content li + li`) lui posent une marge haute et décalent toutes les
 * slides sauf la première. La piste gère elle-même son espacement.
 */
.comp--diaporama.splide .splide__list > .splide__slide {
	margin-block: 0;
}

/**
 * Rien à faire défiler : ni flèches ni pagination à afficher. Le cas se lit sur
 * les boutons eux-mêmes — Splide désactive les deux quand la bande tient dans
 * sa colonne — et non sur `is-overflow`, que le mode continu (`autoWidth` et
 * glissement libre) ne pose pas : les flèches y disparaissaient alors qu'il
 * restait trois images hors champ.
 */
.comp--diaporama.splide:has(.splide__arrow--prev:disabled):has(.splide__arrow--next:disabled) .splide__arrows,
.comp--diaporama.splide:has(.splide__slide:first-child:last-child) .splide__arrows,
.comp--diaporama.splide:has(.splide__slide:first-child:last-child) .splide__pagination {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Médias                                                             */
/* ------------------------------------------------------------------ */

.comp--diaporama.splide .comp--medias {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

/**
 * Hauteur commune, largeur libre. `!important` reprend la main sur les règles
 * de dimensionnement du composant medias, qui raisonne en largeur de colonne.
 */
.comp--diaporama.splide .comp--medias img {
	height: var(--ffc-slider-hauteur, 20rem) !important;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
}

.comp--diaporama.splide .comp--medias .field--name-field-media-oembed-video,
.comp--diaporama.splide .comp--medias .field--name-field-media-oembed-video iframe {
	position: relative !important;
	top: inherit !important;
	left: inherit !important;
	width: auto !important;
	max-width: 100% !important;
	aspect-ratio: 16 / 9;
	height: var(--ffc-slider-hauteur, 20rem) !important;
	padding: 0 !important;
}

.comp--diaporama.splide .comp--medias .cq-image-wrapper {
	container-type: inherit;
}

/**
 * La légende ne peut pas dépasser l'image qu'elle accompagne. La slide se
 * dimensionne sur son contenu — c'est l'image, dont la largeur découle de la
 * hauteur imposée — mais une légende longue élargissait la slide bien au-delà.
 *
 * `width: 0` retire la légende du calcul de largeur intrinsèque de la slide
 * (une largeur définie remplace la largeur max-content du texte), `min-width`
 * en pourcentage est ignoré à ce même calcul puis la ramène, au rendu, à la
 * largeur du bloc parent — donc à celle de l'image.
 */
.comp--diaporama.splide .comp--medias .media__caption {
	width: 0;
	min-width: 100%;
	/* Contrainte à la largeur de l'image, la légende doit tenir en peu de
	   place : on descend au pas des métadonnées, ce qu'elle est déjà par sa
	   couleur. */
	font-size: var(--fs-2xs);
}

/* Le texte d'une slide garde la mesure de lecture. */
.comp--diaporama.splide .splide__slide .comp--texte,
.comp--diaporama.splide .splide__slide .comp--titre {
	max-width: var(--ffc-slider-mesure, none);
}

/* ------------------------------------------------------------------ */
/* Mode continu — bande à défilement libre                            */
/* ------------------------------------------------------------------ */

/**
 * Le glisser-déposer est la commande principale de ce mode : le curseur doit le
 * dire. Splide pose `.is-dragging` pendant le geste.
 */
.comp--diaporama-slider-free.splide.is-overflow .splide__track {
	cursor: grab;
}
.comp--diaporama-slider-free.splide.is-dragging .splide__track {
	cursor: grabbing;
}

/* ------------------------------------------------------------------ */
/* Mode simple — fondu, une slide à la fois                           */
/* ------------------------------------------------------------------ */

/**
 * Le CSS de Splide ne gère que l'opacité du fondu : sans largeur imposée, la
 * slide se réduit à la largeur naturelle de son image et se colle à gauche.
 */
.comp--diaporama-slider-simple.splide .splide__slide {
	width: 100%;
	flex-shrink: 0;
}

.comp--diaporama-slider-simple.splide .comp--medias {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Commandes — flèches                                                */
/* ------------------------------------------------------------------ */

.comp--diaporama.splide .splide__arrows {
	grid-area: arrows;
	display: flex;
	justify-content: flex-end;
}

.comp--diaporama.splide .splide__arrow {
	/* Sorties du flux absolu de Splide : elles vivent dans la grille. */
	position: static;
	transform: none;
	width: 44px;
	height: 44px;
	background-color: transparent;
	border: 1px solid var(--ffc-accent-45, rgba(44, 111, 122, 0.45));
	border-radius: var(--ffc-rayon, 0);
	color: var(--ffc-accent, #2c6f7a);
	opacity: 1;
	transition:
		background-color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out),
		border-color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out),
		color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out);
}

/* Deux boutons distincts, écartés de huit pixels : accolés, ils se lisaient
   comme un seul objet à deux moitiés. */
.comp--diaporama.splide .splide__arrows {
	gap: 8px;
}

/* Splide dessine ses flèches en SVG ; on les remplace par un chevron en masque,
   qui suit la couleur du bouton au survol sans dépendre d'une police. */
.comp--diaporama.splide .splide__arrow svg {
	display: none !important;
}
.comp--diaporama.splide .splide__arrow:before {
	display: none;
}
.comp--diaporama.splide .splide__arrow:after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	mask: var(--ffc-chevron-droite) center / 18px 18px no-repeat;
	-webkit-mask: var(--ffc-chevron-droite) center / 18px 18px no-repeat;
}
.comp--diaporama.splide .splide__arrow--prev:after {
	mask-image: var(--ffc-chevron-gauche);
	-webkit-mask-image: var(--ffc-chevron-gauche);
}

.comp--diaporama.splide .splide__arrow:hover {
	background-color: var(--ffc-accent, #2c6f7a);
	border-color: var(--ffc-accent, #2c6f7a);
	color: var(--ffc-accent-fort-invert, #fcfcfb);
}

.comp--diaporama.splide .splide__arrow:focus-visible {
	outline: 2px solid var(--ffc-accent, #06c);
	outline-offset: 2px;
}

.comp--diaporama.splide .splide__arrow:disabled {
	background-color: var(--ffc-fond, #fff);
	border-color: var(--ffc-filet, rgba(0, 0, 0, 0.14));
	color: var(--ffc-texte-faible, #666);
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Commandes — pagination                                             */
/* ------------------------------------------------------------------ */

/* CODE MORT signalé, non supprimé : `pagination: false` dans les deux modes
   (diaporama.js), Splide ne rend donc jamais ces éléments. Les règles restent
   le temps qu'on décide si un mode paginé revient. */

.comp--diaporama.splide .splide__pagination {
	grid-area: jauge;
	position: static;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	gap: 0;
}

.comp--diaporama.splide .splide__pagination li {
	display: flex;
	margin: 0;
	/* Sans cela, l'interligne hérité gonfle le li au-delà des 44px du bouton et décale la puce dans la rangée. */
	line-height: 0;
}

/**
 * Le bouton fait 44px — la cible tactile du système — et la puce est dessinée
 * au centre en `::after`. Dimensionner le bouton lui-même à 10px donnerait une
 * cible de 10px, et laisser Splide poser sa pastille ferait varier la hauteur
 * de boîte entre la puce active et les autres, donc la ligne se désalignerait.
 */
.comp--diaporama.splide .splide__pagination__page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	opacity: 1;
	transform: none;
}

.comp--diaporama.splide .splide__pagination__page:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid var(--ffc-texte-fort, #111);
	border-radius: var(--ffc-rayon, 0);
	background-color: transparent;
	transition: background-color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out);
}

.comp--diaporama.splide .splide__pagination__page:hover:after {
	background-color: var(--ffc-texte-faible, #666);
}

.comp--diaporama.splide .splide__pagination__page.is-active:after {
	background-color: var(--ffc-texte-fort, #111);
}

.comp--diaporama.splide .splide__pagination__page:focus-visible {
	outline: 2px solid var(--ffc-accent, #06c);
	outline-offset: -6px;
}

/* ------------------------------------------------------------------ */
/* Mouvement réduit                                                   */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.comp--diaporama.splide .splide__arrow,
	.comp--diaporama.splide .splide__pagination__page:after,
	.comp--diaporama.splide .splide__list {
		transition: none !important;
	}
}