/* Importation de la police Montserrat */
@import url("../../shared/fonts/montserrat.css");

/* Reset et styles de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables globales */
:root {
  --primary-color: #c21217;
  --secondary-color: #333333;
  --tertiary-color: #444444;
  --quarternaire-color: #555555;
  --background-color: #1e1e1e;
  --text-color: #ffffff;
  --font-size-small: 13px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
  --spacing-small: 10px;
  --spacing-medium: 50px;
  --spacing-large: 40px;
  --black: #000000;
  --gradient-primary: linear-gradient(135deg, #c21217 0%, #c0392b 100%);
  --gradient-secondary: linear-gradient(135deg, #1e1e1e 0%, #555555 100%);
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.2);
  --border-radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Styles de base */
body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--secondary-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* Titres */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: var(--spacing-medium);
}

/* Liens */
a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-color);
}

/* Boutons */
.btn {
  display: inline-block;
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: darken(var(--primary-color), 10%);
}

/* Conteneurs */
.content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--spacing-medium);
}

/* Sections */
section {
  padding: var(--spacing-large) 0;
}

/* Utilitaires */
.text-center {
  text-align: center;
}
.mb-1 {
  margin-bottom: var(--spacing-small);
}
.mb-2 {
  margin-bottom: var(--spacing-medium);
}
.mb-3 {
  margin-bottom: var(--spacing-large);
}
.mt-1 {
  margin-top: var(--spacing-small);
}
.mt-2 {
  margin-top: var(--spacing-medium);
}
.mt-3 {
  margin-top: var(--spacing-large);
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}


/* Navbar - Hauteur réduite */
.navbar {
  background-color: var(--secondary-color);
  padding: 8px 0; /* Réduit de 5px à 8px */
  height: 75px; /* Réduit de 70px à 55px */
  border-bottom: 1px solid transparent; /* Bordure transparente par défaut */
  transition: all 0.3s ease-in-out; /* Transition smooth pour tous les changements */
}

.navbar.border-bottom-red {
  border-bottom-color: #FFFFFF; /* Change seulement la couleur */
}

.navbar.change-border-bottom {
  border-bottom-color: var(--primary-color); /* Change seulement la couleur */
}

.navbar > .container {
  max-width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* Assure que le container prend toute la hauteur */
}

.navbar-brand {
  margin-right: 20px;
}

.navbar-brand img {
  height: 40px; /* Réduit de 47px à 40px */
  margin-left: 50px;
  width: auto;
}

.navbar-dark .navbar-nav {
  margin-left: auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
  height: 100%; /* Assure l'alignement vertical */
}

.dropdown-toggle {
  position: relative;
}

.navbar-dark .navbar-nav .nav-item {
  display: flex;
  align-items: center;
  height: 100%; /* Assure l'alignement vertical */
}

.navbar-dark .navbar-nav .nav-link {
  position: relative;
  color: var(--text-color);
  font-weight: 500;
  margin: 0 5px;
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 8px; /* Ajuste le padding vertical */
  display: flex;
  align-items: center;
  height: 100%;
}

.language-dropdown {
  position: relative;
}

.language-dropdown .dropdown-bg {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: #f8f8f8;
  border-radius: 9px;
  box-shadow: var(--shadow-medium);
  z-index: 1050;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  min-width: 50px;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary-color);
  transition: 0.2s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--primary-color);
}

.badge {
  font-size: 0.6rem;
  transform: translate(-50%, -30%) !important;
}

