@import url("https://fonts.googleapis.com/css?family=Manrope&display=swap");
@import url("https://fonts.googleapis.com/css?family=Krona+One&display=swap");

::-moz-selection {
	color: black;
	background: #94a867;
}

::selection {
	color: black;
	background: #94a867;
}

body {
	font-family: "Manrope", sans-serif;
	background-color: white;
}

/* Barre de navigation */
.navigation {
  	background-color: white;
	/* overflow: hidden; */
	width: 100%;
	opacity: 95%;
	position: fixed;
	padding-right: 10px;
	padding-top: 18px;
	padding-bottom: 20px;
	right: 0px;
	top: 0px;
	z-index: 100;
	height: 30px;
}
.navigation .navigation-header {
  	display: inline;
}
.navigation .navigation-header .navigation-title {
	float: left;
	color: black;
	font-size: 15px;
	text-decoration: none;
	padding-left: 40px;
	padding-top: 6px;
}
.navigation .navigation-header .navigation-title a {
	float: left;
	color: black;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
}
.navigation .navigation-btn {
  display: none;
}
.navigation .navigation-links {
  display: inline;
  float: right;
}
.navigation .navigation-links a.navigationBouton {
	font-weight: normal;
	display: inline-block;
	color: black;
	padding: 5px 18px;
	text-decoration: none;
	font-size: 15px;
	transition: border-bottom 0.05s ease-in-out;
	-webkit-transition: border-bottom 0.05s ease-in-out;
	-moz-transition: border-bottom 0.05s ease-in-out;
}
.navigation .navigation-links a.active {
	font-weight: normal;
	display: inline-block;
	color: black;
	padding: 5px 18px;
	text-decoration: none;
	font-size: 15px;
	border-bottom: 3px solid #94a867;
}
.navigation .navigation-links a.navigationBouton:hover {
	color: black;
	border-bottom: 3px solid #94a867;
}
.navigation #navigation-check {
  display: none;
}

/* Titre Oeuvre */
.titreOeuvre {
	padding-top: 70px;
	width: 100%;
	max-width: 100%;
	font-size: 5vw;
	color: #94a867;
	font-weight: normal;
	text-align: center;
	font-family: "Krona One";
}

/* Container de la page avec ses éléments utiles */
.contenu {
	margin: 0 auto;
	width: 1150px;
	padding-top: 45px;
}
.contenu .image {
	width: 60%;
	height: auto;
}
.contenu .bandeauInfosPiece {
	display: flex;
}
.contenu .bandeauInfosPiece .listeInformations {
	border-width:2px;
	border-color:black;
	border-style:solid;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-top: 20px;
}
.contenu .imagePiece {
	background-size: cover;
	width: 100%;
	height: auto;
	min-height: 350px;
	background-position: center;
}
.contenu .titre {
	color: black;
	font-weight: bolder;
	padding-left: 0px;
}
.contenu a {
	text-decoration: underline;
	font-weight: bold;
	color: #94a867;
	transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
}
.contenu a:hover {
	color: #b9d380;
}
.contenu p {
	color: black;
	line-height: 1.5;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contenu .bouton {
	color: white;
	background-color: #94a867;
	border: none;
	padding: 10px;
	font-family: "Manrope", sans-serif;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	outline: inherit;
	transition: background-color 0.3s linear;
	-webkit-transition: background-color 0.3s linear;
	-moz-transition: background-color 0.3s linear;
}
.contenu .bouton:hover {
	background-color: #b9d380;
}


/* Cadriage pages spectacles d'aujourd'hui et d'hier */
.cadrillageImages {
	position: relative;
	/* float: left;
	width: 24.99999%;
	padding: 10px; */
	padding: 1%;
	float: left;
	width: 31.25%;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}
.cadrillageImages .Spectacle {
	background: none;
	opacity: 1;
	transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding-top: 56.25%;
	position: relative;
}
.cadrillageImages .Spectacle:hover {
	background: grey;
	opacity: 0.7;
	cursor: pointer;
}
.cadrillageImages .Spectacle img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}
.cadrillageImages .Spectacle p {
	color: white;
	position: absolute;
	bottom: 0;
	font-weight: bolder;
	text-shadow: 1px 1px 2px black;
	padding-left: 10%;
}


.infosProchainsRDV {
	padding-left: 40px;
	padding-top: 0px;
	width: 30%;
	float: left;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}

/* Carrousel */
.carrousel {
	overflow: hidden;
	height: auto;
	position: relative;
	float: left;
	width: 60%;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}

.carrousel img {
	max-width: 100%;
}

.carrousel ul {
	padding-top: 55%;
	margin: 0;
	list-style-type: none;
	position: relative;
}
.carrousel li {
	top: 0;
	left: 0;
	animation: carrousel 25s ease infinite;
	position: absolute;
	opacity: 0;
}

/* Définition des animations des 5 éléments du carrousel */
.carrousel li:nth-child(2) {
	animation-delay: 5s;
}
.carrousel li:nth-child(3) {
	animation-delay: 10s;
}
.carrousel li:nth-child(4) {
	animation-delay: 15s;
}
.carrousel li:nth-child(5) {
	animation-delay: 20s;
}

