/*
 * E2IT - appel a l action de fin de page et pied de site.
 *
 * Un seul conteneur, un seul degrade : il traverse le CTA et le pied. Le
 * #05152F final est plus sombre que le marine de la charte, il ferme la page.
 */

.e2it-pied {
	position: relative;
	overflow: hidden;
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

/* La photo couvre desormais tout le pied. Le voile ci-dessous porte seul la
   lisibilite : il n y a plus de raison de couper la photo a mi-hauteur. */
.e2it-pied .e2it-pied__photo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

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

.e2it-pied__voile {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Le voile finissait sur un aplat opaque : la photo, maintenant pleine
   hauteur, aurait disparu sous la moitie basse. Les arrets restent assez
   denses pour que le texte blanc garde son contraste. */
.e2it-pied__voile {
	background: linear-gradient(to bottom, rgba(11,46,94,.78) 0%, rgba(7,28,62,.88) 46%, rgba(5,21,47,.93) 100%);
}

.e2it-pied__cta,
.e2it-pied__bas {
	position: relative;
	z-index: 2;
}

.e2it-pied__interieur {
	max-width: var(--e2it-largeur-contenu, 1240px);
	margin: 0 auto;
	padding-inline: 40px;
}

/* ---- Appel a l action ---- */
/* 72/64 plutot que 96/88 : le pied faisait 1244 px de haut, soit un ecran
   entier a lui seul. */
.e2it-pied__cta { padding: 72px 0 64px; }

.e2it-pied__cta-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
	gap: 64px;
	align-items: center;
}

.e2it-pied__cta-texte,
.e2it-pied__interlocuteur,
.e2it-pied__actions,
.e2it-pied__colonne,
.e2it-pied__identite,
.e2it-pied__legal { pointer-events: auto; }

.e2it-pied__surtitre {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--e2it-espace-4);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-pied__filet {
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--e2it-accent);
}

.e2it-pied__pastille {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e2it-accent);
}

.e2it-pied__surtitre--pastille { color: var(--e2it-blanc); }

.e2it-pied__titre {
	margin: 0 0 var(--e2it-espace-4);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.032em;
	color: var(--e2it-blanc);
	text-wrap: balance;
}

.e2it-pied__intro {
	max-width: 520px;
	margin: 0 0 var(--e2it-espace-6);
	font-size: 18px;
	line-height: 1.62;
	color: var(--e2it-bleu-clair);
}

.e2it-pied__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Le survol fait glisser un degrade, sans decaler le contenu. */
.e2it-bouton--accent {
	color: var(--e2it-blanc);
	background-image: linear-gradient(to bottom, var(--e2it-accent-fond) 0%, var(--e2it-accent-fond) 50%, var(--e2it-marine-fonce) 100%);
	background-size: 100% 200%;
	background-position: 0 0;
	border: none;
	transition: background-position .3s cubic-bezier(.22,.61,.36,1);
}

.e2it-bouton--accent:hover { background-position: 0 100%; color: var(--e2it-blanc); }

.e2it-bouton--clair {
	color: var(--e2it-blanc);
	background-image: linear-gradient(to top, var(--e2it-blanc) 0%, var(--e2it-blanc) 50%, transparent 50%, transparent 100%);
	background-size: 100% 200%;
	background-position: 0 0;
	background-color: transparent;
	border: 1.5px solid rgba(169,196,229,.55);
	transition: background-position .3s cubic-bezier(.22,.61,.36,1), color .3s ease, border-color .3s ease;
}

.e2it-bouton--clair:hover {
	background-position: 0 100%;
	color: var(--e2it-marine);
	border-color: var(--e2it-blanc);
}

/* ---- Carte interlocuteur ---- */
.e2it-pied__interlocuteur {
	background: rgba(7,28,62,.62);
	border: 1px solid rgba(169,196,229,.3);
	border-radius: var(--e2it-rayon-carte);
	padding: 34px 36px;
}

