/* ============================================================
   SIGNATURE PÂTISSERIE — site.css
   ============================================================ */

@font-face { font-display: swap; }

:root{
  --bg-0:#F8F3EC;
  --bg-1:#F1E9DD;
  --ink:#2B2420;
  --ink-soft:rgba(43,36,32,.68);
  --ink-faint:rgba(43,36,32,.42);
  --brand:#B4703F;
  --brand-deep:#8C5530;
  --line:rgba(43,36,32,.14);
  --mmt-panel:#201310;
  --mmt-panel-accent:#B4703F;
  --pack-bg:#FFFFFF;
  --pack-text:#2B2420;
  --pack-brand:#B4703F;
  --pack-brand-ink:#FFF7EE;
  --wa:#25D366;
  --serif: 'Playfair Display', Georgia, serif;
  --script: 'Sacramento', var(--serif);
  --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg-0); scroll-behavior:auto; overflow-x:hidden; max-width:100%; }
body{
  margin:0; background:var(--bg-0); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
@media (min-width:900px){ .wrap{ padding-inline:48px; } }

h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; letter-spacing:-.01em; }
.eyebrow{
  display:inline-block; font-family:var(--sans); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-deep); margin-bottom:14px; font-weight:500;
}
.lede{ color:var(--ink-soft); font-size:17px; line-height:1.65; max-width:52ch; }

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; text-decoration:none; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; transition:transform .18s ease, filter .18s ease;
}
.btn:hover{ filter:brightness(0.96); }
.btn-wa{ background:var(--wa); color:#0B3D22; }
.btn-brass{ background:var(--brand); color:#FFF7EE; }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn svg{ width:18px; height:18px; flex:none; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:linear-gradient(to bottom, rgba(20,12,9,.55), transparent);
  color:#fff;
}
@media (min-width:900px){ .nav{ padding:20px 48px; } }
.nav.is-solid{ background:rgba(248,243,236,.92); backdrop-filter:blur(10px); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.nav__brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:inherit; }
.nav__brand .script{ font-family:var(--script); font-size:26px; line-height:1; color:currentColor; }
.nav__brand .caps{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.8; }
.nav__links{ display:none; gap:28px; font-size:14px; letter-spacing:.02em; }
@media (min-width:900px){ .nav__links{ display:flex; } }
.nav__links a{ text-decoration:none; opacity:.88; }
.nav__links a:hover{ opacity:1; }
.nav .btn-wa{ padding:10px 18px; font-size:13.5px; }

/* ============================================================
   HERO — 8 shots, DOM order = storyboard order
   ============================================================ */
#hero{ position:relative; background:#0E0805; }

.shot{ position:relative; width:100%; overflow:clip; }
.shot--tall{ height:100vh; height:100svh; min-height:560px; max-height:1080px; }
.shot--mid{ height:82vh; min-height:480px; }

/* shot 01 — arrival */
.shot-01 .mmt-cam__cap{
  position:absolute; z-index:2; inset-inline:0; bottom:0; padding:0 24px 64px;
  background:linear-gradient(to top, rgba(10,6,4,.72), transparent 65%);
}
@media (min-width:900px){ .shot-01 .mmt-cam__cap{ padding:0 48px 88px; } }
.shot-01 .mmt-cam__cap .script{ font-family:var(--script); color:#F3D9A8; font-size:clamp(40px,7vw,84px); line-height:.9; }
.shot-01 .mmt-cam__cap .caps{ display:block; color:#fff; font-size:clamp(12px,1.6vw,15px); letter-spacing:.32em; text-transform:uppercase; margin-top:10px; opacity:.92; }
.shot-01 .mmt-cam__cap p{ color:rgba(255,255,255,.78); max-width:44ch; margin:18px 0 0; font-size:15px; }
.shot-01::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,6,4,.28) 0%, rgba(10,6,4,0) 32%, rgba(10,6,4,.1) 60%, rgba(10,6,4,.55) 100%);
}

