/* Le mur d'images (mu-plugins/caritas-mur.php, [caritas_mur]).

   Sous la zone intro des pages de don : les scènes vues dans l'œil, en
   mosaïque, précédées du titre et de l'appel au partage. */

/* Elementor espace ses widgets classiques de 20px sous eux : sans cela, une
   bande blanche s'ouvre entre le mur et le footer. */
.elementor-widget:has(> .elementor-shortcode > .cx-mur__grille) {
	margin-bottom: 0;
}

/* --- Le mur d'images (shortcode [caritas_mur]) -------------------------- */

/* La place prévue pour le mur social, sous la zone intro : les scènes vues dans
   l'œil, en mosaïque pleine largeur. Quatre lignes à tous les paliers ; c'est
   le nombre de colonnes qui change, et les cases en trop sont effacées par les
   classes posées côté PHP. ⚠ Les trois nombres de colonnes sont écrits dans
   caritas-dons.php (CARITAS_DONS_MUR_COLONNES) : les deux doivent rester en
   phase, sinon la dernière ligne serait incomplète. */
.cx-mur {
	position: relative;
	/* Le retrait du texte, calé sur les sections de la page de campagne -
	   « J'ai vu s'écrire l'histoire… » et les autres : 5,56 % de la largeur
	   de la page, et au-delà de 1440px une colonne de 1280 centrée (plus bas).
	   Titre, texte et module de partage le partagent. */
	--cx-mur-bord: 28px;
	--cx-mur-retrait: 5.56%;
}

/* Le titre des récits : trois lignes, trois couleurs du système - le rouge
   pose la phrase, le fuchsia et l'orange la relancent. Chaque ligne est un
   bloc : le découpage vient de la maquette, pas de la largeur disponible. */
/* Le titre et son texte à gauche, l'appel au partage et les boutons à droite.
   Les deux colonnes s'alignent par le haut : le titre et l'appel se lisent sur
   la même ligne d'horizon. */
.cx-mur__entete.cx-mur__entete {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 6%;
	padding: 0 var(--cx-mur-retrait);
}

.cx-mur__colonne.cx-mur__colonne {
	display: flex;
	flex-direction: column;
	flex: 1 1 54%;
	min-width: 0;
	padding: 0;
	gap: 0;
}

.cx-mur__colonne--partage.cx-mur__colonne--partage {
	flex: 1 1 40%;
	/* La colonne de droite descend de 50px : elle répond au titre, elle ne
	   démarre pas avec lui. */
	margin-top: 50px;
}

.cx-mur__titre.cx-mur__titre {
	margin: 0 0 24px;
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	/* 72px sur la largeur de la maquette (1440), comme les titres de section. */
	font-size: clamp(30px, 5vw, 72px);
	/* 1,2 et non 1,1 : Anton monte haut, et l'accent circonflexe de « vôtre »
	   venait toucher la ligne précédente. */
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #e20817;
}

.cx-mur__titre > :is(span, strong, b) {
	display: block;
}

.cx-mur__titre > :is(span, strong, b):nth-child(2) {
	color: #ff21a6;
}

.cx-mur__titre > :is(span, strong, b):nth-child(3) {
	color: #ff5823;
}

/* Le texte sous le titre : il invite à finaliser le don et à partager. La
   mesure est bornée - sur 1440px, une ligne pleine largeur serait illisible. */
.cx-mur__texte.cx-mur__texte {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.45;
	color: #111;
}

.cx-mur__texte p {
	margin: 0;
}

/* La signature, détachée du texte et en gras : elle ferme la colonne de
   gauche comme une estampille, pas comme une fin de phrase. */
.cx-mur__signature.cx-mur__signature {
	margin: 16px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.45;
	font-weight: 700;
	color: #111;
}

.cx-mur__signature p {
	margin: 0;
}

/* L'appel au partage ouvre la colonne de droite : même corps que le texte de
   gauche, en gras, et le bloc des boutons juste en dessous. */
.cx-mur__appel.cx-mur__appel {
	margin: 0 0 24px;
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.45;
	font-weight: 700;
	color: #111;
}

/* Le module de partage de la page de remerciement, posé ici dans la colonne de
   droite : il y perd les marges négatives qui le sortaient du cadre rouge, son
   fond (celui de la section suffit) et sa mise en deux colonnes - il n'a plus
   que ses boutons. */
.cx-mur .cx-merci__partage {
	--cx-merci-bord: 0px;
	display: block;
	margin: 0;
	padding: 0;
	background: none;
}

/* Un filet de beige entre les cases : les photos se touchent presque, sans se
   confondre les unes dans les autres. */
.cx-mur__grille {
	/* 80px entre ce qui précède et la mosaïque, à toutes les largeurs. */
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(10, 1fr);

	/* Un pixel, et pas moins : en deçà, les navigateurs arrondissent la
	   colonne et le filet disparaîtrait sur certaines lignes seulement. */
	gap: 1px;

	/* L'agrandissement des tirages. La pupille n'occupe qu'une moitié du
	   carré et se lisait mal à la taille d'une case ; on la rapproche sans
	   rogner les fichiers, pour que les photos suivantes, déposées par
	   l'équipe, profitent du même réglage. */
	--cx-mur-zoom: 1.18;
}

/* La case rogne ce qui dépasse : sans elle, une photo agrandie mordrait sur
   ses voisines. */
.cx-mur__case {
	aspect-ratio: 1;
	overflow: hidden;
}

/* La classe est doublée : Elementor habille les images de la page
   (`.elementor img`) avec une sélectivité supérieure à une classe seule. */
.cx-mur .cx-mur__vue {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
	transform: scale(var(--cx-mur-zoom, 1));
}

/* Au-delà de 1440px, le texte de la page de remerciement s'arrête à la colonne
   de 1280px de la campagne : le titre la suit, pendant que la mosaïque, elle,
   continue de filer d'un bord à l'autre. */
@media (min-width: 1441px) {
	/* Classe doublée comme celle de l'en-tête plus haut : sans cela, le
	   `padding` en raccourci qui reprend la main sur Elementor écrasait ce
	   `padding-inline`, et le titre du mur quittait la colonne de 1280. */
	.cx-mur__entete.cx-mur__entete {
		padding-inline: calc((100% - 1280px) / 2);
	}
}

@media (max-width: 1024px) {
	.cx-mur__grille {
		grid-template-columns: repeat(6, 1fr);
	}

	.cx-mur__case--bureau {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Bande de carrés de 56px (deux rangées de 28), puis 12px, comme sur la
	   page de campagne. */
	.cx-mur {
		--cx-mur-bord: 14px;
		--cx-mur-retrait: 7.1%;
	}

	.cx-mur__titre.cx-mur__titre {
		margin-bottom: 20px;
		font-size: 30px;
		line-height: 38px;
	}

	.cx-mur__entete.cx-mur__entete {
		flex-direction: column;
		gap: 28px;
	}

	/* Empilées, les deux colonnes se suivent : l'écart de 50px n'a plus d'objet. */
	.cx-mur__colonne--partage.cx-mur__colonne--partage {
		margin-top: 0;
	}

	.cx-mur__grille {
		margin-top: 48px;
	}

	.cx-mur__grille {
		grid-template-columns: repeat(4, 1fr);
	}

	.cx-mur__case--tablette {
		display: none;
	}
}