/* ==========================
   HERO REVERSE
========================== */

#hero-reverse{

    position:relative;

    height:100vh;

    overflow:hidden;

    background:#0b0b0b;

    display:flex;

    justify-content:center;

    align-items:center;

}
/*==================================================
                HERO CONCEPT
==================================================*/

.hero-tagline{

    margin-top:25px;
    font-size:2rem;
    font-weight:300;
    line-height:1.35;

}

.hero-tagline span{

    color:var(--gold);
    font-weight:600;

}


/*=====================================
            CONCEPT
=====================================*/

.concept{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;

    margin:50px 0;

    flex-wrap:wrap;

}


/*=====================================
            CARTE
=====================================*/

.concept-card{

    width:145px;
    padding:22px 18px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:18px;

    border-radius:18px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 30px rgba(0,0,0,.25);

    transition:.35s;

}

.concept-card:hover{

    transform:translateY(-4px);

    border-color:rgba(255,255,255,.35);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 18px 40px rgba(0,0,0,.35);

}

/* Carte en réflexion */

.concept-card{
    cursor:pointer;
}

.concept-card.thinking{

    transform:translateY(-4px) scale(1.03);

    border-color:rgba(200,160,77,.9);

    box-shadow:
        0 0 18px rgba(200,160,77,.45),
        0 0 40px rgba(200,160,77,.18),
        inset 0 0 18px rgba(200,160,77,.15);

}


/*=====================================
          STYLE FIXE (POP...)
=====================================*/

.concept-style{

    font-size:1.15rem;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    color:#fff;

}


/*=====================================
            FLECHE
=====================================*/

.concept-arrow{

    color:var(--gold);

    font-size:1.4rem;

    line-height:1;

    opacity:.8;

    animation:arrowPulse 2s infinite;

}


/*=====================================
            ROULEAU
=====================================*/

.roller{

    width:100%;
    height:42px;

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

    overflow:hidden;

}

.current-style{

    font-size:1.15rem;
    font-weight:700;

    letter-spacing:2px;

    color:var(--gold);

    min-width:95px;

    text-align:center;

}

.current-style.hide{

    opacity:0;

    transform:
        translateY(-8px)
        scale(.92)
        rotate(-6deg);

}

.gold{

    color:var(--gold);

}


/*=====================================
        ANIMATION FLECHE
=====================================*/

@keyframes arrowPulse{

    0%,100%{

        transform:translateY(0);
        opacity:.55;

    }

    50%{

        transform:translateY(5px);
        opacity:1;

    }

}

/* ==========================
   SLIDESHOW
========================== */

.slideshow{

    position:absolute;

    inset:0;

    z-index:1;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 2s ease;

    transform:scale(1);
    animation:heroZoom 10s linear infinite;
}

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }


}

.slide.active{

    opacity:1;

}

/* photos provisoires */

.slide1{
    background-image:url("../assets/reverse/hero01.jpg");
}

.slide2{
    background-image:url("../assets/reverse/hero02.jpg");
}

.slide3{
    background-image:url("../assets/reverse/hero03.jpg");
}

.slide4{
    background-image:url("../assets/reverse/hero04.jpg");
}

.slide5{
    background-image:url("../assets/reverse/hero05.jpg");
}

/* ==========================
   VOILE
========================== */

.hero-overlay{

    position:absolute;

    inset:0;

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

    z-index:2;

}

/* ==========================
   TEXTE
========================== */

/* ==========================
   HERO CONTENT
========================== */

.hero-content{

    position:relative;
    z-index:3;

    text-align:center;

    width:min(900px,90%);

}

/* ==========================
   TITRES
========================== */

/* ==========================
   LOGO HERO
========================== */



.signature{

    font-size:1rem;

    letter-spacing:8px;

    margin-bottom:60px;

  }  

.hero-content h2{

    color:white;

    font-size:2.8rem;

    font-weight:400;

    margin-bottom:30px;

    opacity:0;

    animation:fadeUp 1s ease .6s forwards;

}

