/* Récits « J'ai vu … » : l'accroche est rouge, le sujet fuchsia, la suite orange.

   Les deux mots en couleur sont des <span> posés à la construction, ou - pour
   l'équipe éditoriale - des mots mis en **gras** depuis la barre d'outils
   d'Elementor : l'éditeur de texte ne sait pas créer de <span>, et en retire
   parfois en réécrivant le titre. Le gras garde la graisse du titre ; seule sa
   place compte : le 1er passage en fuchsia, le 2e en orange. */
.single-histoire .entry-title > :is(span, strong, b),
.cx-recit-titre > :is(span, strong, b) {
	font-weight: inherit;
}

.single-histoire .entry-title > :is(span, strong, b):nth-child(1),
.cx-recit-titre > :is(span, strong, b):nth-child(1) {
	color: #ff21a6;
}

.single-histoire .entry-title > :is(span, strong, b):nth-child(2),
.cx-recit-titre > :is(span, strong, b):nth-child(2) {
	color: #ff5823;
}

/* ---------------------------------------------------------------------------
   Formulaire « Restons connectés » (Gravity Forms)

   La maquette pose trois blocs dans une grille 2x2 : coordonnées en haut à
   gauche, adresse à droite sur toute la hauteur, préférences en bas à gauche.
   Gravity Forms rend une liste plate de champs, donc on replace chaque champ
   dans la grille par sa classe - celles-ci sont gelées dans tools/form.py.

   Les sélecteurs sont longs à dessein : le thème `gravity-theme` vise ses
   propres champs avec trois classes, et des règles plus courtes perdraient la
   cascade. On empile donc les classes du conteneur plutôt que d'écrire
   `!important` partout.
--------------------------------------------------------------------------- */

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	row-gap: 12px;
}

