/*
 * E2IT - index des realisations.
 *
 * Deux niveaux de filtres, jamais melanges : le terrain est l axe principal -
 * celui du menu et de l arborescence - les expertises le croisent sans le
 * remplacer.
 *
 * Les compteurs sont dans les boutons : un filtre qui ne renvoie rien est une
 * impasse, et on doit le savoir avant de cliquer.
 */

.e2it-rea-index {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding: 0 var(--e2it-gouttiere);
}

.e2it-rea-index__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-2);
}

/* Quatre etats nets : repos, survol, actif, focus. Le survol ne changeait
   presque rien et l actif se lisait mal ; la transition evite que le bouton
   paraisse casse au clic. */
.e2it-rea-index__filtre {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border: 1px solid #C9D6E5;
	border-radius: var(--e2it-rayon-pilule);
	background: transparent;
	font-family: var(--e2it-police);
	font-size: 14px;
	color: var(--e2it-marine);
	cursor: pointer;
	transition:
		background-color 160ms var(--e2it-courbe),
		border-color 160ms var(--e2it-courbe),
		color 160ms var(--e2it-courbe);
}

.e2it-rea-index__filtre span {
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-texte-tertiaire);
	transition: color 160ms var(--e2it-courbe);
}

.e2it-rea-index__filtre:hover {
	background: var(--e2it-bleu-pale);
	border-color: var(--e2it-marine);
}

.e2it-rea-index__filtre.est-actif {
	background: var(--e2it-marine);
	border-color: var(--e2it-marine);
	color: var(--e2it-blanc);
	font-weight: 600;
}

.e2it-rea-index__filtre.est-actif span {
	color: var(--e2it-glacier);
}

/* L actif reste cliquable pour se retirer : le fond s eclaircit au survol
   pour le dire. */
/* Le pointeur reste sur le bouton apres le clic : sans cette regle, il
   affichait le bleu pale du survol, ni actif ni repos. L actif l emporte, avec
   une nuance plus claire pour dire qu un nouveau clic le retire. */
.e2it-rea-index__filtre.est-actif:hover {
	background: var(--e2it-bleu-profond);
	border-color: var(--e2it-bleu-profond);
	color: var(--e2it-blanc);
}

.e2it-rea-index__filtre:focus-visible {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

.e2it-rea-index__compteur {
	margin: var(--e2it-espace-4) 0 0;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
}

.e2it-rea-index .e2it-chantiers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--e2it-espace-4);
	margin-top: var(--e2it-espace-4);
}

.e2it-rea-index__aucun,
.e2it-rea-index__vide {
	margin: var(--e2it-espace-8) 0 0;
	max-width: 60ch;
	font-size: var(--e2it-lecture-taille);
	line-height: var(--e2it-lecture-interligne);
	color: var(--e2it-lecture-texte);
}

/* ------------------------------------------------------------------
   Couverture
   ------------------------------------------------------------------ */

.e2it-couverture {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin: var(--e2it-espace-24) auto 0;
	padding: var(--e2it-espace-12) var(--e2it-gouttiere);
	background: var(--e2it-fond-gris);
	border-radius: var(--e2it-rayon-carte);
}

.e2it-couverture__surtitre {
	margin: 0 0 var(--e2it-espace-2);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-couverture__titre {
	margin: 0 0 var(--e2it-espace-3);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--e2it-marine);
}

.e2it-couverture__texte {
	margin: 0;
	max-width: 62ch;
	font-size: var(--e2it-lecture-taille);
	line-height: var(--e2it-lecture-interligne);
	color: var(--e2it-lecture-texte);
}

@media (max-width: 1024px) {
}

@media (max-width: 767px) {
	/* Les filtres defilent horizontalement plutot que de s empiler sur
	   quatre lignes au-dessus de la grille. */
	.e2it-rea-index__filtres,
		.e2it-rea-index__filtres::-webkit-scrollbar,
	.e2it-rea-index__expertises::-webkit-scrollbar {
		display: none;
	}

	.e2it-rea-index__filtre,
		.e2it-rea-index .e2it-chantiers {
		grid-template-columns: 1fr;
	}

}

@media (prefers-reduced-motion: reduce) {
	.e2it-rea-index__filtre,
	}
/* ------------------------------------------------------------------
   Bandeau de preuves rendu par le widget

   Les regles existantes de hero.css visent le balisage monte avec des
   widgets Elementor - .e2it-hero__preuve-chiffre .elementor-heading-title.
   Le widget rend des span : on cible span. pour ne toucher qu a lui et
   laisser le hero d accueil intact.
   ------------------------------------------------------------------ */

.e2it-hero__preuves:has(span.e2it-hero__preuve-chiffre) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e2it-espace-6) var(--e2it-espace-16);
}

span.e2it-hero__preuve-chiffre {
	display: block;
	font-family: var(--e2it-police);
	font-size: var(--e2it-chiffre-taille);
	font-weight: var(--e2it-chiffre-graisse);
	letter-spacing: var(--e2it-chiffre-interlettrage);
	line-height: 1;
	color: var(--e2it-blanc);
}

