/* ===== Vars rapides à ajuster ===== */
:root{
  --fo-tabs-radius: 16px;
  --fo-tabs-space: 16px;           /* padding interne du conteneur */
  --fo-sticky-offset: 80px;        /* hauteur de ton header sur desktop */
  --fo-sticky-offset-m: 64px;      /* hauteur du header sur mobile */
}

/* ===== Conteneur global des tabs ===== */
.single-product .woocommerce-tabs.wc-tabs-wrapper{
  margin-top: 40px;
  background: #fff;
  border-radius: var(--fo-tabs-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
  /* on gère les paddings via les enfants pour éviter que la <ul> colle au bord */
}

/* ===== Barre d’onglets (desktop) ===== */
.single-product .wc-tabs{
  position: sticky;
  top: var(--fo-sticky-offset);
  z-index: 9;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px var(--fo-tabs-space);
  list-style: none;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid #eee;
}

/* Onglets pill */
.single-product .wc-tabs li{ margin:0; padding:0; flex:0 0 auto; }
.single-product .wc-tabs li a{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  border:1px solid #eaeaea;
  background:#fafafa;
  color:#333;
  transition:all .2s ease;
}
.single-product .wc-tabs li a:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.single-product .wc-tabs li.active a,
.single-product .wc-tabs li a:focus{ background:#111; color:#fff; border-color:#111; }

/* ===== Panneaux ===== */
.single-product .wc-tab.panel{
  padding: 22px var(--fo-tabs-space) 26px;
  animation: foFade .25s ease;
}
@keyframes foFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.single-product .wc-tab.panel > h2{
  font-size: 22px;
  margin: 0 0 16px;
}

/* Texte & listes */
.single-product .wc-tab.panel p{ margin:0 0 12px; color:#333; }
.single-product .wc-tab.panel ul{ margin:0 0 16px 1.2em; }

/* ===== Table Infos complémentaires ===== */
.single-product table.shop_attributes{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid #eee;
}
.single-product table.shop_attributes tr:nth-child(even){ background:#fafafa; }
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{ padding:14px 16px; vertical-align:top; }
.single-product table.shop_attributes th{ width:280px; font-weight:700; color:#111; }
.single-product table.shop_attributes td p{ margin:0; }

/* ===== Avis ===== */
.single-product #review_form_wrapper{
  margin-top:16px; padding:16px; border:1px dashed #e5e5e5;
  border-radius:12px; background:#fcfcfc;
}
.single-product #review_form input.submit{
  appearance:none; border:0; border-radius:999px; padding:10px 18px;
  font-weight:700; background:#111; color:#fff; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.single-product #review_form input.submit:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* ===== Mobile : on masque la barre d’onglets, on passe en accordéon ===== */
@media (max-width: 991px){ /*768*/
  .single-product .wc-tabs{ display:none; }
  .single-product .woocommerce-tabs.wc-tabs-wrapper{ border-radius:12px; }
  .single-product .wc-tab.panel{ padding:0 var(--fo-tabs-space) var(--fo-tabs-space); }
}

/* Accordéon mobile */
.single-product .fo-acc-item{ border-top:1px solid #eee; }
.single-product .fo-acc-item:first-child{ border-top:0; }

.single-product .fo-acc-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:14px var(--fo-tabs-space);
  background:#fff;
  border:0;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.single-product .fo-acc-head:focus{ outline:2px solid #111; outline-offset:2px; }

.single-product .fo-acc-chevron{
  transition: transform .2s ease;
}
.single-product .fo-acc-item[aria-expanded="true"] .fo-acc-chevron{
  transform: rotate(180deg);
}

.single-product .fo-acc-panel{
  padding: 0 var(--fo-tabs-space) var(--fo-tabs-space);
  display: none;
}
.single-product .fo-acc-item[aria-expanded="true"] .fo-acc-panel{
  display: block;
}

/* Table responsive dans l’accordéon */
@media (max-width: 640px){
  .single-product table.shop_attributes,
  .single-product table.shop_attributes tr,
  .single-product table.shop_attributes th,
  .single-product table.shop_attributes td{
    display:block; width:100%;
  }
  .single-product table.shop_attributes th{
    margin-top:12px; padding-bottom:4px; border-bottom:0; width:auto;
  }
  .single-product table.shop_attributes td{ padding-top:0; }
}

/* Offset sticky mobile (si tu réactives un menu sticky mobile) */
@media (max-width: 991px){/*768*/
  :root{ --fo-sticky-offset: var(--fo-sticky-offset-m); }
}

/*--------------------------------*/

/* ===== Accordéon partout (desktop + mobile) ===== */

/* on cache la barre d’onglets WooCommerce */
.single-product .wc-tabs{ display:none !important; }

/* conteneur général (carte arrondie) */
.single-product .woocommerce-tabs.wc-tabs-wrapper{
  margin-top: 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* items de l’accordéon */
.single-product .fo-acc-item{ border-top:1px solid #eee; }
.single-product .fo-acc-item:first-child{ border-top:0; }

/* tête d’accordéon (gros boutons) */
.single-product .fo-acc-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:16px 20px;              /* ← padding généreux desktop */
  background:#fff;
  border:0;
  font-weight:700;
  font-size:16px;
  text-align:left;
  cursor:pointer;
}
.single-product .fo-acc-head:focus{ outline:2px solid #111; outline-offset:2px; }

/* chevron */
.single-product .fo-acc-chevron{ transition: transform .2s ease; }
.single-product .fo-acc-item[aria-expanded="true"] .fo-acc-chevron{ transform: rotate(180deg); }

/* panneau de contenu avec VRAI padding */
.single-product .fo-acc-panel{
  padding: 0 20px 20px;           /* ← espace autour du texte */
  display: none;
}
.single-product .fo-acc-item[aria-expanded="true"] .fo-acc-panel{ display:block; }

/* contenu interne plus propre */
.single-product .fo-acc-panel > h2{ font-size:22px; margin: 6px 0 14px; }
.single-product .fo-acc-panel p{ margin:0 0 12px; color:#333; }
.single-product .fo-acc-panel ul{ margin:0 0 16px 1.2em; }

/* tableau "infos complémentaires" lisible */
.single-product table.shop_attributes{
  width:100%; border-collapse:collapse; margin-top:8px;
  overflow:hidden; border-radius:12px; border:1px solid #eee;
}
.single-product table.shop_attributes tr:nth-child(even){ background:#fafafa; }
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{ padding:14px 16px; vertical-align:top; }
.single-product table.shop_attributes th{ width:280px; font-weight:700; color:#111; }
.single-product table.shop_attributes td p{ margin:0; }

/* formulaire avis */
.single-product #review_form_wrapper{
  margin-top:16px; padding:16px; border:1px dashed #e5e5e5;
  border-radius:12px; background:#fcfcfc;
}
.single-product #review_form input.submit{
  appearance:none; border:0; border-radius:999px; padding:10px 18px;
  font-weight:700; background:#111; color:#fff; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.single-product #review_form input.submit:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* responsive tableau (petits écrans) */
@media (max-width: 640px){
  .single-product table.shop_attributes,
  .single-product table.shop_attributes tr,
  .single-product table.shop_attributes th,
  .single-product table.shop_attributes td{ display:block; width:100%; }
  .single-product table.shop_attributes th{ margin-top:12px; padding-bottom:4px; border-bottom:0; width:auto; }
  .single-product table.shop_attributes td{ padding-top:0; }
}

/* ===== Layout 1 ou 2 colonnes (facultatif) ===== */
/* wrapper qui contiendra l’accordéon et, s’il existe, les produits liés */
.single-product .fo-after-summary{
  max-width: 1200px; margin: 32px auto; display: grid; gap: 24px;
  grid-template-columns: 1fr;         /* par défaut : tabs pleine largeur */
}
@media (min-width: 1024px){
  .single-product .fo-after-summary.has-related{
    grid-template-columns: 1fr 1fr;   /* moitié / moitié si related présents */
    align-items: start;
  }
}
/* style du bloc related à droite */
.single-product .fo-after-summary .related.products{
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:20px;
}
.single-product .fo-after-summary .related.products > h2{ margin-top:0; }


/*--------------------------*/









