/* ============================================================
   CD — Galerie parallax (colonnes de photos animées au scroll)
   ------------------------------------------------------------
   Rendu serveur À PLAT (.ck-pg__track > figure) :
   - sans JS / éditeur : grille CSS statique (repli propre) ;
   - en front : cd-pgallery.js répartit en colonnes (.ck-pg--live)
     et anime chaque colonne en translateY à sa propre vitesse —
     tout s'aligne quand la galerie est au centre de l'écran.
   Les colonnes débordent de l'amplitude en haut/bas (marges
   négatives) et le widget rogne (overflow clip) → jamais de trou.
   ============================================================ */

.ck-pg {
	--ck-pg-cols:   4;
	--ck-pg-amp:    160px;  /* amplitude du glissement (lue aussi par le JS) */
	--ck-pg-shift:  0px;    /* décalage de départ entre colonnes (lu par le JS) */
	--ck-pg-gap:    20px;
	--ck-pg-radius: 8px;
	--ck-pg-ratio:  4 / 5;

	overflow: clip;
}

/* ---- Repli grille (sans JS, éditeur Elementor) ---- */
.ck-pg__track {
	display: grid;
	grid-template-columns: repeat(var(--ck-pg-cols), 1fr);
	gap: var(--ck-pg-gap);
}

.ck-pg__item { margin: 0; }
.ck-pg__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ck-pg-ratio);
	object-fit: cover;
	border-radius: var(--ck-pg-radius);
}

/* ---- Mode animé (JS) : colonnes ---- */
.ck-pg--live .ck-pg__track {
	display: flex;
	align-items: flex-start;
	gap: var(--ck-pg-gap);
}
.ck-pg--live .ck-pg__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ck-pg-gap);
	/* Aucune marge négative : rien n'est JAMAIS coupé en haut. Les colonnes
	   ne glissent que vers le BAS (modèle novelty.fr) — l'excédent se rogne
	   en bas via overflow: clip, et l'espace qui se libère en haut des
	   colonnes rapides laisse voir le fond de la section (assumé). */
	will-change: transform;
}