@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//crbois-distribution.fr/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.6") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//crbois-distribution.fr/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgb(31,58,46);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(31,58,46);
	--btn-accented-bgcolor-hover: rgb(221,66,66);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(255,255,255);
	background-image: url(https://crbois-distribution.fr/wp-content/uploads/2021/08/retail-popup-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: url(https://crbois-distribution.fr/wp-content/uploads/2026/10/Cheminee.webp);
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(26,26,26);
	background-image: none;
}
html .product.category-grid-item .wd-entities-title, html .product.category-grid-item.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .category-grid-item:first-child .wd-entities-title, html .product.wd-cat .wd-entities-title {
	font-size: 16px;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* =========================================================
   CR BOIS — PALETTE « FORÊT & BRAISE »
   ========================================================= */
:root {
  /* --- PRINCIPALE : VERT SAPIN (boutons, liens, prix) --- */
  --color-primary:             #1F3A2E;
  --color-primary-dark:        #142820;
  --color-primary-light:       #E9F0EB;

  /* --- ACCENT : OCRE BRAISE (survols, badges, mises en avant) --- */
  --color-accent:              #E0A33B;
  --color-accent-dark:         #C6862A;
  --color-accent-deep:         #8A5A16;   /* texte lisible sur fond clair */
  --color-accent-light:        #FBF3E3;
  --color-on-accent:           #1A1613;   /* texte sur fond ocre */

  /* --- SECONDAIRES : BRUN CHARBON (titres, sections sombres) --- */
  --color-secondary:           #2B241F;
  --color-secondary-dark:      #1A1613;
  --color-secondary-light:     #7A6D62;

  /* --- TEXTES & FONDS --- */
  --color-text-base:           #2B241F;
  --color-text-light:          #6F645B;
  --color-text-white:          #FFFFFF;

  --color-background:          #FFFFFF;
  --color-background-alt:      #F7F3EC;   /* crème bois clair */
  --color-surface:             #FFFFFF;
  --color-border:              #E8E0D4;
  --color-border-dark:         #2B241F;

  /* --- ÉTATS --- */
  --color-success:             #2F7D4A;
  --color-warning:             #C98A2B;
  --color-error:               #B42318;

  /* --- TYPOGRAPHIE --- */
  --font-family-headings:      'Fraunces', Georgia, serif;
  --font-family-base:          'Instrument Sans', sans-serif;
  --font-size-base:            1rem;
  --line-height-base:          1.65;
  --line-height-headings:      1.15;
  --letter-spacing-headings:   -0.02em;
  --font-weight-medium:        500;
  --font-weight-semibold:      600;
  --font-weight-bold:          700;

  /* --- FORMES & EFFETS --- */
  --border-radius:             6px;
  --border-radius-lg:          12px;
  --border-radius-pill:        999px;
  --shadow-card:               0 1px 3px rgba(43, 36, 31, .06), 0 12px 28px rgba(43, 36, 31, .08);
  --transition:                all .25s ease;

  /* --- HEADER --- */
  --wh-header-h:               84px;
  --wh-header-h-mobile:        64px;

  /* --- MAPPING WOODMART --- */
  --wd-primary-color:          var(--color-primary);
  --wd-alternative-color:      var(--color-accent);
  --wd-title-font:             var(--font-family-headings);
  --wd-entities-title-font:    var(--font-family-headings);
  --wd-text-font:              var(--font-family-base);
}


/* =========================================================
   HEADER WOODMART — ordinateur, sticky, mobile, menu mobile
   Remplace les anciens blocs :
   - « Force la couleur sombre sur le header sticky » (+ liens / outils sticky)
   - « WOODMART HEADER - RÉDUCTION DES MARGES & DESIGN »
   - « HEADER WOODMART (header builder) » (y compris la barre d'annonce)
   ========================================================= */

.whb-header { --wh-h-ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Ligne principale ---------- */
.whb-header .whb-general-header,
.whb-header .whb-general-header.whb-with-bg {
  position: relative;
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  transition: box-shadow .4s var(--wh-h-ease), background-color .4s;
}

/* Liseré de marque en haut : vert sapin + touche ocre */
.whb-header .whb-general-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
  z-index: 2;
}

.whb-header .whb-general-header .whb-flex-row { min-height: var(--wh-header-h); }

/* Conteneur pleine largeur, marges compactes */
.whb-general-header .container {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (min-width: 1400px) {
  .whb-general-header .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

.whb-general-header .whb-space-element { display: none !important; }

/* ---------- Logo ---------- */
.whb-header .site-logo { display: flex; align-items: center; }

.whb-header .site-logo img {
  max-height: 64px !important;
  width: auto !important;
  object-fit: contain;
  transition: transform .5s var(--wh-h-ease), max-height .4s var(--wh-h-ease);
}

.whb-header .site-logo a:hover img { transform: scale(1.03); }

/* ---------- Header collé (sticky) ---------- */
.whb-sticked .whb-general-header,
.whb-header.whb-sticked .whb-general-header {
  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.whb-sticked .whb-general-header .whb-flex-row { min-height: 70px; }
.whb-sticked .site-logo img { max-height: 52px !important; }

/* =========================================================
   MENU PRINCIPAL (ordinateur)
   ========================================================= */
.whb-header .wd-nav-main { gap: 0.25rem !important; }

.whb-header .wd-nav-main > li > a {
  position: relative;
  height: auto;
  padding: 0.65rem 1rem !important;
  border-radius: var(--border-radius-pill);
  font-family: var(--font-family-base);
  font-size: 0.95rem !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--color-secondary) !important;
  transition: color .3s, background-color .3s;
}

/* Trait ocre qui s'étire depuis le centre au survol */
.whb-header .wd-nav-main > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
  opacity: 0;
  transform: translateX(-50%);
  transition: width .45s var(--wh-h-ease), opacity .3s;
}

.whb-header .wd-nav-main > li > a:hover { color: var(--color-primary) !important; }
.whb-header .wd-nav-main > li > a:hover::after { width: calc(100% - 2rem); opacity: 1; }

/* Page en cours : pastille vert sapin */
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-product_cat-ancestor > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a {
  background: var(--color-primary);
  color: var(--color-text-white) !important;
}

.whb-header .wd-nav-main > li.current-menu-item > a::after,
.whb-header .wd-nav-main > li.current-product_cat-ancestor > a::after,
.whb-header .wd-nav-main > li.current-menu-ancestor > a::after { display: none; }

.whb-header .wd-nav-main > li > a:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }

/* Sous-menus */
.whb-header .wd-nav-main .wd-dropdown-menu {
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.whb-header .wd-nav-main .wd-dropdown-menu a {
  border-radius: var(--border-radius);
  color: var(--color-secondary);
  transition: background-color .25s, color .25s;
}

.whb-header .wd-nav-main .wd-dropdown-menu a:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* =========================================================
   OUTILS : COMPTE, RECHERCHE, ENVIES, COMPARER, PANIER
   ========================================================= */
.whb-header .whb-col-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem !important; }

.whb-header .wd-tools-element > a { color: var(--color-secondary) !important; }

/* Icônes rondes */
.whb-header :is(.wd-header-my-account, .wd-header-search, .wd-header-wishlist, .wd-header-compare) .wd-tools-text { display: none; }

.whb-header :is(.wd-header-my-account, .wd-header-search, .wd-header-wishlist, .wd-header-compare) .wd-tools-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  transition: border-color .3s, background-color .3s, color .3s;
}

.whb-header :is(.wd-header-my-account, .wd-header-search, .wd-header-wishlist, .wd-header-compare) > a:hover .wd-tools-icon {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.whb-header :is(.wd-header-my-account, .wd-header-search, .wd-header-wishlist, .wd-header-compare) .wd-tools-icon::before { color: inherit; font-size: 1.15rem; }

.whb-header :is(.wd-header-wishlist, .wd-header-compare) .wd-tools-count {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-bold);
}

/* Panier : pilule vert sapin, compteur ocre */
.whb-header .wd-header-cart > a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.1rem 0.4rem 0.45rem !important;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white) !important;
  transition: background-color .3s, transform .4s var(--wh-h-ease);
}

.whb-header .wd-header-cart > a:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

.whb-header .wd-header-cart .wd-tools-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text-white) 14%, transparent);
}

.whb-header .wd-header-cart .wd-tools-icon::before { color: var(--color-text-white); font-size: 1.1rem; }

.whb-header .wd-header-cart .wd-cart-number {
  top: -4px;
  right: -4px;
  min-width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-primary);
  border-radius: 99px;
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
  font-size: 0.68rem !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1;
}

.whb-header .wd-header-cart .wd-cart-number > span { display: none; }

.whb-header .wd-header-cart .wd-tools-text,
.whb-header .wd-header-cart .wd-cart-subtotal,
.whb-header .wd-header-cart .wd-cart-subtotal .amount {
  color: var(--color-text-white) !important;
  font-family: var(--font-family-base);
  font-size: 0.9rem !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums;
}

/* Rebond du compteur à l'ajout au panier (classe posée par le JS existant) */
@media (prefers-reduced-motion: no-preference) {
  body.wh-cart-bump .whb-header .wd-cart-number { animation: wh-bump .6s var(--wh-h-ease); }
}

@keyframes wh-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* =========================================================
   HEADER MOBILE
   ========================================================= */
@media (max-width: 1024px) {
  .whb-header .whb-general-header .whb-flex-row { min-height: var(--wh-header-h-mobile); }

  .whb-general-header .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .whb-header .site-logo img { max-height: 44px !important; }
  .whb-sticked .whb-general-header .whb-flex-row { min-height: var(--wh-header-h-mobile); }
  .whb-sticked .site-logo img { max-height: 40px !important; }

  /* Bouton menu : burger dans un carré arrondi vert clair */
  .whb-header .wd-header-mobile-nav > a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    border-radius: 12px;
    background: var(--color-primary-light);
    color: var(--color-primary) !important;
    transition: background-color .3s, color .3s;
  }

  .whb-header .wd-header-mobile-nav > a:hover,
  .whb-header .wd-header-mobile-nav > a:active { background: var(--color-primary); color: var(--color-text-white) !important; }

  .whb-header .wd-header-mobile-nav .wd-tools-text { display: none; }
  .whb-header .wd-header-mobile-nav .wd-tools-icon::before { color: inherit; font-size: 1.2rem; }

  /* Outils de droite */
  .whb-header .whb-mobile-right { gap: 0.45rem; }

  .whb-header .whb-mobile-right :is(.wd-header-my-account, .wd-header-search, .wd-header-wishlist) .wd-tools-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Panier mobile : rond vert sapin, sans montant */
  .whb-header .whb-mobile-right .wd-header-cart > a {
    padding: 0 !important;
    background: transparent;
    transform: none;
  }

  .whb-header .whb-mobile-right .wd-header-cart .wd-tools-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--color-primary);
  }

  .whb-header .whb-mobile-right .wd-header-cart .wd-tools-text,
  .whb-header .whb-mobile-right .wd-header-cart .wd-cart-subtotal { display: none; }
}

/* =========================================================
   MENU MOBILE (panneau latéral WoodMart)
   ========================================================= */
.mobile-nav.wd-side-hidden {
  width: min(360px, 88vw);
  background: var(--color-surface);
  box-shadow: 20px 0 60px color-mix(in srgb, var(--color-secondary-dark) 25%, transparent);
}

/* Liseré de marque en haut du panneau */
.mobile-nav.wd-side-hidden::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

/* ---------- Recherche ---------- */
.mobile-nav .searchform { margin: 1rem 1rem 0.5rem; }

.mobile-nav .searchform input[type="text"],
.mobile-nav .searchform .s {
  height: 3rem;
  padding: 0 3rem 0 1.1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-background-alt);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}

.mobile-nav .searchform input[type="text"]:focus,
.mobile-nav .searchform .s:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

.mobile-nav .searchform .searchsubmit { color: var(--color-primary); }

/* ---------- Onglets « Menu / Catégories » ---------- */
.mobile-nav .wd-nav-mob-tab {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 1rem 1rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-background-alt);
}

.mobile-nav .wd-nav-mob-tab > li { flex: 1 1 0; margin: 0; }

.mobile-nav .wd-nav-mob-tab > li > a {
  justify-content: center;
  padding: 0.6rem 0.5rem;
  border-radius: var(--border-radius-pill);
  background: transparent;
  color: var(--color-text-light);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  transition: background-color .3s, color .3s;
}

.mobile-nav .wd-nav-mob-tab > li > a::after { display: none !important; }
.mobile-nav .wd-nav-mob-tab > li.wd-active > a { background: var(--color-primary); color: var(--color-text-white); }

/* ---------- Liens principaux ---------- */
.mobile-nav .wd-nav-mobile { padding: 0 0.75rem 1.5rem; }

.mobile-nav .wd-nav-mobile > li > a {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0 3rem 0 0.75rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-secondary);
  font-family: var(--font-family-headings);
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: -0.01em;
  transition: color .25s, padding-left .35s var(--wh-h-ease, ease), background-color .25s;
}

.mobile-nav .wd-nav-mobile > li > a:hover { color: var(--color-primary); padding-left: 1rem; }

.mobile-nav .wd-nav-mobile > li.current-menu-item > a,
.mobile-nav .wd-nav-mobile > li.current-menu-ancestor > a,
.mobile-nav .wd-nav-mobile > li.current-product_cat-ancestor > a {
  color: var(--color-primary);
  background: linear-gradient(90deg, var(--color-accent-light), transparent 80%);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.mobile-nav .wd-nav-mobile .wd-nav-img,
.mobile-nav .wd-nav-mobile > li > a i { color: var(--color-accent-deep); }

/* Bouton d'ouverture des sous-menus */
.mobile-nav .wd-nav-mobile .wd-nav-opener {
  top: 0.5rem;
  right: 0.25rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-background-alt);
  color: var(--color-secondary);
  transition: background-color .25s, color .25s;
}

.mobile-nav .wd-nav-mobile .wd-nav-opener.wd-active { background: var(--color-primary); color: var(--color-text-white); }

/* Sous-menus */
.mobile-nav .wd-nav-mobile .wd-sub-menu { padding: 0.25rem 0 0.5rem 0.75rem; background: transparent; }

.mobile-nav .wd-nav-mobile .wd-sub-menu li a {
  min-height: 2.8rem;
  padding-left: 0.85rem;
  border-bottom: 0;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-light);
  font-family: var(--font-family-base);
  font-size: 0.92rem;
  font-weight: var(--font-weight-medium);
  text-transform: none;
  transition: color .25s, border-color .25s;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li a:hover,
.mobile-nav .wd-nav-mobile .wd-sub-menu li.current-menu-item > a { color: var(--color-primary); border-left-color: var(--color-accent); }

/* Les liens arrivent en cascade à l'ouverture */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav.wd-opened .wd-nav-mobile > li { animation: wh-mnav-in .55s cubic-bezier(.16, 1, .3, 1) backwards; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(2) { animation-delay: .04s; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(3) { animation-delay: .08s; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(4) { animation-delay: .12s; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(5) { animation-delay: .16s; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(6) { animation-delay: .20s; }
  .mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(n+7) { animation-delay: .24s; }
}

@keyframes wh-mnav-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   BARRE D'ANNONCE (optionnelle, au-dessus du header)
   ========================================================= */
.wh-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  min-height: 38px;
  padding: 0 1rem;
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 85%, transparent);
  font-family: var(--font-family-base);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  overflow: hidden;
}

.wh-topbar span { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.wh-topbar i { color: var(--color-accent); }
.wh-topbar a { color: var(--color-text-white); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--color-text-white) 40%, transparent); }
.wh-topbar a:hover { color: var(--color-accent); }

@media (max-width: 767px) {
  .wh-topbar { justify-content: flex-start; gap: 0; }
  .wh-topbar__track { display: flex; gap: 2.5rem; width: max-content; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .wh-topbar__track { animation: wh-topbar-run 22s linear infinite; }
}

@keyframes wh-topbar-run { to { transform: translateX(-50%); } }

@media (min-width: 768px) {
  .wh-topbar__track { display: flex; gap: 1.75rem; }
  .wh-topbar__track [aria-hidden="true"] { display: none; }
}


/* =========================================================
   PAGES LÉGALES v2 (.crb-legal)
   Mentions légales · CGV · Retours et remboursements · Confidentialité…
   Animations : crbois-legal.js
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

body:has(.crb-legal) { overflow-x: clip; }
body:has(.crb-legal) .scrollToTop { display: none !important; } /* remplacé par .crb-top */

.crb-legal {
  --crb-ease: cubic-bezier(.16, 1, .3, 1);
  --crb-sticky-top: 70px;          /* hauteur du header WoodMart collé */
  --crb-p: 0;                      /* progression de lecture, posée par le JS */
  position: relative;
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

@media (max-width: 1024px) { .crb-legal { --crb-sticky-top: 64px; } }

.crb-legal *,
.crb-legal *::before,
.crb-legal *::after { box-sizing: border-box; }

.crb-legal p:empty { display: none; }

/* =========================================================
   EN-TÊTE (bande vert sapin pleine largeur)
   ========================================================= */
.crb-legal__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem);
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 82%, transparent);
}

/* Cernes de bois */
.crb-legal__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -18%;
  width: min(900px, 105vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse 50% 46% at 50% 50%,
    transparent 0 20px,
    color-mix(in srgb, var(--color-text-white) 6%, transparent) 20px 22px,
    transparent 22px 36px,
    color-mix(in srgb, var(--color-text-white) 3%, transparent) 36px 37px);
  pointer-events: none;
}

/* Lueur de braise */
.crb-legal__hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 12% 125%, color-mix(in srgb, var(--color-accent) 38%, transparent), transparent 55%);
  pointer-events: none;
}

.crb-legal__hero-inner { max-width: 1080px; margin: 0 auto; }

.crb-legal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 22%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 9%, transparent);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-white);
}

.crb-legal__eyebrow i { color: var(--color-accent); }

.crb-legal__title {
  margin: 1rem 0 1.1rem;
  max-width: 16ch;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-text-white);
}

.crb-legal__title em { font-style: italic; color: var(--color-accent); }

.crb-legal__lead {
  max-width: 60ch;
  margin: 0 0 1.75rem;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

.crb-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crb-legal__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-secondary-dark) 35%, transparent);
  font-size: 0.82rem;
  font-weight: var(--font-weight-medium);
}

.crb-legal__meta i { color: var(--color-accent); }

/* =========================================================
   SOMMAIRE COLLANT (puces horizontales + barre de lecture)
   ========================================================= */
.crb-legal__nav {
  position: sticky;
  top: var(--crb-sticky-top);
  z-index: 20;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .3s;
}

.crb-legal__nav.is-stuck { box-shadow: 0 10px 28px color-mix(in srgb, var(--color-secondary) 10%, transparent); }

/* Barre de progression ocre */
.crb-legal__nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(var(--crb-p));
}

.crb-legal__nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem);
}

.crb-legal__nav-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.crb-legal__chips {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  list-style: none;
  counter-reset: crb-chip;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.crb-legal__chips::-webkit-scrollbar { display: none; }

.crb-legal__chips li { flex: 0 0 auto; margin: 0; counter-increment: crb-chip; }

.crb-legal__chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  color: var(--color-secondary);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s, border-color .3s, color .3s;
}

.crb-legal__chips a::before {
  content: counter(crb-chip, decimal-leading-zero);
  font-family: var(--font-family-headings);
  font-size: 0.8rem;
  color: var(--color-accent-deep);
  transition: color .3s;
}

.crb-legal__chips a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.crb-legal__chips a[aria-current="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}

.crb-legal__chips a[aria-current="true"]::before { color: var(--color-accent); }

.crb-legal__chips a:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }

/* =========================================================
   CORPS ET SECTIONS (« chapitres » numérotés)
   ========================================================= */
.crb-legal__body {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 9vw, 7rem);
}

.crb-sec {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--crb-sticky-top) + 80px);
}

.crb-sec__head { display: contents; }

/* Grand numéro ocre, collant pendant la lecture de la section */
.crb-sec__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  position: sticky;
  top: calc(var(--crb-sticky-top) + 90px);
  font-family: var(--font-family-headings);
  font-size: clamp(3rem, 6vw, 5.25rem);
  font-weight: var(--font-weight-semibold);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums;
  color: var(--color-accent);
}

.crb-sec__title {
  grid-column: 2;
  margin: 0.35rem 0 1.25rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: var(--line-height-headings);
  letter-spacing: var(--letter-spacing-headings);
  color: var(--color-secondary);
}

.crb-sec__content { grid-column: 2; max-width: 72ch; }

.crb-sec__content p { margin: 0 0 1rem; }
.crb-sec__content > p:last-child { margin-bottom: 0; }

.crb-sec__content h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2rem 0 0.6rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: 1.2rem;
  line-height: var(--line-height-headings);
  color: var(--color-primary);
}

.crb-sec__content h3::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

.crb-legal strong { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

/* Liens */
.crb-sec__content a:not([class]),
.crb-callout a,
.crb-letter a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
  transition: color .25s, text-decoration-color .25s;
}

.crb-sec__content a:not([class]):hover,
.crb-callout a:hover { color: var(--color-accent-deep); text-decoration-color: var(--color-accent-deep); }

.crb-legal a:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; border-radius: 2px; }

/* Listes à puces « braise » */
.crb-sec__content ul:not([class]) {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.crb-sec__content ul:not([class]) > li {
  position: relative;
  margin: 0 0 0.65rem;
  padding-left: 1.7rem;
}

.crb-sec__content ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--color-accent), var(--color-accent-dark));
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

/* Procédure numérotée */
.crb-steps {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: crb-step;
}

.crb-steps > li {
  position: relative;
  margin: 0;
  padding: 0 0 1.1rem 3.1rem;
  counter-increment: crb-step;
}

.crb-steps > li::before {
  content: counter(crb-step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
}

/* Fil qui relie les étapes */
.crb-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.03rem;
  top: 2.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--color-border);
}

/* =========================================================
   FICHE D'IDENTITÉ (dl.crb-id)
   ========================================================= */
.crb-id {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.crb-id__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-background-alt);
  transition: border-color .3s, background-color .3s, transform .4s var(--crb-ease);
}

.crb-id__item:hover { border-color: var(--color-accent); background: var(--color-surface); transform: translateY(-2px); }

.crb-id__item--span { grid-column: 1 / -1; }

/* Carte principale : la société */
.crb-id__item--main {
  grid-column: 1 / -1;
  padding: 1.35rem 1.4rem;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.crb-id__item--main:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.crb-id dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.crb-id dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  overflow-wrap: anywhere;
}

.crb-id__item--main dt { color: color-mix(in srgb, var(--color-text-white) 65%, transparent); }

.crb-id__item--main dd {
  font-family: var(--font-family-headings);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--color-text-white);
}

/* Bouton copier */
.crb-copy {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--crb-ease);
}

.crb-copy:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-white); }
.crb-copy:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }

.crb-copy.is-copied { background: var(--color-success); border-color: var(--color-success); color: var(--color-text-white); }

/* Bulle « Copié ! » */
.crb-copy::after {
  content: "Copié !";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 0.3rem 0.6rem;
  border-radius: var(--border-radius);
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .25s, transform .35s var(--crb-ease);
}

.crb-copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }

/* Variante pilule avec texte */
.crb-copy--pill {
  display: inline-flex;
  gap: 0.45rem;
  width: auto;
  height: auto;
  padding: 0.45rem 0.95rem;
  border-radius: var(--border-radius-pill);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.crb-copy--pill::after { display: none; }

/* =========================================================
   TUILES DE CONTACT (.crb-actions)
   ========================================================= */
.crb-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.crb-actions > li { margin: 0; }

.crb-action {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  color: var(--color-secondary);
  text-decoration: none !important;
  transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--crb-ease), box-shadow .45s var(--crb-ease);
}

.crb-action > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  font-size: 1rem;
  transition: background-color .35s, color .35s, transform .5s var(--crb-ease);
}

.crb-action > span { display: flex; flex-direction: column; min-width: 0; }

.crb-action small {
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
  transition: color .35s;
}

.crb-action strong { font-size: 0.95rem; overflow-wrap: anywhere; transition: color .35s; }

a.crb-action:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

a.crb-action:hover > i { background: var(--color-accent); color: var(--color-on-accent); transform: rotate(-8deg) scale(1.05); }
a.crb-action:hover small { color: color-mix(in srgb, var(--color-text-white) 70%, transparent); }
a.crb-action:hover strong { color: var(--color-text-white); }

/* =========================================================
   ENCADRÉS (.crb-callout)
   ========================================================= */
.crb-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: var(--border-radius-lg);
  background: var(--color-primary-light);
}

.crb-callout > i {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: 0.95rem;
}

.crb-callout > div > p { margin: 0 0 0.6rem; }
.crb-callout > div > p:last-child { margin-bottom: 0; }

.crb-callout--accent {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: var(--color-accent-light);
}

.crb-callout--accent > i { background: var(--color-accent); color: var(--color-on-accent); }

.crb-callout--small { font-size: 0.9rem; line-height: 1.6; }

/* =========================================================
   « EN BREF » (CGV)
   ========================================================= */
.crb-glance {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: calc(var(--border-radius-lg) * 1.5);
  background: var(--color-secondary);
  color: color-mix(in srgb, var(--color-text-white) 78%, transparent);
}

.crb-glance::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20%;
  bottom: -80%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14px, color-mix(in srgb, var(--color-text-white) 6%, transparent) 14px 16px);
}

.crb-glance__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-family-headings);
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
}

.crb-glance__title i { color: var(--color-accent); font-size: 1.1rem; }

.crb-glance ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crb-glance li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  font-size: 0.85rem;
  line-height: 1.45;
  transition: background-color .3s, border-color .3s, transform .45s var(--crb-ease);
}

.crb-glance li:hover {
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  transform: translateY(-3px);
}

.crb-glance li i { color: var(--color-accent); font-size: 1.1rem; }
.crb-glance li strong { font-size: 0.98rem; color: var(--color-text-white); }

/* =========================================================
   PROCESSUS DE RETOUR (.crb-process)
   ========================================================= */
.crb-process {
  --n: 4;
  --crb-step-p: 0;
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.5);
  background: var(--color-background-alt);
}

.crb-process__title {
  margin: 0 0 1.6rem;
  font-family: var(--font-family-headings);
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.crb-process ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rail + remplissage ocre */
.crb-process ol::before,
.crb-process ol::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: calc(100% / var(--n) / 2);
  right: calc(100% / var(--n) / 2);
  height: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.crb-process ol::after {
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(var(--crb-step-p));
  transition: transform .8s var(--crb-ease);
}

.crb-process li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  text-align: center;
  cursor: pointer;
}

.crb-process__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--color-background-alt);
  transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--crb-ease);
}

