*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:#111;
color:#eeeeee;

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

}



h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:500;

}



p{

color:#b8b8b8;

line-height:1.8;

}



a{

text-decoration:none;

color:white;

}



/* HEADER */


header{

position:fixed;

top:0;

left:0;

width:100%;

padding:25px 8%;

z-index:999;

transition:.4s;

}



header.scrolled{

background:#111;

padding:18px 8%;

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

}



nav{

display:flex;

align-items:center;

justify-content:space-between;

}



.brand,
.brand a{

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

font-size:24px;

letter-spacing:1px;

}



#nav-menu{

display:flex;

gap:35px;

list-style:none;

}



#nav-menu a{

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

font-size:14px;

position:relative;

}



#nav-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

height:1px;

width:0;

background:white;

transition:.3s;

}



#nav-menu a:hover::after{

width:100%;

}



.menu-toggle{

display:none;

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

}





/* HERO */


.hero{

height:100vh;

background:url(images/hero.jpg) center/cover;

display:flex;

align-items:center;

justify-content:center;

position:relative;

}



.overlay{

position:absolute;

inset:0;

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

}



.hero-content{

position:relative;

text-align:center;

max-width:800px;

}



.hero h1{

font-size:100px;

}



.hero h2{

font-size:45px;

margin:30px 0;

}



.hero p{

font-size:18px;

}



.main-button,
.outline-button,
.social-buttons a{

display:inline-block;

padding:15px 35px;

margin-top:30px;

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

transition:.3s;

}



.main-button{

background:white;

color:#111;

}



.outline-button,
.social-buttons a{

border:1px solid white;

}



.main-button:hover,
.outline-button:hover,
.social-buttons a:hover{

transform:translateY(-4px);

}





/* SECTIONS */


.section{

padding:120px 8%;

}



.dark{

background:#181818;

}



.section h2{

font-size:60px;

margin-bottom:40px;

}



.split{

display:flex;

align-items:center;

gap:70px;

}



.split img{

width:50%;

}




/* CARDS */


.cards{

display:grid;

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

gap:30px;

margin-top:60px;

}



.cards img{

width:100%;

height:400px;

object-fit:cover;

}





/* TARIFS */


.prices{

display:grid;

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

gap:35px;

margin-top:50px;

}



.prices div{

background:#181818;

padding:50px;

}

.price-card{

    background:#181818;

    padding:50px;

    border:1px solid #2b2b2b;

    transition:0.3s;

}


.price-card:hover{

    transform:translateY(-8px);

    border-color:#555;

}


.offer-subtitle{

    margin:18px 0 35px 0;

    color:#9d9d9d;

    font-size:14px;

    line-height:1.7;

    font-style:italic;

}



/* CONTACT */


.contact{

text-align:center;

}



form{

max-width:600px;

margin:40px auto;

display:flex;

flex-direction:column;

gap:15px;

}



input,
textarea,
select,
button{

padding:18px;

background:#181818;

border:1px solid #333;

color:white;

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

}



textarea{

height:150px;

}



button{

cursor:pointer;

background:white;

color:#111;

}



.social-buttons{

display:flex;

justify-content:center;

gap:20px;

}





footer{

background:#080808;

padding:40px;

text-align:center;

}





/* ANIMATION */


.section{

opacity:0;

transform:translateY(40px);

transition:1s;

}



.section.visible{

opacity:1;

transform:none;

}





/* MOBILE */


@media(max-width:900px){



.menu-toggle{

display:block;

}



#nav-menu{

position:absolute;

top:80px;

right:8%;

background:#111;

width:220px;

padding:30px;

display:none;

flex-direction:column;

gap:25px;

}



#nav-menu.active{

display:flex;

}



.hero h1{

font-size:60px;

}



.hero h2{

font-size:32px;

}



.split,
.prices{

display:grid;

grid-template-columns:1fr;

gap:25px;

}
.cards{

display:flex;

flex-direction:column;

}



.split img{

width:100%;

}



.cards img{

height:300px;

}



.section h2{

font-size:45px;

}



.social-buttons{

flex-direction:column;

align-items:center;

}



}/* =====================================================
   GALERIES EVENEMENTS
   ===================================================== */


.event-card{

    position:relative;

}


/* Bouton qui contient l'image */

.gallery-trigger{

    position:relative;

    display:block;

    width:100%;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

    overflow:hidden;

}


/* Image */

.gallery-trigger img{

    display:block;

    width:100%;

    height:400px;

    object-fit:cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;

}


/* Voile au survol */

/* =====================================================
   GALERIES EVENEMENTS
   ===================================================== */

.event-card {
    position: relative;
}


/* Image cliquable */

.gallery-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
}


/* Image */

.gallery-trigger img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


/* Effet au survol */

.gallery-trigger:hover img {
    transform: scale(1.03);
    filter: brightness(0.75);
}


/* Titre */

.event-card h3 {
    margin-top: 20px;
    font-size: 30px;
}

}


/* Hover */

.gallery-trigger:hover img{

    transform:scale(1.04);

    filter:brightness(0.7);

}


.gallery-trigger:hover .image-overlay{

    opacity:1;

}


/* Titre */

.event-card h3{

    margin-top:20px;

    font-size:30px;

}



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


.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    z-index: 99999;

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

    background: rgba(0, 0, 0, 0.96);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Contenu */

.lightbox-content{

    position:relative;

    width:min(80vw, 1200px);

    height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* Grande image */

#lightbox-image{

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

    user-select:none;

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

}


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


.lightbox-close{

    position:absolute;

    top:25px;

    right:35px;

    z-index:10;

    border:none;

    background:none;

    color:white;

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

    font-size:42px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}


.lightbox-close:hover{

    transform:rotate(90deg);

    opacity:0.6;

}



/* =====================================================
   FLECHES
   ===================================================== */


.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,0.4);

    border-radius:50%;

    background:rgba(0,0,0,0.25);

    color:white;

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

    font-size:42px;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.lightbox-arrow:hover{

    background:rgba(255,255,255,0.12);

    border-color:white;

}


/* Flèche gauche */

.lightbox-prev{

    left:40px;

}


/* Flèche droite */

.lightbox-next{

    right:40px;

}



/* =====================================================
   COMPTEUR
   ===================================================== */


.lightbox-counter{

    position:absolute;

    bottom:-35px;

    left:50%;

    transform:translateX(-50%);

    color:#aaa;

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

    font-size:13px;

    letter-spacing:2px;

}



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


@media(max-width:900px){

    .gallery-trigger img{

        height:300px;

    }


    .image-overlay{

        opacity:1;

        background:linear-gradient(
            to top,
            rgba(0,0,0,0.55),
            transparent 45%
        );

        align-items:flex-end;

        justify-content:flex-start;

        padding:20px;

        font-size:11px;

    }


    .lightbox-content{

        width:90vw;

        height:75vh;

    }


    .lightbox-arrow{

        width:45px;

        height:45px;

        font-size:32px;

        background:rgba(0,0,0,0.5);

    }


    .lightbox-prev{

        left:15px;

    }


    .lightbox-next{

        right:15px;

    }


    .lightbox-close{

        top:20px;

        right:20px;

        font-size:35px;

    }


    .lightbox-counter{

        bottom:-30px;

    }

}