:root{
  --bg:#f4f3e7;
  --surface:#e8dcc6;
  --sand:#e8dcc6;
  --willow:#d8e5d6;
  --ink:#0e150e;
  --muted:#00473c;
  --accent:#e6ff55;
  --accent2:#d8e5d6;
  --radius:24px;
  --radius-img:20px;
  --font-display:'Epilogue',sans-serif;
  --font-body:'Work Sans',sans-serif;

  --step--1:1rem;
  --step-0:1.15rem;
  --step-1:1.626rem;
  --step-2:2.3rem;
  --step-3:3.25rem;
  --step-4:4.6rem;
  --step-5:6.5rem;
  --step-6:14.3rem;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:56px;
  --space-9:80px;

  --section-pad:var(--space-9);
  --measure:60ch;
  --shadow-1:3px 3px 32px -10px rgba(14,21,14,.4);
  --shadow-2:6px 6px 48px -12px rgba(14,21,14,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:0.5s;
  --dur-2:0.9s;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  letter-spacing:0.015em;
  line-height:1.5;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.03em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
section{padding-block:var(--section-pad)}

.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--space-7)}

/* header */
.bar{
  background:var(--bg);
  position:sticky;
  inset-block-start:0;
  z-index:50;
  border-block-end:1px solid rgba(14,21,14,.08);
}
.bar-inner{
  max-width:1440px;margin-inline:auto;padding-inline:var(--space-7);
  display:flex;align-items:center;justify-content:space-between;
  padding-block:var(--space-4);
}
.logo{text-decoration:none}
.logo-word{font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-0.02em}
.nav-links{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0;align-items:center}
.nav-links a{text-decoration:none;font-size:var(--step--1)}
.nav-cta{
  background:var(--muted);color:var(--bg);
  padding:7px 16px;border-radius:1000px;
  text-decoration:none;font-size:.9rem;font-weight:600;
}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;
}
.nav-toggle span{width:24px;height:2px;background:var(--ink);display:block}
.nav-flex{display:flex;align-items:center;gap:var(--space-5)}

/* hero */
.hero{padding-block-start:var(--space-8)}
.hero-head{max-width:10ch;margin-inline:auto;text-align:center}
.eyebrow{
  display:block;text-align:center;color:var(--muted);
  font-family:var(--font-body);font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;margin-block-end:var(--space-4);
}
.hero h1{
  font-weight:250;
  font-size:clamp(2.2rem,9vw,var(--step-6));
  line-height:.95;
  letter-spacing:-0.047em;
  text-align:center;
  max-width:16ch;
  margin-inline:auto;
}
.hero-sub{
  max-width:52ch;margin-inline:auto;margin-block-start:var(--space-5);
  text-align:center;font-size:var(--step-0);color:var(--muted);
}
.hero-ctas{
  display:flex;justify-content:center;gap:var(--space-4);margin-block-start:var(--space-6);flex-wrap:wrap;
}
.hero-img{margin-block-start:var(--space-8)}
.ph{
  border-radius:var(--radius-img);
  background:
    repeating-linear-gradient(135deg, rgba(14,21,14,.08) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, var(--willow), var(--sand));
  position:relative;overflow:hidden;
}
.ph::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(230,255,85,.18), transparent 60%);
}

/* buttons */
.cta-pill{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--muted);
  padding:15px 60px;border-radius:1000px;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform var(--dur-1) var(--ease);
  isolation:isolate;
}
.cta-pill:hover{transform:scale(1.02)}
.cta-pill::before,.cta-pill::after{
  content:'';position:absolute;inset:0;border-radius:1000px;
  border:1px solid var(--accent2);
  opacity:0;pointer-events:none;
  transform:scale(1);
}
.cta-pill:hover::before{animation:ripple var(--dur-2) var(--ease) forwards;}
.cta-pill:hover::after{animation:ripple var(--dur-2) var(--ease) .15s forwards;}
@keyframes ripple{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4)}
}
.cta-ghost{
  color:var(--muted);text-decoration:underline;text-underline-offset:4px;
  align-self:center;font-size:.95rem;
}

/* origines */
.origines-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start;
}
.card{
  border-radius:var(--radius);padding:var(--space-5);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.card.willow{background:var(--willow)}
.card.sand{background:var(--sand)}
.origin-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.origin-list li{
  display:flex;justify-content:space-between;border-block-end:1px solid rgba(14,21,14,.12);
  padding-block-end:var(--space-2);font-size:var(--step-0);
}
.section-title{font-size:var(--step-3);font-weight:300;letter-spacing:-0.03em;text-align:center}
.section-sub{text-align:center;max-width:var(--measure);margin-inline:auto;color:var(--muted);margin-block-start:var(--space-3)}
.section-head{margin-block-end:var(--space-7)}

/* menu */
.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);
}
.menu-card h3{font-size:var(--step-0);margin-block-start:var(--space-4)}
.menu-card .price{color:var(--muted);font-weight:600;margin-block-start:var(--space-1)}
.menu-card .ph{aspect-ratio:1/1}

