body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size:   20px;
	width:       100vw;
	max-width:   100vw;
	overflow-x:  hidden;
	
	}


.nav-on {
	overflow: hidden;
	}

/* TYPO
*********************************************************************************/

.TriviaGroteskN6 {
	font-family: TriviaGroteskN6;
	}

.TriviaGroteskR2 {
	font-family: TriviaGroteskR2;
	}

h1, h3 {
	font-family:    'TriviaGroteskN6', sans-serif;
	line-height:    1em;
	text-transform: uppercase;
	}

h2, h4, h5 {
	font-family: "Roboto Condensed", sans-serif;
	line-height: 1em;
	/*text-transform: uppercase;*/
	}

h3.titre {
	font-size:      6vw;
	text-transform: none;
	line-height:    .8em;
	margin-bottom:  .2em;
	}

h3.titre2 {
	font-size:      4vw;
	text-transform: none;
	line-height:    .8em;
	margin-bottom:  .2em;
}

h4.soustitre {
	font-size:   2vw;
	font-weight: bold;
	font-style:  italic;
	}

h5 {
	font-size:   2vw;
	font-weight: bold;
	margin-top:  2em;
	}

h6.remarque {
	font-size:     80%;
	font-style:    italic;
	margin-bottom: .5em;
	}

#wrapper {
	min-height: 70vh;
	}

#content-wrapper p {
	line-height:   1.3em;
	margin-bottom: .75em;
	}

#content-wrapper ul {
	margin:        0 0 0 1em;
	list-style:    square;
	/*list-style-position: inside;*/
	margin-bottom: .75em;
	}

#content-wrapper li {
	/*display: list-item;*/
	line-height: 1.3em;
	}

#content-wrapper .citation, #page-wrapper .citation {
	font-size:   150%;
	font-weight: bold;
	font-style:  italic;
	
	align-self:  center;
	/*position: relative;*/
	}

#content-wrapper .citation div, #page-wrapper .citation div {
	/*width:       10em;*/
	/*!*position: absolute;*!*/
	/*margin-left: 5vw;*/
	}

.strong {
	font-weight:   bold;
	margin-bottom: 1.2em;
	}

b {
	font-weight: bold;
	}

i {
	font-style: italic;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	h3.titre {
		font-size: 150%;
		}

	h3.titre2 {
		font-size: 125%;
	}
	
	h4.soustitre {
		font-size: 100%;
		}
	
	h5 {
		font-size: 100%;
		}
	
	.table {
		margin-top: -4em;
		}
	
	.table td {
		font-size: 11px;
		
		}
	
	.table tr:first-child td {
		width: 1em;
		
		}
	
	.table tr:first-child b {
		display:          block;
		position:         absolute;
		transform-origin: left top;
		line-height:      1em;
		transform:        rotateZ(-90deg);
		
		}
	
	.table tr:first-child td:first-child b {
		transform: rotateZ(0deg);
		}
		
	}


/* GENERAL
*********************************************************************************/

.btn-back {
	position:            fixed;
	top:                 16vw;
	left:                7vw;
	width:               16vw;
	height:              16vw;
	border-radius:       16vw;
	display:             block;
	background-color:    rgb(90, 56, 200);
	background-image:    url(../img/logo-top.svg);
	background-size:     30vw;
	background-repeat:   no-repeat;
	background-position: center 0vw;
	transform:           rotateZ(-90deg) scale(0.4);
	text-indent:         -9999;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	.btn-back {
		position:  fixed;
		top:       30vw;
		left:      -2.5vw;
		transform: scale(.45) rotateZ(-90deg);
		
		}
		
	}

/* NAVIGATION
*********************************************************************************/

/* LOGO */

#logo {
	width:            16vw;
	height:           16vw;
	top:              2vw;
	left:             2vw;
	color:            white;
	display:          flex;
	flex-direction:   column;
	justify-content:  flex-start;
	transition:       border-radius 0.8s cubic-bezier(.09, .92, .51, 1.51), scale 0.8s cubic-bezier(.09, .92, .51, 1.51);
	position:         fixed;
	cursor:           pointer;
	z-index:          1000;
	border-radius:    100%;
	transform-origin: right center;
	}

#logo .picto {
	transition:       transform .8s cubic-bezier(.09, .92, .51, 1.51);
	width:            16vw;
	height:           calc(16vw / 2.96);
	background:       url(/img/logo-top.svg);
	background-size:  cover;
	transform-origin: center center;
	}


#logo .text {
	font-size:        2vw;
	transition:       transform 0.5s cubic-bezier(.09, .92, .51, 1.51), opacity .3s ease-in-out;
	height:           calc(10vw / 1.509);
	background:       url(/img/logo-bottom.svg);
	background-size:  cover;
	transform-origin: center center;
	}

#logo.mini {
	border-radius: 100%;
	transform:     scale(0.4);
	}

#logo.mini .picto {
	transform: scale(1.5) translateY(1.5vw);
	}

#logo.mini .text {
	transform: scale(0);
	opacity:   0;
	}

#content-wrapper {
	margin:      2vw 20vw 0 20vw;
	position:    relative;
	width:       60vw;
	/*min-height:  60vh;*/
	display:     flex;
	flex-wrap:   wrap;
	line-height: 1.3em;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#logo {
		width:            32vw;
		height:           32vw;
		top:              2vw;
		left:             2vw;
		transform-origin: -1vw 4vw;
		}
	
	#logo .picto {
		width:  32vw;
		height: calc(32vw / 2.96);
		}
	
	#logo .text {
		height: calc(20vw / 1.509);
		}
	
	#logo.mini {
		transform: scale(0.25);
		top:       7vh
		}
	
	#content-wrapper {
		margin:    40vw 5vw 0 5vw;
		position:  relative;
		width:     90vw;
		/*min-height: 90vh;*/
		display:   flex;
		flex-wrap: wrap;
		}
	
	#accueil #content-wrapper {
		margin: 40vw 11vw 0 11vw;
		}
		
	}


