/* CHINA FACTORY — enhance.css
   Charger après site.css ET le bloc de réglages <style> existant.
   Aucun changement de police, de contenu ou de logique JavaScript. */

:root {
  --r: 8px;
  --r-tuile: 0;
  --cf-rayon: 8px;
  --cf-rayon-surface: 12px;
  --cf-wa: #25D366;
  --cf-court: 160ms;
  --cf-tiroir: 240ms;
  --cf-courbe: cubic-bezier(.22, .68, .26, 1);
  --cf-filtre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFECE8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2' fill='%23111113'/%3E%3Ccircle cx='15' cy='17' r='2' fill='%23111113'/%3E%3C/svg%3E");
  --cf-regle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M7 7v4m5-4v6m5-6v4'/%3E%3C/svg%3E");
  --cf-livraison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V5h11v11M14 9h4l3 4v3h-2M5 16h10'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  --cf-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111113' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-12 7L3 20l1.5-5A8 8 0 1 1 20 11.5Z'/%3E%3Cpath d='M8 7.5c-.5 3.8 2.7 7 6.5 7.5l1-2-2-1-1 1c-1.2-.5-2.1-1.4-2.6-2.6l1-1-1-2Z'/%3E%3C/svg%3E");
}

/* Les commandes s'adoucissent ; leurs dimensions restent prévisibles. */
.btn.btn, .chip.chip, .opt.opt, .qty.qty, .wa-line.wa-line {
  border-radius: var(--cf-rayon);
  transition: background-color var(--cf-court) ease,
    border-color var(--cf-court) ease, color var(--cf-court) ease,
    box-shadow var(--cf-court) ease;
}
.btn.btn, .wa-line.wa-line { min-height: 46px; }
.icon-btn.icon-btn {
  border-radius: var(--cf-rayon);
  min-width: 44px;
  min-height: 44px;
}
.icon-btn.icon-btn, .nav a, .footer-grid a, .sec-lien a,
.mobile-nav > a, .filter-list label, .size-grid label {
  transition: color var(--cf-court) ease,
    background-color var(--cf-court) ease,
    border-color var(--cf-court) ease;
}
.size-grid label { border-radius: 6px; min-height: 40px; }
.filter-list input, .size-grid input { accent-color: var(--accent); }
.size-grid label:has(input:checked) {
  border-color: var(--papier);
  background: var(--encre-haute);
  color: var(--papier);
}
.opt.opt.is-on { box-shadow: inset 0 0 0 1px var(--papier); }
.btn.btn:disabled { box-shadow: none; }
.qty.qty { background: var(--encre-haute); }
.qty button {
  border-radius: 6px;
  transition: background-color var(--cf-court) ease;
}
.qty:focus-within { border-color: var(--papier); }

/* La planche reste jointive : aucune carte arrondie ni carte qui se soulève.
   Seul le contour extérieur de la feuille reçoit un léger rayon. */
