:root{
    --cream:#F1EBDD;
    --cream-soft:#F7F3EA;
    --wood:#5B4530;
    --wood-deep:#3E2F20;
    --charcoal:#22201C;
    --beige:#DACBAA;
    --terracotta:#AD5B34;
    --line: rgba(34,32,28,0.14);
    --line-light: rgba(247,243,234,0.22);
    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--cream);
    color:var(--charcoal);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{ display:block; max-width:100%; }

  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:var(--sans);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--terracotta);
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:440;
    letter-spacing:-0.01em;
    line-height:1.08;
  }

  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 6vw;
  }

  /* ---------- reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.is-visible{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem 6vw;
    transition:background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(241,235,221,0.92);
    backdrop-filter:blur(10px);
    padding:1rem 6vw;
    border-bottom:1px solid var(--line);
  }
  .nav-mark{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-family:var(--serif);
    font-size:1.05rem;
    letter-spacing:0.02em;
    color:var(--cream-soft);
    transition:color .4s ease;
  }
  .nav.scrolled .nav-mark{ color:var(--charcoal); }
  .nav-mark svg{ width:26px; height:26px; flex-shrink:0; }
  .nav-mark-img{
    width:26px; height:26px;
    object-fit:contain;
    flex-shrink:0;
    filter:none;
    transition:filter .4s ease;
  }
  .nav.scrolled .nav-mark-img{ filter:brightness(0) opacity(0.82); }
  .nav-mark .mark-line{ stroke:var(--cream-soft); transition:stroke .4s ease; }
  .nav.scrolled .nav-mark .mark-line{ stroke:var(--wood); }

  .nav-links{
    display:flex;
    align-items:center;
    gap:2.4rem;
  }
  .nav-links a{
    font-size:0.82rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--cream-soft);
    opacity:0.88;
    transition:opacity .3s ease, color .4s ease;
  }
  .nav.scrolled .nav-links a{ color:var(--charcoal); }
  .nav-links a:hover{ opacity:1; }
  .nav-links a.btn-reserve{
    opacity:1;
    padding:0.55rem 1.2rem;
    border:1px solid var(--cream-soft);
    border-radius:2px;
    transition:background .3s ease, color .3s ease, border-color .4s ease;
  }
  .nav.scrolled .nav-links a.btn-reserve{ border-color:var(--wood); color:var(--wood); }
  .nav-links a.btn-reserve:hover{ background:var(--cream-soft); color:var(--wood-deep); }
  .nav.scrolled .nav-links a.btn-reserve:hover{ background:var(--wood); color:var(--cream); }

  .nav-toggle{ display:none; }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:560px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    color:var(--cream-soft);
    overflow:hidden;
  }
  .hero-media{
    position:absolute; inset:0;
    z-index:0;
  }
  .hero-media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 62%;
    transform:scale(1.06);
  }
  .hero-media::after{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(20,17,13,0.42) 0%, rgba(20,17,13,0.18) 30%, rgba(20,17,13,0.55) 78%, rgba(20,17,13,0.86) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding:0 6vw 5.5rem;
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
  }
  .hero-eyebrow{
    font-size:0.74rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--beige);
    font-weight:600;
  }
  .hero-mark{
    width:min(210px, 46vw);
    margin:0 auto;
  }
  .hero-mark img{ width:100%; height:auto; }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    color:var(--cream-soft);
    max-width:16ch;
  }
  .hero p{
    font-size:1.02rem;
    color:rgba(247,243,234,0.86);
    max-width:44ch;
    margin:0 auto;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:1.3rem;
    margin-top:0.4rem;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0.95rem 1.9rem;
    font-size:0.86rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    font-weight:600;
    border-radius:2px;
    transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
  }
  .btn-primary{
    background:var(--terracotta);
    color:var(--cream-soft);
    border:1px solid var(--terracotta);
  }
  .btn-primary:hover{ background:#96491F; border-color:#96491F; transform:translateY(-1px); }

  .hero-phone{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-family:var(--sans);
    font-weight:500;
    font-size:0.95rem;
    color:var(--cream-soft);
    letter-spacing:0.01em;
  }
  .hero-phone svg{ width:16px; height:16px; opacity:0.85; }

  .scroll-cue{
    position:absolute;
    bottom:1.7rem; left:50%;
    transform:translateX(-50%);
    z-index:2;
    width:1px; height:34px;
    background:linear-gradient(180deg, rgba(247,243,234,0.8), rgba(247,243,234,0));
    animation: cue 2.2s ease-in-out infinite;
  }
  @keyframes cue{
    0%{ opacity:0.2; transform:translate(-50%,-6px); }
    50%{ opacity:1; transform:translate(-50%,4px); }
    100%{ opacity:0.2; transform:translate(-50%,-6px); }
  }
  @media (prefers-reduced-motion: reduce){ .scroll-cue{ animation:none; } }

  /* ---------- section shells ---------- */
  section{ position:relative; }

  .section-pad{ padding:7.5rem 0; }
  @media (max-width:760px){ .section-pad{ padding:5rem 0; } }

  .section-head{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    max-width:640px;
    margin-bottom:3.2rem;
  }
  .section-head h2{
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  }

  .rule{
    width:44px; height:1px;
    background:var(--wood);
    opacity:0.5;
  }

  /* window motif divider */
  .window-motif{
    width:30px; height:30px;
    opacity:0.55;
  }

  /* ---------- concept (La Grange) ---------- */
  .concept{ background:var(--cream); }
  .concept-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
    align-items:start;
  }
  .concept-label{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
  }
  .concept-label h2{
    font-size:clamp(2rem, 3.6vw, 2.9rem);
    color:var(--wood-deep);
  }
  .concept-copy p{
    font-size:1.08rem;
    color:#3a352d;
    max-width:52ch;
  }
  .concept-copy p + p{ margin-top:1.1rem; }
  .concept-figure{
    margin-top:2.2rem;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
  }
  .concept-stat{
    border-top:1px solid var(--line);
    padding-top:0.9rem;
  }
  .concept-stat b{
    display:block;
    font-family:var(--serif);
    font-size:1.7rem;
    color:var(--terracotta);
    font-weight:440;
  }
  .concept-stat span{
    font-size:0.8rem;
    color:#5c564a;
  }

  @media (max-width:860px){
    .concept-grid{ grid-template-columns:1fr; gap:2.2rem; }
  }

  /* ---------- cuisine ---------- */
  .cuisine{
    background:var(--wood-deep);
    color:var(--cream-soft);
  }
  .cuisine .section-head .eyebrow{ color:var(--beige); }
  .cuisine .section-head h2{ color:var(--cream-soft); }
  .cuisine .section-head p{ color:rgba(247,243,234,0.78); font-size:1.05rem; max-width:56ch; }
  .cuisine .rule{ background:var(--beige); opacity:0.6; }

  .mosaic{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:120px;
    gap:1rem;
  }
  .mosaic figure{
    position:relative;
    overflow:hidden;
    border-radius:2px;
  }
  .mosaic img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.7s ease;
  }
  .mosaic figure:hover img{ transform:scale(1.055); }
  .mosaic figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:1rem 1.1rem;
    font-family:var(--serif);
    font-size:0.98rem;
    color:var(--cream-soft);
    background:linear-gradient(0deg, rgba(15,12,9,0.72), rgba(15,12,9,0));
  }

  .m1{ grid-column:1 / span 3; grid-row:1 / span 3; }
  .m2{ grid-column:4 / span 3; grid-row:1 / span 2; }
  .m3{ grid-column:4 / span 3; grid-row:3 / span 2; }
  .m4{ grid-column:1 / span 2; grid-row:4 / span 2; }
  .m5{ grid-column:3 / span 4; grid-row:5 / span 2; }

  @media (max-width:900px){
    .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .m1{ grid-column:1 / span 2; grid-row:auto / span 3; }
    .m2{ grid-column:1; grid-row:auto / span 2; }
    .m3{ grid-column:2; grid-row:auto / span 2; }
    .m4{ grid-column:1; grid-row:auto / span 2; }
    .m5{ grid-column:2; grid-row:auto / span 2; }
  }

  .menu-note{
    margin-top:3.4rem;
    padding-top:2.4rem;
    border-top:1px solid var(--line-light);
    display:grid;
    grid-template-columns:0.7fr 1.3fr;
    gap:2.4rem;
    align-items:start;
  }
  .menu-note h3{
    font-size:1.5rem;
    color:var(--cream-soft);
  }
  .menu-note p{
    color:rgba(247,243,234,0.78);
    font-size:1.02rem;
    max-width:56ch;
  }
  @media (max-width:760px){
    .menu-note{ grid-template-columns:1fr; gap:0.8rem; }
  }

  /* ---------- Arnaud ---------- */
  .host{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    background:var(--cream-soft);
  }
  .host-media{ position:relative; min-height:560px; }
  .host-media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 40%;
    position:absolute; inset:0;
  }
  .host-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.3rem;
    padding:6rem 6vw;
  }
  .host-copy h2{
    font-size:clamp(2rem, 3.4vw, 2.8rem);
    color:var(--wood-deep);
  }
  .host-copy p{
    font-size:1.08rem;
    color:#3a352d;
    max-width:44ch;
  }
  .host-copy .quote{
    font-family:var(--serif);
    font-style:italic;
    font-size:1.3rem;
    color:var(--wood);
    max-width:24ch;
    line-height:1.4;
    border-left:2px solid var(--terracotta);
    padding-left:1.2rem;
    margin-top:0.4rem;
  }
  .host-name{
    font-size:0.85rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#5c564a;
  }

  @media (max-width:860px){
    .host{ grid-template-columns:1fr; }
    .host-media{ min-height:380px; }
    .host-copy{ padding:3.6rem 6vw; }
  }

  /* ---------- Le lieu ---------- */
  .place{ background:var(--cream); }
  .place-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:2rem;
    margin-bottom:2.6rem;
    flex-wrap:wrap;
  }
  .place-head p{
    max-width:36ch;
    color:#3a352d;
    font-size:1.02rem;
  }
  .place-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:1.2rem;
  }
  .place-grid img{
    width:100%; height:100%;
    object-fit:cover;
    border-radius:2px;
  }
  .place-tall{ height:560px; }
  .place-side{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
  }
  .place-side .box{
    height:calc((560px - 1.2rem)/2);
    overflow:hidden;
    border-radius:2px;
  }
  .place-side .box.text-box{
    background:var(--wood-deep);
    color:var(--cream-soft);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2rem;
    gap:0.7rem;
  }
  .place-side .box.text-box .eyebrow{ color:var(--beige); }
  .place-side .box.text-box p{ font-size:0.98rem; color:rgba(247,243,234,0.82); }

  @media (max-width:860px){
    .place-grid{ grid-template-columns:1fr; }
    .place-tall{ height:340px; }
    .place-side{ flex-direction:row; }
    .place-side .box{ height:260px; width:50%; }
  }
  @media (max-width:560px){
    .place-side{ flex-direction:column; }
    .place-side .box{ width:100%; height:220px; }
  }

  /* ---------- reservation ---------- */
  .reserve{
    background:var(--beige);
    text-align:center;
  }
  .reserve-inner{
    max-width:640px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.6rem;
  }
  .reserve .window-motif{ opacity:0.7; }
  .reserve h2{
    font-size:clamp(2.1rem, 4.4vw, 3.1rem);
    color:var(--wood-deep);
  }
  .reserve p{ color:#4a4234; font-size:1.05rem; max-width:40ch; }
  .reserve-phone{
    font-family:var(--serif);
    font-size:clamp(1.8rem, 3.6vw, 2.4rem);
    color:var(--wood-deep);
    letter-spacing:0.01em;
  }
  .reserve-phone:hover{ color:var(--terracotta); }
  .reserve-note{
    font-size:0.82rem;
    letter-spacing:0.03em;
    color:#6b6252;
  }
  .reserve-groups{
    margin-top:1rem;
    padding-top:2.2rem;
    border-top:1px solid rgba(62,47,32,0.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.7rem;
  }
  .reserve-groups h3{
    font-size:1.35rem;
    color:var(--wood-deep);
  }
  .reserve-groups p{ font-size:0.98rem; max-width:38ch; }
  .reserve-groups a{
    font-size:0.9rem;
    font-weight:600;
    color:var(--terracotta);
    letter-spacing:0.02em;
  }
  .reserve-groups a:hover{ color:var(--wood-deep); }

  /* ---------- infos pratiques ---------- */
  .infos{ background:var(--cream); }
  .infos-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2.4rem;
  }
  .infos-item{
    border-top:1px solid var(--line);
    padding-top:1.4rem;
  }
  .infos-item .eyebrow{ color:var(--wood); }
  .infos-item p{
    font-family:var(--serif);
    font-size:1.25rem;
    color:var(--wood-deep);
    margin-top:0.5rem;
    line-height:1.3;
  }
  .infos-note{
    margin-top:2.6rem;
    font-size:0.95rem;
    font-style:italic;
    color:#5c564a;
    max-width:52ch;
  }
  @media (max-width:960px){
    .infos-grid{ grid-template-columns:repeat(2, 1fr); gap:2rem; }
  }
  @media (max-width:560px){
    .infos-grid{ grid-template-columns:1fr; gap:1.6rem; }
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--charcoal);
    color:rgba(247,243,234,0.75);
    padding:3.6rem 0 2.2rem;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:2.4rem;
    padding-bottom:2.4rem;
    border-bottom:1px solid var(--line-light);
  }
  .footer-mark{
    display:flex;
    align-items:center;
    gap:0.7rem;
    font-family:var(--serif);
    font-size:1.15rem;
    color:var(--cream-soft);
  }
  .footer-mark svg{ width:28px; height:28px; }
  .footer-links{
    display:flex;
    gap:2.6rem;
    flex-wrap:wrap;
  }
  .footer-col{ font-size:0.9rem; }
  .footer-col .eyebrow{ display:block; margin-bottom:0.6rem; color:var(--beige); }
  .footer-col a, .footer-col span{ display:block; color:rgba(247,243,234,0.75); margin-bottom:0.35rem; }
  .footer-col a:hover{ color:var(--cream-soft); }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0.8rem;
    padding-top:1.6rem;
    font-size:0.78rem;
    color:rgba(247,243,234,0.5);
  }

  /* mobile nav */
  @media (max-width:760px){
    .nav-links{
      position:fixed;
      inset:0;
      flex-direction:column;
      justify-content:center;
      background:var(--wood-deep);
      transform:translateX(100%);
      transition:transform .4s ease;
      gap:2.2rem;
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-links a{ color:var(--cream-soft); font-size:1.1rem; }
    .nav-links a.btn-reserve{ border-color:var(--cream-soft); }
    .nav-toggle{
      display:flex;
      flex-direction:column;
      gap:5px;
      width:26px;
      z-index:110;
      background:none; border:none; cursor:pointer;
      padding:0;
    }
    .nav-toggle span{
      display:block; height:1.5px; width:100%;
      background:var(--cream-soft);
      transition:background .4s ease;
    }
    .nav.scrolled .nav-toggle span{ background:var(--charcoal); }
    .nav-toggle.open span{ background:var(--cream-soft); }
  }

/* ---------- legal page ---------- */
.legal-header{
  padding:9.5rem 0 3rem;
  background:var(--cream);
}
.legal-header .back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--wood);
  margin-bottom:1.6rem;
}
.legal-header .back-link:hover{ color:var(--terracotta); }
.legal-header .back-link svg{ width:14px; height:14px; }
.legal-header h1{
  font-size:clamp(2.1rem, 4vw, 2.9rem);
  color:var(--wood-deep);
  margin-top:0.6rem;
}
.legal-header .rule{ margin-top:1.4rem; }

