body {
	font-family: "Lato", sans-serif;
	font-size:   18px;
	color:       rgba(0, 0, 0, .7);
	min-height:  90vh;
	
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	body {
		font-size: 16px;
		}
	}

/* EN_TETE
******************************************************************************************/

#header {
	height:          110px;
	display:         flex;
	padding:         10px 0;
	/*background: rgba(255, 255, 255, 1);*/
	box-shadow:      0 10px 20px rgba(0, 0, 0, .05);
	position:        sticky;
	top:             0;
	z-index:         400;
	justify-content: space-between;
	}

#header #logo {
	left:       10vw;
	height:     70px;
	display:    flex;
	text-align: left;
	margin:     5px;
	flex:       0 0 15%
	}

#header.compact #logo {
	padding: 0;
	height:  48px;
	}

#header #svg-logo {
	width:       100%;
	margin-left: 20px;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#header {
		height: 80px;
		}
	
	#header #logo {
		left:    10px;
		width:   30vw;
		padding: 0 10px;
		margin:  0;
		flex:    0 0 30%
		}
	}

/* STRUCTURE
******************************************************************************************/
#page-wrapper {
	min-height: 65vh;
	width:      65vw;
	margin:     40px auto 50px;
	}



#les-amis #page-wrapper {
	margin:     5vh auto 0;
	padding:    0;
	min-height: unset;
	
	}

#cols-wrapper , #cols-wrapper-special {
	display:         flex;
	justify-content: space-between;
	position:        relative;
	flex-wrap:       wrap;
	width:           100%;
	}

#cols-wrapper-special {
	border: 4px solid rgb(196, 255, 53);
	padding: 10px;
	margin-bottom: 2em;
}

#main-col, .contenu-special {
	flex:          0 0 70%;
	padding-right: 3vw;
	}



#main-col p {
	margin-bottom: .5em;
	}

#main-col p.link {
	margin-bottom: .2em;
	}

#secondary-col, .contenu-special-droite {
	flex:         0 0 28%;
	padding-left: 2vw;
	}

.contenu-special-droite {
	font-size: 80%;
}

#secondary-col table tr {
	vertical-align: top;
	}

#secondary-col table td {
	padding: 5px;
	}


#secondary-col p {
	margin-bottom: .2em;
	}

.detail #main-col {
	
	}

#svg-logo.logo-white {
	display: none;
	}


/* VARIANTE TRANSPARENT */
/*#musee.portrait #header:not(.compact) {*/
/*    background-color: rgba(72, 93, 171, .4);*/
/*    position: absolute;*/
/*    width: 100vw;*/
/*}*/

/*#musee #hero {*/
/*    height: 33vh;*/
/*}*/

/* VARIANTE COULEUR */
/*#expositions #header:not(.compact) {*/
/*    background-color: rgb(72, 93, 171);*/

/*    width: 100vw;*/
/*}*/

/* LOGO VARIANTES */
/*#musee.portrait #header:not(.compact) #svg-logo,*/
/*#expositions #header:not(.compact) #svg-logo {*/
/*    display: none;*/
/*}*/

/*#musee.portrait #header:not(.compact) #svg-logo.logo-white,*/
/*#expositions #header:not(.compact) #svg-logo.logo-white {*/
/*    display: block;*/
/*}*/


/* TEXTE BLANC PUR VARIANTE TRANSPARENT ET COULEUR */
/*#musee.portrait #header:not(.compact) #nav > div > a:not(.selected), #musee.portrait #header:not(.compact) #tools > a, #musee.portrait #header:not(.compact) #lang a,*/
/*#expositions #header:not(.compact) #nav > div > a:not(.selected), #expositions #header:not(.compact) #tools > a, #expositions #header:not(.compact) #lang a {*/
/*    color: white*/
/*}*/

/*#musee #nav > div > a:not(.selected):hover,*/
/*#expositions #nav > div > a:not(.selected):hover {*/
/*    color: rgb(223, 39, 159)*/
/*}*/

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#page-wrapper {
		min-height: 50vh;
        width: 90vw;
		}
	
	#cols-wrapper {
		flex-direction: column;
		flex-wrap:      nowrap;
		}
	
	#main-col, #secondary-col {
		height: fit-content;
		}
	
	#secondary-col {
		margin:  20px 0 0 0;
		padding: 0;
		}

	.contenu-special , .contenu-special-droite {
		flex: 0 0 100%
	}
		
	}


/* TYPO
*************************************************************************************/
h3.titre {
	font-weight:    900;
	font-size:      4vw;
	text-transform: uppercase;
	}

h4.soustitre {
	font-size: 2vw;
	}

b {
	font-weight: 900;
	}

#titre {
	margin-bottom: 2vh;
	}

.titre-section {
	width:          90vw;
	margin:         3em auto 0;
	font-weight:    200;
	font-size:      2vw;
	text-transform: uppercase;
	
	}


.contenu {
	line-height: 1.3em;
	}

.contenu p, .contenu li {
	margin: 0 0 .2em 0;
	}


.contenu ul {
	list-style: outside;
	padding:    .2em 1em;
	}

.contenu table td {
	vertical-align: top;
	padding:        0 1em 1em 0;
	}

.contenu table td:first-child {
	width: 6em;
	}

#main-col > h3, .contenu h3 {
	margin:    1em 0 0.5em;
	/* font-size: 24px; */
	font-size: 115%;
	/*text-transform: uppercase;*/
	}

