html, body, header, footer, nav, label, ul, li, a, section, h1, h2, h3, h4, h5, h6, p, img, figure, div, span, input, textarea {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family:Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:black;
	vertical-align: baseline;
	line-height: 1;
}
* { box-sizing: border-box;}
a,
img 					{ text-decoration:none; border:none; outline:none;}
textarea 				{ resize: vertical;}
.legende,
nav ul,
footer ul 				{ list-style-type:none;}
body 					{ overflow-y:scroll;}
#vign_img a:hover 		{ cursor:default;}
header label,
button:hover,
#vign_img a img:hover 	{ cursor:pointer;}
img 					{ display:block;}

/***************/
/*  Position   */
/***************/
header 					{ position:fixed; top:0; left:0; right:0; z-index:9;}
.identite				{ position:fixed; right:2vw; top:calc(30px + 0.8vh + 0.8vw);}
#menu ~ nav 			{ position:fixed; top:calc(40px + 1vh + 1vw); bottom:0; left:-100%;}
#login 					{ position:absolute; left:calc(30px + 1vh + 2vw);}
#login form 			{ position:absolute; top:0; left:calc(30px + 1vh + 2vw);}
.fondu					{ position:absolute;bottom:0;}
#livre figcaption		{ position:absolute; top:65%;} 
#galerie				{ position:absolute; top: 0;left:calc(50% - 27vh);}
#before 				{ position:absolute; top:15vh; right:0;}
#after 					{ position:absolute; top:15vh; left:0;}
#up 					{ position:absolute; top:calc(0.4vh + 0.4vw); left:0; right:0;}
.retour a 				{ position:absolute; top:calc(0.4vw + 0.4vh); left:0;}
.acteur 				{ position:absolute; opacity:0.6; z-index:5;}
section,
.miroir					{ position:relative;}
.costume 				{ position:relative; z-index:6;}
.cartouche 				{ position:relative;}
#menu ~ nav  			{ -webkit-transition: left 0.9s; -o-transition: left 0.9s; transition: left 0.9s;}
#menu:checked ~ nav 	{ left:0;}
.fondu 					{ z-index:8;}
nav 					{ z-index:10;}

/***************/
/*  Display    */
/***************/
#lieu_coor,
#mdp,
.button,
fieldset,
#up a,
#livre,
#photo figure,
.retour a,
.sign_2,
.cadre,
.legende,
.bonjour,
#image,
#log:checked ~ form,
ul,
nav,
header,
#accueil form,
#vign_header,
.orange3,
.orange6,
#profil,
#listing,
address 				{ display: flex;}
#log ~ form,
input[type=checkbox] 	{ display:none;}
nav a,
header label,
.special a,
#vign_img a,
.logo_f a 				{ display:block;}
#news_coor input[type=checkbox],
#galerie a,
#before a,
#after a 				{ display:inline-block;}
#lab_menu				{ opacity:0.7;}
#lab_menu:hover			{ opacity:1;}
#vign_img a,
.miroir 				{ overflow:hidden;}
#coordonnees,
#profil form,
#listing form,
#vign_img,
#reserv_date 			{ display:grid;}

#photo #before,
#photo #after,
#photo #up 				{ opacity:0.2;}
#photo #before:hover,
#photo #after:hover,
#photo #up:hover 		{ opacity:1;}

/***************/
/*  Largeurs   */
/***************/
#vign_header img,
#login img,
#vign_img 					{ width:auto;}
#edito .logo 				{ width:20%;}
.logo_f a 					{ width:30%;}
#music,
#vign_header div,
#vignettes h2 				{ width:33.333%;}
#coordonnees,
.w100,
#contact p,
.retour a,
#photo figure,
#vign_img a,
nav,
nav a, 
#ul_nav,
#nous,
.fondu,
.li_1 li,
#galerie a,
#up a,
#after a,
#before a,
#livre figcaption,
#vign_img,
#tessiture,
#edito figure,
#edito img,
.costume img 				{ width:100%;}
#mdp,
#profil,
#listing,
#livre,
#accueil,
#costume,
#vignettes,
#photo,
.cadre 						{ width:calc(100% - 1.4vw - 0.8vh);}
#lab_menu					{ width:calc(30px + 0.8vh + 0.8vw);}
.logo_face 					{ width:100px !important;}
#cp 						{ width:60px;}
.w80px						{ width:80px;}
#nb 						{ width:90px;}
#mesure input[type=number] 	{ width:100px;}

.sign_1 					{ width:30vw;}
#nous .miroir 				{ width:33vw;}
#before,
#after 						{ width:34vw;}
#login form 				{ width:50vw;}

#galerie					{ width:56vh;}

.sign_2 					{ min-width: 30vw;}
#nous .texte 				{ min-width:350px;}
#nous .miroir 				{ min-width:260px; }
#photo img 					{ max-width:100%;}

#tel,
#ville,
#prenom 					{ flex: 1;}
#edito #up img 				{ width:calc(4vw + 4vh);}

