/*
 * Esprit Joaillerie — styles de base.
 *
 * La charte (couleurs, typographies) est pilotée depuis Elementor :
 * Réglages du site > Couleurs globales / Polices globales.
 * Les variables ci-dessous reprennent ces valeurs pour les widgets personnalisés.
 */

:root {
	--ej-encre: #12100E;        /* texte principal */
	--ej-encre-profonde: #1B1815; /* fonds sombres hérités */
	--ej-marine: #0F1F35;       /* fonds sombres du site : encarts, pied, tiroir */
	--ej-gris: #6B6560;         /* texte secondaire */
	--ej-creme: #FAF8F5;        /* fond de page */
	--ej-creme-ombre: #F1EDE7;  /* fond de section alterné */
	--ej-bordure: #E4DFD8;      /* filets et séparateurs */
	--ej-or: #8C6A3F;           /* accent, liens survolés */
	--ej-or-clair: #C9A26B;     /* accent sur fond sombre */

	/*
	 * Le dégradé des surfaces marines : bloc partenaires, pavé de la lettre,
	 * bandeau du pied, bouton de la lettre, tiroir. Il tient dans la famille
	 * marine du site — un bleu franc y serait étranger, la maquette ne tient
	 * qu'au crème, au marine et à l'or — et reste faible d'un bout à l'autre :
	 * un écart plus marqué se lirait comme une erreur d'impression plutôt que
	 * comme un relief.
	 *
	 * Écrit une fois ici parce que cinq surfaces le partagent, dont une servie
	 * par la feuille du plugin : cinq copies auraient divergé au premier
	 * réglage. L'oblique convient aux surfaces larges ; le tiroir, qui est
	 * haut et étroit, redresse l'angle chez lui.
	 */
	--ej-degrade-marine: linear-gradient(102deg, #1D3A63 0%, #0F1F35 58%, #16294A 100%);

	--ej-serif-titre: 'Bodoni Moda', serif;
	--ej-serif-texte: 'Newsreader', serif;
	--ej-sans: 'Inter', sans-serif;

	/* Hauteur du bandeau d'annonce, dont dépend le calage de l'en-tête collant. */
	--ej-hauteur-annonce: 38px;
}

/* Sous le point de rupture mobile d'Elementor, le bandeau d'annonce porte
   `elementor-hidden-mobile` : il ne prend plus de place, l'en-tête colle à 0. */
@media (max-width: 767px) {

	:root {
		--ej-hauteur-annonce: 0px;
	}
}

body {
	background-color: var(--ej-creme);
	color: var(--ej-encre);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--ej-encre);
	text-decoration: none;
}

a:hover {
	color: var(--ej-or);
}

/* Anneau de focus visible au clavier, conforme à la maquette. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 1px solid var(--ej-or);
	outline-offset: 3px;
}

::selection {
	background-color: var(--ej-or);
	color: var(--ej-creme);
}

img {
	display: block;
}

/* Surtitre en capitales espacées, récurrent dans toute la maquette. */
.ej-surtitre {
	font-family: var(--ej-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ej-gris);
}

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

/* ------------------------------------------------------------------ */
/*  Règles structurelles des templates Elementor                       */
/*                                                                     */
/*  Elementor ne propose pas de contrôle pour ces quelques propriétés  */
/*  (rapport d'image, recadrage, retour à la ligne). Elles ne portent  */
/*  aucune valeur de charte : couleurs, tailles et espacements restent */
/*  réglables depuis l'éditeur.                                        */
/* ------------------------------------------------------------------ */

/* Visuels d'article : cadre au rapport fixe, image recadrée au centre. */
.ej-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.2, .6, .2, 1);
}

.ej-visuel--portrait img { aspect-ratio: 4 / 5; }
.ej-visuel--paysage img  { aspect-ratio: 3 / 2; }
.ej-visuel--large img    { aspect-ratio: 16 / 10; }
.ej-visuel--carre img    { aspect-ratio: 1 / 1; }
.ej-visuel--vertical img { aspect-ratio: 9 / 16; }

/* Léger rapprochement au survol de la carte entière. */
.ej-carte:hover .ej-visuel img {
	transform: scale(1.04);
}

/*
 * Le pavé de la lettre reprend le dégradé du bloc partenaires, lui-même pris
 * à la baseline du bandeau : ces trois surfaces marines sont les seules de la
 * page, elles doivent se répondre plutôt que se ressembler à peu près.
 *
 * Le conteneur porte l'ancre « #newsletter » que le pied et les liens de la
 * page visent déjà ; c'est le repère le plus sûr qu'Elementor nous laisse,
 * aucune classe n'étant posée dessus. Le dégradé est une image de fond : il
 * se pose par-dessus le #0F1F35 écrit par Elementor sans avoir à le déloger.
 */
#newsletter {
	background-image: var(--ej-degrade-marine);
}

/* Formulaire de la lettre d'information : la maquette ne montre ni cadre ni
   fond, seulement un filet sous la ligne entière et un bouton en pastille.
   Les sélecteurs portent sur les éléments : le thème habille sinon les champs
   avec une règle plus spécifique qu'une classe. */
/*
 * Elementor espace les rangées d'un formulaire par une marge basse sur chaque
 * groupe de champ, compensée par une marge négative sur le bandeau. Sur une
 * ligne unique, ces dix pixels ne séparaient rien : ils s'ajoutaient sous la
 * saisie, éloignant le filet du texte qu'il souligne, et la marge négative
 * ramenait ensuite la suite trop près. On remet la variable à zéro et on pose
 * les écarts ici, où ils se lisent.
 */
.ej-lettre {
	--e-form-rows-gap: 0px;
}

