@charset "utf-8";

/* ===================== */
/* Polices de caractères */
/* ===================== */

@font-face {
    font-family: "whyte-regular";
    src: url('/font/whyte-regular-webfont.woff2') format("woff2"), url('/font/whyte-regular-webfont.woff') format("woff");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family: "whyte-medium";
    src: url('/font/whyte-medium-webfont.woff2') format("woff2"), url('/font/whyte-medium-webfont.woff') format("woff");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family: "gt-super-display-regular";
    src: url('/font/GT-Super-Display-Regular.woff2') format("woff2"), url('/font/GT-Super-Display-Regular.woff') format("woff");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family: "gt-super-display-medium";
    src: url('/font/GT-Super-Display-Medium.woff2') format("woff2"), url('/font/GT-Super-Display-Medium.woff') format("woff");
    font-weight:400;
    font-style:normal;
}
/* ========================================== */
/* Valeurs par défauts des éléments standards */
/* ========================================== */

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: whyte-regular, Helvetica, Arial, sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
    font-size:16px;
    color: #050505;
    line-height: 26px;
}

/* Liens */
a {
	color: #345472;
	text-decoration: none;
}

a:hover {
    font-family: whyte-medium, Helvetica, Arial, sans-serif;
}

/* Eléménts de formulaires */
input, select{
	font-size: 16px;
	padding: 10px;
	border:1px solid #E6E6E6;
}

@-moz-document url-prefix() { 
	select {
		padding:0px;
	}
	option {
		border-top: 1px solid #E6E6E6;
		padding:10px;
	}
}


/* Barre horizontale */
hr {
    border: none;
    border-top: 1px solid #E6E6E6;
    margin-top: 20px;
    margin-bottom: 20px;
    clear:both;
}

/* ================= */
/* Structure du site */
/* ================= */

/* Entête */
header {
    font-family: gt-super-display-regular,Helvetica,Arial,sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
    font-size: 2.5em;
    text-align:center;
    height:100px;
    position:fixed;
    width:100%;
    z-index:99;
}

#header-logo-onp {
	position:fixed;
    margin-top: 30px;
	margin-left: 30px;
}

#header-logo {
    margin-top: 20px;
}

#header-logo img {
    height: 70px;
}

/* Corps du site (entre le header et le footer */
#corps {
	text-align:center;
	padding-top: 100px;
}

/* Page : contient le menu + le contenu */
#page {
	max-width:1230px;
	padding:30px;
	margin:auto;
	text-align:left;
}

/* Contenu */
section {
	float:right;
	width: 75%;
	background-color:#FFFFFF;
	padding:10px;
	padding-bottom:70px;
	padding-top:30px;
}

/* Menu principal */
nav {
	float:left;
	width: 22%;
	min-height:800px;
	background-color:#FFFFFF;
	padding-top: 10px;
	padding-bottom: 30px;
}

#corpsmenu {
	line-height: 1em;
	background-color: #FFFFFF;
	margin-right:15px;
	padding-left: 10px;
	width: 100%;
	min-height: 670px;
}

.menu {
	padding-left: 0px;
	margin-left:0px;
}

.menu li {
	font-size: 14px;
	margin-top: 3px;
	padding-bottom:4px;
	padding-top:4px;
	text-decoration:none;
	text-transform: uppercase;
	list-style-position:outside;
	list-style-type:none;
	list-style-image:none;
}

.menu a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.menu a:hover {
    color: #757575;
}

.menu-titre {
    font-family: whyte-medium, Helvetica, Arial, sans-serif;
	font-size: 16px;
	text-align: left;
	text-transform:uppercase;
	margin-top: 20px;
	padding-top: 20px;
	border-top: #E6E6E6 solid thin;
}

/* Pied */
footer {
	clear:both;
	text-align: center;
	margin-top:34px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer-bas{
    border-top: solid 1px #262626;
}

#footer-infos {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center; 
    text-align: start; 
    max-width: 1230px; 
    margin: auto;
}

