/* --- Charte Soggy Bottom -------------------------------------------------
   Univers de couleurs officiel : vert profond #243B20, crème #FEF6E5,
   or #B78C3F. Le site garde une ambiance sombre « pub » : fond vert,
   encre crème, or en accent. Typo : Bright Peony (titres, dans
   core/static/core/fonts/) sur repli Quicksand ; Quicksand pour le corps.

   Mise en page à plat : filets fins plutôt que cartes, rayons de 4 px.
   Mobile d'abord ; à partir de 900 px (« bureau ») la navigation basse
   remonte dans l'en-tête, la page s'élargit à 1200 px et le pied de page
   apparaît.

   Feuille globale, chargée une fois par base.html. Les styles propres à un
   écran vivent dans apps/<app>/static/<app>/<app>.css. */
:root {
  --brand-green:#243b20; --brand-cream:#fef6e5; --brand-gold:#b78c3f;

  --bg:#16240f; --card:#243b20; --ink:#fef6e5; --ink-2:#ddd6c4; --soft:#aeb8a0;
  --green:#4fa877; --red:#d98b7f; --gold:#b78c3f; --gold-hover:#d4ab5e;
  --border:#3c5a34; --rule:rgba(254,246,229,.1);
  --tier-common:#aeb8a0; --tier-rare:#4fa877; --tier-epic:#a68fe0; --tier-legendary:#e0b45c;

  --font-body:"Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Bright Peony",var(--font-body);

  --gutter:20px; --page:560px; --nav-h:76px;
}
@font-face {
  font-family:"Bright Peony"; font-display:swap;
  src:url("fonts/Bright-Peony.a4171a90f105.otf") format("opentype");
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 var(--font-body);
}
a { color:var(--gold); }
a:hover { color:var(--gold-hover); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.vh {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.muted { color:var(--soft); }
.desk-only { display:none; }

/* --- Gabarit ----------------------------------------------------------- */
.wrap { max-width:var(--page); margin:0 auto; padding:32px var(--gutter) 44px; }
body:has(.bottom-nav) .wrap {
  padding-bottom:calc(var(--nav-h) + 44px + env(safe-area-inset-bottom));
}

/* --- En-tête : logo à gauche, réseaux (ou mention) à droite ------------ */
.site-header { border-bottom:1px solid var(--border); }
.site-header__in {
  max-width:var(--page); margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-brand { display:block; line-height:0; }
.site-brand img { width:76px; height:76px; display:block; }
.site-header__aside { display:flex; align-items:center; }
.header-note {
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
}
/* Réseaux sociaux du bar — icônes au trait (cf. bar/_social.html) */
.site-social { display:flex; list-style:none; margin:0; padding:0; }
.site-social a {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.site-social a:hover { color:var(--gold-hover); }
.site-social svg {
  width:20px; height:20px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
}

/* --- Navigation principale (core/_nav.html) -----------------------------
   Mobile : barre fixe en bas. Bureau : liens dans l'en-tête. */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  min-height:var(--nav-h); padding-bottom:env(safe-area-inset-bottom);
  background:var(--card); border-top:1px solid var(--border);
}
.bottom-nav .nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:var(--nav-h); margin-top:-1px; border-top:2px solid transparent;
  text-decoration:none; color:var(--soft); font-size:12px; font-weight:500;
}
.bottom-nav .nav-item.is-active { color:var(--gold); border-top-color:var(--gold); font-weight:600; }
.bottom-nav .nav-ico {
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
}

/* --- Titres -------------------------------------------------------------
   Bright Peony sur les vrais titres ; les petits intertitres capitales
   (.eyebrow) restent en Quicksand, plus lisibles. */
h1, .display { font-family:var(--font-display); font-weight:400; }
h1 { font-size:40px; line-height:1.05; margin:0 0 20px; letter-spacing:0; }
.eyebrow {
  display:block; margin:0 0 8px;
  font:500 12px/1.4 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.section-head {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:4px 12px; padding-bottom:12px;
}
.section-head h2 {
  margin:0; font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.15;
}
.link-more { font-size:14px; padding:12px 0; }
.btn-outline {
  display:inline-block; padding:13px 18px; border:1px solid var(--ink); border-radius:4px;
  color:var(--ink); font-size:15px; font-weight:600; text-decoration:none;
}
.btn-outline:hover { color:var(--gold-hover); border-color:var(--gold-hover); }

.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:4px; padding:18px 20px; margin:12px 0;
}
.card p { margin:6px 0; }
#rt-log { list-style:none; padding:0; margin:8px 0 0; font-size:.8rem; }
#rt-log li { padding:2px 0; border-top:1px solid var(--border); }

/* --- Happy hour (core/_hh_badge.html — accueil + carte) -----------------
   `hh-block` : pavé or de l'accueil. `hh-line` : ligne « HH » de la carte. */
.hh-badge.hh-block {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px;
  padding:16px 18px; border-radius:4px; background:var(--gold); color:var(--bg);
}
.hh-block .hh-text { display:flex; flex-direction:column; gap:4px; }
.hh-block .hh-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
}
.hh-block .hh-big { font-weight:700; font-size:24px; line-height:1.1; }
.hh-block .hh-link {
  color:var(--bg); font-size:14px; font-weight:600; padding:12px 0;
  text-decoration:underline; text-underline-offset:3px;
}
.hh-badge.hh-line {
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--soft);
}
.hh-tag {
  flex:0 0 auto; padding:4px 8px; border-radius:2px; background:var(--gold); color:var(--bg);
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
.hh-line.hh-on strong { color:var(--green); }

/* --- Pied de page (bar/_footer.html) — écrans larges uniquement -------- */
.site-footer { display:none; }

/* --- Visionneuse d'image (core/_lightbox.html + core/_zoomable_img.html) --
   Toute vignette `.zoomable` s'ouvre en grand au clic ; utilisée par la carte
   des boissons, l'agenda et la page « Le bar ». */
.zoomable { cursor:zoom-in; }
.lightbox {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,14,6,.93);
}
.lightbox[hidden] { display:none; }
body.lightbox-open { overflow:hidden; }
.lightbox-fig {
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.lightbox-img {
  max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:4px; border:1px solid var(--border);
}
.lightbox-cap { font-size:.85rem; color:var(--soft); text-align:center; }
.lightbox-close {
  position:absolute; top:14px; right:16px;
  width:44px; height:44px; border-radius:4px;
  background:var(--card); color:var(--ink); border:1px solid var(--border);
  font-size:1.1rem; line-height:1; cursor:pointer;
}

/* --- Bureau ------------------------------------------------------------- */
@media (min-width:900px) {
  :root { --gutter:32px; --page:1200px; }
  .desk-only { display:block; }
  /* Colonne pleine hauteur : le pied de page reste en bas des pages courtes. */
  body { display:flex; flex-direction:column; min-height:100vh; }
  .wrap, body:has(.bottom-nav) .wrap {
    width:100%; flex:1 0 auto; padding:56px var(--gutter) 96px;
  }

  .site-header__in { padding:18px var(--gutter); flex-wrap:wrap; }
  .site-brand img { width:88px; height:88px; }

  .bottom-nav {
    position:static; display:flex; flex-wrap:wrap; gap:4px;
    min-height:0; padding:0; background:none; border:0;
  }
  .bottom-nav .nav-item {
    flex-direction:row; min-height:44px; margin:0; padding:12px 16px;
    border-top:0; border-bottom:2px solid transparent; font-size:15px;
  }
  .bottom-nav .nav-item.is-active { color:var(--ink); border-bottom-color:var(--gold); }
  .bottom-nav .nav-ico { display:none; }

  h1 { font-size:56px; margin-bottom:28px; }
  .section-head h2 { font-size:32px; }
  .link-more { font-size:15px; }
  .hh-badge.hh-block { padding:20px 24px; }
  .hh-block .hh-big { font-size:28px; }
  .hh-block .hh-link { font-size:15px; }

  .site-footer { display:block; background:var(--card); border-top:1px solid var(--border); }
  .site-footer__in {
    max-width:var(--page); margin:0 auto; padding:48px var(--gutter);
    display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
  }
  .site-footer__col { flex:1 1 260px; display:flex; flex-direction:column; gap:8px; font-size:15px; }
  .site-footer__col:last-child { flex-basis:200px; align-items:flex-start; }
  .site-footer .eyebrow { margin:0; }
  .footer-address { margin:0; font-weight:700; font-size:20px; line-height:1.35; }
  .footer-legal { font-size:13px; color:var(--soft); padding:6px 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }