@font-face {
    font-family: 'gessoregular';
    src: url('../fonts/gesso/GESSO___-webfont.eot');
    src: url('../fonts/gesso/GESSO___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gesso/GESSO___-webfont.woff') format('woff'),
         url('../fonts/gesso/GESSO___-webfont.ttf') format('truetype'),
         url('../fonts/gesso/GESSO___-webfont.svg#gessoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'digital_dreamregular';
    src: url('../fonts/digital/DIGITALDREAM-webfont.eot');
    src: url('../fonts/digital/DIGITALDREAM-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/digital/DIGITALDREAM-webfont.woff') format('woff'),
         url('../fonts/digital/DIGITALDREAM-webfont.ttf') format('truetype'),
         url('../fonts/digital/DIGITALDREAM-webfont.svg#digital_dreamregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bpdotsregular';
    src: url('../fonts/bpdots/BPdots-webfont.eot');
    src: url('../fonts/bpdots/BPdots-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bpdots/BPdots-webfont.woff') format('woff'),
         url('../fonts/bpdots/BPdots-webfont.ttf') format('truetype'),
         url('../fonts/bpdots/BPdots-webfont.svg#bpdotsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Fichier CSS pour le style */
/***********************************************************************************************************************

/********************************************************************************************************************************
RESET css 
********************************************************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ========= FIN DU RESET CSS ================================================== */
body{
    background-color: #7c7777;
    color: #7c7777;
    font-size: 0.9em;
    font-family: verdana, arial;
}
h1{
    font-size: 1.5em;
    margin-bottom: 20px;
    border-bottom: 2px solid #ECE7D1;
    text-transform: uppercase;
    padding: 4px;
    padding-top: 10px;
    width: 60%; 
}
h2{
    font-size: 1.3em;
    margin-bottom: 20px;
    border-bottom: 2px solid #ECE7D1;
    text-transform: uppercase;
    padding: 4px;
    padding-left: 10px;
    color: #EA5026;
    width: 50%;
}


/********************************************************************************************************************************
HEADER
********************************************************************************************************************************/
header{
    background-color: #EA5026;
    height: 120px;
    border-bottom: 2px solid #ea5026;
    color: #000;
}
#bloc123{
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
}
#bloc1 a{
    text-decoration: none;
    color: #D4D4D4;
}
#bloc1{
    background-color: #EA5026;
    width: 140px;
    height: 90px;
    float: left;
    font-size: 35px;
    font-family: gessoregular; 
}
#bloc1 p{
    position: relative;
    top: 21px;
    border-right: 2px solid #D4D4D4;
    display: block;
    width: 120px;
}
#bloc2{
    background-color: #EA5026;
    width: 300px;
    height: 90px;
    margin-top: 30px;
    float: left;
    font-family: digital_dreamregular;
    font-size: 0.9em;
    color: #D4D4D4;
}
#dev{
    position: relative;
    top: 5px;
    font-family: digital_dreamregular;
    font-size: 1em !important;
    
    margin-bottom: 0;
    border-bottom: none;
    text-transform: none;
    padding: 0;
    padding-top: 0;
    width: 100%; 
}
#chef{
    position: relative;
    top: 25px;
}
#bloc3{
    width: 560px;
    height: 70px;
    float: left;
}    
#appelle{
    text-align: right;
    font-size: 0.8em;
    margin-top: 28px;
    color: #D4D4D4;
}

/* ========= FIN DU HEADER ==================================================== */

/********************************************************************************************************************************
NAV 
********************************************************************************************************************************/
nav{
        height: :24px;
        width: 550px;
        position: relative;
        top: 13px;
        left: 80px;
    }
    nav ul{
        height: :24px;
        overflow: hidden;
    }
    nav ul,
    nav li{
        list-style :none;
    }
    nav li{
        width: auto;
        height: :24px;
        margin-right: 28px;
        float:left;
    }
    nav li:last-child{
        margin-right: 5px;
    }
    nav a{
        vertical-align: middle;
        line-height: 42px;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        font-family : bpdotsregular, arial, sans-serif;
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
    }
    nav a:hover{
        border-bottom: 5px solid #D4D4D4;
    }
    nav a.ici{
        border-bottom: 5px solid #D4D4D4;
    }
/* ========= FIN DU NAV ====================================================== */

