/* ============================================================
   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);
	/* Le CALAGE : quand les hauteurs varient, sur quoi s'alignent les
	   photos d'une rangée — haut (défaut), centre, ou BAS. `start` plutôt
	   que le stretch par défaut : la figure épouse sa photo, les voiles de
	   survol aussi. */
	align-items: var(--ck-pg-valign, start);
}

.ck-pg__item { margin: 0; }
/* Le lien (visionneuse) ne doit rien changer à la boîte de l'image. */
.ck-pg .ck-pg__item a { display: block; }
/* Sélecteur À DEUX CLASSES exprès : `.elementor img { border-radius: 0 }`
   (le reset d'Elementor) est à égalité (0,1,1) avec `.ck-pg__item img`, et
   à égalité c'est l'ordre de chargement qui tranche — il varie entre le
   front et l'éditeur. Constaté : arrondi à 0 dans l'éditeur. */
.ck-pg .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);
}

/* ---- Variation de hauteur (grille, parallax colonnes, rangée) ----
   Le rythme de mosaïque des vraies compositions : une photo sur trois
   plus COURTE, une sur trois plus HAUTE, l'ampleur au réglage. Le ratio
   est multiplié en calc — la variable (ex. « 4 / 5 ») y devient une
   division, c'est voulu. En ratio « Naturel » (auto), le calc est
   invalide au calcul → aspect-ratio retombe sur auto : sans effet, les
   hauteurs naturelles varient déjà. La roue et le carrousel sont exclus
   par le sélecteur (la roue vit d'un cadre unique ; le carrousel a son
   propre rythme, juste dessous — il ne se compte pas en positions). */
.ck-pg:is(.ck-pg--l-grid, .ck-pg--l-parallax, .ck-pg--l-hrow) .ck-pg__item:nth-child(3n) img {
	aspect-ratio: calc( ( var(--ck-pg-ratio) ) * ( 1 + var(--ck-pg-hvar, 0) ) );
}
.ck-pg:is(.ck-pg--l-grid, .ck-pg--l-parallax, .ck-pg--l-hrow) .ck-pg__item:nth-child(3n+2) img {
	aspect-ratio: calc( ( var(--ck-pg-ratio) ) / ( 1 + var(--ck-pg-hvar, 0) ) );
}

/* La variation de hauteur du CARROUSEL est plus bas, dans son propre
   bloc : elle doit passer APRÈS le `aspect-ratio` du carrousel. */

/* ---- Survols ---- */
.ck-pg.ck-pg--hv-zoom .ck-pg__item,
.ck-pg.ck-pg--hv-veil .ck-pg__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--ck-pg-radius);
}
/* Zoom : 0,9 s posées (0,6 s pressées avant la 4.2.755) sur une courbe qui
   démarre en douceur — la vitesse perçue venait surtout du départ en
   flèche de l'ancienne courbe. Durée et voile réglables sur le widget. */
.ck-pg.ck-pg--hv-zoom .ck-pg__item img { transition: transform var(--ck-pg-hv-dur, 0.9s) cubic-bezier(0.4, 0, 0.2, 1); }
.ck-pg.ck-pg--hv-zoom .ck-pg__item:hover img { transform: scale(1.05); }
/* Le voile du zoom : un assombrissement léger qui monte avec lui. */
.ck-pg.ck-pg--hv-zoom .ck-pg__item::after {
	content: "";
	position: absolute; inset: 0;
	background: #0b1726;
	opacity: 0;
	transition: opacity var(--ck-pg-hv-dur, 0.9s) ease;
	pointer-events: none; /* le clic traverse jusqu'au lien */
}
.ck-pg.ck-pg--hv-zoom .ck-pg__item:hover::after { opacity: var(--ck-pg-hv-dark, 0.15); }

.ck-pg.ck-pg--hv-veil .ck-pg__item::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(11, 23, 38, 0.45);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none; /* le clic traverse jusqu'au lien */
}
.ck-pg.ck-pg--hv-veil .ck-pg__item::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-pg.ck-pg--hv-veil .ck-pg__item:hover::after { opacity: 1; }
.ck-pg.ck-pg--hv-veil .ck-pg__item:hover::before { opacity: 1; transform: translate(-50%, -50%); }

