/*Site-wide*/

html {
	width:100%;
	margin:0;
	scroll-behavior: smooth;
	background-color:White;
	transition: background-color 0.5s ease-out;
}

body {
	width:100%;
	max-height:100vh;
	overflow:hidden;
	font-family:Helvetica Neue, "Segoe UI", sans-serif;
	line-height:1.5;
	margin:0;
	position:relative;
}

ul {
	padding-left:0;
}

.preload * {
  -webkit-transition: none;
  transition: none;
}

/*Elements*/

/*Index*/

.container, .sub-section {
	width:100%;
	max-width:1600px;
	margin: auto;
	height:100vh;
	overflow-y:scroll;
}

.flex-container {
	display:flex;
}

/*Header*/
#header-accueil {
	display:flex;
	justify-content:space-between;
	margin:auto 10%;
	padding:40px 0 0;
	align-items:flex-end;
	text-transform:uppercase;
}


#header-brand {
	font-size:3rem;
	font-weight:200;	
}

#header-brand:hover {
	cursor:default;
}

#header-brand-surname {
	font-weight:900;
}

#header-contact span{
	font-size:2em;
	letter-spacing:-1px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

#header-contact {
	display:flex;
	align-items:flex-end;
}

#header-contact span:hover {
	font-size:2.5rem;
	color:DarkRed;
	cursor:pointer;
}

#header-contact #facebook {
	display:inline;
	width:2.5em;
	margin-left:1em;
	transition: width 0.3s;
}

#header-contact #facebook:hover {
	width:3.5em;
}

#header-contact #facebook path{
	fill:#3b5998;
}

/*Navigation tabs*/
.main-nav {
	margin: 20px 9% auto;
}

.nav ul {
	list-style:none;
	display:flex;
	justify-content:space-evenly;
	align-items:flex-end;
	padding:0;
}

.nav li {
	width:30%;
	position:relative;
	background-color:LightGrey;
	font-size:0;
}

.nav #nav-litterature {
	width:20%;
	max-width:266px;
}

.nav span {
	width:100%;
	position: absolute;
	top: 0.3em;
	left:0;
	text-align:center;
	text-transform:uppercase;
	font-family:'Modern No. 20', Didot,'Cormorant', Times New Roman, serif;
	color:White;
	font-size:3rem;
	font-weight:500;
}

.nav .img-container {
	overflow:hidden;
}

.main-nav .img-container {
	margin:5%;	
	width:90%;
}

.nav img {
	width:100%;
	transition:transform 0.5s ease-out;
}

.nav .img-container:hover {
	cursor:pointer;
}

.nav .img-container:hover img{
	transform:scale(1.2);
}

.plus {
	font-family:Helvetica Neue, "Segoe UI", sans-serif;
	opacity:0;
	position:absolute;
	bottom:10px;
	right:40px;
	color:White;
	font-size:6rem;
	font-weight:900;
	-webkit-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}

.nav .img-container:hover .plus {
	opacity:1;
}

.nav li#nav-litterature span{
	font-size:2rem;
}

/* Bannière pour les événements */

.banner {
	margin: 20px 9% auto;
	justify-content:space-evenly;
}

.banner p {
	margin-block-end:0;
}

.banner-event {
	width:26%;
	padding:1% 2%;
	position:relative;
	color:White;
	font-size:0.9em;
	border-radius:4px;
	box-shadow:0 2px 10px rgba(0, 0, 0, 0.4);
}

.banner .banner-event:last-child {
	width:16%;
	max-width:266px;
}

.banner-event h1{
	font-size:1.33em;
	font-weight:300;
	margin:0;
}

.banner-event h2 {
	font-size:1.15em;
	font-weight:400;
	margin:0;
	color:#00205B;
}

.banner .banner-icon {
	float: right;
	font-size:2.2em;
	transition: font-size 0.3s ease-out;
}

.banner .banner-icon:hover {
	font-size:3em;
}

/* Partie à propos */

.texte {
	max-width:800px;
	text-align:justify;
	margin: 25px auto;
	padding: 25px 100px;
}

.photo-right {
	display:flex;
	align-items:flex-start;
}

#photo {
	margin : -3rem -3rem 0 3rem;
	width:40%;
}

#presentation {
	background: Black;
	color:White;
}

#presentation h1 {
	font-family: 'Herr von Muellerhoff', cursive;
	text-align:center;
	font-weight:400;
	font-size:3.5em;
	margin:0;
	width:60%;
}