.crb-process__txt { display: flex; flex-direction: column; gap: 0.2rem; }
.crb-process__txt strong { font-size: 0.95rem; }
.crb-process__txt span { max-width: 24ch; margin: 0 auto; font-size: 0.82rem; line-height: 1.45; color: var(--color-text-light); }

.crb-process li.is-done .crb-process__icon { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

.crb-process li.is-active .crb-process__icon {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-white);
  transform: scale(1.12);
}

.crb-process li.is-active .crb-process__txt strong { color: var(--color-primary); }

.crb-process.is-static ol::after { transform: scaleX(1); }
.crb-process.is-static .crb-process__icon { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }

/* =========================================================
   MODÈLE DE LETTRE (.crb-letter)
   ========================================================= */
.crb-letter {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 3.6rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem) clamp(2.25rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Marge de cahier */
.crb-letter::before {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 1rem;
  left: clamp(1rem, 2.4vw, 1.6rem);
  width: 2px;
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.crb-letter__bar {
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.crb-letter__label {
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.crb-letter__text p { margin: 0 0 0.85rem; }
.crb-letter__text p:last-child { margin-bottom: 0; font-size: 0.85rem; color: var(--color-text-light); }

/* =========================================================
   RETOUR EN HAUT (créé par le JS) — anneau = progression
   ========================================================= */
.crb-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 30;
  width: 3.2rem;
  height: 3.2rem;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--crb-p) * 360deg), color-mix(in srgb, var(--color-secondary) 18%, transparent) 0);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .35s, visibility .35s, transform .45s var(--crb-ease);
}

.crb-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.crb-top > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  transition: background-color .3s;
}

.crb-top:hover > span { background: var(--color-primary-dark); }
.crb-top:hover i { animation: crb-up .6s var(--crb-ease); }
.crb-top:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:has(.crb-legal) { scroll-behavior: smooth; }

  /* En-tête : entrée au chargement */
  .crb-legal__eyebrow { animation: crb-rise .9s var(--crb-ease) both; }
  .crb-legal__title   { animation: crb-rise 1.1s var(--crb-ease) .08s both; }
  .crb-legal__lead    { animation: crb-rise 1s var(--crb-ease) .22s both; }
  .crb-legal__meta    { animation: crb-rise 1s var(--crb-ease) .32s both; }
  .crb-legal__hero::before { animation: crb-rings 40s ease-in-out infinite alternate; }

  /* Puces du sommaire en cascade */
  .crb-legal.crb-js .crb-legal__chips li { animation: crb-chip .7s var(--crb-ease) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }

  /* Apparition au défilement (attribut posé par le JS) */
  .crb-legal.crb-js [data-crb-r] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--crb-ease), transform .9s var(--crb-ease);
    transition-delay: var(--crb-d, 0s);
  }

  .crb-legal.crb-js .is-in [data-crb-r],
  .crb-legal.crb-js [data-crb-r].is-in { opacity: 1; transform: none; }

  /* Le numéro se remplit d'ocre, comme une braise qui prend */
  .crb-legal.crb-js .crb-sec__num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-accent-deep);
    background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 50% 100% / 100% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size 1.3s var(--crb-ease) .2s;
  }

  .crb-legal.crb-js .crb-sec.is-in .crb-sec__num { background-size: 100% 100%; }

  /* Étape active du processus : onde */
  .crb-process li.is-active .crb-process__icon { animation: crb-pulse 1.6s ease-out infinite; }
}

@keyframes crb-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

@keyframes crb-chip {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes crb-rings {
  from { transform: rotate(0) scale(1); }
  to   { transform: rotate(10deg) scale(1.08); }
}

@keyframes crb-pulse {
  0%   { box-shadow: 0 0 0 6px var(--color-background-alt), 0 0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 6px var(--color-background-alt), 0 0 0 18px transparent; }
}

@keyframes crb-up {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-8px); opacity: 0; }
  55%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .crb-sec { grid-template-columns: minmax(0, 1fr); }
  .crb-sec__num { grid-column: 1; grid-row: auto; position: static; margin-bottom: 0.4rem; font-size: 2.8rem; }
  .crb-sec__title,
  .crb-sec__content { grid-column: 1; }
}

@media (max-width: 700px) {
  .crb-legal__nav-label { display: none; }
  .crb-legal__nav-inner { padding-left: 0.75rem; padding-right: 0; }
}

@media (max-width: 640px) {
  .crb-process ol { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .crb-process ol::before,
  .crb-process ol::after { top: 1.5rem; bottom: 1.5rem; left: calc(1.5rem - 1.5px); right: auto; width: 3px; height: auto; }
  .crb-process ol::after { transform-origin: top; transform: scaleY(var(--crb-step-p)); }
  .crb-process.is-static ol::after { transform: scaleY(1); }
  .crb-process li { flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; }
  .crb-process__icon { flex: 0 0 auto; }
  .crb-process__txt { padding-top: 0.35rem; }
  .crb-process__txt span { margin: 0; max-width: none; }
}

@media (max-width: 560px) {
  .crb-id { grid-template-columns: minmax(0, 1fr); }
  .crb-letter__bar { flex-wrap: wrap; }
}

/* =========================================================
   PAGES LÉGALES v2 — AJOUTS
   À coller à la suite de crbois-legal.css
   En-tête avec image (Livraison) · Tableau (Cookies) · Bouton
   ========================================================= */

/* ---------- En-tête avec image ---------- */
.crb-legal__hero--media .crb-legal__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.crb-legal__hero-media {
  position: relative;
  margin: 0;
}

.crb-legal__hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid color-mix(in srgb, var(--color-text-white) 12%, transparent);
  border-radius: calc(var(--border-radius-lg) * 1.6);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--color-secondary-dark) 45%, transparent);
  transform: rotate(1.5deg);
}

/* Pastille flottante */
.crb-legal__hero-badge {
  position: absolute;
  left: -1rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  color: var(--color-secondary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-card);
}

.crb-legal__hero-badge i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.85rem;
}

/* ---------- Tableau ---------- */
.crb-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}

.crb-table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.crb-table th,
.crb-table td {
  padding: 0.85rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.crb-table thead th {
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.crb-table tbody tr:last-child td { border-bottom: 0; }
.crb-table tbody tr { transition: background-color .25s; }
.crb-table tbody tr:hover { background: var(--color-background-alt); }

.crb-table code {
  padding: 0.15em 0.45em;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.82em;
  overflow-wrap: anywhere;
}

/* Étiquettes de catégorie */
.crb-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--border-radius-pill);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.crb-tag--need { background: var(--color-primary-light); color: var(--color-primary); }
.crb-tag--opt  { background: var(--color-accent-light); color: var(--color-accent-deep); }

/* ---------- Bouton ---------- */
.crb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  margin: 0.25rem 0 1.25rem;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: background-color .3s, color .3s, transform .4s var(--crb-ease);
}

.crb-btn i { transition: transform .6s var(--crb-ease); }
.crb-btn:hover { background: var(--color-accent); color: var(--color-on-accent); transform: translateY(-2px); }
.crb-btn:hover i { transform: rotate(-25deg) scale(1.1); }
.crb-btn:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* L'image se dévoile de droite à gauche, puis la pastille arrive et flotte */
  .crb-legal__hero-media img { animation: crb-media-in 1.4s var(--crb-ease) .2s both; }
  .crb-legal__hero-badge { animation: crb-badge-in .9s var(--crb-ease) 1s both, crb-float 5s ease-in-out 2s infinite; }
}

@keyframes crb-media-in {
  from { clip-path: inset(0 0 0 100% round 20px); transform: rotate(1.5deg) scale(1.08); }
  to   { clip-path: inset(0 0 0 0 round 20px); transform: rotate(1.5deg) scale(1); }
}

@keyframes crb-badge-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes crb-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .crb-legal__hero--media .crb-legal__hero-inner { grid-template-columns: minmax(0, 1fr); }
  .crb-legal__hero-media { max-width: 520px; }
  .crb-legal__hero-badge { left: 0.75rem; bottom: 1rem; }
}


/* =========================================================
   PAGE CONTACT (.crb-contact) + FORMULAIRE CF7 (.crb-cf7)
   Animations : crbois-contact.js
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

body:has(.crb-contact) { overflow-x: clip; }

.crb-contact {
  --cc-ease: cubic-bezier(.16, 1, .3, 1);
  --cc-sticky-top: 70px;
  --cc-gutter: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.crb-contact *,
.crb-contact *::before,
.crb-contact *::after { box-sizing: border-box; }

.crb-contact p:empty { display: none; }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.crb-contact__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(3.5rem, 8vw, 6rem) var(--cc-gutter) clamp(6rem, 12vw, 9rem);
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 82%, transparent);
}

/* Fil du bois en diagonale */
.crb-contact__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background: repeating-linear-gradient(115deg,
    transparent 0 26px,
    color-mix(in srgb, var(--color-text-white) 5%, transparent) 26px 27px,
    transparent 27px 44px,
    color-mix(in srgb, var(--color-text-white) 3%, transparent) 44px 45px);
  mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}

/* Lueur de braise */
.crb-contact__hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 8% 120%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 55%);
  pointer-events: none;
}

.crb-contact__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1180px;
  margin: 0 auto;
}

/* Statut ouvert / fermé */
.crb-contact__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 22%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 9%, transparent);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
}

.crb-contact__status { --cc-dot: var(--color-accent); }
.crb-contact__status.is-open { --cc-dot: color-mix(in srgb, var(--color-success) 55%, var(--color-text-white)); }

.crb-contact__status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--cc-dot);
}

.crb-contact__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-text-white);
}

.crb-contact__title em { font-style: italic; color: var(--color-accent); }

.crb-contact__lead {
  max-width: 54ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

/* Canaux de contact */
.crb-contact__channels {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crb-contact__channels li { margin: 0; }

.crb-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 16%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-text-white) 7%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-text-white);
  text-decoration: none !important;
  transition: background-color .35s, border-color .35s, color .35s, transform .5s var(--cc-ease);
}

.crb-channel > i:first-child {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1rem;
  transition: transform .5s var(--cc-ease);
}

.crb-channel span { display: flex; flex-direction: column; min-width: 0; }

.crb-channel small {
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-white) 65%, transparent);
  transition: color .35s;
}

.crb-channel strong { font-size: 1.05rem; font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }

.crb-channel > i:last-child { font-size: 0.9rem; opacity: .6; transition: transform .45s var(--cc-ease), opacity .3s; }

.crb-channel:hover {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-secondary);
  transform: translateX(6px);
}

.crb-channel:hover small { color: var(--color-text-light); }
.crb-channel:hover > i:first-child { transform: rotate(-10deg) scale(1.06); }
.crb-channel:hover > i:last-child { opacity: 1; transform: translateX(4px); color: var(--color-primary); }
.crb-channel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* =========================================================
   CORPS : FORMULAIRE + COLONNE D'INFOS
   ========================================================= */
.crb-contact__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  max-width: calc(1180px + 2 * var(--cc-gutter));
  margin: calc(-1 * clamp(3.5rem, 7vw, 5rem)) auto 0;
  padding: 0 var(--cc-gutter);
}

/* ---------- Carte formulaire ---------- */
.crb-contact__form {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: calc(var(--border-radius-lg) * 1.6);
  background: var(--color-surface);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  scroll-margin-top: calc(var(--cc-sticky-top) + 1.5rem);
}

.crb-contact__form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

.crb-contact__form h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: var(--line-height-headings);
  letter-spacing: var(--letter-spacing-headings);
  color: var(--color-secondary);
}

.crb-contact__form-intro { margin: 0 0 1.75rem; color: var(--color-text-light); }

.crb-req { color: var(--color-accent-deep); font-weight: var(--font-weight-bold); }

/* Lueur après envoi réussi */
.crb-contact__form.is-sent { animation: cc-sent 1.6s var(--cc-ease); }

/* ---------- Colonne d'infos ---------- */
.crb-contact__aside {
  position: sticky;
  top: calc(var(--cc-sticky-top) + 1.5rem);
  display: grid;
  gap: 1rem;
}

.crb-contact__card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.4);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.crb-contact__card h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
  color: var(--color-secondary);
}

.crb-contact__card h2 i { color: var(--color-accent-deep); font-size: 1rem; }

/* Horaires */
.crb-hours { margin: 0; }

.crb-hours > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--border-radius);
  transition: background-color .4s;
}

.crb-hours > div + div { margin-top: 0.15rem; }

.crb-hours dt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-base);
}

.crb-hours dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  white-space: nowrap;
}

.crb-hours > div:not([data-open]) dd { color: var(--color-text-light); font-weight: var(--font-weight-medium); }

.crb-hours > div.is-today { background: var(--color-accent-light); }

.crb-hours > div.is-today dt::after {
  content: "Aujourd'hui";
  padding: 0.1rem 0.5rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Journée en cours */
.crb-hours__now { margin-top: 1rem; }

.crb-hours__track {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: var(--color-border);
}

.crb-hours__track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--cc-day, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 1.2s var(--cc-ease);
}

/* Curseur « maintenant » */
.crb-hours__track span::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-secondary) 30%, transparent);
  transform: translateY(-50%);
}

.crb-hours__now p { margin: 0.65rem 0 0; font-size: 0.85rem; color: var(--color-text-light); }

/* Adresse */
.crb-contact__card address {
  margin: 0 0 1rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text-base);
}

.crb-contact__route {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  color: var(--color-secondary);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: border-color .3s, color .3s, background-color .3s;
}

.crb-contact__route i { color: var(--color-accent-deep); transition: transform .45s var(--cc-ease); }
.crb-contact__route:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.crb-contact__route:hover i { transform: translateX(3px) rotate(-12deg); }

/* Carte livraison (sombre) avec petit camion animé */
.crb-contact__card--dark {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: color-mix(in srgb, var(--color-text-white) 78%, transparent);
}

.crb-contact__card--dark h2 { color: var(--color-text-white); }
.crb-contact__card--dark h2 i { color: var(--color-accent); }
.crb-contact__card--dark p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.6; }

.crb-contact__card--dark a:not([class]) {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.crb-contact__card--dark a:not([class]):hover { color: var(--color-text-white); }

.crb-road {
  position: relative;
  height: 2.2rem;
  margin: 0 0 1rem;
  overflow: hidden;
}

.crb-road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-text-white) 35%, transparent) 0 12px, transparent 12px 22px);
}

.crb-road i {
  position: absolute;
  left: 0;
  bottom: 0.45rem;
  font-size: 1.35rem;
  color: var(--color-accent);
}

/* =========================================================
   FAQ
   ========================================================= */
.crb-contact__faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: calc(1180px + 2 * var(--cc-gutter));
  margin: clamp(4rem, 9vw, 6.5rem) auto clamp(4rem, 9vw, 6.5rem);
  padding: 0 var(--cc-gutter);
}

.crb-faq__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.crb-faq__head h2 {
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.crb-faq__head h2 em { font-style: italic; color: var(--color-primary); }
.crb-faq__head p { margin: 0; color: var(--color-text-light); }

.crb-faq__head a,
.crb-faq__a a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.crb-faq__head a:hover,
.crb-faq__a a:hover { color: var(--color-accent-deep); }

.crb-faq__list { border-top: 1px solid var(--color-border); }

.crb-faq__item {
  border-bottom: 1px solid var(--color-border);
  interpolate-size: allow-keywords;
}

.crb-faq__item summary {
  position: relative;
  display: block;
  padding: 1.35rem 3.5rem 1.35rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-family-headings);
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-secondary);
  transition: color .3s, padding-left .45s var(--cc-ease);
}

.crb-faq__item summary::-webkit-details-marker { display: none; }
.crb-faq__item summary:hover,
.crb-faq__item[open] summary { color: var(--color-primary); padding-left: 0.75rem; }
.crb-faq__item summary:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; border-radius: 4px; }

/* Icône + / − dans un cercle */
.crb-faq__icon {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color .35s, border-color .35s, transform .45s var(--cc-ease);
}

.crb-faq__icon::before,
.crb-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--cc-ease), background-color .35s;
}

.crb-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.crb-faq__item[open] .crb-faq__icon { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-50%) rotate(180deg); }
.crb-faq__item[open] .crb-faq__icon::before,
.crb-faq__item[open] .crb-faq__icon::after { background: var(--color-text-white); }
.crb-faq__item[open] .crb-faq__icon::after { transform: translate(-50%, -50%) rotate(0); }

/* Ouverture fluide (navigateurs récents ; ouverture instantanée ailleurs) */
.crb-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s var(--cc-ease), content-visibility .45s allow-discrete;
}

.crb-faq__item[open]::details-content { block-size: auto; }

.crb-faq__a { padding: 0 3.5rem 1.4rem 0.75rem; color: var(--color-text-light); }
.crb-faq__a p { margin: 0; }

/* =========================================================
   FORMULAIRE CONTACT FORM 7 (.crb-cf7)
   ========================================================= */
.crb-cf7 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1rem;
}

.crb-cf7 br { display: none; }
.crb-cf7 > p:empty { display: none; }

.crb-cf7__field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; margin: 0; }
.crb-cf7__field--full { grid-column: 1 / -1; }

.crb-cf7__field > label,
.crb-cf7__label {
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.crb-cf7 .wpcf7-form-control-wrap { display: block; position: relative; }

.crb-cf7 input[type="text"],
.crb-cf7 input[type="email"],
.crb-cf7 input[type="tel"],
.crb-cf7 textarea {
  width: 100%;
  min-height: 3.1rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background-alt);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}

.crb-cf7 textarea { min-height: 9.5rem; resize: vertical; }

.crb-cf7 input::placeholder,
.crb-cf7 textarea::placeholder { color: color-mix(in srgb, var(--color-text-light) 75%, transparent); }

.crb-cf7 input:hover,
.crb-cf7 textarea:hover { border-color: var(--color-secondary-light); }

.crb-cf7 input:focus,
.crb-cf7 textarea:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

/* Champ en erreur */
.crb-cf7 .wpcf7-not-valid {
  border-color: var(--color-error) !important;
  background: color-mix(in srgb, var(--color-error) 4%, var(--color-surface)) !important;
}

.crb-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
}

/* Compteur de caractères */
.crb-cf7__count {
  align-self: flex-end;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
}

.crb-cf7__count .wpcf7-character-count.too-long { color: var(--color-error); font-weight: var(--font-weight-bold); }

/* Motif : pastilles à cocher */
.crb-cf7 .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crb-cf7 .wpcf7-radio .wpcf7-list-item { margin: 0; }

.crb-cf7 .wpcf7-radio label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.crb-cf7 .wpcf7-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.crb-cf7 .wpcf7-radio .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  color: var(--color-secondary);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--cc-ease);
}

.crb-cf7 .wpcf7-radio .wpcf7-list-item-label::before {
  content: "\f00c";
  display: inline-block;
  width: 0;
  overflow: hidden;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  transition: width .3s var(--cc-ease);
}

.crb-cf7 .wpcf7-radio label:hover .wpcf7-list-item-label { border-color: var(--color-primary); color: var(--color-primary); }

.crb-cf7 .wpcf7-radio input:checked + .wpcf7-list-item-label {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-white);
}

.crb-cf7 .wpcf7-radio input:checked + .wpcf7-list-item-label::before { width: 0.85rem; }

.crb-cf7 .wpcf7-radio input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }

/* Mention RGPD */
.crb-cf7__privacy {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-light);
}

.crb-cf7__privacy i { margin-top: 0.2rem; color: var(--color-accent-deep); }
.crb-cf7__privacy a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* Envoi */
.crb-cf7__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.crb-cf7 .wpcf7-submit {
  appearance: none;
  min-height: 3.4rem;
  margin: 0;
  padding: 0 2.2rem;
  border: 0;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  background-size: 200% 100%;
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transition: background-color .3s, color .3s, transform .4s var(--cc-ease), box-shadow .3s;
}

.crb-cf7 .wpcf7-submit:hover { background-color: var(--color-accent); color: var(--color-on-accent); transform: translateY(-2px); }
.crb-cf7 .wpcf7-submit:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.crb-cf7__hint { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--color-text-light); }
.crb-cf7__hint i { color: var(--color-accent-deep); }

.crb-cf7 .wpcf7-spinner { margin: 0; background-color: var(--color-primary); }

/* Pendant l'envoi : reflet qui balaie le bouton */
.wpcf7-form.submitting .crb-cf7 .wpcf7-submit {
  pointer-events: none;
  background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--color-text-white) 30%, transparent) 50%, transparent 70%);
  animation: cc-shine 1.1s linear infinite;
}

/* Messages de réponse */
.crb-contact .wpcf7 form .wpcf7-response-output {
  position: relative;
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem 1rem 3.6rem;
  border: 0 !important;
  border-radius: var(--border-radius-lg);
  font-size: 0.92rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.crb-contact .wpcf7 form .wpcf7-response-output::before {
  position: absolute;
  left: 1rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  transform: translateY(-50%);
}

.crb-contact .wpcf7 form.sent .wpcf7-response-output {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.crb-contact .wpcf7 form.sent .wpcf7-response-output::before {
  content: "\f00c";
  background: var(--color-primary);
  color: var(--color-text-white);
}

.crb-contact .wpcf7 form.invalid .wpcf7-response-output,
.crb-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.crb-contact .wpcf7 form.payment-required .wpcf7-response-output {
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
}

.crb-contact .wpcf7 form.invalid .wpcf7-response-output::before,
.crb-contact .wpcf7 form.unaccepted .wpcf7-response-output::before,
.crb-contact .wpcf7 form.payment-required .wpcf7-response-output::before {
  content: "\21";
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.crb-contact .wpcf7 form.failed .wpcf7-response-output,
.crb-contact .wpcf7 form.aborted .wpcf7-response-output,
.crb-contact .wpcf7 form.spam .wpcf7-response-output {
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-surface));
  color: var(--color-error);
}

.crb-contact .wpcf7 form.failed .wpcf7-response-output::before,
.crb-contact .wpcf7 form.aborted .wpcf7-response-output::before,
.crb-contact .wpcf7 form.spam .wpcf7-response-output::before {
  content: "\f00d";
  background: var(--color-error);
  color: var(--color-text-white);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:has(.crb-contact) { scroll-behavior: smooth; }

  /* En-tête au chargement */
  .crb-contact__status { animation: cc-rise .8s var(--cc-ease) both; }
  .crb-contact__title  { animation: cc-rise 1.1s var(--cc-ease) .08s both; }
  .crb-contact__lead   { animation: cc-rise 1s var(--cc-ease) .22s both; }
  .crb-contact__channels li { animation: cc-slide .9s var(--cc-ease) both; }
  .crb-contact__channels li:nth-child(1) { animation-delay: .3s; }
  .crb-contact__channels li:nth-child(2) { animation-delay: .42s; }
  .crb-contact__channels li:nth-child(3) { animation-delay: .54s; }
  .crb-contact__hero::before { animation: cc-grain 30s linear infinite alternate; }

  /* Point de statut qui pulse */
  .crb-contact__status::before { animation: cc-dot 2s ease-out infinite; }

  /* Petit camion qui fait l'aller sur la route */
  .crb-road i { animation: cc-truck 6s ease-in-out infinite; }

  /* Apparition au défilement (classe posée par le JS) */
  .crb-contact.cc-js [data-cc-r] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--cc-ease), transform .9s var(--cc-ease);
    transition-delay: var(--cc-d, 0s);
  }

  .crb-contact.cc-js [data-cc-r].is-in { opacity: 1; transform: none; }

  /* Champs qui arrivent en cascade */
  .crb-contact.cc-js .crb-contact__form .crb-cf7 > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--cc-ease), transform .7s var(--cc-ease); }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > * { opacity: 1; transform: none; }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > *:nth-child(2) { transition-delay: .06s; }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > *:nth-child(3) { transition-delay: .12s; }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > *:nth-child(4) { transition-delay: .18s; }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > *:nth-child(5) { transition-delay: .24s; }
  .crb-contact.cc-js .crb-contact__form.is-in .crb-cf7 > *:nth-child(n+6) { transition-delay: .3s; }

  /* Réponses de la FAQ */
  .crb-faq__item[open] .crb-faq__a { animation: cc-open .5s var(--cc-ease); }

  /* Message de réponse CF7 */
  .crb-contact .wpcf7 form .wpcf7-response-output { animation: cc-pop .5s var(--cc-ease); }
  .crb-cf7 .wpcf7-not-valid-tip { animation: cc-shake .45s ease; }
}

@keyframes cc-rise  { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes cc-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes cc-grain { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes cc-open  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cc-pop   { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cc-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@keyframes cc-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-dot) 60%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* Le camion arrive, marque une pause (livraison), puis repart */
@keyframes cc-truck {
  0%        { left: -2.5rem; }
  40%, 58%  { left: calc(50% - 0.8rem); }
  100%      { left: calc(100% + 1rem); }
}

@keyframes cc-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@keyframes cc-sent {
  0%   { box-shadow: 0 30px 70px color-mix(in srgb, var(--color-secondary) 14%, transparent), 0 0 0 0 color-mix(in srgb, var(--color-primary) 40%, transparent); }
  100% { box-shadow: 0 30px 70px color-mix(in srgb, var(--color-secondary) 14%, transparent), 0 0 0 24px transparent; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) { .crb-contact { --cc-sticky-top: 64px; } }

@media (max-width: 960px) {
  .crb-contact__hero-inner,
  .crb-contact__main,
  .crb-contact__faq { grid-template-columns: minmax(0, 1fr); }
  .crb-contact__aside { position: static; }
  .crb-contact__hero { padding-bottom: clamp(5rem, 14vw, 7rem); }
}

@media (max-width: 560px) {
  .crb-cf7 { grid-template-columns: minmax(0, 1fr); }
  .crb-cf7 .wpcf7-submit { width: 100%; }
  .crb-faq__item summary { font-size: 1.05rem; }
  .crb-faq__a { padding-right: 0; }
}

/* =========================================================
   PAGE QUI SOMMES-NOUS (.crb-about)
   Animations : crbois-about.js
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

body:has(.crb-about) { overflow-x: clip; }

.crb-about {
  --ca-ease: cubic-bezier(.16, 1, .3, 1);
  --ca-gutter: clamp(1.25rem, 4vw, 2.5rem);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.crb-about *,
.crb-about *::before,
.crb-about *::after { box-sizing: border-box; }

.crb-about p:empty { display: none; }
.crb-about p { margin: 0 0 1rem; }

.ca-wrap { max-width: calc(1180px + 2 * var(--ca-gutter)); margin: 0 auto; padding: 0 var(--ca-gutter); }

/* ---------- Éléments communs ---------- */
.ca-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.ca-kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--color-accent); }

.ca-h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.ca-h2 em { font-style: italic; color: var(--color-primary); }

.ca-head { max-width: 720px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.ca-head p { color: var(--color-text-light); font-size: 1.05rem; }

.ca-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-pill);
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ca-ease);
}

