/*
 * Blocs propres à la page article : « En bref », « Repères visuels », « Vidéo ».
 *
 * Les couleurs, les typographies et les écarts sont pilotés depuis Elementor
 * (chaque widget expose ses contrôles) : ne restent ici que la structure et
 * les valeurs par défaut de la maquette.
 */

/* ------------------------------------------------------------------ */
/*  En bref                                                            */
/* ------------------------------------------------------------------ */

.ejb-bref {
	padding-top: clamp(22px, 2.4vw, 30px);
	border-top: 1px solid #12100E;
}

.ejb-bref__surtitre {
	margin: 0 0 16px;
	font: 500 11px/1 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8C6A3F;
}

.ejb-bref__resume {
	margin: 0;
	font-family: var(--ej-sans, 'Inter', sans-serif);
	font-size: clamp(17px, 1.7vw, 19px);
	font-weight: 400;
	line-height: 1.7;
	color: #12100E;
}

.ejb-bref__reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 52px;
	margin: clamp(22px, 2.4vw, 28px) 0 0;
	padding-top: clamp(18px, 2vw, 22px);
	border-top: 1px solid #E4DFD8;
}

/* Sans résumé, le filet des repères doublerait celui du haut du bloc. */
.ejb-bref__surtitre + .ejb-bref__reperes {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ejb-bref__repere {
	flex: 0 1 auto;
	min-width: 0;
}

.ejb-bref__intitule {
	margin: 0 0 8px;
	font: 500 10px/1 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6B6560;
}

.ejb-bref__valeur {
	margin: 0;
	font-family: var(--ej-serif-texte, 'Newsreader', serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: #12100E;
}

/* ------------------------------------------------------------------ */
/*  Repères visuels                                                    */
/* ------------------------------------------------------------------ */

.ejb-reperes {
	--ejb-repere-largeur: 720px;
	--ejb-repere-ecart: 22px;
	--ejb-repere-retrait: 64px;
	--ejb-repere-rapport: 4 / 3;
	--ejb-repere-rayon: 8px;

	/* La bande a son propre retrait : sur téléphone elle part du bord de
	   l'écran alors que son surtitre reste aligné sur le texte. */
	--ejb-repere-retrait-bande: var(--ejb-repere-retrait);
}

.ejb-reperes__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 18px;
	padding: 0 var(--ejb-repere-retrait);
}

.ejb-reperes__surtitre {
	font: 500 11px/1 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8C6A3F;
}

.ejb-reperes__mention {
	font: 400 12px/1 var(--ej-sans, 'Inter', sans-serif);
	color: #6B6560;
}

/* La bande va d'un bord à l'autre ; le retrait est posé à l'intérieur, pour
   que le défilement continue de découvrir les images jusqu'au bord. */
.ejb-reperes__bande {
	display: flex;
	gap: var(--ejb-repere-ecart);
	padding: 0 var(--ejb-repere-retrait-bande) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--ejb-repere-retrait-bande);
	scrollbar-width: none;
}

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

.ejb-reperes__figure {
	flex: 0 0 min(var(--ejb-repere-largeur), 82vw);
	margin: 0;
	scroll-snap-align: center;
}

.ejb-reperes__visuel {
	overflow: hidden;
	border-radius: var(--ejb-repere-rayon);
	background-color: #F1EDE7;
	aspect-ratio: var(--ejb-repere-rapport);
}

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

.ejb-reperes__figure:hover .ejb-reperes__visuel img {
	transform: scale(1.02);
}

.ejb-reperes__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 12px;
}

.ejb-reperes__legende {
	font: 400 13px/1.5 var(--ej-sans, 'Inter', sans-serif);
	color: #6B6560;
}

.ejb-reperes__credit {
	font: 400 11px/1.5 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .1em;
	color: #6B6560;
}

/* ------------------------------------------------------------------ */
/*  Vidéo                                                              */
/* ------------------------------------------------------------------ */