#secondary-col .contenu h3:first-child, #main-col > h3:first-child, .contenu h3:first-child {
	margin-top: 0;
	}

#secondary-col .contenu h3 {
	margin-top: 2em;
	}


#secondary-col h5 {
	margin-top: 2em;
	}

#secondary-col a:hover {
	text-decoration: none;
	}

#secondary-col .visuel-droite {
	width:         100%;
	margin-bottom: 2vh;
	}

.image-detail {
	width:         100%;
	margin-bottom: 10px;
	}

.bghover {
	transition: .4s ease-in-out background;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	h4.soustitre {
		font-size: 24px;
		}
	}

/* NAVIGATION
*************************************************************************************/
#btn-mobile-menu {
	display: none;
	}


#header #menu {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	height:          80px
	}


#nav, #tools {
	display:         flex;
	justify-content: flex-end;
	position:        relative;
	}

#tools a:hover {
	text-decoration: none;
	}

#header.compact {
	position: sticky;
	top:      0;
	padding:  0;
	height:   60px;
	}

#header.compact #menu {
	height:          50px;
	margin-top:      15px;
	justify-content: flex-start;
	}

#header.compact #tools, #header.compact #lang a {
	display: none;
	}

#header.compact #nav > div > a {
	/*font-size: 1.3vw;*/
	}

#header.compact #nav submenu a {
	/*font-size: 1vw;*/
	}

#header #lang {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	flex:            0 0 15%;
	text-align:      right;
	margin-right:    1em;
	}

#header #lang a {
	font-size: 90%;
	color:     white;
	padding:   0 .5em 0 .2em;
	
	}

#header #lang a:hover {
	text-decoration: none;
	}

#header #lang a.selected {
	color:       white;
	font-weight: 900;
	}

#header #lang a span {
	padding: .2em;
	}

#header #lang a.selected span {
	background: rgba(0, 0, 0, .2);
	}

#nav {
	
	}

#nav > div {
	display: inline-block;
	}

#nav a {
	/*color: white;*/
	
	font-size:   18px;
	font-weight: 500;
	margin:      0 .5em;
	}

#nav a:hover {
	text-decoration: none;
	}

#nav a.selected {
	font-weight: 800;
	}

.has-submenu {
	position: relative;
	cursor:   pointer;
	}

.has-submenu .submenu {
	display:          none;
	/*display: block;*/
	position:         absolute;
	width:            100%;
	z-index:          2500;
	background-color: #f0f0f0;
	margin-top:       0px;
	padding-top:      10px;
	transition:       .2s ease-in-out all;
	
	}

.has-submenu:hover {
	background-color: #f0f0f0;
	/*border-top-left-radius: 8px;*/
	/*border-top-right-radius: 8px;*/
	}

#header #nav .has-submenu:hover a {
	color: black;
	}

.has-submenu:hover .submenu {
	
	display:    block;
	min-width:  13em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
	/*border-bottom-left-radius: 8px;*/
	/*border-bottom-right-radius: 8px;*/
	/*border-top-right-radius: 8px;*/
	overflow:   hidden;
	}


#nav .submenu a {
	display:     block;
	font-size:   100%;
	font-weight: 400;
	padding:     .2em 1em;
	margin:      0;
	/*border-bottom: 1px dotted silver;*/
	transition:  .5s ease-in-out color;
	color:       black
	}

#nav .submenu a:last-child {
	border-bottom: 0;
	}

#nav .submenu a:hover {
	text-decoration:  none;
	background-color: #f7f7f7;
	}

#nav .submenu a.selected {
	font-weight: 700;
	}


#tools a {
	color:       white;
	font-size:   16px;
	font-weight: 400;
	margin:      0 .5em;
	}

