* {
	padding: 0px;
	margin: 0px;
}

.hidden {display: none;}
a {text-decoration: none;color: inherit;}
* {box-sizing: border-box;}

html {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}

:root {
 --main_width : 60%;
--delta_width : 10%;
--top_image_width : 25vw;
--top_logo_font_size : 4vw;
}


header{
position: fixed;
display: block;
top: 0;
width: 100%;	
z-index: 10;
padding-top: 1.3vw;
padding-bottom: 1.3vw;
}

.introduction {
display: grid;
 width: calc(var(--main_width) + var(--delta_width));		
grid-template-columns: 2fr 1fr;
column-gap: 3vw;
margin: 12vw auto 6vw;
}


main{
width: var(--main_width);
margin: 4vw auto auto;
}

.hidden_spot {z-index: 11; position: fixed;right: 0px;top: 0px;width: 50px;height: 50px;}

 #nav {
width: calc(var(--main_width) + var(--delta_width));		
margin: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}


#nav li {
cursor: pointer;	
transition: margin 0.2s ease;
display: inline-block;
line-height: 5vw;
border-radius: 8px;
font-size: 1.6rem;
font-weight: 550;
letter-spacing: 1px;
padding-right: 0.5rem;
padding-left: 0.5rem;
}


section {margin-bottom: 6vw;}


.titre_section {
height: 7vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4vw;
font-weight: 400;
text-decoration: underline;
}

.media_menu {
height: 3rem;
margin: auto;
display: flex;
padding-left: 0.5%;
padding-right:0.5%;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}

.media_icon {
height: 80%;
min-width: 20%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
font-size: 1.4vw;
cursor:pointer;
border: 1px solid;
}


.media_playlist_description {
width: var(--media_width);
font-size: 0.6em;
font-weight: bold;
margin: auto;
margin-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
}

.captcha {
margin-top: 0px;
grid-column: 1 /3 ;	
grid-row: 3;	
height: 50px;
float: left;
transform: scale(0.75); 
-webkit-transform: scale(0.75); 
transform-origin: 0 0; 
-webkit-transform-origin: 0 0;	
}
.grecaptcha-badge { visibility: hidden;}
.hidden_invisible {display: none;visibility: hidden;}
.nom {text-align: center;}
#calendar .fc-center h2 {font-size: 1.2rem;}


.contact_box  {
	display: grid;
	width: 100%;
	margin: auto;
	grid-template-columns: minmax(auto, 25%) minmax(auto, 25%) minmax(auto, 25%) minmax(auto, 25%);
	column-gap:15px;
	border: var(--borders_width);
}

.contact_nom {grid-column: 1 / 3 ;grid-row: 1;}
.contact_email {grid-column: 3 / 5 ;grid-row: 1;}
.contact_message {
	grid-column: 1 / 5 ;	
	grid-row: 2;
	margin-bottom: 1rem; 
	margin-top: 0.6rem; 
}
.send_div {grid-row: 3;	grid-column: 3/ 5 ;	display: flex;justify-content: right;}



.send_button {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 40px;
background-color: #23a03f!important;
color: #fefefe !important;
border-radius:20px;
font-size: 20px;
font-weight: 400;
border: 2px solid #fcfcfc;
}

#contact_msg {grid-column: 1 / 5 ;	grid-row: 3;text-align: left;height: 30px;}
.send_button:hover { background-color: orange!important; cursor: pointer;}
#contact {margin-bottom: 1vw;}

/*--------------------- Adresse --------------------*/

.adresse_box  {
display: grid;
grid-template-columns: 30%  minmax(auto, 70%);
border: var(--borders_width);
align-items: center;
}

.Adresse_infos {height: 70%;display: flex;flex-direction: column;}
div.up {flex: 1;}
div.down { flex: none;
text-align: left;
text-indent: 20px;
}
.Adresse_title {
height: 40px;
text-align: left;
text-indent: 20px;
font-size: 1rem;

}
.Adresse_items {
height: 1.2rem;
text-align: left;
text-indent: 1rem;
}
.insta_logo {display: none;height: 30px;}

/*------------------------------------------- fin adresse -------------------------------*/

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea {
appearance: none;
border-radius: 4px;
color: inherit;
display: block;
border: 1px solid #bdbdbd;
padding: 0.5rem;
font-size: 1rem;
}


.top_logo {
grid-column: 1 / 2;
grid-row: 1;
display: flex;
font-size: var(--top_logo_font_size);
align-items: center;
font-weight: 600;
margin-bottom: 1.5vw;
}

.texte_intro {
grid-column: 1 / 2 ;
grid-row: 2;	
text-align: left;
line-height: 3vw;
font-size: 1.3rem;
}

.image_container {
grid-column: 2 / 3 ;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
}

.image_border {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
box-shadow: 0 0 1px 1px white;
overflow: hidden;
width: var(--top_image_width);
height: var(--top_image_width);
}

.image_border  img {
border-radius: 100%;
width: 92%;
height: 92%;
 }
 
 .Fichiers_playlist_description {
 font-size: 1.2vw;
 font-weight: bold;
 margin: auto;
 margin-bottom: 1vw;
 }
 
 .fichiers_row , 
 .fichiers_header {
 width: 100%;
 margin: auto;
 display: grid;
 grid-template-columns:  7% 42%  40%  11% ;
 box-sizing: border-box;
 }
 
 .media_header_cell {
 border: 1px solid #cdcdcd;
 background-color: #15a071;
 font-size:0.9rem;
 color: #ffffff;
 padding-top: 1px;
 padding-bottom: 1px;
 }
 
 
 .media_body_cell {
 display: flex;
 align-items: center;
 border: 1px solid #cdcdcd;
 background-color: transparent;
 box-sizing: border-box;
 font-size:1rem;
 }	
 
 .download {
 margin: auto;
 width: 1.4rem;
 height: 1.4rem;
 cursor: pointer;}
 
 .pad_left {
 display: flex;
 justify-content: left;
 padding-left: 8px;
 }	
 .center{
 display: flex;
 justify-content: center;
 }	
 