.ejb-film {
	--ejb-video-rapport: 16 / 9;
	--ejb-video-rayon: 10px;
	--ejb-video-bouton: 74px;

	margin: 0;
}

.ejb-film__cadre {
	position: relative;
	overflow: hidden;
	border-radius: var(--ejb-video-rayon);
	background-color: #12100E;
	aspect-ratio: var(--ejb-video-rapport);
}

/* Sélecteur descendant : la remise à zéro du thème donne une hauteur
   automatique aux images, et la couverture reprenait ses proportions d'origine
   au lieu de remplir le cadre. */
.ejb-film__cadre .ejb-film__poster {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ejb-film__voile {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .06) 34%, rgba(0, 0, 0, .62) 100%);
}

/* Le bouton couvre l'image entière — le lecteur clique où il veut — mais son
   dessin, lui, reste le cercle du centre. */
.ejb-film__lecture {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.ejb-film__triangle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ejb-video-bouton);
	height: var(--ejb-video-bouton);
	border: 1px solid rgba(250, 248, 245, .85);
	border-radius: 50%;
	background-color: rgba(18, 16, 14, .22);
	backdrop-filter: blur(3px);
	transition: background-color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-film__triangle::before {
	content: "";
	margin-left: 4px;
	border-style: solid;
	border-width: calc(var(--ejb-video-bouton) / 6.4) 0 calc(var(--ejb-video-bouton) / 6.4) calc(var(--ejb-video-bouton) / 5.2);
	border-color: transparent transparent transparent #FAF8F5;
}

.ejb-film__lecture:hover .ejb-film__triangle {
	background-color: rgba(18, 16, 14, .45);
}

.ejb-film__bandeau {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: clamp(20px, 2.2vw, 30px);
	pointer-events: none;
}

.ejb-film__etiquette {
	font: 500 10px/1 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #C9A26B;
}

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

.ejb-film__titre {
	font: 400 13px/1.4 var(--ej-sans, 'Inter', sans-serif);
	color: rgba(250, 248, 245, .9);
}

.ejb-film__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 12px;
}

.ejb-film__legende {
	font: 400 13px/1.5 var(--ej-sans, 'Inter', sans-serif);
	color: #6B6560;
}

.ejb-film__credit {
	font: 400 11px/1.5 var(--ej-sans, 'Inter', sans-serif);
	letter-spacing: .1em;
	color: #6B6560;
}

/* Une fois la lecture demandée, le lecteur du service remplace la couverture. */
.ejb-film__cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------ */
/*  En bref — maquette mobile                                          */
/*                                                                     */
/*  Le filet du haut et la rangée de repères en colonnes ne tiennent    */
/*  pas sur un téléphone : la maquette mobile en fait un pavé ombré,    */
/*  et les repères deviennent une liste à puces dorées, empilées.       */
/*  Le contenu, lui, ne change pas — c'est la même fiche que sur        */
/*  grand écran, présentée autrement.                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.ejb-bref {
		padding: 20px;
		border-top: 0;
		border-radius: 10px;
		background-color: #F1EDE7;
	}

	.ejb-bref__surtitre {
		margin-bottom: 14px;
		letter-spacing: .18em;
	}

	.ejb-bref__resume {
		font-size: 15px;
		line-height: 1.65;
	}

	/* Les repères passent en liste : plus de filet ni de rangée. */
	.ejb-bref__reperes {
		display: flex;
		flex-direction: column;
		row-gap: 12px;
		margin-top: 16px;
		padding-top: 0;
		border-top: 0;
	}

	/* Chaque repère devient une puce « Intitulé : valeur ». */
	.ejb-bref__repere {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 6px;
	}

	.ejb-bref__repere::before {
		content: "·";
		flex: 0 0 auto;
		margin-right: 4px;
		font: 400 14px/1.6 var(--ej-sans, 'Inter', sans-serif);
		color: #8C6A3F;
	}

	/* L'intitulé quitte les capitales espacées : sur une seule ligne avec sa
	   valeur, il se lit comme une phrase. */
	.ejb-bref__intitule {
		margin: 0;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.65;
		letter-spacing: 0;
		text-transform: none;
	}

	.ejb-bref__intitule::after {
		content: " :";
	}

	.ejb-bref__valeur {
		font-family: var(--ej-sans, 'Inter', sans-serif);
		font-size: 15px;
		line-height: 1.65;
	}
}

