/* Mise en forme par défaut ou pour mobiles*/
* {box-sizing:border-box;}
html {font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:14px;font-weight:bold;color:#06c;}
body {margin:auto;background-image:url('../img/FndBlcOmbre.jpg');background-position:center top;background-repeat:no-repeat;}
a {text-decoration:none;}
p {text-align:justify;}
.center {display:block;margin-right:auto;margin-left:auto;max-width:70%;}
#main {margin:auto;max-width:1000px;}
.row {margin:auto;max-width:1000px;}
.row::after {content:"";display:table;clear:both;}
.entete {display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;text-align:center;color:#06c;background-image:linear-gradient(120deg,#00a8e9, #b7d4df 30%, #b7d4df 70%,#00a8e9);}
#logo-gdf-p {height:auto;padding:15% 0 15% 15%;Width:100%;}
#img-titre {height:auto;padding-top:.8em;max-width:400px;Width:90%;}
.entete p {margin:0 auto;padding-bottom:1em;text-align:center;}
.entete a {color:#06c;}
#epis {fill:#639000;}
#epis:hover {cursor:pointer;fill:#8bbb24;}
#epis svg {width:20px;height:20px;}
#logo-nat {z-index:3;position:absolute;top:10px;left:10px;width:13%;}
#accueil > div {position:relative;}
#ico-plan {width:100px;margin:0 auto 1em;text-align:center;font-size:10px;}
#ico-plan img {border-style:none;}
label {cursor:pointer;}
#ico-plan label {text-decoration:none;color:#06c;}
#ico-plan:hover label {text-decoration:underline;color:#900;}
#carte {height:400px;z-index:0;}
.ico-pdf{vertical-align: -0.6em;}
/* Bouton réserver */
.btn-reserver {width:100%;padding:8px;background-color:white;}
.btn-reserver div {width:150px;margin:auto;padding:10px 18px;border:2px solid  coral;border-radius:25px;text-align:center;font-size:14px;background-color:#f12e2c;cursor:pointer;}
.btn-reserver div:hover {background-color:#f64b4b;}
.btn-reserver a {color:white;}
/* Pied de page */
#pied-page {margin-bottom:80px;padding-top:15px;text-align:center;background-image:url('../img/bas_page.jpg');background-repeat:no-repeat;background-size:contain;}
#pied-page img {width: 25%;}
[class*="col-"] {float:left;width:100%;padding:0 15px 15px;}
.wm {width:100%;}
input {display:none;}
#promo {margin-top:10px;padding:15px;border-style:dashed;font-weight:bold;color:#F00;}
#vignet {margin:2em auto;}
/* ===== Pour mobiles ===== */
@media screen and (max-width: 768px) {
    .hide-p {display:none;}
    .btn-voir {display:block;position:absolute;bottom:8%;left:8%;padding:4px 10px;border:1px solid black;border-radius:8px;background:rgba(0, 0, 0, 0.5);}
    .btn-voir a {font-family:Arial,sans-serif;font-style:normal;color:white;}
    .ligne {margin:5px 0;padding-top:5px;padding-right:10Px;border-top-style:solid;border-top-width:2px;}
    /* ===== Onglets fleche ===== */
    .contenu {max-height:0;overflow:hidden;transition:all 0.6s;}
    #stars-rating {display:flex;position:absolute;align-items:center;}
    #stars-rating a {text-decoration:underline;color:#609;}
    .stars {width:100px;margin-right:8px;font-size:0;}
    .stars svg {width:20px;height:21px;}
    .onglet {display:flex;justify-content:space-between;margin:5px 0;padding-top:5px;padding-right:10Px;border-top-style:solid;border-top-width:2px;cursor:pointer;}
    .onglet h2 {margin:0;}
    .chevron {float:right;width:24px;height:24px;transition:all 0.6s;fill:none;stroke-width:6;stroke:#06c;}
    .onglet.actif .chevron {transition:all 0.6s;transform:rotate(-180deg);}
    .btn-reserver {position:fixed;bottom:0;left:0;box-shadow:0 1px 12px 1px hsla(0,0%,47%,.5);}
    /* === Volet menu === */
    #volet{position:fixed;top:50px;right:-11em;width:11em;overflow:hidden;z-index:2;background-color:#3a485f;border-radius:8px 0 0 8px;padding-top:1.2em;font-weight:normal;padding-bottom: 20px;color:#818181;transition:0.4s;}
    #volet a {display:block;margin:8px 8px 8px 32px;text-decoration:none;font-size:1.2em;color:#818181;transition:.3s;}
    #volet a:hover{color:ghostwhite;}
    #btn-volet{cursor:pointer;position:absolute;top:1em;right:1em;}
    #inpt-volet{display:none;}
    #inpt-volet:checked+label+#volet{right:0;transition:all 0.4s;}
    #inpt-volet:checked+label svg{transform:rotate(90deg);transition:all 0.5s;}
    #nav-icon{width:25px;stroke:#0066cc;position:relative;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;}
}
/* ===== Pour PC de bureau =====*/
@media screen and (min-width: 768px) {
    .col-1 {width:20%;padding:10px 0 0;min-width:140px;}
    .col-2 {width:80%;padding:0;}
    .hide-l {display:none;}
    .entete p {font-size:1em;}
    #logo-gdf-p {padding:15%;width:100px;height:100px;}/* Effacer si logo GdF masqué  en entête*/
    #pied-page img {width: 150px;}
    #volet {display:flex;justify-content:center;}
    #volet a {margin:5px;}
    #volet span {display:none;}
    /* ===== Menu ===== */
    .menu {user-select:none;}
    .menu button {display:block;width:124px;margin:10px auto;border:4px solid white;border-radius:10px;text-align:center;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;font-weight:bold;line-height:36px;outline:none;color:#FFF;background-image:linear-gradient(#79cee2,15%, 	#59afe0 50%, 85%,	#02a2e2);box-shadow:1px 1px 6px 0 #5d5d5d;cursor: pointer;}
    .menu button:hover,.menu button a:hover, .menu button.actif {color:#933;background-image:linear-gradient(#85e1d0,15%, #6cc 50%, 85%,	#51bdca);}
    .menu button a{color:#FFF}
    /* ==== Contenu ==== */
    .contenu {margin:3em 3em 3em 1em;}
    h3 {padding-left:1em;line-height:2em;color:white;background-image:linear-gradient(#79cee2,15%, 	#59afe0 50%, 85%,	#02a2e2);}
    /* Bloc contenu latéral */
    .contenu-lat {margin:40px auto;text-align:center;font-size:11px}
    #gdf {display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;padding:5PX;}
    #logo-gdf {width:80px;height:80px;}
    #logo-gdf img {border-style:none;}
    #clasmt {width:100px;margin-top:10px;margin-right:auto;margin-bottom:0;margin-left:auto;}
    #clasmt:hover {cursor:pointer;}
    #accueil h2 {padding-top:25px;}
    #photo-gite {float:right;width:392px;height:294px;margin-left:30px;}
    #photo-aer {z-index:-1;position:relative;top:-60px;left:0;}
    .btn-reserver div {width:120px;box-shadow:1px 1px 6px 0 #5d5d5d;}
    .btn-reserver a {color:white;}
    #ico-plan {float:right;margin:0 6em 1em;}
}
/* ===== Fenêtres modales* =====*/
.btn-fermer {position:absolute;top:10px;right:10px;width:35px;text-decoration:none;font-size:30px;font-weight:bold;color:grey;}
.btn-clair{color:#C0C0C0;} 
.btn-fermer:hover {color:red;cursor:pointer;}
#ipt1:checked~#mod1, #ipt2:checked~#mod2, #ipt3:checked~#mod3, #ipt4:checked~#mod4 {opacity:1;transition:all 0.5s;pointer-events:auto;}
#ipt1:checked~#mod1 > div, #ipt2:checked~#mod2 > div, #ipt3:checked~#mod3>div, #ipt4:checked~#mod4>div {margin:5% auto;transition:all 0.5s;}
.modal {z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;overflow:scroll;opacity:0;background:rgba(0, 0, 0, 0.5);transition:all 0.5s;pointer-events:none;}
.modal > div {position:relative;margin:1% auto;padding:8px;max-width:600px;border-radius:5px;background:white;box-shadow:0 0 18px rgba(0, 0, 0, 0.8);transition:all 0.5s;}
.modal img {width:100%;height:auto;}
.modal-plein {display:none;z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;}
.modal-plein label {color:grey;}
.modal-plein label:hover {color:darkgrey;}
#clas-gdf, #clas-pref {border:thin solid #C0C0C0;text-align:center;color:#7F8F10;}
#clas-gdf-txt {margin-bottom:120px;padding:15% 10% 10%;text-align:left;font-size:14px;font-weight:normal;color:#000;}
#clas-gdf-pied {margin-bottom:20px;font-size:x-small;color:rgb(95,109,3);}
#mod3 p {text-align:center;}
#mentions{border: thin solid #06c;padding:2em; font-weight: normal;}

/* ====== Calendrier ======== */
#an{display:flex;justify-content:space-between;font-size:1.2em;text-align:center;padding-top:.8em;width:12em;margin:auto}
.fleche{cursor:pointer;width:3em;}
.fleche-inac{cursor:default;color:#d9d9d9;}
#cal-an{display:flex;flex-wrap:wrap;align-items:stretch;margin:1em 0em;font-family:Arial,Helvetica,sans-serif;font-weight:bold;}
#cal-an > div{flex-grow:1;min-width:13.8em;margin:4px;}
.cal-mois{text-align:center;border-collapse:separate;width:100%;}
.cal-mois td{height:1.8em;background-color:#f7f7f7;color:#5d5d5d;user-select:none;}
.cal-mois tr{height:1.8em;user-select:none;}
.cal-mois td[class] {cursor:pointer;}
.lib-mois{padding-top:0.5em;text-align:center;}
.JS{color:#808080;}
.OO{text-shadow:1px 1px 1px rgba(33,33,33,.25);color:#fff!important;background-color:#749dce!important;}
.OV{color:#fff;background:linear-gradient(140deg,#749dce 35%,#e3e3e3 65%);}
.VO{background:linear-gradient(140deg,#e3e3e3 35%,#749dce 65%);}
.VV{background-color:#e3e3e3!important;}
.OS{background:linear-gradient(140deg,#749dce 35%,#e3e3e3,#00a8e9 65%);}
.VS{background:linear-gradient(140deg,#e3e3e3 35%,#00a8e9 65%);}
.SS{background:#00a8e9!important;}
.SV{background:linear-gradient(140deg,#00a8e9 35%,#e3e3e3 65%);}
.SO{background:linear-gradient(140deg,#00a8e9 35%,#e3e3e3,#749dce 65%);}
#legende{display:flex;padding:.5em;}
#legende>div{display:flex;margin:.3em;}
#legende .coul{width:2.5em;margin-right:.6em;}

/* Info-bulles */
.bul{position:absolute;border:2px solid#06c;border-radius:4px;font-family:Arial,Helvetica,sans-serif;background:#fff;box-shadow:2px 2px 3px rgba(0, 0, 0, 0.4);}
.fermé{display:none;}
.bul > div{padding:0 6px;text-align:right;}
.bul span{font-size:1.4em;color:gray;cursor:pointer;}
.bul span:hover{color:red;}
.bul p{margin:0 1.6em 1.6em;text-align:center;}
#fl-bul{position:absolute;bottom:-20px;}
#bul-info{position:absolute;top:10%;left:50%;transform:translate(-50%, 0);}

@media screen and (max-width:640px){
  #cal-an{padding:0;margin:1em 0em;}
  #cal-an>div{min-width:13em;}
  #bul-info{position: absolute;top: 10%;left:unset; margin:2em;transform: translate(0, 0);}
}