/*
 * Le F2 — feuille de style unique du site (site statique, HTML pur).
 * Variables globales sur :root, composants préfixés "f2-" par habitude
 * de code propre (pas de collision possible ici, tout le site est à nous).
 */

:root{
  --f2-green-deep:#0f1a14;
  --f2-green-mid:#1e3d33;
  --f2-gold:#c9a55c;
  --f2-gold-dark:#8a6d34; /* accessible sur fond clair */
  --f2-cream:#fdfaf3;
  --f2-ink:#141814;
  --f2-radius:2px;
  /* Jetons "clair/sombre" — utilisés UNIQUEMENT pour les zones qui étaient
     déjà claires (fond crème + texte encre) : fond de page, cartes,
     formulaires. Les zones déjà sombres du site (header, hero, .f2-carte,
     footer...) utilisent --f2-cream/--f2-ink directement comme COULEUR DE
     TEXTE sur fond sombre — ces deux variables ne changent donc jamais ici,
     pour ne pas transformer du texte clair sur fond sombre en texte sombre
     sur fond sombre (invisible). Voir @media (prefers-color-scheme:dark)
     ci-dessous pour les valeurs de nuit. */
  --f2-bg:var(--f2-cream);
  --f2-text:var(--f2-ink);
  --f2-surface:#ffffff;
  --f2-surface-border:#e6e0d2;
  --f2-surface-alt:#f6f3ea;
  --f2-bg-rgb:253,250,243;
  /* "light dark" (pas "light" seul) : autorise le mode sombre du
     navigateur/OS à s'appliquer aux contrôles natifs (inputs, scrollbars)
     en cohérence avec nos propres couleurs ci-dessous — un simple "light"
     forçait tout le site en clair même téléphone réglé en sombre. */
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --f2-bg:#16140f;
    --f2-text:#ece6d8;
    --f2-surface:#221e17;
    --f2-surface-border:#3a3327;
    --f2-surface-alt:#2a251c;
    --f2-bg-rgb:22,20,15;
    /* Le doré foncé (pensé pour du texte sur fond clair) devient illisible
       sur un fond sombre : on l'éclaircit uniquement la nuit. */
    --f2-gold-dark:#d9b46a;
  }
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Taille de police globale relevée (16px → 18px, +12,5%) : toutes les
   tailles du site sont en rem, donc cette seule ligne agrandit tout le
   texte de façon proportionnelle — la hiérarchie H1 > H2 > H3 etc. et tous
   les rapports de taille entre éléments restent exactement les mêmes,
   juste mis à l'échelle. S'applique identiquement sur PC et téléphone. */
html{font-size:18px;scroll-behavior:smooth;}
/* Filet de sécurité anti-débordement horizontal : un élément mal contenu
   (position:fixed, largeur fixe...) ne doit jamais faire apparaître de
   bande blanche/scroll horizontal sur mobile, quel que soit le niveau de
   zoom du visiteur. */
/* overflow-x:clip (pas "hidden") : "hidden" transforme html/body en conteneur
   de scroll, ce qui casse position:sticky sur .f2-header (le header défilait
   avec la page au lieu de rester collé en haut). "clip" bloque le débordement
   horizontal sans créer ce conteneur de scroll. */
html,body{overflow-x:clip;max-width:100%;}
body{
  font-family:'Jost',sans-serif;
  background:var(--f2-bg);
  color:var(--f2-text);
  line-height:1.6;
  font-weight:300;
}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.15;}
a{color:inherit;text-decoration:none;}
/* Liens noyés dans un paragraphe/liste/texte de contenu (FAQ, mentions
   légales, pied de texte...) : soulignés + légèrement plus gras pour se
   distinguer clairement du texte autour — sans quoi ils sont invisibles
   (couleur héritée). Exclus volontairement : boutons (.f2-btn), badges
   (.f2-badge, ex. labels Toques Blanches Lyonnaises) et .f2-tel (déjà son
   propre soulignement), qui ont chacun leur propre indice visuel. Portée
   à "main" uniquement : la nav du header/pied de page et les raccourcis
   rapides gardent leur style de nav, pas de soulignement de liste. */
main p a:not(.f2-btn):not(.f2-badge):not(.f2-tel),
main li a:not(.f2-btn):not(.f2-badge):not(.f2-tel),
main summary a:not(.f2-btn):not(.f2-badge):not(.f2-tel),
main td a:not(.f2-btn):not(.f2-badge):not(.f2-tel){
  text-decoration:underline;text-underline-offset:3px;font-weight:500;
}
/* Par défaut, toute image du site remplit son cadre sans jamais être
   déformée : les attributs width/height du HTML fixent le ratio du cadre,
   et object-fit:cover recadre/repositionne l'image dedans (jamais étirée).
   Un cadrage précis (visage, plat...) peut se régler via object-position
   sur l'image concernée. */
img{max-width:100%;display:block;object-fit:cover;}
a:focus-visible,button:focus-visible{outline:2px solid var(--f2-gold);outline-offset:3px;}

.f2-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.f2-skip-link{
  position:absolute;left:-999px;top:0;background:var(--f2-gold);color:var(--f2-green-deep);
  padding:.75rem 1.25rem;z-index:200;border-radius:var(--f2-radius);
}
.f2-skip-link:focus{left:1rem;top:1rem;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* Header / navigation */
.f2-header{position:sticky;top:0;z-index:100;background:rgba(15,26,20,.97);color:var(--f2-cream);}
.f2-nav-wrap{max-width:1280px;margin:0 auto;padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.f2-logo{display:flex;align-items:center;}
.f2-logo img{display:block;width:2.5rem;height:2.5rem;object-fit:contain;border-radius:6px;}
.f2-header nav ul{list-style:none;display:flex;gap:1.6rem;align-items:center;font-size:.92rem;letter-spacing:.03em;}
.f2-header nav a{position:relative;padding:.3rem 0;}
.f2-header nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--f2-gold);transition:width .25s ease;}
.f2-header nav a:hover::after,.f2-header nav a:focus::after,.f2-header nav a[aria-current="page"]::after{width:100%;}
.f2-header nav a[aria-current="page"]{color:var(--f2-gold);}
.f2-cta-resa{background:var(--f2-gold);color:var(--f2-green-deep);padding:.55rem 1.2rem;border-radius:var(--f2-radius);font-weight:500;}
.f2-cta-resa::after{display:none;}
.f2-burger{display:none;background:none;border:0;color:var(--f2-cream);font-size:1.6rem;z-index:3;position:relative;line-height:1;}
.f2-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1;}
.f2-nav-mobile-only{display:none;}

