/*
 * Le F2 — styles propres à la page Accueil uniquement (hero plein écran,
 * vidéo de présentation, carrousel "Nos plats du moment"). Séparé de
 * site.css (styles globaux/partagés) pour être plus facile à retrouver et
 * modifier sans naviguer dans tout le fichier commun.
 */

/* Hero */
.f2-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--f2-cream);overflow:hidden;}
.f2-hero-bg{position:absolute;left:0;right:0;top:-15%;height:130%;overflow:hidden;z-index:0;will-change:transform;}
.f2-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);animation:f2HeroZoom 20s ease-in-out infinite alternate;}
/* Même chose, mais pour un bloc "Image" natif de l'éditeur (structure
   <figure class="f2-hero-bg-img"><img></figure> au lieu d'un <div> fait
   main) — utilisé par la page d'accueil éditable en blocs. */
.f2-hero-bg-img{position:absolute;left:0;right:0;top:-15%;height:130%;width:100%;margin:0;overflow:hidden;z-index:0;will-change:transform;}
.f2-hero-bg-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);animation:f2HeroZoom 20s ease-in-out infinite alternate;}
.f2-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(15,26,20,0) 30%, rgba(15,26,20,.8) 100%);}
@keyframes f2HeroZoom{from{transform:scale(1);}to{transform:scale(1.08);}}
.f2-hero-content{position:relative;z-index:2;padding:4rem 1.5rem 5rem;max-width:1280px;margin:0 auto;width:100%;animation:f2HeroIn 1s ease .1s both;}
@keyframes f2HeroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.f2-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:14ch;text-wrap:balance;}
.f2-hero p{margin-top:1.1rem;font-size:1.15rem;max-width:38ch;font-weight:300;}
.f2-hero-ctas{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;}

.f2-hero-overlap-wrap{position:relative;z-index:5;margin-top:-6rem;padding:0 1.5rem;}
.f2-hero-overlap{
  max-width:1280px;margin:0 auto;background:var(--f2-surface);color:var(--f2-text);
  display:flex;align-items:center;gap:1.5rem;padding:1.75rem 2rem;border-radius:var(--f2-radius);
  box-shadow:0 24px 50px rgba(15,26,20,.28);
}
.f2-hero-overlap img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;flex-shrink:0;}
.f2-hero-overlap p{font-size:1.02rem;max-width:60ch;}
@media (max-width:640px){
  .f2-hero-overlap{flex-direction:column;text-align:center;padding:1.5rem;}
  .f2-hero-overlap-wrap{margin-top:-4rem;}
}
/* Vidéo de présentation — ne charge rien tant qu'on n'a pas cliqué (poids/temps de chargement) */
.f2-video{position:relative;max-width:960px;margin:2.5rem auto 0;border-radius:var(--f2-radius);overflow:hidden;aspect-ratio:16/9;background:var(--f2-green-deep);}
.f2-video video{width:100%;height:100%;object-fit:cover;}
.f2-video-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none;
}
.f2-video-play img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:filter .2s ease;}
.f2-video-play:hover img,.f2-video-play:focus-visible img{filter:brightness(.45);}
.f2-video-play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:4.5rem;height:4.5rem;border-radius:50%;background:var(--f2-gold);color:var(--f2-green-deep);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;padding-left:.25rem;
}

@media (prefers-reduced-motion:reduce){
  .f2-hero-bg{transform:none !important;}
  .f2-hero-bg img{animation:none;}
  .f2-hero-bg-img{transform:none !important;}
  .f2-hero-bg-img img{animation:none;}
  .f2-hero-content{animation:none;}
}

/* Carrousel "Nos plats du moment" — pleine largeur d'écran (hors .f2-wrap),
   défilement automatique en boucle continue (même mécanisme que .f2-marquee
   pour les nav bars), s'arrête et devient un scroll tactile normal dès que
   le visiteur y touche. Voir f2Marquee() dans site.js. */
.f2-dish-carousel{overflow:hidden;margin-top:3rem;}
.f2-dish-carousel .f2-marquee-track{gap:1.75rem;padding:0 1.5rem;animation-duration:22s;}
.f2-dish-carousel.f2-marquee-manual{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.f2-dish-carousel.f2-marquee-manual::-webkit-scrollbar{display:none;}
.f2-dish-card{flex:0 0 320px;background:var(--f2-green-mid);border-radius:var(--f2-radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
.f2-dish-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.3);}
.f2-dish-card img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.f2-dish-card .f2-pad{padding:1.2rem 1.3rem 1.5rem;}
.f2-dish-card h3{font-size:1.3rem;color:var(--f2-cream);}
.f2-dish-card p{font-size:.92rem;opacity:.8;margin-top:.4rem;}
@media (max-width:600px){.f2-dish-card{flex-basis:78vw;}}
.f2-dish-price{color:var(--f2-gold);font-weight:500;margin-top:.7rem;display:block;}

/* Raccourcis rapides mobile (accueil, dans le hero sous les CTA) — pastilles
   translucides sur fond sombre, dans le même esprit que le hero, plutôt que
   la barre blanche opaque d'origine pensée pour une section claire. */
.f2-quicklinks{
  display:none;gap:.6rem;overflow-x:auto;padding:1.1rem 0 0;margin-top:.4rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.f2-quicklinks::-webkit-scrollbar{display:none;}
.f2-quicklinks a{
  flex:0 0 auto;white-space:nowrap;padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid rgba(230,201,138,.5);color:var(--f2-cream);font-size:.82rem;
  font-weight:500;text-decoration:none;background:rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
}
.f2-quicklinks a:hover,.f2-quicklinks a:focus-visible{background:var(--f2-gold);border-color:var(--f2-gold);color:var(--f2-green-deep);}
@media (max-width:720px){.f2-quicklinks{display:flex;}}