/* CSS Document*/
/* Alors on espionne ? ;) */
/* Les Polices */
@font-face {
    font-family:'Mockup-regular';
    src: url('../polices/mockup-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../polices/mockup-regular-webfont.woff') format('woff'), url('../polices/mockup-regular-webfont.ttf')  format('truetype'), url('../polices/mockup-regular-webfont.svg#mockup-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin:0;
    padding:0;
    font-size:18px;
    font-family:Mockup-regular, Arial, Verdana, Helvetica, sans-serif;
    font-style:normal;
}
html {
    background-color:#ffffff;
}
body {
    /*font-size:1em;*/
    line-height:1.4em;
    color:#3399cc;
}
* {
    margin:0;
    padding:0;
}
div#cookie-banner {
    z-index:100;
    position:fixed;
    bottom:0;
    width:100%;
    font-size:.6em;
    border-top:1px solid #ccc;
    background-color:#fff;
    color:#000;
    opacity:.7;
}
div#banniere {
    z-index:1000;
    position:fixed;
    float:left;
    width:100%;
    height:70px;
    margin:0;
    padding:0;
    background-color:#ffffff;
    border-bottom:2px solid #f9a329; 
}
div#logo {
    float:left;
    margin-left:50px;
    margin-top:5px;
}
div#menu {
    float:right;
    margin-top:20px;
    color:#f9a329;
    font-size:1.2em;
    margin-right:100px;
}
div#menu a img#bt_menu_responsive {
    z-index:1;
    display:none;
    margin-top:6px;
    margin-left:10px;
}
div#menu a img#bt_menu_responsive_close {
    z-index:1;
    display:none;
    margin-top:6px;
    margin-left:10px;
}
div#menu nav ul {
    list-style:none;
    z-index:10;
}
div#menu nav ul li {
    display:inline;
}
div#menu nav ul li:nth-child(n+2)::before {
    content:' . ';
}
div#menu nav a {
    color:#3399cc;
    transition-duration: .2s;
}
div#menu nav a:hover, div#menu nav a#actif {
    border-bottom:3px solid #f9a329;
}   
div#mobile {
    z-index:1000;
    float:right;
    margin-top:20px;
    margin-right:50px;
    font-size:1.2em;
}
div#conteneur {
    position:absolute;
    top:70px;
    width:100%;
    margin: 0;
}
div.fond_bleu {
    background-color:#3399cc;
    color:#ffffff;
    padding:20px 100px;
}
div.fond_bleu a {
    color:#ffffff;
}
div.fond_blanc {
    background-color:#ffffff;
    color:#3399cc;
    padding:20px 100px;
}
div.fond_orange {
    background-color:#f9a329;
    color:#3399cc;
    padding:20px 100px;
}

article:not(.large) {
    float:right;
    width:60%;
    padding: 0;
    text-align:left;
}
article.large {
    margin:0 auto;
    width:80%;
    padding: 0;
    text-align:center;
}
aside {
    float:left;
    width:35%;
    padding: 0;
    text-align:right;
}
article h1 {
    font-size:1.5em;
    font-weight:normal;
    margin-bottom:20px;
}
article h2 {
    font-size:1.2em;
    margin-bottom:10px;
    color:#f9a329;
    font-weight:normal;
    text-decoration:none;
}
article a, article.large a {
    /*color:#f9a329;*/
    text-decoration:underline;
}

article div.realisation a {
    text-decoration:none;
}

aside h1 {
    font-size:1.5em;
    font-weight:normal;
    margin-bottom:20px;
}
aside h2 {
    font-size:1.2em;
    margin-bottom:10px;
    color:#f9a329;
    font-weight:normal;
}
article:not(.large) img {
    max-width:40%;
}
/*article.large img:not(.logos .bandeau) {
    width:400px;
}*/
article.large img.photo {
    width:400px;
}
article.large img.bandeau {
    width:100%;
    max-width:1000px;
}

aside img {
    max-width:70%;
}
aside a:not(.lien_telephone .bouton_lien) {
    color:#f9a329;
    text-decoration:none;
}

aside a.lien_telephone {
    color:#ffffff;
    text-decoration:none;
}

span.erreur {
    color:red;
}
div.lien_site {
    font-style:italic;
    font-weight:normal;
    font-size:0.9em;
}

