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

/* MOBIL */
.mobilSupr { display: none !important; }
.justMobil { display: block !important; }
.mobilSuprTable { display: none !important; }
.justMobilTable { display: table !important; }

/* 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: 90vw;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	vertical-align: middle;
}

.width-max, .width-min {
	display: table;
	position: relative;
	width: 90vw;
	height: auto;
	table-layout: fixed;
	word-spacing: -4em;
	overflow: visible;
	vertical-align: middle;
}

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

/* BOX // WIDTH */
.entier, .demi, .tier, .tier-max, .deuxtier, .quart, .troisquart, .cinquieme, .sixieme, .deuxcinquieme, .deuxcinquieme-left, .troiscinquieme, .troiscinquieme, .cinqsixieme-full
{ width: calc((100% / 1) - 40px); margin: 0px 20px; }

.entier-full, .demi-full, .tier-full, .deuxtier-full, .quart-full, .troisquart-full, .cinquieme-full, .deuxcinquieme-full, .troiscinquieme-full, .troiscinquieme-full
{ width: calc((100% / 1) - 0px); margin: 0px 0px; }

.centerMobil { text-align: center; }

/* P */

h3 {
	font-size: 7.2vw;
	line-height: 9vw;
	padding: 2vh 0;
}

h4 {
	font-size: 4.8vw;
	line-height: 6.2vw;
	letter-spacing: 0.05vw;
	padding-bottom: 2vh;
}

h5 {
	font-size: 4vw;
	line-height: 5.4vw;
	letter-spacing: 0.05vw;
	padding: 1vh 0;
}

h5 img {
	width: 8vw;
	height: 8vw;
}

p.index {
	font-size: 2.8vw;
	line-height: 3vw;
	letter-spacing: 2.5vw;
	padding-bottom: 2vh;
}

p.standard {
	font-size: 3vw;
	line-height: 5vw;
	padding-bottom: 3vh;
}

p.legende {
	padding: 1vh 0 2vh;
}

a.bouton {
	padding: 1vh 2vh;
	font-size: 2.9vw;
}

/* MENU */

#menu-mobil {
	position: relative;
	top: 0px;
	left: 0px;
	background-color: white;
	z-index: 1000;
	word-spacing: 0em;
	margin: 2vh 0;
}

#menu-mobil table {
	width: 90%;
	margin: 0 auto;
	table-layout: fixed;
	vertical-align: middle;
	text-align: center;
}

#menu-mobil table tr td { vertical-align: middle; padding: 1vh 0; }

#menu-mobil table#intro-menu tr td:nth-child(1) { width: 70%; }
#menu-mobil table#intro-menu tr td:nth-child(2) { width: 30%; }
#menu-mobil table#intro-menu tr td:nth-child(3) { width: 30%; }

#menu-mobil table#intro-menu tr td:nth-child(1) img { width: 85%; }

#menu-mobil table#intro-menu tr td.open-menu-mobil,
#menu-mobil table#intro-menu tr td.close-menu-mobil { text-align: center; }

#menu-mobil table#intro-menu tr td.open-menu-mobil.active,
#menu-mobil table#intro-menu tr td.close-menu-mobil.active { display: table-cell; }
#menu-mobil table#intro-menu tr td.open-menu-mobil,
#menu-mobil table#intro-menu tr td.close-menu-mobil { display: none; }

#menu-mobil table#intro-menu tr td.open-menu-mobil img,
#menu-mobil table#intro-menu tr td.close-menu-mobil img {
	display: inline-block;
	height: 6vw;
}

#menu-mobil table#intro-menu tr td.open-menu-mobil p span,
#menu-mobil table#intro-menu tr td.close-menu-mobil p span {
	display: inline-block;
	font-size: 2vw;
	line-height: 5vw;
	letter-spacing: 0.1vw;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-projet-corpo);
	color: var(--color-projet-corpo);
}

#menu-mobil table#liste-liens-mobil tr td p a {
	display: block;
	background-color: var(--color-projet-tonique);
	padding: 2vw 2vh;
	color: white;
	font-size: 3vw;
	line-height: 4vw;
	letter-spacing: 0.1vw;
	text-transform: uppercase;
	letter-spacing: 0.5vw;
	transition-duration: 0.4s;
}

#menu-mobil table#liste-liens-mobil { display: none; }
#menu-mobil table#liste-liens-mobil.active { display: table; }

