/* =============================
   FICHIER : mega-menu-mobile-enhanced.css
   DESCRIPTION : Styles améliorés pour le mega menu mobile, adaptés du mega menu desktop
   ============================= */

/* Styles de base pour le mega menu mobile */
.mobile-mega-menu {
  display: none; /* Caché par défaut */
  background: linear-gradient(135deg, #2c3e50, #4a6491); /* Même dégradé que le desktop */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure subtile */
  border-radius: 8px; /* Coins arrondis */
  padding: 15px; /* Espacement intérieur */
  margin-top: 10px; /* Marge en haut */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ombre portée */
  color: white; /* Texte blanc */
  transform: translateX(-100%); /* Hors de l'écran à gauche */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transitions fluides */
  max-width: 100%; /* Largeur maximale */
  overflow: hidden; /* Masquer les débordements */
}

/* État actif du mega menu mobile */
.mobile-mega-menu.active {
  display: block; /* Affiché lorsque actif */
  transform: translateX(0); /* Position normalisée */
}

/* Liste des catégories mobiles */
.categories-mobile {
  display: flex; /* Flexbox */
  flex-direction: column; /* Disposition en colonne */
  gap: 8px; /* Espacement entre catégories */
  list-style: none; /* Pas de puces */
  padding: 0; /* Pas de padding */
  margin: 0 0 15px 0; /* Marge en bas */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Séparateur */
  padding-bottom: 15px; /* Espacement en bas */
}

/* Éléments de catégorie mobile */
.categorie-mobile {
  position: relative; /* Position relative */
  transition: all 0.3s ease; /* Transition fluide */
}

/* Boutons de catégorie mobile */
.categorie-mobile button {
  display: flex; /* Flexbox */
  align-items: center; /* Centrage vertical */
  gap: 10px; /* Espacement entre icône et texte */
  padding: 12px 15px; /* Espacement intérieur */
  background: rgba(255, 255, 255, 0.05); /* Fond légèrement transparent */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure subtile */
  border-radius: 8px; /* Coins arrondis */
  color: white; /* Texte blanc */
  font-weight: 500; /* Texte semi-gras */
  width: 100%; /* Largeur complète */
  text-align: left; /* Texte aligné à gauche */
  cursor: pointer; /* Curseur en pointeur */
  transition: all 0.3s ease; /* Transition fluide */
}

/* Icônes dans les boutons de catégorie */
.categorie-mobile button i {
  font-size: 1.2rem; /* Taille de l'icône */
  color: rgba(255, 255, 255, 0.9); /* Couleur de l'icône */
  background: rgba(255, 255, 255, 0.1); /* Fond de l'icône */
  width: 30px; /* Largeur fixe */
  height: 30px; /* Hauteur fixe */
  display: flex; /* Flexbox */
  align-items: center; /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
  border-radius: 50%; /* Forme circulaire */
  transition: all 0.3s ease; /* Transition fluide */
}

/* État actif et survol des boutons de catégorie */
.categorie-mobile.active button,
.categorie-mobile button:hover {
  background: rgba(255, 255, 255, 0.15); /* Fond plus clair */
  border-color: rgba(255, 255, 255, 0.3); /* Bordure plus visible */
  transform: translateY(-2px); /* Léger déplacement vers le haut */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombre portée */
}

/* État actif et survol des icônes */
.categorie-mobile.active button i,
.categorie-mobile button:hover i {
  transform: scale(1.1); /* Légère augmentation de taille */
  background: rgba(255, 255, 255, 0.2); /* Fond plus clair */
}

/* Conteneur du contenu mega mobile */
.contenu-mega-mobile {
  margin-top: 15px; /* Marge en haut */
}

/* Sections du contenu mega mobile */
.contenu-mega-mobile-section {
  display: none; /* Caché par défaut */
  animation: fadeIn 0.4s ease; /* Animation d'apparition */
}

/* Animation d'apparition */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section active */
.contenu-mega-mobile-section.active {
  display: block; /* Affiché lorsqu'actif */
}

/* Bannières en haut */
.bannieres-haut {
  display: flex; /* Flexbox */
  flex-direction: column; /* Disposition en colonne sur mobile */
  gap: 15px; /* Espacement entre bannières */
  margin-bottom: 20px; /* Marge en bas */
}

/* Bannières individuelles */
.banniere {
  width: 100%; /* Largeur complète */
  height: 180px; /* Hauteur fixe */
  background: rgba(255, 255, 255, 0.05); /* Fond légèrement transparent */
  border-radius: 10px; /* Coins arrondis */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure subtile */
  display: flex; /* Flexbox */
  align-items: center; /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
  font-size: 16px; /* Taille du texte */
  color: rgba(255, 255, 255, 0.7); /* Couleur du texte */
  transition: all 0.4s ease; /* Transition fluide */
  overflow: hidden; /* Masquer les débordements */
  position: relative; /* Position relative */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre portée */
}

/* Effet de survol sur les bannières */
.banniere:hover {
  transform: scale(1.03); /* Légère augmentation de taille */
  border-color: rgba(255, 255, 255, 0.4); /* Bordure plus visible */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Ombre portée plus prononcée */
  color: white; /* Texte blanc */
  cursor: pointer; /* Curseur en pointeur */
}

/* Effet de brillance au survol */
.banniere::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: all 0.7s ease;
  opacity: 0;
}

.banniere:hover::after {
  opacity: 1;
  transform: rotate(30deg) translate(50%, 50%);
}

/* Grille des sections */
.sections-wrapper {
  display: grid; /* Grille */
  grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  gap: 15px; /* Espacement entre sections */
  margin-bottom: 20px; /* Marge en bas */
}

