/* Fichier construit par scripts/construire-css.sh. Ne pas modifier a la main. */

/* --- fonts.css --- */
@font-face {
	font-family: "Quicksand";
	src: url("../fonts/quicksand-variable-latin.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/quicksand-variable-latin-ext.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens.css --- */
:root {
	--eho-bleu: #252754;
	--eho-bleu-clair: #3a3d78;
	--eho-rouge: #e31339;
	--eho-rouge-fonce: #b70e2d;
	--eho-vert: #6ab32d;
	--eho-vert-fonce: #558f23;
	/* Le vert des boutons d'ajout au panier, plus clair que le vert de marque.
	   Releve sur la production, identique en boutique et sur la page solaire. */
	--eho-vert-panier: #83b735;
	--eho-jaune: #ffc200;
	--eho-lien: #188cf8;

	--eho-texte: #5a6670;
	--eho-texte-titre-page: #242424;
	--eho-texte-fort: #252754;
	--eho-texte-faible: #82838e;
	--eho-blanc: #ffffff;
	--eho-gris-000: #fbfbfb;
	--eho-gris-050: #f9fafd;
	--eho-gris-100: #eff1f3;
	--eho-gris-200: #e2e2e2;
	--eho-gris-300: #cbcccb;
	--eho-gris-400: #bfbfbf;
	--eho-gris-600: #6d6d6d;
	--eho-gris-800: #3e3e3e;

	--eho-succes: #6ab32d;
	--eho-alerte: #ffc200;
	--eho-erreur: #e31339;

	--eho-fond: var(--eho-blanc);
	--eho-fond-alt: var(--eho-gris-050);
	--eho-bordure: var(--eho-gris-200);

	--eho-police: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
	--eho-police-titre: var(--eho-police);

	--eho-poids-normal: 400;
	--eho-poids-moyen: 500;
	--eho-poids-semi: 600;
	--eho-poids-gras: 700;

	--eho-taille-xs: 0.75rem;
	--eho-taille-sm: 0.875rem;
	--eho-taille-base: 1rem;
	--eho-taille-md: 1.125rem;
	--eho-taille-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
	--eho-taille-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
	--eho-taille-2xl: clamp(1.875rem, 2vw + 1.25rem, 2.75rem);
	--eho-taille-3xl: clamp(2.25rem, 3vw + 1.25rem, 3.5rem);

	--eho-interligne: 1.4;
	--eho-interligne-titre: 1.2;
	--eho-interligne-grand-titre: 1.35;
	--eho-approche-titre: -0.5px;

	--eho-espace-2xs: 0.25rem;
	--eho-espace-xs: 0.5rem;
	--eho-espace-sm: 0.75rem;
	--eho-espace-md: 1rem;
	--eho-espace-lg: 1.5rem;
	--eho-espace-xl: 2rem;
	--eho-espace-2xl: 3rem;
	--eho-espace-3xl: clamp(3rem, 6vw, 6rem);

	/* 1330px : largeur de contenu relevee sur la production, identique sur
	   l'accueil, les pages de categorie et les pages simples. */
	--eho-conteneur: 83.125rem;
	--eho-conteneur-etroit: 48rem;
	--eho-gouttiere: clamp(1rem, 4vw, 2.5rem);

	--eho-rayon-sm: 4px;
	--eho-rayon: 8px;
	--eho-rayon-lg: 16px;
	--eho-rayon-rond: 999px;

	--eho-ombre-sm: 0 1px 2px rgba(37, 39, 84, 0.06);
	--eho-ombre: 0 4px 16px rgba(37, 39, 84, 0.08);
	--eho-ombre-lg: 0 12px 40px rgba(37, 39, 84, 0.12);

	--eho-transition: 200ms ease;
	--eho-transition-lente: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	--eho-z-entete: 100;
	--eho-z-panneau: 200;
	--eho-z-modale: 300;
	--eho-z-cookies: 400;

	/* Hauteur de la rangee collante de l'en-tete, relevee a 1440 et a 1200.
	   Sert de decalage a tout ce qui colle en dessous. */
	--eho-entete-hauteur: 6.375rem;
}

@media (max-width: 1024px) {
	:root {
		--eho-entete-hauteur: 8.1875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--eho-transition: 0ms;
		--eho-transition-lente: 0ms;
	}
}

/* --- base.css --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* La production reserve toujours la gouttiere de l'ascenseur. Sans elle, une
	   page courte s'affiche 15px plus large qu'une page longue, et tout le
	   gabarit se decale au passage de l'une a l'autre. */
	overflow-y: scroll;
}

body {
	margin: 0;
	font-family: var(--eho-police);
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	line-height: var(--eho-interligne);
	color: var(--eho-texte);
	background-color: var(--eho-fond);
	-webkit-font-smoothing: antialiased;
}

/* Aucun `text-wrap` ici : `balance` sur les titres et `pretty` sur les
   paragraphes equilibraient les lignes, quand la production les remplit au
   maximum. Le titre « Bouteille de carburation 13kg - ANTARGAZ » se coupait
   ainsi apres « carburation », sur 180px d une boite de 286, la ou la
   production tient jusqu au tiret sur 232px. */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--eho-espace-md);
	font-family: var(--eho-police-titre);
	font-weight: var(--eho-poids-gras);
	line-height: var(--eho-interligne-titre);
	color: var(--eho-texte-fort);
}

h1 { font-size: var(--eho-taille-3xl); }
h2 { font-size: var(--eho-taille-2xl); }
h3 { font-size: var(--eho-taille-xl); }
h4 { font-size: var(--eho-taille-lg); }

p {
	margin: 0 0 var(--eho-espace-md);
}

a {
	color: var(--eho-bleu);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--eho-transition);
}

a:hover,
a:focus-visible {
	color: var(--eho-rouge);
}

:focus-visible {
	outline: 2px solid var(--eho-bleu);
	outline-offset: 3px;
	border-radius: var(--eho-rayon-sm);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	margin: 0 0 var(--eho-espace-md);
	padding-inline-start: 1.25em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* La production borde son contenu de 15px, pas d'une gouttiere proportionnelle :
   a 1024 la notre valait 40px et retrecissait la page de 50px face a l'original. */
.eho-conteneur {
	width: min(100% - 1.875rem, var(--eho-conteneur));
	margin-inline: auto;
}

.eho-conteneur--etroit {
	width: min(100% - var(--eho-gouttiere) * 2, var(--eho-conteneur-etroit));
}

.eho-section {
	padding-block: var(--eho-espace-3xl);
}

.eho-section--alt {
	background-color: var(--eho-fond-alt);
}

.eho-lien-evitement {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: var(--eho-z-modale);
	padding: var(--eho-espace-sm) var(--eho-espace-md);
	background: var(--eho-bleu);
	color: var(--eho-blanc);
	border-radius: var(--eho-rayon);
}

.eho-lien-evitement:focus {
	inset-inline-start: var(--eho-espace-md);
	inset-block-start: var(--eho-espace-md);
	color: var(--eho-blanc);
}

/* Texte reserve aux lecteurs d'ecran. En `absolute` sans ancetre positionne,
   il se cale sur le bloc conteneur initial et echappe aux conteneurs
   defilants : une liste de 26 magasins etirait ainsi la page a 7900px pour un
   contenu de 3400. `contain: size` le retire du calcul de defilement sans rien
   changer a ce que lisent les lecteurs d'ecran. */
.eho-visuellement-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Tout element qui porte un texte cache devient son propre repere. */
.eho-magasin__lien,
.eho-carte-produit__lien,
.eho-magasin,
:has(> .eho-visuellement-cache) {
	position: relative;
}

.eho-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-xs);
	padding: var(--eho-espace-sm) var(--eho-espace-lg);
	font-weight: var(--eho-poids-gras);
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--eho-rayon-rond);
	transition: background-color var(--eho-transition), border-color var(--eho-transition), color var(--eho-transition);
}

.eho-bouton--primaire {
	background-color: var(--eho-rouge);
	color: var(--eho-blanc);
}

.eho-bouton--primaire:hover,
.eho-bouton--primaire:focus-visible {
	background-color: var(--eho-rouge-fonce);
	color: var(--eho-blanc);
}

.eho-bouton--secondaire {
	background-color: var(--eho-bleu);
	color: var(--eho-blanc);
}

.eho-bouton--secondaire:hover,
.eho-bouton--secondaire:focus-visible {
	background-color: var(--eho-bleu-clair);
	color: var(--eho-blanc);
}

.eho-bouton--vert {
	background-color: var(--eho-vert);
	color: var(--eho-blanc);
	line-height: 1;
	text-transform: uppercase;
}

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

.eho-bouton--fantome {
	border-color: currentColor;
	color: var(--eho-bleu);
}

/* Icones */

.eho-icone,
.eho-menu__icone,
.eho-bouton__icone {
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
}


/* --- components/entete.css --- */
.eho-promo {
	display: grid;
	place-items: center;
	min-height: 2.875rem;
	padding-block: 0.4rem;
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	line-height: 1.6;
	text-align: center;
	color: var(--eho-blanc);
	background-color: var(--eho-rouge);
}

.eho-promo__lien {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
	text-decoration: underline;
}

/* Seule la rangee haute suit le defilement : la production laisse partir la
   barre de navigation bleue. Un element colle ne tient que dans la boite de son
   parent, d'ou le display: contents qui rend l'en-tete transparent a la mise en
   page sans lui retirer son role de reperage. */
.eho-entete {
	display: contents;
}

.eho-entete__haut {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--eho-z-entete);
	background-color: var(--eho-blanc);
	box-shadow: var(--eho-ombre-sm);
}

/* Colonnes relevees sur la production : la recherche n'est pas centree, elle
   demarre a 375px du logo, et les actions la suivent au lieu d'etre poussees
   contre le bord droit. */
/* La colonne du milieu etait dimensionnee par le contenu : le champ y tenait
   sa largeur par defaut de vingt caracteres, soit 178px pour un texte
   indicatif qui en demande deux cents. La recherche prend desormais la place
   qui reste entre le logo et les contacts. */
.eho-entete__haut-inner {
	max-width: 75.75rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--eho-espace-lg);
	min-height: 6.375rem;
}

.eho-entete__recherche {
	min-width: 0;
}

.eho-entete__logo img {
	width: auto;
	max-height: 4.625rem;
}

.eho-entete__logo--texte {
	font-size: var(--eho-taille-lg);
	font-weight: var(--eho-poids-gras);
	color: var(--eho-bleu);
	text-decoration: none;
}

/* 394px etait la largeur relevee sur la production : le texte indicatif et le
   nom de la categorie y arrivaient tronques tous les deux. Ecart assume, a la
   demande du client. */
.eho-entete__recherche {
	width: 100%;
	max-width: 34rem;
}

/* La production laisse une large respiration entre la livraison et le telephone. */
.eho-entete__actions {
	display: flex;
	align-items: center;
	gap: clamp(var(--eho-espace-lg), 8.3vw, 7.5rem);
	padding-inline-start: var(--eho-espace-lg);
}

.eho-entete__telephone {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	line-height: 1.6;
	color: #5a6670;
	text-decoration: none;
	white-space: nowrap;
}

.eho-entete__telephone-icone {
	width: 1.25em;
	height: 1.25em;
	color: var(--eho-vert);
}

.eho-entete__bas {
	background-color: var(--eho-bleu);
}

/* La barre de navigation deborde le conteneur du haut, et pas symetriquement :
   le menu demarre a 33px du bord, le panier s'arrete a 73px du bord droit. */
.eho-entete__bas-inner {
	min-height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-lg);
	padding-inline: 2.0625rem 4.5625rem;
}

.eho-nav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-nav__liste > li > a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding-block: 0.3125rem;
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1;
	color: var(--eho-blanc);
	text-decoration: none;
	white-space: nowrap;
}

.eho-nav__liste > li > a:hover {
	color: var(--eho-jaune);
}

.eho-nav__liste > li.current-menu-item > a,
.eho-nav__liste > li.current-menu-ancestor > a {
	color: var(--eho-blanc);
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

.eho-nav__liste .eho-menu__icone {
	width: 1em;
	height: 1em;
}

/* Chevron des entrees a sous-menu */

.eho-nav__liste > li.menu-item-has-children > a::after {
	content: "";
	width: 0.7em;
	height: 0.7em;
	background-color: currentColor;
	mask: url("../icons/triangle-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../icons/triangle-bas.svg") no-repeat center / contain;
}

/* Recherche */

.eho-recherche {
	display: flex;
	align-items: stretch;
	min-height: 2.875rem;
	border: 2px solid rgb(0 0 0 / 0.15);
	border-radius: var(--eho-rayon-sm);
	overflow: hidden;
}

.eho-recherche__champ {
	flex: 1 1 8rem;
	min-width: 0;
	padding: 0.55rem 0.9375rem;
	border: 0;
	background: transparent;
	font-size: var(--eho-taille-sm);
}

.eho-recherche__champ:focus {
	outline: none;
}

/* 10rem coupait « CHOISIR UNE CATEGORIE » en « CHOISIR UNE CAT ». */
.eho-recherche__categorie {
	flex: none;
	max-width: 14rem;
	padding-inline: var(--eho-espace-sm);
	border: 0;
	border-inline-start: 1px solid var(--eho-bordure);
	background: transparent;
	font-size: var(--eho-taille-sm);
	text-transform: uppercase;
	color: var(--eho-texte-faible);
}

.eho-recherche__bouton {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.25rem;
	padding: 0;
	border: 0;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	transition: background-color var(--eho-transition);
}

.eho-recherche__bouton:hover {
	background-color: var(--eho-vert-fonce);
}

.eho-recherche__icone {
	width: 1.125rem;
	height: 1.125rem;
}

/* Entre 1025 et 1200, la respiration entre la livraison et le telephone prenait
   quatre-vingt-dix pixels a la recherche, et le texte indicatif du champ n'y
   tenait plus. */
@media (max-width: 75rem) and (min-width: 64.0625rem) {
	.eho-entete__actions {
		gap: var(--eho-espace-lg);
		padding-inline-start: var(--eho-espace-md);
	}

	.eho-recherche__categorie {
		max-width: 11rem;
	}
}

/* Tout en bas de cette plage, le selecteur cede encore de la place : son
   intitule se lit de toute facon a l'ouverture, le texte indicatif du champ
   non. */
@media (max-width: 69rem) and (min-width: 64.0625rem) {
	.eho-recherche__categorie {
		max-width: 7.5rem;
	}
}

/* Selecteur de secteur et panier */

.eho-secteur {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	padding: 0;
	background: none;
	border: 0;
	text-align: start;
	line-height: 1.2;
}

.eho-secteur__icone {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--eho-vert);
}

.eho-secteur__textes {
	display: grid;
	gap: 0.1rem;
	justify-items: start;
}

.eho-secteur__libelle {
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	color: var(--eho-texte);
}

.eho-secteur__valeur {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-gras);
	line-height: 1.2;
	color: var(--eho-bleu);
}

.eho-panier {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	color: var(--eho-blanc);
	text-decoration: none;
}

.eho-panier:hover,
.eho-panier:focus-visible {
	color: var(--eho-jaune);
}

/* 24px de cote sur la production, pastille de 16px. */
.eho-panier__icone {
	width: 1.5rem;
	height: 1.5rem;
}

.eho-panier__quantite {
	position: absolute;
	inset-block-start: -0.4rem;
	inset-inline-start: 1rem;
	display: grid;
	place-items: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.3rem;
	font-size: 0.625rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border-radius: var(--eho-rayon-rond);
}

/* Menu mobile */

.eho-entete__burger--haut,
.eho-entete__panier-mobile {
	display: none;
}

.eho-entete__burger {
	display: none;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
}

.eho-entete__burger-trait,
.eho-entete__burger-trait::before,
.eho-entete__burger-trait::after {
	position: absolute;
	inset-inline-start: 0.5rem;
	width: 1.5rem;
	height: 2px;
	background-color: var(--eho-bleu);
	transition: transform var(--eho-transition), opacity var(--eho-transition);
}

