.eho-accent {
	background-image: linear-gradient(transparent 78%, var(--eho-accent-couleur, var(--eho-rouge)) 78%);
	background-repeat: no-repeat;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.eho-apropos__titre {
	--eho-accent-couleur: var(--eho-vert);
	font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	line-height: var(--eho-interligne-grand-titre);
	letter-spacing: var(--eho-approche-titre);
}

.eho-surtitre {
	/* 26px jusqu au titre en production : 8 en posaient 30. */
	margin-bottom: 0.25rem;
	font-size: var(--eho-taille-md);
	font-weight: var(--eho-poids-gras);
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--eho-rouge);
}

.eho-surtitre--vert {
	color: var(--eho-vert);
}

.eho-entete-section {
	margin-bottom: var(--eho-espace-xl);
}

/* 53px sous le titre des produits a la une, releves sur la production. */
.eho-produits .eho-entete-section {
	margin-bottom: 3.3125rem;
}

.eho-entete-section--centre {
	text-align: center;
}

.eho-entete-section__titre {
	margin-bottom: 0;
	font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
	line-height: var(--eho-interligne-grand-titre);
	letter-spacing: var(--eho-approche-titre);
}

/* Banniere principale */

.eho-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: clamp(4rem, 12.5vw, 11.25rem) clamp(4.5rem, 14.6vw, 13.125rem);
	overflow: hidden;
	isolation: isolate;
}

.eho-hero__diaporama {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.eho-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 500ms ease-in-out;
}

.eho-hero__slide.is-active {
	opacity: 1;
}

.eho-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: eho-ken-burns 12s ease-out both;
}

@keyframes eho-ken-burns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

.eho-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(27, 28, 66, 0.35) 0%, rgba(27, 28, 66, 0.1) 45%, rgba(27, 28, 66, 0) 62%);
}

/* Contenu de 262px comme en production : 10 au-dessus du titre, 20 sous le
   sous-titre. Le notre en faisait 218, d ou un hero de 608 contre 652. */
.eho-hero__contenu {
	position: relative;
	padding-block: 0.625rem 1.25rem;
	color: var(--eho-blanc);
}

.eho-hero__titre {
	/* 30px sous le titre en production, contre 16 pour l espace md. */
	margin-bottom: 1.875rem;
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	color: var(--eho-blanc);
}

.eho-hero__soustitre {
	margin-bottom: 0;
	font-size: clamp(1.25rem, 2.78vw, 2.5rem);
	font-weight: var(--eho-poids-moyen);
	line-height: 1.2;
	color: var(--eho-blanc);
}

/* La production met les mots en avant en demi-gras, pas en gras. */
.eho-hero__soustitre strong {
	font-weight: var(--eho-poids-semi);
}

/* Cartes energies */

/* La carte fait 390 de haut des deux cotes. La production la borde de 30 en
   haut et en bas, pour une section de 450, et pose 70 en dessous : ces 130px
   etaient le premier poste de l ecart de hauteur de l accueil. */
.eho-energies {
	position: relative;
	z-index: 2;
	padding-block: 1.875rem;
	margin-top: clamp(-11.25rem, -12.5vw, -4rem);
	margin-bottom: 4.375rem;
}

.eho-energies__liste {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4rem;
	margin: 0;
	padding-block: 0;
	padding-inline: 1.875rem;
	list-style: none;
}

.eho-carte-energie {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-md);
	height: 100%;
	min-height: 24.375rem;
	padding: 2.1875rem;
	text-align: center;
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-lg);
	box-shadow: var(--eho-ombre);
}

.eho-carte-energie__icone {
	display: block;
	width: 3rem;
	color: var(--eho-lien);
}

.eho-carte-energie--rouge .eho-carte-energie__icone { color: var(--eho-rouge); }
.eho-carte-energie--vert .eho-carte-energie__icone { color: var(--eho-vert); }
.eho-carte-energie--jaune .eho-carte-energie__icone { color: var(--eho-jaune); }

