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

html, body {
    margin:0;
    padding:0;
    font-size:16px;
    font-family:Raleway, Verdana, Arial, Helvetica, sans-serif;
    font-style:normal;
}
body {
    line-height:1.2em;
    color:#63492e; 
}
* {
    margin:0;
    padding:0;
}
div#cookie-banner {
    z-index:100;
    position:fixed;
    bottom:0;
    width:100%;
    font-size:.9em;
    border-top:1px solid #ccc;
    background-color:#63492e;
    color:#ffffff;
    opacity:1;
}
/* Background de la page d'accueil */
div#photo_principale_ap_accueil {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-101;
    background:url("../images/transparent.png") no-repeat center top fixed; 
    background-size: cover;
}
div#photo_principale_pp_accueil {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-100;
    background:url("../images/transparent.png") no-repeat center top fixed; 
    background-size: cover;
}
div#banniere {
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    height:144px;
    background-color:#c8da30;
}
div#logo {
    float:left;
    margin-left:0;
    margin-top:0;
    height:144px;
    position:relative;
    overflow:hidden;
}
nav {
    display:none;
    position:absolute;
    top:0;
    right:-1000px;
    width:300px;
    height:auto;
    margin-top:0;
    margin-bottom:10px;
    background-color:#65511e;
    font-size:1.5em;
    line-height:1.4em;
}
nav ul {
    margin-top:6px;
    margin-bottom:12px;
}
nav ul li {
    display:block;
    margin:10px 0;
    font-size:1.0em;
    line-height:1.0em;
    font-weight:normal; 
}
nav ul li a {
    display:block;
    color:#ffffff;
    padding:0 10px;
    text-align:right;
    text-decoration:none;
    transition-duration:.8s;   
}
nav ul li a#actif {
    color:#65511e;
    background-color:#ffffff;
    text-decoration:none;
}
nav ul li a:hover {
    color:#ffffff;
    background-color:#c8da30;
    text-decoration:none;
}
nav ul li.premier_ligne2 {
    margin-left:36px;
}
nav ul li ul.subnav li {
    font-size:0.7em;
}

div#langues {
    position:absolute;
    top:0;
    right:0;
    float:right;
    height:40px;
    margin: 40px 10px 0 0;
    text-align:right;
}
div#langues img {
    border-radius:5px;
}
div#pictos {
    float:left;
    margin-bottom:9px;
    margin-right:2px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#pictos a {
    color:#058042;
    font-size:1.4em;
    line-height:1.4em;
    margin:2px;
    text-decoration:none;
}
div#pictos a:hover {
    color:#ffffff;
}


div#pictos a#bt_menu_responsive {
    font-family:Raleway, Verdana, Arial, Helvetica, sans-serif;
    background-color:#058042;
    color:#ffffff;
    padding:5px 8px 5px 8px;
    border-radius:10px;
}
div#pictos a#bt_menu_responsive:hover {
    color:#ffffff;
    background-color:#058042;
    border:2px solid #ffffff;
    transition: 0.5s;
    
}
a#bt_menu_close {
    display:block;
    text-align:right;
    color:#ffffff;
    margin:10px 10px 0 0;
    font-size:0.5em;
    line-height:0.8em;
    text-decoration:none;
}
a#bt_menu_close:hover {
    text-decoration:underline;
}
section {
    width:100%;
    margin:0 auto;
    text-align:left;
    padding:0;
}

div#slogan {
    display:block;
    z-index:1000;
    width:100%;
    background-color:#65511e;
    margin-top:144px;
}
div#slogan h1 {
    font-weight:normal;
    font-size:1em;
    font-style:italic;
    line-height:1.8em;
    color:#ffffff;
    text-align:left;
    margin-left:15px;
    
}
article {
    position:relative;
    font-family:Raleway, Verdana, Arial, Helvetica, sans-serif;
    padding:50px 0;
    text-align:center;
    font-size:1.1em;
    line-height:1.1em;
    font-style:normal;
    font-weight:normal;
    color:#000000;
    background-color:#ffffff;
}
article div#contenu {
    width:1200px;
    margin:0 auto;
}
article h1 {
    color:#000000;
    font-size:1.2em;
    line-height:1em;
    font-weight:bold;
    font-style:normal;
    margin:10px 0;
    background-color:#ffffff;
}
article h1:before {
    position:relative; 
    top:4px;
    margin-right:5px;
}
article h1 a {
    color:#000000;
    text-decoration:none;
}
article h2 {
    font-size:1.3em;
    color:#009036;
    line-height:1.1em;
    font-style:normal;
    margin-bottom:10px;
}

article div.bloc_accueil {
    float:left;
    text-align:center;
    width:29%;
    padding:0 2%; 
}
article div.bloc_accueil img {
    max-width:80%;
    padding:10px;
    border-radius:50%;
    background-color:#65511e;
    transition-duration:0.2s;
    transform: scale(1);
}
article div.bloc_accueil img:hover {
    background-color:#c8da30;
    transition-duration:0.2s;
    transform: scale(1.02);
}
article div.bloc_accueil a {
    color:#65511e;
}
article div.bloc_accueil h1 {
    font-size:1.2em;
}

.diapo_photo img {
    border:3px solid #65511e;
}
.diapo_photo img:hover {
    border:3px solid #c8da30;
}
article a {
    color:#009036;
}    
article ul li {
    margin-left:30px;
}