/* LANGUES */
#lang {
	position:       fixed;
	top:            2vw;
	right:          2vw;
	text-transform: uppercase;
	font-size:      90%;
	/*display:none;*/
	}

#lang a {
	padding-left:    .5em;
	text-decoration: none;
	color:           #666
	}

#lang span {
	padding-left: .5em;
	font-weight:  900;
	}

.active {
	font-weight: bold;
	}

/* MENU */
#btn-menu {
	display:           block;
	position:          fixed;
	width:             4vw;
	height:            4vw;
	right:             0vw;
	top:               7vw;
	transform-origin:  center center;
	z-index:           800;
	color:             white;
	cursor:            pointer;
	background-image:  url(../img/btn-menu-open.svg);
	background-repeat: no-repeat;
	background-size:   cover;
	}

.nav-on #btn-menu {
	background-image:  url(../img/btn-menu-close.svg);
	background-repeat: no-repeat;
	background-size:   cover;
	}

#menu {
	position:    fixed;
	width:       100vw;
	height:      100vh;
	left:        100vw;
	top:         0;
	transition:  .2s left ease-in;
	padding-top: 5vh;
	}

#menu ul {
	width:           100%;
	/*height:          80%;*/
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	list-style:      none;
	
	}

#menu > ul > li {
	padding: .5em 0 0 0;
	}


#menu a {
	display:         block;
	color:           white;
	text-decoration: none;
	font-size:       4vh;
	text-align:      center;
	text-transform:  uppercase;
	margin-top:      .4em;
	font-family:     "TriviaGroteskN6";
	}

#menu ul.menu-subnav {
	display:        flex;
	flex-direction: row;
	}


#menu .menu-subnav li:first-child a {
	border-left: 0
	}

#menu .menu-subnav a {
	font-size:   2vh;
	padding:     0 .5em;
	font-family: "Roboto Condensed";
	border-left: 1px solid white;
	text-align:  center;
	}

.nav-on #menu {
	left:     0vw;
	position: fixed;
	z-index:  500;
	}

#main-search-form {
	text-align:      center;
	display:         flex;
	justify-content: center;
	align-content:   center;
	}

#main-search-form #search {
	font-size:     4vh;
	height:        auto;
	font-family:   "TriviaGroteskN6";
	border:        1px solid white;
	border-radius: 4px;
	background:    transparent;
	color:         white;
	margin:        1em auto;
	padding:       0;
	text-align:    center;
	}

#main-search-form #btn-search {
	color:            white;
	height:           4vh;
	width:            4vh;
	border-radius:    100px;
	background-size:  contain;
	background-color: white;
	margin:           4.3vh 0.8vh;
	
	}

#chercher #main-search-form {
	justify-content: flex-start;
	}

#chercher #main-search-form #search {
	color:  black;
	border: 1px solid black;
	}

p.recherche-item {
	
	padding: 0 0 1em 0;
	margin:  0 0 1em 0;
	width:   100%;
	}

p.recherche-item a {
	text-decoration: none;
	
	font-weight:     bold;
	
	
	}

.no-result {
	font-family: "TriviaGroteskN6";
	font-size:   150%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#btn-menu {
		width:  8vw;
		height: 8vw;
		top:    14vw
		}
	
	#nav {
		padding-top: 1vh;
		}
	
	#menu a {
		font-size: 5vw;
		margin:    .4em 0 0 0;
		
		}
	
	#menu .menu-subnav a {
		font-size: 3.6vw;
		}
	
	#menu > ul > li {
		padding: 0 0 .2em 0;
		}
	
	#menu .page-nav {
		display: block;
		/*display: none;*/
		}
	
	#menu ul.menu-subnav {
		display:         flex;
		flex-wrap:       wrap;
		flex-direction:  row;
		justify-content: center;
		}
	
	#main-search-form #search {
		font-size:   7vw;
		width:       70vw;
		margin-left: 15vw;
		/*margin: 5vh 15vw;*/
		}
	
	#chercher #main-search-form #search {
		width:  70vw;
		margin: 1em 0 0 0;
		}
	}


/* SOUS NAVIGATION */
#subnav {
	position: fixed;
	left:     2vw;
	top:      20vw;
	width:    10vw;
	
	}

#content-wrapper #subnav {
	list-style: none;
	margin:     0;
	}

#subnav li {
	margin:         .5em 0;
	text-transform: uppercase;
	font-size:      1.5vw;
	}

#subnav li a {
	text-decoration: none;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#content-wrapper #subnav {
		overflow-x:                 scroll;
		overflow-style:             marquee-block;
		-webkit-overflow-scrolling: touch;
		overflow-y:                 hidden;
		font-size:                  100%;
		width:                      100%;
		position:                   relative;
		border-top:                 1px solid black;
		border-bottom:              1px solid black;
		display:                    flex;
		flex-wrap:                  nowrap;
		top:                        -1.5vh;
		padding:                    0;
		
		}
	
	::-webkit-scrollbar {
		width:      0px; /* remove scrollbar space */
		background: transparent; /* optional: just make scrollbar invisible */
		}
	
	#subnav {
		left: 0;
		}
	
	
	#subnav li {
		flex:      0 0 auto;
		height:    fit-content;
		margin:    .5em 0 0 0em;
		padding:   0;
		font-size: 18px;
		}
	
	#subnav li a {
		text-align: left;
		padding:    .5em .5em 0em 0em;
		
		width:      100%;
		display:    inline-block;
		margin:     0;
		
		}
		
	}

/* ACCUEIL
*********************************************************************************/
#home-wrapper {
	width:     60vw;
	display:   flex;
	flex-wrap: wrap;
	}

#hero {
	width:         calc(100% - 10px);
	margin-bottom: 5px;
	}

#hero .image, #hero .video {
	width:    100%;
	
	overflow: hidden;
	}

#hero .visuel {
	}

