/* ==========================================================================
   Page d'accueil — bannière principale (« hero »)
   ========================================================================== */

/* Voile de lisibilité. Flatsome pose une couleur plate via bg_overlay ; on la
   remplace par un dégradé pour garder la photo visible à droite, là où il n'y
   a pas de texte. */
.hero-home .overlay {
	background: linear-gradient(
		100deg,
		rgba(14, 59, 51, 0.78) 0%,
		rgba(14, 59, 51, 0.62) 38%,
		rgba(14, 59, 51, 0.22) 72%,
		rgba(14, 59, 51, 0.10) 100%
	) !important;
}

.hero-home h1 {
	margin-bottom: 0.35em;
}

.hero-home .lead {
	/* Le text_box Flatsome part d'une base de 12 px : en em, le texte sort
	   minuscule. Tailles posees en absolu. */
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 1.3em;
	max-width: 30em;
}

/* Ligne de preuve sous le bouton : note, volume d'avis, fabrication, délai. */
.hero-home .hero-proof {
	margin: 1.1em 0 0;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

.hero-home .hero-proof-stars {
	color: #f2c14e;
	letter-spacing: 0.08em;
}

@media (max-width: 849px) {
	.hero-home .lead {
		margin-bottom: 1em;
	}

	.hero-home .lead {
		font-size: 15px;
	}

	.hero-home .hero-proof {
		font-size: 12.5px;
		line-height: 1.6;
	}
}

/* --------------------------------------------------------------------------
   Accueil — les deux tuiles à droite du hero
   -------------------------------------------------------------------------- */

/* Photos claires (bois, tissus pâles) sous du texte blanc : le voile plat de
   Flatsome ne suffisait pas. Dégradé plus dense vers le bas, là où tombent les
   légendes. */
.home-tile .overlay {
	background: linear-gradient(
		180deg,
		rgba(14, 59, 51, 0.38) 0%,
		rgba(14, 59, 51, 0.58) 45%,
		rgba(14, 59, 51, 0.70) 100%
	) !important;
}

/* La légende sortait à 15,6 px pour un titre à 30 px : trop ténue. */
.home-tile .text-box p {
	font-size: 14px;
	line-height: 1.5;
}

/* Couleur d'attente des bannières : Flatsome peint le fond en
   var(--fs-color-primary) (#1C6B5C) tant que la photo n'est pas chargée, ce qui
   donne un aplat vert foncé au chargement. On reprend le vert clair du bandeau
   de menu et du pied de page. */
.banner.hero-home,
.banner.home-tile {
	background-color: #bfe0d8;
}

/* Le bouton du hero tombait à 39 px de haut sur mobile : sous la cible
   tactile de 44 px. */
@media (max-width: 849px) {
	.hero-home .button {
		font-size: 16px;
		min-height: 48px;
		line-height: 48px;
		padding-left: 1.4em;
		padding-right: 1.4em;
	}
}

/* --------------------------------------------------------------------------
   Accueil — bande « promesses » sous le hero
   Quatre cartes, une promesse chacune, avec les logos maison.
   -------------------------------------------------------------------------- */

.promises-band .promise-icon {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
}

.promises-band h3 {
	margin-bottom: 0.4em;
	font-size: 17px;
	line-height: 1.3;
}

.promises-band p {
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #3d5f58;
}

@media (max-width: 849px) {
	/* Icône et texte côte à côte plutôt qu'empilés : la bande reste courte. */
	.promises-band .promise {
		display: grid;
		grid-template-columns: 48px 1fr;
		grid-column-gap: 14px;
		align-items: start;
	}

	.promises-band .promise-icon {
		grid-row: span 2;
		margin-bottom: 0;
	}

	.promises-band h3 {
		margin-top: 0.2em;
	}
}