/* INSTAFOOD MEDIA LIFE V11.48.248/249 - vie des vignettes + stickers mascottes.
   Statique universel ci-dessous ; le mouvement vit sous no-preference uniquement. */
.if-sticker{display:flex;justify-content:center;margin:20px 0 6px}
.if-sticker img{width:clamp(112px,26vw,168px);height:auto;transform:rotate(-6deg)}
@media (prefers-reduced-motion: no-preference){
  .ifj-card,.ifx-card,.if-video-card{overflow:clip}
  .ifj-card img,.ifx-card img,.if-video-card img,
  .ifj-card video,.ifx-card video,.if-video-card video{
    animation:ifml-kb 16s ease-in-out infinite alternate;
    will-change:transform}
  @keyframes ifml-kb{
    from{transform:scale(1)}
    to{transform:scale(1.045) translateY(-4px)}}
  .if-sticker img{animation:ifml-float 6s ease-in-out infinite alternate}
  @keyframes ifml-float{
    from{transform:rotate(-6deg) translateY(0)}
    to{transform:rotate(-3deg) translateY(-6px)}}
  /* garde anti-rail : jamais de derive dans le marquee d'avis */
  #ifAvisxRail .ifx-card img,#ifAvisxRail .ifx-card video{animation:none}
}

/* V11.48.249 - ciel de stickers : slots sticky proportionnels a la page,
   glissement differentiel par animation-range sur le scroll racine.
   Sans scroll-timeline ou en reduced-motion : rien n'apparait. */
body{position:relative}
.if-float-sky{position:absolute;inset:0;pointer-events:none;z-index:34}
.if-float-slot{position:absolute;left:0;right:0}
.if-float-slot.sl1{top:4%;height:26%}
.if-float-slot.sl2{top:21%;height:27%}
.if-float-slot.sl3{top:39%;height:27%}
.if-float-slot.sl4{top:57%;height:27%}
.if-float-slot.sl5{top:74%;height:24%}
.if-float{position:sticky;top:20vh;display:none;height:auto;opacity:.95;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.sl1 .if-float{top:19vh;margin-left:-2%;width:clamp(66px,16vw,124px);--gy:-13vh;--gr:-4deg;rotate:-8deg}
.sl2 .if-float{top:30vh;margin-left:auto;margin-right:-3%;width:clamp(54px,12vw,96px);--gy:-19vh;--gr:5deg;rotate:9deg}
.sl3 .if-float{top:56vh;margin-left:4%;width:clamp(48px,11vw,88px);--gy:-11vh;--gr:-3deg;rotate:-5deg}
.sl4 .if-float{top:24vh;margin-left:auto;margin-right:5%;width:clamp(58px,14vw,108px);--gy:-16vh;--gr:4deg;rotate:6deg}
.sl5 .if-float{top:47vh;margin-left:-1%;width:clamp(50px,12vw,92px);--gy:-12vh;--gr:-5deg;rotate:-7deg}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .if-float{display:block;animation:iffl-glide linear both;animation-timeline:scroll(root)}
    .sl1 .if-float{animation-range:0% 34%}
    .sl2 .if-float{animation-range:17% 52%}
    .sl3 .if-float{animation-range:35% 70%}
    .sl4 .if-float{animation-range:53% 88%}
    .sl5 .if-float{animation-range:70% 100%}
    @keyframes iffl-glide{
      from{transform:translateY(9vh) rotate(0deg)}
      to{transform:translateY(var(--gy,-14vh)) rotate(var(--gr,4deg))}}
  }
}

/* V11.48.250 - profondeur editoriale : reveal de sections + titres reveles au scroll */
.ifm-reveal{opacity:0;transform:translateY(22px)}
@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){
.ifm-reveal{animation:ifm-in linear both;animation-timeline:view();animation-range:entry 8% entry 55%}
@keyframes ifm-in{to{opacity:1;transform:none}}}}
@supports not (animation-timeline: scroll()){.ifm-reveal{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ifm-reveal{opacity:1;transform:none}}
.if-rythme-h2.ifm-tr{background:linear-gradient(90deg,#F3E9C8 50%,rgba(243,233,200,.22) 50%) 100%/200% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){
.if-rythme-h2.ifm-tr{animation:ifm-trk linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
@keyframes ifm-trk{to{background-position:0% 0}}}}
@supports not (animation-timeline: scroll()){.if-rythme-h2.ifm-tr{color:#F3E9C8;background:none}}
@media (prefers-reduced-motion: reduce){.if-rythme-h2.ifm-tr{color:#F3E9C8;background:none}}