@media (max-width:880px){
  .f2-header nav ul{
    position:fixed;inset:0 0 0 30%;background:var(--f2-green-deep);
    flex-direction:column;justify-content:flex-start;gap:1.6rem;
    /* overflow-y:auto + padding vertical (pas justify-content:center) :
       avec 8-9 liens maintenant (Nos fournisseurs, Carte des boissons
       débloquée...), un menu centré sans défilement se fait couper en haut
       et en bas sur un écran de téléphone en portrait — trop de liens pour
       la hauteur disponible. Défilement interne propre à la place. */
    padding:5.5rem 2rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .35s ease;
    z-index:2;
  }
  .f2-header nav ul.f2-open{transform:translateX(0);}
  .f2-burger{display:block;}
  .f2-nav-mobile-only{display:list-item;}
}

/* Boutons */
/* font/cursor/background:none en plus des propriétés visuelles : .f2-btn
   s'utilise aussi bien sur des <a> (fond transparent par défaut du
   navigateur) que sur de vrais <button> (fond gris clair par défaut du
   navigateur, jamais neutralisé auparavant — cassait le contraste de
   .f2-btn-ghost sur bouton, cf. panier "+ Ajouter"). */
.f2-btn{padding:.85rem 1.6rem;border-radius:var(--f2-radius);font-weight:500;letter-spacing:.02em;display:inline-block;background:none;font:inherit;cursor:pointer;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;}
.f2-btn-primary{background:var(--f2-gold);color:var(--f2-green-deep);}
.f2-btn-ghost{background:transparent;border:1px solid var(--f2-cream);color:var(--f2-cream);}

/* Numéro masqué : icône + texte plutôt que les chiffres en clair (anti-collecte) */
.f2-tel{display:inline-flex;align-items:center;gap:.4rem;}
a.f2-tel:not(.f2-btn){border-bottom:1px solid currentColor;padding-bottom:1px;}
.f2-btn:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18);}
.f2-btn:active{transform:translateY(0);}

/* 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;}
  .f2-btn:hover{transform:none;}
}

/* Apparitions au scroll */
.f2-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.f2-reveal.f2-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .f2-reveal{opacity:1;transform:none;transition:none;} }

section{padding:5.5rem 1.5rem;}
.f2-wrap{max-width:1280px;margin:0 auto;}
.f2-eyebrow{color:var(--f2-gold-dark);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:500;}
.f2-section-title{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:.5rem;max-width:20ch;text-wrap:balance;}

/* Formulaires (Bon Cadeau, Commande traiteur...) */
.f2-form{margin-top:2rem;display:grid;gap:1.25rem;max-width:44rem;}
.f2-form-row{display:grid;gap:1.25rem;}
@media (min-width:640px){ .f2-form-row.f2-form-row-2{grid-template-columns:1fr 1fr;} }
.f2-field{display:grid;gap:.4rem;}
.f2-contact-extra-fields{display:grid;gap:1rem;}
/* [hidden] DOIT gagner sur .f2-field/.f2-contact-extra-fields (display:grid) :
   sans ce sélecteur explicite, une règle d'auteur ciblant le même élément
   (même à spécificité égale) l'emporte sur le [hidden] de la feuille de
   style du navigateur (ordre de cascade) — le champ restait affiché même
   avec l'attribut hidden bien présent (bug constaté sur "Précisez votre
   demande" / "Date souhaitée" du formulaire de contact). */
.f2-field[hidden],.f2-contact-extra-fields[hidden]{display:none;}
.f2-field label{font-size:.85rem;font-weight:500;letter-spacing:.02em;}
.f2-field input,.f2-field select,.f2-field textarea{
  font:inherit;padding:.7rem .9rem;border:1px solid #d8d0bb;border-radius:var(--f2-radius);
  background:var(--f2-surface);color:var(--f2-text);
}
.f2-field input:focus-visible,.f2-field select:focus-visible,.f2-field textarea:focus-visible{
  outline:2px solid var(--f2-gold-dark);outline-offset:1px;
}
.f2-field textarea{resize:vertical;min-height:6rem;}
.f2-form-note{font-size:.85rem;opacity:.7;margin-top:-.5rem;}
.f2-form-checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;cursor:pointer;}
.f2-form-checkbox input{margin-top:.2rem;width:16px;height:16px;accent-color:var(--f2-gold-dark);flex-shrink:0;cursor:pointer;}
.f2-form-checkbox a{text-decoration:underline;}
.f2-form-success{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--f2-radius);background:#eef4ea;color:#2f5c2f;font-size:.9rem;}
.f2-form-success[hidden]{display:none;}

/* FAQ */
.f2-faq-item{border:1px solid var(--f2-surface-border);border-radius:var(--f2-radius);padding:1rem 1.25rem;}
.f2-faq-item summary{cursor:pointer;font-weight:500;list-style:none;}
.f2-faq-item summary::-webkit-details-marker{display:none;}
.f2-faq-item summary::after{content:"+";float:right;color:var(--f2-gold-dark);}
.f2-faq-item[open] summary::after{content:"−";}
.f2-faq-item p{margin-top:.75rem;opacity:.85;}

/* Intro */
.f2-intro{background:var(--f2-bg);}
.f2-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;margin-top:2.5rem;}
.f2-intro-grid img{border-radius:var(--f2-radius);}
@media (max-width:820px){.f2-intro-grid{grid-template-columns:1fr;}}

