/* ══════════════════════════════════════════════════════════════════════════
   CARROUSEL À VARIANTES — CercleKit

   Le rail, le débord, les flèches : la feuille du Carrousel d'images
   (cd-carrousel-image.css), chargée avant celle-ci. Ici, seulement ce qui
   est propre au widget : une slide = une image + une zone Elementor libre,
   la première slide large, la capsule des pastilles et ses animations.

   Le squelette est celui des galeries d'Apple (AirPods Max, 09/10/2026).
   TOUTES LES MESURES SONT EN PX (Kévin, 09/10) : ce sont les valeurs de
   départ du panneau, où chaque réglage se change aussi en em.
   Chaque valeur est une variable que le panneau Elementor écrit ; celles
   posées ici servent quand une couleur de la palette manque au site.
   ══════════════════════════════════════════════════════════════════════════ */

.ck-cv {
	--ck-ci-per: 2;
	--ck-ci-gap: 20px;
	--ck-cv-premiere: 2;
	--ck-cv-zone-gap: 24px;
	--ck-cv-media-bg: #f5f5f7;

	--ck-cv-capsule-bg: #e8e8ed;
	--ck-cv-capsule-op: 70%;
	--ck-cv-capsule-flou: 7px;
	--ck-cv-capsule-radius: 32px;
	--ck-cv-capsule-pad: 12px;
	--ck-cv-capsule-marge: 30px;
	--ck-cv-cap-haut-dist: 100px;
	--ck-cv-capsule-align: center;
	--ck-cv-pastille: 36px;
	--ck-cv-pastille-ecart: 8px;
	--ck-cv-anneau: #1d1d1f;
	--ck-cv-anneau-h: rgba(29, 29, 31, 0.3);
	--ck-cv-anneau-n: transparent;
	--ck-cv-anneau-ep: 2px;
	--ck-cv-nom-ecart: 8px;

	--ck-cv-nom-color: #1d1d1f;
	--ck-cv-nom-bg: #ffffff;
	--ck-cv-nom-op: 50%;

	/* L'animation d'arrivée de la capsule, et celle du changement de photo. */
	--ck-cv-entree-duree: 600ms;
	--ck-cv-entree-delai: 0ms;
	--ck-cv-entree-dist: 24px;
	--ck-cv-change-duree: 500ms;

	--ck-ci-nav-size: 36px;
	--ck-ci-nav-icon: 16px;
	--ck-ci-nav-gap: 18px;
	--ck-ci-nav-radius: 18px;
	--ck-ci-nav-bg: rgba(210, 210, 215, 0.64);
	--ck-ci-nav-bg-h: rgba(223, 223, 227, 0.7);
	--ck-ci-nav-color: rgba(0, 0, 0, 0.56);
	--ck-ci-nav-color-h: rgba(0, 0, 0, 0.64);

	/* ── LA POSITION DES PASTILLES (réglage « Position », par écran) ──────
	   Le panneau écrit le jeu de variables d'une position ; celui-ci est le
	   jeu « En bas ». Une grille : le cadre du rail, la capsule, les flèches. */
	--ck-cv-areas: "cadre" "pastilles";
	--ck-cv-cols: minmax(0, 1fr);
	--ck-cv-sens-pastilles: row;
	--ck-cv-cap-js: var(--ck-cv-capsule-align);
	--ck-cv-cap-as: start;
	--ck-cv-cap-marge: var(--ck-cv-capsule-marge) 0 0 0;
	--ck-cv-cap-haut: auto;
	--ck-cv-cap-bas: var(--ck-cv-capsule-marge);
	--ck-cv-nav-area: pastilles;
	--ck-cv-nav-as: var(--ck-cv-nom-nav-as, end);
	--ck-cv-nav-marge: var(--ck-cv-nom-nav-marge, 0 0 calc((var(--ck-cv-pastille) + 2 * var(--ck-cv-capsule-pad) - var(--ck-ci-nav-size)) / 2) 0);
	--ck-cv-bord-gauche: 1;
	--ck-cv-bord-droite: 1;
	--ck-cv-entree-x: 0px;
	--ck-cv-entree-y: var(--ck-cv-entree-dist);

	display: grid;
	grid-template-columns: var(--ck-cv-cols);
	grid-template-areas: var(--ck-cv-areas);
}

