/* Définition de la police "Bangers" pour les éléments qui utilisent la classe bangers-regular */
.bangers-regular {
    font-family: "Bangers", serif; /* Applique la police Bangers */
    font-weight: 400; /* Poids normal */
    font-style: normal; /* Style normal (pas d'italique) */
}

/* Style général pour le corps de la page */
body {
    font-family: 'Trebuchet MS', sans-serif; /* Police principale du site */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements par défaut */
    color: #333; /* Couleur du texte principale (gris foncé) */
}

/* Styles pour les titres de niveaux 1, 2 et 3 */
h1, h2, h3 {
    font-family: "Bangers", serif; /* Utilise la police Bangers */
    letter-spacing: 1px; /* Espacement entre les lettres pour une meilleure lisibilité */
}

/* Style des liens */
a {
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    color: white; /* Couleur blanche par défaut pour les liens */
}

/* En-tête principal */
header {
    background-color: #6A0DAD; /* Fond violet foncé */
    color: white; /* Couleur blanche pour le texte */
    display: flex; /* Disposition flexible pour aligner les éléments horizontalement */
    align-items: center; /* Alignement vertical centré */
    justify-content: space-between; /* Espace entre les éléments */
    padding: 10px 20px; /* Espacement interne */
}

/* Section du logo dans l'en-tête */
header .logo {
    flex: 1; /* Prend 1 unité d'espace disponible */
    text-align: center; /* Centre le contenu horizontalement */
}

/* Icônes utilisées dans l'en-tête ou ailleurs */
.icons {
    height: 50px; /* Hauteur fixe des icônes */
}

/* Navigation principale */
nav {
    flex: 3; /* Prend 3 unités d'espace disponible */
}

/* Liste des liens dans la navigation */
nav ul {
    list-style-type: none; /* Supprime les puces par défaut des listes */
    margin: 0; /* Supprime les marges externes */
    padding: 10px 0px; /* Espacement interne vertical */
    border-radius: 10px; /* Bords arrondis pour la navigation */
    background-color: #5A089D; /* Fond violet */
    display: flex; /* Affiche les éléments horizontalement */
    justify-content: space-evenly; /* Espace égal entre les éléments */
}

/* Style pour chaque élément de la liste */
nav ul li {
    display: inline-block; /* Affiche les éléments en ligne */
}

/* Style des liens dans les éléments de la navigation */
nav ul li a {
    color: white; /* Couleur blanche pour les liens */
    text-decoration: none; /* Supprime le soulignement */
    padding: 14px 20px; /* Espacement interne pour agrandir la zone cliquable */
    display: block; /* Transforme le lien en bloc pour occuper tout l'espace */
}

/* Style des menus déroulants */
nav ul li.dropdown {
    position: relative; /* Nécessaire pour positionner le contenu du menu déroulant */
}

/* Contenu des menus déroulants */
nav ul li.dropdown .dropdown-content {
    display: none; /* Masque le menu déroulant par défaut */
    position: absolute; /* Positionnement absolu par rapport à l'élément parent */
    border-radius: 10px; /* Coins arrondis */
    background-color: #5A089D; /* Fond violet */
    min-width: 160px; /* Largeur minimale du menu déroulant */
    z-index: 1; /* Assure que le menu est au-dessus des autres éléments */
}

/* Affiche le menu déroulant au survol */
nav ul li.dropdown:hover .dropdown-content {
    display: block; /* Affiche le menu déroulant */
}

/* Style des liens dans le menu déroulant */
nav ul li.dropdown .dropdown-content a {
    color: white; /* Couleur blanche pour les liens */
    padding: 12px 16px; /* Espacement interne des liens */
    text-decoration: none; /* Supprime le soulignement */
}

/* Changement de couleur au survol des liens dans le menu déroulant */
nav ul li.dropdown .dropdown-content a:hover {
    background-color: #9C4D97; /* Couleur de fond plus claire pour indiquer l'interaction */
}

/* Section de la bannière */
.banner {
    position: relative; /* Nécessaire pour positionner le texte par-dessus l'image */
    width: 100%; /* Prend toute la largeur disponible */
    height: 500px; /* Hauteur fixe */
    overflow: hidden; /* Cache le contenu qui dépasse */
}

