/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Oct 25 2026 | 01:48:16 */ /* ================================================================ MENU MOBILE — NARGUISTORE (v5.4) REMPLACE la v5.3 : coller ce fichier entier à la place du contenu actuel de l'entrée Custom CSS & JS n° 187424. v5.4 : menu ouvert = panneau plein écran fixé à l'écran (téléphone). La rangée logo + croix reste figée en haut, la liste défile à l'intérieur du panneau, la page ne dépasse plus en dessous, la bulle d'aide est masquée pendant que le menu est ouvert. Repose sur body:has(...) (iPhone iOS 15.4+, Chrome 105+) ; sur un navigateur plus ancien, le menu garde son comportement actuel. Rien ne change tant que le menu est fermé. v5.3 : lisibilité du bloc « Infos & services » : plus de gris clair. Séparateur et sous-lignes en #555 (contraste 7:1 au lieu de 3,3:1 et 4,5:1), titres en #333, icônes pleines. La hiérarchie se fait par la taille et la graisse, pas par la pâleur. v5.2 : bloc « Infos & services » en bas du menu (Le blog, Boutique, Nous contacter) : séparateur gris comme ceux des univers, lignes plus discrètes avec une petite icône (journal, repère de carte, bulle), et une sous-ligne grise sous Boutique (« Saint-Ouen · ouvert 7j/7, 11h-19h ») et Nous contacter (« Conseils & SAV »). Le coloriage dépend toujours des positions : 13 LE BLOG · 14 BOUTIQUE · 15 NOUS CONTACTER. v5.1 : textes agrandis — intertitres 10 -> 12px, séparateurs d'univers 10 -> 12px, Le blog 12 -> 13px et gris plus foncé (#555). v5 : version sobre. Fond blanc partout, la couleur seulement en filet de 3px (rouge Coups de coeur, vert vape, noir chicha) et dans les petits intertitres verts. Séparateurs d'univers en petites capitales entre deux traits fins. Pour revenir en arrière : recoller la v4 (ou la v3.4). v4 : bandeaux pleins pour les univers (vert = vape, noir = chicha), intertitres en Bebas Neue vert, texte des sous-catégories en noir, filet vert des sous-catégories vape supprimé. Si l'ancienne présentation doit revenir : recoller la v3.4. v3.4 : intertitres (Offres, Puffs & e-cigarettes, Marques, Recharges) alignés sur le texte des lignes : retrait 54px -> 43px. v3.3 : intertitre « Marques » au-dessus de Puff JNR, Puff Al Fakher et Puff Adalya. Aucun autre changement de style. v3.2 : pastille rouge « −20 % » sur l'entrée Packs puff. v3.1 : groupes appareils / recharges, étiquettes alignées. v3 : chevrons sur les entrées qui se déplient, 3e niveau prêt. Ordre du menu (le coloriage dépend des positions) : 1 COUPS DE COEUR · 2 NOUVEAUTES PUFF & VAPE · 3 PUFF & VAPE 4 NOUVEAUTES CHICHA · 5-12 catégories chicha · 13 LE BLOG 14 BOUTIQUE · 15 NOUS CONTACTER Classes CSS (Apparence › Menus › Options de l'écran › Classes CSS) : ns-g-offres sur « PROMOS ! » → OFFRES ns-promo20 sur « NOS PACKS PUFF » → pastille « -20 % » ns-g-appareils sur « Puffs légales » → PUFFS & E-CIGARETTES ns-g-marques sur « Puff JNR » → MARQUES ns-g-recharges sur « E-liquides » → RECHARGES & ACCESSOIRES Anciennes classes encore reconnues : ns-g-puffs, ns-g-ecig, ns-marque. Ordre du sous-menu PUFF & VAPE : PROMOS ! · NOS PACKS PUFF · Puffs légales · Chicha électronique · E-Cigarettes · Zéro Nicotine · Puff JNR · Puff Al Fakher · Puff Adalya · E-liquides · Résistances & Cartouches · Accessoires Vape ================================================================ */ /* Reset */ .elementor-nav-menu--dropdown, .elementor-nav-menu--dropdown .elementor-nav-menu { margin: 0 !important; padding: 0 !important; } /* ================================ CATEGORIES PRINCIPALES ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li > a { background: #fff !important; color: #111 !important; border: none !important; padding: 11px 18px !important; font-family: 'Montserrat', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-align: left !important; line-height: 1.3 !important; box-shadow: inset 0 -1px 0 #efefef, inset 3px 0 0 transparent !important; } /* ================================ SOUS-CATEGORIES (niveau 2) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu li ul.sub-menu li > a { font-family: 'Montserrat', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; padding: 9px 20px 9px 35px !important; background: #fafafa !important; color: #111 !important; box-shadow: inset 3px 0 0 #ddd !important; } /* ================================ SOUS-SOUS-CATEGORIES (niveau 3) ex. tranches de bouffées sous Puffs légales ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu li ul.sub-menu li ul.sub-menu li > a { font-size: 12.5px !important; padding: 8px 20px 8px 50px !important; background: #f4f4f4 !important; color: #444 !important; box-shadow: inset 3px 0 0 #cfe6d8 !important; } /* ================================ CHEVRON — entrées qui se déplient ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a { position: relative !important; padding-right: 44px !important; } /* indicateur natif Elementor masqué (doublon) */ .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a .sub-arrow { display: none !important; } .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.55; transition: transform 0.2s ease, margin-top 0.2s ease; } /* ouvert : chevron vers le haut */ .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a.highlighted::after { transform: rotate(-135deg); margin-top: -2px; } /* ================================ 1. COUPS DE COEUR (rouge) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(1) > a { color: #e0001b !important; background: #fff !important; box-shadow: inset 0 -1px 0 #efefef, inset 3px 0 0 #e0001b !important; } /* ================================ SEPARATEUR UNIVERS VAPE (petites capitales vertes entre deux traits) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(2)::before { content: "Univers vape"; display: block; text-align: center; font-family: 'Montserrat', -apple-system, sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.24em; line-height: 1.2; color: #2e7d3f; padding: 14px 0 12px; background-color: #fff; background-image: linear-gradient(#e2e2e2, #e2e2e2), linear-gradient(#e2e2e2, #e2e2e2); background-size: 18% 1px, 18% 1px; background-position: 6% 50%, 94% 50%; background-repeat: no-repeat; } /* ================================ 2. NOUVEAUTES PUFF & VAPE (vert) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(2) > a { background: #fff !important; color: #111 !important; box-shadow: inset 0 -1px 0 #efefef, inset 3px 0 0 #2e7d3f !important; } /* ================================ 3. PUFF & VAPE (vert) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(3) > a { background: #fff !important; color: #111 !important; box-shadow: inset 0 -1px 0 #efefef, inset 3px 0 0 #2e7d3f !important; } /* ================================ SEPARATEUR UNIVERS CHICHA (petites capitales noires entre deux traits) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(3)::after { content: "Univers chicha"; display: block; text-align: center; font-family: 'Montserrat', -apple-system, sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.24em; line-height: 1.2; color: #111; padding: 14px 0 12px; background-color: #fff; background-image: linear-gradient(#e2e2e2, #e2e2e2), linear-gradient(#e2e2e2, #e2e2e2); background-size: 18% 1px, 18% 1px; background-position: 6% 50%, 94% 50%; background-repeat: no-repeat; } /* ================================ 4 a 12. CHICHA (noir) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(n+4):nth-child(-n+12) > a { color: #111 !important; box-shadow: inset 0 -1px 0 #efefef, inset 3px 0 0 #111 !important; } /* ================================ SEPARATEUR INFOS & SERVICES (gris, entre deux traits, avant Le blog) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(13)::before { content: "Infos & services"; display: block; text-align: center; font-family: 'Montserrat', -apple-system, sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.24em; line-height: 1.2; color: #555; padding: 14px 0 12px; background-color: #fff; background-image: linear-gradient(#e2e2e2, #e2e2e2), linear-gradient(#e2e2e2, #e2e2e2); background-size: 18% 1px, 18% 1px; background-position: 6% 50%, 94% 50%; background-repeat: no-repeat; } /* ================================ 13 à 15. LE BLOG · BOUTIQUE · NOUS CONTACTER (gris discret, icône à gauche) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(n+13):nth-child(-n+15) > a { color: #333 !important; font-size: 13px !important; font-weight: 700 !important; background: #fafafa !important; box-shadow: inset 0 -1px 0 #ededed !important; padding: 11px 18px 11px 48px !important; position: relative !important; flex-wrap: wrap !important; } /* icône : 18 px, gris, alignée sur le texte */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(n+13):nth-child(-n+15) > a::before { content: ""; position: absolute; left: 18px; top: 11px; width: 18px; height: 18px; background-repeat: no-repeat; background-size: 18px 18px; background-color: transparent !important; opacity: 1 !important; transform: none !important; } /* Le blog : journal */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(13) > a::before { background-image: url("data:image/svg+xml;utf8,"); } /* Boutique : repère de carte */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(14) > a::before { background-image: url("data:image/svg+xml;utf8,"); } /* Nous contacter : bulle */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(15) > a::before { background-image: url("data:image/svg+xml;utf8,"); } /* sous-ligne grise sous Boutique et Nous contacter */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(14) > a::after, .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(15) > a::after { /* Elementor pose un soulignement animé (position absolue, opacité 0) sur ::after : on le neutralise */ display: block; position: static !important; opacity: 1 !important; transform: none !important; width: 100% !important; height: auto !important; background: none !important; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.3; color: #555; } .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(14) > a::after { content: "Saint-Ouen · ouvert 7j/7, 11h–19h"; } .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(15) > a::after { content: "Conseils & SAV"; } /* un peu d'air sous la dernière ligne */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(15) { margin-bottom: 14px !important; } /* ================================ SOUS-CATEGORIES VAPE : pas de filet (le vert est porte par le bandeau et les intertitres) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(2) ul.sub-menu li > a, .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(3) ul.sub-menu li > a { box-shadow: none !important; } /* ================================ ETIQUETTES DE GROUPE (via classes CSS du menu) ns-g-offres · ns-g-appareils (alias ns-g-puffs) · ns-g-marques · ns-g-recharges (alias ns-g-ecig) ================================ */ .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-offres, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-appareils, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-puffs, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-marques, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-recharges, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-ecig { border-top: none; } .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-offres::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-appareils::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-puffs::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-marques::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-recharges::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-ecig::before { display: block; padding: 14px 20px 2px 43px; background: #fafafa; box-shadow: none; font-family: 'Montserrat', -apple-system, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: #2e7d3f; } .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-offres::before { content: "Offres"; } .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-appareils::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-puffs::before { content: "Puffs & e-cigarettes"; } .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-marques::before { content: "Marques"; } .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-recharges::before, .elementor-nav-menu--dropdown ul.sub-menu li.ns-g-ecig::before { content: "Recharges & accessoires"; } /* ================================ MENTION « MARQUE » (ancienne classe ns-marque, remplacée par l'intertitre ns-g-marques ; gardée pour compatibilité) ================================ */ .elementor-nav-menu--dropdown ul.sub-menu li.ns-marque > a::after { content: "Marque"; display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid #e0001b; border-radius: 3px; color: #e0001b; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; vertical-align: middle; } /* ================================ PASTILLE PROMO (classe ns-promo20 sur « NOS PACKS PUFF ») Même forme que les pastilles rouges des fiches produit. ================================ */ .elementor-nav-menu--dropdown ul.sub-menu li.ns-promo20 > a::after { content: "-20 %"; display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #e0001b; color: #ffffff !important; font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; } /* ================================ ITEM ACTIF (categorie en cours) ================================ */ .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-item > a, .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-ancestor > a, .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-parent > a { background: #ededed !important; font-weight: 800 !important; } /* ================================ HOVER ================================ */ .elementor-nav-menu--dropdown li > a:hover { background: #f7f7f7 !important; } /* ================================ v5.4 — MENU OUVERT : PANNEAU PLEIN ECRAN (téléphone) Quand le ☰ est actif (classe elementor-active posée par Elementor) : la rangée logo/croix (conteneur 09abe55 de l'en-tête) est figée en haut, la recherche est masquée (elle serait recouverte), le panneau du menu occupe tout l'écran sous la rangée et défile seul. ================================ */ @media (max-width: 767px) { body:has(.elementor-menu-toggle.elementor-active) .elementor-location-header > .elementor-element-09abe55 { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100000 !important; } body:has(.elementor-menu-toggle.elementor-active) .elementor-location-header .elementor-element-332f549 { display: none !important; } body:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: 80px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff !important; z-index: 99999 !important; padding-bottom: 60px !important; box-shadow: none !important; } /* la bulle d'aide ne doit pas flotter par-dessus le menu */ body:has(.elementor-menu-toggle.elementor-active) #ns-chat-bubble, body:has(.elementor-menu-toggle.elementor-active) #ns-chat-bubble-label { display: none !important; } }