#footer-logo, .footer-theatre {
    width: 25%; 
    float: left;
}

#footer-logo svg *{
    fill:#000;
}

.footer-theatre span {
    font-family: gt-super-display-regular,Helvetica,Arial,sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
    font-size: 30px;
}



.footer-menu {
    padding-top: 30px;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center; 
    text-align: start; 
    max-width: 1230px; 
    margin: auto;
}

.footer-copyright {
    margin-top: 15px;
}

.footer-menu div{
	display:inline-block;
	margin-right:30px;
}

#footer-menu div:last-child{
	float:right;
	font-size: 16px;
}



/* =================== */
/* Classes utilitaires */
/* =================== */

/* Positionnement à gauche */
.agauche{
	float:left;
}

/* Positionnement à droite */
.adroite{
	float:right;
}

.clear-float{
	clear:both;
}

.text-agauche {
    text-align:left;
}

.text-adroite {
    text-align:right;
}

.no-display {
    display: none;
}

/* afficher uniquement su mobile */
.no-desktop {
	display: none;
}

.mt-15 {
    margin-top: 15px;
}

.mt-30 {
    margin-top: 30px;
}

.text-italic {
    font-style:italic;
}

.width-100 {
    width: 100%;
}

/* ======================== */
/* Classes de mise en forme */
/* ======================== */

/* Titre du site */
.memopera {
	font-weight:bold;
}

/* Font noir */
.black-bg {
	background-color:#000000;
	color:#FFF;
}

.black-bg  a{
	color:#666;
}

.black-bg  a:hover{
	color: #FFFFFF;
	text-decoration: none;
}

/* texte clair */
.ligth-text {
	color: #999;
}

.alerte {
	color: #E46567; 
	font-size: smaller;
}

/* ====== */
/* Titres */
/* ====== */

.titre1, .titre2, .titre3 {
    font-family: gt-super-display-regular,Helvetica,Arial,sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
}

.titre1 {
	font-size: 35px;
	font-weight: 500;
	line-height: 40px;
	margin-top: 0px;
	margin-bottom: 34px;
}

.titre2 {
	font-size: 30px;
	padding-top: 30px;
}

.titre3 {
	font-size: 25px;
}
	
.titre4 {
	font-weight: bold;
	vertical-align: bottom;
	padding-top: 10px;
	padding-bottom: 5px;
}

/* Lien sur un titre */
.titre1, .titre2, .titre3 a {
    color: rgba(0,0,0,.9);
	text-decoration:none;
}

.titre1, .titre2, .titre3 a:hover {
	font-family: gt-super-display-medium,Helvetica,Arial,sans-serif;
}

/* Titre sur un spectacle */
.titre-spe{
	color: rgba(0,0,0,.9);
	margin-bottom: 0px;
}

.ribrique {
    padding-top:10px;
}


/* ======================= */
/* Formulaire de recherche */
/* ======================= */

#formRecherche div{
	position:relative;
	width:100%;
}

#formRecherche input[type="text"]{
	width:100%;
}

#formRecherche a{
	position: absolute;
	top:12px;
	right: 15px;
}


/* ============================= */
/* Lien vers plus d'informations */
/* ============================= */
a.lien-plus {
	display:inline-block;
    color: #fff;
    background-color: #050505;
	border: 1px solid #050505;
	padding: 10px 30px 10px 30px;
	margin-top:30px;
	text-decoration:none;
    text-transform: uppercase;
    font-size: 14px;
}

a.lien-plus:hover {
    font-family: inherit;
	text-decoration: none;
    background-color: #262626;
	border: 1px solid #262626;
}


/* ================ */
/* Liste de lettres */
/* ================ */
.liste-lettres {
    display: block;
    text-align: justify;
    padding: 0;
    vertical-align: central;
    font-family: gt-super-display-regular,Helvetica,Arial,sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
    font-size: 25px;
    color: #999;
    margin-bottom:-30px;
}

.liste-lettres::after {
  display: inline-block;
  width: 95%;
  content: '';
  vertical-align:top;
}

