/* ════════════════════════════════════════════════════════════
   BLOC ACF : Mosaïque photos + contenu central — MyProd
   Grille 7 colonnes (grid-auto-rows: 165px par colonne), léger
   décalage vertical entre colonnes, parallax au scroll par colonne,
   contenu central toujours lisible (carte opaque), stickers
   déplaçables superposés.
   ════════════════════════════════════════════════════════════ */

.bloc-mosaique-photos {
	position: relative;
	overflow: hidden;
	padding: 80px 24px;
}

/* ── Contenu central ──
   Carte centrée par-dessus la grille, dimensionnée pour se loger dans
   le plus grand espace vide structurel (colonne 4 — voir plus bas,
   400px). Elle ne "cache" pas des photos existantes : les colonnes 2 à
   6 ont un vrai vide à cet endroit, aucune image n'y est rendue. */

.bloc-mosaique-photos__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 100%;
	max-width: 640px;
	max-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	padding: 0 24px;
	overflow: hidden;
}

.bloc-mosaique-photos__card {
	pointer-events: auto;
	text-align: center;
}

.bloc-mosaique-photos__title {
	margin: 0 0 24px;
}

.bloc-mosaique-photos__text {
	margin: 0 0 32px;
}

.bloc-mosaique-photos__text p:last-child {
	margin-bottom: 0;
}

.bloc-mosaique-photos__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 999px;
	background: #792C3E;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ── Grille de 7 colonnes ── */

.bloc-mosaique-photos__grid {
	position: relative;
	z-index: 1;
	height: 100vh;
	display: flex;
	align-items: stretch; /* toutes les colonnes partagent la même hauteur (celle de la plus haute, colonne 4) */
	gap: 16px;
	max-width: unset;
	margin: 0 auto;
}

.bloc-mosaique-photos__col {
	flex: 1 1 0;
	min-width: 0;
	will-change: transform;
}

/* .col-inner centre l'ensemble (haut + espace + bas) verticalement
   dans la hauteur partagée de la ligne. Pour les colonnes 2 à 6, ça
   centre le "vide" dessiné par .gap sur la même ligne horizontale que
   les autres colonnes. Pour les colonnes 1 et 7 (pas de .gap), ça
   centre simplement leur unique bloc d'images — exactement
   l'alignement demandé. */
.bloc-mosaique-photos__col-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.bloc-mosaique-photos__images-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bloc-mosaique-photos__img {
	position: relative;
	height: 165px;
	border-radius: 20px;
	overflow: hidden;
	background-color: #e7e7e7; /* le temps du chargement */
	cursor: pointer;
	/* Le transform (rotateX/rotateY/scale) est piloté en JS au survol
	   (voir script.js, initImageTilt) ; cette transition ne sert qu'au
	   retour en douceur à la sortie de la souris (pendant le survol
	   actif, la transition est désactivée en JS pour un suivi réactif
	   du curseur, sans lag). */
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	will-change: transform;
}

.bloc-mosaique-photos__img.is-tilting {
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
	z-index: 3;
}

/* Le vrai espace vide structurel : aucune image n'est rendue ici. */
.bloc-mosaique-photos__gap {
	flex-shrink: 0;
}

/* Léger décalage vertical entre colonnes (effet masonry), purement
   décoratif — pas besoin de champ ACF dédié pour ça. */
.bloc-mosaique-photos__col:nth-child(2n) {
	margin-top: 28px;
}

.bloc-mosaique-photos__col:nth-child(3n) {
	margin-top: -18px;
}

.bloc-mosaique-photos__col:nth-child(5n) {
	margin-top: 14px;
}

/* Colonne 4 (centrale) : positionnée plus haut que ses voisines (3 et
   5), pas plus grande — un décalage de position, pas une taille
   d'image différente. Cette règle vient APRÈS .nth-child(2n) ci-dessus
   (qui matche aussi la colonne 4) pour la surcharger : sans ça, la
   colonne 4 aurait hérité d'un décalage vers le BAS (+28px), l'inverse
   de l'effet recherché. */
