/*! menu accordeon */

/* selecteur universel, correspond à tous les elements */
* {
  margin: 0
  /* margin-top: 8px 0 8px 0;*/
  padding: 0;  
  /* font-family: sans-serif;*/
  /* width : 600px; */
  list-style: none;
  text-decoration: none;
}

body {
	font-size: 16px;
	display: block; /* flex;*/
	justify-content: center;
	align-items: center;
	height: 100vh;
	background:  #eaecee ;
	/* background: linear-gradient(to bottom right, #114357 80%, #f29492); */
	line-height: 1.4;
}


li {
	list-style-type: circle;
	margin-bottom: 4px;
	}

/*
.section {
  display: inline;
  background: lightgray;
}
*/
.container > div {
            border-radius: 5px;
            padding: 10px;
           	align-items: center;
           	justify-content: center;
           	              	                        /* background-color: rgb(207,232,220);rgb(79,185,227) */
            border: 1px solid #f4f6f6 ;
        }
        
.container {
	width: 90vw;	
	display: grid;
	margin: auto;
    grid-template-columns: 3fr 1fr; /* repeat(2, 1fr); */
	grid-gap: 10px;
	}        
/* display-inside : La propriété flex définit la capacité d'un élément flexible à modifier ses dimensions pour remplir l'espace disponible de son conteneur. */

.boxBook {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; /* display: flex; */
   /* align-items: baseline; */
  /* center;*/
  justify-content: space-between ;
  }

.boxBook > div {
	font-size: 12px;
	border-radius: 5px;
    padding: 10px;
    align-items: center;
    justify-content: center;
           	              	                        /* background-color: rgb(207,232,220);rgb(79,185,227)*/
            border: 1px solid #f4f6f6 ;  /* width: 100px;*/
  /* height: 240px;*/
}

.footBox {
	width: 90vw;
	display: grid;
	grid-template-columns: 1fr;
	margin: auto;
	grid-gap: 10px;
}

.footBox > div {
            border-radius: 5px;
            padding: 10px;
           	align-items: center;
           	justify-content: center;
           	              	                        /* background-color: rgb(207,232,220);rgb(79,185,227)*/
            border: 1px solid #f4f6f6 ;
        }

   
.collapse-content {
  width: 90vw; /* % de la largeur de la page */
  margin: auto;
   /* box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);*/
}

.collapse {
  background: #f4f6f6; /*blanc= #fff;*/}
/* */

/* format de la zone contenant des hyperliens*/

.collapse a {
  display: flex;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 1.8rem;
  color: #000; /* noir ; blanc= #fff;*/
  position: relative;
  background: #d5d8dc ;
  }
/*
.collapse a.instagram {
  background: #db2e7d;
}

.collapse a.twitter {
  background: #1dabdd;
}

.collapse a.dribbble {
  background: #444;
}

.collapse a.youtube {
  background: #ff0000;
}
*/

.collapse a:before {
  content: "";
  border-top: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 25px;
  right: 30px;
}

.inner-content {
  padding: 1.8rem;
  /* font-size:16px; */
  }
  
  .inner-content a {
    color: Navy;
    border-top: none;
  	border-left: none;
  	border-right: none;
  	padding: 0; 
	position: relative;
	top: 0px;
	right: 0px;
  	display: Inline;
    background: initial; /*  #f4f6f6 */   
    }

.content {
  max-height: 0em;
  transition: 0.3s linear 0s;
  overflow: hidden;
}


.collapse + .collapse a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

h3 {
  margin-bottom: 12px;
}

p {
  margin-bottom: 6px;
}
/* affichage du sous menu (content) */
.collapse:target .content {
  max-height: none; /*15em;*/
}

/*  rotation de la fleche */
.collapse:target a:before {
  transform: rotate(-90deg);
}


@media (max-width: 768px) {
  .collapse-content {
    width: 80vw;
    margin: auto;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  }
}
@media (max-width: 425px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 1.2rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}
@media (max-width: 320px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 0.8rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}