/*
Theme Name: Tribu Indigo
Theme URI: https://tribuindigo.com
Description: Thème custom Tribu Indigo — sans Elementor, HTML/CSS pur
Author: Yoann Milan
Version: 2.5.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tribu-indigo
*/

/* ─── Variables ─────────────────────────────────────────────────────── */
:root {
  --color-primary:   #330099;
  --color-secondary: #04727F;
  --color-text:      #5C5151;
  --color-accent:    #BC7F15;
  --color-bg:        #FFF8EF;
  --color-cta:       #720eec;
  --color-white:     #ffffff;
  --color-border:    #e8e0d8;

  --font-heading: 'Quicksand', sans-serif;
  --font-sub:     'Roboto Slab', serif;
  --font-body:    'Raleway', sans-serif;
  --font-accent:  'Roboto', sans-serif;
  --font-deco:    Georgia, 'Times New Roman', serif;

  --color-text-light: #9a8f8f;
  --btn-pad:          14px 36px;

  --header-height: 70px;
  --container-max: 1280px;
  --container-pad: 24px;
  --radius:        6px;
  --transition:    0.2s ease;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
/* NE PAS mettre overflow-x:hidden sur html/body (essaye le 2026-07-28,
   retire aussitot) : ca casse position:sticky pour TOUS les descendants
   (.product-info notamment - le panneau infos produit ne suivait plus le
   scroll a cote des photos), un piege CSS classique. Le vrai correctif est
   scope directement sur .related-slider-section plus bas. */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* ─── Container ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  transition: box-shadow var(--transition), transform 0.35s ease;
}
.site-header.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.site-header.header--hidden {
  transform: translateY(-100%);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px;
}

/* Barre de recherche mobile */
.header-mobile-search {
  display: none; /* masquée sur desktop */
}
.header-mobile-search__form {
  display: flex;
  align-items: center;
  background: rgba(51,51,51,0.06);
  border-radius: 40px;
  width: 90%;
  margin: 0 auto 12px;
  padding: 0 14px;
  gap: 8px;
}
.header-mobile-search__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(51,51,51,0.45);
  stroke-width: 2;
}
.header-mobile-search__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  min-width: 0;
}
.header-mobile-search__input::placeholder { color: rgba(51,51,51,0.4); }

/* Logo */
.header-logo { flex-shrink: 0; }
.header-logo a { display: flex; align-items: center; }
.header-logo img { height: 50px; width: auto; }
.header-logo .site-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

/* Navigation desktop */
.header-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  transition: color var(--transition);
}
.nav-list > li > a:hover,
.nav-list > li > a:focus,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
  color: var(--color-primary);
  background: transparent;
}

/* Dropdown */
.nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  min-width: 180px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}
.nav-list > li:hover .sub-menu,
.nav-list > li:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-list .sub-menu a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-list .sub-menu a:hover {
  color: var(--color-primary);
  background: rgba(51, 0, 153, 0.04);
}

/* ─── Mega Menu ──────────────────────────────────────────────────────── */
.nav-item--mega { position: static !important; }

.nav-link--mega {
  display: flex !important;
  align-items: center;
  gap: 5px;
}
.nav-chevron {
  width: 10px; height: 7px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-item--mega.is-open .nav-chevron,
.nav-item--mega:hover .nav-chevron { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.09);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 500;
}
.nav-item--mega.is-open .mega-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mega-inner {
  padding: 28px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mega-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px;
  background: var(--color-border);
}

.mega-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 18px;
  text-decoration: none;
  background: white;
  transition: background 0.15s ease;
}
.mega-cat:hover { background: var(--color-bg); }

.mega-cat__img {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #ede8df;
  transition: filter 0.25s ease;
}
.mega-cat__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
/* filter: drop-shadow (pas box-shadow) : .mega-cat__img a son propre
   overflow:hidden pour le crop de l'image - un box-shadow y serait rogne par
   ce meme overflow (l'element rogne aussi sa propre ombre), drop-shadow non
   (filtre applique apres le rendu/clip de l'element). */
.mega-cat:hover .mega-cat__img { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }

.mega-cat__name {
  font-family: var(--font-accent);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  line-height: 1.4;
}
.mega-cat__count {
  font-size: 10px;
  color: #aaa;
  letter-spacing: 0.04em;
}

.mega-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}
.mega-voir-tout {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  padding: 8px 0;
  transition: opacity 0.15s ease;
}
.mega-voir-tout:hover { opacity: 0.7; }

/* ─── Mobile nav — nouveau markup ────────────────────────────────────── */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-item { border-bottom: 1px solid var(--color-border); }

.mobile-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav-link:hover { color: var(--color-primary); }

.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;
  flex-shrink: 0;
}
.mobile-nav-toggle svg {
  width: 12px; height: 8px;
  transition: transform 0.2s ease;
}
.mobile-nav-item--has-children.open .mobile-nav-toggle svg { transform: rotate(180deg); }

.mobile-sub-nav {
  display: none;
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
}
.mobile-nav-item--has-children.open .mobile-sub-nav { display: block; }

.mobile-sub-link {
  display: block;
  padding: 10px 0 10px 16px;
  font-family: var(--font-accent);
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.03em;
  border-left: 2px solid var(--color-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mobile-sub-link:hover,
.mobile-sub-link--all { color: var(--color-primary); }
.mobile-sub-link--all { font-weight: 500; }

/* Actions (icônes header) */
.header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--color-primary);
  transition: color var(--transition), background var(--transition);
  position: relative;
}
.action-btn:hover { color: var(--color-primary); background: transparent; }
.action-btn svg, .action-btn img { width: 20px; height: 20px; stroke-width: 1.8; }

/* Cart count badge */
.cart-count {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--color-cta);
  color: #fff;
  font-size: 9px;
  font-family: var(--font-accent);
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.cart-count:empty { display: none; }


/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile nav overlay ──────────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

/* ─── Mobile nav panel (slide from left) ─────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 320px;
  background: var(--color-white);
  z-index: 999;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text);
  display: flex;
  align-items: center;
}
.mobile-nav-close svg { width: 22px; height: 22px; }

.mobile-nav-section { padding: 24px 20px; }

.mobile-nav-label {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 16px;
}

.mobile-nav-list { list-style: none; padding: 0; margin: 0; }

.mobile-nav-item { border-bottom: 1px solid var(--color-border); }
.mobile-nav-item:last-child { border-bottom: none; }

.mobile-nav-link {
  display: block;
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-nav-link:hover { color: var(--color-primary); }
.mobile-nav-link--all {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}

.mobile-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 20px;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}
.btn-primary:hover { background: #220077; border-color: #220077; color: #fff; }
.btn-hero {
  background: white;
  color: var(--color-primary);
  border: 2px solid white;
  padding: 14px 36px;
  font-size: 14px;
}
.btn-hero:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.8);
}
.btn-outline-white:hover { background: white; color: var(--color-primary); border-color: white; }
.btn-cart {
  background: var(--color-cta);
  color: white;
  border: 2px solid var(--color-cta);
  padding: 8px 16px;
  font-size: 12px;
  width: 100%;
}
.btn-cart:hover { background: #5a0bbf; border-color: #5a0bbf; color: white; }

/* ─── Hero Slider ────────────────────────────────────────────────────── */
.hero-slider {
  position: relative;
  overflow: hidden;
  height: 560px;
}
.hero-slides { height: 100%; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex;
  align-items: center;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,0,40,0.65) 0%, rgba(10,0,40,0.25) 60%, transparent 100%);
}
.hero-slide-inner {
  position: relative;
  z-index: 2;
  padding-block: 60px;
}
.hero-text { max-width: 560px; }
.hero-label {
  display: inline-block;
  font-family: var(--font-deco);
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: white;
  line-height: 1.15;
  margin-bottom: 16px;
}
.hero-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 440px;
}
/* Slider controls */
.hero-prev, .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-prev:hover, .hero-next:hover { background: rgba(255,255,255,0.3); }
.hero-prev svg, .hero-next svg { width: 20px; height: 20px; }
.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  padding: 0;
}
.hero-dot.active { background: white; transform: scale(1.3); }

/* ─── Feature Strip ──────────────────────────────────────────────────── */
.features-strip {
  background: white;
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon img { width: 56px; height: 56px; object-fit: contain; }
.feature-label {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.03em;
  line-height: 1.4;
  max-width: 120px;
}

/* ─── Editorial Section ──────────────────────────────────────────────── */
.editorial-section {
  padding: 64px 0;
  background: var(--color-bg);
}
.editorial-inner { max-width: 860px; margin-inline: auto; text-align: center; }
.editorial-title {
  font-family: var(--font-sub);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.55;
}
.editorial-title em {
  font-style: normal;
  color: var(--color-primary);
}

/* ─── CTA Duo ────────────────────────────────────────────────────────── */
.cta-duo { padding: 0; }
.cta-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 100%;
  padding: 0;
}
.cta-card {
  position: relative;
  height: 420px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 0, 60, 0.45);
  transition: background var(--transition);
}
.cta-card:hover .cta-card-overlay { background: rgba(20, 0, 60, 0.55); }
.cta-card-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
}
.cta-card-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  color: white;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* ─── Best Sellers ───────────────────────────────────────────────────── */
.bestsellers-section {
  padding: 64px 0 80px;
  background: var(--color-bg);
}
.section-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin: 12px auto 0;
}
.products-grid--home {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.product-card {
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: filter 0.25s ease;
}
.product-card-link { text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; }
.product-card-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #ede8f0;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
/* Assombrissement retire (regle validee : jamais de filtre sur l'image, ombre
   portee a la place) - perdu ce soir, remis en place. Ombre sur la carte
   entiere (.product-card, pas .product-card-img qui est collee bord a bord
   et serait rognee par le overflow:hidden du parent). */
.product-card:hover { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
.product-card-body {
  padding: 16px 4px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}
.product-card-price {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  opacity: 0.65;
  margin-top: auto;
}
.product-card-price .woocommerce-Price-amount { color: inherit; }
.product-card-price del { color: #aaa; font-size: 11px; }
.product-card-actions {
  padding: 0 4px 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateY(0);
}
/* Override WC button in card */
.product-card-actions .button,
.product-card-actions .add_to_cart_button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}
.product-card-actions .button:hover,
.product-card-actions .add_to_cart_button:hover {
  background: var(--color-primary);
  color: white;
}
.bestsellers-cta { text-align: center; margin-top: 16px; }

/* ─── Hero Static ────────────────────────────────────────────────────── */
.hero-static { position: relative; }
.hero-static-bg {
  height: 88vh;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}
.hero-static-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,0,40,0.72) 0%, rgba(10,0,40,0.35) 55%, transparent 100%);
}
.hero-static-inner {
  position: relative;
  z-index: 2;
  padding-block: 60px;
}
.hero-static-eyebrow {
  font-family: var(--font-deco);
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.hero-static-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 600;
  color: white;
  line-height: 1.05;
  margin-bottom: 24px;
  max-width: 680px;
}
.hero-static-desc {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-static-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-hero-outline {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.7);
  padding: var(--btn-pad);
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-hero-outline:hover {
  background: white;
  color: var(--color-primary);
  border-color: white;
}

/* ─── Category header ─────────────────────────────────────────────────
   Migré vers le composant partagé .page-hero le 2026-07-17 (voir plus bas
   et ti_category_hero_media() dans functions.php) — photo ou vidéo, même
   gabarit que les 6 pages éditoriales, plus de repli texte+description. */

/* ─── Category SEO accordion ─────────────────────────────────────────── */
.category-seo-accordion {
  margin-bottom: 32px;
  border: none;
  text-align: center;
}
/* Pages sans fil d'Ariane entre le hero et l'accordéon (ex. Magazine) :
   pas d'espace naturel comme sur les catégories boutique, ajouté ici. */
.magazine-page .category-seo-accordion {
  margin-top: 40px;
}
.category-seo-accordion summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.7);
  user-select: none;
  outline: none;
}
.category-seo-accordion summary::-webkit-details-marker { display: none; }
.category-seo-accordion summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  transition: opacity 0.2s;
}
.category-seo-accordion[open] summary::after { content: '−'; }
.category-seo-accordion__body {
  max-width: 680px;
  margin: 20px auto 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-light);
}

/* ─── TI Statement ────────────────────────────────────────────────────── */
.ti-statement {
  background: #1E1510;
  padding: 60px 24px;
}
.ti-statement__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.ti-statement__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--color-white);
  line-height: 1.2;
  margin: 0 0 18px;
  font-weight: 500;
}
.ti-statement__body {
  font-size: 0.88rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.58);
  margin: 0;
}

/* ─── Process éditorial (remplace Process Strip) ─────────────────────── */
.process-edito { background: var(--color-bg); }

.process-edito__bande {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.process-edito__bande--reverse { direction: rtl; }
.process-edito__bande--reverse > * { direction: ltr; }

.process-edito__photo {
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
}
.process-edito__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.process-edito__bande:hover .process-edito__photo img { filter: brightness(0.92); }

.process-edito__texte {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}
.process-edito__bande--reverse .process-edito__texte { background: var(--color-bg); }

.process-edito__num {
  font-family: var(--font-heading);
  font-size: 5rem;
  color: var(--color-primary);
  opacity: 0.08;
  line-height: 1;
  margin-bottom: -20px;
  display: block;
}
.process-edito__label {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--color-primary);
  margin-bottom: 20px;
}
.process-edito__desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 400px;
}

/* Responsive — Statement + Process éditorial */
@media (max-width: 900px) {
  .ti-statement { padding: 64px 20px; }
  .process-edito__bande { grid-template-columns: 1fr; min-height: auto; }
  .process-edito__bande--reverse { direction: ltr; }
  .process-edito__photo { min-height: 280px; }
  .process-edito__texte { padding: 48px 40px; }
}
@media (max-width: 1024px) {
  .ti-statement { padding: 52px 20px; }
  .process-edito__texte { padding: 36px 24px; }
  .process-edito__num { font-size: 3.5rem; }
  .process-edito__label { font-size: 1.5rem; }
}

/* ─── Mosaic home ─────────────────────────────────────────────────────── */
.ti-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 480px;
  background: var(--color-border);
  gap: 1px;
}

.ti-mosaic__grande {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 0;
}
.ti-mosaic__grande img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.ti-mosaic__grande:hover img { filter: brightness(0.92); }

/* Scrim renforce et plus haut (2026-07-22) : l'ancien degrade retombait a
   transparent trop vite et laissait le surtitre/CTA sur des zones claires
   de la photo (illisibles). Lisibilite assuree quelle que soit l'image en
   dessous, y compris la vraie photo qui remplacera le placeholder. */
