/* ══════════════════════════════════════════════════════════════════════════
   CARROUSEL D'IMAGES — CercleKit

   Le balisage est rendu À PLAT par le serveur : le rail est une simple bande
   d'images. Sans JavaScript, ça reste une bande qui se fait défiler au doigt
   ou à la molette — rien n'est caché, rien n'est cassé. Le script n'ajoute
   que les flèches qui marchent et la lecture automatique.

   Tout ce qui se règle passe par une variable `--ck-ci-*` : le widget écrit
   les variables, la feuille dessine. Aucune valeur de réglage n'est écrite
   ici en dur.
   ══════════════════════════════════════════════════════════════════════════ */

.ck-ci {
	--ck-ci-per: 1;
	--ck-ci-gap: 16px;

	--ck-ci-nav-size: 44px;
	--ck-ci-nav-icon: 18px;
	--ck-ci-nav-gap: 10px;
	--ck-ci-nav-margin: 16px;
	--ck-ci-nav-inset: 12px;
	--ck-ci-nav-radius: 50%;
	--ck-ci-nav-bw: 0px;
	--ck-ci-nav-align: center;

	--ck-ci-nav-color: #ffffff;
	--ck-ci-nav-bg: rgba(0, 0, 0, .55);
	--ck-ci-nav-border: transparent;
	--ck-ci-nav-color-h: #ffffff;
	--ck-ci-nav-bg-h: rgba(0, 0, 0, .8);
	--ck-ci-nav-border-h: transparent;

	position: relative;
}

/* ── Le rail ────────────────────────────────────────────────────────────── */