/* Carte (aperçu) */
.f2-carte{background:var(--f2-green-deep);color:var(--f2-cream);}
.f2-carte .f2-eyebrow{color:var(--f2-gold);}
/* 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;}
.f2-link-row{margin-top:2.5rem;}
.f2-link-row a{border-bottom:1px solid var(--f2-gold);padding-bottom:2px;}

/* Allergènes + tags (végétarien, épicé, signature...) — partagés carte/ardoise */
.f2-allergenes{display:block;margin-top:.4rem;font-size:.78rem;opacity:.6;}
/* Note allergènes multilingue — texte fixe traduit à la main (pas de
   traduction automatique), affichée en clair dans chaque langue l'une
   sous l'autre plutôt que derrière un sélecteur, pour qu'un visiteur
   étranger la voie immédiatement sans avoir à chercher un bouton de
   langue. FR/EN/ES/DE/IT : nationalités les plus représentées à Lyon
   après les francophones. Reste lisible même si la traduction
   automatique du navigateur traduit le français juste au-dessus de
   travers — ces lignes-ci sont fiables quoi qu'il arrive. */
.f2-allergen-note{margin-top:1.2rem;padding:1rem 1.2rem;background:var(--f2-surface-alt,rgba(0,0,0,.03));color:var(--f2-green-deep);border:1px solid var(--f2-surface-border);border-radius:var(--f2-radius);display:grid;gap:.4rem;font-size:.82rem;opacity:.85;}
.f2-allergen-note p{margin:0;}
/* Légende des codes-lettres allergènes (A-N, ordre réglementaire UE) —
   sous La Carte et le Menu du jour. */
.f2-allergen-legend{margin-top:.8rem;font-size:.78rem;opacity:.6;line-height:1.8;}
.f2-menu-tag{
  display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--f2-gold);border:1px solid var(--f2-gold);border-radius:999px;padding:.1rem .55rem;margin-left:.5rem;vertical-align:middle;
}
/* Boisson temporairement indisponible (WordPress uniquement, [f2_boissons])
   — reste visible mais estompée, prix masqué au profit de la mention. */
.f2-item-indisponible{opacity:.55;}
.f2-tag-indisponible{color:inherit;border-color:currentColor;opacity:.9;}
/* Bouton(s) "Partager" (La Carte, Menu du jour) — construits par f2Share()
   dans site.js, vides tant que le JS n'a pas tourné. */
.f2-share{display:flex;flex-wrap:wrap;gap:.6rem;}

/* Ardoise (bloc signature) */
.f2-ardoise{background:var(--f2-bg);}
.f2-board{background:var(--f2-green-deep);color:var(--f2-cream);border-radius:var(--f2-radius);padding:3rem 2rem;position:relative;overflow:hidden;}
.f2-board::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);pointer-events:none;}
.f2-board h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2rem;color:var(--f2-gold);}
.f2-board .f2-board-note{position:relative;margin-top:.6rem;opacity:.75;font-size:.9rem;}
.f2-ardoise-group{position:relative;margin-top:1.75rem;}
.f2-ardoise-group:first-of-type{margin-top:1.5rem;}
.f2-ardoise-group-title{
  font-family:'Jost',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  font-weight:500;color:var(--f2-gold);opacity:.85;margin-bottom:.9rem;
}
.f2-board ul{list-style:none;display:grid;gap:1.1rem;position:relative;}
.f2-board li{border-bottom:1px dashed rgba(253,250,243,.2);padding-bottom:.8rem;}
.f2-board .f2-menu-line{font-size:1.05rem;}
.f2-board .f2-menu-desc{font-size:.88rem;opacity:.8;margin-top:.3rem;}

/* La carte complète (page La Carte) */
.f2-menu-groups{margin-top:2.5rem;display:grid;gap:3.5rem;}
.f2-menu-group-title{font-size:1.4rem;color:var(--f2-gold-dark);}
.f2-menu-list{list-style:none;margin-top:1.8rem;display:grid;gap:1.8rem;}
.f2-menu-item{border-bottom:1px solid var(--f2-surface-border);padding-bottom:1.4rem;}
.f2-menu-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;}
.f2-menu-price{margin-left:auto;color:var(--f2-gold-dark);font-weight:500;font-variant-numeric:tabular-nums;}
/* Sur La Carte : le prix passe après la description (voir
   renderCarteCategorie dans build.js) — ce conteneur le repositionne en
   bloc à part, sans toucher à la couleur/taille de .f2-menu-price. */
.f2-menu-price-row{margin-top:.5rem;}

/* Effet de brillance au survol (demande Franck du 2026-07-24) — un léger
   reflet diagonal balaie l'élément au survol/focus, sur les cartes,
   badges, boutons pleins et vignettes de galerie. Pur CSS (::after,
   aucun JS), désactivé si "réduire les animations" est actif côté OS. */
.f2-dish-card,.f2-space-card,.f2-gal-item,.f2-btn,.f2-badge,.f2-btn-call{position:relative;overflow:hidden;}
.f2-dish-card::after,.f2-space-card::after,.f2-gal-item::after,.f2-btn::after,.f2-badge::after,.f2-btn-call::after{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .7s ease;pointer-events:none;
}
.f2-dish-card:hover::after,.f2-space-card:hover::after,.f2-gal-item:hover::after,
.f2-btn:hover::after,.f2-btn:focus-visible::after,
.f2-badge:hover::after,.f2-badge:focus-visible::after,
.f2-btn-call:hover::after,.f2-btn-call:focus-visible::after{left:125%;}
@media (prefers-reduced-motion:reduce){
  .f2-dish-card::after,.f2-space-card::after,.f2-gal-item::after,.f2-btn::after,.f2-badge::after,.f2-btn-call::after{display:none;}
}
.f2-menu-desc{font-size:.92rem;opacity:.8;margin-top:.5rem;max-width:60ch;line-height:1.6;}

/* Galerie */
.f2-galerie{background:var(--f2-bg);}
.f2-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2.5rem;}
.f2-gal-item{border:0;background:none;padding:0;cursor:zoom-in;border-radius:var(--f2-radius);overflow:hidden;}
.f2-gal-item img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--f2-radius);transition:transform .35s ease;}
.f2-gal-item:hover img,.f2-gal-item:focus-visible img{transform:scale(1.06);}
.f2-gal-grid .f2-reveal:nth-child(2){transition-delay:.08s;}
.f2-gal-grid .f2-reveal:nth-child(3){transition-delay:.16s;}
.f2-gal-grid .f2-reveal:nth-child(4){transition-delay:.24s;}
@media (max-width:700px){.f2-gal-grid{grid-template-columns:1fr 1fr;}}

