html { margin: 0px; overflow-x: hidden; }
body {
	margin: 0px 0px 0 0px;
	overflow-x: hidden;
	background-color: var(--color-body-back);
	border-top: 6px solid var(--color-senzi);
}

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

/* WIDTH */

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

/* PAGE ACCUEIL */

.width-full {
	display: table;
	position: relative;
	width: 100%;
	height: auto;
	background-color: rgba(0,0,0,0);
	table-layout: fixed;
	word-spacing: -4em;
	margin: 0px auto;
	overflow: visible;
	box-shadow: inset 0 0 0 0px #E57F7F;
	vertical-align: middle;
}

.width-max {
	display: table;
	position: relative;
	width: 80%;
	margin: 0 auto;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	box-shadow: inset 0 0 0 0px #7EC1AA;
	padding: 20px 0;
}

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

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

.no-background-mobil { background-image: default; }
.justMobil { display: none !important; }
.justScreen { display: inline-block !important; }

/* COLONNES */
.deuxColones { column-count: 2; column-gap: 40px; }

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

/* FONT // FAMILY */
.font-medium, b { font-family: 'sansMedium', sans-serif; }
.font-regular { font-family: 'sansRegular', sans-serif; }
.font-light { font-family: 'sansLight', sans-serif; }
.font-thin { font-family: 'sansThin', sans-serif; }

.font-cap { text-transform: uppercase; }
.font-underline { text-decoration: underline; }
.font-italique { font-style: italic; }

.left { text-align: left !important; }
.justify { text-align: justify; }
.center { text-align: center; }
.right { text-align: right; }

.para-center-mobil { text-align: default; }
@media screen and (max-width: 1000px) { .para-center-mobil { text-align: center !important; } }

.no-background-mobil { background: default; }
@media screen and (max-width: 1000px) {	.no-background-mobil { background: none !important; } }

.size-mini { font-size: 10px !important; line-height: 16px !important; }
.size-petit { font-size: 12px !important; line-height: 14px !important; }
.size-grand { font-size: 20px !important; line-height: 30px !important; }
.size-big { font-size: 30px !important; line-height: 40px !important; }
.size-ultra { font-size: 80px !important; line-height: 70px !important; }

.letter-spacing-1 { letter-spacing: 1px; }
.letter-spacing-2 { letter-spacing: 2px; }
.letter-spacing-4 { letter-spacing: 4px; }

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

/* SEPARATION */
.espace-vide-20 { display: block; height: 20px; }
.espace-vide-30 { display: block; height: 30px; }
.espace-vide-40 { display: block; height: 40px; }
.espace-vide-60 { display: block; height: 60px; }
.espace-vide-100 { display: block; height: 100px; }

/* BANDES */
.bande-20 {	height: 20vh; min-height: 200px; padding: 0 0; transition-duration: 0.4s; }
.bande-30 {	height: 30vh; min-height: 300px; padding: 0 0; transition-duration: 0.4s; }
.bande-40 {	height: 40vh; min-height: 400px; padding: 0 0; transition-duration: 0.4s; }
.bande-50 {	height: 50vh; min-height: 500px; padding: 0 0; transition-duration: 0.4s; }
.bande-70 {	height: 70vh; min-height: 600px; padding: 0 0; transition-duration: 0.4s; }

/* COULEUR */

.fond-clair { background-color: white; }
.fond-fonce { background-color: var(--color-gris-fonce); }

.fond-fonce h1,
.fond-fonce h2,
.fond-fonce h3,
.fond-fonce h4,
.fond-fonce h5,
.fond-fonce h6,
.fond-fonce p { color: white; }

.fond-clair h1,
.fond-clair h2,
.fond-clair h3,
.fond-clair h4,
.fond-clair h5,
.fond-clair h6
.fond-clair p { color: var(--color-gris-fonce); }


/* PAGES */