.hero-content h3{

    font-family:"Cormorant Garamond",serif;

    color:#c8a04d;

    font-size:4.8rem;

    line-height:1.1;

    margin-bottom:35px;

    opacity:0;

    animation:fadeUp 1s ease .9s forwards;

}

.concept{

    max-width:720px;

    margin:auto;

    color:#ddd;

    font-size:1.15rem;

    line-height:2;

    margin-bottom:55px;

    opacity:0;

    animation:fadeUp 1s ease 1.2s forwards;

}



.hero-buttons a{
    
display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:220px;

    padding:16px 38px;

    border:2px solid #c8a04d;

    border-radius:40px;

    background:rgba(255,255,255,.03);

    color:white;

    text-decoration:none;

    transition:.35s;

}

.hero-buttons a:hover{

  background:#c8a04d;

    color:#111;

    box-shadow:0 0 25px rgba(200,160,77,.35);

    transform:translateY(-3px);


}


/* ==========================
   ANIMATION
========================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:50px;

    flex-wrap:wrap;

}




/* ==========================
   FLECHE
========================== */

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:34px;

    z-index:4;

}


/*======================================
            LE DÉFI REVERSE
======================================*/

#defi{

    background:#161616;
    padding:140px 0;

}

.section-subtitle{

    display:block;
    text-align:center;
    color:#c8a04d;
    letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:20px;

}

#defi h2{

    font-family:"Cormorant Garamond",serif;
    color:white;
    text-align:center;
    font-size:4.5rem;
    margin-bottom:20px;

}

.section-intro{

    text-align:center;
    color:#d8d8d8;
    max-width:650px;
    margin:0 auto 80px;
    line-height:1.8;

}

.defi-grid{

    display:flex;
    justify-content:center;
    gap:70px;
    flex-wrap:wrap;

}

.defi-card{

    text-decoration:none;

}

.thumb{

    border:1px solid rgba(200,160,77,.15);

    width:320px;
    height:570px;

    border-radius:35px;

    overflow:hidden;

    position:relative;

    background-size:cover;
    background-position:center;

    transition:.5s;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.thumb1{

    background-image:url("../assets/reverse/defi1.jpg");
    transform:rotate(-2deg);
}

.thumb2{

    background-image:url("../assets/reverse/defi2.jpg");
    transform:rotate(0deg);
}

.thumb3{

    background-image:url("../assets/reverse/defi3.jpg");
    transform:rotate(2deg);
}

.overlay{

    position:absolute;
    inset:0;

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

    display:flex;

    flex-direction:column;

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

    transition:.4s;

}

.play{

    width:100px;
    height:100px;

    border-radius:50%;

    border:2px solid #c8a04d;

    display:flex;

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

    font-size:40px;

    color:#c8a04d;

    margin-bottom:30px;

    transition:.4s;
    

}

.thumb:hover .play{

    transform:scale(1.15) rotate(180deg);

}

.overlay span{

    opacity:0;

    transform:translateY(20px);

    transition:.4s;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:1rem;

    font-weight:500;

}

.defi-card .overlay span{

    color:#ffffff;

}


.thumb:hover .overlay span{

    opacity:1;
    transform:translateY(0);

}

.thumb:hover{

    transform:translateY(-12px) scale(1.03);

    border:2px solid #c8a04d;

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 30px rgba(200,160,77,.35);

}

.thumb:hover .overlay{

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

}

.all-reels{

    display:block;

    text-align:center;

    margin-top:70px;

    color:#c8a04d;

    text-decoration:none;

    font-size:1.05rem;

}

.all-reels:hover{

    color:white;

}

/*======================================
          QUI SOMMES-NOUS ?
======================================*/

#story{

    position:relative;

    min-height:100vh;

    overflow:hidden;

}

.story-image{

    position:absolute;

    inset:0;

}

.story-image img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center top;

    filter:
        brightness(.90)
        contrast(1.08)
        saturate(.92);

}

#story:hover .story-image img{

    transform:scale(1.07);

}

.story-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.15) 100%
    );

    display:flex;

    align-items:center;

    z-index:2;

}