/* Image de fond de la bannière */
.banner img {
    width: 100%; /* L'image s'étend sur toute la largeur */
    height: 100%; /* L'image s'étend sur toute la hauteur */
    object-fit: cover; /* L'image est ajustée pour couvrir entièrement l'espace disponible */
}

/* Texte au centre de la bannière */
.banner h2 {
    position: absolute; /* Positionnement absolu par rapport à la bannière */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Centre le texte exactement au milieu */
    color: white; /* Couleur blanche */
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent noir */
    padding: 10px 20px; /* Espacement interne */
    font-size: 28px; /* Taille du texte */
    text-align: center; /* Centre le texte */
    border-radius: 5px; /* Coins arrondis */
}

/* Section des filtres */
.filters {
    margin: 30px auto; /* Centré horizontalement avec un espacement vertical */
    padding: 20px; /* Espacement interne */
    background-color: #f3f3f3; /* Fond gris clair */
    border-radius: 10px; /* Coins arrondis */
    width: 80%; /* Largeur relative à la taille de l'écran */
    max-width: 1200px; /* Largeur maximale fixe */
}

/* Conteneur du formulaire des filtres */
.filters form {
    display: flex; /* Affiche les éléments horizontalement */
    justify-content: space-between; /* Espace égal entre les éléments */
    gap: 20px; /* Espace entre les éléments */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
}

/* Groupe de filtres individuel */
.filter-group {
    display: flex; /* Affiche les éléments en colonne */
    flex-direction: column; /* Organisation verticale */
    flex-basis: 45%; /* Largeur relative */
    max-width: 300px; /* Largeur maximale fixe */
}

/* Labels des filtres */
.filter-group label {
    font-weight: bold; /* Texte en gras */
    margin-bottom: 8px; /* Espacement sous le label */
    font-size: 1rem; /* Taille standard du texte */
}

/* Bouton des filtres */
.filters button {
    padding: 10px 20px; /* Espacement interne */
    background-color: #6A0DAD; /* Fond violet */
    color: #fff; /* Couleur blanche pour le texte */
    font-weight: bold; /* Texte en gras */
    border: none; /* Supprime la bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en forme de main */
    transition: background-color 0.3s ease; /* Animation pour le changement de couleur */
}

/* Changement de couleur au survol du bouton */
.filters button:hover {
    background-color: #9C4D97; /* Fond plus clair au survol */
}

/* Section de présentation */
.presentation {
    padding: 20px; /* Espacement interne */
    text-align: center; /* Texte centré */
}

/* Titres dans la section de présentation */
.presentation h3 {
    font-size: 24px; /* Taille du texte */
    color: #6A0DAD; /* Couleur violette */
}

/* Paragraphes dans la section de présentation */
.presentation p {
    font-size: 16px; /* Taille standard */
    margin-top: 10px; /* Espacement au-dessus du paragraphe */
    line-height: 1.5; /* Hauteur de ligne pour améliorer la lisibilité */
}

/* Liste des produits */
.product-list {
    padding: 20px; /* Espacement interne autour de la liste */
    text-align: center; /* Centre le contenu textuel */
}

/* Titre de la liste des produits */
.product-list h3 {
    font-size: 24px; /* Taille de la police pour le titre */
    color: #6A0DAD; /* Couleur violette */
    margin-bottom: 20px; /* Espacement en bas du titre */
}

/* Conteneur des produits */
.products {
    display: flex; /* Disposition en ligne flexible */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    gap: 20px; /* Espacement entre les produits */
    justify-content: center; /* Centre les produits horizontalement */
}

/* Élément individuel du produit */
.product-item {
    background-color: #f9f9f9; /* Fond gris clair */
    border: 1px solid #ddd; /* Bordure grise légère */
    border-radius: 8px; /* Coins arrondis */
    width: 250px; /* Largeur fixe de l'élément */
    padding: 15px; /* Espacement interne */
    text-align: center; /* Centre le contenu textuel */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre pour donner de la profondeur */
    transition: transform 0.3s, box-shadow 0.3s; /* Animation pour le survol */
}