.msg {
	min-height: 60vh;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#btn-mobile-menu {
		position:   fixed;
		font-size:  4vw;
		margin:     0;
		width:      60px;
		height:     60px;
		top:        15px;
		right:      10px;
		z-index:    1700;
		display:    block;
		cursor:     pointer;
		color:      white;
		text-align: right;
		/*background-color: #B4252D;*/
		}
	
	#header.compact #btn-mobile-menu {
		top: 10px
		
		
		}
	
	#header {
		height:  60px;
		z-index: 1600;
		}
	
	#header #logo {
		width:   100%;
		flex:    0 0 30%;
		height:  48px;
		padding: 0;
		}
	
	.nav-on {
		
		
		}
	
	#btn-mobile-menu:before {
		font:         normal normal normal 14px/1 FontAwesome;
		content:      '\f0c9';
		margin-right: .5em;
		width:        1em;
		font-size:    30px;
		display:      inline-block;
		
		}
	
	.nav-on #btn-mobile-menu:before {
		font:         normal normal normal 14px/1 FontAwesome;
		
		content:      '\f00d';
		margin-right: .5em;
		width:        1em;
		font-size:    30px;
		display:      inline-block;
		color:        white;
		
		}
	
	#header #menu {
		position:        fixed;
		/*top: 0;*/
		left:            0;
		width:           100vw;
		height:          100vh;
		display:         none;
		flex-direction:  column;
		justify-content: flex-start;
		padding-top:     5vh;
		margin:          0 0;
		z-index:         -1000;
		pointer-events:  none;
		
		
		}
	
	#header.compact #menu {
		height:     100vh;
		margin-top: 0;
		}
	
	#header #lang {
		display: none;
		}
	
	
	.nav-on #header #lang {
		display:         flex;
		flex-direction:  row;
		justify-content: flex-start;
		z-index:         20000;
		position:        absolute;
		top:             20px;
		left:           20px;
		width:           100%
		}

	.nav-on #header #lang a {
		font-size: 120%;
	}
	
	
	.nav-on #header #menu {
		pointer-events: all;
		display:        flex;
		z-index:        10000;
		background:     white;
		top:            0;
		}
	
	#nav > div {
		margin: 10px 0;
		}
	
	#menu a {
		font-size:  6vw;
		text-align: left;
        border-bottom: 1px dotted silver;
		padding:    .1em 0;
		/*border: 1px dotted red;*/
		width:      90%;
		margin:     0 auto;
        display: flex;
        justify-content: space-between;
		}

    #menu a:hover {
        background:transparent;
    }

    .has-submenu:hover {
        background:transparent;
    }
	
	#nav {
		flex-direction:  column;
		justify-content: center;
		order:           0;
		left:            0;
		height:          80vh;
		transition:      .5s left ease;
		}
	
	#tools {
		flex-direction: column;
		order:          1;
		}
	
	#nav.opened {
		left: -100vw;
		top:  0;
		}
	
	
	#menu .sub a {
		/*width:     100%;*/
		/*font-size: 120%;*/
		/*padding:   10px 0;*/
        font-size:  6vw;
        text-align: left;
        border-bottom: 1px dotted silver;
        padding:    .1em 0;
        /*border: 1px dotted red;*/
        width:      90%;
        margin: 10px auto;
        display: flex;
        justify-content: space-between;
		}
	
	body.nav-on {
		/*position: fixed;*/
		}
	
	#nav .sub {
		width:    100vw;
		height:   100vh;

		position: absolute;
		top:      0;
		left:     100vw;
		display: flex;
        flex-direction: column;
        justify-content: center;

		}
	
	#nav .sub span {
		display:         flex;
		flex-direction:  column;
		justify-content: center;
		height:          60vh;
		}
	
	.btn-menu-back {
		padding: 1em;
		}
		
		
	}


@media screen and (min-width: 968px) and (max-width: 1024px) {
	
	#nav a {
		font-size: 15px;
		
		}
		
	}



	/*@media screen and (min-device-width: 320px) and (max-width: 768px) {*/
	/*	*/
	/*	#subnav {*/
	/*		*/
	/*		justify-content: space-between;*/
	/*		*/
	/*		display:         flex;*/
	/*		flex-direction:  row;*/
	/*		}*/
	/*	*/
	/*	#subnav .gutter {*/
	/*		overflow-x:                 scroll;*/
	/*		overflow-style:             marquee-block;*/
	/*		-webkit-overflow-scrolling: touch;*/
	/*		overflow-y:                 hidden;*/
	/*		display:                    flex;*/
	/*		flex-direction:             row;*/
	/*		*/
	/*		}*/
	/*	*/
	/*	#subnav a {*/
	/*		!*flex:      0 0 auto;*!*/
	/*		!*!*height:  fit-content;*!*!*/
	/*		!*margin:    0 1em 0 0;*!*/
	/*		!*padding:   0.2em .5em;*!*/
	/*		!*font-size: 18px;*!*/

    /*        font-size:  6vw;*/
    /*        text-align: left;*/
    /*        border-bottom: 1px dotted silver;*/
    /*        padding:    .1em 0;*/
    /*        !*border: 1px dotted red;*!*/
    /*        width:      90%;*/
    /*        margin:     0 auto;*/
    /*        display: flex;*/
    /*        justify-content: space-between;*/
	/*		}*/
	/*	*/
	/*	#subnav a.selected {*/
	/*		font-weight: bold;*/
	/*		}*/
	/*	*/
	/*	#subnav .arrows {*/
	/*		!*display: block;*!*/
	/*		!*position: relative;*!*/
	/*		!*margin-left: -1em;*!*/
	/*		width:  1em;*/
	/*		height: 100%;*/
	/*		flex:   0 0 4%;*/
	/*		margin: 4px 2px 0 2px;*/
	/*		}*/
	/*	*/
	/*	#subnav .arrows.right {*/
	/*		!*margin-left: 90vw;*!*/
	/*		}*/
	/*		*/
	/*	}*/



/* GRILLES
*************************************************************************************/
#grid-wrapper {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	flex-wrap:       wrap;
	
	}

#grid-wrapper.centered {
	justify-content: center;
	}

.grid-item {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	/*margin-bottom: 1em;*/
	transition:      .2s ease all;
	padding:         2px;
	}

.grid-item:hover {
	text-decoration: none;
	transform:       scale(1.1);
	/*background-color: #f0f0f0;*/
	
	}

.grid-item:hover .visuel {
	box-shadow: 0 10px 20px silver;
	
	}

.grid-item.small {
	width:        25%;
	aspect-ratio: 21/29.7;
	/*height: 20vw;*/
	
	}

.grid-item.medium {
	width:        30%;
	
	aspect-ratio: 21/29.7;
	/*height: 25vw;*/
	
	}

.grid-item.big {
	width:        45%;
	
	aspect-ratio: 21/29.7;
	
	}

.grid-item.spacer {
	justify-content: center;
	font-size:       200%;
	text-align:      center;
	}

.grid-item .visuel {
	width:           90%;
	aspect-ratio:    21/29.7;
	margin:          0 auto;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	color:           white;
	}

