/* ============================================================
   CHEZ MANOU — Brand design system  (v2 · from the real identity)
   Bistrot français on the port of Saint-Jean-Cap-Ferrat.
   Reverse-engineered from the restaurant's own brand card & photos:
   deep WINE/bordeaux on warm BLUSH-CREAM, GOLD for the evening register,
   classic serif caps wordmark, laurel + heart ornaments, double-rule frames.
   ============================================================ */

:root{
  /* ---- colour tokens ---- */
  --paper:       #F5EAE0;   /* warm blush-cream — the brand card ground, 70% of every page */
  --paper-deep:  #EFE0D2;   /* surface — cards, insets, footer panels */
  --paper-warm:  #F0E2D8;
  --ink:         #2E2320;   /* warm near-black brown — primary text */
  --ink-soft:    #5B4B42;   /* secondary text */
  --ink-mute:    #9C8B7E;   /* captions, meta, hairlines */
  --hairline:    #E2D3C2;   /* hairlines on cream */
  --hairline-2:  #D2BDA6;   /* stronger / dashed */

  --wine:        #8A2A33;   /* THE accent — bordeaux of the wordmark */
  --wine-deep:   #6E1F28;
  --wine-soft:   #EFD9D5;   /* wine tint background */
  --gold:        #BE9A56;   /* elegant evening accent (gold serif on dark) */
  --gold-deep:   #9E7E40;
  --olive:       #6E7A4A;   /* laurel / herb green */
  --night:       #241A18;   /* inverted sections — candlelit warm dark */

  /* legacy aliases (so older markup keeps working, now on-brand) */
  --coquelicot:  var(--wine);
  --coquelicot-deep: var(--wine-deep);
  --sun:         var(--gold);
  --leaf:        var(--olive);
  --navy:        var(--night);

  /* ---- type ---- */
  --display: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --script:  "Pinyon Script", "Snell Roundhand", cursive;
  --body:    "Inter", -apple-system, system-ui, sans-serif;
  --hand:    "Caveat", "Bradley Hand", cursive;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- spacing (4-base) ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; --s11:12rem;

  --maxw: 1240px;
  --read: 680px;
}

/* ============ reset & base ============ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(rgba(138,42,51,0.035) 1px, transparent 1px),
    radial-gradient(rgba(120,90,60,0.03) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ============ typography ============ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:-0.01em; margin:0; color:var(--ink); }
h1{ font-size:clamp(46px,6.6vw,88px); line-height:1.0; letter-spacing:-0.015em; }
h2{ font-size:clamp(30px,3.6vw,50px); line-height:1.04; }
h3{ font-size:clamp(21px,2.3vw,28px); line-height:1.14; }
h4{ font-size:20px; line-height:1.2; }
p{ margin:0; }

.eyebrow{
  font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--wine);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow .rule{ width:30px; height:1px; background:var(--wine); display:inline-block; opacity:.6; }
.lead{
  font-family:var(--display); font-size:clamp(20px,2.4vw,27px); line-height:1.42;
  color:var(--ink); font-style:italic; font-weight:400; max-width:62ch;
}
.body{ font-size:16px; line-height:1.68; color:var(--ink-soft); }
.body-s{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
.meta{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--ink-mute); }
.hand{ font-family:var(--hand); color:var(--wine); }
.script{ font-family:var(--script); color:var(--wine); font-weight:400; }
em,.em{ font-style:italic; color:var(--wine); }
.muted{ color:var(--ink-mute); }

/* ============ layout ============ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(24px,5vw,56px); }
section{ padding-block:clamp(var(--s9),11vw,var(--s11)); }
.section-head{ margin-bottom:var(--s7); max-width:64ch; }
.section-head .eyebrow{ margin-bottom:var(--s4); }
.divider{ height:1px; background:var(--hairline); border:0; margin:0; }

.grid{ display:grid; gap:clamp(20px,3vw,32px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:1fr;} .g2{grid-template-columns:1fr;} }

.inverted{ background:var(--night); color:var(--paper); }
.inverted h1,.inverted h2,.inverted h3,.inverted h4{ color:var(--paper); }
.inverted .body,.inverted .body-s{ color:rgba(245,234,224,0.78); }
.inverted .eyebrow{ color:var(--gold); }
.inverted .eyebrow .rule{ background:var(--gold); }
.inverted .divider{ background:rgba(245,234,224,0.16); }
.surface{ background:var(--paper-deep); }

/* double-rule frame (the brand card border) */
.frame{ position:relative; }
.frame::before{ content:""; position:absolute; inset:14px; border:1px solid var(--wine); opacity:.32; pointer-events:none; }
.frame::after{ content:""; position:absolute; inset:18px; border:1px solid var(--wine); opacity:.18; pointer-events:none; }

