/* Module de don « dans l'œil de la peluche » (mu-plugins/caritas-dons.php).

   La photo est affichée **entière**, au rapport de son fichier, dans un encadré
   rouge qui prolonge le header. C'est ce rapport fixe qui permet de placer
   l'œil en pourcentage : la photo n'étant pas recadrée, les repères relevés
   dessus restent justes à toutes les largeurs. Un recadrage (`cover` sur une
   boîte d'un autre rapport) déplacerait l'œil hors du cercle.

   Desktop : titre, récit et carte de don se superposent à la photo, dans une
   colonne à gauche. Mobile : le titre et la carte restent sur la photo, le
   récit passe dessous, sur le rouge - le texte ne tient pas dans le haut d'un
   écran de téléphone sans recouvrir l'œil. */

/* Elementor espace ses widgets classiques de 20px sous eux : une bande blanche
   s'intercalait entre le hero et la zone intro, alors que les deux doivent se
   toucher. On ne neutralise cette marge que pour le widget qui porte ce
   module, et pour celui qui porte le mur d'images - sinon une bande blanche
   s'ouvre entre lui et le footer. */
.elementor-widget:has(> .elementor-shortcode > .cx-dons),
.elementor-widget:has(> .elementor-shortcode > .cx-mur) {
	margin-bottom: 0;
}

.cx-dons {
	position: relative;
	/* Le rouge des bords, qui prolonge le header auquel la section est collée. */
	background: #e20817;
	/* Retrait **fixe**, comme sur la page de campagne : en pourcentage, le bord
	   grossirait avec l'écran et ne se raccorderait plus au header. */
	--cx-dons-bord: 28px;
	/* 50px sur la largeur de la maquette (1440) ; en dessous, le titre suit la
	   largeur pour ne pas déborder de sa colonne. Le récit s'en sert pour se
	   poser juste sous lui. */
	--cx-dons-titre: clamp(26px, 3.47vw, 50px);
	padding: 0 var(--cx-dons-bord) var(--cx-dons-bord);
}

.cx-dons__scene {
	position: relative;
	aspect-ratio: 1920 / 1080;
	background-image: var(--cx-dons-fond);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* --- L'œil ------------------------------------------------------------- */

/* Repères relevés sur la photo : centre à 72,9 % / 50 %, diamètre 34,9 %. */
.cx-dons__oeil {
	position: absolute;
	left: 72.9%;
	top: 50%;
	width: 34.9%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	display: block;
	/* La photo vue dans l'œil reste en retrait du bord : le verre du globe doit
	   rester visible tout autour, sinon l'illusion du reflet tombe. */
	padding: 7%;
	box-sizing: border-box;
}

/* Les cinq vues sont empilées dans l'œil ; une seule est opaque.

   La classe est doublée : Elementor habille les images de la page
   (`.elementor img { height: auto; border-radius: 0 }`) avec une sélectivité
   supérieure à une classe seule, et la photo sortait du cercle, à sa hauteur
   d'origine. */
.cx-dons .cx-dons__vue {
	position: absolute;
	inset: 7%;
	width: 86%;
	height: 86%;
	object-fit: cover;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 320ms ease;
	/* Un léger assombrissement pose la photo derrière le verre ; un mélange
	   plus franc (luminosity) la faisait disparaître dans le noir du globe. */
	filter: brightness(0.88) contrast(1.04) saturate(0.95);
}

.cx-dons .cx-dons__vue--active {
	opacity: 1;
}

/* Le reflet du verre, par-dessus la photo. Il reste léger : une version plus
   marquée noyait la scène vue dans l'œil, surtout au format du mobile. */
.cx-dons .cx-dons__oeil::before {
	content: "";
	position: absolute;
	inset: 7%;
	z-index: 1;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%),
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 72%, rgba(30, 6, 3, 0.45) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.cx-dons .cx-dons__vue {
		transition: none;
	}
}

/* Le halo au survol, seulement là où il y a une souris. Au clavier, l'anneau
   de focus joue le même rôle. */
@media (hover: hover) {
	.cx-dons__oeil::after {
		content: "";
		position: absolute;
		inset: -2%;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
		transition: box-shadow 220ms ease;
		pointer-events: none;
	}

	.cx-dons__oeil:hover::after {
		box-shadow: 0 0 36px 10px rgba(255, 255, 255, 0.45);
	}
}

