/*==================================================
                    HERO AUDE LP
==================================================*/

#hero-aude{

    position:relative;

    height:100vh;

    overflow:hidden;

    background:#071627;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==============================
            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 12s linear infinite;

}

.slide.active{

    opacity:1;

}

.slide1{

    background-image:url("../assets/hero/hero1.jpg");

}

.slide2{

    background-image:url("../assets/hero/hero2.jpg");

}

.slide3{

    background-image:url("../assets/hero/hero3.jpg");

}

.slide4{

    background-image:url("../assets/hero/hero4.jpg");

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/*==============================
              OVERLAY
==============================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(4,18,36,.18),

        rgba(4,18,36,.78)

    );

    z-index:2;

}

/*==============================
            CONTENU
==============================*/

.hero-content{

    position:relative;

    z-index:3;

    width:min(1000px,90%);

    text-align:center;

}

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

.hero-logo{

    opacity:0;

    animation:fadeUp 1s ease forwards;

}

.hero-logo img{

    width:320px;

    max-width:80%;

    display:block;

    margin:auto;

    filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));

}

/*==============================
            SIGNATURE
==============================*/

.signature{

    margin:10px 0 45px;

    color:#E8D9B5;

    text-transform:uppercase;

    letter-spacing:8px;

    font-size:.85rem;

    opacity:0;

    animation:fadeUp 1s ease .3s forwards;

}

/*==============================
            TITRE
==============================*/

.hero-content h2{

    font-family:"Cormorant Garamond",serif;

    color:white;

font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1;

    font-weight:600;

    margin-bottom:20px;

    opacity:0;

    animation:fadeUp 1s ease .6s forwards;

}

/*==============================
            PHRASE
==============================*/

.hero-tagline{

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

    color:#f5f5f5;

    font-size:1.25rem;

    line-height:1.9;

    font-weight:300;

    opacity:0;

    animation:fadeUp 1s ease .9s forwards;

}

/*======================================
            EVENTAIL DES CARTES
======================================*/

.hero-cards{

    position:relative;

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

    width:min(760px,100%);
    height:260px;

    margin:20px auto 60px;

}

.hero-card{

    position:relative;

    margin:0 -45px;

    transition:transform .35s ease;

}

.hero-card img{

    width:165px;

    border-radius:18px;

    display:block;

    cursor:pointer;

    backface-visibility:hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.40);

    transition:
        transform .5s,
        box-shadow .35s;

            transition: transform .25s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;

}

.card-title{

    position:absolute;

    left:50%;

    top:-55px;

    transform:translateX(-50%);

    white-space:nowrap;

    color:#E8D9B5;

    font-family:"Cormorant Garamond", serif;

    font-size:1.2rem;

    font-weight:600;

    letter-spacing:.5px;

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

    opacity:.9;

    transition:all .3s ease;

    pointer-events:none;

    z-index:9999;

    

}

.hero-card:hover .card-title{

    transform:translateX(-50%) translateY(-6px);

    color:#fff;

    opacity:1;

}

.mobile-card-label{

    cursor:pointer;
    text-decoration:none;

}

.mobile-card-label:hover{

    transform:translateY(-2px);
    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 18px rgba(212,175,55,.25);

}

/* Masquer "Découvrir" sur PC */
.discover-btn{
    display:none;
}

@media (max-width:768px){

    .discover-btn{
        display:block;
    }

}

/*==============================
            POSITION
==============================*/
.hero-card:nth-child(1){
    transform:translateX(-32%) rotate(-22deg);
}

.hero-card:nth-child(2){
    transform:translateX(-16%) rotate(-11deg);
}

.hero-card:nth-child(3){
    transform:translateX(0) rotate(0deg);
}

.hero-card:nth-child(4){
    transform:translateX(16%) rotate(11deg);
}

.hero-card:nth-child(5){
    transform:translateX(32%) rotate(22deg);
}
/*==============================
        CARTE SELECTIONNEE
==============================*/



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

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    color:white;

    font-size:34px;

    z-index:5;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:

        translateX(-50%)

        translateY(0);

    }

    50%{

        transform:

        translateX(-50%)

        translateY(8px);

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
            LE COMMENCEMENT
==================================================*/

#commencement{

    background:#FAF8F3;

    padding:40px 0 50px;

}

#commencement .container{

    width:min(1200px,90%);
    margin:auto;

}

.section-title{

    text-align:center;

    margin-bottom:35px;

}

