/* INSTAFOOD MOTION V11.48.101 · Corrections du 48.90 + marquee produits + sections immersives
   Delta vs 48.90 : masques de mots avec respiration d'ombre (les text-shadow Bagel ne sont plus rognés),
   roll-over à line-height hérité, et deux composants NST à contenu statique indexable. */

/* ── Composants statiques : visibles avec ou sans motion ── */
.ifm-marquee{overflow:hidden;background:#0a0806;border-top:1px solid rgba(245,166,35,.28);border-bottom:1px solid rgba(245,166,35,.28);padding:14px 0}
.ifm-marquee__track{display:flex;width:max-content}
.ifm-marquee__grp{display:flex;align-items:center}
.ifm-mq{display:inline-flex;align-items:center;gap:14px;padding:6px 30px;white-space:nowrap;text-decoration:none;color:var(--creme,#f4ede4)}
.ifm-mq img{width:64px;height:64px;border-radius:16px;object-fit:cover;border:1px solid rgba(245,166,35,.4);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ifm-mq b{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-weight:400;font-size:1.25rem;text-transform:uppercase;letter-spacing:.01em}
.ifm-mq i{font-style:normal;font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);color:var(--cheddar,#ffb100);font-size:1.05rem}
.ifm-mq--cta b{color:var(--cheddar,#ffb100)}
.ifm-mq__sep{color:rgba(245,166,35,.55);font-size:1.1rem;flex-shrink:0}
a.ifm-mq:hover b{color:var(--cheddar,#ffb100)}
a.ifm-mq:focus-visible{outline:2px solid var(--cheddar,#ffb100);outline-offset:3px;border-radius:10px}

.ifm-immersive{position:relative;max-width:1180px;margin:clamp(40px,6vw,72px) auto;padding:0 clamp(16px,4vw,40px)}
.ifm-immersive__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(245,166,35,.26);border-radius:26px;padding:clamp(18px,3vw,36px);box-shadow:0 22px 70px rgba(0,0,0,.32)}
.ifm-immersive__media{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(245,166,35,.3);aspect-ratio:4/3;background:#0d0a07}
.ifm-immersive__media img{width:100%;height:100%;object-fit:cover;display:block}
.ifm-immersive__media--video{aspect-ratio:9/16;max-width:320px;margin:0 auto}
.ifm-immersive__media video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.ifm-immersive__body h2{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:.95;text-transform:uppercase;color:#fff6e6;text-shadow:3px 3px 0 rgba(0,0,0,.4);margin:0 0 14px}
.ifm-immersive__body p{color:var(--creme-2,#d8cdb8);line-height:1.65;margin:0 0 22px;max-width:52ch}
.ifm-immersive__body p strong{color:var(--cheddar,#ffb100)}
@media (max-width:760px){
.ifm-immersive__inner{grid-template-columns:1fr}
.ifm-immersive__media{aspect-ratio:16/10}
.ifm-immersive__media--video{aspect-ratio:9/16;max-width:280px}
.ifm-mq{padding:6px 20px;gap:10px}
.ifm-mq img{width:52px;height:52px}
.ifm-mq b{font-size:1.05rem}
}

/* ── Couche animée : uniquement si le visiteur accepte le mouvement ── */
@media (prefers-reduced-motion: no-preference){

.ifm-marquee__track{animation:ifmDefile 44s linear infinite}
.ifm-marquee:hover .ifm-marquee__track{animation-play-state:paused}
@keyframes ifmDefile{to{transform:translateX(-50%)}}

.ifm-immersive__media img{transform-origin:center;animation:ifmKb 16s ease-in-out infinite alternate}
@keyframes ifmKb{from{transform:scale(1)}to{transform:scale(1.08)}}

.ifm-has-roll{overflow:hidden}
.ifm-roll{position:relative;display:inline-block;overflow:hidden;line-height:inherit;vertical-align:middle}
.ifm-roll>span{display:block;transition:transform .45s var(--easing,cubic-bezier(.16,1,.3,1))}
.ifm-roll>span+span{position:absolute;inset:0;transform:translateY(112%)}
.ifm-has-roll:hover .ifm-roll>span:first-child,
.ifm-has-roll:focus-visible .ifm-roll>span:first-child{transform:translateY(-112%)}
.ifm-has-roll:hover .ifm-roll>span+span,
.ifm-has-roll:focus-visible .ifm-roll>span+span{transform:translateY(0)}

.ifm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .16em .22em 0;margin:0 -.16em -.22em 0}
.ifm-wi{display:inline-block;transform:translateY(125%);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.ifm-split-in .ifm-wi{transform:translateY(0)}

[data-ifm="1"]{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s var(--easing,cubic-bezier(.16,1,.3,1));transition-delay:var(--ifm-d,0s)}
.ifm-in{opacity:1;transform:none}

}
@media (prefers-reduced-motion: reduce){
.ifm-wi,.ifm-roll>span{transform:none!important;transition:none!important}
[data-ifm="1"]{opacity:1!important;transform:none!important;transition:none!important}
.ifm-marquee__track,.ifm-immersive__media img{animation:none!important}
}

/* ── 48.93 : entrée de page cinématique (texte héros, jamais l'image LCP) ── */
@media (prefers-reduced-motion: no-preference){
.ifm-rise{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s var(--easing,cubic-bezier(.16,1,.3,1))}
.ifm-rise-in{opacity:1;transform:none}
/* ── Chaîne de fabrication : les 5 étapes s'activent en séquence ── */
.if-step{transition:transform .45s var(--easing,cubic-bezier(.16,1,.3,1)),box-shadow .45s ease}
.if-step .if-step__n{transition:background .35s ease,color .35s ease,transform .35s var(--easing,cubic-bezier(.16,1,.3,1))}
.if-step.ifm-step-on{transform:translateY(-7px) scale(1.02)}
.if-step.ifm-step-on .if-step__n{background:var(--cheddar,#ffb100);color:#141310;transform:scale(1.12)}
}
/* ── Failsafe : après 4 s, tout contenu piloté devient visible quoi qu'il arrive ── */
.ifm-failsafe [data-ifm="1"]{opacity:1!important;transform:none!important}
.ifm-failsafe .ifm-wi{transform:none!important}

/* ── 48.94 : STORYTELLING STICKY scroll-driven (5 etapes, typographie Instafood) ── */
html.ifm-stk-on .if-steps__list{display:none}
.ifm-stk-wrap{height:380vh;position:relative}
.ifm-stk-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:.85fr 1.05fr .9fr;align-items:center;gap:3.5vw;padding:0 5vw;overflow:hidden;transition:background 1s ease;background:radial-gradient(90% 70% at 15% 20%,rgba(255,177,0,.10),transparent 60%),#0a0806}
.ifm-stk-stage[data-ifmstep="1"]{background:radial-gradient(90% 70% at 80% 15%,rgba(255,177,0,.12),transparent 60%),#0a0806}
.ifm-stk-stage[data-ifmstep="2"]{background:radial-gradient(100% 80% at 50% 90%,rgba(150,62,12,.20),transparent 62%),radial-gradient(70% 60% at 20% 10%,rgba(255,177,0,.08),transparent 55%),#0b0705}
.ifm-stk-stage[data-ifmstep="3"]{background:radial-gradient(90% 70% at 12% 85%,rgba(255,177,0,.13),transparent 60%),#0a0806}
.ifm-stk-stage[data-ifmstep="4"]{background:radial-gradient(110% 85% at 85% 80%,rgba(255,177,0,.17),transparent 62%),#0c0805}
.ifm-stk-num{position:relative;font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:clamp(9rem,22vw,19rem);line-height:1;user-select:none}
.ifm-stk-ghost{color:transparent;-webkit-text-stroke:2px var(--cheddar,#ffb100)}
.ifm-stk-fill{position:absolute;inset:0;font-style:normal;color:var(--cheddar,#ffb100);clip-path:inset(100% 0 0 0);text-shadow:0 10px 40px rgba(255,177,0,.25)}
.ifm-stk-right{position:relative;min-height:16rem}
.ifm-stk-step{position:absolute;inset:0;opacity:0;transform:translateY(26px);transition:opacity .45s ease,transform .45s var(--easing,cubic-bezier(.16,1,.3,1));pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.ifm-stk-step.actif{opacity:1;transform:none;pointer-events:auto}
.ifm-stk-step .if-step__t{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:clamp(1.7rem,3.2vw,2.7rem);text-transform:uppercase;color:#fff6e6;text-shadow:3px 3px 0 rgba(0,0,0,.35);margin:0 0 14px}
.ifm-stk-step .if-step__d{color:var(--creme-2,#d8cdb8);line-height:1.7;max-width:36rem;font-size:clamp(1rem,1.35vw,1.15rem);margin:0}
.ifm-stk-bar{position:absolute;left:6vw;right:6vw;bottom:7vh;height:3px;background:rgba(245,166,35,.16);border-radius:2px}
.ifm-stk-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cheddar,#ffb100),#ffd873);border-radius:2px}
@media (max-width:820px){
.ifm-stk-wrap{height:330vh}
.ifm-stk-stage{grid-template-columns:1fr;align-content:center;gap:1rem;padding:0 7vw}
.ifm-stk-visual{order:-1;aspect-ratio:16/9;max-height:24vh;width:100%}
.ifm-stk-num{font-size:clamp(5.5rem,26vw,9rem)}
.ifm-stk-right{min-height:13rem}
}
/* ── Derive parallax des visuels heros au defilement (navigateurs scroll-timeline) ── */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.page-hero figure{overflow:hidden}
.page-hero figure img{animation:ifmDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes ifmDrift{from{transform:translateY(2%) scale(1.05)}to{transform:translateY(-2%) scale(1.05)}}
}
}

/* ── 48.95 : visuel d'etape en crossfade + dezoom (change avec la progression) ── */
.ifm-stk-visual{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid rgba(245,166,35,.32);box-shadow:0 26px 80px rgba(0,0,0,.5)}
.ifm-stk-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.14);transition:opacity .55s ease,transform 1s var(--easing,cubic-bezier(.16,1,.3,1))}
.ifm-stk-visual img.actif{opacity:1;transform:scale(1)}

/* ── Dezoom scroll-driven des visuels immersifs + pop du CTA final (navigateurs scroll-timeline) ── */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.ifm-immersive__media img{animation:ifmZoomOut linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
@keyframes ifmZoomOut{from{transform:scale(1.22)}to{transform:scale(1.02)}}
.section--cta .cta-block{animation:ifmPop linear both;animation-timeline:view();animation-range:entry 0% entry 95%}
@keyframes ifmPop{from{transform:scale(.94);opacity:.35}to{transform:scale(1);opacity:1}}
}
}
/* ── Ambiance doree globale qui s'intensifie avec la profondeur de defilement ── */
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion: no-preference){
html::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 85% at 88% 112%,rgba(255,177,0,.15),transparent 58%);opacity:0;animation:ifmAmbient linear both;animation-timeline:scroll(root)}
@keyframes ifmAmbient{0%{opacity:0}50%{opacity:.45}100%{opacity:.95}}
}
}

/* ── 48.96 : DECK BEST-SELLERS (mobile/tablette portrait) : une carte a la fois au defilement ── */
.ifm-bs-hidden{display:none!important}
@media (prefers-reduced-motion: no-preference){
.ifm-bs-wrap{position:relative}
.ifm-bs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ifm-bs-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:11svh 6vw 12svh;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .5s ease,transform .6s var(--easing,cubic-bezier(.16,1,.3,1));pointer-events:none}
.ifm-bs-pane.actif{opacity:1;transform:none;pointer-events:auto}
.ifm-bs-pane .product-card{width:100%;max-width:560px;max-height:100%;margin:0;display:flex;flex-direction:column;overflow:hidden;opacity:1;transform:none}
.ifm-bs-pane .product-card img{width:100%;max-height:44svh;object-fit:cover}
.ifm-bs-pane .product-card__body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ifm-bs-dots{position:absolute;left:0;right:0;bottom:4svh;display:flex;gap:10px;justify-content:center;z-index:2}
.ifm-bs-dots i{width:8px;height:8px;border-radius:50%;background:rgba(245,166,35,.28);transition:background .3s,transform .3s}
.ifm-bs-dots i.actif{background:var(--cheddar,#ffb100);transform:scale(1.3)}
}

/* ── 48.101 : fond pilote en JS (dynamisme universel, iOS inclus) ── */
html.iff-on body::before{animation:none;transform:scale(calc(1.07 + var(--iffond,0)*.07)) translateY(calc(var(--iffond,0)*-3.2%));will-change:transform}
/* ── 48.100 : ARRIÈRE-PLAN fusionné : image seule animée (z -2) + voile allégé séparé (z -1) + body transparent (la clé) ── */
body{background:transparent}
body::before{content:'';position:fixed;inset:-6vh 0;z-index:-2;pointer-events:none;
  background:url(/assets/hero/craving-desktop-1280.webp) center/cover no-repeat #070503;transform:scale(1.06)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(7,5,3,.78),rgba(7,5,3,.84))}
@media (max-width:820px){
body::before{background:url(/assets/hero/craving-mobile-720.webp) center 28%/cover no-repeat #070503}
body::after{background:linear-gradient(rgba(7,5,3,.82),rgba(7,5,3,.88))}
}
@media (prefers-reduced-motion: no-preference){
body::before{animation:ifFondKb 46s ease-in-out infinite alternate;will-change:transform}
@keyframes ifFondKb{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.13) translateY(-1.6%)}}
}
/* ── 48.98 : pellicule « En cuisine » (home) ── */
.ifv-kitchen{padding:clamp(40px,6vw,72px) 0;position:relative}
.ifv-kitchen>h2{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:clamp(1.7rem,3.6vw,2.8rem);text-transform:uppercase;color:#fff6e6;text-shadow:3px 3px 0 rgba(0,0,0,.4);text-align:center;margin:0 0 6px}
.ifv-kitchen>p{color:var(--creme-2,#d8cdb8);text-align:center;margin:0 auto 26px;max-width:52ch;padding:0 20px}
.ifv-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(16px,5vw,60px) 22px;-webkit-overflow-scrolling:touch}
.ifv-rail::-webkit-scrollbar{height:6px}
.ifv-rail::-webkit-scrollbar-thumb{background:rgba(245,166,35,.4);border-radius:3px}
.ifv-card{flex:0 0 min(78vw,290px);scroll-snap-align:center;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(245,166,35,.26);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ifv-card video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000}
.ifv-card__body{padding:14px 16px 18px}
.ifv-card__body h3{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:1.05rem;text-transform:uppercase;color:#fff6e6;margin:0 0 6px}
.ifv-card__body p{color:var(--creme-2,#d8cdb8);font-size:.92rem;line-height:1.5;margin:0 0 12px}
.ifv-card__body a{color:var(--cheddar,#ffb100);font-weight:700;text-decoration:none}
.ifv-card__body a:hover{text-decoration:underline}