/* ===== Variables / gabarit ===== */
.inq-slider {
  --slide-w: 1100px; /* largeur image */
  --slide-radius: 30px; /* arrondi image + encart */
  --bubble-w: 400px; /* largeur encart */
  --bubble-h: 200px; /* hauteur encart */
  --bubble-overflow: 60px; /* dépassement sous l’image */
  --dot-size: 30px; /* puces */
  position: relative;
}
@media (max-width: 42em) {
  .inq-slider {
    --slide-w: min(96vw, 1100px);
    --bubble-w: min(72vw, 400px);
    --bubble-h: 160px;
    --bubble-overflow: 200px;
  }
}

/* Laisser déborder l’encart + réserve pour puces+flèche */
.inq-slider.swiper {
  overflow: visible;
  /* padding-bottom: calc(var(--bubble-overflow) + var(--dot-size) + 24px); */
  padding-bottom: 7rem;
  margin-bottom: 1rem;
}

/* Alignement visuel des slides */
.inq-slider .swiper-wrapper {
  align-items: flex-start;
}

/* Slide largeur fixe + débord autorisé */
.inq-card {
  position: relative;
  width: var(--slide-w);
  overflow: visible;
}

/* ===== Image + voile blanc uniquement sur INACTIVES ===== */
.inq-visual {
  position: relative;
  border-radius: var(--slide-radius);
  overflow: hidden;
}
.inq-media {
  display: block;
  width: var(--slide-w);
  height: auto;
  border-radius: var(--slide-radius);
  object-fit: cover;
}

/* Par défaut (avant init Swiper) : pas de voile */
.inq-visual {
  position: relative;
  border-radius: var(--slide-radius);
  overflow: hidden;
}
.inq-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* blanc 70% */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Après init seulement : INACTIVES => voile ON */
/* .inq-slider.swiper-initialized
  .swiper-slide:not(.swiper-slide-active)
  .inq-visual::before {
  opacity: 1;
} */
.inq-slider.swiper-initialized .swiper-slide-prev .inq-visual::before,
.inq-slider.swiper-initialized .swiper-slide-next .inq-visual::before {
  opacity: 0.8;
}

/* la slide active reste nette (au cas où) */
.inq-slider.swiper-initialized .swiper-slide-active .inq-visual::before {
  opacity: 0 !important;
}

/* ===== Encart couleur (400×247), débord 60px, alpha piloté ===== */
.inq-bubble {
  --bg-alpha: 90%; /* active */
  position: absolute;
  left: 30px;
  bottom: calc(-1 * var(--bubble-overflow));
  width: var(--bubble-w);
  height: var(--bubble-h);
  background: color-mix(in srgb, var(--accent) var(--bg-alpha), transparent);
  border-radius: var(--slide-radius);
  color: #1b1b1b;
  padding: 18px 22px;
  z-index: 2;
}
@media (max-width: 48em) {
  .inq-bubble {
    left: 0;
    right: 16px;
    bottom: 0;
    top: 140px;
    width: auto;
    height: auto;
    min-height: 380px;
  }
}
/* INACTIVES => 70% (texte inchangé) */
.inq-slider.swiper-initialized
  .swiper-slide:not(.swiper-slide-active)
  .inq-bubble {
  --bg-alpha: 70%;
}

/* Flèche (x piloté par --tail-x via JS) */
.inq-bubble::after {
  content: "";
  position: absolute;
  bottom: -18px;
  width: 28px;
  height: 18px;
  left: calc(var(--tail-x, 40px) - 14px);
  background: color-mix(in srgb, var(--accent) var(--bg-alpha), transparent);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Texte encart */
.inq-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
}
.inq-slogan,
.inq-excerpt {
  margin: 0.15rem 0 0.6rem;
  line-height: 1.45;
  font-family: var(--wp--preset--font-family--secondary);
  font-size: var(--wp--preset--font-size--xs);
}
.inq-link {
  text-decoration: underline;
}

/* ===== Pagination : au niveau du slider (plus safe) ===== */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 0px;
  left: 3rem;
  right: auto;
  width: auto; /* recalé par le JS */
  transform: none !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  /* visibility: hidden; /* visible après init 
  opacity: 0; */
}

/* Puces 30×30, couleur injectée par renderBullet() */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  width: var(--dot-size) !important;
  height: var(--dot-size) !important;
  border-radius: 50%;
  background: var(--dot, #bbb) !important;
  margin: 0 !important;
  opacity: 1 !important;
  border: 1px solid var(--wp--preset--color--base) !important;
  box-shadow: none !important;
  transform: none !important;
}
.inq-slider > .swiper-pagination .swiper-pagination-bullet-active {
  transform: none !important;
}

