/* --- Base --- */
.tmb-nav * { box-sizing: border-box; }
.tmb-nav a { text-decoration: none; }

.tmb-nav{
  width:100%;
  background:#ffffff;
  border-bottom:1px solid #e9edf2;
  position:relative;
  z-index:50;
}

.tmb-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 16px;
}

.tmb-nav,
.tmb-inner{
  overflow: visible !important;
}

/* --- Menu principal --- */
.tmb-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
}

.tmb-item{
  position:relative;
}

/* --- Liens principaux --- */
.tmb-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:#1f2937;
  transition: background .15s ease, color .15s ease;
}

.tmb-link:hover{
  background:#f4f6f8;
  color:#111827;
}

.tmb-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(90,194,231,.25);
}

/* Chevron */
.tmb-item.has-dropdown > .tmb-link::after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform:rotate(45deg);
  margin-left:4px;
  transition: transform .15s ease;
}

.tmb-item.has-dropdown:hover > .tmb-link::after,
.tmb-item.has-dropdown.is-open > .tmb-link::after{
  transform:rotate(-135deg);
}

/* --- Dropdown --- */
.tmb-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  padding:8px;
  margin:0;
  list-style:none;

  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.04);

  transform:translateY(-6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}

/* ouverture */
@media (hover: hover){
  .tmb-item.has-dropdown:hover > .tmb-dropdown{
    display:block;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
}

.tmb-item.is-open > .tmb-dropdown{
  display:block;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* items dropdown */
.tmb-dropdown-item{ margin:2px 0; }

.tmb-dropdown-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  color:#374151;
  transition:background .15s ease, color .15s ease;
}

.tmb-dropdown-link:hover{
  background:#f4f6f8;
  color:#111827;
}

/* --- Boutons Woo --- */
.tmb-woo{
  display:flex;
  align-items:center;
  gap:10px;
}

.tmb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#1f2937;
  transition:all .15s ease;
  text-decoration:none;
  position:relative;
}

.tmb-btn:hover{
  background:#f4f6f8;
  border-color:#d1d5db;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.tmb-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.tmb-btn-icon svg{
  width:16px;
  height:16px;
  display:block;
}

.tmb-btn-text{
  white-space:nowrap;
}

/* bouton compte accent - Background noir */
.tmb-btn-account{
  background:#111 !important;
  border-color:#111 !important;
  color:#ffffff !important;
}

.tmb-btn-account:hover{
  background:#333 !important;
  border-color:#333 !important;
  color:#ffffff !important;
}

.tmb-btn-account .tmb-btn-icon svg{
  stroke:#ffffff !important;
}

/* bouton panier */
.tmb-btn-cart{
  position:relative;
}

/* badge panier */
.tmb-cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:2px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:#ef4444;
  color:#ffffff;
  flex-shrink:0;
  line-height:1;
}

/* --- Bouton Hamburger Mobile --- */
.tmb-mobile-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s ease;
  flex-shrink:0;
}

.tmb-mobile-toggle:hover{
  background:#f4f6f8;
}

.tmb-mobile-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(90,194,231,.25);
}

.tmb-mobile-toggle-icon{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:20px;
  height:16px;
}

.tmb-mobile-toggle-icon span{
  display:block;
  width:100%;
  height:2px;
  background:#1f2937;
  border-radius:2px;
  transition:all .3s ease;
}

.tmb-mobile-toggle.is-open .tmb-mobile-toggle-icon span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}

.tmb-mobile-toggle.is-open .tmb-mobile-toggle-icon span:nth-child(2){
  opacity:0;
}

.tmb-mobile-toggle.is-open .tmb-mobile-toggle-icon span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}

/* --- Overlay Mobile --- */
.tmb-mobile-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:9998;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.tmb-mobile-overlay.is-active{
  display:block;
  opacity:1;
  pointer-events:auto;
}

/* --- Menu Mobile --- */
.tmb-mobile-menu{
  display:none;
  position:fixed;
  top:0;
  right:-100%;
  width:85%;
  max-width:400px;
  height:100vh;
  background:#ffffff;
  box-shadow:-4px 0 20px rgba(0,0,0,0.15);
  z-index:9999;
  overflow-y:auto;
  transition:right .3s ease;
  padding:20px;
}

