/* ==========================================================================
   PAGES PROJET - TABLETTE + MOBILE (< 1200 px) : TROIS ESPACES EGAUX (30 oct. 2026)
   --------------------------------------------------------------------------
   Sous le slider (ou la video) d'ouverture, la page empile : [barre PRECEDENT / GRILLE / SUIVANT] -> [icone souris] -> [grand titre].
   Les trois espaces VISIBLES ci-dessous etaient inegaux (~70 / ~49 / ~40 px) ; ils valent maintenant tous --pl-gap-proj :
     A = bas du slider (ou de la video)  ->  haut de la barre precedent / grille / suivant
     B = bas de la barre                 ->  haut de l'icone souris
     C = bas de l'icone souris           ->  haut des lettres du grand titre
   La barre precedent / grille / suivant reste UN SEUL BLOC (fleches, noms de projet et icone grille sont a la meme hauteur) : on la deplace,
   on ne separe jamais ses boutons.
   REGLAGE : --pl-gap-proj (53 px = meme distance totale qu'avant, repartie a parts egales). Plus petit = page plus compacte.
   Desktop (>= 1200 px) : non touche.   POUR ANNULER : retirer la balise <link ... projets-espaces.css> des pages projet.
   ========================================================================== */
@media only screen and (max-width: 1199px) {
	#content-wrapper.portfolio-project {
		--pl-gap-proj: 53px;
		/* B : l'icone souris (boite 56 px, dessin ~38 px centre) est posee sous la barre ; haut de la boite = bas de la barre + (gap - 13,75 px) */
		--pl-mouse-below-bar: calc(var(--pl-gap-proj) - 13.75px);
	}

	/* A - pages a SLIDER : la section du slider depasse de 40 px sous l'image, les boutons sont a 5 px du haut de la barre -> marge = gap - 45 px */
	#content-wrapper.portfolio-project:has(.epic-slider) .video-nav-bar {
		margin-top: calc(var(--pl-gap-proj) - 45px);
	}

	/* A - pages a VIDEO d'ouverture : marge sous la video (collee a la barre) = gap - 5 px (les boutons sont a 5 px du haut de la barre) */
	#content-wrapper.portfolio-project:not(:has(.epic-slider)) .full-width-video-wrapper {
		margin-bottom: calc(var(--pl-gap-proj) - 5px) !important;
	}
	#content-wrapper.portfolio-project:not(:has(.epic-slider)) .video-nav-bar {
		margin-top: calc(var(--pl-gap-proj) - 5px);
	}

	/* C - haut du grand titre : bas de la barre -> haut des lettres = 33,5 px (reste de l'icone souris sous son centre) + 2 x gap.
	   Le haut des lettres est a 0,1556 x taille de la 1re ligne sous le haut du <h1> (interligne 1,05) : on retire donc 0,1556 x --h1fs pour que l'espace C
	   reste identique quelle que soit la taille du titre (meme principe que les autres espaces du site). */
	#content-wrapper.portfolio-project #section-title {
		padding-top: calc(33.5px + 2 * var(--pl-gap-proj) - 0.1556 * var(--h1fs));
	}
}