/* Balio Hero Slider — styles publics */

.bhs {
	/* Le slider est un conteneur fermé : tout dépassement d'un descendant
	   (agrandissement d'un bouton au survol, ombre, contour de focus) est
	   découpé ici et ne peut donc jamais ajouter de barre de défilement à la
	   page, ni horizontale ni verticale. */
	overflow: hidden;
	/* Conteneur de requête : les unités cqw ci-dessous se calculent sur la
	   largeur du slider, pas sur celle de la fenêtre. Le composant s'adapte donc
	   correctement qu'il soit pleine largeur, en colonne ou dans un aperçu. */
	container-type: inline-size;
	--bhs-height: 620px;
	--bhs-height-m: 460px;
	--bhs-max: 1400px;
	--bhs-radius: 0px;
	--bhs-content: 620px;
	--bhs-speed: 800ms;
	--bhs-delay: 6000ms;
	--bhs-ink: #ffffff;
	position: relative;
	box-sizing: border-box;
}

.bhs *,
.bhs *::before,
.bhs *::after {
	box-sizing: border-box;
}

.bhs--full {
	/* --bhs-vw est posée en JavaScript et vaut documentElement.clientWidth,
	   c'est-à-dire la largeur de la fenêtre SANS la barre de défilement.
	   100vw, lui, l'inclut : c'est ce qui créait un débordement horizontal. */
	width: var( --bhs-vw, 100% );
	max-width: var( --bhs-vw, 100% );
	margin-left: calc( 50% - var( --bhs-vw, 100% ) / 2 );
	margin-right: calc( 50% - var( --bhs-vw, 100% ) / 2 );
}

.bhs--boxed {
	max-width: var(--bhs-max);
	margin-left: auto;
	margin-right: auto;
}

.bhs__viewport {
	position: relative;
	height: var(--bhs-h-cur, var(--bhs-height));
	overflow: hidden;
	border-radius: var(--bhs-radius);
	background: #0a0d14;
	isolation: isolate;
}

/* --- Slides ------------------------------------------------------------ */

.bhs__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	will-change: opacity, transform;
}

.bhs__slide.is-active,
.bhs__slide.is-leaving {
	visibility: visible;
}

.bhs__slide.is-active {
	z-index: 2;
}

.bhs__slide.is-leaving {
	z-index: 1;
}

.bhs__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	transform-origin: center;
}

.bhs__bg--desktop {
	display: var(--bhs-bg-d, block);
}

.bhs__bg--mobile {
	display: var(--bhs-bg-m, none);
}

.bhs__overlay {
	position: absolute;
	inset: 0;
	background: #05070c;
	pointer-events: none;
}

.bhs__inner {
	position: relative;
	z-index: 3;
	height: 100%;
	max-width: var(--bhs-max);
	margin: 0 auto;
	padding: var(--bhs-inner-pad, clamp(20px, 4cqw, 60px));
	display: flex;
}

.bhs__content {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.5cqw, 18px);
	max-width: var(--bhs-content-cur, var(--bhs-content));
	color: var(--bhs-ink);
	text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
	/* Chaque valeur accepte une surcharge mobile (--bhs-m-a-*) posée sur le
	   slider, sinon elle suit la classe d'alignement du slide. */
	align-items: var(--bhs-m-a-items, var(--bhs-a-items, flex-start));
	text-align: var(--bhs-m-a-text, var(--bhs-a-text, left));
	margin-left: var(--bhs-m-a-ml, var(--bhs-a-ml, 0));
	margin-right: var(--bhs-m-a-mr, var(--bhs-a-mr, auto));
}

.bhs__content--left {
	--bhs-a-items: flex-start;
	--bhs-a-text: left;
	--bhs-a-ml: 0;
	--bhs-a-mr: auto;
}

.bhs__content--center {
	--bhs-a-items: center;
	--bhs-a-text: center;
	--bhs-a-ml: auto;
	--bhs-a-mr: auto;
}

.bhs__content--right {
	--bhs-a-items: flex-end;
	--bhs-a-text: right;
	--bhs-a-ml: auto;
	--bhs-a-mr: 0;
}

.bhs__content--v-top {
	align-self: flex-start;
}

.bhs__content--v-middle {
	align-self: center;
}

.bhs__content--v-bottom {
	align-self: flex-end;
	padding-bottom: 18px;
}

.bhs__logo {
	display: block;
	width: 100%;
	max-width: calc(var(--bhs-logo-w, 360px) * var(--bhs-scale, 1));
	height: auto;
	filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5));
}

