/* ============================================ Thème template — identique au style "West Coast" de Snoop Weed (néon vert citron + bleu électrique + jaune, glassmorphism sombre) Seul le fond (image ou couleur, piloté par store.json) change par client. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); :root, body[data-theme="template"] { --wc-bg: #070a07; --wc-bg-soft: #0d120c; --wc-surface: rgba(9, 13, 8, 0.92); --wc-panel: rgba(17, 23, 16, 0.94); --wc-panel-strong: rgba(13, 18, 12, 0.98); --wc-border: rgba(158, 232, 19, 0.16); --wc-border-strong: rgba(158, 232, 19, 0.4); --wc-green: #9ee813; --wc-green-soft: #c6f75f; --wc-blue: #1fa8e8; --wc-yellow: #fcc81a; --wc-red: #ff2e3b; --wc-text: #f3f7ea; --wc-text-soft: #cfd9c4; --wc-text-muted: #9aa792; --wc-glow-green: 0 0 18px rgba(158, 232, 19, 0.55), 0 0 40px rgba(158, 232, 19, 0.25); --wc-glow-blue: 0 0 18px rgba(31, 168, 232, 0.6), 0 0 44px rgba(31, 168, 232, 0.28); --wc-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); --wc-radius-xl: 26px; --wc-radius-lg: 20px; --wc-radius-md: 16px; --wc-display-font: 'Luckiest Guy', cursive; } body[data-theme="template"] { background: radial-gradient(circle at top left, rgba(158, 232, 19, 0.12), transparent 30%), radial-gradient(circle at 85% 15%, rgba(31, 168, 232, 0.1), transparent 26%), radial-gradient(circle at 50% 80%, rgba(252, 200, 26, 0.06), transparent 30%), linear-gradient(180deg, var(--custom-bg, #070a07) 0%, #050704 100%) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; color: var(--wc-text) !important; font-family: 'Poppins', sans-serif; } /* Quand store.json fournit backgroundImage, main.js pose --custom-bg-image ici */ body[data-theme="template"].has-custom-bg { background-image: radial-gradient(circle at top left, rgba(158, 232, 19, 0.12), transparent 30%), radial-gradient(circle at 85% 15%, rgba(31, 168, 232, 0.1), transparent 26%), /* Voile assombrissant sur l'image de fond du client. Était à 0.55/0.75 : le visuel était écrasé aux trois quarts et paraissait "trop foncé" quelle que soit l'image fournie. Réduit le 14/08/2026. Les cartes produits ont leur propre fond opaque, la lisibilité du texte ne dépend donc pas de ce voile. À ajuster par client si besoin. */ linear-gradient(180deg, rgba(5, 7, 5, 0.25), rgba(5, 7, 5, 0.45)), var(--custom-bg-image) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } body[data-theme="template"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Safari 26 (iPhone) : la barre d'outils flotte sur la page et refuse tout élément fixé dessous. Avec 100vh la page continuait sous cette barre et les produits apparaissaient entre notre barre et la sienne. 100dvh = hauteur réellement visible : notre barre s'arrête juste au-dessus de Safari, et le fond sombre de occupe le reste. Ajouté le 12/09/2026. */ html { background: #050704; } body[data-theme="template"] { height: 100vh !important; min-height: 100vh !important; height: 100dvh !important; min-height: 100dvh !important; } body[data-theme="template"] #appContent { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)) !important; padding-left: 1rem; padding-right: 1rem; padding-bottom: 120px !important; } /* ---------- PANNEAUX VERRE ---------- */ body[data-theme="template"] .glass { background: linear-gradient(180deg, rgba(17, 23, 16, 0.92), rgba(7, 10, 7, 0.94)) !important; border: 1px solid var(--wc-border) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--wc-shadow) !important; } body[data-theme="template"] .scrollbar-none::-webkit-scrollbar { display: none; } body[data-theme="template"] .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* ---------- LABELS DE SECTION ---------- */ body[data-theme="template"] p.text-xs.font-semibold.uppercase { color: var(--wc-green) !important; letter-spacing: 0.24em; text-shadow: 0 0 12px rgba(158, 232, 19, 0.35); } /* ---------- TITRES / POLICE D'AFFICHAGE ---------- */ body[data-theme="template"] #modalName, body[data-theme="template"] h2#modalName { font-family: var(--wc-display-font) !important; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wc-text) !important; text-shadow: 2px 2px 0 rgba(158, 232, 19, 0.35); padding-right: 4.5rem; line-height: 1.15; } /* ---------- PANNEAU PROFIL ---------- */ body[data-theme="template"] #userProfilePanel, body[data-theme="template"] #basketSection > div, body[data-theme="template"] #infoSection > div, body[data-theme="template"] #contactSection > div, body[data-theme="template"] #reviewsSection > div { border-radius: var(--wc-radius-lg) !important; } body[data-theme="template"] #userProfilePanel { position: relative; overflow: hidden; max-width: 1100px; margin-bottom: 1.5rem; background: radial-gradient(circle at 100% 0, rgba(158, 232, 19, 0.18), transparent 24%), linear-gradient(180deg, rgba(13, 18, 12, 0.98), rgba(7, 10, 7, 0.96)) !important; border-color: var(--wc-border-strong) !important; } body[data-theme="template"] #userGreetingBlock { flex: 1 1 auto; min-width: 0; } body[data-theme="template"] #userGreeting { color: #ffffff !important; font-family: var(--wc-display-font); letter-spacing: 0.01em; } body[data-theme="template"] #userIdLabel, body[data-theme="template"] #userProfilePanel p { color: var(--wc-text-soft) !important; } /* ---------- GRILLE PRODUITS ---------- */ body[data-theme="template"] #shoppingLayout { display: block; width: 100%; max-width: 1100px; } body[data-theme="template"] #categoryRail { margin-bottom: 1.5rem; } body[data-theme="template"] #productsGrid { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; row-gap: 1rem !important; } /* ---------- CARTES PRODUIT ---------- */ body[data-theme="template"] #productsGrid > .product-card { position: relative; /* Ratio fixe : la grille reste régulière quelles que soient les photos fournies par le client. Avant, la hauteur suivait l'image. */ aspect-ratio: 3 / 4; min-height: 0; padding: 0; overflow: hidden; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; border-radius: var(--wc-radius-xl) !important; border: 1px solid rgba(158, 232, 19, 0.16) !important; background: rgba(8, 10, 8, 0.94) !important; box-shadow: 0 20px 36px rgba(0, 0, 0, 0.45) !important; transition: transform 0.22s cubic-bezier(.2, .8, .3, 1), box-shadow 0.22s ease, border-color 0.22s ease; } body[data-theme="template"] #productsGrid > .product-card:hover, body[data-theme="template"] #productsGrid > .product-card:focus-visible { transform: translateY(-4px); border-color: rgba(158, 232, 19, 0.45) !important; box-shadow: 0 26px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(158, 232, 19, 0.25) !important; outline: none; } body[data-theme="template"] #productsGrid > .product-card:active { transform: translateY(-1px) scale(0.985); } body[data-theme="template"] #productsGrid > .product-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(5, 8, 5, 0.92) 100%); pointer-events: none; z-index: 1; } body[data-theme="template"] #productsGrid img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; z-index: 0; filter: saturate(1.08); transition: transform 0.5s cubic-bezier(.2, .8, .3, 1); } body[data-theme="template"] #productsGrid > .product-card:hover img { transform: scale(1.06); } /* Produit sans photo : au lieu d'un cadre vide, un fond de marque discret. */ body[data-theme="template"] #productsGrid > .product-card.no-image { background: radial-gradient(circle at 50% 30%, rgba(158, 232, 19, 0.16), transparent 60%), linear-gradient(180deg, rgba(17, 23, 16, 0.98), rgba(7, 10, 7, 0.98)) !important; } body[data-theme="template"] #productsGrid > .product-card.no-image img { display: none; } body[data-theme="template"] #productsGrid .pc-badge { top: 0.85rem; left: 0.85rem; right: auto; transform: none; max-width: calc(100% - 4.6rem); padding: 0.35rem 0.7rem; border-radius: 999px !important; border: 1px solid rgba(31, 168, 232, 0.4) !important; background: rgba(6, 16, 22, 0.88) !important; backdrop-filter: blur(6px); color: #8fd9ff !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; } /* Bloc bas : nom + prix, posés sur le dégradé. */ body[data-theme="template"] #productsGrid .pc-footer { position: relative; z-index: 2; padding: 0.9rem; text-align: left; display: flex; flex-direction: column; gap: 0.35rem; } body[data-theme="template"] #productsGrid .pc-name { margin: 0 !important; font-family: var(--wc-display-font) !important; text-transform: uppercase; letter-spacing: 0.01em; color: #ffffff !important; font-size: 1.05rem !important; line-height: 1.08; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 1px 1px 0 rgba(158, 232, 19, 0.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Le prix ne figurait nulle part sur la carte : il fallait ouvrir la fiche. */ body[data-theme="template"] #productsGrid .pc-price { font-weight: 800; font-size: 1rem; color: var(--wc-green); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); letter-spacing: 0.01em; } body[data-theme="template"] #productsGrid .pc-price-from { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wc-text-muted); margin-right: 0.15rem; } body[data-theme="template"] #productsGrid .pc-add { position: absolute; right: 0.7rem; top: 0.7rem; width: 44px; height: 44px; padding: 0; z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: 999px !important; border: 1px solid rgba(158, 232, 19, 0.7) !important; background: linear-gradient(180deg, var(--wc-green) 0%, #6fae0a 100%) !important; color: #0a2b0a !important; box-shadow: var(--wc-glow-green), 0 0 0 6px rgba(158, 232, 19, 0.08) !important; transition: transform 0.18s ease, background 0.25s ease; } body[data-theme="template"] #productsGrid .pc-add svg { width: 22px; height: 22px; } body[data-theme="template"] #productsGrid .pc-add:hover { transform: scale(1.08); } body[data-theme="template"] #productsGrid .pc-add:active { transform: scale(0.92); } /* Confirmation visuelle de l'ajout rapide, sur le bouton lui-même. */ body[data-theme="template"] #productsGrid .pc-add.is-added { background: linear-gradient(180deg, #ffffff 0%, var(--wc-green-soft) 100%) !important; animation: pcAdded 0.7s ease; } @keyframes pcAdded { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(90deg); } 100% { transform: scale(1) rotate(90deg); } } /* ---------- MODALE PRODUIT ---------- */ body[data-theme="template"] #productModal { background: rgba(3, 5, 3, 0.85) !important; } body[data-theme="template"] #productModal .glass { border-radius: 28px !important; border-color: var(--wc-border-strong) !important; background: radial-gradient(circle at top right, rgba(31, 168, 232, 0.14), transparent 20%), linear-gradient(180deg, rgba(15, 21, 14, 0.98), rgba(6, 8, 6, 0.98)) !important; } body[data-theme="template"] #modalDesc, body[data-theme="template"] #modalDesc * { color: var(--wc-text-soft) !important; } body[data-theme="template"] #closeModal, body[data-theme="template"] #qtyMinus, body[data-theme="template"] #qtyPlus, body[data-theme="template"] #modalOption, body[data-theme="template"] #modalQty { background: rgba(13, 18, 12, 0.96) !important; border: 1px solid var(--wc-border) !important; color: var(--wc-text) !important; } body[data-theme="template"] #modalPrice { color: var(--wc-yellow) !important; font-family: var(--wc-display-font); letter-spacing: 0.01em; text-shadow: 0 0 12px rgba(252, 200, 26, 0.35); } body[data-theme="template"] #modalPurchase, body[data-theme="template"] #confirmOrderBtn { border: 1px solid rgba(158, 232, 19, 0.7) !important; background: linear-gradient(180deg, var(--wc-green) 0%, #6fae0a 100%) !important; color: #0a2b0a !important; font-weight: 700; box-shadow: var(--wc-glow-green), 0 0 0 8px rgba(158, 232, 19, 0.06) !important; } body[data-theme="template"] #copyRecapBtn { border: 1px solid var(--wc-border-strong) !important; background: rgba(158, 232, 19, 0.08) !important; color: var(--wc-green-soft) !important; } /* ---------- PANIER ---------- */ body[data-theme="template"] #basketItems .glass p.text-gray-300 { color: var(--wc-yellow) !important; font-weight: 700; } /* Le rouge plein faisait de "supprimer" l'élément le plus visible de la ligne, devant le prix et la quantité. Il redevient une action discrète. */ body[data-theme="template"] .removeBtn { background: rgba(255, 46, 59, 0.12) !important; border-color: rgba(255, 46, 59, 0.3) !important; } /* ---------- ÉTOILES AVIS ---------- */ body[data-theme="template"] .star-btn.is-filled, body[data-theme="template"] .star-display.is-filled { color: var(--wc-yellow) !important; text-shadow: 0 0 8px rgba(252, 200, 26, 0.4); } /* ---------- NAVIGATION BASSE — pictogrammes dorés 3D + panier flottant (12/09/2026) ---------- Les 5 icônes sont des WebP 128 px générés par Timour (icons/nav-*.webp, 3 à 6 Ko). Éteint : désaturé et atténué. Allumé : couleur pleine + halo doré + clignotement d'allumage. Le panier sort de la barre : pastille sombre cerclée d'or, badge vert citron. */ body[data-theme="template"] #bottomNav { bottom: 0 !important; left: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; /* Marge basse = zone sûre du système : 0 quand la barre Safari est visible, ~34 px en app plein écran (ajout à l'écran d'accueil), variable Telegram dans le bot. Plancher 12 px. Remplace les 38 px fixes d'avant, qui faisaient une bande vide sous les libellés dans Safari. */ padding: 0.65rem 0 calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), 12px) + 0.5rem) 0 !important; border-radius: 0 !important; border: none !important; background: linear-gradient(180deg, rgba(6, 9, 6, 0.55), rgba(4, 6, 4, 0.98)) !important; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; gap: 0 !important; overflow: visible !important; } /* Fil doré en haut de la barre, qui s'estompe sur les bords */ body[data-theme="template"] #bottomNav::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(252, 200, 26, 0.85) 30%, rgba(252, 200, 26, 0.85) 70%, transparent); box-shadow: 0 0 8px rgba(252, 200, 26, 0.5), 0 0 18px rgba(252, 200, 26, 0.22); pointer-events: none; } body[data-theme="template"] #bottomNav button { position: relative; min-height: auto !important; border-radius: 0 !important; background: transparent !important; padding: 0.2rem 0 !important; color: rgba(255, 255, 255, 0.32) !important; transition: color 0.2s ease, transform 0.2s ease; } body[data-theme="template"] #bottomNav button img.nav-ico { width: 32px; height: 32px; margin-bottom: 0.3rem; object-fit: contain; filter: grayscale(1) brightness(0.8) opacity(0.5); transition: filter 0.2s ease, transform 0.2s ease; } body[data-theme="template"] #bottomNav button span { font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase; } body[data-theme="template"] #bottomNav button.is-active { background: transparent !important; color: #ffd85a !important; box-shadow: none !important; transform: translateY(-2px) !important; } body[data-theme="template"] #bottomNav button.is-active img.nav-ico { filter: drop-shadow(0 0 4px rgba(252, 200, 26, 0.9)) drop-shadow(0 0 12px rgba(252, 200, 26, 0.45)); transform: scale(1.1); /* allumage direct, sans clignotement (Timour, 12/09) */ } body[data-theme="template"] #bottomNav button.is-active span { color: #ffd85a !important; text-shadow: 0 0 6px rgba(252, 200, 26, 0.8), 0 0 14px rgba(252, 200, 26, 0.35); } /* ---------- PANIER FLOTTANT AU CENTRE ---------- */ body[data-theme="template"] #bottomNav #basketBtn { transform: none !important; padding-top: 32px !important; /* réserve la hauteur icône des autres onglets : libellés alignés */ } body[data-theme="template"] #bottomNav #basketBtn::before { content: ""; position: absolute; top: -38px; left: 50%; width: 64px; height: 64px; box-sizing: border-box; /* la bordure de 3 px compte dans les 64 px : centre du cercle = centre de l'icône */ transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, #1a2014 0%, #0b0f09 100%); border: 3px solid #ffd85a; box-shadow: 0 0 0 1.5px rgba(252, 200, 26, 0.35), 0 0 18px rgba(252, 200, 26, 0.55), 0 0 40px rgba(252, 200, 26, 0.25), 0 10px 24px rgba(0, 0, 0, 0.6); z-index: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } body[data-theme="template"] #bottomNav #basketBtn img.nav-ico { position: absolute; top: -27px; /* centre du cercle : -6px (cercle de 64px posé à -38px) */ left: 50%; width: 42px; height: 42px; margin: 0 0 0 -21px; z-index: 1; /* Centré sur le centre de masse du dessin (mesuré sur l'image), pas sur sa boîte : c'est là que l'œil place le chariot. */ transform: translate(-2.4px, -0.7px); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); animation: none !important; } body[data-theme="template"] #bottomNav #basketBtn.is-active img.nav-ico { filter: drop-shadow(0 0 6px rgba(252, 200, 26, 0.9)); transform: translate(-2.4px, -0.7px) scale(1.06); } body[data-theme="template"] #bottomNav #basketBtn span:not(#basketBadge) { position: relative; z-index: 1; } body[data-theme="template"] #bottomNav #basketBtn.is-active::before { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 0 1.5px rgba(252, 200, 26, 0.6), 0 0 26px rgba(252, 200, 26, 0.9), 0 0 60px rgba(252, 200, 26, 0.4), 0 10px 24px rgba(0, 0, 0, 0.6); } body[data-theme="template"] #bottomNav #basketBtn:active::before { transform: translateX(-50%) scale(0.94); } /* ---------- BADGE PANIER ---------- */ body[data-theme="template"] #basketBadge { top: -34px !important; right: calc(50% - 36px) !important; z-index: 2; background: var(--wc-green) !important; color: #0b1204 !important; box-shadow: 0 0 10px rgba(158, 232, 19, 0.6); } body[data-theme="template"] #basketBadge.is-bumping { animation: wc-badge-bump 0.35s ease; } @keyframes wc-badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* ---------- ANIMATION "VOL VERS LE PANIER" ---------- */ .fly-to-cart { position: fixed; z-index: 70; border-radius: 50%; object-fit: cover; pointer-events: none; transition: transform 0.55s cubic-bezier(0.3, 0, 0.6, 1), opacity 0.55s ease; } /* ---------- ÉCRAN DE CHARGEMENT (logo) ---------- */ #loadingOverlay img { max-width: 160px; max-height: 160px; object-fit: contain; margin-bottom: 1rem; } /* ---------- ANIMATION DE CONFIRMATION DE COMMANDE ---------- */ #orderSuccessOverlay { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 32px; background: rgba(3, 5, 3, 0.88); } /* Affiché uniquement sur un canal sans texte prérempli (Signal) — le client doit lire cette consigne AVANT d'être redirigé, pas la manquer dans une notification qui disparaît toute seule. */ .order-success-message { max-width: 320px; text-align: center; font-size: 14.5px; line-height: 1.6; color: #fff; font-weight: 500; } #orderSuccessOverlay .check-circle { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--wc-green); display: flex; align-items: center; justify-content: center; box-shadow: var(--wc-glow-green); animation: wc-pop-in 0.4s cubic-bezier(0.2, 1.4, 0.5, 1); } #orderSuccessOverlay svg { width: 48px; height: 48px; stroke: var(--wc-green); } #orderSuccessOverlay svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wc-draw-check 0.4s 0.15s ease forwards; } @keyframes wc-pop-in { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes wc-draw-check { to { stroke-dashoffset: 0; } } /* ---------- PILLS CATÉGORIES ---------- */ body[data-theme="template"] #categoryPills { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; } body[data-theme="template"] #categoryPills::-webkit-scrollbar { display: none; } body[data-theme="template"] .category-pill { flex: 0 0 auto; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(158, 232, 19, 0.16); background: rgba(13, 18, 12, 0.82); color: var(--wc-text-soft); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.78rem; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } body[data-theme="template"] .category-pill.is-active { border-color: rgba(158, 232, 19, 0.7); background: linear-gradient(180deg, var(--wc-green) 0%, #6fae0a 100%); color: #0a2b0a; box-shadow: var(--wc-glow-green); } /* ---------- NOTIFICATIONS ---------- */ body[data-theme="template"] .sn-notifications-container { top: 84px !important; } body[data-theme="template"] .sn-notifications-container .sn-notify { background: rgba(13, 18, 12, 0.96); border: 1px solid var(--wc-border-strong); box-shadow: var(--wc-glow-green); color: var(--wc-text); } body[data-theme="template"] .sn-notifications-container .sn-notify-title, body[data-theme="template"] .sn-notifications-container .sn-notify-text, body[data-theme="template"] .sn-notifications-container .sn-notify-close { color: var(--wc-text); } body[data-theme="template"] .sn-notifications-container .sn-notify-progress { background-color: var(--wc-green); } /* ---------- RESPONSIVE ---------- */ @media (min-width: 900px) { body[data-theme="template"] #appContent { padding-left: 1.5rem; padding-right: 1.5rem; } body[data-theme="template"] #productsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 639px) { body[data-theme="template"] #productsGrid { gap: 0.85rem; } body[data-theme="template"] #productsGrid .pc-name { font-size: 0.95rem !important; } body[data-theme="template"] #productsGrid .pc-price { font-size: 0.92rem; } body[data-theme="template"] #productsGrid .pc-footer { padding: 0.7rem; } /* Le bouton d'ajout tombait à 30px : sous le seuil tactile confortable, il devient la cible la plus ratée de la boutique. Maintenu à 44px. */ body[data-theme="template"] #productsGrid .pc-add { right: 0.5rem; top: 0.5rem; width: 44px; height: 44px; } body[data-theme="template"] #productsGrid .pc-add svg { width: 20px; height: 20px; } } /* ============================================ EN-TÊTE DE BOUTIQUE (web uniquement) ============================================ */ body[data-theme="template"] #shopHeader { width: 100%; max-width: 1100px; margin: 0 auto 1.5rem; } body[data-theme="template"] .shop-header-inner { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.1rem; border-radius: var(--wc-radius-lg); border: 1px solid var(--wc-border-strong); background: radial-gradient(circle at 100% 0, rgba(158, 232, 19, 0.18), transparent 26%), linear-gradient(180deg, rgba(13, 18, 12, 0.96), rgba(7, 10, 7, 0.94)); box-shadow: var(--wc-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body[data-theme="template"] .shop-logo { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 16px; object-fit: cover; border: 1px solid var(--wc-border-strong); box-shadow: 0 0 18px rgba(158, 232, 19, 0.25); background: rgba(0, 0, 0, 0.4); } body[data-theme="template"] .shop-headings { min-width: 0; } body[data-theme="template"] .shop-name { margin: 0; font-family: var(--wc-display-font); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; font-size: 1.5rem; color: #ffffff; text-shadow: 2px 2px 0 rgba(158, 232, 19, 0.35); } body[data-theme="template"] .shop-tagline { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.35; color: var(--wc-text-soft); } @media (max-width: 400px) { body[data-theme="template"] .shop-logo { width: 52px; height: 52px; } body[data-theme="template"] .shop-name { font-size: 1.25rem; } body[data-theme="template"] .shop-tagline { font-size: 0.76rem; } } /* ============================================ RECHERCHE, COMPTEUR, ÉTAT VIDE ============================================ */ body[data-theme="template"] #catalogSearch { width: 100%; max-width: 1100px; margin: 0 auto 1.25rem; } body[data-theme="template"] .search-field { position: relative; display: flex; align-items: center; } body[data-theme="template"] .search-field .search-icon { position: absolute; left: 0.95rem; width: 18px; height: 18px; color: var(--wc-text-muted); pointer-events: none; } body[data-theme="template"] #productSearch { width: 100%; height: 48px; padding: 0 2.75rem 0 2.75rem; border-radius: 999px; border: 1px solid var(--wc-border); background: rgba(9, 13, 8, 0.9); color: var(--wc-text); font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body[data-theme="template"] #productSearch::placeholder { color: var(--wc-text-muted); } body[data-theme="template"] #productSearch::-webkit-search-cancel-button { display: none; } body[data-theme="template"] #productSearch:focus { outline: none; border-color: var(--wc-border-strong); box-shadow: 0 0 0 3px rgba(158, 232, 19, 0.14); } body[data-theme="template"] .search-clear { position: absolute; right: 0.5rem; width: 36px; height: 36px; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.08); color: var(--wc-text); font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center; } /* Ce display:flex battait le .hidden de Tailwind : le bouton d'effacement restait visible sur un champ vide. */ body[data-theme="template"] .search-clear.hidden { display: none; } body[data-theme="template"] .stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } body[data-theme="template"] .products-count { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--wc-text-muted); white-space: nowrap; } body[data-theme="template"] .products-empty { margin-top: 0.5rem; padding: 2.25rem 1.25rem; border-radius: var(--wc-radius-lg); border: 1px dashed var(--wc-border-strong); background: rgba(9, 13, 8, 0.72); text-align: center; } body[data-theme="template"] .products-empty .empty-title { font-family: var(--wc-display-font); text-transform: uppercase; font-size: 1.1rem; color: var(--wc-text); margin: 0 0 0.35rem; } body[data-theme="template"] .products-empty .empty-text { font-size: 0.88rem; color: var(--wc-text-soft); margin: 0; } body[data-theme="template"] .products-empty .empty-action { margin-top: 1rem; padding: 0.7rem 1.4rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--wc-border-strong); background: linear-gradient(180deg, var(--wc-green) 0%, #6fae0a 100%); color: #0a2b0a; font-weight: 700; font-size: 0.85rem; box-shadow: var(--wc-glow-green); } /* ============================================ PANIER ============================================ */ body[data-theme="template"] .basket-line { border: 1px solid var(--wc-border) !important; transition: border-color 0.2s ease; } body[data-theme="template"] .basket-line:hover { border-color: var(--wc-border-strong) !important; } body[data-theme="template"] .basket-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); } body[data-theme="template"] .basket-name { font-weight: 700; color: var(--wc-text); font-size: 0.95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } body[data-theme="template"] .basket-option { font-size: 0.74rem; color: var(--wc-text-muted); margin: 0.15rem 0 0.5rem; } /* Le panier ne permettait que de retirer une ligne entière : pour passer de 1 à 2, il fallait ressortir et rouvrir la fiche produit. */ body[data-theme="template"] .qty-control { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem; border-radius: 999px; border: 1px solid var(--wc-border); background: rgba(0, 0, 0, 0.35); } body[data-theme="template"] .qty-control button { width: 34px; height: 34px; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.07); color: var(--wc-text); font-size: 1.1rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } body[data-theme="template"] .qty-control button:hover { background: rgba(158, 232, 19, 0.22); } body[data-theme="template"] .qty-control button:active { transform: scale(0.9); } body[data-theme="template"] .qty-value { min-width: 30px; text-align: center; font-weight: 700; font-size: 0.92rem; color: var(--wc-text); } body[data-theme="template"] .basket-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: 0 0 auto; } body[data-theme="template"] .basket-subtotal { margin: 0; font-weight: 800; font-size: 1rem; color: var(--wc-green); white-space: nowrap; } body[data-theme="template"] .basket-right .removeBtn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255, 46, 59, 0.3); background: rgba(255, 46, 59, 0.12); color: #ff6b74; transition: background 0.15s ease, color 0.15s ease; } body[data-theme="template"] .basket-right .removeBtn svg { width: 17px; height: 17px; } body[data-theme="template"] .basket-right .removeBtn:hover { background: rgba(255, 46, 59, 0.24); color: #fff; } body[data-theme="template"] .basket-summary { margin: 1.25rem 0 0.85rem; padding: 0.9rem 1.1rem; border-radius: var(--wc-radius-md); border: 1px solid var(--wc-border-strong); background: rgba(9, 13, 8, 0.9); } body[data-theme="template"] .basket-summary-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.85rem; color: var(--wc-text-soft); } body[data-theme="template"] .basket-total { font-family: var(--wc-display-font); font-size: 1.5rem; color: #ffffff; text-shadow: 0 0 14px rgba(158, 232, 19, 0.4); } body[data-theme="template"] .basket-cta { display: block; min-height: 52px; padding: 0.95rem 1.5rem; border-radius: 999px; border: 1px solid rgba(158, 232, 19, 0.7); background: linear-gradient(180deg, var(--wc-green) 0%, #6fae0a 100%); color: #0a2b0a; font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: var(--wc-glow-green); transition: transform 0.15s ease, filter 0.15s ease; } body[data-theme="template"] .basket-cta:hover { filter: brightness(1.06); } body[data-theme="template"] .basket-cta:active { transform: scale(0.985); } /* Choix du jour de livraison (adresse activée par boutique, cf. panier.js) */ body[data-theme="template"] .delivery-choice-active { border-color: var(--wc-green); background: rgba(158, 232, 19, 0.12); color: var(--wc-green); } body[data-theme="template"] .basket-clear { display: block; margin-top: 0.6rem; min-height: 44px; padding: 0.6rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--wc-text-muted); font-size: 0.82rem; } body[data-theme="template"] .basket-clear:hover { color: #ff6b74; border-color: rgba(255, 46, 59, 0.3); } body[data-theme="template"] .basket-empty { border: 1px dashed var(--wc-border-strong) !important; } body[data-theme="template"] .basket-empty-icon { width: 46px; height: 46px; margin: 0 auto 0.85rem; color: var(--wc-text-muted); opacity: 0.75; } body[data-theme="template"] .basket-empty-title { font-family: var(--wc-display-font); text-transform: uppercase; font-size: 1.1rem; color: var(--wc-text); margin: 0 0 0.3rem; } body[data-theme="template"] .basket-empty-text { font-size: 0.86rem; color: var(--wc-text-soft); margin: 0; } body[data-theme="template"] .basket-cta-ghost { margin-top: 1.1rem; min-height: 44px; padding: 0.7rem 1.4rem; border-radius: 999px; border: 1px solid var(--wc-border-strong); background: rgba(158, 232, 19, 0.1); color: var(--wc-green); font-weight: 700; font-size: 0.85rem; } @media (max-width: 380px) { body[data-theme="template"] .basket-thumb { width: 54px; height: 54px; } body[data-theme="template"] .qty-control button { width: 32px; height: 32px; } } body[data-theme="template"] .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Le défilement de fond restait actif derrière la fiche produit ouverte. */ body[data-theme="template"].modal-open { overflow: hidden; } body[data-theme="template"] #productModal.is-open #productModalPanel { animation: modalIn 0.24s cubic-bezier(.2, .8, .3, 1); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } /* Respect des préférences système : pas d'animation si l'utilisateur n'en veut pas. */ @media (prefers-reduced-motion: reduce) { body[data-theme="template"] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- CONFETTIS AU TAP SUR LE PANIER (12/09/2026) ---------- */ .wc-confetti { position: fixed; width: var(--w, 7px); height: var(--h, 11px); border-radius: 2px; margin: -5px 0 0 -4px; pointer-events: none; z-index: 9999; will-change: transform, opacity; animation: wc-confetti-vol var(--dur, 850ms) cubic-bezier(0.15, 0.85, 0.35, 1) forwards; } @keyframes wc-confetti-vol { 0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 1; } 15% { transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.45)) rotate(calc(var(--rot) * 0.2)) scale(1.1); opacity: 1; } 65% { transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.95)) rotate(calc(var(--rot) * 0.75)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; } } /* ---------- PIÈCES D'OR AU TAP SUR LE PANIER (12/09/2026) ---------- */ .wc-piece { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 9999; will-change: transform, opacity; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); animation: wc-piece-saut 950ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--delai, 0ms) both; transform: scale(0.3); opacity: 0; } @keyframes wc-piece-saut { 0% { transform: translate(0, 0) scale(0.3) rotateY(0deg); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(var(--dx), var(--dy)) scale(1) rotateY(calc(var(--tours) * 0.5)); opacity: 1; } 85% { transform: translate(calc(var(--dx) * 0.2), 4px) scale(0.55) rotateY(var(--tours)); opacity: 1; } 100% { transform: translate(0, 10px) scale(0.25) rotateY(var(--tours)); opacity: 0; } } /* ---------- CONTACT : CARTES PAR RÉSEAU + CARTE « NOTIFICATION » (12/09/2026) ---------- */ .wc-reseau { --rc: #9ee813; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 22%, rgba(12, 16, 11, 0.95)), rgba(9, 13, 8, 0.96)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); color: #f3f7ea; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .wc-reseau:active { transform: scale(0.98); } .wc-reseau-picto { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .wc-reseau-picto img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); } .wc-reseau-svg { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rc) 30%, transparent); color: var(--rc); } .wc-reseau-svg svg { width: 22px; height: 22px; } .wc-reseau-texte { display: flex; flex-direction: column; text-align: left; min-width: 0; } .wc-reseau-texte b { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; } .wc-reseau-texte small { font-size: 0.8rem; font-weight: 600; color: color-mix(in srgb, var(--rc) 85%, white); } .wc-reseau-chevron { width: 18px; height: 18px; margin-left: auto; color: rgba(255, 255, 255, 0.4); flex: 0 0 auto; } .wc-reseau--grande { padding: 14px 16px; } .wc-reseau--grande .wc-reseau-picto, .wc-reseau--grande .wc-reseau-picto img { width: 50px; height: 50px; flex-basis: 50px; } .wc-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.22s ease; } .wc-popup--ouverte { opacity: 1; } .wc-popup--sortie { opacity: 0; } .wc-popup-fond { position: absolute; inset: 0; background: rgba(2, 4, 2, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .wc-popup-carte { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 26px 18px 18px; border-radius: 26px; background: linear-gradient(180deg, rgba(20, 26, 18, 0.98), rgba(8, 11, 7, 0.99)); border: 1px solid rgba(252, 200, 26, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(252, 200, 26, 0.12); text-align: center; transform: translateY(18px) scale(0.97); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1.2); } .wc-popup--ouverte .wc-popup-carte { transform: none; } .wc-popup-fermer { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.07); color: #fff; display: flex; align-items: center; justify-content: center; } .wc-popup-fermer svg { width: 16px; height: 16px; } .wc-popup-logo { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; margin: 0 auto 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(252, 200, 26, 0.35); } .wc-popup-nom { font-family: var(--wc-display-font); font-size: 1.5rem; letter-spacing: 0.04em; color: #fff; margin: 0 0 4px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(252, 200, 26, 0.25); } .wc-popup-tagline { color: #cfd9c4; font-size: 0.95rem; margin: 0 0 16px; } .wc-popup-liens { display: flex; flex-direction: column; gap: 10px; }