/*police, marges, et gestion des bordures */
body {
    font-family: 'Arial', sans-serif;
    /* Police par défaut */
    margin: 0;
    /* Supprimer les marges par défaut */
    padding: 0;
    /* Supprimer les espacements internes par défaut */
    box-sizing: border-box;
    /* Inclure les bordures et padding dans les dimensions des éléments */
}

/* Menu de navigation */
/* Style de l'en-tête et du menu de navigation */
header {
    background-color: #111;
    /* Couleur de fond noir */
    padding: 15px 30px;
    /* Espacement interne de l'en-tête */
    color: white;
    /* Texte blanc */
}

/* Conteneur pour la navigation avec un alignement flex pour le logo, les liens et le panier */
.nav-container {
    display: flex;
    /* Utilisation de flexbox pour organiser les éléments horizontalement */
    justify-content: space-between;
    /* Espace entre les éléments (logo à gauche, panier à droite) */
    align-items: center;
    /* Alignement vertical centré */
}

.logo img {
    width: 100px;
    /* Taille du logo */
}

.nav-links {
    list-style-type: none;
    /* Retirer les puces des éléments de la liste */
    display: flex;
    /* Alignement horizontal des liens de navigation */
    margin: 0;
    /* Supprimer les marges */
    padding: 0;
    /* Supprimer les espacements internes */
}

.nav-links li {
    margin: 0 15px;
    /* Espacement entre les éléments de la liste */
}

.nav-links a {
    color: white;
    /* Couleur blanche pour les liens */
    text-decoration: none;
    /* Supprimer la sous-ligne des liens */
    font-weight: bold;
    /* Texte en gras pour les liens */
}

/* Style du panier avec une icône et un compteur */
.cart {
    position: relative;
    /* Positionnement relatif pour placer le compteur au-dessus de l'icône */
}

.cart img {
    width: 30px;
    /* Taille de l'icône du panier */
}

.cart span {
    position: absolute;
    /* Positionnement absolu pour le compteur */
    top: -10px;
    /* Placement au-dessus de l'icône */
    right: -10px;
    /* Placement à droite de l'icône */
    background-color: red;
    /* Couleur de fond rouge pour le compteur */
    color: white;
    /* Couleur du texte du compteur */
    border-radius: 50%;
    /* Arrondir le compteur pour un effet de cercle */
    padding: 5px;
    /* Espacement interne pour le texte du compteur */
    font-size: 12px;
    /* Taille de police réduite */
}

/* Slider */
/* Styles du slider d'accueil avec images et transitions */
.slider {
    position: relative;
    /* Position pour placer les contrôles de navigation */
    max-width: 100%;
    /* S'adapte à la largeur de l'écran */
    height: 500px;
    /* Hauteur fixe */
    overflow: hidden;
    /* Masquer les parties des images qui débordent */
}

/* Style par défaut des diapositives */
.slide {
    display: none;
    /* Masquer les diapositives par défaut */
    position: relative;
    /* Position relative pour les légendes */
    height: 100%;
    /* Adapter la hauteur des diapositives */
}

/* Afficher la diapositive active */
.slide.active {
    display: block;
    /* Affiche uniquement la diapositive active */
}

.slide img {
    width: 100%;
    /* Image occupe toute la largeur */
    height: 100%;
    /* Image occupe toute la hauteur */
    object-fit: cover;
    /* Les images remplissent le conteneur sans déformation */
    animation: slide-animation 0.5s ease-in-out;
    /* Animation lors du changement de diapositive */
}

/* Animation lors du changement de diapositive */
@keyframes slide-animation {
    from {
        opacity: 0;
        transform: scale(0.95);
        /* Réduction de taille au début */
    }

    to {
        opacity: 1;
        transform: scale(1);
        /* Taille normale à la fin */
    }
}

/* Légende des diapositives */
.caption {
    position: absolute;
    /* Position absolue pour placer la légende */
    bottom: 20px;
    /* Placer la légende en bas */
    left: 20px;
    /* Légende à gauche */
    color: white;
    /* Texte blanc */
    background-color: rgba(0, 0, 0, 0.6);
    /* Fond semi-transparent */
    padding: 10px;
    /* Espacement interne */
    font-size: 20px;
    /* Taille de police de la légende */
    border-radius: 5px;
    /* Coins arrondis */
}

/* Style des boutons pour naviguer dans les diapositives */
button.prev,
button.next {
    position: absolute;
    /* Position absolue pour les boutons */
    top: 50%;
    /* Centrage vertical */
    transform: translateY(-50%);
    /* Ajustement pour le centrer précisément */
    background-color: rgba(0, 0, 0, 0.5);
    /* Fond semi-transparent noir */
    color: white;
    /* Couleur blanche pour le texte */
    border: none;
    /* Pas de bordure */
    padding: 10px;
    /* Espacement interne */
    cursor: pointer;
    /* Curseur pointeur lors du survol */
    font-size: 18px;
    /* Taille de la police */
    transition: background-color 0.3s ease;
    /* Transition pour effet de survol */
}

/* Changement de couleur au survol des boutons de navigation */
button.prev:hover,
button.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    /* Fond plus foncé lors du survol */
}

