/* cf_diaporama — style « Diaporama » des galeries (cpg-core, voir cf-diaporama.php).
 *
 * Tout est scopé sous html.cpg-diapo-js : sans JavaScript la galerie reste une
 * grille. Les !important répondent au CSS du bloc Galerie du cœur (sélecteurs
 * en :not(#individual-image), donc de spécificité « id ») et aux styles globaux
 * des thèmes sur button, img et figcaption. Ils ne sortent pas du composant.
 *
 * Réglages par site, sur .cpg-diapo ou plus haut :
 *   --cpg-diapo-accent  couleur des icônes et du focus   (#002149)
 *   --cpg-diapo-legende fond de la légende               (rgba(0,33,73,.85))
 *   --cpg-diapo-ratio   proportions de la scène          (16 / 10)
 *   --cpg-diapo-rayon   arrondi de la scène              (24px)
 */

.cpg-diapo-js .cpg-diapo {
	--cpg-diapo-accent: #002149;
	--cpg-diapo-legende: rgba(0, 33, 73, .85);
	--cpg-diapo-ratio: 16 / 10;
	--cpg-diapo-rayon: 24px;
	--cpg-diapo-reserve: calc(var(--cpg-diapo-reserve-mesure, 108px) + 12px);
	position: relative;
	margin: 1.5em 0;
	max-width: 100%;
}

/* ---- La scène : la galerie elle-même, éléments empilés -------------------- */

.cpg-diapo-js .wp-block-gallery.is-style-diaporama,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: var(--cpg-diapo-ratio, 16 / 10);
	max-height: min(78vh, 620px);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	gap: 0 !important;
	overflow: hidden !important;
	border-radius: var(--cpg-diapo-rayon, 24px);
	background: #1b2430;
	isolation: isolate;
}

/* Diapositives : toutes à la même place, une seule visible. */
.cpg-diapo-js .wp-block-gallery.is-style-diaporama > figure.wp-block-image,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none !important;
	display: block !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease-in-out, visibility 0s linear .4s;
	overflow: hidden;
}
.cpg-diapo-js .wp-block-gallery.is-style-diaporama:not(.cpg-diapo-on) > figure.wp-block-image:first-of-type,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama:not(.cpg-diapo-on) > li:first-child,
.cpg-diapo-js .wp-block-gallery.is-style-diaporama.cpg-diapo-on > figure.wp-block-image.is-active,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama.cpg-diapo-on > li.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease-in-out, visibility 0s;
	z-index: 1;
}

/* Fond flouté tiré de l'image (posé par le script) : une photo en portrait
   n'est pas recadrée, elle se pose sur sa propre couleur. */
.cpg-diapo-js .is-style-diaporama > figure.wp-block-image::before,
.cpg-diapo-js .is-style-diaporama > li::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--cpg-diapo-fond, none) center / cover no-repeat;
	filter: blur(22px) brightness(.72);
	transform: scale(1.08);
	z-index: 0;
}

.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li > figure,
.cpg-diapo-js .is-style-diaporama > figure.wp-block-image > a,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li > figure > a {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 1;
}

.cpg-diapo-js .is-style-diaporama > figure.wp-block-image img,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li img {
	position: relative !important;
	z-index: 1;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 0 !important;
	margin: 0 !important;
	flex: none !important;
}

/* ---- Légende : pastille sur la photo (modèle CHRU) ------------------------ */

.cpg-diapo-js .is-style-diaporama > figure.wp-block-image > figcaption,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li figcaption {
	position: absolute !important;
	left: 16px !important;
	right: auto !important;
	bottom: 16px !important;
	top: auto !important;
	z-index: 2 !important;
	width: auto !important;
	max-width: calc(100% - 32px) !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 7px 12px !important;
	background: var(--cpg-diapo-legende, rgba(0, 33, 73, .85)) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	text-shadow: none !important;
	border-radius: 8px !important;
	pointer-events: none;
}
.cpg-diapo-js .is-style-diaporama > figure.wp-block-image > figcaption:empty,
.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li figcaption:empty {
	display: none !important;
}
/* Place réservée aux points / au compteur en bas à droite. */
.cpg-diapo-js .cpg-diapo--commandes .is-style-diaporama > figure.wp-block-image > figcaption,
.cpg-diapo-js .cpg-diapo--commandes .filebird-block-filebird-gallery.is-style-diaporama > li figcaption {
	max-width: calc(100% - 32px - var(--cpg-diapo-reserve)) !important;
}