#hero .vid {
	height:        calc(60vw * .5);
	margin-bottom: 0;
	}

video {
	background-color: transparent !important;
	}

audio.big {
	width: 100%;
}

#hero .video video {
	width:  100%;
	height: 100%;
	}


.home-item {
	display:         block;
	width:           calc(20vw - 10px);
	height:          calc(20vw - 10px);
	background:      silver;
	margin:          0 10px 10px 0;
	transition:      transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
	text-decoration: none;
	overflow:        hidden;
	}

.home-item .gutter {
	padding: .5em;
	z-index: 300;
	}

.home-item:hover {
	transform: scale(1.07);
	z-index:   200;
	}

.home-item.big {
	width:  calc(40vw - 10px);
	height: calc(40vw - 10px);
	}

.home-item .front {
	width:           100%;
	height:          100%;
	transition:      .5s ease opacity;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	}

.home-item:hover .front {
	width:   100%;
	height:  100%;
	opacity: 0;
	
	}

.home-item.btn {
	display:          flex;
	flex-direction:   column;
	justify-content:  center;
	text-align:       center;
	color:            white;
	background-color: rgb(90, 56, 200);
	}

.home-item .back {
	color:           white;
	opacity:         0;
	transition:      .5s ease opacity;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	}

.home-item:hover .back {
	position: relative;
	width:    100%;
	height:   100%;
	top:      -100%;
	opacity:  1;
	}

.home-item .backdrop {
	opacity: 0;
	}

.home-item:hover .backdrop {
	position: relative;
	width:    100%;
	height:   100%;
	top:      -200%;
	opacity:  .3;
	filter:   grayscale(1) blur(20px);
	
	}

.home-item h3 {
	margin:    .5em 0;
	font-size: 3vw;
	color:     white
	}

.home-item.big h3 {
	font-size: 6vw;
	}

.home-item .front h3 {
	text-shadow: 0 0px 20px black;
	}

.home-item h4, .home-item h5 {
	margin:    .2em 0;
	font-size: 1.3vw;
	}

.home-item.big h4, .home-item.big h5 {
	font-size: 3vw;
	}

.home-item .actions {
	display:         flex;
	margin-top:      1em;
	text-transform:  uppercase;
	justify-content: flex-end;
	}

.home-button {
	width:           calc(20vw - 10px);
	padding:         .2em 0;
	text-align:      center;
	color:           white;
	font-family:     "TriviaGroteskN6";
	margin-left:     calc(40vw);
	text-decoration: none;
	margin-bottom:   10px;
	}

.home-button::after {
	content:           "";
	background-image:  url(../img/logo-top.svg);
	background-repeat: no-repeat;
	background-size:   contain;
	transform:         rotateZ(90deg);
	width:             2em;
	height:            1em;
	/*position: absolute;*/
	display:           inline-block;
	float:             right
	}

.link {
	justify-self: center;
	align-self:   center;
	color:        white;
	margin:       0 0 0 1em;
	padding:      .2em;
	}

.carrousel {
	width:  calc(20vw - 10px);
	height: calc(20vw - 10px);
	}

.carrousel a {
	text-decoration: none;
	}

.carrousel-item {
	width:           calc(20vw - 10px);
	height:          calc(20vw - 10px);
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	text-decoration: none;
	}

a.carrousel-item {
	text-decoration: none;
	}

.carrousel-item .gutter {
	
	text-decoration: none;
	
	}

.carrousel-item h3 {
	font-size:       2vw;
	color:           white;
	text-decoration: none;
	text-shadow:     0 0px 20px black;
	}

.carrousel-item h4 {
	font-size:       1vw;
	color:           white;
	text-decoration: none;
	text-shadow:     0 0px 20px black;
	}

.carrousel .slide {
	display:         flex;
	width:           100%;
	height:          100%;
	/*height: calc(100vw / 1.777);*/
	text-decoration: none;
	}

.slick-prev:before, .slick-next:before {
	color:   black;
	display: none;
	}

.carrousel:hover .slick-prev:before, .carrousel:hover .slick-next:before {
	display: block;
	}

.carrousel:hover .back {
	display: block;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#home-wrapper {
		width: 80vw;
		}
	
	#hero {
		width: 100%;
		}
	
	#hero .vid {
		height: calc(60vw * .75);
		}
	
	.home-item h3, .home-item.big h3 {
		font-size: 32px;
		}
	
	.home-item.big h4, .home-item.big h5, .home-item h4, .home-item h5 {
		font-size: 18px;
		}
	
	.home-item, .home-item.big, .home-item.small {
		margin: 1vh 0;
		width:  80vw;
		height: 80vw;
		}
	
	.home-button {
		width:  80vw;
		margin: 1vh 0;
		}
	
	.carrousel, .carrousel-item {
		width:  80vw;
		height: 80vw;
		}
		
	}

/* CONTENU
*********************************************************************************/

#content-wrapper .visuel {
	width:    calc(40vw - 10px);
	/*height:   calc(40vw - 10px);*/
	margin:   0 0 10px 0px;
	/*float:right;*/
	position: relative;
	}


.content.titre {
	min-height:      16vw;
	width:           100%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.content.cols {
	
	width:         100%;
	display:       flex;
	margin-bottom: 2vh;
	}

.content.two.cols {
	display:      block;
	column-count: 2;
	column-fill:  balance;
	}

/* PROGRAMME
*********************************************************************************/
#programme #filter, #pros #filter {
	width:           100%;
	border-style:    solid;
	border-width:    4px;
	border-collapse: collapse;
	margin-bottom:   2vw;
	/*height:          calc(16vw - 8px);*/
	display:         flex;
	flex-direction:  column;
	justify-content: stretch;
	font-family:     TriviaGroteskn6;
	font-size:       2vw
	}

#pros #filter {
	height: auto;
	}

#programme #filter > div, #pros #filter > div {
	display:             flex;
	flex-direction:      row;
	flex-wrap:           wrap;
	border-style:        solid;
	border-bottom-width: 3px;
	border-collapse:     collapse;
	/*flex:                0 0 20%;*/
	}