.bhs__title {
	margin: 0;
	font-size: calc(clamp(1.5rem, 3.4cqw, 2.9rem) * var(--bhs-scale, 1));
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.01em;
}

.bhs__text {
	margin: 0;
	display: var(--bhs-text-display, block);
	font-size: calc(clamp(.95rem, 1.35cqw, 1.15rem) * var(--bhs-scale, 1));
	line-height: 1.5;
	max-width: 62ch;
}

.bhs__text p {
	margin: 0 0 .5em;
}

.bhs__text p:last-child {
	margin-bottom: 0;
}

/* --- Plateformes ------------------------------------------------------- */

.bhs__platforms {
	--bhs-plat-h: 34px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: var(--bhs-plat-display, flex);
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(10px, 1.6cqw, 22px);
}

.bhs__platform {
	margin: 0;
	display: flex;
}

.bhs__platform img {
	/* Une hauteur en style inline sur l'image l'emporte sur cette valeur
	   commune : c'est le réglage individuel de la ligne.
	   Aucune limite de largeur : la hauteur seule pilote la taille, et un logo
	   très horizontal (Steam, Epic Games) garde ses proportions. */
	height: calc(var(--bhs-plat-h-row, var(--bhs-plat-h, 34px)) * var(--bhs-scale, 1));
	width: auto;
	max-width: none;
	display: block;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

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

.bhs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
	max-width: 100%;
}

