/* Header global */
header {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Logo */
header .navbar-brand img {
    height: 50px;
}

/* Barre de recherche */
header form {
    flex-grow: 1;
}

header form input,
header form select {
    height: 38px;
}

/* Icônes (Favoris, Panier, Compte) */
header .icons a {
    text-align: center;
    color: #333;
    font-size: 12px;
}

header .icons a img {
    display: block;
    margin: 0 auto 2px;
}

/* Badge du panier */
header .icons .badge {
    position: absolute;
    top: -5px;
    right: -10px;
    font-size: 10px;
}


/* Responsive recherche */ 
@media (max-width: 768px) { 
    .header-search { flex-direction: column; } 
    .header-search .category-select { max-width: 100% !important; margin-bottom: 10px; } 
    .header-search .input-group { width: 100%; } } 
@media (max-width: 576px) { 
    .dropdown-menu-end { position: absolute !important; right: 0 !important; left: auto !important; } } 
    
/* Burger personnalisé */ 
.navbar-toggler { border: none; background: transparent; padding: 0.25rem 0.5rem; } 
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; background: none; position: relative; } 
.navbar-toggler-icon::before { content: "☰"; font-size: 1.5rem; color: #0d6efd; }


/* Personnalisation du bouton burger */
.navbar-toggler {
  border: none;              /* pas de bordure autour */
  background: transparent;   /* fond transparent */
  padding: 0.25rem 0.5rem;   /* un peu d'espace */
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: none;          /* on enlève l'icône par défaut */
  position: relative;
}

.navbar-toggler-icon::before {
  content: "☰";              /* symbole burger */
  font-size: 1.5rem;
  color: #0d6efd;            /* bleu Bootstrap */
}



/* Menu secondaire (catégories + Top Ventes + Newsletter) */

/* Animation barres horizontales sur les bordures du menu */

/* Menu secondaire (catégories) */ 
header nav { 
    border-top: 2px solid #007bff; /* bleu en haut du menu */ 
    border-bottom: 2px solid #007bff; /* bleu en bas du menu */ }


header nav .nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
    color: #007bff; /* couleur par défaut */
}

/* Barre horizontale haut */
header nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;          /* bordure haute */
    left: 0;
    height: 3px;
    width: 100%;
    background: orange;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
}

/* Barre horizontale bas */
header nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;       /* bordure basse */
    left: 0;
    height: 3px;
    width: 100%;
    background: orange;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: right;
}

/* Survol : activer les barres + texte orange */
header nav .nav-link:hover::before,
header nav .nav-link:hover::after {
    transform: scaleX(1);
}

header nav .nav-link:hover {
    color: orange; /* texte devient orange */
}

/* connexion */ 
.social-btn {
    border-radius: 50px;
    padding: 8px 16px;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.google-btn:hover {
    background: #f8d7da;
}

.facebook-btn:hover {
    background: #dbeafe;
}

/**/
.user-avatar-circle:hover {
    transform: scale(1.05); /* L'avatar grossit légèrement au survol */
    cursor: pointer;
}
.dropdown-item:active {
    background-color: #0d6efd; /* Couleur de clic */
}

@media (max-width: 576px) {
    .dropdown-menu-end {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
    }
}