/* 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; } }
Présentation
Les conditions d'utilisation s'appliquent au site et à tous nos services, succursales et sites Internet qui se réfèrent à ces conditions générales de référence.
Lors de sa visite sur le site, le client déclare accepter les conditions générales en vigueur. Si vous ne l'acceptez pas, vous ne devez pas utiliser notre site. Les exploitants du site se réservent le droit de changer ou d'amender des parties des conditions d'utilisation et des dispositions, d'y ajouter des informations ou de les supprimer à tout moment. Les modifications prennent effet dès leur mise en ligne sur le site sans préavis. Veuillez consulter les conditions d'utilisation et les conditions régulièrement pour toute mise à jour. Votre utilisation continue du site - après la publication des modifications des présentes conditions d'utilisation - constitue votre pleine acceptation de ces modifications.
Utilisation du site
Pour visiter ce site, vous devez avoir au moins 18 ans ou visiter le site sous la surveillance d'un parent ou d'un tuteur légal.
Nous vous accordons une licence non transférable ou révocable afin d'utiliser le site conformément aux termes et conditions spécifiques. Le but de cette licence est de faire des achats d'articles personnels vendus sur le site. L'utilisation commerciale ou l'utilisation au nom de tiers est interdite, sauf autorisation expresse et transparente de notre part. Toute violation de ces termes et conditions entraînera la révocation immédiate de la licence accordée dans ce paragraphe sans aucun préavis.
Le contenu affiché sur ce site est fourni à titre informatif uniquement. Les explications des produits exprimées sur ce site appartiennent aux vendeurs eux-mêmes et nous n'avons rien à voir avec eux. Les commentaires ou opinions exprimés sur ce site sont dus à l'autorité qui les a publiés et ne reflètent donc pas nos opinions.
Certains services et fonctionnalités connexes qui peuvent être disponibles sur le site nécessitent une inscription ou un abonnement. En choisissant de vous inscrire ou de vous abonner à l'un de ces services ou fonctionnalités connexes, vous acceptez de fournir des informations exactes et à jour sur vous-même et de les mettre à jour en temps opportun en cas de modification. Il est de la responsabilité de chaque utilisateur du site - seul - de conserver les mots de passe et autres méthodes pour déterminer correctement le compte d'utilisation. L'entière responsabilité du titulaire du compte incombe à toutes les activités qui se produisent à l'aide de son mot de passe. De plus, vous devez nous informer de toute utilisation non autorisée de votre mot de passe ou de votre compte. Le site n'est en aucun cas responsable, directement ou indirectement ou de quelque manière que ce soit, de toute perte ou dommage de quelque nature que ce soit qui pourrait résulter de votre non-respect ou lié à cette section.
Lors du processus d'inscription, le client s'engage à recevoir des courriels promotionnels du site. Vous pouvez, à une date ultérieure, annuler cette option et ne recevoir aucun e-mail promotionnel en cliquant sur le lien en bas de tout e-mail promotionnel.
Messages d'utilisateur
Tous vos messages sur le site et / ou ce que vous nous fournissez, y compris - mais sans s'y limiter, les questions, critiques, commentaires et suggestions (combinés dans le terme «messages») deviennent notre propriété unique et exclusive et ne vous appartiennent en aucune façon. En plus des droits qui s'appliquent à tout type de poste, et une fois que vous partagez vos commentaires ou critiques sur le site, vous nous accordez également le droit d'utiliser le nom que vous affichez qui est directement lié à ces critiques, commentaires ou tout autre contenu. Vous n'êtes pas autorisé à utiliser une fausse adresse e-mail, à prétendre que vous êtes une autre personne, ou à essayer de nous induire en erreur ou de tromper tout tiers concernant l'originalité et la fiabilité de l'un des messages. Nous pouvons supprimer ou modifier l'un des messages, mais nous ne sommes pas obligés de le faire.
Approuver les demandes et les détails des prix
Veuillez noter que dans certains cas, une demande peut ne pas être approuvée pour plusieurs raisons. Les opérateurs du site se réservent le droit de rejeter ou d'annuler toute demande pour quelque raison que ce soit à tout moment. Avant d'accepter la demande, nous pouvons vous demander de fournir des informations supplémentaires ou d'autres données pour vérifier quelque chose, y compris - mais sans s'y limiter, le numéro de téléphone et l'adresse.
Nous nous efforçons de fournir les informations de prix les plus précises à tous les utilisateurs qui visitent le site. Cependant, des erreurs peuvent parfois survenir, comme dans les cas où le prix du produit n'est pas correctement déterminé sur le site. Par conséquent, nous nous réservons le droit de rejeter ou d'annuler toute demande. Dans le cas où le prix du produit n'est pas déterminé correctement, nous avons le droit, à notre seule discrétion, de vous contacter pour obtenir des instructions ou d'annuler votre commande et de vous informer de cette annulation. Nous avons le droit de refuser ou d'annuler toute commande, confirmée ou non, après avoir ajouté les frais à la carte de crédit.
Marques et copyrights
Tous les droits de propriété intellectuelle, qu'ils soient enregistrés ou non, sur le site, et toutes les informations et conceptions de contenu sur le site nous appartiennent, y compris, mais sans s'y limiter, les textes, graphiques, programmes, images, vidéos, musique et son, leur choix et leur coordination, ainsi que Tous les principaux classificateurs de logiciels, codes source et programmes. Tous les contenus du site sont également protégés par des droits d'auteur combinés sous la forme d'une seule œuvre. Tous droits réservés.
La loi en vigueur et les organes judiciaires
Ces termes et conditions sont interprétés et appliqués conformément aux lois en vigueur dans le pays. En conséquence, chaque partie accepte de comparaître devant les instances judiciaires judiciaires du pays et renonce à toute objection liée au lieu.
Révoquer le consentement
En plus de toute disposition légale ou procédure de recours judiciaire, nous pouvons, immédiatement et sans préavis, résilier les présentes conditions générales ou annuler tout ou partie de vos droits accordés en vertu des termes et conditions. Dans tous les cas pour résilier ce contrat, vous devez immédiatement cesser de visiter et d'utiliser le site, ainsi que d'émettre des dispositions légales ou des procédures judiciairement équitables, nous pouvons immédiatement annuler tous les mots de passe ou autres méthodes d'identification de compte qui vous sont accordés, et nous refusons toute visite ou utilisation de ce site entièrement ou Partiellement. Toute révocation de cet accord n'affectera pas tous les droits et obligations (y compris, mais sans s'y limiter, les obligations de paiement) des parties émises avant la date de résiliation du contrat. Par conséquent, vous acceptez que le personnel du site n'assume aucune responsabilité pour vous ou toute autre personne en raison de la suspension ou de la résiliation du service. Si vous n'êtes pas satisfait de ce site ou de l'un des termes, conditions, règles, politiques, directives ou pratiques d'un magasin dans la façon dont le magasin est géré, alors la seule action exclusive que vous devez prendre est alors d'arrêter d'utiliser le site.