*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
  	object-fit: cover;
  	text-decoration: none;
  	font-family: Arial;
}

@font-face{
	src:url(fonts/Grotesk.ttf);
	font-family: grotesk;
}

/*****--**-----*****--|!|-*****-----**--*****/
	body{
		overflow-x: hidden;
		transition: 0.3s;
	}
/*****--**-----*****--§§§-*****-----**--*****/

/*****--**-----*****--|CHARGEMENT|-*****-----**--*****/
	#loading {
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        transition: opacity 1s ease-out;
    }

    #loading .text-line {
        stroke-width: 1px;
        stroke-dasharray: 5000;
        stroke-dashoffset: 5000;
        animation: dash 1.8s linear forwards 0.3s, filling 1s ease-in forwards 0.8s;
        width: 240px;
        fill: rgba(255, 255, 255, 0);
    }

    #loading .cls-1 {
		stroke: white;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes filling {
        0%, 70% { fill: #fff; fill-opacity: 0; }
        100% { fill: #fff; fill-opacity: 1; }
    }
/*****--**-----*****--|CHARGEMENT|-*****-----**--*****/

/*FACEBOOK*/
	#logofacebook{
		position: fixed;
		bottom: 36px;
		left: 56px;
		width: 56px;
		transition: 0.3s;
		z-index: 9999;
	}

	#logofacebook:hover {
		transform: scale(1.1);
	}

	@media screen and (max-width: 576px){
		#logofacebook{
		    top: 21px;
		    right: 21px;
		    width: 56px;
		    bottom: inherit;
		    left: inherit;
		    z-index: 9999;
		}
	}
/*****--**-----*****--|HEADER|-*****-----**--*****/
	#backgroundaccueil {
	    width: 100%;
	    opacity: 0;
	    position: absolute;
	    bottom: -25vh;
	    left: -50%;
	    transform: scale(2);
	    transform-origin: center center;
	    animation: chargementpageblanche 1s ease-in forwards 1s;
	}

	@keyframes chargementpageblanche {
        0%, 70% { opacity: 0; }
        100% { opacity: 1; }
    }

	#backgroundaccueil .cls-2{
		fill: white;
	}

	header{
		padding: 16px;
		min-height:100vh;
		display: flex;
		flex-direction: column;
	}

	header #logovecoux{
		position: absolute;
		top: 16px;
		width: 38vw;
	}

	header #infos{
		text-align: right;
		display: flex;
		flex-direction: column;
	}

	header #infos a{
		display: block;
		color: black;
	}

	header nav{
		padding: 8% 0;
		z-index: 999;
		position: sticky;
		top: 30vh;
	}

	header nav a{
		width: fit-content;
	    margin: 6px 0 6px auto;
	    padding: 6px 31px;
	    transition: 0.3s;
	    cursor: pointer;
	    text-align: right;
	    display: flex;
	    align-items: center;
	}

	header nav a h2{
		color: white;
		font-family: grotesk;
		text-decoration: none;
		margin-left: 21px;
	}

	header nav a:nth-child(1){
		background-color: orange;
	}

	header nav a:nth-child(2){
		background-color: dodgerblue;
	}

	header nav a:nth-child(3){
		background-color: hotpink;
	}

	header nav a:nth-child(4){
		background-color: #202071;
	}

	header nav a:nth-child(5){
		background-color: darkslategrey;
	}

	header nav a #pictoPlan,
	header nav a #pictoAssoEco,
	header nav a #pictoEnfance,
	header nav a #pictoInfos,
	header nav a #pictoVieMunicipale{
		display: block;
		fill: white;
		width: 42px;
		height: 42px;
		margin: 9px;
	}

	header nav a svg{
		transition: 0.3s;
	}
	/*header nav a:hover svg{
		transform: scale(1.3);
	}*/

	header #horaires{
		padding-bottom: 5vh;
		margin-top: 37vw;
	}

	header #horaires div p{
		font-family: "interstate", sans-serif;
          font-weight: 600;
          font-style: normal;
	}

	header #horaires aside{
		font-size: 12px;
		margin-top: 6px;
	}

	header #teletmail{
		display: flex;
  		flex-direction: column;
  		justify-content: end;
  		align-items: end;
	}

	header #teletmail a{
		font-family: "interstate", sans-serif;
          font-weight: 600;
          font-style: normal;
          font-size: 21px;
          padding: 2px 0 2px 6px;
	}
	/*****--**-----*****--|HEADER TABLETTE|-*****-----**--*****/
		@media screen and (min-width: 576px){
			#backgroundaccueil {
			    bottom: -10vh;
			}

			header{
				padding: 46px;
			}

			header #logovecoux{
				width: 140px;
				padding-top: 16px;
			}

			header #infos{
				flex-direction: row-reverse;
				justify-content: space-between;
			}

			header #horaires{
				margin-top: 0;
			}

			header #horaires div p {
			    font-size: 16px;
			}

			header #horaires aside {
			    font-size: 14px;
			    margin-top: 11px;
			}

			header #teletmail{
				text-align: left;
				align-items: start;
				padding-top: 20vh;
				z-index: 1000;
			}

			header nav a{
				margin: 12px 0 12px auto;
    			padding: 16px 31px;
			}

			header nav a h2{
				font-size: 4.5vw;
				max-width: 70vw;
			}

			header nav a #pictoPlan,
			header nav a #pictoAssoEco,
			header nav a #pictoEnfance,
			header nav a #pictoInfos,
			header nav a #pictoRegle,
			header nav a #pictoVieMunicipale,{
				width: 31px;
        		height: 36px;
        		margin: 0;
			}
		}
	/*****--**-----*****--|HEADER TABLETTE|-*****-----**--*****/

	/*****--**-----*****--|HEADER DESKTOP|-*****-----**--*****/
		@media screen and (min-width: 960px){
			#backgroundaccueil{
				width: 100%;
				position: absolute;
				bottom: -50vh;
				left: 0;
				transform: scale(1);
	    		transform-origin: center center;
			}

			header{
				height: 140vh;
			}

			header{
				width: 70%;
				margin: auto;
			}

			header nav{
				padding: 0;
			}

			header nav a:hover{
				   padding: 16px 41px;
			}

			header nav a{
				justify-content: flex-end;
			}

			header #teletmail a:hover{
				color: blue;
			}

			/*HEADER NAV ANIMATIONS*/
				header nav a {
				    text-decoration: none;
				    color: var(--color-link);
				    outline: none;
				}

				header nav a h2{
				    font-size: 24px;
				}

				header nav a h2{
					text-decoration:none!important;
					font-size: 24px;
				}
			/*HEADER NAV ANIMATIONS*/
		}
	/*****--**-----*****--|HEADER DESKTOP|-*****-----**--*****/