/* ===== Responsive soft ===== */
@media (max-width: 1200px) {
  .inq-slider {
    --slide-w: min(96vw, 1100px);
    --bubble-w: min(72vw, 400px);
  }
  .inq-media {
    width: var(--slide-w);
  }
}
@media (max-width: 42em) {
  .inq-bubble {
    left: 16px;
    right: 16px;
    width: auto;
    height: auto;
    min-height: var(--bubble-h);
  }
}
/* Le slider ne doit pas laisser sortir le contenu à l’écran */
.inq-slider.swiper {
  /* overflow: hidden;*/
  /* On garde une réserve pour la bulle (qui déborde sous l'image)
     et pour les puces afin qu'elles ne soient pas coupées */
  padding-bottom: 7rem;
  margin-bottom: 2rem;
}

/* Pagination au niveau du slider (on ne la déplace pas en JS) */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 0; /* on ne la recalcule pas : centrage natif via flex */
  right: 0;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center; /* centrée, simple, fiable */
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

/* Puces 30×30 colorées (couleur injectée par renderBullet) */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
  margin: 0;
  opacity: 1;
}

/* Voile blanc UNIQUEMENT sur les inactives (après init) */
.inq-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.inq-slider.swiper-initialized
  .swiper-slide:not(.swiper-slide-active)
  .inq-visual::before {
  opacity: 1;
}
.inq-slider.swiper-initialized
  .swiper-slide.swiper-slide-active
  .inq-visual::before {
  opacity: 0 !important;
}

/* pagination absolue (le JS se charge du left/width) */
/* Pagination au niveau du slider : laissée libre, le JS fixe left/width */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 0; /* le JS calcule left */
  right: auto;
  width: auto; /* le JS calcule width */
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
  margin: 0;
  opacity: 1;
}

/* puces = boutons accessibles (Entrée/Espace) */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
}
.inq-slider > .swiper-pagination .swiper-pagination-bullet:focus {
  outline: 2px solid #000;
  outline-offset: 2px; /* anneau focus visible */
}

/* pagination absolue (le JS se charge du left/width) */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: auto;
  width: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

/* puces = boutons accessibles (Entrée/Espace) */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
}
.inq-slider > .swiper-pagination .swiper-pagination-bullet:focus {
  outline: 2px solid #000;
  outline-offset: 2px; /* anneau focus visible */
}

/* voile blanc UNIQUEMENT sur prev/next ; active nette */
.inq-visual {
  position: relative;
  border-radius: var(--slide-radius);
  overflow: hidden;
}
.inq-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.inq-slider.swiper-initialized .swiper-slide-prev .inq-visual::before,
.inq-slider.swiper-initialized .swiper-slide-next .inq-visual::before {
  opacity: 1;
}
.inq-slider.swiper-initialized .swiper-slide-active .inq-visual::before {
  opacity: 0 !important;
}

/* pagination : le JS gère left/width pour aligner la puce ACTIVE sous la flèche */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: auto;
  width: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

/* puces 30×30 en <button> (accessibles) */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
  margin: 0;
  opacity: 1;
}
.inq-slider > .swiper-pagination .swiper-pagination-bullet:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* encart : alpha 90% actif / 70% inactif (si tu utilises ce réglage) */
.inq-bubble {
  --bg-alpha: 90%;
  background: color-mix(in srgb, var(--accent) var(--bg-alpha), transparent);
}
.inq-slider.swiper-initialized
  .swiper-slide:not(.swiper-slide-active)
  .inq-bubble {
  --bg-alpha: 70%;
}
.inq-bubble::after {
  background: color-mix(in srgb, var(--accent) var(--bg-alpha), transparent);
}

/* Voile blanc 70% UNIQUEMENT sur prev / next ; active nette */
.inq-visual {
  position: relative;
  border-radius: var(--slide-radius);
  overflow: hidden;
}
.inq-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.inq-slider.swiper-initialized .swiper-slide-prev .inq-visual::before,
.inq-slider.swiper-initialized .swiper-slide-next .inq-visual::before {
  opacity: 1;
}
.inq-slider.swiper-initialized .swiper-slide-active .inq-visual::before {
  opacity: 0 !important;
}

/* Pagination : on la laisse au niveau du slider ; le JS règle left/width */
.inq-slider > .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: auto;
  width: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

/* Puces accessibles (Entrée/Espace) */
.inq-slider > .swiper-pagination .swiper-pagination-bullet {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, #bbb);
  margin: 0;
  opacity: 1;
}
.inq-slider > .swiper-pagination .swiper-pagination-bullet:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.inq-bubble {
  text-decoration: none;
}
.swiper-button-prev,
.swiper-button-next {
  color: var(--wp--preset--color--primary) !important;
  width: 64px !important;
  height: 64px !important;
  display: grid;
  place-items: center;
}