/* Boutique Design : la barre d'onglets et l'onglet des caracteristiques.

   Quand la fiche produit est construite avec Elementor, la barre d'onglets est
   celle du widget "Product Data Tabs", dont les reglages s'ecrivent avec six
   classes de specificite : d'ou les !important de ce fichier. */

/* ---------------------------------------------------------------
   Barre d'onglets : une seule ligne, en segments
   --------------------------------------------------------------- */

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 16px !important;
  padding: 5px !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--dilo-fond);
  border: 1px solid var(--dilo-ligne) !important;
  border-radius: 999px;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::-webkit-scrollbar {
  display: none;
}

/* Le filet et les coins arrondis que WooCommerce dessine autour des onglets. */
.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::before,
.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs::after,
.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li::before,
.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li::after {
  display: none !important;
  content: none !important;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px !important;
  font-size: 15px;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--dilo-muted) !important;
  text-decoration: none;
  border-radius: 999px;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li:hover:not(.active) {
  background: var(--dilo-doux) !important;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active {
  background: var(--dilo-primaire) !important;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li.active a {
  color: #FFFFFF !important;
}

.woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a:focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: 2px;
}

/* Les onglets sont detaches du panneau : plus de bord commun a raccorder. */
.woocommerce .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------
   Onglet Caracteristiques : une carte par attribut
   --------------------------------------------------------------- */

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes {
  display: block;
  width: 100%;
  margin: 0;
  background: none;
  border: 0 !important;
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes tbody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes tr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px 18px;
  background: var(--dilo-fond) !important;
  border: 1px solid var(--dilo-ligne);
  border-radius: 14px;
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes th,
.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-style: normal !important;
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dilo-muted);
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes td {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--dilo-primaire);
}

.woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes td p {
  margin: 0 !important;
  font-style: normal !important;
}

/* Valeurs a plusieurs choix : une pastille par choix. */
.dilo-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dilo-pastilles li {
  margin: 0 !important;
  padding: 6px 13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dilo-primaire);
  list-style: none !important;
  background: var(--dilo-doux);
  border: 1px solid var(--dilo-ligne);
  border-radius: 999px;
}

@media (min-width: 768px) {
  .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------
   Mobile : les trois onglets tiennent sur une ligne
   --------------------------------------------------------------- */

@media (max-width: 600px) {
  .woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs {
    padding: 4px !important;
  }

  .woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a {
    padding: 10px 12px !important;
    font-size: 14px;
  }
}

/* iPhone 5 et 5s (320 px) : la barre ne fait que 290 px de large. */
@media (max-width: 380px) {
  .woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs {
    gap: 2px;
    padding: 3px !important;
  }

  .woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li {
    min-width: 0;
  }

  .woocommerce .woocommerce-tabs.wc-tabs-wrapper ul.wc-tabs li a {
    padding: 10px 7px !important;
    font-size: 13px;
  }
}