/* =========================================================
   Partages — Restaurant à partager · Montparnasse, Paris 14e
   Design system. Palette: aubergine nuit + laiton + olive.
   Type: Fraunces (display) / Spectral (texte) / DM Mono (labels)
   ========================================================= */

:root{
  --ink:#211A24;        /* aubergine nuit  */
  --ink-2:#2A2030;
  --ink-3:#181219;
  --bone:#F4EFE6;       /* papier chaud    */
  --bone-2:#ECE3D4;
  --paper:#FBF8F1;
  --brass:#C2974B;      /* laiton          */
  --brass-d:#A87C36;
  --brass-l:#E2BE72;
  --olive:#5B6B43;      /* herbe / saison  */
  --wine:#7A2E33;       /* grenat          */
  --text:#2C2630;
  --text-soft:#5C5560;
  --line:#E0D6C5;
  --line-dark:rgba(226,190,114,.22);
  --bone-rgb:244,239,230;

  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Spectral",Georgia,serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;

  --wrap:1140px;
  --gap:clamp(2.6rem,6vw,5.5rem);
  --radius:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f-body);color:var(--text);
  background:var(--paper);font-size:18px;line-height:1.72;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:560;line-height:1.08;
  letter-spacing:-.01em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
p{margin:0 0 1.1em}
strong{font-weight:600;color:var(--ink)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
.section{padding-block:var(--gap)}
.lead{font-size:clamp(1.12rem,1.7vw,1.32rem);color:var(--text-soft);line-height:1.65}

/* --- eyebrow / labels (mono) --- */
.eyebrow{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass-d);font-weight:500;
  display:inline-block;margin-bottom:1.1rem;
}
.eyebrow.on-dark{color:var(--brass-l)}

/* --- signature divider : filet + losange laiton --- */
.rule{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--brass)}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--line)}
.rule .dot{width:7px;height:7px;background:var(--brass);transform:rotate(45deg)}
.rule.on-dark::before,.rule.on-dark::after{background:var(--line-dark)}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.95rem 1.7rem;border-radius:var(--radius);
  background:var(--brass);color:#231a10;font-weight:500;
  border:1px solid var(--brass);transition:.2s ease;cursor:pointer;
}
.btn:hover{background:var(--brass-l);border-color:var(--brass-l);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass-d);transform:translateY(-2px)}
.btn-ghost.on-dark{color:var(--bone);border-color:var(--line-dark)}
.btn-ghost.on-dark:hover{border-color:var(--brass-l);color:var(--brass-l)}

/* =========================================================
   Header
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,241,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:74px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .mark{width:38px;height:38px;border-radius:9px}
.brand .name{font-family:var(--f-display);font-size:1.55rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em}
.brand .name b{color:var(--brass-d);font-weight:600}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);transition:.18s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brass-d)}
.nav .btn{padding:.7rem 1.2rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:.5rem}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;background:radial-gradient(120% 140% at 80% -10%,#332639 0%,var(--ink) 42%,var(--ink-3) 100%);
  color:var(--bone);overflow:hidden}
.hero .wrap{position:relative;z-index:2;
  padding-block:clamp(3.4rem,8vw,6.4rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{color:var(--bone)}
.hero h1 em{font-style:italic;color:var(--brass-l)}
.hero-sub{font-size:clamp(1.1rem,1.7vw,1.32rem);color:rgba(var(--bone-rgb),.82);
  max-width:34ch;margin-bottom:1.9rem;line-height:1.62}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:1.7rem 2.4rem;
  padding-top:1.7rem;border-top:1px solid var(--line-dark)}
.fact{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;
  color:rgba(var(--bone-rgb),.7);line-height:1.5}
.fact b{display:block;color:var(--brass-l);font-weight:500;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.25rem}
.hero-art{justify-self:center;width:100%;max-width:380px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))}
.hero-art svg{width:100%;height:auto}

/* =========================================================
   Concept cards
   ========================================================= */
.head-block{max-width:62ch}
.head-block.center{margin-inline:auto;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.8rem;transition:.25s ease}
.card:hover{border-color:var(--brass);transform:translateY(-4px);
  box-shadow:0 18px 40px -28px rgba(33,26,36,.4)}
.card .num{font-family:var(--f-mono);font-size:.78rem;color:var(--brass-d);
  letter-spacing:.18em;display:block;margin-bottom:1rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.98rem;color:var(--text-soft);margin:0}

