/**
 * FHL Academy — styles des composants.
 *
 * Les couleurs de marque viennent des variables du thème enfant
 * (--fhl-living-green, --fhl-orchid-pulse, …). Le plugin ne redéfinit jamais
 * un token de marque : il les consomme, avec un repli si le thème est absent.
 *
 * Les couleurs de couche (--fhl-layer, --fhl-layer-text) sont injectées en
 * ligne par les templates, depuis les métadonnées de terme.
 */

.fhl-card,
.fhl-layer,
.fhl-hero,
.fhl-continue,
.fhl-single,
.fhl-filterbar,
.fhl-cases,
.fhl-video-meta,
.fhl-locked,
.fhl-auth,
.fhl-account,
.fhl-sign-in,
.fhl-intro {
	--fhl-radius-panel: 28px;
	--fhl-radius-card: 12px;
	--fhl-radius-media: 8px;
	--fhl-gap: 20px;

	--fhl-ink: var(--fhl-forest-deep, #172B21);
	--fhl-ink-soft: #3D4A43;
	--fhl-muted: #6B7670;
	--fhl-surface: #EAEAEA;
	--fhl-paper: var(--fhl-porcelain-mist, #F5EFE6);
	--fhl-accent: var(--fhl-orchid-text, #D30071);

	/* Formulaires. Erreur : 6,5:1 sur blanc. Bordure de champ : 3,9:1, au-dessus
	   des 3:1 exigés pour un composant d'interface. */
	--fhl-danger: #B3261E;
	--fhl-field-border: #7A847F;

	box-sizing: border-box;
}

.fhl-card *,
.fhl-layer *,
.fhl-hero *,
.fhl-single * {
	box-sizing: inherit;
}

/* ------------------------------------------------------------ Titres ----- */

/* « CONTINUE WATCHING… » et « PATIENT CASE STUDIES » : Hanken Light 40px.
   Les tailles sont exprimées en clamp dont le maximum vaut la valeur donnée
   par la DA : au format de la maquette on obtient exactement 40 px, et le
   titre reste lisible en dessous. */
.fhl-section-title {
	margin: 0 0 1.25rem;
	font-family: var(--fhl-font-body);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem); /* 40px */
	font-weight: var(--fhl-w-light, 300);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fhl-ink);
	text-wrap: balance;
}

/* ------------------------------------------------------------- Couche ---- */

.fhl-layer {
	margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}

/* Le bloc se dimensionne sur son contenu, et les deux lignes le remplissent :
   c'est ce qui donne aux DEUX filets exactement la même longueur. Chaque ligne
   en `display: table` calait au contraire son filet sur son propre texte, d'où
   deux longueurs différentes. Même motif que `.fhl-single__layer` sur la page
   de lecture.

   `max-width` reste le plafond : un sous-titre long se replie à 32rem au lieu
   d'étirer les filets à toute la largeur. */
.fhl-layer__head {
	width: fit-content;
	max-width: 32rem;
	margin-bottom: 1.5rem;
}

/* Titre de couche : DIN Pro Black 900, 40px, dans la COULEUR DE MARQUE de la
   couche — choix DA du 2026-09-08, qui prime sur la variante assombrie.
   Le cyan et le lime restent sous le seuil WCAG sur fond clair ; c'est un
   écart assumé, tracé dans _PROJET/03-DECISIONS.md. */
.fhl-layer__title {
	margin: 0;
	font-family: var(--fhl-font-body);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem); /* 40px */
	font-weight: var(--fhl-w-black, 900);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fhl-layer, var(--fhl-ink));
	border-bottom: 1px solid rgba(23, 43, 33, 0.2);
	padding-bottom: 0.4rem;
}

.fhl-layer__subtitle {
	margin: 0.5rem 0 0;
	padding-bottom: 0.4rem;
	font-family: var(--fhl-font-body);
	font-size: clamp(1rem, 1.3vw, 1.3125rem); /* 21px */
	font-weight: var(--fhl-w-regular, 400);
	color: var(--fhl-ink);
	border-bottom: 1px solid rgba(23, 43, 33, 0.2);
}

.fhl-layer__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-family: var(--fhl-font-body);
	font-size: 0.75rem; /* 12px */
	font-weight: var(--fhl-w-medium, 500);
	color: var(--fhl-ink);
	text-decoration: none;
}

.fhl-layer__more:hover,
.fhl-layer__more:focus-visible {
	text-decoration: underline;
}

.fhl-layer__arrow {
	transition: transform 0.2s ease;
}

.fhl-layer__more:hover .fhl-layer__arrow {
	transform: translateX(3px);
}

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

.fhl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--fhl-gap);
}

.fhl-grid--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
}

.fhl-grid--carousel > .fhl-card {
	flex: 0 0 206px;
	scroll-snap-align: start;
}

/* ------------------------------------------------- Carrousel mobile ----- */

/* Les rangées de cartes — couches, cas patients, reprise de lecture, « Discover
   more » — restent des grilles sur grand écran. En mobile, la grille tombait à
   une colonne et empilait tout : 9 vignettes The Canopy faisaient 3 200 px de
   défilement vertical, les 4 cas patients 1 800 px. Chaque rangée devient
   donc un carrousel horizontal.

   Le défilement est natif (glisser au doigt, `scroll-snap`) : il marche sans
   script. app.js n'ajoute que les flèches — une carte par clic — et leur état.
   Pas de boucle : en bout de rangée, la flèche s'éteint.

   Sélecteurs en `.fhl-carousel > .fhl-carousel__track` (0,2,0) : ils doivent
   l'emporter sur `.fhl-grid` et `.fhl-cases__grid` quel que soit l'ordre du
   fichier. */

/* Hors mobile, pas de flèches : la grille montre déjà tout. */
.fhl-carousel__nav {
	display: none;
}