.ca-btn i { transition: transform .4s var(--ca-ease); }
.ca-btn:hover { transform: translateY(-2px); }
.ca-btn:hover i { transform: translateX(4px); }
.ca-btn:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.ca-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.ca-btn--accent:hover { background: var(--color-surface); color: var(--color-primary); }
.ca-btn--ghost { border-color: color-mix(in srgb, var(--color-text-white) 45%, transparent); color: var(--color-text-white); }
.ca-btn--ghost:hover { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-primary); }
.ca-btn--outline { border-color: var(--color-border); color: var(--color-secondary); background: var(--color-surface); }
.ca-btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.ca-btn--light { background: var(--color-surface); color: var(--color-primary); }
.ca-btn--light:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* =========================================================
   1. HERO PLEIN ÉCRAN
   ========================================================= */
.ca-hero {
  --ca-hp: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  min-height: 620px;
  height: calc(100svh - var(--wh-header-h, 84px));
  margin-left: calc(50% - 50vw);
  background: var(--color-secondary-dark);
  color: color-mix(in srgb, var(--color-text-white) 85%, transparent);
}

.ca-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.08 + var(--ca-hp) * 0.12)) translateY(calc(var(--ca-hp) * 60px));
}

.ca-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--color-secondary-dark) 90%, transparent) 0%, color-mix(in srgb, var(--color-secondary-dark) 40%, transparent) 50%, transparent 85%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-secondary-dark) 60%, transparent), transparent 65%);
}

.ca-hero__inner {
  width: 100%;
  max-width: calc(1180px + 2 * var(--ca-gutter));
  margin: 0 auto;
  padding: 0 var(--ca-gutter) clamp(3rem, 7vw, 5rem);
  opacity: calc(1 - var(--ca-hp) * 1.3);
}

.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.25rem !important;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 25%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-white);
}

.ca-eyebrow i { color: var(--color-accent); }

.ca-hero__title {
  max-width: 13ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--color-text-white);
}

.ca-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.ca-line > span { display: inline-block; }
.ca-hero__title em { font-style: italic; color: var(--color-accent); }

.ca-hero__lead { max-width: 58ch; margin: 0 0 2rem !important; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; }

.ca-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Tampon rotatif « CR BOIS · PORNIC · DEPUIS 2011 » */
.ca-hero__stamp {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: var(--ca-gutter);
  display: grid;
  place-items: center;
  width: clamp(110px, 12vw, 150px);
  aspect-ratio: 1;
}

.ca-hero__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ca-hero__stamp text { fill: color-mix(in srgb, var(--color-text-white) 85%, transparent); font-family: var(--font-family-base); font-size: 11px; font-weight: 700; letter-spacing: 3.2px; }

.ca-hero__stamp i {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.3rem;
}

/* =========================================================
   2. HISTOIRE
   ========================================================= */
.ca-story { padding: clamp(5rem, 11vw, 8rem) 0; }

.ca-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.ca-story__media { position: relative; isolation: isolate; margin: 0; }

.ca-story__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--border-radius-lg) * 1.6);
}

/* Cadre ocre décalé */
.ca-story__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--color-accent);
  border-radius: calc(var(--border-radius-lg) * 1.6);
}

.ca-since {
  position: absolute;
  right: -1.5rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.4rem;
  border-radius: var(--border-radius-lg);
  background: var(--color-primary);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-secondary-dark) 30%, transparent);
}

.ca-since strong {
  font-family: var(--font-family-headings);
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.ca-since span { margin-top: 0.3rem; font-size: 0.72rem; font-weight: var(--font-weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-white) 75%, transparent); }

.ca-story__text strong { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.ca-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ca-chips li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.95rem 1.2rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  background: var(--color-background-alt);
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.ca-chips strong { font-family: var(--font-family-headings); font-size: 1.35rem; color: var(--color-primary); }

/* =========================================================
   3. FABRICATION (rail + braise qui descend)
   ========================================================= */
.ca-process { padding: clamp(5rem, 10vw, 7.5rem) 0; background: var(--color-background-alt); }

.ca-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.ca-process__intro { position: sticky; top: calc(var(--wh-header-h, 84px) + 2rem); }
.ca-process__intro p { color: var(--color-text-light); margin-bottom: 1.5rem; }

.ca-steps-wrap { --ca-p: 0; position: relative; padding-left: 4.5rem; }

.ca-steps-wrap::before,
.ca-steps-wrap::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.ca-steps-wrap::after {
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  transform-origin: top;
  transform: scaleY(var(--ca-p));
}

/* La braise */
.ca-steps__ember {
  position: absolute;
  z-index: 2;
  left: calc(1.6rem + 1.5px);
  top: calc(1.6rem + var(--ca-p) * (100% - 3.2rem));
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--color-accent) 35%, var(--color-text-white)), var(--color-accent) 50%, var(--color-accent-dark));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 0 22px 6px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.ca-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.ca-step {
  position: relative;
  margin: 0;
  padding: 1.4rem 4rem 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  transition: opacity .6s, border-color .5s, box-shadow .5s, transform .6s var(--ca-ease);
}

.ca-step__icon {
  position: absolute;
  z-index: 3;
  left: calc(1.6rem + 1.5px - 4.5rem - 1.4rem);
  top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 0.95rem;
  transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--ca-ease);
}

.ca-step__num {
  position: absolute;
  top: 0.9rem;
  right: 1.25rem;
  font-family: var(--font-family-headings);
  font-size: 2.2rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-border);
  transition: color .5s;
}

.ca-step h3 { margin: 0 0 0.4rem; font-family: var(--font-family-headings); font-size: 1.25rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-step p { margin: 0; font-size: 0.95rem; color: var(--color-text-light); }

.ca-step.is-lit { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: var(--shadow-card); }
.ca-step.is-lit .ca-step__icon { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); transform: scale(1.08); }
.ca-step.is-lit .ca-step__num { color: var(--color-accent); }

/* =========================================================
   4. CYCLE DU BOIS (bande verte)
   ========================================================= */
.ca-cycle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7.5rem) 0;
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
  scroll-margin-top: var(--wh-header-h, 84px);
}

.ca-cycle::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  bottom: -50%;
  width: min(900px, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, color-mix(in srgb, var(--color-text-white) 5%, transparent) 20px 22px);
}

.ca-cycle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.ca-cycle .ca-kicker { color: var(--color-accent); }
.ca-cycle .ca-h2 { color: var(--color-text-white); }
.ca-cycle .ca-h2 em { color: var(--color-accent); }

.ca-pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ca-pledges li {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 12%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: background-color .35s, border-color .35s, transform .5s var(--ca-ease);
}

.ca-pledges li:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  transform: translateY(-3px);
}

.ca-pledges i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ca-pledges strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; color: var(--color-text-white); }

/* Schéma du cycle */
.ca-cycle__fig { margin: 0; }
.ca-cycle__fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }

.cc-track { fill: none; stroke: color-mix(in srgb, var(--color-text-white) 20%, transparent); stroke-width: 2; stroke-dasharray: 4 8; }
.cc-arc { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 880; stroke-dashoffset: 0; }

.cc-node circle { fill: var(--color-primary-dark); stroke: color-mix(in srgb, var(--color-text-white) 30%, transparent); stroke-width: 1.5; transition: fill .3s; }
.cc-node text { fill: var(--color-text-white); font-family: var(--font-family-base); font-size: 13px; font-weight: 600; text-anchor: middle; transition: fill .3s; }
.cc-node:hover circle { fill: var(--color-accent); }
.cc-node:hover text { fill: var(--color-on-accent); }

.cc-runner circle { fill: var(--color-accent); filter: drop-shadow(0 0 6px var(--color-accent)); }

.cc-center { fill: var(--color-text-white); font-family: var(--font-family-headings); font-size: 26px; font-weight: 600; text-anchor: middle; }
.cc-center-sub { fill: color-mix(in srgb, var(--color-text-white) 70%, transparent); font-family: var(--font-family-base); font-size: 11px; text-anchor: middle; }

/* =========================================================
   5. ESSENCES
   ========================================================= */
.ca-species { padding: clamp(5rem, 10vw, 7.5rem) 0; }

.ca-species__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.ca-wood {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  transition: transform .5s var(--ca-ease), box-shadow .5s, border-color .4s;
}

.ca-wood::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ca-ease);
}

.ca-wood:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-card); }
.ca-wood:hover::before { transform: scaleX(1); }

.ca-wood__tag {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ca-wood h3 { margin: 0 0 0.5rem; font-family: var(--font-family-headings); font-size: 1.4rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-wood > p { flex: 1; font-size: 0.92rem; color: var(--color-text-light); }

.ca-meters { display: grid; gap: 0.7rem; margin: 1.2rem 0 0; }
.ca-meters dt { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-meters dd { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.ca-meters em { min-width: 2.4rem; font-size: 0.75rem; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-light); }

/* Jauge en 5 segments */
.ca-meter {
  position: relative;
  flex: 1;
  height: 8px;
  background: var(--color-border);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}

.ca-meter::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 1.2s var(--ca-ease);
}

.ca-meters > div:nth-child(2) .ca-meter::after { transition-delay: .15s; }
.ca-meters > div:nth-child(3) .ca-meter::after { transition-delay: .3s; }

.ca-footnote { margin-top: 1.25rem !important; font-size: 0.82rem; color: var(--color-text-light); }

/* =========================================================
   6. POÊLES (bande sombre)
   ========================================================= */
.ca-stoves {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7.5rem) 0;
  background: var(--color-secondary);
  color: color-mix(in srgb, var(--color-text-white) 78%, transparent);
}

.ca-stoves::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 65%);
  transform: translateY(-50%);
}

.ca-stoves__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.ca-stoves .ca-kicker { color: var(--color-accent); }
.ca-stoves .ca-h2 { color: var(--color-text-white); }
.ca-stoves .ca-h2 em { color: var(--color-accent); }

/* Illustration du poêle */
.ca-stove-fig { margin: 0; }
.ca-stove-fig svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }

.cs-floor  { fill: color-mix(in srgb, var(--color-secondary-dark) 70%, #000); }
.cs-metal  { fill: color-mix(in srgb, var(--color-secondary-dark) 75%, #000); }
.cs-top    { fill: color-mix(in srgb, var(--color-secondary-light) 45%, var(--color-secondary-dark)); }
.cs-glass  { fill: color-mix(in srgb, var(--color-secondary-dark) 55%, #000); stroke: color-mix(in srgb, var(--color-text-white) 22%, transparent); stroke-width: 2; }
.cs-drawer { fill: none; stroke: color-mix(in srgb, var(--color-text-white) 14%, transparent); stroke-width: 2; }
.cs-handle { fill: var(--color-secondary-light); }
.cs-log    { fill: var(--color-accent-deep); }
.cs-flame-a { fill: var(--color-accent); }
.cs-flame-b { fill: color-mix(in srgb, var(--color-accent) 40%, var(--color-text-white)); }
.cs-smoke  { fill: color-mix(in srgb, var(--color-text-white) 16%, transparent); }

.cs-flame-a,
.cs-flame-b { transform-box: fill-box; transform-origin: 50% 100%; }
.cs-glow { transform-box: fill-box; transform-origin: center; }

/* Cartes */
.ca-stoves__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }

.ca-stove {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 12%, transparent);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  transition: border-color .35s, transform .5s var(--ca-ease), background-color .35s;
}

.ca-stove:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-text-white) 9%, transparent); transform: translateY(-4px); }

.ca-stove h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-family: var(--font-family-headings); font-size: 1.35rem; font-weight: var(--font-weight-semibold); color: var(--color-text-white); }
.ca-stove h3 i { color: var(--color-accent); font-size: 1.05rem; }

.ca-stove dl { flex: 1; margin: 0 0 1.25rem; }
.ca-stove dt { margin: 0; font-size: 0.7rem; font-weight: var(--font-weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-white) 55%, transparent); }
.ca-stove dd { margin: 0.15rem 0 0.8rem; font-size: 0.92rem; color: var(--color-text-white); }

.ca-stove__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent) !important; font-weight: var(--font-weight-semibold); text-decoration: none !important; }
.ca-stove__link i { transition: transform .4s var(--ca-ease); }
.ca-stove__link:hover { color: var(--color-text-white) !important; }
.ca-stove__link:hover i { transform: translateX(4px); }

.ca-note {
  margin: 1.25rem 0 0 !important;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: color-mix(in srgb, var(--color-text-white) 5%, transparent);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* =========================================================
   7. LABELS
   ========================================================= */
.ca-certs { padding: clamp(5rem, 10vw, 7.5rem) 0 clamp(3rem, 6vw, 4rem); }

.ca-certs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.ca-cert {
  padding: 2rem 1.4rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  text-align: center;
  transition: transform .5s var(--ca-ease), border-color .4s, box-shadow .5s;
}

.ca-cert:hover { transform: translateY(-6px); border-color: var(--color-accent); box-shadow: var(--shadow-card); }

.ca-cert figure {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto 1.2rem;
  padding: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform .8s var(--ca-ease);
}

.ca-cert figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ca-cert:hover figure { transform: rotate(-8deg) scale(1.06); }

.ca-cert h3 { margin: 0 0 0.5rem; font-family: var(--font-family-headings); font-size: 1.25rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-cert p { margin: 0; font-size: 0.9rem; color: var(--color-text-light); }

/* =========================================================
   8. CHIFFRES CLÉS
   ========================================================= */
.ca-facts { padding: 0 0 clamp(5rem, 10vw, 7.5rem); }

.ca-facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ca-facts__list li { margin: 0; padding: 2rem 1.5rem; }
.ca-facts__list li + li { border-left: 1px solid var(--color-border); }

.ca-facts__list strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-family-headings);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.ca-facts__list span { font-size: 0.9rem; color: var(--color-text-light); }

/* =========================================================
   9. APPEL À L'ACTION
   ========================================================= */
.ca-cta { padding: 0 0 clamp(5rem, 10vw, 7.5rem); }

.ca-cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: calc(var(--border-radius-lg) * 2);
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
}

.ca-cta__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -15%;
  bottom: -70%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14px, color-mix(in srgb, var(--color-text-white) 7%, transparent) 14px 16px);
}

.ca-cta__card h2 { margin: 0 0 0.6rem; font-family: var(--font-family-headings); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: var(--font-weight-semibold); line-height: 1.1; color: var(--color-text-white); }
.ca-cta__card p { max-width: 54ch; margin: 0; }

.ca-cta__actions { display: flex; flex-direction: column; gap: 0.6rem; }

.ca-cta__cats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text-white) 15%, transparent);
}

.ca-cta__cats a {
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 25%, transparent);
  border-radius: var(--border-radius-pill);
  color: var(--color-text-white) !important;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: background-color .3s, border-color .3s, color .3s;
}

.ca-cta__cats a:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent) !important; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:has(.crb-about) { scroll-behavior: smooth; }

  /* Hero au chargement */
  .ca-hero .ca-eyebrow { animation: ca-rise .9s var(--ca-ease) both; }
  .ca-hero__title .ca-line > span { animation: ca-line 1.1s var(--ca-ease) both; }
  .ca-hero__title .ca-line:nth-child(1) > span { animation-delay: .1s; }
  .ca-hero__title .ca-line:nth-child(2) > span { animation-delay: .22s; }
  .ca-hero__lead { animation: ca-rise 1s var(--ca-ease) .4s both; }
  .ca-hero .ca-actions { animation: ca-rise 1s var(--ca-ease) .55s both; }
  .ca-hero__stamp svg { animation: ca-spin 24s linear infinite; }

  /* Apparition au défilement (classe posée par le JS) */
  .crb-about.ca-js [data-ca-r] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ca-ease), transform .9s var(--ca-ease);
    transition-delay: var(--ca-d, 0s);
  }

  .crb-about.ca-js [data-ca-r].is-in { opacity: 1; transform: none; }

  /* Histoire : l'image se dévoile de bas en haut, le cadre et le badge suivent */
  .crb-about.ca-js .ca-story__media[data-ca-r] { opacity: 1; transform: none; }
  .crb-about.ca-js .ca-story__media img { clip-path: inset(100% 0 0 0 round 20px); transition: clip-path 1.4s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in img { clip-path: inset(0 0 0 0 round 20px); }
  .crb-about.ca-js .ca-story__media::before { opacity: 0; transform: translate(-1.25rem, -1.25rem); transition: opacity .8s .5s, transform 1s .5s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in::before { opacity: 1; transform: none; }
  .crb-about.ca-js .ca-since { opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .7s .8s, transform .9s .8s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in .ca-since { opacity: 1; transform: none; }

  /* Étapes non encore atteintes par la braise */
  .crb-about.ca-js .ca-step:not(.is-lit) { opacity: .55; }

  /* Cycle : l'arc se dessine, les étapes apparaissent, la flamme tourne */
  .crb-about.ca-js .ca-cycle__fig .cc-arc { stroke-dashoffset: 880; transition: stroke-dashoffset 2.4s var(--ca-ease) .3s; }
  .crb-about.ca-js .ca-cycle__fig.is-in .cc-arc { stroke-dashoffset: 0; }
  .crb-about.ca-js .ca-cycle__fig .cc-node { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .6s, transform .8s var(--ca-ease); transition-delay: calc(.6s + var(--i) * .18s); }
  .crb-about.ca-js .ca-cycle__fig.is-in .cc-node { opacity: 1; transform: none; }
  .cc-runner { transform-box: view-box; transform-origin: 200px 200px; animation: ca-spin 14s linear infinite; }

  /* Jauges des essences */
  .crb-about.ca-js .ca-wood:not(.is-in) .ca-meter::after { width: 0; }

  /* Poêle : flammes, lueur et fumée */
  .cs-flame-a { animation: ca-flicker 1.1s ease-in-out infinite alternate; }
  .cs-flame-b { animation: ca-flicker 0.8s ease-in-out .2s infinite alternate-reverse; }
  .cs-glow    { animation: ca-glow 2.4s ease-in-out infinite; }
  .cs-smoke   { animation: ca-smoke 4.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .cs-smoke:nth-of-type(2) { animation-delay: 1.5s; }
  .cs-smoke:nth-of-type(3) { animation-delay: 3s; }
}

@keyframes ca-rise    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ca-line    { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
@keyframes ca-spin    { to { transform: rotate(360deg); } }
@keyframes ca-flicker { 0% { transform: scaleY(1) skewX(0); } 50% { transform: scaleY(1.08) skewX(-3deg); } 100% { transform: scaleY(.94) skewX(3deg); } }
@keyframes ca-glow    { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes ca-smoke   { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.6); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .ca-species__grid,
  .ca-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ca-story__grid,
  .ca-process__grid,
  .ca-cycle__grid,
  .ca-stoves__grid,
  .ca-cta__card { grid-template-columns: minmax(0, 1fr); }
  .ca-process__intro { position: static; }
  .ca-story__media { max-width: 460px; }
  .ca-stove-fig svg { max-width: 240px; }
  .ca-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-facts__list li:nth-child(odd) { border-left: 0; }
  .ca-facts__list li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 767px) {
  .ca-hero { min-height: 560px; height: calc(100svh - var(--wh-header-h-mobile, 64px)); }
  .ca-hero__stamp { display: none; }
  .ca-actions { flex-direction: column; align-items: stretch; }
  .ca-actions .ca-btn { justify-content: center; }
}

@media (max-width: 600px) {
  .ca-pledges,
  .ca-stoves__cards,
  .ca-species__grid { grid-template-columns: minmax(0, 1fr); }
  .ca-since { right: 0.75rem; }
  .ca-steps-wrap { padding-left: 3.75rem; }
  .ca-step__icon { left: calc(1.6rem + 1.5px - 3.75rem - 1.4rem); }
  .ca-step { padding-right: 1.25rem; }
  .ca-step__num { display: none; }
}

@media (max-width: 480px) {
  .ca-certs__grid,
  .ca-facts__list { grid-template-columns: minmax(0, 1fr); }
  .ca-facts__list li { border-left: 0 !important; }
  .ca-facts__list li + li { border-top: 1px solid var(--color-border); }
}

/* =========================================================
   PAGE QUI SOMMES-NOUS (.crb-about)
   Animations : crbois-about.js
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

body:has(.crb-about) { overflow-x: clip; }

.crb-about {
  --ca-ease: cubic-bezier(.16, 1, .3, 1);
  --ca-gutter: clamp(1.25rem, 4vw, 2.5rem);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.crb-about *,
.crb-about *::before,
.crb-about *::after { box-sizing: border-box; }

.crb-about p:empty { display: none; }
.crb-about p { margin: 0 0 1rem; }

.ca-wrap { max-width: calc(1180px + 2 * var(--ca-gutter)); margin: 0 auto; padding: 0 var(--ca-gutter); }

/* ---------- Éléments communs ---------- */
.ca-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.ca-kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--color-accent); }

.ca-h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.ca-h2 em { font-style: italic; color: var(--color-primary); }

.ca-head { max-width: 720px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.ca-head p { color: var(--color-text-light); font-size: 1.05rem; }

.ca-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-pill);
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ca-ease);
}

.ca-btn i { transition: transform .4s var(--ca-ease); }
.ca-btn:hover { transform: translateY(-2px); }
.ca-btn:hover i { transform: translateX(4px); }
.ca-btn:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.ca-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.ca-btn--accent:hover { background: var(--color-surface); color: var(--color-primary); }
.ca-btn--ghost { border-color: color-mix(in srgb, var(--color-text-white) 45%, transparent); color: var(--color-text-white); }
.ca-btn--ghost:hover { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-primary); }
.ca-btn--outline { border-color: var(--color-border); color: var(--color-secondary); background: var(--color-surface); }
.ca-btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.ca-btn--light { background: var(--color-surface); color: var(--color-primary); }
.ca-btn--light:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* =========================================================
   1. HERO PLEIN ÉCRAN
   ========================================================= */
.ca-hero {
  --ca-hp: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  min-height: 620px;
  height: calc(100svh - var(--wh-header-h, 84px));
  margin-left: calc(50% - 50vw);
  background: var(--color-secondary-dark);
  color: color-mix(in srgb, var(--color-text-white) 85%, transparent);
}

.ca-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.08 + var(--ca-hp) * 0.12)) translateY(calc(var(--ca-hp) * 60px));
}

.ca-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--color-secondary-dark) 90%, transparent) 0%, color-mix(in srgb, var(--color-secondary-dark) 40%, transparent) 50%, transparent 85%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-secondary-dark) 60%, transparent), transparent 65%);
}

.ca-hero__inner {
  width: 100%;
  max-width: calc(1180px + 2 * var(--ca-gutter));
  margin: 0 auto;
  padding: 0 var(--ca-gutter) clamp(3rem, 7vw, 5rem);
  opacity: calc(1 - var(--ca-hp) * 1.3);
}

.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.25rem !important;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 25%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-white);
}

.ca-eyebrow i { color: var(--color-accent); }

.ca-hero__title {
  max-width: 13ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--color-text-white);
}

.ca-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.ca-line > span { display: inline-block; }
.ca-hero__title em { font-style: italic; color: var(--color-accent); }

.ca-hero__lead { max-width: 58ch; margin: 0 0 2rem !important; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; }

.ca-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Tampon rotatif « CR BOIS · PORNIC · DEPUIS 2011 » */
.ca-hero__stamp {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: var(--ca-gutter);
  display: grid;
  place-items: center;
  width: clamp(110px, 12vw, 150px);
  aspect-ratio: 1;
}

.ca-hero__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ca-hero__stamp text { fill: color-mix(in srgb, var(--color-text-white) 85%, transparent); font-family: var(--font-family-base); font-size: 11px; font-weight: 700; letter-spacing: 3.2px; }

.ca-hero__stamp i {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.3rem;
}

/* =========================================================
   2. HISTOIRE
   ========================================================= */
.ca-story { padding: clamp(5rem, 11vw, 8rem) 0; }

.ca-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.ca-story__media { position: relative; isolation: isolate; margin: 0; }

.ca-story__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--border-radius-lg) * 1.6);
}

/* Cadre ocre décalé */
.ca-story__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--color-accent);
  border-radius: calc(var(--border-radius-lg) * 1.6);
}

.ca-since {
  position: absolute;
  right: -1.5rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.4rem;
  border-radius: var(--border-radius-lg);
  background: var(--color-primary);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-secondary-dark) 30%, transparent);
}

.ca-since strong {
  font-family: var(--font-family-headings);
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.ca-since span { margin-top: 0.3rem; font-size: 0.72rem; font-weight: var(--font-weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-white) 75%, transparent); }

.ca-story__text strong { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.ca-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ca-chips li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.95rem 1.2rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  background: var(--color-background-alt);
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.ca-chips strong { font-family: var(--font-family-headings); font-size: 1.35rem; color: var(--color-primary); }

/* =========================================================
   3. FABRICATION (rail + braise qui descend)
   ========================================================= */
.ca-process { padding: clamp(5rem, 10vw, 7.5rem) 0; background: var(--color-background-alt); }

.ca-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.ca-process__intro { position: sticky; top: calc(var(--wh-header-h, 84px) + 2rem); }
.ca-process__intro p { color: var(--color-text-light); margin-bottom: 1.5rem; }

.ca-steps-wrap { --ca-p: 0; position: relative; padding-left: 4.5rem; }

.ca-steps-wrap::before,
.ca-steps-wrap::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.ca-steps-wrap::after {
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  transform-origin: top;
  transform: scaleY(var(--ca-p));
}

/* La braise */
.ca-steps__ember {
  position: absolute;
  z-index: 2;
  left: calc(1.6rem + 1.5px);
  top: calc(1.6rem + var(--ca-p) * (100% - 3.2rem));
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--color-accent) 35%, var(--color-text-white)), var(--color-accent) 50%, var(--color-accent-dark));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 0 22px 6px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.ca-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.ca-step {
  position: relative;
  margin: 0;
  padding: 1.4rem 4rem 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  transition: opacity .6s, border-color .5s, box-shadow .5s, transform .6s var(--ca-ease);
}

.ca-step__icon {
  position: absolute;
  z-index: 3;
  left: calc(1.6rem + 1.5px - 4.5rem - 1.4rem);
  top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 0.95rem;
  transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--ca-ease);
}

.ca-step__num {
  position: absolute;
  top: 0.9rem;
  right: 1.25rem;
  font-family: var(--font-family-headings);
  font-size: 2.2rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-border);
  transition: color .5s;
}

.ca-step h3 { margin: 0 0 0.4rem; font-family: var(--font-family-headings); font-size: 1.25rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-step p { margin: 0; font-size: 0.95rem; color: var(--color-text-light); }

.ca-step.is-lit { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: var(--shadow-card); }
.ca-step.is-lit .ca-step__icon { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); transform: scale(1.08); }
.ca-step.is-lit .ca-step__num { color: var(--color-accent); }

/* =========================================================
   4. CYCLE DU BOIS (bande verte)
   ========================================================= */
.ca-cycle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7.5rem) 0;
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
  scroll-margin-top: var(--wh-header-h, 84px);
}