.tmb-mobile-menu.is-open{
  right:0;
}

.tmb-mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
  padding-bottom:20px;
  border-bottom:1px solid #e5e7eb;
}

.tmb-mobile-menu-logo{
  font-size:20px;
  font-weight:700;
  color:#1f2937;
}

.tmb-mobile-menu-logo .tmb-logo-link{
  display:inline-block;
  text-decoration:none;
  color:inherit;
}

.tmb-mobile-menu-logo .tmb-logo-img{
  max-height:40px;
  width:auto;
  display:block;
}

.tmb-mobile-menu-logo .tmb-logo-text{
  font-size:20px;
  font-weight:700;
  color:#1f2937;
}

.tmb-mobile-menu-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s ease;
  color:#6b7280;
}

.tmb-mobile-menu-close:hover{
  background:#f4f6f8;
  color:#1f2937;
}

.tmb-mobile-menu-close svg{
  width:24px;
  height:24px;
}

.tmb-mobile-list{
  list-style:none;
  margin:0;
  padding:0;
}

.tmb-mobile-item{
  margin-bottom:8px;
}

.tmb-mobile-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:10px;
  font-size:16px;
  font-weight:500;
  color:#1f2937;
  transition:background .15s ease, color .15s ease;
  text-decoration:none;
}

.tmb-mobile-link:hover{
  background:#f4f6f8;
  color:#111827;
}

.tmb-mobile-item.has-dropdown > .tmb-mobile-link::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform:rotate(-45deg);
  transition:transform .15s ease;
}

.tmb-mobile-item.has-dropdown.is-open > .tmb-mobile-link::after{
  transform:rotate(45deg);
}

.tmb-mobile-dropdown{
  display:none;
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  background:#f9fafb;
  border-radius:10px;
  overflow:hidden;
}

.tmb-mobile-item.is-open > .tmb-mobile-dropdown{
  display:block;
}

.tmb-mobile-dropdown-item{
  margin:0;
}

.tmb-mobile-dropdown-link{
  display:block;
  padding:12px 16px 12px 32px;
  font-size:15px;
  color:#374151;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

.tmb-mobile-dropdown-link:hover{
  background:#f4f6f8;
  color:#111827;
}

.tmb-mobile-woo{
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tmb-mobile-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  border-radius:10px;
  font-size:16px;
  font-weight:500;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#1f2937;
  transition:all .15s ease;
  text-decoration:none;
  width:100%;
}

.tmb-mobile-btn:hover{
  background:#f4f6f8;
  border-color:#d1d5db;
}

.tmb-mobile-btn-account{
  background:#111 !important;
  border-color:#111 !important;
  color:#ffffff !important;
}

.tmb-mobile-btn-account:hover{
  background:#333 !important;
  border-color:#333 !important;
  color:#ffffff !important;
}

/* --- Responsive Desktop --- */
@media (max-width:860px){
  .tmb-mobile-toggle{
    display:flex;
  }
  
  .tmb-list{
    display:none;
  }
  
  .tmb-woo{
    display:none;
  }
  
  .tmb-mobile-menu{
    display:block;
  }
  
  .tmb-logo-wrapper{
    flex:1;
  }
  
  .tmb-inner{
    padding:12px 16px;
  }
}

/* --- Responsive Mobile --- */
@media (max-width:720px){
  .tmb-mobile-menu{
    width:90%;
  }
  
  .tmb-topbar-inner{
    padding:8px 10px;
  }
  
  .tmb-topbar-left{
    gap:8px;
  }
}


/* --- Header wrapper --- */
.tmb-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

/* --- Topbar --- */
.tmb-topbar{
  width: 100%;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf2;
  font-size: 13px;
}

.tmb-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 16px;
}

.tmb-topbar-left,
.tmb-topbar-right{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.tmb-topbar-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color:#374151;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.tmb-topbar-link:hover{
  background:#eef2f7;
  color:#111827;
}

