*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
    object-fit: cover;
}

html{
    scroll-behavior: smooth;
/*    height: 300vh;*/
    overflow-x:hidden;
}

@font-face {
    font-family: 'Valizas';
    src: url('../fonts/valizas/ValizasVariable-Regular.ttf') format('opentype');
    font-weight: 1 999; /* Indique la plage des poids de la police variable */
    font-style: normal; /* Ou 'italic' pour une police variable italique */
}

@font-face {
    font-family: 'Valizas';
    src: url('../fonts/valizas/ValizasVariable-RegularItalic.ttf') format('opentype');
    font-weight: 1 999; /* Indique la plage des poids de la police variable */
    font-style: italic; /* Ou 'italic' pour une police variable italique */
}

@font-face {
    font-family: 'Bouh';
    src: url('../fonts/bouh/Bouuuuuh-regular.otf') format('opentype');
    font-weight: 1 999; /* Indique la plage des poids de la police variable */
    font-style: regular; /* Ou 'italic' pour une police variable italique */
}

@font-face {
    font-family: 'BouhR';
    src: url('../fonts/bouh/Bouuuuuh-Revenge.otf') format('opentype');
    font-weight: 1 999; /* Indique la plage des poids de la police variable */
    font-style: regular; /* Ou 'italic' pour une police variable italique */
}

@font-face {
    font-family: 'BouhC';
    src: url('../fonts/bouh/Bouuuuuh-Carnage.otf') format('opentype');
    font-weight: 1 999; /* Indique la plage des poids de la police variable */
    font-style: regular; /* Ou 'italic' pour une police variable italique */
}

/*****--**-----*****--|!|-*****-----**--*****/
/*****--**-----*****--§§§-*****-----**--*****/




/*****--**-----*****--|NAV|-*****-----**--*****/
    #navsticky{
        display: flex;
        width: calc(100% - 62px);
        background-color: white;
        justify-content: space-between;
        padding: 6px 38px;
        border: solid black 4px;
        margin: 12px auto;
        box-shadow: rgb(204, 97, 141) 14px 14px 0px 0px;
        position: fixed;
        top: 0;
        left: 31px;
        -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            z-index: 999;
    }

    #navsticky a{
        text-decoration: none;
        color: black;
        font-family: BouhC;
        font-weight: 900;
        font-size: 24px;
        margin-top: -4px;
        padding: 6px 26px;
    }

    #navsticky a:nth-child(1):hover{
        color:rgb(204, 97, 141);
    }
    #navsticky a:nth-child(2):hover{
        color:rgb(204, 97, 141);
    }
    #navsticky a:nth-child(3):hover{
        color:rgb(231, 177, 66);
    }
    #navsticky a:nth-child(4):hover{
        color:rgb(41, 77, 151);
    }
    #navsticky a:nth-child(5):hover{
        color:rgb(204, 97, 141);
    }
    #navsticky a:nth-child(6):hover{
        color:rgb(204, 97, 141);
    }
    #navsticky a:nth-child(7):hover{
        color:rgb(204, 97, 141);
    }

    .navstickymobile-toggle,
    .navstickymobile{
        display: none;
    }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media (max-width: 960px){
            #navsticky{
                padding: 6px 16px;
            }

            #navsticky a{
                padding: 6px 2vw;
                font-size: 2.8vw;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media (max-width: 576px){
            #navsticky{
                display: none;
            }

            .navstickymobile-toggle {
                position: fixed;
                top: 20px;
                right: 20px;
                cursor: pointer;
                z-index: 10;
                width: 50px;
                height: 50px;
                background-color: white;
                border-radius: 50%;
                padding: 14px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around; /* Ajuste l'espacement vertical entre les barres */
                box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
                -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

            }

            .bar {
                width: 25px;
                height: 4px; /* Ajustement de l'épaisseur des barres */
                background-color: #CC618D;
                transition: 0.4s;
            }

            .navstickymobile {
                display: block;
                position: fixed;
                top: 0;
                right: -100vw;
                width: 100vw;
                height: 100%;
                background-color: #CC618D;
                padding: 20px;
                z-index: 999;
                overflow: hidden;
                right: -100vw; /* Initial position */
                transition: right 0.4s ease-in-out;

            }

            .navstickymobile ul {
                list-style-type: none;
                padding: 7vh 0;
                text-align: center;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: space-between;
                height: 100%;
            }

            .navstickymobile ul li {
                margin: 10px 0;
            }

            .navstickymobile ul li a {
                color: #fff;
                text-decoration: none;
                font-size: 16vw;
                font-family: BouhC;
            }

            .close-button {
                position: absolute;
                top: 16px;
                right: 30px;
                font-size: 45px;
                color: #fff;
                cursor: pointer;
            }

            .navstickymobile.open {
                right: 0;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/

    /*****--**-----*****--|ANIMATION NAV|-*****-----**--*****/
    @-webkit-keyframes slide-in-top {
      0% {
        -webkit-transform: translateY(-1000px);
                transform: translateY(-1000px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes slide-in-top {
      0% {
        -webkit-transform: translateY(-1000px);
                transform: translateY(-1000px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
    }
    /*****--**-----*****--|ANIMATION NAV|-*****-----**--*****/
/*****--**-----*****--|NAV|-*****-----**--*****/