.bhs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	flex: var( --bhs-btn-flex, 0 1 auto );
	padding: var( --bhs-btn-py, .85em ) var( --bhs-btn-px, 1.6em );
	border: var( --bhs-btn-border, 2px ) solid transparent;
	border-radius: var( --bhs-btn-radius, 4px );
	font-weight: var( --bhs-btn-weight, 700 );
	font-size: calc( var( --bhs-btn-fs, 1rem ) * var( --bhs-scale, 1 ) );
	text-transform: var( --bhs-btn-case, none );
	letter-spacing: var( --bhs-btn-ls, 0 );
	line-height: 1;
	text-decoration: none;
	text-shadow: none;
	transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.bhs__btn--primary {
	background: var( --bhs-btn1-bg, #ffffff );
	color: var( --bhs-btn1-fg, #10131a );
	border-color: var( --bhs-btn1-bg, #ffffff );
}

.bhs__btn--primary:hover,
.bhs__btn--primary:focus-visible {
	background: var( --bhs-btn1-bg-h, #e9edf5 );
	border-color: var( --bhs-btn1-bg-h, #e9edf5 );
	color: var( --bhs-btn1-fg-h, #10131a );
}

.bhs__btn--ghost {
	display: var( --bhs-btn2-display, inline-flex );
	background: transparent;
	color: var( --bhs-btn2-fg, #ffffff );
	border-color: var( --bhs-btn2-bd, #ffffff );
}

.bhs__btn--ghost:hover,
.bhs__btn--ghost:focus-visible {
	background: var( --bhs-btn2-bg-h, #ffffff );
	border-color: var( --bhs-btn2-bg-h, #ffffff );
	color: var( --bhs-btn2-fg-h, #10131a );
}

/* Effet au survol, choisi dans les réglages.
   Aucun de ces effets ne modifie la largeur occupée dans le flux : la
   transformation est purement visuelle et ne peut pas déclencher de
   défilement horizontal. */
.bhs__slide[data-btn-hover="lift"] .bhs__btn:hover,
.bhs__slide[data-btn-hover="lift"] .bhs__btn:focus-visible {
	transform: translateY(-2px);
}

.bhs__slide[data-btn-hover="scale"] .bhs__btn:hover,
.bhs__slide[data-btn-hover="scale"] .bhs__btn:focus-visible {
	transform: scale(1.04);
}

.bhs__slide[data-btn-hover="glow"] .bhs__btn:hover,
.bhs__slide[data-btn-hover="glow"] .bhs__btn:focus-visible {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .22);
}

/* --- Pastille de promotion --------------------------------------------- */

.bhs__promo {
	--bhs-promo-bg: #e5093f;
	--bhs-promo-fg: #ffffff;
	/* --bhs-promo-w0 est la taille choisie sur le slide ; --bhs-promo-w est la
	   taille réellement appliquée, plafonnée sur petit écran. Toutes les autres
	   mesures (texte, marge intérieure, arrondi) en découlent, donc un seul
	   réglage suffit à redimensionner la pastille sans la déformer. */
	--bhs-promo-w: min(var(--bhs-promo-w0, 120px), var(--bhs-promo-cap, 9999px));
	position: absolute;
	z-index: 4;
	display: var(--bhs-promo-display, flex);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--bhs-promo-w) * .02);
	width: var(--bhs-promo-w);
	aspect-ratio: 1;
	border-radius: 50%;
	padding: calc(var(--bhs-promo-w) * .09);
	background: var(--bhs-promo-bg);
	color: var(--bhs-promo-fg);
	text-align: center;
	text-shadow: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	/* La rotation passe par une variable : les animations doivent la conserver,
	   sinon la pastille se redresserait pendant l'animation. */
	--bhs-promo-rot: -8deg;
	transform: rotate(var(--bhs-promo-rot));
}

.bhs__promo::after {
	content: "";
	position: absolute;
	inset: calc(var(--bhs-promo-w) * .05);
	border-radius: inherit;
	border: 1px solid currentColor;
	opacity: .45;
	pointer-events: none;
}

.bhs__promo-main {
	font-size: calc(var(--bhs-promo-w) * .21);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
}

.bhs__promo-sub {
	font-size: calc(var(--bhs-promo-w) * .085);
	font-weight: 600;
	line-height: 1.15;
	opacity: .92;
}

/* Position dans le slide */

.bhs__promo--top-right {
	top: clamp(14px, 3cqw, 42px);
	right: clamp(14px, 3cqw, 42px);
}

.bhs__promo--top-left {
	top: clamp(14px, 3cqw, 42px);
	left: clamp(14px, 3cqw, 42px);
}

.bhs__promo--bottom-right {
	bottom: clamp(14px, 3cqw, 42px);
	right: clamp(14px, 3cqw, 42px);
}

.bhs__promo--bottom-left {
	bottom: clamp(14px, 3cqw, 42px);
	left: clamp(14px, 3cqw, 42px);
}

/* Variante « dans le texte » : seule la mise en flux change, la forme reste
   celle choisie sur le slide. */
.bhs__promo--inline {
	position: static;
	--bhs-promo-rot: 0deg;
	transform: none;
	box-shadow: none;
}

/* --- Formes de la pastille --------------------------------------------- */

.bhs__promo--shape-circle {
	aspect-ratio: 1;
	border-radius: 50%;
}

.bhs__promo--shape-square {
	aspect-ratio: 1;
	border-radius: calc(var(--bhs-promo-w) * .12);
}

.bhs__promo--shape-tag {
	aspect-ratio: 1;
	border-radius: calc(var(--bhs-promo-w) * .12) calc(var(--bhs-promo-w) * .12) calc(var(--bhs-promo-w) * .12) 0;
}

/* Les formes découpées ne peuvent porter ni ombre ni liseré : le découpage
   supprime tout ce qui déborde de la silhouette. */
.bhs__promo--shape-diamond,
.bhs__promo--shape-star,
.bhs__promo--shape-burst {
	aspect-ratio: 1;
	border-radius: 0;
	box-shadow: none;
}

.bhs__promo--shape-diamond::after,
.bhs__promo--shape-star::after,
.bhs__promo--shape-burst::after {
	display: none;
}

.bhs__promo--shape-diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	padding: calc(var(--bhs-promo-w) * .2);
}

.bhs__promo--shape-star {
	clip-path: polygon(50% 0%, 61% 33%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 33%);
	padding: calc(var(--bhs-promo-w) * .28) calc(var(--bhs-promo-w) * .16) calc(var(--bhs-promo-w) * .22);
}

.bhs__promo--shape-burst {
	clip-path: polygon(50% 0%, 59% 11%, 71% 4%, 75% 18%, 89% 15%, 88% 30%, 100% 33%, 92% 45%, 100% 57%, 88% 64%, 93% 78%, 79% 80%, 79% 94%, 66% 89%, 58% 100%, 50% 90%, 42% 100%, 34% 89%, 21% 94%, 21% 80%, 7% 78%, 12% 64%, 0% 57%, 8% 45%, 0% 33%, 12% 30%, 11% 15%, 25% 18%, 29% 4%, 41% 11%);
	padding: calc(var(--bhs-promo-w) * .22);
}

/* Formes en flux : la largeur suit le contenu, la taille pilote le texte. */
.bhs__promo--shape-pill,
.bhs__promo--shape-banner {
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	flex-direction: row;
	gap: calc(var(--bhs-promo-w) * .07);
	padding: calc(var(--bhs-promo-w) * .06) calc(var(--bhs-promo-w) * .13);
}

.bhs__promo--shape-pill {
	border-radius: 999px;
}

.bhs__promo--shape-banner {
	border-radius: calc(var(--bhs-promo-w) * .035);
}

.bhs__promo--shape-pill .bhs__promo-sub,
.bhs__promo--shape-banner .bhs__promo-sub {
	font-size: calc(var(--bhs-promo-w) * .095);
	opacity: .85;
}

/* --- Navigation -------------------------------------------------------- */

.bhs__arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	transform: translateY(-50%);
	width: var(--bhs-arrow-size, 46px);
	height: var(--bhs-arrow-size, 46px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 13, 20, .45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color 150ms ease;
}

.bhs__arrow:hover,
.bhs__arrow:focus-visible {
	background: rgba(10, 13, 20, .8);
}

.bhs__arrow svg {
	width: 22px;
	height: 22px;
}

.bhs__arrow--prev {
	left: clamp(8px, 1.5cqw, 20px);
}

.bhs__arrow--next {
	right: clamp(8px, 1.5cqw, 20px);
}

.bhs__dots {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: flex;
	gap: 9px;
}

.bhs__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background-color 150ms ease, width 200ms ease;
}

.bhs__dot.is-active {
	width: 28px;
	border-radius: 6px;
	background: #ffffff;
}

.bhs__dots--thumbs {
	--bhs-thumb-w: 110px;
	bottom: 16px;
	gap: 8px;
	max-width: calc(100% - 32px);
	flex-wrap: wrap;
	justify-content: center;
}

.bhs__dots--thumbs .bhs__dot {
	width: var(--bhs-thumb-w);
	height: auto;
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 5px;
	background: rgba(10, 13, 20, .55);
	opacity: .7;
	transition: opacity 160ms ease, border-color 160ms ease;
}

.bhs__dots--thumbs .bhs__dot:hover,
.bhs__dots--thumbs .bhs__dot:focus-visible {
	opacity: 1;
}

.bhs__dots--thumbs .bhs__dot.is-active {
	width: var(--bhs-thumb-w);
	border-radius: 5px;
	background: transparent;
	border-color: #ffffff;
	opacity: 1;
}

.bhs__dots--thumbs .bhs__dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bhs__thumb-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
}

.bhs__progress {
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .18);
}

.bhs__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: #ffffff;
}

.bhs .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.bhs :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* --- Effets de transition ---------------------------------------------- */

/* Fondu */
.bhs[data-effect="fade"] .bhs__slide,
.bhs[data-effect="kenburns"] .bhs__slide {
	opacity: 0;
	transition: opacity var(--bhs-speed) ease;
}

.bhs[data-effect="fade"] .bhs__slide.is-active,
.bhs[data-effect="kenburns"] .bhs__slide.is-active {
	opacity: 1;
}

/* Ken Burns : fondu + zoom lent de l'image de fond */
.bhs[data-effect="kenburns"] .bhs__slide.is-active .bhs__bg {
	animation: bhs-kenburns calc(var(--bhs-delay) + var(--bhs-speed) * 2) linear forwards;
}

@keyframes bhs-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* Zoom */
.bhs[data-effect="zoom"] .bhs__slide {
	opacity: 0;
	transform: scale(1.1);
	transition: opacity var(--bhs-speed) ease, transform var(--bhs-speed) cubic-bezier(.22, .7, .3, 1);
}

.bhs[data-effect="zoom"] .bhs__slide.is-active {
	opacity: 1;
	transform: scale(1);
}

.bhs[data-effect="zoom"] .bhs__slide.is-leaving {
	opacity: 0;
	transform: scale(.95);
}

/* Glissement horizontal */
.bhs[data-effect="slide"] .bhs__slide {
	transform: translateX(100%);
	transition: transform var(--bhs-speed) cubic-bezier(.65, .05, .25, 1);
}

.bhs[data-effect="slide"] .bhs__slide.is-active {
	transform: translateX(0);
}

.bhs[data-effect="slide"] .bhs__slide.is-leaving {
	transform: translateX(-100%);
}

.bhs[data-effect="slide"][data-dir="prev"] .bhs__slide {
	transform: translateX(-100%);
}

.bhs[data-effect="slide"][data-dir="prev"] .bhs__slide.is-active {
	transform: translateX(0);
}

.bhs[data-effect="slide"][data-dir="prev"] .bhs__slide.is-leaving {
	transform: translateX(100%);
}

/* Glissement vertical */
.bhs[data-effect="slide-up"] .bhs__slide {
	transform: translateY(100%);
	transition: transform var(--bhs-speed) cubic-bezier(.65, .05, .25, 1);
}

.bhs[data-effect="slide-up"] .bhs__slide.is-active {
	transform: translateY(0);
}

.bhs[data-effect="slide-up"] .bhs__slide.is-leaving {
	transform: translateY(-100%);
}

.bhs[data-effect="slide-up"][data-dir="prev"] .bhs__slide {
	transform: translateY(-100%);
}

.bhs[data-effect="slide-up"][data-dir="prev"] .bhs__slide.is-active {
	transform: translateY(0);
}

.bhs[data-effect="slide-up"][data-dir="prev"] .bhs__slide.is-leaving {
	transform: translateY(100%);
}

/* Apparition du contenu du slide actif */
.bhs.is-ready .bhs__slide .bhs__logo,
.bhs.is-ready .bhs__slide .bhs__title,
.bhs.is-ready .bhs__slide .bhs__text,
.bhs.is-ready .bhs__slide .bhs__platforms,
.bhs.is-ready .bhs__slide .bhs__actions {
	opacity: 0;
	transform: translateY(14px);
}

.bhs.is-ready .bhs__slide.is-active .bhs__logo,
.bhs.is-ready .bhs__slide.is-active .bhs__title,
.bhs.is-ready .bhs__slide.is-active .bhs__text,
.bhs.is-ready .bhs__slide.is-active .bhs__platforms,
.bhs.is-ready .bhs__slide.is-active .bhs__actions {
	animation: bhs-rise 620ms cubic-bezier(.2, .7, .3, 1) forwards;
}

.bhs.is-ready .bhs__slide.is-active .bhs__title { animation-delay: 90ms; }
.bhs.is-ready .bhs__slide.is-active .bhs__text { animation-delay: 180ms; }
.bhs.is-ready .bhs__slide.is-active .bhs__platforms { animation-delay: 260ms; }
.bhs.is-ready .bhs__slide.is-active .bhs__actions { animation-delay: 340ms; }

@keyframes bhs-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Mobile ------------------------------------------------------------ */

/* Aucune règle figée ici : le comportement mobile est piloté par les variables
   ci-dessus, dont les valeurs sont posées par le bloc <style> généré avec le
   slider. Le point de rupture et chaque réglage sont donc configurables, et
   l'aperçu de l'administration peut appliquer exactement les mêmes valeurs. */

/* --- Accessibilité : mouvement réduit ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bhs .bhs__slide,
	.bhs .bhs__btn {
		transition-duration: 1ms !important;
	}

	.bhs .bhs__slide.is-active .bhs__bg,
	.bhs .bhs__btn,
	.bhs .bhs__btn::after,
	.bhs .bhs__promo,
	.bhs.is-ready .bhs__slide.is-active .bhs__logo,
	.bhs.is-ready .bhs__slide.is-active .bhs__title,
	.bhs.is-ready .bhs__slide.is-active .bhs__text,
	.bhs.is-ready .bhs__slide.is-active .bhs__platforms,
	.bhs.is-ready .bhs__slide.is-active .bhs__actions {
		animation: none !important;
	}

	.bhs.is-ready .bhs__slide .bhs__logo,
	.bhs.is-ready .bhs__slide .bhs__title,
	.bhs.is-ready .bhs__slide .bhs__text,
	.bhs.is-ready .bhs__slide .bhs__platforms,
	.bhs.is-ready .bhs__slide .bhs__actions {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------- */
/*  Animations d'attention : boutons d'action et pastille de réduction     */
/*                                                                        */
/*  Elles ne jouent que sur le slide affiché, pour ne pas faire tourner    */
/*  d'animations sur des slides invisibles.                               */
/* ---------------------------------------------------------------------- */

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

.bhs__slide[data-btn-anim="pulse"].is-active .bhs__btn--primary,
.bhs__slide[data-btn-anim="pulse"][data-btn-anim-all="1"].is-active .bhs__btn {
	animation: bhs-btn-pulse var( --bhs-btn-anim-dur, 2.4s ) ease-in-out infinite;
}

.bhs__slide[data-btn-anim="bounce"].is-active .bhs__btn--primary,
.bhs__slide[data-btn-anim="bounce"][data-btn-anim-all="1"].is-active .bhs__btn {
	animation: bhs-btn-bounce var( --bhs-btn-anim-dur, 2.4s ) ease-in-out infinite;
}

.bhs__slide[data-btn-anim="glow"].is-active .bhs__btn--primary,
.bhs__slide[data-btn-anim="glow"][data-btn-anim-all="1"].is-active .bhs__btn {
	animation: bhs-btn-glow var( --bhs-btn-anim-dur, 2.4s ) ease-in-out infinite;
}

/* L'animation reprend la propriété transform : on la coupe au survol pour
   laisser l'effet de survol choisi dans les réglages s'exprimer. */
.bhs__slide[data-btn-anim] .bhs__btn:hover,
.bhs__slide[data-btn-anim] .bhs__btn:focus-visible {
	animation: none;
}

/* Reflet balayant : un pseudo-élément glisse sur le bouton. */
.bhs__slide[data-btn-anim="shine"] .bhs__btn--primary,
.bhs__slide[data-btn-anim="shine"][data-btn-anim-all="1"] .bhs__btn {
	position: relative;
	overflow: hidden;
}

.bhs__slide[data-btn-anim="shine"].is-active .bhs__btn--primary::after,
.bhs__slide[data-btn-anim="shine"][data-btn-anim-all="1"].is-active .bhs__btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	pointer-events: none;
	/* Le reflet est construit à partir de la couleur du texte : il reste
	   visible aussi bien sur un bouton clair que sur un bouton sombre. */
	background: linear-gradient(100deg, transparent, rgba(128, 128, 128, .35), transparent);
	background: linear-gradient(100deg, transparent, color-mix(in srgb, currentColor 24%, transparent), transparent);
	animation: bhs-btn-shine var( --bhs-btn-anim-dur, 2.4s ) ease-in-out infinite;
}

@keyframes bhs-btn-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}

@keyframes bhs-btn-bounce {
	0%, 55%, 100% { transform: translateY(0); }
	28%           { transform: translateY(-5px); }
	40%           { transform: translateY(-2px); }
}

@keyframes bhs-btn-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
	50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, .18); }
}

