/* ==========================================================================
   Barre de navigation "PORTFOLIO seul" - index.html, profil.html, contact.html
   (FR + EN). Meme barre que les pages projets (#folio-navigation), mais avec
   le seul bouton central (grille) qui renvoie vers portfolio.html : pas de
   fleches precedent / suivant.

   Le HTML est ajoute juste avant le pied de page sombre :
       <div id="folio-navigation" class="folio-nav-solo"> ... <li id="closeProject"> ...
   Le CSS et le JS de la barre (desktop-menu-toggle.css, hamburger-collision.js)
   sont ceux des pages projets : affichage identique.
     - < 960px      : barre dans la page, juste au-dessus du pied de page ;
     - 960-1199px   : bouton fixe en bas de la fenetre ;
     - >= 1200px    : bouton fixe, pose au-dessus du pied noir en fin de page
                      (en haut de page aussi sur l'accueil, a cause du slider,
                      comme sur les pages projets a video).

   Cette regle : des 960px le bouton est FIXE a l'ecran, l'element de la barre
   n'a donc pas besoin de place dans la page. Sans elle, il ajoutait 90px de
   blanc (40px de haut + 50px de marge) au-dessus du pied de page. Avec elle, la
   hauteur des pages est identique a celle d'avant, et le bouton reste exactement
   au meme endroit. Sous 960px la barre garde sa place dans la page.
   ========================================================================== */
@media only screen and (min-width: 960px) {
	#folio-navigation.folio-nav-solo {
		margin-top: 0 !important;
		height: 0 !important;
	}
}

/* --- Espaces autour du bouton : 100px au-dessus ET 100px en dessous (en fin de page) ---
   Espace du haut : bas du texte "TOUS LES PROJETS" -> haut du bouton grille (23px de points).
   Espace du bas  : bas du bouton grille -> haut du bloc noir du pied de page.
   Pour que le haut vaille 100px il faut 100 + 23 + 100 = 223px entre le texte et le bloc noir (il y en
   avait 117) : l'element de la barre prend 106px de hauteur dans la page (desktop >= 1200px). Le bas est
   regle par data-nav-rest-gap="97" (js/hamburger-collision.js) : 97px entre la boite du bouton (30px, points
   a 3px du bord) et le bloc noir = 100px entre les points et le bloc noir. */
@media only screen and (min-width: 1200px) {
	#folio-navigation.folio-nav-solo {
		height: 106px !important;
	}
}

/* Fenetres 960 - 1199px : bouton fixe en bas de la fenetre, pose au-dessus du bloc noir en fin de page
   (data-nav-rest-gap, js/hamburger-collision.js, 2e bloc). Il n'y a que 77px entre le texte
   "TOUS LES PROJETS" et le bloc noir : +146px de blanc pour arriver aux 223px (100 + 23 + 100). */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	#folio-navigation.folio-nav-solo {
		height: 146px !important;
	}
}

/* Fenetres < 960px : la barre est dans la page (40px, bouton centre). Il y a 19,5px entre le texte "TOUS LES
   PROJETS" et les points du bouton, et 58,7px (<= 767px) ou 74,3px (768-959px) entre les points et le bloc noir :
   on ajoute 80px au-dessus de la barre et on agrandit sa hauteur (le bouton reste en haut de la barre) pour
   arriver a 100px de chaque cote. */
@media only screen and (max-width: 959px) {
	#folio-navigation.folio-nav-solo {
		margin-top: 80px !important;
		height: 81px !important;    /* 40px + 41px */
	}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#folio-navigation.folio-nav-solo {
		height: 66px !important;    /* 40px + 26px */
	}
}