@font-face {
		  font-family: 'Noto_Sans';
		  src: url('../fonts/Noto_Sans/static/NotoSans-Bold.ttf') format("truetype");
		  font-display: swap;
		  font-style: bold;
		  font-weight: 400;
		}
		@font-face {
		  font-family: 'Noto_Sans';
		  src: url('../fonts/Noto_Sans/static/NotoSans-Regular.ttf') format("truetype");
		  font-display: swap;
		  font-style: regular;
		  font-weight: 400;
		}
		html, body{
			margin:0;
			padding:0;
			width:100%;
			box-sizing: border-box;
			font-family:Noto_Sans, sans-serif;
			
		}
		html {
		  scroll-behavior: smooth;
		}

		section, div, p, span, header, footer{
			box-sizing: border-box;
		}
		section{
			float:left;
			margin:40px 0;
		}
		header{
			display:flex;
			justify-content:center;
			align-items:center;
			width:100%;
			box-sizing: border-box;
			font-family:Noto_Sans, sans-serif;
			border-bottom:1px solid black;
			text-align:center;
		}
		.itemExemple{
			float:left;
			cursor:pointer;
			margin:10px;
			border:thin solid black;
			padding:10px;
		}
		.wysi-editor{
			text-align:left;
		}
		#logoContainer{
			float:left;
		}
		#fonctionContainer{
			float:left;
			font-size:40px;
			line-height:60px;
			padding-left:10px;
		}
		#fonctionContainer a{
			color:white;
			text-decoration:none;
		}
		#sandwich{
			padding-top:10px;
			float:right;
			cursor:pointer;
		}
		nav, li, nav a{
			text-decoration:none;
			color:black;
			list-style: none;
		}
		.svgselected{
			background-color:black;
			color:white;
			fill:white;
		}
		#fondQuandMenu{
			z-index:2;
			display:none;
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(255,255,255,.5);
			cursor:pointer;
		}
		#menuGabarit{
			height:455px;
		}
        #menuSocle{
			z-index:500;
			background-color:white;
			padding: 50px 0;
			transition: opacity 0.5s ease, visibility 0.5s ease;
        }
		#menu{
			width:318px;
			margin:auto;
			max-width:100%;
			background-color:white;
		}
		#menu ul{
			padding:0;
			margin:0;
		}
		#menu li{
			display:flex;
			align-items:center;
			gap:8px;
			padding:5px;
		}
		#menu li:hover{
			background-color:black;
			color:white;
			fill:white;
		}
		#fermerMenu{
			float:right;
			cursor:pointer;
		}
		#loader{
			position:fixed;
			top:50%;
			left:50%;
			transform: translate(-50%, -50%);
		}
		main{
			float:left;
			width:100%;
			font-family:Noto_Sans, sans-serif;
			padding-top: 85px;
			box-sizing: border-box;
			min-height:100vh;
			overflow:hidden;
		}
		#h1Accueil{
			float:left;
			width:100%;
			margin:0;
			text-align:center;
			font-family:Noto_Sans, sans-serif;
		}
		h2,p{
			float:left;
			margin:0;
			font-family:Noto_Sans, sans-serif;
		}
		h2 svg{
			vertical-align:text-bottom;
			border:thin solid black;
			background-color:white;
			color:black;
			fill:black;
		}
		h2 svg:hover{
			cursor:pointer;
			//background-color:black;
			//fill:white;
		}
		p{
			width:100%;
		}
		
		@keyframes sweeping-gradient {
			0% {
				background-position: 130% 50%;
			}
			40%{
				background-position: 110% 50%;
			}
			100% {
				background-position: -10% 50%;
			}
		}
		
		a{
			text-decoration:none;
		}
		.pointer{
			cursor:pointer;
		}
		.rondActivite{
			display:flex;
			width:100px;
			height:100px;
			border-radius:50px;
			overflow:hidden;
			text-align:center;
			justify-content: center;
			align-items:center;
		}
		.fl{
			float:left;
		}
		.fr{
			float:right;
		}
		.bold{
			font-weight:bold;
		}
		.flex{
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			align-item:center;
			gap:10px;
		}
		.flex2{
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			align-item:center;
		}
		.carreau{
			display:block;
		}
		.carreau svg{
			margin-block-start:0.83em;
			margin-block-end:0.83em;
		}
		.m10{
			margin:10px;
		}
		.m50{
			margin:50px;
		}
		.mb50{
			margin-bottom:50px;
		}
		.mb10{
			margin-bottom:10px;
		}
		.padding50{
			padding:50;
		}
		.mt50{
			margin-top:50px;
		}
		.mt10{
			margin-top:10px;
		}
		.marginAuto{
			margin:auto;
		}
		.w350{
			width:350px;
		}
		.btn{
			border:none;
			padding:5px;
			color:white;
			width:80px;
			height:30px;
			cursor:pointer;
		}
		.hidden{
			display:none;
		}
		.opacity0{
			opacity:0;
		}
		.bouton{
			border:none;
			background-color:black;
			color:white;
			padding:15px;
			cursor:pointer;
		}
		#burger{
			z-index:1000;
			position:fixed;
			top:5px;
			right:8px;
			cursor:pointer;
			background-color:white;
			border-radius:3px;
			opacity: 0;
			visibility: hidden;   /* évite le clic alors qu’il est invisible */
			transition: opacity 0.5s ease, visibility 0.5s ease;
		}
		#burger.visible {
			opacity: 1;
			visibility: visible;
		}

		.fondA{ background-color:#b04931; }
		.colorA{ color:#b04931; }
		.fondB{ background-color:#F5E9DA; }
		.fond1{ background-color:#7a8660; }
		.color1{ color:#7a8660; }
		.fond2{ background-color:#8cb2c9; }
		.color2{ color:#8cb2c9; }
		.fond3{ background-color:#878583; }
		.color3{ color:#878583; }
		.fond4{ background-color:#bf9d85; }
		.color4{ color:#bf9d85; }
		.fond5{ background-color:#a59f8c; }
		.color5{ color:#a59f8c; }
		.fondBlanc{ background-color:white; }
		.colorBlanc{
			color:white;
		}
		.colorBleu{
			color:#2A3D66;
		}
		.fondBleu{
			background-color:#2A3D66;
		}
		.colorJaune{
			color:#F7C873;
		}
		.fondJaune{
			background-color:#F7C873;
		}
		.fondVert{
			background-color:#9AB680;
		}
		.col12{
			width:100%;
		}
		.col11{
			width:91.6%;
		}
		.col10{
			width:83.3%;
		}
		.col9{
			width:75%;
		}
		.col8{
			width:66.6%;
		}
		.col7{
			width:58.3%;
		}
		.col6{
			width:50%;
		}
		.col5{
			width:41.6%;
		}
		.col4{
			width:33.3%;
		}
		.col3{
			width:25%;
		}
		.col2{
			width:16.6%;
		}
		.col1{
			width:8.3%;
		}
		.offset12{
			margin-left:100%;
		}
		.offset11{
			margin-left:91.6%;
		}
		.offset10{
			margin-left:83.3%;
		}
		.offset9{
			margin-left:75%;
		}
		.offset8{
			margin-left:66.6%;
		}
		.offset7{
			margin-left:58.3%;
		}
		.offset6{
			margin-left:50%;
		}
		.offset5{
			margin-left:41.6%;
		}
		.offset4{
			margin-left:33.3%;
		}
		.offset3{
			margin-left:25%;
		}
		.offset2{
			margin-left:16.6%;
		}
		.offset1{
			margin-left:8.3%;
		}
		.tc{ text-align:center; }
		.tl{ text-align:left; }
		.tr{ text-align:right; }
		.bold{
			font-weight:bold;
		}
		#background-video {
			height: 100vh;
			width: 100%;
			object-fit: cover;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
		}
		input[type=text], textarea{
			
		}
		textarea{
		}
		footer{
			float:left;
			width:100%;
			font-size:14px;
			font-family:Noto_Sans, sans-serif;
			padding:20px;
			text-align:center;
			border-top:thin solid black;
		}
		footer a{
			color:inherit;
		}
		p{
			margin:5px 0;
		}
		.italic{
			font-style:italic;
		}
		.fondSable{
			background-color:#F5E9DA;
		}
		.relative{
			position:relative;
		}
		input[type="text"],input[type="email"],input[type="tel"]{
			height:35px;
			max-width:100%;
			font-family:Noto_Sans, sans-serif;
			font-size:16px;
		}
		.padding10{
			padding:10px;
		}
		.h100p{
			height:100%;
		}
		.tdIcon{
			width:45px;
		}
		#notifok{
			display:none;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			background-color:#9AB680;
			color:white;
			font-size:20px;
			padding:10px;
		}
		#notifno{
			display:none;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			background-color:#bf9d85;
			color:white;
			font-size:20px;
			padding:10px;
		}
		#reSelect{
			position:fixed;
			top:60%;
			right:-7px;
			transform:rotate(270deg) translateY(50%);
			font-size:12px;
			padding:10px; background-color:black; color:white; border:none; cursor:pointer;
		}
		@media screen and (max-width: 650px){
			.colm12{
				width:100%;
			}
			.colm11{
				width:91.6%;
			}
			.colm10{
				width:83.3%;
			}
			.colm9{
				width:75%;
			}
			.colm8{
				width:66.6%;
			}
			.colm7{
				width:58.3%;
			}
			.colm6{
				width:50%;
			}
			.colm5{
				width:41.6%;
			}
			.colm4{
				width:33.3%;
			}
			.colm3{
				width:25%;
			}
			.colm2{
				width:16.6%;
			}
			.colm1{
				width:8.3%;
			}
			.offsetm12{
				margin-left:100%;
			}
			.offsetm11{
				margin-left:91.6%;
			}
			.offsetm10{
				margin-left:83.3%;
			}
			.offsetm9{
				margin-left:75%;
			}
			.offsetm8{
				margin-left:66.6%;
			}
			.offsetm7{
				margin-left:58.3%;
			}
			.offsetm6{
				margin-left:50%;
			}
			.offsetm5{
				margin-left:41.6%;
			}
			.offsetm4{
				margin-left:33.3%;
			}
			.offsetm3{
				margin-left:25%;
			}
			.offsetm2{
				margin-left:16.6%;
			}
			.offsetm1{
				margin-left:8.3%;
			}
			.offsetm0{
				margin-left:0%;
			}
			#h1Accueil{
				bottom:10px;
				left:10px;
			}
		}