/* ============================================================
   CK — Défilement horizontal sur conteneur Elementor
   Structure injectée en JS (front) :
     .ck-hscroll--active > … > .ck-hs__sticky > .ck-hs__viewport > .ck-hs__track > [éléments]
   ============================================================ */

.ck-hscroll--active {
	--ck-hs-visible: 3;   /* nb d'éléments visibles (réglable/responsive) */
	--ck-hs-step:    50;  /* % hauteur d'écran pour avancer d'un élément */
	--ck-hs-snap:    1;   /* 1 = aligne sur les éléments, 0 = libre */
	--ck-hs-pin-h:   100; /* hauteur de l'écran figé en vh (100 = plein écran, < 100 = bandeau) */
	--ck-hs-dim:     20;  /* opacité (%) des sections .ck-hs-fade pendant le défilement (100 = aucune atténuation) */
	--ck-hs-pad:     40;  /* marge d'accroche début/fin, en % de la hauteur d'écran (la 1re/dernière slide tient) */
	--ck-hs-blur:    4;   /* flou (px) des slides inactives (0 = aucun) */
	--ck-hs-ind-color: #d85a36; /* couleur de l'indicateur */
	--ck-hs-item-w:  360px; /* largeur d'un élément (recalculée en JS = largeur/visible) */
}

/* Conteneur emballé (front) : on neutralise flex/centrage/padding pour que le
   sticky démarre bien en HAUT et pleine largeur → pin net, sans dérive verticale
   avant l'accroche. (.ck-hs--wrapped n'est posée qu'après emballage, pas en éditeur.) */
.ck-hs--wrapped,
.ck-hs--wrapped > .e-con-inner {
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Slides marquées : opacité + flou pilotés en JS, synchronisés à l'easing du
   mouvement (PAS de transition CSS ici — elle traînerait derrière et rendrait
   le fondu sale). On aide juste le compositeur. */
.ck-hs-fade {
	will-change: opacity, filter;
}

/* ===== Indicateur (traits verticaux, l'actif en évidence) — tout en variables ===== */
.ck-hs__dots {
	position: absolute;
	top: 50%;
	right: var(--ck-hs-ind-edge, 22px);
	left: auto;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ck-hs-ind-gap, 9px);
	margin: 0;
	padding: 0;
	z-index: 5;
}
.ck-hscroll--active.ck-hs-ind-left .ck-hs__dots { right: auto; left: var(--ck-hs-ind-edge, 22px); align-items: flex-start; }
.ck-hscroll--active.ck-hs-ind-off  .ck-hs__dots { display: none; }
/* Reset fort : le <button> ne doit RIEN hériter du thème (hauteur/padding/min-*
   qui transformeraient le trait fin en gros bloc). D'où les !important. */
.ck-hs__dot {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: block !important;
	width: var(--ck-hs-ind-w, 16px) !important;
	height: var(--ck-hs-ind-h, 2px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	line-height: 0 !important;
	box-shadow: none !important;
	background: var(--ck-hs-ind-color-off, var(--ck-hs-ind-color, #d85a36)) !important;
	opacity: var(--ck-hs-ind-op-off, 0.3);
	cursor: pointer;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, background-color 0.35s ease;
}
.ck-hs__dot:hover { opacity: 0.65; }
.ck-hs__dot.is-active {
	width: var(--ck-hs-ind-w-active, 30px) !important;
	background: var(--ck-hs-ind-color, #d85a36) !important;
	opacity: 1;
}

/* ===== Flèches de navigation (optionnelles) — tout en variables ===== */
.ck-hs__arrow {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ck-hs-arrow-size, 52px) !important;
	height: var(--ck-hs-arrow-size, 52px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	border-radius: var(--ck-hs-arrow-radius, 50%);
	border: 1px solid var(--ck-hs-arrow-border, rgba(0, 0, 0, 0.08));
	background-color: var(--ck-hs-arrow-bg, rgba(255, 255, 255, 0.9));
	color: var(--ck-hs-arrow-color, #18181b);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	z-index: 6;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, visibility 0.25s;
}
.ck-hs__arrow--prev { left: var(--ck-hs-arrow-edge, 24px); }
.ck-hs__arrow--next { right: var(--ck-hs-arrow-edge, 24px); }
.ck-hs__arrow:hover { background-color: var(--ck-hs-arrow-bg-hover, #fff); transform: translateY(-50%) scale(1.07); }
/* Flèche désactivée (début / fin) = totalement masquée, pas juste grisée. */
.ck-hs__arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; box-shadow: none; }
.ck-hs__arrow svg { width: calc(var(--ck-hs-arrow-size, 52px) * 0.42); height: calc(var(--ck-hs-arrow-size, 52px) * 0.42); }
/* Évite le chevauchement flèche ↔ indicateur du même côté. */
.ck-hs-arrows--on.ck-hs-ind-right .ck-hs__dots { right: calc(var(--ck-hs-arrow-edge, 24px) + var(--ck-hs-arrow-size, 52px) + 14px); }
.ck-hs-arrows--on.ck-hs-ind-left  .ck-hs__dots { left: calc(var(--ck-hs-arrow-edge, 24px) + var(--ck-hs-arrow-size, 52px) + 14px); }

.ck-hs__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%; /* la largeur réelle (découpe plein écran) est posée en JS */
}
/* Écran figé à hauteur réglable (< 100vh) : bandeau de --ck-hs-pin-h (vh)
   calé au milieu de l'écran (--ck-hs-sticky-top posée en JS). */
.ck-hs--band .ck-hs__sticky {
	height: calc(var(--ck-hs-pin-h, 100) * 1vh);
	top: var(--ck-hs-sticky-top, 0px);
}

.ck-hs__viewport {
	width: 100%;
	overflow: hidden;
}
.ck-hs__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}
/* Chaque élément du conteneur prend la largeur calculée (= viewport / visible).
   !important car Elementor impose une largeur/flex sur .elementor-widget /
   .elementor-element (plus spécifique) qui écraserait sinon notre flex-basis. */
.ck-hs__track > * {
	flex: 0 0 var(--ck-hs-item-w) !important;
	width: var(--ck-hs-item-w) !important;
	max-width: var(--ck-hs-item-w) !important;
	margin: 0 !important; /* neutralise les marges Elementor qui fausseraient la largeur */
}

/* Repli statique : tout tient à l'écran, éditeur, ou mouvement réduit → scroll natif. */
.ck-hscroll--active.ck-hs--static .ck-hs__sticky {
	position: relative;
	height: auto;
	overflow: visible;
}
.ck-hscroll--active.ck-hs--static .ck-hs__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.ck-hscroll--active.ck-hs--static .ck-hs__track { transform: none !important; }

/* ============================================================
   Aperçu ÉDITEUR — pas de scroll-jack (il se battrait avec l'éditeur :
   ressorts / sauts). On montre les slides en ligne horizontale, défilables,
   pour voir la composition et pouvoir éditer. Le vrai effet = bouton Aperçu.
   ============================================================ */
.elementor-editor-active .ck-hscroll--active,
.elementor-editor-active .ck-hscroll--active > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	align-items: stretch !important;
}
/* Slides pleinement visibles et nettes en édition (pas d'atténuation/flou). */
.elementor-editor-active .ck-hs-fade {
	opacity: 1 !important;
	filter: none !important;
}