#programme #filter > div:first-child {
	/*flex: 0 0 50%;*/
	}

#pros #filter > div {
	border-bottom: 0;
	}

#programme #filter > div:last-child {
	border-bottom: 0;
	}


#filter a {
	
	padding:         0.2em;
	text-align:      center;
	border-collapse: collapse;
	border-style:    solid;
	border-width:    .5px;
	text-decoration: none;
	flex-grow:       1;
	/*height:100%;*/
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-transform:  uppercase;
	cursor:          pointer;
	}

#content-wrapper #filter a.disabled {
	filter:         grayscale(1) contrast(0);
	pointer-events: none;
	cursor:         default;
	}

#filter a span {
	justify-self: center;
	}

#flt-categories types {
	height: auto;
	}

#flt-categories a {
	min-width: 6em;
	}

#flt-categories a:first-child {
	width:     6em;
	min-width: 9em;
	}

#content-wrapper #filter a.empty, #content-wrapper #filter a:hover.empty {
	color: silver
	}

#filter input[type=search] {
	width:       56vw;
	border:      0;
	font-family: TriviaGroteskR2;
	font-size:   80%;
	}


#programme #filter .filter-search {
	display:         flex;
	justify-content: space-between;
	/*align-content: center;*/
	height:          100%;
	}

.search-form {
	padding: .1em;
	}

.search-form form {
	width: 100%;
	}


#btn-search {
	width:               3em;
	height:              auto;
	background-color:    transparent;
	border:              0;
	background-image:    url(../img/btn-search.svg);
	background-repeat:   no-repeat;
	background-size:     contain;
	background-position: center center;
	cursor:              pointer;
	margin-top:          .7rem;
	
	}

.prg #btn-search {
	margin-top: 0;
	}


#filter .dropdown dd, #filter .dropdown dt {
	margin:          0;
	padding:         0;
	
	flex-grow:       1;
	z-index:         20;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-transform:  uppercase;
	height:          100%;
	
	}

#filter .dropdown dd {
	height: 0px;
	}

#filter .dropdown.opened dd {
	position: relative;
	height:   auto;
	}

#filter .dropdown ul {
	margin: 0 0 0 0;
	}

#filter .dropdown dd {
	position: relative;
	width:    170px;
	}

#filter .dropdown a, #filter .dropdown a:visited {
	text-decoration: none;
	outline:         0;
	
	}

#filter .dropdown dt a span {
	cursor:  pointer;
	display: block;
	
	}

#filter .dropdown dd ul {
	background: white;
	display:    none;
	left:       0;
	padding:    0;
	position:   absolute;
	top:        2px;
	width:      auto;
	min-width:  170px;
	list-style: none;
	}

#filter .dropdown span.value {
	display: none;
	}

#filter .dropdown dd ul li a {
	padding: 5px;
	display: block;
	color:   #666;
	}


#programme .no-result {
	width:          100%;
	text-transform: uppercase;
	text-align:     center;
	}

textarea:focus, input:focus {
	outline: none;
	}

#programme #programme-wrapper {
	/*display:   flex;*/
	/*flex-wrap: wrap;*/
	/*position:  relative;*/
	width: 100%;
	}


#programme-wrapper .month {
	width:           100%;
	height:          calc(5vw - 10px);
	margin-top:      2vw;
	padding-bottom:  .2em;
	z-index:         10;
	font-size:       300%;
	font-family:     'TriviaGroteskN6', sans-serif;
	position:        -webkit-sticky; /* Safari */
	position:        sticky;
	top:             0vw;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-transform:  uppercase;
	background:      rgba(255, 255, 255, 1);
	}

#programme-wrapper .hour, #programme-wrapper .day {
	width:           calc(10vw - 10px);
	/*height:          calc(10vw - 10px);*/
	margin:          0 10px 10px 0;
	font-family:     "Roboto Condensed", sans-serif;
	font-weight:     bold;
	font-size:       2vw;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	flex:            0 0 15%
	}

#programme-wrapper .hour.small, #programme-wrapper .day.small {
	font-size:   1.5vw;
	font-weight: normal;
	}

#programme-wrapper .hour {
	/*font-weight: 900;*/
	}

.date-status {
	color:          white;
	background:     rgba(0, 0, 0, .8);
	/*position:       absolute;*/
	/*margin-left:    4em;*/
	/*display:        block;*/
	height:         1em;
	line-height:    1em;
	font-size:      60%;
	transform:      rotateZ(-15deg);
	font-family:    "TriviaGroteskN6";
	text-transform: uppercase;
	padding:        .1em .1em;
	margin-left: .5em;
	}

.thumb .date-status {
	position: absolute;
	font-size: 2vw;
	margin-top:2em ;
	}

.has-date-status {
	/*text-decoration: line-through;*/
	color:           silver
	}

.has-date-status .date-status {
	text-decoration: unset;
	}

.saison_label {
	color:white;
	position: absolute;
	transform-origin: 100% 0;
	transform: rotateZ(-20deg);
	background: rgba(224, 102, 91,.8);
	margin:-1em  0 0 -1em  ;
	font-weight: 900;
	}

#programme-wrapper .month.empty, #programme-wrapper .day.empty {
	background: none;
	}

.programme-item, .ressources-item {
	width:           100%;
	display:         flex;
	text-decoration: none;
	color:           black;
	margin:          1em 0
	}


#programme-wrapper .evenement-item {
	width:           39vw;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding:         .5em 0 .5em .5em;
	}

.ressources-item {
	width:          60vw;
	border-bottom:  1px dotted silver;
	display:        flex;
	flex-direction: column;
	padding-bottom: 1em;
	margin-bottom:  1em;
	}

.evenement-item h3, .ressources-item h3 {
	font-size: 3vw;
	}

