/*
 * E2IT - gabarit d actualite.
 *
 * Le hero est un aplat marine et le motif d aretes de la charte ; l image a
 * la une chevauche son bas. C est ce chevauchement qui fait la jonction entre
 * le bandeau et le corps blanc - sans lui, l article commence par une rupture.
 */

.e2it-actu__hero {
	position: relative;
	position: relative;
	background: var(--e2it-marine);
	/* Motif d aretes tant qu il n y a pas de photo : c est le repli, pour un
	   brouillon en previsualisation. */
	background-image: repeating-linear-gradient(30deg, rgba(169, 196, 229, .1) 0 2px, transparent 2px 20px);
	padding: calc(var(--e2it-entete-reelle, 153px) + var(--e2it-espace-8)) var(--e2it-gouttiere) 200px;
	text-align: center;
}

.e2it-actu__hero-corps {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-5, 20px);
}

.e2it-actu__fil {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2it-espace-3);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.e2it-actu__fil a {
	color: var(--e2it-glacier);
	text-decoration: none;
}

.e2it-actu__separateur {
	color: rgba(169, 196, 229, .5);
}

/* La categorie en pastille : elle situe l article d un coup d oeil, la ou un
   simple lien se confondrait avec le fil. */
.e2it-actu__categorie {
	padding: 5px 13px;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-blanc);
	color: var(--e2it-marine) !important;
}

.e2it-actu__titre {
	margin: 0;
	font-family: var(--e2it-police);
	font-weight: 700;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -.032em;
	color: var(--e2it-blanc);
	text-wrap: balance;
}

.e2it-actu__chapo {
	margin: 0 auto;
	max-width: 720px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--e2it-bleu-clair);
	text-wrap: pretty;
}

.e2it-actu__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--e2it-espace-3);
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

/* Chaque element reste insecable : une date coupee en deux lignes fait
   desordre au milieu d une ligne de meta. */
.e2it-actu__meta > span {
	white-space: nowrap;
}

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

.e2it-actu__point {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--e2it-bleu-crete);
}

/* ---- Image a la une ---- */

.elementor-widget-container figure.e2it-actu__une,
.e2it-actu__une {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin: -160px auto 0 !important;
	padding-inline: var(--e2it-gouttiere);
	box-sizing: border-box;
}

.e2it-actu__une img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 24px 56px rgba(7, 28, 62, .18);
}

.e2it-actu__legende {
	margin-top: var(--e2it-espace-3);
	font-size: 14px;
	line-height: 1.5;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__credit {
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
}

@media (max-width: 1024px) {
	.e2it-actu__hero {
		padding: calc(var(--e2it-entete-reelle, 120px) + var(--e2it-espace-6)) 20px 160px;
	}

	.elementor-widget-container figure.e2it-actu__une,
	.e2it-actu__une {
		margin-top: -120px !important;
		padding-inline: 20px;
	}
}

@media (max-width: 639px) {
	.e2it-actu__titre {
		font-size: 34px;
	}

	.e2it-actu__chapo {
		font-size: 17px;
	}
}
/* ------------------------------------------------------------------
   Corps de l actualite
   ------------------------------------------------------------------ */

.e2it-actu__texte {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-6);
	font-size: 18px;
	line-height: 1.72;
	color: #1F2630;
}

/* L essentiel : trois points, avant le premier paragraphe. Un lecteur
   presse doit pouvoir s arreter la. */
.e2it-actu__essentiel {
	padding: 22px 26px;
	background: var(--e2it-marine);
	border-radius: 14px;
}

.e2it-actu__essentiel-titre {
	margin: 0 0 var(--e2it-espace-3);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

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

.e2it-actu__essentiel li {
	position: relative;
	padding-left: 18px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--e2it-blanc);
}

.e2it-actu__essentiel li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--e2it-accent);
}

/* Contenu Gutenberg : on style les blocs natifs plutot que d imposer un
   balisage au redacteur. */
.e2it-actu__contenu > * + * {
	margin-top: 22px;
}

.e2it-actu__contenu p {
	margin: 0;
}

.e2it-actu__contenu h2 {
	margin: 26px 0 0;
	font-family: var(--e2it-police);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.25;
	color: var(--e2it-marine);
}

/* Jamais la couleur seule : les liens sont soulignes, le survol passe le
   soulignement en Bleu arc. */