@media (max-width: 767px) {
	.fhl-carousel {
		--fhl-carousel-gap: var(--fhl-gap, 20px);
		/* Part visible de la carte suivante : un dixième, demande du client.
		   C'est ce seul chiffre qui règle l'amorce. */
		--fhl-carousel-peek: 0.1;
		/* Plafond de largeur d'une carte. Il ne joue pas sur un téléphone tenu
		   droit : jusqu'à ~430 px d'écran, la carte calculée reste en dessous et
		   l'amorce vaut exactement un dixième. Il sert au téléphone en paysage
		   et aux petites tablettes (600-767 px), où « une carte + un dixième »
		   donnerait une carte de cas de 547 × 705 px, plus haute que l'écran. Là,
		   la carte plafonne et la suivante se montre davantage — ce qui dit
		   toujours qu'il y a une suite. */
		--fhl-carousel-max: 340px;
	}

	/* Les cas patients gardent leur propre espacement. */
	.fhl-cases > .fhl-carousel {
		--fhl-carousel-gap: 24px;
	}

	.fhl-carousel > .fhl-carousel__track {
		display: flex;
		gap: var(--fhl-carousel-gap);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* Les flèches et l'amorce disent déjà qu'il y a une suite : la barre de
		   défilement n'ajouterait qu'un trait gris sous les cartes. */
		scrollbar-width: none;
		/* Une rangée qui défile rogne tout ce qui dépasse, y compris en hauteur :
		   ces marges laissent la place au soulèvement de 2 px de la carte
		   touchée et au départ de son ombre. La marge négative rend les 4 px du
		   haut, pour que l'écart sous le titre ne bouge pas. */
		padding-block: 4px 12px;
		margin-top: -4px;
	}

	.fhl-carousel > .fhl-carousel__track::-webkit-scrollbar {
		display: none;
	}

	/* Une carte entière plus un dixième de la suivante :
	       largeur visible = carte + espace + carte × 0,1
	   d'où  carte = (largeur visible − espace) ÷ 1,1.
	   Exact à toute largeur de téléphone, sans point d'arrêt intermédiaire ;
	   `min()` n'y ajoute que le plafond décrit plus haut.

	   `min-width: 0` : sans lui, un élément flex refuse de rétrécir sous la
	   largeur de son contenu, et une étiquette longue élargirait sa carte. */
	.fhl-carousel > .fhl-carousel__track > * {
		flex: 0 0 min(
			calc((100% - var(--fhl-carousel-gap)) / (1 + var(--fhl-carousel-peek))),
			var(--fhl-carousel-max)
		);
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Les flèches n'apparaissent qu'une fois que le script a constaté que la
	   rangée déborde. Une rangée d'une carte n'a rien à faire défiler ; et sans
	   script, des flèches inertes seraient pires que pas de flèches. */
	.fhl-carousel.is-scrollable > .fhl-carousel__nav {
		display: flex;
		justify-content: flex-end;
		gap: 0.5rem;
		margin-top: 0.25rem;
	}
}

/* 44 px : la taille de cible tactile recommandée. Le fond et la couleur sont
   posés dans CHAQUE état, pour la même raison que sur les pastilles : le reset
   de Hello Elementor repeint tout bouton en bordeaux au survol et au focus. */
.fhl-carousel__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(23, 43, 33, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	color: var(--fhl-forest-deep, #172B21);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Survol et focus gardent l'aspect de repos — le rose du survol n'est rendu
   qu'aux appareils à souris, plus bas. Le bouton touché CONSERVE l'un des deux
   états : le focus sur Chrome Android ; un survol « collant » sur iOS Safari,
   qui ne donne jamais le focus à un bouton. Sans cette règle, le reset de Hello
   Elementor (`[type=button]:hover`, 0,2,0) le laissait en bordeaux #c36 après
   chaque tap, comme enfoncé. L'anneau ci-dessous suffit à signaler le focus
   clavier. */
.fhl-carousel__btn:hover,
.fhl-carousel__btn:focus {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(23, 43, 33, 0.22);
	color: var(--fhl-forest-deep, #172B21);
}

.fhl-carousel__btn:focus-visible {
	outline: 3px solid var(--fhl-forest-deep, #172B21);
	outline-offset: 2px;
}

/* Le rose de la marque au survol, et à l'appui pour le retour tactile. */
@media (hover: hover) {
	.fhl-carousel__btn:hover {
		background: var(--fhl-orchid-pulse, #FF2E9E);
		border-color: var(--fhl-orchid-pulse, #FF2E9E);
		color: #fff;
	}
}

.fhl-carousel__btn:active {
	background: var(--fhl-orchid-pulse, #FF2E9E);
	border-color: var(--fhl-orchid-pulse, #FF2E9E);
	color: #fff;
}

/* Bout de rangée. `aria-disabled` plutôt que `disabled` : un bouton désactivé
   pendant qu'il a le focus le perd — l'utilisateur au clavier qui atteint la
   dernière carte ne saurait plus où il est. Le bouton reste donc focalisable,
   annoncé « indisponible », et app.js ignore ses clics. (0,3,0) : l'emporte
   sur tous les états ci-dessus. */
.fhl-carousel__btn[aria-disabled="true"],
.fhl-carousel__btn[aria-disabled="true"]:hover,
.fhl-carousel__btn[aria-disabled="true"]:focus,
.fhl-carousel__btn[aria-disabled="true"]:active {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(23, 43, 33, 0.22);
	color: var(--fhl-forest-deep, #172B21);
	opacity: 0.35;
	cursor: default;
}

/* --------------------------------------------------------------- Carte --- */

.fhl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Dégradé du gris clair vers le blanc, et non un aplat gris. Il descend
	   VERS le blanc : le voile coloré du survol, qui se concentre en bas, se
	   pose ainsi sur du blanc et sort franc, au lieu de se troubler sur du
	   gris. Les deux dégradés sont donc pensés ensemble. */
	background: linear-gradient(to bottom, var(--fhl-surface) 0%, #fff 100%);
	border-radius: var(--fhl-radius-card);
	overflow: hidden;
	/* `isolation` crée un contexte d'empilement local : le halo peut alors
	   passer en z-index négatif — au-dessus du fond de la carte, sous son
	   contenu — sans qu'aucun enfant ait besoin d'un z-index. */
	isolation: isolate;
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Les composants ont leur propre display, qui peut prendre le pas sur la
   règle native de l'attribut hidden selon le navigateur. */
.fhl-card[hidden],
.fhl-layer[hidden] {
	display: none !important;
}

/* Voile coloré du survol : FIXE, dans la couleur de la couche.
   Il ne suit plus le curseur. La maquette le montre concentré en bas de la
   carte, franc, et non comme un halo mobile.

   L'axe est incliné : 155deg, soit « vers le bas, penché à droite ». C'est ce
   qui densifie le coin bas-droit comme sur la maquette. Pour régler la pente,
   c'est ce seul angle — 180deg serait une descente droite, 135deg la diagonale
   pleine ; plus on s'éloigne de 180, plus ça penche.

   Il vit sous le contenu (z-index négatif dans le contexte d'empilement créé
   par `isolation`), donc il teinte la zone de texte sans jamais passer sur la
   photo — exactement ce que montre la maquette. Les bornes sont calées sur la
   hauteur TOTALE de la carte : la vignette en occupant le haut, le dégradé
   n'est visible qu'à partir de sa moitié, là où il a déjà viré. */
.fhl-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(
		155deg,
		transparent 22%,
		var(--fhl-layer, transparent) 90%
	);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

/* Intensité du voile. C'est LE réglage de la force de la couleur : la forme et
   la pente du dégradé se règlent au-dessus, son intensité ici, et rien d'autre
   ne la touche. 1 = couleur pleine, trop dense sur ce format ; 0.6 laisse la
   teinte franche sans écraser la carte. */
.fhl-card:hover::before,
.fhl-card:focus-within::before {
	opacity: .6;
}

.fhl-card:hover,
.fhl-card:focus-within {
	transform: translateY(-2px);
	/* Aucun contour : la maquette n'en montre pas, c'est le voile coloré qui
	   signale l'état. Reste l'ombre portée, teintée de la couleur de la couche
	   pour rattacher le survol à sa section. */
	box-shadow: 0 14px 30px -18px var(--fhl-layer, rgba(23, 43, 33, .55));
}

.fhl-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 8px 8px 0;
	color: inherit;
	text-decoration: none;
}

.fhl-card__link:focus-visible {
	outline: 3px solid var(--fhl-accent);
	outline-offset: -3px;
	border-radius: var(--fhl-radius-card);
}

.fhl-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--fhl-radius-media);
	overflow: hidden;
	background: #d9d9d9;
}

.fhl-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fhl-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(5, 5, 5, 0.72);
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.fhl-card:hover .fhl-card__play,
.fhl-card:focus-within .fhl-card__play {
	opacity: 1;
}

.fhl-card__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 0.15em 0.45em;
	border-radius: 999px;
	background: #050505;
	color: #fff;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
}

.fhl-card__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(5, 5, 5, 0.25);
	display: block;
}

.fhl-card__progress-bar {
	display: block;
	height: 100%;
	background: var(--fhl-layer, var(--fhl-accent));
}

.fhl-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.5rem 0.15rem 0;
}

.fhl-card__title {
	font-size: 1rem;
	font-weight: var(--fhl-w-medium, 500);
	line-height: 1.3;
	color: var(--fhl-layer-text, var(--fhl-ink));
}

.fhl-card__subtitle {
	font-size: 0.875rem;
	font-weight: var(--fhl-w-light, 300);
	color: var(--fhl-ink-soft);
}

.fhl-card__product {
	font-size: 0.8rem;
	font-weight: var(--fhl-w-medium, 500);
	color: var(--fhl-ink);
}

.fhl-card__remaining {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--fhl-muted);
}

/* Croix de retrait — uniquement sur les cartes de reprise de lecture.
   Masquée au repos, révélée au survol de la carte et au focus clavier : sans
   la condition de focus, le bouton serait inatteignable sans souris. */
.fhl-card__dismiss {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(5, 5, 5, 0.72);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.fhl-card:hover .fhl-card__dismiss,
.fhl-card__dismiss:focus-visible {
	opacity: 1;
	transform: scale(1);
}

.fhl-card__dismiss:hover {
	background: var(--fhl-orchid-pulse, #FF2E9E);
}

.fhl-card__dismiss:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

.fhl-card__dismiss[disabled] {
	cursor: progress;
	opacity: .6;
}

/* Sur écran tactile il n'y a pas de survol : la croix reste visible. */
@media (hover: none) {
	.fhl-card__dismiss {
		opacity: 1;
		transform: scale(1);
	}
}

.fhl-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
	padding: 0 8px 10px;
	list-style: none;
}

.fhl-card__tag {
	padding: 0.2em 0.6em;
	border: 1px solid var(--fhl-accent);
	border-radius: 999px;
	font-size: 0.7rem;
	color: var(--fhl-accent);
	white-space: nowrap;
}

/* ---------------------------------------- Bloc titre + filtres (autonome) - */

.fhl-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.fhl-filterbar__title {
	display: flex;
	flex-direction: column;
	line-height: 0.95;
}

.fhl-filterbar__heading {
	font-family: var(--fhl-font-body);
	font-size: clamp(1.75rem, 3.65vw, 4.375rem); /* 70px */
	font-weight: var(--fhl-w-regular, 400);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fhl-ink);
}

/* La seconde ligne en Bodoni italique, légèrement chevauchée : c'est la
   signature typographique de la marque, un mot évocateur contre un mot
   technique. Même corps que la première ligne. */
.fhl-filterbar__script {
	font-family: var(--fhl-font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.75rem, 3.65vw, 4.375rem); /* 70px */
	font-weight: 600;
	font-style: italic;
	letter-spacing: -0.01em;
	color: var(--fhl-ink);
	margin-top: -0.1em;
}

.fhl-filterbar__controls {
	display: flex;
	flex: 0 1 35rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	width: 35rem;
	max-width: 100%;
	min-width: 0;
	margin-left: auto;
	padding-bottom: 0.4rem;
}

.fhl-filterbar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fhl-filterbar__chips[hidden] {
	display: none;
}

/* Sur desktop, le sélecteur est ancré à la même hauteur dans les deux modes.
   La réserve verticale accueille les deux lignes de produits vers le bas sans
   déplacer le menu ni la première section de vidéos. */
@media (min-width: 1100px) {
	.fhl-filterbar {
		align-items: flex-start;
		min-height: 9.75rem;
		margin-bottom: 1.5rem;
	}

	.fhl-filterbar__controls {
		padding-top: 3rem;
	}
}

/* -- Liste déroulante ------------------------------------------------------ */

.fhl-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.fhl-select__input {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.55em 2.6em 0.55em 1.1em;
	border: 0;
	border-radius: var(--fhl-radius-pill, 999px);
	background: var(--fhl-orchid-pulse, #FF2E9E);
	color: #fff;
	font-family: var(--fhl-font-body);
	font-size: 0.8rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.2;
	cursor: pointer;
	min-width: 15rem;
}

.fhl-select__input:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

.fhl-select__chevron {
	position: absolute;
	right: 0.5em;
	display: grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: #fff;
	color: var(--fhl-orchid-pulse, #FF2E9E);
	pointer-events: none;
}

/* -- Pastilles ------------------------------------------------------------- */

.fhl-chip {
	padding: 0.4em 1em;
	border: 0;
	border-radius: var(--fhl-radius-pill, 999px);
	background: var(--fhl-chip-1, #FBB9DC);
	color: var(--fhl-chip-text, #A30056);
	/* La graisse est posée ici, pas héritée : le body est en 300, or DIN Pro
	   n'a pas de 300 — l'héritage donnait une graisse de substitution. */
	font-family: var(--fhl-font-body);
	font-size: 0.8rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* Le dégradé rose de la maquette : chaque pastille un ton plus clair.
   Décoratif — il n'encode aucune information. */
.fhl-chip--t1 { background: var(--fhl-chip-1); }
.fhl-chip--t2 { background: var(--fhl-chip-2); }
.fhl-chip--t3 { background: var(--fhl-chip-3); }
.fhl-chip--t4 { background: var(--fhl-chip-4); }
.fhl-chip--t5 { background: var(--fhl-chip-5); }

/* Survol et focus : le rose de la marque, texte blanc.
   Il FAUT peindre `background-color` explicitement. Le reset de Hello Elementor
   impose `button:focus, button:hover { background-color: #c36 }` — un bordeaux
   étranger à la charte. L'ancien `filter: brightness()` ne touchait pas
   `background-color` : il laissait donc ce bordeaux s'appliquer sans le savoir.
   `.fhl-chip:hover` (0,2,0) l'emporte sur `button:hover` (0,1,1).

   `:focus` est visé en plus de `:focus-visible`, car le reset agit sur `:focus`
   — donc aussi après un simple clic à la souris. */
.fhl-chip:hover,
.fhl-chip:focus {
	background-color: var(--fhl-orchid-pulse, #FF2E9E);
	color: #fff;
}

.fhl-chip.is-active {
	background: var(--fhl-orchid-pulse, #FF2E9E);
	color: #fff;
}

.fhl-chip:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.fhl-filterbar {
		flex-direction: column;
		align-items: stretch;
	}

	/* `flex: none`, sans quoi le bloc de filtres réservait ~490 px vides au-dessus
	   de la première couche.

	   La base `flex: 0 1 35rem` posée plus haut est une LARGEUR tant que le bloc
	   est en ligne. Ici il passe en colonne : la base s'applique alors à l'axe
	   principal, qui est devenu la HAUTEUR. Les commandes réclamaient donc 560 px
	   de haut pour 70 px de contenu — mesuré à 390 px de large. `none` rend la
	   hauteur au contenu ; la largeur, elle, reste tenue par `width: 100%`. */
	.fhl-filterbar__controls {
		flex: none;
		width: 100%;
		margin-left: 0;
	}

	/* Sur mobile la ligne de pastilles déborde : elle défile.

	   Deux conditions, et il faut LES DEUX — n'en poser qu'une ne change rien.

	   1. `align-self: stretch`. Le parent `.fhl-filterbar__controls` est une
	      colonne flex en `align-items: flex-start` : sur l'axe transversal
	      l'enfant est alors dimensionné par SON CONTENU et a parfaitement le
	      droit de déborder son conteneur. C'est ce qui donnait 404 px de
	      pastilles dans un parent de 317 px. `stretch` le recale sur la
	      largeur disponible.
	   2. `min-width: 0`. Un élément flex vaut `min-width: auto` par défaut et
	      refuse de rétrécir sous la largeur de son contenu.

	   `overflow-x` ne peut rien tant que la boîte n'a pas le droit de se
	   réduire : c'est le débordement de la PAGE entière qu'on évite ici, pas
	   seulement celui de la barre. */
	.fhl-filterbar__chips {
		align-self: stretch;
		flex-wrap: nowrap;
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-bottom: 0.35rem;
		scrollbar-width: thin;
	}

	.fhl-chip {
		white-space: nowrap;
	}

	.fhl-select__input {
		width: 100%;
	}
}

/* ------------------------------------------------------- Cas patients ---- */

/* Aucune marge : l'espacement de la section est piloté depuis Elementor. */
.fhl-cases {
	margin: 0;
}

.fhl-cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
}

.fhl-case {
	position: relative;
	border-radius: var(--fhl-radius-card, 12px);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.fhl-case:hover,
.fhl-case:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -20px var(--fhl-orchid-pulse, #FF2E9E);
}

.fhl-case__link,
.fhl-case__link:hover,
.fhl-case__link:focus,
.fhl-case__link:active {
	display: block;
	/* Explicite jusque dans les états : le `a:hover` du thème gagnerait
	   sinon, et le texte virerait au magenta sombre sur la photo. */
	color: #fff;
	text-decoration: none;
}

.fhl-case__link:focus-visible {
	outline: 3px solid var(--fhl-orchid-pulse);
	outline-offset: -3px;
	border-radius: var(--fhl-radius-card, 12px);
}

.fhl-case__media {
	position: relative;
	display: block;
	aspect-ratio: 45 / 58;
	background: #d9d9d9;
}

/* Halo suivant le curseur, comme sur les vignettes vidéo. Posé sur la photo
   et sous le texte : le prénom reste lisible quoi qu'il arrive. */
.fhl-case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		14rem circle at var(--fhl-mx, 50%) var(--fhl-my, 65%),
		var(--fhl-orchid-pulse, #FF2E9E) 0%,
		transparent 62%
	);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.fhl-case:hover .fhl-case__media::after,
.fhl-case:focus-within .fhl-case__media::after {
	opacity: .42;
}

.fhl-case__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fhl-case__img--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #eee, #eee 8px, #e3e3e3 8px, #e3e3e3 16px);
}

/* Voile rose très léger, concentré sur le bas de l'image : il teinte, il ne
   masque pas. Le visage reste lisible jusqu'en bas du cadre. */
.fhl-case__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 2.25rem 1rem 0.9rem;
	background: linear-gradient(
		to top,
		rgba(255, 46, 158, .30) 0%,
		rgba(255, 46, 158, .15) 32%,
		rgba(255, 46, 158, .04) 60%,
		rgba(255, 46, 158, 0) 100%
	);
	/* Le voile étant volontairement léger, le texte a besoin de son propre
	   appui : une ombre douce plutôt qu'un aplat qui écraserait la photo. */
	text-shadow: 0 1px 4px rgba(90, 0, 45, .6);
}

/* Le trait sous « CASE 01 » n'est que la bordure basse de ce bloc : sa longueur
   est donc celle du bloc, soit le texte plus le débord à droite. C'est ce seul
   débord qui le règle.

   `width: fit-content` double `align-self` a dessein : si le bloc cessait un
   jour d'être un élément flex — un changement dans `.fhl-case__body` suffirait —
   `align-self` n'aurait plus d'effet et le trait filerait sur toute la largeur.
   Avec `fit-content`, il reste calé sur le texte quoi qu'il arrive. */
.fhl-case__number {
	align-self: flex-start;
	width: fit-content;
	padding-right: 0.5rem;
	padding-bottom: 0.3rem;
	font-size: 0.78rem;
	/* Sans cette ligne, le bloc héritait du 300 du body — et DIN Pro n'ayant
	   pas de 300, le navigateur substituait une graisse approchante. */
	font-weight: var(--fhl-w-regular, 400);
	letter-spacing: 0.1em;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}

.fhl-case__name {
	font-size: 1.05rem;
	font-weight: var(--fhl-w-medium, 500);
	margin-top: 0.35rem;
}

.fhl-case__count {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, .88);
}

/* --------------------------------------------------------------- Hero ---- */

.fhl-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 46vw, 620px);
	border-radius: var(--fhl-radius-panel);
	overflow: hidden;
	isolation: isolate;
	background: var(--fhl-paper);
}

.fhl-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.fhl-hero__inner {
	max-width: 34rem;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.fhl-hero__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-ink-soft);
}

.fhl-hero__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 4.5rem);
	line-height: 1.02;
	font-weight: var(--fhl-w-light, 300);
	color: var(--fhl-ink);
	text-wrap: balance;
}

.fhl-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0.5rem 0;
	border-block: 1px solid rgba(23, 43, 33, 0.25);
	font-size: 0.95rem;
	color: var(--fhl-ink);
}

.fhl-hero__duration {
	font-variant-numeric: tabular-nums;
}

.fhl-hero__desc {
	margin: 0;
	max-width: 34em;
	font-weight: var(--fhl-w-light, 300);
	color: var(--fhl-ink-soft);
}

.fhl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0 0;
}

