Add i18n support and cart total to Shopify integration

Implement multilingual support for shop interface and add total calculation to cart drawer:
- Add FR/EN translations for all shop-related texts (cart, checkout, stock status)
- Update templates and JavaScript to use translation system
- Add cart total calculation with formatted currency display
- Refactor cart drawer styles to SASS with improved button styling (black borders on +/-)
- Fix English product content (replace JSON with proper HTML)
- Extract cart drawer to separate snippet for better organization

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/js/cart-drawer.js

@@ -8,6 +8,10 @@
   const itemsContainer = document.querySelector('[data-cart-items]');
   const checkoutBtn = document.querySelector('[data-cart-checkout]');
   const closeButtons = document.querySelectorAll('[data-cart-close]');
+  const totalDisplay = document.querySelector('[data-cart-total]');
+
+  // Get translated text
+  const removeText = drawer.dataset.textRemove || 'Remove';
 
   let currentCart = null;
   let cartInstance = null;
@@ -59,11 +63,32 @@
     document.body.style.overflow = '';
   }
 
+  function calculateTotal() {
+    if (!currentCart || !currentCart.lines) return 0;
+
+    return currentCart.lines.edges.reduce((total, edge) => {
+      const item = edge.node;
+      const price = parseFloat(item.merchandise.price.amount);
+      const quantity = item.quantity;
+      return total + (price * quantity);
+    }, 0);
+  }
+
+  function formatPrice(amount, currency = 'EUR') {
+    return new Intl.NumberFormat('fr-FR', {
+      style: 'currency',
+      currency: currency
+    }).format(amount);
+  }
+
   function renderCart() {
     if (!currentCart || !currentCart.lines || currentCart.lines.edges.length === 0) {
       emptyState.classList.remove('hidden');
       itemsContainer.classList.add('hidden');
       checkoutBtn.disabled = true;
+      if (totalDisplay) {
+        totalDisplay.textContent = '0,00 €';
+      }
       return;
     }
 
@@ -71,6 +96,13 @@
     itemsContainer.classList.remove('hidden');
     checkoutBtn.disabled = false;
 
+    // Calculate and display total
+    const total = calculateTotal();
+    const currency = currentCart.lines.edges[0]?.node.merchandise.price.currencyCode || 'EUR';
+    if (totalDisplay) {
+      totalDisplay.textContent = formatPrice(total, currency);
+    }
+
     // Render cart items
     itemsContainer.innerHTML = currentCart.lines.edges.map(edge => {
       const item = edge.node;
@@ -81,7 +113,7 @@
           <div class="cart-item__details">
             <h4 class="cart-item__title">${merchandise.product.title}</h4>
             ${merchandise.title !== 'Default Title' ? `<p class="cart-item__variant">${merchandise.title}</p>` : ''}
-            <p class="cart-item__price">${merchandise.price.amount} ${merchandise.price.currencyCode}</p>
+            <p class="cart-item__price">${formatPrice(parseFloat(merchandise.price.amount), merchandise.price.currencyCode)}</p>
 
             <div class="cart-item__quantity">
               <button class="cart-item__qty-btn" data-action="decrease" data-line-id="${item.id}">−</button>
@@ -90,7 +122,7 @@
             </div>
 
             <button class="cart-item__remove" data-action="remove" data-line-id="${item.id}">
-              Retirer
+              ${removeText}
             </button>
           </div>
         </div>