/* ================= HERO HOME ================= */

.hero{
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
    padding-top:70px;
}

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.logo-animated-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-logo{
    width:90%;
    max-width:800px;
}

/* ================= BOUTONS ================= */

.hero-music-btn{
    padding:12px 28px;
    border:none;
    background:linear-gradient(to right,#F77F00,#009E60);
    color:white;
    border-radius:30px;
    cursor:pointer;
    font-weight:bold;
}

.btn-hero{
    background:#F77F00;
    color:white;
    padding:14px 40px;
    border-radius:40px;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
}

/* ================= RESPONSIVE MOBILE HERO ================= */

@media(max-width:768px){

.hero{
    min-height:65vh;   /* réduit la hauteur */
    height:auto;
    padding-top:40px;
    padding-bottom:10px; /* enlève le vide sous le bouton */
}

.hero-content{
    margin-top:20px;
    gap:14px;
}

.hero-logo{
    width:95%;
    max-width:420px;
}

.btn-hero{
    margin-bottom:0;
}

}


/* ================= ABOUT SECTION ================= */

.about-home{
    background:#111;
    padding:80px 20px;
    text-align:center;
}

.about-container{
    max-width:900px;
    margin:auto;
}

.about-home h2{
    font-size:42px;
    margin-bottom:30px;
}

.about-intro{
    color:#bbb;
    margin-bottom:40px;
    font-size:18px;
}

.about-intro span{
    color:#F77F00;
    font-weight:bold;
}

.about-text p{
    color:#aaa;
    line-height:1.8;
    margin-bottom:20px;
}

.about-text strong{
    color:#009E60;
}

.quote{
    font-style:italic;
    margin-top:20px;
}
/* ================= CONTACT HOME SECTION ================= */

.contact-home{
    background:#f4f4f4;
    padding:100px 20px;
    text-align:center;
    color:#111;
}

.contact-container{
    max-width:700px;
    margin:auto;
}

.contact-logo-wrapper{
    margin-bottom:40px;
}

.contact-logo{
    width:100%;
    max-width:650px;   /* ← taille agrandie */
}

.contact-home h2{
    font-size:40px;
    margin-bottom:10px;
}

.contact-subtitle{
    letter-spacing:3px;
    color:#777;
    margin-bottom:50px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:18px;
    border:none;
    background:#eaeaea;
    border-radius:6px;
    font-size:15px;
}

.contact-form textarea{
    min-height:140px;
    resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    background:#ffffff;
    box-shadow:0 0 0 2px #F77F00;
}

.contact-form button{
    padding:18px;
    border:none;
    background:linear-gradient(to right,#F77F00,#ffcc00);
    color:white;
    font-weight:bold;
    letter-spacing:4px;
    border-radius:6px;
    cursor:pointer;
    transition:0.3s;
}

.contact-form button:hover{
    background:#009E60;
}

/* Responsive */

@media(max-width:768px){

.contact-home h2{
    font-size:28px;
}

}

@media(max-width:768px){

.about-home{
    padding:50px 20px; /* réduit l’espace entre hero et about */
}

.about-home h2{
    margin-top:0;
}

}
/* ================= COMMISSION BANNER ================= */

.commission-banner{
    color:#fff;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    margin-bottom:20px;
    background:rgba(0,0,0,0.5);
    padding:10px 20px;
    border-radius:30px;
}

.big-percent{
    font-size:48px;
    color:#F77F00;
}

/* MOBILE */

@media(max-width:768px){

.commission-banner{
    font-size:19px;
    padding:8px 14px;
    margin-bottom:15px;
}

.big-percent{
    font-size:24px;
}

}
/* ===== TEXTE COMMISSION ===== */

/* ================= COMMISSION BANNER ================= */

.commission-banner{
    color:#fff;
    font-weight:bold;
    font-size:22px;
    text-align:center;
    margin-bottom:20px;
    background:rgba(0,0,0,0.5);
    padding:12px 25px;
    border-radius:40px;
    backdrop-filter: blur(6px);
}

/* Conteneur du pourcentage */
.percent-wrapper{
    font-size:48px;
    font-weight:900;
    margin:0 5px;
}

/* Couleurs séparées */
.p-orange{
    color:#F77F00;
}

.p-white{
    color:#ffffff;
}

.p-green{
    color:#009E60;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.commission-banner{
    font-size:18px;
    padding:8px 14px;
}

.percent-wrapper{
    font-size:26px;
}

}