/** Shopify CDN: Minification failed

Line 195:40 Unexpected "-->"
Line 223:48 Comments in CSS use "/* ... */" instead of "//"
Line 224:53 Comments in CSS use "/* ... */" instead of "//"
Line 293:4 Comments in CSS use "/* ... */" instead of "//"
Line 296:4 Comments in CSS use "/* ... */" instead of "//"
Line 304:6 Comments in CSS use "/* ... */" instead of "//"
Line 315:6 Comments in CSS use "/* ... */" instead of "//"
Line 324:6 Comments in CSS use "/* ... */" instead of "//"
Line 340:4 Comments in CSS use "/* ... */" instead of "//"
Line 350:4 Comments in CSS use "/* ... */" instead of "//"
... and 3 more hidden warnings

**/
/* ====== Variables locales (tu peux ajuster au besoin) ====== */
.toggle-boxes--inner {
  --tbx-radius: var(--block-border-radius, 16px);
  --tbx-shadow: var(--block-shadows, 0 1px 1px rgba(16,24,40,.04), 0 10px 20px rgba(16,24,40,.08));
  --tbx-bg: var(--color-bg, #fff);
  --tbx-fg: var(--color-heading, #1a1c1d);
  --tbx-body: var(--color-body, #2c2d2e);
  --tbx-accent: var(--color-accent, #6c5ce7);
  --tbx-gap: clamp(10px, 2vw, 18px);
  --tbx-pad: clamp(18px, 2.6vw, 30px);
  --tbx-ease: cubic-bezier(.22, .61, .36, 1);
  --tbx-fast: .18s var(--tbx-ease);
  --tbx-slow: .35s var(--tbx-ease);
}

/* ====== Grille responsive, swipe mobile modernisé ====== */
.toggle-boxes--inner {
  max-width: 1380px;
  margin-inline: auto;
  width: 100%;
  display: grid;
  align-items: end;
  gap: var(--tbx-gap);
  padding-inline: clamp(15px, 4vw, 50px);
}
@media (min-width: 768px) {
  .toggle-boxes--inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1068px) {
  .toggle-boxes--inner { grid-template-columns: repeat(var(--toggle-columns, 4), 1fr); }
}

/* Swipe / carrousel tactile */
@media (max-width: 767px) {
  .toggle-boxes--inner.swipe-on-mobile {
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(90vw - 15px), 1fr);
    grid-template-columns: repeat(auto-fill, minmax(calc(90vw - 15px), 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Liserés de fade aux bords pour un look poli */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  }
  .toggle-boxes--inner.swipe-on-mobile::-webkit-scrollbar { display: none; }
  .toggle-boxes--inner.swipe-on-mobile .toggle-box {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* ====== Carte / container ====== */
.toggle-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--tbx-radius);
  box-shadow: var(--tbx-shadow);
  background: var(--tbx-bg);
  transition: transform var(--tbx-fast), box-shadow var(--tbx-fast);
  margin: 0; /* évite les marges cassantes entre grilles */
}
@media (hover:hover) {
  .toggle-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16,24,40,.06), 0 16px 32px rgba(16,24,40,.10);
  }
}
/* Focus visible pour l’accessibilité (via bouton interne) */
.toggle-box:focus-within {
  outline: 2px solid color-mix(in oklab, var(--tbx-accent) 55%, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tbx-accent) 16%, transparent), var(--tbx-shadow);
  border-radius: calc(var(--tbx-radius) + 2px);
}

/* ====== Bouton (summary/trigger) ====== */
.toggle-box button {
  all: unset; /* reset doux et fiable */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px var(--tbx-pad);
  background: color-mix(in oklab, var(--tbx-bg) 92%, #fff);
  color: var(--tbx-fg);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  z-index: 15;
}

/* Petit chevron + animé */
.toggle-box button span {
  position: relative;
  inline-size: 18px;
  block-size: 18px;
  transition: transform var(--tbx-fast);
}
.toggle-box button span::before,
.toggle-box button span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
  transition: background var(--tbx-fast);
}
.toggle-box button span::before { width: 100%; height: 2px; transform: translateY(-1px); }
.toggle-box button span::after  { width: 2px; height: 100%; transform: translateX(-1px); }

/* Rotation en ouverture */
.toggle-box[open] button span { transform: rotate(135deg); }

/* ====== Media cliquable en fond si présent ====== */
.toggle-box--image > a {
  position: absolute;
  inset: 0;
  display: block;
}

/* ====== Panneau de contenu ====== */
/* On remplace la transition sur height fixe par une animation fluide via transform + opacity.
   (Plus performant, pas de « jank » sur des contenus dynamiques) */
.toggle-box--content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--tbx-bg);
  color: var(--tbx-body);
  border-radius: var(--tbx-radius) var(--tbx-radius) 0 0;
  z-index: 11;
  /* état fermé */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--tbx-slow), opacity var(--tbx-slow);
  will-change: transform, opacity;
}
.toggle-box[open] .toggle-box--content {
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
}

