/*
 * JL Menu – styles du menu (ordinateur ≥ 992 px, mobile en dessous).
 *
 * Couleurs reprises de LABROSSE SHOP (bleu #14476F, police du thème).
 * Toutes les règles sont préfixées .jlmenu pour ne pas toucher au thème ;
 * les réglages visuels se changent dans les variables ci-dessous.
 */

.jlmenu {
  --jlm-couleur: #14476f;          /* bleu Labrosse : icônes, titres, liens */
  --jlm-couleur-fond: #eaf1f7;     /* fond de l'entrée active, badge, encart */
  --jlm-texte: #1f2933;
  --jlm-texte-doux: #5f6b76;
  --jlm-bord: #e3e7eb;
  --jlm-rayon: 5px;
  --jlm-largeur: 980px;            /* largeur du panneau sur ordinateur */
  --jlm-colonne: 280px;            /* largeur de la colonne des univers */
  --jlm-duree: 0.25s;

  /* Hiérarchie des textes : entrée principale > sous-catégorie. */
  --jlm-taille-entree: 15px;       /* catégories de la colonne de gauche */
  --jlm-graisse-entree: 500;
  --jlm-taille-sous: 14px;         /* sous-catégories */
  --jlm-taille-titre: 18px;        /* titre du panneau de droite */

  /* Dans la bande bleue du thème, le bouton se place sur la même ligne que le
     menu principal (Meilleures ventes, Promotions…), comme l'ancien menu
     vertical : bloc en ligne, centré verticalement, avec le même espacement. */
  display: inline-block;
  vertical-align: middle;
  padding: 5px 0;
  margin-inline-end: 25px;
  position: relative;
  font-family: inherit;
  line-height: 1.4;
}

/* ---- Remise à zéro (le thème stylise ul, li, a, button) -------------- */

.jlmenu ul { list-style: none; margin: 0; padding: 0; }
.jlmenu li { margin: 0; padding: 0; }
.jlmenu a { text-decoration: none; }
.jlmenu button { font: inherit; cursor: pointer; }
.jlmenu [hidden] { display: none !important; }
.jlmenu svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Bouton d'ouverture ------------------------------------------------ */

.jlmenu__declencheur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--jlm-rayon);
  background: #fff;
  color: var(--jlm-couleur);
  font-weight: 600;
  font-size: 14px;
}
.jlmenu__declencheur .jlmenu__pictogramme { font-size: 20px; }
.jlmenu__declencheur:focus-visible,
.jlmenu a:focus-visible,
.jlmenu button:focus-visible { outline: 2px solid var(--jlm-couleur); outline-offset: 2px; }

/* ---- Éléments communs -------------------------------------------------- */

.jlmenu__panneau { color: var(--jlm-texte); background: #fff; font-size: 14px; text-align: left; }

.jlmenu__univers-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 10px 4px;
  color: var(--jlm-texte-doux);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.jlmenu__univers-titre:hover { color: var(--jlm-couleur); }

.jlmenu__badge {
  padding: 2px 8px;
  border-radius: var(--jlm-rayon);
  background: var(--jlm-couleur-fond);
  color: var(--jlm-couleur);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.jlmenu__entree {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--jlm-rayon);
  color: var(--jlm-texte);
  font-size: var(--jlm-taille-entree);
  font-weight: var(--jlm-graisse-entree);
}
.jlmenu__entree:hover,
.jlmenu__entree--active { background: var(--jlm-couleur-fond); color: var(--jlm-couleur); }

/* L'emplacement de l'icône est toujours réservé : les textes restent alignés
   même si une catégorie n'a pas (encore) d'icône. */
.jlmenu__icone { display: inline-flex; flex: none; justify-content: center; width: 1em; color: var(--jlm-couleur); font-size: 22px; }
.jlmenu__nom { flex: 1; }
.jlmenu__compte { color: var(--jlm-texte-doux); }
.jlmenu__chevron { color: #9aa5af; font-size: 16px; }

.jlmenu__liens { margin: 12px 0 4px; padding: 10px 0 0; border-top: 1px solid var(--jlm-bord); }
.jlmenu__liens a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--jlm-couleur); font-size: 14px; }
.jlmenu__liens a:hover { text-decoration: underline; }
.jlmenu__liens .jlmenu__icone { font-size: 18px; }

.jlmenu__sous-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.jlmenu__sous-titre { color: var(--jlm-texte); font-size: var(--jlm-taille-titre); font-weight: 600; }
.jlmenu__voir-tout { display: inline-flex; align-items: center; gap: 6px; color: var(--jlm-couleur); font-size: 13px; white-space: nowrap; }
.jlmenu__voir-tout:hover { text-decoration: underline; }