.ca-cycle::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  bottom: -50%;
  width: min(900px, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, color-mix(in srgb, var(--color-text-white) 5%, transparent) 20px 22px);
}

.ca-cycle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.ca-cycle .ca-kicker { color: var(--color-accent); }
.ca-cycle .ca-h2 { color: var(--color-text-white); }
.ca-cycle .ca-h2 em { color: var(--color-accent); }

.ca-pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ca-pledges li {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 12%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: background-color .35s, border-color .35s, transform .5s var(--ca-ease);
}

.ca-pledges li:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  transform: translateY(-3px);
}

.ca-pledges i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ca-pledges strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; color: var(--color-text-white); }

/* Schéma du cycle */
.ca-cycle__fig { margin: 0; }
.ca-cycle__fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }

.cc-track { fill: none; stroke: color-mix(in srgb, var(--color-text-white) 20%, transparent); stroke-width: 2; stroke-dasharray: 4 8; }
.cc-arc { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 880; stroke-dashoffset: 0; }

.cc-node circle { fill: var(--color-primary-dark); stroke: color-mix(in srgb, var(--color-text-white) 30%, transparent); stroke-width: 1.5; transition: fill .3s; }
.cc-node text { fill: var(--color-text-white); font-family: var(--font-family-base); font-size: 13px; font-weight: 600; text-anchor: middle; transition: fill .3s; }
.cc-node:hover circle { fill: var(--color-accent); }
.cc-node:hover text { fill: var(--color-on-accent); }

.cc-runner circle { fill: var(--color-accent); filter: drop-shadow(0 0 6px var(--color-accent)); }

.cc-center { fill: var(--color-text-white); font-family: var(--font-family-headings); font-size: 26px; font-weight: 600; text-anchor: middle; }
.cc-center-sub { fill: color-mix(in srgb, var(--color-text-white) 70%, transparent); font-family: var(--font-family-base); font-size: 11px; text-anchor: middle; }

/* =========================================================
   5. ESSENCES
   ========================================================= */
.ca-species { padding: clamp(5rem, 10vw, 7.5rem) 0; }

.ca-species__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.ca-wood {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  transition: transform .5s var(--ca-ease), box-shadow .5s, border-color .4s;
}

.ca-wood::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ca-ease);
}

.ca-wood:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-card); }
.ca-wood:hover::before { transform: scaleX(1); }

.ca-wood__tag {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ca-wood h3 { margin: 0 0 0.5rem; font-family: var(--font-family-headings); font-size: 1.4rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-wood > p { flex: 1; font-size: 0.92rem; color: var(--color-text-light); }

.ca-meters { display: grid; gap: 0.7rem; margin: 1.2rem 0 0; }
.ca-meters dt { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-meters dd { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.ca-meters em { min-width: 2.4rem; font-size: 0.75rem; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-light); }

/* Jauge en 5 segments */
.ca-meter {
  position: relative;
  flex: 1;
  height: 8px;
  background: var(--color-border);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}

.ca-meter::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 1.2s var(--ca-ease);
}

.ca-meters > div:nth-child(2) .ca-meter::after { transition-delay: .15s; }
.ca-meters > div:nth-child(3) .ca-meter::after { transition-delay: .3s; }

.ca-footnote { margin-top: 1.25rem !important; font-size: 0.82rem; color: var(--color-text-light); }

/* =========================================================
   6. POÊLES (bande sombre)
   ========================================================= */
.ca-stoves {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7.5rem) 0;
  background: var(--color-secondary);
  color: color-mix(in srgb, var(--color-text-white) 78%, transparent);
}

.ca-stoves::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 65%);
  transform: translateY(-50%);
}

.ca-stoves__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.ca-stoves .ca-kicker { color: var(--color-accent); }
.ca-stoves .ca-h2 { color: var(--color-text-white); }
.ca-stoves .ca-h2 em { color: var(--color-accent); }

/* Illustration du poêle */
.ca-stove-fig { margin: 0; }
.ca-stove-fig svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }

.cs-floor  { fill: color-mix(in srgb, var(--color-secondary-dark) 70%, #000); }
.cs-metal  { fill: color-mix(in srgb, var(--color-secondary-dark) 75%, #000); }
.cs-top    { fill: color-mix(in srgb, var(--color-secondary-light) 45%, var(--color-secondary-dark)); }
.cs-glass  { fill: color-mix(in srgb, var(--color-secondary-dark) 55%, #000); stroke: color-mix(in srgb, var(--color-text-white) 22%, transparent); stroke-width: 2; }
.cs-drawer { fill: none; stroke: color-mix(in srgb, var(--color-text-white) 14%, transparent); stroke-width: 2; }
.cs-handle { fill: var(--color-secondary-light); }
.cs-log    { fill: var(--color-accent-deep); }
.cs-flame-a { fill: var(--color-accent); }
.cs-flame-b { fill: color-mix(in srgb, var(--color-accent) 40%, var(--color-text-white)); }
.cs-smoke  { fill: color-mix(in srgb, var(--color-text-white) 16%, transparent); }

.cs-flame-a,
.cs-flame-b { transform-box: fill-box; transform-origin: 50% 100%; }
.cs-glow { transform-box: fill-box; transform-origin: center; }

/* Cartes */
.ca-stoves__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }

.ca-stove {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 12%, transparent);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  transition: border-color .35s, transform .5s var(--ca-ease), background-color .35s;
}

.ca-stove:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-text-white) 9%, transparent); transform: translateY(-4px); }

.ca-stove h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-family: var(--font-family-headings); font-size: 1.35rem; font-weight: var(--font-weight-semibold); color: var(--color-text-white); }
.ca-stove h3 i { color: var(--color-accent); font-size: 1.05rem; }

.ca-stove dl { flex: 1; margin: 0 0 1.25rem; }
.ca-stove dt { margin: 0; font-size: 0.7rem; font-weight: var(--font-weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-white) 55%, transparent); }
.ca-stove dd { margin: 0.15rem 0 0.8rem; font-size: 0.92rem; color: var(--color-text-white); }

.ca-stove__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent) !important; font-weight: var(--font-weight-semibold); text-decoration: none !important; }
.ca-stove__link i { transition: transform .4s var(--ca-ease); }
.ca-stove__link:hover { color: var(--color-text-white) !important; }
.ca-stove__link:hover i { transform: translateX(4px); }

.ca-note {
  margin: 1.25rem 0 0 !important;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: color-mix(in srgb, var(--color-text-white) 5%, transparent);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* =========================================================
   7. LABELS
   ========================================================= */
.ca-certs { padding: clamp(5rem, 10vw, 7.5rem) 0 clamp(3rem, 6vw, 4rem); }

.ca-certs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.ca-cert {
  padding: 2rem 1.4rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--color-surface);
  text-align: center;
  transition: transform .5s var(--ca-ease), border-color .4s, box-shadow .5s;
}

.ca-cert:hover { transform: translateY(-6px); border-color: var(--color-accent); box-shadow: var(--shadow-card); }

.ca-cert figure {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto 1.2rem;
  padding: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform .8s var(--ca-ease);
}

.ca-cert figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ca-cert:hover figure { transform: rotate(-8deg) scale(1.06); }

.ca-cert h3 { margin: 0 0 0.5rem; font-family: var(--font-family-headings); font-size: 1.25rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.ca-cert p { margin: 0; font-size: 0.9rem; color: var(--color-text-light); }

/* =========================================================
   8. CHIFFRES CLÉS
   ========================================================= */
.ca-facts { padding: 0 0 clamp(5rem, 10vw, 7.5rem); }

.ca-facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ca-facts__list li { margin: 0; padding: 2rem 1.5rem; }
.ca-facts__list li + li { border-left: 1px solid var(--color-border); }

.ca-facts__list strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-family-headings);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.ca-facts__list span { font-size: 0.9rem; color: var(--color-text-light); }

/* =========================================================
   9. APPEL À L'ACTION
   ========================================================= */
.ca-cta { padding: 0 0 clamp(5rem, 10vw, 7.5rem); }

.ca-cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: calc(var(--border-radius-lg) * 2);
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
}

.ca-cta__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -15%;
  bottom: -70%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14px, color-mix(in srgb, var(--color-text-white) 7%, transparent) 14px 16px);
}

.ca-cta__card h2 { margin: 0 0 0.6rem; font-family: var(--font-family-headings); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: var(--font-weight-semibold); line-height: 1.1; color: var(--color-text-white); }
.ca-cta__card p { max-width: 54ch; margin: 0; }

.ca-cta__actions { display: flex; flex-direction: column; gap: 0.6rem; }

.ca-cta__cats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text-white) 15%, transparent);
}

.ca-cta__cats a {
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 25%, transparent);
  border-radius: var(--border-radius-pill);
  color: var(--color-text-white) !important;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: background-color .3s, border-color .3s, color .3s;
}

.ca-cta__cats a:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent) !important; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:has(.crb-about) { scroll-behavior: smooth; }

  /* Hero au chargement */
  .ca-hero .ca-eyebrow { animation: ca-rise .9s var(--ca-ease) both; }
  .ca-hero__title .ca-line > span { animation: ca-line 1.1s var(--ca-ease) both; }
  .ca-hero__title .ca-line:nth-child(1) > span { animation-delay: .1s; }
  .ca-hero__title .ca-line:nth-child(2) > span { animation-delay: .22s; }
  .ca-hero__lead { animation: ca-rise 1s var(--ca-ease) .4s both; }
  .ca-hero .ca-actions { animation: ca-rise 1s var(--ca-ease) .55s both; }
  .ca-hero__stamp svg { animation: ca-spin 24s linear infinite; }

  /* Apparition au défilement (classe posée par le JS) */
  .crb-about.ca-js [data-ca-r] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ca-ease), transform .9s var(--ca-ease);
    transition-delay: var(--ca-d, 0s);
  }

  .crb-about.ca-js [data-ca-r].is-in { opacity: 1; transform: none; }

  /* Histoire : l'image se dévoile de bas en haut, le cadre et le badge suivent */
  .crb-about.ca-js .ca-story__media[data-ca-r] { opacity: 1; transform: none; }
  .crb-about.ca-js .ca-story__media img { clip-path: inset(100% 0 0 0 round 20px); transition: clip-path 1.4s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in img { clip-path: inset(0 0 0 0 round 20px); }
  .crb-about.ca-js .ca-story__media::before { opacity: 0; transform: translate(-1.25rem, -1.25rem); transition: opacity .8s .5s, transform 1s .5s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in::before { opacity: 1; transform: none; }
  .crb-about.ca-js .ca-since { opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .7s .8s, transform .9s .8s var(--ca-ease); }
  .crb-about.ca-js .ca-story__media.is-in .ca-since { opacity: 1; transform: none; }

  /* Étapes non encore atteintes par la braise */
  .crb-about.ca-js .ca-step:not(.is-lit) { opacity: .55; }

  /* Cycle : l'arc se dessine, les étapes apparaissent, la flamme tourne */
  .crb-about.ca-js .ca-cycle__fig .cc-arc { stroke-dashoffset: 880; transition: stroke-dashoffset 2.4s var(--ca-ease) .3s; }
  .crb-about.ca-js .ca-cycle__fig.is-in .cc-arc { stroke-dashoffset: 0; }
  .crb-about.ca-js .ca-cycle__fig .cc-node { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .6s, transform .8s var(--ca-ease); transition-delay: calc(.6s + var(--i) * .18s); }
  .crb-about.ca-js .ca-cycle__fig.is-in .cc-node { opacity: 1; transform: none; }
  .cc-runner { transform-box: view-box; transform-origin: 200px 200px; animation: ca-spin 14s linear infinite; }

  /* Jauges des essences */
  .crb-about.ca-js .ca-wood:not(.is-in) .ca-meter::after { width: 0; }

  /* Poêle : flammes, lueur et fumée */
  .cs-flame-a { animation: ca-flicker 1.1s ease-in-out infinite alternate; }
  .cs-flame-b { animation: ca-flicker 0.8s ease-in-out .2s infinite alternate-reverse; }
  .cs-glow    { animation: ca-glow 2.4s ease-in-out infinite; }
  .cs-smoke   { animation: ca-smoke 4.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .cs-smoke:nth-of-type(2) { animation-delay: 1.5s; }
  .cs-smoke:nth-of-type(3) { animation-delay: 3s; }
}

@keyframes ca-rise    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ca-line    { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
@keyframes ca-spin    { to { transform: rotate(360deg); } }
@keyframes ca-flicker { 0% { transform: scaleY(1) skewX(0); } 50% { transform: scaleY(1.08) skewX(-3deg); } 100% { transform: scaleY(.94) skewX(3deg); } }
@keyframes ca-glow    { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes ca-smoke   { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.6); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .ca-species__grid,
  .ca-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ca-story__grid,
  .ca-process__grid,
  .ca-cycle__grid,
  .ca-stoves__grid,
  .ca-cta__card { grid-template-columns: minmax(0, 1fr); }
  .ca-process__intro { position: static; }
  .ca-story__media { max-width: 460px; }
  .ca-stove-fig svg { max-width: 240px; }
  .ca-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-facts__list li:nth-child(odd) { border-left: 0; }
  .ca-facts__list li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 767px) {
  .ca-hero { min-height: 560px; height: calc(100svh - var(--wh-header-h-mobile, 64px)); }
  .ca-hero__stamp { display: none; }
  .ca-actions { flex-direction: column; align-items: stretch; }
  .ca-actions .ca-btn { justify-content: center; }
}

@media (max-width: 600px) {
  .ca-pledges,
  .ca-stoves__cards,
  .ca-species__grid { grid-template-columns: minmax(0, 1fr); }
  .ca-since { right: 0.75rem; }
  .ca-steps-wrap { padding-left: 3.75rem; }
  .ca-step__icon { left: calc(1.6rem + 1.5px - 3.75rem - 1.4rem); }
  .ca-step { padding-right: 1.25rem; }
  .ca-step__num { display: none; }
}

@media (max-width: 480px) {
  .ca-certs__grid,
  .ca-facts__list { grid-template-columns: minmax(0, 1fr); }
  .ca-facts__list li { border-left: 0 !important; }
  .ca-facts__list li + li { border-top: 1px solid var(--color-border); }
}
/* =========================================================
   SUIVI DE COMMANDE (.crb-track)
   Formulaire WooCommerce [woocommerce_order_tracking] + page de résultat
   Animations : crbois-suivi.js
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

body:has(.crb-track) { overflow-x: clip; }

.crb-track {
  --ct-ease: cubic-bezier(.16, 1, .3, 1);
  --ct-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ct-p: 0;
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.crb-track *,
.crb-track *::before,
.crb-track *::after { box-sizing: border-box; }

.crb-track p:empty { display: none; }

/* Neutralise les conteneurs WPBakery / WoodMart du bloc HTML */
.crb-track .wpb-content-wrapper,
.crb-track .vc_row,
.crb-track .vc_column-inner,
.crb-track .wpb_wrapper { margin: 0 !important; padding: 0 !important; }

/* =========================================================
   EN-TÊTE (bande crème + route qui défile)
   ========================================================= */
.ct-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--ct-gutter) clamp(7rem, 13vw, 9rem);
  background: var(--color-background-alt);
}

/* Pointillés de route en bas du bandeau */
.ct-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2.5rem, 5vw, 3.5rem);
  height: 3px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 22%, transparent) 0 18px, transparent 18px 34px);
  background-size: 34px 3px;
}

.ct-hero__inner { max-width: 1180px; margin: 0 auto; }

.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.45rem 1rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ct-hero h1 {
  max-width: 14ch;
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-secondary);
}

.ct-hero h1 em { font-style: italic; color: var(--color-primary); }
.ct-hero p { max-width: 54ch; margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--color-text-light); }

/* =========================================================
   ÉTAPES + CAMION
   ========================================================= */
.ct-wrap { max-width: calc(1180px + 2 * var(--ct-gutter)); margin: 0 auto; padding: 0 var(--ct-gutter); }

.ct-steps {
  position: relative;
  z-index: 2;
  margin: calc(-1 * clamp(5rem, 9vw, 6.5rem)) 0 clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: calc(var(--border-radius-lg) * 1.6);
  background: var(--color-surface);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

.ct-steps__body { position: relative; padding-top: 2.4rem; }

.ct-steps ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-steps li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0; text-align: center; }

/* Rail entre la 1re et la 4e pastille */
.ct-steps__rail {
  position: absolute;
  z-index: 0;
  top: calc(2.4rem + 1.6rem - 1.5px);
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.ct-steps__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform-origin: left;
  transform: scaleX(var(--ct-p));
  transition: transform 1.2s var(--ct-ease);
}

/* Le camion roule au-dessus du rail */
.ct-steps__truck {
  position: absolute;
  top: -3.5rem;
  left: calc(var(--ct-p) * 100%);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 1.6rem;
  color: var(--color-primary);
  font-size: 1.25rem;
  transform: translateX(-50%);
  transition: left 1.2s var(--ct-ease);
}

.ct-steps__dot {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 1.05rem;
  transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--ct-ease);
}

.ct-steps strong { font-size: 0.98rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); transition: color .4s; }
.ct-steps small { max-width: 22ch; font-size: 0.82rem; line-height: 1.45; color: var(--color-text-light); }

.ct-steps li.is-done .ct-steps__dot { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }

.ct-steps li.is-current .ct-steps__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: scale(1.12);
}

.ct-steps li.is-current strong { color: var(--color-accent-deep); }

/* Message de statut */
.ct-steps__status {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  background: var(--color-primary-light);
  font-size: 0.95rem;
  color: var(--color-secondary);
}

.ct-steps__status::before {
  content: "\f05a";
  flex: 0 0 auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--color-primary);
}

.ct-steps__status[data-kind="wait"] { border-left-color: var(--color-accent); background: var(--color-accent-light); }
.ct-steps__status[data-kind="wait"]::before { content: "\f017"; color: var(--color-accent-deep); }
.ct-steps__status[data-kind="done"]::before { content: "\f058"; }
.ct-steps__status[data-kind="stop"] { border-left-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 7%, var(--color-surface)); }
.ct-steps__status[data-kind="stop"]::before { content: "\f057"; color: var(--color-error); }

.ct-steps.is-stopped ol,
.ct-steps.is-stopped .ct-steps__rail { opacity: .35; }

/* =========================================================
   MISE EN PAGE
   ========================================================= */
.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(4rem, 9vw, 6.5rem);
}

.crb-track.has-result .ct-layout { grid-template-columns: minmax(0, 1fr); }
.crb-track.has-result .ct-help { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 0 3rem; align-items: start; }
.crb-track.has-result .ct-help h2 { grid-column: 1 / -1; }
.crb-track.has-result .ct-help .ct-contact { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }

.ct-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.4);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.ct-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

.ct-card__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.ct-card__title i { color: var(--color-accent-deep); font-size: 1.1rem; }

.crb-track.has-result .ct-card__title { display: none; }

/* =========================================================
   FORMULAIRE WOOCOMMERCE
   ========================================================= */
.crb-track .woocommerce-form-track-order {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.crb-track .woocommerce-form-track-order > p:first-of-type { grid-column: 1 / -1; margin: 0 0 0.5rem; color: var(--color-text-light); }
.crb-track .woocommerce-form-track-order .clear { display: none; }

.crb-track .woocommerce-form-track-order .form-row {
  float: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: auto;
  margin: 0;
  padding: 0;
}

.crb-track .woocommerce-form-track-order .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }

.crb-track .woocommerce-form-track-order label { margin: 0; font-size: 0.85rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.crb-track .woocommerce-form-track-order .input-text {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background-alt);
  box-shadow: none;
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: 1rem;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}

.crb-track .woocommerce-form-track-order .input-text::placeholder { color: color-mix(in srgb, var(--color-text-light) 75%, transparent); }
.crb-track .woocommerce-form-track-order .input-text:hover { border-color: var(--color-secondary-light); }

.crb-track .woocommerce-form-track-order .input-text:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

.crb-track .woocommerce-form-track-order .button {
  align-self: flex-start;
  min-height: 3.3rem;
  padding: 0.85rem 2.2rem;
  border: 0;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transition: background-color .3s, color .3s, transform .4s var(--ct-ease);
}

.crb-track .woocommerce-form-track-order .button:hover { background: var(--color-accent); color: var(--color-on-accent); transform: translateY(-2px); }
.crb-track .woocommerce-form-track-order .button:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* Commande introuvable */
.crb-track .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  list-style: none;
  border: 0;
  border-left: 4px solid var(--color-error);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: color-mix(in srgb, var(--color-error) 7%, var(--color-surface));
  color: var(--color-error);
  font-size: 0.95rem;
}

.crb-track .woocommerce-error::before { display: none; }

/* =========================================================
   RÉSULTAT DU SUIVI
   ========================================================= */
.crb-track .order-info { margin: 0 0 1.75rem; font-size: 1.08rem; line-height: 1.7; }

.crb-track .order-info mark {
  padding: 0.15em 0.55em;
  border-radius: var(--border-radius);
  background: var(--color-background-alt);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.crb-track .order-info mark.order-status { background: var(--color-accent-light); color: var(--color-accent-deep); }

.crb-track .woocommerce-order-details__title,
.crb-track .woocommerce-column__title,
.crb-track .woocommerce-customer-details h2 {
  margin: 2rem 0 1rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

/* Historique */
.crb-track .woocommerce-OrderUpdates {
  margin: 0 0 2rem;
  padding: 0 0 0 1.25rem;
  list-style: none;
  border-left: 3px solid var(--color-primary-light);
}

.crb-track .woocommerce-OrderUpdate { position: relative; margin: 0 0 1rem; padding-left: 0.75rem; }

.crb-track .woocommerce-OrderUpdate::before {
  content: "";
  position: absolute;
  left: -1.95rem;
  top: 0.4rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-accent);
}

.crb-track .woocommerce-OrderUpdate-meta { margin: 0; font-size: 0.85rem; color: var(--color-text-light); }
.crb-track .woocommerce-OrderUpdate-description p { margin: 0.2rem 0 0; }

/* Articles */
.crb-track .woocommerce-table--order-details {
  width: 100%;
  margin: 0 0 1.5rem;
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  font-size: 0.95rem;
}

.crb-track .woocommerce-table--order-details th,
.crb-track .woocommerce-table--order-details td {
  padding: 0.85rem 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.crb-track .woocommerce-table--order-details thead th {
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crb-track .woocommerce-table--order-details td:last-child,
.crb-track .woocommerce-table--order-details th:last-child { text-align: right; }

.crb-track .woocommerce-table--order-details tfoot tr:last-child th,
.crb-track .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  background: var(--color-primary-light);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.crb-track .woocommerce-table--order-details a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* Adresses */
.crb-track .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.crb-track .woocommerce-columns--addresses::before,
.crb-track .woocommerce-columns--addresses::after { display: none; }

.crb-track .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: auto;
  max-width: none;
  padding: 1.25rem;
  border-radius: var(--border-radius-lg);
  background: var(--color-background-alt);
}

.crb-track .woocommerce-columns--addresses .woocommerce-column__title { margin-top: 0; font-size: 1.15rem; }
.crb-track .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; line-height: 1.6; }

/* =========================================================
   AIDE
   ========================================================= */
.ct-help h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-family-headings);
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.ct-help details { border-bottom: 1px solid var(--color-border); interpolate-size: allow-keywords; }

.ct-help summary {
  position: relative;
  display: block;
  padding: 1rem 2.75rem 1rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  transition: color .3s, padding-left .4s var(--ct-ease);
}

.ct-help summary::-webkit-details-marker { display: none; }
.ct-help summary:hover,
.ct-help details[open] summary { color: var(--color-primary); padding-left: 0.5rem; }
.ct-help summary:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; border-radius: 4px; }

.ct-help summary::before,
.ct-help summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform .4s var(--ct-ease);
}

.ct-help summary::after { transform: rotate(90deg); }
.ct-help details[open] summary::after { transform: rotate(0); }

.ct-help details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .4s var(--ct-ease), content-visibility .4s allow-discrete;
}

.ct-help details[open]::details-content { block-size: auto; }

.ct-help details p { margin: 0; padding: 0 0.5rem 1rem; font-size: 0.93rem; color: var(--color-text-light); }

.ct-help details a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.ct-contact { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.ct-contact a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  color: var(--color-secondary);
  text-decoration: none !important;
  transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--ct-ease);
}

.ct-contact i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  transition: background-color .35s, color .35s, transform .5s var(--ct-ease);
}

.ct-contact span { display: flex; flex-direction: column; min-width: 0; }
.ct-contact small { font-size: 0.72rem; font-weight: var(--font-weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-light); transition: color .35s; }
.ct-contact strong { font-size: 0.95rem; overflow-wrap: anywhere; }

.ct-contact a:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); transform: translateY(-3px); }
.ct-contact a:hover i { background: var(--color-accent); color: var(--color-on-accent); transform: rotate(-8deg); }
.ct-contact a:hover small { color: color-mix(in srgb, var(--color-text-white) 70%, transparent); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ct-hero .ct-eyebrow { animation: ct-rise .8s var(--ct-ease) both; }
  .ct-hero h1 { animation: ct-rise 1.1s var(--ct-ease) .08s both; }
  .ct-hero p { animation: ct-rise 1s var(--ct-ease) .22s both; }
  .ct-hero::after { animation: ct-road 1.2s linear infinite; }

  .ct-steps { animation: ct-rise 1s var(--ct-ease) .3s both; }
  .ct-steps li { animation: ct-pop .7s var(--ct-ease) both; }
  .ct-steps li:nth-child(1) { animation-delay: .5s; }
  .ct-steps li:nth-child(2) { animation-delay: .6s; }
  .ct-steps li:nth-child(3) { animation-delay: .7s; }
  .ct-steps li:nth-child(4) { animation-delay: .8s; }

  /* Le camion tressaute en roulant ; il s'arrête une fois la commande livrée */
  .ct-steps__truck i { animation: ct-bob .5s ease-in-out infinite alternate; }
  .ct-steps.is-complete .ct-steps__truck i,
  .ct-steps.is-stopped .ct-steps__truck i { animation: none; }

  .ct-steps li.is-current .ct-steps__dot { animation: ct-pulse 1.8s ease-out infinite; }
  .ct-steps__status { animation: ct-rise .6s var(--ct-ease); }

  .ct-card { animation: ct-rise 1s var(--ct-ease) .45s both; }
  .ct-help { animation: ct-rise 1s var(--ct-ease) .55s both; }

  .crb-track .woocommerce-form-track-order > * { animation: ct-rise .7s var(--ct-ease) both; }
  .crb-track .woocommerce-form-track-order > *:nth-child(2) { animation-delay: .6s; }
  .crb-track .woocommerce-form-track-order > *:nth-child(3) { animation-delay: .68s; }
  .crb-track .woocommerce-form-track-order > *:nth-child(n+4) { animation-delay: .76s; }

  .crb-track .woocommerce-OrderUpdate { animation: ct-rise .6s var(--ct-ease) both; }
  .crb-track .woocommerce-error { animation: ct-shake .5s ease; }
}

