/*
 * E2IT - composants de la charte.
 * Transposition en classes des composants documentes dans les fichiers de projet.
 * Aucune valeur en dur : tout vient de tokens.css.
 */

/* ------------------------------------------------------------------
   Boutons - hauteur 48px, rayon plein
   ------------------------------------------------------------------ */

.e2it-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2it-espace-2);
	min-height: 48px;
	padding: 0 28px;
	font-family: var(--e2it-police);
	font-size: var(--e2it-bouton-taille);
	font-weight: var(--e2it-bouton-graisse);
	line-height: 1;
	text-decoration: none;
	border: none;
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	/* Uniquement des proprietes qui ne declenchent pas de recalcul de mise en
	   page : transform, opacity, couleurs et ombres. Ni width, ni padding,
	   ni border-width, qui feraient vibrer le texte. */
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		color var(--e2it-duree-rapide) var(--e2it-courbe),
		box-shadow var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

/* Micro-elevation au survol, enfoncement a l appui. */
.e2it-bouton:hover {
	transform: translateY(-1px);
	box-shadow: var(--e2it-eleve);
}

.e2it-bouton:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 60ms;
}

/* Le focus clavier reste instantane : une apparition progressive donnerait
   une impression de latence a la navigation au clavier. */
.e2it-bouton:focus-visible {
	transition: none;
}

.e2it-bouton--principal {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2it-bouton--principal:hover {
	background: var(--e2it-marine-fonce);
	color: var(--e2it-blanc);
}

.e2it-bouton--secondaire {
	background: transparent;
	color: var(--e2it-marine);
	border: 1.5px solid var(--e2it-marine);
	padding: 0 26px;
}

.e2it-bouton--secondaire:hover {
	background: var(--e2it-bleu-pale);
	color: var(--e2it-marine);
	/* Epaississement apparent du contour sans toucher a border-width,
	   qui decalerait le contenu d un pixel. */
	box-shadow: inset 0 0 0 1px var(--e2it-marine), var(--e2it-eleve);
}

/* Un seul par ecran. Fond #1668C6 pour tenir le contraste AA. */
.e2it-bouton--accent {
	background: var(--e2it-accent-fond);
	color: var(--e2it-blanc);
	white-space: nowrap;
}

.e2it-bouton--accent:hover {
	background: var(--e2it-bleu-profond);
	color: var(--e2it-blanc);
}

.e2it-bouton--pleine { width: 100%; }

/* ------------------------------------------------------------------
   Etiquettes
   ------------------------------------------------------------------ */

.e2it-etiquette {
	display: inline-block;
	padding: 7px 14px;
	font-size: var(--e2it-etiquette-taille);
	font-weight: var(--e2it-etiquette-graisse);
	line-height: var(--e2it-etiquette-interligne);
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-bleu-pale);
	color: var(--e2it-bleu-profond);
}

.e2it-etiquette--marine {
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2it-etiquette--alerte {
	background: var(--e2it-alerte-fond);
	color: var(--e2it-alerte-texte);
	border: 1px solid var(--e2it-alerte-bordure);
	padding: 6px 13px;
}

.e2it-etiquette--conforme {
	background: var(--e2it-conforme-fond);
	color: var(--e2it-conforme-texte);
}

.e2it-etiquette--erreur {
	background: var(--e2it-erreur-fond);
	color: var(--e2it-erreur-texte);
}

/* ------------------------------------------------------------------
   Champ de formulaire - libelle en mono, aide sous le champ
   ------------------------------------------------------------------ */

.e2it-champ {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-2);
}

.e2it-champ__libelle {
	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-secondaire);
}

.e2it-champ__saisie {
	font-family: var(--e2it-police);
	font-size: var(--e2it-corps-taille);
	color: var(--e2it-texte);
	background: var(--e2it-fond-gris);
	border: 1.5px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-champ);
	padding: 13px 16px;
	min-height: var(--e2it-cible-tactile);
	outline: none;
}

.e2it-champ__saisie:focus {
	border-color: var(--e2it-bleu-crete);
	background: var(--e2it-blanc);
}

.e2it-champ__aide {
	font-size: var(--e2it-etiquette-taille);
	color: var(--e2it-texte-secondaire);
}

/* ------------------------------------------------------------------
   Carte metier
   ------------------------------------------------------------------ */