.eho-carte-energie--bleu { --eho-accent-couleur: var(--eho-lien); }
.eho-carte-energie--rouge { --eho-accent-couleur: var(--eho-rouge); }
.eho-carte-energie--vert { --eho-accent-couleur: var(--eho-vert); }
.eho-carte-energie--jaune { --eho-accent-couleur: var(--eho-jaune); }

.eho-carte-energie__titre .eho-accent {
	background-image: linear-gradient(transparent 85%, var(--eho-accent-couleur) 85%);
}

.eho-carte-energie__titre {
	margin-bottom: 0;
	font-size: 1.75rem;
	font-weight: var(--eho-poids-gras);
	color: var(--eho-bleu);
}

.eho-carte-energie__texte {
	flex: 1 1 auto;
	margin-bottom: 0;
	font-size: var(--eho-taille-md);
	line-height: 1.5;
}

.eho-carte-energie__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.4rem;
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-gras);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--eho-blanc);
	border-radius: var(--eho-rayon-rond);
	transition: filter var(--eho-transition);
}

.eho-carte-energie__bouton:hover,
.eho-carte-energie__bouton:focus-visible {
	color: var(--eho-blanc);
	filter: brightness(0.9);
}

.eho-carte-energie__bouton--bleu { background-color: var(--eho-lien); }
.eho-carte-energie__bouton--rouge { background-color: var(--eho-rouge); }
.eho-carte-energie__bouton--vert { background-color: var(--eho-vert); }
.eho-carte-energie__bouton--jaune { background-color: var(--eho-jaune); color: var(--eho-bleu); }
.eho-carte-energie__bouton--jaune:hover { color: var(--eho-bleu); }

/* Banniere secondaire */

/* La production n entoure pas le carrousel de padding : elle l espace par des
   marges de 70, qui fusionnent avec celle des sections voisines. */
.eho-banniere {
	padding-block: 0;
	margin-block: 4.375rem;
}

.eho-banniere .eho-conteneur {
	overflow: hidden;
}

.eho-banniere__piste {
	display: flex;
	transition: transform 500ms ease;
}

.eho-banniere__slide {
	flex: 0 0 100%;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.eho-banniere__piste {
		transition: none;
	}
}

.eho-banniere__image {
	width: 100%;
}

.eho-banniere__puces {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.eho-banniere__puce {
	width: 10px;
	height: 10px;
	padding: 0;
	background: none;
	border: 2px solid var(--eho-gris-400);
	border-radius: var(--eho-rayon-rond);
	transition: background-color var(--eho-transition), border-color var(--eho-transition);
}

.eho-banniere__puce.is-active {
	background-color: var(--eho-gris-800);
	border-color: var(--eho-gris-800);
}

/* A propos */

/* 30 de padding et 106,4 de marge haute, relevees sur la production. Cette
   marge fusionne avec les 70 de la banniere : la plus grande l emporte. */
.eho-apropos {
	padding-block: 1.875rem;
	margin-top: 6.65rem;
}

/* Colonnes alignees en haut, comme en production : centrees, le texte suivait
   la colonne media, plus haute, et descendait de 46px. */
.eho-apropos__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eho-espace-3xl);
	align-items: start;
}

.eho-apropos__introduction {
	font-size: var(--eho-taille-base);
}

.eho-apropos__puces {
	margin: var(--eho-espace-lg) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--eho-espace-md);
}

.eho-apropos__puce {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-md);
	font-size: 1.25rem;
	font-weight: var(--eho-poids-gras);
	line-height: 1.4;
	color: var(--eho-bleu);
}

.eho-apropos__puce-icone {
	flex: none;
	display: block;
	width: 1.5rem;
	margin-block-start: 0.1em;
	color: var(--eho-rouge);
}

/* Colonne de 536 comme en production, qui remonte son bouton sur l image au
   lieu de l en detacher. Les 24 du gap etaient tout l ecart, et se propageaient
   a toutes les sections suivantes. */
/* Le bouton etait colle au pixel sous la photo du camion : l'image finissait
   a 2167 et il commencait a 2167. Il lui faut son ecart. */
.eho-apropos__media {
	display: grid;
	justify-items: center;
	gap: var(--eho-espace-xl);
}

