/* ============================================================================
   ATELIER — SYSTÈME D'ANIMATIONS (consolidé)
   Réutilisable sur tout le site, fidèle au vintage éditorial « L'Atelier ».
   transform/opacity uniquement (GPU) · namespacé · prefers-reduced-motion safe.
   4 couches : 1) reveal au scroll  2) micro-interactions (.fx-*)
               3) commerce (produit/panier)  4) motion de marque (roues, filets)
   JS associé : assets/js/atelier-animations.js
   ============================================================================ */

:root{
  /* --- reveal au scroll --- */
  --atl-rv-dur:600ms;
  --atl-rv-dur-sm:480ms;
  --atl-rv-ease:cubic-bezier(.22,.61,.36,1);
  --atl-rv-shift:20px;
  --atl-rv-shift-x:32px;
  --atl-rv-scale:.965;
  --atl-rv-stagger:90ms;
  /* --- micro-interactions --- */
  --fx-ease:cubic-bezier(.22,.61,.36,1);
  --fx-fast:140ms;
  --fx-base:200ms;
  --fx-shadow-btn:0 6px 16px -8px rgba(168,84,46,.55),0 2px 5px -3px rgba(51,41,31,.35);
  --fx-shadow-card:0 22px 40px -24px rgba(51,41,31,.55);
  --fx-ring:0 0 0 2px var(--paper),0 0 0 4px var(--terracotta);
  /* --- commerce + motion de marque (easings partagés) --- */
  --vbs-ease:cubic-bezier(.22,.61,.36,1);
  --vbs-ease-press:cubic-bezier(.34,1.4,.5,1);
  --vbs-dur:.22s;
  --vbs-wheel-spin:26s;
  --vbs-draw:1.1s;
}

/* ============================================================================
   1) REVEAL AU SCROLL  ·  .atl-reveal (+ variantes), .atl-stagger
   ============================================================================ */
.atl-reveal{
  opacity:0;
  transform:translate3d(0,var(--atl-rv-shift),0);
  transition:opacity var(--atl-rv-dur) var(--atl-rv-ease),
             transform var(--atl-rv-dur) var(--atl-rv-ease);
  will-change:opacity,transform;
}
.atl-reveal--left  { transform:translate3d(calc(-1 * var(--atl-rv-shift-x)),0,0); }
.atl-reveal--right { transform:translate3d(var(--atl-rv-shift-x),0,0); }
.atl-reveal--scale { transform:scale(var(--atl-rv-scale)); }
.atl-reveal--fade  { transform:none; }
.atl-reveal--sm    { transition-duration:var(--atl-rv-dur-sm); }
.atl-reveal.is-visible{ opacity:1; transform:translate3d(0,0,0) scale(1); will-change:auto; }
.atl-stagger > .atl-reveal{ transition-delay:calc(var(--atl-i,0) * var(--atl-rv-stagger)); }

/* ============================================================================
   2) MICRO-INTERACTIONS  ·  .fx-* (+ ciblage du markup existant)
   ============================================================================ */
.fx-btn,.btn-primary,.btn-ghost,.btn-secondary,.btn-outline-secondary,
.product-add-to-cart .add-to-cart,button.add-to-cart{
  transition:background var(--fx-fast) var(--fx-ease),color var(--fx-fast) var(--fx-ease),
             border-color var(--fx-fast) var(--fx-ease),transform var(--fx-base) var(--fx-ease),
             box-shadow var(--fx-base) var(--fx-ease);
  will-change:transform;
}
.fx-btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-outline-secondary:hover,
.product-add-to-cart .add-to-cart:hover,button.add-to-cart:hover{
  transform:translateY(-2px); box-shadow:var(--fx-shadow-btn);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(43,87,79,.5); }
