/*
 * Le F2 — styles propres à la page Carte des boissons complète uniquement
 * (bannière, vidéo, menu d'ancres, accordéons par section). Séparé de
 * site.css pour être facile à retrouver/modifier sans naviguer dans le
 * fichier commun.
 */

/* Superpose le titre sur la bannière photo (.f2-banner, dans site.css) */
.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). */
.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.
   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. */
[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-nav .f2-marquee-track{gap:.5rem;}

.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;}
/* Sous-titre d'un groupe (ex. "Maison & bulles") à l'intérieur du dépliant
   de sa section — simple titre, plus un dépliant séparé par produit. */
.f2-boisson-sous-titre-groupe{font-size:.9rem;font-weight:600;color:var(--f2-gold-dark);margin:1.1rem 0 .5rem;padding-top:.7rem;border-top:1px dashed var(--f2-surface-border);}
.f2-boisson-sous-titre-groupe:first-child{margin-top:0;padding-top:0;border-top:0;}
.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 (partagé par toute page utilisant [f2_qr_gate],
   mais actuellement seulement la Carte des boissons). */
.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) — même esprit
   que les cartes plats de l'accueil (.f2-dish-card), réutilisée 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);
}
.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;}
@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;}