html.selecteur #menu-principal ul:nth-child(2) li:nth-child(3) table tr td:nth-child(1) { display: none; }

/* TEXTES */

sup { line-height: 0; }

p {
	font-family: 'sansLight', sans-serif;
	color: var(--color-gris-fonce);
	padding: 5px 1vw 15px 5px;
	font-size: 0.9vw;
	line-height: 1.8vw;
}

p.decalage {
	padding: 5px 1vw 15px 3vw;
}

a { text-decoration: none; color: unset; cursor: pointer; transition-duration: 0.4s; }

h2 {
	position: relative;
	font-family: 'avecRegular', serif;
	font-size: 5vw;
	line-height: 5.5vw;
	padding: 60px 1vw 20px 1vw;
}

h3 {
	position: relative;
	font-family: 'avecBold', serif;
	font-size: 1.6vw;
	line-height: 2.4vw;
	letter-spacing: 0.04vw;
	padding: 10px 1vw 20px 3vw;
}

h4 {
	position: relative;
	font-family: 'avecLight', serif;
	font-size: 2.5vw;
	line-height: 3.5vw;
	padding: 10px 10%;
}

.background-fonce h4 {
	color: white !important;
}

h5 {
	font-family: 'sansThin', sans-serif;
	text-transform: uppercase;
	padding: 20px 60px;
	font-size: 2.6vw;
	line-height: 3vw;
	letter-spacing: 0.4vw;
	color: var(--color-gris-fonce);
}

h6 {
	font-family: 'sansMedium', sans-serif;
	text-transform: uppercase;
	padding: 20px 60px;
	font-size: 1.2vw;
	line-height: 1.6vw;
	letter-spacing: 0vw;
	color: var(--color-gris-fonce);
}

/* INTRODUCTION */

#introduction {
	position: relative;
	width: 100vw;
	height: 90vh;
	background-image: url('../image/galerie-image-exter-1.jpg');
	background-position: center;
	background-size: cover;
}

#introduction span {
	z-index: 1;
}

a.bouton-video {
	position: absolute;
	left: 10vw;
	top: 70%;
	width: 5vw;
	height: 5vw;
	border-radius: 50%;
	transform: translate(-50% , -50%);
	box-shadow: inset 0 0 0 1px white;
	transition-duration: 0.4s;
}

a.bouton-video:hover {
	box-shadow: inset 0 0 0 3px white;
}

a.bouton-video::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%,-50%);
	display : inline-block;
	height : 0;
	width : 0;
	border-top : 15px solid transparent;
	border-bottom : 15px solid transparent;
	border-left : 30px solid white;
	transition-duration: 0.4s;
}

a.bouton-video:hover::before {
	border-top : 10px solid transparent;
	border-bottom : 10px solid transparent;
	border-left : 20px solid white;
}

a.bouton-video span {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	font-size: 1vw;
	line-height: 2vw;
	letter-spacing: 0.1vw;
	text-transform: uppercase;
	color: white;
	font-family: 'sansMedium', sans-serif;
	transform: translate(100%, -50%);
	transition-duration: 0.4s;
}

a.bouton-video:hover span {
	transform: translate(120%, -50%);
}

a.telechargements {
	display: block;
	padding: 20px 30px;
	color: white;
	font-size: 1vw;
	line-height: 1.8vw;
	letter-spacing: 0.2vw;
	text-transform: uppercase;
	background-color: var(--color-gris-fonce);
	transition-duration: 0.4;
	text-align: center;
	font-family: 'sansMedium', sans-serif;
}

a.telechargements:hover {
	background-color: var(--color-gris-moyen);
}

/* MENU PRINCIPAL */

#menu-principal-mobil {
	display: none;
}

ul#menu-principal {
	display: block;
	position: fixed;
	display: table;
	table-layout: fixed;
	width: 94%;
	margin: 0 3%;
	top: 10%;
	z-index: 10;
	background-color: rgba(255,255,255,0);
	transition-duration: 0.2s;
}

