/*
 * E2IT - modele de page d expertise.
 *
 * Six blocs, tous facultatifs : chaque expertise garde la meme structure
 * avec plus ou moins de contenu. Les grilles s adaptent au nombre
 * d elements (deux ou trois prestations, trois a cinq etapes, quatre a
 * dix lignes de fiche), rien n est calcule pour un nombre fixe.
 *
 *   Heros d expertise   + pastille de preuve sous les boutons
 *   Prestations         cartes numerotees, sans photo
 *   Fiche technique     plaque signaletique
 *   Deroule             schema unifilaire
 *   Realisations liees  automatique, masque sans chantier
 *   Sur vos sites       renvois vers les pages metier
 */

/* ---- Pastille de preuve, sous les boutons du heros ---- */
.e2it-hero__pastille:not(#e2it) {
	margin-top: var(--e2it-espace-6);
}

.e2it-hero__pastille p:not(#e2it) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(169, 196, 229, .4);
	border-radius: 999px;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-hero__pastille p::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--e2it-glacier);
	box-shadow: 0 0 0 3px rgba(169, 196, 229, .2);
}

/* ---- Fond alterne ---- */
.e2it-section--pale:not(#e2it) {
	background: var(--e2it-fond-gris);
}

/* ---- Conteneurs du modele : l espacement vient d ici, pas du panneau ---- */
:is(.e2it-prestations, .e2it-unifilaire, .e2it-terrains, .e2it-plaque, .e2it-plaque__ligne, .e2it-plaque__entete, .e2it-plaque__pied, .e2it-prestation, .e2it-etape, .e2it-terrain).e-con:not(#e2it) {
	padding: 0;
}

/* ==================================================================
   Prestations : cartes numerotees, deux a quatre par rangee
   ================================================================== */
.e2it-prestations.e-con:not(#e2it) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--e2it-espace-4);
}

.e2it-prestation.e-con:not(#e2it) {
	gap: var(--e2it-espace-3);
	padding: var(--e2it-espace-8) var(--e2it-espace-6);
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-top: 3px solid var(--e2it-marine);
	border-radius: 4px 4px 14px 14px;
}

.e2it-prestation__num p,
.e2it-prestation__num .elementor-heading-title {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-bleu-crete);
}

.e2it-prestation__titre .elementor-heading-title {
	margin: 0;
	color: var(--e2it-marine);
}

.e2it-prestation__texte p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--e2it-texte-secondaire);
}

/* ==================================================================
   Fiche technique : plaque signaletique
   Le cartouche d une plaque constructeur, celle qu on lit sur une
   armoire ou une borne : libelles a gauche, valeurs a droite, quatre
   rivets aux angles de l en-tete.
   ================================================================== */
.e2it-plaque.e-con:not(#e2it) {
	gap: 0;
	width: 100%;
	max-width: 820px;
	margin: var(--e2it-espace-8) auto 0;
	background: var(--e2it-blanc);
	border: 1.5px solid var(--e2it-marine);
	border-radius: 14px;
	overflow: hidden;
}

.e2it-plaque__entete.e-con:not(#e2it) {
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--e2it-espace-2) var(--e2it-espace-6);
	padding: 18px 36px;
	background: var(--e2it-marine);
	background-image:
		radial-gradient(circle, rgba(169, 196, 229, .55) 2.5px, transparent 3px),
		radial-gradient(circle, rgba(169, 196, 229, .55) 2.5px, transparent 3px),
		radial-gradient(circle, rgba(169, 196, 229, .55) 2.5px, transparent 3px),
		radial-gradient(circle, rgba(169, 196, 229, .55) 2.5px, transparent 3px);
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
}

.e2it-plaque__entete :is(p, .elementor-heading-title) {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-blanc);
}

.e2it-plaque__entete .elementor-widget:last-child :is(p, .elementor-heading-title) {
	color: var(--e2it-glacier);
}

.e2it-plaque__ligne.e-con:not(#e2it) {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--e2it-espace-6);
	align-items: baseline;
	padding: 16px 36px;
	border-top: 1px solid var(--e2it-bordure);
}

