/* ===== 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}