/***************/
/*  Hauteurs   */
/***************/
#edito #up img,
#edito .logo 			{ height:auto;}
#costume,
#accueil 				{ height:calc(98.6vh - 40px - 1.7vw);}
#lab_menu				{ height:calc(30px + 0.8vh + 0.8vw);}
#photo figure 			{ height:calc(100vh - 40px - 2.7vh - 3.3vw);}
#up a,
#before a,
#after a,
#galerie a,
nav a,
#login,
#login img,
#login form 			{ height:100%;}
.miroir img 			{ height:90%;}
.fondu 					{ height:10%;}
#livre .miroir			{ height:90vh;}
#livre .miroir img 		{ height:81vh;}
#nous .miroir 			{ height:24.178vw;}
#vign_header img 		{ height:320px;}
#vign_img a,
#vign_ img 				{ height:150px;}
.logo_face 				{ height:100px !important;}
#listing figure img 	{ height:100px;}
#before,
#after					{ height:calc(80vh - 40px - 1vh - 1vw);}
#galerie				{ height:calc(90vh - 40px - 1vh - 1vw);}

#photo img 				{ max-height:100%;}
#mdp,
#profil,
#photo,
#edito					{ min-height:calc(98.6vh - 40px - 1.7vw);}
#livre					{ min-height:calc(100vh - 40px - 1.8vh - 2.4vw);}
#vign_img 				{ min-height:calc(97vh - 360px - 4vw);}

/***************/
/*  Margin     */
/***************/
#vign_img a 				{ margin:0; margin-top:1vh;}
.bonjour div 				{ margin:2vh 0;}
.ind_table					{ margin-top:2vmin;}
textarea,
section input  				{ margin:calc(1px + 0.2vw + 0.2vh);}
section form 				{ margin: calc(5px + 1vh + 1vw) 0;}
#mdp,
#profil,
#listing,
#photo,
#vignettes,
#edito,
#livre,
#costume,
#accueil 					{ margin: calc(40px + 1vh + 1vw) auto 0;}
#affichet img,
#vign_ img,
section input[type=submit],
#vign_header img
.logo_face,
.logo_f a,
#mesure .bton_3 img,
#general .bton_3 img,
#mdp button img 			{ margin:auto;}
#liste 						{ margin:0 auto;}
.cadre 						{ margin:0 auto calc(0.7vw + 0.4vh);}
#nous figure 				{ margin: 1vh auto 0;}
#nous 						{ margin:calc(40px + 1.4vh + 1.7vw) 0 0 0;}
.texte 						{ margin:1vh 2vw;}
.statut h2 					{ margin:0 calc(0.7vw + 0.4vh);}
.db_texte ul 				{ margin-left:calc(2px + 1vw);}
#signature p 				{ margin-top:0.5vh;}
#comite table 				{ margin-top:2vh;}
.mg_top 					{ margin-top:3vmin;}
.adhesion					{ margin-top:3vmin;}
#next_table 				{ margin-top:2vh;}
button,
.button,
.edit_mdp 					{ margin:1vmin;}
.identite 					{ margin-top:-5px;}

/***************/
/*  Padding    */
/***************/
header 						{ padding-left:1vw;}
h1 							{ padding-left:2vw; padding-right:2vw;}
nav 						{ padding:0 calc(0.4vw + 0.4vh) calc(0.4vw + 0.4vh) calc(0.4vw + 0.4vh);}
nav a 						{ padding:2vh 1vw;}
header input[type=text],
header input[type=password],
header input[type=submit] 	{ padding:1vh 1vw;}
#profil,
#listing,
#photo,
#vignettes					{ padding:calc(0.4vw + 0.4vh);}
.ind_table td 				{ padding:calc(0.5vh + 0.5vw);}
textarea,
section input  				{ padding:calc(1px + 0.2vw + 0.2vh);}
#next_table td 				{ padding: 2px 10px 2px 0;}
.liste 						{ padding:1vmin;}
.special a 					{ padding:0.5vh 0;}
#vign_ img,
.special					{ padding:0 !important;}
.ferie,
#calendrier td 				{ padding:0.4vmin 1vmin !important;}
.legende li 				{ padding:0 0.5vw;}
.cadre h3 					{ padding-bottom:2.5vh;}
.cadre 						{ padding:calc(0.4vw + 0.4vh);}
#nous th,
#nous td 					{ padding: 0.5vh 2vw 1vw 0;}
caption 					{ padding-bottom:1vh;}
.statut h2 					{ padding-left:2vw;}
.db_texte li 				{ padding-top:1vh;}
.sign_2 span 				{ padding:1vmin;}
.sign_1 					{ padding-top:1vh;}
#vign_header 				{ padding:10px 5px;}
#vign_img a,
#vign_img 					{ padding:20px;}
.edit_mdp 					{ padding: 1vh 0.5vw;}
form,
.bonjour p 					{ padding-right:2vw;}
.mb 						{ padding-right:0.5vw;}
h4 							{ padding-top:calc(0.5vh + 0.5vw);}
button,
.button 					{ padding:0.5vh 0.5vw;}
#nb 						{ padding-right:0;}
.cartouche p 				{ padding: 5px 0;}
#mesure p,
#general p					{ padding: 1vh 1vw;}

