html { margin: 0px; overflow-x: hidden; }
body { margin: 0px; overflow: hidden;}

html::-webkit-scrollbar, body::-webkit-scrollbar  { display: none !important; }
html, body { -ms-overflow-style: none !important; scrollbar-width: none !important; }

.smallSupr { display: block; }
.mobilSupr { display: block; }
.justMobil { display: none; }
.inlineMobil { display: none; }

/* WIDTH */

.contenu {
	position: relative;
	display: inline-block;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
  word-spacing: 0em;
	overflow: visible;
}

/* PAGE CONTENU */

.width-full {
	display: table;
	position: relative;
	width: 100vw;
	height: auto;
	min-width: 100vw;
	table-layout: fixed;
	word-spacing: -4em;
	margin: 0 auto;
	overflow: visible;
	vertical-align: middle;
}

.width-max {
	display: table;
	position: relative;
	width: calc(100vw - 200px);
	margin: 0 100px;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	padding: 0;
}

.width-gauche {
	display: inline-table;
	position: relative;
	width: calc(35vw - 120px);
	margin: 0 60px;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	padding: 0;
	vertical-align: middle;
}

.width-droite {
	display: inline-table;
	position: relative;
	width: 65vw;
	margin: 0;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	padding: 0;
	vertical-align: middle;
}

/* MARGES */
.padding-top { padding-top: 60px; }
.padding-bottom { padding-bottom: 60px; }

/* BOX // WIDTH */
.entier {width: calc((100% / 1) - 40px); margin: 0px 20px; }
.entier-full {width: calc((100% / 1) - 0px); margin: 0px 0px; }
.demi {width: calc((100% / 2) - 40px ); margin: 0px 20px; }
.demi-full {width: calc((100% / 2) - 0px ); margin: 0px 0px; }
.tier {width: calc((100% / 3) - 40px); margin: 0px 20px; }
.tier-full {width: calc((100% / 3) - 0px); margin: 0px 0px; }
.deuxtier {width: calc(2*(100% / 3) - 40px); margin: 0px 20px; }
.deuxtier-full {width: calc(2*(100% / 3) - 0px); margin: 0px 0px; }
.quart {width: calc((100% / 4) - 40px); margin: 0px 20px; }
.quart-full {width: calc((100% / 4) - 0px); margin: 0px 0px; }
.troisquart {width: calc(3*(100% / 4) - 20px); margin: 0px 40px; }
.troisquart-full {width: calc(3*(100% / 4) - 0px); margin: 0px 0px; }
.cinquieme {width: calc((100% / 5) - 40px); margin: 0px 20px; }
.cinquieme-full {width: calc((100% / 5) - 0px); margin: 0px 0px; }
.sixieme {width: calc((100% / 6) - 40px); margin: 0px 20px; }
.sixieme-full {width: calc((100% / 6) - 0px); margin: 0px 0px; }
.cinqsixieme {width: calc(5*(100% / 6) - 40px); margin: 0px 20px; }
.cinqsixieme-full {width: calc(5*(100% / 6) - 0px); margin: 0px 0px; }
.deuxcinquieme {width: calc(2*(100% / 5) - 40px); margin: 0px 20px; }
.deuxcinquieme-left {width: calc(2*(100% / 5) - 20px); margin: 0px 20px 0 0; }
.deuxcinquieme-full {width: calc(2*(100% / 5) - 0px); margin: 0px 0px; }
.troiscinquieme {width: calc(3*(100% / 5) - 40px); margin: 0px 20px; }
.troiscinquieme-full {width: calc(3*(100% / 5) - 0px); margin: 0px 0px; }
.huitieme {width: calc((100% / 8) - 40px); margin: 0px 20px; }

/* FONT // PARA */
.font-cap { text-transform: uppercase; }
.font-underline { text-decoration: underline; }
.font-italique { font-style: italic; }
.para-left { text-align: left; }
.para-justify { text-align: justify; }
.para-center { text-align: center; }
.para-right { text-align: right; }

/* ALIGNEMENT */
.vertical-align-top { vertical-align: top; }
.vertical-align-bottom { vertical-align: bottom; }