.eho-apropos__image {
	width: 100%;
	border-radius: var(--eho-rayon-lg);
}

.eho-apropos__bouton {
	padding: 1.25rem 2.5rem;
	font-size: 1.0625rem;
	line-height: 1;
	border-style: dashed;
	border-color: var(--eho-vert);
	border-radius: 18px;
	color: var(--eho-vert);
}

.eho-apropos__bouton:hover,
.eho-apropos__bouton:focus-visible {
	background-color: var(--eho-vert);
	color: var(--eho-blanc);
}


/* Padding dissymetrique de la production, 26,6 en haut et 53,2 en bas, plus
   106,4 de marge haute. Nos 96 symetriques fermaient l espace avant le fond
   gris et l ouvraient trop apres. */
.eho-categories {
	padding-block: 1.6625rem 3.325rem;
	margin-top: 6.65rem;
	background-color: var(--eho-fond-alt);
}

/* Gouttiere de 20 en production, qui porte ses vignettes a 318 de large. La
   notre, 32, les ramenait a 309. */
.eho-categories__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La production n entoure pas cette section de padding : elle la detache par
   une marge de 106,4, la meme qu avant les categories et les actualites. */
.eho-produits {
	padding-block: 0;
	margin-top: 6.65rem;
}

/* Les 10px de retrait que la production pose autour de chaque bloc. */
.eho-produits .eho-conteneur,
.eho-categories .eho-conteneur {
	padding-block: 0.625rem;
}

/* Meme gouttiere de 20 que la grille des categories. */
.eho-produits__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Actualites */

/* Releve sur la production : 123px entre le haut du bandeau et le titre, 53
   apres le bouton. L espace 3xl posait 85,5 des deux cotes. */
.eho-actualites {
	padding-block: 7.6875rem 3.3125rem;
	margin-top: 6.65rem;
	/* La production intercale un bandeau blanc de 40 entre ce fond bleu et les
	   reassurances, ce qui porte a 71 la distance jusqu a leur texte, contre 34
	   partout ailleurs. Les 34 de `pied.css` sont justes sur la boutique : seul
	   l accueil porte ce bloc, la marge reste donc ici. */
	margin-bottom: 2.3125rem;
	background-color: var(--eho-bleu);
	color: var(--eho-blanc);
	border-start-end-radius: 6.25rem;
}

.eho-actualites__titre {
	/* 34px sous le titre en production, contre 48 pour l espace 2xl. */
	margin-bottom: 2.125rem;
	font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
	/* La production porte son titre dans un lien en 600 : c est lui qui donne le
	   texte visible, le h2 qui l entoure etant en 700. Les 43px de haut viennent
	   de l interligne, pas de la graisse. */
	font-weight: var(--eho-poids-semi);
	line-height: 1.34;
	letter-spacing: var(--eho-approche-titre);
	color: var(--eho-blanc);
}

/* Variante sombre de la carte article, definie dans components/page.css */

.eho-carte-article--sombre .eho-carte-article__titre {
	font-size: 1.5625rem;
}

/* Carte de hauteur fixe qui rogne ce qui depasse, comme en production : ses
   trois cartes font 575px avec `overflow: hidden`. Un titre de quatre lignes y
   evince donc l extrait, un titre de deux lignes en laisse voir 95px. Ce n est
   pas une troncature de mots mais une boite qui coupe. Le `gap` pose les 19px
   qui separent l image du texte. */
.eho-actualites .eho-carte-article {
	height: 35.9375rem;
	overflow: hidden;
	gap: 1.1875rem;
}

/* Texte en retrait de 25px, comme en production : son titre n occupe que 373px
   dans une carte de 423, ce qui le porte a quatre lignes et redistribue
   l extrait en dessous. L image, elle, reste pleine largeur. Le `gap` pose les
   20px entre le titre et l extrait. */
.eho-actualites .eho-carte-article__corps {
	padding-inline: 1.5875rem;
	gap: 1.25rem;
}

/* 25px en 600 comme en production, la ou le h3 du socle est en 700. */
.eho-actualites .eho-carte-article__titre {
	line-height: 1.2;
	margin-bottom: 0;
	font-weight: var(--eho-poids-semi);
}

