/* ================================================================
   MyLithoBox Child Theme — Variables + Nav + WooCommerce
   ================================================================ */

/* ---- Variables ----
   Reprises À L'IDENTIQUE de la page d'accueil (src/styles.css du dépôt
   ~/mylithobox-site), pour que les pages WordPress et la vitrine soient le
   même site. Toute divergence ici se voit au premier clic vers le panier.

   Les anciens noms (--cream-*, --wood-*) sont GARDÉS en alias : le reste de
   ce fichier les utilise encore en une trentaine d'endroits, et les retirer
   d'un coup casserait des correctifs WooCommerce accumulés sur des mois. */
:root {
  /* L'échelle, relevée sur la carte de visite */
  --or:        #f9bc6e;
  --or-deep:   #a57548;
  --brun:      #7c5d3c;
  --creme:     #f0e2cd;
  --blanc:     #f8f7eb;
  --parchemin:      #f5ede2;
  --parchemin-haut: #faf6ee;
  --parchemin-bas:  #e8dac4;
  --encre:          #241a11;
  --encre-douce:    #5d4630;

  /* Les rôles */
  --bg:        var(--parchemin);
  --bg-soft:   var(--parchemin-haut);
  --fg:        var(--encre);
  --fg-soft:   var(--encre-douce);
  --fg-label:  var(--brun);
  --hairline:  rgba(36, 26, 17, .14);

  /* L'or de la carte tombe à 1,45:1 sur le parchemin : on le brûle jusqu'à
     4,95:1. C'est pourquoi --accent n'est PAS #f9bc6e ici. */
  --accent:      #8a5c31;
  --accent-on:   var(--parchemin-haut);
  --accent-deep: #6b4a2d;
  --accent-glow: var(--or);

  --cta-bg: var(--encre);
  --cta-fg: var(--parchemin-haut);

  --carte-bg:    #ffffff;
  --carte-bord:  #e0d2bc;
  --carte-ombre: 0 2px 10px -4px rgba(36, 26, 17, .18);

  --wordmark-ink: linear-gradient(96deg,
    #3d2a17 0%, #6b4a2d 38%, #8a5c31 72%, #a57548 100%);

  /* La barre du haut est à contraste INVERSÉ, comme sur la page d'accueil :
     elle se pose sur la page au lieu de s'y fondre. */
  --bar-bg: var(--encre);
  --bar-fg: var(--parchemin-haut);
  --bar-accent: var(--or);
  --bar-wordmark: linear-gradient(96deg,
    #f8f7eb 0%, #f0e2cd 34%, #f9bc6e 70%, #d99a4e 100%);

  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;
  --gutter:    clamp(20px, 4vw, 56px);

  /* DM Serif Text n'existe QU'EN 400 : ne jamais lui demander un gras, le
     navigateur en synthétiserait un faux, épais et sale. */
  --font-display: "DM Serif Text", "DM Serif Display", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   var(--font-body);
  /* Les libellés en capitales : mêmes lettres que le corps, tenues à distance
     par le letter-spacing. Le pied de page appelle --font-mono avec un repli
     sur JetBrains Mono : sans cette ligne il y retomberait. */
  --font-mono:    var(--font-label);

  /* ---- Alias hérités ---- */
  --cream-50:  var(--parchemin-haut);
  --cream-100: var(--parchemin);
  --cream-200: var(--parchemin-bas);
  --cream-300: var(--creme);
  --wood-700:  var(--encre-douce);
  --wood-800:  #3d2b1d;
  --wood-900:  var(--encre);
  --ink:       var(--encre);
}

/* ---- Reset base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  /* !important : Astra enfile ses feuilles APRÈS celle de l'enfant et
     repassait le fond en blanc. Mesuré : rgb(255,255,255) sur toutes les
     pages avant correction. */
  background: var(--bg) !important;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration: none; }
img { max-width: 100%; }

/* ---- Astra reset ---- */
/* :not(.gs-page-wrap) : le conteneur de page porte LES DEUX classes, et ce
   `padding: 0 !important` écrasait la gouttière de .gs-page-wrap — les titres
   venaient toucher le bord gauche de la fenêtre. */
.ast-container:not(.gs-page-wrap) { max-width: 100% !important; padding: 0 !important; }
.ast-container.gs-page-wrap { max-width: 1200px !important; }
#content { padding-top: 0 !important; }
.entry-content { max-width: 100% !important; }

/* Astra injecte padding/margin sur #primary — on neutralise tout */
#primary,
#primary.content-area {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}
#main.site-main,
.site-main {
  padding: 0 !important;
  margin: 0 !important;
}
.entry-header { padding: 0 0 24px !important; margin: 0 !important; }
.entry-content,
.entry-content[data-ast-blocks-layout] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Blocs WooCommerce alignwide : stopper le débordement */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ================================================================
   HEADER NAV
   ================================================================ */
.gs-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bar-bg) 90%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--bar-fg) 16%, transparent);

  /* Tout ce qui vit DANS la barre bascule avec elle : redéfinir les rôles ici
     évite de traiter chaque enfant (liens, icônes, panier, pastille, burger)
     un par un, et n'en oublie aucun. C'est la méthode de .nav sur l'accueil. */
  color: var(--bar-fg);
  --fg: var(--bar-fg);
  --fg-soft: color-mix(in oklab, var(--bar-fg) 78%, transparent);
  --fg-label: var(--bar-accent);
  --accent: var(--bar-accent);
  --accent-on: var(--encre);
  --hairline: color-mix(in oklab, var(--bar-fg) 22%, transparent);
  --wordmark-ink: var(--bar-wordmark);
}
.gs-nav__brand {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em; color: var(--fg);
  text-decoration: none;
}
/* Le nom est peint par un DÉGRADÉ découpé sur le texte, pas par `color` :
   c'est ce qui lui donne la dorée de la carte de visite. Le dégradé de la
   barre est l'inverse de celui de la page, sinon il disparaîtrait dessus. */
