/*FORMAT DE L'ENTETE*/
header
{
color: white;
background: rgb(51,0,102);
font-family: arial;
font-size: 1em;
text-align: left;
width: 1400px;
/*pour faire apparaître les liens du menu de manière horizontale*/
display: inline-block; 
/* sticky navigation: la nav bar reste fixe lors du scroll down */
position: sticky;
top:0;
/*tests stype bordure*/
#border-bottom-color: white;
#border-bottom-width: 2px;
#border-style:solid white;
#border-bottom-style: inset;
}

/*FORMAT DU CORPS DU SITE*/
body
{
background: rgb(51,0,102);
width: 1400px;

}
#bloc_page
{
width: 1400px;
margin: auto;
}

h1
{
    text-align: center;
    color: red;    
    font-family: arial;
    font-size: 2em;
}
h2
{
    color:rgb(3,152,134);
    font-family: arial;
    font-size: 1.5em;
    text-align: left;
    display: block;
}
h3
{
    text-align: left;
    color: white;
    font-family: arial;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0;
}
a
{
    color: white;
    font-family: arial;
    text-align: left;
    text-decoration: none;/*suppression du soulignement*/
    /*il ne restera plus qu'à changer la couleur des liens actif*/
    /*et pourquoi pas soulignement quand je clique dessus*/
}
a:hover/*effets lors du survol des liens hypertextes du menu*/
{
    #color:red;
    text-decoration: underline;
    font-weight: bold;
}
ul
{
    color:white;
    font-family: arial;
    font-size: 1em;
    text-align: left;
}
p
{
    color:white;
    font-family: arial;
    font-size: 1em;
    text-align: justify;
}
/*logos entreprises*/
.imageflottante
{
float: right;
margin-left:15px;
margin-bottom:10px;
}
/*logos langues*/
.imageflottante2
{
float: right;
margin-left:35px;
}
/*logos écoles*/
.imageflottante3
{
float: right;
margin-left:15px;
margin-bottom: 10px;
}
/*images dans l'entête*/
.imageflottante4
{
float: right;
margin-bottom: 0px;
}
/*permet de mettre le texte sous l'image flottante*/
.dessous
{
clear: both;
}

/*conteneur qui contient les sections 1, 2, 3*/
#conteneur
{
	display: flex;
	#border: 1px red solid;/*c'est juste pour faire apparaître les limites lors du design*/
}
/*section biographie*/
.element1
{
	#border: 1px white solid;  /*c'est juste pour faire apparaître les limites lors du design*/
}
/*section expérience professionnelle*/  	
.element2
{
    #border: 1px white solid;/*c'est juste pour faire apparaître les limites lors du design*/
    padding-left:10px ;
    padding-right:10px;
    padding-top:0px;
    padding-bottom:20px; 
} 
/*section compétences, langues, etc...*/    
.element3
{
#border: 1px white solid; /*c'est juste pour faire apparaître les limites lors du design*/
padding-left:10px ;
padding-right:10px;
padding-top:0px;
padding-bottom:20px; 
}
/*logos des langues en page d'accueil*/   
.element4/*disposition verticale des images de la page d'accueil principale*/
{
    display: inline-block;
    #border: 1px solid white;/*pour test largeur*/

    padding-left:200px;
    padding-top:10px;
}
.element4 span 
{
    visibility: hidden;/*le exte est caché par défaut*/
  
}
.element4 img:hover + span 
{
    visibility: visible;/*quand je survole l'image le texte apparaît*/
    color: darkturquoise;
    font-weight: bold;
    text-align: center;
    position: relative;/*je positionne le texte relativement à l'image*/
    top: -13%;
    left: -15%;
}


/*balises de navigation*/
nav
{
#display:inline-block;/*permet de mettre les puces cote a cote*/
#border-bottom: 1px solid white;/*je supprime la bordure inférieure du menu de navigation*/
#border: 1px solid white;/*pour test largeur*/
width: 2000px;
margin-top: 100px;
}
/*permet de retirer les puces*/
nav ul
{
list-style-type:none;
}
nav li
{
color: white;
display:inline-block;/*permet de mettre les puces cote a cote*/
#margin-right: 20px;
}

.overlay-image 
{
    display:inline-block;
 
}
 
.active {
    text-decoration: underline;/*souligne la page active*/
}

footer
{
    display: flex;
    padding-top: 25px;
}

footer h1
{
font-size:1.1em ;
}