/* ============ ornaments ============ */
.star{ font-family:var(--display); line-height:1; display:inline-block; color:var(--wine); }
.star.sun{ color:var(--gold); }
.star.red{ color:var(--wine); }
.star.paper{ color:var(--paper); }

/* heart motif */
.heart{ display:inline-block; color:var(--wine); line-height:1; }
.heart.gold{ color:var(--gold); }
.heart.paper{ color:var(--paper); }

/* laurel sprig — inline svg helper sizing */
.laurel{ display:inline-flex; align-items:center; justify-content:center; color:var(--wine); }
.laurel svg{ display:block; width:100%; height:100%; }
.laurel.gold{ color:var(--gold); }

/* small flourish rule with centered diamond/heart */
.flourish{ display:flex; align-items:center; gap:14px; color:var(--wine); }
.flourish::before,.flourish::after{ content:""; height:1px; background:currentColor; opacity:.4; flex:1; max-width:60px; }
.flourish .dot{ width:5px; height:5px; transform:rotate(45deg); background:currentColor; }

/* brush dash (kept, now wine) */
.brush{ width:var(--bw,72px); height:var(--bh,5px); background:var(--wine); border-radius:8px; position:relative; display:inline-block; }
.brush::before{ content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:8px; height:calc(var(--bh,5px) + 3px); background:inherit; border-radius:50%; }
.brush::after{ content:""; position:absolute; right:-12px; top:50%; transform:translateY(-50%) scaleX(0.5); width:16px; height:var(--bh,5px); background:inherit; border-radius:50%; }
.brush.red{ background:var(--wine); }
.brush.sun{ background:var(--gold); }
.brush.paper{ background:var(--paper); }

/* dotted rule */
.dotted{ display:inline-flex; gap:8px; align-items:center; }
.dotted i{ width:5px; height:5px; border-radius:50%; background:var(--wine); display:inline-block; }
.dotted i.red{ background:var(--wine); }
.dotted i.sun{ background:var(--gold); }

/* seal (now wine) */
.seal{ position:relative; width:var(--sz,150px); height:var(--sz,150px); }
.seal svg{ width:100%; height:100%; display:block; }
.seal .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--display); font-size:calc(var(--sz,150px)*0.2); line-height:1; letter-spacing:-0.01em; text-align:center; color:var(--wine); }
.seal .center .small{ font-family:var(--body); font-size:calc(var(--sz,150px)*0.058); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* Manou oval emblem (their real logo art) */
.emblem{ display:inline-block; }
.emblem img{ width:100%; height:auto; mix-blend-mode:multiply; }

/* stamp / tag */
.stamp{
  border:1px solid var(--wine); padding:9px 15px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--wine);
  background:transparent; border-radius:1px;
}
.stamp.dark{ background:var(--night); color:var(--paper); border-color:var(--night); }
.stamp.gold{ border-color:var(--gold); color:var(--gold-deep); }
.stamp.dashed{ border-style:dashed; }
.stamp i.d{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }

/* numeral label (n° xx) */
.num{ font-family:var(--display); line-height:0.9; letter-spacing:-0.03em; color:var(--ink); font-weight:500; }
.num .sup{ font-family:var(--display); font-size:0.32em; vertical-align:top; color:var(--wine); font-style:italic; margin-right:2px; }

/* ============ buttons ============ */
.btn{
  font-family:var(--body); font-size:15px; font-weight:500; letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 26px; border:1px solid var(--wine); background:var(--wine); color:var(--paper);
  border-radius:2px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(138,42,51,0.55); background:var(--wine-deep); border-color:var(--wine-deep); }
.btn .heart,.btn .star{ font-size:13px; color:var(--gold); }
.btn.ghost{ background:transparent; color:var(--wine); }
.btn.ghost:hover{ background:var(--wine); color:var(--paper); }
.btn.red{ background:var(--wine); border-color:var(--wine); color:var(--paper); }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.btn.gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.btn.on-dark{ background:var(--paper); border-color:var(--paper); color:var(--wine); }
.btn.on-dark:hover{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.btn.on-dark .heart,.btn.on-dark .star{ color:var(--wine); }

/* inline link — wine underline grows on hover */
.link{ position:relative; text-decoration:none; padding-bottom:2px; white-space:nowrap; color:var(--wine); }
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--wine);
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.link:hover::after{ transform:scaleX(1); }
.link .arrow{ transition:transform .25s ease; display:inline-block; }
.link:hover .arrow{ transform:translateX(4px); }

