:root {
  /*--padding: 1.5rem;
  --main-font-size: 1.1rem;
  --strong-font-size: 1.5rem;
  --main-line-height: 1.5rem;
  --title-font-size: 28pt;
  --title-line-height: 3rem;
  --color-jaune: #f8ef88;
  --color-vert: #5cba9a;
  --color-rose:#f29799;*/
  --text-border:        
  -1px -1px 0 #fff,
    0px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    0px 1px 0 #fff,
    1px 1px 0 #fff,  

    -2px -2px 0 #fff,
    0px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    0px 2px 0 #fff,
    2px 2px 0 #fff,  

    -3px -3px 0 #fff,
    0px -3px 0 #fff,
    3px -3px 0 #fff,
    -3px 3px 0 #fff,
    0px 3px 0 #fff,
    3px 3px 0 #fff;  
  --couleur-bleu: #21a0ef;
  --grosse-font-size: 1.5rem;
}

*{
	font-family: sans-serif;
}
a{
    margin: 0;
    padding:0;
}
body{
	margin: 0;
	background-color: var(--couleur-bleu);
}


/*_________HEADER______________

.titre-page{
	width: 80%;
	margin:auto;
	text-align: center;
	margin-top: 50px;
}
.connexion{
	position: fixed;
	left: 5px;
	top: 10px;
}_*/
.logo{
    position: fixed;
    left: 15vw;
    top: 70vh;
    z-index: 2000;
}
/*_________NAV________________*/
summary:hover {
    cursor: pointer;
}
.menu{
overflow: scroll;
}
.btn-nav {
    position: fixed;
    display: block;
    z-index: 1111;
font-size: var(--grosse-font-size);
font-weight: bolder;
text-shadow: var(--text-border);
    width: 55px;
    top: 0;
    line-height: 50px;
    padding: 0 20px;
    cursor: pointer;
    transition: width .3s ease-in-out;
}
.sidebar {
    position: fixed;
    top: 0;
    min-width: 250px;
    max-width: 15%;
    padding: 0 10px 0 0;
    height: 100px;
    z-index: 1111;
    transition: transform .3s ease-in-out;
    transform: translateX(-300px);
    background-color: var(--couleur-bleu);
    overflowX: scroll;
}
.sidebar ul{
list-style:none;
}
.sidebar li{
    list-style:none;
    margin-left: 10px;
    font-weight: bolder;
}
.sidebar li::before {
  content: "└";
  margin-left: -35px;
  margin-right: 10px;
  font-size: 25pt;
  font-weight: 100;
  position: relative;
  top: 10px;
}
nav li:hover{
    color: white;
}
nav a{
    text-decoration: none;
}
details{
    margin: 20px 0;
    width: 100%;
}
summary{
    font-size: var(--grosse-font-size);
font-weight: bolder;
text-shadow: var(--text-border);
    list-style: none;

}

.menu:focus-within > .sidebar{
    transform: translateX(0);
}

#checkbox:checked + .btn {
    width: 210px;
    padding: 0 20px;
}


/*_____________MAIN-LECTURE________________*/
.main-page{
    width: 70%;
    display: flex;
    flex-direction: column;
    background-color: whitesmoke;
    position: relative;
    margin-left: 22vw;
    margin-top: 100px;
    padding:0 20px 100px 20px;
}
.main-page-content{
    display: block;
    margin-top: 30px;
}
.deux, .main-page-content{
    margin-top: 100px;
}


.deux .bloc-centre{
    columns: 2;
    margin-bottom: 100px;
}

.bloc-centre p{
    width: 100%;
    text-indent: 20px;
}

.bloc-centre img {
	max-width: 30vw;
    height: auto;
	margin: auto;
}
h1{
    margin-bottom: 0px;
}

h3, h6, .bloc-centre>p{
	background-color: white;
	margin: 0;
	padding:0;
}
h3{
	padding: 10px 0 0px 10px;
}
h6{
	padding: 0 0 10px 10px;
}
.entete{
width: 100%;
position: relative;
top: -50px;
margin: auto;
}
.bloc-centre>p{
	padding:10px 0 0 0;
	margin: 0;
}
/*_____________MAIN-LISTE________________*/

.quatre ul{
    columns: 4;
    margin-bottom: 100px;

}
.quatre .main-page-content{
    margin-top: 0px;
}


/*_____________MAIN-BAC-A-SABLE______________*/

.une .bloc-centre{
    columns: 1;
    margin-bottom: 100px;
}

.une img:nth-child(2n){
    float: right;
}


/*_________FOOTER_AGENDA__________*/

.menu-title, #choix-agenda, .connexion{
text-align: end;
font-size: var(--grosse-font-size);
font-weight: bolder;
text-shadow: var(--text-border);
}

/*
#toggle-menu:checked+ .list-menu {
  display: none;
}*/

#agenda{
	position: fixed;
	z-index: 2100;
	width: 100%;
/*	top: 10vh;
	top : 72vh;*/
	top: 93vh;
	left: -0.1vw;
	transition:top 0.3s;
}

#agenda:focus-within {
top: 12vh;
}

#choix-agenda{
	display: flex;
	flex-direction: row;
	height: 5vh;
    padding-top: 15px;
	justify-content: space-around;
	transition:top 0.3s;
	background-color: var(--couleur-bleu) ;
	}

.jour{
/*	display: inline-block;*/
	width: 100%;
	min-width: 20px;
	text-align: center;
	color: black;
	height: 20vh;
	border: 2px solid black;
	padding: 0;
	
}
.semaine{
	position: relative;
	margin: auto;
	display: flex;
	flex-direction: row;
	width: 100%;
	background-color:white;
}/*
label{
	 cursor: pointer;

}
 #toggle-semaine, #toggle-mois, #toggle-menu
{
    display: none;
} 

#toggle-semaine:checked+ #agenda {
  top: 75vh;
}
/*#toggle:checked +.choix-mois {
display: none;
}

#toggle-mois:checked ~ #agenda {
  top: 15vh;
}
*/