/* ========================================================================= KINGDOM MARKET — FUTURISTIC THEME LAYER (v2) Overlay stylesheet: link this AFTER every page's own CSS. - Light ("jour") is the default look, white base. - Dark ("nuit") activates via [data-theme="dark"] on , toggled by theme-toggle.js (button injected automatically). - Perf-conscious: no backdrop-filter on repeated elements (cards/grids), only on the few fixed/singleton surfaces (header, dropdown, bottom-nav). - Does not rename or remove any existing class/id used by JS. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); :root{ /* ---- day (default) ---- */ --km-bg:#f7f6f2; --km-bg-soft:#ffffff; --km-panel:#ffffff; --km-header:#ffffff; --km-border:rgba(19,25,41,0.10); --km-border-strong:rgba(254,189,105,0.45); --km-text:#131921; --km-text-dim:#5b6472; --km-gold:#febd69; --km-gold-text:#b0650b; --km-orange:#ff9900; --km-shadow:0 8px 22px -14px rgba(19,25,41,.20); --km-shadow-lift:0 16px 32px -16px rgba(19,25,41,.28); --km-glow:0 0 0 1px var(--km-border-strong), 0 6px 18px -8px rgba(255,153,0,.30); --km-radius:16px; --km-radius-sm:10px; --km-font-display:'Montserrat', 'Segoe UI', Arial, sans-serif; --km-font-body:'Montserrat', 'Segoe UI', Arial, sans-serif; } html[data-theme="dark"]{ --km-bg:#0b1220; --km-bg-soft:#111a2e; --km-panel:#111a2e; --km-header:#0b1220; --km-border:rgba(255,255,255,0.10); --km-border-strong:rgba(254,189,105,0.35); --km-text:#eef2f9; --km-text-dim:#94a2bd; --km-gold:#febd69; --km-gold-text:#ffd27a; --km-orange:#ff9900; --km-shadow:0 10px 26px -14px rgba(0,0,0,.65); --km-shadow-lift:0 18px 38px -16px rgba(0,0,0,.75); --km-glow:0 0 0 1px var(--km-border-strong), 0 0 18px rgba(254,189,105,.28); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---------- base canvas ---------- */ html{ scroll-behavior:smooth; } body{ background: radial-gradient(900px 480px at 10% -8%, rgba(254,189,105,.10), transparent 60%), radial-gradient(700px 400px at 105% 8%, rgba(255,153,0,.08), transparent 55%), var(--km-bg) !important; color:var(--km-text); font-family:var(--km-font-body) !important; transition:background-color .25s ease, color .25s ease; } h1,h2,h3,h4,h5,h6{ font-family:var(--km-font-display) !important; letter-spacing:.2px; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--km-bg-soft); } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--km-gold),var(--km-orange)); border-radius:10px; } :focus-visible{ outline:2px solid var(--km-orange) !important; outline-offset:2px; } /* ---------- day/night toggle button ---------- */ .km-theme-toggle{ font-size:16px; line-height:1; } .km-theme-toggle-floating{ position:fixed; right:16px; bottom:84px; z-index:600; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--km-panel); border:1px solid var(--km-border-strong); box-shadow:var(--km-shadow-lift); } /* ---------- header (single fixed element: backdrop-filter is cheap here) ---------- */ header{ background:var(--km-header) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--km-border) !important; box-shadow:0 1px 0 rgba(255,255,255,.03), var(--km-shadow); position:sticky; top:0; z-index:500; } header h1, .logo-container h1{ font-family:var(--km-font-display) !important; background:linear-gradient(90deg,var(--km-gold-text),var(--km-gold) 50%,var(--km-orange)); -webkit-background-clip:text; background-clip:text; color:transparent !important; } .logo, header img.logo{ border-radius:50%; box-shadow:0 0 0 2px rgba(254,189,105,.4); } .icon-btn, .dropbtn, #logoutBtn, .help-button{ background:var(--km-bg) !important; border:1px solid var(--km-border) !important; color:var(--km-text) !important; transition:box-shadow .2s ease, border-color .2s ease, transform .15s ease; } .icon-btn:hover, .dropbtn:hover, #logoutBtn:hover, .help-button:hover{ border-color:var(--km-gold) !important; box-shadow:0 0 0 3px rgba(254,189,105,.15); transform:translateY(-1px); } #cartCount, #notifBadge{ background:linear-gradient(135deg,#ff5f6d,#e11d48) !important; } .dropdown-content, #menuContent{ background:var(--km-panel) !important; border:1px solid var(--km-border) !important; box-shadow:var(--km-shadow-lift) !important; } .dropdown-content a{ color:var(--km-text) !important; border-bottom:1px solid var(--km-border) !important; } .dropdown-content a:hover{ color:var(--km-gold-text) !important; background:rgba(254,189,105,.08) !important; } /* ---------- search ---------- */ .search-section{ background:transparent !important; } .search-box{ background:var(--km-panel) !important; border:1px solid var(--km-border) !important; border-radius:999px !important; box-shadow:var(--km-shadow); } .search-box input{ background:transparent !important; color:var(--km-text) !important; font-family:var(--km-font-body) !important; } .search-box input::placeholder{ color:var(--km-text-dim) !important; } .search-box button{ background:linear-gradient(135deg,var(--km-gold),var(--km-orange)) !important; color:#1a1000 !important; border:none !important; border-radius:999px !important; } /* ---------- generic form controls (all pages) ---------- */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], select, textarea{ background:var(--km-bg-soft) !important; border:1px solid var(--km-border) !important; color:var(--km-text) !important; border-radius:var(--km-radius-sm) !important; transition:border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus{ border-color:var(--km-gold) !important; box-shadow:0 0 0 3px rgba(254,189,105,.18) !important; outline:none !important; } option{ background:var(--km-panel); color:var(--km-text); } button{ font-family:var(--km-font-body); cursor:pointer; } button:not(.icon-btn):not(.dropbtn):not(#logoutBtn):not(.close-menu){ border-radius:var(--km-radius-sm); } button.btn-panier, .btn-panier, button.save-btn, .save-btn, button.btn-primary, .btn-primary, .hero-slider button, .slide button, button[type="submit"]{ background:linear-gradient(135deg,var(--km-gold),var(--km-orange)) !important; color:#1a1000 !important; border:none !important; font-weight:600 !important; box-shadow:0 8px 18px -8px rgba(255,153,0,.45); transition:transform .18s ease, box-shadow .18s ease; } button.btn-panier:hover, .btn-panier:hover, button.save-btn:hover, .save-btn:hover, button.btn-primary:hover, .btn-primary:hover, .hero-slider button:hover, button[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(255,153,0,.55); } .btn-secondary{ background:var(--km-bg-soft) !important; border:1px solid var(--km-border-strong) !important; color:var(--km-text) !important; } .btn-danger, .delete-btn, .cancel-btn{ background:rgba(225,29,72,.10) !important; border:1px solid rgba(225,29,72,.35) !important; color:#c81e46 !important; } html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .delete-btn, html[data-theme="dark"] .cancel-btn{ color:#ff8fa3 !important; } /* ---------- hero / slider ---------- */ .hero-slider, .slide{ background: radial-gradient(600px 260px at 20% 20%, rgba(254,189,105,.18), transparent 60%), radial-gradient(500px 300px at 90% 80%, rgba(255,153,0,.14), transparent 60%), linear-gradient(135deg,var(--km-panel),var(--km-bg)) !important; border:1px solid var(--km-border) !important; border-radius:var(--km-radius) !important; box-shadow:var(--km-shadow); overflow:hidden; } .slide-badge{ background:rgba(254,189,105,.14) !important; border:1px solid var(--km-border-strong) !important; color:var(--km-gold-text) !important; } .slide h2{ color:var(--km-text) !important; } .slide p{ color:var(--km-text-dim) !important; } /* ---------- section headers ---------- */ .section > h2, section > h2{ color:var(--km-text) !important; position:relative; display:inline-block; padding-bottom:10px; } .section > h2::after, section > h2::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:56px; background:linear-gradient(90deg,var(--km-gold),var(--km-orange)); border-radius:3px; } /* ========================================================================= PRODUCT / CATEGORY / SHOP GRIDS — clean, consistent placement IMPORTANT: tracks use minmax(0,1fr), never plain 1fr. A bare 1fr column is really minmax(auto,1fr) — its minimum is the content's min-content, so any wrappable text (product name, button label) forces the column to blow back up to that word's width and squeezes the rest into collapsed, near-pill-shaped cards. minmax(0,1fr) removes that trap: columns always split the row evenly and content wraps/clamps inside. No backdrop-filter here either: these repeat many times per page, so keep them to solid colors + shadows only (cheap to paint/scroll). ========================================================================= */ .products-container{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:12px !important; align-items:stretch; } @media (min-width:480px){ .products-container{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } } @media (min-width:700px){ .products-container{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:16px !important; } } @media (min-width:980px){ .products-container{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; } } @media (min-width:1280px){ .products-container{ grid-template-columns:repeat(6, minmax(0,1fr)) !important; } } .category-container{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:12px !important; } @media (min-width:820px){ .category-container{ grid-template-columns:repeat(6, minmax(0,1fr)) !important; gap:16px !important; } } /* ---- #categoryContainer (accueil) is a special case: script.js never fills it with a row of small .category-card tiles — it replaces the whole box with ONE

