/* CercleKit — Slider widget (moteur maison, sans Swiper).
 *
 * Principe (calqué sur le carousel natif, qui en éditeur n'initialise pas
 * Swiper et laisse donc les slides en flux) :
 *  - PAR DÉFAUT les slides sont en flux normal → dans l'éditeur Elementor
 *    chaque slide est un conteneur vide pleinement éditable (« Drag widget
 *    here »), sans aucun bricolage de surcharge.
 *  - L'empilement absolu (une slide visible à la fois) ne s'active QUE sur
 *    le front, quand le JS ajoute la classe `is-ready` (jamais en éditeur).
 *  - Seule la slide active reçoit pointer-events:auto → contenu cliquable,
 *    rien ne passe devant. Boucle infinie par modulo, zéro clone.
 */

.ck-slider{
	position:relative;
	--ck-dur:600ms;
	--ck-arrow-size:44px;
	--ck-arrow-radius:50%;
	--ck-arrow-color:#fff;
	--ck-arrow-bg:rgba(0,0,0,.4);
	--ck-arrow-color-h:#fff;
	--ck-arrow-bg-h:rgba(0,0,0,.75);
	--ck-arrow-x:16px;
	--ck-arrow-y:16px;
	--ck-arrow-gap:8px;
}

/* --- Piste & slides : flux normal par défaut (éditeur-friendly) --- */
.ck-slider__track{position:relative;width:100%;}
.ck-slide{width:100%;}
.ck-slide > .e-con,
.ck-slide > .elementor-element{width:100%;}

/* Avant l'initialisation JS sur le FRONT : on n'affiche que la 1re slide
   (anti-flash). On NE masque jamais en éditeur : la garde `.ck-in-editor`
   (posée par le JS en mode édition) ET la garde body (aperçu Elementor)
   gardent toutes les slides en flux pour composer chaque conteneur. */
body:not(.elementor-editor-active) .ck-slider:not(.is-ready):not(.ck-in-editor) .ck-slide:not(:first-child){display:none;}

/* =========================== MODE ÉDITEUR =========================== */
/* En back-end : UNE slide à la fois (au lieu de toutes empilées). On navigue
   avec la pastille « ‹ 1/3 › » en haut. La slide visible reste en flux normal,
   donc pleinement éditable (drag de conteneurs, etc.). */
/* En édition : une seule slide affichée. Pendant une navigation (`ck-anim`),
   on laisse temporairement le moteur `is-ready` empiler + ANIMER la transition,
   puis on revient à l'affichage statique d'une slide. */
.ck-slider.ck-in-editor:not(.ck-anim) .ck-slide{display:none !important;}
.ck-slider.ck-in-editor:not(.ck-anim) .ck-slide.is-edit-active{display:block !important;}
/* Repli si aucune n'est marquée (après un re-render Elementor) : la 1re. */
.ck-slider.ck-in-editor:not(.ck-anim) .ck-slider__track:not(:has(.is-edit-active)) > .ck-slide:first-child{display:block !important;}