@keyframes ct-rise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ct-pop   { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ct-road  { from { background-position: 0 0; } to { background-position: -34px 0; } }
@keyframes ct-bob   { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes ct-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@keyframes ct-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .ct-layout,
  .crb-track.has-result .ct-help { grid-template-columns: minmax(0, 1fr); }
  .crb-track.has-result .ct-help .ct-contact { grid-column: auto; grid-row: auto; margin-top: 1.5rem; }
}

@media (max-width: 640px) {
  /* Étapes à la verticale, le camion descend le long du rail */
  .ct-steps__body { padding-top: 0; padding-left: 3.4rem; }
  .ct-steps ol { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ct-steps li { position: relative; align-items: flex-start; text-align: left; padding-left: 0.5rem; }
  .ct-steps__dot { position: absolute; left: -3.4rem; top: -0.2rem; width: 2.8rem; height: 2.8rem; margin: 0; }
  .ct-steps small { max-width: none; }
  .ct-steps__rail { top: 1.2rem; bottom: 1.6rem; left: calc(1.4rem - 1.5px); right: auto; width: 3px; height: auto; }
  .ct-steps__fill { transform-origin: top; transform: scaleY(var(--ct-p)); }
  .ct-steps__truck { display: none; }

  .crb-track .woocommerce-form-track-order,
  .crb-track .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); }
  .crb-track .woocommerce-form-track-order .button { width: 100%; }
}

/* =========================================================
   ACCUEIL — LES 5 GAMMES (.crb-cats) — carrousel
   Grandes cartes photo, la carte centrale est mise en avant.
   Flèches, onglets avec minuterie, glisser à la souris ou au doigt,
   défilement automatique toutes les 5 s (pause au survol).
   Animations : accueil-categories.js
   ========================================================= */

body:has(.crb-cats) { overflow-x: clip; }

.crb-cats {
  --cr-ease: cubic-bezier(.16, 1, .3, 1);
  --cr-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --cr-w: clamp(300px, 64vw, 900px);        /* largeur d'une carte */
  --cr-delay: 5s;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  background: var(--color-background);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
}

.crb-cats *,
.crb-cats *::before,
.crb-cats *::after { box-sizing: border-box; }

.cr-wrap { max-width: calc(1240px + 2 * var(--cr-gutter)); margin: 0 auto; padding: 0 var(--cr-gutter); }

/* ---------- En-tête ---------- */
.cr-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.cr-kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--color-accent); }

.cr-title {
  margin: 0;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-secondary);
}

.cr-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.cr-line > span { display: inline-block; }
.cr-title em { font-style: italic; color: var(--color-primary); }

.cr-head__side p { max-width: 42ch; margin: 0 0 1.25rem; font-size: 1.05rem; color: var(--color-text-light); }

/* Flèches + compteur */
.cr-arrows { display: flex; align-items: center; gap: 1rem; }

.cr-arrow {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--cr-ease);
}

.cr-arrow:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }
.cr-arrow[data-cr-prev]:hover { transform: translateX(-3px); }
.cr-arrow[data-cr-next]:hover { transform: translateX(3px); }
.cr-arrow:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.cr-count {
  min-width: 4.5rem;
  font-family: var(--font-family-headings);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-text-light);
}

.cr-count b { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* =========================================================
   PISTE (défilement natif aimanté)
   ========================================================= */
.cr-track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 1rem calc((100% - var(--cr-w)) / 2) 1.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.cr-track::-webkit-scrollbar { display: none; }
.cr-track:focus-visible { outline: none; }
.cr-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cr-track.is-dragging .cr-card { pointer-events: none; }

.cr-slide {
  flex: 0 0 var(--cr-w);
  margin: 0;
  scroll-snap-align: center;
  transform: scale(.88);
  opacity: .5;
  transition: transform .8s var(--cr-ease), opacity .6s;
}

.cr-slide.is-active { transform: none; opacity: 1; }

/* ---------- Carte ---------- */
.cr-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9.5;
  border-radius: calc(var(--border-radius-lg) * 1.8);
  background: var(--color-secondary);
  color: var(--color-text-white) !important;
  text-decoration: none !important;
  -webkit-user-drag: none;
  user-select: none;
}

.cr-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

/* Image avec parallaxe horizontale selon la position de la carte */
.cr-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(calc(var(--off, 0) * -60px)) scale(1.18);
  transition: transform 1.2s var(--cr-ease);
}

.cr-slide.is-active .cr-card:hover img { transform: translateX(calc(var(--off, 0) * -60px)) scale(1.24); }

.cr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--color-secondary-dark) 88%, transparent) 0%, color-mix(in srgb, var(--color-secondary-dark) 35%, transparent) 45%, transparent 75%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-secondary-dark) 45%, transparent), transparent 60%);
}

/* Grand numéro en contour */
.cr-num {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  left: clamp(1.25rem, 3vw, 2.25rem);
  font-family: var(--font-family-headings);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-text-white) 75%, transparent);
  transition: color .6s, -webkit-text-stroke-color .6s;
}

.cr-slide.is-active .cr-num { color: color-mix(in srgb, var(--color-accent) 85%, transparent); -webkit-text-stroke-color: var(--color-accent); }

/* Contenu : visible sur la carte active */
.cr-body {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 620px;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

.cr-body > * { opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .5s var(--cr-ease); }

.cr-slide.is-active .cr-body > * { opacity: 1; transform: none; transition: opacity .6s, transform .8s var(--cr-ease); }
.cr-slide.is-active .cr-body > :nth-child(1) { transition-delay: .15s; }
.cr-slide.is-active .cr-body > :nth-child(2) { transition-delay: .22s; }
.cr-slide.is-active .cr-body > :nth-child(3) { transition-delay: .3s; }
.cr-slide.is-active .cr-body > :nth-child(4) { transition-delay: .38s; }

.cr-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }

.cr-tags span {
  padding: 0.3rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 35%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
}

.cr-name {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-family-headings);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cr-text { display: block; max-width: 44ch; margin-bottom: 1.2rem; color: color-mix(in srgb, var(--color-text-white) 85%, transparent); }

.cr-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  transition: background-color .3s, color .3s;
}

.cr-cta i { transition: transform .4s var(--cr-ease); }
.cr-card:hover .cr-cta { background: var(--color-surface); color: var(--color-primary); }
.cr-card:hover .cr-cta i { transform: translateX(4px); }

/* =========================================================
   ONGLETS AVEC MINUTERIE
   ========================================================= */
.cr-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.cr-tab {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-base);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-text-light);
  cursor: pointer;
  transition: color .3s;
}

.cr-tab:hover,
.cr-tab.is-active { color: var(--color-secondary); }
.cr-tab:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 4px; border-radius: 2px; }

.cr-tab__bar {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-border);
}

.cr-tab__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
}

.cr-tab.is-active .cr-tab__bar::after { transform: scaleX(1); transition: transform .5s var(--cr-ease); }

/* En lecture automatique, la barre active se remplit sur 5 s */
.crb-cats.is-auto .cr-tab.is-active .cr-tab__bar::after { transform: scaleX(0); transition: none; animation: cr-timer var(--cr-delay) linear forwards; }
.crb-cats.is-auto.is-paused .cr-tab.is-active .cr-tab__bar::after { animation-play-state: paused; }

@keyframes cr-timer { to { transform: scaleX(1); } }

/* =========================================================
   APPARITION (classes posées par le JS)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .crb-cats.cr-js .cr-line > span {
    transform: translateY(105%) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 1.1s var(--cr-ease);
  }
  .crb-cats.cr-js .cr-line:nth-child(2) > span { transition-delay: .12s; }
  .crb-cats.cr-js.is-in .cr-line > span { transform: none; }

  .crb-cats.cr-js .cr-kicker,
  .crb-cats.cr-js .cr-head__side,
  .crb-cats.cr-js .cr-tabs { opacity: 0; transform: translateY(16px); transition: opacity .8s .25s, transform .9s .25s var(--cr-ease); }

  .crb-cats.cr-js.is-in .cr-kicker,
  .crb-cats.cr-js.is-in .cr-head__side,
  .crb-cats.cr-js.is-in .cr-tabs { opacity: 1; transform: none; }

  /* La piste arrive depuis la droite */
  .crb-cats.cr-js .cr-track { opacity: 0; transform: translateX(12vw); transition: opacity 1s .2s, transform 1.4s .2s var(--cr-ease); }
  .crb-cats.cr-js.is-in .cr-track { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-slide,
  .cr-card img,
  .cr-body > * { transition: none !important; }
}

/* =========================================================
   MOBILE ET TABLETTE
   ========================================================= */
@media (max-width: 900px) {
  .crb-cats { --cr-w: 84vw; }
  .cr-head { grid-template-columns: minmax(0, 1fr); }
  .cr-card { aspect-ratio: 4 / 5; }
  .cr-slide { transform: scale(.92); }
  .cr-body { max-width: none; }
  .cr-name { font-size: 2rem; }
  .cr-text { font-size: 0.92rem; }
}

@media (max-width: 700px) {
  /* Onglets réduits à des tirets */
  .cr-tabs { display: flex; justify-content: center; gap: 0.4rem; }
  .cr-tab { width: 2.2rem; }
  .cr-tab.is-active { width: 3.5rem; }
  .cr-tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cr-arrows { justify-content: space-between; }
}

/* =========================================================
   ACCUEIL — GRUMES (v2)
   Ligne WPBakery : .wh-stam-section · Colonne : .wh-stam-card
   Élément Products WoodMart : .wh-stam-product
   Fond crème, cernes de bois en filigrane.
   Animations : accueil-grumes.js
   Remplace entièrement l'ancien bloc « ACCUEIL — STAMMHOLZ »
   ========================================================= */

.wh-stam-section {
  --st-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(5rem, 10vw, 8rem) !important;
  padding-bottom: clamp(5rem, 10vw, 8rem) !important;
  background: var(--color-background-alt) !important;
  font-family: var(--font-family-base);
  color: var(--color-text-base);
}

/* Priorité sur le fond défini dans WPBakery (vc_custom_…) */
.vc_row.wh-stam-section.vc_row-has-fill { background: var(--color-background-alt) !important; }

/* Cernes de bois en filigrane */
.wh-stam-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -22%;
  width: min(950px, 105vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse 50% 47% at 50% 50%,
    transparent 0 24px,
    color-mix(in srgb, var(--color-accent-deep) 8%, transparent) 24px 26px,
    transparent 26px 44px);
  pointer-events: none;
}

.wh-stam-section::after { display: none; }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.wh-stam-section .wh-stam-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.wh-stam-section .wh-stam-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}

.wh-stam-section .wh-stam-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.45rem 1rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.wh-stam-section .wh-stam-kicker i { color: var(--color-accent-deep); }

.wh-stam-section .wh-stam-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-secondary);
}

.wh-stam-section .wh-stam-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.wh-stam-section .wh-stam-line > span { display: inline-block; }
.wh-stam-section .wh-stam-title em { font-style: italic; color: var(--color-primary); }

.wh-stam-section .wh-stam-sub { max-width: 56ch; margin: 0 0 1.5rem; font-size: 1.05rem; line-height: var(--line-height-base); color: var(--color-text-light); }

/* Chiffres */
.wh-stam-section .wh-stam-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.wh-stam-section .wh-stam-facts li {
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  margin: 0;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  transition: border-color .3s, transform .45s var(--st-ease);
}

.wh-stam-section .wh-stam-facts li:hover { border-color: var(--color-accent); transform: translateY(-3px); }

.wh-stam-section .wh-stam-facts strong {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-family-headings);
  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.wh-stam-section .wh-stam-facts strong i { font-size: 1.1rem; color: var(--color-accent-deep); }
.wh-stam-section .wh-stam-facts li > span { margin-top: 0.2rem; font-size: 0.8rem; color: var(--color-text-light); }

/* Bouton */
.wh-stam-section .wh-stam-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white) !important;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: background-color .3s, color .3s, transform .4s var(--st-ease);
}

.wh-stam-section .wh-stam-link i { transition: transform .4s var(--st-ease); }
.wh-stam-section .wh-stam-link:hover { background: var(--color-accent); color: var(--color-on-accent) !important; transform: translateY(-2px); }
.wh-stam-section .wh-stam-link:hover i { transform: translateX(4px); }
.wh-stam-section .wh-stam-link:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* ---------- Illustration : coupe de grume ---------- */
.wh-stam-section .wh-stam-art { margin: 0; }
.wh-stam-section .wh-stam-art svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }

.wh-stam-section .st-shadow { fill: color-mix(in srgb, var(--color-secondary) 12%, transparent); }
.wh-stam-section .st-bark   { fill: color-mix(in srgb, var(--color-accent-deep) 80%, var(--color-secondary)); }
.wh-stam-section .st-face   { fill: color-mix(in srgb, var(--color-accent) 32%, var(--color-surface)); }
.wh-stam-section .st-ring   { fill: none; stroke: color-mix(in srgb, var(--color-accent-deep) 45%, transparent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wh-stam-section .st-pith   { fill: var(--color-accent-deep); }
.wh-stam-section .st-crack  { fill: none; stroke: color-mix(in srgb, var(--color-accent-deep) 55%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.wh-stam-section .st-dust   { fill: var(--color-accent); opacity: .6; }

/* Règle 2 m → 10 m */
.wh-stam-section .wh-stam-ruler { max-width: 300px; margin: 1.25rem auto 0; }

.wh-stam-section .wh-stam-ruler__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.wh-stam-section .wh-stam-ruler__track {
  position: relative;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--color-border) calc(12.5% - 1px) 12.5%),
    var(--color-surface);
  overflow: hidden;
}

/* Le billon s'allonge de 2 à 10 m */
.wh-stam-section .wh-stam-ruler__track span {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 20%;
  border-radius: var(--border-radius-pill);
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--color-accent-deep) 25%, transparent) 9px 10px),
    linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
}

/* Essences */
.wh-stam-section .wh-stam-species {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.wh-stam-section .wh-stam-species li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--st-ease);
}

.wh-stam-section .wh-stam-species li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); }
.wh-stam-section .wh-stam-species li:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); transform: translateY(-2px); }

/* =========================================================
   CARTES PRODUIT
   ========================================================= */
.wh-stam-section .wh-stam-product .product-wrapper {
  padding: 0.6rem 0.6rem 1.1rem;
  border-radius: calc(var(--border-radius-lg) * 1.4);
  background: var(--color-surface);
  transition: transform .5s var(--st-ease);
}

/* Fond agrandi par WoodMart au survol pour afficher la description */
.wh-stam-section .wh-stam-product .content-product-imagin {
  background: var(--color-surface) !important;
  border-radius: calc(var(--border-radius-lg) * 1.4);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-secondary) 6%, transparent);
  transition: box-shadow .5s var(--st-ease);
}

.wh-stam-section .wh-stam-product .wd-product:hover .content-product-imagin {
  box-shadow: 0 26px 50px color-mix(in srgb, var(--color-secondary) 16%, transparent);
}

/* Image */
.wh-stam-section .wh-stam-product .product-element-top {
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--color-background-alt);
}

.wh-stam-section .wh-stam-product .product-image-link img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1s var(--st-ease);
}

.wh-stam-section .wh-stam-product .wd-product:hover .product-image-link img { transform: scale(1.07); }

/* Comparer / liste d'envies */
.wh-stam-section .wh-stam-product .wd-buttons { top: 0.6rem; right: 0.6rem; gap: 0.35rem; background: none; box-shadow: none; }

.wh-stam-section .wh-stam-product .wd-action-btn > a {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: var(--shadow-card);
  transition: background-color .3s, color .3s, transform .3s var(--st-ease);
}

.wh-stam-section .wh-stam-product .wd-action-btn > a:hover { background: var(--color-primary); color: var(--color-text-white); transform: scale(1.08); }

/* Textes : la catégorie est la même pour toutes les cartes, on la masque */
.wh-stam-section .wh-stam-product .wd-product-cats { display: none; }

.wh-stam-section .wh-stam-product .product-element-bottom { padding: 1rem 0.4rem 0; }

.wh-stam-section .wh-stam-product .wd-entities-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: 0.75rem;
  font-family: var(--font-family-headings);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.wh-stam-section .wh-stam-product .wd-entities-title,
.wh-stam-section .wh-stam-product .wd-entities-title a { color: var(--color-secondary) !important; transition: color .25s; }
.wh-stam-section .wh-stam-product .wd-entities-title a:hover { color: var(--color-primary) !important; }

/* Prix : « À partir de » au-dessus, montant en grand */
.wh-stam-section .wh-stam-product .price { display: flex; flex-direction: column; gap: 0.1rem; }

.wh-stam-section .wh-stam-product .price .crb-price-from,
.wh-stam-section .wh-stam-product .price .wh-price-from {
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light) !important;
}

.wh-stam-section .wh-stam-product .price .amount,
.wh-stam-section .wh-stam-product .price bdi {
  color: var(--color-primary) !important;
  font-family: var(--font-family-headings);
  font-size: 1.55rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}

/* Bouton « Choix des options » : contour vert qui se remplit */
.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.9rem;
  border: 1.5px solid var(--color-primary) !important;
  border-radius: var(--border-radius-pill);
  background: transparent !important;
  font-family: var(--font-family-base);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  transition: background-color .3s, border-color .3s;
}

.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop,
.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop span { color: var(--color-primary) !important; transition: color .3s; }

.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop span::after {
  content: "\f061";
  display: inline-block;
  margin-left: 0.5rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8em;
  transition: transform .4s var(--st-ease);
}

.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop:hover { background: var(--color-primary) !important; }
.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop:hover span { color: var(--color-text-white) !important; }
.wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop:hover span::after { transform: translateX(4px); }

/* Description dévoilée au survol */
.wh-stam-section .wh-stam-product .fade-in-block { padding: 0 0.4rem; }

.wh-stam-section .wh-stam-product .wd-more-desc,
.wh-stam-section .wh-stam-product .short-desc-wood { font-size: 0.84rem; line-height: 1.55; color: var(--color-text-light) !important; }

.wh-stam-section .wh-stam-product .short-desc-wood strong { color: var(--color-accent-deep); font-weight: var(--font-weight-semibold); }
.wh-stam-section .wh-stam-product .wd-more-desc-btn { color: var(--color-primary); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Le billon s'allonge en boucle, la coupe tourne lentement, la sciure flotte */
  .wh-stam-section .wh-stam-ruler__track span { animation: st-length 4.5s ease-in-out infinite alternate; }
  .wh-stam-section .st-log { transform-box: fill-box; transform-origin: center; animation: st-turn 60s linear infinite; }
  .wh-stam-section .st-dust { transform-box: fill-box; transform-origin: center; animation: st-dust 5s ease-in-out infinite; }
  .wh-stam-section .st-dust:nth-of-type(2) { animation-delay: 1.6s; }
  .wh-stam-section .st-dust:nth-of-type(3) { animation-delay: 3.2s; }

  /* En-tête révélé à l'arrivée (classes posées par le JS) */
  .wh-stam-section.wh-stam-js .wh-stam-line > span {
    transform: translateY(105%) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 1.1s var(--st-ease);
  }
  .wh-stam-section.wh-stam-js .wh-stam-line:nth-child(2) > span { transition-delay: .12s; }
  .wh-stam-section.wh-stam-js.is-in .wh-stam-line > span { transform: none; }

  .wh-stam-section.wh-stam-js .wh-stam-kicker,
  .wh-stam-section.wh-stam-js .wh-stam-sub,
  .wh-stam-section.wh-stam-js .wh-stam-facts li,
  .wh-stam-section.wh-stam-js .wh-stam-link,
  .wh-stam-section.wh-stam-js .wh-stam-species li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s, transform .9s var(--st-ease);
    transition-delay: calc(.25s + var(--st-i, 0) * .07s);
  }

  .wh-stam-section.wh-stam-js.is-in .wh-stam-kicker,
  .wh-stam-section.wh-stam-js.is-in .wh-stam-sub,
  .wh-stam-section.wh-stam-js.is-in .wh-stam-facts li,
  .wh-stam-section.wh-stam-js.is-in .wh-stam-link,
  .wh-stam-section.wh-stam-js.is-in .wh-stam-species li { opacity: 1; transform: none; }

  /* Les cernes se dessinent du cœur vers l'écorce */
  .wh-stam-section.wh-stam-js .st-ring { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--st-ease); transition-delay: calc(.3s + var(--i, 0) * .12s); }
  .wh-stam-section.wh-stam-js.is-in .st-ring { stroke-dashoffset: 0; }

  .wh-stam-section.wh-stam-js .wh-stam-art { opacity: 0; transform: scale(.85) rotate(-8deg); transition: opacity .9s .15s, transform 1.4s .15s var(--st-ease); }
  .wh-stam-section.wh-stam-js.is-in .wh-stam-art { opacity: 1; transform: none; }

  /* Produits : ils s'empilent comme des grumes, ligne par ligne */
  .wh-stam-section.wh-stam-js .wh-stam-product .wd-product { opacity: 0; }

  .wh-stam-section .wh-stam-product .wd-product.wh-stam-pop {
    opacity: 1;
    animation: st-stack 1s var(--st-ease) backwards;
    animation-delay: calc(var(--st-i, 0) * 100ms);
  }
}

@keyframes st-length { from { width: 20%; } to { width: calc(100% - 4px); } }
@keyframes st-turn   { to { transform: rotate(360deg); } }
@keyframes st-dust   { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(6px, -14px); opacity: .7; } }
@keyframes st-stack  { 0% { opacity: 0; transform: translateY(70px) rotate(-3deg); } 100% { opacity: 1; transform: none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .wh-stam-section .wh-stam-head__grid { grid-template-columns: minmax(0, 1fr); }
  .wh-stam-section .wh-stam-art svg { max-width: 240px; }
}

@media (max-width: 600px) {
  .wh-stam-section .wh-stam-facts li { flex: 1 1 calc(50% - 0.75rem); min-width: 0; }
  .wh-stam-section .wh-stam-link { width: 100%; justify-content: center; }
  .wh-stam-section .wh-stam-product .wd-entities-title { font-size: 0.92rem; }
  .wh-stam-section .wh-stam-product .price .amount,
  .wh-stam-section .wh-stam-product .price bdi { font-size: 1.2rem; }
  .wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop { min-height: 2.5rem; font-size: 0.78rem; }
  .wh-stam-section .wh-stam-product .wd-add-btn-replace .add-to-cart-loop span::after { display: none; }
}

/* =========================================================
   ACCUEIL — POÊLES : SÉLECTION PRODUITS (v2)
   Ligne WPBakery : .wh-paf-section · Colonne : .wh-paf-card
   Onglets WoodMart : .wh-home-card · Carrousel : .wh-paf-product
   En-tête personnalisé : .pf-head
   Bande sombre, cartes blanches.
   Animations : accueil-produits-poeles.js
   Remplace entièrement l'ancien bloc « ACCUEIL — PRODUITS POÊLES »
   ========================================================= */

/* ---------- Réglages + fond ---------- */
.wh-paf-section {
  --pf-ease: cubic-bezier(.22, 1, .36, 1);
  --pf-radius: calc(var(--border-radius-lg) * 1.4);
  --pf-on-dark: color-mix(in srgb, var(--color-text-white) 72%, transparent);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(4.5rem, 9vw, 7rem) !important;
  padding-bottom: clamp(4.5rem, 9vw, 7rem) !important;
  background: var(--color-secondary) !important;
  color: var(--pf-on-dark);
  font-family: var(--font-family-base);
}

/* Priorité sur le fond défini dans WPBakery (vc_custom_…) */
.vc_row.wh-paf-section.vc_row-has-fill { background: var(--color-secondary) !important; }

/* Lueur de braise + fil du bois */
.wh-paf-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 100%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 70%);
  pointer-events: none;
}

.wh-paf-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 28px, color-mix(in srgb, var(--color-text-white) 3%, transparent) 28px 29px);
  pointer-events: none;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.wh-paf-section .pf-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.wh-paf-section .pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.wh-paf-section .pf-eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--color-accent); }

.wh-paf-section .pf-title {
  margin: 0;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-text-white);
}

.wh-paf-section .pf-title em { font-style: italic; color: var(--color-accent); }
.wh-paf-section .pf-reveal { display: block; overflow: hidden; padding-bottom: 0.08em; }
.wh-paf-section .pf-reveal > span { display: inline-block; }

.wh-paf-section .pf-lead { max-width: 48ch; margin: 0 0 1.25rem; font-size: 1.02rem; line-height: var(--line-height-base); }

.wh-paf-section .pf-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wh-paf-section .pf-perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 14%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
}

.wh-paf-section .pf-perks i { color: var(--color-accent); }

/* =========================================================
   ONGLETS WOODMART
   ========================================================= */
.wh-paf-section .wh-home-card .wd-tabs-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: left;
}

/* Le titre WoodMart est remplacé par .pf-head */
.wh-paf-section .wh-home-card .tabs-name { display: none !important; }
.wh-paf-section .wh-home-card .wd-nav-tabs-wrapper { margin: 0; }

.wh-paf-section .wh-home-card .wd-nav-tabs {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 14%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
}

.wh-paf-section .wh-home-card .wd-nav-tabs > li { position: relative; z-index: 1; margin: 0; }

.wh-paf-section .wh-home-card .wd-nav-tabs .wd-nav-link {
  display: block;
  padding: 0.7rem 1.5rem;
  border-radius: var(--border-radius-pill);
  color: var(--pf-on-dark);
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  transition: color .4s var(--pf-ease);
}

.wh-paf-section .wh-home-card .wd-nav-tabs .wd-nav-link::before,
.wh-paf-section .wh-home-card .wd-nav-tabs .wd-nav-link::after { display: none !important; }

.wh-paf-section .wh-home-card .wd-nav-tabs > li:hover .wd-nav-link { color: var(--color-text-white); }
.wh-paf-section .wh-home-card .wd-nav-tabs > li.wd-active .wd-nav-link { color: var(--color-on-accent); }

/* Pastille ocre qui glisse sous l'onglet actif (créée par le JS) */
.wh-paf-section .pf-indicator {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transition: transform .55s var(--pf-ease), width .55s var(--pf-ease);
}

/* Sans JS, l'onglet actif garde un fond plein */
.wh-paf-section .wh-home-card:not(.pf-ready) .wd-nav-tabs > li.wd-active .wd-nav-link { background: var(--color-accent); }

/* =========================================================
   FLÈCHES DU CARROUSEL
   ========================================================= */
.wh-paf-section .wd-nav-arrows .wd-btn-arrow .wd-arrow-inner {
  width: 3rem;
  height: 3rem;
  border: 1.5px solid color-mix(in srgb, var(--color-text-white) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-secondary-dark) 60%, transparent);
  color: var(--color-text-white);
  backdrop-filter: blur(6px);
  transition: background-color .3s var(--pf-ease), border-color .3s var(--pf-ease), color .3s var(--pf-ease), transform .4s var(--pf-ease);
}