ul#menu-principal.back-color {
	background-color: #2a2d37;
	box-shadow: 0 0 0 3vw #2a2d37;
	top: 3vw;
}

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

ul#menu-principal li:nth-child(1) {
	width: 32%;
}

/*
ul#menu-principal li:last-of-type {
	width: 20%;
}
*/

ul#menu-principal li.lien {
	width: 6%;
}

ul#menu-principal li.lien p {
	padding: 10px 10px 0 10px;
}

ul#menu-principal li p a {
	position: relative;
	color: white;
	text-transform: uppercase;
	font-size: 0.65vw;
	letter-spacing: 0.1vw;
	line-height: 1.4vw;
}

ul#menu-principal li.scroll p a {
	box-shadow: inset 0 0 0 0 white;
	border-bottom: 1px solid white;
	padding: 10px 0;
	font-family: 'sansRegular', sans-serif;
}

ul#menu-principal li.scroll p a::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	display : inline-block;
	height : 0;
	width : 0;
	border-top : 10px solid white;
	border-right : 10px solid transparent;
	border-left : 10px solid transparent;
	transform: translate(-50%, -10px);
	opacity: 0;
	transition-duration: 0.4s;
}

ul#menu-principal li.scroll:hover p a::before {
	transform: translate(-50%, 0%);
	opacity: 1;
}

ul#menu-principal li.separation {
	width: 5%;
}

ul#menu-principal li.lien p a img {
	width: 40%;
}

ul#menu-principal li.lien p a span {
	display: block;
	position: absolute;
	top: 0%;
	left: 50%;
	font-size: 0.6vw;
	line-height: 1vw;
	letter-spacing: 0.04vw;
	transform: translate(-50%, -250%);
	transition-duration: 0.4s;
	font-family: 'sansRegular', sans-serif;
	opacity: 0.8;
}

ul#menu-principal li.lien:hover p a span {
	opacity: 1;
	transform: translate(-50%, -350%);
}

#filtre-noir {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	top: 0px;
	left: 0px;
}

/* GALERIE IMAGE */

#galerie-image {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-gris-fonce);
	z-index: 10000;
	transform: translateY(-200vh);
	transition-duration: 0.3s;
}

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

#galerie-image ul#images {
	position: absolute;
	display: block;
	top: 0px;
	width: 100%;
	height: 100%;
}

#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 {
	display:none
	/*
	position: absolute;
	text-align: center;
	bottom: calc( 5% - 40px + 1.5vw );
	display: table;
	width: 80%;
	margin: 0 10%;
	height: 80px;
	border: none;
	*/
}

#galerie-image ul#vignettes li {
	display: inline-flex;
	width: 60px;
	height: 60px;
	margin: 0 10px;
	background-size: cover;
	background-position: center;
	transition-duration: 0.4s;
	cursor: pointer;
	border: none;
	filter: grayscale(100%);
	box-shadow: inset 0 0 0 1px white, inset 0 0 0 1px var(--color-gris-fonce);
	vertical-align: middle;
}

#galerie-image ul#vignettes li:hover {
	filter: grayscale(0%);
	box-shadow: inset 0 0 0 1px white, inset 0 0 0 10px var(--color-gris-fonce);
}

#galerie-image ul#vignettes li.active {
	width: 160px;
	cursor: default;
	filter: grayscale(0%);
	box-shadow: inset 0 0 0 3px white, inset 0 0 0 10px var(--color-gris-fonce);
}

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

#galerie-image #bouton-avant { left: 0vw; }
#galerie-image #bouton-apres { right: 0vw; }

#galerie-image #bouton-avant::before, #galerie-image #bouton-apres::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 40%;
	transition-duration: 0.2s;
}

#galerie-image #bouton-avant::before { box-shadow: inset 2px 2px 0 0px white; transform: translate(-25%, -50%) rotate(-45deg); }
#galerie-image #bouton-apres::before { box-shadow: inset -2px -2px 0 0px white; transform: translate(-75%, -50%) rotate(-45deg); }