.liste-lettres li{
	line-height: 1.2em;
  	display: inline-block;
  	vertical-align: middle;
}


/* ==================== */
/* Liste des spectacles */
/* ==================== */

/* Bloc des spectacles d'un lieu */
.bloc-spectacle {
	display:inline-block;
	width:48%;
	vertical-align:top;
	margin-bottom:2em;
}

.liste-spectacle {
	margin:5px;
	margin-bottom:10px;
	margin-right: 30px;
	padding-bottom: 34px;
	border-bottom: 1px solid #E6E6E6;
}


/* ==================================== */
/* Formulaire de sélection d'une saison */
/* ==================================== */
form.selsaison {
	margin: 0;
}

form.selsaison select {
	width: 180px;
}

/* ==================================================== */
/* Affichage des auteurs d'un spectacle ou d'une oeuvre */
/* ==================================================== */
.auteur{
	font-size: 1.1em;
	margin-bottom: 20px;
}


/* =================================== */
/* Distributions ou liste de personnes */
/* =================================== */

dl.auteurs {
	border-bottom: 1px solid #E6E6E6;
	margin-bottom: 35px;
}

dl.auteurs dt, dd{
	float: left;
	width: 50%;
	margin: 0;
	border-top: 1px solid #ededed;
	padding: 4px 5px 5px;
}

dl.auteurs dt{
	clear:both;
    font-family: whyte-medium, Helvetica, Arial, sans-serif;
    font-feature-settings: "kern" 0;
    font-kerning: none;
	color: #606060;
}

dl.auteurs::after{
	content: "";
	display:block;
	clear: both;
}


/* ========================== */
/* Affichage des commentaires */
/* ========================== */

.commentaire {
	margin-top: 20px;
	border-left: 1px solid #CCCCCC;
	padding-left: 10px;
}

.commentaire-saison {
	line-height: 24px;
}

/* ========== */
/* Calendrier */
/* ========== */

.calendrier {
	display: table;
	width: 100%;
	empty-cells:show;
	border-collapse:collapse;
	margin-top:34px;
}

.cal-jour {
	display:table-row;
}


.cal-date {
	display:table-cell;
	vertical-align:top;
	width: 100px;
	text-transform:uppercase;
	}
	
.cal-date>div {
	border-top: 1px solid #E6E6E6;
	margin-right:30px;
}

.cal-spejour {
	display:table-cell;
}

.cal-lieu {
	border-top: 1px solid #E6E6E6;
	margin-right: 30px;
}

.cal-1lieux {
	width:100%;
}

.cal-2lieux {
	width:45%;
}

.cal-3lieux {
	width:29%;
}

.cal-4lieux {
	width:20%;
}

.cal-jour:first-child .cal-lieu {
	border:none;
}

.cal_spe{
}

/* Barre de navigation du calendrier */
.cal-nav{
	position:relative;
	height:109px;
	line-height:109px;
	text-align:center;
	border-top:1px solid #E6E6E6;
	border-bottom:1px solid #E6E6E6;
	margin-top:30px;
}

.cal-nav a{
	display: block;
	position: absolute;
	overflow: hidden; 
	line-height: 1em;
	top: 30px;  
	margin: 0;
	padding: 0;
}

.cal-nav a:last-child{
	right:0;
}

.cal-nav a span{
	vertical-align:18px;
	margin-left:6px;
	margin-right:6px;
}

svg.bt-prec, svg.bt-suiv {
	border-radius: 50%;
    border: 1px solid #CBCBCB;
    height: 49px;
    width: 49px;
    color: #CBCBCB;
    stroke: #CBCBCB;
}

svg.bt-suiv:hover, svg.bt-prec:hover{
    stroke: #999;
    border-color: #999;
}

#frmMois select {
	width: 180px;
}

/* =========================== */
/* Listes sous forme de tables */
/* =========================== */

.tab-liste {
	margin-top: 10px;
	border-collapse:collapse;
	width: 100%;
}