/* ------------------------------------------------------------------ */
/*  Repères visuels — maquette mobile                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/* Les images partent du bord de l'écran : la bande n'a plus de retrait,
	   seul son surtitre garde celui de la colonne de texte. */
	.ejb-reperes {
		--ejb-repere-retrait-bande: 0px;
	}

	/* Sans retrait, c'est la largeur des figures qui laisse voir la suivante. */
	.ejb-reperes__figure {
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------ */
/*  Vidéo — maquette mobile                                            */
/*                                                                     */
/*  Le dessin change : cadrage plus haut, voile monté du bas, pastille */
/*  de lecture pleine et sombre au lieu du cercle au trait, et le      */
/*  bandeau se réduit au seul titre — l'étiquette et son filet ne       */
/*  survivent pas à la largeur d'un téléphone.                         */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.ejb-film__voile {
		background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .05) 55%);
	}

	.ejb-film__triangle {
		border: 0;
		background-color: rgba(250, 248, 245, .94);
		backdrop-filter: none;
	}

	.ejb-film__triangle::before {
		border-left-color: #12100E;
	}

	.ejb-film__lecture:hover .ejb-film__triangle {
		background-color: rgba(250, 248, 245, .94);
	}

	.ejb-film__etiquette,
	.ejb-film__filet {
		display: none;
	}

	.ejb-film__bandeau {
		padding: 12px 14px;
	}

	.ejb-film__titre {
		font-size: 12px;
		line-height: 1.4;
		color: rgba(250, 248, 245, .92);
	}

	.ejb-film__caption {
		gap: 4px 12px;
		margin-top: 10px;
	}

	.ejb-film__legende {
		flex: 1 1 200px;
		font-size: 12px;
		line-height: 1.6;
	}

	.ejb-film__credit {
		font-size: 10px;
		line-height: 1.6;
	}
}

/* Encart partenaire des petits écrans : le lien « Découvrir » reste calé à
   droite de l'accroche. Sans `min-width: 0`, la colonne de texte refuse de se
   rétrécir sous sa plus longue ligne et pousse le lien hors de la carte. */
.ej-pub-article__texte {
	min-width: 0;
}

/* Les deux boutons d'action des petits écrans : deux gélules de même largeur,
   dont la hauteur ne se règle pas depuis le widget. */
.ej-boutons-mobile .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
}


/* ------------------------------------------------------------------ */
/*  Images en carrousel                                                */
/*                                                                     */
/*  Même bande que les repères, à ceci près que chaque image y prend   */
/*  toute la largeur. L'accrochage et le défilement latéral sont déjà  */
/*  ceux de la bande : le carrousel n'ajoute que la largeur des        */
/*  images et deux flèches pour la souris, qui n'a ni doigt ni touche  */
/*  de direction pour faire défiler.                                   */
/* ------------------------------------------------------------------ */

/*
 * Les images partent du bord de la colonne, là où commence le texte, et
 * laissent dépasser la suivante.
 *
 * Deux corrections pour un seul défaut. Une image en retrait de 64 pixels et
 * large de 90 % de la colonne se lisait comme une illustration isolée : rien
 * ne disait qu'il y en avait d'autres. Calée sur le texte et un peu plus
 * étroite, elle laisse voir le bord de la suivante — et la suite se comprend
 * avant même qu'on ait touché quoi que ce soit, ce qu'aucune flèche n'obtient
 * aussi vite.
 *
 * L'accrochage passe de « centré » à « par la gauche », sans quoi la première
 * image se recentrerait au premier défilement et le cadrage se perdrait.
 */