/***************/
/*  Alignements*/
/***************/
.orange3,
.orange6,
#livre,
#signature,
.db_texte ul,
.bonjour,
#vignettes					{ -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
header,
.sign_2,
#vign_header 				{ -webkit-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between;}
address,
.bonjour 					{ -webkit-justify-content:space-around;-ms-justify-content:space-around;justify-content:space-around; }
.cadre 						{ -webkit-justify-content:flex-start;-ms-justify-content:flex-start;justify-content:flex-start;}
#listing,
.orange3,
.orange6,
#profil,
.button,
#up,
#up a,
.j_centre,
#image,
#photo figure 				{ -webkit-justify-content:center;-ms-justify-content:center;justify-content:center;}
address,
#profil,
.retour a,
#photo, 
#photo figure,
#livre,			
#signature,
#costume,
#accueil,
#login form,
header,
#vign_header,
.button 					{ align-items:center;}
.legende 					{ align-items:stretch;}
.retour a 					{ align-items:flex-start;}
#nb,
#etat,
#contact p,
.edit_mdp,
.button,
#vign_header div,
.adhesion,
#calendrier td,
#ul_nav,
#livre figcaption,
.sign_1,
#tessiture,
#music,
#vignettes h2,
#vign_img a,
.cartouche p,
.milieu,
#mesure input[type=number],
.bton,
.span6 						{ text-align: center;}
#nous th,
.gauche 					{ text-align: left;}
#listing,
#profil,
fieldset,
.legende,
#login form,
#ul_nav,
.li_1 ul,
.sign_2 					{ -webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
#ul_nav,
.li_1,
.texte						{ -webkit-flex:1;-ms-flex:1;flex:1;}

/*********/
/* Fonts */
/*********/
.bonjour 					{ min-height: 50%;}
h1 							{ font-size: calc(8px + 0.75vh + 0.75vw);}
#libelle_coor,
#news_coor,
#quest_coor,
#coordonnees p,
#contact p,
textarea,
input,
.identite,
button,
.button,
.edit_mdp 					{ font-size: calc(10px + 0.2vw + 0.2vh);}
#accueil h2 				{ font-size: calc(11px + 0.8vh + 0.8vw);}
.cadre h3 					{ font-size: calc(11px + 0.7vh + 0.7vw);}
#accueil h4 				{ font-size: calc(10px + 0.6vh + 0.6vw);}
#next_table 	 			{ font-size: calc(10px + 0.3vh + 0.3vw);}
.bonjour p,
.texte 	 					{ font-size: calc(11px + 0.35vh + 0.35vw);}
.complet 					{ font-size: calc(12px + 0.3vh + 0.3vw);}
#livre figcaption 			{ font-size: calc(12px + 1vh + 1vw);}
nav a 						{ font-size: calc(14px + 0.7vh + 0.7vw);}

h1 							{ line-height:calc(40px + 1vh + 1vw);}
.centre 					{ line-height:1.1 !important;}
p 							{ line-height:1.3;}
#accueil h4 				{ line-height:1;}
.mb 						{ line-height:1.3;}
.adhesion,
.bonjour p,
h4 							{ line-height:1.5;}
#accueil h3					{ line-height:2;}
h2 							{ line-height:2.5;}

.identite 					{ color:#999;}
.orange,
.lien:hover,
h1,
#accueil h2,
.cadre h3,
nav a,
.bg_manif,
.puce_manif::before,
#livre figcaption			{ color:orange;}
.chocolat,
.lien,
nav a:hover,
.poste 						{ color: chocolate;}
.retour a,
#vignettes h2				{ color:white;}
.complet,
.error,
.actif,
.bg_spectacle,
.puce_spectacle::before 	{ color: red;}
.green 						{ color:green;}
.bg_sortie,
.puce_sortie::before 		{ color: limegreen;}
.bg_repetition,
.puce_repetition::before	{ color: blueviolet;}
.bg_seance,
.puce_seance::before 		{ color: saddlebrown;}
.bg_ag,
.puce_ag::before 			{ color: coral;}
.bg_theatre,
.puce_theatre::before		{ color:cadetblue;}
.bg_technique,
.puce_technique::before		{ color:chocolate;}

.identite,
::placeholder 				{ font-style:italic;}
caption,
.complet,
.lien,
#livre figcaption,
#question_coor 				{ font-weight:bold;}
.complet,
nav a,
h1,
#accueil h2,
.cadre h3,
#livre figcaption			{ text-shadow:1px 1px 1px black;}

.legende li::before 		{ content: "♫"; font-size:calc(10px + 0.4vw + 0.4vw);}

/******************/
/* Background     */
/******************/
header input[type=submit] 	{ background-color: #999;}
#photo figure 				{ background-color: #222;}
#vign_header,
#vign_img 					{ background-color:black;}
.error,
nav 						{ background-color:white;}
.li_1 li 					{ background-color: rgba(0,0,0,0.5);}
textarea,
section input  				{ background-color:#EEE;}

.edit_mdp,
button,
.button,
#profil p 					{ background-color:#DDD;}
.cartouche,
#profil figure,
.orange3					{ background-color: rgba(255,190,100,0.3);}
.costume_portrait,
.orange6					{ background-color: rgba(255,190,100,0.6);}
#profil figure				{ background-color: rgba(255,190,100,0.8);}
section input[type=submit] 	{ background-color:orange;}
.ferie 						{ background-color: rgba(255,230,200,1);}
header 						{ background: white url(../img/bg/melodie.png) no-repeat calc(30px + 1vh + 2vw) bottom / cover;}
/*#galerie					{ background: url(../img/boutons/photo.png) no-repeat; }*/
h1 							{ background: linear-gradient(to right, transparent, white 40%);}
.fondu 						{ background: linear-gradient(to bottom, rgba(255,255,255,0.7), white);}
#lab_menu					{ background: orange url(../img/boutons/menu_on.png) center / 70% no-repeat;}

.edit_mdp:hover,
button:hover 				{ background-color:aliceblue;}
.active 					{ background-color:orange !important;}
#up a,
#galerie a,
#after a,
#before a { background-color:transparent;}

/***************/ 
/*  Borders    */
/***************/
.li_1 						{ border:0.3vw solid white;}
header input[type=text],
header input[type=password],
header input[type=submit],
#lab_menu					{ border:1px solid #666;}
#profil,
#listing,
.cadre,
.ind_table td,
.ind_table,
#edito,
#photo,
#vignettes,
#livre,
#costume,
#accueil					{ border: 1px solid silver;}
.public						{ border: 1px solid green;}
.choeur						{ border: 1px solid orange;}
.visible 					{ border: 1px solid black;}
.li_1 li 					{ border-bottom: 2px solid rgba(255,255,255,0.3);}
.miroir img:first-child 	{ border-bottom: 1px solid #ddd;}
.special 					{ border: 2px solid rgb(255,230,200);}
#livre figure img 			{ border: 2px solid silver;}
#vign_header 				{ border-bottom: 1px solid silver;}

.ind_table 					{ border-collapse: collapse;}
#lab_menu					{ box-shadow:1px 1px 1px #444;}
.sign_1 					{ border-top:1px solid silver;}
#border-bottom 				{ border-bottom:1px solid black;}
button,
.button,
.edit_mdp 					{ border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #555; border-right:1px solid #555;}
.cartouche,
header input[type=submit],
#lab_menu,
button,
.button,
.edit_mdp 					{ border-radius:5px;}
.cartouche,
.edit_mdp,
textarea,
section input,
#calendrier td,
button,
.button 					{ box-shadow:1px 1px 1px silver;}
#lab_menu 					{ box-shadow:0px 0px 10px #4183C4;}
#calendrier		 			{ border-spacing: 1vh;}

/*******************/
/* Transformations */
/*******************/ 
.reflet 			{ 
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1);
}
#vign_img { 
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    grid-auto-rows: 75px;
	grid-auto-flow: dense;
}
#listing form 				{ grid-template-columns: max-content max-content max-content max-content max-content max-content; margin:auto;}
.portrait { align-self:flex-start; border:1px solid silver;}
.entier { border:1px solid pink;}

#mdp form {
	display: grid;
	grid-template-columns: repeat(max-content max-content min-content 1fr);
	align-items:center;
	justify-content:center;
	grid-gap:calc(0.5vh + 0.5vw);
	padding:1vh 1vw;
}
#mdp 			{ border:1px solid silver; justify-content:center; align-items:center;}
#mdp p 			{ background-color:#DDD; padding:1vmin; font-size:calc(10px + 0.2vw);grid-column: span 3;}
#listing form 	{ grid-row-gap: 1vh;}

#vign_img a 	{ grid-row: span 2;}
#mdp figure 	{ grid-row: span 3;}
#general figure	{ grid-row:span 12; align-self:flex-start;}
#mesure figure	{ grid-row:span 14;}
#profil figure 	{ grid-row:span 15;}

#profil figure,
.pos_1,
.bton_3,
#listing figure	{ grid-column: 1;}
.pos_2			{ grid-column: 2;}

#etat,
#coordonnees p,
#news_coor,
#lieu_coor,
#adresse,
#message,
#reserv_date 	{ grid-column: span 2;}
#mdp button,
.bton_3 	 	{ grid-column: span 3;}
#general .bton_3,
.edit_mdp,
#general p		{ grid-column: span 4;}
#mesure table,
#mesure .bton_3,
#mesure p		{ grid-column: span 5;}
.span_c6,
.span6 			{ grid-column: span 6;}
.dim_80 		{ grid-column: span 8;}
#listing form p,
.dim_90 		{ grid-column: span 9;}
.dim_100 		{ grid-column: span 10;}
.dim_110 		{ grid-column: span 11;}
.dim_120 		{ grid-column: span 12;}
.dim_130 		{ grid-column: span 13;}
.dim_140 		{ grid-column: span 14;}
.dim_150 		{ grid-column: span 15;}
.dim_160 		{ grid-column: span 16;}
.dim_170 		{ grid-column: span 17;}
.dim_180 		{ grid-column: span 18;}
.dim_190 		{ grid-column: span 19;}
.dim_200 		{ grid-column: span 20;}
.dim_210 		{ grid-column: span 21;}
.dim_220 		{ grid-column: span 22;}
.dim_230 		{ grid-column: span 23;}
.dim_240 		{ grid-column: span 24;}
.dim_250 		{ grid-column: span 25;}
.dim_260 		{ grid-column: span 26;}
.dim_270 		{ grid-column: span 27;}
.dim_280 		{ grid-column: span 28;}
.dim_290 		{ grid-column: span 29;}
.dim_300 		{ grid-column: span 30;}
.dim_310 		{ grid-column: span 31;}
.dim_320 		{ grid-column: span 32;}
.dim_330 		{ grid-column: span 33;}
.dim_340 		{ grid-column: span 34;}
.dim_350 		{ grid-column: span 35;}
.dim_360 		{ grid-column: span 36;}
.dim_370 		{ grid-column: span 37;}
.dim_380 		{ grid-column: span 38;}
.dim_390 		{ grid-column: span 39;}
.dim_400 		{ grid-column: span 40;}
.dim_410 		{ grid-column: span 41;}
.dim_420 		{ grid-column: span 42;}
.dim_430 		{ grid-column: span 43;}
.dim_440 		{ grid-column: span 44;}
.dim_450 		{ grid-column: span 45;}
.dim_460 		{ grid-column: span 46;}
.dim_470 		{ grid-column: span 47;}
.dim_480 		{ grid-column: span 48;}
.dim_490 		{ grid-column: span 49;}
.dim_500 		{ grid-column: span 50;}
.dim_510 		{ grid-column: span 51;}
.dim_520 		{ grid-column: span 52;}
.dim_530 		{ grid-column: span 53;}
.dim_540 		{ grid-column: span 54;}
.dim_550 		{ grid-column: span 55;}
.dim_560 		{ grid-column: span 56;}
.dim_570 		{ grid-column: span 57;}
.dim_580 		{ grid-column: span 58;}
.dim_590 		{ grid-column: span 59;}


#before a,
#after a 		{ display:flex; flex-direction:column; justify-content: center; color:silver;}
#before a 		{ align-items:flex-end;}
#after a 		{ align-items:flex-start;}
#after a img,
#before a img 	{ width:calc(3vw + 3vh); height:auto;}
#galerie {
	opacity:0; 
	-webkit-animation-delay: 0.9s; animation-delay: 0.9s;
	-webkit-animation-name: Gallerie; animation-name: Gallerie;
}
#ap_d_2, #ap_d_1, #ap_d_0,
#av_d_0, #av_d_1, #av_d_2,
#ap_g_1, #ap_g_0, #av_g_0,
#av_g_1, #av_g_2, #av_g_3,
#galerie {
	-webkit-animation-duration: 0.7s; 			animation-duration: 0.7s;
	-webkit-animation-timing-function:linear; 	animation-timing-function:linear;
	-webkit-animation-iteration-count:1; 		animation-iteration-count:1; 
	-webkit-animation-fill-mode:forwards; 		animation-fill-mode:forwards;
}
#lab_menu{
	box-shadow:0px 0px 10px #4183C4;
	-webkit-animation-name: clignote; animation-name: clignote;
	-webkit-animation-duration: 1s; animation-duration: 1s;
	-webkit-animation-iteration-count:10; animation-iteration-count:5;
}
#galerie img {
	width:20%; height:auto;
	-webkit-ransform-origin:center center; transform-origin:center center;
	-webkit-transform:rotate(-20deg) translateY(4.5vh); transform:rotate(-20deg) translateY(4.5vh);
}
#galerie { overflow:hidden;}