button.prev {
    left: 10px;
    /* Bouton gauche */
}

button.next {
    right: 10px;
    /* Bouton droit */
}

/* Section Nouveautés */
/* Styles de la section Nouveautés */
#new-arrivals {
    text-align: center;
    /* Centrer le texte */
    padding: 60px 20px;
    /* Espacement autour du contenu */
    background-color: #f7f7f7;
    /* Fond gris clair */
}

/* Section Produits */
/* Styles similaires à la section Nouveautés */
#products h2 {
    padding: 60px 20px;
    /* Espacement autour du titre */
    text-align: center;
    /* Centrer le titre */
}

.product-grid {
    display: flex;
    /* Flexbox pour organiser les produits */
    justify-content: center;
    /* Espacement uniforme entre les produits */
    flex-wrap: wrap;
    /* Permet de passer à la ligne si nécessaire */
    gap: 10px;  
}

.product {
    text-align: center;
    /* Texte centré pour chaque produit */
    margin: 20px;
    /* Espacement autour des produits */
    border: 1px solid #ddd;
    /* Bordure grise claire autour des produits */
    padding: 20px;
    /* Espacement interne */
    border-radius: 10px;
    /* Bords arrondis */
    background-color: #fff;
    /* Fond blanc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Ombre légère sous les produits */
    transition: box-shadow 0.3s ease;
    /* Transition pour l'effet de survol */
}

.product:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Ombre plus prononcée lors du survol */
}

/* Styles des images de produits avec transition d'agrandissement */
.product img {
    width: 200px;
    /* Taille de l'image */
    transition: transform 0.3s ease;
    /* Animation pour agrandir l'image au survol */
}

.product img:hover {
    transform: scale(1.1);
    /* Agrandir l'image lors du survol */
}

.product p {
    margin: 15px 0 10px;
    /* Espacement autour du texte descriptif du produit */
    font-size: 18px;
    /* Taille de la police */
    color: #333;
    /* Couleur du texte */
}

/* Section Contact */
#contact {
    background-color: #f7f7f7;
    /* Fond gris clair */
    padding: 60px 20px;
    /* Espacement interne */
    text-align: center;
    /* Centrer le texte */
}

#contact h2 {
    margin-bottom: 20px;
    /* Espacement sous le titre */
    font-size: 32px;
    /* Taille du titre */
    color: #333;
    /* Couleur du titre */
}

/* Formulaire de contact */
#contact-form {
    max-width: 600px;
    /* Largeur maximale du formulaire */
    margin: 0 auto;
    /* Centrer horizontalement le formulaire */
    padding: 20px;
    /* Espacement interne */
    background-color: #fff;
    /* Fond blanc */
    border-radius: 10px;
    /* Bords arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Ombre légère autour du formulaire */
}

/* Groupes de champs dans le formulaire */
.form-group {
    margin: 20px;
    /* Espacement autour des groupes de champs */
    text-align: left;
    /* Alignement du texte à gauche */
}

.form-group label {
    display: block;
    /* Chaque label occupe une ligne entière */
    margin-bottom: 5px;
    /* Espacement sous les labels */
    color: #555;
    /* Couleur du texte des labels */
    font-weight: bold;
    /* Texte en gras pour les labels */
}

/* Style des champs de formulaire */
.form-group input,
.form-group textarea {
    width: 100%;
    /* Champs occupent toute la largeur */
    padding: 10px;
    /* Espacement interne */
    border: 1px solid #ccc;
    /* Bordure grise claire */
    border-radius: 5px;
    /* Bords arrondis */
    font-size: 16px;
    /* Taille de la police */
}

/* Style du bouton d'envoi */
button[type="submit"] {
    background-color: #333;
    /* Couleur de fond noir */
    color: white;
    /* Texte blanc */
    border: none;
    /* Pas de bordure */
    padding: 15px 30px;
    /* Espacement interne */
    font-size: 18px;
    /* Taille de la police */
    cursor: pointer;
    /* Curseur pointeur */
    border-radius: 5px;
    /* Bords arrondis */
    transition: background-color 0.3s ease;
    /* Transition pour l'effet de survol */
}

button[type="submit"]:hover {
    background-color: #555;
    /* Changement de couleur au survol */
}

/* Section Footer */
footer {
    background-color: #111;
    /* Fond noir */
    color: white;
    /* Texte blanc */
    padding: 40px 20px;
    /* Espacement interne */
    text-align: center;
    /* Centrer le texte */
}

.footer-container {
    display: flex;
    /* Utilisation de flexbox pour organiser les éléments */
    justify-content: space-between;
    /* Espace entre les éléments */
    align-items: center;
    /* Alignement centré verticalement */
    flex-wrap: wrap;
    /* Adaptation au changement de taille de l'écran */
    margin-bottom: 20px;
    /* Espacement sous le conteneur */
}

/* Liens dans le pied de page */
.footer-links {
    display: grid;
    /* Organisation des liens en grille */
    gap: 15px;
    /* Espacement entre les liens */
}