/* Image du produit */
.product-item img {
    width: 100%; /* L'image occupe toute la largeur de l'élément */
    height: 300px; /* Hauteur fixe */
    object-fit: cover; /* Ajuste l'image pour couvrir toute la zone */
    object-position: center; /* Centre le contenu de l'image */
    border-radius: 10px; /* Coins arrondis */
}

/* Nom du produit */
.product-item h4 {
    font-size: 18px; /* Taille de la police pour le titre du produit */
    color: #333; /* Couleur gris foncé */
    margin: 10px 0; /* Espacement vertical autour du titre */
}

/* Description du produit */
.product-item p {
    font-size: 14px; /* Taille de la police pour la description */
    margin: 5px 0; /* Espacement vertical */
}

/* Prix du produit */
.product-item .price {
    font-weight: bold; /* Met en évidence le prix avec une police en gras */
    color: #6A0DAD; /* Couleur violette pour correspondre au thème */
    margin: 10px 0; /* Espacement vertical */
}

/* Bouton d'action (exemple : ajouter au panier) */
.product-item .btn {
    display: inline-block; /* Affiche le bouton en ligne mais comme un bloc */
    background-color: #6A0DAD; /* Fond violet */
    color: white; /* Texte blanc */
    padding: 10px 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 14px; /* Taille de la police */
    margin-top: 10px; /* Espacement au-dessus du bouton */
    transition: background-color 0.3s; /* Animation pour le changement de couleur au survol */
}

/* Couleur au survol du bouton */
.product-item .btn:hover {
    background-color: #5A089D; /* Couleur légèrement plus foncée au survol */
}

/* Animation lors du survol du produit */
.product-item:hover {
    transform: scale(1.05); /* Agrandit légèrement l'élément */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Augmente l'ombre pour accentuer l'effet */
}

/* Boutons et listes déroulantes (général) */
button, select {
    background-color: #9C4D97; /* Fond violet clair */
    color: white; /* Texte blanc */
    border: 1px solid #6A0DAD; /* Bordure violette */
    padding: 10px 20px; /* Espacement interne */
    cursor: pointer; /* Curseur en forme de main au survol */
    font-size: 14px; /* Taille de la police */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Animation pour le changement de couleur au survol */
}

/* Couleur au survol des boutons et listes */
button:hover, select:hover {
    background-color: #6A0DAD; /* Fond plus foncé au survol */
}

/* Champ de saisie pour les nombres */
input[type="number"] {
    background-color: #9C4D97; /* Fond violet clair */
    color: white; /* Texte blanc */
    border: 1px solid #6A0DAD; /* Bordure violette */
    padding: 10px; /* Espacement interne */
    font-size: 14px; /* Taille de la police */
    width: 80px; /* Largeur fixe */
    border-radius: 5px; /* Coins arrondis */
    text-align: center; /* Centre le texte */
    transition: background-color 0.3s ease; /* Animation pour le changement de couleur */
}

/* Couleur au survol des champs de saisie */
input[type="number"]:hover {
    background-color: #6A0DAD; /* Fond plus foncé au survol */
}

/* Effet de mise en valeur lors du focus sur le champ */
input[type="number"]:focus {
    outline: none; /* Supprime l'entourage bleu par défaut */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); /* Ombre blanche lumineuse */
}

/* Grille des tutoriels */
.tutorials-grid {
    display: flex; /* Disposition en ligne flexible */
    justify-content: space-between; /* Espacement égal entre les tutoriels */
    gap: 20px; /* Espacement entre les éléments */
    margin: 40px auto; /* Espacement vertical et centré horizontalement */
    max-width: 1200px; /* Largeur maximale */
    padding: 0 20px; /* Espacement interne horizontal */
}