.ck-ci__track {
	display: flex;
	gap: var(--ck-ci-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Barre de défilement effacée : elle est remplacée par les flèches, et sa
	   présence ferait sauter la hauteur du rail au chargement. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ck-ci__track::-webkit-scrollbar { display: none; }

/* ── Débord jusqu'au bord de l'écran (réglage « Déborder… ») ──────────────
   Même principe que la Boucle produit de l'addon WooCommerce : le rail sort
   du conteneur par des marges NÉGATIVES égales à la distance conteneur → bord
   de l'écran, et rend exactement cette distance en padding. Sa boîte de
   CONTENU reste la largeur du conteneur — c'est elle que lit le `100%` du
   calcul d'une photo : le nombre de photos par vue ne change pas.
   `scroll-padding` cale l'aimantation sur le bord du CONTENEUR.
   Les deux distances sont MESURÉES par le script (`clientWidth`, pas `100vw`
   qui compte la barre de défilement sous Windows et ferait défiler toute la
   page à l'horizontale). */
.ck-ci--bord .ck-ci__track {
	margin-left: calc(-1 * var(--ck-ci-bord-g, 0px));
	margin-right: calc(-1 * var(--ck-ci-bord-d, 0px));
	padding-left: var(--ck-ci-bord-g, 0px);
	padding-right: var(--ck-ci-bord-d, 0px);
	scroll-padding-left: var(--ck-ci-bord-g, 0px);
	scroll-padding-right: var(--ck-ci-bord-d, 0px);
}

/* LA GAUCHE LIBRE AU DÉPART. En boucle, les copies posées AVANT la première
   photo rempliraient la marge de gauche dès le chargement. On les tait tant
   que personne n'a défilé ; au premier geste elles apparaissent en fondu —
   pendant le glissement, jamais d'un coup. */
.ck-ci--bord .ck-ci__item--avant { transition: opacity .3s ease; }
.ck-ci--bord.ck-ci--vierge .ck-ci__item--avant { opacity: 0; }

.ck-ci__item {
	/* La largeur d'une vue, gouttières déduites — sans le calcul, deux images
	   « par vue » déborderaient exactement de l'écart qui les sépare. */
	flex: 0 0 calc((100% - var(--ck-ci-gap) * (var(--ck-ci-per) - 1)) / var(--ck-ci-per));
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}

/* ⚠️ FAIBLE POIDS, ET C'EST LE POINT IMPORTANT.
   Ces trois déclarations ne sont qu'un point de départ : le panneau porte
   les MÊMES réglages que le widget Image d'Elementor (largeur, hauteur,
   ajustement, rayon, bordure, ombre…), et le moindre d'entre eux doit
   l'emporter sans se battre. Les sélecteurs d'Elementor passent par
   `{{WRAPPER}}`, qui pèse trois classes : en gardant une seule classe ici,
   ils gagnent toujours. Ne pas « renforcer » ces règles — ce serait rendre
   les réglages du panneau inopérants, en silence. */
/* ⚠️ `inline-block`, ET SURTOUT PAS `block`.
   Le réglage « Alignement » du widget Image agit par `text-align` — qui
   n'a AUCUN effet sur un élément de type bloc. En `block`, le réglage
   s'écrivait bien dans la page et l'image ne bougeait pas d'un pixel :
   un réglage mort, sans le dire. C'est exactement ce que fait Elementor
   sur son propre widget Image, `vertical-align` compris (sans lui, la
   ligne de base laisse quelques pixels sous la photo). */
.ck-ci__item img {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: auto;
}

/* Le lien reste EN LIGNE : c'est ce qui laisse « Alignement » le déplacer,
   et ce qui fait qu'une largeur en % se calcule sur la vue et non sur le
   lien lui-même (qui, lui, se réduit à la taille de la photo). */
.ck-ci__lien { display: inline; }

/* ── Effets au survol ────────────────────────────────────────────────────
   LE DESSIN DE LA GALERIE CERCLEKIT (cd-pgallery.css, bloc « Survols »),
   valeur pour valeur. Repris ici parce que la feuille de la Galerie est au
   contrat : un réglage changé là-bas doit l'être ici aussi.
   L'effet vit sur `.ck-ci__cadre`, posé autour de la photo seulement quand
   un effet est choisi — jamais sur la légende. En BLOC, pour que la largeur
   en % de la photo se calcule toujours sur la vue, comme sans cadre. Son
   arrondi vient du réglage « Rayon de la bordure ». */
.ck-ci__cadre { display: block; }

.ck-ci.ck-ci--hv-zoom .ck-ci__cadre,
.ck-ci.ck-ci--hv-veil .ck-ci__cadre {
	position: relative;
	overflow: hidden;
}

.ck-ci.ck-ci--hv-zoom .ck-ci__cadre img { transition: transform var(--ck-ci-hv-dur, 0.9s) cubic-bezier(0.4, 0, 0.2, 1); }
.ck-ci.ck-ci--hv-zoom .ck-ci__cadre:hover img { transform: scale(1.05); }
.ck-ci.ck-ci--hv-zoom .ck-ci__cadre::after {
	content: "";
	position: absolute; inset: 0;
	background: #0b1726;
	opacity: 0;
	transition: opacity var(--ck-ci-hv-dur, 0.9s) ease;
	pointer-events: none; /* le clic traverse jusqu'au lien */
}
.ck-ci.ck-ci--hv-zoom .ck-ci__cadre:hover::after { opacity: var(--ck-ci-hv-dark, 0.15); }

.ck-ci.ck-ci--hv-veil .ck-ci__cadre::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(11, 23, 38, 0.45);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.ck-ci.ck-ci--hv-veil .ck-ci__cadre::before {
	content: "Agrandir";
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, calc(-50% + 8px));
	z-index: 1;
	color: #fffcf8;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 16px;
	border: 1px solid rgba(255, 252, 248, 0.65);
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}
.ck-ci.ck-ci--hv-veil .ck-ci__cadre:hover::after { opacity: 1; }
.ck-ci.ck-ci--hv-veil .ck-ci__cadre:hover::before { opacity: 1; transform: translate(-50%, -50%); }

.ck-ci.ck-ci--hv-lift .ck-ci__cadre {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.ck-ci.ck-ci--hv-lift .ck-ci__cadre:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 40px -18px rgba(5, 11, 18, 0.38);
}
/* L'Élévation monte la photo de 8px : le rail défile, donc il rogne ce qui
   dépasse. On lui rend ces 8px en haut, sans rien décaler. */
.ck-ci--hv-lift .ck-ci__track { padding-top: 8px; margin-top: -8px; }

/* Le format du carrousel : toutes les photos au même rapport. Une Hauteur
   posée dans le panneau reprend la main dessus, elle pèse plus lourd. */
.ck-ci--ratio .ck-ci__item img {
	aspect-ratio: var(--ck-ci-ratio);
	object-fit: cover;
}

/* L'écart et l'alignement se règlent dans le panneau, comme sur le widget
   Image. Ici, juste de quoi ne pas coller à la photo sans réglage. */
.ck-ci__cap { margin: 8px 0 0; }

/* ── Les flèches ────────────────────────────────────────────────────────── */

.ck-ci__nav {
	display: flex;
	gap: var(--ck-ci-nav-gap);
	justify-content: var(--ck-ci-nav-align);
}
.ck-ci--nav-top .ck-ci__nav    { margin-bottom: var(--ck-ci-nav-margin); }
.ck-ci--nav-bottom .ck-ci__nav { margin-top: var(--ck-ci-nav-margin); }

/* SUR LES PHOTOS : la barre couvre toute la largeur mais ne prend AUCUN clic —
   seuls les deux boutons en reprennent. Sans ça, une bande invisible barrerait
   le rail et le glissement au doigt ne marcherait plus. */
.ck-ci--nav-sides .ck-ci__nav {
	position: absolute;
	inset: 0 var(--ck-ci-nav-inset);
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 2;
}
.ck-ci--nav-sides .ck-ci__btn { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════
   LE BOUCLIER — le thème n'a plus prise sur nos flèches.

   Un thème repeint TOUS les `<button>` de la page, et pas seulement au
   repos : ses règles de survol et d'ACTIF passent par-dessus les nôtres.
   Résultat mesuré sur le banc, thème hostile allumé : nos flèches de 44 px
   sortaient en pastilles roses de 60 px, bordure fuchsia, rayon 999 px,
   texte en majuscules, ombre rose, padding de 14/28. Il ne restait rien de
   nous. C'est exactement ce que le client voit.

   ⚠️ POURQUOI `!important` — ET POURQUOI IL NE CONFISQUE RIEN.
   Un thème qui écrit `!important` (c'est courant) ne se bat pas à la
   spécificité : seul un `!important` répond à un `!important`. Mais chaque
   valeur qu'on impose ici est LUE DANS UNE VARIABLE, et ces variables sont
   justement ce que le panneau Elementor écrit. On ne fige donc rien : on
   reprend la main sur le thème, et on la rend au client.

   ⚠️ TOUS LES ÉTATS DANS LA MÊME LISTE, y compris ceux qu'on ne colore pas.
   Ne blinder que l'état au repos laisse le thème repeindre `:active` — et
   c'est PRÉCISÉMENT ce que Kévin voyait : du rose au moment du clic, et
   nulle part ailleurs. Un défaut qu'on ne voit qu'en gardant le doigt
   appuyé.
   ══════════════════════════════════════════════════════════════════════ */
.ck-ci .ck-ci__btn,
.ck-ci .ck-ci__btn:hover,
.ck-ci .ck-ci__btn:focus,
.ck-ci .ck-ci__btn:focus-visible,
.ck-ci .ck-ci__btn:active,
.ck-ci .ck-ci__btn:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ck-ci-nav-size) !important;
	height: var(--ck-ci-nav-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-style: solid !important;
	border-width: var(--ck-ci-nav-bw) !important;
	border-radius: var(--ck-ci-nav-radius) !important;
	box-shadow: var(--ck-ci-nav-shadow, none) !important;
	/* La typo ne se voit pas — les flèches n'ont pas de texte — mais elle
	   pousse le bouton : une taille de 17 px et des majuscules changeaient
	   sa hauteur de ligne, donc sa hauteur tout court. */
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	outline: none !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	background-image: none !important;
	cursor: pointer !important;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

/* Les couleurs, état par état. Séparées du bloc ci-dessus : lui neutralise,
   celui-ci habille. */
.ck-ci .ck-ci__btn {
	background-color: var(--ck-ci-nav-bg) !important;
	color: var(--ck-ci-nav-color) !important;
	border-color: var(--ck-ci-nav-border) !important;
}
.ck-ci .ck-ci__btn:hover,
.ck-ci .ck-ci__btn:focus-visible {
	background-color: var(--ck-ci-nav-bg-h) !important;
	color: var(--ck-ci-nav-color-h) !important;
	border-color: var(--ck-ci-nav-border-h) !important;
}

/* LE CLAVIER GARDE SON REPÈRE. On a effacé le contour du thème (souvent un
   gros trait rose) : il faut en rendre un, sinon on navigue à l'aveugle au
   clavier. Un liseré dessiné par nous, à l'intérieur du bouton. */
.ck-ci .ck-ci__btn:focus-visible {
	box-shadow: 0 0 0 2px var(--ck-ci-nav-bg), 0 0 0 4px var(--ck-ci-nav-color) !important;
}

/* L'ICÔNE EST CELLE QUE L'AUTEUR A CHOISIE : elle peut être une police
   (`<i>`) ou un tracé (`<svg>`). Les deux se règlent d'une seule taille, et
   le SVG prend la couleur du bouton — sans `currentColor`, un tracé importé
   garderait le noir de son fichier. */
.ck-ci__btn i,
.ck-ci__btn span { font-size: var(--ck-ci-nav-icon); line-height: 1; }
.ck-ci__btn svg {
	width: var(--ck-ci-nav-icon);
	height: var(--ck-ci-nav-icon);
	fill: currentColor;
}

/* Bout de course, sans boucle : le bouton reste EN PLACE et s'éteint. Le
   retirer ferait sauter la mise en page à chaque bord atteint. */
.ck-ci__btn[disabled] {
	opacity: .35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.ck-ci__track { scroll-behavior: auto; }
	.ck-ci__btn { transition: none; }
}