.eho-entete__burger-trait {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.eho-entete__burger-trait::before,
.eho-entete__burger-trait::after {
	content: "";
	inset-inline-start: 0;
}

.eho-entete__burger-trait::before { inset-block-start: -0.5rem; }
.eho-entete__burger-trait::after { inset-block-start: 0.5rem; }

.eho-entete__burger[aria-expanded="true"] .eho-entete__burger-trait {
	background-color: transparent;
}

.eho-entete__burger[aria-expanded="true"] .eho-entete__burger-trait::before {
	inset-block-start: 0;
	transform: rotate(45deg);
}

.eho-entete__burger[aria-expanded="true"] .eho-entete__burger-trait::after {
	inset-block-start: 0;
	transform: rotate(-45deg);
}

.eho-nav-mobile {
	padding: var(--eho-espace-md) var(--eho-gouttiere) var(--eho-espace-lg);
	background-color: var(--eho-bleu);
}

.eho-nav-mobile__liste {
	display: grid;
	gap: var(--eho-espace-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-nav-mobile__liste a {
	display: block;
	padding-block: 0.6rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.eho-nav-mobile__liste a {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-xs);
}

.eho-nav-mobile__liste .eho-menu__icone {
	width: 1.15em;
	height: 1.15em;
}

@media (max-width: 1024px) {
	.eho-nav {
		display: none;
	}

	.eho-entete__bas-inner {
		padding-inline: var(--eho-gouttiere);
	}

	/* Burger a gauche, logo au centre, actions a droite, comme en production. */

	.eho-entete__haut-inner {
		grid-template-columns: auto 1fr auto;
		min-height: 8.1875rem;
		gap: var(--eho-espace-md);
	}

	.eho-entete__logo {
		grid-column: 2;
		justify-self: center;
	}

	.eho-entete__logo img {
		max-height: 3.25rem;
	}

	.eho-entete__burger--haut {
		display: block;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	/* Le panier de l'en-tete reste masque : sous 1024px le site offre deja deux
	   acces au panier, l'entree « Panier » de la barre basse et le bouton
	   flottant qui ouvre le tiroir. Un troisieme sac en haut a droite ne faisait
	   que repeter les deux autres. */

	.eho-entete__panier-mobile {
		display: none;
	}

	.eho-entete__actions {
		grid-column: 3;
		grid-row: 1;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--eho-espace-xs);
		padding-inline-start: 0;
	}

	.eho-entete__recherche,
	.eho-entete__telephone {
		display: none;
	}

	/* Le panier remonte dans la barre haute : la barre bleue n'a plus lieu d'etre. */

	.eho-entete__bas {
		display: none;
	}

	.eho-panier {
		color: var(--eho-bleu);
	}

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

/* Sous-menus de la navigation principale */

.eho-nav__liste > li {
	position: relative;
}

.eho-nav__liste .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: var(--eho-z-panneau);
	display: grid;
	min-width: 14rem;
	margin: 0;
	padding: var(--eho-espace-xs) 0;
	list-style: none;
	background-color: var(--eho-blanc);
	box-shadow: var(--eho-ombre);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--eho-transition), visibility var(--eho-transition);
}

.eho-nav__liste > li:hover > .sub-menu,
.eho-nav__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.eho-nav__liste .sub-menu a {
	display: block;
	padding: var(--eho-espace-sm) var(--eho-espace-lg);
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-fort);
	text-decoration: none;
	white-space: nowrap;
}

.eho-nav__liste .sub-menu a:hover,
.eho-nav__liste .sub-menu a:focus-visible {
	color: var(--eho-vert);
	background-color: var(--eho-gris-050);
}

/* Sous-menus du panneau mobile */

.eho-nav-mobile__liste .sub-menu {
	display: grid;
	gap: var(--eho-espace-2xs);
	margin: var(--eho-espace-2xs) 0 var(--eho-espace-xs);
	padding-inline-start: var(--eho-espace-lg);
	list-style: none;
}

.eho-nav-mobile__liste .sub-menu a {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-normal);
	color: rgba(255, 255, 255, 0.85);
	border-bottom: 0;
}

/* --- components/recherche.css --- */
/* Suggestions de produits de l'en-tete */

.eho-recherche-zone {
	position: relative;
}

.eho-suggestions {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 60;
	max-height: 31.25rem;
	overflow-y: auto;
	background: var(--eho-blanc);
	box-shadow: 0 0 3px rgb(0 0 0 / 0.15);
	text-align: start;
}

.eho-suggestions[hidden] {
	display: none;
}

.eho-suggestions__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-suggestion {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-md);
	padding: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-gris-100);
	color: var(--eho-texte);
	text-decoration: none;
}

.eho-suggestions__liste li:last-child .eho-suggestion {
	border-bottom: 0;
}

.eho-suggestion:hover,
.eho-suggestion:focus-visible,
.eho-suggestion.is-actif {
	background: var(--eho-gris-050);
}

.eho-suggestion__image {
	flex: none;
	width: 4.0625rem;
	height: 4.0625rem;
	object-fit: contain;
}

.eho-suggestion__corps {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-2xs);
	min-width: 0;
}

.eho-suggestion__titre {
	font-size: var(--eho-taille-sm);
	line-height: 1.35;
}

.eho-suggestion__terme {
	font-weight: var(--eho-poids-gras);
	text-decoration: underline;
}

.eho-suggestion__prix {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
}

.eho-suggestion__prix .woocommerce-price-suffix {
	font-size: 0.8em;
	font-weight: var(--eho-poids-normal);
	color: var(--eho-texte-faible);
}

.eho-suggestions__vide {
	margin: 0;
	padding: var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-suggestions__tous {
	display: block;
	padding: var(--eho-espace-sm) var(--eho-espace-md);
	border-top: 1px solid var(--eho-gris-100);
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
	text-align: center;
}

/* --- components/mini-panier.css --- */
/* Bouton flottant et panier lateral */

.eho-panier-flottant {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--eho-blanc);
	box-shadow: 0 6.4px 48px rgb(0 0 0 / 0.1);
	color: var(--eho-gris-800);
	cursor: pointer;
}

.eho-panier-flottant__icone {
	width: 1.75rem;
	height: 1.75rem;
}

.eho-panier-flottant__nombre {
	position: absolute;
	left: -0.1875rem;
	bottom: -0.1875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5625rem;
	height: 1.5625rem;
	border-radius: 50%;
	background: var(--eho-vert);
	font-size: 0.75rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
}

body.eho-tiroir-ouvert {
	overflow: hidden;
}

.eho-tiroir {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.eho-tiroir[hidden] {
	display: none;
}

.eho-tiroir__voile {
	position: absolute;
	inset: 0;
	background: rgb(95 92 92 / 0.6);
	opacity: 0;
	transition: opacity 250ms ease;
}

.eho-tiroir.is-ouvert .eho-tiroir__voile {
	opacity: 1;
}

.eho-tiroir__panneau {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(50rem, 100%);
	background: var(--eho-blanc);
	transform: translateX(100%);
	transition: transform 250ms ease;
}

.eho-tiroir.is-ouvert .eho-tiroir__panneau {
	transform: translateX(0);
}

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

.eho-tiroir__entete {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 5.625rem;
	padding-inline: var(--eho-espace-lg);
	background: rgb(0 0 0 / 0.016);
	border-bottom: 1px solid var(--eho-gris-100);
}

.eho-tiroir__titre {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-gris-800);
	text-transform: uppercase;
}

/* Le carre de fermeture deborde a gauche du tiroir, comme sur la production. */
.eho-tiroir__fermer {
	position: absolute;
	top: 0;
	inset-inline-start: -5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.625rem;
	padding: 0;
	border: 0;
	background: var(--eho-gris-800);
	font-size: 1.375rem;
	line-height: 1;
	color: var(--eho-blanc);
	cursor: pointer;
}

/* Sur mobile le tiroir occupe tout l'ecran : le carre revient a l'interieur. */
@media (max-width: 52rem) {
	.eho-tiroir__fermer {
		inset-inline-start: 0;
		width: 4rem;
	}
}

.eho-tiroir__corps {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--eho-espace-lg);
}

/* Panier vide */

/* La production centre le bloc dans la hauteur du tiroir. */
.eho-tiroir__vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-2xl);
	min-height: 100%;
	padding-block: var(--eho-espace-xl);
	text-align: center;
}

.eho-tiroir__vide-titre {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--eho-poids-gras);
	color: var(--eho-gris-800);
	text-transform: uppercase;
}

.eho-tiroir__vide-icone {
	width: 8rem;
	height: 8rem;
	color: var(--eho-gris-200);
}

.eho-tiroir__vide-invite {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-gris-800);
}

/* Articles */

.eho-tiroir__articles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.eho-tiroir__article {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-md);
	padding-block: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-gris-100);
}

/* La vignette porte la quantite en pastille, comme sur la production. */

.eho-tiroir__visuel {
	position: relative;
	flex: none;
}

.eho-tiroir__pastille {
	position: absolute;
	top: -0.25rem;
	inset-inline-end: -0.25rem;
	display: grid;
	place-items: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding-inline: 0.25rem;
	border-radius: 50%;
	background: var(--eho-vert);
	font-size: var(--eho-taille-xs);
	font-weight: var(--eho-poids-gras);
	color: var(--eho-blanc);
}

.eho-tiroir__image {
	flex: none;
	width: 4.0625rem;
	height: 4.0625rem;
	object-fit: contain;
}

.eho-tiroir__article-corps {
	flex: 1 1 auto;
	min-width: 0;
}

.eho-tiroir__article-categorie {
	margin: 0;
	font-size: var(--eho-taille-xs);
	font-weight: var(--eho-poids-semi);
	letter-spacing: 0.04em;
	color: var(--eho-texte-faible);
	text-transform: uppercase;
}

.eho-tiroir__article-titre {
	margin: 0.125rem 0 var(--eho-espace-2xs);
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
}

.eho-tiroir__article-titre a {
	color: inherit;
	text-decoration: none;
}

.eho-tiroir__article-detail {
	margin: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte);
}

/* Le selecteur de quantite du tiroir n'a ni cadre ni fond : trois signes
   alignes sous le distributeur, comme sur la production. */

.eho-tiroir__quantite {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	margin-block-start: var(--eho-espace-xs);
	border: 0;
	background: none;
}

.eho-tiroir__quantite .eho-quantite__bouton {
	width: auto;
	min-width: 0;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	font-size: var(--eho-taille-base);
	line-height: 1;
	color: var(--eho-texte-faible);
	cursor: pointer;
}

.eho-tiroir__quantite .eho-quantite__bouton:hover,
.eho-tiroir__quantite .eho-quantite__bouton:focus-visible {
	color: var(--eho-texte-fort);
}

.eho-tiroir__quantite-valeur {
	min-width: 1rem;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-fort);
	text-align: center;
}

/* Colonne de droite : la croix, le prix, puis le sous-total de la ligne. */

.eho-tiroir__montants {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--eho-espace-xs);
	text-align: end;
}

.eho-tiroir__prix {
	margin: 0;
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-tiroir__sous-total {
	margin: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-tiroir__sous-total strong {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-tiroir__retirer {
	flex: none;
	padding: var(--eho-espace-2xs);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--eho-texte-faible);
	text-decoration: none;
}

.eho-tiroir__retirer:hover,
.eho-tiroir__retirer:focus-visible {
	color: var(--eho-rouge);
}

/* Pied */

.eho-tiroir__pied {
	margin-top: var(--eho-espace-lg);
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-md);
}

/* Le sous-total du pied est cale a droite sur la production, pas etale d'un
   bord a l'autre. */

.eho-tiroir__total {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--eho-espace-sm);
	margin: 0;
	font-size: var(--eho-taille-md);
	color: var(--eho-texte-faible);
}

.eho-tiroir__total strong {
	font-weight: var(--eho-poids-gras);
	color: var(--eho-texte-fort);
}

.eho-tiroir__action {
	display: block;
	width: min(32.5rem, 100%);
	margin-inline: auto;
	padding-block: 1.375rem;
	background: var(--eho-gris-800);
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

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



/* La carte de consigne tombe en bas du tiroir, juste au-dessus du sous-total,
   comme sur la production : elle n'est pas collee sous la derniere ligne. */

.eho-tiroir__corps {
	display: flex;
	flex-direction: column;
}

/* L'unite du prix dans le tiroir, pour les lignes vendues au litre. */
.eho-tiroir__unite {
	color: var(--eho-gris-600);
	font-size: 0.75rem;
	white-space: nowrap;
}

.eho-tiroir__refus:not(:empty) {
	margin: var(--eho-espace-2xs) 0 0;
	padding: var(--eho-espace-2xs) var(--eho-espace-xs);
	border-left: 3px solid var(--eho-erreur);
	background: var(--eho-gris-050);
	color: var(--eho-texte);
	font-size: var(--eho-taille-xs);
	line-height: 1.4;
}

/* --- components/panier-commun.css --- */
/* Blocs de panier qui apparaissent aussi hors du tunnel.
 *
 * La ligne du distributeur sort a deux endroits : dans le tableau du panier et
 * dans le tiroir. Le tiroir, lui, est sur toutes les pages, alors que
 * tunnel.css ou ces regles vivaient n'est charge que sur le panier, la commande
 * et le compte. Ailleurs, le distributeur restait colle a la ligne suivante.
 */

/* Distributeur qui livre la ligne */

.eho-panier__distributeur {
	display: block;
	margin-block-start: 0.25rem;
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-normal);
	color: var(--eho-texte-faible);
}

/* La production met en avant l'intitule, pas le nom du point de vente. */

.eho-panier__distributeur strong {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

/* --- components/barre-mobile.css --- */
/* Barre d'acces rapide, sous la tablette */

.eho-barre-mobile {
	display: none;
}

@media (max-width: 1024px) {
	.eho-barre-mobile {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 80;
		display: block;
		background: var(--eho-blanc);
		box-shadow: 0 -1px 12px rgb(0 0 0 / 0.08);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* La barre masque le bas de page : on rend sa hauteur au document. */
	body {
		padding-bottom: 3.5rem;
	}

	/* Le bouton flottant du panier remonte au-dessus de la barre. */
	.eho-panier-flottant {
		bottom: 4.75rem;
	}
}

.eho-barre-mobile__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-barre-mobile__lien {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-height: 3.5rem;
	color: var(--eho-gris-800);
	text-decoration: none;
}

.eho-barre-mobile__lien.is-actif,
.eho-barre-mobile__lien:hover,
.eho-barre-mobile__lien:focus-visible {
	color: var(--eho-vert);
}

.eho-barre-mobile__icone {
	position: relative;
	display: block;
	line-height: 0;
}

.eho-barre-mobile__icone svg {
	width: 1.375rem;
	height: 1.375rem;
}

.eho-barre-mobile__nombre {
	position: absolute;
	inset-block-start: -0.4rem;
	inset-inline-start: 0.75rem;
	display: grid;
	place-items: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.2rem;
	border-radius: 999px;
	background: var(--eho-vert);
	font-size: 0.625rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1;
	color: var(--eho-blanc);
}

.eho-barre-mobile__nom {
	font-size: 0.6875rem;
	line-height: 1.2;
}

/* --- components/pied.css --- */
/* Le pied de la production est plus large que le contenu courant : 1403px de
   colonnes pour 25px de bordure, la ou le corps de page s'arrete a 1330. */
.eho-reassurances .eho-conteneur,
.eho-pied .eho-conteneur {
	width: min(100% - 1.5625rem, 87.6875rem);
}

/* La production pose le meme espace partout, accueil comme boutique : 34px
   entre le bas du contenu et le texte du bandeau. Un premier calage l avait
   mesure depuis le bas de la pagination, en oubliant les 110px de contenu qui
   la suivent, d ou 59px au lieu de 34 et un bandeau trop bas sur l accueil. */
.eho-reassurances {
	padding-block: 2.125rem 2rem;
}

.eho-reassurances__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--eho-espace-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-reassurances__item {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-md);
}

.eho-reassurances__icone {
	flex: none;
	display: block;
	width: 2.75rem;
	color: var(--eho-bleu);
}

.eho-reassurances__titre {
	margin-bottom: 0.2rem;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: var(--eho-poids-gras);
	color: var(--eho-bleu);
}

.eho-reassurances__texte {
	/* #808080 ne donnait que 3,95 de contraste sur blanc, sous le seuil de 4,5
	   exige pour du texte courant. */
	color: var(--eho-texte);
	line-height: 1.4;
	margin-bottom: 0;
}

.eho-pied {
	/* 60px au-dessus des colonnes. La production declare 50px de marge interne,
	   mais intercale un conteneur Elementor qui en ajoute 10 : son intitule de
	   colonne tombe a 60px du haut du fond. Le theme n ayant qu un element, c est
	   la distance visible qui fait foi, pas la propriete relevee. */
	padding-block: 3.75rem var(--eho-espace-lg);
	background-color: var(--eho-gris-050);
}

.eho-pied__grille {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* Gouttiere verticale uniquement : les colonnes sont espacees a l'horizontale
	   par leur marge interne, mais une fois empilees elles se touchaient. */
	gap: var(--eho-espace-xl) 0;
}

/* La production borde chaque colonne de 10px : sur une colonne de 281, il lui
   reste 261 de contenu. Notre gouttiere de 48 a droite les ramenait a 233, et
   resserrait les libelles de menu. */
.eho-pied__grille > * {
	padding-inline: 0.625rem;
}

.eho-pied__marque img {
	max-width: 10.75rem;
	margin-bottom: 1.25rem;
}

.eho-pied__texte {
	margin-bottom: 1.25rem;
	font-size: var(--eho-taille-base);
}

.eho-pied__reseaux {
	display: flex;
	gap: var(--eho-espace-xs);
	margin: 3.0625rem 0 0;
	padding: 0;
	list-style: none;
}

/* Releve sur la production : carre de 34 a angles vifs, glyphe vert de 12.
   Le notre etait un carre de 32 arrondi a glyphe blanc. */
.eho-pied__reseau {
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	color: var(--eho-vert);
	background-color: var(--eho-bleu);
	border-radius: 0;
	transition: background-color var(--eho-transition);
}

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

.eho-pied__reseau svg {
	width: 0.75rem;
	height: 0.75rem;
}

.eho-pied__titre {
	margin-bottom: 1.25rem;
	font-size: 1.125rem;
	font-weight: var(--eho-poids-gras);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--eho-bleu);
}

/* Ecarts releves sur la production : 36px entre deux liens de menu, 47px
   dans la colonne de contact, qui respire davantage. */
.eho-pied__liste {
	display: grid;
	gap: var(--eho-espace-sm);
	margin: 3.0625rem 0 0;
	padding: 0;
	list-style: none;
}

.eho-pied__colonne--conseil .eho-pied__liste {
	gap: 1.375rem;
}

