/*
 * E2IT - sections de contenu.
 *
 * Duo texte / media reutilisable : accueil, pages metiers, pages d'expertise,
 * etudes de cas. L'alternance gauche / droite se fait par une classe, pas en
 * reconstruisant le bloc.
 */

.e2it-section {
	padding-block: var(--e2it-section-padding);
}

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

/* ------------------------------------------------------------------
   Surtitre numerote
   ------------------------------------------------------------------ */

.e2it-section__numero p {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-3);
	margin: 0 0 var(--e2it-espace-6);
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
}

.e2it-section__numero p::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--e2it-accent);
	flex: none;
}

/* ------------------------------------------------------------------
   Duo texte / media
   ------------------------------------------------------------------ */

.e2it-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: var(--e2it-espace-16);
	align-items: center;
}

/* Media a gauche, pour alterner d'une section a l'autre. */
.e2it-duo--media-gauche .e2it-duo__media { order: -1; }

.e2it-duo__texte {
	/* Garde-fou de mesure : au-dela de 75 caracteres la lecture decroche. */
	max-width: 65ch;
}

.e2it-duo__texte h2 {
	text-wrap: balance;
	margin: 0 0 var(--e2it-espace-6);
}

.e2it-duo__texte p {
	margin: 0 0 var(--e2it-espace-6);
}

.e2it-duo__texte p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Media
   ------------------------------------------------------------------ */

.e2it-media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--e2it-rayon-carte);
}

.e2it-media__legende p {
	margin: var(--e2it-espace-3) 0 0;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: 400;
	letter-spacing: var(--e2it-mono-interlettrage);
	line-height: 1.5;
	color: var(--e2it-texte-tertiaire);
}

/* ------------------------------------------------------------------
   Actions de section
   ------------------------------------------------------------------ */

.e2it-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-3);
	margin-top: var(--e2it-espace-8);
}

/* ------------------------------------------------------------------
   Ecrans etroits
   Le texte passe avant le media : une illustration ne doit jamais
   preceder le titre qu'elle illustre.
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.e2it-duo {
		grid-template-columns: 1fr;
		gap: var(--e2it-espace-12);
	}

	.e2it-duo--media-gauche .e2it-duo__media { order: 0; }
	.e2it-duo__texte { max-width: none; }
	.e2it-media img { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
	.e2it-section__actions { flex-direction: column; align-items: stretch; }
	.e2it-section__actions .elementor-widget-button,
	.e2it-section__actions .elementor-button { width: 100%; }
}

/* ------------------------------------------------------------------
   Apparition au defilement

   Principe de securite : c'est le script qui pose .e2it-anime--prete,
   donc l'etat masque n'existe QUE si le JavaScript s'execute. Sans lui,
   la section s'affiche telle quelle. Poser opacity: 0 dans le CSS et
   compter sur le script pour reveler laisserait une page blanche au
   moindre incident.
   ------------------------------------------------------------------ */

.e2it-anime--prete .e2it-anime__pas,
.e2it-anime--prete .e2it-anime__media {
	opacity: 0;
}

.e2it-anime--prete .e2it-anime__pas {
	transform: translateY(12px);
}

.e2it-anime--prete.est-visible .e2it-anime__pas,
.e2it-anime--prete.est-visible .e2it-anime__media {
	opacity: 1;
	transform: none;
	/* Uniquement opacity et transform : aucune propriete qui declenche
	   un recalcul de mise en page. */
	transition:
		opacity var(--e2it-duree-apparition) var(--e2it-courbe),
		transform var(--e2it-duree-apparition) var(--e2it-courbe);
}

/* Decalage dans l'ordre de lecture. Generique : chaque enfant direct
   prend son rang, quelle que soit la section. */
.e2it-anime--prete.est-visible .e2it-anime__pas:nth-child(1) { transition-delay: 0ms; }
.e2it-anime--prete.est-visible .e2it-anime__pas:nth-child(2) { transition-delay: calc(var(--e2it-decalage-apparition) * 1); }
.e2it-anime--prete.est-visible .e2it-anime__pas:nth-child(3) { transition-delay: calc(var(--e2it-decalage-apparition) * 2); }
.e2it-anime--prete.est-visible .e2it-anime__pas:nth-child(4) { transition-delay: calc(var(--e2it-decalage-apparition) * 3); }
.e2it-anime--prete.est-visible .e2it-anime__pas:nth-child(5) { transition-delay: calc(var(--e2it-decalage-apparition) * 4); }

