/* ============================================================
   BIJOUX HÉLÈNE RIU — Modales CSS
   Updated 2026-04-25 — iter 51: side panel right, lightbox swipe, modal nesting z-index, newsletter exit intent, cookie persistent, coachmark tour
   Vars: --night #0E0B1A | --gold #D4B570 | --amethyst #6B4A8C | --cream #E8E0D0
   ============================================================ */

/* ── 0. Z-INDEX HIERARCHY ────────────────────────────────── */
/* backdrop: 1040 | modal: 1050 | side-panel: 1055 | toast: 1060 | lightbox: 1070 | confirm: 1080 | nested-modal: 1090 | coachmark: 1095 */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show {
  z-index: 1040;
  background: rgba(14, 11, 26, 0.85) !important;
  opacity: 1 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal { z-index: 1050; }
.bijoux-toast,
.growl-notification,
[class*="toast"],
[class*="notification-bar"] { z-index: 1060 !important; }

/* ── 1. MODAL CONTAINER — Centrage + animations ──────────── */
/* BUG FIX 2026-04-25: modal fermée doit être hidden (display:none), sinon bloque ATC */
.modal:not(.show):not(.in) {
  display: none !important;
  pointer-events: none !important;
}
.modal.show,
.modal.in {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Entrance: fade-in + scale 0.96→1 */
.modal.fade .modal-dialog {
  transform: translateY(-20px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.22,.68,0,1.2), opacity 0.25s ease-out;
}
.modal.fade.in .modal-dialog,
.modal.fade.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-dialog {
  margin: 1.5rem auto;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
  overflow: hidden;
}
.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* ── 2. BOOTSTRAP MODAL — Base dark ─────────────────────── */
.modal, .modal-content, .modal-dialog .modal-content,
#blockcart-modal .modal-content, #blockcart-modal .modal-header,
#blockcart-modal .modal-body, #blockcart-modal .modal-footer,
#product-modal .modal-content, #product-modal .modal-body,
.product-images-modal, .product-images-modal .modal-content,
.quickview .modal-content {
  background: linear-gradient(180deg, #14102A, #0E0B1A) !important;
  color: var(--cream, #E8E0D0) !important;
  border: 1px solid rgba(107, 74, 140, 0.4) !important;
  border-radius: 12px;
}

.modal-header {
  border-bottom: 1px solid rgba(212, 181, 112, 0.2) !important;
  padding: 1rem 1.25rem;
}
.modal-footer {
  border-top: 1px solid rgba(212, 181, 112, 0.2) !important;
}

.modal-title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--cream) !important;
  font-size: 1.6rem;
}

/* Close button */
.modal .close, .modal-header .close, .modal .close .material-icons, button.close {
  color: var(--gold, #D4B570) !important;
  opacity: 0.85 !important;
  font-size: 1.8rem !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: transparent !important;
  text-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.modal .close:hover { opacity: 1 !important; color: var(--cream) !important; }

/* Generic modal buttons */
.modal-body .btn-primary,
.modal-footer .btn-primary {
  background: var(--gold);
  color: var(--night);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.modal-body .btn-primary:hover,
.modal-footer .btn-primary:hover {
  background: transparent;
  color: var(--gold);
}

.modal-body .btn-secondary,
.modal-footer .btn-secondary,
.modal-body .btn-outline,
.modal-footer .btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  transition: background 0.2s, color 0.2s;
}
.modal-body .btn-secondary:hover,
.modal-footer .btn-secondary:hover {
  background: var(--gold);
  color: var(--night);
}

/* ── 3. MODAL PANIER (blockcart) ────────────────────────── */

/* Header avec icone succes gold + check */
#blockcart-modal .modal-header,
.cart-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#blockcart-modal .modal-title::before,
.cart-modal .modal-title::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E0B1A'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Body : produit thumbnail + info + prix alignes */
#blockcart-modal .modal-body,
.cart-modal .modal-body {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.25rem;
}

#blockcart-modal .modal-body .divide-right {
  border-right: 1px solid rgba(212, 181, 112, 0.2);
  padding-right: 1.5rem;
  flex-shrink: 0;
}

/* Thumbnail */
#blockcart-modal .product-image,
.cart-modal .product-image,
#blockcart-modal img.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(212, 181, 112, 0.2);
  flex-shrink: 0;
  background: rgba(20, 16, 42, 0.4) !important;
  display: block;
}

#blockcart-modal .product-name,
.cart-modal .product-name {
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

/* Prix */
#blockcart-modal .product-price,
.cart-modal .product-price,
#blockcart-modal .price {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
}

/* Total */
#blockcart-modal .product-total,
#blockcart-modal .cart-total,
#blockcart-modal [class*="total"],
#blockcart-modal .subtotals,
#blockcart-modal .breakdown,
.cart-content-modal [class*="total"] {
  background: rgba(20, 16, 42, 0.8) !important;
  color: var(--cream, #E8E0D0) !important;
  border: 1px solid rgba(212, 181, 112, 0.15) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
#blockcart-modal .product-total strong,
#blockcart-modal .product-total span,
#blockcart-modal .cart-total strong,
#blockcart-modal [class*="total"] span,
#blockcart-modal [class*="total"] td {
  color: var(--cream, #E8E0D0) !important;
}

/* Footer : 3 boutons coherents */
#blockcart-modal .modal-footer,
.cart-modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  align-items: center;
  justify-content: flex-end;
}

/* Btn continuer les achats */
#blockcart-modal .modal-footer .btn-continue,
#blockcart-modal .modal-footer [data-dismiss="modal"],
.cart-modal .modal-footer .btn-continue {
  background: transparent !important;
  color: rgba(232, 224, 208, 0.65) !important;
  border: 1px solid rgba(232, 224, 208, 0.25) !important;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  transition: border-color 0.2s, color 0.2s;
  order: 0;
}
#blockcart-modal .modal-footer .btn-continue:hover,
#blockcart-modal .modal-footer [data-dismiss="modal"]:hover {
  border-color: rgba(232, 224, 208, 0.5) !important;
  color: var(--cream) !important;
}

/* Btn voir panier */
#blockcart-modal .modal-footer .btn-secondary,
.cart-modal .modal-footer .btn-secondary,
.cart-content-btn .btn-view-cart {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  order: 1;
}
#blockcart-modal .modal-footer .btn-secondary:hover,
.cart-modal .modal-footer .btn-secondary:hover {
  background: rgba(212, 181, 112, 0.1) !important;
}

/* Btn commander */
#blockcart-modal .modal-footer .btn-primary,
.cart-modal .modal-footer .btn-primary,
#blockcart-modal .cart-content .btn-primary {
  background: var(--gold) !important;
  color: var(--night) !important;
  border-color: var(--gold) !important;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  order: 2;
}
#blockcart-modal .modal-footer .btn-primary:hover,
.cart-modal .modal-footer .btn-primary:hover {
  background: #c4a560 !important;
}

/* Reassurance */
#blockcart-modal #block-reassurance, #product #block-reassurance {
  background: rgba(20, 16, 42, 0.6) !important;
  color: var(--cream) !important;
  border-top: 1px solid rgba(107, 74, 140, 0.3);
}
#block-reassurance li { color: var(--cream) !important; }
#block-reassurance img { filter: brightness(0) invert(0.8) sepia(1) hue-rotate(15deg) saturate(2); }

