/**
 * Saturne FlipBook — styles.
 */

.sf-flipbook-wrap {
	margin: 1.5em auto;
	width: 100%;
}

.sf-flipbook {
	margin: 0 auto;
	touch-action: pan-y;
}

.sf-flipbook .sf-page {
	background: #fff;
	overflow: hidden;
}

.sf-flipbook .sf-page img {
	width: 100%;
	height: 100%;
	display: block;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.sf-flipbook-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 2em;
	font-size: 14px;
	color: #555;
	text-align: center;
}

.sf-flipbook-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: 0.75em;
}

.sf-flipbook-controls button {
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 22px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sf-flipbook-controls button:hover {
	background: var( --sf-btn-bg-hover, #ececec );
	border-color: var( --sf-btn-border, #999 );
}

.sf-flipbook-controls button:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.sf-page-counter {
	font-size: 14px;
	color: var( --sf-counter-text, #555 );
	min-width: 60px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- Mode lightbox : couverture cliquable --- */
/* Bloc englobant : couverture + titre dessous. */
.sf-cover-block {
	display: inline-block;
	margin: 1.5em auto;
	text-align: center;
	line-height: normal;
}

.sf-flipbook-cover-wrap {
	position: relative;
	cursor: pointer;
	display: inline-block;
	line-height: 0;
	border-radius: 2px;
	/* Perspective pour l'effet d'ouverture 3D au survol. */
	perspective: 1600px;
	transition: transform 0.25s ease;
}

/* Pile de pages : fines couches blanches sur le bord droit de la couverture. */
.sf-flipbook-cover-wrap:not(.sf-gallery-cover)::before {
	content: "";
	position: absolute;
	background: #fff;
	border-radius: 2px;
	z-index: 1;
	pointer-events: none;
	/* Calée sur la couverture seule (le wrapper ne contient plus le titre). */
	inset: 2px -6px 2px 0;
	box-shadow:
		2px 0 0 -1px #f5f5f5,
		4px 0 0 -2px #efefef,
		6px 0 0 -3px #e9e9e9;
}

/* La couverture (page de dessus) pivote depuis la reliure (bord gauche). */
.sf-flipbook-cover-wrap:not(.sf-gallery-cover) .sf-cover-thumb {
	position: relative;
	transform-origin: left center;
	transform: rotateY( 0deg );
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.3s ease;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
	border-radius: 2px;
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform;
	z-index: 2;
}

.sf-flipbook-cover-wrap:hover,
.sf-flipbook-cover-wrap:focus-visible {
	outline: none;
}

/* Au survol : la couverture s'entrouvre, révélant la tranche de pages. */
.sf-flipbook-cover-wrap:not(.sf-gallery-cover):hover .sf-cover-thumb,
.sf-flipbook-cover-wrap:not(.sf-gallery-cover):focus-visible .sf-cover-thumb {
	transform: rotateY( -26deg );
	box-shadow: 18px 14px 40px rgba( 0, 0, 0, 0.28 );
}

/* Galerie : effet léger de soulèvement (pas de pivot 3D pour éviter le chevauchement). */
/* --- Galerie : même effet d'ouverture, angle plus discret (18°). --- */
.sf-gallery-cover {
	perspective: 1400px;
	transition: transform 0.2s ease;
}
.sf-gallery-cover .sf-cover-thumb {
	position: relative;
	transform-origin: left center;
	transform: rotateY( 0deg );
	transition: transform 0.4s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.3s ease;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
	border-radius: 2px;
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform;
	z-index: 2;
}
/* Tranche de pages sur le bord droit. */
.sf-gallery-cover::before {
	content: "";
	position: absolute;
	background: #fff;
	border-radius: 2px;
	z-index: 1;
	pointer-events: none;
	inset: 2px -5px 2px 0;
	box-shadow:
		2px 0 0 -1px #f5f5f5,
		4px 0 0 -2px #efefef,
		5px 0 0 -3px #e9e9e9;
}
/* Au survol : la vignette passe au-dessus des voisines et s'entrouvre. */
.sf-gallery-cover:hover,
.sf-gallery-cover:focus-visible {
	z-index: 5;
	outline: none;
}
.sf-gallery-cover:hover .sf-cover-thumb,
.sf-gallery-cover:focus-visible .sf-cover-thumb {
	transform: rotateY( -18deg );
	box-shadow: 14px 12px 34px rgba( 0, 0, 0, 0.28 );
}

.sf-cover-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.sf-cover-thumb .sf-flipbook-loading {
	min-height: 320px;
	min-width: 220px;
}

.sf-cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba( 0, 0, 0, 0 );
	opacity: 0;
	transition: opacity 0.3s ease;
	color: #fff;
	text-align: center;
	line-height: 1.3;
	z-index: 4;
	pointer-events: none;
}

/* L'icône/voile n'apparaît que discrètement, l'effet principal étant l'ouverture. */
.sf-flipbook-cover-wrap:hover .sf-cover-overlay,
.sf-flipbook-cover-wrap:focus-visible .sf-cover-overlay {
	opacity: 1;
	background: rgba( 0, 0, 0, 0.04 );
}

.sf-cover-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.sf-cover-icon svg {
	display: block;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.4 ) );
}

/* Titre affiché sous la couverture (mode lightbox). */
.sf-cover-title-below {
	margin-top: 12px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

.sf-cover-title {
	font-size: 15px;
	font-weight: 600;
	padding: 0 12px;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

/* --- Overlay plein écran --- */
body.sf-overlay-open {
	overflow: hidden;
}

.sf-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 20, 20, 25, 0.92 );
	background: color-mix( in srgb, var( --sf-overlay-bg, #14141a ) 92%, transparent );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2vh 2vw;
	box-sizing: border-box;
	animation: sf-fade-in 0.2s ease;
}

@keyframes sf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sf-overlay-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: auto;
	min-width: 0;
	min-height: 0;
}

.sf-overlay .sf-flipbook {
	margin: 0;
}

.sf-overlay-close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sf-overlay-close:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

.sf-overlay .sf-flipbook-controls {
	margin-top: 14px;
}

.sf-overlay .sf-flipbook-controls button {
	background: rgba( 255, 255, 255, 0.15 );
	border-color: transparent;
	color: #fff;
}

.sf-overlay .sf-flipbook-controls button:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

.sf-overlay .sf-page-counter {
	color: #eee;
}

.sf-overlay-loading {
	position: absolute;
	color: #eee;
}

/* --- Zoom --- */
.sf-zoom-group {
	display: inline-flex;
	gap: 6px;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}

.sf-zoom-group button {
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 20px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sf-zoom-group button:hover:not(:disabled) {
	background: var( --sf-btn-bg-hover, #ececec );
	border-color: var( --sf-btn-border, #999 );
}

.sf-zoom-group button:disabled {
	opacity: 0.4;
	cursor: default;
}

.sf-flipbook.sf-zoomed {
	cursor: grab;
	touch-action: none;
}

.sf-flipbook.sf-zoomed:active {
	cursor: grabbing;
}

/* Le conteneur de scène masque le débordement d'un livre zoomé, sans rogner
   la barre de contrôles qui vit en dehors de la scène. */
.sf-flipbook-stage,
.sf-overlay-stage {
	overflow: hidden;
}

.sf-flipbook-stage {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Boutons zoom dans l'overlay (thème sombre). */
.sf-overlay .sf-zoom-group button {
	background: rgba( 255, 255, 255, 0.15 );
	border-color: transparent;
	color: #fff;
}

.sf-overlay .sf-zoom-group button:hover:not(:disabled) {
	background: rgba( 255, 255, 255, 0.3 );
}

/* --- Galerie par catégorie --- */
.sf-gallery {
	display: grid;
	gap: 28px 22px;
	margin: 1.5em 0;
}

.sf-gallery-cols-1 { grid-template-columns: repeat( 1, 1fr ); }
.sf-gallery-cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.sf-gallery-cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.sf-gallery-cols-4 { grid-template-columns: repeat( 4, 1fr ); }
.sf-gallery-cols-5 { grid-template-columns: repeat( 5, 1fr ); }
.sf-gallery-cols-6 { grid-template-columns: repeat( 6, 1fr ); }

@media ( max-width: 782px ) {
	.sf-gallery-cols-4,
	.sf-gallery-cols-5,
	.sf-gallery-cols-6 { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 540px ) {
	.sf-gallery-cols-2,
	.sf-gallery-cols-3,
	.sf-gallery-cols-4,
	.sf-gallery-cols-5,
	.sf-gallery-cols-6 { grid-template-columns: repeat( 2, 1fr ); }
}

.sf-gallery-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sf-gallery .sf-gallery-cover {
	margin: 0;
	width: 100%;
	display: block;
}

.sf-gallery .sf-cover-thumb {
	min-height: 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sf-gallery .sf-cover-thumb .sf-flipbook-loading {
	min-height: 220px;
	width: 100%;
}

.sf-gallery-title {
	margin-top: 10px;
	font-size: var( --sf-gtitle-size, 14px );
	font-weight: var( --sf-gtitle-weight, 600 );
	color: var( --sf-gtitle-color, #333 );
	text-align: center;
	line-height: 1.3;
}

/* --- Bouton plein écran (mode intégré) --- */
.sf-fs-group {
	display: inline-flex;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}

.sf-fs-group button {
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 18px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sf-fs-group button:hover {
	background: var( --sf-btn-bg-hover, #ececec );
	border-color: var( --sf-btn-border, #999 );
}

/* Groupes première/dernière et téléchargement en mode intégré (thème clair). */
.sf-embed-nav-group,
.sf-embed-dl-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}

.sf-embed-dl-group .sf-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 20px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sf-embed-dl-group .sf-download:hover {
	background: var( --sf-btn-bg-hover, #ececec );
	border-color: var( --sf-btn-border, #999 );
}

/* --- Carrousel de galerie --- */
.sf-gallery-carousel-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 1.5em 0;
}

.sf-gallery-carousel {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	/* Barre de défilement masquée : la navigation se fait aux flèches / au
	   glisser tactile. Le défilement reste pleinement fonctionnel. */
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* anciens Edge/IE */
}

.sf-gallery-carousel::-webkit-scrollbar {
	display: none;                  /* Chrome, Safari, Edge moderne */
}

/* Largeur d'une vignette = fraction de la zone visible selon les colonnes.
   On retranche l'espace des gouttières (22px) réparti sur N colonnes. */
.sf-gallery-carousel .sf-gallery-item {
	scroll-snap-align: start;
	flex: 0 0 auto;
}
.sf-gallery-carousel.sf-gallery-cols-1 .sf-gallery-item { width: calc( 100% ); }
.sf-gallery-carousel.sf-gallery-cols-2 .sf-gallery-item { width: calc( ( 100% - 22px ) / 2 ); }
.sf-gallery-carousel.sf-gallery-cols-3 .sf-gallery-item { width: calc( ( 100% - 44px ) / 3 ); }
.sf-gallery-carousel.sf-gallery-cols-4 .sf-gallery-item { width: calc( ( 100% - 66px ) / 4 ); }
.sf-gallery-carousel.sf-gallery-cols-5 .sf-gallery-item { width: calc( ( 100% - 88px ) / 5 ); }
.sf-gallery-carousel.sf-gallery-cols-6 .sf-gallery-item { width: calc( ( 100% - 110px ) / 6 ); }

@media ( max-width: 782px ) {
	.sf-gallery-carousel.sf-gallery-cols-4 .sf-gallery-item,
	.sf-gallery-carousel.sf-gallery-cols-5 .sf-gallery-item,
	.sf-gallery-carousel.sf-gallery-cols-6 .sf-gallery-item { width: calc( ( 100% - 44px ) / 3 ); }
}

@media ( max-width: 540px ) {
	.sf-gallery-carousel .sf-gallery-item { width: calc( ( 100% - 22px ) / 2 ); }
}

.sf-carousel-prev,
.sf-carousel-next {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 22px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.sf-carousel-prev:hover:not(:disabled),
.sf-carousel-next:hover:not(:disabled) {
	background: var( --sf-btn-bg-hover, #ececec );
	border-color: var( --sf-btn-border, #999 );
}

.sf-carousel-prev:disabled,
.sf-carousel-next:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Position du titre dans la galerie --- */

/* Bandeau de titre posé sur la couverture (modes overlay et hover). */
.sf-cover-title-band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 12px 10px;
	/* Fallback : dégradé noir. Si --sf-band-bg est défini, color-mix crée un
	   dégradé de cette couleur vers transparent (navigateurs récents). */
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.72 ) 0%, rgba( 0, 0, 0, 0.45 ) 60%, rgba( 0, 0, 0, 0 ) 100% );
	background: linear-gradient( to top,
		color-mix( in srgb, var( --sf-band-bg, #000 ) 72%, transparent ) 0%,
		color-mix( in srgb, var( --sf-band-bg, #000 ) 45%, transparent ) 60%,
		transparent 100% );
	color: var( --sf-band-text, #fff );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
	pointer-events: none;
}

/* Mode "sur le document" : bandeau toujours visible. */
.sf-title-overlay .sf-cover-title-band {
	opacity: 1;
}

/* Mode "au survol" : bandeau caché au repos, apparaît au survol/focus
   (desktop uniquement — sur écran tactile il reste masqué). */
.sf-title-hover .sf-cover-title-band {
	opacity: 0;
	transition: opacity 0.2s ease;
}

@media ( hover: hover ) {
	.sf-title-hover .sf-flipbook-cover-wrap:hover .sf-cover-title-band,
	.sf-title-hover .sf-flipbook-cover-wrap:focus-visible .sf-cover-title-band {
		opacity: 1;
	}
}

/* Carrousel : masque les flèches quand le contenu tient sans défilement. */
.sf-gallery-carousel-wrap.sf-no-scroll .sf-carousel-prev,
.sf-gallery-carousel-wrap.sf-no-scroll .sf-carousel-next {
	display: none;
}

/* === Plein écran : barre latérale de miniatures (lot 1) === */

/* Conteneur central : sidebar (repliée) + scène. */
.sf-overlay-main {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex: 1;
	width: 100%;
	min-height: 0;
	gap: 0;
}

/* La scène prend toute la place ; on garde le centrage existant. */
.sf-overlay-main .sf-overlay-stage {
	flex: 1;
}

/* Barre latérale repliée par défaut (largeur 0). */
.sf-thumbs {
	width: 0;
	overflow: hidden;
	transition: width 0.25s ease;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	background: rgba( 0, 0, 0, 0.25 );
	border-radius: 8px;
}

.sf-overlay.sf-thumbs-open .sf-thumbs {
	width: 180px;
	margin-right: 14px;
}

.sf-thumbs-title {
	color: #eee;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 12px 8px;
	flex: 0 0 auto;
	opacity: 0.7;
}

.sf-thumbs-list {
	overflow-y: auto;
	padding: 0 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
}

.sf-thumb {
	position: relative;
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.sf-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 );
}

.sf-thumb:hover {
	transform: translateY( -2px );
	border-color: rgba( 255, 255, 255, 0.5 );
}

.sf-thumb-active {
	border-color: #fff;
}

.sf-thumb-num {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba( 0, 0, 0, 0.7 );
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 3px;
}

/* Bouton miniatures actif. */
.sf-thumbs-toggle.sf-active {
	background: rgba( 255, 255, 255, 0.35 );
}

/* Groupes de boutons dans la barre de contrôles du plein écran. */
.sf-nav-group,
.sf-thumbs-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sf-nav-group {
	padding: 0 12px;
	border-left: 1px solid rgba( 128, 128, 128, 0.3 );
	border-right: 1px solid rgba( 128, 128, 128, 0.3 );
	margin: 0 8px;
}

/* Les boutons première/dernière reprennent le style des autres boutons overlay. */
.sf-overlay .sf-first,
.sf-overlay .sf-last,
.sf-overlay .sf-thumbs-toggle {
	cursor: pointer;
	border: 1px solid transparent;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	font-size: 18px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease;
}

.sf-overlay .sf-first:hover,
.sf-overlay .sf-last:hover,
.sf-overlay .sf-thumbs-toggle:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

/* Sur mobile : la barre latérale passe en superposition pour ne pas écraser
   la scène. */
@media ( max-width: 640px ) {
	.sf-overlay.sf-thumbs-open .sf-thumbs {
		position: absolute;
		top: 60px;
		left: 10px;
		bottom: 80px;
		width: 120px;
		z-index: 5;
		margin-right: 0;
	}
}

/* === Partage (deep-link) === */
.sf-share-group {
	display: inline-flex;
	align-items: center;
}

.sf-overlay .sf-share-toggle {
	cursor: pointer;
	border: 1px solid transparent;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	font-size: 18px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease;
}

.sf-overlay .sf-share-toggle:hover,
.sf-overlay .sf-share-toggle.sf-active {
	background: rgba( 255, 255, 255, 0.32 );
}

.sf-share-panel {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX( -50% );
	width: min( 92vw, 440px );
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.4 );
	padding: 18px;
	z-index: 10;
	animation: sf-fade-in 0.15s ease;
}

.sf-share-title {
	font-size: 16px;
	font-weight: 600;
	color: #222;
	text-align: center;
	margin-bottom: 14px;
}

.sf-share-row {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.sf-share-url {
	flex: 1;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	color: #333;
	min-width: 0;
}

.sf-share-copy {
	flex: 0 0 auto;
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	padding: 8px 14px;
	font-size: 13px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.sf-share-copy:hover {
	background: #135e96;
}

.sf-share-nets {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.sf-share-net {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sf-share-net:hover {
	opacity: 0.88;
	transform: translateY( -2px );
}

.sf-share-net svg {
	display: block;
}

.sf-share-fb   { background: #1877f2; }
.sf-share-x    { background: #000000; }
.sf-share-in   { background: #0a66c2; }
.sf-share-wa   { background: #25d366; }
.sf-share-mail { background: #555555; }

@media ( max-width: 640px ) {
	.sf-share-panel { bottom: 90px; }
}

/* Bouton téléchargement PDF (plein écran). */
.sf-overlay .sf-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid transparent;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: 6px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.sf-overlay .sf-download:hover {
	background: rgba( 255, 255, 255, 0.32 );
}

/* === Bouton son de page === */
.sf-sound-group {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}

/* Thème clair (mode intégré) — suit les variables de boutons. */
.sf-sound-group .sf-sound {
	cursor: pointer;
	border: 1px solid var( --sf-btn-border, #ccc );
	background: var( --sf-btn-bg, #f7f7f7 );
	color: var( --sf-btn-text, #333 );
	font-size: 16px;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease;
}

.sf-sound-group .sf-sound:hover {
	background: var( --sf-btn-bg-hover, #ececec );
}

/* Thème sombre (overlay). */
.sf-sound-group.sf-sound-dark .sf-sound {
	border-color: transparent;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
}

.sf-sound-group.sf-sound-dark .sf-sound:hover,
.sf-sound-group.sf-sound-dark .sf-sound.sf-active {
	background: rgba( 255, 255, 255, 0.3 );
}

/* Légère atténuation quand le son est coupé. */
.sf-sound:not(.sf-active) {
	opacity: 0.6;
}

/* Centrage des icônes SVG dans les boutons de contrôle. */
.sf-flipbook-controls button,
.sf-share-toggle,
.sf-sound,
.sf-thumbs-toggle,
.sf-first,
.sf-last,
.sf-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sf-flipbook-controls button svg,
.sf-share-net svg {
	display: block;
}