.grid-item h5 {
	font-weight:    600;
	text-transform: uppercase;
	text-align:     center;
	padding:        0 2em;
	font-size:      150%;
	}

.grid-item h6 {
	font-weight: 400;
	text-align:  center;
	padding:     0 2em;
	}

.backdrop {
	position:        relative;
	width:           91%;
	aspect-ratio:    21/29.7;
	margin:          -128% auto 0;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	z-index:         10;
	text-align:      center;
	opacity:         0;
	transition:      .2s ease-in-out opacity;
	}

.bloc .backdrop {
	display:      none;
	aspect-ratio: 1;
	width:        100%;
	margin-top:   -100%;
	}

.grid-item:hover .backdrop, .bloc:hover .backdrop {
	opacity: 1;
	}

@media screen and (min-device-width: 320px) and (max-width: 1024px) {
	.grid-item.medium {
		width: 90%;
		}
	
	.grid-item.small, .grid-item.medium, .grid-item.big {
		width: 100%;
		}
	
	.grid-item.expositions.big .visuel {
		opacity: 0;
		}
	
	.grid-item.expositions.big .backdrop {
		/*display: block;*/
		opacity: 1;
		}
	}


/* ACCUEIL
*************************************************************************************/

#accueil #page-wrapper
	/*, #musee.le-saviez-vous:not(.detail) #page-wrapper*/
{
	width:   100vw;
	padding: 0;
	margin:  0 0 5vh 0;
	}

#musee.le-saviez-vous:not(.detail)  #page-wrapper{
	width: 90vw;
}

#musee.le-saviez-vous .titre-wrapper {
	width: 100%;
	margin-left: 0;
}

#accueil .home-gutter {
	width:   90vw;
	margin:  0 auto;
	padding: 5vh 0;
	}

.splash {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	width:           100%;
	height:          100%;
	color:           #333;
	text-decoration: none;
	aspect-ratio:    16/6;
	overflow:        hidden;
	
	}

.splash .gutter {
	width:        100%;
	aspect-ratio: 16/6;
	overflow:     hidden;
	
	}


.splash video, .splash img {
	width: 100%;
	
	}

.splash video {
	pointer-events: none;
	}


.cartouche {
	position: absolute;
	z-index:  100;
	}

.carrousel {
	/*height: 50vh;*/
	}

.carrousel .splash .cartouche {
	bottom:     0;
	
	
	text-align: left;
	padding:    20px 1px;
	}

.carrousel .splash .cartouche h3, .carrousel .splash .cartouche h4 {
	width: auto;
	}


.cartouche {
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	width:          100%;
	}

#hero .cartouche {
	overflow: visible;
	position: inherit;
	}

.cartouche h3 {
	
	font-size:      32px;
	font-weight:    700;
	text-transform: none;
	
	text-align:     right;
	
	}

.page-title {
	padding: 1em 0 0 0px;
	width:   90vw;
	margin:  0 auto;
	
	}

#hero .cartouche h3, .page-title h3 {
	font-weight: 800;
	font-size:   100%;
	
	/*transition: .2s ease-in-out transform;*/
	/*position: sticky;*/
	/*top: 40px;*/
	/*padding: 0 .2em;*/
	
	display:     inline-block;
	
	}

#hero .cartouche h3.expanded {
	/*position: fixed;*/
	/*top: 40px;*/
	padding:    .2em 0 .2em 110px;
	font-size:  32px;
	width:      100%;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
	}

#hero .cartouche, .bloc .cartouche {
	left:       0;
	text-align: left;
	width:      100%;
	}

.bloc .cartouche h5 {
	padding: 0;
	
	}


.cartouche h3, .cartouche h4, .cartouche h5 {
	width:          fit-content;
	align-self:     flex-end;
	/*background: white;*/
	
	/*padding: .1em .5em;*/
	text-transform: uppercase;
	margin:         2px 0;
	padding:        0 30px;
	font-weight:    700;
	font-size:      150%;
	text-align:     right;
	}

.cartouche h4 {
	font-weight: 500;
	font-size:   125%;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	
	.carrousel .splash .cartouche {
		padding: 4px;
		}
	
	.carrousel .splash .cartouche h3 {
		font-size:  16px;
		text-align: center;
		}
	
	.carrousel .splash .cartouche h4 {
		font-size:  14px;
		text-align: center;
		}
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	.splash .gutter {
		aspect-ratio: 16/12;
		}
	
	.splash {
		aspect-ratio: 4/3;
		}
	
	.cartouche h3, .cartouche h4, .cartouche h5 {
		font-size: 120%;
		padding:   0;
		}
	}

/* BLOCS
************************************************************************************************/
.blocs-wrapper {
	display:         inline-flex;
	justify-content: space-between;
	flex-wrap:       wrap;
	
	}

#accueil .blocs-wrapper {
	width:  70%;
	margin: 1vw 15% .7vw;
	}

.bloc {
	transition:    .2s ease all;
	margin-bottom: 1vw;
	}

.bloc:hover {
	text-decoration: none;
	transform:       scale(1.1);
	}

.bloc h3 {
	font-size:      140%;
	text-transform: uppercase;
	font-weight:    700;
	color:          white;
	}

.bloc .text {
	text-align: left;
	padding:    1em;
	color:      black;
	}

.bloc .gutter {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      center;
	height:          100%;
	}

.bloc.third {

	/*flex:         0 0 32.5%;*/
	/*aspect-ratio: 1/1;*/
	flex: 0 0 32.9%;
	aspect-ratio: 1/1;
	margin-bottom: .5vw;
	}