/* Lightbox */
.f2-lightbox{position:fixed;inset:0;background:rgba(10,14,11,.92);z-index:300;display:flex;align-items:center;justify-content:center;padding:2rem;}
.f2-lightbox[hidden]{display:none;}
.f2-lightbox img{max-width:90vw;max-height:85vh;border-radius:var(--f2-radius);}
.f2-lightbox-close{position:absolute;top:1.25rem;right:1.5rem;background:none;border:1px solid var(--f2-cream);color:var(--f2-cream);width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.1rem;cursor:pointer;}

/* Salon Miroir */
.f2-salon{background:var(--f2-green-mid);color:var(--f2-cream);}
.f2-salon-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:2.5rem;}
.f2-salon-grid img{border-radius:var(--f2-radius);}
@media (max-width:820px){.f2-salon-grid{grid-template-columns:1fr;}}

/* Tags (types d'événements) */
.f2-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;list-style:none;}
.f2-tag{padding:.45rem .95rem;border-radius:999px;font-size:.85rem;border:1px solid currentColor;opacity:.9;}

/* Liste d'équipements */
.f2-equip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:1.5rem;list-style:none;}
.f2-equip-item{display:flex;align-items:center;gap:.65rem;font-size:.95rem;}
.f2-equip-item::before{content:"✓";color:var(--f2-gold);font-weight:600;flex-shrink:0;}

/* Cartes d'espaces privatisables */
.f2-space-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2.5rem;}
@media (max-width:820px){.f2-space-grid{grid-template-columns:1fr;}}
.f2-space-card{background:var(--f2-green-mid);color:var(--f2-cream);border-radius:var(--f2-radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
.f2-space-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.3);}
.f2-space-card img{aspect-ratio:4/3;object-fit:cover;}
.f2-space-card h3{font-size:1.3rem;color:var(--f2-cream);}
.f2-space-card p{font-size:.92rem;opacity:.85;margin-top:.4rem;}
.f2-space-capacity{display:flex;gap:1.25rem;margin-top:.9rem;font-variant-numeric:tabular-nums;font-size:.88rem;color:var(--f2-gold);}
/* Carte sans photo (en attendant une vraie image) : padding directement
   sur la carte plutôt que sous une image, sinon le texte colle en haut. */
.f2-space-card-no-img{display:flex;align-items:center;min-height:200px;}
.f2-space-card-no-img .f2-pad{padding:1.5rem;}

/* Badges labels (Toques Blanches, Maître Restaurateur...) */
.f2-badges{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem;list-style:none;}
.f2-badge{
  display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;border-radius:999px;
  border:1px solid var(--f2-gold-dark);color:var(--f2-gold-dark);font-size:.88rem;font-weight:500;
}
.f2-badge:hover,.f2-badge:focus-visible{background:var(--f2-gold-dark);color:var(--f2-cream);}
.f2-salon .f2-badge,.f2-carte .f2-badge{border-color:var(--f2-gold);color:var(--f2-gold);}
.f2-salon .f2-badge:hover,.f2-carte .f2-badge:hover{background:var(--f2-gold);color:var(--f2-green-deep);}

/*
 * Bandeau photo plein largeur, en fondu-enchaîné continu — CSS pur, pas de
 * JS ni de fichier vidéo (poids/temps de chargement). Toujours EXACTEMENT
 * 4 photos par bandeau (voir HTML : animation-delay 0s/4s/8s/12s sur une
 * durée de 16s) — les pourcentages ci-dessous sont calés sur ce compte de
 * 4 (chaque photo occupe un quart du cycle, 25%). Changer le nombre de
 * photos sans recalculer ces pourcentages recrée des trous (aucune photo
 * visible) entre les transitions.
 */
.f2-banner{position:relative;width:100%;height:44vh;min-height:280px;max-height:480px;overflow:hidden;background:var(--f2-green-deep);}
/* Variante compacte (carte-boissons-complete.html) : le bandeau plein écran
   standard prend trop de place sur une page qu'on doit surtout pouvoir
   parcourir vite — même composant (mêmes 4 photos, même fondu), juste
   moins haut, sans jamais déformer les images (object-fit:cover inchangé). */