.fx-btn:active,.btn-primary:active,.btn-ghost:active,.btn-secondary:active,
.btn-outline-secondary:active,.product-add-to-cart .add-to-cart:active,button.add-to-cart:active{
  transform:translateY(0); box-shadow:inset 0 2px 5px -2px rgba(51,41,31,.4);
}
.fx-btn:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-secondary:focus-visible,
.btn-outline-secondary:focus-visible,.product-add-to-cart .add-to-cart:focus-visible,button.add-to-cart:focus-visible{
  outline:none; box-shadow:var(--fx-ring);
}
/* nav : soulignement qui se dessine du centre */
.fx-underline,.nav .item > a{ position:relative; }
.fx-underline::after,.nav .item > a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:12px; height:2px;
  background:var(--paper); transform:scaleX(0); transform-origin:center;
  transition:transform var(--fx-base) var(--fx-ease);
}
.nav .item > a:hover::after,.nav .item.active > a::after,.nav .item > a:focus-visible::after{ transform:scaleX(1); }
.nav .item > a:focus-visible{ outline:2px solid var(--paper); outline-offset:-4px; }
/* méga-menu déroulant : apparition fondu + glissé (display ne s'animant pas, on
   garde le grid en permanence et on masque via opacity/visibility/transform) +
   cascade des colonnes .fam */
.nav .panel{
  display:grid !important;
  opacity:0; visibility:hidden; transform:translateY(-9px); pointer-events:none;
  transition:opacity .2s var(--fx-ease),transform .26s var(--fx-ease),visibility 0s linear .26s;
}
.nav .item:hover .panel,.nav .item:focus-within .panel{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .2s var(--fx-ease),transform .26s var(--fx-ease),visibility 0s;
}
.nav .item:hover .panel .fam,.nav .item:focus-within .panel .fam{ animation:vbsRise .42s var(--fx-ease) both; }
.nav .panel .fam:nth-child(2){ animation-delay:.06s; }
.nav .panel .fam:nth-child(3){ animation-delay:.12s; }
.nav .panel .fam:nth-child(4){ animation-delay:.18s; }
/* liens de panneau / fil d'ariane : underline gauche→droite */
.fx-link,.nav .panel .fam a,.crumb a,.breadcrumb a{ position:relative; background-image:none; }
.fx-link::after,.nav .panel .fam a::after,.crumb a::after,.breadcrumb a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--fx-fast) var(--fx-ease);
}
.fx-link:hover::after,.fx-link:focus-visible::after,.nav .panel .fam a:hover::after,
.nav .panel .fam a:focus-visible::after,.crumb a:hover::after,.breadcrumb a:hover::after{ transform:scaleX(1); }
/* cartes : lift + filet terracotta révélé */
.fx-card,.pcard,.product-miniature,.js-product-miniature,.filters{
  position:relative;
  transition:transform var(--fx-base) var(--fx-ease),box-shadow var(--fx-base) var(--fx-ease),
             border-color var(--fx-base) var(--fx-ease);
}
.fx-card::after,.pcard::after,.product-miniature::after,.filters::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left;
  transition:transform var(--fx-base) var(--fx-ease); pointer-events:none; z-index:2;
}
.fx-card:hover::after,.pcard:hover::after,.product-miniature:hover::after,.filters:hover::after,
.product-miniature:focus-within::after{ transform:scaleX(1); }
.pcard:hover,.product-miniature:hover,.filters:hover{ border-color:var(--brass); }
.product-miniature:focus-within{ box-shadow:var(--fx-shadow-card),var(--fx-ring); }
/* champs : focus ring vintage */
.fx-field input,.fx-field textarea,.fx-field select,.nav .search input,
#search_widget input[type=text],#footer .foot-news input[type=email],
.filters input[type=text],input[type=text].fx-input,input[type=email].fx-input,textarea.fx-input{
  transition:border-color var(--fx-fast) var(--fx-ease),box-shadow var(--fx-fast) var(--fx-ease),
             background-color var(--fx-fast) var(--fx-ease);
}
.fx-field input:focus,.fx-field textarea:focus,.fx-field select:focus,.nav .search input:focus,
#search_widget input[type=text]:focus,#footer .foot-news input[type=email]:focus,
.filters input[type=text]:focus,.fx-input:focus{
  outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(194,105,62,.18);
}
.filters input[type=checkbox]{ transition:transform var(--fx-fast) var(--fx-ease); }
.filters label:hover input[type=checkbox]{ transform:scale(1.12); }
.filters input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(194,105,62,.25); }
/* liens « Discover → » : flèche injectée qui glisse */
.fx-arrow,.ucard .more,.more{
  display:inline-flex; align-items:center; gap:6px;
  transition:color var(--fx-fast) var(--fx-ease),gap var(--fx-base) var(--fx-ease);
}
.fx-arrow::after,.ucard .more::after,.more::after{
  content:"\2192"; display:inline-block; transition:transform var(--fx-base) var(--fx-ease);
}
.fx-arrow:hover,.ucard .more:hover,.more:hover{ color:var(--terracotta-deep); }
.fx-arrow:hover::after,.fx-arrow:focus-visible::after,.ucard .more:hover::after,.more:hover::after{ transform:translateX(4px); }
.fx-arrow:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:1px; }

