*{
    margin: 0;
    padding: 0;
    z-index: 2;

}

html{
  width: 100vw;
  overflow-x: hidden;
}

::selection{
  color: black;
  background: rgba(133,245,124,0.8);
}

* img{
    z-index: 1;
}


body::-webkit-scrollbar-bottom {
 
    display: none;
 
}


header{
	position: relative;
	z-index: 0;
	top: 54px;
}


header .fond-ordi img{
	position: absolute;
	width: 100vw;
	height: 525px;
	z-index: -1;
	top: 0;
}

header .fond-responsive img{
	display: none;
}

header .titre-page{
	position: relative;
	top: 0;
	width: 100vw;
	height: 525px;
	background-color: rgba(0, 0, 0, 0.35);
}


.patterns {
	position: relative;
  	height: 525px;
  	padding-top: 200px;
}

svg text {
  font-family:'Righteous', cursive;
  letter-spacing: 10px;
  stroke: #fff;
  font-size: 135px;
  font-weight: 700;
  stroke-width: 3;
 
  animation: textAnimate 5s infinite alternate;
}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(0, 1%, 75%)

  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(0, 1%, 75%,0%)
  }
  
}



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

	header{
		position: initial;
		margin-top: 65px;
		z-index: 1;
	}

	header .fond-responsive img{
		display: block;
		width: 100vw;
		height: 500px;
	}

	header .fond-ordi img{
		display: none;
	}


	header .titre-page{
		position: absolute;
		top: 65px;
		width: 100vw;
		height: 500px;
		background-color: rgba(0, 0, 0, 0.25);
	}


	.patterns {
		position: relative;
  		height: 500px;
  		padding-top: 0px;
	}

	svg text {
  		font-family:'Righteous', cursive;
  		letter-spacing: 4px;
  		stroke: #fff;
  		font-size: 80px;
  		font-weight: 400;
  		stroke-width: 3;
  		animation: textAnimate 4s infinite alternate;
	}


}



.Principale{
	width: 100vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-top: 65px;
	color: black;
}

.Principale .Actu{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 65vw;
	/*background: #14103b;*/
	
}

.Principale .Actu h2{
	margin-left: 50px;
	font-size: 2.7em;
	font-family: 'Baloo Da 2', cursive;
	/*font-family: 'Arima Madurai', cursive;*/
}

.Principale .Actu .Info{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 20px 0;
	padding: 20px 40px;
	/*background: rgba(255, 255, 255, 0.05);*/
	background-color: #fff;
	-webkit-box-shadow: 17px 13px 74px -35px rgba(0,0,0,0.41);
-moz-box-shadow: 17px 13px 74px -35px rgba(0,0,0,0.41);
box-shadow: 17px 13px 74px -35px rgba(0,0,0,0.41);


}

.Principale .Actu .Info .texte{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 30px 30px 0 40px;
}

.Principale .Actu .Info .texte h3{
	font-family: 'Mukta', sans-serif;
	font-size: 2.2em;
	padding-bottom: 10px;
}

.Principale .Actu .Info .texte p{
	font-family: 'Bellota Text', cursive;
	font-size: 1.2em;
	text-align: justify;
	text-justify: inter-word;
}

.Principale .Actu .Info .texte a{
	font-family: 'Bellota Text', cursive;
	font-size: 1.2em;
	background: rgba(0, 0, 0, 1);
	padding: 10px; 
	text-align: center;
	width: auto;
	color: white;
	font-weight: 600;
	margin: 20px 0;
}

.Principale .Actu .Info .texte a:hover{
	background: rgba(0, 0, 0, 0.8);
	transition: 1s;
	text-decoration: none;
}

.Principale .Actu .Info img{
	width: 350px;
	margin: 20px 0 20px 0;

}



.Principale .Agenda{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 33vw;
	float: right;
}

.Principale .Agenda h2{
	margin-left: 50px;
	font-size: 2.7em;
	font-family: 'Baloo Da 2', cursive;
	float: right;
}

.Principale .Agenda .contenerAgenda{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #828282;
	margin: 21px 20px 40px 60px;
}

.Principale .Agenda .contenerAgenda .date{
	text-align: center;
	padding: 30px;
	font-family: 'Cousine', monospace;
	color: white;
}