/* ------------------------------------------------------------ Boutons ---- */

/* Pilule pleine. `border-radius: 999px` la rend ronde quelle que soit sa
   hauteur : le rayon est simplement écrêté à la moitié de la hauteur.

   La graisse est posée ici, pas héritée : `font: inherit` reprenait le 300 du
   body — que DIN Pro ne possède pas, d'où une substitution. */
.fhl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7em 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--fhl-font-body);
	font-size: 0.85rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.fhl-btn--primary {
	background: var(--fhl-accent);
	color: #fff;
}

/* La couleur du texte est reposée au survol : sur un lien-bouton, le reset
   du thème (`a:hover`, en (0,1,1)) l'emporterait sur nos variantes seules et
   passerait le texte en bleu nuit. */
.fhl-btn--primary:hover {
	background: #b00060;
	color: #fff;
}

.fhl-btn--secondary {
	background: var(--fhl-living-green, #2F674A);
	color: #fff;
}

.fhl-btn--secondary:hover {
	background: #24523b;
	color: #fff;
}

/* Le reset du thème repeint TOUT bouton au focus (`[type=button]:focus`, en
   (0,2,0)) : l'ordre de chargement ne suffit pas à le neutraliser, la
   spécificité y est supérieure à celle de nos variantes seules. Chacune
   repose donc son propre fond dans cet état — sans quoi le bouton virait au
   bordeaux du reset dès qu'on le cliquait puis quittait à la souris. */
.fhl-btn--primary:focus {
	background: var(--fhl-accent);
	color: #fff;
}

.fhl-btn--secondary:focus {
	background: var(--fhl-living-green, #2F674A);
	color: #fff;
}

/* L'anneau de focus, lui, reste réservé au clavier. */
.fhl-btn:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

.fhl-btn[disabled],
.fhl-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Bouton « Sign in » du header, visiteur non connecté. La pilule des
   boutons, resserrée pour tenir dans la hauteur du header — et dans sa
   colonne de droite, qui ne fait qu'environ 90 px sur un téléphone. */
.fhl-sign-in {
	padding: 0.65em 1.25em;
	white-space: nowrap;
}

/* ------------------------------------------------------------ Lecteur ---- */

.fhl-player {
	aspect-ratio: 16 / 9;
	border-radius: var(--fhl-radius-card);
	overflow: hidden;
	background: #050505;
}

.fhl-player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --------------------------------------------------- Page de lecture ---- */

/* Le panneau reprend les gouttières de la maquette : 64 px de chaque côté,
   151 px de retrait intérieur jusqu'au contenu. */
.fhl-single {
	padding: clamp(1rem, 3.3vw, 4rem) clamp(1rem, 3.3vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.fhl-single__panel {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	padding: clamp(1.5rem, 5.5vw, 6.5rem) clamp(1.25rem, 7.9vw, 9.4rem);
	border-radius: 16px;
}

/* Panneau des pages montées à partir de shortcodes — recherche, compte.
   Même langage que le panneau de lecture, mais borné et centré : ces pages
   n'ont pas de lecteur pleine largeur pour tenir la mise en page, et une
   grille de vignettes étalée sur 2000 px serait illisible.

   Le fond vivant, lui, n'a rien à faire ici : le thème le pose déjà sur le
   body de TOUTES les pages. */
.fhl-page {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 4vw, 4rem);
	border-radius: 16px;
}

/* Des shortcodes sur des lignes voisines : wpautop les enveloppe d'un même
   paragraphe, et quand l'un rend vide (« Continue watching » sans historique,
   le bloc compte d'un visiteur) il reste un <p><br></p>. Dans ce panneau en
   colonne, ce paragraphe fantôme ajoutait un écart entier sous le titre. */
.fhl-page > p:empty,
.fhl-page > p:has(> br:only-child) {
	display: none;
}

/* En-tête de couche, au-dessus du lecteur. Même langage que sur l'accueil,
   mais au corps de la maquette de lecture : 75 px. */
/* Le bloc se dimensionne sur son contenu : le titre tient sur une ligne tant
   qu'il y a la place, et les filets épousent sa largeur — comme sur la
   maquette. Sur écran étroit, `fit-content` laisse le titre repasser à la
   ligne plutôt que de déborder. */
.fhl-single__layer {
	width: fit-content;
	max-width: 100%;
}

.fhl-single__layer-title {
	margin: 0;
	font-family: var(--fhl-font-body);
	font-size: clamp(2rem, 3.9vw, 4.6875rem); /* 75px */
	font-weight: var(--fhl-w-black, 900);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fhl-layer, var(--fhl-ink));
	border-bottom: 1px solid rgba(23, 43, 33, 0.25);
	padding-bottom: 0.35rem;
}

.fhl-single__layer-sub {
	margin: 0.55rem 0 0;
	padding-bottom: 0.4rem;
	font-family: var(--fhl-font-body);
	font-size: clamp(1rem, 1.3vw, 1.3125rem); /* 21px */
	font-weight: var(--fhl-w-regular, 400);
	color: var(--fhl-ink);
	border-bottom: 1px solid rgba(23, 43, 33, 0.25);
}

.fhl-single__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fhl-single__title {
	margin: 0;
	font-family: var(--fhl-font-body);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem); /* 40px */
	font-weight: var(--fhl-w-bold, 700);
	line-height: 1.15;
	color: var(--fhl-layer, var(--fhl-ink));
	text-wrap: balance;
}

.fhl-single__desc {
	margin: 0;
	max-width: 78ch;
	font-size: var(--fhl-size-body, 1rem);
	font-weight: var(--fhl-w-regular, 400);
	color: var(--fhl-ink);
}

.fhl-single__actions {
	margin: 0.5rem 0 0;
}

.fhl-single__content {
	max-width: 78ch;
	color: var(--fhl-ink-soft);
}

/* « You may like this too », en bas du panneau de lecture. */
.fhl-related {
	margin-top: clamp(1.5rem, 3vw, 3rem);
}

/* --------------------------------------------------- Vidéo de fond ------ */

/* Le bloc se superpose à son conteneur au lieu de s'y empiler : il n'impose
   donc aucune hauteur, et un slide de carrousel garde la sienne. Les
   conteneurs Elementor sont en position:relative par défaut, l'ancrage est
   donc immédiat. */
.fhl-bgvideo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: var(--fhl-bgvideo-radius, 25px);
	background-position: center;
	background-size: cover;
	background-color: #050505;
	pointer-events: none;
	/* Conteneur nommé : la CSS plus bas interroge l'ORIENTATION du cadre, pas
	   la largeur de l'écran. Un slide de téléphone et une tablette tenue
	   droite sont tous deux plus hauts que larges ; c'est ce qui compte pour
	   cadrer une vidéo. Le bloc est positionné en `inset: 0` : sa taille vient
	   du slide, jamais de son contenu, la contention de taille est donc sans
	   effet de bord. */
	container: fhl-bgvideo / size;
}