span.e2it-hero__preuve-legende {
	display: block;
	margin-top: var(--e2it-espace-2);
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-clair);
}

@media (max-width: 767px) {
	.e2it-hero__preuves:has(span.e2it-hero__preuve-chiffre) {
		gap: var(--e2it-espace-4) var(--e2it-espace-8);
	}

	span.e2it-hero__preuve-chiffre {
		font-size: 28px;
	}
}

/* Sur cette page la carte est le sujet, pas l accompagnement d un discours :
   elle prend toute la largeur et 60 px de hauteur de plus qu a l accueil.
   Le reglage ne touche pas l accueil, il est porte par la section. */
.e2it-couverture .e2itz-carte {
	padding: 0;
	background: none;
}

.e2it-couverture .e2itz-carte__inner {
	padding: 0;
	max-width: none;
}

/* La carte faisait 761 px contre 618 pour le panneau de droite : la section
   depassait la fenetre de 77 px. Sa hauteur se cale desormais sur celle du
   panneau, et les deux colonnes se terminent sur la meme ligne.
   Regle portee par la section : l accueil n est pas touche. */
@media (min-width: 1025px) {
	.e2it-couverture .e2itz-carte__grille {
		align-items: stretch;
	}

	.e2it-couverture .e2itz-plan svg {
		height: 520px;
	}
}

.e2it-couverture__intro {
	margin-bottom: var(--e2it-espace-8);
}


/* Fondu a l entree des cartes conservees : sans lui le filtrage est un saut
   sec, et l oeil ne sait pas ce qui a change. */
@keyframes e2it-rea-entree {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.e2it-rea-index__element.est-entrant {
	animation: e2it-rea-entree 200ms var(--e2it-courbe) both;
}

@media (prefers-reduced-motion: reduce) {
	.e2it-rea-index__element.est-entrant {
		animation: none;
	}
}

/* Annonce reservee aux lecteurs d ecran : le compteur visible reste court. */
.e2it-rea-index__annonce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
   Recherche, filtres a deux axes, barre d etat et cartes compactes

   La page tient deux registres : les chantiers racontes, peu nombreux,
   et les sites d intervention, nombreux. Les premiers gardent la carte
   pleine hauteur, faite pour une photo ; les seconds tiennent en une
   ligne. Sans cela, trente cartes vides noyaient les trois qui parlent.
   ================================================================== */

.e2it-rea-index__recherche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-3);
	align-items: center;
	margin-bottom: var(--e2it-espace-6);
}

.e2it-rea-index__champ {
	position: relative;
	flex: 1 1 320px;
	max-width: 520px;
}

.e2it-rea-index__champ input {
	width: 100%;
	height: 48px;
	padding: 0 44px 0 46px;
	box-sizing: border-box;
	font-family: var(--e2it-police);
	font-size: 16px;
	color: var(--e2it-texte);
	background: var(--e2it-blanc);
	border: 1.5px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-pilule);
	transition: border-color var(--e2it-duree-rapide) var(--e2it-courbe), box-shadow var(--e2it-duree-rapide) var(--e2it-courbe);
	/* La loupe est dessinee dans le fond : pas d icone a charger, et rien
	   qui intercepte le clic dans le champ. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5260' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 20px 20px;
}

.e2it-rea-index__champ input::-webkit-search-cancel-button {
	display: none;
}

.e2it-rea-index__champ input:focus {
	outline: none;
	border-color: var(--e2it-bleu-crete);
	box-shadow: 0 0 0 3px rgba(31, 122, 224, .18);
}

.e2it-rea-index__effacer {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--e2it-texte-secondaire);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.e2it-rea-index__effacer:hover {
	background: var(--e2it-bleu-pale);
	color: var(--e2it-marine);
}

/* Deux rangees, deux axes. L intitule les nomme : sans lui, deux series
   de pilules cote a cote paraissent etre la meme liste. */
.e2it-rea-index__filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e2it-espace-2);
	margin-bottom: var(--e2it-espace-3);
}

.e2it-rea-index__axe {
	margin-right: var(--e2it-espace-2);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
	min-width: 74px;
}

.e2it-rea-index__filtres--second .e2it-rea-index__filtre {
	height: 34px;
	font-size: 13px;
}

/* Barre d etat : le nombre d abord, puis ce qui le restreint. */
.e2it-rea-index__etat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e2it-espace-2) var(--e2it-espace-4);
	margin: var(--e2it-espace-6) 0 var(--e2it-espace-4);
	padding-top: var(--e2it-espace-4);
	border-top: 1px solid var(--e2it-bordure);
}

.e2it-rea-index__compteur:not(#e2it) {
	margin: 0;
	font-family: var(--e2it-police);
	font-size: 17px;
	font-weight: 620;
	font-stretch: 88%;
	color: var(--e2it-marine);
}

.e2it-rea-index__jetons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-2);
}

