/* La BARaque V8.9 — mobile first polish. Desktop V8.8 remains intact. */
:root{--mobile-dock-h:72px;--menu-bg-shift:0px}
@media(max-width:760px){
  html{scroll-padding-top:92px}
  body{font-size:16px;line-height:1.55;padding-bottom:calc(var(--mobile-dock-h) + env(safe-area-inset-bottom))}
  .container{width:calc(100% - 28px)}
  .section{padding:50px 0}
  .chapter-line{margin-bottom:26px;padding-bottom:11px;font-size:.69rem;letter-spacing:.075em}
  .kicker,.eyebrow{letter-spacing:.12em}
  .lead{line-height:1.62}
  .header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(8,10,11,.94)}
  .nav{min-height:66px;gap:9px}
  .brand{min-width:0;gap:9px}
  .brand img{width:38px;height:38px;flex:0 0 auto}
  .brand strong{font-size:1.18rem;white-space:nowrap}
  .brand small{display:none}
  .header-book{font-size:0;min-height:42px;min-width:104px;padding:9px 14px;border-radius:7px;box-shadow:0 10px 28px rgba(151,26,33,.24)}
  .header-book:after{content:"Réserver";position:static;display:inline;font-size:.82rem;letter-spacing:.01em;background:none;transform:none}
  .menu-toggle{width:42px;height:42px;min-width:42px;justify-content:center;border-radius:50%}
  .menu-toggle span:not(.toggle-text){width:20px}
  .hero{padding:24px 0 28px}
  .hero-grid{gap:14px}
  .hero-copy{padding:6px 0 16px}
  .hero h1{font-size:clamp(3.15rem,13.7vw,4.35rem);line-height:.95;margin:18px 0;max-width:9.4ch}
  .hero-copy .lead{font-size:.98rem;max-width:32ch}
  .hero-actions{margin-top:22px;gap:18px;align-items:center}
  .hero-actions .btn{min-height:46px;padding:12px 17px}
  .hero-photo{padding:0 16px 26px 0}
  .hero-photo-main{height:355px;border-radius:10px}
  .hero-photo-inset{width:35%;right:0;bottom:4px;border-width:4px;border-radius:8px;box-shadow:0 18px 38px rgba(0,0,0,.4)}
  .hero-photo figcaption{font-size:.66rem;max-width:72%}
  .booking-ribbon{padding:22px 0}
  .booking-ribbon-inner{display:block}
  .booking-ribbon h2{font-size:2rem}
  .booking-ribbon p{font-size:.84rem}
  .quick-form{margin-top:18px;grid-template-columns:1fr 1fr;gap:11px}
  .quick-form label{font-size:.74rem;gap:6px}
  .quick-form input,.quick-form select{min-height:45px;border-radius:7px}
  .quick-form .btn{grid-column:1/-1;min-height:47px;border-radius:7px}
  .intro-grid{gap:18px}
  .intro-grid h2,.section-head h2{font-size:2.65rem;line-height:1.02}
  .moments{margin-top:30px;gap:18px}
  .moments-photo img{height:330px;border-radius:9px}
  .moments-photo figcaption{font-size:.74rem}
  .moment-link{padding:19px 0;grid-template-columns:24px 1fr 22px;gap:11px}
  .moment-link h3{font-size:1.72rem}
  .moment-link p{font-size:.89rem;line-height:1.5;margin-top:7px}
  .moment-link .arrow{font-size:1.35rem}
  .menu-preview{padding:27px 18px 24px;border-radius:12px!important;box-shadow:0 26px 60px rgba(0,0,0,.34)}
  .menu-preview::after{
    background:
      linear-gradient(180deg,rgba(15,17,18,.76) 0%,rgba(15,17,18,.72) 46%,rgba(15,17,18,.80) 100%),
      url('/assets/images/optimized/oysters-960.webp') center calc(50% + var(--menu-bg-shift)) / cover no-repeat!important;
    opacity:.22!important;
    filter:saturate(.78) contrast(1.04)!important;
  }
  .menu-preview-heading{margin-bottom:14px;padding:0 4px}
  .menu-preview-heading .kicker{font-size:.7rem}
  .menu-preview-heading h2{font-size:2.65rem;line-height:1.02;margin-top:10px}
  .menu-preview-heading p{font-size:.9rem;margin-top:8px}
  .featured-list{display:block}
  .featured-dish{padding:19px 0}
  .featured-dish:nth-child(n+5){display:none}
  .dish-top{gap:14px;align-items:flex-start}
  .dish-top h3{font-size:1.48rem;line-height:1.22}
  .featured-dish p{font-size:.87rem;line-height:1.48;margin-top:7px}
  .price{font-size:.95rem;padding-top:2px}
  .menu-preview-bottom{margin-top:22px}
  .menu-preview-bottom .link-arrow{font-size:.95rem}
  .gallery-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 14px 14px;margin-inline:-14px;scrollbar-width:none}
  .gallery-strip::-webkit-scrollbar{display:none}
  .gallery-strip a,.gallery-strip a:nth-child(2),.gallery-strip a:nth-child(3){flex:0 0 78%;padding:0;margin:0;scroll-snap-align:center;grid-column:auto}
  .gallery-strip img,.gallery-strip a:nth-child(3) img{height:300px;border-radius:10px}
  .gallery-strip figcaption{font-size:.74rem;padding-inline:2px}
  .reviews-head{gap:18px;margin-bottom:22px}
  .reviews-head h2{font-size:2.55rem;line-height:1.02}
  .google-summary{width:100%;padding:15px 16px;border-radius:9px}
  .google-rating>strong{font-size:2.7rem}
  .google-review-card{border-radius:10px}
  .reviews-actions{gap:9px}
  .reviews-actions .btn{min-height:46px;border-radius:7px}
  .page-hero{padding-top:24px}
  .page-hero h1{font-size:3rem;line-height:.98;margin:17px 0}
  .page-hero-media{min-height:205px;margin:20px 14px 18px;border-radius:10px}
  .booking-layout{gap:18px}
  .booking-summary{order:2!important;margin-top:0}
  .booking-card,.info-card,.map-card{padding:22px 18px;border-radius:10px}
  .booking-card h2{font-size:2.15rem}
  .slot-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .slot{min-height:44px;border-radius:7px}
  .form-grid{gap:15px}
  .field input,.field select,.field textarea{min-height:46px;border-radius:7px}
  .field textarea{min-height:116px}
  .booking-nav{position:sticky;bottom:calc(var(--mobile-dock-h) + env(safe-area-inset-bottom) + 8px);z-index:8;background:rgba(12,14,15,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:9px;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .mobile-dock{height:var(--mobile-dock-h);padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:8px;background:rgba(7,9,10,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top-color:rgba(255,255,255,.11);box-shadow:0 -16px 36px rgba(0,0,0,.26)}
  .mobile-dock a{min-height:50px;border-radius:8px;font-size:.82rem;transition:transform .16s ease,background .16s ease}
  .mobile-dock a:active{transform:scale(.96)}
  .mobile-dock .book{min-height:52px;border-radius:8px;box-shadow:0 10px 28px rgba(160,31,38,.28)}
  .footer{padding-bottom:24px}
  .site-toast{bottom:calc(var(--mobile-dock-h) + env(safe-area-inset-bottom) + 14px)}
}
@media(max-width:390px){
  .container{width:calc(100% - 24px)}
  .brand strong{font-size:1.08rem}
  .brand img{width:36px;height:36px}
  .header-book{min-width:96px;padding-inline:12px}
  .hero h1{font-size:3.35rem}
  .hero-photo-main{height:335px}
  .menu-preview{padding:24px 16px 22px}
  .menu-preview-heading h2{font-size:2.48rem}
  .dish-top h3{font-size:1.4rem}
  .featured-dish p{font-size:.84rem}
  .gallery-strip a,.gallery-strip a:nth-child(2),.gallery-strip a:nth-child(3){flex-basis:84%}
  .mobile-dock{grid-template-columns:1fr 1.25fr 1fr}
  .mobile-dock a{font-size:.78rem}
}
@media(max-width:360px){
  .header-book{min-width:88px;padding-inline:10px}
  .header-book:after{font-size:.77rem}
  .brand strong{font-size:1.02rem}
  .hero h1{font-size:3.05rem}
  .quick-form{grid-template-columns:1fr}
  .quick-form .btn{grid-column:auto}
  .slot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .gallery-strip{scroll-behavior:auto}
}

@media(max-width:760px){
  .drawer-backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .drawer{width:min(88vw,360px);background:linear-gradient(180deg,#0d0f10 0%,#08090a 100%);border-left:1px solid rgba(255,255,255,.1);box-shadow:-32px 0 80px rgba(0,0,0,.48);padding:18px 18px calc(22px + env(safe-area-inset-bottom))}
  .drawer-top{padding-bottom:16px;border-bottom:1px solid var(--line)}
  .drawer-top .brand img{width:42px;height:42px}
  .drawer-top .brand strong{font-size:1.25rem}
  .drawer-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#151718;color:#fff}
  .drawer-links{padding:14px 0;gap:0}
  .drawer-links a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--serif);font-size:1.3rem;line-height:1.05;transition:padding-left .18s ease,color .18s ease}
  .drawer-links a:active{padding-left:8px;color:#ef737b}
  .drawer-cta{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;margin-top:12px}
  .drawer-cta .btn{min-height:48px;border-radius:8px}
  .drawer-meta{font-size:.76rem;line-height:1.55;margin-top:17px;color:#918b85}
  .v89-touch{transform:scale(.985)!important;filter:brightness(1.04)!important}
  .featured-dish.v89-touch{transform:translateX(3px)!important}
  .gallery-strip a.v89-touch{transform:scale(.98)!important}
}

@media(max-width:760px){
  .header .header-book{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:100px!important;
    max-width:108px!important;
    min-height:42px!important;
    padding:9px 12px!important;
    margin-left:auto!important;
    font-size:0!important;
    white-space:nowrap!important;
  }
  .header .header-book::after{
    content:"Réserver"!important;
    position:static!important;
    inset:auto!important;
    display:inline!important;
    width:auto!important;
    height:auto!important;
    font-size:.8rem!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    background:none!important;
    transform:none!important;
  }
}
@media(max-width:390px){
  .header .header-book{min-width:92px!important;max-width:98px!important;padding-inline:10px!important}
  .header .header-book::after{font-size:.76rem!important}
}
@media(max-width:360px){
  .header .header-book{min-width:86px!important;max-width:92px!important;padding-inline:8px!important}
  .header .header-book::after{font-size:.72rem!important}
}

@media(max-width:760px){
  .menu-preview::after{
    background:
      linear-gradient(180deg,rgba(12,14,15,.74) 0%,rgba(12,14,15,.66) 42%,rgba(12,14,15,.73) 72%,rgba(12,14,15,.80) 100%),
      url('/assets/images/optimized/oysters-960.webp') center calc(50% + var(--menu-bg-shift)) / cover no-repeat!important;
    opacity:1!important;
    filter:saturate(.82) contrast(1.05)!important;
  }
  .menu-preview-heading,
  .featured-list,
  .menu-preview-bottom{position:relative;z-index:2}
  .featured-dish{border-color:rgba(255,255,255,.14)}
}

/* V8.9.1 HOTFIX — cartes univers accueil sur mobile */
@media(max-width:760px){
  .moments-list .moment-link{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 28px!important;
    grid-template-rows:auto!important;
    column-gap:14px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .moments-list .moment-link>.num{
    display:none!important;
  }
  .moments-list .moment-link>div{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .moments-list .moment-link h3{
    width:auto!important;
    max-width:12ch!important;
    min-width:0!important;
    margin:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
  .moments-list .moment-link p{
    width:auto!important;
    max-width:34ch!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
  .moments-list .moment-link>.arrow{
    grid-column:2!important;
    grid-row:1!important;
    position:static!important;
    display:block!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    margin:2px 0 0!important;
    padding:0!important;
    font-size:0!important;
    line-height:1!important;
    text-align:right!important;
    color:#d96870!important;
  }
  .moments-list .moment-link>.arrow::before{
    content:"↗︎";
    display:block;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:1.3rem!important;
    font-weight:400!important;
    line-height:1!important;
  }
}

/* V8.9.1 FINAL — réservation mobile : aucun CTA ne recouvre le contenu */
@media(max-width:760px){
  .booking-step .booking-nav{
    position:static!important;
    inset:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    width:100%!important;
    margin:26px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .booking-step .booking-nav .btn{
    min-height:48px!important;
    padding:12px 16px!important;
    border-radius:7px!important;
    white-space:nowrap!important;
  }
  .booking-step .booking-nav>span:empty{display:block}
  .booking-step{padding-bottom:2px}
  .form-note{margin-bottom:0}
  .field input:-webkit-autofill,
  .field input:-webkit-autofill:hover,
  .field input:-webkit-autofill:focus,
  .field textarea:-webkit-autofill,
  .field select:-webkit-autofill{
    -webkit-text-fill-color:#f0e8e0!important;
    -webkit-box-shadow:0 0 0 1000px #0e1011 inset!important;
    box-shadow:0 0 0 1000px #0e1011 inset!important;
    caret-color:#f0e8e0!important;
    transition:background-color 9999s ease-out 0s!important;
  }
}
@media(max-width:390px){
  .booking-step .booking-nav{gap:9px!important}
  .booking-step .booking-nav .btn{font-size:.82rem!important;padding-inline:13px!important}
  #submitBooking{max-width:64%}
}
@media(max-width:360px){
  .booking-step .booking-nav .btn{font-size:.78rem!important;padding-inline:11px!important}
  #submitBooking{max-width:66%}
}

/* V8.9.1 FINAL — zones tactiles favoris */
@media(max-width:760px){
  .favorites-bar{margin:10px 0 4px}
  .favorites-bar #favoriteToggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:9px 12px!important;
    border:1px solid var(--line)!important;
    border-radius:7px!important;
    text-decoration:none!important;
    background:#111314!important;
    color:#cfc7bf!important;
  }
  .favorites-bar #favoriteToggle[aria-pressed="true"]{
    color:#ef737b!important;
    border-color:rgba(182,41,49,.45)!important;
    background:rgba(182,41,49,.08)!important;
  }
  .menu-item-favorite{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:44px!important;
    padding:8px 10px!important;
    margin-left:-10px!important;
    border-radius:7px!important;
    line-height:1.2!important;
  }
}