.wh-paf-section .wd-nav-arrows .wd-btn-arrow:not(.wd-disabled):hover .wd-arrow-inner {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: scale(1.06);
}

.wh-paf-section .wd-nav-arrows .wd-btn-arrow.wd-disabled .wd-arrow-inner { opacity: .3; }

/* Chargement AJAX au changement d'onglet */
.wh-paf-section .wd-sticky-loader .wd-loader::after { border-color: var(--color-accent); border-right-color: transparent; }

/* =========================================================
   CARTES PRODUIT
   ========================================================= */
.wh-paf-section .wh-home-card .wd-product .product-wrapper {
  height: 100%;
  padding: 0.6rem 0.6rem 1.15rem;
  border-radius: var(--pf-radius);
  background: var(--color-surface);
  transition: transform .5s var(--pf-ease), box-shadow .5s var(--pf-ease);
}

.wh-paf-section .wh-home-card .wd-product:hover .product-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--color-secondary-dark) 55%, transparent);
}

/* Image */
.wh-paf-section .wh-home-card .product-element-top {
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: calc(var(--pf-radius) - 0.4rem);
  background: var(--color-background-alt);
}

.wh-paf-section .wh-home-card .product-image-link img { transition: transform 1s var(--pf-ease); }
.wh-paf-section .wh-home-card .wd-product:hover .product-image-link img { transform: scale(1.05); }

/* Étiquette promo */
.wh-paf-section .wh-home-card .product-labels { top: 0.7rem; left: 0.7rem; }

.wh-paf-section .wh-home-card .product-label.onsale {
  min-width: 0;
  padding: 0.3rem 0.7rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* Boutons (panier, comparer, liste d'envies) */
.wh-paf-section .wh-home-card .wd-buttons { gap: 0.4rem; background: none; box-shadow: none; }

.wh-paf-section .wh-home-card .wd-action-btn > a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  transition: background-color .3s var(--pf-ease), color .3s var(--pf-ease), transform .3s var(--pf-ease);
}

.wh-paf-section .wh-home-card .wd-add-btn.wd-action-btn > a { background: var(--color-primary); color: var(--color-text-white); }
.wh-paf-section .wh-home-card .wd-action-btn > a:hover { background: var(--color-accent); color: var(--color-on-accent); transform: scale(1.08); }

/* Textes : la catégorie est celle de l'onglet, on la masque */
.wh-paf-section .wh-home-card .wd-product-cats { display: none; }

.wh-paf-section .wh-home-card .wd-entities-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0 0.4rem 0.7rem;
  font-family: var(--font-family-headings);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.wh-paf-section .wh-home-card .wd-entities-title a { color: var(--color-secondary); transition: color .25s; }
.wh-paf-section .wh-home-card .wd-entities-title a:hover { color: var(--color-primary); }

/* Prix */
.wh-paf-section .wh-home-card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0 0.4rem;
}

.wh-paf-section .wh-home-card .price > .amount,
.wh-paf-section .wh-home-card .price ins,
.wh-paf-section .wh-home-card .price ins .amount {
  order: -1;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 1.35rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

.wh-paf-section .wh-home-card .price del,
.wh-paf-section .wh-home-card .price del .amount {
  color: var(--color-text-light);
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 1;
}

/* =========================================================
   ANIMATIONS (classes posées par le JS)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .wh-paf-section.pf-js .pf-reveal > span {
    transform: translateY(105%) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 1.1s var(--pf-ease);
  }

  .wh-paf-section.pf-js .pf-reveal:nth-child(2) > span { transition-delay: .12s; }
  .wh-paf-section.pf-js.is-in .pf-reveal > span { transform: none; }

  .wh-paf-section.pf-js .pf-eyebrow,
  .wh-paf-section.pf-js .pf-lead,
  .wh-paf-section.pf-js .pf-perks li,
  .wh-paf-section.pf-js .wd-tabs-header {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--pf-ease), transform .9s var(--pf-ease);
    transition-delay: calc(.25s + var(--pf-i, 0) * .07s);
  }

  .wh-paf-section.pf-js.is-in .pf-eyebrow,
  .wh-paf-section.pf-js.is-in .pf-lead,
  .wh-paf-section.pf-js.is-in .pf-perks li,
  .wh-paf-section.pf-js.is-in .wd-tabs-header { opacity: 1; transform: none; }

  /* Les produits arrivent un par un (à l'apparition et à chaque changement d'onglet) */
  .wh-paf-section.pf-js:not(.is-in) .wd-carousel-item { opacity: 0; }

  .wh-paf-section .wd-carousel-item.pf-pop {
    animation: pf-pop .9s var(--pf-ease) backwards;
    animation-delay: calc(var(--pf-i, 0) * 80ms);
  }
}

@keyframes pf-pop {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .wh-paf-section .pf-head { grid-template-columns: minmax(0, 1fr); }
  .wh-paf-section .wh-home-card .wd-nav-tabs-wrapper { width: 100%; }
  .wh-paf-section .wh-home-card .wd-nav-tabs { display: flex; width: 100%; }
  .wh-paf-section .wh-home-card .wd-nav-tabs > li { flex: 1 1 0; }
  .wh-paf-section .wh-home-card .wd-nav-tabs .wd-nav-link { padding: 0.7rem 0.5rem; text-align: center; }
  .wh-paf-section .wh-home-card .wd-entities-title { font-size: 0.9rem; }
  .wh-paf-section .wh-home-card .price > .amount,
  .wh-paf-section .wh-home-card .price ins,
  .wh-paf-section .wh-home-card .price ins .amount { font-size: 1.1rem; }
}




/* =========================================================
   FICHE PRODUIT (body.single-product) — v2
   Galerie, résumé, panier, badges de confiance (.sp-trust),
   onglet description, produits similaires (.sp-related-head).
   Animations : fiche-produit.js
   Couleurs : uniquement les variables :root du thème
   Remplace l'ancien bloc « FICHE PRODUIT (.single-product) »
   (y compris .wh-trust-badges)
   ========================================================= */

/* ---------- Réglages ---------- */
body.single-product {
  --sp-ease: cubic-bezier(.22, 1, .36, 1);
  --sp-radius: calc(var(--border-radius-lg) * 1.5);
  --sp-radius-sm: var(--border-radius-lg);
}

/* =========================================================
   GALERIE
   ========================================================= */
.single-product .wd-gallery-images .woocommerce-product-gallery__image {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--sp-radius);
  background: var(--color-background-alt);
}

.single-product .wd-gallery-images .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Miniatures verticales */
.single-product .wd-gallery-thumb .wd-carousel-item {
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--sp-radius-sm);
  background: var(--color-background-alt);
  opacity: .55;
  cursor: pointer;
  transition: opacity .3s var(--sp-ease), border-color .3s var(--sp-ease), transform .4s var(--sp-ease);
}

.single-product .wd-gallery-thumb .wd-carousel-item:hover { opacity: 1; transform: translateX(2px); }
.single-product .wd-gallery-thumb .wd-carousel-item.wd-thumb-active { opacity: 1; border-color: var(--color-primary); }
.single-product .wd-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Flèches */
.single-product .wd-gallery-images .wd-nav-arrows .wd-arrow-inner,
.single-product .wd-gallery-thumb .wd-nav-arrows .wd-arrow-inner {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: var(--shadow-card);
  transition: background-color .3s var(--sp-ease), color .3s var(--sp-ease);
}

.single-product .wd-gallery-images .wd-nav-arrows .wd-btn-arrow:not(.wd-disabled):hover .wd-arrow-inner,
.single-product .wd-gallery-thumb .wd-nav-arrows .wd-btn-arrow:not(.wd-disabled):hover .wd-arrow-inner {
  background: var(--color-primary);
  color: var(--color-text-white);
}

/* Bouton « agrandir » */
.single-product .wd-gallery-btn > a {
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: var(--shadow-card);
  transition: background-color .3s var(--sp-ease), color .3s var(--sp-ease);
}

.single-product .wd-gallery-btn > a:hover { background: var(--color-primary); color: var(--color-text-white); }

/* =========================================================
   FIL D'ARIANE + NAVIGATION PRODUIT
   ========================================================= */
.single-product .wd-breadcrumbs { font-size: 0.82rem; color: var(--color-text-light); }
.single-product .wd-breadcrumbs a { color: var(--color-text-light); transition: color .25s; }
.single-product .wd-breadcrumbs a:hover { color: var(--color-primary); }
.single-product .wd-breadcrumbs .wd-last { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }

.single-product .wd-products-nav .wd-product-nav-btn {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-secondary);
  transition: border-color .25s var(--sp-ease), background-color .25s var(--sp-ease), color .25s var(--sp-ease);
}

.single-product .wd-products-nav .wd-product-nav-btn:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }
.single-product .wd-products-nav .wd-dropdown { border-radius: var(--sp-radius-sm); box-shadow: var(--shadow-card); }

/* =========================================================
   TITRE + PRIX
   ========================================================= */
.single-product .product_title {
  margin-bottom: 0.9rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-secondary);
}

.single-product .wd-single-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  margin: 0 0 1.4rem;
}

.single-product .wd-single-price .price > .amount,
.single-product .wd-single-price .price ins,
.single-product .wd-single-price .price ins .amount,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .amount {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.single-product .wd-single-price .price ins { order: -1; }

.single-product .wd-single-price .price del,
.single-product .wd-single-price .price del .amount {
  color: var(--color-text-light);
  font-size: 1.05rem;
  font-weight: 400;
  opacity: 1;
}

/* Mention sous le prix */
.single-product .wd-single-price .price::after {
  content: "TTC · Livraison offerte";
  flex-basis: 100%;
  font-family: var(--font-family-base);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-light);
}

.single-product .wd-single-price .crb-price-from { font-size: 0.95rem; font-weight: 400; color: var(--color-text-light); }

/* =========================================================
   COURTE DESCRIPTION
   ========================================================= */
.single-product .woocommerce-product-details__short-description {
  margin-bottom: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-base);
}

.single-product .woocommerce-product-details__short-description > p:first-child {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  color: var(--color-secondary);
}

.single-product .woocommerce-product-details__short-description ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.15rem;
  list-style: none;
  border-radius: var(--sp-radius-sm);
  background: var(--color-background-alt);
}

.single-product .woocommerce-product-details__short-description li {
  position: relative;
  margin: 0;
  padding-left: 1.85rem;
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.single-product .woocommerce-product-details__short-description li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.6rem;
}

.single-product .woocommerce-product-details__short-description li p { margin: 0; }
.single-product .woocommerce-product-details__short-description strong { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

/* =========================================================
   QUANTITÉ + PANIER
   ========================================================= */
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.single-product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
}

.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .25s var(--sp-ease), color .25s var(--sp-ease);
}

.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover { background: var(--color-primary-light); color: var(--color-primary); }

.single-product form.cart .quantity .qty {
  width: 3rem;
  height: 2.6rem;
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  box-shadow: none;
}

.single-product .single_add_to_cart_button.button {
  position: relative;
  overflow: hidden;
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transition: background-color .3s var(--sp-ease), color .3s var(--sp-ease), transform .4s var(--sp-ease);
}

.single-product .single_add_to_cart_button.button::before {
  content: "\f217";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
}

/* Reflet qui balaie le bouton de temps en temps */
.single-product .single_add_to_cart_button.button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--color-text-white) 28%, transparent), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.single-product .single_add_to_cart_button.button:hover { background: var(--color-accent); color: var(--color-on-accent); transform: translateY(-2px); }
.single-product .single_add_to_cart_button.button:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.single-product .single_add_to_cart_button.button.disabled { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* =========================================================
   BADGES DE CONFIANCE (.sp-trust)
   ========================================================= */
.sp-trust { margin: 1.6rem 0; }

/* Date de livraison estimée */
.sp-eta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--sp-radius-sm);
  background: var(--color-accent-light);
  font-size: 0.92rem;
  color: var(--color-secondary);
}

.sp-eta > i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.sp-eta > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.4rem; }
.sp-eta strong { font-weight: var(--font-weight-bold); color: var(--color-primary); }
.sp-eta small { flex-basis: 100%; font-size: 0.78rem; color: var(--color-text-light); }

/* Grille 2 × 2 */
.sp-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--sp-radius-sm);
  background: var(--color-surface);
  transition: border-color .3s var(--sp-ease), transform .45s var(--sp-ease), box-shadow .45s var(--sp-ease);
}

.sp-trust__item:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.sp-trust__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.95rem;
  transition: background-color .3s var(--sp-ease), color .3s var(--sp-ease), transform .5s var(--sp-ease);
}

.sp-trust__item:hover .sp-trust__icon { background: var(--color-primary); color: var(--color-text-white); transform: rotate(-8deg); }

.sp-trust__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sp-trust__text strong { font-size: 0.9rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.sp-trust__text > span { font-size: 0.8rem; line-height: 1.45; color: var(--color-text-light); }

.sp-trust__text a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

/* Méta (référence, catégorie) */
.single-product .product_meta {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.single-product .product_meta .meta-label { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }
.single-product .product_meta a { color: var(--color-primary); }

/* =========================================================
   ONGLETS + DESCRIPTION
   ========================================================= */
.single-product .woocommerce-tabs .wd-nav-tabs .wd-nav-link {
  font-family: var(--font-family-headings);
  font-size: 1.35rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-light);
}

.single-product .woocommerce-tabs .wd-nav-tabs li.active .wd-nav-link { color: var(--color-primary); }
.single-product .woocommerce-tabs .wd-nav-tabs .wd-nav-link::after { height: 3px; border-radius: 3px; background-color: var(--color-accent); }

.single-product .product-description {
  max-width: 920px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-base);
}

.single-product .product-description > p { margin: 0 0 1.15rem; }
.single-product .product-description strong { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.single-product .product-description h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.75rem 0 1.1rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-secondary);
}

.single-product .product-description h3::before {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* Tableau technique */
.single-product .tech-specs-table {
  width: 100%;
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sp-radius-sm);
  font-size: 0.93rem;
}

.single-product .tech-specs-table td {
  padding: 0.85rem 1.15rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  transition: background-color .25s var(--sp-ease);
}

.single-product .tech-specs-table tr:last-child td { border-bottom: 0; }
.single-product .tech-specs-table tr:nth-child(odd) td { background: var(--color-background-alt); }
.single-product .tech-specs-table tr:hover td { background: var(--color-primary-light); }
.single-product .tech-specs-table td:first-child { width: 42%; color: var(--color-text-light); }
.single-product .tech-specs-table td:last-child { color: var(--color-secondary); }

/* Avantages en grille de cartes */
.single-product .advantages-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .advantages-list li {
  position: relative;
  margin: 0;
  padding: 1rem 1.1rem 1rem 3.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--sp-radius-sm);
  background: var(--color-surface);
  font-size: 0.93rem;
  line-height: 1.55;
  transition: border-color .3s var(--sp-ease), transform .45s var(--sp-ease);
}

.single-product .advantages-list li:hover { border-color: var(--color-accent); transform: translateY(-2px); }

.single-product .advantages-list li::before {
  content: "\f00c";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.65rem;
}

/* Conseils d'utilisation */
.single-product .usage-tips {
  position: relative;
  margin: 0;
  padding: 1.25rem 1.4rem 1.25rem 4rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--sp-radius-sm);
  background: var(--color-accent-light);
  color: var(--color-text-base);
}

.single-product .usage-tips::before {
  content: "\f0eb";
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
}

/* =========================================================
   PRODUITS SIMILAIRES
   ========================================================= */
.sp-related-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.sp-eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--color-accent); }

.sp-related-title {
  margin: 0;
  font-family: var(--font-family-headings);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.sp-related-title em { font-style: italic; color: var(--color-primary); }

/* Si l'élément Titre WoodMart est conservé */
.single-product .title-wrapper .woodmart-title-container {
  font-family: var(--font-family-headings);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-secondary);
}

/* Flèches et puces du carrousel */
.single-product .wd-products-element .wd-nav-arrows .wd-arrow-inner {
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: var(--shadow-card);
  transition: background-color .3s var(--sp-ease), border-color .3s var(--sp-ease), color .3s var(--sp-ease);
}

.single-product .wd-products-element .wd-nav-arrows .wd-btn-arrow:not(.wd-disabled):hover .wd-arrow-inner { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }
.single-product .wd-products-element .wd-nav-arrows .wd-btn-arrow.wd-disabled .wd-arrow-inner { opacity: .35; }

.single-product .wd-nav-pagin-item span { background: var(--color-border); transition: width .4s var(--sp-ease), background-color .3s; }
.single-product .wd-nav-pagin-item.wd-active span { width: 26px; border-radius: 99px; background: var(--color-primary); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Arrivée : la galerie se dévoile, le résumé monte élément par élément */
  .single-product .wd-single-gallery { animation: sp-reveal 1.1s var(--sp-ease) both; }

  .single-product .wd-el-breadcrumbs,
  .single-product .wd-single-title,
  .single-product .wd-single-price,
  .single-product .wd-single-short-desc,
  .single-product .wd-single-add-cart,
  .single-product .sp-trust,
  .single-product .wd-single-meta { animation: sp-rise .8s var(--sp-ease) both; }

  .single-product .wd-single-title      { animation-delay: .08s; }
  .single-product .wd-single-price      { animation-delay: .16s; }
  .single-product .wd-single-short-desc { animation-delay: .24s; }
  .single-product .wd-single-add-cart   { animation-delay: .32s; }
  .single-product .sp-trust             { animation-delay: .4s; }
  .single-product .wd-single-meta       { animation-delay: .48s; }

  /* Reflet sur le bouton panier toutes les 5 s */
  .single-product .single_add_to_cart_button.button::after { animation: sp-shine 5s ease-in-out 1.5s infinite; }

  /* Description : apparitions au défilement (attribut posé par le JS) */
  .single-product.sp-js [data-sp-r] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--sp-ease), transform .8s var(--sp-ease);
    transition-delay: var(--sp-d, 0s);
  }

  .single-product.sp-js [data-sp-r].is-in { opacity: 1; transform: none; }

  /* Le calendrier de livraison se balance une fois */
  .sp-eta:not([hidden]) > i { animation: sp-swing 1.2s var(--sp-ease) .9s both; }
}

@keyframes sp-rise   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sp-reveal { from { opacity: 0; clip-path: inset(8% 8% 8% 8% round 24px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes sp-shine  { 0%, 75% { left: -60%; } 100% { left: 130%; } }
@keyframes sp-swing  { 0% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
  .sp-trust__grid,
  .single-product .advantages-list { grid-template-columns: minmax(0, 1fr); }
  .single-product .single_add_to_cart_button.button { flex-basis: 100%; }
  .single-product .tech-specs-table td { display: block; width: 100% !important; }
  .single-product .tech-specs-table td:first-child { padding-bottom: 0.2rem; border-bottom: 0; font-size: 0.82rem; }
  .single-product .usage-tips { padding: 3.75rem 1.1rem 1.1rem; }
}


/* =========================================================
   DESCRIPTIONS DES CATÉGORIES (.crb-catdesc) — un seul CSS
   Poêles à bois · Poêles à granulés · Bois de chauffage · Granulés
   Blocs : en-tête, avantages, guide de puissance, critères,
   essences, valeurs de norme, marques, étapes, FAQ, contact.
   Animations : categories.js
   Couleurs : uniquement les variables :root du thème
   Remplace l'ancien bloc « DESCRIPTIONS DES CATÉGORIES (.wh-catdesc) »
   ========================================================= */

/* ---------- Réglages ---------- */
.crb-catdesc {
  --cd-ease: cubic-bezier(.22, 1, .36, 1);
  --cd-gap: clamp(2rem, 5vw, 4.5rem);
  --cd-radius: calc(var(--border-radius-lg) * 1.5);

  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.crb-catdesc *,
.crb-catdesc *::before,
.crb-catdesc *::after { box-sizing: border-box; }

/* WordPress ajoute des <p> vides et des <br> dans les descriptions */
.crb-catdesc br { display: none; }
.crb-catdesc p:empty { display: none; }
.wd-term-desc.wd-entry-content:has(.crb-catdesc) { max-width: none; }

.crb-catdesc p { margin: 0; }

.crb-catdesc a:not([class]) {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: color .25s var(--cd-ease);
}

.crb-catdesc a:not([class]):hover { color: var(--color-accent-deep); }
.crb-catdesc a:focus-visible,
.crb-catdesc summary:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* ---------- Titres de blocs ---------- */
.cd-block { margin-top: clamp(4rem, 9vw, 7rem); }

.cd-h2 {
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.cd-h2 em { font-style: italic; color: var(--color-primary); }

.cd-intro { max-width: 62ch; margin-bottom: 2rem !important; font-size: 1.05rem; color: var(--color-text-light); }
.cd-note { max-width: 70ch; margin-top: 1.25rem !important; font-size: 0.85rem; color: var(--color-text-light); }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.cd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--cd-gap);
}

.cd-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.45rem 1rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
}

.cd-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-secondary);
}

.cd-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.cd-line > span { display: inline-block; }
.cd-title em { font-style: italic; color: var(--color-primary); }

.cd-lead { max-width: 52ch; margin-bottom: 1.75rem !important; font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--color-text-light); }

/* Chiffres clés */
.cd-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 34rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.cd-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}

.cd-facts strong {
  font-family: var(--font-family-headings);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-primary);
}

.cd-facts span { font-size: 0.8rem; color: var(--color-text-light); }

/* Labels et normes */
.cd-seals { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.cd-seals__label {
  margin-right: 0.25rem;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.cd-seals img {
  width: 46px;
  height: 46px;
  padding: 4px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform .5s var(--cd-ease);
}

.cd-seals img:hover { transform: rotate(-8deg) scale(1.1); }

.cd-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.cd-seal i { color: var(--color-primary); }

/* Image */
.cd-hero__media { position: relative; margin: 0; }

.cd-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: calc(var(--border-radius-lg) * 2);
  background: var(--color-background-alt);
  box-shadow: 0 40px 80px color-mix(in srgb, var(--color-secondary) 16%, transparent);
}

.cd-badge {
  position: absolute;
  left: -1.5rem;
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--cd-radius);
  background: var(--color-surface);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-secondary) 16%, transparent);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text-light);
}

.cd-badge i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
}

.cd-badge span { display: flex; flex-direction: column; }
.cd-badge strong { font-size: 0.95rem; color: var(--color-secondary); }

/* =========================================================
   AVANTAGES
   ========================================================= */
.cd-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.cd-benefit {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--cd-radius);
  background: var(--color-surface);
  transition: transform .5s var(--cd-ease), border-color .4s var(--cd-ease), box-shadow .5s var(--cd-ease);
}

/* Trait ocre qui s'étire en haut au survol */
.cd-benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--cd-ease);
}

.cd-benefit:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow-card); }
.cd-benefit:hover::before { transform: scaleX(1); }

.cd-benefit__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1.1rem;
  transition: background-color .4s var(--cd-ease), color .4s var(--cd-ease), transform .6s var(--cd-ease);
}

.cd-benefit:hover .cd-benefit__icon { background: var(--color-primary); color: var(--color-text-white); transform: rotate(-10deg) scale(1.06); }

.cd-benefit h3 { margin: 0 0 0.5rem; font-family: var(--font-family-headings); font-size: 1.15rem; font-weight: var(--font-weight-semibold); line-height: 1.25; color: var(--color-secondary); }
.cd-benefit p { font-size: 0.92rem; color: var(--color-text-light); }

/* =========================================================
   DEUX COLONNES : GUIDE DE PUISSANCE + CRITÈRES
   ========================================================= */
.cd-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-gap); }

/* Guide : barre de plage sur une échelle de 0 à 12 kW */
.cd-guide { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--cd-radius); background: var(--color-surface); }

.cd-guide__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.cd-guide__row--head {
  border-top: 0;
  background: var(--color-background-alt);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.cd-guide__room { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.cd-guide__kw {
  font-family: var(--font-family-headings);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-primary);
}

.cd-guide__bar {
  position: relative;
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 6px;
  background: var(--color-background-alt);
}

.cd-guide__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) / 12 * 100%);
  width: calc((var(--to) - var(--from)) / 12 * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  transform-origin: left;
  transition: transform 1.1s var(--cd-ease) .2s;
}

/* Critères */
.cd-features { display: grid; gap: 0.9rem; }

.cd-feature {
  padding: 1.2rem 1.35rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--cd-radius) var(--cd-radius) 0;
  background: var(--color-background-alt);
  transition: transform .45s var(--cd-ease), background-color .3s var(--cd-ease);
}

.cd-feature:hover { transform: translateX(6px); background: var(--color-accent-light); }

.cd-feature h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-family-headings);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.cd-feature h3 i { font-size: 0.95rem; color: var(--color-accent-deep); }
.cd-feature p { font-size: 0.92rem; color: var(--color-text-light); }

/* =========================================================
   ESSENCES (barres de pouvoir calorifique)
   ========================================================= */
.cd-woods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 3rem; }

.cd-wood { padding: 1.15rem 0; border-top: 1px solid var(--color-border); }

.cd-wood__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.cd-wood h3 { margin: 0; font-family: var(--font-family-headings); font-size: 1.3rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.cd-wood__val { font-size: 0.85rem; font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-primary); }

.cd-wood__bar {
  height: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-primary-light);
}

.cd-wood__bar span {
  display: block;
  height: 100%;
  width: calc(var(--v) / 2200 * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  transition: width 1.4s var(--cd-ease) .2s;
}

.cd-wood p { font-size: 0.92rem; color: var(--color-text-light); }

/* =========================================================
   VALEURS DE NORME + MARQUES (granulés)
   ========================================================= */
.cd-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.cd-spec {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--cd-radius);
  background: var(--color-primary);
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--color-text-white) 78%, transparent);
}

.cd-spec strong {
  font-family: var(--font-family-headings);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-white);
}

.cd-spec:nth-child(even) { background: var(--color-accent-light); color: var(--color-accent-deep); }
.cd-spec:nth-child(even) strong { color: var(--color-primary); }

.cd-brands { margin-top: 2rem; }
.cd-brands h3 { margin: 0 0 0.9rem; font-family: var(--font-family-headings); font-size: 1.1rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.cd-brands ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.cd-brands li {
  margin: 0;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  transition: border-color .3s var(--cd-ease), color .3s var(--cd-ease), transform .4s var(--cd-ease);
}

.cd-brands li:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* =========================================================
   ÉTAPES
   ========================================================= */
.cd-steps {
  --p: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* Rail qui relie les numéros */
.cd-steps::before,
.cd-steps::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: calc(100% / var(--n) - 1.5rem);
  height: 2px;
  background: var(--color-border);
}

.cd-steps::after {
  background: var(--color-primary);
  transform-origin: left;
  transform: scaleX(var(--p));
  transition: transform 1.8s var(--cd-ease) .3s;
}

.cd-steps li { position: relative; z-index: 1; margin: 0; }

.cd-steps__num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-family-headings);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 0 6px var(--color-background);
  transition: transform .7s var(--cd-ease);
}