.e2it-actu__contenu a {
	color: var(--e2it-bleu-profond);
	text-decoration: underline;
	text-decoration-color: rgba(20, 69, 127, .35);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__contenu a:hover {
	text-decoration-color: var(--e2it-accent);
}

.e2it-actu__contenu blockquote {
	margin: 0;
	padding-left: var(--e2it-espace-8);
	border-left: 3px solid var(--e2it-accent);
}

.e2it-actu__contenu blockquote p {
	font-size: 26px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--e2it-marine);
	text-wrap: pretty;
}

.e2it-actu__contenu blockquote cite {
	display: block;
	margin-top: var(--e2it-espace-3);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-style: normal;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__action {
	margin: 0;
}

.e2it-actu__bouton {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 28px;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-marine);
	font-family: var(--e2it-police);
	font-size: 15px;
	font-weight: 600;
	color: var(--e2it-blanc);
	text-decoration: none;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__bouton:hover {
	background: var(--e2it-accent-fond);
}

.e2it-actu__galerie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.e2it-actu__galerie img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.e2it-actu__contenu a,
	.e2it-actu__bouton { transition: none; }
}

/* ------------------------------------------------------------------
   Partage
   ------------------------------------------------------------------ */

.e2it-actu__partage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--e2it-espace-4);
	padding-top: var(--e2it-espace-6);
	border-top: 1px solid var(--e2it-bordure);
}

.e2it-actu__partage-titre {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__partage-boutons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--e2it-espace-3);
}

/* 44 px : la cible tactile minimale. */
.e2it-actu__rond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #C9D6E5;
	border-radius: 50%;
	background: transparent;
	color: var(--e2it-marine);
	cursor: pointer;
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__rond:hover {
	background: var(--e2it-bleu-pale);
	border-color: var(--e2it-marine);
}

.e2it-actu__copier {
	height: 44px;
	padding: 0 20px;
	border: 1px solid #C9D6E5;
	border-radius: var(--e2it-rayon-pilule);
	background: transparent;
	font-family: var(--e2it-police);
	font-size: 14px;
	font-weight: 600;
	color: var(--e2it-marine);
	cursor: pointer;
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		border-color var(--e2it-duree-rapide) var(--e2it-courbe),
		color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__copier:hover {
	background: var(--e2it-bleu-pale);
	border-color: var(--e2it-marine);
}

/* L etat copie se voit : sans retour visible, on reclique. */
.e2it-actu__copier.est-copie {
	background: var(--e2it-marine);
	border-color: var(--e2it-marine);
	color: var(--e2it-blanc);
}

.e2it-actu__rond:focus-visible,
.e2it-actu__copier:focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
}

@media (max-width: 639px) {
	.e2it-actu__partage {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-actu__rond,
	.e2it-actu__copier { transition: none; }
}

/* ------------------------------------------------------------------
   Corps en deux colonnes : texte 680 px, rail 320 px

   680 px, c est environ 75 caracteres par ligne : au-dela, l oeil perd le
   debut de la ligne suivante. Le rail occupe la place restante.
   ------------------------------------------------------------------ */

.e-con.e2it-actu__corps {
	width: 100%;
	max-width: none;
}

.e-con.e2it-actu__corps > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 680px) minmax(0, 320px);
	justify-content: space-between;
	gap: var(--e2it-espace-16);
	align-items: start;
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding-block: 0;
	padding-inline: var(--e2it-gouttiere);
	box-sizing: border-box;
}

/* Le rail suit la lecture sans la couper. */
.e2it-actu__fil-rail {
	position: sticky;
	top: 32px;
	padding-top: var(--e2it-espace-4);
	border-top: 2px solid var(--e2it-marine);
}

.e2it-actu__fil-titre {
	margin: 0 0 var(--e2it-espace-4);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__fil-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.e2it-actu__fil-entree {
	padding: var(--e2it-espace-4) 0;
	border-bottom: 1px solid var(--e2it-bordure);
}

.e2it-actu__fil-meta {
	display: block;
	margin-bottom: 4px;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-profond);
}

.e2it-actu__fil-lien {
	font-family: var(--e2it-police);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--e2it-marine);
	text-decoration: none;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__fil-lien:hover {
	color: var(--e2it-bleu-profond);
}

.e2it-actu__fil-toutes {
	margin: var(--e2it-espace-4) 0 0;
}

.e2it-actu__fil-toutes a {
	font-size: var(--e2it-lien-taille);
	font-weight: var(--e2it-lien-graisse);
	color: var(--e2it-bleu-profond);
	text-decoration: none;
}

.e2it-actu__fil-toutes a:hover {
	text-decoration: underline;
}

