{"id":15,"date":"2026-07-16T00:19:49","date_gmt":"2026-07-16T00:19:49","guid":{"rendered":"https:\/\/doukene.com\/?page_id=15"},"modified":"2026-07-16T00:20:52","modified_gmt":"2026-07-16T00:20:52","slug":"main-v3","status":"publish","type":"page","link":"https:\/\/doukene.com\/","title":{"rendered":"Main v3 FR"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n\n\n\nDoukene \u2014 Boutique Tunisienne. Coffret Tasse Chauffante & Masque LED<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg:#0A0D10;\n --bg-elev:#12171C;\n --bg-elev-2:#1A2129;\n --line:rgba(245,241,232,0.09);\n --line-strong:rgba(245,241,232,0.16);\n --text:#F5F1E8;\n --text-muted:#9AA3AD;\n --text-faint:#5C6570;\n --red:#D8262C;\n --red-soft:rgba(216,38,44,0.14);\n --gold:#E4B368;\n --teal:#3E6E5E;\n --teal-bright:#57C2A0;\n --teal-glow:rgba(87,194,160,0.35);\n --radius:14px;\n --ff-display:'Space Grotesk', sans-serif;\n --ff-body:'Inter', sans-serif;\n --ff-mono:'JetBrains Mono', monospace;\n }\n *{margin:0;padding:0;box-sizing:border-box;}\n html{scroll-behavior:smooth;}\n body{\n background:var(--bg);\n color:var(--text);\n font-family:var(--ff-body);\n line-height:1.5;\n overflow-x:hidden;\n background-image:\n radial-gradient(circle at 85% -10%, rgba(216,38,44,0.10), transparent 45%),\n radial-gradient(circle at 10% 20%, rgba(87,194,160,0.08), transparent 40%);\n }\n @media (prefers-reduced-motion: reduce){\n *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}\n }\n a{color:inherit;text-decoration:none;}\n ul{list-style:none;}\n img,svg{display:block;max-width:100%;}\n .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}\n ::selection{background:var(--red);color:#fff;}\n\n \/* Mosaic hairline divider *\/\n .mosaic-rule{\n height:14px;\n background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 14px),\n repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 14px);\n opacity:0.7;\n }\n\n \/* ---------- NAV ---------- *\/\n header{\n position:sticky; top:0; z-index:100;\n background:rgba(10,13,16,0.72);\n backdrop-filter:blur(14px) saturate(140%);\n border-bottom:1px solid var(--line);\n }\n nav.wrap{\n display:flex; align-items:center; justify-content:space-between;\n height:76px;\n }\n .logo{\n display:flex; align-items:baseline; gap:9px;\n font-family:var(--ff-display); font-weight:700; font-size:22px; letter-spacing:-0.02em;\n }\n .logo .mark{color:var(--red);}\n .logo .ar{\n font-family:var(--ff-body); font-weight:400; font-size:13px; color:var(--text-faint);\n letter-spacing:0;\n }\n .navlinks{display:flex; gap:36px; font-size:14.5px; color:var(--text-muted);}\n .navlinks a{transition:color .2s;}\n .navlinks a:hover{color:var(--text);}\n .nav-cta{\n display:flex; align-items:center; gap:14px;\n }\n .lang-switch{padding:9px 16px; font-size:13px;}\n .btn{\n display:inline-flex; align-items:center; justify-content:center; gap:8px;\n font-family:var(--ff-body); font-weight:600; font-size:14.5px;\n padding:12px 22px; border-radius:999px; border:1px solid transparent;\n cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;\n white-space:nowrap;\n }\n .btn-primary{background:var(--red); color:#fff; box-shadow:0 0 0 0 rgba(216,38,44,0.5);}\n .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(216,38,44,0.35);}\n .btn-ghost{border-color:var(--line-strong); color:var(--text);}\n .btn-ghost:hover{background:var(--bg-elev-2); border-color:var(--text-faint);}\n .btn-lg{padding:16px 30px; font-size:15.5px;}\n .navtoggle{display:none;}\n\n \/* ---------- HERO ---------- *\/\n \/* ---------- MARKETPLACE HERO ---------- *\/\n .market-hero{padding:56px 0 0;}\n .market-hero-inner{\n position:relative; text-align:center; max-width:720px; margin:0 auto;\n padding:56px 40px 44px; border:1px solid var(--line); border-radius:20px;\n background:radial-gradient(circle at 50% 0%, rgba(216,38,44,0.10), transparent 60%),\n radial-gradient(circle at 15% 100%, rgba(87,194,160,0.10), transparent 55%),\n var(--bg-elev);\n }\n .market-hero .eyebrow{margin-left:auto; margin-right:auto;}\n .market-hero h1{font-size:clamp(32px,4.4vw,48px);}\n .market-hero .hero-sub{margin-left:auto; margin-right:auto;}\n .market-hero .trust-row{justify-content:center; margin-top:8px;}\n .market-search{\n display:flex; align-items:center; gap:10px; max-width:560px; margin:0 auto 30px;\n background:var(--bg); border:1px solid var(--line-strong); border-radius:999px;\n padding:8px 8px 8px 20px;\n }\n .market-search svg{width:19px; height:19px; color:var(--text-faint); flex-shrink:0;}\n .market-search input{\n flex:1; background:transparent; border:none; color:var(--text); font-family:var(--ff-body);\n font-size:14.5px; padding:8px 0;\n }\n .market-search input:focus{outline:none;}\n .market-search .btn{padding:11px 22px; font-size:14px; flex-shrink:0;}\n\n \/* ---------- FILTER BAR ---------- *\/\n .filter-bar{\n display:flex; align-items:center; gap:12px; flex-wrap:wrap;\n padding:16px 20px; margin-bottom:28px; border:1px solid var(--line); border-radius:var(--radius);\n background:var(--bg-elev);\n }\n .filter-group{display:flex; align-items:center; gap:8px;}\n .filter-label{font-family:var(--ff-mono); font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}\n .filter-bar select{\n background:var(--bg); border:1px solid var(--line-strong); color:var(--text);\n font-family:var(--ff-body); font-size:13.5px; padding:9px 12px; border-radius:8px; cursor:pointer;\n }\n .filter-bar select:focus{outline:none; border-color:var(--teal-bright);}\n .price-inputs{display:flex; align-items:center; gap:6px;}\n .price-inputs input{\n width:76px; background:var(--bg); border:1px solid var(--line-strong); color:var(--text);\n font-family:var(--ff-mono); font-size:13px; padding:8px 10px; border-radius:8px;\n }\n .price-inputs input:focus{outline:none; border-color:var(--teal-bright);}\n .price-inputs span{color:var(--text-faint); font-size:12px;}\n .chip{\n display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-mono); font-size:12.5px;\n padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-muted);\n cursor:pointer; transition:all .15s; background:var(--bg); user-select:none;\n }\n .chip:hover{border-color:var(--text-faint);}\n .chip.active{background:rgba(87,194,160,0.14); border-color:var(--teal-bright); color:var(--teal-bright);}\n .filter-spacer{flex:1;}\n .filter-count{font-family:var(--ff-mono); font-size:12.5px; color:var(--text-faint);}\n .filter-clear{\n font-family:var(--ff-mono); font-size:12.5px; color:var(--red); cursor:pointer; background:none; border:none;\n text-decoration:underline; text-underline-offset:3px;\n }\n \/* ---------- DEAL OF THE DAY ---------- *\/\n .deal-section{\n border:1px solid rgba(216,38,44,0.3); border-radius:20px; overflow:hidden;\n background:linear-gradient(120deg, rgba(216,38,44,0.10), rgba(87,194,160,0.06) 60%), var(--bg-elev);\n display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin-bottom:80px;\n }\n .deal-visual{\n display:flex; align-items:center; justify-content:center; position:relative;\n padding:40px; border-right:1px solid var(--line);\n }\n .deal-visual svg{width:52%; position:relative; z-index:2;}\n .deal-visual .heat-glow{width:70%; height:70%;}\n .deal-info{padding:44px 46px;}\n .deal-badge{\n display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px;\n letter-spacing:.06em; text-transform:uppercase; color:var(--red); background:var(--red-soft);\n border:1px solid rgba(216,38,44,0.35); padding:7px 14px; border-radius:999px; margin-bottom:20px;\n }\n .deal-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--red); animation:pulseDot 1.4s infinite;}\n .deal-info h3{font-family:var(--ff-display); font-size:26px; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em;}\n .deal-info p{color:var(--text-muted); font-size:14.5px; margin-bottom:24px; max-width:400px;}\n .deal-price-row{display:flex; align-items:baseline; gap:14px; margin-bottom:24px;}\n .deal-price-row .now{font-family:var(--ff-display); font-size:36px; font-weight:700; color:var(--red);}\n .deal-price-row .old{font-size:17px; color:var(--text-faint); text-decoration:line-through;}\n .countdown{display:flex; gap:10px; margin-bottom:28px;}\n .countdown .unit{\n background:var(--bg); border:1px solid var(--line-strong); border-radius:10px;\n padding:10px 14px; text-align:center; min-width:58px;\n }\n .countdown .unit .num{font-family:var(--ff-mono); font-size:22px; font-weight:600; color:var(--text);}\n .countdown .unit .lbl{font-family:var(--ff-mono); font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}\n\n \/* ---------- YOU MAY ALSO LIKE ---------- *\/\n .also-like-row{\n display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity;\n }\n .also-like-row::-webkit-scrollbar{height:6px;}\n .also-like-row::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px;}\n .also-like-row .product-card{flex:0 0 200px; scroll-snap-align:start;}\n\n .no-results{\n display:none; text-align:center; padding:60px 20px; color:var(--text-muted); font-size:14.5px;\n border:1px dashed var(--line-strong); border-radius:var(--radius);\n }\n .no-results.show{display:block;}\n\n .hero{\n padding:88px 0 60px;\n display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;\n }\n .eyebrow{\n display:inline-flex; align-items:center; gap:10px;\n font-family:var(--ff-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;\n color:var(--teal-bright); background:rgba(87,194,160,0.09); border:1px solid rgba(87,194,160,0.28);\n padding:7px 14px; border-radius:999px; margin-bottom:26px;\n }\n .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-bright); box-shadow:0 0 8px var(--teal-bright); animation:pulseDot 1.8s infinite;}\n @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}\n h1{\n font-family:var(--ff-display); font-weight:700; letter-spacing:-0.03em;\n font-size:clamp(38px, 5vw, 60px); line-height:1.04; margin-bottom:22px;\n }\n h1 .accent{color:var(--red); position:relative;}\n h1 .accent2{color:var(--teal-bright);}\n .hero-sub{\n font-size:17px; color:var(--text-muted); max-width:480px; margin-bottom:34px;\n }\n .hero-actions{display:flex; align-items:center; gap:16px; margin-bottom:38px; flex-wrap:wrap;}\n .price-tag{\n font-family:var(--ff-mono); font-size:14px; color:var(--text-muted);\n }\n .price-tag .now{color:var(--text); font-size:19px; font-weight:600;}\n .price-tag .was{text-decoration:line-through; opacity:.5; margin-left:6px;}\n .trust-row{\n display:flex; gap:26px; flex-wrap:wrap;\n padding-top:26px; border-top:1px solid var(--line);\n }\n .trust-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-muted);}\n .trust-item svg{width:17px;height:17px; color:var(--gold); flex-shrink:0;}\n\n \/* Product visual *\/\n .hero-visual{\n position:relative; aspect-ratio:1\/1; display:flex; align-items:center; justify-content:center;\n }\n .ring{\n position:absolute; border-radius:50%; border:1px solid var(--line);\n }\n .ring.r1{width:92%; height:92%; animation:spin 40s linear infinite;}\n .ring.r2{width:74%; height:74%; border-style:dashed; border-color:rgba(228,179,104,0.25); animation:spin 30s linear infinite reverse;}\n @keyframes spin{to{transform:rotate(360deg);}}\n .heat-glow{\n position:absolute; width:60%; height:60%; border-radius:50%;\n background:radial-gradient(circle, var(--teal-glow) 0%, rgba(216,38,44,0.18) 45%, transparent 72%);\n filter:blur(18px);\n animation:breathe 3.4s ease-in-out infinite;\n }\n @keyframes breathe{0%,100%{transform:scale(1); opacity:.85;}50%{transform:scale(1.12); opacity:1;}}\n .temp-readout{\n position:absolute; top:8%; right:6%;\n font-family:var(--ff-mono); font-size:13px; color:var(--teal-bright);\n background:rgba(18,23,28,0.85); border:1px solid var(--line-strong); border-radius:10px;\n padding:9px 13px; backdrop-filter:blur(6px);\n display:flex; flex-direction:column; gap:2px; line-height:1.3;\n }\n .temp-readout .lbl{color:var(--text-faint); font-size:10px; letter-spacing:.08em; text-transform:uppercase;}\n .temp-readout .val{font-size:20px; font-weight:600; color:var(--text);}\n .corner{position:absolute; width:34px; height:34px; border:1.5px solid var(--gold); opacity:.55;}\n .corner.tl{top:0; left:0; border-right:0; border-bottom:0;}\n .corner.tr{top:0; right:0; border-left:0; border-bottom:0;}\n .corner.bl{bottom:0; left:0; border-right:0; border-top:0;}\n .corner.br{bottom:0; right:0; border-left:0; border-top:0;}\n .mug-svg{position:relative; z-index:2; width:56%;}\n\n \/* ---------- TICKER ---------- *\/\n .ticker-wrap{\n border-top:1px solid var(--line); border-bottom:1px solid var(--line);\n background:var(--bg-elev); overflow:hidden; padding:16px 0;\n }\n .ticker{display:flex; gap:52px; white-space:nowrap; width:max-content; animation:tick 26s linear infinite;}\n @keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}\n .ticker span{font-family:var(--ff-mono); font-size:13px; color:var(--text-muted); letter-spacing:.03em; display:flex; align-items:center; gap:10px;}\n .ticker span::before{content:\"\u2726\"; color:var(--gold);}\n\n \/* ---------- SECTION shared ---------- *\/\n section{padding:100px 0;}\n .section-head{max-width:640px; margin-bottom:56px;}\n .section-tag{\n font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;\n color:var(--red); margin-bottom:14px; display:block;\n }\n h2{\n font-family:var(--ff-display); font-weight:600; letter-spacing:-0.02em;\n font-size:clamp(28px,3.4vw,40px); margin-bottom:14px;\n }\n .section-desc{color:var(--text-muted); font-size:16px; max-width:520px;}\n\n \/* ---------- SHOP GRID (marketplace cards) ---------- *\/\n .shop-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:18px;}\n .product-card{\n background:var(--bg-elev); border:1px solid var(--line); border-radius:12px;\n overflow:hidden; transition:border-color .2s, transform .2s; display:block; position:relative;\n }\n .product-card:hover{border-color:var(--teal-bright); transform:translateY(-3px);}\n .product-card .pc-visual{\n aspect-ratio:1\/1; display:flex; align-items:center; justify-content:center; position:relative;\n background:linear-gradient(160deg, var(--bg-elev), var(--bg-elev-2));\n border-bottom:1px solid var(--line);\n }\n .product-card .pc-visual svg{width:52%;}\n .pc-tag{\n position:absolute; top:10px; left:10px; font-family:var(--ff-mono); font-size:10px;\n letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:6px;\n background:rgba(87,194,160,0.16); border:1px solid rgba(87,194,160,0.35); color:var(--teal-bright);\n z-index:2;\n }\n .pc-tag.new{background:rgba(228,179,104,0.18); border-color:rgba(228,179,104,0.4); color:var(--gold);}\n .pc-discount{\n position:absolute; top:10px; right:10px; font-family:var(--ff-mono); font-weight:600; font-size:11px;\n padding:4px 8px; border-radius:6px; background:var(--red); color:#fff; z-index:2;\n }\n .pc-body{padding:14px 14px 16px;}\n .pc-body h3{font-family:var(--ff-body); font-weight:600; font-size:13.5px; line-height:1.35; margin-bottom:7px;\n display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px;}\n .pc-rating{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); margin-bottom:9px;}\n .pc-rating .stars{color:var(--gold); font-size:11px; letter-spacing:1px;}\n .pc-price{display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap;}\n .pc-price .now{font-family:var(--ff-display); font-size:19px; font-weight:700; color:var(--red);}\n .pc-price .old{font-size:12.5px; color:var(--text-faint); text-decoration:line-through;}\n .pc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}\n .pc-mini-tag{\n font-family:var(--ff-mono); font-size:10px; color:var(--text-faint); border:1px solid var(--line);\n padding:3px 7px; border-radius:5px;\n }\n .pc-cta{width:100%; text-align:center; font-size:13px; padding:10px 16px;}\n\n \/* ---------- PRODUCT DETAIL ---------- *\/\n .detail-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}\n .gallery{display:flex; flex-direction:column; gap:14px;}\n .gallery-main{\n aspect-ratio:4\/3; border-radius:var(--radius); border:1px solid var(--line);\n background:linear-gradient(160deg, var(--bg-elev), var(--bg-elev-2));\n display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;\n }\n .gallery-main::after{\n content:\"\"; position:absolute; inset:0;\n background:radial-gradient(circle at 30% 20%, rgba(87,194,160,0.12), transparent 55%);\n }\n .swatches{display:flex; gap:12px;}\n .swatch{\n width:38px;height:38px;border-radius:50%; border:2px solid var(--line-strong); cursor:pointer;\n transition:transform .15s, border-color .15s; flex-shrink:0;\n }\n .swatch:hover, .swatch.active{transform:scale(1.1); border-color:var(--gold);}\n .swatch.green{background:#3E6E5E;} .swatch.pink{background:#D98A9C;} .swatch.red{background:#B23A3A;} .swatch.beige{background:#D8CBB4;}\n\n .specs{display:flex; flex-direction:column; gap:0;}\n .spec-row{\n display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line);\n font-size:14.5px;\n }\n .spec-row .k{color:var(--text-muted);}\n .spec-row .v{font-family:var(--ff-mono); font-weight:500;}\n .rating{display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:14px; color:var(--text-muted);}\n .stars{color:var(--gold); letter-spacing:2px;}\n .price-block{\n display:flex; align-items:baseline; gap:14px; margin:26px 0 30px;\n }\n .price-block .big{font-family:var(--ff-display); font-size:38px; font-weight:700;}\n .price-block .old{font-size:17px; color:var(--text-faint); text-decoration:line-through;}\n .badge-save{\n font-family:var(--ff-mono); font-size:12px; background:var(--red-soft); color:var(--red);\n border:1px solid rgba(216,38,44,0.3); padding:4px 10px; border-radius:999px;\n }\n\n \/* ---------- WHY \/ FEATURES ---------- *\/\n .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}\n .feat-card{\n background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);\n padding:30px 26px; transition:border-color .2s, transform .2s;\n }\n .feat-card:hover{border-color:var(--line-strong); transform:translateY(-4px);}\n .feat-icon{\n width:44px; height:44px; border-radius:10px; background:var(--bg-elev-2);\n display:flex; align-items:center; justify-content:center; margin-bottom:20px;\n border:1px solid var(--line);\n }\n .feat-icon svg{width:22px; height:22px; color:var(--teal-bright);}\n .feat-card h3{font-family:var(--ff-display); font-size:18px; margin-bottom:10px; font-weight:600;}\n .feat-card p{font-size:14.5px; color:var(--text-muted);}\n\n \/* ---------- HOW IT WORKS ---------- *\/\n .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}\n .steps::before{\n content:\"\"; position:absolute; top:26px; left:8%; right:8%; height:1px;\n background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);\n z-index:0;\n }\n .step{position:relative; z-index:1; padding-right:20px;}\n .step-num{\n width:52px; height:52px; border-radius:50%; background:var(--bg);\n border:1.5px solid var(--gold); color:var(--gold);\n display:flex; align-items:center; justify-content:center;\n font-family:var(--ff-mono); font-weight:600; font-size:16px; margin-bottom:22px;\n }\n .step h3{font-family:var(--ff-display); font-size:18px; margin-bottom:10px;}\n .step p{font-size:14.5px; color:var(--text-muted); max-width:280px;}\n\n \/* ---------- TESTIMONIALS ---------- *\/\n .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}\n .testi{\n background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:26px;\n }\n .testi .stars{margin-bottom:14px; display:block;}\n .testi p{font-size:14.5px; color:var(--text); margin-bottom:18px; line-height:1.6;}\n .testi .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted);}\n .avatar{width:32px; height:32px; border-radius:50%; background:var(--bg-elev-2); border:1px solid var(--line);}\n\n \/* ---------- ORDER FORM ---------- *\/\n .order-section{\n background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line);\n }\n .order-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:flex-start;}\n .order-summary{\n background:var(--bg-elev-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px;\n position:sticky; top:100px;\n }\n .order-summary .row{display:flex; justify-content:space-between; padding:10px 0; font-size:14px; color:var(--text-muted); border-bottom:1px solid var(--line);}\n .order-summary .row.total{color:var(--text); font-weight:600; font-size:16px; border-bottom:none; padding-top:16px;}\n .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}\n .form-grid .full{grid-column:1\/-1;}\n label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:8px; font-family:var(--ff-mono); letter-spacing:.02em;}\n input, select{\n width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px;\n padding:13px 14px; color:var(--text); font-family:var(--ff-body); font-size:14.5px;\n transition:border-color .2s;\n }\n input:focus, select:focus{outline:none; border-color:var(--teal-bright);}\n .field{margin-bottom:18px;}\n .payment-options{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px;}\n .payment-option{\n display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px;\n border:1px solid var(--line-strong); background:var(--bg); cursor:pointer; transition:border-color .2s, background .2s;\n }\n .payment-option:hover{border-color:var(--text-faint);}\n .payment-option.active{border-color:var(--teal-bright); background:rgba(87,194,160,0.08);}\n .payment-option input{width:auto; margin:0;}\n .payment-option .po-icon{font-size:20px; flex-shrink:0;}\n .payment-option .po-text{display:flex; flex-direction:column; gap:2px; font-size:13px;}\n .payment-option .po-text small{color:var(--text-faint); font-size:11.5px;}\n .card-fields{display:none; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}\n .card-fields.show{display:block;}\n .submit-note{font-size:12.5px; color:var(--text-faint); margin-top:16px; display:flex; gap:8px; align-items:flex-start;}\n .form-success{\n display:none; align-items:center; gap:12px; background:rgba(87,194,160,0.1); border:1px solid rgba(87,194,160,0.35);\n color:var(--teal-bright); padding:16px 18px; border-radius:10px; font-size:14px; margin-top:18px;\n }\n .form-success.show{display:flex;}\n\n \/* ---------- FAQ ---------- *\/\n .faq-item{border-bottom:1px solid var(--line);}\n .faq-q{\n display:flex; justify-content:space-between; align-items:center; padding:22px 0; cursor:pointer;\n font-family:var(--ff-display); font-size:16.5px; font-weight:500;\n }\n .faq-q .plus{font-family:var(--ff-mono); color:var(--gold); font-size:20px; transition:transform .25s;}\n .faq-item.open .plus{transform:rotate(45deg);}\n .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}\n .faq-a p{padding-bottom:22px; color:var(--text-muted); font-size:14.5px; max-width:640px;}\n\n \/* ---------- FOOTER CTA ---------- *\/\n .final-cta{\n text-align:center; padding:110px 0;\n background-image:repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 22px),\n repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 22px);\n }\n .final-cta-inner{\n background:var(--bg); border:1px solid var(--line-strong); border-radius:20px; padding:64px 40px;\n max-width:640px; margin:0 auto;\n }\n .final-cta h2{margin-bottom:16px;}\n .final-cta p{color:var(--text-muted); margin-bottom:32px;}\n\n footer{padding:50px 0 30px; border-top:1px solid var(--line);}\n .footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}\n .footer-links{display:flex; gap:26px; font-size:13.5px; color:var(--text-muted);}\n .footer-note{font-size:12.5px; color:var(--text-faint); margin-top:24px;}\n\n .whatsapp-fab{\n position:fixed; bottom:26px; right:26px; z-index:200;\n width:56px; height:56px; border-radius:50%; background:#25D366;\n display:flex; align-items:center; justify-content:center;\n box-shadow:0 8px 24px rgba(0,0,0,0.4); cursor:pointer; transition:transform .2s;\n }\n .whatsapp-fab:hover{transform:scale(1.08);}\n .whatsapp-fab svg{width:28px; height:28px; color:#fff;}\n\n @media (max-width:900px){\n .navlinks{display:none;}\n .hero, .detail-grid, .order-grid, .deal-section{grid-template-columns:1fr;}\n .hero-visual{order:-1; max-width:340px; margin:0 auto;}\n .deal-visual{border-right:none; border-bottom:1px solid var(--line);}\n .deal-info{padding:32px 26px;}\n .feat-grid, .steps, .testi-grid, .form-grid, .shop-grid{grid-template-columns:1fr;}\n .steps::before{display:none;}\n .order-summary{position:static;}\n }\n<\/style>\n<\/head>\n<body>\n\n<header>\n <nav class=\"wrap\">\n <div class=\"logo\"><span class=\"mark\">Douk<\/span>ene <span class=\"ar\">\u062f\u0643\u0627\u0646<\/span><\/div>\n <ul class=\"navlinks\">\n <li><a href=\"#boutique\">Boutique<\/a><\/li>\n <li><a href=\"#pourquoi\">Pourquoi Doukene<\/a><\/li>\n <li><a href=\"#avis\">Avis<\/a><\/li>\n <li><a href=\"#faq\">FAQ<\/a><\/li>\n <\/ul>\n <div class=\"nav-cta\">\n <a href=\"doukene-ar.html\" class=\"btn btn-ghost lang-switch\">\u0639\u0631\u0628\u064a<\/a>\n <a href=\"#commander\" class=\"btn btn-primary\">Commander<\/a>\n <\/div>\n <\/nav>\n<\/header>\n\n<section class=\"market-hero wrap\">\n <div class=\"market-hero-inner\">\n <div class=\"corner tl\"><\/div><div class=\"corner tr\"><\/div><div class=\"corner bl\"><\/div><div class=\"corner br\"><\/div>\n <span class=\"eyebrow\"><span class=\"dot\"><\/span> MARKETPLACE TUNISIENNE \u2014 COD OU CARTE BANCAIRE<\/span>\n <h1>Tout ce qu’il te faut,<br><span class=\"accent2\">livr\u00e9 en<\/span> <span class=\"accent\">10 jours.<\/span><\/h1>\n <p class=\"hero-sub\">Parcours la s\u00e9lection Doukene, filtre selon tes envies, commande en un clic. Z\u00e9ro carte bancaire, juste des esp\u00e8ces \u00e0 la r\u00e9ception.<\/p>\n <div class=\"market-search\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\n <input type=\"text\" id=\"marketSearchInput\" placeholder=\"Rechercher un produit \u2014 tasse, masque, tente...\">\n <button class=\"btn btn-primary\" id=\"marketSearchBtn\">Rechercher<\/button>\n <\/div>\n <div class=\"trust-row\" style=\"border-top:none; padding-top:0;\">\n <div class=\"trust-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M3 12l2-7h14l2 7M5 12v7h14v-7M9 21v-4h6v4\"\/><\/svg>Livraison 10 j. ouvrables<\/div>\n <div class=\"trust-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 10h18\"\/><\/svg>Paiement \u00e0 la livraison ou carte<\/div>\n <div class=\"trust-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2l9 4v6c0 5-3.8 8.4-9 10-5.2-1.6-9-5-9-10V6l9-4z\"\/><\/svg>Retour sous 15 jours<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"ticker-wrap\">\n <div class=\"ticker\">\n <span>PAIEMENT \u00c0 LA LIVRAISON OU PAR CARTE<\/span>\n <span>LIVRAISON SOUS 10 JOURS OUVRABLES<\/span>\n <span>+150 CLIENTS SATISFAITS<\/span>\n <span>COFFRET CADEAU PR\u00caT \u00c0 OFFRIR<\/span>\n <span>RETOUR GRATUIT 15 JOURS<\/span>\n <span>PAIEMENT \u00c0 LA LIVRAISON OU PAR CARTE<\/span>\n <span>LIVRAISON SOUS 10 JOURS OUVRABLES<\/span>\n <span>+150 CLIENTS SATISFAITS<\/span>\n <span>COFFRET CADEAU PR\u00caT \u00c0 OFFRIR<\/span>\n <span>RETOUR GRATUIT 15 JOURS<\/span>\n <\/div>\n<\/div>\n\n<section class=\"wrap\" style=\"padding-top:70px; padding-bottom:0;\">\n <div class=\"deal-section\">\n <div class=\"deal-visual\">\n <div class=\"heat-glow\"><\/div>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 30L30 88h160L110 30z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M30 88c24 12 48 15 80 15s56-3 80-15\" stroke=\"#57C2A0\" stroke-width=\"1.5\" fill=\"none\"\/>\n <line x1=\"48\" y1=\"90\" x2=\"36\" y2=\"185\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"172\" y1=\"90\" x2=\"184\" y2=\"185\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"80\" y1=\"102\" x2=\"70\" y2=\"188\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"140\" y1=\"102\" x2=\"150\" y2=\"188\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <ellipse cx=\"110\" cy=\"196\" rx=\"90\" ry=\"8\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <\/svg>\n <\/div>\n <div class=\"deal-info\">\n <span class=\"deal-badge\"><span class=\"dot\"><\/span> Deal du jour<\/span>\n <h3>Tente Pliante Garvee 3x3m<\/h3>\n <p>Aujourd’hui seulement : prix flash sur la tente Oxford 150D, montage sans outils. Stock limit\u00e9, offre valable jusqu’\u00e0 minuit.<\/p>\n <div class=\"deal-price-row\">\n <span class=\"now\">799 DT<\/span>\n <span class=\"old\">1130 DT<\/span>\n <span class=\"badge-save\">-29%<\/span>\n <\/div>\n <div class=\"countdown\" id=\"countdown\">\n <div class=\"unit\"><div class=\"num\" id=\"cdH\">00<\/div><div class=\"lbl\">Heures<\/div><\/div>\n <div class=\"unit\"><div class=\"num\" id=\"cdM\">00<\/div><div class=\"lbl\">Min<\/div><\/div>\n <div class=\"unit\"><div class=\"num\" id=\"cdS\">00<\/div><div class=\"lbl\">Sec<\/div><\/div>\n <\/div>\n <a href=\"#produit-tente\" class=\"btn btn-primary btn-lg\">Profiter de l’offre \u2192<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"boutique\" class=\"wrap\">\n <div class=\"section-head\">\n <span class=\"section-tag\">La boutique<\/span>\n <h2>Toute la s\u00e9lection Doukene.<\/h2>\n <p class=\"section-desc\">Pas de cat\u00e9gories impos\u00e9es \u2014 cherche, filtre, trouve. Tout est livr\u00e9 depuis la Tunisie en 10 jours ouvrables, paiement \u00e0 la livraison ou par carte.<\/p>\n <\/div>\n\n <div class=\"filter-bar\">\n <div class=\"filter-group\">\n <span class=\"filter-label\">Trier<\/span>\n <select id=\"sortSelect\">\n <option value=\"popular\">Popularit\u00e9<\/option>\n <option value=\"price-asc\">Prix croissant<\/option>\n <option value=\"price-desc\">Prix d\u00e9croissant<\/option>\n <option value=\"new\">Nouveaut\u00e9s<\/option>\n <\/select>\n <\/div>\n <div class=\"filter-group\">\n <span class=\"filter-label\">Prix (DT)<\/span>\n <div class=\"price-inputs\">\n <input type=\"number\" id=\"priceMin\" placeholder=\"Min\" min=\"0\">\n <span>\u2014<\/span>\n <input type=\"number\" id=\"priceMax\" placeholder=\"Max\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"chip\" data-filter=\"promo\">Promo -20% et +<\/div>\n <div class=\"chip\" data-filter=\"new\">Nouveaut\u00e9s<\/div>\n <div class=\"filter-spacer\"><\/div>\n <span class=\"filter-count\" id=\"filterCount\">4 produits<\/span>\n <button class=\"filter-clear\" id=\"filterClear\">R\u00e9initialiser<\/button>\n <\/div>\n\n <div class=\"shop-grid\" id=\"shopGrid\">\n <a href=\"#produit-tasse\" class=\"product-card\" data-name=\"Coffret Tasse Chauffante USB\" data-price=\"209\" data-old=\"275\" data-new=\"0\" data-popularity=\"90\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag\">Best-seller<\/span>\n <span class=\"pc-discount\">-24%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M40 70h100v78c0 20-18 36-40 36H80c-22 0-40-16-40-36V70z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M140 90h14c12 0 20 9 20 20s-8 20-20 20h-8\" stroke=\"#57C2A0\" stroke-width=\"5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <rect x=\"40\" y=\"60\" width=\"100\" height=\"16\" rx=\"8\" fill=\"#57C2A0\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Coffret Tasse Chauffante USB \u2014 C\u00e9ramique, cuill\u00e8re inox, coffret cadeau<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.3 \u00b7 157 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">209 DT<\/span><span class=\"old\">275 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-led\" class=\"product-card\" data-name=\"Masque LED Facial & Cou 7 Couleurs\" data-price=\"189\" data-old=\"239\" data-new=\"1\" data-popularity=\"70\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-21%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M60 30c-24 0-38 20-38 50v40c0 30 22 60 60 68v-16c-30-7-46-30-46-52V80c0-24 10-38 24-38 8 0 14 5 14 14v10c0 6 4 10 10 10s10-4 10-10V56c0-9 6-14 14-14 14 0 24 14 24 38v40c0 22-16 45-46 52v16c38-8 60-38 60-68V80c0-30-14-50-38-50-10 0-18 4-24 10-6-6-14-10-24-10z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <circle cx=\"80\" cy=\"90\" r=\"6\" fill=\"#E4B368\"\/>\n <circle cx=\"140\" cy=\"90\" r=\"6\" fill=\"#D8262C\"\/>\n <circle cx=\"110\" cy=\"130\" r=\"5\" fill=\"#57C2A0\"\/>\n <circle cx=\"90\" cy=\"150\" r=\"4\" fill=\"#57C2A0\"\/>\n <circle cx=\"130\" cy=\"150\" r=\"4\" fill=\"#E4B368\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Masque LED Facial & Cou 7 Couleurs \u2014 Phototh\u00e9rapie maison<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.5 \u00b7 +2 000 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">189 DT<\/span><span class=\"old\">239 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-tente\" class=\"product-card\" data-name=\"Tente Pliante Garvee 3x3m\" data-price=\"859\" data-old=\"1130\" data-new=\"1\" data-popularity=\"55\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-24%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 40L40 90h140L110 40z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M40 90c20 10 40 12 70 12s50-2 70-12\" stroke=\"#57C2A0\" stroke-width=\"1.5\" fill=\"none\"\/>\n <line x1=\"55\" y1=\"92\" x2=\"45\" y2=\"170\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"165\" y1=\"92\" x2=\"175\" y2=\"170\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"80\" y1=\"100\" x2=\"72\" y2=\"172\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"140\" y1=\"100\" x2=\"148\" y2=\"172\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Tente Pliante Garvee 3x3m \u2014 Oxford 150D, UV UPF 50+<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.7 \u00b7 +1 000 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">859 DT<\/span><span class=\"old\">1130 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-masque\" class=\"product-card\" data-name=\"Masque Hydrogel Bio-Collag\u00e8ne\" data-price=\"189\" data-old=\"239\" data-new=\"1\" data-popularity=\"65\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-21%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 34c-38 0-62 30-62 66 0 38 26 74 62 86 36-12 62-48 62-86 0-36-24-66-62-66z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M84 90c8-6 44-6 52 0M82 116c10 8 46 8 56 0\" stroke=\"#E4B368\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n <circle cx=\"94\" cy=\"100\" r=\"3\" fill=\"#57C2A0\"\/>\n <circle cx=\"126\" cy=\"100\" r=\"3\" fill=\"#57C2A0\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Masque Hydrogel Bio-Collag\u00e8ne \u2014 Lot de 4, soin cor\u00e9en<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Soin best-seller<\/div>\n <div class=\"pc-price\"><span class=\"now\">189 DT<\/span><span class=\"old\">239 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-shampoing\" class=\"product-card\" data-name=\"Shampoing R\u00e9novateur de Longueurs Pro Longer\" data-price=\"249\" data-old=\"328\" data-new=\"1\" data-popularity=\"60\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-24%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M85 50h50v20l10 10v100c0 8-6 14-14 14H89c-8 0-14-6-14-14V80l10-10V50z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <rect x=\"90\" y=\"30\" width=\"40\" height=\"22\" rx=\"4\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <rect x=\"82\" y=\"100\" width=\"56\" height=\"42\" rx=\"4\" fill=\"#57C2A0\" opacity=\"0.15\"\/>\n <path d=\"M92 112h36M92 122h36M92 132h24\" stroke=\"#E4B368\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.8\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Shampoing R\u00e9novateur de Longueurs \u2014 L’Or\u00e9al Pro Longer, 300ml<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Cheveux longs & cassants<\/div>\n <div class=\"pc-price\"><span class=\"now\">249 DT<\/span><span class=\"old\">328 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-masque-cheveux\" class=\"product-card\" data-name=\"Masque R\u00e9novateur de Longueurs Pro Longer\" data-price=\"259\" data-old=\"328\" data-new=\"1\" data-popularity=\"58\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-21%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M65 90c0-16 20-28 45-28s45 12 45 28v60c0 16-20 28-45 28s-45-12-45-28V90z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <ellipse cx=\"110\" cy=\"90\" rx=\"45\" ry=\"16\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <ellipse cx=\"110\" cy=\"90\" rx=\"30\" ry=\"9\" fill=\"#57C2A0\" opacity=\"0.4\"\/>\n <path d=\"M85 140c6 6 34 6 40 0\" stroke=\"#E4B368\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Masque R\u00e9novateur de Longueurs \u2014 L’Or\u00e9al Pro Longer, 250ml<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Pointes ab\u00eem\u00e9es & fourchues<\/div>\n <div class=\"pc-price\"><span class=\"now\">259 DT<\/span><span class=\"old\">328 DT<\/span><\/div>\n <div class=\"pc-tags\"><span class=\"pc-mini-tag\">COD<\/span><span class=\"pc-mini-tag\">Livraison 10j<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir le produit<\/span>\n <\/div>\n <\/a>\n <\/div>\n <div class=\"no-results\" id=\"noResults\">Aucun produit ne correspond \u00e0 ta recherche ou \u00e0 tes filtres.<\/div>\n\n <div class=\"section-head\" style=\"margin-top:70px;\">\n <span class=\"section-tag\">Recommand\u00e9 pour toi<\/span>\n <h2>Vous aimerez aussi<\/h2>\n <\/div>\n <div class=\"also-like-row\">\n <a href=\"#produit-tasse\" class=\"product-card\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag\">Best-seller<\/span>\n <span class=\"pc-discount\">-24%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M40 70h100v78c0 20-18 36-40 36H80c-22 0-40-16-40-36V70z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M140 90h14c12 0 20 9 20 20s-8 20-20 20h-8\" stroke=\"#57C2A0\" stroke-width=\"5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <rect x=\"40\" y=\"60\" width=\"100\" height=\"16\" rx=\"8\" fill=\"#57C2A0\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Coffret Tasse Chauffante USB<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.3 \u00b7 157 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">209 DT<\/span><span class=\"old\">275 DT<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-led\" class=\"product-card\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-21%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M60 30c-24 0-38 20-38 50v40c0 30 22 60 60 68v-16c-30-7-46-30-46-52V80c0-24 10-38 24-38 8 0 14 5 14 14v10c0 6 4 10 10 10s10-4 10-10V56c0-9 6-14 14-14 14 0 24 14 24 38v40c0 22-16 45-46 52v16c38-8 60-38 60-68V80c0-30-14-50-38-50-10 0-18 4-24 10-6-6-14-10-24-10z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <circle cx=\"80\" cy=\"90\" r=\"6\" fill=\"#E4B368\"\/>\n <circle cx=\"140\" cy=\"90\" r=\"6\" fill=\"#D8262C\"\/>\n <circle cx=\"110\" cy=\"130\" r=\"5\" fill=\"#57C2A0\"\/>\n <circle cx=\"90\" cy=\"150\" r=\"4\" fill=\"#57C2A0\"\/>\n <circle cx=\"130\" cy=\"150\" r=\"4\" fill=\"#E4B368\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Masque LED Facial & Cou<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.5 \u00b7 +2 000 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">189 DT<\/span><span class=\"old\">239 DT<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-masque\" class=\"product-card\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Nouveau<\/span>\n <span class=\"pc-discount\">-21%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 34c-38 0-62 30-62 66 0 38 26 74 62 86 36-12 62-48 62-86 0-36-24-66-62-66z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M84 90c8-6 44-6 52 0M82 116c10 8 46 8 56 0\" stroke=\"#E4B368\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n <circle cx=\"94\" cy=\"100\" r=\"3\" fill=\"#57C2A0\"\/>\n <circle cx=\"126\" cy=\"100\" r=\"3\" fill=\"#57C2A0\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Masque Hydrogel Bio-Collag\u00e8ne<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Soin best-seller<\/div>\n <div class=\"pc-price\"><span class=\"now\">189 DT<\/span><span class=\"old\">239 DT<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir<\/span>\n <\/div>\n <\/a>\n <a href=\"#produit-tente\" class=\"product-card\">\n <div class=\"pc-visual\">\n <span class=\"pc-tag new\">Deal du jour<\/span>\n <span class=\"pc-discount\">-29%<\/span>\n <svg viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 40L40 90h140L110 40z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M40 90c20 10 40 12 70 12s50-2 70-12\" stroke=\"#57C2A0\" stroke-width=\"1.5\" fill=\"none\"\/>\n <line x1=\"55\" y1=\"92\" x2=\"45\" y2=\"170\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"165\" y1=\"92\" x2=\"175\" y2=\"170\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"80\" y1=\"100\" x2=\"72\" y2=\"172\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <line x1=\"140\" y1=\"100\" x2=\"148\" y2=\"172\" stroke=\"#E4B368\" stroke-width=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"pc-body\">\n <h3>Tente Pliante Garvee 3x3m<\/h3>\n <div class=\"pc-rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.7 \u00b7 +1 000 vendus<\/div>\n <div class=\"pc-price\"><span class=\"now\">799 DT<\/span><span class=\"old\">1130 DT<\/span><\/div>\n <span class=\"btn btn-ghost pc-cta\">Voir<\/span>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n<section id=\"produit-tasse\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"60%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M40 70h100v78c0 20-18 36-40 36H80c-22 0-40-16-40-36V70z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M140 90h14c12 0 20 9 20 20s-8 20-20 20h-8\" stroke=\"#57C2A0\" stroke-width=\"5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <rect x=\"40\" y=\"60\" width=\"100\" height=\"16\" rx=\"8\" fill=\"#57C2A0\"\/>\n <ellipse cx=\"90\" cy=\"200\" rx=\"88\" ry=\"10\" fill=\"#0A0D10\" stroke=\"#57C2A0\" stroke-width=\"1\" opacity=\"0.5\"\/>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch green active\" title=\"Vert\"><\/div>\n <div class=\"swatch pink\" title=\"Rose\"><\/div>\n <div class=\"swatch red\" title=\"Rouge\"><\/div>\n <div class=\"swatch beige\" title=\"Beige\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Le produit<\/span>\n <h2>Coffret Tasse Chauffante USB<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.3 sur 5 \u2014 26 avis \u00b7 157 vendus<\/div>\n <p class=\"section-desc\">Une tasse en c\u00e9ramique 400ml pos\u00e9e sur une soucoupe chauffante rechargeable en USB. Elle maintient ta boisson \u00e0 55\u00b0C, sans c\u00e2ble encombrant, avec une cuill\u00e8re en acier inoxydable assortie. Livr\u00e9e dans un coffret cadeau \u2014 parfaite \u00e0 offrir ou \u00e0 garder pour toi.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">209 DT<\/span>\n <span class=\"old\">275 DT<\/span>\n <span class=\"badge-save\">-24%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Capacit\u00e9<\/span><span class=\"v\">400 ml<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Temp\u00e9rature de maintien<\/span><span class=\"v\">55\u00b0C<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Alimentation<\/span><span class=\"v\">USB rechargeable<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Mat\u00e9riau<\/span><span class=\"v\">C\u00e9ramique + inox<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Contenu du coffret<\/span><span class=\"v\">Tasse, soucoupe, cuill\u00e8re, bo\u00eete cadeau<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Couleurs<\/span><span class=\"v\">Vert, Rose, Rouge, Beige<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"produit-led\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"52%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M60 30c-24 0-38 20-38 50v40c0 30 22 60 60 68v-16c-30-7-46-30-46-52V80c0-24 10-38 24-38 8 0 14 5 14 14v10c0 6 4 10 10 10s10-4 10-10V56c0-9 6-14 14-14 14 0 24 14 24 38v40c0 22-16 45-46 52v16c38-8 60-38 60-68V80c0-30-14-50-38-50-10 0-18 4-24 10-6-6-14-10-24-10z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <circle cx=\"80\" cy=\"90\" r=\"7\" fill=\"#E4B368\"><animate attributeName=\"opacity\" values=\"1;0.3;1\" dur=\"2.2s\" repeatCount=\"indefinite\"\/><\/circle>\n <circle cx=\"140\" cy=\"90\" r=\"7\" fill=\"#D8262C\"><animate attributeName=\"opacity\" values=\"0.3;1;0.3\" dur=\"2.2s\" repeatCount=\"indefinite\"\/><\/circle>\n <circle cx=\"110\" cy=\"130\" r=\"6\" fill=\"#57C2A0\"><animate attributeName=\"opacity\" values=\"1;0.4;1\" dur=\"1.8s\" repeatCount=\"indefinite\"\/><\/circle>\n <circle cx=\"90\" cy=\"150\" r=\"5\" fill=\"#57C2A0\"><animate attributeName=\"opacity\" values=\"0.4;1;0.4\" dur=\"2s\" repeatCount=\"indefinite\"\/><\/circle>\n <circle cx=\"130\" cy=\"150\" r=\"5\" fill=\"#E4B368\"><animate attributeName=\"opacity\" values=\"1;0.4;1\" dur=\"1.6s\" repeatCount=\"indefinite\"\/><\/circle>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch\" style=\"background:#F5F1E8;\" title=\"Masque seul\"><\/div>\n <div class=\"swatch\" style=\"background:#57C2A0;\" title=\"Masque + cache-cou\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Nouveau produit<\/span>\n <h2>Masque LED Facial & Cou, 7 Couleurs<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.5 sur 5 \u2014 278 avis \u00b7 +2 000 vendus<\/div>\n <p class=\"section-desc\">Phototh\u00e9rapie LED pour le visage et le cou : 7 couleurs pour cibler diff\u00e9rents besoins de peau (\u00e9clat, apaisement, fermet\u00e9). Sangle ajustable, capteur tactile, usage \u00e0 la maison type institut de beaut\u00e9.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">189 DT<\/span>\n <span class=\"old\">239 DT<\/span>\n <span class=\"badge-save\">-21%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Zones trait\u00e9es<\/span><span class=\"v\">Visage + cou<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Couleurs LED<\/span><span class=\"v\">7 teintes<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Commande<\/span><span class=\"v\">Tactile, sans fil<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Contenu du coffret<\/span><span class=\"v\">Masque, cache-cou, c\u00e2ble USB<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Usage recommand\u00e9<\/span><span class=\"v\">10\u201315 min \/ jour<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"produit-tente\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"60%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 30L30 88h160L110 30z\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M30 88c24 12 48 15 80 15s56-3 80-15\" stroke=\"#57C2A0\" stroke-width=\"1.5\" fill=\"none\"\/>\n <line x1=\"48\" y1=\"90\" x2=\"36\" y2=\"185\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"172\" y1=\"90\" x2=\"184\" y2=\"185\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"80\" y1=\"102\" x2=\"70\" y2=\"188\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <line x1=\"140\" y1=\"102\" x2=\"150\" y2=\"188\" stroke=\"#E4B368\" stroke-width=\"4\"\/>\n <ellipse cx=\"110\" cy=\"196\" rx=\"90\" ry=\"8\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch green active\" title=\"Vert\"><\/div>\n <div class=\"swatch\" style=\"background:#3B4B63;\" title=\"Bleu\"><\/div>\n <div class=\"swatch\" style=\"background:#8B8378;\" title=\"Beige\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Nouveau produit<\/span>\n <h2>Tente Pliante Garvee 3x3m<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> 4.7 sur 5 \u2014 +1 000 vendus<\/div>\n <p class=\"section-desc\">Toile Oxford 150D imperm\u00e9able avec protection UV UPF 50+, structure \u00e0 verrouillage central pour un montage sans outils en moins d’une minute. Id\u00e9ale pour jardin, terrasse, camping, plage, f\u00eates et stands de march\u00e9.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">859 DT<\/span>\n <span class=\"old\">1130 DT<\/span>\n <span class=\"badge-save\">-24%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Dimensions<\/span><span class=\"v\">3 x 3 m<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Hauteur<\/span><span class=\"v\">270 cm<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Toile<\/span><span class=\"v\">Oxford 150D, UPF 50+<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Montage<\/span><span class=\"v\">Verrouillage central, sans outils<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Couleurs<\/span><span class=\"v\">Vert, Bleu, Beige<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"produit-masque\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"46%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M110 34c-38 0-62 30-62 66 0 38 26 74 62 86 36-12 62-48 62-86 0-36-24-66-62-66z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <path d=\"M84 90c8-6 44-6 52 0M82 116c10 8 46 8 56 0\" stroke=\"#E4B368\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n <circle cx=\"94\" cy=\"100\" r=\"4\" fill=\"#57C2A0\"\/>\n <circle cx=\"126\" cy=\"100\" r=\"4\" fill=\"#57C2A0\"\/>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch\" style=\"background:#F5F1E8;\" title=\"Original\"><\/div>\n <div class=\"swatch\" style=\"background:#E4B368;\" title=\"\u00c9clat\"><\/div>\n <div class=\"swatch\" style=\"background:#57C2A0;\" title=\"Apaisant\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Nouveau produit<\/span>\n <h2>Masque Hydrogel Bio-Collag\u00e8ne<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Soin cor\u00e9en best-seller \u2014 lot de 4<\/div>\n <p class=\"section-desc\">Masque hydrogel cor\u00e9en en deux parties, imbib\u00e9 de s\u00e9rum au collag\u00e8ne et \u00e0 l’acide oligo-hyaluronique. Il se pose 3 \u00e0 4 heures ou toute la nuit, hydrate en profondeur, resserre les pores et laisse la peau plus ferme et lumineuse d\u00e8s la premi\u00e8re utilisation.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">189 DT<\/span>\n <span class=\"old\">239 DT<\/span>\n <span class=\"badge-save\">-21%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Contenu<\/span><span class=\"v\">4 masques (34 g chacun)<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Temps de pose<\/span><span class=\"v\">3-4h ou nuit compl\u00e8te<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">B\u00e9n\u00e9fices<\/span><span class=\"v\">Hydratation, fermet\u00e9, \u00e9clat<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Type de peau<\/span><span class=\"v\">Tous types, formule hypoallerg\u00e9nique<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Origine<\/span><span class=\"v\">Soin cor\u00e9en (K-beauty)<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"produit-shampoing\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"42%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M85 50h50v20l10 10v100c0 8-6 14-14 14H89c-8 0-14-6-14-14V80l10-10V50z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <rect x=\"90\" y=\"30\" width=\"40\" height=\"22\" rx=\"4\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <rect x=\"82\" y=\"100\" width=\"56\" height=\"42\" rx=\"4\" fill=\"#57C2A0\" opacity=\"0.15\"\/>\n <path d=\"M92 112h36M92 122h36M92 132h24\" stroke=\"#E4B368\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\"0.8\"\/>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch\" style=\"background:#3E6E5E;\" title=\"300ml\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Nouveau produit<\/span>\n <h2>Shampoing R\u00e9novateur de Longueurs \u2014 L’Or\u00e9al Pro Longer<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Marque professionnelle L’Or\u00e9al<\/div>\n <p class=\"section-desc\">Shampoing professionnel enrichi en technologie Filler A-100 et acide amin\u00e9 pour r\u00e9nover instantan\u00e9ment les longueurs fragilis\u00e9es. Nettoie en douceur tout en renfor\u00e7ant la fibre capillaire \u2014 cheveux plus forts et plus brillants sur toute la longueur.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">249 DT<\/span>\n <span class=\"old\">328 DT<\/span>\n <span class=\"badge-save\">-24%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Contenance<\/span><span class=\"v\">300 ml<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Type de cheveux<\/span><span class=\"v\">Longs, cassants, pointes s\u00e8ches<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Technologie<\/span><span class=\"v\">Filler A-100 + acide amin\u00e9<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Usage<\/span><span class=\"v\">Sur cheveux mouill\u00e9s, \u00e9mulsionner, rincer<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Marque<\/span><span class=\"v\">L’Or\u00e9al Professionnel \u2014 S\u00e9rie Expert<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"produit-masque-cheveux\" class=\"wrap\">\n <div class=\"detail-grid\">\n <div class=\"gallery\">\n <div class=\"gallery-main\">\n <svg width=\"44%\" viewBox=\"0 0 220 220\" fill=\"none\">\n <path d=\"M65 90c0-16 20-28 45-28s45 12 45 28v60c0 16-20 28-45 28s-45-12-45-28V90z\" fill=\"#12171C\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <ellipse cx=\"110\" cy=\"90\" rx=\"45\" ry=\"16\" fill=\"#3E6E5E\" stroke=\"#57C2A0\" stroke-width=\"1.5\"\/>\n <ellipse cx=\"110\" cy=\"90\" rx=\"30\" ry=\"9\" fill=\"#57C2A0\" opacity=\"0.4\"\/>\n <path d=\"M85 140c6 6 34 6 40 0\" stroke=\"#E4B368\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n <\/svg>\n <\/div>\n <div class=\"swatches\">\n <div class=\"swatch\" style=\"background:#3E6E5E;\" title=\"250ml\"><\/div>\n <\/div>\n <\/div>\n <div>\n <span class=\"section-tag\">Nouveau produit<\/span>\n <h2>Masque R\u00e9novateur de Longueurs \u2014 L’Or\u00e9al Pro Longer<\/h2>\n <div class=\"rating\"><span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span> Marque professionnelle L’Or\u00e9al<\/div>\n <p class=\"section-desc\">Masque professionnel \u00e0 la texture cr\u00e9meuse, enrichi en Filler A-100 et acide amin\u00e9. Hydrate et r\u00e9pare en profondeur les longueurs et pointes ab\u00eem\u00e9es ou fourchues, pour des cheveux visiblement plus forts, doux et brillants d\u00e8s la premi\u00e8re utilisation.<\/p>\n <div class=\"price-block\">\n <span class=\"big\">259 DT<\/span>\n <span class=\"old\">328 DT<\/span>\n <span class=\"badge-save\">-21%<\/span>\n <\/div>\n <div class=\"specs\">\n <div class=\"spec-row\"><span class=\"k\">Contenance<\/span><span class=\"v\">250 ml<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Type de cheveux<\/span><span class=\"v\">Longs, cassants, pointes fourchues<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Temps de pose<\/span><span class=\"v\">3-5 minutes<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Usage<\/span><span class=\"v\">Apr\u00e8s le shampoing, sur cheveux essor\u00e9s<\/span><\/div>\n <div class=\"spec-row\"><span class=\"k\">Marque<\/span><span class=\"v\">L’Or\u00e9al Professionnel \u2014 S\u00e9rie Expert<\/span><\/div>\n <\/div>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\" style=\"margin-top:30px; width:100%;\">Ajouter \u00e0 ma commande<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"pourquoi\" class=\"wrap\">\n <div class=\"section-head\">\n <span class=\"section-tag\">Pourquoi Doukene<\/span>\n <h2>Simple \u00e0 commander, rapide \u00e0 recevoir.<\/h2>\n <p class=\"section-desc\">Pas de carte bancaire, pas de compte \u00e0 cr\u00e9er. On a construit Doukene pour que commander depuis la Tunisie soit aussi simple qu’un message WhatsApp.<\/p>\n <\/div>\n <div class=\"feat-grid\">\n <div class=\"feat-card\">\n <div class=\"feat-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 10h18\"\/><\/svg><\/div>\n <h3>COD ou carte bancaire<\/h3>\n <p>Esp\u00e8ces \u00e0 la r\u00e9ception, ou carte bancaire s\u00e9curis\u00e9e au moment de la commande \u2014 comme tu pr\u00e9f\u00e8res.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M3 12l2-7h14l2 7M5 12v7h14v-7M9 21v-4h6v4\"\/><\/svg><\/div>\n <h3>Livraison en 10 jours ouvrables<\/h3>\n <p>Stock g\u00e9r\u00e9 depuis la Tunisie, colis remis au transporteur d\u00e8s validation de ta commande, livraison sous 10 jours ouvrables.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2l9 4v6c0 5-3.8 8.4-9 10-5.2-1.6-9-5-9-10V6l9-4z\"\/><\/svg><\/div>\n <h3>Retour sous 15 jours<\/h3>\n <p>Le produit ne te convient pas ? On te rembourse ou on t’\u00e9change, sans complication.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"wrap\">\n <div class=\"section-head\">\n <span class=\"section-tag\">Comment \u00e7a marche<\/span>\n <h2>Trois \u00e9tapes, z\u00e9ro friction.<\/h2>\n <\/div>\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-num\">01<\/div>\n <h3>Tu commandes<\/h3>\n <p>Remplis le formulaire ou \u00e9cris-nous sur WhatsApp avec ton nom, ta ville et ton num\u00e9ro.<\/p>\n <\/div>\n <div class=\"step\">\n <div class=\"step-num\">02<\/div>\n <h3>On confirme<\/h3>\n <p>Un membre de l’\u00e9quipe Doukene t’appelle pour valider la commande, en quelques minutes.<\/p>\n <\/div>\n <div class=\"step\">\n <div class=\"step-num\">03<\/div>\n <h3>Tu re\u00e7ois & tu payes<\/h3>\n <p>Le livreur t’apporte le colis sous 10 jours ouvrables. Tu payes en esp\u00e8ces ou par carte \u00e0 la r\u00e9ception.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"mosaic-rule\"><\/div>\n\n<section id=\"avis\" class=\"wrap\">\n <div class=\"section-head\">\n <span class=\"section-tag\">Ils ont command\u00e9<\/span>\n <h2>Ce qu’en disent nos premiers clients.<\/h2>\n <\/div>\n <div class=\"testi-grid\">\n <div class=\"testi\">\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\n <p>“Re\u00e7ue en une dizaine de jours comme annonc\u00e9. Le coffret est encore plus beau qu’en photo, je l’ai offert \u00e0 ma s\u0153ur.”<\/p>\n <div class=\"who\"><div class=\"avatar\"><\/div>Rym, Sousse<\/div>\n <\/div>\n <div class=\"testi\">\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\n <p>“Le caf\u00e9 reste vraiment chaud pendant que je travaille. Simple \u00e0 commander, j’ai pay\u00e9 \u00e0 la livraison, aucun souci.”<\/p>\n <div class=\"who\"><div class=\"avatar\"><\/div>Mehdi, Tunis<\/div>\n <\/div>\n <div class=\"testi\">\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span>\n <p>“Tr\u00e8s bon rapport qualit\u00e9 prix pour un cadeau. Livreur sympa, colis bien prot\u00e9g\u00e9.”<\/p>\n <div class=\"who\"><div class=\"avatar\"><\/div>Ines, Sfax<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"commander\" class=\"order-section\">\n <div class=\"wrap\" style=\"padding:100px 0;\">\n <div class=\"order-grid\">\n <div>\n <span class=\"section-tag\">Derni\u00e8re \u00e9tape<\/span>\n <h2>Confirme ta commande<\/h2>\n <p class=\"section-desc\" style=\"margin-bottom:30px;\">Remplis tes informations, on te rappelle pour confirmer et ton colis part sous 24h.<\/p>\n <div class=\"order-summary\">\n <div class=\"row\"><span id=\"sumProductName\">Coffret Tasse Chauffante USB<\/span><span id=\"sumProductPrice\">209 DT<\/span><\/div>\n <div class=\"row\"><span>Livraison<\/span><span>Gratuite<\/span><\/div>\n <div class=\"row total\"><span>Total \u00e0 payer \u00e0 la livraison<\/span><span id=\"sumTotal\">209 DT<\/span><\/div>\n <\/div>\n <\/div>\n <div>\n <form id=\"orderForm\">\n <div class=\"field\">\n <label>Produit<\/label>\n <select id=\"productSelect\">\n <option value=\"209\" data-id=\"mug\" data-name=\"Coffret Tasse Chauffante USB\">Coffret Tasse Chauffante USB \u2014 209 DT<\/option>\n <option value=\"189\" data-id=\"led\" data-name=\"Masque LED Facial & Cou 7 Couleurs\">Masque LED Facial & Cou 7 Couleurs \u2014 189 DT<\/option>\n <option value=\"859\" data-id=\"tente\" data-name=\"Tente Pliante Garvee 3x3m\">Tente Pliante Garvee 3x3m \u2014 859 DT<\/option>\n <option value=\"189\" data-id=\"masque\" data-name=\"Masque Hydrogel Bio-Collag\u00e8ne\">Masque Hydrogel Bio-Collag\u00e8ne \u2014 189 DT<\/option>\n <option value=\"249\" data-id=\"shampoing\" data-name=\"Shampoing R\u00e9novateur de Longueurs Pro Longer\">Shampoing R\u00e9novateur de Longueurs Pro Longer \u2014 249 DT<\/option>\n <option value=\"259\" data-id=\"masque-cheveux\" data-name=\"Masque R\u00e9novateur de Longueurs Pro Longer\">Masque R\u00e9novateur de Longueurs Pro Longer \u2014 259 DT<\/option>\n <\/select>\n <\/div>\n <div class=\"form-grid\">\n <div class=\"field\"><label>Nom complet<\/label><input type=\"text\" required placeholder=\"Ton nom et pr\u00e9nom\"><\/div>\n <div class=\"field\"><label>T\u00e9l\u00e9phone<\/label><input type=\"tel\" required placeholder=\"+216 XX XXX XXX\"><\/div>\n <div class=\"field\"><label>Ville<\/label><input type=\"text\" required placeholder=\"Ex : Tunis, Sfax, Sousse...\"><\/div>\n <div class=\"field\"><label>Variante<\/label>\n <select id=\"variantSelect\">\n <option>Vert<\/option><option>Rose<\/option><option>Rouge<\/option><option>Beige<\/option>\n <\/select>\n <\/div>\n <div class=\"field full\"><label>Adresse de livraison<\/label><input type=\"text\" required placeholder=\"Rue, num\u00e9ro, quartier\"><\/div>\n <\/div>\n\n <div class=\"field full\">\n <label>Mode de paiement<\/label>\n <div class=\"payment-options\">\n <label class=\"payment-option active\">\n <input type=\"radio\" name=\"payment\" value=\"cod\" checked>\n <span class=\"po-icon\">\ud83d\udcb5<\/span>\n <span class=\"po-text\"><strong>Paiement \u00e0 la livraison<\/strong><small>Esp\u00e8ces \u00e0 la r\u00e9ception du colis<\/small><\/span>\n <\/label>\n <label class=\"payment-option\">\n <input type=\"radio\" name=\"payment\" value=\"card\">\n <span class=\"po-icon\">\ud83d\udcb3<\/span>\n <span class=\"po-text\"><strong>Carte bancaire<\/strong><small>Paiement s\u00e9curis\u00e9 en ligne<\/small><\/span>\n <\/label>\n <\/div>\n <div class=\"card-fields\" id=\"cardFields\">\n <div class=\"form-grid\">\n <div class=\"field full\"><label>Num\u00e9ro de carte<\/label><input type=\"text\" placeholder=\"\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022\"><\/div>\n <div class=\"field\"><label>Date d’expiration<\/label><input type=\"text\" placeholder=\"MM\/AA\"><\/div>\n <div class=\"field\"><label>CVC<\/label><input type=\"text\" placeholder=\"\u2022\u2022\u2022\"><\/div>\n <\/div>\n <p class=\"submit-note\">\ud83d\udd12 Paiement carte \u00e0 connecter \u00e0 un prestataire tunisien (Konnect, Paymee, ClicToPay) \u2014 champs non fonctionnels pour l’instant.<\/p>\n <\/div>\n <\/div>\n\n <button type=\"submit\" id=\"submitBtn\" class=\"btn btn-primary btn-lg\" style=\"width:100%; margin-top:8px;\">Confirmer ma commande \u2014 209 DT<\/button>\n <p class=\"submit-note\">\ud83d\udd12 Paiement \u00e0 la livraison ou par carte bancaire \u2014 comme tu pr\u00e9f\u00e8res.<\/p>\n <div class=\"form-success\" id=\"formSuccess\">\u2713 Commande re\u00e7ue ! On t’appelle tr\u00e8s vite pour confirmer.<\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"faq\" class=\"wrap\">\n <div class=\"section-head\">\n <span class=\"section-tag\">Questions fr\u00e9quentes<\/span>\n <h2>Tout ce qu’il faut savoir.<\/h2>\n <\/div>\n <div class=\"faq-list\">\n <div class=\"faq-item\">\n <div class=\"faq-q\">Est-ce que je dois payer maintenant ? <span class=\"plus\">+<\/span><\/div>\n <div class=\"faq-a\"><p>Tu choisis : paiement \u00e0 la livraison (esp\u00e8ces, \u00e0 la r\u00e9ception du colis) ou paiement par carte bancaire au moment de la commande. Les deux options sont disponibles partout en Tunisie.<\/p><\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-q\">En combien de temps je re\u00e7ois ma commande ? <span class=\"plus\">+<\/span><\/div>\n <div class=\"faq-a\"><p>Le stock est g\u00e9r\u00e9 en Tunisie, donc la livraison prend en moyenne 10 jours ouvrables partout dans le pays.<\/p><\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-q\">Puis-je changer de couleur apr\u00e8s ma commande ? <span class=\"plus\">+<\/span><\/div>\n <div class=\"faq-a\"><p>Oui, contacte-nous sur WhatsApp avant l’exp\u00e9dition et on ajuste ta commande sans frais.<\/p><\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-q\">Que se passe-t-il si le produit ne me convient pas ? <span class=\"plus\">+<\/span><\/div>\n <div class=\"faq-a\"><p>Tu as 15 jours pour nous contacter et organiser un retour ou un \u00e9change.<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"final-cta wrap\">\n <div class=\"final-cta-inner\">\n <h2>Yezzi el bard. Commande ta tasse.<\/h2>\n <p>Coffret cadeau, caf\u00e9 toujours chaud, livr\u00e9 en 10 jours ouvrables partout en Tunisie.<\/p>\n <a href=\"#commander\" class=\"btn btn-primary btn-lg\">Je commande \u2014 209 DT<\/a>\n <\/div>\n<\/section>\n\n<footer class=\"wrap\">\n <div class=\"footer-grid\">\n <div class=\"logo\"><span class=\"mark\">Douk<\/span>ene <span class=\"ar\">\u062f\u0643\u0627\u0646<\/span><\/div>\n <div class=\"footer-links\">\n <a href=\"#boutique\">Boutique<\/a>\n <a href=\"#faq\">FAQ<\/a>\n <a href=\"#commander\">Commander<\/a>\n <a href=\"https:\/\/wa.me\/21600000000\" target=\"_blank\">WhatsApp<\/a>\n <\/div>\n <\/div>\n <p class=\"footer-note\">\u00a9 2026 Doukene. Boutique en ligne bas\u00e9e en Tunisie. Paiement \u00e0 la livraison ou par carte bancaire.<\/p>\n<\/footer>\n\n<a class=\"whatsapp-fab\" href=\"https:\/\/wa.me\/21600000000?text=Bonjour%2C%20je%20veux%20commander%20le%20coffret%20tasse%20chauffante%20Doukene\" target=\"_blank\" aria-label=\"Commander sur WhatsApp\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.7-1-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z\"\/><path d=\"M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.5A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-3 .9.9-2.9-.2-.3A8 8 0 1112 20z\"\/><\/svg>\n<\/a>\n\n<script>\n \/\/ Deal du jour \u2014 countdown to midnight\n (function(){\n const h = document.getElementById('cdH');\n const m = document.getElementById('cdM');\n const s = document.getElementById('cdS');\n if(!h) return;\n function tick(){\n const now = new Date();\n const midnight = new Date(now);\n midnight.setHours(24,0,0,0);\n const diff = Math.max(0, midnight - now);\n const hh = Math.floor(diff \/ 3600000);\n const mm = Math.floor((diff % 3600000) \/ 60000);\n const ss = Math.floor((diff % 60000) \/ 1000);\n h.textContent = String(hh).padStart(2,'0');\n m.textContent = String(mm).padStart(2,'0');\n s.textContent = String(ss).padStart(2,'0');\n }\n tick();\n setInterval(tick, 1000);\n })();\n\n \/\/ Marketplace filter \/ sort \/ search\n (function(){\n const grid = document.getElementById('shopGrid');\n const cards = Array.from(grid.querySelectorAll('.product-card'));\n const searchInput = document.getElementById('marketSearchInput');\n const searchBtn = document.getElementById('marketSearchBtn');\n const sortSelect = document.getElementById('sortSelect');\n const priceMin = document.getElementById('priceMin');\n const priceMax = document.getElementById('priceMax');\n const chips = document.querySelectorAll('.chip');\n const filterCount = document.getElementById('filterCount');\n const filterClear = document.getElementById('filterClear');\n const noResults = document.getElementById('noResults');\n let activeChips = new Set();\n\n function applyFilters(){\n const q = (searchInput.value || '').trim().toLowerCase();\n const min = parseFloat(priceMin.value) || 0;\n const max = parseFloat(priceMax.value) || Infinity;\n let visibleCount = 0;\n\n cards.forEach(card=>{\n const name = card.dataset.name.toLowerCase();\n const price = parseFloat(card.dataset.price);\n const old = parseFloat(card.dataset.old);\n const isNew = card.dataset.new === '1';\n const discountPct = ((old - price) \/ old) * 100;\n\n let visible = true;\n if(q && !name.includes(q)) visible = false;\n if(price < min || price > max) visible = false;\n if(activeChips.has('promo') && discountPct < 20) visible = false;\n if(activeChips.has('new') && !isNew) visible = false;\n\n card.style.display = visible ? '' : 'none';\n if(visible) visibleCount++;\n });\n\n \/\/ sort visible cards\n const sortVal = sortSelect.value;\n const sorted = cards.slice().sort((a,b)=>{\n if(sortVal === 'price-asc') return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);\n if(sortVal === 'price-desc') return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);\n if(sortVal === 'new') return parseInt(b.dataset.new) - parseInt(a.dataset.new);\n return parseInt(b.dataset.popularity) - parseInt(a.dataset.popularity);\n });\n sorted.forEach(card => grid.appendChild(card));\n\n filterCount.textContent = visibleCount + (visibleCount > 1 ? ' produits' : ' produit');\n noResults.classList.toggle('show', visibleCount === 0);\n }\n\n searchInput.addEventListener('input', applyFilters);\n searchBtn.addEventListener('click', (e)=>{ e.preventDefault(); applyFilters(); });\n sortSelect.addEventListener('change', applyFilters);\n priceMin.addEventListener('input', applyFilters);\n priceMax.addEventListener('input', applyFilters);\n chips.forEach(chip=>{\n chip.addEventListener('click', ()=>{\n const key = chip.dataset.filter;\n if(activeChips.has(key)){ activeChips.delete(key); chip.classList.remove('active'); }\n else{ activeChips.add(key); chip.classList.add('active'); }\n applyFilters();\n });\n });\n filterClear.addEventListener('click', ()=>{\n searchInput.value = ''; priceMin.value=''; priceMax.value=''; sortSelect.value='popular';\n activeChips.clear(); chips.forEach(c=>c.classList.remove('active'));\n applyFilters();\n });\n\n applyFilters();\n })();\n\n \/\/ FAQ accordion\n document.querySelectorAll('.faq-item').forEach(item=>{\n const q = item.querySelector('.faq-q');\n const a = item.querySelector('.faq-a');\n q.addEventListener('click', ()=>{\n const isOpen = item.classList.contains('open');\n document.querySelectorAll('.faq-item').forEach(i=>{i.classList.remove('open'); i.querySelector('.faq-a').style.maxHeight=null;});\n if(!isOpen){ item.classList.add('open'); a.style.maxHeight = a.scrollHeight + 'px'; }\n });\n });\n\n \/\/ Swatch selection\n document.querySelectorAll('.swatch').forEach(s=>{\n s.addEventListener('click', ()=>{\n document.querySelectorAll('.swatch').forEach(x=>x.classList.remove('active'));\n s.classList.add('active');\n });\n });\n\n \/\/ Product selector: sync summary price\/name + variant options\n const productSelect = document.getElementById('productSelect');\n const variantSelect = document.getElementById('variantSelect');\n const sumName = document.getElementById('sumProductName');\n const sumPrice = document.getElementById('sumProductPrice');\n const sumTotal = document.getElementById('sumTotal');\n const variants = {\n mug: [\"Vert\",\"Rose\",\"Rouge\",\"Beige\"],\n led: [\"Masque seul\",\"Masque + cache-cou\"],\n tente: [\"Vert\",\"Bleu\",\"Beige\"],\n masque: [\"Original\",\"\u00c9clat\",\"Apaisant\"],\n shampoing: [\"300ml\"],\n \"masque-cheveux\": [\"250ml\"]\n };\n function syncProduct(){\n const opt = productSelect.options[productSelect.selectedIndex];\n const price = opt.value;\n sumName.textContent = opt.dataset.name;\n sumPrice.textContent = price + ' DT';\n sumTotal.textContent = price + ' DT';\n variantSelect.innerHTML = variants[opt.dataset.id].map(v => `<option>${v}<\/option>`).join('');\n document.getElementById('submitBtn').textContent = 'Confirmer ma commande \u2014 ' + price + ' DT';\n }\n productSelect.addEventListener('change', syncProduct);\n syncProduct();\n\n \/\/ Payment method toggle\n const paymentOptions = document.querySelectorAll('.payment-option');\n const cardFields = document.getElementById('cardFields');\n paymentOptions.forEach(opt=>{\n opt.addEventListener('click', ()=>{\n paymentOptions.forEach(o=>o.classList.remove('active'));\n opt.classList.add('active');\n opt.querySelector('input[type=\"radio\"]').checked = true;\n cardFields.classList.toggle('show', opt.querySelector('input').value === 'card');\n });\n });\n\n \/\/ Order form (client-side demo \u2014 connect to a backend \/ WhatsApp API to go live)\n document.getElementById('orderForm').addEventListener('submit', function(e){\n e.preventDefault();\n document.getElementById('formSuccess').classList.add('show');\n this.querySelector('button[type=\"submit\"]').textContent = '\u2713 Commande envoy\u00e9e';\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Doukene \u2014 Boutique Tunisienne. Coffret Tasse Chauffante & Masque LED Doukene \u062f\u0643\u0627\u0646 Boutique Pourquoi Doukene Avis FAQ \u0639\u0631\u0628\u064a Commander MARKETPLACE TUNISIENNE \u2014 COD OU CARTE BANCAIRE Tout ce qu’il te faut,livr\u00e9 en 10 jours. Parcours la s\u00e9lection Doukene, filtre selon tes envies, commande en un clic. Z\u00e9ro carte bancaire, juste des esp\u00e8ces \u00e0 la r\u00e9ception. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":2,"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/doukene.com\/index.php\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}