.ti-mosaic__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 90px 40px 36px;
  background: linear-gradient(to top, rgba(10,4,40,0.85) 0%, rgba(10,4,40,0.55) 45%, rgba(10,4,40,0.15) 80%, transparent 100%);
}
.ti-mosaic__surtitre {
  display: block;
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.ti-mosaic__titre {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: white;
  line-height: 1.15;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.ti-mosaic__cta {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.ti-mosaic__grande:hover .ti-mosaic__cta { text-decoration: underline; }

.ti-mosaic__petites {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  min-height: 0;
}

.ti-mosaic__petite {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 0;
}
.ti-mosaic__petite img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ti-mosaic__petite:hover img { filter: brightness(0.92); }

.ti-mosaic__tag {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 2px;
}


/* Responsive mosaic — empilement uniquement pour le vrai mobile portrait
   (<=560px) ; au-dela la grille desktop 2 colonnes (fluide par nature) fait
   le travail sans reglage supplementaire. */
@media (max-width: 560px) {
  .ti-mosaic { grid-template-columns: 1fr; height: auto; }
  .ti-mosaic__grande { height: 300px; }
  .ti-mosaic__petites { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .ti-mosaic__petite { height: 220px; }
}
@media (max-width: 480px) {
  .ti-mosaic__petite { height: 180px; }
}

/* ─── CTA simple home ─────────────────────────────────────────────────── */
.home-cta-simple {
  padding: 56px 0;
  background: white;
  text-align: center;
}

.process-step { display: flex; flex-direction: column; gap: 20px; }
.process-step-img {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.process-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.process-step:hover .process-step-img img { filter: brightness(0.92); }
.process-step-body { display: flex; flex-direction: column; gap: 8px; }
.process-step-num {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0.1;
  line-height: 1;
  margin-bottom: -12px;
  display: block;
}
.process-step-label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.process-step-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0;
}

/* Product Axes (technique + couleur) supprimées le 2026-07-09 : redondantes avec le hook
   interactif, voir .hook-word dans la section "Brand strip / hook produit" plus bas. */

/* ─── Home Cats (scroll horizontal) ─────────────────────────────────── */
.home-cats {
  padding: 64px 0;
  background: white;
  overflow: hidden;
}
.home-cats__head {
  margin-bottom: 32px;
}
.home-cats__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.home-cats__track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.track-spacer {
  flex-shrink: 0;
  width: var(--container-pad);
  scroll-snap-align: start;
}
.home-cats__track::-webkit-scrollbar { display: none; }
.home-cat-card {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: start;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-cat-card__img {
  width: 260px;
  height: 340px;
  overflow: hidden;
  border-radius: 14px;
  transition: filter 0.25s ease;
}
.home-cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.home-cat-card:hover .home-cat-card__img { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
.home-cat-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-border);
}
.home-cat-card__label {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
}

/* ─── Home Shop (filtres + scroll horizontal) ────────────────────────── */
.home-shop {
  padding: 64px 0;
  background: white;
}
.home-shop__head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.home-shop__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.home-shop-filters {
  display: flex;
  gap: 6px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.home-shop-filter {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.home-shop-filter:hover { border-color: var(--color-text); }
.home-shop-filter.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: white;
}
.home-shop__all {
  margin-left: auto;
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.home-shop__all:hover { text-decoration: underline; }

.home-shop-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-top: 4px;
  padding-bottom: 20px;
  scrollbar-width: none;
}
.home-shop-track::-webkit-scrollbar { display: none; }
.home-shop-track--hidden { display: none; }

.home-shop-card {
  flex-shrink: 0;
  width: 250px;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}
.home-shop-card__img {
  width: 250px;
  height: 310px;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 14px;
  transition: filter 0.25s ease;
}
.home-shop-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.home-shop-card:hover .home-shop-card__img { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
/* Meta technique/plante ou categorie+matiere (2026-07-28) : meme "template nom
   produit" que la grille boutique standard, jusque-la absent de la home -
   voir ti_product_card_naming() dans functions.php. */
.home-shop-card__meta {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 2px;
}
.home-shop-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-shop-card__detail { font-size: 12px; color: var(--color-text-light); margin: 0 0 6px; }
.home-shop-card__price {
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
}
.home-shop-empty {
  padding: 0 4px;
  font-size: 13px;
  color: #bbb;
}

/* ─── Flèches scroll horizontal (home sections) ──────────────────────── */
.home-cats  { position: relative; }
.home-shop  { position: relative; }

.home-scroll-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.25s;
}
.home-scroll-arrow svg { width: 18px; height: 18px; }
.home-scroll-arrow:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.home-scroll-arrow.is-end,
.home-scroll-arrow.is-start {
  opacity: 0;
  pointer-events: none;
}
.home-scroll-arrow--left {
  right: auto;
  left: 16px;
}
@media (max-width: 1024px) {
  .home-scroll-arrow { width: 36px; height: 36px; right: 10px; }
  .home-scroll-arrow--left { right: auto; left: 10px; }
  .home-scroll-arrow svg { width: 14px; height: 14px; }
}

/* ─── Espace Pro ─────────────────────────────────────────────────────── */
.pro-page { background: var(--color-bg); }
/* Le hero (Espace Professionnel / on travaille avec des boutiques...) utilise
   désormais le composant partagé .page-hero (voir plus haut). */

/* Ce qu'on propose — scroll horizontal plein bord, même mécanique que .home-cats
   (spacer généré par setTrackOffsets() dans main.js, flèches .home-scroll-arrow).
   Remplace la grille 4 colonnes (2026-07-17 suite 9) : sur mobile une grille à 1
   colonne empilait 4 cartes de ~290px pleine largeur, un mur de scroll vertical
   sans fin ; le scroll horizontal montre "il y en a d'autres" d'un coup d'œil et
   aligne la page sur le langage déjà établi (home, La Teinture). */
.pro-offer {
  position: relative;
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.pro-offer__head { margin-bottom: 28px; }
.pro-section-title {
  font-family: var(--font-heading);
  /* 22px -> 30px (retour Yoann 2026-07-28) : la passe d'harmonisation des
     titres de section du 2026-07-15 avait relevé .home-cats__title/
     .home-magazine__title/.home-shop__title/.home-newsletter__title à
     30px, mais jamais .pro-section-title - resté à l'ancien gabarit,
     visuellement plus discret que partout ailleurs sur le site depuis. */
  font-size: 30px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pro-section-sub {
  font-size: 15px;
  color: var(--color-text-light);
  margin-bottom: 40px;
}
.pro-cats {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.pro-cats::-webkit-scrollbar { display: none; }
.pro-cat-card {
  flex-shrink: 0;
  width: 270px;
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: filter 0.25s ease;
}
.pro-cat-img {
  width: 270px;
  height: 195px;
  overflow: hidden;
  background: #f0ede8;
}
.pro-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Ombre sur la carte entiere (.pro-cat-card), pas sur .pro-cat-img : l'image
   est collee aux bords de la carte, qui a elle-meme overflow:hidden - un
   box/drop-shadow sur l'image serait rogne par ce parent. drop-shadow sur la
   carte elle-meme n'est pas auto-rogne par son PROPRE overflow:hidden (a la
   difference de box-shadow), donc pas besoin d'y toucher. */
.pro-cat-card:hover { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
/* Repli de branding tant qu'aucune vraie photo catégorie n'est assignée — un aplat
   teinté avec l'icône de la catégorie plutôt que le rectangle gris WooCommerce, qui
   se lit comme une image cassée. */
.pro-cat-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--color-bg) 0%, rgba(51,0,153,0.08) 100%);
}
.pro-cat-img__icon {
  width: 25%;
  max-width: 56px;
  color: var(--color-primary);
  opacity: 0.55;
}
.pro-cat-img__icon svg { width: 100%; height: 100%; }
.pro-cat-body { padding: 20px 20px 24px; }
.pro-cat-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}
.pro-cat-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0;
}

/* "Pourquoi Tribu Indigo" — reconstruit 2026-07-23 (2e version perdue lors du
   deploiement de ce soir, cf. memoire projet) : passage en 3 colonnes avec
   illustration self-service par carte (.pro-why-item__img, ti-photo-placeholder
   deja fourni par le markup PHP recupere). Design d'origine (liste 2026-07-17,
   pas de boite/juste un filet horizontal) gardee comme fallback mobile. */
.pro-why {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pro-why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pro-why-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pro-why-item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
/* Retour Yoann 2026-07-28 : "images plus petites que le texte qui les
   décrit" - le <img> réel à l'intérieur de .pro-why-item__img n'avait
   aucune règle de taille, donc s'affichait à sa taille native (vignette
   WP -300x300, 300px) au lieu de remplir les ~384px de la colonne. */
.pro-why-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pro-why-item__num {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  color: var(--color-primary);
  opacity: 0.28;
  line-height: 1;
}
.pro-why-item__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pro-why-item__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0;
}
@media (max-width: 1024px) {
  .pro-why { padding: 40px 0 32px; }
  .pro-why-list { display: flex; flex-direction: column; }
  .pro-why-item { flex-direction: row; align-items: flex-start; gap: 16px; padding: 22px 0; border-top: 1px solid var(--color-border); }
  .pro-why-item:last-child { border-bottom: 1px solid var(--color-border); }
  .pro-why-item__img { display: none; }
  .pro-why-item__num { width: 40px; font-size: 1.5rem; }
  .pro-why-item__desc { max-width: 520px; }
}

.pro-cta {
  padding: 80px 0;
  background: var(--color-primary);
}
.pro-cta-inner { text-align: center; max-width: 640px; margin-inline: auto; }
.pro-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
}
.pro-cta-text {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  margin-bottom: 32px;
}
/* Formulaire (remplace le mailto brut) sur fond sombre — le composant .ti-form
   partagé suppose un fond clair (label en var(--color-text)), surchargé ici. */
.pro-cta-form { text-align: left; }
.pro-cta-form .ti-form__label { color: rgba(255,255,255,0.85); }
.pro-cta-form .form-notice { text-align: left; }
.pro-cta-btn {
  background: white;
  color: var(--color-primary);
  border-color: white;
  font-size: 15px;
  padding: 14px 32px;
}
.pro-cta-btn:hover { background: transparent; color: white; border-color: white; }

.pro-catalogue {
  padding: 48px 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.pro-catalogue-inner { max-width: 720px; margin-inline: auto; }
.pro-catalogue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 32px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pro-catalogue-label {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.pro-catalogue-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-light);
  margin: 0;
}

@media (max-width: 1024px) {
  .pro-offer { padding: 32px 0 48px; }
  .pro-cat-card { width: 240px; }
  .pro-cat-img { width: 240px; height: 170px; }
  .pro-catalogue-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pro-cta { padding: 56px 0; }
}

/* ─── CTA card desc (nouveau) ────────────────────────────────────────── */
.cta-card-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 260px;
  margin-inline: auto;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.85);
  margin-top: 0;
}
/* Colonnes egales + texte centre (2026-07-22) : les largeurs 1.4fr/1fr
   donnaient un ecart optique different entre chaque section (colonne large
   avec peu de contenu = grand vide avant la suivante). */
.footer-main {
  padding: 56px 0 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  text-align: center;
}
.footer-main--no-newsletter {
  grid-template-columns: repeat(4, 1fr);
}

/* Brand nav links */
.footer-brand-nav { margin-bottom: 20px; }
.footer-brand-nav li + li { margin-top: 9px; }
.footer-brand-nav a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: color var(--transition);
}
.footer-brand-nav a:hover { color: white; }

/* Social icon */
.footer-socials { display: flex; justify-content: center; gap: 10px; }
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.8);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.footer-socials a:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
  color: white;
}
.footer-socials svg { width: 16px; height: 16px; }

/* Footer columns shared — .footer-brand rejoint la meme regle pour rester
   aligne avec les autres sections depuis le retrait du logo (2026-07-22). */
.footer-col h4,
.footer-brand h4 {
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}
.footer-col ul li + li { margin-top: 9px; }
.footer-col ul a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: white; }

/* Contact */
.footer-contact p {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 8px;
}
.footer-contact p:last-child { margin-bottom: 0; }
.footer-contact a { color: rgba(255,255,255,0.85); transition: color var(--transition); }
.footer-contact a:hover { color: white; }

/* Newsletter — titre et description en blanc et agrandis (2026-07-22) : le
   contraste "petite legende" / "texte normal" utilise sur les autres
   colonnes du footer se voyait trop une fois ce bloc devenu un bandeau
   centre autonome (769-1200px), le rendait aussi trop peu visible. */
.footer-newsletter h4 { font-size: 15px; color: white; }
.footer-newsletter p {
  font-size: 15px;
  line-height: 1.7;
  color: white;
  margin-bottom: 16px;
}
.btn-newsletter {
  display: inline-block;
  padding: 10px 22px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn-newsletter:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
  color: white;
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.11);
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.footer-bottom a { color: rgba(255,255,255,0.4); transition: color var(--transition); }
.footer-bottom a:hover { color: rgba(255,255,255,0.75); }

/* ─── Barre promo ────────────────────────────────────────────────────── */
.promo-bar {
  background: #1E1510;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-accent);
  letter-spacing: 0.06em;
  overflow: hidden;
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
.promo-bar.hidden { display: none; }
.promo-bar__inner { flex: 1; overflow: hidden; height: 40px; }
.promo-bar__viewport { position: relative; height: 40px; }
.promo-bar__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.6s ease, opacity 0.5s ease;
  pointer-events: none;
}
.promo-bar__msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.promo-bar__msg.is-leaving { opacity: 0; transform: translateY(-100%); }
.promo-bar__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  padding: 8px 14px;
  transition: color 0.2s;
}
.promo-bar__close:hover { color: white; }
.promo-bar__close svg { width: 12px; height: 12px; display: block; }

/* ─── Strip de réassurance ───────────────────────────────────────────── */
.reassurance-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.reassurance-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.reassurance-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: var(--font-accent);
  letter-spacing: 0.05em;
  color: var(--color-text);
  white-space: nowrap;
}
.reassurance-item svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-primary); }
.reassurance-item img { width: 110px; height: 110px; flex-shrink: 0; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────── */
.breadcrumb { padding: 16px 0 20px; }
.bc__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bc__item {
  font-size: 12px;
  font-family: var(--font-accent);
  letter-spacing: 0.04em;
  color: rgba(51,51,51,0.45);
}
.bc__item a { color: rgba(51,51,51,0.55); text-decoration: none; transition: color 0.2s; }
.bc__item a:hover { color: var(--color-primary); }
.bc__item--current { color: var(--color-text); }
.bc__sep {
  font-size: 13px;
  color: rgba(51,51,51,0.3);
  padding: 0 7px;
  line-height: 1;
  list-style: none;
}

/* Fil d'Ariane de la fiche produit : jamais plus d'une ligne. La police réduit un peu sur les
   colonnes étroites (clamp), et un scroll horizontal discret sert de filet en dernier recours
   plutôt qu'un retour à la ligne qui gênerait la lecture. */
.product-info .breadcrumb { overflow-x: auto; scrollbar-width: none; }
.product-info .breadcrumb::-webkit-scrollbar { display: none; }
.product-info .bc__list { flex-wrap: nowrap; width: max-content; }
.product-info .bc__item { font-size: clamp(10px, 1.4vw, 12px); white-space: nowrap; }
.product-info .bc__sep { font-size: clamp(11px, 1.4vw, 13px); }

/* ─── Badges produit ─────────────────────────────────────────────────── */
.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.product-badge {
  display: inline-block;
  padding: 4px 9px;
  font-size: 10px;
  font-family: var(--font-accent);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 2px;
}
.product-badge--new  { background: var(--color-primary); color: white; }
.product-badge--fav  { background: #1E1510; color: rgba(255,255,255,0.9); }

/* Badges dans le body carte (sous image, droite, pas sur l'image) */
.product-card-edito__body .product-badges,
.home-shop-card .product-badges {
  position: static;
  flex-direction: row;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 5px;
}

/* Texte déclinaisons produit variable */
.product-card__variants {
  font-size: 11px;
  font-weight: 300;
  color: #aaa;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* ─── Related products slider ────────────────────────────────────────── */
/* overflow-x:hidden ici (pas sur html/body, voir plus haut) : le carrousel
   correctement borne fuyait quand meme au niveau page (2026-07-28, cause
   exacte non isolee) - scope a cette seule section, sans risque pour
   position:sticky ailleurs sur la page (.product-info notamment). */
.related-slider-section { position: relative; padding: 64px 0 80px; overflow-x: hidden; }
.related-slider-head {
  margin-bottom: 28px;
  /* Meme inset que .related-track-spacer ci-dessous (2026-07-28) : le titre
     doit demarrer exactement ou demarrent les cartes, pas sur le padding
     generique du .container. */
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: var(--container-pad);
  max-width: none;
  margin-left: 0;
}
.related-slider__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
}
.related-slider-wrap { overflow: hidden; position: relative; }
/* Fondu doux sur les bords plutot qu'un decoupage net des photos coupees par
   l'ecran (demande Yoann 2026-07-28) - degrade vers le fond de la page
   (#FFF8EF), pas un vrai flou (impraticable en CSS pur sur une image en
   mouvement) mais le meme effet visuel d'adoucissement du bord. */
.related-slider-wrap::before,
.related-slider-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 4px;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.related-slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.related-slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}
@media (max-width: 768px) {
  .related-slider-wrap::before,
  .related-slider-wrap::after { width: 28px; }
}
.related-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-right: var(--container-pad);
  padding-bottom: 4px;
}
.related-slider-track::-webkit-scrollbar { display: none; }
/* Spacer plutot que padding-left sur le track (2026-07-28) : avec
   scroll-snap-type actif, un padding-left sur le conteneur scrollable fait
   "re-snapper" le navigateur sur cette valeur au chargement (constate : la
   fleche gauche restait visible et scrollLeft valait 16 au repos au lieu de
   0, meme apres une remise a zero forcee en JS). Meme piege deja documente
   pour .home-cats__track (voir .track-spacer plus haut) - meme solution ici. */
.related-track-spacer {
  flex: 0 0 max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  scroll-snap-align: start;
  /* Le gap:20px du track (voir .related-slider-track) s'ajoute APRES ce
     spacer comme apres n'importe quel enfant flex - sans cette marge
     negative, la 1ere carte demarre 20px trop loin par rapport au titre. */
  margin-right: -20px;
}
.related-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}
.related-card__img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f6f4f1;
  position: relative;
  margin-bottom: 12px;
  border-radius: var(--radius);
  transition: filter 0.25s ease;
}
.related-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.related-card:hover .related-card__img { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
.related-card__img .product-badge { top: 8px; left: 8px; }
/* Meta technique/plante ou categorie+matiere (2026-07-28) : meme "template nom
   produit" que la grille boutique standard (archive-product.php), jusque-la
   absent de cette section - voir ti_product_card_naming() dans functions.php. */
.related-card__meta {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 2px;
}
.related-card__name { font-size: 15px; margin-bottom: 4px; line-height: 1.4; }
.related-card__detail { font-size: 12px; color: var(--color-text-light); margin: 0 0 4px; }
.related-card__price {
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .related-slider-section { padding: 40px 0 48px; }
}

/* ─── Lightbox image produit ─────────────────────────────────────────── */
.product-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.product-lightbox.open { display: flex; }
.product-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9);
}
.product-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  z-index: 1;
  padding: 8px;
  transition: color 0.2s;
}
.product-lightbox__close:hover { color: white; }
.product-lightbox__close svg { width: 20px; height: 20px; display: block; }
.product-lightbox__img-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-lightbox__img-wrap img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
/* Curseur zoom sur galerie */
.woocommerce-product-gallery__image a { cursor: zoom-in; display: block; }
/* Déclencheur natif WooCommerce (icône loupe plein écran, PhotoSwipe) jamais
   stylé par le thème (2026-07-28) : retombait en position naturelle dans le
   flux, tout en haut de la galerie, minuscule. PhotoSwipe n'est pas chargé sur
   ce thème (le zoom au survol suffit) — masqué plutôt que repositionné. */
.woocommerce-product-gallery__trigger { display: none; }

/* ─── FAQ ────────────────────────────────────────────────────────────── */
/* Pas de hero (2026-07-25) : page utilitaire, va droit aux questions. */
.faq-main .container { margin-top: 56px; }
.faq-main .page-title {
  /* Plus grand que le .page-title générique (22-32px) : trop proche des 22px
     des .faq-section__title juste en dessous, les deux se confondaient en un
     seul bloc de titre sans hiérarchie claire. */
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 48px;
}

.faq-section { margin-bottom: 56px; }

.faq-section__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question span { flex: 1; }

.faq-item__icon {
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  color: rgba(51,51,51,0.35);
  transition: transform 0.25s ease;
}
.faq-item[open] > .faq-item__question .faq-item__icon { transform: rotate(180deg); }
.faq-item[open] > .faq-item__question { color: var(--color-primary); }

.faq-item__answer {
  padding: 0 24px 24px 0;
  color: rgba(51,51,51,0.72);
  font-size: 16px;
  line-height: 1.8;
}
.faq-item__answer p { margin-bottom: 10px; }
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-item__answer a { color: var(--color-primary); text-decoration: underline; }
/* Description produit collee au bord de l'accordeon, juste au-dessus de
   l'onglet suivant (2026-07-28, retour Yoann) - marge supplementaire scopee
   a l'accordeon produit uniquement (pas la FAQ, meme composant partage). */
.ti-product-accordion .faq-item__answer { padding-bottom: 40px; }