/* Seuls les contrôles restent cliquables : le reste du slide garde ses
   propres liens et boutons. */
.fhl-bgvideo__sound {
	pointer-events: auto;
}

.fhl-bgvideo__stage {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	/* Unités de conteneur : le calcul « couvrir sans déformer » est exact
	   quelle que soit la taille du slide, là où des vw/vh ne vaudraient que
	   pour un bloc plein écran. */
	container-type: size;
}

.fhl-bgvideo__stage iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Les unités de conteneur peuvent se résoudre à 0 au tout premier calcul
	   de mise en page : l'iframe apparaîtrait alors minuscule avant de se
	   corriger. Ces minimums garantissent qu'elle couvre dès la première
	   image, quelle que soit la valeur des cq*. */
	min-width: 100%;
	min-height: 100%;
	/* Le reset de Hello Elementor pose `iframe { max-width: 100% }` : il
	   plafonnait la largeur « couvrir » à celle du cadre. Vimeo inscrivant la
	   vidéo dans son iframe, il restait des bandes — 15 px en haut et en bas
	   sur un téléphone, 6 px sur desktop. */
	max-width: none;
	max-height: none;
	/* « Couvrir sans déformer », au ratio RÉEL de la vidéo : player.js le pose
	   dans --fhl-bgvideo-ratio dès que Vimeo le donne. 16:9 en attendant. */
	width: max(100cqw, calc(100cqh * var(--fhl-bgvideo-ratio, 1.7778)));
	height: max(100cqh, calc(100cqw / var(--fhl-bgvideo-ratio, 1.7778)));
	border: 0;
	opacity: 0;
	transition: opacity .4s ease;
}

