/* ----------------I/ GÉNÉRALITÉS----------------------------- */
/* ----------------I/1. Polices----------------------------- */

@font-face
{ 
	font-family:'futura';
	src: url('/polices/futuralightbt/futuralightbt.eot');
	src: url('/polices/futuralightbt/futuralightbt.eot#iefix') format('eot'),
	     url('/polices/futuralightbt/futuralightbt.woff') format('woff'),
	     url('/polices/futuralightbt/futuralightbt.svg#webfont') format('svg'),
	     url('/polices/futuralightbt/futuralightbt.ttf') format('truetype');

	     font-weight: normal;
	     font-style:normal;
	     font-variant:normal;
}



/* ----------------I/2. Page, body----------------------------- */


body
{
	background-color:rgb(255,255,255);
	margin:0;
	padding:0;
	box-sizing: border-box;
	width:100%;
	
	/*border:pink dotted 5px;*/
}


.page
{
	background-color:rgb(255,255,255);
	margin:0;
	margin:auto;
	padding:0;
	width:85%;
	color:black;

	/*border:1px solid red;*/
}


a, a:visited, a:active
{	
	color:black;
	text-decoration:none;
}

a:hover
{
	text-decoration: none;
	color:grey;
}

.mobile 
{
	display:none;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{
	
			body
			{
				margin:auto;
				/*border:green dotted 5px;*/
			}


			.page
			{
				width:100%;
				min-width:400px;
				margin:auto;
				/*background-color:rgb(200,100,100);	
				border:red 1px solid;*/
			}

			.bureau
			{
				display:none;
			}


			.mobile
			{
				display:block;
			}

}

/* ----------------I/3. Menu ----------------------------- */



nav
{
	width:100%;
	margin:auto;
	margin-top:2%;
	margin-bottom: 2%;
	/*border:solid 1px red;*/

}

nav ul
{
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	list-style-type: none;
	align-items: center;
	vertical-align: center
	margin:auto;
	margin:0;
	padding:0;

	/*border:green solid 2px;*/
}


.logo_menu
{
	width:35%;
	font-family:"Courier New", serif;
	font-size:2em;
	text-align: left;
	color:grey;
	/*border:pink 2px dashed;*/
}

.logo_menu a
{
	color:grey;
}



.boutons_navigation
{
	width:65%;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
	font-family: "Courier New", serif;
	font-size:0.9em;
	/*border:blue solid 1px;*/
}

.boutons_navigation li
{
	/*border:red 1px solid;*/
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					nav
				{
					margin-top:1%;
					margin-bottom: 1%;
				}

				nav ul
				{
					
				}


				.logo_menu
				{
					width:37%;
					font-weight: normal;
					font-size:1.7em;
					letter-spacing: -0.05em;
					text-align: center;
					padding-left: 1%;
					/*border:pink 2px dashed;*/
				}

				.boutons_navigation
				{
					width:63%;
					display:flex;
					flex-direction: row;
					justify-content: space-around;
					flex-wrap:wrap;
					font-size:0.8em;
					font-weight: bold;
					letter-spacing: 0.05em;
					/*border:blue solid 1px;*/
				}

				.boutons_navigation li
				{
					width:40%;
					padding:3.5%;
					text-align: center;
					/*border:red 1px solid;*/
				}

}

/* ----------------II/Page d'accueil : section couverture----------------------------- */

.couverture
{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: top;
	margin:0;
	/*border:blue 2px dotted;*/
}

.illustration
{
	background-image:url("/visuels/couverture_accueil.jpg");
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}

.illustration, .presentation
{
	width:50%;
	min-height:60vh;
	/*border:red 2px solid;*/
}

.slogan_couverture
{
	margin:0;
	padding:0;
	/*border:green solid 1px;*/
}

.slogan_couverture p
{
	font-family: "Courier New", serif;
	text-align: center;
	
	/*border:orange 2px dashed;*/
}

.slogan_couverture p:nth-child(1n)
{
	font-size:2em;
	margin-top: 16%;
	margin-bottom: 0;
}


.slogan_couverture p:nth-child(2n)
{
	font-size:2.6em;
	margin-top: 2%;
	margin-bottom: 12%;
}

.introduction
{
	font-family:"Courier New", serif;
	font-size:1em;
	text-align:center;

	line-height: 2em;
	padding:1%;

}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{


					.couverture
					{
						
					}

					.presentation
					{
						background-image:url("/visuels/couverture_accueil_mobile.jpg");
						background-size: cover;
						background-repeat: repeat;
						background-position: center;
						width:96%;
						min-height:100vh;
					}

					.slogan_couverture
					{
						
					}

					.slogan_couverture p
					{
						
					}

					.slogan_couverture p:nth-child(1n)
					{
						font-size:1.8em;
						margin-top: 12%;
						margin-bottom: 0;
					}


					.slogan_couverture p:nth-child(2n)
					{
						font-size:2.4em;
						margin-top: 1%;
						margin-bottom: 6%;
					}

					.introduction
					{
						font-size:0.9em;
						line-height: 1.8em;
					}

}
/*-------------------------II/ Accueil : section biographies--------*/

.biographies
{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	margin:0;
	margin-top:2%;
	margin-bottom: 2%;
	/*border:green solid 1px;*/
}

.bio_auriane_sacoman, .bio_charly_mandon
{
	width:46%;
	
}

.biographies h3
{
	font-family: "Courier New", serif;
	font-weight: bolder;
	font-size:0.8em;
	line-height: 1.5em;
	text-align:center;
	margin-bottom: 2%;
	padding:1%;
	/*border:pink solid 2px;*/
	
}

.biographies p
{
	font-family: "Courier New", serif;
	font-size:0.8em;
	line-height: 1.5em;
	text-align: justify;
	/*border:purple 2px solid;*/
}

.imageflottanteD
{
	float:inline-end;
	max-width:40%;
	padding-left:2%;
	/*border:green 3px solid;*/
}

.imageflottanteG
{
	float:inline-start;
	max-width:30%;
	padding-right:2%;
	/*border:green 3px solid;*/
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					.biographies
					{
						display:flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.bio_auriane_sacoman, .bio_charly_mandon
					{
						width:96%;
						margin:auto;
					}

					.biographies h3
					{
												
					}

					.biographies p
					{
						letter-spacing: -0.03em;
						margin-bottom: 4%;	
					}

					.imageflottanteD
					{
						float:right;
						max-width:40%;
						padding-left:2%;
						/*border:green 3px solid;*/
					}

					.imageflottanteG
					{
						float:left;
						max-width:30%;
						padding-right:2%;
						/*border:green 3px solid;*/
					}


}

/* ----------------III/Répertoire / Incubateur : section couverture----------------------------- */


.couverture_incubateur
{
	background-image:url("/visuels/couverture_incubateur.jpg");
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
	padding:0;
	margin:0;
	border:white 1px dotted;
}

.slogan_incubateur
{
	width:50%;
	position:relative;
	left:48%;
	margin:0;
	padding:0;
	/*border:green solid 1px;*/
}

.slogan_incubateur p
{
	font-family: "Courier New", serif;
	font-weight: bold;
	text-align: center;
	
	/*border:orange 2px dashed;*/
}

.slogan_incubateur p:nth-child(1n)
{
	font-size:2em;
	margin-top: 16%;
	margin-bottom: 0;
}

.slogan_incubateur p:nth-child(2n)
{
	font-size:2.6em;
	margin-top: 2%;
	margin-bottom: 12%;
}

.introduction_incubateur
{
	width:50%;
	position:relative;
	left:48%;
	font-family:"Courier New", serif;
	font-size:1em;
	text-align:center;
	line-height: 2em;
	padding:0;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					.couverture_incubateur
					{
					background-image:url("/visuels/couverture_incubateur_mobile.jpg");	
					}

					.slogan_incubateur
					{
						width:75%;
						position:relative;
						left:13%;
					}

					.slogan_incubateur p
					{
						
					}

					.slogan_incubateur p:nth-child(1n)
					{
						font-size:1.7em;
						margin-top: 16%;
					}


					.slogan_incubateur p:nth-child(2n)
					{
						font-size:2.3em;
						margin-top: 2%;
						margin-bottom: 12%;
					}

					.introduction_incubateur
					{
						width:75%;
						position:relative;
						left:13%;
						font-size:0.9em;
						line-height: 1.8em;
					}


}

/* ----------------IV/ Répertoire / Incubateur : liste répertoire----------------------------- */

.repertoire
{
	
	margin-top:3%;
	width:100%;
	/*border:red 2px solid;*/
}

.repertoire table
{
	width:100%;
}

.repertoire td
{
	margin-bottom:2%;
	/*border:red 1px solid;*/
}

.compositeur

{
	font-family: "Courier New", serif;
	font-weight:bold;
	font-size:0.9em;
	text-align: left;
	padding-top:1%;
	/*border:green solid 2px;*/
}

.oeuvre
{
	font-family: "Courier New", serif;
	font-weight: normal;
	font-style:italic;
	font-size: 0.9em;
	letter-spacing: -0.05em;
	margin-left:5%;
	margin-bottom: 0;
	/*border: red solid 1px;*/
}


.elements
{
	display:none;
	list-style-type:decimal;
	font-family: "Courier New", serif;
	font-weight: normal;
	font-size: 0.8em;
	letter-spacing: -0.05em;
	margin:0;
	margin-left:10%;
	margin-bottom:1%;
	/*border:purple solid 2px;*/
}

.annee
{
	font-family: "Courier New", serif;
	font-style: normal;
}

.duree
{
	font-family: "Courier New", serif;
	font-style:normal;
	font-size:0.8em;
}

.poete
{
	font-family: "Courier New", serif;
	font-weight: normal;
	color:rgb(75,75,75);
	font-size: 0.75em;
	letter-spacing: -0.05em;
	margin:0;
	margin-left:5%;
	margin-bottom: 0.5%;
}

.icone2
{
	width:20%;
	text-align: center;
	vertical-align: middle;
	font-family: "Courier New", serif;
	font-style: italic;
	font-size: 0.8em;
	letter-spacing: -0.03em;
	/*border:orange 2px solid;*/

}

.icone2 img
{
	margin-right: 10px;
	vertical-align: middle;
	width:30px;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					.repertoire
					{
						margin-top:2%;
						width:97%;
						margin-bottom: 4%;
					}

					.repertoire table
					{
						
					}

					.compositeur

					{
						font-size:0.85em;
					}

					.oeuvre
					{
						font-size: 0.85em;
						margin-left:3%;
						margin-bottom: 0;
					}

					.elements
					{
						font-size: 0.75em;
						letter-spacing: -0.05em;
						margin-left:6%;
					}

					.annee
					{
						
					}

					.duree
					{
						font-size:0.75em;
					}

					.poete
					{
						font-size: 0.75em;
						letter-spacing: -0.02em;
						margin:0;
						margin-left:3%;
					}

					.icone2
					{
						width:20%;
						text-align: center;
						vertical-align: middle;
						font-family: "Courier New", serif;
						font-style: italic;
						font-size: 0.8em;
						letter-spacing: -0.03em;
					}

					.icone2 img
					{
						margin-right: 10px;
						vertical-align: middle;
						width:30px;
					}

	
}

/* ----------------V/ Laboratoire / enregistrements vidéos----------------------------- */

.actualite p
{
	padding-top:5%;
	font-family: "Courier New", serif;
	text-align: center;
	line-height: 1.5em;
	font-size: 0.9em;
	color:grey;
	width:60%;
	margin:auto;
	margin-bottom:5%;

	/*border:pink 2px solid;*/
}

.videos
{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: top;
	flex-wrap: wrap;
	margin:auto;
	margin:4% 0% 0% 0%;
	padding:0;
	/*border:purple 2px solid;*/
}

figure
{
	padding:0;
	margin:0;
	margin-bottom: 3%;
	/*border:pink 2px dashed;*/
}


figcaption
{
	width:330px;
	font-family: "Courier New", serif;
	font-size: 0.8em;
	text-align: center;
	padding-top:0.3%;

	/*border:blue solid 1px;*/
}

.piece
{
	color:#6CB52D;
	font-style: italic;
	font-weight: bold;
	margin:0;
	padding:0;
}


.composer
{
	font-weight: bold;
	color:#026530;
	margin:0;
	padding:0;
}

.description
{
	margin:0;
	padding:0;
	letter-spacing: -0.03em;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					.actualite p
					{
						width:80%;
						letter-spacing: -0.03em;	
					}

					.videos
					{
						display:flex;
						justify-content: space-around;
					}

					figure
					{
						margin-bottom: 5%;
					}

					iframe
					{
						margin:auto;
					}

					figcaption
					{
						font-size: 0.8em;
					
					}


}

/* ----------------VI/ Planning / calendrier des concerts----------------------------- */



.sousmenu_concerts
{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	list-style-type:none;
	
	width:20%;
	margin:auto;
	
	/*border:red dotted 5px;*/
}

.sousmenu_concerts li /* appliquer absolument aux <li> le flex et les attributs collatéraux pour centrer le CONTENU TEXTUEL */
{
	display:flex;
    flex-direction:row;
    align-items:center;
    margin-bottom: 20%
	
	/*border:blue dotted 5px;*/
}


.selection_page
{
	font-size:2em;
	font-weight:bold;
}

.selection_page a
{
	color:#CFB486;
}

.planning
{
	width:100%;
	margin:0;
	margin:auto;
	margin-top:7%;
	/*border:pink dashed 3px;*/
}

.nb
{
	width:60%;
	margin:auto;
	font-family: "Courier New", serif;
	color:grey;
	text-align: center;
	font-size: 0.9em;
	margin-bottom:7%;
	/*border:purple 2px solid;*/
}

.planning ul.liste_concerts
{
	width:100%;
	margin:0;
	padding:0;
	list-style-type: none;
	/*border:black 1px dotted;*/
}

.planning li
{
	width:100%;
	margin:0;
	padding-bottom: 1%;
	background:linear-gradient(#026530, #026530) bottom left / 20% 2px;
	background-repeat: no-repeat;
	/*border:purple 1px solid;*/
}

.date
{
	font-family: "Courier New", serif;
	font-weight: bold;
	color:#6CB52D;
	font-size:0.9em;
}

.intitule_concert
{
	font-family: "Courier New", serif;
	font-weight: bold;
	color:#026530;
	font-size:0.9em;
	letter-spacing: -0.03em;
}

.programme
{
	font-family:"Courier New", serif;
	font-size:0.9em;
	line-height: 1.3em;
	padding-left:2%;
}

.lieu_concert
{
	font-family: "Courier New", serif;
	font-weight: bold;
	letter-spacing: -0.03em;
	font-size: 0.9em;
}

.commentaire
{
	font-family: "Courier New", serif;
	font-size: 0.75em;
	color:grey;
}

.commentaire a
{
	font-family: "Courier New", serif;
	color:grey;
	text-decoration: underline grey;
}

/* >>>>>>>>>> MOBILE */

@media all and (max-width:900px)
{

					.planning
					{
						width:97%;
						margin-left:1.5%;
						margin-right: 1.5%;
					}

					.nb
					{
						width:70%;
						padding-top: 2%;
						padding-bottom: 2%;
					}

					.planning ul
					{
						
					}

					.planning li
					{
						background:linear-gradient(#365A26, #365A26) bottom left / 35% 2px;
						background-repeat: no-repeat;
					}

					.date
					{
						letter-spacing: -0.03em;
					}

					.intitule_concert
					{
						letter-spacing: -0.03em;
					}

					.programme
					{
						font-size:0.8em;
						line-height: 1.2em;
						letter-spacing: -0.04em;
						padding-left:2%;
					}

					.lieu_concert
					{
						font-size: 0.8em;
						letter-spacing: -0.04em;
					}


}

/*-------------------------VII/ Contact --------*/



.couverture_contact
{
	width:100%;
	min-height:100vh;
	background-image:url("/visuels/duo_sacomandon_cortot.jpg");
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover;
	display:flex;
	margin:0%;
}

form
{
	width:40%;
	margin:auto;
	text-align:center;
	font-size:1em;
}

form div
{
	width:100%
	margin:0;
}

input
{
	border:none;
	width:100%;
	height:40px;
	background-color:rgba(255,255,255, 0.75);
	font-size:0.6em;
	font-weight:normal;
	letter-spacing:0.1em;
	margin:2% 0% 0% 0%;
	padding-left:2%;
}

input::placeholder
{
	color:black;
	font-size:0.9em;
}

#bouton
{
	width:22%;
	position:relative;
	left:80%;
}

button
{
	width:100%;
	height:30px;
	border:none;
	background-color:rgba(255,255,255, 0.85);
	font-family:calibri;
	font-variant:small-caps; 
	font-size:0.8em;
	font-weight:bold;
	letter-spacing:0.05em;
	text-align:center;
	cursor:pointer;
}

textarea
{
	width:100%;
	height:150px;
	background-color:rgba(255,255,255, 0.7);
	margin:2% 0% 5% 0%;
	font-family:calibri;
	font-size:0.7em;
	letter-spacing:0em;
	padding-top:3%;
	border:none;
	resize:none;
	padding-left:2%;
}

textarea::placeholder
{
	color:black;
	font-size:1.1em;
	font-family:calibri;
}

.erreur
{
	font-weight:normal;
	color:white;
	background-color:rgba(255,0,0, 0.6);
	padding:2%;
	font-size:0.9em;
	margin:0% 0% 2% 0%;
	width:98%;
}

.validation
{
	width:50%;
	padding:2%;
	margin:auto;
	font-family: "Calibri", serif;
	font-size:1.1em;
	line-height: 1.2em;
	font-weight:normal;
	letter-spacing:0.1em;
	text-align:center;
	color:white;
	background-color:rgba(150,150,150,0.5);
	/*border:purple 3px solid;*/
}

.information
{
	display:flex;
	font-family:calibri;
	font-weight:bold;
	text-align:center;
	justify-content:center;
	align-items:center;
	width:40%;
	height:15%;
	padding:1% 3% 1% 3%;
	background-color:rgba(255,255,255, 0.7);
	position:relative;
	top:20%;
}



/* @@@@@@@@@@ MOBILE */

@media all and (max-width:900px)
{	
		form
		{
			width:85%;
		}
		
		.information
		{
			width:80%;
		}
}



/* @@@@@@@@@@ ÉCRAN HAUT */

@media all and (min-width:900px) and (min-height:1050px)
{
		form
		{
			font-size:1.1em;
		}
}



/* @@@@@@@@@@ ÉCRAN LARGE */

@media all and (min-width:1950px)
{
		form
		{
			font-size:1.2em;
		}
}


/*-------------------------VIII/ Copyright--------*/

footer
{
	font-family: "Courier New", serif; 
	font-size:0.7em;
	font-weight: bold;
	text-align:center;
	margin-top: 2%;
	padding:1%;

	/*border:purple 1px solid;*/
}
/*
     FILE ARCHIVED ON 00:23:57 Mar 03, 2021 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:31:13 Jun 22, 2021.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 226.464
  exclusion.robots: 0.188
  exclusion.robots.policy: 0.176
  RedisCDXSource: 0.668
  esindex: 0.011
  LoadShardBlock: 206.9 (3)
  PetaboxLoader3.datanode: 203.751 (4)
  CDXLines.iter: 16.062 (3)
  load_resource: 66.39
  PetaboxLoader3.resolve: 27.156
*/