/* Styles pour les icônes de navigation */
.navbar-icons {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-icon {
  color: var(--text-color);
  font-size: 16px;
  margin-left: 15px;
  padding: 8px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-icon:hover {
  color: var(--primary-color);
}

.no-bootstrap-style {
  all: unset;
  cursor: pointer;
  margin: 10px;
  color: var(--primary-color);
}

/* NOUVEAUX STYLES POUR LES ICÔNES MOBILES DANS LA NAVBAR */
.mobile-navbar-icons {
  display: none;
  align-items: center;
  gap: 15px;
  margin-right: 15px;
}

/* Sélecteur de langue mobile dans la navbar */
.mobile-language-toggle {
  position: relative;
  border-radius: 6px;
  padding-right: 15px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  border: 1px solid transparent;
}

.mobile-lang-text {
  color: var(--text-color);
  font-size: 13px !important;
  font-weight: 500;
  text-transform: uppercase;
}

.mobile-lang-arrow {
  color: var(--text-color);
  font-size: 10px;
  transition: transform 0.2s ease;
}

.mobile-language-toggle.active .mobile-lang-arrow {
  transform: rotate(180deg);
}

/* Dropdown langue mobile dans la navbar */
.mobile-language-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: #f8f8f8;
  border-radius: 6px;
  box-shadow: var(--shadow-medium);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  min-width: 50px;
}

.mobile-language-dropdown.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-language-dropdown.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-language-dropdown form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-lang-option {
  background: none;
  border: none;
  color: #222222;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.mobile-lang-option:hover {
  background: var(--primary-color);
  color: white;
}

/* Icône de recherche mobile dans la navbar */
.mobile-search-icon {
  background: transparent;
  border: none;
  color: red;
  padding-right: 10px !important;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-search-icon:hover {
  background: var(--quarternaire-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.mobile-search-icon i {
  font-size: 15px !important;
}

/* Styles de base pour le toggle button */
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 4px 8px;
  margin-right: 15px;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar-toggler-icon {
  background-image: none;
  width: 25px;
  height: 2px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: var(--transition);
  position: relative;
  display: block;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: var(--transition);
  left: 0;
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  top: 8px;
}

.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after {
  background-color: var(--primary-color);
}

/* Animation du hamburger en X */
.navbar-toggler .navbar-toggler-icon {
  transform: rotate(0deg);
}

.navbar-toggler .navbar-toggler-icon::before {
  transform: rotate(0deg);
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  transform: rotate(0deg);
  top: 8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(90deg);
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(90deg);
  top: 0;
}

/* Styles pour le collapse navbar */
.navbar-collapse {
  margin-top: 10px;
  z-index: 1;
}

/* Dropdown styles */
.navbar-dark .navbar-nav .dropdown-menu {
  background-color: var(--tertiary-color);
  border: none;
  border-radius: 0;
  margin-top: 5px;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--text-color);
  font-size: 12px;
  padding: 5px 10px;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: var(--text-color);
  opacity: 0.2;
}

/* Search Container - Style moderne inspiré de l'image */
.search-container {
  position: fixed;
  top: 75px; /* Ajusté à la hauteur du navbar */
  left: 0;
  width: 100%;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px 0;
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  border-bottom: 2px solid var(--primary-color);
}

.search-container.active {
  transform: translateY(0);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Container de recherche avec style moderne */
.search-container .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Groupe d'input de recherche */
.search-input-group {
  position: relative;
  background: var(--secondary-color);
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.search-input-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 8px 25px rgba(194, 18, 23, 0.3);
}

/* Input de recherche moderne */
.search-input {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  border: none;
  background: transparent;
  color: var(--text-color);
  outline: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

/* Bouton de recherche moderne */
.search-submit-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gradient-primary);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(194, 18, 23, 0.3);
}

.search-submit-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(194, 18, 23, 0.4);
}

.search-submit-btn i {
  font-size: 16px;
}

/* Conteneur des résultats de recherche - Style moderne */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--secondary-color);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--tertiary-color);
}

.search-results.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Scrollbar personnalisée pour les résultats */
.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: var(--tertiary-color);
  border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: #a00f14;
}

/* Items de résultats de recherche - Style carte moderne */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s ease;
  background: transparent;
  position: relative;
}

.search-result-item:hover {
  background: var(--tertiary-color);
  color: var(--text-color);
  text-decoration: none;
  transform: translateX(4px);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:first-child {
  border-radius: 16px 16px 0 0;
}

.search-result-item:last-child {
  border-radius: 0 0 16px 16px;
}

/* Image du produit dans les résultats */
.search-result-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 16px;
  flex-shrink: 0;
  border: 1px solid var(--tertiary-color);
  background: var(--tertiary-color);
}

