/* Carrousel EMAN - remplace jCarousel (jQuery, 2013).
 * Defilement natif par scroll-snap : swipe tactile, molette, clavier et
 * accessibilite viennent du navigateur, le JS ne fait que piloter.
 * Toutes les valeurs ajustables sont des variables CSS : un theme peut
 * les surcharger sans toucher a ce fichier.
 */

.eman-carousel {
	--ec-cols: 1;
	--ec-gap: 1.25rem;
	--ec-radius: 3px;
	/* Cadre legerement plus large que haut : les manuscrits sont en hauteur,
	   mais un vrai portrait faisait une rangee trop haute sous le texte. Le
	   cadrage `cover` garde le haut de page, la ou commence l'ecriture. */
	--ec-ratio: 1 / 1;
	--ec-ink: #4e443c;
	--ec-muted: #7a6e63;
	--ec-surface: #fff;
	--ec-mat: #e8e4dc;
	--ec-fade: 255, 255, 255;
	/* Le theme est un papier gris chaud : un bleu franc s'y lisait comme une
	   couleur rapportee. L'accent est donc l'encre du theme, et le survol se
	   marque par un filet plus dense, pas par un changement de teinte. */
	--ec-accent: #4e4941;
	--ec-line: rgba(78, 68, 60, .16);
	--ec-shadow: 0 1px 2px rgba(78, 68, 60, .10), 0 10px 26px -14px rgba(78, 68, 60, .55);
	--ec-shadow-hover: 0 2px 4px rgba(78, 68, 60, .12), 0 18px 34px -16px rgba(78, 68, 60, .65);
	--ec-ctrl: 2.75rem;
	--ec-ease: cubic-bezier(.33, .01, .18, 1);

	position: relative;
	margin: 0;
	padding: 0;
	/* le theme met `* { box-sizing: unset }` : on le retablit ici */
	box-sizing: border-box;
}

.eman-carousel *,
.eman-carousel *::before,
.eman-carousel *::after {
	box-sizing: border-box;
}

@media (min-width: 520px)  { .eman-carousel { --ec-cols: 3; } }
@media (min-width: 820px)  { .eman-carousel { --ec-cols: 4; } }
@media (min-width: 1140px) { .eman-carousel { --ec-cols: 5; } }
@media (min-width: 1500px) { .eman-carousel { --ec-cols: 6; } }

/* !---------- Zone de defilement ---------- */

.eman-carousel__frame {
	position: relative;
}

.eman-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0;
	border-radius: var(--ec-radius);
}

.eman-carousel__viewport::-webkit-scrollbar {
	display: none;
}

/* Pendant l'animation JS l'ancrage tirerait la position en sens inverse :
   le JS pose `is-animating` le temps du mouvement et le rend ensuite. */
.eman-carousel.is-animating .eman-carousel__viewport {
	scroll-snap-type: none;
}

.eman-carousel__viewport:focus {
	outline: none;
}

.eman-carousel__viewport:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: 3px;
}

/* Les bords s'estompent pour signaler qu'il reste des vignettes hors champ.
   `is-start` / `is-end` sont poses par le JS selon la position de defilement. */
.eman-carousel.is-ready .eman-carousel__frame::before,
.eman-carousel.is-ready .eman-carousel__frame::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3rem;
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	transition: opacity .4s var(--ec-ease);
}

.eman-carousel.is-ready .eman-carousel__frame::before {
	left: -1px;
	/* background: linear-gradient(to right, rgba(var(--ec-fade), .85), rgba(var(--ec-fade), 0)); */
}

.eman-carousel.is-ready .eman-carousel__frame::after {
	right: -1px;
	/* background: linear-gradient(to left, rgba(var(--ec-fade), .85), rgba(var(--ec-fade), 0)); */
}

.eman-carousel.is-start .eman-carousel__frame::before,
.eman-carousel.is-end .eman-carousel__frame::after,
.eman-carousel.is-static .eman-carousel__frame::before,
.eman-carousel.is-static .eman-carousel__frame::after {
	opacity: 0;
}

/* !---------- Piste et vignettes ---------- */

.eman-carousel__track {
	display: flex;
	gap: var(--ec-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eman-carousel__item {
	flex: 0 0 calc((100% - (var(--ec-cols) - 1) * var(--ec-gap)) / var(--ec-cols));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	scroll-snap-align: start;
}

.eman-carousel__card {
	display: block;
	height: 100%;
	background: none;
	border: 0;
	text-decoration: none;
	color: inherit;
	transition: transform .45s var(--ec-ease);
}

.eman-carousel__card:hover,
.eman-carousel__card:focus-visible {
	transform: translateY(-3px);
}

.eman-carousel__card:hover .eman-carousel__mat {
	box-shadow: var(--ec-shadow-hover);
}

.eman-carousel__card:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: 2px;
}

/* L'image occupe tout le cadre, a fond perdu : le passe-partout blanc et le
   filet qui l'entouraient encadraient la vignette au lieu de la montrer. Il
   ne reste que le coin arrondi et l'ombre portee, qui detachent la vignette
   du fond de page sans rien poser par-dessus. */
.eman-carousel__mat {
	display: block;
	position: relative;
	aspect-ratio: var(--ec-ratio);
	background: var(--ec-mat);
	padding: 0;
	overflow: hidden;
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow);
	transition: box-shadow .45s var(--ec-ease);
}

