/* ===================================================================== VINTAGE BIKE SHOP — « Atelier Chic » — pages boutique & cohérence globale Pas de maquette dédiée pour ces pages : on applique le design system (tokens, fontes, boutons, formulaires, panneaux papier) de façon cohérente. Couvre : layout PrestaShop, notifications, formulaires, panier, tunnel, compte, contact, CMS, recherche, 404. ===================================================================== */ /* Icônes œil (afficher/masquer mot de passe) — dessinées en mask-image (recolorables). */ :root{ --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } /* ===== Neutralise les restes Bootstrap/Classic (theme.css est exclu) ===== */ #wrapper, #content-wrapper, #main, .container, .row { max-width: none; } #structure.d-flex { display: block; } #menu_hamburger { display: none; } /* ===== Helpers de visibilité responsive (ex-theme.css) — réimplémentés au minimum. Le markup PrestaShop s'en sert pour n'afficher QU'UNE version par taille d'écran : bouton desktop vs mobile (« mot de passe oublié », etc.), tableau commandes desktop vs vue mobile, titres de filtres en mobile… Sans eux, les DEUX versions sortaient en double (boutons collés, doubles tableaux). Ce ne sont que ces quelques classes — pas le framework Bootstrap. ===== */ @media (max-width: 575.98px){ .hidden-xs-down{ display:none!important } } @media (min-width: 576px) { .hidden-sm-up{ display:none!important } } @media (max-width: 767.98px){ .hidden-sm-down{ display:none!important } } @media (min-width: 768px) { .hidden-md-up{ display:none!important } } @media (max-width: 991.98px){ .hidden-md-down{ display:none!important } } @media (min-width: 992px) { .hidden-lg-up{ display:none!important } } @media (max-width: 1199.98px){ .hidden-lg-down{ display:none!important } } @media (min-width: 1200px) { .hidden-xl-up{ display:none!important } } /* ===== Conteneur de page générique (pages hors home/cat/produit/contact) ===== home/categorie/produit/contact gèrent leur propre pleine largeur (.wrap interne + bandes pleine largeur), on ne contraint donc PAS leur .container, sinon les bandes pleine largeur (héros vert contact, réassurance, marques…) seraient coupées (gouttière + max-width parasites). Chaque composant gère son padding. */ body:not(#index):not(#category):not(#product):not(#contact) #wrapper { padding-bottom: clamp(40px, 6vw, 80px); } body:not(#index):not(#category):not(#product):not(#contact) #wrapper > .container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } #content-wrapper { width: 100%; } /* Fiche produit : conteneur pleine largeur à TOUTES les tailles (mobile compris). Pas de gouttière sur le conteneur — chaque composant gère SA propre gouttière : les sections via .wrap (padding:0 var(--gut)), le fil d'Ariane via sa propre règle .breadcrumb (padding ...var(--gut)...). Conséquence voulue : les bandes pleine largeur (héros vert « le saviez-vous ») touchent bien les bords sur mobile aussi. */ /* Titre de page. NB : page.tpl rend toujours le titre en

(pas

), donc on cible aussi .page-header h2 — sinon les pages type page.tpl (suivi commande, plan du site, magasins…) avaient un titre non stylé, collé au breadcrumb et à la carte. */ #main .page-header h1, #main .page-header h2, .page-heading, #content h1.h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.01em; margin: 14px 0 22px; } /* ===== Panneau « papier » réutilisable ===== */ .chic-panel, #main .page-content, .block-categories, #left-column .block, .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; } /* ===== Liens de contenu ===== */ /* .js-search-link exclu : liens fonctionnels (pagination, facettes AJAX) — sinon le catch-all repeint les numéros de pagination en rouille (invisibles sur le pill actif). */ #content-wrapper a:not(.btn):not(.prod):not(.icon-btn):not(.search-link):not(.js-search-link):not(.u-card) { color: var(--rust); } #content-wrapper a:not(.btn):not(.prod):not(.icon-btn):not(.search-link):not(.js-search-link):not(.u-card):hover { color: var(--rust-dark); } /* options de facette = texte sombre comme la maquette (.fopt), pas rouille */ .filters .facet-label .search-link { color: var(--ink-70); } .filters .facet-label:hover .search-link { color: var(--ink); } /* ===== Formulaires (compte, contact, tunnel) ===== */ .form-control, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], textarea, select { font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; width: 100%; transition: border-color .2s, box-shadow .2s; } .form-control:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(181,87,44,.12); } label, .form-control-label { font-size: 13px; font-weight: 600; color: var(--ink-70); } /* boutons PrestaShop ramenés au style maison */ .btn-primary, .btn-secondary, button[type=submit].btn, .button { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; background: var(--rust); color: #fff; transition: background .2s, transform .15s; } .btn-primary:hover, button[type=submit].btn:hover { background: var(--rust-dark); color: #fff; } .btn-secondary { background: var(--aplat); color: var(--paper); } .btn-secondary:hover { background: var(--aplat-deep); color: var(--paper); } /* ===== Notifications ===== Le cœur PS rend