.jlmenu__grille a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--jlm-bord); color: var(--jlm-texte); font-size: var(--jlm-taille-sous); font-weight: 400; }
.jlmenu__grille a:hover { color: var(--jlm-couleur); }
.jlmenu__grille .jlmenu__icone { font-size: 20px; }

.jlmenu__encart {
  display: block;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--jlm-rayon);
  background: var(--jlm-couleur-fond);
  color: var(--jlm-couleur);
}
.jlmenu__encart-titre { display: block; font-weight: 600; }
.jlmenu__encart-texte { display: block; color: var(--jlm-texte-doux); font-size: 13px; }

/* =========================================================================
 *  Ordinateur : méga-menu sous le bouton
 * ========================================================================= */

@media (min-width: 992px) {
  .jlmenu__voile,
  .jlmenu__entete,
  .jlmenu__retour,
  .jlmenu__encart--liste { display: none !important; }  /* l'encart est dans le panneau de droite */

  .jlmenu__panneau {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    width: var(--jlm-largeur);
    max-width: calc(100vw - 32px);
    border: 1px solid var(--jlm-bord);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(15, 35, 55, 0.16);
  }
  .jlmenu--ouvert .jlmenu__panneau { display: block; }

  .jlmenu__corps { display: grid; grid-template-columns: var(--jlm-colonne) minmax(0, 1fr); min-height: 380px; }
  .jlmenu__gauche { padding: 6px 10px 12px; border-right: 1px solid var(--jlm-bord); }
  .jlmenu__droite { padding: 20px 26px; }

  .jlmenu__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .jlmenu__grille--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
 *  Mobile : tiroir latéral à deux niveaux
 * ========================================================================= */

@media (max-width: 991.98px) {
  .jlmenu__voile {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    /* Au-dessus de tous les éléments du thème, y compris le bandeau des
       cookies (#cookieNotice, z-index 99999). */
    z-index: 100000;
    background: rgba(15, 35, 55, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--jlm-duree) ease, visibility 0s var(--jlm-duree);
  }

  .jlmenu__panneau {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    overflow: hidden;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--jlm-duree) ease, visibility 0s var(--jlm-duree);
  }

  .jlmenu--ouvert .jlmenu__voile { opacity: 1; visibility: visible; transition: opacity var(--jlm-duree) ease; }
  .jlmenu--ouvert .jlmenu__panneau { transform: none; visibility: visible; transition: transform var(--jlm-duree) ease; }

  .jlmenu__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jlm-bord);
  }
  .jlmenu__titre { font-size: 17px; font-weight: 600; }
  .jlmenu__fermer { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--jlm-texte-doux); font-size: 22px; }

  /* Les deux niveaux sont superposés ; le niveau 2 glisse par-dessus. */
  .jlmenu__corps { position: relative; flex: 1; overflow: hidden; }
  .jlmenu__gauche,
  .jlmenu__droite {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 16px;
    background: #fff;
    transition: transform var(--jlm-duree) ease;
  }
  .jlmenu__droite { transform: translateX(100%); }
  .jlmenu--niveau2 .jlmenu__gauche { transform: translateX(-25%); }
  .jlmenu--niveau2 .jlmenu__droite { transform: none; }

  .jlmenu__entree { padding: 12px 6px; border-bottom: 1px solid var(--jlm-bord); border-radius: 0; font-size: 16px; }
  .jlmenu__entree:hover { background: none; }

  .jlmenu__retour {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 14px 6px;
    border: 0;
    border-bottom: 1px solid var(--jlm-bord);
    background: none;
    color: var(--jlm-texte-doux);
    font-size: 14px;
  }
  .jlmenu__sous-entete { flex-direction: column; gap: 4px; margin: 14px 6px 8px; }
  /* Encart de l'univers sous sa liste (ex. « Gamme MASTERPAC – Livraison offerte ») */
  .jlmenu__encart--liste { margin: 10px 6px 4px; }
  .jlmenu__grille a { padding: 12px 6px; font-size: 15px; }
  .jlmenu__sous-titre { font-size: 19px; }
}

/* Page figée pendant que le tiroir mobile est ouvert. */
body.jlmenu-bloque { overflow: hidden; }

/* Animations réduites si l'utilisateur l'a demandé à son système. */
@media (prefers-reduced-motion: reduce) {
  .jlmenu * { transition: none !important; }
}