.story-content{

    position:relative;

    z-index:5;

    width:min(620px,90%);

    margin-left:10%;

    color:white;

}


.story-content .section-subtitle{

    text-align:left;

    margin-bottom:25px;

}

.story-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:3.6rem;

    line-height:1.08;

    margin-bottom:40px;

    color:white;

    

}

.story-content p{

    font-size:1.08rem;

    line-height:2.15;

    color:#e5e5e5;

    margin-bottom:25px;

    max-width:560px;

}

.story-content strong{

    color:#c8a04d;

    font-weight:600;

}

.story-content blockquote{

    margin:50px 0;

    padding-left:25px;

    border-left:3px solid #c8a04d;

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    font-style:italic;

    color:white;

}

.story-content .btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:20px 48px;

    border:2px solid #c8a04d;

    border-radius:40px;

    color:white;

    text-decoration:none;

    transition:.35s;

    background:rgba(255,255,255,.03);

    margin-top:20px;

}

.story-content .btn-gold:hover{

    background:#c8a04d;

    color:#111;

    transform:translateY(-3px);

    box-shadow:0 0 30px rgba(200,160,77,.12);

}

.story-rv{

    margin:25px 0 30px;

}

.story-rv img{

    width:70px;

    opacity:.9;

}


.story-line{

    width:90px;

    height:2px;

    background:#c8a04d;

    margin-bottom:25px;

}
/*======================================
            NOS FORMATIONS
======================================*/

#formations{

    background:#111;

    padding:140px 0;

}

#formations h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4.2rem;

    color:#fff;

    text-align:center;

    margin-bottom:20px;

}

#formations .section-intro{

    text-align:center;

    color:#d8d8d8;

    max-width:700px;

    margin:0 auto 80px;

    line-height:1.9;

}

/*==============================
            GRILLE
==============================*/

.formations-grid{

    display:flex;

    justify-content:center;

    gap:50px;

    align-items:flex-start;

    flex-wrap:wrap;

}

/*==============================
            CARTE
==============================*/

.formation-card{

    width:520px;

    border-radius:30px;

    overflow:hidden;

    background:#181818;

    border:1px solid rgba(200,160,77,.15);

    box-shadow:0 20px 50px rgba(0,0,0,.45);

    transition:.35s;

}

.formation-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 25px rgba(200,160,77,.20);

}

/*==============================
            PHOTO
==============================*/

.formation-image{

    position:relative;

    height:320px;

    background-size:cover;

    background-position:center;

    overflow:hidden;

    transition:transform .7s ease;


}

.formation-title{

    text-shadow:0 3px 12px rgba(0,0,0,.55);

}

.formation-duo{

    background-image:url("../assets/reverse/duo.jpg");

}

.formation-quartet{

    background-image:url("../assets/reverse/quartet.jpg");

}

.formation-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:35px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.18),
        transparent
    );

}
/*==============================
        TITRES SUR LA PHOTO
==============================*/

.formation-title span{

    display:block;

    color:#c8a04d;

    letter-spacing:4px;

    font-size:.78rem;

    margin-bottom:8px;

    text-transform:uppercase;

}

.formation-title h3{

    color:#fff;

    font-family:"Cormorant Garamond",serif;

    font-size:2.6rem;

    line-height:1;

}

/*==============================
            BOUTON +
==============================*/

.open-card{

    width:62px;

    height:62px;

    border-radius:50%;

    border:2px solid #c8a04d;

    color:#c8a04d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    transition:.35s;

    flex-shrink:0;

    cursor:pointer;

}

.formation-card:hover .open-card{

    background:#c8a04d;

    color:#111;

    transform:rotate(90deg);

    transform:scale(1.08);

}

/*==============================
        CONTENU CACHÉ
==============================*/

.formation-details{

    max-height:0;

    overflow:hidden;

transition:
    max-height .6s ease,
    padding .4s ease;

    border-top:1px solid rgba(200,160,77,.25);

}

.formation-text{

    padding:40px;

}

.formation-card.active .formation-details{

    max-height:1200px;

}