.Principale .Agenda .contenerAgenda .date p{
	font-size: 0.9em;
}

.Principale .Agenda .contenerAgenda .date span{
	font-size: 5em;
	font-family: 'Fredericka the Great', cursive;
	margin: 0;
}

.Principale .Agenda .contenerAgenda .date h4{
	font-size: 1.4em;
	margin: 0;
	text-transform: uppercase;
}

.Principale .Agenda .contenerAgenda .info-date{
	padding: 30px;
	background: #d7d7d7;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

.Principale .Agenda .contenerAgenda .info-date p{
	font-size: 1.4em;
	margin-bottom: 50px;

}

.Principale .Agenda .contenerAgenda .info-date a{
	font-size: 1.2em;
	background: #828282;
	padding: 10px 30px;
	border-radius: 10px;
	color: white; 
}

.Principale .Agenda .contenerAgenda .info-date a:hover{
	clip-path: polygon(82% 0, 100% 50%, 82% 100%, 0% 100%, 12% 52%, 0% 0%);
	text-decoration: none;

}

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


.Principale{
	flex-direction: column;
	margin-top: 30px;
}

.Principale .Actu .Info{
	flex-direction: column;
	width: 85vw;
	margin-left: 7%;
	padding: 15px;
	border: solid black 1px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;

}

.Principale .Actu .Info .texte{
	margin: 0;
	padding: 5px 15px;
}


.Principale .Actu .Info img{
	max-width: 275px;
	margin: auto;

}

.Principale .Agenda{
	margin-top: 40px;
	width: 95vw;
}

.Principale .Agenda .contenerAgenda .info-date{
	padding: 20px;

}

.Principale .Agenda .contenerAgenda{
	margin-left: 30px;

}


.Principale .Agenda .contenerAgenda .info-date a{
	font-size: 1.2em;
	padding: 10px 10px;
	border-radius: 10px;
}

}


.title{
	display: flex;
	flex-direction: row;
	margin: 110px 0 30px 0;
	color: black;
}

.title div{
	width: 300px;
	height: 1px;
	background-color: black;
}

.title h2{
	margin: -12px 0 0 0;
	padding: 0; 
	font-size: 4em;
	font-family: 'Baloo Da 2', cursive;
}


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

.title{
	margin: 90px 0 30px 0;
}

.title div{
	width: 100px;
	height: 1px;
	background-color: black;
}

.title h2{
	margin: -12px 0 0 0;
	padding: 0; 
	font-size: 3em;
	font-family: 'Baloo Da 2', cursive;
}

}


.Abaslieux{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100vw;
	margin-bottom: 20px;
}


.Abaslieux .ContenerB{
	margin-left: 40px;
}

.Abaslieux .ContenerB .lieu{
	position: relative;
}

.Abaslieux .ContenerB .lieu img{
	width: 350px;
	height: 300px;
}

.Abaslieux .ContenerB .lieu h3{
	width: 330px;
	position: absolute;
	bottom: 0;
	padding: 23px 0 23px 10px;
	color: white;
	background: rgba(0,0,0,0.6);

}


.Abaslieux .ContenerB .description{
	width: 390px;
	height: 450px;
	padding: 130px 30px 30px 30px;
	background: rgba(0,0,0,0.9); 
	clip-path: polygon(25% 25%, 25% 0, 45% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%);
	text-align: justify;
	text-justify: inter-word;
	color: white;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
	font-size: 1.2em;
}

.Abaslieux .ContenerB .description img{
	width: 30px;
}

.Abaslieux .ContenerB .description a{
	font-family: 'Zen Kurenaido', sans-serif;
	color: white;
	font-size: 1.1em;
}

.Abaslieux .ContenerB .description img:hover,
.Abaslieux .ContenerB .description a:hover{
	transition: 1s;
}


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

.Abaslieux{
	display: flex;
	flex-direction: column;
}

.Abaslieux .ContenerB{
	margin-left: 40px;
}

.Abaslieux .ContenerB .description{
	margin-bottom: 60px;
	width: 310px;
	height: 560px;
}

.Abaslieux .ContenerB .description p{
	padding-top: 30px;
}

