:root{--navy:#022753;--gold:#f1ae00;--text:#0a315e}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Arial,sans-serif;color:var(--text);background:#f8f2e7}
.page{min-height:100svh;padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));background:linear-gradient(rgba(255,250,241,.50),rgba(255,250,241,.50)),url("assets/background.jpg") center 62%/cover fixed no-repeat}
.hero{text-align:center;max-width:900px;margin:auto}.logo-link{display:block;width:min(74vw,470px);margin:auto;line-height:0;background:transparent}.logo{display:block;width:100%;height:auto;background:transparent!important;border:0;box-shadow:none}.subtitle{font:italic 700 clamp(1.2rem,4vw,2rem) Georgia,serif;margin:3px 0;color:var(--navy)}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:9px auto}.divider span{width:105px;height:1px;background:var(--gold)}.divider b{font-size:1.25rem}
h1{font-size:clamp(1.45rem,4vw,2.35rem);margin:18px 0 8px;color:var(--navy);text-shadow:0 2px 10px rgba(255,255,255,.92)}
.multi{width:max-content;max-width:96%;margin:0 auto;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(2,39,83,.11);font-weight:800;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.multi b{color:var(--gold)}
.category{max-width:980px;margin:12px auto}.category-heading{text-align:center}.category h2{font-size:clamp(2rem,5vw,3rem);margin:0;color:var(--navy);text-shadow:0 2px 9px rgba(255,255,255,.95)}
.scratch{display:block;width:min(200px,48vw);height:10px;margin:5px auto 11px;background:var(--navy);clip-path:polygon(0 40%,10% 20%,22% 42%,34% 15%,48% 38%,61% 17%,74% 42%,88% 21%,100% 44%,97% 70%,83% 60%,72% 78%,59% 60%,44% 80%,31% 62%,17% 78%,0 64%)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lang{text-decoration:none;text-align:center;display:grid;justify-items:center;gap:7px;padding:14px 7px;border-radius:20px;background:rgba(255,255,255,.50);border:1px solid rgba(255,255,255,.70);box-shadow:0 8px 22px rgba(2,39,83,.09);backdrop-filter:blur(3px)}
.flag{font-size:clamp(3rem,6vw,5rem);line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.14))}.lang strong{background:rgba(255,255,255,.82);padding:5px 10px;border-radius:999px;color:var(--navy);font-size:clamp(.82rem,1.5vw,1rem)}.arrow{color:var(--gold);font-size:1.8rem}
footer{max-width:980px;margin:22px auto 0;background:var(--navy);color:#fff;border-radius:20px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px}footer div{display:grid;gap:3px}footer strong{color:var(--gold);font-size:1.05rem}footer span{font-size:.78rem}footer a{color:#fff;text-decoration:none;font-size:1.15rem;white-space:nowrap}
@media(max-width:720px){
 .page{background:linear-gradient(rgba(255,250,241,.50),rgba(255,250,241,.50)),url("assets/background.jpg") center 67%/auto 100% scroll no-repeat}
 .logo-link{width:min(80vw,350px)}h1{margin-top:12px}.multi{font-size:.82rem;line-height:1.2}
 .grid{grid-template-columns:repeat(2,1fr);gap:9px}.lang{padding:10px 5px}.flag{font-size:3.6rem}.lang strong{font-size:.78rem}
 .category{margin-top:9px}.cocktails{margin-top:15px}
 footer{border-radius:15px;padding:10px 11px}footer strong{font-size:.88rem}footer span{font-size:.66rem}footer a{font-size:.95rem}
}
@media(max-width:390px){.multi b{display:none}.multi span{width:100%}.flag{font-size:3.2rem}}


/* =========================================================
   Ô CAP — NAVIGATION SITE RESPONSIVE
   Desktop : barre horizontale
   Mobile  : menu hamburger dépliant
   ========================================================= */
.ocap-site-nav{
  --ocap-nav-navy:#022753;
  --ocap-nav-cream:#fae4c5;
  position:relative;
  z-index:9999;
  width:100%;
  background:var(--ocap-nav-navy);
  color:#fff;
  box-shadow:0 3px 16px rgba(0,0,0,.14);
}

.ocap-nav-inner{
  width:min(1600px,100%);
  min-height:92px;
  margin:0 auto;
  padding:8px clamp(18px,3vw,48px) 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  position:relative;
  z-index:2;
}

.ocap-nav-logo-link{
  flex:0 0 auto;
  display:block;
  width:clamp(190px,22vw,330px);
  line-height:0;
  text-decoration:none;
  background:transparent!important;
}

.ocap-nav-logo{
  display:block;
  width:100%;
  height:auto;
  max-height:74px;
  object-fit:contain;
  object-position:left center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.ocap-nav-links{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:clamp(12px,2.2vw,38px);
  margin-left:auto;
}

.ocap-nav-links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 2px;
  color:#fff!important;
  text-decoration:none!important;
  font-family:Arial,sans-serif;
  font-size:clamp(.76rem,1vw,.95rem);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  text-transform:uppercase;
}

.ocap-nav-links a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:4px;
  height:3px;
  background:var(--ocap-nav-cream);
  transition:left .18s ease,right .18s ease;
}