/* Légende de la galerie entière, déplacée sous la scène par le script. */
.cpg-diapo-js .cpg-diapo__titre {
	margin: .6em 0 0 !important;
	text-align: center;
	font-size: .9em;
}

/* ---- Commandes ------------------------------------------------------------ */

.cpg-diapo-js .cpg-diapo button.cpg-diapo__btn {
	position: absolute !important;
	z-index: 3 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .9) !important;
	color: var(--cpg-diapo-accent, #002149) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18) !important;
	cursor: pointer;
	line-height: 1 !important;
	font-size: 0 !important;
	text-decoration: none !important;
	transition: background .16s ease;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__btn:hover {
	background: #fff !important;
}
.cpg-diapo-js .cpg-diapo button:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px var(--cpg-diapo-accent, #002149) !important;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.cpg-diapo-js .cpg-diapo .cpg-diapo__prec,
.cpg-diapo-js .cpg-diapo .cpg-diapo__suiv {
	top: 50% !important;
	transform: translateY(-50%) !important;
}
.cpg-diapo-js .cpg-diapo .cpg-diapo__prec { left: 12px !important; }
.cpg-diapo-js .cpg-diapo .cpg-diapo__suiv { right: 12px !important; }

.cpg-diapo-js .cpg-diapo button.cpg-diapo__pause {
	top: 12px !important;
	right: 12px !important;
	width: 36px !important;
	height: 36px !important;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__pause svg {
	width: 16px;
	height: 16px;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__pause svg .plein {
	fill: currentColor;
	stroke: none;
}
.cpg-diapo-js .cpg-diapo__pause .icone-lecture { display: none; }
.cpg-diapo-js .cpg-diapo.est-en-pause .cpg-diapo__pause .icone-pause { display: none; }
.cpg-diapo-js .cpg-diapo.est-en-pause .cpg-diapo__pause .icone-lecture { display: block; }

/* Points : 10 px visibles, 24 px cliquables (RGAA / WCAG 2.5.8). */
.cpg-diapo-js .cpg-diapo__points {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__point {
	position: relative !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 0 !important;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__point::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 7px;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	border: 1px solid rgba(255, 255, 255, .95);
	box-shadow: 0 0 2px rgba(0, 0, 0, .4);
	transition: background .16s ease;
}
.cpg-diapo-js .cpg-diapo button.cpg-diapo__point[aria-current="true"]::before {
	background: #fff;
}

.cpg-diapo-js .cpg-diapo__compteur {
	position: absolute;
	right: 12px;
	bottom: 14px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.cpg-diapo-js .cpg-diapo__annonce {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

@media (max-width: 600px) {
	.cpg-diapo-js .cpg-diapo { --cpg-diapo-ratio: 4 / 3; --cpg-diapo-rayon: 16px; --cpg-diapo-reserve: -12px; }
	.cpg-diapo-js .cpg-diapo button.cpg-diapo__btn { width: 38px !important; height: 38px !important; }
	.cpg-diapo-js .cpg-diapo .cpg-diapo__prec { left: 8px !important; }
	.cpg-diapo-js .cpg-diapo .cpg-diapo__suiv { right: 8px !important; }
	.cpg-diapo-js .cpg-diapo button.cpg-diapo__pause { width: 32px !important; height: 32px !important; top: 8px !important; right: 8px !important; }
	.cpg-diapo-js .is-style-diaporama > figure.wp-block-image > figcaption,
	.cpg-diapo-js .filebird-block-filebird-gallery.is-style-diaporama > li figcaption {
		left: 10px !important;
		bottom: 44px !important;
		max-width: calc(100% - 20px) !important;
		font-size: 13px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpg-diapo-js .is-style-diaporama > * { transition: none !important; }
}