.e2it-plaque__entete + .e2it-plaque__ligne.e-con:not(#e2it) {
	border-top: 0;
}

.e2it-plaque__libelle :is(p, .elementor-heading-title) {
	margin: 0;
	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);
}

.e2it-plaque__valeur p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--e2it-marine);
}

.e2it-plaque__pied.e-con:not(#e2it) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e2it-espace-4) var(--e2it-espace-8);
	padding: 20px 36px;
	border-top: 1px solid var(--e2it-bordure);
	background: var(--e2it-fond-gris);
}

.e2it-plaque__pied .elementor-widget-text-editor p {
	margin: 0;
	font-size: 14px;
	color: var(--e2it-texte-secondaire);
}

.e2it-plaque__pied a {
	font-weight: 600;
	color: var(--e2it-bleu-profond);
}

@media (max-width: 639px) {
	.e2it-plaque__ligne.e-con:not(#e2it) {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 20px;
	}

	:is(.e2it-plaque__entete, .e2it-plaque__pied).e-con:not(#e2it) {
		padding: 16px 20px;
	}
}

/* ==================================================================
   Deroule : schema unifilaire
   Les etapes sont reliees par un trait continu, avec un point a chaque
   etape, comme sur un plan electrique. Le dernier point est plein : le
   circuit est ferme. Chaque etape trace le segment vers la suivante,
   le schema s adapte donc seul a trois, quatre ou cinq etapes.
   ================================================================== */
.e2it-unifilaire.e-con:not(#e2it) {
	--e2it-ecart-etapes: var(--e2it-espace-8);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--e2it-ecart-etapes);
	margin-top: var(--e2it-espace-8);
}

.e2it-etape.e-con:not(#e2it) {
	position: relative;
	gap: var(--e2it-espace-2);
	padding-top: 40px;
}

/* Le point. */
.e2it-etape.e-con::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--e2it-blanc);
	border: 2px solid var(--e2it-marine);
	box-sizing: border-box;
}

.e2it-etape.e-con:last-child::before {
	background: var(--e2it-accent-fond);
	border-color: var(--e2it-accent-fond);
	box-shadow: 0 0 0 4px rgba(31, 122, 224, .18);
}

/* Le segment vers l etape suivante. */
.e2it-etape.e-con:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 18px;
	right: calc(-1 * var(--e2it-ecart-etapes));
	height: 2px;
	background: var(--e2it-marine);
	transform-origin: left center;
}

.e2it-etape__num :is(p, .elementor-heading-title) {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-etape__titre .elementor-heading-title {
	margin: 0;
	color: var(--e2it-marine);
}

.e2it-etape__texte p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--e2it-texte-secondaire);
}

/* Le trait se trace etape apres etape a l apparition de la section. */
.e2it-anime--prete:not(.est-visible) .e2it-etape.e-con:not(:last-child)::after {
	transform: scaleX(0);
}

.e2it-anime--prete.est-visible .e2it-etape.e-con:not(:last-child)::after {
	animation: e2it-filet var(--e2it-duree-filet) var(--e2it-courbe) backwards;
	animation-delay: calc(var(--e2it-depart-serie) + var(--e2it-rang, 0) * var(--e2it-decalage-serie) + 260ms);
}

/* Mobile et tablette : le schema se lit de haut en bas. */
@media (max-width: 1024px) {
	.e2it-unifilaire.e-con:not(#e2it) {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--e2it-espace-8);
	}

	.e2it-etape.e-con:not(#e2it) {
		padding-top: 0;
		padding-left: 40px;
	}

	.e2it-etape.e-con:not(:last-child)::after {
		top: 18px;
		left: 8px;
		right: auto;
		bottom: calc(-1 * var(--e2it-espace-8));
		width: 2px;
		height: auto;
		transform-origin: center top;
	}

	.e2it-anime--prete:not(.est-visible) .e2it-etape.e-con:not(:last-child)::after {
		transform: scaleY(0);
	}

	.e2it-anime--prete.est-visible .e2it-etape.e-con:not(:last-child)::after {
		animation-name: e2it-filet-vertical;
	}
}