/* ─── Pages génériques ───────────────────────────────────────────────── */
.page-content {
  padding: 48px 0 80px;
  min-height: 60vh;
}
.page-article { max-width: 860px; }
.page-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
}
.entry-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
.entry-content h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 32px 0 12px; }
.entry-content h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin: 24px 0 10px; }
.entry-content p { margin-bottom: 18px; }
.entry-content ul, .entry-content ol { padding-left: 24px; margin-bottom: 18px; }
.entry-content li { margin-bottom: 5px; }
.entry-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #220077; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
.entry-content table th, .entry-content table td { padding: 10px 16px; border: 1px solid var(--color-border); }
.entry-content table th { background: #f9f5ef; font-weight: 600; }

/* ─── WooCommerce — Panier ───────────────────────────────────────────── */
.woocommerce-cart .woocommerce {
  width: 100%;
  max-width: none;
}
.woocommerce-checkout .woocommerce {
  max-width: 960px;
  margin-inline: auto;
}

/* Cart table */
.woocommerce-cart-form table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.shop_table th {
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa;
  padding: 12px 16px;
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}
.shop_table td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.shop_table .product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); }
.shop_table .product-name a { color: var(--color-text); font-weight: 500; }
.shop_table .product-name a:hover { color: var(--color-primary); }
.shop_table .product-price, .shop_table .product-subtotal { color: var(--color-primary); font-family: var(--font-accent); font-weight: 500; }
.shop_table .product-remove a { color: #ccc; font-size: 18px; transition: color var(--transition); }
.shop_table .product-remove a:hover { color: #e00; }

/* Qty in cart */
.woocommerce-cart-form .quantity .qty {
  width: 56px; height: 40px; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: 15px;
}
.woocommerce-cart-form .actions { padding: 20px 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.woocommerce-cart-form .button,
.woocommerce-cart-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px;
  background: var(--color-primary); color: white;
  border: 2px solid var(--color-primary); border-radius: var(--radius);
  font-family: var(--font-accent); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: background var(--transition);
}
.woocommerce-cart-form .button:hover,
.woocommerce-cart-form input[type="submit"]:hover { background: #220077; border-color: #220077; }

/* Coupon */
.coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.coupon input[type="text"] {
  padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  flex: 1; min-width: 160px;
}

/* Cart totals — voir section "Panier custom" plus bas */

/* ─── WooCommerce — Checkout ─────────────────────────────────────────── */
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
/* .col-1/.col-2 gardaient le float:left/right + width:48% natifs de WooCommerce (woocommerce-layout.css),
   jamais neutralisés ici — même bug que #customer_login (déjà documenté plus bas), en pire : en plus de
   rétrécir les colonnes à 48% de leur cellule, le float hérité cassait l'auto-placement grid lui-même
   (colonne facturation rendue dans la cellule de droite, colonne infos complémentaires dans celle de
   gauche — vérifié en isolant chaque correction séparément avant de conclure aux deux). */
/* !important necessaire : .woocommerce .col2-set .col-1/.col-2 (woocommerce-layout.css)
   a 3 classes (specificite 0,3,0) contre 2 ici (0,2,0) - gagne malgre tout sans
   !important, meme si cette regle vient plus tard dans le fichier. Oubli lors du
   premier fix de ce bug (colonnes toujours a 48%, signale une 2e fois par Yoann). */
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { float: none !important; width: 100% !important; margin: 0 !important; }
@media (min-width: 481px) {
  /* Placement explicite seulement au-dessus du seuil mobile (#customer_details repasse à 1 colonne
     en dessous de 481px, cf. plus bas — l'auto-placement suffit là, pas besoin de forcer). */
  .woocommerce-checkout #customer_details .col-1 { grid-column: 1; }
  .woocommerce-checkout #customer_details .col-2 { grid-column: 2; }
}
.woocommerce-checkout h3 {
  font-family: var(--font-heading); font-size: 18px; font-weight: 600;
  color: var(--color-text); margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

/* Checkout "sexy TI" (2026-07-23, demande explicite de Yoann) : les 2 blocs
   flottaient directement sur le fond creme, seulement separes par un filet
   sous le titre - meme traitement carte que le reste du site (fond blanc,
   bordure, radius, ombre douce) pour donner une vraie structure visuelle. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 2px 12px rgba(51,0,153,0.04);
}
@media (max-width: 640px) {
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout #order_review {
    padding: 20px;
  }
}

/* Form fields */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label {
  display: block;
  font-family: var(--font-accent); font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text);
  margin-bottom: 6px;
}
.woocommerce form .form-row label .required { color: var(--color-primary); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  background: white; transition: border-color var(--transition);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51,0,153,0.08);
}
.woocommerce form .form-row textarea { resize: vertical; min-height: 80px; }

/* Order review */
#order_review_heading {
  font-family: var(--font-heading); font-size: 18px; font-weight: 600;
  color: var(--color-text); margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}
#order_review { margin-top: 40px; }
table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.woocommerce-checkout-review-order-table th {
  font-family: var(--font-accent); font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: #aaa;
  padding: 10px 0; border-bottom: 2px solid var(--color-border); text-align: left;
}
table.woocommerce-checkout-review-order-table td {
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
table.woocommerce-checkout-review-order-table .order-total td {
  color: var(--color-primary); font-size: 16px; font-weight: 600;
}
/* Meme bug de largeur que .cart_totals (panier, corrige le 28/07) mais sur
   une AUTRE table : celle-ci (table.woocommerce-checkout-review-order-table,
   recap de commande au checkout) n'etait pas couverte par ce fix, scope a
   l'epoque a .cart_totals uniquement - retour Yoann : "toujours pas
   optimise, ~60% de la largeur". Meme cause (thead/tbody/tfoot restes en
   vraie mise en page tableau), meme remede : sortis du modele tableau,
   chaque ligne (produit, sous-total, total - PAS Expédition, qui garde son
   propre bloc vertical pleine largeur) reconvertie en flex libellé-gauche/
   valeur-droite pour un rendu identique à l'ancien mais fiable en largeur. */
table.woocommerce-checkout-review-order-table,
table.woocommerce-checkout-review-order-table thead,
table.woocommerce-checkout-review-order-table tbody,
table.woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
}
table.woocommerce-checkout-review-order-table tr:not(.woocommerce-shipping-totals) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
table.woocommerce-checkout-review-order-table tr:not(.woocommerce-shipping-totals) > th,
table.woocommerce-checkout-review-order-table tr:not(.woocommerce-shipping-totals) > td {
  display: block;
  width: auto;
}
/* woocommerce.css impose son propre fond violet WooCommerce par défaut
   (rgba(129,110,153,.14), leur charte, pas la nôtre) sur .woocommerce-checkout
   #payment - jamais retouché jusqu'ici, tranchait avec le traitement carte
   blanche donné à #customer_details/#order_review juste au-dessus (retour
   Yoann 2026-07-28 : "ça dénote avec toutes les pages... custom aux
   couleurs, police etc de Tribu Indigo"). Même carte blanche ici. */
.woocommerce-checkout #payment {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(51,0,153,0.04);
}
#payment { margin-top: 28px; }
#payment .payment_methods { list-style: none; padding: 0; margin-bottom: 20px; }
#payment .payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
#payment .payment_methods li:last-child { border-bottom: none; }
#payment .payment_methods li label {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--color-text); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
#payment .payment_methods li input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}
#payment .place-order { margin-top: 24px; }
#place_order {
  display: block; width: 100%; padding: 16px;
  background: var(--color-primary); color: white;
  border: none; border-radius: var(--radius);
  font-family: var(--font-accent); font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: background var(--transition);
}
#place_order:hover { background: #220077; }

/* ─── WooCommerce — Mon compte ───────────────────────────────────────── */
.woocommerce-account .wc-main {
  padding: 52px var(--container-pad) 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  box-sizing: border-box;
  width: 100%;
}

/* Non connecté : formulaire login/register centré */
.woocommerce-account:not(.logged-in) .woocommerce {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* Connecté : nav horizontale (.ti-account__nav-list) + contenu, empilés en bloc
   simple. Ancien layout grid 200px/1fr (nav laterale verticale) obsolete depuis
   le passage a des onglets horizontaux (.ti-account gere son propre .container
   centre) - laisse en place, la colonne 200px vide poussait tout le contenu
   vers la droite au lieu de le centrer. */
.logged-in.woocommerce-account .woocommerce {
  width: 100%;
}
/* Formulaire login / register (non connecté) — empilés, "Nouveau client ?"
   (inscription) au-dessus de "Déjà client ?" (connexion). L'ordre DOM du
   template WooCommerce est fixe (login rendu avant register) : réordonné
   visuellement via grid-row plutôt que de dupliquer le template en entier. */
.woocommerce-account:not(.logged-in) #customer_login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  max-width: 520px;
  margin-inline: auto;
}
/* Les colonnes gardent le float:left/right + width:48% natifs de WooCommerce
   (woocommerce-layout.css, .woocommerce-page .col2-set .col-1/.col-2), jamais
   neutralisés quand le thème est passé en grid ici — les deux systèmes de mise
   en page entraient en conflit (colonnes rétrécies à 48% de leur cellule grid).
   Spécificité : besoin de l'ID pour battre les 3 classes de la règle WooCommerce. */
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
  float: none;
  width: 100%;
  margin: 0;
}
/* u-column1 = connexion ("Déjà client ?"), u-column2 = inscription ("Nouveau
   client ?") — placement explicite plutôt qu'auto-placement, cf. commentaire
   plus haut sur le bug d'auto-placement jamais isolé précisément. */
.woocommerce-account:not(.logged-in) #customer_login .u-column2 { grid-row: 1; }
.woocommerce-account:not(.logged-in) #customer_login .u-column1 { grid-row: 2; }
.woocommerce-account:not(.logged-in) #customer_login h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}
/* Habillage couleur de marque — les formulaires login/register n'avaient aucun
   style dédié, ils héritaient d'un défaut WooCommerce Blocks (bordure/radius
   gris-mauve #cfc8d8, bouton gris #e9e6ed) hors charte. Repris avec les tokens
   du thème, même traitement que les autres cartes du site (fond blanc + bordure
   + radius) et même bouton que .btn-primary ailleurs sur le site. */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
/* Boutons centrés, même gabarit pour "Créer un compte" et "Se connecter" (même
   règle .button pour les deux, donc identiques par construction). Le bouton
   login flotte à gauche par défaut dans WooCommerce (accolé à la case "Se
   souvenir de moi") — retiré pour permettre le centrage. */
.woocommerce-account:not(.logged-in) #customer_login .button {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  float: none;
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 44px;
  transition: background var(--transition), border-color var(--transition);
}
.woocommerce-account:not(.logged-in) #customer_login .button:hover {
  background: #220077;
  border-color: #220077;
}
/* Ligne case "Se souvenir de moi" + bouton (form-row sans -wide, contrairement
   aux champs identifiant/mot de passe) : empilée et centrée plutôt que le float
   d'origine, pour que le bouton puisse se centrer proprement. */
