/* ============================================
   ELEVN — Ajustements réactions des reels
   ============================================ */

/* PICKER : SVG dans .reactions_item (légèrement plus gros) */
.reel-actions .reactions-container .reactions_item .elevn-reaction-svg,
.lightbox-post .reactions-container .reactions_item .elevn-reaction-svg {
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle;
}

.reel-actions .reactions-container .reactions_item,
.lightbox-post .reactions-container .reactions_item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ICÔNE ACTIVE : agrandir le conteneur .inline-emoji */
.reel-actions .action-btn .inline-emoji,
.lightbox-post .action-btn .inline-emoji {
  width: 32px !important;
  height: 32px !important;
}

.reel-actions .action-btn .inline-emoji .elevn-reaction-svg,
.lightbox-post .action-btn .inline-emoji .elevn-reaction-svg {
  width: 100% !important;
  height: 100% !important;
  vertical-align: middle;
}

/* Picker reel : garder les items sur une seule ligne sans casser le show/hide */
.reel-actions .reactions-container,
.lightbox-post .reactions-container {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* Icônes ELEVN comment/share dans les reels : battre la règle 24px de style.min.css */
.reels-wrapper .reel-actions .elevn-footer-svg,
.reel-actions .elevn-footer-svg,
.lightbox-post .reel-actions .elevn-footer-svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #fff !important;
  color: #fff !important;
  fill: none !important;
  vertical-align: middle;
}


/* Masquer le header quand le panneau commentaire d'un reel est ouvert */
body.elevn-reel-comments-open .main-header {
  display: none !important;
}

/* Masquer le bouton son quand le panneau commentaire d'un reel est ouvert */
.reel-container.comments-shown .elevn-one-sound {
  display: none !important;
}

/* Bouton son des reels : plus discret (plus petit, fond plus léger) */
.elevn-one-sound {
  width: 34px !important;
  height: 34px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  font-size: 15px !important;
  opacity: 0.5;
}

/* Retirer le flex du conteneur d'icônes header en mobile (icônes mieux réparties + cloche alignée au bouton son) */
@media (max-width: 768px) {
  .main-header .col-12.col-md-5.col-lg-4 {
    display: block !important;
  }
}
/* Fix barre One : visibilite pilotee par JS via data-elevn-active (pas .hidden, faux sur mobile) */
.elevn-one-progress-fill{transform:none!important}

/* Bouton son des videos du feed : tres discret, icone lisible via ombre */
.elevn-feed-sound-toggle{
  background: rgba(0,0,0,0.2) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.elevn-feed-sound-toggle.is-on{
  background: rgba(255,255,255,0.35) !important;
  color: #000 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.7) !important;
}

/* Lissage de la barre de progression One (interpole entre les timeupdate ~250ms) */
.elevn-one-progress-fill{ transition: width .25s linear; }
.elevn-one-progress-fill.elevn-no-anim{ transition: none !important; }

/* Hint "Tap for sound" : cacher icones son tant que le son n'est pas active */
body.elevn-sound-off .elevn-one-sound{ display: none !important; }
.elevn-tap-sound-hint{
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65); color: #fff; font-size: 16px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px; z-index: 1000001;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.elevn-tap-sound-hint.is-visible{ opacity: 1; transition: opacity .4s ease; }