.section-title span{

    display:block;

    color:#D7B873;

    letter-spacing:5px;

    font-size:.85rem;

    margin-bottom:20px;

}

.section-title h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    color:#10243F;

    margin-bottom:25px;

}

.intro-quote{

    font-size:1.2rem;

    color:#244F82;

    font-style:italic;

    font-weight:500;

}

.commencement-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

    align-items:center;

}

.commencement-photo img{

       width:100%;
    max-width:400px;

}

.commencement-text{

    color:#30465D;

    font-size:1.1rem;

    line-height:2;

}

.commencement-text p{

    margin-bottom:18px;

}

.signature-aude{

    margin-top:50px;

    text-align:right;

    font-family:"Cormorant Garamond",serif;

    font-size:1.6rem;

    color:#D7B873;

}

.commencement-transition{

   font-size:2rem;
opacity:.35;
margin-top:45px;

}

.commencement-transition p{

    font-family:"Cormorant Garamond", serif;

    font-size:2.5rem;

    color:#10243F;

    opacity:.75;

}

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

@media (max-width:768px){

    .commencement-grid{

        display:flex;
        flex-direction:column;

        gap:35px;

        align-items:center;

    }

    .commencement-photo{

        width:100%;
        display:flex;
        justify-content:center;

    }

    .commencement-photo img{

        width:280px;
        max-width:90%;

    }

    .commencement-text{

        width:100%;

        text-align:left;

        font-size:1.05rem;

        line-height:1.9;

    }

    .signature-aude{

        text-align:center;

        margin-top:30px;

    }

    #commencement .section-title h2{

    font-size:2.4rem;
    line-height:1.15;
    padding:0 20px;

}

}

/* ======================================
            LIVRET LES CHANSONS
====================================== */

.songs-section{

    background:#F7F4EE;

    padding:120px 20px;

}

.songs-header{

    text-align:center;

    margin-bottom:70px;

}

.section-subtitle{

    display:block;

    text-align:center;

    letter-spacing:6px;

}

.jokers-section h2{

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    margin:20px 0;

}

.jokers-intro{

    text-align:center;

    max-width:650px;

    margin:0 auto 60px;

}

.songs-header h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    color:#10243F;

}

.songs-intro{

    max-width:650px;

    margin:auto;

    line-height:1.8;

    color:#666;

}

.book-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:60px;

    width:100%;

}

#flipbook{

    width:min(95vw,900px);

    height:80vh;

    max-height:900px;

    filter:drop-shadow(0 25px 45px rgba(0,0,0,.18));

}

.book-navigation{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:40px;

}

.book-navigation button{

    border:none;

    background:white;

    width:46px;

    height:46px;

    border-radius:50%;

    cursor:pointer;

}

#pageNumber{

    color:#666;

}

#flipbook{
    filter: drop-shadow(0 25px 45px rgba(0,0,0,.18));
}

/*==================================================
                LES SINGLES
==================================================*/

.singles-section{

    border-top:1px solid rgba(215,184,115,.25);

    background:#F7F4EE;

    padding:120px 20px;

}

.singles-header{

    text-align:center;

    margin-bottom:70px;

}

.singles-header h2{

    font-family:"Cormorant Garamond",serif;
    font-size:3.2rem;
    color:#10243F;
    margin-bottom:20px;
    line-height:1.1;

}

@media (min-width:1400px){

    .singles-header h2{
        font-size:4rem;
    }

}

.singles-intro{

    max-width:650px;

    margin:auto;

    line-height:1.8;

    color:#666;

}

.singles-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.single-card{

    background:#fff;

    border-radius:22px;

    padding:14px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    text-align:center;

}

.single-card:hover{

    transform:translateY(-10px);

box-shadow:0 22px 45px rgba(0,0,0,.12);
}

.single-card img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;

    margin:20px 0;

    transition:.35s;

}

.single-card:hover img{

    transform:scale(1.03);

}

.single-card h3{

    font-family:"Cormorant Garamond",serif;

    color:#10243F;

    font-size:1.5rem;

    margin-bottom:20px;

    margin:12px 0 16px;
line-height:1.25;
min-height:60px;
display:flex;
align-items:center;
justify-content:center;

}

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:12px;

}

.status.available{

    background:#E7F5EA;

    color:#2E7D32;

}

.status.coming{

    background:#F6E9C8;

    color:#A57A1C;

}

.listen-btn{

    display:inline-block;

    margin-top:10px;

    padding:12px 26px;

    border-radius:999px;

    background:#D7B873;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    font-size:.95rem;

}