/* Sans pastilles : le rail, puis les flèches dessous. */
.ck-cv:not(.ck-cv--variantes) {
	--ck-cv-areas: "cadre" "pastilles";
	--ck-cv-cols: minmax(0, 1fr);
	--ck-cv-nav-area: pastilles;
	--ck-cv-nav-as: center;
	--ck-cv-nav-marge: var(--ck-cv-capsule-marge) 0 0 0;
	--ck-cv-bord-gauche: 1;
	--ck-cv-bord-droite: 1;
}

/* Le cadre du rail : c'est LUI que le moteur mesure pour le débord (et non
   la racine) — une capsule posée à gauche ou à droite ne fausse rien. */
.ck-cv__cadre {
	grid-area: cadre;
	min-width: 0;
	position: relative;
}

/* LE DÉBORD, CÔTÉ PAR CÔTÉ. Pastilles à gauche : les slides ne passent pas
   sous elles, le rail ne déborde qu'à droite (et l'inverse). */
.ck-cv.ck-ci--bord .ck-ci__track {
	margin-left: calc(-1 * var(--ck-ci-bord-g, 0px) * var(--ck-cv-bord-gauche));
	margin-right: calc(-1 * var(--ck-ci-bord-d, 0px) * var(--ck-cv-bord-droite));
	padding-left: calc(var(--ck-ci-bord-g, 0px) * var(--ck-cv-bord-gauche));
	padding-right: calc(var(--ck-ci-bord-d, 0px) * var(--ck-cv-bord-droite));
	scroll-padding-left: calc(var(--ck-ci-bord-g, 0px) * var(--ck-cv-bord-gauche));
	scroll-padding-right: calc(var(--ck-ci-bord-d, 0px) * var(--ck-cv-bord-droite));
}

/* ── Une slide : l'image, puis la zone ──────────────────────────────────── */

.ck-cv .ck-cv__slide {
	display: flex;
	flex-direction: var(--ck-cv-sens, column);
	/* Pastilles « entre l'image et le texte » : l'écart devient la place de
	   la capsule et de ses deux marges. */
	gap: var(--ck-cv-slide-gap, var(--ck-cv-zone-gap));
}

/* LA ZONE GARDE LE BAS LIBRE. Le rail étire toutes les slides à la hauteur
   de la plus haute ; la marge automatique pousse la zone vers son bord, si
   bien que l'image se cale TOUJOURS au même endroit. Contenu au-dessus de
   l'image : un texte plus long ne décale plus sa photo. Texte à gauche ou à
   droite : il prend la place laissée par l'image, aligné par « Alignement
   vertical ». */
.ck-cv .ck-cv__slide > .elementor-element {
	margin-bottom: var(--ck-cv-zone-mb, auto);
	width: var(--ck-cv-zone-w, 100%);
	flex: var(--ck-cv-zone-flex, none);
	min-width: 0;
	align-self: var(--ck-cv-zone-as, auto);
}

/* LA ZONE DÉMARRE AU RAS DE L'IMAGE : sans marge intérieure, le texte
   s'aligne sur le bord de la photo. Poids nul (`:where`) — comme le Carrousel
   imbriqué d'Elementor Pro : la marge réglée sur le conteneur l'emporte. */
:where(.ck-cv .ck-cv__slide) > .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
}

.ck-cv__media {
	position: relative;
	flex: none;
	box-sizing: border-box;
	width: var(--ck-cv-img-w, var(--ck-cv-img-w-def, 100%));
	max-width: 100%;
	height: var(--ck-cv-img-h, auto);
	overflow: hidden;
	background-color: var(--ck-cv-media-bg);
}

/* Les réglages d'une image simple : largeur, hauteur, ajustement, position.
   Sans hauteur réglée, la photo garde ses proportions. */

/* La photo de la slide, et elle seule : la règle du moteur (`img` à 100 %)
   ne doit pas toucher les images posées dans la zone libre. */
.ck-cv .ck-cv__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ck-cv-fit, cover);
	object-position: var(--ck-cv-pos, center center);
}
.ck-cv .ck-cv__slide > .elementor-element img { width: auto; }

/* ── La première slide large ───────────────────────────────────────────────
   Elle prend la place de N slides et de leurs écarts (réglage « Première
   slide », par écran). Sa hauteur est celle des autres : le script la
   mesure sur la deuxième et la pose dans --ck-cv-h. Repérée par son numéro
   et non par `:first-child` : en boucle, le moteur pose des copies devant
   elle, et ses copies doivent être larges comme elle. */