/* ============ cards ============ */
.card{
  background:var(--paper); border:1px solid var(--hairline); padding:clamp(24px,3vw,32px);
  display:flex; flex-direction:column; gap:var(--s4); position:relative;
  transition:transform .28s ease, box-shadow .28s ease;
}
.card.cream{ background:var(--paper-deep); border-color:transparent; }
.card.hover:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(46,35,32,0.35); }
.card .corner-ix{ position:absolute; top:16px; right:18px; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ink-mute); }

/* ============ forms ============ */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s5); }
.field label{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--hairline-2); padding:11px 2px; border-radius:0; appearance:none;
  transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom:2px solid var(--wine); padding-bottom:10px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-mute); }

/* ============ nav ============ */
.nav{ position:sticky; top:0; z-index:50; background:rgba(245,234,224,0.9); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:15px; }
.brandmark{ font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; color:var(--wine); line-height:1; }
.brandmark .dot{ color:var(--gold); }
.brandmark .sub{ display:block; font-family:var(--body); font-size:8.5px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-mute); margin-top:5px; }
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:14px; letter-spacing:0.02em; color:var(--ink); position:relative; }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--wine); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{ transform:scaleX(1); }
.lang{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; cursor:pointer; background:none; border:0; color:var(--ink-mute); padding:4px; }
.lang .is-on{ color:var(--wine); font-weight:600; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--wine); margin:5px 0; transition:.25s; }
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--hairline); padding:8px 24px 24px;
    transform:translateY(-130%); transition:transform .3s ease; box-shadow:0 20px 30px -24px rgba(0,0,0,.3); }
  .nav.open .nav-links{ transform:translateY(0); }
  .nav-links li{ width:100%; border-bottom:1px solid var(--hairline); }
  .nav-links li:last-child{ border-bottom:0; padding-top:14px; }
  .nav-links a{ display:block; padding:16px 0; font-size:18px; font-family:var(--display); }
}

/* ============ footer ============ */
.foot{ background:var(--night); color:var(--paper); padding-block:var(--s9) var(--s6); }
.foot a{ color:rgba(245,234,224,0.85); text-decoration:none; }
.foot a:hover{ color:var(--gold); }
.foot .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7); padding-bottom:var(--s7); border-bottom:1px solid rgba(245,234,224,0.16); }
.foot h4{ font-family:var(--body); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s4); font-weight:600; }
.foot .legal{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding-top:var(--s5);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:rgba(245,234,224,0.55); flex-wrap:wrap; }
.foot .wordmark{ font-family:var(--display); font-size:38px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; line-height:1; color:var(--paper); }
.foot .wordmark .dot{ color:var(--gold); }
@media (max-width:760px){ .foot .cols{ grid-template-columns:1fr; gap:var(--s6); } }

/* ============ photo slots / images ============ */
.photo{ position:relative; overflow:hidden; background:var(--paper-deep); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo.r45{ aspect-ratio:4/5; }
.photo.r169{ aspect-ratio:16/9; }
.photo.r32{ aspect-ratio:3/2; }
.photo.r11{ aspect-ratio:1/1; }
.photo .slot{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:repeating-linear-gradient(135deg, rgba(138,42,51,0.05) 0 1px, transparent 1px 12px), var(--paper-deep);
  color:var(--ink-mute); text-align:center; padding:24px; }
.photo .slot .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; }
.photo .slot .desc{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink-soft); max-width:24ch; }
.photo.framed{ box-shadow:0 1px 0 0 var(--hairline); }
.photo.framed::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(245,234,224,0.55); pointer-events:none; }

/* ============ motion ============ */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .btn:hover{ transform:none; }
}

/* ============ lang visibility ============ */
[data-en=""]{ display:none; }
html[lang="en"] [data-fr=""]{ display:none; }
html[lang="en"] [data-en=""]{ display:revert; }

/* focus */
:focus-visible{ outline:2px solid var(--wine); outline-offset:2px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--wine); color:var(--paper); padding:10px 16px; z-index:100; }
.skip:focus{ left:8px; top:8px; }