.cx-dons__oeil:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 6px;
}

/* --- Titre, récit, carte ------------------------------------------------ */

/* Les trois blocs occupent la même colonne, à gauche de l'œil. La carte est
   accrochée au bas : l'espace laissé libre absorbe les écarts de longueur du
   titre et du récit d'une variante à l'autre. */
.cx-dons__titre,
.cx-dons__recit,
.cx-dons__carte {
	position: absolute;
	left: 5.56%;      /* même retrait que la page de campagne */
	width: 44%;
	box-sizing: border-box;
}

/* Le titre prend la largeur du récit, jusqu'au bord de l'œil : avec le texte
   définitif, il tient alors en **trois** lignes à toutes les largeurs de
   bureau - c'est une ligne rendue au récit, et un calcul de moins. */
.cx-dons__titre {
	width: 52%;
}

/* Le récit se pose **juste sous le titre**, sur la photo : quatre lignes de
   titre (interligne 1) et un blanc de 14px. Un pourcentage fixe laissait un
   trou sur les grands écrans et chevauchait le titre sur les petits.

   Il est accroché à la section, le titre et la carte à la photo : à
   pourcentage égal, il commençait 25px plus à gauche qu'eux. On retire donc
   les bords rouges de son calcul pour qu'il parte du même trait, et il partage
   sa colonne de 52 %. */
.cx-dons__recit {
	top: calc(12.5% + 25px + 3 * var(--cx-dons-titre) + 35px);
	left: calc(var(--cx-dons-bord) + (100% - 2 * var(--cx-dons-bord)) * 0.0556);
	/* 20px de moins que le titre : le récit s'arrête un peu avant lui. */
	width: calc((100% - 2 * var(--cx-dons-bord)) * 0.52 - 20px);
}

.cx-dons__titre {
	/* Sous la tuile du logo, qui déborde du header sur la photo, et 25px plus
	   bas : le titre se posait trop près d'elle. */
	top: calc(12.5% + 25px);
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	font-size: var(--cx-dons-titre);
	text-align: left;
	/* Interligne 1 : Anton est une capitale haute, et c'est ce qui permet au
	   récit de se caler sous un titre dont on connaît alors la hauteur. */
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #f7dad0;
	margin: 0;
}

.cx-dons__recit p {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.32;
	color: #fff;
	margin: 0 0 0.7em;
}

.cx-dons__carte {
	/* La carte remonte : c'est ce qui resserre le vide entre le récit et elle.
	   Ses marges intérieures restent courtes, pour la même raison. */
	bottom: 9%;
	background: #f7dad0;
	border-radius: 14px;
	padding: 16px 24px 18px;
	color: #e20817;
}

.cx-dons__accroche {
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 24px);
	line-height: 1.1;
	text-transform: uppercase;
	color: #e20817;
	margin: 0 0 12px;
}

/* Deux colonnes : le curseur et ce que le montant permet, puis le bouton et
   sa mention. Elles s'alignent par le haut - les deux légendes n'ont pas la
   même hauteur, et le curseur doit rester à la hauteur du bouton. */
.cx-dons__choix {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

/* Les deux colonnes partagent la carte à égalité : la capsule et le bouton ont
   donc la même largeur, et surtout une largeur qui ne dépend plus de ce qu'ils
   contiennent. Laissées libres, elles suivaient la légende - qui change avec le
   montant : capsule et bouton se déplaçaient de quelques pixels à chaque clic.
   `flex-basis: 0` plutôt que `auto` : c'est ce qui rend les deux moitiés
   exactement égales quel que soit leur contenu. */
.cx-dons__colonne {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
}

.cx-dons__colonne .cx-dons__curseur,
.cx-dons__colonne .cx-dons__cta {
	width: 100%;
}

/* Ce que le montant permet. C'est l'information que le visiteur achète : elle
   se lit, mais elle ne se clique pas - d'où un paragraphe, pas un bouton. */
.cx-dons__contrepartie {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.25vw, 18px);
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}

/* --- Le curseur -------------------------------------------------------- */

/* Les pastilles épousent les bords de la capsule, à un liseré près : 1px de
   blanc les détache du bord sans qu'elles flottent au milieu, comme sur la
   maquette. La capsule grandit d'autant (50px de haut pour 48 de pastille). */
.cx-dons__curseur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	background: #fff;
	border-radius: 999px;
	padding: 1px;
}