.f2-banner-compact{height:22vh;min-height:160px;max-height:260px;}
.f2-banner-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:f2BannerFade 16s ease-in-out infinite;
}
.f2-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,26,20,.25) 0%, rgba(15,26,20,0) 25%, rgba(15,26,20,0) 75%, rgba(15,26,20,.35) 100%);
}
@keyframes f2BannerFade{
  0%{opacity:0;}
  3%{opacity:1;}
  25%{opacity:1;}
  28%{opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .f2-banner-img{animation:none;opacity:0;}
  .f2-banner-img:first-child{opacity:1;}
}

/* Avis clients */
.f2-avis{background:var(--f2-bg);text-align:center;}
.f2-stars{color:var(--f2-gold-dark);letter-spacing:.15em;}
.f2-avis-author{display:block;margin-top:.9rem;font-size:.85rem;color:var(--f2-gold-dark);font-weight:500;}

/* Carrousel d'avis */
.f2-avis-carousel{position:relative;margin-top:2.5rem;}
.f2-avis-track{
  display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1rem;margin:-.25rem;scrollbar-width:none;-ms-overflow-style:none;
}
.f2-avis-track::-webkit-scrollbar{display:none;}
.f2-avis-card{
  flex:0 0 88%;scroll-snap-align:start;text-align:left;
  border:1px solid var(--f2-surface-border);padding:1.6rem;border-radius:var(--f2-radius);
  transition:box-shadow .25s ease,transform .25s ease;
}
.f2-avis-card:hover{box-shadow:0 10px 24px rgba(20,24,20,.08);transform:translateY(-3px);}
@media (min-width:640px){ .f2-avis-card{flex-basis:calc(50% - .75rem);} }
@media (min-width:960px){ .f2-avis-card{flex-basis:calc(33.333% - 1rem);} }
.f2-avis-controls{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem;}
.f2-avis-prev,.f2-avis-next{
  width:2.75rem;height:2.75rem;border-radius:50%;flex-shrink:0;
  border:1px solid var(--f2-gold-dark);background:none;color:var(--f2-gold-dark);
  font-size:1.3rem;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.f2-avis-prev:hover,.f2-avis-next:hover{background:var(--f2-gold-dark);color:var(--f2-cream);}
@media (prefers-reduced-motion:reduce){ .f2-avis-track{scroll-behavior:auto;} }

/* Bandeau réservation */
.f2-resa-band{background:var(--f2-gold);color:var(--f2-green-deep);text-align:center;}
.f2-resa-band h2{font-size:clamp(1.8rem,4vw,2.6rem);}
.f2-resa-band p{margin-top:.75rem;}
.f2-resa-actions{margin-top:1.6rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.f2-resa-band .f2-btn-primary{background:var(--f2-green-deep);color:var(--f2-cream);}
.f2-resa-band .f2-btn-ghost{border:1px solid var(--f2-green-deep);color:var(--f2-green-deep);}

/* Barre de réservation sticky (mobile) */
.f2-sticky-cta{display:none;}
@media (max-width:700px){
  .f2-sticky-cta{
    display:flex;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--f2-green-deep);padding:.75rem 1rem;box-shadow:0 -6px 18px rgba(0,0,0,.25);
  }
  .f2-sticky-cta .f2-btn-primary{flex:1;text-align:center;}
  .f2-sticky-cta .f2-btn-call{
    display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;flex-shrink:0;
    border:1px solid var(--f2-cream);border-radius:50%;color:var(--f2-cream);font-size:1.2rem;
  }
  .f2-footer{padding-bottom:6.5rem;}
}

/* Bulle "à découvrir aussi" */
.f2-discover{
  position:fixed;left:1.25rem;bottom:1.25rem;z-index:95;width:17rem;max-width:calc(100vw - 2.5rem);
  background:var(--f2-green-deep);color:var(--f2-cream);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .35s ease,transform .35s ease;
}
.f2-discover.f2-visible{opacity:1;transform:none;pointer-events:auto;}
.f2-discover[hidden]{display:none;}
.f2-discover-head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.85rem 1rem;border-bottom:1px solid rgba(253,250,243,.12);
}
.f2-discover-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--f2-gold);font-weight:600;}
.f2-discover-close{
  background:none;border:0;cursor:pointer;color:var(--f2-cream);
  font-size:.85rem;opacity:.55;padding:.2rem;line-height:1;flex-shrink:0;
}
.f2-discover-close:hover{opacity:1;}
.f2-discover ul{list-style:none;padding:.5rem;}
.f2-discover li+li{margin-top:.15rem;}
.f2-discover a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.88rem;padding:.55rem .6rem;border-radius:6px;transition:background .15s ease;
}
.f2-discover a:hover,.f2-discover a:focus-visible{background:rgba(201,165,92,.14);color:var(--f2-gold);}
@media (max-width:700px){.f2-discover{left:.75rem;right:.75rem;bottom:5.5rem;width:auto;max-width:none;}}

/* Mini-sondage "Vous aimez notre nouveau site ?" — même famille visuelle
   que la bulle "à découvrir aussi" ci-dessus, glissable (swipe) via
   f2Feedback() dans site.js qui pilote --f2-feedback-drag pendant le
   glissement. */
.f2-feedback{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:96;width:18rem;max-width:calc(100vw - 2.5rem);
  background:var(--f2-green-deep);color:var(--f2-cream);border-radius:10px;padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0;transform:translateX(var(--f2-feedback-drag,0)) translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;touch-action:pan-y;
}
.f2-feedback.f2-visible{opacity:1;transform:translateX(var(--f2-feedback-drag,0));pointer-events:auto;}
.f2-feedback.f2-dragging{transition:none;}
.f2-feedback[hidden]{display:none;}
.f2-feedback-close{
  position:absolute;top:.6rem;right:.7rem;background:none;border:0;cursor:pointer;color:var(--f2-cream);
  font-size:.85rem;opacity:.55;padding:.2rem;line-height:1;
}
.f2-feedback-close:hover{opacity:1;}
.f2-feedback-title{font-size:.95rem;font-weight:500;padding-right:1.2rem;}
.f2-feedback-stars{display:flex;gap:.3rem;margin-top:.7rem;}
.f2-feedback-star{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:rgba(253,250,243,.3);padding:.15rem;transition:color .15s ease,transform .15s ease;}
.f2-feedback-star:hover,.f2-feedback-star:focus-visible{transform:scale(1.15);}
.f2-feedback-star.f2-star-active{color:var(--f2-gold);}
.f2-feedback textarea{width:100%;margin-top:.6rem;padding:.6rem;border-radius:6px;border:1px solid rgba(253,250,243,.2);background:rgba(253,250,243,.06);color:var(--f2-cream);font:inherit;resize:vertical;}
.f2-feedback textarea::placeholder{color:rgba(253,250,243,.45);}
#f2-feedback-merci{font-size:.92rem;color:var(--f2-gold);}
@media (max-width:700px){.f2-feedback{left:.75rem;right:.75rem;bottom:5.5rem;width:auto;max-width:none;}}

/* Retour en haut */
.f2-to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--f2-green-deep);color:var(--f2-cream);border:0;font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
}
.f2-to-top.f2-visible{opacity:1;pointer-events:auto;transform:none;}
@media (max-width:700px){ .f2-to-top{ bottom:5.5rem; } }

