/* =========================================================
   Crépus & Belle's — Animations « Atelier Botanique »
   Chargé après theme.css sur les pages boutique (pas l'admin).
   Uniquement visuel : aucune fonction du site n'en dépend.
   Respecte le réglage « réduire les animations » du téléphone.
   ========================================================= */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.8,.24,1);
}

@media (prefers-reduced-motion: no-preference){

/* ---------- Apparition de la page ---------- */
.topbar{animation:aDropIn .7s var(--ease-out) both;}
header{animation:aFade .8s .1s ease both; transition:box-shadow .35s ease, background-color .35s ease;}
header.is-scrolled{box-shadow:0 10px 30px rgba(31,42,34,0.08); background:rgba(246,241,231,0.98);}
header .nav-wrap{transition:padding .35s var(--ease-soft);}
header.is-scrolled .nav-wrap{padding-top:8px; padding-bottom:8px;}

/* Barre de progression de lecture (créée par animations.js) */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1000;
  background:linear-gradient(90deg, var(--b-gold), var(--b-gold-lt));
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
}

/* ---------- Hero : texte qui monte ligne par ligne ---------- */
.hero-tag      {animation:aRise .9s .15s var(--ease-out) both;}
h1.hero-title  {animation:aRiseClip 1.1s .25s var(--ease-out) both;}
.hero-sub      {animation:aRise 1s .55s var(--ease-out) both;}
.hero-cta      {animation:aRise 1s .7s var(--ease-out) both;}
.hero-stats    {animation:aRise 1s .85s var(--ease-out) both;}

/* Le mot en italique se souligne d'un trait bronze */
h1.hero-title em{
  background-image:linear-gradient(var(--b-gold-lt), var(--b-gold-lt));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:0% .12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  animation:aUnderline 1.1s 1.25s var(--ease-out) forwards;
}

/* L'arche se dévoile, puis la photo apparaît */
.hero-visual{animation:aArch 1.3s .2s var(--ease-out) both;}
.hero-cutout{
  animation:aPhoto 1.3s .55s var(--ease-out) both;
  translate:0 var(--hero-py, 0px);
}
.floaty{animation:aPop .8s var(--ease-out) both, aBob 6s ease-in-out infinite;}
.floaty-1{animation-delay:1.15s, 2s;}
.floaty-2{animation-delay:1.35s, 2.6s;}

/* Halo végétal qui respire derrière le hero */
.hero{position:relative; isolation:isolate;}
.hero::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:620px; height:620px; right:-160px; top:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,106,59,0.13), rgba(138,106,59,0) 65%);
  animation:aBreathe 14s ease-in-out infinite;
}

