/*  Pour la page autour du gîte  

    Le container
*/

.container{
    display: grid;    
    height: 99vh;
    margin: 0 auto;
    grid-template:
        "header header  header" var(--header-height)
        "nav  nav nav"   var(--nav-height)
        "MenuVertical article article" 3em
        "MenuVertical Main Main1" auto
        "Article1 Article1 Article1" 6em
        "Article2 Article2 Article2" auto
        "NosCoupsCoeur NosCoupsCoeur NosCoupsCoeur" 4em
        "MLUI MLUD MLUD" auto
        "PMVI PMVD PMVD" auto
        "PWII PWID PWID" auto
        "MHAI MHAD MHAD" auto
        "footer footer footer" var(--footer-height)
        / 1fr  2fr 1fr  ;
}

/*  La définition pour les médias  */
@media screen and (max-width: 760px)   {
    .container{ 
        grid-template:
        "header" var(--header-height)
        "nav "   auto
        "article" 6em
        "Main" 30em
        "Main1" auto
        "Article1" 8em
        "Article2" auto
        "NosCoupsCoeur" 4em
        "MenuVertical" auto
        "MLUI" auto
        "MLUD" auto
        "PMVI" auto
        "PMVD" auto
        "PWII" auto
        "PWID" auto
        "MHAI" auto
        "MHAD" auto
        "footer" var(--footer-height)
        / 1fr   ;
        }
        .BarACote{display: none;}
 } 

/*  La définition des zones de la page  */

#pageHeader{grid-area: header}
#mainNav{grid-area: nav}
#MenuVertical {grid-area: MenuVertical}
#TexteAVoir {grid-area: article}
#MapGoogle {grid-area: Main}
#LegendeGoogle {grid-area: Main1}
#LesSentierTexte {grid-area: Article1}
#LesSentierDetail {grid-area: Article2}
#CoupCoeur {grid-area: NosCoupsCoeur}
#MoulinLaineImage {grid-area: MLUI}
#MoulinLaineDetail {grid-area: MLUD}
#ParcMVImage {grid-area: PMVI}
#ParcMVDetail {grid-area: PMVD}
#PoudriereWImage {grid-area: PWII}
#PoudrierewDetail {grid-area: PWID}
#MontHamImage {grid-area: MHAI}
#MontHamDetail {grid-area: MHAD}
#pageFooter{grid-area: footer}

/*  Les Styles du site  */

MenuVertical, article, Main, Main1, Article1,  Article2, NosCoupsCoeur,
MLUI,MLUD,PMVI,PMVD,PWID,PWDII,MHAI, MHAD   {
    border-radius: 15px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border: 1px inset var(--grisfonce);
}
.Googlemap{
    border-radius: 15px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);

}
/* Pour les bouton dans la section verticale */
.BarACote{
    grid-area: aside;
    display: flexbox;
    border-radius: 15px;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border: 1px inset var(--grisfonce);
    margin:0;
    height: 35fr;
 }
 .BarACote ul{
    text-decoration: none;
    list-style:none;
    text-align: center;
    vertical-align: middle;
 }
 .BarACote li{
    background: var(--jauneboismaison);
    outline:none;
    border:none;
    cursor: pointer;box-shadow: 0 6px var(--Boisstructure);
    border-radius: 20px;
    padding: 18px 2%;
    margin: 10px;
 }
 .BarACote a{
    font-size: 1.15em;
    font-weight: 300;
    color: var(--texte-color);
    text-decoration: none;
 }

 /* Pour la carte Google Map */
.imageAVoir{
    margin: 2px;
    width:100%;        
    height: 100%;
}
.imageAVoir iframe{
    width: 100%;
    height:100%;
}


.ImageMLU{
    width: 98%;
    height: 14em;
    margin: auto auto;
    background-image: url("../Medias/images/A_Voir/MLU.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
.ImagePMV{
    width: 98%;
    height: 14em;
    margin: auto auto;
    background-image: url("../Medias/images/A_Voir/PMV03.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

/* Pour les images des sites  */
.ImagePW{
    width: 98%;
    height: 14em;
    margin: auto auto;
    background-image: url("../Medias/images/A_Voir/PPWinds.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
.ImageMH{
    width: 98%;
    height: 14em;
    margin: auto auto;
    background-image: url("../Medias/images/A_Voir/mont_ham_1.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
/* Accordeon */


.accordion {
    background-color: var(--Cachemiremaison);
    color: var(--grisfonce);
    cursor: pointer;
    padding: 18px;
    width: 99%;
    text-align: left;
    outline: none;
    font-size: 1em;
    transition: 0.4s;
    border-radius: 15px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border: 1px inset var(--grisfonce);
  }
  
  .active, .accordion:hover {
    background-color: var(--Cachemiremaison);
  }
  
  .accordion:after {
    content: '\002B';
    color: var(--grisfonce);
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
  }
 
  .panel {
     padding: 0 18px;
     background-color: white;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
   }
   .panel p {
     color: var(--grisfonce);
   }
 
    .panel a {
     color: var(--Boisstructure);
     text-decoration: underline;
   }