#menu-mobil table#liste-liens-mobil tr td {
	padding: 0.6vw 0;
}

#menu-mobil table#liste-liens-mobil tr td p a:hover {
	background-color: var(--color-projet-corpo);
}

/* HEADER */

#header-accueil {
	height: 45vh;
	width: 100vw;
	min-height: 200px;
	background-position: center;
	background-image: url('../image/galerie-image-exter-02.jpg');
}

#header-accueil #actu { display: none; }

#header-accueil .deco { display: none; }

#signature-client table { width: 100%; }

#signature-client table tr td { text-align: center; }

#signature-client table tr td:nth-child(3) { display: none; }

#signature-client table img { width: 70%; }

#header-page-commerce {
	height: 30vh;
}

#header-page-projet {
	height: 30vh;
}

/* ACTU */

p {
	font-size: 4vw;
	line-height: 6vw;
}

#actu-mobil {
	position: relative;
	background-color: var(--color-projet-corpo);
	padding: 3vh 10vw;
	width: 80vw;
	word-spacing: 0em;
}

p.actu-titre {
	font-size: 6.5vw;
	line-height: 7vw;
	color: white;
	text-transform: uppercase;
	font-family: 'SerifRegular', serif;
	letter-spacing: 0.2vw;
	color: white;
}

p.actu-sous-titre {
	font-size: 3.5vw;
	line-height: 5.5vw;
	color: white;
	text-transform: uppercase;
	font-family: 'SansRegular', serif;
	letter-spacing: 0.05vw;
	padding: 1vh 0;
}

p.actu-bouton {
	background-color: var(--color-gris-fonce);
	color: white;
	font-size: 2.5vw;
	line-height: 5.5vw;
	color: white;
	text-transform: uppercase;
	font-family: 'SansRegular', serif;
	letter-spacing: 0.05vw;
	padding: 1vh 0;
	letter-spacing: 0.5vw;
	text-align: center;
	transition-duration: 0.4s;
}

p.actu-bouton a {
	color: white;
}

p.actu-bouton:hover {
	background-color: var(--color-projet-tonique);
}

/* ARGUMENTS */

p.arguments-picto {
	text-align: center;
}

p.arguments-picto img {
	display: inline-block;
	width: 8vw;
	height: 8vw;
	padding-top: 1vh;
	text-align: center;
}

p.arguments-texte {
	font-size: 3.2vw;
	line-height: 5.2vw;
	padding: 1vh 2vw 4vh 0;
	text-align: center;
}

p.arguments-sous-ligne {
	display: inline;
	width: 100%;
	padding: 2vh 0 1vh 0;
	font-size: 4.8vw;
	line-height: 9.2vw;
	letter-spacing: 0.2vw;
	text-align: center;
	margin: 0 auto;
	float: left;
	border: none;
}

/* DISTANCES */

ul.fil-de-distance {
	margin: 4vh auto;
}

ul.fil-de-distance:nth-child(1) {
	margin: 4vh 0 0 0;
}

ul.fil-de-distance:nth-child(2) {
	margin: 0 0 4vh 0;
}


ul.fil-de-distance:nth-child(1),
ul.fil-de-distance:nth-child(2) { width: 100%; }

ul.fil-de-distance li {
	display: table;
	width: 100%;
}

ul.fil-de-distance li.fleche {
	display: none;
}

ul.fil-de-distance li p {
	font-size: 3.8vw;
	line-height: 7vw;
}

ul.fil-de-distance li.titre-distance span {
	padding: 4vw 0 1.3vw 0;
	font-size: 3.8vw;
	line-height: 5.2vw;
	letter-spacing: 0.5vw;
	margin-bottom: 2vh;
}

ul.fil-de-distance li.titre-distance img {
	width: 8vw;
	height: 8vw;
	padding-top: 2vh;
}

/* AUTRES PROJETS */

p.client-titre {
	font-size: 3vw;
	line-height: 5vw;
	letter-spacing: 2.4vw;
	padding: 1vh 0 2vh 0;
}

.bouton-blanc {
	padding: 1vh 5vh;
	margin: 5vh 0 3vh 0;
	font-size: 3vw;
	line-height: 11vw;
	letter-spacing: 1.2vw;
}

.bouton-full {
	padding: 6.4vw 2vw;
	background-color: var(--color-projet-tonique);
	font-size: 3vw;
	line-height: 4vw;
	letter-spacing: 1.2vw;
}

