/*==================================================
            GOOGLE FONTS & RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    list-style:none;
}

html{
    font-size:62.5%;
    scroll-behavior:smooth;
}

:root{

    --gold:#d4af37;
    --gold-light:#f5d76e;
    --black:#0a0a0a;
    --dark:#151515;
    --white:#ffffff;
    --gray:#bdbdbd;

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

    --transition:.4s ease;

}

body{

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

    color:var(--white);

    overflow-x:hidden;

    background:
    radial-gradient(circle at 10% 15%,
    rgba(212,175,55,.12),
    transparent 30%),

    radial-gradient(circle at 90% 10%,
    rgba(212,175,55,.08),
    transparent 30%),

    linear-gradient(
    135deg,
    #050505,
    #0b0b0b,
    #111111,
    #090909);

    background-attachment:fixed;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:2rem 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(10,10,10,.75);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(212,175,55,.15);

    z-index:1000;

}

.logo{

    font-size:3rem;

    font-weight:700;

    color:#fff;

    font-family:"Playfair Display",serif;

}

.logo span{

    color:var(--gold);

}

.back{

    display:flex;

    align-items:center;

    gap:1rem;

    color:#fff;

    font-size:1.7rem;

    transition:var(--transition);

}

.back i{

    color:var(--gold);

}

.back:hover{

    color:var(--gold);

}

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

.hero{

    padding-top:15rem;

    padding-bottom:7rem;

    text-align:center;

}

.hero h1{

    font-size:5.5rem;

    font-family:"Playfair Display",serif;

    margin-bottom:2rem;

}

.hero h1 span{

    color:var(--gold);

}

.hero p{

    max-width:700px;

    margin:auto;

    font-size:1.8rem;

    color:var(--gray);

    line-height:1.8;

}

/* Ligne dorée */

.hero::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    background:var(--gold);

    margin:4rem auto 0;

    border-radius:50px;

}
/*==================================================
                PRODUCTS
==================================================*/

.products{

    width:90%;

    margin:auto;

    display:grid;

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

    gap:3rem;

    padding-bottom:8rem;

}

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

.card{

    position:relative;

    background:#171717;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.18);

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

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:
    0 0 25px rgba(212,175,55,.20),
    0 15px 45px rgba(0,0,0,.40);

}

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

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.5s;

}

.card:hover img{

    transform:scale(1.06);

}

/*================ BADGE ================*/

.badge{

    position:absolute;

    top:15px;

    left:15px;

    background:linear-gradient(
    45deg,
    #b8860b,
    #ffd700);

    color:#111;

    padding:.7rem 1.5rem;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    z-index:10;

}

/*================ INFO ================*/

.info{

    padding:2rem;

}

.info h3{

    font-size:2.2rem;

    color:#fff;

    margin-bottom:1rem;

    font-family:"Playfair Display",serif;

}

/*================ STARS ================*/

.stars{

    display:flex;

    align-items:center;

    gap:.4rem;

    margin-bottom:1.5rem;

}

.stars i{

    color:#FFD700;

    font-size:1.5rem;

}

.stars span{

    margin-left:.8rem;

    color:#bdbdbd;

    font-size:1.4rem;

}

/*================ PRICE ================*/

.price{

    font-size:2.3rem;

    font-weight:700;

    color:var(--gold);

    margin-bottom:2rem;

}

/*================ BUTTON ================*/

.btn{

    display:block;

    width:100%;

    text-align:center;

    padding:1.4rem;

    border-radius:40px;

    background:linear-gradient(
    45deg,
    #b8860b,
    #d4af37,
    #ffd700);

    color:#111;

    font-size:1.6rem;

    font-weight:700;

    transition:.4s;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 0 20px rgba(212,175,55,.35);

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

.footer{

    margin-top:8rem;

    padding:5rem 8%;

    background:#080808;

    border-top:1px solid rgba(212,175,55,.15);

    text-align:center;

}

.footer p{

    color:#bdbdbd;

    font-size:1.5rem;

    letter-spacing:1px;

}

.footer span{

    color:var(--gold);

    font-weight:600;

}

/*==================================================
            PRODUCT HOVER EFFECT
==================================================*/

.card::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.card:hover::before{

    opacity:1;

}

.card:hover .info h3{

    color:var(--gold);

}

.card:hover .price{

    transform:scale(1.05);

}

/*==================================================
            BUTTON EFFECT
==================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.5s;

}

.btn:hover::before{

    left:100%;

}

/*==================================================
            BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    font-size:2rem;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:.3s;

    z-index:999;

}

#backToTop:hover{

    transform:translateY(-5px);

    background:#f1c40f;

}

/*==================================================
            WHATSAPP
==================================================*/

#whatsapp{

    position:fixed;

    right:25px;

    bottom:95px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2.8rem;

    cursor:pointer;

    transition:.4s;

    z-index:999;

    box-shadow:0 12px 25px rgba(0,0,0,.35);

}

#whatsapp:hover{

    transform:scale(1.12);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c89d20;

}

/*==================================================
            SELECTION
==================================================*/

::selection{

    background:var(--gold);

    color:#111;

}
/*==================================================
                ANIMATIONS
==================================================*/

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card{

    animation:fadeUp .8s ease;

}

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

.card{

    overflow:hidden;

}

.card img{

    transition:.6s;

}

.card:hover img{

    transform:scale(1.08);

}

/*==================================================
            GOLD LINE
==================================================*/

.card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--gold);

    transition:.4s;

}

.card:hover::after{

    width:100%;

}

/*==================================================
            GLOW EFFECT
==================================================*/

body::before{

    content:"";

    position:fixed;

    width:600px;

    height:600px;

    top:-250px;

    left:-250px;

    background:radial-gradient(circle,
    rgba(212,175,55,.08),
    transparent 70%);

    pointer-events:none;

}

body::after{

    content:"";

    position:fixed;

    width:600px;

    height:600px;

    bottom:-250px;

    right:-250px;

    background:radial-gradient(circle,
    rgba(212,175,55,.05),
    transparent 70%);

    pointer-events:none;

}

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

@media(max-width:991px){

    html{

        font-size:56%;

    }

    .products{

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

        gap:2.5rem;

    }

}

@media(max-width:768px){

    .header{

        padding:2rem 5%;

    }

    .hero{

        padding-top:13rem;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero p{

        font-size:1.6rem;

    }

    .products{

        grid-template-columns:1fr;

    }

    .logo{

        font-size:2.4rem;

    }

    .back{

        font-size:1.5rem;

    }

}

@media(max-width:480px){

    html{

        font-size:52%;

    }

    .hero h1{

        font-size:3.4rem;

    }

    .card img{

        height:200px;

    }

    .info h3{

        font-size:2rem;

    }

    .price{

        font-size:2rem;

    }

    .btn{

        padding:1.3rem;

        font-size:1.5rem;

    }

}

/*==================================================
            SMOOTH TRANSITIONS
==================================================*/

a,
button,
.card,
img,
.btn{

    transition:var(--transition);

}

/*==================================================
            END
==================================================*/