.woocommerce-account:not(.logged-in) #customer_login .form-row:not(.form-row-wide) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.woocommerce-account:not(.logged-in) #customer_login .lost_password {
  text-align: center;
  margin-top: 16px;
}
.woocommerce-account:not(.logged-in) #customer_login .lost_password a {
  color: var(--color-primary);
}
.woocommerce-account:not(.logged-in) #customer_login .lost_password a:hover {
  text-decoration: underline;
}
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-light);
}
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-link {
  color: var(--color-primary);
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--color-border); }
.woocommerce-MyAccount-navigation ul li a {
  display: block; padding: 12px 0;
  font-family: var(--font-accent); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--color-text);
  transition: color var(--transition);
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--color-primary); }
.woocommerce-MyAccount-content h2 {
  font-family: var(--font-heading); font-size: 20px; font-weight: 600;
  color: var(--color-text); margin-bottom: 20px;
}
.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-orders-table th {
  font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #aaa; padding: 10px 12px;
  border-bottom: 2px solid var(--color-border); text-align: left;
}
.woocommerce-orders-table td { padding: 14px 12px; border-bottom: 1px solid var(--color-border); }
.woocommerce-orders-table .button {
  padding: 6px 14px; background: var(--color-primary); color: white;
  border-radius: var(--radius); font-family: var(--font-accent);
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background var(--transition);
}
.woocommerce-orders-table .button:hover { background: #220077; color: white; }

/* WC notices */
.woocommerce-info,
.woocommerce-error {
  list-style: none; padding: 14px 20px; border-radius: var(--radius);
  font-size: 14px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Bleu générique remplacé par la palette TI (retour Yoann 2026-07-28 : le
   checkout "dénote" par endroits face au reste du site déjà personnalisé -
   cette notice "info" (ex. "Avez-vous un code promo ?") restait le bleu
   par défaut de WooCommerce, jamais retouché). */
.woocommerce-info { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
.woocommerce-info a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}
.woocommerce-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
/* !important nécessaire : woocommerce.css a un sélecteur plus spécifique
   (.woocommerce a.button, un élément de plus) qui gagnerait sinon sur
   background/color/padding/border-radius, pas seulement la couleur. */
.woocommerce-info .button {
  padding: 6px 16px !important; background: var(--color-primary) !important; color: white !important;
  border-radius: var(--radius) !important; font-family: var(--font-accent);
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
}

/* Notices "success" (ex. ajout au panier) en toast flottant plutôt qu'en
   bandeau pleine largeur (2026-07-28, retour Yoann : "fait cheap", pousse
   tout le contenu). Erreurs/infos (validation panier, checkout...) gardent
   le bandeau classique ci-dessus : ce sont des messages qui doivent rester
   visibles/actionnables, pas s'effacer tout seuls comme une confirmation.
   .woocommerce-message:empty masque le message Boxtal vidé par le filtre
   woocommerce_add_success (functions.php). */
.woocommerce-message:empty { display: none; }
.woocommerce-notices-wrapper:has(.woocommerce-message) {
  position: fixed;
  top: calc(var(--header-height) + 24px);
  right: 24px;
  z-index: 2000;
  width: 360px;
  max-width: calc(100vw - 48px);
  pointer-events: none;
}
.woocommerce-message {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
  padding: 16px 18px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  pointer-events: auto;
  animation: ti-toast-life 5s ease forwards;
}
.woocommerce-message::before { display: none; }
.woocommerce-message .button {
  flex-shrink: 0;
  padding: 6px 14px !important;
  background: var(--color-primary) !important;
  color: white !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@keyframes ti-toast-life {
  0%   { opacity: 0; transform: translateX(24px); }
  8%   { opacity: 1; transform: translateX(0); }
  88%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(24px); visibility: hidden; }
}
@media (max-width: 640px) {
  .woocommerce-notices-wrapper:has(.woocommerce-message) {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}

/* ─── Thank You / Order Confirmation ────────────────────────────────── */
.thankyou-page { padding: 64px 0 80px; }

.thankyou-header { text-align: center; max-width: 560px; margin: 0 auto 56px; }
.thankyou-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #f0fff4; border: 2px solid #86efac;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
  color: #166534;
}
.thankyou-icon--failed { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.thankyou-title {
  font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px);
  font-weight: 600; color: var(--color-text); margin-bottom: 12px;
}
.thankyou-desc { font-size: 16px; color: #666; line-height: 1.65; margin-bottom: 10px; }
.thankyou-ordernumber { font-size: 14px; color: #999; }

.thankyou-body { max-width: 680px; margin: 0 auto; }

.thankyou-section { margin-bottom: 40px; }
.thankyou-section-title {
  font-family: var(--font-heading); font-size: 16px; font-weight: 600;
  color: var(--color-text); padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border); margin-bottom: 20px;
}

.thankyou-items { width: 100%; border-collapse: collapse; font-size: 14px; }
.thankyou-items th {
  font-family: var(--font-accent); font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: #aaa;
  padding: 10px 0; border-bottom: 2px solid var(--color-border); text-align: left;
}
.thankyou-items td { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.thankyou-item-name { color: var(--color-text); font-weight: 500; }
.thankyou-item-qty { color: #999; font-weight: 400; margin-left: 4px; }
.thankyou-total-row th,
.thankyou-total-row td { color: var(--color-primary); font-size: 16px; font-weight: 600; border-bottom: none; padding-top: 18px; }
.text-right { text-align: right; }

.thankyou-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.thankyou-address {
  font-style: normal; font-size: 14px; color: #555; line-height: 1.7;
  background: #faf8f5; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.thankyou-footer {
  max-width: 680px; margin: 48px auto 0;
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid var(--color-border);
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px;
  background: transparent; color: #999;
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--font-accent); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: color var(--transition);
}
.btn-ghost:hover { color: var(--color-text); }

/* ─── Page 404 ───────────────────────────────────────────────────────── */
.error-page { padding: 80px 0; }
.error-inner { max-width: 560px; }
.error-code {
  font-family: var(--font-heading); font-size: clamp(80px, 12vw, 140px);
  font-weight: 600; color: var(--color-border); line-height: 1; margin-bottom: 0;
}
.error-title {
  font-family: var(--font-heading); font-size: clamp(22px, 3vw, 32px);
  font-weight: 600; color: var(--color-text); margin-bottom: 12px;
}
.error-desc { font-size: 16px; color: #999; margin-bottom: 32px; }
.error-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: var(--radius);
  font-family: var(--font-accent); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--color-primary);
  border: 2px solid var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.btn-outline:hover { background: var(--color-primary); color: white; }

/* ─── Page recherche ─────────────────────────────────────────────────── */
.search-page { padding: 48px 0 80px; }
.search-header { margin-bottom: 40px; }
.search-header h1 {
  font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600; color: var(--color-text); margin-bottom: 6px;
}
.search-header h1 em { font-style: normal; color: var(--color-primary); }
.search-count { font-size: 14px; color: #aaa; margin-bottom: 20px; }
.search-inline-form {
  display: flex; align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: white; overflow: hidden; max-width: 480px;
}
.search-inline-form input[type="search"] {
  flex: 1; border: none; outline: none; padding: 10px 16px;
  font-family: var(--font-body); font-size: 15px; color: var(--color-text);
  background: transparent;
}
.search-inline-form button {
  padding: 0 16px; color: var(--color-primary);
  display: flex; align-items: center; height: 44px;
}
.search-section { margin-bottom: 56px; }
.search-section-title {
  font-family: var(--font-heading); font-size: 18px; font-weight: 600;
  color: var(--color-text); margin-bottom: 24px; padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}
.search-empty { font-size: 15px; color: #999; padding: 40px 0; }
.search-empty a { color: var(--color-primary); }

/* ─── Shop — Archive boutique ────────────────────────────────────────── */
.shop-loop { padding-bottom: 80px; }
/* Grille produits un peu plus respirante que le container standard (2026-07-19,
   demande explicite : garder 4 colonnes desktop mais grignoter la largeur). */
.shop-loop .container { max-width: 1360px; }

.shop-header {
  padding: 48px 0 0;
}
.shop-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 6px;
}
.shop-header p {
  font-size: 14px;
  color: #999;
}
.shop-header--subcat { text-align: center; }
.shop-header--subcat h1 { font-size: clamp(28px, 5vw, 44px); }
.shop-header--brand h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.shop-header__desc {
  max-width: 1100px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-light);
}
.shop-header__desc p { margin-bottom: 10px; }
.shop-header__desc p:last-child { margin-bottom: 0; }

.category-filter { padding: 32px 0 40px; }
.category-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  justify-content: center;
}
.category-filter-list li { list-style: none; }
.category-filter-list a {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.category-filter-list a:hover { border-color: var(--color-text); }
.category-filter-list a.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.woocommerce-result-count {
  font-size: 13px;
  color: #bbb;
  margin: 24px 0 0;
  display: block;
}
.woocommerce-ordering {
  float: right;
  margin: 20px 0 0;
}
.woocommerce-ordering select {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  background: white;
  cursor: pointer;
}

.products-grid--shop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  clear: both;
}

/* ─── Boutique — grille éditoriale ───────────────────────────────────── */
.shop-edito {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 28px;
  margin-top: 40px;
  clear: both;
}

.product-card-edito {
  grid-column: span 3; /* rangée de 4 */
  background: transparent;
  overflow: hidden;
  position: relative;
  transition: filter 0.25s ease;
}

.product-card-edito__link {
  display: block;
  text-decoration: none;
}

.product-card-edito__img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #ede8df;
  border-radius: 18px;
}
.product-card-edito__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
/* Assombrissement retire (regle validee : ombre portee, jamais de filtre sur
   l'image) - perdu ce soir, remis en place. Ombre sur la carte entiere via
   filter:drop-shadow (pas box-shadow sur .product-card-edito__img, qui serait
   rognee par le overflow:hidden du parent - necessaire ici pour cacher
   .product-card-edito__action hors champ au repos, cf plus bas). */
.product-card-edito:hover { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }

.product-card-edito__body {
  padding: 16px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Utilitaire standard (reconstruit 2026-07-23, cf memoire) : cache visuellement
   sans retirer du DOM, pour le titre SEO complet garde pour Google/lecteurs
   d'ecran sur les cartes produit qui affichent technique/matiere/couleur a la
   place. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-card-edito__title {
  font-family: var(--font-body);
  /* Harmonise (2026-07-23) avec .product-card-edito__type (14->15px, meme
     traitement que le gabarit "textile") plutot que 17px/600 - toutes les
     tailles de noms produit des grilles alignees sur ce meme repere, un peu
     plus grand pour tous plutot que reduit ici uniquement. */
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.35;
  /* Max 2 lignes + taille reduite quand la grille passe a 3/2 colonnes
     (2026-07-22) : a taille fixe, un titre long finissait sur 3 lignes sur
     les cartes etroites, ce qui poussait le prix trop bas. Pas de
     min-height ici : ca reservait toujours 2 lignes meme pour un titre
     court, laissant un vide entre le titre et le prix. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-card-edito__price {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  color: var(--color-accent);
  font-weight: 500;
}

/* Carte produit repensee (technique+plante / categorie+matiere+couleur) -
   reconstruit 2026-07-23, ce CSS n'existait pas du tout (les 3 lignes
   s'affichaient avec le style par defaut du navigateur, sans mise en forme). */
.product-card-edito__meta {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 2px;
}
.product-card-edito__type {
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}
.product-card-edito__detail {
  font-size: 12px;
  color: var(--color-text-light);
  margin: 2px 0 0;
}

.product-card-edito__action {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--color-primary);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.product-card-edito:hover .product-card-edito__action { transform: translateY(0); }
.product-card-edito__action .button,
.product-card-edito__action .ajax_add_to_cart {
  display: block;
  text-align: center;
  padding: 14px;
  color: white !important;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  width: 100%;
}

/* ─── CTA éditorial ──────────────────────────────────────────────────── */
.shop-cta {
  grid-column: span 3;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-text);
  text-decoration: none;
  transition: filter 0.25s ease;
}
/* drop-shadow (pas box-shadow) : .shop-cta a son propre overflow:hidden pour
   le crop de l'image, qui rognerait un box-shadow sur ce meme element. */
.shop-cta:hover { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }
.shop-cta img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
/* Texte fixe plutot que revele au survol (2026-07-28, demande Yoann) : sur
   mobile il ny a pas de survol, le nom de la destination (La Teinture /
   Nos engagements) etait donc invisible en permanence sur ces vignettes. */
.shop-cta__label {
  position: absolute;
  bottom: 20px; left: 24px;
  color: white;
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Responsive boutique éditoriale — schéma logique par taille d'écran :
   2 colonnes (mobile portrait) / 3 colonnes (mobile paysage, tablette) /
   4 colonnes (desktop, règle de base ci-dessus, aucun changement). */
@media (min-width: 561px) and (max-width: 1024px) {
  .shop-edito { grid-template-columns: 1fr 1fr 1fr; gap: 32px 20px; }
  .product-card-edito { grid-column: span 1; }
  .product-card-edito__action { position: static; transform: none; }
  .shop-cta { grid-column: span 1; }
  .product-card-edito__title, .product-card-edito__type { font-size: 15px; }
}
@media (max-width: 560px) {
  .shop-edito { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .product-card-edito      { grid-column: span 1; }
  .product-card-edito__action { position: static; transform: none; }
  .shop-cta { grid-column: span 1; }
  .product-card-edito__title, .product-card-edito__type { font-size: 14px; }
}

/* Pagination : texte simple, pas de carre borde (2026-07-22) — l'ancien
   style (case 36x36 bordee, remplissage plein sur hover/page courante)
   jugee pas assez esthetique par Yoann. Remplace par des chiffres nus,
   page courante en gras + soulignee, coherent avec .archive-pagination
   et .magazine-pagination changes en meme temps plus bas. */
.woocommerce-pagination { clear: both; text-align: center; padding: 40px 0 0; }
.woocommerce-pagination .page-numbers {
  /* woocommerce.css cible ce <ul> via ".woocommerce nav.woocommerce-pagination
     ul" (plus specifique que notre selecteur ici : 2 classes + 3 types
     contre 2 classes + 1 type) et lui impose une bordure + margin. !important
     necessaire pour gagner, meme motif deja documente plus bas dans ce
     fichier pour la galerie WC. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  border: none !important;
  margin: 0 !important;
}
.woocommerce-pagination .page-numbers li {
  list-style: none;
  /* Meme probleme de specificite que le <ul> ci-dessus : woocommerce.css
     ajoute un border-right sur chaque <li> via ".woocommerce
     nav.woocommerce-pagination ul li", c'est ce qui dessinait les traits
     verticaux entre chaque chiffre. */
  border-right: none !important;
}
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 5px;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 14px;
  border: 1px solid transparent;
  color: var(--color-text-light);
  background: transparent;
  transition: color var(--transition), border-color var(--transition);
}
.woocommerce-pagination .page-numbers li a:hover {
  color: var(--color-primary);
  background: transparent !important;
  border-color: transparent !important;
}
.woocommerce-pagination .page-numbers li span.current {
  /* !important necessaire partout ici : woocommerce.css cible ".woocommerce
     nav.woocommerce-pagination ul li span.current", plus specifique que ce
     selecteur (4 types contre 2) - le fond gris-mauve par defaut de WC gagnerait
     sinon, et le border shorthand de la regle de base ne s'applique pas non
     plus sur cet element (d'ou border-*-width/style explicites, pas juste
     border-bottom-color). */
  color: var(--color-primary) !important;
  font-weight: 600;
  background: transparent !important;
  border-style: solid !important;
  border-width: 0 0 2px 0 !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-primary) !important;
}

/* Scopé à .shop-loop (archive-product.php, seul template qui déclenche woocommerce_no_products_found) :
   .woocommerce-info seul collisionnait avec la notice générique WC (même spécificité, cassait
   par exemple le bouton "Parcourir les produits" sur Mon compte > Commandes vide). */
.shop-loop .woocommerce-info {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  font-size: 15px;
  text-align: center;
  margin: 40px 0;
  color: #999;
}

/* ─── Single product ─────────────────────────────────────────────────── */
.single-product-page { padding: 0 0 80px; }

/* Galerie en plein bord de navigateur (référence tikamoon.com, décision 2026-07-09) :
   la mise en page casse la contrainte de .container pour la photo, la colonne résumé
   reste alignée sur la marge habituelle du site. */
/* Alternance blanc/beige façon home (2026-07-09) : bande 1 (photo + résumé) en blanc,
   la photo reste collée en haut (aucun padding-top ici), le fond descend jusqu'à la bande
   beige suivante (padding-bottom, pas margin, pour qu'aucun liseré beige ne se glisse entre). */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-bottom: 56px;
  background: var(--color-white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.product-info {
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

/* WC gallery — !important nécessaire : woocommerce.css charge des sélecteurs plus
   spécifiques (ex. ".woocommerce div.product div.images img") qui gagnent sinon
   sur la cascade normale malgré le chargement plus tardif de ce fichier. */
.woocommerce-product-gallery {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
}
.woocommerce-product-gallery__wrapper {
  flex: 1 1 0% !important;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* :not([style]) : la largeur ci-dessous ne sert que de repli avant l'init JS
   du flexslider WooCommerce, qui pose ensuite sa propre largeur inline
   (width:N00%, un multiple du nombre de slides) pour faire glisser la piste
   horizontale — un !important sur la largeur ici entrait en conflit avec cette
   largeur JS et cassait le changement de slide au clic sur une vignette. */
.woocommerce-product-gallery__wrapper:not([style]) {
  width: 100% !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce-product-gallery__image--placeholder,
.woocommerce-product-gallery__image--placeholder img {
  display: block;
  width: 100% !important;
  height: auto;
}
.woocommerce-product-gallery__image--placeholder {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce-product-gallery__image--placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vignettes galerie produit — une seule ligne, scrollable au-delà de 2,5
   visibles (2026-07-28) : la 3e vignette coupée signale qu'il y en a plus,
   même pattern que .home-cats__track/.category-filter-list. La photo active
   (flex-active, toujours 1re dans le DOM — ne pas la déplacer, le clic->slide
   du flexslider WooCommerce s'appuie sur l'ordre réel des <li>) est renvoyée
   en dernière position visuellement via CSS order, sans toucher au DOM. */
.flex-control-thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 8px;
  width: 100% !important;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Priorite explicite au scroll horizontal natif (2026-07-28) - complement
     CSS du stopPropagation() en JS, voir main.js. */
  touch-action: pan-x;
}
.flex-control-thumbs::-webkit-scrollbar { display: none; }
.flex-control-thumbs li {
  flex: 0 0 calc((100% - 16px) / 2.5);
  scroll-snap-align: start;
  order: 0;
}
.flex-control-thumbs li:first-child { order: 1; }
.flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.flex-control-thumbs li img.flex-active { border-color: var(--color-primary); }

/* Flèches injectées en JS (main.js) autour de .flex-control-thumbs, dans un
   wrapper .gallery-thumbs-row — même composant visuel que .home-scroll-arrow,
   dimensions réduites pour ce contexte plus petit. */
.gallery-thumbs-row { position: relative; display: flex; align-items: center; }
/* Dégradé de bord : signale qu'il y a d'autres vignettes à droite, même
   pattern que .category-filter::after — masqué une fois arrivé au bout
   (classe .is-end posée par updateGalleryArrows() dans main.js). */
.gallery-thumbs-row::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--color-white) 75%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s;
}
.gallery-thumbs-row.is-end::after { opacity: 0; }
.gallery-thumbs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  color: var(--color-text);
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.gallery-thumbs-arrow svg { width: 14px; height: 14px; }
.gallery-thumbs-arrow:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.gallery-thumbs-arrow--left { left: -4px; }
.gallery-thumbs-arrow--right { right: -4px; }
.gallery-thumbs-arrow.is-start,
.gallery-thumbs-arrow.is-end { opacity: 0; pointer-events: none; }

/* Product info panel */
.product-info {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  padding-top: 36px;
}
/* .product-cat-breadcrumb supprimée le 2026-07-09 : remplacée par .breadcrumb (ti_breadcrumb)
   directement dans .product-info, voir règle .product-info .breadcrumb ci-dessous.
   padding-top ajouté sur .product-info (pas .product-gallery) : la photo reste collée en haut
   de page, seul le texte respire un peu, le fil d'Ariane ne touche plus le header. */
.product-info .breadcrumb { padding: 0 0 14px; }
.product-info .product_title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: 16px;
}
.product-info .woocommerce-product-rating { margin-bottom: 16px; }
.product-info .price {
  font-family: var(--font-accent);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 20px;
  display: block;
}
.product-info .price del { color: #bbb; font-size: 16px; margin-right: 8px; }
.product-info .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 24px;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}
/* Puces disparues sous le reset global "ul { list-style: none; }" (2026-07-28) —
   remises ici, avec un peu plus d'air entre chaque ligne pour la lecture. */
.woocommerce-product-details__short-description ul {
  list-style: disc;
  padding-left: 1.1em;
}
.woocommerce-product-details__short-description li {
  margin-bottom: 8px;
  line-height: 1.8;
}
.woocommerce-product-details__short-description li:last-child { margin-bottom: 0; }

/* Variations — la mise en page <table> par defaut de WooCommerce negocie les
   largeurs de colonnes de facon peu previsible (gros espace horizontal entre
   le label et le champ, difficile a controler proprement). Passe en blocs
   verticaux (label au-dessus, champ en dessous) - plus simple a maitriser,
   toujours le meme <table>/<tr>/<th>/<td> semantique en dessous. */
.variations { margin-bottom: 16px; width: 100%; }
.variations tbody, .variations tr, .variations th, .variations td { display: block; width: 100%; padding: 0; }
.variations tr { margin-bottom: 14px; }
.variations tr:last-child { margin-bottom: 0; }
.variations .label label {
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: left;
  margin-bottom: 8px;
  display: block;
}
.variations .value select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--color-text);
  background: white;
  cursor: pointer;
}
.reset_variations { font-size: 12px; color: #aaa; margin-top: 6px; display: block; }

/* Prix en fourchette masque pour les produits a variations (2026-07-28,
   retour Yoann) : redondant avec le prix de la variation qui s'affiche juste
   au-dessus du bouton une fois le choix fait - deux prix visibles a la suite
   alourdissait la lecture. Les produits simples (form.cart sans la classe
   variations_form) gardent leur prix unique normalement. */
.product-info:has(form.variations_form) > p.price { display: none; }

/* Badge stock (2026-07-28, retour Yoann) : remplace le texte brut WooCommerce
   ("7 en stock"/"Rupture de stock") par une pastille, meme langage visuel que
   .product-badge. Repositionne sous le bouton panier via JS (main.js),
   .stock seul (avant repositionnement) n'a pas besoin d'etre masque : le CSS
   s'applique quelle que soit sa position dans le DOM. */
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.stock::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stock.in-stock { background: rgba(46, 160, 67, 0.12); color: #1a7431; }
.stock.in-stock::before { background: #2ea043; }
.stock.out-of-stock { background: rgba(209, 36, 47, 0.1); color: #b3121c; }
.stock.out-of-stock::before { background: #d1242f; }
.stock.available-on-backorder { background: rgba(191, 135, 0, 0.12); color: #8a6100; }
.stock.available-on-backorder::before { background: #bf8700; }

/* Reference produit (2026-07-28) : usage interne uniquement, discret. */
.ti-product-ref {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(51,51,51,0.4);
  letter-spacing: 0.02em;
}

/* Qty + add to cart */
.cart { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
/* Produits à variations : quantité + bouton vivent dans ce conteneur imbriqué
   (pas directement enfants de .cart), jamais stylé jusqu'ici — tombaient en
   bloc empilé par défaut. */
.woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quantity { display: flex; align-items: center; }
.quantity .qty {
  width: 60px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
}
.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--color-primary);
  color: white;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  flex: 1;
}
.single_add_to_cart_button:hover { background: #220077; border-color: #220077; }
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

.product_meta { font-size: 13px; color: #bbb; margin-top: 16px; }
.product_meta span { display: block; margin-bottom: 4px; }
.product_meta a { color: var(--color-primary); }

/* Brand badges */
.product-brand-badges {
  display: flex;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 8px;
}
.product-brand-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 12px;
}
.product-brand-badge + .product-brand-badge { border-left: 1px solid var(--color-border); }
.product-brand-badge svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-brand-badge span {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.6);
  line-height: 1.4;
}

/* Brand strip (between gallery block and tabs) */
/* Bande 2 (hook + badges Technique/Couleur) : beige, pleine largeur, pas de bordure —
   la couleur de fond (vs le blanc au-dessus et en dessous) sert déjà de séparation. */
.product-brand-strip {
  padding: 48px 0 56px;
  background: var(--color-bg);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.product-brand-strip__text {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.55;
  text-align: center;
  margin: 0;
}
/* Mots-déclencheurs du hook (plante/matière/geste) — visibles sans survol nécessaire :
   couleur + soulignement épais dès l'état statique, pas juste un lien discret. Pas d'ouverture
   automatique au survol (mobile n'a pas de survol, et ça ouvrirait le popup par accident en
   lisant), seul le clic ouvre, cohérent avec les badges Technique/Couleur juste en dessous. */
.hook-word {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  font-size: 1.7em;
  line-height: 1;
  vertical-align: -0.08em;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0.12em;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.hook-word:hover, .hook-word:focus-visible {
  opacity: 0.7;
  outline: none;
}
/* Trois couleurs distinctes qui doivent bien ressortir. Le vert n'existait pas dans la palette
   (aucune des 3 couleurs de marque n'est verte), ajouté spécifiquement pour "plante" — matière
   et geste réutilisent accent/primary déjà en place ailleurs sur le site. */
.hook-word--plante  { color: #4C7A3D; }
.hook-word--matiere { color: var(--color-accent); }
.hook-word--geste   { color: var(--color-primary); }

/* Product tabs → accordéon (ti-product-accordion). Ancien bloc tab-bar (.tabs.wc-tabs,
   .woocommerce-Tabs-panel{display:none}) supprimé le 2026-07-09 : il datait d'avant
   la conversion en accordéon et masquait le contenu des panneaux en conflit avec <details>. */
.product-extras { padding-top: 0; }
.woocommerce-Tabs-panel {
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}
.woocommerce-Tabs-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 16px;
}
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td {
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  text-align: left;
}
.woocommerce-Tabs-panel table th { background: #f9f5ef; font-weight: 500; width: 35%; }

/* Related products + WC generic product list */
.related.products { padding-top: 16px; }
.related.products > h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
}
.related.products .products-grid--shop { margin-top: 0; }

/* WooCommerce ul.products (related, upsells) → grid */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products li.product {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  padding: 10px 12px 4px;
  line-height: 1.4;
}
ul.products li.product .price {
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  padding: 0 12px 10px;
}
ul.products li.product .button {
  display: block;
  margin: 0 12px 12px;
  text-align: center;
  padding: 8px 12px;
  background: var(--color-cta);
  color: white;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background var(--transition);
}
ul.products li.product .button:hover { background: #5a0bbf; color: white; }

/* ─── Home Magazine — bento 3×2 sur fond photo ───────────────────────── */
.home-magazine {
  position: relative;
  padding: 64px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.home-magazine__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 30, 0.45);
}
.home-magazine__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.home-magazine__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: white;
}
.home-magazine__all {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}
.home-magazine__all:hover { text-decoration: underline; }

.home-magazine__row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 20px;
}
.home-magazine__row + .home-magazine__row { margin-top: 20px; }
/* Spacer utilisé uniquement en mode scroll (mobile, voir plus bas) */
.home-magazine__rows > .track-spacer { display: none; }

.hm-tile {
  position: relative;
  display: block;
  overflow: hidden;
  height: 280px;
  border-radius: 14px;
  text-decoration: none;
}
.hm-tile--sm { flex: 5; }
.hm-tile--md { flex: 6; }
.hm-tile--lg { flex: 7; }
.hm-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-tile__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-border);
}
.hm-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 4, 30, 0.8) 0%, rgba(10, 4, 30, 0.1) 60%, transparent 100%);
}
.hm-tile__body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}
.hm-tile__title {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  color: white;
  line-height: 1.25;
  margin: 0;
}
.hm-tile__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 8px 0 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
.hm-tile:hover .hm-tile__desc {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}

/* ─── Home Newsletter ────────────────────────────────────────────────── */
.home-newsletter {
  background: #EDE4D8;
  padding: 64px 0;
}
.home-newsletter__inner {
  display: flex;
  align-items: center;
  gap: 64px;
}
.home-newsletter__copy {
  flex: 1 1 auto;
}
.home-newsletter__title {
  font-family: 'Quicksand', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 10px;
}
.home-newsletter__desc {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: var(--color-ink-light);
  margin: 0;
}
.home-newsletter__form {
  flex: 0 0 380px;
}
/* Variante claire du formulaire newsletter partagé (.newsletter-form__*
   est pensé pour le fond sombre du footer) — fond blanc, texte lisible. */
.home-newsletter .newsletter-form__row {
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius);
}
.home-newsletter .newsletter-form__input {
  color: var(--color-text);
  /* Le texte tape restait invisible (blanc sur blanc) : la regle de base
     .newsletter-form__input (pensee pour le fond sombre du footer) fixe
     -webkit-text-fill-color, qui l'emporte sur `color` dans Chrome/Safari
     et n'etait jamais reecrit ici. */
  -webkit-text-fill-color: var(--color-text);
}
.home-newsletter .newsletter-form__input::placeholder {
  color: var(--color-text-light);
  opacity: 1;
}
.home-newsletter .newsletter-form__btn {
  background: var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.home-newsletter .newsletter-form__btn:hover { background: var(--color-cta); }
.home-newsletter .newsletter-form__btn svg { stroke: white; }
@media (max-width: 1024px) {
  .home-newsletter__inner { flex-direction: column; gap: 24px; }
  .home-newsletter__form { flex: 1 1 auto; width: 100%; }
}

/* ─── Magazine archive page ──────────────────────────────────────────── */
.magazine-page { background: white; padding-bottom: 96px; }
/* Le header utilise désormais le composant partagé .page-hero (voir plus haut). */

/* Sections thématiques (page magazine) */
/* Page Magazine (home.php) : grille classique sur desktop, 2 sections
   scrollables par theme (.mag-theme, ci-dessous) sur mobile/tablette -
   les deux structures sont rendues en PHP, une seule visible a la fois. */
.magazine-mobile-sections { display: none; }
@media (max-width: 1024px) {
  .magazine-desktop-grid { display: none; }
  .magazine-mobile-sections { display: block; }
}

.mag-theme { position: relative; padding: 56px 0 8px; }
.mag-theme + .mag-theme { border-top: 1px solid var(--color-border); margin-top: 8px; }
.mag-theme__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.mag-theme__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.mag-theme__all {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.mag-theme__all:hover { text-decoration: underline; }

/* Scroll horizontal des cartes par thème - visible seulement ≤1024px (voir
   .magazine-mobile-sections), gap aligné sur .home-magazine__rows (meme
   carte .hm-tile, meme carrousel mobile) plutot qu'un ecart hérité d'un
   gabarit desktop qui ne sert plus. */
.mag-theme__track {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 12px;
}
.mag-theme__track::-webkit-scrollbar { display: none; }
/* Cartes du track : .hm-tile (photo + overlay titre/scrim), meme composant
   que le bento Magazine de la home - harmonisation 2026-07-25, remplace
   l'ancien .mag-hcard (photo + titre/extrait sous l'image, retire). */

/* Category filter */
.magazine-cat-filter {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  margin-bottom: 0;
}
/* Pastilles visibles (2026-07-23, reconstruit) - meme style que
   .category-filter-list (filtre categorie boutique) sur demande explicite de
   Yoann ("plus visible, comme les categories feuilles") - l'ancien style texte
   discret a peine visible (opacite 0.45) ne remplissait pas la demande. */
.magazine-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 20px 0;
  justify-content: center;
}
.magazine-cat-list li { list-style: none; }
.magazine-cat-list a {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.magazine-cat-list a:hover { border-color: var(--color-text); }
.magazine-cat-list a.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Grille articles — tuiles photo + titre, 3 colonnes / 3 lignes */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  padding: 56px 0 0;
}
.magazine-card__link {
  display: block;
  text-decoration: none;
}
.magazine-card__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--color-border);
}
.magazine-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.magazine-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-border);
}
.magazine-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.magazine-card__link:hover .magazine-card__title { color: var(--color-primary); }

