/*
 * Theme Name:  Kadence Child — Arkanys Souverain
 * Theme URI:   https://www.arkanys-petfood.fr
 * Description: Thème enfant Kadence personnalisé pour Arkanys Petfood. WooCommerce premium.
 * Template:    kadence
 * Version:     13.0.0
 * Author:      Arkanys Petfood
 * Author URI:  https://www.arkanys-petfood.fr
 * Text Domain: arkanys-child
 */

/* ═══════════════════════════════════════
   VARIABLES
═══════════════════════════════════════ */
:root {
  --ark-bg:         #111010;
  --ark-bg-card:    #1a1917;
  --ark-bg-card-2:  #222120;
  --ark-border:     #2c2b29;
  --ark-gold:       #C5A059;
  --ark-gold-dark:  #8a6e3a;
  --ark-gold-light: #d4b578;
  --ark-cream:      #f0ece4;
  --ark-muted:      #a09890;
  --ark-dim:        #6a6260;
  --ark-font-serif: 'Cormorant Garamond','Georgia',serif;
  --ark-font-sans:  'Outfit','Helvetica Neue',Arial,sans-serif;
  --ark-font-mono:  'DM Mono','Courier New',monospace;
  --ark-font-title: 'Cinzel','Georgia',serif;
  --ark-transition: 0.28s ease;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
/* ── Uniformisation rendu polices Safari / Chrome / Firefox ── */
*, *::before, *::after {
  font-synthesis: none;
}

body {
  background-color: var(--ark-bg) !important;
  color: var(--ark-cream) !important;
  font-family: var(--ark-font-sans) !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
a { color: var(--ark-gold); text-decoration: none; transition: color var(--ark-transition); }
a:hover { color: var(--ark-gold-light); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--ark-font-serif) !important;
  color: var(--ark-cream) !important;
  font-weight: 300 !important;
  text-transform: none !important;
}

/* ═══════════════════════════════════════
   HERO — Protection Cinzel (ne jamais laisser Kadence l'écraser)
═══════════════════════════════════════ */
.ha1-h1, .ha1-h1 *, [class*="ha1-h1"] {
  font-family: 'Cinzel','Georgia',serif !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
}
.ha1-h1-line2 {
  font-family: 'Cormorant Garamond','Georgia',serif !important;
  font-style: italic !important;
}
.ha1-badge {
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
}

/* ═══════════════════════════════════════
   PLEINE LARGEUR — override Kadence
═══════════════════════════════════════ */
.woocommerce-page .site-content,
.woocommerce .site-content,
body.woocommerce .content-area,
body.woocommerce-page .content-area,
.woocommerce-page .entry-content-wrap,
.woocommerce .entry-content-wrap {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.single-product #main { padding: 0 !important; }
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-notices-wrapper {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ═══════════════════════════════════════
   BOUTONS WC
═══════════════════════════════════════ */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: linear-gradient(135deg,var(--ark-gold-light),var(--ark-gold) 55%,var(--ark-gold-dark)) !important;
  color: #1a1917 !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 20px rgba(197,160,89,.18) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(197,160,89,.32) !important;
  color: #1a1917 !important;
}

/* ═══════════════════════════════════════
   CARTES PRODUIT — boucle
═══════════════════════════════════════ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 3px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: border-color var(--ark-transition), transform var(--ark-transition), box-shadow var(--ark-transition) !important;
  position: relative !important;
  animation: ark-card-in .6s ease both;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--ark-gold-dark) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
}
.woocommerce ul.products li.product:nth-child(1){animation-delay:.05s}
.woocommerce ul.products li.product:nth-child(2){animation-delay:.12s}
.woocommerce ul.products li.product:nth-child(3){animation-delay:.19s}
.woocommerce ul.products li.product:nth-child(4){animation-delay:.26s}
.woocommerce ul.products li.product:nth-child(5){animation-delay:.33s}
.woocommerce ul.products li.product:nth-child(6){animation-delay:.40s}
.woocommerce ul.products li.product:nth-child(7){animation-delay:.47s}
.woocommerce ul.products li.product:nth-child(8){animation-delay:.54s}

@keyframes ark-card-in {
  from { opacity:0; transform:translateY(32px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Hover : ligne or en haut */
.woocommerce ul.products li.product::before {
  content:'' !important; position:absolute !important;
  top:0;left:0;right:0 !important; height:2px !important;
  background:linear-gradient(90deg,transparent,var(--ark-gold),transparent) !important;
  opacity:0 !important; transition:opacity var(--ark-transition) !important; z-index:2 !important;
}
.woocommerce ul.products li.product:hover::before { opacity:1 !important; }

/* Titre carte */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.ark-card-title {
  font-family: var(--ark-font-serif) !important;
  color: var(--ark-cream) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

/* Prix boucle */
.woocommerce ul.products li.product .price,
.ark-card-price {
  color: var(--ark-gold) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Shimmer prix au survol */
@keyframes ark-shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
.woocommerce ul.products li.product:hover .price {
  background: linear-gradient(90deg,var(--ark-gold) 30%,var(--ark-gold-light) 50%,var(--ark-gold) 70%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: ark-shimmer 1.2s linear infinite !important;
}

/* Badge promo */
.woocommerce ul.products li.product .onsale {
  background: var(--ark-gold) !important;
  color: #1a1917 !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
}

/* Catégories WC — style premium, SANS texte moche */
.woocommerce ul.products li.product-category {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 3/4 !important;
  border: 1px solid var(--ark-border) !important;
  transition: border-color var(--ark-transition),transform var(--ark-transition) !important;
}
.woocommerce ul.products li.product-category:hover {
  border-color: var(--ark-gold-dark) !important;
  transform: translateY(-4px) !important;
}
.woocommerce ul.products li.product-category img {
  width:100%!important;height:100%!important;
  object-fit:cover!important;position:absolute!important;inset:0!important;
  transition:transform .6s ease!important;
}
.woocommerce ul.products li.product-category:hover img{transform:scale(1.05)!important}
.woocommerce ul.products li.product-category a::before {
  content:''!important;position:absolute!important;inset:0!important;
  background:linear-gradient(to top,rgba(11,10,10,.92) 0%,rgba(11,10,10,.05) 100%)!important;z-index:1!important;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  position:absolute!important;bottom:0!important;left:0!important;right:0!important;
  z-index:2!important;padding:20px!important;margin:0!important;
  font-family:var(--ark-font-title)!important;font-size:22px!important;
  font-weight:700!important;color:var(--ark-cream)!important;
  letter-spacing:2px!important;text-transform:uppercase!important;
}
.woocommerce ul.products li.product-category h2 .count { display:none!important; }

/* ═══════════════════════════════════════
   FICHE PRODUIT SINGLE
═══════════════════════════════════════ */
.woocommerce div.product .product_title {
  font-family: var(--ark-font-title) !important;
  color: var(--ark-cream) !important;
  font-size: clamp(24px,3vw,48px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

/* Prix fiche */
.ark-sp-price-zone .price,
.ark-sp-price-zone .woocommerce-Price-amount {
  color: var(--ark-gold) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}
.woocommerce div.product p.price del {
  font-size: 16px !important;
  color: var(--ark-dim) !important;
  font-weight: 300 !important;
  margin-right: 8px !important;
}

/* Masquer le p.price natif WC dupliqué hors de notre zone de prix custom
   (le prix est déjà affiché dans .ark-sp-price-zone et dans .single_variation)
   EXCEPTION : le prix dans .single_variation_wrap reste visible (prix variation sélectionnée) */
.ark-sp-summary-col > p.price,
.ark-sp-summary-col > form.variations_form > p.price {
  display: none !important;
}

/* Description courte */
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ark-muted) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Galerie — image non coupée (contain) */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ark-bg-card) !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image img {
  width: auto !important; max-width: 100% !important;
  height: auto !important; max-height: 100% !important;
  object-fit: contain !important;
}
/* Thumbnails */
.flex-control-thumbs {
  display: flex !important; gap: 8px !important;
  padding: 12px !important;
  background: var(--ark-bg) !important;
  border-top: 1px solid var(--ark-border) !important;
  flex-wrap: wrap !important;
  list-style: none !important; margin: 0 !important;
}
.flex-control-thumbs li {
  width: 72px !important; height: 72px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: border-color var(--ark-transition) !important;
  background: var(--ark-bg-card) !important;
}
.flex-control-thumbs li:hover,
.flex-control-thumbs .flex-active { border-color: var(--ark-gold) !important; }
.flex-control-thumbs li img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
}
/* Zoom trigger */
.woocommerce-product-gallery__trigger {
  background: rgba(17,16,16,.9) !important;
  border: 1px solid rgba(197,160,89,.4) !important;
  width: 40px !important; height: 40px !important;
  border-radius: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.woocommerce-product-gallery__trigger:hover { background: var(--ark-gold) !important; }
.woocommerce-product-gallery__trigger img { display: none !important; }
.woocommerce-product-gallery__trigger::before { content:'\2295 '; font-size:18px; color:var(--ark-gold); }

/* Variations */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  color: var(--ark-cream) !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
}
.woocommerce div.product form.cart .variations select {
  background: var(--ark-bg) !important;
  border: 1px solid var(--ark-border) !important;
  color: var(--ark-cream) !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  padding: 12px 14px !important; border-radius: 0 !important;
  transition: border-color var(--ark-transition) !important;
}
.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--ark-gold) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,.12) !important;
  outline: none !important;
}

/* Qty */
.woocommerce .quantity input.qty {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  color: var(--ark-gold) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 22px !important;
  text-align: center !important;
  border-radius: 0 !important;
  width: 70px !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--ark-border) !important;
  padding: 0 !important; margin: 0 0 24px !important;
  list-style: none !important; display: flex !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: var(--ark-dim) !important;
  padding: 12px 24px !important; display: block !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ark-gold) !important; border-bottom-color: var(--ark-gold) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  padding: 32px !important; color: var(--ark-muted) !important;
}

