/*
 * 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-nav-right{display:flex;align-items:center;gap:1.4rem;}
.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-search-wrap{display:flex;align-items:center;gap:.5rem;position:relative;margin-left:1.4rem;}
.f2-search-toggle{background:none;border:0;color:var(--f2-cream);font-size:1.15rem;cursor:pointer;line-height:1;padding:.3rem;}
.f2-search-form{display:flex;align-items:center;gap:.4rem;}
.f2-search-form[hidden]{display:none;}
.f2-search-form input[type=search]{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:var(--f2-cream);border-radius:var(--f2-radius);padding:.4rem .7rem;font-size:.88rem;width:11rem;}
.f2-search-form input[type=search]::placeholder{color:rgba(253,250,243,.55);}
.f2-search-form button[type=submit]{background:none;border:0;color:var(--f2-cream);cursor:pointer;font-size:1rem;padding:.2rem;}
@media (max-width:900px){
  .f2-search-form{position:absolute;top:100%;right:0;margin-top:.6rem;background:var(--f2-green-deep);padding:.7rem;border-radius:var(--f2-radius);box-shadow:0 6px 18px rgba(0,0,0,.25);}
  .f2-search-form input[type=search]{width:12rem;}
}
.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){
  /* Sélecteur ">" (enfant direct de nav) et pas juste "nav ul" : sans ça,
     cette règle attrapait aussi le <ul class="sub-menu"> imbriqué dans un
     <li> (sous-menu des pages QR code) et le transformait lui aussi en
     panneau plein écran séparé, poussé hors champ et jamais ouvert — le
     sous-menu restait invisible sur mobile. */
  .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;}
}

/* Sous-menus (Apparence > Menus : glisser un lien en retrait sous un autre
   pour en faire un enfant — WordPress génère alors un <ul class="sub-menu">
   tout seul, ce bloc lui donne juste son affichage). Un petit ▾ signale
   automatiquement qu'un lien a des enfants, pas besoin de l'ajouter à la
   main dans le libellé du menu. */
.f2-header nav .menu-item-has-children > a::before{
  content:"▾";display:inline-block;margin-right:.35em;font-size:.7em;
  vertical-align:.15em;opacity:.75;
}
@media (min-width:881px){
  /* Desktop : dépliant classique au survol/focus, positionné juste sous
     le lien parent. */
  .f2-header nav li{position:relative;}
  .f2-header nav .sub-menu{
    list-style:none;position:absolute;top:100%;left:0;
    background:var(--f2-green-deep);border:1px solid rgba(253,250,243,.12);
    border-radius:var(--f2-radius);padding:.5rem 0;margin-top:.5rem;
    min-width:14rem;box-shadow:0 12px 28px rgba(0,0,0,.3);
    flex-direction:column;gap:0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .f2-header nav li:hover > .sub-menu,
  .f2-header nav li:focus-within > .sub-menu{
    opacity:1;visibility:visible;transform:none;
  }
  .f2-header nav .sub-menu a{display:block;padding:.65rem 1.2rem;}
  .f2-header nav .sub-menu a::after{display:none;} /* pas de soulignement doré ici, la ligne de fond suffit */
  .f2-header nav .sub-menu a:hover,.f2-header nav .sub-menu a:focus{background:rgba(253,250,243,.06);}
}
@media (max-width:880px){
  /* Mobile : pas de survol possible — accordéon à la place (voir site.js) :
     fermé par défaut, un 1er tap sur le lien parent ouvre le sous-menu (sans
     naviguer), un 2e tap navigue normalement. */
  .f2-header nav .sub-menu{list-style:none;display:none;flex-direction:column;gap:1rem;margin-top:1rem;padding-left:1.2rem;border-left:1px solid rgba(253,250,243,.2);}
  .f2-header nav li.f2-submenu-open > .sub-menu{display:flex;}
  .f2-header nav .sub-menu a{font-size:.86rem;opacity:.85;}
}

/* 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);}
/* .f2-btn-ghost est prévu pour un fond SOMBRE (bordure/texte crème) — sur la
   page d'atterrissage QR ([f2_qr_landing], voir inc/qr-gate.php), le fond est
   clair (--f2-bg) : texte crème sur fond clair serait invisible. Même
   principe que .f2-resa-band .f2-btn-ghost plus bas, appliqué ici aussi. */
.f2-qr-landing .f2-btn-ghost{border-color:var(--f2-green-deep);color:var(--f2-green-deep);}

/* 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, vidéo de présentation, carrousel "plats du moment" : voir
   assets/css/page-accueil.css (propre à la page Accueil uniquement). */
@media (prefers-reduced-motion:reduce){
  .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;}
/* Colonnes générées par l'éditeur de containers (Le F2 - Editeur de sections) */
.f2-wrap.f2-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.f2-wrap.f2-cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start;}
@media (max-width:820px){.f2-wrap.f2-cols-2,.f2-wrap.f2-cols-3{grid-template-columns:1fr;}}
.f2-col img{border-radius:var(--f2-radius);width:100%;}
.f2-hidden{display:none !important;}
.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;}

/* Habillage du formulaire Contact Form 7 : voir
   assets/css/page-contact.css (propre à la page Contact uniquement). */