/* ============================================================================
   3) COMMERCE  ·  carte produit, bouton panier, arrivages, compteur panier
   ============================================================================ */
.pcard .pic{ overflow:hidden; position:relative; }
.pcard .pic .pimg,.pcard .pic picture > img.pimg{
  transition:transform .55s var(--vbs-ease),opacity .3s ease;
  transform:translateZ(0); backface-visibility:hidden;
}
.pcard:hover .pic .pimg{ transform:scale(1.045); will-change:transform; }
.pcard .pic::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 100%,rgba(194,105,62,.10),rgba(194,105,62,0) 60%);
  opacity:0; transition:opacity var(--vbs-dur) ease;
}
.pcard:hover .pic::after{ opacity:1; }
.pcard .flag{ transition:transform var(--vbs-dur) var(--vbs-ease),box-shadow var(--vbs-dur) ease; }
.pcard:hover .flag{ transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(33,68,61,.55); }
.pcard .foot .price{ transition:color var(--vbs-dur) ease,transform var(--vbs-dur) var(--vbs-ease); }
.pcard:hover .foot .price{ color:var(--terracotta); transform:translateY(-1px); }
.pcard .foot .dispo{ transition:opacity var(--vbs-dur) ease,transform var(--vbs-dur) var(--vbs-ease); }
.pcard .foot .dispo::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px;
  border-radius:50%; background:var(--petrol); vertical-align:middle;
  transform:scale(.7); transition:transform var(--vbs-dur) var(--vbs-ease-press);
}
.pcard:hover .foot .dispo::before{ transform:scale(1); }
/* bouton ajouter au panier : flash + succès */
button.add-to-cart,.product-add-to-cart .add-to-cart{ position:relative; overflow:hidden; }
button.add-to-cart:active{ transform:translateY(1px) scale(.99); }
button.add-to-cart::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(251,248,239,.5),rgba(251,248,239,0) 60%);
  opacity:0; transform:scale(.3); pointer-events:none;
}
button.add-to-cart.vbs-flash::before{ animation:vbsFlash .5s ease-out; }
@keyframes vbsFlash{ 0%{ opacity:0; transform:scale(.3); } 25%{ opacity:1; } 100%{ opacity:0; transform:scale(1.6); } }
button.add-to-cart.vbs-added{ background:var(--petrol) !important; pointer-events:none; }
button.add-to-cart.vbs-added > *{ visibility:hidden; }
button.add-to-cart.vbs-added::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:9px; margin:-7px 0 0 -9px;
  border-left:2.5px solid var(--paper); border-bottom:2.5px solid var(--paper);
  transform:rotate(-45deg) scale(0); transform-origin:center;
  animation:vbsCheck .45s var(--vbs-ease-press) forwards;
}
@keyframes vbsCheck{ 0%{ transform:rotate(-45deg) scale(0); opacity:0; } 60%{ opacity:1; } 100%{ transform:rotate(-45deg) scale(1); opacity:1; } }
/* nouveaux arrivages : lift au survol (cascade vbsOccDrop déjà dans atelier-home.css) */
.occ-feed .occ-item{ transition:transform var(--vbs-dur) var(--vbs-ease),box-shadow var(--vbs-dur) ease,background var(--vbs-dur) ease; }
.occ-feed .occ-item:hover{ transform:translateX(3px); box-shadow:inset 3px 0 0 var(--terracotta),0 10px 24px -18px rgba(51,41,31,.6); }
.occ-feed .occ-item:hover .occ-price{ color:var(--terracotta); }
.occ-feed .occ-item .occ-thumb img{ transition:transform .5s var(--vbs-ease); }
.occ-feed .occ-item:hover .occ-thumb img{ transform:scale(1.06); }
/* compteur panier : pulse */
.cart-products-count{ display:inline-block; transform-origin:center; }
.cart-products-count.vbs-bump{ animation:vbsBump .5s var(--vbs-ease-press); }
@keyframes vbsBump{ 0%{ transform:scale(1); } 30%{ transform:scale(1.35); color:var(--terracotta-deep); } 100%{ transform:scale(1); } }
#_desktop_cart .blockcart.vbs-bump .material-icons.shopping-cart{ animation:vbsCartGlow .6s ease-out; }
@keyframes vbsCartGlow{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* ============================================================================
   4) MOTION DE MARQUE  ·  roues SVG, hero, filets de titre, divateurs
   ============================================================================ */