/* BLOC IMAGE */

.bloc-image-global {
	width: 100vw;
}

.bloc-image-global .width-max {
	width: 100vw;
}

.bloc-image-global .width-max .contenu {
	width: 100vw;
	margin: 0;
}

.bloc-image {
	position: relative;
	width: 100%;
	margin: 8px 0;
}

.bloc-image-legende p {
	padding: 1vh 2vh;
	font-size: 4vw;
	line-height: 6vw;
	letter-spacing: 0.5vw;
}

/* CONTACT */

.contact-sous-titre {
	font-size: 4.3vw;
	line-height: 6vw;
	padding: 2vh 0 4vh 0;
	text-transform: uppercase;
}

#carte-visite {
	margin: 2vw 0 4vh 0;
	width: 100%;
}

#carte-visite tr td p:nth-child(1) {
	padding-bottom: 4vw;
}

#carte-visite tr td p {
	font-size: 4vw;
	line-height: 6vw;
}

#carte-visite tr td p i {
	font-size: 2.6vw;
	line-height: 2.6vw;
}

#carte-visite tr td:nth-child(1) { padding-right: 6vw; }
#carte-visite tr td:nth-child(2) { padding-left: 6vw; }

#carte-visite tr td img {
	width: 8vw;
}

/* LEGENDES VERTE */

img.legende-verte-picto , img.legende-verte-fleche {
	vertical-align: middle;
	margin: 10px;
	text-align: center;
}

img.legende-verte-fleche { width: 16px; }
img.legende-verte-picto { height: 70px; }

p.legende-verte {
	text-align: center;
	color: var(--color-projet-corpo);
	text-transform: uppercase;
	font-size: 3.5vw;
	line-height: 5.0vw;
	padding: 1vh 15%;
}

/* CREDITS */

p.credits {
	font-size: 2.6vw;
	line-height: 5vw;
	letter-spacing: 0.2vw;
	text-align: center;
}

p.credits img {
	display: inline-block;
	width: 8vw;
}

/* COMMERCES */

p.commerce-titre {
	letter-spacing: 1vw;
	font-size: 3vw;
	line-height: 3.4vw;
}

ul.commerce-table li p.surface {
	font-size: 2.6vw;
	line-height: 3vw;
	letter-spacing: 1vw;
}

ul.commerce-table li p a {
	padding: 1vh 0;
	font-size: 2.9vw;
}

/* GALERIE POP */

#galerie-pop {
	position: absolute;
	top: -100vh;
	width: 100vw;
	height: 100vh;
	left: 50%;
	transition-duration: 1s;
	z-index: 10000001;
	background-color: white;
	overflow: hidden;
	background-position: center;
	background-size: contain;
	cursor: pointer;
	box-shadow: 0 0 0 20px var(--color-projet-corpo);
	transform: translate(-50%, -50%);
}

#galerie-pop #fermeture-visualisation {
	position: absolute;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	transition-duration: 0.4s;
	text-transform: uppercase;
	background-image: url('../svg/picto-croix-blanche.svg');
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-projet-corpo);
	right: 0px;
	top: 15vh;
	transition-duration: 0.4s;
	z-index: 1000;
}

#galerie-pop #fermeture-visualisation:hover { transform: rotate(180deg); }

/* GALERIE VIDEO */

#bouton-video {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: white;
	width: 16vw;
	height: 16vw;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-image: url('../svg/pictogramme-videoPlay.svg');
	background-size: 50%;
	background-position: 56% center;
	background-repeat: no-repeat;
	cursor: pointer;
}

#galerie-video {
	overflow: hidden;
	display: block;
	position: fixed;
	top: -200vh;
	width: 100vw;
	height: 100vh;
	background: white;
	z-index: 1000000000;
	transition-duration: 0.8s;
}

#galerie-video.on {
	top: 0vh;
}

#fermeture-video {
	position: absolute;
	top: 15vh;
	right: 0vw;
	width: 12vw;
	height: 12vw;
	background-color: var(--color-projet-corpo);
	cursor: pointer;
}

#fermeture-video span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 2px;
	background-color: white;
	transition-duration: 0.4s;
}

#fermeture-video span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
#fermeture-video span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

#fermeture-video:hover span:nth-child(1) { transform: translate(-50%, -50%) rotate(-45deg); }
#fermeture-video:hover span:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }

#myVideoMobil {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}