.formation-card.active .open-card{

    background:#c8a04d;

    color:#111;

    transform:rotate(45deg);

}

/*==============================
            TEXTE
==============================*/

.formation-text h4{

    color:#c8a04d;

    font-size:2rem;

    margin-bottom:25px;

    font-family:"Cormorant Garamond",serif;

}

.formation-text p{

    color:#ddd;

    line-height:1.9;

    margin-bottom:22px;

}

.formation-place{

    color:#c8a04d;

    font-weight:600;

    margin:35px 0;

}

/*==============================
            BOUTON
==============================*/

.formation-text .btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border:2px solid #c8a04d;

    border-radius:40px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    background:rgba(255,255,255,.03);

    margin-top:15px;

}

.formation-text .btn-gold:hover{

    background:#c8a04d;

    color:#111;

}
.formation-text{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .45s ease .2s,
        transform .45s ease .2s;

}

.formation-card.active .formation-text{

    opacity:1;

    transform:translateY(0);

}

.formation-card.active{

    border:1px solid rgba(200,160,77,.5);

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 35px rgba(200,160,77,.20);

}
/*==================================================
            EXPLOREZ L'UNIVERS REVERSE
==================================================*/

#repertoire{

    padding:120px 0;

    background:#050505;

}

#repertoire .container{

    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

#repertoire h2{

    text-align:center;

    margin-bottom:20px;

}

#repertoire .section-intro{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

    color:#d0d0d0;

    line-height:1.8;

}


/*==========================================
                EXPLORATEUR
==========================================*/

.explorer{

    display:flex;

    justify-content:center;

    margin-top:-120px;   /* ← essaie -100 ou -120 */
    margin-bottom:15px;

}

.reverse-wheel{

    position:relative;

    width:900px;

    height:520px;

}


/*==========================================
              MONOGRAMME
==========================================*/

.reverse-center{

    position:absolute;

    left:50%;

    top:47%;

    transform:translate(-50%,-50%);

    width:140px;

    height:140px;

    border:2px solid #c8a04d;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0d0d0d;

    z-index:50;
    transition:.35s;
}

.reverse-center.active{

    transform:translate(-50%,-50%) scale(1.08);

    box-shadow:
        0 0 0 8px rgba(200,160,77,.08),
        0 0 30px rgba(200,160,77,.30);
}

.reverse-center img{

    width:75px;

}


/*==========================================
              CATEGORIES
==========================================*/

.origin{

     position:absolute;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(255,255,255,.20);

    border-radius:30px;

    padding:10px 22px;

    color:#cfcfcf;

    cursor:pointer;

    letter-spacing:5px;

    font-size:1.2rem;

    font-weight:700;

    transition:all .35s ease;

}

.origin:hover{

    color:#c8a04d;

    border-color:rgba(200,160,77,.35);

    background:rgba(200,160,77,.06);

}

.origin.active{

    color:#c8a04d;

    background:rgba(200,160,77,.12);

    border:1px solid rgba(200,160,77,.45);

    box-shadow:0 0 20px rgba(200,160,77,.15);

}



/*==========================================
          POSITION DES CATEGORIES
==========================================*/

.pop{

    top:70px;
    left:50%;
    transform:translateX(-50%);

}

.rock{

    left:120px;

    top:70px;

}

.soul{

    top:70px;
    right:90px;

}

.jazz{

    left:110px;

    bottom:70px;

}

.chanson{

    right:100px;

    bottom:70px;

}

.reggae{

    bottom:70px;
    left:50%;
    transform:translateX(-50%);

}


/*==========================================
                 LIGNES
==========================================*/

.line{

    position:absolute;

    top:50%;

    height:2px;

    background:#c8a04d;

    width:0;

    transition:.45s ease;

    z-index:10;

}

.right-line{

    left:50%;

}


/*==========================================
             LISTE MORCEAUX
==========================================*/

.songs-list{

    position:absolute;

    left:130px;

    top:50%;

    transform:translateY(-50%);

    width:260px;

    max-height:240px;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:20;

    padding-right:8px;

    /* Cache les scrollbars */

    scrollbar-width:none;      /* Firefox */

    -ms-overflow-style:none;   /* IE/Edge */

}