/* réalisations */
div.realisation {
    float:left;
    text-align:center;
    width:33%;
}
div.realisation img {
    max-width:90%;
    border:1px solid #ccc;
    margin:5% 5% 0 5%;
}

a.no_underline {
    text-decoration:none;
}

div.realisation a {
    color:#3399cc;
}

/* prestations */
div.prestation {
    float:left;
    width:30%;
    height:400px;
    padding:0 1%;
}
div.prestation h2 {
    text-align:center;
}
div.prestation .intro {
    text-align:justify;
}
div.prestation img {
    width:80px;
    margin:auto;
    text-align:center;
}

div.prestation a {
    color:#3399cc;
}

div.prestation ul, div.realisation ul, article.realisation ul, ul.sites {
    list-style:none;
    margin-left:30px;
}

div.prestation ul li,div.realisation ul li, article.realisation ul li, ul.sites li {
    text-align:left;
}

div.prestation ul li:before, div.realisation ul li:before, article.realisation ul  li:before, ul.sites li:before {
    content:'> ';
}



/* bas de page */
div#bas_de_page {
    background-color:#3399cc;
    color:#ffffff;
    width:100%;
    height:70px;
    font-size:0.8em;
    vertical-align:bottom;
    margin:0;
    overflow:hidden;
}
div#bas_de_page a {
    color:#ffffff;
}
div#bas_de_page a:hover {
    text-decoration:underline;
}
div#bas_de_page div#logo_bas {
    float:right;
    margin-top:13px;
    margin-left:30px;
    /*margin-right:50px;*/
    transition-duration:.5s;
}
div#bas_de_page div#boutons_bas {
    float:right;
    margin-top:13px;
    margin-left:20px;  
}

div#menu_bas {
    float:left;
    margin-top:20px;
    margin-left:20px;
}
div#menu_bas_suite {
    float:left;
    margin-top:20px;
}
div#bas_de_page div#logo_bas {
    float:right;
    margin-top:13px;
    margin-right:20px;
}

/* En général */
a {
    text-decoration:none;	
    color:#3399cc;
}
.clear_both {
    clear:both;
    width:100%;
}
.separateur_30 {
    clear:both;
    width:100%;
    height:30px;
}
.ligne_pointillee {
    border-bottom: 1px dotted #ccc;
    margin-bottom:20px;  
}
.bouton_lien {
    text-decoration:none;
    background-color:#f9a329;
    border-radius:6px;
    margin: 0 auto;
    padding:10px 30px;
    width:fit-content;
    max-width:300px;
    color:#ffffff;
    display:block;
}
.bouton_lien:before {
    content:'> ';
}
span.accepte_cgu {
    font-size:0.9em;
}