.cd-steps h3 { margin: 0 0 0.4rem; font-family: var(--font-family-headings); font-size: 1.15rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.cd-steps p { font-size: 0.92rem; color: var(--color-text-light); }

/* =========================================================
   FAQ
   ========================================================= */
.cd-faq { max-width: 880px; }

.cd-faq__list { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.cd-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--cd-radius);
  background: var(--color-surface);
  interpolate-size: allow-keywords;
  transition: border-color .4s var(--cd-ease), background-color .4s var(--cd-ease);
}

.cd-faq__item[open] { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); background: var(--color-background-alt); }

.cd-faq__item summary {
  position: relative;
  display: block;
  padding: 1.15rem 4rem 1.15rem 1.35rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-family-headings);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-secondary);
  transition: color .3s var(--cd-ease);
}

.cd-faq__item summary::-webkit-details-marker { display: none; }
.cd-faq__item summary:hover,
.cd-faq__item[open] summary { color: var(--color-primary); }

/* Icône + / − */
.cd-faq__item summary::before,
.cd-faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform .45s var(--cd-ease);
}

.cd-faq__item summary::after { transform: rotate(90deg); }
.cd-faq__item[open] summary::after { transform: rotate(0); }

/* Ouverture fluide (navigateurs récents) */
.cd-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s var(--cd-ease), content-visibility .45s allow-discrete;
}

.cd-faq__item[open]::details-content { block-size: auto; }

.cd-faq__a { padding: 0 1.35rem 1.25rem; color: var(--color-text-light); }
.cd-faq__a p + p { margin-top: 0.75rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.cd-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  margin: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: calc(var(--border-radius-lg) * 2);
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
}

.cd-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -60%;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14px, color-mix(in srgb, var(--color-text-white) 7%, transparent) 14px 16px);
}

.cd-cta h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  color: var(--color-text-white);
}

.cd-cta p { max-width: 52ch; }
.cd-cta__actions { display: flex; flex-direction: column; gap: 0.6rem; }

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-pill);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color .3s var(--cd-ease), color .3s var(--cd-ease), border-color .3s var(--cd-ease), transform .4s var(--cd-ease);
}

.cd-btn:hover { transform: translateY(-2px); }
.cd-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cd-btn--light { background: var(--color-surface); color: var(--color-primary); }
.cd-btn--light:hover { background: var(--color-accent); color: var(--color-on-accent); }
.cd-btn--outline { border-color: color-mix(in srgb, var(--color-text-white) 40%, transparent); color: var(--color-text-white); }
.cd-btn--outline:hover { border-color: var(--color-surface); background: var(--color-surface); color: var(--color-primary); }

/* =========================================================
   ANIMATIONS (classes posées par categories.js)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .crb-catdesc.cd-js [data-cd] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--cd-ease), transform .9s var(--cd-ease);
    transition-delay: var(--cd-d, 0s);
  }

  .crb-catdesc.cd-js [data-cd].is-in { opacity: 1; transform: none; }

  /* Titre : les lignes montent derrière un masque */
  .crb-catdesc.cd-js .cd-title[data-cd] { opacity: 1; transform: none; }
  .crb-catdesc.cd-js .cd-title .cd-line > span { transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--cd-ease); }
  .crb-catdesc.cd-js .cd-title .cd-line:nth-child(2) > span { transition-delay: .12s; }
  .crb-catdesc.cd-js .cd-title.is-in .cd-line > span { transform: none; }

  /* Image : dévoilée de bas en haut, le badge arrive puis flotte */
  .crb-catdesc.cd-js .cd-hero__media[data-cd] { opacity: 1; transform: none; }
  .crb-catdesc.cd-js .cd-hero__media img { clip-path: inset(100% 0 0 0 round 24px); transform: scale(1.08); transition: clip-path 1.4s var(--cd-ease), transform 1.8s var(--cd-ease); }
  .crb-catdesc.cd-js .cd-hero__media.is-in img { clip-path: inset(0 0 0 0 round 24px); transform: none; }
  .crb-catdesc.cd-js .cd-badge { opacity: 0; translate: -30px 0; transition: opacity .8s .9s, translate 1s .9s var(--cd-ease); }
  .crb-catdesc.cd-js .cd-hero__media.is-in .cd-badge { opacity: 1; translate: 0 0; animation: cd-float 5s ease-in-out 2s infinite; }

  /* Barres : elles se remplissent à l'apparition */
  .crb-catdesc.cd-js .cd-guide__row:not(.is-in) .cd-guide__bar span { transform: scaleX(0); }
  .crb-catdesc.cd-js .cd-wood:not(.is-in) .cd-wood__bar span { width: 0; }

  /* Étapes : le rail se dessine, les numéros apparaissent */
  .crb-catdesc.cd-js .cd-steps { --p: 0; }
  .crb-catdesc.cd-js .cd-steps.is-drawn { --p: 1; }
  .crb-catdesc.cd-js .cd-steps li:not(.is-in) .cd-steps__num { transform: scale(0); }

  /* FAQ : la réponse glisse à l'ouverture */
  .cd-faq__item[open] .cd-faq__a { animation: cd-open .5s var(--cd-ease); }
}

@keyframes cd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cd-open  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .cd-benefits,
  .cd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .cd-hero,
  .cd-split,
  .cd-cta,
  .cd-woods { grid-template-columns: minmax(0, 1fr); }
  .cd-hero__media { max-width: 460px; }
  .cd-badge { left: 0.75rem; bottom: 1rem; }

  /* Étapes à la verticale */
  .cd-steps { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-left: 4rem; }
  .cd-steps::before,
  .cd-steps::after { top: 1.5rem; bottom: 1.5rem; left: 1.45rem; right: auto; width: 2px; height: auto; }
  .cd-steps::after { transform-origin: top; transform: scaleY(var(--p)); }
  .cd-steps__num { position: absolute; left: -4rem; top: 0; }
  .cd-steps h3 { padding-top: 0.6rem; }
}

@media (max-width: 560px) {
  .cd-benefits { grid-template-columns: minmax(0, 1fr); }
  .cd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .cd-facts li { padding: 0.75rem 0.6rem; }
  .cd-facts strong { font-size: 1.15rem; }
  .cd-faq__item summary { font-size: 1rem; }
  .cd-cta__actions .cd-btn { width: 100%; }
}

/* =========================================================
   PAGE CATÉGORIE / BOUTIQUE (archive produits WoodMart)
   body.tax-product_cat · body.post-type-archive-product
   En-tête image, barre d'outils, grille produits, pagination,
   zone de description (.crb-catdesc, voir categories.css).
   Animations : page-categorie.js
   Couleurs : uniquement les variables :root du thème
   Remplace l'ancien bloc « PAGE CATÉGORIE (archive produits WoodMart) »
   ========================================================= */

/* ---------- Réglages ---------- */
body.tax-product_cat,
body.post-type-archive-product {
  --pc-ease: cubic-bezier(.22, 1, .36, 1);
  --pc-radius: calc(var(--border-radius-lg) * 1.4);
}

/* =========================================================
   EN-TÊTE : image de fond + titre en blanc
   (ligne WPBakery qui contient le titre de page)
   ========================================================= */
:is(.tax-product_cat, .post-type-archive-product) .vc_row.vc_row-has-fill:not(.vc_inner):has(.wd-woo-page-title) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 30vw, 380px);
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
  padding-top: clamp(4rem, 8vw, 6rem) !important;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  background-color: var(--color-secondary-dark) !important;
}

/* Voile de lisibilité */
:is(.tax-product_cat, .post-type-archive-product) .vc_row.vc_row-has-fill:not(.vc_inner):has(.wd-woo-page-title)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--color-secondary-dark) 88%, transparent) 0%, color-mix(in srgb, var(--color-secondary-dark) 35%, transparent) 60%, color-mix(in srgb, var(--color-secondary-dark) 20%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 70%);
}

/* Liseré vert + ocre en bas */
:is(.tax-product_cat, .post-type-archive-product) .vc_row.vc_row-has-fill:not(.vc_inner):has(.wd-woo-page-title)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

:is(.tax-product_cat, .post-type-archive-product) .vc_row.vc_row-has-fill:not(.vc_inner):has(.wd-woo-page-title) > .wpb_column { width: 100%; }

/* La carte blanche de WoodMart devient transparente */
:is(.tax-product_cat, .post-type-archive-product) .vc_inner.vc_row-has-fill:has(.wd-woo-page-title) {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.tax-product_cat, .post-type-archive-product) .vc_inner:has(.wd-woo-page-title) .wpb_wrapper {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 0.9rem;
}

:is(.tax-product_cat, .post-type-archive-product) .wd-woo-page-title { margin: 0 !important; }

:is(.tax-product_cat, .post-type-archive-product) .wd-woo-page-title .title {
  margin: 0;
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--color-text-white);
}

/* Fil d'Ariane en pilule vitrée */
:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs { order: -1; margin: 0 !important; text-align: left !important; }

:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs .wd-breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 22%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--color-text-white) 75%, transparent);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs a { color: color-mix(in srgb, var(--color-text-white) 75%, transparent); transition: color .25s; }
:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs a:hover { color: var(--color-accent); }
:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs .wd-last { color: var(--color-text-white); font-weight: var(--font-weight-semibold); }
:is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs .wd-delimiter::after { color: color-mix(in srgb, var(--color-text-white) 45%, transparent); }

/* =========================================================
   BARRE D'OUTILS : résultats, par page, vue, tri, filtres
   ========================================================= */
:is(.tax-product_cat, .post-type-archive-product) .vc_inner.vc_row-flex:has(.wd-shop-ordering) {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem) !important;
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background: var(--color-surface);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-secondary) 5%, transparent);
}

:is(.tax-product_cat, .post-type-archive-product) .vc_inner.vc_row-flex:has(.wd-shop-ordering) .vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

:is(.tax-product_cat, .post-type-archive-product) .woocommerce-result-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

:is(.tax-product_cat, .post-type-archive-product) .woocommerce-result-count::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Produits par page */
:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-background-alt);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page .per-page-title { padding: 0 0.5rem; font-size: 0.78rem; color: var(--color-text-light); }
:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page .per-page-border { display: none; }

:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page .per-page-variation {
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: var(--border-radius-pill);
  color: var(--color-secondary);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  transition: background-color .25s var(--pc-ease), color .25s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page .per-page-variation:hover { background: var(--color-primary-light); color: var(--color-primary); }
:is(.tax-product_cat, .post-type-archive-product) .wd-products-per-page .per-page-variation.current-variation { background: var(--color-primary); color: var(--color-text-white); }

/* Affichage grille / liste */
:is(.tax-product_cat, .post-type-archive-product) .wd-products-shop-view { display: inline-flex; gap: 0.15rem; }

:is(.tax-product_cat, .post-type-archive-product) .wd-products-shop-view .shop-view {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: var(--color-text-light);
  transition: background-color .25s var(--pc-ease), color .25s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-products-shop-view .shop-view:hover { background: var(--color-primary-light); color: var(--color-primary); }
:is(.tax-product_cat, .post-type-archive-product) .wd-products-shop-view .shop-view.current-variation { background: var(--color-primary); color: var(--color-text-white); }

/* Tri */
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-ordering select.orderby {
  min-height: 2.6rem;
  padding: 0.45rem 2.4rem 0.45rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-pill);
  background-color: var(--color-background-alt);
  color: var(--color-secondary);
  font-family: var(--font-family-base);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color .25s var(--pc-ease), background-color .25s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .woocommerce-ordering select.orderby:hover,
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-ordering select.orderby:focus { border-color: var(--color-primary); background-color: var(--color-surface); outline: none; }

/* Bouton « filtres » (mobile et tablette) */
:is(.tax-product_cat, .post-type-archive-product) .wd-off-canvas-btn > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-off-canvas-btn > a::before { color: var(--color-text-white); }

/* =========================================================
   CARTES PRODUIT (survol « bouton pleine largeur + fondu »)
   ========================================================= */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product .product-wrapper {
  padding: 0.6rem 0.6rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--pc-radius);
  background: var(--color-surface);
  box-shadow: none;
  transition: border-color .4s var(--pc-ease);
}

/* Fond agrandi par WoodMart au survol pour afficher la description */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product .content-product-imagin {
  border: 1px solid var(--color-primary);
  border-radius: var(--pc-radius);
  background: var(--color-surface) !important;
  box-shadow: 0 26px 50px color-mix(in srgb, var(--color-secondary) 16%, transparent);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-products-with-shadow .wd-product .product-wrapper { box-shadow: none; }
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product:hover .product-wrapper { border-color: transparent; }

/* Image */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product .product-element-top {
  overflow: hidden;
  border-radius: calc(var(--pc-radius) - 0.4rem);
  background: var(--color-background-alt);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product .product-image-link img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product:hover .product-image-link img { transform: scale(1.06); }

/* Étiquette promo */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .product-label.onsale {
  min-width: 0;
  padding: 0.3rem 0.7rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
}

/* Comparer / liste d'envies */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-buttons { top: 0.6rem; right: 0.6rem; gap: 0.35rem; background: none; box-shadow: none; }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-action-btn > a {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  transition: background-color .3s var(--pc-ease), color .3s var(--pc-ease), transform .3s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-action-btn > a:hover { background: var(--color-primary); color: var(--color-text-white); transform: scale(1.08); }

/* Textes : la catégorie est celle de la page, on la masque */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product-cats { display: none; }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .product-element-bottom { padding: 1rem 0.4rem 0; }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-entities-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: 0.75rem;
  font-family: var(--font-family-headings);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-entities-title a { color: var(--color-secondary); transition: color .25s; }
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-entities-title a:hover { color: var(--color-primary); }

/* Prix */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price .crb-price-from {
  flex-basis: 100%;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price > .amount,
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price ins,
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price ins .amount {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price del,
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price del .amount { color: var(--color-text-light); font-size: 0.85rem; font-weight: 400; opacity: 1; }

/* Bouton « Choix des options » / « Ajouter au panier » */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.9rem;
  border: 1.5px solid var(--color-primary) !important;
  border-radius: var(--border-radius-pill);
  background: transparent !important;
  font-family: var(--font-family-base);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .3s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop,
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop span { color: var(--color-primary) !important; transition: color .3s var(--pc-ease); }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop span::after {
  content: "\f061";
  display: inline-block;
  margin-left: 0.5rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8em;
  transition: transform .4s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop:hover { background: var(--color-primary) !important; }
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop:hover span { color: var(--color-text-white) !important; }
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop:hover span::after { transform: translateX(4px); }

/* Description dévoilée au survol */
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .fade-in-block { padding: 0 0.4rem; }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-more-desc,
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .short-desc-wood { font-size: 0.84rem; line-height: 1.55; color: var(--color-text-light); }

:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .short-desc-wood strong { font-weight: var(--font-weight-semibold); color: var(--color-accent-deep); }
:is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-more-desc-btn { color: var(--color-primary); }

/* Chargement AJAX (tri, filtres, pagination) */
:is(.tax-product_cat, .post-type-archive-product) .wd-sticky-loader .wd-loader::after { border-color: var(--color-primary); border-right-color: transparent; }

/* =========================================================
   PAGINATION
   ========================================================= */
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 0.4rem; border: 0; }
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination ul.page-numbers li { border: 0; }

:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination .page-numbers a,
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination .page-numbers span {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  transition: background-color .25s var(--pc-ease), border-color .25s var(--pc-ease), color .25s var(--pc-ease);
}

:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination .page-numbers a:hover { border-color: var(--color-primary); color: var(--color-primary); }
:is(.tax-product_cat, .post-type-archive-product) .woocommerce-pagination .page-numbers span.current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-white); }

/* =========================================================
   ZONE DE DESCRIPTION (sous la grille)
   ========================================================= */
:is(.tax-product_cat, .post-type-archive-product) .vc_row:has(> .wpb_column .wd-term-desc) {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--color-background-alt);
}

/* Les numéros d'étapes gardent un anneau de la couleur du fond */
.wd-term-desc .crb-catdesc { --color-background: var(--color-background-alt); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  :is(.tax-product_cat, .post-type-archive-product) .wd-woo-page-title .title { animation: pc-rise 1s var(--pc-ease) .1s both; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-el-breadcrumbs { animation: pc-rise .8s var(--pc-ease) both; }
  :is(.tax-product_cat, .post-type-archive-product) .vc_inner.vc_row-flex:has(.wd-shop-ordering) { animation: pc-rise .8s var(--pc-ease) .25s both; }

  /* Cartes : elles arrivent ligne par ligne (classes posées par page-categorie.js) */
  body.pc-js .wd-shop-product .wd-product:not(.pc-in) { opacity: 0; }
  body.pc-js .wd-shop-product .wd-product.pc-in { animation: pc-card .9s var(--pc-ease) backwards; animation-delay: calc(var(--pc-i, 0) * 90ms); }
}

@keyframes pc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pc-card { from { opacity: 0; transform: translateY(50px) scale(.97); } to { opacity: 1; transform: none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :is(.tax-product_cat, .post-type-archive-product) .vc_inner.vc_row-flex:has(.wd-shop-ordering) { border-radius: var(--pc-radius); }
}

@media (max-width: 767px) {
  :is(.tax-product_cat, .post-type-archive-product) .vc_row.vc_row-has-fill:not(.vc_inner):has(.wd-woo-page-title) { min-height: 220px; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-product .product-wrapper { padding: 0.45rem 0.45rem 0.8rem; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-entities-title { font-size: 0.88rem; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price > .amount,
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .price ins .amount { font-size: 1.15rem; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop { min-height: 2.5rem; font-size: 0.78rem; }
  :is(.tax-product_cat, .post-type-archive-product) .wd-shop-product .wd-add-btn-replace .add-to-cart-loop span::after { display: none; }
}
/* =========================================================
   HEADER MOBILE + BARRE D'OUTILS DU BAS (≤ 1024 px) — v2
   À coller à la place de l'ancien bloc « HEADER MOBILE »
   du CSS du header (garde le reste du header tel quel).
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

@media (max-width: 1024px) {

  /* ---------- 1. Correctif : on masque les colonnes « ordinateur » ---------- */
  .whb-header .whb-visible-lg { display: none !important; }

  /* ---------- 2. Ligne du header ---------- */
  .whb-header .whb-general-header .whb-flex-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--wh-header-h-mobile, 64px);
  }

  .whb-general-header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .whb-header .whb-mobile-left   { justify-content: flex-start; }
  .whb-header .whb-mobile-center { justify-content: center; }
  .whb-header .whb-mobile-right  { justify-content: flex-end; gap: 0.4rem; }

  .whb-sticked .whb-general-header .whb-flex-row { min-height: 58px; }

  /* ---------- 3. Logo centré ---------- */
  .whb-header .whb-mobile-center .site-logo img {
    max-width: 150px !important;
    max-height: 42px !important;
    width: auto !important;
    height: auto;
    object-fit: contain;
  }

  .whb-sticked .whb-mobile-center .site-logo img { max-height: 36px !important; }

  /* ---------- 4. Bouton menu (burger) ---------- */
  .whb-header .wd-header-mobile-nav > a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    border: 0;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary) !important;
    transition: background-color .3s, color .3s, transform .3s;
  }

  .whb-header .wd-header-mobile-nav > a:active { transform: scale(.94); }
  .whb-header .wd-header-mobile-nav > a:hover { background: var(--color-primary); color: var(--color-text-white) !important; }
  .whb-header .wd-header-mobile-nav .wd-tools-text { display: none; }
  .whb-header .wd-header-mobile-nav .wd-tools-icon::before { color: inherit; font-size: 1.25rem; }

  /* ---------- 5. Panier : rond vert, compteur ocre, sans montant ---------- */
  .whb-header .whb-mobile-right .wd-header-cart > a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white) !important;
    transform: none;
    transition: background-color .3s, transform .3s;
  }

  .whb-header .whb-mobile-right .wd-header-cart > a:active { transform: scale(.94); }

  .whb-header .whb-mobile-right .wd-header-cart .wd-tools-icon {
    position: relative;
    width: auto;
    height: auto;
    background: none;
  }

  .whb-header .whb-mobile-right .wd-header-cart .wd-tools-icon::before { color: var(--color-text-white); font-size: 1.15rem; }
  .whb-header .whb-mobile-right .wd-header-cart .wd-tools-text { display: none !important; }

  .whb-header .whb-mobile-right .wd-header-cart .wd-cart-number {
    top: -14px;
    right: -14px;
    min-width: 1.3rem;
    height: 1.3rem;
    border: 2px solid var(--color-surface);
    border-radius: 99px;
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  .whb-header .whb-mobile-right .wd-header-cart .wd-cart-number > span { display: none; }

  /* ---------- 6. Barre d'outils du bas (WoodMart) ---------- */
  .wd-toolbar {
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px color-mix(in srgb, var(--color-secondary) 8%, transparent);
  }

  .wd-toolbar .wd-toolbar-item > a {
    gap: 0.2rem;
    color: var(--color-text-light);
    transition: color .25s;
  }

  .wd-toolbar .wd-toolbar-item > a:hover,
  .wd-toolbar .wd-toolbar-item > a:active { color: var(--color-primary); }

  .wd-toolbar .wd-tools-icon::before { color: inherit; font-size: 1.2rem; }

  .wd-toolbar .wd-toolbar-label {
    font-family: var(--font-family-base);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
  }

  .wd-toolbar .wd-tools-count {
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    font-weight: var(--font-weight-bold);
  }

  /* Panier mis en avant : rond vert qui dépasse de la barre */
  .wd-toolbar .wd-toolbar-cart .wd-tools-icon {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-top: -1.4rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    box-shadow: 0 0 0 5px var(--color-surface), 0 8px 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
  }

  .wd-toolbar .wd-toolbar-cart .wd-tools-icon::before { color: var(--color-text-white); }
  .wd-toolbar .wd-toolbar-cart .wd-tools-count { top: -4px; right: -6px; border: 2px solid var(--color-surface); }
  .wd-toolbar .wd-toolbar-cart > a { color: var(--color-primary); }
}

/* Rebond du compteur à l'ajout au panier (classe posée par le JS du header) */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body.wh-cart-bump .whb-mobile-right .wd-cart-number,
  body.wh-cart-bump .wd-toolbar .wd-tools-count { animation: wh-bump .6s cubic-bezier(.16, 1, .3, 1); }
}

/* =========================================================
   PAGE DE COMMANDE / CAISSE (body.woocommerce-checkout) — v2
   Code promo, facturation, livraison, notes, récapitulatif
   collant, moyen de paiement, bouton de commande.
   Couleurs : uniquement les variables :root du thème
   Remplace la partie « 4. CAISSE » de l'ancien bloc
   « PANIER RAPIDE + PAGE PANIER + CAISSE »
   ========================================================= */

/* ---------- Réglages ---------- */
body.woocommerce-checkout {
  --co-ease: cubic-bezier(.22, 1, .36, 1);
  --co-radius: calc(var(--border-radius-lg) * 1.4);
  --co-sticky-top: calc(var(--wh-header-h, 84px) + 1.5rem);
}

.woocommerce-checkout .wd-content-layout { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }

/* =========================================================
   CODE PROMO
   ========================================================= */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.95rem 1.2rem 0.95rem 3.2rem;
  position: relative;
  list-style: none;
  border: 1.5px dashed color-mix(in srgb, var(--color-accent) 60%, transparent);
  border-radius: var(--co-radius);
  background: var(--color-accent-light);
  color: var(--color-secondary);
  font-size: 0.92rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: "\f02b";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  margin: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--color-accent-deep);
  transform: translateY(-50%);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.woocommerce-checkout .checkout_coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--co-radius);
  background: var(--color-surface);
}

.woocommerce-checkout .checkout_coupon .form-row { width: auto; float: none; margin: 0; padding: 0; }
.woocommerce-checkout .checkout_coupon .clear { display: none; }

.woocommerce-checkout .checkout_coupon .button {
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  transition: background-color .3s var(--co-ease);
}

.woocommerce-checkout .checkout_coupon .button:hover { background: var(--color-primary); }

/* =========================================================
   CHAMPS
   ========================================================= */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  color: var(--color-secondary);
}

.woocommerce-checkout .woocommerce-billing-fields > h3::before {
  content: "1";
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: 1rem;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row { grid-column: 1 / -1; width: auto; float: none; }

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last { grid-column: 2; }

/* Code postal et ville côte à côte */
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field { grid-column: 1; }
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field { grid-column: 2; }

.woocommerce-checkout .form-row { margin: 0 0 1rem; padding: 0; }

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-secondary);
  transition: color .25s var(--co-ease);
}

.woocommerce-checkout .form-row:focus-within > label { color: var(--color-accent-deep); }
.woocommerce-checkout .form-row .required { color: var(--color-accent-deep); text-decoration: none; }
.woocommerce-checkout .form-row .optional { font-weight: 400; color: var(--color-text-light); }

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background-alt);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: 1rem;
  box-shadow: none;
  transition: border-color .25s var(--co-ease), background-color .25s var(--co-ease), box-shadow .25s var(--co-ease);
}

.woocommerce-checkout .form-row textarea.input-text { min-height: 6.5rem; resize: vertical; }

.woocommerce-checkout .form-row .input-text:hover,
.woocommerce-checkout .form-row select:hover { border-color: var(--color-secondary-light); }

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  outline: none;
  border-color: var(--color-accent-deep);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; height: 3.1rem; }
.woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--color-text-base); }
.woocommerce-checkout .select2-container .select2-selection__arrow { top: 50%; right: 0.75rem; transform: translateY(-50%); }

.select2-dropdown { overflow: hidden; border-color: var(--color-border); border-radius: 10px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-primary) !important; color: var(--color-text-white) !important; }

/* Champ valide / en erreur */
.woocommerce-checkout .woocommerce-validated .input-text { border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border)); }
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid .select2-selection { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 4%, var(--color-surface)); }

/* Messages d'erreur en haut du formulaire */
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  list-style: none;
  border: 0;
  border-left: 4px solid var(--color-error);
  border-radius: 0 var(--co-radius) var(--co-radius) 0;
  background: color-mix(in srgb, var(--color-error) 7%, var(--color-surface));
  color: var(--color-error);
}

/* =========================================================
   AUTRE ADRESSE DE LIVRAISON + NOTES
   ========================================================= */
.woocommerce-checkout #ship-to-different-address { margin: 0.75rem 0 1.25rem; font-size: inherit; }

.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--co-radius);
  background: var(--color-surface);
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  cursor: pointer;
  transition: border-color .25s var(--co-ease), background-color .25s var(--co-ease);
}

.woocommerce-checkout #ship-to-different-address label:hover { border-color: var(--color-primary); }
.woocommerce-checkout #ship-to-different-address label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.woocommerce-checkout #ship-to-different-address input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--color-primary); }