/* cart-content-btn layout */
.cart-content-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.cart-content-btn .btn-view-cart { flex: 1 1 auto; }

/* ── 4. MODAL QUICKVIEW PRODUIT ───────────────────────────── */
.modal.quickview .modal-dialog {
  max-width: 900px;
}
.modal.quickview .modal-content {
  border-radius: 12px !important;
}
.modal.quickview .modal-body {
  padding: 1.5rem;
}
.modal.quickview .product-cover img,
.modal.quickview .product-images img {
  border-radius: 8px;
  background: transparent !important;
}
.modal.quickview .product-name {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.8rem;
}
.modal.quickview .product-price,
.modal.quickview .current-price {
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 700;
}
.modal.quickview .product-description {
  color: rgba(232, 224, 208, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
}
.modal.quickview .btn-add-to-cart,
.modal.quickview .add-to-cart {
  background: var(--gold) !important;
  color: var(--night) !important;
  border: none !important;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
  width: 100%;
}
.modal.quickview .btn-add-to-cart:hover,
.modal.quickview .add-to-cart:hover {
  background: #c4a560 !important;
}
.modal.quickview .product-variants .color,
.modal.quickview .product-variants .input-color + span {
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.modal.quickview .product-variants .color.selected,
.modal.quickview .product-variants input:checked + span {
  border-color: var(--gold) !important;
}

/* ── 5. MODAL IMAGES PRODUIT ─────────────────────────────── */
.product-images-modal .modal-content,
.js-product-images-modal .modal-content {
  background: rgba(14, 11, 26, 0.97) !important;
  border: 1px solid rgba(107, 74, 140, 0.3) !important;
  border-radius: 12px !important;
  max-height: calc(100vh - 3rem);
  overflow: hidden;
}
.product-images-modal .modal-body,
.js-product-images-modal .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.product-images-modal .modal-header,
.js-product-images-modal .modal-header {
  border-bottom: 1px solid rgba(212, 181, 112, 0.15) !important;
}
.product-images-modal .arrow-left,
.product-images-modal .arrow-right,
.product-images-modal [class*="prev"],
.product-images-modal [class*="next"] {
  color: var(--gold);
  border: 1px solid rgba(212, 181, 112, 0.5);
  background: rgba(14, 11, 26, 0.7);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-images-modal .arrow-left:hover,
.product-images-modal .arrow-right:hover,
.product-images-modal [class*="prev"]:hover,
.product-images-modal [class*="next"]:hover {
  background: rgba(212, 181, 112, 0.15);
}

/* ── 6. COOKIECONSENT (orestbida v3) ──────────────────────── */
#cc-main .cm,
#cc-main .cm--box,
.cm-wrapper {
  background: var(--night) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(107, 74, 140, 0.45) !important;
  color: var(--cream) !important;
  box-shadow: 0 8px 40px rgba(14, 11, 26, 0.9) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#cc-main .cm__body,
#cc-main .cm__footer {
  background: transparent !important;
}

#cc-main .cm__title,
.cm--box .cm__title,
.cm__title {
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
}

#cc-main .cm__desc,
.cm__desc,
.cm--box .cm__desc {
  color: rgba(232, 224, 208, 0.85) !important;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Bouton Refuser */
#cc-main .cm__btn--secondary,
.cm__btn--secondary {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 6px !important;
  padding: 0.5rem 1.1rem !important;
  font-weight: 500;
  transition: background 0.2s !important;
}
#cc-main .cm__btn--secondary:hover,
.cm__btn--secondary:hover {
  background: rgba(212, 181, 112, 0.12) !important;
}

/* Bouton Accepter */
#cc-main .cm__btn[data-role="all"],
.cm__btn[data-role="all"] {
  background: var(--gold) !important;
  color: var(--night) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 6px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 700;
}
#cc-main .cm__btn[data-role="all"]:hover,
.cm__btn[data-role="all"]:hover {
  background: #c4a560 !important;
}

/* Bouton Preferences uniquement */
#cc-main .cm__btn[data-role="necessary"],
.cm__btn[data-role="necessary"] {
  background: transparent !important;
  color: rgba(232, 224, 208, 0.55) !important;
  border: 1px solid rgba(232, 224, 208, 0.2) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.82rem !important;
}
#cc-main .cm__desc a {
  color: var(--gold) !important;
  text-decoration: underline;
}

/* Cookie banner 2 colonnes desktop */
@media (min-width: 768px) {
  #cc-main .cm,
  #cc-main .cm--box {
    max-width: 680px !important;
  }
  #cc-main .cm__body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }
  #cc-main .cm__texts { grid-column: 1; }
  #cc-main .cm__btns,
  #cc-main .cm__footer { grid-column: 2; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
  #cc-main .cm__btn { width: 100% !important; text-align: center; }
}

/* Cookie banner stack mobile */
@media (max-width: 767px) {
  #cc-main .cm,
  #cc-main .cm--box {
    border-radius: 12px 12px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 1rem 1rem 1.5rem !important;
  }
  #cc-main .cm__footer,
  #cc-main .cm__btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem;
  }
  #cc-main .cm__btn { width: 100% !important; text-align: center; }
}