.products.products, .tuiles.tuiles {
  gap: 1px;
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.card.card, .card-media.card-media, .tuile.tuile { border-radius: 0; }
.card.card { min-width: 0; }
.card > a:focus-visible, .tuile:focus-visible { outline-offset: -3px; }
.card-media { overflow: hidden; }
.card-media img, .tuile img {
  transition: transform 260ms var(--cf-courbe);
}
.card-body { transition: background-color var(--cf-court) ease; }
.card-run span { border-radius: 3px; }
.tuile-bas { transition: background-color var(--cf-court) ease; }
.tuile-l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tuile-l::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

/* La galerie, indépendante de la planche, peut arrondir chaque vignette :
   un vrai espace sépare les miniatures et garde la sélection bien lisible. */
.gallery-main.gallery-main {
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.thumbs.thumbs { gap: 8px; margin-top: 10px; background: none; }
.thumb.thumb {
  border-radius: var(--cf-rayon);
  overflow: hidden;
  transition: box-shadow var(--cf-court) ease;
}
.thumb.thumb.is-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cart-items img { border-radius: 6px; }
.p-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.p-meta > div { min-width: 0; padding-right: 12px; }
.p-desc { overflow-wrap: anywhere; }

/* Deux dégradés utiles, aucun sur les cartes.
   1. Le voile existant du hero relie la photo au fond et protège le texte.
   L'image de fond et sa version mobile restent celles du thème. */
.hero.hero::before {
  background: linear-gradient(100deg, var(--encre) 0%,
    rgba(17,17,19,.96) 24%, rgba(17,17,19,.6) 44%,
    rgba(17,17,19,0) 72%);
}
/* 2. Deux tons d'encre donnent de la profondeur au seul appel revendeur. */
.cta-bande.cta-bande {
  border-radius: var(--cf-rayon-surface);
  background: linear-gradient(125deg, var(--encre-haute), var(--encre));
}
.etapes.etapes {
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.hero-text { color: #C8C4BC; }

/* Icônes décoratives locales : le libellé reste le nom accessible.
   Les icônes WhatsApp déjà présentes dans le HTML ne sont pas dupliquées. */
.toolbar button.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.toolbar button.chip::before,
.opt-head h2::before, .bandeau-grid > div:last-child > span::before,
#wa-order::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: center / contain no-repeat;
}
.toolbar button.chip::before { background-image: var(--cf-filtre); }
.opt-head h2 { display: flex; align-items: center; gap: 8px; }
.opt-head h2::before { background-image: var(--cf-regle); }
.bandeau-grid > div:last-child > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.bandeau-grid > div:last-child > span::before {
  background-image: var(--cf-livraison);
}
#wa-order::before { background-image: var(--cf-whatsapp); }

/* WhatsApp : même vert officiel aux trois endroits, texte encre contrasté.
   Aucun dégradé ou halo vert : ce repère suffit à identifier l'action. */
.wa-line.wa-line, #wa-order {
  background: var(--cf-wa);
  border: 1px solid var(--cf-wa);
  border-radius: var(--cf-rayon);
  color: var(--encre);
  font-weight: 600;
  transition: box-shadow var(--cf-court) ease,
    border-color var(--cf-court) ease;
}
.wa-line svg, .fab-opt svg, .fab-ico svg { flex-shrink: 0; }
.fab-main:focus-visible, .fab-opt:focus-visible,
.wa-line:focus-visible, #wa-order:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

/* Ouverture : on conserve les transforms et is-on du thème.
   visibility empêche de tabuler dans un panneau fermé ; son délai permet
   de finir le mouvement de fermeture avant de masquer le panneau. */
.cart.cart, .mobile-nav.mobile-nav {
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--cf-tiroir) var(--cf-courbe),
    visibility 0s var(--cf-tiroir);
}
.cart.cart.is-on, .mobile-nav.mobile-nav.is-on {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.cart.cart { max-width: 100%; border-radius: 12px 0 0 12px; }
.cart.cart.is-on { box-shadow: -12px 0 40px rgba(0,0,0,.28); }
.drawer-backdrop.drawer-backdrop {
  transition: opacity var(--cf-tiroir) ease;
}
.cart-items.cart-items { min-height: 0; overscroll-behavior-y: contain; }
.cart-head.cart-head, .cart-foot.cart-foot { flex-shrink: 0; }
.cart-foot.cart-foot {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.mobile-nav.mobile-nav { overscroll-behavior-y: contain; }
.mobile-nav > a {
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Apparition limitée aux premières zones : pas 458 animations produit.
   Aucune dépendance au scroll ou à un script de révélation. */
@keyframes cf-apparition {
  from { opacity: .3; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.hero-copy, .cat-head, .gallery-main {
  animation: cf-apparition 380ms var(--cf-courbe) both;
}

/* Survol réservé aux appareils disposant d'un vrai pointeur.
   Le zoom reste dans l'image : la grille et les textes ne bougent pas. */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media img, .tuile:hover img {
    transform: scale(1.035);
  }
  .card:hover .card-body { background: var(--papier-doux); }
  .thumb.thumb:hover {
    box-shadow: inset 0 0 0 1px var(--encre);
  }
  .icon-btn.icon-btn:hover, .qty button:hover,
  .mobile-nav > a:hover { background: var(--encre-haute); }
  .btn.btn:not(:disabled):hover {
    background: var(--papier-doux);
    border-color: var(--papier-doux);
  }
  .btn.btn-ghost:hover {
    background: var(--encre-haute);
    border-color: var(--papier);
  }
  .wa-line.wa-line:hover, #wa-order:hover {
    background: var(--cf-wa);
    border-color: var(--cf-wa);
    color: var(--encre);
    box-shadow: 0 0 0 3px rgba(37,211,102,.18);
  }
}

/* Largeurs réelles : minmax(0,...) empêche les références longues de pousser
   les colonnes. La grille générale conserve la largeur produit réglée à 336px. */
.layout.layout { grid-template-columns: 216px minmax(0,1fr); }
.layout > *, .product > *, .footer-grid > *, .cta-bande > * {
  min-width: 0;
}
.products.products {
  grid-template-columns: repeat(auto-fill, minmax(min(100%,336px),1fr));
}
.products.products-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.products.products-6 {
  grid-template-columns: repeat(6,minmax(0,1fr));
}
.toolbar.toolbar, .qty-row.qty-row, .opt-head.opt-head {
  flex-wrap: wrap;
}
.crumbs, .cat-head h1, .product h1, .footer-bottom, .cart-items {
  overflow-wrap: anywhere;
}
.wa-line.wa-line, #wa-order {
  white-space: normal;
  text-align: center;
}
.header-actions { flex-shrink: 0; }

@media (min-width: 861px) {
  .filters.filters {
    padding: 16px;
    border: 1px solid var(--trait);
    border-radius: var(--cf-rayon-surface);
  }
}
@media (max-width: 1080px) {
  .products.products-6 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (max-width: 860px) {
  .layout.layout { grid-template-columns: minmax(0,1fr); }
  .products.products, .products.products-4, .products.products-6 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .hero.hero::before {
    background: linear-gradient(to top, var(--encre) 6%,
      rgba(17,17,19,.88) 38%, rgba(17,17,19,.25) 76%);
  }
  .filters.filters {
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior-y: contain;
    transition: transform var(--cf-tiroir) var(--cf-courbe),
      visibility 0s var(--cf-tiroir);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .filters.filters.is-on {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .fab {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 520px) {
  .header-inner.header-inner { gap: 10px; }
  .brand.brand { gap: 7px; min-width: 0; }
  .logo-mot.logo-mot { font-size: 13px; }
  .header-actions.header-actions { gap: 4px; }
  .cart.cart { border-radius: 0; }
  .cta-bande.cta-bande { padding: 24px; }
  .wa-line.wa-line { padding: 13px 14px; }
}

/* Accessibilité : couper aussi les déplacements de survol et les délais
   de visibility. Les états ouverts/fermés restent ceux du JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .cat-head, .gallery-main { animation: none; }
  .btn, .chip, .opt, .qty, .qty button, .icon-btn, .nav a,
  .footer-grid a, .sec-lien a, .mobile-nav > a, .filter-list label,
  .size-grid label, .card-media img, .tuile img, .card-body,
  .tuile-bas, .thumb, .fab-opt, .fab-croix, .wa-line, #wa-order,
  .cart.cart, .mobile-nav.mobile-nav, .filters.filters,
  .drawer-backdrop.drawer-backdrop { transition: none; }
  .card:hover .card-media img, .tuile:hover img { transform: none; }
}