.evenement-item h3.small {
	/*font-family:     "Roboto Condensed", sans-serif;*/
	font-weight: normal;
	font-size:   1.8vw;
	}


#programme.detail .evenement-item.small {
	font-size: 90%;
	margin:    10px 0;
	}

#page-wrapper .evenement-item.small h5 {
	margin-top: 0;
	}

.evenement-item.small .info {
	justify-content: center;
	}

.ressources-item h4.remarque {
	font-style: italic;
	margin:     .2em 0;
	}

.programme-item .link {
	opacity: 0;
	}

.programme-item:hover .link {
	opacity: 1;
	}

/* NOUVEAU */
#programme-liste .month {
	margin-top:    1em;
	border-bottom: 4px solid black;
	color:         rgb(90, 56, 200);
	}

#programme-liste .day {
	text-align:     center;
	display:        flex;
	flex-direction: column;
	line-height:    1.5em;
	flex:           0 0 15%;
	background:     white;
	margin:         0;
	}

#programme-liste .day h5 {
	font-size: 100%;
	margin:    0;
	}

#programme-liste .day h6 {
	font-size:   200%;
	font-weight: 900;
	margin:      0;
	}


#programme-liste .hour {
	margin:     0;
	text-align: center;
	color:      white;
	height:     auto;
	flex:       0 0 10%
	}

#programme-liste .thumb {
	margin:     0;
	text-align: center;
	
	height:     auto;
	padding:    10px;
	flex:       0 0 15%
	}

#programme-liste .thumb .img {
	width:  100%;
	height: 100%;
	}

#programme-liste .programme-item {
	margin:        0;
	border-top:    4px solid white;
	border-bottom: 4px solid white;
	min-height:    15vh;
	
	}

#programme-liste .programme-item.border-top {
	border-top: 4px solid black;
	}

#programme-liste .evenement-item {
	
	margin: 0;
	flex:   1 1 40%
	}

#programme-liste .actions {
	text-align:      center;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding:         20px;
	flex:            0 0 10%
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#programme #filter {
		font-size:     26px;
		height:        fit-content;
		/*width:         100vw;*/
		margin-bottom: 5vh;
		}
	
	
	#programme #filter > div:first-child {
		flex: none;
		}
	
	#programme #filter > div {
		
		}
	
	#programme #filter.prg {
		font-size: 6vw;
		}
	
	#programme #flt-categories a {
		min-width: auto;
		}
	
	#programme #filter a {
		padding:   .4em .5em;
		font-size: 70%;
		width:     fit-content;
		
		}
	
	#programme #filter a.first {
		width: 100%
		}
	
	#programme #filter .dropdown {
		width:        45%;
		margin-right: 10px;
		}
	
	#programme #filter .dropdown dt a {
		width: 95%;
		}
	
	#programme #filter > div {
		flex: none
		}
	
	#filter input[type=search] {
		width: 68vw;
		}
	
	#programme #filter #btn-search {
		margin: 0;
		}
	
	#programme-wrapper .month {
		font-size:   200%;
		line-height: 1em;
		margin:      1em 0 1em 0;
		height:      auto;
		padding:     2vh 0 0 0;
		}
	
	#programme-wrapper .day {
		font-size: 100%;
		flex:      0 0 100%;
		margin:    0 10px 0px 0;
		padding:   1em 0 1em;
		}
	
	#programme-wrapper .day h6 {
		margin-top: 10px;
		}
	
	#programme-wrapper .hour {
		flex: 0 0 20%
		}
	
	#programme-liste .thumb {
		flex:                0 0 90%;
		background-position: center;
		height:              20vh;
		
		}
	
	#programme-wrapper .hour.small, #programme-wrapper .day.small {
		font-size: 80%;
		}
	
	#programme-liste .hour {
		margin-top: .2em;
		font-size:  100%;
		flex:       0 0 100%;
		order:      1;
		}
	
	.programme-item {
		margin-bottom: 10px;
		flex-wrap:     wrap;
		display:       flex;
		padding:       0;
		flex:          0 0 100%;
		}
	
	#programme-liste .programme-item.border-top {
		border: 0
		}
	
	#programme-wrapper .evenement-item {
		width:  100%;
		margin: 0em;
		flex:   0 0 90%;
		}
	
	.evenement-item {
		order: 3
		}
	
	.evenement-item h3 {
		font-size:  120%;
		margin:     .2em 0 1em;
		text-align: center;
		}
	
	.evenement-item h3.small {
		font-size: 80%;
		}
	
	.evenement-item h4, .evenement-item h1 {
		font-size:   90%;
		line-height: 1.3em;
		}
	
	
	#programme-wrapper .link {
		display: none;
		}
	
	#programme-liste .actions {
		display: none;
		}
	
	.thumb .date-status {
		position: absolute;
		font-size: 10vw;
		margin:2em 0 0 -2em;
		}
	}


/* PAGE
*********************************************************************************/

#page-wrapper {
	display:         flex;
	justify-content: space-between;
	flex-wrap:       wrap;
	width:           100%;
	}

#page-wrapper > div {
	padding-bottom: 2vh;
	}

#page-wrapper .visuel {
	flex: 0 0 66%;
	}

.slogan {
	position: absolute;
	z-index:  200;
	}

.slogan.image {
	width:  50%;
	margin: -2% 0 0 -2%;
	}

.slogan.marge-droite {
	position: absolute;
	width:    50%;
	z-index:  -10;
	top:      32vh;
	right:    -17vw;
	}

.slogan.marge-gauche {
	position: absolute;
	width:    50%;
	z-index:  -10;
	top:      90vh;
	left:     -19vw;
	}

.slogan.titre {
	position: absolute;
	width:    50%;
	z-index:  -10;
	top:      1vh;
	right:    -13vw;
	}

.credit {
	font-size: 50%;
	}

#page-wrapper .action {
	flex: 0 0 16%
	}

