/* ------------------------------------------------------------------
   JH Image Galaxy — nuée de photos en arrière-plan d'une section.
   Le JS pose .jh-galaxy-host sur la section Elementor et
   .jh-galaxy-widget sur le wrapper du widget shortcode.
   ------------------------------------------------------------------ */

/* La section qui accueille la nuée : contexte de positionnement + rognage
   des tuiles qui débordent volontairement du cadre. */
.jh-galaxy-host{
	position: relative;
	overflow: hidden;
	isolation: isolate; /* les z-index internes restent confinés à la section */
}

/* Le widget shortcode devient la couche de fond, hors du flux. */
.jh-galaxy-widget{
	position: absolute !important;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
	pointer-events: none;
}
.jh-galaxy-widget > *{ height: 100%; }

/* Le contenu frère (titres, texte) passe au-dessus. */
.jh-galaxy-host > .e-con,
.jh-galaxy-host > .elementor-element:not(.jh-galaxy-widget){
	position: relative;
	z-index: 1;
}

.jh-image-galaxy{
	position: absolute;
	inset: 0;
	overflow: visible;
}

/* ------------------------------------------------------------ Tuiles */

.jh-gal__tile{
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc( var(--w) * 1.4px );
	aspect-ratio: var(--ratio);
	opacity: 0;
	will-change: opacity, filter;
}

/* Entrée : le fadeIn maison (styles.css du thème — opacity + blur 6px,
   1,4 s, cubic-bezier(.45,0,.15,1)), répliqué ici sous un nom propre pour
   ne pas dépendre de l'ordre de chargement des feuilles. Le décalage
   par tuile (--edelay) garde l'effet de nuée. */
@keyframes jh-gal-fadein{
	0%   { opacity: 0; filter: blur( 6px ); }
	60%  { filter: blur( 0px ); }
	100% { opacity: 1; filter: blur( 0px ); }
}
.jh-image-galaxy.is-in .jh-gal__tile{
	animation: jh-gal-fadein 1.4s cubic-bezier( .45, 0, .15, 1 ) var(--edelay) both;
}

/* Dérive continue, sur un élément séparé pour ne pas entrer en conflit
   avec la transition d'entrée (les deux animent transform). */
.jh-gal__drift{
	width: 100%;
	height: 100%;
	animation: jh-gal-drift var(--dur) ease-in-out var(--adelay) infinite alternate;
}
@keyframes jh-gal-drift{
	from{ transform: translate( 0, 0 ); }
	to{   transform: translate( var(--dx), var(--dy) ); }
}

.jh-gal__tile img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0; /* charte du site : aucun arrondi */
	box-shadow: 0 10px 28px rgba( 36, 31, 31, .16 );
}

/* La dérive ne démarre qu'après l'entrée, sinon les deux se cumulent
   pendant le vol et la trajectoire paraît erratique. */
.jh-image-galaxy:not(.is-in) .jh-gal__drift{ animation-play-state: paused; }

/* ------------------------------------------------------------ Mobile */

@media ( max-width: 1280px ){
	.jh-gal__tile{ width: calc( var(--w) * 1.15px ); }
}
@media ( max-width: 1024px ){
	.jh-gal__tile{ width: calc( var(--w) * .85px ); }
}
@media ( max-width: 767px ){
	.jh-gal__tile{ width: calc( var(--w) * .58px ); }
	.jh-gal__tile--m-hide{ display: none; }

	/* Halo couleur de fond derrière le bloc texte : invisible sur le fond uni,
	   il garantit la lisibilité quand une tuile latérale passe derrière. */
	.jh-galaxy-host > .e-con{
		background: radial-gradient( closest-side, #E6E3DB 58%, rgba( 230, 227, 219, 0 ) 100% );
		padding: 18px 6px;
	}
}

/* --------------------------------------------------- Mouvement réduit */

@media ( prefers-reduced-motion: reduce ){
	.jh-image-galaxy.is-in .jh-gal__tile{ animation: none; opacity: 1; }
	.jh-gal__drift{ animation: none; }
}