.bloc.full {
	flex:         0 0 100%;
	aspect-ratio: 1/1;
	height:       33vw;
	}

.bloc.sep {
	/*flex: 0 0 1vw;*/
	flex: 0 0 0;
	}

.bloc.two-thirds {
	flex:         1 1 calc(66% - .5vw);
	aspect-ratio: 3/2;
	height:       33vw;
	}


.publics .bloc.third {
	flex: 0 0 33%;
	}

.publics .bloc.two-thirds {
	flex: 0 0 66%;
	}

.publics .bloc.sep {
	flex: 0 0 0;
	}

.bloc.presentation {
	padding:         2em;
	font-size:       120%;
	text-align:      left;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#accueil .bloc.third, .bloc.two-thirds, .bloc.full {
	/*flex: 0 0 32%;*/
	/*aspect-ratio: 1/1;*/
	/*height: auto;*/
	

	/*width: 28vw;*/
	/*height: 28vw;*/
	/*width:         23vw;*/
	/*height:        23vw;*/
	flex: 0 0 32.9%;
	aspect-ratio: 1/1;
	margin-bottom: .5vw;
	}

/* Blocs texte */
.blocs-wrapper.text {
	flex:  0 0 100%;
	width: 100%;
	}

.blocs-wrapper.text .bloc {
	aspect-ratio: 1;
	}

.blocs-wrapper.text .bloc h5 {
	font-size: 90%;
	}

.blocs-wrapper.text .bloc .gutter {
	padding:         40px 10px;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	}

.blocs-wrapper.text .bloc h3 {
	color:       white;
	font-size:   1vw;
	text-align:  center;
	font-weight: 900;
	}


.blocs-wrapper.text .bloc .text {
	padding:   0;
	font-size: 90%;
	}

#main-col .blocs-wrapper.text a.evenement {
	font-size:   .8vw;
	padding:     0;
	color:       white;
	line-height: 1.2em;
	}

#main-col .blocs-wrapper.text a.evenement:hover {
	}

.blocs-wrapper.text .bloc .evenement:hover,
#main-col .blocs-wrapper.text a.evenement:hover p {
	text-decoration:  none;
	background-color: rgba(255, 255, 255, .2);
	}

.blocs-wrapper.text .bloc .evenement p.link {
	display:       flex;
	margin-bottom: 2px;
	}

.blocs-wrapper.text .bloc .evenement p.link i {
	width:  1em;
	margin: 4px 6px 0 0;
	}

.blocs-wrapper.text .bloc .evenement p.liml span {
	align-self: flex-start;
	}

#musee.le-saviez-vous .blocs-wrapper {
	width: 80%;
	margin: 0 10% ;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	.bloc.sep {
		display: none;
		}
	
	.bloc, .bloc.third, .bloc.full, .bloc.two-thirds {
		flex:         0 0 100%;
		aspect-ratio: 1;
		/*width: 100vw;*/
		height:       auto;
		margin:       20px 0 0 0;
		}
	
	#accueil .bloc.third, .bloc.two-thirds, .bloc.full {
		flex:         0 0 100%;
		aspect-ratio: 1/1;
		height:       auto;
		margin-top:   20px;
		/*height: 33vw;*/
		}
	
	.publics .bloc.third {
		aspect-ratio: 4/1;
		
		}
	
	.publics .bloc.two-thirds {
		aspect-ratio:  unset;
		margin-bottom: 1vw;
		}
	
	#main-col .blocs-wrapper.text a.evenement {
		font-size: 18px;
		}
	
	
	#accueil .blocs-wrapper {
		margin-bottom: 20px;
		}

	.blocs-wrapper.text {
		width: 80%;
		margin: 0 10% ;
	}
	
	.blocs-wrapper.text .bloc h3 {
		font-size: 4vw;
		}
		
	}

#hero {
	width:           100%;
	/*width: 90vw;*/
	padding:         5vh 2em;
	margin:          0vh auto;
	height:          fit-content;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	
	}

#hero.hasVisuel {
	/*height: 30vh;ANCIEN /
	/*height: 350px;*/
	/*aspect-ratio: 4/1;*/
	aspect-ratio: 3/1;
	
	}

#secondary-col .contenu {
	font-size: 90%;
	}

#secondary-col h3 {
	font-size: 120%;
	}

/* Titres */
.titre-wrapper {
	margin:     10px auto 20px;
	width:      100%;
	margin-top: 0px;
	}

h2.page-titre {
	text-transform: uppercase;
	font-size:      145%;
	font-weight:    600;
	/*color:rgba(0,0,0,.5);*/
	flex:           0 0 100%;
	margin-bottom:  0px;
	;
	}


#expositions h2.page-titre {
	margin: 0 0 0.1em 0;
	/*color:black;*/
	/*font-weight: 500;*/
	}

h3.page-surtitre {
	text-transform: uppercase;
	font-size:      100%;
	margin:         0;
	flex:           0 0 100%
	}


h3.page-soustitre {
	text-transform: uppercase;
	font-size:      105%;
	margin:         0 0 .5em 0;
	flex:           0 0 100%
	}

#expositions h3.page-soustitre {
	margin: 0 0 0.1em 0;
	}

.zoomable {
	background: white;
	}