/*****--**-----*****--|HEADER|-*****-----**--*****/

/*****--**-----*****--|ACTUS|-*****-----**--*****/
		#actus{
			background-color: #fcc331;
		}

		#actus h1{
			padding-top: 40vh;
			margin: 0;
			font-family: Grotesk;
			font-size: 54px;
			text-align: center;
			color: black;
		}

		#actus .sign-preview__title, #actus .dropup, #actus .sign-preview__actions{
			display: none;
		}

		#actus .date{
			color:red;
			font-family: "interstate", sans-serif;
			font-size: 21px;
		}

		#actus .sign-preview{
			padding: 28px;
			font-family: "interstate", sans-serif;
			color: black;
		}

		#actus .content a img{
			width: 100vw;
			margin: 21px -28px 0px -28px;
		}

		#actus .custom-nav{
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#actus .custom-nav button{
			width: 50%;
			padding: 12px;
		    border: none;
		    background-color: white;
		    color: black;
		    font-family: "interstate", sans-serif;
		    font-size: 24px;
		    font-weight: 700;
		}

		@media screen and (min-width: 576px){
			#actus h1{
				padding-top: 50vw;
			}
		}

		@media screen and (min-width: 960px){
			#actus{
				height: auto;
				min-height: 80vh;
				padding: 36px 54px 72px 54px;
				position: relative;
				background-color: #fcc331;
			}

			#actus h1{
				margin: 0;
				font-size: 4vw;
				padding-top: 0;
				text-align: inherit;
			}

			#actus .sign-preview__title, #actus .dropup, #actus .sign-preview__actions{
				display: none;
			}

			#actus .sign-nav{
				padding: 12px;
			}

			#actus .sign-nav .action{
				background-color: purple;
				padding: 12px;
			}

			#actus .sign-preview{
				width: calc(50% - 72px);
				font-family: "interstate", sans-serif;
				color: black;
			}

			#actus .content a img{
				position: absolute;
				right: 0;
				top: 0;
				height: 80vh;
				width: 50vw;
				margin: 0;
				object-fit: contain;
			}

			#actus .custom-nav{
				position: absolute;
				bottom: 0;
				width: 50vw;
				margin-left: -54px;
			}

			#actus .custom-nav button:hover{
				cursor: pointer;
				background-color: black;
			    color: white;
			}
		}