.fhl-bgvideo.is-ready .fhl-bgvideo__stage iframe {
	opacity: 1;
}

/* -- Cadre vertical ------------------------------------------------------- *
 * Une vidéo 16:9 qui COUVRE un slide de téléphone (367 × 717 px) est agrandie
 * 3,5 fois : il n'en reste qu'une bande centrale, le logo et le texte sont
 * tranchés. Dans un cadre plus haut que large, on la montre donc EN ENTIER,
 * centrée, posée sur l'image de repli floutée qui remplit le reste.
 *
 * Exception : une vidéo verticale a été fournie (`is-portrait-source`). Elle
 * est faite pour ce cadre, elle le couvre comme ci-dessus. */
.fhl-bgvideo__backdrop {
	display: none;
}

@container fhl-bgvideo (orientation: portrait) {
	/* L'image de repli est portée en ligne par le bloc : `inherit` la reprend
	   sans la répéter dans le HTML.

	   Débord de 40 % : un flou rend les bords de son calque transparents sur
	   environ trois fois son rayon, soit ~120 px ici. Avec 15 %, l'image NETTE
	   du bloc, dessous, réapparaissait sur les côtés en lettres géantes.

	   Agrandie pour couvrir un cadre vertical, l'image ne montre plus que son
	   centre — sur l'accueil, les lettres du logo. Même floues, elles
	   restaient des masses grises. D'où un flou fort ET un voile Porcelain :
	   il ne reste qu'un champ clair, teinté des couleurs de l'image. */
	.fhl-bgvideo:not(.is-portrait-source) .fhl-bgvideo__backdrop {
		display: block;
		position: absolute;
		inset: -40%;
		background-image: inherit;
		background-position: center;
		background-size: cover;
		filter: blur(40px) saturate(1.2);
	}

	.fhl-bgvideo:not(.is-portrait-source) .fhl-bgvideo__backdrop::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(245 239 230 / 0.6); /* Porcelain Mist */
	}

	/* Image de repli VERTICALE fournie : elle remplit le cadre, nette, sans
	   flou ni voile. Posée sur le calque de fond, elle masque l'image
	   principale du bloc ; la vidéo verticale vient ensuite par-dessus.
	   Elle ne dépend d'aucun script : sans JavaScript, c'est elle qu'on voit.
	   Déclarée APRÈS les règles du flou, à spécificité égale : elle gagne. */
	.fhl-bgvideo.has-portrait-poster .fhl-bgvideo__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background-image: var(--fhl-bgvideo-poster-portrait);
		background-position: center;
		background-size: cover;
		filter: none;
	}

	.fhl-bgvideo.has-portrait-poster .fhl-bgvideo__backdrop::after {
		content: none;
	}

	/* « Contenir » au lieu de « couvrir » : la scène se réduit à la boîte
	   exacte de la vidéo — le plus petit des deux côtés commande — et se
	   centre. Ses unités cq se lisent sur le bloc parent ; celles de l'iframe
	   sur la scène, déjà au bon ratio : la règle générale « couvrir » lui
	   donne donc exactement sa taille, sans rien recadrer.

	   Elle porte l'image nette, à la place de la vidéo, le temps que celle-ci
	   charge : on n'attend pas sur un simple flou. Taillée à la boîte de la
	   vidéo, cette image ne peut pas déborder autour, quel que soit son
	   format. */
	.fhl-bgvideo:not(.is-portrait-source) .fhl-bgvideo__stage {
		inset: auto;
		top: 50%;
		left: 50%;
		width: min(100cqw, calc(100cqh * var(--fhl-bgvideo-ratio, 1.7778)));
		height: min(100cqh, calc(100cqw / var(--fhl-bgvideo-ratio, 1.7778)));
		transform: translate(-50%, -50%);
		background-image: inherit;
		background-position: center;
		background-size: cover;
	}
}

