/* 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:14px;
    font-family:Raleway, Arial, Verdana, Helvetica, sans-serif;
    font-style:normal;
}
html {
    /*background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background:url("../images/cadre-de-ruche.jpg") no-repeat center center;
    background-attachment: fixed;
    */
    height:100%;
    min-height:100%;
    /*background-image:url("../images/photo.jpg");*/
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;        
}
body {
    line-height:1.2em;
    color:#555454; 
}
* {
    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:#555454;
    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:110px;
    margin:0;
    background-color:#ffffff;
}
div#logo {
    float:left;
    margin-left:10px;
    margin-top:10px;
    position:relative;
}
nav {
    display:none;
    position:absolute;
    top:0;
    right:-1000px;
    width:300px;
    height:auto;
    margin-top:0;
    margin-bottom:10px;
    background-color:#366732;
    font-size:1.5em;
    line-height:1.4em;
}
nav ul {
    margin-top:12px;
    margin-bottom:12px;
}
nav ul li {
    display:block;
    font-size:1.0em;
    line-height:1.2em;
    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:#366732;
    background-color:#ffffff;
    text-decoration:none;
}
nav ul li a:hover {
    color:#ffffff;
    background-color:#afafaf;
    text-decoration:none;
}
nav ul li.premier_ligne2 {
    margin-left:36px;
}

div#langues {
    position:absolute;
    top:0;
    right:0;
    float:right;
    height:40px;
    margin: 39px 10px 0 0;
    text-align:right;
}
div#langues img {
    border-radius:5px;
}
div#pictos {
    float:left;
    margin-bottom:9px;
    margin-right:2px;
}
div#pictos a {
    color:#366732;
    font-size:1.4em;
    line-height:1.4em;
    margin:2px;
    text-decoration:none;
}
div#pictos a#bt_menu_responsive {
    font-family:Raleway, Arial, Verdana, Helvetica, sans-serif;
    background-color:#366732;
    color:#ffffff;
    border-radius:10px;
    padding:5px 8px 5px 8px;
}
div#pictos a#bt_reserver {
    font-family:Raleway, Arial, Verdana, Helvetica, sans-serif;
    background-color:#366732;
    color:#ffffff;
    border-radius:10px;
    padding:5px 8px 5px 8px;
    text-transform:uppercase;
}
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;
}

div#pictos_qualite {
    text-align:center;
}
div.pictos_element {
    float:left;
    width:23%;
    padding:1%;   
}

.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 4em;
  vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}

article {
    position:relative;
    width:1000px;
    margin:150px auto 0 auto;
    padding:20px;
    margin-bottom:26px;
    background: rgba(239, 238, 234, 0.9);
    border-radius:10px;
    text-align:justify;
    font-size:1.4em;
    line-height:1.1em;
    font-style:normal;
    font-weight:normal;
    color:#555454;
}
article a {
    color:#555454;
}
article div.bt_close {
    position:absolute;
    top:5px;
    right:8px;
    cursor:pointer;
}
article h1 {
    color:#555454;
    font-size:1.4em;
    line-height:1em;
    font-style:normal;
    margin-bottom:5px;
}
article h1:before {
    content:url('../images/puce_titre.png') ;
    position:relative; 
    top:4px;
    margin-right:5px;
}
article h2 {
    color:#555454;
    font-size:1.2em;
    line-height:1em;
    font-style:normal;
    margin-bottom:5px;
}
article #diaporama img {
    border-radius: 10px;
    overflow:hidden;
    z-index:1;
}
article div.choix {
    float:left;
    margin-bottom:10px;
}
article div.photo_choix {
    float:left;
    width:46%;
    padding:0 2% 20px 2%;
    text-align:center;
    font-size:0.9em;
}
article div.photo_choix img {
    border-radius:10px;
    float:left;
    width:100%;
    transform: scale(0.95);
    transition: transform .2s;
}
article div.photo_choix img:hover {
    transform: scale(1.0);
}

article .photo {
    float:left;
    width:31%;
    padding:1%;
}
article .photo img {
    border-radius:10px;
    float:left;
    width:100%;
    overflow:hidden;
}

article .bt_suivre, article .ensavoirplus {
    font-size:1em;
    font-style:normal;
}
article #galerie_article {
    float:left;
    width:100%;
}
article #galerie_article img {
    float:left;
    width:96%;
    padding:2%;
}
article ul li {
    margin-left:30px;
}