.eho-pied__colonne--conseil .eho-pied__liste a {
	font-weight: var(--eho-poids-semi);
}

/* Bleu fonce et non gris : la production ecrit ses liens de pied en
   `rgb(37, 39, 84)`. Le gris du corps de texte les rendait plus pales. */
.eho-pied__liste a {
	display: flex;
	align-items: baseline;
	gap: var(--eho-espace-xs);
	color: var(--eho-texte-fort);
	text-decoration: none;
}

.eho-pied__liste a:hover {
	color: var(--eho-rouge);
}

/* Puce en triangle plein, sauf quand l'entree porte deja une icone. Le
   chevron fin qui etait pose ici se lisait gris a l'oeil : la production met
   un caret plein de 16 par 13, vert. */

.eho-pied__liste a:not(:has(.eho-menu__icone))::before {
	content: "";
	flex: none;
	width: 0.8125em;
	height: 0.8125em;
	background-color: var(--eho-vert);
	mask: url("../icons/caret-droite.svg") no-repeat center / contain;
	-webkit-mask: url("../icons/caret-droite.svg") no-repeat center / contain;
}

.eho-pied__liste .eho-menu__icone {
	width: 1.25em;
	height: 1.25em;
	align-self: center;
	color: var(--eho-vert);
}

/* Ce bandeau n'existe pas en production : son pied s'arrete aux colonnes, a 385
   de haut, quand le notre en fait 443. Les 58 d'ecart sont assumes, le credit
   etant impose au pied ou aux mentions legales. Ne pas le retirer pour rattraper
   la hauteur : les colonnes, elles, sont calees au pixel sur les siennes. */
.eho-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-md);
	margin-top: var(--eho-espace-2xl);
	padding-top: var(--eho-espace-lg);
	border-top: 1px solid var(--eho-bordure);
}

.eho-pied__bas p {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	/* La production garde ses quatre reassurances sur une rangee en reduisant
	   l'icone et le texte. La liste est en flex : une regle de grille n'y
	   changeait rien, les elements passaient a la ligne faute de place. */
	.eho-reassurances__liste {
		flex-wrap: nowrap;
		gap: var(--eho-espace-md);
	}

	.eho-reassurances__item {
		flex: 1 1 0;
		min-width: 0;
		gap: var(--eho-espace-sm);
	}

	.eho-reassurances__icone {
		width: 2.25rem;
	}

	.eho-reassurances__texte {
		font-size: 0.875rem;
	}

	/* Deux colonnes donnaient trois rangees pour cinq blocs, et un pied de
	   733px la ou la production en fait 566. */
	.eho-pied__grille {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.eho-reassurances__liste {
		flex-wrap: wrap;
	}

	.eho-reassurances__item {
		flex: 1 1 45%;
	}
}

/* La production ne reduit le titre de reassurance qu'a partir de 560px : entre
   768 et 1024 elle le garde a 24px et le laisse passer sur deux lignes. */

@media (max-width: 560px) {
	.eho-reassurances__titre {
		font-size: 1.125rem;
		line-height: 1.1;
	}

	/* La production garde deux colonnes jusqu'en bas : releve a 375px sur
	   /nous-rejoindre/, /a-propos/ et le guide solaire, les deux premieres
	   reassurances y sont sur la meme rangee. */
	.eho-reassurances__item {
		flex: 1 1 45%;
	}

	/* Sans hauteur commune, l'item dont le libelle passe sur deux lignes
	   decale son voisin de 19px. */
	.eho-reassurances__liste {
		align-items: stretch;
	}

	/* La production empile l'icone au-dessus du texte et centre le tout a
	   partir de cette largeur, la ou elle garde l'icone a gauche sur les
	   largeurs superieures. */
	.eho-reassurances__item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--eho-espace-xs);
	}

	.eho-pied__grille {
		grid-template-columns: 1fr;
	}
}

/* Le credit est un lien, mais il reste discret : couleur du texte, pas de
   soulignement, comme les autres liens du pied. */
.eho-pied__credit a {
	color: inherit;
	text-decoration: none;
}

.eho-pied__credit a:hover,
.eho-pied__credit a:focus-visible {
	color: var(--eho-vert);
}

/* --- components/page.css --- */
/* Bandeau de titre */

.eho-entete-page {
	padding-block: 1.25rem;
	background-color: var(--eho-gris-050);
	text-align: center;
}

.eho-entete-page__titre {
	margin-bottom: 0;
	font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.75rem);
	font-weight: var(--eho-poids-semi);
	line-height: var(--eho-interligne-titre);
	color: var(--eho-texte-titre-page);
}

.eho-entete-page--compact {
	padding-block: 1.0625rem 1.625rem;
	text-align: start;
}

.eho-entete-page--compact .eho-entete-page__titre {
	font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
	color: var(--eho-texte-fort);
}

/* Fil d'Ariane */

.eho-fil {
	margin-top: var(--eho-espace-sm);
}

.eho-fil--centre .eho-fil__liste {
	justify-content: center;
}

.eho-fil__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eho-espace-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--eho-taille-base);
}

.eho-fil__item + .eho-fil__item::before {
	content: "/";
	margin-inline-end: var(--eho-espace-xs);
	color: var(--eho-gris-400);
}

.eho-fil__item a {
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-fil__item a:hover,
.eho-fil__item a:focus-visible {
	text-decoration: underline;
}

.eho-fil__item [aria-current] {
	color: var(--eho-texte);
}

/* Corps de page */

.eho-page {
	padding-block: var(--eho-espace-2xl) var(--eho-espace-3xl);
}

.eho-contenu {
	font-size: 1.0625rem;
}

/* Le bandeau compact va de pair avec une colonne de lecture etroite, comme sur la production. */

body:not([class*="eho-famille--"]) .eho-page--colonne .eho-contenu {
	max-width: 62rem;
}

[class*="eho-famille--"] .eho-page--colonne .eho-contenu {
	max-width: 83.125rem;
}

.eho-contenu > *:last-child {
	margin-bottom: 0;
}

.eho-contenu h2 {
	margin-block: var(--eho-espace-xl) var(--eho-espace-md);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-contenu h3 {
	margin-block: var(--eho-espace-lg) var(--eho-espace-sm);
	font-size: 1.375rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-contenu h4 {
	margin-block: var(--eho-espace-lg) var(--eho-espace-sm);
	font-size: 1.125rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-contenu p {
	margin-bottom: 1.25rem;
}

.eho-contenu a {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
}

.eho-contenu a:hover,
.eho-contenu a:focus-visible {
	color: var(--eho-vert-fonce);
}

.eho-contenu ul,
.eho-contenu ol {
	margin-bottom: 1.25rem;
	padding-inline-start: 1.0625rem;
}

.eho-contenu li {
	margin-bottom: 0.625rem;
}

.eho-contenu strong {
	font-weight: var(--eho-poids-semi);
}

.eho-contenu img {
	border-radius: var(--eho-rayon);
}

.eho-contenu blockquote {
	margin: var(--eho-espace-lg) 0;
	padding-inline-start: var(--eho-espace-lg);
	border-inline-start: 3px solid var(--eho-vert);
	color: var(--eho-texte-fort);
}

.eho-contenu table {
	width: auto;
	margin-bottom: 1.25rem;
}

.eho-contenu td,
.eho-contenu th {
	min-width: 15.4375rem;
}

/* Les tableaux du tunnel ont leurs propres colonnes. */

.eho-contenu .woocommerce td,
.eho-contenu .woocommerce th {
	min-width: 0;
}

/* La production ne dessine pas de grille : ni fond de cellule, ni bordure
   verticale. Un filet gris sous chaque rangee, un intitule en petites capitales
   bleu marine, et les liens de la premiere colonne en vert sans soulignement. */
.eho-contenu th,
.eho-contenu td,
.eho-contenu .wp-block-table th,
.eho-contenu .wp-block-table td {
	padding: 0.9375rem var(--eho-espace-sm);
	text-align: start;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-contenu th {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	background-color: transparent;
	text-transform: uppercase;
}

/* Le bloc tableau du core souligne son en-tete d'un trait epais. */
.eho-contenu .wp-block-table thead {
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-contenu table a {
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-contenu table a:hover,
.eho-contenu table a:focus-visible {
	text-decoration: underline;
}

/* Accordeon, bloc natif details */

.eho-contenu .wp-block-details {
	padding-block: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-contenu .wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	cursor: pointer;
	list-style: none;
}

.eho-contenu .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.eho-contenu .wp-block-details summary::before {
	content: "";
	flex: none;
	width: 0.75em;
	height: 0.75em;
	background-color: currentColor;
	mask: url("../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../icons/chevron-bas.svg") no-repeat center / contain;
	transition: transform var(--eho-transition);
}

.eho-contenu .wp-block-details[open] > summary {
	color: var(--eho-vert);
}

.eho-contenu .wp-block-details[open] > summary::before {
	transform: rotate(180deg);
}

.eho-contenu .wp-block-details > *:not(summary) {
	margin-block-start: var(--eho-espace-md);
}

.eho-contenu .wp-block-details > *:last-child {
	margin-bottom: 0;
}

/* Pages de confidentialite : la production y descend d'un cran la taille du
   texte et des intertitres par rapport au reste du site. */

.eho-page-politique-de-confidentialite .eho-contenu,
.eho-page-charte-sur-le-respect-de-la-vie-privee .eho-contenu {
	font-size: var(--eho-taille-base);
}

body.eho-page-politique-de-confidentialite:not(.woocommerce-page) .eho-page .eho-contenu h2,
body.eho-page-charte-sur-le-respect-de-la-vie-privee:not(.woocommerce-page) .eho-page .eho-contenu h2 {
	font-size: 1.5rem;
}

/* Sections de la FAQ, plus grandes que les intertitres courants, et soulignees
   d'un filet pleine largeur au lieu du court trait bleu. */

.eho-page-faq .eho-contenu h2 {
	margin-block: var(--eho-espace-2xl) var(--eho-espace-md);
	font-size: 2.1875rem;
}

body.eho-page-faq:not(.woocommerce-page) .eho-page .eho-contenu h2::after {
	inset-inline: 0;
	width: auto;
	height: 1px;
	background-color: var(--eho-bordure);
}

.eho-page-faq .eho-contenu h2:first-child {
	margin-block-start: 0;
}

/* Article */

.eho-article__titre {
	margin-bottom: var(--eho-espace-xl);
	font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
	font-weight: var(--eho-poids-semi);
	text-align: center;
	color: var(--eho-texte-fort);
}

.eho-article__meta {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-article__meta-icone {
	width: 0.9em;
	height: 0.9em;
	color: var(--eho-bleu);
}

/* Partage */

.eho-partage {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: var(--eho-espace-2xl) 0 0;
	padding: 0;
	list-style: none;
}

.eho-partage__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	padding: 0.6rem var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	color: var(--eho-blanc);
	text-decoration: none;
}

.eho-partage__icone {
	width: 1em;
	height: 1em;
}

.eho-partage__lien--facebook { background-color: #1877f2; }
.eho-partage__lien--x-twitter { background-color: #000000; }
.eho-partage__lien--linkedin { background-color: #0a66c2; }

.eho-partage__lien:hover,
.eho-partage__lien:focus-visible {
	color: var(--eho-blanc);
	filter: brightness(1.1);
}

.eho-article__media {
	margin: 0 0 var(--eho-espace-xl);
}

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

.eho-article__navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--eho-espace-lg);
	margin-top: var(--eho-espace-2xl);
	padding-top: var(--eho-espace-lg);
	border-top: 1px solid var(--eho-bordure);
}

.eho-article__lien-nav {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	max-width: 20rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	text-decoration: none;
}

.eho-article__lien-nav--suivant {
	text-align: end;
	margin-inline-start: auto;
}

.eho-article__nav-corps {
	display: grid;
	gap: 0.15rem;
}

.eho-article__nav-libelle {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-moyen);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eho-vert);
}

.eho-article__chevron {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--eho-gris-400);
}

/* Liste d'articles */

/* Releve sur la production : cartes de 372px dans un conteneur de 1330, donc
   des gouttieres larges, et une image en 1,24 et non en 16/9. */
.eho-liste-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--eho-espace-3xl) 6.6875rem;
}

.eho-carte-article {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-md);
}

.eho-carte-article__media {
	display: block;
	overflow: hidden;
	border-radius: var(--eho-rayon-lg);
}

.eho-carte-article__image {
	width: 100%;
	aspect-ratio: 62 / 50;
	object-fit: cover;
	transition: transform var(--eho-transition-lente);
}

.eho-carte-article:hover .eho-carte-article__image {
	transform: scale(1.04);
}

.eho-carte-article__corps {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-xs);
}

.eho-carte-article__date {
	margin-bottom: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-carte-article__titre {
	margin-bottom: 0;
	font-size: 1.5rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.25;
}

.eho-carte-article__titre a {
	color: var(--eho-texte-fort);
	text-decoration: none;
}

.eho-carte-article__extrait {
	margin-bottom: 0;
}

.eho-carte-article__suite {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: auto;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-carte-article__suite:hover,
.eho-carte-article__suite:focus-visible {
	text-decoration: underline;
}

/* Resultats de recherche. Namespace distinct du formulaire .eho-recherche. */

.eho-resultats__titre {
	margin-bottom: var(--eho-espace-2xl);
	font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
	font-weight: var(--eho-poids-semi);
	text-align: center;
	color: var(--eho-texte-fort);
}

.eho-resultats__barre {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--eho-espace-lg);
}

.eho-resultats__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-resultats__soustitre {
	margin-block: var(--eho-espace-2xl) var(--eho-espace-lg);
	font-size: 1.5rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-resultats__vide {
	margin-bottom: var(--eho-espace-lg);
	font-size: 1.0625rem;
}

@media (max-width: 1024px) {
	.eho-resultats__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.eho-resultats__grille {
		grid-template-columns: 1fr;
	}
}

/* Pagination */

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

.eho-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--eho-espace-xs);
}

.eho-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--eho-espace-xs);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	text-decoration: none;
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon);
}

.eho-pagination .page-numbers.current,
.eho-pagination .page-numbers:hover {
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border-color: var(--eho-vert);
}

@media (max-width: 1024px) {
	.eho-liste-articles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.eho-liste-articles {
		grid-template-columns: 1fr;
	}

	/* En une colonne, la production passe sa vignette en 16:9 : 293 par 165 a
	   375, contre 343 par 277 chez nous, soit 112 px de trop sur chacune des
	   28 cartes. Regle limitee au mono-colonne : appliquee aux largeurs
	   superieures, elle raccourcissait la page de 900 px et faisait passer
	   l'ecart de 0,2 a 13,2 % a 1440. */
	.eho-carte-article__image {
		aspect-ratio: 16 / 9;
	}

	.eho-article__lien-nav--suivant {
		text-align: start;
		margin-inline-start: 0;
	}
}

/* Fiche distributeur */

/* Le bandeau de titre de la fiche ne file pas d'un bord a l'autre comme celui
   des autres pages : la production le tient dans le conteneur, 1330 de large,
   et y pose le nom puis le telephone a la suite, pas aux deux extremites. */
.eho-distributeur__entete {
	padding-block: 0;
	background-color: transparent;
}

.eho-distributeur__entete-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 1.4375rem;
	background-color: var(--eho-gris-050);
}

.eho-distributeur__entete .eho-entete-page__titre {
	flex: 0 0 50%;
	min-width: 0;
	font-size: 1.75rem;
}

.eho-distributeur__telephone {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	font-size: 1rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-distributeur__telephone-icone {
	width: 1.25em;
	height: 1.25em;
}

.eho-distributeur__presentation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eho-espace-3xl);
	align-items: start;
}

/* Quand le contenu importe porte ses propres colonnes et sa photo, il occupe
   toute la largeur : c'est lui qui gere sa mise en page. */
.eho-distributeur__presentation--pleine {
	grid-template-columns: 1fr;
}

.eho-distributeur__logo {
	margin-bottom: var(--eho-espace-lg);
}

/* 288px : largeur du logo sur la production, identique d'une fiche a l'autre. */
.eho-distributeur__logo img {
	max-width: 18rem;
	height: auto;
}

/* Le contenu repris de la production ouvre sa colonne de gauche par le meme
   logo que la fiche. Affiche deux fois, il occupait la moitie de l'ecran. */
/* 288px sur la production, pour toutes les fiches. Servi a sa taille d'origine
   il occupait la moitie de la colonne. */
.eho-distributeur__texte .eho-contenu .elementor-container > .elementor-column:first-child .elementor-widget-wrap > .elementor-widget-image:first-child img,
.eho-distributeur__texte .eho-contenu .elementor-widget__width-initial img {
	max-width: 18rem;
}

/* Elementor donne une largeur propre aux widgets marques « width-initial » et
   laisse les autres prendre la rangee entiere. Sans sa feuille generee, les
   deux logos de la fiche ValdelGaz s'empilaient au lieu de se ranger cote a
   cote. */
.eho-distributeur__texte .eho-contenu .elementor-widget-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 0;
}

.eho-distributeur__texte .eho-contenu .elementor-widget-wrap > .elementor-element {
	flex: 1 1 100%;
	min-width: 0;
}

.eho-distributeur__texte .eho-contenu .elementor-widget-wrap > .elementor-widget__width-initial {
	flex: 0 1 auto;
}

/* Le contenu porte deja son propre filet sous « Informations pratiques » : le
   trait ajoute par le gabarit en faisait deux, un bleu puis un gris. */
