/*
 * E2IT - pages metiers (Industrie, Thermalisme).
 *
 * Un gabarit unique : memes sections, meme ordre, le contenu et le reglage
 * de terrain changent. Tout est monte en blocs Elementor natifs portant ces
 * classes, donc modifiable dans le constructeur.
 */

/* ---- Contexte : quatre contraintes, en grille ---- */

.e2it-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e2it-espace-8) var(--e2it-espace-12);
}

.e-con.e2it-points {
	display: grid;
}

.e2it-point {
	padding-top: var(--e2it-espace-4);
	border-top: 2px solid var(--e2it-bleu-pale);
}

.e-con .elementor-widget.e2it-point__titre:not(:last-child) {
	margin-block-end: var(--e2it-espace-2);
}

.e2it-point__titre h3 {
	margin: 0;
}

.e2it-point__texte p {
	margin: 0;
}

/* ---- Interventions : quatre volets numerotes ---- */

.e2it-volets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--e2it-espace-4);
}

.e-con.e2it-volets {
	display: grid;
}

.e2it-volet {
	padding: var(--e2it-espace-6);
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-top: 3px solid var(--e2it-accent);
	border-radius: var(--e2it-rayon-carte);
}

.e-con .elementor-widget.e2it-volet__numero:not(:last-child) {
	margin-block-end: var(--e2it-espace-3);
}

.e-con .elementor-widget.e2it-volet__titre:not(:last-child) {
	margin-block-end: var(--e2it-espace-2);
}

.e2it-volet__numero p,
.e2it-volet__titre h3,
.e2it-volet__texte p {
	margin: 0;
}

/* ---- Lien vers l index filtre ---- */

.e2it-chantiers-terrain {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--e2it-gouttiere);
	box-sizing: border-box;
}

.e2it-chantiers-terrain__lien {
	margin: var(--e2it-espace-8) 0 0;
	text-align: center;
}

.e2it-chantiers-terrain__lien a {
	font-size: var(--e2it-lien-taille);
	font-weight: var(--e2it-lien-graisse);
	color: var(--e2it-bleu-profond);
	text-decoration: none;
	border-bottom: 1px solid var(--e2it-bleu-pale);
}

.e2it-chantiers-terrain__lien a:hover {
	border-color: var(--e2it-accent);
}

/* ---- Questions frequentes : l accordeon natif aux couleurs du site ---- */

.e2it-faq .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--e2it-bordure);
}

.e2it-faq .elementor-accordion .elementor-tab-title {
	padding: var(--e2it-espace-6) 0;
	font-family: var(--e2it-police);
	font-size: 18px;
	font-weight: 600;
	color: var(--e2it-marine);
}

.e2it-faq .elementor-accordion .elementor-tab-title a {
	color: inherit;
}

.e2it-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	color: var(--e2it-bleu-crete);
}

.e2it-faq .elementor-accordion .elementor-tab-content {
	padding: 0 0 var(--e2it-espace-6);
	border: 0;
	max-width: 68ch;
	font-size: var(--e2it-lecture-taille);
	line-height: var(--e2it-lecture-interligne);
	color: var(--e2it-lecture-texte);
}

@media (max-width: 1024px) {
	.e2it-volets,
	.e-con.e2it-volets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.e2it-points,
	.e-con.e2it-points,
	.e2it-volets,
	.e-con.e2it-volets {
		grid-template-columns: 1fr;
	}
}
/* Les grilles s etalaient sur toute la fenetre - 1857 px mesures - au lieu
   de la largeur de contenu : le conteneur Elementor boxed ne borne pas ses
   enfants quand on lui impose un affichage en grille. On borne donc la
   grille elle-meme, comme le reste des sections du site. */
.e-con.e2it-points,
.e-con.e2it-volets,
.e-con.e2it-faq__corps {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--e2it-gouttiere);
	box-sizing: border-box;
}

/* Les questions se lisent mieux sur une colonne de lecture qu en pleine
   largeur. */
.e-con.e2it-faq__corps {
	max-width: calc(820px + 2 * var(--e2it-gouttiere));
}

/* Le conteneur boxed d Elementor enveloppe ses enfants dans un .e-con-inner :
   la grille posee sur le conteneur n avait qu un seul element - l enveloppe -
   et les cartes s empilaient dans la premiere colonne. La grille passe donc
   sur l enveloppe, le conteneur redevient un simple bloc. */