/* ---------- Bandeau défilant (accueil) ---------- */
.marquee-track{animation:aMarquee 38s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ---------- Apparitions au défilement ---------- */
/* .reveal (déjà utilisé par le site) : version plus douce */
.reveal{
  opacity:0; transform:translateY(34px); filter:blur(6px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.reveal.visible{opacity:1; transform:none; filter:none;}

/* .a-hide / .a-show : posés par animations.js sur les éléments hors écran */
.a-hide{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:var(--a-delay, 0s);
}
.a-hide.a-blur{filter:blur(6px);}
.a-hide.a-zoom{transform:scale(.94);}
.a-hide.a-title{transform:translateY(.55em); filter:blur(5px); letter-spacing:.02em; transition-property:opacity, transform, filter, letter-spacing; transition-duration:1.1s;}
.a-hide.a-show{opacity:1; transform:none; filter:none;}
.a-hide.a-title.a-show{letter-spacing:normal;}

/* ---------- Cartes produit ---------- */
@keyframes cardIn{
  from{opacity:0; transform:translateY(28px) scale(.97); filter:blur(4px);}
  to{opacity:1; transform:none; filter:none;}
}
.card{animation-duration:.85s; animation-timing-function:var(--ease-out);}
.card-img{transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);}
.card-img img{transition:transform 1.1s var(--ease-out), opacity .5s ease;}
.card-img.loading img{opacity:0; transform:scale(1.04);}
.card-title{transition:color .3s ease;}
.add-btn{transition:background .3s ease, color .3s ease, transform .45s var(--ease-out), border-color .3s ease;}
.badge-promo{animation:aBadge 2.8s ease-in-out infinite;}

@media (hover:hover){
  .card:hover .card-img{transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(31,42,34,0.35);}
  .card:hover .card-img img{transform:scale(1.08);}
  .card:hover .card-title{color:var(--b-sage);}
  .add-btn:hover{transform:rotate(90deg) scale(1.06);}
}

/* ---------- Boutons ---------- */
.btn-primary, .btn-ghost, .checkout-btn, .modal-add, .adm-btn-gold, .cart-btn{
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.btn-primary, .btn-ghost{display:inline-flex; align-items:center; justify-content:center;}
.btn-primary::after, .btn-ghost::after{
  content:'→'; display:inline-block; overflow:hidden; max-width:0; opacity:0;
  transform:translateX(-6px);
  transition:max-width .45s var(--ease-out), opacity .35s ease, transform .45s var(--ease-out), margin .45s var(--ease-out);
}
@media (hover:hover){
  .btn-primary:hover, .btn-ghost:hover{transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(31,42,34,0.55);}
  .btn-primary:hover::after, .btn-ghost:hover::after{max-width:1.4em; opacity:1; transform:none; margin-left:10px;}
  .checkout-btn:hover, .modal-add:hover, .adm-btn-gold:hover{transform:translateY(-2px);}
  .cart-btn:hover{transform:translateY(-1px);}
}
.btn-primary:active, .btn-ghost:active, .checkout-btn:active, .modal-add:active, .adm-btn-gold:active{transform:scale(.97);}

/* Liens du menu : soulignement qui glisse */
nav.links a::after{transition:width .45s var(--ease-out);}

/* Filtres */
.chip{transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-out);}
@media (hover:hover){ .chip:hover{transform:translateY(-2px);} }
.chip.active{animation:aChip .5s var(--ease-out);}

/* ---------- Bannières des pages intérieures ---------- */
.page-banner .eyebrow{animation:aRise .9s .1s var(--ease-out) both;}
.page-banner h1{animation:aRiseClip 1.1s .2s var(--ease-out) both;}
.page-banner p{animation:aRise 1s .5s var(--ease-out) both;}
.page-banner{isolation:isolate;}
.page-banner::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:520px; height:520px; left:-140px; bottom:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,74,51,0.10), rgba(47,74,51,0) 65%);
  animation:aBreathe 16s ease-in-out infinite;
}

/* Promo Flash : photo qui flotte */
.promo-photo-ring{animation:aBob 7s ease-in-out infinite;}
.promo-photo-ring img{transition:transform 1.2s var(--ease-out);}
@media (hover:hover){ .promo-strip:hover .promo-photo-ring img{transform:scale(1.08);} }

/* Engagements / contact : cartes qui se soulèvent */
.engagement-card, .contact-card{transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity 1s var(--ease-out), filter 1s var(--ease-out);}
.engagement-card .value-icon{transition:transform .8s var(--ease-out), background .4s ease;}
@media (hover:hover){
  .engagement-card.visible:hover, .contact-card.visible:hover{transform:translateY(-6px); box-shadow:0 24px 46px -24px rgba(31,42,34,0.35);}
  .engagement-card:hover .value-icon{transform:rotate(-8deg) scale(1.1); background:var(--b-bg2);}
}

/* Témoignages */
.testi-page-item img{transition:transform 1.1s var(--ease-out);}
@media (hover:hover){ .testi-page-item:hover img{transform:scale(1.08);} }

/* ---------- Fenêtre produit ---------- */
.modal-overlay{transition:opacity .4s ease;}
.modal{transition:transform .6s var(--ease-out);}
.modal-overlay.open .modal-img img{animation:aPhoto .9s .05s var(--ease-out) both;}
.modal-overlay.open .modal-body > *{animation:aRise .7s var(--ease-out) both;}
.modal-overlay.open .modal-body > *:nth-child(1){animation-delay:.08s;}
.modal-overlay.open .modal-body > *:nth-child(2){animation-delay:.14s;}
.modal-overlay.open .modal-body > *:nth-child(3){animation-delay:.2s;}
.modal-overlay.open .modal-body > *:nth-child(4){animation-delay:.26s;}
.modal-overlay.open .modal-body > *:nth-child(5){animation-delay:.32s;}
.modal-overlay.open .modal-body > *:nth-child(n+6){animation-delay:.38s;}

/* ---------- Panier ---------- */
.drawer{transition:right .55s var(--ease-out);}
.drawer.open .cart-item{animation:aSlideL .6s var(--ease-out) both;}
.drawer.open .cart-item:nth-child(2){animation-delay:.06s;}
.drawer.open .cart-item:nth-child(3){animation-delay:.12s;}
.drawer.open .cart-item:nth-child(4){animation-delay:.18s;}
.drawer.open .cart-item:nth-child(n+5){animation-delay:.24s;}
.overlay{transition:opacity .45s ease;}