.ck-cv .ck-cv__slide[data-slide="1"] {
	flex-basis: calc(((100% - var(--ck-ci-gap) * (var(--ck-ci-per) - 1)) / var(--ck-ci-per)) * var(--ck-cv-premiere) + var(--ck-ci-gap) * (var(--ck-cv-premiere) - 1));
}
.ck-cv.ck-cv--large .ck-cv__slide[data-slide="1"] .ck-cv__media {
	height: var(--ck-cv-img-h, var(--ck-cv-h, auto));
}

/* ── La capsule des pastilles ──────────────────────────────────────────────
   FLOTTANTE (en haut ou en bas) : elle suit l'écran tant que le carrousel
   est visible, puis se pose à sa place. Sur les côtés, elle reste à sa place. */
.ck-cv__variantes {
	grid-area: var(--ck-cv-cap-area, pastilles);
	position: relative;
	z-index: 3;
	justify-self: var(--ck-cv-cap-js);
	align-self: var(--ck-cv-cap-as);
	margin: var(--ck-cv-cap-marge);
	/* Le glissé d'arrivée part de 24 px sur le côté : sans ce rognage, des
	   pastilles posées à droite sortaient de l'écran avant d'entrer, et toute
	   la page défilait de travers (383 px pour 375, mesuré au téléphone).
	   `clip` (et non `hidden`) : rien ne défile, la hauteur reste libre. */
	overflow-x: clip;
}
.ck-cv--flottante .ck-cv__variantes {
	position: sticky;
	top: var(--ck-cv-cap-haut);
	bottom: var(--ck-cv-cap-bas);
}
/* LA CAPSULE = le nom + les pastilles. Le nom se place au-dessus, en
   dessous, à gauche ou à droite (« Nom de la variante › Position »), à
   l'écart réglé, et s'aligne avec elles. Il est DANS le flux : la capsule
   prend sa largeur, il ne déborde jamais de la slide. */
.ck-cv__capsule {
	position: relative;
	display: flex;
	flex-direction: var(--ck-cv-nom-sens, column);
	align-items: var(--ck-cv-nom-items, center);
	gap: var(--ck-cv-nom-ecart);
}

.ck-cv__nom {
	margin: 0;
	white-space: nowrap;
	text-align: var(--ck-cv-nom-ta, center);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ck-cv-nom-color);
	background-color: color-mix(in srgb, var(--ck-cv-nom-bg) var(--ck-cv-nom-op), transparent);
	border-radius: 5px;
	padding: 4px 6px;
}
.ck-cv__pastilles { align-self: auto; }

.ck-cv__pastilles {
	display: flex;
	flex-direction: var(--ck-cv-sens-pastilles);
	gap: var(--ck-cv-pastille-ecart);
	padding: var(--ck-cv-capsule-pad);
	border-radius: var(--ck-cv-capsule-radius);
	background-color: color-mix(in srgb, var(--ck-cv-capsule-bg) var(--ck-cv-capsule-op), transparent);
	-webkit-backdrop-filter: blur(var(--ck-cv-capsule-flou));
	backdrop-filter: blur(var(--ck-cv-capsule-flou));
}

/* LE BOUCLIER, comme celui des flèches du moteur : un thème repeint tous les
   <button> de la page, au repos, au survol ET au clic. Tous les états sont
   donc tenus ici, et chaque valeur sort d'une variable du panneau. */
.ck-cv .ck-cv__pastille,
.ck-cv .ck-cv__pastille:hover,
.ck-cv .ck-cv__pastille:focus,
.ck-cv .ck-cv__pastille:active,
.ck-cv .ck-cv__pastille:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	flex: none !important;
	display: block !important;
	width: var(--ck-cv-pastille) !important;
	height: var(--ck-cv-pastille) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: var(--ck-cv-anneau-ep) !important;
	border: var(--ck-cv-anneau-ep) solid var(--ck-cv-anneau-n) !important;
	border-radius: 50% !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	line-height: 1 !important;
	text-transform: none !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	outline: none !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease !important;
}
.ck-cv .ck-cv__pastille:hover { border-color: var(--ck-cv-anneau-h) !important; }
.ck-cv .ck-cv__pastille[aria-pressed="true"] { border-color: var(--ck-cv-anneau) !important; }
.ck-cv .ck-cv__pastille:focus-visible {
	outline: 2px solid var(--ck-cv-anneau) !important;
	outline-offset: 2px !important;
}
.ck-cv__teinte {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.16);
	background-size: cover;
	background-position: center;
}