/*****--**-----*****--|ACTUS|-*****-----**--*****/

/*****--**-----*****--|PANNEAU POCKET|-*****-----**--*****/
	#panneaupocket{
		background-color: #202071;
	}

	#panneaupocket #panneaupocketlogomobile{
		display: block;
		padding-top: 54px;
		padding-bottom: 46px;
		margin: 0 auto -23% auto;
		width: 35%;
		overflow: visible;
		display: block;
	}

	#panneaupocket #panneaupocketlogodesktop{
		display: none;
	}

	#panneaupocket #panneaupocketlogomobile #PPocket2,
	#panneaupocket #panneaupocketlogodesktop #PPocket2{
		animation: bounce 4s ease infinite;
    }

    @keyframes bounce {
	    0%, 10%, 30%, 60%, 100% {
	        transform: translateY(0);
	    }
	    20% {
	        transform: translateY(-10%);
	    }
	    40% {
	        transform: translateY(-5%);
	    }
	    60%, 100% {
	        transform: translateY(0); /* Assure la position de départ pour la pause */
	    }
	}

	#panneaupocket #panneaupocketlogomobile #PPocket1,
	#panneaupocket #panneaupocketlogodesktop #PPocket1{
		-webkit-animation: pulsate-fwd 1s ease-in-out infinite both;
	        	   animation: pulsate-fwd 1s ease-in-out infinite both;
	        	   transform-origin: center;
		}

		@-webkit-keyframes pulsate-fwd {
		  0% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		  50% {
		    -webkit-transform: scale(1.1);
		            transform: scale(1.1);
		  }
		  100% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}
		@keyframes pulsate-fwd {
		  0% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		  50% {
		    -webkit-transform: scale(1.1);
		            transform: scale(1.1);
		  }
		  100% {
		    -webkit-transform: scale(1);
		            transform: scale(1);
		  }
		}

	#panneaupocket #panneaupocketdownload{
		background-color: #202071;
		padding: 21px;
	}

	#panneaupocket #panneaupocketdownload p{
		text-align: center;
		margin: 3px;
		color: white;
		font-family: "interstate", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 21px;
	}

	#panneaupocket #panneaupocketdownload p:nth-child(1){
		padding-top: 86px;
	}

	#panneaupocket #panneaupocketdownload p:nth-child(2){
		padding-bottom: 21px;
	}

	#panneaupocket #panneaupocketdownload a svg{
		display: block;
		margin: auto;
		width: 80vw;
    	padding: 12px;
	}

	#panneaupocket #panneaupocketdownload div a svg #fondAS,
	#panneaupocket #panneaupocketdownload div a svg #fondGP{
		fill: white;
	}

	#panneaupocket #panneaupocketdownload div a svg #logoGP #path1720{
		fill: #E1372B;
	}
	#panneaupocket #panneaupocketdownload div a svg #logoGP #path1722{
		fill: #F6B20E;
	}
	#panneaupocket #panneaupocketdownload div a svg #logoGP #path1724{
		fill: #4775F2;
	}
	#panneaupocket #panneaupocketdownload div a svg #logoGP #path1726{
		fill: #339C47;
	}

	#panneaupocket #panneaupocketdownload div a:hover svg #appStore path,
	#panneaupocket #panneaupocketdownload div a:hover svg #telechargerdansAS path,
	#panneaupocket #panneaupocketdownload div a:hover svg #logoAS path,
	#panneaupocket #panneaupocketdownload div a:hover svg #googlePlay,
	#panneaupocket #panneaupocketdownload div a:hover svg #telechargerdansGP path,
	#panneaupocket #panneaupocketdownload div a:hover svg #logoGP path{
		fill: white;
	}

	#panneaupocket #panneaupocketdownload div a:hover svg #fondAS,
	#panneaupocket #panneaupocketdownload div a:hover svg #fondGP{
		fill: black;
	}
	#panneaupocket #panneaupocketdownload div a:hover svg #appStore path,
	#panneaupocket #panneaupocketdownload div a:hover svg #telechargerdansAS path,
	#panneaupocket #panneaupocketdownload div a:hover svg #logoAS path,
	#panneaupocket #panneaupocketdownload div a:hover svg #googlePlay,
	#panneaupocket #panneaupocketdownload div a:hover svg #telechargerdansGP path,
	#panneaupocket #panneaupocketdownload div a:hover svg #logoGP path{
		fill: white;
	}

	/*****--**-----*****--|PANNEAU POCKET TABLETTE|-*****-----**--*****/
		@media screen and (min-width: 576px){
			#panneaupocket #panneaupocketdownload{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 0;
				padding: 21px 36px;
			}

			#panneaupocket #panneaupocketlogomobile{
				display: none;
			}

			#panneaupocket #panneaupocketlogodesktop{
				display: block;
				width: 33%;
				max-width: 120px;
				overflow: visible;
			}

			#panneaupocketdownload a svg {
    				width: 30vw!important;
    				max-width: 290px;
    			}

			#panneaupocket #panneaupocketdownload div:nth-child(1){
				width: 33%;
			}

			#panneaupocket #panneaupocketdownload div:nth-child(3){
				width: 33%;
			}

			#panneaupocket #panneaupocketdownload div p{
				text-align: left;
			}

			#panneaupocket #panneaupocketdownload p:nth-child(1),
			#panneaupocket #panneaupocketdownload p:nth-child(2){
				padding: 0;
			}

		}
	/*****--**-----*****--|PANNEAU POCKET TABLETTE|-*****-----**--*****/

	/*****--**-----*****--|PANNEAU POCKET DESKTOP|-*****-----**--*****/
		@media screen and (min-width: 960px){
			#panneaupocket #panneaupocketdownload{
				padding: 21px 10vw;
			}
		}
	/*****--**-----*****--|PANNEAU POCKET DESKTOP|-*****-----**--*****/