article#accueil {
    position:absolute;
    float:none;    
    left:90px;
    top:400px;
    width:700px;
    padding:20px;
    margin-bottom:50px;
    border-radius:10px;
}
article#accueil div#labels {
    background-color:#ffffff;
    border-radius:10px;
    width:300px;
    margin:0 auto;
    text-align:center;
}

/* TARIFS */
table thead tr th {
    background-color:#366732;
    color:#ffffff;
    border-spacing: 2px;
}
table tbody tr {
    background-color:#b9f0ae;
    min-height:28px;
}
table tr th {
    padding: 5px;
    color:#ffffff;
    background: #b9f0ae;
}
table tr td {
    padding: 5px;
}
table tr:nth-child(1)
{
    color:#ffffff;
    background: #366732;
}

div.bloc_gite {
    float:left;
    width:46%;
    padding:2%;
}
div.bloc_gite img {
    width:100%;
    border-radius:10px;
}
div.bouton {
    width:200px;
    margin:0 auto;
    text-align:center;
    border-radius:10px;
    background-color:#555454;
}
div.bouton > a {
    color:#ffffff;
    text-decoration:none;
}
.contenu .bt_suivre a {
    background-color:#555454;
    border-radius:6px;
    color:#ffffff;
    float:right;
    margin:10px 0 0 10px;
    padding:6px 10px 4px 10px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    font-size:1em;
}
.contenu .bt_suivre a:hover {
    background-color:#4b5a6a;
}
div.contenu > a {
    color:#555454;
    text-decoration:underline;
    z-index:100;
}
div.contenu img {
    /*width:100%;*/
    border-radius:10px;
}
div.contenu #actu {
    background-color:#555454;
    color:#ffffff;
    border-radius:10px;
    padding:10px;
}
div.contenu #actu h2 {
    color:#ffffff;
}

article div.photo_actu {
    float:left;
    width:46%;
    padding:0 2%;
    text-align:center;
    font-size:0.9em;
}
article div.photo_actu img {
    border-radius:5px;
    float:left;
    width:100%;
}


div.temoignage {
    position:relative;
    width:1000px;
    margin:0 auto 26px auto;
    padding:20px;
    background: rgba(239, 238, 234, 0.9);
    border-radius:10px;
    text-align:justify;
    font-size:1.4em;
    line-height:1.1em;
    font-style:normal;
    font-weight:normal;
    color:#555454;
}
div.temoignage::first-letter {
    text-transform:uppercase;
}
div.temoignage h2 {
    font-size:0.9em;
}
div.temoignage h2 a {
    color:#555454;
    text-decoration:none;
}
div.temoignage .temoignage_photo {
    float:left;
    width:30%;
}
div.temoignage .temoignage_photo img {
    border-radius: 10px;
    float:left;
    width:100%;
}
div.temoignage .temoignage_texte {
    float:left;
    width:68%;
    margin-left:2%;
}
div.temoignage .temoignage_date {
    font-size:0.8em;
    font-style:italic;
}



/* Les Listings (agenda) */
div.listing {
width:100%;
/* height:138px; */
padding:10px 0 10px 0;
border-bottom:1px dotted #ffffff;
}
div.listing_image, div.listing_image_portrait, div.listing_image_paysage {
width:180px;
height:135px;
float:left;
text-align:center;
margin:0 15px 0 0;
overflow:hidden;
}
div.listing_image img {
height:135px;
}
div.listing_image_portrait img {
height:135px;
}
div.listing_image_paysage img {
height:135px;
}
h3 {
margin:5px 0 10px 0;
}
h3 a {
font-size:1.1rem;
line-height:1.1rem;
text-decoration:none;
}
a.a_listing_lire_la_suite {
display:block;
text-align:right;
text-decoration:none;
font-style:italic;
font-weight:bold;
}
div#pagination {
display:block;
text-align:center;
font-size:1.1rem;
line-height:1.1rem;
font-weight:bold;
}
div#pagination a {
font-size:1.1rem;
line-height:1.1rem;
font-weight:bold;
}


/* LISING DES PRODUITS */
div.produit {
    float:left;
    width:100%;
}

div.produit_photo {
    float:left;
    width:200px;
    margin-right:20px;
}

div.produit_photo img {
    width:100%;
}

div.produit_texte {
    float:left;
    width:480px;
}



/* bas de page */
div#bas_de_page {
    position:fixed;
    bottom:0;
    right:0;
    background-color:#ffffff;
    color:#555454;
    width:100%;
    height:40px;
    font-size:0.9em;
    line-height:2.4em;
    vertical-align:middle;
    text-align:right;
    padding-right:20px;
    overflow:hidden;
}
div#bas_de_page a {
    color:#555454;
    text-decoration:none;
}
div#bas_de_page a:hover {
    text-decoration:underline;
}