.songs-list::-webkit-scrollbar{

    display:none;

}

/* Scrollbar Chrome */

.songs-list::-webkit-scrollbar{

    width:6px;

}

.songs-list::-webkit-scrollbar-track{

    background:rgba(255,255,255,.05);

    border-radius:20px;

}

.songs-list::-webkit-scrollbar-thumb{

    background:#c8a04d;

    border-radius:20px;

}

.songs-list::-webkit-scrollbar-thumb:hover{

    background:#d8b15a;

}

.songs-list.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:20px;

    row-gap:14px;

}

.song{

    opacity:0;

    transform:translateX(-20px);

    transition:.35s;

    color:white;

    cursor:pointer;

    break-inside:avoid;

     direction:ltr;

    text-align:left;

    opacity:0;

    transform:translateX(-20px);

    transition:.35s;

    color:white;

    cursor:pointer;

    position:relative;


}

.song.active{

    transform:translateX(8px);

}

.song.active strong{

    color:#c8a04d;

}

.song.active span{

    color:#ffffff;

}

.song.active::before{

    content:"";

    position:absolute;

    left:-12px;

    top:4px;

    bottom:4px;

    width:3px;

    border-radius:3px;

    background:#c8a04d;

}

.song strong{

    display:block;

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

}

.song span{

    display:block;

    margin-top:3px;

    color:#9a9a9a;

    font-size:.82rem;

}

.song.show{

    opacity:1;

    transform:none;

}

.song.active{

    transform:translateX(10px);

}

.song.active strong{

    color:#c8a04d;

}

.song.active span{

    color:#ffffff;

}

.song:hover{

    color:#c8a04d;

}


/*==========================================
          STYLE REVERSE
==========================================*/

.reverse-style-display{

    position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    color:#c8a04d;

    font-size:2rem;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;

    z-index:10;

}

.reverse-style-display h3{

    display:inline-block;

    margin:0;

    padding-left:20px;

    background:#050505;

}


/*==========================================
             FICHE MORCEAU
==========================================*/

.song-info{

    max-width:700px;

    margin:0 auto;

    padding:20px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    background:#0d0d0d;

}

.song-info h2{

    font-size:1.4rem;

    font-weight:600;

    margin-bottom:12px;

    color:#fff;

}

.song-info p{

    color:#d5d5d5;

    line-height:1.8;

}

.song-info audio{

    margin-top:25px;

    width:100%;

}

.placeholder{

    text-align:center;

    color:#888;

}

.scroll-hint{

    position:absolute;

    left:100px;      /* juste à gauche de la liste */
    top:50%;

    transform:translateY(-50%);

    color:#c8a04d;

    font-size:18px;

    opacity:.75;

    pointer-events:none;

    animation:bounce 1.8s infinite;

    transition:opacity .3s;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(6px);

    }

}

.song-title{

    font-family:"Cormorant Garamond",serif;

    font-size:1.5rem;

    font-weight:600;

    color:#fff;

    margin:0 0 6px;

}

.song-meta{

    color:#c8a04d;

    font-size:.9rem;

    letter-spacing:1px;

    margin:0 0 15px;

}
/*==================================================
                L'ÉMOTION EN IMAGES
==================================================*/

#gallery{

    background:#F7F4EE;
    padding:120px 0;

}

.gallery-grid{

    display:grid;

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

    gap:16px;

    width:100%;

    max-width:1100px;

    margin:60px auto 0;

}

/*==============================
        RESPONSIVE
==============================*/

@media (max-width:768px){

    #gallery{

        padding:90px 20px;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

}

@media (max-width:480px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }

}

/*==============================
        CARTES
==============================*/

.gallery-item{

    position:relative;
    overflow:hidden;

    aspect-ratio:1;

    border-radius:16px;

    cursor:pointer;

    background:#181818;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.gallery-item:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(200,160,77,.18);

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .45s;

}

.gallery-item:hover img{

    transform:scale(1.05);

}

