@font-face{
    font-family:Manrope;
    src:url('../fonts/manrope.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

/* =========================================================
   BASE
========================================================= */

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    width:100%;
}

body{
    margin:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#050505;
    color:#111;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

*{
    box-sizing:border-box;
}

img,
video{
    max-width:100%;
}

img{
    user-select:none;
    -webkit-user-drag:none;
}

button{
    cursor:pointer;
}

::selection{
    background:#f97316;
    color:#fff;
}


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

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#f97316;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#ea580c;
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:2px solid #f97316;
    outline-offset:3px;
}


/* =========================================================
   ANIMATIONS / REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show{
    opacity:1;
    transform:none;
}

.reveal-left{
    opacity:0;
    transform:translateX(-45px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal-left.show{
    opacity:1;
    transform:none;
}

.reveal-right{
    opacity:0;
    transform:translateX(45px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal-right.show{
    opacity:1;
    transform:none;
}

.counter{
    font-variant-numeric:tabular-nums;
}


/* =========================================================
   MENU MOBILE
   Le menu est contrôlé par header.php.
========================================================= */

#mobileMenu{
    transform:translate3d(100%,0,0);
    visibility:hidden;
    pointer-events:none;
    transition:
        transform .4s cubic-bezier(.4,0,.2,1),
        visibility 0s linear .4s;
    will-change:transform;
}

#mobileMenu.is-open{
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
    transition:
        transform .4s cubic-bezier(.4,0,.2,1),
        visibility 0s linear 0s;
}


/* =========================================================
   NAVBAR PAGES INTERNES
========================================================= */

.nav-dark{
    background:rgba(0,0,0,.85);
    border-bottom:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


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

.lightbox{
    display:none;
}

.lightbox.open{
    display:flex;
}


/* =========================================================
   ADMIN
========================================================= */

.admin-body{
    background:#f7f7f5;
    color:#111;
}

.admin-card{
    border-radius:28px;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .reveal,
    .reveal-left,
    .reveal-right{
        opacity:1;
        transform:none;
        transition:none;
    }

    #mobileMenu{
        transition:none;
    }

}