/* Babbikit - bbk-nav.css v8 (BBK 27/10/2026) - EN LIGNE pour tous les visiteurs (essai valide le 27/10/2026, prefixe html conserve), telephone (996 px et moins).
   Boutique et pack cle en main, avec bbk-nav.js : lien "Toutes les categories" au-dessus des onglets et panneau qui monte du bas. */
.bbk-pc-acces, .bbk-pc-fond { display: none; }
@media screen and (max-width: 996px) {
  /* Lien, aligne a gauche au-dessus des onglets */
  html .bbk-pc-acces { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 0 6px 4px; padding: 0 2px; border: 0; background: transparent; color: #0E314B; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
  html .bbk-pc-acces .bbk-pc-texte { text-decoration: underline; text-underline-offset: 4px; }
  html .bbk-pc-grille { flex: 0 0 16px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E314B' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* Panneau */
  html .bbk-pc-fond.bbk-visible { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: rgba(14,49,75,0.48); }
  html.bbk-pc-ouvert, html.bbk-pc-ouvert body { overflow: hidden; }
  html .bbk-pc { position: absolute; top: 84px; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(14,49,75,0.20); color: #0E314B; font-family: inherit; }
  html .bbk-pc-poignee { flex: 0 0 auto; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #E3D9CF; }
  html .bbk-pc-entete { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px 20px; }
  html .bbk-pc-entete h2 { flex: 1 1 auto; margin: 0; color: #0E314B; font-size: 20px; font-weight: 700; line-height: 1.3; text-transform: none; }
  html .bbk-pc-fermer { position: relative; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #FBF6F3; cursor: pointer; }
  html .bbk-pc-fermer::before,
  html .bbk-pc-fermer::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: #0E314B; }
  html .bbk-pc-fermer::before { transform: translate(-50%, -50%) rotate(45deg); }
  html .bbk-pc-fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }
  html .bbk-pc-liste { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* Cartes des categories (comme dans le menu) */
  html .bbk-pc-cat { flex: 0 0 auto; background: #FFFFFF; border: 1px solid #EFE7E1; border-radius: 16px; box-shadow: 0 6px 18px rgba(14,49,75,0.08); overflow: hidden; }
  html .bbk-pc-titre { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 16px 0 11px; border: 0; background: transparent; color: #0E314B; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; cursor: pointer; }
  html .bbk-pc-picto { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
  html .bbk-pc-picto img { width: 22px; height: 22px; display: block; }
  html .bbk-pc-cat.bbk-valide .bbk-pc-picto img { filter: brightness(0) invert(1); }
  html .bbk-pc-nom { flex: 1 1 auto; }
  html .bbk-pc-complet { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 36px; background: #6CC0BA; color: #FFFFFF; font-size: 13px; font-weight: 700; }
  html .bbk-pc-complet::before { content: "\2713"; font-weight: 700; }
  html .bbk-pc-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 .bbk-pc-cat.bbk-ouvert .bbk-pc-fleche { margin: 4px 4px 0 0; transform: rotate(-135deg); }

  /* Sous-categories */
  html .bbk-pc-sous { display: none; list-style: none; margin: 0; padding: 0 0 4px; border-top: 1px solid #EFE7E1; }
  html .bbk-pc-cat.bbk-ouvert .bbk-pc-sous { display: block; }
  html .bbk-pc-sous li { margin: 0; padding: 0; }
  html .bbk-pc-lien { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; background: transparent; color: #0E314B; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left; text-transform: none; cursor: pointer; }
  html .bbk-pc-lien.bbk-actuelle { font-weight: 700; }
  html .bbk-pc-lien.bbk-complete::before { content: "\2713"; color: #2E8F88; font-weight: 700; }
  html .bbk-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* v5 : lien a la taille des sous-categories (16 px semi-gras, picto 18 px), 14 px au-dessus des onglets ; liens de la frise du pack inchanges (12 px) ;
   pack : lien detache de la frise (44 px) ; telephone (767 px et moins) : onglets sans marge du haut, comme sur la boutique,
   pour que le lien et les fleches du carrousel soient a la meme hauteur sur les deux pages */
@media screen and (max-width: 996px) {
  html .bbk-pc-acces { gap: 8px; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
  html .bbk-pc-grille { flex: 0 0 18px; width: 18px; height: 18px; }
  html .cle-en-main .bbk-pc-acces { margin-top: 44px; }
}
@media screen and (max-width: 767px) {
  html .cle-en-main .bbk-pc-acces + .container-slick-category .containt-babbikit-categories { margin-top: 0 !important; }
}

/* v7 : aucun contour autour de la croix du panneau, meme quand elle recoit le focus a l ouverture */
html .bbk-pc-fermer:focus, html .bbk-pc-fermer:focus-visible { outline: none; box-shadow: none; }