.top_menu{height: 78px; position: sticky; top: 0; z-index: 500; width: 100%; background-color: #FFFFFF; box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75); border-bottom: 2px solid #ffffff; border-radius: 0 0 10px 10px; animation: slideDown .6s ease-out;}
body{margin: 0; padding: 0; background: #ffffff; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; display: flex; flex-wrap: wrap; color: #222; scroll-behavior: smooth;}

h1, h2, h3{text-shadow: 2px 2px 2px rgba(100, 100, 100, 0.4); font-family: 'Poppins', sans-serif;}
.black-bg  h1, .black-bg h2, .black-bg h3{text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.6); font-family: 'Poppins', sans-serif;}
h2{font-size: 30px; font-weight: 700;text-align: center;margin-bottom: 40px;}
h3{padding:15px;}

a{text-decoration: none; /*color: #20a8ef;*/ transition: 0.3s; color: #C49A6C; font-weight: 600;} 
a:hover, a:focus {/*color: #0082f4; */ transition: 0.3s; text-decoration: underline;}
p{font-size: 16px;line-height: 1.5em;padding:15px;}
:target {scroll-margin-top: 80px;}

.fade-in {opacity:0;transform:translateY(40px);transition:opacity 0.8s ease, transform 0.8s ease;}
.fade-in.visible {opacity:1;transform:translateY(0);}

.top_bar{width: 100%; display: flex; height: 50px; background: linear-gradient(90deg, #283f43, #20a8ef); background-size: 200% 100%; animation: gradientMove 6s ease infinite; 
border-bottom: 2px solid #ffffff; z-index:501;}
.top_bar .content{max-width: 1500px; display: flex; width: 100%; margin: 0 auto; padding: 10px; align-items: center;}
.top_bar .content-G{width: 50%; color: #FFFFFF; font-size: 15px; margin-left: 20px;}
.top_bar .content-G a{color: #FFFFFF; text-decoration: none; transition: 0.3s; padding: 10px;}
.top_bar .content-G a:hover{color: #20a8ef; transition: 0.3s;}
.top_bar .content-D{width: 50%; text-align: right; color: #FFFFFF; font-size: 15px;}
.top_bar .content-D a{color: #FFFFFF; padding: 20px 20px; font-size: 15px; text-decoration: none; transition: 0.3s;}
.top_bar .content-D a:hover{color: #20a8ef; transition: 0.3s;}

.icon {transform: scale(1); transition: transform 0.3s ease, filter 0.3s ease; animation-name: magic; animation-duration: 2s;}
.icon:hover{transform: scale(1.3) rotate(10deg); filter: drop-shadow(0 0 5px #20a8ef)}

.icon-m {transform: scale(1); transition: transform 0.6s ease-in, filter 0.3s ease; animation-name: magic; animation-duration: 2s;}
.icon-m:hover{transform: scale(1.2) translateY(5px); filter: drop-shadow(0 0 5px #ffffff)}

.top_menu{height: 78px; position: sticky; top: 0; z-index: 500; width: 100%; background-color: #FFFFFF; box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.75); border-bottom: 2px solid #ffffff; border-radius: 0 0 10px 10px; animation: slideDown .6s ease-out;}
.menu{ max-width: 1500px; margin: 0 auto; padding: 0; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.hamburger, .mobile-menu, .overlay {display: none;}

.top_menu {transition: background-color 0.3s ease;background-color: rgba(255, 255, 255, 0.4);}
.top_menu.scrolled { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px);}
.top_menu ul{list-style-type: none; display: flex; align-items: center;}
.top_menu a {display: inline-block; padding: 1.65em 1em; color: #090909; text-decoration: none; transform: scale(1); font-weight: 500; transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;;animation: jazzDrop 0.6s ease;}
.top_menu a:hover, .top_menu li:hover > a{color: #20a8ef; transform: scale(1.05); filter: drop-shadow(0 5px 5px #ffffff);}
.top_menu li ul {position:absolute;}
.top_menu ul li ul{display:none; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-top: 3px solid; border-color: #20a8ef; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; min-width: 80%; width: max-content; left: 0;}
.top_menu ul li:hover ul {display:block;}
.top_menu ul li ul li a{font-weight: 450; padding: .8em 1em; margin-left: -40px;}
.top_menu ul li {position: relative;}
.no-js .top_menu{background-color: rgba(255, 255, 255, 0.9);}

.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: #20a8ef;}

.home_slider{ padding: 80px 0px; width: 100%; background: var(--background-img); height: 500px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.home_slider .slider_section{max-width: 1250px; margin: 0 auto; height: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;}
.home_slider .section-title{width: 70%; text-align: center; color: #FFFFFF; opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.home_slider .section-title.visible {opacity: 1; transform: translateY(0);}
.home_slider .section-title h1{font-family: 'Allura', cursive; font-weight: 900; font-size: 100px; letter-spacing: 0.02em; text-shadow: 2px 2px 4px rgb(0, 0, 0); line-height: 1.3;}
.home_slider .section-title p{ font-size: 30px; letter-spacing: 0.02em; text-shadow: 2px 2px 4px rgb(0, 0, 0);}
.equipe{ --background-img: url("/image/equipe.jpg");}
.no-js .home_slider .section-title{opacity: 1;}

.page{width: 100%;}

.formations { padding: 40px 20px 60px 20px; max-width: 1250px; margin: auto; text-align: center; overflow-x: hidden; overflow-y: visible;}
.formations .title {font-family: 'Poppins', sans-serif; font-size: 2.2rem; margin-bottom: 20px; color: #1a1a1a;}
.formations .intro {max-width: 1000px; margin: 0 auto 30px; font-size: 1.1rem; line-height: 1.6; color: #444;}


.grid {display: grid; grid-template-columns: repeat(3, 30%); gap: 30px; justify-content: center;}

    	
.liste-grid {display: grid; gap: 20px; margin: auto; padding: 20px; max-width: 1000px;}
.liste-item{background: #fff; padding: 25px; border-radius: 16px; border-left: 4px solid #20a8ef; font-size: 1.05rem; font-weight: 500; color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: all 0.5s ease;}
.liste-item:hover {transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 16px rgba(0,0,0,0.3);}

.repertoire-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 25px 20px;}
.repertoire-item {background: #fff; padding: 14px 18px; border-radius: 12px; font-size: 1.05rem; font-weight: 500; color: #333; box-shadow: 0 3px 10px rgba(0,0,0,0.05); transition: all 0.5s ease;}
.repertoire-item span {font-weight: 400; font-size: 0.95rem;}
.repertoire-item:hover {background: linear-gradient(90deg, #283f43, #20a8ef); color: #FFFFFF; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.5);}
.repertoire-grid h3 {height: 45px;}

.black-bg {background-color: #323232; color: #fff;}
.white-bg {color: #333;}

.section-content {display: flex; flex-direction: row; gap: 40px; align-items: center; max-width: 2500px; margin: auto; padding:80px 20px;}
.text-block, .image-block { flex: 1;}
.section-block{max-width: 1250px; margin: 40px auto;}
.image-block{display:block;overflow:hidden;border-radius: 16px;filter: drop-shadow(0.2rem 0.2rem 0.4rem #807c7c);}
.image-block img { width: 100%; height: auto;  margin-bottom: -5px; transition: 0.5s cubic-bezier(.45,.05,.55,.95);}
.image-block img:hover{transform: scale(1.2);}

.clip {position: relative; }
.clip-transition-1 { height: 50px; clip-path: polygon(0 0,100% 100%, 0% 100%); background-color: #323232; margin-bottom: -1px;}
.clip-transition-2 { height: 50px; clip-path: polygon(0 0, 100% 0, 100% 100%); background-color: #323232; margin-top: -1px;}

.anim-title { position: relative; display: block; overflow: visible; padding: 10px;}
.no-js .anim-title::after {content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 120px; height: 4px; background: linear-gradient(90deg, #20a8ef, #00c48c); border-radius: 2px;opacity: 0.95;}
.anim-title::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 0; height: 4px; background: linear-gradient(90deg, #283f43, #20a8ef); background: linear-gradient(90deg, #20a8ef, #00c48c); border-radius: 2px; transform: translateX(-50%);}
.anim-title.animate::after { animation: underline-slide 1.5s ease-in-out forwards;}

.comm {background: url("/image/animation/jazz-instruments-chateau.jpg") center center / cover no-repeat; position: relative; z-index: 1; --bg-move: 0px;  overflow: hidden; background-position: center calc(50% + var(--bg-move)); transition: background-position linear; }
.comm p {position: relative; text-align: center; z-index: 4; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-size: 35px;font-weight: 600;line-height: 52.8px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);padding:150px 0; max-width: 750px; margin:auto}

@keyframes gradientMove {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}
@keyframes slideDown {from {transform: translateY(-50px); opacity: 0;} to {transform: translateY(0); opacity: 1;}}
@keyframes jazzDrop {0% {transform: translateY(-8px); opacity: 0;} 100% {transform: translateY(0); opacity: 1;}}
@keyframes underline-slide {0% { width: 0;   transform: translateX(50%);} 50% { width: 120px; transform: translateX(-50%);} 100% { width: 120px; transform: translateX(-50%);}}
@keyframes appear {to { opacity: 1; transform: translateY(0);}}

.button{display: inline-block; padding: 12px 28px; font-weight: 500; color: #FFFFFF; border: none; border-radius: 16px; box-shadow: none; transition: background 0.3s, transform 0.3s ease, box-shadow 0.3s ease;
	background: linear-gradient(90deg, #47beea, #084e59); background-size: 200% 100%; animation: gradientMove 3s cubic-bezier(.65,.05,.36,1) infinite;}
.button:hover, .button:focus {background: linear-gradient( 135deg, #1b7494 0%, #1980a5 50%, #1b7494 100% ); color: #ffffff; text-decoration: none; text-shadow: 0px 0px 3px rgba(0,0,0,0.4); transform: translateY(-3px); box-shadow: 0px 4px 15px rgba(32, 168, 239, 0.4);}


.site-footer { background: linear-gradient( 135deg, #0d95b2 0%, #06819b 65%, #06819b 100% ); color: #ffffff; padding: 50px 20px;  width: 100%; }
.footer-container { max-width: 1000px; margin: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px;}
.footer-col h4 { font-size: 1.3rem; margin-bottom: 15px; font-weight: 700;}
.footer-phone { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px;}
.footer-hours { font-size: 1rem; opacity: 0.9; margin-bottom: 15px;}
.footer-mail { display: flex; align-items: center; gap: 10px;}
.footer-mail a { color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4);}
.footer-mail a:hover { border-bottom-color: #ffffff;}
.footer-right { text-align: right;}
.footer-social { margin-bottom: 20px;}
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(255,255,255,0.15); border-radius: 50%; color: #ffffff;  font-size: 1.2rem; transition: background 0.3s ease;}
.footer-social a:hover { background: rgba(255,255,255,0.3);}
.footer-links { display: flex; flex-direction: column; gap: 8px;}
.footer-links a { color: #ffffff;  text-decoration: none; font-size: 0.95rem; opacity: 0.9;}
.footer-links a:hover { opacity: 1; text-decoration: underline;}

#back-to-top { position: fixed; bottom: 50px; right: 30px; background-color: #0d5f7d;; color: white; padding: 10px 14px; border-radius: 50%; text-align: center; text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 999;}
#back-to-top.show {opacity: 1; pointer-events: auto; transform: translateY(0);}
#back-to-top:hover {background-color: #1980a5; transform: translateY(-3px);}


@media(min-width: 1400px) {

}

@media screen and (max-width: 1100px){
	.home_slider{height: 450px; }
	.home_slider .section-title{width: 65%;}
	
	.home_slider .section-title h1{font-size: 80px; }
	.home_slider .section-title p{ font-size: 25px;}

	
	
}

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

}

@media screen and (max-width: 950px){
	body{flex-wrap: wrap;}
	
	.D_menu{display: none;}
	.hamburger {display: flex;}
	.mobile-menu, .overlay {display: block;}
	.top_menu{height: 65px; }

	.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, #2CB3B4 25%, #1b7494 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: 260px; 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: #20a8ef; border-color: #20a8ef; 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: #20a8ef;}

	.home_slider{height: 380px; }
	.home_slider .section-title{padding: 80px 0 10px 0; width: 90%;text-align: center;color: #FFFFFF;}
	.home_slider .section-title h1{margin-top: 0px; font-size: 70px; font-weight: 600;}
	.home_slider .section-title p{font-size: 22px;font-weight: 600;}

    .section-content { flex-direction: column;}
	.image-block img {width: 100%; max-width: 700px; }

	#response-form{
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 768px) {
	.menu-mobile{width:100%;}
	.top_bar .content{display: flex; flex-wrap: wrap;width: 100%;}
	.top_bar .content-D{width: 100%;text-align: center;font-size: 15px;}
	.top_bar .content-G{display: none;}
	
	.home_slider{height: 200px; }
	.home_slider .section-title h1{font-size: 55px;}
	.home_slider .section-title p{font-size: 1.15rem;;}
	
	.footer-container { grid-template-columns: 1fr; text-align: center; }
	.footer-right {  text-align: center; }
	.footer-mail {  justify-content: center; }
	.footer-links {  align-items: center; }

	@keyframes underline-slide { 0%{ width: 0;   transform: translateX(50%);} 50% { width: 100px; transform: translateX(-50%);} 100% { width: 100px; transform: translateX(-50%);}}
}

@media screen and (max-width: 480px) {
	.button { padding: 10px 20px; font-size: 13px;}
	.home_slider{height: 150px; }
	.home_slider .section-title h1{font-size: 35px;}
	.home_slider .section-title p{font-size: 1rem;;}
	.avis-slide { padding: 20px; }
	.avis-slide.voir-plus { padding: 40px 16px; }
}

@media screen and (min-width: 1600px) {
    .home_slider {
        height: 75vh;
    }
}