/* ========================================
   STYLES DU HEADER PRINCIPAL
   ======================================== */

/* Conteneur principal du header avec fond beige */
header {
  background-color: rgba(238, 224, 224, 1); /* Couleur de fond beige clair */
  color: black; /* Texte noir pour le contraste */
}

/* Conteneur du header avec largeur maximale et centrage */
.header-container {
  max-width: 80%; /* Largeur maximale pour éviter que le contenu soit trop étiré */
  min-height:200px ; /* Hauteur à 100% du parent */
  margin: 0 auto; /* Centrage horizontal automatique */
  position: relative; /* Position relative pour les éléments enfants absolus */
  display: grid; /* Utilise CSS Grid pour la mise en page */
  grid-template-columns: 1fr auto 1fr; /* 3 colonnes : logo, nav, actions */
  align-items: center; /* Centre verticalement tous les éléments */
  column-gap: 16px; /* Espace entre les colonnes */
  padding: 10px 20px; /* Espacement interne */
  background-color: rgba(238, 224, 224, 1); /* Même couleur que le header */
}

/* ========================================
   SECTION LOGO
   ======================================== */

/* Bloc contenant le logo et le texte associé */
.logo-div {
  display: flex; /* Utilise Flexbox pour l'alignement */
  align-items: center; /* Centre verticalement les éléments */
  gap: 10px; /* Espace entre le logo et le texte */
  width: auto;
  min-width: 100px; /* Largeur automatique selon le contenu */
  grid-column: 1; /* Place dans la première colonne du grid */
}

/* Image du logo avec dimensions contrôlées */
.logo-header {
  max-width: 50%;
  min-width: 100px; /* Largeur maximale pour éviter que le logo soit trop grand */
  height: auto; /* Hauteur automatique pour garder les proportions */
  object-fit: contain; /* L'image s'adapte sans être coupée */
}

/* ========================================
   NAVIGATION PRINCIPALE
   ======================================== */

/* Conteneur de la barre de navigation */
nav.site-nav {
  display: flex; /* Utilise Flexbox */
  flex-direction: column; /* Organise les éléments verticalement */
  grid-column: 2; /* Place dans la deuxième colonne du grid */
}

/* Menu de navigation avec alignement horizontal */
.header-container nav ul {
  display: flex; /* Utilise Flexbox pour l'alignement horizontal */
  justify-content: center; /* Centre horizontalement les éléments */
  gap: 2em; /* Espace entre les éléments du menu */
  padding: 0; /* Supprime le padding par défaut */
  margin: 0; /* Supprime la marge par défaut */
}

/* Éléments de la liste de navigation */
.header-container nav li {
  list-style: none; /* Supprime les puces de liste */
}

/* Liens de navigation avec style et transitions */
.header-container nav a {
  color: rgb(0, 0, 0); /* Couleur noire pour les liens */
  font-weight: 500; /* Police semi-grasse */
  font-family: 'Arial', sans-serif; /* Police Arial ou sans-serif */
  transition: color 0.2s ease; /* Transition douce pour la couleur */
  text-decoration: none; /* Supprime le soulignement */
}

/* Effet hover sur les liens de navigation */
.header-container nav a:hover {
  color: #5a5a5a; /* Couleur grise au survol */
}

/* ========================================
   MENU DES CATÉGORIES
   ======================================== */

/* Styles pour le conteneur des catégories */
.categories-container {
  display: flex; /* Utilise Flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  gap: 10px; /* Espace entre les éléments */
  padding: 10px; /* Espacement interne */
  background-color: rgba(238, 224, 224, 1); /* Fond beige clair */
  border-radius: 8px; /* Coins arrondis */
  min-width: 200px; /* Largeur minimale */
}

/* Conteneur des boutons de catégories */
.categories-buttons {
  display: flex; /* Utilise Flexbox */
  flex-wrap: wrap; /* Permet le retour à la ligne */
  gap: 8px; /* Espace entre les boutons */
  justify-content: center; /* Centre horizontalement */
  background-color: rgba(238, 224, 224, 1); /* Fond beige clair */
  border: 1px solid rgba(238, 224, 224, 1); /* Bordure de même couleur */
}

/* Style des boutons de catégories */
.categories-buttons .btn {
  font-size: 0.8rem; /* Police plus petite */
  padding: 4px 8px; /* Espacement interne réduit */
  border-radius: 4px; /* Coins légèrement arrondis */
  text-decoration: none; /* Supprime le soulignement */
  transition: all 0.2s ease; /* Transition douce pour tous les changements */
}

/* Effet hover sur les boutons de catégories */
.categories-buttons .btn:hover {
  transform: translateY(-1px); /* Monte légèrement le bouton */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajoute une ombre */
  background-color: rgba(206, 198, 198, 0.8); /* Fond gris clair au hover */
  border: #5a5a5a; /* Bordure grise */
}

/* ========================================
   MENUS DÉROULANTS
   ======================================== */

/* Styles pour le menu déroulant des catégories */
.header-container nav .dropdown {
  position: relative; /* Position relative pour le menu déroulant */
}

