/* Geek & Dragon — Snipcart custom (DARK + clean, v5) Place ce fichier APRES snipcart.css dans le . Palette sombre cohérente + paiement lisible + erreurs très visibles. */ /* =================================================================== */ /* PALETTE & TOKENS */ /* =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Cinzel:wght@400;600;700&display=swap'); :root{ /* Tons proches → transitions douces entre sections */ --gd-bg: #101826; /* fond global */ --gd-card: #121d2a; /* cartes/champs (≈ fond +1 cran) */ --gd-card-2: #162338; /* état sélectionné/hover discret */ --gd-text: #e7ebf2; --gd-muted: #a0a9b8; --gd-heading: #f4f6fa; --gd-border: #2b3650; --gd-accent: #8b5cf6; /* violet */ --gd-focus: #22d3ee; /* focus */ /* Hauteur header fixe (mise à jour par JS) */ --gd-header-h: 96px; /* Couleurs d’alerte */ --gd-error: #f87171; --gd-warning: #f59e0b; } /* =================================================================== */ /* ROOT THEME OVERRIDES (variables Snipcart) */ /* =================================================================== */ #snipcart, .snipcart{ --bgColor-default: var(--gd-bg); --bgColor-alt: var(--gd-card); --bgColor-input: var(--gd-card); --color-default: var(--gd-text); --color-heading: var(--gd-heading); --color-link: #c1c8ff; --color-linkHover: #e0e4ff; --color-input: var(--gd-text); --color-inputLabel: var(--gd-text); --color-inputIcon: var(--gd-text); --color-inputPlaceholder: var(--gd-muted); --borderColor: var(--gd-border); --borderColor-input: var(--gd-border); --focusColor: var(--gd-focus); } /* =================================================================== */ /* BASE TYPO & CONTAINERS */ /* =================================================================== */ .snipcart{ font-family:'Open Sans',system-ui,-apple-system,Segoe UI,sans-serif; color:var(--color-default); background:var(--bgColor-default); } .snipcart h1,.snipcart h2,.snipcart h3,.snipcart__button--primary{ font-family:'Cinzel',serif; } /* Boîtes/panneaux (couleur unifiée) */ .snipcart .snipcart-layout__content, .snipcart .snipcart-checkout__content, .snipcart .snipcart__box, .snipcart .snipcart__box--header, .snipcart .snipcart__box--content, .snipcart .snipcart__box--footer, .snipcart .snipcart-summary-fees, .snipcart .snipcart-item-line{ background:var(--bgColor-default) !important; color:var(--color-default) !important; border-color:var(--borderColor) !important; } /* Liens d’action (“Modifier”, etc.) bien visibles */ .snipcart .snipcart__actions--link, .snipcart a.snipcart__font--small, .snipcart .snipcart-button-link{ color:var(--color-link) !important; text-decoration:underline; } .snipcart .snipcart__actions--link:hover, .snipcart a.snipcart__font--small:hover, .snipcart .snipcart-button-link:hover{ color:var(--color-linkHover) !important; } /* Petits textes */ .snipcart .snipcart__font--tiny, .snipcart .snipcart__font--small{ color:var(--gd-muted) !important; } /* =================================================================== */ /* FORMES & CHAMPS */ /* =================================================================== */ .snipcart .snipcart-input, .snipcart input[type=text], .snipcart input[type=email], .snipcart input[type=tel], .snipcart input[type=number], .snipcart .snipcart-form__select, .snipcart select, .snipcart .snipcart-typeahead__input, .snipcart textarea{ background:var(--bgColor-input) !important; color:var(--color-input) !important; border:1px solid var(--borderColor-input) !important; } .snipcart input::placeholder, .snipcart textarea::placeholder, .snipcart .snipcart-typeahead__input::placeholder{ color:var(--color-inputPlaceholder) !important; } .snipcart label, .snipcart .snipcart-form__label{ color:var(--color-inputLabel) !important; } /* Focus accessible */ .snipcart .snipcart-input:focus, .snipcart input:focus, .snipcart select:focus, .snipcart textarea:focus, .snipcart .snipcart-typeahead__input:focus{ outline:2px solid var(--focusColor) !important; border-color:var(--focusColor) !important; } /* Chrome autofill (sinon fond blanc) */ .snipcart input:-webkit-autofill, .snipcart input:-webkit-autofill:hover, .snipcart input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--bgColor-input) inset !important; -webkit-text-fill-color:var(--color-input) !important; caret-color:var(--color-input) !important; } /* Spinners number → off */ .snipcart input[type=number]::-webkit-outer-spin-button, .snipcart input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .snipcart input[type=number]{ -moz-appearance:textfield; } /* Radio/checkbox accent */ .snipcart input[type=checkbox], .snipcart input[type=radio]{ accent-color: var(--gd-accent); } /* Champ code promo : alignement responsive et boutons accessibles */ .snipcart .snipcart-discount-box{ background: var(--gd-card) !important; border: 1px solid var(--gd-border) !important; border-radius: 8px !important; padding: 1rem !important; margin: 1rem 0 !important; } .snipcart .snipcart-discount-box__form{ display:flex; gap:0.75rem; position:static; align-items:stretch; width: 100%; } .snipcart .snipcart-discount-box__form-container{ display:flex; justify-content:flex-start; gap:0.75rem; align-items:stretch; flex:1 1 auto; } .snipcart .snipcart-discount-box .snipcart-input{ flex:1 1 auto; min-width:0; background: var(--gd-bg) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; border-radius: 6px !important; padding: 0.75rem !important; font-size: 0.875rem !important; } .snipcart .snipcart-discount-box .snipcart-input:focus{ border-color: var(--gd-focus) !important; outline: 2px solid var(--gd-focus) !important; } .snipcart .snipcart-discount-box .snipcart-input::placeholder{ color: var(--gd-muted) !important; } .snipcart .snipcart-discount-box .snipcart-form__field{ flex:1 1 auto; min-width:0; } .snipcart .snipcart-discount-box__submit, .snipcart .snipcart-discount-box__cancel{ position:static; margin:0; background: var(--gd-accent) !important; color: white !important; border: none !important; border-radius: 6px !important; padding: 0.75rem 1rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; min-height: 2.5rem !important; } .snipcart .snipcart-discount-box__submit:hover, .snipcart .snipcart-discount-box__cancel:hover{ background: var(--gd-card-2) !important; border: 1px solid var(--gd-accent) !important; color: var(--gd-accent) !important; } /* Espacement constant entre les boutons « Appliquer » et « Annuler » */ .snipcart .snipcart-discount-box__cancel{ margin-left:0.75rem; background: var(--gd-card) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; } .snipcart .snipcart-discount-box__cancel:hover{ background: var(--gd-card-2) !important; border-color: var(--gd-error) !important; color: var(--gd-error) !important; } /* Label du code promo */ .snipcart .snipcart-discount-box .snipcart-form__label, .snipcart .snipcart-discount-box label{ color: var(--gd-heading) !important; font-weight: 600 !important; font-size: 0.875rem !important; margin-bottom: 0.5rem !important; display: block !important; } /* =================================================================== */ /* LIVRAISON (retour webhook) */ /* =================================================================== */ .snipcart .snipcart-shipping-rates-list-item{ background:var(--gd-card) !important; border:1px solid var(--gd-border) !important; color:var(--gd-text) !important; } .snipcart .snipcart-shipping-rates-list-item *{ color:var(--gd-text) !important; } .snipcart .snipcart-radio__input:checked + .snipcart-shipping-rates-list-item, .snipcart .snipcart-shipping-rates-list-item.is-selected{ background:var(--gd-card-2) !important; border-color:var(--gd-accent) !important; } /* =================================================================== */ /* BOUTONS SECONDAIRES */ /* =================================================================== */ .snipcart .snipcart__button--secondary, .snipcart .snipcart-button-secondary{ background:var(--gd-card) !important; color:var(--gd-text) !important; border:1px solid var(--gd-text) !important; } .snipcart .snipcart__button--secondary:hover, .snipcart .snipcart-button-secondary:hover{ filter:brightness(1.05); } /* =================================================================== */ /* LIGNES PRODUIT (layout simplifié et lisible) */ /* =================================================================== */ .snipcart .snipcart-item-line{ display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gd-border); } .snipcart .snipcart-item-line:last-child{ border-bottom: none; } /* Header avec image et titre plus lisible */ .snipcart .snipcart-item-line__header{ display: flex; align-items: center; flex: 1; gap: 1rem; } /* Image produit */ .snipcart .snipcart-item-line__media--small{ order: 1; flex-shrink: 0; } /* Actions (corbeille) en premier */ .snipcart .snipcart-item-line__actions{ order: 0; margin: 0 !important; opacity: 1 !important; flex-shrink: 0; } /* Titre du produit */ .snipcart .snipcart-item-line__title{ order: 2; flex: 1; color: var(--gd-heading) !important; font-weight: 500; } /* Bouton corbeille amélioré */ .snipcart .snipcart-item-line__actions .snipcart__button--icon{ width: 2.25rem; height: 2.25rem; border: 1px solid var(--gd-border); background: var(--gd-card); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .snipcart .snipcart-item-line__actions .snipcart__button--icon:hover{ background: var(--gd-error); border-color: var(--gd-error); } .snipcart .snipcart-item-line__actions .snipcart__icon, .snipcart .snipcart-item-line__actions svg{ width: 1rem; height: 1rem; color: var(--gd-error) !important; fill: currentColor !important; opacity: 1 !important; } .snipcart .snipcart-item-line__actions .snipcart__button--icon:hover .snipcart__icon, .snipcart .snipcart-item-line__actions .snipcart__button--icon:hover svg{ color: white !important; } /* Quantité : layout amélioré */ .snipcart .snipcart-item-line__quantity, .snipcart .snipcart-item-quantity{ display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Input quantité amélioré */ .snipcart .gd-qty-input, .snipcart .snipcart-item-line__quantity input[type="number"], .snipcart .snipcart-item-quantity input[type="number"] { background: var(--gd-card) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; border-radius: 6px; height: 2rem; padding: 0 0.5rem; font-size: 1rem; font-weight: 600; text-align: center; min-width: 3rem; max-width: 4rem; transition: all 0.2s ease; } .snipcart .gd-qty-input:focus, .snipcart .snipcart-item-line__quantity input[type="number"]:focus, .snipcart .snipcart-item-quantity input[type="number"]:focus { border-color: var(--gd-focus) !important; outline: 2px solid var(--gd-focus) !important; } /* Boutons quantité +/- améliorés */ .snipcart .gd-qty-button, .snipcart .snipcart-item-line__quantity button, .snipcart .snipcart-item-quantity button{ background: var(--gd-card); color: var(--gd-text); border: 1px solid var(--gd-border); width: 2rem; height: 2rem; border-radius: 6px; font-size: 1.125rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .snipcart .gd-qty-button:hover, .snipcart .snipcart-item-line__quantity button:hover, .snipcart .snipcart-item-quantity button:hover{ background: var(--gd-card-2); border-color: var(--gd-accent); } .snipcart .snipcart-item-line__quantity button .snipcart__icon, .snipcart .snipcart-item-quantity button .snipcart__icon{ color: var(--gd-text); } /* =================================================================== */ /* PAIEMENT — champs + erreurs lisibles */ /* =================================================================== */ /* Titres/labels bien clairs */ .snipcart .snipcart-payment__form .snipcart__font--subtitle, .snipcart .snipcart-payment__form label, .snipcart .snipcart__font--subtitle{ color:var(--gd-heading) !important; } /* Inputs du formulaire de carte (conteneurs contrôlés par Snipcart) */ .snipcart .snipcart-payment__form .snipcart-input, .snipcart .snipcart-payment-card-form .snipcart-input, .snipcart .snipcart-payment__form input[type="text"], .snipcart .snipcart-payment-card-form input[type="text"]{ background:var(--gd-card) !important; color:var(--gd-text) !important; border:1px solid var(--gd-border) !important; } .snipcart .snipcart-payment__form .snipcart-input::placeholder, .snipcart .snipcart-payment-card-form input::placeholder{ color:var(--gd-muted) !important; } .snipcart .snipcart-payment__form .snipcart-input:focus, .snipcart .snipcart-payment-card-form input:focus{ outline:2px solid var(--gd-focus) !important; border-color:var(--gd-focus) !important; } /* Stripe/Snipcart v3 : iframes des éléments de carte (non stylables à l’intérieur) */ .snipcart iframe[title*="card"], .snipcart iframe[title*="Card"], .snipcart iframe[title*="number"], .snipcart iframe[title*="expiry"], .snipcart iframe[title*="cvc"]{ background:var(--gd-card) !important; /* contour/zone */ color-scheme: dark; /* hint pour thème sombre */ border-radius:8px; } /* États d’erreur sur champs */ .snipcart .snipcart-form__field--error .snipcart-input, .snipcart .snipcart-form__field--error input, .snipcart .snipcart-form__field--error select{ border-color:var(--gd-error) !important; box-shadow:0 0 0 2px rgba(248,113,113,.25); } .snipcart .snipcart-field-error, .snipcart .snipcart__error{ color:var(--gd-heading) !important; } /* Bandeaux/notifications d’erreur (ex. "Unable to process payment") */ .snipcart [role="alert"], .snipcart .snipcart__notice, .snipcart .snipcart__notice--error, .snipcart .snipcart__notice--warning, .snipcart .snipcart-notification, .snipcart .snipcart-alert, .snipcart .snipcart__box--error{ background:var(--gd-card-2) !important; color:var(--gd-heading) !important; border:1px solid var(--gd-error) !important; } .snipcart .snipcart__notice a, .snipcart [role="alert"] a{ color:#fff !important; text-decoration:underline; } /* =================================================================== */ /* DIVERS ET AMÉLIORATIONS LAYOUT */ /* =================================================================== */ /* Dropdown options (fond sombre) */ .snipcart .snipcart-form__select option{ background:var(--gd-card); color:var(--gd-text); } /* Custom fields dropdowns (variations produits) */ .snipcart .snipcart-product-option, .snipcart .snipcart-product-option__select, .snipcart .snipcart-item-line__custom-fields select, .snipcart .snipcart-cart-item__custom-fields select, .snipcart select[name*="custom"]{ background: var(--gd-card) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; border-radius: 6px; padding: 0.5rem; min-width: 120px; } .snipcart .snipcart-product-option__select option, .snipcart .snipcart-item-line__custom-fields select option, .snipcart .snipcart-cart-item__custom-fields select option, .snipcart select[name*="custom"] option{ background: var(--gd-card) !important; color: var(--gd-text) !important; padding: 0.5rem; } /* Labels des custom fields */ .snipcart .snipcart-product-option__label, .snipcart .snipcart-item-line__custom-fields label, .snipcart .snipcart-cart-item__custom-fields label{ color: var(--gd-text) !important; font-weight: 500; margin-bottom: 0.5rem; display: block; } /* FIX FORÇÉ pour TOUS les selects et options dans Snipcart */ .snipcart select, .snipcart select *, .snipcart option { background: var(--gd-card) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; padding: 0.5rem 2rem 0.5rem 0.5rem !important; min-height: 2rem !important; width: 120px !important; min-width: 120px !important; max-width: none !important; font-size: 14px !important; line-height: 1.4 !important; } /* Force l'affichage du texte dans les options */ .snipcart select option { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Positionnement spécifique de l'icône dropdown */ .snipcart select { background-position: calc(100% - 0.5rem) center !important; background-size: 16px !important; padding-right: 2.5rem !important; text-overflow: ellipsis !important; overflow: hidden !important; } /* SOLUTION : réduire la taille du font et compacter SEULEMENT pour les custom fields */ .snipcart .snipcart-dropdown-custom-field, .snipcart select[name*="Multiplicateur"], .snipcart select[name*="Langue"] { width: 85px !important; min-width: 85px !important; position: relative !important; background: var(--gd-card) !important; border: 1px solid var(--gd-border) !important; color: var(--gd-text) !important; padding: 0.5rem !important; font-size: 12px !important; font-weight: 400 !important; } /* Masquer l'icône avec un pseudo-élément SEULEMENT pour custom fields */ .snipcart .snipcart-dropdown-custom-field::after, .snipcart select[name*="Multiplicateur"]::after, .snipcart select[name*="Langue"]::after { content: "▼" !important; position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; color: var(--gd-text) !important; font-size: 12px !important; z-index: 1 !important; background: var(--gd-card) !important; width: 20px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Affichage forcé des custom fields dans le sommaire */ .snipcart .snipcart-cart-summary-item__custom-fields, .snipcart .snipcart-item-line__custom-fields, .snipcart .snipcart-cart-item__custom-fields { display: block !important; visibility: visible !important; opacity: 1 !important; margin-top: 0.25rem !important; font-size: 0.875rem !important; color: var(--gd-muted) !important; } .snipcart .snipcart-cart-summary-item__custom-fields select, .snipcart .snipcart-item-line__custom-fields select, .snipcart .snipcart-cart-item__custom-fields select { background: var(--gd-card) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; border-radius: 4px !important; padding: 0.25rem 0.5rem !important; font-size: 0.875rem !important; margin-left: 0.5rem !important; } /* Labels des custom fields dans le sommaire */ .snipcart .snipcart-cart-summary-item__custom-fields label, .snipcart .snipcart-item-line__custom-fields label, .snipcart .snipcart-cart-item__custom-fields label { color: var(--gd-muted) !important; font-size: 0.875rem !important; margin-right: 0.5rem !important; } /* Espacement global du panier */ .snipcart .snipcart-cart{ padding: 1rem; } /* Header du panier plus clair */ .snipcart .snipcart__box--header{ padding: 1rem !important; border-bottom: 1px solid var(--gd-border) !important; } /* Titres du panier plus lisibles */ .snipcart .snipcart__font--title{ color: var(--gd-heading) !important; font-size: 1.5rem !important; } /* Réduction de l'espacement vertical excessif */ .snipcart .snipcart-item-line__content{ padding: 0.5rem 0 !important; } /* Résumé et layout du panier améliorés */ .snipcart .snipcart-cart-summary{ position: sticky; top: calc(var(--gd-header-h) + 12px); background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: 12px; padding: 1.5rem; } /* Amélioration du contraste des prix et totaux */ .snipcart .snipcart-summary-fees__amount, .snipcart .snipcart-cart-summary__amount, .snipcart .snipcart__font--large{ color: var(--gd-heading) !important; font-weight: 600; } /* Titre multiplicateur plus lisible */ .snipcart .snipcart-item-line__title + div, .snipcart .snipcart-item-line .snipcart__font--small{ color: var(--gd-muted) !important; font-size: 0.875rem; } /* Modal Snipcart (version overlay) sous header fixe */ .snipcart .snipcart-modal__container{ top:var(--gd-header-h); height:calc(100vh - var(--gd-header-h)); } /* ===== Scroll correct: la modale Snipcart gère le scroll, pas l'arrière-plan ===== */ /* Quand la modale Snipcart est ouverte, on fige le body */ body.snipcart-open { overflow: hidden; } /* La modale (overlay) sous le header fixe, et ELLE scrolle */ .snipcart .snipcart-modal__container{ position: fixed; top: var(--gd-header-h); left: 0; right: 0; bottom: 0; height: auto; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Checkout/Order en page pleine (pas d’overlay) : on laisse scroller la page, on s’assure que les sections Snipcart ne bloquent pas le scroll */ .snipcart .snipcart-layout, .snipcart .snipcart-checkout, .snipcart .snipcart-order{ position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* =================================================================== */ /* CODE PROMO CUSTOM FIELD */ /* =================================================================== */ .snipcart .custom-promo-field { background: var(--gd-card) !important; border: 1px solid var(--gd-border) !important; border-radius: 8px !important; padding: 1rem !important; margin: 1rem 0 !important; } .snipcart .custom-promo-field label { color: var(--gd-heading) !important; font-weight: 600 !important; font-size: 0.875rem !important; margin-bottom: 0.5rem !important; display: block !important; } .snipcart .custom-promo-field input { background: var(--gd-bg) !important; color: var(--gd-text) !important; border: 1px solid var(--gd-border) !important; border-radius: 6px !important; padding: 0.75rem !important; font-size: 0.875rem !important; flex: 1 !important; transition: border-color 0.2s ease !important; } .snipcart .custom-promo-field input:focus { border-color: var(--gd-focus) !important; outline: 2px solid var(--gd-focus) !important; } .snipcart .custom-promo-field input::placeholder { color: var(--gd-muted) !important; } .snipcart .custom-promo-field button { background: var(--gd-accent) !important; color: white !important; border: none !important; border-radius: 6px !important; padding: 0.75rem 1rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .snipcart .custom-promo-field button:hover:not(:disabled) { background: var(--gd-card-2) !important; border: 1px solid var(--gd-accent) !important; color: var(--gd-accent) !important; } .snipcart .custom-promo-field button:disabled { background: var(--gd-muted) !important; cursor: not-allowed !important; opacity: 0.6 !important; } .snipcart .custom-promo-field #promo-message.success { color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; border-radius: 4px !important; padding: 0.5rem !important; margin-top: 0.5rem !important; } .snipcart .custom-promo-field #promo-message.error { color: var(--gd-error) !important; background: rgba(248, 113, 113, 0.1) !important; border: 1px solid rgba(248, 113, 113, 0.3) !important; border-radius: 4px !important; padding: 0.5rem !important; margin-top: 0.5rem !important; } /* Responsive pour mobile */ @media (max-width: 768px) { .snipcart .custom-promo-field > div:nth-child(2) { flex-direction: column !important; gap: 0.5rem !important; } .snipcart .custom-promo-field button { width: 100% !important; } } }