/* Les signes sont **dessinés**, pas écrits : centrer un glyphe « − » ou « + »
   dépend des métriques de la police, et ils flottaient au-dessus du milieu de
   leur pastille. Deux barres se centrent exactement. Le sens, lui, est porté
   par l'aria-label du bouton. */
.cx-dons__pas {
	position: relative;
	/* 58px + le lisere de 1px de la capsule = 60px, la hauteur du bouton de
	   don : les deux éléments du choix s'alignent. */
	width: 58px;
	height: 58px;
	flex: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Pas de reflet bleu au toucher sur iPhone. */
	-webkit-tap-highlight-color: transparent;
	transition: opacity 180ms ease, background-color 180ms ease;
}

.cx-dons__pas > span {
	display: none;
}

.cx-dons__pas::before,
.cx-dons__pas--plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 2px;
}

.cx-dons__pas::before {
	width: 20px;
	height: 3px;
	transform: translate(-50%, -50%);
}

.cx-dons__pas--plus::after {
	width: 3px;
	height: 20px;
	transform: translate(-50%, -50%);
}

.cx-dons__pas--moins {
	background: #fff;
	/* La barre reprend la couleur du texte : noire, comme le montant. */
	color: #111;
	box-shadow: inset 0 0 0 2px #f1e3df;
}

.cx-dons__pas--plus {
	background: #ff5823;
	color: #fff;
}

.cx-dons__pas[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) {
	.cx-dons__pas:not([disabled]):hover {
		opacity: 0.85;
	}
}

.cx-dons__pas:focus-visible {
	outline: 3px solid #e20817;
	outline-offset: 3px;
}

.cx-dons__montant {
	padding: 0 14px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 1.7vw, 24px);
	color: #111;
	margin: 0;
	/* La capsule ayant une largeur fixe et ses pastilles collées aux bords, le
	   montant n'a plus à réserver la place du plus long : ce retrait l'empêche
	   seulement de venir toucher les pastilles. */
	min-width: 3.4em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- Le bouton de don --------------------------------------------------- */

/* La classe est doublée : le thème souligne les liens du contenu avec une
   sélectivité supérieure, et le bouton se retrouvait souligné. */
.cx-dons .cx-dons__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 40px;
	background: #e20817;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 20px);
	text-decoration: none;
	border-radius: 6px;
	transition: opacity 180ms ease;
}

@media (hover: hover) {
	.cx-dons .cx-dons__cta:hover {
		opacity: 0.85;
		color: #fff;
	}
}

.cx-dons .cx-dons__cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* La mention sous le bouton : elle désarme le choix du montant (il reste
   modifiable chez iRaiser), donc elle se lit, mais elle ne doit pas peser
   autant que l'appel lui-même. */
.cx-dons__mention {
	margin: 0;
	max-width: 34ch;
	text-align: center;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 1.05vw, 14px);
	line-height: 1.3;
	/* Le rouge du texte de la carte, un peu retiré : la nuance suffit à poser
	   la hiérarchie sans introduire un gris étranger à la palette. */
	opacity: 0.8;
}

/* Le double de la mention, pour le mobile : masqué partout ailleurs. */
.cx-dons__mention--sous {
	display: none;
}

/* --- Desktop : le premier écran remplit la fenêtre ---------------------- */

@media (min-width: 768px) {
	.cx-dons {
		/* Hauteur du bandeau rouge du header (UAE). */
		--cx-entete: 40px;
	}

	.cx-dons__scene {
		/* La photo n'impose plus sa hauteur : c'est la fenêtre, moins le header
		   et le bord rouge du bas. `dvh` plutôt que `vh` pour tenir compte des
		   barres d'outils qui se rétractent. */
		--cx-haut: max(520px, calc(100dvh - var(--cx-entete) - var(--cx-dons-bord)));
		/* La photo est donc recadrée : en largeur sur un écran bas, en hauteur
		   sur un écran large, toujours centrée. */
		--cx-photo: max(100%, calc(var(--cx-haut) * 16 / 9));

		aspect-ratio: auto;
		height: var(--cx-haut);
		background-size: cover;
		background-position: center;
	}

	/* L'œil ne peut plus être posé en pourcentage de la scène : la photo étant
	   recadrée, ses repères se mesurent sur **l'image rendue**, dont la largeur
	   est connue (hauteur x 16/9, ou la scène si elle est plus large). L'image
	   restant centrée, on part du milieu : 72,9 % - 50 % = 22,9 % de décalage. */
	.cx-dons__oeil {
		left: calc(50% + 0.229 * var(--cx-photo));
		width: calc(0.349 * var(--cx-photo));
	}
}

