/* ========================================================== TOUTDOUX — CSS pour YouCan À coller dans : Réglages en ligne > CSS/JavaScript > section CSS (Header) ========================================================== */ :root{ --td-ink:#1B2A41; --td-bamboo:#7A9D6F; --td-bamboo-dark:#5C7D54; --td-sand:#F5F1E8; --td-stone:#E9E2D2; --td-gold:#C99A3D; --td-white:#FFFFFF; --td-text:#2A2F36; --td-radius:14px; } /* Police (optionnel : à ajouter aussi en si YouCan le permet, sinon fallback système) */ .td-widget, .td-widget *{ font-family:'Work Sans', Arial, sans-serif; box-sizing:border-box; } .td-widget h1, .td-widget h2, .td-widget h3, .td-widget .td-display{ font-family:'Fraunces', Georgia, serif; color:var(--td-ink); font-weight:600; letter-spacing:-0.01em; } /* ---------- Bandeau annonce ---------- */ .td-announce{ background:var(--td-ink); color:var(--td-sand); overflow:hidden; white-space:nowrap; position:relative; } .td-announce-track{ display:inline-flex; gap:48px; animation:td-scroll 22s linear infinite; padding:9px 0; font-size:0.78rem; letter-spacing:0.03em; } @keyframes td-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .td-announce-track{animation:none;} } /* ---------- Configurateur de pack ---------- */ .td-builder{ background:var(--td-ink); border-radius:26px; padding:44px 32px; color:var(--td-sand); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:40px 0; } .td-builder .td-eyebrow{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:#B9CDB2; font-weight:600; margin-bottom:8px; display:block; } .td-builder p.td-desc{color:#C6CCD4; font-size:0.95rem; margin:12px 0 26px; max-width:420px;} .td-slider-wrap{margin-bottom:20px;} .td-widget input[type=range]{ width:100%; height:6px; border-radius:6px; background:#334158; -webkit-appearance:none; appearance:none; } .td-widget input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--td-gold); border:4px solid var(--td-ink); cursor:pointer; } .td-pack-readout{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;} .td-pack-readout .td-pairs{font-family:'Fraunces',serif; font-size:2.4rem; font-weight:600; color:var(--td-white);} .td-pack-readout .td-pairs span{font-size:1rem; color:#B9CDB2; font-family:'Work Sans',sans-serif; font-weight:500;} .td-save{color:var(--td-gold); font-weight:600;} .td-pack-price{background:#22314A; border-radius:16px; padding:24px;} .td-pack-price .td-row{display:flex; justify-content:space-between; font-size:0.92rem; padding:8px 0; border-bottom:1px solid #33415866;} .td-pack-price .td-row:last-of-type{border-bottom:none;} .td-pack-price .td-total{font-size:1.5rem; font-family:'Fraunces',serif; color:var(--td-white); font-weight:600;} .td-btn-primary{ display:block; width:100%; text-align:center; margin-top:16px; background:var(--td-gold); color:var(--td-ink); padding:14px 20px; border-radius:100px; font-weight:600; font-size:0.95rem; border:none; cursor:pointer; transition:background .15s; } .td-btn-primary:hover{background:#E0B453;} @media (max-width:760px){ .td-builder{grid-template-columns:1fr;} } /* ---------- FAQ ---------- */ .td-faq-item{border-bottom:1px solid var(--td-stone);} .td-faq-q{ width:100%; text-align:left; background:none; padding:18px 0; border:none; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; color:var(--td-ink); cursor:pointer; } .td-faq-q .td-plus{font-size:1.4rem; color:var(--td-bamboo-dark); transition:transform .2s;} .td-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:0.92rem; color:#5B6672;} .td-faq-a p{padding-bottom:16px; margin:0;} .td-faq-item.td-open .td-faq-q .td-plus{transform:rotate(45deg);} /* ---------- Réassurance ---------- */ .td-reassure{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; background:var(--td-sand); padding:32px 0; margin:20px 0; } .td-reassure .td-item{text-align:center; padding:12px;} .td-reassure .td-item .td-icon{font-size:1.4rem; margin-bottom:6px;} .td-reassure .td-item h4{font-size:0.9rem; margin:0 0 4px;} .td-reassure .td-item p{font-size:0.78rem; color:#5B6672; margin:0;} @media (max-width:700px){.td-reassure{grid-template-columns:1fr 1fr;}} Aller au contenu
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • web_stories

    Image Slide

    An image is worth a thousand words

  • web_stories

    Image Slide

    An image is worth a thousand words

  • web_stories

    Image Slide

    An image is worth a thousand words

Our Favorites

Collections

Best Offers

About Us

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur possimus non ipsa esse iure ratione aperiam consectetur doloremque accusantium necessitatibus.

image

FAQ

image

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur possimus non ipsa esse iure ratione aperiam consectetur doloremque accusantium necessitatibus.

/* ========================================================== TOUTDOUX — JS pour YouCan À coller dans : Réglages en ligne > CSS/JavaScript > section JavaScript (Footer) IMPORTANT — à lire avant de coller : Ce script cherche des emplacements précis (par id) où injecter chaque bloc. Comme je n'ai pas accès à la structure HTML de ton thème YouCan, tu dois ajouter ces 3 balises toi-même là où tu veux que chaque bloc apparaisse (via un bloc "HTML personnalisé" si ton thème YouCan en propose un, ou en demandant au support YouCan comment insérer une div à un endroit précis) :
→ bandeau annonce (en haut)
→ configurateur de pack (page produit)
→ FAQ (bas de page produit ou page dédiée) Si un slot n'existe pas, le script l'ignore simplement (pas d'erreur). ========================================================== */ document.addEventListener('DOMContentLoaded', function () { // ---------- 1. Bandeau annonce ---------- var announceSlot = document.getElementById('td-announce-slot'); if (announceSlot) { announceSlot.innerHTML = '
' + '
' + '🌿 Livraison offerte partout en Tunisie' + '💳 Paiement à la livraison disponible' + '🔁 Échange gratuit sous 15 jours' + '🌿 Livraison offerte partout en Tunisie' + '💳 Paiement à la livraison disponible' + '🔁 Échange gratuit sous 15 jours' + '
' + '
'; } // ---------- 2. Configurateur de pack ---------- var builderSlot = document.getElementById('td-builder-slot'); if (builderSlot) { builderSlot.innerHTML = '
' + '
' + 'Pack sur-mesure' + '

Choisissez votre nombre de paires

' + '

Faites glisser pour composer votre pack. Le prix par paire baisse automatiquement à chaque palier.

' + '
' + '
' + '
6 paires
' + '
Économie de 20%
' + '
' + '
' + '
' + '
Paires sélectionnées6 paires
' + '
Prix normal60 DT
' + '
Votre prix45 DT
' + '' + '
' + '
'; var tiers = [ { pairs: 3, normal: 30, price: 25 }, { pairs: 6, normal: 60, price: 45 }, { pairs: 9, normal: 90, price: 60 }, { pairs: 12, normal: 120, price: 75 }, { pairs: 16, normal: 160, price: 95 } ]; var slider = document.getElementById('tdPackSlider'); var pairsCount = document.getElementById('tdPairsCount'); var saveLabel = document.getElementById('tdSaveLabel'); var rowPairs = document.getElementById('tdRowPairs'); var rowNormal = document.getElementById('tdRowNormal'); var rowTotal = document.getElementById('tdRowTotal'); var ctaTotal = document.getElementById('tdCtaTotal'); function renderPack(i) { var t = tiers[i]; var savePct = Math.round((1 - t.price / t.normal) * 100); pairsCount.innerHTML = t.pairs + ' paires'; saveLabel.textContent = 'Économie de ' + savePct + '%'; rowPairs.textContent = t.pairs + ' paires'; rowNormal.textContent = t.normal + ' DT'; rowTotal.textContent = t.price + ' DT'; ctaTotal.textContent = 'Commander mon pack — ' + t.price + ' DT'; } slider.addEventListener('input', function (e) { renderPack(Number(e.target.value)); }); renderPack(1); // NOTE : le bouton "Commander" ne fait qu'afficher le prix pour l'instant. // Pour qu'il ajoute réellement le bon pack au panier YouCan, il faut le // relier à un product ID / variant ID YouCan par palier — dis-le-moi si // tu veux que je prépare cette partie une fois tes variantes créées. } // ---------- 3. FAQ ---------- var faqSlot = document.getElementById('td-faq-slot'); if (faqSlot) { var faqData = [ ['Livrez-vous partout en Tunisie ?', 'Oui, nous livrons dans tout le pays sous 24 à 48h, livraison offerte dès le premier pack.'], ['Puis-je payer à la livraison ?', 'Oui, le paiement à la livraison est disponible partout, en plus des paiements en ligne.'], ['Quelle est la matière exacte ?', 'Une fibre de bambou naturelle, reconnue pour ses propriétés anti-odeurs et respirantes.'], ['Que faire si la taille ne convient pas ?', 'Échange gratuit sous 15 jours, sans justification à fournir.'] ]; var html = '
'; faqData.forEach(function (item, i) { html += '
' + '' + '

' + item[1] + '

' + '
'; }); html += '
'; faqSlot.innerHTML = html; document.querySelectorAll('#tdFaqList .td-faq-item').forEach(function (item) { var q = item.querySelector('.td-faq-q'); var a = item.querySelector('.td-faq-a'); q.addEventListener('click', function () { var isOpen = item.classList.contains('td-open'); document.querySelectorAll('#tdFaqList .td-faq-item').forEach(function (i) { i.classList.remove('td-open'); i.querySelector('.td-faq-a').style.maxHeight = null; }); if (!isOpen) { item.classList.add('td-open'); a.style.maxHeight = a.scrollHeight + 'px'; } }); }); } });