@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");

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

    /* Définition des couleurs */
    --light-color: #f59bbb;
    --dark-color: #3f2a56;

    --color-white: white;
    --color-gray800: #d6d6d6;
    --color-gray700: #b0b0b0;
    --color-gray600: #9a9a9a;
    --color-gray500: #7e7e7e;
    --color-gray400: #626262;
    --color-gray300: #434343;
    --color-gray200: #2f2f2f;
    --color-gray100: #1c1c1c;
    --color-black: black;
    --color-red: #e93939;
    --color-blue: #1e8efd;
    --color-green: #4fc240;
    --color-yellow: #ffce47;
    --color-orange: #ff9c33;
    --color-purple: #752bff;

    /* Définition des transitions */

    --transition-10: 0.1s cubic-bezier(0.5, 0, 0.5, 1);
    --transition-25: 0.25s cubic-bezier(0.5, 0, 0.5, 1);
    --transition-50: 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    --transition-75: 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    --transition-100: 0.5s cubic-bezier(0.5, 0, 0.5, 1);

    font-family: "Plus Jakarta Sans";
}


.logo-desktop-detection {
    filter: brightness(100);
}

.fullscreen {
    width: 100vw;
    height: 100vh;
}

.desktop-detection {
    width: 100vw;
    height: 100vh;
    
    display: none;
    position: fixed;
    z-index: 1;
    background-color: var(--dark-color);

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    color: white;

    top: 0;
}

body {
    background-color: var(--dark-color);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
}

/* Ecran anti-ordinateur */

/* Header */

header {
    background-color: var(--light-color);
    width: 100%;
    height: 10vh;

    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3);

    position: fixed;
    top: 0;
}

header a {
    height: 80%;
    align-self: center;
}

header img {
    height: 100%;
}

/* Barre de navigation */

nav {
    background-color: var(--light-color);

    width: 90%;
    height: 4rem;

    position: fixed;
    bottom: 5%;
    padding: 0 2rem;

    border-top-right-radius: 16rem 10rem;
    border-top-left-radius: 16rem 10rem;
    border-bottom-right-radius: 3rem;
    border-bottom-left-radius: 3rem;

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

    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--color-black);
}

nav a.current-page {
    color: var(--dark-color);
    font-weight: bolder;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-btn img {
    width: 24px;
    aspect-ratio: 1/1;
}

/* Commun à toutes les pages */

.page-title {
    margin: 0 1rem;
    margin-top: 8rem;
    font-size: 2.5rem;
    text-align: center;
    color: var(--color-white);
}

.page-description {
    margin: 0 1rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-white);
    font-weight: bolder;
}

hr {
    overflow: visible;
    text-align: center;
    width: 70vw;
    border: 2px solid var(--color-white);
    margin: 2rem 0;
}

@media screen and (min-width: 600px) {
    .desktop-detection {
        display: flex;
    }
}