/*Propres aux pages secondaires*/
.section {
	visibility:hidden;
	width:100%;
	min-height:100%;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color:Black;
	opacity:0;
	transform:translateY(-100%);
	color:White;
	transition: visibility 0.3s, opacity 0.3s, transform 0.5s ease-out;
}

.section .container {
	width:90%;
	height:95vh;
	padding:5vh 5% 0;
}

.section.active {
	opacity:1;
	transform:translateY(0);
}

.section>.container>header {
	display:flex;
	justify-content:space-between;
	width:90%;
	margin:auto;
}

.back-button {
	font-size:1.4rem;
	opacity:0.8;
	transition: opacity 0.5s ease-in-out;
}

.back-button #triangle {
	width:1rem;
}

.section .back-button:hover, #contact .back-button:hover {
	cursor:pointer;
	opacity:1;
}

.section-name {
	text-transform: uppercase;
	font-size:3rem;
	font-family:'Modern No. 20', Didot,'Cormorant', Times New Roman, serif;
}

.section-nav {
	width: 90%;
	margin: auto;
}

.section-nav li {
	width:40%;
}



.section .texte {
	margin-top:50px;
}

.section .intro {
	background-color:White;
	Color:Black;
}

#musique .intro {
	background-color:Black;
	Color:White;
}

#musique q{
	font-family: 'Tangerine', cursive;
	font-size:2.1em;
}

#phrase-musique-4 {font-family: 'Pinyon Script';font-size:1.7rem;}

.blockquote-footer::before {
	content:"\2014\00A0";
}

.blockquote-footer {
	margin-left:1em;
	font-size:0.8em;
	color:#bbdefb;
}

/* Sous-sections (Concerts, catalogue, conférences...) */
.sub-section {
	visibility:hidden;
	z-index: 2;
	position:absolute;
	top: 0;
	left:0;
	background-color:rgba(0, 0, 0, 0.4);
	transition: all 0.5s;
}

#philosophie .sub-section .content{
	background-color:White;
	Color:Black;
}

#musique .sub-section.active {
	background-color:rgba(120, 120, 120, 0.9);
}

#philosophie .sub-section.active {
	background-color:rgba(255, 255, 255, 0.6);
}

.sub-section .back-button {
	font-size:1.1rem;
}

.sub-section .back-button #triangle{
	width:0.9rem;
}

#philosophie .sub-section .back-button #triangle path, #contact .back-button #triangle path{
	fill: Black!important;
}

.sub-section-main {
	margin-left:50px;
}

.sub-section-nav {
	width:30%;
	align-self:flex-start;
	position:sticky;
	top:30px;
	left:0;
	text-align:left;
}


.sub-section-nav li {
	padding-left:6px;
	border-left:2px solid White;
	margin-top:1em;
	text-transform:uppercase;
	font-weight:300;
	transition :  border-color 0.3s ease-out;
}

#musique .sub-section-nav li {
	border-color:Black;
}
#musique .sub-section-nav li:hover {
	border-color:#ffccbc;
}

.sub-section-nav li:hover, .sub-section-nav li.current {
	border-left:2px solid DarkBlue;
	cursor:pointer;
}

.sub-section .content {
	position:relative;
	width:60%;
	border-radius:5px;
	margin:10vh auto 10vh;
	padding-left:25px;
	opacity:0;
	transform:translateY(20%);
	transition:all 0.5s;
}

.sub-section.active .content {
	opacity:1;
	transform:translateY(0);
}

.sub-section .texte {
	text-align:left;
}

.sub-section ul {
	list-style: none;
}

.sub-section ul.events li::before {
	content:"\2014";
	margin-left:-2em;
	padding-right:1em;
}

.sub-section ul.events li {
	margin-bottom:1em;
}

.sub-section ul.events {
	padding-left:40px;
}

/* Page de musique */

/* Page de littérature */

#litterature h1, #litterature h2 {
	display:inline-block;
	font-weight:300;
	color:#a5222a;
}

/* Affichage des couvertures */

#couvertures {
	width:100%;
	margin:20px auto;
	display:flex;
	justify-content:space-between;
}

.cover img{
	width:100%;
}

/* Page de contact */

.contact-container {
	visibility:hidden;
	width:100%;
	height:100%;
	overflow-y:scroll;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color:rgba(0, 0, 0, 0.5);
	opacity:0;
	transition: visibility 0.3s, opacity 0.3s, transform 0.5s ease-out;
}