.woocommerce-checkout .shipping_address {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.25rem 0.25rem;
  border-radius: var(--co-radius);
  background: var(--color-background-alt);
}

/* =========================================================
   COLONNE RÉCAPITULATIF (collante sur ordinateur)
   ========================================================= */
.woocommerce-checkout .wd-row-divider { display: none; }

@media (min-width: 1025px) {
  .woocommerce-checkout .wpb_column:has(.wd-order-table) > .vc_column-inner {
    position: sticky;
    top: var(--co-sticky-top);
  }
}

.woocommerce-checkout .vc_row-has-fill:has(.wd-order-table) {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem) !important;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius-lg) * 1.8);
  background: var(--color-surface) !important;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

/* Liseré vert + ocre en haut */
.woocommerce-checkout .vc_row-has-fill:has(.wd-order-table)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

.woocommerce-checkout .vc_row-has-fill:has(.wd-order-table) .title-wrapper { margin-bottom: 1.1rem !important; text-align: left !important; }

.woocommerce-checkout .vc_row-has-fill:has(.wd-order-table) .woodmart-title-container {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-family-headings);
  font-size: 1.6rem !important;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2 !important;
  text-transform: none;
  color: var(--color-secondary);
}

.woocommerce-checkout .vc_row-has-fill:has(.wd-order-table) .woodmart-title-container::before {
  content: "2";
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: 1rem;
}

.woocommerce-checkout .wd-order-table { margin-bottom: 1rem !important; padding: 0 !important; background: transparent !important; }

/* Tableau */
.woocommerce-checkout-review-order-table { margin: 0; border: 0; }

.woocommerce-checkout-review-order-table thead th {
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.woocommerce-checkout-review-order-table .wd-checkout-prod { padding: 1rem 0; border: 0; border-bottom: 1px solid var(--color-border); }
.woocommerce-checkout-review-order-table .wd-checkout-prod-cont { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.woocommerce-checkout-review-order-table .cart-product-label { font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--color-secondary); }

.woocommerce-checkout-review-order-table .product-quantity {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.5rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
}

.woocommerce-checkout-review-order-table .wd-checkout-prod-total .amount { white-space: nowrap; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--color-secondary); }

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 400; color: var(--color-text-light); }
.woocommerce-checkout-review-order-table tfoot td { text-align: right; font-variant-numeric: tabular-nums; }

/* Livraison : pastille « offerte » */
.woocommerce-checkout-review-order-table #shipping_method { margin: 0; padding: 0; list-style: none; }

.woocommerce-checkout-review-order-table #shipping_method label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
}

.woocommerce-checkout-review-order-table #shipping_method label::before {
  content: "\f0d1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
}

/* Réduction */
.woocommerce-checkout-review-order-table .cart-discount th,
.woocommerce-checkout-review-order-table .cart-discount td { font-weight: var(--font-weight-semibold); color: var(--color-accent-deep); }

/* Total */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { padding-top: 1.1rem; border-bottom: 0; }
.woocommerce-checkout-review-order-table .order-total th { font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.woocommerce-checkout-review-order-table .order-total .amount {
  font-family: var(--font-family-headings);
  font-size: 1.9rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-primary);
}

/* =========================================================
   PAIEMENT
   ========================================================= */
.woocommerce-checkout #payment { border-radius: 0; background: transparent; }
.woocommerce-checkout #payment .payment_methods { margin: 0.5rem 0 0; padding: 0; border: 0; }

.woocommerce-checkout #payment .wc_payment_method {
  margin: 0 0 0.6rem;
  padding: 1rem 1.15rem;
  list-style: none;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--co-radius);
  background: var(--color-primary-light);
}

.woocommerce-checkout #payment .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

/* Pastille de sélection + icône banque */
.woocommerce-checkout #payment .wc_payment_method > label::before {
  content: "";
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border: 5px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
}

.woocommerce-checkout #payment .payment_method_bacs > label::after {
  content: "\f19c";
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--color-primary);
}

.woocommerce-checkout #payment .payment_box {
  margin: 0.75rem 0 0 !important;
  padding: 0 0 0 1.9rem !important;
  background: transparent !important;
  font-size: 0.88rem;
  color: var(--color-text-light);
}

.woocommerce-checkout #payment .payment_box::before { display: none; }

/* Texte légal */
.woocommerce-checkout #payment .place-order { margin: 1rem 0 0; padding: 0; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }

.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-light);
}

.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] { accent-color: var(--color-primary); }

/* Bouton de commande */
.woocommerce-checkout #place_order {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.6rem;
  border-radius: var(--border-radius-pill) !important;
  background: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  font-family: var(--font-family-base);
  font-size: 1.02rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: background-color .3s var(--co-ease), transform .3s var(--co-ease);
}

.woocommerce-checkout #place_order::before {
  content: "\f023";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
}

/* Reflet qui balaie le bouton */
.woocommerce-checkout #place_order::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--color-text-white) 26%, transparent), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.woocommerce-checkout #place_order:hover { background: var(--color-primary-dark) !important; transform: translateY(-2px); }
.woocommerce-checkout #place_order:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

/* Rappel sous le bouton */
.woocommerce-checkout #payment .place-order::after {
  content: "Livraison offerte · IBAN envoyé par e-mail après la commande";
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  text-align: center;
  color: var(--color-text-light);
}

/* Chargement (WooCommerce recalcule les totaux) */
.woocommerce-checkout .blockUI.blockOverlay { border-radius: var(--co-radius); background: color-mix(in srgb, var(--color-surface) 70%, transparent) !important; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .woocommerce-checkout .woocommerce-form-coupon-toggle { animation: co-rise .7s var(--co-ease) both; }
  .woocommerce-checkout .woocommerce-billing-fields > h3 { animation: co-rise .7s var(--co-ease) .08s both; }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row { animation: co-rise .6s var(--co-ease) both; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row:nth-child(2) { animation-delay: .05s; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row:nth-child(3) { animation-delay: .1s; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row:nth-child(4) { animation-delay: .15s; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row:nth-child(n+5) { animation-delay: .2s; }

  .woocommerce-checkout .vc_row-has-fill:has(.wd-order-table) { animation: co-card .9s var(--co-ease) .2s both; }
  .woocommerce-checkout #place_order::after { animation: co-shine 5s ease-in-out 2s infinite; }
}

@keyframes co-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes co-card  { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes co-shine { 0%, 75% { left: -60%; } 100% { left: 130%; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .woocommerce-checkout .wpb_column:has(.wd-order-table) > .vc_column-inner { padding-left: 15px !important; }
}

@media (max-width: 767px) {
  .woocommerce-checkout .checkout_coupon { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .checkout_coupon .button { width: 100%; }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row { grid-column: 1 !important; }

  .woocommerce-checkout .wpb_column:has(.wd-order-table) > .vc_column-inner { margin-top: 1.5rem; padding-left: 0 !important; }
  .woocommerce-checkout-review-order-table .order-total .amount { font-size: 1.6rem; }
}

/* =========================================================
   PAGE « COMMANDE REÇUE » (body.woocommerce-order-received)
   Étapes, message de confirmation, résumé, détails,
   coordonnées bancaires, adresses.
   Couleurs : uniquement les variables :root du thème
   ========================================================= */

/* ---------- Réglages ---------- */
body.woocommerce-order-received {
  --or-ease: cubic-bezier(.22, 1, .36, 1);
  --or-radius: calc(var(--border-radius-lg) * 1.4);
}

/* =========================================================
   BANDEAU DES ÉTAPES (titre de page WoodMart)
   ========================================================= */
.woocommerce-order-received .wd-page-title {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--color-primary) !important;
}

.woocommerce-order-received .wd-page-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-dark) 0 72%, var(--color-accent) 72% 100%);
}

.woocommerce-order-received .wd-checkout-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-order-received .wd-checkout-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
}

/* Trait entre les étapes */
.woocommerce-order-received .wd-checkout-steps li + li::before {
  content: "";
  width: clamp(1.25rem, 4vw, 3rem);
  height: 2px;
  margin-right: 0.5rem;
  border-radius: 2px;
  background: var(--color-accent);
}

.woocommerce-order-received .wd-checkout-steps li::after { display: none; }

.woocommerce-order-received .wd-checkout-steps a,
.woocommerce-order-received .wd-checkout-steps li > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-pill);
  font-size: inherit;
  text-decoration: none;
}

.woocommerce-order-received .wd-checkout-steps .step-inactive a {
  background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
  color: color-mix(in srgb, var(--color-text-white) 80%, transparent);
  transition: background-color .3s var(--or-ease);
}

.woocommerce-order-received .wd-checkout-steps .step-inactive a:hover { background: color-mix(in srgb, var(--color-text-white) 18%, transparent); color: var(--color-text-white); }

/* Coche devant les étapes déjà faites */
.woocommerce-order-received .wd-checkout-steps .step-inactive a::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--color-accent);
}

.woocommerce-order-received .wd-checkout-steps .step-active > span {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.woocommerce-order-received .wd-checkout-steps .step-active > span span { padding: 0; background: none; }

/* =========================================================
   CONTENEUR
   ========================================================= */
.woocommerce-order-received .wd-content-layout { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.woocommerce-order-received .woocommerce-order { max-width: 920px; margin: 0 auto; }

/* =========================================================
   MESSAGE DE CONFIRMATION
   ========================================================= */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  position: relative;
  margin: 0 0 2rem;
  padding: 5.5rem 1rem 0;
  border: 0;
  background: none;
  font-family: var(--font-family-headings);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--color-secondary);
}

.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "\f00c";
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  margin-left: -2.1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.6rem;
  box-shadow: 0 0 0 8px var(--color-primary-light);
}

/* Sous-titre ajouté en CSS */
.woocommerce-order-received .woocommerce-thankyou-order-received::after {
  content: "Un e-mail de confirmation vous a été envoyé. Vous recevrez vos coordonnées de paiement et nous vous appellerons avant la livraison.";
  display: block;
  max-width: 46ch;
  margin: 0.9rem auto 0;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--color-text-light);
}

/* =========================================================
   RÉSUMÉ EN CARTES
   ========================================================= */
.woocommerce-order-received .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.woocommerce-order-received .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--or-radius);
  background: var(--color-surface);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
  overflow-wrap: anywhere;
  font-family: var(--font-family-headings);
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary);
}

/* Numéro et total mis en avant */
.woocommerce-order-received .woocommerce-order-overview__order { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: color-mix(in srgb, var(--color-text-white) 75%, transparent) !important; }
.woocommerce-order-received .woocommerce-order-overview__order strong { font-size: 1.5rem !important; color: var(--color-text-white) !important; }
.woocommerce-order-received .woocommerce-order-overview__total strong .amount { font-size: 1.5rem; color: var(--color-primary); }

/* =========================================================
   COORDONNÉES BANCAIRES (virement)
   ========================================================= */
.woocommerce-order-received .woocommerce-bacs-bank-details {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  border-radius: calc(var(--border-radius-lg) * 1.8);
  background: var(--color-accent-light);
}

.woocommerce-order-received .wc-bacs-bank-details-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.woocommerce-order-received .wc-bacs-bank-details-heading::before {
  content: "\f19c";
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
}

.woocommerce-order-received .wc-bacs-bank-details-account-name { margin: 0 0 0.75rem; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }

.woocommerce-order-received .wc-bacs-bank-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-order-received .wc-bacs-bank-details li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.woocommerce-order-received .wc-bacs-bank-details li strong {
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-secondary);
}

/* =========================================================
   DÉTAILS DE LA COMMANDE
   ========================================================= */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details { margin-bottom: clamp(2rem, 4vw, 3rem); }

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 1rem;
  font-family: var(--font-family-headings);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  color: var(--color-secondary);
}

.woocommerce-order-received .woocommerce-table--order-details {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--or-radius);
  background: var(--color-surface);
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
  padding: 0.95rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.woocommerce-order-received .woocommerce-table--order-details thead th {
  background: var(--color-background-alt);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.woocommerce-order-received .woocommerce-table--order-details .product-total { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-order-received .woocommerce-table--order-details .product-name a { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }
.woocommerce-order-received .woocommerce-table--order-details .product-name a:hover { color: var(--color-primary); }

.woocommerce-order-received .woocommerce-table--order-details .product-quantity {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.5rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.78rem;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot th { font-weight: 400; text-align: left; color: var(--color-text-light); }
.woocommerce-order-received .woocommerce-table--order-details tfoot td { text-align: right; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }

/* Ligne du total */
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:has(+ tr:last-child) td .amount {
  font-family: var(--font-family-headings);
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* Bouton « Facture » */
.woocommerce-order-received .order-actions--heading { vertical-align: middle; }

.woocommerce-order-received .order-actions-button.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0 1.2rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--border-radius-pill);
  background: transparent;
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  transition: background-color .3s var(--or-ease), color .3s var(--or-ease);
}

.woocommerce-order-received .order-actions-button.button::before {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.woocommerce-order-received .order-actions-button.button:hover { background: var(--color-primary); color: var(--color-text-white); }

/* =========================================================
   ADRESSES
   ========================================================= */
.woocommerce-order-received .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.woocommerce-order-received .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce-columns--addresses::after { display: none; }

.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
  width: auto;
  float: none;
  max-width: none;
  margin: 0;
  padding: 1.35rem 1.4rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--or-radius) var(--or-radius) 0;
  background: var(--color-background-alt);
}

.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column__title { font-size: 1.15rem; }

.woocommerce-order-received .woocommerce-columns--addresses address {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text-base);
}

.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.9rem;
}

.woocommerce-order-received .woocommerce-customer-details--phone::before,
.woocommerce-order-received .woocommerce-customer-details--email::before {
  position: static;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--color-accent-deep);
}

.woocommerce-order-received .woocommerce-customer-details--phone::before { content: "\f095"; }
.woocommerce-order-received .woocommerce-customer-details--email::before { content: "\f0e0"; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .woocommerce-order-received .woocommerce-thankyou-order-received::before { animation: or-pop .8s var(--or-ease) .1s both, or-ring 2.4s ease-out 1s infinite; }
  .woocommerce-order-received .woocommerce-thankyou-order-received { animation: or-rise .8s var(--or-ease) .25s both; }

  .woocommerce-order-received .woocommerce-order-overview li { animation: or-rise .7s var(--or-ease) both; }
  .woocommerce-order-received .woocommerce-order-overview li:nth-child(1) { animation-delay: .45s; }
  .woocommerce-order-received .woocommerce-order-overview li:nth-child(2) { animation-delay: .52s; }
  .woocommerce-order-received .woocommerce-order-overview li:nth-child(3) { animation-delay: .59s; }
  .woocommerce-order-received .woocommerce-order-overview li:nth-child(4) { animation-delay: .66s; }
  .woocommerce-order-received .woocommerce-order-overview li:nth-child(5) { animation-delay: .73s; }

  .woocommerce-order-received .woocommerce-bacs-bank-details,
  .woocommerce-order-received .woocommerce-order-details,
  .woocommerce-order-received .woocommerce-customer-details { animation: or-rise .8s var(--or-ease) .85s both; }

  .woocommerce-order-received .wd-checkout-steps .step-active > span { animation: or-pop .7s var(--or-ease) .2s both; }
}

@keyframes or-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes or-pop  { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes or-ring { 0% { box-shadow: 0 0 0 8px var(--color-primary-light), 0 0 0 8px color-mix(in srgb, var(--color-primary) 30%, transparent); } 100% { box-shadow: 0 0 0 8px var(--color-primary-light), 0 0 0 26px transparent; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
  .woocommerce-order-received .wd-checkout-steps li { font-size: 0.78rem; }
  .woocommerce-order-received .wd-checkout-steps li + li::before { width: 0.9rem; margin-right: 0.25rem; }
  .woocommerce-order-received .wd-checkout-steps a,
  .woocommerce-order-received .wd-checkout-steps li > span { padding: 0.4rem 0.7rem; }
  .woocommerce-order-received .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce-order-received .woocommerce-order-overview__email { grid-column: 1 / -1; }
  .woocommerce-order-received .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-order-received .woocommerce-table--order-details th,
  .woocommerce-order-received .woocommerce-table--order-details td { padding: 0.8rem 0.9rem; }
}

/* =========================================================
   FOOTER (.crb-footer)
   Bandeau contact (statut ouvert/fermé), engagements, colonnes,
   barre légale, bouton « haut de page » à anneau de progression.
   Animations : footer.js
   Couleurs : uniquement les variables :root du thème
   Remplace l'ancien bloc du footer (.wh-site-footer)
   ========================================================= */

/* ---------- Réglages ---------- */
.crb-footer {
  --ft-ease: cubic-bezier(.22, 1, .36, 1);
  --ft-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ft-text: color-mix(in srgb, var(--color-text-white) 70%, transparent);
  --ft-line: color-mix(in srgb, var(--color-text-white) 12%, transparent);
  --ft-p: 0;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(3.5rem, 7vw, 5rem);
  background: var(--color-secondary);
  color: var(--ft-text);
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  line-height: var(--line-height-base);
}

.crb-footer *,
.crb-footer *::before,
.crb-footer *::after { box-sizing: border-box; }

/* Liseré vert + ocre en haut */
.crb-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0 72%, var(--color-accent) 72% 100%);
}

/* Cernes de bois + lueur de braise */
.crb-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent 70%),
    repeating-radial-gradient(circle at 105% -10%, transparent 0 26px, color-mix(in srgb, var(--color-text-white) 3%, transparent) 26px 28px);
  pointer-events: none;
}

.ft-inner {
  position: relative;
  max-width: calc(1320px + 2 * var(--ft-gutter));
  margin: 0 auto;
  padding: 0 var(--ft-gutter);
}

.crb-footer a { color: inherit; text-decoration: none; }
.crb-footer a:focus-visible,
.crb-footer button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Braises ---------- */
.ft-embers { position: absolute; z-index: -1; inset: 0; pointer-events: none; }

.ft-embers i {
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  opacity: 0;
}

.ft-embers i:nth-child(1) { left: 8%; }
.ft-embers i:nth-child(2) { left: 24%; width: 3px; height: 3px; }
.ft-embers i:nth-child(3) { left: 43%; }
.ft-embers i:nth-child(4) { left: 61%; width: 4px; height: 4px; }
.ft-embers i:nth-child(5) { left: 78%; }
.ft-embers i:nth-child(6) { left: 92%; width: 3px; height: 3px; }

/* =========================================================
   BANDEAU CONTACT
   ========================================================= */
.ft-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: calc(var(--border-radius-lg) * 2);
  background: var(--color-primary);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--color-secondary-dark) 45%, transparent);
}

.ft-cta__status {
  --ft-dot: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-text-white) 22%, transparent);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-text-white) 8%, transparent);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
}

.ft-cta__status.is-open { --ft-dot: color-mix(in srgb, var(--color-success) 55%, var(--color-text-white)); }
.ft-cta__status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ft-dot); }

.ft-cta__title {
  margin: 0;
  font-family: var(--font-family-headings);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
}

.ft-cta__title em { font-style: italic; color: var(--color-accent); }

.ft-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-pill);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition: background-color .3s var(--ft-ease), color .3s var(--ft-ease), border-color .3s var(--ft-ease), transform .4s var(--ft-ease);
}

.ft-btn:hover { transform: translateY(-2px); }
.crb-footer .ft-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.crb-footer .ft-btn--accent:hover { background: var(--color-surface); color: var(--color-primary); }
.crb-footer .ft-btn--ghost { border-color: color-mix(in srgb, var(--color-text-white) 40%, transparent); color: var(--color-text-white); }
.crb-footer .ft-btn--ghost:hover { border-color: var(--color-surface); background: var(--color-surface); color: var(--color-primary); }

/* =========================================================
   ENGAGEMENTS
   ========================================================= */
.ft-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  list-style: none;
  border-bottom: 1px solid var(--ft-line);
}

.ft-trust li { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0; font-size: 0.85rem; line-height: 1.45; }

.ft-trust i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text-white) 8%, transparent);
  color: var(--color-accent);
  transition: background-color .3s var(--ft-ease), color .3s var(--ft-ease), transform .5s var(--ft-ease);
}

.ft-trust li:hover i { background: var(--color-accent); color: var(--color-on-accent); transform: rotate(-10deg); }
.ft-trust span { display: flex; flex-direction: column; gap: 0.15rem; }
.ft-trust strong { font-size: 0.95rem; color: var(--color-text-white); }

/* =========================================================
   COLONNES
   ========================================================= */
.ft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

/* Marque */
.ft-logo { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }

.ft-logo__mark {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.2rem;
}

.ft-logo > span:last-child {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-headings);
  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-text-white);
}

.ft-logo small {
  margin-top: 0.35rem;
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ft-brand p { max-width: 42ch; margin: 0 0 1.4rem; font-size: 0.9rem; }

.ft-seals { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ft-seals li { margin: 0; }

.ft-seals img {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0.3rem;
  object-fit: contain;
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform .5s var(--ft-ease);
}

.ft-seals img:hover { transform: rotate(-10deg) scale(1.08); }

/* Titres */
.ft-heading {
  margin: 0 0 1.1rem;
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Liens */
.ft-links { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.ft-links li { margin: 0; }

.ft-links a,
.ft-cookie {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ft-text);
  font-family: var(--font-family-base);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: color .25s var(--ft-ease), transform .4s var(--ft-ease);
}

/* Petit trait ocre qui s'étire devant le lien au survol */
.ft-links a::before,
.ft-cookie::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transition: width .35s var(--ft-ease);
}

.ft-links a:hover,
.ft-cookie:hover { color: var(--color-text-white); }

.ft-links a:hover::before,
.ft-cookie:hover::before { width: 0.85rem; }

/* Contact */
.ft-contact__list { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }

.ft-contact__list li { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; font-size: 0.9rem; }
.ft-contact__list i { margin-top: 0.25rem; width: 1rem; color: var(--color-accent); text-align: center; }
.ft-contact__list a { overflow-wrap: anywhere; transition: color .25s; }
.ft-contact__list a:hover { color: var(--color-text-white); }
.ft-contact__list address { margin: 0; font-style: normal; line-height: 1.5; }

.ft-hours {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-text-white) 6%, transparent);
}

.ft-hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.35rem; border-radius: var(--border-radius); font-size: 0.85rem; }
.ft-hours > div.is-today { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.ft-hours dt { margin: 0; }
.ft-hours dd { margin: 0; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-text-white); }

/* =========================================================
   BARRE DU BAS
   ========================================================= */
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ft-line);
  font-size: 0.8rem;
}

.ft-bottom p { margin: 0; }
.ft-legal { color: color-mix(in srgb, var(--color-text-white) 50%, transparent); font-variant-numeric: tabular-nums; }

/* Haut de page : l'anneau suit la progression dans la page */
.ft-top {
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--ft-p) * 360deg), color-mix(in srgb, var(--color-text-white) 15%, transparent) 0);
  cursor: pointer;
}

.ft-top > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-text-white);
  transition: background-color .3s var(--ft-ease), color .3s var(--ft-ease);
}

.ft-top:hover > span { background: var(--color-accent); color: var(--color-on-accent); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ft-embers i { animation: ft-ember 7s linear infinite; }
  .ft-embers i:nth-child(2) { animation-duration: 9s; animation-delay: 1.4s; }
  .ft-embers i:nth-child(3) { animation-duration: 6s; animation-delay: 2.8s; }
  .ft-embers i:nth-child(4) { animation-duration: 8.5s; animation-delay: .7s; }
  .ft-embers i:nth-child(5) { animation-duration: 7.5s; animation-delay: 3.6s; }
  .ft-embers i:nth-child(6) { animation-duration: 10s; animation-delay: 5s; }

  .ft-cta__status::before { animation: ft-dot 2s ease-out infinite; }
  .ft-top:hover i { animation: ft-up .6s var(--ft-ease); }

  /* Apparition au défilement (classe posée par footer.js) */
  .crb-footer.ft-js [data-ft-r] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ft-ease), transform .9s var(--ft-ease);
    transition-delay: var(--ft-d, 0s);
  }

  .crb-footer.ft-js [data-ft-r].is-in { opacity: 1; transform: none; }
}

@keyframes ft-ember {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  10%  { opacity: .85; }
  100% { opacity: 0; transform: translate(-24px, -480px) scale(.4); }
}

@keyframes ft-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ft-dot) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes ft-up {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-8px); opacity: 0; }
  55%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; }
  .ft-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ft-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .ft-contact { grid-column: 1 / -1; }
  .ft-trust { grid-template-columns: minmax(0, 1fr); }
  .ft-cta__actions { flex-direction: column; }
  .ft-btn { width: 100%; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .ft-top { position: absolute; right: 0; bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* Laisse la place à la barre d'outils mobile de WoodMart */
@media (max-width: 1024px) {
  body:has(.wd-toolbar) .crb-footer { padding-bottom: 4.5rem; }
}

/* =========================================================
   HEADER FIXE : textes lisibles (blanc sur blanc corrigé)
   WoodMart met la ligne fixe en « whb-color-light » (texte blanc)
   ========================================================= */
.whb-clone,
.whb-sticked .whb-general-header {
  background: var(--color-surface) !important;
}

.whb-clone .whb-color-light,
.whb-sticked .whb-color-light {
  --wd-header-el-color: var(--color-secondary);
  --wd-header-el-color-hover: var(--color-primary);
  color: var(--color-secondary);
}

/* Menu principal */
.whb-clone .wd-nav-main > li > a,
.whb-sticked .wd-nav-main > li > a {
  color: var(--color-secondary) !important;
}

.whb-clone .wd-nav-main > li:hover > a,
.whb-clone .wd-nav-main > li.current-menu-item > a,
.whb-sticked .wd-nav-main > li:hover > a,
.whb-sticked .wd-nav-main > li.current-menu-item > a {
  color: var(--color-primary) !important;
}

/* Mon compte */
.whb-clone .wd-header-my-account > a,
.whb-clone .wd-header-my-account .wd-tools-icon::before,
.whb-sticked .wd-header-my-account > a,
.whb-sticked .wd-header-my-account .wd-tools-icon::before {
  color: var(--color-secondary) !important;
}

/* Le panier garde ses textes blancs sur fond vert */
.whb-clone .wd-header-cart > a,
.whb-clone .wd-header-cart .wd-tools-icon::before,
.whb-clone .wd-header-cart .wd-cart-subtotal,
.whb-clone .wd-header-cart .wd-cart-subtotal .amount,
.whb-sticked .wd-header-cart > a,
.whb-sticked .wd-header-cart .wd-tools-icon::before,
.whb-sticked .wd-header-cart .wd-cart-subtotal,
.whb-sticked .wd-header-cart .wd-cart-subtotal .amount {
  color: var(--color-text-white) !important;
}

/* Compteur du panier : reste ocre */
.whb-clone .wd-cart-number,
.whb-sticked .wd-cart-number {
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}