/* Section home.php : tuiles 3:2 avec extrait (2026-07-23, reconstruit) -
   l'ancien composant (avant l'emprunt a archive.php) faisait deja ca, juste
   retrouve/reapplique en modifier plutot que de changer .magazine-grid partout
   (archive.php garde ses tuiles 4:5 sans extrait, plus adaptees a une liste
   complete qu'a une section teaser sur la home). */
.magazine-grid--tiles .magazine-card__img { aspect-ratio: 3 / 2; }
.magazine-card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 8px 0 0;
}

/* Pagination */
.magazine-pagination { padding: 64px 0 0; }
.archive-pagination .nav-links,
.magazine-pagination .nav-links { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
/* Meme traitement texte nu que .woocommerce-pagination (2026-07-22) :
   pagination blog + magazine harmonisee avec la boutique dans la meme
   passe. */
.archive-pagination .page-numbers,
.magazine-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 14px;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.archive-pagination .page-numbers.current,
.magazine-pagination .page-numbers.current {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}
.archive-pagination .page-numbers:hover:not(.current),
.magazine-pagination .page-numbers:hover:not(.current) { color: var(--color-primary); }

.archive-pagination { text-align: center; padding: 40px 0 0; }
.archive-pagination .pagination { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.archive-pagination .page-numbers.dots { border-color: transparent; }

/* ─── Single article ─────────────────────────────────────────────────── */
.article-page { padding: 48px 0 80px; }

/* Article : même largeur pour la photo et le texte (2026-07-18, sur demande
   explicite de Yoann après un 1er passage à deux largeurs différentes). */
.article-container {
  max-width: 1160px;
  margin-inline: auto;
}
.article-prose {
  max-width: 1160px;
  margin-inline: auto;
}
.article-header { margin-bottom: 32px; }
.article-category {
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.article-category a { color: inherit; }
.article-category a:hover { color: var(--color-primary); }
.article-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 16px;
}
.article-meta {
  font-family: var(--font-accent);
  font-size: 12px;
  color: #bbb;
  letter-spacing: 0.04em;
}
/* Byline auteur — remplace le bloc HTML collé à la main dans chaque article
   sur le live (2026-07-18), affiché automatiquement par le template ici. */
.article-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-light);
}
.article-byline__photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.article-byline a { color: var(--color-primary); }
.article-byline a:hover { text-decoration: underline; }
.article-featured-img {
  margin-bottom: 40px;
  border-radius: var(--radius);
  overflow: hidden;
}
.article-featured-img img { width: 100%; height: auto; display: block; }

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
.article-content h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 40px 0 16px;
}
.article-content h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 28px 0 12px;
}
.article-content p { margin-bottom: 20px; }
.article-content ul,
.article-content ol { padding-left: 24px; margin-bottom: 20px; }
.article-content li { margin-bottom: 6px; }
.article-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:hover { color: #220077; }
.article-content img {
  border-radius: var(--radius);
  margin: 8px 0 24px;
  max-width: 100%;
}
.article-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 12px 24px;
  margin: 24px 0;
  background: rgba(51,0,153,0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-content blockquote p { color: var(--color-primary); font-style: italic; margin-bottom: 0; }
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}
.article-content table th,
.article-content table td { padding: 10px 16px; border: 1px solid var(--color-border); }
.article-content table th { background: #f9f5ef; font-weight: 600; }

.article-nav {
  border-top: 1px solid var(--color-border);
  margin-top: 48px;
  padding-top: 28px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article-nav a {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  transition: color var(--transition);
  max-width: 45%;
}
.article-nav a:hover { color: #220077; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .products-grid--home { grid-template-columns: repeat(4, 1fr); }
}

/* 769-1200px : 4 colonnes cote a cote (brand, boutique, mentions, contact)
   au lieu de brand pleine largeur + 3 colonnes — garde une police correcte
   (pas de reduction de taille necessaire) tout en tenant dans la largeur.
   Newsletter sortie de la grille, en bandeau centre en dessous (demande
   Yoann, plutot que la caser dans une 4e/5e colonne trop etroite). */
@media (max-width: 1200px) {
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; display: block; }
  .footer-newsletter {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 420px;
    margin: 8px auto 0;
  }
  .footer-newsletter .newsletter-form__row { margin: 0 auto; }
}


/* Magazine home — carrousel scrollable sur tout le mobile (portrait ET
   paysage), pas seulement <=480px comme avant : Yoann prefere ce
   comportement (deja utilise ailleurs sur la home, coherent) a la grille
   2x2 qui s'appliquait en paysage/tablette. Largeur plafonnee (min(62vw,
   320px)) pour eviter des vignettes demesurees a l'approche de 1024px. */
@media (max-width: 1024px) {
  .home-magazine__rows {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 4px;
  }
  .home-magazine__rows::-webkit-scrollbar { display: none; }
  .home-magazine__row { display: contents; }
  .home-magazine__rows > .track-spacer { display: block; }
  .home-magazine__row--diy > .hm-tile:nth-child(1) { order: 1; }
  .home-magazine__row--ga  > .hm-tile:nth-child(1) { order: 2; }
  .home-magazine__row--diy > .hm-tile:nth-child(2) { order: 3; }
  .home-magazine__row--ga  > .hm-tile:nth-child(2) { order: 4; }
  .home-magazine__row--diy > .hm-tile:nth-child(3) { order: 5; }
  .home-magazine__row--ga  > .hm-tile:nth-child(3) { order: 6; }
  /* Spacer de fin (marge apres la derniere tuile) : doit passer apres les
     tuiles interclassees par `order`, sinon il retombe a l'ordre 0 par
     defaut et se retrouve visuellement au debut, a cote du 1er spacer. */
  .home-magazine__rows > .track-spacer:last-child { order: 7; }
  /* Tuiles resserrees le 2026-07-22 (62vw/2:3 jugees trop dominantes), puis
     regrandies le 2026-07-25 (retour Yoann : le titre a besoin de plus de
     place pour une police confortable - reference Tikamoon, tuiles actu plus
     grandes avec texte en overlay). Toujours plus petites que l'ancien 62vw
     pour ne pas retomber dans l'exces initial. */
  .hm-tile--sm, .hm-tile--md, .hm-tile--lg {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(68vw, 300px);
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .hm-tile__title { font-size: 19px; }
  .hm-tile__desc { font-size: 14px; }
}
/* Tablette (1024px) */
@media (max-width: 1024px) {
  /* Magazine home : voir bloc carrousel scrollable dedie (<=1024px) plus bas */
  /* Hook affiché en permanence : pas de survol fiable au tactile */
  .hm-tile__desc {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  /* Magazine archive */
  .magazine-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  /* Shop */
  .products-grid--shop { grid-template-columns: repeat(3, 1fr); }

  /* Single product */
  /* minmax(0, 1fr), pas juste 1fr : sans le 0 explicite, la colonne grid ne peut
     pas retrecir sous la largeur min-content de son contenu. La galerie WooCommerce
     (FlexSlider) pose parfois une largeur en pixels en JS sur les slides qui depasse
     la largeur reelle de l'''ecran (bug FlexSlider constate le 28/07/2026, largeur
     figee au chargement, jamais recalculee au resize) - sans ce minmax(0, ...), ce
     depassement JS remontait jusqu'''a la grille et creait une bande beige/un scroll
     horizontal sur les fiches produit. Le 0 force la colonne a respecter la largeur
     du parent quoi que fasse le contenu. */
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product-info { position: static; padding-right: var(--container-pad); padding-left: var(--container-pad); }
  .product-brand-strip { flex-direction: column; gap: 20px; }
  .related.products .products-grid--shop { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .products-grid--shop { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .related.products .products-grid--shop { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 1300px) {
  /* Bascule menu desktop -> hamburger : seuil dedie, plus large que le reste
     du contenu mobile (voir commentaire ci-dessus). */
  .header-nav { display: none; }
  /* Mobile header layout: hamburger left | logo center | actions right */
  .site-header { height: auto; }
  .header-inner { position: relative; gap: 0; height: var(--header-height); }
  .header-logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .hamburger { display: flex; order: -1; }
  .header-actions { margin-left: auto; }
  .header-actions .action-btn:not(.cart-btn):not(.account-btn) { display: none; }
  /* Barre de recherche mobile */
  .header-mobile-search { display: block; }
  /* Show overlay and panel */
  .mobile-nav-overlay { display: block; }
  .mobile-nav { display: block; }
}

@media (max-width: 1024px) {
  :root {
    --container-pad: 16px;
  }

  /* Hero static — plein écran, immersif */
  .hero-static-overlay { background: linear-gradient(180deg, transparent 0%, rgba(10,0,40,0.15) 45%, rgba(10,0,40,0.75) 100%); }
  .hero-static-bg { height: calc(100vh - 157px); height: calc(100dvh - 157px); padding-bottom: 32px; }
  .hero-static-inner { padding-block: 32px; }
  .hero-static-eyebrow { margin-bottom: 12px; }
  .hero-static-title { font-size: 28px; margin-bottom: 16px; }
  .hero-static-desc { display: none; }
  .hero-static-actions { gap: 12px; }

  /* Hero slider (legacy, unused) */
  .hero-slider { height: 420px; }
  .hero-title { font-size: 26px; }
  .hero-desc { font-size: 14px; }
  .hero-prev, .hero-next { display: none; }

  /* Features (legacy, unused) */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* TI Identity */
  .ti-identity { padding: 48px 0; }

  /* Process strip */
  .process-strip { padding: 48px 0; }
  .process-steps { grid-template-columns: 1fr; gap: 36px; }

  /* Editorial */
  .editorial-section { padding: 40px 0; }

  /* CTA duo */
  .cta-duo-grid { grid-template-columns: 1fr; }
  .cta-card { height: 280px; }

  /* Products home */
  .products-grid--home { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Shop */
  .single-product-page { padding: 0 0 60px; }
  .tabs.wc-tabs li a { padding: 10px 14px; font-size: 11px; }

  /* Blog */
  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Article */
  .article-title { font-size: 26px; }

  /* FAQ */
  .faq-main .container { margin-top: 36px; }
  .faq-item__question { font-size: 16px; padding: 16px 0; }
  .faq-item__answer { font-size: 16px; padding-bottom: 20px; }

  /* Filtre catégories : rangée unique scrollable au lieu de wrap sur plusieurs lignes */
  .category-filter { padding: 16px 0 24px; position: relative; }
  .category-filter-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .category-filter-list::-webkit-scrollbar { display: none; }
  .category-filter-list li { flex: 0 0 auto; }
  /* Dégradé de bord : signale qu'il y a d'autres pastilles à droite (sans JS,
   * cohérent avec le choix de ne pas construire un vrai composant de scroll-track). */
  .category-filter::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 0;
    bottom: 24px;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--color-bg) 70%);
    pointer-events: none;
  }
  .category-filter-list a { white-space: nowrap; }

  /* Footer : gap/padding resserres jusqu'a 1024px, nombre de colonnes et
     footer-brand geres par la regle <=1200px (desktop) ou <=768px (vrai
     mobile, plus bas) selon la largeur reelle. */
  .footer-main {
    display: grid;
    gap: 24px 16px;
    padding: 36px 0 28px;
  }
  .footer-brand-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 14px;
  }
  .footer-brand-nav li + li { margin-top: 0; }
  .footer-col,
  .footer-newsletter { min-width: 0; }
  .footer-bottom { padding: 16px 0; }

  /* Reassurance */
  .reassurance-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    justify-items: center;
  }
  .reassurance-item {
    white-space: normal;
    font-size: 11px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  /* Les créations — section resserrée sur le contenu */
  .home-shop {
    padding: 40px 0;
  }

  /* Le magazine — section resserrée sur le contenu, plus de plein écran forcé */
  .home-magazine {
    padding: 40px 0;
  }
}

/* home-shop-card et hm-tile utilisent des tailles en vw (pensees pour un
   vrai mobile etroit) : remises a leur seuil d'origine, sinon elles
   deviennent ~2x trop grandes en paysage/tablette (62vw = 523px a 844px de
   large). En dessous de 768px seulement — au-dela, le carrousel desktop
   (tailles fixes 250x310px pour home-shop-card, flex proportionnel pour
   hm-tile, deja teste) reste correct sans ajustement. */
@media (max-width: 768px) {
  /* Carre plutot que 2:3 sur mobile (2026-07-28, demande Yoann) : le ratio
     portrait rognait trop les photos produit (surtout carrees a la base).
     Meme taille que .related-card / .related-card__img (Vous aimerez aussi)
     pour que les deux carrousels de fiches produit du site restent coherents. */
  .home-shop-card { width: 300px; }
  .home-shop-card__img { width: 300px; height: 300px; aspect-ratio: 1 / 1; }
}

@media (max-width: 480px) {

  /* Hero static */
  .hero-static-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-static-actions .btn { flex: 1 1 0; max-width: 220px; padding: 12px 16px; font-size: 13px; letter-spacing: 0.04em; }

  /* Home shop */
  .home-shop { padding: 44px 0 52px; }
  .home-shop__head { gap: 16px; }
  .home-shop__all { margin-left: 0; }
  /* Carte 62vw a son plus etroit ici (~172-298px) : titre un cran plus
     petit pour rester coherent avec la largeur reelle de la carte. */
  .home-shop-card__title { font-size: 14px; }


  /* Magazine archive mobile */
  .magazine-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-cat-card { width: 190px; }
  .home-cat-card__img { width: 190px; height: 250px; }

  /* Blog */
  .posts-grid { grid-template-columns: 1fr; }

  /* Shop */
  .category-filter-list { gap: 4px 6px; }

  /* Checkout */
  .woocommerce-checkout #customer_details { grid-template-columns: 1fr; gap: 24px; }

  /* My account */
  .logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 32px; }

  /* Thank you */
  .thankyou-addresses { grid-template-columns: 1fr; }
  .thankyou-footer { flex-direction: column; }
}

/* ─── Placeholders photo ─────────────────────────────────────────────── */
.ti-photo-placeholder {
  background: #e8e2f5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-photo-placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(51,0,153,0.45);
  padding: 0 16px;
  line-height: 1.4;
}

/* ─── Page hero partagé (image ou vidéo) — harmonisation 2026-07-17 ─────
   Un seul composant visuel pour toutes les pages éditoriales (voir
   template-parts/page-hero.php) : même police/couleurs/dégradé/hauteur
   partout, sans exception de page à page. Desktop = format horizontal
   (large, peu haut), mobile = format vertical (plus haut que large) —
   même ratio sur les 6 pages. Remplace teinture-hero, magazine-header,
   engagements-hero, pdv-hero, faq-page-header. */
.page-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  min-height: 460px;
  max-height: 900px;
  overflow: hidden;
}
/* Variante compacte (2026-07-28) — racine boutique + catégories de premier niveau,
   desktop seulement (pas de règle mobile ici, la media query .page-hero de base
   s'applique encore en dessous de 1024px) : la grille produit qui suit doit rester
   partiellement visible sans scroller. */
/* Regression corrigee (2026-07-28, signale par Yoann) : cette regle netait
   jamais scopee au desktop malgre le commentaire ci-dessus qui le disait deja
   - elle sappliquait aussi sur mobile, ecrasant en partie le hero mobile
   standard (.page-hero { height: 70vh; ... } plus bas) et rendant les heros
   boutique/categories plus courts que les autres pages sur mobile. */
@media (min-width: 1025px) {
  .page-hero--compact {
    aspect-ratio: 3.2 / 1;
    min-height: 280px;
    max-height: 420px;
  }
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.page-hero__bg--video { background: #0a0028; }
.page-hero__bg--video iframe,
.page-hero__bg--video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 177.78vh; /* ratio 16/9 */
  min-height: 56.25vw;
  pointer-events: none;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  /* Fondu vertical pleine hauteur (ombre de bas sur tout le hero, tres legere
     en haut) - separe du scrim expres : si le scrim (horizontal, lisibilite du
     texte) couvrait lui aussi toute la hauteur, l'assombrissement de gauche se
     voit sur tout le hero, pas seulement pres du texte (bug du 23/07, corrige
     apres retour de Yoann - "pourquoi l'ombre prend toute la taille du hero"). */
  background: linear-gradient(to bottom, transparent 60%, rgba(10,4,40,0.88) 100%);
}
/* .page-hero__scrim garde la hauteur de son propre contenu (pas toute la
   hauteur du hero) pour que le fondu horizontal reste concentre pres du texte.
   Le degrade + masque (bord haut adouci, pas de rectangle net) vivent sur
   ::before, PAS directement sur .page-hero__scrim : un mask-image applique
   directement a l'element masque TOUT son contenu, texte inclus (bug trouve
   apres deploiement - le H1 ressortait grise au lieu de blanc). */
.page-hero__scrim {
  position: relative;
  width: 100%;
  padding: 48px 0 48px;
}
.page-hero__scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,4,40,0.78) 0%, rgba(10,4,40,0.2) 100%);
  -webkit-mask-image: linear-gradient(to top, black, transparent);
  mask-image: linear-gradient(to top, black, transparent);
}
.page-hero__content { position: relative; z-index: 1; max-width: 1200px; width: 100%; }
.page-hero__surtitre {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.page-hero__titre {
  font-family: var(--font-heading);
  /* 32-56px (2026-07-20) : l'ancien 40-80px passait les H1 longs (ex. Boutique,
     41 caractères) sur 2 lignes dès 1024px (vérifié via Playwright, comptage de
     lignes réel). Yoann a validé cette taille comme suffisante pour tous les H1
     du site, pas seulement Boutique — règle par défaut du composant, plus de
     scope particulier à maintenir par page. */
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  color: white;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.page-hero__texte {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0;
}
@media (max-width: 1024px) {
  .page-hero { height: 70vh; min-height: 465px; }
  .page-hero__titre { font-size: clamp(30px, 8vw, 44px); }
  .page-hero__scrim {
    background: linear-gradient(180deg, transparent 0%, rgba(10,4,40,0.55) 30%, rgba(10,4,40,0.88) 100%);
    padding: 64px 0 32px;
  }
  .page-hero__scrim::before { display: none; }
}

/* ─── Page La Teinture ───────────────────────────────────────────────── */
/* Le hero utilise désormais le composant partagé .page-hero (voir plus haut). */

/* Claim central */

/* Section titre commun */
.teinture-section__titre {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  color: var(--color-primary);
  margin-bottom: 56px;
  text-align: center;
  letter-spacing: 0.5px;
}
.teinture-section__intro {
  text-align: center;
  color: var(--color-text);
  max-width: 580px;
  margin: 16px auto 56px;
  line-height: 1.75;
  font-size: 1rem;
}
.teinture-section__intro p { margin: 0 0 18px; }
.teinture-section__intro p:last-child { margin-bottom: 0; }

/* Intro texte SEO — Qu'est-ce que / Pourquoi si rare, côte à côte */
.teinture-intro {
  background: var(--color-white);
  padding: 64px 0 56px;
}
.teinture-duo {
  display: flex;
  gap: 64px;
}
.teinture-duo__col { flex: 1; min-width: 0; }

/* Les 2 blocs Qu'est-ce que / Pourquoi passent en accordéon repliable sous 900px
   (classe .is-open togglée en JS, main.js) — chevron collé au texte (justify:space-
   between sur toute la largeur de la colonne, comme .faq-item de la page FAQ) pour
   que l'affordance "cliquable" soit lisible, contrairement au + isolé à droite du
   bloc testé une première fois. Bloc 1 ouvert par défaut, bloc 2 fermé, les deux
   restent ouvrables/fermables par l'utilisateur. Desktop : résumé non cliquable,
   icône masquée, texte toujours affiché (pas de <details> natif — le masquage
   interne du <details> dans Chrome récent n'est plus un simple display:none et ne
   peut plus être forcé réouvert par CSS, testé et invalidé le 2026-07-17). */
.teinture-accordion-item__summary { cursor: default; }
.teinture-accordion-item__icon { display: none; }
.teinture-accordion-item__body { display: block; }

@media (max-width: 900px) {
  .teinture-duo { flex-direction: column; gap: 0; }

  .teinture-accordion-item { border-top: 1px solid var(--color-border); }
  .teinture-duo__col:last-child .teinture-accordion-item { border-bottom: 1px solid var(--color-border); }

  .teinture-duo .teinture-accordion-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
  }
  .teinture-duo .teinture-accordion-item__summary .teinture-section__titre--left {
    text-align: left;
    margin-bottom: 0;
  }
  .teinture-accordion-item__icon {
    display: block;
    width: 14px;
    height: 10px;
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 0.25s ease;
  }
  .teinture-accordion-item.is-open .teinture-accordion-item__icon { transform: rotate(180deg); }
  .teinture-duo .teinture-accordion-item__body { display: none; text-align: left; }
  .teinture-accordion-item.is-open > .teinture-accordion-item__body { display: block; padding-bottom: 24px; }
}

/* Split texte + scroll — plantes & techniques (miroir), scroll en plein bord
   de navigateur, la colonne texte reste alignée sur la marge habituelle du site
   (même principe que .product-layout / 2026-07-09) */
.teinture-split {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: 0;
}
.teinture-split--reverse {
  flex-direction: row-reverse;
  padding-left: 0;
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

.teinture-split__text {
  flex: 0 0 300px;
  max-width: 300px;
  padding-top: 8px;
}
.teinture-section__titre--left,
.teinture-section__intro--left {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.teinture-section__titre--left { margin-bottom: 20px; }
.teinture-section__intro--left { margin-top: 0; margin-bottom: 0; }

.teinture-split__scroll {
  flex: 1;
  min-width: 0;
  position: relative;
}
.teinture-split__scroll .teinture-scroll-track { padding-right: var(--container-pad); }
.teinture-split--reverse .teinture-split__scroll .teinture-scroll-track {
  padding-right: 0;
}

/* "La teinture naturelle et le temps" (2026-07-23, reconstruit) : 2 colonnes
   texte + chiffre-cle mis en avant visuellement (la 1ere version centree
   pleine largeur laissait un vide visuel important sur desktop). */
.teinture-duree { padding: 64px 0 80px; }
.teinture-duree__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}
.teinture-duree__stat {
  text-align: center;
  padding: 32px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.teinture-duree__stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--color-primary);
  line-height: 1;
}
.teinture-duree__stat-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 4px;
}
.teinture-duree__stat-caption {
  font-size: 13px;
  color: var(--color-text-light);
  margin: 16px 0 0;
}
@media (max-width: 1024px) {
  .teinture-duree__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .teinture-split,
  .teinture-split--reverse {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .teinture-split__text,
  .teinture-split--reverse .teinture-split__text {
    flex: none;
    max-width: 100%;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .teinture-section__titre--left,
  .teinture-section__intro--left {
    text-align: center;
  }
  .teinture-split__scroll {
    width: 100%;
    min-width: 0;
  }
  .teinture-split__scroll .teinture-scroll-track,
  .teinture-split--reverse .teinture-split__scroll .teinture-scroll-track {
    width: 100%;
    padding-right: var(--container-pad);
  }
}

/* Scroll track commun — plantes & techniques */
.teinture-track-spacer {
  flex-shrink: 0;
  width: var(--container-pad);
  scroll-snap-align: start;
}
.teinture-scroll-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: none;
}
.teinture-scroll-track::-webkit-scrollbar { display: none; }

/* Plantes — scroll horizontal */
.teinture-plantes {
  background: var(--color-primary);
  padding: 80px 0 60px;
  position: relative;
}
.teinture-plantes .container { margin-bottom: 0; }
.teinture-plantes .teinture-section__titre {
  color: var(--color-white);
  margin-bottom: 16px;
}
.teinture-plantes .teinture-section__intro {
  color: rgba(255,255,255,0.7);
}

.plante-card {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: start;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.plante-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.plante-card:focus-visible, .technique-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.plante-card__img {
  width: 260px;
  height: 200px;
  position: relative;
  flex-shrink: 0;
}
.plante-card__img img { width: 100%; height: 100%; object-fit: cover; }
.plante-card__swatch {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 6px;
}
.plante-card__body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plante-card__nom {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}
.plante-card__latin {
  font-size: 0.78rem;
  color: var(--color-text);
  opacity: 0.55;
  display: block;
  margin-bottom: 14px;
}
.plante-card__tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  padding: 3px 10px;
  margin-bottom: 18px;
  align-self: flex-start;
}
.plante-card__body p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 0;
  flex: 1;
}
.plante-card__technique {
  font-size: 0.75rem;
  color: var(--color-secondary);
  font-style: italic;
  margin-top: 16px;
}
.plante-card__lien {
  display: inline-block;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 14px;
}
.plante-card__lien:hover { color: var(--color-accent); }

