/* Page de remerciement (mu-plugins/caritas-merci.php).

   Deux temps : la photo de la peluche avec le « Merci », puis le module de
   partage sur le beige clair de la campagne. */

.elementor-widget:has(> .elementor-shortcode > .cx-merci) {
	margin-bottom: 0;
}

.cx-merci {
	position: relative;
	background: #e20817;
	--cx-merci-bord: 28px;
	padding: 0 var(--cx-merci-bord) var(--cx-merci-bord);
}

/* --- La peluche et le « Merci » ----------------------------------------- */

/* Même principe que le hero des pages de don : la photo est affichée entière,
   au rapport de son fichier, et les blocs posés dessus en pourcentage. */
.cx-merci__scene {
	position: relative;
	aspect-ratio: 1920 / 1080;
	background-image: var(--cx-merci-fond);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* Le « Merci » et le texte partagent la colonne de droite de la maquette
   (440px sur 1440, soit 30,6 %) et s'alignent sur son bord gauche : le titre
   était calé à droite, donc décalé du texte d'une lettre à l'autre. La colonne
   est décalée de 50px vers la gauche, son bord droit ne bougeant pas. */
.cx-merci__titre,
.cx-merci__intro {
	position: absolute;
	left: calc(62.5% - 50px);
	width: calc(30.6% + 50px);
	/* La colonne descend de 100px : le titre et le texte se posaient trop haut
	   sur la photo. */
	margin: 100px 0 0;
}

.cx-merci__titre {
	top: 6%;
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	/* 220px sur la largeur de la maquette (1440). */
	font-size: clamp(56px, 15.28vw, 220px);
	line-height: 0.9;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #f7dad0;
}

.cx-merci__intro {
	top: 42%;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.45vw, 21px);
	line-height: 1.35;
	color: #fff;
}

/* --- Le module de partage ----------------------------------------------- */

.cx-merci__partage {
	display: flex;
	gap: 5%;
	align-items: flex-start;
	background: #fdeee9;
	padding: 72px 5.56% 80px;
	/* Le beige file d'un bord à l'autre, contrairement à la photo ; le bas du
	   cadre rouge reste visible au-dessus de lui : c'est le bandeau de la
	   maquette, qui ferme le hero. */
	margin: var(--cx-merci-bord) calc(-1 * var(--cx-merci-bord))
		calc(-1 * var(--cx-merci-bord));
}

/* Au-delà de 1440px, la zone de partage s'arrête à la colonne de 1280px de la
   campagne ; le beige, lui, continue de filer d'un bord à l'autre. */
@media (min-width: 1441px) {
	.cx-merci__partage {
		/* Le pourcentage se calcule sur le conteneur, pas sur ce bloc : comme il
		   déborde du cadre rouge de deux fois le bord, il faut les rajouter,
		   sinon la colonne faisait 1336px au lieu de 1280. */
		padding-inline: calc(
			(100% + 2 * var(--cx-merci-bord) - 1280px) / 2
		);
	}
}

.cx-merci__colonne {
	flex: 1 1 52%;
}

.cx-merci__texte {
	margin: 0 0 24px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2vw, 30px);
	line-height: 1.25;
	color: #111;
}

.cx-merci__signature {
	margin: 0 0 32px;
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 3.1vw, 44px);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #e20817;
}

.cx-merci__boutons {
	display: inline-block;
	background: #e20817;
	border-radius: 10px;
	padding: 18px 24px 20px;
}

.cx-merci__boutons-titre {
	margin: 0 0 12px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	text-align: center;
}

.cx-merci__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La classe est doublée **sur elle-même**, et non préfixée par celle de la
   section : le thème souligne et colore les liens du contenu avec une
   sélectivité supérieure à une classe seule, et le module de partage sert
   aussi hors de la page de remerciement - dans la zone galerie des pages de
   don, où un `.cx-merci` parent n'existe pas. */
.cx-merci__lien.cx-merci__lien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;     /* cible tactile confortable */
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 180ms ease;
}

/* Les noms des réseaux sont lus par les lecteurs d'écran mais pas affichés :
   la rangée d'icônes de la maquette n'en veut pas. Le bouton « Copier le
   lien », lui, n'a pas d'icône : son nom reste visible. */
.cx-merci__liste li:not(:last-child) .cx-merci__nom {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (hover: hover) {
	.cx-merci__lien.cx-merci__lien:hover {
		opacity: 0.8;
		color: #fff;
	}
}

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

.cx-merci__lien--copie {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* --- L'aperçu de la publication ----------------------------------------- */

.cx-merci__apercu {
	flex: 0 1 38%;
	margin: 0;
	background: #fff;
	border-radius: 12px;
	padding: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.cx-merci__entete {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.cx-merci__avatar {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #111;
	flex: none;
}

.cx-merci__auteur {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: #111;
}

.cx-merci__vue.cx-merci__vue {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}

.cx-merci__legende {
	margin-top: 12px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.35;
	color: #444;
}

.cx-merci__montant {
	display: inline-block;
	margin-left: 4px;
	font-weight: 700;
	color: #e20817;
}

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

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

	.cx-merci__scene {
		aspect-ratio: auto;
		/* Le bandeau rouge qui ferme le hero compte dans l'écran : sans lui
		   dans le calcul, il tombait juste sous la ligne de flottaison. */
		height: max(520px, calc(100dvh - var(--cx-entete) - var(--cx-merci-bord)));
		background-size: cover;
		background-position: center;
	}
}

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

@media (max-width: 767px) {
	.cx-merci {
		--cx-merci-bord: 14px;
	}

	.cx-merci__scene {
		aspect-ratio: 622 / 1077;
	}

	.cx-merci__titre,
	.cx-merci__intro {
		left: 5%;
		width: 90%;
	}

	.cx-merci__titre {
		/* Sous la tuile du logo, qui recouvrait le mot. */
		top: 10%;
		font-size: clamp(48px, 17vw, 86px);
	}

	.cx-merci__intro {
		top: auto;
		bottom: 5%;
		font-size: 15px;
	}

	.cx-merci__partage {
		flex-direction: column;
		gap: 28px;
		padding: 36px 7.1% 40px;
	}

	.cx-merci__boutons {
		display: block;
	}

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

	.cx-merci__apercu {
		align-self: stretch;
	}
}