/**
 * Media Carousel Gallery — styles front-end.
 * Toutes les couleurs sont pilotées par variables CSS (surchargeables via
 * les réglages du plugin ou du CSS personnalisé).
 */

.mcg-carousel {
	/*
	 * NB : on ne redéclare pas ici de valeurs par défaut pour --mcg-color-*.
	 * Ces variables sont injectées globalement sur :root depuis les réglages
	 * du plugin (voir MCG_Assets::print_custom_css) ; les redéclarer ici avec
	 * des valeurs fixes empêcherait cet héritage et rendrait les couleurs
	 * choisies dans Réglages > Media Carousel sans aucun effet. Les valeurs
	 * de repli sont fournies via var(--x, repli) au niveau de chaque usage.
	 */
	--mcg-fit: cover;

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 6px;
}

.mcg-carousel * {
	box-sizing: border-box;
}

/*
 * Pleine largeur (width="full") : le carrousel déborde jusqu'aux bords de
 * la fenêtre même s'il est imbriqué dans un conteneur de contenu centré
 * (ex. .entry-content d'un thème classique). Technique dite "full-bleed" :
 * on annule la largeur du parent en utilisant 100vw + un décalage de marge
 * basé sur le centre de la fenêtre (double formulation left/margin pour
 * une meilleure compatibilité entre thèmes).
 *
 * Limite connue : si un élément parent possède "overflow: hidden" (ou
 * "overflow-x: hidden"), ce dernier coupera le débordement et empêchera
 * le carrousel d'atteindre réellement les bords de l'écran, quel que soit
 * le CSS ci-dessous. C'est une contrainte du thème, pas du plugin — il
 * faut alors retirer cet overflow sur le conteneur parent concerné.
 */
.mcg-carousel.mcg-full-width {
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	border-radius: 0;
}

.mcg-carousel.mcg-full-width .mcg-slide-inner {
	border-radius: 0;
}

.mcg-track-viewport {
	overflow: hidden;
	width: 100%;
	height: var(--mcg-height, auto);
}

.mcg-track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	will-change: transform;
	transition: transform var(--mcg-speed, 500ms) ease;
}

.mcg-carousel[data-effect="fade"] .mcg-track {
	transition: none;
}

.mcg-slide {
	position: relative;
	flex-shrink: 0;
	height: 100%;
}

/*
 * Clones utilisés pour le défilement circulaire sans à-coup (voir carousel.js,
 * setupLoopClones). Purement décoratifs : masqués des lecteurs d'écran et
 * non cliquables, même s'ils sont momentanément visibles pendant la
 * transition qui les fait apparaître à l'écran.
 */
.mcg-slide.mcg-clone {
	pointer-events: none;
}

.mcg-carousel[data-effect="fade"] .mcg-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--mcg-speed, 500ms) ease;
	pointer-events: none;
}

.mcg-carousel[data-effect="fade"] .mcg-slide.mcg-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.mcg-slide-inner {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: #f0f0f1;
}

.mcg-slide-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.mcg-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mcg-fit, cover);
	transition: transform 0.35s ease, filter 0.35s ease;
}

.mcg-track-viewport:not([style*="height"]) .mcg-image {
	height: auto;
}

.mcg-zoom-hover:hover .mcg-image {
	transform: scale(1.06);
}

.mcg-grayscale-hover .mcg-image {
	filter: grayscale(100%);
}

.mcg-grayscale-hover:hover .mcg-image {
	filter: grayscale(0%);
}

/* Légendes */
.mcg-caption {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
}

.mcg-caption-below {
	padding: 8px 4px 0;
	color: inherit;
}

.mcg-caption-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 14px;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

/* Flèches */
.mcg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--mcg-color-arrows-bg, rgba(0, 0, 0, 0.35));
	color: var(--mcg-color-arrows, #ffffff);
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.mcg-arrow:hover {
	background: rgba(0, 0, 0, 0.55);
}

.mcg-arrow:focus-visible {
	outline: 2px solid var(--mcg-color-arrows, #ffffff);
	outline-offset: 2px;
}

.mcg-arrow-prev {
	left: 12px;
}

.mcg-arrow-next {
	right: 12px;
}

.mcg-arrow[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Puces de pagination */
.mcg-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 5;
}

.mcg-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--mcg-color-dots, #ffffff);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mcg-dot:hover {
	opacity: 0.85;
}

.mcg-dot.mcg-dot-active {
	opacity: 1;
	background: var(--mcg-color-dots-active, #2271b1);
	transform: scale(1.2);
}

.mcg-dots:not(.mcg-clickable) .mcg-dot {
	cursor: default;
	pointer-events: none;
}

/* RTL */
.mcg-carousel[data-rtl="1"] {
	direction: rtl;
}

/* Lightbox */
.mcg-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	padding: 24px;
}

.mcg-lightbox-overlay.mcg-open {
	opacity: 1;
	visibility: visible;
}

.mcg-lightbox-img {
	max-width: 92vw;
	max-height: 88vh;
	display: block;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mcg-lightbox-close,
.mcg-lightbox-prev,
.mcg-lightbox-next {
	position: absolute;
	z-index: 2;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.mcg-lightbox-close:hover,
.mcg-lightbox-prev:hover,
.mcg-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.mcg-lightbox-close:focus-visible,
.mcg-lightbox-prev:focus-visible,
.mcg-lightbox-next:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Bouton "Quitter" : icône + libellé, plus large et plus visible qu'un simple rond. */
.mcg-lightbox-close {
	top: 16px;
	right: 16px;
	width: auto;
	height: 44px;
	padding: 0 18px 0 14px;
	border-radius: 22px;
	gap: 8px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.mcg-lightbox-close:hover {
	background: rgba(0, 0, 0, 0.75);
}

.mcg-lightbox-close-icon {
	font-size: 22px;
	line-height: 1;
}

.mcg-lightbox-close-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.mcg-lightbox-close-label {
		display: none;
	}
	.mcg-lightbox-close {
		width: 44px;
		padding: 0;
		gap: 0;
	}
}

.mcg-lightbox-prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.mcg-lightbox-next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.screen-reader-text,
.mcg-live-region {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Conteneur du hero automatique (voir MCG_Hero), injecté juste après <body>. */
.mcg-hero-wrapper {
	margin: 0;
}

/* Notice éditeur (aucune image trouvée) */
.mcg-empty-notice {
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 4px;
	color: #664d03;
}

/* Responsive : dégrade proprement même avant l'exécution du JS */
@media (max-width: 782px) {
	.mcg-arrow {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}