.gs-nav__brand span {
  background-image: var(--wordmark-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gs-nav__brand img { width: 32px; height: 32px; }
.gs-nav__links {
  display: flex; gap: 28px; justify-content: center;
  font-size: 14px; letter-spacing: 0.04em;
}
.gs-nav__links a {
  position: relative; padding: 6px 2px;
  color: var(--fg); transition: color .2s;
}
.gs-nav__links a:hover { color: var(--accent); }
.gs-nav__cta {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
}
.gs-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 99px;
  border: 1px solid var(--hairline);
  background: none; cursor: pointer;
  color: var(--fg); transition: border-color .25s, color .25s;
  text-decoration: none;
}
.gs-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.gs-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent); color: var(--accent-on); border-radius: 99px;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Hamburger */
.gs-burger { flex-direction: column; justify-content: center; gap: 5px; display: none; padding: 8px; }
.gs-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .2s; transform-origin: center; }
.gs-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gs-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.gs-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Overlay + tiroir mobile */
.gs-overlay { display: none; position: fixed; inset: 0; z-index: 498; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.gs-mobile {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 499;
  width: min(320px, 85vw); background: var(--bg);
  border-right: 1px solid var(--hairline);
  padding: 88px var(--gutter) 32px;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.gs-mobile.is-open { transform: none; pointer-events: auto; }
.gs-mobile a { font-family: var(--font-display); font-size: 22px; padding: 14px 0; border-bottom: 1px solid var(--hairline); color: var(--fg); transition: color .2s; }
.gs-mobile a:hover { color: var(--accent); }
.gs-mobile__footer { margin-top: auto; padding-top: 28px; }

/* ---- Breakpoints nav ---- */
@media (max-width: 1280px) {
  .gs-nav { gap: 16px; }
  .gs-nav__links { gap: clamp(12px, 1.8vw, 28px); font-size: 13px; }
}
@media (max-width: 1024px) {
  .gs-nav { grid-template-columns: 1fr auto; }
  .gs-nav__links { display: none; }
  .gs-burger { display: flex; }
  .gs-hide-mobile { display: none !important; }
}
@media (min-width: 1025px) {
  .gs-overlay, .gs-mobile { display: none !important; }
}

/* ================================================================
   PAGE CONTENT
   ================================================================ */
.gs-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px var(--gutter) 80px;
  min-height: 70vh;
}
/* font-weight 400 et non 600 : DM Serif Text n'existe qu'en 400. Demander
   plus fait synthétiser un faux gras par le navigateur. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--fg); }
h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.015em; }
h3 { font-size: clamp(20px, 2vw, 26px); }

/* ================================================================
   BOUTONS (WooCommerce utilise .button et .wc-proceed-to-checkout)
   ================================================================ */
.gs-btn, .woocommerce .button, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 99px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.03em; cursor: pointer; border: none;
  transition: transform .3s, box-shadow .3s, background .3s;
  text-decoration: none;
  background: var(--cta-bg); color: var(--cta-fg);
}
.gs-btn--primary,
.woocommerce .button.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.woocommerce #respond input#submit.alt {
  background: var(--accent) !important; color: var(--accent-on) !important;
  box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--accent) 40%, transparent);
}
.woocommerce .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--accent) 50%, transparent);
  background: var(--accent-deep); color: var(--accent-on);
}
.woocommerce .button.alt:hover, .woocommerce .checkout-button:hover {
  background: var(--accent-deep) !important;
}