/* ---------- Fiche produit ---------- */
.pdp-crumbs{animation:aFade .8s .05s ease both;}
.pdp{animation:aRise 1s .1s var(--ease-out) both;}
.pdp-main-img{animation:aPhoto 1.1s .3s var(--ease-out) both; transition:opacity .35s ease, transform .9s var(--ease-out);}
.pdp-main-img.is-swapping{opacity:0;}
.pdp-info > *{animation:aRise .9s var(--ease-out) both;}
.pdp-info > *:nth-child(1){animation-delay:.25s;}
.pdp-info > *:nth-child(2){animation-delay:.32s;}
.pdp-info > *:nth-child(3){animation-delay:.39s;}
.pdp-info > *:nth-child(4){animation-delay:.46s;}
.pdp-info > *:nth-child(5){animation-delay:.53s;}
.pdp-info > *:nth-child(n+6){animation-delay:.6s;}
.pdp-thumbs button{transition:transform .4s var(--ease-out), border-color .3s ease;}
.pdp-related a{transition:transform .45s var(--ease-out), border-color .3s ease, color .3s ease;}
@media (hover:hover){
  .pdp-thumbs button:hover{transform:translateY(-3px);}
  .pdp-related a:hover{transform:translateY(-3px);}
}

/* FAQ : réponse qui glisse */
.seo-faq-item[open] p{animation:aRise .5s var(--ease-out) both;}
.seo-links a{transition:color .3s ease, padding-left .4s var(--ease-out);}
@media (hover:hover){ .seo-links a:hover{padding-left:6px;} }

/* ---------- Pied de page ---------- */
.socials a{transition:transform .45s var(--ease-out);}
@media (hover:hover){ .socials a:hover{transform:translateY(-4px) rotate(-6deg);} }

} /* fin prefers-reduced-motion */

/* ---------- Bandeau défilant : mise en forme (toujours) ---------- */
.marquee{
  overflow:hidden; border-top:1px solid var(--b-line); border-bottom:1px solid var(--b-line);
  background:var(--b-bg); padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex; width:max-content;}
.marquee-track span{
  font-family:var(--font-display); font-size:clamp(20px, 2.2vw, 28px); font-style:italic;
  color:var(--b-sage); white-space:nowrap; padding:0 26px; display:flex; align-items:center; gap:52px;
}
.marquee-track span::after{content:'✦'; font-style:normal; font-size:.6em; color:var(--b-gold);}

/* Réglage « réduire les animations » : tout reste visible et immobile */
@media (prefers-reduced-motion: reduce){
  .a-hide{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;}
}

/* ---------- Keyframes ---------- */
@keyframes aFade{from{opacity:0;} to{opacity:1;}}
@keyframes aDropIn{from{opacity:0; transform:translateY(-100%);} to{opacity:1; transform:none;}}
@keyframes aRise{from{opacity:0; transform:translateY(26px); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}
@keyframes aRiseClip{
  from{opacity:0; transform:translateY(.35em); clip-path:inset(0 0 100% 0);}
  to{opacity:1; transform:none; clip-path:inset(0 0 -20% 0);}
}
@keyframes aUnderline{to{background-size:100% .12em;}}
@keyframes aArch{
  from{opacity:0; clip-path:inset(100% 0 0 0 round 260px 260px 24px 24px); transform:translateY(30px);}
  to{opacity:1; clip-path:inset(0 0 0 0 round 260px 260px 24px 24px); transform:none;}
}
@keyframes aPhoto{from{opacity:0; transform:translateY(40px) scale(.96);} to{opacity:1; transform:none;}}
@keyframes aPop{from{opacity:0; transform:translateY(16px) scale(.9);} to{opacity:1; transform:none;}}
@keyframes aBob{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}
@keyframes aBreathe{0%,100%{transform:scale(1) translate(0,0); opacity:.9;} 50%{transform:scale(1.15) translate(-30px,20px); opacity:1;}}
@keyframes aMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes aBadge{0%,100%{transform:scale(1);} 50%{transform:scale(1.07);}}
@keyframes aChip{0%{transform:scale(.94);} 60%{transform:scale(1.04);} 100%{transform:scale(1);}}
@keyframes aSlideL{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:none;}}