body{margin:0;padding:0;background-color:rgb(255,255,255);font-family:"Open Sans", sans-serif;color:#4e4e4e;display: flex; flex-wrap: wrap; scroll-behavior: smooth;overflow-x: hidden;}

.icon {-moz-transform:scale(1);-webkit-transform: scale(1);transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);-moz-transition:.3s ease-in-out;-webkit-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-ms-transition: .3s ease-in-out;animation-name: magic;animation-duration: 2s;}
.icon:hover {-moz-transform :scale(1.5);-webkit-transform: scale(1.5);transform: scale(1.5);-o-transform: scale(1.5);-ms-transform: scale(1.5);}

a{text-decoration:none;}
a:hover{color: #0082f4;-moz-transition: color .25s ease;-webkit-transition: color .25s ease;-o-transition: color .25s ease;-ms-transition: color .25s ease;transition: color .25s ease;}

h1{text-align:center; margin:20px 0 30px 0; padding:20px 0 20px 0; letter-spacing: 1px;}
h2{letter-spacing: 1px; padding-top:20px;}

.top_menu{ position: sticky; top: 0; z-index: 500; width: 100%; background-color:rgb(250,250,250,0.9); box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.menu{height: 60px;max-width: 1250px;margin: 0 auto;padding: 0 auto;display: flex;align-items: center;justify-content: space-between;}
.G_menu{display: flex;justify-content: flex-start;z-index:5;}
.hamburger, .mobile-menu, .overlay {display: none;}

.menu-mobile{display: none;}
.sous-menu-mobile{display: none;}
#btn-menu-mobile{display: none;}

.top_menu ul{list-style-type: none;display: flex;padding: 0px 0px 0px 0px;}
.top_menu ul li ul{display:none;margin-top: 20px;background-color: #ffffff;border-top: 3px solid;border-color:rgb(0,101,153);}
.top_menu ul li ul li{padding: 12px 0px 12px 0px;transition: all 0.3s;}
.top_menu ul li ul li:hover{color: #02b6b1;transition: all 0.3s; -webkit-box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow:0px 3px 10px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75);} */
.top_menu ul li ul li a{font-weight: 400;}
.top_menu ul li ul li a:hover{color: #02b6b1;}
.top_menu ul li:hover ul {display:block;}
.top_menu li:hover ul li {float:none;}
.top_menu li ul {position:absolute;}
.top_menu a{padding: 1.3em;text-decoration: none;font-size: 16px;font-weight: 500;color:#4e4e4e; transition: all 0.3s ease;}
.top_menu ul li a:hover, .top_menu ul li a:focus{color:#02b6b1;}
.top_menu ul li a:hover{transition: all 0.3s; -webkit-box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow:0px 3px 10px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75);}
.top_menu ul li ul li a:hover{transition: all 0.3s; -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow:0px 0px 0px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px px 0px 0px rgba(50, 50, 50, 0.75);}
.top_menu a#en-cours{color: #02b6b1;}
.top_menu li > a .arrow {display: inline-block;width: 8px;height: 8px;margin-left: 6px;border-right: 2px solid #090909;border-bottom: 2px solid #090909;transform: rotate(45deg);transition: transform 0.3s ease;}
.top_menu li:hover > a .arrow {transform: rotate(-135deg) translateY(-2px); border-color: #02b6b1;}


#top-page{width:100%;position:absolute;top:0;left:0}
#ban{margin-top:60px;width:100%;z-index:1;position:fixed;background: url("/images/slndba_printemps.jpg");height:560px;background-position:center;background-repeat:no-repeat;background-size:cover; overflow: hidden;}
#log{width:100%; margin-top:310px; z-index:4;position:fixed; animation: fadeIn 2s ease forwards;display: flex; justify-content: space-between;margin-left: 50px;}
#logA{width: 30%;}
#logE{width: 20%; margin-right: 100px;}

@keyframes fadeIn {from {opacity:0;} to{opacity:1;}}

header p{text-align:justify;padding:5px 0 5px 0;}

#container{width:100%;z-index:5;position:relative;font-family:"Open Sans", sans-serif;font-size:17px;line-height:30px;color:#4e4e4e;}
#header{background:linear-gradient(rgb(255,255,255,0.6),30%,rgb(255,255,255));margin-top:560px;padding-bottom: 5px;}
#form{background:linear-gradient(rgb(255,255,255),30%,rgb(220, 238, 238)); padding-top:10px; padding-bottom: 10px;}
#ft{background-color:rgb(0,101,153); position: absolute; width: 100%; height: 50px; left: 0; right: 0;}

.message{display: flex;}
.message p {z-index: 1;position: absolute;top:0;}
.message img{position: relative;width:250px;height:65px;border-radius:15%;box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;}
.rebour	{margin-top: 40px;font-size: 16px;color: #1b95a8;padding-left: 15px;}

.snow{position:relative;display:flex;}
.snow span{
	position:relative;min-width:5px;height:5px;background:#ffffff;border-radius:50%;margin:0 1vw; box-shadow:-100px 20px 5px #ffffff, 100px 20px 10px #ffffff;
	animation: animateSnow 15s linear infinite; animation-duration: calc(75s /var(--i));
}
@keyframes animateSnow{
	0%{transform: translateY(-10vh);}
	100%{transform: translateY(100vh);}
}

.shimmer p{
	font-weight: 600;font-size: 20px;margin: 0 auto;padding: 0 100px 0 0;margin-bottom: 0;
}
.shimmer p{
	text-align: center;color: rgba(255,255,255,0.1); background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)); background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
	background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)); -webkit-background-size: 125px 100%; -moz-background-size: 125px 100%; background-size: 125px 100%; -webkit-background-clip: text; -moz-background-clip: text; 
	background-clip: text; -webkit-animation-name: shimmer; -moz-animation-name: shimmer; animation-name: shimmer; -webkit-animation-duration: 3s; -moz-animation-duration: 3s;
	animation-duration: 3s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: 0 0; background-color: #222;
}
.shimmer  p{width:200px;}

#snow2{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;z-index: 9999;}
	
@-moz-keyframes shimmer {
	0% {background-position: top left;}
	100% {background-position: top right;}
}
@-webkit-keyframes shimmer {
	0% {background-position: top left;}
	100% {background-position: top right;}
}
@-o-keyframes shimmer {
	0% {background-position: top left;}
	100% {background-position: top right;}
}
@keyframes shimmer {
	0% {background-position: top left;}
	100% {background-position: top right;}
}

#page{max-width:1150px; display:block; margin: 0 auto;}
#page_tab{padding-left:10px; padding-right:10px; display:block; margin-left:auto; margin-right:auto; line-height: 20px;}

.section{padding:15px 0px 15px 0px; display:flex; justify-content:space-around; align-content:center;}
.section img{width:100%;}
.section .section-text{width:65%; display:flex; flex-wrap:wrap; align-content:center;}
.section .section-img{overflow: hidden; width: 32%; height: 100%; display:flex; flex-wrap:wrap; align-content:center;}


/* table {width: 100%;font-size:15px;} */
th, td {padding:5px 5px; }
th{background:rgb(220, 234, 238);}
table{text-align:center;}
table.presentation {width:70%;}
table.inscription {width:60%;}

.tableFixHead {overflow:auto; height: 500px; width:80%; margin:auto; font-size:15px;}

.tableFixHead thead th {position:sticky; top:0;}
.col-xs-10{width:2%}
.col-xs-30{width:5%}
.col-xs-60{width:10%}

.col-1{position: sticky;left: 0;z-index: 15;}

.inputbasic:hover{border-color: grey; box-shadow: 0px 1px 1px rgb(45 35 66 / 40%); transform: translateY(-2px);}

select{background-color:white;color:#4e4e4e}
textarea{font-family:"Open Sans", sans-serif;font-size:14px;line-height:18px;color:#4e4e4e}

input {margin: 4px 0 10px; }
input[type="checkbox"]:checked {accent-color: rgb(0,101,153);}
p.double {overflow:hidden; width: 99%; margin:10px 0 35px 0; text-align:left;}
p.double label {width: 99%;text-align: left;}
p.double input,form p.double select,table.inscription tr td select,
p.double textarea {padding: 10px; margin: 2px 0 4px; border:1px solid #F5C5C5; border-radius:10px;width: 92%; box-shadow:1px 1px 2px #C0C0C0 inset; display:inline-block; vertical-align:middle; color:#4e4e4e; transition:0.3s;}
p.double input:focus, p.double select:focus {border-color:#02b6b1; box-shadow:0 0 6px rgba(2,182,177,0.5);outline:none;}

.switch {display: inline-block; vertical-align: middle; position: relative; width: 50px; height: 25px; cursor: pointer; overflow: hidden;}
.switch input {position: absolute;  top: -30px; width: 0; height: 0; line-height: 50px;}
.switch input + span {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #acaeb0;border-radius: 20px;}
.switch input + span:before {
  content: "";display: inline-block;position: absolute;top: 50%;left: 4px;width: 20px;height: 20px;
  background: white;border-radius: 50%;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);-moz-transition: all .5s;-webkit-transition: all .5s;transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;}
.switch input:checked + span {background: #02b6b1;}
.switch input:checked + span:before {left: 27px;}

.triple-switch  {margin-bottom: 30px;}
.triple-switch .question-header label, p.double label {font-weight: 600; font-size: 16px; display: block; margin-bottom: 15px;}
.triple-switch .switch-value { margin-left: 12px; font-style: italic; font-size: 15px; font-weight: 500; color: #777; display: inline-block; min-width: 100px;}
.triple-switch .switch-container { display: flex; align-items: center; gap: 12px; width: 300px; /* plus large */ margin-top: 6px;}
.triple-switch .switch-container input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 7px; 
	background: linear-gradient(to right, #d9534f 0%, #ccc 50%, #5cb85c 100%); outline: none; cursor: pointer; transition: background 0.3s ease;}
.triple-switch .switch-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
	border-radius: 50%; background: #fff; border: 2px solid #666; cursor: pointer; transition: transform 0.2s ease, border-color 0.3s;}
.triple-switch .switch-container input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); border-color: #333;}
.triple-switch .switch-container .label-left, .triple-switch .switch-container .label-right {font-size: 15px;}
.toggle3 { display: flex; gap: 10px; width: 600px;  padding-bottom: 20px;}
.toggle3 button { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #ffffff; cursor: pointer; transition: 0.2s;}
.toggle3 button.active { background: #02b6b1; color: white; border-color: #02b6b1;}

p.double-radio {margin:10px 0 20px 0;text-align:left;}
p.double-radio input,form p.double-radio select,
p.double-radio textarea {padding: 2px 4px;border:1px solid #F5C5C5;border-radius:5px;box-shadow:1px 1px 2px #C0C0C0 inset;display:inline-block;vertical-align:middle;color:rgb#4e4e4e}

.toggle3 .toggle-checkbox {flex: 1; padding: 1px; border: 1px solid #ccc; border-radius: 6px; background: #ffffff; cursor: pointer; transition: 0.2s;}
.toggle3 .toggle-checkbox input[type="checkbox"] { position: absolute; opacity: 0;pointer-events: none;}
.toggle3 .toggle-checkbox.active {background: #02b6b1; color: white; border-color: #02b6b1;}
.toggle3 .toggle-checkbox .toggle-text {display: block; font-size: 15px; text-align: center;}
#installation-zone { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;}
#installation-zone .toggle-checkbox { display: flex; align-items: center; flex: 0 0 auto; padding: 6px 8px; width: auto; border-radius: 6px; margin: 0;}
#installation-zone {display: flex; flex-direction: column; gap: 8px; width: 100%;}
#installation-zone .toggle-checkbox {display: flex; justify-content: center; align-items: center; padding: 0; width: 400px; text-align: center; border-radius: 6px; cursor: pointer;}
#installation-zone input {display: none;}
.error {color: red; font-size: 13px; margin-left: 10px;}

.zoom img {-moz-transform:scale(1);-webkit-transform: scale(1);transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);-moz-transition:.3s ease-in-out;-webkit-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-ms-transition: .3s ease-in-out;animation-name: magic;animation-duration: 2s;}
.zoom  img:hover {-moz-transform :scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);}
@keyframes magic {from {opacity: 0;} to {opacity: 1;}}

.arobase::before { content: "\0040"; } /* Code unicode pour @ */


.zone-enfants div { position: relative; margin-bottom: 12px; display: flex; align-items: center; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.zone-enfants div input[type="text"] { max-width: 420px; font-size: 16px;}
.zone-enfants div button {background-color: #ff4d4d; color: #fff; border: none; padding: 6px 14px; margin-left: 10px; border-radius: 12px;
 cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.25s ease;}
.zone-enfants div button:hover { background-color: #e60000; transform: scale(1.2);}
.zone-enfants .add-enfant { background-color: #02b6b1; color: #fff; border: none; padding: 10px 18px; border-radius: 16px; cursor: pointer; font-weight: 600; font-size: 15px; margin: 6px;}
.zone-enfants div.new-child {animation: fadeSlide 0.5s ease forwards;}

@keyframes fadeSlide {
    0% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }}


@media only screen and (max-width:1500px) and (min-width:1000px){
	#header{margin-top:480px;}
	#ban{margin-top:60px;height:480px;}
	#page{padding-left:0px;width:95%;}
}

@media only screen and (max-width:1000px) and (min-width:820px){
	#header{margin-top:300px;}
	#ban{margin-top:50px;height:300px;}
	#log{margin-top:180px;}
	#page{padding-left:0px;width:95%;}
	.top_menu a{padding: 1em;}
	h1{letter-spacing: 0;}
	h2{font-size:25px;letter-spacing: 0;}
}

@media only screen and (max-width:820px) and (min-width:150px){
	#header{margin-top:250px;}
	#ban{margin-top:50px;height:250px;}
	#log{margin-top:160px;}
	#page{padding-left:0px;width:95%;}
	.top_menu a{padding: 0.8em;}
	h1{letter-spacing: 0;line-height:1.4em;}
	h2{font-size:25px;letter-spacing: 0;line-height:1.4em;}
	.shimmer p{width: 170px;}
	
	.section{flex-wrap: wrap;}	
	.section .section-text{width:100%;max-width: 800px;display: block;}
	.section .section-img{width:100%;max-width: 800px; }
	.section .section-img img{width: 70%;max-width:350px;margin: auto;display: flex;}
		
	table.presentation {width: 100%;}
	table.inscription {width: 100%;}
	.tableFixHead {height: 350px;width:100%;}

}

@media only screen and (max-width:660px){
	#header{margin-top:220px;}
	#ban{margin-top:50px;height:220px;}
	#log{margin-top:120px;}
	#container{font-size:16px;line-height:2em;}
	#page{padding-left:10px;padding-right: 10px;width:94%;}
	.top_menu a{padding: 0.8em;}
	.mobile-menu {width: 70%;}
	
	p.double label {width: 96%;text-align: left;}
	
	.snow span{min-width:3px;height:3px;}
	
	.zone-enfants div input[type="text"] {width: 75%;font-size: 14px;}
	/* ul{margin-left: -35px;} */
	li ol {margin-left: -25px;}
	
	.toggle3 { width: 96%;}
	#installation-zone .toggle-checkbox {width: 95%;}
}

@media only screen and (max-width: 1000px){
	body{flex-wrap: wrap;}
	#log img{width: 60%;}
	
	.menu{height: 50px;margin-top: 0;}
	.message img{height:55px;}
	.rebour{margin-top: 30px;}
	
	.G_menu{width: 50%;/* margin-left: 100px; */}
	.G_menu img{height: 25px;}
	.D_menu{display: none;}
	.hamburger {display: flex;}
	.mobile-menu, .overlay {display: block;}

	.hamburger {margin-right: 30px; width: 30px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 1001;}
	.hamburger span {height: 3px; background: linear-gradient(90deg, #02b6b1 25%, #283f43 100%); border-radius: 2px; transition: 0.3s;}
	.hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(8px, 8px);}
	.hamburger.active span:nth-child(2) { opacity: 0; }
	.hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(5px, -6px);}
	.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 999;}
	.overlay.active {opacity: .5; visibility: visible;}
	.mobile-menu {position: fixed; top: 0; right: -100%; width: 280px; height: 100%; background: rgba(255, 255, 255, 0.9); padding-top: 60px; transition: right 0.3s ease; z-index: 1000; overflow: auto; scrollbar-color: white white;}
	.mobile-menu.open {left: 0;}
	.mobile-menu ul { list-style: none; margin-left: -30px;}
	.mobile-menu li { border-bottom: 1px solid #F2F7F7; }
	.mobile-menu a {color: #283f43; text-decoration: none; display: block; padding: 15px 20px; font-size: 1.1rem;}
	.mobile-menu li:hover, .mobile-menu li:hover > a {color: #02b6b1; border-color: #02b6b1; transform: scale(1.05); filter: drop-shadow(0 5px 5px #ffffff);}
	.submenu {overflow: hidden; height: 0; background: rgba(255, 255, 255, 0.3);transition: height 0.3s ease;}
	.submenu a { font-size: 1.1rem;}
	.arrow {width: 8px; height: 8px; border-right: 2px solid #283f43; border-bottom: 2px solid #283f43; transform: rotate(45deg); display: inline-block; margin-left: 10px; transition: transform 0.3s ease;}
	.has-submenu.open .arrow {transform: rotate(-135deg); border-color: #02b6b1;}
}

@media only screen and (max-width: 480px){
	.message img{width:180px;}
	.rebour	{font-size: 13px;padding-left: 5px;}
	.zone-enfants div input[type="text"] {width: 62%;}
	/* ul{margin-left: -40px;} */
}
/* @media screen and (max-width: 350px){ */
	/* .G_menu{display: none;}} */