/* =========================================================
   Split / feature blocks
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.alt{direction:rtl}.split.alt>*{direction:ltr}
.panel{background:linear-gradient(150deg,var(--ink-2),var(--ink-3));
  color:var(--bone);border-radius:6px;padding:clamp(2rem,4vw,3.2rem);
  border:1px solid var(--line-dark)}
.panel .eyebrow{color:var(--brass-l)}
.panel h2{color:var(--bone)}
.panel p{color:rgba(var(--bone-rgb),.8)}
.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass-l);
  border:1px solid var(--line-dark);border-radius:40px;padding:.4rem .9rem}
.feat-list{list-style:none;padding:0;margin:1.6rem 0 0}
.feat-list li{position:relative;padding:.55rem 0 .55rem 1.8rem;
  border-bottom:1px solid var(--line);font-size:1rem}
.feat-list li::before{content:"";position:absolute;left:0;top:1.15rem;
  width:7px;height:7px;background:var(--brass);transform:rotate(45deg)}
.feat-list li b{color:var(--ink)}

/* =========================================================
   Menu (la carte) — leader dots signature
   ========================================================= */
.menu-section{margin-bottom:3rem}
.menu-section > .eyebrow{margin-bottom:.4rem}
.menu-section h2{margin-bottom:.3rem}
.menu-note{color:var(--text-soft);font-style:italic;margin-bottom:1.6rem;font-size:1rem}
.menu-list{list-style:none;padding:0;margin:0}
.menu-row{display:flex;align-items:baseline;gap:.6rem;padding:.85rem 0;
  border-bottom:1px solid var(--line)}
.menu-row .m-name{font-family:var(--f-display);font-size:1.18rem;color:var(--ink);
  font-weight:540;flex:0 1 auto}
.menu-row .m-lead{flex:1;border-bottom:1.5px dotted var(--brass);
  transform:translateY(-4px);opacity:.6;min-width:1.5rem}
.menu-row .m-price{font-family:var(--f-mono);font-size:.95rem;color:var(--brass-d);
  font-weight:500;white-space:nowrap}
.menu-row .m-desc{flex-basis:100%;font-size:.95rem;color:var(--text-soft);
  margin-top:.15rem;line-height:1.5}
.menu-row .m-veg{color:var(--olive);font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.1em;margin-left:.4rem;vertical-align:.05em}
.menu-cols{columns:2;column-gap:3.2rem}
@media(max-width:720px){.menu-cols{columns:1}}

/* =========================================================
   Reviews
   ========================================================= */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem}
.stars{color:var(--brass);letter-spacing:.15em;font-size:.95rem;margin-bottom:.8rem}
.review p{font-size:1rem;font-style:italic;color:var(--text);margin-bottom:1rem}
.review .who{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft)}

/* =========================================================
   Info / hours / contact
   ========================================================= */
.info-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.hours{list-style:none;padding:0;margin:0;font-family:var(--f-mono);font-size:.92rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.hours li .d{color:var(--text)}
.hours li .h{color:var(--brass-d)}
.hours li.closed .h{color:var(--wine)}
.nap{font-family:var(--f-mono);font-size:.95rem;line-height:2;color:var(--text)}
.nap a{color:var(--brass-d);border-bottom:1px solid var(--line)}
.map-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;
  aspect-ratio:16/10;background:var(--bone-2)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}

/* CTA band */
.cta-band{background:radial-gradient(120% 160% at 20% 0%,#332639,var(--ink) 55%,var(--ink-3));
  color:var(--bone);text-align:center}
.cta-band h2{color:var(--bone)}
.cta-band p{color:rgba(var(--bone-rgb),.8);max-width:48ch;margin-inline:auto}
.cta-band .hero-cta{justify-content:center;margin-top:1.8rem}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:780px;margin-top:2rem}
.faq details{border-bottom:1px solid var(--line);padding:.4rem 0}
.faq summary{cursor:pointer;font-family:var(--f-display);font-size:1.18rem;
  color:var(--ink);font-weight:540;padding:.9rem 2rem .9rem 0;position:relative;
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.8rem;
  color:var(--brass);font-family:var(--f-mono);font-size:1.4rem;transition:.2s}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--text-soft);font-size:1.02rem;padding-bottom:1rem;margin:0}

/* =========================================================
   Breadcrumb
   ========================================================= */
.crumb{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);padding-top:1.6rem}
.crumb a{color:var(--brass-d)}
.crumb span{margin:0 .5rem;opacity:.5}

/* page intro */
.page-intro{padding-block:clamp(2.6rem,6vw,4.4rem) 0}
.page-intro h1{margin-bottom:.4rem}

/* =========================================================
   Footer
   ========================================================= */