/* Techniques — scroll horizontal */
.teinture-techniques {
  padding: 80px 0 60px;
  background: var(--color-white);
  position: relative;
}

.technique-card {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: start;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.technique-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.technique-card__photo {
  width: 260px;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.technique-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.technique-card__photo.ti-photo-placeholder { background: var(--color-border); }
.technique-card__photo.ti-photo-placeholder::after { color: var(--color-text-light); }
.technique-card__corps { padding: 24px 24px 32px; }
.technique-card__origine {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 8px;
}
.technique-card__nom {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.technique-card p {
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--color-text);
}
.technique-card__lien {
  display: inline-block;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 14px;
}
.technique-card__lien:hover { color: var(--color-accent); }

/* Popup partagé — matières et techniques */
.ti-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 40, 0.72);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  display: none;
}
.ti-popup-overlay:not([hidden]) { display: flex; }
.ti-popup {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ti-popup__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.ti-popup__close:hover { background: var(--color-white); }
.ti-popup__media { width: 100%; height: 260px; flex-shrink: 0; overflow: hidden; }
.ti-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.ti-popup__body { padding: 28px 32px 36px; }
.ti-popup__eyebrow {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.ti-popup__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.ti-popup__text p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 16px;
}
.ti-popup__text a.ti-popup-more {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ti-popup__text a.ti-popup-more:hover { color: var(--color-accent); }
@media (max-width: 1024px) {
  .ti-popup__media { height: 180px; }
  .ti-popup__body { padding: 22px 20px 28px; }
}

/* CTA final avec photo */
.teinture-cta {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.teinture-cta__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.teinture-cta__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.teinture-cta__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,4,40,0.42);
  z-index: 1;
}
.teinture-cta__contenu {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 24px;
}
.teinture-cta__texte {
  font-family: var(--font-subheading);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.92);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.teinture-cta__btn {
  padding: 20px 48px;
  font-size: 14px;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.teinture-cta__btn:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.42); }

/* Responsive La Teinture — hero géré par .page-hero (voir media queries plus haut) */

/* ─── Page Nos Engagements ───────────────────────────────────────────── */
/* Le hero utilise désormais le composant partagé .page-hero (voir plus haut). */

/* Étapes — de l'idée à la création, zigzag photo/texte */
.engagements-etapes { padding: 8px 0 64px; background: var(--color-bg); }

.etape-item {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--color-border);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}
.etape-item:last-child { border-bottom: none; }
.etape-item--reverse {
  flex-direction: row-reverse;
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: 0;
}

.etape-item__photo {
  flex: 0 0 54%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.etape-item--reverse .etape-item__photo { border-radius: var(--radius) 0 0 var(--radius); }
.etape-item__photo img,
.etape-item__photo .ti-photo-placeholder { width: 100%; height: 100%; }
.etape-item__photo img { object-fit: cover; }

.etape-item__corps { flex: 1; min-width: 0; }
.etape-item__numero {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-primary);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 12px;
}
.etape-item__titre {
  font-family: var(--font-subheading);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.etape-item__texte p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 14px;
}
.etape-item__texte p:last-child { margin-bottom: 0; }
.etape-item__engagement {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-subheading);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-primary);
}
.etape-item__engagement a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.etape-item__engagement a:hover { color: var(--color-secondary); }

.etape-item__cta {
  margin-top: 28px;
  padding: 20px 48px;
  font-size: 14px;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 28px rgba(51,0,153,0.28);
}
.etape-item__cta:hover { box-shadow: 0 12px 32px rgba(51,0,153,0.36); }