#listing figure 			{ width:auto; padding:10px;}
	

#coordonnees 				{ grid-template-columns: 1fr 1fr;}

.nok						{ border:2px solid red !important;}
#news 						{ display:inline-block !important;}
.costume img 				{ height:auto !important;}
.visible 					{ display:block !important;}

#reserv_date {
	margin:2vmin auto 0;
	padding:1vmin;
	background-color:rgba(255,190,100,0.1);
    grid-template-columns: repeat(6,max-content);
	grid-gap:10px;
	align-items:center;
}
#liste_role {
	display:grid !important;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr) ) ;
	grid-gap: 10px;
	width:100%;
}
#mesure,
#general {
	margin-top:1vh !important;
	justify-content:center;
	align-items:center;
	border:1px solid silver; 
	margin:auto; 
	padding:1vh 1vw; 
	width: max-content;
}
#mesure {
    grid-template-columns: min-content max-content max-content max-content min-content;
	grid-gap: 0.2vh 0.5vw;
}
#general { 
    grid-template-columns: min-content max-content max-content min-content;
	grid-gap: 0.6vh 0.5vw;	
}

.w80px,
.adulte { text-align:center;}

/*************************************************************************************************************************************************/

@media screen and (orientation: landscape) {
	#accueil {
		display:grid;
		grid-template-columns: 50% minmax(min-content, 1fr);
	}
	#accueil figure { 
		-webkit-transform: translateZ(-10vh) translateY(2vh) rotateY(10deg); transform: translateZ(-10vh) translateY(2vh) rotateY(10deg) ;
	}
	#image { 
		-webkit-transform-style: preserve-3d; transform-style: preserve-3d; 
		-webkit-perspective: 600px; perspective: 600px;
		-webkit-perspective-origin: center 20vh; perspective-origin: center 20vh;
	}
	#image {
		height:100%;
		overflow:hidden;
	}
	#accueil .miroir { 
		width:100%;
		height:100%;
	}
	#accueil img { 
		width:auto;
		margin:auto;
	}
	.bonjour { 
		padding-left:2vw;
	}
	#livre { 
		-webkit-perspective: 600px; perspective: 600px;
		-webkit-perspective-origin: center 20vh; perspective-origin: center 20vh;
	}
	#scene { 
		-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
		-webkit-transform: translateZ(-15vh) translateY(3vh);  transform: translateZ(-15vh) translateY(3vh);
	}	
	#ap_g_2,
	#ap_2 { 
		z-index:5;
		right:8vh;
		-webkit-transform: rotateY(30deg) translateZ(-15vh); -ms-transform: rotateY(30deg) translateZ(-15vh); transform: rotateY(30deg) translateZ(-15vh);
	}
	#ap_1 { 
		z-index:6;
		right:0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); -ms-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);
	}
	#ap_0 { 
		z-index:7;
		right:-8vh;
		-webkit-transform: rotateY(30deg) translateZ(-5vh); -ms-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);
	}
	#av_1 { 
		z-index:7;
		left:-8vh; 
		-webkit-transform: rotateY(-30deg) translateZ(-5vh); -ms-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);
	}
	#av_2 { 
		z-index:6;
		left:0vh;
		-webkit-transform: rotateY(-30deg) translateZ(-10vh); -ms-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);
	}
	#av_0 { 
		z-index:8;
		right:calc(50% - 28.925615vh);
		-webkit-transform: translateZ(10vh); -ms-transform: translateZ(10vh); transform: translateZ(10vh);
	}	
	#ap_g_1 { 
		z-index:6;
		-webkit-animation-name: Page_pg1; animation-name: Page_pg1;
	}
	#ap_g_0 { 
		z-index:7;
		-webkit-animation-name: Page_pg0; animation-name: Page_pg0;
	}
	#av_g_0 { 
		z-index:8;
		-webkit-animation-name: Page_g0;  animation-name: Page_g0;
	}
	#av_g_1 { 
		z-index:7;
		-webkit-animation-name: Page_vg1; animation-name: Page_vg1;
	}
	#av_g_2 { 
		z-index:6;
		-webkit-animation-name: Page_vg2; animation-name: Page_vg2;
	}
	#av_g_3 { 
		z-index:5;
		-webkit-animation-name: Page_vg3; animation-name: Page_vg3;
	}
	#ap_d_2 { 
		z-index:5;
		-webkit-animation-name: Page_pd2; animation-name: Page_pd2;
	}
	#ap_d_1 { 
		z-index:6;
		-webkit-animation-name: Page_pd1; animation-name: Page_pd1;
	}
	#ap_d_0 { 
		z-index:7;
		-webkit-animation-name: Page_pd0; animation-name: Page_pd0;
	}
	#av_d_0 { 
		z-index:8;
		-webkit-animation-name: Page_d0;  animation-name: Page_d0;
	}
	#av_d_1 { 
		z-index:7;
		-webkit-animation-name: Page_vd1; animation-name: Page_vd1;
	}
	#av_d_2 { 
		z-index:6;
		-webkit-animation-name: Page_vd2; animation-name: Page_vd2;
	}
	#av_d_3,#av_3 { 
		z-index:5;
		left:8vh;
		-webkit-transform: rotateY(-30deg) translateZ(-15vh); -ms-transform: rotateY(-30deg) translateZ(-15vh); transform: rotateY(-30deg) translateZ(-15vh);
	}	
	@keyframes Page_pg1 { /*#ap_g_1*/
		  0%{ right:8vh; -webkit-transform: rotateY(30deg) translateZ(-15vh); transform: rotateY(30deg) translateZ(-15vh);} 	
		 50%{ right:8vh; -webkit-transform: rotateY(30deg) translateZ(-15vh); transform: rotateY(30deg) translateZ(-15vh);}
		100%{ right:0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);}
	}
	@keyframes Page_pg0 { /*#ap_g_0*/
		  0%{ right: 0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);} 
		 50%{ right: 0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);} 	
		100%{ right:-8vh; -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);}
	}
	@keyframes Page_g0 { /*#av_g_0*/
		  0%{ right:-8vh;					 -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);}
		 50%{ right:-8vh;					 -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);} 
		100%{ right:calc(50% - 28.925615vh); -webkit-transform: rotateY(0) translateZ(10vh); transform: rotateY(0) translateZ(10vh);}
	}
	@keyframes Page_vg1 { /*av_g_1*/
		  0%{ 	left:calc(50% - 28.925615vh); -webkit-transform: rotateY(0) translateZ(10vh); transform: rotateY(0) translateZ(10vh);}  
		 50%{ 	left:-8vh; 					  -webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}  
		100%{ 	left:-8vh; 					  -webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}
	}
	@keyframes Page_vg2 { /*av_g_2*/
		  0%{ left:-8vh; -webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}
		 50%{ left:0vh;  -webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);} 
		100%{ left:0vh;  -webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);}
	}
	@keyframes Page_vg3 { /*av_g_3*/
		  0%{ left:0; 	-webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);}
		 50%{ left:8vh; -webkit-transform: rotateY(-30deg) translateZ(-15vh); transform: rotateY(-30deg) translateZ(-15vh);}
		100%{ left:8vh; -webkit-transform: rotateY(-30deg) translateZ(-15vh); transform: rotateY(-30deg) translateZ(-15vh);}
	}
	@keyframes Page_pd2 { /*ap_d_2*/
		  0%{ right:0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);} 	
		 50%{ right:8vh; -webkit-transform: rotateY(30deg) translateZ(-15vh); transform: rotateY(30deg) translateZ(-15vh);}	
		100%{ right:8vh; -webkit-transform: rotateY(30deg) translateZ(-15vh); transform: rotateY(30deg) translateZ(-15vh);}
	}
	@keyframes Page_pd1 { /*ap_d_1*/
		  0%{ right:-8vh; -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);}	
		 50%{ right: 0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);} 	
		100%{ right: 0vh; -webkit-transform: rotateY(30deg) translateZ(-10vh); transform: rotateY(30deg) translateZ(-10vh);}
	}
	@keyframes Page_pd0 { /*ap_d_0*/
		  0%{ right:calc(50% - 28.925615vh); -webkit-transform: rotateY(0) translateZ(10vh); transform: rotateY(0) translateZ(10vh);}
		 50%{ right:-8vh; 					 -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);}  
		100%{ right:-8vh; 					 -webkit-transform: rotateY(30deg) translateZ(-5vh); transform: rotateY(30deg) translateZ(-5vh);}
	}
	@keyframes Page_d0 {
		  0%{ left:-8vh; 					-webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}
		 50%{ left:-8vh; 					-webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}
		100%{ left:calc(50% - 28.925615vh); -webkit-transform: rotateY(0) translateZ(10vh); transform: rotateY(0) translateZ(10vh);}
	}
	@keyframes Page_vd1 {
		  0%{ left: 0vh; -webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);}
		 50%{ left: 0vh; -webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);}  
		100%{ left:-8vh; -webkit-transform: rotateY(-30deg) translateZ(-5vh); transform: rotateY(-30deg) translateZ(-5vh);}
	}
	@keyframes Page_vd2 { /*av_d_2*/
		  0%{ left:8vh; -webkit-transform: rotateY(-30deg) translateZ(-15vh); transform: rotateY(-30deg) translateZ(-15vh);} 
		 50%{ left:8vh; -webkit-transform: rotateY(-30deg) translateZ(-15vh); transform: rotateY(-30deg) translateZ(-15vh);}
		100%{ left:0vh; -webkit-transform: rotateY(-30deg) translateZ(-10vh); transform: rotateY(-30deg) translateZ(-10vh);}
	}
	
	@-webkit-keyframes Gallerie { 0%{ opacity:0;} 100%{	opacity:1;} }
	        @keyframes Gallerie { 0%{ opacity:0;} 100%{	opacity:1;}	}
	
