/* ===== HEADER ET NAVIGATION ===== */
#header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#header .container {
    max-width: 1140px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.rtl #header .container { flex-direction: row-reverse; }
#header .logo img { height: 50px; object-fit: contain; }
main { padding-top: 80px; }

#header nav { display: flex; gap: 25px; }
body.rtl #header nav { justify-content: flex-start; }
#header nav a {
    color: #333; font-weight: 500; font-size: 15px;
    text-transform: uppercase; text-decoration: none; transition: color 0.3s;
}
#header nav a:hover { color: #f39c12; }

.burger {
    display: none; flex-direction: column; gap: 5px; cursor: pointer; margin-left: 15px;
}
body.rtl .burger { margin-left: 0; margin-right: 15px; }
.burger div { width: 25px; height: 3px; background-color: #333; transition: 0.3s; }

/* ===== SIDEBAR MOBILE (logique d’origine) ===== */
.msidebar {
    position: fixed; top: 0; left: -250px; width: 220px; height: 100%;
    background-color: #fff; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2); overflow-y: auto; padding: 60px 20px;
    transition: left 0.3s ease-in-out; z-index: 1090;
}
body.rtl .msidebar { left: auto; right: -250px; }
body.rtl .msidebar.open { right: 0; }
.msidebar.open { left: 0; }
.msidebar a {
   display: block; padding: 12px 10px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; font-weight: 500;
}
.msidebar a:hover { background-color: #f5f5f5; }

/* ===== Sous-menus (desktop) ===== */
#header nav .has-submenu { position: relative; }
#header nav .has-submenu:hover .submenu { display: block; }

.submenu {
    display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border: 1px solid #ddd;
    min-width: 180px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000;
}
body.rtl .submenu { left: auto; right: 0; }
.submenu a {
    padding: 10px 15px; display: block; white-space: nowrap; border-bottom: 1px solid #eee; font-size: 14px; text-transform: none;
}
.submenu a:hover { background-color: #f5f5f5; }

/* ===== Sous-menus (sidebar mobile) ===== */
.msidebar .has-submenu > a::after { content: '▼'; float: right; font-size: 12px; }
.msidebar .submenu {
    display: none; padding-left: 15px; background-color: #fafafa;
}
body.rtl .msidebar .submenu { padding-left: 0; padding-right: 15px; }
.msidebar .has-submenu.open .submenu { display: block; }
.msidebar .submenu a { border: none; font-size: 14px; padding: 8px 10px; }

/* ============================== */
/* ========== PATCHS ============ */
/* (ajoutés sans changer l’existant) */
/* ============================== */

/* Evite le “clipping” des sous-menus desktop */
#header,
#header .container,
#header nav { overflow: visible; }

/* Légère marge interne du conteneur (ne change pas le look) */
#header .container { padding-inline: 14px; gap: 12px; }

/* Assure que le burger est cliquable devant le logo */
.burger { position: relative; z-index: 10001; }
#header .logo { position: relative; z-index: 10000; }

/* Place correctement les sous-menus desktop */
#header nav .has-submenu { position: relative; }
.submenu { z-index: 11000; top: calc(100% + 6px); }

/* Ouvre aussi au focus (clavier/tactile) sans changer le style */
#header nav .has-submenu:focus-within > .submenu { display: block; }

/* La sidebar doit passer devant le header */
.msidebar { z-index: 15000 !important; }

/* Mobile : si besoin, afficher burger et masquer menu desktop */
@media (max-width: 992px) {
  #header .logo img { max-height: 48px; } /* réduit un peu le logo pour l’espace */
  .burger { display: flex; }              /* burger visible en mobile */
  #header nav.menu-desktop { display: none; }
}

/* ===== FIX FONCTIONNELS (sans toucher au design) ===== */

/* Neutralise tout transform d’un autre fichier (compatibilité) */
.msidebar { transform: none !important; }

/* Ouvrir la sidebar indifféremment avec .open ou .active (compat JS) */
.msidebar.open,
.msidebar.active {
  left: 0 !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  z-index: 15000 !important;
}

/* RTL: ouverture par la droite (logique d’origine conservée) */
body.rtl .msidebar { left: auto !important; right: -250px !important; }
body.rtl .msidebar.open,
body.rtl .msidebar.active { right: 0 !important; }

/* Sous-menus de la sidebar: restent dans le flux (pas en absolu) */
.msidebar .submenu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  min-width: 100%;
  border: 0;
  box-shadow: none;
  display: none !important;      /* affichés uniquement quand .open/.active sur le parent */
}
.msidebar .has-submenu.open > .submenu,
.msidebar .has-submenu.active > .submenu { display: block !important; }

/* =========================================
   PATCH SUBMENU — RESPONSIVE & ANTI-DÉPASSEMENT
   (append-only, sans changer le design)
   ========================================= */

/* Desktop : empêcher le dépassement */
#header nav .submenu {
  max-width: 90vw;
  overflow-x: auto;
  white-space: normal;
  word-break: break-word;
}

/* Option : ancrer à droite si proche du bord droit (ajoute .align-right sur le parent) */
#header nav .has-submenu.align-right > .submenu {
  left: auto;
  right: 0;
}

/* Mobile/Tablet : sous-menus fluides, non absolus */
@media (max-width: 992px) {
  #header nav .submenu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    display: block;   /* le parent contrôle l’ouverture via hover/focus/JS */
    margin: 0;
    padding: 6px 0;
  }

  .msidebar .submenu {
    position: static !important;
    min-width: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 6px 0 8px 0;
    overflow: hidden;
  }

  #header nav .submenu a,
  .msidebar .submenu a {
    display: block;
    min-height: 44px;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  #header nav .submenu a,
  .msidebar .submenu a {
    font-size: 13.5px;
    padding: 10px 12px;
  }
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  #header nav .submenu,
  #header nav .submenu * {
    transition: none !important;
  }
}

/* ================================
   === FIX ANTI-GAP (append-only) ==
   ================================ */

/* Colle le sous-menu au parent et garde l’espace visuel sans trou */
#header nav .has-submenu > .submenu {
  top: 100% !important;          /* remplace visuellement calc(100% + 6px) */
  padding-top: 6px;              /* espace visuel intégré au sous-menu */
  margin-top: 0 !important;
}

/* Petit "pont" invisible qui maintient le :hover pendant la descente */
#header nav .has-submenu::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 8px;                   /* zone tampon anti-perte de hover */
}

/* Renforce l’ouverture par hover/focus (déjà présent plus haut) */
#header nav .has-submenu:hover > .submenu,
#header nav .has-submenu:focus-within > .submenu {
  display: block;
}