.listen-btn:hover{

    background:#C8A75E;

    transform:translateY(-2px);

}


@media (max-width:768px){

    .singles-section{

        padding:70px 15px;

    }

    .singles-header h2{

        font-size:2rem;

        line-height:1.15;

        text-wrap:balance;

    }

    .singles-intro{

        font-size:.95rem;

    }

    .singles-grid{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:35px;

    }

    .single-card{

        max-width:320px;
        width:100%;

        margin:0 auto;

        padding:14px;

        border-radius:18px;

    }

    .single-card img{

        border-radius:12px;

        margin:12px 0;

    }

    .single-card h3{

        font-size:1.9rem;

        min-height:auto;

        margin:10px 0;

    }

    .listen-btn{

        width:200px;

        margin:18px auto 0;

        padding:12px 24px;

        font-size:.95rem;

    }

    .songs-header h2{

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

}

}
/*==================================================
                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:99999;

}

.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{

    display:block;

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

    object-fit:contain;

    border-radius:12px;

}

.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);

    }

}

/*==================================================
                Jeux de cartes
==================================================*/

/*==================================================
                Section
==================================================*/

.univers-section{

    background: radial-gradient(
        circle at center,
        #ffffff 0%,
        #f7f4ee 60%,
        #f1ece2 100%
    );

    padding:70px 20px;

}

.card-controls{

    display:flex;
    justify-content:center;
    gap:12px;

    margin-top:20px;

}

.card-controls button{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

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

    color:#243B55;

    font-size:24px;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    transition:.25s;

}

.card-controls button:hover{

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

    background:white;

}

/*==================================================
                Présentation
==================================================*/

.cards-intro{

    max-width:760px;
    margin:0 auto 40px;
    text-align:center;

}

.cards-intro .section-subtitle{

    display:block;
    color:#B39265;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.85rem;
    margin-bottom:10px;

}

.cards-intro h2{

    font-family:"Cormorant Garamond",serif;
    font-size:3.6rem;
    color:#10243F;
    margin-bottom:18px;

}

.cards-intro p{

    color:#4A5A6A;
    font-size:1.1rem;
    line-height:1.8;
    margin-bottom:16px;

}

.cards-intro .intro-question{

    font-family:"Cormorant Garamond",serif;
    font-size:1.9rem;
    color:#10243F;
    font-style:italic;
    margin-bottom:25px;

}

.cards-intro .intro-conclusion{

    color:#B39265;
    font-size:1.2rem;
    font-style:italic;
    margin-top:25px;

}

/*==================================================
                Coffret 3D
==================================================*/

#card-box{

    width:100%;
    height:650px;

    margin-top:40px;   /* ← à ajuster */

    position:relative;

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

    perspective:1800px;

    overflow:visible;

}


/*==================================================
  4 FAMILLES
==================================================*/

.families-section{

    position:relative;
    padding:140px 0;
    overflow:hidden;

    background:
        radial-gradient(circle at 20% 30%, rgba(72,110,190,.18), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(180,140,70,.10), transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(50,90,180,.12), transparent 40%),
        linear-gradient(
            180deg,
            #0b1324 0%,
            #0d172c 35%,
            #11111a 100%
        );

}

.families-section::after{

    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.015) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.01) 1px, transparent 1px);

    background-size:220px 220px,180px 180px;

    opacity:.35;
}

/* ACCORDEON */

.accordion{

    position:relative;
    z-index:2;

    background:rgba(14,20,38,.45);

    backdrop-filter:blur(8px);

    border-radius:28px;

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

    overflow:hidden;

    transition:
background .4s,
border-color .4s;

}

.accordion::before{

    content:"";

    position:absolute;

    inset:-80px;

    background:radial-gradient(
        circle,
        rgba(70,120,220,.12),
        transparent 70%
    );

    z-index:-1;

    filter:blur(80px);

     pointer-events:none;

}

.accordion-item{

    border-bottom:1px solid rgba(255,255,255,.05);

}

.accordion-header{

    width:100%;
    background:none;
    border:none;

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

    padding:22px 10px;

    cursor:pointer;

    transition:.35s;

}

.accordion-header:hover{

    background:linear-gradient(
        90deg,
        rgba(212,173,84,.06),
        rgba(255,255,255,.02)
    );

}

.accordion-title{

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

}

.icon{

    font-size:38px;

    transition:.4s;

}

.accordion-item.active .icon{

    transform:scale(1.25);

}

.accordion-title h3{

    font-size:1.6rem;
    color:white;
    margin-bottom:5px;

}

