/* ===================================================================
   BASE
   =================================================================== */
.tbp-scm-container { margin: 1.5rem 0; }
.tbp-scm-title { font-size: 1.75rem; font-weight: 800; margin: 0 0 .75rem; text-align: left; }
.tbp-scm-empty { padding:1rem; border:1px dashed #e5e7eb; border-radius:8px; color:#6b7280; text-align:center; }

/* ===================================================================
   MODE GRILLE (option)
   =================================================================== */
.tbp-scm-grid { display: grid; gap: 1rem; }
.tbp-scm-container[data-columns="6"] .tbp-scm-grid { grid-template-columns: repeat(6,1fr); }
.tbp-scm-container[data-columns="5"] .tbp-scm-grid { grid-template-columns: repeat(5,1fr); }
.tbp-scm-container[data-columns="4"] .tbp-scm-grid { grid-template-columns: repeat(4,1fr); }
.tbp-scm-container[data-columns="3"] .tbp-scm-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width:1024px){
  .tbp-scm-container[data-columns="6"] .tbp-scm-grid,
  .tbp-scm-container[data-columns="5"] .tbp-scm-grid { grid-template-columns: repeat(4,1fr); }
  .tbp-scm-container[data-columns="4"] .tbp-scm-grid,
  .tbp-scm-container[data-columns="3"] .tbp-scm-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width:768px){
  .tbp-scm-grid { grid-template-columns: repeat(2,1fr) !important; gap: .75rem; }
}
.tbp-scm-item { display:block; text-decoration:none; color:inherit; }
.tbp-scm-card {
  position:relative; aspect-ratio: 24/10; background:#f3f4f6 center/cover no-repeat;
  border-radius:12px; overflow:hidden; display:flex; align-items:flex-end; transition:transform .2s ease;
}
.tbp-scm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0, rgba(0,0,0,.6) 100%);}
.tbp-scm-item:hover .tbp-scm-card{ transform:translateY(-2px); }
.tbp-scm-content { position:relative; z-index:1; width:100%; margin:8px; padding:10px 12px; background:#fff; border-radius:8px; }
.tbp-scm-name { margin:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: clamp(.8rem, .9vw + .3rem, 1rem); }
.tbp-scm-badge { position:absolute; top:8px; right:8px; background:#6c5ce7; color:#fff; font-weight:800; font-size:12px; padding:4px 8px; border-radius:999px; min-width:24px; text-align:center; }

/* ===================================================================
   ACCORDÉON (bouton hamburger compact) + LISTE + RECHERCHE
   =================================================================== */
.tbp-scm-accordion { margin: 1rem 0; }

/* Bouton compact (largeur = contenu) – style TBP sobre */
.tbp-scm-acc__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:.5rem .9rem;
  background:#fff;
  color:#1e1e1e;
  border:1px solid #e6e8f0;         /* contour léger */
  border-radius:10px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  width:auto;                        /* ne s’étire pas */
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tbp-scm-acc__toggle:hover{
  background:#f3f7ff;               /* bleu très doux */
  border-color:#1e4bae;             /* bleu TBP */
  color:#1e4bae;
}
.tbp-scm-acc__toggle:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(30,75,174,.2); /* focus visible TBP */
  border-color:#1e4bae;
}

/* Hamburger */
.tbp-scm-acc__hamburger{
  display:inline-flex; flex-direction:column; justify-content:center;
  gap:3px; width:18px; height:14px;
}
.tbp-scm-acc__hamburger span{
  display:block; height:2px; width:100%; background: currentColor; border-radius:2px;
}

/* Libellé + flèche (chevron) */
.tbp-scm-acc__label{ font-weight:800; }
.tbp-scm-acc__chev{
  width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease; margin-left:6px;
}
.tbp-scm-accordion[data-open="true"] .tbp-scm-acc__chev{ transform: rotate(135deg); }

/* ----------------------- NOUVELLE ANIMATION DE VOLET ---------------------- */
/* Le bouton reste compact, le panneau s'étire indépendamment en pleine largeur */
.tbp-scm-acc__panel{
  display:block;
  width:100%;
  overflow:hidden;
  height:0;                 /* fermé par défaut */
  opacity:0;
  transform:translateY(-6px);
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  margin-top:.6rem;
  /* transitions pilotées en JS (view.js) pour mesurer la hauteur exacte */
}
/* état ouvert final (après animation JS : height:auto, opacity:1, transform:none) */
.tbp-scm-accordion[data-open="true"] .tbp-scm-acc__panel {}

/* -------------------------- Recherche + Liste ----------------------------- */
.tbp-scm-search { padding:8px 12px; border-bottom:1px solid #ececec; }
.tbp-scm-search__input {
  width:100%; padding:8px 10px; border:1px solid #d7dbe6; border-radius:8px; font-size:14px;
}

.tbp-scm-list { list-style:none; margin:0; padding:0; }
.tbp-scm-list__item + .tbp-scm-list__item { border-top:1px solid #f2f2f2; }
.tbp-scm-list__link {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; text-decoration:none; color:inherit;
}
.tbp-scm-list__link:hover { background:#fafafa; }
.tbp-scm-list__thumb {
  width:32px; height:32px; flex:0 0 32px; border-radius:8px; background:#f2f2f2 center/cover no-repeat;
}
.tbp-scm-list__name {
  flex:1; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tbp-scm-list__badge {
  flex:0 0 auto; min-width:26px; text-align:center; background:#6c5ce7; color:#fff;
  font-weight:800; font-size:12px; padding:3px 8px; border-radius:999px;
}

/* -------------------------------------------------------------------------
   Overrides pour garantir que le bouton ne s’étire jamais
   ------------------------------------------------------------------------- */
.tbp-scm-accordion > .tbp-scm-acc__toggle{
  width:auto !important;
  max-width:max-content;
  flex:0 0 auto;
  align-self:flex-start;
  white-space:nowrap;
}

@media (max-width:768px){
  .tbp-scm-list__link { padding:10px 12px; gap:10px; }
  .tbp-scm-list__thumb { width:28px; height:28px; border-radius:6px; }
  .tbp-scm-list__name { font-size:14px; }
  .tbp-scm-list__badge { font-size:11px; padding:2px 7px; min-width:22px; }
}
/* =========================
   MODE COMPACT (wrapper)
   ========================= */
/* Ajoute la classe "tbp-menu-compact" sur le bloc du menu dans WP */
.tbp-menu-compact{
  position: relative;
  width: max-content;      /* le parent ne prend que la taille du bouton */
  flex: 0 0 auto;
  z-index: 100;
}

/* Le bouton reste compact en toutes circonstances */
.tbp-menu-compact .tbp-scm-acc__toggle{
  width:auto !important;
  max-width:max-content;
  flex:0 0 auto;
  align-self:flex-start;
  white-space:nowrap;
}

/* Le panneau, en mode compact, se détache du flux (overlay) */
.tbp-menu-compact .tbp-scm-acc__panel{
  position: absolute;      /* <— clé: ne pousse rien à droite */
  top: calc(100% + .5rem); /* sous le bouton */
  left: 0;
  width: 86vw;
  max-width: 420px;
  max-height: 80vh;
  overflow: auto;
  margin-top: 0;           /* on annule le margin-top défini plus haut */
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
}

/* =========================
   MOBILE : hamburger seul
   ========================= */
@media (max-width:768px){
  /* Bouton = rond compact, uniquement l'icône hamburger */
  .tbp-menu-compact .tbp-scm-acc__toggle{
    padding: .55rem;                /* cercle plus compact */
    border-radius: 999px;
    gap: 0;
  }
  .tbp-menu-compact .tbp-scm-acc__label,
  .tbp-menu-compact .tbp-scm-acc__chev{
    display:none !important;        /* on cache "Menu" et la flèche */
  }
  .tbp-menu-compact .tbp-scm-acc__hamburger{
    width:22px; height:16px; gap:3px;
  }
  .tbp-menu-compact .tbp-scm-acc__hamburger span{
    height:2px;
  }

  /* Largeur du panneau sur mobile */
  .tbp-menu-compact .tbp-scm-acc__panel{
    width: 92vw;
    left: 0;
  }
}
/* Quand le menu est en mode hamburger compact sur mobile */
@media (max-width:768px){

  /* 1) Réduire l'espace entre les éléments de la ligne */
  .tbp-footer-line{
    gap: .4rem !important;          /* était plus grand */
    justify-content: flex-start;     /* tout collé à gauche */
  }

  /* 2) Le bloc bouton Menu (compact) colle un peu moins d'espace à droite */
  .tbp-menu-compact{
    margin-right: .25rem !important;
  }

  /* 3) Le FAB "Nous trouver" (rose) se rapproche du menu */
  /* si tu as une classe dédiée sur ce bouton, préfère-la (ex: .tbp-fab-loc) */
  #tbpFindBtn,
  .tbp-fab-loc,
  .tbp-footer-line .tbp-fab{
    margin-left: .1rem !important;  /* colle le bouton à gauche */
    transform: translateX(-4px);    /* petit décalage visuel vers la gauche */
  }

  /* 4) Option : bouton "Nous contacter" un peu plus compact pour gagner de la place */
  .tbp-footer-line .tbp-btn-contact{
    padding-inline: .75rem !important;
  }
}

/* =========================
   FILET DE SECURITE DRAWER CONTACT
   ========================= */
/* Le drawer de contact est injecte via un snippet inline. Sur certaines
   navigations de la boutique, il peut rester monte sans etre vraiment ouvert.
   On le garde donc invisible tant que la classe d'ouverture n'est pas presente. */
#tbpContactDrawer:not(.tbp-drawer--open):not([hidden]){
  pointer-events:none !important;
}

#tbpContactDrawer:not(.tbp-drawer--open):not([hidden]) .tbp-drawer__backdrop{
  opacity:0 !important;
}

#tbpContactDrawer:not(.tbp-drawer--open):not([hidden]) .tbp-drawer__panel{
  opacity:0 !important;
  transform:translateX(100%) !important;
}

@media (max-width:640px){
  #tbpContactDrawer:not(.tbp-drawer--open):not([hidden]) .tbp-drawer__panel{
    transform:translateY(110%) !important;
  }
}

/* =========================
   FILET DE SECURITE COMPLIANZ
   ========================= */
/* La boutique utilise une pagination avec navigation cote client. Sur certains
   changements de page, la bannière cookies peut être réinjectée dans le flux
   du document avant de retrouver son état normal. On la force donc à rester
   hors flux pour éviter qu'elle casse toute la mise en page. */
#cmplz-cookiebanner-container{
  position:fixed !important;
  top:auto !important;
  right:10px !important;
  bottom:10px !important;
  left:auto !important;
  width:auto !important;
  max-width:calc(100vw - 20px) !important;
  max-height:calc(100vh - 20px) !important;
  margin:0 !important;
  pointer-events:none !important;
  z-index:99999 !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner{
  position:fixed !important;
  top:auto !important;
  right:10px !important;
  bottom:10px !important;
  left:auto !important;
  width:min(526px, calc(100vw - 20px)) !important;
  max-width:min(526px, calc(100vw - 20px)) !important;
  max-height:calc(100vh - 20px) !important;
  margin:0 !important;
  transform:none !important;
  overflow:auto !important;
  pointer-events:auto !important;
  z-index:99999 !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed{
  display:none !important;
}

#cmplz-manage-consent{
  position:fixed !important;
  top:auto !important;
  right:40px !important;
  bottom:0 !important;
  left:auto !important;
  pointer-events:none !important;
  z-index:99998 !important;
}

#cmplz-manage-consent .cmplz-manage-consent{
  position:fixed !important;
  top:auto !important;
  right:40px !important;
  bottom:-35px !important;
  left:auto !important;
  pointer-events:auto !important;
  max-width:calc(100vw - 40px) !important;
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-hidden,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed{
  display:none !important;
}

@media (max-width:768px){
  #cmplz-cookiebanner-container{
    right:10px !important;
    left:10px !important;
    bottom:10px !important;
    max-width:calc(100vw - 20px) !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    right:10px !important;
    left:10px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* =========================
   FILET DE SECURITE PAGINATION BOUTIQUE
   ========================= */
/* La boutique ne doit afficher qu'une seule pagination par grille produits.
   Si une navigation cote client duplique temporairement le bloc, on masque
   tout nav supplementaire au meme niveau en attendant le nettoyage JS. */
body.woocommerce-shop ul.wc-block-product-template ~ nav.wp-block-query-pagination ~ nav.wp-block-query-pagination,
body.woocommerce-shop ul.wc-block-product-template__responsive ~ nav.wp-block-query-pagination ~ nav.wp-block-query-pagination{
  display:none !important;
}

body.woocommerce-shop nav.wp-block-query-pagination > .wp-block-query-pagination-previous ~ .wp-block-query-pagination-previous,
body.woocommerce-shop nav.wp-block-query-pagination > .wp-block-query-pagination-numbers ~ .wp-block-query-pagination-numbers,
body.woocommerce-shop nav.wp-block-query-pagination > .wp-block-query-pagination-next ~ .wp-block-query-pagination-next{
  display:none !important;
}