/* Contenu du résultat */
.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
  margin-bottom: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-reference {
  font-size: 12px;
  color: var(--primary-color);
  margin-bottom: 4px;
  font-weight: 500;
  font-family: monospace;
  background: rgba(194, 18, 23, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.search-result-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* États de chargement et vide */
.search-loading,
.search-no-results {
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 400;
}

.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.search-loading i {
  color: var(--primary-color);
  font-size: 18px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.search-no-results {
  color: rgba(255, 255, 255, 0.5);
}

/* Bouton de fermeture (pour mobile plein écran) */
.search-close-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.search-close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

/* Ajustements responsive */
@media (max-width: 768px) {
  .search-container {
    top: 70px;
    padding: 16px 0;
  }
  
  .search-container .container {
    padding: 0 16px;
  }
  
  .search-input {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .search-submit-btn {
    width: 40px;
    height: 40px;
    right: 6px;
  }
  
  .search-submit-btn i {
    font-size: 14px;
  }
  
  .search-results {
    border-radius: 12px;
    max-height: 350px;
  }
  
  .search-result-item {
    padding: 14px 16px;
  }
  
  .search-result-image {
    width: 45px;
    height: 45px;
    margin-right: 14px;
  }
  
  .search-result-name {
    font-size: 14px;
  }
  
  .search-result-reference {
    font-size: 11px;
  }
  
  .search-result-description {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .search-container {
    top: 60px;
    padding: 12px 0;
  }
  
  .search-container .container {
    padding: 0 12px;
  }
  
  .search-input-group {
    border-radius: 25px;
  }
  
  .search-input {
    padding: 12px 18px;
    font-size: 14px;
  }
  
  .search-submit-btn {
    width: 36px;
    height: 36px;
    right: 4px;
  }
  
  .search-submit-btn i {
    font-size: 13px;
  }
  
  .search-results {
    border-radius: 10px;
    max-height: 300px;
  }
  
  .search-result-item {
    padding: 12px 14px;
  }
  
  .search-result-image {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .search-loading,
  .search-no-results {
    padding: 24px 16px;
    font-size: 14px;
  }
}

/* Styles pour la recherche mobile plein écran */
@media (max-width: 991px) {
  /* Version mobile plein écran */
  .search-results.mobile-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    border-radius: 0;
    max-height: none;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  
  .search-results.mobile-fullscreen.show {
    transform: translateY(0);
  }
  
  .search-results.mobile-fullscreen .search-close-btn {
    display: flex;
  }
  
  .search-results.mobile-fullscreen .search-result-item {
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
  }
  
  .search-results.mobile-fullscreen .search-result-item:hover {
    background: var(--tertiary-color);
    transform: none;
  }
}

/* Animation d'apparition des résultats */
.search-result-item {
  animation: slideInResult 0.3s ease-out forwards;
  opacity: 0;
}

.search-result-item:nth-child(1) { animation-delay: 0.05s; }
.search-result-item:nth-child(2) { animation-delay: 0.1s; }
.search-result-item:nth-child(3) { animation-delay: 0.15s; }
.search-result-item:nth-child(4) { animation-delay: 0.2s; }
.search-result-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInResult {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus state pour l'accessibilité */
.search-input:focus {
  outline: none;
}

.search-result-item:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* Style pour les résultats vides avec animation */
.search-no-results {
  position: relative;
  overflow: hidden;
}

.search-no-results::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(194, 18, 23, 0.1), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Amélioration de la recherche avec indicateur de statut */
.search-status-indicator {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.search-input:focus ~ .search-status-indicator,
.search-input:not(:placeholder-shown) ~ .search-status-indicator {
  opacity: 1;
}

/* Mega Menu - Ajustement de la position */
.mega-menu {
  position: fixed;
  top: 55px; /* Ajusté à la nouvelle hauteur du navbar */
  left: 0;
  width: 100%;
  background-color: var(--tertiary-color);
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
  z-index: 1000;
  padding: 20px 0 100px 0;
  border-top: 1px solid var(--primary-color); /* Bordure supérieure pour la continuité */
}

.mega-menu.show {
  transform: translateY(0);
}

.mega-menu .container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.mega-menu-column {
  flex: 1;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mega-menu h3 {
  color: var(--text-color);
  font-size: 17px;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-top: 15px;
  text-align: center; /* Centre le titre */
}

.mega-menu h3::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -6%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background-color: var(--primary-color);
}

.mega-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mega-menu li {
  margin-bottom: 4px;
  text-align: left;
}

.mega-menu a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  padding: 5px 10px; /* Ajoute un padding pour une meilleure zone de clic */
  transition: color 0.3s ease; /* Transition douce pour le hover */
}

.mega-menu a:hover {
  color: var(--primary-color);
}

/* Footer */
.focus-footer {
  background-color: var(--secondary-color);
  color: var(--text-color);
  padding: 40px 0 20px;
  font-family: "Montserrat", sans-serif;
}

.footer-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
}

.footer-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--text-color);
}

.focus-footer h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.focus-footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.focus-footer ul li {
  margin-bottom: 1px;
}

.focus-footer ul li:last-child {
  padding-right: 30px;
}

.focus-footer ul li a,
.focus-footer p {
  color: var(--text-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
  transition: 0.2s ease-in-out;
}

.focus-footer ul li a:hover {
  color: var(--primary-color);
}

.social-icons {
  display: flex;
  gap: 20px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--text-color);
  padding: 5px 10px;
  border-radius: 10px;
  color: var(--tertiary-color);
  font-size: 20px;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

.social-icons a:hover {
  background: #3b5998;
  color: var(--text-color);
}

.social-icons a:last-child:hover {
  background: #833ab4;
  color: var(--text-color);
}

.social-icons a i {
  font-size: 27px;
}

.copyright {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 300;
}

.navbar-icons {
  margin-left: 8px;
}

.navbar-icons .nav-icon {
  display: inline-block;
  margin-left: 15px;
}

.navbar-icons .nav-icon:last-child {
  margin-right: 15px;
}

/* Styles pour le dropdown de profil */

/* Icône de profil */
.profile-dropdown {
  position: relative;
}

.profile-icon {
  display: inline-block;
  color: var(--text-color);
  font-size: 20px;
  transition: color 0.3s ease;
  text-decoration: none;
}

.profile-icon:hover {
  color: var(--primary-color);
}

.profile-icon i {
  font-size: 22px;
}

/* Menu dropdown du profil */
.profile-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: auto !important;
  left: auto !important;
  transform: translateX(
    -80%
  ) !important; /* Décale le dropdown vers la gauche */
  background-color: var(--tertiary-color);
  border: 1px solid var(--quarternaire-color);
  border-radius: 8px;
  min-width: 200px;
  box-shadow: var(--shadow-medium);
  z-index: 1050;
  margin-top: 8px;
}

.profile-dropdown-menu .dropdown-header {
  padding: 15px 20px 10px;
  border-bottom: 1px solid var(--quarternaire-color);
  background-color: var(--secondary-color);
  border-radius: 8px 8px 0 0;
}

.profile-dropdown-menu .user-name {
  display: block;
  color: var(--text-color);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

.profile-dropdown-menu .dropdown-item {
  padding: 12px 20px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border: none;
  background: none;
}

.profile-dropdown-menu .dropdown-item:hover {
  background-color: var(--quarternaire-color);
  color: var(--primary-color);
  transform: translateX(5px);
}

.profile-dropdown-menu .dropdown-item.text-danger {
  color: #dc3545;
}

.profile-dropdown-menu .dropdown-item.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.profile-dropdown-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  margin-right: 8px;
}

.profile-dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--quarternaire-color);
  margin: 0;
  opacity: 0.5;
}

/* Responsive pour le dropdown de profil */
@media (max-width: 576px) {
  .profile-dropdown-menu {
    min-width: 200px !important;
    transform: translateX(-90%) !important; /* Plus de décalage sur mobile */
  }

  .profile-dropdown-menu .dropdown-item {
    padding: 10px 15px;
    font-size: 13px;
  }

  .profile-dropdown-menu .dropdown-header {
    padding: 12px 15px 8px;
  }

  .profile-dropdown-menu .user-name {
    font-size: 14px;
  }

  .profile-dropdown-menu .user-email {
    font-size: 11px;
  }
}

/* Animation d'apparition du dropdown */
.profile-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu toggle button - REMPLACER uniquement la partie .navbar-toggler */
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 8px;
  margin-right: 15px;
  display: none;
}

.navbar-toggler .menu-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* NOUVEAUX STYLES POUR LE MENU MOBILE */

/* Overlay pour fermer le menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Menu mobile principal */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 250px;
  height: 100vh;
  z-index: 9999;
  background: #fff;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
  right: 0;
}

