/* ===================== AMÉLIORATION DE L'ERGONOMIE DES MENUS ===================== */

/* Variables pour l'ergonomie des menus */
:root {
  --menu-hover-delay: 150ms;
  --menu-hide-delay: 300ms;
  --menu-transition-speed: 0.2s;
  --menu-hover-zone: 10px;
  --menu-z-index-base: 1000;
  --menu-z-index-submenu: 1001;
  --menu-z-index-subsubmenu: 1002;
}

/* ===================== ZONES DE SURVOL ÉTENDUES ===================== */

/* Étendre la zone de survol des boutons principaux */
.um-avec-sous-menu {
  position: relative;
}

.um-avec-sous-menu::before {
  content: '';
  position: absolute;
  top: -var(--menu-hover-zone);
  left: -var(--menu-hover-zone);
  right: -var(--menu-hover-zone);
  bottom: -var(--menu-hover-zone);
  z-index: -1;
  pointer-events: auto;
}

/* Zone de transition entre bouton et sous-menu */
.um-conteneur::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  pointer-events: auto;
}

/* Zone de transition entre sous-menu et sous-sous-menu */
.um-sous-conteneur::before {
  content: '';
  position: absolute;
  top: 0;
  left: -15px;
  width: 15px;
  height: 100%;
  background: transparent;
  pointer-events: auto;
}

/* ===================== DÉLAIS ET TRANSITIONS OPTIMISÉS ===================== */

/* Délai d'apparition des menus */
.um-conteneur,
.um-sous-conteneur {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 
    opacity var(--menu-transition-speed) ease var(--menu-hover-delay),
    visibility var(--menu-transition-speed) ease var(--menu-hover-delay),
    transform var(--menu-transition-speed) ease var(--menu-hover-delay);
}

/* Apparition immédiate au survol */
.um-avec-sous-menu:hover .um-conteneur {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0ms;
}

/* Délai de disparition plus long pour éviter les fermetures accidentelles */
.um-avec-sous-menu:not(:hover) .um-conteneur {
  transition-delay: var(--menu-hide-delay);
}

/* Sous-sous-menus avec délais ajustés */
.um-avec-sous-menu:hover .um-sous-conteneur {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms;
}

.um-avec-sous-menu:not(:hover) .um-sous-conteneur {
  transition-delay: var(--menu-hide-delay);
}

/* ===================== AMÉLIORATION DES ZONES CLIQUABLES ===================== */

/* Augmenter la zone cliquable des boutons */
.um-bouton,
.um-bouton-sous-menu,
.um-element button,
.um-sous-element button {
  position: relative;
  min-height: 44px; /* Taille minimale recommandée pour le tactile */
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all var(--menu-transition-speed) ease;
}

/* Zone cliquable étendue pour les petits écrans */
@media (max-width: 768px) {
  .um-bouton,
  .um-bouton-sous-menu,
  .um-element button,
  .um-sous-element button {
    min-height: 48px;
    padding: 15px 25px;
  }
}

/* ===================== FEEDBACK VISUEL AMÉLIORÉ ===================== */

/* États de survol plus visibles */
.um-bouton:hover,
.um-bouton:focus {
  background-color: rgba(255,255,255,0.15) !important;
  box-shadow: 
    0 0 0 2px rgba(255,255,255,0.3),
    0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.um-element button:hover,
.um-element button:focus,
.um-sous-element button:hover,
.um-sous-element button:focus {
  background-color: rgba(255,255,255,0.2) !important;
  box-shadow: none;
  transform: translateX(3px);
}

/* ===================== INDICATEURS VISUELS ===================== */

/* Indicateur de sous-menu plus visible */
.um-bouton-sous-menu .fas.fa-angle-right {
  transition: transform var(--menu-transition-speed) ease;
  margin-left: auto;
  font-size: 0.9em;
}

.um-avec-sous-menu:hover .um-bouton-sous-menu .fas.fa-angle-right {
  transform: translateX(3px);
  color: white;
}

/* Indicateur de menu déroulant */
.um-bouton .fas.fa-chevron-down {
  transition: transform var(--menu-transition-speed) ease;
}

.um-avec-sous-menu:hover .um-bouton .fas.fa-chevron-down {
  transform: rotate(180deg);
}

/* ===================== POSITIONNEMENT INTELLIGENT ===================== */

/* Positionnement des sous-menus */
.um-conteneur {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-width: 300px;
  z-index: var(--menu-z-index-submenu);
  margin-top: 5px;
}

/* Positionnement des sous-sous-menus */
.um-sous-conteneur {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  max-width: 280px;
  z-index: var(--menu-z-index-subsubmenu);
  margin-left: 5px;
}

/* Ajustement automatique pour éviter le débordement */
@media (max-width: 1200px) {
  .um-sous-conteneur {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 5px;
  }
}

/* ===================== ACCESSIBILITÉ AMÉLIORÉE ===================== */

/* Focus visible pour la navigation au clavier */
.um-bouton:focus,
.um-bouton-sous-menu:focus,
.um-element button:focus,
.um-sous-element button:focus {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
}

/* Navigation au clavier */
.um-avec-sous-menu:focus-within .um-conteneur {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ===================== ANIMATIONS FLUIDES ===================== */

/* Animation d'apparition des sous-menus */
.um-conteneur {
  transform: translateY(-10px);
}

.um-avec-sous-menu:hover .um-conteneur {
  transform: translateY(0);
}

/* Animation d'apparition des sous-sous-menus */
.um-sous-conteneur {
  transform: translateX(-10px);
}

.um-avec-sous-menu:hover .um-sous-conteneur {
  transform: translateX(0);
}

/* ===================== OPTIMISATIONS MOBILES ===================== */

@media (max-width: 768px) {
  /* Augmenter les zones de survol sur mobile */
  .um-avec-sous-menu::before {
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
  }
  
  /* Délais réduits sur mobile */
  :root {
    --menu-hover-delay: 100ms;
    --menu-hide-delay: 200ms;
  }
  
  /* Menus pleine largeur sur très petits écrans */
  .um-conteneur,
  .um-sous-conteneur {
    min-width: 250px;
    max-width: 90vw;
  }
}

/* ===================== ÉTATS ACTIFS ===================== */

/* Bouton actif/sélectionné */
.um-bouton.active,
.um-element button.active {
  background-color: rgba(255,204,0,0.2) !important;
  color: #ffcc00 !important;
  box-shadow: inset 0 0 0 2px rgba(255,204,0,0.5);
}

/* ===================== PERFORMANCE ===================== */

/* Optimisation GPU pour les animations */
.um-conteneur,
.um-sous-conteneur,
.um-bouton,
.um-element button {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Réduction des repaints */
.um-avec-sous-menu {
  contain: layout style;
}

/* ===================== CORRECTIONS SPÉCIFIQUES ===================== */

/* Éviter les conflits avec les styles existants */
.um-conteneur,
.um-sous-conteneur {
  pointer-events: none !important;
}

.um-avec-sous-menu:hover .um-conteneur,
.um-avec-sous-menu:hover .um-sous-conteneur,
.um-avec-sous-menu:focus-within .um-conteneur,
.um-avec-sous-menu:focus-within .um-sous-conteneur {
  pointer-events: auto !important;
}

/* Assurer la visibilité des menus */
.um-conteneur.visible,
.um-sous-conteneur.visible {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}