/* =========================================================
   WORK CAFÉ — Réplique du pattern Salata
   Grands blocs image de fond + copy court centré + un bouton
   ========================================================= */

:root{
  --cream:       #FAF7F2;
  --cream-2:     #F2ECE1;
  --ink:         #1A1A1A;
  --red:         #E63946;
  --red-deep:    #C2293A;
  --muted:       #6B6B6B;

  --maxw: 1240px;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

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

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.1; font-weight:500; letter-spacing:-.01em; }

.wrap{ width:min(100% - 2.2rem, var(--maxw)); margin-inline:auto; }

/* Boutons — style Salata : rectangle, majuscules, tracking */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:500; font-size:.75rem;
  letter-spacing:.28em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  padding:1.1rem 2.6rem; border-radius:2px; border:none; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--red); color:#fff; }
.btn--red{ --bg:var(--red); }
.btn--red:hover{ background:var(--ink); }
.btn--white{ --bg:#fff; --fg:var(--ink); }
.btn--white:hover{ background:var(--red); color:#fff; }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--cream);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; line-height:1; }
.brand img{ height:54px; width:auto; display:block; }
@media (max-width:480px){ .brand img{ height:42px; } }

.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav a.link{
  font-family:var(--font-display); font-weight:500; font-size:.75rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
  position:relative; padding:.3rem 0; transition:color .18s ease;
}
.nav a.link:hover{ color:var(--red); }
.nav a.link[aria-current="page"]{ color:var(--red); }

.burger{ display:none; background:none; border:none; cursor:pointer; padding:.4rem; color:var(--ink); }
.burger svg{ width:28px; height:28px; }

@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:88px 0 auto 0;
    flex-direction:column; gap:1.6rem; align-items:flex-start;
    background:var(--cream); padding:2rem 1.6rem 2.4rem;
    border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    transform:translateY(-130%); transition:transform .32s cubic-bezier(.4,1.2,.4,1);
  }
  .nav.open{ transform:translateY(0); }
  .nav a.link{ font-size:1rem; letter-spacing:.2em; }
}

/* =========================================================
   BLOC HERO PLEIN ÉCRAN — style Salata
   Foto de fond + copy centré + bouton
   ========================================================= */
.big-hero{
  position:relative;
  min-height:clamp(560px, 95svh, 820px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.big-hero__bg{ position:absolute; inset:0; z-index:0; }
.big-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.big-hero__bg::after{ content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.32); }
.big-hero__inner{ position:relative; z-index:2; max-width:780px; padding:2rem 1.5rem;
  color:#fff; }
.big-hero h1, .big-hero h2{ color:#fff; font-weight:500; letter-spacing:-.01em; }
.big-hero h1{ font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:1.02;
  text-shadow:0 4px 30px rgba(0,0,0,.35); }
.big-hero h2{ font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.1;
  margin-bottom:1.4rem; text-shadow:0 3px 20px rgba(0,0,0,.35); }
.big-hero p{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.75;
  margin:0 auto 2rem; max-width:56ch; opacity:.95;
  text-shadow:0 2px 12px rgba(0,0,0,.4); }
.big-hero .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:#fff; padding:4rem 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; }
.footer h4{ color:var(--red); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  margin-bottom:1.2rem; font-family:var(--font-display); font-weight:500; }
.footer__brand{ display:inline-flex; padding:.7rem 1rem; background:#fff; border-radius:4px; }
.footer__brand img{ height:44px; width:auto; }
.footer p, .footer a{ color:color-mix(in srgb, #fff 80%, transparent); font-size:.95rem; line-height:1.75; }
.footer a:hover{ color:var(--red); }
.footer ul{ list-style:none; display:grid; gap:.6rem; }
.footer__bottom{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid color-mix(in srgb, #fff 18%, transparent);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; opacity:.6; }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; gap:2rem; } }

/* =========================================================
   PAGE CARTE (garde le style existant, simplifié)
   ========================================================= */
.page-head{ padding:clamp(3rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem); text-align:center; }
.page-head h1{ font-size:clamp(2.4rem,6vw,4.4rem); font-weight:500; letter-spacing:-.02em; }
.page-head p{ font-size:1.05rem; max-width:52ch; margin:1rem auto 0; color:var(--muted); line-height:1.75; }

.kicker{
  font-family:var(--font-display);
  font-weight:500; font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--red);
}

.carte-actions{ display:flex; gap:.9rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }

.section{ padding:clamp(3rem,6vw,5rem) 0; }
.section--cream2{ background:var(--cream-2); }
.section--ink{ background:var(--ink); color:#fff; }
.section--ink h2{ color:#fff; }

.carte-section{ margin-top:clamp(2.4rem,4vw,3.4rem); }
.carte-section h2{ font-family:var(--font-display); font-size:.9rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink);
  padding-bottom:.9rem; border-bottom:1px solid var(--ink); margin-bottom:1.4rem; }
.carte-section > .sub{ color:var(--muted); font-size:.92rem; margin-top:-1rem; margin-bottom:1.4rem;
  font-style:italic; }

.line-list{ display:grid; gap:0; }
.line{ display:flex; align-items:baseline; gap:1rem; padding:.85rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.line:last-child{ border-bottom:none; }
.line .nm{ font-family:var(--font-body); font-weight:500; font-size:1rem; color:var(--ink); }
.line .dots{ flex:1; }
.line .pr{ font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--red); white-space:nowrap; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.ingr-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.2rem 1.8rem; }
.ingr-cols .item{ font-family:var(--font-body); font-weight:400; color:var(--ink);
  font-size:.98rem; padding:.4rem 0; }
@media (max-width:760px){ .ingr-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .ingr-cols{ grid-template-columns:1fr; } }

.carte-note{ margin-top:2.4rem; padding:1.2rem 1.4rem; background:var(--cream-2);
  border-left:2px solid var(--red); font-size:.92rem; color:var(--muted); font-style:italic; }

.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2rem,5vw,3.2rem); color:#fff; font-weight:500; }
.cta-band p{ max-width:46ch; margin:.8rem auto 1.8rem; font-size:1.05rem;
  color:color-mix(in srgb, var(--cream) 85%, transparent); }
.cta-band .hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

.info-card{ padding:1.6rem 0; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.info-card h3{ font-size:.9rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin-bottom:.8rem; font-family:var(--font-display); }
.info-card p{ font-size:1rem; line-height:1.75; }
.info-card a{ color:var(--ink); font-weight:500; border-bottom:1px solid var(--ink); }
.info-card a:hover{ color:var(--red); border-color:var(--red); }

.hours{ list-style:none; display:grid; gap:.55rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:1rem; }
.hours li span:first-child{ color:var(--ink); }
.hours li.closed span:last-child{ color:var(--red); }

.form{ background:transparent; padding:0; }
.form .field{ margin-bottom:1.4rem; }
.form label{ display:block; font-family:var(--font-display); font-weight:500;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
  margin-bottom:.6rem; }
.form input, .form textarea, .form select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:transparent; border:none; border-bottom:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius:0; padding:.6rem 0; transition:border-color .18s ease; }
.form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-bottom-color:var(--red); }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ margin-top:.6rem; }

.map-embed{ border:0; width:100%; height:360px; margin-top:2rem; }

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

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