/* Colonne de gauche : coordonnées (lignes 1-5) puis préférences (lignes 8-12).
   Les lignes 6 et 7 restent vides à gauche ; leur hauteur vient de la colonne
   de droite, ce qui fait démarrer les préférences sous le bloc adresse.
   On vise les classes posées par tools/form.py plutôt que `#field_<form>_<n>` :
   l'identifiant du formulaire change d'une installation à l'autre. */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-coordonnees { grid-area: 1 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-civilite    { grid-area: 2 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-prenom      { grid-area: 3 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-nom         { grid-area: 4 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-naissance   { grid-area: 5 / 1; }

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-adresse     { grid-area: 1 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-rue         { grid-area: 2 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-numero      { grid-area: 3 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-boite       { grid-area: 4 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-cp          { grid-area: 5 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-ville       { grid-area: 6 / 2; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-pays        { grid-area: 7 / 2; }

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-preferences { grid-area: 8 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-email       { grid-area: 9 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-telephone   { grid-area: 10 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-newsletter  { grid-area: 11 / 1; }
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .cx-f-rdf         { grid-area: 12 / 1; }

/* Titre de bloc */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gsection {
	border-bottom: 0;
	padding: 0;
	margin: 0;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gsection_title {
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.01em;
	color: #e20817;
	margin: 0;
}

/* Libellés, toujours au-dessus du champ */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield_label {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #000;
	margin: 0 0 12px;
	display: block;
}

/* Légende « * indique les champs nécessaires », en tête de formulaire. Même
   typographie que les mentions sous le bouton. Elle vit dans .gform_heading,
   en dehors du <form> : elle se vise depuis le conteneur. */
.gform_wrapper.gravity-theme.caritas-form_wrapper .gform_heading {
	margin: 0 0 24px;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .gform_required_legend {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.01em;
	color: #000;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .gform_required_legend .gfield_required {
	color: #000;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield_required {
	color: #000;
	margin-inline-start: 0.25em;
}

/* Champs de saisie */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input[type="text"],
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input[type="email"],
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input[type="tel"],
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input[type="number"],
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input[type="date"],
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form select {
	box-sizing: border-box;
	width: 100%;
	height: 47px;
	padding: 0 24px;
	border: 1px solid #e20817;
	border-radius: 2px;
	background: #fff;
	font-family: Inter, sans-serif;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: #000;
	appearance: none;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form input::placeholder {
	color: #d9d9d9;
	opacity: 1;              /* Firefox applique 0.54 par défaut */
}

/* Le select affiche son intitulé vide comme un placeholder */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form select:invalid,
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form select option[value=""] {
	color: #d9d9d9;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form select {
	/* chevron dessiné en CSS : pas de requête réseau, et il suit la couleur */
	background-image: linear-gradient(45deg, transparent 50%, #e20817 50%),
		linear-gradient(135deg, #e20817 50%, transparent 50%);
	background-position: calc(100% - 26px) 21px, calc(100% - 20px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-end: 48px;
}

/* Cases à cocher */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield--type-checkbox .gfield_label {
	display: none;           /* l'intitulé est porté par la case elle-même */
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield-choice-input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid #e20817;
	border-radius: 2px;
	background: #fff;
	appearance: none;
	cursor: pointer;
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield-choice-input[type="checkbox"]:checked {
	background: #e20817;
	/* coche dessinée par un pseudo-élément du label voisin impossible ici :
	   un dégradé conique ne convient pas, on garde la case pleine. */
}

.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gchoice label {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.01em;
	color: #000;
}

/* Bouton d'envoi : sous la colonne de gauche, comme dans la maquette */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer {
	width: calc(50% - 15px);
	margin: 0;
	padding: 28px 0 0;
}

/* Gravity Forms rend un <button>, pas un <input type="submit"> : on vise la
   classe plutôt que le type. */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer .gform_button,
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer input[type="submit"] {
	/* Largeur au contenu : le libellé se modifie dans l'admin. 337px de la
	   maquette en minimum, et de l'air de part et d'autre du texte. */
	width: auto;
	min-width: 337px;
	max-width: 100%;
	height: 58px;
	padding: 0 48px;
	border: 0;
	border-radius: 2px;
	background: #e20817;
	color: #f7dad0;
	font-family: Inter, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.05em;
	cursor: pointer;
}

/* Suggestions d'adresse (Google Places) */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .ginput_container {
	position: relative;
}

.caritas-suggestions {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: 100%;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e20817;
	border-radius: 2px;
	max-height: 240px;
	overflow-y: auto;
}

.caritas-suggestions li {
	padding: 10px 24px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: #000;
	cursor: pointer;
}

.caritas-suggestions li:hover,
.caritas-suggestions li:focus {
	background: rgba(247, 218, 208, 0.5);
}

/* Messages de validation */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gfield_validation_message,
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_submission_error {
	font-family: Inter, sans-serif;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: #e20817;
	background: none;
	border: 0;
	padding: 4px 0 0;
}

@media (max-width: 767px) {
	/* Une seule colonne : on rend la place à l'ordre naturel du DOM. */
	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_fields {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_fields > .gfield {
		grid-area: auto !important;
	}

	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gsection_title {
		font-size: 24px;
		line-height: 30px;
	}

	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer {
		width: 100%;
	}

	/* Pleine largeur, 20px d'air de chaque côté. « Je commande mon kit de
	   stickers » ne tient pas sur une ligne à 18px : texte un peu réduit, et
	   retour à la ligne permis plutôt qu'un débordement sur les petits écrans. */
	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer .gform_button,
	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer input[type="submit"] {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 58px;
		padding: 10px 20px;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.02em;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   Modale « Lire l'histoire » (mu-plugins/caritas-histoires.*)
--------------------------------------------------------------------------- */

/* La page ne défile plus sous la modale. */
html:has(.cx-histoire[open]) {
	overflow: hidden;
}

.cx-histoire {
	box-sizing: border-box;
	width: min(800px, calc(100vw - 40px));
	max-height: calc(100dvh - 40px);
	/* Pas de padding sur le <dialog> lui-même : un clic dont la cible est le
	   <dialog> tombe alors forcément sur le fond, ce qui sert à fermer. */
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: #f7dad0;
	color: #000;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cx-histoire::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.cx-histoire__corps {
	padding: 80px 80px 60px;
}

/* Reçoit le focus à l'ouverture (caritas-histoires.js) : pas de contour. */
.cx-histoire__corps:focus {
	outline: none;
}

/* Bouton fermer : un des carrés rouges du système décoratif. */
.cx-histoire__fermer {
	position: sticky;
	top: 0;
	float: right;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #e20817;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 28px;
	line-height: 40px;
	cursor: pointer;
}

/* Sur téléphone, le bouton reçoit le focus à l'ouverture de la modale et le
   navigateur le teinte (surlignage au toucher, anneau de focus bleu sur le
   rouge) : on neutralise ces rendus natifs, et le survol ne vaut que pour les
   appareils qui survolent réellement. */
.cx-histoire__fermer {
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.cx-histoire__fermer:focus:not(:focus-visible) {
	outline: none;
}

@media (hover: hover) {
	.cx-histoire__fermer:hover {
		background: #ff5823;
	}
}

.cx-histoire__fermer:focus-visible {
	outline: 3px solid #000;
	outline-offset: -3px;
}

.cx-histoire__titre {
	margin: 0 0 32px;
	font-family: Anton, sans-serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 52px;
	letter-spacing: -0.01em;
	color: #e20817;
}

.cx-histoire__texte {
	font-family: Inter, sans-serif;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.01em;
}

.cx-histoire__texte > * {
	margin: 0 0 16px;
}

.cx-histoire__texte > :last-child {
	margin-bottom: 0;
}

/* Signature de campagne, en fin de récit. */
.cx-histoire__texte .cx-histoire-signature {
	margin-top: 32px;
	font-family: Anton, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: -0.01em;
	color: #e20817;
}

/* Dernier paragraphe : il présente le programme, pas le récit. */
.cx-histoire__texte .cx-histoire-apropos {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(226, 8, 23, 0.35);
	font-size: 16px;
	line-height: 24px;
}

/* Lien en cours de chargement (le contenu n'était pas encore préchargé). */
a[aria-busy="true"] {
	cursor: progress;
}

@media (max-width: 767px) {
	.cx-histoire {
		width: calc(100vw - 20px);
		max-height: calc(100dvh - 20px);
	}

	.cx-histoire__corps {
		padding: 56px 28px 40px;
	}

	.cx-histoire__titre {
		margin-bottom: 20px;
		font-size: 36px;
		line-height: 40px;
	}

	.cx-histoire__texte {
		font-size: 16px;
		line-height: 24px;
	}
}

/* ---------------------------------------------------------------------------
   Liens réseaux sociaux (tools/blocs/reseaux.py)
--------------------------------------------------------------------------- */

.cx-reseau {
	transition: opacity 0.15s ease;
}

.cx-reseau:hover {
	opacity: 0.75;
}

/* Sur fond rouge : un contour beige reste visible autour de l'icône blanche. */
.cx-reseau:focus-visible {
	outline: 3px solid #f7dad0;
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Largeur du contenu

   La maquette est dessinée sur 1440px, retrait de 80px compris : la colonne de
   contenu y fait donc 1280px. Au-delà de 1440px, les fonds continuent de filer
   d'un bord à l'autre et seule cette colonne est limitée, en élargissant le
   retrait horizontal.

   En dessous de 1441px, rien ici ne s'applique : le retrait reste celui des
   constructeurs (5,56% en desktop, 7,1% en mobile). La classe est posée sur
   l'élément qui porte ce retrait - la section pour le texte, le CTA et les
   réseaux sociaux, le conteneur interne pour les récits et le formulaire.
--------------------------------------------------------------------------- */

@media (min-width: 1441px) {
	/* Deux classes : Elementor écrit déjà le retrait avec une seule. */
	[data-elementor-id] .cx-boxe {
		padding-inline: calc((100% - 1280px) / 2);
	}

	/* Ce carré-là s'aligne sur le texte dans la maquette (retrait de 80px),
	   il suit donc la colonne. Les autres sont collés aux bords et y restent. */
	[data-elementor-id] .e-rssq1 {
		inset-inline-start: calc((100% - 1280px) / 2);
	}
}

/* Défilement doux vers le formulaire depuis « Je soutiens Caritas ». */
html {
	scroll-behavior: smooth;
}

#restons-connectes {
	scroll-margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   Survol des liens et des boutons

   Deux traitements, dans la logique des icônes de réseaux sociaux :
   - les éléments pleins (boutons, pastille de langue, logos) s'éclaircissent ;
   - les liens texte passent à l'orange de la charte.

   Les règles sont réservées aux appareils qui survolent réellement : sur
   écran tactile, un effet posé au toucher resterait affiché après le clic.
   Les transitions, elles, restent hors de cette condition - elles servent
   aussi au focus clavier - et sont neutralisées par la règle « réduire les
   animations » en fin de feuille.

   Les classes visées sont celles que produisent les constructeurs
   (tools/blocs/*.py) : elles sont stables d'une reconstruction à l'autre.
--------------------------------------------------------------------------- */

.e-a7c1e42-1f3b5c7,                 /* header : JE FAIS UN DON */
.e-ct02b3c-1d7a9b3,                 /* page : je commande mon kit */
.cx-langue,                         /* pastille de langue */
.cx-play,                           /* icône de lecture, sur la vidéo mobile */
.e-image-link-base img,             /* logos du header et du footer */
.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer .gform_button {
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.e-qx14d-link a,
.e-qx24d-link a,
.e-qx34d-link a,                    /* « Lire l'histoire » */
.e-ft12b-mentions a,
.e-ft13c-confidentialite a,         /* mentions légales, confidentialité */
.cx-mention a {                     /* politique de confidentialité, sous le formulaire */
	transition: color 0.15s ease;
}

@media (hover: hover) {
	.e-a7c1e42-1f3b5c7:hover,
	.e-ct02b3c-1d7a9b3:hover,
	.cx-langue:hover,
	.cx-play:hover,
	.gform_wrapper.gravity-theme.caritas-form_wrapper .caritas-form .gform_footer .gform_button:hover {
		opacity: 0.85;
	}

	.e-image-link-base:hover img {
		opacity: 0.8;
	}

	.e-qx14d-link a:hover,
	.e-qx24d-link a:hover,
	.e-qx34d-link a:hover,
	.e-ft12b-mentions a:hover,
	.e-ft13c-confidentialite a:hover,
	.cx-mention a:hover {
		color: #ff5823;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
   Hero vidéo (tools/blocs/hero.py)
--------------------------------------------------------------------------- */

/* Le widget HTML classique ne s'étire pas dans un conteneur flex : sans cette
   règle, l'iframe garde sa largeur par défaut de 300px. */
.elementor-widget-html:has(.cx-hero-video) {
	width: 100%;
}

.cx-hero-video {
	position: relative;      /* ancre le bouton de son */
	width: 100%;
	line-height: 0;          /* pas d'espace fantôme sous l'iframe */
	/* Chrome ne lisse pas un border-radius posé sur une <iframe> : les coins
	   sortent crénelés. Le découpage est donc fait par le conteneur, et
	   `translateZ(0)` force une couche composée, seule à être anticrénelée. */
	border-radius: 18px;
	overflow: hidden;
	transform: translateZ(0);
}

/* Bouton de son, posé sur la vidéo. */
.cx-son {
	position: absolute;
	/* À gauche : YouTube garde son badge « Regarder sur YouTube » à droite. */
	inset-block-end: 20px;
	inset-inline-start: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cx-son:hover {
	background: #e20817;
}

.cx-son:focus-visible {
	outline: 3px solid #f7dad0;
	outline-offset: 3px;
}

.cx-son__icone {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

/* Un seul jeu d'icônes : la croix cède la place aux arcs quand le son est actif. */
.cx-son .cx-son__actif,
.cx-son--actif .cx-son__coupe {
	display: none;
}

.cx-son--actif .cx-son__actif {
	display: inline;
}

@media (max-width: 767px) {
	.cx-son {
		inset-block-end: 10px;
		inset-inline-start: 10px;
		height: 38px;
		padding: 0 12px 0 10px;
		gap: 6px;
		font-size: 12px;
	}

	.cx-son__icone {
		width: 18px;
		height: 18px;
	}
}

.cx-hero-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 18px;
}

/* Desktop : la vidéo tient dans la hauteur de l'écran, sinon le bouton de son
   (en bas du cadre) n'apparaît qu'après avoir fait défiler la page.

   On ne réduit pas la largeur : une vidéo 16:9 plus basse serait aussi plus
   étroite et se recentrerait, et son bord gauche quitterait les 28px sur
   lesquels se raccorde la découpe de la tuile du logo. Le cadre garde donc
   toute sa largeur, sa hauteur est plafonnée à l'écran moins le header (40px),
   et la vidéo, en 16:9, déborde en haut et en bas - rognée à parts égales,
   comme un « cover ». Sur un écran assez haut, rien n'est rogné. */
@media (min-width: 768px) {
	.cx-hero-video:not(.cx-hero-video--vertical) {
		aspect-ratio: 16 / 9;
		max-height: calc(100vh - 40px);
		max-height: calc(100svh - 40px);
	}

	.cx-hero-video:not(.cx-hero-video--vertical) iframe {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		/* Le cadre découpe déjà les coins arrondis : pas de rayon sur une iframe
		   qui déborde, il tomberait hors champ. */
		border-radius: 0;
	}
}

/* Version mobile : le script du hero garde l'extrait 9:16 hébergé sur le site
   et pose cette classe. Le format suit le média réellement chargé, pas la
   largeur d'écran : un écran qu'on fait pivoter après chargement garde un
   cadre cohérent. */
.cx-hero-teaser {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: #000;
}

.cx-hero-teaser[hidden] {
	display: none;
}

/* L'extrait n'a pas de son : pas de bouton de son sur mobile. L'icône play,
   elle, n'existe que là. */
.cx-hero-video--vertical .cx-son,
.cx-hero-video:not(.cx-hero-video--vertical) .cx-play {
	display: none;
}

/* Icône play de la maquette, centrée sur l'extrait. */
.cx-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 88px;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cx-play img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

.cx-play:focus-visible {
	outline: 3px solid #f7dad0;
	outline-offset: 4px;
}

/* Le Short en plein écran (caritas-hero-son.js). */
.cx-video-plein {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	overflow: hidden;
}

.cx-video-plein::backdrop {
	background: #000;
}

html:has(.cx-video-plein[open]) {
	overflow: hidden;
}

.cx-video-plein__lecteur:focus {
	outline: none;
}

.cx-video-plein__lecteur,
.cx-video-plein__lecteur iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Même carré rouge que la croix des histoires, dans la zone sûre de l'écran. */
.cx-video-plein__fermer {
	position: absolute;
	z-index: 1;
	top: max(10px, env(safe-area-inset-top));
	right: max(10px, env(safe-area-inset-right));
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #e20817;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 28px;
	line-height: 40px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.cx-video-plein__fermer:focus:not(:focus-visible) {
	outline: none;
}

.cx-video-plein__fermer:focus-visible {
	outline: 3px solid #f7dad0;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Confirmation du formulaire (tools/form.py)

   Elle remplace le formulaire sur place : le titre « Restons connectés » et
   l'accroche restent affichés au-dessus, comme dans la maquette.
--------------------------------------------------------------------------- */

.cx-merci {
	padding: 40px 0 80px;
}

/* Le visuel est exporté du Figma en 3x (1011px) pour une largeur d'affichage
   de 337px dans la maquette : on ne le laisse pas s'étirer au-delà de sa
   définition utile. */
/* `.elementor img` impose max-width:100% : le sélecteur doit peser plus lourd. */
.cx-merci img.cx-merci__visuel {
	display: block;
	width: 100%;
	max-width: 505px;
	height: auto;
	margin: 0 0 32px;
}

.cx-merci__texte {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.01em;
	color: #000;
}

.cx-merci__para {
	max-width: 625px;        /* largeur d'une colonne du formulaire */
	margin: 16px 0 0;
	font-family: Inter, sans-serif;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: #000;
}

/* Signature de campagne, comme en fin de récit. */
.cx-merci__signature {
	margin: 32px 0 0;
	font-family: Anton, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: -0.01em;
	color: #e20817;
}

@media (max-width: 767px) {
	.cx-merci {
		padding: 24px 0 40px;
	}

	.cx-merci__para {
		max-width: none;
		font-size: 16px;
		line-height: 24px;
	}

	.cx-merci__signature {
		font-size: 24px;
		line-height: 28px;
	}

	.cx-merci img.cx-merci__visuel {
		max-width: 100%;
		margin-bottom: 20px;
	}

	.cx-merci__texte {
		font-size: 18px;
		line-height: 24px;
	}
}

/* Mention de traitement des données, sous le formulaire (blocs/formulaire.py). */
.cx-mention {
	max-width: 625px;        /* largeur d'une colonne du formulaire */
	margin: 12px 0 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.01em;
	color: #000;
}

.cx-mention a {
	color: #e20817;
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* Même taille que la note « Les envois sont limités… » juste au-dessus. */
	.cx-mention {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   Sous-menu de langue du header (mu-plugins/caritas-langues.*)

   Mêmes pastilles fuchsia que le bouton, empilées dessous. Pas de maquette :
   le menu reprend le bouton qui l'ouvre.
--------------------------------------------------------------------------- */

.cx-langue {
	position: relative;
	cursor: pointer;
}

.cx-langue__chevron {
	transition: transform 0.15s ease;
}

/* Aucune autre langue disponible pour cette page : pas de menu, donc pas de
   chevron ni de curseur cliquable (caritas-langues.js). */
.cx-langue--seule {
	cursor: default;
}

.cx-langue--seule .cx-langue__chevron {
	display: none;
}

.cx-langue--ouvert .cx-langue__chevron {
	transform: rotate(180deg);
}

.cx-langue__menu {
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	/* Au-dessus de la tuile du logo (z-index 10) et de la vidéo du hero. */
	z-index: 20;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cx-langue__menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background: #ff21a6;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
	/* Filet entre les pastilles, pour qu'elles ne se fondent pas en un bloc. */
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.cx-langue__menu a:hover,
.cx-langue__menu a:focus-visible {
	background: #ff5823;
	outline: none;
}

@media (max-width: 767px) {
	.cx-langue__menu a {
		height: 31px;
		font-size: 18px;
	}
}