.e2it-pied__int-nom { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.e2it-pied__int-fonction { margin: 0 0 var(--e2it-espace-4); font-size: 15px; color: var(--e2it-bleu-clair); }

.e2it-pied__tel { margin: 0 0 var(--e2it-espace-4); }
.e2it-pied__tel a {
	font-family: var(--e2it-police-mono);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: .04em;
	white-space: nowrap;
	color: var(--e2it-blanc);
	text-decoration: none;
}

.e2it-pied__int-phrase { margin: 0; font-size: 15px; line-height: 1.5; color: var(--e2it-bleu-clair); }

/* ---- Pied de site ---- */
/* Un seul filet separe les deux blocs : pas de changement de fond. */
.e2it-pied--avec-cta .e2it-pied__bas { border-top: 1px solid rgba(169,196,229,.24); }

.e2it-pied__bas { padding-top: 56px; }

.e2it-pied__grille {
	display: grid;
	/* Le nombre de colonnes vient du menu de pied : il suivra tout ajout de
	   rubrique sans retouche du style. */
	grid-template-columns: 1.1fr repeat(var(--e2it-pied-colonnes, 3), minmax(0, 1fr));
	/* Trois colonnes de liens au lieu de cinq : 48 px les separent sans que
	   les libelles passent a la ligne. */
	gap: 48px;
	align-items: start;
}

/* Logo du bloc identite. Le prefixe .e2it-pied__logos de la bande d engagements
   ne doit surtout pas s appliquer ici : c est un autre objet, qui porte la meme
   classe. Scope explicite sur .e2it-pied__identite. */
.e2it-pied__identite .e2it-pied__logo { width: 104px; height: auto; display: block; margin-bottom: var(--e2it-espace-4); }
.e2it-pied__positionnement { margin: 0 0 var(--e2it-espace-6); font-size: 15px; line-height: 1.6; color: var(--e2it-bleu-clair); }

/* Intitules en blanc : a 10 px le glacier ne tient pas le AA. */
.e2it-pied__etiquette-mono {
	margin: 0 0 var(--e2it-espace-3);
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e2it-blanc);
}

.e2it-pied__adresse { margin: 0 0 var(--e2it-espace-6); font-style: normal; font-size: 15px; line-height: 1.6; color: var(--e2it-blanc); }

.e2it-pied__qualifs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.e2it-pied__qualifs li {
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e2it-blanc);
	border: 1px solid rgba(169,196,229,.4);
	border-radius: var(--e2it-rayon-pilule);
	padding: 7px 13px;
}

.e2it-pied__colonne ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.e2it-pied__colonne a {
	font-size: 15px;
	line-height: 1.4;
	color: var(--e2it-bleu-clair);
	text-decoration: none;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-pied__colonne a:hover { color: var(--e2it-blanc); }

/* ---- Barre legale ---- */
.e2it-pied__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e2it-espace-6);
	flex-wrap: wrap;
	margin-top: var(--e2it-espace-8);
	padding-block: 26px 30px;
	border-top: 1px solid rgba(169,196,229,.2);
}

.e2it-pied__copyright {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--e2it-glacier);
}

.e2it-pied__legal-liens ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.e2it-pied__legal-liens a {
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e2it-bleu-clair);
	text-decoration: none;
}

.e2it-pied__legal-liens a:hover { color: var(--e2it-blanc); }

/* ---- Focus ---- */
.e2it-pied a:focus-visible,
.e2it-pied button:focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
}

