*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:
linear-gradient(
rgba(0,0,0,.9),
rgba(0,0,0,.95)
),
url("../images/banner.png");

background-size:cover;
background-attachment:fixed;

font-family:'Montserrat',sans-serif;

color:white;

}

header{

background:
rgba(0,0,0,.85);

backdrop-filter:blur(12px);

border-bottom:
1px solid #8a2be2;

}

.top-header{

display:flex;
align-items:center;

padding:20px 50px;

}

.logo{

width:120px;

filter:


}

.title{

margin-left:25px;

}

.centre-horizontal {
    text-align: center; /* Centre le texte horizontalement */
  }

.title h1{

font-family:'Cinzel',serif;

font-size:3rem;

color:silver;

text-shadow:
0 0 15px #8a2be2;

}

.title h2{

color:#d0b0ff;

font-size:1.2rem;

}

.title h3{

color:#d0b0ff;

font-size:1.1rem;

}



.title p{

color:#ffffff;

font-style:italic;

}

nav{

display:flex;

justify-content:center;

padding:15px;

background:#120018;

}

nav a{

color:white;

text-decoration:none;

margin:0 20px;

transition:.3s;

}

nav a:hover{

color:#b266ff;
 

}

navi{


justify-content:center;

padding:3px;

background:#120018;

}

navi a{

color:white;

text-decoration:none;

transition:.3s;

}

navi a:hover{

color:#b266ff;
 

}


.banner img{

width:100%;

display:block;

}

.hero{

height:500px;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

}

.hero1{

height:400px;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

}

.overlay{

background:
rgba(0,0,0,.7);

padding:50px;

border:
1px solid #8a2be2;

box-shadow:
0 0 30px #8a2be2;

}

  . image {
    width: 100%;           
    height: 100%;           
    object-fit: cover;      
    object-position: center;
    display: block;        
  }

.hero h2{

font-family:'Cinzel',serif;

font-size:3rem;

margin-bottom:20px;

}

.button{

display:inline-block;

margin-top:20px;

padding:15px 40px;

background:#8a2be2;

color:white;

text-decoration:none;

border-radius:5px;

}

.button:hover{

background:#b266ff;

}

 .button-link:active {
 background-color: #003f7f;

}

.about{

max-width:1000px;

margin:auto;

padding:80px 30px;

text-align:center;

}

.about h2{

font-family:'Cinzel',serif;

color:silver;

margin-bottom:30px;

}

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

padding:60px;

}

.card{

background:
rgba(20,20,20,.8);

border:
1px solid #6b2db5;

padding:30px;

backdrop-filter:blur(10px);

}

.card h3{

color:#d0b0ff;

margin-bottom:15px;


}

.schedule{

padding:80px;

text-align:center;

}

.schedule-box{

display:inline-block;

padding:40px;

background:
rgba(20,20,20,.8);

border:
1px solid #8a2be2;

}

footer{

background:black;

padding:50px;

text-align:center;

margin-top:80px;

}

.footer-logo{

width:100px;

margin-bottom:20px;

}

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

    body{
        overflow-x:hidden;
    }

    .top-header{
        flex-direction:column;
        text-align:center;
        padding:20px;
    }

    .title{
        margin-left:0;
        margin-top:15px;
    }

    .title h1{
        font-size:2.2rem;
    }

    .title h2{
        font-size:1rem;
    }

    .title h3{
        font-size:0.9rem;
    }

    nav{
        flex-wrap:wrap;
        gap:10px;
    }

    nav a{
        margin:5px 10px;
    }

    .hero{
        height:auto;
        padding:30px 15px;
    }
    
    .hero1{
        height:auto;
        padding:30px 15px;
    }

    .overlay{
        width:100%;
        padding:25px;
    }

      . image {
    width: 100%;           
    height: 100%;           
    object-fit: cover;      
    object-position: center;
    display: block;        
  }

    .hero h2{
        font-size:2rem;
    }

    .cards{
        grid-template-columns:1fr;
        padding:20px;
    }

    .schedule{
        padding:30px 15px;
    }

    .schedule-box{
        width:100%;
    }

}