/* ===================================================================
   FOOD & BEER — design system v3 (pages intérieures)
   Complète styles.min.css (navbar, footer, container) sans le remplacer.
   =================================================================== */
:root {
    --ink: #14181d; --coal: #0d1013; --paper: #faf8f4; --line: #e8e4dc;
    --amber: #ffc107; --amber-deep: #eaa900; --navy: #003d7a;
    --grey: #5c6570; --white: #fff;
    --oswald: 'Oswald', 'Montserrat', sans-serif;
    --inter: 'Inter', 'Montserrat', sans-serif;
}
body.fb3 { font-family: var(--inter); color: var(--ink); background: var(--paper); }
.fb3 h1, .fb3 h2, .fb3 h3 { font-family: var(--oswald); text-transform: uppercase; letter-spacing: .015em; }
.fb3 .kick { font-family: var(--inter); font-weight: 600; font-size: .78rem; letter-spacing: .22em;
             text-transform: uppercase; color: var(--amber-deep); display: inline-flex; align-items: center; gap: .7rem; }
.fb3 .kick::before { content: ""; width: 34px; height: 2px; background: var(--amber); }
.fb3 .wrap12 { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.fb3 .wrap9 { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* Boutons */
.fb3 .b { display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
          font-family: var(--oswald); text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
          font-size: .98rem; padding: .95rem 2rem; text-decoration: none; transition: all .22s ease;
          border: none; cursor: pointer; }
.fb3 .b-amber { background: var(--amber); color: #14181d; }
.fb3 .b-amber:hover { background: var(--white); transform: translateY(-2px); }
.fb3 .b-ghost { border: 1.5px solid rgba(255,255,255,.75); color: var(--white); background: transparent; }
.fb3 .b-ghost:hover { background: var(--white); color: var(--ink); }
.fb3 .b-dark { background: var(--ink); color: var(--white); }
.fb3 .b-dark:hover { background: var(--navy); transform: translateY(-2px); }
.fb3 .b-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.fb3 .b-line:hover { background: var(--ink); color: var(--white); }

/* Héro de page */
.p-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end;
          overflow: hidden; background: var(--coal); }
.p-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-hero::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,16,19,.5) 0%, rgba(13,16,19,.25) 45%, rgba(13,16,19,.9) 100%); }
.p-hero .inner { position: relative; z-index: 2; width: 100%; padding: 7.5rem 0 3.2rem; }
.p-hero .kick { color: var(--amber); }
.p-hero h1 { color: var(--white); font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.04;
             font-weight: 700; margin: .9rem 0 .6rem; }
.p-hero p { color: rgba(255,255,255,.82); font-size: clamp(.98rem, 1.6vw, 1.12rem); max-width: 640px; }

/* Sections */
.sec { padding: 88px 0; }
.sec-dark { background: var(--coal); color: var(--white); }
.sec-dark h2, .sec-dark h3 { color: var(--white); }
.sec-tint { background: #f1eee8; }
.sec-head { margin-bottom: 2.6rem; }
.sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: .9rem; }
.sec-head .sub { color: var(--grey); margin-top: .5rem; max-width: 720px; }
.sec-dark .sec-head .sub { color: rgba(255,255,255,.65); }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* Cartes photo (rendez-vous / galerie) */
.pcard { position: relative; display: block; overflow: hidden; text-decoration: none; }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.pcard:hover img { transform: scale(1.06); }
.pcard::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(13,16,19,.9) 100%); }
.pcard .cap { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.3rem; }
.pcard .cap h3 { color: var(--white); font-size: 1.4rem; margin-bottom: .3rem; }
.pcard .cap p { color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.5; margin: 0; }

/* Menu (carte) */
.menu-cat { padding: 64px 0; border-bottom: 1px solid var(--line); }
.menu-cat:nth-child(even) { background: #f4f1ea; }
.menu-cat h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: .4rem; }
.menu-cat .cat-desc { color: var(--grey); margin-bottom: 1.8rem; }
.menu-cols { columns: 2; column-gap: 4rem; }
.menu-row { break-inside: avoid; display: flex; align-items: baseline; gap: .9rem; padding: .72rem 0;
            border-bottom: 1px solid rgba(20,24,29,.1); }
.menu-row .n { font-family: var(--oswald); text-transform: uppercase; font-weight: 600;
               font-size: 1.02rem; letter-spacing: .03em; }
.menu-row .dots { flex: 1; border-bottom: 1px dotted rgba(20,24,29,.3); transform: translateY(-4px); min-width: 2rem; }
.menu-row .p { font-family: var(--oswald); font-weight: 600; white-space: nowrap; }
.menu-row .d { flex-basis: 100%; color: var(--grey); font-size: .86rem; line-height: 1.5; margin-top: .15rem; }
.menu-row { flex-wrap: wrap; }
@media (max-width: 860px) { .menu-cols { columns: 1; } }

/* Sous-nav carte (sticky) */
.carte-nav { position: sticky; z-index: 900; background: rgba(250,248,244,.94);
             backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.carte-nav-inner { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
                   max-width: 1200px; margin: 0 auto; scrollbar-width: none; }
.carte-nav-inner::-webkit-scrollbar { display: none; }
.carte-nav a { flex: 0 0 auto; padding: 7px 16px; font-family: var(--oswald); text-transform: uppercase;
    font-size: .82rem; font-weight: 600; letter-spacing: .05em; white-space: nowrap; text-decoration: none;
    color: var(--ink); border: 1px solid var(--line); background: var(--white); transition: all .2s; }
.carte-nav a:hover { border-color: var(--ink); }
.carte-nav a.active { background: var(--ink); color: var(--amber); border-color: var(--ink); }

/* FAQ */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-list details { background: var(--white); border: 1px solid var(--line); margin-bottom: .9rem; }
.faq-list summary { list-style: none; cursor: pointer; padding: 1.2rem 1.5rem; display: flex;
    justify-content: space-between; align-items: center; gap: 1rem;
    font-family: var(--oswald); text-transform: uppercase; font-weight: 600; font-size: 1.02rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.5rem; color: var(--amber-deep); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .a { padding: 0 1.5rem 1.3rem; color: var(--grey); line-height: 1.7; }

/* Annuaire de liens (infos utiles) */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.dir-card { background: var(--white); border: 1px solid var(--line); padding: 1.5rem 1.6rem;
            display: flex; flex-direction: column; gap: .5rem; transition: transform .18s ease, box-shadow .18s ease; }
.dir-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13,16,19,.1); }
.dir-card h3 { font-size: 1.02rem; }
.dir-card p { color: var(--grey); font-size: .9rem; line-height: 1.55; flex: 1; margin: 0; }
.dir-card a { font-family: var(--oswald); text-transform: uppercase; letter-spacing: .06em; font-size: .84rem;
              color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--amber);
              align-self: flex-start; padding-bottom: 1px; }
.dir-card a:hover { color: var(--amber-deep); }

/* Galerie */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.gal-grid .pcard { height: 280px; }

/* Bandeau CTA bas de page */
.cta-band { position: relative; padding: 100px 0; overflow: hidden; text-align: center; }
.cta-band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(13,16,19,.8); }
.cta-band .inner { position: relative; z-index: 2; }
.cta-band h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .7rem; }
.cta-band p { color: rgba(255,255,255,.8); margin-bottom: 1.8rem; }
.cta-band .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Reveal */
.fx { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.fx.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fx { opacity: 1; transform: none; transition: none; }
    .pcard img { transition: none; } }

@media (max-width: 640px) { .fb3 .b { width: 100%; } .p-hero { min-height: 38vh; } }