/* ============================================================
   FLF OS · couche design maison (cinéma) · à lier sur toutes les pages
   <link rel="stylesheet" href="/flf-os.css"> + <script src="/flf-os.js" defer></script>
   Améliore sans casser : grain, révélations au scroll, parallaxe hero, accents corail.
   Progressive enhancement : sans JS, tout reste visible (SEO safe).
   ============================================================ */
:root{ --flf-coral:#FF6B52; --flf-io:cubic-bezier(.16,1,.3,1); }

/* Grain cinéma · statique = coût perf nul */
.flf-grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.flf-vignette{position:fixed;inset:0;z-index:8999;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.7)}

/* Révélations au scroll · la classe .flf-rv est posée par flf-os.js (donc fallback visible sans JS) */
.flf-rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--flf-io),transform .85s var(--flf-io);will-change:opacity,transform}
.flf-rv.in{opacity:1;transform:none;will-change:auto}
.flf-rv-2{transition-delay:.07s}.flf-rv-3{transition-delay:.14s}.flf-rv-4{transition-delay:.21s}

/* Accents maison · corail par petites touches */
.hero-eyebrow,.section-eyebrow{color:var(--flf-coral)}
.service-num{color:var(--flf-coral)}
.hero-bg{will-change:transform}

/* Hero · titre un cran plus monumental */
.hero h1{letter-spacing:-.01em}

/* Cartes services · relief + trait corail qui se trace au survol */
.service-card{position:relative;transition:background .35s,transform .4s var(--flf-io)}
.service-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--flf-coral);transition:width .5s var(--flf-io)}
.service-card:hover{transform:translateY(-3px)}
.service-card:hover::after{width:100%}

/* FAQ · accent au survol */
.faq-item{transition:border-color .35s}
.faq-item:hover{border-color:rgba(255,107,82,.4)}

/* CTA · bouton qui respire */
.hero-cta,.cta-btn{transition:transform .3s var(--flf-io),box-shadow .3s}
.hero-cta:hover,.cta-btn:hover{box-shadow:0 14px 40px rgba(255,107,82,.25)}

@media(prefers-reduced-motion:reduce){.flf-rv{opacity:1;transform:none;transition:none}.flf-grain{display:none}}

/* Hero · vidéo showreel (injectée par flf-os.js, desktop) */
.hero{position:relative}
.flf-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.34) contrast(1.03);z-index:1;will-change:transform}
.flf-hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.45) 100%)}
.hero-content{position:relative;z-index:3}

/* Réalisations · projets de la home (injectée) */
.flf-work{padding:80px 48px;border-top:1px solid rgba(255,255,255,.06)}
.flf-work-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--flf-coral);margin-bottom:14px}
.flf-work h2{font-family:'Druk Wide',Arial Black,sans-serif;font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;margin-bottom:36px;line-height:1.1}
.flf-work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.fw-card{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;background:#0c0c0c}
.fw-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.72);transition:transform .6s var(--flf-io),filter .4s}
.fw-card:hover img{transform:scale(1.06);filter:none}
.fw-over{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)}
.fw-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .4s var(--flf-io),border-color .4s,background .4s}
.fw-card:hover .fw-play{transform:translate(-50%,-50%) scale(1.12);border-color:#fff;background:rgba(255,107,82,.28)}
.fw-play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.fw-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.fw-name{font-family:'Druk Wide',Arial Black,sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:-.01em}
.fw-cat{font-size:11px;color:rgba(255,255,255,.55);margin-top:4px}

/* Lightbox */
.flf-lb{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:24px}
.flf-lb.open{display:flex}
.flf-lb-box{position:relative;width:100%;max-width:1040px;aspect-ratio:16/9}
.flf-lb-box iframe{width:100%;height:100%;border:0;border-radius:8px}
.flf-lb-x{position:absolute;top:-42px;right:0;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}
@media(max-width:768px){.flf-work{padding-left:24px;padding-right:24px}}