/*****--**-----*****--|PANNEAU POCKET|-*****-----**--*****/

/*****--**-----*****--|NEWSLETTER|-*****-----**--*****/
	#sectionnewsletter{
		background-color: black;
		padding: 7vw;
		padding-bottom: 12vw;
		text-align: center;
		color: white;
	}

	#sectionnewsletter label{
		padding: 12px 12px 21px 12px;
		display: block;
	}

	#sectionnewsletter div{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	#sectionnewsletter div input{
		width: 100%;
    	max-width: 390px;
    	border-radius: 1000px;
    	padding: 9px 31px;
    	border: solid white 2px;
    	font-size: 21px;
    	margin-bottom: 21px;
	}

	#sectionnewsletter div button{
		width: 100%;
	    border-radius: 1000px;
    	padding: 9px 21px;
    	border: solid white 2px;
    	background-color: black;
    	color: white;
    	font-weight: 700;
    	font-size: 21px;
	}

	#sectionnewsletter label, #sectionnewssletter div input, #sectionnewssletter div button{
		font-family: "interstate", sans-serif;
		font-weight: 500;
		font-size: 21px;
	}

	#sectionnewsletter div button:hover{
    	background-color: #fcc331;
    	border: solid white 2px;
    	cursor: pointer;
    	color: black;
	}

	@media screen and (min-width: 576px){
		#sectionnewsletter{
			padding: 96px 56px 114px 56px;

		}

		#sectionnewsletter div{
			flex-direction: row;
		}

		#sectionnewsletter div input{
			width: 70%;
	    	border-radius: 1000px 0 0 1000px;
	    	margin-bottom: 0;
		}

		#sectionnewsletter div button{
			width: 30%;
			max-width: 210px;
	    	border-radius: 0 1000px 1000px 0;
		}

		#sectionnewsletter label, #sectionnewssletter div input, #sectionnewssletter div button{
			font-family: "interstate", sans-serif;
			font-weight: 500;
			font-size: 21px;
		}

		#sectionnewsletter div button:hover{
	    	background-color: #fcc331;
	    	border: solid white 2px;
	    	cursor: pointer;
	    	color: black;
		}
	}
