/*
 * E2IT - socle de styles.
 * Ne contient que ce qui est commun a toutes les pages. Aucun style de section
 * ou de page particuliere ici : ils vivront dans leurs propres fichiers.
 * Toutes les valeurs proviennent de tokens.css, aucune valeur en dur.
 */

/* ------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------ */

body {
	font-family: var(--e2it-police);
	font-size: var(--e2it-corps-taille);
	font-weight: var(--e2it-corps-graisse);
	line-height: var(--e2it-corps-interligne);
	color: var(--e2it-texte-secondaire);
	background-color: var(--e2it-blanc);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------
   2. Titres
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--e2it-police);
	color: var(--e2it-texte);
	margin: 0 0 var(--e2it-espace-4);
	text-wrap: balance;
}

h1 {
	font-size: var(--e2it-h1-taille);
	font-weight: var(--e2it-h1-graisse);
	line-height: var(--e2it-h1-interligne);
	letter-spacing: var(--e2it-h1-interlettrage);
}

h2 {
	font-size: var(--e2it-h2-taille);
	font-weight: var(--e2it-h2-graisse);
	line-height: var(--e2it-h2-interligne);
	letter-spacing: var(--e2it-h2-interlettrage);
}

h3 {
	font-size: var(--e2it-h3-taille);
	font-weight: var(--e2it-h3-graisse);
	line-height: var(--e2it-h3-interligne);
}

h4 {
	font-size: var(--e2it-h4-taille);
	font-weight: var(--e2it-h4-graisse);
	line-height: var(--e2it-h4-interligne);
}

/* Le mot en italique glacier n'a le contraste requis que sur surface sombre. */
.e2it-marine h1 em,
.e2it-h1-accent {
	font-style: italic;
	font-weight: inherit;
	color: var(--e2it-glacier);
}

p {
	margin: 0 0 var(--e2it-espace-4);
}

p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   3. Liens
   ------------------------------------------------------------------ */

a {
	color: var(--e2it-bleu-profond);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

a:hover {
	color: var(--e2it-marine);
}

/* ------------------------------------------------------------------
   4. Accessibilite
   Hello Elementor neutralise l'anneau de focus par defaut : on le retablit.
   ------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
	border-radius: var(--e2it-rayon-champ);
}

/* Lien d'evitement, revele au clavier uniquement. */
.e2it-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--e2it-espace-3) var(--e2it-espace-6);
	background: var(--e2it-marine);
	color: var(--e2it-blanc);
	font-weight: 600;
	border-radius: 0 0 var(--e2it-rayon-champ) 0;
}

.e2it-evitement:focus {
	left: 0;
	color: var(--e2it-blanc);
}

/* Masque visuellement sans retirer de l'arbre d'accessibilite. */
.e2it-lecteur-seul {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Cibles tactiles : 44px minimum sur tout element interactif de navigation. */
.e2it-cible {
	min-height: var(--e2it-cible-tactile);
	min-width: var(--e2it-cible-tactile);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
   5. Libelles techniques en mono
   ------------------------------------------------------------------ */

.e2it-mono {
	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;
	color: var(--e2it-bleu-profond);
}

.e2it-mono--crete { color: var(--e2it-bleu-crete); }
.e2it-mono--clair { color: var(--e2it-bleu-clair); }

/* ------------------------------------------------------------------
   6. Section type
   96px de padding vertical, contenu borne a 1240px, titre suivi d'un filet
   marine de 2px et d'un numero de section en mono.
   ------------------------------------------------------------------ */

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

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

.e2it-section__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e2it-espace-6);
	margin-bottom: var(--e2it-espace-12);
}

.e2it-section__titre {
	margin-bottom: var(--e2it-espace-4);
}

.e2it-section__filet {
	width: 64px;
	height: 2px;
	background: var(--e2it-marine);
	border: 0;
	margin: 0;
}

