html { overflow-x: hidden; }
body { overflow-x: hidden; background-color: white; }

.mobilSupr { display: none !important; }
.justMobil { display: inline-block !important; }

p.center-mobil {
  text-align: center !important;
}

.section.background {
	background-image: none !important;
}

/* 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% / 1) - 60px ); padding: 10px 30px; }
.demi-full {width: calc((100% / 1) - 0px ); padding: 0px 0px; }
.tier {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.tier-full {width: calc((100% / 1) - 0px); padding: 0px 0px; }
.deuxtier {width: calc(1*(100% / 1) - 60px); padding: 10px 30px; }
.deuxtier-full {width: calc(1*(100% / 1) - 0px); padding: 0px 0px; }
.quart {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.quart-full {width: calc((100% / 1) - 0px); padding: 0px 0px; }
.troisquart {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.troisquart-full {width: calc((100% / 1) - 0px); padding: 0px 0px; }
.cinquieme {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.sixieme {width: calc((100% / 1) - 60px); padding: 10px 30px; }

.section { padding: 20px 0; }
.sous-section { padding: 0px 0; }

#intruduction {
  height: calc(50vh - 100px);
}

ul#ligne-basse li:nth-child(1) p img { width: 70px !important; }
ul#ligne-basse li:nth-child(2) p img { width: 70px !important; }
ul#ligne-basse li:nth-child(3) p img { width: 60px !important; }

#intruduction ul#ligne-basse {
  height: 90px;
}

/* H */

h1 {
	font-size: 4.8vw;
	line-height: 6vw;
}

ul.picto {
  margin: 16px 0;
}

ul.picto li p, p.legende {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}

/* MENU PRINCIPAL */

#menu-principal {
	height: auto;
  margin-bottom: 20px;
}

#menu-principal ul.liste-liens {
	position: relative;
	height: auto;
	width: 100vw;
}

#menu-principal ul.liste-liens li {
	display: block;
  float: none;
}

#menu-principal ul.liste-liens li p {
  display: block;
	padding: 30px 0px 30px 0px;
	position: relative;
	font-size: 14px;
	line-height: 12px;
  text-align: center;
	top: 0%;
	transform: translateY(0%);
}

#menu-principal ul.liste-liens li p:hover { padding: 40px 0px 40px 0px; }
#menu-principal ul.liste-liens li.lien p span { display: none; }

#menu-principal ul.liste-liens li.menu-mobil { display: block; height: 120px; margin: 20px 0px; }

#menu-principal ul.liste-liens li.menu-mobil a { display: inline-block; float: left; }

#menu-principal ul.liste-liens li.menu-mobil a.mobile-logotype {
  position: relative;
  width: 70%;
  height: 120px;
  background-image: url('../svg/logotype-principal-mobile.svg');
  background-size: contain;
  background-position: center;
}

#menu-principal ul.liste-liens li.menu-mobil a.mobile-icon {
  position: relative;
  width: 30%;
  height: 120px;
}

#menu-principal ul.liste-liens li.menu-mobil a.mobile-icon span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-size);
  box-shadow: inset 0 0 0 2px var(--color-projet-corpo);
  background-image: url('../svg/picto-menu-open.svg');
  background-position: center;
  background-size: 70%;
} #menu-principal ul.liste-liens li.menu-mobil a.mobile-icon span.open { background-image: url('../svg/picto-menu-close.svg'); }

#menu-principal ul.liste-liens li.lien { display: none; }
#menu-principal ul.liste-liens li.lien.open { display: block; }

/* ANNONCE */

#intruduction-annonce {
	position: relative;
	left: 0%;
	width: calc(100vw - 60px);
	max-width: 1000px;
	height: auto;
	min-height: 100px;
	background-color: var(--color-projet-white);
	transform: translateX(0%) translateY(0%);
	border-radius: var(--border-radius-size);
	padding: 30px;
	z-index: 500000;
	transition-duration: 0.6s;
}

#intruduction-annonce.close {
	top: 0px;
}

#intruduction-annonce p {
	color: var(--color-projet-gris);
	text-transform: uppercase;
	text-align: center;
	font-family: 'regular', sans-serif;
	font-size: 20px;
	line-height: 26px;
	padding: 5px 0;
}

#intruduction-annonce p.bleu {
	color: var(--color-projet-corpo);
	font-size: 16px;
	line-height: 22px;
	font-family: 'light', sans-serif;
}

#intruduction-annonce p.size-mini {
	font-size: 12px;
	line-height: 16px;
}

#intruduction-annonce a.fermeture {
	display: none;
}