/* 
Muances colours
purple: #47243E
blue: #0089AE
gold: #D2AD32
light gold: #E2CA7C
lightest gold #EEE0B1
lightester gold #f8f2e0
white: #FFF
 */

body
{
	padding: 0;
	background-color: #FFF;
	font-size: 1em;
	color: #1A1A1A;
	font-family: "Roboto Flex", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
}

div#intro { margin-top: 90px; }
div#pre-propos, div#pre-temoin, div#pre-faq { height: 90px; }

div#muances, h2#action
{
	font-family: "Whisper", serif;
	font-weight: 400;
	font-style: normal;
}

h1, h2, h3, h4, h5, div#muances span#triangle, h1#call, h2 span.subtitle, div#call2action h2,div.button h2, div.button2 h2, div.button3 h2
{
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

/* Base: 0 - 767px (Mobile) */
img#muancesHeaderMob { display: block; }
img#muancesHeader { display: none; }

div#title h1#call
{
	font-size: 1.6em;
	line-height: 115%;
	color: #FFF;
}

div#slogan h2#action { display: none; }

div#slogan h2#tagline
{
	display: block;
	font-size: 20px;
	color: #FFF;
}

h2.mutitle
{
	text-align: right;
	margin: 20px 10px;
	font-size: 1.6em;
	color: #47243E;
	line-height: 120%;
}

div.cadre h1.big, div.cadre h2.first-title
{
	text-align: right;
	font-size: 2.2em;
	color: #D2AD32;
	line-height: 120%;
	margin: 20px 10px;
}

h1.left, h2.left { text-align: left; }

div.cadre p, div.cadre li
{
	line-height: 140%;
	margin: 4px 0 8px 0;
	padding: 0 10px;
}

/* Tablet: 768px+ */

@media (min-width: 768px)
{
	img#muancesHeaderMob { display: none; }
	img#muancesHeader { display: block; }
	div#title h1#call { font-size: 2.3em; }
	div#slogan h2#action { display: block; }
	
	div#slogan h2
	{
		font-size: 50px;
		line-height: 55%;
		color: #FFF;
	}
	
	div#slogan h2 span.subtitle
	{
		font-size: 20px;
		color: #FFF;
	}
	
	div#slogan h2#tagline { margin-top: 10px; }
	h2.mutitle { font-size: 2.1em; }
	h1.big, h2.first-title { font-size: 2.6em; }
	div.rightpad p, div.rightpad li, div.rightpad h5 { padding-right: 365px; }
	div.leftpad p, div.leftpad li, div.leftpad h5 { padding-left: 365px; }
	h2.mutitle { font-size: 2.4em; }
	div.cadre h1.big, div.cadre h2.first-title { font-size: 2.8em; }
}

div.profile h4
{
	font-size: 1.4em;
	color: #D2AD32;
	line-height: 130%;
	margin-bottom: 5px;
}

article.legal-content h2
{
	font-size: 1.4em;
	color: #D2AD32;
	line-height: 130%;
	margin: 15px 10px 5px 10px;
}

div.cadre h4, div.cadre h5
{
	font-size: 1.4em;
	color: #D2AD32;
	line-height: 130%;
	margin: 0 10px 5px 10px;
}

blockquote { font-style: italic; }
p.plus { font-size: 1.2em; }
strong { font-weight: 500; }

/* The navigation bar */
div#nav-header
{
	position: fixed;
	z-index: 1;
	top: 0;
	padding: 0 10px;
	margin: 0;
	width: 100%;
	background-color: #FFF;
	border-bottom: 2px solid #D2AD32;
}

#logo { margin: 0; }

div#img-bg
{
	background-color: rgb(226, 217, 227);
	position: relative;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: -2;
	overflow: hidden;
}

/* Base: 0 - 767px (Mobile) */
div#title
{
	display: block;
	position: absolute;
	width: fit-content;
	top: 30px;
	left: 30px;
}

div#slogan
{
	display: block;
	position: absolute;
	width: 100%;
	bottom: 40px;
	text-align: center;
}

div#call2action
{
	position: absolute;
	width: fit-content;
	top: 20px;
	left: 20px;
	z-index: 10;
}

div#call2action h2
{
	font-size: 1.2em;
	line-height: 115%;
	color: #D2AD32;
}

img.right-image, img.left-image
{
	clear: both;
	margin: 5px 0 10px 0;
	width: 100vw;
}

div#FAQ { padding: 0 10px; }

/* Tablet: 768px+ */

@media (min-width: 768px)
{
	div#slogan
	{
		width: 100%;
		bottom: 40px;
		padding-right: 20px;
		text-align: right;
	}
	
	img.right-image
	{
		float: right;
		clear: right;
		margin: 5px 0 10px 15px;
		width: 350px;
	}
	
	img.left-image
	{
		float: left;
		clear: left;
		margin: 5px 15px 10px 0;
		width: 350px;
	}
}

/* Laptop: 1024px+ */

@media (min-width: 1024px)
{
	div#intro { margin-top: 70px; }
	
	div#title
	{
		top: 60px;
		left: 80px;
	}
	
	div#slogan
	{
		display: block;
		position: absolute;
		width: fit-content;
		bottom: 60px;
		right: 80px;
		text-align: right;
	}
	
	div#call2action
	{
		position: absolute;
		width: fit-content;
		top: 40px;
		left: 60px;
		z-index: 10;
	}
	
	div#call2action h2 { font-size: 2em; }
}

h2#last-title
{
	line-height: 130%;
	font-variation-settings: "wdth" 100;
}

div.button h2, div.button2 h2, div.button3 h2
{
	font-weight: 400;
	font-size: 18px;
	line-height: 50%;
}

div.button a
{
	display: block;
	width: fit-content;
	margin: -22px auto 30px auto;
	padding: 15px 35px 15px 35px;
	border-radius: 30px;
	background-color: #FFF;
	border: 2px solid #D2AD32;
	color: #D2AD32;
	text-decoration: none;
}

div.button-nav a, div.button-nav-menu a
{
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: 15px 35px 15px 35px;
	border-radius: 30px;
	background-color: #FFF;
	border: 2px solid #D2AD32;
	color: #D2AD32;
	text-decoration: none;
	max-width: 160px;
}

div.button2 a
{
	display: block;
	width: fit-content;
	margin: 10px auto 40px auto;
	padding: 15px 35px 15px 35px;
	border-radius: 30px;
	background-color: #FFF;
	border: 2px solid #D2AD32;
	color: #D2AD32;
	text-decoration: none;
}

div.button3 a
{
	display: block;
	width: fit-content;
	margin: -24px auto 80px auto;
	padding: 15px 35px 15px 35px;
	border-radius: 30px;
	background-color: #FFF;
	border: 2px solid #D2AD32;
	color: #D2AD32;
	text-decoration: none;
}

div.button a:hover, div.button2 a:hover, div.button3 a:hover, div.button-nav a:hover, div.button-nav-menu a:hover
{
	background-color: #E2CA7C;
	color: #FFF;
}

div.button a:active, div.button2 a:active, div.button3 a:active, div.button-nav a:active, div.button-nav-menu a:active
{
	background-color: #EEE0B1;
	color: #FFF;
}

div.cadre ul
{
	margin-left: 0;
	padding-left: 20px;
	list-style: circle inside;
}

p.right { text-align: right; }

/* h2.left-title { text-align: left; } */
div.cadre
{
	margin: 15px auto 0 auto;
	padding: 0;
	max-width: 960px;
	height: fit-content;
}

div.cadre-vid
{
	/* background-color: cornsilk; */
	margin: 30px auto 0 auto;
	max-width: 960px;
	height: fit-content;
	border-top: 2px solid #D2AD32;
	border-bottom: 2px solid #D2AD32;
}

div#video-bg
{
	position: relative;
	top: 0;
	left: 0;
	/* height: 100vh; */
	width: 100%;
	z-index: -2;
	overflow: hidden;
}

#muancesVideo
{
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}

div#temoignages
{
	background-color: #fcfaf4;
	padding: 30px;
	border-radius: 0 50px;
	border: 2px solid #f8f2e0;
	margin-bottom: 30px;
	clear: both;
}

div#temoignages p
{
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: italic;
	font-size: 1.5em;
	font-variation-settings: "wdth" 100;
	padding: 0 70px;
}

video.temoin
{
	border: 2px solid #f8f2e0;
	border-radius: 12px;
	margin-bottom: 20px;
}

video.right
{
	float: right;
	clear: right;
}

video.left
{
	float: left;
	clear: left;
}

div#contact
{
	height: fit-content;
	padding: 30px 0 30px 0;
	clear: both;
	border-top: 2px solid #D2AD32;
	border-bottom: 15px solid #47243E;
	background-color: #47243E;
}

div.first-div { margin-top: 110px; }

img#profile
{
	float: left;
	clear: left;
	border-right: 20px solid #FFF;
}

.clearfix::after
{
	content: "";
	clear: both;
	display: table;
}

/* Mobile-first breakpoints */
/* Base: 0 - 767px (Mobile) */
.container { padding: 16px; }

/* Tablet: 768px+ */

@media (min-width: 768px)
{
	.container
	{
		padding: 24px;
		max-width: 720px;
	}
}

/* Laptop: 1024px+ */

@media (min-width: 1024px)
{
	.container
	{
		padding: 32px;
		max-width: 960px;
	}
}

/* Desktop: 1280px+ */

@media (min-width: 1280px)
{
	.container
	{
		max-width: 1200px;
		margin: 0 auto;
	}
}

/* Footer layout */
.widget.icon-list--layout-inline .widget-container, .widget:not(:has(.widget-container)) .widget-container { overflow: hidden; }

.widget .icon-list-items.inline-items
{
	display: flex;
	flex-wrap: wrap;
	margin-inline: -8px;
}

.widget .icon-list-items.inline-items .inline-item { word-break: break-word; }
.widget .icon-list-items.inline-items .icon-list-item { margin-inline: 8px; }

.widget .icon-list-items.inline-items .icon-list-item:after
{
	border-width: 0;
	border-inline-start-width: 1px;
	border-style: solid;
	height: 100%;
	inset-inline-end: -8px;
	inset-inline-start: auto;
	position: relative;
	width: auto;
}

.widget .icon-list-items
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.widget .icon-list-item
{
	margin: 0;
	padding: 0;
	position: relative;
	color: #fff;
}

.widget .icon-list-item:after
{
	inset-block-end: 0;
	position: absolute;
	width: 100%;
}

.widget .icon-list-item, .widget .icon-list-item a
{
	align-items: var(--icon-vertical-align, top);
	display: flex;
	font-size: inherit;
}

.widget .icon-list-icon + .icon-list-text
{
	align-self: center;
	padding-inline-start: 5px;
}

.widget .icon-list-icon
{
	display: flex;
	inset-block-start: var(--icon-vertical-offset, initial);
	position: relative;
	fill: #fff;
	align-items: top;
}

.widget .icon-list-icon svg
{
	height: var(--e-icon-list-icon-size, 1em);
	width: var(--e-icon-list-icon-size, 1em);
}

.widget .icon-list-icon i
{
	font-size: var(--e-icon-list-icon-size);
	width: 1.25em;
}

.widget.widget-icon-list .icon-list-icon { text-align: var(--e-icon-list-icon-align); }
.widget.widget-icon-list .icon-list-icon svg { margin: var(--e-icon-list-icon-margin, 0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0); }
.widget.list-item-link-full_width a { width: 100%; }
.widget.align-center .icon-list-item, .widget.align-center .icon-list-item a { justify-content: center; }

ul.icon-list-items li.icon-list-item
{
	display: block;
	margin-bottom: 20px;
}

.widget.align-center .icon-list-item:after { margin: auto; }
.widget.align-center .inline-items { justify-content: center; }

.widget.align-start .icon-list-item, .widget.align-start .icon-list-item a
{
	justify-content: start;
	text-align: start;
}

.widget.align-start .inline-items { justify-content: start; }

.widget.align-end .icon-list-item, .widget.align-end .icon-list-item a
{
	justify-content: end;
	text-align: end;
}

.widget.align-end .icon-list-items { justify-content: end; }
.widget:not(.align-end) .icon-list-item:after { inset-inline-start: 0; }
.widget:not(.align-start) .icon-list-item:after { inset-inline-end: 0; }

/* Mobile-first breakpoints */
/* Base: 0 - 767px (Mobile) */
div#address
{
	width: 250px;
	float: left;
	margin: 0 0 30px 20px;
}

div#google-map
{
	width: 354px;
	float: left;
	margin: 0 0 30px 20px;
	border: 2px #D2AD32 solid;
}

div#sitemap
{
	width: 250px;
	float: left;
	margin: 0 0 30px 20px;
	color: #fff;
}

/* Laptop: 1024px+ */

@media (min-width: 1024px)
{
	div#address { margin: 0 0 0 30px; }
	div#google-map, { margin: 0 0 60px 50px; }
	div#sitemap { margin: 0 0 60px 50px; }
}

/* Legal links */
.legal-content a, a.rollover { color: #D2AD32; }

.legal-content a:hover, a.rollover:hover
{
	color: #E2CA7C;
	text-decoration: underline;
}

div.linkage a:hover { color: #E2CA7C; }

div.cadre article.legal-content ul
{
	padding-left: 20px;
	list-style: circle inside;
}