/* ---- Mobile ---- */
@media (max-width: 1024px) {
	
	.e2it-pied__interieur { padding-inline: 20px; }
	.e2it-pied__cta { padding: 56px 0 48px; }
	.e2it-pied__cta-grille { grid-template-columns: 1fr; gap: var(--e2it-espace-6); }
	.e2it-pied__titre { font-size: 30px; }
	.e2it-pied__intro { font-size: 16px; max-width: none; }
	/* Les deux boutons s empilent en pleine largeur. */
	.e2it-pied__actions { flex-direction: column; gap: 10px; }
	.e2it-pied__actions .e2it-bouton { justify-content: center; }
	.e2it-pied__interlocuteur { padding: 24px 22px; }
	.e2it-pied__int-nom { font-size: 20px; }
	.e2it-pied__tel a { font-size: 22px; }
	/* Deux colonnes tant que la largeur le permet : les libelles de liens sont
	   courts, et quinze liens empiles faisaient un pied de plus de deux ecrans. */
	.e2it-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e2it-espace-6); }
	.e2it-pied__identite { grid-column: 1 / -1; }
	.e2it-pied__identite { margin-bottom: var(--e2it-espace-6); }

	/* Meme espace que celui qui separe les groupes de liens : une seule regle
	   de rythme pour tout le pied. */
	.e2it-pied__identite .e2it-pied__etiquette-mono { margin-top: var(--e2it-espace-6); }
	/* Chaque groupe precede de son filet. Pas d accordeon : avec quinze liens,
	   le deroulement coute plus qu il ne fait gagner.
	   Le rythme passe par un padding et non une marge : la grille en une
	   colonne annule les marges via son gap, et les filets se collaient au
	   lien precedent. */
	.e2it-pied__colonne {
		border-top: 1px solid rgba(169,196,229,.24);
		padding-block: var(--e2it-espace-6) var(--e2it-espace-6);
		margin-bottom: 0;
	}

	/* L intitule respire sous son filet. */
	.e2it-pied__colonne .e2it-pied__etiquette-mono { margin-bottom: var(--e2it-espace-4); }

	/* Colonne d un seul lien, dont le libelle repete l intitule : ni filet ni
	   intitule, elles se lisent comme une paire de liens. */
	.e2it-pied__colonne--simple {
		border-top: 0;
		padding-block: 0 var(--e2it-espace-3);
	}

	.e2it-pied__colonne--simple + .e2it-pied__colonne:not(.e2it-pied__colonne--simple) { padding-top: var(--e2it-espace-6); }
	.e2it-pied__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--e2it-espace-4);
		margin-top: var(--e2it-espace-6);
	}
	.e2it-pied__legal-liens { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
	.e2it-bouton--accent, .e2it-bouton--clair, .e2it-pied__colonne a { transition: none; }
}


/* ------------------------------------------------------------------
   Engagements locaux

   Tuile blanche identique pour tous, et non alignement par la hauteur :
   quatre des cinq logos sont des ecussons circulaires, qui ne faisaient
   que 24 a 41 px de large a 34 px de haut - un point colore, pas un logo
   identifiable. La tuile double la surface utile et regularise le rythme
   de la rangee, quel que soit le format du logo fourni.

   Bande fixe et non defilement continu : avec cinq a huit logos, une
   animation permanente en bas de page ne servirait qu a masquer qu il n y
   en a pas assez pour la justifier.

   Les logos gardent leurs couleurs - decision client, assumee contre la
   regle de charte qui reserve la couleur au bleu. Le blanc reste cantonne
   aux tuiles, il ne devient pas une couleur de la page.
   ------------------------------------------------------------------ */

.e2it-pied__engagements {
	position: relative;
	border-top: 1px solid rgba(169, 196, 229, .18);
	padding: var(--e2it-espace-8) 0;
}

.e2it-pied__engagements-texte {
	margin: var(--e2it-espace-2) 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--e2it-bleu-clair);
	max-width: 60ch;
}

.e2it-pied__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e2it-espace-4);
	margin: var(--e2it-espace-6) 0 0;
	padding: 0;
	list-style: none;
}

.e2it-pied__logos .e2it-pied__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 76px;
	background: var(--e2it-blanc);
	border-radius: 10px;
	transition:
		transform var(--e2it-duree-rapide) var(--e2it-courbe),
		box-shadow var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-pied__logos .e2it-pied__logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* contain et non cover : un ecusson remplit la hauteur, un logo horizontal
   la largeur, et tous deux occupent la meme surface visuelle. */