.ejb-reperes {
	--ejb-repere-retrait-bande: 0px;
}

.ejb-reperes__entete {
	padding-inline: 0;
}

.ejb-reperes__figure {
	scroll-snap-align: start;
}

/* La bande montre plusieurs vignettes ; le carrousel une image à la fois. La
   largeur est tout ce qui les sépare — le défilement, lui, est le même. */
.ejb-reperes__figure {
	flex: 0 0 min(68%, 520px);
}

.ejb-reperes--carrousel {
	position: relative;
}

.ejb-reperes--carrousel .ejb-reperes__figure {
	flex: 0 0 min(86%, 680px);
}

/* Les flèches se calent sur le bord de la colonne, comme la bande. */
.ejb-reperes--carrousel .ejb-reperes__commandes {
	padding-inline: 0;
}

/* Les flèches sont posées par le script, et n'apparaissent donc jamais
   inertes. Elles se rangent en regard du surtitre, pas sur l'image : une
   commande posée par-dessus une photographie de bijou la salit. */
.ejb-reperes__commandes {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 14px;
	padding: 0 var(--ejb-repere-retrait);
}

.ejb-reperes__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #E4DFD8;
	border-radius: 50%;
	background: none;
	color: #12100E;
	cursor: pointer;
	transition: border-color 300ms cubic-bezier(.2, .6, .2, 1),
		color 300ms cubic-bezier(.2, .6, .2, 1);
}

.ejb-reperes__fleche:hover,
.ejb-reperes__fleche:focus-visible {
	border-color: #8C6A3F;
	color: #8C6A3F;
}

/* Au bout de la bande, la flèche reste en place mais cesse d'appeler le
   clic : la faire disparaître décalerait sa voisine à chaque extrémité. */
.ejb-reperes__fleche[disabled] {
	opacity: .35;
	cursor: default;
}


/* ------------------------------------------------------------------ */
/*  Boutons — reprise du dessin imposé par le thème                    */
/*                                                                     */
/*  hello-elementor habille tous les <button> dans son reset :         */
/*                                                                     */
/*    [type=button],[type=submit],button { border:1px solid #c36;      */
/*      color:#c36; display:inline-block; padding:.5rem 1rem }         */
/*    button:hover { background-color:#c36; color:#fff }               */
/*                                                                     */
/*  Nos classes battent le sélecteur d'élément à l'état normal, mais   */
/*  « button:hover » vaut une classe *plus* un élément : il l'emporte  */
/*  sur « .ejb-film__lecture ». Le bouton de lecture couvrant toute la */
/*  vidéo, le survol repeignait le cadre entier en rose.               */
/*                                                                     */
/*  D'où ces reprises à deux classes, qui reprennent la main.          */
/* ------------------------------------------------------------------ */

.ejb-film__lecture.ejb-film__lecture:hover,
.ejb-film__lecture.ejb-film__lecture:focus,
.ejb-film__lecture.ejb-film__lecture:focus-visible {
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
}

.ejb-reperes__fleche.ejb-reperes__fleche:hover,
.ejb-reperes__fleche.ejb-reperes__fleche:focus,
.ejb-reperes__fleche.ejb-reperes__fleche:focus-visible {
	background: none;
	color: #8C6A3F;
	border-color: #8C6A3F;
}


/* ------------------------------------------------------------------ */
/*  Vidéo verticale                                                    */
/*                                                                     */
/*  Un Short, une story, une vidéo filmée au téléphone : le cadre      */
/*  16/9 en montrait une bande et jetait le reste. Le format se règle  */
/*  donc, et se devine seul quand l'adresse est celle d'un Short.      */
/*                                                                     */
/*  La largeur est bornée : une vidéo verticale à la largeur d'un      */
/*  article ferait deux écrans de haut. Elle se centre dans la         */
/*  colonne, comme une image portrait.                                 */
/* ------------------------------------------------------------------ */