/*****--**-----*****--|NEWSLETTER|-*****-----**--*****/

/*****--**-----*****--|FOOTER|-*****-----**--*****/
	footer{
		padding: 24px;
	}

	footer div a{
		display: block;
		padding: 6px;
  		margin: 6px 0;
  		color: darkgrey;
  		transition: 0.2s;
	}

	footer a img{
		display: block;
		width: 180px;
		margin: 23px auto;
  		padding: 21px;
  		transition: 0.2s;
	}
	/*****--**-----*****--|FOOTER TABLETTE|-*****-----**--*****/
		@media screen and (min-width: 576px){
			footer{
				display: flex;
  				align-items: center;
  				justify-content: space-around;
			}

			footer div a:hover{
  				color: black;
			}

			footer a img:hover{
				transform: scale(1.1);
			}
		}
	/*****--**-----*****--|FOOTER TABLETTE|-*****-----**--*****/
/*****--**-----*****--|FOOTER|-*****-----**--*****/

/*****--**-----*****--|MENTIONS LEGALES|-*****-----**--*****/
	#mentionslegales{
		background-color: black;
		padding: 6px 12px;
		display: flex;
		justify-content: space-between;
	}

	#mentionslegales a{
		display: block;
		color: white;
		font-size: 12px;
		font-family: "interstate", sans-serif;
          font-weight: 400;
          font-style: normal ou italic;
          padding: 6px 0;
	}

	#mentionslegales a span{
		background-color: hotpink;
		padding: 4px 9px;
		transition: 0.3s;
	}
	/*****--**-----*****--|MENTIONS LEGALES TABLETTE|-*****-----**--*****/
		@media screen and (min-width: 576px){
			#mentionslegales{
				display: flex;
  				justify-content: space-between;
			}
			#mentionslegales {
			  	padding: 12px 16px;
			}
			#mentionslegales a:hover span{
				letter-spacing: 1px;
			}
		}
	/*****--**-----*****--|MENTIONS LEGALES TABLETTE|-*****-----**--*****/
/*****--**-----*****--|MENTIONS LEGALES|-*****-----**--*****/