/* Header du menu mobile */
.mobile-menu-header {
  padding: 30px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.mobile-menu-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}

/* Contenu du menu mobile */
.mobile-menu-content {
  padding: 15px;
  background: #F8F8F8;
}

/* Navigation mobile */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  color: #222222;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-nav-link span {
  font-size: 13px;
}

.submenu-arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.mobile-nav-item.active .submenu-arrow {
  transform: rotate(180deg);
}

/* Sous-menu mobile */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  background: #F8F8F8;
  transition: max-height 0.3s ease;
}

.mobile-submenu.active {
  max-height: 500px;
}

.mobile-submenu-section {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-submenu-title {
  color: #222222;
  font-size: 10px;
  font-weight: 500;
  padding-left: 10px;
  margin-bottom: 5px 15px;
  text-transform: uppercase;
}

.mobile-submenu-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-submenu-item {
  color: #222222;
  text-decoration: none;
  font-size: 10px;
  padding: 8px 30px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.mobile-submenu-item:hover {
  color: var(--primary-color);
}

/* Actions utilisateur mobile */
.mobile-user-actions {
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--quarternaire-color);
}

.mobile-action-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-action-link,
.mobile-search-toggle {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  gap: 15px;
  transition: all 0.2s ease;
}

.mobile-action-link span {
  color: #222222;
}

.mobile-action-link i{
  color: #222222;
}


.mobile-action-link:hover,
.mobile-search-toggle:hover {
  background: var(--tertiary-color);
  color: var(--primary-color);
}

.mobile-cart-badge {
  background: var(--primary-color);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
}

/* Profil utilisateur mobile */
.mobile-user-profile {
  background: var(--tertiary-color);
}

.mobile-user-info {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  gap: 15px;
  color: var(--text-color);
  font-weight: 600;
  border-bottom: 1px solid var(--quarternaire-color);
}

.mobile-user-menu {
  padding: 10px 0;
}

.mobile-user-link {J'ai rencontré un probleme dans ce projet au niveau de mes filtres de produts qui s'affiche sur le frontoffice de mon site @products.html le principe est que chaque categorie selectionné on a de maniere dynamique toutes les variantes de cette categorie qui seront listé comme option de filtre avec les differentes valeurs de ces variantes pour lesquels ils existe des produits donc ça se fait de maniere dynamque mais actuellement dans mes filtres j'ai un probleme avvec la variantes couleurs je vois cette variante se repeter deux fois quelques soit la categorie selectionné je vois une variante la meilleure variante qui est vraiemrnt censé s'afficher pour une categorie  selectionnée avec 
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 55px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px;
  gap: 12px;
  transition: all 0.2s ease;
}

.mobile-user-link:hover {
  background: var(--quarternaire-color);
  color: var(--primary-color);
}

.mobile-user-link.logout {
  color: #dc3545;
}

/* Recherche mobile */
.mobile-search-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--secondary-color);
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.mobile-search-container.active {
  transform: translateY(0);
}