.fhl-bgvideo__overlay {
	position: absolute;
	inset: 0;
	background: var(--fhl-forest-deep, #172B21);
}

.fhl-bgvideo__sound {
	position: absolute;
	right: clamp(1rem, 2vw, 2rem);
	bottom: clamp(1rem, 2vw, 2rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(5, 5, 5, .55);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color .2s ease, transform .2s ease;
}

.fhl-bgvideo__sound:hover {
	background: var(--fhl-orchid-pulse, #FF2E9E);
	transform: scale(1.06);
}

.fhl-bgvideo__sound:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Une seule icône visible à la fois, selon l'état du son. */
.fhl-bgvideo__icon-on,
.fhl-bgvideo.is-unmuted .fhl-bgvideo__icon-off {
	display: none;
}

.fhl-bgvideo.is-unmuted .fhl-bgvideo__icon-on {
	display: block;
}

/* -- Intégration dans Elementor ------------------------------------------- *
 * Le widget enveloppe le bloc : c'est donc le wrapper qui doit se superposer.
 * Le conteneur hôte reçoit les autres widgets en position relative pour qu'ils
 * passent au-dessus de la vidéo, sans recourir à un z-index négatif. */
.elementor-widget-fhl_bg_video,
.elementor-widget-fhl_bg_video > .elementor-widget-container {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
}

.e-con:has(> .elementor-widget-fhl_bg_video) > .elementor-widget:not(.elementor-widget-fhl_bg_video),
.e-con:has(> .elementor-widget-fhl_bg_video) > .e-con,
.e-con:has(> .elementor-element > .elementor-widget-fhl_bg_video) > .e-con {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fhl-bgvideo__sound,
	.fhl-bgvideo__stage iframe {
		transition: none;
	}
}

/* ------------------------------------------------- Metadonnees video ---- */

.fhl-video-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.fhl-video-meta__layer {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fhl-w-medium, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-layer-text, var(--fhl-ink));
}

.fhl-video-meta__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.5rem 0;
	border-block: 1px solid rgba(23, 43, 33, 0.18);
	font-size: 0.95rem;
	color: var(--fhl-ink);
}

.fhl-video-meta__row > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin-right: 0.75rem;
	vertical-align: -0.1em;
	background: rgba(23, 43, 33, 0.25);
}