@media (max-width: 1024px) {
  /* Empile plutot que 2 colonnes (2026-07-22, essai 2 colonnes abandonne) :
     le texte de certaines etapes fait 3 paragraphes, aucun ratio d'image
     raisonnable ne peut matcher cette hauteur a une largeur de colonne
     etroite (48%) sans soit ecraser l'image, soit laisser un grand vide.
     Empiler evite le probleme (rien a faire matcher) ; le vrai defaut a
     corriger est ailleurs : l'image ne doit plus etre plein-bord (100vw)
     ni suivre l'aspect-ratio 3/2 a pleine largeur, ce qui la rendait
     demesuree en paysage/tablette ("image etiree" signale par Yoann). */
  .etape-item, .etape-item--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .etape-item__photo,
  .etape-item--reverse .etape-item__photo {
    flex: none;
    aspect-ratio: unset;
    height: 260px;
    border-radius: var(--radius);
  }
  .etape-item__corps { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}
@media (min-width: 561px) and (max-width: 1024px) {
  .etape-item__photo,
  .etape-item--reverse .etape-item__photo {
    height: 320px;
  }
}

/* Responsive — La Teinture */
@media (max-width: 900px) {
  .plantes-grid    { grid-template-columns: 1fr; }
  .techniques-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .techniques-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   FORMULAIRES — styles communs
═══════════════════════════════════════════════════════ */

.ti-form { display: flex; flex-direction: column; gap: 24px; }

.ti-form__row { display: grid; gap: 24px; }
.ti-form__row--half { grid-template-columns: 1fr 1fr; }

.ti-form__field { display: flex; flex-direction: column; gap: 8px; }

.ti-form__label {
  font-family: var(--font-accent);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

.ti-form__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  background: white;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ti-form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51,0,153,0.08);
}
.ti-form__input::placeholder { color: #bbb; }

textarea.ti-form__input { resize: vertical; padding: 13px 16px; line-height: 1.7; }

.form-notice {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-notice--success { background: #e8f5e9; color: #2e7d32; }
.form-notice--error   { background: #fdecea; color: #c62828; }

/* ─── Newsletter footer ───────────────────────────────────────────────── */
.newsletter-form { margin-top: 16px; }
.newsletter-form__row {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.newsletter-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
  padding: 11px 14px;
  min-width: 0;
  -webkit-text-fill-color: rgba(255,255,255,0.9);
}
.newsletter-form__input::placeholder { color: rgba(255,255,255,0.45); opacity: 1; }
.newsletter-form__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  color: white;
  padding: 11px 14px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.newsletter-form__btn:hover { background: rgba(255,255,255,0.2); }
.newsletter-form__btn svg { width: 18px; height: 18px; stroke: white; }

/* ═══════════════════════════════════════════════════════
   PAGE CONTACT
═══════════════════════════════════════════════════════ */
.contact-hero {
  padding: 56px 0 48px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.contact-hero__surtitre {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
  margin-bottom: 12px;
}
.contact-hero__titre {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}
.contact-hero__texte { font-size: 1.05rem; font-weight: 500; line-height: 1.7; color: var(--color-text); max-width: 480px; }

.contact-page .ti-form__label { font-size: 13px; }

.contact-body { padding: 56px 0 80px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}

.contact-form-wrap {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 40px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-infos {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}
.contact-info-bloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(51, 0, 153, 0.15);
  border-left: 3px solid var(--color-primary);
}
.contact-info-bloc:last-child { border-bottom: none; }
.contact-info-label {
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.contact-info-bloc a,
.contact-info-bloc p:not(.contact-info-label) { font-size: 0.9rem; line-height: 1.6; color: var(--color-text); }
.contact-info-bloc a:hover { color: var(--color-primary); }

@media (max-width: 560px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-wrap { padding: 28px 24px 32px; }
  .ti-form__row--half { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PAGE POINTS DE VENTE
═══════════════════════════════════════════════════════ */
.pdv-hero {
  padding: 56px 0 48px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.pdv-hero__surtitre {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
  margin-bottom: 12px;
}
.pdv-hero__titre {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}
.pdv-hero__texte { font-size: 1.05rem; font-weight: 500; line-height: 1.7; color: var(--color-text); max-width: 480px; }

/* Carte Google Maps + liste scrollable synchronisée, groupée par catégorie */
.ti-pdv-liste { padding: 48px 0 80px; }
.ti-pdv-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ti-pdv-map {
  flex: 2 1 380px;
  min-width: 280px;
  height: 560px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(51,0,153,0.06);
}
.ti-pdv-list {
  order: -1;
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  max-height: 560px;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 24px;
  box-sizing: border-box;
}
/* Fondu bas — signale qu'il y a du contenu à faire défiler */
.ti-pdv-list::after {
  content: '';
  position: sticky;
  display: block;
  left: 0;
  bottom: -24px;
  width: 100%;
  height: 32px;
  margin-top: -32px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
.ti-pdv-group { margin-bottom: 24px; }
.ti-pdv-group:last-child { margin-bottom: 0; }
.ti-pdv-group h3 {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.ti-pdv-group[data-type="createur"]  h3 { color: #330099; border-bottom-color: #330099; }
.ti-pdv-group[data-type="boutique"]  h3 { color: #8B5E34; border-bottom-color: #8B5E34; }
.ti-pdv-group[data-type="librairie"] h3 { color: #BC7F15; border-bottom-color: #BC7F15; }
.ti-pdv-group[data-type="culture"]   h3 { color: #5C7A52; border-bottom-color: #5C7A52; }
.ti-pdv-group[data-type="marche"]    h3 { color: #B5533C; border-bottom-color: #B5533C; }
.ti-pdv-group ul { list-style: none; margin: 0; padding: 0; }
.ti-pdv-group__empty {
  font-size: 0.82rem;
  color: var(--color-text-light);
  font-style: italic;
  padding: 4px;
}
.ti-pdv-group li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.ti-pdv-group li:hover { background: var(--color-border); }
.ti-pdv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.ti-pdv-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-text);
}
.ti-pdv-addr {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .ti-pdv-map { height: 400px; }
  .ti-pdv-list { max-height: 320px; max-width: none; }
}
@media (max-width: 480px) {
  .ti-pdv-map { height: 320px; }
  .ti-pdv-list { max-height: 280px; padding: 16px; }
}

/* ─── Back to top ────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 4px 16px rgba(51,0,153,0.25);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top:hover { background: var(--color-cta); }
/* Remonte au-dessus du bandeau collant "Ajouter au panier" quand il est
   visible (fiche produit, mobile) - sinon le bouton retour-haut se pose
   dessus et cache "Ajouter au panier" (signale par Yoann). */
body:has(#sticky-cart.visible) .back-to-top { bottom: 96px; }

/* ─── Footer trust strip ───────────────────────────────────────────────
   Icones paiement sur une ligne, infos livraison sur la ligne du dessous,
   les deux centrees — empile a toutes les tailles (2026-07-22), plus
   seulement en dessous de 1024px. */
.footer-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 40px;
  text-align: center;
}
.footer-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pay-badge svg {
  width: 44px;
  height: 28px;
  display: block;
  border-radius: 4px;
}
.footer-labels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.trust-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* ─── WooCommerce product tabs → accordéon (ti-product-accordion, tabs.php) ──── */
/* Bande 3 : blanc, pleine largeur (même logique que les bandes 1 et 2). Le contenu reste
   aligné sur la marge habituelle du site (même calcul que .product-info), il ne colle pas
   au bord du navigateur comme la photo, seul le fond est plein cadre. */
.woocommerce-tabs {
  padding: 48px 0 56px;
  background: var(--color-white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}
.ti-product-accordion .faq-item:first-child { border-top: 1px solid var(--color-border); }
.woocommerce-tabs .panel {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}
/* Seul le 1er h2 (le "Description" redondant que WooCommerce/le post_content répète
   en tête, doublon du titre de l'accordéon) est caché — pas les sous-titres réels
   de la description produit qui suivent. Bug trouvé le 2026-07-09 : la règle globale
   masquait aussi ces sous-titres, donnant l'impression que la description avait disparu. */
.woocommerce-tabs .panel h2:first-of-type { display: none; }
.tab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tab-list li {
  padding: 12px 16px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-primary);
  font-size: 0.9rem;
}

/* Fiches génériques (Modalités de livraison + Conseils d'entretien) — ti_info_card() */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}
.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  padding: 24px 16px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}
.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.info-card__icon svg { width: 100%; height: 100%; }
.info-card__title {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 6px;
}
.info-card__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 4px;
  hyphens: auto;
}
.info-card__condition {
  font-size: 12px;
  color: var(--color-text-light);
}
@media (max-width: 480px) {
  /* 2 colonnes + blocs serres (reconstruit 2026-07-23, aucune trace en memoire -
     signale directement par Yoann) : 1 seule colonne avec des blocs genereux
     (172px min-height) prenait trop de place verticale sur les onglets Conseils
     d'entretien / Modalites de livraison (5 cartes chacun). */
  .info-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .info-card { min-height: 130px; padding: 16px 10px; }
  .info-card__icon { width: 28px; height: 28px; margin-bottom: 6px; }
  .info-card__value { font-size: 18px; }
}

/* ─── Sticky add-to-cart ─────────────────────────────────────────────── */
.sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-cart.visible {
  transform: translateY(0);
}
.sticky-cart__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  /* padding-block seulement (pas le raccourci padding: 12px 0, qui remettait
     aussi les cotes a 0 et ecrasait le padding-inline herite de .container -
     bandeau collant colle aux bords sur mobile, signale par Yoann). */
  padding-block: 12px;
}
.sticky-cart__img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.sticky-cart__info { flex: 1; min-width: 0; }
.sticky-cart__name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}
.sticky-cart__price { font-size: 0.95rem; color: var(--color-accent); font-weight: 600; }
.sticky-cart__action { flex-shrink: 0; }
.sticky-cart__action .button {
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .sticky-cart__img { display: none; }
  .sticky-cart__name { font-size: 0.8rem; }
  .sticky-cart__action .button { padding: 10px 14px; font-size: 0.8rem; }
}

/* ─── wc-main wrapper ────────────────────────────────────────────────── */
.wc-main { width: 100%; }
.wc-main > .woocommerce-notices-wrapper {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* ─── Panier custom ──────────────────────────────────────────────────── */
.ti-cart { padding: 40px 0 80px; }
.ti-cart__title { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-primary); margin-bottom: 40px; }

/* Panier vide */
.ti-cart__empty { text-align: center; padding: 80px 0; }
.ti-cart__empty-icon { width: 72px; height: 72px; color: var(--color-border); margin: 0 auto 24px; display: block; }
.ti-cart__empty-text { font-size: 1.1rem; color: var(--color-text); margin-bottom: 24px; }

/* Layout 2 colonnes */
.ti-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

/* Liste articles */
.cart-list__head {
  display: grid;
  grid-template-columns: 80px 1fr 90px 90px 80px 44px;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.78rem;
  font-family: var(--font-heading);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cart-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px 90px 80px 44px;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-row__img img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius); display: block; }
.cart-row__name { font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-primary); text-decoration: none; display: block; margin-bottom: 4px; }
.cart-row__name:hover { text-decoration: underline; }
.cart-row__price, .cart-row__subtotal { font-size: 0.9rem; color: var(--color-text); }
.cart-row__subtotal { font-weight: 600; color: var(--color-accent); }
.cart-remove {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--color-text); border: 1px solid var(--color-border);
  transition: color 0.2s, border-color 0.2s;
}
.cart-remove:hover { color: #c00; border-color: #c00; }
.cart-remove svg { width: 14px; height: 14px; }

/* Actions panier */
.cart-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.cart-coupon { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.cart-coupon__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: white;
  outline: none;
}
.cart-coupon__input:focus { border-color: var(--color-primary); }
.button--outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.button--outline:hover { background: var(--color-primary); color: white; }
.cart-update-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text); font-size: 0.85rem;
  padding: 10px 0; opacity: 0.7; transition: opacity 0.2s;
}
.cart-update-btn:hover { opacity: 1; }
.cart-update-btn svg { width: 16px; height: 16px; }

/* Réassurance panier — déplacée sous le bouton "Valider la commande" dans la
   colonne récapitulatif (380px, cf. .ti-cart__layout), donc plus assez large
   pour 4 colonnes comme avant (ancien emplacement dans la colonne principale,
   ~900px). 2×2 systématique, desktop et mobile — la colonne fait à peu près la
   même largeur dans les deux cas, pas besoin de breakpoint différent. */
.cart-reassurance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--color-border);
}
.cart-reassurance__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
  font-size: 0.88rem; font-weight: 500; color: var(--color-text); line-height: 1.35;
}
.cart-reassurance__item svg { width: 32px; height: 32px; color: var(--color-primary); flex-shrink: 0; }

/* Résumé commande */
.ti-cart__summary { position: sticky; top: calc(var(--header-height) + 24px); }
.ti-cart__summary-title { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-primary); margin-bottom: 20px; }

/* WooCommerce cart totals override — float:right+width:48% neutralisés */
.woocommerce-cart .cart-collaterals,
.woocommerce-page .cart-collaterals,
.ti-cart__summary .cart-collaterals {
  width: 100% !important;
  float: none !important;
}
.woocommerce-cart .cart_totals,
.woocommerce-page .cart_totals,
.ti-cart__summary .cart_totals {
  float: none !important;
  width: 100% !important;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.cart_totals h2 { display: none; }
/* .shop_table/tbody sortis du layout table (retour Yoann 2026-07-28 : le
   bloc EXPÉDITION ne prenait que ~66% de la largeur). Cause : la ligne
   Expédition est blockifiée (display:block) mais tbody restait
   table-row-group - chaîne de bloc englobant cassée, les navigateurs
   retombaient sur la largeur de colonne calculée par l'AUTRE ligne
   (Total, restée en vraie mise en page tableau) au lieu de 100% du
   tableau. En sortant table+tbody du modèle tableau, tout redevient du
   bloc normal aux largeurs previsibles ; la ligne Total (seule ligne
   encore "à deux colonnes" visuellement) est reconvertie en flex pour
   garder son alignement libellé-gauche/valeur-droite. */
.cart_totals .shop_table,
.cart_totals .shop_table tbody { display: block; width: 100%; }
.cart_totals .shop_table tr { border-bottom: 1px solid var(--color-border); }
.cart_totals .shop_table tr:last-child { border-bottom: none; }
.cart_totals .shop_table th,
.cart_totals .shop_table td { padding: 12px 0; font-size: 0.9rem; vertical-align: middle; }
.cart_totals .shop_table th { color: var(--color-text); font-weight: normal; }
.cart_totals .shop_table td { text-align: right; }
.cart_totals .order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.cart_totals .order-total th,
.cart_totals .order-total td { display: block; width: auto; padding: 16px 0 0; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-primary); }
.cart_totals .order-total td { color: var(--color-accent); text-align: right; }
.cart_totals .wc-proceed-to-checkout { margin-top: 20px; }
.cart_totals .wc-proceed-to-checkout .checkout-button {
  display: block; width: 100%; text-align: center;
  background: var(--color-primary); color: white;
  padding: 14px 20px; border-radius: var(--radius);
  font-family: var(--font-heading); font-size: 1rem;
  text-decoration: none; transition: background 0.2s;
}
.cart_totals .wc-proceed-to-checkout .checkout-button:hover { background: var(--color-cta); }
.cart_totals .shipping-calculator-button { font-size: 0.82rem; color: var(--color-secondary); }

/* Code promo deplace dans le recapitulatif (entre le Total et "Valider la
   commande", cf. functions.php woocommerce_proceed_to_checkout, accroche
   priorite 5 sur le meme hook que le bouton). Erreur de la 1ere passe :
   j'avais suppose que le code promo se retrouverait comme un FRERE de
   .wc-proceed-to-checkout (avant lui), donc mis un margin-top sur ce
   wrapper pour creer l'espace en dessous du panier. En verifiant le DOM
   reel, .wc-proceed-to-checkout ENVELOPPE tout ce que ce hook produit -
   le code promo et le bouton en sortent tous les deux comme des ENFANTS
   du meme wrapper, pas comme des freres separes. Le margin-top du wrapper
   ne crée donc de l'espace qu'avant le code promo (entre le tableau de
   totaux et lui), jamais entre le code promo et le bouton en dessous -
   d'ou le "collé" signalé par Yoann. Fix : margin-bottom directement sur
   .cart-coupon, qui est bien un vrai frere du bouton a l'interieur du
   wrapper. Layout .cart-coupon d'origine (flex row, min-width:240px)
   pense pour la large colonne principale, trop etroit ici (~330px). */
.cart_totals .cart-coupon {
  min-width: 0;
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.cart_totals .cart-coupon__input { min-width: 0; }

/* Bloc "Expédition" du panier — repensé en bloc vertical (au lieu d'une
   ligne th/td de tableau) : titre en haut aligné à gauche, puis la liste
   des options de transport. Sous-total masqué car redondant avec le Total
   en bas du récapitulatif (retour Yoann 2026-07-28).
   L'adresse de livraison + "Modifier l'adresse" n'a de sens que pour
   l'option "Livraison à domicile" (elle ne détermine ni le point relais
   choisi, ni le retrait en boutique) : ti-cart.js la déplace physiquement
   sous cette option précise (JS, pas CSS order, car il faut l'insérer
   entre deux <li> et pas seulement réordonner des enfants directs). */
.cart_totals .shop_table tr.cart-subtotal { display: none; }
.woocommerce-shipping-totals,
.woocommerce-shipping-totals th,
.woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  /* !important nécessaire : .cart_totals .shop_table td (text-align:right)
     a une specificite plus forte (2 classes) que ce selecteur. */
  text-align: left !important;
}
.woocommerce-shipping-totals th {
  padding-bottom: 12px;
}
.woocommerce-shipping-totals td {
  padding-top: 0;
}
.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-shipping-methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-shipping-methods li:first-child { padding-top: 0; }
.woocommerce-shipping-methods li:last-child { border-bottom: none; padding-bottom: 0; }
.woocommerce-shipping-methods li input[type="radio"] {
  flex-shrink: 0;
  margin-top: 5px;
}
.woocommerce-shipping-methods label {
  flex: 1;
  min-width: 0;
  /* !important necessaire : woocommerce.css a ".woocommerce ul#shipping_method
     li label" (display:inline) - le selecteur ID rend ce style plus fort que
     n'importe quelle combinaison de classes ici. */
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.woocommerce-shipping-methods .ti-shipping-free {
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}
.woocommerce-shipping-methods .bw-parcel-point,
.woocommerce-shipping-methods .woocommerce-shipping-destination,
.woocommerce-shipping-methods .woocommerce-shipping-calculator {
  flex-basis: 100%;
  width: 100%;
  margin: 6px 0 0 26px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-light);
}
.woocommerce-shipping-methods .bw-parcel-point { padding: 0; }
.woocommerce-shipping-methods .bw-parcel-point br { content: ""; display: block; margin-top: 2px; }
.woocommerce-shipping-methods .bw-select-parcel,
.woocommerce-shipping-methods .woocommerce-shipping-destination a,
.woocommerce-shipping-methods .woocommerce-shipping-calculator a {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

/* Select2 (pays du calculateur de livraison) — woocommerce.css charge un
   raccourci "padding: 0.5em" après select2.css et écrase son
   "padding-right: 20px" (qui réserve la place de la flèche) : le texte
   ("France") se retrouve sous la flèche. On restaure la place réservée. */
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 20px;
}

/* Quantity input WooCommerce */
.cart-row .quantity { display: flex; align-items: center; }
.cart-row .qty {
  width: 64px; text-align: center;
  padding: 6px 4px; font-size: 0.9rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: white; -moz-appearance: textfield;
}
.cart-row .qty::-webkit-outer-spin-button,
.cart-row .qty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Neutralise les styles WC smallscreen sur nos éléments */
.cart-row td.product-remove::before,
.cart-row td::before { display: none !important; }

/* Mobile panier */
@media (max-width: 960px) {
  .ti-cart__layout { grid-template-columns: 1fr; }
  .ti-cart__summary { position: static; margin-top: 8px; }
  .cart-list__head { display: none; }
  .cart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
    position: relative;
    padding-right: 44px;
  }
  .cart-row__img { flex-shrink: 0; }
  .cart-row__img img { width: 72px; height: 72px; }
  .cart-row__info { flex: 1; min-width: 140px; }
  .cart-row__price { display: none; }
  .cart-row__qty { flex-basis: auto; }
  .cart-row__subtotal {
    flex-basis: auto; font-weight: 600; color: var(--color-accent);
    font-size: 0.95rem;
  }
  .cart-row__subtotal::before { content: 'Total : '; font-weight: normal; color: var(--color-text); font-size: 0.85rem; }
  .cart-row__remove { position: absolute; top: 20px; right: 0; }
}
@media (max-width: 480px) {
  .cart-coupon { min-width: 100%; }
  .cart-actions { flex-direction: column; align-items: flex-start; }
}

/* ─── Mon compte ─────────────────────────────────────────────────────── */
.ti-account { padding: 40px 0 80px; }

/* Navigation compte */
.ti-account__nav { margin-bottom: 36px; }
.ti-account__nav-list {
  display: flex; gap: 4px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0;
  border-bottom: 2px solid var(--color-border);
}
.ti-account__nav-item a {
  display: block; padding: 10px 20px;
  font-family: var(--font-heading); font-size: 0.88rem;
  color: var(--color-text); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.ti-account__nav-item.is-active a,
.ti-account__nav-item a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.ti-account__nav-item--customer-logout a { color: #999; }
.ti-account__nav-item--customer-logout a:hover { color: #c00; border-bottom-color: #c00; }

/* Dashboard */
.account-dashboard__welcome { margin-bottom: 36px; }
.account-dashboard__name { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-primary); margin-bottom: 6px; }
.account-dashboard__sub { color: var(--color-text); font-size: 0.95rem; }

.account-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.account-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: white;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.account-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px rgba(51,0,153,0.08); }
.account-card--logout { opacity: 0.7; }
.account-card--logout:hover { border-color: #c00; box-shadow: none; }
.account-card__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-bg); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-primary);
}
.account-card__icon svg { width: 22px; height: 22px; }
.account-card--logout .account-card__icon { color: #999; }
.account-card__body { flex: 1; min-width: 0; }
.account-card__title { font-family: var(--font-heading); font-size: 0.92rem; color: var(--color-primary); margin-bottom: 2px; }
.account-card--logout .account-card__title { color: #777; }
.account-card__desc { font-size: 0.78rem; color: var(--color-text); line-height: 1.3; }
.account-card__arrow { width: 18px; height: 18px; color: var(--color-border); flex-shrink: 0; }
.account-card:hover .account-card__arrow { color: var(--color-primary); }

/* Dernières commandes */
.account-section-title { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-primary); margin-bottom: 16px; }
.account-orders-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.account-order-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 20px; background: white;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.2s;
  font-size: 0.88rem; color: var(--color-text);
}
.account-order-row:hover { border-color: var(--color-primary); }
.account-order-row__num { font-family: var(--font-heading); color: var(--color-primary); }
.account-order-row__status {
  display: inline-block; padding: 3px 10px;
  border-radius: 20px; font-size: 0.75rem;
}
.status-completed  { background: #e8f5e9; color: #2e7d32; }
.status-processing { background: #e3f2fd; color: #1565c0; }
.status-on-hold    { background: #fff8e1; color: #f57f17; }
.status-cancelled  { background: #fce4ec; color: #c62828; }
.account-order-row__total { font-weight: 600; color: var(--color-accent); }
.account-order-row svg { width: 16px; height: 16px; color: var(--color-border); }
.account-order-row:hover svg { color: var(--color-primary); }
.account-see-all { font-size: 0.88rem; color: var(--color-secondary); text-decoration: none; }
.account-see-all:hover { text-decoration: underline; }

/* Sous-pages compte (formulaires, liste commandes WC defaults) */
.ti-account__content .woocommerce-MyAccount-content { max-width: 800px; }
.ti-account__content .woocommerce-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ti-account__content .woocommerce-table th,
.ti-account__content .woocommerce-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); text-align: left; }
.ti-account__content .woocommerce-table thead th { font-family: var(--font-heading); color: var(--color-primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ti-account__content .woocommerce-Button { font-size: 0.82rem; padding: 6px 14px; }

@media (max-width: 1024px) {
  .account-dashboard__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .account-dashboard__grid { grid-template-columns: 1fr; }
  .ti-account__nav-list { gap: 0; }
  .ti-account__nav-item a { padding: 8px 12px; font-size: 0.8rem; }
  .account-order-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .account-order-row__date, .account-order-row svg { display: none; }
}

/* Icônes header : taille augmentée + effet bond au survol (2026-07-15) */
.action-btn svg, .action-btn img { width: 26px; height: 26px; }
.action-btn:hover svg, .action-btn:hover img { animation: ti-icon-bounce 0.4s ease; }
@keyframes ti-icon-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-2px); }
}

/* Icônes header : re-ajustement taille + marge droite (2026-07-15 bis) */
.action-btn { width: 44px; height: 44px; }
.action-btn svg, .action-btn img { width: 32px; height: 32px; }
.header-actions { margin-right: 10px; }

/* Liens + survol icônes réassurance (2026-07-15) */
.reassurance-item a { display: flex; align-items: center; }
.reassurance-item:hover img { animation: ti-icon-bounce 0.4s ease; }

/* Réassurance : desktop centré + resserré, mobile en une ligne défilante (2026-07-15) */
.reassurance-list { justify-content: center; gap: 150px; }
@media (max-width: 1024px) {
  .reassurance-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 28px;
    padding: 0 20px;
  }
  .reassurance-list::-webkit-scrollbar { display: none; }
  .reassurance-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex-shrink: 0;
  }
  /* Degrade de bord : signale que la liste continue hors ecran, meme
     mecanisme que .category-filter::after (2026-07-22, rien n'indiquait
     jusque-la que la bande d'icones etait scrollable sur mobile). */
  .reassurance-strip { position: relative; }
  .reassurance-strip::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--color-bg) 75%);
    pointer-events: none;
  }
}