/* --- Écran moyen : la carte redescend --------------------------------- */

/* Entre 800 et 850px de fenêtre, les 9 % qui décollent la carte du bas sont
   justement les pixels qui manquent au récit : elle reprend les 5 % d'avant,
   et tout tient encore sur la photo. */
@media (min-width: 768px) and (max-height: 850px) {
	.cx-dons__carte {
		bottom: 5%;
	}
}

/* --- Écran bas : le récit repasse sous la photo ------------------------ */

/* La colonne de gauche tient le titre, le récit et la carte jusqu'à 800px de
   fenêtre. En dessous - un portable en 1366x768, une fenêtre réduite - le
   récit recouvrait le titre et la carte : il passe alors sous la photo, sur le
   rouge, comme en mobile. */
@media (min-width: 768px) and (max-height: 799px) {
	.cx-dons__recit {
		position: static;
		width: auto;
		max-width: 58em;
		padding: 28px calc(var(--cx-dons-bord) + (100% - 2 * var(--cx-dons-bord)) * 0.0556) 0;
	}
}

/* --- Desktop étroit ----------------------------------------------------- */

/* En dessous de 1200px, la carte s'élargit pour garder ses deux colonnes côte
   à côte. La photo, elle, reste celle du desktop : la verticale serait immense
   à cette largeur. */
@media (min-width: 768px) and (max-width: 1199px) {
	.cx-dons__carte {
		width: 56%;
	}
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
	.cx-dons {
		--cx-dons-bord: 14px;
		/* Ce dont la carte déborde sous la photo, quand celle-ci est trop courte
		   pour la tenir sous l'œil. Miroir exact du `max()` de la carte : la
		   photo fait (100vw - 2 bords) x 1920/1080 de haut, et il lui en reste
		   36 % sous l'œil. Le récit s'écarte d'autant. */
		--cx-carte-debord: max(
			0px,
			232px - 0.64 * (100vw - 2 * var(--cx-dons-bord))
		);
	}

	/* La photo verticale garde son rapport : l'œil reste calé sur les repères
	   du fichier (centre à 51,4 % / 46,9 %, diamètre 55 %). */
	.cx-dons__scene {
		aspect-ratio: 1080 / 1920;
	}

	.cx-dons__oeil {
		left: 51.4%;
		top: 46.9%;
		width: 55%;
	}

	.cx-dons__titre,
	.cx-dons__carte {
		left: 4%;
		width: 92%;
	}

	.cx-dons__titre {
		/* Sous la tuile du logo, plus petite qu'en desktop mais qui mordait
		   quand même sur la première ligne. */
		top: 12%;
		font-size: clamp(26px, 7.6vw, 36px);
		text-align: center;
	}

	/* La carte se pose au bas de la photo, mais **jamais plus haut que l'œil** :
	   sa hauteur est en pixels tandis que la photo suit la largeur de l'écran,
	   si bien que sur un téléphone étroit elle grimpait sur le globe. Le bas de
	   l'œil est à 62,4 % (centre 46,9 % + la moitié d'un diamètre qui vaut 55 %
	   de la largeur, soit 30,9 % de la hauteur) : la carte s'arrête à 64 % et
	   déborde alors sur le rouge, sous la photo. */
	.cx-dons__carte {
		top: max(64%, calc(100% - 232px));
		bottom: auto;
		padding: 10px 18px 12px;
		text-align: center;
	}

	/* La mention quitte la carte et se pose sur le rouge, sous la photo : à
	   l'intérieur, ses deux lignes ajoutaient 52px à un bloc qui mordait déjà
	   sur l'œil de la peluche. C'est le double, dans le flux, qui s'affiche ;
	   celui de la carte s'efface. */
	.cx-dons__carte .cx-dons__mention {
		display: none;
	}

	.cx-dons__mention--sous {
		display: block;
		/* La carte déborde de la photo sur les téléphones étroits : la mention
		   se place après ce débord. */
		margin: calc(14px + var(--cx-carte-debord)) 4% 0;
		max-width: none;
		font-size: 13px;
		text-align: center;
		color: #fff;
		opacity: 0.85;
	}

	.cx-dons__accroche {
		font-size: 17px;
		margin-bottom: 6px;
	}

	.cx-dons__choix {
		gap: 8px;
		justify-content: center;
	}

	/* Chaque pixel gagné dans la carte devient du blanc entre elle et le bas de
	   la photo : son haut, lui, est tenu par l'œil. */
	.cx-dons__colonne {
		gap: 4px;
	}

	.cx-dons__colonne,
	.cx-dons__curseur,
	.cx-dons .cx-dons__cta {
		width: 100%;
	}

	/* Les demi-colonnes ne valent qu'en desktop : ici tout s'empile, et
	   `flex-basis` l'emporterait sur `width`. */
	.cx-dons__colonne {
		flex: 0 0 100%;
		max-width: none;
	}

	.cx-dons__curseur {
		justify-content: space-between;
	}

	/* Le récit quitte la photo et passe dessous, sur le rouge : dans le haut
	   d'un écran de téléphone, il recouvrirait l'œil. */
	.cx-dons__recit {
		position: static;
		width: auto;
		padding: 28px 4% 0;
	}

	.cx-dons__recit p {
		font-size: 15px;
	}
}