/* ESPACE VIDE */
.espace-vide-10 { height: 10px; width: 100%; }
.espace-vide-20 { height: 20px; width: 100%; }
.espace-vide-30 { height: 30px; width: 100%; }
.espace-vide-40 { height: 40px; width: 100%; }
.espace-vide-50 { height: 50px; width: 100%; }
.espace-vide-60 { height: 60px; width: 100%; }
.espace-vide-70 { height: 70px; width: 100%; }
.espace-vide-100 { height: 100px; width: 100%; }
.espace-vide-200 { height: 200px; width: 100%; }

/* BANDES IMAGES */
.bande-20 { height: 20vh; }
.bande-30 { height: 30vh; }
.bande-35 { height: 35vh; }
.bande-40 { height: 40vh; min-height: 400px; }
.bande-50 { height: 50vh; min-height: 500px; }
.bande-60 { height: 60vh; min-height: 600px; }
.bande-70 { height: 70vh; min-height: 700px; }

.image-back {
	background-size: cover;
	background-position: center;
}

/* COLOR */

.background-sombre { background-color: var(--color-corpo-projet); }
.background-vert { background-color: var(--color-selecteur-dispo); }

/* P // H */

sup {
	font-size: 60%;
	line-height: 0;
}

h2 {
	color: var(--color-corpo-projet);
	font-family: 'avecRegular', serif;
	font-size: 4.0vw;
	line-height: 4.6vw;
}

h3 {
	color: var(--color-corpo-projet);
	font-family: 'avecRegular', serif;
	font-size: 3.2vw;
	line-height: 3.6vw;
}

p { color: var(--color-corpo-projet); }

a { text-decoration: none; color: inherit; }

p.titre {
	font-family: 'sansRegular', sans-serif;
	font-size: 1.2vw;
	line-height: 1.8vw;
	text-transform: uppercase;
	padding: 20px 0;
}

p.titre i { font-family: 'sansLight', sans-serif; }

p.paragraphe {
	font-family: 'sansLight', sans-serif;
	font-size: 20px;
	line-height: 30px;
	padding: 5px 0;
	text-align: justify;
} p.paragraphe b { font-family: 'sansMedium', sans-serif; }

p.hide {
	display: none;
}

p.citation {
	font-family: 'avecRegular', sans-serif;
	font-size: 6vw;
	line-height: 6.6vw;
	text-transform: uppercase;
	padding: 10px 0;
	letter-spacing: 10px;
	text-align: center;
	color: var(--color-gris-clair);
}

.citation-deco-gauche {
	position: absolute;
	width: 24vw;
	height: 24vw;
	top: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('../svg/deco-citation-gauche.svg');
	transform: translate(-30%, -10%);
}

.citation-deco-droite {
	position: absolute;
	width: 24vw;
	height: 24vw;
	bottom: 0;
	right: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('../svg/deco-citation-droite.svg');
	transform: translate(20%, 15%);
}

p.citation span {
	display: inline-block;
	font-family: 'sansRegular', sans-serif;
	font-size: 1.2vw;
	line-height: 1.8vw;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--color-corpo-projet);
}

p.dispo-nombre {
	display: block;
	font-family: 'avecRegular', sans-serif;
	font-size: 12vw;
	line-height: 12vw;
}

p.dispo-type {
	display: block;
	font-family: 'sansRegular', sans-serif;
	text-transform: uppercase;
	font-size: 1.4vw;
	line-height: 2vw;
	padding: 10px 0;
}

p.dispo-surface {
	display: block;
	font-family: 'sansLight', sans-serif;
	text-transform: uppercase;
	font-size: 1.0vw;
	line-height: 1.4vw;
	padding: 10px 0;
	letter-spacing: 1px;
}

a.bouton-full {
	display: block;
	font-family: 'sansMedium', sans-serif;
	font-size: 0.8vw;
	line-height: 1.4vw;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	padding: 10px 0;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
	margin: 10px 0;
	color: var(--color-corpo-projet);
	background-color: white;
	transition-duration: 0.3s;
}

a.bouton-full:hover {
	cursor: pointer;
	background-color: var(--color-corpo-projet);
	color: white;
}

a.open {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url('../svg/pictogramme-texte.svg');
	background-size: 100%;
	background-position: center;
	cursor: pointer;
}