/* Animation fondu personnalisée */
@keyframes carrousel {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.carrousel span {
	height: 40px;
	align-items: left;
	padding-left: 20px;
	padding-bottom: 10px;
	display: flex;
	color: white;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}

.barre_progression {
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 5px;
	background: white;
	animation: barre_progression 25s ease-out infinite;
}

/* Animation personnalisée barre de progression */
@keyframes barre_progression {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		width: 0%;
		opacity: 0;
	}

	4%,
	24%,
	44%,
	64%,
	84% {
		width: 0%;
		opacity: 0.3;
	}

	16%,
	36%,
	56%,
	76%,
	96% {
		width: 100%;
		opacity: 0.7;
	}

	17%,
	37%,
	57%,
	77%,
	97% {
		width: 100%;
		opacity: 0.3;
	}

	18%,
	38%,
	58%,
	78%,
	98% {
		width: 100%;
		opacity: 0;
	}
}

/* Footer */
.footer {
	overflow: auto;
	width: 100%;
	bottom: 0px;
	left: 0px;
	margin: 0;
	padding-top: 60px;
}
.elementFooter {
	text-align: center;
	position: relative;
	float: left;
	width: 32.5%;
	height: 150px;
	padding-bottom: 10px;
	padding-top: 0px;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}


/* Biographies */
.portrait {
	padding-top: 0px;
	width: 20%;
	float: left;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}
.textePresentation {
	padding-left: 40px;
	padding-top: 0px;
	overflow: hidden;
	height: auto;
	position: relative;
	float: left;
	width: 75%;
	transition: width 0.1s linear;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
}



/* Curseur page contact */
.spanCursor {
	border-right: .15em solid;
	animation: caret 1s steps(1) infinite;

}
@keyframes caret {
	50% {
		border-color: transparent;
	}
}


/* Page admin formulaire */
.inputText {
	border-radius: 5px;
	width: 90%;
	max-width: 500px;
	padding: 10px;
	font-size: 14px;
	font-family: "", sans-serif;
	font-family: "Monospace", sans-serif;
}
.inputTextArea {
	border-radius: 5px;
	resize: vertical;
	width: 90%;
	max-width: 800px;
	padding: 10px;
	font-size: 14px;
	font-family: "Monospace", sans-serif;
}



/* Ecran d'ordinateur responsive */
@media only screen and (max-width: 1166px) {
	.contenu {
		width: 100%;
	}
}
@media only screen and (max-width: 1031px) {
	.elementFooter {
		width: 32.5%;
	}
}
@media only screen and (max-width: 1066px) {
	.carrousel {
		width: 100%;
	}
	.infosProchainsRDV {
		padding-left: 0px;
		width: 100%;
	}
}

/* Ecran moyen */
@media only screen and (max-width: 800px) {
	.titreOeuvre {
		font-size: 7vw;
	}

	.cadrillageImages {
		width: 47.8%;
	}

	.elementFooter {
		width: 48.5%;
	}

	.contenu .bandeauInfosPiece {
		display: block;
	}

	/* Barre de navigation responsive */
	.navigation .navigation-btn {
		display: inline-block;
		position: absolute;
		right: 5px;
		top: 7px;
		width: 40px;
		height: 40px;
		padding-right: 10px;
	}

	.navigation .navigation-header{
		top: 40px;
	}

	.navigation .navigation-links a.navigationBouton:hover {
		color: black;
		border-bottom: 0px solid #94a867;
	}

	.navigation .navigation-btn label {
		display: inline-block;
		width: 30px;
		height: 35px;
		padding-top: 13px;
	}

	.navigation .navigation-btn label:hover,.navigation  #navigation-check:checked ~ .navigation-btn label {
		cursor: pointer;
	}

	.navigation .navigation-btn label span {
		display: block;
		width: 25px;
		height: 10px;
		border-top: 2px solid black;
	}

	.navigation .navigation-links {
		position: absolute;
		display: none;
		width: 100%;
		background-color: white;
		color: white;
		height: 0px;
		transition: all 0.3s ease-in;
		overflow-y: hidden;
		top: 50px;
		left: 0px;
		padding-left: 60px;
		padding-top: 10px;
		line-height: 2;
	}
	.navigation .navigation-links a {
		display: block;
		width: 100%;
		margin: auto;
	}
	.navigation .navigation-links .deroulant {
		display: block;
		width: 100%;
	}
	.navigation #navigation-check:not(:checked) ~ .navigation-links {
		height: 0px;
	}
	.navigation #navigation-check:checked ~ .navigation-links {
		display: block;
		height: calc(100vh - 50px);
		overflow-y: auto;
	}
}


/* Ecran de téléphone */
@media only screen and (max-width: 530px) {
	.cadrillageImages {
		width: 100%;
	}

	.elementFooter {
		width: 100%;
	}

	.portrait {
		width: 100%;
	}
	.textePresentation {
		padding-left: 0px;
		width: 100%;
	}
}