catégorie

+ ONE .products-container full of product cards. Left as a 3-column grid, those two children (title + whole product grid) each get squeezed into a single column, which in turn crushes every product card inside down to a sliver — that's the "texte coupé lettre par lettre" bug. Force it back to a simple block so the title sits on its own line and the product grid gets the full width to lay itself out with the normal .products-container rules above (2 cols on phone, up to 6 on desktop). */ #categoryContainer{ display:block !important; grid-template-columns:none !important; } #categoryContainer > h2{ margin:0 0 14px !important; } .shop-container{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important; } @media (min-width:820px){ .shop-container{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:18px !important; } } /* ---- shared shell for every tile type ---- */ .product-card, .category-card, .boutique-card, .advantage-card{ background:var(--km-panel) !important; border:1px solid var(--km-border) !important; border-radius:var(--km-radius) !important; box-shadow:var(--km-shadow); display:flex !important; flex-direction:column !important; height:100%; min-width:0; /* grid/flex item safety: never let content push the tile wider */ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .product-card:hover, .category-card:hover, .boutique-card:hover, .advantage-card:hover{ transform:translateY(-3px); border-color:var(--km-border-strong) !important; box-shadow:var(--km-glow), var(--km-shadow-lift); } .category-card, .boutique-card, .advantage-card{ min-width:0; } .category-card *, .boutique-card *, .advantage-card *{ min-width:0; } /* ---- product-card only: image-forward tile, à la marketplace (grande image edge-to-edge, titre court, prix en évidence, une ligne d'info discrète, bouton pleine largeur) ---- */ .product-card{ padding:0 !important; overflow:hidden !important; } /* body padding lives here instead of on the card itself, so the image above can run edge-to-edge like the reference layout */ .product-card > *:not(.product-image-wrap){ padding-left:10px; padding-right:10px; min-width:0; } .product-card > h3{ margin:8px 0 2px; } .product-card > .product-actions{ padding-bottom:10px; } .product-card > .product-image-wrap + *{ margin-top:0; } .product-image-wrap{ width:100% !important; aspect-ratio:1/1; overflow:hidden !important; background:var(--km-bg); border-radius:0; flex-shrink:0; } .product-image{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; } .product-card h3{ font-size:13.5px !important; font-weight:600 !important; line-height:1.3 !important; color:var(--km-text) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; } /* description acts as the small muted meta line (à la "MOQ / vendus") — kept short and quiet, never competing with the name or the price */ .product-card .description{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; color:var(--km-text-dim) !important; font-size:11.5px !important; margin:2px 0 0 !important; min-height:0; } .product-card .price-block{ margin-top:6px; } .product-card .price-current{ font-size:15px !important; font-weight:700 !important; } .product-card .price-old{ font-size:11.5px; } .product-card .stock-badge{ font-size:10.5px; } .product-card .product-actions{ margin-top:8px; } .product-card .product-actions .btn-panier{ width:100%; font-size:12.5px !important; padding:8px 6px !important; white-space:normal; line-height:1.25; } .card, .stat-card, .dashboard-box, .banner, .table-section, .edit-box, .edit-modal, .modal-box, .empty-box, .empty-state{ background:var(--km-panel) !important; border:1px solid var(--km-border) !important; border-radius:var(--km-radius) !important; box-shadow:var(--km-shadow); } .stat-card:hover{ box-shadow:var(--km-glow), var(--km-shadow-lift); } .price-current, .prix-promo{ color:var(--km-gold-text) !important; } .badge-bestseller, .badge-reduction, .boutique-badge, .stock-badge, .role-badge{ border:1px solid var(--km-border-strong) !important; } /* ---------- sidebar / admin shell ---------- */ .sidebar{ background:var(--km-header) !important; border-right:1px solid var(--km-border) !important; } .nav-item{ border-radius:var(--km-radius-sm) !important; transition:background .18s ease, box-shadow .18s ease; } .nav-item:hover, .nav-item.active{ background:rgba(254,189,105,.12) !important; box-shadow:inset 3px 0 0 var(--km-gold); } .topbar{ background:var(--km-header) !important; border-bottom:1px solid var(--km-border) !important; } /* ---------- tables ---------- */ table, .users-table{ background:var(--km-panel) !important; border:1px solid var(--km-border) !important; border-radius:var(--km-radius) !important; overflow:hidden; } th{ background:rgba(254,189,105,.10) !important; color:var(--km-gold-text) !important; font-family:var(--km-font-display) !important; font-weight:600 !important; } td, th{ border-color:var(--km-border) !important; color:var(--km-text); } tr:hover td{ background:rgba(254,189,105,.04) !important; } /* ---------- modals (single overlay instance at a time: blur is fine here) ---------- */ .modal-overlay{ background:rgba(3,5,10,.55) !important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .modal-box{ box-shadow:var(--km-shadow-lift) !important; } /* ---------- footer ---------- */ footer{ background:var(--km-header) !important; border-top:1px solid var(--km-border) !important; color:var(--km-text-dim) !important; } footer h3, footer h4{ color:var(--km-text) !important; } footer a{ color:var(--km-text-dim) !important; transition:color .18s ease; } footer a:hover{ color:var(--km-gold-text) !important; } .copyright{ border-top:1px solid var(--km-border) !important; } /* ---------- bottom nav (mobile dock) ---------- */ .bottom-nav{ background:var(--km-header) !important; border-top:1px solid var(--km-border) !important; box-shadow:0 -8px 20px -16px rgba(0,0,0,.35); } .bottom-nav a{ color:var(--km-text-dim) !important; transition:color .18s ease, transform .18s ease; } .bottom-nav a.active, .bottom-nav a:hover{ color:var(--km-gold-text) !important; transform:translateY(-2px); } /* ---------- misc ---------- */ .floating-cart, .help-button{ box-shadow:var(--km-shadow-lift) !important; } /* ========================================================================= MODE NUIT — LISIBILITÉ DES TEXTES (v3) Chaque page (produit.css, boutique.css, dashbord.css, admi.css, panier.css, index.css, boutiquek.css, parametre.css, Formulaireboutique.css…) fixe ses cartes/blocs en fond blanc figé ("background:white") et son texte en couleur sombre figée (#131921, #555, #666, #777, #888, #999, #333, #111…) en supposant systématiquement un fond clair. Ces classes ne faisaient PAS partie du socle déjà géré plus haut (.product-card/.category-card/ .boutique-card/.advantage-card/.card/.stat-card/.dashboard-box/.banner/ .table-section/.edit-box/.edit-modal/.modal-box/.empty-box/.empty-state), donc en mode nuit leur fond restait blanc alors que d'autres blocs passaient sombres (incohérent), ou, pire, quand un texte sombre se retrouvait sur un fond qui lui devenait sombre ailleurs, le texte devenait invisible. On corrige les deux à la fois : 1) on bascule ces blocs sur les mêmes fonds thème (var(--km-panel)) que le reste du site, 2) on rebascule leur texte sur les couleurs thème. On ne touche pas le mode jour (ces styles y restent inchangés) : tout ce bloc est scoppé à html[data-theme="dark"]. NB : les pages autonomes non branchées sur ce thème (connexio.html, signup.html, notifications.html, help.html — elles utilisent leurs propres variables CSS et un fond figé, jour comme nuit) ne sont pas concernées ici : leur texte y reste lisible tel quel dans les deux modes, donc les modifier aurait justement recréé le bug inverse. ========================================================================= */ /* ---- 1) fonds de blocs qui restaient blancs en mode nuit ---- */ html[data-theme="dark"] .page-header, html[data-theme="dark"] .filter-box, html[data-theme="dark"] .shop-card, html[data-theme="dark"] .auth-check-box, html[data-theme="dark"] .access-denied-box, html[data-theme="dark"] .notif-admin-card, html[data-theme="dark"] .notif-user-list, html[data-theme="dark"] .boutique-groupe, html[data-theme="dark"] .panier-empty, html[data-theme="dark"] .panier-resume, html[data-theme="dark"] .box, html[data-theme="dark"] .dem-lien-modal, html[data-theme="dark"] .form-container, html[data-theme="dark"] .products-section, html[data-theme="dark"] .produit-detail, html[data-theme="dark"] .livraison-btn, html[data-theme="dark"] .topbar-right{ background:var(--km-panel) !important; border:1px solid var(--km-border); } /* ---- 2) titres / texte "fort" (étaient en #131921, #111, #333, #1e1e1e...) ---- */ html[data-theme="dark"] .page-header h2, html[data-theme="dark"] .section h2, html[data-theme="dark"] #categoryContainer h2, html[data-theme="dark"] .close-menu, html[data-theme="dark"] .logo-crown, html[data-theme="dark"] .stat-info h3, html[data-theme="dark"] .modal-box h2, html[data-theme="dark"] .modal-box label, html[data-theme="dark"] .users-table td, html[data-theme="dark"] .dem-lien-nom, html[data-theme="dark"] .produit-detail-info h3, html[data-theme="dark"] .shop-card h3, html[data-theme="dark"] .shop-card .shop-avatar, html[data-theme="dark"] .shop-card .shop-cta, html[data-theme="dark"] .boutique-logo, html[data-theme="dark"] .boutique-card h3, html[data-theme="dark"] .boutique-badge, html[data-theme="dark"] .category-card, html[data-theme="dark"] .panier-item-info h4, html[data-theme="dark"] .boutique-groupe-titre, html[data-theme="dark"] .panier-resume h3, html[data-theme="dark"] .resume-ligne.total, html[data-theme="dark"] .livraison-question, html[data-theme="dark"] .livraison-btn, html[data-theme="dark"] .profile-avatar, html[data-theme="dark"] .box h3, html[data-theme="dark"] .avatar, html[data-theme="dark"] .shop-avatar, html[data-theme="dark"] .icon-btn.active-icon{ color:var(--km-text) !important; } /* ---- 3) texte secondaire / gris atténué (étaient en #555, #666, #777, #888, #999, #8a8f98, #9aa1ab, #c8ccd2, #d8dbe0, #ccc, #ddd...) ---- */ html[data-theme="dark"] .product-card p, html[data-theme="dark"] .description, html[data-theme="dark"] .shop-card p, html[data-theme="dark"] #emptyShops, html[data-theme="dark"] .banner-text p, html[data-theme="dark"] .last-update, html[data-theme="dark"] .empty-box, html[data-theme="dark"] .topbar-right, html[data-theme="dark"] .stat-info p, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .table-loader p, html[data-theme="dark"] .access-denied-box p, html[data-theme="dark"] .auth-check-box p, html[data-theme="dark"] .sidebar-logo span, html[data-theme="dark"] .nav-item, html[data-theme="dark"] .panier-item-info .prix-unitaire, html[data-theme="dark"] .panier-empty p, html[data-theme="dark"] .panier-empty i, html[data-theme="dark"] .resume-ligne, html[data-theme="dark"] .product-category, html[data-theme="dark"] .price-old del, html[data-theme="dark"] .boutique-card p, html[data-theme="dark"] .dem-lien-chargement, html[data-theme="dark"] .dem-lien-label, html[data-theme="dark"] .sidebar-footer > button:last-child, html[data-theme="dark"] .sidebar-footer button a, html[data-theme="dark"] .admin-mini-profile span, html[data-theme="dark"] .produit-detail-info .product-description-full, html[data-theme="dark"] #shopAddressDisplay, html[data-theme="dark"] #emptyState, html[data-theme="dark"] .product-location, html[data-theme="dark"] .product-description, html[data-theme="dark"] .modal-box p, html[data-theme="dark"] .notif-user-item em, html[data-theme="dark"] .notif-user-list-empty, html[data-theme="dark"] .notif-recipient-count, html[data-theme="dark"] .notif-admin-hint{ color:var(--km-text-dim) !important; } /* ---- 4) violet de marque (étaient en #3B1E63, #4a3a63...) ---- */ html[data-theme="dark"] .dem-lien-prix, html[data-theme="dark"] .dem-lien-ligne, html[data-theme="dark"] .dem-lien-note, html[data-theme="dark"] .dem-lien-close{ color:#c9b6ff !important; } /* ---- 5) succès / vert (étaient en #1c7a3e, #1e8e3e, #166534) ---- */ html[data-theme="dark"] .stock-badge.in, html[data-theme="dark"] .product-card > p:not(.description), html[data-theme="dark"] .product-livraison, html[data-theme="dark"] .panier-item-sous-total, html[data-theme="dark"] .status-message.success, html[data-theme="dark"] .notif-create-status.success, html[data-theme="dark"] .notif-user-selected, html[data-theme="dark"] .dem-lien-gain-principal strong, html[data-theme="dark"] .dem-lien-copie-confirmation{ color:#4ade80 !important; } /* ---- 6) erreur / rouge (étaient en #d32f2f, #c62828, #cc0c39, #991b1b, #b3261e, #ef4444, #7a2030) ---- */ html[data-theme="dark"] .stock-badge.out, html[data-theme="dark"] .status-message.error, html[data-theme="dark"] .warning-text, html[data-theme="dark"] .access-denied-box h1, html[data-theme="dark"] .action-btn.delete, html[data-theme="dark"] .btn-supprimer, html[data-theme="dark"] .btn-vider, html[data-theme="dark"] .danger-box h3, html[data-theme="dark"] .danger-box h3 i, html[data-theme="dark"] .dem-lien-erreur, html[data-theme="dark"] .notif-create-status.error, html[data-theme="dark"] .danger-text, html[data-theme="dark"] .prix-promo strong{ color:#ff8fa3 !important; } /* ---- 7) prix / ambre (étaient en #B12704, #8a6100, #92400e) ---- */ html[data-theme="dark"] .badge-bestseller, html[data-theme="dark"] .action-btn.edit, html[data-theme="dark"] .btn-recommander.ajouter, html[data-theme="dark"] .role-badge.vendeur, html[data-theme="dark"] .card p, html[data-theme="dark"] .produit-detail-info .product-price, html[data-theme="dark"] .product-price{ color:var(--km-gold-text) !important; }