/* ===================================================================
   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;
  }
}