/* ═══════════════════════════════════════
   REMISES
═══════════════════════════════════════ */
.ark-remises-wrap {
  background: var(--ark-bg-card);
  border: 1px solid var(--ark-border);
  border-left: 3px solid var(--ark-gold);
  padding: 20px 24px; margin: 20px 0;
}
.ark-remises-title {
  font-family: var(--ark-font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--ark-gold);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.ark-remises-title::before { content:'\2295 '; font-size:14px; }
.ark-remises-table { width:100%; border-collapse:collapse; }
.ark-remises-table th {
  font-family: var(--ark-font-mono); font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--ark-dim);
  padding:8px 12px; text-align:left; border-bottom:1px solid var(--ark-border);
}
.ark-remises-table td {
  font-size:13px; color:var(--ark-muted);
  padding:9px 12px; border-bottom:1px solid rgba(44,43,41,.5);
}
.ark-remises-table tr.is-active td {
  color:var(--ark-gold); font-weight:600; background:rgba(197,160,89,.04);
}
.ark-remises-table td.ark-discount-val {
  color: var(--ark-gold) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════
   PANIER
═══════════════════════════════════════ */
.woocommerce-cart table.cart {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
  border-top: 1px solid var(--ark-border) !important;
  color: var(--ark-cream) !important; padding: 18px 14px !important;
}
.woocommerce-cart table.cart th {
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; color: var(--ark-dim) !important;
  font-weight: 500 !important; background: var(--ark-bg) !important;
}
.woocommerce-cart table.cart td.product-name a {
  color: var(--ark-cream) !important;
  font-family: var(--ark-font-serif) !important; font-size:16px !important;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: var(--ark-gold) !important;
  font-family: var(--ark-font-serif) !important;
  font-size: 18px !important; font-weight: 600 !important;
}
.woocommerce-cart .cart_totals {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  padding: 28px !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border-top: 1px solid var(--ark-border) !important;
  padding: 14px 0 !important;
  color: var(--ark-muted) !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
}
.woocommerce-cart .cart_totals table .order-total td {
  color: var(--ark-gold) !important;
  font-size: 14px !important;
}

/* ═══════════════════════════════════════
   NOTICES
═══════════════════════════════════════ */
.woocommerce-message, .woocommerce-info {
  background: var(--ark-bg-card) !important;
  border-top: 3px solid var(--ark-gold) !important;
  color: var(--ark-cream) !important; border-radius: 0 !important;
}
/* Supprimer les flèches natives des input[type=number] partout sauf produit */
input[type="number"]:not(.ark-sp-summary-col input.qty) {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.woocommerce-error {
  background: var(--ark-bg-card) !important;
  border-top: 3px solid #e07060 !important;
  color: var(--ark-cream) !important; border-radius: 0 !important;
}

/* ═══════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════ */
#ark-loader {
  position: fixed !important; inset: 0 !important;
  background: var(--ark-bg) !important; z-index: 99999 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; flex-direction: column !important;
  gap: 28px !important;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s !important;
}
#ark-loader.ark-loader-hidden {
  opacity: 0 !important; visibility: hidden !important;
  pointer-events: none !important;
}
.ark-loader-logo-img {
  width: 200px; max-width: 60vw;
  opacity: 0; animation: ark-logo-in .8s .1s ease forwards;
}
@keyframes ark-logo-in {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.ark-loader-bar {
  width: 180px; height: 1px;
  background: var(--ark-border); position: relative; overflow: hidden;
}
.ark-loader-bar::after {
  content:''; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background: linear-gradient(90deg,transparent,var(--ark-gold),transparent);
  animation: arkload 1.1s ease infinite;
}
@keyframes arkload { 0%{left:-100%} 100%{left:100%} }
.ark-loader-sub {
  font-family: var(--ark-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 4px; color: var(--ark-dim);
  text-transform: uppercase;
  animation: arklsub 1.6s ease infinite alternate;
}
@keyframes arklsub { from{opacity:.2} to{opacity:.8} }

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.ark-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.ark-reveal.is-visible { opacity: 1; transform: translateY(0); }
.ark-reveal-delay-1 { transition-delay: .1s; }
.ark-reveal-delay-2 { transition-delay: .2s; }
.ark-reveal-delay-3 { transition-delay: .3s; }

/* ═══════════════════════════════════════
   COMPTE CLIENT
═══════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  padding: 20px 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--ark-muted) !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  padding: 12px 24px !important; display: block !important;
  border-left: 2px solid transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--ark-gold) !important;
  border-left-color: var(--ark-gold) !important;
  background: rgba(197,160,89,.05) !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--ark-bg-card) !important;
  border: 1px solid var(--ark-border) !important;
  padding: 32px !important; color: var(--ark-muted) !important;
}

/* Champs de formulaire */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--ark-bg) !important;
  border: 1px solid var(--ark-border) !important;
  color: var(--ark-cream) !important; border-radius: 0 !important;
  font-family: var(--ark-font-sans) !important; padding: 12px 14px !important;
}
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--ark-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(197,160,89,.1) !important;
}
.woocommerce form .form-row label {
  color: var(--ark-dim) !important;
  font-family: var(--ark-font-mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 700px) {
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
}
/* Toujours 2 colonnes sur mobile, jamais 1 — sauf si le thème/page impose */
@media (max-width: 400px) {
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
}
/* Bloquer le débordement horizontal sur les pages archives/boutique */
body.woocommerce:not(.single-product),
body.woocommerce-page:not(.single-product) {
  overflow-x: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   KADENCE FULLWIDTH — PANIER & CHECKOUT
   Cible les conteneurs internes Kadence pour éliminer
   l'effet 3-colonnes (#primary 72% + #secondary 28% vide).
   Complète les hooks PHP du MODULE 13.
═══════════════════════════════════════════════════════════ */

/* 1. Wrapper principal Kadence → display block (plus de flex/grid Kadence) */
body.woocommerce-cart #inner-wrap,
body.woocommerce-checkout #inner-wrap,
body.woocommerce-cart .content-container,
body.woocommerce-checkout .content-container,
body.woocommerce-cart .kadence-content-container,
body.woocommerce-checkout .kadence-content-container,
body.woocommerce-cart .site-container > .inner-container,
body.woocommerce-checkout .site-container > .inner-container {
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  flex-direction: column !important;
}

/* 2. #primary — prend 100% de la largeur, écrase le flex inline */
body.woocommerce-cart #primary,
body.woocommerce-cart #main,
body.woocommerce-cart .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-checkout #primary,
body.woocommerce-checkout #main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  /* Écrase le style="flex: 0 1 calc(72% - 20px)" de Kadence */
  -webkit-flex: 1 1 100% !important;
}

/* 3. Sidebar Kadence (#secondary) → masquée */
body.woocommerce-cart #secondary,
body.woocommerce-cart .widget-area,
body.woocommerce-cart aside.sidebar,
body.woocommerce-checkout #secondary,
body.woocommerce-checkout .widget-area,
body.woocommerce-checkout aside.sidebar {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

/* 4. Écrase les colonnes inline-style de Kadence (JS-based) */
body.woocommerce-cart #inner-wrap > *,
body.woocommerce-checkout #inner-wrap > * {
  flex: unset !important;
}

/* 5. WooCommerce float overrides sur col-1/col-2 (checkout) */
body.woocommerce-checkout .col2-set,
body.woocommerce-checkout #customer_details {
  width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  clear: none !important;
  margin: 0 0 3px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 6. WooCommerce cart_totals float override */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals > * {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  clear: none !important;
}

/* 7. Form-row floats checkout (WC native float:left 47%/48%) */
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
  float: none !important;
  width: auto !important;
  clear: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ARKANYS v9 — CORRECTIFS GLOBAUX
   ① Kadence button[aria-expanded] backgrounds
   ② WC single product price double display
   ③ Accordion open state readability
═══════════════════════════════════════════════════════════ */

/* ① Kadence injecte background sur button[aria-expanded="true"] et .kb-accordion-panel-title.is-open
   Ces styles cassent nos boutons accordéon custom (fond doré sur texte doré = illisible).
   On cible uniquement nos boutons .ark-acc-head pour éviter de casser Kadence globalement. */
.ark-acc .ark-acc-head[aria-expanded="true"],
.ark-acc .ark-acc-head[aria-expanded="false"],
.ark-acc .ark-acc-item.is-open .ark-acc-head {
  background: #1a1917 !important;
  background-color: #1a1917 !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}
.ark-acc .ark-acc-head:hover {
  background: rgba(197, 160, 89, 0.03) !important;
}
/* Textes toujours lisibles quelle que soit la couleur de fond injectée */
.ark-acc .ark-acc-title {
  color: #f0ece4 !important;
}
.ark-acc .ark-acc-item.is-open .ark-acc-title {
  color: #C5A059 !important;
}

/* ② Remises fiche produit — section accordéon : lisibilité forcée */
.ark-acc-content .ark-remises-wrap {
  background: var(--ark-bg-card, #1a1917) !important;
}
.ark-acc-content .ark-remises-title {
  color: var(--ark-gold, #C5A059) !important;
}
.ark-acc-content .ark-remises-table td {
  color: var(--ark-muted, #a09890) !important;
}
.ark-acc-content .ark-remises-table th {
  color: var(--ark-dim, #6a6260) !important;
}

/* ③ Checkout : #order_review intégré dans .ark-co-recap — reset WC */
#order_review {
  display: block !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   HEADER TRANSPARENT — compensation hauteur
   Le header Kadence est position:absolute sur les pages avec
   transparent-header. Il faut pousser le contenu vers le bas
   pour éviter le chevauchement.
   Checkout/Panier : gérés séparément par leur propre template.
═══════════════════════════════════════════════════════════ */

/* Pages produit, catégories, pages standard */
body.transparent-header:not(.woocommerce-cart):not(.woocommerce-checkout)
  .entry-hero .entry-hero-container-inner,
body.transparent-header:not(.woocommerce-cart):not(.woocommerce-checkout)
  .page-hero-section .entry-hero-container-inner {
  padding-top: 80px !important;
}

/* Pages produit (single product) : hero avec image + titre */
body.transparent-header.single-product .entry-hero-container-inner,
body.transparent-header.woocommerce .product-hero-section .entry-hero-container-inner {
  padding-top: 80px !important;
}

/* Pages archives / catégories WooCommerce */
body.transparent-header.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout)
  .entry-hero-container-inner {
  padding-top: 80px !important;
}

/* Fallback général pour toute page avec transparent-header sans hero section */
body.transparent-header:not(.woocommerce-cart):not(.woocommerce-checkout) #inner-wrap {
  padding-top: 0;
}

@media (max-width: 1024px) {
  body.mobile-transparent-header:not(.woocommerce-cart):not(.woocommerce-checkout)
    .entry-hero-container-inner {
    padding-top: 60px !important;
  }
}

@media (max-width: 767px) {
  body.mobile-transparent-header:not(.woocommerce-cart):not(.woocommerce-checkout)
    .entry-hero-container-inner {
    padding-top: 61px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HEADER — cohérence panier checkout vs autres pages
   Sur cart/checkout : le header Kadence reste visible en sticky
   avec fond solide (il est position:absolute en mode transparent).
═══════════════════════════════════════════════════════════ */

/* 1. Forcer UNIQUEMENT #masthead visible.
      NE PAS toucher #mobile-header ici : Kadence le gère via
      ses propres media queries. Forcer display:block dessus
      afficherait les deux headers en même temps. */
body.woocommerce-cart #masthead,
body.woocommerce-checkout #masthead {
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--ark-bg, #111010) !important;
  border-bottom: 1px solid var(--ark-border, #2c2b29) !important;
}
/* Mobile header : fond solide uniquement — display géré par Kadence */
body.woocommerce-cart #mobile-header,
body.woocommerce-checkout #mobile-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--ark-bg, #111010) !important;
}

/* 3. Couleurs texte nav (transparent-header les forçait en blanc sur transparent) */
body.woocommerce-cart.transparent-header #main-header .header-navigation .header-menu-container > ul > li.menu-item > a,
body.woocommerce-checkout.transparent-header #main-header .header-navigation .header-menu-container > ul > li.menu-item > a {
  color: var(--ark-cream, #f0ece4) !important;
}
body.woocommerce-cart.transparent-header #main-header .header-html,
body.woocommerce-checkout.transparent-header #main-header .header-html {
  color: var(--ark-cream, #f0ece4) !important;
}

/* 4. Masquer l'ark-co-header custom (checkout) — le vrai header le remplace */
.ark-co-header {
  display: none !important;
}

/* 5. Retirer les marges de compensation du template checkout */
body.woocommerce-checkout .ark-co-page {
  padding-top: 0 !important;
}
body.woocommerce-cart #inner-wrap,
body.woocommerce-checkout #inner-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX — Titre natif Kadence + breadcrumb WC sur pages boutique
   Ces éléments sont remplacés par nos customs dans archive-product.php
═══════════════════════════════════════════════════════════ */
body.woocommerce:not(.single-product) .entry-title,
body.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.single-product) .entry-title,
.woocommerce-products-header,
.woocommerce-breadcrumb,
body.woocommerce:not(.single-product) .page-title {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX CRITIQUE — Pages produit single : scroll & hauteur
   Surcharge les styles inline de single-product.php
═══════════════════════════════════════════════════════════ */

/* 0. Bloquer le débordement horizontal sur mobile */
body.single-product,
body.single-product .ark-sp {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* 1. Galerie sticky : compense la WP admin bar (32px desktop, 46px mobile) */
.ark-sp-gallery-col {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
}
@media screen and (max-width: 782px) {
  .ark-sp-gallery-col { top: 0 !important; height: auto !important; position: relative !important; }
}

/* 2. Hero grid : retire min-height pour que la page scrolle normalement */
.ark-sp-hero {
  min-height: unset !important;
  align-items: start !important;
}

/* 3. Summary col : retire overflow-y:auto — c'est la page qui scrolle */
.ark-sp-summary-col {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* woocommerce-input-wrapper : span wrapper autour de chaque input WC */
#billing_address_1_field .woocommerce-input-wrapper,
#billing_address_2_field .woocommerce-input-wrapper,
#shipping_address_1_field .woocommerce-input-wrapper,
#shipping_address_2_field .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX — Autocomplete adresse Google (champ trop étroit)
   .pac-container est injecté par l'API Google Maps en <body>
═══════════════════════════════════════════════════════════ */
.pac-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  left: 0 !important;
  box-sizing: border-box !important;
}
/* Le champ custom WC address autocomplete */
.wc-address-autocomplete-input-wrapper,
#billing_address_1_field .wc-address-autocomplete-input-wrapper,
#shipping_address_1_field .wc-address-autocomplete-input-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
}
.wc-address-autocomplete-input-wrapper input[type="text"],
.wc-address-autocomplete-input-wrapper input[type="search"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 40px !important; /* espace pour l'icône loupe */
}
/* Icône de recherche à droite */
.wc-address-autocomplete-input-wrapper .wc-address-autocomplete-icon,
.wc-address-autocomplete-input-wrapper button,
.wc-address-autocomplete-input-wrapper svg {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
/* Sur mobile : mêmes corrections */
@media (max-width: 767px) {
  .pac-container { width: 90vw !important; }
}

/* ═══════════════════════════════════════════════════════════
   FIX — Noms de sous-catégories toujours visibles
   (sur les tuiles de catégories dans les pages boutique)
═══════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 14px 18px 12px !important;
  font-size: clamp(12px, 1.3vw, 16px) !important;
  text-align: center !important;
}
/* Forcer le texte visible même si le theme le cache */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title > a,
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title > span:not(.count) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ark-cream, #f0ece4) !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX — Bouton "Espace Pro" : texte doré sur cart & checkout
   Le header Kadence reste visible sur ces pages (transparent-
   header actif). Le bouton .button-style-outline héritait de
   --global-palette-btn:#000 → noir illisible sur fond sombre.
═══════════════════════════════════════════════════════════ */
#main-header .header-button.button-style-outline {
  color: var(--global-palette1) !important;
  border-color: var(--global-palette1) !important;
  background: transparent !important;
}
#main-header .header-button.button-style-outline:hover {
  color: var(--global-palette2) !important;
  border-color: var(--global-palette2) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX — WooCommerce Variation Swatches (woo-variation-swatches)
   Le plugin remplace le <select> par une <ul> de boutons.
   On surcharge le style du plugin pour coller au design Arkanys.
═══════════════════════════════════════════════════════════ */

/* Conteneur de la liste de swatches */
.ark-sp-summary-col .variable-items-wrapper {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

/* Chaque item swatch (bouton texte) */
.ark-sp-summary-col .variable-item {
  background: var(--ark-bg, #111010) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-cream, #f0ece4) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: border-color .22s, background .22s, color .22s !important;
  min-width: 60px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}

/* Swatch sélectionné ou survolé */
.ark-sp-summary-col .variable-item.selected,
.ark-sp-summary-col .variable-item.selected:focus,
.ark-sp-summary-col .variable-item:hover:not(.disabled) {
  border-color: var(--ark-gold, #C5A059) !important;
  background: rgba(197,160,89,.07) !important;
  color: var(--ark-gold, #C5A059) !important;
  box-shadow: none !important;
}

/* Swatch indisponible */
.ark-sp-summary-col .variable-item.disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}

/* Cacher le tick/coche du plugin (::before généré) */
.ark-sp-summary-col .variable-item::before,
.ark-sp-summary-col .variable-item .variable-item-span::before {
  display: none !important;
}

/* Cacher le <select> natif que le plugin laisse dans le DOM */
.ark-sp-summary-col .woo-variation-raw-select {
  display: none !important;
}

/* ── Masquer aussi le <select> WC natif quand notre JS injecte les boutons ──
   Notre module 15B injecte .ark-var-wrap et met select[data-ark-var] en display:none.
   Ce CSS est un fallback visible immédiatement avant que le JS tourne. */
.ark-sp-summary-col select[name^="attribute_"][data-ark-var="1"] {
  display: none !important;
}

/* ── Boutons de variation personnalisés (ark-var-btn, injectés par Module 15B) ── */
.ark-var-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 4px !important;
  list-style: none !important;
  padding: 0 !important;
}
.ark-var-btn {
  background: var(--ark-bg, #111010) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-cream, #f0ece4) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: border-color .22s, background .22s, color .22s !important;
  min-width: 60px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}
.ark-var-btn.selected,
.ark-var-btn:hover:not([disabled]) {
  border-color: var(--ark-gold, #C5A059) !important;
  background: rgba(197,160,89,.07) !important;
  color: var(--ark-gold, #C5A059) !important;
}
.ark-var-btn[disabled] {
  opacity: .35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Reset éventuel du reset_variations link */
.ark-sp-summary-col .reset_variations {
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  color: var(--ark-dim, #6a6260) !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: 4px !important;
}
.ark-sp-summary-col .reset_variations:hover {
  color: var(--ark-gold, #C5A059) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX — Bouton "Ajouter au panier" + input quantité
   Alignement cohérent avec la galerie sticky
═══════════════════════════════════════════════════════════ */

/* Wrapper flex du cart form */
.ark-sp-summary-col .cart {
  display: flex !important;
  flex-direction: column !important;  /* empilement vertical */
  gap: 10px !important;
  align-items: stretch !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
}

/* La table variations prend toute la largeur */
.ark-sp-summary-col .variations_form table.variations {
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Masquer le prix variation WC natif (div.woocommerce-variation.single_variation)
   Notre ark-sp-price-zone + le tableau remises suffisent */
.ark-sp-summary-col .single_variation_wrap .woocommerce-variation.single_variation {
  display: none !important;
}

/* Le wrapper qty+ATC sur sa propre ligne, horizontal */
.ark-sp-summary-col .single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}

/* Préserver le layout horizontal pour les produits simples (pas de .variations_form) */
.ark-sp-summary-col form.cart:not(.variations_form) {
  flex-direction: row !important;
}

/* Input quantité */
.ark-sp-summary-col .quantity {
  flex-shrink: 0 !important;
}
.ark-sp-summary-col .quantity input.qty {
  background: var(--ark-bg-card, #1a1917) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 80px !important;
  height: 56px !important;
  border-radius: 0 !important;
  -moz-appearance: textfield !important;
}
.ark-sp-summary-col .quantity input.qty:focus {
  border-color: var(--ark-gold, #C5A059) !important;
  outline: none !important;
}

/* Bouton ATC principal */
.ark-sp-summary-col .single_add_to_cart_button.button.alt,
.ark-sp-summary-col button.single_add_to_cart_button {
  flex: 1 !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 24px !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg,
    var(--global-palette-highlight-alt, #8B6914) 0%,
    var(--global-palette1, #C5A059) 45%,
    #E8C97A 60%,
    var(--global-palette1, #C5A059) 100%) !important;
  color: #111010 !important;
  border: none !important;
  cursor: pointer !important;
  transition: box-shadow .25s, transform .22s !important;
  box-shadow: 0 4px 18px rgba(197,160,89,.25) !important;
}

/* Prix dans le bouton ATC */
.ark-atc-text {
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.ark-atc-sep {
  letter-spacing: 0;
  opacity: .7;
  font-size: 11px;
  font-weight: 400;
}
.ark-atc-price {
  font-family: var(--ark-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1;
}
.ark-sp-summary-col .single_add_to_cart_button.button.alt:hover,
.ark-sp-summary-col button.single_add_to_cart_button:hover {
  box-shadow: 0 8px 28px rgba(197,160,89,.45) !important;
  transform: translateY(-2px) !important;
}
.ark-sp-summary-col .single_add_to_cart_button.button.alt:disabled,
.ark-sp-summary-col button.single_add_to_cart_button:disabled {
  opacity: .45 !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Mobile : cart en colonne */
@media (max-width: 640px) {
  .ark-sp-summary-col .cart {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .ark-sp-summary-col .quantity input.qty {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIONS GROUPÉES V15 — Mars 2026
   ═══════════════════════════════════════════════════════════ */

/* ── 1. POLICE UNIFORME (Safari / Chrome cohérence) ─────────
   Safari charge les fonts Google plus tardivement → fallback
   visible. On force les polices Arkanys sur tous les éléments
   critiques avec stack robuste.
   ──────────────────────────────────────────────────────────── */
body, input, textarea, select, button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.woocommerce div.product .product_title,
.product_title,
h1.product_title {
  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif !important;
}
.entry-title, .woocommerce-page-title, .page-title {
  font-family: 'Cinzel', 'Georgia', serif !important;
}
.cart_totals h2, .woocommerce-cart-form h2,
.cart-collaterals h2, .woocommerce-checkout h3 {
  font-family: 'Cinzel', 'Georgia', serif !important;
}

/* ── 2. NOTIFICATION AJOUT AU PANIER — sous le header ───────
   Le sticky header desktop ≈ 118px ; admin bar = 32px.
   WC place .woocommerce-message en position fixe ; on le pousse
   sous le header au lieu de le laisser se faire couper.
   ──────────────────────────────────────────────────────────── */
.wc-block-components-notices__notices,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  position: relative !important;
  top: auto !important;
}
/* Sur pages single product, la notice flottante */
body.single-product .woocommerce-notices-wrapper {
  position: sticky !important;
  top: 118px !important;
  z-index: 500 !important;
}
body.admin-bar.single-product .woocommerce-notices-wrapper {
  top: 150px !important;
}
/* Notification ATC — style avec bouton fermer */
body.single-product .woocommerce-notices-wrapper .woocommerce-message {
  position: relative !important;
  padding-right: 44px !important;
  transition: opacity .4s, transform .4s !important;
}
/* Bouton × injecté par JS */
.ark-notice-close {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--ark-gold, #C5A059) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  opacity: .7 !important;
  transition: opacity .2s !important;
  z-index: 10 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ark-notice-close:hover {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── 3. HEADER PANIER/CHECKOUT FULL LARGEUR ──────────────────
   Kadence inner containers limitent la largeur par défaut.
   ──────────────────────────────────────────────────────────── */
body.woocommerce-cart #masthead,
body.woocommerce-checkout #masthead {
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}
/* Conteneurs header principal : pleine largeur sans casser le top bar */
body.woocommerce-cart #masthead .site-container,
body.woocommerce-checkout #masthead .site-container {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.woocommerce-cart #masthead .site-header-row-container-inner,
body.woocommerce-checkout #masthead .site-header-row-container-inner {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Header principal (nav + logo + panier) */
body.woocommerce-cart #masthead .site-main-header-inner-wrap,
body.woocommerce-checkout #masthead .site-main-header-inner-wrap,
body.woocommerce-cart #masthead .site-header-inner-wrap,
body.woocommerce-checkout #masthead .site-header-inner-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
/* Top bar (marquee + FB + Instagram + Espace Pro) :
   NE PAS toucher le padding — il est géré par le WP Custom CSS
   et le mask-image du "tunnel de lecture". Seul le max-width. */
body.woocommerce-cart #masthead .site-top-header-inner-wrap,
body.woocommerce-checkout #masthead .site-top-header-inner-wrap {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Icône panier dans le header — même style que page d'accueil */
body.woocommerce-cart #masthead .ark-header-cart,
body.woocommerce-checkout #masthead .ark-header-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Icône panier header : taille correcte */
body.woocommerce-cart .ark-header-cart,
body.woocommerce-checkout .ark-header-cart {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}

/* ── 4. ICÔNE CARTE BANCAIRE NOIRE (checkout) ────────────────
   L'image SVG carte générique WCPay a un fill noir.
   On force le filtre pour qu'elle s'adapte au fond sombre.
   ──────────────────────────────────────────────────────────── */
/* ══ Logos cartes bancaires WCPay — visibilité forcée ══
   WCPay injecte les logos via JS dans le label sous forme
   d'<img> ou de SVG inline. On cible tous les cas possibles. */

/* Tous les logos dans le label */
#payment .wc_payment_method > label img,
#payment .wc_payment_method > label svg,
.wc-payment-form .payment-method-logos img,
.wc-payment-form .payment-method-logos svg,
.wcpay-payment-logos img,
.payment-request-button-separator-container img {
  display: inline-block !important;
  height: 24px !important;
  width: auto !important;
  max-width: 50px !important;
  min-width: 24px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
}

/* Conteneur logos (WCPay injecte un div ou span autour) */
#payment .wc_payment_method > label .payment-method-logos,
#payment .wc_payment_method > label [class*="logos"],
#payment .wc_payment_method > label [class*="cards"],
#payment .wc_payment_method > label [class*="icons"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: 6px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}
/* Le label lui-même doit avoir overflow visible pour ne pas couper les logos */
#payment .wc_payment_method > label {
  overflow: visible !important;
  flex-wrap: wrap !important;
}
/* 4e logo (generic-card.svg) — s'assurer qu'il n'est pas coupé */
#payment .wc_payment_method > label img[src*="generic"],
#payment .wc_payment_method > label img[src*="card"],
#payment .wc_payment_method > label img:last-of-type {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 50px !important;
}

/* SVG inline dans label — forcer fill blanc sur fond sombre */
#payment .wc_payment_method > label svg path,
#payment .wc_payment_method > label svg rect,
#payment .wc_payment_method > label svg circle {
  /* Ne pas overrider — les SVG logos ont leurs propres couleurs */
}

/* ── 5. REMISE PANIER — texte rogné ─────────────────────────
   Les cellules th de remise sont trop étroites sur mobile.
   ──────────────────────────────────────────────────────────── */
.woocommerce-cart .cart_totals table .cart-discount th,
.woocommerce-cart .cart_totals table .fee th {
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 160px !important;
  font-size: 11px !important;
}
/* Dans le récap checkout aussi */
.woocommerce-checkout-review-order-table tfoot .cart-discount th,
.woocommerce-checkout-review-order-table tfoot .fee th {
  white-space: normal !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  max-width: 120px !important;
}

/* ── 6. AUTOCOMPLETE ADRESSE — dropdown plus large ───────────
   .pac-container est injecté par Google Places en position
   absolue sur le body → on élargit à min 420px.
   ──────────────────────────────────────────────────────────── */
/* pac-container : largeur pilotée par form-checkout.php inline CSS */
.pac-container {
  min-width: min(420px, 90vw) !important;
  max-width: min(600px, 95vw) !important;
  width: auto !important;
}

/* ── 7. BARRE PROGRESSION REMISE PANIER — article count ─────
   Voir JS dans cart.php (section "Refresh AJAX").
   Styles nécessaires pour le compteur d'articles.
   ──────────────────────────────────────────────────────────── */
.ark-dp-articles {
  font-family: var(--ark-font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--ark-dim, #6a6260);
  margin-top: 4px;
}

/* ── 8. ICÔNES TRANSPORTEURS (checkout) ─────────────────────
   Les <img> des transporteurs Packlink sont injectées dans
   des <input type="hidden"> voisins. On force leur affichage.
   ──────────────────────────────────────────────────────────── */

/* Masquer toutes les imgs dans les labels de transporteurs
   (Packlink en injecte une via son filtre wc_cart_totals_shipping_method_label)
   → seule l'image injectée par notre JS (.ark-sh-carrier-img) sera visible */
.ark-sh-item label img:not(.ark-sh-carrier-img) {
  display: none !important;
}

/* Logo injecté par injectCarrierImages() — taille confortable */
.ark-sh-item label img.ark-sh-carrier-img {
  display: inline-block !important;
  width: auto !important;
  height: 32px !important;
  max-width: 70px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

/* ── 9. VARIATION SWATCHES — désactivation visuelle ─────────
   Si le plugin est désactivé, s'assurer que les selects
   natifs WC s'affichent correctement.
   ──────────────────────────────────────────────────────────── */
.ark-sp-summary-col .variations select.woo-variation-raw-select {
  display: block !important;
}
/* Garder la structure table variations propre */
.ark-sp-summary-col table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
}
.ark-sp-summary-col table.variations td,
.ark-sp-summary-col table.variations th {
  padding: 0 0 14px !important;
  border: none !important;
  vertical-align: middle !important;
}

/* ── 10. MINI-HEADER CHECKOUT — bouton retour panier ─────────
   .ark-co-back était display:none si .ark-co-header masqué.
   Forcer visibilité dans le vrai header Kadence.
   ──────────────────────────────────────────────────────────── */
.ark-co-header .ark-co-back {
  display: flex !important;
}

/* ── 11. CATÉGORIES ARCHIVES — noms toujours visibles ───────
   Sous-catégories (chien, chat, chaton, chiot) sur les tuiles.
   ──────────────────────────────────────────────────────────── */
.woocommerce ul.products li.product-category
  .woocommerce-loop-category__title {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 12. PRIX BARRÉ AVEC REMISE (fiche produit / panier) ────
   WC ajoute .price del + .price ins quand un prix remisé
   existe. Arkanys injecte la remise via fee/coupon.
   On s'assure que del est visible et stylé.
   ──────────────────────────────────────────────────────────── */
.ark-sp-price-zone .price del,
.ark-sp-price-zone del .woocommerce-Price-amount {
  display: inline !important;
  color: var(--ark-dim, #6a6260) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  text-decoration: line-through !important;
  margin-right: 8px !important;
}
.ark-sp-price-zone .price ins,
.ark-sp-price-zone ins .woocommerce-Price-amount {
  text-decoration: none !important;
  font-size: 32px !important;
  color: var(--ark-gold, #C5A059) !important;
}
/* Panier — cellule prix unitaire */
.woocommerce-cart .shop_table td.product-price del,
.woocommerce-cart .shop_table td.product-subtotal del {
  display: block !important;
  color: var(--ark-dim, #6a6260) !important;
  font-size: 12px !important;
  text-decoration: line-through !important;
}
.woocommerce-cart .shop_table td.product-price ins,
.woocommerce-cart .shop_table td.product-subtotal ins {
  text-decoration: none !important;
  color: var(--ark-gold, #C5A059) !important;
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIONS V15b — Checkout header retour panier
   ═══════════════════════════════════════════════════════════ */

/* Bouton retour panier : voir .ark-co-back-btn dans form-checkout.php */

/* ─── Barre de progression checkout — remise non tronquée ──── */
.woocommerce-checkout-review-order-table tfoot .fee th,
.woocommerce-checkout-review-order-table tfoot .cart-discount th {
  white-space: normal !important;
  max-width: 140px !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  font-size: 9px !important;
}

/* ─── Barre étapes checkout : visible sous le header ─────── */
.ark-co-steps {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
}

/* ════════════════════════════════════════════════════════════
   FIX LOGOS PAIEMENT — 4e logo CB visible
   WCPay injecte les logos Visa/MC/Amex/Générique via React.
   On force le label en flex sans contrainte de largeur.
════════════════════════════════════════════════════════════ */
#payment ul.wc_payment_methods .wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
}
/* Tous les logos (img + svg) dans le label */
#payment ul.wc_payment_methods .wc_payment_method > label img,
#payment ul.wc_payment_methods .wc_payment_method > label svg {
  display: inline-block !important;
  height: 22px !important;
  width: auto !important;
  max-width: 44px !important;
  min-width: 20px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}
/* Texte "Carte" dans le label — pousser après les logos */
#payment ul.wc_payment_methods .wc_payment_method > label span:not([class]) {
  order: 10;
}

/* ════════════════════════════════════════════════════════
   WCPAY — Badge "+ N" méthodes supplémentaires
   Ce texte apparaît après les 3 premiers logos CB.
   On le style comme un badge discret, pas comme un logo.
════════════════════════════════════════════════════════ */
.payment-methods--logos-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 6px !important;
  background: rgba(197,160,89,.12) !important;
  border: 1px solid rgba(197,160,89,.25) !important;
  color: var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════
   FIX — Étoile required sur "Numéro et nom de rue"
   L'asterisque (*) ne doit pas passer à la ligne.
   On force le label à ne pas couper entre le texte et l'*.
════════════════════════════════════════════════════════ */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row label.required_field {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Exception : ne pas tronquer les labels importants */
#billing_address_1_field label,
#billing_address_2_field label,
#shipping_address_1_field label,
#shipping_address_2_field label {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
}
/* L'étoile elle-même reste inline avec le label */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr {
  white-space: nowrap !important;
  display: inline !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   FIX TOP HEADER — panier & checkout
   La bande du haut (FB, Instagram, Espace Pro + marquee) :
   - Le mask-image "tunnel" s'appliquait aux icônes aussi → retirer sur ces pages
   - Les icônes restent visibles avec fond solide
   - Le marquee passe derrière (z-index plus bas)
════════════════════════════════════════════════════════════ */

/* ── FIX TOP HEADER panier/checkout : marquee visible + icônes lisibles ── */

/* 1. Retirer le mask-image tunnel sur ces pages */
body.woocommerce-cart .site-top-header-inner-wrap,
body.woocommerce-checkout .site-top-header-inner-wrap {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 2. Fond global de la top bar */
body.woocommerce-cart .site-top-header-wrap,
body.woocommerce-checkout .site-top-header-wrap {
  background-color: #292827 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 3. Le marquee (::before) passe à un z-index intermédiaire */
body.woocommerce-cart .site-top-header-wrap::before,
body.woocommerce-checkout .site-top-header-wrap::before {
  z-index: 8 !important;
}

/* 4. Les sections gauche/droite : z-index SUPÉRIEUR au marquee
      + fond local uniquement sur les éléments a/button/span (pas toute la section)
      pour que le marquee reste visible entre les deux blocs */
body.woocommerce-cart .site-top-header-wrap .site-header-section-left,
body.woocommerce-cart .site-top-header-wrap .site-header-section-right,
body.woocommerce-checkout .site-top-header-wrap .site-header-section-left,
body.woocommerce-checkout .site-top-header-wrap .site-header-section-right {
  position: relative !important;
  z-index: 20 !important;
  background-color: transparent !important; /* transparent : le marquee passe en dessous */
  padding: 0 20px !important;
}

/* 5. Les éléments enfants directs (icônes, bouton) ont leur propre fond opaque
      → masquent le marquee localement SANS cacher toute la largeur de la section */
body.woocommerce-cart .site-top-header-wrap .site-header-section-left > *,
body.woocommerce-cart .site-top-header-wrap .site-header-section-right > *,
body.woocommerce-checkout .site-top-header-wrap .site-header-section-left > *,
body.woocommerce-checkout .site-top-header-wrap .site-header-section-right > * {
  position: relative !important;
  z-index: 20 !important;
  background-color: #292827 !important;
  padding: 0 6px !important;
}

/* ══ FIX CHECKOUT v12 ═══════════════════════════════════════════════════
   1. Sidebar paiement : overflow:hidden pour contenir l'iframe Stripe
   2. Mondial Relay / Packlink widget : z-index + position
   3. Shipping row dans le récap : styles cohérents
══════════════════════════════════════════════════════════════════════ */

/* 1. Sidebar droite checkout — contenir les iframes WCPay/Stripe */
.ark-co-sidebar-wrap {
  overflow: visible !important; /* sticky fonctionne, overflow visible pour dropdowns */
}
.ark-co-payment {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#payment,
#payment .wc_payment_methods,
#payment .payment_box,
#payment .payment_box fieldset {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* WCPay injecte des éléments React sans box-sizing */
#payment .wcpay-upe-form,
#payment .wcpay-upe-element,
#payment [class*="wcpay"],
#payment [class*="stripe"],
#payment [class*="StripeElement"],
#payment [id*="wcpay"],
#payment iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 2. Mondial Relay / Packlink widget overlay */
#pl-picker-modal,
.packlink-location-picker,
#MondialRelayWidget,
.mondialrelay-container,
[id*="packlink"][id*="modal"],
[class*="packlink"][class*="modal"] {
  z-index: 999999 !important;
  position: fixed !important;
}
/* Bouton relais : s'assurer qu'il n'est pas écrasé par les resets checkout */
#packlink-drop-off-picker,
.shipping-method-select-point {
  display: inline-block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10 !important;
  position: relative !important;
}

/* 3. Ligne livraison dans le récap checkout */
.woocommerce-checkout-review-order-table tfoot tr.shipping th {
  color: var(--ark-dim, #6a6260) !important;
}
.woocommerce-checkout-review-order-table tfoot tr.shipping td {
  color: var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Liste modes livraison dans le récap (sidebar droite) */
.woocommerce-checkout-review-order-table tfoot tr.shipping ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
}
.woocommerce-checkout-review-order-table tfoot tr.shipping ul#shipping_method li {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  color: var(--ark-muted, #a09890) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX v10 (2026-03) — Checkout : suppression sélecteur dupliqué
   review-order.php n'émet plus wc_cart_totals_shipping_html()
   → pas de ul#shipping_method dans la sidebar.
   Ces règles sont un filet de sécurité défensif.
════════════════════════════════════════════════════════════════════ */

/* Masquer defensivement tout sélecteur de livraison dans la sidebar
   (ne devrait plus apparaître avec review-order.php v10, mais sécurité) */
#order_review ul#shipping_method,
#order_review .woocommerce-shipping-methods,
#order_review [id^="packlink-drop-off-picker"],
#order_review input[name="packlink_image_url"],
#order_review input[name="packlink_show_image"],
#order_review input[name="packlink_is_drop_off"],
#order_review input[name="packlink_drop_off_id"],
#order_review input[name="packlink_drop_off_extra"] {
  display: none !important;
}

/* Style de la ligne livraison "sélection propre" dans le récap sidebar */
.ark-shipping-selected-row td {
  font-family: var(--ark-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ark-cream, #f0ece4) !important;
  text-align: right !important;
}
.ark-shipping-selected-row .ark-shipping-method-name {
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--ark-muted, #a09890) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.ark-shipping-selected-row .ark-shipping-method-sep {
  display: none !important; /* séparateur " : " masqué, on utilise display:block sur le nom */
}
.ark-shipping-selected-row .ark-shipping-free {
  color: #6abd6a !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}

/* Bouton point relais dans la colonne gauche — cohérence style Arkanys */
.ark-shipping-methods-wrap #packlink-drop-off-picker,
.ark-sh-item #packlink-drop-off-picker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: background 0.22s, border-color 0.22s !important;
}
.ark-shipping-methods-wrap #packlink-drop-off-picker:hover,
.ark-sh-item #packlink-drop-off-picker:hover {
  background: rgba(197,160,89,0.07) !important;
  border-color: var(--ark-gold-dark, #8a6e3a) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PACKLINK LOCATION PICKER MODAL — Reskin Arkanys
   ─────────────────────────────────────────────────────────────────
   Problème : les styles globaux du checkout (inputs blancs sur fond
   sombre) débordaient dans la modale Packlink (fond blanc).
   → texte blanc sur fond blanc dans la barre de recherche.

   Solution : surcharger toute la modale sous #pl-picker-modal
   avec les couleurs sombres Arkanys, en isolation totale.
════════════════════════════════════════════════════════════════════ */

/* ── Wrapper modale ── */
#pl-picker-modal {
  background: var(--ark-bg-card, #1a1917) !important;
  border: 1px solid var(--ark-gold-dark, #8a6e3a) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.7) !important;
  border-radius: 0 !important;
  top: 8% !important;
  left: 8% !important;
  width: 84% !important;
  height: 84% !important;
}

/* ── Bouton fermer (croix SVG) ── */
#pl-picker-modal > svg {
  background: var(--ark-bg-card, #1a1917) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
}
#pl-picker-modal > svg path {
  stroke: var(--ark-gold, #C5A059) !important;
}

/* ── Conteneur principal location-picker ── */
#pl-picker-modal .lp-content {
  background-color: var(--ark-bg-card, #1a1917) !important;
  color: var(--ark-cream, #f0ece4) !important;
  height: 100% !important;
}

#pl-picker-modal .lp-locations {
  background: var(--ark-bg-card, #1a1917) !important;
}

/* ── Barre de recherche ──
   C'est ici que le texte était blanc sur blanc :
   notre reset global « color: var(--ark-cream) » s'appliquait à l'input
   MAIS le fond de Packlink restait blanc. On force les deux. */
#pl-picker-modal .lp-input-wrapper {
  background: var(--ark-bg, #111010) !important;
  border-bottom: 1px solid var(--ark-border, #2c2b29) !important;
  margin: 0 !important;
  padding: 0 24px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
}

#pl-picker-modal .lp-input-wrapper > .input {
  width: 100% !important;
  position: relative !important;
}

#pl-picker-modal .lp-input-wrapper > .input > input[type="text"],
#pl-picker-modal .lp-input-wrapper > .input > input[data-lp-id="search-box"] {
  background-color: var(--ark-bg-card, #1a1917) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-cream, #f0ece4) !important;
  font-family: var(--ark-font-sans, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 12px 16px !important;
  height: 44px !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  caret-color: var(--ark-gold, #C5A059) !important;
}

#pl-picker-modal .lp-input-wrapper > .input > input:focus {
  border-color: var(--ark-gold, #C5A059) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(197,160,89,.12) !important;
}

#pl-picker-modal .lp-input-wrapper > .input > input::placeholder {
  color: var(--ark-dim, #6a6260) !important;
  opacity: 1 !important;
}

/* Label flottant au-dessus du champ (Packlink utilise un <span class="label">) */
#pl-picker-modal .lp-input-wrapper > .input > .label {
  color: var(--ark-dim, #6a6260) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 16px !important;
  line-height: 1 !important;
}

#pl-picker-modal .lp-input-wrapper > .input > input:focus + .label,
#pl-picker-modal .lp-input-wrapper > .input > input:valid + .label {
  font-size: 9px !important;
  top: 6px !important;
  transform: none !important;
  color: var(--ark-gold-dark, #8a6e3a) !important;
  letter-spacing: 2px !important;
}

/* ── Lignes de résultats ── */
#pl-picker-modal .lp-location-wrapper {
  background: var(--ark-bg-card, #1a1917) !important;
  border-bottom: 1px solid var(--ark-border, #2c2b29) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 0 20px !important;
  transition: background .18s !important;
}

#pl-picker-modal .lp-location-wrapper:hover {
  background: rgba(197,160,89,.04) !important;
}

#pl-picker-modal .lp-location-wrapper.selected {
  border-left: 3px solid var(--ark-gold, #C5A059) !important;
  background: rgba(197,160,89,.06) !important;
}

/* Textes dans les lignes */
#pl-picker-modal .lp-location-wrapper > * {
  color: var(--ark-muted, #a09890) !important;
  font-family: var(--ark-font-sans, 'Outfit', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
}

#pl-picker-modal .lp-location-wrapper > .name {
  color: var(--ark-cream, #f0ece4) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

#pl-picker-modal .lp-location-wrapper > .city {
  color: var(--ark-dim, #6a6260) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* Lien heures d'ouverture */
#pl-picker-modal .lp-working-hours-btn {
  color: var(--ark-gold-dark, #8a6e3a) !important;
  font-size: 10px !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  letter-spacing: 1px !important;
}
#pl-picker-modal .lp-working-hours-btn:hover {
  color: var(--ark-gold, #C5A059) !important;
}

/* Heures d'ouverture dépliées */
#pl-picker-modal .lp-working-hours .day {
  color: var(--ark-muted, #a09890) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
#pl-picker-modal .lp-working-hours .hours {
  color: var(--ark-dim, #6a6260) !important;
  font-size: 11px !important;
}

/* ── Bouton Sélectionner ── */
#pl-picker-modal .lp-select-button {
  background: transparent !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  color: var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  height: 32px !important;
  line-height: 32px !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  transition: background .22s, border-color .22s !important;
}
#pl-picker-modal .lp-select-button:hover {
  background: rgba(197,160,89,.1) !important;
  border-color: var(--ark-gold, #C5A059) !important;
  color: var(--ark-gold, #C5A059) !important;
}

/* ── Spinner de chargement ── */
#pl-picker-modal .lp-spinner-wrapper {
  background-color: var(--ark-bg-card, #1a1917) !important;
}
#pl-picker-modal .lp-spinner {
  border-color: var(--ark-border, #2c2b29) !important;
  border-left-color: var(--ark-gold, #C5A059) !important;
}

/* ── Radio button ── */
#pl-picker-modal .lp-radio {
  border-color: var(--ark-border, #2c2b29) !important;
  background-color: var(--ark-bg, #111010) !important;
}
#pl-picker-modal .lp-location-wrapper.selected .lp-radio {
  background-color: var(--ark-gold, #C5A059) !important;
  border-color: var(--ark-gold, #C5A059) !important;
}

/* ── Vue "composite" (mode mobile fusionné) ── */
#pl-picker-modal .lp-location-wrapper > .composite .street-name {
  color: var(--ark-cream, #f0ece4) !important;
}
#pl-picker-modal .lp-location-wrapper > .composite [data-lp-id="composite-address"] {
  color: var(--ark-muted, #a09890) !important;
}

/* ── Scrollbar dans les résultats ── */
#pl-picker-modal .lp-locations::-webkit-scrollbar {
  width: 4px;
}
#pl-picker-modal .lp-locations::-webkit-scrollbar-track {
  background: var(--ark-bg, #111010);
}
#pl-picker-modal .lp-locations::-webkit-scrollbar-thumb {
  background: var(--ark-border, #2c2b29);
  border-radius: 2px;
}
#pl-picker-modal .lp-locations::-webkit-scrollbar-thumb:hover {
  background: var(--ark-gold-dark, #8a6e3a);
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  #pl-picker-modal {
    top: 2% !important;
    left: 2% !important;
    width: 96% !important;
    height: 96% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PACKLINK DROP-OFF — Layout sélection point relais
   ─────────────────────────────────────────────────────────────────
   Quand un point relais est sélectionné, Packlink insère dans le <li>
   un bouton #packlink-drop-off-picker et un <p.woocommerce-shipping-destination>.
   Avec flex sans wrap, ils s'empilent sur la même ligne que le label/prix.
   Fix : flex-wrap + pleine largeur pour ces éléments.
════════════════════════════════════════════════════════════════════ */

/* Permettre le wrap pour accueillir le bloc drop-off info */
.ark-sh-item {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Radio + label restent sur la première ligne, côte à côte */
.ark-sh-item input[type="radio"],
.ark-sh-item input[type="hidden"] { flex-shrink: 0; }

.ark-sh-item > label {
  flex: 1 !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Prix ancré à droite sur la première ligne */
.ark-sh-item > label .woocommerce-Price-amount {
  margin-left: auto !important;
}

/* Bouton + info point relais → pleine largeur, sous la première ligne */
.ark-sh-item #packlink-drop-off-picker {
  flex-basis: 100% !important;
  width: auto !important;
  margin-left: 28px !important; /* aligné avec le label (décalage radio) */
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* Bloc adresse point sélectionné */
.ark-sh-item p.woocommerce-shipping-destination {
  flex-basis: 100% !important;
  margin: 8px 0 0 28px !important;
  padding: 10px 14px !important;
  background: rgba(197,160,89,.04) !important;
  border: 1px solid rgba(197,160,89,.15) !important;
  border-left: 3px solid var(--ark-gold, #C5A059) !important;
  font-family: var(--ark-font-sans, 'Outfit', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--ark-muted, #a09890) !important;
  line-height: 1.6 !important;
}

.ark-sh-item p.woocommerce-shipping-destination strong {
  display: block !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ark-gold-dark, #8a6e3a) !important;
  margin-bottom: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLEAU REMISES — Colonne prix unitaire remisé (v13+)
   ─────────────────────────────────────────────────────────────────
   .ark-price-disc-cell     → cellule 3e colonne
   .ark-price-original      → prix barré
   .ark-price-discounted    → prix remisé (or)
   .ark-th-prix             → entête "Prix unitaire"
   .ark-th-variation-name   → label dynamique de la variation
════════════════════════════════════════════════════════════════════ */

/* En-tête prix */
.ark-remises-table .ark-th-prix {
  white-space: normal !important;
  min-width: 120px !important;
}
.ark-th-variation-name {
  display: block !important;
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--ark-dim, #6a6260) !important;
  text-transform: none !important;
  margin-top: 2px !important;
  white-space: nowrap;
}

/* Cellule prix */
.ark-price-disc-cell {
  text-align: right !important;
  vertical-align: middle !important;
  min-width: 110px !important;
  padding: 12px 14px !important;
  line-height: 1.3 !important;
}

/* Prix barré (original) */
.ark-price-original {
  display: block;
  font-family: var(--ark-font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ark-dim, #6a6260);
  text-decoration: line-through;
  text-decoration-color: rgba(160,152,144,.5);
  margin-bottom: 3px;
  white-space: nowrap;
}

/* Prix remisé (gold + légèrement plus grand) */
.ark-price-discounted {
  display: block;
  font-family: var(--ark-font-serif, 'Cormorant Garamond', serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ark-gold, #C5A059);
  white-space: nowrap;
  line-height: 1.1;
}

/* Transition douce sur les cellules prix (sans animation JS) */
.ark-price-disc-cell {
  transition: opacity .25s ease;
}

/* Responsive : réduire légèrement sur mobile */
@media (max-width: 640px) {
  .ark-price-discounted { font-size: 15px; }
  .ark-price-disc-cell  { min-width: 0 !important; padding: 10px 6px !important; text-align: left !important; }
  .ark-remises-table .ark-th-prix { min-width: 0 !important; text-align: left !important; }
  .ark-price-original, .ark-price-discounted { white-space: normal; }
  .ark-remises-table td, .ark-remises-table th { padding: 10px 6px !important; }
}

/* ═══════════════════════════════════════════════════════════
   FIX — PayPal PPCP : doublon + 4x message + CGV
═══════════════════════════════════════════════════════════ */

/* 1. Masquer le bouton PayPal standalone dupliqué sur le checkout
      (le plugin injecte un 2e bouton .ppc-button-wrapper hors sidebar) */
body.woocommerce-checkout .ppc-button-wrapper {
  display: none !important;
}

/* 2. Style du message PayPal 4x/Pay Later — discret, aligné */
.ppcp-messages {
  font-family: var(--ark-font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  color: var(--ark-dim, #6a6260) !important;
  letter-spacing: 1px !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  display: block !important;
}
/* Sur la fiche produit et le panier : marge sous le bouton PayPal */
.ark-sp .ppcp-messages,
.ark-cart-outer .ppcp-messages {
  padding: 8px 0 4px !important;
}
/* Cacher si vide */
.ppcp-messages:empty { display: none !important; }

/* 3. CGV : assurer que le texte est entièrement visible */
.woocommerce-terms-and-conditions-wrapper {
  overflow: visible !important;
  max-height: none !important;
}
.woocommerce-terms-and-conditions-checkbox-text {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  display: inline !important;
}
.woocommerce-terms-and-conditions-checkbox-text a {
  white-space: nowrap !important;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER ARKANYS v5
═══════════════════════════════════════════════════════════ */
.ark-site-footer {
  background: var(--ark-bg, #111010);
  border-top: 1px solid var(--ark-border, #2c2b29);
  color: var(--ark-muted, #a09890);
}

/* Newsletter */
.ark-footer-nl-band { background: var(--ark-bg-card,#1a1917); border-bottom:1px solid var(--ark-border,#2c2b29); padding:28px 32px; }
body.home .ark-footer-nl-band,
body.home.page .ark-footer-nl-band,
body.page-template-default.home .ark-footer-nl-band,
.home #colophon .ark-footer-nl-band { display: none !important; }
.ark-footer-nl-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ark-footer-nl-eyebrow { font-family:var(--ark-font-mono); font-size:10px; letter-spacing:4px; color:var(--ark-gold-dark); text-transform:uppercase; display:block; margin-bottom:4px; }
.ark-footer-nl-title { font-family:var(--ark-font-title,'Cinzel',serif); font-size:17px; font-weight:700; color:var(--ark-cream); margin:0; }
.ark-footer-nl-dot { color:var(--ark-gold); }
.ark-footer-nl-form { display:flex; }
.ark-footer-nl-input { width:200px; background:var(--ark-bg); border:1px solid var(--ark-border); border-right:none; color:var(--ark-cream); font-family:var(--ark-font-mono); font-size:11px; letter-spacing:1px; padding:10px 14px; outline:none; transition:border-color .2s; border-radius:0!important; box-shadow:none!important; }
.ark-footer-nl-input:focus { border-color:var(--ark-gold); }
.ark-footer-nl-input::placeholder { color:var(--ark-dim); }
.ark-footer-nl-btn { background:linear-gradient(135deg,var(--ark-gold-light,#d4b578),var(--ark-gold) 55%,var(--ark-gold-dark,#8a6e3a))!important; color:#111010!important; border:none!important; border-radius:0!important; padding:10px 16px!important; font-family:var(--ark-font-mono)!important; font-size:10px!important; font-weight:700!important; letter-spacing:2px!important; text-transform:uppercase!important; cursor:pointer!important; white-space:nowrap!important; transition:opacity .2s!important; box-shadow:none!important; min-width:auto!important; height:auto!important; line-height:1.2!important; }
.ark-footer-nl-btn:hover { opacity:.85!important; box-shadow:none!important; }

/* Grid */
.ark-footer-main { padding:48px 0 40px; }
.ark-footer-container { max-width:1400px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.15fr; gap:0 44px; align-items:start; }

/* Brand col */
.ark-footer-logo-img { height:38px; width:auto; display:block; margin-bottom:14px; }
.ark-footer-site-name { font-family:var(--ark-font-title,'Cinzel',serif); font-size:20px; font-weight:700; color:var(--ark-cream); display:block; margin-bottom:14px; }
.ark-footer-tagline { font-size:13px; line-height:1.6; color:var(--ark-dim); margin:0 0 16px; }
.ark-footer-tagline span { color:var(--ark-muted); font-size:12px; }
.ark-footer-badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.ark-footer-badge { background:rgba(197,160,89,.07); border:1px solid rgba(197,160,89,.17); color:var(--ark-gold-dark); font-family:var(--ark-font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:4px 9px; }
.ark-footer-socials { display:flex; gap:8px; }
.ark-footer-social-link { width:36px; height:36px; background:var(--ark-bg-card); border:1px solid var(--ark-border); color:var(--ark-muted); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:border-color .2s,color .2s,background .2s; }
.ark-footer-social-link:hover { border-color:var(--ark-gold); color:var(--ark-gold); background:rgba(197,160,89,.07); }

/* ── Titre de colonne (DIV, pas button) ── */
.ark-footer-col-title {
  font-family: var(--ark-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ark-cream);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 0 10px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(197,160,89,.18);
  width: 100%;
  cursor: default;
  user-select: none;
}
.ark-footer-col-title::before { content:''; display:block; flex-shrink:0; width:16px; height:1px; background:var(--ark-gold-dark); }
.ark-footer-acc-chevron { display:none; flex-shrink:0; margin-left:auto; transition:transform .25s ease; }

/* Contenu accordion : CSS ne gère que la transition
   L'état ouvert/fermé est contrôlé par style inline + JS */
.ark-footer-acc-body {
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
/* Desktop : JS efface le style inline → overflow/max-height redevient auto */

/* Liens */
.ark-footer-links { list-style:none; margin:0; padding:0; }
.ark-footer-links li { margin-bottom:9px; }
.ark-footer-links a { color:var(--ark-dim); font-size:13px; font-weight:300; text-decoration:none; transition:color .2s,padding-left .18s; display:inline-block; }
.ark-footer-links a:hover { color:var(--ark-gold); padding-left:4px; }
.ark-footer-info-item { display:block; color:var(--ark-muted); font-size:12px; line-height:1.6; }
.ark-footer-contact-link { color:var(--ark-gold-dark)!important; font-family:var(--ark-font-mono); font-size:11px; letter-spacing:1px; text-decoration:none; display:block; margin-top:8px; }
.ark-footer-contact-btn { display:inline-block; margin-top:10px; background:transparent; border:1px solid var(--ark-border); color:var(--ark-muted); font-family:var(--ark-font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:8px 14px; text-decoration:none; transition:border-color .2s,color .2s; }
.ark-footer-contact-btn:hover { border-color:var(--ark-gold); color:var(--ark-gold); }

/* Atelier55 trigger */
.ark-a55-trigger { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:rgba(197,160,89,.05); border:1px solid rgba(197,160,89,.14); cursor:pointer; user-select:none; outline:none; transition:border-color .2s,background .2s; }
.ark-a55-trigger:hover { border-color:rgba(197,160,89,.3); background:rgba(197,160,89,.09); }
.ark-a55-trigger-label { display:flex; align-items:center; gap:6px; font-family:var(--ark-font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ark-dim); }
.ark-a55-trigger-label strong { color:var(--ark-gold-dark); font-weight:600; }
.ark-a55-chevron { color:var(--ark-gold-dark); flex-shrink:0; transition:transform .25s ease; }
.ark-a55-trigger.is-open .ark-a55-chevron { transform:rotate(180deg); }

/* Panel Atelier55 — transition seulement */
.ark-a55-panel { transition:max-height .4s cubic-bezier(.4,0,.2,1); }

/* Box interne */
.ark-a55-box { background:var(--ark-bg,#111010); border:1px solid rgba(197,160,89,.2); border-top:2px solid var(--ark-gold); margin-top:2px; }
.ark-a55-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 10px; border-bottom:1px solid var(--ark-border); }
.ark-a55-id { display:flex; align-items:center; gap:10px; }
.ark-a55-logo { height:22px; width:auto; display:block; } /* petit logo */
.ark-a55-name { display:block; font-family:var(--ark-font-title,'Cinzel',serif); font-size:13px; font-weight:700; color:var(--ark-cream); line-height:1.2; }
.ark-a55-sub { display:block; font-family:var(--ark-font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ark-dim); }
.ark-a55-link { font-family:var(--ark-font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ark-gold-dark); text-decoration:none; border:1px solid rgba(197,160,89,.2); padding:5px 9px; white-space:nowrap; transition:border-color .2s,color .2s; flex-shrink:0; }
.ark-a55-link:hover { border-color:var(--ark-gold); color:var(--ark-gold); }
.ark-a55-pitch { font-size:12px; line-height:1.65; color:var(--ark-muted); padding:11px 14px; margin:0; border-bottom:1px solid var(--ark-border); }
.ark-a55-pitch strong { color:var(--ark-cream); font-weight:500; }
.ark-a55-services {}
.ark-a55-svc { display:flex; align-items:flex-start; gap:9px; padding:7px 14px; border-bottom:1px solid rgba(44,43,41,.5); }
.ark-a55-svc:last-child { border-bottom:none; }
.ark-a55-svc > span { font-size:13px; flex-shrink:0; margin-top:1px; }
.ark-a55-svc div { display:flex; flex-direction:column; gap:1px; }
.ark-a55-svc strong { font-family:var(--ark-font-mono); font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ark-cream); }
.ark-a55-svc > div > span { font-size:11px; color:var(--ark-dim); line-height:1.4; }
.ark-a55-cta { display:block; text-align:center; padding:10px 14px; background:linear-gradient(135deg,var(--ark-gold-light,#d4b578),var(--ark-gold) 55%,var(--ark-gold-dark,#8a6e3a)); color:#111010!important; font-family:var(--ark-font-mono); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; text-decoration:none; transition:opacity .22s; border-top:1px solid rgba(197,160,89,.2); }
.ark-a55-cta:hover { opacity:.88; }

/* Légale */
.ark-footer-legal { border-top:1px solid var(--ark-border); padding:14px 32px; }
.ark-footer-legal-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--ark-font-mono); font-size:10px; letter-spacing:1.5px; color:var(--ark-dim); }
.ark-footer-legal-links { display:flex; gap:18px; }
.ark-footer-legal-links a, .ark-footer-legal-inner > span a { color:var(--ark-dim); text-decoration:none; transition:color .2s; }
.ark-footer-legal-links a:hover, .ark-footer-legal-inner > span a:hover { color:var(--ark-gold); }

/* ═══════════════════════
   RESPONSIVE FOOTER
═══════════════════════ */
@media (max-width: 1100px) {
  .ark-footer-container { grid-template-columns:1.3fr 1fr 1fr; gap:32px 36px; }
  .ark-footer-col--brand { grid-column:1 / span 3; }
}

@media (max-width: 767px) {
  .ark-footer-container { grid-template-columns:1fr; gap:0; padding:0; }
  .ark-footer-col--brand { grid-column:auto; padding:24px 16px 20px; border-bottom:1px solid var(--ark-border); }
  .ark-footer-col { border-bottom:1px solid var(--ark-border); }

  /* Chevron visible mobile */
  .ark-footer-acc-chevron { display:block; }

  /* Titre cliquable mobile */
  .ark-footer-col-title {
    cursor:pointer !important;
    padding:15px 16px !important;
    margin:0 !important;
    border-bottom:1px solid var(--ark-border) !important;
    border-left:3px solid rgba(197,160,89,.3);
    background:rgba(197,160,89,.03);
    font-size:11px !important;
    letter-spacing:3px !important;
    justify-content:space-between !important;
    transition:background .2s, border-left-color .2s;
  }
  .ark-footer-col-title::before { display:none !important; }
  .ark-footer-col-title:hover,
  .ark-footer-col-title.is-open { background:rgba(197,160,89,.08); border-left-color:var(--ark-gold); }
  .ark-footer-col-title.is-open .ark-footer-acc-chevron { transform:rotate(180deg); }

  /* Padding interne du corps quand ouvert */
  .ark-footer-acc-body .ark-footer-links { padding:12px 16px 14px; }

  /* Newsletter */
  .ark-footer-nl-band { padding:20px 16px; }
  .ark-footer-nl-inner { flex-direction:column; align-items:flex-start; gap:14px; }
  .ark-footer-nl-form { width:100%; }
  .ark-footer-nl-input { flex:1; width:auto; }

  /* Main + légale */
  .ark-footer-main { padding:0 0 24px; }
  .ark-footer-legal { padding:12px 16px; }
  .ark-footer-legal-inner { flex-direction:column; align-items:flex-start; gap:7px; }
}

/* ════════════════════
   MÉTHODES D'ACHAT
════════════════════ */
.ark-ma-section { width:100%; }
.ark-ma-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
@media (max-width:900px) { .ark-ma-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .ark-ma-grid { grid-template-columns:repeat(2,1fr); gap:2px; } }
.ark-ma-card { position:relative; background:rgba(26,25,23,.72); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid rgba(197,160,89,.18); border-top:2px solid transparent; padding:32px 24px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:11px; overflow:hidden; transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .28s,box-shadow .28s; }
.ark-ma-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%); pointer-events:none; }
.ark-ma-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--ark-gold),transparent); opacity:0; transition:opacity .3s; }
.ark-ma-card:hover { transform:translateY(-6px); border-color:rgba(197,160,89,.35); box-shadow:0 20px 56px rgba(0,0,0,.5); }
.ark-ma-card:hover::after { opacity:1; }
.ark-ma-icon-wrap { width:50px; height:50px; background:rgba(197,160,89,.08); border:1px solid rgba(197,160,89,.2); display:flex; align-items:center; justify-content:center; transition:background .28s,border-color .28s; }
.ark-ma-card:hover .ark-ma-icon-wrap { background:rgba(197,160,89,.14); border-color:rgba(197,160,89,.4); }
.ark-ma-icon { font-size:24px; display:block; animation:ark-float 3.6s ease-in-out infinite; }
.ark-ma-card:nth-child(2) .ark-ma-icon { animation-delay:.6s; }
.ark-ma-card:nth-child(3) .ark-ma-icon { animation-delay:1.2s; }
.ark-ma-card:nth-child(4) .ark-ma-icon { animation-delay:1.8s; }
@keyframes ark-float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-5px) rotate(3deg); } }
@media (prefers-reduced-motion:reduce) { .ark-ma-icon { animation:none; } }
.ark-ma-title { font-family:var(--ark-font-title,'Cinzel',serif); font-size:clamp(14px,1.5vw,18px); font-weight:700; color:var(--ark-cream); margin:0; line-height:1.25; }
.ark-ma-desc { font-size:12px; color:var(--ark-muted); line-height:1.6; margin:0; flex:1; }
.ark-ma-btn { margin-top:auto; display:inline-block; font-family:var(--ark-font-mono); font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--ark-gold); text-decoration:none; border:1px solid rgba(197,160,89,.3); padding:7px 13px; transition:background .22s,border-color .22s,color .22s; background:transparent; }
.ark-ma-btn:hover { background:rgba(197,160,89,.1); border-color:var(--ark-gold); color:var(--ark-cream); }
@media (max-width:480px) { .ark-ma-card { padding:20px 14px 16px; } .ark-ma-icon-wrap { width:42px; height:42px; } .ark-ma-icon { font-size:22px; } }

/* ════════════════════
   FIX PayPal + CGV
════════════════════ */
body.woocommerce-checkout .ppc-button-wrapper { display:none!important; }
.ppcp-messages { font-family:var(--ark-font-mono,'DM Mono',monospace)!important; font-size:11px!important; color:var(--ark-dim,#6a6260)!important; letter-spacing:1px!important; padding:8px 0 0!important; margin:0!important; display:block!important; }
.ppcp-messages:empty { display:none!important; }
body.single-product .ark-sp-summary-col .cart .ppcp-messages { display:none!important; }
.woocommerce-terms-and-conditions-wrapper { overflow:visible!important; max-height:none!important; }
.woocommerce-terms-and-conditions-checkbox-text { white-space:normal!important; word-break:break-word!important; display:inline!important; }


/* ════════════════════════════════════════════════════════════
   PAGE FAQ ARKANYS — Overrides Kadence
   Kadence cible button{}  → on utilise des <div role="button">
   dans le HTML de la FAQ. Ces règles neutralisent toute
   interférence résiduelle et assurent le rendu correct.
════════════════════════════════════════════════════════════ */

/* Neutralise tout style Kadence/WP sur les éléments FAQ */
#ark-faq-root button,
#ark-faq-root div[role="button"],
#ark-faq-root input,
#ark-faq-root select,
#ark-faq-root textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Empêche Kadence d'injecter border-radius/padding/background
   sur n'importe quel <button> résiduel dans notre scope FAQ */
#ark-faq-root .ark-item-q,
#ark-faq-root .ark-form-submit {
  all: unset !important;
}

/* Réapplication propre pour .ark-item-q (div role=button) */
#ark-faq-root .ark-item-q {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 20px 24px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
  color: var(--ark-cream, #f0ece4) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(15px, 2vw, 17px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  transition: color 0.32s ease !important;
  box-sizing: border-box !important;
  outline: none !important;
  transform: none !important;
}
#ark-faq-root .ark-item-q:hover { color: var(--ark-gold-light, #d4b578) !important; }
#ark-faq-root .ark-item.open .ark-item-q { color: var(--ark-gold-light, #d4b578) !important; }
#ark-faq-root .ark-item-q:focus-visible {
  outline: 2px solid rgba(197,160,89,0.5) !important;
  outline-offset: -2px !important;
}

/* Réapplication propre pour .ark-form-submit (div role=button) */
#ark-faq-root .ark-form-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 36px !important;
  background: linear-gradient(135deg, var(--ark-gold-light,#d4b578), var(--ark-gold,#C5A059) 55%, var(--ark-gold-dark,#8a6e3a)) !important;
  color: #111010 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: opacity 0.32s ease, transform 0.32s ease, box-shadow 0.32s ease !important;
  box-sizing: border-box !important;
}
#ark-faq-root .ark-form-submit:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(197,160,89,0.25) !important;
}

/* Chevron container — pas un button, aucun risque, mais au cas où */
#ark-faq-root .ark-item-chevron {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 1px solid rgba(197,160,89,0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.32s ease, background 0.32s ease, border-color 0.32s ease !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#ark-faq-root .ark-item.open .ark-item-chevron {
  background: rgba(197,160,89,0.12) !important;
  border-color: var(--ark-gold, #C5A059) !important;
}
#ark-faq-root .ark-item-chevron svg {
  transition: transform 0.32s ease !important;
}
#ark-faq-root .ark-item.open .ark-item-chevron svg {
  transform: rotate(180deg) !important;
}

/* Inputs form FAQ */
#ark-faq-root .ark-field input,
#ark-faq-root .ark-field textarea,
#ark-faq-root .ark-field select {
  background: rgba(26,25,23,0.8) !important;
  border: 1px solid var(--ark-border, #2c2b29) !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 15px !important;
  color: var(--ark-cream, #f0ece4) !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#ark-faq-root .ark-field input:focus,
#ark-faq-root .ark-field textarea:focus,
#ark-faq-root .ark-field select:focus {
  border-color: rgba(197,160,89,0.5) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,0.08) !important;
  outline: none !important;
}

/* Search input */
#ark-faq-root #ark-search-input {
  background: rgba(26,25,23,0.95) !important;
  border: 1px solid rgba(197,160,89,0.4) !important;
  border-radius: 50px !important;
  padding: 16px 24px 16px 52px !important;
  color: var(--ark-cream, #f0ece4) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 16px !important;
  box-shadow: none !important;
  width: 100% !important;
}
#ark-faq-root #ark-search-input:focus {
  border-color: var(--ark-gold, #C5A059) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,0.12), 0 8px 32px rgba(0,0,0,0.4) !important;
  outline: none !important;
}

/* Accordion body max-height transition */
#ark-faq-root .ark-item-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
#ark-faq-root .ark-item.open .ark-item-body {
  /* max-height géré par JS inline */
}

/* ── Fin overrides FAQ ── */

/* ══════════════════════════════════════════════════════════
   PATCH v4 — À COLLER À LA FIN DU style.css
   (1) Corrige l'accordéon FAQ (max-height bloqué par !important)
   (2) Corrige les &rarr; &oplus; sur la page Freshtrusion
   (3) Corrige les emoji colorés sur la page Freshtrusion
══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. FAQ — Accordéon : approche par classe
   La version précédente utilisait max-height:0 !important
   qui bloquait le JS. On surcharge ici avec une spécificité
   plus haute ET on ajoute l'état .open via CSS.
────────────────────────────────────────────────── */

/* État FERMÉ — !important pour battre Kadence mais PAS le CSS open ci-dessous */
#ark-faq-root .ark-item-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* État OUVERT — spécificité plus haute → gagne sur la règle fermée */
#ark-faq-root .ark-item.open > .ark-item-body {
  max-height: 3000px !important;
  overflow: hidden !important;
}

/* Toggle + / − */
#ark-faq-root .ark-item-toggle::after {
  content: '+' !important;
  display: block !important;
  line-height: 1 !important;
}
#ark-faq-root .ark-item.open .ark-item-toggle::after {
  content: '\2212' !important; /* − minus sign */
}

/* ──────────────────────────────────────────────
   2. Freshtrusion — Fix &rarr; &oplus; en CSS content
   WordPress encode les caractères dans les blocs HTML.
   On surcharge ici via style.css qui échappe correctement.
────────────────────────────────────────────────── */

/* Flèche → dans les CTA des cards section 07 */
.ft7-card-cta::after {
  content: '\2192' !important; /* → */
  transition: transform 0.2s !important;
}
.ft7-card:hover .ft7-card-cta::after {
  transform: translateX(4px) !important;
}

/* Symbole ⊕ dans la promise section 07 */
.ft7-promise::before {
  content: '\2295' !important; /* ⊕ */
  color: #8a6e3a !important;
}

/* ──────────────────────────────────────────────
   3. Freshtrusion — Fix emoji colorés (wolf, star, vet)
   Les emoji platform (🐺 ⭐ ⚕️) s'affichent en couleur.
   On les masque et on substitue des caractères CSS purs.
────────────────────────────────────────────────── */

.ft7-card-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  display: block !important;
  margin-bottom: 14px !important;
  height: 28px !important;
}
.ft7-card-icon::before {
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--ark-gold, #C5A059) !important;
  font-family: 'Cormorant Garamond', serif !important;
  display: block !important;
}
.ft7-card:nth-child(1) .ft7-card-icon::before { content: '\2736' !important; } /* ✶ */
.ft7-card:nth-child(2) .ft7-card-icon::before { content: '\2605' !important; } /* ★ */
.ft7-card:nth-child(3) .ft7-card-icon::before { content: '\2665' !important; } /* ♥ */

/* Icons preuves scientifiques section 05 */
.ft5-proof-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  display: block !important;
  margin-bottom: 14px !important;
}
.ft5-proof-icon::before {
  font-size: 26px !important;
  color: var(--ark-gold, #C5A059) !important;
  display: block !important;
}
.ft5-proof-card:nth-child(1) .ft5-proof-icon::before { content: '\2736' !important; }
.ft5-proof-card:nth-child(2) .ft5-proof-icon::before { content: '\2665' !important; }
.ft5-proof-card:nth-child(3) .ft5-proof-icon::before { content: '\2764' !important; }
.ft5-proof-card:nth-child(4) .ft5-proof-icon::before { content: '\2736' !important; }

/* Icône certification section 05 */
.ft5-cert-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 36px !important;
}
.ft5-cert-icon::before {
  content: '\2665' !important;
  font-size: 28px !important;
  color: var(--ark-gold, #C5A059) !important;
  display: block !important;
}

/* Placeholders timeline section 04 */
.ft4-step-placeholder {
  font-size: 0 !important;
  line-height: 0 !important;
}
.ft4-step:nth-child(1) .ft4-step-placeholder::before { content: '01' !important; font-family: 'Cinzel', serif !important; font-size: 28px !important; color: rgba(197,160,89,0.2) !important; font-weight: 700 !important; }
.ft4-step:nth-child(2) .ft4-step-placeholder::before { content: '02' !important; font-family: 'Cinzel', serif !important; font-size: 28px !important; color: rgba(197,160,89,0.2) !important; font-weight: 700 !important; }
.ft4-step:nth-child(3) .ft4-step-placeholder::before { content: '03' !important; font-family: 'Cinzel', serif !important; font-size: 28px !important; color: rgba(197,160,89,0.2) !important; font-weight: 700 !important; }
.ft4-step:nth-child(4) .ft4-step-placeholder::before { content: '04' !important; font-family: 'Cinzel', serif !important; font-size: 28px !important; color: rgba(197,160,89,0.2) !important; font-weight: 700 !important; }

/* Placeholders animaux section 06 */
.ft6-img-placeholder {
  font-size: 0 !important;
  line-height: 0 !important;
}
.ft6-col:nth-child(1) .ft6-img-placeholder::before { content: 'CHIEN' !important; font-family: 'Cinzel', serif !important; font-size: 18px !important; color: rgba(197,160,89,0.12) !important; letter-spacing: 4px !important; font-weight: 700 !important; }
.ft6-col:nth-child(2) .ft6-img-placeholder::before { content: 'CHAT'  !important; font-family: 'Cinzel', serif !important; font-size: 18px !important; color: rgba(197,160,89,0.12) !important; letter-spacing: 4px !important; font-weight: 700 !important; }

/* Bénéfices animaux section 06 */
.ft6-benefit-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 34px !important; height: 34px !important;
}
.ft6-benefit-icon::before {
  content: '\2736' !important;
  font-size: 13px !important;
  color: var(--ark-gold, #C5A059) !important;
  display: block !important;
}

/* ── Fin patch v4 ── */

/* ══════════════════════════════════════════════════════════════
   1. RESET TOTAL des styles Kadence sur .ark-item-q
   Kadence cible button, .button, etc. et applique des !important.
   On doit gagner la guerre de spécificité.
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-item-q,
#ark-faq-root .ark-item-q:hover,
#ark-faq-root .ark-item-q:focus,
#ark-faq-root .ark-item-q:active,
#ark-faq-root .ark-item-q:focus-visible {
  /* Forcer la cliquabilité */
  pointer-events: all !important;
  cursor: pointer !important;
 
  /* Annuler les overrides Kadence sur les boutons */
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
 
  /* Mise en page */
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 20px 20px 20px 24px !important;
  text-align: left !important;
 
  /* Typographie */
  font-family: 'Cinzel', serif !important;
  font-size: clamp(13px, 1.8vw, 15px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  color: #f0ece4 !important;
 
  /* Élimine tout margin/padding parasite de Kadence */
  margin: 0 !important;
  outline: none !important;
  position: relative !important;
  z-index: 2 !important;
}
 
#ark-faq-root .ark-item-q:hover {
  color: #d4b578 !important;
}
 
#ark-faq-root .ark-item.open .ark-item-q {
  color: #d4b578 !important;
}
 
#ark-faq-root .ark-item-q:focus-visible {
  outline: 2px solid rgba(197, 160, 89, 0.5) !important;
  outline-offset: -2px !important;
}
 
/* ══════════════════════════════════════════════════════════════
   2. Texte de la question
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-q-text {
  flex: 1 !important;
  pointer-events: none !important; /* le click remonte au parent .ark-item-q */
}
 
/* ══════════════════════════════════════════════════════════════
   3. Toggle +/- — reset Kadence button styles
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-item-toggle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  background: rgba(197, 160, 89, 0.08) !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #C5A059 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  pointer-events: none !important; /* le click remonte au .ark-item-q */
}
 
#ark-faq-root .ark-item.open .ark-item-toggle {
  background: rgba(197, 160, 89, 0.2) !important;
  border-color: #C5A059 !important;
}
 
#ark-faq-root .ark-item-toggle::after {
  content: '+';
  display: block;
  line-height: 1;
  pointer-events: none;
}
 
#ark-faq-root .ark-item.open .ark-item-toggle::after {
  content: '\2212'; /* − */
}
 
/* ══════════════════════════════════════════════════════════════
   4. Corps accordéon — géré en JS via maxHeight inline
   On retire overflow:hidden sur .open pour que JS prenne le dessus
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-item-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
 
/* Quand JS ajoute .open, le max-height est posé inline via JS.
   On supprime le !important CSS pour laisser JS gagner. */
#ark-faq-root .ark-item.open > .ark-item-body {
  /* max-height géré par JavaScript (scrollHeight inline) */
  overflow: hidden !important;
}
 
/* ══════════════════════════════════════════════════════════════
   5. Item container — s'assure qu'il reçoit les clics
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-item {
  background: #1a1917 !important;
  border: 1px solid #2c2b29 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  cursor: pointer !important;
}
 
#ark-faq-root .ark-item:hover {
  border-color: rgba(197, 160, 89, 0.3) !important;
}
 
#ark-faq-root .ark-item.open {
  border-color: rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}
 
#ark-faq-root .ark-item.hidden {
  display: none !important;
}
 
/* ══════════════════════════════════════════════════════════════
   6. Contenu de réponse — forcer la visibilité via pointer-events
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-item-body-inner {
  padding: 4px 24px 24px 24px;
  color: #a09890;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.8;
  font-weight: 300;
  border-top: 1px solid rgba(197, 160, 89, 0.12);
  /* Annule tout clip/overflow de Kadence sur les contenus */
  overflow: visible !important;
}
 
/* ══════════════════════════════════════════════════════════════
   7. Neutraliser les overrides Kadence globaux sur button + .button
   qui pourraient toucher .ark-item-q si WordPress le parse comme button
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root button.ark-item-q,
#ark-faq-root div.ark-item-q {
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  font-synthesis: none !important;
}
 
/* ══════════════════════════════════════════════════════════════
   8. Enlève le padding global Kadence qui peut décaler la zone de clic
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
 
/* ══════════════════════════════════════════════════════════════
   9. Bouton de soumission formulaire — cohérence visuelle
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root #ark-form-submit-btn,
#ark-faq-root #ark-form-submit-btn:hover,
#ark-faq-root #ark-form-submit-btn:focus {
  cursor: pointer !important;
  pointer-events: all !important;
  user-select: none !important;
}
 
/* ══════════════════════════════════════════════════════════════
   10. Pills de navigation catégories
══════════════════════════════════════════════════════════════ */
 
#ark-faq-root .ark-cat-pill {
  cursor: pointer !important;
  pointer-events: all !important;
  user-select: none !important;
}
 
/* ══════════════════════════════════════════════════════════════
   11. Mobile — ajustements responsifs
══════════════════════════════════════════════════════════════ */
 
@media (max-width: 768px) {
  #ark-faq-root .ark-item-q {
    padding: 16px 14px 16px 18px !important;
  }
 
  #ark-faq-root .ark-item-body-inner {
    padding: 4px 16px 20px !important;
  }
}
 
@media (max-width: 480px) {
  #ark-faq-root .ark-item-q {
    font-size: 13px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ARKANYS — Styles Description Produit
   Préfixés .ark-desc-long pour surpasser les règles inline
   de single-product.php (spécificité plus haute)
   ══════════════════════════════════════════════════════════════ */

/* Wrapper — fond sombre + police */
.ark-desc-long .ark-desc-wrap {
  background: #111010;
  border: 1px solid #2c2b29;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  margin: 0;
  color: #f0ece4;
}

/* — Points forts — */
.ark-desc-long .ark-benefits {
  padding: 28px 32px 20px;
  border-bottom: 1px solid #2c2b29;
}
.ark-desc-long .ark-benefit-item {
  display: grid !important;
  grid-template-columns: 3px 1fr !important;
  gap: 0 18px !important;
  margin-bottom: 20px !important;
  align-items: start;
}
.ark-desc-long .ark-benefit-item:last-child { margin-bottom: 0 !important; }
.ark-desc-long .ark-benefit-bar {
  background: #C5A059 !important;
  width: 3px;
  align-self: stretch;
  opacity: .65;
  margin-top: 3px;
}
.ark-desc-long .ark-benefit-title {
  font-family: 'Cinzel', 'Georgia', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #C5A059 !important;
  display: block !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
.ark-desc-long .ark-benefit-text {
  font-size: 15.5px !important;
  font-weight: 300 !important;
  color: #f0ece4 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* — Séparateurs titrés — */
.ark-desc-long .ark-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 32px 14px !important;
  border-bottom: 1px solid #2c2b29 !important;
  border-top: none !important;
  background: none !important;
}
.ark-desc-long .ark-section-icon {
  font-size: 16px;
  opacity: .8;
}
.ark-desc-long .ark-section-title {
  font-family: 'Cinzel', 'Georgia', serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: #C5A059 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.ark-desc-long .ark-section-line {
  flex: 1 !important;
  height: 1px !important;
  background: rgba(197, 160, 89, .25) !important;
  border: none !important;
  margin: 0 !important;
}

/* — Corps description — */
.ark-desc-long .ark-body {
  padding: 20px 32px 24px !important;
  border-bottom: 1px solid #2c2b29 !important;
  color: #f0ece4 !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
}
.ark-desc-long .ark-body p {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: #f0ece4 !important;
  margin: 0 0 14px !important;
}
.ark-desc-long .ark-body p:last-child { margin-bottom: 0 !important; }
.ark-desc-long .ark-body strong {
  font-weight: 600 !important;
  color: #C5A059 !important;
  font-style: normal !important;
}

/* — Additifs — */
.ark-desc-long .ark-additifs { padding: 0 32px 28px !important; }
.ark-desc-long .ark-additif-block {
  background: #1a1917 !important;
  border: 1px solid #2c2b29 !important;
  border-left: 3px solid #C5A059 !important;
  padding: 12px 16px !important;
  margin-top: 12px !important;
}
.ark-desc-long .ark-additif-label {
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #C5A059 !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.ark-desc-long .ark-additif-text {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-size: 13.5px !important;
  font-weight: 300 !important;
  color: #a09890 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* — Pied — */
.ark-desc-long .ark-desc-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border-top: 1px solid #2c2b29 !important;
  gap: 10px !important;
}
.ark-desc-long .ark-desc-footer-mark {
  font-size: 7px !important;
  color: #C5A059 !important;
  opacity: .4;
}
.ark-desc-long .ark-desc-footer-text {
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: 2.5px !important;
  color: #6a6260 !important;
  text-transform: uppercase !important;
}

/* — Responsive — */
@media (max-width: 600px) {
  .ark-desc-long .ark-benefits,
  .ark-desc-long .ark-body,
  .ark-desc-long .ark-additifs { padding-left: 18px !important; padding-right: 18px !important; }
  .ark-desc-long .ark-section-header { padding-left: 18px !important; padding-right: 18px !important; }
  .ark-desc-long .ark-benefit-text { font-size: 14.5px !important; }
  .ark-desc-long .ark-body p { font-size: 15px !important; }
}