/* Sections individuelles */
.section {
  background: rgba(255, 255, 255, 0.1); /* Fond légèrement transparent */
  border-radius: 10px; /* Coins arrondis */
  padding: 15px; /* Espacement intérieur */
  transition: all 0.3s ease; /* Transition fluide */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure subtile */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre portée */
  display: flex; /* Flexbox */
  flex-direction: column; /* Disposition en colonne */
}

/* Effet de survol sur les sections */
.section:hover {
  transform: translateY(-3px); /* Léger déplacement vers le haut */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Ombre portée plus prononcée */
  background: rgba(255, 255, 255, 0.15); /* Fond plus clair */
  border-color: rgba(255, 255, 255, 0.3); /* Bordure plus visible */
}

/* Titres de section */
.section h3 {
  font-size: 1.1rem; /* Taille du texte */
  margin-bottom: 12px; /* Marge en bas */
  padding-bottom: 10px; /* Espacement en bas */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Séparateur */
  color: white; /* Texte blanc */
  display: flex; /* Flexbox */
  align-items: center; /* Centrage vertical */
  gap: 10px; /* Espacement entre icône et texte */
  font-weight: 600; /* Texte gras */
  letter-spacing: 0.5px; /* Espacement des lettres */
}

/* Icônes dans les titres */
.section h3 i {
  font-size: 1.2rem; /* Taille de l'icône */
  color: rgba(255, 255, 255, 0.9); /* Couleur de l'icône */
  background: rgba(255, 255, 255, 0.1); /* Fond de l'icône */
  width: 28px; /* Largeur fixe */
  height: 28px; /* Hauteur fixe */
  display: flex; /* Flexbox */
  align-items: center; /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
  border-radius: 50%; /* Forme circulaire */
  transition: all 0.3s ease; /* Transition fluide */
}

/* Effet de survol sur les icônes */
.section:hover h3 i {
  transform: scale(1.1); /* Légère augmentation de taille */
  background: rgba(255, 255, 255, 0.2); /* Fond plus clair */
}

/* Liens dans les titres */
.section h3 a {
  color: white; /* Texte blanc */
  text-decoration: none; /* Pas de soulignement */
  transition: all 0.3s ease; /* Transition fluide */
  flex: 1; /* Prend tout l'espace disponible */
}

/* Effet de survol sur les liens des titres */
.section h3 a:hover {
  color: rgba(255, 255, 255, 0.8); /* Texte légèrement transparent */
}

/* Listes dans les sections */
.section ul {
  list-style: none; /* Pas de puces */
  padding: 0; /* Pas de padding */
  margin: 0; /* Pas de marge */
  display: flex; /* Flexbox */
  flex-direction: column; /* Disposition en colonne */
  gap: 6px; /* Espacement entre éléments */
}

/* Éléments de liste */
.section ul li {
  position: relative; /* Position relative */
  padding-left: 15px; /* Espacement à gauche */
}

/* Indicateur avant chaque élément de liste */
.section ul li::before {
  content: "•"; /* Puce personnalisée */
  position: absolute; /* Position absolue */
  left: 0; /* Aligné à gauche */
  top: 0; /* Aligné en haut */
  color: rgba(255, 255, 255, 0.6); /* Couleur de la puce */
  font-size: 1.2em; /* Taille de la puce */
}

/* Liens dans les listes */
.section ul li a {
  color: rgba(255, 255, 255, 0.85); /* Couleur du texte */
  text-decoration: none; /* Pas de soulignement */
  font-size: 0.95rem; /* Taille du texte */
  transition: all 0.2s ease; /* Transition fluide */
  display: inline-block; /* Affichage en ligne */
}

/* Effet de survol sur les liens */
.section ul li a:hover {
  color: white; /* Texte blanc */
  transform: translateX(3px); /* Léger déplacement vers la droite */
}

/* Bannières en bas */
.bannieres-bas {
  display: flex; /* Flexbox */
  flex-direction: column; /* Disposition en colonne sur mobile */
  gap: 15px; /* Espacement entre bannières */
}

/* Bannières en bas */
.bannieres-bas .banniere {
  width: 100%; /* Largeur complète */
  height: 180px; /* Hauteur fixe */
}

/* Styles pour les tablettes */
@media (min-width: 481px) and (max-width: 1023.98px) {
  /* Grille des sections sur 2 colonnes */
  .sections-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Bannières côte à côte */
  .bannieres-haut,
  .bannieres-bas {
    flex-direction: row; /* Disposition en ligne */
    flex-wrap: wrap; /* Retour à la ligne si besoin */
  }
  
  /* Taille des bannières */
  .banniere,
  .bannieres-bas .banniere {
    width: calc(50% - 8px); /* Deux bannières par ligne */
    height: 200px; /* Hauteur plus grande */
  }
}

/* Styles pour les grands écrans mobiles */
@media (min-width: 769px) and (max-width: 1023.98px) {
  /* Grille des sections sur 3 colonnes */
  .sections-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Taille des bannières */
  .banniere,
  .bannieres-bas .banniere {
    height: 220px; /* Hauteur plus grande */
  }
}

/* Styles pour les très petits écrans */
@media (max-width: 480px) {
  /* Réduction des espacements */
  .mobile-mega-menu {
    padding: 10px;
  }
  
  /* Réduction de la taille des textes */
  .section h3 {
    font-size: 1rem;
  }
  
  .section ul li a {
    font-size: 0.9rem;
  }
  
  /* Réduction de la hauteur des bannières */
  .banniere,
  .bannieres-bas .banniere {
    height: 150px;
  }
}