/* ===================================================
   REVERSE • AUDE LP
   ACCUEIL.CSS
   Partie 1
=================================================== */

/**************
 VARIABLES
**************/

:root{

    --black:#0b0b0b;

    --dark:#151515;

    --gold:#c8a04d;

    --gold-light:#f0d48c;

    --sand:#efe7d8;

    --white:#ffffff;

    --transition:0.45s;

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

}



/**************
 RESET
**************/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
"Segoe UI",
Arial,
Helvetica,
sans-serif;

background:var(--black);

color:white;

overflow-x:hidden;

}



/**************
 NAVIGATION
**************/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 60px;

z-index:999;

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

backdrop-filter:blur(14px);

transition:var(--transition);

}

.logo-site img{

height:52px;

transition:.3s;

}

.logo-site img:hover{

transform:scale(1.05);

}

.menu{

display:flex;

gap:40px;

list-style:none;

}

.menu a{

color:white;

text-decoration:none;

font-size:15px;

letter-spacing:2px;

text-transform:uppercase;

transition:.3s;

}

.menu a:hover{

color:var(--gold);

}



/**************
 HERO
**************/

#hero::before{

     content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(
        to bottom,
        transparent,
        rgba(200,160,77,.6),
        transparent
    );

    z-index:40;

}

#hero{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}



/**************
 BACKGROUND
**************/

.hero-background{

position:absolute;

inset:0;

display:flex;

}

.reverse-side,

.aude-side{

flex:1;

position:relative;

overflow:hidden;

transition:1s;

}

.background-image{

position:absolute;

inset:0;

background-size:cover;

background-position:center;

}

/* Remplacer ces images par les tiennes */

.reverse-image{

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

filter:brightness(.72) contrast(1.05);

animation:reverseZoom 8s ease-in-out infinite alternate;

}



.aude-image{

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

filter:brightness(.88) contrast(1.03) saturate(.95);

animation:audeZoom 8s ease-in-out infinite alternate;

}




/**************
 HERO CENTER
**************/

.hero-center{

position:absolute;

left:50%;

top:50%;

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

z-index:100;

text-align:center;

width:500px;

pointer-events:none;

}

.hero-center h2{

font-size:18px;

letter-spacing:10px;

text-transform:uppercase;

font-weight:300;

color:var(--gold-light);

}

.hero-center h1{

font-size:40px;

font-weight:700;

line-height:1;

margin:20px 0;

text-shadow:

0 4px 18px rgba(0,0,0,.65);

}

.hero-center p{

margin-top:18px;

font-size:22px;

letter-spacing:2px;

opacity:.95;

}



/**************
 ECG
**************/

#heartbeat{


 position:relative;

    width:260px;

    height:120px;

    margin:0 auto 30px;


}

#heartbeat svg{

 display:block;

    width:260px;
    height:auto;

    margin:0 auto;

    fill:none;

    stroke:var(--gold);

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

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


}

#heartbeat svg path{

stroke-dasharray:700;

stroke-dashoffset:700;

animation:ecg 2.2s linear infinite;

}

.heart{


    position:absolute;

    left:50%;
    top:50%;

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

    font-size:60px;

    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%,40%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

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

    15%{
        transform:translate(-50%,-50%) scale(.92);
    }

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

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

}



/**************
 PANELS
**************/

.hero-panels{

position:absolute;

inset:0;

display:flex;

z-index:25;

}

.panel{

flex:1;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:white;

transition:.8s;

}

.panel-content{

max-width:420px;

padding:40px;

text-align:center;

transition:.5s;

}

.panel:hover{

transform:scale(1.02);

}

.panel:hover .panel-content{

transform:translateY(-10px);

}

.small-title{

font-family:"Poppins",sans-serif;

font-size:12px;

letter-spacing:6px;

font-weight:500;

color:var(--gold-light);

}

.panel h2{

font-family:"Cormorant Garamond",serif;

font-size:80px;

font-weight:600;

letter-spacing:2px;

line-height:.9;

text-shadow:0 8px 25px rgba(0,0,0,.45);

margin-bottom:15px;

}

.panel p{

font-family:"Poppins",sans-serif;

font-size:20px;

font-weight:300;

line-height:1.8;

}

.button{

display:inline-block;

padding:16px 42px;

border:2px solid var(--gold);

border-radius:50px;

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

backdrop-filter:blur(8px);

transition:.35s;

font-weight:600;

letter-spacing:2px;

}

.panel:hover .button{

background:var(--gold);

color:black;

}
/* ===================================================
   ACCUEIL.CSS
   Partie 2
   Sections principales
=================================================== */


/*********************
CONTAINER
*********************/

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}



/*********************
SECTIONS
*********************/

section{

    padding:120px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

}

.section-title h2{

    font-size:46px;

    margin:18px 0;

}

.section-title p{

    max-width:760px;

    margin:auto;

    line-height:1.8;

    opacity:.85;

}



/*********************
REVERSE
*********************/

#reverse-preview{

    background:#111;

}

.cards{

    display:grid;

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

    gap:40px;

}

.card{

    background:#1a1a1a;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}

.card img{

    width:100%;

    height:340px;

    object-fit:cover;

}

.card-content{

    padding:35px;

}

.card-content h3{

    font-size:30px;

    margin-bottom:15px;

}

.card-content p{

    line-height:1.8;

    opacity:.9;

}



/*********************
BOUTON CENTRAL
*********************/

.center-button{

    margin-top:60px;

    text-align:center;

}

.btn-gold{

    display:inline-block;

    padding:18px 42px;

    border-radius:50px;

    border:2px solid var(--gold);

    color:white;

    text-decoration:none;

    transition:.35s;

}

.btn-gold:hover{

    background:var(--gold);

    color:black;

}



/*********************
AUDE LP
*********************/

#aude-preview{

    background:var(--sand);

    color:#222;

}