/* Barre de navigation d'éditeur — invisible sur le front. */
.ck-slider__editnav{display:none;}
.ck-slider.ck-in-editor .ck-slider__editnav{
	display:flex;align-items:center;gap:8px;
	position:absolute;bottom:8px;left:8px;
	z-index:40;pointer-events:auto;
	background:rgba(20,20,28,.9);color:#fff;
	padding:4px 6px;border-radius:99px;
	font:600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.ck-slider.ck-in-editor .ck-en-btn{
	all:unset;box-sizing:border-box;cursor:pointer;
	width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:15px;line-height:1;
}
.ck-slider.ck-in-editor .ck-en-btn:hover{background:rgba(255,255,255,.32);}
.ck-slider.ck-in-editor .ck-en-label{min-width:38px;text-align:center;font-variant-numeric:tabular-nums;}

/* --- Une fois le moteur prêt (front uniquement) : empilement absolu --- */
.ck-slider.is-ready .ck-slider__track{overflow:hidden;min-height:var(--ck-min-h,0);}
.ck-slider.is-ready .ck-slide{
	position:absolute;
	top:0;left:0;
	width:100%;
	opacity:0;
	pointer-events:none;          /* slide inactive = ne capte AUCUN clic */
	z-index:1;
	transition:opacity var(--ck-dur) ease, transform var(--ck-dur) ease, filter var(--ck-dur) ease;
	will-change:opacity,transform,filter;
}
.ck-slider.is-ready .ck-slide.is-active{
	opacity:1;
	pointer-events:auto;          /* SEULE la slide active est cliquable */
	z-index:2;
}
.ck-slider.is-ready .ck-slide.is-entering{transition:none;} /* part de l'état caché sans flash */

/* =========================== TRANSITIONS (front prêt) =========================== */

/* Fondu (par défaut : géré par l'opacity ci-dessus) */
.ck-slider.is-ready.ck-slider--fade .ck-slide.is-leaving{opacity:0;}

/* Glissement horizontal */
.ck-slider.is-ready.ck-slider--slide .ck-slide{opacity:0;transform:translateX(calc(var(--dir,1) * 100%));}
.ck-slider.is-ready.ck-slider--slide .ck-slide.is-active{opacity:1;transform:translateX(0);}
.ck-slider.is-ready.ck-slider--slide .ck-slide.is-entering{opacity:1;transform:translateX(calc(var(--dir,1) * 100%));}
.ck-slider.is-ready.ck-slider--slide .ck-slide.is-leaving{opacity:1;transform:translateX(calc(var(--dir,1) * -100%));}

/* Vertical */
.ck-slider.is-ready.ck-slider--vertical .ck-slide{opacity:0;transform:translateY(calc(var(--dir,1) * 100%));}
.ck-slider.is-ready.ck-slider--vertical .ck-slide.is-active{opacity:1;transform:translateY(0);}
.ck-slider.is-ready.ck-slider--vertical .ck-slide.is-entering{opacity:1;transform:translateY(calc(var(--dir,1) * 100%));}
.ck-slider.is-ready.ck-slider--vertical .ck-slide.is-leaving{opacity:1;transform:translateY(calc(var(--dir,1) * -100%));}

/* Zoom */
.ck-slider.is-ready.ck-slider--zoom .ck-slide{transform:scale(1.08);}
.ck-slider.is-ready.ck-slider--zoom .ck-slide.is-active{transform:scale(1);}
.ck-slider.is-ready.ck-slider--zoom .ck-slide.is-entering{transform:scale(1.08);}
.ck-slider.is-ready.ck-slider--zoom .ck-slide.is-leaving{opacity:0;transform:scale(.96);}

/* Flou */
.ck-slider.is-ready.ck-slider--flou .ck-slide{filter:blur(14px);}
.ck-slider.is-ready.ck-slider--flou .ck-slide.is-active{filter:blur(0);}
.ck-slider.is-ready.ck-slider--flou .ck-slide.is-entering{filter:blur(14px);}
.ck-slider.is-ready.ck-slider--flou .ck-slide.is-leaving{opacity:0;filter:blur(14px);}

/* =========================== FLÈCHES =========================== */
.ck-slider__arrows{
	position:absolute;
	inset:0;
	pointer-events:none;          /* le calque flèches ne bloque pas les clics */
	z-index:5;
}
/* Flèches = icône NUE. !important + sélecteur renforcé pour neutraliser les
   styles de <button> du THÈME (fond/bordure/padding/forme hérités sinon). */
.ck-slider .ck-arrow{
	position:absolute;
	pointer-events:auto;
	cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	margin:0 !important;padding:0 !important;
	background:none !important;background-color:transparent !important;
	border:0 !important;border-radius:0 !important;box-shadow:none !important;
	min-width:0 !important;min-height:0 !important;width:auto !important;height:auto !important;
	-webkit-appearance:none !important;appearance:none !important;
	color:var(--ck-arrow-color,#fff) !important;
	font-size:var(--ck-arrow-icon,32px) !important;
	line-height:1 !important;
	transition:color .2s ease,opacity .2s ease;
	outline:none !important;       /* supprime le halo bleu du navigateur */
}
.ck-slider .ck-arrow:hover,
.ck-slider .ck-arrow:focus-visible{color:var(--ck-arrow-color-h,#fff) !important;background:none !important;}
.ck-slider .ck-arrow:focus-visible{opacity:.7;}
.ck-slider .ck-arrow > i{font-size:inherit !important;line-height:1;color:inherit !important;}
.ck-slider .ck-arrow > svg{width:1em !important;height:1em !important;fill:currentColor !important;}

/* Position verticale : pilotée par variables (posées par le contrôle « Position
   verticale » via selectors_dictionary, donc RESPONSIVE) + décalage --ck-arrow-y
   qui fonctionne pour Haut/Centre/Bas. */
.ck-slider .ck-arrow{
	top:var(--ck-arrow-top,50%);
	bottom:var(--ck-arrow-bottom,auto);
	transform:translateY(var(--ck-arrow-ty,-50%));
}

/* Disposition horizontale : pilotée par variables (posées par le contrôle
   « Disposition » via selectors_dictionary → RESPONSIVE). Permet de réunir les
   flèches d'un côté et de les placer où on veut, différemment par appareil. */
.ck-slider .ck-arrow--prev{left:var(--ck-prev-left,16px);right:var(--ck-prev-right,auto);}
.ck-slider .ck-arrow--next{left:var(--ck-next-left,auto);right:var(--ck-next-right,16px);}

/* =========================== PAGINATION (presets) =========================== */
.ck-slider__dots{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:var(--ck-dot-gap,8px);
	--ck-pag-c:var(--ck-dot-bg,rgba(0,0,0,.25));
	--ck-pag-a:var(--ck-dot-bg-active,#534ab7);
}
.ck-dots--below .ck-slider__dots{margin-top:16px;}

/* Pagination DANS le slider : position réglable (vertical + horizontal). */
.ck-dots--inside .ck-slider__dots{position:absolute;z-index:6;}
.ck-dots--inside.ck-pagv--top .ck-slider__dots{top:var(--ck-dot-y,14px);bottom:auto;}
.ck-dots--inside.ck-pagv--bottom .ck-slider__dots{bottom:var(--ck-dot-y,14px);top:auto;}
.ck-dots--inside.ck-pagh--center .ck-slider__dots{left:0;right:0;justify-content:center;}
.ck-dots--inside.ck-pagh--left .ck-slider__dots{left:var(--ck-dot-x,16px);right:auto;justify-content:flex-start;}
.ck-dots--inside.ck-pagh--right .ck-slider__dots{right:var(--ck-dot-x,16px);left:auto;justify-content:flex-end;}
/* Barre de progression : suit l'alignement horizontal */
.ck-pag--progress.ck-dots--inside.ck-pagh--left .ck-progress{margin:0 auto 0 0;}
.ck-pag--progress.ck-dots--inside.ck-pagh--right .ck-progress{margin:0 0 0 auto;}

/* --- Points (mêmes neutralisations anti-thème que les flèches) --- */
.ck-slider .ck-dot{
	position:relative;
	width:var(--ck-dot-size,10px);
	height:var(--ck-dot-size,10px);
	margin:0 !important;padding:0 !important;
	border:0 !important;box-shadow:none !important;border-radius:50% !important;
	min-width:0 !important;min-height:0 !important;
	-webkit-appearance:none !important;appearance:none !important;
	background:var(--ck-pag-c) !important;
	cursor:pointer;outline:none !important;overflow:hidden;
	transition:background .25s ease,transform .25s ease,width .25s ease,opacity .2s ease;
}
.ck-slider .ck-dot:hover,
.ck-slider .ck-dot:focus-visible{opacity:.6;}
.ck-slider .ck-dot.is-active{background:var(--ck-pag-a) !important;transform:scale(1.25);}
/* Le remplissage interne ne sert qu'aux Lignes (caché ailleurs) */
.ck-slider .ck-dot-fill{display:none;}

/* --- Lignes (barres ; l'active se remplit selon la durée d'affichage) --- */
.ck-slider.ck-pag--lines .ck-dot{
	width:calc(var(--ck-dot-size,10px) * 3.2);
	height:max(3px, calc(var(--ck-dot-size,10px) * .4));
	border-radius:99px !important;transform:none;
	background:var(--ck-pag-c) !important;        /* piste claire */
}
.ck-slider.ck-pag--lines .ck-dot.is-active{transform:none;background:var(--ck-pag-c) !important;}
.ck-slider.ck-pag--lines .ck-dot-fill{
	display:block;
	position:absolute;left:0;top:0;bottom:0;
	width:0;
	background:var(--ck-pag-a);
	border-radius:inherit;
}
/* Slides déjà passées = barre pleine */
.ck-slider.ck-pag--lines .ck-dot.is-past .ck-dot-fill{width:100%;}
/* Slide active : pleine par défaut (sans autoplay)… */
.ck-slider.ck-pag--lines .ck-dot.is-active .ck-dot-fill{width:100%;}
/* …et qui se REMPLIT progressivement quand l'autoplay tourne */
.ck-slider.is-autoplay.ck-pag--lines .ck-dot.is-active .ck-dot-fill{
	width:0;
	animation:ck-fill var(--ck-fill-dur,4000ms) linear forwards;
}
.ck-slider.is-paused.ck-pag--lines .ck-dot.is-active .ck-dot-fill{animation-play-state:paused;}
@keyframes ck-fill{from{width:0;}to{width:100%;}}

/* --- Compteur (01 / 05) --- */
.ck-pag--counter .ck-slider__dots{gap:.4em;font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.ck-count-cur{color:var(--ck-pag-a);font-weight:700;font-size:calc(var(--ck-dot-size,10px) * 1.7);line-height:1;}
.ck-count-sep,.ck-count-total{color:var(--ck-pag-c);font-weight:500;font-size:calc(var(--ck-dot-size,10px) * 1.3);line-height:1;}

/* --- Barre de progression --- */
.ck-pag--progress .ck-slider__dots{display:block;}
.ck-progress{
	display:block;width:min(220px,60%);height:max(3px,calc(var(--ck-dot-size,10px) * .4));
	margin:0 auto;border-radius:99px;overflow:hidden;background:var(--ck-pag-c);
}
.ck-pag--progress.ck-dots--inside .ck-progress{width:min(280px,70%);}
.ck-progress-bar{display:block;height:100%;border-radius:99px;background:var(--ck-pag-a);transition:width .4s ease;}

/* Flèches & pagination : cachées sur le front tant que le moteur n'a pas
   démarré (anti-flash). En ÉDITEUR (`ck-in-editor`) on les AFFICHE pour avoir
   un aperçu réel — elles permettent aussi de naviguer entre les slides. */
.ck-slider:not(.is-ready):not(.ck-in-editor) .ck-slider__arrows,
.ck-slider:not(.is-ready):not(.ck-in-editor) .ck-slider__dots{display:none;}

/* Masquage responsive (classes posées sur le wrapper via prefix_class) */
@media (max-width:1024px){
	.ck-harrows-mobile_tablet .ck-slider__arrows,
	.ck-hdots-mobile_tablet .ck-slider__dots{display:none !important;}
}
@media (max-width:767px){
	.ck-harrows-mobile .ck-slider__arrows,
	.ck-hdots-mobile .ck-slider__dots{display:none !important;}
}