@charset "utf-8";

body{	
	margin:50px 30px 0;
	padding:0;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size:20px;
	color:#333;
	background-color:#e5e5e5;
}

@viewport { width: device-width; zoom: 1; }

.floatGauche{ float: left;}
.floatRight{ float: right;}
.clear{  clear: both; height: 0; overflow: hidden; /* Précaution pour IE 7 */}
a {text-decoration:underline; color:#333;}
a:hover {text-decoration:underline; color:#771214;}
sup {font-size:0.5em;}
.gris { color:#f4f4f4;}
.rouge { color:#771214;}
.small { font-size: 1.3rem;}



#enveloppe {background-color:#fff; margin:0 auto; padding: 50px 0 0; max-width:1024px;}
header { padding-bottom: 40px; text-align: center;}
header .titre { font-size: 3rem; letter-spacing: .3rem;}
header .texte { font-size: 1.2rem; letter-spacing: .205rem; font-weight: 600;}

section#section1 { text-align: center; max-width: 840px; margin: 0 auto 100px;}
section#section1 .titre { font-size: 3.2rem; letter-spacing: .6rem;}
section#section1 .texte { font-size: 1.2rem; letter-spacing: .205rem; font-weight: 600; background-color:#f4f4f4; padding: 10px; margin: 5px 0;}

section#section2 { max-width: 840px; margin: 0 auto 100px;}
section#section2 .menu { margin-bottom: 18px;}
section#section2 .bouton { width: 70px; padding-top: 8px;}
section#section2 .contenu { width: 90%; border-bottom: 2px solid; font-size: 2rem; padding-bottom: 10px;}
section#section2 .contenu .texte { }

section#section3, section#section5  {	
	margin: 0 auto;
	padding: 60px 160px; 
	background-color:#f4f4f4;
	background-image:url(fond1.png);
	background-repeat:no-repeat;
	background-position:bottom left;
	background-size: contain;
	text-align: center;
}
section#section3 .titre { font-size: 3.2rem; letter-spacing: .6rem;}
section#section3 .titre2 { font-size: 1.2rem; letter-spacing: .205rem; font-weight: 600;}

section#section4 img { display: block;}

section#section5 { background-image:url(fond2.png); background-position:bottom right;}
section#section5 .numero { font-size: 3.2rem; letter-spacing: .6rem; font-weight: 600;}
section#section5 .adresse { font-weight: 400; font-size: 1.5rem; letter-spacing: .13rem;}
section#section5 .mail { font-weight: 400; font-size: 1.5rem; letter-spacing: .1rem; padding-top: 15px;}

#footer { padding: 40px 0; text-align:center;}
#footer .copyright { font-size:0.9rem;}


/*   Popup Modal   */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 40px;
  background: #fff;
  border-radius: 5px;
  width: 70%;
  max-width: 600px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {  margin-top: 0;}
.popup ul li {  padding-bottom: 8px;}
.popup .info { font-size: 1.2rem; font-weight: 600;}

.popup .close {
  position: absolute;
  top: 40px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  border-radius: 50px;
  padding: 1px 10px 2px;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}




@media only screen and (min-width : 769px) and (max-width : 1023px) {
	
}

@media screen and (max-width: 768px) {
	
}

@media screen and (max-width: 700px) {
	.box { width: 70%;}
	.popup { width: 70%;}
}


@media screen and (max-width: 480px) {
	.hideMobile {display:none;}
	body{ margin:10px; font-size:16px;}
	header img{ width: 50%;}
	#enveloppe { padding: 20px 0 0;}
	header .titre { font-size: 1.5rem; letter-spacing: .3rem;}
	header .texte { font-size: 1rem; letter-spacing: .1rem;}
	section#section1 { text-align: center; margin: 0 auto 30px;}
	section#section1 .titre { font-size: 1.8rem; letter-spacing: 0rem;}
	section#section1 .texte { font-size: 1rem; letter-spacing: .1rem; padding: 15px;}
	section#section2 { margin: 0 auto 30px;}
	section#section2 .menu { margin-bottom: 0; padding: 15px;}
	section#section2 .bouton { width: 10%;}
	section#section2 .bouton img{ width: 20px;}
	section#section2 .small{ display: none;}
	section#section2 .prix{ font-weight: 600;}
	section#section2 .contenu {
		width: 90%;
		font-size: 1.2rem;
		padding-bottom: 10px;
	}
	section#section3, section#section5  { padding: 30px 10px;}
	section#section3 .titre { font-size: 2rem; letter-spacing: .1rem;}
	section#section3 .titre2 { font-size: 1rem; letter-spacing: .1rem;}
	section#section5 .numero { font-size: 2.6rem; letter-spacing: .1rem;}
	section#section5 .adresse { font-size: 1rem; letter-spacing: .1rem;}
	section#section5 .mail { font-size: 1.2rem; letter-spacing: .1rem;}
	.popup { padding: 20px;}
	.popup h2 {  font-size: 1.4rem; width: 90%;}
	.popup .close { top: 20px; right: 20px; font-size: 20px; padding: 1px 7px 2px;}
}