/* Theme Name: Thème Enfant WooFood Theme URI: https://focaccia-palaiseau.fr Description: Thème enfant du thème parent WooFood — surcharges visuelles uniquement (palette, typographie, mise en page mobile). Ce thème NE remplace PAS WooFood : il en dépend et hérite de toutes ses fonctionnalités. Pour fonctionner, le thème parent "WooFood" doit être installé. Author: Focaccia Author URI: https://focaccia-palaiseau.fr Template: woofood Version: 1.4.7 Text Domain: woofood-child Tags: food, restaurant, woocommerce, woofood, child-theme */ /* ================================================================ WOOFOOD BISTRO — CHILD THEME v1.0 Hérite de WooFood (parent) — surcharge purement visuelle. PALETTE : Charbon #1A1A1A (texte, header, footer) Charbon clair #2D2D2D Crème #FAFAF7 (fond page) Off-white #FFFFFF (cartes) Moutarde #D4A017 (accent, prix, CTA) Moutarde clair #E6B73D (hover) Brique #B33A3A (erreurs, badges) Olive #5D6B3C (succès) Gris doux #6B6B6B (texte secondaire) Bordure #E5E1D8 TYPOGRAPHIE : Titres : Cabinet Grotesk (ou fallback : Inter 800) Corps : Inter 400-700 ⚠ Ce fichier est chargé APRÈS le parent et après focaccia-modern.css. ================================================================ */ /* ---------------------------------------------------------------- FONTS — async via display=swap ---------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display&display=swap'); /* ---------------------------------------------------------------- 1. VARIABLES ---------------------------------------------------------------- */ :root { --bs-charcoal: #1A1A1A; --bs-charcoal-l: #2D2D2D; --bs-charcoal-s: #4A4A4A; --bs-cream: #FAFAF7; --bs-cream-dk: #F0EDE3; --bs-white: #FFFFFF; --bs-mustard: #D4A017; --bs-mustard-l: #E6B73D; --bs-mustard-dk: #A07D11; --bs-brick: #B33A3A; --bs-olive: #5D6B3C; --bs-muted: #6B6B6B; --bs-muted-l: #9A9A9A; --bs-border: #E5E1D8; --bs-border-d: #C9C3B3; --bs-shadow-xs: 0 1px 2px rgba(26, 26, 26, .05); --bs-shadow-sm: 0 2px 8px rgba(26, 26, 26, .06), 0 1px 2px rgba(26, 26, 26, .04); --bs-shadow-md: 0 6px 18px rgba(26, 26, 26, .10), 0 2px 6px rgba(26, 26, 26, .05); --bs-shadow-lg: 0 14px 32px rgba(26, 26, 26, .13); --bs-radius-xs: 4px; --bs-radius-sm: 8px; --bs-radius: 14px; --bs-radius-lg: 20px; --bs-ease: cubic-bezier(.4, 0, .2, 1); --bs-dur: .2s; --bs-t: var(--bs-dur) var(--bs-ease); --bs-font-display: 'DM Serif Display', Georgia, serif; --bs-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ---------------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------------- */ body { color: var(--bs-charcoal) !important; font-family: var(--bs-font-body) !important; font-size: 15px !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--bs-font-display) !important; font-weight: 400 !important; letter-spacing: -.5px !important; line-height: 1.1 !important; color: var(--bs-charcoal) !important; } /* Liens dans les titres : pas de bleu — garder la couleur du titre */ h1 a, h2 a, h3 a, h4 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, .entry-title a, .page-title a { color: var(--bs-charcoal) !important; text-decoration: none !important; } .entry-title a:hover, .page-title a:hover { color: var(--bs-mustard-dk) !important; } h5, h6 { font-family: var(--bs-font-body) !important; font-weight: 700 !important; letter-spacing: -.2px !important; text-transform: uppercase; font-size: 12px !important; } h1 { font-size: 2.6rem !important; } h2 { font-size: 2rem !important; } h3 { font-size: 1.5rem !important; } p { color: var(--bs-charcoal-s) !important; } /* ---------------------------------------------------------------- 3. HEADER / NAVBAR — charbon profond FALLBACKS AGRESSIFS : on n'attend plus le Customizer. Si l'utilisateur règle les couleurs dans Apparence→Personnaliser, les valeurs inline les écrasent. Sinon ce bloc gagne. ---------------------------------------------------------------- */ .navbar, .header, .bsnav-mobile .navbar, body .header { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; border-color: var(--bs-charcoal) !important; box-shadow: 0 1px 0 rgba(26, 26, 26, .08) !important; min-height: 70px !important; padding: 10px 24px !important; } /* Liens menu — blanc crème par défaut */ body .header .navbar-nav li a, body .bsnav-mobile .navbar-nav li a, .navbar-default .navbar-nav>li>a, .header-cart, .header-cart a, .cart-icon, .cart-icon a, .cart-icon i, .cart-icon span, .header-cart span, .header-cart i { color: var(--bs-cream) !important; } /* Top bar (compteur "X dans le panier") */ .header-cart-items span, .welcome-message-header { color: var(--bs-cream) !important; } /* Hamburger toggler */ .navbar-toggler i, .navbar-toggler .navbar-toggler-icon, .navbar-toggler .navbar-toggler-icon::after, .navbar-toggler .navbar-toggler-icon::before { color: var(--bs-cream) !important; background: var(--bs-cream) !important; } .navbar-brand { font-family: var(--bs-font-display) !important; transition: opacity var(--bs-t) !important; } .navbar-brand:hover { opacity: .85 !important; } .navbar-brand>img { max-height: 50px !important; width: auto !important; } .navbar-default .navbar-nav>li>a, .bsnav-mobile .navbar-nav .nav-item .nav-link { font-family: var(--bs-font-body) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; padding: 24px 20px !important; transition: color var(--bs-t) !important; position: relative !important; } /* Indicateur actif/hover moutarde */ .navbar-default .navbar-nav>li>a::before { content: '' !important; position: absolute !important; bottom: 16px !important; left: 50% !important; width: 6px !important; height: 6px !important; background: var(--bs-mustard) !important; border-radius: 50% !important; transform: translateX(-50%) scale(0) !important; transition: transform var(--bs-t) !important; } .navbar-default .navbar-nav>li>a:hover::before, .navbar-default .navbar-nav>.active>a::before { transform: translateX(-50%) scale(1) !important; } /* Dropdown */ .dropdown-menu { border-radius: var(--bs-radius-sm) !important; box-shadow: var(--bs-shadow-lg) !important; border: 1px solid var(--bs-border) !important; background: var(--bs-white) !important; padding: 6px 0 !important; margin-top: 4px !important; animation: bs-fade-in var(--bs-dur) var(--bs-ease); } .dropdown-item { padding: 10px 18px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--bs-charcoal) !important; transition: background var(--bs-t), color var(--bs-t) !important; border: none !important; } .dropdown-item:hover { background: var(--bs-cream) !important; color: var(--bs-mustard-dk) !important; } @keyframes bs-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Badge panier compteur */ .header-cart-count { background: var(--bs-mustard) !important; background-image: none !important; color: var(--bs-charcoal) !important; font-family: var(--bs-font-body) !important; font-weight: 800 !important; font-size: 11px !important; width: 19px !important; height: 19px !important; line-height: 19px !important; border-radius: 50% !important; border: 2px solid var(--bs-charcoal) !important; top: -5px !important; right: -6px !important; } /* ---------------------------------------------------------------- 4. ZONE PRINCIPALE ---------------------------------------------------------------- */ .main-inner { padding-top: 1.25rem !important; padding-bottom: 140px !important; } @media (max-width: 768px) { .main-inner { padding-top: 0.75rem !important; } } .home .wrapper, .single-post .wrapper, .archive .wrapper { background: #ffffff !important; } .container { max-width: 1280px !important; } /* ---------------------------------------------------------------- 5. BANDEAUX CATÉGORIES — style éditorial bistro ---------------------------------------------------------------- */ .panel-heading, .panel-heading[style], .card-header, .wf-section-title, .woofood-section-title, .woofood-cat-title, .woofood-category-heading, .wf-category-header, [class*="cat-heading"], [class*="category-heading"], .panel-default>.panel-heading { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: var(--bs-cream) !important; border: none !important; border-radius: var(--bs-radius) var(--bs-radius) 0 0 !important; padding: 22px 28px !important; font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 1.4rem !important; letter-spacing: -.3px !important; position: relative !important; overflow: hidden !important; } /* Élément décoratif : tirets moutarde (avant le +) */ .panel-heading::after, .card-header::after { content: '' !important; position: absolute !important; right: 52px !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 2px !important; background: var(--bs-mustard) !important; border-radius: 2px !important; opacity: .6 !important; } .panel-heading .panel-title, .panel-heading a, .panel-heading span, .card-header a, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { color: var(--bs-cream) !important; font-family: var(--bs-font-display) !important; font-weight: 400 !important; text-decoration: none !important; } .panel-heading .accordion-plus-icon, .panel-heading [class*="icon-"], .card-header [class*="icon-"] { color: var(--bs-mustard) !important; font-size: 18px !important; } .panel:not(.active) .panel-heading, .panel .panel-heading.collapsed, .panel-heading[aria-expanded="false"] { border-radius: var(--bs-radius) !important; } /* ---------------------------------------------------------------- 6. CARTES PRODUITS — style menu bistro éditorial ---------------------------------------------------------------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; border-bottom: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-xs) !important; transition: box-shadow var(--bs-t), border-color var(--bs-t), transform var(--bs-t) !important; overflow: hidden !important; display: flex !important; align-items: center !important; height: auto !important; min-height: 100px !important; padding: 16px 20px !important; margin: 0 0 10px 0 !important; width: 100% !important; position: relative !important; } .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { box-shadow: var(--bs-shadow-md) !important; border-color: var(--bs-charcoal) !important; transform: translateY(-2px) !important; } /* Liseré moutarde au hover */ .woocommerce ul.products li.product::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: var(--bs-mustard) !important; opacity: 0 !important; transition: opacity var(--bs-t) !important; } .woocommerce ul.products li.product:hover::before { opacity: 1 !important; } /* Image produit — carré arrondi (style éditorial food magazine) */ .woocommerce ul.products li.product a img { width: 84px !important; height: 84px !important; object-fit: cover !important; border-radius: var(--bs-radius-sm) !important; border: none !important; position: static !important; float: none !important; flex-shrink: 0 !important; margin: 0 !important; transition: transform .35s var(--bs-ease), filter .35s var(--bs-ease) !important; filter: saturate(.95) !important; } .woocommerce ul.products li.product:hover a img { transform: scale(1.04) !important; filter: saturate(1.1) !important; } /* Titre produit — serif élégant */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 { font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1.2 !important; letter-spacing: -.3px !important; color: var(--bs-charcoal) !important; margin: 0 !important; padding: 0 16px !important; width: auto !important; flex: 1 1 auto !important; white-space: normal !important; } /* Prix — moutarde, sans-serif gras */ .woocommerce ul.products li.product .price { color: var(--bs-charcoal) !important; font-family: var(--bs-font-body) !important; font-weight: 800 !important; font-size: 17px !important; background: transparent !important; float: none !important; margin: 0 14px !important; max-width: none !important; width: auto !important; flex-shrink: 0 !important; letter-spacing: -.4px !important; position: relative !important; } /* Souligné moutarde sous le prix */ .woocommerce ul.products li.product .price::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -3px !important; height: 3px !important; background: var(--bs-mustard) !important; border-radius: 2px !important; } /* Bouton ajouter — charbon avec texte crème bien contrasté */ html body .woocommerce ul.products li.product .button, html body .woocommerce ul.products li.product a.button, html body .woocommerce ul.products li.product .button:visited, html body .woocommerce ul.products li.product .button:link { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: none !important; border-radius: var(--bs-radius-sm) !important; padding: 10px 18px !important; font-family: var(--bs-font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; margin: 0 !important; float: none !important; max-width: none !important; width: auto !important; flex-shrink: 0 !important; cursor: pointer !important; transition: background var(--bs-t), color var(--bs-t), transform var(--bs-t), box-shadow var(--bs-t) !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; } /* Tous les enfants du bouton héritent du blanc */ html body .woocommerce ul.products li.product .button *, html body .woocommerce ul.products li.product .button span, html body .woocommerce ul.products li.product .button i { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* =========================================================== VRAIE STRUCTURE WOOFOOD : bouton dans .woofood-product-loop
  • Ajouter
    • Spécificité haute pour battre le plugin (.woofood-product-loop .product-button .button) =========================================================== */ html body .woofood-product-loop .product-button .button, html body .woofood-product-loop .product-button a.button, html body .woofood-product-loop .product-button .woofood-quickview-button, html body .woofood-product-loop a.woofood-quickview-button, html body li.woofood-product-loop .product-button .button { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: none !important; border-radius: var(--bs-radius-sm) !important; padding: 10px 18px !important; font-family: var(--bs-font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; margin: 0 !important; float: none !important; display: inline-block !important; cursor: pointer !important; transition: all var(--bs-t) !important; box-shadow: none !important; text-shadow: none !important; line-height: 1 !important; opacity: 1 !important; } html body .woofood-product-loop .product-button .button:hover, html body .woofood-product-loop .product-button a.button:hover, html body .woofood-product-loop a.woofood-quickview-button:hover { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(212, 160, 23, .30) !important; } /* Hover : moutarde avec texte charbon */ html body .woocommerce ul.products li.product .button:hover, html body .woocommerce ul.products li.product a.button:hover { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; opacity: 1 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(212, 160, 23, .30) !important; } html body .woocommerce ul.products li.product .button:hover *, html body .woocommerce ul.products li.product .button:hover span { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* ---------------------------------------------------------------- 7. PRIX GLOBAUX (.amount partout) ---------------------------------------------------------------- */ .woocommerce-Price-amount, .woocommerce-Price-amount bdi, .price .amount, .price .woocommerce-Price-amount, .woocommerce ul.cart_list li .amount, .woocommerce ul.product_list_widget li .amount, .woocommerce-mini-cart .amount, .cart_list .amount, .product-price .amount, .product-subtotal .amount { color: var(--bs-charcoal) !important; background: transparent !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; } /* Sous-total : texte charbon sur fond clair */ .cart-subtotal .amount, .cart-subtotal th, .cart-subtotal td { color: var(--bs-charcoal) !important; font-weight: 800 !important; font-family: var(--bs-font-display) !important; } /* Total : fond clair, texte charbon */ html body .order-total, html body .order-total th, html body .order-total td, html body tr.order-total th, html body tr.order-total td { background: transparent !important; background-color: transparent !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* On sépare l'astérisque (*) pour ne pas appliquer la bordure à tous les enfants */ html body .order-total * { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* Ligne moutarde uniquement sur les cellules th et td */ html body .order-total th, html body .order-total td, html body tr.order-total th, html body tr.order-total td { border-top: 2px solid var(--bs-mustard) !important; } html body .order-total .amount, html body .order-total .amount *, html body .order-total .amount bdi { color: var(--bs-mustard) !important; -webkit-text-fill-color: #000000 !important; font-weight: 800 !important; font-family: var(--bs-font-display) !important; font-size: 1.3rem !important; } html body .order-total strong { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* Petit texte "(dont X TVA)" : gris doux */ html body .order-total small, html body .order-total .includes_tax, html body .order-total .includes_tax * { color: var(--bs-charcoal-s) !important; -webkit-text-fill-color: var(--bs-charcoal-s) !important; font-size: .85em !important; font-weight: 500 !important; } /* ---------------------------------------------------------------- 8. BOUTONS WOOCOMMERCE — charbon par défaut, moutarde CTA ---------------------------------------------------------------- */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .btn, .btn-primary, .button { border-radius: var(--bs-radius-sm) !important; transition: all var(--bs-t) !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; font-size: 12px !important; padding: 13px 24px !important; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--bs-charcoal) !important; background-image: none !important; color: var(--bs-cream) !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; opacity: 1 !important; transform: translateY(-1px) !important; box-shadow: 0 5px 14px rgba(212, 160, 23, .30) !important; } /* CTA principal en moutarde direct */ .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--bs-mustard) !important; background-image: none !important; color: var(--bs-charcoal) !important; border: none !important; font-size: 13px !important; padding: 25px 28px !important; letter-spacing: 1.5px !important; font-weight: 800 !important; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--bs-mustard-l) !important; color: var(--bs-charcoal) !important; box-shadow: 0 6px 18px rgba(212, 160, 23, .40) !important; transform: translateY(-1px) !important; } .woocommerce #respond input#submit.alt.disabled, .woocommerce a.button.alt.disabled, .woocommerce button.button.alt.disabled, .woocommerce input.button.alt.disabled { background: var(--bs-border-d) !important; color: var(--bs-muted) !important; cursor: not-allowed !important; } .btn-primary { background: var(--bs-charcoal) !important; border-color: var(--bs-charcoal) !important; color: var(--bs-cream) !important; } .btn-primary:hover { background: var(--bs-mustard) !important; border-color: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; } /* Code promo / update cart */ .woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"] { background: var(--bs-charcoal) !important; background-image: none !important; color: var(--bs-cream) !important; } .woocommerce button[name="apply_coupon"]:hover, .woocommerce button[name="update_cart"]:hover { background: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; } /* ---------------------------------------------------------------- 9. BOUTONS QUANTITÉ (+/-) ---------------------------------------------------------------- */ .qty-change-button { background: var(--bs-charcoal) !important; border-radius: var(--bs-radius-sm) !important; border: none !important; width: 34px !important; height: 34px !important; transition: background var(--bs-t), transform var(--bs-t) !important; } .qty-change-button:hover { background: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; transform: scale(1.08) !important; } .qty-change-button i.woofood-icon-plus, .qty-change-button i.woofood-icon-minus { color: var(--bs-cream) !important; -webkit-text-fill-color: var(--bs-cream) !important; } .qty-change-button:hover i { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* Input quantité — TOUS les variants possibles WooFood/WooCommerce .quantity .qty (cart), .wf_product_view .input-text.qty.text (popup), input.qty, input[type="number"].qty */ html body .quantity .qty, html body input.qty, html body input[type="number"].qty, html body input.input-text.qty, html body .input-text.qty.text, html body .wf_product_view .input-text.qty.text, html body .wf_product_view input.qty, html body input[name="quantity"], html body input[type="number"][name="quantity"] { border: 1.5px solid var(--bs-border) !important; border-radius: var(--bs-radius-sm) !important; text-align: center !important; font-weight: 700 !important; font-family: var(--bs-font-body) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; background: var(--bs-white) !important; background-color: var(--bs-white) !important; width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 38px !important; padding: 0 4px !important; margin: 0 4px !important; font-size: 15px !important; line-height: 38px !important; display: inline-block !important; vertical-align: middle !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; -moz-appearance: textfield !important; appearance: textfield !important; } /* Masquer les flèches spinner du navigateur */ html body input.qty::-webkit-inner-spin-button, html body input.qty::-webkit-outer-spin-button, html body .input-text.qty.text::-webkit-inner-spin-button, html body .input-text.qty.text::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* CTA "AJOUTER AU PANIER" — pages produit & panier (HORS popup quickview). Le popup quickview est désormais stylé par wf_ajax_quickview.css côté plugin (architecture flexbox propre, identité moutarde). */ html body .single_add_to_cart_button, html body .woocommerce .single_add_to_cart_button, html body button.single_add_to_cart_button { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: none !important; border-radius: var(--bs-radius-sm) !important; padding: 14px 22px !important; font-family: var(--bs-font-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-align: center !important; cursor: pointer !important; transition: all var(--bs-t) !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; /* Annule le `float: right` du parent main.css ligne 1533 */ float: none !important; clear: both !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } html body .single_add_to_cart_button:hover { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(212, 160, 23, .30) !important; } /* ---------------------------------------------------------------- 10. ACCORDÉON — sections catégories COLLÉES (style menu papier) VRAIE STRUCTURE WOOFOOD :
    ← contenu
    ...

    ← parasites à masquer ---------------------------------------------------------------- */ /* TUER les BR et P parasites entre les accordéons. Trick : ces éléments prennent la line-height du parent. On force display:none MAIS aussi 0 dimensions pour les cas où display:none serait écrasé. */ .page-description br, .page-description>p:empty, .wrapper>br, .wrapper>p:empty, .col-md-8>br, .col-md-8>p:empty, .main-inner br { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; overflow: hidden !important; } /* Pas de trick font-size:0 — risqué (casse les titres). Le filtre PHP côté serveur supprime déjà les
    et

    vides. Les règles display:none ci-dessus suffisent pour le résiduel. */ /* Titre dans le panel-heading */ .panel-heading .panel-title { font-size: 1.4rem !important; line-height: 1.2 !important; } /* Reset float du plugin (margin géré plus bas avec la bonne valeur) */ .woofood-accordion, .col-md-8 .woofood-accordion, .page-description .woofood-accordion { float: none !important; } /* p avec juste du whitespace : font-size 0 → collapse à 0 */ .page-description>p, .wrapper>p { margin-top: 0 !important; margin-bottom: 0 !important; } /* Override l'INLINE style="background:#cc0000;" du .panel-heading en passant par une cascade de sélecteurs très spécifique */ html body .woofood-accordion .panel-heading, html body .woofood-accordion .panel-heading.panel-heading-title, html body .woofood-accordion>a .panel-heading, html body .woofood-accordion>a .panel-heading.panel-heading-title { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; } /* Container accordéon WooFood — spécificité élevée pour gagner sur les autres règles */ html body .woofood-accordion, html body .page-description .woofood-accordion, html body .col-md-8 .woofood-accordion { background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; margin: 0 0 3px 0 !important; padding: 0 !important; border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-xs) !important; overflow: hidden !important; position: relative !important; } /* Dernier : pas de marge inutile */ html body .woofood-accordion:last-of-type, html body .page-description .woofood-accordion:last-of-type { margin-bottom: 0 !important; } /* Petit lift au hover (effet carte interactive) */ .woofood-accordion:hover { box-shadow: var(--bs-shadow-sm) !important; border-color: var(--bs-border-d) !important; } /* ÉCRASE TOUTES les marges/padding par défaut browser sur h4 dans le bandeau */ html body .woofood-accordion .panel-heading h1, html body .woofood-accordion .panel-heading h2, html body .woofood-accordion .panel-heading h3, html body .woofood-accordion .panel-heading h4, html body .woofood-accordion .panel-heading h5, html body .woofood-accordion .panel-heading h6, html body .woofood-accordion .panel-heading .panel-title, html body .woofood-accordion h4.panel-title { margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; line-height: 1 !important; height: auto !important; display: inline-flex !important; align-items: center !important; } /* Hauteur auto — laisse Bootstrap gérer l'animation collapse naturellement */ html body div.woofood-accordion { height: auto !important; min-height: 0 !important; } /* L'ancien clamp via :has() a été RETIRÉ : il cassait l'animation Bootstrap sur les clics. Maintenant le .panel-heading flexbox gère la hauteur compacte. */ /* Lien wrapper — FLEXBOX pour ignorer le text node ' ' entre et .panel-heading généré par le plugin (cause des 30px parasites en hauteur) */ .woofood-accordion>a, .woofood-accordion>a:hover, .woofood-accordion>a:focus, .woofood-accordion>a:visited, .woofood-accordion>a:active { display: flex !important; align-items: stretch !important; background: transparent !important; text-decoration: none !important; border: none !important; padding: 0 !important; margin: 0 !important; outline: none !important; color: var(--bs-cream) !important; font-size: 0 !important; line-height: 0 !important; } /* Le .panel-heading prend toute la largeur du en flex et restaure font-size */ .woofood-accordion>a>.panel-heading { flex: 1 1 auto !important; font-size: 1rem !important; line-height: 1 !important; } /* TOUT élément textuel dans le bandeau prend la couleur crème */ .woofood-accordion>a *, .woofood-accordion .panel-heading, .woofood-accordion .panel-heading *, .woofood-accordion .panel-heading-title, .woofood-accordion .panel-heading-title *, .woofood-accordion .panel-heading h1, .woofood-accordion .panel-heading h2, .woofood-accordion .panel-heading h3, .woofood-accordion .panel-heading h4, .woofood-accordion .panel-heading h5, .woofood-accordion .panel-heading h6, .woofood-accordion .panel-heading span, .woofood-accordion .panel-heading p, .woofood-accordion .panel-heading a { color: var(--bs-cream) !important; text-decoration: none !important; } /* Le VRAI bandeau visible = .panel-heading INSIDE le Hauteur FORCÉE pour éviter que le plugin gonfle le bandeau */ .woofood-accordion .panel-heading, html body .woofood-accordion .panel-heading, html body .woofood-accordion .panel-heading.panel-heading-title { background: var(--bs-charcoal) !important; background-image: none !important; filter: none !important; color: var(--bs-cream) !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; padding: 0 24px !important; border: none !important; border-radius: 0 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; transition: background var(--bs-t) !important; line-height: 1 !important; overflow: hidden !important; } .woofood-accordion>a:hover .panel-heading { background: var(--bs-charcoal-l) !important; } /* Titre — spécificité haute pour battre le plugin (3 classes) */ .woofood-accordion .panel-heading .panel-title, html body .woofood-accordion .panel-heading .panel-title, html body .woofood-accordion .panel-heading h4.panel-title { font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 1.4rem !important; letter-spacing: -.3px !important; color: var(--bs-cream) !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; float: none !important; max-width: none !important; flex: 1 1 auto !important; height: auto !important; display: flex !important; align-items: center !important; } /* Image emoji dans le bandeau — spécificité haute */ .woofood-accordion .panel-heading img, html body .woofood-accordion .panel-heading img { margin: 0 12px 0 0 !important; max-width: 32px !important; max-height: 32px !important; width: 32px !important; height: 32px !important; padding: 0 !important; float: none !important; border-radius: 50% !important; flex-shrink: 0 !important; display: block !important; } /* ICÔNE + / − — styling propre de l'icône WooFood native */ .woofood-accordion .accordion-plus-icon { text-align: right !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .woofood-accordion .accordion-plus-icon i, .woofood-accordion .accordion-plus-icon .woofood-icon-plus-circled { color: var(--bs-mustard) !important; font-size: 22px !important; line-height: 1 !important; background: transparent !important; border: none !important; -webkit-text-fill-color: var(--bs-mustard) !important; transition: transform .3s var(--bs-ease), color var(--bs-t) !important; } /* Hover : moutarde plus clair */ .woofood-accordion>a:hover .accordion-plus-icon i { color: var(--bs-mustard-l) !important; -webkit-text-fill-color: var(--bs-mustard-l) !important; } /* Section fermée (collapsed) : pas de rotation, "+" affiché */ .woofood-accordion>a.collapsed .accordion-plus-icon i:before, .woofood-accordion .panel-heading.collapsed .accordion-plus-icon i:before { transform: rotate(0deg) !important; -webkit-transform: rotate(0deg) !important; } /* Section ouverte : rotation 45° → "+" devient "×" */ .woofood-accordion>a:not(.collapsed) .accordion-plus-icon i:before { transform: rotate(45deg) !important; -webkit-transform: rotate(45deg) !important; display: inline-block !important; } /* Aucun ::before ni ::after sur le — on garde l'icône native du plugin */ .woofood-accordion>a::before, .woofood-accordion>a::after { display: none !important; content: none !important; } /* Corps du panel — pas de margin/padding parasite */ .woofood-accordion .panel-collapse { background: var(--bs-white) !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--bs-cream-dk) !important; } /* NE PAS forcer display: none — laisse Bootstrap gérer le collapse/show. La règle native du plugin (.woofood-accordion .collapse:not(.show) { display: none; }) sans !important laisse Bootstrap animer correctement via .collapsing. */ .woofood-accordion .panel-body { padding: 0 !important; margin: 0 !important; background: var(--bs-white) !important; } /* Smooth Bootstrap collapse transition */ .woofood-accordion .panel-collapse.collapsing, .woofood-accordion .collapsing { transition: height .35s ease !important; overflow: hidden !important; } /* Ancien CSS .panel — DÉSACTIVÉ via override (laissé en commentaire dans le code mais on neutralise) */ .panel { border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; margin: 0 !important; background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; border-bottom: none !important; position: relative !important; } /* Premier panel : coins arrondis en haut */ .panel-group .panel:first-of-type { border-radius: var(--bs-radius) var(--bs-radius) 0 0 !important; } /* Dernier panel : coins arrondis en bas + bordure inférieure */ .panel-group .panel:last-of-type { border-radius: 0 0 var(--bs-radius) var(--bs-radius) !important; border-bottom: 1px solid var(--bs-border) !important; } /* Groupe d'accordéon — zéro espace global + ombre globale */ .panel-group { margin: 0 !important; padding: 0 !important; border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-sm) !important; overflow: hidden !important; } .panel-group .panel+.panel { margin-top: 0 !important; } /* Aucun espace entre panels */ .panel+.panel, .panel-group .panel+.panel { border-top: 1px solid var(--bs-cream-dk) !important; } /* Tuer tous les espaces possibles entre les panels (BRs, spacers) */ .panel-group br, .panel-group .wp-block-spacer, .panel-group hr { display: none !important; } /* Bandeaux catégories — padding vertical réduit + bord arrondi seul sur 1er */ .panel-heading, .card-header, [class*="cat-heading"] { padding-top: 14px !important; padding-bottom: 14px !important; position: relative !important; border-radius: 0 !important; margin: 0 !important; } /* Bandeau du 1er panel : arrondi haut */ .panel-group .panel:first-of-type .panel-heading, .panel-group .panel:first-of-type .card-header { border-radius: var(--bs-radius) var(--bs-radius) 0 0 !important; } /* Bandeau du dernier panel fermé : arrondi bas */ .panel-group .panel:last-of-type:not(.active) .panel-heading, .panel-group .panel:last-of-type .panel-heading.collapsed { border-radius: 0 0 var(--bs-radius) var(--bs-radius) !important; } /* Corps de panel : aucun padding/margin → les produits remplissent toute la largeur */ .panel-collapse, .panel-collapse.collapse.show, .panel-collapse.collapse.in { margin: 0 !important; padding: 0 !important; } .panel-body { padding: 0 !important; margin: 0 !important; } /* Le "+" qui flottait sous le bandeau : on le ramène À L'INTÉRIEUR en position absolute, centré verticalement à droite */ .accordion-plus-icon, .panel-heading .accordion-plus-icon, .panel-heading+.accordion-plus-icon, .panel-heading-plus { position: absolute !important; top: 0 !important; right: 16px !important; bottom: 0 !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; z-index: 2 !important; } .accordion-plus-icon i, .panel-heading-plus i { color: var(--bs-mustard) !important; font-size: 20px !important; font-weight: 700 !important; background: transparent !important; border: none !important; -webkit-text-fill-color: var(--bs-mustard) !important; } /* Si le + est juste après le panel-heading dans le DOM, on le superpose au bandeau (négatif margin) */ .panel-heading+.accordion-plus-icon, .panel-heading+[class*="plus-icon"] { margin-top: -52px !important; position: relative !important; top: auto !important; bottom: auto !important; height: 0 !important; text-align: right !important; padding-right: 16px !important; z-index: 3 !important; } .rotate-icon { transition: transform .3s var(--bs-ease) !important; } .collapsed .rotate-icon { transform: rotate(0deg) !important; } a:not(.collapsed) .rotate-icon { transform: rotate(135deg) !important; } /* Ancienne règle padding 8px supprimée — créait un encadré blanc autour des produits */ /* ---------------------------------------------------------------- 11. PANIER SIDEBAR ---------------------------------------------------------------- */ .widget_shopping_cart { border-radius: var(--bs-radius-lg) !important; box-shadow: var(--bs-shadow-lg) !important; overflow: hidden !important; border: 1px solid var(--bs-border) !important; background: var(--bs-white) !important; } .widget-title { font-family: var(--bs-font-display) !important; border-radius: 0 !important; font-size: 1.3rem !important; font-weight: 400 !important; letter-spacing: -.3px !important; text-transform: none !important; padding: 20px 24px !important; } .widget_shopping_cart_content { background: var(--bs-white) !important; padding: 20px 24px !important; border-radius: 0 0 var(--bs-radius-lg) var(--bs-radius-lg) !important; } .woocommerce ul.cart_list li { border-bottom: 1px dashed var(--bs-border) !important; padding-bottom: 14px !important; margin-bottom: 12px !important; } .woocommerce ul.cart_list li:last-child { border-bottom: none !important; } /* ---------------------------------------------------------------- 12. PAGE PRODUIT FICHE ---------------------------------------------------------------- */ .woocommerce div.product { background: var(--bs-white) !important; border-radius: var(--bs-radius-lg) !important; box-shadow: var(--bs-shadow-sm) !important; padding: 32px !important; overflow: hidden !important; border: 1px solid var(--bs-border) !important; } .entry-summary .product_title { font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 2.2rem !important; letter-spacing: -.8px !important; border-bottom: 2px solid var(--bs-charcoal) !important; padding-bottom: 16px !important; margin-bottom: 16px !important; color: var(--bs-charcoal) !important; } .woocommerce div.product p.price, .woocommerce div.product span.price, .wf_product_view .price { background: transparent !important; color: var(--bs-charcoal) !important; border: none !important; border-left: none !important; padding: 8px 0 !important; font-family: var(--bs-font-body) !important; font-weight: 800 !important; font-size: 1.8rem !important; letter-spacing: -.5px !important; } .woocommerce-product-details__short-description { color: var(--bs-charcoal-s) !important; font-size: 15px !important; line-height: 1.7 !important; font-family: var(--bs-font-body) !important; } /* Onglets */ .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; transition: border-color var(--bs-t), color var(--bs-t) !important; padding: 10px 18px !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent !important; border-bottom-color: var(--bs-mustard) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--bs-muted) !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 1.3px !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--bs-charcoal) !important; } /* ---------------------------------------------------------------- 13. VARIATIONS PRODUIT ---------------------------------------------------------------- */ form.variations_form.cart .variations tbody tr { border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; background: var(--bs-white) !important; padding: 18px 22px !important; margin-bottom: 10px !important; } form.variations_form.cart .variations th.label { font-family: var(--bs-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; color: var(--bs-muted) !important; text-transform: uppercase !important; background: var(--bs-white) !important; } /* ---------------------------------------------------------------- 14. TABLEAUX PANIER / CHECKOUT ---------------------------------------------------------------- */ .woocommerce table.shop_table { border-radius: var(--bs-radius) !important; overflow: hidden !important; box-shadow: var(--bs-shadow-xs) !important; border: 1px solid var(--bs-border) !important; background: var(--bs-white) !important; } .woocommerce table.shop_table thead th { background: var(--bs-cream-dk) !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--bs-charcoal) !important; border-bottom: 2px solid var(--bs-charcoal) !important; } /* Miniature produit dans le panier (desktop) — le parent la limite à 32px, trop petit. On l'agrandit et on l'arrondit pour matcher le style. */ body.woocommerce-cart table.cart td.product-thumbnail img, body.woocommerce-checkout table.cart td.product-thumbnail img { width: 56px !important; height: 56px !important; object-fit: cover !important; border-radius: var(--bs-radius-sm) !important; border: 1px solid var(--bs-border) !important; box-shadow: none !important; max-width: none !important; } /* ---------------------------------------------------------------- 15. FORMULAIRES ---------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea { border-radius: var(--bs-radius-sm) !important; border: 1.5px solid var(--bs-border) !important; padding: 12px 16px !important; transition: border-color var(--bs-t), box-shadow var(--bs-t) !important; background: var(--bs-white) !important; outline: none !important; color: var(--bs-charcoal) !important; font-family: var(--bs-font-body) !important; font-size: 14px !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { border-color: var(--bs-charcoal) !important; box-shadow: 0 0 0 3px rgba(212, 160, 23, .18) !important; } select { border-radius: var(--bs-radius-sm) !important; border: 1.5px solid var(--bs-border) !important; background: var(--bs-white) !important; color: var(--bs-charcoal) !important; } select:focus { border-color: var(--bs-charcoal) !important; box-shadow: 0 0 0 3px rgba(212, 160, 23, .18) !important; outline: none !important; } label { font-family: var(--bs-font-body) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .5px !important; color: var(--bs-charcoal) !important; text-transform: uppercase !important; } .woocommerce .woocommerce-form-login { border-radius: var(--bs-radius-lg) !important; box-shadow: var(--bs-shadow-md) !important; border: 1px solid var(--bs-border) !important; background: var(--bs-white) !important; padding: 32px !important; } .showlogin, .showlogin:hover { background: var(--bs-charcoal) !important; border-radius: var(--bs-radius-sm) !important; color: var(--bs-cream) !important; padding: 10px 18px !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; text-decoration: none !important; display: inline-block !important; } /* ---------------------------------------------------------------- 16. MESSAGES WOOCOMMERCE ---------------------------------------------------------------- */ .woocommerce-message, .woocommerce-success { background: #F0F4E6 !important; border-left-color: var(--bs-olive) !important; border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0 !important; box-shadow: var(--bs-shadow-xs) !important; border-left-width: 5px !important; color: var(--bs-charcoal) !important; } .woocommerce-message::before { color: var(--bs-olive) !important; } .woocommerce-error { border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0 !important; border-left-color: var(--bs-brick) !important; background: #FBEAEA !important; box-shadow: var(--bs-shadow-xs) !important; border-left-width: 5px !important; } .woocommerce-info { border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0 !important; border-left-color: var(--bs-mustard) !important; border-top-color: var(--bs-mustard) !important; background: #FBF5E0 !important; box-shadow: var(--bs-shadow-xs) !important; border-left-width: 5px !important; color: var(--bs-charcoal) !important; } .woocommerce-info::before { color: var(--bs-mustard-dk) !important; } /* ---------------------------------------------------------------- 17. CROIX SUPPRESSION ---------------------------------------------------------------- */ .woocommerce a.remove, .woocommerce-cart a.remove, .product-remove a.remove { color: var(--bs-charcoal) !important; background: var(--bs-cream) !important; border-radius: 50% !important; width: 26px !important; height: 26px !important; line-height: 24px !important; transition: background var(--bs-t), color var(--bs-t) !important; font-size: 1.1em !important; } .woocommerce a.remove:hover { background: var(--bs-brick) !important; color: var(--bs-cream) !important; } /* ---------------------------------------------------------------- 18. CARTES CATÉGORIES (square) ---------------------------------------------------------------- */ .square .content { border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-sm) !important; background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; transition: box-shadow var(--bs-t), transform var(--bs-t), border-color var(--bs-t) !important; } .square .content:hover { box-shadow: var(--bs-shadow-md) !important; border-color: var(--bs-charcoal) !important; transform: translateY(-3px) !important; } /* ---------------------------------------------------------------- 19. WOOFOOD TABS ---------------------------------------------------------------- */ .woofood-tabs-wrapper { background: var(--bs-white) !important; border-radius: var(--bs-radius-lg) !important; box-shadow: var(--bs-shadow-sm) !important; overflow: hidden !important; padding: 10px !important; border: 1px solid var(--bs-border) !important; } .woofood-tabs-menu .nav-item a { border-radius: var(--bs-radius-sm) !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 10px 16px !important; color: var(--bs-muted) !important; transition: background var(--bs-t), color var(--bs-t) !important; } .woofood-tabs-menu .nav-item a.active, .woofood-tabs-menu .nav-item a:hover { background: var(--bs-charcoal) !important; color: var(--bs-cream) !important; } /* ---------------------------------------------------------------- 20. FOOTER — fallback charbon si Customizer vide ---------------------------------------------------------------- */ .footer, body .footer { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; color: var(--bs-cream) !important; box-shadow: 0 -1px 0 rgba(26, 26, 26, .08) !important; padding-top: 40px !important; font-family: var(--bs-font-body) !important; } .footer a, .footer span, .footer i, body .footer a, body .footer span { color: var(--bs-cream) !important; transition: color var(--bs-t) !important; text-decoration: none !important; font-weight: 500 !important; } .footer a:hover { color: var(--bs-mustard) !important; } .footer h1, .footer h2, .footer h3, .footer h4 { font-family: var(--bs-font-display) !important; color: var(--bs-cream) !important; } /* widget-title — fallback charbon */ .widget-title, body .widget-title { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; color: var(--bs-cream) !important; } /* ---------------------------------------------------------------- 21. ACCESSIBILITÉ ---------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bs-mustard) !important; outline-offset: 2px !important; } /* ---------------------------------------------------------------- 22. ÉLÉMENTS DÉCORATIFS — touche bistro éditoriale ---------------------------------------------------------------- */ hr { border: none !important; height: 1px !important; background: var(--bs-charcoal) !important; margin: 32px 0 !important; position: relative !important; } em, .italic { font-style: italic !important; } blockquote { border-left: 4px solid var(--bs-mustard) !important; padding-left: 20px !important; font-family: var(--bs-font-display) !important; font-size: 1.4rem !important; font-style: italic !important; color: var(--bs-charcoal) !important; margin: 24px 0 !important; } /* ---------------------------------------------------------------- 23. RESPONSIVE MOBILE ---------------------------------------------------------------- */ @media screen and (max-width: 768px) { body { font-size: 14px !important; } h1 { font-size: 2rem !important; } h2 { font-size: 1.6rem !important; } h3 { font-size: 1.3rem !important; } .navbar { min-height: 58px !important; padding: 6px 14px !important; } .navbar-default .navbar-nav>li>a { padding: 14px 16px !important; } .navbar-default .navbar-nav>li>a::before { bottom: 8px !important; } .panel-heading, .card-header, [class*="cat-heading"] { font-size: 1.15rem !important; padding: 12px 18px !important; } .panel-heading::after, .card-header::after { right: 50px !important; width: 24px !important; } .panel { margin-bottom: 3px !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { border-radius: 12px !important; padding: 14px !important; min-height: 100px !important; margin-bottom: 8px !important; } .woocommerce ul.products li.product a img { width: 76px !important; height: 76px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 { font-size: 16px !important; padding: 0 12px !important; } .woocommerce ul.products li.product .price { font-size: 16px !important; margin: 0 8px !important; } .woocommerce ul.products li.product .button { min-height: 44px !important; padding: 10px 14px !important; font-size: 11px !important; } .qty-change-button { width: 40px !important; height: 40px !important; } .quantity .qty { width: 44px !important; height: 40px !important; } /* Sticky bas mobile */ .header-cart { border-radius: 18px 18px 0 0 !important; box-shadow: 0 -4px 24px rgba(26, 26, 26, .18) !important; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100% !important; float: none !important; margin-bottom: 16px !important; } } /* ---------------------------------------------------------------- 24. TRANSITIONS GLOBALES ---------------------------------------------------------------- */ a { transition: color var(--bs-t), opacity var(--bs-t) !important; } .header-cart { transition: opacity var(--bs-t) !important; } .header-cart:hover { opacity: .85 !important; } /* ---------------------------------------------------------------- 25. BANNIÈRE PROMO — encadré moutarde élégant Cible large : blocs avec fond rouge, paragraphes promo, blocs Gutenberg avec couleur de fond rouge ou personnalisée. ---------------------------------------------------------------- */ /* Bannière promo — UNIQUEMENT la classe précise .notification-bar. Les sélecteurs d'attribut [style*="cc0000"] ont été SUPPRIMÉS car ils matchaient aussi les .panel-heading du plugin (gonflait les accordéons). */ .notification-bar, .promo-banner, .wf-promo, .discount-banner { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: var(--bs-cream) !important; border-radius: var(--bs-radius) !important; padding: 24px 32px !important; margin: 20px auto !important; text-align: center !important; font-family: var(--bs-font-body) !important; font-size: 1rem !important; font-weight: 500 !important; letter-spacing: 0 !important; box-shadow: var(--bs-shadow-md) !important; position: relative !important; overflow: hidden !important; border: 2px solid var(--bs-mustard) !important; } /* Texte enfants dans la bannière promo */ .notification-bar *, .promo-banner *, .wf-promo *, .discount-banner * { color: var(--bs-cream) !important; background: transparent !important; } /* Titre dans la promo : moutarde gras */ .notification-bar strong, .notification-bar h4, .notification-bar h3, .promo-banner strong, .wf-promo strong { color: var(--bs-mustard) !important; font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 1.4rem !important; letter-spacing: -.3px !important; } /* Petite étoile décorative dans le coin */ .promo-banner::before, .wf-promo::before { content: '★' !important; position: absolute !important; top: 8px !important; left: 16px !important; color: var(--bs-charcoal) !important; font-size: 14px !important; opacity: .4 !important; } /* Code promo inline — VRAIE classe : .notification-code */ code, .promo-code, .notification-code, [class*="promo-code"], [class*="notification-code"] { background: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; padding: 4px 12px !important; border-radius: var(--bs-radius-xs) !important; font-family: var(--bs-font-body) !important; font-weight: 800 !important; letter-spacing: 1px !important; font-size: .95em !important; display: inline-block !important; margin: 0 2px !important; } /* Notification-bar : h4 (titre) en moutarde, p en crème */ .notification-bar h4, .notification-bar h3 { color: var(--bs-mustard) !important; font-family: var(--bs-font-display) !important; font-weight: 400 !important; font-size: 1.5rem !important; letter-spacing: -.3px !important; margin: 0 0 8px 0 !important; } .notification-bar p { color: var(--bs-cream) !important; background: transparent !important; margin: 4px 0 !important; font-size: .95rem !important; } .notification-bar p:last-child { font-size: .8rem !important; opacity: .7 !important; margin-top: 8px !important; font-style: italic !important; } /* ================================================================ FIN — WOOFOOD BISTRO CHILD THEME ================================================================ */ form.checkout_coupon.woocommerce-form-coupon { display: block !important; } .woocommerce-info { display: none; } .paragraphe { background-color: #003087; /* Bleu PayPal */ color: #ffffff; /* Texte blanc */ border: 2px solid #003087; /* Bordure bleue PayPal */ border-radius: 5px; padding: 20px; max-width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 0 auto; /* Centrer horizontalement */ } /* Les anciennes définitions rouges .notification-bar / .notification-code ont été supprimées : totalement écrasées par les blocs bistro (l. ~1792) via leurs !important. Conservées en backup .bak du fichier. */ .merchant-info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-family: Arial, sans-serif; } .merchant-info>* { margin: 0 5px; /* Ajuster l'espacement entre les éléments si nécessaire */ } .opening-hours { font-size: 14px; font-weight: bold; margin-bottom: 5px; } .opening-hours.open, .opening-hours.closed { color: #fff; border-radius: 20px; padding: 3px 8px; } .opening-hours.open { background-color: #4caf50; } .opening-hours.closed { background-color: #e0e0e0; color: #343434; } .merchant-info a { text-decoration: none; color: #333; } .merchant-info i { margin-right: 5px; } .notification { display: block; background-color: #ffc107; color: #fff; padding: 8px; border-radius: 5px; text-align: center; margin-bottom: 10px; } .pickup-only { color: red; font-weight: bold; font-size: 12px; margin-left: 5px; } /* ================================================================ PATCH MOBILE — barre cart-count sticky bottom (header-cart) Fond MOUTARDE charte graphique (var(--bs-mustard) = #D4A017), texte charbon — remplace le jaune vif par défaut du WooFood. Le badge compteur (rond "X") reste charbon pour contraste. ================================================================ */ @media screen and (max-width: 768px) { /* Barre "X dans le panier" — fond moutarde charte + texte charbon, COMPACTE */ html body .header-cart, html body .header-cart>a, html body .mini-cart-anchor, html body .mini-cart-anchor a, html body .mini-cart-anchor .button, html body .mobile-cart-button, html body .woofood-mobile-cart-button, html body .wf-mobile-cart-button, html body .woofood-floating-cart, html body .floating-cart-mobile, html body .wf-cart-mobile, html body div[class*="woofood-cart-mobile"], html body div[class*="wf-mobile-cart"], html body div[class*="floating-cart"], html body div[class*="mobile-cart-bar"] { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; background-image: none !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border: none !important; font-family: var(--bs-font-body) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.2px !important; text-transform: none !important; padding: 8px 16px !important; min-height: 0 !important; height: auto !important; line-height: 1.3 !important; border-radius: 0 !important; text-shadow: none !important; box-shadow: 0 -3px 12px rgba(0, 0, 0, .10) !important; } /* Icône panier — réduite */ html body .header-cart i, html body .header-cart svg, html body .header-cart img, html body .mini-cart-anchor i, html body .mini-cart-anchor svg, html body .mobile-cart-button i, html body .mobile-cart-button svg, html body .mobile-cart-button img, html body .woofood-mobile-cart-button i, html body .woofood-mobile-cart-button svg, html body .woofood-mobile-cart-button img, html body .wf-mobile-cart-button i, html body .wf-mobile-cart-button svg { font-size: 18px !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; line-height: 22px !important; } /* Tous les enfants (icône panier, texte "X dans le panier") en charbon */ html body .header-cart *, html body .mini-cart-anchor *, html body .mobile-cart-button *, html body .woofood-mobile-cart-button *, html body .wf-mobile-cart-button *, html body .woofood-floating-cart *, html body .floating-cart-mobile * { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* Hover : moutarde un cran plus clair */ html body .header-cart>a:hover, html body .woofood-mobile-cart-button:hover, html body .mobile-cart-button:hover { background: var(--bs-mustard-l) !important; background-color: var(--bs-mustard-l) !important; } /* Badge compteur (le rond "9") — charbon avec texte moutarde, COMPACT */ html body .header-cart .header-cart-count, html body .header-cart .header-cart-items, html body .header-cart .cart-count-badge, html body .header-cart .count, html body .woofood-mobile-cart-button .count, html body .woofood-mobile-cart-button .badge, html body .wf-mobile-cart-button .count, html body .mobile-cart-button .count, html body .header-cart-count, html body .header-cart-items, html body .cart-count-badge { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; color: var(--bs-mustard) !important; -webkit-text-fill-color: var(--bs-mustard) !important; border: none !important; width: 16px !important; height: 16px !important; min-width: 16px !important; line-height: 16px !important; font-size: 10px !important; font-weight: 800 !important; padding: 0 !important; border-radius: 50% !important; } } /* ================================================================ BOUTONS "VALIDER LA COMMANDE" / "COMMANDER" — rendu natif jaune Style WooFood par défaut : fond moutarde + texte charbon + casse normale (ré-écrase les règles génériques .woocommerce a.button qui les forcent en charbon, mais uniquement pour ces 2 boutons précis) ================================================================ */ html body .checkout-button, html body .checkout-button.button, html body .checkout-button.button.alt, html body .checkout-button.button.alt.wc-forward, html body a.checkout-button.button.alt.wc-forward, html body .woocommerce a.checkout-button.button.alt.wc-forward, html body #place_order, html body button#place_order, html body .woocommerce #payment #place_order { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; background-image: none !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border: none !important; border-radius: 0 !important; font-family: var(--bs-font-body) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 25px 20px !important; width: 100% !important; text-shadow: none !important; box-shadow: none !important; } html body .checkout-button *, html body .checkout-button span, html body #place_order *, html body #place_order span, html body button#place_order * { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; background: transparent !important; text-transform: none !important; } html body .checkout-button:hover, html body #place_order:hover, html body button#place_order:hover { background: var(--bs-mustard-l) !important; background-color: var(--bs-mustard-l) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* ================================================================ PAGES PANIER & CHECKOUT — masquer la barre cart-count sticky Sur ces pages, la barre "X dans le panier" est redondante avec le contenu de la page elle-même → on l'enlève pour qu'il ne reste que le bouton COMMANDER / VALIDER LA COMMANDE en bas (comme ILLICO PIZZA). Sur les pages produit / accueil, la barre reste visible (utile). ================================================================ */ @media screen and (max-width: 768px) { body.woocommerce-cart .header-cart, body.woocommerce-cart .header-cart-items, body.woocommerce-cart .header-cart-count, body.woocommerce-cart .cart-count-badge, body.woocommerce-cart .mini-cart-anchor, body.woocommerce-cart .mobile-cart-button, body.woocommerce-cart .woofood-mobile-cart-button, body.woocommerce-checkout .header-cart, body.woocommerce-checkout .header-cart-items, body.woocommerce-checkout .header-cart-count, body.woocommerce-checkout .cart-count-badge, body.woocommerce-checkout .mini-cart-anchor, body.woocommerce-checkout .mobile-cart-button, body.woocommerce-checkout .woofood-mobile-cart-button { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } } /* ================================================================ PAGE PANIER & CHECKOUT — refonte responsive mobile compacte Corrige : prix coupés, coupon/buttons débordent, total TVA mal aligné ================================================================ */ @media screen and (max-width: 768px) { /* ---- 1. TABLE CART → CARTES PRODUIT (mobile) ---- Chaque ligne du panier devient une carte lisible : [ image ] [ nom + prix unitaire ] [ × ] [ image ] [ stepper quantité sous-total ] Bien plus clair qu'un tableau serré, et l'image est visible. */ body.woocommerce-cart .woocommerce-cart-form, body.woocommerce-cart form.woocommerce-cart-form { margin: 0 !important; } body.woocommerce-cart table.shop_table.cart, body.woocommerce-cart .woocommerce-cart-form table.shop_table { display: block !important; width: 100% !important; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; table-layout: auto !important; } /* En-tête de colonnes inutile en mode carte */ body.woocommerce-cart .shop_table.cart thead { display: none !important; } body.woocommerce-cart .shop_table.cart tbody { display: block !important; } /* Neutraliser les libellés "data-title" injectés par WooCommerce responsive */ body.woocommerce-cart .shop_table.cart td::before { content: "" !important; display: none !important; } /* La ligne "actions" (coupon + maj panier) reste un bloc pleine largeur ; son garde son flex défini plus bas. */ body.woocommerce-cart .shop_table.cart tbody tr:not(.cart_item) { display: block !important; width: 100% !important; } /* CARTE PRODUIT */ body.woocommerce-cart .shop_table.cart tbody tr.cart_item { display: grid !important; grid-template-columns: 64px 1fr auto !important; grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal" !important; column-gap: 12px !important; row-gap: 6px !important; align-items: center !important; background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-xs) !important; padding: 12px !important; margin: 0 0 12px 0 !important; } /* Réinitialiser chaque cellule pour la grille */ body.woocommerce-cart .shop_table.cart tbody tr.cart_item > td { display: block !important; border: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; background: transparent !important; text-align: left !important; vertical-align: middle !important; line-height: 1.3 !important; } /* Miniature — colonne gauche */ body.woocommerce-cart .shop_table.cart td.product-thumbnail { grid-area: thumb !important; align-self: start !important; } body.woocommerce-cart .shop_table.cart td.product-thumbnail img { width: 64px !important; height: 64px !important; object-fit: cover !important; border-radius: var(--bs-radius-sm) !important; border: 1px solid var(--bs-border) !important; display: block !important; margin: 0 !important; max-width: none !important; } /* Nom produit */ body.woocommerce-cart .shop_table.cart td.product-name { grid-area: name !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.25 !important; color: var(--bs-charcoal) !important; } body.woocommerce-cart .shop_table.cart td.product-name a { color: var(--bs-charcoal) !important; text-decoration: none !important; } /* Suppléments / variations / méta produit en plus petit, discret */ body.woocommerce-cart .shop_table.cart td.product-name dl, body.woocommerce-cart .shop_table.cart td.product-name dl *, body.woocommerce-cart .shop_table.cart td.product-name .variation, body.woocommerce-cart .shop_table.cart td.product-name .wf_extra_options_cart, body.woocommerce-cart .shop_table.cart td.product-name .wf_cart_item_extra { font-size: 12px !important; font-weight: 500 !important; color: var(--bs-muted) !important; margin: 4px 0 0 0 !important; line-height: 1.35 !important; } /* Prix unitaire — discret, sous le nom */ body.woocommerce-cart .shop_table.cart td.product-price { grid-area: price !important; font-size: 13px !important; color: var(--bs-muted) !important; font-weight: 500 !important; } body.woocommerce-cart .shop_table.cart td.product-price::before { content: "Prix unitaire : " !important; display: inline !important; color: var(--bs-muted-l) !important; } /* Croix de suppression — coin haut droit */ body.woocommerce-cart .shop_table.cart td.product-remove { grid-area: remove !important; align-self: start !important; justify-self: end !important; text-align: right !important; } /* Quantité — stepper en bas à gauche */ body.woocommerce-cart .shop_table.cart td.product-quantity { grid-area: qty !important; } body.woocommerce-cart .shop_table.cart td.product-quantity .quantity { display: inline-flex !important; align-items: center !important; border: 1px solid var(--bs-border-d) !important; border-radius: 999px !important; overflow: hidden !important; background: var(--bs-cream) !important; width: auto !important; margin: 0 !important; } body.woocommerce-cart .shop_table.cart td.product-quantity .qty-change-button, body.woocommerce-cart .shop_table.cart td.product-quantity .minus, body.woocommerce-cart .shop_table.cart td.product-quantity .plus { width: 30px !important; height: 30px !important; line-height: 30px !important; text-align: center !important; background: transparent !important; color: var(--bs-charcoal) !important; border: none !important; font-size: 16px !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; float: none !important; box-shadow: none !important; } body.woocommerce-cart .shop_table.cart td.product-quantity input.qty { width: 36px !important; height: 30px !important; min-height: 30px !important; text-align: center !important; border: none !important; background: transparent !important; font-size: 14px !important; font-weight: 700 !important; color: var(--bs-charcoal) !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; -moz-appearance: textfield !important; } body.woocommerce-cart .shop_table.cart td.product-quantity input.qty::-webkit-outer-spin-button, body.woocommerce-cart .shop_table.cart td.product-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Sous-total — bas à droite, en gras */ body.woocommerce-cart .shop_table.cart td.product-subtotal { grid-area: subtotal !important; text-align: right !important; justify-self: end !important; font-weight: 800 !important; font-size: 16px !important; color: var(--bs-charcoal) !important; } /* ---- 2. CODE PROMO + UPDATE CART : stack vertical pleine largeur ---- */ body.woocommerce-cart .coupon { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; float: none !important; padding: 12px 8px !important; box-sizing: border-box !important; } body.woocommerce-cart .coupon input.input-text, body.woocommerce-cart input[name="coupon_code"] { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; float: none !important; font-size: 14px !important; } body.woocommerce-cart .coupon button, body.woocommerce-cart button[name="apply_coupon"], body.woocommerce-cart button[name="update_cart"] { width: 100% !important; margin: 0 !important; float: none !important; padding: 14px 16px !important; font-size: 12px !important; letter-spacing: 1px !important; box-sizing: border-box !important; } body.woocommerce-cart .actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; padding: 8px !important; box-sizing: border-box !important; } /* Tuer overflow horizontal des conteneurs cart */ body.woocommerce-cart .woocommerce, body.woocommerce-cart .woocommerce-cart-form, body.woocommerce-cart .cart-collaterals, body.woocommerce-cart .cart_totals { overflow-x: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } /* ---- 3. TOTAL + TVA : "(dont X TVA)" sur ligne séparée ---- */ body.woocommerce-checkout .order-total td, body.woocommerce-cart .order-total td, html body .order-total td { text-align: right !important; line-height: 1.4 !important; vertical-align: middle !important; } body.woocommerce-checkout .order-total td .amount, body.woocommerce-cart .order-total td .amount, body.woocommerce-checkout .order-total td>strong, body.woocommerce-cart .order-total td>strong, html body .order-total td .amount, html body .order-total td>strong { display: contents; margin-bottom: 4px !important; line-height: 1.2 !important; } body.woocommerce-checkout .order-total td small, body.woocommerce-checkout .order-total td .includes_tax, body.woocommerce-cart .order-total td small, body.woocommerce-cart .order-total td .includes_tax, html body .order-total td small, html body .order-total td .includes_tax { display: block !important; font-size: 11px !important; line-height: 1.3 !important; margin-top: 2px !important; opacity: 0.85 !important; white-space: normal !important; font-weight: 500 !important; } /* ---- 4. CHECKOUT : table récap "Votre commande" compact ---- */ body.woocommerce-checkout table.shop_table, body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100% !important; font-size: 13px !important; } body.woocommerce-checkout .shop_table thead th, body.woocommerce-checkout .shop_table tbody td, body.woocommerce-checkout .shop_table tfoot td, body.woocommerce-checkout .shop_table tfoot th { padding: 12px 8px !important; word-wrap: break-word !important; } body.woocommerce-checkout .shop_table .product-total, body.woocommerce-checkout .shop_table .cart-subtotal td, body.woocommerce-checkout .shop_table .shipping td { text-align: right !important; white-space: nowrap !important; } } /* ================================================================ FIX BOUTONS COUPON / UPDATE CART — texte illisible Spécificité maximale pour battre toute autre règle ================================================================ */ html body .woocommerce button[name="apply_coupon"], html body .woocommerce button[name="update_cart"], html body button[name="apply_coupon"], html body button[name="update_cart"], html body .woocommerce-cart button[name="apply_coupon"], html body .woocommerce-cart button[name="update_cart"], html body form.woocommerce-cart-form button[name="update_cart"], html body .coupon button[name="apply_coupon"] { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: none !important; text-shadow: none !important; opacity: 1 !important; } /* Enfants du bouton (span loader, icône) en blanc aussi */ html body button[name="apply_coupon"] *, html body button[name="update_cart"] *, html body button[name="apply_coupon"] span, html body button[name="update_cart"] span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body button[name="apply_coupon"]:hover, html body button[name="update_cart"]:hover { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } html body button[name="apply_coupon"]:hover *, html body button[name="update_cart"]:hover * { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } /* ================================================================ POPUP PRODUIT (WooFood quickview) ---------------------------------------------------------------- ⚠ Toute la mise en page et le style du popup sont gérés par wp-content/plugins/woofood-plugin/css/wf_ajax_quickview.css (architecture flexbox propre, palette bistro). ================================================================ */ /* ================================================================ 25. PANIER — polish visuel bistro ---------------------------------------------------------------- Améliore : header de table (ligne moutarde unifiée), bouton "Mettre à jour" en secondaire, carte "Total panier" polie, × remove arrondi, hover de ligne discret. Compatible mobile + desktop. ================================================================ */ /* Header de table — ligne moutarde unifiée sous tout le rang */ html body.woocommerce-cart .shop_table thead { border-bottom: 2px solid var(--bs-mustard) !important; } html body.woocommerce-cart .shop_table thead th { border-bottom: none !important; font-family: var(--bs-font-body) !important; color: var(--bs-charcoal) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; background: transparent !important; } /* Lignes produits — séparateur discret + hover moutarde light */ html body.woocommerce-cart .shop_table tbody tr.cart_item { border-bottom: 1px solid var(--bs-border) !important; transition: background 0.2s ease !important; } html body.woocommerce-cart .shop_table tbody tr.cart_item:hover { background: rgba(212, 160, 23, 0.05) !important; } /* × icône remove — pastille arrondie */ html body.woocommerce-cart td.product-remove a.remove, html body.woocommerce-cart a.remove { background: var(--bs-cream) !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border-radius: 50% !important; width: 26px !important; height: 26px !important; line-height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.2s ease !important; border: 1px solid var(--bs-border) !important; } html body.woocommerce-cart a.remove:hover { background: var(--bs-brick) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: var(--bs-brick) !important; transform: scale(1.1) !important; } /* "Mettre à jour le panier" — secondaire (ghost / outline). Spécificité boostée pour battre la section "FIX BOUTONS COUPON" plus haut. */ html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"], html body.woocommerce-cart form.woocommerce-cart-form input[name="update_cart"], html body.woocommerce-cart .actions button[name="update_cart"], html body.woocommerce-cart .woocommerce form.woocommerce-cart-form button[name="update_cart"], html body .woocommerce-cart form.woocommerce-cart-form button[name="update_cart"] { background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border: 1.5px solid var(--bs-charcoal) !important; text-shadow: none !important; } html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"]:hover, html body.woocommerce-cart form.woocommerce-cart-form input[name="update_cart"]:hover, html body.woocommerce-cart .actions button[name="update_cart"]:hover { background: var(--bs-charcoal) !important; background-color: var(--bs-charcoal) !important; color: var(--bs-cream) !important; -webkit-text-fill-color: var(--bs-cream) !important; } html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"] *, html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"] span { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; } html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"]:hover *, html body.woocommerce-cart form.woocommerce-cart-form button[name="update_cart"]:hover span { color: var(--bs-cream) !important; -webkit-text-fill-color: var(--bs-cream) !important; } /* "Appliquer le code promo" — reste charbon plein (action principale du formulaire promo) */ /* (déjà géré par la section précédente — pas de changement) */ /* Carte "Total panier" — cadre élégant */ html body.woocommerce-cart .cart_totals { background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius) !important; box-shadow: var(--bs-shadow-xs) !important; padding: 24px !important; margin-top: 24px !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important; } html body.woocommerce-cart .cart_totals h2 { font-family: var(--bs-font-display) !important; font-weight: 400 !important; color: var(--bs-charcoal) !important; margin: 0 0 18px 0 !important; text-align: center !important; font-size: 1.6rem !important; letter-spacing: -0.3px !important; padding: 0 !important; } /* Table interne du Total panier — pas de cadre, séparateurs propres */ html body.woocommerce-cart .cart_totals table.shop_table { border: none !important; background: transparent !important; margin: 0 !important; width: 100% !important; } html body.woocommerce-cart .cart_totals .shop_table tr { border-bottom: 1px solid var(--bs-border) !important; } html body.woocommerce-cart .cart_totals .shop_table tr:last-child { border-bottom: none !important; } html body.woocommerce-cart .cart_totals .shop_table th, html body.woocommerce-cart .cart_totals .shop_table td { padding: 14px 6px !important; border: none !important; font-size: 14px !important; background: transparent !important; } html body.woocommerce-cart .cart_totals .shop_table th { font-family: var(--bs-font-body) !important; font-weight: 600 !important; color: var(--bs-charcoal-s) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-size: 12px !important; text-align: left !important; width: 40% !important; } html body.woocommerce-cart .cart_totals .shop_table td { text-align: right !important; color: var(--bs-charcoal) !important; } /* Ligne TOTAL en gras + barre moutarde au-dessus */ html body.woocommerce-cart .cart_totals .shop_table .order-total th, html body.woocommerce-cart .cart_totals .shop_table .order-total td { font-size: 18px !important; font-weight: 800 !important; color: var(--bs-charcoal) !important; padding-top: 20px !important; padding-bottom: 6px !important; border-top: 2px solid var(--bs-mustard) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } html body.woocommerce-cart .cart_totals .shop_table .order-total .amount { color: var(--bs-mustard) !important; -webkit-text-fill-color: #000000 !important; } /* Bouton "Valider la commande" — moutarde polish */ html body.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; margin-top: 18px !important; } html body.woocommerce-cart .wc-proceed-to-checkout .checkout-button, html body.woocommerce-cart a.checkout-button { background: var(--bs-mustard) !important; background-color: var(--bs-mustard) !important; background-image: none !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border: none !important; border-radius: var(--bs-radius-sm) !important; padding: 16px 28px !important; font-family: var(--bs-font-body) !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-align: center !important; width: 100% !important; display: block !important; margin: 0 !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.15s ease !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(212, 160, 23, 0.20) !important; } html body.woocommerce-cart a.checkout-button:hover { background: var(--bs-mustard-l) !important; transform: translateY(-1px) !important; } /* Section "Expédition" dans le total : alignement vertical du picker d'adresse */ html body.woocommerce-cart .cart_totals .shipping td { text-align: right !important; } html body.woocommerce-cart .cart_totals .shipping ul#shipping_method li, html body.woocommerce-cart .cart_totals .shipping label { display: inline-block !important; text-align: right !important; font-weight: 600 !important; color: var(--bs-charcoal) !important; } /* "Livraison à " affiché en italique discret */ html body.woocommerce-cart .cart_totals .shipping .woocommerce-shipping-destination { font-size: 12px !important; font-weight: 500 !important; color: #000000 !important; font-style: italic !important; margin-top: 4px !important; display: block !important; text-align: right !important; } /* ================================================================ 26. RESPONSIVE & ACCESSIBILITÉ — corrections finales ================================================================ */ /* 26.1 — Filet de sécurité images : aucune image ne déborde de son conteneur. On épargne les images produit qui ont un width/height fixes (84px). */ img:not([width]):not(.attachment-woocommerce_thumbnail):not(.woocommerce-product-gallery__image img) { max-width: 100%; height: auto; } /* 26.2 — Hover accordéon plus contrasté. Avant : #1A1A1A → #2D2D2D (ratio 1.4, indiscernable pour beaucoup). Après : #1A1A1A → bord moutarde + fond légèrement plus clair. */ .woofood-accordion>a:hover .panel-heading, .woofood-accordion>a:focus-visible .panel-heading { background: #333333 !important; box-shadow: inset 0 -3px 0 var(--bs-mustard) !important; } /* 26.3 — Focus visible accessibilité (clavier). Le contour moutarde respecte la palette tout en restant visible (WCAG 2.4.7). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .button:focus-visible, .single_add_to_cart_button:focus-visible { outline: 3px solid var(--bs-mustard) !important; outline-offset: 2px !important; } /* 26.4 — Padding accordéon mobile plus compact (< 480px). Sur petit écran les bandeaux de catégorie prenaient ~20% de la hauteur. */ @media (max-width: 480px) { .panel-heading, .card-header, [class*="cat-heading"] { padding: 10px 14px !important; font-size: 1.05rem !important; } .panel-heading::after, .card-header::after { right: 44px !important; width: 20px !important; } /* Cartes produit encore un peu plus compactes */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { padding: 10px 12px !important; min-height: 88px !important; } .woocommerce ul.products li.product a img { width: 68px !important; height: 68px !important; } } /* 26.5 — Réduction du mouvement pour les utilisateurs sensibles. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 26.6 — Indicateur visuel "Ouvert / Fermé" plus lisible. Avant : seul le texte changeait. Ajout d'une pastille colorée. */ .opening-hours { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .opening-hours::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .opening-hours.open { color: #ffffff; } /* vert WCAG-AA sur fond crème */ .opening-hours.closed { color: #B33A3A; } /* brique de la palette bistro */ /* 26.7 — Respiration sous le widget Google Reviews (Trustindex) avant le premier accordéon de produits. */ .ti-widget, .ti-widget-container, [class*="trustindex"] { margin-bottom: 24px !important; } @media (max-width: 768px) { .ti-widget, .ti-widget-container, [class*="trustindex"] { margin-bottom: 18px !important; } } /* 26.11 — Scroll lock : quand un MicroModal est ouvert, la page derrière ne défile plus (sinon on perd sa position, et sur mobile c'est très frustrant). Le JS associé (functions.php) ajoute .woofood-modal-open sur via MutationObserver des modaux. Technique : position: fixed + top:-Ypx (le JS gère la valeur Y). Avantage vs overflow:hidden seul : marche aussi sur Safari iOS qui continuait à scroller le body. */ body.woofood-modal-open { position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; overflow: hidden !important; } /* Fallback CSS-only via :has() pour les navigateurs récents. Si le JS n'a pas eu le temps de tourner (cas rares), :has() prend le relais. */ @supports selector(:has(*)) { html:has(.micromodal-slide.is-open), html:has(.micromodal-slide[aria-hidden="false"]) { overflow: hidden; } } /* ================================================================ 27. FIX PLACEMENT MOBILE (Bouton Panier & Quickview) ================================================================ */ @media screen and (max-width: 768px) { /* 27.1 - Le bouton "Ajouter au panier" de la popup Quickview DOIT être toujours visible et fixé en bas. */ .wf_product_view .single_add_to_cart_button, html body .wf_product_view .single_add_to_cart_button { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999999 !important; /* Au-dessus de tout le reste */ box-sizing: border-box !important; } /* 27.2 - La barre de panier (cart-count) DOIT être fixée en bas de l'écran quand on navigue sur le site. */ html body .header-cart, html body .woofood-mobile-cart-button, html body .mini-cart-anchor, html body .mobile-cart-button { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; margin: 0 !important; } /* 27.3 - ANTI-SUPERPOSITION : Quand la popup Quickview est ouverte, on CACHE la barre de panier pour qu'elle ne superpose pas le bouton "Ajouter au panier". */ body.woofood-modal-open .header-cart, body.woofood-modal-open .woofood-mobile-cart-button, body.woofood-modal-open .mobile-cart-button, body.woofood-modal-open .mini-cart-anchor, html:has(.micromodal-slide.is-open) .header-cart, html:has(.micromodal-slide.is-open) .woofood-mobile-cart-button { display: none !important; } /* 27.4 - S'assurer que le contenu du Quickview laisse de la place en bas pour ne pas cacher le bouton de quantité. */ .wf_product_view .modal__container { padding-bottom: 90px !important; } } /* ================================================================ 28. REDESIGN PANIER (Améliorations Visuelles) ================================================================ */ /* Espacement des lignes du panier */ body.woocommerce-cart .shop_table tbody td { padding: 16px 8px !important; vertical-align: middle !important; } /* Titre du produit et variations (meta) */ body.woocommerce-cart .product-name a { font-size: 15px !important; font-weight: 700 !important; display: block !important; margin-bottom: 4px !important; color: var(--bs-charcoal) !important; } /* Les variations de produit (ex: Pizza Margherita) discrètes mais alignées */ body.woocommerce-cart .product-name dl.variation { font-size: 11px !important; color: var(--bs-charcoal-s) !important; margin: 4px 0 0 0 !important; padding: 0 !important; background: transparent !important; border: none !important; line-height: 1.3 !important; } body.woocommerce-cart .product-name dl.variation dt, body.woocommerce-cart .product-name dl.variation dd { display: inline-block !important; margin: 0 !important; } body.woocommerce-cart .product-name dl.variation dt { font-weight: 600 !important; color: var(--bs-charcoal-s) !important; margin-right: 4px !important; } body.woocommerce-cart .product-name dl.variation dd:last-of-type { margin-bottom: 0 !important; } /* Groupe Quantité (+ / - / input) plus harmonieux en forme de pilule */ body.woocommerce-cart .quantity { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #FFFFFF !important; border: 1px solid #EAEAEA !important; border-radius: 8px !important; padding: 2px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; margin: 0 !important; } /* Boutons +/- plus doux, fond transparent, icône charbon */ body.woocommerce-cart .qty-change-button { background: transparent !important; color: var(--bs-charcoal) !important; width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 6px !important; transition: background 0.2s ease !important; transform: none !important; } body.woocommerce-cart .qty-change-button:hover { background: #F4F4F4 !important; transform: scale(1) !important; } body.woocommerce-cart .qty-change-button i { color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; font-size: 12px !important; } /* Input text de la quantité au milieu */ body.woocommerce-cart .quantity .qty { border: none !important; background: transparent !important; font-size: 14px !important; font-weight: 700 !important; color: var(--bs-charcoal) !important; width: 34px !important; padding: 0 !important; box-shadow: none !important; text-align: center !important; } /* Bouton suppression (x) plus doux et moins encombrant */ body.woocommerce-cart .shop_table td.product-remove a.remove { color: #999 !important; border: 1px solid #EAEAEA !important; background: #FFFFFF !important; font-size: 14px !important; font-weight: 400 !important; width: 24px !important; height: 24px !important; line-height: 22px !important; border-radius: 50% !important; transition: all 0.2s ease !important; } body.woocommerce-cart .shop_table td.product-remove a.remove:hover { background: var(--bs-brick) !important; color: white !important; border-color: var(--bs-brick) !important; } /* Séparer la section code promo et bouton d'action */ body.woocommerce-cart .coupon { padding: 12px 0 24px 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body.woocommerce-cart .coupon input.input-text { width: 100% !important; border-radius: 8px !important; border: 1px solid #EAEAEA !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important; padding: 14px 16px !important; } body.woocommerce-cart .coupon button.button, body.woocommerce-cart button[name="update_cart"] { width: 100% !important; border-radius: 8px !important; margin: 0 !important; } /* ================================================================ 29. DESIGN PANIER MOBILE — POLISH VARIATIONS ================================================================ */ @media screen and (max-width: 768px) { /* On redonne de l'espace à la colonne Quantité pour éviter que le bouton + n'écrase le prix */ body.woocommerce-cart .shop_table th.product-quantity, body.woocommerce-cart .shop_table td.product-quantity { width: 95px !important; padding: 8px 0px !important; } /* On s'assure que le sous-total a assez de place et reste bien à droite */ body.woocommerce-cart .shop_table th.product-subtotal, body.woocommerce-cart .shop_table td.product-subtotal { width: 75px !important; padding-right: 4px !important; text-align: right !important; } body.woocommerce-cart .product-name dl.variation dt, body.woocommerce-cart .product-name dl.variation dd { display: inline-block !important; } body.woocommerce-cart .product-name dl.variation p { display: inline !important; margin: 0 !important; } /* ==== UI ENHANCEMENTS ==== */ /* Focus outline for quantity inputs */ html body .shop_table td.product-quantity input.qty, html body .shop_table td.product-quantity .quantity button { outline: 2px solid var(--bs-mustard) !important; outline-offset: 2px !important; } /* Checkout zebra striping */ html body.woocommerce-checkout .shop_table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .02) !important; } /* Checkout total styling */ html body .order-total, html body .order-total th, html body .order-total td, html body tr.order-total th, html body tr.order-total td { font-weight: 800 !important; color: var(--bs-charcoal) !important; -webkit-text-fill-color: var(--bs-charcoal) !important; border-top: 2px solid var(--bs-mustard) !important; } /* Euro icon before amount */ html body .order-total .amount:before { content: "€"; margin-right: .2rem; } /* Buttons focus and active */ html body .btn-primary, html body .woocommerce button.button, html body .woocommerce input.button, html body .single_add_to_cart_button { box-shadow: 0 0 0 3px rgba(var(--bs-mustard-rgb), .3) !important; } html body .btn-primary:active, html body .woocommerce button.button:active, html body .woocommerce input.button:active, html body .single_add_to_cart_button:active { transform: scale(.97) !important; } /* Variations styling */ html body.woocommerce-cart .product-name dl.variation { font-size: 0.85rem !important; color: var(--bs-charcoal-s) !important; opacity: .85 !important; margin: 4px 0 0 0 !important; } html body.woocommerce-cart .product-name dl.variation dt, html body.woocommerce-cart .product-name dl.variation dd { display: inline-block !important; margin: 0 .3rem 0 0 !important; } /* ==== ALIGNEMENT MOBILE AMÉLIORÉ ==== */ /* Uniformiser la hauteur des lignes du tableau */ body.woocommerce-cart .shop_table tbody tr.cart_item { min-height: 64px; /* hauteur minimale */ } /* Alignement vertical du contenu des cellules */ body.woocommerce-cart .shop_table tbody tr.cart_item td { vertical-align: middle !important; padding: 8px 4px !important; } /* Ajuster la largeur et le texte des colonnes */ body.woocommerce-cart .shop_table td.product-name a { font-size: 0.95rem !important; font-weight: 600 !important; } body.woocommerce-cart .shop_table td.product-quantity input.qty { width: 60px !important; } body.woocommerce-cart .shop_table td.product-subtotal { text-align: right !important; } /* Garantir que les variations restent inline */ body.woocommerce-cart .product-name dl.variation dt, body.woocommerce-cart .product-name dl.variation dd { display: inline-block !important; margin: 0 .3rem 0 0 !important; } } /* ==== EFFET DE CHARGEMENT DU PANIER AJAX ==== */ .woocommerce-cart-form.processing { opacity: 0.55 !important; pointer-events: none !important; transition: opacity 0.25s ease-in-out !important; } /* ==== MERCHANT INFO (SHORTCODE IMPROVEMENTS) ==== */ .merchant-info { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 18px !important; padding: 14px 20px !important; background: var(--bs-white) !important; border: 1px solid var(--bs-border) !important; border-radius: var(--bs-radius-sm) !important; font-family: var(--bs-font-body) !important; font-size: 14px !important; margin: 15px 0 25px 0 !important; box-shadow: var(--bs-shadow-xs) !important; } .merchant-info .opening-hours { font-weight: 700 !important; padding: 5px 12px !important; border-radius: 20px !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; display: inline-block !important; } .merchant-info .opening-hours.open { background: #4caf50; color: #ffffff; } .merchant-info .opening-hours.closed { background: rgba(179, 58, 58, 0.12) !important; color: var(--bs-brick) !important; } .merchant-info span a { color: var(--bs-charcoal) !important; text-decoration: none !important; font-weight: 600 !important; transition: color var(--bs-t) !important; } .merchant-info span a:hover { color: var(--bs-mustard-dk) !important; } .merchant-info .directions-link { background: var(--bs-mustard) !important; color: var(--bs-charcoal) !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: var(--bs-radius-xs) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: inline-flex !important; align-items: center !important; transition: all var(--bs-t) !important; text-decoration: none !important; box-shadow: var(--bs-shadow-xs) !important; border: 1px solid transparent !important; } .merchant-info .directions-link:hover { background: var(--bs-mustard-l) !important; color: var(--bs-charcoal) !important; transform: translateY(-1px) !important; box-shadow: var(--bs-shadow-sm) !important; text-decoration: none !important; } /* ================================================================ 27. RÉSERVATIONS — Plugin Five Star Restaurant Reservations Version épurée : forme propre, charte bistro, ~80 lignes. ================================================================ */ /* Wrapper du formulaire — carte crème centrée */ .rtb-booking-form { margin: 24px auto; padding: 28px 28px 24px; background: var(--bs-white); border: 1px solid var(--bs-border); border-radius: var(--bs-radius); box-shadow: var(--bs-shadow-xs); } /* Fieldsets — pas de bordure, juste un espacement vertical */ .rtb-booking-form fieldset { border: none; padding: 0; margin: 0 0 18px 0; } .rtb-booking-form fieldset:last-of-type { margin-bottom: 0; } /* Titre "Coordonnées" (legend) */ .rtb-booking-form legend { font-family: var(--bs-font-display); font-size: 1.35rem; font-weight: 400; color: var(--bs-charcoal); letter-spacing: -0.3px; padding: 0; margin: 8px 0 14px 0; width: 100%; border-bottom: 1px solid var(--bs-border); padding-bottom: 8px; } /* Fieldset.reservation : date / heure / personnes — sur 3 colonnes desktop */ .rtb-booking-form fieldset.reservation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } .rtb-booking-form fieldset.reservation > div { display: flex; flex-direction: column; } /* Fieldset.rtb-contact : nom / email / téléphone — empilés */ .rtb-booking-form fieldset.rtb-contact > div { display: flex; flex-direction: column; margin-bottom: 12px; } .rtb-booking-form fieldset.rtb-contact > div:last-child { margin-bottom: 0; } /* Labels — petits, charbon, uppercase */ .rtb-booking-form label { font-family: var(--bs-font-body); font-size: 11px; font-weight: 700; color: var(--bs-charcoal-s); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 6px 0; display: block; } /* Champs de saisie */ .rtb-booking-form input[type="text"], .rtb-booking-form input[type="email"], .rtb-booking-form input[type="tel"], .rtb-booking-form input[type="number"], .rtb-booking-form input[type="date"], .rtb-booking-form input[type="time"], .rtb-booking-form select, .rtb-booking-form textarea { width: 100%; padding: 10px 14px; font-family: var(--bs-font-body); font-size: 15px; color: var(--bs-charcoal); background: var(--bs-white); border: 1.5px solid var(--bs-border); border-radius: var(--bs-radius-sm); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .rtb-booking-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231A1A1A' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .rtb-booking-form textarea { min-height: 96px; resize: vertical; } .rtb-booking-form input:focus, .rtb-booking-form select:focus, .rtb-booking-form textarea:focus { outline: none; border-color: var(--bs-mustard); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15); } /* Lien "Ajouter un message" — discret */ .rtb-booking-form a.rtb-add-message, .rtb-booking-form .rtb-add-message { display: inline-block; margin: 4px 0 16px 0; color: var(--bs-charcoal-s); text-decoration: none; font-size: 14px; border-bottom: 1px dashed var(--bs-border); } .rtb-booking-form a.rtb-add-message:hover { color: var(--bs-mustard); border-color: var(--bs-mustard); } /* Description / helpers — petit, gris */ .rtb-booking-form .rtb-description, .rtb-booking-form small { display: block; margin-top: 4px; font-size: 12px; color: var(--bs-charcoal-s); line-height: 1.5; } /* Footer du formulaire (submit) */ .rtb-booking-form fieldset.rtb-form-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bs-border); } .rtb-booking-form .rtb-form-submit { justify-content: center; } /* Bouton "Demande de réservation" */ .rtb-booking-form button[type="submit"], .rtb-booking-form input[type="submit"], .rtb-form-submit button[type="submit"] { background: var(--bs-charcoal); color: #FFFFFF; border: none; border-radius: var(--bs-radius-sm); padding: 14px 36px; font-family: var(--bs-font-body); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .rtb-booking-form button[type="submit"]:hover, .rtb-form-submit button[type="submit"]:hover { background: var(--bs-mustard); color: var(--bs-charcoal); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212, 160, 23, 0.25); } /* Messages d'erreur / succès */ .rtb-error, .rtb-message-error { background: rgba(179, 58, 58, 0.08); color: #B33A3A; border: 1px solid rgba(179, 58, 58, 0.3); border-radius: var(--bs-radius-sm); padding: 10px 14px; margin: 12px 0; font-size: 14px; } .rtb-message-success, .rtb-success { background: rgba(46, 125, 50, 0.08); color: #2E7D32; border: 1px solid rgba(46, 125, 50, 0.3); border-radius: var(--bs-radius-sm); padding: 10px 14px; margin: 12px 0; font-size: 14px; } /* Mobile — date/heure/personnes empilés au lieu de 3 colonnes */ @media (max-width: 640px) { .rtb-booking-form { padding: 20px 18px; margin: 16px; } .rtb-booking-form fieldset.reservation { grid-template-columns: 1fr; gap: 12px; } .rtb-booking-form button[type="submit"], .rtb-form-submit button[type="submit"] { width: 100%; padding: 16px 22px; } }