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

/* MOBIL */
.mobilSupr { display: inline-block !important; }
.justMobil { display: none !important; }
.tableMobil { display: none !important; }

/* WIDTH */

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

.visible { overflow: visible; }

/* PAGE CONTENU */

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

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

/* MARGES */
.margin-top { border-top: 50px solid rgba(0, 0, 0, 0); }
.margin-bottom { border-bottom: 50px solid rgba(0, 0, 0, 0); }

.padding-top { padding-top: 50px; }
.padding-top-mobil { padding-top: 0px; }
.padding-bottom { padding-bottom: 50px; }
.padding-left { padding-left: 80px; }
.padding-right { margin-right: 6%; }
@media screen and (max-width: 1000px) { .padding-top, .padding-top { padding-top: 30px; } }

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.no-background-mobil { background-image: default; }

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

/* COLOR // BACKGROUND */
.color-background-white { background-color: rgba(255,255,255,1); }
.color-background-grey { background-color: rgba(0,0,0,0.1); }
.color-background-black { background-color: #3e3f3f; }
.color-background-corpo, .color-background-vert { background-color: #3E5623; }
.color-background-corpo2, .color-background-orange { background-color: #a5a48b; }

/* COLOR // TYPO */
.color-typo-white { color: rgba(255,255,255,1) !important; }
.color-typo-grey { color: rgba(0,0,0,0.5); }
.color-typo-black { color: rgba(63,63,63,1); }

.color-typo-vert { color: #3E5623; }
.color-typo-or { color: #a5a48b; }
.color-typo-bleu { color: #809ab5; }

/* BORDER */
.border-radius { border-radius: 0px; overflow: hidden;}

/* BOX // WIDTH */
.entier {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.entier-full {width: calc((100% / 1) - 0px); padding: 10px 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) - 120px); padding: 0px 60px; }
.quart-full {width: calc((100% / 4) - 0px); padding: 0px 0px; }
.troisquart {width: calc(3*(100% / 4) - 120px); padding: 0px 60px; }
.troisquart-full {width: calc(3*(100% / 4) - 0px); padding: 0px 0px; }
.cinquieme {width: calc((100% / 5) - 60px); padding: 0px 30px; }
.sixieme {width: calc((100% / 6) - 60px); padding: 0px 30px; }
.huitieme {width: calc((100% / 8) - 60px); padding: 0px 30px; }

/* FONT // FAMILY */
.font-light { font-family: 'light', sans-serif; }
.font-light { font-family: 'regular', sans-serif; }
.font-light { font-family: 'medium', sans-serif; }
.font-regular, b { font-family: 'bold', sans-serif; }

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

.para-left { text-align: left !important; }
.para-justify { text-align: justify; }
.para-center, .center { text-align: center; }
.para-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-normal { font-size: 15px !important; line-height: 26px !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; }
.vertical-align-bottom { vertical-align: bottom; }

/* ESPACE VIDE */

.espace-vide-30 { height: 30px; width: 100%; }
.espace-vide-50 { height: 50px; width: 100%; }
.espace-vide-100 { height: 100px; width: 100%; }

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

.image-ronde img {
	padding: 0;
	margin: 0;
	width: 100%;
}
/* IMAGE BG */

.img-bg {
	display: table-cell;
	background-size: cover;
}

.img-bg.picto::after {
	content: "";
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	background-image: url('../svg/picto-bulle.svg');
	transform: rotate(0deg);
	transition-duration: 0s;
	opacity: 0;
}

.img-bg.active.picto::after {
	opacity: 1;
}

.img-bg .img-hover {
	background-color: white;
	margin: 30px;
	padding: 30px 50px 30px 50px;
	height: calc(100% - 120px);
	opacity: 0;
	cursor: pointer;
	transition-duration: 0.4s;
	z-index: 100;
}

.img-bg .img-hover.active {
	opacity: 1;
}

.img-hover::before {
	content: "";
	position: absolute;
	right: 50px;
	top: 50px;
	width: 20px;
	height: 20px;
	background-image: url('../svg/picto-fermeture-gris.svg');
	transform: rotate(0deg);
	transition-duration: 0.6s;
}

.img-hover:hover::before {
	transform: rotate(180deg);
}

/* H */

h1 {
	font-family: 'light', serif;
	font-size: 26px;
	line-height: 38px;
	letter-spacing: 2px;
	padding: 10px 20px 10px 20px;
}

h2 {
	font-family: 'medium', serif;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 2px;
	color: #3e5623;
	text-transform: uppercase;
	padding: 20px 20px 10px 20px;
}

h3 {
	font-family: 'light', serif;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0px;
	text-transform: uppercase;
	padding: 0px 0px 10px 0px;
	letter-spacing: 6px;
}

h4 {
	font-family: 'regular', serif;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0px;
}

p {
	font-family: 'light', sans-serif;
	font-size: 15px;
	line-height: 23px;
	color: rgba(0,0,0,0.65);
	padding: 0 0 10px 0;
	letter-spacing: 0px;
}

b { font-family: 'medium', sans-serif; }

a {
	font-family: 'medium', serif;
	text-decoration: none;
	color: #333;
	cursor: pointer;
	opacity: 1;
	transition-duration: 0.4s;
} a:hover { opacity: 0.8; }

a.bouton {
	display: inline-block;
	background-color: #a5a48b;
	padding: 12px 20px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: 'regular';
	opacity: 1;
}

a.bouton:hover {
	background-color: #3E5623;
}

/* LISTE */

.liste-vert:hover { background-image: none; background-size: 260px; background-position: top; cursor: pointer; }
.liste-or:hover { background-image: none; background-size: 260px; background-position: top; cursor: pointer; }
.liste-bleu:hover { background-image: none; background-size: 260px; background-position: top; cursor: pointer; }

.liste-vert:hover { background-image: url('../svg/ensemble-feuilles-vert.svg'); }
.liste-or:hover { background-image: url('../svg/ensemble-feuilles-or.svg'); }
.liste-bleu:hover { background-image: url('../svg/ensemble-feuilles-bleu.svg'); }

.liste-chiffre {
	font-size: 100px;
	line-height: 100px;
}

.liste-titre {
	font-family: 'medium', sans-serif;
	font-size: 16px;
	line-height: 16px;
}

.liste-sous-titre {
	font-family: 'regular', sans-serif;
	letter-spacing: 1px;
	font-size: 11px;
	line-height: 13px;
	text-transform: uppercase;
}

.liste-texte {
	font-family: 'regular', sans-serif;
	font-size: 15px;
	line-height: 25px;
}

/* VIDEO */

#video-introduction {
	position: relative;
	height: 100vh;
	width: 100vw;
	border-radius: 0 0 150px 0;
	background-color: #a5a48b;
	overflow: hidden;
}

#deco-feuilles {
	position: absolute;
	width: 400px;
	height: 300px;
	bottom: 0px;
	right: 0px;
	background-image: url('../svg/feuilles-menu.svg');
	background-position: bottom right;
}

#video-bouton-play {
	position: absolute;
	width: 80px;
	height: 80px;
	left: calc(-50% - 40px);
	top: calc(50% - 40px - 60px);
	background-image: url('../svg/picto-video-play.svg');
	transform: rotate(0deg);
	transition-duration: 0.6s;
	cursor: pointer;
}

#video-bouton-play.actif { left: calc(50% - 40px); }

#video-bouton-pause {
	position: absolute;
	width: 80px;
	height: 80px;
	left: calc(130% - 40px);
	top: calc(50% - 40px - 60px);
	background-image: url('../svg/picto-video-pause.svg');
	transform: rotate(0deg);
	transition-duration: 0.6s;
	cursor: pointer;
}

#video-bouton-pause.actif { left: calc(90% - 40px); }

#video-bouton-son {
	position: absolute;
	width: 80px;
	height: 80px;
	left: calc(130% - 40px);
	top: calc(65% - 40px - 60px);
	background-image: url('../svg/picto-video-audio-on.svg');
	transform: rotate(0deg);
	transition-duration: 0.6s;
	cursor: pointer;
}

