/* ------------------------------------------------------------------------
   Icone scroll flottante (accueil + pages AImagination : WONDERLAND,
   NISHIKI-GOI, APOLLO, COLOSSEUM). Fixe en bas de l'ecran, disparait en
   fade des les premiers pixels de scroll. Voir js/scroll-indicator.js.
   ------------------------------------------------------------------------ */
.scroll-indicator {
	position: fixed;
	/* Ferme (par defaut) : centree sur le viewport entier, le hero
	   (.epic-slider.fullscreen) etant toujours plein cadre. Ouvert : voir
	   la regle html.desktop-nav-open plus bas, qui la recentre sur la
	   zone visible a droite du panneau. */
	left: 50%;
	bottom: calc(201px + var(--pl-mouse-lift, 0px)); /* 151px + 50px (remonte de 50px) ; --pl-mouse-lift : +100px sur les PAGES PROJET (html.pl-project), 0 sur l'index et les autres pages */
	transform: translateX(-50%);
	width: 56.1px;   /* 85% de 66px (taille d'origine) */
	height: 56.1px;
	pointer-events: auto;
	cursor: pointer;
	z-index: 999;
	opacity: 1;
	transition: opacity 0.3s ease-out, left .45s cubic-bezier(.65,0,.35,1), transform 0.2s ease-out;
	/* Meme effet que le logo PAUL LEON et le hamburger : le GIF (blanc
	   casse) est inverse contre le fond reel de la page -> blanc sur fond
	   sombre, sombre sur fond clair. isolation + mix-blend-mode sont poses
	   sur l'element fixe lui-meme (et non sur l'img), sinon l'inversion
	   reste enfermee dans son contexte d'empilement et donne du blanc
	   partout (cf. commentaires dans css/desktop-menu-toggle.css). */
	isolation: isolate;
	mix-blend-mode: difference;
}
.scroll-indicator:hover {
	transform: translateX(-50%) scale(1.08);
}
.scroll-indicator img {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.scroll-indicator.is-hidden {
	opacity: 0;
}

/* Menu ouvert (desktop) : le panneau recouvre la partie gauche du hero,
   donc on recentre l'icone sur la zone effectivement visible a droite du
   panneau plutot que sur le viewport entier. --desktop-sidebar-width est
   definie dans css/desktop-menu-toggle.css (250px ou 210px selon le
   palier desktop) : on la reutilise pour rester coherent si sa valeur
   change un jour. */
@media only screen and (min-width: 1200px) {
	html.desktop-nav-open .scroll-indicator {
		left: calc(var(--desktop-sidebar-width, 250px) / 2 + 50vw);
	}
}

/* En dessous de 960px la sidebar se replie en menu mobile : on masque
   l'icone flottante, comme le fait deja le site pour les GIF des slides
   (voir top-banner.css). */
/* Petit desktop (960-1199px) : le hero n'occupe plus toute la hauteur de la
   fenetre, l'icone fixe sortirait de la zone du slider -> masquee aussi. */
@media only screen and (max-width: 1199px) {
	.scroll-indicator { display: none; }
}

/* Anciennes icones scroll.gif repetees dans chaque slide du slider
   (heritees du template) : desormais remplacees par l'icone flottante
   unique ci-dessus, on les masque partout. */
.epic-slider .es-caption img[src*="scroll.gif"] {
	display: none !important;
}

/* ------------------------------------------------------------------------
   RAPPEL ANIME de l'icone scroll down (desktop >= 1200px uniquement ; js/scroll-indicator.js)
   - .is-nudging : apres 3 s sans scroll, l'icone "pulse" 2 fois (grossit de 18 % puis revient) toutes les 4,5 s ; coupe au premier scroll.
     POSITION STRICTE : l'icone ne BOUGE JAMAIS (elle est fixee a 201px du bas de la fenetre, identique sur toutes les pages et slides) ;
     le rappel ne change que sa taille autour de son centre (transform: translateX(-50%) scale(...), comme sa position de repos).
     Avant (22 oct. 2026) le rappel DESCENDAIT de 12 px : sur une capture, l'icone semblait a une position differente d'une page a l'autre.
   - prefers-reduced-motion : pas d'animation.
   POUR LE RETIRER : supprimer ce bloc et le bloc "RAPPEL ANIME" de js/scroll-indicator.js.
   ------------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
	.scroll-indicator.is-nudging:not(.is-hidden) {
		animation: scrollNudge 4.5s ease-in-out infinite;
	}
}
@keyframes scrollNudge {
	0%, 46%, 100% { transform: translateX(-50%) scale(1); }
	8%  { transform: translateX(-50%) scale(1.18); }
	16% { transform: translateX(-50%) scale(1); }
	26% { transform: translateX(-50%) scale(1.18); }
	34% { transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.scroll-indicator.is-nudging { animation: none !important; }
}

/* (23 oct.) PAGES PROJET UNIQUEMENT (html.pl-project, pose par un petit script en tete de chaque page projet) : l'icone scroll down est remontee de 100 px.
   L'index et les autres pages ne sont pas touches. Le bloc HAUT / BAS DE PAGE se centre sur cette icone (js/desktop-menu-toggle.js) et monte donc avec elle.
   Pour changer : une seule valeur ci-dessous. Pour annuler : mettre 0px. */
html.pl-project { --pl-mouse-lift: 100px; }