/*
 * Esprit Joaillerie — styles des widgets du plugin.
 * Tout ce qui est réglable depuis Elementor est piloté par des sélecteurs de
 * contrôle : on ne trouve ici que la structure et les états.
 */

/* ============================================================= Articles */

/*
 * Le dessin des cartes vit ici, et nulle part ailleurs : c'est ce qui garantit
 * que deux listes posées à deux endroits différents se ressemblent. Seules la
 * disposition choisie dans le widget et les quelques réglages exposés
 * (colonnes, écarts, arrondi) font varier le rendu.
 */

.ejb-articles {
	--ejb-colonnes: 3;
	--ejb-rayon: 10px;
	display: grid;
	grid-template-columns: repeat(var(--ejb-colonnes), minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 40px;
	width: 100%;
}

.ejb-articles__vide {
	margin: 0;
	padding: 30px 0;
	font-family: Inter, sans-serif;
	font-size: 15px;
	color: var(--ej-gris, #6B6560);
}

.ejb-article {
	min-width: 0;
}

.ejb-article__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

/* ------------------------------------------------------------ Le visuel */

.ejb-article__visuel {
	position: relative;
	overflow: hidden;
	border-radius: var(--ejb-rayon);
	background-color: var(--ej-creme-ombre, #F1EDE7);
}

/*
 * L'image est légèrement agrandie au repos : les photos de bijoux arrivent
 * souvent avec beaucoup d'air autour du sujet, et le cadre de la carte le
 * laissait perdu au milieu. Trois pour cent suffisent à le rapprocher sans
 * qu'aucun angle ne sorte du cadre.
 *
 * Le survol reprend au-dessus de cette valeur, sans quoi le mouvement partirait
 * de plus bas qu'il n'arrive.
 */
.ejb-article__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 900ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-article__lien:hover .ejb-article__visuel img {
	transform: scale(1.07);
}

.ejb-article__visuel--portrait img { aspect-ratio: 4 / 5; }
.ejb-article__visuel--paysage img  { aspect-ratio: 3 / 2; }
.ejb-article__visuel--large img    { aspect-ratio: 16 / 10; }
.ejb-article__visuel--carre img    { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------- Le bloc texte */

.ejb-article__corps {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 12px;
	padding-top: 20px;
}

.ejb-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.ejb-article__rubrique {
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ej-or, #8C6A3F);
}

.ejb-article__filet {
	width: 14px;
	height: 1px;
	background-color: var(--ej-bordure, #E4DFD8);
}

.ejb-article__date {
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ej-gris, #6B6560);
}

.ejb-article__fonction {
	font-family: 'Bodoni Moda', serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ej-gris, #6B6560);
}

/* Sélecteur descendant : le kit Elementor habille les h1-h6 avec un sélecteur
   plus spécifique qu'une simple classe, et imposerait sa taille de h3. */
.ejb-articles .ejb-article__titre {
	margin: 0;
	font-family: Newsreader, serif;
	font-size: 23px;
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: var(--ej-encre, #12100E);
	text-wrap: pretty;
}

.ejb-article__extrait {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ej-gris, #6B6560);
}

/* La ligne de tête tient les deux bords de la carte : la rubrique à gauche,
   la date à droite. Le filet ne sépare alors plus rien et sort. */
.ejb-article__filet {
	display: none;
}

.ejb-article__date {
	margin-left: auto;
}

/* Sauf sur les cartes dont le texte est posé sur le visuel — la une et ses
   satellites. La maquette y groupe la rubrique et la date à gauche, séparées
   par un filet : écartées aux deux bords d'une carte aussi large, elles ne se
   lisent plus comme une seule ligne de tête. */
.ejb-articles--superpose .ejb-article__filet {
	display: block;
}

.ejb-articles--superpose .ejb-article__date {
	margin-left: 0;
}

/* En grille, les cartes ont déjà la même hauteur : c'est leur intérieur qui
   se déforme. Les extraits sont saisis à la main et vont de deux à huit
   lignes ; le plus long fixe la hauteur de la ligne, et ses voisines
   héritent d'un vide considérable au-dessus du lien.

   Borner l'extrait à trois lignes rend la ligne insensible au plus bavard.
   Le reste du vide se loge sous l'extrait, où le lien collé en bas de carte
   l'absorbe déjà — réserver en plus des lignes de titre le ferait remonter
   entre le titre et l'extrait, soit un trou au milieu de la carte. */
.ejb-articles--grille .ejb-article__extrait {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Le lien se cale en bas de carte : d'une carte à l'autre d'une même ligne,
   ils tombent ainsi sur la même ligne de base. */
.ejb-article__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: auto;
	padding-top: 4px;
}

.ejb-article__lire {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ej-or, #8C6A3F);
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ej-encre, #12100E);
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-article__fleche {
	flex: none;
}

.ejb-article__lien:hover .ejb-article__lire {
	color: var(--ej-or, #8C6A3F);
}

.ejb-article__auteur {
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ej-gris, #6B6560);
}

/* ------------------------------------------- Textes posés sur le visuel */

.ejb-articles--superpose .ejb-article__lien {
	position: relative;
	overflow: hidden;
	border-radius: var(--ejb-rayon);
}

/* Voile dégradé, sans quoi le texte clair devient illisible sur un visuel
   clair. Les quatre paliers sont ceux de la maquette. */
.ejb-articles--superpose .ejb-article__visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .05) 22%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .92) 100%);
	pointer-events: none;
}

.ejb-articles--superpose .ejb-article__visuel {
	border-radius: 0;
}

.ejb-articles--superpose .ejb-article__corps {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	flex-grow: 0;
	padding: 24px;
}

.ejb-articles--superpose .ejb-article__titre,
.ejb-articles--superpose .ejb-article__rubrique {
	color: var(--ej-creme, #FAF8F5);
}

.ejb-articles--superpose .ejb-article__date {
	color: rgba(250, 248, 245, .9);
}

.ejb-articles--superpose .ejb-article__filet {
	background-color: rgba(250, 248, 245, .45);
}

.ejb-articles--superpose .ejb-article__lire {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ej-creme, #FAF8F5);
	border-bottom-color: rgba(250, 248, 245, .6);
}

.ejb-articles--superpose .ejb-article__lien:hover .ejb-article__lire {
	color: var(--ej-creme, #FAF8F5);
	opacity: .78;
}

.ejb-articles--superpose .ejb-article__fleche {
	display: none;
}

/* ----------------------------------------- Réglages propres aux formes */

.ejb-articles--une .ejb-article__corps {
	gap: 26px;
	padding: 44px;
}

.ejb-articles--une .ejb-article__titre {
	font-size: 40px;
	line-height: 1.42;
	letter-spacing: 0;
}

.ejb-articles--une .ejb-article__date {
	font-family: 'Bodoni Moda', serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1;
}

.ejb-articles--une .ejb-article__lire {
	font-size: 14px;
	border-bottom-color: rgba(250, 248, 245, .7);
}

.ejb-articles--une .ejb-article__auteur {
	color: rgba(250, 248, 245, .62);
}

.ejb-articles--satellite .ejb-article__corps {
	gap: 14px;
}

.ejb-articles--satellite .ejb-article__titre {
	letter-spacing: -.01em;
}

.ejb-articles--interview .ejb-article__titre {
	font-size: 25px;
	line-height: 1.2;
}

/* Liste : vignette carrée à gauche, texte à droite, filet de séparation entre
   les entrées. C'est la forme des brèves de la maquette mobile. */
.ejb-articles--liste .ejb-article {
	border-bottom: 1px solid var(--ej-bordure, #E4DFD8);
}

/* Le dernier filet fermerait la liste comme un tableau : la maquette laisse
   la place, sans supprimer la hauteur de la ligne. */
.ejb-articles--liste .ejb-article:last-child {
	border-bottom-color: transparent;
}

.ejb-articles--liste .ejb-article__lien {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	height: auto;
	padding: 16px 0;
}

.ejb-articles--liste .ejb-article__visuel {
	flex: 0 0 96px;
}

/* Le corps prend tout l'espace à droite de la vignette : sans cela il se
   cale sur la largeur de son titre, et la date, calée à droite de la ligne de
   tête, suit le titre au lieu du bord de la carte. */
.ejb-articles--liste .ejb-article__corps {
	flex: 1 1 auto;
	min-width: 0;
	gap: 7px;
	padding-top: 0;
}

.ejb-articles--liste .ejb-article__meta {
	gap: 6px 8px;
}

.ejb-articles--liste .ejb-article__rubrique {
	font-size: 10px;
}

.ejb-articles--liste .ejb-article__filet {
	width: 10px;
}

.ejb-articles--liste .ejb-article__date {
	font-size: 11px;
}

.ejb-articles--liste .ejb-article__titre {
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Côte à côte : le visuel prend la plus grande part, le texte se cale sur son
   milieu. C'est l'article de tête des pages de rubrique. */
.ejb-articles--cote .ejb-article__lien {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
}

.ejb-articles--cote .ejb-article__visuel {
	flex: 1.4 1 420px;
	min-width: 0;
}

.ejb-articles--cote .ejb-article__corps {
	flex: 1 1 340px;
	min-width: 0;
	flex-grow: 1;
	gap: 18px;
	padding-top: 0;
}

.ejb-articles--cote .ejb-article__titre {
	font-size: 40px;
	line-height: 1.24;
	letter-spacing: -.01em;
	max-width: 30ch;
}

.ejb-articles--cote .ejb-article__extrait {
	font-size: 17px;
	line-height: 1.75;
	max-width: 50ch;
}

.ejb-articles--cote .ejb-article__pied {
	margin-top: 6px;
	gap: 14px 24px;
}

/* ------------------------------------------------------------ Réponsif */

@media (max-width: 1024px) {
	.ejb-articles--cote .ejb-article__lien { gap: 32px; }
	.ejb-articles--cote .ejb-article__titre { font-size: 30px; }

	.ejb-articles--une .ejb-article__corps {
		gap: 20px;
		padding: 30px;
	}

	.ejb-articles--une .ejb-article__titre { font-size: 31px; }
	.ejb-articles--interview .ejb-article__titre { font-size: 23px; }
	.ejb-articles--grille .ejb-article__titre { font-size: 21px; }
}

@media (max-width: 767px) {
	.ejb-articles--superpose .ejb-article__corps {
		padding: 22px;
	}

	.ejb-articles--une .ejb-article__corps { gap: 14px; }
	.ejb-articles--une .ejb-article__lire  { font-size: 12px; }
	.ejb-articles--une .ejb-article__date  { font-size: 14px; }
	.ejb-articles--une .ejb-article__titre { font-size: 21px; }
	.ejb-articles--satellite .ejb-article__titre { font-size: 18px; }
	.ejb-articles--interview .ejb-article__titre { font-size: 21px; }
	.ejb-articles--grille .ejb-article__titre { font-size: 20px; }

	.ejb-articles--cote .ejb-article__lien { gap: 24px; }
	.ejb-articles--cote .ejb-article__titre { font-size: 24px; }
	.ejb-articles--cote .ejb-article__extrait { font-size: 15px; }
}

/* Grille étirée : les cartes remplissent la hauteur qu'on leur donne plutôt
   que de suivre le rapport de leur visuel. Sert à la colonne de droite de la
   une, dont les blocs s'alignent sur la hauteur de l'article principal. */
.ej-grille-etiree,
.ej-grille-etiree > .elementor-widget-container,
.ej-grille-etiree .ejb-articles,
.ej-grille-etiree .ejb-article,
.ej-grille-etiree .ejb-article__lien {
	height: 100%;
	min-height: 0;
}

.ej-grille-etiree .ejb-article__visuel {
	flex: 1 1 auto;
	min-height: 0;
}

/* Le visuel est sorti du flux : sans cela, sa hauteur intrinsèque et la
   hauteur héritée de la colonne se définissent l'une par l'autre, et la
   carte enfle à chaque rendu. */
.ej-grille-etiree .ejb-article__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Empilée, la colonne n'impose plus de hauteur : les cartes reprennent celle
   de leur visuel, faute de quoi elles se réduisent à rien. */
@media (max-width: 1024px) {
	.ej-grille-etiree,
	.ej-grille-etiree > .elementor-widget-container,
	.ej-grille-etiree .ejb-articles,
	.ej-grille-etiree .ejb-article,
	.ej-grille-etiree .ejb-article__lien {
		height: auto;
	}

	.ej-grille-etiree .ejb-article__visuel img {
		position: static;
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* La une du mobile est une carte pleine page : son visuel passe au portrait,
   comme dans la maquette, là où le bureau la veut panoramique. Le plafond de
   hauteur évite qu'un grand téléphone n'en fasse une carte d'un écran entier :
   le recadrage suffit, l'image ne se déforme pas. */
@media (max-width: 767px) {
	.ejb-articles--une .ejb-article__visuel--large img {
		aspect-ratio: 9 / 10;
		max-height: 460px;
	}
}

/* ----------------------------------------------------------- Pagination */

/*
 * Les pages suivantes d'une rubrique. Le compte à gauche, les numéros à
 * droite : la barre reste lisible même quand la rubrique en compte huit.
 */

.ejb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--ej-bordure, #E4DFD8);
}

.ejb-pagination__compteur {
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1;
	color: var(--ej-gris, #6B6560);
}

/* Sans compte affiché, les numéros ne sont plus poussés à droite par lui :
   la marge automatique les y ramène. */
.ejb-pagination__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.ejb-pagination__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ej-bordure, #E4DFD8);
	border-radius: 999px;
	font-family: 'Bodoni Moda', serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--ej-encre, #12100E);
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-pagination__page:hover {
	border-color: var(--ej-or, #8C6A3F);
	color: var(--ej-encre, #12100E);
}

.ejb-pagination__page--courante {
	background-color: var(--ej-encre, #12100E);
	border-color: var(--ej-encre, #12100E);
	color: var(--ej-creme, #FAF8F5);
}

.ejb-pagination__ellipse {
	padding: 0 6px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1;
	color: var(--ej-gris, #6B6560);
}

.ejb-pagination__suivante {
	margin-left: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--ej-or, #8C6A3F);
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1;
	color: var(--ej-encre, #12100E);
}

/* Le bouton unique de la maquette mobile : pleine largeur, la suite d'un
   seul geste plutôt qu'un numéro à viser. */
.ejb-pagination--suite {
	justify-content: stretch;
	border-top: 0;
	margin-top: 22px;
	padding-top: 0;
}

.ejb-pagination__suite {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid var(--ej-encre, #12100E);
	border-radius: 999px;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ej-encre, #12100E);
	transition: background-color 300ms cubic-bezier(.2, .6, .2, 1), color 300ms;
}

/* Même précaution que sur les pastilles : la règle du kit sur les liens
   l'emporterait sur une simple classe, et le libellé disparaîtrait dans le
   fond sombre du survol. */
.ejb-pagination a.ejb-pagination__suite:hover {
	background-color: var(--ej-encre, #12100E);
	color: var(--ej-creme, #FAF8F5);
}

@media (max-width: 767px) {
	.ejb-pagination {
		margin-top: 32px;
		padding-top: 22px;
	}

	.ejb-pagination__page {
		min-width: 36px;
		height: 36px;
		font-size: 15px;
	}
}

/* ==================================================== Filtres de rubrique */

/*
 * La barre qui ouvre une page de rubrique : les pastilles qui resserrent la
 * liste. Les couleurs et les retraits viennent du panneau Elementor, la
 * structure et les états sont ici.
 */

.ejb-filtres {
	--ejb-filtre-ecart: 10px;
	--ejb-filtre-retrait: 10px 16px;
	--ejb-filtre-rayon: 999px;
	--ejb-filtre-encre: #6B6560;
	--ejb-filtre-trait: #E4DFD8;
	--ejb-filtre-trait-survol: #8C6A3F;
	--ejb-filtre-actif-encre: #FAF8F5;
	--ejb-filtre-actif-fond: #12100E;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	width: 100%;
}

.ejb-filtres__pastilles {
	display: flex;
	flex: 1 1 480px;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ejb-filtre-ecart);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Le défilement ne se déclenche que si la barre est réglée sur une seule
	   ligne : tant qu'elle revient à la ligne, rien ne déborde. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ejb-filtres__pastilles::-webkit-scrollbar {
	display: none;
}

.ejb-filtres__pastilles > li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le kit Elementor habille tous les liens d'une règle plus spécifique qu'une
   simple classe : les couleurs des pastilles et des liens de classement se
   posent donc depuis leur barre, faute de quoi elles ne passeraient pas. */
.ejb-filtres .ejb-filtre {
	display: inline-flex;
	align-items: center;
	padding: var(--ejb-filtre-retrait);
	border: 1px solid var(--ejb-filtre-trait);
	border-radius: var(--ejb-filtre-rayon);
	background-color: transparent;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1;
	color: var(--ejb-filtre-encre);
	white-space: nowrap;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1), color 300ms, background-color 300ms;
}

.ejb-filtres a.ejb-filtre:hover {
	border-color: var(--ejb-filtre-trait-survol);
	color: var(--ej-encre, #12100E);
}

.ejb-filtres .ejb-filtre--actif,
.ejb-filtres a.ejb-filtre--actif:hover {
	background-color: var(--ejb-filtre-actif-fond);
	border-color: var(--ejb-filtre-actif-fond);
	color: var(--ejb-filtre-actif-encre);
}

/*
 * Le gabarit pose la barre dans une bande à elle, avec ses retraits. Sept
 * rubriques du site n'ont pas de sous-rubrique : le widget n'y rend rien, et
 * la bande laisserait soixante pixels de vide entre l'en-tête et la liste.
 *
 * Le retrait se fait ici et non en PHP : le cache d'éléments d'Elementor sert
 * ces conteneurs depuis un rendu unique, partagé par toutes les rubriques.
 * Retirer la bande au rendu la retirerait aussi de celles qui la remplissent,
 * selon la page qui a chauffé le cache la première.
 */
.ej-bande-filtres:not(:has(.ejb-filtres)) {
	display: none;
}

/*
 * Les deux pavés de bas de rubrique se lisent sur la rubrique elle-même : les
 * repères saisis sur le terme, les maisons citées par ses articles. Sur une
 * rubrique qui n'a ni l'un ni l'autre, le gabarit ne doit pas laisser une bande
 * vide sous la liste — d'où ces deux retraits, qui regardent ce que la bande
 * contient vraiment.
 */

/* Titre, texte et liste s'effacent chacun quand leur champ est vide : sur une
   rubrique sans repères, la bande ne contient plus un seul widget. */
.ej-pave-reperes:not(:has(.elementor-widget)) {
	display: none;
}

.ej-pave-signatures:not(:has(.ejb-etiquettes)) {
	display: none;
}

/* ================================================ Rubrique mise à jour */

.ejb-maj {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ej-gris, #6B6560);
}

/* ======================================================= Vidéos courtes */

.ejb-videos {
	--ejb-colonnes: 3;
	--ejb-rayon: 6px;
	display: grid;
	grid-template-columns: repeat(var(--ejb-colonnes), minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

.ejb-video {
	display: block;
	min-width: 0;
	color: inherit;
}

.ejb-video__cadre {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--ejb-rayon);
	background-color: var(--ej-creme-ombre, #F1EDE7);
}

.ejb-video__cadre img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-video:hover .ejb-video__cadre img {
	transform: scale(1.03);
}

/*
 * L'aperçu du réel, posé sur sa couverture. Il ne se voit qu'une fois la
 * lecture lancée : le script l'annonce en posant « data-ejb-joue », sans quoi
 * un cadre noir couvrirait l'image pendant que la vidéo se charge.
 *
 * Le zoom du survol porte sur les images ; la vidéo s'en dispense — elle
 * remplace déjà la couverture, et l'agrandir en même temps ferait deux
 * mouvements pour un seul geste.
 */
.ejb-video__film {
	position: absolute;
	inset: 0;
	/* Au ras de la couverture qu'il remplace, sous le voile et les textes. */
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 320ms ease;
	pointer-events: none;
}

.ejb-video__film[data-ejb-joue] {
	opacity: 1;
}

/* Le bouton de lecture s'efface devant l'aperçu : il annonçait une vidéo qui
   est en train de jouer. */
.ejb-video__film[data-ejb-joue] ~ .ejb-video__lecture {
	opacity: 0;
}

/* Voile plus léger que celui des cartes : la vignette reste lisible sous le
   bouton de lecture, qui apporte déjà son propre contraste. */
.ejb-video__cadre::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Entre l'aperçu et les textes : sans quoi la vidéo, qui vient après lui
	   dans le flux, le couvrirait et le titre perdrait son fond. */
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .05) 32%, rgba(0, 0, 0, .62) 100%);
}

/* Sélecteur descendant : la règle du visuel de la vignette l'emporterait
   sinon, et le logo occuperait toute la carte. */
.ejb-video__cadre .ejb-video__reseau {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	width: 16px;
	height: 16px;
	object-fit: contain;
	opacity: .95;
	pointer-events: none;
}

.ejb-video__lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Au-dessus de l'aperçu, qui occupe le même plan que la couverture : il
	   doit rester lisible tant que la vidéo n'a pas pris la main. */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	transition: opacity 320ms ease;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(250, 248, 245, .8);
	border-radius: 50%;
	background-color: rgba(18, 16, 14, .18);
	backdrop-filter: blur(3px);
	color: var(--ej-creme, #FAF8F5);
	pointer-events: none;
}

/* Le triangle est optiquement décentré : on le décale d'un cheveu. */
.ejb-video__lecture svg {
	margin-left: 3px;
}

.ejb-video__legende {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(250, 248, 245, .9);
	pointer-events: none;
}

.ejb-video__filet {
	width: 14px;
	height: 1px;
	background-color: rgba(250, 248, 245, .5);
}

.ejb-video__duree {
	letter-spacing: .08em;
}

.ejb-video__titre {
	display: block;
	margin-top: 14px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ej-encre, #12100E);
}

/* Sur mobile, les vignettes ne s'empilent pas : elles défilent latéralement,
   dans la largeur de la section — mêmes marges à gauche et à droite que le
   reste de la page, rien qui déborde d'un côté ou de l'autre. */
@media (max-width: 767px) {
	.ejb-videos {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ejb-videos::-webkit-scrollbar {
		display: none;
	}

	.ejb-videos > * {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------- Le rail qui déborde */

/*
 * Les vignettes quittent la grille pour une file qui sort du cadre à droite :
 * une carte coupée au bord dit qu'il y en a d'autres, là où une grille close
 * laisse croire qu'on a tout vu.
 *
 * Le rail défile à la main partout, et tout seul quand le réglage le demande.
 * Le masque efface le bord droit plutôt que d'y poser un dégradé opaque : la
 * section change de fond d'une page à l'autre, un voile de couleur se verrait.
 */
.ejb-videos--rail {
	--ejb-carte: 288px;
	display: flex;
	overflow-x: auto;
	gap: 18px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent);
	mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent);
}

.ejb-videos--rail::-webkit-scrollbar {
	display: none;
}

.ejb-videos--rail > .ejb-video {
	flex: 0 0 var(--ejb-carte);
	scroll-snap-align: start;
}

/* Le masque du bord droit s'efface quand la file tient dans la largeur : rien
   ne dépasse, et un dégradé sur la dernière carte n'aurait pas de sens. */
@media (min-width: 768px) {
	.ejb-videos--rail[data-ejb-entier] {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* La règle mobile plus haut refait la mise en page de « .ejb-videos » : le
   rail la reprend à son compte pour garder sa largeur de carte. */
@media (max-width: 767px) {
	.ejb-videos--rail > .ejb-video {
		flex: 0 0 var(--ejb-carte);
	}
}

/* ------------------------------------------- La carte façon Instagram */

/*
 * La vignette devient une carte : l'avatar et le pseudo en haut, les icônes du
 * réseau à droite, la légende au centre et le compte repris en pied. Tout y est
 * décor — la carte entière est le lien vers le réel, et des icônes qui
 * paraîtraient cliquables sans l'être promettraient ce qu'elles ne tiennent pas.
 *
 * Les couleurs restent celles de la charte : le marine et l'or plutôt que les
 * roses du réseau, qui jureraient avec le reste de la page.
 */
.ejb-videos--carte .ejb-video__cadre {
	border-radius: 14px;
}

/* Un voile plus soutenu que celui de la vignette nue : quatre éléments de
   texte s'y posent, contre un seul auparavant. */
.ejb-videos--carte .ejb-video__cadre::after {
	background:
		linear-gradient(to bottom, rgba(15, 31, 53, .55) 0%, rgba(15, 31, 53, .10) 24%, rgba(15, 31, 53, .04) 40%, rgba(15, 31, 53, .58) 68%, rgba(15, 31, 53, .90) 100%);
}

.ejb-video__compte,
.ejb-video__pied-compte {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ejb-video__compte {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	max-width: calc(100% - 60px);
}

/* Le liseré reprend l'anneau du réseau, sans son dégradé : à seize pixels il
   ne se lirait pas, et l'or dit la même chose dans la langue du site.
   Sélecteur descendant, comme pour le logo du réseau : la règle du visuel de
   la vignette l'emporterait sinon, et l'avatar couvrirait la carte. */
.ejb-video__cadre .ejb-video__avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--ej-or, #C9A26B);
	padding: 1.5px;
	background-color: rgba(255, 255, 255, .9);
}

.ejb-video__pseudo {
	overflow: hidden;
	color: #FFF;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(15, 31, 53, .5);
}

.ejb-video__actions {
	position: absolute;
	top: 50%;
	right: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: translateY(-42%);
	color: #FFF;
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(15, 31, 53, .45));
}

.ejb-video__actions svg {
	width: 21px;
	height: 21px;
}

/* Le titre passe sur la vignette : au centre, comme sur le réseau, et non plus
   sous elle. Trois lignes au plus — au-delà, la vignette disparaît sous son
   propre texte. */
/* Posé au-dessus du pied plutôt qu'au centre : le bouton de lecture tient le
   milieu de la carte, et deux textes superposés ne se lisaient ni l'un ni
   l'autre. */
.ejb-video__accroche {
	position: absolute;
	right: 46px;
	bottom: 44px;
	left: 16px;
	z-index: 2;
	display: -webkit-box;
	overflow: hidden;
	color: #FFF;
	font-family: var(--ej-titre, "Newsreader"), Georgia, serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	text-shadow: 0 1px 6px rgba(15, 31, 53, .55);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ejb-video__pied {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ejb-video__appel {
	flex: 0 0 auto;
	color: #FFF;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
}


/* =============================================== Bandeau de partenaires */

.ejb-bandeau {
	display: flex;
	align-items: center;
	gap: 34px;
	width: 100%;
	min-width: 0;
}

.ejb-bandeau__intitule,
.ejb-bandeau__lien {
	flex: none;
	white-space: nowrap;
}

.ejb-bandeau__lien {
	padding-bottom: 4px;
	border-bottom: 1px solid #8C6A3F;
	transition: opacity 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-bandeau__lien:hover {
	opacity: .65;
}

/* La fenêtre masque le débord et estompe les deux bords. */
.ejb-bandeau__fenetre {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ejb-bandeau__piste {
	display: flex;
	width: max-content;
	animation: ejb-defilement 60s linear infinite;
}

.ejb-bandeau__serie {
	display: flex;
	align-items: center;
	flex: none;
}

.ejb-bandeau--pause:hover .ejb-bandeau__piste {
	animation-play-state: paused;
}

.ejb-bandeau__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	color: inherit;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-bandeau__pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: 'Bodoni Moda', serif;
	font-size: 10px;
	line-height: 1;
}

/*
 * Le logotype prend la place de la pastille d'initiales, à la même hauteur.
 * Sa largeur reste libre : un logotype large se lit, un carré aussi, et les
 * forcer dans le même cercle les déformerait tous.
 *
 * Le bandeau est marine ; les logotypes fournis sont noirs sur fond blanc pour
 * la plupart. Le filtre les rend en clair sans demander un second fichier à
 * chaque partenaire.
 */
/*
 * Sélecteur descendant, comme ailleurs dans la feuille : « .elementor img »
 * impose sa hauteur automatique, et l'image reprendrait celle de son fichier —
 * trois cents pixels de haut pour un bandeau qui en fait trente.
 *
 * Les logotypes arrivent dans toutes les teintes : celui-ci noir, celui-là
 * déjà blanc, un troisième en couleur. « brightness(0) » les ramène tous au
 * noir, et l'opacité les relève au gris du nom écrit juste à côté — la file
 * garde une seule encre, et aucun logotype ne pèse plus qu'un autre.
 */
.ejb-bandeau__item .ejb-bandeau__logo {
	flex: none;
	width: auto;
	height: 22px;
	max-width: 90px;
	object-fit: contain;
	filter: brightness(0);
	opacity: .55;
}

.ejb-bandeau__nom {
	font-family: 'Bodoni Moda', serif;
	font-size: 14px;
	line-height: 1;
}

@keyframes ejb-defilement {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Le défilement automatique est une animation décorative : on la coupe. */
@media (prefers-reduced-motion: reduce) {
	.ejb-bandeau__piste {
		animation: none;
	}

	.ejb-bandeau__fenetre {
		overflow-x: auto;
	}
}

/* Empilé, le bandeau garde son intitulé — la maquette mobile le conserve — et
   abandonne l'invitation à devenir partenaire, faute de place sur la ligne. */
@media (max-width: 767px) {
	.ejb-bandeau {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	/* Aligné sous son intitulé, le bandeau part du bord gauche : seul le bord
	   droit s'estompe, celui vers lequel le défilement se poursuit. */
	.ejb-bandeau__fenetre {
		width: 100%;
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent);
	}

	.ejb-bandeau__lien {
		display: none;
	}
}

/* ================================================ Grille de partenaires */

.ejb-partenaires {
	display: grid;
	grid-template-columns: 1fr var(--ejb-panneau, .56fr);
	gap: clamp(24px, 3vw, 48px);
	width: 100%;
}

.ejb-partenaires__grille {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ejb-partenaires__case {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 89px;
	margin: 0 -1px -1px 0; /* les filets des cases voisines se superposent */
	padding: 14px 12px;
	border: 1px solid rgba(250, 248, 245, .14);
	background: none;
	font-family: 'Bodoni Moda', serif;
	font-size: 15px;
	line-height: 1.25;
	text-align: center;
	color: rgba(250, 248, 245, .78);
	cursor: pointer;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1), background-color 300ms cubic-bezier(.2, .6, .2, 1);
}

/*
 * C'est un vrai bouton : la feuille de remise à zéro du thème lui donne le
 * fond rose des boutons de formulaire dès qu'il prend le focus. Or, après un
 * clic, le focus reste sur la case pendant que la souris passe à la voisine —
 * la case cliquée virait au rose. Le focus seul ne dessine donc rien : c'est
 * la classe est-actif qui marque la case, et le clavier, qui active au focus,
 * la reçoit toujours. La règle précède celles du survol et de l'état actif,
 * qui doivent l'emporter à spécificité égale.
 */
.ejb-partenaires__case:focus {
	background-color: transparent;
	outline: none;
}

.ejb-partenaires__case:focus-visible {
	outline: 1px solid rgba(250, 248, 245, .5);
	outline-offset: -4px;
}

.ejb-partenaires__case:hover,
.ejb-partenaires__case.est-actif {
	background-color: rgba(250, 248, 245, .04);
}

/* La grille et le panneau se calent sur la même hauteur : c'est le panneau qui
   la donne, ses lignes de description variant d'un partenaire à l'autre. */
.ejb-partenaires__panneau {
	display: grid;
	padding: 30px 32px;
	border: 1px solid rgba(250, 248, 245, .14);
}

/* Les fiches occupent toutes la même cellule : le panneau prend la hauteur de
   la plus longue et ne bouge plus quand on passe d'un partenaire à l'autre.
   visibility plutôt que display : les fiches masquées gardent leur place, et
   sortent du parcours au clavier comme des lecteurs d'écran. */
.ejb-partenaires__fiche {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	visibility: hidden;
}

.ejb-partenaires__fiche.est-actif {
	visibility: visible;
}

.ejb-partenaires__nature {
	margin-bottom: 14px;
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

.ejb-partenaires__titre {
	margin: 0 0 14px;
	font-family: Newsreader, serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.ejb-partenaires__texte {
	margin: 0 0 28px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

.ejb-partenaires__site {
	margin-top: auto;
	align-self: flex-start;
	padding-bottom: 6px;
	border-bottom: 1px solid #C9A26B;
	font-family: Inter, sans-serif;
	font-size: 14px;
	transition: opacity 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-partenaires__site:hover {
	opacity: .7;
}

@media (max-width: 1024px) {
	.ejb-partenaires {
		grid-template-columns: 1fr;
	}
}

/*
 * Le pavé qui porte la grille — titre, invitation et panneau compris — prend
 * le dégradé oblique de la baseline du bandeau : même famille marine, même
 * écart faible d'un bout à l'autre, de sorte qu'il se lise comme un relief
 * et non comme un aplat raté.
 *
 * Le conteneur n'a pas de classe à lui dans Elementor, seulement sa couleur
 * de fond ; on le vise donc par son contenu, et par lui seul — le « > »
 * écarte les conteneurs parents, qui garderaient sinon le même dégradé.
 * Le dégradé est une image de fond : il se pose par-dessus le #0F1F35
 * qu'Elementor écrit en ligne, sans qu'il faille lui disputer la priorité.
 */
.e-con:has(> .e-con-inner > .elementor-widget-ej-grille-partenaires),
.e-con:has(> .elementor-widget-ej-grille-partenaires) {
	background-image: var(--ej-degrade-marine, linear-gradient(102deg, #1D3A63 0%, #0F1F35 58%, #16294A 100%));
}

/* ------------------------------------------- La même liste, sur mobile */

/* Sur grand écran, la liste double la grille : elle reste hors du rendu. */
.ejb-partenaires__liste {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ejb-partenaires__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: inherit;
}

.ejb-partenaires__liste li:last-child .ejb-partenaires__ligne {
	border-bottom-color: transparent;
}

.ejb-partenaires__ligne-texte {
	min-width: 0;
}

.ejb-partenaires__ligne-nom {
	display: block;
	font-family: Newsreader, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ej-creme, #FAF8F5);
}

.ejb-partenaires__ligne-detail {
	display: block;
	margin-top: 5px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(250, 248, 245, .55);
}

.ejb-partenaires__ligne-fleche {
	flex: none;
	color: rgba(250, 248, 245, .5);
}

@media (max-width: 767px) {
	.ejb-partenaires__grille,
	.ejb-partenaires__panneau {
		display: none;
	}

	.ejb-partenaires__liste {
		display: block;
	}
}

/* ==================================================== Filtre de grille */

.ejb-filtre {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ej-encre, #12100E);
}

.ejb-filtre__icone {
	flex: none;
}

/* Sur mobile, le champ se referme en pastille : le filet devient un cadre.
   Sa couleur reste réglée depuis le widget, par appareil. */
@media (max-width: 767px) {
	.ejb-filtre {
		gap: 12px;
		padding: 14px 18px;
		border-width: 1px;
		border-style: solid;
		border-radius: 999px;
	}

	/* Le texte indicatif se coupe net sur un écran étroit : mieux vaut le
	   suspendre proprement. */
	.ejb-filtre input.ejb-filtre__champ {
		font-size: 15px;
		text-overflow: ellipsis;
	}
}

/* Étiquette réservée aux lecteurs d'écran. */
.ejb-filtre__etiquette {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sélecteur porté sur l'élément : le thème habille les champs avec un cadre
   via input[type="search"], plus spécifique qu'une simple classe. La maquette
   ne veut qu'un filet sous la ligne entière. */
input.ejb-filtre__champ {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.ejb-filtre__champ:focus {
	outline: none;
}

.ejb-filtre__champ::-webkit-search-cancel-button {
	cursor: pointer;
}

/* Message injecté par le script quand la recherche ne renvoie rien. */
.ejb-aucun-resultat {
	grid-column: 1 / -1;
	padding: 34px 4px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	color: #6B6560;
}

/* Le reset du thème pose white-space: nowrap sur les boutons : les noms de
   partenaires doivent pouvoir revenir à la ligne dans leur case. */
.ejb-partenaires__case {
	white-space: normal;
	hyphens: auto;
}

/* ====================================================== Liste en regard */

/*
 * Lignes séparées par un filet, intitulé à gauche et valeur à droite. Seule
 * la structure vit ici : couleurs, typographies, hauteurs et écarts arrivent
 * en variables depuis les contrôles du widget.
 */

.ejb-regard {
	--ejb-regard-hauteur: 15px;
	--ejb-regard-ecart: 20px;
	--ejb-regard-base: 260px;
	--ejb-regard-mesure: 34ch;
	--ejb-regard-repere: 110px;
	--ejb-regard-filet-tete: #12100E;
	--ejb-regard-filet: #E4DFD8;

	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ejb-regard-filet-tete);
}

.ejb-regard__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 6px var(--ejb-regard-ecart);
	padding: var(--ejb-regard-hauteur) 0;
	border-bottom: 1px solid var(--ejb-regard-filet);
}

/* La maquette laisse la liste ouverte : le dernier filet ne se pose que si
   l'éditeur le demande. La bordure reste en place et devient transparente,
   pour que la hauteur des lignes ne bouge pas d'un réglage à l'autre. */
.ejb-regard:not(.ejb-regard--ferme) .ejb-regard__ligne:last-child {
	border-bottom-color: transparent;
}

.ejb-regard__tete,
.ejb-regard__intitule,
.ejb-regard__surtitre,
.ejb-regard__valeur {
	margin: 0;
	min-width: 0;
}

/* --- Caractéristique : intitulé à gauche, valeur poussée à droite. */

.ejb-regard--specification .ejb-regard__ligne {
	align-items: baseline;
	justify-content: space-between;
}

.ejb-regard--specification .ejb-regard__valeur {
	max-width: var(--ejb-regard-mesure);
	text-align: right;
}

/* --- Engagement : deux colonnes qui se partagent la largeur. */

.ejb-regard--charte .ejb-regard__tete {
	flex: 1 1 var(--ejb-regard-base);
}

.ejb-regard--charte .ejb-regard__valeur {
	/* Base plus large que celle de l'intitulé : le texte garde la colonne de
	   droite tant que la ligne peut accueillir les deux, et passe dessous
	   d'un seul coup quand elle ne le peut plus. */
	flex: 1 1 calc(var(--ejb-regard-base) * 1.55);
}

/* --- Entrée datée : les deux textes s'empilent, la date au-dessus. */

.ejb-regard--empilee .ejb-regard__ligne {
	flex-direction: column;
	gap: 8px;
}

/* --- Repère : la date tient sa colonne, le titre et le texte s'empilent dans
   la seconde. Une grille plutôt qu'une boîte flexible : c'est le seul moyen
   d'aligner deux éléments frères sous un troisième qui les enjambe. */

.ejb-regard--chronologie .ejb-regard__ligne {
	display: grid;
	grid-template-columns: var(--ejb-regard-repere) minmax(0, 1fr);
	column-gap: var(--ejb-regard-ecart);
	row-gap: 8px;
	align-items: start;
}

.ejb-regard--chronologie .ejb-regard__ligne > .ejb-regard__surtitre {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-top: 0;
}

/* La date manquante ne doit pas décaler le titre dans sa colonne. */
.ejb-regard--chronologie .ejb-regard__tete,
.ejb-regard--chronologie .ejb-regard__valeur {
	grid-column: 2;
}

/* --- Le surtitre, en dessous par défaut, ou en tête de ligne. */

.ejb-regard__surtitre {
	margin-top: var(--ejb-regard-surtitre, 0);
}

.ejb-regard--surtitre-dessus .ejb-regard__tete {
	display: flex;
	flex-direction: column;
}

.ejb-regard--surtitre-dessus .ejb-regard__surtitre {
	order: -1;
	margin-top: 0;
}

.ejb-regard--surtitre-dessus .ejb-regard__intitule {
	margin-top: var(--ejb-regard-surtitre, 0);
}

/* =========================================================== Signatures */

/*
 * Le sommaire de la rédaction. Deux dispositions : des fiches en rangées, qui
 * tiennent debout même à une seule signature, et une grille pour quand la
 * rédaction s'étoffe. Tout ce que l'éditeur règle passe par une variable.
 */

.ejb-signatures {
	--ejb-signatures-colonnes: 3;
	--ejb-signatures-gouttiere: 44px;
	--ejb-signature-portrait: 260px;
	--ejb-signature-ecart: 48px;
	--ejb-signature-rayon: 8px;
	--ejb-signature-filet: #E4DFD8;
	--ejb-signature-trait: #8C6A3F;

	width: 100%;
}

.ejb-signatures__vide {
	margin: 0;
	padding: 30px 0;
	font-family: Inter, sans-serif;
	font-size: 15px;
	color: var(--ej-gris, #6B6560);
}

/* ------------------------------------------------------- Le portrait */

.ejb-signature__portrait {
	display: block;
	overflow: hidden;
	border-radius: var(--ejb-signature-rayon);
	background-color: var(--ej-creme-ombre, #F1EDE7);
}

.ejb-signature__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-signature:hover .ejb-signature__portrait img {
	transform: scale(1.03);
}

/* ------------------------------------------------------ Le bloc texte */

.ejb-signature__corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

/* Sélecteur descendant : le kit Elementor habille les h1-h6 avec un sélecteur
   plus spécifique qu'une simple classe, et imposerait sa taille de titre. */
.ejb-signatures .ejb-signature__nom {
	margin: 0;
	font-family: Newsreader, serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--ej-encre, #12100E);
}

.ejb-signature__nom a {
	color: inherit;
}

.ejb-signature__nom a:hover {
	color: var(--ej-or, #8C6A3F);
}

/* L'écart du nom à sa fonction est plus serré que le reste : ils se lisent
   comme un seul bloc d'identité. */
.ejb-signature__fonction {
	margin-top: -6px;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ej-or, #8C6A3F);
}

.ejb-signature__presentation {
	margin: 0;
	max-width: 58ch;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ej-gris, #6B6560);
}

.ejb-signature__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-top: auto;
	padding-top: 4px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ej-gris, #6B6560);
}

.ejb-signature__lien {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ejb-signature-trait);
	color: var(--ej-encre, #12100E);
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-signature__lien:hover {
	color: var(--ej-or, #8C6A3F);
}

.ejb-signature__fleche {
	flex: none;
}

/* ------------------------------------------- Fiche en ligne, en rangées */

.ejb-signatures--ligne {
	display: flex;
	flex-direction: column;
	gap: var(--ejb-signatures-gouttiere);
}

.ejb-signatures--ligne .ejb-signature {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ejb-signature-ecart);
}

/* Le portrait garde sa largeur réglée, le texte prend ce qui reste — mais
   passe dessous plutôt que de s'écraser sous 320 px. */
.ejb-signatures--ligne .ejb-signature__portrait {
	flex: 0 1 var(--ejb-signature-portrait);
	width: var(--ejb-signature-portrait);
	max-width: 100%;
}

.ejb-signatures--ligne .ejb-signature__corps {
	flex: 1 1 320px;
	padding-top: 6px;
}

/* Le filet sépare les fiches sans fermer la liste : le dernier reste absent. */
.ejb-signatures--filets .ejb-signature + .ejb-signature {
	padding-top: var(--ejb-signatures-gouttiere);
	border-top: 1px solid var(--ejb-signature-filet);
}

/* ------------------------------------------------------------- Grille */

.ejb-signatures--grille {
	display: grid;
	grid-template-columns: repeat(var(--ejb-signatures-colonnes), minmax(0, 1fr));
	gap: var(--ejb-signatures-gouttiere);
}

.ejb-signatures--grille .ejb-signature {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	height: 100%;
}

.ejb-signatures--grille .ejb-signature__corps {
	flex-grow: 1;
}

.ejb-signatures--grille .ejb-signature__nom {
	font-size: 26px;
}

.ejb-signatures--grille .ejb-signature__presentation {
	font-size: 15px;
	line-height: 1.7;
}

/* --- Repli d'ensemble.

   Dans une caractéristique, la valeur se pose à droite de son intitulé et
   revient dessous quand la place manque. Une ligne à ligne, ce retour dépend
   de la longueur du texte : « Plus de 25 ans en joaillerie parisienne » passe
   dessous quand « CNE-Art » tient encore à droite, et la colonne se disloque.

   Le script du plugin repère le premier retour et pose la classe sur la liste
   entière : à partir de là, toutes les lignes s'empilent, alignées à gauche.
   Sans le script, la liste garde son comportement d'origine. */

.ejb-regard--specification.ejb-regard--replie .ejb-regard__ligne {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
}

.ejb-regard--specification.ejb-regard--replie .ejb-regard__valeur {
	max-width: none;
	text-align: left;
}


/* ============================================================== Lexique */

/*
 * Les définitions du lexique gemmologique : l'index alphabétique, puis les
 * entrées séparées par un filet.
 *
 * Tous les réglages passent par des variables, posées depuis les contrôles du
 * widget. Elles le sont sur l'enveloppe de ce dernier, et non sur la liste ou
 * sur l'index : ces deux-là sont frères, une même valeur doit les atteindre
 * tous les deux. Les valeurs de repli ci-dessous se posent donc au même
 * endroit — sur la liste, elles l'emporteraient sur les valeurs héritées et
 * les paliers tablette et mobile ne s'appliqueraient jamais.
 */

.elementor-widget-ej-lexique {
	--ejb-lexique-hauteur: 28px;
	--ejb-lexique-ecart: 48px;
	--ejb-lexique-tete: 220px;
	--ejb-lexique-definition: 400px;
	--ejb-lexique-mesure: 66ch;
	--ejb-lexique-categorie: 10px;
	--ejb-lexique-ancre: 24px;
	--ejb-lexique-index-ecart: 24px;
	--ejb-lexique-index-marge: 56px;
	--ejb-lexique-rail-reserve: 8px;
	--ejb-lexique-filet-tete: #12100E;
	--ejb-lexique-filet: #E4DFD8;
	--ejb-ornement-largeur: 420px;
	--ejb-ornement-marge: 0px;
	--ejb-ornement-cale: 120px;
	--ejb-ornement-opacite: .55;
}

.ejb-lexique {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ejb-lexique-filet-tete, #12100E);
}

.ejb-lexique__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 10px var(--ejb-lexique-ecart, 48px);
	padding: var(--ejb-lexique-hauteur, 28px) 0;
	border-bottom: 1px solid var(--ejb-lexique-filet, #E4DFD8);

	/* L'index amène ici par une ancre : sans cette réserve, le terme visé se
	   collerait au bord haut de la fenêtre. */
	scroll-margin-top: var(--ejb-lexique-ancre, 24px);
}

/* Le filtre de recherche masque les lignes avec l'attribut « hidden », que la
   déclaration « display: flex » ci-dessus annulerait sans cette règle. */
.ejb-lexique__ligne[hidden] {
	display: none;
}

.ejb-lexique--ouverte .ejb-lexique__ligne:last-child {
	border-bottom-color: transparent;
}

/* La colonne du terme ne grandit pas : toute la largeur gagnée revient à la
   définition, comme dans la maquette. Sous la base de cette dernière, la
   définition repasse sous le terme. */
.ejb-lexique__tete {
	flex: 0 1 var(--ejb-lexique-tete, 220px);
	min-width: 0;

	/* Le terme et sa catégorie s'empilent par défaut, comme dans la maquette,
	   et se mettent sur une ligne quand le widget le demande. L'écart sert
	   dans les deux sens — vertical empilé, horizontal côte à côte — d'où un
	   « gap » plutôt qu'une marge posée sous le terme. */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--ejb-lexique-categorie, 10px);
}

.ejb-lexique__terme {
	margin: 0;
	min-width: 0;
}

.ejb-lexique__categorie {
	min-width: 0;
}

.ejb-lexique__definition {
	flex: 1 1 var(--ejb-lexique-definition, 400px);
	min-width: 0;
	max-width: var(--ejb-lexique-mesure, 66ch);
	margin: 0;
}

/* --- L'index alphabétique, en tête de liste. */

/*
 * La rangée de tête réunit l'index et, quand la place manque en haut de page
 * pour le champ de recherche, ce dernier. L'écart sous la rangée est porté ici
 * et non sur l'index : celui-ci se met en retrait négatif dès qu'il défile.
 */
.ejb-lexique__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px var(--ejb-lexique-entete-ecart, 40px);
	margin-bottom: var(--ejb-lexique-index-marge, 56px);
}

.ejb-lexique__index {
	display: flex;
	flex-wrap: wrap;
	gap: 12px var(--ejb-lexique-index-ecart, 24px);

	/* L'index prend la largeur laissée par le champ. La base nulle le laisse
	   se resserrer jusqu'à défiler plutôt que de repousser le champ. */
	flex: 1 1 0;
	min-width: 0;
}

/* Le champ de recherche de la rangée : masqué par défaut, il n'apparaît qu'aux
   largeurs où le widget le demande. */
/* Deux classes : le cadre du filtre se donne « width: 100% » pour occuper la
   colonne où il est posé seul. Ici il partage la rangée de l'index, c'est la
   base flexible qui doit décider de sa largeur — sinon il réclame la ligne
   entière et l'index se retrouve rejeté au-dessus. */
.ejb-lexique__entete .ejb-lexique__recherche {
	display: none;
	flex: 0 1 var(--ejb-lexique-recherche, 320px);
	width: auto;
	min-width: 0;

	/* Posé seul dans une colonne, le champ souligne sa ligne. Ici il partage la
	   rangée de l'index : ce filet ne ferait qu'ajouter de la hauteur sous une
	   rangée que les lettres tiennent déjà. */
	padding-bottom: 0;
	border-bottom: 0;
}

.ejb-lexique__lettre {
	line-height: 1;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Le message du filtre de recherche rejoint la liste sous forme de <li> : sans
   cela il hériterait de la puce et du filet des entrées. */
.ejb-lexique > .ejb-aucun-resultat {
	list-style: none;
	border: 0;
}

/* Sur mobile, l'index tient sur une ligne et défile latéralement : à seize
   lettres il repassait à la ligne pour deux d'entre elles, et le bloc gagnait
   une hauteur pour presque rien. Même dessin que les vignettes vidéo — pas de
   barre de défilement visible, le dernier caractère coupé au bord suffit à
   dire que la ligne continue. */
@media (max-width: 1024px) {
	.ejb-lexique__index--rail {
		/* « overflow-x: auto » fait passer « overflow-y » à « auto » lui aussi :
		   la boîte du rail se met à rogner ce qui la dépasse en hauteur. Or une
		   capitale Bodoni déborde largement de sa ligne quand l'interligne vaut
		   1 — le haut des lettres était coupé, et le rail gagnait quelques
		   pixels de défilement vertical parasite. Cette réserve les remet à
		   l'abri ; les marges la reprennent aussitôt, pour que l'écart réglé
		   depuis l'éditeur reste celui qu'on mesure à l'écran.

		   Elle est en pixels et non en em : em se résoudrait sur la taille de
		   texte héritée par le rail, pas sur celle des lettres, qui est réglée
		   à part. Huit pixels couvrent le débordement jusqu'à une trentaine de
		   pixels de corps — bien au-delà des dix-sept de la charte. */
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-block: var(--ejb-lexique-rail-reserve);
		margin-block: calc(var(--ejb-lexique-rail-reserve) * -1);
	}

	.ejb-lexique__index--rail::-webkit-scrollbar {
		display: none;
	}

	/* Sans cela, une lettre se laisse comprimer par la ligne au lieu de la
	   faire défiler. */
	.ejb-lexique__index--rail .ejb-lexique__lettre {
		flex: none;
	}
}

/* Sur mobile, la rangée de tête s'empile et le champ ouvre la marche : il se
   referme alors en pastille sur toute la largeur, comme dans la maquette, et
   l'index défile dessous. */
@media (max-width: 767px) {
	/* La maquette mobile détache l'index du reste : une bande à part, ouverte
	   et fermée par un filet clair, que les lettres parcourent en défilant. */
	.ejb-lexique__entete {
		flex-direction: column;
		align-items: stretch;

		/* Impératif : en colonne, « flex-wrap: wrap » fait une colonne à
		   plusieurs lignes, dont la largeur se mesure sur le contenu. L'index
		   ne s'étirait plus au conteneur mais à sa ligne, prenait la largeur de
		   ses lettres bout à bout et faisait déborder la page entière au lieu
		   de défiler dans sa bande. */
		flex-wrap: nowrap;

		/* Empilé, c'est l'écart entre les lignes qui sépare le champ de l'index :
		   le réglage doit le piloter là comme il pilote l'écart latéral en
		   rangée, sans quoi il resterait sans effet sur petit écran. */
		row-gap: var(--ejb-lexique-entete-ecart, 40px);

		padding-block: var(--ejb-lexique-bande, 14px);
		border-top: 1px solid var(--ejb-lexique-filet, #E4DFD8);
		border-bottom: 1px solid var(--ejb-lexique-filet, #E4DFD8);

		/* Le rail ferme la bande : sa marge basse négative en rognerait la
		   hauteur, et les lettres passeraient sous le filet. La réserve se
		   reprend donc ici, une fois, sur l'écart réglé dans l'éditeur — le
		   résultat à l'écran est le même. */
		margin-bottom: calc(var(--ejb-lexique-index-marge, 56px) - var(--ejb-lexique-rail-reserve, 8px));
	}

	/* « flex: 1 1 0 » vise la largeur dans la rangée ; une fois la rangée en
	   colonne, cette base porte sur la hauteur. Et comme le rail est une boîte
	   de défilement, sa hauteur minimale automatique vaut zéro : les lettres se
	   retrouvaient écrasées sous le filet de la liste. */
	.ejb-lexique__index {
		flex: none;
	}

	.ejb-lexique__index--rail {
		margin-bottom: 0;
	}

	/* Des créneaux de largeur égale : en défilant, les lettres gardent un pas
	   régulier et une cible tactile utilisable. */
	.ejb-lexique__index--rail .ejb-lexique__lettre {
		min-width: 24px;
		text-align: center;
	}

	/* Même portée que la règle de rangée plus haut, sans quoi la base flexible
	   de 320 px, posée pour une largeur, s'appliquerait à la HAUTEUR du champ
	   une fois la rangée en colonne — la pastille s'étirait en ellipse. */
	.ejb-lexique__entete .ejb-lexique__recherche {
		order: -1;
		flex: none;
	}
}

/* =========================================================== Étiquettes */

/*
 * La bande de pastilles cerclées : motifs et collections d'une maison, renvois
 * vers les autres signatures. Même dessin que les pastilles posées à la main
 * avec la « Liste d'icônes » ; tout ce que l'éditeur règle passe par une
 * variable.
 */

.ejb-etiquettes {
	--ejb-etiquette-ecart: 10px;
	--ejb-etiquette-retrait: 10px 16px;
	--ejb-etiquette-rayon: 999px;
	--ejb-etiquette-encre: #12100E;
	--ejb-etiquette-trait: #E4DFD8;
	--ejb-etiquette-trait-survol: #8C6A3F;

	display: flex;
	flex-wrap: wrap;
	gap: var(--ejb-etiquette-ecart);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ejb-etiquette {
	display: block;
	padding: var(--ejb-etiquette-retrait);
	border: 1px solid var(--ejb-etiquette-trait);
	border-radius: var(--ejb-etiquette-rayon);
	color: var(--ejb-etiquette-encre);
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

.ejb-etiquette--lien {
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-etiquette--lien:hover,
.ejb-etiquette--lien:focus-visible {
	border-color: var(--ejb-etiquette-trait-survol);
	color: var(--ejb-etiquette-encre);
}

/* ==================================================================== */
/*  Répertoire des maisons — page des Signatures                        */
/*                                                                      */
/*  Deux dessins pour un seul widget : l'index alphabétique qui ouvre    */
/*  la page, et le répertoire par plages qui la ferme.                   */
/*                                                                      */
/*  Comme pour le lexique, les valeurs de repli sont posées sur          */
/*  l'enveloppe du widget et non sur la liste : Elementor écrit ses      */
/*  paliers tablette et mobile sur cette même enveloppe, et une valeur   */
/*  posée plus bas l'emporterait sur celles qu'ils héritent.             */
/* ==================================================================== */

.elementor-widget-ej-repertoire-maisons {
	--ejb-maisons-hauteur: 38px;
	--ejb-maisons-ecart: 64px;
	--ejb-maisons-tete: 110px;
	--ejb-maisons-noms: 560px;
	--ejb-maisons-noms-ecart: 26px;
	--ejb-maisons-index-ecart: 24px;
	--ejb-maisons-rail-reserve: 8px;
	--ejb-maisons-ancre: 32px;
	--ejb-maisons-filet: #E4DFD8;
	--ejb-maisons-trait: #8C6A3F;
	--ejb-ornement-largeur: 420px;
	--ejb-ornement-marge: 0px;
	--ejb-ornement-cale: 120px;
	--ejb-ornement-opacite: .55;
}

/* --- Le répertoire, par plages de lettres. */

.ejb-maisons {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--ejb-maisons-filet, #E4DFD8);
}

.ejb-maisons--ouverte {
	border-bottom: 0;
}

/* Chaque groupe ouvre sur un filet : les groupes se suivent sans que le
   dernier ait à s'en soucier, celui du bas revient à la liste. */
.ejb-maisons__groupe {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 18px var(--ejb-maisons-ecart, 64px);
	padding: var(--ejb-maisons-hauteur, 38px) 0;
	border-top: 1px solid var(--ejb-maisons-filet, #E4DFD8);
}

/*
 * Comme pour une maison plus bas : le « display » posé ici l'emporterait sur
 * le « display: none » que le navigateur applique à [hidden], et un groupe
 * vidé par la recherche garderait sa lettre et son filet au-dessus du vide.
 */
.ejb-maisons__groupe[hidden] {
	display: none;
}

/* La colonne de l'intitulé ne grandit pas : toute la largeur gagnée revient
   aux noms, comme dans la maquette. Sous la base de ces derniers, ils
   repassent sous l'intitulé. */
.ejb-maisons__intitule {
	flex: 0 0 var(--ejb-maisons-tete, 110px);
	min-width: 0;
}

.ejb-maisons__noms {
	display: flex;
	flex-wrap: wrap;
	gap: 14px var(--ejb-maisons-noms-ecart, 26px);
	flex: 1 1 var(--ejb-maisons-noms, 560px);
	min-width: 0;
}

/* Le soulignement se pose déjà transparent : sans lui, le nom sauterait d'un
   pixel au survol, quand la bordure apparaîtrait. */
.ejb-maisons__nom {
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-maisons__nom:hover,
.ejb-maisons__nom:focus-visible {
	border-bottom-color: var(--ejb-maisons-trait, #8C6A3F);
}

/* Les ancres de lettres n'ont rien à montrer : elles ne servent qu'à recevoir
   le défilement, avec la réserve réglée dans l'éditeur au-dessus d'elles.
   Elles sortent du flux : restées éléments flexibles, chacune ajoutait une
   gouttière de la largeur réglée entre l'intitulé et le bord du groupe — trois
   lettres couvertes décalaient l'intitulé de près de deux cents pixels. */
.ejb-maisons__ancre {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	scroll-margin-top: var(--ejb-maisons-ancre, 32px);
}

/* --- L'index alphabétique. */

.ejb-maisons__index {
	display: flex;
	flex-wrap: wrap;
	gap: 12px var(--ejb-maisons-index-ecart, 24px);
}

/* La lettre est tantôt un lien vers un groupe, tantôt un bouton qui trie le
   mur : le dessin doit être le même dans les deux cas, d'où la remise à zéro
   de l'habillage que le navigateur donne aux boutons. Le filet se pose déjà
   transparent, pour que la lettre retenue ne décale pas la ligne. */
.ejb-maisons__lettre {
	appearance: none;
	margin: 0;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font: inherit;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1),
		border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Le thème couvre tout bouton d'un fond magenta au survol et au focus, avec
   un sélecteur d'élément que la classe seule ne dépasse pas. La lettre, elle,
   ne change que de couleur — celle réglée dans l'éditeur, dont le sélecteur
   passe devant les deux. */
button.ejb-maisons__lettre:hover,
button.ejb-maisons__lettre:focus {
	background: none;
	text-decoration: none;
}

/* Sur petit écran, l'index tient sur une ligne et défile latéralement : à
   vingt lettres il repassait à la ligne pour trois d'entre elles, et la bande
   gagnait une hauteur pour presque rien. Même dessin que l'index du lexique. */
@media (max-width: 1024px) {
	.ejb-maisons__index--rail {
		/* « overflow-x: auto » fait passer « overflow-y » à « auto » lui aussi :
		   une capitale Bodoni déborde de sa ligne quand l'interligne vaut 1, et
		   le rail gagnait quelques pixels de défilement vertical parasite.
		   La réserve met les lettres à l'abri ; les marges la reprennent
		   aussitôt, pour que l'écart réglé dans l'éditeur reste celui qu'on
		   mesure à l'écran. */
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-block: var(--ejb-maisons-rail-reserve);
		margin-block: calc(var(--ejb-maisons-rail-reserve) * -1);
	}

	.ejb-maisons__index--rail::-webkit-scrollbar {
		display: none;
	}

	/* Sans cela, une lettre se laisse comprimer par la ligne au lieu de la
	   faire défiler. */
	.ejb-maisons__index--rail .ejb-maisons__lettre {
		flex: none;
		min-width: 24px;
		text-align: center;
	}
}


/* ====================================================== Ornement de page */
/*                                                                          */
/*  Une longue liste — le répertoire des maisons, le lexique — n'occupe     */
/*  qu'un tiers de la largeur : à sa droite s'ouvre une bande vide sur      */
/*  toute sa hauteur. Un dessin de joaillerie l'habite, collé au bord de    */
/*  la fenêtre.                                                            */
/*                                                                          */
/*  Il est « sticky » et non « fixed » : il suit le défilement tant qu'on   */
/*  lit la liste, puis s'arrête avec elle. Un « fixed » l'aurait laissé à   */
/*  l'écran par-dessus la suite de la page, jusque sur la lettre            */
/*  d'information.                                                         */
/*                                                                          */
/*  Le collage au bord passe par « (100vw - 100%) / 2 », la place qui reste */
/*  de chaque côté du conteneur — le même calcul que le débord d'un encart  */
/*  de partenaire plus bas. Aucune requête de média : la valeur tombe seule */
/*  à zéro quand le conteneur touche déjà les bords.                        */
/*                                                                          */
/*  Les valeurs de repli sont posées sur l'enveloppe de chaque widget, avec */
/*  les siennes, et non ici : Elementor y écrit les réglages de l'éditeur,  */
/*  et une déclaration faite plus bas dans l'arbre l'emporterait sur ce     */
/*  qu'ils héritent — les curseurs resteraient sans effet.                  */
/* ==================================================================== */

.ejb-orne {
	position: relative;
}

/* L'enveloppe ne prend aucune hauteur dans le flux : elle n'est qu'un repère
   pour la colonne de droite, et la liste garde exactement sa hauteur. */
.ejb-ornement {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Le bord droit de la fenêtre, quelle que soit la marge que le conteneur
	   laisse autour de lui. */
	right: calc((100vw - 100%) / -2 + var(--ejb-ornement-marge, 0px));
	width: var(--ejb-ornement-largeur, 420px);
	pointer-events: none;
	z-index: 0;
}

/* « contain » : le dessin garde ses proportions et entre entier dans la
   largeur donnée. Il n'est jamais rogné — s'il sort de l'écran, c'est que le
   cadre lui-même déborde, ce que le collage au bord assume. */
.ejb-ornement__dessin {
	position: sticky;
	top: var(--ejb-ornement-cale, 120px);
	aspect-ratio: var(--ejb-ornement-format, 1122 / 1402);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	opacity: var(--ejb-ornement-opacite, .55);
}

/* La liste repasse au-dessus du dessin : un lien survolé reste cliquable, et
   le texte ne se lit jamais à travers une feuille. */
.ejb-orne > :not(.ejb-ornement) {
	position: relative;
	z-index: 1;
}

/* Sous cette largeur le texte occupe toute la ligne : il n'y a plus de bande à
   habiller, et le dessin passerait derrière lui. */
@media (max-width: 1199px) {
	.ejb-ornement {
		display: none;
	}
}


/* ================================================ Encart de partenaire */

/*
 * Trois dessins pour un seul contenu : la carte étroite de la une, le bandeau
 * empilé des petits écrans, et la carte des articles où le visuel prend sa
 * moitié. Les deux premiers posent le texte sur le visuel, le troisième le met
 * à côté — d'où la structure commune et les deux mises en page.
 */

.ejb-encart {
	--ejb-encart-voile: 1;
	position: relative;
	overflow: hidden;
	background-color: #12100E;
	border-radius: 10px;
	color: #FAF8F5;
}

/* Le visuel est un fond, pas une image du document : il est décoratif, et il
   doit se laisser recouvrir par le voile sans quoi rien ne se lit dessus. */
.ejb-encart--une,
.ejb-encart--bandeau {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px 22px;
	background-image: var(--ejb-encart-visuel, none);
	background-position: center center;
	background-size: cover;
}

.ejb-encart--bandeau {
	min-height: 210px;
	padding: 14px 16px 16px;
}

/* Le voile s'assombrit en haut pour la mention, et en bas pour le pied :
   entre les deux, le visuel respire. */
.ejb-encart--une::after,
.ejb-encart--bandeau::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: var(--ejb-encart-voile, 1);
	background: linear-gradient(to bottom, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 34%, rgba(0, 0, 0, .72) 100%);
	pointer-events: none;
}

.ejb-encart--une > *,
.ejb-encart--bandeau > * {
	position: relative;
	z-index: 1;
}

.ejb-encart__mention {
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(250, 248, 245, .82);
}

/*
 * Sur le visuel, la mention prend la pastille sombre que porte déjà la forme à
 * deux encarts, et pour la même raison : le visuel vient du partenaire, on ne
 * le choisit pas. Le voile ne peut pas la sauver sur tous les fonds — assez
 * opaque pour un ciel clair, il éteindrait l'image — alors que la pastille
 * tient sur n'importe lequel, sans rien assombrir autour d'elle.
 *
 * La mention passe en crème pleine : à quatre-vingt-deux pour cent elle
 * grisaillait déjà sur un fond sombre, et la pastille lui donne désormais le
 * contraste qu'elle réclamait.
 *
 * Le retrait négatif rattrape celui de la pastille : sans lui le texte se
 * décalerait de son alignement sur le logotype, en dessous.
 */
.ejb-encart--une > .ejb-encart__mention,
.ejb-encart--bandeau > .ejb-encart__mention {
	align-self: flex-start;
	margin-inline-start: -8px;
	padding: 5px 8px;
	border-radius: 999px;
	background-color: rgba(18, 16, 14, .62);
	backdrop-filter: blur(3px);
	color: #FAF8F5;
}

.ejb-encart__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
}

/* Sans « min-width », la colonne de texte refuse de descendre sous sa plus
   longue ligne et pousse le lien hors de la carte. */
.ejb-encart__texte {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Le logotype est calé sur sa hauteur : les logos n'ont pas tous le même
   rapport, seule la hauteur les aligne entre eux. */
.ejb-encart__logo {
	display: block;
	width: auto;
	height: 20px;
	object-fit: contain;
	object-position: left center;
}

.ejb-encart__argument {
	display: block;
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(250, 248, 245, .85);
}

.ejb-encart__action {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(250, 248, 245, .6);
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	/* La couleur est posée sur le lien lui-même, et non héritée de l'encart :
	   le kit Elementor colore tous les « a » du site avec une règle plus forte
	   que la nôtre, et le libellé y perdait son contraste sur fond sombre. */
	color: #FAF8F5;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-encart:hover .ejb-encart__action {
	border-bottom-color: #8C6A3F;
}

.ejb-encart__fleche {
	flex: none;
}

/* ------------------------------------------ La carte des articles */

/*
 * La carte d'un article prend la largeur qu'on lui donne, mais pas la hauteur
 * qui va avec : un rapport seul suffisait tant que la carte tenait dans la
 * colonne de texte, mais posée en pleine page — ou débordant de la colonne —
 * il lui donnait six cents pixels de haut pour une ligne d'argumentaire.
 *
 * Le plafond tranche : au-delà, la carte s'arrête de grandir et le visuel se
 * recadre. Le plancher tient l'autre bout, sur les écrans étroits où le rapport
 * l'écraserait sous son propre texte.
 */
/*
 * La largeur est dite, et non laissée à « auto ». Ce n'est pas un pléonasme :
 * quand un axe est automatique, le navigateur fait passer les bornes de l'autre
 * axe à travers le rapport — le plafond de 300 px de haut devenait un plafond
 * de 700 px de large (300 × 21 / 9). Dans la colonne d'un article, la carte
 * s'arrêtait à 700 px et restait collée à gauche, un tiers de la place vide à
 * sa droite. Une largeur définie coupe ce transfert : la hauteur se déduit de
 * la largeur, le plafond ne borne plus qu'elle, et la carte emplit sa colonne.
 */
.ejb-encart--carte {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	aspect-ratio: 21 / 9;
	min-height: 220px;
	max-height: 300px;
}

.ejb-encart__corps {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	flex: 1 1 300px;
	padding: 34px 40px;
}

.ejb-encart__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.ejb-encart__pastille {
	flex: none;
	padding: 7px 11px;
	border-radius: 999px;
	background-color: #C9A26B;
	font-family: Inter, sans-serif;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: #12100E;
}

.ejb-encart__accroche {
	margin: 0;
	max-width: 26ch;
	font-family: Newsreader, serif;
	font-size: 36px;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.22;
	color: #FAF8F5;
}

.ejb-encart--carte .ejb-encart__argument {
	max-width: 48ch;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(250, 248, 245, .72);
}

.ejb-encart a.ejb-encart__bouton {
	align-self: flex-start;
	padding: 14px 22px;
	border-radius: 999px;
	background-color: #FAF8F5;
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	color: #12100E;
	transition: background-color 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Au survol, l’or clair : le bouton est crème sur l’encart sombre, et c’est
   la réponse commune à tous les boutons du site. L’encre du libellé y tient
   le contraste. */
.ejb-encart a.ejb-encart__bouton:hover,
.ejb-encart a.ejb-encart__bouton:focus {
	background-color: var(--ej-or-clair, #C9A26B);
	color: #12100E;
}

/* Le visuel remplit sa moitié quelle que soit la hauteur prise par le texte en
   regard : sorti du flux, c'est le texte qui décide de la hauteur, pas lui. */
/* La hauteur minimale ne vaut que dans une carte empilée — sur un écran étroit,
   où le visuel passe sous le texte et doit garder de quoi se voir. Dans une
   carte en rangée, elle se disputerait avec le plafond de la carte. */
.ejb-encart__cadre {
	position: relative;
	flex: 1 1 300px;
	min-height: 0;
	background-color: #1B1815;
}

.ejb-encart__cadre img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empilée, la carte retrouve une hauteur libre : le rapport large écraserait
   le texte et le visuel l'un sur l'autre. */
@media (max-width: 767px) {
	.ejb-encart--carte {
		aspect-ratio: auto;
		/* Le plafond des grands écrans tombe avec le rapport : empilés, le
		   texte et le visuel demandent la hauteur qu'il leur faut. */
		min-height: 0;
		max-height: none;
	}

	.ejb-encart__corps {
		padding: 28px;
		gap: 16px;
	}

	.ejb-encart__accroche {
		font-size: 25px;
	}

	.ejb-encart__cadre {
		min-height: 260px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ejb-encart__corps {
		padding: 36px;
	}

	.ejb-encart__accroche {
		font-size: 30px;
	}
}

/* Signalé dans l'éditeur seulement : le rendu public, lui, s'efface. */
.ejb-encart__attente {
	padding: 20px;
	border: 1px dashed #C9A26B;
	border-radius: 10px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #6B6560;
}

/* Posé dans la colonne de la une, l'encart occupe la case que la grille lui
   réserve : sans quoi il s'arrêterait à la hauteur de son texte et laisserait
   un vide sous lui. La chaîne de hauteurs passe par l'enveloppe du widget. */
.elementor-widget-ej-encart-partenaire,
.elementor-widget-ej-encart-partenaire > .elementor-widget-container {
	height: 100%;
}

.ejb-encart--une {
	height: 100%;
}

/* ==================================================== Résumé de recherche */

/*
 * L'en-tête de la page de résultats. Les couleurs et la typographie du titre
 * viennent du panneau Elementor ; ce qui suit tient la structure et les deux
 * éléments qu'aucun contrôle ne couvre : les termes cherchés dans le titre, et
 * les pastilles de maisons.
 */

.ejb-recherche {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}

.ejb-recherche__titre {
	margin: 0;
	/* Un terme long — un titre d'ouvrage collé dans le champ — ne doit pas
	   pousser la page au-delà de sa largeur. */
	overflow-wrap: anywhere;
}

/* Les termes cherchés se détachent du libellé qui les introduit : c'est la
   seule partie du titre que le lecteur a écrite. */
.ejb-recherche__termes {
	font-style: italic;
}

.ejb-recherche__compte {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

/* Les maisons trouvées : un raccourci vers la Signature, pas une liste de
   résultats — d'où la pastille, qui les distingue des cartes d'articles. */
.ejb-recherche__maisons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 4px;
}

.ejb-recherche__maisons-titre {
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-gris, #6B6560);
}

/* Classe doublée : le kit Elementor habille tous les liens d'une règle plus
   spécifique qu'une simple classe. */
.ejb-recherche a.ejb-recherche__maison {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 18px;
	border: 1px solid var(--ej-bordure, #E4DFD8);
	border-radius: 999px;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1), background-color 300ms;
}

.ejb-recherche a.ejb-recherche__maison:hover {
	border-color: var(--ej-or, #8C6A3F);
	background-color: var(--ej-creme-ombre, #F1EDE7);
}

.ejb-recherche__maison-nom {
	font-family: 'Bodoni Moda', serif;
	font-size: 17px;
	line-height: 1;
}

.ejb-recherche__maison-compte {
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1;
	color: var(--ej-gris, #6B6560);
}

/* Repère d'éditeur, hors ligne : le bloc ne rend rien ailleurs que sur la
   page de résultats, et un widget muet passerait pour cassé. */
.ejb-recherche__attente {
	padding: 18px 20px;
	border: 1px dashed var(--ej-bordure, #E4DFD8);
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ej-gris, #6B6560);
}

/* Bouton « voir plus » : même dessin que le bouton de page suivante, mais il
   ne mène nulle part — il lève l'attribut « hidden » des cartes déjà là. */
.ejb-pagination--palier {
	justify-content: center;
}

/*
 * C'est un vrai bouton, et non un lien : il hérite donc du dessin que la
 * feuille de remise à zéro du thème donne aux boutons de formulaire — fond
 * rose vif au survol comme à la prise de focus. Les trois états sont repris
 * ici, sans quoi le bouton virait au rose dès qu'on l'approchait.
 */
.ejb-pagination .ejb-pagination__palier {
	flex: 0 1 auto;
	min-width: 260px;
	background-color: transparent;
	cursor: pointer;
}

.ejb-pagination .ejb-pagination__palier:hover,
.ejb-pagination .ejb-pagination__palier:focus,
.ejb-pagination .ejb-pagination__palier:focus-visible {
	background-color: var(--ej-encre, #12100E);
	border-color: var(--ej-encre, #12100E);
	color: var(--ej-creme, #FAF8F5);
}

/* Au clavier, l'anneau de focus reste visible par-dessus le fond sombre. */
.ejb-pagination .ejb-pagination__palier:focus-visible {
	outline: 2px solid var(--ej-or, #8C6A3F);
	outline-offset: 2px;
}


/* ------------------------------------------------------------------ */
/*  Textes repliés                                                     */
/*                                                                     */
/*  Trois lignes, puis un fondu et un bouton. Les deux hauteurs — celle */
/*  du repli, celle du texte entier — sont posées par le script, qui    */
/*  les mesure sur le texte rendu : rien ici ne présume du corps ni de  */
/*  l'interligne, qui se règlent sur le widget.                         */
/*                                                                     */
/*  Tout est accroché à « data-ejb-replie », que le script seul pose :  */
/*  sans lui, le texte paraît en entier plutôt que coupé sans recours.  */
/* ------------------------------------------------------------------ */

.ej-deplier {
	/* Le fond dans lequel le texte se perd. En trois nombres, pour servir
	   aussi bien aux étapes transparentes du dégradé qu'à la dernière. */
	--ejb-fond-repli: 250, 248, 245;
}

.ej-deplier[data-ejb-replie] .ejb-repli {
	position: relative;
	overflow: hidden;
	max-height: var(--ejb-replie);
	transition: max-height 450ms cubic-bezier(.33, 0, .2, 1);
}

.ej-deplier[data-ejb-replie][data-ejb-ouvert] .ejb-repli {
	max-height: var(--ejb-ouvert);
}

/* Le fondu du bas : la page reprend le texte au lieu de le trancher. */
.ej-deplier[data-ejb-replie] .ejb-repli::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	/* Une ligne et demie : les deux premières restent franches, la troisième
	   se perd dans la page — c'est elle qui dit qu'il y a une suite. */
	height: 1.9em;
	background: linear-gradient(
		to bottom,
		rgba(var(--ejb-fond-repli), 0) 0%,
		rgba(var(--ejb-fond-repli), .75) 58%,
		rgb(var(--ejb-fond-repli)) 100%
	);
	pointer-events: none;
	transition: opacity 260ms ease;
}

.ej-deplier[data-ejb-ouvert] .ejb-repli::after {
	opacity: 0;
}

/*
 * Le bouton reprend le dessin des liens du site — un filet doré sous le mot.
 * Les trois états sont écrits parce que la remise à zéro du thème colore les
 * boutons de formulaire dès qu'on les approche.
 */
.ej-deplier .ejb-repli__bouton {
	display: inline-block;
	margin-top: 16px;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid var(--ej-or, #8C6A3F);
	border-radius: 0;
	background-color: transparent;
	color: var(--ej-encre, #12100E);
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ej-deplier .ejb-repli__bouton:hover,
.ej-deplier .ejb-repli__bouton:focus,
.ej-deplier .ejb-repli__bouton:focus-visible {
	background-color: transparent;
	color: var(--ej-encre, #12100E);
}

.ej-deplier .ejb-repli__bouton:focus-visible {
	outline: 2px solid var(--ej-or, #8C6A3F);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ej-deplier[data-ejb-replie] .ejb-repli,
	.ej-deplier[data-ejb-replie] .ejb-repli::after {
		transition: none;
	}
}


/* ------------------------------------------------------------------ */
/*  Carrousel de l'encart de partenaire                                */
/*                                                                     */
/*  Les encarts sont empilés dans une même case de grille : la pile     */
/*  prend la hauteur du plus grand, et rien ne saute quand on passe de  */
/*  l'un à l'autre. Seul l'opacité change — pas de translation, qui     */
/*  ferait bouger un visuel déjà en place.                              */
/* ------------------------------------------------------------------ */

.ejb-encart-carrousel {
	position: relative;
	height: 100%;
}

.ejb-encart-carrousel__piste {
	display: grid;
	height: 100%;
}

.ejb-encart-carrousel__vue {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 1;
	transition: opacity 520ms cubic-bezier(.4, 0, .2, 1);
}

/* Les vues en attente restent dans le document — le script les rend
   inertes — mais ne prennent ni le clic ni le regard. */
.ejb-encart-carrousel__vue[aria-hidden="true"] {
	opacity: 0;
	pointer-events: none;
}

.ejb-encart-carrousel__vue > .ejb-encart {
	height: 100%;
}

/*
 * Les repères se posent en regard de la mention « Communication partenaire »,
 * en haut à droite : le pied de l'encart est déjà pris par l'appel à l'action.
 *
 * Ce ne sont pas des points mais des traits : celui du partenaire à l'écran se
 * remplit à mesure que son temps passe. Une seule marque dit alors deux
 * choses — où l'on en est dans la série, et combien il reste avant la suite —
 * là où un point et une barre de progression séparés se seraient répété.
 */
.ejb-encart-carrousel__pastilles {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: flex;
	gap: 6px;
	/*
	 * Les traits se posent sur le visuel du partenaire, qu'on ne choisit pas :
	 * sur un fond clair, une ombre portée ne suffisait pas à les tenir. Ils
	 * prennent la pastille sombre de la mention, en regard de laquelle ils
	 * sont posés — même réserve, même hauteur, et les deux se répondent.
	 */
	padding: 4px 9px;
	border-radius: 999px;
	background-color: rgba(18, 16, 14, .62);
	backdrop-filter: blur(3px);
}

/*
 * Le trait est fin ; la surface qui le reçoit tient le doigt.
 *
 * Les trois états portent le même fond : la feuille de remise à zéro du thème
 * colore les boutons de formulaire dès qu'on les approche — d'où le rose vif
 * qui apparaissait au survol, comme il l'avait fait sur la pagination.
 */
.ejb-encart-carrousel__pastille,
.ejb-encart-carrousel__pastille:hover,
.ejb-encart-carrousel__pastille:focus,
.ejb-encart-carrousel__pastille:focus-visible {
	position: relative;
	width: 26px;
	height: 24px;
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Le rail, toujours là ; la jauge, qui le remplit. */
.ejb-encart-carrousel__pastille::before,
.ejb-encart-carrousel__jauge {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px;
}

.ejb-encart-carrousel__pastille::before {
	transform: translateY(-50%);
	/* Sur la réserve sombre, le rail n'a plus à lutter contre le visuel : il ne
	   se distingue plus que de la jauge, qui le remplit en crème pleine. */
	background-color: rgba(250, 248, 245, .42);
	transition: background-color 300ms ease;
}

.ejb-encart-carrousel__pastille:hover::before,
.ejb-encart-carrousel__pastille:focus-visible::before {
	background-color: rgba(250, 248, 245, .5);
}

.ejb-encart-carrousel__jauge {
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	background-color: var(--ej-creme, #FAF8F5);
}

/* La jauge du partenaire à l'écran court sur son temps de pose. La cadence
   vient du widget, posée par le script sur la racine du carrousel. */
.ejb-encart-carrousel__pastille[aria-current="true"] .ejb-encart-carrousel__jauge {
	animation: ejb-carrousel-jauge var(--ejb-cadence, 6000ms) linear forwards;
}

/* Au survol, au clavier, hors de l'écran : le trait s'arrête où il en est,
   et le compte à rebours avec lui — les deux repartent ensemble. */
.ejb-encart-carrousel.est-en-pause .ejb-encart-carrousel__jauge {
	animation-play-state: paused;
}

@keyframes ejb-carrousel-jauge {
	from {
		transform: translateY(-50%) scaleX(0);
	}
	to {
		transform: translateY(-50%) scaleX(1);
	}
}

/*
 * La minuterie, quand le carrousel n'a plus de repères : un cercle fin dans le
 * coin de la bande, dont le contour se dessine le temps d'une pose.
 *
 * Une barre en pied traversait toute la largeur pour dire une seule chose ; le
 * cercle la dit dans vingt pixels, sans couper la composition. Il se tient au
 * coin bas-droit, là où l'œil arrive en dernier — l'image garde son centre.
 */
/*
 * La pastille et son tracé sont deux boîtes distinctes : « flex » les centre
 * l'une dans l'autre, là où un remplissage sur une boîte de bordure poussait
 * le cercle vers le bas à droite.
 */
.ejb-encart-carrousel__minuterie {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* Le visuel du partenaire, qu'on ne choisit pas, peut être clair, chargé,
	   ou blanc : une pastille sombre sous le tracé lui donne son fond à lui,
	   et le cercle se lit partout de la même façon. */
	background-color: rgba(18, 16, 14, .38);
	backdrop-filter: blur(3px);
	pointer-events: none;
}

.ejb-encart-carrousel__minuterie svg {
	display: block;
	width: 21px;
	height: 21px;
	/* Le tracé part de midi : sans cette rotation, il commencerait à trois
	   heures, où l'œil ne l'attend pas. */
	transform: rotate(-90deg);
}

/* Épais pour un si petit cercle : à seize pixels, un filet d'un pixel et demi
   se perdait dans l'image. */
.ejb-encart-carrousel__piste-arc,
.ejb-encart-carrousel__arc {
	stroke-width: 3;
	fill: none;
}

/* Le cercle d'attente, à peine visible : il dit la course entière. */
.ejb-encart-carrousel__piste-arc {
	stroke: rgba(250, 248, 245, .28);
}

/* Et le blanc qui la parcourt — l'or se confondait avec les visuels dorés que
   la joaillerie fournit presque toujours. « pathLength » ayant ramené le tracé
   à cent, le tiret et le trou se comptent en centièmes. */
.ejb-encart-carrousel__arc {
	stroke: #FFF;
	stroke-linecap: round;
	stroke-dasharray: 100;
	animation: ejb-carrousel-arc var(--ejb-cadence, 6000ms) linear forwards;
}

/* Même retenue que la jauge : le tracé s'arrête où il en est. */
.ejb-encart-carrousel.est-en-pause .ejb-encart-carrousel__arc {
	animation-play-state: paused;
}

@keyframes ejb-carrousel-arc {
	from {
		stroke-dashoffset: 100;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.ejb-encart-carrousel__pastille:focus-visible {
	outline: 2px solid var(--ej-or-clair, #C9A26B);
	outline-offset: 3px;
}

/* Une seule vue : les repères n'ont rien à dire. */
.ejb-encart-carrousel:not([data-ejb-total]) .ejb-encart-carrousel__pastilles,
.ejb-encart-carrousel[data-ejb-total="1"] .ejb-encart-carrousel__pastilles {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ejb-encart-carrousel__vue {
		transition: none;
	}

	/* Rien ne défile de soi-même : le trait du partenaire à l'écran est plein,
	   il marque la position et non plus le temps. */
	.ejb-encart-carrousel__pastille[aria-current="true"] .ejb-encart-carrousel__jauge {
		animation: none;
		transform: translateY(-50%) scaleX(1);
	}
}


/* =============================================== Visuel d'une maison */

/*
 * L'image posée sous l'avertissement de la fiche, et son crédit. Le rapport
 * d'image, l'arrondi et la typographie du crédit se règlent depuis le
 * panneau ; ne restent ici que la structure et le remplissage de la case.
 */

.ejb-visuel-maison {
	margin: 0;
}

.ejb-visuel-maison__image {
	display: block;
	width: 100%;
	height: auto;
}

.ejb-visuel-maison__credit {
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ej-gris, #6B6560);
}


/* ------------------------------------------------------------------ */
/*  Maisons en avant                                                   */
/*                                                                     */
/*  Une grille de vignettes qui ouvre la page des Signatures. Les      */
/*  cases se touchent presque : l'écart est un filet, pas une marge —  */
/*  c'est le fond de page qui passe entre elles et fait la séparation. */
/* ------------------------------------------------------------------ */

.ejb-avant-grille {
	--ejb-avant-colonnes: 6;
	--ejb-avant-ecart: 2px;
	--ejb-avant-nom-hauteur: 62px;

	display: grid;
	grid-template-columns: repeat(var(--ejb-avant-colonnes), minmax(0, 1fr));
	gap: var(--ejb-avant-ecart);
}

.ejb-avant-grille__case {
	display: flex;
	flex-direction: column;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.ejb-avant-grille__image {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Une maison sans visuel garde sa case : la grille reste régulière et le nom
 * porte seul. Un aplat très clair vaut mieux qu'un cadre vide, qui se lirait
 * comme une image qui n'a pas chargé.
 */
.ejb-avant-grille__image--vide {
	aspect-ratio: 1 / 1;
	background: #F1EEE9;
}

.ejb-avant-grille__nom {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: var(--ejb-avant-nom-hauteur);
	padding: 10px 12px;
	text-align: center;
	transition: color .25s;
}

.ejb-avant-grille__credit {
	padding: 0 12px 10px;
	color: #7A736B;
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
}

/* Le visuel s'éclaircit à peine au survol : la case est un lien, il faut
   que ça se sente, sans que la photo se mette à bouger. */
.ejb-avant-grille__case:hover .ejb-avant-grille__image,
.ejb-avant-grille__case:focus-visible .ejb-avant-grille__image {
	opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
	.ejb-avant-grille__nom {
		transition: none;
	}
}


/* ------------------------------------------------------------------ */
/*  Répertoire : le chapô sous le nom                                  */
/*                                                                     */
/*  Deux formes pour un seul balisage. Sans chapô, l'enveloppe d'une   */
/*  maison s'efface et les noms reprennent le fil de texte, exactement */
/*  comme avant. Avec, elle redevient un bloc et la rangée passe en    */
/*  colonnes — un nom suivi de trois lignes ne se lit pas au fil.      */
/* ------------------------------------------------------------------ */

.ejb-maisons__maison {
	display: contents;
}

/*
 * « display: contents » l'emporterait sur le « display: none » que le
 * navigateur applique à [hidden] : une maison écartée par la recherche
 * resterait visible. Il faut donc le dire ici.
 */
.ejb-maisons__maison[hidden] {
	display: none;
}

.ejb-maisons__noms--chapo {
	--ejb-maisons-chapo-colonnes: 6;

	display: grid;
	grid-template-columns: repeat(var(--ejb-maisons-chapo-colonnes), minmax(0, 1fr));
	gap: 34px 26px;
}

.ejb-maisons__noms--chapo .ejb-maisons__maison {
	display: block;
}

/* Le nom garde son soulignement au survol, mais cesse de s'étirer sur toute
   la colonne : le trait doit border le mot, pas la case. */
.ejb-maisons__noms--chapo .ejb-maisons__nom {
	display: inline-block;
}

.ejb-maisons__chapo {
	margin: 7px 0 0;
	color: #6B645C;
	font-size: 13px;
	line-height: 1.5;
}


/* ============================================ Rangée d'encarts (article) */

/*
 * Le bloc « Encart de partenaire » du corps des articles. Seul, l'encart prend
 * la largeur du texte et pose son visuel à côté. À deux, chacun revient au
 * dessin étroit de la une, qui tient dans une demi-colonne.
 *
 * Le passage à une colonne n'est pas décidé par une largeur d'écran mais par
 * la place réellement disponible : le même bloc sert dans le corps d'un
 * article, qui n'a pas la largeur de la fenêtre, et une requête de média s'y
 * tromperait.
 */

/*
 * La grille des deux colonnes se pose sur ce qui *contient* directement les
 * encarts. Sur une rangée figée c'est le bloc lui-même ; dans un carrousel
 * c'est la vue, l'encart étant descendu de trois crans — carrousel, piste,
 * vue.
 *
 * Le premier sélecteur se lit « le bloc, quand il ne porte pas de carrousel »
 * et non « le bloc qui n'est pas réglé en carrousel » : un carrousel réglé
 * mais servi par trop peu d'annonceurs pour faire deux vues rend une rangée
 * ordinaire, sans piste ni pastilles, et cette rangée-là a besoin de la
 * grille. C'est ce que « :has » permet de dire, là où « :not(--carrousel) »
 * laissait le cas de côté et posait les deux encarts l'un sous l'autre.
 */
.ejb-encarts--2:not(:has( > .ejb-encart-carrousel )),
.ejb-encarts--2 .ejb-encart-carrousel__vue {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
	align-items: stretch;
}

/* Deux encarts de contenus inégaux se posaient sur deux hauteurs : le pied de
   l'un ne tombait pas en face de celui de l'autre. */
.ejb-encarts--2 .ejb-encart {
	height: 100%;
	min-height: 260px;
}

/*
 * Seul, l'encart d'un carrousel garde le dessin en carte et la pleine largeur :
 * c'est un annonceur qui succède à un autre. À deux par vue, c'est une rangée
 * qui succède à une rangée, et chacun revient au dessin étroit — les règles de
 * « .ejb-encarts--2 » ci-dessus s'appliquent à travers le carrousel, puisque
 * ce sont des sélecteurs de descendance.
 *
 * Rien à régler pour la mécanique : la pile, les pastilles et la pause hors
 * écran sont celles de la une et se posent ici telles quelles. Une seule chose
 * diffère : sur un écran étroit la carte perd son rapport 16/9 et retrouve une
 * hauteur libre, donc deux annonceurs aux textes inégaux ne font plus la même
 * hauteur. La pile prend alors celle du plus grand, et la page ne saute pas à
 * chaque tour.
 */
.ejb-encarts--carrousel .ejb-encart-carrousel__vue {
	align-self: stretch;
}

/*
 * La dernière vue d'un carrousel peut n'avoir qu'un encart quand le compte ne
 * tombe pas juste — trois annonceurs pour deux places. Il tient alors sa
 * demi-colonne au lieu de s'étaler sur toute la rangée : un encart qui
 * doublerait de taille au dernier tour se remarquerait plus que le vide laissé
 * à côté de lui.
 *
 * « auto-fill » et non « auto-fit » : les deux ne diffèrent que sur les pistes
 * restées vides, et c'est précisément le cas ici. « auto-fit » les replie, et
 * l'encart esseulé reprendrait toute la largeur.
 *
 * Cela ne vaut que dans un carrousel, où le vide ne dure que le temps d'un
 * tour. Une rangée figée qui n'a qu'un annonceur éligible garde le sien pour
 * toujours : la demi-colonne creuse alors un vide permanent dans l'article, et
 * la carte paraît mal posée plutôt que délibérément étroite.
 *
 * Le PHP a déjà tranché ce cas — « ejb_bloc_encart_rendu_rangee » rend l'encart
 * esseulé dans le dessin en carte, celui qui porte la pleine largeur. La grille
 * le contredisait. Sans règle ici, l'« auto-fit » de la déclaration précédente
 * replie la piste vide et l'encart prend toute la rangée, comme son dessin
 * l'attend.
 */
.ejb-encarts--2 .ejb-encart-carrousel__vue:has( > .ejb-encart:only-child ) {
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}


/* ---------------------------------------------------------------- */
/*  La rangée à deux : lisibilité et débord                          */
/* ---------------------------------------------------------------- */

/*
 * Le dessin « une » pose son texte *sur* le visuel, derrière un voile. Il a
 * été réglé pour la colonne de l'accueil, où les visuels sont sombres.
 *
 * À deux dans un article, il ne tenait plus. Un partenaire fournit l'image
 * qu'il veut : celle de Patrimoine Joaillerie est un rose très clair, et son
 * logotype est un gris sombre dessiné pour du papier blanc. Aucun dégradé ne
 * rattrape ça — assez opaque pour sauver le logo, le voile efface l'image.
 *
 * Alors on ne superpose plus : le visuel prend le haut de la carte, et le
 * texte descend sur un panneau plein. La lisibilité ne dépend plus de l'image,
 * donc plus du partenaire. C'est la seule forme qui tienne pour des visuels
 * qu'on ne choisit pas.
 */

.ejb-encarts--2 .ejb-encart--une {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 440px;
	padding: 0;
	gap: 0;
}

/* Plus de voile : il n'a plus de texte à porter. */
.ejb-encarts--2 .ejb-encart--une::after {
	content: none;
}

/* La mention garde sa place en haut, sur le visuel : elle est courte, et une
   pastille sombre suffit à la détacher de n'importe quel fond. */
.ejb-encarts--2 .ejb-encart__mention {
	align-self: flex-start;
	margin: 16px 0 auto 18px;
	padding: 6px 10px;
	border-radius: 999px;
	background-color: rgba(18, 16, 14, .72);
	backdrop-filter: blur(3px);
	color: #FAF8F5;
}

/* Le panneau. Il ferme la carte : c'est lui qui porte le fond, et le bas de
   l'encart n'a donc pas à être arrondi une seconde fois. */
.ejb-encarts--2 .ejb-encart__pied {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 22px 22px;
	background-color: #12100E;
}

.ejb-encarts--2 .ejb-encart__texte {
	flex: 0 0 auto;
	gap: 12px;
}

/*
 * Le logotype se pose sur du noir plein, et passe en blanc monochrome.
 *
 * On ne choisit pas les fichiers que les partenaires fournissent : celui de
 * WePrecious est déjà blanc, celui de Patrimoine Joaillerie est un gris
 * sombre dessiné pour du papier — invisible ici. « brightness(0) invert(1) »
 * les ramène tous au même blanc : le premier ne bouge pas, le second
 * réapparaît.
 *
 * C'est un choix, et il se défait d'une ligne. Le blanc monochrome sur fond
 * sombre est l'usage des pages partenaires et reste autorisé par à peu près
 * toutes les chartes ; l'autre voie serait de demander à chaque partenaire un
 * fichier clair, ce qui suppose de les relancer un par un et de vérifier
 * chaque nouvelle fiche.
 */
.ejb-encarts--2 .ejb-encart__logo {
	height: 26px;
	filter: brightness(0) invert(1);
}

.ejb-encarts--2 .ejb-encart__action {
	align-self: flex-start;
}

/*
 * Le débord. Un encart de partenaire n'est pas du texte d'article : il a le
 * droit de sortir de la colonne pour se distinguer de ce qui l'entoure.
 *
 * La mesure du débord se calcule sur la place réellement libre —
 * « (100vw - 100%) / 2 » est ce qui reste de chaque côté du conteneur — moins
 * une gouttière, et plafonnée. Aucune requête de média n'est nécessaire : sur
 * un écran étroit la place libre tombe à zéro, la borne basse la retient là,
 * et l'encart reprend sagement la largeur du texte.
 */
.ejb-encarts--deborde {
	--ejb-encarts-debord: clamp(0px, (100vw - 100%) / 2 - 28px, 160px);

	width: calc(100% + var(--ejb-encarts-debord) * 2);
	margin-inline: calc(var(--ejb-encarts-debord) * -1);
}


/*
 * La carte entière est un lien. Le soulignement d'un ancêtre est tracé par
 * l'ancêtre : aucun descendant ne peut l'annuler pour lui-même, et l'accroche
 * comme l'argumentaire se retrouvaient soulignés avec lui.
 *
 * Il est donc coupé ici, sur la carte, et non laissé à la charge du thème :
 * l'encart se rend aussi dans l'éditeur de blocs, où les feuilles du thème ne
 * sont pas chargées et où le soulignement par défaut du navigateur revenait.
 *
 * Le trait sous « Découvrir » n'en fait pas partie : c'est un « border-bottom »
 * posé sur « .ejb-encart__action », qui n'est pas concerné.
 */
a.ejb-encart,
a.ejb-encart:hover,
a.ejb-encart:focus {
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/*  L'encart de tête                                                   */
/*                                                                     */
/*  Un bloc posé en haut de l'accueil, dans la largeur du site — pas    */
/*  une bande qui barre la fenêtre. C'est la carte des articles ramenée */
/*  à cent soixante pixels : le texte à gauche, le visuel du partenaire */
/*  dans sa réserve à droite. Il en reprend les classes, ce sont les    */
/*  mêmes zones ; seules les proportions changent.                      */
/*                                                                     */
/*  Le fond est le dégradé marine du site, et non le visuel étalé       */
/*  derrière les mots : l'image a sa place à droite, où elle se regarde */
/*  sans voile, et la moitié qui parle appartient au média. C'est aussi */
/*  ce qui tient l'encart debout quand un partenaire n'a fourni aucune  */
/*  image.                                                              */
/*                                                                     */
/*  La variable du dégradé vient de la feuille du thème ; la valeur en  */
/*  repli lui est identique, pour l'aperçu de l'éditeur Elementor où la */
/*  feuille du thème n'est pas toujours là.                             */
/* ------------------------------------------------------------------ */

/*
 * La grille est posée ici, et non par le conteneur Elementor.
 *
 * Un conteneur boxé tire sa largeur de la classe « e-con-boxed », qu'Elementor
 * n'accorde qu'aux conteneurs qu'il tient pour enfants — et il grave « e-parent »
 * au premier rendu, sans le recalculer quand la structure de la page change
 * sous lui. Un encart posé par script héritait donc de la pleine largeur, quoi
 * qu'on règle dans ses réglages.
 *
 * La section reprend donc les mesures de l'accueil : mille sept cent vingt
 * pixels, quarante-huit de marge. Écrites une fois, elles ne dépendent plus de
 * ce qu'Elementor croit savoir de la place du conteneur dans l'arbre.
 */
/*
 * La grille de la section est posée ici, et non par les réglages du conteneur.
 *
 * Elementor borne l'intérieur d'un conteneur boxé à « --content-width », qu'il
 * n'écrit que pour les conteneurs qu'il tient pour enfants — et il grave
 * « e-parent » au premier rendu sans le recalculer quand la structure change
 * sous lui. Une section posée par script gardait donc la largeur du kit, plus
 * étroite que la grille de l'accueil, quoi qu'on règle dans ses réglages.
 *
 * On écrit donc la variable, et non le « max-width » qu'elle alimente : la
 * règle d'Elementor — « .e-con > .e-con-inner » — a la même spécificité que
 * la nôtre et sa feuille est chargée après, elle l'emporterait à égalité. La
 * variable, elle, est lue chez l'enfant et se pose ici sans concurrence.
 *
 * Les mesures sont celles de l'accueil : mille sept cent vingt pixels de
 * contenu, quarante-huit de marge — vingt-quatre sous la tablette.
 */
/*
 * L'encart ne prend pas toute la grille : un peu plus de la moitié, centré.
 *
 * La mesure est dérivée de la largeur du site plutôt qu'écrite en dur : le
 * jour où la grille change, l'encart suit. Le conteneur boxé se charge du
 * centrage — « --content-width » borne son intérieur, qu'Elementor centre par
 * « margin: 0 auto ».
 */
.ej-bandeau-tete {
	--content-width: calc(1720px * .55);
	padding-inline: 48px;
}

/*
 * Sous les grands écrans, la part cède : à mille pixels de fenêtre, cinquante-
 * cinq pour cent ne laissent plus au texte de quoi tenir sur sa ligne, et
 * l'encart se lirait comme un accident plutôt que comme un choix. Il reprend
 * alors toute la grille, où il retrouve ses aises.
 */
@media (max-width: 1200px) {

	.ej-bandeau-tete {
		--content-width: 1720px;
	}
}

@media (max-width: 1024px) {

	.ej-bandeau-tete {
		padding-inline: 24px;
	}
}

/*
 * La bannière que le partenaire fournit lui-même, à la place de l'encart
 * composé.
 *
 * C'est la bande qui commande, jamais l'image : le rapport est posé ici, et un
 * fichier trop grand se recadre au centre au lieu d'allonger la une. Un
 * partenaire livre le fichier qu'il veut ; la page, elle, garde sa mesure.
 *
 * Le rapport se redresse un peu sur les petits écrans — la même bande réduite à
 * la largeur d'un téléphone n'aurait plus que soixante pixels de haut, et le
 * texte qu'elle porte deviendrait illisible.
 */
.ejb-tete-visuel {
	display: block;
	overflow: hidden;
	aspect-ratio: 970 / 160;
	border-radius: 10px;
	background-color: var(--ej-creme-ombre, #F1EDE7);
	line-height: 0;
}

.ejb-tete-visuel .ejb-tete-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.ejb-tete-visuel {
		aspect-ratio: 3 / 1;
	}
}

.ejb-encart--tete {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	min-height: 160px;
	border-radius: 10px;
	background-color: #0F1F35;
	background-image: var(--ej-degrade-marine, linear-gradient(102deg, #1D3A63 0%, #0F1F35 58%, #16294A 100%));
}

/* Le corps prend la place que le visuel lui laisse. « min-width: 0 » sans quoi
   il refuserait de descendre sous sa plus longue ligne et pousserait le visuel
   hors de l'encart. */
.ejb-encart--tete .ejb-encart__corps {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 26px 34px;
}

/* La mention garde sa casse et son interlettrage, mais perd la pastille des
   cartes à visuel : sur le dégradé marine, qui est un fond choisi et non une
   image subie, elle n'a rien à quoi se défendre. */
.ejb-encart--tete .ejb-encart__mention {
	color: rgba(250, 248, 245, .68);
}

/* Le logotype et l'argumentaire sur une ligne : à cette hauteur, les empiler
   pousserait l'invitation hors du cadre. */
.ejb-encart--tete .ejb-encart__texte {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	min-width: 0;
}

/* La hauteur vient du contrôle « Hauteur du logotype » du widget, qui gagne
   sur cette feuille — elle est réglée à vingt-huit pixels sur l'accueil. */
.ejb-encart--tete .ejb-encart__logo {
	flex: none;
	/* Les logotypes des partenaires sont de toutes les couleurs et la plupart
	   sont dessinés pour un fond clair. Sur le marine, ils sont ramenés au
	   crème : l'encart garde son unité, et aucun logo n'y jure. */
	filter: brightness(0) invert(1);
	opacity: .92;
}

.ejb-encart--tete .ejb-encart__nom {
	flex: none;
	font-family: 'Bodoni Moda', serif;
	font-size: 19px;
	line-height: 1.2;
	color: #FAF8F5;
}

/* L'argumentaire tient sur une ligne et cède par les points de suspension :
   deux lignes feraient monter l'encart au-delà de sa hauteur. */
.ejb-encart--tete .ejb-encart__argument {
	overflow: hidden;
	flex: 1 1 200px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgba(250, 248, 245, .78);
}

.ejb-encart--tete .ejb-encart__action {
	align-self: flex-start;
}

/*
 * La réserve du visuel. Elle est fixe et non proportionnelle : d'un partenaire
 * à l'autre, l'encart ne doit pas changer de dessin sous prétexte que
 * l'argumentaire est plus court. Le visuel la remplit en se recadrant au
 * centre — les images viennent des partenaires, on ne choisit pas leur cadre.
 */
.ejb-encart--tete .ejb-encart__cadre {
	display: block;
	position: relative;
	flex: none;
	width: clamp(200px, 26%, 380px);
	min-height: 0;
	/* Le brun de la réserve des cartes jurerait ici : ce qu'on aperçoit avant
	   le chargement, ou sous une image à transparence, doit être le marine de
	   l'encart. */
	background-color: #16294A;
}

.ejb-encart--tete .ejb-encart__cadre img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * La jonction entre le texte et le visuel : une réglure, pas un fondu.
 *
 * Un dégradé y avait été tenté et n'y pouvait rien. Le fond de l'encart est un
 * dégradé oblique, le voile qui aurait dû le prolonger était un aplat
 * vertical : les deux ne coïncidaient qu'en un point, et la bande sombre
 * ajoutée rendait la coupure plus visible qu'elle ne l'aurait été sans elle.
 * Surtout, aucune fondue ne réconcilie un fond marine et une photographie
 * claire — et les visuels viennent des partenaires, on ne les choisit pas.
 *
 * La séparation est donc assumée : deux zones franches et un filet or, comme
 * les filets qui séparent déjà les blocs du site. Le visuel garde toute sa
 * lumière, le marine reste net, et le dessin tient quelle que soit l'image —
 * claire, sombre, chargée ou vide.
 */
.ejb-encart--tete .ejb-encart__cadre::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 1px;
	background-color: var(--ej-or-clair, #C9A26B);
	opacity: .5;
	pointer-events: none;
}

/*
 * Les repères du carrousel se posent en haut à droite comme sur les cartes,
 * mais au-dessus du visuel : c'est le seul coin de l'encart où ils ne viennent
 * ni sur les mots ni sur l'invitation. Ils gardent donc la réserve sombre des
 * cartes — ici aussi ils sont posés sur une image qu'on ne choisit pas.
 */
.ejb-encart-carrousel--tete .ejb-encart-carrousel__pastilles {
	top: 16px;
	right: 16px;
	z-index: 2;
}

/*
 * Au-delà de cinq annonceurs, les repères redeviennent des points.
 *
 * Le trait de progression dit deux choses à la fois — où l'on en est, et
 * combien il reste avant la suite — et c'est ce qui le justifie tant qu'ils
 * sont trois ou quatre. À douze, la file traverse tout l'encart et vient sur
 * le visuel : elle cesse de renseigner pour encombrer. Le point ne dit plus
 * que le rang, ce qui est le seul des deux renseignements qu'on puisse encore
 * lire dans une file aussi longue.
 *
 * La bascule est décidée au rendu, où le compte est connu : le PHP pose
 * « --nombreux » au-delà de cinq vues, la feuille n'a qu'à suivre.
 */
/*
 * Les repères se tiennent à la hauteur de la mention posée en regard : dix
 * pixels, comme sa capitale, au lieu des vingt-quatre du bouton ordinaire.
 * Le conteneur perd le remplissage qui lui ajoutait ses huit pixels — la
 * rangée mesure alors exactement le mot qu'elle accompagne.
 *
 * La règle générale des pastilles se donne quatre sélecteurs pour couvrir ses
 * états ; il en faut donc autant ici, sinon la hauteur d'origine l'emporterait
 * — c'est la spécificité qui tranche, pas l'ordre.
 */
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastilles {
	padding-block: 0;
}

.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille,
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille:hover,
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille:focus,
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille:focus-visible {
	width: 10px;
	height: 10px;
}

/*
 * Un repère de dix pixels se vise mal au doigt. La zone sensible retrouve ses
 * vingt-quatre pixels de haut par un pseudo-élément débordant, sans toucher à
 * la hauteur de la rangée : c'est la cible qu'on agrandit, pas le trait.
 */
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille::after {
	content: "";
	position: absolute;
	top: -7px;
	right: 0;
	bottom: -7px;
	left: 0;
}

/*
 * La fenêtre glissante. Douze points alignés ne se comptent pas : on n'en tient
 * que cinq autour du rang courant, et le script marque les autres de leur écart
 * au bord.
 *
 * Les deux voisins immédiats rétrécissent au lieu de disparaître — ils disent
 * que la file continue —, et au-delà les points s'effacent tout à fait. La
 * largeur s'anime avec l'opacité : sans quoi la rangée sauterait d'un cran à
 * chaque changement de vue.
 */
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille {
	transition: width 300ms ease, opacity 300ms ease;
}

.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille[data-ejb-ecart="1"] {
	width: 6px;
	opacity: .5;
}

/* La marge négative annule l'écartement du conteneur : sans elle, un point
   réduit à zéro laisserait tout de même son espacement, et la rangée garderait
   les trous des encarts qu'on a masqués. */
.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille[data-ejb-ecart="2"] {
	width: 0;
	margin-inline-start: -2px;
	opacity: 0;
	pointer-events: none;
}

/*
 * Une file de douze points ne tient pas dans le coin du visuel : elle
 * passerait dessus. Elle se range donc en haut de la partie marine, hors du
 * cadre de l'image — d'où le décalage, qui vaut la largeur de la réserve.
 *
 * Elle abandonne du même coup la pastille sombre : celle-ci défendait les
 * repères contre une image qu'on ne choisit pas, et sur le marine un point
 * crème tient seul.
 */
.ejb-encart-carrousel--tete.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastilles {
	top: 18px;
	right: calc(clamp(200px, 26%, 380px) + 24px);
	gap: 2px;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	backdrop-filter: none;
}

/* Sous 1024px le visuel s'en va : les repères reprennent le bord droit. */
@media (max-width: 1024px) {

	.ejb-encart-carrousel--tete.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastilles {
		right: 20px;
	}
}

.ejb-encart-carrousel--tete.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille::before,
.ejb-encart-carrousel--tete.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__jauge {
	left: 50%;
	right: auto;
	width: 6px;
	height: 6px;
	margin-inline-start: -3px;
	border-radius: 50%;
}

/* Le point du partenaire à l'écran se remplit d'un coup au lieu de courir :
   une jauge de six pixels ne se lirait pas. */
.ejb-encart-carrousel--tete.ejb-encart-carrousel--nombreux .ejb-encart-carrousel__pastille[aria-current="true"] .ejb-encart-carrousel__jauge {
	animation: none;
	transform: translateY(-50%) scaleX(1);
}

/*
 * L'arrondi et la hauteur du logotype se règlent depuis le widget, pas ici :
 * Elementor écrit ses contrôles dans la feuille par élément, avec une
 * spécificité que celle-ci ne peut pas battre. Une règle posée ici serait
 * inerte — et donnerait à lire une intention qui ne s'applique pas.
 */

/*
 * Sous 1024px, le visuel s'en va. Il lui faudrait ici moins du quart de la
 * largeur — une bande d'image trop étroite pour montrer quoi que ce soit,
 * qui prendrait aux mots la place qui leur manque déjà.
 */
@media (max-width: 1024px) {

	.ejb-encart--tete .ejb-encart__cadre {
		display: none;
	}

	.ejb-encart--tete .ejb-encart__corps {
		padding: 22px 26px;
	}
}

/*
 * Empilé, l'encart abandonne l'argumentaire : le logotype dit qui parle,
 * l'invitation dit quoi faire, et c'est tout ce qui tient sans faire de la
 * tête de page un bloc à elle seule.
 */
@media (max-width: 767px) {

	.ejb-encart--tete {
		min-height: 0;
		border-radius: 8px;
	}

	.ejb-encart--tete .ejb-encart__corps {
		gap: 12px;
		padding: 18px 20px;
	}

	.ejb-encart--tete .ejb-encart__logo {
		height: 24px;
	}

	.ejb-encart--tete .ejb-encart__argument {
		display: none;
	}
}

/* ==================================================== Abonnés Instagram */

/*
 * Le compte d'abonnés reprend le chiffre des nombres du site : Bodoni, l'œil
 * large, l'interlettrage resserré comme sur toute grande capitale de la charte.
 *
 * La taille reste à la main d'Elementor — trente-huit pixels dans le bloc de la
 * communauté, vingt-six dans sa version mobile — et l'interlettrage la suit en
 * « em » plutôt qu'en pixels, pour tenir à toutes les tailles.
 *
 * « tabular-nums » fige la chasse des chiffres : sans lui, le passage de 107 à
 * 108 décalerait la ligne entière au millier suivant.
 */
.ejb-abonnes {
	display: inline-block;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ej-encre, #12100E);
	font-variant-numeric: tabular-nums;
}