@-webkit-keyframes clignote {
	0%{box-shadow:0px 0px 10px #4183C4;}
	50%{box-shadow:0px 0px 0px #4183C4;}
	100%{box-shadow:0px 0px 10px #4183C4;}
}
	#accueil img 		{ width:calc(62.272vh - 25.6px - 2.112vw);}
	#accueil img 		{ height:calc(87.57vh - 36px - 2.97vw);}
	#accueil .fondu 	{ height:calc(9.73vh - 4px - 0.33vw);}
	#accueil .fondu 	{ position:absolute; top:calc(87.57vh - 36px - 2.97vw);}
	#accueil .miroir 	{ height:calc(97.3vh - 40px - 3.3vw);}
	
	#livre figure 		{ position:absolute; top:0;}
	.statut img 		{ width:auto;}
	.statut .miroir 	{ height:24.178vw;}
}

/*************************************************************************************************************************************************/

@media screen and (orientation: portrait){
	#accueil {
		display:flex;
		flex-direction:column;
		
	}	
	.cadre { flex-direction:column;}
	.statut h3 { text-align:center;}

	#image 						{ height:40%; z-index:4;}	
	.bonjour 					{ z-index:5; display:block;min-height:60%;}
	#accueil 					{ display:flex; flex-direction:column; text-align:center;}
	#accueil form,
	#accueil table 				{ margin:auto;}
	.miroir	 					{ margin:1vh auto;}
	.miroir img 				{ margin:auto;}
	address .centre 			{ text-align:left;}
	#accueil form 				{ margin-top:2vh;}
	#accueil h2,
	#accueil audio { margin:3vh auto;}
	#ap_d_2, #ap_g_2,
	#ap_d_1, #ap_g_1,	
	#ap_d_0, #ap_g_0,
	#av_1, #av_d_1, #av_g_1,
	#av_2, #av_d_2, #av_g_2,
	#av_3, #av_d_3, #av_g_3 { display:none;}
	#scene { position:relative;}
	#livre figure { position:relative;}
	.statut img { width:auto;}
}

/*************************************************************************************************************************************************/

@media screen and (max-width: 1023px) {
	.bg_1 						{ background: url(../img/menu/mini/navigation_1.jpg) center center / cover no-repeat;}
	.bg_2 						{ background: url(../img/menu/mini/navigation_2.jpg) center center / cover no-repeat;}
	.bg_3 						{ background: url(../img/menu/mini/navigation_3.jpg) center center / cover no-repeat;}
	.bg_4 						{ background: url(../img/menu/mini/navigation_4.jpg) center center / cover no-repeat;}
	.bg_5 						{ background: url(../img/menu/mini/navigation_5.jpg) center center / cover no-repeat;}
	.bg_6 						{ background: url(../img/menu/mini/navigation_6.jpg) center center / cover no-repeat;}
	.bg_7 						{ background: url(../img/menu/mini/navigation_7.jpg) center center / cover no-repeat;}
	.bg_8 						{ background: url(../img/menu/mini/navigation_8.jpg) center center / cover no-repeat;}
	.bg_9 						{ background: url(../img/menu/mini/navigation_9.jpg) center center / cover no-repeat;}
	.bg_10 						{ background: url(../img/menu/mini/navigation_10.jpg) center center / cover no-repeat;}
	.bg_11 						{ background: url(../img/menu/mini/navigation_11.jpg) center center / cover no-repeat;}
	.bg_12 						{ background: url(../img/menu/mini/navigation_12.jpg) center center / cover no-repeat;}
	.bg_13 						{ background: url(../img/menu/mini/navigation_13.jpg) center center / cover no-repeat;}
	.bg_14 						{ background: url(../img/menu/mini/navigation_14.jpg) center center / cover no-repeat;}
	.bg_15 						{ background: url(../img/menu/mini/navigation_15.jpg) center center / cover no-repeat;}
	.bg_16 						{ background: url(../img/menu/mini/navigation_16.jpg) center center / cover no-repeat;}
	.bg_17 						{ background: url(../img/menu/mini/navigation_17.jpg) center center / cover no-repeat;}
	.bg_18 						{ background: url(../img/menu/mini/navigation_18.jpg) center center / cover no-repeat;}
	.bg_19 						{ background: url(../img/menu/mini/navigation_19.jpg) center center / cover no-repeat;}
	.bg_20 						{ background: url(../img/menu/mini/navigation_20.jpg) center center / cover no-repeat;}	
	
}
/*************************************************************************************************************************************************/

@media screen and (min-width: 1024px) {
	.bg_1 						{ background: url(../img/menu/navigation_1.jpg) center center / cover no-repeat;}
	.bg_2 						{ background: url(../img/menu/navigation_2.jpg) center center / cover no-repeat;}
	.bg_3 						{ background: url(../img/menu/navigation_3.jpg) center center / cover no-repeat;}
	.bg_4 						{ background: url(../img/menu/navigation_4.jpg) center center / cover no-repeat;}
	.bg_5 						{ background: url(../img/menu/navigation_5.jpg) center center / cover no-repeat;}
	.bg_6 						{ background: url(../img/menu/navigation_6.jpg) center center / cover no-repeat;}
	.bg_7 						{ background: url(../img/menu/navigation_7.jpg) center center / cover no-repeat;}
	.bg_8 						{ background: url(../img/menu/navigation_8.jpg) center center / cover no-repeat;}
	.bg_9 						{ background: url(../img/menu/navigation_9.jpg) center center / cover no-repeat;}
	.bg_10 						{ background: url(../img/menu/navigation_10.jpg) center center / cover no-repeat;}
	.bg_11 						{ background: url(../img/menu/navigation_11.jpg) center center / cover no-repeat;}
	.bg_12 						{ background: url(../img/menu/navigation_12.jpg) center center / cover no-repeat;}
	.bg_13 						{ background: url(../img/menu/navigation_13.jpg) center center / cover no-repeat;}
	.bg_14 						{ background: url(../img/menu/navigation_14.jpg) center center / cover no-repeat;}
	.bg_15 						{ background: url(../img/menu/navigation_15.jpg) center center / cover no-repeat;}
	.bg_16 						{ background: url(../img/menu/navigation_16.jpg) center center / cover no-repeat;}
	.bg_17 						{ background: url(../img/menu/navigation_17.jpg) center center / cover no-repeat;}
	.bg_18 						{ background: url(../img/menu/navigation_18.jpg) center center / cover no-repeat;}
	.bg_19 						{ background: url(../img/menu/navigation_19.jpg) center center / cover no-repeat;}
	.bg_20 						{ background: url(../img/menu/navigation_20.jpg) center center / cover no-repeat;}	

}
/*************************************************************************************************************************************************/