/* NAVIGATION */
#header {
	height: 60px;
	}

#header h1 {
	height:  60px;
	width:   60vw;
	margin:  0px 0 0 10px;
	padding: 0;
	}

#btn-menu {
	display:        block;
	z-index:        510;
	padding:        20px;
	color:          rgb(157, 35, 57);
	text-transform: uppercase;
	}

#btn-menu:before {
	font-family:  FontAwesome;
	content:      "\f0c9 ";
	margin-right: 5px;
	
	}

nav {
	display:    none;
	background: white;
	transition: 10s opacity ease;
	opacity:    0;
	}

.nav #wrapper {
	height:     100vh;
	max-height: 100vh;
	width:      100vw;
	overflow:   hidden;
	position:   absolute;
	top:        0;
	left:       0;
	
	}

.nav nav {
	width:           100vw;
	height:          100vh;
	position:        absolute;
	top:             0;
	left:            0;
	z-index:         5000;
	background:      white;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	
	}

nav.transition {
	background: rgba(157, 35, 57, 0.93);
	z-index:    505;
	display:    flex;
	opacity:    1;
	}

.nav #btn-menu {
	color: white;
	}

.nav #btn-menu:before {
	font-family: FontAwesome;
	content:     "\f00d ";
	}

nav input[type=text] {
	width:      80%;
	margin-top: 1em;
	}

nav form div {
	display: flex;
	justify-content: center;
}

nav form button {
	padding: .5em 0 0 .5em;
}

#header nav a {
	color:      white;
	text-align: center;
	font-size:  10vw;
	}

#header nav a:hover {
	border-bottom: 8px solid transparent;
	border-top:    8px solid transparent;
	}

#subnav {
	font-size:                  12px;
	border:                     0;
	width:                      100vw;

	margin:                     0 auto;
	overflow-x:                 scroll;
	overflow-y:                 hidden;
	height:                     32px;
	border:                     0;
	font-size:                  18px;
	background:                 #f9f9f9;
	margin:                     -2vh 0 5vh 0;
	-webkit-overflow-scrolling: touch;
	}

#subnav ul {
	height:     auto;
	padding:    0;
	background: white;
	width:      fit-content;
	text-align: left;
	display:    flex;
	flex-wrap:  nowrap;
	height:     52px;
	padding: 0;
	}

#subnav li {
	margin:     .3em 0 0 0;
	height:     18px;
	width:      max-content;
	list-style: none;
	}

#subnav li a {
	padding: 0em .5em;
	margin:0;
	height:  18px;
	width:   fit-content;

	}

#subnav li a.active {
	color: rgba(157, 35, 57, 1);
	}

#btn-retour {
	margin: -10px 0 0 10px;
	}

/* ACCUEIL
*************************************************************************************************************************/
#accueil .content {
	margin: 0;
	padding: 0;
	}

#catchphrase {
	font-size: 4vw;
	width:     100vw;
	padding:   1em 1em;
	height: 20vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

.slide h4 {
	font-size: 16px;
	}

.backdrop-image {
	width: 120%;
	height: 120%;
	margin: -10% -10% 0 0;
	filter:blur(10px);
	}

#publics a {
	font-size: 3.5vw;
	padding: .5em .5em;
	}

.dialog-item .sentence {
	font-size: 6vw;
	}

#btn-more {
	position: absolute;
	width: 10vw;
	height: 10vw;
	font-size:7vw;
	top:calc(68vh );
	}

.more #btn-more {
	transform: translateY(-67vh);
	line-height: 1.5em;
	}

#sentences {
	width: 100vw;
	}

#splash {
	top:60px
	
	}

#splash.more {
	position: absolute;
	z-index:  500;
	height:   calc(100vh - 60px);
	}

#dialogs .sentence-list a  {
	font-size: 4vw;
	}

button.slick-next, .slick-prev {
	display: none;
	}

/* ACTUALITES
*************************************************************************************************************************/
#actualites .content {
	width: auto;
	}

.actualite.item {
	flex-direction: column;
	width:          90vw;
	margin:         10vw 0;
	border-bottom:  1px dotted silver
	}

.actualite.item .img {
	height:        calc(90vw * 0.33);
	margin-bottom: 2vh;
	}

.actualite.item .descr {
	font-size:     12px;
	margin-bottom: 6px;
	}

.actualite.item span {
	padding: .5em 0;
	order:   2;
	}

.actualite.item h3 {
	order:     0;
	font-size: 24px;
	}

.actualite.item h5 {
	order:     3;
	font-size: 18px;
	}

#pagination {
	width: 80vw;
	}

.header {
	margin:        0 0 0 -5vw;
	width:         100vw;
	border-radius: 0;
	}

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

#page {
	display:        flex;
	flex-direction: column;
	width:          100vw;
	}

#left-col {
	margin: 0;
	}

.content {
	margin: 0 20px;
	}

.albums .content {
	margin: 0;
	}

.content h2 {
	font-size: 24px;
	}

.content h3 {
	font-size: 32px;
	}

.content h4 {
	font-size: 22px;
	
	}

.content h5 {
	font-size: 18px;
	
	}

.content h6 {
	width:         100vw;
	margin:        5vh -20px;
	border-radius: 0;
	
	}

.content h6 p {
	font-size:   18px;
	line-height: 1.5em;
	padding:     0 1em;
	
	}

.content p, .content li {
	font-size:   16px;
	line-height: 1.3em;
	}

.content img {
	max-width: 90vw;
	}

.renvoi {
	font-size: 11px;
	}

.list.item {
	font-size:   16px;
	line-height: 1.3em;
	}

.list.item.personnes {
	width: 100%;
	}

.thumb, .photo.thumb {
	width:  90vw;
	height: calc(90vw * .5);
	}

.albums .content {
	width:  80vw;
	margin: 0 0 0 5vw;
	}

.gallery-image div {
	font-size: 16px;
	margin:    .5em auto;
	
	}

.sl-overlay {
	opacity: .95;
	
	}

.thematique-liste {
	display: none;
	}

/* ACTUS */
.header-content {
	top: -40vh;
	}

.header-content h3 {
	font-size: 24px;
	
	}

.publication {
	font-size: 11px;
	margin:    2em 0 2em 2em;
	}

.infos {
	max-width:  90vw;
	padding:    10px;
	margin-top: 2vh;
	}

.content .infos h4 {
	font-size: 18px;
	}

.search-item {
	font-size:   14px;
	line-height: 1.4em;
	}

/* CONTACT
*************************************************************************************************************************/
#frm {
	font-size:   16px;
	padding:     .5em;
	line-height: 1.3em;
	}

#frm input, #frm textarea {
	width:     100%;
	max-width: 100%;
	}

/* BOUTIQUE
*************************************************************************************************************************/

#produits-liste {
	flex-direction: column;
	}

.produit-item .image {
	width:  90vw;
	height: 90vw;
	}

.produit-item .prix {
	font-size:   14px;
	line-height: 1.2em;
	}

.content.produit-item .image {
	flex: 0 0 100%
	}

.content.produit-item .infos {
	flex: 0 0 100%
	}

/* FOOTER
*************************************************************************************************************************/

#footer {
	display:        flex;
	flex-direction: column;
	}

#footer .item {
	flex: 1 1 100%;
	}

#footer img {
	width: 50vw;
	}