/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    font-size: 14px;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.legal-page {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
    line-height: 1.7;
}

/* =========================
   BODY
========================= */

body{

    background:#333333;

    color:white;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    overflow-x:hidden;

}


/* =========================
   HEADER PREMIUM
========================= */

.premium-header{

    position:relative;

    min-height:420px;

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

    overflow:hidden;

    background:#3c3d3d;
    ),
    url("banner.jpg");

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

    border-bottom:
    1px solid #222;

}


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

.header-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,77,77,0.15),
        transparent 60%
    );

}


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

.header-content{

    position:relative;

    z-index:2;

    text-align:center;

    padding:
    40px
    20px;

}


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

.site-logo{

    width:300px;

    max-width:85%;

    height:auto;

    display:block;

    margin:auto;

    transition:0.4s;

}


.site-logo:hover{

    transform:scale(1.03);

}


/* =========================
   SUBTITLE
========================= */

.subtitle{

    margin-top:20px;

    color:#d0d0d0;

    font-size:18px;

    letter-spacing:1px;

}


/* =========================
   MENU
========================= */

.menu{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}


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

.menu button{

    padding:
    14px
    24px;

    border:none;

    border-radius:12px;

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

    backdrop-filter:blur(10px);

    color:white;

    cursor:pointer;

    transition:0.3s;

    font-size:10px;

    font-weight:600;

}


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

.menu button:hover,
.menu button.active{

    background:#ff4d4d;

    transform:
    translateY(-2px);

   

}


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

.youtube-btn{

    padding:
    14px
    24px;

    border-radius:12px;

    text-decoration:none;

    color:white;

    font-weight:600;

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

    backdrop-filter:blur(10px);

    transition:0.3s;

    display:flex;

    align-items:center;

    justify-content:center;
	font-size:10px;

}
.youtube-btn:hover{

    background:#ff4d4d;

    transform:
    translateY(-2px);

}

/* =========================
   HOVER YOUTUBE
========================= */

.youtube-btn:hover{

    transform:
    translateY(-3px)
    scale(1.05);

    box-shadow:
    0 15px 35px
    rgba(255,0,0,0.45);

}


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

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}


/* =========================
   GALERIE
========================= */

.gallery{

    width:90%;

    margin:
    60px auto;

    display:grid;

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

    gap:25px;

}


/* =========================
   CARD
========================= */

.card{

    background:#181818;

    border-radius:18px;

    overflow:hidden;

    transition:0.35s;

    border:
    1px solid #222;

}


/* =========================
   HOVER CARD
========================= */

.card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px
    rgba(0,0,0,0.35);

}


/* =========================
   IMAGE
========================= */

.card img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    cursor:pointer;

}


/* =========================
   CONTENT CARD
========================= */

.card-content{

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* =========================
   BADGE CATÉGORIE
========================= */

.category{

    width:fit-content;

    padding:
    6px
    12px;

    border-radius:8px;

    background:#ff4d4d;

    font-size:10px;

    font-weight:600;

}


/* =========================
   NOM FICHIER
========================= */

.filename{

    color:#d6d6d6;

    font-size:16px;

    line-height:1.5;

    word-break:break-word;

}


/* =========================
   POPUP
========================= */

.popup{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}


/* =========================
   POPUP ACTIVE
========================= */

.popup.active{

    display:flex;

}


/* =========================
   IMAGE POPUP
========================= */

.popup img{

    max-width:92%;

    max-height:92%;

    border-radius:16px;

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

}


/* =========================
   CLOSE
========================= */

.close{

    position:absolute;

    top:20px;

    right:30px;

    font-size:45px;

    color:white;

    cursor:pointer;

    transition:0.3s;

}


.close:hover{

    transform:scale(1.15);

    color:#ff4d4d;

}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#111;

}


::-webkit-scrollbar-thumb{

    background:#ff4d4d;

    border-radius:10px;

}


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

@media(max-width:768px){

    .premium-header{

        min-height:360px;

    }

    .site-logo{

        width:220px;

    }

    .subtitle{

        font-size:15px;

    }

    .menu{

        gap:10px;

    }

    .menu button,
    .youtube-btn{

        padding:
        12px
        18px;

        font-size:14px;

    }

    .gallery{

        width:94%;

        gap:18px;

    }

    .card img{

        height:250px;

    }

}