/*==============================
        PLAY
==============================*/

.play-button{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5;

}

.play-button span{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#c8a04d;

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

    transition:.3s;

}

.gallery-item:hover .play-button span{

    transform:scale(1.12);

}

/*==================================================
                    LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

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

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

z-index:999999999;

}

.lightbox.open{

    display:flex;

}

.lightbox-content{

    max-width:90vw;
    max-height:90vh;

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

}

.lightbox-content img,
.lightbox-content video,
.lightbox-content iframe{

    display:block;

    max-width:90vw;
    max-height:90vh;

    border-radius:12px;

}


/* YouTube */

.lightbox-content iframe[src*="youtube"]{

    width:90vw;
    max-width:900px;

    height:min(50.625vw,90vh);

}


/* Facebook Reels */

.lightbox-content iframe[src*="facebook"]{

    width:min(90vw,500px);

    height:90vh;
    max-height:700px;

}

.lightbox-close{

    position:absolute;

    top:25px;
    right:30px;

    width:50px;
    height:50px;

    border:none;

    background:none;

    color:white;

    font-size:34px;

    cursor:pointer;

    z-index:100000;

}

.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:white;

    font-size:34px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-arrow:hover{

    background:#c8a04d;

    color:#111;

}

.lightbox-arrow.prev{

    left:30px;

}

.lightbox-arrow.next{

    right:30px;

}

.lightbox img,
.lightbox video{

    animation:fadeZoom .25s ease;

}

@keyframes fadeZoom{

    from{

        opacity:0;
        transform:scale(.96);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/*==================================================
                    BOOKING
==================================================*/

#booking{

    position:relative;

    padding:140px 0;

    background:#080808;

    text-align:center;

}

.booking-content{

    position:relative;

    z-index:2;

}

#booking h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    color:white;

    margin-bottom:30px;

}

.booking-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin:60px 0;

}

.booking-tags span{

    padding:12px 22px;

    border:1px solid rgba(200,160,77,.35);

    border-radius:40px;

    color:#fff;

    background:rgba(255,255,255,.03);

    transition:.3s;

}

.booking-tags span:hover{

    background:#c8a04d;

    color:#111;

}

.booking-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 42px;

    margin-top:10px;

    border-radius:40px;

    background:#c8a04d;

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.booking-button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(200,160,77,.35);

}

.booking-contact{

    margin-top:60px;

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    color:white;

    font-size:1.05rem;

}

.booking-note{

    margin-top:30px;

    color:#bfbfbf;

    font-style:italic;

}

.booking-benefits{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin:40px 0 55px;

}

.booking-benefits span{

    color:#c8a04d;

    font-weight:600;

    letter-spacing:.5px;

}

.booking-benefits span{

    color:#c8a04d;

    font-weight:600;

    position:relative;

    padding-left:18px;

}

.booking-benefits span::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#c8a04d;

}

.booking-contact a{

    color:white;

    transition:.3s;

}

.booking-contact a:hover{

    color:#c8a04d;

}
/*==================================================
                    FOOTER
==================================================*/

#footer{

    background:#080808;

    border-top:1px solid rgba(255,255,255,.08);

    padding:100px 0 35px;
    
    text-align:center;

}

/*==============================
        RESEAUX
==============================*/

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:45px;

}

.footer-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    border:1px solid rgba(200,160,77,.35);

    color:#c8a04d;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:1.15rem;

    transition:.35s;

}

.footer-social a:hover{

    background:#c8a04d;

    color:#111;

    transform:translateY(-4px) scale(1.08);

}

/*==============================
    TRANSITION AUDE LP
==============================*/

.footer-transition{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    margin-bottom:60px;

}

/*==============================
        ECG
==============================*/

.footer-heartbeat{

    position:relative;

    width:260px;

    height:120px;

    margin-bottom:20px;

}

.footer-heartbeat svg{

    display:block;

    width:260px;

    height:120px;

    fill:none;

}

.footer-heartbeat svg path{

    fill:none;

    stroke:var(--gold);

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:700;

    stroke-dashoffset:700;

    animation:ecg 2.2s linear infinite;

}