body:not(.woocommerce-page) .eho-page .eho-contenu.eho-distributeur__pratique h2::after {
	content: none;
}

/* 24px sur la fiche distributeur, contre 22 pour les intertitres courants.
   Borne ici : `.eho-contenu h3` sert toutes les pages de contenu importe. */
.eho-distributeur__pratique h3 {
	font-size: 1.5rem;
}

.eho-distributeur__pratique .elementor-divider-separator {
	border-block-start-width: 5px;
	color: var(--eho-lien);
}

/* Les horaires tiennent sur des rangees de 36px en production : la marge
   interne generique des tableaux importes les doublait. */
.eho-distributeur__pratique table td,
.eho-distributeur__pratique table th {
	padding-block: 0.4375rem;
}

/* Rythme vertical de la fiche. Les trois sections se suivaient avec des ecarts
   de 163 puis 0 pixel : la derniere collait a la precedente. */
.eho-distributeur__catalogue,
.eho-distributeur__pratique {
	margin-block-start: var(--eho-espace-3xl);
}

.eho-distributeur__catalogue .eho-distributeur__panneaux {
	margin-block-start: var(--eho-espace-lg);
}

/* Un panneau sans produit ne doit pas s'etirer a la hauteur de son voisin :
   « Produits petroliers » annonce deux services et laissait ensuite trois cents
   pixels de vide. */
.eho-distributeur__panneaux {
	align-items: start;
}

/* Informations pratiques rendues par le gabarit, sans balisage importe. */
.eho-pratique__colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eho-espace-3xl);
	align-items: start;
}

.eho-pratique__titre {
	margin-block-end: var(--eho-espace-md);
	font-size: 1.5rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-pratique__soustitre {
	margin-block: var(--eho-espace-lg) var(--eho-espace-md);
	font-size: 1.125rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-pratique__colonne > .eho-pratique__soustitre:first-child {
	margin-block-start: 0;
}

.eho-pratique__texte {
	margin: 0;
}

.eho-pratique__carte {
	margin-block-start: var(--eho-espace-lg);
}

.eho-pratique__carte iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--eho-rayon);
}

.eho-pratique__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eho-espace-md) var(--eho-espace-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-pratique__entree {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
}

.eho-pratique__entree a {
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-pratique__entree a:hover,
.eho-pratique__entree a:focus-visible {
	text-decoration: underline;
}

.eho-pratique__icone {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-block-start: 0.2em;
	color: var(--eho-vert);
}

.eho-pratique__liste--reseaux {
	margin-block-start: var(--eho-espace-md);
}

/* Rangees de 36px comme en production. */
/* Les creneaux etaient alignes sur le bord droit : la fermeture se retrouvait
   a trois cents pixels de l'ouverture, sur une rangee qui ne se lisait plus. */
.eho-pratique__horaires {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.eho-pratique__horaires th,
.eho-pratique__horaires td {
	padding-block: 0.4375rem;
	font-weight: var(--eho-poids-normal);
	text-align: start;
	white-space: nowrap;
	border-block-end: 1px solid var(--eho-gris-100);
}

.eho-pratique__horaires th {
	width: 38%;
}

.eho-pratique__creneau + .eho-pratique__creneau::before {
	content: " ";
}

@media (max-width: 782px) {
	.eho-pratique__colonnes {
		grid-template-columns: 1fr;
	}
}

.eho-distributeur__media {
	margin: 0;
}

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

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

.eho-distributeur__soustitre {
	position: relative;
	padding-bottom: var(--eho-espace-sm);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-distributeur__soustitre::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 4rem;
	height: 5px;
	background-color: var(--eho-lien);
}

/* La production pose le formulaire de contact sur une bande bleu nuit pleine
   largeur, resserree a 690px, le nom du distributeur centre au-dessus. La
   notre etait sur fond blanc et occupait toute la largeur du conteneur. */
.eho-distributeur__contact {
	margin-block-start: var(--eho-espace-3xl);
	margin-inline: calc(50% - 50vw);
	padding: var(--eho-espace-3xl) var(--eho-gouttiere);
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
}

/* 924px en production : ses deux colonnes de champs font 457 chacune. Un
   premier calage avait retenu 690, ce qui resserrait tout le formulaire. */
.eho-distributeur__contact > * {
	max-width: 57.75rem;
	margin-inline: auto;
}

.eho-distributeur__contact .eho-distributeur__soustitre {
	font-size: 1.75rem;
	text-align: center;
	color: var(--eho-blanc);
}

.eho-distributeur__contact .eho-distributeur__soustitre::after {
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background-color: var(--eho-lien);
}

.eho-distributeur__contact .eho-formulaire,
.eho-distributeur__contact .eho-formulaire__conteneur {
	width: 100%;
	max-width: 57.75rem;
	margin-block-start: 0;
	margin-inline: auto;
	padding: 0;
}

.eho-distributeur__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--eho-espace-lg);
	margin: var(--eho-espace-lg) 0 0;
	padding: 0;
	list-style: none;
}

.eho-point-vente {
	padding: var(--eho-espace-lg);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon);
}

