/* ========================= refonte2 V 3.7.10
   Bundles – Base + Variables
   ========================= */
:root{
  --ir-bg:#f8f8f8;
  --ir-active-bg:#fff7da;
  --ir-bg-active: var(--ir-active-bg); /* alias compat */

  --ir-header-inactive-alpha:.04;
  --ir-header-active: rgba(0,115,170,.08);

  --ir-border:#d7d7d7;
  --ir-shadow:0 2px 6px rgba(0,0,0,.08);
  --ir-text:#333;

  --ir-accent:#00aaff;
  --ir-radius:10px;

  --ir-header-size:17px;
  --ir-text-size:14px;
  --ir-btn-text:15px;

  /* Toggle tailles (fusion des 2 blocs) */
  --ir-toggle-size:28px;
  --ir-toggle-inner:22px;
  --ir-toggle-radio:18px;
}

/* =========================
   Conteneur / Etat
   ========================= */
.bundle-box{
  position:relative;
  background:var(--ir-bg,#f8f8f8);
  border:1px solid var(--ir-border,#d8d8d8);
  border-radius:var(--ir-radius,10px);
  box-shadow:var(--ir-shadow,0 2px 6px rgba(0,0,0,.06));
  padding:12px;
  margin:12px 0;
  color:var(--ir-text,#333);
}
.bundle-box.active{ background:var(--ir-bg-active,#fcf4eb); }
.bundle-box.ir-fallback-click:not(.active){ cursor:pointer; }

/* espace entre items */
.bundle-box .bundle-item + .bundle-item{ margin-top:10px; }

/* overlay click fallback */
.ir-box-activator{
  position:absolute; inset:0;
  background:transparent; border:0; padding:0; margin:0;
  cursor:pointer;
}
.bundle-box.active > .ir-box-activator{ display:none; }

/* =========================
   Header (normal)
   ========================= */
.bundle-header{
  cursor:pointer;
  padding:2px;
  border-radius: calc(var(--ir-radius, 10px) * 0.8);
  background:rgba(0,0,0,var(--ir-header-inactive-alpha,.04));

  /* fallback vieux navigateurs */
  display:flex;
  align-items:center;
  gap:8px;

  user-select:none;
  -webkit-user-select:none;
}

/* si grid supporté, on repasse en grid */
@supports (display:grid){
  .bundle-header{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:8px;
  }
}

.bundle-box.active .bundle-header{
  background:var(--ir-header-active,rgba(0,115,170,.08));
}

/* titre */
.bundle-header .ir-bundle-title,
.bundle-header strong{
  font-weight:700;
  font-size:var(--ir-header-size,17px);
  line-height:1.28;
  color:var(--ir-text,#333);
  white-space:normal;
  word-break:break-word;
}

/* mode normal (toggle_before=false) :
   titre légèrement trop haut -> descend de 1–3px */
.bundle-item:not(.toggle-before) .bundle-header .ir-bundle-title,
.bundle-item:not(.toggle-before) .bundle-header strong{
  position: relative;
  top: var(--ir-title-normal-shift, 1px);
}

/* inactif : on pâlit seulement la barre */
.bundle-item.item-inactive > .bundle-header{
  opacity:.55;
  transition:opacity .18s ease;
}

/* =========================
   Toggle (SVG / radio) — rétrocompat (sans :is)
   ========================= */

/* base */
.bundle-header .toggle-bundle,
.bundle-header .ir-toggle-check{
  width:var(--ir-toggle-size,28px);
  height:var(--ir-toggle-size,28px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.20);
  transform-origin:center;
}

/* actif */
.bundle-box.active .bundle-header .toggle-bundle,
.bundle-box.active .bundle-header .ir-toggle-check{
  border-color:#444;
}

.bundle-header .toggle-bundle svg,
.bundle-header .ir-toggle-check svg{
  width:var(--ir-toggle-inner,22px);
  height:var(--ir-toggle-inner,22px);
  fill:#555;
  opacity:.05;
}
.bundle-box.active .bundle-header .toggle-bundle svg,
.bundle-box.active .bundle-header .ir-toggle-check svg{
  opacity:1;
}

/* fallback icônes texte */
.icon-plus::before{ content:"+"; color:#333; font-weight:700; }
.icon-check::before{ content:"✓"; color:transparent; }
.bundle-box.active .icon-check::before{
  color:#fff; background:#7ef2b8; border-radius:14px; padding:2px 6px;
}

/* radio fallback */
.icon-radio::before{
  content:"";
  display:block;
  width:var(--ir-toggle-radio,18px);
  height:var(--ir-toggle-radio,18px);
  border-radius:50%;
}
.bundle-box.active .icon-radio::before{
  background:var(--ir-accent,#0073aa);
}

/* forcé off */
.bundle-item > .bundle-header .toggle-bundle.ir-forced-off svg,
.bundle-item > .bundle-header .toggle-bundle.ir-forced-off .ir-toggle-svg{
  display:none !important;
}
.bundle-item > .bundle-header .toggle-bundle.ir-forced-off.icon-radio::before{
  display:none !important;
}



/* ===== TOGGLE-BEFORE : toggle à gauche du bloc complet ===== */

/* 1) On réserve la place du toggle sur TOUT le bundle-head */
.bundle-item.toggle-before .bundle-head{
  position:relative;
  padding:2px;
  padding-left: calc(var(--ir-toggle-size, 28px) + 13px);
  padding-right: calc(var(--ir-toggle-size, 28px) + 13px); /* ✅ fusion du “patch centré” */

  border-radius: calc(var(--ir-radius, 10px) * 0.8);
  background:rgba(0,0,0,var(--ir-header-inactive-alpha,.04));
}

.bundle-box.active .bundle-item.toggle-before .bundle-head{
  background:var(--ir-header-active,rgba(0,115,170,.08));
}

/* 2) Le header ne doit plus re-créer padding / background */
.bundle-item.toggle-before .bundle-head > .bundle-header{
  width:100%;
  background:transparent !important;
  padding:0 !important;

  /* on force un layout simple pour centrer */
  display:block !important;

  /* (si grid supporté ailleurs, ça évite effets de colonnes) */
  grid-template-columns:1fr !important;
  gap:0 !important;
}

/* 3) Toggle absolute à gauche (rétrocompat) */
.bundle-item.toggle-before .bundle-head .toggle-bundle,
.bundle-item.toggle-before .bundle-head .ir-toggle-check{
  position:absolute;
  left: var(--ir-toggle-left, 5px);
  top:50%;
  transform:translateY(-50%);
  margin:0 !important;
}

/* 4) Titre centré (rétrocompat, sans :is) */
.bundle-item.toggle-before .bundle-head .ir-bundle-title,
.bundle-item.toggle-before .bundle-head strong{
  display:block;
  width:100%;
  text-align:center;
  margin:0;
}

/* 5) Intro sous le header */
.bundle-item.toggle-before .bundle-head > .bundle-intro{
  margin:5px 0 0 !important;
  padding-bottom: var(--ir-intro-pad-bottom, 4px); /* ✅ air sous image */
}

/* Inactif (si tu veux garder ton comportement de head dim) */
.bundle-item.item-inactive.toggle-before .bundle-head{
  opacity:.55;
  transition:opacity .18s ease;
}
.bundle-item.item-inactive.toggle-before .bundle-head svg,
.bundle-item.item-inactive.toggle-before .bundle-head .ir-toggle-svg,
.bundle-item.item-inactive.toggle-before .toggle-bundle.icon-radio::before{
  display:none !important;
}

/* ✅ Cas spécifique que tu as validé :
   Quand la box entière est inactive, le titre toggle-before doit pâlir */
.bundle-box:not(.active) .bundle-item.toggle-before .bundle-header strong,
.bundle-box:not(.active) .bundle-item.toggle-before .bundle-header .ir-bundle-title{
  opacity:.55 !important;
  transition:opacity .18s ease;
}


/* =================
Séparateur entre sous-bundles (hérite la couleur "active" des headers) 
================*/
.bundle-box.active .ir-bundle-separator{
  background: var(--ir-header-active, rgba(0, 115, 170, .08));

  /* épaisseur réglable */
  height: var(--ir-sep-h, 2px);

  /* arrondis (même logique que les headers) */
  border-radius: calc(var(--ir-radius, 10px) * 0.8);

  /* que ça prenne toute la largeur dispo */
  width: 100%;

  /* espacements (à activer si besoin) */
   margin-top: 10px; 
   margin-bottom: 6px; 
}

/* Optionnel : si la barre ne colle pas aux bords du container 
.bundle-box.active .bundle-item .ir-bundle-separator{
   margin-left: 0; 
   margin-right: 0; 
} */




/* =========================
   Accordéon contenu
   ========================= */
.bundle-content{
  overflow:hidden;
  max-height:0;
  opacity:0;
  padding:0 8px;
  margin-top:0;
  transition:max-height .35s cubic-bezier(0.65, 0, 0.35, 1), opacity .25s ease, padding .25s cubic-bezier(0.65, 0, 0.35, 1);
}
.bundle-box.active .bundle-content,
.bundle-content.open{
  max-height:1200px;
  opacity:1;
  padding-top:10px;
  overflow:visible;
}
.bundle-content > * + *{ margin-top:8px; }
.bundle-selector{ display:block; }

/* =========================
   Intro (image + sous-titre)
   ========================= */
.bundle-intro{
  display:flex;
  align-items:center;
  gap:14px;
  margin:10px 12px 0;
}
.bundle-thumb{ flex:0 0 auto; width:100px; }
.bundle-thumb img{
  display:block;
  width:100px; height:100px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:none;
  outline:none;
}
.bundle-subtitle{
  flex:1 1 auto;
  font-size:var(--ir-text-size,14px);
  line-height:1.45;
  color:var(--ir-text,#333);
  word-break:break-word;
  text-align:left;
  margin:0;
}
/* si image présente : centre le texte dans l’espace restant */
.bundle-intro .bundle-thumb ~ .bundle-subtitle{ text-align:center; }

@media (max-width:600px){
  .bundle-intro{ gap:12px; margin:10px 8px 0; flex-wrap:nowrap; }
  .bundle-thumb{ width:90px; }
  .bundle-thumb img{ width:90px; height:90px; object-fit:contain; }
}

/* =========================
   Swatches
   ========================= */
.swatch-wrapper{
  position:relative;
  overflow:visible;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  line-height:1;
  margin:12px 10px 6px 0;
}
.swatch{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:48px; height:48px;
  background:#eee;
  border:2px solid #aaa;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.swatch:hover{ border-color:var(--ir-accent,#00aaff); background:#eef; }
.swatch.has-qty{ border-color:var(--ir-accent,#00aaff); }

.swatch-quantity{
  position:absolute; top:-5px; right:-5px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--ir-accent,#00aaff);
  color:#fff; font-size:11px; font-weight:700;
  line-height:18px; text-align:center;
}

.swatch-label,
.swatch-caption,
.swatch-price{
  margin-top:2px;
  font-size:11px; line-height:1.25; color:#444;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  word-break:break-word;
}
.swatch-label.inside{ font-weight:700; padding:0 4px; -webkit-line-clamp:3; }

.swatch-shape-circle{ border-radius:50%; }
.swatch-shape-square{ border-radius:0; }
.swatch-shape-rounded{ border-radius:8px; }

.swatch-disabled{ opacity:.45; pointer-events:none; filter:grayscale(100%); }
.swatch.swatch-disabled ~ .swatch-price{ opacity:.6; }

/* =========================
   Pilule quantité
   ========================= */
.ir-inline-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}
.ir-qty-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:9999px;
  padding:2px 10px;
  background:#fff;
}
.ir-qty-pill button{
  border:0;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.ir-inline-price{ flex:1; text-align:center; white-space:nowrap; }

/* =========================
   Message + prix
   ========================= */
.bundle-message{
  margin:0 12px 0;
  padding:0;
  font-size:var(--ir-text-size,14px);
  line-height:1.4;
  color:var(--ir-text,#333);
}
.bundle-message-inner{ font-size:inherit; color:inherit; line-height:inherit; }

.bundle-msg-error{ color:#888 !important; }
.bundle-msg-success{ color:var(--ir-text-selected,#008000); }

.bundle-price-line{
  display:inline-block;
  margin-top:2px;
  font-size:var(--ir-text-size,14px);
  color:var(--ir-text,#333);
}
/* Groupe "20€ ➜ 15€" : reste soudé sur une seule ligne */
.bundle-price-line .price-original,
.bundle-price-line .price-final{
  white-space:nowrap;
}
.price-original{
  text-decoration:line-through;
  color:#999; opacity:.8;
  margin-right:6px;
}
.price-final{ font-weight:700; color:var(--ir-accent,#0073aa); }
/* Bloc "(dont …)" : peut basculer sur une ligne suivante si manque de place */
.bundle-price-line em{
  display:inline-block;
  white-space:nowrap;
  font-style:italic;
}

.ir-inline-price{
  min-width:0;
  white-space:normal;
}

/* =========================
   Boutons
   ========================= */
.bundle-add-button,
.bundle-global-button{
  display:block;
  width:100%;
  max-width:420px;
  margin:10px auto 0;
  padding:0 18px;
  height:var(--ir-btn-height,42px);
  border:0;
  border-radius:var(--ir-btn-radius,8px);
  font-size:15px;
  font-weight:600;
  color:var(--ir-btn-text,#fff);
  background:var(--ir-btn-bg,#2ecc71);
  cursor:pointer;
  transition:background-color .18s ease, opacity .18s ease;
}
.bundle-add-button:hover:not(:disabled),
.bundle-global-button:hover:not(:disabled){
  background:var(--ir-btn-bg-hover,#27ae60);
}
.bundle-add-button:disabled,
.bundle-global-button:disabled,
.bundle-global-button.disabled{
  background:var(--ir-btn-bg-disabled,#9dcfb2);
  color:var(--ir-btn-text,#fff);
  cursor:not-allowed;
}
.bundle-global-button.loading{ position:relative; pointer-events:none; }
.bundle-global-button.loading::after{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:18px; height:18px;
  border:2px solid #fff;
  border-top-color:transparent;
  border-radius:50%;
  transform:translateY(-50%);
  animation:irspin .6s linear infinite;
}
@keyframes irspin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* =========================
   Masques Woo natifs
   ========================= */
body.has-bundles table.variations,
body.has-bundles form.cart .quantity,
body.has-bundles form.cart button.single_add_to_cart_button,
body.has-bundles form.variations_form table.variations{
  display:none !important;
}
.hidden{ display:none !important; }

/* =========================
   closed_view short
   ========================= */
.bundle-box.is-collapsed[data-collapsed-view="short"] .bundle-item:not(:first-child){
  display:none !important;
}
.bundle-box.is-collapsed[data-collapsed-view="short"] .bundle-item:first-child > .bundle-header,
.bundle-box.is-collapsed[data-collapsed-view="short"] .bundle-item:first-child > .bundle-intro{
  opacity:.6;
}
.bundle-box.is-collapsed[data-collapsed-view="short"] .mv-slots,
.bundle-box.is-collapsed[data-collapsed-view="short"] .mv-slot-wrap{
  display:none !important;
}
.bundle-box.is-collapsed[data-collapsed-view="short"] .bundle-item .bundle-message{
  display:none !important;
}

/* =========================
   Boot state ← supprimé apres optimisation
   ========================= */


/* =========================
   Tes 3 règles ajoutées
   ========================= */
/* caché quand inactif (zéro espace) */
.bundle-item.item-inactive .bundle-content .ir-inline-row,
.bundle-item.item-inactive .bundle-content .bundle-message{
  display:none !important;
}

/* Empêcher la sélection de texte sur les éléments interactifs */
.swatch,
.swatch-wrapper,
.ir-qty-pill,
.ir-qty-pill button,
.bundle-header,
.toggle-bundle,
.bundle-add-button,
.bundle-global-button{
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.swatch:focus,
.swatch:active{ outline:none; }




/* Container bundle : nécessaire pour positionner le badge */
.has-bundles .bundle-box {
  position: relative;
}

/* Badge générique */
.ir-bundle-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: 50% 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* le badge ne bloque pas les clics sur le bundle */
}

/* Badge texte */
.ir-bundle-badge--text {
  font-size: .75rem;
  font-weight: 600;
}

/* Badge image */
.ir-bundle-badge--image img {
  display: block;
}

/* Badge de swatch */
.swatch-wrapper {
  position: relative;
}
 
.ir-sw-badge {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: auto;
}

.ir-sw-badge--image img {
  display: block;
}




/* ============================================================
   STICKY ATC — bandeau bas + bouton qui mène au bundle
   Variables CSS posées par PHP via style="" :
     --ir-btn-bg, --ir-btn-bg-hover, --ir-btn-bg-disabled, --ir-btn-text
     --ir-btn-radius
     --ir-sticky-under   (couleur+alpha du bandeau)
     --ir-sticky-appear-ms  (durée fade)
   ============================================================ */

.ir-sticky-atc {
  display: block;
  text-decoration: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;

  /* Bandeau : couleur+alpha + flou */
  background: var(--ir-sticky-under, rgba(255,255,255,.5));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Apparition / disparition */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--ir-sticky-appear-ms, 300ms) ease,
    transform var(--ir-sticky-appear-ms, 300ms) ease;
  will-change: opacity, transform;

  /* Safe-area iOS */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ir-sticky-atc,
.ir-sticky-atc:hover,
.ir-sticky-atc:visited,
.ir-sticky-atc:focus,
.ir-sticky-atc:active {
  color: inherit;
  text-decoration: none;
}

.ir-sticky-atc[hidden] { display: none !important; }

.ir-sticky-atc.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Conteneur centré largeur max */
.ir-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 14px;
  box-sizing: border-box;
}

/* Miniature */
.ir-sticky-atc__img {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Texte (desktop) */
.ir-sticky-atc__text {
  flex: 1 1 auto;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1.25;
  min-width: 0;
}

/* Bouton — récupère les variables ATC bundle */
.ir-sticky-atc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 380px;
  max-width: 100%;
  padding: 0 18px;
  height: var(--ir-btn-height, 42px);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  border: 0;
  cursor: pointer;
  background: var(--ir-btn-bg, #BF8E6E);
  color: var(--ir-btn-text, #fff) !important;
  border-radius: var(--ir-btn-radius, 8px);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, opacity .18s ease;
}
.ir-sticky-atc__btn:hover {
  background: var(--ir-btn-bg-hover, var(--ir-btn-bg, #B1764E));
  color: var(--ir-btn-text, #fff) !important;
}

/* ---- Variantes layout ---- */

/* Desktop / mobile-with-image : image + texte (desktop) + bouton */
.ir-sticky-atc.has-image .ir-sticky-atc__img { display: inline-block; }

/* Mobile button-only : image cachée, bouton large */
@media (max-width: 640px) {
  .ir-sticky-atc.mobile-button-only .ir-sticky-atc__img,
  .ir-sticky-atc.mobile-button-only .ir-sticky-atc__text {
    display: none;
  }
  .ir-sticky-atc.mobile-button-only .ir-sticky-atc__btn {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Mobile with-image : image + bouton, texte caché */
  .ir-sticky-atc.mobile-with-image .ir-sticky-atc__text {
    display: none;
  }
  .ir-sticky-atc.mobile-with-image .ir-sticky-atc__btn {
    flex: 1 1 auto;
  }
  .ir-sticky-atc.mobile-with-image .ir-sticky-atc__img {
    width: 48px;
    height: 48px;
  }
}

/* Sur petit écran, le bouton peut prendre tout l'espace dispo */
@media (max-width: 480px) {
  .ir-sticky-atc__inner {
    padding: 2px 10px;
    gap: 10px;
  }
}