/* ================================================================
   FORMULAIRES
   ================================================================ */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  background: var(--cream-50) !important;
  color: var(--fg) !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
}
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus {
  border-color: var(--accent) !important;
}
.woocommerce label { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; margin-bottom: 6px; display: block; }

/* ================================================================
   PANIER
   ================================================================ */
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title {
  font-size: clamp(28px, 4vw, 42px); margin-bottom: 40px;
}
.woocommerce table.shop_table {
  border: 1px solid var(--hairline); border-radius: var(--radius); border-collapse: separate;
  overflow: hidden; width: 100%;
}
.woocommerce table.shop_table th {
  background: var(--cream-200); padding: 14px 20px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  border-bottom: 1px solid var(--hairline); color: var(--fg-soft);
}
.woocommerce table.shop_table td {
  padding: 18px 20px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.woocommerce-cart-form__cart-item .product-name a { font-weight: 500; font-size: 15px; }
.woocommerce table.cart td.actions { background: var(--cream-50); padding: 16px 20px; }
.woocommerce .cart-collaterals { margin-top: 40px; }
.woocommerce .cart_totals { background: var(--cream-50); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; }
.woocommerce .cart_totals h2 { font-size: 20px; margin-bottom: 20px; }
.woocommerce .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce .cart_totals table td, .woocommerce .cart_totals table th { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.woocommerce .cart_totals .order-total td, .woocommerce .cart_totals .order-total th { font-weight: 700; font-size: 18px; border-bottom: none; }
.woocommerce .wc-proceed-to-checkout { padding: 20px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; justify-content: center; }

/* ================================================================
   PAIEMENT / CHECKOUT
   ================================================================ */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}
.woocommerce-checkout .form-row { margin: 0; }
#order_review_heading { font-size: 20px; margin: 32px 0 16px; }
#order_review { background: var(--cream-50); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; }
.woocommerce-checkout-payment { background: var(--cream-50); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--hairline); padding-bottom: 16px; margin-bottom: 16px; }
.woocommerce #payment ul.payment_methods li { padding: 10px 0; }

/* ================================================================
   MON COMPTE
   ================================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--cream-50); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px; margin-bottom: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 12px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500; transition: background .2s, color .2s;
  color: var(--fg);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
}
.woocommerce-account .woocommerce-MyAccount-content { flex: 1; }
@media (min-width: 768px) {
  .woocommerce-account .woocommerce { display: flex; gap: 32px; align-items: flex-start; }
  .woocommerce-account .woocommerce-MyAccount-navigation { min-width: 200px; }
}

/* ================================================================
   MESSAGES / NOTICES
   ================================================================ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--radius) !important; border-top: none !important;
  padding: 16px 20px !important; margin-bottom: 24px !important;
  font-size: 14px !important;
}
.woocommerce-message { background: color-mix(in oklab, var(--accent) 10%, var(--cream-50)) !important; border-left: 4px solid var(--accent) !important; }
.woocommerce-error { background: #fff0f0 !important; border-left: 4px solid #e05c5c !important; }
.woocommerce-info { background: var(--cream-100) !important; border-left: 4px solid var(--wood-700) !important; }

/* ================================================================
   PAGE RECHERCHE
   ================================================================ */
.search-results .gs-page-wrap { padding-top: 100px; }
.search-results .entry-header h2 { font-size: 20px; margin-bottom: 8px; }
.search-results .entry-summary { color: var(--fg-soft); font-size: 14px; }

/* ================================================================
   FOOTER — identique à la page principale mylithobox.fr
   ================================================================ */
.footer {
  padding: 80px var(--gutter) 36px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 760px) { .footer { grid-template-columns: 1fr 1fr; } }

.footer h4 {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-soft);
  margin-bottom: 16px; font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer a { color: var(--fg); transition: color .2s; }
.footer a:hover { color: var(--accent); }
.footer__brand p { color: var(--fg-soft); font-size: 14px; max-width: 36ch; margin: 16px 0 24px; }
.footer__brand .socials { display: flex; gap: 10px; }
.footer__brand .nav__brand {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  letter-spacing: -0.02em; color: var(--fg);
}
/* Le nom doré du pied de page, comme dans la barre et sur l'accueil. Ici le
   dégradé est celui de la PAGE, pas celui de la barre : le fond est clair. */
