* {

    margin: 0;

    padding: 0;

    font-family: 'Inria', serif;

    color: white;

    box-sizing: border-box;

}



body{

    cursor: url('https://cur.cursors-4u.net/food/foo-4/foo345.cur'), auto !important;

}



html {

    scroll-behavior: smooth;

}



/* Header */

header {

    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between; /* Répartit les éléments : logo, nav et bouton */

    height: 100px;

    background-color: rgb(63, 5, 16);

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

    padding: 0 20px;

}



/* Logo */

.logoHead {

    height: 100%;

    margin-right: auto; /* Aligne le logo à gauche */

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

}





/* Navigation */

header nav {

    display: flex;

    flex: 1;

    justify-content: center;

}



header nav ul {

    display: flex;

    gap: 50px;

    list-style: none;

}



header nav ul li a {

    text-decoration: none;

    font-size: 24px;

    padding: 5px 10px;

    position: relative;

    transition: all 0.4s ease-in-out;

}



header nav ul li a::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 10px;

    height: 2px;

    background-color: white;

    transition: width 0.4s ease-in-out;

}



/* Augmente la largeur du souligment de la page */

header nav ul li.page a::after {

    width: 50%; 

}



header nav ul li a:hover::after {

    width: 100%;

}





.contact-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 20px;

}



.contact-btn a {

    text-decoration: none;

    font-size: 18px;

    right: 20px;

    padding: 10px 20px;

    border: 2px solid white;

    position: absolute;

    border-radius: 5px;

    background-color: transparent;

    transition: all 0.3s ease-in-out;

}



.contact-btn a:hover {

    background-color: white;

    color: rgb(70, 5, 17);

}





@media (max-width: 800px) {

            /* Header */

            header {

                flex-direction: column; /* Réorganise les éléments en colonne */

                align-items: center; /* Centre tous les enfants */

                height: auto; /* Adapte la hauteur au contenu */

                padding: 10px 15px; /* Réduit les marges internes */

            }

        

            /* Logo */

            .logoHead {

                left: 10px;

                margin: -8px 0px 0px 0px !important;

                height: 60px !important; /* Réduit la taille du logo */

                max-width: 80%; /* Limite la largeur du logo */

                margin-bottom: 10px; /* Ajoute un espace entre le logo et la navigation */

            }

        

            /* Navigation */

            header nav {

                display: flex;

                flex: 1; /* Prend tout l'espace entre le logo et le bouton */

                justify-content: center;

            }

        

            header nav ul {

                display: flex;

                gap: 5px; /* Espace entre les liens */

                list-style: none;

            }

        

            header nav ul li {

                padding-top:10px ;

                text-align: center; /* Centre chaque lien */

            }

        

            header nav ul li a {

                font-size: 15px; /* Réduit légèrement la taille des liens */

                padding: 5px 5px; /* Ajuste la surface cliquable */

                text-align: center;

            }

        

            /* Bouton "Nous Contacter" */

            .contact-btn {

                margin-top: 16px; /* Ajoute un espace entre la navigation et le bouton */

                width: auto; /* Le bouton conserve sa taille naturelle */

                text-align: center;

            }

        

            .contact-btn a {

                right: 10px;

                margin: 0px 0px 48px 295px;

                font-size: 14px; /* Taille adaptée pour mobile */

                padding: 1px 1px; /* Surface cliquable optimisée */

                border: 0.5px solid white; /* Conserve une bordure visible */

                border-radius: 5px; /* Coins arrondis pour un design moderne */

                transition: all 0.3s ease-in-out;

            }

        

            .contact-btn a:hover {

                background-color: white; /* Change le fond au survol */

                color: rgb(70, 5, 17); /* Change la couleur du texte */

            }

}