.fhl-video-meta__duration {
	font-variant-numeric: tabular-nums;
}

.fhl-video-meta__product {
	font-weight: var(--fhl-w-medium, 500);
}

.fhl-video-meta .fhl-card__tags {
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------- Verrou et vide -------- */

.fhl-locked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid rgba(23, 43, 33, 0.15);
	border-radius: var(--fhl-radius-panel);
	background: var(--fhl-paper);
}

.fhl-locked__title {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-muted);
}

.fhl-locked__text {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: var(--fhl-ink);
}

.fhl-locked__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.fhl-empty {
	margin: 0;
	padding: 1.5rem 0;
	color: var(--fhl-muted);
}

/* ------------------------------------------------------------ Comptes ---- */

/* Connexion, inscription, mot de passe, compte.

   Tout est préfixé par .fhl-auth : le reset de Hello Elementor habille les
   champs par sélecteur d'attribut (`input[type=text]`, en 0,1,1), qu'une
   classe seule (0,1,0) ne battrait pas. Même raisonnement que pour les
   boutons, plus haut. */

.fhl-auth {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
	max-width: 44rem;
	color: var(--fhl-ink);
	font-family: var(--fhl-font-body);
	font-weight: var(--fhl-w-regular, 400);
}

/* Un ou deux champs : une colonne étroite se lit mieux. */
.fhl-auth--login,
.fhl-auth--password {
	max-width: 30rem;
}

.fhl-auth *,
.fhl-auth *::before,
.fhl-auth *::after,
.fhl-account * {
	box-sizing: border-box;
}

.fhl-auth__title {
	margin: 0;
	font-family: var(--fhl-font-body);
	font-size: var(--fhl-size-section, 2rem);
	font-weight: var(--fhl-w-light, 100);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fhl-ink);
}

.fhl-auth__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fhl-w-medium, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-muted);
}

.fhl-auth__lead {
	margin: 0;
	font-size: var(--fhl-size-lead, 1.125rem);
	line-height: 1.5;
	color: var(--fhl-ink-soft);
}

.fhl-auth__actions,
.fhl-account__actions,
.fhl-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0;
}

/* Liens de texte : vert de marque, soulignés. Jamais les boutons. */
.fhl-auth a:not(.fhl-btn),
.fhl-account a:not(.fhl-btn) {
	color: var(--fhl-green-text, #2F674A);
	font-weight: var(--fhl-w-medium, 600);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.fhl-auth a:not(.fhl-btn):hover,
.fhl-account a:not(.fhl-btn):hover {
	text-decoration-thickness: 2px;
}

.fhl-auth a:focus-visible,
.fhl-account a:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.fhl-auth .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Formulaire ------------------------------------------------------------ */

.fhl-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
}

.fhl-form__section {
	min-width: 0;
	margin: 0;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid rgba(23, 43, 33, 0.15);
}

/* Flottante, la légende quitte le filet du fieldset, où le navigateur la loge
   sinon. */
.fhl-form__legend {
	float: left;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: var(--fhl-w-medium, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-muted);
}

.fhl-form__legend + * {
	clear: both;
}

.fhl-form__section > .fhl-field,
.fhl-form__section > .fhl-form__grid {
	margin-bottom: 1.25rem;
}

.fhl-form__section > :last-child {
	margin-bottom: 0;
}

/* Deux colonnes quand il y a la place, une seule sur téléphone — sans point
   d'arrêt : c'est la largeur minimale d'un champ qui décide. */
.fhl-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
	align-items: start;
}

.fhl-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.fhl-auth .fhl-field__label {
	display: block;
	font-size: 0.9375rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.3;
	color: var(--fhl-ink);
}

.fhl-field__optional {
	font-weight: var(--fhl-w-regular, 400);
	color: var(--fhl-muted);
}

.fhl-field__hint {
	margin: 0;
	font-size: var(--fhl-size-meta, 0.8125rem);
	line-height: 1.4;
	color: var(--fhl-muted);
}

.fhl-field__error {
	margin: 0;
	font-size: 0.875rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.4;
	color: var(--fhl-danger);
}

.fhl-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.fhl-auth .fhl-input {
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--fhl-field-border);
	border-radius: 10px;
	background: #fff;
	color: var(--fhl-ink);
	font-family: var(--fhl-font-body);
	/* 16 px : en dessous, iOS zoome sur le champ au toucher. */
	font-size: 1rem;
	font-weight: var(--fhl-w-regular, 400);
	line-height: 1.3;
	transition: border-color .15s ease;
}

.fhl-auth .fhl-input:hover {
	border-color: var(--fhl-ink-soft);
}

/* Focus visible à la souris comme au clavier : on vient y écrire. */
.fhl-auth .fhl-input:focus {
	border-color: var(--fhl-ink);
	outline: 3px solid var(--fhl-ink);
	outline-offset: 1px;
}