/* Bouton d'ouverture du menu déroulant */
.header-container nav .dropdown-toggle {
  display: flex; /* Utilise Flexbox */
  align-items: center; /* Centre verticalement */
  gap: 5px; /* Espace entre le texte et l'icône */
}

/* Icône du menu déroulant avec animation */
.header-container nav .dropdown-toggle i {
  font-size: 12px; /* Taille de l'icône */
  transition: transform 0.2s ease; /* Transition douce pour la rotation */
}

/* Rotation de l'icône au hover */
.header-container nav .dropdown:hover .dropdown-toggle i {
  transform: rotate(180deg); /* Tourne l'icône de 180 degrés */
}

/* Menu déroulant avec style moderne */
.header-container nav .dropdown-menu {
  background-color: white; /* Fond blanc */
  border: 1px solid #ddd; /* Bordure grise claire */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre portée */
  min-width: 200px; /* Largeur minimale */
  padding: 8px 0; /* Espacement vertical */
  margin-top: 5px; /* Marge au-dessus */
}

/* Éléments du menu déroulant */
.header-container nav .dropdown-item {
  padding: 8px 20px; /* Espacement interne */
  color: #333; /* Couleur de texte sombre */
  text-decoration: none; /* Supprime le soulignement */
  display: block; /* Affichage en bloc */
  transition: background-color 0.2s ease; /* Transition douce pour le fond */
}

/* Effet hover sur les éléments du menu déroulant */
.header-container nav .dropdown-item:hover {
  background-color: #f8f9fa; /* Fond gris très clair au hover */
  color: #5a5a5a; /* Couleur de texte grise */
}

/* ========================================
   ICÔNES ET ACTIONS
   ======================================== */

/* Liens des icônes sans soulignement */
.icon-header a {
  text-decoration: none; /* Supprime le soulignement */
}

/* Conteneur des icônes avec alignement */
.icon-header {
   grid-column: 3; /* Place dans la 3e colonne du grid */
  justify-self: end; /* Aligne à droite dans la colonne */
  display: flex;
  align-items: center; /* Corrige "left" en "center" */
  gap: 15px;
}

/* Style commun à toutes les icônes Flaticon */
.icon-header i {
  font-size: 20px; /* Taille des icônes */
  color: black; /* Couleur noire */
  transition: color 0.2s ease, transform 0.2s ease; /* Transitions douces */
  text-decoration: none; /* Supprime le soulignement */
}

/* Effet hover sur les icônes */
.icon-header i:hover {
  color: #5a5a5a; /* Couleur grise au hover */
  transform: scale(1.1); /* Agrandit légèrement l'icône */
}

/* ========================================
   BOUTON MOBILE
   ======================================== */

/* Bouton de navigation mobile (hamburger) */
.nav-toggle {
  display: none; /* Caché par défaut sur desktop */
  background: transparent; /* Fond transparent */
  border: 0; /* Pas de bordure */
  padding: 6px; /* Espacement interne */
  cursor: pointer; /* Curseur pointer */
}

/* Barres du bouton hamburger */
.nav-toggle-bar {
  display: block; /* Affichage en bloc */
  width: 22px; /* Largeur des barres */
  height: 2px; /* Hauteur des barres */
  background: #000; /* Couleur noire */
  margin: 4px 0; /* Marge entre les barres */
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Adaptations pour les écrans de taille moyenne */
@media (max-width: 992px) {
  .header-container {
    
  max-width: 100%; 
  
    grid-template-columns: auto 1fr auto; /* Ajuste la grille pour les tablettes */
  }
  .header-actions{
    grid-column: 3; /* Place dans la 3e colonne du grid */
    justify-self: end; /* Aligne à droite dans la colonne */
    display: flex;
    align-items: center; /* Corrige "left" en "center" */
    gap: 15px;
  }
}

/* Adaptations pour les écrans mobiles */
@media (max-width: 768px) {
  /* Navigation mobile avec position absolue */
  nav.site-nav {
    position: absolute; /* Position absolue pour le menu mobile */
    top: 100%; /* Place sous le header */
    left: 0; /* Aligne à gauche */
    right: 0; /* Étend sur toute la largeur */
    background: rgba(238, 224, 224, 1); /* Fond beige clair */
    padding: 12px 20px 16px; /* Espacement interne */
    display: none; /* Caché par défaut */
    z-index: 1000; /* Au-dessus des autres éléments */
  }

  /* Affichage du menu mobile quand ouvert */
  nav.site-nav.is-open {
    display: block; /* Affiche le menu */
  }

  /* Menu vertical sur mobile */
  .header-container nav ul {
    flex-direction: column; /* Organise verticalement */
    align-items: flex-start; /* Aligne à gauche */
    gap: 12px; /* Espace entre les éléments */
  }

  /* Ajustement des catégories sur mobile */
  .categories-container {
    margin-top: 8px; /* Marge au-dessus */
    justify-content: flex-start; /* Aligne à gauche */
  }

  /* Affichage du bouton hamburger sur mobile */
  .nav-toggle { 
    display: inline-block; /* Affiche le bouton sur mobile */
  }
}