.ejb-film--portrait {
	--ejb-video-rapport: 9 / 16;
	--ejb-video-bouton: 58px;
}

.ejb-film--portrait .ejb-film__cadre {
	max-width: 380px;
	margin-inline: auto;
}

.ejb-film--portrait .ejb-film__caption {
	max-width: 380px;
	margin-inline: auto;
}


/* Le curseur dit que la bande se saisit, et le change pendant le geste. Rien
   n'apparaît sans le script : sans lui, une main ouverte promettrait un
   défilement que rien ne rendrait. */
.ejb-reperes__bande[data-ejb-saisie] {
	cursor: grab;
}

.ejb-reperes__bande.ejb-bande--saisie {
	cursor: grabbing;
	/* Pendant le tirage, la sélection de texte suivrait le curseur et
	   surlignerait les légendes au passage. */
	user-select: none;
}

/* ================================================ Publication Instagram */

/*
 * La citation d'une publication dans le corps d'un article. Elle reprend le
 * dessin des visuels du texte — même arrondi, même légende dessous — plutôt
 * que le cadre blanc d'Instagram, qui jurerait au milieu de la page.
 *
 * L'image vient de la médiathèque : elle a été rapatriée au moment où la
 * rédaction a choisi la publication, et ne dépend plus de Meta.
 */
.ejb-instagram {
	margin: 40px 0;
}

.ejb-instagram__cadre {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--ej-creme-ombre, #F1EDE7);
	line-height: 0;
}

.ejb-instagram__cadre img {
	width: 100%;
	height: auto;
}

/* Le réel est vertical : sans réserve, il occuperait deux écrans de haut au
   milieu de l'article. */
.ejb-instagram--reel .ejb-instagram__cadre {
	max-width: 380px;
	margin-inline: auto;
}


.ejb-instagram__lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(250, 248, 245, .8);
	border-radius: 50%;
	background-color: rgba(18, 16, 14, .18);
	backdrop-filter: blur(3px);
	color: var(--ej-creme, #FAF8F5);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

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

/*
 * La carte reprend celle des réels de l'accueil : le voile, le compte en haut,
 * les icônes du réseau à droite, le pied. Les valeurs sont celles de
 * « .ejb-video » dans la feuille des blocs — mêmes tailles, mêmes couleurs, à
 * ceci près que la carte d'article est plus large et porte donc un texte un
 * peu plus grand.
 */
.ejb-instagram__cadre::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(15, 31, 53, .55) 0%, rgba(15, 31, 53, .10) 24%, rgba(15, 31, 53, .04) 46%, rgba(15, 31, 53, .58) 78%, rgba(15, 31, 53, .90) 100%);
}

.ejb-instagram__compte {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100% - 66px);
	min-width: 0;
}

/* Le liseré reprend l'anneau du réseau, dans l'or de la charte. */
.ejb-instagram__cadre .ejb-instagram__avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--ej-or, #C9A26B);
	padding: 1.5px;
	background-color: rgba(255, 255, 255, .9);
}

/*
 * La hauteur de ligne est posée explicitement : le corps de l'article la met à
 * zéro sur les éléments de bloc qu'il ne connaît pas, et le pseudo se
 * retrouvait à cent un pixels de large sur zéro de haut — présent, blanc, et
 * invisible.
 */
.ejb-instagram__pseudo {
	overflow: hidden;
	color: #FFF;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(15, 31, 53, .5);
}

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

.ejb-instagram__actions svg {
	width: 22px;
	height: 22px;
}

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

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

.ejb-instagram__appel {
	flex: 0 0 auto;
	color: #FFF;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
	text-shadow: 0 1px 3px rgba(15, 31, 53, .5);
}

/* Le bouton de lecture passe au-dessus du voile, comme sur l'accueil. */
.ejb-instagram__lecture {
	z-index: 2;
}