/* ============================================================
   CD — Section horizontale (widget)
   ============================================================ */

.ck-hsw {
	--ck-hs-visible: 1;
	--ck-hs-step: 50;
	--ck-hs-pad: 40;
	--ck-hs-snap: 1;
	--ck-hs-dim: 30;
	--ck-hs-blur: 4;
	--ck-hs-item-w: 70%;
	--ck-hs-ind-color: #d85a36;
}

.ck-hsw__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
}
/* É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-hsw--pin-band .ck-hsw__sticky {
	height: calc(var(--ck-hs-pin-h, 100) * 1vh);
	top: var(--ck-hs-sticky-top, 0px);
}

.ck-hsw__viewport { width: 100%; overflow: hidden; }
.ck-hsw__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}
/* Chaque slide prend la largeur calculée (= largeur du widget / N). !important
   car un conteneur Elementor impose sa propre largeur. */
.ck-hsw__track > .ck-hsw__slide {
	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;
	min-height: var(--ck-hs-slide-h, 70vh);
	display: flex;
	justify-content: center;
	align-items: center;
	will-change: opacity, filter;
}
/* Le conteneur composable (print_child) remplit la slide (comme .ck-slide du Slider). */
.ck-hsw__slide > .e-con,
.ck-hsw__slide > .elementor-element {
	width: 100%;
	min-height: inherit;
}

/* ===== Empilé (« Désactiver le défilement horizontal sur… ») : les slides
   deviennent des sections classiques les unes sous les autres ===== */
.ck-hsw--stack .ck-hsw__sticky {
	position: relative;
	height: auto;
	overflow: visible;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
}
.ck-hsw--stack .ck-hsw__track {
	transform: none !important;
	flex-direction: column;
}
.ck-hsw--stack .ck-hsw__track > .ck-hsw__slide {
	flex-basis: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	opacity: 1 !important;
	filter: none !important;
}
.ck-hsw--stack .ck-hsw__dots,
.ck-hsw--stack .ck-hsw__arrow { display: none !important; }

/* ===== Statique (tout tient / mouvement réduit) ET éditeur : pas de pin ===== */
.ck-hsw--static .ck-hsw__sticky,
.elementor-editor-active .ck-hsw__sticky {
	position: relative;
	height: auto;
	overflow: visible;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
}
.ck-hsw--static .ck-hsw__viewport,
.elementor-editor-active .ck-hsw__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.ck-hsw--static .ck-hsw__track,
.elementor-editor-active .ck-hsw__track {
	transform: none !important;
	padding-left: 0 !important;
}
/* En éditeur, slides nettes (pas de fondu/flou) et largeur raisonnable. */
.elementor-editor-active .ck-hsw__slide,
.elementor-editor-active .ck-hsw__track > * {
	opacity: 1 !important;
	filter: none !important;
}

/* ============================================================
   ÉDITEUR — sélecteur de slide (comme le Slider) : UNE slide à la
   fois, pilotée par la pastille « ‹ N / total › ». Le moteur ajoute
   `ck-in-editor` + `is-edit-active` (assets/cd-hsection.js).
   ============================================================ */
.ck-hsw.ck-in-editor .ck-hsw__viewport { overflow: visible; }
.ck-hsw.ck-in-editor .ck-hsw__track { display: block; }
/* Une slide occupe toute la largeur ; toutes masquées sauf l'active. */
.ck-hsw.ck-in-editor .ck-hsw__track > .ck-hsw__slide {
	display: none !important;
	flex: none !important;
	width: 100% !important;
	max-width: none !important;
}
.ck-hsw.ck-in-editor .ck-hsw__track > .ck-hsw__slide.is-edit-active { display: flex !important; }
/* Repli : si aucune slide active (1er rendu), on montre la première. */
.ck-hsw.ck-in-editor .ck-hsw__track:not(:has(.is-edit-active)) > .ck-hsw__slide:first-child { display: flex !important; }

/* Pastille de navigation d'éditeur (masquée au front). */
.ck-hsw__editnav { display: none; }
.ck-hsw.ck-in-editor .ck-hsw__editnav {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 999px;
	background: rgba(24, 24, 27, 0.82);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	z-index: 20;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ck-hsw.ck-in-editor .ck-hsw__en-btn {
	appearance: none; -webkit-appearance: none; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	width: 24px !important; height: 24px !important;
	min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important; line-height: 1 !important;
	border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
	background: rgba(255, 255, 255, 0.16); color: #fff;
	font-size: 16px; cursor: pointer;
	transition: background 0.2s ease;
}
.ck-hsw.ck-in-editor .ck-hsw__en-btn:hover { background: rgba(255, 255, 255, 0.32); }
.ck-hsw.ck-in-editor .ck-hsw__en-label {
	min-width: 40px; text-align: center; color: #fff;
	font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
/* En mode sélecteur, l'indicateur (traits) reste utile comme poignées : chaque
   trait = une slide. On les garde en bas, cliquables (voir moteur éditeur). */

/* ============================================================
   Indicateur (traits) — <button> réinitialisés au forceps
   ============================================================ */
.ck-hsw__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-hsw-ind-left .ck-hsw__dots { right: auto; left: var(--ck-hs-ind-edge, 22px); align-items: flex-start; }
.ck-hsw-ind-off .ck-hsw__dots { display: none; }
.ck-hsw__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;
	line-height: 0 !important; box-shadow: none !important;
	border-radius: 999px !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;
}
.ck-hsw__dot:hover { opacity: 0.65; }
.ck-hsw__dot.is-active {
	width: var(--ck-hs-ind-w-active, 30px) !important;
	background: var(--ck-hs-ind-color, #d85a36) !important;
	opacity: 1;
}
/* En éditeur, l'indicateur sert de poignées de slides : on le pose en bas, horizontal. */
.elementor-editor-active .ck-hsw__dots {
	position: static;
	transform: none;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 0;
}

/* ============================================================
   Flèches — <button> réinitialisés au forceps
   ============================================================ */
.ck-hsw__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-hsw__arrow--prev { left: var(--ck-hs-arrow-edge, 24px); }
.ck-hsw__arrow--next { right: var(--ck-hs-arrow-edge, 24px); }
.ck-hsw__arrow:hover { background-color: var(--ck-hs-arrow-bg-hover, #fff); transform: translateY(-50%) scale(1.07); }
.ck-hsw__arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; box-shadow: none; }
.ck-hsw__arrow svg { width: calc(var(--ck-hs-arrow-size, 52px) * 0.42); height: calc(var(--ck-hs-arrow-size, 52px) * 0.42); }
/* En éditeur, on masque les flèches (chrome), l'indicateur suffit comme poignées. */
.elementor-editor-active .ck-hsw__arrow { display: none; }
/* Évite le chevauchement flèche ↔ indicateur du même côté. */
.ck-hsw-arrows--on.ck-hsw-ind-right .ck-hsw__dots { right: calc(var(--ck-hs-arrow-edge, 24px) + var(--ck-hs-arrow-size, 52px) + 14px); }
.ck-hsw-arrows--on.ck-hsw-ind-left  .ck-hsw__dots { left: calc(var(--ck-hs-arrow-edge, 24px) + var(--ck-hs-arrow-size, 52px) + 14px); }