/* ============================================================================
   Hero des pages Elementor : Contact (post 4371) et A propos (post 6158)
   ----------------------------------------------------------------------------
   Modele de la page Presse, arrete les 12 et 13 septembre 2026 : photo plein
   cadre sous un voile, header transparent d'Astra pose dessus, contenu cale en
   bas et aligne a gauche sur 1140px. Plancher, marges et typographie viennent
   des jetons --ew-hero-* de style.css (DESIGN-TOKENS.md, section Hero).

   PARTAGE DES PORTEURS.
     photo et voile ... fond du conteneur Elementor et son voile, regles dans
                        l'editeur
     texte ............ widget HTML du meme conteneur, balisage .exw-hero
     plancher, marges,
     cadrage .......... cette feuille, sur le conteneur qui porte le widget

   Le conteneur est designe par ce qu'il contient, via :has(), jamais par son
   identifiant Elementor, qui change des qu'une section est reconstruite : meme
   regle que contact.css.

   SPECIFICITE. Elementor pose les variables du conteneur en (0,3,0) et sa photo
   en (0,4,0). Les selecteurs du conteneur sortent ici du (0,4,1), sans
   !important.

   VOILE. Uni, de la teinte sombre du site (astglobalcolor7), sans aucun
   degrade : c'est le voile du conteneur, regle dans Elementor, a 61 % sur
   Contact et 62 % sur A propos. Ce sont les plus faibles opacites qui tiennent
   4,5:1 sur le titre, l'accroche, la meta et le menu : l'accroche et la meta,
   blanches a 88 %, passent sur les pixels les plus clairs de la photo et
   decident de la valeur. Une degressivite vers la droite ne gagne rien, le
   texte courant jusqu'au bord droit aux petites largeurs.

   MESURE. Page de production servie avec ce balisage et cette feuille,
   captures de Chrome, contraste WCAG calcule pixel par pixel sur les boites de
   ligne, a 390, 600, 768, 1024, 1100, 1240, 1241, 1440, 1680, 1920 et 2560px.
   Pire pixel, Contact : titre 5,55:1, accroche 4,79:1, meta 4,79:1, menu
   5,85:1. A propos : titre 5,62:1, accroche 4,75:1, meta 4,77:1, menu 5,85:1.
   Le surtitre orange, etiquette decorative, n'est pas tenu : 1,7 a 4,7:1 sur
   Contact, 1,9 a 2,0:1 sur A propos ; les chiffres orange de la meta d'A
   propos, 1,8 a 1,9:1. Changer la photo, son cadrage, l'opacite du voile dans
   Elementor ou la largeur du texte oblige a refaire cette mesure.
   ============================================================================ */

/* ---------------------------------------------------------------- conteneur */

body.page-id-4371 .elementor-4371 > .e-con:has(.exw-hero),
body.page-id-6158 .elementor-6158 > .e-con:has(.exw-hero) {
	--min-height: var(--ew-hero-min-height);
	--justify-content: flex-end;
	--padding-top: var(--ew-hero-pad-top);
	--padding-bottom: var(--ew-hero-pad-bottom);
	--padding-left: 24px;
	--padding-right: 24px;
	--content-width: var(--ew-hero-content-max);
	background-color: var(--e-global-color-astglobalcolor7);
}

/* Cadrage : la photo remonte de 20 %. Calee en haut, le titre passait sur les
   visages des 1920px de large, ou le hero ne montre plus qu'une bande de
   l'image. */
body.page-id-4371 .elementor-4371 > .e-con:has(.exw-hero) {
	background-position: 52% 20%;
}

body.page-id-6158 .elementor-6158 > .e-con:has(.exw-hero) {
	background-position: 50% 20%;
}

/* ------------------------------------------------------------------- texte */

/* Bornee ici et pas seulement par --content-width : le conteneur de la page
   A propos est en pleine largeur, sans .e-con-inner pour porter la borne. */
.exw-hero {
	width: 100%;
	max-width: var(--ew-hero-content-max);
	margin: 0 auto;
}

.exw-hero .exw-hero__surtitre {
	margin: 0 0 var(--ew-hero-eyebrow-margin);
	font-size: var(--ew-hero-eyebrow-size);
	font-weight: var(--ew-hero-eyebrow-weight);
	line-height: var(--ew-hero-eyebrow-line-height);
	letter-spacing: var(--ew-hero-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--ew-hero-eyebrow-color);
}

/* La police est redeclaree : sur une page Elementor, le kit pose la sienne sur
   les h1 nus et l'emporte sur celle de style.css. Mesure, le titre sortait en
   Manrope. */
.exw-hero .exw-hero__titre {
	margin: 0 0 var(--ew-hero-h1-margin);
	font-family: var(--ew-font-title);
	font-size: var(--ew-hero-h1-size);
	font-weight: var(--ew-hero-h1-weight);
	line-height: var(--ew-hero-h1-line-height);
	letter-spacing: var(--ew-hero-h1-tracking);
	color: var(--ew-hero-h1-color);
}

.exw-hero .exw-hero__accroche {
	max-width: var(--ew-hero-subtitle-max);
	margin: 0 0 var(--ew-hero-subtitle-margin);
	font-size: var(--ew-hero-subtitle-size);
	line-height: var(--ew-hero-subtitle-line-height);
	color: var(--ew-hero-subtitle-color);
}

/* Elements separes par « · », 9px de part et d'autre, et seulement entre deux
   elements d'une meme ligne. Le point est pose avant chaque element, hors du
   flux, dans l'ecart qui le precede. Celui de l'element qui ouvre une ligne
   tombe a gauche de la boite, ou overflow le masque : quand la ligne se
   replie, aucun point ne la finit ni ne l'ouvre, sans script ni media query.
   L'ecart vaut les deux marges plus la chasse du point dans Plus Jakarta Sans,
   0,286em, mesuree dans Chrome. Meme construction que le glossaire et le
   comparateur. */
.exw-hero .exw-hero__meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: calc(2 * var(--ew-hero-meta-separator-margin) + 0.286em);
	margin: 0;
	overflow: hidden;
	font-size: var(--ew-hero-meta-size);
	font-weight: var(--ew-hero-meta-weight);
	line-height: var(--ew-hero-meta-line-height);
	color: var(--ew-hero-meta-color);
}

.exw-hero .exw-hero__meta > span {
	position: relative;
}

.exw-hero .exw-hero__meta > span::before {
	content: "·";
	position: absolute;
	right: 100%;
	margin-right: var(--ew-hero-meta-separator-margin);
}

/* Chiffres de la ligne de meta, dans l'orange du surtitre : page A propos. */
.exw-hero .exw-hero__chiffre {
	color: var(--ew-hero-eyebrow-color);
}