.legal{ background:var(--cream); }
.legal-grid{
  display:flex;
  flex-direction:column;
  gap:3.4rem;
  max-width:760px;
}
.legal-block h2{
  font-size:1.45rem;
  color:var(--wood-deep);
  margin-bottom:0.9rem;
}
.legal-block p{
  font-size:1rem;
  color:#3a352d;
  max-width:60ch;
}
.legal-block p + p{ margin-top:0.9rem; }
.legal-block a{
  color:var(--terracotta);
  font-weight:600;
}
.legal-block a:hover{ color:var(--wood-deep); }

.legal-fields{
  margin-top:1.6rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem 2rem;
  border-top:1px solid var(--line);
  padding-top:1.6rem;
}
.legal-field .eyebrow{ display:block; color:var(--wood); margin-bottom:0.35rem; }
.legal-field p{
  font-size:0.98rem;
  color:var(--wood-deep);
  margin:0;
}
.legal-field p.pending{
  font-style:italic;
  color:var(--terracotta);
  opacity:0.85;
}
@media (max-width:560px){
  .legal-fields{ grid-template-columns:1fr; }
}

.legal-nav-simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 6vw;
  background:rgba(241,235,221,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}
.legal-nav-simple .nav-mark{ color:var(--charcoal); }
.legal-nav-simple .nav-mark-img{ filter:brightness(0) opacity(0.82); }
.legal-nav-simple .home-link{
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--wood);
  padding:0.55rem 1.1rem;
  border:1px solid var(--wood);
  border-radius:2px;
  transition:background .3s ease, color .3s ease;
}
.legal-nav-simple .home-link:hover{ background:var(--wood); color:var(--cream); }

.footer-bottom a{ color:rgba(247,243,234,0.55); transition:color .3s ease; }
.footer-bottom a:hover{ color:var(--cream-soft); }