/* ===============================
   Menu latéral plein écran — mobile friendly
   =============================== */
:root{
    --overlay: rgba(0,0,0,.82);
    --white: #ffffff;
    --muted: #cfcfcf;
    --gold:  #b9965a;
    --gap:   32px;
    --maxw:  1280px;
    --font:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===============================
   Overlay (plein écran)
   =============================== */
.menu-overlay{
    position: fixed;
    inset: 0;
    z-index: 1200; /* < lightbox (1400) */
    display: grid;
    place-items: center;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.menu-overlay.is-open{
    opacity: 1;
    visibility: visible;
}

/* ===============================
   Panneau principal
   =============================== */
.menu-panel{
    width: min(96vw, var(--maxw));
    height: min(92vh, 800px);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    transform: translateY(12px);
    transition: transform .4s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.menu-overlay.is-open .menu-panel{ transform: translateY(0); }

/* ===============================
   Bouton de fermeture (croix)
   =============================== */
.menu-close{
    position:absolute; left: max(18px, env(safe-area-inset-left));
    top: max(14px, env(safe-area-inset-top));
    z-index: 5;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.9);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display:grid; place-items:center;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.menu-close span{
    position:absolute; left:10px; right:10px; top:19px;
    height:2px; background:#111; transform-origin:center;
}
.menu-close span:first-child{ transform: rotate(45deg); }
.menu-close span:last-child{  transform: rotate(-45deg); }
.menu-close:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* ===============================
   Grille interne
   =============================== */
.menu-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:0;
    height:100%;
}

/* ===============================
   Colonne gauche (texte)
   =============================== */
.menu-left{
    padding: calc(56px + env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    color:#111;
    font-family: var(--font);
}

/* Liens principaux */
.menu-list{
    list-style:none;
    padding:0;
    margin:0 0 18px 0;
}
.menu-list li{ margin: 14px 0; }
.menu-list a{
    text-decoration:none;
    color:#111;
    font-size: clamp(18px, 2.1vw, 26px);
    font-weight: 600;
    letter-spacing: .6px;
    position: relative;
    padding: 2px 0;
}
.menu-list a::after{
    content:"";
    position:absolute; left:0; bottom:-6px;
    width:0; height:2px;
    background:#111;
    transition: width .25s ease;
}
.menu-list a:hover::after{ width: 64px; }
.menu-list a:focus-visible{
    outline: 2px dashed #222;
    outline-offset: 4px;
}

/* Bouton HORAIRES */
.menu-hours{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;              /* tap target confortable */
    padding:0 16px;
    border:2px solid #111;
    background:#fff;
    color:#111;
    font-weight:800;
    letter-spacing:1px;
    text-decoration:none;
    border-radius:10px;
    transition:background .2s ease, color .2s ease, transform .06s ease;
    width:auto;
    max-width:fit-content;
    margin: 8px 0 22px;
}
.menu-hours:hover{ background:#111; color:#fff; }
.menu-hours:active{ transform: translateY(1px); }
.menu-hours .ico{ width:18px; height:18px; display:inline-block; }

/* Réseaux sociaux */
.menu-socials{
    display:flex;
    gap:14px;
    margin: 4px 0 20px;
}
.s{
    width:38px; height:38px;
    display:grid; place-items:center;
    border-radius:10px;
    background:#f6f6f6;
}
.s-fb{ color:#4267B2; }
.s-ig{ color:#E1306C; }
.s-order{ color:#fff; background:#fd6b00; }

/* Adresse & contact */
.menu-address{ font-style:normal; color:#222; }
.menu-address a{
    color:#111;
    text-decoration:none;
    border-bottom:1px solid transparent;
}
.menu-address a:hover{ border-color:#111; }

/* ===============================
   Colonne droite (image)
   =============================== */
.menu-right{ position:relative; overflow:hidden; }
.media{ width:100%; height:100%; position:relative; }
.media-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transform: scale(1.02);
    transition: opacity .35s ease, transform .6s ease;
    border-left: 1px solid #eee;
    border-radius: 0 18px 18px 0;
}
.media-img.is-active{ opacity:1; transform:none; }

/* ===============================
   Responsive
   =============================== */
@media (max-width: 980px){
    .menu-panel{
        width: 100vw;
        height: 100vh;
        max-height: 100dvh;                 /* iOS/Android */
        border-radius: 0;                   /* plein écran mobile */
    }
    .menu-grid{ grid-template-columns: 1fr; }
    .menu-right{ display:none; }           /* cache l’image */
    .menu-left{
        padding: calc(64px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .menu-list li{ margin: 12px 0; }
    .menu-list a{ font-size: clamp(18px, 4.8vw, 22px); }
    .menu-hours{ min-height:46px; }
}

/* ===============================
   Accessibilité / Reduce motion
   =============================== */
@media (prefers-reduced-motion: reduce){
    .menu-overlay, .menu-panel, .media-img{ transition:none !important; }
}