.toggle-box--content-inner {
  /* hauteur flexible & sûre */
  max-height: min(60vh, 680px);
  display: grid;
  grid-template-rows: 1fr;
}
.toggle-box--content-inner > div {
  overflow: auto;
  padding: var(--tbx-pad);
}
.toggle-box--content a { color: var(--tbx-accent); }
.toggle-box--content-inner > div > *:last-child { margin-bottom: 0; }

/* ====== Bouton « secondaire » optionnel ====== */
.toggle-box--button {
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 10px 20px 0;
}

/* ====== Motion safe ====== */
@media (prefers-reduced-motion: reduce) {
  .toggle-box,
  .toggle-box button span,
  .toggle-box--content {
    transition: none !important;
  }
}

<!-- Exemple d’options sur le wrapper -->
<div class="toggle-boxes--inner"
     data-accordion="true"           <!-- ferme les autres quand on ouvre -->
     data-remember="local"           <!-- none | session | local -->
     data-open-default="first"       <!-- none | first | all | hash -->
     data-close-outside="true">      <!-- clic hors carte ferme -->
  <!-- ... tes .toggle-box ... -->
</div>

<script>
(() => {
  const WRAP_SEL = '.toggle-boxes--inner';
  const BOX_SEL  = '.toggle-box';
  const BTN_SEL  = 'button';
  const PANEL_SEL= '.toggle-box--content';

  const uid = (p='tbx') => p + '-' + Math.random().toString(36).slice(2,9);

  const getStore = (mode) => {
    try {
      if (mode === 'local') return window.localStorage;
      if (mode === 'session') return window.sessionStorage;
    } catch(_) {}
    return null;
  };

  const readOpts = (wrap) => ({
    accordion: wrap.dataset.accordion === 'true',
    remember: wrap.dataset.remember || 'none',  // 'none' | 'session' | 'local'
    openDefault: wrap.dataset.openDefault || 'none', // 'none' | 'first' | 'all' | 'hash'
    closeOutside: wrap.dataset.closeOutside === 'true'
  });

  const persistKey = (wrap) => 'tbx-state-' + (wrap.id || wrap.getAttribute('data-key') || 'default');

  const loadState = (wrap, boxes, remember) => {
    const store = getStore(remember);
    if (!store) return null;
    try {
      const raw = store.getItem(persistKey(wrap));
      if (!raw) return null;
      const ids = JSON.parse(raw);
      const set = new Set(ids);
      boxes.forEach(b => set.has(b.dataset.tbxId) ? openBox(b, false) : closeBox(b, false));
    } catch(_) {}
  };

  const saveState = (wrap, boxes, remember) => {
    const store = getStore(remember);
    if (!store) return;
    const openIds = boxes.filter(b => b.hasAttribute('open')).map(b => b.dataset.tbxId);
    try { store.setItem(persistKey(wrap), JSON.stringify(openIds)); } catch(_) {}
  };

  const setAria = (box, btn, panel) => {
    if (!btn.id) btn.id = uid('tbx-btn');
    if (!panel.id) panel.id = uid('tbx-panel');
    btn.setAttribute('aria-controls', panel.id);
    btn.setAttribute('aria-expanded', box.hasAttribute('open') ? 'true' : 'false');
    panel.setAttribute('role', 'region');
    panel.setAttribute('aria-labelledby', btn.id);
  };

  const openBox = (box, dispatch=true) => {
    if (box.hasAttribute('open')) return;
    box.setAttribute('open', '');
    const btn = box.querySelector(BTN_SEL);
    if (btn) btn.setAttribute('aria-expanded', 'true');
    if (dispatch) box.dispatchEvent(new CustomEvent('tbx:open', {bubbles:true}));
  };

  const closeBox = (box, dispatch=true) => {
    if (!box.hasAttribute('open')) return;
    box.removeAttribute('open');
    const btn = box.querySelector(BTN_SEL);
    if (btn) btn.setAttribute('aria-expanded', 'false');
    if (dispatch) box.dispatchEvent(new CustomEvent('tbx:close', {bubbles:true}));
  };

  const toggleBox = (box) => box.hasAttribute('open') ? closeBox(box) : openBox(box);

  const handleHashOpen = (wrap, boxes, opts) => {
    const h = decodeURIComponent(location.hash || '').replace(/^#/, '');
    if (!h) return false;
    let target = document.getElementById(h) || document.querySelector(`[data-tbx-id="${h}"]`);
    if (!target) return false;
    const box = target.closest(BOX_SEL);
    if (!box || !wrap.contains(box)) return false;
    openBox(box);
    if (opts.accordion) boxes.forEach(b => { if (b!==box) closeBox(b); });
    box.scrollIntoView({block:'nearest', behavior:'smooth'});
    return true;
  };

  const initWrap = (wrap) => {
    const opts = readOpts(wrap);
    const boxes = Array.from(wrap.querySelectorAll(BOX_SEL));

    // id interne stable
    boxes.forEach(b => { if (!b.dataset.tbxId) b.dataset.tbxId = uid('box'); });

    // ARIA + events
    boxes.forEach((box, i) => {
      const btn = box.querySelector(BTN_SEL);
      const panel = box.querySelector(PANEL_SEL);
      if (!btn || !panel) return;

      setAria(box, btn, panel);

      // Click -> toggle / accordéon
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const willOpen = !box.hasAttribute('open');
        if (opts.accordion && willOpen) {
          boxes.forEach(b => { if (b!==box) closeBox(b); });
        }
        toggleBox(box);
        saveState(wrap, boxes, opts.remember);
      });

      // Esc pour fermer le panneau courant
      box.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && box.hasAttribute('open')) {
          closeBox(box);
          btn.focus();
          saveState(wrap, boxes, opts.remember);
        }
      });

      // Navigation clavier (↑/↓, Home/End) entre les triggers
      btn.addEventListener('keydown', (e) => {
        const triggers = boxes.map(b => b.querySelector(BTN_SEL)).filter(Boolean);
        const idx = triggers.indexOf(btn);
        if (['ArrowDown','ArrowRight'].includes(e.key)) {
          e.preventDefault(); triggers[(idx+1)%triggers.length].focus();
        } else if (['ArrowUp','ArrowLeft'].includes(e.key)) {
          e.preventDefault(); triggers[(idx-1+triggers.length)%triggers.length].focus();
        } else if (e.key === 'Home') {
          e.preventDefault(); triggers[0].focus();
        } else if (e.key === 'End') {
          e.preventDefault(); triggers[triggers.length-1].focus();
        }
      });
    });

    // Close on click outside
    if (opts.closeOutside) {
      document.addEventListener('click', (e) => {
        if (!wrap.contains(e.target)) {
          boxes.forEach(b => closeBox(b));
          saveState(wrap, boxes, opts.remember);
        }
      });
    }

    // Mémorisation
    loadState(wrap, boxes, opts.remember);

    // Ouvertures par défaut
    if (!boxes.some(b => b.hasAttribute('open'))) {
      const didHash = (opts.openDefault === 'hash') && handleHashOpen(wrap, boxes, opts);
      if (!didHash) {
        if (opts.openDefault === 'first') openBox(boxes[0]);
        else if (opts.openDefault === 'all') boxes.forEach(b => openBox(b, false));
      }
    }

    // Réagit aux changements d’ancre
    window.addEventListener('hashchange', () => handleHashOpen(wrap, boxes, opts));

    // Sauvegarde sur événements custom
    wrap.addEventListener('tbx:open',  () => saveState(wrap, boxes, opts.remember));
    wrap.addEventListener('tbx:close', () => saveState(wrap, boxes, opts.remember));
  };

  document.querySelectorAll(WRAP_SEL).forEach(initWrap);
})();
</script>