.Abaslieux .ContenerB .lieu img{
	width: 300px;
	height: 300px;
}

.Abaslieux .ContenerB .lieu h3{
	width: 300px;

}
}



.conseil{
	display: flex;
	flex-direction: row;
	margin: 30px 18%;
	margin-top: 100px;
}

.conseil img{
	width: 500px;
}

.conseil .texte{
	width: 370px;
	background: #cc830c;
	opacity: 85%;
	padding: 20px 40px 0 40px;
}

.conseil .texte h2{
	color: white;
	font-family: 'Chonburi', cursive;
	font-size: 3.3em;
}

.conseil .texte p{
	color: white;
	font-family: 'Baloo Tamma 2', cursive;
	font-size: 2em;
	text-align: center;
	border-left: solid 1px black;
	padding: 20px 0 15px 10px;
	margin-top: 45px;
	margin-bottom: 40px; 
}

.conseil .texte a{
	color: white;
	font-family: 'Koh Santepheap', cursive;
	font-size: 1.9em;
	text-align: center;
	border: solid 1px white;
	padding: 10px;
	margin-left: 40px;
}

.conseil .texte a:hover{
	text-decoration: none;
	background-color: rgba(255,255,255,0.2);
	transition: 0.7s;
	}


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

	.conseil{
	flex-direction: column;
	margin: 50px 20px;
}

.conseil img{
	width: 90vw;

}

.conseil .texte{
	width: 90vw;
}
}



.delib {
	margin: 20px 80px 20px 80px;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

.delib ul{
	list-style-image: url(/Image-Mairie/redaction-de-contenu.png);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 100px;
}

.delib ul li {
	margin: 10px 10px;
}

.delib ul li h3{
	margin: 0;
	font-size: 1.8em;
	padding-right: 20px;
	line-height: 35px;
}

.delib ul li a{
	margin: 0;
	font-size: 1.7em;
	color: black;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 10px 25px;
	border-radius: 15px;
	text-align: center;
}

.delib ul li a:hover{
	background-color: rgba(0, 0, 0, 0.5);
    transition: 1s;
    text-decoration: none;
}


.Commune{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 70px;
}


.Box-commune{
	width: 400px;
	min-height: 500px;
	border-left: solid 1px;
	text-align: center;
	padding: 40px;
}

.Box-commune ul li{
	margin-left: 20px;
	margin-top: 20px; 
	font-size: 2.5em;
	text-align: left;
	font-family: 'Baloo Da 2', cursive;
	list-style-image: url(/Image-Mairie/icone.png);

}

.Box-commune p{
	font-family: 'Baloo Tamma 2', cursive;
	font-size: 1.3em;
	text-align: justify;
	text-justify: inter-word;
}

.Box-commune a{
	font-family: 'Baloo Tamma 2', cursive;
	font-size: 1.3em;
	text-align: justify;
	text-justify: inter-word;
	color: black;
}

.Box-commune a:hover{
	font-size: 1.4em;
	color: black;
	text-decoration: none;
	transition: 0.5s;
}

.Box-commune img{
	width: 180px;
	margin: auto;
}

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

.Commune{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 0px;
}

.Box-commune{
	width:350px;
	margin: 30px 0;
}


}


.PLU{
    position: relative;
    margin: 70px 150px;
    padding: 15px 30px;
    background: #6da855;
    height: auto;
    width: 75vw;
    display: flex; 
}

.expli-PLU{
    width: 73%;
}

.PLU h3{
    color: white;
    font-family: 'Noto Sans HK', sans-serif;
}

.PLU p{
    color: white;
    text-align: justify;
    text-justify:inter-word;
    padding-left: 15px; 
    font-family: 'Nunito', sans-serif;
    font-size: 1.1em;
}

.PLU .expli-PLU a{
    color: #bfbfbf;
}

.PLU .ZonePLU{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-left: 40px;
}

.PLU .ZonePLU a{
    padding: 10px 20px;
    font-size: 1.3em;
    background-color: white;
    color: green;
    width: 130px;
    margin-bottom: 7px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 900px) {

.PLU{
    margin: 70px 20px;
    padding: 20px 40px;
    width: 90vw;
    display: block;
}

.PLU p{
    padding: 5px 0px;
}

.expli-PLU{
    width: 100%;
}

.PLU .ZonePLU{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-left: -1px;
    margin-top: 30px;
}

.PLU .ZonePLU a{
    margin-left: 3.5px;

}
}


