/* Theme Name: Vins de France Aquitaine - Export Suisse Description: Thème B2B Premium, ultra-moderne propulsé par Tailwind CSS. Author: Votre Agence Version: 1.2.0 Text Domain: vins-aquitaine */ /* ========================================================== V2FA — DESIGN TOKENS (UNIFIÉS AVEC L’INDEX “ÉTIQUETTE”) Objectif : 1 seule identité visuelle partout - Fond crème / champagne (#fffcf7 / #fbf6f1) - Bordeaux (#6d071a) - Typo serif Playfair, sans Inter - Bordures fines + double liseré - Boutons “outline bordeaux” + hover plein bordeaux - Zéro jaune agressif (on garde un champagne discret si besoin) ========================================================== */ :root{ /* Brand */ --bordeaux: #6d071a; --bordeaux-900:#4a0411; --bordeaux-950:#2b0209; /* Neutres “prestige” (alignés sur ton index) */ --bg: #ffffff; --cream: #fbf6f1; /* fond global doux */ --paper: #fffcf7; /* fond carte / étiquette */ --ink: #1a1a1a; /* ton index utilise #1a1a1a */ --muted: rgba(26,26,26,.70); --muted2: rgba(26,26,26,.55); /* Traits / bordures */ --line: rgba(109,7,26,.10); --line2: rgba(109,7,26,.06); /* Accent “champagne” (optionnel, très discret) */ --champagne: rgba(214,178,94,.18); /* remplace l’or “jaune” par un voile léger */ /* UI */ --radius: 0; /* ton index = angles nets */ --shadow-soft: 0 14px 44px rgba(109,7,26,.06); --shadow-strong: 0 24px 80px rgba(109,7,26,.10); /* Typography */ --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* Spacing */ --pad: 28px; --pad-sm: 20px; } /* ========================================================== BASE ========================================================== */ html, body{ background: var(--bg); color: var(--ink); font-family: var(--font-sans); } img{ max-width:100%; height:auto; } a{ text-decoration: none; color: inherit; } /* Petits helpers “étiquette” utilisables partout */ .v2fa-paper{ background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft); position: relative; } .v2fa-paper::before{ content:""; position:absolute; inset: 10px; border: 1px solid var(--line2); pointer-events:none; } .v2fa-divider{ width: 40px; height: 1px; background: var(--bordeaux); opacity: .30; margin: 1rem auto; } /* ========================================================== WOOCOMMERCE — BASE UNIFIÉE (toutes pages Woo) ========================================================== */ /* Reset des arrondis Woo (cohérence “étiquette”) */ .woocommerce-page .button, .woocommerce-page input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page #respond input#submit{ border-radius: var(--radius) !important; } /* Liens Woo */ .woocommerce-page .woocommerce a{ color: var(--bordeaux); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-page .woocommerce a:hover{ opacity:.86; } /* Titres Woo */ .woocommerce-page .woocommerce h1, .woocommerce-page .woocommerce h2, .woocommerce-page .woocommerce h3{ font-family: var(--font-serif); font-weight: 900; letter-spacing: -.02em; color: var(--ink); } /* Prix */ .woocommerce-page .amount, .woocommerce-page .woocommerce-Price-amount{ color: var(--bordeaux) !important; font-weight: 900 !important; } /* Champs */ .woocommerce-page input.input-text, .woocommerce-page textarea, .woocommerce-page select{ width:100%; background:#fff; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 12px 12px !important; color: rgba(26,26,26,.86); transition: border-color .2s ease, box-shadow .2s ease; } .woocommerce-page input.input-text:focus, .woocommerce-page textarea:focus, .woocommerce-page select:focus{ border-color: rgba(109,7,26,.22) !important; box-shadow: 0 0 0 4px rgba(109,7,26,.06) !important; outline: none !important; } /* ========================================================== BOUTONS — 2 styles UNIFIÉS 1) Primary (plein bordeaux, rare, CTA) 2) Outline (comme ton index, par défaut) ========================================================== */ /* Outline (par défaut) */ .woocommerce-page .button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit{ background: transparent !important; color: var(--bordeaux) !important; border: 1px solid rgba(109,7,26,.35) !important; font-weight: 900 !important; letter-spacing: .28em !important; text-transform: uppercase !important; font-size: 10px !important; padding: 14px 18px !important; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease !important; text-decoration: none !important; } .woocommerce-page .button:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce-page #respond input#submit:hover{ background: var(--bordeaux) !important; color: var(--paper) !important; border-color: var(--bordeaux) !important; transform: translateY(-1px); } /* Primary (CTA checkout/commande) */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .place-order button#place_order, .woocommerce-page .button.alt, .woocommerce-page input.button.alt{ background: var(--bordeaux) !important; color: var(--paper) !important; border: 1px solid var(--bordeaux) !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase !important; font-size: 11px !important; padding: 16px 22px !important; box-shadow: var(--shadow-soft) !important; transition: background .25s ease, transform .2s ease, filter .2s ease !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-checkout .place-order button#place_order:hover, .woocommerce-page .button.alt:hover, .woocommerce-page input.button.alt:hover{ background: var(--ink) !important; transform: translateY(-2px); filter: brightness(1); } /* ========================================================== NOTICES — UNIFIÉES (plus d’or/jaune “bord-top”) ========================================================== */ .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error{ background: var(--paper) !important; border: 1px solid var(--line) !important; border-left: 3px solid rgba(109,7,26,.55) !important; /* signature bordeaux */ padding: 16px 50px !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-soft) !important; color: rgba(26,26,26,.86) !important; margin: 0 0 18px; } /* Bouton dans notice (ex: “Voir le panier”) */ .woocommerce-page .woocommerce-message .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-error .button{ background: transparent !important; color: var(--bordeaux) !important; border: 1px solid rgba(109,7,26,.35) !important; } /* ========================================================== CART — TABLE + TOTALS (aligné index) ========================================================== */ .woocommerce-cart table.cart{ background:#fff !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow:hidden !important; } .woocommerce-cart table.cart thead th{ background: rgba(109,7,26,.03) !important; color: rgba(26,26,26,.70) !important; text-transform: uppercase !important; font-size: 10px !important; letter-spacing: .22em !important; font-weight: 900 !important; padding: 1.25rem !important; } .woocommerce-cart table.cart td{ border-top: 1px solid var(--line2) !important; } /* Totaux (tu avais un bloc noir, on le rend “étiquette” comme l’index) */ .cart-collaterals .cart_totals{ background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; padding: 28px !important; box-shadow: var(--shadow-strong) !important; position: relative !important; } .cart-collaterals .cart_totals::before{ content:""; position:absolute; inset: 10px; border: 1px solid var(--line2); pointer-events:none; } .cart_totals h2{ font-family: var(--font-serif) !important; color: var(--ink) !important; font-style: italic !important; margin: 0 0 14px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--line) !important; } .cart_totals table th{ color: var(--muted) !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 10px !important; letter-spacing: .22em !important; } /* ========================================================== MY ACCOUNT — UNIFIÉ (plus de variables séparées) Scope: uniquement /mon-compte/ ========================================================== */ .woocommerce-account .woocommerce{ color: var(--ink); } /* Layout (Woo floats -> grid) */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{ float: none !important; width: 100% !important; } @media (min-width: 1024px){ .woocommerce-account .woocommerce-MyAccount{ display: grid !important; grid-template-columns: 320px 1fr !important; gap: 48px !important; align-items: start !important; } } /* NAV */ .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation a{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 14px 14px; border: 1px solid var(--line); background: transparent; color: rgba(26,26,26,.82); text-decoration: none !important; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover{ background: rgba(109,7,26,.03); border-color: rgba(109,7,26,.18); transform: translateY(-1px); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background: rgba(109,7,26,.05); border-color: rgba(109,7,26,.22); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{ content:""; width:6px; height:6px; border-radius:999px; background: var(--bordeaux); opacity:.7; } /* CONTENT “Étiquette” */ .woocommerce-account .woocommerce-MyAccount-content{ background: var(--paper); border: 1px solid var(--line); padding: var(--pad); position: relative; } .woocommerce-account .woocommerce-MyAccount-content::before{ content:""; position:absolute; inset: 10px; border: 1px solid var(--line2); pointer-events:none; } @media (max-width: 640px){ .woocommerce-account .woocommerce-MyAccount-content{ padding: var(--pad-sm); } } /* Forms (labels style index) */ .woocommerce-account .woocommerce label{ display:block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 900; color: var(--muted); margin-bottom: 8px; } .woocommerce-account .woocommerce form{ margin:0; } .woocommerce-account .woocommerce form .form-row{ margin: 0 0 14px; } /* Tables */ .woocommerce-account .woocommerce table.shop_table{ width:100%; border-collapse: separate; border-spacing: 0; background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; margin:16px 0 0; } .woocommerce-account .woocommerce table.shop_table th{ text-transform: uppercase; font-size: 10px; letter-spacing: .22em; font-weight: 900; color: var(--muted); background: rgba(109,7,26,.03); } .woocommerce-account .woocommerce table.shop_table th, .woocommerce-account .woocommerce table.shop_table td{ padding:14px 14px; border-bottom:1px solid var(--line2); vertical-align: top; } .woocommerce-account .woocommerce table.shop_table tr:last-child td{ border-bottom:none; } /* ========================================================== Adresses (My Account) — FIX ULTRA ROBUSTE - Force le container en FLEX (plus tolérant que grid face aux floats) - Neutralise floats/clear/width sur toutes variantes de colonnes ========================================================== */ /* Le container (selon versions Woo : Addresses / addresses / u-columns) */ .woocommerce-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-addresses, .u-columns.woocommerce-Addresses, .u-columns.woocommerce-addresses){ display: flex !important; flex-wrap: wrap !important; gap: 22px !important; width: 100% !important; margin-top: 18px !important; align-items: stretch !important; clear: both !important; } /* Les colonnes : match toutes les variantes possibles */ .woocommerce-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-addresses, .u-columns.woocommerce-Addresses, .u-columns.woocommerce-addresses) > :is(.u-column1, .u-column2, .col-1, .col-2, [class*="column"], [class*="col-"]) { float: none !important; clear: none !important; width: auto !important; max-width: none !important; margin: 0 !important; /* 2 colonnes desktop, 1 colonne mobile */ flex: 1 1 420px !important; min-width: 280px !important; } /* La carte d'adresse (les 2 doivent matcher) */ .woocommerce-account .woocommerce .woocommerce-Address{ background:#fff !important; border: 1px solid var(--line) !important; padding:18px !important; box-sizing:border-box !important; height: 100% !important; /* évite une carte “plus courte” qui remonte/descend */ } /* Header titre + lien */ .woocommerce-account .woocommerce :is(.woocommerce-Address-title, .woocommerce-Addresses header, .woocommerce-addresses header){ display:flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 14px !important; margin: 0 0 12px !important; } .woocommerce-account .woocommerce :is(.woocommerce-Address-title a, .woocommerce-Addresses header a, .woocommerce-addresses header a){ white-space: nowrap !important; font-weight: 900 !important; } /* Paiements */ .woocommerce-account .woocommerce .woocommerce-PaymentMethods{ list-style:none; margin: 12px 0 0; padding: 0; display:flex; flex-direction:column; gap: 10px; } .woocommerce-account .woocommerce .woocommerce-PaymentMethod{ background:#fff; border:1px solid var(--line); padding:14px; } .woocommerce-account .woocommerce .woocommerce-PaymentMethod label{ margin:0; letter-spacing:.14em; } /* Safety clear floats */ .woocommerce-page .woocommerce::after, .woocommerce-account .woocommerce::after{ content:""; display:block; clear:both; } /* --- FIN --- */