/* Le visuel ne glisse pas : il se pose. Un cadrage qui se stabilise,
   plutot qu'un bloc qui arrive. */
.e2it-media {
	overflow: hidden;
	border-radius: var(--e2it-rayon-carte);
}

.e2it-anime--prete .e2it-media img {
	transform: scale(1.04);
}

.e2it-anime--prete.est-visible .e2it-anime__media { transition-delay: 100ms; }

.e2it-anime--prete.est-visible .e2it-media img {
	transform: none;
	transition: transform 700ms var(--e2it-courbe) 100ms;
}

/* Mouvement reduit : on affiche, sans transition. Le script s'arrete de
   lui-meme, cette regle couvre le cas d'un reglage change en cours de page. */
@media (prefers-reduced-motion: reduce) {
	.e2it-anime--prete .e2it-anime__pas,
	.e2it-anime--prete .e2it-anime__media,
	.e2it-anime--prete .e2it-media img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==================================================================
   Panneau marine
   Meme profondeur de bleu que le hero d'accueil : memes jetons de voile,
   meme mecanique de calque. Sans photo et sans motif arete.
   ================================================================== */

.e2it-section--panneau {
	/* Bandeau pleine largeur : la gouttiere passe a l'interieur du panneau. */
	padding-inline: 0;
}

.e2it-panneau {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding-block: var(--e2it-espace-16);
	padding-inline: var(--e2it-gouttiere);
	background-color: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2it-panneau::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		var(--e2it-hero-voile-1) 0%,
		var(--e2it-hero-voile-2) 32%,
		var(--e2it-hero-voile-3) 78%,
		var(--e2it-hero-voile-4) 100%
	);
	opacity: .35;
}

.e2it-panneau > * {
	position: relative;
	z-index: 1;
}

/* Le bandeau va bord a bord, le contenu reste cale sur la meme colonne
   que les sections sur fond clair. */
.e2it-panneau__interieur {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
}

/* Le surtitre numerote change de couleur sur fond sombre. */
.e2it-panneau .e2it-section__numero p { color: var(--e2it-glacier); }

/* ------------------------------------------------------------------
   En-tete a deux colonnes : titre a gauche, introduction a droite.
   Distinct de .e2it-duo, qui oppose un texte et un media.
   ------------------------------------------------------------------ */

.e2it-entete-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: var(--e2it-espace-16);
	align-items: start;
	margin-bottom: var(--e2it-espace-8);
}

.e2it-entete-duo h2 { margin: 0; text-wrap: balance; }
.e2it-entete-duo__intro p { margin: 0; max-width: 52ch; }

/* ------------------------------------------------------------------
   Cartes
   La carte entiere est cliquable : le lien du pied s'etend a tout le
   bloc par un pseudo-element. Une seule cible, une seule annonce au
   lecteur d'ecran, et une zone tactile confortable sur telephone.
   ------------------------------------------------------------------ */

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

.e2it-carte {
	position: relative;
	overflow: hidden;
	border-radius: var(--e2it-rayon-carte);
	background: var(--e2it-blanc);
	color: var(--e2it-texte);
	transition:
		transform var(--e2it-duree-moyenne) var(--e2it-courbe),
		box-shadow var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-carte:hover { transform: translateY(-2px); box-shadow: var(--e2it-eleve); }
.e2it-carte:focus-within { box-shadow: 0 0 0 3px var(--e2it-accent); }

.e2it-carte__media {
	position: relative;
	/* Le cadre visuel n'a aucune interaction propre : on laisse les clics
	   traverser jusqu'a la zone de lien qui couvre la carte. */
	pointer-events: none;
}

.e2it-carte__media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.e2it-carte__etiquette {
	position: absolute;
	top: var(--e2it-espace-4);
	left: var(--e2it-espace-4);
	z-index: 3;
	width: auto;
	pointer-events: none;
}

.e2it-carte__etiquette p {
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--e2it-rayon-champ);
	background: var(--e2it-blanc);
	color: var(--e2it-marine);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	line-height: 1;
}

.e2it-carte__corps {
	padding: var(--e2it-espace-6);
	gap: var(--e2it-espace-3);
}

