/* 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 !

Aide & FAQ

Comment pouvons-nous vous aider ?

Trouver ici les questions les plus fréquentes.

Quand la demande me parviendra-t-elle?

Dépend de la compagnie maritime choisie et le responsable de la livraison, nous fournissons un groupe de responsables d'expédition basés dans les grandes villes, cela prend généralement 1 à 3 jours pour que la commande soit confirmée.

Y a-t-il une livraison à l'extérieur du pays?

Actuellement, les compagnies maritimes avec qui nous travaillons, livrent seulement dans le pays et dans quelques villes spécifié dans la page de livraison.

Vous pouvez faire une demande de livraison à l'extérieur du pays auprès de l'équipe du magasin via WhatsApp en leur fournissant des informations sur le poids du produit et les tarifs pour les transitaires internationaux qui ne sont pas actuellement enregistrés dans le magasin.

En cas de défaut de fabrication du produit?

Vous devez lire la politique de retour pour connaître les conditions de retour et d'échange, en cas d'un défaut sur le produit , il a été convenu de retourner, la valeur d'expédition de l'entreprise est calculée, et le fret est retourné au client. Quant à la valeur du produit, elle n'est pas calculée pour le client selon la politique de retour.

Je souhaite commander de grandes quantités. Y a-t-il une remise?

Le magasin propose un service de livraison pour les commandes de grandes quantités et il y a une remise allant entre 10-20% sur certains produits Vous pouvez nous contacter directement via la page contact et vous renseigner sur les quantités.