#page-wrapper .infos {
	flex:            0 0 30%;
	line-height:     1.3em;
	font-family:     "Roboto Condensed", sans-serif;
	font-size:       1.8vw;
	/*text-transform:  uppercase;*/
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	padding-bottom:  2.5em;
	font-weight:     normal;
	}

#content-wrapper .infos p {
	margin-bottom: .5em;
	line-height:   1em;
	}

#content-wrapper .infos a {
	text-decoration: none;
	}

#page-wrapper .description {
	flex: 0 0 78%;
	}

.description strong {
	font-weight: bold;
	}

.description table td {
	padding: .2em .5em;
	}


#page-wrapper .distribution {
	margin-top:  1em;
	
	font-weight: normal;
	}

#page-wrapper h5 {
	font-size:   2vw;
	margin:      2em 0 0 0;
	font-weight: bold;
	}

.logo-container {
	display:        flex;
	flex-wrap:      wrap;
	flex-direction: row;
	
	}

.logo-container a, .logo-container div, .logo-container img {
	max-width:    10vw;
	margin:       0px 20px 20px 0;
	justify-self: center;
	align-self:   center;
	}

#programme.detail .evenement-item {
	margin:          5vh auto;
	display:         flex;
	text-decoration: none;
	}


#programme.detail #content-wrapper .evenement-item .visuel {
	width:        10vw;
	height:       10vw;
	flex:         0 0 10vw;
	margin-right: 2vw;
	}

#programme.detail #content-wrapper .evenement-item .info {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	width:           100%;
	}

#content-wrapper a.evenement-item {
	text-decoration: none;
	}

#programme.detail #content-wrapper .description {
	
	}

.vid {
	margin-bottom: 1em;
	}

.labels {
	display: flex;
	}

.label-picture {
	width:  3em;
	height: 3em;
	margin: 10px 10px 0 0;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#page-wrapper .visuel {
		flex: 0 0 100%
		}
	
	#content-wrapper .visuel {
		width: 100%;
		}
	
	.content.titre {
		margin-bottom: 1em;
		}
	
	#page-wrapper .infos {
		flex:      0 0 100%;
		font-size: 100%
		}
	
	#page-wrapper .infos .strong {
		margin-top: .4em;
		}
	
	#page-wrapper .actions {
		flex:            0 0 100%;
		font-size:       100%;
		display:         flex;
		justify-content: space-between;
		}
	
	#page-wrapper .actions .button {
		width: auto;
		}
	
	#page-wrapper .actions .button span {
		font-size: 100%;
		}
	
	#page-wrapper .description {
		flex:      0 0 100%;
		font-size: 100%;
		width:     100%;
		}
	
	#page-wrapper h5 {
		font-size: 120%;
		}
	
	.logo-container a, .logo-container div, .logo-container img {
		max-width: 20vw;
		width:     20vw;
		}
	
	.slogan {
		display: none;
		}
		
	}


/* UI
*********************************************************************************/
.button {
	display:          flex;
	flex-direction:   column;
	justify-content:  center;
	width:            10vw;
	margin:           0 0 10px 0;
	transform-origin: center center;
	transition:       transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
	cursor:           pointer;
	text-decoration:  none;
	font-weight:      normal;
	padding:          .3em;
	}

.button:hover {
	transform: scale(1.07);
	
	}

.button span {
	color:       white;
	font-family: TriviaGroteskN6;
	font-size:   1.5vw;
	text-align:  center;
	}

.button span.prop {
	font-family: "Roboto Condensed", sans;
	display:     block;
	font-size:   75%;
	}

.link-back {
	text-decoration: none;
}

/* MEDIATION
********************************************************************************************************************/
#mediation_texte {
	margin:          0 0em 2em 0em;
	display:         flex;
	justify-content: flex-start;
	
	}

#mediation_texte p {
	margin: 0;
	}

#mediation_perso {
	height: 4em;
	}

.speech-bubble {
	position:    relative;
	background:  rgb(90, 56, 200);
	
	color:       white;
	margin-left: 2em;
	align-self:  flex-start;
	padding:     .5em;
	font-size:   80%;
	}

.speech-bubble:after {
	content:            '';
	position:           absolute;
	left:               0;
	top:                30%;
	width:              0;
	height:             0;
	border:             20px solid transparent;
	border-right-color: rgb(90, 56, 200);
	border-left:        0;
	border-top:         0;
	margin-top:         -10px;
	margin-left:        -20px;
	}

/* EQUIPE
********************************************************************************************************************/


.equipe-item, .oeuvres_plastiques-item {
	margin-bottom:   4vh;
	display:         flex;
	text-decoration: none;
	}

.equipe-item h3, .oeuvres_plastiques-item h3 {
	font-size: 3vw;
	}

#content-wrapper .equipe-item .visuel, #content-wrapper .oeuvres_plastiques-item .visuel {
	width:        10vw;
	height:       10vw;
	flex:         0 0 10vw;
	margin-right: 2vw;
	}

#content-wrapper .equipe-item .info, #content-wrapper .oeuvres_plastiques-item .info {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	width:           100%;
	}


@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	
	.equipe-item, .oeuvres_plastiques-item {
		flex-direction: column;
		}
	
	#content-wrapper .equipe-item .visuel, #content-wrapper .oeuvres_plastiques-item .visuel {
		width:  80vw;
		height: 80vw;
		flex:   0 0 auto
		}
	
	.equipe-item h3, .oeuvres_plastiques-item h3 {
		font-size: 32px;
		}
	}


/* SALLES
*********************************************************************************/


.salle-item {
	margin-bottom:   4vh;
	display:         flex;
	text-decoration: none;
	}

.salle-item h3 {
	font-size: 3vw;
	}

#content-wrapper .salle-item .visuel {
	width:        20vw;
	height:       20vw;
	flex:         0 0 20vw;
	margin-right: 2vw;
	}

#content-wrapper .salle-item .info {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	width:           100%;
	}

#oCalendar {
	
	width:           100%;
	margin:          0vh 0;
	border-collapse: collapse;
	}