.mobile-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--tertiary-color);
  border-bottom: 1px solid var(--quarternaire-color);
}

.mobile-search-header h3 {
  color: var(--text-color);
  font-size: 18px;
  margin: 0;
}

.mobile-search-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}

.mobile-search-form {
  padding: 20px;
}

.mobile-search-input-group {
  display: flex;
  background: var(--tertiary-color);
  border-radius: 8px;
  overflow: hidden;
}

.mobile-search-input {
  flex: 1;
  padding: 15px;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 16px;
}

.mobile-search-input::placeholder {
  color: #999;
}

.mobile-search-submit {
  background: var(--primary-color);
  border: none;
  color: white;
  padding: 15px 20px;
  cursor: pointer;
}

/* Messages Pop-up CSS */

/* Container principal des messages */
.messages-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
  width: 100%;
}

/* Style de chaque message */
.alert-message {
  margin-bottom: 15px;
  padding: 18px 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  transition: var(--transition);
}

/* Animation d'apparition */
.alert-message.show {
  transform: translateX(0);
  opacity: 1;
}

/* Animation de disparition */
.alert-message.hide {
  transform: translateX(100%);
  opacity: 0;
}

/* Barre de progression */
.alert-message::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  animation: progressBar 5s linear forwards;
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Types de messages */
.alert-message {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e9ecef;
}