.e2it-carte {
	display: flex;
	flex-direction: column;
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-carte);
	overflow: hidden;
}

.e2it-carte__image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	background: var(--e2it-bleu-pale);
	display: block;
}

.e2it-carte__corps {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-3);
	padding: var(--e2it-espace-6);
	flex: 1;
}

.e2it-carte__titre { margin: 0; }

.e2it-carte__texte {
	margin: 0;
	color: var(--e2it-texte-secondaire);
}

.e2it-carte__lien {
	font-size: var(--e2it-lien-taille);
	font-weight: var(--e2it-lien-graisse);
	color: var(--e2it-bleu-profond);
	text-decoration: none;
	margin-top: auto;
	padding-top: var(--e2it-espace-3);
}

.e2it-carte__lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* La fleche est decorative : en pseudo-element, elle n est pas lue par les
   lecteurs d ecran et peut etre animee seule. */
.e2it-carte__lien::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-carte__lien:hover::after,
.e2it-carte__lien:focus-visible::after {
	transform: translateX(4px);
}

.e2it-carte__lien:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Bloc chiffres cles - sur fond marine, pas d'accent
   ------------------------------------------------------------------ */

.e2it-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	background: var(--e2it-marine);
	border-radius: var(--e2it-rayon-carte);
	padding: var(--e2it-espace-12) var(--e2it-espace-8);
	gap: var(--e2it-espace-8);
}

.e2it-chiffres__item {
	text-align: center;
	padding-inline: var(--e2it-espace-4);
	border-left: 1px solid var(--e2it-filet-chiffres);
}

.e2it-chiffres__item:first-child { border-left: 0; }

.e2it-chiffres__valeur {
	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);
}

.e2it-chiffres__legende {
	margin-top: var(--e2it-espace-3);
	font-size: var(--e2it-lien-taille);
	font-weight: 400;
	color: var(--e2it-bleu-clair);
}

/* ------------------------------------------------------------------
   Bandeau d'appel a l'action
   ------------------------------------------------------------------ */

.e2it-bandeau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--e2it-espace-6);
	background: var(--e2it-marine);
	border-radius: var(--e2it-rayon-carte);
	padding: var(--e2it-espace-8) var(--e2it-espace-12);
}

.e2it-bandeau__titre {
	font-size: var(--e2it-bandeau-taille);
	font-weight: var(--e2it-bandeau-graisse);
	line-height: var(--e2it-bandeau-interligne);
	color: var(--e2it-blanc);
	margin: 0;
}

.e2it-bandeau__soustitre {
	margin: var(--e2it-espace-2) 0 0;
	color: var(--e2it-bleu-clair);
}

/* ------------------------------------------------------------------
   Boutons Elementor
   Meme geometrie et memes variantes que .e2it-bouton, pour que les
   boutons poses au page builder soient identiques a ceux du theme.
   La reference est le hero de la page d'accueil.

   Specificite : Elementor pose son propre style par defaut sur
   `.elementor-widget-button .elementor-button` (0,2,0), branche sur la
   typographie globale "accent" du kit - qui est la mono technique.
   Il faut donc passer au-dessus, d'ou le `.elementor-widget` accole a la
   classe de variante. Attention : le widget bouton ne rend PAS de
   .elementor-widget-container, le lien est un enfant direct du widget.

   La classe se pose sur le widget (champ "Classes CSS") : elle habille
   le lien .elementor-button qu'il contient, pas le conteneur lui-meme.
   ------------------------------------------------------------------ */

.elementor-widget-button.elementor-widget .elementor-button,
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2it-espace-2);
	min-height: 48px;
	padding: 0 28px;
	font-family: var(--e2it-police);
	font-size: var(--e2it-bouton-taille);
	font-weight: var(--e2it-bouton-graisse);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	border: none;
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		color var(--e2it-duree-rapide) var(--e2it-courbe),
		box-shadow var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