.zoomable:hover:before {
	position:    absolute;
	float:       right;
	padding:     8px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:     "\f002";
	
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#blocs-wrapper {
		flex-direction: column;
		}
	
	.bloc {
		margin-bottom: 3em;
		}
	
	.bloc h3 {
		font-size: 6vw;
		}
	
	.bloc h5 {
		font-size: 6vw;
		}
	
	#hero.hasVisuel {
		aspect-ratio:        4/2.5;
		background-position: center;
		}
		
		
	}


/* UI
*************************************************************************************/
.bouton {
	padding:    .2em 0;
	text-align: left;
	transition: .2s ease transform;
	display:    flex;
	
	font-size:  100%;
	margin-top: 4px;
	}

.bouton i {
	margin: 4px 4px 0;
	}

.bouton:hover {
	text-decoration: none;
	}

.bouton-lien {
	width:   fit-content;
	padding: .2em .4em .2em 0;
	}

.bouton-lien:before {
	content:      "\f138";
	font-family:  "Font Awesome 5 Free";
	font-weight:  900;
	margin-right: .2em;
	left:         0;
	}

.video {
	aspect-ratio: 16/9;
	margin:       2vh 0 0;
	}

#musee .video {
	aspect-ratio: unset;
	}

.legende {
	font-size:  70%;
	text-align: right;
	}

.pill {
	border-radius:   100px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	width:           8em;
	height:          8em;
	font-size:       20px;
	padding:         10px;
	color:           white;
	z-index:         1500;
	text-align:      center;
	font-weight:     900;
	transform:       rotateZ(10deg);
	transition:      .5s ease-in-out transform;
	margin:          20px auto;
	}

#votre-visite .pill {
	margin: -40px auto 20px;
	}

.pill:hover {
	transform: scale(1.05) rotateZ(15deg);
	color:     white
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	.bouton {
		font-size: 100%;
		margin:    10px 0
		}
	
	.pill, #votre-visite .pill  {
		margin: 20px auto 20px;
		}
	}


/* Navigation */
.nav-button {
	position: fixed;

	/*left:             10px;*/
	margin-top: 10px;
	width:      1em;
	font-size:  200%;
	padding:    2px;
	text-align: center;
	transition: .2s ease transform;
	z-index:    100;
	}

#accueil .nav-button {
	position:   absolute;
	top:        23vh;
}

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

.nav-button.left {
	left:             10px;
	transform-origin: left center;
	}

.nav-button.right {
	right:            10px;
	transform-origin: right center;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	.nav-button {
		/*display: none;*/
		top:       13vh;
		font-size: 100%;
		}

	.detail .nav-button {
		display: none;
	}

	.activites .nav-button {
		top: 60px
	}
	}

/* LISTES
*************************************************************************************/

/* EXPOS
*************************************************************************************/
img.poster {
	width: 100%;
	}


#expositions #cols-wrapper {
	margin-top: 5vh
	}

#expositions.actuellement #cols-wrapper,
#expositions.actuellement .titre-wrapper,
#expositions.a-venir #cols-wrapper,
#expositions.a-venir .titre-wrapper {
	
	margin-bottom: 0;
	/*margin-top: 10px;*/
	}


#expositions #page-wrapper {
	margin-top: 20px;
	}

/* COLlECTIONS
*************************************************************************************/

#collections-wrapper h5 {
	font-size:      2vw;
	font-weight:    800;
	color:          white;
	text-transform: uppercase;
	width:          90vw;
	margin:         0 auto;
	padding-top:    1em;
	
	}

.collections-scroll {
	padding: 2vw 0 5vw;
	}

.collections-scroll-item {
	width:  auto;
	height: 20vw;
	}

.collections-scroll-item img {
	width:  auto;
	height: 100%;
	/*position: absolute;*/
	margin: 0 10px;
	}

#map {
	width:  100%;
	height: 30vh;
	margin: 2vh 0;
	}

#collections-carrousel-wrapper {
	width: 17vw;
	}

.collections-carrousel-item {
	}

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

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#collections-carrousel-wrapper {
		width: 100%
		}
		
	}

/* AGENDA
*************************************************************************************/

#agenda h4.mois {
	position:       sticky;
	top:            60px;
	padding:        .3em 0;
	background:     white;
	font-weight:    800;
	text-transform: lowercase;
	font-size:      200%;
	z-index:        0;
	/*color:rgba(0,0,0,.5)*/
	}

#filter {
	width:           80vw;
	margin:          25px auto;
	
	background:      white;
	display:         flex;
	justify-content: space-around;
	align-self:      flex-start;
	z-index:         1;
	}

#expositions #filter, #votre-visite #filter {
	justify-content: center;
	}

#filter .bouton {
	margin: 0 4px;
	cursor: pointer;
	}

#filter .bouton.selected {
	font-weight: 800;
	}

#filter .bouton:hover {
	background: white;
	}

#filter dl {
	/*margin-bottom: 0;*/
	
	}


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

#filter .dropdown dt {
	padding:    .5em 1em;
	text-align: right;
	transition: .2s ease transform;
	align-self: center;
	display:    block;
	width:      140px;
	}

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

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

#filter .dropdown ul {
	margin:        0 0 0 0;
	border-left:   2px solid black;
	border-right:  2px solid black;
	border-bottom: 2px solid black;
	
	}

#filter .dropdown dd {
	position:   relative;
	/*width:    170px;*/
	text-align: center;
	}

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