/* Conteneur individuel d'un tutoriel */
.tutorial {
    flex: 1; /* Chaque tutoriel prend une part égale de l'espace disponible */
    background-color: #f9f9f9; /* Fond gris clair */
    padding: 20px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure grise légère */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Conteneur vidéo */
.video-container {
    text-align: center; /* Centre le contenu */
    margin-top: 20px; /* Espacement au-dessus de la vidéo */
}

/* Vidéos (par exemple, intégrées via iframe) */
.video-container iframe {
    max-width: 100%; /* La vidéo occupe toute la largeur disponible */
    border-radius: 8px; /* Coins arrondis */
}

/* Formulaire de contact */
.contact-form {
    width: 75%; /* Largeur relative à la taille de l'écran */
    margin: 2rem auto; /* Centré avec un espacement vertical */
    padding: 2rem; /* Espacement interne */
    background-color: #f9f9f9; /* Fond gris clair */
    border: 1px solid #ddd; /* Bordure grise légère */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Titre du formulaire */
.contact-form h3 {
    text-align: center; /* Texte centré */
    font-size: 1.8rem; /* Taille du texte */
    color: #6A0DAD; /* Couleur violette */
    margin-bottom: 1.5rem; /* Espacement en bas */
}

/* Conteneur des champs du formulaire */
.contact-form form {
    display: grid; /* Disposition en grille */
    grid-template-columns: 1fr 1fr; /* Deux colonnes de taille égale */
    gap: 1.5rem; /* Espacement entre les champs */
}

/* Labels des champs */
.contact-form label {
    font-size: 1rem; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    margin-bottom: 0.5rem; /* Espacement sous le label */
    display: block; /* S'assure que le label occupe une ligne entière */
}

/* Champs de saisie et listes déroulantes */
.contact-form input,
.contact-form select {
    width: 100%; /* Occupe toute la largeur disponible */
    padding: 0.8rem; /* Espacement interne */
    font-size: 1rem; /* Taille de la police */
    border: 1px solid #ccc; /* Bordure grise légère */
    border-radius: 4px; /* Coins légèrement arrondis */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    transition: border-color 0.2s ease-in-out; /* Animation pour le focus */
}

/* Changement de bordure au focus */
.contact-form input:focus,
.contact-form select:focus {
    border-color: #5A089D; /* Bordure violette plus foncée */
    outline: none; /* Supprime l'entourage bleu par défaut */
}

/* Bouton du formulaire */
.contact-form button {
    grid-column: 1 / -1; /* Le bouton occupe toute la largeur */
    padding: 0.8rem 1.5rem; /* Espacement interne */
    font-size: 1.1rem; /* Taille de la police */
    color: #fff; /* Texte blanc */
    background-color: #6A0DAD; /* Fond violet */
    border: none; /* Supprime la bordure */
    border-radius: 4px; /* Coins légèrement arrondis */
    cursor: pointer; /* Curseur en forme de main */
    text-align: center; /* Texte centré */
    transition: background-color 0.2s ease-in-out; /* Animation pour le survol */
}

/* Couleur au survol du bouton */
.contact-form button:hover {
    background-color: #5A089D; /* Couleur légèrement plus foncée */
}

/* Section récapitulative */
.recap {
    width: 75%; /* Largeur relative à la taille de l'écran */
    margin: 2rem auto; /* Centré avec un espacement vertical */
    padding: 1.5rem; /* Espacement interne */
    background-color: #f9f9f9; /* Fond gris clair */
    border: 1px solid #ddd; /* Bordure grise légère */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Titre de la section récapitulative */
.recap h3 {
    text-align: center; /* Texte centré */
    font-size: 1.8rem; /* Taille du texte */
    color: #5A089D; /* Couleur violette */
    margin-bottom: 1.5rem; /* Espacement en bas */
}

/* Texte de la section récapitulative */
.recap p {
    font-size: 1rem; /* Taille de la police */
    line-height: 1.6; /* Hauteur de ligne pour améliorer la lisibilité */
    color: #333; /* Couleur gris foncé */
    margin-bottom: 1rem; /* Espacement en bas */
}

/* Conteneur du panier */
.cart {
    width: 75%; /* Largeur de 75% de l'écran */
    margin: 2rem auto; /* Centré horizontalement avec un espacement vertical */
}

/* Tableau du panier */
.cart-table {
    width: 100%; /* Le tableau occupe toute la largeur disponible */
    border-collapse: separate; /* Les bordures des cellules sont séparées */
    border-spacing: 0; /* Pas d'espacement entre les cellules */
    border-radius: 10px; /* Coins arrondis pour le tableau */
    overflow: hidden; /* Cache tout contenu qui dépasse des coins arrondis */
    margin: 20px 0; /* Espacement vertical autour du tableau */
}

/* Cellules du tableau (en-têtes et contenu) */
.cart-table th, .cart-table td {
    border: 1px solid #ddd; /* Bordure grise claire */
    padding: 10px; /* Espacement interne dans les cellules */
    text-align: center; /* Contenu centré dans les cellules */
}

/* En-têtes du tableau */
.cart-table th {
    background-color: #6A0DAD; /* Fond violet */
    color: white; /* Texte blanc pour contraster avec le fond */
}

/* Coins arrondis pour la première et la dernière cellule de l'en-tête */
th:first-child {
    border-top-left-radius: 10px; /* Coin supérieur gauche arrondi */
}

th:last-child {
    border-top-right-radius: 10px; /* Coin supérieur droit arrondi */
}

/* Coins arrondis pour la première et la dernière cellule de la dernière ligne */
tr:last-child td:first-child {
    border-bottom-left-radius: 10px; /* Coin inférieur gauche arrondi */
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px; /* Coin inférieur droit arrondi */
}

/* Champ pour la quantité */
.cart-table .quantity-input {
    width: 60px; /* Largeur fixe pour le champ */
    text-align: center; /* Centre le texte à l'intérieur */
}

/* Total général du panier */
.total {
    font-size: 1.2em; /* Texte légèrement agrandi */
    font-weight: bold; /* Texte en gras pour le mettre en valeur */
    text-align: right; /* Aligné à droite */
    margin: 20px 0; /* Espacement vertical autour du total */
}

/* Pied de page */
footer {
    background-color: #6A0DAD; /* Fond violet */
    color: white; /* Texte blanc */
    text-align: center; /* Texte centré */
    padding: 10px 20px; /* Espacement interne */
    display: flex; /* Disposition en ligne flexible */
    align-items: center; /* Aligne verticalement les éléments au centre */
    justify-content: space-between; /* Espacement égal entre les éléments */
}

/* Styles pour les écrans de moins de 768px */
@media (max-width: 768px) {
    /* En-tête : organisation verticale */
    header {
        flex-direction: column; /* Passe à une disposition en colonne */
        text-align: center; /* Texte centré */
    }

    /* Navigation : disposition verticale des liens */
    nav ul {
        flex-direction: column; /* Liens empilés verticalement */
    }

    /* Espacement entre les éléments de navigation */
    nav ul li {
        margin: 10px 0; /* Espacement vertical entre les liens */
    }

    /* Bannière : ajuste la hauteur pour les petits écrans */
    .banner {
        height: 300px; /* Réduit la hauteur de la bannière */
    }

    /* Texte de la bannière : ajustement de la taille de la police */
    .banner h2 {
        font-size: 24px; /* Taille réduite pour s'adapter à l'écran */
    }

    /* Section de présentation */
    .presentation {
        padding: 10px; /* Réduction des marges internes */
    }

    .presentation h3 {
        font-size: 20px; /* Taille de la police réduite pour le titre */
    }

    .presentation p {
        font-size: 14px; /* Texte plus petit pour le contenu */
    }

    /* Filtres : disposition verticale */
    .filters form {
        flex-direction: column; /* Les champs des filtres s'empilent verticalement */
        align-items: center; /* Centré horizontalement */
    }

    /* Groupe de filtres : pleine largeur */
    .filter-group {
        flex-basis: 100%; /* Occupe toute la largeur disponible */
        max-width: none; /* Supprime toute limitation de largeur */
    }

    /* Bouton des filtres : pleine largeur */
    .filters button {
        width: 100%; /* Le bouton occupe toute la largeur */
    }

    /* Formulaire de contact : une seule colonne */
    .contact-form form {
        grid-template-columns: 1fr; /* Une seule colonne pour les petits écrans */
    }
}

/* Styles pour les écrans de moins de 480px */
@media (max-width: 480px) {
    /* Texte de la bannière : ajustement supplémentaire */
    .banner h2 {
        font-size: 20px; /* Taille encore plus petite */
        padding: 5px 10px; /* Réduction de l'espacement interne */
    }

    /* Liens de navigation : réduction de la taille de la police */
    nav ul li a {
        font-size: 14px; /* Taille plus petite pour s'adapter à l'écran */
    }
}