.contact-modal {
	position:relative;
	width:60%;
	border-radius:5px;
	background-color:White;
	margin:10vh auto 10vh;
	padding:25px 50px;
	transform:translateY(20%);
	transition:all 0.5s;
}

.contact-content {
	width:450px;
	margin:0 auto;
}

#contact form label {
	display:inline-block;
	min-width:100px;
	margin-right:10px;
	font-weight:300;
}

#contact form input, #contact form textarea {
	border-radius: 3px;
	border: 1px solid #2196f3;
	padding : 5px;
	margin-top:2px;
	transition : all 0.3s;
}

#contact form textarea {
	width:100%;
	height:100px;
	font-family:Helvetica Neue, "Segoe UI", sans-serif;
}

#contact form input:focus, #contact form textarea:focus {
	border-width:2px;
	background-color:#e3f2fd;
}

#contact form input[type="submit"]{
	border: none;
	padding: 8px 15px 8px 15px;
	background-color: #286bc9;
	color: #ffffff;
	box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	transition:all 0.3s;
}

#contact form input[type="submit"]:hover{
	background-color:#3281f0;
}

.contact-container.active {
	opacity:1;
}

#contact #email-adress {
	margin-top:2rem;
}

#contact .contact-content, #contact form {
	margin-top:2rem;
}

.contact-container.active .contact-modal {
	transform:translateY(0);
}

/*Liens dans le texte*/
.icons {
	display:inline;
	width:1.2em;
	margin-right:0.2em;
}

#musique .icons path {
	fill:White;
}

.sub-section-main a {
	text-decoration:none;
}

#musique a {
	font-style:italic;
	color:White;
}

/* Classes à la fin du CSS pour éviter l'override */

.active {
	visibility:visible;
}

.black {
	background-color:Black;
	color:White;
}

@media screen and (max-width:1200px) {
	.main-nav, .banner {
		margin: auto 5%;
	}
	
	.main-nav ul {
		justify-content:space-evenly;
	}
	
	.nav span {
		font-size:2.2rem;
	}
	
	.nav li#nav-litterature span{
		font-size:1.4rem;
	}
}

@media screen and (max-width:992px) {
	header {
		margin:20px 2% auto;
		flex-direction:column;
	}
	
	#header-brand {
		align-self:flex-start;
	}
	
	.section>.container>header>.section-name {
		align-self:flex-end;
		font-size:2.5rem;
		font-weight:700;
	}
	
	.plus {
		opacity:1;
		font-size:4rem;
	}
	
	.nav span {
		font-size:1.6rem;
	}
	
	.nav li#nav-litterature span{
		font-size:1rem;
	}
}

@media screen and (max-width:500px) {
	.nav ul, .banner {
		flex-direction: column;
		align-items:center;
	}
	
	.texte {
		text-align:left;
	}
	
	#header-brand {
		font-size:9vw;
	}
	
	#header-contact {
		flex-direction:column;
		font-size:1em;
	}
	
	.nav li, .banner-event {
		width:90%;
		margin:5% auto;
	}
	
	.banner-event {
		width: 86%;
	}
	
	.nav span {
		font-size:10vw;
		font-weight:700;
	}
	
	.main-nav #nav-litterature, .banner .banner-event:last-child {
		width:60%;
	}
	
	.nav li#nav-litterature span {
		font-size:6.5vw;
	}
	
	.section-nav li, .section-nav .img-container {
		border-radius:5px;
	}
	
	.section-nav span {
		font-size:8vw;
	}
	
	.section>.container>header>.section-name {
		align-self:flex-end;
		font-size:10vw;
	}
	
	.section>.container>header>.back-button::before {
		height: 5vw;
		width: 6vw;
	}
	
	.sub-section .flex-container {
		flex-direction: column;
	}
	
	.sub-section-nav {
		position:relative;
		top:0;
		width:100%;
	}
	
	.sub-section-nav ul {
		margin:0;
		margin-bottom:1rem;
		margin-block-start:0;
	}
	
	.sub-section-nav li {
		margin-top:0;
		margin-bottom:0.25rem;
	}
	
	.sub-section-main {margin-left:0;}
	
	.back-button {
		font-size:5.5vw;
	}
	
	.texte {
		padding : 25px 5vw;
	}
	
	.photo-right {
		flex-direction:column;
	}
	
	#photo {
		margin:5% auto;
		width:60%;
	}
	
	#presentation h1 {width:100%;}
	.contact-content {width:100%;}
}