.eho-point-vente__nom {
	margin-bottom: var(--eho-espace-sm);
	font-size: 1.125rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-point-vente__adresse,
.eho-point-vente__telephone,
.eho-point-vente__horaires {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
	margin-bottom: var(--eho-espace-xs);
	font-size: var(--eho-taille-sm);
}

/* Un jour par ligne : les creneaux mis bout a bout se lisaient comme une seule
   plage horaire continue. */
.eho-point-vente__horaires > span {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eho-point-vente__icone {
	flex: none;
	width: 1em;
	height: 1em;
	margin-block-start: 0.25em;
	color: var(--eho-vert);
}

.eho-point-vente__telephone a {
	color: var(--eho-texte);
	text-decoration: none;
}

@media (max-width: 1024px) {
	/* Une copie du bloc de contact avait ete collee ici, derriere le selecteur
	   laisse en suspens par sa virgule : sous 1024, la presentation heritait du
	   fond bleu nuit et du debordement pleine largeur du formulaire, et sa regle
	   de passage en une colonne etait perdue. */
	.eho-distributeur__presentation,
	.eho-distributeur__liste {
		grid-template-columns: 1fr;
		gap: var(--eho-espace-xl);
	}
}

/* Annuaire des distributeurs */

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

.eho-annuaire__titre {
	margin-bottom: var(--eho-espace-lg);
	font-size: 1.5rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-annuaire__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--eho-espace-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-carte-distributeur {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-xs);
	height: 100%;
	padding: var(--eho-espace-lg);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon);
	transition: box-shadow var(--eho-transition);
}

.eho-carte-distributeur:hover {
	box-shadow: var(--eho-ombre);
}

.eho-carte-distributeur__logo img {
	max-width: 9rem;
	height: auto;
	margin-bottom: var(--eho-espace-sm);
}

.eho-carte-distributeur__nom {
	margin-bottom: var(--eho-espace-xs);
	font-size: 1.125rem;
	font-weight: var(--eho-poids-semi);
}

.eho-carte-distributeur__nom a {
	color: var(--eho-texte-fort);
	text-decoration: none;
}

.eho-carte-distributeur__adresse,
.eho-carte-distributeur__telephone {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
	margin-bottom: 0;
	font-size: var(--eho-taille-sm);
}

.eho-carte-distributeur__telephone a {
	color: var(--eho-texte);
	text-decoration: none;
}

.eho-carte-distributeur__lien {
	margin-top: auto;
	padding-top: var(--eho-espace-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-carte-distributeur__lien:hover {
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.eho-annuaire__liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.eho-annuaire__liste {
		grid-template-columns: 1fr;
	}
}

/* Carte des points de vente */

.eho-carte {
	/* Leaflet empile ses calques jusqu'a z-index 1000. Sans contexte d'empilement
	   propre, ils passeraient au-dessus de l'en-tete collant. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	height: clamp(20rem, 50vh, 32rem);
	margin-block: var(--eho-espace-xl);
	border-radius: var(--eho-rayon);
	overflow: hidden;
}

.eho-carte__voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-md);
	padding: var(--eho-espace-lg);
	background: var(--eho-gris-100);
	text-align: center;
}

.eho-carte__voile[hidden] {
	display: none;
}

.eho-carte__message {
	max-width: 34rem;
	margin: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte);
}

.eho-carte .leaflet-popup-content {
	font-family: var(--eho-police);
	font-size: var(--eho-taille-sm);
}

.eho-carte .leaflet-popup-content a {
	color: var(--eho-vert);
}

/* Catalogue d'un distributeur */

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

/* La production range ses familles d energie en panneaux gris clair, sur deux
   colonnes : Gaz et Bois cote a cote, puis Solaire et Produits petroliers. Un
   panneau laisse seul prend toute la largeur. */
.eho-distributeur__panneaux {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5625rem;
	margin-top: var(--eho-espace-xl);
}

.eho-distributeur__groupe {
	/* Sans `min-width`, le panneau garde la largeur de son carrousel : en grille,
	   un element qui porte un defilement horizontal vaut `min-width: auto` et
	   refuse de retrecir. Les panneaux faisaient 2676px pour un conteneur de
	   1330 et sortaient de la page. */
	min-width: 0;
	padding: 1.25rem;
	background-color: var(--eho-gris-050);
	border-radius: 10px;
}

/* Les fiches ne composent pas toutes leurs panneaux pareil : certaines posent
   le panneau Gaz sur toute la largeur et rangent les suivants en dessous. La
   disposition est relevee fiche par fiche, elle ne se deduit pas. */
.eho-distributeur__groupe--pleine {
	grid-column: 1 / -1;
}

/* Les services declares, remontes du contenu importe dans leur panneau. */
.eho-distributeur__services {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eho-espace-sm) var(--eho-espace-lg);
	margin: 0 0 var(--eho-espace-md);
	padding: 0;
	list-style: none;
}

/* La production accompagne chaque service de son icone. Sans elle la liste
   n'etait qu'une rangee d'intitules gris, indistincts d'une famille a l'autre. */
.eho-distributeur__service {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
}

.eho-distributeur__service-icone {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--eho-vert);
}

@media (max-width: 1024px) {
	.eho-distributeur__panneaux {
		grid-template-columns: 1fr;
	}
}

.eho-distributeur__categorie {
	margin-bottom: var(--eho-espace-md);
	font-size: 1.25rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

/* La production tient chaque categorie sur une seule rangee de six. En quatre
   colonnes, six produits faisaient deux rangees et la fiche doublait de haut. */
/* Une seule rangee qui defile, comme le carrousel de la production : une
   grille qui passe a la ligne ajoutait deux rangees pour neuf produits, et
   plus de mille pixels a la fiche. */

.eho-distributeur__produits {
	display: flex;
	gap: var(--eho-espace-md);
	margin: 0;
	padding: 0 0 var(--eho-espace-sm);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.eho-distributeur__produits > li {
	flex: 0 0 205px;
	max-width: 205px;
	scroll-snap-align: start;
}

/* La production pose une puce par page de defilement, centrees a 20px sous la
   rangee : 10px de cote, bordure grise de 2px, pleine et foncee sur la page
   courante. Sans elles, rien n'indique qu'il reste des produits a droite. */
.eho-distributeur__puces {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.eho-distributeur__puce {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	background-color: transparent;
	border: 2px solid #bbbbbb;
	border-radius: 50%;
	transition: background-color var(--eho-transition), border-color var(--eho-transition);
}

.eho-distributeur__puce.is-active {
	background-color: #333333;
	border-color: #333333;
}

@media (max-width: 560px) {
	.eho-distributeur__produits > li {
		flex-basis: 165px;
		max-width: 165px;
	}
}

@media (max-width: 768px) {
	.eho-distributeur__produits {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.eho-distributeur__produits {
		grid-template-columns: 1fr;
	}
}

/* Espace distributeur */

.eho-manager__selecteur {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	margin-bottom: var(--eho-espace-lg);
}

.eho-manager__date {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	margin-bottom: var(--eho-espace-lg);
}

.eho-manager__selecteur select,
.eho-manager__date input {
	padding: 0.5rem var(--eho-espace-sm);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

.eho-manager__table {
	margin-bottom: var(--eho-espace-lg);
	font-size: var(--eho-taille-sm);
}

.eho-manager__table th,
.eho-manager__table td {
	padding: var(--eho-espace-sm);
	text-align: start;
	border: 1px solid var(--eho-bordure);
}

.eho-manager__table thead th {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	background-color: var(--eho-gris-050);
}

.eho-manager__table tbody th {
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte-fort);
}

.eho-manager__table input {
	width: 7rem;
	padding: 0.4rem var(--eho-espace-xs);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

.eho-manager__stock {
	display: block;
	font-size: var(--eho-taille-xs);
	color: var(--eho-texte-faible);
}

/* Page introuvable */

.eho-introuvable {
	padding-block: var(--eho-espace-3xl);
	text-align: center;
}

.eho-introuvable__titre {
	margin-bottom: var(--eho-espace-md);
	font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-introuvable__texte {
	margin-bottom: var(--eho-espace-xl);
	font-size: 1.0625rem;
}

.eho-introuvable .eho-recherche {
	max-width: 26rem;
	margin-inline: auto;
}

.eho-introuvable__action {
	margin-top: var(--eho-espace-xl);
	margin-bottom: 0;
}

/* Silo Guide energies */

.eho-page__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20.3125rem;
	gap: 0.6875rem;
	padding-inline-end: 0.9375rem;
	align-items: start;
}

.eho-silo {
	padding: 1.125rem;
	background-color: var(--eho-gris-050);
	border-radius: var(--eho-rayon);
}

.eho-silo__titre {
	margin-bottom: var(--eho-espace-md);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

/* Sous le bureau, la production passe ce titre a 45px. Regle propre au titre
   du silo, et non a tous les intertitres : appliquee largement, elle avait
   deja fait deraper trois pages du guide a 768. */
@media (max-width: 75rem) {
	.eho-silo__titre {
		font-size: 2.8125rem;
		line-height: 1.2;
	}
}

/* Sous le bureau la production replie cette navigation derriere un bouton :
   son bloc fait 354 px a 375 quand le notre, deroule, en faisait 711. Au-dela
   de 1440 le `details` n'est plus qu'un conteneur, sa liste est forcee visible
   et son bouton retire. */
.eho-silo__bascule {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	padding: var(--eho-espace-xs) var(--eho-espace-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	cursor: pointer;
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-sm);
}

.eho-silo__bascule::-webkit-details-marker {
	display: none;
}

.eho-silo__bascule::after {
	content: "";
	width: 0.75em;
	height: 0.75em;
	margin-inline-start: auto;
	background-color: currentColor;
	mask: url("../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../icons/chevron-bas.svg") no-repeat center / contain;
}

.eho-silo__repli[open] > .eho-silo__bascule::after {
	transform: rotate(180deg);
}

/* Le `display: grid` de la liste l'emporte sur la regle du navigateur qui
   masque le contenu d'un `details` ferme : il faut la masquer explicitement. */
.eho-silo__repli:not([open]) > .eho-silo__liste {
	display: none;
}

/* Des la tablette, le silo est toujours ouvert et le bouton disparait : la
 * production n'en replie la navigation que sur telephone. Le seuil etait a
 * 1440, si bien que la liste arrivait fermee sur tout ecran de portable.
 *
 * Rendre la liste visible ne suffit pas : un `details` ferme dont le resume
 * est masque mesure zero, et sa liste s'affiche par-dessus le contenu, hors
 * de la boite du silo. */

@media (min-width: 48.0625rem) {
	.eho-silo__bascule {
		display: none;
	}

	.eho-silo__repli:not([open]) > .eho-silo__liste,
	.eho-silo__repli > .eho-silo__liste {
		display: grid;
	}
}

.eho-silo__liste {
	display: grid;
	gap: 1.4375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-silo__enfant {
	padding-inline-start: var(--eho-espace-md);
}

.eho-silo a {
	color: var(--eho-texte-fort);
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-semi);
	text-decoration: none;
}

.eho-silo a:hover,
.eho-silo a[aria-current] {
	color: var(--eho-vert);
}

/* Sous la tablette, la production descend le texte courant a 14px sur tout le
   site. La FAQ fait exception, elle reste a 16px. */
@media (max-width: 1024px) {
	.eho-contenu,
	body.eho-page-politique-de-confidentialite .eho-page .eho-contenu,
	body.eho-page-charte-sur-le-respect-de-la-vie-privee .eho-page .eho-contenu {
		font-size: 0.875rem;
	}

	body.eho-page-faq .eho-page .eho-contenu {
		font-size: var(--eho-taille-base);
	}
}

/* La production garde la colonne de silo jusqu'a la tablette, en la
   retrecissant, et descend le texte courant du guide a 14px. */
@media (max-width: 1024px) {
	/* Sous 1024px la production resserre la gouttiere a 15px et l'espace entre
	   contenu et silo a 10px. Avec nos valeurs, la colonne de contenu perdait
	   50px et le texte passait a la ligne bien plus tot. */
	.eho-page__grille {
		width: min(100% - 1.875rem, 87.5rem);
		grid-template-columns: minmax(0, 1fr) clamp(11.3125rem, 28.9vw - 2.5625rem, 15.9375rem);
		gap: 0.625rem;
		padding-inline-end: 0;
	}

	.eho-silo {
		padding: var(--eho-espace-sm);
	}

	.eho-silo__liste {
		gap: var(--eho-espace-md);
	}
}

@media (max-width: 560px) {
	.eho-page__grille {
		grid-template-columns: 1fr;
		gap: var(--eho-espace-xl);
	}
}

/* Titres de section du contenu. La production ne met aucune marge interne dans
   le titre : le trait est un element separe, pose 10px sous le bloc de ligne,
   large de 64px et epais de 5px. Sa couleur suit l'energie de la page. */

body:not(.woocommerce-page) .eho-page .eho-contenu h2 {
	position: relative;
	margin-bottom: calc(var(--eho-espace-md) + 0.9375rem);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
}

body:not(.woocommerce-page) .eho-page .eho-contenu h2::after {
	content: "";
	position: absolute;
	inset-block-end: -0.9375rem;
	inset-inline-start: 0;
	width: 4rem;
	height: 5px;
	background-color: var(--eho-lien);
}

/* La famille d'energie est portee par body : le selecteur doit y rester
   accroche, sinon il perd contre la regle de base. */

body.eho-famille--bois:not(.woocommerce-page) .eho-page .eho-contenu h2::after,
body.eho-famille--solaire:not(.woocommerce-page) .eho-page .eho-contenu h2::after {
	background-color: var(--eho-vert);
}

body.eho-famille--produits-petroliers:not(.woocommerce-page) .eho-page .eho-contenu h2::after {
	background-color: var(--eho-rouge);
}

[class*="eho-famille--"] .eho-contenu h3 {
	font-size: 1.375rem;
	color: var(--eho-bleu);
}

[class*="eho-famille--"] .eho-contenu .eho-cartes-texte h3 {
	font-size: 1.125rem;
	text-transform: uppercase;
	color: var(--eho-rouge);
}

/* Titre de section, plus large et sans capitales forcees */

[class*="eho-famille--"] .eho-contenu h3.eho-titre-section {
	font-size: 1.75rem;
	text-transform: none;
}

/* Cartes de texte en deux colonnes, utilisees dans le guide */

.eho-contenu .eho-cartes-texte {
	gap: 1.25rem;
	margin-block: var(--eho-espace-xl);
	padding-inline: 0.75rem;
}

.eho-contenu .eho-cartes-texte > .wp-block-column {
	padding: var(--eho-espace-xl) 2.28125rem;
	background-color: var(--eho-gris-050);
	border-radius: var(--eho-rayon);
}

.eho-contenu .eho-cartes-texte h3 {
	margin-block-start: 0;
	font-size: 1.125rem;
	text-transform: uppercase;
	color: var(--eho-rouge);
}

.eho-contenu .eho-cartes-texte h4 {
	font-size: 1.0625rem;
	color: var(--eho-texte-fort);
}

/* La rangee icone plus titre ne concerne que le bandeau compact : la variante
   standard centre son titre, sans icone. */
.eho-entete-page--compact .eho-entete-page__titre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-inline-start: -0.3125rem;
}

/* Hauteur imposee, largeur libre : les icones n'ont pas toutes le meme
   rapport. La production affiche celle du reseau en 40 par 32 ; une boite
   carree la reduisait a 32 de large et rapprochait le titre. */
.eho-entete-page__icone {
	flex: none;
	width: auto;
	height: 1em;
	color: var(--eho-bleu);
}

/* Pictos d'intertitre. Classe posee sur le bloc titre, editable en back-office. */

.eho-contenu .eho-picto {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
}

.eho-contenu .eho-picto::before {
	content: "";
	flex: none;
	width: 1.5em;
	height: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.eho-contenu .eho-picto--maison::before { background-image: url("../icons/maison.svg"); }
.eho-contenu .eho-picto--immeuble::before { background-image: url("../icons/immeuble.svg"); }
.eho-contenu .eho-picto--voiture::before { background-image: url("../icons/voiture.svg"); }
.eho-contenu .eho-picto--chariot::before { background-image: url("../icons/chariot-courses.svg"); }
.eho-contenu .eho-picto--usine::before { background-image: url("../icons/usine.svg"); }
.eho-contenu .eho-picto--medical::before { background-image: url("../icons/main-medicale.svg"); }
.eho-contenu .eho-picto--sante::before { background-image: url("../icons/sante.svg"); }
.eho-contenu .eho-picto--cagette::before { background-image: url("../icons/cagette.svg"); }
.eho-contenu .eho-picto--flamme-alt::before { background-image: url("../icons/flamme-alt.svg"); }
.eho-contenu .eho-picto--fiole::before { background-image: url("../icons/fiole.svg"); }
.eho-contenu .eho-picto--flocons::before { background-image: url("../icons/flocons.svg"); }
.eho-contenu .eho-picto--brasero::before { background-image: url("../icons/brasero.svg"); }
.eho-contenu .eho-picto--chaleur::before { background-image: url("../icons/chaleur.svg"); }
.eho-contenu .eho-picto--four::before { background-image: url("../icons/four.svg"); }
.eho-contenu .eho-picto--douche::before { background-image: url("../icons/douche.svg"); }

/* La production donne le meme corps a tous les liens du silo */



/* Rangee de logos de marques */

/* Grille et non colonnes de blocs : le CSS de WordPress empile les colonnes
   sous 782 px, ce qui donnait quatre logos sur quatre rangees. La production
   en aligne quatre de front au-dessus de 1200 et deux en dessous, toujours
   hauts de 60 px. */
.eho-contenu .eho-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	align-items: center;
	margin-block: var(--eho-espace-xl);
}

@media (max-width: 75rem) {
	.eho-contenu .eho-logos {
		grid-template-columns: repeat(2, 1fr);
	}
}

.eho-contenu .eho-logos > .wp-block-column {
	display: grid;
	place-items: center;
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	border-inline-start: 1px solid var(--eho-bordure);
}

.eho-contenu .eho-logos > .wp-block-column:first-child {
	border-inline-start: 0;
}

.eho-contenu .eho-logos figure {
	margin: 0;
}

.eho-contenu .eho-logos img {
	width: auto;
	max-height: 3.75rem;
	object-fit: contain;
}

/* Section Je commande : bandeau pleine largeur des pages du guide */

.eho-page:has(.eho-formulaire--sombre) {
	padding-block-end: 0;
}

.eho-commande {
	padding-block: 5.375rem;
	background-color: var(--eho-bleu);
}

/* Le titre est pose sur le bandeau bleu : sans cette specificite, la regle
   generique des intertitres de contenu le repeint en bleu marine, donc
   invisible sur son propre fond. Le trait generique est remplace par celui
   du bandeau, centre. */
.eho-commande__titre,
body:not(.woocommerce-page) .eho-page .eho-contenu h2.eho-commande__titre {
	position: relative;
	margin-block: 0 var(--eho-espace-2xl);
	padding-bottom: var(--eho-espace-md);
	font-size: 2rem;
	font-weight: var(--eho-poids-gras);
	text-align: center;
	color: var(--eho-blanc);
}

/* Vert et non bleu : la production pose ici un separateur de 64 par 5,
   `rgb(106, 179, 45)`. Le trait generique bleu du theme y etait faux. */
body:not(.woocommerce-page) .eho-page .eho-contenu h2.eho-commande__titre::after {
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 4rem;
	height: 5px;
	background-color: var(--eho-vert);
}

.eho-commande__titre::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 4rem;
	height: 5px;
	background-color: var(--eho-vert);
}

.eho-commande__titre:last-child {
	margin-block-end: 0;
}

.eho-commande__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--eho-espace-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sur le bandeau bleu, la production pose le carre blanc autour de la seule
   image et laisse le libelle en blanc sur le fond, sous la carte. Le fond blanc
   sur la carte entiere rendait titre et prix invisibles. */
.eho-commande__item .eho-carte-produit {
	background-color: transparent;
	text-align: center;
}

.eho-commande__item .eho-carte-produit__media {
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon);
}

.eho-commande__item .eho-carte-produit__titre,
.eho-commande__item .eho-carte-produit__prix {
	color: var(--eho-blanc);
}

@media (max-width: 900px) {
	.eho-commande__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* L'icone du bandeau prend la couleur de l'energie, relevee sur la production */

.eho-famille--gaz .eho-entete-page__icone { color: var(--eho-lien); }
.eho-famille--bois .eho-entete-page__icone { color: var(--eho-vert); }
.eho-famille--solaire .eho-entete-page__icone { color: var(--eho-vert); }
.eho-famille--produits-petroliers .eho-entete-page__icone { color: var(--eho-rouge); }

/* Encadre gris de section, et sa variante illustree */

.eho-contenu .eho-encadre {
	padding: var(--eho-espace-lg) var(--eho-espace-xl);
	margin-block: var(--eho-espace-md) var(--eho-espace-xl);
	background-color: var(--eho-gris-050);
}

.eho-contenu .eho-encadre > *:last-child {
	margin-bottom: 0;
}

.eho-contenu .eho-image-cote {
	float: inline-end;
	width: 18.3125rem;
	margin-block: var(--eho-espace-md) var(--eho-espace-xl);
	margin-inline-end: -21rem;
}

.eho-contenu .eho-image-cote img {
	width: 100%;
	height: auto;
	border-radius: var(--eho-rayon-lg);
}

/* La marge negative sort l'image dans la gouttiere du silo. Sous le bureau il
   n'y a plus de gouttiere : sans cette remise a zero l'image deborde la page.

   La largeur passe en pourcentage, comme sur la production, qui reduit cette
   image avec la fenetre : 308 px a 1440, 223 a 1024, 161 a 768, soit environ
   30,5 % de la colonne. Figee a 293 px, la notre etranglait le texte et
   rallongeait la section de 163 px a 1024. */
@media (max-width: 75rem) {
	.eho-contenu .eho-image-cote {
		width: 30.5%;
		margin-inline-end: 0;
		max-width: 50%;
	}
}

/* Entre 1024 et 1200 il reste 248 px a droite de la colonne : la production y
   sort son image, x de 764 a 987 quand son texte s'arrete a 748. Laissee dans
   la colonne, la notre reduisait le texte de 709 a 665 px et rallongeait la
   section de 104 px. Sous 1024 la place manque, l'image y reste en ligne. */
@media (min-width: 64rem) and (max-width: 75rem) {
	.eho-contenu .eho-image-cote {
		margin-inline-end: -13.5rem;
	}
}

@media (max-width: 35rem) {
	.eho-contenu .eho-image-cote {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}
}

.eho-contenu .eho-picto--biere::before { background-image: url("../icons/biere.svg"); }
.eho-contenu .eho-picto--moustique::before { background-image: url("../icons/moustique.svg"); }
.eho-contenu .eho-picto--flamme::before { background-image: url("../icons/flamme-carte.svg"); }

/* Icone d'angle des cartes du guide */

.eho-contenu .eho-cartes-texte .wp-block-column {
	position: relative;
}

.eho-contenu .eho-carte-icone::before {
	content: none;
}

.eho-carte-icone.eho-picto--biere { background-image: url("../icons/biere.svg"); }
.eho-carte-icone.eho-picto--cagette { background-image: url("../icons/cagette.svg"); }
.eho-carte-icone.eho-picto--flamme { background-image: url("../icons/flamme-carte.svg"); }
.eho-carte-icone.eho-picto--moustique { background-image: url("../icons/moustique.svg"); }

.eho-contenu .eho-carte-icone {
	position: absolute;
	inset-block-start: var(--eho-espace-xl);
	inset-inline-end: 2.28125rem;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* Photo d'introduction, texte a cote comme en production */

.eho-contenu .eho-image-intro {
	float: inline-start;
	width: 16.375rem;
	margin: 0 var(--eho-espace-xl) var(--eho-espace-lg) 0;
}

.eho-contenu .eho-image-intro img {
	width: 100%;
	height: auto;
	border-radius: var(--eho-rayon-lg);
}

/* Page SolEho : intro, bandeau vert et etapes */

.eho-contenu .eho-solaire-intro {
	gap: var(--eho-espace-2xl);
	align-items: center;
	margin-block-end: 0;
}

.eho-contenu .eho-solaire-intro figure {
	margin: 0;
}

/* La production ne grossit jamais une image au dela de sa taille reelle : le
   logo fait 300px de large et s'affichait ici a 641. */
.eho-contenu .eho-solaire-intro img {
	max-width: 100%;
	height: auto;
}

.eho-contenu .eho-bande-verte {
	margin-inline: calc(50% - 50vw);
	padding: var(--eho-espace-3xl) var(--eho-gouttiere);
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
}

.eho-contenu .eho-solaire-arguments {
	max-width: var(--eho-conteneur);
	margin-inline: auto;
	gap: var(--eho-espace-2xl);
	text-align: center;
}

.eho-contenu .eho-solaire-arguments figure {
	margin: 0 0 var(--eho-espace-lg);
}

.eho-contenu .eho-solaire-arguments img {
	width: auto;
	max-height: 8rem;
	margin-inline: auto;
}

.eho-contenu .eho-solaire-arguments p {
	font-size: 1.375rem;
	line-height: 1.35;
	color: var(--eho-blanc);
}

/* La production centre ce visuel dans le conteneur, elle ne le cale pas a
   gauche. */
.eho-contenu .eho-solaire-panneau img {
	display: block;
	margin-inline: auto;
}

.eho-contenu .eho-solaire-etapes {
	gap: var(--eho-espace-2xl);
	margin-block: var(--eho-espace-2xl);
}

.eho-contenu .eho-solaire-etapes p {
	margin: 0;
}

/* Damier vert et photos de la page SolEho */

/* Contrairement au bandeau vert des trois arguments, le damier reste dans le
   conteneur sur la production : il s'arrete a 1330, il ne file pas d'un bord
   a l'autre de l'ecran. */
.eho-contenu .eho-damier {
	margin-block: var(--eho-espace-2xl);
}

.eho-contenu .eho-damier__rang {
	gap: 0;
	margin-block: 0;
}

.eho-contenu .eho-damier__rang > .wp-block-column {
	display: flex;
	min-height: 21.25rem;
}

.eho-contenu .eho-damier__texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: var(--eho-espace-2xl) 3.125rem;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
}

.eho-contenu .eho-damier__texte h2,
.eho-contenu .eho-damier__texte h3 {
	margin-block-start: 0;
	font-size: 1.375rem;
	text-transform: uppercase;
	color: var(--eho-blanc);
}

.eho-contenu .eho-damier__texte h2::after,
.eho-contenu .eho-damier__texte h3::after {
	content: none;
}

.eho-contenu .eho-damier__texte p {
	margin-bottom: 0;
	color: var(--eho-blanc);
}

.eho-contenu .eho-damier figure {
	width: 100%;
	margin: 0;
}

.eho-contenu .eho-damier figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bloc chiffre et rangs alternes de la page SolEho */

.eho-contenu .eho-solaire-chiffre {
	margin-block: var(--eho-espace-3xl);
	text-align: center;
}

/* Repartition libre, et non la repartition fixe des tableaux importes : a
   onze colonnes egales, « 1 réfrigérateur A+++ » tombait sur trois lignes la
   ou la production le tient sur une. */
.eho-contenu .eho-solaire-chiffre table {
	width: 100%;
	margin-inline: auto;
	table-layout: auto;
}

/* La production souligne les deux rangees, celle des pictogrammes et celle
   des intitules. */
.eho-contenu .eho-solaire-chiffre td,
.eho-contenu .eho-solaire-chiffre th {
	min-width: 0;
	padding: 0.9375rem 0.75rem;
	text-align: center;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

/* La premiere ligne porte les pictogrammes, pas un en-tete de tableau. */

.eho-contenu .eho-solaire-chiffre thead th {
	background-color: transparent;
}

.eho-contenu .eho-solaire-chiffre img {
	max-height: 3.25rem;
	width: auto;
	margin-inline: auto;
}

/* La production partage ces rangees en 55/45 et colle les deux colonnes. */
.eho-contenu .eho-commande__produit .eho-commande__titre-produit {
	margin-block: 0 var(--eho-espace-md);
	font-size: 1.3rem;
	font-weight: var(--eho-poids-moyen);
	text-transform: none;
}

/* Le bloc colonnes du core empile ses colonnes sous 782px, avec un !important
   qui ne laisse aucune prise. La production les garde cote a cote jusqu'a la
   tablette : on ne rend la pile qu'en dessous de 560. */
@media (min-width: 35.0625rem) and (max-width: 48.8125rem) {
	.eho-contenu .wp-block-columns > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
		/* Sans cela une image large empeche sa colonne de retrecir et deborde
		   de la page : min-width vaut auto par defaut sur un element flex. */
		min-width: 0;
	}

	.eho-contenu .eho-alterne__rang > .wp-block-column:first-child {
		flex-basis: 55% !important;
	}

	.eho-contenu .eho-alterne__rang > .wp-block-column:last-child {
		flex-basis: 45% !important;
	}

	.eho-contenu .eho-commande__produit > .wp-block-column:first-child {
		flex-basis: 300px !important;
		flex-grow: 0;
	}
}

/* Typographie de la page SolEho. La production la fait chuter d'un cran sur
   tablette : des valeurs adaptatives plutot que des tailles figees dans le
   contenu, sinon rien ne suit la largeur. */

.eho-contenu .eho-solaire-accroche {
	font-size: clamp(0.875rem, 2.16vw - 0.5rem, 1.4375rem);
}

.eho-contenu .eho-solaire-arguments .eho-solaire-chiffre-texte,
.eho-contenu .eho-solaire-chiffre-texte {
	font-size: clamp(0.875rem, 2.4vw - 0.66rem, 1.5rem);
}

.eho-contenu .eho-solaire-titre {
	font-size: clamp(1.5625rem, 7.2vw - 3rem, 3.4375rem);
	font-weight: var(--eho-poids-gras);
	line-height: 1.1;
	color: var(--eho-bleu);
}

.eho-contenu .eho-solaire-titre--fort {
	font-weight: 900;
}

body:not(.woocommerce-page) .eho-page .eho-contenu h3.eho-solaire-section {
	font-size: clamp(1.25rem, 2.1vw, 1.875rem);
}

.eho-contenu .eho-alterne__rang {
	gap: 0;
	align-items: center;
	margin-block: var(--eho-espace-2xl);
}

.eho-contenu .eho-alterne__rang > .wp-block-column:first-child {
	flex-basis: 55%;
}

.eho-contenu .eho-alterne__rang > .wp-block-column:last-child {
	flex-basis: 45%;
}

.eho-contenu .eho-alterne__rang figure {
	margin: 0;
}

.eho-contenu .eho-alterne__rang img {
	width: 100%;
	height: auto;
}

/* La production decale le texte de 30px du bord de sa colonne. */
.eho-contenu .eho-alterne__texte {
	padding-inline: 1.875rem;
}

.eho-contenu .eho-alterne__texte h2,
.eho-contenu .eho-alterne__texte h3 {
	margin-block-start: 0;
	font-size: 1.75rem;
	text-transform: none;
	color: var(--eho-bleu);
}

.eho-contenu .eho-alterne__texte h2::after,
.eho-contenu .eho-alterne__texte h3::after {
	content: none;
}

/* Bouton de brochure et bandeau commande porte par le contenu */

.eho-contenu .eho-bouton-brochure {
	margin-block: var(--eho-espace-2xl);
	text-align: center;
}

/* Geometrie relevee sur la production : 242 par 48, rayon de 3px, graisse
   500. Ce n'est pas le bouton pilule du reste du site, c'est un bouton
   Elementor laisse a ses valeurs par defaut.

   Un ecart assume : la production ecrit ce libelle en vert sur fond vert,
   donc invisible. Nous le gardons en blanc. Reproduire un texte illisible
   couterait le 100 en accessibilite pour recopier un defaut.
   TODO: a signaler au client, le bouton est vide a l'oeil sur le site en
   ligne. */
.eho-contenu .eho-bouton-brochure a {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-blanc);
	text-decoration: none;
	background-color: var(--eho-vert);
	border-radius: 3px;
}

/* Bouton d'ajout au panier de la carte produit du bandeau. La production le
   rend par une boucle Woodmart : meme vert et meme gabarit que les boutons de
   la boutique, et non le bouton bleu generique du theme. */
.eho-contenu .eho-commande__produit .add_to_cart_button,
.eho-contenu .eho-commande__produit .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	padding: 0.3125rem 0.875rem;
	font-size: 0.75rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	color: var(--eho-blanc);
	text-transform: uppercase;
	text-decoration: none;
	background-color: var(--eho-vert-panier);
	border: 0;
	border-radius: var(--eho-rayon-rond);
}

.eho-contenu .eho-commande__produit .add_to_cart_button:hover,
.eho-contenu .eho-commande__produit .add_to_cart_button:focus-visible {
	background-color: var(--eho-vert-fonce);
}

.eho-contenu .eho-commande--contenu {
	margin-block-end: 0;
	margin-inline: calc(50% - 50vw);
	padding: var(--eho-espace-3xl) var(--eho-gouttiere);
	background-color: var(--eho-bleu);
}

.eho-contenu .eho-commande--contenu > * {
	max-width: var(--eho-conteneur);
	margin-inline: auto;
}

.eho-contenu .eho-commande--contenu p,
.eho-contenu .eho-commande--contenu li,
.eho-contenu .eho-commande--contenu a {
	color: var(--eho-blanc);
}

.eho-contenu .eho-commande__produit {
	/* La production laisse 16px entre la photo et le texte, et ne pose ni cadre
	   ni fond blanc autour de la photo. */
	gap: var(--eho-espace-md);
	align-items: start;
}

/* La production tient ce resume dans une boite de 176px qui defile : les sept
   arguments n'y paraissent pas tous, seuls les trois premiers se lisent. */
.eho-contenu .eho-commande__resume {
	max-height: 11rem;
	overflow-y: auto;
}

.eho-contenu .eho-commande__resume > * {
	margin-block-end: 0;
}

.eho-contenu .eho-commande--contenu .eho-commande__resume li {
	margin-block-end: 0.625rem;
	font-size: var(--eho-taille-base);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.eho-contenu .eho-commande__resume + * {
	margin-block-start: 0.875rem;
}

.eho-contenu .eho-commande__produit figure {
	margin: 0;
	padding: 0;
}

.eho-contenu .eho-commande__produit img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Selecteur assez fort pour passer devant le blanc applique a tous les
   paragraphes du bandeau sombre : le prix y est vert sur la production. */
.eho-contenu .eho-commande--contenu p.eho-commande__prix,
.eho-contenu .eho-commande__prix {
	font-size: 1.4rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert-panier);
}

.eho-contenu .eho-commande__prix span {
	font-size: 1rem;
	font-weight: var(--eho-poids-normal);
	color: var(--eho-blanc);
}

/* Panier vide, mise en page de la production */

/* La production n'affiche ni icone ni grande respiration : le bloc y fait
   266px, le notre en faisait 448. */
.eho-panier-vide {
	padding-block: var(--eho-espace-2xl);
	text-align: center;
}

.eho-panier-vide .eho-bouton--vert {
	color: var(--eho-blanc);
}

.eho-panier-vide__message {
	margin-block: var(--eho-espace-xl);
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
}

/* Index des villes desservies. La production ne met aucune marge haute a
   cette page : la liste demarre juste sous le fil d'ariane, et le bas se
   ferme sur 40px. Le rythme generique de `.eho-page` l'allongeait de 141px. */

.eho-page--villes {
	padding-block: 0 2.5rem;
}

.eho-page--villes .eho-villes {
	margin-block: 0;
	column-gap: 4rem;
}

/* Le vert est porte par le paragraphe et non par le lien : six villes n'en
   ont pas. Leur fiche distributeur repond 404 sur la production, nous ne
   reproduisons pas le lien mort, mais la ville doit rester a l'identique.
   TODO: demander au client si ces deux distributeurs existent encore
   (Alain Thevenin et Ets Eric Bougeard). */
.eho-page--villes .eho-villes p {
	margin-block: 0 1.25rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
}

.eho-page--villes .eho-villes a {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-page--villes .eho-villes a:hover {
	text-decoration: underline;
}

/* Index des villes desservies */

.eho-villes {
	columns: 3;
	column-gap: var(--eho-espace-2xl);
	margin-block: var(--eho-espace-2xl);
	padding: 0;
	list-style: none;
}

.eho-villes__item {
	break-inside: avoid;
	margin-bottom: var(--eho-espace-md);
}

.eho-villes__item a {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-villes__item a:hover {
	text-decoration: underline;
}

/* La production garde trois colonnes jusqu'a la tablette : deux allongeaient
   la page de 350px pour 62 villes. */
@media (max-width: 560px) {
	.eho-villes {
		columns: 2;
	}
}

@media (max-width: 420px) {
	.eho-villes {
		columns: 1;
	}
}

/* Sous 768px, les tableaux de contenu defilent au lieu de pousser la page */

@media (max-width: 767px) {
	.eho-contenu td,
	.eho-contenu th {
		min-width: 8rem;
	}

	.eho-contenu .wp-block-table,
	.eho-contenu figure.wp-block-table {
		overflow-x: auto;
	}

	.eho-contenu .eho-image-cote {
		float: none;
		width: 100%;
		margin-inline: 0;
	}

	.eho-contenu .eho-image-intro {
		float: none;
		width: 100%;
		margin: 0 0 var(--eho-espace-lg);
	}

	.eho-badge-avis {
		max-width: 100%;
		flex-wrap: wrap;
	}
}

/* Titres des cartes de texte du guide. La production les compose en 16px poids
   moyen ; nous les avons importes en h3, ce qui est mieux pour la structure mais
   les rendait plus gros et plus gras que l'original. */
.eho-contenu .eho-cartes-texte > .wp-block-column > h3,
body:not(.woocommerce-page) .eho-page .eho-contenu .eho-cartes-texte > .wp-block-column > h3 {
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	margin-block: 0 var(--eho-espace-xs);
}

/* Typographie mobile relevee sur la production : corps a 14px, titre a 28px */

@media (max-width: 767px) {
	.eho-contenu {
		font-size: 0.875rem;
		line-height: 1.4;
	}

	.eho-contenu .eho-onglets__panneau {
		font-size: 0.875rem;
	}

	.eho-entete-page__titre,
	.eho-entete-page--compact .eho-entete-page__titre {
		font-size: 1.75rem;
		line-height: 1.1;
	}

	.eho-contenu h2,
	[class*="eho-famille--"] .eho-contenu h2 {
		font-size: 1.375rem;
	}

	/* Sur les pages construites, la production reste a 28px en mobile, avec un
	   interlignage serre. Les pages de texte legal et la FAQ gardent 24px. */
	body:not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee):not(.woocommerce-page) .eho-page .eho-contenu > h2 {
		font-size: 1.75rem;
		line-height: 1.1;
	}

	.eho-contenu h3,
	[class*="eho-famille--"] .eho-contenu h3 {
		font-size: 1.0625rem;
	}
}

/* Echelle typographique de la bande tablette, relevee sur la production.
   Entre 768 et 1024px, la production compose le titre de page et les titres de
   section a 45px, alors qu'elle est a 28-32px au-dessus et a 28px en mobile.
   Verifie sur a-propos, contact, les categories du guide et la longue traine.
   Les pages de texte legal, la FAQ et l'index du guide gardent leur propre
   echelle : la production ne les agrandit pas. */

@media (min-width: 48rem) and (max-width: 64rem) {
	/* Avec un titre a 45px, la production resserre son bandeau : 20px de marge
	   verticale au lieu de 40, soit 23px de moins sur chaque page. */
	.eho-entete-page {
		padding-block: 0.625rem;
	}

	/* Les titres de carte d'article suivent la meme echelle que le reste du
	   contenu en bande tablette : chaque rangee de la page actualites perdait
	   230px sans cela. */
	.eho-carte-article__titre {
		font-size: 2.8125rem;
		line-height: 1.2;
		/* A cette taille, un mot long deborde d'une carte en deux colonnes. */
		overflow-wrap: break-word;
		hyphens: auto;
	}

	body:not(.eho-page-guide-energies):not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee) .eho-entete-page__titre,
	body:not(.eho-page-guide-energies):not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee):not(.woocommerce-page) .eho-page .eho-contenu > h2,
	body:not(.eho-page-guide-energies):not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee):not(.woocommerce-page) .eho-page .eho-contenu > .wp-block-group > h2,
	body:not(.eho-page-guide-energies):not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee):not(.woocommerce-page) .eho-page .eho-contenu > h3,
	body:not(.eho-page-guide-energies):not(.eho-page-faq):not(.eho-page-mentions-legales):not(.eho-page-livraison-et-retours):not(.eho-page-conditions-generales-de-vente):not(.eho-page-politique-de-confidentialite):not(.eho-page-charte-sur-le-respect-de-la-vie-privee):not(.woocommerce-page) .eho-page .eho-contenu > .wp-block-group > h3 {
		font-size: 2.8125rem;
		line-height: 1.2;
	}

	/* La production applique la meme taille aux titres des cartes en colonnes,
	   pas seulement aux titres de premier niveau : sur le guide CO2 comme sur
	   le guide bouteilles, les intitules de carte y sont composes en 45px et le
	   texte passe sur plusieurs lignes. Les notres restaient a 16px.
	   Le sous-titre `h4` garde en revanche sa taille : le passer a 45px lui
	   faisait prendre 270px de haut, contre 54 pour le titre en production. */
	body:not(.woocommerce-page) .eho-page .eho-contenu .wp-block-columns > .wp-block-column > h2,
	body:not(.woocommerce-page) .eho-page .eho-contenu .eho-cartes-texte > .wp-block-column > h3,
	body:not(.woocommerce-page) .eho-page .eho-contenu .wp-block-columns > .wp-block-column > h3 {
		font-size: 2.8125rem;
		line-height: 1.2;
		/* A cette taille dans une colonne etroite, un mot long deborde. */
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* La page contact compose ses titres hors du flux de contenu. */
	.eho-page-contact .eho-titre-souligne,
	.eho-page-contact .eho-contact__revendeur {
		font-size: 2.8125rem;
		line-height: 1.2;
	}
}

/* Page SolEho : la production enchaine ses rangees image-texte sans espace,
   elles forment une seule bande alternee. Nos 48px de marge entre rangees y
   ajoutaient une respiration que l'original n'a pas. Releve sur les quatre
   rangees concernees. */

/* Uniquement tant que les colonnes restent cote a cote : une fois empilees,
   la production les espace comme n'importe quel bloc. */
@media (min-width: 48.875rem) {
	body.eho-page-station-solaire-soleho .eho-contenu .wp-block-columns {
		margin-block: 0;
	}
}

/* L'icone du reseau est rouge sur la production, comme le logo. */
body.eho-page-nos-distributeurs-livraison-multi-energies .eho-entete-page__icone {
	color: var(--eho-rouge);
}

/* La page Nous rejoindre est pleine largeur sur la production : son texte
   court sur 1330px la ou notre colonne de contenu s'arrete a 992. */
body.eho-page-nous-rejoindre .eho-page .eho-contenu {
	max-width: none;
}

/* Bandeau "Je commande" en mode categories : la production y pose une image
   carree sur fond blanc et le nom dessous, sans prix ni bouton. */

.eho-commande__categorie {
	display: grid;
	gap: var(--eho-espace-md);
	text-align: center;
	color: var(--eho-blanc);
	text-decoration: none;
}

.eho-commande__categorie-media {
	display: block;
	/* La production garde une vignette d'environ 195px quelle que soit la
	   largeur de la cellule, centree, plutot que de l'etirer. */
	width: min(100%, 12.1875rem);
	margin-inline: auto;
	overflow: hidden;
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-lg);
	aspect-ratio: 1;
}

.eho-commande__categorie-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.eho-commande__categorie-nom {
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
}

/* --- components/onglets.css --- */
.eho-onglets {
	margin-block: var(--eho-espace-xl);
	padding-block-end: var(--eho-espace-xl);
}

.eho-onglets__liste {
	display: flex;
	flex-wrap: wrap;
	padding-inline: 6.5rem;
	background-color: var(--eho-gris-050);
	justify-content: flex-start;
	gap: 2.25rem;
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-onglets__onglet {
	padding: var(--eho-espace-sm) 0;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	color: var(--eho-texte-faible);
	cursor: pointer;
	transition: color var(--eho-transition), border-color var(--eho-transition);
}

.eho-onglets__onglet:hover {
	color: var(--eho-bleu);
}

.eho-onglets__onglet[aria-selected="true"] {
	color: var(--eho-bleu);
	border-bottom-color: var(--eho-bleu);
}

.eho-onglets__panneau {
	padding-block-start: var(--eho-espace-lg);
	font-size: var(--eho-taille-base);
}

.eho-onglets__panneau:focus-visible {
	outline: 2px solid var(--eho-vert);
	outline-offset: 4px;
}

/* Sous 1024px la production garde ses onglets sur une seule rangee et les fait
   defiler. Notre marge interne de 104px les faisait passer a la ligne. */

@media (max-width: 1024px) {
	.eho-onglets__liste {
		flex-wrap: nowrap;
		padding-inline: var(--eho-espace-md);
		gap: var(--eho-espace-lg);
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.eho-onglets__onglet {
		flex: none;
		white-space: nowrap;
	}
}

/* En desktop l'accordeon n'est qu'un doublon de la barre d'onglets.
 *
 * Sous 767px il remplace la barre, ce que la production ne fait pas : elle
 * garde ses onglets, defilants a l'horizontale. Essai de l'imiter le
 * 3 septembre 2026 : la barre etire alors toute la chaine de contenu, jusqu'a
 * `.eho-contenu` a 684px sur un ecran de 375, et la page deborde a 375 comme a
 * 560. L'accordeon est conserve. Il coute environ 400px sur la seule page qui
 * porte des onglets, la gamme de fluides frigorigenes. */

.eho-onglets__resume {
	display: none;
}

@media (max-width: 767px) {
	.eho-onglets__liste {
		display: none;
	}

	.eho-onglets__panneau,
	.eho-onglets__panneau[hidden] {
		display: block;
		padding-block-start: 0;
		border-bottom: 1px solid var(--eho-bordure);
	}

	.eho-onglets__resume {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--eho-espace-sm);
		width: 100%;
		padding: var(--eho-espace-md) 0;
		border: 0;
		background: none;
		font-family: inherit;
		font-size: 1.0625rem;
		font-weight: var(--eho-poids-semi);
		text-align: start;
		color: var(--eho-bleu);
		cursor: pointer;
	}

	.eho-onglets__resume::after {
		content: "";
		flex: none;
		width: 0.75em;
		height: 0.75em;
		background-color: currentColor;
		mask: url("../icons/caret-bas.svg") no-repeat center / contain;
		-webkit-mask: url("../icons/caret-bas.svg") no-repeat center / contain;
		transition: transform var(--eho-transition);
	}

	.eho-onglets__resume[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	.eho-onglets__resume[aria-expanded="false"] + .eho-onglets__contenu {
		display: none;
	}

	.eho-onglets__contenu {
		padding-block-end: var(--eho-espace-md);
	}
}

/* Editeur */

.eho-onglet-editeur {
	padding: var(--eho-espace-md);
	margin-block-end: var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
}

.eho-onglet-editeur__titre {
	margin: 0 0 var(--eho-espace-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
}

/* --- components/cartes.css --- */
/* Cartes produit et categorie, partagees par l'accueil, la boutique et les pages guide. */
/* Categories */

.eho-carte-categorie {
	display: grid;
	justify-items: center;
	gap: var(--eho-espace-md);
	text-decoration: none;
	color: var(--eho-bleu);
}

.eho-carte-categorie__media {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 12.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-lg);
	transition: transform var(--eho-transition), box-shadow var(--eho-transition);
}

.eho-carte-categorie:hover .eho-carte-categorie__media,
.eho-carte-categorie:focus-visible .eho-carte-categorie__media {
	transform: translateY(-4px);
	box-shadow: var(--eho-ombre);
}

.eho-carte-categorie__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--eho-espace-md);
}

.eho-carte-categorie__titre {
	font-size: 1.25rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.4;
	text-align: center;
}

/* Produits */

/* Ecarts internes releves sur la production : 9px entre la vignette et le
   titre, 9px entre le titre et le prix. Nous en mettions 16 puis 8, ce qui
   allongeait chaque rangee de la boutique de 9px. */
.eho-carte-produit {
	display: grid;
	gap: 0.5625rem;
	text-align: center;
}

.eho-carte-produit__lien {
	display: grid;
	gap: 0.5625rem;
	text-decoration: none;
	color: inherit;
}

.eho-carte-produit__lien:hover .eho-carte-produit__titre {
	color: var(--eho-vert);
}

.eho-carte-produit__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--eho-rayon);
}