/********************************************************************************************************************************
SECTION 
********************************************************************************************************************************/
section{
	background-color: #ffffff;
    min-height: 600px;
}
#principale{
	width: 1000px;
    margin-left:auto;
	margin-right:auto;   
}
/********************************************************************************************************************************
Article
*******************************************************************************************************************
/* page accueil  *****************************************************/
#page_accueil{
    width: 980px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
}
#accueil_bloc{
    margin-left: 30px;
}
#accueil_bloc1, #accueil_bloc2, #accueil_bloc3{
    float: left;
    width: 280px;
    height: 300px;
    margin-top: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
}
#accueil_bloc h3, #accueil_bloc p{
    margin-bottom: 16px;
}
#accueil_bloc h3{
    line-height: 18px;
    color: #000;
    font-size: 1.1em;
    border-bottom: 1px solid;
}
#accueil_bloc h3:hover{
    color: #EA5026;
}
#accueil_bloc p{
    line-height: 18px;
}
.plus a{
    font-style: italic;
    text-decoration: none;
    color: #000;
}
.plus a:hover{
    color: #EA5026;
}
#icone{
    text-align: center;
    margin-top: 10px;
}
#icone img{
    width: 100px;
    height: 100px;
    margin-right: 10px;
    text-align: center;
}
#clear{
    clear: left;
}
/* fin page accueil  *************************************************/
/* page apropos  *****************************************************/
#page_apropos{
    width: 980px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
}
#page_apropos p{
    margin-left: 30px;
    margin-right: 30px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: justify;
}
#page_apropos p:last-child{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
}
#page_apropos h2{
    width: 98.5%;
}
#page_apropos h2 img{
    width: 18px; 
    height: 18px;  
}
#fleche_droite{
    position: relative;
    top: 2px;
    left: 770px;
}
#fleche_droite2{
    position: relative;
    top: 2px;
    left: 759px;
}
#page_apropos h3{
    font-size: 1.3em;
    margin-bottom: 6px;
    color: #fff;
}
.barre{
    cursor: pointer; 
}
.rideau{
    background: #ECE7D1; 
    width: 100%; 
    height: auto;
    padding-left: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: none;
}
.rideau ul{
    list-style: square;
}
.rideau li{
    margin-left: 30px;
    margin-bottom: 4px;
}
/* fin page apropos  *************************************************/
/* page contact  *****************************************************/
#page_contact{
    width: 980px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
}
#carte{
    float: left;
}
#contact_message{
    float:left;
    width: 380px;
    height: 285px;
}
#contact_message p{
    margin-top: 40px;
    margin-left: 19px;
    line-height: 20px;
}
#contact_adresse{
    margin-top: 30px;
}
#contact_adresse_titre p:first-child{
    color: #000;
    float: left;
    display: block;
    width: 100px;
}
#trait{
    float: left;
    border-bottom: 1px solid #7C7783;
    display: block;
    width: 200px;
    width: 242px;
  position: relative;
  top: 10px;
  right: 15px;
}
#contact_adresse p{
    margin-top: 10px;
}
.clear{
    clear: left;
}

/* fin page contact  *************************************************/
/* page realisation  *****************************************************/
#page_realisation{
    width: 980px;
    min-height: 624px;
    margin-left: auto;
    margin-right: auto;
}
.portfolio{
    height: 250px;
}
.portfolio:first-child{
    margin-bottom: 10px;
}
.clear{
    clear: left;
}
/* fin page realisation  *************************************************/

/* page mentions  *****************************************************/
#mentions{
	background-color: #ffffff;
	text-align: justify;
}
#mentions h1{
	color: #EA5026;
	margin-left:20px;
	text-align:left;
	border-bottom:2px solid #EA5026;
	width:660px;
}
.titre_ml{
    margin-left: 2%;
}
.contenu_ml{
	margin-left: 20px;
    margin-right: 20px;
    text-indent: 12px;
    line-height: 21px;
    margin-bottom: 2%;
}
#mentions p:last-child{
    margin-bottom: 0;
}
/* fin page mentions  *************************************************/

/* ========= FIN ARTICLE ====================================================== */

/********************************************************************************************************************************

/* ========= FIN DU SECTION ==================================================== */

/********************************************************************************************************************************
FOOTER
********************************************************************************************************************************/
footer{
	background-color: #7c7777;
	min-height: auto;
	clear: left;	
}
#pied{
    width:1000px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
}
footer p{
	margin: 0;
	padding: 0;
    color: #fff;
}	
#ml{
	text-align: right;
    margin-top: 10px;
}
#ml img{
    height: 20px;
    width: 20px;
    position: relative;
    top: 6px;
}
 .lien_footer{
	text-decoration: none;
	text-align: center;
	font-size: 0.8em;
	margin-top: 2px;
	color: #fff;
}
.lien_footer:hover{
	border-bottom: 1px solid #fff;
    color: #fff;
}
#pied_bloc1{
    width: 50%;
    display: inline-block;
    float: left;
    margin-top: 10px;
}
#pied_bloc1 p{
    margin-bottom: 5px;
}
#pied_bloc11{
    width: 25%;
    display: inline-block;
    float: left;
    font-family: gessoregular;
    font-size: 1.1em;
    border-right: 1px solid #fff;
}
#pied_bloc11 a{
    text-decoration: none;
    color: white;
    font-size: 1.1em;
}
#pied_bloc12{
    width: 70%;
    display: inline-block;
    float: left;
    font-family: digital_dreamregular;
    font-size: 0.65em;
    margin-top: 10px;
    margin-left: 10px;
}
#pied_bloc2{
    width: 50%;
    display: inline-block;
    float: left;
}
#la_ml, #la_ct{
    color: #EA5026;
}


/* ========= FIN FOOTER ====================================================== */