/* ============================================================================ ATELIER — couche design Vintage Bike Shop (maquette « L'Atelier » validée) Chargée APRÈS theme.css (cf head.tpl) pour surcharger le thème classic. Source design : vbs-maquette-atelier/maquettes/atelier/style.css Socle : tokens + fontes + base typo + composants partagés (boutons, carte produit, sections) + header/footer. Les pages (home/catégorie/produit) ajoutent leurs styles dans des fichiers dédiés. ============================================================================ */ :root{ --petrol:#2B574F; --petrol-deep:#21443D; --terracotta:#C2693E; --terracotta-deep:#A8542E; --sage:#A6CABD; --sage-light:#CBE0D8; --cream:#F4EFE2; --paper:#FBF8EF; --ink:#33291F; --brown:#8B5A2B; --brass:#B0853A; --line:#DCD3BF; --muted:#6a5f50; --display:'Playfair Display',Georgia,serif; --body:'Spectral',Georgia,serif; --label:'Saira Condensed','Arial Narrow',sans-serif; --wrap:1240px; } /* ---------- base ---------- */ /* le thème boxe le à 1140px (max-width+margin:auto) → la maquette est pleine largeur : on libère le body, les bandes vont bord à bord. */ html,body{ max-width:none !important; width:auto; margin:0 !important; } body, body.page-home, #wrapper{ background:var(--cream); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; } #wrapper{ padding:0; } .atelier-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; } /* pas de couleur globale sur les titres : la maquette colore par contexte (sec-title/cathead=pétrole, hero h1=crème hérité, occ-sec=crème, footer=sauge…) */ h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{ font-family:var(--display); line-height:1.12; font-weight:700; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--terracotta-deep); } em,i{ font-style:italic; } /* ---------- boutons ---------- */ .btn-primary, .btn-primary:not(:disabled):not(.disabled), .product-add-to-cart .add-to-cart, button.add-to-cart{ background:var(--terracotta); border:2px solid transparent; color:var(--paper); font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-weight:600; border-radius:2px; box-shadow:none; } .btn-primary:hover, .product-add-to-cart .add-to-cart:hover, button.add-to-cart:hover{ background:var(--terracotta-deep); color:var(--paper); } .btn-secondary,.btn-outline-secondary{ background:transparent; border:2px solid var(--petrol); color:var(--petrol); font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; border-radius:2px; } .btn-secondary:hover,.btn-outline-secondary:hover{ background:var(--petrol); color:var(--paper); } /* bloc slogan SEO (#descriptif_site) : absent de la maquette + rendu en double par le catalogue → masqué visuellement. (Texte conservé dans le DOM pour le SEO.) */ #descriptif_site{ display:none; } .header-banner{ background:transparent; } /* ============================================================================ HEADER — 3 bandes : utilitaire (sauge) / masthead (pétrole) / nav (terracotta) Markup posé dans header.tpl avec wrappers .atelier-*. ============================================================================ */ header#header{ width:100%; max-width:none; padding:0; margin:0; background:var(--cream); box-shadow:none; border:0; } /* bandeau utilitaire — CSS maquette (.utility) */ .utility{ background:var(--sage); color:var(--petrol-deep); font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; } .utility .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:18px; min-height:38px; flex-wrap:wrap; } .utility a{ display:inline-flex; align-items:center; gap:6px; color:var(--petrol-deep); } .utility a:hover{ color:var(--terracotta-deep); } /* on « promeut » les modules en items flex de .wrap pour les ré-ordonner librement */ .utility .util-modules{ display:contents; } /* ordre maquette : Français · EUR …… Rachat · Connexion · Panier */ .utility #_desktop_language_selector{ order:1; } .utility #_desktop_currency_selector{ order:2; } .utility .util-rachat{ order:3; margin-left:auto; } .utility #_desktop_user_info{ order:4; } .utility #_desktop_cart{ order:5; } /* les vrais sélecteurs PrestaShop habillés comme des .tag de la maquette */ .utility .language-selector, .utility .currency-selector{ display:inline-flex; align-items:center; } .utility select.link, .utility .language-selector select, .utility .currency-selector select{ -webkit-appearance:none; appearance:none; background:transparent; border:0; color:var(--petrol); font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; padding:0 16px 0 0; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2321443D' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; } .utility #_desktop_user_info, .utility #_desktop_cart{ display:inline-flex; align-items:center; } .utility #_desktop_user_info a, .utility #_desktop_cart a, .utility .blockcart a{ color:var(--petrol-deep); } .utility .blockcart{ background:transparent; padding:0; } .utility .header-top, .utility .row{ margin:0; padding:0; } .utility .material-icons{ font-size:18px; } /* masthead */ .atelier-masthead{ background:var(--petrol); color:var(--paper); text-align:center; padding:24px 0 20px; border-bottom:5px solid var(--terracotta); } .atelier-masthead #_desktop_logo, .atelier-masthead .logo-wrap{ display:block; margin:0 auto; } .atelier-masthead #_desktop_logo h1{ margin:0; } .atelier-masthead img.logo{ height:auto; width:auto; max-width:min(720px,92vw); max-height:124px; margin:0 auto; display:block; filter:none; } .atelier-masthead .tagline{ margin-top:12px; font-family:var(--display); font-style:italic; font-size:18px; color:rgba(251,248,239,.85); } .atelier-masthead .years{ margin-top:4px; font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:11.5px; color:var(--sage); } /* toggle/burger mobile : masqués en desktop (révélés dans le bloc @media ≤768px) */ .nav-toggle{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .nav-burger{ display:none; } /* mega-menu — CSS exact maquette (.nav/.item/.panel/.fam/.search) */ .nav{ background:var(--terracotta); position:relative; z-index:40; } .nav .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; display:flex; align-items:stretch; gap:0; } .nav .item{ position:relative; display:flex; } .nav .item > a{ display:flex; align-items:center; height:52px; padding:0 20px; color:var(--paper); font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:14px; font-weight:600; border-right:1px solid rgba(251,248,239,.18); transition:background .15s; white-space:nowrap; } .nav .item:first-child > a{ border-left:1px solid rgba(251,248,239,.18); } .nav .item:hover > a, .nav .item.active > a{ background:var(--terracotta-deep); color:var(--paper); } /* panneaux déroulants (CSS only, au survol) */ .nav .panel{ position:absolute; top:100%; left:0; background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--terracotta-deep); box-shadow:0 24px 44px -22px rgba(51,41,31,.5); padding:24px 26px; min-width:560px; display:none; } .nav .item:hover .panel{ display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; } .nav .panel.wide{ min-width:760px; grid-template-columns:repeat(3,1fr) !important; } .nav .panel .fam{ margin-bottom:8px; } .nav .panel .fam b{ display:block; font-family:var(--label); text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--terracotta-deep); border-bottom:1px dotted var(--line); padding-bottom:5px; margin-bottom:6px; } .nav .panel .fam a{ display:block; font-size:14.5px; color:var(--ink); padding:3px 0; transition:color .12s; } .nav .panel .fam a:hover{ color:var(--terracotta-deep); } /* recherche à droite */ .nav .search{ margin-left:auto; display:flex; align-items:center; } .nav .search input{ height:34px; border:0; border-radius:2px; padding:0 12px 0 32px; width:230px; font-family:var(--body); font-size:14px; color:var(--ink); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23A8542E' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center; } /* ============================================================================ CARTE PRODUIT — .product-miniature (PrestaShop) habillée comme .pcard (maquette) Composant PARTAGÉ home + catégorie + associés. ============================================================================ */ .product-miniature, .js-product-miniature{ background:var(--paper); border:1px solid var(--line); border-radius:0; display:flex; flex-direction:column; transition:.16s; position:relative; height:100%; } .product-miniature:hover{ box-shadow:0 20px 38px -24px rgba(51,41,31,.5); transform:translateY(-3px); } .product-miniature .thumbnail-container{ margin:0; padding:0; position:relative; box-shadow:none; } .product-miniature .thumbnail-container .thumbnail, .product-miniature .product-thumbnail{ display:grid; place-items:center; aspect-ratio:1; background:#fff; border-bottom:1px solid var(--line); width:100%; } .product-miniature .product-thumbnail img{ width:100%; height:100%; object-fit:contain; padding:8%; mix-blend-mode:multiply; } .product-miniature .product-description, .product-miniature .product-desc{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; } .product-miniature .product-title{ font-family:var(--body); font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); margin:0; text-transform:none; } .product-miniature .product-title a{ color:var(--ink); } .product-miniature .product-title a:hover{ color:var(--terracotta-deep); } .product-miniature .manufacturer-name, .product-miniature .product-manufacturer{ font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:var(--muted); } .product-miniature .product-price-and-shipping{ margin-top:auto; } .product-miniature .price{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--terracotta-deep); } /* badges (état / promo) */ .product-miniature .product-flag{ position:absolute; top:10px; left:10px; background:var(--petrol); color:var(--paper); font-family:var(--label); text-transform:uppercase; letter-spacing:.1em; font-size:10px; padding:4px 9px; border-radius:0; margin:0; } /* ============================================================================ SECTIONS génériques (titres d'accueil & co) ============================================================================ */ .atelier-section{ padding:60px 0; } .atelier-eyebrow{ font-family:var(--label); text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:var(--terracotta-deep); margin-bottom:10px; display:block; } .atelier-sec-title{ font-size:34px; color:var(--petrol); margin-bottom:8px; } .atelier-sec-sub{ font-size:17px; color:var(--muted); max-width:640px; } /* ============================================================================ FOOTER — le wrapper réel du layout est