.eho-carte-produit__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.eho-carte-produit__badge {
	position: absolute;
	inset-block-start: var(--eho-espace-xs);
	inset-inline-start: var(--eho-espace-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.125rem;
	padding: 0.3125rem 0.4375rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--eho-blanc);
	/* La production reserve le rouge a la rupture : sa pastille de promotion est
	   verte, dans le vert des boutons d ajout au panier. */
	background-color: var(--eho-vert-panier);
	border-radius: 2.1875rem;
}

/* Pastille ronde de 50, comme la production, qui la pose en haut a gauche de
   la vignette des produits epuises. */
.eho-carte-produit__badge--rupture {
	display: grid;
	place-items: center;
	width: 3.125rem;
	height: 3.125rem;
	min-height: 0;
	padding: 0;
	font-size: 0.6875rem;
	background-color: #dd3333;
	line-height: 1.1;
	text-align: center;
	border-radius: var(--eho-rayon-rond);
}

.eho-carte-produit__titre {
	margin-bottom: 0;
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	line-height: var(--eho-interligne);
	color: var(--eho-texte-fort);
}

/* Sur l'accueil, la production porte le titre dans un lien en 600 et le coupe
   a une ligne : son h3 reste haut de 22 quand le lien qu'il contient en fait 42.
   Sans cette coupe, « Kit moustique CO2 » passe sur deux lignes et pousse toute
   la rangee a 403 au lieu de 377. Meme coupe que la boutique, en `hidden` et
   sans `text-overflow` : le `-webkit-line-clamp` posait des points de suspension
   que la production n'a pas. La taille reste celle de la boutique. */