#filter .dropdown dt a span {
	cursor: pointer;
	/*display: block;*/
	/*color: black*/
	}

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

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

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

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#filter {
		position: initial;
		padding:  4px;
		}
	
	#filter .dropdown dt, #filter .dropdown dd {
		font-size: 90%;
		}
	
	#agenda h4.mois {
		font-size: 24px;
		top:       60px
		}
	}

.evenement.item.list, .actualite.item, .liste.item, .personne.item.list {
	padding:         0;
	margin:          1em 0;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	}


.evenement.item:hover, .actualite.item:hover, .liste.item:hover {
	text-decoration: none;
	
	}

.evenement.item .dates {
	flex:        0 0 100%;
	font-size:   125%;
	font-weight: 700;
	color:       black;
	margin:      0 0 .5em 0;
	}

.evenement.item .border {
	flex: 0 0 10px;
	
	}

.evenement.item .date {
	flex: 0 0 100%;
	}

.evenement.item .visuel, .actualite.item .visuel, .liste.item .visuel {
	flex:         0 0 15%;
	aspect-ratio: 1;
	align-self:   flex-start;
	/*margin-bottom: 6px;*/
	}



.evenement.item .visuel {
	padding:      10px;
	border-width: 5px;
	}

.evenement.item .date {
	display: flex;
	/*flex-direction: column;*/
	/*justify-content: center;*/
	/*text-align: center;*/
	color:   rgba(0, 0, 0, 1);
	}

.evenement.item .date h4 {
	font-size: 140%;
	/*font-weight: 900;*/
	}

.evenement.item .infos, .actualite.item .infos, .liste.item .infos {
	flex:            0 11 83%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding-left:    1em;
	}

.notre-equipe .liste.item .visuel {
	flex: 0 0 25%;
}

.notre-equipe .liste.item .infos {
	flex: 0 0 72%;
}

.notre-equipe .liste.item .infos .titre {
	font-size: 120%;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
 .notre-equipe .liste.item .infos .titre {
		font-size: 90%;
	}

	.notre-equipe .liste.item h5  {
		font-size: 80%;
	}
}

.publications.item .infos {
	flex: 0 0 63%;
	}

.publications.item {
	width: 100%;
	}

.publications.item .action {
	flex: 0 0 19%;
	
	}

.evenement.item .infos {
	flex: 1 1 80%
	}

.evenement.item .infos .categories {
	font-size:   120%;
	font-weight: 500;
	/* text-transform: lowercase;*/
	}

.evenement.item .infos .organisateur {
	font-size:      100%;
	font-weight:    500;
	/*text-transform: lowercase;*/
	}

.evenement.item .infos .titre, .actualite.item .infos .titre, .liste.item .titre {
	font-size:   150%;
	font-weight: 500;
	
	}

.evenement.item .infos .titre sup {
	text-transform: lowercase;
	}

.evenement #main-col, .evenement #secondary-col, #main-col.half, #secondary-col.half, #left-col, #right-col {
	
	flex:            0 0 49%;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	}

.detail .evenement .visuel {
	width:        100%;
	aspect-ratio: 1;
	}

.cat-externe, .cat-externe:hover {
	color:            black;
	background-color: #f0f0f0
	}

.cat-externe-bord {
	border: 1px solid #f0f0f0;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	.evenement.item.list {
		flex-direction: column;
		}
	
	.evenement.item .date {
		width:           100%;
		flex:            auto;
		aspect-ratio:    unset;
		display:         flex;
		justify-content: space-between;
		flex-direction:  row;
		
		}
	
	.evenement.item .date h4 {
		
		}
	
	.evenement.item .date h5 {
		margin-left: 1em;
		float:       right;
		}
	
	.evenement.item .visuel {
		flex:         auto;
		width:        100%;
		margin:       0;
		aspect-ratio: 1
		}
	
	.evenement.item .infos {
		flex:    auto;
		width:   100%;
		padding: .5em;
		}
	
	.evenement.item .infos .categories {
		font-size: 100%;
		}
	
	.evenement.item .infos .titre {
		font-size: 120%;
		/*width: 80vw;*/
		}
	
	.liste.item .visuel, .liste.item.infos, .publications.item .infos {
		flex:           0 0 100%;
		flex-direction: column;
		margin-bottom:  10px;
		
		}
	
	.publications.item .infos {
		padding: 1em 0 0 0;
		margin-bottom: 0;
		order:2
		}

	.publications.item .actions {
		order:1
	}

	.publications.item .visuel {
		aspect-ratio: unset;
	}

	.publications.item .visuel  img {
		width: 100%;
	}
}

/* PAGINATION */

#pagination {
	text-align:      center;
	margin-top:      1em;
	width:           100%;
	font-size:       120%;
	font-weight:     900;
	color:           white;
	display:         flex;
	justify-content: center;
	align-content:   flex-start;
	align-self:      flex-start;
	
	}

#pagination li {
	text-align:  center;
	width:       1.3em;
	font-weight: 900;
	display:     inline-block;
	font-size:   70%;
	margin:      4px;
	color:       white;
	}

#pagination li a {
	color:           white;
	display:         flex;
	justify-content: center;
	text-align:      center;
	width:           100%;
	font-weight:     200;
	transition:      .2s ease-in-out transform;
	}

#pagination li a:hover {
	text-decoration: none;
	transform:       scale(1.2);
	}

/* PUBLICS
*************************************************************************************/
@media (min-width: 1026px) {
	.bloc .mini-list-item {
		display:    none;
		transition: .5s ease-in-out all;
		}
	
	.bloc:hover .mini-list-item {
		display: block
		}
	}