.footer__brand .nav__brand span {
  background-image: var(--wordmark-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__brand .nav__brand img { width: 32px; height: 32px; }

.footer__bottom {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 24px var(--gutter) 32px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--fg-soft);
}

/* ================================================================
   TITRES — reprendre la main sur Astra
   ================================================================
   Astra imprime sa typographie dans un <style> du <head>, APRÈS la feuille
   de l'enfant, avec la même spécificité (0,0,1) :

     h1, h2, h3, h4, h5, h6, .entry-content :where(h1, …)
       { font-family: 'Plus Jakarta Sans'; font-weight: 600 }

   À spécificité égale, c'est le dernier qui gagne : nos titres repassaient
   en Plus Jakarta Sans. Ses règles n'étant pas `!important`, les nôtres
   reprennent la main ainsi. Vérifié dans la cascade, pas supposé.

   ⚠️ Le poids 400 n'est pas un détail : DM Serif Text n'existe qu'en 400.
   Le 600 d'Astra faisait synthétiser un FAUX GRAS par le navigateur, épais
   et sale, sur tous les titres du site.
   ================================================================ */
h1, h2, h3,
.entry-content :where(h1, h2, h3),
.entry-title,
header.entry-header .entry-title,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wp-block-woocommerce-cart h1, .wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h1, .wp-block-woocommerce-checkout h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--fg);
}

/* Les sous-titres et libellés restent en DM Sans : ce sont des repères, pas
   des titres. Sans cette règle ils héritaient eux aussi de Plus Jakarta. */
h4, h5, h6,
.entry-content :where(h4, h5, h6) {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}
/* …sauf les libellés du pied de page, qui ont leur propre traitement en
   capitales espacées. Le `!important` ci-dessus les aurait écrasés. */
.footer h4 {
  font-family: var(--font-label) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--fg-label) !important;
}

/* Le titre de page d'Astra : remis à l'échelle de la refonte. */
h1.entry-title { font-size: clamp(36px, 5vw, 64px) !important; letter-spacing: -0.02em; }
.entry-header { margin-bottom: 8px !important; }

/* ---- Le titre en double ----
   Astra imprime toujours `h1.entry-title` au-dessus du contenu. Or trois pages
   (contact, mentions légales, CGV) portent DÉJÀ leur propre h1 dans le corps :
   on lisait deux fois le même titre, et la page avait deux h1.

   Ce n'est pas neuf : le titre d'Astra existait avant, mais il était CACHÉ
   DERRIÈRE la barre fixe, faute de marge haute (voir le `padding: 0 !important`
   d'.ast-container corrigé plus haut). Le réparer l'a rendu visible.

   `:has()` laisse le titre en place là où le contenu n'en a pas — le panier et
   « mon compte » en ont besoin. Sur un navigateur sans `:has()` la règle est
   simplement ignorée : on retombe sur deux titres, pas sur une page cassée. */
article:has(.entry-content h1) > .entry-header { display: none; }

/* ================================================================
   BOUTONS DE BLOCS GUTENBERG
   ================================================================
   Les blocs produits posent leurs propres couleurs, choisies dans l'éditeur :
   mesuré #a66d19 avec du texte NOIR, qui n'appartient à aucune des deux
   palettes. On les ramène au rôle d'appel à l'action du site. */
.wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--cta-bg) !important;
  color: var(--cta-fg) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: 99px !important;
  border: none !important;
  padding: 13px 26px !important;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  transform: translateY(-2px);
}

/* ================================================================
   BANDEAU DE CONSENTEMENT (extension Cookie Notice)
   ================================================================
   Il arrivait avec sa mise en forme d'origine : police système, surface
   blanche, boutons orange à texte noir. Sur toutes les pages du site, c'était
   le seul bloc qui ne parlait pas la même langue visuelle. */
#cookie-notice, #cookie-notice * {
  font-family: var(--font-body) !important;
}
#cookie-notice .cookie-notice-container {
  background: var(--bg-soft) !important;
  color: var(--fg) !important;
  border-top: 1px solid var(--hairline);
  padding: 16px var(--gutter) !important;
  font-size: 14px !important;
}
#cookie-notice .cn-button,
#cookie-notice #cn-accept-cookie,
#cookie-notice #cn-refuse-cookie {
  border-radius: 99px !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
/* Accepter porte l'action : le plus fort contraste de la barre. */
#cookie-notice #cn-accept-cookie {
  background: var(--cta-bg) !important;
  color: var(--cta-fg) !important;
}
/* Refuser reste disponible et lisible, sans rivaliser : un choix qu'on
   n'enterre pas. */
#cookie-notice #cn-refuse-cookie {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: var(--carte-bord) !important;
}
#cookie-notice a { color: var(--accent) !important; text-decoration: underline; }

/* ---- Champs obligatoires ----
   WooCommerce marque l'astérisque en rouge pur (#ff0000) : 3,45:1 sur le
   parchemin, sous le seuil de 4,5. Ce rouge brûlé tient à 5,6:1 sur le fond
   de page et 6,5:1 sur les cartes blanches, et reste dans la chaleur du site. */
.required, .woocommerce .required, abbr.required {
  color: #b3261e !important;
  text-decoration: none !important;
  border: none !important;
}