.e2it-rea-index__jeton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	font-family: var(--e2it-police);
	font-size: 13px;
	font-weight: 500;
	color: var(--e2it-marine);
	background: var(--e2it-bleu-pale);
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	transition: background var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-rea-index__jeton::after {
	content: "×";
	font-size: 16px;
	line-height: 1;
	color: var(--e2it-bleu-profond);
}

.e2it-rea-index__jeton:hover {
	background: var(--e2it-blanc);
	border-color: var(--e2it-marine);
}

.e2it-rea-index__tout {
	margin-left: auto;
	padding: 0;
	font-family: var(--e2it-police);
	font-size: 14px;
	font-weight: 600;
	color: var(--e2it-bleu-profond);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Aucun resultat : on dit quoi faire, pas seulement qu il n y a rien. */
.e2it-rea-index__aucun {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e2it-espace-4);
	margin-top: var(--e2it-espace-8);
	padding: var(--e2it-espace-12) var(--e2it-espace-6);
	text-align: center;
	background: var(--e2it-fond-gris);
	border-radius: var(--e2it-rayon-carte);
}

.e2it-rea-index__aucun p {
	margin: 0;
	font-size: 17px;
	color: var(--e2it-texte-secondaire);
}

@media (max-width: 767px) {
	.e2it-rea-index__axe {
		width: 100%;
		min-width: 0;
		margin: 0 0 4px;
	}

	.e2it-rea-index__tout {
		margin-left: 0;
	}

	.e2it-rea-index__recherche {
		gap: var(--e2it-espace-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-rea-index__jeton,
	.e2it-rea-index__champ input {
		transition: none;
	}
}

/* Libelle reserve aux lecteurs d ecran. */
.e2it-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
   Bloc de recherche et de filtres centre

   Recherche, filtres, barre d etat et intitules de groupe partagent le
   meme axe : un champ centre au-dessus de rangees alignees a gauche
   donnait un bloc de travers. Les intitules d axe passent au-dessus de
   leur rangee, faute de quoi ils la desaxent.
   ================================================================== */

.e2it-rea-index__recherche {
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--e2it-espace-8);
}

.e2it-rea-index__champ {
	flex: 0 1 520px;
	width: 100%;
}

.e2it-rea-index__filtres {
	justify-content: center;
	margin-bottom: var(--e2it-espace-4);
}

.e2it-rea-index__axe {
	width: 100%;
	min-width: 0;
	margin: 0 0 6px;
	text-align: center;
}

.e2it-rea-index__etat {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.e2it-rea-index__jetons {
	justify-content: center;
}

.e2it-rea-index__tout {
	margin-left: 0;
}

/* Affichage progressif : le bouton clot la grille, centre, avec de l air
   au-dessus pour ne pas etre pris pour une carte. */
.e2it-rea-index__plus {
	display: flex;
	justify-content: center;
	margin-top: var(--e2it-espace-8);
}

/* ==================================================================
   Bloc de recherche et de filtres centre - version corrigee

   Le formulaire reste une rangee : passe en colonne, la largeur de 520 px
   donnee au champ devenait une hauteur, et le bloc creusait un vide d un
   demi-ecran sous le titre. La largeur se fixe donc en largeur, et le
   centrage par justify-content.
   ================================================================== */

.e2it-rea-index__recherche:not(#e2it) {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--e2it-espace-6);
}

.e2it-rea-index__champ:not(#e2it) {
	flex: 0 0 auto;
	width: min(520px, 100%);
}

/* Les intitules d axe reprennent leur place devant leur rangee : sur une
   ligne a eux, ils doublaient la hauteur du bloc. */
.e2it-rea-index__axe:not(#e2it) {
	width: auto;
	margin: 0 var(--e2it-espace-2) 0 0;
	text-align: left;
}

.e2it-rea-index__filtres:not(#e2it) {
	justify-content: center;
	margin-bottom: var(--e2it-espace-3);
}

/* Barre d etat sur une ligne : compteur, jetons, puis Tout effacer, avec
   un espacement franc - colles, les trois se lisaient comme un seul mot. */
.e2it-rea-index__etat:not(#e2it) {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--e2it-espace-3) var(--e2it-espace-6);
	text-align: center;
}

@media (max-width: 767px) {
	.e2it-rea-index__axe:not(#e2it) {
		width: 100%;
		margin: 0 0 4px;
		text-align: center;
	}
}

/* Un element masque par l attribut hidden reste masque, quel que soit le
   display que lui donne une regle de classe (display: flex sur le bloc
   \u00ab aucun resultat \u00bb l affichait en permanence). Le script est seul
   juge de ce qui apparait. */
.e2it-rea-index [hidden] {
	display: none !important;
}

/* Archive des realisations : les onglets du heros remplacent le filtre de
   terrain de l index. Recherche, expertises et jetons restent. */
body.e2it-rh-actif .e2it-rea-index__filtres[aria-label="Filtrer par terrain"] {
	display: none;
}