/* Variante principale : fond marine. Le bouton par defaut sur fond clair. */
.e2it-btn--principal.elementor-widget .elementor-button {
	background-color: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2it-btn--principal.elementor-widget .elementor-button:hover {
	background-color: var(--e2it-marine-fonce);
	color: var(--e2it-blanc);
}

/* Variante secondaire : contour marine sur fond clair. */
.e2it-btn--secondaire.elementor-widget .elementor-button {
	background-color: transparent;
	color: var(--e2it-marine);
	border: 1.5px solid var(--e2it-marine);
	padding: 0 26px;
}

.e2it-btn--secondaire.elementor-widget .elementor-button:hover {
	background-color: var(--e2it-bleu-pale);
	color: var(--e2it-marine);
	box-shadow: inset 0 0 0 1px var(--e2it-marine), var(--e2it-eleve);
}

/* Variante accent : un seul par ecran. Fond #1668C6 pour tenir le contraste AA.
   C'est le bouton principal du hero d'accueil. */
.e2it-btn--accent.elementor-widget .elementor-button {
	background-color: var(--e2it-accent-fond);
	color: var(--e2it-blanc);
	white-space: nowrap;
}

.e2it-btn--accent.elementor-widget .elementor-button:hover {
	background-color: var(--e2it-bleu-profond);
	color: var(--e2it-blanc);
}

/* Sur surface sombre - hero photo, bandeau marine - le secondaire passe au
   contour blanc. Automatique dans un hero, ou a la demande avec e2it-btn--sombre. */
.e2it-hero .e2it-btn--secondaire.elementor-widget .elementor-button,
.e2it-marine .e2it-btn--secondaire.elementor-widget .elementor-button,
.e2it-btn--sombre.elementor-widget .elementor-button {
	background-color: transparent;
	color: var(--e2it-blanc);
	border: 1.5px solid rgba(255, 255, 255, .55);
}

.e2it-hero .e2it-btn--secondaire.elementor-widget .elementor-button:hover,
.e2it-marine .e2it-btn--secondaire.elementor-widget .elementor-button:hover,
.e2it-btn--sombre.elementor-widget .elementor-button:hover {
	background-color: rgba(255, 255, 255, .12);
	color: var(--e2it-blanc);
	border-color: var(--e2it-blanc);
	box-shadow: var(--e2it-eleve);
}

/* Largeur pleine, a la demande. */
.e2it-btn--pleine.elementor-widget .elementor-button { width: 100%; }

/* Anciens noms du hero, conserves pour ne rien casser. */
.e2it-hero__bouton-principal.elementor-widget .elementor-button {
	background-color: var(--e2it-accent-fond);
	color: var(--e2it-blanc);
}

.e2it-hero__bouton-principal.elementor-widget .elementor-button:hover {
	background-color: var(--e2it-bleu-profond);
}

.e2it-hero__bouton-secondaire.elementor-widget .elementor-button {
	background-color: transparent;
	color: var(--e2it-blanc);
	border: 1.5px solid rgba(255, 255, 255, .55);
	padding: 0 26px;
}

/* ------------------------------------------------------------------
   Fil d'Ariane
   Le separateur est dessine au trait, jamais en texte : un caractere
   pose en content: serait annonce par certains lecteurs d'ecran entre
   chaque etage.
   ------------------------------------------------------------------ */

.e2it-fil__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	line-height: var(--e2it-mono-interligne);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
}

.e2it-fil__etage {
	display: inline-flex;
	align-items: center;
}

/* Chevron entre deux etages. */
.e2it-fil__etage + .e2it-fil__etage::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-inline: 12px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
	flex: none;
}

/* Cible tactile de 44px sans decaler la mise en page. */
.e2it-fil__etage a,
.e2it-fil__etage span {
	display: inline-flex;
	align-items: center;
	min-height: var(--e2it-cible-tactile);
	padding-block: 10px;
	margin-block: -10px;
	text-decoration: none;
	color: inherit;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-fil__etage a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sur hero photo et bandeau marine. */
.e2it-fil--sombre {
	color: var(--e2it-glacier);
}

.e2it-fil--sombre .e2it-fil__etage a:hover,
.e2it-fil--sombre [aria-current="page"] {
	color: var(--e2it-blanc);
}

/* Sur fond clair. */
.e2it-fil--claire {
	color: var(--e2it-texte-secondaire);
}

.e2it-fil--claire .e2it-fil__etage a:hover,
.e2it-fil--claire [aria-current="page"] {
	color: var(--e2it-marine);
}

/* Sur ecran etroit, le fil defile plutot que de passer a la ligne. */
@media (max-width: 767px) {
	.e2it-fil__liste {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.e2it-fil__liste::-webkit-scrollbar { display: none; }
	.e2it-fil__etage { white-space: nowrap; }
	.e2it-fil__etage + .e2it-fil__etage::before { margin-inline: 9px; }
}