/*!
Theme Name: Theme PHASE IMAGE (Divi Child)
Description: Theme enfant de Divi par Phase Image TSD
Author: Thomas Saint-Dizier - Phase Image
Author URI: https://phaseimage.com/
Tags: infographie, infographiste, graphiste, 2D, 3D, multimedia, communication, publicite, video, vosges, paris, 
Template: Divi
*/


/* Menu latéral flottant fixe - css*/

.menu-flottant {
    width:14em; /* Largeur des items du menu*/
    float: left; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:9999; /* Il sera au dessus de tous les éléments*/
    top: 40%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 1em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #000; /* Couleur de la police*/
    font-weight:400; /* Mettre le texte en gras*/
    text-transform:; /* Mettre le texte en majuscule*/
    left: -10em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: rgba(0,191,255,0); /* Couleur de fond*/
    height: 3.5em; /* Hauteur des items du menu*/
    padding: 1em 1.5em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
	background-color: rgba(0,191,255,0); /* 1er item du menu*/
} 
.menu-flottant ul li:nth-child(2) { 
	background-color: rgba(0,191,255,0); /* 2e item du menu*/
} 
.menu-flottant ul li:nth-child(3) { 
	background-color: rgba(0,191,255,0); /* 3e item du menu*/
} 
/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(10em);
    transform: translateX(10em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
    color: #000; /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:1em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    left: 0.2em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: right;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 1em;
  }  

/* Cacher le menu sur version mobile*/
  @media only screen and (max-width: 640px) {
.menu-flottant {
display: none;
}
}


  /* Forcer le footer à être tout en bas de la page, à gérer page par page*/

/* code css si pas de widgets en pied de page */

@media screen and (min-width: 1200px) {

#main-content {
margin-bottom: 70px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 1000 et 1199px */

@media screen and (min-width: 1000px) and (max-width: 1199px) {

#main-content {
margin-bottom: 70px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 900 et 999px */

@media screen and (min-width: 900px) and (max-width: 999px) {

#main-content {
margin-bottom: 70px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 800 et 899px */

@media screen and (max-width: 899px) {

#main-content {
margin-bottom: 100px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* Cacher le menu sur tablette et mobile - Phase Image*/
@media screen and (max-width: 991px) {
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
}