a.bouton-auto {
	font-family: 'sansMedium', sans-serif;
	font-size: 0.8vw;
	line-height: 0.8vw;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	padding: 10px 20px;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
	margin: 20px 0;
	color: var(--color-corpo-projet);
	background-color: white;
	transition-duration: 0.3s;
	cursor: pointer;
	content: "en savoir plus";
}

a.bouton-auto:hover {
	cursor: pointer;
	background-color: var(--color-corpo-projet);
	color: white;
}

a.en-savoir-plus, a.en-savoir-moins { display: inline-block; }
a.en-savoir-plus.hide, a.en-savoir-moins.hide { display: none; }

.border {
	border: 2px solid var(--color-corpo-projet);
}

/* IMAGES */

.image-ronde {
	border: 3px solid white;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 0 30px 0;
	width: 8vw;
	height: 8vw;
	margin: 0 auto 40px auto;
}

.image-ronde img {
	padding: 0;
	margin: 0;
	width: 100%;
}

/* INTRODUCTION */

#illustration {
	position: relative;
	width: 100vw;
	height: 40vh;
	min-height: 300px;
	background-color: var(--color-corpo-projet);
	overflow: hidden;
	transition-duration: 0.8s;
	transition-timing-function: ease-in;
	background-size: cover;
}

body.home #illustration { height: 60vh; }

#illustration.full { height: 80vh; }

body.home #illustration.full { height: 80vh; }

#illustration video {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -80%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

/* MENU PRINCIPAL */

#menu-mobil {
	display: none;
	overflow: hidden;
}

#menu-principal {
	position: relative;
	display: table;
	width: 90vw;
	margin: 30px 5vw 30px 5vw;
}

#menu-principal ul {
	position: relative;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#menu-principal ul li {
	position: relative;
	display: inline-table;
	vertical-align: middle;
	height: 100%;
	position: relative;
}

#menu-principal ul li p {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-transform: uppercase;
}

#menu-principal ul li p img {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

#menu-principal ul:nth-child(1) { text-align: left; }
#menu-principal ul:nth-child(1) li:nth-child(2) { padding: 20px 50px; }

#menu-principal ul:nth-child(1) li:nth-child(2) p span.titre {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: 'sansRegular', sans-serif;
	font-size: 0.7vw;
	line-height: 0.7vw;
	letter-spacing: 1px;
	transform: rotate(90deg) translateX(0%) translateY(-50%);
	transform-origin: top left;
	transition-duration: 0.6s;
	cursor: pointer;
} #menu-principal ul:nth-child(1) li:nth-child(2) p:hover span.titre {
	opacity: 1;
	transform: rotate(90deg) translateX(120%) translateY(-50%);
}

#menu-principal ul:nth-child(1) li:nth-child(2) p span.burger {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%) rotate(0deg);
	background-image: url('../svg/pictogramme-menu.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px;
	cursor: pointer;
} #menu-principal ul:nth-child(1) li:nth-child(2) p:hover span.burger {
	transform: translate(-50%, -50%) rotate(90deg);
} #menu-principal ul:nth-child(1) li:nth-child(2) p span.burger.hide {
	background-image: url('../svg/pictogramme-croix.svg');
}

#menu-principal ul:nth-child(1) li:nth-child(2) p span.deco {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 210px;
	height: 310px;
	transform: translate(-62%, 15%);
	background-image: url('../svg/deco-spir-1.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	cursor: pointer;
	transition-duration: 0.6s;
} #menu-principal ul:nth-child(1) li:nth-child(2) p:hover span.deco {
	transform: translate(-62%, 65%);
}

#menu-principal ul:nth-child(1) a.bouton-brochure {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: auto;
	height: auto;
	background-color: var(--color-corpo-projet);
	padding: 20px 30px;
	text-align: center;
	color: white;
	font-family: 'sansRegular', sans-serif;
	font-size: 14px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 6px;
	transform: translate(-50%, 180%);
	cursor: pointer;
	transition-duration: 0.4s;
	z-index: 100;
}

#menu-principal ul:nth-child(1) a.bouton-brochure::before {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--color-corpo-projet);
	left: 50%;
	top: 0%;
	transform: translate(-50%, -50%) rotate(45deg);
	transition-duration: 0.4s;
}