div#bas_de_page span#gauche {
    margin-left:40px;
    float:left;
}
div#bas_de_page span#droite {
    float:right;
}


/* 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;
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");}
#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");}



/* AVIS */
 h2.avis_titre {
     text-align:left;
 }
 span.avis_etoile {
     color:#54c61c;
 }
 span.avis_signature {
    font-size:0.8em;
    font-style:italic;
    color:#000;
 }
 div.avis_reponse {
    margin-top:5px;
    margin-left:30px;
    padding:5px;
    background:#dfc8b0;
    color:#000;
    border-radius:5px;
}

/* Rating styles */
.wrapper {
    padding: 5px;
    min-height: 30px;
    border:none;
}
.rating {
    overflow: hidden;
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    height: 30px;
}
.rating > input {
    opacity: 0;
    margin-right: -100%;
    display: none;
}
.rating > label {
    position: relative;
    display: block;
    float: right;
    background: url('../images/rating/star-off-big.png');
    background-size: 30px 30px;
}
.rating > label:before {
    display: block;
    opacity: 0;
    content: '';
    width: 30px;
    height: 30px;
    background: url('../images/rating/star-on-big.png');
    background-size: 30px 30px;
    transition: opacity 0.2s linear;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating:not(:hover) > :checked ~ label:before{
    opacity: 1;
}

/* RESPONSIVE DESIGN */
@media screen and (max-width:1059px) { /* version tablette */
    article {
        position:relative;
        float:right;
        width:88%;
        margin-left:2%;
        margin-right:2%;
        padding:20px 4%;
    }
    article#accueil {
        position:relative;
        float:right;
        width:88%;
        margin-left:2%;
        margin-right:2%;
        padding:20px 4%;
        left:0;
        top:0;
    }
    div.temoignage {
        position:relative;
        float:right;
        width:88%;
        margin-left:2%;
        margin-right:2%;
        padding:20px 4%;
    }
    div.temoignage .temoignage_photo {
        float:left;
        width:30%;
    }
    div.temoignage .temoignage_texte {
        float:left;
        width:68%;
        margin-left:2%;
    }
    /* 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#bas_baseline {
        display:none;
    }
    span#signature {
        display:none;
    }
    div#bas_de_page span#gauche {
        float:none;
        margin-left:0;
        text-align:right;
    }
    div#bas_de_page span#droite {
        float:none;
        text-align:left;
    }
    div#bas_de_page {
        padding-right:0;
        text-align:center;
    }
}


@media screen and (max-width:930px) {
    div#pictos a#bt_reserver {
        display:none;
    }
}
    
@media screen and (max-width:760px) {
    div#banniere {
        position:absolute;
        top:0;
        left:0;
        height:85px;
    }
    div#langues {
        margin: 29px 10px 0 0;
    }
    div#logo {
        margin-left:5px;
        margin-top:10px;
    }
    div#logo img {
        width:70%;
    }
    div#pictos a.optionnel {
        display:none;
    }
    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;
    }
    div.produit {
        float:left;
        width:100%;
    }
    div.produit_photo {
        width:100%;
        text-align:center;
    }
    div.produit_texte {
        width:100%;
    }
    div#bas_de_page span#gauche {
        display:none;
    }
        div.temoignage .temoignage_photo {
        float:left;
        width:100%;
    }
    div.temoignage .temoignage_texte {
        float:left;
        width:100%;
        margin-left:0;
    }
    article .photo {
        float:left;
        width:48%;
        padding:1%;
    }
}

@media screen and (max-width:600px) {
    article div.photo_choix {
        width:96%;
        padding:0 2% 20px 2%;
        text-align:center;
        font-size:0.9em;
    }
    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 {
        text-align:right;
    }
    div.pictos_element {
        float:left;
        width:48%;
        padding:1%;   
    }
    div.bloc_gite {
        float:left;
        width:96%;
        padding:2%;
    }
    article div.photo_actu {
    width:96%;
    padding:0 2%;
}
}

@media screen and (max-width:490px) {
    div#logo img {
        margin-top:10px;
        width:40%;
    }
    nav {
        width:100%;
    }
    article .photo {
    float:left;
    width:98%;
    padding:1%;
    }
    div.pictos_element {
        float:left;
        width:48%;
        padding:1%;   
    }
}