/* COULEURS */
/* 
orange : #ef730f 
magenta : #ad3496
jaune : #f4ea88
*/
html{
	scroll-behavior: smooth;
}
.largeur-site{
	max-width: 1000px;
	width: 95%;
	margin: 0px auto 0px auto;
	top: -30px;
}
.mobile{
	display: none;
}
.float{
	float: left;
	margin-right: 20px;
}
#actu img.float{
	margin-right: 100px;
}
.clearfix{
	clear: both;
}
@font-face {
	font-family: "Ampersand";
	src: url("../../fonts/ampersand.ttf") format("truetype");
}
img{
	max-width: 100%;
	height: auto;
}
a, a:focus, a:target, a:visited, a:hover{
	color: inherit;
	text-decoration: none;
}
p{
	text-align: justify;
	font-family: avenir, cambria, serif;
}
picture{
	width: 100%;
	margin: 0;
	padding: 0;
}
picture img{
	width: 100%;
}
h1{
	font-family: "Ampersand", manuscrit;
	font-size: 45px;
	text-align: center;
}
h2{
	font-family: "Ampersand";
	font-size: 25px;
}
h3{
	font-size: 18px;
	font-family: avenir, cambria, serif;
}
h4{
	font-size: 18px;
	font-family: avenir, cambria, serif;
}
.titre.top50px{
	margin-top: 50px;
}
.alignleft{
	text-align: left!important;
}
.nom{
	font-family: "Ampersand";
	font-size: 28px;
	color: #ef730f;
	text-align: center;
}
.photo-equipe{
	text-align: center;
}
.fd-dechire{
	background-image: url('../../images/structure/fond-clair-2000.gif');
	background-position: center center;
	background-repeat: repeat;
	background-size: contain;
	position: relative;
	z-index:6;
	padding-bottom: 0px;
}
.encadre{
	border: solid 1px black;
	padding:5px;
	text-align: center;
	margin-top: 55px;
}
#actu.fd-dechire{
	padding-bottom: 310px;
}
.fd-dechire .bgimght{
	background-image: url('../../images/structure/fd-dechire-clair-ht-2000.gif');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
	height: 8.55vw;
	position: relative;
	top: -8.55vw;
	z-index: 5;
}
.fd-dechire .bgimgbas{
	background-image: url('../../images/structure/fd-dechire-clair-bas-2000.gif');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
	height: 8.55vw;
	position: relative;
	top: 27vw;
	z-index: 5;
	margin-top:0;
}
.fd-dechire.rose .bgimgbas{
	background-image: url('../../images/structure/fd-dechire-rose-bas-2000.png');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
	height: 8.55vw;
	position: relative;
	top: 8.55vw;
	z-index: 5;
	margin-top:0;
}
.fd-dechire .largeur-site{
	top: -8.55vw;
}
.largeur-site ~ img{
	top: -8.55vw;
	position: relative;
	padding-bottom: 55px;
	max-width: 100%;
	height: auto;
}
.fd-dechire.jaune{
	background-image: url('../../images/structure/fond-jaune-clair-2000.gif');
	padding-bottom: 25px;
}
.fd-dechire.jaune .bgimght{
	background-image: url('../../images/structure/fd-dechire-jaune-clair-ht-2000-2.gif');
	height: 10.35vw;
	top: -10.35vw;
}
.fd-dechire.jaune .largeur-site{
	top: -10.35vw;
}
.fd-dechire.jaune p{
	color: #5b3930;
}
.fd-dechire.rose{
	background-image: url('../../images/structure/fond-rose-2000.gif');
	padding-bottom: 25px;
	background-size: cover;
}
.fd-dechire.rose .bgimght{
	background-image: url('../../images/structure/fd-dechire-rose-ht-2000.png');
	height: 10.3vw;
	top: -7vw;
}
.fd-dechire.rose p{
	color: #ffffff;
}
.fd-dechire.rose .largeur-site{
	top: -10.3vw;
}
.orange{
	color: #ef730f!important;
}
.blanc{
	color: #ffffff!important;
}
.magenta{
	color: #ad3496!important;
}
.jaune{
	color: #f4ea88!important;
}
.marron{
	color: #5b3930!important;
}
.ombreportee{
	-webkit-box-shadow: 2px 2px 15px 2px #7a7a7a;
	-moz-box-shadow: 2px 2px 15px 2px #7a7a7a;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='#7a7a7a', Positive='true');
	zoom:1;
	box-shadow: 2px 2px 15px 2px #7a7a7a;
}
.italic{
	font-style: italic;
}
.gras{
	font-weight: bold;
}
.souligne{
	text-decoration: underline;
}
.infos{
	font-size: 20px;
}
.infoplus{
	font-size: 12px;
	font-style: italic;
}
.demandeinfo{
	border: solid white 1px;
	padding: 8px;
	margin: 65px auto 25px auto;
	width: 50%;
}
.demandeinfo p{
	text-align: center!important;
}
.colonnes2{
	column-count: 2;
	column-gap: 35px;
	/* margin-bottom: 85px; */
}
.colonnes2 h3, .colonnes2 p{
	margin-top: 0;
}
.colonnes2 img{
	max-width: 100%;
	height: auto;
}
.flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
	/* gap: 5%; */
	max-width: 100%;
	width: 100%;
}
.membre-equipe{
	flex-grow: 2;
	max-width: 40%;
}
.nobreak{
	break-inside: avoid;
}
.fd-dechire.rose ul{
	list-style-type: disc;
	list-style-position: outside;
	color: #fff;
	font-family: avenir, cambria, serif;
}
body{
	padding: 0;
	margin: 0;
	background-image: url("../../images/structure/fond-marron-2000.jpg");
	background-size: contain;
	background-repeat: repeat;
	background-position: bottom center;
	min-height: 100vh;
	height: auto;
	scroll-behavior: smooth;
	scroll-snap-type: y proximity; 
}
header{
	background-image: url("../../images/structure/fond-dechire-entete-2.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	height: auto;
	position: fixed;
	z-index: 100;
	width: 100%;
	top: 0;
}
header img{
	width: 100%;
	height: auto;
}
nav{
	background-image: url('../../images/structure/fond-menu-2000.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding-top: 15.5vw;
	width: 100%;
	min-height: 7.3vw;
	height: auto;
	position: fixed;
	z-index: 50;
}
nav .largeur-site{
	max-width: 1100px;
	width: 95%;
	margin: 0 auto;
	position: relative;
	top: -2vh;
}
nav ul{
	margin: auto;
	list-style: none;
	width: 95%;
	display: flex;
	padding: 0px 0 30px 0;
	justify-content: space-between;
}
nav ul li{
	display: inline-block;
	align-self: center;
	font-family: "Ampersand", manuscrit;
	color: #ffffff;
	font-size: 30px;
	text-align: center;
	line-height: 28px;
}
nav li.active{
	color: #f4ea88;
}
#main-content{
	padding-top: 25.5vw;
	scroll-margin-top: 21.5vw;
	scroll-behavior: smooth;
	margin-bottom: 45px;
}
#rgpd{
	scroll-margin-top: 21.5vw;
}
#main-content div{
	scroll-margin-top: 21.5vw;
}
.fd-dechire > div{
	height: auto;
	position: relative;
	z-index:60;
}
#presentation{
	margin-bottom: 235px;
}
#presentation img{
	float: left;
	margin-right: 25px;
	padding-bottom: 1px;
	vertical-align: text-bottom;
}
#presentation p{
	color: #ffffff;
}
#ateliers .largeur-site{
	width: 45%;
	margin: 0 auto;
}
#lequipe.fd-dechire{
	padding-bottom: 0px;
	/* margin-bottom: -8.55vw; */
	margin-bottom: 0;
}
#lequipe .largeur-site{
	/* margin-bottom: -16vw; */
}
.photo-equipe img{
	max-width: 85%;
	height: auto;
}
#contact.fd-dechire{
	padding-bottom: 0px;
	margin-bottom: -8.55vw;
	margin-bottom: 200px;
}
#contact .largeur-site{
	margin-bottom: -20vw;
}
h2.titre{
	text-align: center;
	font-size: 40px;
	margin-top: 0;
}
#actu .largeur-site{
	position: absolute;
	height: auto;
	left: calc((100vw - 1000px) / 2);
	top: 0;
}
#mentions.fd-dechire .largeur-site {
  top: -8.55vw;
  margin-bottom: -11vw;
}
#mentions.fd-dechire {
  padding-bottom:0;
}
#mentions.fd-dechire .bgimgbas {
  top: 8vw;
}
footer{
	margin-bottom: 35px;
	padding-top: 130px;
	text-align: center;
}
footer p{
	text-align: center;
	color: #ffffff;
	max-width: 90%;
	margin: auto;
}