/* 22px entre l extrait et le lien en production. Le `gap` du corps en pose 20,
   et les 2px restants valent aussi quand l extrait manque. */
.eho-actualites .eho-carte-article__suite {
	margin-block-start: 2px;
}

.eho-carte-article--sombre .eho-carte-article__titre a {
	color: var(--eho-blanc);
}

/* 17px dans un blanc casse en production, et non 16 dans un blanc transparent. */
.eho-carte-article--sombre .eho-carte-article__extrait {
	font-size: 1.0625rem;
	color: #f9fafd;
}


.eho-actualites__action {
	/* 20px entre la grille et le bouton, releve sur la production. */
	margin: 1.25rem 0 0;
	text-align: center;
}

/* Releve sur la production : 281x40, rayon 3px, pas la pilule du bouton
   generique. Couleur, graisse, casse et marges internes sont deja les siennes. */
.eho-actualites__action .eho-bouton {
	line-height: 1;
	/* Le bouton generique porte une bordure transparente de 2px, d ou 44px de
	   haut au lieu des 40 de la production. */
	border: 0;
	border-radius: 3px;
}

/* Gouttiere relevee sur la production : 35px entre les rangees, 30 entre les
   colonnes. La notre, 85,5 et 107, ramenait les cartes de 423 a 372px. Bornee
   a l accueil : l espacement de l archive des actualites n est pas mesure. */
.eho-actualites .eho-liste-articles {
	gap: 2.1875rem 1.875rem;
}

/* La production tient ses vignettes a 301px de haut pour 423 de large. Le
   rapport 62/50 du gabarit generique les portait a 341, d ou des cartes de
   588 au lieu de 575. Bornee a l accueil, pour la meme raison. */
.eho-actualites .eho-carte-article__image {
	aspect-ratio: 423 / 301;
}

@media (max-width: 1024px) {
	/* La production garde trois cartes energies de front a cette largeur. */
	.eho-energies__liste {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Les grilles de categories et de produits restent a quatre de front :
	   la production ne les casse pas a cette largeur. */

	.eho-energies {
		margin-top: var(--eho-espace-xl);
	}

	.eho-energies__liste {
		gap: var(--eho-espace-lg);
	}

	.eho-carte-energie {
		min-height: 0;
	}
}

/* La production tient la section a propos en deux colonnes jusqu'a la tablette. */
@media (max-width: 900px) {
	.eho-apropos__grille {
		grid-template-columns: 1fr;
		gap: var(--eho-espace-xl);
	}

	.eho-energies__liste,
	.eho-categories__grille,
	.eho-produits__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	/* Sur telephone la production garde deux categories et deux produits de
	   front : seules les grandes cartes energies passent en pleine largeur. */
	.eho-energies__liste {
		grid-template-columns: 1fr;
	}

	.eho-hero::before {
		background: linear-gradient(180deg, rgba(37, 39, 84, 0.45) 0%, rgba(37, 39, 84, 0.25) 100%);
	}
}

/* Synthese des avis, en tete de la section categories */

/* La production centre le badge sur le bloc de titre et laisse 60px avant la
   grille. Cale en haut et sans marge, le badge touchait presque les vignettes. */
/* 160 de haut en production, le badge d avis centre dedans, et 50 en dessous :
   le notre se limitait a la hauteur du badge, soit 120, et poussait 60. */
.eho-categories__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-xl);
	flex-wrap: wrap;
	padding-block: 1.25rem;
	margin-bottom: 3.125rem;
}

/* La marge basse de l'en-tete de section n'a plus lieu d'etre ici : elle entre
   dans le calcul du centrage et remontait le titre de 16px face au badge. */
.eho-categories__entete > .eho-entete-section {
	margin-bottom: 0;
}

/* La banniere ne doit pas pousser la page sur mobile */

.eho-banniere__slide,
.eho-banniere__lien {
	max-width: 100%;
}

.eho-banniere__image {
	width: 100%;
	height: auto;
	object-fit: cover;
}