/* EDOUARGOT - correctif volets déroulants uniquement accueil index.php
   Ne doit être chargé que dans /index.php.
   Ne touche pas aux autres pages.
*/

/* La vidéo de fond reste derrière */
.edo-video-ciel0-global,
#video-bg {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Les zones de l'accueil ne doivent pas couper un volet déroulant */
body,
main,
.content-wrapper,
.actusaccueil,
.actusaccueil-header,
.tabs-content,
.tabs-nav,
.container,
.row,
.custom-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  contain: none !important;
}

/* Mais on évite quand même le débordement horizontal de toute la page */
html,
body {
  max-width: 100% !important;
}

html {
  overflow-x: hidden !important;
}

/* Les éléments interactifs passent au-dessus de la vidéo */
select,
.select-wrapper,
.dropdown,
.dropdown-menu,
.sub-menu,
.nav-dropdown,
.menu-dropdown,
.has-children,
.has-children > ul,
.tabs-nav,
.tabs-content,
.actusaccueil,
.actusaccueil-header {
  position: relative !important;
  z-index: 5000 !important;
}

/* Si le volet est un vrai menu HTML */
.dropdown-menu,
.sub-menu,
.nav-dropdown,
.menu-dropdown,
.has-children > ul {
  z-index: 99999 !important;
  overflow: visible !important;
  background: #fff6e3 !important;
  color: #330705 !important;
  border: 1px solid rgba(51, 7, 5, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(51, 7, 5, 0.24) !important;
}

/* Si le volet est un select natif */
select,
.select-wrapper select {
  position: relative !important;
  z-index: 99999 !important;
  background: #fff6e3 !important;
  color: #330705 !important;
  -webkit-text-fill-color: #330705 !important;
}

select option {
  background: #fff6e3 !important;
  color: #330705 !important;
}

/* Mobile : même correction, sans bande horizontale */
@media (max-width: 768px) {
  body,
  main,
  .content-wrapper,
  .actusaccueil,
  .actusaccueil-header,
  .tabs-content,
  .tabs-nav,
  .container,
  .row,
  .custom-nav {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
  }

  html {
    overflow-x: hidden !important;
  }
}