/* 
    Created on : 24 juin 2019, 12:41:07
    Author     : Xavier avec BEAUCOUP d'aide de www.w3schools.com
*/


/* Les Couleurs 
 * Cr�me  : #F5EAD4
 * Orange : #D2691E  V2.0 : FF6200
 * Vert   : #556B2F
 * Fonc�  : #582900
 * 
*/

@import "Menu.css" screen;
@import "Tarifs.css" screen;
@import "Slider.css" screen;
@import "Calendrier.css" screen;
@import "Form.css" screen;
* {box-sizing:border-box}

body, html {
    background-color:#0A0A0A; /*#F5EAD4; */
    height: 100%;
    margin: 0;
    padding: 0;
    color: #fbf4e5;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* La grosse Image */
[class^="bgimg-"]{
  opacity: 0.95;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 65%;
}

.bgimg-Index {
  background-image: url("../images/Maison_logo.jpg");
}

.bgimg-Amoureux {
  background-image: url("../images/VueMoulin.jpg");
}

.bgimg-Famille {
  background-image: url("../images/LeFamille/Fam_Terrasse_1.jpg");
}

.bgimg-LivreOr {
    background-image: url("../images/AVisiter/PANO_20191205_165802.jpg");
}

.bgimg-Tarifs {
    /*background-image: url("../images/PANO_20190829_112315.jpg");*/
    background-image: url("../images/AVisiter/Montgolfiere1.jpg");
}

.bgimg-Resa {
    background-image: url("../images/IMG_20190728_124840.jpg");
}

.bgimg-QueVoir {
    background-image: url("../images/AVisiter/Montgolfiere0.jpg");
}

.caption {
  position: absolute;
  left: 0;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fbf4e5; 
}

.caption span.border {
  /* background-color: #111; */
    font-family: logo;
    color: #fbf4e5;
    padding: 18px;
    font-size: 3em;
    letter-spacing: 5px;
    //color : #000000;
    text-shadow: 3px 5px 0 rgba(0, 0, 0, 1); 

}

.centrer {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-size: 1.5em;
  
}

/* Bloc Ecriture */
.bloc{
    display: table;
    width: 100%;
    background-color: #0A0A0A;
    color : #fbf4e5;
    font-size: 1.5em;
    padding-left: 1%;
    padding-right: 1%;
    border-spacing: 5px;
    /* border: solid 1px #af9769; */
}
/* Clear floats after the columns */
.bloc:after {
  content: "";
  display: table;
  clear: both;
}

.gauche {
    display: table-cell;
    width: 35%;
    padding:0em 0.5em; /* 2em 0em 1em; */
    vertical-align: top;
    border: solid 0px yellow;
}

.droite {
    display: table-cell;
    width: 65%;
    padding:0em 0.5em ; /* 2em 0em 1em; */
    vertical-align: top;
    border: solid 0px green; 
}
H2 .droite {
    display: inline-block;
    padding:0em 0.5em ; /* 2em 0em 1em; */
    vertical-align: top;
    text-align: right;
    float: right;
}

.middle {
    display: block;
    width: 50%;
    padding:0em 0.5em ; /* 2em 0em 1em; */
    vertical-align: top;
    border: solid 0px green; 
}

.middle::before {
    display: block;
    margin: 0, auto;
    text-align: center;
}
.bloc2{
    display: table;
    width: 100%;
    padding:0em ; /* 2em 0em 1em; */
    background-color: #0A0A0A;
    color : #fbf4e5;
    border: solid 0px red;
}

.droite50 {
    display: table-cell;
    width: 50%;
    padding:0em ; /* 2em 0em 1em; */
    vertical-align: top;
    border: solid 0px blueviolet;
}

.zoneOR{
    background: linear-gradient(to bottom, #ceb991 0%, #a68e5f 100%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: solid 3px #af9769;
    color : #0A0A0A;
    padding: 0 0.5em;
    margin : 0.5em;
}

.zoneOR ul {
    display: block;
    list-style:none;
    margin-left:0;
    padding-left:0;
    list-style-type: disc;
}

.zoneOR li {
    display: inline-block;
    padding-right: 5px;
    font-size: 0.7em; 
}

.fa {
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    display: inline-block;
    color: #7b6333;
    padding-right: 5px;
    font-size: 0.75em;
}

.saison {
    list-style-type: circle;
    margin-left:0;
    padding-left:0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-right: 5px;
    font-size: 0.7em; 
}
.gauche .ligne{
    margin : 0 0 0 0.5em ;
    border: solid 0px yellow;
}
.gauche img {
  /*border: 1px solid #ddd; /* Gray border */
  /*border-radius: 4px;  /* Rounded border */
  padding: 2px 2px; /* Some padding */
  width: 150px; /* Set a small width */
  //height: 90px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
.gauche img:hover {
  box-shadow: 0 0 2px 1px rgba(255, 98, 0, 0.5);
}

.p_droite{
    text-align: right;
    margin: 0 1em 0 0 ;
} 
.p_droite::before{
    margin: 0 ;
} 

b, .contact {
    color: #BED000;
}

H1{
    color: #BED000;
    font-size: 2em;
    font-weight: bolder;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5);
    border-bottom: solid 2px #BED000; /* fbf4e5;*/
    text-transform: capitalize;
}

H2{
    color: #0A0A0A;
    font-family:serif;
    font-style: oblique;
    font-size: 1em;
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1);
    border-bottom: solid 1px #af9769 ; /* fbf4e5;*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    text-transform: capitalize;
}

H3{
    color: #af9769;
    font-family:serif;
    font-style: oblique;
    font-size: 1em;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
    border-bottom: solid 1px #af9769 ; /* fbf4e5;*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 0 0.5em;
    margin : 0.5em;
    text-transform: capitalize;
}

h4{
    color: #BED000;
    font-family:serif;
    font-size: 1em;
    padding: 0 0.5em;
    margin : 0.5em;
}


a {
    text-decoration: none;
}

/* unvisited link */
a:active, a:visited, a:link {
  color: #BED000; 
}

/* mouse over link */
a:hover {
  color: #FFFFFF;
}

/* Bloc Titre */
.blocTitre{
    display: table;
    width: 80%;
    font-size: 1.5em;
    margin : auto;
}

.blocFlex{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    color : #FFFFFF;
    font-size: 1.5em;
    padding:0 2em;
    margin-bottom: 1em;
    align-items: center;
}
.blocFlex i{
    font-size: 3em;
}

.infobulle {
    position: relative;
}

/* Infobulle des Tarifs dans les pages des gîtes */
.infobulle-texte {
    position: absolute;
    bottom: 6.75em;
    left: 3em;
    width: 15em;
    color: #000000;
    padding: 5px;
    font-size: 1em;
    background-color: #ffffe1;
    border:2px dotted #BED000;
}

/* InfoBulle des options dans la page des tarifs */
.infobulle-option {
    position: absolute;
    bottom: 1em;
    left: 1em;
    width: 15em;
    color: #000000;
    padding: 5px;
    font-size: 0.75em;
    background-color: #ffffe1;
    border:2px dotted #BED000;
}

img.infobulle-icone {
cursor: help;
}

ul.double {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
iframe {
    display: block;
    margin: 1em auto;
}

.gauche_cachee{
    display: none;
}

@media screen and (max-width: 992px) {
    [class^="bgimg-"] {
        max-height: 20vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
        max-height: calc(var(--vh, 1vh) * 20); 
        background-position: right;
        /* max-width: 100vw; */
    }

    .bloc {
        display: block;
    }

    .gauche {
        display: block;
        width: 100%;
        font-size: 2em;
    }

    .gauche_cachee{
        display: block;
        width: 100%;
        font-size: 2em;
    }
  
    .droite {
        display: block;
        font-size: 1.15em;
        width: 100%;
    }

    .gauche .column {
        line-height: 100px;
        height: 100px;
        text-align: center;
    }
  
    .caption {
        top: 10vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
        top: calc(var(--vh, 1vh) * 10);
    }
 }