/* Commande à emporter — panier */
.f2-panier-search-wrap{margin-bottom:2rem;}
.f2-panier-search{
  width:100%;max-width:28rem;padding:.8rem 1.1rem;font:inherit;font-size:1rem;
  border:1px solid rgba(253,250,243,.3);border-radius:999px;background:rgba(253,250,243,.06);
  color:var(--f2-cream);
}
.f2-panier-search::placeholder{color:rgba(253,250,243,.5);}
.f2-panier-search:focus-visible{outline:2px solid var(--f2-gold);outline-offset:2px;}
.f2-panier-layout{display:grid;grid-template-columns:1fr 20rem;gap:2.5rem;align-items:start;}
@media (max-width:900px){.f2-panier-layout{grid-template-columns:1fr;}}
.f2-panier-group{margin-bottom:2rem;}
.f2-panier-item{position:relative;padding-right:0;}
.f2-panier-add{margin-top:.6rem;font-size:.82rem;padding:.5rem 1rem;}
.f2-panier-formule{background:rgba(253,250,243,.04);border-radius:6px;padding:1rem 1.1rem;border-bottom:none !important;margin-bottom:.9rem;}
.f2-panier-formule-config{margin-top:.8rem;display:grid;gap:.7rem;max-width:26rem;}
.f2-panier-formule-field label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;opacity:.85;margin-bottom:.3rem;display:block;}
.f2-panier-formule-field select{
  width:100%;padding:.6rem .8rem;border:1px solid rgba(253,250,243,.3);border-radius:6px;
  background:var(--f2-cream);color:var(--f2-ink);font:inherit;font-size:.9rem;
}
.f2-panier-formule-add{margin-top:.4rem;}
.f2-panier-ligne-detail{display:block;font-size:.76rem;opacity:.6;font-weight:400;margin-top:.15rem;}
.f2-panier-cart{
  position:sticky;top:6rem;background:var(--f2-surface);color:var(--f2-text);border:1px solid var(--f2-surface-border);border-radius:8px;
  padding:1.3rem 1.4rem;box-shadow:0 4px 20px rgba(0,0,0,.06);
}
@media (max-width:900px){.f2-panier-cart{position:static;}}
.f2-panier-cart-title{font-size:1.2rem;margin-bottom:1rem;}
.f2-panier-vide{font-size:.88rem;opacity:.65;font-style:italic;}
.f2-panier-lignes{list-style:none;display:grid;gap:.9rem;}
.f2-panier-ligne{border-bottom:1px solid var(--f2-surface-border);padding-bottom:.7rem;}
.f2-panier-ligne-nom{font-size:.9rem;font-weight:500;margin-bottom:.4rem;}
.f2-panier-ligne-actions{display:flex;align-items:center;gap:.5rem;}
.f2-panier-qty-btn{
  width:1.6rem;height:1.6rem;border:1px solid #d8d0bb;background:var(--f2-surface);
  border-radius:4px;cursor:pointer;font-size:.9rem;line-height:1;
}
.f2-panier-qty{min-width:1.2rem;text-align:center;font-size:.88rem;}
.f2-panier-ligne-prix{margin-left:auto;font-size:.88rem;font-weight:600;color:var(--f2-gold-dark);}
.f2-panier-remove{background:none;border:0;cursor:pointer;opacity:.4;font-size:.8rem;padding:.2rem;}
.f2-panier-remove:hover{opacity:1;}
.f2-panier-total{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--f2-surface-border);font-weight:700;font-size:1.05rem;}

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

/* Défilement doux en boucle continue (f2Marquee() dans site.js duplique le
   contenu et ajoute .f2-marquee + .f2-marquee-track). Pur CSS (transform),
   pas de JS de scroll — translateX(-50%) ramène pile au point de départ
   visuel puisque le contenu est dupliqué une fois. En pause au survol/tap
   (:hover/:focus-within/:active) pour laisser le temps de cliquer un lien. */
/* Pas de !important : .f2-marquee-manual (ci-dessous) doit pouvoir
   repasser en overflow-x:auto une fois l'utilisateur pris la main. */
.f2-marquee{overflow:hidden;}
.f2-marquee-track{display:flex;width:max-content;animation:f2MarqueeScroll 28s linear infinite;}
.f2-quicklinks .f2-marquee-track{gap:.6rem;}
.f2-boisson-nav .f2-marquee-track{gap:.5rem;}
.f2-marquee:hover .f2-marquee-track,
.f2-marquee:focus-within .f2-marquee-track{animation-play-state:paused;}
/* Exception pour le carrousel "Nos plats du moment" : il occupe toute la
   largeur de l'écran sur PC, donc la souris le survole en permanence dès
   qu'on regarde la page — la pause au survol (utile sur une petite barre de
   nav) donnait l'impression que le défilement automatique ne marchait pas
   du tout. Il ne s'arrête donc que sur interaction réelle (clic/tap, voir
   f2Marquee() dans site.js), pas au simple survol. */
.f2-marquee.f2-dish-carousel:hover .f2-marquee-track{animation-play-state:running;}
/* Dès que l'utilisateur touche/clique la barre (site.js, pointerdown), le
   défilement auto s'arrête pour de bon et un vrai scroll horizontal natif
   prend le relais — pour pouvoir revenir en arrière librement. */
.f2-marquee.f2-marquee-manual{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.f2-marquee.f2-marquee-manual::-webkit-scrollbar{display:none;}
@keyframes f2MarqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Carte Google + accès (page Contact) */
.f2-map-embed{border-radius:var(--f2-radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);}
.f2-map-embed iframe{display:block;}
.f2-map-embed-gate{
  height:360px;display:flex;align-items:center;justify-content:center;
  background:var(--f2-surface-alt);
}
.f2-map-load-btn{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:1.2rem 2rem;border:1px solid var(--f2-gold);border-radius:var(--f2-radius);
  background:var(--f2-surface);color:var(--f2-gold-dark);font:inherit;font-weight:500;cursor:pointer;
}
.f2-map-load-btn:hover{background:var(--f2-gold);color:#fff;}
.f2-map-load-note{font-size:.72rem;opacity:.65;font-weight:400;}

/* Bandeau cookies */
.f2-cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--f2-green-deep);color:var(--f2-cream);
  padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  box-shadow:0 -4px 20px rgba(0,0,0,.15);
}
.f2-cookie-banner[hidden]{display:none;}
.f2-cookie-banner p{font-size:.85rem;max-width:60ch;margin:0;}
.f2-cookie-banner a{color:var(--f2-gold);text-decoration:underline;}
.f2-cookie-banner .f2-btn{flex-shrink:0;}
.f2-access-grid a{opacity:.9;}
.f2-access-grid a:hover{opacity:1;color:var(--f2-gold-dark);}
@media (max-width:900px){.f2-access-grid{grid-template-columns:1fr 1fr !important;}}
@media (max-width:640px){.f2-access-grid{grid-template-columns:1fr !important;}}