/* Barre de recherche fixe desktop + police nav agrandie (2026-07-15) */
.nav-list > li > a { font-size: 16px; padding: 10px 16px; }
.header-search-desktop { display: flex; align-items: center; }
.header-search-desktop form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  width: 220px;
  transition: width var(--transition);
}
.header-search-desktop form:focus-within { width: 280px; border-color: var(--color-primary); }
.header-search-desktop__icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.header-search-desktop input[type="search"] {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  width: 100%;
}
.header-search-desktop input[type="search"]::placeholder { color: #999; }
@media (max-width: 1300px) {
  .header-search-desktop { display: none; }
}

/* Header pleine largeur (logo/pictos collés aux bords, petite marge) + recherche agrandie (2026-07-15 ter) */
.container.header-inner { max-width: none; width: 100%; padding-inline: 32px; margin-inline: 0; }
.header-actions { margin-right: 0; }

.header-search-desktop form {
  border: 2px solid #000;
  background: #fff;
  width: 300px;
  padding: 10px 20px;
}
.header-search-desktop form:focus-within { width: 360px; border-color: #000; }
.header-search-desktop__icon { width: 22px; height: 22px; opacity: 1; }
.header-search-desktop input[type="search"] { font-size: 15px; color: #000; }
.header-search-desktop input[type="search"]::placeholder { color: #333; }

/* Recherche : bordure fine et claire, coins carrés, plus grande (2026-07-15 quater) */
.header-search-desktop form {
  border: 1px solid #999;
  border-radius: 6px;
  width: 340px;
  padding: 11px 20px;
}
.header-search-desktop form:focus-within { width: 400px; border-color: #333; }

/* Menu : police Quicksand + effet de survol assombri/éclairci avec soulignement (2026-07-15 quater) */
.nav-list > li > a {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0;
  white-space: nowrap;
  position: relative;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nav-list:hover > li > a { opacity: 0.4; }
.nav-list > li > a:hover,
.nav-list > li:hover > a {
  opacity: 1;
  color: #000;
  background: transparent;
}
.nav-list > li > a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.nav-list > li > a:hover::after { transform: scaleX(1); }

/* Recherche : hauteur réduite, coins plus arrondis, fond légèrement grisé (2026-07-15 quinquies) */
.header-search-desktop form {
  padding: 8px 20px;
  border-radius: 10px;
  background: #f7f7f7;
}

/* Recherche desktop harmonisée avec le style mobile (2026-07-22) : Yoann
   trouve la version mobile (pilule sans bordure, fond gris tres leger) plus
   jolie que la version desktop (bordure grise, coins peu arrondis, icone
   epaisse). Reprend les memes valeurs, la largeur/expansion au focus reste
   propre au desktop (pas d'equivalent mobile, champ deja pleine largeur). */
.header-search-desktop form {
  border: none;
  border-radius: 999px;
  background: rgba(51,51,51,0.06);
}
.header-search-desktop form:focus-within { border-color: transparent; background: rgba(51,51,51,0.09); }
.header-search-desktop__icon { width: 16px; height: 16px; opacity: 1; color: rgba(51,51,51,0.45); }
.header-search-desktop input[type="search"] { font-size: 14px; color: var(--color-text); }
.header-search-desktop input[type="search"]::placeholder { color: rgba(51,51,51,0.4); }

/* Mega menu — refonte liste + grande image au survol (2026-07-15) */
.mega-split {
  display: flex;
  gap: 56px;
  align-items: stretch;
}
.mega-list {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-list__link {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: #aaa;
  text-decoration: none;
  padding: 10px 0;
  position: relative;
  transition: color 0.2s ease;
}
.mega-list__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: #000;
  transition: width 0.25s ease;
}
.mega-list__link:hover,
.mega-list__link.is-active {
  color: #000;
}
.mega-list__link:hover::after,
.mega-list__link.is-active::after {
  width: 36px;
}
.mega-preview {
  flex: 1;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #ede8df;
  min-height: 260px;
}
.mega-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mega-preview__img.is-active { opacity: 1; }

/* Mega menu — ajustements espacement, couleurs, format photo (2026-07-15 bis) */
.mega-list {
  flex: 0 0 380px;
  gap: 14px;
}
.mega-list__link {
  font-size: 17px;
  color: #999;
  white-space: nowrap;
  padding: 6px 0;
}
.mega-list__link::after { display: none; }
.mega-list__link:hover,
.mega-list__link.is-active {
  color: #000;
}
.mega-preview {
  flex: 0 0 460px;
  /* Passé en 1:1 le 2026-07-28 pour réduire le rognage des photos carrées/
     portrait, puis reverté le jour même (retour Yoann : "casse la mise en
     page du méga menu" - le cadre 560px de haut déséquilibrait le panneau
     à côté de la liste de 5 liens, bien plus courte). Rognage des photos
     accepté comme compromis ; si de nouvelles photos sont uploadées pour
     ce menu, les recadrer en amont côté image plutôt que retoucher ce
     ratio. */
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* Mega menu — espacement/taille/centrage (2026-07-15 ter) */
.mega-split { justify-content: center; }
.mega-list { gap: 22px; }
.mega-preview { flex: 0 0 560px; }

/* Mega menu — espace entre liste et photo augmenté (2026-07-15 quater) */
.mega-split { gap: 80px; }

/* Le panneau (liste 380px + photo 560px + gap 80px = 1020px) ne tient pas
   dans une fenetre/ecran entre 1025 et ~1150px (petits laptops, fenetre non
   maximisee) — verifie : overflow horizontal de toute la page a 1025px avant
   ce fix. En dessous de 1024px le header bascule de toute facon sur le menu
   mobile (hamburger), donc cette regle ne joue que sur cette plage etroite. */
@media (max-width: 1150px) {
  .mega-preview { display: none; }
  .mega-split { gap: 0; justify-content: center; }
  .mega-list { flex: 0 0 auto; width: auto; max-width: calc(100vw - 64px); }
}

/* Fix z-index : le menu mobile doit passer au-dessus du header sticky (2026-07-15) */
.mobile-nav-overlay { z-index: 1001; }
.mobile-nav { z-index: 1002; }

/* Bannière promo défilante : desktop uniquement, retirée sur mobile (2026-07-15) */
@media (max-width: 1024px) {
  .promo-bar { display: none; }
}

/* Fix footer mobile : liens sous le logo repassés en liste verticale simple (2026-07-15) */
@media (max-width: 1024px) {
  .footer-brand-nav {
    display: block;
  }
  .footer-brand-nav li + li { margin-top: 10px; }
}

/* Footer mobile : grille 2x2 (logo+pages / boutique / mentions / contact), newsletter en 3e ligne pleine largeur (2026-07-15) */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-newsletter { grid-column: 1 / -1; }
}

/* Newsletter home : titre agrandi et en majuscules (2026-07-15) */
.home-newsletter__title {
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Newsletter home : centrage (2026-07-15 bis) */
.home-newsletter__inner { justify-content: center; text-align: center; }
.home-newsletter__copy { flex: 0 1 auto; }

/* Harmonisation taille des titres de section home (2026-07-15) */
.home-cats__title,
.home-magazine__title,
.home-shop__title,
.home-newsletter__title {
  font-size: 30px;
}

/* Newsletter home : formulaire sous le texte, centré, description agrandie (2026-07-15 ter) */
.home-newsletter__inner {
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.home-newsletter__copy { flex: 0 0 auto; max-width: 560px; }
.home-newsletter__desc { font-size: 17px; }
.home-newsletter__form { width: 100%; max-width: 460px; }

/* Fix newsletter home : section trop haute + placeholder invisible (2026-07-15 quater) */
.home-newsletter { padding: 40px 0; }
.home-newsletter__inner { gap: 18px; }
.home-newsletter .home-newsletter__form .newsletter-form__input::placeholder {
  color: #666;
  opacity: 1;
}

/* Fix newsletter home : flex-basis 380px héritée de l'ancienne disposition en ligne (2026-07-15 quinquies) */
.home-newsletter__form { flex: 0 0 auto; }

/* ─── Page auteur Meghan (reconstruite 2026-07-18) ────────────────────── */
/* Le hero utilise .page-hero (composant partagé). Titres de section au même
   gabarit que .pro-section-title/.home-cats__title ailleurs sur le site. */
.auteur-section-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
}

/* Bio — même traitement que .teinture-section__intro (texte de lecture,
   colonne centrée, 1rem/1.75 déjà harmonisé site-wide le 2026-07-17). */
.auteur-intro { padding: 56px 0 48px; background: var(--color-white); }
.auteur-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.auteur-bio__inner {
  color: var(--color-text);
  line-height: 1.75;
  font-size: 1rem;
}
.auteur-bio__inner p { margin: 0 0 20px; }
.auteur-bio__inner p:last-child { margin-bottom: 0; }
.auteur-formations__inner { background: var(--color-bg); border-radius: var(--radius); padding: 32px 32px 8px; }
@media (max-width: 780px) {
  .auteur-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .auteur-formations__inner { padding: 24px 24px 8px; }
}

/* Formations — liste éditoriale année/texte, même idiome que la liste
   numérotée d'Espace Pro (.pro-why-item) : pas de boîte, filet horizontal. */
.meghan-timeline { display: flex; flex-direction: column; }
.meghan-timeline-item {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.meghan-timeline-item:last-child { border-bottom: 1px solid var(--color-border); }
.meghan-timeline-item__year {
  flex: 0 0 auto;
  width: 64px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
}
.meghan-timeline-item__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}
@media (max-width: 1024px) {
  .meghan-timeline-item { gap: 16px; padding: 16px 0; }
  .meghan-timeline-item__year { width: 48px; font-size: 1rem; }
}

/* Techniques pratiquées — scroll horizontal plein bord, même mécanique que
   .home-cats (spacer JS via setTrackOffsets(), flèches .home-scroll-arrow) ;
   cartes .technique-card réutilisées telles quelles depuis La Teinture. */
.auteur-techniques { position: relative; padding: 48px 0 56px; background: var(--color-primary); overflow: hidden; }
.auteur-techniques .auteur-section-title { color: var(--color-white); }
.technique-card__role { font-size: 0.8rem; color: var(--color-text-light); margin: 8px 0 0; }
.auteur-techniques__head { margin-bottom: 28px; }
.auteur-techniques__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 8px;
  scrollbar-width: none;
}
.auteur-techniques__track::-webkit-scrollbar { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   Page Livraisons & retours — refonte (2026-07-22)
   Fiche pratique : cartes de comparaison, parcours en etapes, accordeon
   de cas frequents. Remplace le rendu texte brut ex-Elementor de
   page.php pour cette page precise (template dedie).
══════════════════════════════════════════════════════════════════════ */
.livraison-page { padding: 48px 0 88px; background: var(--color-bg); }

.livraison-hero { padding-bottom: 8px; }
.livraison-hero__eyebrow {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 10px;
}
.livraison-hero__titre {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 14px;
}
.livraison-hero__texte { max-width: 62ch; font-size: 16px; line-height: 1.7; margin: 0; }

.livraison-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.livraison-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 16px 9px 10px;
  font-size: 13.5px;
  color: var(--color-text);
}
.livraison-fact img, .livraison-fact svg { width: 22px; height: 22px; flex-shrink: 0; }
.livraison-fact svg { color: var(--color-primary); }
.livraison-fact strong { font-weight: 600; }

.livraison-block { margin-top: 56px; }
.livraison-block__head { margin-bottom: 22px; }
.livraison-block__head h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.livraison-block__head p { margin: 0; font-size: 14.5px; color: var(--color-text-light); max-width: 56ch; }
.livraison-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Methodes de livraison : cartes */
.livraison-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.livraison-method {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 24px 22px;
  position: relative;
  overflow: hidden;
}
.livraison-method::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.livraison-method__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0 16px;
}
.livraison-method__icon svg { width: 25px; height: 25px; color: var(--color-white); }
.livraison-method h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--color-text); margin: 0 0 4px; }
.livraison-method__sub { font-size: 13px; color: var(--color-text-light); margin: 0 0 18px; }
.livraison-method__price {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #EDE4D8;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.livraison-method__price .num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.livraison-method__price .note { font-size: 13px; color: var(--color-text-light); }
.livraison-method__meta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.livraison-method__meta div { display: flex; gap: 10px; align-items: flex-start; }
.livraison-method__meta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--color-secondary); }
.livraison-method__meta b { color: var(--color-text); font-weight: 600; }

/* Parcours en 4 etapes */
.livraison-process { display: grid; grid-template-columns: repeat(4, 1fr); }
.livraison-process__step { position: relative; padding: 0 14px; }
.livraison-process__step:first-child { padding-left: 0; }
.livraison-process__step:last-child { padding-right: 0; }
.livraison-process__num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.livraison-process__line { position: absolute; top: 18px; left: -50%; right: 50%; height: 3px; background: #EFE9FB; z-index: 1; }
.livraison-process__step:first-child .livraison-process__line { display: none; }
.livraison-process__step h3 { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0 0 6px; }
.livraison-process__step p { font-size: 13.5px; margin: 0; color: var(--color-text-light); }
.livraison-process__note { margin-top: 20px; font-size: 12.5px; color: var(--color-text-light); font-style: italic; }

/* Zones de livraison */
.livraison-zone {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(4,114,127,0.08);
  border-radius: 14px;
  padding: 20px 24px;
}
.livraison-zone svg { width: 30px; height: 30px; color: var(--color-secondary); flex-shrink: 0; }
.livraison-zone h3 { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--color-text); margin: 0 0 4px; }
.livraison-zone p { font-size: 14px; margin: 0; }
.livraison-zone a { color: var(--color-primary); font-weight: 600; }

/* Retours : 3 etapes */
.livraison-returns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.livraison-return { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; }
.livraison-return__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
  background: rgba(188,127,21,0.12);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.livraison-return h3 { font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; color: var(--color-text); margin: 0 0 6px; }
.livraison-return p { font-size: 13.5px; margin: 0; }

/* Un souci avec votre livraison : accordeon */
.livraison-issues { border-top: 1px solid var(--color-border); }
.livraison-issue { border-bottom: 1px solid var(--color-border); }
.livraison-issue summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 2px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
}
.livraison-issue summary::-webkit-details-marker { display: none; }
.livraison-issue summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-light);
}
.livraison-issue[open] summary::after { content: '−'; }
.livraison-issue p { padding: 0 2px 20px 2px; font-size: 14px; margin: 0; max-width: 62ch; }

.livraison-meta { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 12.5px; color: var(--color-text-light); font-style: italic; }

@media (max-width: 1024px) {
  .livraison-methods { grid-template-columns: 1fr; }
  .livraison-process { grid-template-columns: 1fr; gap: 24px; }
  .livraison-process__step { padding: 0; }
  .livraison-process__line { display: none; }
  .livraison-returns { grid-template-columns: 1fr; }
  .livraison-zone { align-items: flex-start; }
}
/* Mobile paysage + tablette : assez de largeur pour garder les 2 cartes de
   livraison et les 4 etapes du parcours cote a cote, comme sur desktop
   (meme seuil que .shop-edito / .etape-item__photo ailleurs sur le site).
   Retours & remboursements reste empile : 3 cartes de texte plus denses,
   pas demande par Yoann. */
@media (min-width: 561px) and (max-width: 1024px) {
  .livraison-methods { grid-template-columns: 1fr 1fr; }
  .livraison-process { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .livraison-process__step { padding: 0 14px; }
  .livraison-process__step:first-child { padding-left: 0; }
  .livraison-process__step:last-child { padding-right: 0; }
  .livraison-process__line { display: block; }
  .livraison-process__step:first-child .livraison-process__line { display: none; }
}