/* ============================================================= SNAPSELLGO — user.css (child template de Cassiopeia) Source UNIQUE de vérité. CSS propre, variables, zéro !important. Chargé automatiquement en dernier par Cassiopeia. Palette validée : Crème & Noir épuré + orange marque. ============================================================= */ :root{ /* ===== PALETTE ===== */ --ssg-bg:#f7f5f1; --ssg-surface:#ffffff; --ssg-ink:#1a1a1a; --ssg-ink-2:#4a4a48; --ssg-muted:#9b9690; --ssg-line:#eceae5; --ssg-brand:#ea7318; --ssg-brand-2:#d4640f; --ssg-brand-soft:#fdebd9; --ssg-sage:#5f8a6a; --ssg-sage-soft:#e6efe8; --ssg-sand:#efe9e0; --ssg-radius:14px; --ssg-shadow:0 3px 12px rgba(0,0,0,.05); --ssg-shadow-hover:0 8px 22px rgba(0,0,0,.10); /* polices */ --ssg-font-title:'DM Serif Display',Georgia,serif; --ssg-font-ui:'DM Sans','Poppins',system-ui,sans-serif; /* override des variables Cassiopeia natives (Bootstrap) */ --bs-body-bg:var(--ssg-bg); --bs-body-color:var(--ssg-ink); --bs-primary:var(--ssg-brand); --bs-link-color:var(--ssg-brand); --bs-link-hover-color:var(--ssg-brand-2); --bs-border-radius:var(--ssg-radius); } /* ============================================================ ALIAS — tokens des anciens CSS megadeal (rebrand/custom/djcf) mappés vers la palette SnapSellGo. Permet de réutiliser le CSS SnapFeature/DJClassifieds importé plus bas SANS le réécrire, mais avec NOS couleurs (beige/orange au lieu de navy/gold). ============================================================ */ :root{ /* navy → encre charbon */ --ssg-navy:var(--ssg-ink); --ssg-navy-d:var(--ssg-ink); --ssg-navy-l:var(--ssg-ink-2); --p:var(--ssg-ink); --pd:var(--ssg-ink); --pxd:var(--ssg-ink); --red:var(--ssg-ink); /* gold/ambre → orange marque */ --ssg-gold:var(--ssg-brand); --ssg-gold-l:var(--ssg-brand-2); --am:var(--ssg-brand); /* fonds & surfaces */ --cream:var(--ssg-bg); --cream2:var(--ssg-sand); --white:var(--ssg-surface); --ssg-white:var(--ssg-surface); --ssg-badge:var(--ssg-brand-soft); /* textes */ --text:var(--ssg-ink); --ssg-text:var(--ssg-ink); --sub:var(--ssg-ink-2); --muted:var(--ssg-muted); --ssg-muted:var(--ssg-muted); /* bordures & lignes */ --border:var(--ssg-line); --ssg-border:var(--ssg-line); --light:var(--ssg-line); --green:var(--ssg-sage); /* ombre, rayon, transition, police */ --sh:var(--ssg-shadow); --r:var(--ssg-radius); --rs:8px; --tr:.22s ease; --f:var(--ssg-font-ui); /* === alias thème pickeenoo (DJClassifieds) → palette SnapSellGo === */ --color-rouge-piment:var(--ssg-brand); /* var(--ssg-brand) rouge → orange marque */ --color-orange-epice:var(--ssg-brand); --color-vert-coriandre:var(--ssg-sage); --color-blanc-coco:var(--ssg-bg); --color-text-primary:var(--ssg-ink); --color-text-secondary:var(--ssg-ink-2); --color-text-muted:var(--ssg-muted); --color-border:var(--ssg-line); --font-primary:var(--ssg-font-ui); --font-headings:var(--ssg-font-title); --transition-standard:.22s ease; --border-radius:var(--ssg-radius); --box-shadow-light:var(--ssg-shadow); --box-shadow-medium:var(--ssg-shadow); --box-shadow-strong:var(--ssg-shadow-hover); } /* Note: les polices (DM Serif Display, Poppins, DM Sans) sont chargées via dans le (override head du child) — plus fiable que @import. */ /* ---------- BASE : police de base sur le body (hérite proprement) ---------- PAS de !important agressif → les icônes FontAwesome ne sont jamais touchées. */ body{ background:var(--ssg-bg); color:var(--ssg-ink); font-family:var(--ssg-font-ui); } /* ---------- LAYOUT : pleine largeur, fond beige partout, pas de sidebar ---------- */ /* tous les conteneurs structurels en beige (élimine les bandes bleutées #edf0f9) */ .site, .body-innerwrapper, .grid-container, .site-grid, .header.full-width, .container-header.full-width{ background:var(--ssg-bg) !important; } .site-grid{ display:block !important; background:var(--ssg-bg); } /* === LARGEUR DU CONTENU === Par défaut (blog, articles, login CB, dashboard, fiches...) le contenu est CENTRÉ à 1280px max — sinon tout s'étale pleine page ("déstructuré"). La home + landing pages (SPPageBuilder) restent full-width (override + bas). */ .container-component{ width:100% !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; padding-left:20px !important; padding-right:20px !important; box-sizing:border-box !important; grid-column:1 / -1 !important; background:var(--ssg-bg); } /* SPPageBuilder = pages construites en pleine largeur (home, landings) */ body.com_sppagebuilder .container-component{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; } .container-sidebar-left, .container-sidebar-right{ display:none !important; } main{ background:var(--ssg-bg); } /* barre de stats homepage (trust-strip) en beige au lieu de blanc */ .trust-strip{ display:flex !important; align-items:center !important; justify-content:center !important; gap:2rem !important; flex-wrap:wrap !important; padding:.85rem 5% !important; background:var(--ssg-bg) !important; border-bottom:1px solid var(--ssg-line) !important; width:100vw !important; margin-left:calc(-50vw + 50%) !important; max-width:none !important; } .trust-item{ display:flex !important; align-items:center !important; gap:.4rem !important; font-family:var(--ssg-font-ui); font-size:.82rem !important; color:var(--ssg-ink-2) !important; white-space:nowrap; } .trust-item strong{ color:var(--ssg-brand) !important; font-weight:800; } .trust-sep{ width:1px !important; height:18px !important; background:var(--ssg-line) !important; flex-shrink:0; } @media(max-width:767px){ .trust-strip{ gap:.8rem !important; } .trust-sep{ display:none !important; } .trust-item{ font-size:.74rem !important; } } /* ============================================================ VIGNETTES CARTES CATÉGORIES (ssg-cc-*) — CENTRALISÉES CSS unique ici (avant: inline dispersé dans la homepage). Utilise les variables centrales → 1 changement = tout suit. ============================================================ */ .ssg-cc{ border-radius:var(--ssg-radius); overflow:hidden; box-shadow:var(--ssg-shadow); transition:transform .28s, box-shadow .28s; background:var(--ssg-surface); display:block; border:1px solid var(--ssg-line); } .ssg-cc:hover{ transform:translateY(-5px); box-shadow:var(--ssg-shadow-hover); } .ssg-cc-head{ position:relative; height:165px; overflow:hidden; } .ssg-cc-head img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s; } .ssg-cc:hover .ssg-cc-head img{ transform:scale(1.07); } .ssg-cc-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(26,26,26,.15) 0%, rgba(26,26,26,.82) 100%); } .ssg-cc-hcontent{ position:absolute; bottom:0; left:0; right:0; padding:.85rem 1.1rem; } .ssg-cc-dot{ display:inline-flex; align-items:center; gap:.28rem; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ssg-brand); margin-bottom:.28rem; } .ssg-cc-dot::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--ssg-brand); display:block; } .ssg-cc-head h3{ font-family:var(--ssg-font-title); font-size:1.25rem; font-weight:400; color:#fff; line-height:1.2; } .ssg-cc-body{ padding:.9rem 1.1rem; background:var(--ssg-surface); } .ssg-cc-desc{ font-family:var(--ssg-font-ui); font-size:.78rem; color:var(--ssg-ink-2); margin-bottom:.6rem; line-height:1.6; } .ssg-cc-stats{ display:flex; gap:1rem; margin-bottom:.7rem; } .ssg-cc-stat strong{ display:block; font-family:var(--ssg-font-ui); font-size:.95rem; font-weight:700; color:var(--ssg-ink); } .ssg-cc-stat span{ font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ssg-muted); } .ssg-cc-browse{ display:inline-flex; align-items:center; gap:.3rem; padding:.45rem 1rem; border-radius:8px; background:var(--ssg-brand); color:#fff; font-family:var(--ssg-font-ui); font-size:.75rem; font-weight:600; transition:background .2s; } .ssg-cc:hover .ssg-cc-browse{ background:var(--ssg-brand-2); } .ssg-cc-mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:105px 105px; gap:3px; background:var(--ssg-line); } .ssg-mp{ overflow:hidden; position:relative; background:linear-gradient(135deg,#efe9e0,#e6ded2); display:flex; align-items:center; justify-content:center; font-size:2rem; } .ssg-mp.tall{ grid-row:1/3; } .ssg-mp img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; } .ssg-cc:hover .ssg-mp img{ transform:scale(1.06); } .ssg-mp .ve{ display:none; } .mp-lbl{ position:absolute; bottom:0; left:0; right:0; padding:.24rem .45rem; background:linear-gradient(transparent,rgba(0,0,0,.55)); font-family:var(--ssg-font-ui); font-size:.6rem; font-weight:600; color:rgba(255,255,255,.92); } .mp-tag{ position:absolute; top:.32rem; left:.32rem; padding:.13rem .42rem; border-radius:4px; font-family:var(--ssg-font-ui); font-size:.57rem; font-weight:700; color:#fff; } .t-new{ background:var(--ssg-sage); } .t-sale{ background:var(--ssg-brand); } .t-rent{ background:var(--ssg-ink); } /* ============================================================ VIGNETTES DJ-CLASSIFIEDS (djcfm-*) — CENTRALISÉES + PALETTE Source: ancien djcfm.css (megadeal), adapté à la palette SnapSellGo. Style cohérent avec les vignettes snpsf/snpshop que tu adores. ============================================================ */ .djcfm-wrap{ width:100%; } /* VIGNETTES — compactes, calées sur la maquette palette2_final (4/row desktop, 2/row mobile) */ .djcfm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:1100px){ .djcfm-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:820px){ .djcfm-grid{ grid-template-columns:1fr 1fr; gap:10px; } } .djcfm-card{ background:var(--ssg-surface); border:1px solid var(--ssg-line); border-radius:14px; box-shadow:0 3px 12px rgba(0,0,0,.05); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s; position:relative; } .djcfm-card:hover{ border-color:var(--ssg-brand); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.1); } .djcfm-img-wrap{ position:relative; height:140px; overflow:hidden; flex-shrink:0; } @media(max-width:820px){ .djcfm-img-wrap{ height:120px; } } .djcfm-img-link{ display:block; height:100%; } .djcfm-img-link img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; } .djcfm-card:hover .djcfm-img-link img{ transform:scale(1.04); } /* badge type (SALE/RENT/Hot) — palette */ .djcfm-badge{ position:absolute; top:10px; left:10px; z-index:5; } .djcfm-badge .type_button{ display:inline-block !important; background:var(--ssg-ink) !important; color:#fff !important; border:none !important; border-radius:18px !important; font-family:var(--ssg-font-ui) !important; font-size:.6rem !important; font-weight:600 !important; padding:3px 10px !important; text-transform:uppercase; letter-spacing:.04em; } /* bouton favori — CŒUR BLANC sur cercle ROUGE (cohérent partout). Le détail position/taille est géré par le bloc dé-scopé .djcfm-tools en fin de fichier ; ici on définit juste le cœur ::before. */ .djcfm-fav .fav_box{ display:block; } .djcfm-fav .fav_box a{ display:flex; } .djcfm-fav .fav_icon:hover{ transform:scale(1.08); } /* NB: le cœur (SVG blanc) est dessiné par le système .fav_box .fav_icon_link::before (bloc ~2019, SVG en background-image). On ne met PAS de ::before Unicode ici (ça créait un conflit → cercle vide). */ .djcfm-body{ padding:11px 12px 4px; display:flex; flex-direction:column; flex:1; } /* titre vignette — compact (maquette: 12.5px) */ .djcfm-title{ font-family:var(--ssg-font-ui); font-size:12.5px; font-weight:600; color:var(--ssg-ink); line-height:1.3; margin:0 0 .35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .djcfm-title a{ color:var(--ssg-ink) !important; text-decoration:none !important; font-family:var(--ssg-font-ui); font-size:12.5px; font-weight:600; } .djcfm-title a:hover{ color:var(--ssg-brand) !important; } /* (Ancien bloc "meta texte" pills retiré — remplacé par les vraies pills BULLES vert sage dé-scopées en fin de fichier, appliquées partout.) */ .djcfm-meta-pills{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 .4rem; } /* footer prix — empilé proprement (plus de prix collés côte à côte) */ .djcfm-footer{ padding:.2rem 12px 11px; margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; } .djcfm-price-block{ display:flex; flex-direction:column; gap:.2rem; width:100%; } /* label "Buy Now:" discret au-dessus */ .djcfm-buynow-lbl{ font-family:var(--ssg-font-ui); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ssg-muted); } /* prix principal (Buy Now) — gros, orange, bien visible */ .djcfm-price{ font-family:var(--ssg-font-ui) !important; font-size:15px !important; font-weight:700 !important; color:var(--ssg-ink) !important; font-style:normal !important; display:inline-flex; align-items:baseline; gap:2px; } .djcfm-price .price_unit{ font-size:13px; color:var(--ssg-muted); font-weight:600; } /* prix d'enchère/négociable (2e prix) — encadré discret, en dessous, pas collé */ .djcfm-price.djcfm-auction{ font-size:.78rem !important; font-weight:600 !important; color:var(--ssg-brand) !important; background:var(--ssg-brand-soft); padding:2px 9px; border-radius:18px; margin-top:2px; display:inline-flex; width:fit-content; } .djcfm-price.djcfm-auction .price_unit{ color:var(--ssg-brand); } /* MARTEAU d'enchère 🔨 visible (icône FontAwesome gavel) */ .djcfm-auction .auction_icon{ display:inline-block; } .djcfm-auction .auction_icon::before{ content:"\f0e3"; /* fa-gavel (marteau) */ font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.72rem; color:var(--ssg-brand); margin-right:3px; } /* COMPTE À REBOURS enchère ("3 days left") */ .djcfm-countdown{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-family:var(--ssg-font-ui); font-size:.66rem; font-weight:600; color:#c0392b; /* rouge discret = urgence */ } .djcfm-clock::before{ content:"\f017"; /* fa-clock */ font-family:"Font Awesome 6 Free"; font-weight:400; font-size:.66rem; } .djcfm-negotiable{ font-family:var(--ssg-font-ui); font-size:.66rem; color:var(--ssg-muted); font-weight:400; } .djcfm-verified{ color:var(--ssg-sage); } /* ---------- COHÉRENCE TEXTE : police UI + TAILLE 13px (comme vignettes) ---------- */ /* infos article (Details / Category / Hits) — étaient en 16px, trop gros */ .article-info, .article-info dt, .article-info dd, .article-info-term, .category-name, .hits, .published, .createdby, /* formulaires login (Remember Me, labels, champs) */ .form-check-label, .control-label, .form-label, .controls, .mod-login label, #cblogin label, .cb_template label, .cbMainTable, .cb_template, .cbLoginTable td, /* contenu d'article générique */ .item-page > p, .item-page > div:not([class*="snpsf"]):not([class*="sppb"]), .com-content-category-blog, .blog-item p{ font-family:var(--ssg-font-ui) !important; font-size:13px !important; /* harmonisé avec les vignettes (avant 16px) */ } /* ⚠️ mais les icônes DANS ces zones gardent FontAwesome (nom exact) */ .article-info .icon-fw, .article-info [class*="icon-"], .article-info i, .form-check-label [class*="icon-"], .cb_template [class*="icon-"], .cb_template i{ font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important; font-weight:900 !important; } /* SEULS les titres gardent la serif DM Serif Display */ h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4, .navbar-brand .brand-logo span{ font-family:var(--ssg-font-title) !important; } h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:var(--ssg-font-title); color:var(--ssg-ink); font-weight:400; /* DM Serif n'a que 400 — pas de gras lourd */ letter-spacing:-.01em; /* resserre légèrement */ line-height:1.2; } /* tailles maîtrisées (DM Serif Display est imposant → on le calme) */ h1,.h1{ font-size:1.9rem; } /* ~30px au lieu de ~40px */ h2,.h2{ font-size:1.5rem; } /* ~24px */ h3,.h3{ font-size:1.2rem; } /* ~19px */ h4,.h4{ font-size:1.05rem; } /* titre d'article Joomla (com_content) — souvent plus gros par défaut */ .com-content-article__title, .page-header h1, .item-page h1, .article-header h1, .contentheading{ font-size:1.9rem; font-weight:400; } /* ---------- LIENS (cohérence globale — même typo partout, comme les vignettes) ---------- */ a{ color:var(--ssg-brand); font-family:var(--ssg-font-ui); text-decoration:none; } a:hover{ color:var(--ssg-brand-2); text-decoration:none; } /* force la police UI sur les liens des modules/contenus (login, footer, articles...) */ .item-page a, .moduletable a, .mod-list a, .sppb-addon-content a, .com-content-article a, form a, .mod-login a, #cblogin a, .cb_template a{ font-family:var(--ssg-font-ui) !important; text-decoration:none !important; } /* liens utilitaires (CB Login : mot de passe oublié, sign up...) : MÊME taille que les vignettes (13px), cohérence totale */ .mod-login a, #cblogin a, .cb_template a, .moduletable a, .cbMomentaryLink, a.cbMomentaryLink{ font-family:var(--ssg-font-ui) !important; font-size:13px !important; font-weight:500 !important; line-height:1.6 !important; } /* ---------- BOUTONS (forme unifiée : coins 8px, comme Sign In) ---------- Style 1 = PLEIN orange (actions principales : Login, Rate, Open my store) Style 2 = BORDURE (secondaires : Sign In, Browse) */ .btn, button, input[type="submit"], input[type="button"], .btn-primary, .btn-secondary, .btn-success, .btn-info, .button, a.btn, .readmore a, .sppb-btn{ border-radius:8px !important; font-family:var(--ssg-font-ui) !important; font-weight:600 !important; font-size:13.5px !important; /* même taille que Sign In / menu */ padding:8px 16px !important; /* compact, comme Sign In */ letter-spacing:.2px; transition:.15s; border-width:1.5px; line-height:1.4 !important; width:auto !important; /* pas de boutons pleine largeur */ } /* PLEIN orange = action principale */ .btn-primary, .btn-success, input[type="submit"], .sppb-btn-primary, button[type="submit"], .button{ background:var(--ssg-brand) !important; border-color:var(--ssg-brand) !important; color:#fff !important; } .btn-primary:hover, .btn-success:hover, input[type="submit"]:hover, button[type="submit"]:hover, .button:hover{ background:var(--ssg-brand-2) !important; border-color:var(--ssg-brand-2) !important; color:#fff !important; } /* BORDURE = secondaire */ .btn-outline-primary, .btn-secondary, .btn-outline-secondary{ border:1.5px solid var(--ssg-ink) !important; color:var(--ssg-ink) !important; background:transparent !important; } .btn-outline-primary:hover, .btn-secondary:hover, .btn-outline-secondary:hover{ background:var(--ssg-ink) !important; color:#fff !important; } /* ---------- TOPBAR PROMO (SNAP4FREE) — palette charbon + orange ---------- */ #ssg-promo-banner{ width:100%; background:var(--ssg-ink); /* charbon (avant: bleu) */ display:flex; align-items:center; justify-content:center; font-family:var(--ssg-font-ui); padding:9px 16px; box-sizing:border-box; } #ssg-promo-banner-inner{ max-width:1200px; width:100%; display:flex; align-items:center; gap:12px; flex-wrap:nowrap; } #ssg-promo-text{ flex:1; font-size:13.5px; font-weight:600; color:#f3ede3; white-space:nowrap; text-align:center; } #ssg-promo-text span{ background:var(--ssg-brand); border:none; color:#fff; padding:2px 9px; border-radius:6px; letter-spacing:.5px; margin-left:4px; font-weight:600; } #ssg-promo-btn{ font-size:13px; font-weight:600; background:var(--ssg-brand); color:#fff; padding:6px 16px; border-radius:20px; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background .2s; } #ssg-promo-btn:hover{ background:var(--ssg-brand-2); } @media(max-width:600px){ #ssg-promo-banner-inner{ flex-wrap:wrap; gap:4px; } #ssg-promo-text{ white-space:normal; font-size:12.5px; } } /* ---------- HEADER / TOPBAR ---------- */ .container-topbar, .ssg-topbar{ background:var(--ssg-ink); color:#f0ece6; } .ssg-topbar .code{ background:var(--ssg-brand); color:#fff; padding:2px 9px; border-radius:6px; font-weight:600; } /* header en beige (cohérent avec le fond de page), pas blanc */ .grid-child.container-header, header.header{ background:var(--ssg-bg); border-bottom:1px solid var(--ssg-line); } .logo a{ font-family:var(--ssg-font-title); font-weight:700; color:var(--ssg-ink); } /* ---------- HEADER COMPACT ---------- Ligne 1 : logo (GAUCHE) + menu principal (DROITE) alignés Ligne 2 : mega-menu catégories (centré, pleine largeur) */ /* toute la bande header en beige PLAT (pas d'ombre, pas de bordure, pas de fond bleuté) */ .header.container-header.full-width, header.header, .container-header{ background:var(--ssg-bg) !important; box-shadow:none !important; border:none !important; border-bottom:none !important; } .container-header-right, .container-nav, .navbar-brand{ background:transparent !important; box-shadow:none !important; } /* le wrapper de la zone header (souvent un fond/ombre Cassiopeia) */ .grid-child.container-header, .site-grid > .container-header{ background:var(--ssg-bg) !important; box-shadow:none !important; } /* header : grille interne centrée, fond beige pleine largeur */ header.header.container-header{ display:grid; grid-template-columns:auto 1fr auto; /* logo | menu | signin */ grid-template-areas: "logo nav signin" "mega mega mega"; align-items:center; width:100%; max-width:1280px; margin:0 auto; padding:10px 20px; gap:6px 24px; background:var(--ssg-bg); } /* bouton Sign In (cohérent avec le menu) */ .ssg-signin-wrap{ grid-area:signin; } .ssg-signin-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ssg-font-ui); font-weight:600; font-size:13.5px; color:var(--ssg-ink) !important; text-decoration:none; padding:8px 16px; border-radius:8px; border:1.5px solid var(--ssg-ink); transition:.15s; white-space:nowrap; } .ssg-signin-btn:hover{ background:var(--ssg-ink); color:#fff !important; } .ssg-signin-btn .fa-user{ font-size:13px; } header.header .grid-child{ margin:0; padding:0; } /* logo : colonne gauche, même taille que H1 */ .navbar-brand{ grid-area:logo; margin:0; } .navbar-brand .brand-logo span{ font-family:var(--ssg-font-title); font-size:26px; font-weight:400; color:var(--ssg-ink); letter-spacing:-.01em; line-height:1; } /* === SNAPSELLGO : logo image dans le header (logo_ssg1.png 230x90) === */ .navbar-brand{ display:flex !important; align-items:center !important; } .navbar-brand .brand-logo{ display:inline-flex !important; align-items:center !important; } .navbar-brand .brand-logo img, .navbar-brand img.logo{ height:56px !important; width:auto !important; max-width:none !important; display:block !important; object-fit:contain !important; } @media (max-width:1024px){ .navbar-brand .brand-logo img, .navbar-brand img.logo{ height:46px !important; } } @media (max-width:480px){ .navbar-brand .brand-logo img, .navbar-brand img.logo{ height:40px !important; } } /* menu : colonne droite */ .container-nav{ grid-area:nav; } /* mega-menu : 2e ligne, pleine largeur */ .container-header-right{ grid-area:mega; width:100%; } /* menu */ .navbar-nav .nav-link{ font-family:var(--ssg-font-ui); font-weight:500; color:var(--ssg-ink-2); } .navbar-nav .nav-link:hover, .navbar-nav .current > .nav-link{ color:var(--ssg-brand); } /* ---------- MENU PRINCIPAL (mod-menu horizontal) ---------- */ .container-nav{ padding:0; } #mod-menu278, .mod-menu.mod-list, ul.mod-menu{ list-style:none !important; margin:0 !important; padding:8px 0 !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; opacity:1 !important; visibility:visible !important; } .mod-menu .nav-item{ position:relative; list-style:none; } .mod-menu .nav-item > a, .mod-menu li > a, #mod-menu278 li a{ font-family:var(--ssg-font-ui) !important; font-weight:600 !important; font-size:13.5px !important; color:var(--ssg-ink) !important; text-decoration:none !important; padding:8px 14px !important; border-radius:8px; display:block !important; letter-spacing:.3px; text-transform:uppercase; transition:.15s; white-space:nowrap; opacity:1 !important; visibility:visible !important; } .mod-menu .nav-item > a:hover, .mod-menu .nav-item.current > a, .mod-menu .nav-item.active > a, #mod-menu278 li a:hover{ color:var(--ssg-brand) !important; background:var(--ssg-brand-soft); } /* ---------- VIGNETTES (classes snpsf- du site) ---------- */ .snpsf-card, .snpsf-fshop-card{ background:var(--ssg-surface); border:1px solid var(--ssg-line); border-radius:var(--ssg-radius); box-shadow:var(--ssg-shadow); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .snpsf-card:hover, .snpsf-fshop-card:hover{ transform:translateY(-2px); box-shadow:var(--ssg-shadow-hover); } .snpsf-cimg{ position:relative; } .snpsf-cbody{ padding:11px 12px; } .snpsf-ctitle{ font-family:var(--ssg-font-ui); font-weight:600; font-size:13px; line-height:1.3; color:var(--ssg-ink); } .snpsf-cmeta{ color:var(--ssg-ink-2); font-size:12px; font-weight:500; margin:5px 0 8px; } .snpsf-cprice{ font-family:var(--ssg-font-ui); font-weight:600; font-size:15px; color:var(--ssg-ink); letter-spacing:-.2px; } .snpsf-ccur{ color:var(--ssg-muted); font-weight:600; font-size:15px; } .snpsf-cprice-free{ color:var(--ssg-sage); font-weight:600; } /* badges cartes */ .snpsf-clbl, .snpsf-cbadge{ display:inline-block; font-family:var(--ssg-font-ui); font-size:10px; font-weight:600; letter-spacing:.3px; padding:3px 10px; border-radius:18px; background:var(--ssg-ink); color:#fff; white-space:nowrap; } .snpsf-cimg .snpsf-clbl, .snpsf-cimg .snpsf-cbadge{ position:absolute; top:8px; left:8px; } .snpsf-clbl.new, .snpsf-cbadge.new{ background:var(--ssg-sage); } .snpsf-clbl.vip, .snpsf-cbadge.vip{ background:var(--ssg-brand); } .snpsf-clbl.featured, .snpsf-cbadge.featured{ background:var(--ssg-ink); } /* ---------- BADGES généraux ---------- */ .badge.bg-primary, .badge-primary{ background:var(--ssg-brand) !important; } /* ---------- SECTION TITLES ---------- */ .snpsf-section-title, .sg-mega-head-text{ font-family:var(--ssg-font-title); font-weight:600; color:var(--ssg-ink); } /* ---------- MEGA-MENU header-right : centrer la barre catégories ---------- */ .container-header-right{ display:flex; justify-content:center; } .container-header-right .sg-nav, .container-header-right .sg-nav-inner{ margin-left:auto; margin-right:auto; justify-content:center; } .container-header-right .moduletable{ width:100%; } /* neutralise le padding-top:75px de la section SPPageBuilder du mega-menu (vestige de l'ancienne promo position:fixed sur megadeal) */ .container-header-right .sp-page-builder .page-content > .sppb-section, .container-header-right .sp-page-builder .page-content [id^="section-id-"]{ padding-top:0 !important; padding-bottom:0 !important; } /* ---------- FOOTER ---------- */ .container-footer, footer.footer{ background:var(--ssg-ink); color:#cfc9c0; padding:0; } .container-footer a, footer.footer a{ color:#e8e2d8; text-decoration:none; } .container-footer a:hover{ color:var(--ssg-brand); } /* contenu footer centré dans un container */ .ssg-footer-menu, .ssg-footer-copyright{ max-width:1200px; margin:0 auto; padding:0 20px; } .ssg-footer-copyright{ border-top:1px solid rgba(255,255,255,.08); margin-top:8px; padding-top:16px; padding-bottom:20px; } /* titres de colonnes footer */ .container-footer h3, .container-footer h4, .container-footer .sppb-addon-title{ font-family:var(--ssg-font-ui) !important; font-size:13px !important; font-weight:600 !important; letter-spacing:1px; text-transform:uppercase; color:#fff !important; margin-bottom:12px; } .container-footer .sppb-addon-content a{ font-family:var(--ssg-font-ui); font-size:13.5px; } /* enlève le soulignement des liens footer (plus propre) */ .container-footer .sppb-addon-content a{ text-decoration:none; } /* MASQUE le crédit Joomla (footer2 = "Joomla! is Free Software...") */ .container-footer .mod-footer .footer2, .mod-footer .footer2{ display:none !important; } .container-footer .mod-footer .footer1, .mod-footer .footer1{ color:#9b9690; font-size:13px; font-family:var(--ssg-font-ui); white-space:nowrap; } /* ---------- CARTES / CONTENT ---------- */ .card{ border:1px solid var(--ssg-line); border-radius:var(--ssg-radius); box-shadow:var(--ssg-shadow); } /* ============================================================ HOMEPAGE (page 483) — CENTRALISÉE + PALETTE SNAPSELLGO Migré depuis le