/* Trois arguments du reseau */

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

.eho-argument {
	text-align: center;
}

.eho-argument__icone {
	display: block;
	width: 3rem;
	margin: 0 auto var(--eho-espace-lg);
	color: var(--eho-rouge);
}

.eho-argument__titre {
	margin-bottom: var(--eho-espace-lg);
	font-size: 1.375rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte-fort);
}

.eho-argument__texte {
	margin-bottom: 0;
}

/* Localisateur */

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

.eho-localisateur__filtres {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--eho-espace-2xl);
	align-items: start;
	margin-bottom: var(--eho-espace-lg);
}

.eho-localisateur__label {
	display: block;
	margin-bottom: var(--eho-espace-xs);
	color: var(--eho-texte);
}

.eho-localisateur__recherche {
	display: flex;
	align-items: stretch;
}

.eho-localisateur__recherche input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
	border-inline-end: 0;
}

.eho-localisateur__recherche input:focus {
	outline: none;
	border-color: var(--eho-bleu);
}

.eho-localisateur__bouton {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
	border: 0;
}

.eho-localisateur__loupe {
	width: 1.1rem;
	height: 1.1rem;
}

.eho-localisateur__onglets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: var(--eho-espace-lg);
	border: 1px solid var(--eho-bordure);
}

.eho-localisateur__onglet {
	padding: 0.7rem var(--eho-espace-sm);
	font-size: var(--eho-taille-sm);
	text-transform: uppercase;
	color: var(--eho-texte-fort);
	background-color: var(--eho-blanc);
	border: 0;
	border-inline-end: 1px solid var(--eho-bordure);
}

.eho-localisateur__onglet:last-child {
	border-inline-end: 0;
}

.eho-localisateur__onglet[aria-pressed="true"] {
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
}

.eho-localisateur__distance {
	width: min(100%, 16rem);
	padding: 0.7rem var(--eho-espace-md);
	background-color: var(--eho-blanc);
	border: 1px solid var(--eho-bordure);
}

/* Liste et carte cote a cote */

/* Le panneau de la production fait exactement la hauteur de la fenetre, et la
   liste defile dedans. Verifie a 800, 1000 et 1400 de haut : le rang suit la
   fenetre au pixel. Notre valeur fixe de 75rem allongeait la page de 200px et
   laissait un grand vide a cote d'une liste bornee a 46rem. */
.eho-localisateur__resultats {
	display: grid;
	grid-template-columns: 28rem 1fr;
	align-items: stretch;
	height: 100vh;
	min-height: 0;
}

.eho-localisateur__liste {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--eho-bordure);
	border-inline-end: 0;
}

.eho-localisateur__compte {
	margin-bottom: 0;
	padding: var(--eho-espace-sm) var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
}

.eho-localisateur__magasins {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
}

.eho-localisateur__vide {
	padding: var(--eho-espace-lg);
	margin-bottom: 0;
}

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

.eho-localisateur__carte,
.eho-localisateur__carte .eho-carte {
	height: 100%;
	margin: 0;
	border-radius: 0;
}

/* Fiche magasin */

.eho-magasin {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--eho-espace-md);
	padding: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

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

.eho-magasin__nom {
	margin-bottom: var(--eho-espace-xs);
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte-fort);
}

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

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

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

.eho-magasin__categorie {
	display: inline-block;
	margin-inline-end: var(--eho-espace-md);
}

.eho-magasin__lien {
	display: inline-block;
	margin-top: var(--eho-espace-xs);
	padding: 0.45rem var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	text-transform: uppercase;
	color: var(--eho-bleu);
	text-decoration: none;
	border: 1px solid var(--eho-bleu);
	border-radius: var(--eho-rayon-sm);
}

.eho-magasin__lien:hover {
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
}

.eho-magasin__logo {
	flex: none;
	width: 5.5rem;
	padding: var(--eho-espace-xs);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

@media (max-width: 1024px) {
	/* La production garde ses trois arguments de front a cette largeur. */
	.eho-localisateur__filtres {
		grid-template-columns: 1fr;
	}

	/* Sous 1024px la production ramene son panneau a 450px. La grille gardait
	   pourtant `height: 100vh` alors que la liste y est plafonnee a 30rem : il
	   restait 420px de blanc sous elle, mesures a 768 comme a 1024. La hauteur
	   suit desormais le contenu. */
	.eho-localisateur__resultats {
		height: auto;
	}

	/* Et la colonne de liste gardait ses 28rem figes : a 768 il ne restait que
	   290px pour la carte, qui s'en trouvait etranglee. */
	.eho-localisateur__resultats {
		grid-template-columns: minmax(0, 20rem) 1fr;
	}

	.eho-localisateur__magasins {
		max-height: 28.125rem;
	}

	.eho-localisateur__liste {
		max-height: 30rem;
		border-inline-end: 1px solid var(--eho-bordure);
	}

	.eho-localisateur__carte .eho-carte {
		height: 24rem;
	}
}

/* La production n'empile liste et carte qu'a 560 : au-dessus, elle les garde
   de front sur toute la hauteur de la fenetre, verifie a 1024, 900 et 768.
   Nous empilions des 1024, ce qui raccourcissait la page contact de 509 px. */
@media (max-width: 35rem) {
	.eho-localisateur__resultats {
		grid-template-columns: 1fr;
		height: auto;
	}
}


/* 767 et non 768 : la production tient encore ses trois arguments de front a
   768, en colonnes de 228 px, et ne les empile qu'en dessous. Empiles une
   largeur trop tot, ils rallongeaient la page de 257 px. */
@media (max-width: 47.9375rem) {
	.eho-arguments {
		grid-template-columns: 1fr;
	}
}

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

/* Le logo du distributeur n'apparaissait pas : la fiche l'affichait deja, mais
   aucun distributeur ne portait la metadonnee. Elle est desormais extraite du
   contenu importe par `scripts/php/extraire-logos-distributeurs.php`. */

/* Une plage par ligne : mises bout a bout elles se lisaient comme une seule. */
.eho-magasin__plage {
	display: block;
}