#menu-principal ul:nth-child(1) a.bouton-brochure:hover, #menu-principal ul:nth-child(1) a.bouton-brochure:hover::before {
	background-color: var(--color-selecteur-dispo);
}

#menu-principal ul:nth-child(2) { text-align: left; display: none; }
#menu-principal.show ul:nth-child(2) { display: table-cell;; }
#menu-principal ul:nth-child(2) li { cursor: pointer; }
#menu-principal ul:nth-child(2) li.separation {
	display: inline-table;
	width: 2px;
	height: 30px;
	background-color: var(--color-corpo-projet);
	cursor: default;
}

#menu-principal ul:nth-child(2) li p {
	padding: 0 30px;
	font-family: 'sansMedium', sans-serif;
	font-size: 0.8vw;
	line-height: 0.8vw;
	letter-spacing: 3px;
}

#menu-principal ul:nth-child(2) li p span.survol {
	position: absolute;
	display: block;
	font-size: 70%;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(0%);
	opacity: 0;
	transition-duration: 0.3s;
}

#menu-principal ul:nth-child(2) li:hover p span.survol { transform: translateX(-50%) translateY(250%); opacity: 1; }

#menu-principal ul:nth-child(3) li {
	padding: 0 20px;
}

#menu-principal ul:nth-child(3) li p {
	font-family: 'avecRegular', sans-serif;
	padding: 14px 18px 8px 18px;
	font-size: 1.6vw;
	line-height: 2vw;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
	letter-spacing: 4px;
	background-color: white;
	transition-duration: 0.3s;
	cursor: pointer;
}

#menu-principal ul:nth-child(3) li p:hover {
	background-color: var(--color-corpo-projet);
	color: white;
}

#menu-principal ul:nth-child(3) li p span.survol {
	font-family: 'sansRegular', sans-serif;
	position: absolute;
	display: block;
	font-size: 50%;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(0%);
	opacity: 0;
	transition-duration: 0.3s;
}

#menu-principal ul:nth-child(3) li:hover p span.survol { transform: translateX(-50%) translateY(50%); opacity: 1; }
#menu-principal ul:nth-child(3) li:hover p:hover span.survol { color: var(--color-corpo-projet); }

#menu-principal ul:nth-child(3) li span.info {
	position: absolute;
	background-color: white;
	top: 0px;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	width: 150%;
	padding: 20px 20px 20px 20px;
	font-family: 'sansRegular', sans-serif;
	font-size: 0.8vw;
	line-height: 1.2vw;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-corpo-projet);
	box-shadow: inset 0 2px 0 0 var(--color-corpo-projet);
}

#menu-principal ul:nth-child(4) li p {
	font-family: 'sansRegular', sans-serif;
	font-size: 0.7vw;
	line-height: 0.7vw;
	letter-spacing: 1px;
}

