/**
 * Mosaïque d'images (Floriane) — styles du module.
 * Autonome : les variables du template sont utilisées si présentes,
 * avec des valeurs de repli sinon.
 */

.flo-mosa {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}
.flo-mosa--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flo-mosa--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flo-mosa--cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.flo-mosa__tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(28, 47, 74, .14);
	text-decoration: none;
	transition: box-shadow .45s, transform .45s;
}
a.flo-mosa__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(28, 47, 74, .24);
}
.flo-mosa__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.flo-mosa__tile:hover .flo-mosa__img { transform: scale(1.07); }

/* face titre : voile marine semi-transparent (l'image transparaît) */
.flo-mosa__txt {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1.1rem;
	text-align: center;
	background: linear-gradient(155deg, rgba(30, 50, 79, .86), rgba(13, 23, 40, .93));
	color: #fdfbf5;
	opacity: 0;
	transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}
.flo-mosa__title {
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.45;
}
.flo-mosa__txt small {
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--flo-gold-soft, #d9b45f);
}
/* le titre monte doucement en apparaissant */
.flo-mosa__txt > * {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity .6s cubic-bezier(.4, 0, .2, 1) .1s,
		transform .7s cubic-bezier(.22, .61, .36, 1) .1s;
}
/* damier : face visible par défaut + inversion croisée au survol */
.flo-mosa__tile.is-flip .flo-mosa__txt,
.flo-mosa__tile:hover .flo-mosa__txt { opacity: 1; }
.flo-mosa__tile.is-flip:hover .flo-mosa__txt { opacity: 0; }
.flo-mosa__tile.is-flip .flo-mosa__txt > *,
.flo-mosa__tile:hover .flo-mosa__txt > * { opacity: 1; transform: translateY(0); }
.flo-mosa__tile.is-flip:hover .flo-mosa__txt > * { opacity: 0; transform: translateY(10px); }

/* mode « titres » : photo + bandeau titre toujours visible en bas */
.flo-mosa--titres .flo-mosa__txt {
	opacity: 1;
	justify-content: flex-end;
	padding: 1rem .9rem .95rem;
	background: linear-gradient(180deg, rgba(13, 23, 40, 0) 40%, rgba(13, 23, 40, .84) 84%);
	transition: background .6s ease;
}
.flo-mosa--titres .flo-mosa__txt > * { opacity: 1; transform: none; }
.flo-mosa--titres .flo-mosa__title { font-size: .92rem; letter-spacing: .1em; line-height: 1.4; }
.flo-mosa--titres .flo-mosa__tile:hover .flo-mosa__txt {
	background: linear-gradient(180deg, rgba(13, 23, 40, .18) 0%, rgba(13, 23, 40, .92) 82%);
}

@media (max-width: 900px) {
	.flo-mosa, .flo-mosa--cols3, .flo-mosa--cols5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.flo-mosa__img { transition: none; }
	.flo-mosa__tile:hover .flo-mosa__img { transform: none; }
}

/* tuiles popup sans titre (galerie) : voile + loupe au survol */
.flo-mosa__tile.flo-zoom::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfbf5' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.8-4.8'/%3E%3Cpath d='M11 8.2v5.6M8.2 11h5.6'/%3E%3C/svg%3E") center / 44px no-repeat,
		radial-gradient(circle at center, rgba(13, 23, 40, .22), rgba(13, 23, 40, .58));
	opacity: 0;
	transform: scale(1.12);
	transition:
		opacity .45s ease,
		transform .65s cubic-bezier(.22, .61, .36, 1);
}
.flo-mosa__tile.flo-zoom:hover::after {
	opacity: 1;
	transform: scale(1);
}

/* ----- Lightbox de secours (si le template n'en fournit pas) ----- */
.flo-mosa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10, 16, 28, .92);
	padding: 2.5rem;
}
.flo-mosa-lightbox.is-open { display: flex; }
.flo-mosa-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.flo-mosa-lightbox button {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	padding: .6rem .9rem;
	opacity: .75;
	transition: opacity .3s;
}
.flo-mosa-lightbox button:hover { opacity: 1; }
.flo-mosa-lightbox .flo-mosa-lb__close { top: .8rem; right: 1rem; font-size: 2.6rem; }
.flo-mosa-lightbox .flo-mosa-lb__prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.flo-mosa-lightbox .flo-mosa-lb__next { right: .6rem; top: 50%; transform: translateY(-50%); }