.bloc-mosaique-photos__col:nth-child(4) {
	margin-top: -60px;
}

.bloc-mosaique-photos__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Stickers déplaçables (repris de hero-reveal / bento-cta / textimage) ── */

.bloc-mosaique-photos__stickers {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.bloc-mosaique-photos__sticker {
	position: absolute;
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.bloc-mosaique-photos__sticker.is-dragging {
	cursor: grabbing;
	z-index: 10;
}

.bloc-mosaique-photos__sticker.is-dragging .bloc-mosaique-photos__sticker-inner img {
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
}

.bloc-mosaique-photos__sticker-inner {
	display: block;
	width: 100%;
}

.bloc-mosaique-photos__sticker-inner img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/* ───────────────────────────────────────────────
   Responsive
   ─────────────────────────────────────────────── */

@media (max-width: 1199px) {
	/* Au-delà de 4 colonnes ça devient trop étroit : on masque
	   progressivement les colonnes en trop plutôt que de les laisser
	   s'écraser en bandes illisibles. */
	.bloc-mosaique-photos__col:nth-child(6),
	.bloc-mosaique-photos__col:nth-child(7) {
		display: none;
	}

	/* Les espaces vides (inline height, voir template.php) sont
	   plafonnés ici : max-height s'applique par-dessus une valeur
	   inline sans avoir à la dupliquer en PHP par breakpoint. */
	.bloc-mosaique-photos__gap {
		max-height: 220px;
	}

	.bloc-mosaique-photos__content {
		max-height: 220px;
	}
}

@media (max-width: 767px) {
	.bloc-mosaique-photos {
		padding: 48px 16px;
	}

	/* La hauteur fixe 100vh du desktop (pour aligner tous les vides
	   entre eux) n'a plus de raison d'être ici : seules 2 colonnes
	   restent, sans vide, la grille doit juste épouser son contenu. */
	.bloc-mosaique-photos__grid {
		height: auto;
	}

	.bloc-mosaique-photos__col-inner {
		height: auto;
	}

	/* Simplification radicale plutôt que d'essayer de faire tenir le
	   motif en losange sur un écran étroit : seules les colonnes 1 et 7
	   n'ont structurellement AUCUN vide (voir template.php,
	   $colonnes_config) — on ne garde qu'elles, en grille dense à 2
	   colonnes. Les colonnes 2, 3, 4, 5, 6 ont toutes un ou plusieurs
	   trous qui laisseraient un blanc disproportionné à cette largeur. */
	.bloc-mosaique-photos__col:nth-child(2),
	.bloc-mosaique-photos__col:nth-child(3),
	.bloc-mosaique-photos__col:nth-child(4),
	.bloc-mosaique-photos__col:nth-child(5),
	.bloc-mosaique-photos__col:nth-child(6) {
		display: none;
	}

	/* La colonne 7 est déjà masquée par la règle @media (max-width:
	   1199px) plus haut (qui s'applique aussi en dessous de 767px) —
	   on la réaffiche explicitement ici, sinon elle resterait cachée
	   même si on ne la liste pas dans le display:none ci-dessus. */
	.bloc-mosaique-photos__col:nth-child(7) {
		display: block;
	}

	/* Le contenu repasse en flux normal (donc affiché en premier,
	   au-dessus des photos), plutôt qu'en superposition absolue. */
	.bloc-mosaique-photos__content {
		position: initial;
		transform: unset;
		max-height: none;
		padding: 0 0 32px;
	}

	.bloc-mosaique-photos__card {
		max-width: none;
	}

	/* Les stickers sont positionnés en px/% pensés pour la mise en page
	   desktop : sur cette version mobile simplifiée, leurs coordonnées
	   n'auraient plus de sens. */
	.bloc-mosaique-photos__stickers {
		display: none;
	}
	
	.bloc-mosaique-photos__grid {
	    display: none;
	}
}