/* ============================================================ STEFANWEB - Thème « premium épuré » Direction artistique alignée sur stefanweb.bodev.fr : base noir/blanc/gris, typo Jura, majuscules espacées, arrondis quasi nuls, vert réservé aux micro-accents. Ce fichier est chargé par components/header.php sur toutes les pages publiques, APRÈS les styles inline du : ses règles gagnent la cascade à spécificité égale. Les composants inclus plus bas dans le (footer, product-card…) chargent leurs styles APRÈS ce fichier : pour eux, les overrides utilisent une spécificité renforcée ou !important. ============================================================ */ /* ---------- 1. Tokens : remap global des variables ---------- La plupart des pages pilotent leurs couleurs via --red/--black/etc. Redéfinir ces variables reskinne le site entier : ce qui était vert plein devient noir, les teintes rgba(92,146,78,…) codées en dur subsistent en touches discrètes - c'est l'accent voulu. */ :root { /* Surfaces « sombres » en gris foncé, jamais en noir pur */ --red: #4a4950; --red-dark: #3a393f; --red-d: #3a393f; /* --red-light sert d'accent SUR fond sombre : doit rester clair */ --red-light: #a5a6a9; --red-lighter: #f4f4f3; --black: #3a393d; --ink: #3a393d; --ink-2: #3a393d; --ink-3: #707173; --gray: #707173; --muted: #707173; --gray-light: #f8f8f7; --accent: #5c924e; --accent-dark: #4f8129; --red-italian: #5c924e; /* ==================================================================== GRIS DES BOUTONS / SURFACES PLEINES - LE SEUL ENDROIT À MODIFIER Pour éclaircir ou assombrir TOUS les boutons pleins, états actifs (filtres, pagination), CTA et panneaux gris du site : change ces deux valeurs. Tout le reste y est routé via var(--btn-surface). (gris clair ≈ #8e8e8e ; gris foncé ≈ #3f3e44 ; actuel = entre-deux) ==================================================================== */ --btn-surface: #5c924e; /* fond des boutons pleins / états actifs */ --btn-surface-hover: #4f8129; /* survol des boutons pleins */ /* Panneaux/sections sombres : anthracite Stefan (les boutons, eux, sont en vert via --btn-surface) */ --dark-surface: #4b4b4b; --hairline: #e7e7e5; --ring: none; /* ----- Refonte « doux arrondi » : courbes généreuses + ombres feutrées ----- */ --radius-sm: 10px; /* champs, petits éléments */ --radius: 12px; /* boutons, défaut */ --radius-card: 18px; /* cartes, panneaux, dropdowns */ --radius-pill: 999px;/* badges, chips, tags, pastilles */ --shadow-sm: 0 2px 8px rgba(30, 30, 35, 0.05); --shadow: 0 8px 24px rgba(30, 30, 35, 0.06); --shadow-hover: 0 18px 40px rgba(30, 30, 35, 0.10); } /* ---------- 2. Typographie ---------- */ body { color: #3a393d; } h1, h2, h3, .section-title, .about-store-title, .brands-title, .new-arrivals-title, .advantages-title, .video-image-title, .promo-banner-title, .products-page-title, .devis-hero h1, .contact-hero h1, .welcome h2 { font-family: 'Jura', 'Raleway', sans-serif; font-weight: 600; letter-spacing: 0.08em; } h1, .devis-hero h1, .contact-hero h1 { text-transform: uppercase; letter-spacing: 0.12em; } .section-title, .about-store-title, .brands-title, .new-arrivals-title, .advantages-title, .welcome h2 { text-transform: uppercase; } /* Aucune barre décorative sous les titres : on neutralise les ::before/::after d'origine des pages (barres grises + vertes) */ .section-title::before, .section-title::after, .about-store-title::before, .about-store-title::after, .new-arrivals-title::before, .new-arrivals-title::after, .brands-title::before, .brands-title::after, .advantages-title::before, .advantages-title::after, .products-page-title::before, .products-page-title::after, .welcome h2::before, .welcome h2::after { display: none !important; content: none !important; } /* ---------- 3. Boutons : courbés, ombre douce, soulèvement feutré ---------- DA « doux arrondi » : rayon généreux, ombre légère au repos, et au survol un léger soulèvement + ombre qui s'approfondit (et non plus un simple assombrissement plat). Jura majuscule conservé. */ .btn, .btn-primary, .btn-secondary, .devis-submit, .checkout-btn, .btn-submit-order, .btn-payment, .add-to-cart-btn, .btn-view { border-radius: var(--radius) !important; font-family: 'Jura', 'Raleway', sans-serif !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* Survol des boutons pleins : soulèvement + ombre douce + fond légèrement assombri */ .btn:hover, .btn-primary:hover, .btn-cta:hover, .devis-submit:hover:not(:disabled), .checkout-btn:hover, .btn-submit-order:hover, .btn-payment:hover, .add-to-cart-btn:hover:not(:disabled):not(.btn-ghost), .btn-view:hover, .btn-apply-promo:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--btn-surface-hover); } .btn-secondary { background: transparent; border: 1px solid #cfcfcb; color: #3a393d; box-shadow: none !important; } .btn-secondary:hover { background: var(--dark-surface); border-color: var(--dark-surface); color: #fff; box-shadow: var(--shadow); } /* ---------- 4. Cartes & surfaces : courbes douces + ombre feutrée ---------- */ .card, .devis-form-card, .devis-aside, .info-card, .stat-card, .offer-card, .payment-card, .auth-section .card { border-radius: var(--radius-card) !important; } .devis-form-card, .info-card, .payment-card { box-shadow: var(--shadow) !important; border: 1px solid #f0f0ee; } .product-card { border-radius: var(--radius-card) !important; box-shadow: var(--shadow) !important; border: 1px solid #f0f0ee !important; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important; } .product-card:hover { box-shadow: var(--shadow-hover) !important; border-color: #ececea !important; transform: translateY(-4px) !important; } /* ---------- 5. Header blanc, léger : pas de filets, ombre diffuse ---------- */ .header-wrapper { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); } .top-bar { background: #f7f7f6; } .top-bar-inner { color: #5a595f; font-weight: 500; } .middle-bar, .middle-bar.no-topbar { background: #ffffff; border-bottom: none; } /* Le logo sombre s'affiche directement sur fond blanc : plus de pastille */ .site-logo img { background: transparent; padding: 0; border-radius: 0; } .search-form input { background: #f4f4f3; border: none; border-radius: var(--radius-pill) 0 0 var(--radius-pill); color: #3a393d; padding-left: 18px; } .search-form button { background: #f4f4f3; color: #5a595f; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; } .search-form button:hover { background: var(--accent); color: #fff; } .header-cart { color: #3a393d; } .header-cart:hover { background: #f4f4f3; } .cart-amount { color: #707173; } .cart-count, .wishlist-badge { background: var(--accent); } .header-icons .header-icon { color: #3a393d; } .header-icons .header-icon:hover { color: var(--accent); transform: none; } /* Navigation : blanche, centrée, liens gris, soulignement vert au survol */ .main-navigation { background: #ffffff; border-top: none; border-bottom: none; } .nav-container { justify-content: center; } @media (max-width: 1200px) { /* burger visible : retour à l'alignement gauche */ .nav-container { justify-content: flex-start; } } .menu-link { color: #4a4950; font-family: 'Jura', 'Raleway', sans-serif; font-weight: 500; letter-spacing: 0.14em; } .menu-link:hover, .menu-link.active { background: transparent; color: #1f1e21; box-shadow: inset 0 -2px 0 var(--accent); } /* Bouton « Demande de devis » du menu : blanc épuré, contour fin, se remplit en anthracite au survol (pas de grosse bordure noire) */ .menu-link.promo { background: #ffffff; color: #2c2b2f; border: 1px solid #dcdcd8; box-shadow: none; animation: none; } .menu-link.promo:hover { background: var(--dark-surface); border-color: var(--dark-surface); color: #fff; box-shadow: none; } .submenu { background: #ffffff; border: 1px solid #f0f0ee; border-radius: var(--radius-card); box-shadow: var(--shadow-hover); overflow: hidden; } .submenu li a { color: #3a393d; border-bottom: 1px solid #f1f1ef; } .submenu li a:hover { background: #f6f6f5; color: #1f1e21; } .submenu li:last-child a { border-radius: 0; } .burger-btn { color: #3a393d; } /* Menu mobile : tiroir blanc */ @media (max-width: 1200px) { .menu-list { background: #ffffff; border-right: 1px solid var(--hairline); } .menu-link { border-bottom: 1px solid #f1f1ef; } .close-mobile-menu { color: #3a393d; } .submenu { background: #fafaf9; box-shadow: none; } } /* ---------- 5bis. Zones sombres : l'accent y redevient vert ---------- Le remap --red → gris foncé rend invisible tout texte var(--red) posé sur une section sombre. Dans ces conteneurs, l'accent vert reprend sa place (c'est exactement son rôle dans cette DA). NB : la section « Nos gammes » de l'accueil (.about-store-section) est passée en fond clair et se style désormais à la source. */ /* Panneau sombre de la page devis */ .devis-aside { background: var(--dark-surface); } .devis-aside .step-num { background: var(--accent); } .devis-aside .aside-contact i { color: var(--accent); } /* Filet de sécurité : icônes accentuées sur les autres sections sombres */ .service-banner i { color: var(--accent); } /* ---------- 6. Héros : overlays neutres (plus de voile vert) ---------- */ .devis-hero { background: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 100%), url('/assets/img/hero-reemploi.jpg') center/cover; } .devis-hero h1, .devis-hero p, .contact-hero h1, .contact-hero p { color: #fff; } /* ---------- 7. Formulaires : champs sobres ---------- */ .form-group input, .form-group select, .form-group textarea, .form-control { border-radius: var(--radius-sm); border-color: #dcdcd9; } /* Focus sans halo : juste la bordure qui fonce */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus { border-color: #3a393d; box-shadow: none !important; } /* ---------- 8. Footer : clair / blanc cassé, titres Jura ---------- Le