#galerie-image #bouton-avant:hover::before { box-shadow: inset 4px 4px 0 0px white; }
#galerie-image #bouton-apres:hover::before { box-shadow: inset -4px -4px 0 0px white; }

/* GALERIE CONTACT */

#galerie-contact {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 10000;
	transform: translateY(-200vh);
	transition-duration: 0.3s;
	overflow: scroll;
}

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

#galerie-contact #galerie-contact-contenu {
	width: 100%;
	margin: 0;
}

#galerie-contact::-webkit-scrollbar  { display: none !important; }
#galerie-contact { -ms-overflow-style: none !important; scrollbar-width: none !important; }

#galerie-contact #galerie-contact-contenu h2 {
	padding: 30px 0 20px 0;
}

#galerie-contact #galerie-contact-contenu p,
#galerie-contact #galerie-contact-contenu h3 {
	color: var(--color-bleu-cardis);
}

#galerie-contact #galerie-contact-contenu p img {
	width: 50%;
	margin: 30px 0;
}

#galerie-contact #galerie-contact-contenu #formulaire {
	width: 50%;
	margin: 0 auto;
}

/* GALERIE VIDEO */

#galerie-video {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: black;
	z-index: 10000;
	transform: translateY(-200vh);
	transition-duration: 0.3s;
}

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

#galerie-video video {
	width: 100vw;
	height: 100vh;
}

/* BOUTON CLOSE */

div.bouton-close {
	position: absolute;
	top: 0;
	right: 0px;
	width: 100px;
	height: 100px;
	background-color: white;
	background-position: center;
	cursor: pointer;
	transition-duration: 0.4s;
	background-color: rgba(0,0,0,0);
}

div.bouton-close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 1px;
	background-color: white;
	transition-duration: 0.2s;
}

div.bouton-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
div.bouton-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
div.bouton-close:hover span:nth-child(1) { height: 3px; transform: translate(-50%, -50%) rotate(-45deg); }
div.bouton-close:hover span:nth-child(2) { height: 3px; transform: translate(-50%, -50%) rotate(45deg); }

#galerie-contact div.bouton-close span {
	background-color: var(--color-gris-fonce);
}

/* CONTENU */

ul.situation {
	position: relative;
	width: 80%;
	margin: 50px 10%;
}

ul.situation li {
	display: block;
	vertical-align: middle;
	border-bottom: 1px solid white;
}

ul.situation li p {
	font-size: 1.0vw;
	line-height: 1.2vw;
	padding: 10px;
}

ul.situation li p img {
	width: 40px;
}

ul.spa {
	position: relative;
	width: 80%;
	margin: 50px 10%;
}

ul.spa li {
	display: block;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-gris-fonce);
}

ul.spa li p {
	font-size: 0.8vw;
	line-height: 2vw;
	padding: 10px;
	text-transform: uppercase;
}

ul.spa li p span {
	font-size: 160%;
}

/* GALERIE EN LIGNE */

ul.galerie-en-ligne li { display: none; }
ul.galerie-en-ligne li.active { display: inline-block; }

ul.legendes-en-ligne li { display: none; }
ul.legendes-en-ligne li.active { display: inline-block; }

ul.legendes-en-ligne li p {
	color: var(--color-gris-fonce);
	text-transform: uppercase;
	letter-spacing: 3px;
}

.bouton-suiv {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	box-shadow: inset 4px 0 0 0 var(--color-gris-fonce);
	background-image: url('../svg/picto-suivant.svg');
	background-position: center;
	background-size: 30%;
	background-color: var(--color-gris-light);
	transition-duration: 0.4s;
}

.bouton-suiv:hover {
	box-shadow: inset 12px 0 0 0 var(--color-gris-fonce);
}

/* EQUIPE */