@keyframes vbsWheelSpin{ to{ transform:rotate(360deg); } }
/* IMPORTANT : on ne tourne QUE les rayons (le <g stroke> enfant direct, sans
   translate), pas le groupe roue (qui porte translate(x,236) de positionnement —
   un rotate CSS l'écraserait et déplacerait la roue). Rayons centrés sur (0,0)
   local → rotation propre SUR PLACE, jante + moyeu fixes. */
.vbs-emblem g[transform^="translate(165"] > g[stroke],
.vbs-emblem g[transform^="translate(335"] > g[stroke],
.illustration g[transform^="translate(165"] > g[stroke],
.illustration g[transform^="translate(335"] > g[stroke]{
  transform-box:fill-box; transform-origin:center;
  animation:vbsWheelSpin var(--vbs-wheel-spin) linear infinite; will-change:transform;
}
.vbs-emblem g[transform^="translate(335"] > g[stroke],
.illustration g[transform^="translate(335"] > g[stroke]{
  animation-duration:calc(var(--vbs-wheel-spin) * 1.18);
}
.ucard:hover .vbs-emblem g[transform^="translate("] > g[stroke],
.rachat .vignette:hover .vbs-emblem g[transform^="translate("] > g[stroke]{
  animation-duration:6s;
}
@keyframes vbsBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.012); } }
.ucard .pic .vbs-emblem,.rachat .vignette .vbs-emblem{ animation:vbsBreath 9s ease-in-out infinite; transform-origin:center; }
/* hero : flottement + draw-in */
@keyframes vbsFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(.25deg); } }
.hero .hero-art .illustration{ animation:vbsFloat 11s ease-in-out infinite; transform-origin:center bottom; will-change:transform; }
@keyframes vbsRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero h1{ animation:vbsRise var(--vbs-draw) var(--vbs-ease) both; }
.hero .eyebrow{ animation:vbsRise .9s var(--vbs-ease) .05s both; }
.hero h1 + p{ animation:vbsRise 1s var(--vbs-ease) .18s both; }
.hero h1 em{ position:relative; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:2px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left center;
  animation:vbsDrawLine var(--vbs-draw) var(--vbs-ease) .55s both;
}
@keyframes vbsDrawLine{ to{ transform:scaleX(1); } }
/* filets de titre réutilisables — déclenchés par .is-in (IntersectionObserver) */
.atl-eyebrow-rule::after{
  content:""; display:block; width:34px; height:2px; margin-top:8px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left center;
}
.atl-title-rule::after{
  content:""; display:block; width:54px; height:3px; margin-top:14px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left center;
  box-shadow:64px 0 0 -1px var(--terracotta),78px 0 0 -1px var(--terracotta);
}
.atl-eyebrow-rule.is-in::after,.atl-title-rule.is-in::after{ animation:vbsDrawLine var(--vbs-draw) var(--vbs-ease) both; }
/* cascade des cartes univers */
.universes.is-in .ucard{ animation:vbsRise .7s var(--vbs-ease) both; }
.universes.is-in .ucard:nth-child(2){ animation-delay:.12s; }
.universes.is-in .ucard:nth-child(3){ animation-delay:.24s; }
/* divateur pointillé réutilisable (shimmer subtil) */
.vbs-dotline{
  height:1px; border:0;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.6px);
  background-size:9px 1px; background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}