.tmb-ico{
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tmb-ico svg{
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* Logo WhatsApp vert */
.tmb-whatsapp-link .tmb-ico svg{
  fill: #25D366 !important; /* Couleur verte officielle WhatsApp */
}

.tmb-whatsapp-link:hover .tmb-ico svg{
  fill: #20BA5A !important; /* Vert plus foncé au hover */
}

/* --- Search Form --- */
.tmb-search-wrapper{
  position: relative;
  z-index: 1000;
}

.tmb-search-form{
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: visible; /* Changé de hidden à visible pour voir le dropdown */
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Sur mobile, le formulaire doit être positionné relativement */
@media (max-width: 720px){
  .tmb-search-form{
    position: relative !important;
  }
}

.tmb-search-form:focus-within{
  border-color: #5ac2e7;
  box-shadow: 0 0 0 3px rgba(90,194,231,.1);
}

.tmb-search-input{
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 14px;
  color: #1f2937;
  background: transparent;
  width: 200px;
  min-width: 150px;
}

.tmb-search-input::placeholder{
  color: #9ca3af;
}

.tmb-search-submit{
  border: none;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease;
  border-left: 1px solid #e5e7eb;
}

.tmb-search-submit:hover{
  color: #5ac2e7;
}

.tmb-search-submit svg{
  width: 18px;
  height: 18px;
}

/* --- Search Results Dropdown --- */
.tmb-search-results{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 400px;
  max-width: 500px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.05);
  z-index: 10000;
  max-height: 500px;
  overflow-y: auto;
  margin-top: 4px;
}

/* Sur mobile, positionner juste en dessous de la barre de recherche et prendre toute la largeur */
@media (max-width: 720px){
  .tmb-search-wrapper{
    position: relative !important;
  }
  
  .tmb-search-results{
    position: fixed !important;
    top: auto !important; /* Sera calculé par JavaScript pour être juste sous la barre */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important; /* Prend toute la largeur de la fenêtre */
    min-width: 0 !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 200px) !important; /* Hauteur max adaptée */
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 0 !important; /* Padding vertical seulement */
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    border-radius: 0 !important; /* Pas de bordures arrondies pour prendre toute la largeur */
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  }
  
  /* Forcer le recalcul avec !important pour tous les styles critiques quand les résultats sont affichés */
  .tmb-search-results.has-results{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }
  
  /* Le contenu interne peut avoir du padding */
  .tmb-search-results-list{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .tmb-search-view-all{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .tmb-search-no-results{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.tmb-search-loading{
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.tmb-search-results.has-results{
  display: block;
}

.tmb-search-results-list{
  list-style: none;
  margin: 0;
  padding: 8px;
}

.tmb-search-result-item{
  margin: 0;
  padding: 0;
}

.tmb-search-result-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: background .15s ease;
}

.tmb-search-result-link:hover{
  background: #f4f6f8;
}

.tmb-search-result-image{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.tmb-search-result-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tmb-search-result-title{
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tmb-search-result-price{
  font-size: 13px;
  font-weight: 600;
  color: #5ac2e7;
}

.tmb-search-no-results{
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.tmb-search-view-all{
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  text-align: center;
}

.tmb-search-view-all-link{
  display: inline-block;
  padding: 10px 20px;
  background: #5ac2e7;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, transform .1s ease;
}

.tmb-search-view-all-link:hover{
  background: #4ab3d6;
  transform: translateY(-1px);
}

/* Responsive search */
@media (max-width: 720px){
  .tmb-search-wrapper{
    position: relative !important;
  }
  
  .tmb-search-form{
    width: 100%;
    max-width: 100%;
  }
  
  .tmb-search-input{
    width: 100%;
    min-width: 0;
    flex: 1;
  }
}

/* --- Hidden button (quote) --- */
.is-hidden{
  display:none !important;
}

/* Responsive: on compacte un peu */
@media (max-width: 720px){
  .tmb-topbar-inner{
    padding: 8px 10px;
  }
  .tmb-topbar-left{
    gap: 8px;
  }
}

.tmb-topbar-inner,
.tmb-inner {
  max-width: 1200px;   /* largeur confortable, ajuste si besoin */
  margin: 0 auto;      /* centre le contenu */
  padding-left: 20px;
  padding-right: 20px;
}