@charset "utf-8"; /* ========================================================================== VAPE ADDICT — Thématisation de la boutique Ecwid (store 31480827) -------------------------------------------------------------------------- Ecwid injecte sa propre feuille de style DANS le AU RUNTIME, donc APRÈS la nôtre. Sur les propriétés qu'il pose lui-même, la cascade nous est défavorable quel que soit notre ordre de déclaration : `!important` n'est pas une facilité ici, c'est la seule prise disponible sur la plateforme. On s'y limite strictement aux propriétés qu'Ecwid écrase. On habille les classes publiques documentées d'Ecwid v3 (.ec-store, .grid-product, .product-details, .ec-cart…). On ne touche à AUCUNE donnée produit. Réf. : https://api-docs.ecwid.com/reference/customize-storefront-design ========================================================================== */ /* ---------- 0. RACINE + TYPO ---------- */ .ec-store, .ec-store * { font-family: var(--text) !important; border-radius: 0 !important; /* angles droits partout — aucun coin arrondi */ } .ec-store { color: var(--ink) !important; } .ec-store .ec-header-h1, .ec-store .ec-header-h2, .ec-store .ec-header-h3, .ec-store .ec-header-h4, .ec-store .ec-header-h5, .ec-store .ec-header-h6 { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0 !important; color: var(--ink) !important; } .ec-store .ec-link, .ec-store a { color: var(--vermillon) !important; } /* ---------- 1. GRILLE PRODUITS ---------- */ /* Ecwid pose des marges latérales NÉGATIVES sur `.grid__products` (mesuré : -15,6 px à gauche, -16 px à droite) pour compenser les gouttières qu'il met normalement sur chaque tuile. Nous avons supprimé ces gouttières (`gap: 0`, `.grid-product__wrap { padding: 0 }`) : les négatifs n'ont donc plus rien à compenser et deviennent du pur débordement. Constaté à toutes les largeurs, visible sous 768 px — la grille sortait de 16 px de son conteneur et `body { overflow-x: hidden }` rognait les tuiles de bord. */ .ec-store .grid__products { gap: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .ec-store .grid-product { border: 2px solid var(--ink) !important; margin: -1px 0 0 -1px !important; /* bordures fusionnées, pas de double trait */ background: var(--paper) !important; transition: background .25s var(--ease) !important; } .ec-store .grid-product:hover { background: var(--paper-pure) !important; } .ec-store .grid-product__wrap, .ec-store .grid-product__wrap-inner { padding: 0 !important; } /* Le visuel : `contain` sur fond papier. Les étiquettes à plat (1500×1304) ne doivent pas être rognées, les packshots carrés (1024×1024) non plus. DEUX PIÈGES, constatés en rendu réel — pas en théorie : 1. Le raccourci `background:` en !important écrase le `background-image` qu'Ecwid peut poser sur ces conteneurs. On ne touche que `background-color`. 2. `mix-blend-mode: multiply` sur l'image la faisait disparaître : Ecwid empile sous elle un calque `.grid-product__bg` et un `.grid-product__shadow` qui forment un groupe de fusion isolé. Supprimé. */ .ec-store .grid-product__image, .ec-store .grid-product__image-wrap { background-color: var(--paper-pure) !important; border-bottom: 2px solid var(--ink) !important; } /* Calque de fond coloré d'Ecwid (bleu par défaut) : hors charte. */ .ec-store .grid-product__bg { background-color: var(--paper-pure) !important; } .ec-store .grid-product__shadow { display: none !important; } .ec-store .grid-product__picture, .ec-store .grid-product__image img { object-fit: contain !important; filter: saturate(.94) contrast(1.05) !important; /* traitement unifié : étiquettes + packshots */ transition: transform .5s var(--ease) !important; } .ec-store .grid-product:hover .grid-product__picture, .ec-store .grid-product:hover .grid-product__image img { transform: scale(1.03) !important; } .ec-store .grid-product__title-inner { font-family: var(--display) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1.35rem !important; line-height: 1 !important; color: var(--ink) !important; padding: 1rem 1rem .35rem !important; } /* Le prix est porté par .grid-product__price-amount (constaté dans le DOM rendu). */ .ec-store .grid-product__price, .ec-store .grid-product__price-value, .ec-store .grid-product__price-amount { font-family: var(--mono) !important; font-weight: 700 !important; font-size: .95rem !important; color: var(--vermillon) !important; padding: 0 1rem !important; } .ec-store .grid-product__price-amount { padding: 0 !important; } .ec-store .grid-product__sku { font-family: var(--mono) !important; font-size: .68rem !important; color: var(--ink-45) !important; letter-spacing: .08em !important; } .ec-store .grid-product__button, .ec-store .grid-product__buy-now { padding: .75rem 1rem 1rem !important; } /* ---------- 2. BOUTONS ---------- */ .ec-store .form-control--button .form-control__button, .ec-store button.form-control__button, .ec-store .ec-cart__button button, .ec-store .details-product-purchase__place button { font-family: var(--mono) !important; font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; background: var(--ink) !important; color: var(--paper-pure) !important; border: 2px solid var(--ink) !important; box-shadow: 5px 5px 0 var(--vermillon) !important; padding: 1rem 1.4rem !important; transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important; } .ec-store .form-control--button .form-control__button:hover, .ec-store button.form-control__button:hover, .ec-store .details-product-purchase__place button:hover { transform: translate(2px, 2px) !important; box-shadow: 3px 3px 0 var(--vermillon) !important; background: var(--vermillon) !important; border-color: var(--ink) !important; } .ec-store .form-control--secondary .form-control__button { background: transparent !important; color: var(--ink) !important; box-shadow: 5px 5px 0 var(--ink-20) !important; } /* ---------- 3. CHAMPS ---------- */ .ec-store .form-control__text, .ec-store .form-control__select, .ec-store input[type="text"], .ec-store input[type="email"], .ec-store input[type="search"], .ec-store textarea, .ec-store select { font-family: var(--mono) !important; font-size: .82rem !important; border: 2px solid var(--ink) !important; background: var(--paper-pure) !important; color: var(--ink) !important; box-shadow: none !important; padding: .9rem 1rem !important; } /* Ecwid pose son icône de loupe DANS le champ et réserve la place par un padding gauche. Notre `padding: .9rem 1rem !important` l'écrasait : le texte du champ démarrait 23 px AVANT la fin de l'icône, et le libellé « Chercher une saveur… » passait dessous. Constaté à 390 comme à 1440 px — ce n'est pas un défaut de largeur, c'est notre !important qui mordait. `--prepend` est justement le modificateur qu'Ecwid pose quand il y a une icône : on ne rend le padding que là. */ .ec-store .form-control--prepend .form-control__text { padding-left: 3.25rem !important; } .ec-store .form-control__text:focus, .ec-store input:focus, .ec-store select:focus, .ec-store textarea:focus { outline: 3px solid var(--vermillon) !important; outline-offset: 2px !important; border-color: var(--ink) !important; } /* ---------- 4. PAGE PRODUIT ---------- */ .ec-store .product-details { background: transparent !important; } .ec-store .product-details__product-title, .ec-store .details-product-title__inner { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase !important; font-size: clamp(2rem, 5vw, 3.6rem) !important; line-height: .92 !important; color: var(--ink) !important; } .ec-store .product-details__product-price, .ec-store .details-product-price__value { font-family: var(--display) !important; font-weight: 800 !important; font-size: clamp(1.8rem, 4vw, 2.8rem) !important; color: var(--vermillon) !important; } .ec-store .product-details__product-sku, .ec-store .details-product-sku { font-family: var(--mono) !important; font-size: .7rem !important; letter-spacing: .1em !important; color: var(--ink-45) !important; text-transform: uppercase !important; } /* La description : c'est le texte du client, rédigé à la main. On le rend lisible. */ .ec-store .product-details__product-description { font-family: var(--text) !important; font-size: 1rem !important; line-height: 1.65 !important; color: var(--ink-70) !important; max-width: 68ch !important; } .ec-store .product-details__product-description h3, .ec-store .product-details__product-description h3 strong { font-family: var(--mono) !important; font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--vermillon) !important; border-bottom: 2px solid var(--ink) !important; padding-bottom: .5rem !important; margin-bottom: 1rem !important; display: block !important; } .ec-store .product-details__product-description p { margin-bottom: .9rem !important; } .ec-store .product-details__product-description strong { color: var(--ink) !important; font-weight: 700 !important; } .ec-store .product-details-module__title { font-family: var(--mono) !important; font-size: .72rem !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ink-45) !important; border-top: 2px solid var(--ink) !important; padding-top: 1rem !important; } /* Même piège que la grille : `background-color` seulement, et surtout PAS de mix-blend-mode — il ferait disparaître le visuel de la fiche produit. */ .ec-store .details-gallery, .ec-store .details-gallery__wrap { background-color: var(--paper-pure) !important; border: 2px solid var(--ink) !important; } .ec-store .details-gallery img, .ec-store .details-gallery__image img { object-fit: contain !important; filter: saturate(.94) contrast(1.05) !important; } /* Remises dégressives — 77 produits en ont. On les met en valeur, c'est du concret. */ .ec-store .details-product-purchase__wholesale-prices, .ec-store .product-details-module--wholesale table { font-family: var(--mono) !important; font-size: .78rem !important; border: 2px solid var(--ink) !important; } .ec-store .details-product-purchase__wholesale-prices td { border-bottom: 1px solid var(--rule) !important; } /* ---------- 5. FIL D'ARIANE ---------- */ .ec-store .breadcrumbs, .ec-store .breadcrumbs__link, .ec-store .breadcrumbs__breadcrumb { font-family: var(--mono) !important; font-size: .68rem !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--ink-45) !important; } /* ---------- 6. PANIER ---------- */ .ec-store .ec-cart, .ec-store .ec-cart__body { background: transparent !important; } .ec-store .ec-cart-item, .ec-store .ec-cart__summary, .ec-store .ec-cart__products { border-color: var(--ink) !important; } .ec-store .ec-cart-item__title, .ec-store .ec-cart-item__title-inner { font-family: var(--display) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--ink) !important; } .ec-store .ec-cart-item__price, .ec-store .ec-cart__total, .ec-store .ec-cart-summary__total { font-family: var(--mono) !important; font-weight: 700 !important; color: var(--vermillon) !important; } /* ---------- 7. MINICART ---------- */ .ec-minicart__body { border: 2px solid var(--ink) !important; background: var(--paper) !important; box-shadow: 5px 5px 0 var(--vermillon) !important; border-radius: 0 !important; } .ec-minicart__counter { background: var(--vermillon) !important; color: #fff !important; font-family: var(--mono) !important; font-weight: 700 !important; border-radius: 0 !important; } .ec-minicart__icon svg { fill: var(--ink) !important; } /* ---------- 8. PAGINATION / TRI ---------- */ .ec-store .pager, .ec-store .pager__button, .ec-store .sort-selector, .ec-store .sort-selector__label { font-family: var(--mono) !important; font-size: .72rem !important; text-transform: uppercase !important; letter-spacing: .1em !important; } .ec-store .pager__button { border: 2px solid var(--ink) !important; background: transparent !important; color: var(--ink) !important; } .ec-store .pager__button:hover { background: var(--ink) !important; color: var(--paper-pure) !important; } /* ---------- 9. CE QU'ON MASQUE ---------- */ /* Le store contient 40 fausses catégories « FDS » : des catégories vides dont le seul contenu est un lien PDF glissé dans la meta description (voir audit.md §4). Ecwid les expose dans son menu ET dans sa grille de tuiles de catégories. On masque les deux : notre propre navigation (#va-cats) ne sert que les 9 vraies entrées, et les FDS sont traitées par /fds.html. La grille de tuiles est en plus reconstruite à chaque navigation : le CSS ne suffit pas seul, app.js retire aussi la tuile FDS du DOM (stripFdsTiles). */ .ec-store .ec-store__categories-menu, .ec-store .horizontal-menu, .ec-store .grid__categories, .ec-store .grid-category, .ec-store .ec-store__footer, .ec-store .ec-footer { display: none !important; } /* Le fil d'Ariane natif d'Ecwid fait doublon avec le nôtre sur la page catégorie, mais reste utile sur la page produit : on le garde. */ /* ---------- 10. NOTICES ---------- */ .ec-store .ec-notice { border: 2px solid var(--ink) !important; background: var(--paper-pure) !important; font-family: var(--mono) !important; font-size: .78rem !important; } .ec-store .ec-notice--success { border-left: 5px solid var(--cyan) !important; } .ec-store .ec-notice--error { border-left: 5px solid var(--vermillon) !important; } /* ---------- 11. MOBILE ---------- */ @media (max-width: 480px) { .ec-store .grid-product__title-inner { font-size: 1.1rem !important; } .ec-store .form-control--button .form-control__button, .ec-store .details-product-purchase__place button { width: 100% !important; justify-content: center !important; box-shadow: 4px 4px 0 var(--vermillon) !important; } } @media (pointer: coarse) { .ec-store .form-control__button, .ec-store .grid-product__button button { min-height: 44px !important; } /* mesurés à 16 et 33 px : le fil d'Ariane et le sélecteur de tri étaient hors d'atteinte au doigt sur la page catalogue. */ .ec-store .ec-breadcrumbs__link, .ec-store .breadcrumbs__link { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } .ec-store select.form-control__select, .ec-store .form-control--select .form-control__select { min-height: 44px !important; } .ec-store .grid-product__title { min-height: 44px !important; } } /* ========================================================================== COUCHE CONVERSION — Ecwid ========================================================================== */ /* ---------- Atterrissage de la boutique ---------- La page « tout le catalogue » est techniquement une page de RECHERCHE Ecwid. Son titre natif — « Recherche de produits » — est un contresens pour l'acheteur : il n'a rien cherché. On le masque. MAIS UNIQUEMENT LÀ. Le même titre porte « Panier » sur le panier et le nom de l'étape dans le tunnel de commande : le masquer partout laissait l'acheteur sans repère au moment de payer. D'où le crochet `data-ec-page` posé par app.js sur . */ [data-ec-page="SEARCH"] .ec-store .ec-page-title { display: none !important; } /* Le champ de recherche : c'est un OUTIL, il doit se voir. */ .ec-store .ec-store__search-panel, .ec-store .search-panel { margin: 0 0 var(--s4) !important; } .ec-store .ec-store__search-panel .form-control, .ec-store .search-panel .form-control { max-width: 560px !important; } .ec-store input[type="search"], .ec-store .form-control__text { font-family: var(--mono) !important; font-size: .8rem !important; letter-spacing: .04em !important; } .ec-store input[type="search"]::placeholder, .ec-store .form-control__text::placeholder { color: var(--ink-45) !important; opacity: 1 !important; } /* ---------- Cartes produits : plus grandes, plus vivantes ---------- */ /* Le visuel est l'argument. On lui donne de la place et un cadre carré stable (les sources vont de 1024×1024 à 1500×1304 : `contain` évite tout rognage). */ .ec-store .grid-product__image, .ec-store .grid-product__image-wrap { aspect-ratio: 1 / 1 !important; height: auto !important; } .ec-store .grid-product__spacer { display: none !important; } .ec-store .grid-product { position: relative !important; transition: background .25s var(--ease), box-shadow .25s var(--ease), z-index 0s !important; } .ec-store .grid-product:hover { background: var(--paper-pure) !important; box-shadow: 8px 8px 0 var(--vermillon) !important; z-index: 2 !important; } /* Le bouton d'achat n'apparaissait qu'en bas d'une carte fade : on l'ancre. */ .ec-store .grid-product__button, .ec-store .grid-product__buy-now { padding: .5rem 1rem 1.1rem !important; } .ec-store .grid-product__button .form-control__button, .ec-store .grid-product__buy-now .form-control__button { width: 100% !important; justify-content: center !important; padding: .85rem 1rem !important; box-shadow: 4px 4px 0 var(--vermillon) !important; } /* Le prix : le repère le plus cherché de la carte. Il doit être le plus lisible. */ .ec-store .grid-product__price, .ec-store .grid-product__price-amount { font-size: 1.05rem !important; padding-bottom: .2rem !important; } /* ---------- Fiche produit : rassurer au moment de décider ---------- */ .ec-store .details-product-purchase__place { margin-top: var(--s3) !important; } .ec-store .details-product-purchase__place button { width: 100% !important; justify-content: center !important; font-size: .82rem !important; padding: 1.15rem 1.4rem !important; } /* Les remises dégressives (77 produits en ont) sont un vrai argument : on les montre. */ .ec-store .product-details-module--wholesale, .ec-store .details-product-purchase__wholesale-prices { background: var(--paper-pure) !important; border-left: 4px solid var(--vermillon) !important; padding: var(--s2) !important; } .ec-store .ec-store__in-stock-label, .ec-store .details-product-purchase__stock { font-family: var(--mono) !important; font-size: .7rem !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--cyan) !important; } /* ========================================================================== QUANTITÉ · PANIER · TUNNEL DE COMMANDE C'est le chemin de l'argent. Il doit être le plus soigné du site. ========================================================================== */ /* ---------- Sélecteur de quantité 1–10 ---------- L'input number d'Ecwid faisait 64 px de large : illisible, et impossible à viser au pouce. On le masque et on sert un