.e-con.e2it-points,
.e-con.e2it-volets {
	display: block;
}

.e-con.e2it-points > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e2it-espace-8) var(--e2it-espace-12);
	max-width: none;
	padding: 0;
}

.e-con.e2it-volets > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--e2it-espace-4);
	max-width: none;
	padding: 0;
}

@media (max-width: 1024px) {
	.e-con.e2it-volets > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.e-con.e2it-points > .e-con-inner,
	.e-con.e2it-volets > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

/* L accordeon heritait de la typographie globale des titres du kit Elementor
   - pres de 40 px - et placait son icone avant la question, decalee d une
   ligne. On reprend la main avec une specificite superieure a celle du kit :
   question a 18 px, icone repoussee a droite et centree verticalement. */
.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e2it-espace-4);
	padding: var(--e2it-espace-6) 0;
	font-family: var(--e2it-police);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--e2it-marine);
}

.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-title {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	order: 2;
	flex: none;
	float: none;
	width: auto;
	margin: 0;
	font-size: 14px;
	color: var(--e2it-bleu-crete);
}

.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover,
.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active {
	color: var(--e2it-bleu-profond);
}

.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-content p {
	margin: 0;
}

@media (max-width: 767px) {
	.e2it-faq .elementor-widget-accordion .elementor-accordion .elementor-tab-title {
		font-size: 16px;
		padding: var(--e2it-espace-4) 0;
	}
}

/* ------------------------------------------------------------------
   Contexte en deux colonnes, avec image

   Le site montrait peu de monde : l image est une vraie scene
   d intervention, en format 4:5 - un format vertical donne de la presence
   a une personne, un paysage montre surtout du decor.
   La tete n est pas centree ici : c est l exception assumee des sections
   en deux colonnes, deja appliquee sur l accueil.
   ------------------------------------------------------------------ */

.e-con.e2it-contexte {
	display: block;
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--e2it-gouttiere);
	box-sizing: border-box;
}

.e-con.e2it-contexte > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--e2it-espace-16);
	align-items: center;
	max-width: none;
	padding: 0;
}

.e2it-contexte__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: var(--e2it-rayon-carte);
}

/* La legende situe la photo : c est ce qui distingue une photo de chantier
   d une photo d illustration. */
.e-con .elementor-widget.e2it-contexte__image:not(:last-child) {
	margin-block-end: var(--e2it-espace-3);
}

.e2it-contexte__legende p {
	margin: 0;
}

.e2it-contexte__tete {
	text-align: left;
}

.e-con.e2it-contexte__tete {
	margin-bottom: var(--e2it-espace-8);
}

.e-con .elementor-widget.e2it-contexte__tete .e2it-tete__surtitre,
.e2it-contexte__tete .elementor-widget.e2it-tete__surtitre:not(:last-child) {
	margin-block-end: var(--e2it-espace-4);
}

.e2it-contexte__tete .elementor-widget.e2it-tete__titre:not(:last-child) {
	margin-block-end: var(--e2it-espace-6);
}

.e2it-contexte__tete p,
.e2it-contexte__tete h2 {
	margin: 0;
}

/* Les quatre points en une colonne : a cote d une image, une grille de
   deux sur deux devient etroite. */
.e-con.e2it-contexte__points {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-6);
}

/* Mobile : titre, puis image, puis points. L enveloppe du contenu s efface
   pour que ses enfants se rangent dans la grille a cote de l image. */
@media (max-width: 1024px) {
	.e-con.e2it-contexte > .e-con-inner {
		grid-template-columns: 1fr;
		gap: var(--e2it-espace-8);
	}

	.e-con.e2it-contexte__contenu {
		display: contents;
	}

	.e-con.e2it-contexte__tete {
		order: 1;
		margin-bottom: 0;
	}

	.e-con.e2it-contexte__media {
		order: 2;
	}

	.e-con.e2it-contexte__points {
		order: 3;
	}

	.e2it-contexte__image img {
		aspect-ratio: 4 / 3;
	}
}

/* LOT 2 : la section Contexte suivait sa propre regle - 32 px entre sa tete
   et ses points, la ou les autres sections en ont 48. Elle s aligne. */
.e-con.e2it-contexte__tete {
	margin-bottom: var(--e2it-espace-12);
}