@keyframes bhs-btn-shine {
	0%        { transform: translateX(-160%) skewX(-18deg); }
	55%, 100% { transform: translateX(340%) skewX(-18deg); }
}

/* --- Pastille de réduction --------------------------------------------- */

.bhs[data-promo-anim="pulse"] .bhs__slide.is-active .bhs__promo {
	animation: bhs-promo-pulse var( --bhs-promo-anim-dur, 2.2s ) ease-in-out infinite;
}

.bhs[data-promo-anim="swing"] .bhs__slide.is-active .bhs__promo {
	animation: bhs-promo-swing var( --bhs-promo-anim-dur, 2.2s ) ease-in-out infinite;
}

.bhs[data-promo-anim="beat"] .bhs__slide.is-active .bhs__promo {
	animation: bhs-promo-beat var( --bhs-promo-anim-dur, 2.2s ) ease-in-out infinite;
}

.bhs[data-promo-anim="glow"] .bhs__slide.is-active .bhs__promo {
	animation: bhs-promo-glow var( --bhs-promo-anim-dur, 2.2s ) ease-in-out infinite;
}

.bhs[data-promo-anim="pop"] .bhs__slide.is-active .bhs__promo {
	animation: bhs-promo-pop 620ms cubic-bezier(.2, 1.5, .4, 1) both;
	animation-delay: 200ms;
}

@keyframes bhs-promo-pulse {
	0%, 100% { transform: rotate(var(--bhs-promo-rot)) scale(1); }
	50%      { transform: rotate(var(--bhs-promo-rot)) scale(1.07); }
}

@keyframes bhs-promo-swing {
	0%, 100% { transform: rotate(calc(var(--bhs-promo-rot) - 5deg)); }
	50%      { transform: rotate(calc(var(--bhs-promo-rot) + 5deg)); }
}

@keyframes bhs-promo-beat {
	0%, 62%, 100% { transform: rotate(var(--bhs-promo-rot)) scale(1); }
	12%           { transform: rotate(var(--bhs-promo-rot)) scale(1.14); }
	26%           { transform: rotate(var(--bhs-promo-rot)) scale(.97); }
	40%           { transform: rotate(var(--bhs-promo-rot)) scale(1.06); }
}

@keyframes bhs-promo-glow {
	0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
	50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 12px rgba(255, 255, 255, .14); }
}

@keyframes bhs-promo-pop {
	from { transform: rotate(var(--bhs-promo-rot)) scale(0); opacity: 0; }
	to   { transform: rotate(var(--bhs-promo-rot)) scale(1); opacity: 1; }
}