/* atelier */
.atelier{position:relative;padding-block:0}
.atelier-band{position:relative}
.atelier-band .ph{aspect-ratio:16/9;border-radius:0}
.atelier-card{
  position:relative;
  margin-inline-start:var(--space-7);
  margin-block-start:calc(-1 * var(--space-8));
  max-width:420px;background:var(--bg);
  border-radius:var(--radius);padding:var(--space-6);
  box-shadow:var(--shadow-2);
  z-index:2;
}
.atelier-card h2{font-size:var(--step-2);font-weight:300}
.atelier-card p{margin-block-start:var(--space-3);color:var(--muted)}
.atelier-card .cta-pill{margin-block-start:var(--space-5)}
.atelier-spacer{padding-block-end:var(--space-8)}

/* espace */
.espace{background:var(--sand)}
.espace-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-7);align-items:center}
.espace .ph{aspect-ratio:4/5}
.espace-text{max-width:44ch}
.espace-text h2{font-size:var(--step-2);font-weight:300}
.espace-text p{margin-block-start:var(--space-4);color:var(--muted)}

/* avis */
.avis{display:flex;justify-content:center}
.avis-card{
  background:var(--willow);border-radius:var(--radius);
  max-width:760px;padding:var(--space-8);text-align:center;
  position:relative;overflow:hidden;
}
.avis-glyph{
  position:absolute;inset-block-start:-40px;inset-inline-start:50%;
  transform:translateX(-50%);
  font-family:var(--font-display);font-size:220px;
  color:transparent;-webkit-text-stroke:1px rgba(14,21,14,.15);
  line-height:1;user-select:none;
}
.avis-quote{position:relative;font-size:var(--step-1);font-weight:300;font-family:var(--font-display);max-width:32ch;margin-inline:auto}
.avis-name{margin-block-start:var(--space-5);color:var(--muted);font-size:.9rem}

/* horaires */
.horaires-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);
}
.hours-list{list-style:none;margin:var(--space-4) 0 0;padding:0}
.hours-list li{
  display:flex;justify-content:space-between;padding-block:var(--space-2);
  border-block-end:1px solid rgba(14,21,14,.12);font-size:var(--step-0);
}
.map-block{
  border-radius:var(--radius-img);background:
    repeating-linear-gradient(45deg, rgba(0,71,60,.08) 0 2px, transparent 2px 20px),
    var(--willow);
  aspect-ratio:4/3;
}
.address{margin-block-start:var(--space-4);color:var(--muted)}

/* contact */
.contact{display:flex;justify-content:center}
.contact-wrap{max-width:480px;width:100%;text-align:center}
.contact h2{font-size:var(--step-2);font-weight:300}
.contact p{margin-block-start:var(--space-3);color:var(--muted)}
.lead-form{
  background:var(--sand);border-radius:var(--radius);padding:var(--space-6);
  margin-block-start:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);
  text-align:start;
}
.lead-form input,.lead-form textarea{
  border:1px solid var(--ink);border-radius:8px;padding:var(--space-3) var(--space-4);
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  font-size:1rem;
}
.lead-form button{
  background:var(--accent);color:var(--muted);border:none;border-radius:1000px;
  padding:15px 60px;font-weight:700;cursor:pointer;font-family:var(--font-body);
  position:relative;
}
.lead-done{color:var(--muted);font-weight:600}

/* footer */
footer{
  background:var(--muted);color:var(--bg);padding-block:var(--space-7);
}
.footer-inner{
  max-width:1440px;margin-inline:auto;padding-inline:var(--space-7);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);
  font-size:.85rem;
}

@media (max-width:768px){
  .nav-links{
    display:none;flex-direction:column;width:100%;
    position:absolute;inset-inline:0;inset-block-start:100%;
    background:var(--bg);padding:var(--space-5) var(--space-7);
    border-block-end:1px solid rgba(14,21,14,.1);
  }
  header.nav-open .nav-links{display:flex}
  .nav-toggle{display:flex}
  .origines-grid,.espace-grid,.horaires-grid{grid-template-columns:1fr}
  .atelier-card{margin-inline-start:var(--space-4);margin-inline-end:var(--space-4);margin-block-start:calc(-1 * var(--space-6));max-width:none}
}


@media (prefers-reduced-motion: reduce){[data-motion]{opacity:1;transform:none}}