.tab-liste tr{
	border-bottom: 1px solid #E6E6E6;
}

.tab-liste td {
	padding-top: 6px;
	padding-bottom:8px;
	padding-right: 10px;
	vertical-align: top
}

.tab-liste td.saison {
    white-space:nowrap;
    padding-right: 20px;
}

.tab-liste td.date-premiere {
    text-align:right;
}

.td-w-10pc {
    width:10%;
}

.td-w-15pc {
    width:15%;
}

.td-w-45pc {
    width:45%;
}

/* ====================== */
/* Affichage des exemples */
/* ====================== */

.exemples{
	float:left;
	width:40%;
	border-bottom:1px solid #E6E6E6;
	margin-right:30px;
}

.exemples>div{
	width:100%;
	border-top:1px solid #E6E6E6;
	padding-top: 10px;
}

/* ===================== */
/* Formulaire de contact */
/* ===================== */
#contact label{
	display: block;
	width: 75px;
	float: left;
}

#contact input{
	border:1px solid #B5B6B7;
	color:#605E5E;
	font-size:11px;
}

#contact #fichier{
	border:none;
}

#contact textarea{
	border:1px solid #B5B6B7;
	color:#605E5E;
	font-size:11px;
}

/* ===================== */
/* Message d'information */
/* ===================== */
.fil-info{
	margin-top: 2em;
	margin-bottom: 2em;
}

.info {
    border-top:#E6E6E6 solid thin;
    border-bottom:#E6E6E6 solid thin;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #999;
}

.info p {
    margin-top: 8px;
    margin-bottom: 8px;  
}

.info span {
    color: rgba(0,0,0,.9);
}


/* ================ */
/* Message d'erreur */
/* ================ */
.erreur {
    color:#FF0000;
    font-weight:bold;
    margin-top: 20px;
    margin-bottom: 20px;
}


@media screen and (max-width: 1023px) {
	
	/* Ne s'affiche pas sur mobile */
	.no-mobile {
		display: none;
	}
	
	/* afficher uniquement su mobile */
	span.no-desktop {
		display: inline;
	}
	
	#corps {
		width:100%;
	}
	
	#page {
		width:100%;
		padding:0;
	}
	
	section {
		float: none;
		min-height: 300px;
		width: 100%;
		padding: 20px;
	}
	
	nav {
		float: none;
		width: 100%;
		padding: 0;
	}
	
	nav hr:first-child{
		display: none;
	}
	
	#corpsmenu {
		background-color: #F2F2F2;
		width: 100%;
		padding: 20px;
	}
	
	footer {
		padding-bottom: 0;
	}
	
        #footer-infos {
            text-align: center;
        }
        
        #footer-logo {
            width: 100%;
            text-align: center;
        }
        
        .footer-theatre {
            width: 50%;
        }
        
	#footer-menu div{
		display: block;
		text-align: center;
		padding: 0;
		margin: 0;
	}

	.agauche{
		float: none;
	}
	
	.adroite{
		float: none;
	}
	
	.bloc-spectacle {
		display: block;
		width: 100%;
	}
	
	.liste-spectacle {
		margin: 10px;
		width: 100%;
	}
	
	a.lien-plus {
		margin-top: 0px;
		padding: 5px 15px 5px 15px;
	}
	
	.tab-liste td.saison {
		width: auto;
		font-size: 12px;
		line-height: 1em;
		padding-top: 15px;
                padding-right: 10px;
	}
	
	.exemples{
		float: none;
		width: 90%;
		margin: 0;
	}
	
	.cal-lieu{
		margin:0;
		width:100%;
	}
	
	.cal-1lieux, .cal-2lieux, .cal-3lieux, .cal-4lieux {
		width:100%;
	}
}

@media screen and (max-width: 767px) {
	dl.auteurs dt{
		width: 100%;
	}
	
	dl.auteurs dd{
		width: 100%;
		padding-left:0;
		margin: 0;
	}  
        
        .footer-theatre {
            width: 100%;
        }
}