/* ===================================
   ART'CAD PREMIUM DESIGN SYSTEM
=================================== */


:root {

    --gold: #C8A45D;
    --gold-light: #E8D19A;
    --cream: #FAF7F2;
    --dark: #171717;
    --text: #2B2B2B;

}



html {

    scroll-behavior: smooth;

}



body {

    background: var(--cream);
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;

}



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


.reveal {

    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.active {

    opacity:1;
    transform:translateY(0);

}



/* ==========================
   GOLD EFFECT
========================== */


.gold-text {

    color:var(--gold);

}



.gold-gradient {

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

}




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


.mega-menu {

    opacity:0;
    visibility:hidden;
    transform:
    translateY(20px);

    transition:
    all .35s ease;

}



.menu-parent:hover
.mega-menu {

    opacity:1;
    visibility:visible;
    transform:
    translateY(0);

}





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


.training-card {

    transition:
    transform .4s ease,
    box-shadow .4s ease;

}



.training-card:hover {

    transform:
    translateY(-8px);


    box-shadow:
    0 25px 60px
    rgba(200,164,93,.25);

}





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


.image-hover {

    overflow:hidden;

}


.image-hover img {

    transition:
    transform .7s ease;

}



.image-hover:hover img {

    transform:
    scale(1.08);

}




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


.btn-gold {

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color:#171717;

    transition:
    transform .3s ease,
    box-shadow .3s ease;

}



.btn-gold:hover {

    transform:
    translateY(-3px);


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

}





/* ==========================
   LIGNE OR
========================== */


.gold-line {

    width:70px;
    height:3px;
    background:var(--gold);

}






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


.mobile-menu {

    display:none;

}


.mobile-menu.open {

    display:block;

}