/* ── 7. NEWSLETTER STICKY ────────────────────────────────── */
#bijoux-newsletter-sticky {
  background: rgba(14, 11, 26, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(212, 181, 112, 0.22);
  box-shadow: 0 -4px 40px rgba(107, 74, 140, 0.25), 0 -1px 0 rgba(212, 181, 112, 0.1);
  padding: 1.25rem 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1039;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

#bijoux-newsletter-sticky .newsletter-sticky-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bijoux-nl-text {
  flex: 1 1 200px;
  min-width: 160px;
}
.bijoux-nl-text strong {
  display: block;
  color: var(--gold, #D4B570);
  font-size: .9rem;
  line-height: 1.3;
}
.bijoux-nl-text span {
  font-size: .78rem;
  opacity: .75;
  color: var(--cream, #E8E0D0);
}

.bijoux-nl-form {
  display: flex;
  gap: .5rem;
  flex: 2 1 260px;
  align-items: center;
  flex-wrap: wrap;
}
.bijoux-nl-form input[type="email"] {
  flex: 1 1 160px;
  padding: .5rem .75rem;
  border-radius: 6px;
  border: 1px solid rgba(212, 181, 112, 0.35);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: .85rem;
  min-height: 40px;
}
.bijoux-nl-form input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.bijoux-nl-cta {
  padding: .5rem 1.1rem;
  border-radius: 6px;
  background: var(--amethyst, #6B4A8C);
  color: #fff;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: background 0.2s;
}
.bijoux-nl-cta:hover { background: #4a2f6b; }

#bijoux-newsletter-sticky .close,
#bijoux-newsletter-sticky .nl-dismiss,
#bijoux-nl-dismiss,
#bijoux-newsletter-sticky .newsletter-sticky-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: transparent;
  color: var(--gold, #D4B570);
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.bijoux-nl-close { flex-shrink: 0; }

@keyframes nlFadeIn  { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes nlFadeOut { to   { opacity: 0; visibility: hidden; transform: translateY(100%); } }

/* Apparition après 30s si scroll détecté (classe ajoutée par JS) */
#bijoux-newsletter-sticky {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}
#bijoux-newsletter-sticky.nl-visible {
  animation: nlFadeIn 0.5s cubic-bezier(.22,.68,0,1.15) forwards;
}
#bijoux-newsletter-sticky.auto-hide { animation: nlFadeOut .6s ease-in forwards; }

/* ── 8. IMAGES PRODUIT — fond transparent ─────────────────── */
.product-cover img, .product-cover-modal img, .modal-content .product-cover-modal,
.modal .product-image, .product-images-modal img,
.modal-body img.img-fluid, #blockcart-modal img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}
.modal-body .product-image, .modal-body .product-cover {
  background: rgba(20, 16, 42, 0.4) !important;
  border-radius: 8px;
  padding: 8px;
}

/* ── 9. FOCUS TRAP — outline visible clavier ──────────────── */
.modal[aria-modal="true"]:focus,
.modal .close:focus,
.modal button:focus,
.modal a:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: 2px solid var(--gold, #D4B570);
  outline-offset: 2px;
}
.modal .close:focus:not(:focus-visible),
.modal button:focus:not(:focus-visible) {
  outline: none;
}

/* ── 10. MOBILE <575px — fullscreen + swipe indicator ─────── */
@media (max-width: 575px) {
  #blockcart-modal .modal-dialog,
  .cart-modal .modal-dialog,
  .modal.quickview .modal-dialog {
    margin: 0;
    max-height: 100vh;
    width: 100%;
  }
  #blockcart-modal .modal-content,
  .cart-modal .modal-content,
  .modal.quickview .modal-content {
    border-radius: 12px 12px 0 0 !important;
    max-height: 95vh;
    min-height: 60vh;
  }

  /* Swipe-to-close indicator */
  #blockcart-modal .modal-header,
  .cart-modal .modal-header,
  .modal.quickview .modal-header {
    position: relative;
    padding-top: 1.5rem;
  }
  #blockcart-modal .modal-header::before,
  .cart-modal .modal-header::before,
  .modal.quickview .modal-header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(212, 181, 112, 0.4);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  #blockcart-modal .modal-body,
  .cart-modal .modal-body {
    flex-direction: column;
    padding: 1rem 16px;
  }
  #blockcart-modal .modal-body .divide-right {
    border-right: none;
    border-bottom: 1px solid rgba(212, 181, 112, 0.2);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  #blockcart-modal .modal-footer,
  .cart-modal .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 16px 1.25rem;
  }
  #blockcart-modal .modal-footer .btn-primary,
  #blockcart-modal .modal-footer .btn-secondary,
  #blockcart-modal .modal-footer .btn-continue,
  #blockcart-modal .modal-footer [data-dismiss="modal"],
  .cart-modal .modal-footer .btn-primary,
  .cart-modal .modal-footer .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  #bijoux-newsletter-sticky {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 16px;
  }
  #bijoux-newsletter-sticky .newsletter-sticky-inner {
    flex-direction: column;
    gap: 0.75rem;
  }
  .bijoux-nl-form { width: 100%; }
  .bijoux-nl-form input[type="email"] { width: 100%; }
  .bijoux-nl-close { position: absolute; top: .5rem; right: .5rem; }
  #bijoux-newsletter-sticky { position: fixed; }
}

@media (max-width: 767px) {
  #bijoux-newsletter-sticky {
    z-index: 1039 !important;
    max-height: 35vh;
    overflow-y: auto;
  }
}

/* ── 11. ENTRANCE DIRECTIONS ──────────────────────────────── */
/* .modal-enter-top  → slide depuis le haut  (filtres, search) */
/* .modal-enter-bottom → slide depuis le bas (drawer mobile)   */
/* défaut (aucune classe) → centre (scale + fade) déjà section 1 */

.modal.fade.modal-enter-top .modal-dialog {
  transform: translateY(-40px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.22,.68,0,1.15), opacity 0.25s ease-out;
}
.modal.fade.modal-enter-top.in .modal-dialog,
.modal.fade.modal-enter-top.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

.modal.fade.modal-enter-bottom .modal-dialog {
  transform: translateY(60px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.22,.68,0,1.15), opacity 0.25s ease-out;
}
.modal.fade.modal-enter-bottom.in .modal-dialog,
.modal.fade.modal-enter-bottom.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* ── 12. TOAST STACK — top-right, auto-dismiss progress bar ── */
#bijoux-toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
  max-width: 340px;
  width: calc(100vw - 2.5rem);
}