.alert-success { border-left: 4px solid #20c997; }
.alert-error, .alert-danger { border-left: 4px solid #dc3545; }
.alert-warning { border-left: 4px solid #fd7e14; color: #333; }
.alert-info { border-left: 4px solid #0dcaf0; }
.alert-debug { border-left: 4px solid #6c757d; }

/* Icônes */
.alert-icon {
  display: inline-block;
  margin-right: 12px;
  font-size: 18px;
  width: 20px;
  text-align: center;
}

/* Bouton fermer */
.alert-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.alert-close:hover {
  opacity: 1;
}

/* le style pour les erreurs des formulaires */

.form-control.error {
  border-color: #dc3545;
  background-color: #fef5f5;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.non-field-errors {
  background-color: #f8d7da;
  color: #721c24;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  border: 1px solid #f5c6cb;
}

.field-errors {
  color: #dc3545;
}

.non-field-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* htmx pour le chargement des formulaire */

/* Indicateur de chargement HTMX */
.htmx-request {
  opacity: 0.5;
  pointer-events: none;
}

.form-container {
  z-index: 1000;
}

/* Animation pour l'apparition des formulaires */
.form-container {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CSS STYLE POUR LA SECTION MESSAGE DEMANDE DE CODE ACCESS */

.success-container {
  text-align: center;
  padding: var(--spacing-large) var(--spacing-medium);
  max-width: 500px;
  margin: 0 auto;
  background: var(--background-color);
  color: var(--text-color);
}

.success-icon {
  margin-bottom: var(--spacing-medium);
}

.success-icon i {
  font-size: 64px;
  color: var(--primary-color);
  animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-content h3 {
  color: var(--text-color);
  font-size: 24px;
  margin-bottom: var(--spacing-small);
  font-weight: 600;
}

.success-content > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-medium);
  margin-bottom: 24px;
}

.success-details {
  background: var(--secondary-color);
  border: 1px solid var(--tertiary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  margin-bottom: 24px;
  text-align: left;
  box-shadow: var(--shadow-light);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.detail-value {
  color: var(--text-color);
  font-size: 14px;
  font-family: monospace;
  background: var(--tertiary-color);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--quarternaire-color);
}

.success-info {
  background: rgba(194, 18, 23, 0.1);
  border: 1px solid rgba(194, 18, 23, 0.3);
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  margin-bottom: 24px;
  text-align: left;
  box-shadow: var(--shadow-light);
}

.success-info h4 {
  color: var(--primary-color);
  font-size: var(--font-size-medium);
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.success-info ul {
  margin: 0;
  padding-left: var(--spacing-medium);
  color: var(--text-color);
}

.success-info li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.success-info li:last-child {
  margin-bottom: 0;
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
  padding: 12px var(--spacing-medium);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  text-decoration: none;
}

.primary-btn {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-medium);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(194, 18, 23, 0.4);
}

.secondary-btn {
  background: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--tertiary-color);
  box-shadow: var(--shadow-light);
}

.secondary-btn:hover {
  background: var(--tertiary-color);
  border-color: var(--quarternaire-color);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .success-actions {
    flex-direction: column;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .detail-item {
    flex-direction: column;
  }
}

/* Styles pour la recherche en temps réel */
.search-results {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2a2a2a;
  z-index: 9999;
  display: none;
  overflow-y: auto;
}

/* L'input reste à sa place, seuls les résultats changent */
.search-results.show ~ body {
  overflow: hidden;
}

.search-results.show {
  display: block;
}

/* Scrollbar personnalisée rouge */
.search-results::-webkit-scrollbar {
  width: 10px;
}

.search-results::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.search-results::-webkit-scrollbar-thumb {
  background: #c21217;
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: #a00f14;
}

/* Pour Firefox */
.search-results {
  scrollbar-width: thin;
  scrollbar-color: #c21217 #f1f1f1;
}

/* Conteneur des résultats */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #444;
  text-decoration: none;
  color: white;
  transition: background-color 0.2s ease;
  min-height: 80px;
  background: transparent;
}

.search-result-item:hover {
  background-color: #3a3a3a;
  text-decoration: none;
  color: white;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 16px;
  flex-shrink: 0;
  border: 1px solid #555;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-weight: 600;
  font-size: 16px;
  color: white;
  margin-bottom: 4px;
  line-height: 1.3;
}

.search-result-reference {
  font-size: 13px;
  color: #c21217;
  margin-bottom: 6px;
  font-weight: 500;
}

.search-result-description {
  font-size: 13px;
  color: #ccc;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-loading,
.search-no-results {
  padding: 40px 20px;
  text-align: center;
  color: #ccc;
  font-size: 16px;
}

.search-loading i {
  margin-right: 12px;
  color: var(--secondary-color);
  font-size: 18px;
}

/* Bouton de fermeture pour la recherche plein écran */
.search-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;
  transition: background-color 0.2s ease;
}

.search-close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* Styles pour desktop - recherche dans un dropdown */
@media (min-width: 992px) {
  .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    z-index: 1000;
  }
  
  .search-result-item {
    padding: 12px 16px;
    min-height: 70px;
  }
  
  .search-result-image {
    width: 50px;
    height: 50px;
    margin-right: 12px;
  }
  
  .search-result-name {
    font-size: 14px;
  }
  
  .search-result-reference,
  .search-result-description {
    font-size: 12px;
  }
  
  .search-loading,
  .search-no-results {
    padding: 20px 16px;
    font-size: 14px;
  }
  
  .search-close-btn {
    display: none;
  }
}

/* RESPONSIVE */

/* Amélioration de la responsivité générale */

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .navbar-toggler {
    display: none;
  }
}

/* Point d'arrêt pour les écrans moyens */
@media (max-width: 991px) {
  /* Afficher le bouton toggle mobile et les icônes mobiles */
  .navbar-toggler {
    display: block;
  }
  
  .mobile-navbar-icons {
    display: flex;
  }
  
  /* Cacher le navbar desktop sur mobile */
  .navbar-collapse {
    display: none !important;
  }
  
  /* Cacher les icônes desktop sur mobile */
  .navbar-icons {
    display: none !important;
  }
  
  /* Cacher la recherche desktop sur mobile */
  .search-container {
    display: none !important;
  }
  
  /* Cacher le mega-menu desktop sur mobile */
  .mega-menu {
    display: none !important;
  }

  .navbar-brand img {
    height: 40px;
    margin-left: 20px;
  }

  .footer-content {
    flex-wrap: wrap;
  }
}

/* Point d'arrêt pour les tablettes */
@media (max-width: 768px) {
  .navbar {
    height: 80px;
    padding: 5px 0;
  }

  .navbar-brand img {
    height: 35px;
    margin-left: 10px;
  }

  .navbar-toggler {
    padding: 6px 10px;
    margin-right: 10px;
  }

  .footer-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .social-icons {
    gap: 10px;
  }

  .social-icons a {
    padding: 4px 8px;
  }

  .social-icons a i {
    font-size: 22px;
  }
}

/* Point d'arrêt pour les mobiles */
@media (max-width: 576px) {
  :root {
    --spacing-medium: 15px;
    --spacing-large: 30px;
  }

  .navbar {
    height: 70px;
    padding: 5px 0;
  }

  .navbar-brand img {
    height: 30px;
    margin-left: 5px;
  }

  .navbar > .container {
    padding: 0 10px;
  }

  .navbar-dark .navbar-toggler {
    padding: 4px 8px;
    margin-right: 5px;
  }

  .mobile-navbar-icons {
    gap: 10px;
    margin-right: 10px;
  }

  .mobile-language-toggle,
  .mobile-search-icon {
    padding: 6px 8px;
  }

  .mobile-lang-text {
    font-size: 11px;
  }

  .mobile-search-icon i {
    font-size: 13px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .focus-footer {
    padding: 30px 0 15px;
  }

  .focus-footer h3 {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .copyright {
    font-size: 10px;
  }
}

/* Point d'arrêt pour les petits mobiles */
@media (max-width: 375px) {
  .navbar {
    height: 60px;
  }

  .navbar-brand img {
    height: 25px;
  }

  .mobile-navbar-icons {
    gap: 8px;
    margin-right: 8px;
  }

  .mobile-language-toggle,
  .mobile-search-icon {
    padding: 5px 6px;
  }

  .mobile-lang-text {
    font-size: 10px;
  }

  .mobile-search-icon i {
    font-size: 12px;
  }

  .social-icons a {
    padding: 3px 6px;
  }

  .social-icons a i {
    font-size: 18px;
  }

  .navbar-toggler {
    padding: 3px 6px;
    margin-right: 3px;
  }
}

/* Amélioration du menu de navigation sur mobile */
@media (max-width: 576px) {
  .mobile-menu {
    width: 90%;
  }
  
  .mobile-nav-link {
    padding: 15px 15px;
    font-size: 15px;
  }
  
  .mobile-submenu-section {
    padding: 12px 15px;
  }
}

/* Animation pour l'apparition du menu */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour les messages */
@media (max-width: 768px) {
  .messages-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .alert-message {
    padding: 15px 18px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .messages-container {
    top: 5px;
    right: 5px;
    left: 5px;
  }

  .alert-message {
    padding: 12px 15px;
    font-size: 12px;
  }
}