.e2it-pied__logos .e2it-pied__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 52px;
	max-width: 108px;
	object-fit: contain;
}

.e2it-pied__logos .e2it-pied__logo:hover {
	transform: translateY(-2px);
	box-shadow: var(--e2it-eleve);
}

.e2it-pied__logos .e2it-pied__logo:focus-within {
	box-shadow: 0 0 0 3px var(--e2it-accent);
}

/* Exception : un logo deja clair se lit seul sur le marine, la tuile ne lui
   apporterait rien. Case a cocher sur la fiche de l engagement. */
.e2it-pied__logos .e2it-pied__logo--clair {
	background: none;
	width: auto;
	height: 76px;
	padding: 0 var(--e2it-espace-2);
}

.e2it-pied__logos .e2it-pied__logo--clair img {
	max-height: 56px;
	max-width: 132px;
}

@media (max-width: 767px) {
	.e2it-pied__logos {
		gap: var(--e2it-espace-3);
		justify-content: center;
	}

	.e2it-pied__logos .e2it-pied__logo {
		width: 104px;
		height: 60px;
	}

	.e2it-pied__logos .e2it-pied__logo img {
		max-height: 40px;
		max-width: 84px;
	}

	.e2it-pied__logos .e2it-pied__logo--clair {
		width: auto;
		height: 60px;
	}

	.e2it-pied__logos .e2it-pied__logo--clair img {
		max-height: 44px;
		max-width: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-pied__logos .e2it-pied__logo { transition: none; }
	.e2it-pied__logos .e2it-pied__logo:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Pied - finitions
   ------------------------------------------------------------------ */

/* Sous 560 px, deux colonnes de liens deviennent illisibles. */
@media (max-width: 560px) {
	.e2it-pied__grille {
		grid-template-columns: 1fr;
	}
}

/* Anneau de focus homogene sur tous les liens du pied. */
.e2it-pied a:focus-visible {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------
   Documents administratifs

   Une ligne distincte de la barre legale : un service achats cherche le
   Kbis et les attestations, pas la politique de confidentialite.
   ------------------------------------------------------------------ */

.e2it-pied__documents {
	position: relative;
	border-top: 1px solid rgba(169, 196, 229, .18);
	padding: var(--e2it-espace-6) 0;
}

.e2it-pied__docs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-3) var(--e2it-espace-8);
	margin: var(--e2it-espace-4) 0 0;
	padding: 0;
	list-style: none;
}

.e2it-pied__docs a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--e2it-espace-2);
	font-size: 14px;
	color: var(--e2it-bleu-clair);
	text-decoration: none;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-pied__docs a:hover {
	color: var(--e2it-blanc);
}

/* Le poids est annonce : 5,8 Mo se telechargent sans prevenir sur un mobile
   en 4G si rien ne l indique. */
.e2it-pied__doc-poids {
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

@media (max-width: 767px) {
	.e2it-pied__docs {
		flex-direction: column;
		gap: var(--e2it-espace-3);
	}
}

/* ------------------------------------------------------------------
   Engagements sur ordinateur : une seule rangee

   Les tuiles se partagent la largeur a parts egales au lieu d avoir une
   largeur fixe : la rangee tient sur une ligne quel que soit le nombre
   d engagements publies, et s etend jusqu au bord droit du pied au lieu
   de s arreter en cours de ligne. Sur tablette et mobile, le retour a la
   ligne reste la regle.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.e2it-pied__logos {
		flex-wrap: nowrap;
	}

	.e2it-pied__logos .e2it-pied__logo,
	.e2it-pied__logos .e2it-pied__logo--clair {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 180px;
	}

	.e2it-pied__logos .e2it-pied__logo img {
		max-width: 80%;
	}
}