.bijoux-toast {
  pointer-events: auto;
  background: linear-gradient(135deg, #1a1430, #14102A);
  border: 1px solid rgba(107, 74, 140, 0.5);
  border-radius: 10px;
  padding: 0.75rem 1rem 0.5rem;
  color: var(--cream, #E8E0D0);
  font-size: 0.88rem;
  box-shadow: 0 4px 24px rgba(14, 11, 26, 0.7);
  position: relative;
  overflow: hidden;
  animation: toastIn 0.28s cubic-bezier(.22,.68,0,1.2) forwards;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bijoux-toast.toast-out {
  animation: toastOut 0.25s ease-in forwards;
}

.bijoux-toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bijoux-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.bijoux-toast--success .bijoux-toast-icon { background: var(--gold); color: var(--night, #0E0B1A); }
.bijoux-toast--error   .bijoux-toast-icon { background: #c0392b; color: #fff; }
.bijoux-toast--info    .bijoux-toast-icon { background: var(--amethyst, #6B4A8C); color: #fff; }
.bijoux-toast--warning .bijoux-toast-icon { background: #e67e22; color: #fff; }

.bijoux-toast-title {
  font-weight: 600;
  color: var(--cream);
  flex: 1;
  font-size: 0.9rem;
}
.bijoux-toast-close {
  background: transparent;
  border: none;
  color: rgba(232,224,208,0.45);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 0.25rem;
  flex-shrink: 0;
}
.bijoux-toast-close:hover { color: var(--cream); }

.bijoux-toast-body { color: rgba(232,224,208,0.8); font-size: 0.83rem; }

/* Progress bar auto-dismiss */
.bijoux-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: var(--gold, #D4B570);
  width: 100%;
  transform-origin: left;
  animation: toastProgress var(--toast-duration, 4s) linear forwards;
}
.bijoux-toast--error   .bijoux-toast-progress { background: #c0392b; }
.bijoux-toast--info    .bijoux-toast-progress { background: var(--amethyst); }
.bijoux-toast--warning .bijoux-toast-progress { background: #e67e22; }

@keyframes toastIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; max-height: 200px; margin-bottom: 0; }
  to   { transform: translateX(30px); opacity: 0; max-height: 0;   margin-bottom: -0.6rem; }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Toast stack max 3 visibles — les suivants masqués par JS, mais CSS safe */
#bijoux-toast-container .bijoux-toast:nth-child(n+4) {
  display: none !important;
}

/* ── 13. CONFIRMATION DIALOG ─────────────────────────────── */
.bijoux-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 26, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1078;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s ease-out forwards;
}
.bijoux-confirm-backdrop.hiding { animation: fadeOut 0.18s ease-in forwards; }

.bijoux-confirm-dialog {
  background: linear-gradient(180deg, #1e1538, #14102A);
  border: 1px solid rgba(212, 181, 112, 0.3);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  max-width: 380px;
  width: calc(100vw - 2rem);
  z-index: 1080;
  box-shadow: 0 16px 60px rgba(14, 11, 26, 0.85);
  animation: confirmIn 0.28s cubic-bezier(.22,.68,0,1.2) forwards;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bijoux-confirm-backdrop.hiding .bijoux-confirm-dialog {
  animation: confirmOut 0.18s ease-in forwards;
}

.bijoux-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(230, 126, 34, 0.15);
  border: 2px solid rgba(230, 126, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 1.5rem;
}

.bijoux-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3;
}
.bijoux-confirm-message {
  color: rgba(232,224,208,0.75);
  font-size: 0.88rem;
  text-align: center;
  line-height: 1.5;
}
.bijoux-confirm-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.bijoux-confirm-cancel {
  background: transparent;
  border: 1px solid rgba(232,224,208,0.25);
  color: rgba(232,224,208,0.65);
  border-radius: 7px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bijoux-confirm-cancel:hover {
  border-color: rgba(232,224,208,0.5);
  color: var(--cream);
}
.bijoux-confirm-ok {
  background: var(--gold, #D4B570);
  border: 1px solid var(--gold, #D4B570);
  color: var(--night, #0E0B1A);
  border-radius: 7px;
  padding: 0.55rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-confirm-ok:hover { background: #c4a560; border-color: #c4a560; }

/* Variante destructive explicite */
.bijoux-confirm-ok--danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.bijoux-confirm-ok--danger:hover { background: #a93226; border-color: #a93226; }

@keyframes confirmIn  { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes confirmOut { from { transform: scale(1);   opacity: 1; } to { transform: scale(0.9); opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── 14. IMAGE LIGHTBOX — zoom fullscreen ─────────────────── */
.bijoux-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(10, 8, 20, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.22s ease-out forwards;
  cursor: zoom-out;
}
.bijoux-lightbox.hiding { animation: fadeOut 0.2s ease-in forwards; }

.bijoux-lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 80px rgba(212,181,112,0.12);
  animation: lbIn 0.28s cubic-bezier(.22,.68,0,1.2) forwards;
  cursor: default;
}
.bijoux-lightbox.hiding .bijoux-lightbox-img {
  animation: lbOut 0.18s ease-in forwards;
}

.bijoux-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 11, 26, 0.75);
  border: 1px solid rgba(212, 181, 112, 0.3);
  color: var(--gold, #D4B570);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-lightbox-close:hover { background: rgba(212,181,112,0.15); }

.bijoux-lightbox-prev,
.bijoux-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 11, 26, 0.65);
  border: 1px solid rgba(212,181,112,0.35);
  color: var(--gold);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-lightbox-prev { left: 1rem; }
.bijoux-lightbox-next { right: 1rem; }
.bijoux-lightbox-prev:hover,
.bijoux-lightbox-next:hover { background: rgba(212,181,112,0.15); }

.bijoux-lightbox-counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 11, 26, 0.65);
  color: rgba(232,224,208,0.7);
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(212,181,112,0.2);
}

@keyframes lbIn  { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lbOut { from { transform: scale(1); opacity: 1; }   to { transform: scale(0.88); opacity: 0; } }

/* Trigger sur images produit */
.bijoux-lightbox-trigger {
  cursor: zoom-in;
  position: relative;
}
.bijoux-lightbox-trigger::after {
  content: '⤢';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: rgba(14, 11, 26, 0.65);
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
}
.bijoux-lightbox-trigger:hover::after { opacity: 1; }

/* ── 15. DRAWER MOBILE BOTTOM-SHEET ──────────────────────── */
.bijoux-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 26, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1045;
  animation: fadeIn 0.2s ease-out forwards;
}
.bijoux-drawer-backdrop.hiding { animation: fadeOut 0.2s ease-in forwards; }

.bijoux-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: linear-gradient(180deg, #1a1430, #0E0B1A);
  border: 1px solid rgba(107, 74, 140, 0.45);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(.34,1.48,.64,1), box-shadow 0.38s ease;
  will-change: transform;
  box-shadow: 0 -4px 0 rgba(212,181,112,0);
}
.bijoux-drawer.drawer-open {
  transform: translateY(0);
  box-shadow: 0 -4px 40px rgba(107,74,140,0.3), 0 -1px 0 rgba(212,181,112,0.15);
}
.bijoux-drawer.drawer-closing {
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(.4,0,.6,1), box-shadow 0.2s ease;
  box-shadow: 0 -4px 0 rgba(212,181,112,0);
}

/* Drag handle */
.bijoux-drawer-handle {
  width: 36px;
  height: 4px;
  background: rgba(212,181,112,0.35);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
  cursor: grab;
}
.bijoux-drawer-handle:active { cursor: grabbing; }

.bijoux-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(212,181,112,0.15);
  flex-shrink: 0;
}
.bijoux-drawer-title {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.2rem;
}
.bijoux-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(212,181,112,0.2);
  color: var(--gold);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-drawer-close:hover { background: rgba(212,181,112,0.1); }

.bijoux-drawer-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.25rem;
  flex: 1 1 auto;
}

/* ── 16. BACKDROP CLICK — DIRTY FORM GUARD ───────────────── */
/* Shimmy + border flash sur modal dont le form est dirty */
@keyframes modalShimmy {
  0%,100% { transform: translateX(0) scale(1); }
  20%      { transform: translateX(-6px) scale(1.005); }
  40%      { transform: translateX(6px) scale(1.005); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.modal--dirty-guard .modal-content {
  animation: modalShimmy 0.4s ease-in-out;
  border-color: rgba(230, 126, 34, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
  transition: border-color 0.4s, box-shadow 0.4s;
}

/* Label info affiché sous le header quand form dirty */
.modal-dirty-hint {
  display: none;
  font-size: 0.78rem;
  color: rgba(230, 126, 34, 0.9);
  padding: 0.25rem 1.25rem 0;
  text-align: center;
}
.modal--form-dirty .modal-dirty-hint { display: block; }

/* ── 17. FOCUS TRAP ROBUST — tabindex-aware ──────────────── */
/* Outline renforcé sur tous les éléments focusables dans modal */
.modal[aria-modal="true"] *:focus-visible {
  outline: 2px solid var(--gold, #D4B570) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}
/* Sentinel focus trap nodes (visuellement invisibles) */
.bijoux-focus-sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── 18. ESCAPE KEY — feedback visuel léger ──────────────── */
/* Micro-animation sur le backdrop quand Escape est pressée */
@keyframes backdropPulse {
  0%   { background: rgba(14, 11, 26, 0.85); }
  40%  { background: rgba(14, 11, 26, 0.65); }
  100% { background: rgba(14, 11, 26, 0.85); }
}
.modal-backdrop.escape-pulse {
  animation: backdropPulse 0.3s ease-out;
}

/* ── 19. RESPONSIVE TOAST ────────────────────────────────── */
@media (max-width: 575px) {
  #bijoux-toast-container {
    top: auto;
    bottom: 5rem; /* au-dessus newsletter sticky */
    right: 0.75rem;
    left: 0.75rem;
    max-width: 100%;
    width: auto;
  }
  @keyframes toastIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  @keyframes toastOut {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(20px); opacity: 0; max-height: 0; }
  }
}

/* ── 20. SIDE PANEL RIGHT — slide-in ────────────────────── */
.bijoux-side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 26, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1054;
  animation: fadeIn 0.2s ease-out forwards;
}
.bijoux-side-panel-backdrop.hiding { animation: fadeOut 0.2s ease-in forwards; }

.bijoux-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1055;
  width: min(400px, 92vw);
  background: linear-gradient(180deg, #1a1430, #0E0B1A);
  border-left: 1px solid rgba(107, 74, 140, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(.34,1.28,.64,1), box-shadow 0.36s ease;
  will-change: transform;
  box-shadow: -4px 0 0 rgba(212,181,112,0);
}
.bijoux-side-panel.panel-open {
  transform: translateX(0);
  box-shadow: -8px 0 48px rgba(107,74,140,0.3), -1px 0 0 rgba(212,181,112,0.12);
}
.bijoux-side-panel.panel-closing {
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(.4,0,.6,1), box-shadow 0.2s ease;
  box-shadow: -4px 0 0 rgba(212,181,112,0);
}

.bijoux-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(212,181,112,0.15);
  flex-shrink: 0;
}
.bijoux-side-panel-title {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.25rem;
}
.bijoux-side-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(212,181,112,0.2);
  color: var(--gold);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-side-panel-close:hover { background: rgba(212,181,112,0.1); }

.bijoux-side-panel-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  flex: 1 1 auto;
}
.bijoux-side-panel-footer {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(212,181,112,0.12);
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── 21. LIGHTBOX SWIPE GESTURES ─────────────────────────── */
/* Swipe horizontal hint + in-flight drag state */
.bijoux-lightbox {
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.bijoux-lightbox-img {
  touch-action: none;
  transition: transform 0.12s ease-out;
  will-change: transform;
}
/* Dragging state (classe ajoutée par JS pendant swipe) */
.bijoux-lightbox.lb-dragging .bijoux-lightbox-img {
  transition: none;
}
/* Swipe-out gauche / droite (classes JS pendant exit) */
@keyframes lbSwipeLeft  { to { transform: translateX(-60vw); opacity: 0; } }
@keyframes lbSwipeRight { to { transform: translateX( 60vw); opacity: 0; } }
@keyframes lbSwipeIn    { from { transform: translateX(30vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes lbSwipeInRev { from { transform: translateX(-30vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.bijoux-lightbox-img.lb-exit-left  { animation: lbSwipeLeft  0.25s ease-in forwards; }
.bijoux-lightbox-img.lb-exit-right { animation: lbSwipeRight 0.25s ease-in forwards; }
.bijoux-lightbox-img.lb-enter-next { animation: lbSwipeIn    0.28s cubic-bezier(.22,.68,0,1.1) forwards; }
.bijoux-lightbox-img.lb-enter-prev { animation: lbSwipeInRev 0.28s cubic-bezier(.22,.68,0,1.1) forwards; }

/* Indicateurs de swipe (petits chevrons fantômes) */
.bijoux-lightbox-swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(212,181,112,0.18);
  font-size: 3rem;
  pointer-events: none;
  transition: opacity 0.3s;
}
.bijoux-lightbox-swipe-hint--left  { left: 0.5rem; }
.bijoux-lightbox-swipe-hint--right { right: 0.5rem; }
.bijoux-lightbox:hover .bijoux-lightbox-swipe-hint { opacity: 0; }

/* ── 22. MODAL NESTING — z-index stacking ────────────────── */
/* Niveau 2 : modal ouverte depuis une autre modal */
.bijoux-modal-level-2 {
  z-index: 1090 !important;
}
.bijoux-modal-level-2-backdrop {
  z-index: 1088 !important;
  background: rgba(14, 11, 26, 0.6) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Le dialog parent est atténué (non interactif) pendant qu'une modale enfant est ouverte */
.bijoux-modal-has-child .modal-content {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s;
}
.bijoux-modal-has-child .modal-content::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(14, 11, 26, 0.35);
  z-index: 1;
}
/* Niveau 3 si nécessaire (rare) */
.bijoux-modal-level-3 { z-index: 1100 !important; }
.bijoux-modal-level-3-backdrop { z-index: 1098 !important; }

/* ── 23. NEWSLETTER EXIT INTENT ──────────────────────────── */
#bijoux-exit-intent {
  position: fixed;
  inset: 0;
  z-index: 1082;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#bijoux-exit-intent.ei-visible {
  pointer-events: auto;
  opacity: 1;
}
#bijoux-exit-intent.ei-hiding {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.bijoux-exit-intent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 26, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bijoux-exit-intent-box {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #201840, #0E0B1A);
  border: 1px solid rgba(212, 181, 112, 0.35);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  max-width: 440px;
  width: calc(100vw - 2rem);
  text-align: center;
  box-shadow: 0 20px 80px rgba(14,11,26,0.9), 0 0 0 1px rgba(107,74,140,0.2);
  animation: confirmIn 0.3s cubic-bezier(.22,.68,0,1.2) forwards;
}
#bijoux-exit-intent.ei-hiding .bijoux-exit-intent-box {
  animation: confirmOut 0.2s ease-in forwards;
}
.bijoux-exit-intent-gem {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
  filter: drop-shadow(0 0 12px rgba(212,181,112,0.5));
}
.bijoux-exit-intent-title {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.bijoux-exit-intent-sub {
  color: rgba(232,224,208,0.72);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.bijoux-exit-intent-offer {
  display: inline-block;
  background: rgba(212,181,112,0.1);
  border: 1px solid rgba(212,181,112,0.3);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--gold);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.bijoux-exit-intent-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.bijoux-exit-intent-form input[type="email"] {
  flex: 1 1 180px;
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  border: 1px solid rgba(212,181,112,0.3);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 0.88rem;
}
.bijoux-exit-intent-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.bijoux-exit-intent-cta {
  padding: 0.55rem 1.25rem;
  border-radius: 7px;
  background: var(--gold);
  color: var(--night);
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.bijoux-exit-intent-cta:hover { background: #c4a560; }
.bijoux-exit-intent-dismiss {
  font-size: 0.78rem;
  color: rgba(232,224,208,0.4);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  transition: color 0.2s;
}
.bijoux-exit-intent-dismiss:hover { color: rgba(232,224,208,0.7); }
.bijoux-exit-intent-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(212,181,112,0.2);
  color: var(--gold);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-exit-intent-close:hover { background: rgba(212,181,112,0.1); }

/* ── 24. COOKIE BANNER DISMISSABLE PERSISTENT ────────────── */
/* Extension du §6 : état dismissed (classe sur body) */
body.bijoux-cookie-dismissed #cc-main { display: none !important; }

/* Bouton re-ouvrir les préférences (flottant, coin bas gauche) */
.bijoux-cookie-reopen {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1038;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 11, 26, 0.85);
  border: 1px solid rgba(107, 74, 140, 0.45);
  color: var(--gold);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.bijoux-cookie-dismissed .bijoux-cookie-reopen {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.3s 0.5s, transform 0.3s 0.5s, background 0.2s;
}
.bijoux-cookie-reopen:hover { background: rgba(107,74,140,0.35); transform: scale(1.1) !important; }
.bijoux-cookie-reopen[title] { /* tooltip natif suffisant */ }

/* Persistent dismiss animation */
@keyframes cookieDismiss {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(20px); opacity: 0; pointer-events: none; }
}
#cc-main.cc-dismissing { animation: cookieDismiss 0.3s ease-in forwards; }

/* ── 25. TOUR / COACHMARK ────────────────────────────────── */
/* Overlay sombre avec trou cutout sur l'élément cible */
.bijoux-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1093;
  pointer-events: none;
}
/* Le trou est géré par clip-path côté JS via CSS custom property */
.bijoux-tour-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 26, 0.72);
  -webkit-mask-image: var(--tour-mask, none);
  mask-image: var(--tour-mask, none);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: auto;
}

/* Spotlight ring autour de l'élément (injecté via JS comme div positionné) */
.bijoux-tour-spotlight {
  position: fixed;
  z-index: 1094;
  border: 2px solid rgba(212,181,112,0.7);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(212,181,112,0.12), 0 0 32px rgba(212,181,112,0.2);
  pointer-events: none;
  transition: top 0.3s cubic-bezier(.22,.68,0,1.1), left 0.3s, width 0.3s, height 0.3s, border-radius 0.3s;
  animation: spotlightPulse 2s ease-in-out infinite;
}
@keyframes spotlightPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(212,181,112,0.12), 0 0 32px rgba(212,181,112,0.2); }
  50%     { box-shadow: 0 0 0 6px rgba(212,181,112,0.18), 0 0 48px rgba(212,181,112,0.3); }
}

/* Bulle coachmark */
.bijoux-coachmark {
  position: fixed;
  z-index: 1095;
  background: linear-gradient(160deg, #1e1538, #14102A);
  border: 1px solid rgba(212,181,112,0.35);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(14,11,26,0.8);
  animation: confirmIn 0.25s cubic-bezier(.22,.68,0,1.2) forwards;
  pointer-events: auto;
}
.bijoux-coachmark::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #1e1538;
  border: 1px solid rgba(212,181,112,0.35);
  transform: rotate(45deg);
}
/* Flèche position variants (classe JS) */
.bijoux-coachmark.arrow-top::before    { top: -6px; left: 50%; margin-left: -5px; border-right: none; border-bottom: none; }
.bijoux-coachmark.arrow-bottom::before { bottom: -6px; left: 50%; margin-left: -5px; border-left: none; border-top: none; }
.bijoux-coachmark.arrow-left::before   { left: -6px; top: 50%; margin-top: -5px; border-right: none; border-top: none; }
.bijoux-coachmark.arrow-right::before  { right: -6px; top: 50%; margin-top: -5px; border-left: none; border-bottom: none; }

.bijoux-coachmark-step {
  font-size: 0.72rem;
  color: var(--amethyst, #6B4A8C);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.bijoux-coachmark-title {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.bijoux-coachmark-text {
  color: rgba(232,224,208,0.75);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.bijoux-coachmark-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.bijoux-coachmark-skip {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: rgba(232,224,208,0.4);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
  margin-right: auto;
}
.bijoux-coachmark-skip:hover { color: rgba(232,224,208,0.7); }
.bijoux-coachmark-prev {
  background: transparent;
  border: 1px solid rgba(212,181,112,0.25);
  color: rgba(212,181,112,0.7);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bijoux-coachmark-prev:hover { border-color: var(--gold); color: var(--gold); }
.bijoux-coachmark-next {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--night);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.bijoux-coachmark-next:hover { background: #c4a560; }
/* Indicateur de progression en points */
.bijoux-coachmark-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-right: 0.25rem;
}
.bijoux-coachmark-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(212,181,112,0.25);
  transition: background 0.2s, transform 0.2s;
}
.bijoux-coachmark-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}
/* Tour closing */
.bijoux-coachmark.cm-hiding { animation: confirmOut 0.18s ease-in forwards; }
.bijoux-tour-overlay.tour-hiding::before { animation: fadeOut 0.22s ease-in forwards; }
.bijoux-tour-spotlight.tour-hiding { opacity: 0; transition: opacity 0.22s ease-in; }