/* Mirage Mosaïque — galerie (variables réglées par galerie) */

.mm-grid {
	--mm-cols: 3;
	--mm-cols-m: 2;
	--mm-ratio: 1 / 1;
	--mm-gap: 10px;
	--mm-radius: 0px;
	--mm-overlay: rgba(1, 0, 99, .82);
	--mm-veil: rgba(1, 0, 99, .38);
	display: grid;
	grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr));
	gap: var(--mm-gap);
	margin: 0;
	padding: 0;
}

.mm-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--mm-ratio);
	border-radius: var(--mm-radius);
	background: #e5e7eb;
	text-decoration: none;
	color: #fff;
}

.mm-item .mm-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transform: scale(var(--mm-z, 1)); /* zoom du cadrage */
	transition: transform .45s ease;
}

/* Effets au survol : petit zoom, voile, les deux, ou aucun. */

.mm-effet-zoom .mm-item:hover .mm-img,
.mm-effet-zoom .mm-item:focus-visible .mm-img,
.mm-effet-zoom-voile .mm-item:hover .mm-img,
.mm-effet-zoom-voile .mm-item:focus-visible .mm-img {
	transform: scale(calc(var(--mm-z, 1) * 1.06));
}

.mm-effet-voile .mm-item::after,
.mm-effet-zoom-voile .mm-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mm-veil);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.mm-effet-voile .mm-item:hover::after,
.mm-effet-voile .mm-item:focus-visible::after,
.mm-effet-zoom-voile .mm-item:hover::after,
.mm-effet-zoom-voile .mm-item:focus-visible::after {
	opacity: 1;
}

/* Le titre reste au-dessus du voile. */
.mm-item .mm-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: .7em 1em;
	background: var(--mm-overlay);
	color: var(--mm-t-color, #fff);
	font-size: var(--mm-t-size, 14px);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	overflow-wrap: break-word; /* coupe un mot seulement s'il ne tient pas sur une ligne */
	transition: transform .25s ease, opacity .25s ease;
}

/* Style du titre */

.mm-tgras .mm-title {
	font-weight: 700;
}

.mm-tmaj .mm-title {
	text-transform: uppercase;
	letter-spacing: .05em;
}

.mm-talign-centre .mm-title {
	text-align: center;
}

.mm-talign-droite .mm-title {
	text-align: right;
}

/* Position : en haut */
.mm-tpos-haut .mm-title {
	top: 0;
	bottom: auto;
}

/* Position : au centre (le texte occupe toute la photo) */
.mm-tpos-centre .mm-title {
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Fond : dégradé */
.mm-tfond-degrade .mm-title {
	padding-top: 2.6em;
	background: linear-gradient(to top, var(--mm-overlay), transparent);
}

.mm-tfond-degrade.mm-tpos-haut .mm-title {
	padding-top: .7em;
	padding-bottom: 2.6em;
	background: linear-gradient(to bottom, var(--mm-overlay), transparent);
}

.mm-tfond-degrade.mm-tpos-centre .mm-title {
	padding-top: .7em;
	background: radial-gradient(ellipse at center, var(--mm-overlay), transparent 75%);
}

/* Fond : aucun (texte avec ombre pour rester lisible) */
.mm-tfond-aucun .mm-title {
	background: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35);
}

/* Titre au survol */
.mm-titres-survol .mm-title {
	transform: translateY(100%);
	opacity: 0;
}

.mm-titres-survol.mm-tpos-haut .mm-title {
	transform: translateY(-100%);
}

.mm-titres-survol.mm-tpos-centre .mm-title {
	transform: none;
}

.mm-titres-survol .mm-item:hover .mm-title,
.mm-titres-survol .mm-item:focus-visible .mm-title {
	transform: none;
	opacity: 1;
}

/* Taille proportionnelle à la largeur de chaque photo (avec minimum et maximum). */
.mm-tsize-prop .mm-item {
	container-type: inline-size;
}

.mm-tsize-prop .mm-title {
	font-size: clamp(11px, var(--mm-t-cqi, 7cqi), 30px);
}

/* Titre masqué (selon l'appareil) : invisible, mais toujours lu par les lecteurs d'écran. */
@media (min-width: 601px) {
	.mm-titres-jamais .mm-title {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		background: none;
	}
}

@media (max-width: 600px) {
	.mm-grid {
		grid-template-columns: repeat(var(--mm-cols-m), minmax(0, 1fr));
	}

	.mm-title {
		padding: .55em .7em;
	}

	.mm-tsize-fixe .mm-title {
		font-size: calc(var(--mm-t-size, 14px) * .85);
	}

	/* Pas de survol sur téléphone : le titre s'affiche ou non selon le réglage « téléphone ». */
	.mm-titres-m-toujours .mm-title {
		transform: none !important;
		opacity: 1 !important;
	}

	.mm-titres-m-jamais .mm-title {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		background: none;
	}
}

@media (hover: none) {
	.mm-titres-survol .mm-title,
	.mm-titres-survol.mm-tpos-haut .mm-title {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-item .mm-img,
	.mm-item::after,
	.mm-title {
		transition: none;
	}
}