/* T3SG Tabs (Instagram-like) — Phase 1 */
.t3sg-tabs { margin-top: 14px; }

/* Action bar (icons aligned right above tabs) */
.t3sg-actionbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  margin: 0 0 8px 0;
  flex-wrap: wrap;
}
.t3sg-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:6px 8px;
  border-radius: 10px;
  line-height:1.1;
}
.t3sg-action:hover{ text-decoration:none; }
.t3sg-action-icon{ display:inline-flex; }
.t3sg-action-icon-img{
  width:18px;
  height:18px;
  display:block;
}
.t3sg-action-title{
  font-family: 'Outfit';
  color:#000;
  display:inline-block;
  font-size: 15px;
  white-space: normal;
}


.t3sg-tablist {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  /* No horizontal scrollbar: allow labels to wrap instead */
  overflow-x: visible;
  flex-wrap: wrap;
}
.t3sg-tab {
  /* Allow tabs to shrink so long labels can wrap (no scrollbars) */
  flex: 0 0 auto;
  width: auto;
  min-width: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  text-transform: none;
  letter-spacing: .2px;
  opacity: .75;
  border-bottom: 2px solid transparent;}

/* Title wrapper (so you can hide titles per breakpoint later) */
.t3sg-tab-title{
  font-family: 'Outfit';
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* prefer 2 lines instead of overflow */
  overflow: hidden;
  white-space: normal;
  text-align: left;
}
.t3sg-tab:hover { opacity: 1; }
.t3sg-tab.is-active {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: #000;
}
.t3sg-tabpanes { padding-top: 14px; }
.t3sg-tabpane { display: none; }
.t3sg-tabpane.is-active { display: block; }

/* Ensure hidden panes don't create spacing */
.t3sg-upload-after-pagination { margin-top: 0; }

/* Small screens */
@media (max-width: 520px) {
  .t3sg-tab { font-size: 14px; padding: 10px 8px; }
}


.t3sg-tab-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;opacity:.85;}
.t3sg-tab-icon svg{display:block;width:18px;height:18px;}
.t3sg-tab-icon img{display:block;width:18px;height:18px;}

