/* Babbikit - bbk-menu.css v5 (BBK 27/10/2026) - EN LIGNE pour tous les visiteurs (essai valide le 27/10/2026, prefixe html conserve pour la priorite).
   Menu principal, avec bbk-menu.js : sous-menus Boutique (categories et sous-categories) et Conseils,
   menu en pleine page sur telephone. Les selecteurs portent un id pour passer devant le bloc 5 de bbk-refonte.css. */

/* ---- Commun ---- */
html #lnk-boutique .bbk-mv a,
html #lnk-boutique .bbk-mv a:hover,
html #lnk-boutique .bbk-mv a:focus,
html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu,
html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu:hover { color: #0E314B !important; text-decoration: none; text-transform: none !important; letter-spacing: normal !important; }
html #lnk-boutique .bbk-mv .bbk-mv-sous { list-style: none; margin: 0; }
html #lnk-boutique .bbk-mv .bbk-mv-sous li { margin: 0; padding: 0; border: 0; float: none; }
html #lnk-boutique .bbk-mv .bbk-mv-nom { flex: 1 1 auto; }
html #lnk-boutique .bbk-mv .bbk-mv-toutcat a { font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 4px; }
html #lnk-boutique .bbk-mv a.bbk-mv-tout { justify-content: center; border-radius: 36px !important; background: #FBF6F3 !important; font-weight: 700 !important; }
html #lnk-boutique .bbk-mv a.bbk-mv-tout:hover { background: #F3EAE3 !important; }
html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu { display: flex !important; align-items: center; gap: 12px; }

/* ---- Telephone ---- */
@media screen and (max-width: 996px) {
  /* Menu en pleine page, de la ligne jaune jusqu'en bas de l'ecran, page bloquee derriere */
  html #header.is-open #top-menu { position: fixed !important; top: var(--bbk-menu-haut, 77px) !important; right: 0; bottom: 0; left: 0; width: auto !important; margin: 0 !important; padding: 8px 0 calc(32px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #FFFFFF; border-top: 2px solid #FEB737; box-shadow: none !important; z-index: 1001; }
  html.bbk-menu-ouvert, html.bbk-menu-ouvert body { overflow: hidden; }
  /* Croix a la place de l'icone du menu */
  html #header.is-open #menu-icon { position: relative; }
  html #header.is-open #menu-icon img { visibility: hidden; }
  html #header.is-open #menu-icon::before,
  html #header.is-open #menu-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; border-radius: 2px; background: #0E314B; }
  html #header.is-open #menu-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
  html #header.is-open #menu-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

  /* Boutique : cartes blanches, picto sur fond pastel, accordeon */
  html #lnk-boutique.bbk-ouvert > .bbk-menu-deroulant.bbk-mv { display: flex !important; flex-direction: column; gap: 10px; padding: 0 16px 6px !important; }
  html #lnk-boutique .bbk-mv .bbk-mv-liste { display: flex; flex-direction: column; gap: 10px; }
  html #lnk-boutique .bbk-mv .bbk-mv-cat { background: #FFFFFF; border: 1px solid #EFE7E1; border-radius: 16px; box-shadow: 0 6px 18px rgba(14,49,75,0.08); overflow: hidden; }
  html #lnk-boutique .bbk-mv a.bbk-mv-titre { display: flex !important; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px 0 12px !important; border-radius: 0 !important; background: transparent !important; font-size: 16px !important; font-weight: 700 !important; white-space: normal !important; }
  html #lnk-boutique .bbk-mv .bbk-menu-picto,
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .bbk-menu-picto { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; }
  html #lnk-boutique .bbk-mv .bbk-menu-picto img,
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .bbk-menu-picto img { width: 22px; height: 22px; }
  html #lnk-boutique .bbk-mv .bbk-mv-fleche { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 4px 4px 0; border-right: 2px solid #0E314B; border-bottom: 2px solid #0E314B; transform: rotate(45deg); transition: transform .2s; }
  html #lnk-boutique .bbk-mv .bbk-mv-cat.bbk-ouvert .bbk-mv-fleche { margin: 4px 4px 0 0; transform: rotate(-135deg); }
  html #lnk-boutique .bbk-mv .bbk-mv-sous { display: none; padding: 0 0 4px; border-top: 1px solid #EFE7E1; }
  html #lnk-boutique .bbk-mv .bbk-mv-cat.bbk-ouvert .bbk-mv-sous { display: block; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous a { display: flex !important; align-items: center; min-height: 46px; padding: 0 16px !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 500 !important; white-space: normal !important; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous .bbk-mv-toutcat { border-top: 1px solid #EFE7E1; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous .bbk-mv-toutcat a { font-size: 14px !important; font-weight: 700 !important; }
  html #lnk-boutique .bbk-mv a.bbk-mv-tout { display: flex !important; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 0 16px !important; border-top: 0 !important; font-size: 15px !important; }

  /* Conseils : memes cartes, sans fleche */
  html #_desktop_top_menu #cms-category-2 > .sub-menu.bbk-mv-conseils { padding: 0 16px 6px !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu { display: flex !important; flex-direction: column; gap: 10px; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu { min-height: 60px; padding: 0 16px 0 12px !important; background: #FFFFFF; border: 1px solid #EFE7E1; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(14,49,75,0.08); font-size: 16px !important; font-weight: 700 !important; }
}

/* ---- Ordinateur ---- */
@media screen and (min-width: 997px) {
  /* Boutique : categories a gauche, sous-categories de la categorie survolee a droite */
  html #lnk-boutique > .bbk-menu-deroulant.bbk-mv { width: 560px !important; min-width: 0 !important; box-sizing: border-box; }
  html #lnk-boutique .bbk-mv .bbk-mv-liste { position: relative; width: 270px; min-height: 380px; display: flex; flex-direction: column; gap: 2px; }
  html #lnk-boutique .bbk-mv a.bbk-mv-titre { display: flex !important; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 500 !important; white-space: nowrap; }
  html #lnk-boutique .bbk-mv .bbk-mv-cat.bbk-actif > a.bbk-mv-titre { background: #FBF6F3 !important; }
  html #lnk-boutique .bbk-mv .bbk-mv-fleche { flex: 0 0 auto; width: 6px; height: 6px; margin-right: 6px; border-right: 2px solid #0E314B; border-bottom: 2px solid #0E314B; transform: rotate(-45deg); }
  html #lnk-boutique .bbk-mv .bbk-mv-sous { display: none; position: absolute; top: 0; left: 286px; width: 254px; min-height: 100%; box-sizing: border-box; padding: 4px 0 4px 16px; border-left: 1px solid #EFE7E1; }
  html #lnk-boutique .bbk-mv .bbk-mv-cat.bbk-actif > .bbk-mv-sous { display: block; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous a { display: flex !important; align-items: center; min-height: 40px; padding: 0 10px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 500 !important; white-space: normal !important; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous a:hover { background: #FBF6F3 !important; }
  html #lnk-boutique .bbk-mv .bbk-mv-sous .bbk-mv-toutcat a { font-weight: 700 !important; }
  html #lnk-boutique .bbk-mv a.bbk-mv-tout { display: flex !important; align-items: center; min-height: 44px; margin: 8px 0 0; padding: 0 16px !important; border-top: 0 !important; font-size: 15px !important; }

  /* Conseils : picto a cote du nom */
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu { min-height: 48px; padding: 0 10px !important; border-radius: 12px !important; }
}

/* v2 : telephone, sous-menu Conseils en pleine largeur (le sous-menu PrestaShop est une "popover" etroite et centree) */
@media screen and (max-width: 996px) {
  html #_desktop_top_menu #cms-category-2 > .sub-menu.bbk-mv-conseils { width: auto !important; max-width: none !important; left: auto !important; right: auto !important; transform: none !important; margin: 0 !important; text-align: left !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu { align-items: stretch !important; text-align: left !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu > li { width: 100% !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu { width: 100% !important; box-sizing: border-box; justify-content: flex-start !important; text-align: left !important; }
}

/* ===== v3 : telephone, menu D =====
   Rubriques en bandeaux creme pleine largeur, toutes avec une fleche a droite (sans capitales).
   Boutique et Conseils ouvrent un panneau (#top-menu.bbk-pn, rubrique en .bbk-ouvert) avec un bouton retour. */
html .bbk-mv-retour { display: none; }
@media screen and (max-width: 996px) {
  html #header.is-open #top-menu { padding: 14px 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important; }
  html #_desktop_top_menu #top-menu > li { float: none !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; }
  html #_desktop_top_menu #top-menu > li > a,
  html #_desktop_top_menu #top-menu > li > a:hover,
  html #_desktop_top_menu #top-menu > li > a:focus { display: flex !important; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 0 18px !important; border-radius: 14px; background: #FBF6F3; color: #0E314B !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3; text-transform: none !important; letter-spacing: normal !important; text-decoration: none; }
  html #_desktop_top_menu #top-menu > li > a::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 6px 0 auto; border-right: 2px solid #0E314B; border-bottom: 2px solid #0E314B; transform: rotate(-45deg); }
  html #_desktop_top_menu #lnk-boutique > a .bbk-menu-fleche,
  html #_desktop_top_menu #cms-category-2 > a .float-xs-right { display: none !important; }

  /* Panneau : seule la rubrique ouverte reste, sans son bandeau, avec son bouton retour */
  html #_desktop_top_menu #top-menu.bbk-pn > li:not(.bbk-ouvert),
  html #_desktop_top_menu #top-menu.bbk-pn > li.bbk-ouvert > a { display: none !important; }
  html #_desktop_top_menu #top-menu.bbk-pn > li.bbk-ouvert { margin: 0 !important; }
  html #_desktop_top_menu .bbk-mv-retour { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: -6px 0 6px; padding: 0 0 0 4px; border: 0; background: transparent; color: #0E314B; font-family: inherit; font-size: 19px; font-weight: 700; text-align: left; cursor: pointer; }
  html #_desktop_top_menu .bbk-mv-retour::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin: 0 6px 0 4px; border-left: 2.4px solid #0E314B; border-bottom: 2.4px solid #0E314B; transform: rotate(45deg); }
  html #lnk-boutique.bbk-ouvert > .bbk-menu-deroulant.bbk-mv { padding: 0 0 6px !important; gap: 8px; }
  html #lnk-boutique .bbk-mv .bbk-mv-liste { gap: 8px; }
  html #_desktop_top_menu #cms-category-2 > .sub-menu.bbk-mv-conseils { padding: 0 0 6px !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu { gap: 8px; }
  /* Ombre des cartes Conseils : les conteneurs du sous-menu PrestaShop ne doivent ni la couper ni l'annuler */
  html #_desktop_top_menu #cms-category-2 > .sub-menu.bbk-mv-conseils,
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu,
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils .top-menu > li { overflow: visible !important; }
  html #_desktop_top_menu #cms-category-2 .bbk-mv-conseils a.dropdown-submenu { box-shadow: 0 6px 18px rgba(14,49,75,0.08) !important; }
}

/* v4 : telephone, le sous-menu Conseils ne s affiche que dans son panneau (iPhone : le premier appui declenche le survol du theme, qui ouvrait la liste sous le bandeau) */
@media screen and (max-width: 996px) {
  html #_desktop_top_menu #cms-category-2:not(.bbk-ouvert) > .sub-menu { display: none !important; }
  html #_desktop_top_menu #cms-category-2.bbk-ouvert > .sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; }
}