/* Le formulaire de contact */
#destinataire {
width:60%;
text-align:left;
-webkit-border-radius: 3px;
border-radius: 3px;
border-top: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
background-color:#FFF;
font-size:1em;
padding:5px 0 5px 30px;
margin-bottom:10px;
background-repeat:no-repeat;
background-position:5px center;
font-family:inherit;
background-image:url("../images/formulaire/picto_destinataire.png");
}
#destinataire:focus, #destinataire:hover{color:#666666;background-image:url("../images/formulaire/picto_destinataire_hover.png");}
form#form_contact label {
display:none;
}
form#form_contact input[type="text"], form#form_contact input[type="email"], form#form_contact input[type="url"] {
width:50%;
text-align:left;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ccc;
background-color:#ffffff;
font-size:1em;
line-height:1.45em;
padding-left:30px;
min-height:30px;
margin-bottom:10px;
background-repeat:no-repeat;
background-position:5px center;
font-family:inherit;
}
form#form_contact textarea {
width:85%;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #f9a329;
background-color:#ffffff;
font-size:1em;
line-height:1.45rem;
padding:5px 0 0 30px;
min-height:30px;
margin-bottom:10px;
background-repeat:no-repeat;
background-position:5px 5px;
font-family:inherit;
}
/*
form#form_contact select {
background-color:#ffffff;
text-align:left;
vertical-align:middle;
padding:5px;
min-height:20px;
font-family:inherit;
}
*/
form#form_contact input, form#form_contact textarea, form#form_contact select {
color:#999999;
}
form#form_contact input[type="text"]:hover, form#form_contact input[type="text"]:focus, form#form_contact input[type="email"]:hover, form#form_contact input[type="email"]:focus, form#form_contact textarea:hover, form#form_contact textarea:focus, form#form_contact select:hover, form#form_contact select:focus {
border: 1px solid #f9a329;
-webkit-box-shadow: 0px 0px 8px #ffffff;
-moz-box-shadow: 0px 0px 8px #ffffff;
box-shadow: 0px 0px 8px #ffffff;
outline:none;
color:#666666;
}
/*
.form_error {
-webkit-border-radius: 3px;
border-radius: 3px;
border-top: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
background-color:#FFF;
color:#999;
-webkit-box-shadow: 0px 0px 8px red;
-moz-box-shadow: 0px 0px 8px red;
box-shadow: 0px 0px 8px red;
}
.form_error:hover, .form_error:focus{
border: 1px solid red;
color:#34aedd;
-webkit-box-shadow: 0px 0px 8px red;
-moz-box-shadow: 0px 0px 8px red;
box-shadow: 0px 0px 8px red;
}
*/
input:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {opacity: 0;}
input:focus:-moz-placeholder, select:focus:-moz-placeholder, textarea:focus:-moz-placeholder {opacity: 0;}
input:focus::-moz-placeholder, select:focus::-moz-placeholder, textarea:focus::-moz-placeholder {opacity: 0;}
input:focus:-ms-input-placeholder, select:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {opacity: 0;}
::-webkit-input-placeholder, ::-webkit-select-placeholder, ::-webkit-textarea-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
::-moz-placeholder {color:#999;}
:-ms-input-placeholder, :-ms-select-placeholder, :-ms-textarea-placeholder {color:#999;}
/* pictos contact */
.picto_vide{padding:1px 5px 1px 5px; width: auto;}
#nom{background-image:url("../images/formulaire/picto_prenom.png"); }
#nom:hover{background-image:url("../images/formulaire/picto_prenom_hover.png");}
#email{background-image:url("../images/formulaire/picto_mail.png");}
#email:hover{background-image:url("../images/formulaire/picto_mail_hover.png");}
#telephone{background-image:url("../images/formulaire/picto_tel.png");}
#telephone:hover{background-image:url("../images/formulaire/picto_tel_hover.png");}
#adresse{background-image:url("../images/formulaire/picto_adresse.png");}
#adresse:hover{background-image:url("../images/formulaire/picto_adresse_hover.png");}
#complement{background-image:url("../images/formulaire/picto_complement.png");}
#complement:hover{background-image:url("../images/formulaire/picto_complement_hover.png");}
form#form_contact input[type="text"]#code_postal{width:25%; float:left; min-width:100px; margin-right:5%; background-image:url("../images/formulaire/picto_cp.png");}
form#form_contact input[type="text"]#code_postal:hover{background-image:url("../images/formulaire/picto_cp_hover.png");}
form#form_contact input[type="text"]#ville{ width:50%; float:left; background-image:url("../images/formulaire/picto_ville.png");}
form#form_contact input[type="text"]#ville:hover{background-image:url("../images/formulaire/picto_ville_hover.png");}
.picto_piece_jointe{background-image:url("../images/formulaire/piece_jointe.png"); }
.picto_piece_jointe:hover{background-image:url("../images/formulaire/piece_jointe_hover.png");}
.picto_demande{background-image:url("../images/formulaire/picto_demande.png");}
.picto_demande:hover{background-image:url("../images/formulaire/picto_demande_hover.png");}
#pays{background-image:url("../images/formulaire/picto_pays.png");}
#pays:hover{background-image:url("../images/formulaire/picto_pays_hover.png");}
#url{background-image:url("../images/formulaire/picto_pays.png");}
#url:hover{background-image:url("../images/formulaire/picto_pays_hover.png");}
#societe{background-image:url("../images/formulaire/picto_societe.png");}
#societe:hover{background-image:url("../images/formulaire/picto_societe_hover.png");}
form#form_contact input[type="text"]#nb_personnes{width:25%; float:left; min-width:100px; margin-right:5%; background-image:url("../images/formulaire/picto_personnes.png");}
form#form_contact input[type="text"]#nb_personnes:hover{background-image:url("../images/formulaire/picto_personnes_hover.png");}
form#form_contact input[type="text"]#date_arrivee{width:20%; float:left; min-width:100px; margin-right:5%; background-image:url("../images/formulaire/picto_arrivee.png");}
form#form_contact input[type="text"]#date_arrivee:hover{background-image:url("../images/formulaire/picto_arrivee_hover.png");}
form#form_contact input[type="text"]#date_depart{width:20%; float:left; min-width:100px; margin-right:0; background-image:url("../images/formulaire/picto_depart.png");}
form#form_contact input[type="text"]#date_depart:hover{background-image:url("../images/formulaire/picto_depart_hover.png");}
.picto_note{background-image:url("../images/formulaire/picto_note.png");}
.picto_note:hover{background-image:url("../images/formulaire/picto_note_hover.png");}
.picto_recherche{background-image:url("../images/formulaire/loupe-recherche.png"); }
.picto_recherche:hover{background-image:url("../images/formulaire/loupe-recherche_hover.png");}
#message{background:url("../images/formulaire/picto_pen.png") no-repeat 5px 5px;}
#message:hover{background-image:url("../images/formulaire/picto_pen_hover.png");}



/* RESPONSIVE DESIGN */
@media screen and (max-width:1399px) { /* petit écran ordi */
    /* prestations */
    div.prestation {
        float:left;
        width:46%;
        padding:0 2%;
    }
}
@media screen and (max-width:1199px) { /* version tablette */
    div#banniere {
        position:fixed;
        top:0;
    }
    div#menu {
        margin-right:20px;
    }
    div#mobile {
        margin-right:10px;
    }
    div#menu_bas {
        display:none;
    }
    div#menu_bas_suite {
        margin-left:20px;
    }
    div#bas_de_page div#boutons_bas {
        margin-right:20px;
    }
   
    /* réalisations */
    div.realisation {
        float:left;
        width:50%;
    }
}