#oCalendar td {
	width:  14.2%;
	height: 3em;
	}

#oCalendar th {
	text-transform: uppercase;
	text-align:     center;
	padding:        .5em 0 1em;
	font-weight:    900;
	}

#oCalendar td.oDays {
	text-transform: uppercase;
	font-size:      80%;
	text-align:     center;
	}

.calendar-day.today {
	border: 2px solid #333;
	}

.calendar-day {
	border:         1px solid silver;
	vertical-align: top;
	padding:        .2em;
	}

#oCalendar {
	margin-top: 1em;
	}

#oCalendar .busy {
	background: maroon;
	color:      white
	}

#oCalendar .hours {
	position:   relative;
	z-index:    10;
	margin-top: -1.4em;
	}

#oCalendar .hours div {
	min-height: 1.2px;
	/*margin-bottom: .5px;*/
	}

.calendar-month-button {
	font-size:       150%;
	text-decoration: none;
	background:      silver;
	display:         inline-block;
	width:           1em;
	height:          1em;
	border-radius:   1em;
	}

.calendar-month-button {
	background-repeat:   no-repeat;
	background-image:    url(../img/logo-top.svg);
	background-position: center center;
	background-size:     120%;
	background-position: center center;
	}

.calendar-month-button.prev {
	transform:           rotateZ(-90deg);
	background-position: -0.1em 0.2em
	}

.calendar-month-button.next {
	transform:           rotateZ(90deg);
	background-position: -0.1em 0.2em
	}

#disponibilites {
	margin-top: 2em;
	}


.legende {
	margin-top: 1em;
	font-size:  90%;
	font-style: italic;
	}

.legende .square {
	display: inline-block;
	width:   1em;
	height:  1em;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	.salle-item {
		flex-direction: column;
		}
	
	#content-wrapper .salle-item .visuel {
		width:  80vw;
		height: 80vw;
		flex:   0 0 auto
		}
	
	.salle-item h3 {
		font-size: 32px;
		}
		
	}

/* GALERIES
*********************************************************************************/
#galerie {
	display:   flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	width:     100%;
	margin:    10vh auto;
	}

#galerie img {
	margin: 10px 10px 0 0;
	width:  100%;
	}

#galerie a {
	margin:           10px 10px 0 0;
	width:            20vw;
	height:           20vw;
	overflow:         hidden;
	display:          flex;
	flex-direction:   column;
	justify-content:  center;
	transform-origin: center center;
	transition:       .2s all ease;
	}

#galerie a:hover {
	transform: scale(1.1);
	z-index:   10;
	}

.sl-overlay {
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter:         blur(20px);
	}

.sl-wrapper .sl-image .sl-caption {
	background:  transparent;
	font-family: "Roboto Condensed", sans-serif;
	font-size:   150%;
	text-shadow: 0 0px 20px black;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#galerie a {
		margin: 10px 20px 0 0;
		width:  35vw;
		height: 35vw;
		}
	
	.sl-wrapper .sl-image .sl-caption {
		font-size: 90%;
		}
		
	}

/* PRESSE
*********************************************************************************/
.presse-item {
	margin: 0 0 2em 0;
	}

.presse-items {
	display:    flex;
	margin-top: 1em;
	flex-wrap:  wrap;
	}

.presse-items a {
	color:           white;
	text-align:      center;
	text-decoration: none;
	justify-self:    flex-start;
	}

.presse-items > * {
	flex:            0 0 25%;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	margin:          20px 10px;
	}

.presse-items img {
	width: 100%
	}

/* INSCRIPTIONS
*************************************************************************************************************************/

#esp-form {
	width:            100%;
	background-color: rgba(90, 56, 200, .2);
	border-radius:    10px;
	margin:           2vh 0;
	}

#esp-form label {
	padding-top: 1em;
	font-weight: 900;
	width:       100%;
	display:     block;
	}

#esp-form input {
	width:     100%;
	font-size: 120%;
	border:    1px solid grey
	}


#esp-form input[type=file] {
	font-size: 80%;
	color:     silver
	}

#esp-form .error {
	display: none;
	}

.btn-success {
	cursor:          pointer;
	text-decoration: none;
	font-weight:     normal;
	padding:         .3em;
	line-height:     1em;
	border:          0;
	color:           white;
	font-family:     TriviaGroteskN6;
	font-size:       1.5vw;
	text-align:      center;
	float:           right;
	margin:          1em 0;
	}

.btn-success i {
	display: none;
	}

#esp-form {
	padding: 1em;
	}

#esp-form.btn-success.float-right {
	float:  none;
	margin: 2em;
	}

#esp-form input[type=radio] {
	width: 2em;
	float: left
	}

#esp-form select {
	font-size: 130%;
	}

#esp-form label.radio {
	width:       100%;
	padding-top: 0.2em;
	}


.captchaimage {
	float: left
	}

#esp-form input.captchafield {
	width:  8em;
	margin: 2em 0 0 2em;
	
	}

.inscription-message, .error-message {
	font-size:  150%;
	margin:     10vw;
	text-align: center;
	text-align: center;
	}

#esp-form .help_text {
	font-weight: normal;
	font-size:   75%;
	}

/* PIED DE PAGE
*********************************************************************************/
#footer {
	margin:          6vh 0 4vh 20vw;
	display:         flex;
	justify-content: space-between;
	text-transform:  uppercase;
	font-family:     'TriviaGroteskN6', sans-serif;
	
	}

#footer > div {
	padding:     2vw 2vw 2vw 10px;
	line-height: 1em;
	width:       20vw;
	}

#footer > div:first-child, #footer > div:last-child {
	/*width: 10vw;*/
	}

#footer p {
	margin: 0;
	}

#footer a:not(.button) {
	color: rgb(90, 56, 200)
	}

#footer a:hover {
	color:white;
	}

#footer a.button {
  color:white;
	text-align: center;
	margin: 10px 0;

	}