.fhl-auth .has-error .fhl-input {
	border: 2px solid var(--fhl-danger);
}

.fhl-auth .fhl-input--select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	text-overflow: ellipsis;
	cursor: pointer;
}

.fhl-field__chevron {
	position: absolute;
	right: 1rem;
	display: grid;
	place-items: center;
	color: var(--fhl-ink-soft);
	pointer-events: none;
}

/* Bouton « afficher le mot de passe », dans le champ. */
.fhl-auth .fhl-field__control:has(> .fhl-field__toggle:not([hidden])) .fhl-input {
	padding-right: 5.5rem;
}

.fhl-auth .fhl-field__toggle {
	position: absolute;
	right: 0.4rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.8rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fhl-green-text, #2F674A);
	font-family: var(--fhl-font-body);
	font-size: 0.8125rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1;
	cursor: pointer;
}

/* Le reset du thème met `display: inline-block` sur tout bouton : il
   l'emporterait sur le [hidden] du navigateur. */
.fhl-auth .fhl-field__toggle[hidden] {
	display: none;
}

/* Et il repeint tout bouton au survol et au focus (#c36) : on repose nos
   couleurs dans ces états. */
.fhl-auth .fhl-field__toggle:hover,
.fhl-auth .fhl-field__toggle:focus {
	background: rgba(47, 103, 74, 0.1);
	color: var(--fhl-green-text, #2F674A);
}

.fhl-auth .fhl-field__toggle:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 1px;
}

/* -- Case à cocher --------------------------------------------------------- */

.fhl-check {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.5rem 0.75rem;
}

.fhl-check .fhl-field__error {
	grid-column: 1 / -1;
}

.fhl-auth .fhl-check__input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--fhl-living-green, #2F674A);
	cursor: pointer;
}

.fhl-auth .fhl-check__input:focus-visible {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

.fhl-auth .fhl-check__label {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--fhl-ink);
	cursor: pointer;
}

/* La déclaration « professionnel de santé » : c'est elle qui ouvre l'accès,
   elle a son propre encart. */
.fhl-check--declaration {
	padding: 1rem 1.25rem;
	border-radius: var(--fhl-radius-card);
	background: var(--fhl-paper);
}

.fhl-check--declaration.has-error {
	box-shadow: inset 0 0 0 2px var(--fhl-danger);
}

/* -- Présentation de la plateforme ([fhl_platform_intro]) ------------------- */

/* En tête des pages d'entrée. Le nom en DIN Pro, l'accroche en Bodoni
   italique : le contraste typographique qui signe la marque, déjà employé par
   « INJECTING / through the layers » sur l'accueil. */
.fhl-intro {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	color: var(--fhl-ink);
	font-family: var(--fhl-font-body);
	/* Posée, pas héritée : le body est en 300, que DIN Pro ne possède pas — le
	   texte retombait sur le Light, trop pâle. */
	font-weight: var(--fhl-w-regular, 400);
}

.fhl-intro__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fhl-w-medium, 600);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fhl-ink-soft);
}

.fhl-intro__title {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	margin: 0;
	font-family: var(--fhl-font-body);
	font-size: clamp(2.25rem, 4vw, 3.75rem); /* 60px */
	font-weight: var(--fhl-w-bold, 700);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fhl-ink);
}

.fhl-intro__tagline {
	font-family: var(--fhl-font-display);
	font-optical-sizing: auto;
	font-size: 0.6em;
	font-style: italic;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--fhl-living-green, #2F674A);
}

.fhl-intro__lead {
	margin: 0.35rem 0 0;
	font-size: var(--fhl-size-lead, 1.25rem);
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.35;
}

.fhl-intro__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fhl-ink-soft);
}

/* -- Pied de formulaire ---------------------------------------------------- */

.fhl-auth .fhl-form__submit {
	min-height: 3rem;
	padding-inline: 2rem;
	font-size: 0.9375rem;
}

.fhl-form__link {
	font-size: 0.875rem;
}

.fhl-form__privacy {
	margin: 0;
	font-size: var(--fhl-size-meta, 0.8125rem);
	line-height: 1.5;
	color: var(--fhl-muted);
}

.fhl-auth__switch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(23, 43, 33, 0.15);
}

.fhl-auth__switch-text {
	margin: 0;
	line-height: 1.5;
	color: var(--fhl-ink-soft);
}

/* Piège à robots : hors de l'écran, pas `display: none` — certains robots
   savent ignorer un champ masqué ainsi. */
.fhl-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- Messages -------------------------------------------------------------- */

.fhl-alert {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--fhl-ink);
	border-radius: 0 var(--fhl-radius-card) var(--fhl-radius-card) 0;
	color: var(--fhl-ink);
}

.fhl-alert p {
	margin: 0;
	line-height: 1.5;
}

/* Le résumé d'erreurs reçoit le focus au chargement : on montre où l'on est. */
.fhl-alert:focus {
	outline: 3px solid var(--fhl-ink);
	outline-offset: 2px;
}

.fhl-alert__title {
	font-size: 1rem;
	font-weight: var(--fhl-w-medium, 600);
}

.fhl-alert__list {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.5;
}

.fhl-alert--error {
	border-left-color: var(--fhl-danger);
	background: #FCEDEC;
}

.fhl-auth .fhl-alert--error a {
	color: var(--fhl-danger);
}

.fhl-alert--success {
	border-left-color: var(--fhl-living-green, #2F674A);
	background: #EAF3EE;
}

.fhl-alert--info {
	border-left-color: var(--fhl-blue-text, #007785);
	background: #E6F4F6;
}

/* -- Bloc « mon compte » ---------------------------------------------------- */

.fhl-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(23, 43, 33, 0.15);
	border-radius: 16px;
	background: var(--fhl-paper);
	color: var(--fhl-ink);
	font-family: var(--fhl-font-body);
}

.fhl-account__identity {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

/* Sur le fond Porcelain, le gris « muted » ne fait que 4,1:1 : on prend le
   ton plus soutenu. */
.fhl-account__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fhl-w-medium, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fhl-ink-soft);
}

.fhl-account__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: var(--fhl-w-medium, 600);
	line-height: 1.2;
}

.fhl-account__email,
.fhl-account__situation {
	margin: 0;
	color: var(--fhl-ink-soft);
	overflow-wrap: anywhere;
}

.fhl-account__situation {
	font-size: var(--fhl-size-meta, 0.8125rem);
}

.fhl-account__notice {
	flex-basis: 100%;
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--fhl-danger);
	background: #FCEDEC;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.fhl-auth .fhl-input {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fhl-card,
	.fhl-card::before,
	.fhl-card__play,
	.fhl-card__dismiss,
	.fhl-layer__arrow,
	.fhl-chip,
	.fhl-carousel__btn {
		transition: none;
	}
}