#video-bouton-son.actif { left: calc(90% - 40px); }
#video-bouton-son.soncoupe { background-image: url('../svg/picto-video-audio-off.svg'); }

#video-bouton-play:hover, #video-bouton-pause:hover, #video-bouton-son:hover {
	transform: rotate(180deg);
}

/* ACTU */

#bulle-actu {
	position: fixed;
	top: -800px;
	right: 0px;
	width: 500px;
	height: 180px;
	background-image: url('../svg/fond-actu.svg');
	background-size: contain;
	transition-duration: 0.8s;
	transition-delay: 0.2s;
	z-index: 10000;
}

#bulle-actu.active {
	right: 50px;
	top: 14vh;
}

#bulle-actu p {
	font-size: 18px;
	line-height: 25px;
	padding: 10px 100px 10px 40px;
	color: #3e5623;
}

#bulle-actu p span {
	font-size: 10px;
	font-family: 'bold';
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a5a48b;
	line-height: 22px;
}

#bulle-actu #fermeture {
	position: absolute;
	right: 80px;
	top: 14px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-image: url('../svg/picto-fermeture.svg');
	transition-duration: 0.4s;
	transform: rotate(0deg);
}

#bulle-actu #fermeture:hover {
	transform: rotate(180deg);
}

form.edit {
	position: fixed;
	top: -3000px;
	background-color: #a5a48b;
	width: 400px;
	padding: 20px;
	border-radius: 20px;
	left: calc(50% - 220px);
	z-index: 100000;
	transition-duration: 1s;
}

form.edit.open {
	top: 100px;
}