.e2it-carte__titre h3 { margin: 0; color: var(--e2it-marine); }
.e2it-carte__texte p { margin: 0; }

.e2it-carte__liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-2);
}

.e2it-carte__liste li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e2it-bleu-profond);
}

.e2it-carte__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--e2it-bleu-crete);
}

.e2it-carte__pied {
	margin-top: auto;
	padding-top: var(--e2it-espace-4);
	border-top: 1px solid var(--e2it-bordure);
	align-items: center;
	justify-content: space-between;
}

/* Elementor positionne TOUS ses elements, widgets comme conteneurs.
   Sans ce retour en statique sur toute la chaine, le pseudo-element
   d'extension s'ancrerait au premier ancetre rencontre - le widget du
   lien, puis le pied de carte - au lieu de la carte entiere.
   .e2it-carte__media reste positionne : c'est lui qui cale l'etiquette. */
.e2it-carte__corps,
.e2it-carte__pied,
.e2it-carte__lien {
	position: static;
}

.e2it-carte__lien p { margin: 0; }

.e2it-carte__lien a {
	font-family: var(--e2it-police);
	font-size: var(--e2it-lien-taille);
	font-weight: var(--e2it-lien-graisse);
	color: var(--e2it-marine);
	text-decoration: none;
}

/* Le lien s'etend a toute la carte. */
.e2it-carte__lien a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.e2it-carte__fleche .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-bleu-pale);
	color: var(--e2it-marine);
	font-size: 13px;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-carte:hover .e2it-carte__fleche .elementor-icon {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

/* ------------------------------------------------------------------
   Note de rattrapage
   ------------------------------------------------------------------ */

.e2it-section__note {
	margin-top: var(--e2it-espace-8);
	text-align: center;
}

.e2it-section__note p {
	margin: 0;
	font-size: var(--e2it-corps-taille);
	color: var(--e2it-glacier);
}

.e2it-section__note a {
	color: var(--e2it-blanc);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, .5);
	padding-bottom: 2px;
	margin-left: var(--e2it-espace-2);
	transition: border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-section__note a:hover { border-bottom-color: var(--e2it-blanc); }

/* ------------------------------------------------------------------
   Ecrans etroits
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.e2it-entete-duo { grid-template-columns: 1fr; gap: var(--e2it-espace-6); }
	.e2it-entete-duo__intro p { max-width: none; }
	.e2it-cartes { grid-template-columns: 1fr; }
	.e2it-panneau { padding-block: var(--e2it-espace-16); }
}

/* ------------------------------------------------------------------
   Pied de carte : corrections

   Attention : `composants.css` definit deja un composant carte qui pose
   une fleche en `content` sur .e2it-carte__lien::after. Nos noms de
   classes le recoupent. On neutralise ici plutot que de renommer, mais
   toute reprise de ce composant doit verifier composants.css d'abord.
   ------------------------------------------------------------------ */

.e2it-carte__lien::after {
	content: none;
}

/* Elementor genere une regle de `fill` sur le SVG de l'icone, avec une
   specificite superieure a `.e2it-carte__fleche svg`. Il faut donc passer
   par la chaine complete, sinon le chevron reste marine sur un cercle
   devenu marine au survol - invisible. */
.e2it-carte .e2it-carte__fleche .elementor-icon svg {
	fill: var(--e2it-marine);
	width: 13px;
	height: 13px;
	transition: fill var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-carte:hover .e2it-carte__fleche .elementor-icon svg {
	fill: var(--e2it-blanc);
}

.e2it-carte__fleche .elementor-icon {
	color: var(--e2it-marine);
	background: var(--e2it-bleu-pale);
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		color var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-carte:hover .e2it-carte__fleche .elementor-icon {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
	transform: translateX(2px);
}

/* Le libelle se souligne au survol : l'action est portee par le texte,
   le cercle n'est qu'un rappel visuel. */
.e2it-carte:hover .e2it-carte__lien a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   Edition dans Elementor

   La carte entiere est cliquable en ligne : le cadre visuel laisse passer
   les clics et le lien du pied s'etend sur tout le bloc. Dans l'editeur,
   ces deux regles rendent l'image et le titre impossibles a selectionner -
   un clic sur la photo selectionne le widget du lien.

   On les desactive donc dans le canevas d'edition. Le comportement en ligne
   n'est pas modifie : `elementor-editor-active` n'existe que dans l'editeur.
   ------------------------------------------------------------------ */

.elementor-editor-active .e2it-carte__media {
	pointer-events: auto;
}

.elementor-editor-active .e2it-carte__lien a::after {
	display: none;
}

/* Repere visuel : dans l'editeur, le survol d'une carte ne doit pas la
   soulever, sinon la poignee de selection glisse sous le curseur. */
.elementor-editor-active .e2it-carte:hover {
	transform: none;
}

/* ------------------------------------------------------------------
   Rythme vertical entre sections

   Le composant carte gere son propre rythme dans carte-zones.css : le
   conteneur qui l'accueille ne doit rien ajouter, sinon les marges
   s'empilent (96px du conteneur + 48px du composant).
   ------------------------------------------------------------------ */

.e2it-section--carte {
	padding-block: 0;
}

/* Le bandeau marine EST la delimitation de la section : aucune marge
   exterieure, sinon une bande blanche donne l'illusion d'un bloc flottant.
   La respiration est portee par les 64px de marge interieure du panneau. */
.e2it-section--panneau {
	padding-block: 0;
}

/* ------------------------------------------------------------------
   Filigrane de marque

   La montagne du logo, isolee et en aplat monochrome, sert de motif
   decoratif. Ce n'est PAS le logo : la charte interdit de le recolorer
   ou d'en isoler un fragment. C'est un element distinct, avec ses
   propres regles - une seule teinte, jamais porteur d'information,
   jamais a proximite du vrai logo.

   ATTENTION : on utilise ::after, pas ::before. Elementor pose sa
   superposition de fond sur le ::before de ses conteneurs, avec un
   inset: 0 - le filigrane en heritait et se retrouvait etire sur toute
   la hauteur de la section. Les reinitialisations explicites de top,
   left et height ci-dessous protegent du meme accident sur ::after.

   Pose en masque CSS et non en image de fond : la teinte reste pilotee
   par les jetons, un seul fichier sert toutes les variantes.
   ------------------------------------------------------------------ */

.e2it-section--filigrane {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.e2it-section--filigrane::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;

	/* Ancrage bas-droite. top et left explicitement relaches : sans cela,
	   une regle heritee suffirait a etirer la boite. */
	top: auto;
	left: auto;
	right: -40px;
	bottom: -64px;

	width: clamp(320px, 42vw, 700px);
	height: auto;
	aspect-ratio: 1324 / 528;

	background-color: var(--e2it-bleu-pale);
	-webkit-mask-image: url("motif-montagne.png");
	mask-image: url("motif-montagne.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Variante : motif a gauche, pour alterner d'une section a l'autre. */
.e2it-section--filigrane-gauche::after {
	right: auto;
	left: -56px;
}

/* Variante : motif en haut. */
.e2it-section--filigrane-haut::after {
	bottom: auto;
	top: -64px;
}

/* Sur telephone, le motif passerait sous le texte : on le reduit et on
   le repousse dans l'angle. */
@media (max-width: 767px) {
	.e2it-section--filigrane::after {
		width: 62vw;
		right: -24px;
		bottom: -32px;
	}

	.e2it-section--filigrane-gauche::after { left: -32px; right: auto; }
}

/* Un filigrane n'a aucun sens sur une feuille imprimee. */
@media print {
	.e2it-section--filigrane::after { display: none; }
}

/* ------------------------------------------------------------------
   Section a fond photo
   Meme mecanique que le hero : image de fond choisie au panneau, degrade
   marine par-dessus. Les memes variables sont utilisees, donc les curseurs
   E2IT du panneau pilotent aussi cette section.
   ------------------------------------------------------------------ */

/* La superposition d arriere-plan d Elementor sert de voile sur cette
   section : son opacite se regle au panneau. Aucun degrade n est pose ici,
   les deux se disputeraient le meme pseudo-element ::before. */
.e2it-section--photo {
	position: relative;
	isolation: isolate;
	background-size: cover;
	background-position: center;
	color: var(--e2it-blanc);
}

/* Filigrane sur fond photo : le motif se detache moins qu il ne le ferait
   sur un fond clair, on le reduit et on l eclaircit fortement. */
.e2it-section--photo.e2it-section--filigrane::after,
.e2it-section--sombre.e2it-section--filigrane::after {
	/* Bas a droite : la section precedente porte deja son motif en haut a
	   gauche, et cette zone est la seule vraiment libre une fois le titre,
	   les trois cartes et le bouton centre places. */
	width: clamp(280px, 32vw, 560px);
	right: -56px;
	bottom: -48px;
	top: auto;
	left: auto;
	background-color: var(--e2it-glacier);
	/* .10 disparaissait sur le marine ; une photo de fond l attenuera encore. */
	opacity: .16;
}

@media (max-width: 1024px) {
	.e2it-section--photo.e2it-section--filigrane::after,
.e2it-section--sombre.e2it-section--filigrane::after {
		width: 52vw;
		right: -32px;
		bottom: -32px;
		top: auto;
	}
}

/* ------------------------------------------------------------------
   Motif reseau

   Une source, des departs, des sites : le schema de distribution dit le
   metier et le sujet de la section a la fois. Trace en SVG encode dans le
   CSS, donc sans fichier ni requete, et net a toute taille.
   ------------------------------------------------------------------ */

.e2it-section--motif-reseau.e2it-section--filigrane::after {
	aspect-ratio: 260 / 170;
	width: clamp(240px, 28vw, 420px);
	/* Bas a gauche : le bouton de la section occupe le bas a droite, et le
	   motif passait derriere lui. */
	left: -28px;
	bottom: -20px;
	top: auto;
	right: auto;
	background-color: var(--e2it-glacier);
	opacity: .12;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20260%20170%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M8%2085%20H62%22/%3E%3Cpath%20d=%22M62%2085%20V26%20H118%22/%3E%3Cpath%20d=%22M62%2085%20H118%22/%3E%3Cpath%20d=%22M62%2085%20V144%20H118%22/%3E%3Cpath%20d=%22M118%2026%20H160%22/%3E%3Cpath%20d=%22M118%2085%20H160%22/%3E%3Cpath%20d=%22M118%20144%20H160%22/%3E%3Cpath%20d=%22M160%2026%20V8%20H212%22/%3E%3Cpath%20d=%22M160%2026%20V44%20H212%22/%3E%3Cpath%20d=%22M160%2085%20V67%20H212%22/%3E%3Cpath%20d=%22M160%2085%20V103%20H212%22/%3E%3Cpath%20d=%22M160%20144%20V126%20H212%22/%3E%3Cpath%20d=%22M160%20144%20V162%20H212%22/%3E%3C/g%3E%3Cg%20fill=%22%23000%22%3E%3Ccircle%20cx=%228%22%20cy=%2285%22%20r=%226.5%22/%3E%3Ccircle%20cx=%22212%22%20cy=%228%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%2244%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%2267%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22103%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22126%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22162%22%20r=%224%22/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20260%20170%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M8%2085%20H62%22/%3E%3Cpath%20d=%22M62%2085%20V26%20H118%22/%3E%3Cpath%20d=%22M62%2085%20H118%22/%3E%3Cpath%20d=%22M62%2085%20V144%20H118%22/%3E%3Cpath%20d=%22M118%2026%20H160%22/%3E%3Cpath%20d=%22M118%2085%20H160%22/%3E%3Cpath%20d=%22M118%20144%20H160%22/%3E%3Cpath%20d=%22M160%2026%20V8%20H212%22/%3E%3Cpath%20d=%22M160%2026%20V44%20H212%22/%3E%3Cpath%20d=%22M160%2085%20V67%20H212%22/%3E%3Cpath%20d=%22M160%2085%20V103%20H212%22/%3E%3Cpath%20d=%22M160%20144%20V126%20H212%22/%3E%3Cpath%20d=%22M160%20144%20V162%20H212%22/%3E%3C/g%3E%3Cg%20fill=%22%23000%22%3E%3Ccircle%20cx=%228%22%20cy=%2285%22%20r=%226.5%22/%3E%3Ccircle%20cx=%22212%22%20cy=%228%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%2244%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%2267%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22103%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22126%22%20r=%224%22/%3E%3Ccircle%20cx=%22212%22%20cy=%22162%22%20r=%224%22/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.e2it-section--motif-reseau.e2it-section--filigrane::after {
		width: 62vw;
		left: -18px;
		right: auto;
	}
}


/* ==================================================================
   Tete de section

   Surtitre mono, titre, chapo. Le rythme vient des trois jetons et de
   nulle part ailleurs : les ecarts de conteneur Elementor sont mis a
   zero sur les tetes, et les marges internes des composants voisins
   sont neutralisees ci-dessous.

   Avant cette convention, la meme relation surtitre-titre valait 16,
   24, 38 ou 48 px selon la section - trois sources se superposaient,
   la marge du surtitre, l ecart de conteneur herite du kit, et une
   marge negative posee a la main pour compenser les deux.
   ================================================================== */

.e2it-tete {
	margin-bottom: var(--e2it-tete-bloc);
}

/* Quatre unites de specificite, et non une : Elementor charge
   .e-con .elementor-widget.elementor-widget { margin-block-end: 0 }
   pour imposer son modele ou l ecart vient du gap du conteneur. Toute
   marge posee sur une enveloppe de widget avec un simple selecteur de
   classe est donc annulee sans trace. C est la regle a connaitre avant
   d ecrire une marge sur un widget dans ce projet. */
.e-con .elementor-widget.e2it-tete__surtitre:not(:last-child) {
	margin-block-end: var(--e2it-tete-surtitre);
}

.e-con .elementor-widget.e2it-tete__titre:not(:last-child) {
	margin-block-end: var(--e2it-tete-titre);
}

.e-con .elementor-widget.e2it-tete__intro {
	margin-block-end: 0;
}

/* Neutralisation des marges internes : le rythme est porte par les
   enveloppes de widget, pas par les balises qu elles contiennent. */
.e2it-tete__surtitre p,
.e2it-tete__titre :is(h1, h2, h3),
.e2it-tete__intro p:last-child {
	margin: 0;
}

/* Une tete reduite au surtitre et au titre ne traine pas de marge morte. */
.e2it-tete__surtitre:last-child,
.e2it-tete__titre:last-child {
	margin-bottom: 0;
}

/* Tetes a deux colonnes - Nos metiers, Nos clients. Le titre et le chapo
   sont cote a cote : seul l ecart avec le contenu reste a regler, et il
   prend la meme valeur que partout ailleurs. */
.e2it-entete-duo {
	margin-bottom: var(--e2it-tete-bloc);
}

/* Bouton place en fin de section, sous le contenu : l ecart de conteneur
   etant mis a zero pour la tete, il porte le sien.
   Selecteur de descendance et non d enfant direct : un conteneur Elementor
   en mode boite interpose un .e-con-inner entre la section et ses widgets,
   et la regle ne s appliquait donc jamais. Deux niveaux, pas de descendance :
   les boutons ranges dans un .e2it-section__actions ont deja leur propre
   ecart et recevaient sinon les deux. */
.e2it-section__interieur > .elementor-widget-button,
.e2it-section__interieur > .e-con-inner > .elementor-widget-button {
	margin-top: var(--e2it-espace-8);
}

/* Sur mobile les cartes s empilent : le bouton a besoin d etre clairement
   detache du dernier element de la pile, pas seulement pose dessous. */
@media (max-width: 767px) {
	.e2it-section__interieur > .elementor-widget-button,
	.e2it-section__interieur > .e-con-inner > .elementor-widget-button {
		margin-top: var(--e2it-espace-12);
	}
}

/* Tete de la section Clients : l ecart de son conteneur est mis a zero
   au panneau, elle porte donc l ecart de bloc en entier - comme les
   autres tetes, et sans dependre d une valeur par defaut d Elementor. */
.e2it-clients__tete {
	margin-block-end: var(--e2it-tete-bloc);
}

/* La tete porte deja l ecart de bloc : le conteneur des boutons qui la
   suit n ajoute pas le sien. Sans cette remise a zero, la section 01
   comptait 80 px avant ses boutons, contre 48 partout ailleurs. */
.e2it-tete + .e2it-section__actions {
	margin-top: 0;
}


/* Tete centree. Le chapo reçoit une largeur de lecture : un paragraphe
   centre sur 1192 px se lit mal, l oeil perd le debut de ligne. */

/* Le surtitre est un conteneur flexible : son filet de 28 px le tient a
   gauche et text-align n a aucun effet dessus. Il faut donc centrer le flux,
   et doubler le filet a droite pour que le motif reste symetrique. */
.e2it-tete--centree {
	text-align: center;
}

.e2it-tete--centree .e2it-tete__intro {
	max-width: 62ch;
	margin-inline: auto;
}

.e2it-tete--centree .e2it-section__numero p {
	justify-content: center;
}

.e2it-tete--centree .e2it-section__numero p::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--e2it-accent);
	flex: none;
}

/* ==================================================================
   Animations - vocabulaire etendu

   Complete l apparition par pas ci-dessus avec quatre mouvements :
   - serie : elements d une grille ou d une liste, en cascade
   - fondu : blocs deja en mouvement (defiles), opacite seule
   - fin : l action de la section, toujours en dernier
   - filet : le trait des surtitres numerotes se trace

   Animations a remplissage "backwards" : l etat de depart s applique
   pendant le delai, puis l element rend la main a ses propres styles.
   Les survols (carte soulevee, photo zoomee) restent donc intacts une
   fois l entree jouee.

   Les classes sont posees par animations.js : sans script, rien n est
   masque.
   ================================================================== */

@keyframes e2it-apparition {
	from { opacity: 0; transform: translateY(var(--e2it-amplitude)); }
}

@keyframes e2it-apparition-laterale {
	from { opacity: 0; transform: translateX(var(--e2it-amplitude-laterale)); }
}

@keyframes e2it-fondu {
	from { opacity: 0; }
}

@keyframes e2it-pose {
	from { transform: scale(1.04); }
}

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

/* Etat d attente, avant l entree dans l ecran. */
.e2it-anime--prete:not(.est-visible) :is(.e2it-anime__item, .e2it-anime__fondu, .e2it-anime__fin) {
	opacity: 0;
}

/* Serie : depart apres l en-tete de section, 80 ms entre deux elements,
   six rangs au plus pour que la derniere carte n attende pas. */
.e2it-anime--prete.est-visible .e2it-anime__item {
	animation: e2it-apparition var(--e2it-duree-apparition) var(--e2it-courbe) backwards;
	animation-delay: calc(var(--e2it-depart-serie) + var(--e2it-rang, 0) * var(--e2it-decalage-serie));
}

/* Rail horizontal : les cartes arrivent dans le sens de lecture du rail. */
.e2it-anime--prete.est-visible .e2it-anime__item--lateral {
	animation-name: e2it-apparition-laterale;
}

/* La photo d une carte se pose en meme temps que la carte arrive. */
.e2it-anime--prete.est-visible .e2it-anime__item img {
	animation: e2it-pose 700ms var(--e2it-courbe) backwards;
	animation-delay: calc(var(--e2it-depart-serie) + var(--e2it-rang, 0) * var(--e2it-decalage-serie));
}

/* Fondu : pour ce qui bouge deja, une montee s ajouterait au defilement. */
.e2it-anime--prete.est-visible .e2it-anime__fondu {
	animation: e2it-fondu var(--e2it-duree-fondu) var(--e2it-courbe) backwards;
	animation-delay: calc(var(--e2it-depart-serie) + var(--e2it-rang, 0) * var(--e2it-decalage-serie));
}

/* Fin : le bouton ou la note arrive apres le contenu qu il conclut. */
.e2it-anime--prete.est-visible .e2it-anime__fin {
	animation: e2it-apparition var(--e2it-duree-apparition) var(--e2it-courbe) backwards;
	animation-delay: calc(var(--e2it-depart-serie) + 6 * var(--e2it-decalage-serie));
}

/* Filets : le trait accent du surtitre se trace, en echo au filet du
   hero. Aligne a gauche, il part de la marge ; centre, les deux traits
   partent du texte vers l exterieur. */
.e2it-section__numero p::before,
.e2it-equipe__filet,
.e2it-clients__filet {
	transform-origin: left center;
}

.e2it-tete--centree .e2it-section__numero p::before {
	transform-origin: right center;
}

.e2it-tete--centree .e2it-section__numero p::after {
	transform-origin: left center;
}

.e2it-anime--prete:not(.est-visible) .e2it-section__numero p::before,
.e2it-anime--prete:not(.est-visible) .e2it-section__numero p::after,
.e2it-anime--prete:not(.est-visible) .e2it-equipe__filet,
.e2it-anime--prete:not(.est-visible) .e2it-clients__filet {
	transform: scaleX(0);
}

.e2it-anime--prete.est-visible .e2it-section__numero p::before,
.e2it-anime--prete.est-visible .e2it-section__numero p::after,
.e2it-anime--prete.est-visible .e2it-equipe__filet,
.e2it-anime--prete.est-visible .e2it-clients__filet {
	animation: e2it-filet var(--e2it-duree-filet) var(--e2it-courbe) 120ms backwards;
}

@media (prefers-reduced-motion: reduce) {
	.e2it-anime--prete :is(.e2it-anime__item, .e2it-anime__fondu, .e2it-anime__fin, .e2it-anime__item img, .e2it-equipe__filet, .e2it-clients__filet),
	.e2it-anime--prete .e2it-section__numero p::before,
	.e2it-anime--prete .e2it-section__numero p::after {
		opacity: 1;
		transform: none;
		animation: none;
	}
}
/* ------------------------------------------------------------------
   Gras dans les textes de section
   Reperes de lecture en diagonale : un passage par paragraphe au plus.
   La couleur accompagne la graisse, marine sur fond clair, blanc sur
   fond sombre, pour que l ecart se voie aussi au coup d oeil.
   ------------------------------------------------------------------ */
.elementor-widget-text-editor strong,
.e2it-equipe__intro strong,
.e2itz-carte__intro strong {
	font-weight: 600;
	color: var(--e2it-marine);
}

:is(.e2it-hero, .e2it-marine, .e2it-section--sombre, .e2it-section--photo, .e2it-panneau, .e2it-formation) .elementor-widget-text-editor strong {
	color: var(--e2it-blanc);
}
/* ==================================================================
   Charte des en-tetes de section, portee par le theme

   Les couleurs et le rythme ne dependent plus des reglages du panneau :
   toute section montee avec les classes du site est juste d office.

   Fond clair  : surtitre gris, titre marine, introduction gris secondaire.
   Fond sombre : surtitre glacier, titre blanc, introduction bleu clair.
   Le filet du surtitre reste en bleu arc partout.
   ================================================================== */

/* Surtitre numerote : meme rendu mono, qu il soit monte en widget Texte
   ou en widget Titre (Elementor applique sinon la taille des titres). */
.e2it-section__numero :is(p, .elementor-heading-title):not(#e2it) {
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	font-stretch: 100%;
	line-height: var(--e2it-mono-interligne);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
}

.e2it-tete__titre .elementor-heading-title:not(#e2it) {
	color: var(--e2it-marine);
}

.e2it-tete__intro p:not(#e2it) {
	color: var(--e2it-texte-secondaire);
}

:is(.e2it-hero, .e2it-section--photo, .e2it-section--sombre, .e2it-panneau, .e2it-formation) .e2it-section__numero :is(p, .elementor-heading-title):not(#e2it) {
	color: var(--e2it-glacier);
}

:is(.e2it-hero, .e2it-section--photo, .e2it-section--sombre, .e2it-panneau, .e2it-formation) .e2it-tete__titre .elementor-heading-title:not(#e2it) {
	color: var(--e2it-blanc);
}

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

/* Rythme : les conteneurs d en-tete et d interieur de section n ajoutent
   ni espacement ni marge Elementor. Les ecarts viennent des jetons :
   surtitre -> titre, titre -> introduction, et la marge basse de
   l en-tete pour l ecart avec le contenu. */
.e2it-tete.e-con:not(#e2it),
.e2it-section__interieur.e-con:not(#e2it) {
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.e2it-tete.e-con:not(#e2it) {
	padding-left: 0;
	padding-right: 0;
}



/* Note de rattrapage sur mobile : 15 px, le lien ne se coupe jamais. A
   17 px, la phrase passait sur deux lignes et isolait « Parlons-en ». */
.e2it-section__note a {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.e2it-section__note p:not(#e2it) {
		font-size: 15px;
		line-height: 1.5;
	}

	.e2it-section__note a {
		margin-left: 4px;
	}
}

/* Accueil, photo de l equipe (section 01) : cadre vertical sur ordinateur,
   on ne voit que 42 % de la largeur. Point focal decale a gauche pour
   garder le president dans le cadre ; la photo entiere s ouvre avec le
   bouton « Voir toute l equipe ». */
.elementor-element-s01img img:not(#e2it) {
	object-position: 30% 50%;
}

/* Mobile : cadrage centre sur l equipe (le decalage a gauche ne sert que
   sur ordinateur, ou le cadre est vertical et etroit). */
@media (max-width: 767px) {
	.elementor-element-s01img img:not(#e2it) {
		object-position: 50% 50%;
	}
}