/* Tab description (shown at the top of each tab content) */
.t3sg-tab-description{
  font-family:'Outfit';
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
  font-size: 14px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Bottom Tabs Bar (mobile-app style)
   - Always visible on all screen sizes
   - Full-width black bar at the bottom
   - Icon centered above the label
   -------------------------------------------------------------------------- */

/* Reserve space so content never hides behind the fixed bar */
.t3sg-tabs{
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* The bar */
.t3sg-tablist{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(84px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
  z-index: 999999;
}

/* Each tab button */
.t3sg-tab{
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 13px 8px;
  margin: 0;
  color: #fff;
  opacity: .5;
  border: 0;
  border-bottom: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.t3sg-tab:hover{ opacity: 1; }

/* Active state */
.t3sg-tab.is-active{
  opacity: 1;
  font-weight: 600;
}

/* Icon above label */
.t3sg-tab-icon{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  opacity: 1;
}
.t3sg-tab-icon svg{ width: 26px; height: 26px; }
.t3sg-tab-icon img{ width: 26px; height: 26px; }

.t3sg-tab-title{
  font-size: 13px;
  line-height: 1.12;
  text-align: center;
  -webkit-line-clamp: 1;
}


/* Hide only the intro text when viewing the Messages tab */
.t3sg-intro-injected.t3sg-intro-hide-text .t3sg-intro__text{display:none !important;}
.t3sg-intro-injected.t3sg-intro-hide-text .t3sg-intro-read-more{display:none !important;}



/* YouTube embeds should remain clickable */
.t3sg-embed iframe{ pointer-events:auto; }


/* YouTube play overlay (ensures playback after tab-refresh) */
.t3sg-youtube-embed{ position:relative; }
.t3sg-youtube-play-overlay{ position:absolute; inset:0; z-index:5; background:transparent; border:0; padding:0; cursor:pointer; }
.t3sg-youtube-embed.is-playing .t3sg-youtube-play-overlay{ display:none; }


/* YouTube carousel (multiple intro videos) */
.t3sg-youtube-carousel{ position:relative; width:100%; }
.t3sg-youtube-carousel .t3sg-carousel-track{ width:100%; }
.t3sg-youtube-carousel .t3sg-carousel-slide{ width:100%; }
.t3sg-youtube-carousel .t3sg-carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  width:38px;
  height:38px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:0;          /* hide glyph baseline issues */
  line-height:0;
}
.t3sg-youtube-carousel .t3sg-carousel-prev::before,
.t3sg-youtube-carousel .t3sg-carousel-next::before{
  display:block;
  font-size:22px;
  line-height:1;
  transform:translateY(-1px); /* small optical centering */
}
.t3sg-youtube-carousel .t3sg-carousel-prev::before{ content:'‹'; }
.t3sg-youtube-carousel .t3sg-carousel-next::before{ content:'›'; }
.t3sg-youtube-carousel .t3sg-carousel-prev{ left:10px; }
.t3sg-youtube-carousel .t3sg-carousel-next{ right:10px; }
.t3sg-youtube-carousel .t3sg-carousel-arrow:hover{ background:rgba(0,0,0,.75); }

/* --------------------------------------------------------------------------
   T3SG - Mobile scroll hardening
   Prevent the fixed bottom tab bar / transparent media overlays from stealing
   vertical touch scrolling on some mobile browsers.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 782px){
  .t3sg-gallery-wrapper,
  .t3sg-intro-injected,
  .t3sg-tabs,
  .t3sg-tabpanes,
  .t3sg-tabpane{
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-y: auto;
  }

  .t3sg-tablist{
    pointer-events: none;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  .t3sg-tab{
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .t3sg-youtube-play-overlay{
    touch-action: pan-y pinch-zoom;
  }
}

/* T3SG YouTube stack: compatible with Complianz.
   Important: no overlay, no carousel, no absolute iframe wrapper.
   The iframe is a normal YouTube iframe so the bottom controls, fullscreen, progress bar,
   volume and settings remain clickable after Complianz consent. */
.t3sg-youtube-stack{display:flex;flex-direction:column;gap:24px;width:100%;}
.t3sg-youtube-stack .t3sg-youtube-frame{width:100%;background:#000;border-radius:12px;overflow:visible;line-height:0;}
.t3sg-youtube-stack iframe.t3sg-youtube-native{
  display:block!important;
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:260px;
  aspect-ratio:16/9;
  border:0!important;
  pointer-events:auto!important;
}
.t3sg-youtube-stack .t3sg-youtube-play-overlay,
.t3sg-youtube-stack .t3sg-carousel-arrow,
.t3sg-youtube-stack .t3sg-carousel-track,
.t3sg-youtube-stack .t3sg-carousel-slide{display:none!important;}
.t3sg-youtube-stack .cmplz-placeholder-element,
.t3sg-youtube-stack .cmplz-video,
.t3sg-youtube-stack .cmplz-activated{pointer-events:auto!important;}
/* Divi/FitVids sometimes wraps YouTube iframes and crops the control bar. */
.t3sg-youtube-stack .fluid-width-video-wrapper{padding-top:0!important;height:auto!important;overflow:visible!important;}
.t3sg-youtube-stack .fluid-width-video-wrapper iframe.t3sg-youtube-native{position:static!important;}

/* T3SG YouTube carousel - compatible Complianz/FitVids, no overlay on iframe */
.t3sg-youtube-carousel{position:relative;width:100%;overflow:visible;}
.t3sg-youtube-carousel .t3sg-carousel-track{width:100%;}
.t3sg-youtube-carousel .t3sg-carousel-slide{width:100%;}
.t3sg-youtube-carousel .t3sg-youtube-frame{width:100%;background:#000;border-radius:12px;overflow:visible;line-height:0;position:relative;z-index:1;}
.t3sg-youtube-carousel iframe.t3sg-youtube-native{
  display:block!important;
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:260px;
  aspect-ratio:16/9;
  border:0!important;
  pointer-events:auto!important;
  z-index:auto!important;
}
.t3sg-youtube-carousel .fluid-width-video-wrapper{padding-top:0!important;height:auto!important;overflow:visible!important;position:static!important;}
.t3sg-youtube-carousel .fluid-width-video-wrapper iframe.t3sg-youtube-native{position:static!important;}
.t3sg-youtube-carousel .t3sg-youtube-play-overlay,
.t3sg-youtube-carousel .t3sg-youtube-overlay,
.t3sg-youtube-carousel .t3sg-video-overlay{display:none!important;pointer-events:none!important;}
.t3sg-youtube-carousel .cmplz-placeholder-element,
.t3sg-youtube-carousel .cmplz-video,
.t3sg-youtube-carousel .cmplz-activated{pointer-events:auto!important;}

/* Les flèches sont volontairement SOUS la vidéo, jamais par-dessus l'iframe YouTube. */
.t3sg-youtube-carousel .t3sg-carousel-controls{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:14px!important;
  position:relative!important;
  z-index:2!important;
  pointer-events:auto!important;
}
.t3sg-youtube-carousel .t3sg-carousel-arrow{
  position:static!important;
  transform:none!important;
  z-index:2!important;
  border:0!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  cursor:pointer!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  pointer-events:auto!important;
}
.t3sg-youtube-carousel .t3sg-carousel-prev::before,
.t3sg-youtube-carousel .t3sg-carousel-next::before{display:block;font-size:26px;line-height:1;transform:translateY(-1px);}
.t3sg-youtube-carousel .t3sg-carousel-prev::before{content:'‹';}
.t3sg-youtube-carousel .t3sg-carousel-next::before{content:'›';}


/* T3SG: onglets bas plus visibles */
@media (max-width: 520px){
  .t3sg-tabs{ padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .t3sg-tablist{ height: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .t3sg-tab{ padding: 12px 5px; }
  .t3sg-tab-title{ font-size: 12.5px; line-height: 1.1; }
}