.accordion-title p{

    color:#b8b8b8;
    font-size:.95rem;

}

.accordion-plus{

    transition:.35s;
    width:38px;
    height:38px;

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

    border-radius:50%;

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

}

.accordion-item.active .accordion-plus{

    transform:rotate(135deg);
    background:#CFAF65;
color:#111;

}

.accordion-item:nth-child(1) .icon{
color:#c6405a;
}

.accordion-item:nth-child(2) .icon{
color:#6ba76d;
}

.accordion-item:nth-child(3) .icon{
color:#d4ad54;
}

.accordion-item:nth-child(4) .icon{
color:#87a3d4;
}

/* CONTENU */

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .6s ease;

}

.accordion-grid{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:70px;

    padding:15px 0 60px;

    align-items:center;

}

.accordion-image img{

    width:100%;

    border-radius:18px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.45);

    opacity:0;

    transform:translateY(30px);

    transition:.8s;

}

.accordion-item.active img{

    opacity:1;

    transform:translateY(0);

}

.accordion-text{

    line-height:1.8;
    font-size:1.05rem;
    color:#e2e2e2;

}

.accordion-item.active{

position:relative;

}

.accordion-item.active::after{

content:"";

position:absolute;

left:0;
bottom:-1px;

width:100%;
height:1px;

background:linear-gradient(
90deg,
transparent,
#D8B26A,
transparent
);

}

.families-section h2{

    text-align:center;
    margin-bottom:20px;

}

.families-intro{

    text-align:center;

}
/*==================================================
JOKERS
==================================================*/

.jokers-section{

    padding:120px 20px;
    margin:0 auto;      /* <-- important */
    max-width:1100px;
    text-align:center;

}

.jokers-intro{

    text-align:center;
    color:#cfcfcf;
    margin:20px auto 70px;
    max-width:700px;

}

.joker-grid{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:80px;

    flex-wrap:wrap;

    margin-top:60px;

}

.joker-card{

    width:340px;

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

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

    border-radius:22px;

    padding:25px;

    text-align:center;

    transition:.35s;

}

.joker-card:hover{

    transform:translateY(-10px);

    border-color:#CFAF65;

    box-shadow:

    0 25px 50px rgba(0,0,0,.45);

}

.joker-card img{

    width:220px;

    max-width:100%;

    margin:0 auto 20px;

    border-radius:14px;

}

.joker-card h3{

    color:white;
    margin-bottom:20px;

}

.joker-card p{

    color:#d5d5d5;
    line-height:1.9;

}

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

@media(max-width:900px){

.accordion-grid{

grid-template-columns:1fr;

gap:35px;

}

.joker-grid{

grid-template-columns:1fr;

}

.icon{

font-size:28px;

}

.accordion-title h3{

font-size:1.25rem;

}

}

.gold-divider{
    width:90px;
    height:2px;
    margin:45px auto 70px;
    background:linear-gradient(
        90deg,
        transparent,
        #cfa45d,
        transparent
    );
}

/*==================================================
                    CONTACT
==================================================*/

#booking{
    padding:90px 0 50px;
    text-align:center;
}

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

#booking h2{
    font-family:"Cormorant Garamond",serif;
    font-size:3rem;
    color:#fff;
    margin-bottom:25px;
}

#booking .section-intro{
    color:#d7d7d7;
    font-size:1.1rem;
    line-height:1.9;
    max-width:780px;
    margin:0 auto 45px;
}

.booking-benefits{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:35px;
}

.booking-benefits span{

    padding:10px 18px;

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

    border-radius:50px;

    color:#c8a04d;

    font-size:.95rem;

}

.booking-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:45px;

}

.booking-tags span{

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

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

    padding:10px 18px;

    border-radius:40px;

    color:#eee;

    font-size:.9rem;

}

.booking-button{

    display:inline-block;

    background:linear-gradient(135deg,#c8a04d,#d9ba6a);

    color:#111;

    padding:16px 42px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    margin-bottom:30px;

    transition:.35s;

}

.booking-button:hover{

    transform:translateY(-4px);

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

}

.booking-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

    color:#ddd;

    font-size:1.05rem;

    margin-bottom:20px;

}

.booking-note{

    color:#999;

    font-style:italic;

    font-size:1rem;

}