/* CONTROL VIDEO */

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video {
	position: absolute;
	background-color: white;
	top: 0%;
	left: 50%;
	transform: translateX(-50%) translateY(-150%);
	box-shadow: inset 0 -2px 0 0 var(--color-corpo-projet);
	padding: 10px;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video p.titre-control {
	position: relative;
	font-family: 'sansRegular', sans-serif;
	font-size: 10px;
	line-height: 10px;
	text-align: center;
	width: 100%;
	letter-spacing: 1px;
	margin: 8px 0 6px 0;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul {
	display: table;
	table-layout: fixed;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li {
	display: table-cell;
	padding: 0px;
	cursor: pointer;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li p {
	height: 30px;
	width: 30px;
	margin: 0 10px;
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
	box-shadow: inset 0 0 0 0 white !important;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li:hover p { background-color: white; }

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video span.fleche {
	position: absolute;
	background-color: white;
	width: 20px;
	height: 20px;
	left: 50%;
	top: 0%;
	transform: translateY(-50%) translateX(-50%) rotate(45deg);
	transition-duration: 0.4s;
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video:hover span.fleche {
	transform: translateY(-20%) translateX(-50%) rotate(45deg);
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-son p {
	background-image: url("../svg/pictogramme-video-son-on.svg");
}
#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-son.switch p {
	background-image: url("../svg/pictogramme-video-son-off.svg");
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-lecture p {
	background-image: url("../svg/pictogramme-video-lecture-off.svg");
}
#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-lecture.switch p {
	background-image: url("../svg/pictogramme-video-lecture-on.svg");
}

#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-size p {
	background-image: url("../svg/pictogramme-video-size-on.svg");
}
#menu-principal ul:nth-child(1) li:nth-child(2) div.control-video ul li.control-video-size.switch p {
	background-image: url("../svg/pictogramme-video-size-off.svg");
}

/* LEGENDES */

.legende-bulle {
	position: absolute;
	left: 50%;
	top: 0%;
	background-color: white;
	transform: translateX(-50%) translateY(-80%);
	max-width: 400px;
} .legende-bulle.bottom { top: 100%; left: 75%; transform: translateX(-50%) translateY(-20%); }

.legende-bulle p {
	padding: 20px 40px 20px 40px;
	font-family: 'sansRegular', sans-serif;
	font-size: 0.8vw;
	line-height: 1.2vw;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-corpo-projet);
	box-shadow: inset 0 2px 0 0 var(--color-corpo-projet);
	text-align: center;
} .legende-bulle.bottom p { box-shadow: inset 0 -2px 0 0 var(--color-corpo-projet); }

.legende-bulle::before {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	background-color: white;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
} .legende-bulle.bottom::before { top: 0%; }

/* FOOTER */

#footer p {
	display: block;
	text-align: center;
	font-family: 'sansRegular', sans-serif;
	font-size: 0.9vw;
	line-height: 1.4vw;
	text-transform: uppercase;
	letter-spacing: 2px;
}

#footer p.white { color: white; }

#footer .width-max, #credits .width-max { width: calc(100vw - 400px); margin: 0 200px; }

#footer a.bouton-full {
	width: 80%;
	margin: 0 10%;
	box-shadow: inset 0 0 0 2px white;
	color: white;
	background-color: var(--color-corpo-projet);
}

#footer a.bouton-full:hover {
	background-color: white;
	color: var(--color-corpo-projet);
}

#credits p {
	font-family: 'sansRegular', sans-serif;
	font-size: 0.6vw;
	line-height: 1vw;
	text-transform: uppercase;
	letter-spacing: 3px;
}

img.logo-client-1 { width: 100%; }
img.logo-client-3 { width: 85%; margin: 0 0 10px 0; }
img.logo-client-2 { width: 80%; }

/* DISPONIBILITE */

#disponibilite {
	position: absolute;
	top: 0px;
	left: 0px;
	transform: translateX(-200%);
	word-spacing: 0em;
}

#disponibilite ul {
	position: relative;
	display: block;
	width: auto;
	height: 50px;
}

#disponibilite li {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 50px;
	padding: 0;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
}

#disponibilite li span {
	position: absolute;
	bottom: 0%;
	width: 100%;
	background-color: red;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
}

#disponibilite li.dispo span { background-color: var(--color-selecteur-dispo); height: 100%; }
#disponibilite li.reser span { background-color: var(--color-selecteur-reser); height: 0%; }
#disponibilite li.vendu span { background-color: var(--color-selecteur-vendu); height: 0%; }

#disponibilite ul p {
	display: block;
	position: relative;
	text-align: center;
	font-family: 'sansRegular', sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 6px 0 0 0;
}

/* DECORATION */

.decoration {
	position: absolute;
	transform: translate(-50%, -50%);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	transition-duration: 0.3s;
}

.decoration.deco2 {
	width: 210px; height: 210px;
	background-image: url("../svg/deco-spir-2.svg");
	top: 210px; right: -236px;
}

.decoration.deco3 {
	width: 125px; height: 95px;
	background-image: url("../svg/deco-spir-3.svg");
	top: 65px; right: -230px;
}

.decoration.deco4 {
	width: 530px; height: 295px;
	background-image: url("../svg/deco-spir-4.svg");
	top: -32px; right: -230px;
}

.decoration.deco5 {
	width: 395px; height: 240px;
	background-image: url("../svg/deco-spir-5.svg");
	top: -100px; right: -150px;
}

.decoration.deco6 {
	width: 230px; height: 205px;
	background-image: url("../svg/deco-spir-6.svg");
	top: 150px; right: -280px;
}

.decoration.deco7 {
	width: 215px; height: 345px;
	background-image: url("../svg/deco-spir-7.svg");
	top: 75px; right: 89%;
}

