/* Concept: boutique mono-page sombre. Le bleu néon de l'affiche ATECH sert d'unique accent, les lueurs restent derrière le héros et autour des boutons. Arabe d'abord (RTL), français en option. */ :root { --bg: #050F1A; --bg-deep: #020A17; --card: #0F1D2B; --line: #183657; --neon: #08B8F8; --neon-2: #0878D8; --glow: #3FE4FF; --text: #F7F7F9; --text-2: #D8DCE2; --muted: #8EA3B8; --danger: #FF7B7B; --ok: #3DDC97; --font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --font-brand: 'Orbitron', 'Cairo', 'Segoe UI', sans-serif; --radius: 18px; --glow-soft: 0 0 18px rgba(8, 184, 248, .35); --glow-strong: 0 0 28px rgba(63, 228, 255, .55); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--bg); color: var(--text-2); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg-deep); } h1, h2, h3, p { margin: 0; } h1, h2, h3 { color: var(--text); font-weight: 900; text-wrap: balance; line-height: 1.25; } a { color: var(--neon); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: 1152px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .neon { color: var(--neon); text-shadow: 0 0 18px rgba(8, 184, 248, .6); } /* ---------- Header ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(2, 10, 23, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .bar { display: flex; align-items: center; gap: 16px; min-height: 68px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); } .brand svg { height: 34px; width: auto; } .brand b { font-family: var(--font-brand); font-size: 21px; letter-spacing: .08em; font-weight: 800; } .nav { display: flex; gap: 22px; margin-inline-start: 28px; } .nav a { color: var(--text-2); font-weight: 600; padding: 6px 2px; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--glow); border-color: var(--neon); } .bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-weight: 700; color: var(--text); transition: border-color .2s, box-shadow .2s; } .chip:hover { border-color: var(--neon); box-shadow: var(--glow-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 28px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 900; font-size: 17px; text-align: center; background: linear-gradient(135deg, var(--neon-2), var(--neon)); color: var(--bg-deep); box-shadow: var(--glow-soft); transition: box-shadow .25s, transform .15s; } .btn:hover { box-shadow: var(--glow-strong); transform: translateY(-2px); } .btn.ghost { background: rgba(8, 184, 248, .06); color: var(--text); border: 2px solid var(--neon); box-shadow: var(--glow-soft), inset 0 0 14px rgba(8, 184, 248, .18); } .btn.sm { min-height: 42px; padding: 8px 18px; font-size: 15px; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: 56px 40px; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 420px at 12% 0%, rgba(8, 120, 216, .32), transparent 65%), radial-gradient(600px 460px at 100% 45%, rgba(8, 184, 248, .18), transparent 65%); } .hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; } .hero-copy { min-width: 0; } .hero h1 { font-size: clamp(38px, 6.4vw, 72px); } .sub { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: clamp(17px, 2.4vw, 24px); font-weight: 700; color: var(--text); } .sub::before { content: ""; flex: 0 1 56px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon)); box-shadow: var(--glow-soft); } html[dir="rtl"] .sub::before { background: linear-gradient(270deg, transparent, var(--neon)); } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; } .feature { min-width: 0; text-align: center; padding: 0 8px; } .feature + .feature { border-inline-start: 1px solid var(--line); } .ring { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--neon); display: grid; place-items: center; color: var(--text); box-shadow: var(--glow-soft), inset 0 0 14px rgba(8, 184, 248, .22); } .ring .ic { width: 32px; height: 32px; } .feature b { display: block; color: var(--text); font-weight: 700; line-height: 1.3; } .feature span { display: block; color: var(--neon); font-weight: 900; direction: ltr; unicode-bidi: isolate; } .hero-visual { position: relative; display: grid; place-items: center; min-width: 0; } .hero-visual .ph { width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--neon); box-shadow: var(--glow-strong), inset 0 0 40px rgba(8, 184, 248, .2); background: radial-gradient(circle, rgba(8, 120, 216, .28), transparent 70%); } .hero-visual .ph svg.logo { width: 46%; height: auto; } /* ---------- Placeholders d'images ---------- */ .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; padding: 12px; } .ph .ic { width: 34px; height: 34px; } .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; } .thumb.ph { border: 2px dashed var(--line); background: var(--bg-deep); } /* ---------- Trust ---------- */ .trust { border-block: 1px solid var(--line); background: rgba(15, 29, 43, .5); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 22px; } .trust-item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); font-weight: 700; line-height: 1.35; } .trust-item .ic { width: 34px; height: 34px; color: var(--neon); } /* ---------- Sections ---------- */ section { padding-block: 64px 8px; } .sec-head { display: grid; gap: 8px; margin-bottom: 28px; } .sec-head h2 { font-size: clamp(28px, 4.4vw, 42px); } .sec-head p { color: var(--muted); max-width: 60ch; } /* ---------- Produits ---------- */ .pack { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; padding: 24px; border: 1px solid var(--neon); border-radius: 24px; background: linear-gradient(160deg, var(--card), var(--bg-deep)); box-shadow: var(--glow-soft); } .pack > * { min-width: 0; } .pack-body { display: flex; flex-direction: column; gap: 14px; justify-content: center; } .tag { align-self: flex-start; padding: 3px 14px; border-radius: 999px; border: 1px solid var(--neon); background: rgba(8, 184, 248, .14); color: var(--glow); font-weight: 700; font-size: 14px; } .pack h3 { font-size: clamp(24px, 3.4vw, 34px); } .inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .inc li { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; } .inc .ic { color: var(--neon); } .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; } .price { color: var(--neon); font-weight: 900; font-size: 30px; text-shadow: 0 0 12px rgba(8, 184, 248, .4); font-variant-numeric: tabular-nums; } .old { color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } .save { color: var(--ok); font-weight: 700; font-size: 14px; } .row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; } .card { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; background: linear-gradient(180deg, var(--card), var(--bg-deep)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s, border-color .25s, box-shadow .25s; } .card:hover { transform: translateY(-4px); border-color: var(--neon); box-shadow: var(--glow-soft); } .card h3 { font-size: 18px; } .card p { font-size: 14px; color: var(--muted); flex: 1; } .card .price { font-size: 22px; } .card .row-actions { display: grid; grid-template-columns: 1fr; } /* ---------- Livraison ---------- */ .zones { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; min-width: 520px; } th, td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); } th { background: var(--card); color: var(--text); font-weight: 700; } tr:last-child td { border-bottom: 0; } td.n { font-weight: 900; color: var(--neon); font-variant-numeric: tabular-nums; white-space: nowrap; } td small { display: block; color: var(--muted); } .note { margin-top: 12px; color: var(--muted); font-size: 14px; } /* ---------- Commande ---------- */ .checkout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: start; } .checkout > * { min-width: 0; } .panel { background: linear-gradient(180deg, var(--card), var(--bg-deep)); border: 1px solid var(--line); border-radius: 22px; padding: 24px; } .panel h3 { font-size: 20px; margin-bottom: 18px; } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: grid; gap: 6px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label, .legend { font-weight: 700; color: var(--text); font-size: 15px; } input, select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--bg-deep); color: var(--text); border: 1px solid var(--line); border-radius: 12px; } textarea { min-height: 84px; resize: vertical; } input::placeholder, textarea::placeholder { color: #5f7690; } input:focus, select:focus, textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(8, 184, 248, .25); outline: none; } .field.bad input, .field.bad select, .field.bad textarea { border-color: var(--danger); } .err { color: var(--danger); font-size: 13px; min-height: 0; } .err:empty { display: none; } .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mode { position: relative; } .mode input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .mode span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; text-align: center; background: var(--bg-deep); color: var(--text-2); } .mode input:checked + span { border-color: var(--neon); color: var(--text); background: rgba(8, 184, 248, .1); box-shadow: var(--glow-soft); } .mode input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; } .pay { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--text); font-weight: 600; } .pay .ic { color: var(--neon); } .lines { display: grid; gap: 12px; margin-bottom: 14px; } .line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .line b { color: var(--text); font-weight: 700; } .line .sum { font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .qty { display: inline-flex; align-items: center; gap: 4px; } .qty button, .x { width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 50%; color: var(--text); } .qty button:hover, .x:hover { border-color: var(--neon); } .qty output { min-width: 28px; text-align: center; font-weight: 900; color: var(--text); } .x { border-color: transparent; color: var(--muted); } .totals { display: grid; gap: 8px; } .totals div { display: flex; justify-content: space-between; gap: 12px; } .totals .grand { font-size: 22px; font-weight: 900; color: var(--text); padding-top: 10px; border-top: 1px solid var(--line); } .totals .grand span:last-child { color: var(--neon); } .empty { color: var(--muted); text-align: center; padding: 18px 0; } .empty a { font-weight: 700; } .panel .btn.full { width: 100%; margin-top: 18px; } .success { display: grid; gap: 16px; text-align: center; justify-items: center; } .success .ring { margin: 0; border-color: var(--ok); color: var(--ok); box-shadow: 0 0 18px rgba(61, 220, 151, .35); } .success textarea { min-height: 200px; text-align: start; font-size: 14px; } .ref { font-family: var(--font-brand); letter-spacing: .1em; color: var(--glow); font-size: 20px; direction: ltr; unicode-bidi: isolate; } /* ---------- Fenêtre de commande ---------- */ .modal { position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; background: rgba(0, 0, 0, .74); padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } .sheet { width: 100%; max-width: 720px; margin-block: auto; padding: 24px; background: linear-gradient(180deg, var(--card), var(--bg-deep)); border: 1px solid var(--neon); border-radius: 24px; box-shadow: var(--glow-soft); } .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .sheet-head h3 { font-size: 24px; } .lead { color: var(--muted); font-size: 14px; margin-bottom: 16px; } .pick { display: grid; gap: 12px; padding: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-deep); } .pick-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pick-name b { color: var(--text); } .pick-name span { color: var(--neon); font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; } .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-weight: 700; } .sheet .btn { width: 100%; } .sheet .row-actions .btn { width: auto; flex: 1 1 180px; } /* ---------- Pied de page ---------- */ footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--bg-deep); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); } .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 14px; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-grid, .pack, .checkout { grid-template-columns: 1fr; } .hero-visual { order: -1; } .hero-visual .ph { width: min(70%, 300px); } .grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .nav { display: none; } } @media (max-width: 560px) { .features { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .feature:nth-child(3) { border-inline-start: 0; } .ring { width: 62px; height: 62px; } .grid, .inc, .form, .modes { grid-template-columns: 1fr; } .brand b { font-size: 18px; } .chip { padding: 7px 12px; } .sheet { padding: 18px; } .pack { padding: 16px; } .hero { padding-block: 28px 28px; } section { padding-top: 48px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

Offre spéciale : livraison gratuite, paiement à la livraison, plus rapide et vous pouvez commander dès maintenant !

Offre spéciale : livraison gratuite et paiement à réception

Dépêchez-vous et commandez dès maintenant !

Expedition et manutention

Après confirmation de l'achat, nous expédions et envoyons le produit selon la méthode que vous avez choisi, soit par notre agent d'expédition, soit par le biais du service Express.

Modes d'expédition:

Express: Un service qui vous garantit la livraison des envois à l'adresse convenu dans un délai de 3 jours à 7 jours vers les destinations prioritaires.

Responsable de l'expédition: Notre magasin passe un contrat avec un groupe de responsables d'expédition qui assurent la livraison des produits dans un délai allant de 1 à 3 jours.