body{
    display: grid;
    width:100%;
    height: 100vh;
    grid-template:
        "header" var(--header-height) 
        "nav" var(--nav-height)
        "LesChambresDescription" auto
        "footer" var(--footer-height)
        / 1fr
    ;
    gap: 5px;
}

/*  La définition des zones de la page  */
@media screen AND (max-width: 760px){
    body{
        grid-template:
        "header" var(--header-height) 
        "nav" auto
        "LesChambresDescription" auto
        "footer" var(--footer-height)
        / 1fr;}
}


#pageHeader{grid-area: header}
#mainNav{grid-area: nav}
#Mezzanine{grid-area: Mezzanine}
#LesChambresDescriotion{grid-area: LesChambresDescription}
#pageFooter{grid-area: footer}

/*  Détail du site */
.Content{
    display: flex;
    flex-wrap: wrap;
    margin:5px;
    gap:5px;
    width: 99%;
    justify-content: center;
    flex-direction: row;
}
.box{
    flex: 350px;
    height: 560px;
    border: 3px double var(--Boisstructure);
    gap: 5px;  
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
}
.nomcase{
    height: 30 px;
    margin: 1%;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    display:flex;
}
.nomcase h2{
    font-size: 1.5em;
}
.diapos{
    margin-top: 10px;
    margin-bottom: 10px;
    position:relative;
    width: 350px;
    height: 270px;
    border: 3px solid var(--jauneboismaison);
    padding:5px;    
    margin-left: auto;
    margin-right: auto;
}
.textedetail{
    height: 220px;  
    margin: 3px;
    width: 98%;
    text-align: justify;
    color: var(--text-color);
    font-size: 1em;
    padding: 10px  
}
.textedetail_long{
    height: 500px; 
}
.textedetail p,
.textedetail_long p
{ 
    color: var(--text-color);
}
.textedetail li,
.textedetail_long li{ 
    list-style:none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.textedetail h3,
.textedetail_long h3{ 
    margin-bottom:5px;
}
.textedetail ul p,
.textedetail_long ul p{ 
    padding-left:20px; 
}
.Prix {
    margin: 10px;
    margin-left: auto;
    margin-right:auto;
}
.Tarification table{
    border: 2PX double var(--bgSlider);
    border-collapse : collapse;
}
.Tarification td{
    border: 1PX solid var(--bgSlider);
    padding: 10px;
}
.montant{
    text-align:right;
}
.ModeAccepte{
    margin-top:10px;
    display:flex;
    align-items: center;
}
.AvantTypePaiement{
    margin-top:10px
}

/*     Détail pour les photos de chambre de la mezzanine    */

.mezzSlides{
    margin-top: 10px;
    position:relative;
    width: 350px;
    height: 270px;
    border: 3px solid var(--jauneboismaison);
    padding:5px;    
    margin-left: auto;
    margin-right: auto;
}
.mezzSlides .img{
    position:absolute;
    height:99%;
    width: 99%;
}
.mezzSlides .img img{
    height: 99%;
    width: 99%;                                                                    
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transform: all 0.7s;
}
#un:checked ~ .img-1 img{
    clip-path: circle(150% at 0% 100%);
}
#deux:checked ~ .img-1 img,
#deux:checked ~ .img-2 img{
    clip-path: circle(150% at 0% 100%);
}
#trois:checked ~ .img-1 img,
#trois:checked ~ .img-2 img,
#trois:checked ~ .img-3 img{
    clip-path: circle(150% at 0% 100%);
}
#quatre:checked ~ .img-1 img,
#quatre:checked ~ .img-2 img,
#quatre:checked ~ .img-3 img,
#quatre:checked ~ .img-4 img{
    clip-path: circle(150% at 0% 100%);
}
.mezzSlides .sliders{
    position: absolute;
    bottom: 20px;
    left:50%;
    transform: translate(-50%);
    z-index: 400;
    display: flex;
}
.mezzSlides .sliders label{
    height: 13px;
    width: 13px;
    border: 2px solid var(--Boisstructure);
    margin: 0 3px;
    cursor:pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}
#un:checked ~ .sliders label.un,
#deux:checked ~ .sliders label.deux,
#trois:checked ~ .sliders label.trois,
#quatre:checked ~ .sliders label.quatre
{
    width: 35px;
    border-radius: 14px;
    background: var(--bgSlider);  
}
.mezzSlides .sliders label:hover{
    background: var(--bgSlider);
}
.mezzSlides input[type="radio"]{
    display:none;
}


/*     Détail pour les photos de chambre Grand chambre    */