.booking-note{
    margin-bottom:0;
}
/*==================================================
                    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;

}

.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;

}

@keyframes heartbeat{

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

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

}

@keyframes ecg{

    0%{
        stroke-dashoffset:700;
    }

    100%{
        stroke-dashoffset:0;
    }

}

/*==============================
        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;

}

/*==================================================
            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:0;

    visibility:hidden;

    transform:translateY(20px);

    z-index:99999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:#ffffff;

    color:#10243F;

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

}
#footer .container{
    min-height:auto !important;
    height:auto !important;
    display:block;
}

.footer-transition{
    margin-top:0;
    padding-top:0;
}

/*=========================
      CARTOUCHE HERO
=========================*/

.mobile-card-label{

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

    min-width:320px;
    height:56px;

    margin:35px auto 0;

    padding:0 32px;

    border:1px solid rgba(212,175,55,.55);
    border-radius:999px;

    background:rgba(10,15,25,.75);
    backdrop-filter:blur(8px);

    color:#E8D9B5;

    font-family:"Cormorant Garamond",serif;
    font-size:1.35rem;
    font-weight:600;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.05);

    transition:.35s;
}

/*=====================================
            HERO version MOBILE
=====================================*/

@media (max-width:768px){
*{
.slide1{
    background-image:url("../assets/hero/hero1-mobile.jpg");
}

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

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

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

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

    #hero-aude{

        min-height:100vh;
        height:auto;
        overflow:visible;
        padding:90px 0 60px;
        

    }

    .hero-content{

        width:92%;
        margin:0 auto;
        text-align:center;

    }

    .hero-logo img{

        width:180px;

    }

    .signature{

        margin:15px 0 25px;
        font-size:.75rem;
        letter-spacing:3px;

    }

    .hero-content h2{

        font-size:2.5rem;
        line-height:1.05;
        margin-bottom:20px;

    }

    .hero-tagline{

        width:100%;
        max-width:320px;
        margin:0 auto 45px;
        font-size:1rem;
        line-height:1.7;

    }

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

.hero-cards{

    position:relative;
    width:300px;
    height:170px;
margin:10px auto 25px;
}

.hero-card{

    position:absolute;
    left:50%;
    bottom:0;

    transform:translateX(-50%);

    transform-origin:center bottom;
    transition:transform .35s ease;

}

.hero-card img{

    width:82px;
    height:auto;
    display:block;

}

.card-title{

    display:none;

}

.discover-btn{

    display:none !important;

}

/*=========================
    POSITION DES CARTES
=========================*/

.hero-card:nth-child(1){

    transform:translateX(-115px) rotate(-20deg);
    z-index:1;

}

.hero-card:nth-child(2){

    transform:translateX(-58px) rotate(-10deg);
    z-index:2;

}

.hero-card:nth-child(3){

    transform:translateY(-12px);
    z-index:3;

}

.hero-card:nth-child(4){

    transform:translateX(58px) rotate(10deg);
    z-index:2;

}

.hero-card:nth-child(5){

    transform:translateX(115px) rotate(20deg);
    z-index:1;

}

/*======================================
        TITRES SECTIONS MOBILE
======================================*/

.section-title h2,
.songs-header h2,
.families-section h2,
#booking h2,
#formations h2{

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

}

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

.mobile-card-label{

    font-size:1.1rem;
    min-width:260px;
    height:48px;
    margin-top:18px;

    position: relative;
    z-index: 101;

}



.discover-btn{

    position:absolute;

    left:50%;
    bottom:-45px;

    transform:translateX(-50%);

    padding:8px 18px;

    border:1px solid #D4AF37;
    border-radius:30px;

    background:rgba(15,15,20,.95);

    color:#E8D9B5;

    font-size:.8rem;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

.hero-card.active .discover-btn{

    opacity:1;

    pointer-events:auto;

}
.hero-card:nth-child(1).active{
    transform:translateX(-115px) translateY(-12px) rotate(-20deg);
}

.hero-card:nth-child(2).active{
    transform:translateX(-58px) translateY(-12px) rotate(-10deg);
}

.hero-card:nth-child(3).active{
    transform:translateY(-12px);
}

.hero-card:nth-child(4).active{
    transform:translateX(58px) translateY(-12px) rotate(10deg);
}

.hero-card:nth-child(5).active{
    transform:translateX(115px) translateY(-12px) rotate(20deg);
}


    /*=========================
        SCROLL
    =========================*/

    .scroll-indicator{

        bottom:20px;
        font-size:28px;

    }

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

    #backToTop{

        width:48px;
        height:48px;

        right:18px;
        bottom:18px;

        font-size:22px;

    }

}

html,
body{
    overflow-x:hidden;
    width:100%;
}