/* Footer */
.f2-footer{background:var(--f2-green-deep);color:var(--f2-cream);padding:3.5rem 1.5rem 2rem;}
.f2-foot-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.1fr .8fr .8fr .8fr;gap:2.5rem;}
@media (max-width:900px){.f2-foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.f2-foot-grid{grid-template-columns:1fr;}}
.f2-footer h3{font-family:'Cormorant Garamond',serif;color:var(--f2-gold);font-size:1.15rem;margin-bottom:.9rem;}
.f2-footer ul{list-style:none;display:grid;gap:.55rem;font-size:.92rem;opacity:.85;}
.f2-footer a:hover,.f2-footer a:focus-visible{color:var(--f2-gold);}
.f2-foot-bottom{max-width:1280px;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(253,250,243,.15);font-size:.8rem;opacity:.6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* Carte des boissons complète (page cachée carte-boissons-complete.html) */

/* Superpose le titre sur la bannière photo (.f2-banner, composant existant) */
.f2-boisson-banner-content{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.2rem 1.5rem;color:#fff;
  background:linear-gradient(180deg, rgba(15,26,20,0) 30%, rgba(15,26,20,.78) 100%);
}
.f2-boisson-banner-content .f2-eyebrow{color:var(--f2-gold);font-size:.72rem;}
.f2-boisson-banner-content h1{font-size:clamp(1.5rem,4vw,2.2rem);max-width:20ch;line-height:1.15;}
.f2-boisson-banner-content p{display:none;}
@media (min-width:640px){.f2-boisson-banner-content p{display:block;margin-top:.4rem;max-width:50ch;opacity:.92;font-size:.92rem;}}

/* Fond clair sur toute la page (au lieu du vert foncé .f2-carte, illisible
   avec des cartes pensées pour un fond clair). */
.f2-boisson-page{background:var(--f2-bg);padding:3rem 0 4rem;}
.f2-boisson-intro-note{font-size:.9rem;opacity:.65;margin-bottom:2rem;font-style:italic;}

/* Vidéo de présentation (hébergée sur lef2.com, pas en local — 47 Mo).
   Hauteur plafonnée comme la bannière photo (même leçon apprise : jamais
   laisser un média prendre toute la hauteur d'écran) ; largeur toujours
   100% de son cadre, jamais déformée (le player vidéo gère nativement
   son propre ratio, contrairement à une image en background-cover). */
.f2-boisson-video-wrap{position:relative;max-width:640px;margin:0 auto 2rem;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(15,26,20,.1);background:#000;cursor:pointer;}
.f2-boisson-video-wrap:focus-visible{outline:2px solid var(--f2-gold);outline-offset:2px;}
.f2-boisson-video{display:block;width:100%;max-height:320px;pointer-events:none;}
.f2-boisson-video-expand{
  position:absolute;top:.75rem;right:.75rem;width:2.2rem;height:2.2rem;border-radius:50%;
  background:rgba(15,26,20,.6);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:background .2s ease;
}
.f2-boisson-video-wrap:hover .f2-boisson-video-expand,
.f2-boisson-video-wrap:focus-visible .f2-boisson-video-expand{background:var(--f2-gold);}
.f2-lightbox video{max-width:90vw;max-height:85vh;border-radius:var(--f2-radius);}

/* Menu d'ancres sticky : reste collé sous le header au défilement, pour
   sauter directement à une section plutôt que de tout parcourir. */
/* Cible l'attribut data-f2-slot plutôt que .f2-boisson-nav-wrap : injectSlot()
   (build.js) reconstruit ce <div> et n'y garde que data-f2-slot, la classe
   qu'on y met dans le fragment HTML source est retirée au build. */
/* top doit être la hauteur du header (.f2-header, ~69.75px/4.36rem) et non
   0 : sinon les deux sticky (header top:0 + cette nav top:0) se disputent
   la même position, et le header (z-index plus élevé, avant dans le DOM)
   recouvre la nav des sections au lieu de la laisser collée juste dessous. */
[data-f2-slot="boissons-nav"]{position:sticky;top:4.36rem;z-index:50;background:rgba(var(--f2-bg-rgb),.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--f2-surface-border);}
.f2-boisson-nav{
  max-width:1280px;margin:0 auto;padding:.8rem 1.5rem;display:flex;gap:.5rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.f2-boisson-nav::-webkit-scrollbar{display:none;}
.f2-boisson-nav a{
  flex:0 0 auto;white-space:nowrap;padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--f2-gold);color:var(--f2-gold-dark);font-size:.8rem;
  font-weight:500;text-decoration:none;background:var(--f2-surface);scroll-margin-top:4.5rem;
  transition:background .2s ease, color .2s ease;
}
.f2-boisson-nav a:hover,.f2-boisson-nav a:focus-visible{background:var(--f2-gold);color:#fff;}

.f2-boisson-section{margin-top:3.5rem;scroll-margin-top:4.5rem;}
.f2-boisson-section:first-child{margin-top:0;}
.f2-boisson-section-titre{
  font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--f2-green-deep);
  padding-bottom:.6rem;margin-bottom:1.4rem;position:relative;
}
.f2-boisson-section-titre::after{content:"";display:block;width:3rem;height:2px;background:var(--f2-gold);margin-top:.6rem;}

/* Groupes repliables (<details> natif, sans JS) : évite d'imposer 200+
   boissons d'affilée en un seul défilement. Style carte, légère ombre. */
.f2-boisson-groupe{
  margin-top:.9rem;background:var(--f2-surface);border:1px solid var(--f2-surface-border);border-radius:12px;
  padding:0 1.2rem;box-shadow:0 2px 10px rgba(15,26,20,.04);transition:box-shadow .2s ease;
}
.f2-boisson-groupe:hover{box-shadow:0 4px 18px rgba(15,26,20,.08);}
.f2-boisson-groupe[open]{padding-bottom:1.1rem;}
.f2-boisson-groupe-titre{
  font-size:1.02rem;font-weight:600;padding:1rem 0;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.f2-boisson-groupe-titre::-webkit-details-marker{display:none;}
.f2-boisson-groupe-titre::after{
  content:'+';font-size:1.3rem;font-weight:400;color:var(--f2-gold-dark);
  flex-shrink:0;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--f2-gold);
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease;
}
.f2-boisson-groupe[open] > .f2-boisson-groupe-titre::after{content:'–';}
.f2-boisson-groupe-count{font-weight:400;opacity:.55;font-size:.82rem;margin-right:auto;margin-left:.5rem;}
.f2-boisson-liste{list-style:none;display:grid;gap:1.1rem;padding-top:.4rem;}
.f2-boisson-item{padding-bottom:1rem;border-bottom:1px dashed var(--f2-surface-border);}
.f2-boisson-item:last-child{border-bottom:0;padding-bottom:0;}
.f2-boisson-item-head{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;}
.f2-boisson-item-head strong{font-size:1rem;}
.f2-boisson-badges{display:inline-flex;gap:.35rem;flex-wrap:wrap;}
.f2-boisson-badge{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.18rem .6rem;border-radius:999px;background:var(--f2-surface-alt);color:var(--f2-gold-dark);}
.f2-boisson-badge-biodynamie{background:#e4efe0;color:#3d6b34;}
.f2-boisson-badge-sans_alcool{background:#e3eef5;color:#2b6486;}
.f2-boisson-badge-nouveau{background:var(--f2-gold);color:#fff;}
.f2-boisson-badge-local{background:#f5e9df;color:#a15a2c;}
/* Ces 3 badges ont une teinte fixe (vert/bleu/orange pâle) pensée pour un
   fond clair : trop claire et "éblouissante" sur fond sombre la nuit, donc
   assombrie + éclaircie en texte spécifiquement en mode sombre. */
@media (prefers-color-scheme:dark){
  .f2-boisson-badge-biodynamie{background:#233b26;color:#a8d69c;}
  .f2-boisson-badge-sans_alcool{background:#1f3542;color:#9bc7dd;}
  .f2-boisson-badge-local{background:#3a2a1c;color:#e0ab7a;}
}
.f2-boisson-sous-titre{font-size:.85rem;opacity:.65;margin-top:.2rem;font-style:italic;}
.f2-boisson-desc{font-size:.85rem;opacity:.7;margin-top:.25rem;}
.f2-boisson-formats{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:.55rem;}
.f2-boisson-format{white-space:nowrap;font-size:.85rem;font-weight:600;color:var(--f2-green-deep);background:var(--f2-surface-alt);padding:.25rem .65rem;border-radius:6px;}
/* Le vert foncé de marque devient illisible sur un fond déjà sombre la nuit. */
@media (prefers-color-scheme:dark){.f2-boisson-format{color:var(--f2-gold);}}
.f2-boisson-format-hh{background:var(--f2-gold);color:#fff;}
@media (prefers-color-scheme:dark){.f2-boisson-format-hh{color:#fff;}}
.f2-boisson-back{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:1.5rem;font-size:.82rem;
  color:var(--f2-gold-dark);text-decoration:none;border:1px solid var(--f2-gold);
  padding:.4rem .9rem;border-radius:999px;transition:background .2s ease, color .2s ease;
}
.f2-boisson-back:hover{background:var(--f2-gold);color:#fff;}

/* Écran de verrouillage QR (pages "gate", ex. carte-boissons-complete.html).
   Le sélecteur :not([hidden]) est indispensable : sans lui, "display:flex"
   écrase le display:none natif de l'attribut hidden (les règles d'auteur
   priment sur la feuille de style par défaut du navigateur), et l'écran
   "Page réservée" reste visible même une fois déverrouillé par JS. */
.f2-gate-lock:not([hidden]){min-height:60vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:var(--f2-bg);}
.f2-gate-lock-box{max-width:44ch;text-align:center;}
.f2-gate-lock-box h1{font-family:'Cormorant Garamond',serif;font-size:2rem;margin-top:.4rem;}
.f2-gate-lock-box p:last-child{margin-top:1rem;opacity:.75;}

/* Carte "mise en avant" avec photo (item avec un champ image dans
   menu.json > boissons_completes) — même esprit que les cartes plats de
   l'accueil (.f2-dish-card), mais réutilisée ici pour une boisson. */
.f2-boisson-item-photo{
  border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--f2-surface);
  box-shadow:0 4px 16px rgba(15,26,20,.08);
}
/* Hauteur FIXE en pixels (pas aspect-ratio) : sur une carte large, un
   ratio 16/x grandit avec la largeur et redevient haut — une hauteur fixe
   reste petite quelle que soit la largeur de la carte. object-fit:cover
   recadre toujours proprement, l'image n'est jamais étirée/déformée. */
.f2-boisson-item-photo-frame{position:relative;height:130px;overflow:hidden;background:var(--f2-surface-alt);}
.f2-boisson-item-photo-frame img{width:100%;height:100%;object-fit:cover;}
/* Sur PC, la carte est bien plus large qu'au téléphone : sans plafonner la
   largeur du cadre photo, garder la même petite hauteur qu'au mobile
   donnerait une bande très fine et étirée horizontalement. On passe donc en
   vignette à gauche du texte — hauteur FIXE ici (pas "auto") pour que la
   photo reste bien visible même quand le texte à côté est court. */
@media (min-width:640px){
  .f2-boisson-item-photo{display:flex;align-items:stretch;}
  .f2-boisson-item-photo-frame{height:auto;min-height:170px;width:280px;flex:0 0 280px;}
  .f2-boisson-item-photo-body{flex:1;}
}
.f2-boisson-ruban{
  position:absolute;top:1rem;right:-2.2rem;transform:rotate(45deg);
  background:var(--f2-gold);color:#fff;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:.3rem 2.5rem;
}
.f2-boisson-item-photo-body{padding:1rem 1.2rem 1.2rem;}