/* CONTACT */
#contact form{
	width: 55%;
	margin: 25px auto;
	border: solid white 1px;
	padding: 15px;
	color: #ffffff;
	font-family: avenir, cambria, serif;
}
#contact form label{
	width: 145px;
	display: inline-block;
	text-align: right;
	margin-right: 10px;
	vertical-align: top;
	margin-bottom:5px;
}
#contact form input, #contact form textarea{
	width: 350px;
	border: solid white 1px;
}
#contact form input[type="submit"]{
	width: 50%;
	display: block;
	border: solid white 1px;
	background-color: transparent;
	color: #ffffff;
	margin: 25px auto;
	padding: 12px;
}
#contact form input[name="recontact"], #contact form label[for="recontact"]{
	display: none;
}



/* QUALIOPI */
#qualiopi #evaluation .colonnes2 {
  margin-bottom: 0!important;
}

/* RESPONSIVE */
@media screen and (max-width: 1080px){
	nav {
	  padding-top: 19vw;
	  min-height: 14vw;
	}
	#main-content{
	  padding-top: 30.5vw;
	  scroll-margin-top: 30.5vw;
	}
	#main-content div{
	  scroll-margin-top: 32.5vw;
	}
	.largeur-site {
	  top: 0;
	}
}
/* MOBILE */
@media screen and (max-width: 767px) {
	header{
		background-image: url("../../images/structure/fond-dechire-entete-800.png");
	}
	body{
		background-image: url("../../images/structure/fond-marron-800.png"); 
		background-size: contain;
		background-repeat: repeat;
		background-position: top center;
	}
	.largeur-site {
		max-width: 95%;
		width: 85%;
	}
	#openclose{
		display: block;
		position: absolute;
		top: 39.2vw;
		text-align: center; 
		width:100%;
		z-index: 500;
	}
	nav{
		background-image: url('../../images/structure/fond-menu-800.png');
		background-size: contain;
		background-position: bottom left;
		padding-top: 0;
		min-height: 200px;
		height: calc(39.2vw + 85px);
		top: 0;
	}
	nav ul, nav ul.ouvert {
		margin: auto;
		position: relative;
		padding-top: calc(39.2vw + 100px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 55vh;
		top: 0;
	}
	nav ul.ferme{
		display: none;
	}
	nav ul li{
		/* display: block; */
	}
	#main-content {
		padding-top: calc(39.2vw + 100px);
		scroll-margin-top: calc(39.2vw + 100px);
	}
	#main-content > div {
		scroll-margin-top: calc(39.2vw + 100px);
		max-width: 100%;

		height: auto;
		position: relative;
	}
	#main-content #presentation{
		top: 0;
		margin-bottom: 45px;
	}
	#presentation img {
		float: none;
		margin: 0;
		padding: 0;
		max-width: 100%;
		height: auto;
	}
	#actu .largeur-site {
		position: relative;
		height: auto;
		left: auto;
	}
	#actu img.float {
	  float: none;
	}
	.fd-dechire{
		margin: 0px auto;
		padding: 15px 0 85px 0;
		/* scroll-margin-top: calc(39.2vw + 100px); */
		top: 0;
	}
	.fd-dechire .bgimght, .fd-dechire.rose .bgimght {
		top: -11vw;
	}
	#ateliers .largeur-site, .largeur-site  {
		width: 80%;
	}
	.colonnes2 {
		column-count: 1;
	}
	.flex, .membre-equipe{
		display: block;
		max-width: 100%;
	}
	.demandeinfo {
	  width: 85%!important;
	  margin: 25px auto;
	}
	#contact form {
	  width: 90%;
	}
	#contact form label {
	  max-width:90%;
	  display: inline-block;
	  text-align: left;
	  margin-right: 0px;
	  vertical-align: top;
	  margin-bottom: 5px;
	}
	#contact form input, #contact form textarea {
	  max-width: 97%;
	}
	#contact.fd-dechire {
	  margin-bottom: 75px;
	}
	footer{
		margin-bottom: 0;
		padding-top: 0px;
		text-align: center;
	}
}