/* ═══════════════════════════════════════════════════════
   popup-prestation.css — Maïna Events
   Importer APRÈS main.css dans index.tpl :
   <link rel="stylesheet" href="assets/css/popup-prestation.css">
═══════════════════════════════════════════════════════ */
.lightbox-trigger{
  cursor: pointer;
}
/* ── Overlay ─────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* hidden natif = invisible ET retiré du flux d'accessibilité */
.popup-overlay[hidden] {
  display: none;
}

/* State : visible (ajouté par JS) */
.popup-overlay.is-open {
  display: flex;
}

/* ── Backdrop ────────────────────────────────────── */
.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(92, 61, 46, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdropIn .3s ease forwards;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Boîte principale ────────────────────────────── */
.popup-box {
  position: relative;
  z-index: 1;
  background: var(--white, #ffffff);
  border-radius: 1.5rem;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(92, 61, 46, .25);
  animation: boxIn .35s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes boxIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Fermeture */
.popup-overlay.is-closing .popup-box {
  animation: boxOut .25s ease forwards;
}
.popup-overlay.is-closing .popup-backdrop {
  animation: backdropOut .25s ease forwards;
}

@keyframes boxOut {
  to { opacity: 0; transform: translateY(20px) scale(.97); }
}
@keyframes backdropOut {
  to { opacity: 0; }
}

/* ── Bouton close ────────────────────────────────── */
.popup-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: var(--brown, #5C3D2E);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.popup-close:hover {
  background: var(--terra, #C47E5A);
  color: #fff;
  transform: scale(1.1) rotate(90deg);
}

.popup-close:focus-visible {
  outline: 2px solid var(--terra, #C47E5A);
  outline-offset: 3px;
}

/* ── Scroll container ────────────────────────────── */
.popup-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Scrollbar discrète */
.popup-scroll::-webkit-scrollbar { width: 5px; }
.popup-scroll::-webkit-scrollbar-track { background: transparent; }
.popup-scroll::-webkit-scrollbar-thumb {
  background: rgba(196,126,90,.3);
  border-radius: 99px;
}

/* ── Hero image ──────────────────────────────────── */
.popup-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
}

.popup-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}

.popup-overlay.is-open .popup-hero-img {
  /*transform: scale(1.04);*/
}

.popup-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(92,61,46,.7) 0%,
    rgba(92,61,46,.15) 50%,
    transparent 100%
  );
}

.popup-hero-title {
  position: absolute;
  bottom: 1.2rem;
  left: 1.5rem;
  right: 3.5rem;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ── Corps ───────────────────────────────────────── */
.popup-body {
  padding: 1.5rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Sous-titre */
.popup-sous {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--terra, #C47E5A);
  min-height: 0;
}

.popup-sous:empty { display: none; }

/* ── Badges ✓ ────────────────────────────────────── */
.popup-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.popup-badges li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(196,126,90,.09);
  border: 1px solid rgba(196,126,90,.25);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  color: var(--brown, #5C3D2E);
  white-space: nowrap;
}

.badge-check {
  color: var(--terra, #C47E5A);
  font-size: .9rem;
  font-weight: 600;
}

/* ── Label de section ────────────────────────────── */
.popup-section-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terra, #C47E5A);
  margin-bottom: .9rem;
}

/* ── Grille produits ─────────────────────────────── */
.popup-produits-wrap { }

.popup-produits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .9rem;
}

.popup-produit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.popup-produit-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid rgba(196,126,90,.15);
}

.popup-produit-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.popup-produit-item:hover .popup-produit-img-wrap img {
  /*transform: scale(1.08);*/
}

.popup-produit-titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: .88rem;
  font-weight: 500;
  color: var(--brown, #5C3D2E);
  line-height: 1.3;
}

/* ── Liste détails texte ─────────────────────────── */
.popup-details-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.popup-details-list li {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  color: var(--brown-l, #7A5240);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.popup-details-list li::before {
  content: '•';
  color: var(--terra, #C47E5A);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── CTA row ─────────────────────────────────────── */
.popup-cta-row {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.popup-btn-primary,
.popup-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: .83rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .28s;
  text-decoration: none;
}

.popup-btn-primary {
  background: var(--terra, #C47E5A);
  color: #fff;
  border: 2px solid var(--terra, #C47E5A);
}

.popup-btn-primary:hover {
  background: var(--terra-d, #A6633F);
  border-color: var(--terra-d, #A6633F);
  transform: scale(1.03);
}

.popup-btn-outline {
  background: transparent;
  color: var(--terra, #C47E5A);
  border: 2px solid var(--terra, #C47E5A);
}

.popup-btn-outline:hover {
  background: var(--terra, #C47E5A);
  color: #fff;
}

.popup-btn-primary:focus-visible,
.popup-btn-outline:focus-visible {
  outline: 2px solid var(--terra, #C47E5A);
  outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .popup-overlay { padding: 0; align-items: flex-end; }
  .popup-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .popup-hero { height: 200px; }
  .popup-hero-title { font-size: 1.8rem; }
  .popup-body { padding: 1.2rem 1.2rem 2rem; }
  .popup-cta-row { flex-direction: column; }
  .popup-btn-primary,
  .popup-btn-outline { justify-content: center; }
}

/* ── Animations réduites ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .popup-box,
  .popup-backdrop,
  .popup-hero-img,
  .popup-close { animation: none !important; transition: none !important; }
}

/* ── Scroll body lock (ajouté par JS) ───────────────────── */
body.popup-open { overflow: hidden; }