/* Élévation — jamais sur la roue : son transform positionne les photos. */
.ck-pg.ck-pg--hv-lift:not(.ck-pg--l-wheel) .ck-pg__item {
	border-radius: var(--ck-pg-radius);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.ck-pg.ck-pg--hv-lift:not(.ck-pg--l-wheel) .ck-pg__item:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 40px -18px rgba(5, 11, 18, 0.38);
}

/* ---- Les flèches (carrousel, et conduite « arrows ») ----
   Un seul dessin pour toute la famille. Invisibles tant que le JS n'a pas
   allumé la galerie.

   AUTONOMES : un <button> est stylé par le THÈME et par le KIT Elementor
   (`.elementor-kit-X button` pèse (0,1,1) et battait notre (0,1,0) —
   constaté sur Hello Elementor). Sélecteurs à deux classes, et TOUTES les
   propriétés qu'un thème pose sur les boutons sont écrites ici : le
   dessin ne dépend que de CercleKit. */
.ck-pg .ck-pg__nav { display: none; }
.ck-pg.ck-pg--live .ck-pg__nav {
	display: flex;
	gap: var(--ck-pg-nav-gap, 10px);
	justify-content: var(--ck-pg-nav-align, flex-end);
	margin: 0 0 var(--ck-pg-nav-margin, 18px);
	padding: 0;
}
/* Position « en dessous » : le serveur place le bloc APRÈS les photos,
   la marge change de côté. */
.ck-pg.ck-pg--live.ck-pg--nav-bottom .ck-pg__nav {
	margin: var(--ck-pg-nav-margin, 18px) 0 0;
}
/* Position « sur les photos » : une flèche de chaque côté, à mi-hauteur.
   Le voile ne bloque rien (pointer-events) et la distance du bord se
   règle — négative, les flèches sortent des photos. */
.ck-pg.ck-pg--live.ck-pg--nav-sides { position: relative; }
.ck-pg.ck-pg--live.ck-pg--nav-sides .ck-pg__nav,
.ck-pg.ck-pg--live.ck-pg--nav-sides .ck-pg__stage .ck-pg__nav {
	position: absolute;
	inset: 0 var(--ck-pg-nav-inset, 18px);
	margin: 0;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	z-index: 2;
}
.ck-pg.ck-pg--nav-sides .ck-pg__btn { pointer-events: auto; }
/* La rangée : les flèches se posent sur la SCÈNE (la fenêtre visible),
   pas sur la course — le JS les y déplace, la scène devient le repère. */