/* Sous 1024 px : une colonne, le rail passe sous l article et perd son
   comportement collant - il n aurait rien a suivre. */
@media (max-width: 1024px) {
	.e-con.e2it-actu__corps > .e-con-inner {
		grid-template-columns: 1fr;
		gap: var(--e2it-espace-12);
	}

	.e2it-actu__fil-rail {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-actu__fil-lien { transition: none; }
}

/* ------------------------------------------------------------------
   Rythme du texte

   Les paragraphes se touchaient : 0 px mesure entre chaque bloc. La regle
   en > * + * etait ecrasee par les styles de contenu d Elementor, qui
   remettent les marges a zero avec une specificite superieure. On reprend
   la main bloc par bloc, avec le poids necessaire.
   ------------------------------------------------------------------ */

.e2it-actu__texte .e2it-actu__contenu > * {
	margin-top: 0;
	margin-bottom: 0;
}

.e2it-actu__texte .e2it-actu__contenu > * + * {
	margin-top: var(--e2it-espace-6);
}

/* Une citation est une respiration : elle se detache des deux cotes. */
.e2it-actu__texte .e2it-actu__contenu > blockquote,
.e2it-actu__texte .e2it-actu__contenu > figure,
.e2it-actu__texte .e2it-actu__contenu > ul,
.e2it-actu__texte .e2it-actu__contenu > ol {
	margin-top: var(--e2it-espace-10, 40px);
}

.e2it-actu__texte .e2it-actu__contenu > blockquote + *,
.e2it-actu__texte .e2it-actu__contenu > figure + *,
.e2it-actu__texte .e2it-actu__contenu > ul + *,
.e2it-actu__texte .e2it-actu__contenu > ol + * {
	margin-top: var(--e2it-espace-10, 40px);
}

/* Un intertitre se detache de ce qui precede et colle a ce qu il annonce. */
.e2it-actu__texte .e2it-actu__contenu > h2 {
	margin-top: var(--e2it-espace-12);
}

.e2it-actu__texte .e2it-actu__contenu > h2 + * {
	margin-top: var(--e2it-espace-2);
}

/* ---- Respiration autour des blocs ---- */

.e2it-actu__texte {
	gap: var(--e2it-espace-10, 40px);
}

.e2it-actu__colonne.e2it-actu__colonne {
	row-gap: var(--e2it-espace-16);
}

/* ---- L essentiel ---- */

.e2it-actu__essentiel {
	padding: 28px 32px;
}

.e2it-actu__essentiel ul {
	gap: var(--e2it-espace-3);
}

/* ---- Les deux colonnes partent de la meme ligne ---- */

/* 128 px separaient l image du texte : le rembourrage du conteneur
   s ajoutait a la marge de la legende. 64 px suffisent a detacher le corps
   de l image sans rompre la lecture. */
.e-con.e2it-actu__corps {
	padding-top: var(--e2it-espace-8);
}

@media (max-width: 767px) {
	.e2it-actu__texte .e2it-actu__contenu > * + * {
		margin-top: var(--e2it-espace-5, 20px);
	}

	.e2it-actu__texte .e2it-actu__contenu > blockquote,
	.e2it-actu__texte .e2it-actu__contenu > blockquote + * {
		margin-top: var(--e2it-espace-8);
	}

	.e2it-actu__texte {
		gap: var(--e2it-espace-8);
	}

	.e2it-actu__essentiel {
		padding: 22px 24px;
	}
}

/* ------------------------------------------------------------------
   Fin de page

   417 px de vide separaient la barre de partage du pied : les deux
   colonnes d une grille ont la meme hauteur, et le rail - plus haut que le
   texte - tirait la colonne de gauche vers le bas.

   Le rail est deja collant : il n a pas besoin d imposer sa hauteur a la
   grille. On le sort du calcul, et le vide disparait.
   ------------------------------------------------------------------ */

/* La colonne de droite prend la hauteur de la grille : un element collant se
   deplace dans son conteneur, et un conteneur a sa taille ne lui laisse
   aucune marge. Le vide de fin de page ne revient pas : la colonne de texte
   est desormais la plus haute des deux.

   Garde-fou : si la carte devenait plus haute que le texte, elle se limite a
   la hauteur de la fenetre et defile en interne plutot que d etirer la
   grille. */
@media (min-width: 1025px) {
	.e-con.e2it-actu__corps > .e-con-inner {
		align-items: stretch;
	}

	.e-con.e2it-actu__rail {
		align-self: stretch;
	}

	/* La carte etait enfermee dans l enveloppe de son widget, haute de 443 px
	   - sa propre taille. Un element collant ne voit que son parent direct :
	   l enveloppe doit donc prendre toute la hauteur du rail. */
	.e2it-actu__rail > .elementor-widget,
	.e2it-actu__rail > .elementor-widget > .elementor-widget-container {
		height: 100%;
	}

	.e2it-actu__contact {
		max-height: calc(100vh - var(--e2it-entete-reelle, 78px) - var(--e2it-espace-16));
		overflow-y: auto;
	}
}

/* Sans rembourrage bas, l article se collerait au pied des que le vide
   structurel disparait. 96 px : la valeur des sections du site. */
.e-con.e2it-actu__corps {
	padding-bottom: var(--e2it-section-padding, 96px);
}

/* ------------------------------------------------------------------
   Carte de contact

   Claire et non marine : l encadre « L essentiel » est deja sombre a
   gauche, deux blocs fonces cote a cote se disputeraient l attention.
   ------------------------------------------------------------------ */

/* Elle s arrete sous l en-tete, pas dessous : l en-tete blanc des pages
   interieures lui passait par-dessus. */
.e2it-actu__contact {
	position: sticky;
	top: calc(var(--e2it-entete-reelle, 78px) + var(--e2it-espace-8));
	padding: var(--e2it-espace-6);
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-left: 3px solid var(--e2it-accent);
	border-radius: var(--e2it-rayon-carte);
}

.e2it-actu__contact-surtitre {
	margin: 0 0 var(--e2it-espace-4);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-actu__contact-nom {
	margin: 0;
	font-family: var(--e2it-police);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--e2it-marine);
}

.e2it-actu__contact-fonction {
	margin: 3px 0 0;
	font-size: 14px;
	color: var(--e2it-texte-secondaire);
}

/* Coordonnees cliquables : sur telephone, c est la moitie de l interet du
   bloc. */
.e2it-actu__contact-lignes {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-3);
	margin: var(--e2it-espace-5, 20px) 0;
	padding: var(--e2it-espace-4) 0;
	border-top: 1px solid var(--e2it-bordure);
	border-bottom: 1px solid var(--e2it-bordure);
}