/* GALERIES
*************************************************************************************/

#galerie {
	margin:    24px 0;
	display:   flex;
	flex-wrap: wrap;
	}

#galerie a {
	flex:         0 0 48%;
	margin:       2% 2% 0 0;
	overflow:     hidden;
	aspect-ratio: 4/2.5;
	}

#galerie img {
	width: 100%;
	/*height: 100%;*/
	}

.sl-wrapper .sl-close {
	color: white
	}

.sl-wrapper .sl-navigation button.sl-prev, .sl-wrapper .sl-navigation button.sl-next{
	font-size: 200%;
}

/* PARTENAIRES
*************************************************************************************/
.logo-container {
	display:   flex;
	flex-wrap: wrap;
	}

.logo-item {
	width:           10vw;
	text-align:      center;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.logo-item img {
	width: 100%;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	.logo-item {
		width: 30vw;
		}
	}

/* FORMULAIRES
*************************************************************************************/
.error {
	display: none;
	}

#esp-form {
	margin-bottom: 64px
	}


#esp-form input, #esp-form label {
	width: 100%;
	}

.third {
	flex: 0 0 30%
	}

.half {
	flex: 0 0 49%
	}

#esp-form label {
	font-weight: bold;
	}

#esp-form input[type=checkbox] {
	width: 1em;
	}

#esp-form .help_text {
	font-size:  90%;
	font-style: italic;
	}

#esp-form input[type=checkbox], #esp-form input[type=radio] {
	width: 1em;
	}

/* PIED DE PAGE
*************************************************************************************/
#footer {
	display:   flex;
	flex-wrap: wrap;
	font-size: 16px;
	color:     white;
	padding:   2vw 5%;
	
	
	}

#accueil #footer {
	margin-top: 0;
	}

#footer a {
	color: white
	}

#footer #svg-logo {
	width: 7vw;
	}

#footer > div:first-child {
	flex: 0 0 20%;
	}

#footer > div {
	padding: 1em 3em 1em 0;
	flex:    0 0 35%;
	
	}

#footer i {
	margin:    5px;
	font-size: 150%;
	}


#footer p {
	margin: 0;
	}

#footer h4 {
	font-weight: 700;
	font-size:   120%;
	}

#footer #credits {
	flex:       0 0 100%;
	font-size:  70%;
	text-align: right;
	opacity:    .5;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#footer {
		flex-direction: column;
		flex-wrap:      nowrap;
		font-size:      4vw;
		}
	
	#footer p {
		font-size: 18px;
		}
	
	#footer #svg-logo {
		display: none
		}
	
	#footer > div {
		flex: 0 0 100%
		}
		
	}

/* LETTRE INFO
*************************************************************************************/
.btn-newsletter, .btn-personnalise {
	cursor: pointer;
	}

#btn-newsletter, #btn-personnalise {
	position:        absolute;
	top:             40px;
	right:           90px;
	border-radius:   100px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	width:           8em;
	height:          8em;
	font-size:       20px;
	padding:         10px;
	color:           white;
	z-index:         1500;
	text-align:      center;
	line-height:     1.1em;
	font-weight:     700;
	transform:       rotateZ(10deg);
	transition:      .5s ease-in-out transform;
	text-shadow:     0 10px 40px rgba(0, 0, 0, .7);
	}

#btn-newsletter:hover, #btn-personnalise {
	transform:       scale(1.05) rotateZ(15deg);
	text-decoration: none;
	}

.nav-on #btn-newsletter, .nav-on  #btn-personnalise {
    display: none;
}

#lettre-info-wrapper {
	position:   fixed;
	top:        0;
	left:       0;
	width:      100vw;
	height:     100vh;
	display:    none;
	background: rgba(0, 0, 0, .5);
	
	}

#lettre-info-wrapper .bouton {
	background:    rgba(0, 0, 0, .2);
	padding:       .2em .5em;
	border-radius: 199px;
	}

#lettre-info-wrapper.show {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	z-index:         200;
	}

#lettre-info-modal {
	width:         50vw;
	height:        20vw;
	margin:        0 auto;
	border-radius: 8px;
	box-shadow:    0 10px 20px black;
	
	padding:       2em;
	
	}

#lettre-info-modal .modal-gutter {
	
	flex-direction:  column;
	justify-content: space-between;
	display:         none;
	width:           100%;
	height:          100%;
	color:           black;
	}


#lettre-info-modal .visible {
	display: flex;
	}

#lettre-info-modal input {
	width: 100%;
	}

.bouton-bar {
	display:         flex;
	justify-content: space-between;
	}

#lettre-info-modal a {
	cursor: pointer;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#btn-newsletter, #btn-personnalise {
		font-size: 12px;
		z-index:   1700;
		padding:   0;
		width:     7em;
		height:    7em;
		top:       20px
		}
	
	
	#lettre-info-modal {
		width:  90vw;
		height: auto;
		}
	
	#btn-newsletter, #btn-personnalise {
		font-size: 3vw;
		top:       20px;
		right:     90px
		}
	
	.nav-on #btn-newsletter {
		display: none;
		}
	}


/* BMG */
#bible-wrapper {

	width:      65vw;
	margin:     40px auto 50px;
}

#bible-wrapper a {
	color: rgb(17, 35, 49)
}

#bible-wrapper #main-col.bible a{
	color: rgb(196, 255, 53)
}