.ck-pg.ck-pg--live.ck-pg--nav-sides .ck-pg__stage { position: relative; }
.ck-pg .ck-pg__btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: var(--ck-pg-nav-size, 44px);
	height: var(--ck-pg-nav-size, 44px);
	min-width: 0;
	min-height: 0;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: var(--ck-pg-nav-bw, 1px) solid var(--ck-pg-nav-border, #ded8d0);
	background: var(--ck-pg-nav-bg, #fffcf8);
	background-image: none;
	color: var(--ck-pg-nav-color, #0b1726);
	border-radius: var(--ck-pg-nav-radius, 4px);
	box-shadow: none;
	text-shadow: none;
	font: 16px/1 sans-serif; /* aucun texte dedans — neutralise le kit */
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ck-pg .ck-pg__btn:hover,
.ck-pg .ck-pg__btn:focus,
.ck-pg .ck-pg__btn:active {
	background: var(--ck-pg-nav-bg-h, #0b1726);
	background-image: none;
	border-color: var(--ck-pg-nav-border-h, var(--ck-pg-nav-bg-h, #0b1726));
	color: var(--ck-pg-nav-color-h, #fffcf8);
	box-shadow: none;
	outline: none;
}
.ck-pg .ck-pg__btn:focus-visible {
	outline: 2px solid var(--ck-pg-nav-color, #0b1726);
	outline-offset: 2px;
}
.ck-pg .ck-pg__btn svg {
	display: block;
	width: var(--ck-pg-nav-icon, 18px);
	height: var(--ck-pg-nav-icon, 18px);
	fill: none;
}

/* ---- Mode animé (JS) : colonnes — RÉSERVÉ au parallax. Les autres
   dispositions « live » gardent leur propre écriture, la grille de
   base par défaut. ---- */
.ck-pg--l-parallax.ck-pg--live .ck-pg__track {
	display: flex;
	align-items: flex-start;
	gap: var(--ck-pg-gap);
}
/* ---- Rangée horizontale (JS) ----
   Le serveur rend à plat ; le JS enveloppe le track dans une scène
   (.ck-pg__stage). Conduite « scroll » : le widget prend de la hauteur
   (posée par le JS) et la scène se colle à l'écran — le schéma éprouvé de
   la pile d'images : rognage horizontal seulement, le collant a besoin de
   l'axe Y libre. Conduite « flèches » : pas de course, la rangée vit dans
   la page. */
.ck-pg--live.ck-pg--l-hrow {
	overflow-x: clip;
	overflow-y: visible;
}
.ck-pg--live.ck-pg--l-hrow .ck-pg__stage { overflow: clip; }
.ck-pg--drive-scroll.ck-pg--live.ck-pg--l-hrow .ck-pg__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
}
.ck-pg--live.ck-pg--l-hrow .ck-pg__track {
	display: flex;
	align-items: var(--ck-pg-valign, center);
	gap: var(--ck-pg-gap);
	padding-left: 8vw;
	will-change: transform;
}
.ck-pg--live.ck-pg--l-hrow .ck-pg__item {
	flex: 0 0 auto;
	width: var(--ck-pg-item-w, 300px);
}
.ck-pg--live.ck-pg--l-hrow .ck-pg__item img { aspect-ratio: var(--ck-pg-ratio); }
/* Le désalignement en marges (jamais en transform : l'élévation au
   survol s'en sert déjà). Préfixe .ck-pg EN PLUS : le reset
   `.elementor .elementor-widget:not(…):not(…) figure { margin: 0 }`
   d'Elementor pèse (0,4,1) — il faut (0,5,0) pour le battre. */
.ck-pg.ck-pg--live.ck-pg--l-hrow .ck-pg__item:nth-child(3n)   { margin-top: var(--ck-pg-hoff, 30px); }
.ck-pg.ck-pg--live.ck-pg--l-hrow .ck-pg__item:nth-child(3n+2) { margin-top: calc(-0.7 * var(--ck-pg-hoff, 30px)); }

/* ---- Roue / arc vivant (JS) ----
   Le track devient la roue entière (un disque plus large que l'écran,
   centré), les photos sont posées sur son rebord tous les 360/N degrés,
   inclinées par leur tangente (transform-origin au centre du disque). Le
   JS ne fait tourner QUE le track — rotate() — en dérive lente ou d'un
   cran par flèche. */
.ck-pg--live.ck-pg--l-wheel {
	position: relative;
	height: var(--ck-pg-wheel-h, 64vh);
	overflow: clip;
}
.ck-pg--live.ck-pg--l-wheel .ck-pg__track {
	position: absolute;
	left: 50%;
	top: 6vh;
	width: calc(var(--ck-pg-wheel-d, 240) * 1vw);
	height: calc(var(--ck-pg-wheel-d, 240) * 1vw);
	margin-left: calc(var(--ck-pg-wheel-d, 240) * -0.5vw);
	will-change: transform;
	display: block;
}
.ck-pg.ck-pg--live.ck-pg--l-wheel .ck-pg__item {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--ck-pg-wheel-item, 21) * 1vw);
	margin: 0 0 0 calc(var(--ck-pg-wheel-item, 21) * -0.5vw);
	aspect-ratio: var(--ck-pg-ratio);
	/* posée sur le rebord : montée d'un rayon, moins ce qui doit rester
	   visible dans la fenêtre de la roue */
	transform: rotate(var(--ck-a, 0deg)) translateY(calc(var(--ck-pg-wheel-d, 240) * -0.5vw + 24vh));
	transform-origin: 0 0;
	border-radius: var(--ck-pg-radius);
	overflow: hidden;
	box-shadow: 0 18px 34px -20px rgba(5, 11, 18, 0.35);
}
.ck-pg--live.ck-pg--l-wheel .ck-pg__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	border-radius: 0; /* c'est la figure qui porte l'arrondi et qui rogne */
}
/* Les flèches de la roue flottent SUR l'arc : au-dessus ou en dessous
   selon la position, alignées par le réglage d'alignement ; la position
   « sur les photos » garde l'écriture générique (une de chaque côté). */
.ck-pg--live.ck-pg--l-wheel.ck-pg--nav-top .ck-pg__nav,
.ck-pg--live.ck-pg--l-wheel.ck-pg--nav-bottom .ck-pg__nav {
	position: absolute;
	left: 18px;
	right: 18px;
	z-index: 2;
	margin: 0;
}
.ck-pg--live.ck-pg--l-wheel.ck-pg--nav-top .ck-pg__nav { top: 18px; }
.ck-pg--live.ck-pg--l-wheel.ck-pg--nav-bottom .ck-pg__nav { top: auto; bottom: 18px; }

/* ---- Carrousel (JS) ----
   Le track défile nativement (scroll-snap), les flèches font glisser
   d'une carte — le navigateur porte l'inertie et le tactile. */
.ck-pg--live.ck-pg--l-carousel .ck-pg__track {
	display: flex;
	/* Le CALAGE, quand les hauteurs varient (variation, ratio naturel) :
	   haut, centre, ou bas. `start` par défaut plutôt que le `stretch` du
	   flex — la figure épouse sa photo, et les voiles de survol avec elle
	   (un voile posé sur une figure étirée déborderait sous l'image).
	   Sans variation les cartes ont toutes la même hauteur : `start` et
	   `stretch` s'y rendent au même pixel. */
	align-items: var(--ck-pg-valign, start);
	gap: var(--ck-pg-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ck-pg--live.ck-pg--l-carousel .ck-pg__track::-webkit-scrollbar { display: none; }
.ck-pg--live.ck-pg--l-carousel .ck-pg__item {
	flex: 0 0 calc( ( 100% - ( var(--ck-pg-per, 3) - 1 ) * var(--ck-pg-gap) ) / var(--ck-pg-per, 3) );
	scroll-snap-align: start;
}
/* Dimensionne à la LARGEUR : la carte fait sa taille, l'écran en montre
   autant qu'il en tient — comme la rangée horizontale, et une carte
   entamée au bord annonce la suite. `min(…, 100%)` garde le carrousel
   utilisable sur un écran plus étroit que la carte : elle occupe la vue,
   elle ne la déborde pas. Spécificité (0,4,0) : passe devant la règle
   « par vue » ci-dessus (0,3,0) quel que soit l'ordre. */
.ck-pg--live.ck-pg--l-carousel.ck-pg--car-auto .ck-pg__item {
	flex: 0 0 min( var(--ck-pg-item-w, 300px), 100% );
}
.ck-pg--live.ck-pg--l-carousel .ck-pg__item img { aspect-ratio: var(--ck-pg-ratio); }
/* La variation de hauteur, ici accrochée à la PHOTO (une classe posée au
   rendu) et non à sa position dans le rail — contrairement à la grille et
   à la rangée, qui se comptent en `nth-child`. C'est indispensable au
   carrousel : la boucle infinie ajoute des clones AUX DEUX BOUTS puis se
   recale d'un tour en silence ; comptées en positions, les hauteurs se
   redistribueraient à chaque recalage, et la même photo changerait de
   taille sous l'œil dès que le nombre de photos n'est pas un multiple de
   3. Le clone copie la classe de son original : la photo garde sa
   hauteur, du premier au dernier tour.
   PLACÉ ICI, PAS DANS LE BLOC « Variation de hauteur » : à (0,3,1) il est
   à égalité avec la règle juste au-dessus, et à égalité c'est l'ordre qui
   tranche. Mesuré : posé plus haut dans la feuille, il ne s'applique pas
   — l'aspect-ratio restait à 4/5. Le repli sans JS, lui, n'oppose que
   `.ck-pg .ck-pg__item img` (0,2,1) : la règle y gagne aussi. */
.ck-pg.ck-pg--l-carousel .ck-pg__item--court img {
	aspect-ratio: calc( ( var(--ck-pg-ratio) ) * ( 1 + var(--ck-pg-hvar, 0) ) );
}
.ck-pg.ck-pg--l-carousel .ck-pg__item--haut img {
	aspect-ratio: calc( ( var(--ck-pg-ratio) ) / ( 1 + var(--ck-pg-hvar, 0) ) );
}
/* Fil continu : la position coule à la virgule — le snap se battrait avec
   elle (re-calage brutal à chaque pause). Le pas à pas, lui, le garde. */
.ck-pg--live.ck-pg--l-carousel.ck-pg--ap-cont .ck-pg__track { scroll-snap-type: none; }

.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;
}