@keyframes e2it-filet-vertical {
	from { transform: scaleY(0); }
}

/* ==================================================================
   Sur vos sites : renvois vers les pages metier
   ================================================================== */
.e2it-terrains.e-con:not(#e2it) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e2it-espace-4);
	margin-top: var(--e2it-espace-8);
}

.e2it-terrain.e-con:not(#e2it) {
	position: relative;
	gap: var(--e2it-espace-2);
	padding: var(--e2it-espace-6) 72px var(--e2it-espace-6) var(--e2it-espace-6);
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-left: 3px solid var(--e2it-bleu-pale);
	border-radius: 0 14px 14px 0;
	text-decoration: none;
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe), box-shadow var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-terrain.e-con::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--e2it-marine);
	-webkit-mask: var(--e2it-fleche) center / 20px 20px no-repeat;
	mask: var(--e2it-fleche) center / 20px 20px no-repeat;
	transition: transform 280ms var(--e2it-courbe);
}

@media (hover: hover) {
	.e2it-terrain.e-con:hover {
		transform: translateY(-2px);
		box-shadow: var(--e2it-eleve);
		border-color: var(--e2it-bleu-crete);
		border-left-color: var(--e2it-accent);
	}

	.e2it-terrain.e-con:hover::after {
		transform: translateX(4px);
	}
}

.e2it-terrain__surtitre :is(p, .elementor-heading-title) {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-terrain__titre .elementor-heading-title {
	margin: 0;
	color: var(--e2it-marine);
}

.e2it-terrain__texte p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--e2it-texte-secondaire);
}

/* ==================================================================
   Realisations liees (shortcode [e2it_realisations_liees])
   Le conteneur hote disparait quand le shortcode ne renvoie rien.
   ================================================================== */
.e2it-rea-liees-hote.e-con:not(:has(.e2it-rea-liees, .e2it-rea-liees-attente)) {
	display: none;
}

.e2it-rea-liees-hote.e-con:not(#e2it) {
	padding: 0;
}

.e2it-rea-liees__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e2it-espace-4);
	margin-top: var(--e2it-espace-8);
}

.e2it-rea-liees__carte {
	display: flex;
	flex-direction: column;
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe), box-shadow var(--e2it-duree-rapide) var(--e2it-courbe);
}

@media (hover: hover) {
	.e2it-rea-liees__carte:hover {
		transform: translateY(-2px);
		box-shadow: var(--e2it-eleve);
	}
}

.e2it-rea-liees__media {
	aspect-ratio: 3 / 2;
	background: var(--e2it-bleu-pale);
}

.e2it-rea-liees__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.e2it-rea-liees__corps {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--e2it-espace-6);
}

.e2it-rea-liees__terrain {
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-rea-liees__titre {
	font-size: 18px;
	font-weight: 620;
	font-stretch: 88%;
	line-height: 1.25;
	color: var(--e2it-marine);
}

.e2it-rea-liees-attente {
	max-width: var(--e2it-largeur-contenu);
	margin: var(--e2it-espace-8) auto;
	padding: var(--e2it-espace-6);
	border: 1.5px dashed var(--e2it-bleu-crete);
	border-radius: 14px;
	font-size: 14px;
	color: var(--e2it-texte-secondaire);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.e2it-terrain.e-con,
	.e2it-terrain.e-con::after,
	.e2it-rea-liees__carte {
		transition: none;
	}

	.e2it-anime--prete .e2it-etape.e-con::after {
		animation: none;
		transform: none;
	}
}
/* Introductions de section : largeur de lecture sur les pages d expertise. */
.e2it-hero--page-expertise ~ .e-con .e2it-tete__intro p:not(#e2it) {
	max-width: 62ch;
}

/* ==================================================================
   Version 2 du modele : contexte, expertise sur fond bleu, preuves
   ================================================================== */

/* Carte entierement cliquable : le lien de pied de carte s etend a
   toute la carte (meme mecanique que les cartes metier de l accueil). */
.e2it-prestation.e-con:not(#e2it) {
	position: relative;
}

.e2it-prestation .e2it-carte__lien:not(#e2it) {
	margin-top: auto;
	padding-top: var(--e2it-espace-3);
}

.e2it-prestation .e2it-carte__lien p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.e2it-prestation .e2it-carte__lien a {
	color: var(--e2it-bleu-profond);
}

@media (hover: hover) {
	.e2it-prestation.e-con:has(.e2it-carte__lien a):hover {
		transform: translateY(-2px);
		box-shadow: var(--e2it-eleve);
	}

	.e2it-prestation.e-con:has(.e2it-carte__lien a):hover .e2it-carte__lien a:not(#e2it) {
		background-position: 0 100%;
		background-size: 100% 2px;
	}
}

.e2it-prestation.e-con:has(.e2it-carte__lien a) {
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe), box-shadow var(--e2it-duree-rapide) var(--e2it-courbe);
}

