/* LocInstru Shop — CSS. Police et couleur d'accent calées sur celles de www.boutondair.fr (Inter pour le texte, Cardo pour les titres, accent #a62b0c/#7d2109, fond #f3f0e7). Couleurs fixées en dur (pas d'héritage automatique depuis les variables --wp--preset--color--* du thème : le thème actif définissant ses propres valeurs pour ces variables, un mécanisme de repli ne se déclenchait jamais et récupérait la couleur du thème au lieu de la nôtre). Surchargez ces variables depuis l'éditeur de thème / CSS additionnel si la charte évolue : .locinstru-shop { --locinstru-accent: #votre-couleur; --locinstru-heading-font: 'VotrePolice', serif; --locinstru-body-font: 'VotrePolice', sans-serif; } */ :root { --locinstru-accent: #a62b0c; --locinstru-accent-dark: #7d2109; --locinstru-text: #362a22; --locinstru-border: rgba(54, 42, 34, 0.15); --locinstru-bg-page: #f3f0e7; --locinstru-bg-card: #fffdfa; --locinstru-bg-tint: color-mix(in srgb, var(--locinstru-accent) 8%, var(--locinstru-bg-page)); --locinstru-radius: 10px; --locinstru-body-font: "Inter", sans-serif; --locinstru-heading-font: "Cardo", serif; } .locinstru-shop.locinstru-shop { /* Sélecteur doublé (.locinstru-shop.locinstru-shop) : astuce CSS pure pour augmenter notre spécificité sans toucher au HTML, afin de systématiquement l'emporter sur d'éventuels sélecteurs composés du thème (ex: ".entry-content > div") qui, à spécificité égale avec un simple ".locinstru-shop", pouvaient gagner par un autre critère. */ /* Couleurs fixées en dur (pas d'héritage depuis les variables du thème --wp--preset--color--*) : le thème actif définit ses propres valeurs pour ces variables (souvent différentes de ce qu'on veut ici), donc un repli var(--wp--preset--..., #xxxxxx) ne se déclenche jamais et récupère la couleur du thème au lieu de la nôtre. */ --locinstru-accent: #a62b0c; --locinstru-accent-dark: #7d2109; --locinstru-text: #362a22; --locinstru-border: rgba(54, 42, 34, 0.15); --locinstru-bg-page: #f3f0e7; --locinstru-bg-card: #fffdfa; --locinstru-bg-tint: color-mix(in srgb, var(--locinstru-accent) 8%, var(--locinstru-bg-page)); --locinstru-radius: 10px; --locinstru-body-font: "Inter", sans-serif; --locinstru-heading-font: "Cardo", serif; max-width: 1200px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; font-family: var(--locinstru-body-font) !important; color: var(--locinstru-text) !important; background: var(--locinstru-bg-page) !important; border-radius: var(--locinstru-radius); } /* Règle générale : force notre couleur/police sur TOUS les descendants. Nécessaire car l'héritage CSS perd systématiquement face à une règle du thème qui cible directement un élément (ex: ".entry-content p"), même sans !important de son côté. Les règles plus spécifiques ci-dessous (badges, boutons, prix, liens) restent prioritaires sur celle-ci. */ .locinstru-shop, .locinstru-shop * { color: var(--locinstru-text) !important; font-family: var(--locinstru-body-font) !important; } .locinstru-shop a { color: var(--locinstru-accent) !important; } /* La popup "ajouté au panier" vit hors de .locinstru-shop dans le DOM (ajoutée à par le JS) : les variables --locinstru-* restent disponibles grâce à leur définition au niveau :root ci-dessus, mais on force ici aussi couleur/police sur tous ses descendants par défaut. Placée tôt dans le fichier pour que les couleurs spécifiques des boutons (définies plus bas) restent prioritaires dessus. */ .locinstru-modal-overlay, .locinstru-modal-overlay * { color: var(--locinstru-text) !important; font-family: var(--locinstru-body-font) !important; } .locinstru-shop h1, .locinstru-shop h2, .locinstru-shop h3, .locinstru-shop .locinstru-card-title, .locinstru-shop .locinstru-product-title, .locinstru-shop .locinstru-modal-title { font-family: var(--locinstru-heading-font) !important; font-weight: 700 !important; } .locinstru-shop h1 { font-size: 2em; margin-bottom: 0.3em; } /* -------- Filtres -------- */ .locinstru-filters-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; padding: 1rem 1.2rem; background: var(--locinstru-bg-tint) !important; border-radius: var(--locinstru-radius); } .locinstru-filters-row label { display: flex; flex-direction: column; font-size: 0.8em; font-weight: 600 !important; gap: 0.3rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; } .locinstru-filters-row select, .locinstru-filters-row input[type="number"] { font-family: var(--locinstru-body-font) !important; font-size: 0.95rem; padding: 0.5em 0.7em; border: 1px solid var(--locinstru-border); border-radius: var(--locinstru-radius); background: var(--locinstru-bg-card) !important; color: var(--locinstru-text) !important; min-width: 110px; } /* -------- Grille catalogue -------- */ .locinstru-grid.locinstru-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; background: var(--locinstru-bg-page) !important; background-color: var(--locinstru-bg-page) !important; padding: 0.5rem 0; } .locinstru-card.locinstru-card { display: block; text-decoration: none !important; color: var(--locinstru-text) !important; border: 1px solid var(--locinstru-border); border-radius: var(--locinstru-radius); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; background: var(--locinstru-bg-card) !important; background-color: var(--locinstru-bg-card) !important; box-shadow: 0 1px 4px rgba(54, 42, 34, 0.06); } .locinstru-card.locinstru-card:hover { box-shadow: 0 8px 24px rgba(54, 42, 34, 0.14); transform: translateY(-2px); } .locinstru-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--locinstru-bg-tint) !important; } .locinstru-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .locinstru-card-body { padding: 0.85rem 1.1rem 1.1rem; } .locinstru-card-title { margin: 0 0 0.3rem; font-size: 1.05em; color: var(--locinstru-accent-dark) !important; } .locinstru-card-desc { font-size: 0.85em; opacity: 0.75; margin: 0 0 0.6rem; line-height: 1.4; } .locinstru-card-price { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; } .locinstru-price-line { font-weight: 700 !important; } .locinstru-price-line.locinstru-price-sell { color: var(--locinstru-accent) !important; font-size: 1.05em; } .locinstru-price-line.locinstru-price-rent { color: var(--locinstru-text) !important; font-size: 0.9em; font-weight: 600 !important; opacity: 0.85; } /* -------- Badges -------- */ .locinstru-badge { display: inline-block; font-size: 0.72em; padding: 0.35em 0.9em; border-radius: 999px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; } .locinstru-badge-rent { background: var(--locinstru-accent) !important; color: #fff !important; } .locinstru-badge-sold { background: #6b6258 !important; color: #fff !important; } .locinstru-card-photo .locinstru-badge { position: absolute; top: 0.7rem; left: 0.7rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } /* -------- Pagination -------- */ .locinstru-pagination { display: flex; gap: 0.4rem; margin: 2rem 0; flex-wrap: wrap; } /* -------- Instruments vendus (mêlés à la grille, distingués par badge/opacité) -------- */ .locinstru-card-sold { opacity: 0.75; } .locinstru-card-sold .locinstru-card-photo img { filter: grayscale(40%); } .locinstru-page-link { padding: 0.3em 0.7em; border: 1px solid var(--locinstru-border); border-radius: var(--locinstru-radius); text-decoration: none !important; color: var(--locinstru-text) !important; } .locinstru-page-link.is-active { background: var(--locinstru-accent) !important; border-color: var(--locinstru-accent); color: #fff !important; } /* -------- Fiche produit -------- */ .locinstru-product-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 782px) { .locinstru-product-layout { grid-template-columns: 1fr; } } .locinstru-gallery-main { aspect-ratio: 4 / 3; background: var(--locinstru-bg-tint) !important; border-radius: var(--locinstru-radius); overflow: hidden; } .locinstru-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .locinstru-gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .locinstru-gallery-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 1px solid var(--locinstru-border); } .locinstru-product-title { margin-bottom: 0.25rem; color: var(--locinstru-accent-dark) !important; } .locinstru-product-brand { opacity: 0.7; margin-top: 0; } .locinstru-buybox.locinstru-buybox { border: 1px solid var(--locinstru-border); border-radius: var(--locinstru-radius); padding: 1.1rem 1.2rem; margin: 1rem 0; background: var(--locinstru-bg-card) !important; background-color: var(--locinstru-bg-card) !important; } .locinstru-price-sell, .locinstru-price-rent { display: block; font-size: 1.4em; font-weight: 700 !important; margin-bottom: 0.6rem; color: var(--locinstru-accent) !important; } .locinstru-rent-fields { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; } .locinstru-rent-fields label { display: flex; flex-direction: column; font-size: 0.85em; gap: 0.25rem; } .locinstru-fineprint { font-size: 0.8em; opacity: 0.7; margin: 0.5rem 0 0; } .locinstru-product-video { margin: 1.5rem 0; max-width: 480px; } .locinstru-product-description { margin-top: 1.5rem; line-height: 1.6; } /* -------- Panier / Commande -------- */ .locinstru-cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .locinstru-cart-table th, .locinstru-cart-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-align: left; } .locinstru-cart-table .right, .right { text-align: right; } .locinstru-cart-actions { display: flex; gap: 1rem; justify-content: flex-end; } .locinstru-checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 782px) { .locinstru-checkout-layout { grid-template-columns: 1fr; } } .locinstru-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; } .locinstru-form-row label, .locinstru-form-full { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; } .locinstru-form-row input, .locinstru-form-full input, .locinstru-form-full textarea { padding: 0.5em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; } .locinstru-gateway-option { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.6rem; } .locinstru-gateway-fields { margin-top: 0.5rem; } .locinstru-order-summary { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 1.2rem; } .locinstru-order-summary ul { list-style: none; margin: 0 0 1rem; padding: 0; } .locinstru-order-summary li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } .locinstru-order-total { display: flex; justify-content: space-between; font-weight: 700 !important; font-size: 1.1em; } .locinstru-btn.locinstru-btn { display: inline-block; padding: 0.7em 1.6em; border-radius: calc(var(--locinstru-radius) * 0.7); text-decoration: none !important; cursor: pointer; border: 1px solid transparent; font: inherit; font-weight: 600 !important; letter-spacing: 0.02em; transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .locinstru-btn.locinstru-btn:hover { opacity: 0.92; box-shadow: 0 4px 12px rgba(54, 42, 34, 0.18); transform: translateY(-1px); } .locinstru-btn-primary.locinstru-btn-primary { background: var(--locinstru-accent) !important; background-color: var(--locinstru-accent) !important; color: #fff !important; border-color: var(--locinstru-accent); text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.05em; } .locinstru-btn-secondary.locinstru-btn-secondary { background: transparent !important; background-color: transparent !important; border-color: var(--locinstru-border); color: var(--locinstru-text) !important; } .locinstru-btn-large.locinstru-btn-large { font-size: 1em; padding: 0.9em 2.4em; } .locinstru-btn-link.locinstru-btn-link { background: none !important; border: none; text-decoration: underline !important; cursor: pointer; padding: 0; font: inherit; color: var(--locinstru-accent) !important; } /* -------- Lightbox photo (fiche produit) -------- */ .locinstru-lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 100000; cursor: zoom-out; padding: 2rem; } .locinstru-lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); } /* -------- Popup "ajouté au panier" -------- */ .locinstru-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5) !important; display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 1rem; } .locinstru-modal { background: var(--locinstru-bg-card) !important; border-radius: var(--locinstru-radius); padding: 1.8rem 2rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } .locinstru-modal-title { font-size: 1.2em; font-weight: 700 !important; margin: 0 0 0.4rem; color: var(--locinstru-accent-dark) !important; } .locinstru-modal-sub { opacity: 0.75; margin: 0 0 1.4rem; } .locinstru-modal-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .locinstru-notice, .locinstru-error { padding: 0.8rem 1rem; border-radius: var(--locinstru-radius); margin-bottom: 1rem; } .locinstru-notice { background: var(--locinstru-bg-tint) !important; } .locinstru-error { background: #fbeaea !important; color: #8a1f1f !important; }