.grchDiapo{
    margin-top: 10px;
    position:relative;
    width: 350px;
    height: 270px;
    border: 3px solid var(--jauneboismaison);
    padding:5px;    
    margin-left: auto;
    margin-right: auto;
}
.grchDiapo .imgGch{
    position:absolute;
    height:99%;
    width: 99%;
}
.grchDiapo .imgGch img{
    height: 99%;
    width: 99%;                                                                    
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transform: all 0.7s;
}
#GrC_un:checked ~ .imgGch-1 img{
    clip-path: circle(150% at 0% 100%);
}
#GrC_deux:checked ~ .imgGch-1 img,
#GrC_deux:checked ~ .imgGch-2 img{
    clip-path: circle(150% at 0% 100%);
}
#GrC_trois:checked ~ .imgGch-1 img,
#GrC_trois:checked ~ .imgGch-2 img,
#GrC_trois:checked ~ .imgGch-3 img{
    clip-path: circle(150% at 0% 100%);
} 
#GrC_quatre:checked ~ .imgGch-1 img,
#GrC_quatre:checked ~ .imgGch-2 img,
#GrC_quatre:checked ~ .imgGch-3 img,
#GrC_quatre:checked ~ .imgGch-4 img{
    clip-path: circle(150% at 0% 100%);
} 
.grchDiapo .Gch_sliders{
    position: absolute;
    bottom: 20px;
    left:50%;
    transform: translate(-50%);
    z-index: 400;
    display: flex;
}
.grchDiapo .Gch_sliders label{
    height: 13px;
    width: 13px;
    border: 2px solid var(--Boisstructure);
    margin: 0 3px;
    cursor:pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}
#GrC_un:checked ~ .Gch_sliders label.imgGch_un,
#GrC_deux:checked ~ .Gch_sliders label.imgGch_deux,
#GrC_trois:checked ~ .Gch_sliders label.imgGch_trois,
#GrC_quatre:checked ~ .Gch_sliders label.imgGch_quatre
{
    width: 35px;
    border-radius: 14px;
    background: var(--bgSlider);  
}
.grchDiapo .Gch_sliders label:hover{
    background: var(--bgSlider);
}
.grchDiapo input[type="radio"]{
    display:none; 
}
 /*     Détail pour les photos de chambre du rez-de-chaussée   */

.rdcSlides{
    margin-top: 10px;
    position:relative;
    width: 350px;
    height: 270px;
    border: 3px solid var(--jauneboismaison);
    padding:5px;    
    margin-left: auto;
    margin-right: auto;

}
.rdcSlides .imgRdc{
    position:absolute;
    height:99%;
    width: 99%;
}
.rdcSlides .imgRdc img{
    height: 99%;
    width: 99%;                                                                    
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transform: all 0.7s;
}
#Rdc_un:checked ~ .imgRdc-1 img{
    clip-path: circle(150% at 0% 100%);
}
#Rdc_deux:checked ~ .imgRdc-1 img,
#Rdc_deux:checked ~ .imgRdc-2 img{
    clip-path: circle(150% at 0% 100%);
}
#Rdc_trois:checked ~ .imgRdc-1 img,
#Rdc_trois:checked ~ .imgRdc-2 img,
#Rdc_trois:checked ~ .imgRdc-3 img{
    clip-path: circle(150% at 0% 100%);
} 
#Rdc_quatre:checked ~ .imgRdc-1 img,
#Rdc_quatre:checked ~ .imgRdc-2 img,
#Rdc_quatre:checked ~ .imgRdc-3 img,
#Rdc_quatre:checked ~ .imgRdc-4 img{
    clip-path: circle(150% at 0% 100%);
} 
.rdcSlides .Rdc_sliders{
    position: absolute;
    bottom: 20px;
    left:50%;
    transform: translate(-50%);
    z-index: 400;
    display: flex;
}
.rdcSlides .Rdc_sliders label{
    height: 13px;
    width: 13px;
    border: 2px solid var(--Boisstructure);
    margin: 0 3px;
    cursor:pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}
#Rdc_un:checked ~ .Rdc_sliders label.imgRdc_un,
#Rdc_deux:checked ~ .Rdc_sliders label.imgRdc_deux,
#Rdc_trois:checked ~ .Rdc_sliders label.imgRdc_trois,
#Rdc_quatre:checked ~ .Rdc_sliders label.imgRdc_quatre
{
    width: 35px;
    border-radius: 14px;
    background: var(--bgSlider);  
}
.rdcSlides .Rdc_sliders label:hover{
    background: var(--bgSlider);
}
.rdcSlides input[type="radio"]{
    display:none; 
}