/* ── Les flèches ───────────────────────────────────────────────────────────
   Pastilles en bas : sur la même ligne que la capsule (comme Apple). Sinon :
   leur propre rangée sous le rail. La rangée ne prend aucun clic, seuls les
   boutons en reprennent — elle ne bloque jamais la capsule. */
.ck-cv .ck-ci__nav {
	grid-area: var(--ck-cv-nav-area);
	align-self: var(--ck-cv-nav-as, end);
	justify-content: var(--ck-cv-nav-align, flex-end);
	margin: var(--ck-cv-nav-marge);
	pointer-events: none;
	position: relative;
	z-index: 2;
}
.ck-cv .ck-ci__nav .ck-ci__btn { pointer-events: auto; }

/* ── L'arrivée de la capsule ───────────────────────────────────────────────
   Elle part cachée, puis entre quand le carrousel arrive à l'écran (le
   script pose `is-vu`). Le sens du glissé suit sa position. */
.ck-cv[class*="ck-cv--entree-"] .ck-cv__capsule {
	opacity: 0;
	transition:
		opacity var(--ck-cv-entree-duree) ease var(--ck-cv-entree-delai),
		transform var(--ck-cv-entree-duree) cubic-bezier(0.2, 0.8, 0.2, 1) var(--ck-cv-entree-delai);
}
.ck-cv--entree-glisser .ck-cv__capsule { transform: translate(var(--ck-cv-entree-x), var(--ck-cv-entree-y)); }
.ck-cv--entree-zoom .ck-cv__capsule { transform: scale(0.8); }
.ck-cv[class*="ck-cv--entree-"].is-vu .ck-cv__capsule { opacity: 1; transform: none; }

/* ── Le changement de photo ────────────────────────────────────────────────
   La photo SORT (classe `is-sortie`), change d'adresse, puis ENTRE depuis
   l'état `is-arrivee`. Chaque moitié dure la moitié de « Durée ». */
.ck-cv .ck-cv__media img {
	transition:
		opacity calc(var(--ck-cv-change-duree) / 2) ease,
		transform calc(var(--ck-cv-change-duree) / 2) ease,
		filter calc(var(--ck-cv-change-duree) / 2) ease;
}
.ck-cv .ck-cv__media img.sans-transition { transition: none; }
.ck-cv--change-fondu .ck-cv__media img.is-sortie,
.ck-cv--change-fondu .ck-cv__media img.is-arrivee { opacity: 0; }
.ck-cv--change-glisser .ck-cv__media img.is-sortie { opacity: 0; transform: translateX(-6%); }
.ck-cv--change-glisser .ck-cv__media img.is-arrivee { opacity: 0; transform: translateX(6%); }
.ck-cv--change-zoom .ck-cv__media img.is-sortie { opacity: 0; transform: scale(1.06); }
.ck-cv--change-zoom .ck-cv__media img.is-arrivee { opacity: 0; transform: scale(0.94); }
.ck-cv--change-flou .ck-cv__media img.is-sortie,
.ck-cv--change-flou .ck-cv__media img.is-arrivee { opacity: 0; filter: blur(12px); }

@media (prefers-reduced-motion: reduce) {
	.ck-cv .ck-cv__media img,
	.ck-cv[class*="ck-cv--entree-"] .ck-cv__capsule { transition: none; }
	.ck-cv[class*="ck-cv--entree-"] .ck-cv__capsule { opacity: 1; transform: none; }
}

/* ── La zone suit la variante ──────────────────────────────────────────────
   Un élément de la zone réglé sur « Variante N » (onglet Avancé) porte la
   classe `ck-cv-v-N` ; il reste caché tant que le script ne l'a pas marqué
   `is-vv` (variante choisie). Rien n'est imposé à l'affichage de l'élément :
   on ne fait que le retirer quand ce n'est pas sa variante. */
.ck-cv [class*="ck-cv-v-"]:not(.is-vv) { display: none !important; }