/* ============================================================ IciOnDeal — Design System Premium Inspiré : CodConKError Couleurs : #0b1a2b + #00d084 Polices : Poppins (titres/boutons) + Roboto (texte) ============================================================ */ /* ── Google Fonts ── Chargé via dans le de chaque page (pas @import ici) : un @import CSS est invisible au préchargeur du navigateur et force une chaîne série au lieu d'un téléchargement en parallèle avec le reste des feuilles de style. */ /* ============================================================ VARIABLES GLOBALES IciOnDeal ============================================================ */ :root { /* Palette principale */ --ds-primary: #00d084; --ds-primary-dark: #008138; --ds-primary-light: #34e8a0; --ds-primary-soft: rgba(0,208,132,.10); --ds-primary-shadow: rgba(0,208,132,.25); --ds-dark: #0b1a2b; --ds-dark-2: #0f2236; --ds-dark-muted: rgba(11,26,43,.65); /* Texte */ --ds-text: #111111; --ds-text-body: #555555; --ds-text-muted: #888888; --ds-text-light: #ffffff; /* Prix */ --ds-price: #00d084; --ds-price-old: #999999; /* Fonds */ --ds-bg: #ffffff; --ds-bg-section: #fafafa; --ds-bg-dark: #0b1a2b; /* Bordures */ --ds-border: #e8e8e8; --ds-border-light: #efefef; --ds-border-hover: #cfcfcf; --ds-border-input: #d9d9d9; --ds-border-focus: #0b1a2b; --ds-border-error: #e53935; --ds-border-success: #2e7d32; /* Rayons */ --ds-radius-xs: 8px; --ds-radius-sm: 10px; --ds-radius: 12px; --ds-radius-md: 14px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-radius-full: 9999px; /* Ombres */ --ds-shadow-xs: 0 1px 3px rgba(0,0,0,.04); --ds-shadow-sm: 0 2px 8px rgba(0,0,0,.05); --ds-shadow-md: 0 4px 16px rgba(0,0,0,.06); --ds-shadow-lg: 0 8px 24px rgba(0,0,0,.10); --ds-shadow-xl: 0 12px 32px rgba(0,0,0,.12); --ds-shadow-xxl: 0 20px 60px rgba(0,0,0,.18); --ds-shadow-btn: 0 6px 18px rgba(0,208,132,.25); --ds-shadow-btn-hov: 0 10px 24px rgba(0,208,132,.35); --ds-shadow-img: 0 8px 24px rgba(0,0,0,.08); --ds-shadow-field: 0 2px 8px rgba(0,0,0,.05); /* Espacement */ --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 24px; --ds-sp-6: 32px; --ds-sp-7: 48px; --ds-sp-8: 64px; --ds-sp-9: 80px; /* Layout */ --ds-max-w: 1200px; --ds-px-desktop: 40px; --ds-px-mobile: 20px; /* Transitions */ --ds-transition: .25s ease; } /* Mode sombre — [data-theme="dark"] posé sur par themeInitScript() (config.php). --ds-dark/--ds-bg-dark/--ds-text-light restent inchangés : ce sont des tokens "surface sombre"/"texte clair sur fond sombre" déjà utilisés tels quels en thème clair (ex: bouton principal, bandeaux foncés) — les redéfinir casserait leur sens dans les deux thèmes. */ :root[data-theme="dark"] { --ds-text: #f0f1f3; --ds-text-body: #c7c9ce; --ds-text-muted: #9a9fa8; --ds-bg: #1a1d24; --ds-bg-section: #171a21; --ds-border: #2a2e37; --ds-border-light: #262a32; --ds-border-hover: #3a3f4a; --ds-border-input: #3a3f4a; --ds-border-focus: #00d084; } /* ============================================================ TYPOGRAPHIE GLOBALE ============================================================ */ body { font-family: 'Roboto', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.7; color: var(--ds-text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: var(--ds-text); line-height: 1.2; font-weight: 700; } h1 { font-size: 40px; font-weight: 700; margin-bottom: 20px; margin-top: 10px; } h2 { font-size: 32px; font-weight: 700; margin-bottom: 18px; } h3 { font-size: 26px; font-weight: 600; margin-bottom: 14px; } h4 { font-size: 20px; font-weight: 600; margin-bottom: 10px; } p { font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.7; color: var(--ds-text-body); margin-bottom: 16px; } a { color: inherit; text-decoration: none; transition: color var(--ds-transition); } /* ============================================================ CONTENEUR & SECTIONS ============================================================ */ .container, .fp-wrap, .page-wrap, .boutique-wrap, .main-content { max-width: var(--ds-max-w); margin: 0 auto; padding: 0 var(--ds-px-desktop); } section { padding: var(--ds-sp-9) 0; } /* ============================================================ NAVBAR — surcharge design système ============================================================ */ .navbar { background: rgba(255,255,255,.97) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--ds-border) !important; border-image: none !important; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .navbar__nav a { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: var(--ds-text); transition: color var(--ds-transition); } .navbar__nav a:hover, .navbar__nav a.active { color: var(--ds-primary) !important; } /* ============================================================ PROMO BANNER ============================================================ */ .promo-banner { background: linear-gradient(90deg, var(--ds-dark) 0%, var(--ds-primary) 60%, var(--ds-dark) 100%) !important; } /* ============================================================ BOUTONS — Système complet ============================================================ */ /* Bouton primaire */ .btn, .btn-primary, button.btn, .fp-btn-order, .bn-submit, .sb-btn--order, .fp-rel-card__btn, input[type="submit"]:not(.search-btn), .wc-add-to-cart, .btn-add-order { display: inline-flex !important; justify-content: center !important; align-items: center !important; height: 56px; padding: 18px 32px; border: none !important; border-radius: var(--ds-radius) !important; background: var(--ds-primary) !important; color: var(--ds-dark) !important; font-family: 'Poppins', sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3; cursor: pointer; box-shadow: var(--ds-shadow-btn) !important; transition: background var(--ds-transition), box-shadow var(--ds-transition), transform var(--ds-transition) !important; text-decoration: none; white-space: nowrap; } .btn:hover, .btn-primary:hover, .fp-btn-order:hover, .bn-submit:hover, .sb-btn--order:hover, .fp-rel-card__btn:hover, input[type="submit"]:not(.search-btn):hover { background: var(--ds-primary-dark) !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--ds-shadow-btn-hov) !important; } .btn:active, .btn-primary:active { transform: translateY(0); box-shadow: var(--ds-shadow-btn) !important; } .btn:focus-visible, .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ds-primary-soft), var(--ds-shadow-btn) !important; } .btn:disabled, .btn-primary:disabled, .fp-btn-order:disabled { background: #d8d8d8 !important; color: #888 !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; } /* Bouton secondaire (outline) */ .btn-outline, .btn-secondary, .sb-btn--cart { background: transparent !important; border: 1.5px solid var(--ds-primary) !important; color: var(--ds-primary) !important; box-shadow: none !important; font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; } .btn-outline:hover, .btn-secondary:hover, .sb-btn--cart:hover { background: var(--ds-primary-soft) !important; transform: translateY(-1px); } /* Bouton panier sticky */ .sb-btn--order { background: var(--ds-primary) !important; color: var(--ds-dark) !important; height: 46px; font-size: 15px !important; } .sb-btn--cart { height: 46px; padding: 10px 16px !important; font-size: 14px !important; } /* Bouton WhatsApp */ .fp-wa, .btn-whatsapp { border-color: #25D366 !important; color: #128C7E !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; border-radius: var(--ds-radius) !important; } /* ============================================================ INPUTS, CHAMPS DE FORMULAIRE ============================================================ */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), textarea, select, .bn-field, .fp-field { width: 100%; padding: 14px 18px; font-family: 'Roboto', sans-serif; font-size: 16px; border: 1px solid var(--ds-border-input) !important; border-radius: var(--ds-radius-sm) !important; background: var(--ds-bg); color: var(--ds-text); transition: border-color var(--ds-transition), box-shadow var(--ds-transition); box-shadow: var(--ds-shadow-field); outline: none; box-sizing: border-box; -webkit-appearance: none; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):focus, textarea:focus, select:focus, .bn-field:focus, .fp-field:focus { border-color: var(--ds-dark) !important; box-shadow: 0 0 0 4px rgba(11,26,43,.08), var(--ds-shadow-field) !important; } input::placeholder, textarea::placeholder, .bn-field::placeholder, .fp-field::placeholder { color: var(--ds-text-muted); } /* Quantité */ .fp-qty-ctrl, .bn-qty-ctrl { border: 1px solid var(--ds-border-input) !important; border-radius: var(--ds-radius-sm) !important; overflow: hidden; } .fp-qty-val, .bn-qty-val { height: 50px; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 700; } .fp-qty-btn, .bn-qty-btn { width: 42px; height: 50px; font-size: 1.2rem; } /* ============================================================ CARTES PRODUIT — design system ============================================================ */ .product-card, .deal-card, .fp-rel-card, .upsell-card { background: var(--ds-bg); border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; overflow: hidden; box-shadow: var(--ds-shadow-md); transition: transform var(--ds-transition), box-shadow var(--ds-transition); } .product-card:hover, .deal-card:hover, .fp-rel-card:hover, .upsell-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); } /* Nom produit dans la carte */ .product-card__name, .deal-card__name, .fp-rel-card__name { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--ds-text) !important; line-height: 1.4; } /* Prix dans les cartes */ .product-card__price-row .price-display, .product-card__price-row .price-fcfa, .deal-card__price .price-display, .fp-rel-card__price .price-display { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; color: var(--ds-primary) !important; } /* ============================================================ PRIX — design system ============================================================ */ .fp-price, .price, .price-display .price-fcfa, .price-main { font-family: 'Poppins', sans-serif !important; font-size: 36px !important; font-weight: 700 !important; color: var(--ds-primary) !important; line-height: 1.2; } .fp-price-old, .old-price, .price-old { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 500; color: var(--ds-price-old); text-decoration: line-through; } /* Badges remise */ .fp-badge--off, .pc-disc-pct, .fp-rel-card__disc { background: rgba(0,208,132,.12) !important; color: var(--ds-primary-dark) !important; font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: var(--ds-radius-full) !important; } /* ============================================================ CARTES GÉNÉRIQUES (blocs info, garanties, etc.) ============================================================ */ .card, .fp-gcard-v2, .fp-feat-card, .fp-use-card, .fp-step-card, .rv-section, .fp-qa, .fp-related, .fp-pdp-block, .fp-tabs-wrap { background: var(--ds-bg); border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-md); padding: 24px; } .card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); } /* ============================================================ IMAGES ============================================================ */ .product-card__img, .deal-card__img, .fp-rel-card__img img { border-radius: 0; transition: transform .3s ease; } .pg-track-wrap { box-shadow: var(--ds-shadow-img); } /* ============================================================ BADGES / ÉTIQUETTES ============================================================ */ .badge, .fp-badge, .pc-badge, .rv-verified { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--ds-radius-full); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; } .fp-badge--liv, .rv-verified { background: var(--ds-primary-soft) !important; color: var(--ds-primary-dark) !important; } .pc-badge--bestseller { background: var(--ds-primary) !important; color: var(--ds-dark) !important; } /* ============================================================ AVIS CLIENTS ============================================================ */ .rv-section { padding: 24px; border-radius: var(--ds-radius-lg) !important; } .rv-card { border: 1px solid #f1f1f1 !important; border-radius: var(--ds-radius-md) !important; padding: 20px; box-shadow: var(--ds-shadow-sm); } .rv-card-name, .fp-rev-name { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ds-text); } .rv-avg, .fp-rev-score__num { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--ds-text); } .rv-avg-stars, .fp-rev-stars, .rv-card-stars, .fp-rating__stars { color: #f59e0b !important; } /* Bouton publier avis */ .rv-pub-btn { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; background: var(--ds-primary) !important; color: var(--ds-dark) !important; border-radius: var(--ds-radius) !important; } .rv-pub-btn:hover { background: var(--ds-primary-dark) !important; color: #fff !important; } /* ============================================================ Q&A / FAQ — accordéon ============================================================ */ .fp-qa, details { border: 1px solid #eaeaea !important; border-radius: var(--ds-radius) !important; padding: 20px; margin-bottom: 16px; } .fp-qa h2, .fp-qa-q { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ds-text); } .fp-qa-q::before { color: var(--ds-primary) !important; font-weight: 800; } .fp-qa-a { font-family: 'Roboto', sans-serif; font-size: 15px; color: var(--ds-text-body); line-height: 1.7; } details summary { font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; color: var(--ds-text); } /* ============================================================ GRILLES — toutes les sections avec sous-sections en grille ============================================================ */ /* Grille générique 2 colonnes */ .ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Grille générique 3 colonnes */ .ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Grille générique 4 colonnes */ .ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* Features / avantages en grille 2 colonnes */ .fp-feat-grid, .fp-use-grid, .features-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* Steps en grille 3 colonnes */ .fp-steps-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } /* Specs en grille */ .fp-specs-centered { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; } /* Garanties en grille 2 colonnes */ .fp-guarantee-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* Produits similaires / populaires en grille */ .fp-rel-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } /* Section trust en grille */ .fp-trust { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; text-align: center; } .fp-trust-item { border-left: none !important; padding: 12px !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius) !important; flex-direction: column !important; display: flex; align-items: center; gap: 6px; } /* Feat blocks en grille */ .fp-feat-blocks { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; } /* ============================================================ TABLES ============================================================ */ table { width: 100%; border-collapse: collapse; } table td, table th { padding: 14px 16px; border-bottom: 1px solid var(--ds-border); font-family: 'Roboto', sans-serif; font-size: 15px; } table th { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ds-text); background: var(--ds-bg-section); } /* ============================================================ FOOTER ============================================================ */ .footer, footer { background: var(--ds-bg-section) !important; border-top: 1px solid var(--ds-border); padding: 60px 0 !important; font-family: 'Roboto', sans-serif; font-size: 15px; color: var(--ds-text-body); } .footer__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; max-width: var(--ds-max-w); margin: 0 auto; padding: 0 var(--ds-px-desktop); } .footer__legal { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .footer__legal a { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: var(--ds-text-body); transition: color var(--ds-transition); } .footer__legal a:hover { color: var(--ds-primary); } .footer__copy { font-size: 14px; color: var(--ds-text-muted); margin-bottom: 0; } .footer__social { display: flex; gap: 12px; align-items: center; } .footer__social-link { width: 38px; height: 38px; border-radius: var(--ds-radius-xs); border: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: center; transition: background var(--ds-transition), border-color var(--ds-transition); } .footer__social-link:hover { background: var(--ds-primary-soft); border-color: var(--ds-primary); } .footer__social-link svg { width: 18px; height: 18px; fill: none; stroke: var(--ds-text-body); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--ds-transition); } .footer__social-link:hover svg { stroke: var(--ds-primary); } /* ============================================================ NAVBAR ACTIONS (panier, wishlist, etc.) ============================================================ */ .cart-count-badge, .navbar__cart-count { background: var(--ds-primary) !important; color: var(--ds-dark) !important; font-family: 'Poppins', sans-serif; font-weight: 700; } /* ============================================================ TITRES DE SECTION (eyebrow + h2) ============================================================ */ .fp-eyebrow, .section-eyebrow { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-primary) !important; } .fp-sec-h2, .fp-hero-h2, .section-title { font-family: 'Poppins', sans-serif !important; font-size: 32px; font-weight: 700; color: var(--ds-text) !important; line-height: 1.2; } /* ============================================================ BOTTOM-SHEET (panier / commande) — design système ============================================================ */ .bn-sheet { border-radius: 20px 20px 0 0; background: var(--ds-dark) !important; } .bn-head-title { font-family: 'Poppins', sans-serif; font-weight: 600; color: #fff; } .bn-form-title { font-family: 'Poppins', sans-serif; font-weight: 600; color: #fff; } .bn-qty-lbl { font-family: 'Poppins', sans-serif; font-weight: 600; } .bn-total-val { font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; color: var(--ds-primary) !important; } .bn-pay-lbl { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .04em; } .bn-pay-opt.on, .bn-pay-opt:hover { border-color: var(--ds-primary) !important; color: var(--ds-primary) !important; } .bn-deliv-btn--now { background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: var(--ds-dark) !important; font-family: 'Poppins', sans-serif; font-weight: 600; } .bn-deliv-btn:hover { border-color: var(--ds-primary) !important; color: var(--ds-primary) !important; } .bn-submit { background: var(--ds-primary) !important; color: var(--ds-dark) !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; border-radius: var(--ds-radius) !important; box-shadow: var(--ds-shadow-btn) !important; } .bn-submit:hover { background: var(--ds-primary-dark) !important; color: #fff !important; } /* ============================================================ STICKY BAR ============================================================ */ .sb-bar { background: var(--ds-dark) !important; border-top: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.25) !important; } .sb-btn--order { background: var(--ds-primary) !important; color: var(--ds-dark) !important; border-radius: var(--ds-radius) !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; box-shadow: var(--ds-shadow-btn) !important; } .sb-btn--cart { color: var(--ds-primary) !important; border-color: var(--ds-primary) !important; border-radius: var(--ds-radius) !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; } /* ============================================================ BREADCRUMB ============================================================ */ .fp-bc, .breadcrumb { font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--ds-text-muted); } /* ============================================================ PAGINATION ============================================================ */ .page-btn { font-family: 'Poppins', sans-serif; font-weight: 500; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-xs) !important; transition: all var(--ds-transition); } .page-btn.active, .page-btn:hover { background: var(--ds-primary) !important; color: var(--ds-dark) !important; border-color: var(--ds-primary) !important; } /* ============================================================ FILTRES / TAGS BOUTIQUE ============================================================ */ .filter-btn, .tag-btn, .fp-pill { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full); padding: 6px 16px; transition: all var(--ds-transition); cursor: pointer; } .filter-btn.active, .filter-btn:hover, .fp-pill--hi { background: var(--ds-primary-soft) !important; border-color: var(--ds-primary) !important; color: var(--ds-primary-dark) !important; } /* ============================================================ ICÔNES DE CONFIANCE (fp-trust) ============================================================ */ .fp-trust-ico { font-size: 1.25rem; } .fp-trust-item { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; color: var(--ds-text-body); } /* ============================================================ SECTIONS PDP SOMBRES ============================================================ */ .fp-feat-block { background: var(--ds-dark) !important; border-radius: var(--ds-radius-lg) !important; overflow: hidden; } .fp-feat-block__title { font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff; } .fp-feat-block__text { font-family: 'Roboto', sans-serif; color: rgba(255,255,255,.75); } .fp-cta-bottom { background: var(--ds-dark) !important; border-radius: var(--ds-radius-lg) !important; } .fp-cta-bottom__title { font-family: 'Poppins', sans-serif; font-weight: 900; } .fp-cta-bottom__btn { background: var(--ds-primary) !important; color: var(--ds-dark) !important; font-family: 'Poppins', sans-serif; font-weight: 700; border-radius: var(--ds-radius) !important; } .fp-cta-bottom__btn:hover { background: var(--ds-primary-dark) !important; color: #fff !important; } /* ============================================================ VARIANTES / SÉLECTEURS ============================================================ */ .fp-var-btn.on, .bn-var-btn.on { background: var(--ds-dark) !important; border-color: var(--ds-primary) !important; color: var(--ds-primary) !important; } .fp-pay-opt:has(input:checked) { border-color: var(--ds-dark) !important; background: var(--ds-dark) !important; color: #fff !important; } /* ============================================================ LIVRAISON BAR ============================================================ */ .fp-deliv { background: var(--ds-primary-soft) !important; border-color: rgba(0,208,132,.3) !important; border-radius: var(--ds-radius) !important; color: var(--ds-primary-dark) !important; } /* ============================================================ SECTION COMPATIBILITÉ ============================================================ */ .fp-section--compat { background: var(--ds-dark) !important; border-radius: var(--ds-radius-lg); } /* ============================================================ TITRE GALERIE ============================================================ */ .fp-gallery-title { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; } /* ============================================================ CARDS GARANTIES V2 ============================================================ */ .fp-gcard-v2__head { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; color: var(--ds-text) !important; } /* ============================================================ TOTAL BAR FICHE PRODUIT ============================================================ */ .fp-total__lbl { font-family: 'Roboto', sans-serif; color: var(--ds-text-muted); } .fp-total__val { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--ds-text); } /* ============================================================ MENTIONS VENDUS / QUALITÉ (cartes boutique) ============================================================ */ .pc-mention--sold { background: var(--ds-primary-soft) !important; color: var(--ds-primary-dark) !important; font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: var(--ds-radius-full); } /* ============================================================ TIMER PROMO ============================================================ */ .fp-promo-timer { font-family: 'Poppins', sans-serif; font-weight: 600; } /* ============================================================ EXPAND NAME BUTTON (cartes + galerie) ============================================================ */ .pc-name-btn, .fp-rel-name-btn, .fp-gallery-expand-btn { background: rgba(0,208,132,.15) !important; color: var(--ds-primary) !important; } .pc-name-btn:hover, .fp-rel-name-btn:hover, .fp-gallery-expand-btn:hover { background: rgba(0,208,132,.28) !important; } /* ============================================================ CONTACT PAGE — formulaire ============================================================ */ .contact-form, .form-section { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 40px; box-shadow: var(--ds-shadow-md); } /* ============================================================ WISHLIST / PANIER PAGES ============================================================ */ .panier-wrap, .wishlist-wrap { max-width: var(--ds-max-w); margin: 0 auto; padding: 40px var(--ds-px-desktop); } .cart-item, .wishlist-item { border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; padding: 20px; margin-bottom: 16px; box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-transition); } .cart-item:hover, .wishlist-item:hover { box-shadow: var(--ds-shadow-md); } /* ============================================================ EXIT POPUP / MODALES ============================================================ */ .modal, .exit-popup, .bn-sheet { box-shadow: var(--ds-shadow-xxl); } /* ============================================================ SHOW TOAST ============================================================ */ .toast { font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-xl); } .toast--success { background: var(--ds-primary) !important; color: var(--ds-dark) !important; } /* ============================================================ RESPONSIVE — MOBILE ============================================================ */ @media (max-width: 768px) { .container, .fp-wrap, .page-wrap, .boutique-wrap, .main-content { padding: 0 var(--ds-px-mobile); } section { padding: 50px 0; } h1 { font-size: 28px !important; margin-bottom: 16px; } h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } h4 { font-size: 18px !important; } p { font-size: 16px; } body { font-size: 16px; } /* Prix mobile */ .fp-price, .price-display .price-fcfa { font-size: 30px !important; } .fp-price-old, .old-price { font-size: 20px !important; } /* Boutons mobile */ .btn, .btn-primary, .fp-btn-order, .bn-submit { height: 52px !important; font-size: 17px !important; padding: 16px 24px !important; border-radius: var(--ds-radius) !important; } /* Grilles mobile — 1 colonne sauf 2 obligatoires */ .fp-feat-grid, .fp-use-grid, .fp-steps-grid, .fp-guarantee-grid, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr !important; } .fp-trust { grid-template-columns: 1fr !important; } .fp-specs-centered { grid-template-columns: repeat(2, 1fr) !important; } .ds-grid-2 { grid-template-columns: 1fr !important; } /* Footer mobile */ .footer__bar { grid-template-columns: 1fr !important; text-align: center; gap: 24px; } .footer__social { justify-content: center; } .footer__legal { justify-content: center; } /* Contact form */ .contact-form, .form-section { padding: 24px 20px; } } @media (min-width: 769px) and (max-width: 1024px) { h1 { font-size: 34px !important; } h2 { font-size: 28px !important; } .fp-feat-grid, .fp-use-grid { grid-template-columns: repeat(2, 1fr) !important; } .fp-steps-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 768px) { .fp-rel-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* Desktop : 6 cartes par ligne */ @media (min-width: 1024px) { .fp-rel-grid { grid-template-columns: repeat(6, 1fr) !important; } } /* ============================================================ TRANSITIONS GLOBALES ============================================================ */ a, button, .card, .product-card, .deal-card, .fp-rel-card { transition: all var(--ds-transition); } /* ============================================================ SCROLLBAR (Webkit) ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ds-bg-section); } ::-webkit-scrollbar-thumb { background: var(--ds-border-hover); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); } /* ============================================================ SÉLECTION DE TEXTE ============================================================ */ ::selection { background: var(--ds-primary-soft); color: var(--ds-dark); }