#footer > div:last-child {
	text-align: right;
	}

#footer .icon {
	display:    inline-block;
	width:      1.5em;
	height:     1.5em;
	margin:     0 0 0 4px;
	transition: transform 0.4s cubic-bezier(.09, .92, .51, 1.51);
	}

#footer .icon:hover {
	transform: scale(1.3);
	}


#footer #qrcode-whatsapp {
	width:  8vw;
	height:  8vw;
	display: block;
	margin: 10px 0 0 0;
	background-image: url(/img/qrcode-whatsapp.svg);
	background-size: contain;
	}

#logo-footer {
	height:       3em;
	width:        5em;
	-webkit-mask: url(../img/logo-footer.svg) no-repeat center;
	mask:         url(../img/logo-footer.svg) no-repeat center;
	}

.icon.fb {
	-webkit-mask: url(../img/facebook-square.svg) no-repeat center;
	mask:         url(../img/facebook-square.svg) no-repeat center;
	}

.icon.tw {
	-webkit-mask: url(../img/twitter-square.svg) no-repeat center;
	mask:         url(../img/twitter-square.svg) no-repeat center;
	}

.icon.ig {
	-webkit-mask: url(../img/instagram-square.svg) no-repeat center;
	mask:         url(../img/instagram-square.svg) no-repeat center;
	}

.icon.yt {
	-webkit-mask: url(../img/youtube-square.svg) no-repeat center;
	mask:         url(../img/youtube-square.svg) no-repeat center;
	}

#sponsors {
	display:         flex;
	justify-content: center;
	}

#sponsors .logo-container .sponsor-item {
	width:   6vw;
	height:  6vw;
	margin:  1vw;
	filter:  grayscale(1) brightness(1);
	display: flex;
	/*flex-direction: column;*/
	/*justify-content: center;*/
	
	}

#sponsors .logo-container img {
	filter:     grayscale(1);
	width:      6vw;
	align-self: center;
	/*border: 1px dotted red;*/
	
	}

#credits {
	font-size:  11px;
	color:      grey;
	padding:    3em 0 3em;
	text-align: center;
	}

#credits a {
	color: grey
	}

#footer input {
	width:       45%;
	float:       left;
	margin:      3px;
	font-size:   100%;
	font-family: "Roboto Condensed";
	}

#footer .button {
	border:    0;
	font-size: 80%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#footer {
		width:          80vw;
		margin:         10vh 10vw;
		flex-direction: column;
		}
	
	#footer > div, #footer > div:first-child, #footer > div:last-child {
		font-size: 6vw;
		margin:    1vh 0;
		width:     80vw;
		}
	
	#logo-footer {
		width: 100%
		}
	#footer a.button {
		width: 50%;
		}
	
	#footer #qrcode-whatsapp {
		width: 28vw;
		height: 28vw;
		}
	
	#sponsors .logo-container {
		width:           100%;
		justify-content: center;
		}
	
	.logo-container a, .logo-container div, .logo-container img {
		max-width: 100vw;
		}
	
	#sponsors .logo-container .sponsor-item {
		width:  25vw;
		height: 25vw;
		margin: 10px;
		}
	
	#sponsors .logo-container img {
		width: 25vw;
		/*height: 30vw;*/
		}
	
	#footer input {
		width: 70%;
		}
	}

#footer #mc-embedded-subscribe {
	background-color:    rgb(90, 56, 200);
	width:               2em;
	height:              1.7em;
	margin-top:          4px;
	background-image:    url(../img/logo-top.svg);
	background-repeat:   no-repeat;
	background-position: center .3em;
	transform:           rotateZ(90deg);
	}

#mc_embed_signup div.mce_inline_error {
	display: none;
	}

/* BOUTON EVIDANSE */
#btn-evidanse {
	/*background: black;*/
	position: fixed;
	top: 20vh;
	right: 8vw;
	border-radius: 1000px;
	width: 10vw;
	height: 10vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	transform-origin: center center;
	transform: rotateZ(20deg);
	color: rgb(254, 238, 66);
	font-size: 2vw;
	z-index: 100;
	font-weight: bold;
	transition: .5s transform ease;
	}

#btn-evidanse img {
	width: 10vw;
	margin: 0 auto;
	}

#btn-evidanse:hover {
	transform: scale(1.2);
	}

@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#btn-evidanse {
		
		z-index: 1000;
		position: absolute;
		top: -11vh;
		right: 12vw;
		font-size: 4vw;
		width: 22vw;
		height: 22vw
		}
	
	#btn-evidanse img {
		width: 22vw;
		height: 22vw
		}
	}

/* BOUTON PROSIT */
#btn-prosit {
	/*background: black;*/
	position: fixed;
	top: 20vh;
	right: 8vw;
	border-radius: 1000px;
	width: 10vw;
	height: 10vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	transform-origin: center center;
	transform: rotateZ(20deg);
	color: rgb(254, 238, 66);
	font-size: 2vw;
	z-index: 100;
	font-weight: bold;
	transition: .5s transform ease;
	}

#btn-prosit img {
	width: 10vw;
	margin: 0 auto;
	}

#btn-prosit:hover {
	transform: scale(1.2);
	}

@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#btn-prosit {
		
		z-index: 1000;
		position: absolute;
		top: -11vh;
		right: 12vw;
		font-size: 4vw;
		width: 22vw;
		height: 22vw
		}
	
	#btn-prosit img {
		width: 22vw;
		height: 22vw
		}
	}


/* 404 */
#wrapper-404 {
	width: 100%;
	height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#image-404 {
	width: 40vw;
	height: 40vh;
	margin:  0 auto;
	background: url(../img/404.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
;
}

@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#wrapper-404 {
		height: 60vw;
	}

	#image-404 {
		width: 90vw;
	}
}

/* LETTRE INFO */
.g-Dialog-content-container {
	width: 75vw;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	.g-Dialog-content-container {
		position:fixed;
		left:20px;
		top:300px
		}
	}