.ocap-nav-links a:hover::after,
.ocap-nav-links a:focus-visible::after,
.ocap-nav-links a[href="/carte/"]::after{
  left:0;
  right:0;
}

.ocap-nav-toggle{
  display:none;
  width:54px;
  height:50px;
  padding:8px;
  border:0;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
}

.ocap-nav-toggle span{
  display:block;
  width:100%;
  height:5px;
  margin:6px 0;
  border-radius:999px;
  background:var(--ocap-nav-cream);
  transition:transform .22s ease,opacity .18s ease;
}

.ocap-nav-brush{
  display:block;
  position:absolute;
  z-index:1;
  left:0;
  bottom:-18px;
  width:100%;
  height:28px;
  object-fit:cover;
  object-position:center bottom;
  pointer-events:none;
}

@media(max-width:820px){
  .ocap-site-nav{
    margin-bottom:14px;
  }

  .ocap-nav-inner{
    min-height:84px;
    padding:8px 18px 12px;
    gap:12px;
  }

  .ocap-nav-logo-link{
    width:min(52vw,250px);
  }

  .ocap-nav-logo{
    max-height:61px;
  }

  .ocap-nav-toggle{
    display:block;
    flex:0 0 54px;
  }

  .ocap-nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:100;
    width:100%;
    margin:0;
    padding:15px 0 0;
    flex-direction:column;
    gap:0;
    background:var(--ocap-nav-navy);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 28px rgba(0,0,0,.20);
  }

  .ocap-site-nav.is-open .ocap-nav-links{
    display:flex;
  }

  .ocap-nav-links a{
    width:100%;
    min-height:60px;
    padding:0 20px;
    font-size:1rem;
    letter-spacing:.01em;
  }

  .ocap-nav-links a::after{
    display:none;
  }

  .ocap-nav-links .ocap-reservation-link{
    background:var(--ocap-nav-cream);
    color:var(--ocap-nav-navy)!important;
  }

  .ocap-site-nav.is-open .ocap-nav-toggle span:nth-child(1){
    transform:translateY(11px) rotate(45deg);
  }
  .ocap-site-nav.is-open .ocap-nav-toggle span:nth-child(2){
    opacity:0;
  }
  .ocap-site-nav.is-open .ocap-nav-toggle span:nth-child(3){
    transform:translateY(-11px) rotate(-45deg);
  }

  .ocap-nav-brush{
    bottom:-13px;
    height:21px;
  }
}

@media(max-width:420px){
  .ocap-nav-inner{
    min-height:78px;
    padding-left:14px;
    padding-right:12px;
  }
  .ocap-nav-logo-link{
    width:min(58vw,220px);
  }
  .ocap-nav-toggle{
    width:50px;
    height:48px;
    flex-basis:50px;
  }
}


/* === OCAP FINAL HEADER GAP / ACTIVE NAV FIX === */
html,body{margin:0!important;padding:0!important}
body{padding-top:0!important}
.ocap-site-nav{margin-bottom:0!important}
.ocap-nav-brush{bottom:-12px!important}
.page,.landing-page,main,.wrap{margin-top:0!important}
body>.page,body>.landing-page{position:relative!important;top:-1px!important}

@media(max-width:820px){
  .ocap-site-nav{margin-bottom:0!important}
  .ocap-nav-brush{bottom:-10px!important;height:20px!important}
  body>.page,body>.landing-page{margin-top:-1px!important;padding-top:1px!important}
}

/* hide duplicate hero/body logos only */
.logo-link,.logo-main,.official-logo-link,.official-logo{display:none!important}
.ocap-nav-logo-link,.ocap-nav-logo{display:block!important}

/* no permanent beige item */
.ocap-nav-links a,
.ocap-nav-links .ocap-reservation-link{
  background:transparent!important;
  color:#fff!important;
}

/* hover only */
.ocap-nav-links a:hover,
.ocap-nav-links a:focus-visible{
  background:#fae4c5!important;
  color:#022753!important;
}

/* active state only when explicitly marked */
.ocap-nav-links a.active{
  background:#fae4c5!important;
  color:#022753!important;
}

@media(max-width:820px){
  .ocap-nav-links a,
  .ocap-nav-links .ocap-reservation-link{
    background:transparent!important;
    color:#fff!important;
  }
  .ocap-nav-links a:hover,
  .ocap-nav-links a:focus-visible,
  .ocap-nav-links a.active{
    background:#fae4c5!important;
    color:#022753!important;
  }
}