/* JLV Book Carousel - compact, theme-safe */
.jlv-book-carousel {
  position: relative;
  margin: 1.25rem 0;

  /* 🔒 Empêche le composant de dépasser la largeur de la page */
  max-width: 100%;
  /* "clip" est plus précis que hidden pour ne pas créer de scrolls fantômes */
  overflow-x: clip; /* fallback auto => voir règle suivante */
}

/* Fallback si "clip" n'est pas supporté (anciens Chromium/Firefox) */
@supports not (overflow: clip) {
  .jlv-book-carousel { overflow-x: hidden; }
}

.jlv-book-carousel__title {
  margin: 0 0 .75rem 0;
  line-height: 1.2;
}

/* IMPORTANT: ne pas couper le pop-up */
.jlv-book-carousel__viewport {
  position: relative;

  /* Le viewport ne doit pas laisser sortir visuellement le track */
  overflow-x: hidden;   /* garde le layout propre */
  overflow-y: visible;  /* permet au pop-up de dépasser vers le haut */

  /* Evite les effets de "tirer la page" sur mobile */
  overscroll-behavior-x: contain;
  overflow-x: hidden !important;
}

.jlv-book-carousel__track {
  display: flex;
  gap: 12px;
  align-items: stretch;

  /* Mobile scroll */
  overflow-x: auto;
  overflow-y: visible; /* ⚠️ ignoré par Firefox, utile sur Chromium/Safari */

  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 14px 2px;
  scrollbar-width: thin;
  touch-action: pan-x;

  /* 🔧 S'assure que le track ne "force" pas de largeur au parent */
  max-width: 100%;
  /* Evite que le track induise un min-content plus large que 100% */
  min-width: 0;
}

.jlv-book {
  position: relative;
  flex: 0 0 calc((100% - (12px * 4)) / 5); /* 5 visibles desktop */
  scroll-snap-align: start;
  min-width: 120px; /* garde lisible en mobile */

  /* Ne pas clipper le pop-up */
  overflow: visible;
}

.jlv-book__link {
  display: block;
  text-decoration: none;
  border: 0;
}

.jlv-book__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);

  /* 🖼️ Sécurité : s'assurer qu'aucune image intrinsèque ne pousse la carte */
  max-width: 100%;
}

/* ---------- POPUP ---------- */
.jlv-book__popup {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -10px);
  width: min(320px, 92vw);
  max-width: 320px;
  z-index: 50;

  /* État caché : ne pas intercepter les gestes ni focus */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.jlv-book__popup-inner {
  background: rgba(20, 20, 22, 0.96);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  font-size: 14px;
  line-height: 1.25;

  /* Evite compression/retour à la ligne bizarres */
  max-width: 320px;
  white-space: normal;
}

.jlv-book__t1 {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.jlv-book__t2 {
  font-size: 12.5px;
  opacity: .9;
  margin: 0 0 8px 0;
}

.jlv-book__pitch {
  font-size: 13px;
  opacity: .95;
  margin: 0 0 8px 0;
}

.jlv-book__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  opacity: .85;
}

/* ✅ Desktop hover + clavier */
.jlv-book:hover .jlv-book__popup,
.jlv-book:focus-within .jlv-book__popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -14px);
  pointer-events: auto; /* uniquement quand visible */
}

/* ✅ Passe au-dessus des voisins quand actif */
.jlv-book:hover,
.jlv-book:focus-within,
.jlv-book.is-active {
  z-index: 60;
}

/* ✅ Mobile: class togglée par JS */
.jlv-book.is-active .jlv-book__popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -14px);
  pointer-events: auto; /* uniquement quand visible */
}

/* Mobile: 2-3 covers visibles selon largeur */
@media (max-width: 900px) {
  .jlv-book {
    flex: 0 0 180px;
    min-width: 180px;
  }
}
@media (max-width: 520px) {
  .jlv-book {
    flex: 0 0 150px;
    min-width: 150px;
  }
}

/* ✅ Fix ciblé Gutenberg / Twenty Twenty-Four (wrappers qui coupent les overlays) */
.wp-block-group .jlv-book-carousel,
.wp-block-group .jlv-book-carousel__viewport,
.wp-block-group .jlv-book-carousel__track {
  overflow-y: visible !important;
}

/* Ne pas casser les thèmes très stylés */
.jlv-book-carousel img { max-width: 100%; }

/* =========================================
   FIX GENERAUX: limiter le clipping externe
   ========================================= */

/* 1) Permettre aux overlays de dépasser dans le flux du contenu */
.entry-content,
.wp-site-blocks,
.wp-block-post-content,
.wp-block-group,
.wp-block-group.is-layout-constrained,
.wp-block-group.is-layout-flow {
  overflow: visible !important;
}



/* 3) Z-index élevé pour le popup (n'aide pas contre le clipping d'ancêtre scrollable,
      mais garantit le passage au-dessus des voisins) */
.jlv-book__popup {
  z-index: 9999;
}

/* ===== Couleur liens dans le popup ===== */
.jlv-book__popup-inner a,
.jlv-book__popup-inner a:visited {
  color: #4FC3F7;  /* bleu lisible sur fond sombre */
  text-decoration: none;
  font-weight: 300;
}

.jlv-book__popup-inner a:hover,
.jlv-book__popup-inner a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

/* ============================
   Petites améliorations mobile
   ============================ */

/* Evite que le scroll horizontal "remonte" à la page */
.jlv-book-carousel__track {
  overscroll-behavior-x: contain;
  overflow-x: auto !important; 
}

/* Réduit très légèrement l'offset sur écrans ultra-petits
   pour limiter le risque de clipping vertical dans Firefox */
@media (max-width: 380px) {
  .jlv-book__popup {
    transform: translate(-50%, -8px);
  }
}
/* Bloque le popup car le fait de placer les images dans un conteneur l'empêche de fonctionner correctement */
.jlv-book .jlv-book__popup {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.jlv-book__popup,
.jlv-book:hover .jlv-book__popup,
.jlv-book:focus-within .jlv-book__popup,
.jlv-book.is-active .jlv-book__popup {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
[data-jlv-book-carousel="1"] {
  max-width: 800px; /* ou 900px selon ton design */
  margin: 0 auto;
}
[data-jlv-book-carousel="1"] {
  overflow-x: auto;
}