/*****--**-----*****--|PAGES|-*****-----**--*****/
	.popup {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: fixed;
	    top: 0;
	    left: 100%;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.5);
	    z-index: 1000;
	    transition: transform 0.5s ease;
	}

	.popup.visible {
	    transform: translateX(-100%);
	}

	.popup-content {
	    background: #fff;
	    width: 100%;
	    height: 100%;
	    overflow-y: auto;
	    position: relative;
	}

	.popup .close-btn {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    font-size: 1.5rem;
	    cursor: pointer;
	}

	/*****--**-----*****--|PARAMETRES DIFFERENTES SECTIONS|-*****-----**--*****/
		#PlanduVillage .pagestandardcolonnegdesktop,
		#PlanduVillage div aside{
			background-color: darkslategrey;
		}
		#PlanduVillage .contenuspage{
			border: solid 11px darkslategrey;
		}

		#VieAssoEco .pagestandardcolonnegdesktop,
		#VieAssoEco div aside{
			background-color: dodgerblue;
		}
		#VieAssoEco .contenuspage{
			border: solid 11px dodgerblue;
		}
		#VieAssoEco .contenuspage article div div a:hover{
			color: #4B8BCC;
		}

		#VieMunicipale .pagestandardcolonnegdesktop,
		#VieMunicipale div aside{
			background-color: orange;
		}
		#VieMunicipale .contenuspage{
			border: solid 11px orange;
		}
		#VieMunicipale .contenuspage article div div a:hover{
			color: #4B8BCC;
		}

		#VieMunicipale aside div a img{
			display: block;
			width: 50%;
			min-width: 260px;
			margin: auto;
			transition: 0.3s;
		}

		#VieMunicipale aside div a img:hover{
			transform: scale(1.1);
		}

		.conseilmunicipal img{
			width: 25vw;
		}

		#VieMunicipale .contenuspage .bulletinmunicipal a{
			text-align: center;
			margin: auto;
    	}

    	#VieMunicipale .contenuspage .bulletinmunicipal a img{
			width: 90%;
			margin: auto;
			max-height: initial;
			transition: 0.3s;
    	}

    	#VieMunicipale .contenuspage .bulletinmunicipal a:hover img{
			transform: scale(1.05);
    	}

    	#VieMunicipale .contenuspage .compterendu div h3{
    		background-color: orange;
    		color: white;
    		padding: 6px 12px 6px 12px;
    		margin-bottom: 6px;
    		width: fit-content;
    	}

    	#VieMunicipale .contenuspage .compterendu div img{
    		width: 100%;
    		max-width: 180px;
    	}

    	#VieMunicipale .contenuspage .compterendu div a{
    		padding: 4px 12px;
    		transition: 0.2s;
    		color: darkgrey;
    	}

    	#VieMunicipale .contenuspage .compterendu div a:hover{
    		letter-spacing: 1px;
    		color: black;
    	}


		#EnfanceEtJeunesse .contenuspage article{
			align-items:center;
		    margin: auto;
		}

		#EnfanceEtJeunesse .pagestandardcolonnegdesktop,
		#EnfanceEtJeunesse div aside{
			background-color: hotpink;
		}
		#EnfanceEtJeunesse .contenuspage{
			border: solid 11px hotpink;
		}
		#EnfanceEtJeunesse .contenuspage h3{
			color: hotpink;
		}
		#EnfanceEtJeunesse .contenuspage h4{
		    text-align: left;
		    color: hotpink;
		    font-size: 29px;
		    margin: 26px 0 12px 0;
		}
		#EnfanceEtJeunesse .contenuspage p{
    		margin: 6px 0;
		}
		#EnfanceEtJeunesse .contenuspage article div{
			width: 100%;
		}
		#EnfanceEtJeunesse .contenuspage article div h3{
			padding-bottom: 21px;
		}
		#EnfanceEtJeunesse .contenuspage article img {
		    display: block;
		    margin-right: 0;
		    margin-bottom: 36px;
		    width: 100%;
		    object-fit: cover;
		    height: 250px;
		}
		#EnfanceEtJeunesse .contenuspage article ul{
			list-style-type: disc;
			margin-left: 20px;
		}

		#InfosUtiles .pagestandardcolonnegdesktop,
		#InfosUtiles div aside{
			background-color: #18135D;
		}
		#InfosUtiles .contenuspage{
			border: solid 11px #18135D;
		}
		#InfosUtiles .reglementation h3, #InfosUtiles .infospratiques h3{
			color: #18135D;
		}
		#InfosUtiles .contenuspage article div div a:hover{
			color: #120A4A;
		}

		#EnfanceEtJeunesse .contenuspage h3, #InfosUtiles .reglementation h3, #InfosUtiles .infospratiques h3{
		    text-align: center;
		    font-size: 34px;
		    padding: 21px;
		    line-height: 31px;
		}

		#mapRandonnees, #mapTouristique{
            height: 500px;
            width: 100%;
        }
		#mapTouristique > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tile-pane > div > div > img:nth-child(2){
			height: 100px;
			width: 100px;
			z-index: 99;
			display: block;
		}

		#mapTouristique, #mapRandonnees {
    		touch-action: pan-x pan-y;
		}

	/*****--**-----*****--|PARAMETRES DIFFERENTES SECTIONS|-*****-----**--*****/

	.pagestandard{
		width: 100vw;
		min-height:100vh;
	}

	.pagestandard .retourpage{
		position: fixed;
		top: 20px;
		color: white;
		background-color: black;
		padding: 18px 29px 19px 19px;
	    font-size: 5vw;
		font-family: "interstate", sans-serif;
		font-weight: 800;
	}

	/*.pagestandard div img{
		display: none;
	}*/

	.pagestandard .association img,
	.pagestandard .entreprise img,
	.pagestandard .numutiles img{
		/*display: none;*/
		width: 30vw;
    	padding: 12px;
	}

	.pagestandard .logomobilenone{
		display: none;
	}

	.pagestandard article div h2{
		display: none;
	}

	.pagestandard div aside{
		padding-top: 19px;
		text-align: right;
	    display: flex;
	    flex-direction: column;
	    align-items: flex-end;
	}

	.pagestandard div aside h2{
		font-size: 7vw;
		width: 60%;
		padding-right: 5%;
		color: white;
		font-family: grotesk;
		line-height: 1em;
	}

	.pagestandard div aside div{
		align-self: center;
	    display: flex;
	    flex-direction: column;
	    padding: 36px 12px;
	}

	.pagestandard div aside div:nth-child(3){
		text-align: left;
		padding-top: 21px;
	}

	.pagestandard div aside div:nth-child(3) a{
		font-family: "interstate", sans-serif;
		color: white;
		font-size: 17px;
		padding: 4px 0;
	}

	.pagestandard div aside div button{
		width: 90vw;
		font-family: "interstate", sans-serif;
	    border-radius: 100px;
	    padding: 9px;
	    margin: 9px;
	    font-size: 17px;
	    color: white;
	    border: solid white 6px;
	    font-weight: 500;
	    font-style: italic;
	    background-color: transparent;
	}

	.pagestandard .contenuspage article{
		display: flex;
		align-items: start;
		justify-content: center;
		padding: 36px 12px;
		width: 94vw;
	    margin: auto;
	}

	.pagestandard .contenuspage article div{
		display: flex;
		flex-direction: column;
		width: 90%;
	}

	.pagestandard .contenuspage article div div{
		width: 100%;
	}

	.pagestandard .contenuspage article div h3,
	.pagestandard .contenuspage article div p{
		font-family: "interstate", sans-serif!important;
	}

	.pagestandard .contenuspage article div h3{
		font-size: 21px;
		line-height: 19px;
	}

	.pagestandard .contenuspage article div p{
		font-size: 14px;
	}

	.pagestandard .contenuspage article div a:nth-child(1){
		padding-top: 18px;
	}

	.pagestandard .contenuspage article div a{
		font-size: 15px;
		font-style: italic;
		color: black;
		font-weight: 600;
	}

	.pagestandard button {
	    cursor: pointer;
	}

	.pagestandard button:hover {
	    background-color: lightgrey;
	    color:black;
	}

	.pagestandard button.selected {
	    background-color: white;
	    color:black;
	}

	.pagestandard div #pagestandardlogotablette{
		display: none;
	}

	/*****--**-----*****--|PAGES TABLETTES|-*****-----**--*****/
		@media screen and (min-width: 576px){
			.pagestandard div #pagestandardlogotablette{
			    display: block;
			    position: absolute;
			    top: 0;
			    right: 0;
			    padding: 21px;
			    width: 20vw;
			    fill: white;
			}

			.pagestandard div aside{
				padding-top: 14vw;
			    flex-direction: row;
			    align-items: center;
			    justify-content: space-evenly;
			    padding: 19vw 5vw 5vw 5vw;
			}

			.pagestandard .contenuspage article img{
				display: block;
				margin-right: 12px;
				width: 30%;
		        max-height: 140px;
		        object-fit: contain;
			}

			.pagestandard div aside h2 {
		    	font-size: 31px;
		    	padding-right: 0;
		    	width: 40vw;
		    	text-align: center;
			}

			.pagestandard div aside div{
				width: 50vw;
				padding: 0;
			}

			.pagestandard div aside div button{
				width: auto;
			}

			.pagestandard .contenuspage{
				display: grid;
		    	grid-template-columns: repeat(2, 1fr);
		    	gap: 0;
			}

			.pagestandard .contenuspage article {
		    	width: 100%;
		    }

			#EnfanceEtJeunesse .contenuspage, #InfosUtiles .contenuspage{
		        grid-template-columns: repeat(1, 1fr);
		    }
		    #EnfanceEtJeunesse .contenuspage article {
		    	width: 94%;
		    }
		    #EnfanceEtJeunesse .contenuspage article img{
		    	max-height: fit-content;
		    }
		    #EnfanceEtJeunesse .contenuspage h3{
			    text-align: center;
			    color: hotpink;
			    font-size: 34px;
			    padding: 8vh 0 36px 0;
			    padding: 21px;
			    line-height: 31px;
			}
		}
	/*****--**-----*****--|PAGES TABLETTES|-*****-----**--*****/

	/*****--**-----*****--|PAGES DESKTOP|-*****-----**--*****/
		@media screen and (min-width: 960px){
			.pagestandard{
				display: flex;
			}

			.pagestandard .retourpage{
				font-size: 21px;
				z-index: 9;
				transition: 0.6s;
			}

			.pagestandard .retourpage:hover{
	        	padding-left: 32px;
	    	}

			.pagestandard .pagestandardcolonnegdesktop{
				width: 30vw;
				height: 100vh;
			}

			.pagestandard div #pagestandardlogotablette{
				position: relative;
				width: 11vw;
	        	left: 20vw;
	        	fill: white;
			}

			.pagestandard div aside{
				padding: 0;
				flex-direction: column;
			}

			.pagestandard div aside h2 {
				width: auto;
				padding: 5vh 0;
			}

			.pagestandard div aside div {
	        	width: 80%;
	    	}

	    	.pagestandard .contenuspage {
			    height: 100vh;
			    width: 70vw;
			    overflow-y: scroll;
			}

			.pagestandard .contenuspage article div{
				width: 70%;
			}

			.pagestandard div aside div:nth-child(3) a:hover{
				color: black!important;
			}

			#EnfanceEtJeunesse .contenuspage article{
	    		width: 70%;
	    	}
		}
	/*****--**-----*****--|PAGES DESKTOP|-*****-----**--*****/