.e2it-actu__contact-lignes a {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-3);
	font-size: 15px;
	color: var(--e2it-bleu-profond);
	text-decoration: none;
	word-break: break-word;
}

.e2it-actu__contact-lignes a:hover {
	text-decoration: underline;
}

.e2it-actu__contact-rond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid #C9D6E5;
	border-radius: 50%;
	color: var(--e2it-marine);
}

.e2it-actu__contact-rond svg {
	width: 16px;
	height: 16px;
}

.e2it-actu__contact-bouton {
	display: block;
	padding: 13px 20px;
	text-align: center;
	border-radius: var(--e2it-rayon-pilule);
	background: var(--e2it-marine);
	font-family: var(--e2it-police);
	font-size: 15px;
	font-weight: 600;
	color: var(--e2it-blanc);
	text-decoration: none;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-actu__contact-bouton:hover {
	background: var(--e2it-accent-fond);
}

/* Sur un article, l appel prime sur le formulaire : le second bouton reste
   cercle. */
.e2it-actu__contact-bouton--secondaire {
	margin-top: var(--e2it-espace-2);
	background: transparent;
	border: 1.5px solid var(--e2it-marine);
	color: var(--e2it-marine);
}

.e2it-actu__contact-bouton--secondaire:hover {
	background: var(--e2it-bleu-pale);
}

.e2it-actu__contact-adresse {
	margin: var(--e2it-espace-4) 0 0;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--e2it-texte-tertiaire);
}

