/* ==========================================================================
   PAGES AI (WONDERLAND, APOLLO, COLOSSEUM, NISHIKI-GOI ; FR + EN) :
   - le LOGO DU PROJET (.st-logo) est EN HAUT, a la place du titre texte ;
   - le logo GOBELINS (img.st-gobelins, images/logos/gobelins.png) est EN DESSOUS, au MILIEU entre le bas du logo du projet et le haut de l'icone scroll down ;
   - Gobelins est un element A PART (il n'est PLUS dans .st-projet) : le moteur de glitch (js/tagline-glitch.js / js/slider-titre.js) ne le touche pas -> il ne glitche pas,
     ne se duplique pas, ne bouge pas. Il apparait seulement en fondu avec le reste.
   - le titre texte (.st-projet) reste dans le HTML (le script en a besoin) mais est invisible.
   REGLAGES : --gb-scale (1 = 100 %, ici .25 = 25 %) ; --gb-shift (px, desktop : + descend / - remonte Gobelins par rapport au milieu exact).
   ========================================================================== */
.slider-titre { --gb-scale: .25; --gb-shift: 0px; }
.epic-slider .slider-titre .st-projet { opacity: 0 !important; position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; margin: 0 !important; }
.slider-titre .st-gobelins {
	display: block; max-width: none; height: auto; pointer-events: none;
	width: calc(731px * var(--gb-scale));
	opacity: 0; transition: opacity .5s ease; animation: st-secours-gb 0s linear 6s forwards;   /* securite : visible au bout de 6 s */
}
.slider-titre.st-run .st-gobelins { opacity: 1; animation: none; }
@keyframes st-secours-gb { to { opacity: 1; } }

/* DESKTOP (>= 1200 px) */
@media only screen and (min-width: 1200px) {
	.epic-slider .slider-titre {
		--st-logoc: calc(var(--st-tb) - var(--st-t) / 2);                                   /* centre du logo du projet = ancien centre du titre */
		--st-logoh: calc(var(--w) * var(--st-logo-scale) * var(--ar));                      /* hauteur du logo du projet (largeur x proportions du fichier) */
		--gb-mid: calc((var(--st-logoc) + var(--st-logoh) / 2 + var(--st-it)) / 2 + var(--gb-shift));   /* milieu entre le bas du logo et le haut de l'icone scroll */
	}
	.epic-slider .slider-titre .st-logo { top: var(--st-logoc); }
	.epic-slider .slider-titre .st-gobelins { position: absolute; left: 50%; top: var(--gb-mid); transform: translate(-50%, -50%); }
}
/* TABLETTE : meme ordre, repartis a egale distance par le flex (logo projet, puis Gobelins) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.epic-slider .slider-titre .st-logo { order: 1; }
	.epic-slider .slider-titre .st-gobelins { order: 2; position: relative; }
}
/* MOBILE : le logo du projet seul, comme sur Canon (Gobelins masque) */
@media only screen and (max-width: 767px) { .epic-slider .slider-titre .st-gobelins { display: none; } }