/* ==========================================================================
   Smart Menu – CSS complet et propre
   - Aucune police ni couleur imposée (tout hérite via currentColor)
   - Desktop : nav fixé en haut-droite, N1 centré verticalement dans le header
   - Hover N1 : barre underline animée
   - N2/N3 : slide + fade ; ouverture à gauche si déborde
   - Mobile (≤768px) : burger visible (centré dans le header), nav desktop caché
     seul le <ul> va dans #right-sidebar en accordéon, overlay + sidebar
     démarrent sous le header (offset auto via --sm-header-offset)
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  /* Défini par le JS (admin bar + header sticky/fixed). Fallback 60px. */
  --sm-header-offset: 60px;
  --sm-sidebar-width: min(92vw, 420px);
}

/* ---------- Utilitaires ---------- */
.sm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Bouton burger (hors sidebar) ----------
   - caché desktop
   - visible mobile et centré verticalement dans la hauteur du header
*/
#sm-global-toggle.sm-global-toggle {
  display: none;                         /* visible en mobile (media query) */
  position: fixed;
  right: 0.75rem;
  top: 0;
  height: var(--sm-header-offset);       /* centrage vertical dans le header */
  z-index: 10001;                        /* au-dessus du header */
  background: transparent;
  border: 0;
  padding: .4rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  align-items: center; justify-content: center; /* pour centrer l’icône */
}

/* ---------- Racine nav (desktop) ----------
   - fixé en haut-droite
   - centré verticalement dans le header (N1 aligné au milieu)
*/
#smart-menu.sm-root {
  position: fixed;
  top: 0; right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;                   /* centrage vertical */
  height: var(--sm-header-offset);       /* s’aligne sur la hauteur du header */
  gap: .75rem;
  padding: 0 .75rem;                     /* pas d’augmentation de hauteur */
  box-sizing: border-box;
  color: inherit;
}

.sm-sidebar-wrap{
  border-bottom: 1px solid;
}

.sm-sidebar-wrap button:hover{
  background: transparent!important;
}

/* ---------- Niveau 1 ---------- */
.sm-menu.sm-level-1 {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-level-1 > li {
  position: relative;
  text-align: center;
}

.sm-level-1 > li > .sm-link,
.sm-level-1 > li > .sm-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1rem;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  color: inherit;
}

.menu-item-has-children.sm-item.sm-depth-1{margin: 0;}

/* Underline animé au hover (N1) */
.sm-level-1 > li > .sm-link::after,
.sm-level-1 > li > .sm-label::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: .35rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: currentColor;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1);
}
.sm-level-1 > li:hover > .sm-link::after,
.sm-level-1 > li:hover > .sm-label::after {
  transform: scaleX(1);
}

/* Chevron (affiché en mobile uniquement) */
.sm-toggle {
  display: none;
  background: transparent;
  border: 0;
  margin-left: .25rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
}

/* ---------- Sous-menus (Desktop) ---------- */
.sm-sub {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  min-width: 220px;
  z-index: 9999;
  pointer-events: none;
  border-bottom: 1px solid;
  background: #181818;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* N2 sous l’item */
.sm-sub.sm-level-2 { top: 100%; left: 0; }
.sm-level-1 > li:hover > .sm-sub.sm-level-2 {
  pointer-events: auto; opacity: 1; transform: translateY(0);
}
/* Si manque de place → alignement au bord droit du parent */
.sm-sub.sm-level-2.open-left { left: auto; right: 0; }

/* N3 latéral */
.sm-sub.sm-level-2 > li { position: relative; }
.sm-sub.sm-level-3 {
  top: 0; left: 100%;
  transform: translateY(6px) translateX(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.sm-sub.sm-level-2 > li:hover > .sm-sub.sm-level-3 {
  pointer-events: auto; opacity: 1; transform: translateY(0) translateX(0);
}
.sm-sub.sm-level-3.open-left {
  left: auto; right: 100%;
  transform: translateY(6px) translateX(-6px);
}

/* Items des sous-menus */
.sm-sub > li > .sm-link,
.sm-sub > li > .sm-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

/* ---------- Overlay (créé par le JS) ---------- */
.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);   /* aucune couleur de texte modifiée */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.sm-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   MOBILE (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Burger visible + centré verticalement dans le header (via --sm-header-offset) */
  #sm-global-toggle.sm-global-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav desktop neutralisé (on garde seulement le <ul> qui migre dans la sidebar) */
  #smart-menu.sm-root { display: none; }

  /* N1 vertical */
  .sm-menu.sm-level-1 {
    flex-direction: column;
    gap: .25rem;
  }
  .sm-level-1 > li { text-align: left; }

  /* Ligne d’en-tête mobile : libellé + chevron côte à côte, sous-menu EN DESSOUS */
  .sm-level-1 > li,
  .sm-sub > li {
    display: block !important;           /* garantit que le sous-menu vient dessous */
  }

  .sm-level-1 > li > .sm-link,
  .sm-level-1 > li > .sm-label,
  .sm-sub > li > .sm-link,
  .sm-sub > li > .sm-label {
    display: inline-flex;                /* libellé et chevron sur la même ligne */
    align-items: center;
    justify-content: flex-start !important;
    width: auto !important;
    padding: .85rem .75rem;
    padding-right: .25rem;
    vertical-align: middle;
  }

  /* Chevron collé au texte (parents uniquement) + zone de clic confort */
  .sm-level-1 > li.menu-item-has-children > .sm-toggle,
  .sm-sub > li.menu-item-has-children > .sm-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    margin-left: .35rem;
    padding: .35rem;
    vertical-align: middle;
  }

  /* Accordéon : sous-menus repliés par défaut, indentés, en dessous */
  .sm-sub {
    position: static;
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
    margin-top: .35rem;
    padding-left: .75rem;
    display: none;                       /* fermé par défaut */
  }
  .sm-sub.is-open { display: block; }

  /* Chevron qui pivote quand ouvert (le JS pose aria-expanded) */
  .sm-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
    transition: transform 160ms ease;
  }

  /* Pas d’underline animé en mobile */
  .sm-level-1 > li > .sm-link::after,
  .sm-level-1 > li > .sm-label::after { display: none; }

  /* ===== Drawer mobile géré par le plugin =====
     Sidebar + overlay démarrent SOUS le header (offset auto) */
  .sm-overlay {
    top: var(--sm-header-offset);
    height: calc(100dvh - var(--sm-header-offset));
  }

  #right-sidebar {
    position: fixed !important;          /* override thème si besoin */
    top: var(--sm-header-offset) !important;
    right: 0; bottom: 0; left: auto;
    z-index: 10000;
    width: var(--sm-sidebar-width);
    max-width: 100vw;
    height: calc(100dvh - var(--sm-header-offset));
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 220ms ease;
    will-change: transform;
    background: rgba(0, 0, 0, 0.8);
    padding-top: 0;
  }
  .sm-sub{
    background: transparent;
  }
  #right-sidebar.sm-open { transform: translateX(0); }
  .inside-right-sidebar{
    margin-top: 0!important;
  }

  /* Option : bloquer le scroll du fond quand la sidebar est ouverte */
  html.sm-sidebar-open, body.sm-sidebar-open { overflow: hidden; }
}

/* ---------- Divers/garanties ---------- */
.sm-link, .sm-label { text-decoration: none; }
#smart-menu, #smart-menu * { color: inherit; }