div.bloc_info {
    float:left;
    text-align:center;
    width:44%;
    padding:1%;
    margin:0 2%;
    background-color:#009036;
    border-radius:10px;
    color:#ffffff;
}
div.bloc_info a {
color:#ffffff;
}
div#bouton_intervention {
    display:block;
    margin:0 auto;
    padding:10px;
    width:200px;
    border-radius:10px;
    background-color:#65511e;
    font-weight:bold;
}
div#bouton_intervention a {
    display:block;
    color:#ffffff;
    text-decoration:none;
}
div#bouton_intervention:hover {
    background-color:#c8da30;
}
div.rassurance {
    float:left;
    text-align:center;
    width:31%;
    padding:0 1%; 
}
div.galerie_photo {
    float:left;
    width:18%;
    padding:1%;
}

div.galerie_photo img {
    width:100%;
}



/* bas de page */
div#bas_de_page {
    z-index:10;
    font-family:Raleway, Verdana, Arial, Helvetica, sans-serif;
    background-color:#c8da30;
    color:#058042;
    width:100%;
    font-size:0.9em;
    line-height:0.9em;
    vertical-align:middle;
    text-align:right;
    padding-top:0px;
    overflow:hidden;
    border-top:20px solid #65511e;
}
div#bas_de_page a {
    color:#058042;
    text-decoration:none;
}
div#bas_de_page a:hover {
    color:#058042;
}

div#bas_de_page div#gauche {
    float:left;
    text-align:center;
}
div#bas_de_page div#gauche a {
    font-size:0.9em;
    text-decoration:none;
    color:#ffffff;
}
div#bas_de_page div#milieu {
    margin-left:40px;
    margin-top:20px;
    font-size:1.2em;
    line-height:1em;
    float:left;
    text-align:left;
}
div#bas_de_page div#droite {
    float:right;
    margin-top:30px;
    margin-right:20px;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    padding-bottom:10px;
}

/* En général */
.clear_both {
    clear:both;
    width:100%;
}
.separateur_10 {
    clear:both;
    width:100%;
    height:10px;
}
.separateur_30 {
    clear:both;
    width:100%;
    height:30px;
}
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:0.8em;
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:not(.etoile){
display:none;
}
form#form_contact label.etoile {
display:block;
}
form#form_contact input[type="text"], form#form_contact input[type="email"] {
width:50%;
text-align:left;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ccc;
background-color:#ffffff;
font-size:0.8em;
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:0.8em;
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;
font-size:1em;
line-height:1.45rem;
padding:5px;
min-height:20px;
font-family:inherit;
margin-bottom:10px;
}

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;
}

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:center; 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:center; 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");}
#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");}
#titre{background:url("../images/formulaire/picto_pen.png") no-repeat 5px 5px;}
#titre:hover{background-image:url("../images/formulaire/picto_pen_hover.png");}





/* RESPONSIVE DESIGN */

@media screen and (max-width:1259px) { /* version tablette */
    article {
        
    }
    article div#contenu {
        width:100%;
    }
}
@media screen and (max-width:1059px) { /* version tablette */
    div#pictos a.optionnel {
        display:none;
    }
        
    /* 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;}

    span#signature {
        display:none;
    }
    div#bas_de_page div#gauche, div#bas_de_page div#milieu, div#bas_de_page div#droite {
        float:none;
        width:100%;
        margin-left:0;
        margin-right:0;
        text-align:center;
    }
    div#bas_de_page {
        padding-right:0;
        text-align:center;
    }
}

@media screen and (max-width:960px) {
    div#banniere {
        height:109px;
    }
    div#slogan {
        margin-top:108px;
    }
    div#slogan h1 {
        font-size:1em;
        line-height:1.4em;
    }
    div#langues {
        margin: 29px 10px 0 0;
    }
    div#logo {

    }
    div#logo img {
        width:75%;
    }
    nav {
        font-size:1.2em;
        line-height:1.2em;
    }
    article h1 {
        font-size:1.1em;
        margin-bottom:10px;
    }
    article h2 {
        font-size:1em;
        margin-bottom:10px;
    }
    article div.bloc_accueil img {
        padding:5px;
    }
}

@media screen and (max-width:600px) {
    div#banniere {
        height:94px;
    }
    div#logo img {
        width:60%;
        overflow:hidden;
    }
    div#pictos a.optionnel2 {
        display:none;
    }

    div#langues {
        float:right;
    }
    div#langues > a > img {
        height:20px;
        margin-bottom:10px;
        margin-right:10px;
    }
    div#pictos a {
        font-size:1.3em;
    }
    div#pictos {
        width:100%;
        text-align:right;
    }

    div.article_gauche {
        float:left;
        width:98%;
        padding:1%;
    }
    div.article_droite {
        float:left;
        width:98%;
        padding:1%;   
    }
    div.article_demi_gauche {
        float:left;
        width:98%;
        padding:1%;
    }
    div.article_demi_droite {
        float:left;
        width:98%;
        padding:1%;
    }  
    div.article_equipe {
        width:98%;
    }
    div#slogan {
        margin-top:93px;
    }
    div#slogan h1 {
        font-size:0.8em;
        line-height:1.3em;
    }
    article div.bloc_accueil img {
        padding:3px;
    }
    div.bloc_info {
        margin:20px 2%;
        width:92%;
        padding:2%;
    }
    div.galerie_photo {
        float:left;
        width:48%;
        padding:1%;
    }
}

@media screen and (max-width:490px) {
    nav {
        width:100%;
    }
    div#bas_de_page div#gauche img {
        width:96%;
    }
    div#slogan h1 {
        font-size:0.7em;
        line-height:1.3em;
    }
}