/* Cartes sur fond sombre : translucides, filet glacier. */
.e2it-prestations--sombre .e2it-prestation.e-con:not(#e2it) {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(169, 196, 229, .22);
	border-top: 3px solid var(--e2it-glacier);
}

.e2it-prestations--sombre .e2it-prestation__num :is(p, .elementor-heading-title) {
	color: var(--e2it-glacier);
}

.e2it-prestations--sombre .e2it-prestation__titre .elementor-heading-title:not(#e2it) {
	color: var(--e2it-blanc);
}

.e2it-prestations--sombre .e2it-prestation__texte p {
	color: var(--e2it-bleu-clair);
}

/* Ligne de preuve sous les prestations : mono, centree, filet au-dessus. */
.e2it-preuve-ligne:not(#e2it) {
	margin-top: var(--e2it-espace-8);
	padding-top: var(--e2it-espace-6);
	border-top: 1px solid rgba(169, 196, 229, .22);
}

.e2it-preuve-ligne p {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	text-align: center;
	color: var(--e2it-glacier);
}

.e2it-preuve-ligne a,
.e2it-preuve-ligne a:hover {
	color: var(--e2it-blanc);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Heros d expertise : surtitre et bandeau de preuves. */
.e2it-hero--page-expertise .e2it-hero__surtitre :is(p, .elementor-heading-title) {
	margin: 0 0 var(--e2it-espace-3);
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-hero--page-expertise .e2it-hero__preuves:not(#e2it) {
	margin-top: var(--e2it-espace-12);
	padding-bottom: var(--e2it-espace-6);
}

.e2it-hero--page-expertise .e2it-hero__preuves p {
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-clair);
}
/* Titres sur fond sombre : blancs d office, sans reglage de couleur dans
   le panneau. Introductions en bleu clair. */
:is(.e2it-hero, .e2it-section--photo, .e2it-section--sombre, .e2it-panneau) :is(.e2it-hero__titre, .e2it-tete__titre) .elementor-heading-title:not(#e2it) {
	color: var(--e2it-blanc);
}

:is(.e2it-section--photo, .e2it-section--sombre, .e2it-panneau) .e2it-tete__intro p:not(#e2it),
.e2it-hero .e2it-hero__soutien p:not(#e2it) {
	color: var(--e2it-bleu-clair);
}

/* Titre du heros d expertise : il deborde la colonne de texte pour tenir
   en deux lignes, comme sur l accueil. */
@media (min-width: 768px) {
	.e2it-hero--page-expertise .e2it-hero__titre:not(#e2it) {
		width: min(1100px, 92vw);
		max-width: none;
		align-self: center;
	}
}
/* Texte des cartes du modele : 16 px, comme les cartes de l accueil. */
.e2it-prestation__texte p:not(#e2it) {
	font-size: 16px;
	line-height: 1.55;
}

/* Rail de trois cartes ou moins : grille fixe. */
.e2it-rail--fixe .e2it-rail__cadre {
	overflow: visible;
}

.e2it-rail--fixe .e2it-rail__piste:not(#e2it) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e2it-espace-6);
	transform: none;
}