.fichiers_row:nth-of-type(1n) >  .media_body_cell 
{background-color: #f2f2f2;}

.fichiers_row:nth-of-type(2n) >  .media_body_cell
{background-color: #d4d4d4;}
  
/*  debut tablette screen*/


 
/* fin tablette screen*/

@media screen and (max-width: 1200px) {
#calendar .fc-center h2 {font-size: 0.9rem;}
:root {
 --main_width : 70%;
--delta_width : 10%;
--top_image_width : 35vw;
}

}
@media screen and (max-width: 900px) {
.media_menu {height: 1.6rem;}
.media_header_cell,.media_body_cell {font-size: 0.8rem;}



.titre_section {font-size: 1.2rem;margin-bottom: 0.8rem;
}
#calendar .fc-center h2 {font-size: 0.7rem;vertical-align: middle;}

:root {
 --main_width : 80%;
--delta_width : 10%;
--top_image_width : 55vw;
--top_logo_font_size : 8vw;
}
html {font-size: 19px;}
header {padding-top: 0;padding-bottom: 0;}
#nav {display: none;}
.media_icon {font-size: 0.8rem;}
.Adresse_infos {height: 80%;}.insta_logo {display: inline-block;width: 35px;}

.introduction {
display: grid;
width: var(--media_width);
margin: auto auto 6vh;
grid-template-columns: 1fr;
row-gap:35px;
border: var(--borders_width);
justify-content: center;
}

.top_logo {
margin-top: 3vw;
grid-column: 1 / 2 ;
grid-row: 1;		
display: flex;
justify-content: center;
font-size: var(--top_logo_font_size);
text-align: center;
}

.image_container {
grid-column: 1 / 2 ;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
}


.image_border {
grid-column: 1 / 2 ;
 grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
box-shadow: 0 0 1px 1px white;
overflow: hidden;
width: var(--top_image_width);
height: var(--top_image_width);
}

.texte_intro {
flex: 1;
margin-top: 1vw;
grid-column: 1 / 2;
grid-row: 3;
width: 80%;
margin: auto;
font-size: 1.1rem;
line-height: 1.4rem;
}


.contact_box {
display: grid;
grid-gap: 0px;
grid-template-columns:  50%  50%;
grid-template-rows:  auto  ;
border: var(--borders_width);
}	
.contact_nom {grid-column: 1 / 3 ;	grid-row: 1;margin-bottom: 12px;}
.contact_email {grid-column: 1 / 3 ;	grid-row: 2;margin-bottom: 12px;}
.contact_message {
font-size: 1rem;
grid-column: 1 / 3 ;	
grid-row: 3;
margin-bottom: 12px;
margin-top: 0rem; 

}
.send_div {grid-row: 4;	grid-column: 2 / 3 ;	display: flex;justify-content: right;}
.captcha {
grid-column: 1 / 3 ;	
grid-row: 4;	
height: 50px;
transform: scale(0.6); 
-webkit-transform: scale(0.6); 
transform-origin: 0 0; 
-webkit-transform-origin: 0 0;	
}
				
.send_button {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 34px;
border-radius:19px;
font-size: 17px;
}

#contact_msg {
grid-column: 1 / 3 ;	
grid-row: 4;
text-align: left;
font-size: 17px;
text-indent: 5px;
}

.adresse_box  {
display: grid;
grid-template-columns: 40% minmax(auto, 60%);
}
		
}  /* fin @media screen and (max-width: 900px)*/


@media screen and (max-width: 550px){
  		
  		:root {
  		 --main_width : 90%;
  		--delta_width : 4%;

  		}
  		
  		
  		.titre_section {
  		  justify-content: left;
  		  font-size: 1.2rem;
  		}
  		
  		.dispo, .Rese {
  		  width: 100%;
  		  font-size: 0.85rem;
  		  }
  		
  		.Adresse_title {
  		  margin-bottom: 1rem;
  		  height: 1rem;
  		  text-align: left;
  		  font-size: 0.9rem;
  		  text-indent: 0rem;
  		}
  		
  		.Adresse_items {
  		height: 1rem;
  		text-align: left;
  		font-size: 0.7rem;
  		text-indent: 0rem;
  		}
  		
  		.captcha {
  		grid-column: 1 / 3 ;	
  		grid-row: 4;	
  		height: 40px;
  		transform: scale(0.5); 
  		-webkit-transform: scale(0.5); 
  		transform-origin: 0 0; 
  		-webkit-transform-origin: 0 0;	
  		}
  		
  		.send_button {
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		padding-left: 11px;
  		padding-right: 11px;
  		width: 75px;
  		height: 28px;
  		border-radius:14px;
  		font-size: 14px;
  		font-weight: 400;
  		}
  		
  		#contact_msg {
  		grid-column: 1 / 3 ;	
  		grid-row: 4;
  		text-align: left;
  		font-size: 15px;
  		text-indent: 5px;
  		}
 }