p.nom {
	text-transform: uppercase;
	padding: 30px 0 5px 0 !important;
	text-align: center;
	font-size: 11px !important;
	line-height: 14px !important;
	letter-spacing: 4px;
	font-family: 'sansMedium', sans-serif !important;
}

p.fonction {
	text-transform: uppercase;
	padding: 5px 0 10px 0 !important;
	text-align: center;
	font-size: 11px !important;
	line-height: 14px !important;
	letter-spacing: 4px;
}

/* FOOTER */

#courtiers p, #footer p, #galerie-contact p {
	color: var(--color-gris-fonce);
	text-align: center;
	font-size: 16px;
	line-height: 28px;
	padding: 20px 0;
}

#footer p.titre, #galerie-contact p.titre {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 4px;
}

#courtiers p.titre {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 4px;
	text-align: center;
	padding: 20px 0 80px 0;
}

#signature p {
	color: var(--color-gris-fonce);
	text-transform: uppercase;
	font-size: 10px;
	line-height: 28px;
	letter-spacing: 2px;
}

p.image-courtier {
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 0;
	width: 100%;
}

p.image-courtier img {
	position: relative;
	width: 60%;
	margin: 0 auto;
}

/* POPUP ACTU */

#popup-actu {
	position: fixed;
	width: auto;
	max-width: 400px;
	height: auto;
	bottom: 15%;
	right: 3%;
	transform: translate(200%, 0%);
	box-shadow: inset 0 0 0 1px white;
	z-index: 100;
	transition-duration: 0.6s;
}

#popup-actu.open { transform: translate(0%, 0%); }

#popup-actu ul {
	display: table;
	position: relative;
	margin: 1vw;
	background-color: #454b57;
	padding: 2vw;
}

p.actu-titre {
	position: relative;
	font-family: 'avecRegular', serif;
	font-size: 2.0vw;
	line-height: 2.2vw;
	padding: 10px 20px 10px 0;
	color: white;
}

p.actu-soustitre {
	position: relative;
	font-family: 'sansregular', serif;
	font-size: 1.0vw;
	line-height: 1.2vw;
	text-transform: uppercase;
	padding: 10px 0;
	color: white;
}

#popup-actu ul a {
	display: inline-block;
	background-color: white;
	position: relative;
	font-family: 'sansregular', serif;
	font-size: 0.8vw;
	line-height: 1.0vw;
	text-transform: uppercase;
	padding: 10px 20px;
	color: var(--color-gris-fonce);
}

#popup-actu #bouton-fermeture {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 80px;
	height: 80px;
	z-index: 200;
	margin: 1vw;
}

#popup-actu #bouton-fermeture span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 1px;
	background-color: white;
	transition-duration: 0.2s;
}

#popup-actu #bouton-fermeture span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
#popup-actu #bouton-fermeture span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
#popup-actu #bouton-fermeture:hover span:nth-child(1) { height: 3px; transform: translate(-50%, -50%) rotate(-45deg); }
#popup-actu #bouton-fermeture:hover span:nth-child(2) { height: 3px; transform: translate(-50%, -50%) rotate(45deg); }

/* ANIMATION */

.animation-texte {
	opacity: 0;
	transition-duration: 0.6s;
}

.animation-texte.visible-text {
  opacity: 1;
}

/* GOOGLE */

.grecaptcha-badge { display: none; }

/* MENU LANGUE */

#menu-langue {
	position: fixed;
	top: 12%;
	right: 0px;
	background-color: white;
	transform: translate(0%, -50%);
}

#menu-langue li {
	position: relative;
	width: 2.5vw;
	height: 2.5vw;
	background-color: white;
} #menu-langue li.active { background-color: var(--color-gris-fonce); }


#menu-langue li p {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 0.9vw;
	line-height: 0.9vw;
	padding: 0;
	text-transform: uppercase;
	font-family: 'sansregular', serif;
} #menu-langue li.active p { color: white ; }