@keyframes ecg{

    from{
        stroke-dashoffset:700;
    }

    to{
        stroke-dashoffset:0;
    }

}

@keyframes heartbeat{

    0%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.15);
    }

}

@keyframes heartGlow{

    0%,100%{
        filter:drop-shadow(0 0 10px rgba(200,160,77,.45));
    }

    50%{
        filter:drop-shadow(0 0 22px rgba(200,160,77,.9));
    }

}

/*==============================
        TEXTES
==============================*/

.footer-transition h3{

    color:#c8a04d;

    font-size:1rem;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:400;

    margin-bottom:10px;

}

.footer-transition h2{

    color:#fff;

    font-family:"Cormorant Garamond",serif;

    font-size:2.8rem;

    margin-bottom:18px;

}

.footer-transition span{

    color:#c8a04d;

    transition:.35s;

}

.footer-transition:hover span{

    letter-spacing:1px;

}

.footer-transition:hover{

    transform:translateY(-3px);

}

/*==============================
        BAS FOOTER
==============================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:28px;

}

.footer-bottom p{

    color:#888;

    margin-bottom:18px;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.footer-links a{

    color:#888;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#c8a04d;

}

/*==============================
        RESPONSIVE
==============================*/

@media(max-width:768px){

    .footer-transition h2{

        font-size:2rem;

    }

    .footer-social{

        gap:15px;

    }

}

.footer-heart{

    position:absolute;

    left:57%;
    top:48%;

    transform:translate(-50%,-50%);

    font-size:38px;

    color:var(--gold);

    text-shadow:
        0 0 12px rgba(200,160,77,.5),
        0 0 28px rgba(200,160,77,.25);

    filter:drop-shadow(0 0 10px rgba(200,160,77,.8));

    z-index:10;

    animation:
        heartbeat 2.2s infinite,
        heartGlow 2.2s infinite;

}

/*==================================================
            RETOUR EN HAUT
==================================================*/

#backToTop{

    position:fixed;

    right:30px;
    bottom:30px;

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    background:rgba(215,184,115,.92);

    color:#10243F;

    font-size:28px;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,.30);

    backdrop-filter:blur(8px);

    transition:
        opacity .35s,
        transform .35s,
        background .35s;

opacity:1;
visibility:visible;

    transform:translateY(20px);

    z-index:99999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:#fff;

    color:#10243F;

    transform:translateY(-5px) scale(1.08);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media (max-width:768px){

    #backToTop{

        width:48px;
        height:48px;

        right:18px;
        bottom:18px;

        font-size:22px;

    }

}



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

@media(max-width:768px){


    /*=========================
            HERO
    =========================*/
.hero-content{
    position:relative;
    z-index:5;
}

    #hero-reverse{
        min-height:100vh;
        height:auto;
        overflow:visible;
        padding:100px 0 60px;
    }

.hero-logo img{
    display:block;
    width:160px;
    margin:30px auto 25px;
}

    .signature{
 
    font-size:.9rem;
    letter-spacing:4px;
        margin:50px 0;
    }

    .hero-content h1,
    .hero-content h2{
        font-size:2rem;
    max-width: 80%;
    margin: auto;
    }

    .hero-tagline{
        font-size:1rem;
        line-height:1.7;
        margin-bottom:50px;
    }

    .slide1{
    background-image:url("../assets/reverse/mobile-hero01.jpg");
}

.slide2{
    background-image:url("../assets/reverse/mobile-hero02.jpg");
}

.slide3{
    background-image:url("../assets/reverse/mobile-hero03.jpg");
}

.slide4{
    background-image:url("../assets/reverse/mobile-hero04.jpg");
}

.slide5{
    background-image:url("../assets/reverse/mobile-hero05.jpg");
}

.slide{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#0b0b0b;
}


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

.concept{


    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
}

.concept-card{
    width:calc(50% - 12px);
    max-width:130px;
}

.concept-style{
    font-size:1rem;
    letter-spacing:1px;
}