/* transformation-scrub derived sequences (shot 02 / shot 07-08) */
.mmt-seq__shot img{ filter:saturate(1.03); }
.mmt-seq__shot figcaption{
  position:absolute; left:18px; bottom:14px; z-index:2; color:#fff; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.8; background:rgba(10,6,4,.4);
  padding:4px 10px; border-radius:999px;
}
.mmt-seq__ui{ padding:0 24px 40px; }
@media (min-width:900px){ .mmt-seq__ui{ padding:0 48px 56px; } }
.mmt-seq__ui h2{ color:#fff; font-size:clamp(24px,4vw,40px); max-width:20ch; text-shadow:0 2px 24px rgba(0,0,0,.4); }
.mmt-seq__ui p{ color:rgba(255,255,255,.78); max-width:44ch; margin:12px 0 0; font-size:14.5px; }

/* shot 03 — crossfade into interior */
.shot-cross{ height:78vh; min-height:440px; }
.shot-cross__frame{ position:absolute; inset:0; }
.shot-cross__frame img{ width:100%; height:100%; object-fit:cover; }
.shot-cross__frame.is-top{ z-index:2; }
.shot-cross__caption{
  position:absolute; z-index:3; inset-inline:0; bottom:0; padding:0 24px 48px;
  background:linear-gradient(to top, rgba(10,6,4,.6), transparent 70%);
}
@media (min-width:900px){ .shot-cross__caption{ padding:0 48px 64px; } }
.shot-cross__caption span{ color:#F3D9A8; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.shot-cross__caption h2{ color:#fff; font-size:clamp(22px,3.6vw,36px); margin-top:8px; max-width:18ch; }

/* shot 04 / 06 — camera-only figures reused for travelling / orbit */
.shot .mmt-cam__cap{ position:absolute; z-index:2; inset-inline:0; bottom:0; padding:0 24px 56px; background:linear-gradient(to top, rgba(10,6,4,.65), transparent 65%); }
.shot .mmt-cam__cap span.tag{ color:#F3D9A8; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.shot .mmt-cam__cap h2{ color:#fff; font-size:clamp(22px,3.6vw,36px); margin-top:8px; max-width:18ch; }

/* shot 09 — final product / branding */
.shot-final .mmt-cam__cap{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px 72px; }
.shot-final .script{ font-family:var(--script); color:#F3D9A8; font-size:clamp(34px,5.6vw,60px); }
.shot-final .caps{ color:#fff; font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin-top:6px; }
.shot-final .btn{ margin-top:26px; }

.hero-skip{
  position:absolute; z-index:20; right:16px; bottom:16px; color:rgba(255,255,255,.7);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(255,255,255,.3); padding:8px 14px; border-radius:999px;
}
.hero-scrollcue{
  position:absolute; z-index:5; left:50%; bottom:22px; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
}
.hero-scrollcue::after{
  content:""; width:1px; height:26px; background:rgba(255,255,255,.5); animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.15; transform:scaleY(.4); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); transform-origin:top; } }
@media (prefers-reduced-motion:reduce){ .hero-scrollcue::after{ animation:none; opacity:.6; } }

@media (prefers-reduced-motion:reduce){
  .shot--tall,.shot--mid{ height:auto; min-height:0; max-height:none; }
  #hero .shot{ padding-block:56px; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block:110px; position:relative; min-height:80vh; }
@media (max-width:640px){ .sec{ padding-block:76px; } }
.sec-head{ margin-bottom:56px; max-width:640px; }
.sec-head h2{ font-size:clamp(28px,4.4vw,46px); }

/* produits — editorial asymmetric gallery */
.prod-grid{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){
  .prod-grid{ grid-template-columns:repeat(6,1fr); grid-auto-rows:14vw; }
  .prod-grid .tile{ grid-column:span 3; grid-row:span 2; }
  .prod-grid .tile--wide{ grid-column:span 4; }
  .prod-grid .tile--narrow{ grid-column:span 2; }
  .prod-grid .tile--dominant{ grid-column:span 6; grid-row:span 3; }
}
.tile{ position:relative; border-radius:6px; overflow:hidden; background:var(--bg-1); min-height:260px; }
.tile .mmt-tile__photo{ position:absolute; inset:0; }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile__meta{
  position:absolute; inset-inline:0; bottom:0; z-index:2; padding:16px 18px;
  background:linear-gradient(to top, rgba(10,6,4,.72), transparent 75%); color:#fff;
}
.tile__meta .name{ font-family:var(--serif); font-size:16px; }
.tile__meta .price{ font-size:12px; opacity:.82; margin-top:2px; letter-spacing:.02em; }

/* boulangerie */
.bakery{ display:grid; gap:40px; align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .bakery{ grid-template-columns:1fr 1fr; gap:64px; } }
.bakery figure{ margin:0; border-radius:6px; overflow:hidden; }
.bakery .facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.bakery .fact{ font-size:12.5px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); }

/* commander */
.order-wrap{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .order-wrap{ grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; } }
.order-copy .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
[data-pack="commande"]{ max-width:560px; }

/* contact */
.contact{ background:var(--bg-1); }
.contact-grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; }
.contact-row{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.contact-row:first-child{ border-top:none; padding-top:0; }
.contact-row .ic{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--brand); }
.contact-row .label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.contact-row .val{ font-size:16px; margin-top:2px; }
.contact-row a.val{ text-decoration:none; }
.contact-row a.val:hover{ text-decoration:underline; }
.contact .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* footer */
footer{ padding:56px 0 40px; text-align:center; color:var(--ink-faint); font-size:13px; }
footer .script{ font-family:var(--script); font-size:30px; color:var(--brand); display:block; margin-bottom:8px; }

/* data-reveal-item default state safety (module only hides w/ GSAP present) */
[data-reveal-item]{ }