/*****--**-----*****--|PAGES|-*****-----**--*****/

/*****--**-----*****--|FOOTER MODAL|-*****-----**--*****/
	.modal {
	    display: none;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 80vw;
	    max-width: 960px;
	    height: 80vh;
	    background-color: white;
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	    z-index: 1000;
	    overflow-y: auto;
	}

	.modal-content {
	    position: relative;
	    padding: 20px;
	}

	.modal-content aside{
		display: grid;
	    grid-template-columns: 1fr;
	    grid-auto-rows: min-content;
	}

	.modal-content h2{
		font-family: Grotesk;
	}

	.modal-content p{
		padding: 21px 0;
	}

	.modal-content a{
		display: block;
		text-decoration: none;
		color: grey;
		transition: 0.3s;
		padding: 6px 21px;
	}

	.modal-content a:hover{
		color: black;
	}

	.modal .close {
	    position: absolute;
	    top: 10px;
	    right: 20px;
	    font-size: 30px;
	    cursor: pointer;
	}

	.modal-background {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, 0.5);
	    z-index: 999;
	}

	#modalconseilmunicipal{
		display: flex;
	    flex-wrap: wrap;
	    font-family: Interstate;
	    font-weight: 700;
	    justify-content: center;
	}

	#modalconseilmunicipal div{
		text-align: center;
		padding: 21px;
	}

	#modalconseilmunicipal div p{
		padding: 12px 0 21px 0;
	}

	#modalconseilmunicipal div img{
		width: 120px;
	}

	@media screen and (min-width: 576px){
		.modal-content aside{
	    	grid-template-columns: 1fr 1fr;
		}
	}
