/* Polices auto-hebergees (Google Fonts via fontsource 5.3.0, OFL 1.1) */
@font-face{font-family:'Bagel Fat One';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/bagel-fat-one-latin-ext-v1149410.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bagel Fat One';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/bagel-fat-one-latin-v1149410.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/anton-latin-ext-v1149410.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/anton-latin-v1149410.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/manrope-latin-ext-wght-v1149410.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/manrope-latin-wght-v1149410.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/caveat-latin-ext-wght-v1149410.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/caveat-latin-wght-v1149410.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ui-crashguard-v104310.css */
/* V10.43.10 — UI crashguard: visible selected/active states, keyboard/focus, RTL-safe */
:root{--if-ui-gold:#f5a623;--if-ui-gold-2:#ffd98a;--if-ui-ink:#160d04;--if-ui-border:rgba(245,166,35,.55)}
button,[role="button"],.if-main-cta,.if-secondary-cta,.if-account-btn,.if-tab,.if-add,.if-checkout,.nav__links a,.if-lang__item{transition:background.18s ease,color.18s ease,border-color.18s ease,box-shadow.18s ease,transform.12s ease;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--if-ui-gold-2)!important;outline-offset:3px!important;box-shadow:0 0 0 4px rgba(245,166,35,.20)!important;}
button:active,.if-main-cta:active,.if-secondary-cta:active,.if-account-btn:active,.if-tab:active,.if-add:active,.if-checkout:active{transform:translateY(1px) scale(.985)!important;}
button.is-selected,button.is-active,button[aria-pressed="true"],button[aria-selected="true"],.if-review-chip.is-selected,.if-admin-tabs button.is-active,.if-driver-statusbar button.is-active,.if-service-modes label:has(input:checked),.if-tab.is-active,.if-tab.is-selected,.if-order-option.is-selected,.if-selection-card.is-selected{
background:linear-gradient(135deg,#ffe3a0 0%,#f5a623 48%,#c77809 100%)!important;
color:var(--if-ui-ink)!important;
border-color:rgba(255,217,138,.92)!important;
box-shadow:0 0 0 1px rgba(255,217,138,.45),0 12px 34px rgba(245,166,35,.28)!important;
text-shadow:none!important;
}
button.is-selected *,button.is-active *,button[aria-pressed="true"] *,button[aria-selected="true"] *{color:inherit!important;text-shadow:none!important;}.if-lang__button[aria-expanded="true"],.nav__burger[aria-expanded="true"]{background:linear-gradient(135deg,#ffe3a0,#f5a623)!important;color:#160d04!important;border-color:rgba(255,217,138,.9)!important;}.faq-item.open,.faq-item.is-open{border-color:rgba(245,166,35,.46)!important;box-shadow:0 0 0 1px rgba(245,166,35,.16),0 12px 34px rgba(0,0,0,.20)!important;}.faq-item__body[hidden],.faq-item__answer[hidden],.faq__answer[hidden]{display:none!important;}.nav__links.open{display:flex!important;}.if-lang__menu[hidden]{display:none!important;}.if-lang__menu:not([hidden]){z-index:9999!important;}
html[dir="rtl"].if-admin-table th,html[dir="rtl"].if-admin-table td{text-align:right;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto!important}.marquee__track{animation:marquee 48s linear infinite!important;will-change:transform}.avis-track{animation:avisScroll 80s linear infinite!important}.if-pwa-install.is-visible{animation:ifPwaIn.45s ease both!important}.is-selected,.is-active,[aria-pressed="true"],[aria-selected="true"]{transition:background.18s ease,border-color.18s ease,color.18s ease,box-shadow.18s ease!important}}
/* Product structured review patch V10.43.11 */.if-product-visible-review-v104311{margin:28px 0;padding:22px;border:1px solid rgba(245,166,35,.32);border-radius:24px;background:linear-gradient(135deg,rgba(245,166,35,.10),rgba(255,255,255,.035));}.if-product-visible-review-v104311 h2{color:#f5c76b;margin:0 0 8px;}.if-review-card-v104311{margin-top:14px;padding:16px;border-radius:18px;border:1px solid rgba(245,166,35,.28);background:rgba(0,0,0,.22);}.if-review-card-v104311 strong,.if-menu-rating-v104311{color:#f5c76b;font-weight:950;}.if-review-card-v104311 p,.if-menu-review-v104311{color:rgba(247,239,227,.82);margin:.35rem 0;}.if-review-card-v104311 small{color:rgba(247,239,227,.62);}.if-menu-rating-v104311{margin:.5rem 0.2rem;font-size:.86rem;}.if-menu-review-v104311{font-size:.78rem;min-height:auto!important;}
/* V10.43.14 - selected state hardening */
button.is-selected, button.is-active, [role="button"].is-selected, [aria-pressed="true"], [aria-selected="true"], .option-card.is-selected, .mode-card.is-selected, .delivery-mode.is-selected {
background: linear-gradient(135deg,#ffe8a3,#d49b12) !important;
color:#111 !important;
border-color:#ffd66b !important;
box-shadow:0 0 0 1px rgba(255,214,107,.55),0 14px 34px rgba(212,155,18,.28) !important;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline:3px solid #ffd66b !important;
outline-offset:3px !important;
}
.marquee__track{animation:marquee 24s linear infinite !important;will-change:transform;}
/* perf-v104343.css */
/* Instafood V10.43.43 performance layer: non-invasive, no UX rewrite */
@media (max-width: 780px){
.hero__bg{background-image:image-set(url('/assets/posters/hero-banner-mobile.webp') type('image/webp'),url('/assets/posters/hero-banner.webp') type('image/webp'))!important;background-size:cover!important;background-position:center!important;}
.hero__cheddar-top,.hero__cheddar-splash,.hero__cheddar-drop{animation:none!important;will-change:auto!important;}
.reveal,.reveal--d1,.reveal--d2,.reveal--d3,.reveal--d4,.reveal--d5{animation:none!important;opacity:1!important;transform:none!important;}
section:not(.trust-badges):not(.best-sellers), .stats, .if-human-reviews, .faq-expanded, .if-global-seo-faq, .if-trust-links, footer{content-visibility:auto;contain-intrinsic-size:1px 760px;}
.avis-track{will-change:transform;}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
img{height:auto;}
/* if-global-actions-v114726.css */
/* INSTAFOOD V11.47.13 — CTA WhatsApp global, lisible et sans collision */
:root{--if-global-bottom:18px;--if-store-banner-height:0px}
.nav__logo-text::after,.if-pro-nav .nav__logo-text::after{content:none!important;display:none!important}
#if-consent-pref{left:14px!important;right:auto!important;bottom:calc(var(--if-global-bottom,18px) + env(safe-area-inset-bottom,0px))!important;z-index:2147482900!important}
/* Les barres fixes s’empilent au lieu de se recouvrir. */
.conversion-sticky{bottom:var(--if-store-banner-height,0px)!important}
/* Le bouton flottant ne doit jamais masquer la navigation de commande mobile. */
@media(max-width:720px){
#if-consent-pref{left:10px!important}
}
/* Contact : ne jamais agrandir la miniature 100 px. */
.page-hero figure img[src*="logo-mascottes"]{width:min(440px,100%)!important;height:auto!important;aspect-ratio:1/1!important;object-fit:contain!important;margin-inline:auto!important;border-radius:28px!important}
.if-home-whatsapp-float{position:fixed!important;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2147483000;display:grid;place-items:center;width:64px;height:64px;background:transparent!important;border:0!important;border-radius:50%;box-shadow:none!important;cursor:pointer;animation:ifWaPulse 2.6s ease-in-out infinite}
.if-home-whatsapp-float__icon{width:46px!important;height:46px!important;display:block;color:#d4af37!important;fill:currentColor!important;filter:drop-shadow(0 1px 0 rgba(255,236,170,.85)) drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(212,175,55,.35));transition:transform .25s ease,filter .25s ease}
.if-home-whatsapp-float:hover .if-home-whatsapp-float__icon,.if-home-whatsapp-float:focus-visible .if-home-whatsapp-float__icon{transform:scale(1.12);color:#f2d48a!important;filter:drop-shadow(0 1px 0 rgba(255,240,190,.95)) drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(242,212,138,.6))}
.if-home-whatsapp-float:focus-visible{outline:3px solid #f2d48a;outline-offset:4px;border-radius:50%}
.if-home-whatsapp-float__label{display:none!important}
@keyframes ifWaPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.if-home-whatsapp-float{animation:none}}
/* if-motion-v11553.css */
/* 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-fond-desktop.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-fond-mobile.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}
/* if-bundle-v11592.css */
/* ===== if-rythme-v11520.css ===== */
/* if-rythme-v11520.css · Instafood · Rythme éditorial + reveal H2 par lignes
Autonome. Ne fait rien tant que les marqueurs .if-rythme-sec / .if-rythme-h2 sont absents.
Compositor-only : opacity et transform uniquement. */
/* Voile de tonalité global (injecté par le JS en premier enfant de body) */
.if-rythme-veil{position:fixed;inset:0;pointer-events:none;z-index:-1}
.if-rythme-veil>div{position:absolute;inset:0;opacity:0;transition:opacity var(--ifr-veil-dur,.8s) ease}
.ifr-instant .if-rythme-veil>div{transition:none}
.if-rythme-veil .ifr-noir{background:#0a0806}
.if-rythme-veil .ifr-or{background:radial-gradient(120% 85% at 50% 0%,rgba(244,201,93,.16),rgba(244,201,93,0) 62%),#14100a}
/* Tonalités posées sur par le JS selon la section active */
html[data-ifr-tone="noir"] .if-rythme-veil .ifr-noir{opacity:1}
html[data-ifr-tone="voile-or"] .if-rythme-veil .ifr-or{opacity:1}
html[data-ifr-tone="photo"] .if-rythme-veil .ifr-noir{opacity:.35}
/* Sections marquées : rien d'imposé, le style de la page reste maître */
.if-rythme-sec{position:relative}
/* Reveal H2 par lignes masquées. Sans JS, sans IO, en if-lite ou reduced-motion :
la classe if-rythme-js n'est jamais posée, le H2 reste pleinement visible. */
html.if-rythme-js .ifr-line{display:block;overflow:clip}
html.if-rythme-js .ifr-line-in{display:block;transform:translateY(115%);opacity:.001;
transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .5s linear;
transition-delay:calc(var(--ifr-i,0)*var(--ifr-stagger,90ms))}
html.if-rythme-js .ifr-on .ifr-line-in,
html.ifr-force .ifr-line-in{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){
.if-rythme-veil>div{transition:none}
html.if-rythme-js .ifr-line-in{transform:none;opacity:1;transition:none}
}
/* ===== if-poster-v11520.css ===== */
/* if-poster-v11520.css · Instafood · Gabarit fiche poster des signatures
Autonome. Ne s'applique qu'aux blocs porteurs de .if-poster.
Compositor-only : transform et opacity ; les fonds et liserés sont statiques. */
.if-poster{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;
display:flex;align-items:flex-end;overflow:clip;background:#0a0806;
border-top:2px solid #f4c95d;border-bottom:2px solid #f4c95d}
.ifp-media,.ifp-veil{position:absolute;inset:0}
.ifp-media img{width:100%;height:100%;object-fit:cover;display:block}
.ifp-veil{background:linear-gradient(180deg,rgba(10,8,6,.45) 0%,rgba(10,8,6,.78) 60%,rgba(10,8,6,.92) 100%);pointer-events:none}
.ifp-tilt{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;
padding:clamp(20px,5vw,56px);padding-bottom:clamp(30px,7vh,76px);
transform:perspective(950px);transition:transform .22s ease-out}
.ifp-kicker{font:700 12px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.22em;
text-transform:uppercase;color:#ffb100;margin:0 0 10px}
.ifp-name{font-family:Anton,Impact,sans-serif;font-weight:400;
font-size:clamp(52px,14vw,148px);line-height:.92;text-transform:uppercase;
color:#f5ead9;margin:0 0 14px;letter-spacing:.01em;
text-shadow:0 2px 0 rgba(122,86,20,.9),0 4px 0 rgba(80,56,12,.55),0 18px 40px rgba(244,201,93,.16)}
.ifp-compo{font:500 clamp(15px,2.2vw,19px)/1.5 Manrope,system-ui,sans-serif;
color:rgba(245,234,217,.92);max-width:46ch;margin:0 0 6px}
.ifp-note{font-family:Caveat,cursive;font-size:clamp(21px,3vw,27px);line-height:1.2;
color:#f4c95d;transform:rotate(-1.6deg);transform-origin:left bottom;margin:4px 0 18px;max-width:38ch}
.ifp-row{display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap;margin:0 0 16px}
.ifp-price{font-family:'Bagel Fat One',Anton,sans-serif;color:#f4c95d;display:flex;align-items:baseline;gap:8px;
font-size:clamp(17px,2.2vw,21px)}
.ifp-price b{font-weight:400;font-size:clamp(46px,7vw,66px);line-height:1;
text-shadow:0 3px 0 rgba(122,86,20,.8)}
.ifp-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
min-height:48px;padding:0 clamp(26px,4vw,40px);background:#f4c95d;color:#0a0806;
font:800 16px/1 Manrope,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;
text-decoration:none;border-radius:999px;box-shadow:0 6px 22px rgba(244,201,93,.26);
transition:transform .18s ease}
.ifp-cta::after{content:"";position:absolute;inset:0;border-radius:999px;
box-shadow:0 12px 32px rgba(255,177,0,.38);opacity:0;transition:opacity .18s linear}
.ifp-cta:hover{background:#ffb100;transform:translateY(-2px)}
.ifp-cta:hover::after{opacity:1}
.ifp-meta{font:700 11px/1.7 Manrope,system-ui,sans-serif;letter-spacing:.18em;
text-transform:uppercase;color:rgba(245,234,217,.6);margin:0}
/* Entrée en cascade : inerte sans JS, sans IO, en if-lite et en reduced-motion */
html.if-poster-js .ifp-in{opacity:0;transform:translateY(26px);
transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s linear;
transition-delay:calc(var(--ifp-i,0)*110ms)}
html.if-poster-js .ifp-on .ifp-in,
html.if-poster-force .ifp-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.ifp-in{opacity:1!important;transform:none!important;transition:none!important}
.ifp-tilt{transform:none!important;transition:none!important}
}
@media (max-width:480px){
.if-poster{align-items:flex-end}
.ifp-name{font-size:clamp(46px,15.5vw,72px)}
}
/* ===== if-immersive-v11521.css ===== */
/* if-immersive-v11521.css · Instafood · Design immersif : hero typo, marquees, orbite 3D,
chiffres épinglés, prix relief 3D, avis, finale Commander.
Autonome, classes préfixées ifu- / marqueurs if-*. Compositor-only : transform et opacity.
Sans JS : tout est visible et statique. html.ifu-js est posé par if-immersive-v11521.js. */
@keyframes ifu-rise{to{transform:none}}
@keyframes ifu-marq{to{transform:translateX(-50%)}}
@keyframes ifu-marqB{from{transform:translateX(-50%)}to{transform:none}}
@keyframes ifu-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-22px,0)}}
@keyframes ifu-drift{0%,100%{transform:translate3d(-3%,2%,0) scale(1)}50%{transform:translate3d(4%,-4%,0) scale(1.12)}}
@keyframes ifu-osc{0%,100%{transform:rotateY(-13deg)}50%{transform:rotateY(13deg)}}
@keyframes ifu-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---------- BLOC 1 · HERO TYPOGRAPHIQUE (marqueur if-hero-typo) ---------- */
.if-hero-typo{position:relative;min-height:92svh;display:flex;align-items:center;justify-content:center;overflow:clip;perspective:1100px;background:#0a0806;text-align:center}
.if-hero-typo .ifu-glow{position:absolute;inset:0;background:radial-gradient(62% 42% at 50% 0%,rgba(244,201,93,.14),rgba(244,201,93,0) 70%)}
.if-hero-typo .ifu-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ifu-parts{position:absolute;inset:0;pointer-events:none}
.ifu-p{position:absolute;width:4px;height:4px;border-radius:50%;background:#f4c95d;box-shadow:0 0 8px rgba(244,201,93,.85);animation:ifu-float var(--d,8s) ease-in-out var(--dl,0s) infinite}
.ifu-stack{position:relative;padding:0 16px;transform-style:preserve-3d;transform:translate3d(calc(var(--hx,0px)*.6),calc(var(--hy,0px)*.6 + var(--hs,0)*-40px),0) rotateX(calc(var(--hs,0)*10deg)) scale(calc(1 - var(--hs,0)*.14));opacity:calc(1 - var(--hs,0)*.95)}
.ifu-mask{display:block;overflow:clip}
html.ifu-js .ifu-line{display:block;transform:translateY(112%);animation:ifu-rise .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.2s + var(--i,0)*.13s)}
.ifu-slogan{margin:6px 0 0;font-weight:400;line-height:.9;text-transform:uppercase;font-family:Anton,Impact,sans-serif}
.ifu-slogan-caveat{font-family:Caveat,cursive;font-size:clamp(24px,4vw,38px);color:#f4c95d;rotate:-2deg}
.ifu-slogan-l1{font-size:clamp(54px,14.5vw,168px);color:#f5ead9;text-shadow:0 3px 0 rgba(122,86,20,.9),0 6px 0 rgba(80,56,12,.5),0 24px 60px rgba(244,201,93,.2)}
.ifu-slogan-l2{font-size:clamp(64px,17vw,196px);letter-spacing:.02em}
.ifu-stroke{color:#f4c95d}
@supports ((-webkit-text-stroke:2px #f4c95d)){.ifu-stroke{color:transparent;-webkit-text-stroke:2px #f4c95d}}
.ifu-hero-meta{margin-top:22px;font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(245,234,217,.62)}
.ifu-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.ifu-cue span{font:700 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,201,93,.75)}
.ifu-cue i{display:block;width:2px;height:52px;background:#f4c95d;animation:ifu-cue 2.2s ease-in-out infinite}
/* ---------- BLOC 2 · MARQUEES STATEMENT (marqueur if-marquees-statement) ---------- */
.if-marquees-statement{position:relative;transform:rotate(-1.4deg);margin:clamp(30px,6vh,60px) -3vw 0;width:106vw}
.ifu-band-or{overflow:clip;background:#f4c95d;border-top:2px solid #0a0806;border-bottom:2px solid #0a0806;padding:12px 0}
.ifu-band-noir{overflow:clip;background:#0a0806;border-bottom:2px solid #f4c95d;padding:10px 0}
.ifu-track{display:inline-flex;white-space:nowrap;animation:ifu-marq var(--ifu-mdur,28s) linear infinite}
.ifu-trackB{animation:ifu-marqB var(--ifu-mdur,36s) linear infinite}
.ifu-track>span{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;padding-right:40px}
.ifu-band-or .ifu-track>span{font-size:clamp(20px,4vw,42px);color:#0a0806}
.ifu-band-noir .ifu-track>span{font-size:clamp(18px,3.4vw,36px);letter-spacing:.03em}
/* ---------- BLOC 3 · ORBITE 3D BEST-SELLERS (marqueur if-orbite) ---------- */
.if-orbite{position:relative;padding:clamp(60px,10vh,110px) 0 clamp(30px,5vh,60px);overflow-x:clip;background:#0a0806}
.ifu-orbite-head{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,40px);text-align:center}
.ifu-kicker-caveat{font-family:Caveat,cursive;font-size:clamp(22px,3.4vw,30px);color:#f4c95d;margin:0 0 6px;rotate:-1.5deg}
.ifu-h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(34px,7.5vw,84px);line-height:.95;text-transform:uppercase;color:#f5ead9;margin:0 0 10px;text-shadow:0 2px 0 rgba(122,86,20,.85),0 16px 40px rgba(244,201,93,.15)}
.ifu-sub{font:500 14px/1.6 Manrope,system-ui,sans-serif;color:rgba(245,234,217,.6);margin:0}
.ifu-stage{position:relative;height:clamp(400px,60vh,540px);margin-top:clamp(10px,3vh,30px);perspective:1300px;touch-action:pan-y;cursor:grab;--ifu-r:min(40vw,350px)}
.ifu-stage.ifu-grabbing{cursor:grabbing}
.ifu-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ifu-card{position:absolute;left:calc(clamp(170px,22vw,240px) / -2);top:calc(clamp(238px,30.8vw,336px) / -2);width:clamp(170px,22vw,240px);height:clamp(238px,30.8vw,336px);display:flex;flex-direction:column;background:#100d08;border:1px solid rgba(244,201,93,.5);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 4px #0a0806,inset 0 0 0 5px rgba(244,201,93,.25);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:clip}
.ifu-card-media{height:56%;position:relative;border-bottom:1px solid rgba(244,201,93,.35)}
.ifu-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.ifu-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.ifu-card-cat{font:700 9px/1 Manrope,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ffb100}
.ifu-card-nom{font-family:Anton,Impact,sans-serif;font-size:clamp(16px,2vw,21px);line-height:1;text-transform:uppercase;color:#f5ead9}
.ifu-card-prix{font-family:'Bagel Fat One',Anton,sans-serif;font-size:clamp(18px,2.4vw,24px);color:#f4c95d;text-shadow:0 2px 0 rgba(122,86,20,.7)}
.ifu-stage.ifu-flat{height:auto;perspective:none;cursor:default}
.ifu-stage.ifu-flat .ifu-ring{position:static;transform:none!important;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ifu-stage.ifu-flat .ifu-card{position:static;transform:none!important;margin:0}
html.if-lite .ifu-stage,html.ifu-static .ifu-stage{height:auto;perspective:none;cursor:default}
html.if-lite .ifu-ring,html.ifu-static .ifu-ring{position:static;transform:none!important;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
html.if-lite .ifu-card,html.ifu-static .ifu-card{position:static;transform:none!important;margin:0}
/* ---------- BLOC 4 · CHIFFRES ÉPINGLÉS (marqueur if-chiffres, dépend de if-rythme-v11520) ---------- */
.if-chiffres{position:relative;height:330vh}
html.if-lite .if-chiffres,html.ifu-static .if-chiffres{height:auto}
.ifu-tone{position:absolute;width:100%;pointer-events:none}
.ifu-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
html.if-lite .ifu-pin,html.ifu-static .ifu-pin{position:relative;height:auto;padding:60px 0;display:block}
.ifu-pin-head{position:absolute;top:76px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px}
html.if-lite .ifu-pin-head,html.ifu-static .ifu-pin-head{position:relative;top:auto;margin-bottom:30px}
.ifu-pin-kicker{font:700 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,201,93,.8);margin:0}
.ifu-bar{display:block;width:min(320px,60vw);height:2px;background:rgba(244,201,93,.18);overflow:clip}
.ifu-bar-in{display:block;width:100%;height:100%;background:#f4c95d;transform:scaleX(0);transform-origin:left}
.ifu-phase{grid-area:1/1;text-align:center;padding:0 18px}
html.ifu-js .ifu-phase{opacity:0}
html.if-lite .ifu-phase,html.ifu-static .ifu-phase,html.ifu-force .ifu-phase{opacity:1!important;transform:none!important;position:relative;margin:26px 0}
.ifu-num{font-family:'Bagel Fat One',Anton,sans-serif;font-size:clamp(110px,26vw,280px);line-height:1;color:#f4c95d;text-shadow:0 4px 0 rgba(122,86,20,.9),0 8px 0 rgba(80,56,12,.5),0 30px 70px rgba(244,201,93,.22)}
.ifu-phase-label{font-family:Anton,Impact,sans-serif;font-size:clamp(22px,4.5vw,46px);text-transform:uppercase;color:#f5ead9;margin:8px 0 4px}
.ifu-phase-sub{font:500 14px/1.5 Manrope,system-ui,sans-serif;color:rgba(245,234,217,.6);margin:0}
/* ---------- BLOC 5 · PRIX RELIEF 3D (marqueur if-prix3d, s'insère dans if-poster-v11520) ---------- */
.ifu-extrude{display:inline-block;transform-style:preserve-3d;animation:ifu-osc 7s ease-in-out infinite}
.ifu-prix{display:inline-flex;align-items:baseline;gap:10px;font-family:'Bagel Fat One',Anton,sans-serif;color:#f4c95d}
.ifu-prix-pre{font:700 clamp(16px,2vw,22px)/1 Manrope,system-ui,sans-serif;color:#f5ead9;letter-spacing:.1em;text-transform:uppercase}
.ifu-prix-b{font-weight:400;font-size:clamp(56px,9vw,86px);line-height:1;text-shadow:0 2px 0 rgba(150,105,26,.95),0 4px 0 rgba(122,86,20,.9),0 6px 0 rgba(96,68,16,.85),0 8px 0 rgba(70,50,12,.8),0 12px 0 rgba(50,36,9,.7),0 26px 50px rgba(244,201,93,.3)}
.ifu-prix-mad{font-size:clamp(18px,2.4vw,24px)}
/* ---------- BLOC 6 · AVIS (marqueur if-avis-signature) ---------- */
.if-avis-signature{position:relative;padding:clamp(70px,14vh,140px) clamp(18px,5vw,40px);background:#0a0806;text-align:center}
.ifu-avis-in{max-width:880px;margin:0 auto}
.ifu-stars{color:#f4c95d;font-size:clamp(20px,3vw,28px);letter-spacing:.3em;margin:0 0 18px}
.ifu-quote{margin:0;font-family:Caveat,cursive;font-size:clamp(28px,5vw,50px);line-height:1.25;color:#f5ead9}
.ifu-attrib{font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,234,217,.55);margin:18px 0 34px}
.ifu-stat{display:inline-flex;align-items:baseline;gap:14px;border-top:2px solid #f4c95d;padding-top:22px}
.ifu-stat-note{font-family:'Bagel Fat One',Anton,sans-serif;font-size:clamp(40px,7vw,64px);line-height:1;color:#f4c95d;text-shadow:0 3px 0 rgba(122,86,20,.85)}
.ifu-stat-sub{font:600 14px/1.4 Manrope,system-ui,sans-serif;color:rgba(245,234,217,.7)}
/* ---------- BLOC 7 · FINALE COMMANDER (marqueur if-finale-commander) ---------- */
.if-finale-commander{position:relative}
.ifu-cta-band{display:block;background:#f4c95d;color:#0a0806;text-decoration:none;text-align:center;padding:clamp(30px,6vh,70px) 10px;border-top:2px solid #0a0806;transition:transform .18s ease}
.ifu-cta-band b{display:block;font-weight:400;font-family:Anton,Impact,sans-serif;font-size:clamp(58px,17vw,220px);line-height:.9;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 4px 0 rgba(122,86,20,.35)}
.ifu-cta-band i{display:block;font-style:normal;margin-top:10px;font:800 clamp(11px,1.6vw,15px)/1 Manrope,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.ifu-infos{background:#0a0806;padding:26px clamp(18px,5vw,40px);display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:center;border-top:2px solid #f4c95d;font:600 13px/1.5 Manrope,system-ui,sans-serif;color:rgba(245,234,217,.75)}
.ifu-infos a{color:#f4c95d}.ifu-infos a:hover{color:#ffb100}
.ifu-sep{color:rgba(244,201,93,.5)}
/* ---------- Entrées en cascade génériques ---------- */
html.ifu-js [data-ifu-reveal] .ifu-in{opacity:0;transform:translateY(26px);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s linear;transition-delay:calc(var(--i,0)*110ms)}
html.ifu-js [data-ifu-reveal].ifu-on .ifu-in,html.ifu-force .ifu-in{opacity:1;transform:none}
/* ---------- Gardes globales ---------- */
html.if-lite .ifu-p,html.if-lite .ifu-cue i,html.if-lite .ifu-extrude,html.if-lite .ifu-track,html.if-lite .ifu-trackB{animation:none}
@media (prefers-reduced-motion: reduce){
.ifu-p,.ifu-cue i,.ifu-extrude,.ifu-track,.ifu-trackB{animation:none!important}
html.ifu-js .ifu-line{animation:none;transform:none}
.ifu-in{opacity:1!important;transform:none!important;transition:none!important}
.ifu-stack{transform:none!important;opacity:1!important}
}
/* ===== if-scroll3d-v11526.css ===== */
/* if-scroll3d-v11526 — entrées 3D au défilement, sitewide, recalibrage perception.
États : html.ifs-on / html.ifs-static / html.ifs-lite / html.ifs-force. Sans JS : inerte. */
html.ifs-on .ifs-el{opacity:0;transform:perspective(950px) translate3d(-16px,34px,-70px) rotateX(9deg) rotateY(5deg) scale(.965);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--ifs-d,0ms),transform 1s cubic-bezier(.22,1,.36,1) var(--ifs-d,0ms)}html.ifs-on .ifs-el.ifs-alt{transform:perspective(950px) translate3d(16px,34px,-70px) rotateX(9deg) rotateY(-5deg) scale(.965)}
html.ifs-on .ifs-media{transform:perspective(950px) translate3d(-20px,42px,-90px) rotateX(10.5deg) rotateY(6deg) scale(.94)}html.ifs-on .ifs-media.ifs-alt{transform:perspective(950px) translate3d(20px,42px,-90px) rotateX(10.5deg) rotateY(-6deg) scale(.94)}
html.ifs-on .ifs-in{opacity:1;transform:none}
html.ifs-on.ifs-force .ifs-el{opacity:1!important;transform:none!important;transition:none!important}
html.ifs-static .ifs-el,html.ifs-lite .ifs-el{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion: reduce){.ifs-el{opacity:1!important;transform:none!important;transition:none!important}}
/* ===== if-home-v11527.css ===== */
/* if-home-v11527.css · Instafood · Home : hiérarchie typographique par rang + fil de progression.
Autonome. N'agit que si les marqueurs ifh-r1/r2/r3 et #ifh-fil sont posés. Compositor-only. */
/* ── Fil de progression doré (fixed, scaleX piloté par le JS) ── */
#ifh-fil{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;pointer-events:none;
transform:scaleX(var(--ifh-p,0));transform-origin:0 50%;
background:linear-gradient(90deg,#d6b158,#fff1b8 55%,#f5a623);
box-shadow:0 0 14px rgba(245,166,35,.45);opacity:.92;transition:opacity .3s ease}
html.ifh-top #ifh-fil{opacity:0}
/* ── Hiérarchie typographique par catégorie de section ──
r1 conversion (produits, commander) : la plus grande voix
r2 preuve (avis, chiffres, cuisine) : voix intermédiaire
r3 service (étapes, FAQ, adresse, club, hub) : voix calme */
main .ifh-r1>h2,main .ifh-r1 .if-steps__title,main .ifh-r1>div>h2,main .ifh-r1>div>div>h2{font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:.86;letter-spacing:-.012em}
main .ifh-r2>h2,main .ifh-r2>div>h2,main .ifh-r2>div>div>h2{font-size:clamp(2.1rem,5vw,3.8rem);line-height:.92}
main .ifh-r3>h2,main .ifh-r3 .if-steps__title,main .ifh-r3>div>h2,main .ifh-r3>div>div>h2{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1}
main .ifh-r3 .section__eyebrow,main .ifh-r3 .if-discovery-hub__eyebrow{letter-spacing:.22em}
/* ── Respiration verticale graduée : la conversion respire, le service se resserre ── */
main .ifh-r1{padding-block:clamp(46px,7vh,96px)}
main .ifh-r2{padding-block:clamp(38px,5.5vh,74px)}
main .ifh-r3{padding-block:clamp(28px,4vh,56px)}
/* ── Ancrage cinématique : la section active gagne en présence (scroll-driven, sans JS par élément) ── */
@media (prefers-reduced-motion: no-preference){
html.ifh-on main .ifh-r1,html.ifh-on main .ifh-r2{transition:filter .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.ifh-on main .ifh-r1:not(.ifh-live),html.ifh-on main .ifh-r2:not(.ifh-live){filter:saturate(.82) brightness(.92)}
html.ifh-on main .ifh-live{filter:none}
}
@media (prefers-reduced-motion: reduce){
html.ifh-on main .ifh-r1,html.ifh-on main .ifh-r2{filter:none!important;transform:none!important;transition:none!important}
}
html.ifh-force main .ifh-r1,html.ifh-force main .ifh-r2{filter:none!important;transform:none!important}
/* ===== if-guide-v11528.css ===== */
/* if-guide-v11528.css · Instafood · Habillage éditorial des contenus nus (guides, FAQ, articles).
N'agit que sur les sections marquées .ifg-nu et les corps d'article .ifa-body.
Aucun texte ajouté : purement typographique et structurel. */
/* ── Sections nues : chaque H3 devient un intertitre-fiche, son texte une réponse cadrée ── */
main .ifg-nu{position:relative}
main .ifg-nu>h3{
margin:26px 0 8px;padding:14px 0 0;
font-family:var(--font-chunk,inherit);
font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.2;letter-spacing:.01em;
color:#f5c96b;border-top:1px solid rgba(214,177,88,.30)}
main .ifg-nu>h3:first-of-type{margin-top:18px}
main .ifg-nu>h3+p{
margin:0 0 4px;padding:0 0 0 14px;
border-left:2px solid rgba(214,177,88,.34);
color:rgba(247,239,226,.90);max-width:68ch;line-height:1.62}
main .ifg-nu>h3+p+p{padding-left:14px;border-left:2px solid rgba(214,177,88,.16);max-width:68ch}
/* ── Corps d'article : mesure de lecture, respiration, chapô en exergue ── */
main .ifa-body>p{max-width:70ch;line-height:1.7}
main .ifa-chapo{
max-width:70ch;font-size:clamp(1.05rem,2.4vw,1.28rem);line-height:1.55;
color:#f7efe3;padding:16px 18px;border-radius:16px;
background:linear-gradient(180deg,rgba(245,201,107,.09),rgba(255,255,255,.02));
border:1px solid rgba(214,177,88,.26)}
main .ifa-body>h2{margin-top:34px;padding-top:16px;border-top:1px solid rgba(214,177,88,.22)}
/* ── Sommaire d'article : carte de navigation, cibles tactiles conformes ── */
main .ifa-toc{
margin:22px 0 10px;padding:16px 18px;border-radius:18px;
background:rgba(255,255,255,.045);border:1px solid rgba(214,177,88,.24)}
main .ifa-toc>p{margin:0 0 8px;font-family:var(--font-chunk,inherit);
text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:#f5c96b}
main .ifa-toc ol{margin:0;padding-left:20px}
main .ifa-toc li{margin:2px 0}
main .ifa-toc a{display:inline-block;min-height:44px;line-height:44px;
color:rgba(247,239,226,.92);text-decoration:none;border-bottom:1px solid rgba(214,177,88,.22)}
main .ifa-toc a:hover,main .ifa-toc a:focus-visible{color:#f5c96b;border-bottom-color:#f5c96b}
@media (max-width:640px){
main .ifg-nu>h3{margin-top:20px}
main .ifa-chapo{padding:14px}
}
/* ===== if-footer-v11529.css ===== */
/* if-footer-v11529.css · Instafood · Bas de page : plan du site compact et copyright en dernier.
N'agit que sur .if-hub marqué .ifb-hub. Aucun texte modifié. */
/* Le plan du site cesse d'écraser le bas de page : cadre discret, colonnes serrées, hauteur bornée. */
footer .ifb-hub{
margin:26px auto 0;padding:18px 18px 10px;max-width:1160px;
border-top:1px solid rgba(214,177,88,.22);border-radius:18px 18px 0 0;
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
footer .ifb-hub .if-hub__grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 26px}
footer .ifb-hub h2{
font-size:.82rem!important;letter-spacing:.16em;text-transform:uppercase;
color:#f5c96b;margin:0 0 6px;text-shadow:none!important;line-height:1.3}
footer .ifb-hub ul{margin:0;padding:0;list-style:none}
footer .ifb-hub li{margin:0}
footer .ifb-hub a{
display:block;padding:7px 0;font-size:.9rem;line-height:1.35;
color:rgba(247,239,226,.78);text-decoration:none}
footer .ifb-hub a:hover,footer .ifb-hub a:focus-visible{color:#f5c96b}
/* Repli mobile : le plan reste accessible sans occuper dix écrans. */
@media (max-width:760px){
footer .ifb-hub{max-height:var(--ifb-h,268px);overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
footer .ifb-hub.ifb-open{max-height:none;-webkit-mask-image:none;mask-image:none}
footer .ifb-more{
display:block;width:100%;margin:8px 0 2px;padding:12px 14px;min-height:44px;
border:1px solid rgba(214,177,88,.34);border-radius:999px;background:rgba(255,255,255,.05);
color:#f5c96b;font:inherit;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
footer .ifb-hub a{padding:9px 0}
}
footer .ifb-more{display:none}
/* Le copyright reprend sa place : dernier bloc du document. */
footer .ifb-bottom{order:99;margin-top:14px;padding-top:12px;border-top:1px solid rgba(214,177,88,.16)}
footer .footer__bottom.ifb-bottom{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
font-size:.84rem;color:rgba(247,239,226,.62)}
/* ===== if-homefx-v11530.css ===== */
/* if-homefx-v11530.css · Instafood · Home : cascade 3D des cartes, parallaxe des médias, titres en rideau.
N'agit que si les marqueurs .ifz-c / .ifz-media / .ifz-h sont posés. Compositor-only (transform/opacity).
Dégradés : html.ifz-static ou prefers-reduced-motion → tout visible, aucune transformation. */
/* ── 1. Cascade 3D des cartes : entrée en profondeur, décalage par rang, alternance de côté ── */
html.ifz-on .ifz-c{
opacity:0;
transform:perspective(1000px) translate3d(-22px,52px,-120px) rotateX(11deg) rotateY(7deg) scale(.93);
transform-origin:50% 100%;
transition:opacity .78s cubic-bezier(.22,1,.36,1) var(--ifz-d,0ms),
transform 1.05s cubic-bezier(.22,1,.36,1) var(--ifz-d,0ms)}
html.ifz-on .ifz-c.ifz-alt{transform:perspective(1000px) translate3d(22px,52px,-120px) rotateX(11deg) rotateY(-7deg) scale(.93)}
html.ifz-on .ifz-c.ifz-in{opacity:1;transform:none}
/* ── 2. Parallaxe des médias : le visuel glisse plus lentement que son cadre ── */
html.ifz-on .ifz-media{will-change:transform;transform:translate3d(0,var(--ifz-py,0px),0) scale(1.04)}
/* Scroll natif quand le navigateur le supporte : zéro JS par image. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
html.ifz-on .ifz-media{
animation:ifzPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%;
transform:none}
@keyframes ifzPar{from{transform:translate3d(0,26px,0) scale(1.06)}to{transform:translate3d(0,-26px,0) scale(1.06)}}
}
}
/* ── 3. Titres en rideau : la ligne se lève depuis son masque ── */
html.ifz-on .ifz-h{overflow:clip;display:block}
html.ifz-on .ifz-h>.ifz-hin{display:block;transform:translateY(108%);opacity:.001;
transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s linear}
html.ifz-on .ifz-h.ifz-in>.ifz-hin{transform:none;opacity:1}
/* ── Dégradés et failsafe ── */
html.ifz-static .ifz-c,html.ifz-static .ifz-media,html.ifz-static .ifz-h>.ifz-hin,
html.ifz-force .ifz-c,html.ifz-force .ifz-media,html.ifz-force .ifz-h>.ifz-hin{
opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
@media (prefers-reduced-motion: reduce){
.ifz-c,.ifz-media,.ifz-h>.ifz-hin{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}
/* ── 4. Prix serveur en relief sur les cartes produits de la home ── */
.product-card .ifz-price{display:inline-block;margin:0 0 6px;transform:translateZ(0)}
.product-card .ifz-price .ifu-prix{
display:inline-flex;align-items:baseline;gap:4px;
font-family:var(--font-chunk,inherit);letter-spacing:.01em;color:#f7efe3}
.product-card .ifz-price .ifu-prix-b{
font-size:clamp(1.5rem,3.6vw,2rem);line-height:1;color:#fff;
text-shadow:0 2px 0 rgba(0,0,0,.55),0 4px 0 rgba(214,123,0,.55),0 0 20px rgba(245,166,35,.22)}
.product-card .ifz-price .ifu-prix-mad{font-size:.78rem;letter-spacing:.14em;color:#f5c96b;text-transform:uppercase}
html.ifz-on .product-card.ifz-in .ifz-price{animation:ifzPop .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--ifz-d,0ms) + 180ms)}
@keyframes ifzPop{from{opacity:0;transform:translate3d(0,10px,0) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){html.ifz-on .product-card .ifz-price{animation:none!important}}
/* ── 5. Orbite home : lien cliquable, nom et prix sous la carte ── */
.if-orbite .ifu-card-link{display:block;text-decoration:none;color:inherit}
.if-orbite .ifu-card-media{display:block;border-radius:18px;overflow:hidden;border:1px solid rgba(214,177,88,.28);
box-shadow:0 18px 40px rgba(0,0,0,.45)}
.if-orbite .ifu-card-media img{display:block;width:100%;height:auto}
.if-orbite .ifu-card-name{display:block;margin:8px 0 2px;font-family:var(--font-chunk,inherit);
font-size:.98rem;line-height:1.2;color:#f7efe3;text-align:center}
.if-orbite .ifz-price{display:block;text-align:center}
.if-orbite .ifz-price .ifu-prix-b{font-size:1.25rem}
.if-orbite .ifu-card-link:focus-visible{outline:2px solid #f5c96b;outline-offset:4px;border-radius:20px}
/* ── 6. Hero typographique piliers : titres réels (longs) au lieu du slogan court ── */
.if-hero-typo .ifu-slogan-l1{font-size:clamp(30px,6.4vw,84px);line-height:.96;letter-spacing:-.01em;text-wrap:balance}
.if-hero-typo .ifu-hero-lead{max-width:64ch;margin:18px auto 0;font-size:clamp(1rem,2.2vw,1.16rem);
line-height:1.6;color:rgba(247,239,226,.86)}
.if-hero-typo .ifu-hero-lead .ifu-line{display:block}
.if-hero-typo .ifu-hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 0}
.if-hero-typo{min-height:clamp(520px,78svh,780px)}
@media (max-width:640px){.if-hero-typo{min-height:clamp(460px,72svh,640px)}
.if-hero-typo .ifu-slogan-l1{font-size:clamp(28px,8.4vw,44px)}}
/* ===== if-fixes-v11524.css ===== */
/* if-fixes-v11524 — correctifs visuels mobiles home (captures fondateur 07/08).
1) Bulle if27-orderbar : degagee du bouton rond bas-gauche, sous-texte masque en compact.
2) Titre franchise : empilement propre des deux lignes, neutralisation de tout decalage. */
@media (max-width:640px){
html.if27 .if27-orderbar{left:80px;right:12px;padding:10px 10px 10px 12px;gap:10px}
html.if27 .if27-orderbar .t2{display:none}
html.if27 .if27-orderbar .t b{font-size:.88rem}
}
@media (max-width:700px){
.franchise h2{line-height:1.04}
.franchise h2 em{display:block;position:static;transform:none;margin-top:.1em}
}
/* ===== if-ui2026-v11531.css ===== */
/* if-ui2026-v11531.css · Instafood · Finition 2026 : CTA affinés + échelle typographique contextuelle.
Chargé EN DERNIER sur tout le parc. Ne touche ni au contenu ni aux composants signature.
Principe : moins d'épaisseur, plus de matière — ombres diffuses, filets fins, cibles tactiles conservées. */
/* ── 1. CTA : fin de l'ombre pleine (relief 2019) au profit d'une élévation diffuse ── */
.btn,.btn--primary,.btn--ghost,.platform,.ifp-cta{
border-radius:999px;
font-size:clamp(.86rem,1.6vw,.95rem);letter-spacing:.01em;font-weight:600;
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background-color .35s ease,border-color .35s ease}
.btn{min-height:46px;padding:12px 22px}
.btn--primary{
box-shadow:0 10px 26px -12px rgba(245,166,35,.55),inset 0 1px 0 rgba(255,255,255,.24);
border:1px solid rgba(255,255,255,.14)}
.btn--primary:hover,.btn--primary:focus-visible{
transform:translateY(-1px);
box-shadow:0 16px 34px -14px rgba(245,166,35,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:active{transform:translateY(0);box-shadow:0 6px 16px -10px rgba(245,166,35,.5)}
.btn--ghost{
background:rgba(255,255,255,.04);border:1px solid rgba(214,177,88,.34);color:#f7efe3;box-shadow:none}
.btn--ghost:hover,.btn--ghost:focus-visible{
background:rgba(214,177,88,.10);border-color:rgba(214,177,88,.55);transform:translateY(-1px)}
.ifp-cta{padding:12px 24px;min-height:46px;display:inline-flex;align-items:center}
/* Cible tactile conservée sans grossir le bouton visuellement. */
@media (pointer:coarse){
.btn,.ifp-cta{min-height:48px}
}
/* ── 2. Échelle typographique contextuelle (pages internes ; les accueils gardent leurs rangs ifh-*) ── */
main h1{text-wrap:balance}
main h2,main h3{text-wrap:pretty}
body:not(:has(.ifh-r1)) main>section>h2,
body:not(:has(.ifh-r1)) main>section>div>h2{font-size:clamp(1.55rem,3.4vw,2.45rem);line-height:1.06}
body:not(:has(.ifh-r1)) main>section h3{font-size:clamp(1.02rem,2vw,1.28rem);line-height:1.24}
main>section>p,main>section>div>p{max-width:72ch}
/* Le poster et le hero typographique gardent leurs propres tailles. */
.if-poster h1,.if-hero-typo h1,.ifu-h2,.ifz-price *{font-size:revert-layer}
/* ── 3. Filets et surfaces : uniformisation discrète ── */
.if-card,.card,.info-card,.ifa-toc,.ifg-nu{border-radius:18px}
hr,.sep{border:0;border-top:1px solid rgba(214,177,88,.18)}
@media (prefers-reduced-motion: reduce){
.btn,.btn--primary,.btn--ghost,.platform,.ifp-cta{transition:none!important;transform:none!important}
}
/* ===== if-signature-v11535.css ===== */
/* if-signature-v11535.css · Instafood · Signatures visuelles issues de la rétro-ingénierie NST / tastycrousty (08/08),
transposées dans l'univers Instafood : noir profond, or, jamais leurs roses ni leurs cyans.
1) surlignage plein derrière les titres 2) bande défilante INCLINÉE 3) pastilles d'étapes numérotées.
CSS seul : aucun texte, aucun élément ajouté au document. */
/* ═══ 1. SURLIGNAGE PLEIN (leur arme de lisibilité) ═══
Le bloc suit le texte ligne par ligne (box-decoration-break) sans casser le rideau ifz-. */
main .ifh-r1>h2>.ifz-hin,
main .ifh-r1>div>h2>.ifz-hin,
main .if-steps__title>.ifz-hin,
.if-orbite .ifu-h2{
display:inline;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
padding:.04em .22em .1em;
background:linear-gradient(180deg,rgba(20,15,7,.92),rgba(20,15,7,.92));
box-shadow:0 0 0 1px rgba(214,177,88,.28);
border-radius:6px;
color:#f7efe3}
/* Un seul mot mis en or plein : l'accent de marque, pas un arc-en-ciel. */
main .ifh-r1>h2 em,main .ifh-r1>div>h2 em,main .if-steps__title em{
font-style:normal;display:inline;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
padding:.02em .16em;border-radius:5px;
background:linear-gradient(180deg,#f5c96b,#d6a53a);
color:#150f06;box-shadow:none;text-shadow:none}
/* Le rideau doit rester possible : overflow clip conservé sur le conteneur, pas sur le fond. */
html.ifz-on main .ifz-h{overflow:visible}
html.ifz-on main .ifz-h>.ifz-hin{will-change:transform}
/* ═══ 2. BANDE DÉFILANTE INCLINÉE (signature tastycrousty, transposée or/noir) ═══ */
.ifm-marquee{
position:relative;overflow:hidden;
padding-block:clamp(26px,5vh,54px)}
.ifm-marquee .ifm-marquee__track{
transform:rotate(-3.2deg);
transform-origin:50% 50%;
width:112%;margin-left:-6%;
padding-block:10px;
background:linear-gradient(90deg,rgba(214,177,88,.10),rgba(214,177,88,.22) 45%,rgba(214,177,88,.10));
border-top:1px solid rgba(214,177,88,.34);
border-bottom:1px solid rgba(214,177,88,.34);
box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.ifm-marquee .ifm-mq{filter:none}
.ifm-marquee .ifm-mq b{color:#f7efe3}
.ifm-marquee .ifm-mq i{color:#f5c96b;font-style:normal}
@media (max-width:760px){
.ifm-marquee .ifm-marquee__track{transform:rotate(-2.2deg);width:118%;margin-left:-9%}
.ifm-marquee{padding-block:22px}
}
@media (prefers-reduced-motion: reduce){
.ifm-marquee .ifm-marquee__track{transform:none;width:100%;margin-left:0}
}
/* ═══ 3. PASTILLES D'ÉTAPES (les badges ronds numérotés de NST, en or) ═══ */
.if-steps .if-step{position:relative}
.if-steps .if-step__n{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:999px;
font-family:var(--font-chunk,inherit);font-size:1.15rem;line-height:1;
color:#150f06;background:radial-gradient(120% 120% at 30% 20%,#ffe6a6,#d6a53a 62%,#a97c1e);
box-shadow:0 10px 22px -12px rgba(245,166,35,.8),inset 0 1px 0 rgba(255,255,255,.5);
margin-bottom:10px}
.if-steps .if-step__t{margin:2px 0 6px}
html.ifz-on .if-steps .if-step.ifz-in .if-step__n{animation:ifsPop .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--ifz-d,0ms) + 120ms)}
@keyframes ifsPop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
html.ifz-on .if-steps .if-step .if-step__n{animation:none!important}
}
/* ═══ 4. BANDE PRODUITS : plus haute, plus grosse, plus rapide (grief 08/08, calibrage NST) ═══ */
.ifm-marquee .ifm-marquee__track{animation-duration:16s!important}
.ifm-marquee .ifm-mq{padding:10px 34px!important;gap:18px!important}
.ifm-marquee .ifm-mq img{width:92px!important;height:92px!important;border-radius:20px!important;
border:1px solid rgba(245,201,107,.55)!important;box-shadow:0 12px 26px -12px rgba(0,0,0,.8)!important}
.ifm-marquee .ifm-mq b{font-size:clamp(1.5rem,4.2vw,2.3rem)!important;line-height:1}
.ifm-marquee .ifm-mq i{font-size:clamp(1.15rem,3.2vw,1.7rem)!important}
.ifm-marquee .ifm-mq__sep{font-size:1.4rem;opacity:.5}
@media (max-width:760px){
.ifm-marquee .ifm-marquee__track{animation-duration:13s!important}
.ifm-marquee .ifm-mq img{width:76px!important;height:76px!important}
.ifm-marquee .ifm-mq{padding:8px 22px!important;gap:12px!important}
}
@media (prefers-reduced-motion: reduce){
.ifm-marquee .ifm-marquee__track{animation:none!important}
}
/* ===== if-sticky-v11537.css ===== */
/* if-sticky-v11537.css · Instafood · Titres accrochés au défilement + densité desktop.
Dernier geste de la rétro-ingénierie : chez tastycrousty le titre reste tandis que le contenu défile.
Ici : le bloc de tête de section s'accroche sous la barre, s'estompe en sortie, sans jamais masquer le contenu.
CSS seul, aucune modification de document. */
@media (min-width:761px) and (prefers-reduced-motion: no-preference){
/* ── Titres accrochés : la section garde sa voix pendant qu'on lit son contenu ── */
main .ifh-r2>.section__head,
main .ifh-r3>.section__head,
main .ifg-nu>h2,
main .ifa-body>h2{
position:sticky;top:76px;z-index:3;
padding-block:8px;
background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,.72) 70%,rgba(10,8,6,0));
backdrop-filter:saturate(120%) blur(2px);
-webkit-backdrop-filter:saturate(120%) blur(2px)}
/* Le contenu passe DESSOUS le titre, jamais dessus : lisibilité garantie. */
main .ifh-r2>*:not(.section__head),
main .ifh-r3>*:not(.section__head){position:relative;z-index:1}
/* Les composants à machine propre gardent leur pile intacte. */
.if-orbite .ifu-orbite-head,.if-poster *,.if-hero-typo *,.ifm-marquee *,.ifv-kitchen *{position:static}
.if-orbite .ifu-orbite-head{position:relative}
}
/* ── Densité desktop : moins de vide, le contenu s'enchaîne (leçon des références) ── */
@media (min-width:761px){
main .ifh-r1{padding-block:clamp(38px,5.2vh,72px)}
main .ifh-r2{padding-block:clamp(30px,4.2vh,56px)}
main .ifh-r3{padding-block:clamp(24px,3.2vh,44px)}
main .ifg-nu>h3{margin-top:20px}
main .ifa-body>h2{margin-top:26px}
main .section__head{margin-bottom:14px}
main .section__sub{margin-top:6px}
/* Grilles plus serrées : on remplit l'écran au lieu de l'aérer. */
main .if-grid,main .platforms,main .if-discovery-hub__grid{gap:14px}
}
/* ── Sécurités ── */
@media (prefers-reduced-motion: reduce){
main .ifh-r2>.section__head,main .ifh-r3>.section__head,
main .ifg-nu>h2,main .ifa-body>h2{position:static;background:none;backdrop-filter:none}
}
html.if-lite main .ifh-r2>.section__head,
html.if-lite main .ifh-r3>.section__head,
html.if-lite main .ifg-nu>h2,
html.if-lite main .ifa-body>h2{position:static;background:none;backdrop-filter:none}
/* ===== if-carousel-v11541.css ===== */
/* if-carousel-v11541.css · Instafood · VITRINE PRODUITS UNIQUE (remplace la dualité orbite/rail).
Un seul comportement mobile et desktop : rail horizontal aimanté, grandes cartes photo plein cadre,
profondeur portée par la CARTE ACTIVE (jamais par une géométrie circulaire qui ne tient pas en 388px).
Aucune hauteur en pourcentage : tout est explicite (leçon 48.143). */
.ifc{position:relative}
.ifc-head{margin-bottom:14px}
/* ── Rail : aimantation, défilement au doigt, pas de barre visible ── */
.ifc-rail{
display:flex;gap:14px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scroll-padding-inline:16px;padding:6px 16px 18px;
scrollbar-width:none}
.ifc-rail::-webkit-scrollbar{display:none}
/* ── Carte : photo carrée plein cadre, nom et prix massifs ── */
.ifc-card{
flex:0 0 auto;width:min(80vw,340px);
scroll-snap-align:center;
background:linear-gradient(180deg,#141009,#0b0906);
border:1px solid rgba(214,177,88,.30);border-radius:22px;overflow:hidden;
box-shadow:0 22px 44px -26px rgba(0,0,0,.9);
transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s ease,box-shadow .5s ease;
transform:perspective(1200px) scale(.955) rotateY(0deg)}
.ifc-card a{display:block;text-decoration:none;color:inherit}
.ifc-media{display:block;width:100%;height:min(80vw,340px);position:relative;overflow:hidden;background:#0b0906}
.ifc-media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ifc-body{padding:14px 16px 18px}
.ifc-name{display:block;font-family:var(--font-chunk,inherit);
font-size:clamp(1.15rem,4.4vw,1.5rem);line-height:1.08;color:#f7efe3;margin-bottom:8px}
.ifc-price{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-chunk,inherit)}
.ifc-price b{font-size:clamp(1.6rem,6vw,2.1rem);line-height:1;color:#fff;
text-shadow:0 2px 0 rgba(0,0,0,.6),0 4px 0 rgba(214,123,0,.55),0 0 22px rgba(245,166,35,.25)}
.ifc-price span{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#f5c96b}
.ifc-price i{font-style:normal;font-size:.9rem;color:rgba(247,239,226,.7);margin-right:2px}
/* ── Carte active : la profondeur se joue ici, pas sur un cercle ── */
.ifc-card.ifc-on{
transform:perspective(1200px) scale(1) translateZ(0);
border-color:rgba(245,201,107,.62);
box-shadow:0 30px 60px -28px rgba(245,166,35,.35),0 22px 44px -26px rgba(0,0,0,.9)}
.ifc-card.ifc-on .ifc-media img{transform:scale(1.045)}
.ifc-card:not(.ifc-on){filter:saturate(.86) brightness(.9)}
/* ── Flèches : discrètes, jamais de gros bouton (mandat 2026) ── */
.ifc-nav{position:absolute;top:calc(min(80vw,340px)/2 - 4px);display:none;
width:44px;height:44px;border-radius:999px;cursor:pointer;
background:rgba(12,9,6,.72);border:1px solid rgba(214,177,88,.4);color:#f5c96b;
align-items:center;justify-content:center;backdrop-filter:blur(4px);
transition:transform .3s ease,border-color .3s ease,opacity .3s ease;z-index:4}
.ifc-nav:hover{transform:scale(1.06);border-color:#f5c96b}
.ifc-nav[disabled]{opacity:.25;pointer-events:none}
.ifc-prev{left:6px}.ifc-next{right:6px}
.ifc-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
@media (hover:hover) and (min-width:761px){.ifc-nav{display:inline-flex}}
/* ── Repère de progression : où j'en suis dans les 8 ── */
.ifc-dots{display:flex;gap:6px;justify-content:center;margin-top:2px}
.ifc-dot{width:6px;height:6px;border-radius:999px;background:rgba(214,177,88,.3);transition:all .3s ease}
.ifc-dot.ifc-dot-on{width:22px;background:#f5c96b}
@media (min-width:761px){
.ifc-card{width:340px}
.ifc-media{height:340px}
.ifc-rail{gap:18px;padding:6px 44px 20px;scroll-padding-inline:44px}
}
@media (prefers-reduced-motion: reduce){
.ifc-card,.ifc-media img{transition:none!important;transform:none!important;filter:none!important}
.ifc-rail{scroll-behavior:auto}
}
/* ===== if-vt2026-v11543.css ===== */
/* if-vt2026-v11543.css · Instafood · Transitions de vue natives entre pages (standard 2026).
Zéro JavaScript : le navigateur anime lui-même le passage d'une page à l'autre.
Navigateurs sans support : navigation classique, rien ne casse. */
@view-transition{navigation:auto}
/* Fondu court et montée légère : la page suivante arrive, elle ne clignote pas. */
::view-transition-old(root){animation:ifvtOut .18s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:ifvtIn .28s cubic-bezier(.16,1,.3,1) both}
@keyframes ifvtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes ifvtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Continuité de marque : le logo et la barre ne rejouent pas leur entrée à chaque page. */
.nav .brand img,.if-pro-nav .brand img{view-transition-name:if-logo}
header .nav,header .if-pro-nav{view-transition-name:if-nav}
::view-transition-group(if-logo),::view-transition-group(if-nav){animation-duration:.24s}
/* Le fil de progression ne doit pas être capturé dans l'instantané de transition. */
#ifh-fil{view-transition-name:none}
@media (prefers-reduced-motion: reduce){
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
/* ===== if-mobile2026-v11533.css ===== */
/* if-mobile2026-v11533.css · Instafood · Lisibilité et densité mobile (rétro-ingénierie NST / tastycrousty, 08/08).
Corrige : orbite 3D illisible sous 760px (rayon 40vw < largeur de carte 170px = chevauchement),
barre de commande sur trois lignes, plan du site estompé, sections trop aérées.
Chargé dans le bundle, EN DERNIER : gagne sur les modules précédents. */
@media (max-width:760px){
/* ── 1. ORBITE → RAIL TACTILE À AIMANTATION (cartes nettes, une par vue) ── */
.if-orbite .ifu-stage{
height:auto!important;perspective:none!important;cursor:default!important;
touch-action:pan-x pan-y;margin-top:14px;
padding:4px 0 14px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none}
.if-orbite .ifu-stage::-webkit-scrollbar{display:none}
.if-orbite .ifu-stage.ifu-flat{height:auto!important;perspective:none!important}
.if-orbite .ifu-ring{
position:static!important;transform:none!important;transform-style:flat!important;
display:flex!important;flex-wrap:nowrap!important;gap:12px;
width:max-content!important;height:auto!important;padding:0 16px;
justify-content:flex-start!important;overflow:visible!important}
.if-orbite .ifu-card{
position:static!important;transform:none!important;
left:auto!important;top:auto!important;margin:0!important;
flex:0 0 auto;width:min(78vw,320px);height:auto;
/* CAUSE DU CARROUSEL VIDE (48.140) : .ifu-card-media est en height:56% ; avec une carte
en hauteur auto le pourcentage se resout a 0 -> image invisible, carte plate.
Correctif : hauteur d'image EXPLICITE en px, jamais de pourcentage ici. */
opacity:1!important;visibility:visible!important;
scroll-snap-align:center;
background:#100d08;border:1px solid rgba(214,177,88,.30);border-radius:20px;
box-shadow:0 16px 34px -18px rgba(0,0,0,.8);overflow:hidden;
transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease}
.if-orbite .ifu-card:active{transform:scale(.985)!important}
.if-orbite .ifu-card-media{
height:min(78vw,320px)!important;position:relative!important;
border:0;border-radius:0;box-shadow:none;overflow:hidden}
.if-orbite .ifu-card-media img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.if-orbite .ifu-card-name{margin:10px 12px 2px;font-size:1rem;text-align:left}
.if-orbite .ifz-price{margin:0 12px 12px;text-align:left}
.if-orbite .ifz-price .ifu-prix-b{font-size:1.35rem}
/* Repère de défilement : indique qu'il reste des produits à droite. */
.if-orbite .ifu-stage{
-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35));
mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35))}
.if-orbite .ifu-sub{padding:0 16px}
/* ── 2. BARRE DE COMMANDE : une seule ligne, plus jamais trois ── */
html.if27 .if27-orderbar{
left:76px;right:10px;padding:8px 8px 8px 12px;gap:8px;align-items:center}
html.if27 .if27-orderbar .t{min-width:0;flex:1 1 auto}
html.if27 .if27-orderbar .t b{
display:block;font-size:.82rem;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.if27 .if27-orderbar .t2{display:none!important}
html.if27 .if27-orderbar .btn,html.if27 .if27-orderbar a{
flex:0 0 auto;min-height:42px;padding:10px 16px;font-size:.86rem;white-space:nowrap}
/* ── 3. PLAN DU SITE : plus de liens à moitié effacés ── */
footer .ifb-hub{
max-height:var(--ifb-h,300px);
-webkit-mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,.25));
mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,.25))}
footer .ifb-hub.ifb-open{-webkit-mask-image:none;mask-image:none}
footer .ifb-hub a{padding:8px 0}
/* ── 4. DENSITÉ : moins de vide, plus de contenu par écran (leçon des références) ── */
main .ifh-r1{padding-block:32px}
main .ifh-r2{padding-block:26px}
main .ifh-r3{padding-block:20px}
main section{padding-top:min(var(--ifm-pt,28px),34px)}
.if-hero-typo{min-height:clamp(420px,62svh,560px)}
.if-poster{min-height:auto}
main .ifg-nu>h3{margin-top:16px}
/* ── 5. Titres : la voix massive des références, sans débordement ── */
main .ifh-r1>h2,main .ifh-r1>div>h2{font-size:clamp(2.1rem,9.6vw,3rem);line-height:.92;letter-spacing:-.02em}
main .ifh-r2>h2,main .ifh-r2>div>h2{font-size:clamp(1.7rem,7vw,2.2rem);line-height:.98}
}
/* Repli sans JS ou mouvement réduit : le rail reste un rail, jamais une pile. */
@media (max-width:760px) and (prefers-reduced-motion: reduce){
.if-orbite .ifu-card{transition:none!important}
}
/* ═══ REPLI PLAT (if-lite / ifu-flat / mouvement réduit) : même piège de pourcentage ═══
Le mode plat hérité garde une carte à hauteur fixe : on lui donne une image en px explicites
pour qu'aucun contexte (rail ou grille) ne puisse résoudre 56% à zéro. */
html.if-lite .if-orbite .ifu-card-media,
html.ifu-static .if-orbite .ifu-card-media,
.ifu-stage.ifu-flat .ifu-card-media{height:min(60vw,260px)!important;position:relative!important}
html.if-lite .if-orbite .ifu-card,
html.ifu-static .if-orbite .ifu-card,
.ifu-stage.ifu-flat .ifu-card{height:auto!important;opacity:1!important;visibility:visible!important}
/* ===== if-fix2026-v11546.css ===== */
/* if-fix2026-v11546.css · Instafood · Correctifs de lisibilité signalés par le fondateur (08/08 après-midi).
Chargé après tous les modules de style : il tranche les conflits hérités.
CAUSES RACINES MESURÉES :
1) `html.if27 h2 em{ -webkit-background-clip:text; color:transparent }` rendait « Le Maroc demain »
INVISIBLE (texte transparent sur fond noir) — le dégradé melt ne peignait rien.
2) `.newsletter__finalite{color:rgba(0,0,0,.85)}` + `strong{color:var(--noir)}` = texte sombre
sur le fond cheddar du bloc club : illisible.
3) Le panneau « Explorer Instafood » et les panneaux suivants portent des h2 sans la classe
`section__title` : ils échappaient à la couleur et à la typo de marque. */
/* ── 1. Accent des titres de section : or cheddar plein, jamais transparent ── */
.franchise h2 em,
main section:not(.ifh-r1) h2 em,
main .if-discovery-hub h2 em{
background:none!important;background-image:none!important;
-webkit-background-clip:border-box!important;background-clip:border-box!important;
-webkit-text-fill-color:#f5c96b!important;color:#f5c96b!important;
font-style:normal;text-shadow:0 0 24px rgba(245,166,35,.22)}
.franchise h2 em{display:block;margin-top:.08em}
/* ── 2. Mention de finalité du Club : blanc lisible sur le fond doré ── */
.newsletter__finalite,
.newsletter__finalite a{
color:#fff!important;-webkit-text-fill-color:#fff!important;
opacity:1!important;font-style:normal;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* Les deux mots qui portent l'engagement passent en NOIR sur le fond doré (demande fondateur) */
.newsletter__finalite strong{
color:#0a0806!important;-webkit-text-fill-color:#0a0806!important;
font-weight:900;text-shadow:none}
.newsletter__finalite a{text-decoration:underline;text-underline-offset:3px}
.newsletter__consent,.newsletter__consent a,.newsletter__consent strong{
color:#fff!important;-webkit-text-fill-color:#fff!important}
/* ── 3. Titres des panneaux de bas de page : même voix que le reste du site ── */
main .if-discovery-hub h2,
main .if-entity-panel h2,
main .if-sources-panel h2,
main .if-trust-links h2,
main .if-discovery-hub__head h2{
font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif)!important;
color:#f7efe3!important;-webkit-text-fill-color:#f7efe3!important;
letter-spacing:-.005em;line-height:1.08}
main .if-discovery-hub__eyebrow,
main .if-entity-panel .section__eyebrow,
main .if-sources-panel .section__eyebrow,
main .if-trust-links .section__eyebrow{
color:#f5c96b!important;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
main .if-discovery-hub h3,main .if-entity-panel h3,main .if-sources-panel h3{
color:#f5c96b!important;font-family:var(--font-chunk,inherit)!important}
/* ── 4. Bande produits : encore plus vive (2e demande du fondateur) ── */
.ifm-marquee .ifm-marquee__track{animation-duration:9s!important}
@media (max-width:760px){.ifm-marquee .ifm-marquee__track{animation-duration:7.5s!important}}
@media (prefers-reduced-motion: reduce){.ifm-marquee .ifm-marquee__track{animation:none!important}}
/* ── 5. Vitrine : le défilement automatique ne doit jamais masquer la lisibilité ── */
.ifc-rail{scroll-behavior:auto}
.ifc.ifc-auto .ifc-rail{cursor:grab}
/* ── 6. Bloc de rebond : aucune page ne doit être un cul-de-sac ── */
main .ifr-bounce{margin:26px 0 6px;padding:16px 18px;border-radius:18px;
background:rgba(255,255,255,.04);border:1px solid rgba(214,177,88,.24)}
main .ifr-bounce__t{margin:0 0 10px;font-family:var(--font-chunk,inherit);font-size:.82rem;
letter-spacing:.18em;text-transform:uppercase;color:#f5c96b}
main .ifr-bounce ul{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
main .ifr-bounce a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;
border-radius:999px;border:1px solid rgba(214,177,88,.32);background:rgba(255,255,255,.04);
color:#f7efe3;text-decoration:none;font-size:.9rem;transition:border-color .3s ease,transform .3s ease}
main .ifr-bounce a:hover,main .ifr-bounce a:focus-visible{border-color:#f5c96b;transform:translateY(-1px)}
/* ── 7. Surcouche d'autocompletion d'adresse (tunnel) ── */
.ifac-host{margin-top:8px}
.ifac-host gmp-place-autocomplete{width:100%;display:block;
--gmp-mat-color-surface:#141009;--gmp-mat-color-on-surface:#f7efe3;
--gmp-mat-color-outline:rgba(214,177,88,.34);--gmp-mat-color-primary:#f5c96b}
.ifac-host.ifac-done{opacity:.85}
input[data-ifac="on"]{border-color:rgba(214,177,88,.45)}
/* ── 8. P0 AUDIT : VIDÉO HÉROS PLEIN CADRE (l'élément qui signe une page food vivante) ──
CSS seul : le médaillon vidéo existant du hero est étalé en fond plein cadre, l'affiche
craving reste visible tant que la vidéo n'a pas démarré. Aucun markup touché. */
.ifh-craving .ifh-medallion{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
z-index:0!important;pointer-events:none;overflow:hidden}
.ifh-craving .ifh-medallion video{
width:100%!important;height:100%!important;object-fit:cover!important;display:block;
opacity:.82;filter:saturate(1.05) contrast(1.03)}
.ifh-craving .ifh-media{z-index:-1}
.ifh-craving .ifh-medallion::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,6,4,.42),rgba(8,6,4,.18) 45%,rgba(8,6,4,.78))}
.ifh-craving .ifh-stage>*:not(.ifh-medallion):not(.ifh-media){position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
.ifh-craving .ifh-medallion video{opacity:.6}
}
/* ── 9. DEUX DÉFAUTS TROUVÉS AU CONTRÔLE DESKTOP (48.165) ──
(a) le h1 du hero mesurait opacity 0.001 sur desktop : une entrée en cascade non déclenchée
laissait le TITRE PRINCIPAL invisible. Le contenu prime toujours sur l'animation.
(b) le médaillon vidéo était borné par .ifh-stage (430px) au lieu de couvrir la section. */
.ifh-craving h1,.ifh-craving .ifh-stage h1,.ifh-craving [class*="title"]{
opacity:1!important;visibility:visible!important;transform:none!important}
.ifh-craving{position:relative!important}
/* 48.165 corrige : le raccourci inset ecrasait left/top, la translate decalait la
video d'un demi ecran et height:100% se resolvait en auto contre un parent en
min-height. Geometrie rendue en longhands, sans raccourci ni pourcentage. */
.ifh-craving>.ifh-wrap>.ifh-stage>.ifh-medallion,
.ifh-craving .ifh-medallion{
position:absolute!important;
top:0!important;right:0!important;bottom:0!important;left:0!important;
transform:none!important;
width:auto!important;height:auto!important;max-width:none!important;
margin:0!important}
/* ── 10. Le h1 du hero restait à 0.001 : une ANIMATION bat un !important sur la même
propriété, et les entrées .ifu-in / .ifz-c du hero n'étaient jamais révélées sur desktop. */
.ifh-craving .ifu-in,.ifh-craving .ifz-c,.ifh-craving .ifz-h,.ifh-craving .ifs-el,
.ifh-craving h1,.ifh-craving h1 *{
opacity:1!important;visibility:visible!important;transform:none!important;
animation:none!important;transition:none!important;clip-path:none!important}
/* ── 11. LE h1 N'ÉTAIT PAS DANS LE HERO ── mesure : `document.querySelector('h1')` renvoie
`.section__title.reveal.if27-reveal.ifm-split-in` dont le parent est `.ifh-r1.ifc` = la
VITRINE best-sellers (h1 reporté lors du remplacement 48.144). Il restait à opacity .001
car l'animation héritée `if27Rise` n'était jamais révélée sur desktop. Le titre principal
de la page ne doit JAMAIS dépendre d'une animation pour être visible. */
.ifc h1,.ifc h1 *,.ifc .section__title,.ifc .if27-reveal,.ifc .ifm-split-in,.ifc .reveal{
opacity:1!important;visibility:visible!important;transform:none!important;
animation:none!important;clip-path:none!important;filter:none!important}
/* ===== if-alive-v11558.css ===== */
/* if-alive-v11558.css · Instafood · « Rien ne bouge » — réponse structurelle.
Constat : toutes nos animations dépendaient du JS (classes posées par IntersectionObserver).
Quand un seul garde-fou s'active (reduced-motion, if-lite, JS lent, observateur non déclenché),
TOUT redevient statique — c'est ce que voyait le fondateur.
Ici : animations en CSS NATIF pilotées par le défilement (`animation-timeline: view()`),
donc indépendantes de tout JavaScript, plus un fond vivant en keyframes.
Chargé en fin de bundle. */
/* ══ 1. PHOTOS PRODUITS VIVANTES (partout : vitrine, posters, cartes, médias) ══ */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
/* NOTE 48.159 : les images du rail NE peuvent PAS utiliser view() — `animation-timeline:view()`
se rattache au SCROLLER LE PLUS PROCHE, ici le rail horizontal, jamais au defilement de la
page : la photo restait donc figee a mi-course (mesure navigateur : matrix(1.05) constant).
Elles recoivent une respiration continue plus bas. */
.if-poster .ifp-media img,
.product-card img,
.ifu-card-media img,
main section img.ifz-media{
animation: ifaZoom linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
will-change: transform;
}
@keyframes ifaZoom{
from{transform:scale(1.22) translate3d(0,26px,0)}
to {transform:scale(1.00) translate3d(0,-26px,0)}
}
}
}
/* Repli universel (navigateurs sans timelines) : respiration lente et continue. */
/* Respiration continue : pour les images des rails horizontaux (toujours) et pour tous les
navigateurs sans timelines de defilement (repli). Independante de tout scroller. */
@media (prefers-reduced-motion: no-preference){
.ifc-media img,.ifu-card-media img{animation: ifaBreathe 4.5s ease-in-out infinite alternate}
}
@supports not (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.if-poster .ifp-media img,.product-card img{animation: ifaBreathe 6s ease-in-out infinite alternate}
}
}
@keyframes ifaBreathe{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.16) rotate(.6deg)}}
/* Survol et carte active : on agit sur le CADRE, jamais sur l'image — un transform !important
sur l'image ECRASAIT l'animation ifaZoom et figeait toutes les photos (bug 48.157). */
.ifc-card.ifc-on .ifc-media,.product-card:hover .ifc-media{
transform:scale(1.03);transition:transform .8s cubic-bezier(.22,1,.36,1)}
/* ══ 2. FOND VIVANT (le « fond en arrière qui bouge ») ══
Deux nappes dorées très diffuses qui dérivent lentement derrière le contenu. Aucune image,
aucun coût réseau, aucun JS. Sous le contenu (z-index négatif), jamais sur le hero. */
@media (prefers-reduced-motion: no-preference){
main .ifh-r1::before,main .ifh-r2::before,main .ifg-nu::before{
content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
background:
radial-gradient(40% 55% at 20% 30%,rgba(245,166,35,.42),transparent 60%),
radial-gradient(35% 50% at 80% 70%,rgba(214,177,88,.34),transparent 60%);
filter:blur(6px);
animation:ifaDrift 12s ease-in-out infinite alternate}
@keyframes ifaDrift{
from{transform:translate3d(-9%,-5%,0) scale(1)}
to {transform:translate3d(10%,6%,0) scale(1.3)}
}
main .ifh-r1,main .ifh-r2,main .ifg-nu{position:relative;isolation:isolate}
}
/* ══ 3. GRAIN ANIMÉ TRÈS LÉGER sur les sections sombres (texture vivante) ══ */
@media (prefers-reduced-motion: no-preference) and (min-width:761px){
main .ifh-r1::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:3px 3px;
animation:ifaGrain 6s steps(6) infinite}
@keyframes ifaGrain{
0%{background-position:0 0} 33%{background-position:1px 2px}
66%{background-position:2px 1px} 100%{background-position:0 0}
}
}
/* ══ 4. ENTRÉE DES SECTIONS EN CASCADE, SANS JAVASCRIPT ══ */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
main .ifc-card,main .if-step,main .ifg-nu>h3{
animation: ifaRise linear both;
animation-timeline: view();
animation-range: entry 0% entry 45%;
}
@keyframes ifaRise{
from{opacity:0;transform:translate3d(0,38px,0) scale(.94)}
to {opacity:1;transform:none}
}
}
}
/* ══ 5. Mouvement réduit : plus aucun déplacement, mais le contenu reste lisible ══ */
@media (prefers-reduced-motion: reduce){
.ifc-media img,.if-poster .ifp-media img,.product-card img,.ifu-card-media img,
main .ifc-card,main .if-step,main .ifg-nu>h3{animation:none!important;transform:none!important;opacity:1!important}
main .ifh-r1::before,main .ifh-r2::before,main .ifg-nu::before,main .ifh-r1::after{animation:none!important}
}
/* ── ANTI-COLLISION : la barre de commande ne recouvre jamais les CTA du hero ── */
html.ifh-cta-vue .if27-orderbar,
html.if27.ifh-cta-vue .if27-orderbar{
opacity:0!important;visibility:hidden!important;
transform:translateY(140%)!important;pointer-events:none!important}
/* ══ CORRECTIF FINAL 48.169 : une seconde translate subsistait ailleurs et decalait la video
d'un demi ecran (mesure : x=-195 sur 390px, x=-720 sur 1440px). Regle la plus specifique
du dernier fichier du bundle : elle tranche. ══ */
html body .ifh-craving .ifh-medallion,
html body .ifh-craving .ifh-stage .ifh-medallion{
position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
transform:none!important;translate:none!important;margin:0!important;
width:auto!important;height:auto!important;max-width:none!important}
html body .ifh-craving .ifh-medallion>video{
width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important}
/* ══ ÉTAPE 1 · LEVIER PRIX : le Tasty Crousty à 45 MAD est notre argument de conversion le plus
fort face aux offres concurrentes à 75. On le met en avant VISUELLEMENT, sans nommer personne
et sans superlatif : le prix de la première carte de la vitrine passe en or plein. ══ */
.ifc-rail .ifc-card:first-child .ifc-price{
background:linear-gradient(180deg,rgba(245,201,107,.16),rgba(214,165,58,.10));
border:1px solid rgba(245,201,107,.45);border-radius:14px;padding:8px 14px}
.ifc-rail .ifc-card:first-child .ifc-price b{
color:#f5c96b;text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 26px rgba(245,166,35,.5)}
.ifc-rail .ifc-card:first-child .ifc-price i{color:#f7efe3;font-weight:700}
/* == V11.48.177 - SON DU HERO ==============================================
Le medaillon plein cadre porte pointer-events:none (les clics traversent
le fond video vers les CTA). pointer-events est une propriete HERITEE :
le bouton son ajoute dans le medaillon heritait none - visible mais mort.
1) Le bouton redevient recepteur direct du clic.
2) Un seul bouton son sur le hero : le generique .if-sound (coin bas du
medaillon) est masque ici - regle anti-doublon 48.111. */
.ifh-craving .ifh-medallion .ifh-sound{pointer-events:auto}
.ifh-craving .ifh-medallion .if-sound{display:none!important}
/* == V11.48.178 - VISUELS DES ETAPES : CANAL SOUVERAIN =====================
Retro-ingenierie prouvee (10/08) : le pilote v11552 pose bien opacity inline
1/0/0/0/0, mais scroll3d avait tague ces images `ifs-el` et son garde-fou
html.ifs-on.ifs-force .ifs-el{opacity:1!important} ecrasait tout ->
5 images visibles empilees, la derniere (cat-snacking) couvrait le reste.
Doctrine cascade (MDN) : les declarations !important d'auteur battent
TOUTES les animations ; a importance et specificite egales, la DERNIERE
declaration gagne -> ce module vit en FIN de bundle, specificite (0,3,1)
alignee sur celle du garde-fou. Le JS if-steps2 retire en plus les classes
scroll3d de ces images : double verrou. */
.if-steps .ifm-stk-visual img{
opacity:0!important;
transform:scale(1.14)!important;
transition:opacity .55s ease,transform 1s cubic-bezier(.16,1,.3,1)!important;
animation:none!important}
.if-steps .ifm-stk-visual img.actif{
opacity:1!important;
transform:scale(1)!important}
/* Filet anti-ecran-vide : si aucun pilote ne pose 'actif', la 1re image reste visible */
.if-steps .ifm-stk-visual:not(:has(img.actif)) img:first-child{
opacity:1!important;transform:scale(1)!important}
/* if-foody-v1149410.css */
/* INSTAFOOD V11.49.400 : Foody, assistant support scripte. Palette fixe, AA verifie. */
:root{
--iff-ink:#171310;
--iff-cream:#fbf8f2;
--iff-white:#ffffff;
--iff-gold:#ffb100;
--iff-gold-grad:linear-gradient(160deg,#ffd34d 0%,#ffb100 52%,#e69500 100%);
--iff-line:#e4dccc;
--iff-muted:#5c534b;
--iff-ok:#1d7a3d;
--iff-off:#b3261e;
--iff-r:16px;
--iff-pill:999px;
--iff-sh:0 10px 30px rgba(23,19,16,.18);
--iff-sh-soft:0 4px 14px rgba(23,19,16,.10)
}
.iff-launcher,.iff-launcher *,.iff-panel,.iff-panel *{box-sizing:border-box}
/* Lanceur empile au dessus de la pastille WhatsApp, jamais a sa place. */
.iff-launcher{
position:fixed;
inset-inline-end:18px;
bottom:calc(18px + 64px + 12px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px));
z-index:2147483200;
width:56px;
height:56px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:var(--iff-pill);
background:var(--iff-gold-grad);
color:var(--iff-ink);
box-shadow:var(--iff-sh);
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease
}
.iff-launcher:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,19,16,.26)}
.iff-launcher:focus-visible{outline:3px solid var(--iff-ink);outline-offset:3px}
.iff-launcher .iff-ico{width:30px;height:30px}
.iff-ico{display:block;fill:currentColor}
.iff-launcher .iff-ico path:nth-child(2){fill:var(--iff-gold)}
.iff-badge{
position:absolute;
top:-2px;
inset-inline-end:-2px;
min-width:20px;
height:20px;
padding:0 5px;
display:grid;
place-items:center;
border-radius:var(--iff-pill);
background:var(--iff-ink);
color:var(--iff-cream);
font-size:12px;
font-weight:700;
line-height:1
}
/* Coin deja occupe par une autre action flottante : Foody monte d'un cran. */
html:has(.wa-float) .iff-launcher{bottom:calc(18px + 64px + 12px + 48px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px))}
@media (min-width:901px){
html:has(.wa-float) .iff-launcher{bottom:calc(18px + 64px + 12px + 76px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px))}
}
/* Variante solo : Foody prend la place de la pastille, qui est masquee.
La seconde regle passe devant celle du gabarit v3 (meme poids, portee plus longue). */
html.if-foody-solo .if-home-whatsapp-float,html.if-foody-solo .wa-float{display:none!important}
html.if-foody-solo body .if-home-whatsapp-float,html.if-foody-solo body .wa-float{display:none!important}
html.if-foody-solo .iff-launcher{bottom:calc(18px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px))}
html.if-foody-solo .iff-panel{bottom:calc(18px + 56px + 12px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px))}
/* En solo, Foody prend le coin : le bouton de preferences de consentement passe du cote
oppose, comme le fait deja la feuille d actions globales sur le reste du site. */
html.if-foody-solo #if-consent-pref{left:auto!important;right:auto!important;inset-inline-start:14px!important;inset-inline-end:auto!important}
html[dir=rtl] .iff-launcher{inset-inline-end:14px}
/* Panneau */
.iff-panel{
position:fixed;
inset-inline-end:18px;
bottom:calc(18px + 64px + 12px + 56px + 12px + var(--if-global-bottom,0px) + var(--iff-stack,0px) + env(safe-area-inset-bottom,0px));
z-index:2147483210;
display:flex;
flex-direction:column;
width:380px;
max-width:calc(100vw - 24px);
height:min(70vh,640px);
overflow:hidden;
border:1px solid var(--iff-line);
border-radius:var(--iff-r);
background:var(--iff-cream);
color:var(--iff-ink);
box-shadow:var(--iff-sh);
font-family:inherit;
font-size:15px;
line-height:1.45
}
html[dir=rtl] .iff-panel{inset-inline-end:14px}
.iff-panel[hidden],.iff-badge[hidden]{display:none!important}
.iff-head{
display:grid;
grid-template-columns:1fr auto;
gap:6px 10px;
padding:12px 14px;
background:var(--iff-ink);
color:var(--iff-cream)
}
.iff-id{min-width:0}
.iff-name{margin:0;font-size:16px;font-weight:800;letter-spacing:.01em}
.iff-sub{margin:2px 0 0;font-size:13px;color:#e8e0d2}
.iff-head__actions{display:flex;align-items:flex-start;gap:6px}
.iff-wa,.iff-close{
width:48px;
height:48px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(251,248,242,.28);
border-radius:var(--iff-pill);
background:transparent;
color:var(--iff-cream);
font-size:18px;
line-height:1;
cursor:pointer;
text-decoration:none
}
.iff-wa .iff-ico{width:22px;height:22px}
.iff-wa:hover,.iff-close:hover{background:rgba(251,248,242,.12)}
.iff-wa:focus-visible,.iff-close:focus-visible{outline:3px solid var(--iff-gold);outline-offset:2px}
.iff-state{
grid-column:1/-1;
display:flex;
align-items:center;
gap:8px;
margin:0;
font-size:13px;
color:#f2ead9
}
.iff-dot{width:10px;height:10px;border-radius:var(--iff-pill);background:#8d8579;flex:none}
.iff-dot[data-state=open]{background:#4ade80}
.iff-dot[data-state=closed]{background:#ff8a7a}
.iff-state__txt{min-width:0}
/* Fil de conversation */
.iff-log{
flex:1 1 auto;
overflow-y:auto;
overflow-x:hidden;
padding:14px;
display:flex;
flex-direction:column;
gap:10px;
overscroll-behavior:contain
}
.iff-msg{display:flex}
.iff-msg--bot{justify-content:flex-start}
.iff-msg--user{justify-content:flex-end}
.iff-bubble{
max-width:86%;
padding:10px 13px;
border-radius:var(--iff-r);
background:var(--iff-white);
border:1px solid var(--iff-line);
box-shadow:var(--iff-sh-soft);
overflow-wrap:break-word;
word-break:break-word
}
.iff-msg--user .iff-bubble{background:var(--iff-ink);color:var(--iff-cream);border-color:var(--iff-ink)}
.iff-a{color:#8a5a00;text-decoration:underline;text-underline-offset:2px}
.iff-a:hover{color:#6d4700}
.iff-actions{display:flex}
.iff-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 18px;
border:1px solid var(--iff-ink);
border-radius:var(--iff-pill);
background:var(--iff-white);
color:var(--iff-ink);
font-size:15px;
font-weight:700;
text-decoration:none;
cursor:pointer
}
.iff-btn:hover{background:#f1e9da}
.iff-btn--main{background:var(--iff-gold-grad);border-color:#c98200;width:100%}
.iff-btn:focus-visible,.iff-chip:focus-visible{outline:3px solid var(--iff-ink);outline-offset:2px}
/* Suivi de commande */
.iff-track{
display:flex;
flex-direction:column;
gap:8px;
padding:12px;
border:1px solid var(--iff-line);
border-radius:var(--iff-r);
background:var(--iff-white)
}
.iff-track__intro{margin:0;font-size:14px;color:var(--iff-muted)}
.iff-field{display:flex;flex-direction:column;gap:4px;margin:0}
.iff-field__lab{font-size:13px;font-weight:700}
.iff-field__in,.iff-input{
min-height:48px;
padding:0 12px;
border:1px solid var(--iff-line);
border-radius:12px;
background:var(--iff-white);
color:var(--iff-ink);
font-family:inherit;
font-size:16px;
color-scheme:light
}
.iff-field__in:focus-visible,.iff-input:focus-visible{outline:3px solid var(--iff-gold);outline-offset:1px}
.iff-track__out{margin:0;font-size:14px}
.iff-track__out--err{color:#8f1d16;font-weight:700}
.iff-timeline{
padding:12px;
border:1px solid var(--iff-line);
border-radius:var(--iff-r);
background:var(--iff-white)
}
.iff-timeline__head{margin:0 0 8px;font-weight:800}
.iff-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.iff-step{display:flex;align-items:center;gap:8px;font-size:14px}
.iff-step::before{content:"";width:10px;height:10px;border-radius:var(--iff-pill);background:var(--iff-gold);flex:none}
.iff-step__time{color:var(--iff-muted)}
.iff-step--driver::before{background:var(--iff-ink)}
/* Puces de reponses rapides */
.iff-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:0 14px 10px;
max-height:170px;
overflow-y:auto
}
.iff-chip{
min-height:48px;
padding:0 14px;
border:1px solid var(--iff-line);
border-radius:var(--iff-pill);
background:var(--iff-white);
color:var(--iff-ink);
font-family:inherit;
font-size:15px;
font-weight:600;
cursor:pointer
}
.iff-chip:hover{background:#f1e9da;border-color:#c9bfa8}
.iff-chip--cart{border-color:#c98200;background:#fff6e0}
/* Saisie, consentement, pied */
.iff-form{display:flex;gap:8px;padding:0 14px}
.iff-input{flex:1 1 auto;min-width:0}
.iff-send{
width:48px;
height:48px;
flex:none;
display:grid;
place-items:center;
padding:0;
border:1px solid #c98200;
border-radius:12px;
background:var(--iff-gold-grad);
color:var(--iff-ink);
cursor:pointer
}
.iff-send .iff-ico{width:20px;height:20px}
.iff-send:focus-visible{outline:3px solid var(--iff-ink);outline-offset:2px}
.iff-consent,.iff-foot{margin:0;padding:8px 14px 0;font-size:12px;color:var(--iff-muted)}
.iff-foot{padding:2px 14px 12px;font-weight:700}
/* Plein ecran sur mobile */
@media (max-width:640px){
.iff-panel{
inset:0;
width:100%;
max-width:none;
height:100%;
border:0;
border-radius:0
}
html[dir=rtl] .iff-panel{inset:0}
html.iff-open,html.iff-open body{overflow:hidden}
.iff-bubble{max-width:92%}
/* Place laissee au bouton de preferences de consentement, toujours au dessus.
En solo il passe du cote depart, la reserve suit. */
.iff-consent,.iff-foot{padding-inline-end:64px}
html.if-foody-solo .iff-consent,html.if-foody-solo .iff-foot{padding-inline:64px 14px}
}
@media (prefers-reduced-motion:reduce){
.iff-launcher,.iff-launcher:hover{transition:none;transform:none}
.iff-panel{animation:none}
}
/* Bandeau operation FIRST 100 (#if100-bar) present : le bouton cookies et le lanceur montent au-dessus (hauteur mesuree 134px mobile, 72px bureau, plus marge). */
html:has(#if100-bar) #if-consent-pref{bottom:calc(14px + 152px + var(--if-store-banner-height,0px))!important}
@media (min-width:901px){
html:has(#if100-bar) #if-consent-pref{bottom:calc(14px + 96px + var(--if-store-banner-height,0px))!important}
}
/* ============ V11.49.410 : cartes produit et upsell du mode vendeur ============
Meme charte que le panneau : encre sur creme, or reserve aux actions principales.
Cibles tactiles 48 px, direction heritee du panneau (RTL sur /ar/). */
.iff-cards{display:flex;flex-direction:column;gap:10px}
.iff-card{
display:flex;
gap:10px;
padding:10px;
border:1px solid var(--iff-line);
border-radius:var(--iff-r);
background:var(--iff-white);
box-shadow:var(--iff-sh-soft)
}
.iff-card__img{
width:64px;
height:64px;
flex:none;
border-radius:12px;
object-fit:cover;
background:#f1e9da
}
.iff-card__body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.iff-card__name{margin:0;font-size:15px;font-weight:800;line-height:1.25}
.iff-card__price{margin:0;font-size:15px;font-weight:800;color:#8a5a00}
.iff-card__desc{margin:0;font-size:13px;color:var(--iff-muted);overflow-wrap:break-word}
.iff-card__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.iff-cbtn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 16px;
border:1px solid var(--iff-ink);
border-radius:var(--iff-pill);
background:var(--iff-white);
color:var(--iff-ink);
font-family:inherit;
font-size:14px;
font-weight:700;
line-height:1.2;
text-align:center;
text-decoration:none;
cursor:pointer
}
.iff-cbtn:hover{background:#f1e9da}
.iff-cbtn--main{background:var(--iff-gold-grad);border-color:#c98200}
.iff-cbtn--main:hover{background:var(--iff-gold-grad);border-color:#a86d00}
.iff-cbtn:focus-visible{outline:3px solid var(--iff-ink);outline-offset:2px}
/* Puce d'entree du vendeur et puce d'acceptation d'upsell. */
.iff-chip--sell{border-color:#c98200;background:#fff6e0;font-weight:700}
.iff-chip--yes{border-color:#c98200;background:var(--iff-gold-grad);font-weight:800}
/* Les cartes rendent le fil plus haut : sans cette regle la rangee de puces, simple
element flexible, se fait ecraser par le fil et les puces sont coupees en deux.
Le fil garde la compression, il defile deja. Verifie en capture 1280 et 390. */
.iff-chips{flex:0 0 auto}
.iff-log{min-height:0}
/* if-a08b-v1149405.css */
/* if-a08b-v1149405.css : if-a08-v1149397.css sans le bloc de compaction des heros mobiles (reserve aux 9 pages validees) */
/* Instafood Rabat - correctif additif lot A08 (V397) - V11.49.397
Regles ciblees par id/classe uniquement. Aucun !important global : les 2 usages ci-dessous
contrent chacun un !important deja present dans un fichier existant, sur la meme propriete,
sur le meme selecteur (voir RAPPORT_A08.md pour la preuve avant/apres).
Ne modifie aucun asset existant. A charger APRES toutes les feuilles actuelles (nouveau
ou