/* ============================================================
   CD — Pile d'images (paquet de photos qui se défausse au scroll)
   ------------------------------------------------------------
   La pile reste FIGÉE au centre de l'écran pendant que la page
   défile ; à chaque tour de molette la photo du dessus part vers
   le haut en basculant d'un côté puis de l'autre, et celle du
   dessous prend sa place en grandissant. La dernière reste.

   Trois niveaux, empilés :
     .ck-pd         la pile (porte TOUS les réglages, en variables)
     .ck-pd__track  la course de défilement (hauteur = n × réglage)
     .ck-pd__stage  la scène collante, une seule hauteur d'image
     .ck-pd__card   les photos, superposées, animées en transform

   Rendu serveur À PLAT : sans JavaScript, en mouvement réduit ou
   dans un contexte où le JS n'a pas tourné, la pile s'affiche en
   simple COLONNE d'images (repli propre, rien de caché). C'est le
   JS qui ajoute `.ck-pd--live` et fait basculer en mode collant.
   ============================================================ */

.ck-pd {
	--ck-pd-count:  1;      /* nombre de photos (posé par PHP) */
	--ck-pd-scroll: 100vh;  /* course de défilement PAR photo */
	--ck-pd-h:      70vh;   /* hauteur de la pile à l'écran */
	--ck-pd-tilt:   10;     /* bascule à la sortie, en degrés — NOMBRE NU (lu par le JS) */
	--ck-pd-slide:  150px;  /* glissement latéral à la sortie (px : le JS le lit) */
	--ck-pd-offset: 16px;   /* de combien les photos du fond dépassent en bas */
	--ck-pd-shrink: 20;     /* réduction des photos du fond, en % — NOMBRE NU */
	--ck-pd-dir:    alt;    /* alt | left | right (lu par le JS) */
	--ck-pd-radius: 8px;
	--ck-pd-fit:    cover;
	--ck-pd-bg:     transparent;

	/* Le glissement latéral sort de la colonne : sans ça, une barre de
	   défilement horizontale apparaît sur la page entière.
	   `clip` et NON `hidden` : `hidden` ferait de la pile une boîte de
	   défilement, et le `position: sticky` de la scène se collerait à ELLE
	   — donc à un cadre qui défile avec la page — au lieu de l'écran.
	   `clip` rogne sans jamais devenir défilable, la scène reste collée à
	   l'écran. Et seulement sur l'axe X : la photo qui s'envole doit
	   pouvoir sortir par le haut. */
	overflow-x: clip;
	overflow-y: visible;
}

/* ---- Repli : sans JS, en mouvement réduit → une colonne d'images ----
   L'écart reprend le décalage des cartes du fond : un réglage de moins à
   comprendre, et la colonne respire déjà comme la pile. */
.ck-pd__stage {
	display: grid;
	gap: var(--ck-pd-offset);
}
.ck-pd__card { margin: 0; }
.ck-pd__card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ck-pd-radius);
}

/* ---- Mode animé (JS) ---- */

/* La course : c'est ELLE qui donne au visiteur de quoi défiler pendant que
   la scène reste collée. Une hauteur d'écran par photo, par défaut. */
.ck-pd--live .ck-pd__track {
	height: calc(var(--ck-pd-scroll) * var(--ck-pd-count));
}

/* La scène, collée au CENTRE de l'écran : la moitié de ce qui reste de
   hauteur au-dessus, la même en dessous. Le JS lit ce `top` calculé plutôt
   que de le recalculer — une seule source de vérité pour le point de
   collage. */
.ck-pd--live .ck-pd__stage {
	display: block;
	position: sticky;
	top: calc((100vh - var(--ck-pd-h)) / 2);
	height: var(--ck-pd-h);
}

/* Les photos, toutes au même endroit et à la même taille : superposées, la
   première de la galerie sur le dessus (z-index posé par PHP).
   `transform-origin` en bas au centre : la photo bascule sur son bord
   inférieur, comme une carte qu'on soulève d'un paquet — et les photos du
   fond, réduites autour de ce même point, gardent leur bord bas aligné, ce
   qui les fait dépasser proprement par le bas. */
.ck-pd--live .ck-pd__card {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--ck-pd-radius);
	background: var(--ck-pd-bg);
	transform-origin: 50% 100%;
	will-change: transform;
	backface-visibility: hidden;
}
.ck-pd--live .ck-pd__card img {
	width: 100%;
	height: 100%;
	object-fit: var(--ck-pd-fit);
	border-radius: 0; /* c'est la carte qui porte l'arrondi et qui rogne */
}