.eho-produits__item .eho-carte-produit__titre {
	height: 1.4em;
	line-height: 1.4;
	overflow: hidden;
	font-weight: var(--eho-poids-semi);
}

/* Sous 560px, la production tient le titre sur une seule ligne, coupee au
   besoin : la carte fait 212px de haut la ou la notre en faisait 269. */
@media (max-width: 35rem) {
	.eho-carte-produit__titre {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Le prix des vignettes est ecrit dans le vert des boutons d'ajout au panier,
   plus clair que le vert de marque, et son suffixe « TTC » en gris. */
.eho-carte-produit__prix {
	margin-bottom: 0;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert-panier);
}

.eho-carte-produit__prix .woocommerce-price-suffix {
	font-size: 0.8em;
	font-weight: var(--eho-poids-normal);
	color: #767676;
}



/* Deux actions sous le prix sur les listings : ajout direct au panier et acces
   a la fiche. Elles ne sont posees que la ou la carte les demande, l'accueil et
   les grilles des pages guide restant sans bouton. */
.eho-carte-produit__actions {
	display: grid;
	gap: var(--eho-espace-xs);
	margin-block-start: var(--eho-espace-2xs);
}

.eho-carte-produit__actions .button,
.eho-carte-produit__voir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--eho-rayon-rond);
	cursor: pointer;
	transition: background-color var(--eho-transition), color var(--eho-transition), border-color var(--eho-transition);
}

.eho-carte-produit__actions .button {
	color: var(--eho-blanc);
	background-color: var(--eho-vert-panier);
	border: 1px solid var(--eho-vert-panier);
}

.eho-carte-produit__actions .button:hover,
.eho-carte-produit__actions .button:focus-visible {
	background-color: var(--eho-vert-fonce);
	border-color: var(--eho-vert-fonce);
}

/* WooCommerce ajoute un lien « Voir le panier » juste apres le bouton. Il n'est
   pas affiche : c'est le panneau du panier qui s'ouvre, et il montre l'ajout. */
.eho-carte-produit__actions .added_to_cart,
.added_to_cart.wc-forward {
	display: none;
}

.eho-carte-produit__voir {
	color: var(--eho-texte-fort);
	background-color: transparent;
	border: 1px solid var(--eho-gris-200);
}

.eho-carte-produit__voir:hover,
.eho-carte-produit__voir:focus-visible {
	color: var(--eho-vert-fonce);
	border-color: var(--eho-vert);
}

/* Sur deux colonnes de telephone, la vignette fait 160px : « Ajouter au
   panier » y passait a la ligne et le bouton doublait de hauteur. */
@media (max-width: 30rem) {
	.eho-carte-produit__actions .button,
	.eho-carte-produit__voir {
		padding-inline: 0.5rem;
		font-size: 0.8125rem;
	}
}

/* Prix promotionnel. WooCommerce encadre le prix courant d un `<ins>`, que le
   navigateur souligne : la production l affiche sans soulignement, a cote du
   prix barre. */
.eho-carte-produit__prix ins,
.eho-carte-produit__prix del {
	text-decoration-color: currentColor;
	background-color: transparent;
}

.eho-carte-produit__prix ins {
	text-decoration: none;
}

/* --- components/badge-avis.css --- */
/* Badge de synthese des avis.
 *
 * Il parait sur l'accueil et sur les fiches produit, comme en production :
 * il vit donc avec les composants, pas avec la feuille de l'accueil.
 */

/* Geometrie relevee sur la production a 1440 : carte de 623 par 120, marge
   interne de 20, etoile de 80, puis un bloc d'information de 483 ou les deux
   lignes de note et la pastille du nombre d'avis partagent la meme rangee. */

.eho-badge-avis {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon);
	box-shadow: var(--eho-ombre-sm);
}

.eho-badge-avis__icone {
	flex: none;
	width: 5rem;
	height: 5rem;
	color: var(--eho-jaune);
}

.eho-badge-avis__enseigne {
	margin: 0 0 0.3125rem;
	font-size: 1.5625rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-gris-600);
	line-height: 1.2;
}

.eho-badge-avis__details {
	display: flex;
	align-items: center;
}

/* Grille commune aux deux lignes : sans colonnes partagees, les etoiles de la
   seconde note demarraient plus a droite que celles de la premiere. */
.eho-badge-avis__notes {
	display: grid;
	grid-template-columns: 11.25rem 3.4375rem auto;
	align-items: center;
	row-gap: 0;
}

.eho-badge-avis__ligne {
	display: contents;
}

.eho-badge-avis__libelle,
.eho-badge-avis__note {
	font-size: var(--eho-taille-sm);
	line-height: 1.35;
	color: var(--eho-gris-600);
}

.eho-badge-avis__libelle {
	font-weight: var(--eho-poids-normal);
}

.eho-badge-avis__note {
	text-align: end;
	font-weight: var(--eho-poids-gras);
}

.eho-badge-avis .eho-etoiles {
	margin-inline-start: 0.9375rem;
}

.eho-badge-avis .eho-etoile {
	width: 0.9375rem;
	height: 0.9375rem;
}

.eho-badge-avis__lien {
	margin-inline-start: 0.9375rem;
	padding: 0.375rem 1.5625rem 0.3125rem;
	font-size: var(--eho-taille-md);
	color: var(--eho-gris-600);
	text-decoration: none;
	background-color: #f2f2f2;
	border: 1px solid rgba(223, 223, 223, 0.6);
	border-radius: var(--eho-rayon-sm);
	white-space: nowrap;
}

/* Sur la fiche produit, le badge est seul sur sa ligne et centre */

.eho-produit__avis {
	display: flex;
	justify-content: center;
	margin-block: var(--eho-espace-xl);
}

/* Etoiles d'une note. Elles servent au badge, donc partout, et pas seulement
   a la page des avis d'ou elles viennent. */

.eho-etoiles {
	display: inline-flex;
	gap: 0.1875rem;
}

.eho-etoile {
	display: block;
	width: 1.05em;
	height: 1.05em;
	color: var(--eho-gris-300);
}

.eho-etoile.is-pleine {
	color: var(--eho-jaune);
}

.eho-etoile svg {
	width: 100%;
	height: 100%;
}

/* Sous 600px la carte ne tenait pas : la grille des notes imposait 235px de
   colonnes fixes, l'etoile 80px, le reste 155px, soit 470px de large dans un
   ecran de 375. Le document entier debordait de 130px et glissait de cote. */

@media (max-width: 600px) {
	.eho-badge-avis {
		flex-wrap: wrap;
		gap: var(--eho-espace-sm);
		padding: var(--eho-espace-md);
	}

	.eho-badge-avis__icone {
		width: 3rem;
		height: 3rem;
	}

	.eho-badge-avis__info {
		flex: 1 1 100%;
		min-width: 0;
	}

	.eho-badge-avis__enseigne {
		font-size: 1.25rem;
	}

	.eho-badge-avis__details {
		flex-wrap: wrap;
		gap: var(--eho-espace-sm);
	}

	.eho-badge-avis__notes {
		grid-template-columns: auto auto auto;
		justify-content: start;
		column-gap: 0.5rem;
		min-width: 0;
	}

	.eho-badge-avis .eho-etoiles {
		margin-inline-start: 0.5rem;
	}

	.eho-badge-avis__lien {
		margin-inline-start: 0;
		padding-inline: 0.75rem;
	}
}

/* --- components/avis-formulaire.css --- */
/* Depot d'un avis, atteint depuis le courriel de relance.
 *
 * Page sans navigation de contexte : le client arrive de sa boite aux lettres,
 * il a une chose a faire et une seule.
 */

.eho-avis-depot {
	padding-block: var(--eho-espace-2xl);
}

.eho-avis-depot__conteneur {
	max-width: 44rem;
}

.eho-avis-depot__titre {
	margin: 0 0 var(--eho-espace-sm);
	font-size: var(--eho-taille-2xl);
	color: var(--eho-texte-fort);
}

.eho-avis-depot__texte {
	margin: 0 0 var(--eho-espace-xl);
	color: var(--eho-texte-faible);
}

.eho-avis-depot__alerte {
	margin: 0 0 var(--eho-espace-lg);
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	border-radius: var(--eho-rayon);
	background-color: var(--eho-gris-050);
	border-inline-start: 3px solid var(--eho-rouge);
	color: var(--eho-texte-fort);
}

.eho-avis-depot__formulaire {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-lg);
}

/* Un produit a noter */

.eho-avis-produit {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--eho-espace-lg);
	align-items: start;
	margin: 0;
	padding: var(--eho-espace-lg);
	border: 1px solid var(--eho-gris-200);
	border-radius: var(--eho-rayon);
	background-color: var(--eho-blanc);
}

.eho-avis-produit__legende {
	grid-column: 1 / -1;
	padding: 0;
	margin-bottom: var(--eho-espace-sm);
	font-weight: var(--eho-poids-gras);
	color: var(--eho-texte-fort);
}

.eho-avis-produit__image {
	width: 100%;
	height: auto;
	border-radius: var(--eho-rayon);
}

.eho-avis-produit__champs {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-sm);
}

.eho-avis-produit__label {
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-avis-produit__texte {
	width: 100%;
	padding: var(--eho-espace-sm);
	border: 1px solid var(--eho-gris-200);
	border-radius: var(--eho-rayon);
	font: inherit;
	color: var(--eho-texte);
	resize: vertical;
}

@media (max-width: 560px) {
	.eho-avis-produit {
		grid-template-columns: minmax(0, 1fr);
	}

	.eho-avis-produit__image {
		max-width: 5rem;
	}
}

/* Les cinq etoiles */

.eho-avis-note {
	display: flex;
	gap: var(--eho-espace-xs);
}

.eho-avis-note__etoile {
	cursor: pointer;
	line-height: 0;
}

.eho-avis-note__etoile input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.eho-avis-note__marque {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	color: var(--eho-gris-200);
	transition: color .12s ease;
}

.eho-avis-note__marque svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Toutes les etoiles jusqu'a celle qui est cochee, comme une note se lit */

.eho-avis-note:has(input:checked) .eho-avis-note__marque {
	color: var(--eho-jaune);
}

.eho-avis-note__etoile:has(input:checked) ~ .eho-avis-note__etoile .eho-avis-note__marque {
	color: var(--eho-gris-200);
}

.eho-avis-note__etoile input:focus-visible + .eho-avis-note__marque {
	outline: 2px solid var(--eho-bleu);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Consentement et mention de moderation */

.eho-avis-depot__consentement {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-sm);
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte);
}

.eho-avis-depot__consentement input {
	margin-block-start: .2rem;
}

.eho-avis-depot__moderation {
	margin: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-avis-depot__formulaire .eho-bouton {
	align-self: flex-start;
}

/* --- components/formulaire.css --- */
/* Largeur du conteneur du site, pas 62rem : la production etale ses
   formulaires de recrutement et de devis solaire sur toute la largeur, avec
   des champs a mi-largeur de 660px. Bride a 62rem, notre formulaire tombait
   a 992px et se retrouvait rentre de 176px de chaque cote. Dans la colonne
   de la page contact, la contrainte de la grille reste la plus courte. */
.eho-formulaire {
	max-width: var(--eho-conteneur);
	margin-top: var(--eho-espace-2xl);
}

.eho-formulaire__grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--eho-espace-lg);
}

.eho-champ--pleine {
	grid-column: 1 / -1;
}

.eho-champ {
	display: grid;
	gap: var(--eho-espace-2xs);
}

.eho-champ__label {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-champ__saisie {
	width: 100%;
	padding: 1.0625rem var(--eho-espace-md);
	font-size: 1.0625rem;
	background-color: var(--eho-blanc);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
	transition: border-color var(--eho-transition);
}

.eho-champ__saisie:focus {
	outline: none;
	border-color: var(--eho-vert);
}

textarea.eho-champ__saisie {
	resize: vertical;
	height: 6.9375rem;
}

.eho-champ--erreur .eho-champ__saisie {
	border-color: var(--eho-erreur);
}

.eho-champ__erreur {
	margin-bottom: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-erreur);
}

.eho-champ__case {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
	font-size: var(--eho-taille-sm);
}

.eho-champ__case input {
	flex: none;
	margin-block-start: 0.2em;
}

/* Piege a robots : invisible sans etre supprime du flux pour les robots naifs. */

.eho-formulaire__piege {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eho-formulaire__obligatoire {
	margin-block: var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	/* Le gris faible ne donne que 3,76 de contraste : insuffisant pour une
	   mention qui indique les champs obligatoires. */
	color: var(--eho-texte);
}

.eho-formulaire__message {
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	margin-bottom: var(--eho-espace-lg);
	font-weight: var(--eho-poids-semi);
	border-radius: var(--eho-rayon);
}

.eho-formulaire__message--succes {
	color: var(--eho-vert-fonce);
	background-color: rgba(106, 179, 45, 0.12);
}

.eho-formulaire__message--erreur {
	color: var(--eho-rouge-fonce);
	background-color: rgba(227, 19, 57, 0.1);
}

@media (max-width: 640px) {
	.eho-formulaire__grille {
		grid-template-columns: 1fr;
	}
}

/* Titre souligne de vert, motif de la production */

.eho-titre-souligne {
	position: relative;
	margin-bottom: var(--eho-espace-xl);
	padding-bottom: var(--eho-espace-sm);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte-fort);
}

.eho-titre-souligne::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 3.75rem;
	height: 3px;
	background-color: var(--eho-vert);
}

/* Page contact. Le formulaire occupe toute sa colonne, comme en production :
   la largeur maximale generique le centrait avec 40px de marge parasite. */

.eho-contact .eho-formulaire {
	max-width: none;
	margin-block-start: 0;
	margin-inline: 0;
}

/* Le formulaire porte aussi la classe conteneur, calibree pour une pleine page.
   Dans la colonne de contact elle lui retirait 80px. */
.eho-contact .eho-formulaire__conteneur {
	width: 100%;
}

/* La production donne ce meme bouton a tous ses formulaires, aligne a gauche :
   158 par 60, rayon 5px, casse normale. Il etait cale ici pour la seule page
   contact, et les formulaires de recrutement et de devis solaire gardaient la
   pilule en majuscules du bouton generique. */
