body /* fond du site*/{
        /*background-image: url("images/fond_degrade_image.png");*/
	background-color: #ffffff;
	background-attachment: fixed;
	background-repeat: repeat-x;
	font-size: 14px;
	font-family : Arial, sans-serif ;
	}
.logo1 /* image du logo */{
	display: block;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
.estelle-jouanny /* image du titre*/{
	display: block;
	float: left;
	max-width: 300px;
	padding-top: 30px;
	margin-left: 30px;
	margin-right: auto;
}

.header_white /* fond blanc derrière logo et titre */{
	z-index: 1;
	display: block;
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	max-width: 1240px;
	min-width: 300px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	}
.fond_menu /* barre blanche en arrière plan du menu pour faire joli au delà des boutons */{
	z-index: 2;
	background-color: #ffffff;
	background-repeat: no-repeat;
	max-width: 1220px;
	min-width: 300px;
	height: 35px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px black solid;
	border-bottom-color: #000000;
	padding-right: 20px;
}
#menu, #menu ul  /* Liste du menu */ {
	float: right;
	padding : 0;
	margin : 0;
	list-style : none; /* on supprime le style par défaut de la liste */
	line-height : 35px;
	text-align: center;
}
#menu /* Ensemble du menu */ {
	display: block;
	font-weight : bold;
	font-size : 12px;
	line-height: 35px;
	max-width: 800px;
	min-width: 125px;
	margin-left: auto;
	margin-right: auto;
}
#menu a /* Contenu des listes */ {
	display : block; /* les liens deviennent des balises de type block */
	padding : 0px;
	background : #ffffff;  
	color : #000000;
	text-decoration : none; /* on supprime le style par défaut des liens */
	padding-left: 20px;
	padding-right: 20px;
}
#menu li /* Éléments des listes */ {
 	float : left;
}

#menu a:hover /* Lorsque la souris passe sur un des liens du menu */ {
	color: #9b9b9b;
	background: #ffffff;
}
#menu li:hover ul {
	display: block;
	position: absolute;
	width: 80px;
}
#menu li:hover li {
	float: none;
}
/* On montre le premier texte */
.text-base{
   opacity:1;
}
/* On cache le second texte */
.text-hover{
   display:none;
}
/* On fait disparaitre le premier texte au passage de la souris. */
.button:hover span.text-base{
   opacity:0;
}
/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover{
   display:inherit;
   position:absolute;
}
.conteneur /*fond blanc contenant le contenu de chaque page */{
	z-index: 1;
	background-color: #ffffff;
	max-width: 1110px;
	min-width: 260px;
	min-height: 550px;
	margin-left: auto;
	margin-right: auto;
	padding: 65px;
	}
.conteneur p{
	text-align: justify;
	text-indent: 3em;
	}
.footer /* fond derrière le mail et bouton réseaux sociaux */{
	z-index: 1;
	display: block;
	float: center;
	background-color: #ede9df;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	min-width: 300px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 65px;
	padding-right: 65px;
	padding-top: 40px;
	padding-bottom: 40px;
	}
.footer_info /* mise en forme du texte copyright + adresse mail*/{
	float: left;
	}
.footer_mail_text /* mise en forme du texte mail du footer "contactez-moi !"*/{
	float: center;
	margin-top: -5;
	vertical-align:middle;
	}
.footer_social /* mise en forme des icones de reseaux sociaux dans le footer */{
	float: right;
	margin-top: -30;
	}
/* -----
SVG Icons - svgicons.sparkk.fr mise en forme des icones de réseaux sociaux en SVG
----- */
.svg-mail {
  width: 2em;
  height: 2em;
  margin-left: 7px;
  vertical-align:middle;

}
.svg-mail path,
.svg-mail polygon,
.svg-mail rect {
  fill: #000000;
}
.svg-mail circle {
  stroke: #000000;
  stroke-width: 1;
}
.svg-mail:hover{
	opacity: 0.5;
}
.svg-icon {
  width: 2em;
  height: 2em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #000000;
}
.svg-icon circle {
  stroke: #000000;
  stroke-width: 1;
}
.svg-icon:hover{
	opacity: 0.5;
}
h1 /* mise en forme des grands titres de page */ {
	font-family : Calibri, sans-serif;
	font-size : 2em;
	text-align : left;
	letter-spacing: 6px;
	color : #000000;
	}
i{
	text-decoration: none;
	color: black;
	}
p {
	text-decoration: none;
	color: black;
	}
a{
	text-decoration: none;
	color: #979797;
	}
a:hover{
	text-decoration: none;
	color: #c1c1c1
	}
a:active{
	text-decoration: none;
	color: #979797;
	}	
a:visited{
	text-decoration: none;
	color: #c1c1c1;
	}
strong {
	font-size:16px;
	}
.bouton /* boutons de contact fb mail */ {
	display : inline-block;
	float: right;
	margin: -5px;
	margin-bottom: 15px;
	}
.bouton a:hover{
	opacity: 0.6; 
	}
.bouton_dl /* boutons de téléchargement */ {
	float: left;
	}
.bouton_dl p{
	text-decoration: none;
	color: #dea605;
	margin-bottom: -10px;
	}

.bouton_dl a:hover{
	opacity: 0.6; 
	}

.photo /* photo de profil */{
	display: block;
	float: left;
	width: 80px;
	margin-right: 20px;
	margin-bottom: 20px;
	}
/* ci dessous mise en forme du conteneur des éléments qui doivent être flex / pages références ! */
.element{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
/* ci dessous mise en forme des boites présentant les travaux */
article{
	display: inline-block;
	width: 95%;
	max-height: 250px;
	min-height: 66px;
	overflow: hidden;
	margin: 10px;
	padding: 0px;
	}
article img {
	width: auto;
	min-width: 100px;
	max-height: 250px;
	min-height: 66px;
	float: left;
	padding-right: 10px;
	}
article img:hover {
	opacity: 0.8;
}
p.texte-article {
	margin-top: 10px;
	text-indent: 0px;
	color: #000000;
	}	
/* ci dessous mise en forme de tous les titres et sous titres du cv */
.titre-estelle /* mise en forme des titres du cv */ {
	font-family : Calibri, sans-serif;
	font-size : 1.5em;
	text-align : left;
	color : #000000;
	border-bottom: 3px #dea605 solid;
	border-left: 3px #dea605 solid;
	padding-left: 5px;
}
.cv-estelle /* mise en forme des categories/sous-titres du cv estelle */ {
	color: #dea605;
	font-family : Arial, sans-serif;
	text-decoration: none;
	margin-bottom: 4px;
}
h4 /* mise en forme des petits détails du cv */ {
	font-size: 12px;
	font-family : Arial, sans-serif ;
	color : #979797;
	text-indent : 3em;
	margin-top: 3px;
}