Classic FR-M — 10 ml
5 taux · 0 à 18 mg/ml En stock, expédié aujourd'hui
5,90 €TTC
Le manifeste
iClope est la boutique qui vous aide à vous repérer.
Nos clients ne cherchent pas un univers, ils cherchent une réponse : quel taux, quelle résistance, quelle cartouche pour quel appareil. Ce sont des adultes, souvent plus âgés que la moyenne du secteur, qui ont arrêté le tabac ou tentent de le faire. Ils méritent qu'on leur parle comme à des gens intelligents, sans jargon et sans promesse.
Toute la piste découle de là. Chaque page dit où vous êtes (fil d'Ariane), ce que vous décidez (une seule action orange par écran) et où aller ensuite (le bloc Repères, en bas de chaque page).
L'élément mémorable est la règle graduée : le taux de nicotine, le ratio PG/VG, la valeur en ohm se choisissent sur une réglette à gros chiffres, avec une phrase qui change selon la position — « 6 mg/ml : pour 10 à 15 cigarettes par jour ». C'est un objet de mesure, pas de séduction : il transforme une donnée technique en repère personnel. Il se décline en filet gradué, en barre de progression et jusque dans le logo.
Ce que la piste refuse : les cartes ombrées identiques, les dégradés, les pastilles de couleur sans mot, les majuscules, les prix barrés voyants — et le grand aplat canard sombre du site actuel. Le canard est ici une couleur de trait.
La règle graduée
L'objet signature, montré ici hors contexte. Curseur natif — donc utilisable au clavier et annoncé par un lecteur d'écran —, graduations cliquables, phrase mise à jour en direct. Le curseur est orange parce qu'il engage l'achat ; en lecture seule, il devient canard.
6mg/ml
Ses trois déclinaisons
- Le filet gradué — sépare chaque section, à la place des cartes ombrées
- La barre de progression du tunnel — quatre crans, un par étape
- Le logo — la réglette sous le mot, devant « depuis 2012 »
Le filet gradué, en grand. Deux pixels de canard, ponctués tous les 12 px. Il porte la hiérarchie du site à lui seul.
Palette et rôles
Dix valeurs, chacune avec une fonction unique. Les ratios ci-dessous sont calculés, pas estimés : ils vérifient chaque couleur contre le fond sur lequel elle est réellement employée.
#FBFAF7
Papier · Fond de page
Blanc légèrement chaud, jamais crème. C'est le sol de tout le site.
Contraste texte encre : 15,93:1 — AA
#17201F
Encre · Texte, en-tête, pied
Un noir bleuté. Le vrai noir n'existe pas dans cette piste.
Contraste papier sur encre : 15,93:1 — AA
#2A6F6D
Canard · Structure
Filets, liens, icônes, titres de section. C'est une couleur de TRAIT : jamais un aplat sombre pleine largeur.
Contraste papier sur canard : 5,60:1 — AA
#D9ECEA
Canard clair · Surfaces
Encadrés conseil, puces actives, bandeau nicotine.
Contraste encre sur canard clair : 13,57:1 — AA
#EDF6F5
Canard voilé · Surface légère
Phrase de la règle graduée, fonds de sections calmes.
Contraste encre sur canard voilé : 15,13:1 — AA
#F39A3C
Orange · L'action d'achat
Une seule fonction : le bouton qui met au panier, et le curseur de la règle. Jamais en texte.
Contraste encre sur orange : 7,52:1 — AA
#D9405A
Framboise · Alerte — trait
Contours et filets d'alerte, ruptures, DLUO. Rare, et jamais porteuse de texte.
Contraste trait sur papier : 4,16:1 — ≥ 3:1 requis pour un trait d'interface
#B32E46
Framboise texte · Alerte — texte
La version assombrie, obligatoire dès qu'un message d'erreur est écrit.
Contraste framboise texte sur papier : 5,92:1 — AA
#6B7270
Gris · Texte secondaire
Mentions, métadonnées, libellés de second rang.
Contraste gris sur papier : 4,72:1 — AA
#DAD9D3
Filet · Séparateurs neutres
Contours de photos, lignes de listes. Aucune ombre nulle part.
Décoratif — jamais porteur de texteLa règle qui tient tout
L'orange n'apparaît qu'à un seul endroit par écran : le bouton qui met au panier, et le curseur de la règle. Partout ailleurs — cartes, listes, tiroirs — l'action est en canard. C'est ce qui rend l'achat repérable au premier coup d'œil, et c'est aussi pourquoi l'orange n'est jamais utilisé comme couleur de texte : à 2,12:1 sur papier, il serait illisible.
Typographie
Bricolage Grotesque
600 et 800 · titres, gros chiffres de la règle, prix. Un peu charnue, un peu chaleureuse : elle éloigne l'aspect « tableau de bord » que produisent les grotesques neutres.
Public Sans
400, 500, 600 · corps de texte et interface. Ouverte, très lisible en petit corps, excellente en chiffres tabulaires — utile pour des prix et des dosages.
Chargées depuis Google Fonts, avec pile de repli (Trebuchet MS puis Verdana pour le display, Helvetica puis Arial pour le texte) : la page reste lisible et proportionnée si les polices ne chargent pas.
| px | rem | Usage | Aperçu |
|---|---|---|---|
| 56 | 3.5rem | Réservé — n'apparaît sur aucun écran actuel | Choisir sans deviner |
| 40 | 2.5rem | H1 desktop · gros chiffre de la règle · prix total | Choisir sans deviner |
| 30 | 1.875rem | H1 mobile · H2 desktop | Choisir sans deviner |
| 24 | 1.5rem | H2 mobile · titres de section | Choisir sans deviner |
| 20 | 1.25rem | H3 · chapeau | Choisir sans deviner |
| 17 | 1.0625rem | Corps de texte (18 px sur ordinateur) | Choisir sans deviner |
| 15 | 0.9375rem | Interface, cartes, boutons | Choisir sans deviner |
| 13 | 0.8125rem | Mentions, métadonnées, bandeau nicotine | Choisir sans deviner |
Logo
Version typographique : « iClope » en Bricolage Grotesque 800, crénage resserré, point final en canard — le point du i étant déjà pris par la lettre, le point de la marque se déplace en fin de mot, où il agit comme une balise. Dessous, la réglette graduée et « depuis 2012 », calés à gauche. La mascotte est retirée du logo principal : elle date, et elle brouille la lecture en petit. Elle peut survivre ailleurs — page « qui sommes-nous », courriers — mais pas en en-tête.
iClope.depuis 2012
iClope.depuis 2012
iClope.depuis 2012
iClope.
Réduction : la réglette et la baseline sautent sous 20 px.
Les fichiers existants
Fournis dans img/. Nous ne les employons pas en en-tête : la mascotte
réduit mal, et le lettrage actuel n'a pas la robustesse d'un Bricolage 800. Ils restent utiles
en archive et pour la reconnaissance des clients historiques.
Imagerie
Deux registres, jamais mélangés dans un même bloc : les photos produit réelles sur fond blanc, non retouchées, en fondu multiplié pour les fondre dans le papier ; et quatre images générées, strictement fonctionnelles. Aucune photo de personne en train de vapoter, aucune vapeur, aucune mise en scène : la loi Évin l'interdit, et cette clientèle n'en a de toute façon aucun besoin.
Photos produit
Toutes les fiches et toutes les grilles utilisent les
photos réelles de img/. Cadre blanc, filet de 1 px, jamais d'ombre portée.
Kit Aegis Solo 3 — 100 W, 3000 mAh
6 couleurs En stock, expédié aujourd'hui
69,90 €TTC
Cartouche pré-remplie e-cigare
Cubana, Venecia, Daisy · 20 mg/ml En stock, expédié aujourd'hui
6,90 €TTC
E-pipe Gandalf Z Brano 18350 — corps et stem
Bois massif, fait main En stock, expédié aujourd'hui
149,00 €TTC
Icônes
Un seul jeu, dessiné pour la piste : 24 × 24, trait de 1,75 px, extrémités et jonctions rondes, couleur héritée du texte. Elles vivent dans un sprite SVG inline, déclaré une fois par page. Aucune police d'icônes, aucune bibliothèque, aucune image bitmap.
menuloupecroixchevronchevron-basplusmoinscochefiltretriretourrechargertelephonecourrielcoliscamionboucliercarteinfoalerteboussoleconseilmaisonlieucrayonclehorlogeetiquettecadeaugouttepodpipecigareresistancecartouchediyboostercomptepanieretoile
Principes de mise en page
Alignement
- Fer à gauche strict, sur toute la piste
- Colonne de lecture de 68 caractères sur les guides
- Conteneur 1200 px, 12 colonnes, gouttière 24 sur ordinateur
- Marge de 16 px et colonne unique sur mobile
Hiérarchie
- Une section = un filet gradué + un titre. Pas de carte, pas d'ombre
- Une seule action orange par écran
- Aucun statut porté par la couleur seule : toujours un mot
- Le prix est toujours en Bricolage : c'est un chiffre, pas un texte
Mouvement et accès
- Deux mouvements en tout : le curseur qui glisse, le toast qui remonte
prefers-reduced-motionramène les durées à zéro- Cibles tactiles de 44 px minimum
- Focus clavier visible partout, jamais supprimé
Les dix-sept écrans
Chacun est un fichier autonome qui charge
tokens.css, base.css et ui.js. Vue de référence : 390 px.
01AccueilTrois points de départ, réassort, rayons, niches, équipe02Catégorie e-liquideFiltres en tiroir mobile et colonne desktop, texte SEO03Fiche e-liquideLa règle graduée : taux, prix, disponibilité, phrase04Fiche matérielGalerie, couleurs, règle des résistances, compatibilités05Fiche consommableSaveurs, lots, « pour quel appareil », batterie compatible06Page marqueWaka : gammes, grille, avis de boutique, guides liés07Silo e-pipePédagogie courte, modèles, consommables, guide, avis08Guide taux de nicotine1 800 mots, sommaire, tableau, 4 sélections contextuelles, FAQ09Calculateur DIYVolume, taux, arôme, booster : quantités et coût réel10RechercheSuggestions instantanées groupées, résultats, état vide utile11PanierRécapitulatif, port annoncé, réassurance — et l'état vide12TunnelQuatre étapes, une par écran sur mobile, progression graduée13ConfirmationSuivi, création de compte, conseils d'usage14CompteRéassort express en un clic depuis une commande passée15ConnexionLien par courriel, mot de passe, inscription, oubli16404Recherche, rayons, contact — et le motif topographique17ComposantsToutes les pièces, les états, les bandeaux légaux
Ce qu'on trouve dans le dossier
| tokens.css | Les jetons : couleurs par rôle, échelle, espacements, rayons, mouvement. Seul endroit où une valeur est décidée. |
|---|---|
| base.css | Reset léger et composants partagés, en dix blocs commentés. Aucun framework. |
| ui.js | Huit comportements en JavaScript nature : tiroirs, toast, vérification d'âge, cookies, onglets, quantité, règle graduée, étapes du tunnel. Tout est piloté par des attributs data-*. |
| ecrans/ | Les dix-sept écrans. |
| NOTES.md | Les choix, ce qui a été écarté, ce qui reste ouvert. |