/* 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);}
/* Le carrousel "Nos plats du moment" (.f2-dish-card...) est propre à la
   page Accueil : voir assets/css/page-accueil.css. */
.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);}
/* Titre de section sur la carte des boissons (voir inc/boissons.php) —
   n'avait aucune couleur définie, donc héritait du contexte (fragile selon
   l'endroit où il s'affiche) : contraste mauvais signalé en thème nuit.
   Même couleur que .f2-menu-group-title ci-dessus, déjà éclaircie
   automatiquement la nuit (voir --f2-gold-dark dans @media
   prefers-color-scheme:dark, en haut du fichier) pour rester lisible dans
   les deux thèmes. */
.f2-boisson-section-titre{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;}
/* Le séparateur est entre les lignes, pas après la dernière (il ne doit
   jamais traîner juste avant une note/description placée sous la liste,
   ex. "Garnitures au choix" sous les formules du menu du jour). */
.f2-menu-list .f2-menu-item:last-child{border-bottom:0;padding-bottom:0;}
.f2-menu-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;}
.f2-plat-etiquette{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--f2-gold-dark);border:1px solid var(--f2-gold-dark);border-radius:999px;padding:.1rem .55rem;line-height:1.6;}
.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;}

/* Vignette photo d'un plat sur La Carte / Menu du jour (aucune règle dédiée
   avant = affichée à sa taille native, bien trop grande) — petite vignette
   carrée, cliquable pour agrandir en grand (lightbox déjà en place plus
   bas, réutilisée via .f2-gal-item) sur PC comme sur téléphone (bouton,
   donc tactile nativement). Scopée aux PLATS uniquement (.f2-plat-thumb) —
   les photos de boissons (.f2-menu-thumb, voir inc/boissons.php) gardent
   volontairement leur taille d'origine, seul le clic-agrandir leur est
   ajouté (voir plus bas .f2-gal-item, partagé par les deux).
*/
/* Photo à droite plutôt qu'à gauche (alignement avec le prix, aligné à
   droite lui aussi via .f2-menu-price{margin-left:auto}) — la photo reste
   la DERNIÈRE chose dans le HTML (ordre lu par les lecteurs d'écran :
   nom du plat d'abord, photo ensuite), row-reverse ne fait que l'afficher
   à droite visuellement, sans changer cet ordre de lecture. */
.f2-menu-item-inner{display:flex;flex-direction:row-reverse;gap:.9rem;align-items:flex-start;}
.f2-plat-thumb-btn{flex-shrink:0;width:64px;height:64px;}
.f2-plat-thumb-btn .f2-plat-thumb{width:100%;height:100%;}
.f2-plat-thumb{aspect-ratio:1/1;object-fit:cover;border-radius:var(--f2-radius);}
.f2-menu-body{flex:1;min-width:0;}
@media (min-width:600px){
  .f2-plat-thumb-btn{width:84px;height:84px;}
}

/* Photo de boisson (.f2-menu-thumb, voir inc/boissons.php) : seul le
   clic-agrandir est ajouté (via .f2-gal-item, partagé avec la galerie
   photo) — ces 2 lignes annulent le recadrage carré et le zoom au survol
   que .f2-gal-item applique normalement, pour que la photo garde EXACTEMENT
   son apparence/taille d'origine, sans aucun changement visuel autre que
   le curseur cliquable. */
.f2-menu-thumb-btn.f2-gal-item img{aspect-ratio:auto;object-fit:initial;}
.f2-menu-thumb-btn.f2-gal-item:hover img,.f2-menu-thumb-btn.f2-gal-item:focus-visible img{transform:none;}

/* 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 alternance continue — CSS pur, pas de JS
 * ni de fichier vidéo (poids/temps de chargement). Nombre de photos et
 * animation (fondu, zoom, défilement...) variables, choisis page par page
 * depuis l'admin (voir Réglages > la page concernée > "Bandeau photo",
 * fichier inc/bandeau.php) — le shortcode [f2_bandeau] génère alors les
 * @keyframes et délais exacts pour CE nombre de photos précis, dans un
 * <style> propre à cette instance. Les règles ci-dessous ne posent que la
 * mise en page commune (taille, recadrage) ; l'opacité/animation vient
 * entièrement du bloc généré par PHP.
 */
.f2-banner{position:relative;width:100%;height:44vh;min-height:280px;max-height:480px;overflow:hidden;background:var(--f2-green-deep);}
/* Variante compacte ([f2_bandeau compact="1"]) : le bandeau plein écran
   standard prend trop de place sur une page qu'on doit surtout pouvoir
   parcourir vite — même composant, 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:1; /* filet de sécurité : visible par défaut si jamais l'animation générée ne s'applique pas */
}
.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%);
}
@media (prefers-reduced-motion:reduce){
  .f2-banner-img{animation:none !important;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) : voir assets/css/page-panier.css.
   Raccourcis rapides mobile (.f2-quicklinks, accueil) : voir
   assets/css/page-accueil.css. */

/* 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-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) : voir assets/css/page-contact.css. */

/* 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;}
/* 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 (bannière, vidéo, menu d'ancres, accordéons,
   écran de verrouillage QR) : voir assets/css/page-boissons.css. */