/* Coquelicot & Cie : joueur et court, rebond léger, « posé à la main ». */
:root{--ease:cubic-bezier(.34,1.56,.64,1);--doux:cubic-bezier(.25,.8,.3,1);--rv-d:.55s;--rv-st:70ms}
html,body{overflow-x:clip}

/* Tampon rond du héros : 30 s par tour, arrêté hors écran et en mouvement réduit */
.sp-tampon{animation:spTourne 30s linear infinite}
.sp-tampon.ex-off{animation-play-state:paused}
@keyframes spTourne{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.sp-tampon{animation:none!important}}

/* Cartes produits : se soulèvent de 4 px, l'ombre plate grandit (survol souris) */
.sp-carte{transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:3px 3px 0 #3A2016}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.sp-carte:hover{transform:translateY(-4px);box-shadow:5px 7px 0 #3A2016}}
/* Compteur du panier : petit rebond au clic sur « Mettre de côté » */
.sp-panier-n{display:inline-block}
.sp-panier-n.sp-hop{animation:spHop .45s var(--ease)}
@keyframes spHop{40%{transform:scale(1.35)}}

@media (prefers-reduced-motion:no-preference){
  /* Titres : les mots tombent et gardent une petite rotation figée (±2°). Ordinateur pour le H1. */
  .ex-anim .sp-titre .ex-w{transform:rotate(var(--r,0deg))}
  .ex-anim .sp-titre[data-rv] .ex-w{opacity:0;transform:translateY(-.5em) rotate(calc(var(--r,0deg) * 4));
    transition:opacity .25s var(--doux),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
  .ex-anim .sp-titre[data-rv].is-in .ex-w{opacity:1;transform:rotate(var(--r,0deg))}
  .ex-anim .sp-titre[data-rv]{opacity:1}
  @media (min-width:761px){
    .ex-anim .sp-hero-titre .ex-w{animation:spTombe .55s var(--ease) both;animation-delay:calc(150ms + var(--i) * 60ms)}
    @keyframes spTombe{from{opacity:0;transform:translateY(-.5em) rotate(calc(var(--r,0deg) * 4))}to{opacity:1;transform:rotate(var(--r,0deg))}}
  }
  /* Tableau « Ce qui sort du four » : chaque ligne bascule comme un panneau de gare */
  .sp-four{perspective:800px}
  .ex-anim .sp-four-ligne{opacity:1;transform:rotateX(-88deg);transform-origin:50% 0;backface-visibility:hidden;
    transition:transform .55s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
  .ex-anim .sp-four.is-in .sp-four-ligne{transform:none}
  .ex-anim .sp-four[data-rv]{opacity:1}
  /* Étiquettes : léger rebond de 0,8 à 1 */
  .ex-anim .sp-etiq{display:inline-block;transform:scale(.8);opacity:0;transition:transform .45s var(--ease),opacity .2s;transition-delay:calc(300ms + var(--i,0) * 90ms)}
  .ex-anim .is-in .sp-etiq{transform:none;opacity:1}
  /* Gros chiffre du levain : il gonfle comme une pâte */
  .ex-anim [data-rv="gonfle"]{transform:scale(.7)}
  /* Cartes, bulles, illustrations */
  .ex-anim [data-rv="saute"]{transform:translateY(28px)}
  .ex-anim [data-rv="bulle"]{transform:scale(.85);transform-origin:12% 100%}
  .ex-anim [data-rv="pot"]{transform:rotate(-8deg) translateY(16px);transform-origin:50% 100%}
  /* Bande du four : le cadre arrondi s'ouvre depuis le centre */
  .ex-anim [data-rv="four"]{opacity:1;clip-path:inset(10% 8% round 24px)}
  .ex-anim [data-rv="four"].is-in{clip-path:inset(0 round 24px)}
  /* Frise des étapes : le trait se dessine au défilement, les pastilles rebondissent */
  @supports (animation-timeline:view()){
    .ex-anim .sp-frise-trait{stroke-dasharray:1;animation:spTrait linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
    @keyframes spTrait{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  }
  .ex-anim .sp-pastille{transform:scale(.6);opacity:0;transition:transform .45s var(--ease),opacity .2s;transition-delay:calc(var(--i,0) * 140ms)}
  .ex-anim .is-in .sp-pastille{transform:none;opacity:1}
  /* Message du formulaire : le ticket tombe sur le comptoir */
  .sp-ticket{animation:spTicket .5s var(--ease) both}
  @keyframes spTicket{from{opacity:0;transform:translateY(-14px) rotate(-2deg)}}
}