:root { --mv-logo:#3f1401; --mv-paper:#f4f1ea; --mv-ink:#292b26; --mv-muted:#73746c; --mv-line:#d9d7cd; --mv-accent:#7b4e36; --mv-dark:#1f221d; --mv-serif:"Cormorant Garamond",Georgia,serif; --mv-sans:"Inter",Arial,sans-serif;
  /* Easing shared by every animation (entrance, menu overlay) */
  --mv-ease:cubic-bezier(.16,1,.3,1); --mv-ease-io:cubic-bezier(.76,0,.24,1); }
.skip-link { position:fixed; top:10px; left:16px; transform:translateY(-160%); z-index:100; background:var(--mv-ink); color:var(--mv-paper); padding:14px 20px; text-decoration:none; }
.skip-link:focus { transform:translateY(0); }
.brand-header { min-height:112px; padding:24px 4.7%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; background:var(--mv-paper); color:var(--mv-ink); border-bottom:1px solid var(--mv-line); font-family:var(--mv-sans); view-transition-name:site-header; }
/* Logo (assets/logo.png) used as a mask: brand brown, light in the dark menu */
.wordmark { display:block; justify-self:start; height:60px; aspect-ratio:1171/549; color:var(--mv-logo); background:currentColor; -webkit-mask:url(assets/logo.png) center/contain no-repeat; mask:url(assets/logo.png) center/contain no-repeat; transform-origin:0 50%; transition:scale .5s var(--mv-ease); }
.page-nav { display:flex; justify-content:center; gap:36px; }
.page-nav a { position:relative; padding:12px 0; color:inherit; text-decoration:none; font-size:12px; line-height:1.4; white-space:nowrap; }
.page-nav a::after { content:""; position:absolute; bottom:4px; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--mv-ease); }
.page-nav a:hover::after,.page-nav a[aria-current=page]::after { transform:scaleX(1); transform-origin:left; }
.page-nav a span { margin-left:7px; }
.page-nav a.admin-link { color:var(--mv-accent); }
.header-note { justify-self:end; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:inherit; text-decoration:none; padding:12px 0; }
.header-note span { margin-left:12px; font-size:16px; display:inline-block; transition:transform .3s var(--mv-ease); }
a.header-note:hover span { transform:translate(2px,-2px); }
:where(a,button,input,select):focus-visible { outline:2px solid var(--mv-accent); outline-offset:5px; }

/* Header that floats over the landing page: blurs once the page scrolls, hides while reading down */
.brand-header.float { position:fixed; top:0; left:0; right:0; z-index:60; border-bottom-color:transparent; transition:min-height .5s var(--mv-ease),padding .5s var(--mv-ease),background-color .5s,border-color .5s,transform .7s var(--mv-ease); }
.brand-header.float.is-scrolled { min-height:76px; padding-top:12px; padding-bottom:12px; background:rgba(244,241,234,.8); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--mv-line); }
.brand-header.float.is-scrolled .wordmark { scale:.84; }
.brand-header.float.is-hidden { transform:translateY(-100%); }

/* Hamburger (phones) and full-screen menu */
.menu-toggle { display:none; justify-self:end; width:44px; height:44px; border:0; background:none; padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:inherit; position:relative; z-index:71; }
.menu-toggle i { display:block; width:24px; height:1.5px; background:currentColor; transition:transform .5s var(--mv-ease-io); }
.menu-open .menu-toggle i:first-child { transform:translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle i:last-child { transform:translateY(-4.25px) rotate(-45deg); }
.menu-overlay { position:fixed; inset:0; z-index:59; background:var(--mv-dark); color:var(--mv-paper); display:flex; flex-direction:column; justify-content:center; padding:110px 8% 40px; clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .8s var(--mv-ease-io),visibility 0s .8s; }
.menu-open .menu-overlay { clip-path:inset(0); visibility:visible; transition:clip-path .8s var(--mv-ease-io); }
.menu-open .brand-header.float { color:var(--mv-paper); background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transform:none; }
.menu-open .brand-header.float .wordmark { color:inherit; }
.menu-overlay nav { display:flex; flex-direction:column; gap:6px; }
.menu-overlay nav a { display:flex; align-items:baseline; gap:18px; font:400 clamp(44px,12vw,72px)/1.05 var(--mv-serif); letter-spacing:-.03em; text-decoration:none; color:inherit; opacity:0; transform:translateY(28px); transition:opacity .6s var(--mv-ease-io),transform .6s var(--mv-ease-io); }
.menu-overlay nav a small { font:400 10px var(--mv-sans); letter-spacing:.14em; color:#9b9e91; }
.menu-overlay nav a em { color:#c6b59a; }
.menu-open .menu-overlay nav a { opacity:1; transform:none; transition-delay:calc(150ms + var(--i) * 80ms); }
.menu-overlay>p { margin-top:auto; font-size:9px; letter-spacing:.16em; color:#9b9e91; opacity:0; transition:opacity .6s .5s; }
.menu-open .menu-overlay>p { opacity:1; }
.menu-open { overflow:hidden; }

/* Floating WhatsApp button (whatsapp.js): under the toasts and the menu overlay */
.wa-button { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:45; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -12px #1f221d99; transition:scale .4s var(--mv-ease),box-shadow .4s; }
.wa-button svg { width:30px; height:30px; fill:currentColor; }
.wa-button:hover { scale:1.08; box-shadow:0 18px 36px -12px #1f221daa; }
.menu-open .wa-button { visibility:hidden; }

/* Cross-document page transition (Accueil ↔ Catalogue), progressive enhancement */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:.35s var(--mv-ease) both mv-page-out; }
::view-transition-new(root) { animation:.75s var(--mv-ease) both mv-page-in; }
@keyframes mv-page-out { to { opacity:0; transform:translateY(-14px); } }
@keyframes mv-page-in { from { opacity:0; transform:translateY(22px); } }

@media(max-width:700px) { .brand-header { min-height:84px; padding:18px 6%; grid-template-columns:1fr auto; gap:14px; } .brand-header.float.is-scrolled { min-height:66px; } .wordmark { height:46px; } .page-nav { gap:18px; } .page-nav a { font-size:11px; } .page-nav a span { display:none; } .header-note { display:none; }
  .float .page-nav { display:none; } .float .menu-toggle { display:flex; } }
@media(prefers-reduced-motion:reduce) { .page-nav a::after,.brand-header.float,.wordmark,.wa-button,.menu-overlay,.menu-overlay nav a,.menu-toggle i { transition:none!important; } @view-transition { navigation:none; } }