.decoration.deco8 {
	width: 415px; height: 295px;
	background-image: url("../svg/deco-spir-8.svg");
	top: 375px; right: -330px;
}

/* ANNONCE */

#annonce-mobil {
	display: none;
}

/* GALERIE IMAGE */

.galerie-image {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 10000;
	transform: translateY(-200vh);
	transition-duration: 1s;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet);
}

.galerie-image.open {
	transform: translateY(0vh);
}

.galerie-image ul.images {
	position: absolute;
	display: block;
	top: 0px;
	width: calc(100% - 160px);
	height: calc(100% - 160px);
	margin: 80px;
}

.galerie-image ul.images li {
	position: absolute;
	display: none;
	top: 0px;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: white;
}

.galerie-image ul.images li.active { display: block; }

.galerie-image ul.vignettes {
	position: absolute;
	text-align: center;
	bottom: 10px;
	display: table;
	width: 80%;
	margin: 0 10%;
	height: 60px;
	border: none;
	transform: translateY(3px);
}

.galerie-image ul.vignettes li {
	display: inline-flex;
	width: 80px;
	height: 60px;
	box-shadow: inset -10px 0 0 0 white, inset 10px 0 0 0 white;
	margin: 0;
	background-size: cover;
	background-position: center;
	transition-duration: 0.4s;
	cursor: pointer;
	border: none;
	filter: grayscale(100);
}

.galerie-image ul.vignettes li:hover {
	width: 100px;
}

.galerie-image ul.vignettes li.active {
	width: 200px;
	filter: grayscale(0);
	cursor: default;
}

.galerie-image .bouton-avant, .galerie-image .bouton-apres {
	position: absolute;
	display: block;
	bottom: calc(50% - 40px);
	width: 80px;
	height: 80px;
	cursor: pointer;
	background-position: 50% center;
	background-size: 30px;
	transition-duration: 0.4s;
}

.galerie-image .bouton-avant {
	left: 0px;
	background-image: url('../svg/pictogramme-fleche-gauche.svg');
	box-shadow: 0px 0 0 0 var(--color-corpo-projet);
}

.galerie-image .bouton-apres {
	right: 0px;
	background-image: url('../svg/pictogramme-fleche-droite.svg');
	box-shadow: 0px 0 0 0 var(--color-corpo-projet);
}

.galerie-image .bouton-avant:hover,
.galerie-image .bouton-apres:hover { box-shadow: 0px 0 0 0 var(--color-corpo-projet); }

div.bouton-close {
	position: absolute;
	top: 0vh;
	right: 0px;
	width: 80px;
	height: 80px;
	background-image: url('../svg/pictogramme-croix.svg');
	background-size: 30px;
	background-position: center;
	box-shadow: 0px 0 0 0 var(--color-corpo-projet);
	cursor: pointer;
	transition-duration: 0.4s;
}

div.bouton-close:hover {
	box-shadow: 0px 0 0 0 var(--color-corpo-projet);
}

/* MINI GALERIE */

ul.mini-galerie-legendes {
	display: inline-block;
	margin-top: 20px;
	vertical-align: middle;
}

ul.mini-galerie-legendes li { display: none; }
ul.mini-galerie-legendes li.active { display: inline-block; }

ul.mini-galerie-legendes li p {
	font-family: 'sansRegular', sans-serif;
	font-size: 0.8vw;
	line-height: 1.2vw;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-corpo-projet);
} ul.mini-galerie-legendes li p b { font-family: 'sansMedium', sans-serif; }

ul.mini-galerie-coches {
	display: inline-block;
	margin: 20px 0 0 20px;
	vertical-align: middle;
}

ul.mini-galerie-coches li {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 2px;
	box-shadow: inset 0 0 0 2px var(--color-corpo-projet), inset 0 0 0 4px white;
	background-color: white;
	transition-duration: 0.3s;
	cursor: pointer;
}

ul.mini-galerie-coches li.active {
	background-color: var(--color-corpo-projet);
}

.gal { display: none !important; }
.gal.active { display: inline-block !important; }

/* TABELAUX */

ul.legende {
	display: table;
}

ul.legende li {
	display: table-cell;
	vertical-align: middle;
}