.site-foot{background:var(--ink-3);color:rgba(var(--bone-rgb),.72);
  padding-block:clamp(2.8rem,6vw,4.4rem) 2rem;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.site-foot h4{color:var(--bone);font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:1.1rem}
.site-foot a{color:rgba(var(--bone-rgb),.72)}
.site-foot a:hover{color:var(--brass-l)}
.foot-brand .name{font-family:var(--f-display);font-size:1.6rem;color:var(--bone);
  font-weight:600;display:block;margin-bottom:.6rem}
.foot-brand p{font-size:.95rem;line-height:1.6}
.foot-links{list-style:none;padding:0;margin:0;line-height:2.1}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;
  color:rgba(var(--bone-rgb),.5)}

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .cards{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .split,.split.alt{grid-template-columns:1fr;direction:ltr}
  .info-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:17px}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem 1.2rem 1.4rem;display:none;box-shadow:0 20px 30px -20px rgba(0,0,0,.3)}
  .nav.open{display:flex}
  .nav a{padding:.95rem .2rem;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.8rem;justify-content:center}
  .nav-toggle{display:block}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:2px}

/* =========================================================
   Pages légales (prose) + plan du site
   ========================================================= */
.legal{max-width:780px}
.legal .updated{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--text-soft);margin-bottom:2rem}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.4rem}
.legal h3{font-size:1.18rem;margin-top:1.6rem}
.legal p,.legal li{font-size:1.02rem}
.legal ul{padding-left:1.2rem;margin:0 0 1.2em}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--brass-d);border-bottom:1px solid var(--line)}
.legal a:hover{border-color:var(--brass)}
.legal .ph{background:rgba(194,151,75,.14);border-bottom:1px dashed var(--brass);
  padding:0 .25em;font-style:normal}
.legal table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.94rem}
.legal th,.legal td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.legal th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass-d);font-weight:500}
.legal td:first-child{font-family:var(--f-mono);font-size:.86rem;color:var(--ink);white-space:nowrap}

.sitemap-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem;margin-top:1.5rem}
.sitemap-cols h2{font-size:1.05rem;font-family:var(--f-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-d);margin-bottom:.8rem}
.sitemap-cols ul{list-style:none;padding:0;margin:0;line-height:2.1}
.sitemap-cols a{color:var(--ink)}
.sitemap-cols a:hover{color:var(--brass-d)}
@media(max-width:680px){.sitemap-cols{grid-template-columns:1fr}}

/* footer legal row */
.foot-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.4rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em}
.foot-legal a{color:rgba(var(--bone-rgb),.55)}
.foot-legal a:hover{color:var(--brass-l)}

/* =========================================================
   Bandeau cookies (CNIL)
   ========================================================= */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:200;
  max-width:560px;margin-inline:auto;background:var(--ink-2);color:var(--bone);
  border:1px solid var(--line-dark);border-radius:8px;padding:1.4rem 1.5rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);display:none}
.cookie-banner.show{display:block}
.cookie-banner h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-l);margin:0 0 .6rem}
.cookie-banner p{font-size:.92rem;color:rgba(var(--bone-rgb),.82);margin:0 0 1rem;line-height:1.55}
.cookie-banner p a{color:var(--brass-l);border-bottom:1px solid var(--line-dark)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.cookie-actions .btn{padding:.65rem 1.2rem;font-size:.74rem}
.cookie-actions .btn-ghost{color:var(--bone);border-color:var(--line-dark)}
.cookie-actions .btn-ghost:hover{border-color:var(--brass-l);color:var(--brass-l)}

/* carte bloquée tant que consentement non donné */
.map-frame{position:relative}
.map-gate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;text-align:center;
  background:var(--ink-2);color:var(--bone);padding:1.5rem}
.map-gate p{font-size:.92rem;color:rgba(var(--bone-rgb),.8);max-width:34ch;margin:0}

/* =========================================================
   Maillage interne — "Continuer la visite"
   ========================================================= */
.related{border-top:1px solid var(--line);margin-top:1rem;padding-top:2.4rem}
.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin-top:1.3rem}
.related-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-size:1.02rem;line-height:1.35;transition:.2s ease;background:var(--paper)}
.related-links a:hover{border-color:var(--brass);color:var(--brass-d);transform:translateY(-3px);
  box-shadow:0 16px 36px -28px rgba(33,26,36,.45)}
.related-links a::after{content:"\2192";font-family:var(--f-mono);color:var(--brass);flex:none}
.related.on-dark{border-color:var(--line-dark)}
.related.on-dark .related-links a{background:transparent;border-color:var(--line-dark);color:var(--bone)}
.related.on-dark .related-links a:hover{border-color:var(--brass-l);color:var(--brass-l)}