ul
{
    margin-bottom: 2vh;
    padding-top: 2vh;
    list-style-type: none;
    font-size: 1rem;
}
li
{
    text-align: left;
}
a
{
    text-decoration: none;
    color: black;
}
input
{
    height:35px;
    border:1px dotted gray;
}
table
{
    margin: auto;
    border: 1px solid rgb(106, 56, 27);
}

h1
{
    font-size: 1.5rem;
}
h2
{
    font-size: 1.3rem;
}
h3
{
    font-size: 1.2rem;
}
h4
{
    font-size: 1.1rem;
}
h5, p
{
    font-size: 1rem;
} 



/* img
{
    margin: auto;
    max-width: 100%;
} */




.photo img
{
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

.photo2L img  /*spécificité pour le plan*/
{
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

label
{
    font-size: 0.8rem;
}

.titre
{
    font-size: 0.8rem;
}

.titre-regles
{
    text-align: center;
    margin-bottom: 2vh;
}
.style_input
{
    border:1px dotted gray;
    padding: 10px 0;
    width: 80%;
    margin: auto;
}

/*calendrier*/
.cadre_modal
{
    border-radius: 5%;
    border: 3px rgb(90, 30, 30) outset;
    width: 95%;
    margin: auto;
    padding-top: 15px;
}
.cadre_calendrier
{
    margin: auto;
    padding-top: 15px;
}
.fleche,.calendrier
{
    margin: auto;
}
.calendrier
{
    width: 100%;
}
.calendrier table
{
    border-collapse: collapse;
}
.calendrier table td
{
    height: 30px;
    width: 5%;
    font-size: 15px;
}
.fleche i
{
    margin: auto;
    font-size: 15px;
}

#modal,
#flechegauche
{
    display: none;
}

#calmois1,
#calmois2,
#calmois3,
#calmois4,
#calmois5,
#calmois6,
#calmois7,
#calmois8,
#calmois9,
#calmois10,
#calmois11,
#calmois12
{
    display: none;
    width: 100%;
}

.effacer,.fermer,.fleche
{
    display: inline-block;
    width: 40%;
}
.fleche
{
    width: 20%;
}
.reserve, .bloque
{
    color: rgb(202, 196, 196);
    text-decoration:line-through;
}
.passe
{
    color: rgb(213, 209, 209);
}

.libre
{
    color: black;
}
.libre:hover , .dimanche:hover
{
    cursor:grab;
}

.icache
{
    display: none;
}

/*---------------LIGNE1-------------------------------*/
.grillePhotosCouverture
{
    grid-area: auto / 1 /auto / 13;
    /* grid-template-rows: repeat(2, minmax(0, 14vh)); */
    grid-gap: 0.5rem;
}
.planning
{
    font-size: 0.8rem;
}

.planning_gauche,.planning_droite
{
   display: inline-block;
   margin: 2rem;
}
/*---------------LIGNE2---------------------*/
.texteSalon
{
    grid-area: auto / 1 /auto / 13;
    margin: auto;
}
.grilleSalon1 , .grilleSalon2
{
    grid-area: auto / 1 /auto / 13;
    margin-bottom: 0.5rem;
    grid-template-rows: repeat(2, minmax(0, 20vh));
} 

/*---------------LIGNE3---------------------*/
.texteChambres 
{
    grid-area: auto / 1 /auto / 13;
    margin: auto;
}
.grilleChambre1 , .texteChambre1 , .grilleChambre2 , .texteChambre2 , .grilleChambre3 , .texteChambre3, .grilleChambre4, .texteChambre4
{
    grid-area: auto / 1 /auto / 13;
}

.grillePhotosChambre1 , .grillePhotosChambre2 , .grillePhotosChambre3, .grillePhotosChambre4
{
    grid-area: auto / 1 /auto / 13;
    border : 0.5rem solid grey;
    grid-template-rows: repeat(2, minmax(0, 25vh));
}


/*---------------LIGNE4---------------------*/
.grilleCuisine , .texteCuisine , .grilleSdb , .texteSdb
{
    grid-area: auto / 1 /auto / 13;
}

.grillePhotosCuisine1 , .grillePhotosCuisine2
{
    grid-area: auto / 1 /auto / 13;
    grid-template-rows: repeat(2, minmax(0, 20vh));
}

.grillePhotosSdb
{
    grid-area: auto / 1 /auto / 13;
    grid-template-rows: repeat(2, minmax(0, 25vh));
}

/*---------------LIGNE5---------------------*/
.grilleJardin , .texteJardin , .grilleResidence , .texteResidence
{
    grid-area: auto / 1 /auto / 13;
}

.grillePhotosJardin , .grillePhotosResidence
{
    grid-area: auto / 1 /auto / 13;
    margin-bottom: 0.5rem;
    grid-template-rows: repeat(2, minmax(0, 20vh));
}

/*---------------LIGNE6---------------------*/
.texteCarte , .textePlan , .texteVideo 
{
    grid-area: auto / 1 /auto / 13;
    grid-template-rows: 5vh;
    margin: auto;

}
.grilleCarte , .grillePlan , .grilleVideo 
{
    grid-area: auto / 1 /auto / 13;
    margin-bottom: 0.5rem;
    /* border: 3px solid rgb(106, 56, 27); */
}
.carte , .video 
{
    grid-area: auto / 1 / auto / 13;
}
.carte iframe , .video video
{
    height: 25vh;
    margin: auto;
}
.grillePhotosPlan 
{
    grid-area: auto / 1 / auto / 13;
    grid-template-rows: repeat(2, minmax(0, 25vh));
}

/*---------------LIGNE7---------------------*/
.grille-ri , .grille-equipements , .grille-financier, .grille-options
{
    grid-area: auto / 1 /auto / 13;
    text-align : left;
    align-self: flex-start;
}
.caution
{
  list-style-type: circle ;
}

/************************************* ECRANS MOYENS****************************************/
/*------------------------------------Format portrait--------------------------------------*/
@media only screen and (min-device-width:480px) 
{
   
    /*---------------LIGNE1-------------------------------*/
   
    .grillePhotosCouverture
    {
        grid-template-rows: repeat(2, minmax(0, 22vh));
        
    }

    /*---------------LIGNE2-------------------------------*/
    .texteSalon
    {
        grid-area: auto / 1 / auto / 13;
    }   
    
    .grilleSalon1
    {
        grid-area: auto / 1 / auto / 7;
        grid-template-rows: repeat(2, minmax(0, 25vh));
        border: 2px black solid;
    }
     .grilleSalon2
    {
        grid-area: auto / 7 / auto / 13;
        grid-template-rows: repeat(2, minmax(0, 25vh));
        border: 2px black solid;
    }

    /*---------------LIGNE3-------------------------------*/
    .grillePhotosChambre1 , .grillePhotosChambre2 , .grillePhotosChambre3 ,  .grillePhotosChambre4
    {
        grid-template-rows: repeat(2, minmax(0, 35vh));
    } 

    /*---------------LIGNE4---------------------*/
    .grillePhotosCuisine1 , .grillePhotosCuisine2
    {
        grid-area: auto / 1 /auto / 13;
        grid-template-rows: repeat(2, minmax(0, 35vh));
        border: 2px black solid;
    }

    .grillePhotosSdb
    {
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }

    /*---------------LIGNE5---------------------*/
    .grillePhotosJardin , .grillePhotosResidence
    {
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }

    /*---------------LIGNE7---------------------*/
    .grillePhotosPlan 
    {
        grid-template-rows: repeat(2, minmax(0, 30vh));
    }

    

}

/************************************* ECRANS MOYENS****************************************/
/*------------------------------------Format paysage---------------------------------------*/
@media only screen and (min-device-width:720px)  
{
     /*---------------LIGNE3-------------------------------*/
     .grilleChambre1
     {
         grid-area: auto / 1 /auto / 7;
     }
     .grilleChambre2
     {
         grid-area: auto / 7 /auto / 13;
     }
     .grilleChambre3
     {
         grid-area: auto / 1 /auto / 7;
     }
     .grilleChambre4
     {
         grid-area: auto / 7 /auto / 13;
     }    

    /*---------------LIGNE4-------------------------------*/
     .grillePhotosCuisine1
     {
         grid-area: auto / 1 /auto / 7;
         grid-template-rows: repeat(2, minmax(0, 30vh));
     }
     .grillePhotosCuisine2
     {
         grid-area: auto / 7 /auto / 13;
         grid-template-rows: repeat(2, minmax(0, 30vh));        
     }
     .grillePhotosSdb
     {
         grid-template-rows: repeat(2, minmax(0, 40vh));
     }

     /*---------------LIGNE7---------------------*/
    .grillePhotosPlan 
    {
        grid-template-rows: repeat(2, minmax(0, 40vh));
    }
 
    .fleche,.calendrier
    {
        display: inline-flex;
    }
}

/********************************GRANDS ECRANS****************************************/
@media only screen and (min-device-width:980px) 
{

    h1
    {
        font-size: 1.4rem;;
    }
    h2
    {
        font-size: 1.2rem;;
    }
    .titre
    {
        font-size: 1rem;
    }

    /*---------------LIGNE1-------------------------------*/
   
    .grillePhotosCouverture
    {
        grid-area: auto / 1 /auto / 8;
        /* grid-template-rows: repeat(2, minmax(0, 25vh)); */
        grid-gap: 1rem;
        
    }
    .planning
    {
        grid-area: auto / 8 /auto / 13;
    }

    /*---------------LIGNE2-------------------------------*/
    .texteSalon
    {
        grid-area: auto / 1 / auto / 13;
    }   
    
    .grilleSalon1
    {
        grid-area: auto / 1 / auto / 7;
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }
    .grilleSalon2
    {
        grid-area: auto / 7 / auto / 13;
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }
    
    /*---------------LIGNE3-------------------------------*/
    .grilleChambre1
    {
        grid-area: auto / 1 /auto / 4;
    }
    .grilleChambre2
    {
        grid-area: auto / 4 /auto / 7;
    }
    .grilleChambre3
    {
        grid-area: auto / 7 /auto / 10;
    }
    .grilleChambre4
    {
        grid-area: auto / 10 /auto / 13;
    }    

    /*---------------LIGNE4---------------------*/
    .grilleCuisine
    {
        grid-area: auto / 1 /auto / 8;
    }
    .grilleSdb
    {
        grid-area: auto / 9 /auto / 13;
    }
    .grillePhotosCuisine , .grillePhotosSdb
    {
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }
  
    /*---------------LIGNE5---------------------*/
    .grilleJardin
    {
        grid-area: auto / 1 /auto / 7;        
        margin-right: 0.5em;
    }
    .grilleResidence
    {
        grid-area: auto / 7 /auto / 13;
    }
    .texteJardin , .texteResidence
    {
        grid-template-rows: 5vh;
    }
    .grillePhotosJardin ,  .grillePhotosResidence
    {
        grid-template-rows: repeat(2, minmax(0, 35vh));
    }

    /*---------------LIGNE6---------------------*/
    .grilleCarte
    {
        grid-area: auto / 2 /auto / 6;
        grid-template-rows: 5vh 35vh;
    }
    .grillePlan 
    {
        grid-area: auto / 7 / auto / 11;
        grid-template-rows: 5vh 35vh;
    }

    .grillePhotosPlan
	{
		grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 25vh;
	}	
    .carte , .video
    {
        grid-template-rows: 25vh;
	}	

	.photo2L:nth-child(2)
	{
		grid-column: 2;		
	}


    /*---------------LIGNE7---------------------*/
    .grille-ri
    {
        grid-area: auto / 1 /auto / 4;
    }
    .grille-equipements
    {
        grid-area: auto / 4 /auto / 7;
    }
    .grille-options
    {
        grid-area: auto / 7 /auto / 10;
    }

    .grille-financier
    {
        grid-area: auto / 10 /auto / 13;
    }

}