@media (max-width: 1024px) {
	.e2it-actu__contact {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-actu__contact-bouton { transition: none; }
}

/* Attribution de citation : en mono capitales, precedee d un tiret. Le bloc
   citation de Gutenberg place la source dans un cite, le bloc citation mise
   en avant dans un footer - on traite les deux. */
.e2it-actu__contenu blockquote cite,
.e2it-actu__contenu blockquote footer,
.e2it-actu__contenu blockquote .wp-block-quote__citation {
	display: block;
	margin-top: var(--e2it-espace-4);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-style: normal;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__contenu blockquote cite::before,
.e2it-actu__contenu blockquote footer::before,
.e2it-actu__contenu blockquote .wp-block-quote__citation::before {
	content: "— ";
}

/* Citation issue des champs : meme rendu que le bloc Gutenberg, mais sans
   mise en forme a la charge du redacteur. */
.e2it-actu__citation {
	margin: 0;
	padding-left: var(--e2it-espace-8);
	border-left: 3px solid var(--e2it-accent);
}

.e2it-actu__citation blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.e2it-actu__citation p {
	margin: 0;
	font-family: var(--e2it-police);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--e2it-marine);
	text-wrap: pretty;
}

.e2it-actu__citation figcaption {
	margin-top: var(--e2it-espace-4);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-actu__citation figcaption::before {
	content: "— ";
}

@media (max-width: 767px) {
	.e2it-actu__citation p {
		font-size: 21px;
	}
}

/* Galerie native de l editeur classique : le redacteur choisit ses photos
   dans la mediatheque, la grille s applique a l affichage. */
.e2it-actu__contenu .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
}

.e2it-actu__contenu .gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.e2it-actu__contenu .gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.e2it-actu__contenu .gallery-item {
	margin: 0;
	width: auto !important;
	float: none;
}

.e2it-actu__contenu .gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 0 !important;
	border-radius: 10px;
}

.e2it-actu__contenu .gallery-caption {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--e2it-texte-secondaire);
}

@media (max-width: 639px) {
	.e2it-actu__contenu .gallery,
	.e2it-actu__contenu .gallery-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------------
   Carrousel de photos

   Trois images visibles, la piste glisse d une image a la fois. Sans
   JavaScript, elle reste une liste defilante au doigt : le contenu est
   accessible dans tous les cas.
   ------------------------------------------------------------------ */

.e2it-carrousel {
	display: block;
}

.e2it-carrousel__fenetre {
	overflow: hidden;
}

.e2it-carrousel__piste {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 420ms var(--e2it-courbe);
}

/* Trois par fenetre, l ecart compris : c est ce calcul qui garantit que la
   troisieme image ne soit pas coupee. */
.e2it-carrousel__vue {
	flex: 0 0 calc((100% - 24px) / 3);
	margin: 0;
}

.e2it-carrousel__vue a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.e2it-carrousel__vue img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 500ms var(--e2it-courbe);
}

.e2it-carrousel__vue a:hover img {
	transform: scale(1.03);
}

.e2it-carrousel__vue a:focus-visible {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

.e2it-carrousel__commandes {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-4);
	margin-top: var(--e2it-espace-4);
}

.e2it-carrousel__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #C9D6E5;
	border-radius: 50%;
	background: transparent;
	font-size: 16px;
	color: var(--e2it-marine);
	cursor: pointer;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-carrousel__fleche:hover:not(:disabled) {
	background: var(--e2it-bleu-pale);
	border-color: var(--e2it-marine);
}

/* Une fleche sans destination se desactive plutot que de ne rien faire. */
.e2it-carrousel__fleche:disabled {
	opacity: .35;
	cursor: default;
}

.e2it-carrousel__fleche:focus-visible {
	outline: 2px solid var(--e2it-accent);
	outline-offset: 2px;
}

.e2it-carrousel__position {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-texte-tertiaire);
}

@media (max-width: 1024px) {
	.e2it-carrousel__vue {
		flex-basis: calc((100% - 12px) / 2);
	}
}

@media (max-width: 639px) {
	.e2it-carrousel__vue {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e2it-carrousel__piste,
	.e2it-carrousel__vue img { transition: none; }
	.e2it-carrousel__vue a:hover img { transform: none; }
}

/* ------------------------------------------------------------------
   Photo en fond du hero

   Meme fichier et meme taille que l image nette affichee dessous : le
   navigateur ne la telecharge qu une fois.

   L image donne une matiere et une couleur, jamais une scene lisible : le
   titre prime. Le degrade marine est pose par-dessus, dense la ou le texte
   se trouve.
   ------------------------------------------------------------------ */

.e2it-actu__hero--photo {
	background-image: none;
}

.e2it-actu__hero-fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: 50% 45%;
	opacity: .16;
	pointer-events: none;
}

/* Degrade par-dessus la photo : il densifie le bas, la ou le chapo et la
   ligne de meta reposent sur les zones les plus claires. */
.e2it-actu__hero-fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 46, 94, .35) 0%, rgba(11, 46, 94, .2) 45%, rgba(7, 28, 62, .6) 100%);
}

.e2it-actu__hero--photo .e2it-actu__hero-corps {
	position: relative;
	z-index: 1;
}