@media screen and (max-width:999px) { /* smartphone */
    div#menu {
        float:left;
    }
    div#menu nav {
        z-index:-10;
        position:absolute;
        top:72px;
        left:-1100px;
        padding:20px 20px 20px 20px;
        border-bottom:2px solid #f9a329;
        background-color:#ffffff;
        color:#ffffff;
        width:100%;
    }
    div#menu nav ul li {
        display:block;
    }
    div#menu nav ul li:nth-child(n+2)::before {
        content:'';
    }  
    div#menu a img#bt_menu_responsive {
        display:block;
        float:left;
    }
    div#menu a img#bt_menu_responsive_close {
        display:none;
        float:left;
    }
    div#logo {
        position:absolute;
        top:0;
        width:60%;
        margin:0 20%;
        text-align:center;
        line-height:70px;
    }
    div#logo img {
        margin:0 auto;
        vertical-align:middle;
        max-width:70%;
    }

    div#mobile {
        text-align:right;
        margin-top:25px;
        margin-right:10px;
    }
    div#mobile img {
        display:block;
    }
    div#mobile .numero {
        display:none;
    }
    div#bas_de_page {
        height:auto;
        text-align:center;
        margin:0 auto;
    }
    div#menu_bas_suite {
        margin:0 auto;
        width:100%;
        text-align:center;
    }
    div#bas_de_page div#boutons_bas {
        margin:0 auto;
        width:100%;
        text-align:center;
    }
    div#bas_de_page div#logo_bas {
        margin:0 auto;
        width:100%;
        text-align:center;
    }
    
    article:not(.large) {
        float:none;
        width:100%;
        text-align:center;
        padding:0;    
    }
    aside {
        float:none;
        width:100%;
        text-align:center;
        padding:0;
    }
    
    div.fond_bleu {
        background-color:#3399cc;
        padding:20px 2%;
    }
    div.fond_blanc {
        background-color:#ffffff;
        padding:20px 2%;
    }
    div.fond_orange {
        background-color:#f9a329;
        paddbackground-color:#3399cc;
        ing:20px 2%;
    }
    
    /* réalisations */
    div.realisation {
        float:left;
        width:100%;
    }
    
    /* prestations */
    div.prestation {
        float:left;
        width:100%;
        padding:0;
    }
    
    /* Formulaire de Contact */
    form#form_contact input[type="text"], form#form_contact input[type="email"] {width:85%;float:none; margin-right:0;}
    form#form_contact input[type="text"]#code_postal{width:85%; float:none; margin-right:0;}
    form#form_contact input[type="text"]#ville{ width:85%; float:none;}
    form#form_contact input[type="text"]#nb_personnes{width:85%;}
    form#form_contact input[type="text"]#date_arrivee{width:85%; margin-top:10px;}
    form#form_contact input[type="text"]#date_depart{width:85%; margin-top:10px;}

}