.eho-formulaire__form .eho-bouton--vert,
.eho-contact .eho-bouton--vert {
	padding: 1.125rem 2.3125rem;
	font-size: 1.25rem;
	text-transform: none;
	border-radius: var(--eho-rayon-sm);
}

.eho-contact__grille {
	display: grid;
	grid-template-columns: minmax(0, 2.33fr) minmax(0, 1fr);
	gap: 2.625rem;
	align-items: start;
}

.eho-contact__telephone {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	font-size: 1.375rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-contact__telephone a {
	color: inherit;
	text-decoration: none;
}

.eho-contact__icone {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--eho-vert);
}

.eho-contact__horaires {
	color: var(--eho-texte);
}

.eho-contact__revendeur {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	margin-block: var(--eho-espace-3xl) var(--eho-espace-lg);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte-fort);
}

.eho-contact__revendeur-icone {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--eho-vert);
}

/* La production boxe le contenu de cette page a 80 % de la fenetre sous
   1024 : sa colonne mesure 819 px a 1024 et 614 px a 768, contre 944 et 707
   chez nous. Un formulaire plus large enroule moins son texte, d'ou une page
   plus courte de 298 px a 768. */
@media (max-width: 1024px) {
	.eho-contact__grille {
		grid-template-columns: 1fr;
		gap: var(--eho-espace-xl);
		width: 80%;
		margin-inline: auto;
	}
}

/* Sous 768 la production revient a 90 % de la fenetre : 540 px a 600, 432 a
   480, 338 a 375. La bascule tombe a 767, pas a 768. */
@media (max-width: 47.9375rem) {
	.eho-contact__grille {
		width: 90%;
	}
}

/* Variante sombre, utilisee par la demande de devis */

.eho-formulaire--sombre {
	max-width: none;
	/* La bande sombre se colle au bloc qui la precede, comme en production :
	   la marge du formulaire generique y laissait un liseré blanc. */
	margin-block: 0;
	padding: var(--eho-espace-3xl) var(--eho-gouttiere);
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
}

.eho-formulaire--sombre > * {
	max-width: var(--eho-conteneur, 82rem);
	margin-inline: auto;
}

.eho-formulaire__titre {
	position: relative;
	margin-bottom: var(--eho-espace-2xl);
	padding-bottom: var(--eho-espace-md);
	font-size: 2rem;
	font-weight: var(--eho-poids-semi);
	text-align: center;
	color: var(--eho-blanc);
}

.eho-formulaire__titre::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 4rem;
	height: 5px;
	background-color: var(--eho-vert);
}

.eho-distributeur__contact .eho-champ__saisie,
.eho-formulaire--sombre .eho-champ__saisie {
	border-color: transparent;
	border-radius: var(--eho-rayon-sm);
	color: var(--eho-texte-fort);
	background-color: var(--eho-blanc);
}

.eho-distributeur__contact .eho-champ__case,
.eho-formulaire--sombre .eho-champ__case {
	color: var(--eho-blanc);
}

/* La mention est portee par les asterisques des invites */

.eho-distributeur__contact .eho-formulaire__obligatoire,
.eho-formulaire--sombre .eho-formulaire__obligatoire {
	display: none;
}

/* Aligne a gauche comme sur la production, et non centre. */
.eho-distributeur__contact .eho-bouton--vert,
.eho-formulaire--sombre .eho-bouton--vert {
	display: inline-block;
	margin-inline: 0;
}

/* Formulaire clair pose hors grille : il reprend la gouttiere du site */

.eho-formulaire__conteneur {
	width: min(100% - var(--eho-gouttiere) * 2, var(--eho-conteneur));
	margin-inline: auto;
}

/* --- components/modale.css --- */
.eho-modale {
	width: min(100% - 2rem, 27rem);
	padding: 0;
	color: var(--eho-texte);
	background-color: var(--eho-blanc);
	border: 0;
	border-radius: var(--eho-rayon);
	box-shadow: var(--eho-ombre-lg);
}

.eho-modale::backdrop {
	background-color: rgba(37, 39, 84, 0.55);
}

.eho-modale__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-md);
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	background-color: var(--eho-gris-100);
}

.eho-modale__titre {
	margin-bottom: 0;
	font-size: 1.3125rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
}

.eho-modale__fermer {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: var(--eho-vert);
	background: none;
	border: 0;
}

.eho-modale__fermer-icone {
	width: 0.9rem;
	height: 0.9rem;
}

.eho-modale__corps {
	padding: var(--eho-espace-lg);
}

.eho-modale__texte {
	margin-bottom: var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
}

.eho-modale__champ {
	width: 100%;
	padding: 0.75rem var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

.eho-modale__champ:focus {
	outline: none;
	border-color: var(--eho-vert);
}

.eho-modale__erreur {
	margin-block: var(--eho-espace-xs) 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-erreur);
}

.eho-modale__erreur[hidden] {
	display: none;
}

.eho-modale__valider {
	margin-top: var(--eho-espace-md);
}

.eho-modale__valider {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eho-texte-fort);
	background-color: var(--eho-gris-100);
}

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

/* --- components/video.css --- */
.eho-video {
	margin: var(--eho-espace-xl) 0;
}

/* La production sert son cadre a 500px de haut quelle que soit la largeur, ce
   qui rogne l'image en mobile. On garde le 16/9 et on plafonne a sa hauteur :
   identique a partir de 890px de large, correct en dessous. */
.eho-video__facade,
.eho-video__cadre {
	display: block;
	width: 100%;
	max-width: calc(500px * 16 / 9);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--eho-rayon-sm);
}

.eho-video__facade {
	position: relative;
	padding: 0;
	background: var(--eho-bleu);
	cursor: pointer;
	overflow: hidden;
}

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

.eho-video__lecture {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 4.5rem;
	height: 3.125rem;
	background-color: var(--eho-rouge);
	border-radius: var(--eho-rayon);
	transition: background-color var(--eho-transition);
}

.eho-video__lecture::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -40% -50%;
	border-style: solid;
	border-width: 0.625rem 0 0.625rem 1.0625rem;
	border-color: transparent transparent transparent var(--eho-blanc);
}

.eho-video__facade:hover .eho-video__lecture,
.eho-video__facade:focus-visible .eho-video__lecture {
	background-color: var(--eho-rouge-fonce, #b8102c);
}

.eho-video__mention {
	margin: var(--eho-espace-xs) 0 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte);
}

/* Le bloc embed du core calcule sa hauteur avec une marge interne
   proportionnelle. Notre facade porte deja son ratio : les deux se cumulaient
   et doublaient la hauteur de la video. */
.wp-block-embed:has(.eho-video) .wp-block-embed__wrapper {
	padding-top: 0;
	position: static;
}

.wp-block-embed:has(.eho-video) .wp-block-embed__wrapper::before {
	content: none;
}

.wp-block-embed:has(.eho-video) {
	margin-block: 0;
}

/* --- components/contenu-importe.css --- */
/* Compatibilite du balisage Elementor importe.
 *
 * Les contenus repris de la production portent encore les sections et colonnes
 * d'Elementor. Sans son CSS, les colonnes redeviennent des blocs et s'empilent :
 * une fiche distributeur passait a 7 700px pour 3 640 en production, chaque
 * section a deux colonnes doublant de hauteur.
 *
 * Le strict minimum est reproduit, et uniquement sous `.eho-contenu` : il n'est
 * pas question de reintroduire Elementor, seulement de rendre lisible ce qu'il
 * a laisse derriere lui. */

.eho-contenu .elementor-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--eho-espace-lg);
	width: 100%;
}

.eho-contenu .elementor-column {
	flex: 1 1 0;
	min-width: 0;
}

.eho-contenu .elementor-col-100 { flex-basis: 100%; }
.eho-contenu .elementor-col-66 { flex: 1 1 60%; }
.eho-contenu .elementor-col-50 { flex: 1 1 45%; }
.eho-contenu .elementor-col-33 { flex: 1 1 28%; }
.eho-contenu .elementor-col-25 { flex: 1 1 20%; }

.eho-contenu .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-sm);
	width: 100%;
}

.eho-contenu .elementor-section {
	margin-block: var(--eho-espace-lg);
}

.eho-contenu .elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

/* Le separateur d'Elementor est un trait, pas une zone : sans contrainte il
   prenait la hauteur de sa ligne. */
.eho-contenu .elementor-divider-separator {
	display: block;
	border-block-start: 3px solid currentColor;
	max-width: 4rem;
}

@media (max-width: 768px) {
	.eho-contenu .elementor-column {
		flex-basis: 100%;
	}
}

/* Formulaires Elementor importes.
 *
 * Les champs tirent leur largeur de classes propres a Elementor : sans elles,
 * les saisies tombaient a 33px de large, contre 340 en production. */

.eho-contenu .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eho-espace-sm);
	width: 100%;
}

.eho-contenu .elementor-field-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 45%;
	min-width: 0;
	gap: 0.25rem;
}

.eho-contenu .elementor-field-group.elementor-col-100,
.eho-contenu .elementor-field-type-textarea,
.eho-contenu .elementor-field-type-acceptance,
.eho-contenu .elementor-field-type-submit,
.eho-contenu .elementor-field-type-recaptcha,
.eho-contenu .elementor-field-type-recaptcha_v3 {
	flex-basis: 100%;
}

.eho-contenu .elementor-field-group .elementor-field {
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--eho-texte);
	background: var(--eho-blanc);
	border: 1px solid var(--eho-gris-300);
	border-radius: var(--eho-rayon-sm);
}

.eho-contenu .elementor-field-group textarea.elementor-field {
	min-height: 8rem;
	resize: vertical;
}

/* La case d'acceptation reste une case : en colonne, elle s'etirait sur toute
   la largeur du groupe. */
.eho-contenu .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
}

.eho-contenu .elementor-field-type-acceptance input[type="checkbox"] {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-block-start: 0.25rem;
}

/* `inline` ne reserve pas de hauteur et son fond se fragmente a chaque saut de
   ligne : le bouton se dessinait en trois rectangles verts disjoints, avec son
   libelle deborde sur le cote. Les retours a la ligne viennent de `wpautop`,
   mais `inline-block` rend le bouton solide meme s'il en reste. */

.eho-contenu .elementor-button {
	display: inline-block;
	align-self: flex-start;
	padding: 0.75rem 2rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-blanc);
	text-decoration: none;
	background: var(--eho-vert);
	border: 0;
	border-radius: var(--eho-rayon);
	cursor: pointer;
}

/* `wpautop` insere un saut de ligne par retour a la ligne du contenu importe,
   y compris entre les `span` du bouton : quatre d'entre eux tombaient dedans et
   le faisaient tenir sur trois lignes, soit 119px de haut pour un libelle qui
   en occupe 21. On les neutralise dans le bouton seulement, le contenu courant
   gardant les siens. */

.eho-contenu .elementor-button br {
	display: none;
}

@media (max-width: 768px) {
	.eho-contenu .elementor-field-group {
		flex-basis: 100%;
	}
}

/* Listes a icones Elementor.
 *
 * Les icones sont des glyphes Font Awesome que le theme ne charge pas : le
 * `<i>` restait vide et la liste gardait ses puces par defaut, avec pres de
 * 400px de blanc dans la colonne des coordonnees. On masque le glyphe absent
 * plutot que d'embarquer une police dont la licence n'est pas confirmee. */

.eho-contenu .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: var(--eho-espace-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-contenu .elementor-icon-list-item {
	margin: 0;
}

.eho-contenu .elementor-icon-list-item > a,
.eho-contenu .elementor-icon-list-item {
	display: flex;
	align-items: baseline;
	gap: var(--eho-espace-xs);
}

.eho-contenu .elementor-icon-list-icon:empty,
.eho-contenu .elementor-icon-list-icon i:not([class*="eho-"]) {
	display: none;
}

.eho-contenu .elementor-icon-list-text {
	min-width: 0;
}

/* Les listes marquees « inline » par la production tiennent sur une rangee :
   en colonne, les coordonnees des fiches distributeur s'empilaient sur quatre
   lignes la ou elles en occupent deux. */
.eho-contenu .elementor-icon-list-items.elementor-inline-items {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 2.5rem;
}

/* La production ne souligne pas les entrees de ces listes : le telephone,
   l'adresse et les liens de reseaux s'y lisent comme une fiche, pas comme du
   texte courant. */
.eho-contenu .elementor-icon-list-item a {
	text-decoration: none;
}

/* Carrousel d'images d'Elementor. Geometrie relevee sur la production : piste
   de 655 par 361, trente pixels reserves sous elle pour les pastilles, fleches
   de 25 posees a dix pixels des bords. */

.eho-contenu .elementor-image-carousel-wrapper {
	position: relative;
	padding-block-end: 1.875rem;
	overflow: hidden;
}

.eho-contenu .elementor-image-carousel {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-contenu .eho-carrousel-importe .elementor-image-carousel {
	transition: transform 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.eho-contenu .eho-carrousel-importe .elementor-image-carousel {
		transition: none;
	}
}

.eho-contenu .elementor-image-carousel .swiper-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.eho-contenu .elementor-image-carousel .swiper-slide-inner {
	display: block;
	margin: 0;
}

/* La production etire ses photos dans une boite de 655 par 361 : on garde la
   boite mais on recadre plutot que de deformer. */
.eho-contenu .elementor-image-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	aspect-ratio: 655 / 361;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.eho-contenu .elementor-swiper-button {
	position: absolute;
	inset-block-start: calc(50% - 0.9375rem);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.5625rem;
	height: 1.5625rem;
	padding: 0;
	cursor: pointer;
	color: rgba(237, 237, 237, 0.9);
	background: none;
	border: 0;
}

.eho-contenu .elementor-swiper-button-prev {
	inset-inline-start: 0.625rem;
}

.eho-contenu .elementor-swiper-button-next {
	inset-inline-end: 0.625rem;
}

.eho-contenu .elementor-swiper-button .eho-icone-importee {
	width: 100%;
	height: 100%;
	color: inherit;
}

.eho-contenu .swiper-pagination {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	height: 1.625rem;
}

.eho-contenu .swiper-pagination-bullet {
	width: 0.375rem;
	height: 0.375rem;
	padding: 0;
	cursor: pointer;
	background-color: #000000;
	border: 0;
	border-radius: 50%;
	opacity: 0.2;
	transition: opacity var(--eho-transition);
}

.eho-contenu .swiper-pagination-bullet-active {
	opacity: 1;
}

.eho-contenu .eho-icone-importee {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	align-self: center;
	color: var(--eho-vert);
}

/* Facade de contenu tiers.
 *
 * L'iframe reprise de la production n'est inseree qu'apres accord : sans quoi
 * la carte Google appelait maps.googleapis.com des l'ouverture de la page. */

.eho-cadre-differe {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-md);
	min-height: 18rem;
	padding: var(--eho-espace-xl);
	text-align: center;
	background: var(--eho-gris-050);
	border-radius: var(--eho-rayon);
}

.eho-cadre-differe__message {
	max-width: 32rem;
	margin: 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-cadre-differe--charge {
	min-height: 0;
	padding: 0;
	background: none;
}

.eho-cadre-differe__cadre {
	width: 100%;
	min-height: 22rem;
	border: 0;
	border-radius: var(--eho-rayon);
}

/* Les tableaux repris d'Elementor, horaires en tete, ne se contraignent pas a
   leur colonne : un tableau prend la largeur de son contenu, et celui des
   horaires debordait la page a toutes les largeurs. `max-width` seul n'y
   suffit pas, la largeur minimale des cellules l'emporte : il faut fixer la
   repartition. */

.eho-contenu table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

.eho-contenu table td,
.eho-contenu table th {
	overflow-wrap: anywhere;
	vertical-align: middle;
}

/* Les vignettes de ces tableaux illustrent une couleur de bouteille, elles ne
   sont pas le sujet : la production les sert a 71 px. Servies a leur taille
   d'origine, 300 px, elles portaient les lignes a 375 px de haut et la page a
   8 750 px contre 6 089. */

.eho-contenu table img {
	width: auto;
	max-width: 4.5rem;
	max-height: 4.5rem;
	height: auto;
	margin: 0;
	object-fit: contain;
}

/* Les pages guide portent des grilles de produits, montees en court-code. Sans
   cette regle, `ul.products` restait une liste et ses cartes s'empilaient en
   pleine largeur : trois produits faisaient 3 500 px de haut, la ou la
   production en tient quatre sur une rangee. */

.eho-contenu ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: var(--eho-espace-xl) 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) {
	.eho-contenu ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.eho-contenu ul.products img {
	max-width: 100%;
	max-height: none;
	width: 100%;
	height: auto;
}

/* Cours du Brent. Le graphique lui-meme est servi par un tiers et n'arrive
   qu'apres consentement : ce qui est style ici, c'est le cadre autour, et la
   facade qui prend sa place en attendant. */

.eho-brent {
	margin-block: var(--eho-espace-2xl);
}

.eho-brent__titre {
	margin-block: 0 var(--eho-espace-xs);
	font-size: var(--eho-taille-lg);
	color: var(--eho-bleu);
}

.eho-brent__intro {
	margin-block: 0 var(--eho-espace-md);
	max-width: 60ch;
	color: var(--eho-texte);
}

.eho-brent__cadre,
.eho-brent .eho-cadre-differe {
	width: 100%;
	min-height: 16rem;
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}