@keyframes vbsDotShimmer{ to{ background-position:9px 0; } }
.vbs-dotline.is-in{ animation:vbsDotShimmer 4.5s linear infinite; }

/* ============================================================================
   ACCESSIBILITÉ — prefers-reduced-motion : tout statique / instantané
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .atl-reveal{ opacity:1 !important; transform:none !important; transition:none !important; will-change:auto; }
  .fx-btn,.btn-primary,.btn-ghost,.btn-secondary,.btn-outline-secondary,
  .product-add-to-cart .add-to-cart,button.add-to-cart,
  .fx-card,.pcard,.product-miniature,.js-product-miniature,.filters{
    transition:background-color var(--fx-fast) linear,color var(--fx-fast) linear,
               border-color var(--fx-fast) linear,box-shadow var(--fx-fast) linear !important;
    transform:none !important;
  }
  .fx-btn:hover,.btn-primary:hover,.btn-ghost:hover,.btn-secondary:hover,.btn-outline-secondary:hover,
  .product-add-to-cart .add-to-cart:hover,button.add-to-cart:hover,
  .fx-card:hover,.pcard:hover,.product-miniature:hover,.filters:hover{ transform:none !important; }
  .fx-underline::after,.nav .item > a::after,.fx-link::after,.nav .panel .fam a::after,.crumb a::after,
  .breadcrumb a::after,.fx-card::after,.pcard::after,.product-miniature::after,.filters::after,
  .fx-arrow::after,.ucard .more::after,.more::after{ transition:none !important; }
  .fx-arrow:hover::after,.ucard .more:hover::after,.more:hover::after{ transform:none !important; }
  .pcard:hover .pic .pimg,.pcard:hover .flag,.pcard:hover .foot .price,.pcard:hover .foot .dispo::before,
  .occ-feed .occ-item,.occ-feed .occ-item:hover,.occ-feed .occ-item:hover .occ-thumb img{
    transition:none !important; transform:none !important;
  }
  button.add-to-cart::before,button.add-to-cart.vbs-flash::before,.cart-products-count.vbs-bump,
  #_desktop_cart .blockcart.vbs-bump .material-icons.shopping-cart,
  .vbs-emblem g[transform^="translate(165"] > g[stroke],.vbs-emblem g[transform^="translate(335"] > g[stroke],
  .illustration g[transform^="translate(165"] > g[stroke],.illustration g[transform^="translate(335"] > g[stroke],
  .ucard .pic .vbs-emblem,.rachat .vignette .vbs-emblem,.hero .hero-art .illustration,
  .vbs-dotline.is-in{ animation:none !important; }
  button.add-to-cart.vbs-added::after{ animation:none !important; transform:rotate(-45deg) scale(1); opacity:1; }
  .hero h1,.hero .eyebrow,.hero h1 + p,.universes.is-in .ucard{ animation:none !important; opacity:1; transform:none; }
  .hero h1 em::after,.atl-eyebrow-rule.is-in::after,.atl-title-rule.is-in::after{ animation:none !important; transform:scaleX(1); }
  .nav .panel{ transition:none !important; transform:none !important; }
  .nav .panel .fam{ animation:none !important; }
}