.footer-links a {
    color: white;
    /* Couleur blanche pour les liens */
    text-decoration: none;
    /* Pas de soulignement */
}

.footer-links a:hover {
    text-decoration: underline;
    /* Soulignement au survol */
}

/* Icônes de réseaux sociaux */
.footer-social img {
    width: 30px;
    /* Taille des icônes */
    height: 30px;
    /* Hauteur des icônes */
    transition: transform 0.3s ease;
    /* Animation lors du survol */
}

.footer-social img:hover {
    transform: scale(1.2);
    /* Agrandir légèrement les icônes au survol */
}

/* Responsiveness */
/* Styles pour petits écrans (moins de 768px de large) */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        /* Les liens de navigation passent en colonne */
    }

    .product-grid {
        flex-direction: column;
        /* Les produits passent en colonne */
        align-items: center;
        /* Centrer les produits */
    }

    .footer-container {
        flex-direction: column;
        /* Le contenu du pied de page passe en colonne */
        text-align: center;
        /* Centrer le texte */
    }

    .footer-links {
        flex-direction: column;
        /* Les liens passent en colonne */
        margin-bottom: 15px;
        /* Espacement sous les liens */
    }
}


.slide {
    display: none;
}

.slide.active {
    display: block;
}

/* Popup pour afficher le panier */
#cart-modal {
    display: none; /* Masquer la popup par défaut */
    position: fixed;
    z-index: 1000;
    overflow: auto; /* Enable scroll if content is too big */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}

.cart-popup-content {
    background-color: white;
    color: #111;
    margin: 15% auto;
    padding: 20px;
    width: 400px;
    border-radius: 10px;
    text-align: center;
}

#cart-items {
    text-align: left;
    margin-bottom: 20px;
}

#cart-items p {
    margin: 10px 0;
}

#checkout {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}


/* Ajout d'un conteneur pour l'icône de compte et de panier */
.account-cart {
    display: flex;
    /* Flexbox pour aligner l'icône du compte et du panier côte à côte */
    align-items: center;
    /* Centrage vertical */
}

/* Style de la section du compte */
.account {
    display: flex;
    /* Flexbox pour aligner l'icône et le nom/lien côte à côte */
    align-items: center;
    /* Centrage vertical */
    margin-right: 10px;
    /* Réduire l'espace entre l'icône du compte et le panier */
    position: relative;
    /* Nécessaire pour positionner le sous-menu */
    cursor: pointer;
    /* Le curseur devient un pointeur pour indiquer que l'icône est cliquable */
}

/* Icône du compte utilisateur */
.account img {
    width: 45px;
    /* Taille de l'icône du compte */
    height: 45px;
    margin-right: 10px;
    /* Espacement entre l'icône et le texte (nom ou lien) */
}

/* Texte ou lien du compte utilisateur */
.account a,
.account span {
    color: white;
    /* Couleur blanche pour le texte */
    font-weight: bold;
    /* Texte en gras */
    text-decoration: none;
    /* Supprimer la sous-ligne pour le lien */
}

/* Effet au survol pour le lien "Se connecter" */
.account a:hover {
    text-decoration: underline;
    /* Soulignement au survol */
}

/* Sous-menu pour le compte */
.account-dropdown {
    display: none;
    /* Masqué par défaut */
    position: absolute;
    /* Position absolue pour placer le menu sous l'icône */
    top: 50px;
    /* Ajuster pour que le menu soit juste sous l'icône */
    right: 0;
    /* Aligner à droite de l'icône */
    background-color: white;
    /* Fond blanc pour le sous-menu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Ombre légère */
    border-radius: 5px;
    /* Bords arrondis pour un aspect plus agréable */
    z-index: 1000;
    /* Assurez-vous que le menu apparaît par-dessus le reste */
    width: 200px;
    /* Largeur du sous-menu */
}

/* Style des éléments du sous-menu */
.account-dropdown ul {
    list-style-type: none;
    /* Retirer les puces des éléments de la liste */
    margin: 0;
    /* Supprimer les marges par défaut */
    padding: 0;
    /* Supprimer les espacements internes par défaut */
}

.account-dropdown ul li {
    padding: 10px;
    /* Espacement interne des éléments du menu */
    border-bottom: 1px solid #ddd;
    /* Bordure pour séparer les éléments */
}

.account-dropdown ul li:last-child {
    border-bottom: none;
    /* Pas de bordure pour le dernier élément */
}

/* Style des liens dans le sous-menu */
.account-dropdown ul li a {
    text-decoration: none;
    /* Supprimer la sous-ligne */
    color: #333;
    /* Couleur du texte */
    display: block;
    /* Chaque lien occupe toute la largeur de l'élément */
}

.account-dropdown ul li a:hover {
    background-color: #f7f7f7;
    /* Changer le fond au survol */
    color: #000;
    /* Changer la couleur du texte au survol */
}

/* Montrer le sous-menu quand actif */
.account-dropdown.show {
    display: block;
    /* Affiche le menu quand la classe 'show' est ajoutée */
}

.center-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.details-button {
    background-color: #2d2d2d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.details-button:hover {
    background-color: #1a1a1a;
}