.ej-lettre .elementor-form-fields-wrapper {
	flex-wrap: wrap;
	align-items: center;
	gap: 0 14px;
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Trois classes : le système de colonnes d'Elementor pose les largeurs avec
   deux, et l'emporterait sur une règle plus courte. */
.ej-lettre .elementor-form-fields-wrapper > .elementor-field-group {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-submit {
	flex: 0 0 auto;
}

/*
 * La case de consentement ouvre une seconde rangée et reprend à son bord haut
 * le filet que le bandeau portait en bas : la ligne ne bouge pas, elle change
 * seulement de porteur. Le filet souligne toujours la saisie à quatorze
 * pixels, et respire de seize avant la case.
 */
/* Elementor rend toujours le bouton d'envoi en dernier ; la case, elle, est un
   champ et le précède dans le document. L'ordre visuel les remet d'aplomb sans
   toucher au balisage. */
.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-submit {
	order: 1;
}

.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-acceptance {
	order: 2;
	flex: 0 0 100%;
	margin: 14px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(250, 248, 245, .4);
}

.ej-lettre .elementor-field-type-acceptance .elementor-field-subgroup,
.ej-lettre .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/*
 * La case du navigateur est un carré plein, trop bruyant sur le fond sombre de
 * l'encart. On la redessine en trait, comme les autres cadres de la maquette :
 * vide au repos, crème une fois cochée. La coche est une image de fond — une
 * case n'a pas d'enfant à styler. L'anneau de focus au clavier reste celui de
 * la feuille, posé plus haut sur toutes les saisies.
 *
 * Elle s'aligne sur la première ligne du texte, non sur le bloc entier.
 *
 * Six classes : le widget habille ses saisies par sa feuille générée — fond et
 * cadre transparents, pour la ligne d'e-mail — avec un sélecteur qui compte le
 * gabarit, l'élément et le groupe. Une règle plus courte n'y survivrait pas.
 */
.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field {
	appearance: none;
	flex: none;
	width: 15px;
	height: 15px;
	margin: 3px 0 0;
	border: 1px solid rgba(250, 248, 245, .45);
	border-radius: 2px;
	background: none;
	cursor: pointer;
	transition: border-color 200ms cubic-bezier(.2, .6, .2, 1),
	            background-color 200ms cubic-bezier(.2, .6, .2, 1);
}

.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field:hover {
	border-color: var(--ej-creme);
}

.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field:checked {
	border-color: var(--ej-creme);
	background-color: var(--ej-creme);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%2312100E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px 8px;
}

.ej-lettre .elementor-field-type-acceptance .elementor-field-option label {
	margin: 0;
	font-family: var(--ej-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(250, 248, 245, .7);
	cursor: pointer;
}

.ej-lettre .elementor-field-type-acceptance .elementor-field-option label a {
	color: var(--ej-creme);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ej-lettre input.elementor-field {
	min-width: 0;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	font-family: var(--ej-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ej-creme);
}

.ej-lettre input.elementor-field::placeholder {
	color: rgba(250, 248, 245, .5);
}

/*
 * Les messages de retour, une fois le formulaire envoyé. Elementor les rend
 * dans l'encre du site, qui est celle du texte courant : sur le bandeau marine
 * de la lettre, le remerciement s'écrivait en noir sur bleu nuit.
 *
 * Le succès prend l'or de la charte plutôt qu'un vert de formulaire, l'erreur
 * un rose clair — assez chaud pour se distinguer du fond sans jurer avec le
 * reste de la page.
 */
.ej-lettre .elementor-message {
	flex: 0 0 100%;
	margin-top: 14px;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ej-creme, #FAF8F5);
}

.ej-lettre .elementor-message.elementor-message-success {
	color: var(--ej-or, #C9A26B);
}

.ej-lettre .elementor-message.elementor-message-danger,
.ej-lettre .elementor-message.elementor-message-error {
	color: #E8A5A0;
}

/* La coche que le thème pose devant le succès reprend la couleur du texte. */
.ej-lettre .elementor-message::before {
	color: inherit;
}

.ej-lettre .elementor-field-type-submit {
	flex: none;
}

.ej-lettre button.elementor-button {
	border: 0;
	border-radius: 999px;
	padding: 12px 22px;
	background-color: var(--ej-creme);
	color: var(--ej-encre);
	font-family: var(--ej-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 300ms cubic-bezier(.2, .6, .2, 1),
		color 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Au survol, l’or — la réponse commune à tous les boutons du site. C’est l’or
   clair : le bouton est posé sur le pavé marine de la lettre, et l’or sombre
   des fonds crème s’y lirait comme un brunissement. L’encre du libellé tient
   le contraste sur cette teinte. */
.ej-lettre button.elementor-button:hover,
.ej-lettre button.elementor-button:focus {
	background-color: var(--ej-or-clair);
	color: var(--ej-encre);
}

/* Sur mobile, la ligne unique se défait : le champ prend en pastille le cadre
   que portait la ligne, et le bouton passe dessous, sur toute la largeur.
   L'épaisseur et l'arrondi de ce cadre restent réglés depuis le widget. */
@media (max-width: 767px) {
	/* Classes répétées : la gouttière de colonnes du formulaire est posée par
	   Elementor avec quatre classes ; sans cela le retrait négatif du bandeau
	   de champs fait déborder le champ hors de l'encart. */
	.ej-lettre.ej-lettre .elementor-form-fields-wrapper.elementor-form-fields-wrapper {
		flex-wrap: wrap;
		gap: 0;
		margin: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.ej-lettre.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-submit.elementor-field-type-submit {
		padding: 0;
	}

	.ej-lettre .elementor-form-fields-wrapper > .elementor-field-group,
	.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-submit {
		flex: 0 0 100%;
	}

	/* La pastille est portée par le groupe de champ, non par la saisie
	   elle-même : le widget habille cette dernière avec un sélecteur qu'aucune
	   règle raisonnable ne dépasse, et son cadre ne se règle pas par appareil.
	   La classe est répétée pour passer devant la gouttière de colonnes du
	   formulaire, qui ferait déborder le champ de l'encart. */
	.ej-lettre.ej-lettre .elementor-form-fields-wrapper > .elementor-field-group.elementor-field-group:not(.elementor-field-type-submit):not(.elementor-field-type-acceptance) {
		align-items: center;
		min-height: 50px;
		padding: 0 18px;
		border: 1px solid rgba(250, 248, 245, .4);
		border-radius: 999px;
	}

	.ej-lettre input.elementor-field {
		padding: 0;
	}

	.ej-lettre.ej-lettre button.elementor-button.elementor-button {
		width: 100%;
		min-height: 52px;
	}

	/* Le champ porte ici son propre cadre : le filet de la case n'aurait plus
	   rien à souligner. Elle se contente de l'écart. */
	.ej-lettre.ej-lettre .elementor-form-fields-wrapper > .elementor-field-type-acceptance {
		margin: 18px 0 0;
		padding: 0;
		border-top: 0;
	}
}

/* Pied sur mobile : les réseaux et les coordonnées quittent le haut de la
   colonne d'identité pour se poser après les menus. La colonne s'efface du
   rendu — ses blocs deviennent frères des autres colonnes — le temps de les
   réordonner ; Elementor n'expose pas l'ordre des éléments. */
@media (max-width: 767px) {
	.ej-pied-identite {
		display: contents;
	}

	.ej-pied-identite > * {
		width: 100%;
	}

	/* La colonne portait l'écart entre ses blocs dans son gap ; effacée, c'est
	   la rangée qui commande, et elle n'en a pas. L'écart se reporte donc sur
	   les blocs eux-mêmes — avec la classe d'élément, sans quoi la remise à zéro
	   des marges de widget l'emporte. */
	.ej-pied-identite > .elementor-element:not(:last-child) {
		margin-bottom: 16px;
	}

	.ej-pied-identite > .ej-reseaux,
	.ej-pied-identite > .ej-pied-contact {
		order: 2;
	}
}

/* L'appel à l'action du pied garde une largeur d'affiche dès que sa colonne
   s'élargit. Sous 1100px environ, les quatre colonnes ne tiennent plus sur une
   rangée : la dernière passe à la ligne et, comme elle est en `flex-grow`, elle
   s'étale sur toute la largeur — la pastille avec elle, jusqu'à 900px de long.
   Le plafond ne mord pas dans la grille à quatre, où la colonne fait 185 à
   248px, ni sur mobile, où le pied est empilé et où la pastille pleine largeur
   est le dessin voulu. */
@media (min-width: 768px) {
	.ej-pied-cta {
		max-width: 340px;
	}
}

/* ------------------------------------------------------------------ */
/*  Le bandeau marine du pied : même dégradé que le bloc partenaires   */
/*  et que la lettre, et la signature du média posée sur le bord bas.  */
/* ------------------------------------------------------------------ */

/*
 * Le conteneur n'a ni classe ni ancre dans Elementor ; on le reconnaît à ce
 * qu'il contient — la mention de propriété, qui n'existe nulle part ailleurs.
 * Plus sûr que « :last-child », qui changerait de cible au premier conteneur
 * ajouté sous le pied.
 */
.elementor-location-footer > .e-con:has(.ej-pied-mention) {
	position: relative;
	/* La signature est calibrée pour tenir d'un bord à l'autre ; la coupe
	   n'est qu'un garde-fou, si une police de repli plus large la faisait
	   déborder de la page. */
	overflow: hidden;
	/* Elementor pose ce fond en couleur ; le dégradé est une image et se
	   superpose, sans qu'il faille lui disputer la priorité. */
	background-image: var(--ej-degrade-marine);
	/* La place réservée à la signature, sous la ligne des mentions. Elementor
	   n'écrit qu'une variable de marge intérieure ; la propriété physique,
	   posée ici, l'emporte sur la règle qui la lit. */
	padding-bottom: 7.2vw;
}

/*
 * La signature : le nom du média en très grand, presque effacé, calé sur le
 * bord bas. Le mot est déjà écrit en toutes lettres au-dessus, dans la colonne
 * d'identité — celui-ci est un décor, d'où le pseudo-élément plutôt qu'un
 * widget de plus, et d'où le fait qu'il ne se sélectionne ni ne se clique.
 *
 * La taille est en pourcentage de la largeur de fenêtre : à ce corps, une
 * valeur fixe laisserait un blanc à droite sur grand écran et déborderait sur
 * petit. Le corps choisi remplit la ligne d'un bord à l'autre, chasse
 * comprise.
 */
.elementor-location-footer > .e-con:has(.ej-pied-mention)::after {
	content: "Esprit Joaillerie";
	position: absolute;
	inset: auto 0 -.05em 0;
	/* L'interligne serré ramène les capitales contre le bord bas : à 1, la
	   cadratine laisserait dessous le blanc d'une descendante entière. Le
	   décalage négatif finit de les y poser — la queue du « J », seule à
	   descendre sous la ligne de pied, s'arrête au bord. */
	line-height: .74;
	font-family: 'Bodoni Moda', serif;
	font-size: 9.4vw;
	font-weight: 400;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	/* Une couleur transparente plutôt qu'une opacité : rien d'autre à faire
	   pâlir ici, et le texte reste sur le même plan que le fond. */
	color: rgba(250, 248, 245, .07);
	pointer-events: none;
	user-select: none;
}

/*
 * « Patrimoine Joaillerie », dans la mention de propriété, renvoie au site du
 * cabinet. La mention est écrite en crème à demi effacé ; le lien s'en
 * détache par la teinte pleine plutôt que par un soulignement, qui hachurerait
 * une ligne déjà discrète. Au survol, l'or clair — la réponse commune à tous
 * les liens du site, dans sa version des fonds sombres.
 *
 * Le lien est écrit dans le titre du widget, en HTML : Elementor rend le
 * balisage des widgets « heading » tel quel, il n'y a donc rien à activer.
 *
 * Visé par le conteneur d'identité : la mention est un widget « heading » qui
 * n'y est pas distingué par une classe propre, et c'est le seul de ce
 * conteneur à porter un lien.
 */
/* Classes répétées : Elementor pose la couleur du titre sur le widget avec
   trois classes, et le lien en hérite ; il en faut autant pour la reprendre. */
.ej-pied-identite .elementor-widget-heading.elementor-widget-heading .elementor-heading-title a {
	color: var(--ej-creme);
	text-decoration: none;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-pied-identite .elementor-widget-heading.elementor-widget-heading .elementor-heading-title a:hover,
.ej-pied-identite .elementor-widget-heading.elementor-widget-heading .elementor-heading-title a:focus-visible {
	color: var(--ej-or-clair);
}

/*
 * Le crédit de réalisation, à droite des liens légaux. Même corps et même
 * crème à demi effacé que la mention de propriété : il ne doit pas peser plus
 * qu'elle. Un filet vertical le détache du menu ; le cœur, en or clair, est
 * le seul accent de la ligne, et le nom du studio répond au survol comme les
 * autres liens des fonds sombres.
 *
 * Le balisage vit dans un widget HTML du pied (Elementor filtre le SVG dans
 * un titre). La mention de propriété est réglée pour s'étirer, ce qui pousse
 * le menu et le crédit contre le bord droit.
 */
.ej-pied-credit {
	font-family: Inter, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(250, 248, 245, .5);
}

.ej-pied-credit__ligne {
	padding-left: 24px;
	border-left: 1px solid rgba(250, 248, 245, .18);
}

.ej-pied-credit__coeur {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 .1em;
	vertical-align: -.06em;
	fill: var(--ej-or-clair);
}

/* Deux classes : le kit Elementor colore les liens avec « .elementor-kit-N a »,
   qu'une classe seule ne l'emporterait pas. */
.ej-pied-credit .ej-pied-credit__lien {
	color: var(--ej-creme);
	text-decoration: none;
	transition: color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-pied-credit .ej-pied-credit__lien:hover,
.ej-pied-credit .ej-pied-credit__lien:focus-visible {
	color: var(--ej-or-clair);
}

/* Bas de page sur mobile : les liens d'abord, la mention de propriété dessous.
   Elementor n'expose pas l'ordre des éléments dans un conteneur. */
@media (max-width: 767px) {
	.ej-pied-mention {
		order: 2;
	}

	/* Le crédit ferme la pile, sous la mention ; le filet n'a plus rien à
	   séparer une fois les éléments empilés. */
	.ej-pied-credit {
		order: 3;
		font-size: 12px;
	}

	.ej-pied-credit__ligne {
		padding-left: 0;
		border-left: 0;
	}

	/* Une mention par ligne : côte à côte, les trois liens tenaient au prix
	   d'un texte serré contre les bords. */
	.ej-pied-legal .elementor-nav-menu--main > ul {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 10px;
	}

	/* L'écart entre entrées est posé en marge horizontale sur le lien lui-même :
	   elle n'a plus d'objet une fois la liste verticale, et décalait les entrées
	   suivantes de dix pixels. */
	.ej-pied-legal .elementor-nav-menu--main .elementor-nav-menu > li > a {
		margin-inline: 0;
	}
}

/* Mesure d'un titre, en signes plutôt qu'en pixels : le retour à la ligne
   reste au même mot quelle que soit la taille de police. */
/* Portée au titre lui-même : Elementor impose un max-width: 100% au widget,
   qui l'emporterait sur une règle posée à ce niveau. */
.ej-mesure-20 .elementor-heading-title {
	display: block;
	max-width: 20ch;
}

.ej-mesure-26 .elementor-heading-title {
	display: block;
	max-width: 26ch;
}

.ej-mesure-34 p {
	max-width: 34ch;
}

.ej-mesure-48 p {
	max-width: 48ch;
}

/* Repousse un élément en bas de sa colonne, à hauteur du bas de la voisine. */
.ej-cale-en-bas {
	margin-top: auto;
}

/* Légendes saisies sur deux lignes : le retour à la ligne du champ est rendu
   tel quel, sans avoir à écrire de HTML dans l'éditeur. */
.ej-legende-deux-lignes .elementor-heading-title {
	white-space: pre-line;
}

/* En-tête collant : seule la barre principale suit le défilement, le bandeau
   d'annonce s'en va avec le haut de page.

   Rendre la seule barre principale `sticky` ne donnerait rien : un élément
   collant ne se déplace qu'à l'intérieur de son parent, ici l'en-tête, dont la
   hauteur est justement celle des deux barres. On colle donc l'en-tête entier
   — enfant direct de `body`, il dispose de toute la page — en le remontant de
   la hauteur du bandeau, qui sort ainsi du cadre. La barre principale porte
   déjà un fond opaque et un filet bas dans le gabarit, rien à ajouter.

   La hauteur du bandeau est imposée plutôt que laissée au contenu : c'est elle
   qui sert de décalage, les deux valeurs ne peuvent pas diverger. */
.ej-barre-annonce {
	height: var(--ej-hauteur-annonce);
}

header.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--ej-hauteur-annonce));
	/* Au-dessus des blocs de contenu, qui montent jusqu'à z-index 2. */
	z-index: 100;
}

/*
 * Décalage sous la barre d'administration de WordPress.
 *
 * Au repos rien ne manque : WordPress pousse la page de 32px et l'en-tête
 * commence dessous. C'est au défilement que la barre principale vient se
 * caler à un point d'arrêt situé sous la barre d'administration, qui est
 * fixée en haut de la fenêtre, et s'en trouve tranchée.
 *
 * La classe « admin-bar » n'est posée que pour les comptes connectés qui
 * affichent la barre : la règle ne touche donc personne d'autre. Sous 783px,
 * WordPress la rend absolue plutôt que fixe — elle s'en va avec le haut de
 * page, comme le bandeau d'annonce, et il n'y a plus rien à décaler.
 */
@media (min-width: 783px) {
	body.admin-bar header.elementor-location-header {
		top: calc(32px - var(--ej-hauteur-annonce));
	}
}

/* Les ancres internes ne se glissent plus sous la barre. */
:target {
	scroll-margin-top: 110px;
}

/* De 1025 à 1649px, la barre ne tient pas d'office sur une ligne : le
   libellé « Newsletter » en toutes lettres coûte à lui seul quatre-vingt-dix
   pixels. Le bouton se réduit donc à un médaillon rond, comme la loupe
   voisine, et les écarts se resserrent. Elementor n'ayant pas de point de
   rupture à ces largeurs — ses réglages responsive s'arrêtent à la tablette —
   la bascule se fait ici.

   Les deux bornes sont mesurées, non choisies.

   Au-dessus de 1649px, la barre a la place de tout porter sans rien réduire :
   le libellé reprend ses lettres, c'est le dessin des grands écrans.

   En dessous de 1490px, la rangée des rubriques réclame 593px et n'en reçoit
   plus assez : les six libellés venaient chevaucher les liens de service. La
   barre repasse alors sur deux rangées — identité et accès sur la première,
   rubriques centrées sur la seconde — plutôt que de rogner la typographie,
   qui porte l'identité de la maison. */
@media (min-width: 1490px) and (max-width: 1649px) {

	/*
	 * La rangée tient sur une seule ligne : c’est l’écart de 40px entre les
	 * quatre groupes qui fournit la place, pas le corps des rubriques.
	 *
	 * Au plus étroit de cette plage — 1490px — la barre réclame 1436px pour
	 * 1379px offerts. Les trois écarts ramenés de 40 à 18px en rendent 66, le
	 * médaillon de la lettre (le libellé retiré plus bas) une soixantaine : le
	 * compte y est, sans toucher à la typographie, qui porte l’identité de la
	 * maison.
	 *
	 * « nowrap » plutôt que de compter sur la seule place gagnée : si un jour
	 * une rubrique s’ajoute, la barre se resserrera au lieu de se rompre en
	 * deux lignes inégales — c’est la rangée des rubriques, élastique, qui
	 * absorbera le surcroît.
	 */
	/* Classes répétées sur le cadre : Elementor pose « flex-wrap: wrap » sur
	   ses conteneurs avec une classe, et sa feuille passe après celle du
	   thème — à égalité c’est l’ordre qui tranche, et le repli revenait. */
	.ej-barre-principale__cadre.ej-barre-principale__cadre > .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 18px;
	}

	.ej-logo {
		order: 1;
		flex: 0 0 auto;
	}

	/* Les rubriques prennent le milieu et sont seules à céder du terrain :
	   « min-width: 0 » lève la largeur plancher que le flex accorde d’office,
	   sans quoi elles pousseraient les commandes hors du cadre. */
	.ej-barre-principale__cadre > .e-con-inner > .ej-nav-rubriques {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.ej-nav-rubriques .elementor-nav-menu--main > ul {
		justify-content: center;
		flex-wrap: nowrap;
	}

	/* Les libellés ne se coupent pas en deux lignes dans leur case. */
	.ej-nav-rubriques .elementor-nav-menu--main .elementor-item {
		white-space: nowrap;
	}

	/* La marge automatique a disparu avec la seconde rangée : les liens de
	   service et les commandes se posent à la suite, à droite, sans jamais se
	   laisser comprimer. */
	.ej-nav-secondaire {
		order: 3;
		flex: 0 0 auto;
	}

	.ej-actions {
		order: 4;
		flex: 0 0 auto;
	}

	/* Le bouton se réduit à son enveloppe, ronde comme la loupe voisine. */
	.ej-bouton-lettre.ej-bouton-lettre .elementor-button-text {
		display: none;
	}

	/* L'enveloppe reprend la taille de la loupe voisine : sans cela elle suit
	   le corps de 11px du libellé, devenu invisible. */
	.ej-bouton-lettre .elementor-button-icon {
		margin: 0;
		font-size: 17px;
		line-height: 0;
	}

	.ej-bouton-lettre .elementor-button-icon svg,
	.ej-bouton-lettre .elementor-button-icon i {
		width: 17px;
		height: 17px;
		font-size: 17px;
	}

	.ej-bouton-lettre.ej-bouton-lettre .elementor-button.elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}
}

/* De 1025 à 1489px, les six rubriques ne tiennent plus à côté de l'identité
   et des accès : elles réclament 593px et le milieu de la barre ne leur en
   laisse pas tant. La barre se lit donc sur deux rangées — identité à gauche
   et accès à droite, rubriques centrées dessous — plutôt que de rogner sur le
   corps des libellés. Le médaillon de la lettre, lui, reste celui du bloc
   précédent : la place manque ici plus encore. */
@media (min-width: 1025px) and (max-width: 1489px) {

	/* Classes répétées : Elementor pose la disposition de ses conteneurs avec
	   une classe et sa feuille passe après celle du thème. */
	.ej-barre-principale__cadre.ej-barre-principale__cadre > .e-con-inner {
		flex-wrap: wrap;
		align-items: center;
		column-gap: 24px;
		row-gap: 14px;
	}

	.ej-logo {
		order: 1;
		flex: 0 0 auto;
	}

	/* La marge automatique repousse les accès contre le bord droit. */
	.ej-nav-secondaire {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.ej-actions {
		order: 3;
		flex: 0 0 auto;
	}

	/* Seconde rangée, sur toute la largeur, rubriques centrées. */
	.ej-barre-principale__cadre > .e-con-inner > .ej-nav-rubriques {
		order: 4;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
	}

	.ej-nav-rubriques .elementor-nav-menu--main > ul {
		justify-content: center;
		flex-wrap: wrap;
	}

	.ej-nav-rubriques .elementor-nav-menu--main .elementor-item {
		white-space: nowrap;
	}

	/* Le bouton se réduit à son enveloppe, ronde comme la loupe voisine. */
	.ej-bouton-lettre.ej-bouton-lettre .elementor-button-text {
		display: none;
	}

	/* L'enveloppe reprend la taille de la loupe voisine : sans cela elle suit
	   le corps de 11px du libellé, devenu invisible. */
	.ej-bouton-lettre .elementor-button-icon {
		margin: 0;
		font-size: 17px;
		line-height: 0;
	}

	.ej-bouton-lettre .elementor-button-icon svg,
	.ej-bouton-lettre .elementor-button-icon i {
		width: 17px;
		height: 17px;
		font-size: 17px;
	}

	.ej-bouton-lettre.ej-bouton-lettre .elementor-button.elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}
}

/* Sous 1025px, l'en-tête reprend le dessin de la maquette mobile : burger,
   logo, « Newsletter » et loupe sur une ligne, les rubriques de premier
   niveau sur la suivante. Elles sont aussi dans le tiroir, en vignettes : la
   rangée sert à passer d'une rubrique à l'autre sans ouvrir le menu. */
@media (max-width: 1024px) {

	.ej-barre-principale__cadre > .e-con-inner {
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
	}

	/* Elementor étale les widgets sur toute la largeur dès la tablette : on
	   leur rend leur largeur naturelle pour qu'ils tiennent sur une ligne. */
	.ej-barre-principale__cadre > .e-con-inner > * {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
	}

	/* Le burger respire à côté du logo. */
	.ej-burger {
		order: 1;
		margin-right: 12px;
	}

	.ej-logo {
		order: 2;
	}

	.ej-actions {
		order: 3;
		margin-left: auto;
	}

	/* Le panneau du tiroir se rattache à l'en-tête pour couvrir l'écran. */
	.ej-barre-principale {
		position: relative;
		z-index: 50;
	}

	/*
	 * La rangée des rubriques passe à la ligne — d'où la largeur pleine — et
	 * se fait défiler du pouce plutôt que de se replier : six rubriques ne
	 * tiennent pas dans 390 px, et les couper en deux lignes casserait le
	 * bandeau.
	 *
	 * Les 24 px sont le retrait latéral de l'en-tête : repris en négatif, ils
	 * sortent la rangée jusqu'aux bords de l'écran pour que le défilement
	 * aille d'un bord à l'autre ; rendus en retrait interne, ils réalignent la
	 * première rubrique sur le logo. En bas, le retrait du conteneur est repris
	 * pour que la rangée se pose sur le filet de l'en-tête.
	 *
	 * Classes répétées : Elementor vise ce widget avec trois classes, et son
	 * feuillet passe après celui du thème. Il en faut donc une de plus pour
	 * reprendre la main sur la largeur.
	 */
	.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques {
		order: 4;
		width: calc(100% + 48px);
		max-width: none;
		margin: 6px -24px -14px;
		padding: 0 24px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ej-nav-rubriques::-webkit-scrollbar {
		display: none;
	}

	/* La rangée est le « ul » ; le « nav » qui le porte ne fait que l'envelopper. */
	.ej-nav-rubriques .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.ej-nav-rubriques .elementor-nav-menu--main .elementor-nav-menu > li {
		flex: 0 0 auto;
	}

	/* Quarante-quatre pixels de haut : la cible tactile, quel que soit le
	   corps du libellé. Le corps et l'écart entre rubriques se règlent, eux,
	   sur le widget — ils changent d'une rupture à l'autre. */
	.ej-nav-rubriques .elementor-nav-menu--main .elementor-item {
		display: flex;
		align-items: center;
		min-height: 44px;
		white-space: nowrap;
	}

	/* Les rubriques s'effacent derrière le titre de la page ; celle qu'on lit
	   reprend l'encre pleine. Quatre classes, pour la même raison. */
	.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques .elementor-nav-menu--main .elementor-item {
		color: var(--ej-gris);
	}

	.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques.ej-nav-rubriques .elementor-nav-menu--main .elementor-item-active {
		color: var(--ej-encre);
	}

	/* Le bouton redevient un simple libellé, suivi du filet de la maquette. */
	.ej-actions .ej-bouton-lettre {
		display: flex;
		align-items: center;
		gap: 8px;
		order: -1;
	}

	.ej-actions .ej-bouton-lettre::after {
		content: "";
		width: 1px;
		height: 15px;
		background-color: var(--ej-bordure);
	}

	/* Classes doublées : Elementor cible ses boutons avec quatre classes
	   (.elementor-<doc> .elementor-element.elementor-element-<id> .elementor-button),
	   il en faut donc davantage pour reprendre la main. */
	.ej-actions .ej-bouton-lettre.ej-bouton-lettre .elementor-button.elementor-button {
		padding: 0 8px;
		border-radius: 0;
		background-color: transparent;
		color: var(--ej-encre);
		font-size: 9px;
		font-weight: 500;
		letter-spacing: .14em;
	}

	.ej-bouton-lettre.ej-bouton-lettre .elementor-button-icon {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/*  Ce qui ne vaut que pour la première page d'une archive             */
/*                                                                     */
/*  Le bloc « à la une » ne paraît que sur la première page — c'est le  */
/*  widget qui s'en charge. Son titre, lui, est un widget de texte : il */
/*  ne sait pas compter les pages, et restait seul au-dessus du vide.   */
/*  WordPress marque le corps de la page d'une classe « paged » dès la  */
/*  deuxième ; elle suffit à l'éteindre.                                */
/* ------------------------------------------------------------------ */

body.paged .ej-page-un {
	display: none;
}


/* ------------------------------------------------------------------ */
/*  Tiroir de navigation des petits écrans                             */
/* ------------------------------------------------------------------ */

/*
 * Le burger et la croix de la maquette sont deux tracés fins — deux traits
 * pour l'un, deux barres croisées pour l'autre —, du même trait de 1,2 que la
 * loupe, la flèche et l'œil. Aucune fonte d'icônes n'a ce dessin, et le
 * contrôle du bouton ne propose que des fontes : on éteint donc le glyphe et
 * on pose le tracé en masque, qui prend la couleur du bouton.
 */
.ej-burger .elementor-button-icon svg,
.ej-burger .elementor-button-icon i,
.ej-tiroir__fermer .elementor-button-icon svg,
.ej-tiroir__fermer .elementor-button-icon i {
	display: none;
}

.ej-burger .elementor-button-icon,
.ej-tiroir__fermer .elementor-button-icon {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	line-height: 0;
	background-color: currentColor;
}

.ej-burger .elementor-button-icon {
	-webkit-mask: var(--ej-burger) center / 22px 22px no-repeat;
	mask: var(--ej-burger) center / 22px 22px no-repeat;
}

.ej-tiroir__fermer .elementor-button-icon {
	-webkit-mask: var(--ej-croix) center / 22px 22px no-repeat;
	mask: var(--ej-croix) center / 22px 22px no-repeat;
}

/* Le défilement de la page derrière le tiroir est bloqué par le widget
   lui-même — « Disable Page Scrolling », qui pose une classe sur le corps du
   document. Rien à écrire ici : on avait d'abord doublé ce réglage en CSS,
   faute de l'avoir vu. */
/*
 * Le tiroir se mesure sur la hauteur réellement visible, et lui seul défile.
 *
 * Le défilement de la page derrière le tiroir reste bloqué — c'est bien ce
 * qu'on veut, sans quoi la page glisse sous le menu ouvert. Le bouton
 * « Newsletter », dernier de la colonne, restait pourtant hors d'atteinte sur
 * iPhone : le widget taille le tiroir en `100vh`, or sous Safari mobile le
 * `vh` compte la fenêtre barres d'outils rétractées, plus haute que ce qu'on
 * voit. Les derniers pixels passaient donc sous la barre, et comme le contenu
 * ne débordait pas de sa boîte, il n'y avait rien à faire défiler.
 *
 * Le `dvh` suit la hauteur visible du moment. Il est posé ici plutôt que dans
 * le réglage du widget : le contrôle « Custom Height » n'admet que px, %, em,
 * rem et vh, et normaliserait l'unité au prochain enregistrement de l'éditeur.
 * Le débordement, lui, est déjà en `auto` — la variable du widget suffit.
 *
 * Trois fois la classe : Elementor pose la hauteur sous
 * `.elementor-25276 .elementor-element.elementor-element-fe837dc`, et une
 * classe seule se ferait battre par la spécificité, sans rien signaler.
 */
@supports (height: 100dvh) {
	.ej-tiroir.ej-tiroir.ej-tiroir {
		--e-off-canvas-height: 100dvh;
	}
}


/*
 * L'ancre de la lettre se pose sous l'en-tête, pas dessous.
 *
 * L'en-tête est collant : un lien vers « #newsletter » amenait le haut du
 * pavé pile derrière lui, et son titre disparaissait. Les hauteurs sont
 * relevées sur le rendu, une par rupture, et gardent seize pixels d'air.
 */
:root {
	--ej-hauteur-entete: 139px;
}

@media (max-width: 1024px) {
	:root {
		--ej-hauteur-entete: 135px;
	}
}

@media (max-width: 767px) {
	:root {
		--ej-hauteur-entete: 113px;
	}
}

#newsletter {
	scroll-margin-top: calc(var(--ej-hauteur-entete) + 16px);
}

/*
 * Le bouton plein du site : la pastille marine, dégradée comme les grandes
 * surfaces, qui s'emplit d'or au survol.
 *
 * Le bouton de la lettre porte le même dessin mais garde sa classe à lui : il
 * se replie en médaillon carré sous 1025px, ce qu'un bouton posé dans le corps
 * d'une page n'a pas à faire.
 *
 * Le dégradé est une image de fond : il se pose par-dessus la couleur écrite
 * par Elementor sans avoir à la déloger — et au survol il s'efface, pour
 * laisser paraître l'or que l'éditeur passe en fond. Sans ce retrait, l'image
 * couvrirait la couleur et le bouton ne répondrait plus.
 */
.ej-bouton-marine .elementor-button {
	background-image: var(--ej-degrade-marine);
}

.ej-bouton-marine .elementor-button:hover,
.ej-bouton-marine .elementor-button:focus {
	background-image: none;
}

/*
 * Le bouton « Suivre » n'est pas un widget bouton mais un conteneur : une
 * icône et un libellé posés côte à côte, que le lien enveloppe. Le fond se
 * pose donc sur l'élément lui-même, et non sur un « .elementor-button »
 * intérieur qu'il n'a pas — d'où cette règle jumelle plutôt qu'un sélecteur
 * ajouté à la précédente.
 *
 * Le retrait au survol obéit à la même raison que pour la pastille : l'image
 * couvrirait l'or qu'Elementor passe en fond, et le bouton ne répondrait plus.
 */
.ej-suivre {
	background-image: var(--ej-degrade-marine);
}

.ej-suivre:hover,
.ej-suivre:focus {
	background-image: none;
}

/*
 * Le bouton de la lettre reprend le dégradé des surfaces marines. C'est la
 * plus petite d'entre elles : sur cent trente pixels l'écart se lit à peine,
 * mais c'est justement ce qu'on veut — la pastille cesse d'être un aplat sans
 * pour autant attirer l'œil plus que le reste de la barre.
 *
 * Au-dessus de 1024px seulement : en dessous, le bouton redevient un simple
 * libellé sans fond, et une image de fond survivrait à la couleur remise à
 * « transparent » — elle repeindrait la pastille qu'on venait de retirer.
 */
@media (min-width: 1025px) {
	.ej-bouton-lettre .elementor-button {
		background-image: var(--ej-degrade-marine);
	}

	/* Au survol, Elementor passe le fond à l'or ; l'image le couvrirait et le
	   bouton ne répondrait plus. */
	.ej-bouton-lettre .elementor-button:hover,
	.ej-bouton-lettre .elementor-button:focus {
		background-image: none;
	}
}

/*
 * Le tiroir prend le dégradé des surfaces marines, l'angle redressé : il
 * occupe tout l'écran, plus haut que large, et l'oblique des blocs larges y
 * traverserait la seule largeur du téléphone sans qu'on la voie. À 166° elle
 * descend du haut vers le bas, le long du menu.
 */
.ej-tiroir .e-off-canvas__content {
	background-image: linear-gradient(166deg, #1D3A63 0%, #0F1F35 58%, #16294A 100%);
}

/* Le défilement du panneau ne se propage pas à la page qui le porte. */
.ej-tiroir .e-off-canvas__content {
	overscroll-behavior: contain;
}

/*
 * Le tiroir tient dans l'écran, sans défilement.
 *
 * Tout y est utile : la recherche, les six rubriques, les quatre pages, la
 * lettre, les réseaux. Ce qui peut céder, ce sont les vignettes — elles se
 * partagent ce qui reste une fois le reste posé, et se rétractent d'autant
 * que l'écran est court. Sous 44 px, elles s'arrêtent : une cible tactile a
 * une taille plancher, et le panneau redéfile plutôt que de devenir
 * impraticable. Les retraits du corps sont égaux en haut et en bas.
 */
.ej-tiroir .e-off-canvas__content {
	display: flex;
	flex-direction: column;
}

/* La colonne du tiroir prend toute la hauteur : sans quoi le corps n'aurait
   rien à se partager, et le contenu se serait tassé en haut. */
.ej-tiroir .e-off-canvas__content > .e-con {
	flex: 1 1 auto;
	min-height: 0;
	/* Même piège qu'en dessous : sans « nowrap », le corps trop haut pour
	   l'écran se repliait en deuxième colonne et repartait du haut, par-dessus
	   le bandeau. */
	flex-wrap: nowrap;
}

/* Classes doublées : Elementor pose lui-même le « flex » de ses conteneurs,
   et sa feuille passe après celle du thème. */
/* Le corps s'étire pour remplir la hauteur, mais ne se comprime jamais sous
   son contenu : passé le plancher des vignettes, c'est au panneau de défiler,
   pas au menu de se replier sur l'en-tête.

   Le « nowrap » n'est pas décoratif : une colonne trop haute pour son écran
   ne déborde pas, elle se replie en une deuxième colonne posée hors du
   panneau — le bas du menu disparaissait purement et simplement. */
.ej-tiroir__corps.ej-tiroir__corps {
	flex: 1 0 auto;
	flex-wrap: nowrap;
}

/* Les vignettes se partagent ce qui reste. Pas de « min-height: 0 » ici : la
   hauteur minimale du bloc est celle de ses six vignettes à leur plancher,
   et c'est bien la limite qu'on veut. */
.ej-tiroir__rubriques.ej-tiroir__rubriques {
	flex: 1 1 auto;
	flex-wrap: nowrap;
}

.ej-tiroir__rubriques > .ej-tiroir__rubrique.ej-tiroir__rubrique {
	flex: 1 1 0;
	min-height: 44px;
}

/* Le retrait vertical de la vignette laisse la place au partage : sa hauteur
   ne vient plus de son contenu mais de la part qui lui revient, et le titre
   s'y centre. */
.ej-tiroir__rubriques > .ej-tiroir__rubrique.ej-tiroir__rubrique {
	padding-top: 0;
	padding-bottom: 0;
	align-items: center;
}

/* Le nom du média se centre dans le bandeau du tiroir : la croix est sortie du
   flux pour ne pas décaler le centrage. */
.ej-tiroir__entete {
	position: relative;
	justify-content: center;
}

.ej-tiroir__fermer {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

/* Les vignettes de rubrique passent sous un voile : sans lui, le titre se
   perd sur les visuels clairs. Le dégradé laisse l'image respirer à droite,
   comme dans la maquette. */
/*
 * Le fil clair des bords.
 *
 * Le voile est le pseudo-élément que le conteneur Elementor réserve à ses
 * fonds : sa feuille lui impose une hauteur et une largeur — 100 % du bloc,
 * bordures comprises. Le « inset » posé ici ne l'agrandissait donc pas, il le
 * déplaçait : décalé d'un pixel vers le haut, il découvrait la dernière ligne
 * du visuel en bas, et la première en haut. D'où ce fil clair, franc à gauche
 * où le voile est à 96 %, invisible à droite où il n'est qu'à 46 %.
 *
 * Rendre la largeur et la hauteur au « inset » suffit : le voile couvre alors
 * le bloc et un pixel au-delà, que le rognage reprend. Classe doublée pour
 * repasser devant la règle d'Elementor.
 */
.ej-tiroir__rubrique {
	position: relative;
	overflow: hidden;
	/* Ce qui restait après coup : dans l'arrondi, le lissage du visuel et
	   celui du voile sont deux calculs séparés, et le visuel repassait devant
	   sur un pixel. Le masque ne change aucune couleur — il est opaque de bout
	   en bout — mais fait composer la vignette d'un seul tenant ; l'anneau
	   intérieur pose l'encre jusque sur le bord. Mesuré sur le visuel le plus
	   clair : l'angle passe de 68 à 29, pour un intérieur à 31. */
	-webkit-mask-image: radial-gradient(#fff, #000);
	mask-image: radial-gradient(#fff, #000);
}

.ej-tiroir__rubrique.ej-tiroir__rubrique::before {
	content: "";
	position: absolute;
	inset: -1px;
	width: auto;
	height: auto;
	z-index: 0;
	pointer-events: none;
	background-color: rgba(250, 248, 245, .06);
	/* Le dégradé pose le panneau par-dessus la vignette : il doit être du même
	   bleu que lui, sinon le bord de l'image vire au brun sur fond marine. */
	background-image: linear-gradient(90deg, rgba(15, 31, 53, .96) 0%, rgba(15, 31, 53, .74) 45%, rgba(15, 31, 53, .46) 100%);
}

.ej-tiroir__rubrique > * {
	position: relative;
	z-index: 1;
}

/* Répertoire des maisons : sur mobile, la grille de cartes se lit en rangée de
   pastilles qui s'enroule. Le dessin de la pastille est réglé dans le modèle de
   carte ; il ne reste ici que la bascule de la grille, qu'Elementor ne sait pas
   faire d'un point de rupture à l'autre. La maquette n'en montre que dix : le
   reste attend la page du répertoire. */
@media (max-width: 767px) {
	.ej-repertoire.ej-repertoire .elementor-loop-container.elementor-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.ej-repertoire .e-loop-item {
		width: auto;
	}

	/* nth-of-type et non nth-child : Elementor ouvre la boucle par une balise
	   style, qui décalerait le compte d'une maison. */
	.ej-repertoire .e-loop-item:nth-of-type(n+11) {
		display: none;
	}
}

/* Mur des Signatures : sur mobile, la maquette de la page du répertoire ne
   reprend pas les pastilles de l'accueil. Elle donne à chaque maison une
   vignette carrée, en trois colonnes, où l'initiale coiffe le nom — la page
   les montre toutes, et une rangée de pastilles n'aurait plus rien dit à la
   cinquantième. La grille, ses colonnes et ses écarts se règlent depuis
   l'éditeur ; seul le rapport de la vignette est ici, faute de contrôle. */
/*
 * Le carré ne peut pas venir d'un « aspect-ratio » posé sur la vignette ni sur
 * sa cellule. Un rapport se résout à partir de la largeur, or celle-ci n'est
 * connue qu'une fois la grille dimensionnée : le navigateur mesure d'abord la
 * hauteur des rangées sur le seul contenu — l'initiale et le nom — arrête là
 * la hauteur du bloc qui porte la grille, puis applique le rapport. Les
 * rangées grandissaient sans que le bloc en soit averti, et dès qu'un tri par
 * lettre ramenait le mur à deux rangées, la seconde débordait sur la section
 * suivante. Elementor scelle l'affaire en donnant à ce bloc une hauteur de
 * 100 % de son widget.
 *
 * La hauteur des rangées est donc calculée d'avance, à partir de la largeur du
 * mur : une colonne vaut cette largeur moins les deux gouttières, divisée par
 * trois. « cqw » la donne sans passer par la hauteur — d'où l'absence de
 * cercle — et sans dépendre du viewport, donc des retraits de la page. Le
 * nombre de colonnes et l'écart restent réglés dans l'éditeur ; ils sont
 * repris ici, faute pour le CSS de savoir les lire.
 */
@media (max-width: 767px) {
	.ej-mur-maisons {
		container-type: inline-size;
	}

	.ej-mur-maisons .elementor-loop-container {
		grid-auto-rows: calc((100cqw - 2 * var(--grid-column-gap, 10px)) / 3);
	}

	/* Classe répétée : la carte est un conteneur Elementor, dont la hauteur
	   automatique est posée avec l'identifiant de l'élément. */
	.ej-maison-vignette.ej-maison-vignette {
		height: 100%;
		text-align: center;
	}
}

/* Widget Image au rapport imposé : le cadre porte le rapport, l'image le
   remplit et se recadre au centre. Elementor n'offre pas de contrôle de
   rapport ; poser celui-ci sur le cadre plutôt que sur l'image réserve la
   hauteur avant même que le fichier ne soit chargé. */
/* Le rapport est porté par le widget lui-même : Elementor 4 rend l'image sans
   conteneur intermédiaire. */
.ej-image-portrait,
.ej-image-portrait .elementor-widget-container {
	width: 100%;
	aspect-ratio: 4 / 5;
}

.ej-image-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Paragraphes dont l'écart est réglé par le conteneur, et non par leur propre
   marge : sans quoi les deux s'additionnent. */
.ej-texte-colle p:last-child {
	margin-bottom: 0;
}

/* Vignette de rubrique : un carré à visuel plein, avec un voile qui monte du
   bas pour que le nom reste lisible quelle que soit la photo choisie.
   Le rapport et le voile ne sont pas réglables depuis Elementor ; l'image, le
   lien et la typographie le restent. */
.ej-vignette-rubrique {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.ej-vignette-rubrique::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, .05) 100%);
}

.ej-vignette-rubrique > * {
	position: relative;
	z-index: 1;
}

/* Champ de recherche : une pastille au trait, la loupe posée à l'intérieur à
   gauche. Le bouton d'envoi d'Elementor n'a pas sa place dans ce dessin. */
.ej-tiroir__recherche .elementor-search-form__container {
	position: relative;
	border-radius: 999px;
	border: 1px solid rgba(250, 248, 245, .2);
	background-color: transparent;
	overflow: hidden;
}

.ej-tiroir__recherche .elementor-search-form__container::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 18px;
	z-index: 1;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: rgba(250, 248, 245, .6);
	-webkit-mask: var(--ej-loupe) center / contain no-repeat;
	mask: var(--ej-loupe) center / contain no-repeat;
	pointer-events: none;
}

.ej-tiroir__recherche .elementor-search-form__submit {
	display: none;
}

/* Elementor vise ce champ avec quatre classes ; il en faut autant plus une
   pour lui reprendre son retrait. */
.ej-tiroir__recherche.ej-tiroir__recherche input.elementor-search-form__input.elementor-search-form__input {
	padding: 0 20px 0 44px;
	background: none;
	color: var(--ej-creme);
}

.ej-tiroir__recherche input.elementor-search-form__input::placeholder {
	color: rgba(250, 248, 245, .5);
}

/* Le champ de la page de résultats reprend le dessin du tiroir, à l'encre : une
   pastille au trait, la loupe posée à l'intérieur à gauche, pas de bouton. */
.ej-recherche-champ .elementor-search-form__container {
	position: relative;
	border-radius: 999px;
	border: 1px solid var(--ej-bordure);
	background-color: transparent;
	overflow: hidden;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-recherche-champ .elementor-search-form__container:focus-within {
	border-color: var(--ej-or);
}

.ej-recherche-champ .elementor-search-form__container::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	z-index: 1;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: var(--ej-gris);
	-webkit-mask: var(--ej-loupe) center / contain no-repeat;
	mask: var(--ej-loupe) center / contain no-repeat;
	pointer-events: none;
}

.ej-recherche-champ .elementor-search-form__submit {
	display: none;
}

.ej-recherche-champ.ej-recherche-champ input.elementor-search-form__input.elementor-search-form__input {
	padding: 0 20px 0 46px;
	background: none;
	color: var(--ej-encre);
}

.ej-recherche-champ input.elementor-search-form__input::placeholder {
	color: var(--ej-gris);
}

/* Le champ ne porte plus l'anneau de focus général : le filet du cadre change
   de couleur, ce qui se voit mieux qu'un liseré sur une pastille au trait. */
.ej-recherche-champ input.elementor-search-form__input:focus-visible {
	outline: none;
}

/* Deux bandes du gabarit de résultats s'excluent : la liste et sa barre de tri
   d'un côté, l'invitation à réessayer de l'autre. WordPress pose la classe sur
   le corps, ce qui évite de dupliquer le gabarit ou de conditionner en PHP. */
.ej-recherche-vide {
	display: none;
}

body.search-no-results .ej-recherche-vide {
	display: flex;
}

body.search-no-results .ej-recherche-resultats {
	display: none;
}

/* Réseaux et langues sur une même ligne : Elementor étale sinon chaque widget
   sur toute la largeur dès la tablette. */
.ej-tiroir__pied > * {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

/* Le bouton de la lettre occupe toute la largeur du tiroir. */
.ej-tiroir__lettre .elementor-button {
	width: 100%;
}

/* Ciel d'étoiles de la lettre d'information : deux couches, décalées dans le
   temps, pour que le scintillement ne soit pas synchrone. Purement décoratif,
   donc en pseudo-éléments et hors du flux. */
:root {
	--ej-etoile-pleine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0c2.1 17.4 12.6 27.9 30 30-17.4 2.1-27.9 12.6-30 30-2.1-17.4-12.6-27.9-30-30C19.4 27.9 29.9 17.4 32 0Z' fill='%238C6A3F'/%3E%3C/svg%3E");
	--ej-etoile-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2c2 17 12.5 27.5 30 30-17.5 2.5-28 13-30 30-2-17-12.5-27.5-30-30C19.5 29.5 30 19 32 2Z' fill='none' stroke='%238C6A3F' stroke-width='2'/%3E%3C/svg%3E");
}

.ej-ciel {
	position: relative;
	overflow: hidden;
}

.ej-ciel::before,
.ej-ciel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	animation: ej-scintille 3.6s ease-in-out infinite;
}

.ej-ciel::before {
	background-image: var(--ej-etoile-trait), var(--ej-etoile-pleine), var(--ej-etoile-trait), var(--ej-etoile-pleine);
	background-size: 18px 18px, 11px 11px, 24px 24px, 13px 13px;
	background-position: left 3% top 14%, left 6.5% top 42%, left 2% top 68%, right 5% top 10%;
}

.ej-ciel::after {
	background-image: var(--ej-etoile-pleine), var(--ej-etoile-trait), var(--ej-etoile-pleine), var(--ej-etoile-trait);
	background-size: 9px 9px, 22px 22px, 10px 10px, 16px 16px;
	background-position: left 7% top 86%, right 2.5% top 36%, right 7.5% top 62%, right 3% top 84%;
	animation-delay: 1.2s;
}

.ej-ciel > * {
	position: relative;
	z-index: 1;
}

@keyframes ej-scintille {
	0%, 100% { opacity: .3; }
	50%      { opacity: .85; }
}

/* Textes qui ne doivent jamais se couper. */
.ej-sans-retour,
.ej-sans-retour * {
	white-space: nowrap;
}

/* Titres et chapôs : coupure de ligne plus élégante. */
.ej-carte h1, .ej-carte h2, .ej-carte h3,
.ej-titre-section {
	text-wrap: pretty;
}

/* Carte à la une : le texte se pose sur le visuel. */
.ej-superpose {
	position: relative;
}

.ej-superpose__texte {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
}

/* Voile dégradé qui garde le texte lisible sur le visuel. */
.ej-voile::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;
}

/* Le lien du sélecteur de langue actif reste plein, l'autre s'efface. */
.ej-langue-inactive {
	opacity: .6;
}

/*
 * Icônes de réseaux sociaux : le mot-symbole de chaque réseau, en blanc.
 *
 * Les quatre fichiers de la médiathèque sont des pastilles de marque — un
 * disque bleu pour Facebook, rouge pour Pinterest, un rectangle rouge pour
 * YouTube — dont la lettre est réservée en blanc, c'est-à-dire peinte en
 * blanc et non détourée. Un filtre qui les aplatit en blanc, comme celui de
 * la pastille « Suivez-nous », y perdrait la lettre : il ne resterait que
 * trois taches pleines. Seul Instagram, dont le fichier est un tracé sur fond
 * transparent, y survivrait.
 *
 * On remplace donc l'image par le tracé du réseau, pris dans la fonte Font
 * Awesome que le site sert déjà, peint en crème et posé en adresse de
 * données : ni fichier à remplacer dans la médiathèque, ni réglage à reprendre
 * dans Elementor. La correspondance se fait sur le nom du fichier ; si l'un
 * était renommé, son icône reviendrait en couleurs — un défaut qui se voit,
 * plutôt que la tache blanche muette.
 *
 * Le carré et « contain » remettent les quatre au même gabarit : leurs
 * dessins ont des proportions différentes, et Elementor ne leur impose
 * que la largeur.
 */
.ej-reseaux .ej-reseau img {
	aspect-ratio: 1;
	height: auto;
	object-fit: contain;
	opacity: .85;
	transition: opacity 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Pleines au survol. */
.ej-reseaux .ej-reseau:hover img {
	opacity: 1;
}

.ej-reseaux .ej-reseau img[src*="instagram"] {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23FAF8F5' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.ej-reseaux .ej-reseau img[src*="facebook"] {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FAF8F5' d='M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z'/%3E%3C/svg%3E");
}

.ej-reseaux .ej-reseau img[src*="youtube"] {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23FAF8F5' d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}

.ej-reseaux .ej-reseau img[src*="pinterest"] {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%23FAF8F5' d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E");
}


/* Loupe de recherche : l'icône d'Elementor est une glyphe pleine, trop grasse
   pour la charte. On la remplace par un tracé d'un pixel, appliqué en masque
   pour qu'il reprenne la couleur réglée dans l'éditeur. */
.elementor-search-form__toggle .e-font-icon-svg,
.elementor-search-form__toggle i {
	display: none;
}

/* Sélecteur porté au niveau du widget : la règle d'Elementor impose sinon un
   inline-block, dont la ligne de texte décale le tracé vers le haut. */
.elementor-widget-search-form .elementor-search-form__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--e-search-form-toggle-size, 28px);
	height: var(--e-search-form-toggle-size, 28px);
	line-height: 0;
}

.elementor-search-form__toggle::before {
	content: "";
	display: block;
	/* La taille suit le réglage « Taille de l'icône » du widget, pour rester
	   ajustable depuis l'éditeur plutôt qu'ici. */
	flex: none; /* sans quoi le tracé s'écrase en largeur dans la bascule */
	width: var(--e-search-form-toggle-icon-size, 17px);
	height: var(--e-search-form-toggle-icon-size, 17px);
	background-color: currentColor;
	-webkit-mask: var(--ej-loupe) center / contain no-repeat;
	mask: var(--ej-loupe) center / contain no-repeat;
}

:root {
	--ej-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='6.75' cy='6.75' r='5.25'/%3E%3Cpath d='M10.6 10.6 15 15'/%3E%3C/svg%3E");

	/* Les deux tracés du tiroir, au caractère près de la maquette. Ils servent
	   de masque : la couleur vient du bouton, la forme d'ici. */
	--ej-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='3' y1='7' x2='19' y2='7'/%3E%3Cline x1='3' y1='15' x2='19' y2='15'/%3E%3C/svg%3E");
	--ej-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='17' y2='17'/%3E%3Cline x1='17' y1='5' x2='5' y2='17'/%3E%3C/svg%3E");
}

/* Recherche plein écran : le voile qu'ouvre la loupe de l'en-tête. Elementor le
   rend dans sa police par défaut, sans repère de sortie ni mention de ce qu'on
   est en train de faire ; il devient ici une page du site — même serif que les
   titres, filet d'or sous la saisie.

   Le voile est un conteneur flex en ligne, où le champ, le libellé masqué et la
   croix sont frères. On le passe en colonne centrée : le rappel des touches
   devient alors le dernier élément de la pile et se place de lui-même — aucun
   décalage à régler à la main. */
.elementor-search-form--full-screen {
	--ej-voile-mesure: min(920px, 84vw);
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Le rappel des touches, sous le filet. Décoratif : la consigne réelle reste
   portée par le formulaire, que le clavier valide de toute façon. */
.elementor-search-form--full-screen::after {
	content: "Entrée pour lancer la recherche · Échap pour fermer";
	order: 1;
	width: var(--ej-voile-mesure);
	margin-top: 22px;
	font-family: var(--ej-sans);
	font-size: 12px;
	line-height: 1.6;
	color: rgba(250, 248, 245, .38);
	pointer-events: none;
}

/* Le sélecteur reprend celui de la feuille du widget — qui fixe un corps de
   50px sur quatre classes et un attribut — augmenté d'une classe, faute de quoi
   le texte déborderait de la mesure du champ. La base fixe est nécessaire pour
   que la largeur tienne : en élément flex étirable, le champ reprendrait toute
   la ligne. */
.elementor-search-form--skin-full_screen .elementor-search-form input[type="search"].elementor-search-form__input.elementor-search-form__input {
	flex: 0 0 auto;
	width: var(--ej-voile-mesure);
	max-width: none;
	height: auto;
	padding: 0 0 22px;
	border: 0;
	border-bottom: 1px solid rgba(250, 248, 245, .28);
	font-family: var(--ej-serif-titre);
	font-size: clamp(26px, 4.4vw, 58px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ej-creme);
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.elementor-search-form--skin-full_screen .elementor-search-form input[type="search"].elementor-search-form__input:focus {
	border-bottom-color: var(--ej-or-clair);
	outline: none;
}

.elementor-search-form--skin-full_screen .elementor-search-form input[type="search"].elementor-search-form__input::placeholder {
	color: rgba(250, 248, 245, .34);
}

/* La croix est elle aussi un frère du champ : sortie du flux, elle regagne le
   coin de l'écran et la surface de clic d'un bouton. */
.elementor-search-form--full-screen .dialog-lightbox-close-button {
	position: absolute;
	top: 28px;
	right: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 26px;
	color: rgba(250, 248, 245, .6);
	opacity: 1;
	transition: color 300ms;
}

.elementor-search-form--full-screen .dialog-lightbox-close-button:hover,
.elementor-search-form--full-screen .dialog-lightbox-close-button:focus-visible {
	color: var(--ej-creme);
}

/* Sur mobile, la mention d'Échap n'a pas d'objet : il n'y a pas de clavier
   physique, et la ligne mangerait la place du clavier logiciel. */
@media (max-width: 767px) {

	.elementor-search-form--full-screen::after {
		content: "Entrée pour lancer la recherche";
		margin-top: 16px;
	}
}

/* Flèche diagonale des liens de section. Tracée en masque, elle reprend la
   couleur du lien réglée dans l'éditeur et s'aligne sur la ligne de texte. */
:root {
	--ej-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='13' x2='13' y2='1'/%3E%3Cpolyline points='4.5,1 13,1 13,9.5'/%3E%3C/svg%3E");
}

.ej-lien-fleche .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: var(--ej-fleche-ecart, 8px);
}

.ej-lien-fleche .elementor-button-content-wrapper::after {
	content: "";
	flex: none;
	width: var(--ej-fleche-taille, 13px);
	height: var(--ej-fleche-taille, 13px);
	background-color: currentColor;
	-webkit-mask: var(--ej-fleche) center / contain no-repeat;
	mask: var(--ej-fleche) center / contain no-repeat;
}

/* Dans les cartes, la flèche est un cran plus petite et un peu plus détachée
   du libellé, qui est lui-même en capitales et plus court. */
.ej-lien-fleche--carte {
	--ej-fleche-taille: 12px;
	--ej-fleche-ecart: 9px;
}

/* Les liens « Lire maintenant » se calent en bas de carte, sur une même ligne
   d'une carte à l'autre : les cellules de la grille sont déjà toutes à la
   hauteur de la plus haute, il reste à y étirer la carte et son bloc de texte,
   puis à repousser le lien avec la marge automatique.
   Les cartes à texte superposé sont hors sujet : leur lien suit le visuel. */
.ej-carte:not(.ej-superpose) {
	height: 100%;
}

.ej-carte:not(.ej-superpose) > .e-con:last-child {
	flex-grow: 1;
}

.ej-carte:not(.ej-superpose) .ej-lien-fleche--carte {
	margin-top: auto;
}

/* Face à face : deux cartes de 35 % encadrent la présentation de la rubrique,
   qui occupe la largeur restante et se centre sur la hauteur des cartes. */
.ej-trio-interviews {
	display: grid;
	grid-template-columns: 35% minmax(0, 1fr) 35%;
	gap: clamp(20px, 2.4vw, 40px);
	align-items: start;
}

.ej-trio-interviews > * {
	min-width: 0;
}

.ej-trio-centre {
	align-self: center;
}

/* Losange et silhouette : deux tracés de la maquette qu'aucune bibliothèque
   d'icônes ne propose. Le widget Icône sert de support — ses réglages de taille
   et de couleur restent actifs — et le dessin est posé en masque, comme la
   loupe de l'en-tête. La boîte suit la taille de police, donc le curseur
   « Taille » de l'éditeur. */
.ej-losange {
	--ej-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M13 4.5 L18 13 L13 21.5 L8 13 Z'/%3E%3Cline x1='13' y1='0.5' x2='13' y2='2.5'/%3E%3Cline x1='13' y1='23.5' x2='13' y2='25.5'/%3E%3Cline x1='0.5' y1='13' x2='2.5' y2='13'/%3E%3Cline x1='23.5' y1='13' x2='25.5' y2='13'/%3E%3C/svg%3E");
}

.ej-pastille--invite {
	--ej-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='13' cy='9.4' r='4.2'/%3E%3Cpath d='M4.6 22.4c1.1-4.4 4.4-6.8 8.4-6.8s7.3 2.4 8.4 6.8'/%3E%3C/svg%3E");
}

.ej-chevron {
	--ej-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,2 10,7 4,12'/%3E%3C/svg%3E");
}

.ej-losange .elementor-icon i::before,
.ej-pastille--invite .elementor-icon i::before,
.ej-chevron .elementor-icon i::before {
	content: "";
}

/* Elementor rend les icônes tantôt en <i>, tantôt en <svg> inline : on prend
   l'enfant quel qu'il soit, et on efface son tracé d'origine. */
.ej-losange .elementor-icon > *,
.ej-pastille--invite .elementor-icon > *,
.ej-chevron .elementor-icon > * {
	display: block;
	width: 1em;
	height: 1em;
	fill: transparent;
	background-color: currentColor;
	-webkit-mask: var(--ej-trace) center / contain no-repeat;
	mask: var(--ej-trace) center / contain no-repeat;
}

/* Les deux pastilles : la journaliste et son invité, légèrement chevauchées. */
.ej-pastille img,
.ej-pastille .elementor-icon {
	width: 58px;
	height: 58px;
	border-radius: 100%;
	box-shadow: 0 0 0 3px var(--ej-creme);
}

.ej-pastille img {
	object-fit: cover;
}

.ej-pastille .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ej-creme-ombre);
}

.ej-pastille + .ej-pastille {
	margin-left: -16px;
}

/* Sous 1024px les trois blocs s'empilent, présentation en tête. */
@media (max-width: 1024px) {
	.ej-trio-interviews {
		grid-template-columns: 1fr;
	}

	.ej-trio-centre {
		order: -1;
	}
}

/* Grille étirée : la classe se pose sur le widget Articles pour qu'il remplisse
   la hauteur qu'on lui donne. Le détail du comportement des cartes vit dans la
   feuille du plugin, à côté de leur dessin. */




/* Voile propre à l'encart de communication : plus sombre en haut, pour que la
   mention « Communication partenaire » reste lisible sur le visuel. */
.ej-voile-pub::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	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;
}

.ej-voile-pub > * {
	position: relative;
	z-index: 1;
}

/* Le logotype du partenaire est calé sur sa hauteur, pas sur sa largeur. */
.ej-logo-partenaire img {
	width: auto;
	height: 20px;
}


/* ------------------------------------------------------------------ */
/*  Colonne de droite de la une                                        */
/*                                                                     */
/*  La carte du milieu tient une hauteur fixe ; celles du haut et du   */
/*  bas se partagent la hauteur restante pour que la colonne s'aligne  */
/*  sur l'article principal.                                           */
/* ------------------------------------------------------------------ */

:root {
	--ej-carte-fixe: clamp(220px, 17vw, 300px);
}

/* Trois lignes : haut et bas élastiques et strictement égaux, milieu fixe. */
.ej-colonne-une {
	display: grid;
	grid-template-rows: minmax(0, 1fr) var(--ej-carte-fixe) minmax(0, 1fr);
	gap: 18px;
}

.ej-colonne-une > * {
	min-height: 0;
}

@media (max-width: 1024px) {
	/* Empilées, les cartes retrouvent une hauteur libre. */
	.ej-colonne-une {
		display: flex;
		flex-direction: column;
	}

	.ej-colonne-une > * {
		min-height: var(--ej-carte-fixe);
	}
}

/*
 * La colonne de la une, en une seule rangée qui glisse sous le pouce.
 *
 * Sur mobile, l'encart partenaire et les deux articles satellites tenaient
 * l'un sous l'autre — ou, pour les satellites, ne tenaient nulle part : ils
 * étaient masqués, et le lecteur passait d'un seul article à la publicité.
 * Les trois vivent maintenant sur une même ligne, qu'on fait défiler : la
 * publicité en tête, les deux articles derrière. Trois cartes pour la hauteur
 * d'une seule.
 *
 * L'ordre du balisage reste celui du bureau — satellite, satellite, encart —
 * et c'est la feuille qui met la publicité en tête sur mobile : le jour où la
 * rangée saute, le bureau n'a rien à défaire.
 *
 * Au-dessus de 767 px, l'enveloppe est transparente : la grille de la colonne
 * retrouve ses trois enfants et son dessin au pixel près.
 */
.ej-rail-une {
	display: contents;
}

@media (max-width: 767px) {
	.ej-rail-une.ej-rail-une {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		/* La largeur tient compte du débord : « 100 % » laisserait la rangée
		   à la largeur du texte, décalée vers la gauche. */
		width: calc(100% + 48px);
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Les 24 px sont le retrait de la page : repris en négatif, la rangée
		   défile d'un bord à l'autre de l'écran ; rendus en retrait interne,
		   la première carte reste alignée sur l'article de la une. */
		margin: 0 -24px;
		padding: 0 24px;
		/* Sans quoi l'aimantation calerait la première carte sur le bord du
		   cadre et mangerait le retrait qu'on vient de poser. */
		scroll-padding-left: 24px;
	}

	.ej-rail-une::-webkit-scrollbar {
		display: none;
	}

	/* Une carte et des poussières : la suivante dépasse, et c'est ce
	   dépassement qui dit qu'il y a autre chose à voir. */
	.ej-rail-une > .elementor-element {
		flex: 0 0 78%;
		min-height: 212px;
		scroll-snap-align: start;
	}

	/* La publicité ouvre la rangée. */
	.ej-rail-une > .ej-rail-une__pub {
		order: -1;
	}

	/*
	 * « ej-grille-etiree » étire les cartes sur la hauteur qu'on leur donne —
	 * ce qu'il faut dans la colonne du bureau, où elles s'alignent sur
	 * l'article principal. Ici, c'est la rangée qui donne la hauteur, et le
	 * visuel doit la remplir plutôt que suivre son propre rapport.
	 */
	.ej-rail-une .ej-grille-etiree,
	.ej-rail-une .ej-grille-etiree > .elementor-widget-container,
	.ej-rail-une .ej-grille-etiree .ejb-articles,
	.ej-rail-une .ej-grille-etiree .ejb-article,
	.ej-rail-une .ej-grille-etiree .ejb-article__lien {
		height: 100%;
	}

	.ej-rail-une .ejb-article__visuel {
		position: absolute;
		inset: 0;
	}

	.ej-rail-une .ejb-article__visuel img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* La maquette mobile réordonne la une : le manifeste du média passe sous les
   deux cartes, alors qu'il appartient à la colonne de gauche. Les deux
   colonnes s'effacent du rendu — leurs blocs deviennent frères dans la rangée
   — pour que l'ordre puisse s'y jouer. */
@media (max-width: 767px) {
	.ej-une-rangee > .e-con {
		display: contents;
	}

	.ej-colonne-une > * {
		min-height: 0;
	}

	.ej-une-rangee .ej-manifeste {
		order: 2;
		margin-top: 8px;
	}
}

/* Cartes à texte superposé : le rayon est porté par la carte entière, pour que
   le voile dégradé et le bloc de texte suivent les angles du visuel. */
.ej-superpose,
.ej-voile-pub {
	border-radius: 10px;
	overflow: hidden;
}

/*
 * Portrait de la créatrice, en médaillon. La section est la seule de la page
 * à parler d'une personne plutôt que d'un sujet ; le cercle le dit avant le
 * texte, là où le rectangle la rangeait parmi les cartes d'articles.
 *
 * Le fichier est un carré cadré sur le buste — le recadrage 222 × 300 qui
 * servait avant était trop court pour quatre cents pixels, et un cercle
 * l'aurait étiré davantage.
 *
 * L'anneau reprend l'or des ornements posés autour, à la même faible opacité :
 * il ferme le médaillon sans l'encadrer. Le second, plus large et plus pâle,
 * l'écarte du fond — une ombre portée aurait posé une lumière que rien
 * d'autre dans la section ne justifie.
 *
 * Aucune largeur par appareil : la section est masquée sur téléphone, où un
 * autre bloc prend le relais avec son propre portrait, pleine largeur.
 */
.ej-portrait img {
	width: 340px;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(140, 106, 63, .45),
		0 0 0 10px rgba(140, 106, 63, .08);
}

/* ------------------------------------------------------------------ */
/*  Ornements de la section « La créatrice »                           */
/*                                                                     */
/*  Six tracés décoratifs repris de la maquette : deux ondulations et  */
/*  quatre étoiles. Ils sont posés en couches d'arrière-plan sur un     */
/*  seul calque plutôt qu'en widgets, parce qu'ils ne portent aucun     */
/*  contenu et ne doivent pas être modifiables.                         */
/*                                                                      */
/*  La maquette en comptait sept : une arche courait sous le portrait,  */
/*  qu'elle prolongeait tant que celui-ci était masqué en arche. Le     */
/*  portrait étant redevenu rectangulaire, elle ne prolongeait plus     */
/*  rien et traversait la légende — elle est déposée.                   */
/* ------------------------------------------------------------------ */

.ej-decor-creatrice {
	position: relative;
}

.ej-decor-creatrice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' fill='none'%3E%3Cpath d='M0 42C100 6 200 56 300 28 400 2 500 52 600 18' stroke='%238C6A3F' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' fill='none'%3E%3Cg transform='translate(600,0) scale(-1,1)'%3E%3Cpath d='M0 42C100 6 200 56 300 28 400 2 500 52 600 18' stroke='%238C6A3F' stroke-opacity='.4' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0c2.1 17.4 12.6 27.9 30 30-17.4 2.1-27.9 12.6-30 30-2.1-17.4-12.6-27.9-30-30C19.4 27.9 29.9 17.4 32 0Z' fill='%238C6A3F' fill-opacity='.55'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 2c2 17 12.5 27.5 30 30-17.5 2.5-28 13-30 30-2-17-12.5-27.5-30-30C19.5 29.5 30 19 32 2Z' stroke='%238C6A3F' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0c2.1 17.4 12.6 27.9 30 30-17.4 2.1-27.9 12.6-30 30-2.1-17.4-12.6-27.9-30-30C19.4 27.9 29.9 17.4 32 0Z' fill='%238C6A3F' fill-opacity='.4'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 2c2 17 12.5 27.5 30 30-17.5 2.5-28 13-30 30-2-17-12.5-27.5-30-30C19.5 29.5 30 19 32 2Z' stroke='%238C6A3F' stroke-opacity='.4' stroke-width='2'/%3E%3C/svg%3E");

	background-repeat: no-repeat;

	background-size:
		clamp(240px, 32vw, 460px) auto,
		clamp(240px, 32vw, 460px) auto,
		22px 22px,
		30px 30px,
		14px 14px,
		18px 18px;

	background-position:
		left -60px top clamp(28px, 4vw, 64px),
		right -60px top clamp(52px, 6vw, 104px),
		left clamp(180px, 24vw, 360px) top clamp(64px, 7vw, 110px),
		right clamp(160px, 22vw, 340px) top clamp(96px, 9vw, 150px),
		left clamp(24px, 4vw, 72px) bottom clamp(48px, 6vw, 90px),
		right clamp(30px, 5vw, 90px) bottom clamp(70px, 8vw, 130px);
}

/*
 * Les deux rameaux de joaillerie, un par bord.
 *
 * Ils viennent de la médiathèque et non d'un SVG intégré comme les six tracés
 * au-dessus : ce sont des dessins que le client a fournis, pas des figures que
 * la feuille sait tracer. Une seconde couche les porte donc, sur « ::after »,
 * le « ::before » étant déjà occupé.
 *
 * « contain » et le format natif des fichiers : chaque rameau entre entier
 * dans la hauteur de la section, quelle que soit celle-ci. Rien n'est rogné.
 *
 * Le conteneur est borné à 1320px et centré ; « (100vw - 100%) / 2 » est ce
 * qui reste de chaque côté — le calque s'élargit d'autant pour que les dessins
 * se collent au bord de la fenêtre, comme le veut la maquette. Le même calcul
 * sert au débord d'un encart de partenaire et aux ornements du répertoire.
 */
.ej-decor-creatrice::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	/* Le calque va d'un bord de l'écran à l'autre. */
	left: calc((100vw - 100%) / -2);
	right: calc((100vw - 100%) / -2);
	z-index: 0;
	pointer-events: none;
	/* Bien plus effacé que sur le répertoire ou le lexique : là-bas le
	   rameau occupait une bande vide, ici il passe derrière le texte des
	   trois repères et celui des chiffres, qui doivent rester premiers. */
	opacity: .3;

	background-image:
		var(--ej-creatrice-rameau-gauche, none),
		var(--ej-creatrice-rameau-droit, none);

	background-repeat: no-repeat;

	/* Une seule dimension est donnée — la largeur — et la hauteur s'en déduit :
	   les proportions du dessin tiennent, il n'est ni étiré ni coupé. La borner
	   plutôt que de remplir la hauteur évite qu'un rameau large morde sur la
	   colonne de texte que la section réserve à ses bords. */
	background-size:
		clamp(200px, 19vw, 330px) auto,
		clamp(200px, 19vw, 330px) auto;

	background-position:
		left center,
		right center;
}

/* Sous cette largeur, le texte des trois repères et celui des chiffres
   occupent toute la largeur : un rameau passerait derrière eux. */
@media (max-width: 1199px) {
	.ej-decor-creatrice::after {
		display: none;
	}
}

/* Le contenu de la section passe au-dessus des ornements. */
.ej-decor-creatrice > * {
	position: relative;
	z-index: 1;
}

/*
 * Le tableau des chiffres, à droite du médaillon. Chaque rangée porte un filet
 * haut, réglé sur son conteneur : celui de la première ne sépare rien, il
 * flotte au-dessus du premier intitulé. Une rangée ouvre le tableau, elle n'a
 * rien avant elle.
 */
.ej-chiffres > .e-con:first-child {
	border-top: 0;
	padding-top: 0;
}

/*
 * La légende et le lien respirent du médaillon : l'écart de seize pixels
 * réglé sur la colonne convenait à un portrait droit, dont le bord bas était
 * une ligne. Le cercle s'éloigne du texte à mesure qu'on va vers ses côtés,
 * et l'écart se lit plus court qu'il n'est.
 */
.ej-portrait {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/*  Deux dessins de « Liste d'icônes »                                 */
/*                                                                     */
/*  Le widget natif porte le contenu et reste modifiable ligne à ligne ;*/
/*  seules les deux ou trois propriétés qu'il n'expose pas sont ici.    */
/* ------------------------------------------------------------------ */

/* Fil d'Ariane : le séparateur de la maquette est une barre oblique, là où le
   contrôle « Séparateur » du widget ne trace qu'un filet. Le signe est posé
   ici, sur le même pseudo-élément.

   Classe triplée : quand le séparateur est activé dans le widget, Elementor
   vise ce pseudo-élément avec sept classes, dont l'identifiant de l'élément.
   Une seule .ej-fil perdait la main sur la bordure, et le filet vertical
   s'ajoutait à la barre oblique — chaque maillon paraissait encadré.
   Le filet est aussi éteint dans les réglages des widgets ; la règle qui suit
   est la ceinture qui va avec, pour qu'un séparateur rallumé par mégarde dans
   l'éditeur ne ramène pas le trait. */
.ej-fil.ej-fil.ej-fil .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child)::after {
	content: "/";
	position: static;
	border: 0;
	/* Elementor écrit la bordure en propriétés logiques, que le raccourci
	   ci-dessus ne couvre pas dans toutes les versions. */
	border-inline-start: 0;
	border-block-start: 0;
	height: auto;
	padding: 0 8px;
	color: var(--ej-bordure);
	transform: none;
}

/* Pastilles des champs d'exploration : cadre arrondi autour de chaque élément.
   Le widget règle l'écart horizontal ; le retour à la ligne, lui, n'a pas de
   contrôle. */
.ej-pastilles .elementor-icon-list-items.elementor-inline-items {
	row-gap: 10px;
}

.ej-pastilles .elementor-icon-list-item {
	border: 1px solid var(--ej-bordure);
	border-radius: 999px;
	padding: 10px 16px;
}

/* Sans cela, l'élément suit la ligne de base du texte et le cadre se décale. */
.ej-pastilles .elementor-icon-list-item > .elementor-icon-list-text {
	padding: 0;
}

/* Le dernier maillon du fil d'Ariane est la page courante : elle se lit en
   encre quand les précédents restent gris. */
.ej-fil .elementor-icon-list-item:last-child .elementor-icon-list-text {
	color: var(--ej-encre);
}

/* Mesures complémentaires, reprises des max-width de la maquette. */
.ej-mesure-22 .elementor-heading-title {
	display: block;
	max-width: 22ch;
}

.ej-mesure-24 .elementor-heading-title {
	display: block;
	max-width: 24ch;
}

.ej-mesure-50 p { max-width: 50ch; }
.ej-mesure-52 p { max-width: 52ch; }
.ej-mesure-58 p { max-width: 58ch; }
.ej-mesure-60 p { max-width: 60ch; }
.ej-mesure-62 p { max-width: 62ch; }
.ej-mesure-64 p { max-width: 64ch; }
.ej-mesure-70 p { max-width: 70ch; }

/* Mesure d'un texte centré : sans la marge automatique, le bloc resterait
   calé à gauche même si ses lignes, elles, sont centrées. */
.ej-mesure-36-centree p {
	max-width: 36ch;
	margin-inline: auto;
}

/* Portrait de la page « À propos » : cadre 3/4, image recadrée au centre.
   La hauteur repasse en automatique — les visuels de carte, eux, remplissent
   une cellule déjà dimensionnée. */
.ej-visuel--trois-quarts img {
	aspect-ratio: 3 / 4;
}

/* Deux garde-fous pour les visuels posés en widget Image — les cartes de
   boucle, elles, remplissent une cellule déjà dimensionnée et gardent leur
   hauteur de 100 %.

   La largeur ferme est indispensable : la colonne qui porte le portrait est
   élastique, sa largeur n'est donc pas connue au moment où le navigateur
   mesure son contenu. L'image y était alors comptée à ses proportions de
   fichier, la colonne se refermait sur cette hauteur et l'image débordait
   sur le texte voisin. */
.elementor-widget-image.ej-visuel {
	width: 100%;
}

.elementor-widget-image.ej-visuel img {
	height: auto;
}

/* Repousse un élément à la fin de sa rangée. */
.ej-cale-a-droite {
	margin-left: auto;
}

/* Liens dont l'adresse vient d'un champ de profil : une signature qui n'a pas
   renseigné son réseau ne doit pas laisser un libellé qui ne mène nulle part.
   Sans adresse, Elementor rend le bouton sans attribut href. */
.ej-si-lien .elementor-button:not([href]) {
	display: none;
}

/* Colonne de recherche du lexique : elle s'étire avec la rangée mais ne
   dépasse pas la largeur de la maquette, sans quoi le champ tirerait sur
   toute la moitié droite dès que le titre laisse de la place. */
.ej-colonne-recherche {
	max-width: 420px;
}

/* ------------------------------------------------------------------ */
/*  Écarts de la maquette mobile de la page auteur                     */
/*                                                                     */
/*  Deux propriétés qu'Elementor ne décline pas par point de rupture : */
/*  le rapport d'une image et la couleur de fond d'un conteneur.       */
/*  Tout le reste — retraits, tailles, ordre, visibilité — se règle     */
/*  depuis l'éditeur.                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/* Le portrait passe pleine largeur et se recadre en 4/5, comme la
	   maquette mobile ; il reste en 3/4 au-dessus. */
	.ej-visuel--trois-quarts img {
		aspect-ratio: 4 / 5;
	}

	/* La liste d'articles se détache sur le fond ombré, encadrée de filets.
	   Classe répétée : le fond réglé dans l'éditeur est posé par Elementor
	   avec trois classes, dont l'identifiant de l'élément. */
	.ej-fond-ombre-mobile.ej-fond-ombre-mobile.ej-fond-ombre-mobile.ej-fond-ombre-mobile {
		background-color: var(--ej-creme-ombre);
		border-top: 1px solid var(--ej-bordure);
		border-bottom: 1px solid var(--ej-bordure);
	}

	/* Quand l'intitulé d'une liste en regard est masqué, le surtitre tient lieu
	   de titre de ligne et en prend le dessin. Du groupe « Typographie »
	   d'Elementor, seules les tailles et les espacements se déclinent par point
	   de rupture : ni la police, ni la graisse, ni la casse. D'où ces trois
	   propriétés ici, et la classe répétée pour passer devant ses quatre. */
	.ej-role-titre.ej-role-titre.ej-role-titre.ej-role-titre .ejb-regard__surtitre {
		font-family: var(--ej-serif-texte);
		font-weight: 400;
		text-transform: none;
	}
}

/* ------------------------------------------------------------------ */
/*  Corps d'un article                                                 */
/*                                                                     */
/*  Le texte est écrit dans l'éditeur de WordPress, pas dans Elementor :*/
/*  ses paragraphes, ses intertitres et ses citations n'ont donc pas de */
/*  réglages dans le panneau. Le dessin de la maquette est posé ici,    */
/*  une fois, et vaut pour tous les articles.                          */
/* ------------------------------------------------------------------ */

.ej-corps {
	font-family: var(--ej-sans);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ej-encre);
}

.ej-corps p {
	margin: 0 0 28px;
}

/* Lettrine du premier paragraphe. Elle n'est pas saisie : la règle vise le
   premier paragraphe de l'article, quel que soit son texte. */
.ej-corps > p:first-of-type::first-letter {
	float: left;
	padding: 6px 14px 0 0;
	font-family: var(--ej-serif-titre);
	font-size: 76px;
	font-weight: 400;
	line-height: .82;
	color: var(--ej-encre);
}

/* Intertitres, précédés du filet or de la maquette. */
.ej-corps h2 {
	margin: 0 0 22px;
	font-family: var(--ej-serif-texte);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: pretty;
}

.ej-corps h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: 52px 0 20px;
	background-color: var(--ej-or);
}

/* Le tout premier intertitre n'a pas de paragraphe à séparer au-dessus. */
.ej-corps > h2:first-child::before {
	margin-top: 0;
}

.ej-corps h3 {
	margin: 40px 0 16px;
	font-family: var(--ej-serif-texte);
	font-size: clamp(21px, 2.2vw, 25px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

/* Citation détachée : deux filets, sans guillemets ni retrait. */
.ej-corps blockquote {
	margin: 56px 0;
	padding: 36px 0;
	border-top: 1px solid var(--ej-bordure);
	border-bottom: 1px solid var(--ej-bordure);
	font-family: var(--ej-serif-titre);
	font-size: clamp(22px, 2.6vw, 28px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--ej-encre);
}

.ej-corps blockquote p:last-child {
	margin-bottom: 0;
}

/*
 * Liens dans le texte : soulignés discrètement, or au survol.
 *
 * Dans le texte, précisément : les blocs du corps rendent aussi des liens qui
 * ne sont pas des mots — une carte entière, une vignette — et le soulignement
 * d'un ancêtre est tracé par l'ancêtre, qu'aucun descendant ne peut annuler
 * pour lui-même. L'encart de partenaire coupait bien le trait chez lui, mais
 * cette règle-ci compte deux classes contre sa une et l'emportait : la
 * description se retrouvait soulignée, et le survol n'en changeait que la
 * couleur — de l'or clair à l'or foncé, invisible sur le fond sombre de la
 * carte, d'où l'impression que le trait disparaissait.
 *
 * L'exception vise donc les liens qui portent un bloc plutôt qu'un mot : la
 * carte de l'encart, son bouton, et le déclencheur du bloc vidéo. Elle les
 * nomme un à un : une règle sur « :not(:has(*)) » ou sur l'affichage se
 * retournerait au premier lien de texte contenant une emphase.
 *
 * Un lien de bloc ajouté plus tard s'ajoute ici — c'est le prix d'une liste,
 * et il se paie une fois, contre un soulignement qui se voit tout de suite.
 */
.ej-corps a:not(.ejb-encart):not(.ejb-encart__bouton):not(.ejb-film__lecture) {
	color: var(--ej-encre);
	text-decoration: underline;
	text-decoration-color: var(--ej-or-clair);
	text-underline-offset: 4px;
}

.ej-corps a:not(.ejb-encart):not(.ejb-encart__bouton):not(.ejb-film__lecture):hover {
	color: var(--ej-or);
	text-decoration-color: var(--ej-or);
}

.ej-corps ul,
.ej-corps ol {
	margin: 0 0 28px;
	padding-left: 1.2em;
}

.ej-corps li {
	margin-bottom: 10px;
}

.ej-corps li::marker {
	color: var(--ej-or);
}

/* Images insérées dans le texte : elles débordent de la colonne étroite pour
   retrouver la largeur des visuels de la maquette. */
.ej-corps img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.ej-corps figure {
	margin: 40px 0;
}

.ej-corps figcaption {
	margin-top: 12px;
	font-family: var(--ej-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ej-gris);
}

.ej-corps > *:last-child {
	margin-bottom: 0;
}

/* Un cran plus petit sur téléphone : à dix-neuf pixels sur une colonne
   étroite, la ligne ne tient plus assez de mots. */
@media (max-width: 767px) {
	.ej-corps {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------ */
/*  Détails de la page article                                         */
/* ------------------------------------------------------------------ */

/* Portrait de l'auteur en tête d'article : pastille ronde et recadrée. */
.ej-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

/* Ligne « Publié le … · … min de lecture » : les éléments du widget
   Informations de l'article se suivent sans passer à la ligne. */
.ej-dates .elementor-inline-items .elementor-icon-list-item {
	margin: 0;
}

/* Étiquettes des signatures liées : le widget rend ses termes en liste
   séparée par des virgules ; la maquette les veut en pastilles cerclées. */
.ej-signatures-liees .elementor-post-info__terms-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ej-signatures-liees .elementor-post-info__terms-list-item {
	padding: 10px 16px;
	border: 1px solid var(--ej-bordure);
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-signatures-liees .elementor-post-info__terms-list-item:hover {
	border-color: var(--ej-or);
}

/* La virgule que le widget glisse entre deux termes n'a plus lieu d'être
   entre deux pastilles. */
.ej-signatures-liees .elementor-post-info__terms-list .elementor-post-info__item-prefix {
	display: none;
}

/* Le pavé des signatures liées s'efface quand l'article n'a ni signature ni
   étiquette : les bandes ne rendent alors rien du tout, et seuls les titres
   resteraient, à surplomber le vide. */
.ej-bloc-signatures:not(:has(.ejb-etiquettes)) {
	display: none;
}

/* Et chaque titre suit sa bande : un article rattaché à une maison mais sans
   étiquette ne garde que « Signatures liées ». Le titre disparaît quand la
   bande qui le suit n'a rien rendu. */
.ej-titre-etiquettes:not(:has(+ * .ejb-etiquettes)) {
	display: none;
}

/* Les deux bandes respirent : le titre colle à la sienne, l'écart se prend
   au-dessus du titre suivant. */
.ej-titre-etiquettes + * {
	margin-bottom: 4px;
}

.ej-titre-etiquettes:not(:first-child) {
	margin-top: 22px;
}

/* Barre de partage : le logo de chaque réseau, dans ses couleurs, suivi du
   libellé en toutes lettres. La feuille du widget habille le libellé par une
   classe propre (`__title`, en gras) et charge après celle-ci : les sélecteurs
   sont donc allongés pour reprendre la main. */
.ej-partage .elementor-share-btn.elementor-share-btn {
	height: auto;
	border-radius: 0;
	background-color: transparent;
}

/* Le logo garde sa couleur de marque — c'est ce qui le rend reconnaissable
   d'un coup d'œil — mais perd la pastille pleine que le widget lui dessine :
   quatre carrés de couleur pèseraient trop dans un pied d'article aussi
   sobre. Le sélecteur est doublé pour passer devant celui du widget, qui
   compte quatre classes. */
.ej-partage.ej-partage .elementor-share-btn.elementor-share-btn .elementor-share-btn__icon {
	/* Le widget réserve au logo la largeur de sa pastille — près de cinq fois
	   sa taille — et le libellé se retrouvait rejeté loin à sa droite. Le logo
	   ne prend plus que sa place. */
	flex: none;
	width: 1em;
	padding: 0;
	background-color: transparent;
	font-size: 16px;
}

/* Le widget peint le glyphe en blanc sur sa pastille ; il reprend ici la
   couleur de la marque, que cette variable lui transmet. */
.ej-partage .elementor-share-btn_linkedin  { --e-share-buttons-icon-color: #0A66C2; }
.ej-partage .elementor-share-btn_pinterest { --e-share-buttons-icon-color: #BD081C; }
.ej-partage .elementor-share-btn_facebook  { --e-share-buttons-icon-color: #1877F2; }

/* Le courriel n'est pas une marque : il reste à l'encre du texte, comme la
   copie du lien à côté de lui. */
.ej-partage .elementor-share-btn_email     { --e-share-buttons-icon-color: var(--ej-encre); }

.ej-partage .elementor-share-btn .elementor-share-btn__icon svg {
	width: 1em;
	height: 1em;
}

/* Écart entre le logo et son libellé, et entre deux réseaux. Le widget donne
   à ses boutons une largeur commune, qui éloignait le libellé de son logo :
   chacun reprend ici la largeur de son contenu.

   Les hauteurs de ligne sont ramenées à celle du texte : chaque boîte faisait
   sinon la hauteur d'une ligne de paragraphe — 25,5 px pour un libellé de
   13 px — et le contenu s'y calait en haut. Les trois blocs de la rangée
   tombaient alors chacun à une hauteur différente. */
.ej-partage .elementor-share-btn.elementor-share-btn {
	gap: 8px;
	width: auto;
	min-width: 0;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
}

.ej-partage .elementor-share-btn .elementor-share-btn__text {
	display: flex;
	align-items: center;
	line-height: 1;
}

.ej-partage .elementor-share-btn .elementor-share-btn__title {
	line-height: 1;
}

/* Même écart entre deux réseaux qu'entre les trois blocs de la rangée : la
   copie du lien est une façon de partager comme une autre, elle suit le même
   rythme. */
/* Le widget aligne ses réseaux en blocs en ligne, espacés par une marge basse
   sur chaque case et rattrapés par une marge négative sous la grille. Deux
   conséquences : les cases reposaient sur une ligne de base, laissant sous
   elles le creux d'une descendante — d'où des logos flottant six pixels
   au-dessus de « Partager » et de « Copier le lien » — et l'écart entre deux
   réseaux ne valait pas celui qui les sépare du reste de la rangée. Une
   rangée souple règle les deux : plus de ligne de base, un seul écart. */
.ej-partage .elementor-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-bottom: 0;
}

.ej-partage .elementor-grid .elementor-grid-item {
	margin: 0;
}

/* « Copier le lien » : un maillon de chaîne, dessiné en masque pour suivre la
   couleur du texte — et posé sur le lien, non sur son libellé, que le script
   remplace deux secondes par « Lien copié ». */
:root {
	--ej-maillon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6.6 9.4a3 3 0 0 0 4.3 0l2.4-2.4a3 3 0 0 0-4.3-4.3l-1 1'/%3E%3Cpath d='M9.4 6.6a3 3 0 0 0-4.3 0L2.7 9a3 3 0 0 0 4.3 4.3l1-1'/%3E%3C/svg%3E");
}

/* Le lien est en ligne dans un bloc dont la hauteur de ligne dépasse la
   sienne : il se calait sur la ligne de base et flottait au-dessus du bas de
   sa boîte. La boîte épouse maintenant sa hauteur. */
.ej-copier-lien {
	line-height: 1;
}

.ej-copier-lien .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.ej-copier-lien .elementor-button::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--ej-maillon) center / contain no-repeat;
	mask: var(--ej-maillon) center / contain no-repeat;
}

/* Les liens de l'autrice se lisaient comme du texte courant : un filet doré
   sous chacun les rend cliquables à l'œil, à la manière des autres liens du
   site. */
.ej-liens-autrice .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--ej-or-clair);
	padding-bottom: 3px;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1), color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-liens-autrice .elementor-icon-list-item > a:hover {
	color: var(--ej-or);
	border-bottom-color: var(--ej-or);
}

/* Celui qui quitte le site l'annonce par la flèche des liens sortants. */
.ej-liens-autrice .elementor-icon-list-item > a[target="_blank"]::after,
.ej-liens-autrice .elementor-icon-list-item > a[href^="http"]:not([href*="espritjoaillerie"]):not([href*="192.168"])::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask: var(--ej-fleche) center / contain no-repeat;
	mask: var(--ej-fleche) center / contain no-repeat;
}

.ej-partage .elementor-share-btn .elementor-share-btn__text {
	flex-grow: 0;
	padding: 0;
}

.ej-partage .elementor-share-btn .elementor-share-btn__title {
	font-family: var(--ej-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ej-encre);
}

.ej-partage .elementor-share-btn:hover .elementor-share-btn__title {
	color: var(--ej-or);
}

/* Portrait de l'autrice en pied d'article : cadre 3/4 comme la maquette. */
.ej-portrait-autrice img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
}

/* Titre de section suivi d'un filet qui occupe la place restante. */
.ej-titre-filet {
	flex: 1 1 40px;
	height: 1px;
	background-color: var(--ej-bordure);
}

/* Visuel principal d'un article : le rapport large de la maquette. La hauteur
   repasse en automatique — les visuels de carte, eux, remplissent une cellule
   déjà dimensionnée. */
.ej-visuel--seize-neuf img {
	aspect-ratio: 16 / 9;
	height: auto;
}

.ej-visuel--seize-neuf {
	width: 100%;
}

/* L'encart partenaire tient la même hauteur que le bloc vidéo qui le suit :
   il en reprend donc le rapport plutôt que de suivre son visuel. Les deux
   occupent la même largeur de page, ils se terminent ainsi à la même hauteur
   quelle que soit la taille de l'écran. */
.ej-carte-partenaire {
	aspect-ratio: 16 / 9;
}

/* Empilé, l'encart retrouve une hauteur libre : le rapport large écraserait
   le texte et le visuel l'un sur l'autre. */
@media (max-width: 767px) {
	.ej-carte-partenaire {
		aspect-ratio: auto;
	}
}

/* Le visuel remplit sa moitié de l'encart, quelle que soit la hauteur prise
   par le texte en regard. Il est sorti du flux, sans quoi c'est lui qui
   imposerait sa hauteur à toute la carte. */
.ej-cadre-partenaire {
	position: relative;
	min-height: 240px;
	overflow: hidden;
}

.ej-cadre-partenaire .ej-pave-partenaire {
	position: absolute;
	inset: 0;
}

.ej-cadre-partenaire .ej-pave-partenaire .elementor-widget-container,
.ej-cadre-partenaire .ej-pave-partenaire figure,
.ej-cadre-partenaire .ej-pave-partenaire img {
	height: 100%;
}

.ej-cadre-partenaire .ej-pave-partenaire img {
	width: 100%;
	object-fit: cover;
}

/* Empilées, les deux moitiés reprennent une hauteur normale. */
@media (max-width: 767px) {
	.ej-cadre-partenaire {
		min-height: 260px;
	}
}

/* Fil d'Ariane : le dernier maillon est la maison, que tous les articles n'ont
   pas. Quand la balise dynamique ne rend rien, l'élément et la barre oblique
   qui le précède s'effacent — sans quoi le fil se termine par un séparateur
   orphelin. */
.ej-fil .elementor-icon-list-items .elementor-icon-list-item:has(> .elementor-icon-list-text:empty),
.ej-fil .elementor-icon-list-items .elementor-icon-list-item:has(> a > .elementor-icon-list-text:empty) {
	display: none;
}

/* La barre oblique est posée par une règle à cinq classes ; il en faut autant
   ici pour l'effacer devant un maillon vide. */
.ej-fil .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:has(+ .elementor-icon-list-item > .elementor-icon-list-text:empty)::after,
.ej-fil .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:has(+ .elementor-icon-list-item > a > .elementor-icon-list-text:empty)::after {
	content: none;
}

/* ------------------------------------------------------------------ */
/*  Mesure des boîtes centrées                                         */
/*                                                                     */
/*  La maquette écrit `max-width: 880px; padding: 0 clamp(24px,5vw,    */
/*  64px)` : le retrait latéral est compris dans la largeur maximale.  */
/*  Elementor, lui, pose le retrait sur l'enveloppe et la largeur      */
/*  maximale sur le contenu — une colonne de 880 finit donc 128px plus */
/*  large que prévu. Cette classe rétablit la mesure de la maquette :   */
/*  le retrait passe à l'intérieur, où il est décompté.                */
/*                                                                     */
/*  Classe doublée : Elementor remet ce retrait à zéro avec deux       */
/*  classes, il en faut donc trois pour reprendre la main.             */
/* ------------------------------------------------------------------ */

.ej-boite.ej-boite {
	padding-inline: 0;
}

.ej-boite.ej-boite > .e-con-inner {
	padding-inline: clamp(20px, 5vw, 64px);
}

/* La bande des « Repères visuels » porte son propre retrait, à l'intérieur de
   sa zone de défilement : la boîte ne doit pas en ajouter un second. */
.ej-boite.ej-boite--pleine > .e-con-inner {
	padding-inline: 0;
}

/* ------------------------------------------------------------------ */
/*  Page article — maquette mobile                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/* Le visuel principal passe d'un bord à l'autre : la boîte lâche son
	   retrait, que seule la légende conserve. */
	.ej-boite.ej-une-pleine > .e-con-inner {
		padding-inline: 0;
	}

	.ej-une-pleine .ej-legende-une {
		padding-inline: 20px;
	}

	/* Cadrage plus haut, sans arrondi, comme la maquette mobile. */
	.ej-visuel--seize-neuf img {
		aspect-ratio: 4 / 3;
	}
}

/* Bloc de signature en tête d'article : sur mobile le portrait reste à gauche
   du nom. La colonne de texte doit pouvoir se rétrécir — sans `min-width: 0`
   sa largeur minimale est celle de sa plus longue ligne, et la rangée se
   casse en deux. */
@media (max-width: 767px) {
	.ej-bloc-autrice {
		flex-wrap: nowrap;
	}

	.ej-bloc-autrice > .e-con:last-child {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/*  Page contact                                                       */
/* ------------------------------------------------------------------ */

/*
 * Le formulaire change de dessin avec la largeur : sur grand écran les champs
 * n'ont qu'un filet sous eux, sur mobile ils prennent un cadre arrondi à
 * hauteur de doigt. Le groupe « bordure » du widget ne se déclinant pas par
 * point de rupture, ses contrôles sont laissés vides et tout le cadre vit ici —
 * renseignés, ils écriraient une règle à six classes qu'aucune classe du thème
 * ne dépasserait.
 */

/* La case de consentement porte la même classe sans être une saisie : elle
   n'a ni filet ni retrait à souligner, et garde son propre dessin plus bas. */
.ej-formulaire-contact input.elementor-field:not([type="checkbox"]),
.ej-formulaire-contact textarea.elementor-field {
	box-shadow: none;
	border: 0;
	border-bottom: 1px solid var(--ej-bordure);
	border-radius: 0;
	padding: 0 0 12px;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-formulaire-contact textarea.elementor-field {
	line-height: 1.7;
	resize: vertical;
}

.ej-formulaire-contact input.elementor-field:not([type="checkbox"]):focus,
.ej-formulaire-contact textarea.elementor-field:focus {
	border-color: var(--ej-or);
}

.ej-formulaire-contact .elementor-field::placeholder {
	color: var(--ej-gris);
	opacity: 1;
}

/* Les objets de la demande : chaque choix est une gélule, la case elle-même
   reste dans le document pour le clavier et les lecteurs d'écran. */
.ej-formulaire-contact .elementor-field-type-radio .elementor-field-subgroup {
	gap: 10px;
}

.ej-formulaire-contact .elementor-field-option {
	position: relative;
}

/* Elementor pose un retrait de dix pixels après chaque option d'une liste en
   ligne : il s'ajoute à l'écart réglé plus haut, et laisse un vide après la
   dernière gélule quand la rangée défile. L'écart vient du `gap` seul. */
.ej-formulaire-contact .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
	padding-inline-end: 0;
}

.ej-formulaire-contact .elementor-field-option input[type="radio"] {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Quatre fois la classe : Elementor donne aux intitulés d'options la couleur
   des étiquettes et le corps des champs, avec quatre classes au sélecteur. */
.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact .elementor-field-type-radio .elementor-field-subgroup label {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ej-bordure);
	border-radius: 999px;
	padding: 11px 17px;
	font-family: var(--ej-sans);
	font-size: 14px;
	line-height: 1;
	color: var(--ej-encre);
	cursor: pointer;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1),
		background-color 300ms cubic-bezier(.2, .6, .2, 1),
		color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-formulaire-contact .elementor-field-option input[type="radio"]:hover + label {
	border-color: var(--ej-or);
}

.ej-formulaire-contact .elementor-field-option input[type="radio"]:focus-visible + label {
	outline: 1px solid var(--ej-or);
	outline-offset: 3px;
}

.ej-formulaire-contact.ej-formulaire-contact .elementor-field-option input[type="radio"]:checked + label {
	background-color: var(--ej-encre);
	border-color: var(--ej-encre);
	color: var(--ej-creme);
}
/*
 * Consentement, puis bouton. La maquette posait une mention à droite du
 * bouton ; elle disait ce que le consentement dit désormais, en l'engageant.
 * La case la remplace et prend la ligne entière, au-dessus : c'est un
 * engagement qu'on lit avant d'envoyer, non une note qui accompagne l'envoi.
 *
 * Elementor rend toujours le bouton en dernier, la case le précédant dans le
 * document : l'ordre visuel les remet d'aplomb sans toucher au balisage, comme
 * pour la lettre du pied.
 */
.ej-formulaire-contact .elementor-field-type-acceptance {
	order: 1;
	width: 100%;
	flex: 0 0 100%;
	/* La gouttière de rangée du formulaire ne sépare que des rangées qu'il a
	   lui-même formées ; celle-ci naît de l'ordre visuel, et pose son écart. */
	margin-bottom: 10px;
}

.ej-formulaire-contact .elementor-field-type-submit {
	order: 2;
}

/* Le champ piège du widget rend un groupe visible dont seule la saisie est
   masquée — et sans la classe de groupe des autres champs, que le widget lui
   retire. On le vise donc par la saisie qu'il contient : sans cela il ouvre une
   rangée vide entre la case et le bouton. Il reste dans le document, c'est tout
   son intérêt : un robot le remplit, un visiteur ne le voit pas. */
.ej-formulaire-contact .elementor-form-fields-wrapper > div:has(> input[style*="display:none"]) {
	display: none;
}

/* La case porte son propre texte ; l'étiquette du champ, qui coiffe les
   autres saisies, dirait « Consentement » juste au-dessus. Elle reste dans le
   document pour les lecteurs d'écran, hors de l'affichage seulement. */
.ej-formulaire-contact .elementor-field-type-acceptance > .elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ej-formulaire-contact .elementor-field-type-acceptance .elementor-field-subgroup,
.ej-formulaire-contact .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/*
 * La case reprend le dessin de celle de la lettre, retourné pour le fond
 * clair : un trait au repos, encre pleine une fois cochée, la coche en crème.
 * Elle s'aligne sur la première ligne du texte, non sur le bloc entier.
 *
 * Quatre classes : le widget donne un fond transparent à toutes ses saisies
 * par sa feuille générée, avec un sélecteur qui compte le gabarit, l'élément
 * et le groupe. Une règle plus courte n'y survivrait pas.
 */
.ej-formulaire-contact .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field {
	appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	/* Un ton plus marqué que le filet des champs : ceux-ci soulignent une
	   saisie déjà visible, la case n'est que son propre trait. */
	border: 1px solid var(--ej-gris);
	border-radius: 2px;
	background: none;
	cursor: pointer;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1),
	            background-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ej-formulaire-contact .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field:hover {
	border-color: var(--ej-or);
}

.ej-formulaire-contact .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field:focus-visible {
	outline: 1px solid var(--ej-or);
	outline-offset: 3px;
}

.ej-formulaire-contact .elementor-field-type-acceptance input[type="checkbox"].elementor-field.elementor-acceptance-field:checked {
	border-color: var(--ej-encre);
	background-color: var(--ej-encre);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%23FAF8F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px 8px;
}

/* Quatre fois la classe : Elementor donne aux intitulés d'options la couleur
   des étiquettes — un gris en capitales de dix pixels — avec quatre classes au
   sélecteur. Le consentement se lit comme une phrase, pas comme une étiquette
   de champ. */
.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact .elementor-field-type-acceptance label {
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--ej-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
	color: var(--ej-gris);
	cursor: pointer;
}

.ej-formulaire-contact .elementor-field-type-acceptance label a {
	color: var(--ej-encre);
	border-bottom: 1px solid var(--ej-or);
}

/* Le bouton tient sa largeur de contenu : la largeur de colonne réglée sur le
   widget ne sert plus que de repli, la case occupant seule sa rangée. */
@media (min-width: 768px) {
	.ej-formulaire-contact .elementor-field-type-submit {
		width: auto;
		flex: 0 0 auto;
	}
}

/*
 * Le bouton d'envoi prend le dégradé marine des surfaces de la lettre et du
 * pied : c'est l'action principale de la page, et elle répond au bouton de la
 * lettre plutôt qu'aux gélules d'objet, qui restent en encre.
 *
 * Le dégradé est une image de fond : il se pose par-dessus le #0F1F35 écrit
 * par le widget sans avoir à lui disputer la priorité, et cette couleur reste
 * ce qu'on voit si l'image ne s'applique pas.
 *
 * Deux fois la classe : le widget habille son bouton avec un sélecteur qui
 * compte le gabarit et l'élément.
 */
.ej-formulaire-contact.ej-formulaire-contact .elementor-button {
	background-image: var(--ej-degrade-marine);
	transition: background-color 300ms cubic-bezier(.2, .6, .2, 1),
		color 300ms cubic-bezier(.2, .6, .2, 1);
}

/* Au survol, l’or, comme le bouton de la lettre en en-tête. Le dégradé est
   retiré plutôt que remplacé : une image de fond se pose au-dessus de la
   couleur, et la laisser en place rendrait le bouton insensible — c’est le
   même geste que pour le bouton de l’en-tête. */
.ej-formulaire-contact.ej-formulaire-contact .elementor-button:hover,
.ej-formulaire-contact.ej-formulaire-contact .elementor-button:focus {
	background-image: none;
	background-color: var(--ej-or);
	color: var(--ej-creme);
}

@media (max-width: 767px) {

	/* Champs à cadre plein, assez hauts pour le doigt. La case de consentement
	   porte la même classe sans être une saisie : le cadre à hauteur de doigt en
	   ferait un carré de cinquante pixels. Elle garde son propre dessin. */
	.ej-formulaire-contact input.elementor-field:not([type="checkbox"]),
	.ej-formulaire-contact textarea.elementor-field {
		min-height: 52px;
		border: 1px solid var(--ej-bordure);
		border-radius: 8px;
		padding: 0 16px;
	}

	.ej-formulaire-contact textarea.elementor-field {
		min-height: 130px;
		padding: 14px 16px;
		line-height: 1.4;
	}

	/* Les objets défilent d'un bord à l'autre plutôt que de passer à la ligne.
	   La rangée s'aligne à gauche sur le reste de la page et file jusqu'au bord
	   de l'écran à droite : la gélule coupée dit que la ligne continue. Un
	   retrait à droite laisserait au contraire croire qu'elle s'arrête là.
	   La réserve verticale évite qu'`overflow-x` rogne l'anneau de focus. */
	/* Trois fois la classe : sous des étiquettes posées au-dessus, Elementor
	   cale la rangée sur `flex-basis: 100%` et `max-width: 100%` avec quatre
	   classes. Les marges négatives la décaleraient sans l'élargir, et elle
	   s'arrêterait au retrait de la section au lieu du bord de l'écran. */
	.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact .elementor-field-type-radio .elementor-field-subgroup {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;
		flex: none;
		width: calc(100% + 40px);
		max-width: none;
		margin: 0 -20px;
		padding: 4px 0 4px 20px;
		scrollbar-width: none;
	}

	.ej-formulaire-contact .elementor-field-type-radio .elementor-field-subgroup::-webkit-scrollbar {
		display: none;
	}

	.ej-formulaire-contact .elementor-field-type-radio .elementor-field-option {
		flex: 0 0 auto;
	}

	.ej-formulaire-contact .elementor-field-type-radio .elementor-field-option label {
		padding: 12px 16px;
		white-space: nowrap;
	}

	/* Deux fois la classe : Elementor cale la hauteur des boutons de formulaire
	   sur leur taille, avec trois classes au sélecteur. */
	.ej-formulaire-contact.ej-formulaire-contact .elementor-button.elementor-size-sm {
		width: 100%;
		min-height: 54px;
		justify-content: center;
	}

	/* Le consentement respire du bouton comme les autres champs entre eux, la
	   gouttière de rangée ne s'appliquant pas à une rangée qu'on a réordonnée.
	   Le texte gagne un point, à la lecture au pouce. */
	.ej-formulaire-contact .elementor-field-type-acceptance {
		margin-bottom: 6px;
	}

	.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact.ej-formulaire-contact .elementor-field-type-acceptance label {
		font-size: 14px;
		line-height: 1.7;
	}
}

/* La bande des questions fréquentes se détache du crème sur grand écran ; la
   maquette mobile la pose au contraire à plat sur le fond de la page. Le fond
   d'un conteneur ne se réglant pas par point de rupture, il se dit ici —
   quatre fois la classe, Elementor l'écrivant avec trois. */
@media (max-width: 767px) {
	.ej-bande-questions.ej-bande-questions.ej-bande-questions.ej-bande-questions {
		background-color: var(--ej-creme);
	}
}

/* Coordonnées de la composition mobile : chaque ligne de la liste devient une
   carte. Le retrait vit sur la ligne ; le lien le reprend en négatif pour que
   toute la carte reste cliquable. */
.ej-contact-cartes .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ej-contact-cartes .elementor-icon-list-item {
	border: 1px solid var(--ej-bordure);
	border-radius: 8px;
	padding: 0 16px;
	min-height: 52px;
}

/* Le lien s'étire à la hauteur de la carte plutôt que de l'imposer : sinon il
   ajoute son propre minimum à l'épaisseur du cadre, et la carte cliquable
   dépasse de deux pixels celle qui ne l'est pas. */
.ej-contact-cartes .elementor-icon-list-item > a {
	flex: 1 1 auto;
	align-self: stretch;
	margin: 0 -16px;
	padding: 0 16px;
}

/* Deux fois la classe : le widget donne sa couleur au texte avec quatre
   classes. Une carte qui mène quelque part s'écrit en encre, une carte
   d'information — le lieu — garde le gris réglé sur le widget. */
.ej-contact-cartes.ej-contact-cartes .elementor-icon-list-item > a .elementor-icon-list-text {
	color: var(--ej-encre);
}


/* ------------------------------------------------------------------ */
/*  L'œil de l'experte                                                 */
/*                                                                     */
/*  Le titre de la rubrique s'ouvre sur un œil qui cligne. Le dessin    */
/*  est un tracé en ligne, comme la loupe et la flèche : il prend la    */
/*  couleur du titre et suit sa taille, plutôt que d'imposer un fichier */
/*  d'image à recadrer à chaque changement de corps.                    */
/*                                                                     */
/*  Le clignement n'échange pas deux images : la paupière descend. Elle */
/*  est l'arc du haut, que l'animation retourne — une échelle verticale */
/*  négative — jusqu'à le faire passer sous sa corde, en emportant les  */
/*  cils. Entre les deux, l'arc s'aplatit puis se creuse : le mouvement */
/*  est continu, et le navigateur l'interpole à la fréquence de         */
/*  l'écran.                                                            */
/*                                                                      */
/*  Le tracé lui-même vit dans le widget HTML de la page d'accueil. Les */
/*  cinq cils y sont des rayons pris tous les trente degrés, et chacun  */
/*  démarre sur la paupière — au milieu de son épaisseur, pour que le   */
/*  raccord ne laisse pas voir de jour.                                 */
/* ------------------------------------------------------------------ */

.ej-oeil {
	--ej-oeil-cycle: 3s;
	display: inline-flex;
	align-items: center;
	flex: none;
	/* L'écart de la rangée sépare le titre de son filet ; entre l'œil et le
	   « L » qu'il précède, il est deux fois trop large. */
	margin-right: -14px;
}

/*
 * La hauteur suit le corps du titre de section — 38 px, puis 31 et 27 aux
 * ruptures — plutôt que le « em » du widget, qui hérite du texte courant et
 * réduirait l'œil à douze pixels.
 */
.ej-oeil svg {
	display: block;
	width: auto;
	height: 36px;
	overflow: visible;
}

@media (max-width: 1024px) {
	.ej-oeil svg {
		height: 30px;
	}

	.ej-oeil {
		margin-right: -12px;
	}
}

@media (max-width: 767px) {
	.ej-oeil svg {
		height: 27px;
	}
}

/* La paupière pivote autour de la corde de l'œil, à mi-hauteur du dessin. */
.ej-oeil__paupiere {
	transform-box: view-box;
	transform-origin: 400px 400px;
	animation: ej-oeil-paupiere var(--ej-oeil-cycle) infinite;
}

/* Les cils rentrent dans la paupière plutôt que de se retourner avec elle :
   c'est ce que fait le fichier d'origine, dont les tracés se réduisent à un
   point le temps du battement. Ils se rétractent vers le centre de l'œil et
   s'effacent dès l'amorce de la descente : passé la corde, la paupière les
   emporterait sous elle, en éventail à l'envers. Ils ne reviennent qu'une fois
   la paupière remontée au-dessus. */
.ej-oeil__cils {
	transform-box: view-box;
	transform-origin: 400px 400px;
	animation: ej-oeil-cils var(--ej-oeil-cycle) infinite;
}

@keyframes ej-oeil-cils {
	0%, 82.5% {
		transform: scale(1);
		opacity: 1;
		animation-timing-function: cubic-bezier(.4, 0, .5, 1);
	}
	85%, 94.5% {
		transform: scale(.6);
		opacity: 0;
		animation-timing-function: cubic-bezier(.3, 0, .3, 1);
	}
	97.5%, 100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* L'iris s'efface derrière la paupière qui passe, un peu avant qu'elle ne
   l'atteigne : il n'a pas à réapparaître par transparence au travers. */
.ej-oeil__iris {
	transform-box: view-box;
	transform-origin: 400px 407px;
	animation: ej-oeil-iris var(--ej-oeil-cycle) infinite;
}

/*
 * Les bornes sont en pourcentage du cycle : à 3 s, un point vaut trente
 * millisecondes. La descente court de 82,5 à 89,5 % — deux cent dix
 * millisecondes —, l'œil reste clos trente millisecondes, puis se rouvre en
 * deux cent cinquante-cinq. Le reste du cycle, il est simplement ouvert.
 *
 * Ces durées ne sont pas décoratives : à soixante images par seconde, deux
 * cent dix millisecondes valent treize images là où cent en donnaient six. Le
 * mouvement n'était pas saccadé faute de tenir la cadence — elle est tenue,
 * mesurée, sans image perdue —, mais faute d'images à remplir. C'est la durée
 * qui achète la fluidité, pas la fréquence.
 *
 * La remontée dépasse d'ailleurs légèrement l'ouverture (1,07) avant de s'y
 * reposer : une paupière ne s'arrête pas net sur sa butée.
 *
 * Le facteur -1,555 n'est pas choisi à l'œil : c'est le rapport des deux
 * flèches, 213,4 unités sous la corde pour la paupière basse contre 137,2
 * au-dessus pour la haute. Retournée d'autant, la paupière haute vient se
 * poser sur la basse à moins d'un quart d'épaisseur de trait près, et l'œil
 * fermé ne montre qu'une seule ligne. Les coins, eux, ne bougent pas : le
 * centre de la transformation est la corde elle-même.
 *
 * Chaque borne porte sa courbe : la paupière tombe en accélérant puis se pose,
 * et remonte en s'apaisant. Sans elles, l'interpolation serait uniforme d'un
 * bout à l'autre et le mouvement, mécanique.
 */
@keyframes ej-oeil-paupiere {
	0%, 82.5% {
		transform: scaleY(1);
		animation-timing-function: cubic-bezier(.5, .04, .35, 1);
	}
	89.5%, 90.5% {
		transform: scaleY(-1.555);
		animation-timing-function: cubic-bezier(.3, 0, .3, 1);
	}
	96.5% {
		transform: scaleY(1.07);
		animation-timing-function: cubic-bezier(.35, 0, .3, 1);
	}
	99%, 100% {
		transform: scaleY(1);
	}
}

@keyframes ej-oeil-iris {
	0%, 82.5% {
		opacity: 1;
		transform: scaleY(1);
		animation-timing-function: cubic-bezier(.4, 0, .6, 1);
	}
	85%, 94% {
		opacity: 0;
		transform: scaleY(.12);
		animation-timing-function: cubic-bezier(.3, 0, .3, 1);
	}
	97.5%, 100% {
		opacity: 1;
		transform: scaleY(1);
	}
}

/* Un battement d'œil reste une animation décorative : on la coupe. */
@media (prefers-reduced-motion: reduce) {
	.ej-oeil__paupiere,
	.ej-oeil__cils,
	.ej-oeil__iris {
		animation: none;
	}
}


/* ------------------------------------------------------------------ */
/*  L'œil en tête de la rubrique                                       */
/*                                                                     */
/*  Sur l'archive, l'œil ne précède plus un titre de section mais le    */
/*  titre de la page : soixante-dix-huit pixels au lieu de trente-huit. */
/*  Et il n'est plus posé à côté du titre dans une rangée, mais dedans, */
/*  au fil du texte — il suit ainsi la ligne quand elle se replie.      */
/*                                                                     */
/*  D'où les deux réglages que la rangée de l'accueil tenait seule :    */
/*  l'assiette verticale, qu'aucun alignement de boîte ne donne plus,   */
/*  et l'écart, qui redevient positif faute d'un écart de rangée à      */
/*  rattraper.                                                          */
/* ------------------------------------------------------------------ */

.ej-oeil--rubrique {
	vertical-align: middle;
	margin-right: 20px;
	/* « middle » centre la vignette sur la hauteur d'x. Les capitales
	   montent plus haut : sans ce rattrapage, l'œil se poserait bas. */
	transform: translateY(-0.1em);
}

.ej-oeil--rubrique svg {
	height: 74px;
}

@media (max-width: 1024px) {
	.ej-oeil--rubrique {
		margin-right: 14px;
	}

	.ej-oeil--rubrique svg {
		height: 53px;
	}
}

@media (max-width: 767px) {
	.ej-oeil--rubrique {
		margin-right: 10px;
	}

	.ej-oeil--rubrique svg {
		height: 38px;
	}
}


/* ------------------------------------------------------------------ */
/*  Le bloc signé de l'en-tête                                         */
/*                                                                     */
/*  Le nom porte l'identité, le picto l'accompagne : il doit rester à  */
/*  sa hauteur, jamais perché au-dessus. Elementor replie ses          */
/*  conteneurs dès la tablette — d'où la propriété personnalisée, que  */
/*  sa propre règle vient lire : la fixer ici gagne quel que soit le   */
/*  sélecteur qui l'emporte.                                           */
/* ------------------------------------------------------------------ */

.ej-logo,
.ej-logo-texte {
	--flex-wrap: nowrap;
	--flex-wrap-mobile: nowrap;
	flex-wrap: nowrap;
}

/*
 * Elementor ne pose « --width: auto » sur ses conteneurs qu'au-dessus de
 * 768 px ; en dessous ils reprennent leur largeur pleine. La colonne du nom
 * réclamait donc toute la ligne et, le repli étant désormais interdit, elle
 * écrasait le picto à zéro — il disparaissait de l'écran sans rien signaler.
 * On lui rend sa largeur naturelle, et le picto refuse de se laisser réduire.
 */
.ej-logo-texte {
	--width: auto;
	width: auto;
	flex: 0 1 auto;
}

.ej-logo > .elementor-widget-theme-site-logo {
	flex: 0 0 auto;
}

/*
 * La baseline n'est plus une pastille. Sur téléphone la première ligne est
 * déjà pleine — burger, nom, lettre, loupe — et les onze pixels de retrait de
 * chaque côté suffisaient à la faire déborder ; le fond et le retrait partent
 * donc des deux côtés, mobile comme grand écran. Le dégradé qu'elle portait
 * est passé au bouton de la lettre, où il a la place de se déployer.
 *
 * Reste à lui rendre une couleur : Elementor l'écrit en blanc, ce qui allait
 * sur le marine de la pastille et disparaît sur le crème de l'en-tête. L'or
 * est la teinte des petites capitales du site — surtitres d'encarts, mentions
 * de rubrique. Classes répétées : la règle d'Elementor en aligne trois, il en
 * faut une de plus pour la reprendre.
 */
.ej-baseline.ej-baseline.ej-baseline .elementor-heading-title {
	color: var(--ej-or);
}

@media (max-width: 767px) {
	/*
	 * Tout tient sur une seule rangée : burger, identité, commandes. Le bloc
	 * signé prenait sa propre ligne, faute de place — la ligne du haut portait
	 * alors le libellé « Newsletter » en toutes lettres, quatre-vingt-dix
	 * pixels à lui seul. Il redevient une enveloppe, et ce qui reste se règle
	 * sur la largeur de l'écran au lieu d'être fixé au pixel.
	 *
	 * L'ordre et le placement reviennent donc à ceux de la tablette, plus
	 * haut : rien à réécrire ici, il suffit de ne plus les défaire. Reste à
	 * autoriser l'identité à se comprimer — la rangée impose « flex: 0 0 auto »
	 * à tous ses enfants, ce qui l'aurait fait déborder plutôt que se réduire.
	 */
	.ej-barre-principale__cadre > .e-con-inner > .ej-logo {
		flex: 0 1 auto;
		min-width: 0;
	}


	/*
	 * Le picto se resserre lui aussi : quarante pixels sur trois cent
	 * soixante, c'est le neuvième de la ligne pour un dessin qu'on ne lit
	 * pas. Sélecteur à quatre classes, celui d'Elementor en aligne trois.
	 */
	.ej-logo .elementor-widget-theme-site-logo.elementor-widget-theme-site-logo img {
		width: 32px;
	}

	/* Les écarts se resserrent d'autant : quatorze pixels entre le picto et le
	   nom, seize entre les deux pastilles, c'est le réglage des grands écrans.
	   Sur trois cent soixante il ne reste rien pour le nom. Trois classes,
	   Elementor en pose trois sur ses conteneurs. */
	.ej-logo.ej-logo.ej-logo {
		gap: 8px;
	}

	.ej-actions.ej-actions.ej-actions {
		gap: 10px;
	}

	/* Le burger se rapproche du picto : chaque pixel rendu ici est un pixel
	   de plus pour le nom. */
	.ej-burger {
		margin-right: 8px;
	}

	/*
	 * Le nom et sa baseline se règlent sur la largeur de l'écran.
	 *
	 * C'est la baseline qui commande, non le nom : ses vingt-huit signes en
	 * font le plus large des deux à taille égale, et c'est elle qui décidait
	 * du repli. Les bornes tiennent les extrêmes — jamais plus grand que le
	 * réglage d'Elementor, jamais trop petit pour se lire — et entre les deux
	 * la mesure suit la fenêtre.
	 *
	 * « nowrap » parce qu'un repli ici rendrait la deuxième ligne qu'on vient
	 * d'enlever, en pire : elle serait dans le bloc du nom.
	 */
	.ej-nom.ej-nom.ej-nom .elementor-heading-title {
		font-size: clamp(12px, 3.5vw, 18px);
		white-space: nowrap;
	}

	.ej-baseline.ej-baseline.ej-baseline .elementor-heading-title {
		font-size: clamp(6px, 1.9vw, 9px);
		white-space: nowrap;
	}

	/*
	 * Le bouton de la lettre reprend l'enveloppe ronde des largeurs
	 * intermédiaires : le libellé coûtait la place qui manquait à la rangée.
	 * Les règles sont écrites deux fois plutôt que factorisées — entre 1025 et
	 * 1440 px c'est le manque de place en largeur qui l'impose, ici c'est le
	 * dessin du téléphone ; les deux peuvent diverger sans se gêner.
	 */
	.ej-actions .ej-bouton-lettre.ej-bouton-lettre .elementor-button-text {
		display: none;
	}

	.ej-actions .ej-bouton-lettre.ej-bouton-lettre .elementor-button-icon {
		display: block;
		margin: 0;
		font-size: 16px;
		line-height: 0;
	}

	.ej-actions .ej-bouton-lettre .elementor-button-icon svg,
	.ej-actions .ej-bouton-lettre .elementor-button-icon i {
		width: 16px;
		height: 16px;
		font-size: 16px;
	}

	.ej-actions .ej-bouton-lettre.ej-bouton-lettre .elementor-button.elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border-radius: 999px;
		background-image: var(--ej-degrade-marine);
		color: var(--ej-creme);
	}

	/* Le filet qui séparait le libellé de la loupe n'a plus rien à séparer :
	   deux pastilles voisines se distinguent d'elles-mêmes. */
	.ej-actions .ej-bouton-lettre::after {
		display: none;
	}
}

/*
 * Le renvoi vers Instagram, en bas de la colonne « communauté » de l'accueil.
 *
 * La pastille est marine ; le logo du réseau y arrive avec son dégradé
 * d'origine, qui papillote sur ce fond alors qu'à seize pixels on ne lit de
 * toute façon que la silhouette de l'appareil photo. Le filtre l'aplatit en
 * blanc — un PNG ne se recolore pas autrement, et le même fichier sert en
 * couleurs dans le pied de page, où le fond le supporte.
 */
.ej-suivre .elementor-widget-image img {
	filter: brightness(0) invert(1);
}

/*
 * À droite de la pastille, une flèche et un mot tracés à la main : la seule
 * intrusion manuscrite de la charte. Elle est là pour rompre la rigueur de la
 * page et faire du bouton un geste plutôt qu'un lien de plus — c'est bien son
 * manque de présence qu'on corrige, pas sa lisibilité.
 *
 * La flèche est un tracé posé en masque, comme la flèche diagonale des liens
 * de section : elle prend donc la couleur du mot qu'elle accompagne, sans
 * second fichier à tenir à jour.
 */
:root {
	--ej-fleche-manuscrite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 34' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M76,22C60,31,28,30,10,14'/%3E%3Cpath d='M10,14L13.5,23.4'/%3E%3Cpath d='M10,14L19.7,16.4'/%3E%3C/svg%3E");
}

.ej-note-manuscrite {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Une note en marge n'attrape pas le clic destiné au bouton voisin. */
	pointer-events: none;
}

/* Deux fois la classe : la typographie globale du kit Elementor vise le titre
   avec deux classes elle aussi, et l'emporterait sur une règle plus courte. */
.ej-note-manuscrite.ej-note-manuscrite .elementor-heading-title {
	color: var(--ej-or);
	font-family: 'Caveat', cursive;
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	/* Un mot écrit à la main ne se pose pas d'aplomb sur la ligne. */
	transform: rotate(-5deg);
}

.ej-note-manuscrite::before {
	content: "";
	flex: none;
	width: 76px;
	height: 32px;
	background-color: var(--ej-or);
	-webkit-mask: var(--ej-fleche-manuscrite) center / contain no-repeat;
	mask: var(--ej-fleche-manuscrite) center / contain no-repeat;
	/* La flèche part sous le mot et remonte vers la pastille. */
	transform: translateY(5px);
}

/*
 * Le bandeau de partenaires en tête d'accueil.
 *
 * Il est posé dans la rangée « À la une », mais il en prend toute la largeur et
 * se renvoie donc seul à la ligne suivante : la rangée passe déjà à la ligne
 * quand il le faut, il suffit de lui demander la mesure entière. Casé dans la
 * place restante à droite du lien, il n'avait que le tiers d'une colonne — deux
 * noms et demi lisibles, et le fondu de bord tranchait les autres en plein
 * milieu. Sur sa propre ligne il en montre quatre, entiers.
 *
 * Un filet le sépare du titre, et rien de plus : la charte ne connaît que des
 * filets — sous les liens, après les titres de section — et le cadre à angles
 * arrondis qu'il portait d'abord y arrivait comme un champ de formulaire.
 *
 * Trois classes : Elementor pose la largeur des widgets de conteneur avec deux,
 * et l'emporterait sur une règle plus courte.
 */
.e-con > .ej-bandeau-une.ej-bandeau-une {
	flex: 0 0 100%;
	min-width: 0;
	width: auto;
	align-self: auto;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--ej-bordure);
}