form.edit textarea {
	display: block;
	width: calc(100% - 20px );
	padding: 10px;
	margin: 0px 0px 10px 0;
	border: none;
	border-radius: 10px;
	font-family: 'medium', sans-serif;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	vertical-align: middle;
	max-width: calc(100% - 20px );
}

form.edit input {
	border-radius: 10px;
	margin: 0px 0px 10px 0;
	text-align: center;
}

form.edit input[type="submit"] {
	margin: 0px 0px 0px 0px;
}

/* LOGOTYPE */

#bulle-logo {
	position: absolute;
	top: -1000px;
	left: 100px;
	width: 400px;
	height: 230px;
	background-image: url('../svg/fond-logotype.svg');
	background-size: cover;
	background-position: bottom center;
	transition-duration: 0.8s;
	transition-delay: 0.6s;
	z-index: 100;
}

#bulle-logo.active {
	top: 0px;
}

/* FOOTER */

#footer {
	background-image: url('../svg/back-footer.svg');
	background-size: 110%;
	background-position: top center;
}

/* VISITES VIRTUELLES */

ul#control-slider {
	display: table;
	position: fixed;
	top: 87px;
	left: calc(50% - 150px);
	width: 300px;
	background-color: white;
	border-radius: 20px;
	padding: 0 20px;
	z-index: 1000;
}

ul#control-slider li {
	display: table-cell;
	padding: 20px 5px;
	text-align: center;
	vertical-align: middle;
}

ul#control-slider li input {
	width: 90%;
}

#points-visites {
	position: absolute;
	width: 100%;
	z-index: 500;
	height: 100%;
	top: 0px;
}

#points-visites a {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: white;
	border-radius: 50%;
	background-size: 70%;
	background-position: center;
	opacity: 1;
	transition-duration: 0.6s;
}

#points-visites a.exter { background-image: url("../svg/picto-visites-fleur.svg"); }
#points-visites a.inter-front { background-image: url("../svg/picto-visites-front.svg"); }
#points-visites a.inter-back { background-image: url("../svg/picto-visites-back.svg"); }
#points-visites a.inter-back-right { background-image: url("../svg/picto-visites-back-right.svg"); }

#points-visites a span {
	position: absolute;
	width: 140px;
	top: 50px;
	left: -55px;
	font-size: 10px;
	line-height: 14px;
	background-color: white;
	padding: 10px;
	border-radius: 10px;
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 0.2s;
	color: #a5a48b;
}

#points-visites a:hover span {
	opacity: 1;
	top: 60px;
}

ul.galerie-media {
	position: absolute;
	display: table;
	bottom: 40px;
	width: 40%;
	margin: 0 calc(30% - 30px);
}

ul.galerie-media li {
	display: table-cell;
	text-align: center;
	width: 50%;
}

ul.galerie-media li a {
	background-color: white;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background-size: 60px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
}

ul.galerie-media li a.video {
	background-image: url('../svg/picto-video.svg');
}

ul.galerie-media li a.round {
	background-image: url('../svg/picto-360.svg');
}

/* POP */

.pop { cursor: pointer;}

#galerie-pop {
	position: fixed;
	top: -100vh;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 3000;
	transition-duration: 0.4s;
}

#galerie-pop.active {
	top: 0px;
}

#fermeture-pop {
	top:0px;
	position: absolute;
	top: 60px;
	right: 60px;
	width: 50px;
	height: 50px;
	background-color: white;
	background-image: url('../svg/picto-fermeture.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40%;
	border-radius: 50%;
	transition-duration: 0.4s;
	transform: rotate(0deg);
	cursor: pointer;
}

#fermeture-pop:hover {
	transform: rotate(90deg);
}

/* TABLEAU */

table {
	position: relative;
	width: 100%;
	height: auto;
	border: 0px solid grey;
	margin: 10px 0;
	background-color: white;
}

table.un { box-shadow: 0 0 0 5px #809ab5; }
table.un td { border: 1px solid #809ab5; color: #809ab5; }
table.deux { box-shadow: 0 0 0 5px #a5a48b; }
table.deux td { border: 1px solid #a5a48b; color: #a5a48b; }
table.trois { box-shadow: 0 0 0 5px #3e5623; }
table.trois td { border: 1px solid #3e5623; color: #3e5623; }

table td {
	padding: 10px;
	font-family: 'regular', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
}

table td.big {
	font-family: 'medium', sans-serif;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
}

table td.small {
	font-size: 14px;
	line-height: 18px;
}

table td.resultat {
	text-align: center;
	font-size: 22px;
	line-height: 30px;
	font-family: 'regular', sans-serif;
} table td.resultat b { font-family: 'bold', sans-serif; }


table td.calcul {
	text-align: center;
	font-size: 10px;
	line-height: 14px;
	font-family: 'regular', sans-serif;
	letter-spacing: 4px;
}

/* GOOGLE */

.grecaptcha-badge { display: none; }