/********************************
 Parametres generaux : 
********************************/

@font-face {
    font-family: 'Gotham HTF';
    src: url('../fonts/GothamHTF-BookCondensed.eot');
    src: url('../fonts/GothamHTF-BookCondensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamHTF-BookCondensed.woff2') format('woff2'),
        url('../fonts/GothamHTF-BookCondensed.woff') format('woff'),
        url('../fonts/GothamHTF-BookCondensed.ttf') format('truetype'),
        url('../fonts/GothamHTF-BookCondensed.svg#GothamHTF-BookCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}
html, body { 
	background-color:#fff; 
	font-family: "Gotham HTF";
    font-weight: normal;
    font-style: normal;
	font-size:24px;
	line-height:117.5%;
}
b, strong { font-weight:bold; }

/********************************
 Niveaux de titre
********************************/
.container p { margin:0; font-size:100%; padding-bottom:20px; }
.container h1 { font-size:62.5px; text-transform: uppercase; font-family: "Gotham HTF"; font-weight: 600; margin:0; margin-top:20px; }
.container h2 { font-size:40px; margin:0; text-transform: uppercase; font-family: "Gotham HTF"; font-weight: 600; margin:0; padding-bottom:20px; }
.container h3 { font-size:30px; margin:0; font-family: "Gotham HTF"; font-weight: 600; margin:0; padding-bottom:20px;  }
.container h4 { font-size:24px; margin:0; font-family: "Gotham HTF"; font-weight: 600; margin:0; padding-bottom:20px;  }

/********************************
 Liens, boutons et survol
 - couleurs
 - effets au survol
********************************/
.header { margin:auto; }
.navbar { padding : 20px 0 0 0; margin-bottom:20px; text-align:left; background-color: black; background-image: none; background-repeat: no-repeat; }
.navbar-dark .navbar-brand { margin :0px 50px 10px 0; }
.navbar-dark .navbar-toggler { border:none; padding:0 30px 0 0; margin:0; outline-color:black; }
.navbar-dark .navbar-toggler-icon { background-image:url(/docs/files/picto-menu-hamburger.png); width:25px; height:25px; background-size:auto; }
.navbar-brand .titre { font-size:55px; }
a, button, .btn { -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
hover, button:hover, .btn:hover { -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; }
.container a { font-weight: normal; color:#000; border-bottom: 1px solid #000; text-decoration:none; }
.container a:hover { font-weight: normal; color:red; border-bottom: 1px solid #000; text-decoration:none; }
.container a.bouton-rond { border-bottom:none; color:#fff; }

.bouton { background-color:red; text-transform:uppercase; color:#fff!important; border: none!important; }
.bouton:hover { background-color:black; border: none; text-decoration:none; }
.bouton-inverse { font-size:20px; background-color:black; text-transform:uppercase; color:#fff!important; border: none!important; padding:5px 20px; }
.bouton-inverse:hover { background-color:red; border: none; text-decoration:none; }
.bouton-rond { background-image:url(/images/PointRouge.png); font-size:30px; display:inline-block; text-align:center; padding-top:10px; width:50px; height:50px; color:#fff; margin-top:6px; }
.bouton-rond:hover { background-image:url(/images/PointRouge.png); color:#fff; text-decoration:none; }
.btn-secondary { padding: 0 10px; }

.dropdown:hover .dropdown-menu { display:block; left:-20px; top:30px; padding:20px 20px 20px 20px; border:none; }
.back-to-top { cursor: pointer; position: fixed; bottom: 50px; right: 20px; display: none; padding:10px; border-radius: 40px; }
.nav-item { text-transform:uppercase; }
.navbar-expand-lg .navbar-nav .nav-link { padding:0; padding-left:5px; padding-right:5px; color:#fff; }
a.dropdown-toggle::after { border: 0; border-radius:5px; background-color:red; width:5px; height:5px;  }
ul.navbar-nav li:last-child a.dropdown-toggle::after { display:none; }
a.dropdown-toggle .rubrique { display:inline-block; }
li a.dropdown-toggle .rubrique:hover, li:focus a.dropdown-toggle .rubrique, li.active a.dropdown-toggle .rubrique {  }
a.dropdown-item { padding:0; }
a.dropdown-item:hover, a.dropdown-item.active { color:#000; font-weight:600; background-color:#fff; }

/********************************
 Carousel, 
 - calage haut pour le menu fixe
 - réglages pour les images 100%
 - réglages pour les légendes
********************************/
.carousel { margin-bottom: 0; }
.calage-menu-haut-fixe { padding-top: 0; margin-top:-20px; }
.carousel-item { height: 400px; background-color:#000;}
.carousel-item > img { position: absolute; top: 0; left: 10%; height: 100%; width:auto!important; }
.carousel-caption { padding: 50px 30px 10% 50px; text-align:left; top: 0px; bottom:unset; left:70%; height:100%; width:320px; z-index: 10; background-image: url('/images/fond-carousel.pngs'); background-repeat: no-repeat; background-color:#000; }
.carousel-caption a, .carousel-caption p { color:#fff; font-size:37px; line-height:100%;  }
.carousel-caption a { border-bottom: 1px solid #fff; text-decoration:none;  }
.prevCarousel { position:absolute; bottom:50px; left:5%; font-weight:700; }
.nextCarousel { position:absolute; bottom:50px; right:5%; font-weight:700; }
.prevCarousel:hover, .nextCarousel:hover { background-image:url(/images/PointRouge.png); color:#000; }
.carousel-indicators { display:none; }

/*******************************
 Gestion des images
*******************************/
.container p img, td img { max-width:100%; height:auto!important; }
.container .bloc-galerie { display:flex; flex-direction: row; flex-wrap: wrap; }
.container .bloc-galerie img { box-shadow: 3px 3px 5px #aaa, -0.02rem -0.02rem 1px #aaa; width:225px; margin:20px 20px 0 0; padding:5px; height:auto!important; filter: brightness(1); }
.container .bloc-galerie img:hover { box-shadow: 3px 3px 5px #333, -0.02rem -0.02rem 1px #333; filter: brightness(1.25); }

/*******************************
 liste des spectacles
*******************************/
.gris-pale { background-color:#ddd; padding:5px; }
figure.portfolio { margin:0; overflow:hidden; }
figure.portfolio img { width:100%!important; height:auto!important; transition: transform .3s; }
figure.portfolio img:hover { transform : scale(1.2); }
figure.portfolio figcaption>div.filtre { position:absolute; top:20px; padding:0 5px; background-color:gray; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:400; font-size:15px; line-height:22px; text-align:center; letter-spacing: 0.0125em; }
figure.portfolio figcaption>div.commande { position:absolute; top:40px; padding:0 5px; background-color:red; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:400; font-size:15px; line-height:22px; text-align:center; letter-spacing: 0.0125em;  }
.gris-pale figure.portfolio img { filter: grayscale(0); }

figure.moitie img { width:100%!important; height:auto!important;  }
figure.moitie, .moitie { vertical-align:top; width:50%; display:inline-block; margin:0; padding-right:20px; }
figure.moitie figcaption>div.date { position:absolute; top:20px; padding:10px; background-color:red; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:500; font-size:30px; line-height:32px; text-align:center; letter-spacing: 0.0125em; }
figure.moitie figcaption>div.creation { position:absolute; top:40%; left:32%; color:red; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:600; font-size:22px; line-height:23px; text-align:center; padding:15px 18px 18px 18px; width:75px; height:75px; letter-spacing: 0.0125em; transform:rotate(20deg); background-image:url(/docs/files/picto-etoile-blanc.png); overflow-wrap:break-word; }

.genre { padding:2px 4px 2px 4px; background-color:gray; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:500; font-size:20px; display:inline-block; line-height: 22px; }
.commande { padding:2px 4px 2px 4px; background-color:red; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:400; font-size:20px;  line-height:22px; display:inline-block; text-align:center; letter-spacing: 0.0125em;  }
.titre { color:#000; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:600; font-size:20px; line-height:20px; padding-top:10px; width:100%; text-align:center; }
.bouton-bloc { display:block; }
.boutonsVers { float:right; margin-left:20px; }
.btn-secondary { font-size:80%; }
.filtres {position:relative; right:20px; top:20px; margin-bottom:40px; text-align:center; }

.fiche-spectacle h1 { line-height:60px; display:inline-block; margin-bottom:30px;}
.fiche-spectacle h1 b { font-size:40px; font-weight:500; }
.fiche-spectacle .creation { display:inline-block; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:600; font-size:24px; line-height:23px; text-align:center; padding:15px 18px 18px 18px; width:75px; height:75px; letter-spacing: 0.0125em; transform:rotate(20deg); background-image:url(/docs/files/picto-etoile.png); overflow-wrap:break-word; vertical-align:text-bottom; margin-left:30px; }
.fiche-spectacle .age { display:inline-block; color:#fff; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:600; font-size:24px; line-height:23px; text-align:center; padding:15px 10px 18px 10px; width:50px; height:50px; letter-spacing: 0.0125em; background-image:url(/docs/files/bouton-rond.png); overflow-wrap:break-word; vertical-align:top; margin-left:30px; margin-top:50px; }
.vert-pale h3 { padding-top:20px; padding-bottom:0; font-size:30px; color:red; font-weight:600; }
.vert-pale h2 { font-size:30px; color:#000; font-weight:600; line-height:32px; }
.vert-pale h2 a { color:#000; }
.panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }

/*******************************
 gestion des blocs
*******************************/
.langues { position: absolute; top:20px; right:14%; }
table { width:100%!important; display:block; border-spacing : 0; border:1px solid #ccc; margin-top:10px; font-size:100%; }
table td { padding-left:15px; padding-right:15px; border:1px solid #ccc; vertical-align:top;}

main table, .footer table { border:none; margin-top:0;  }
main table tbody, .footer table tbody, .footer table tbody tr { width: 100%;  }
main table td, .footer table td { float:left; border:none; }
main table td:first-child { padding-left:15px; margin-left:-15px; }
main table td:last-child { padding-right:15px; }

main table table { background-color:rgba(220,110,149,0.3); padding:20px; }
main table table td {  }

.footerBlanc { background-color:#fff; color:#000; font-size:100%; padding-top:17px; padding-bottom:0px; }
.footerBlanc > .container table, .footerBlanc > .container table td { border:none; margin-top:0; line-height:120%; }
.footerBlanc > .container h2 { padding:0; color:#000; margin-top:-26px; }
.footerBlanc > .container a { color:#000; }
.footerBlanc > .container a:hover { color:red; }
.footerBlanc > .container p { white-space:nowrap; color:#000; font-size:24px; }
.footerBlanc > .container input.bouton { margin-top:50px; }

.footer { background-color:#000; color:#fff; font-size:75%; padding-top:17px; padding-bottom:10px; }
.footer > .container table, .footer > .container table td { border:none; margin-top:0; line-height:120%; }
.footer > .container h2 { font-weight:normal; padding:0; color:#fff; margin-top:-25px; }
.footer > .container a { color:#fff; }
.footer > .container a:hover { color:red; }
.footer > .container p { white-space:nowrap; color:#fff; }
.coordonnees { padding-top:60px; padding-bottom:45px; font-size:24px; }
.inputBloc { width:100%; border:1px solid #000; font-size:30px; padding:10px;  }

/*******************************
 modale
****************************/
.overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: rgba(0,0,0,0.4); }
.modale { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 750px; text-align: center; position: relative }
.close { color: black; float: right; font-size: 20px; font-weight: bold; opacity: .5; position: absolute; right: 20px }
.close:hover { color: black; text-decoration: none; cursor: pointer; }

/********************************
RESPONSIVE CSS - MEDIA QUERIES
********************************/

@media (min-width: 1500px) {
	.langues { position: absolute; top:20px; right:3%; }
	.carousel-caption { }
	.carousel-item > img { left: 20%; }
}

@media (max-width: 1200px) {
	.prevCarousel { position:absolute; bottom:50px; }
	.nextCarousel { position:absolute; bottom:50px; right:5%; }
	.langues { position: absolute; top:20px; right:3%; }
	.carousel-caption { padding: 50px 30px 10% 50px; text-align:left; top: 0; bottom:unset; left:70%; height:100%; width:320px; z-index: 10; background: url(/images/fond-carousel.png) no-repeat; }
}

@media (min-width: 992px) {
	.carousel-item { height: 400px; }
	.navbar-expand-lg .navbar-collapse { display:inline-block!important; vertical-align:-5px; }
}

@media (max-width: 768px) {
	main table, footer table  { margin:0; border:0; }
	main table td, footer table td, .footer table td, .footerBlanc table td { width:100%!important; display:block; padding:0; border:0; }
	.footer table td p, .footer table td h2, .footerBlanc table td p, .footerBlanc table td h2 { text-align:center!important; }
	.footerBlanc > .container input.bouton { margin-top:0px; }
	main table td:first-child, footer table td:first-child, .footer table td:first-child { padding-left:0px; margin-left:0px; }
	main table td:last-child, footer table td:last-child, .footer table td:last-child { padding-right:0px; }
	.back-to-top { display:none!important; }
	.navbar { padding-bottom: 20px }
	.navbar img {  }
	.navbar-brand { font-size:18px; display:inline-block; vertical-align:-15px; }
	.navbar-brand .titre { font-size:45px; font-weight:500; }
	.langues { position: absolute; top:20px; right:10px; }
	.langues img { display:inline-block; }
	a.dropdown-toggle .rubrique { float:left; }
	a.dropdown-toggle::after { display:none; }
	
	.carousel-item { height: 330px; }
	.carousel-item > img { position: absolute; top: 0; left: 0%; height: 100%; width:auto!important; }
	.carousel-caption { margin-top:-10px; padding: 0px 30px 0px 50px; text-align:left; top: 0; left:0%; bottom:unset; right:unset; height:100%; width:100%; z-index: 10; background: unset; background-color:rgba(0,0,0,0.4); }
	.carousel-caption a, .carousel-caption p { color:#fff; font-size:37px; line-height:100%;  }
	.prevCarousel { position:absolute; bottom:50px; left:50px; right:unset; background-image:url(/images/PointRouge.png); color:#000; font-weight:700; }
	.nextCarousel { position:absolute; bottom:50px; left:115px; right:unset; background-image:url(/images/PointRouge.png); color:#000; font-weight:700; }

	figure.moitie, .moitie { width:100%; padding-right:0px; }
	figure.moitie figcaption>div.creation { position:absolute; top:100px; left:200px; color:red; text-transform: uppercase; font-family: "Gotham HTF"; font-weight:600; font-size:22px; line-height:23px; text-align:center; padding:15px 18px 18px 18px; width:75px; height:75px; letter-spacing: 0.0125em; transform:rotate(20deg); background-image:url(/docs/files/picto-etoile-blanc.png); overflow-wrap:break-word; }
	.filtres { position:unset; text-align:center; margin-top:-20px;  }
	.fiche-spectacle .creation { margin-left:20px; }
	.fiche-spectacle .age { margin-left:10px; }
}

@media (max-width: 480px) {
}