ul.legende li p {
	display: inline-block;
	font-family: 'sansRegular', sans-serif;
	font-size: 1.2vw;
	line-height: 1.8vw;
	text-transform: uppercase;
	padding: 10px 0;
	letter-spacing: 1px;
}

ul.legende li p img {
	width: 40px;
	margin: 10px;
}

table.simple {
	width: 100%;
	table-layout: fixed;
}

table.simple tr td {
	border: 2px solid var(--color-corpo-projet);
	text-align: center;
}

table.simple tr td p {
	display: inline-block;
	font-family: 'sansLight', sans-serif;
	font-size: 1.4vw;
	line-height: 2vw;
	text-transform: uppercase;
	padding: 10px;
	letter-spacing: 1px;
}

table.simple tr td p b {
	font-family: 'sansMedium', sans-serif;
}

span.legende-image {
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2px solid var(--color-corpo-projet);
	background-color: white;
	font-family: 'sansRegular', sans-serif;
	font-size: 18px;
	line-height: 12px;
	padding: 20px;
}

/* BORDER */

.border-blue-bottom { box-shadow: 0 30px 0 0 var(--color-corpo-projet); }
.border-white-bottom { box-shadow: 0 30px 0 0 white; }

/* PAGES */

body.page #illustration-video,
body.page div.control-video {
	display: none;
}

body.page.projet #illustration {
	background-image: url("../image/galerie-image-exter-1.jpg");
	background-position: center 50%;
}

body.page.inscriptions #illustration {
	background-image: url("../image/galerie-image-exter-1.jpg");
	background-position: center 50%;
}

body.page.situation #illustration {
	background-image: url("../image/galerie-image-ville-1.jpg");
	background-position: center 70%;
}

body.page.commerces #illustration {
	background-image: url("../image/galerie-image-com-2.jpg");
	background-position: center 50%;
}

body.page.contact #illustration {
	background-image: url("../image/galerie-image-exter-2.jpg");
	background-position: center 25%;
}

/* POP-UP CONTACT */


#popup-contact {
	position: fixed;
	width: auto;
	top: -500vh;
	left: 50%;
	border: 2px solid white;
	box-shadow: 0 0 0 40px var(--color-corpo-projet);
	z-index: 10000;
	background-color: var(--color-corpo-projet);
	transform: translate(-50%, -50%);
	width: 60vw;
	max-width: 1000px;
	transition-duration: 0.6s;
}

#popup-contact.open {
	top: -500vh;
}

body.home #popup-contact.open {
	top: 50%;
}

.open-pop-contact {
	cursor: pointer;
}

#popup-contact ul {
	display: table;
	width: calc(100% - 160px);
	table-layout: fixed;
	padding: 80px;
}

#popup-contact ul li {
	display: table-cell;
	text-align: center;
	padding: 0 40px;
}

#popup-contact ul li p.pop-titre {
	color: white;
	font-family: 'sansRegular', sans-serif;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0px;
	text-transform: uppercase;
	transition-duration: 0.4s;
	padding: 4px 0 10px 0;
}

#popup-contact ul li p.pop-legende {
	color: white;
	font-family: 'sansRegular', sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition-duration: 0.4s;
}

#popup-contact ul li a.bouton-auto {
	padding: 10px 50px;
	background-color: var(--color-corpo-projet);
	border: 2px solid white;
	color: white;
	box-shadow: none;
}

#popup-contact ul li a.bouton-auto:hover {
	color: var(--color-corpo-projet);
	background-color: white;
	box-shadow: none;
}

#popup-contact div.bouton-fermeture-pop {
	position: absolute;
	right: 0px;
	top: 0px;
	border-bottom: 2px solid white;
	border-left: 2px solid white;
	cursor: pointer;
	background-color: white;
	transition-duration: 0.4s;
}

#popup-contact div.bouton-fermeture-pop p {
	display: inline-block;
	color: var(--color-corpo-projet);
	padding: 10px 20px;
	font-family: 'sansRegular', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition-duration: 0.4s;
}

#popup-contact div.bouton-fermeture-pop:hover { background-color: var(--color-corpo-projet); }
#popup-contact div.bouton-fermeture-pop:hover p { color: white; }

/* GOOGLE */

.grecaptcha-badge { display: none; }