.album-preview{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

    align-items:center;

}

.album-cover img{

    width:100%;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.album-text h3{

    font-size:40px;

    margin-bottom:20px;

}

.album-text p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.btn-light{

    display:inline-block;

    padding:18px 40px;

    border-radius:50px;

    background:#222;

    color:white;

    text-decoration:none;

    transition:.35s;

}

.btn-light:hover{

    background:var(--gold);

    color:black;

}



/*********************
AGENDA
*********************/

#concerts{

    background:#111;

}

.concert-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.concert{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    border-radius:14px;

    background:#1c1c1c;

    transition:.3s;

}

.concert:hover{

    transform:translateX(8px);

}

.date{

    color:var(--gold);

    font-weight:bold;

    font-size:20px;

}



/*********************
RESEAUX
*********************/

#social h2{
    text-align:center;
    margin-bottom:50px;
}
.social-univers{

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;

}

.social-block{

    text-align:center;
    min-width:220px;

}

.social-block h3{

    margin-bottom:20px;
    color:var(--gold);

}

.social-block .social-links{

    display:flex;
    flex-direction:column;
    gap:12px;

}


/* ===================================================
   ACCUEIL.CSS
   Partie 3
   Footer • Responsive • Finitions
=================================================== */


/*********************
BOOKING
*********************/

#booking{

    background:linear-gradient(
        135deg,
        #141414,
        #222222
    );

    text-align:center;

}

.booking-content{

    max-width:900px;

    margin:auto;

}

.booking-content h2{

    font-size:48px;

    margin-bottom:25px;

}

.booking-content p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:45px;

}



/*********************
FOOTER
*********************/

footer{

    background:#080808;

    padding:90px 0 40px;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap:70px;

}

.footer-logo{

    width:180px;

    margin-bottom:25px;

}

footer h4{

    color:var(--gold);

    margin-bottom:20px;

    font-size:18px;

}

footer ul{

    list-style:none;

}

footer li{

    margin-bottom:12px;

}

footer a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

footer a:hover{

    color:var(--gold);

}

.copyright{

    margin-top:70px;

    text-align:center;

    opacity:.6;

    font-size:14px;

}

.footer-home{

    cursor:default;
    text-decoration:none;
    padding-bottom:20px;

}

.footer-home:hover{

    transform:none;

}



/*********************
ANIMATIONS
*********************/

.card,
.album-cover img,
.btn-gold,
.btn-light,
.social-links a{

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s,
        color .35s;

}

.card:hover{

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

}

.album-cover img:hover{

    transform:scale(1.03);

}

.btn-gold:hover,
.btn-light:hover{

    transform:translateY(-4px);

}

.social-links a:hover{

    transform:translateY(-5px);

}



/*********************
SCROLL
*********************/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}



/*********************
RESPONSIVE
*********************/

@media(max-width:1100px){

.cards{

grid-template-columns:1fr;

}

.album-preview{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}



@media(max-width:900px){

.navbar{

padding:20px;

flex-direction:column;

height:auto;

gap:15px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero-center h1{

font-size:40px;

}

.panel h2{

font-size:38px;

}

.panel p{

font-size:17px;

}

.booking-content h2{

font-size:36px;

}

.section-title h2{

font-size:36px;

}

}


@media (max-width:768px){

/* ================= NAVBAR ================= */

.navbar{

    height:70px;

    padding:0 18px;

    flex-direction:row;

    justify-content:space-between;

}

.logo-site img{

    height:38px;

}

.menu{

    gap:12px;

}

.menu a{

    font-size:11px;

    letter-spacing:1px;

}

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

#hero{

    height:100vh;

}

.hero-center{

    width:90%;

    top:42%;

    left:50%;

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

}

#heartbeat{

    width:180px;

    height:90px;

    margin-bottom:15px;

}

#heartbeat svg{

    width:180px;

}

.heart{

    font-size:38px;

}

.hero-center h2{

    font-size:11px;
    letter-spacing:4px;

    margin-top:8px;
}

.hero-center h1{
    font-size:2.2rem;
    line-height:1;
    margin:10px 0;

}

/* ================= PANELS ================= */

.hero-panels{

    flex-direction:row;

}

.panel{

    align-items:flex-end;

    padding-bottom:80px;

}

.panel-content{

    padding:15px;

    max-width:180px;

}

.small-title{

    font-size:11px;

    letter-spacing:2px;

}

.panel h2{

    font-size:2rem;

    margin-bottom:10px;

}

.panel p{

    font-size:1.05rem;

    line-height:1.45;

}

.button{
    padding:10px 24px;

    font-size:.85rem;

    margin-top:18px;

}

}



/*********************
EFFET LUXE
*********************/

.panel{

cursor:pointer;

}

.panel::after{

content:"";

position:absolute;

top:0;

left:-150%;

width:50%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-25deg);

transition:1.2s;

}

.panel:hover::after{

left:180%;

}

/* ==========================
   Apparition au scroll
========================== */

.reveal {

    opacity: 1;

    transform: none;


}


@keyframes reverseZoom {

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1);
    }

}

@keyframes audeZoom {

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}
@keyframes ecg{

0%{

stroke-dashoffset:700;

opacity:.2;

}

20%{

opacity:1;

}

55%{

stroke-dashoffset:0;

opacity:1;

}

100%{

stroke-dashoffset:0;

opacity:.25;

}

}

@keyframes heartGlow{

0%,100%{

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

}

20%{

filter:

drop-shadow(0 0 12px rgba(200,160,77,.9))

drop-shadow(0 0 25px rgba(200,160,77,.8));

}

}