/* Repli pour les navigateurs sans `aspect-ratio` */
@supports not (aspect-ratio: 1 / 1) {
	.eman-carousel__mat {
		padding-top: 100%;
	}
	.eman-carousel__mat > img {
		position: absolute;
		inset: 0;
	}
}

.eman-carousel__mat > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	/* Les manuscrits sont ecrits en haut de page : c'est ce bord qu'il faut
	   garder quand le cadrage rogne. */
	object-position: center top;
	border: 0;
	transition: transform .7s var(--ec-ease);
}

.eman-carousel__card:hover .eman-carousel__mat > img {
	transform: scale(1.04);
}

.eman-carousel__caption {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .55rem .1rem 0;
	font-size: .85em;
	line-height: 1.35;
	color: var(--ec-ink);
}

.eman-carousel__card:hover .eman-carousel__caption {
	color: var(--ec-accent);
}

/* !---------- Fleches ---------- */

.eman-carousel__nav {
	position: absolute;
	top: calc(50% - .5rem);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ec-ctrl);
	height: var(--ec-ctrl);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ec-ink);
	border: 1px solid var(--ec-line);
	border-radius: 50%;
	box-shadow: var(--ec-shadow);
	cursor: pointer;
	transition: background .35s var(--ec-ease), color .35s var(--ec-ease),
		opacity .35s var(--ec-ease), transform .35s var(--ec-ease);
}

.eman-carousel__nav:hover {
	background: var(--ec-ink);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.eman-carousel__nav:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: 2px;
}

.eman-carousel__nav svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.eman-carousel__nav--prev { left: .5rem; }
.eman-carousel__nav--next { right: .5rem; }

/* Bout de course : la fleche s'efface mais reste cliquable si le bouclage
   est actif, sinon le JS la desactive. */
.eman-carousel.is-start:not(.is-loop) .eman-carousel__nav--prev,
.eman-carousel.is-end:not(.is-loop) .eman-carousel__nav--next {
	opacity: .35;
	pointer-events: none;
}

.eman-carousel.is-static .eman-carousel__nav,
.eman-carousel.is-static .eman-carousel__bar {
	display: none;
}

@media (max-width: 519px) {
	.eman-carousel__nav {
		display: none;
	}
}

/* !---------- Barre de controle (lecture + puces) ---------- */

.eman-carousel__bar {
	/* position: absolute; */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	bottom: 0px;
	margin-top: 4px;
	/* left: 0;
	right: 0; */
}

.eman-carousel__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	/* background: var(--ec-surface); */
	border: 1px solid var(--ec-line);
	border-radius: 50%;
	color: var(--ec-muted);
	cursor: pointer;

	transition: color .2s var(--ec-ease), border-color .2s var(--ec-ease);
}

.eman-carousel__toggle:hover {
	color: var(--ec-ink);
	border-color: var(--ec-line);
}

.eman-carousel__toggle:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: 2px;
}

.eman-carousel__toggle svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

/* Une seule icone est visible a la fois, selon l'etat de lecture. */
.eman-carousel__toggle .ec-icon-play { display: none; }
.eman-carousel.is-paused .eman-carousel__toggle .ec-icon-play { display: block; }
.eman-carousel.is-paused .eman-carousel__toggle .ec-icon-pause { display: none; }

.eman-carousel_dot_container {
	/* background-color: var(--ec-surface); */
	padding: 10px;
	border-radius: 5px;
}

.eman-carousel__dots {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eman-carousel__dots li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eman-carousel__dot {
	display: block;
	width: .7rem;
	height: .7rem;
	padding: 0;
	background: rgba(78, 68, 60, .28);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width .4s var(--ec-ease), background .4s var(--ec-ease);
}

.eman-carousel__dot:hover {
	background: rgba(78, 68, 60, .55);
}

.eman-carousel__dot[aria-current="true"] {
	width: 1.9rem;
	background: var(--ec-ink);
}

.eman-carousel__dot:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: 3px;
}

/* Une puce par vignette : au-dela d'une dizaine la rangee doit se resserrer
   pour tenir sous le carrousel sur les petits ecrans. */
.eman-carousel.is-dense .eman-carousel__dots {
	gap: .4rem;
}

.eman-carousel.is-dense .eman-carousel__dot {
	width: .5rem;
	height: .5rem;
}

.eman-carousel.is-dense .eman-carousel__dot[aria-current="true"] {
	width: 1.5rem;
}

/* !---------- Accessibilite ---------- */

.eman-carousel .ec-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sans JS les vignettes restent lisibles et defilables a la main. */
.eman-carousel:not(.is-ready) .eman-carousel__nav,
.eman-carousel:not(.is-ready) .eman-carousel__bar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.eman-carousel__viewport {
		scroll-behavior: auto;
	}
	.eman-carousel__card,
	.eman-carousel__mat > img,
	.eman-carousel__nav,
	.eman-carousel__dot {
		transition: none;
	}
	.eman-carousel__card:hover {
		transform: none;
	}
	.eman-carousel__card:hover .eman-carousel__mat > img {
		transform: none;
	}
}

@media print {
	.eman-carousel__nav,
	.eman-carousel__bar,
	.eman-carousel__frame::before,
	.eman-carousel__frame::after {
		display: none;
	}
	.eman-carousel__viewport {
		overflow: visible;
	}
	.eman-carousel__track {
		flex-wrap: wrap;
	}
}