/* Ornemental : retire de l'arbre d'accessibilite cote balisage. */
.e2it-section__numero {
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-texte-tertiaire);
	flex: none;
}

/* ------------------------------------------------------------------
   7. Surfaces marine
   ------------------------------------------------------------------ */

.e2it-marine {
	background: var(--e2it-marine);
	color: var(--e2it-bleu-clair);
}

.e2it-marine h1,
.e2it-marine h2,
.e2it-marine h3,
.e2it-marine h4 {
	color: var(--e2it-blanc);
}

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

.e2it-marine :where(a, button):focus-visible {
	outline-color: var(--e2it-glacier);
}

/* ------------------------------------------------------------------
   8. Alignement d'Elementor sur le gabarit du projet
   ------------------------------------------------------------------ */

.e-con,
.elementor-widget-container {
	--e-con-max-width: var(--e2it-largeur-contenu);
}

/* ------------------------------------------------------------------
   9. Neutralisation du reset de Hello Elementor
   Son reset.css impose a { color: #c36 } et a:active, a:hover { color: #336 }.
   Notre socle couvrait le repos et le survol, mais pas l'etat actif : d'ou un
   flash framboise au toucher sur mobile. On couvre les quatre etats, et on
   supprime la surbrillance de tap qui double l'effet.
   ------------------------------------------------------------------ */

a:active,
a:focus {
	color: var(--e2it-marine);
}

:where(a, button, [role="button"], input, select, textarea, summary) {
	-webkit-tap-highlight-color: transparent;
}

/* Sur surface sombre, l'etat actif reste blanc. */
.e2it-marine a:active,
.e2it-marine a:focus,
.e2it-hero a:active,
.e2it-hero a:focus,
.e2it-entete--transparente:not(.e2it-entete--figee) a:active,
.e2it-entete--transparente:not(.e2it-entete--figee) a:focus {
	color: var(--e2it-blanc);
}

/* Composants : l'etat actif ne change pas la couleur du texte. */
.e2it-bouton:active,
.e2it-bouton:focus,
.e2it-carte__lien:active,
.e2it-nav__lien:active,
.e2it-nav__lien:focus {
	color: inherit;
}

.e2it-bouton--principal:active,
.e2it-bouton--principal:focus,
.e2it-bouton--accent:active,
.e2it-bouton--accent:focus {
	color: var(--e2it-blanc);
}

.e2it-nav__lien:active,
.e2it-nav__lien:focus {
	color: var(--e2it-marine);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:active,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:focus {
	color: var(--e2it-blanc);
}

/* ------------------------------------------------------------------
   10. Boutons : neutralisation du reset du theme parent

   reset.css de Hello Elementor stylise tous les boutons du document :
     [type=button], [type=submit], button { border: 1px solid #c36; color: #c36 }
     button:focus, button:hover { background-color: #c36; color: #fff }

   Le focus restant pose apres un clic, le fond framboise persistait sur
   les filtres de la carte, les fleches et les pastilles du rail. On corrige
   la cause plutot que chaque symptome : les composants du projet reposent
   ensuite leurs propres fonds, avec une specificite superieure.
   ------------------------------------------------------------------ */

button,
[type="button"],
[type="submit"],
[type="reset"],
button:hover,
button:focus,
button:focus-visible,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active,
[type="reset"]:hover,
[type="reset"]:focus,
[type="reset"]:active {
	/* On ne touche qu au fond et a la couleur : la bordure appartient a chaque
	   composant, et la reprendre ici l ecraserait au survol et au focus. */
	color: inherit;
	background-color: transparent;
	text-decoration: none;
}

/* Les boutons du projet ne portent aucune bordure par defaut : chaque
   composant remet la sienne quand il en veut une. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
	border-style: none;
	font-family: inherit;
}

/* L anneau de focus clavier reste prioritaire : le neutralisation
   ci-dessus ne doit pas priver la navigation au clavier de son repere. */
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
}