.box-legal{
	text-align: center;
	margin: 50px 0 60px 0;

}

.box-legal a{
	text-align: center;
	padding: 15px 100px;
	margin: 20px 20px;
	color: black;
	background-color: rgba(177, 177, 177, 0.60);
	font-size: 1.5em;
}


.box-legal a:hover{
background-color: rgba(177, 177, 177, 0.90);
color: black;

}

@media (max-width: 900px) {

.box-legal{
	display: flex;
	flex-direction: column;
	margin: 20px 0 40px 0;

}

.box-legal a{
	text-align: center;
	padding: 15px 40px;
	margin: 20px 20px;
}
}



.RGPD-content{
    width: 90%;
    justify-content: justify;
    text-justify: inter-word;
    margin: 0 auto;
    padding-right: 30px;
    padding-left: 10px;
}

.RGPD-content h2{
    border-top: 1px #800000 solid;
    border-bottom: 1px #800000 solid;
    padding: 15px 0;
    margin-top: 50px;
}


.fb{
  position: fixed;
  bottom: 7%;
  right: 4%;
  z-index: 999;
  width: 60px;
  height: 60px;
  background-color: #3b5998;
  border-radius: 50%; 
}

.fb a{
  color: white;
  line-height: 60px;
  margin-left: 24px;
  font-size: 1.3em; 
}

.fb:hover{
  background: #4c70ba;
  cursor: pointer;
}

.fb a:hover{
  color: white;
}


.Equipe-Mun{
	margin-top: 100px;
}

.Equipe-Mun .Mun{
	width: 100vw;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 50px;
}


.Equipe-Mun .Mun .contener{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 10px;
}

.Equipe-Mun .Mun .contener .box{
	margin: 20px 20px 10px 20px;
	padding: 5px 40px 20px 40px;
	text-align: center;
	border-top: 1px solid black;
}

.Equipe-Mun .Mun  h3{
	font-size: 2.3em;
	color: black;
}

.Equipe-Mun .Mun .contener .box h4{
	font-size: 2em;
	color: black;
	margin: 5px 0 25px 0;
}

.Equipe-Mun .Mun .contener .box p{
	font-size: 1.5em;
	color: black;
	margin: 15px 0 0 0
}

.Equipe-Mun .Mun .contener .box p span{
	text-transform: uppercase;
}

.Equipe-Mun .Mun .contener .box img{
	width: 200px;
}

@media (max-width: 900px) {

.Equipe-Mun{
	margin-top: 20px;
}

}



.essentiel{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 50px;
}

.essentiel .box{
	position: relative;
	width: 325px;
	height: 325px;
	margin-bottom: 50px;
}

.essentiel .box img{
	z-index: -5;
	position: absolute;
	width: inherit;
	height: inherit;
	top: 0;
	left: 0;
}

.essentiel .box .texte h4{
	z-index: 5;
	color: white;
	text-align: center;
	font-size: 1.8em;
	padding: 30px 20px 0 20px;
	height: 100px;

}

.essentiel .box .texte p{
	z-index: 5;
	text-align: center;
	margin-top: 130px; 
}

.essentiel .box .texte a{
	color: white;
	font-size: 1.5em;
	padding: 10px;
	border: 1px solid white;
}


.essentiel .box .texte a:hover{
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.5);
	transition: 0.5s;
}



.slide{
	display: flex;
	justify-content: center;
}

.gallery {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(10, 60vw);
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: scroll;
	height: 80vh;
	width: 70vw;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
	margin: 50px 0;
}

.gallery .active {
	scroll-snap-type: unset;
}

.gallery li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 3px;
	font-size: 0;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	min-width: 500px;
	height: auto;
}





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

.gallery {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(10, 91vw);
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: scroll;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
	height: 70vh;
	width: 90vw;
	margin: 10px 0;
}

.gallery li {
	position: relative;
	min-width: 90vw;
	height: auto;
	border-radius: 3px;
}


}