/* ============================================================
   Section "Hero" — superposition de deux dégradés sombres
   (vertical + horizontal) au-dessus de l'image de fond, afin
   d'assombrir le visuel et garantir la lisibilité du contenu.

   - ::before  → dégradé vertical (haut clair → bas très sombre)
   - ::after   → dégradé horizontal (gauche sombre → droite transparente)
   - Le contenu Divi (rangées, colonnes, modules) est remonté
     au-dessus des overlays via z-index.
   ============================================================ */

.hero-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hero-section::before,
.hero-section::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.hero-section::before {
	background: linear-gradient(
		to bottom,
		rgba(0, 35, 26, 0.38) 0%,
		rgba(0, 35, 26, 0.28) 35%,
		rgba(0, 35, 26, 0.70) 100%
	);
}

.hero-section::after {
	background: linear-gradient(
		to right,
		rgba(0, 35, 26, 0.45) 0%,
		rgba(0, 35, 26, 0.10) 60%,
		transparent 100%
	);
}

.hero-section .et_pb_row,
.hero-section .et_pb_column,
.hero-section .et_pb_module {
	position: relative;
	z-index: 2;
}

/* Mobile — on annule les sauts de ligne forcés du titre :
   l'écran est trop étroit pour le découpage 3 lignes,
   on laisse le texte couler naturellement. */
@media (max-width: 767px) {
	/* L'image de fond (réglée dans Divi) est en « cover » : sur mobile
	   le cadrage centré masque la zone qui nous intéresse. On recentre
	   entre le centre et la gauche (~30 %) pour la garder visible.
	   !important car Divi génère sa propre règle de background. */
	.hero-section {
		/* cover = l'image couvre TOUJOURS toute la section (jamais de
		   fond vert). On ne peut pas « dézoomer » sous le cover sans
		   laisser des zones vides : pour montrer plus de l'image on
		   réduit plutôt la HAUTEUR du hero (padding ci-dessous), ce qui
		   recadre moins l'image paysage. */
		background-position: 39% center !important;
		background-size: cover !important;

		/* Hauteur du hero sur mobile : Divi met ~120px haut/bas.
		   On réduit pour « dézoomer » (section moins haute = image moins
		   recadrée). Monter les valeurs = hero plus haut + image plus
		   zoomée ; descendre = plus court + plus dézoomé. */
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	.hero-section h1 br {
		display: none;
	}

	/* Le <br> supprimé laissait les mots collés (« donnezun ») :
	   on réinjecte un espace devant le morceau qui suivait le saut. */
	.hero-section h1 br + span::before {
		content: " ";
	}
}