.current-style{
    font-size:1rem;
    min-width:80px;
}

.roller{
    height:34px;
}

.concept-arrow{
    font-size:1.2rem;
}
    
    /*=========================
          DÉFI REVERSE
    =========================*/

    #defi{
        padding:80px 0;
    }

    #defi h2{
        font-size:2.6rem;
    }

    .section-intro{
        margin:0 auto 45px;
        padding:0 20px;
    }

    .defi-grid{
        gap:25px;
    }

    .thumb{
        width:170px;
        height:302px;
        border-radius:20px;
    }

    .play{
        width:50px;
        height:50px;
        font-size:20px;
        margin-bottom:12px;
    }

    .overlay span{
        font-size:.85rem;
        letter-spacing:1px;
    }
    /*=========================
      STORY MOBILE
=========================*/

#story{

    min-height:auto;

}

.story-overlay{

    align-items:flex-start;

    padding:80px 0;

}

.story-content{

    width:90%;
    margin:0 auto;

}

.story-content h2{

    font-size:2.8rem;
    line-height:1.05;

}

.story-content p{

    font-size:1rem;
    line-height:1.9;

}

.story-content blockquote{

    font-size:1.4rem;
    margin:35px 0;

}

.story-content .btn-gold{

    width:100%;
    max-width:280px;
    justify-content:center;

}

/*==================================================
        UNIVERS REVERSE - MOBILE
==================================================*/

#repertoire{

    padding:80px 0;

}

#repertoire .container{

    padding:0 20px;

}

#repertoire h2{

    font-size:2.3rem;

}

#repertoire .section-intro{

    margin:0 auto 45px;
    font-size:1rem;
    line-height:1.7;

}

/*----------------------------
        EXPLORATEUR
-----------------------------*/

.explorer{

    margin:0;

}

.reverse-wheel{

    width:100%;
    height:auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    position:relative;

}

/*----------------------------
      LOGO CENTRAL
-----------------------------*/

.reverse-center{

    position:relative;

    left:auto;
    top:auto;

    transform:none;

    width:120px;
    height:120px;

    margin-bottom:45px;

    margin:25px 0 35px;

}

.reverse-center.active{

    transform:scale(1.05);

}

.reverse-center img{

    width:40px;

}

/*----------------------------
        CATEGORIES
-----------------------------*/

.categories-mobile{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    width:100%;

    max-width:360px;

}

.origin{

    position:relative;

    top:auto;
    left:auto;
    right:auto;
    bottom:auto;

    transform:none;

    width:100%;

    text-align:center;

    padding:12px 0;

    font-size:.95rem;

    letter-spacing:3px;

}

/* dernier bouton centré */

.chanson{

    grid-column:1 / -1;

}

/*----------------------------
        LIGNES
-----------------------------*/

.line{

    display:none;

}

/*----------------------------
        LISTE
-----------------------------*/

.songs-list{

    position:relative;

    left:auto;
    top:auto;

    transform:none;

    width:100%;

    max-width:340px;

    max-height:220px;

    margin:35px auto 0;

    padding:0;

}

.songs-list.two-columns{

    display:flex;

    flex-direction:column;

}

/*----------------------------
      STYLE REVERSE
-----------------------------*/

.reverse-style-display{

    position:relative;

    right:auto;
    top:auto;

    transform:none;

    text-align:center;

    margin:25px 0;

    font-size:1.3rem;

    letter-spacing:4px;

}

.reverse-style-display h3{

    padding:0;

    background:none;

}

/*----------------------------
       SCROLL HINT
-----------------------------*/

.scroll-hint{

    display:none;

}

/*----------------------------
       PLAYER
-----------------------------*/

.song-info{

    margin-top:40px;

    padding:20px;

}

.song-info audio{

    width:100%;

}


}

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

@media (max-width:768px){

    #formations{

        padding:90px 0;

    }

    #formations h2{

        font-size:2rem;
        line-height:1.1;
        padding:0 20px;

    }

    #formations .section-intro{

        margin:0 auto 50px;
        padding:0 20px;

    }

}