@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

:root {
    --main-border-color: #ccc;
    --je-suis-pas-sur: #ccc;
    --main-font :'Inter Tight', sans-serif; /*Arial, sans-serif;*/
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Styles pour l'en-tête */
header {
    background-color: #ffffff;
    color: #000000;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--main-border-color);
}

/* Styles pour le logo */
.logo img {
    max-width: 100px; /* Ajustez la taille du logo selon vos besoins */
}

/* Styles pour la barre de navigation */
header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin-right: 5px; /* Espace entre les éléments de la barre de navigation */
    padding: 5px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    border: 1px solid transparent; /* Bordure transparente par défaut */
    padding: 5px; /* Ajoutez du padding pour espacer le texte de la bordure */
}

header nav ul li a:hover {
    border-color: #000; /* Changement de la couleur de la bordure au survol */
}


header nav ul li:last-child {
    margin-right: 0; /* Aucun espace après le dernier élément */
}

header nav ul li a {
    color: #000000;
    text-decoration: none;
}

/* Styles pour le lien de panier */
.panier a {
    color: #000000;
    background-color: #fff;
    text-decoration: none;
    border: 1px solid var(--je-suis-pas-sur);
    padding: 5px 15px;
}

.panier a:hover {
    background-color: #000;
    color: #fff;
}
/* fin header */

main {
    padding: 20px;
}

/*MAIN*/

/* Styles pour la section Info */
.info {
    text-align: center;
    margin: auto; /* Pour centrer horizontalement */
    width: 50%; /* Ajustez la largeur selon vos préférences */
    font-size: 30px;
}

/* Styles pour la description */
.description {
    margin-bottom: 20px; /* Espace entre la description et les réseaux sociaux */
    font-size: 20px;
}


/* Styles pour les liens des réseaux sociaux */
.reseaux a {
    margin: 0 10px; /* Espacement entre les logos */
}

.reseaux img {
    width: 30px; /* Ajustez la taille selon vos besoins */
    height: 30px;
}

footer {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    padding: 10px 0;
    border: 1px solid var(--main-border-color);
    /* position: fixed; */
    bottom: 0;
    width: 100%;
}