/*****--**-----*****--|FOOTER MODAL|-*****-----**--*****/

/*****--**-----*****--|PARALLAX|-*****-----**--*****/
	.parallax {
		height: 10vh;
	    background-attachment: fixed;
/*	    background-position: right;*/
	    background-repeat: no-repeat;
	    background-size: cover;
	}
/*****--**-----*****--|PARALLAX|-*****-----**--*****/

/*****--**-----*****--|DARK MODE|-*****-----**--*****/
	/*@media (prefers-color-scheme: dark) {
		body {
	    	background-color: black;
		}

		header #logovecoux {
			fill:whitesmoke;
		}

		header #infos, header #teletmail a{
			color: whitesmoke;
		}

		#backgroundaccueil .cls-2 {
	    	fill: grey;
		}
	}*/
/*****--**-----*****--|DARK MODE|-*****-----**--*****/










/*marche aux puces 2026*/

#marcheauxpucesvecoux{
	padding: 21px;
	background-color: #f7ec66;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
}

#marcheauxpucesvecoux img{
	display: block;
	margin: auto;
	width: 60%;
	max-width: 720px;
}

#marcheauxpucesvecoux a{
	background-color: white;
	border-radius: 900px;
	padding: 11px 26px;
	text-decoration: none;
	color: black;
	text-align: center;
	margin-top: 21px;
	transition: 0.3s;
	 font-family: "interstate", sans-serif;
}

#marcheauxpucesvecoux a:hover{
	transform: scale(1.1);
}