/* --- 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;
	background: #fdeee9;
	/* Le retrait du texte, calé sur celui de la page de remerciement : elle
	   mesure 5,56 % à l'intérieur du cadre rouge de 28px, mais pose son bloc à
	   fond perdu. Titre, texte et module de partage le partagent. */
	--cx-mur-bord: 28px;
	--cx-mur-retrait: calc((100% - 2 * var(--cx-mur-bord)) * 0.0556);
	/* Les carrés des angles occupent les 80 premiers pixels (deux rangées de
	   40) : le titre commence en dessous, comme sur la page de campagne. */
	padding: 80px 0 0;
}

/* Les carrés des angles, mêmes mesures que ceux des sections de la page de
   campagne (tools/blocs/carres.py) : 40px, et deux voisins se touchent par un
   coin - leurs positions sont donc des multiples de leur taille. */
.cx-mur__carre {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
}

.cx-mur__carre--gauche {
	inset-inline-start: 0;
	background: #ff21a6;
}

.cx-mur__carre--escalier {
	top: 40px;
	inset-inline-start: 40px;
	background: #ff5823;
}

/* Le carré rouge touche la zone intro, rouge elle aussi : les deux ne font
   qu'une forme, le rouge qui descend d'une case à droite. C'est le dessin du
   Figma. */
.cx-mur__carre--droite {
	inset-inline-end: 0;
	background: #e20817;
}

/* 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 {
	display: flex;
	align-items: flex-start;
	gap: 6%;
	padding: 0 var(--cx-mur-retrait);
}

.cx-mur__colonne {
	flex: 1 1 54%;
	min-width: 0;
}

.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 {
	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__ligne {
	display: block;
}

.cx-mur__ligne:nth-child(2) {
	color: #ff21a6;
}

.cx-mur__ligne: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 {
	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;
}

/* 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 {
	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);
	gap: 2px;
}

/* 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: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

/* 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) {
	.cx-mur__entete {
		padding-inline: calc((100% - 1280px) / 2);
	}
}

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

	/* La classe est doublée, comme celle des images : `.cx-mur .cx-mur__vue`
	   pose leur `display`, et une classe seule ne pourrait pas le reprendre. */
	.cx-mur .cx-mur__vue--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 {
		padding-top: 68px;
		--cx-mur-bord: 14px;
		--cx-mur-retrait: calc((100% - 2 * var(--cx-mur-bord)) * 0.071);
	}

	.cx-mur__carre {
		width: 28px;
		height: 28px;
	}

	.cx-mur__carre--escalier {
		top: 28px;
		inset-inline-start: 28px;
	}

	/* Le carré de droite rentre d'une case : la maquette l'écarte du bord sur
	   les écrans étroits. */
	.cx-mur__carre--droite {
		inset-inline-end: 28px;
	}

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

	.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 {
		margin-top: 0;
	}

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

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

	/* La classe est doublée, comme celle des images : `.cx-mur .cx-mur__vue`
	   pose leur `display`, et une classe seule ne pourrait pas le reprendre. */
	.cx-mur .cx-mur__vue--tablette {
		display: none;
	}
}