/* =========================================================
   LE RESTAURANT — Noir Luxe • propre & cohérent (mobile-first)
   ========================================================= */

/* Variables SCOPÉES à la page Restaurant uniquement */
.rest-page{
    --gold:#b9965a;
    --ink:#111;
    --bg:#0c0c0c;
    --muted:#8c8c8c;

    --maxw:1180px;
    --container:min(var(--maxw), 92vw);

    /* Galerie */
    --thumb-h: clamp(200px, 34vw, 320px); /* hauteur fluide desktop */
    --radius:16px;
    --gap:16px;
}

*{ box-sizing:border-box }
img{ max-width:100%; display:block }
body{ margin:0; color:#111; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif }

/* =========================================================
   Fond Noir Luxe : halo + grain
   ========================================================= */
.rest-page{
    position:relative;
    background:var(--bg);
    isolation:isolate;
}
.rest-page::before{
    content:"";
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(1200px 420px at 50% -15%, rgba(185,150,90,.10), transparent 60%),
        radial-gradient(900px 320px at 50% 115%, rgba(255,255,255,.06), transparent 65%),
        linear-gradient(var(--bg), var(--bg));
}
.rest-page::after{
    content:"";
    position:fixed; inset:-1px; z-index:-1; pointer-events:none; opacity:.05;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff 30%, transparent 31%),
        radial-gradient(1px 1px at 30% 80%, #fff 30%, transparent 31%),
        radial-gradient(1px 1px at 70% 40%, #fff 30%, transparent 31%),
        radial-gradient(1px 1px at 90% 60%, #fff 30%, transparent 31%),
        radial-gradient(1px 1px at 50% 10%, #fff 30%, transparent 31%);
    background-size:140px 140px,180px 180px,170px 170px,210px 210px,160px 160px;
    mix-blend-mode:soft-light;
}

/* =========================================================
   HERO compact
   ========================================================= */
.rest-hero{
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    min-height: clamp(36vh, 48vh, 56vh);
    padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.rest-hero-inner{ width: var(--container); margin: 0 auto }

.hero-band{ display:inline-flex; align-items:center; gap: clamp(12px, 2.6vw, 22px) }
.rule{
    width: clamp(42px, 16vw, 180px); height:2px; border-radius:2px; opacity:.95;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform-origin:center; animation: heroGrow .8s ease .15s both;
}
@keyframes heroGrow{ from{ transform:scaleX(.2); opacity:0 } to{ transform:scaleX(1); opacity:.95 } }

.hero-title{
    margin:0; color:#fff;
    font-family:"Cinzel",serif; letter-spacing:.6px;
    font-size: clamp(28px, 5.2vw, 58px);
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.25));
}
.hero-sub{
    margin:10px 0 0;
    font-size: clamp(14px, 2vw, 18px);
    color:#e9e9e9; opacity:.92;
}

/* =========================================================
   Filtres (pastilles)
   ========================================================= */
.gallery-filters{
    width: var(--container);
    margin: clamp(16px,3vw,22px) auto 0;
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
}
.gf-btn{
    appearance:none;
    border:1px solid #fff;
    background:transparent;
    color:#fff; cursor:pointer;
    padding:10px 16px;
    border-radius:999px;
    font-weight:800; letter-spacing:.4px;
    transition: background .18s ease, color .18s ease, transform .06s ease, border-color .18s ease, box-shadow .18s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.gf-btn:hover{ background:#fff; color:#111 }
.gf-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.gf-btn.is-active{
    background:var(--gold); color:#111; border-color:var(--gold); box-shadow:none;
}

/* =========================================================
   En-tête de section (centrée)
   ========================================================= */
.section-head{
    background:transparent !important;
    box-shadow:none !important;
    width: var(--container);
    margin: clamp(30px,6vw,50px) auto clamp(18px,3vw,28px);
    text-align:center;
    color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.section-kicker{
    display:inline-block;
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:#cfcfcf; opacity:.9; margin-bottom:8px;
}
.title-band{ display:block; margin:0 auto; }
.section-title{
    position:relative; display:inline-block;
    margin:8px auto 0; padding:0 1rem;
    font-family:"Cinzel",serif; font-weight:700; letter-spacing:.4px;
    font-size: clamp(26px, 3.6vw, 44px);
    color:#fff; text-shadow:0 8px 22px rgba(0,0,0,.32);
}
.section-title::before,
.section-title::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    height:1.5px; width: clamp(70px, 14vw, 200px);
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:.95; border-radius:2px;
}
.section-title::before{ right:100%; margin-right:1rem }
.section-title::after{  left:100%;  margin-left: 1rem }
@media (max-width:560px){
    .section-title::before,.section-title::after{ width: clamp(40px, 20vw, 90px) }
}

/* =========================================================
   GALERIE — Masonry centrée (desktop)
   ========================================================= */
.gallery-wrap{
    width: var(--container);
    margin: clamp(12px, 3vw, 28px) auto clamp(44px, 7vw, 90px);
}
.gallery-grid{
    column-count: 4;
    column-gap: var(--gap);
}
@media (max-width:1180px){ .gallery-grid{ column-count:3 } }
@media (max-width:860px){  .gallery-grid{ column-count:2 } }
@media (max-width:520px){  .gallery-grid{ column-count:1 } }

.g-item{
    break-inside:avoid;
    margin: 0 0 var(--gap);
    position:relative;
    background:#000;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow: 0 18px 38px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.08);
    background-clip: padding-box;
}
.g-item::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    padding:1px;
    background: linear-gradient(180deg, rgba(185,150,90,.65), rgba(185,150,90,.18));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.35; transition: opacity .25s ease;
}
.g-item:hover::after{ opacity:.6 }

.g-item img{
    width:100%;
    height:var(--thumb-h);
    object-fit:cover;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease, opacity .35s ease;
    will-change: transform, filter, opacity;
}
.g-item:hover img{ transform:scale(1.035); filter:saturate(1.06) }

.g-item.is-hidden{ display:none }

/* ====== FILLERS (cartes factices pour combler la grille) ====== */
.g-filler{
    break-inside: avoid;
    margin: 0 0 var(--gap);
    position: relative;
    background: #111;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.08);
    background-clip: padding-box;
    height: var(--thumb-h);               /* même hauteur qu'une image */
    display: flex; align-items: center; justify-content: center;
}
.g-filler::after{                          /* liseré doré identique */
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    padding:1px;
    background: linear-gradient(180deg, rgba(185,150,90,.65), rgba(185,150,90,.18));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.35;
}
.filler-inner{
    position: relative; z-index: 1;
    text-align:center; padding: 12px;
}
.filler-text{
    display:block;
    font-family:"Cinzel", serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size: clamp(16px, 1.6vw, 22px);
    padding: 0 12px;

    background: linear-gradient(90deg, #b9965a, #e7c880, #b9965a);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;

    opacity:.75;
    text-shadow: 0 2px 14px rgba(0,0,0,.65);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
/* cacher les fillers en mobile si tu veux éviter les doublons */
@media (max-width:720px){
    .g-filler{ display:none !important; }
}

/* Révélations douces */
.reveal{ opacity:0; transform:translateY(16px); transition: opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

/* =========================================================
   Mobile layout (≤ 720px)
   ========================================================= */
@media (max-width: 720px){
    .gallery-filters{
        position: sticky;
        top: calc(56px + 8px);
        z-index: 20;
        padding: 10px 12px;
        margin-top: 8px;
        backdrop-filter: saturate(1.1) blur(6px);
        background: linear-gradient(180deg, rgba(12,12,12,.75), rgba(12,12,12,.35));
        border-radius: 12px;
    }
    .gallery-wrap{
        width: var(--container);
        margin: 12px auto 56px;
    }
    .gallery-grid{
        column-count: initial;
        column-gap: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .g-item{
        margin: 0;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.08);
        position: relative;
        isolation: isolate;
    }
    .g-item::after{ opacity:.4 }
    .g-item img{
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform .28s ease, filter .25s ease, opacity .25s ease;
    }
    .g-item:active img{ transform: scale(.99); filter: saturate(1.03); }
    .g-item::before{
        content:"";
        position:absolute; inset:0; z-index:1;
        background: linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,0) 40%);
        opacity:.0; transition: opacity .25s ease;
    }
    .g-item:active::before{ opacity:.25; }
    .gallery-grid .g-item:nth-child(6n+1){
        grid-column: 1 / -1;
    }
    .gallery-grid .g-item:nth-child(6n+1) img{
        aspect-ratio: 16 / 10;
    }
    .section-head{ margin: 20px auto 8px; }
    .hero-sub{ font-size: 14px; }
    .lb-close{
        width:48px; height:48px; border-radius:14px; font-size:30px;
    }
}

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox{
    position:fixed; inset:0; z-index:4500;
    background:rgba(0,0,0,.92);
    display:none;
    align-items:center; justify-content:center;
    padding:16px;
}
.lightbox.is-open{ display:flex }
.lightbox img{
    max-width:92vw; max-height:92vh;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.lb-close{
    position:absolute; top:18px; right:18px; z-index:2;
    width:44px; height:44px; border-radius:12px;
    background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
    font-size:28px; line-height:1;
    transition: background .18s ease, transform .06s ease;
}
.lb-close:hover{ background:rgba(255,255,255,.22) }
.lb-close:active{ transform:translateY(1px) }

/* =========================================================
   Accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    .g-item img, .g-item::before { transition:none !important; }
}

/* ===== Bande dorée animée — page Restaurant ===== */
.gold-luxe-band{
    padding: 24px 18px 0;
    background: #0c0c0c;
}
.gold-luxe-band .glb-canvas{
    height: clamp(110px, 18vw, 160px);
    border: 8px solid #b9965a;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #6a4b16 0%, #b9965a 35%, #e7c880 60%, #b9965a 85%, #6a4b16 100%);
    background-size: 200% 200%;
    animation: goldFlow 8s linear infinite;
    box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
}
.gold-luxe-band .glb-canvas::before{
    content:"";
    position:absolute; inset:0; pointer-events:none; opacity:.12;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #000 35%, transparent 36%),
        radial-gradient(1px 1px at 30% 80%, #000 35%, transparent 36%),
        radial-gradient(1px 1px at 70% 40%, #000 35%, transparent 36%),
        radial-gradient(1px 1px at 90% 60%, #000 35%, transparent 36%);
    background-size: 140px 140px, 180px 180px, 170px 170px, 210px 210px;
    mix-blend-mode: multiply;
}
.gold-luxe-band .glb-canvas::after{
    content:"";
    position:absolute; inset:-20%;
    background: linear-gradient(120deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 60%);
    transform: translateX(-60%) rotate(12deg);
    animation: shineSweep 2.8s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Bande dorée luxe avec texte */
.glb-wrap{ padding: 28px 18px 0; background:#fff; }
.glb-band{
    max-width:1180px; margin:0 auto;
    border:8px solid #b9965a; border-radius:22px;
    padding:18px; position:relative; overflow:hidden;
    display:grid; place-items:center;
    background: #111;
}
.glb-text{
    display:block;
    font-family:"Cinzel", serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    text-align:center;
    background: linear-gradient(90deg, #b9965a, #e7c880, #b9965a);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: clamp(18px, 5.2vw, 34px);
    opacity:.34;
    text-shadow: 0 0 8px rgb(185, 150, 90), 0 2px 18px rgb(0, 0, 0);
}
@media (max-width:640px){
    .glb-text{ opacity: .38; }
}
.glb-band::before{
    content:"";
    position:absolute; inset:0;
    background:
        linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.22) 48%,
        rgba(0,0,0,.22) 52%,
        rgba(0,0,0,0) 100%);
    pointer-events:none; z-index:0;
}
.glb-text{ position: relative; z-index: 1; }

/* Animations bande */
@keyframes goldFlow{
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes shineSweep{
    0%   { transform: translateX(-60%) rotate(12deg); opacity:.0; }
    35%  { opacity:.55; }
    60%  { transform: translateX(60%) rotate(12deg); opacity:.0; }
    100% { transform: translateX(60%) rotate(12deg); opacity:.0; }
}
@media (prefers-reduced-motion: reduce){
    .gold-luxe-band .glb-canvas{ animation: none; }
    .gold-luxe-band .glb-canvas::after{ animation: none; }
}