/* === Ma Boucherie — Style Luxe / Chic === */
:root{
  --bg:#0f0d0c;
  --bg-2:#161311;
  --cream:#f5efe6;
  --cream-2:#ebe3d5;
  --gold:#c8a35d;
  --gold-light:#dcc28f;
  --bordeaux:#5a1a1f;
  --text:#1a1614;
  --text-light:#6b625a;
  --line:rgba(200,163,93,0.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:'Inter',sans-serif;
  font-weight:300;
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:-0.01em;line-height:1.1}
h1{font-size:clamp(2.8rem,6vw,5.5rem)}
h2{font-size:clamp(2rem,4.5vw,3.8rem)}
h3{font-size:1.6rem}
h1 em{font-style:italic;color:var(--gold-light);font-weight:300}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:0 5%}
.eyebrow{display:inline-block;font-family:'Inter',sans-serif;font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:24px}

/* ===== HEADER ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:24px 0;
  background:transparent;
  transition:all 0.4s ease;
}
.header.scrolled{
  background:rgba(15,13,12,0.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1280px;margin:0 auto;padding:0 5%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:12px;
  color:var(--cream);
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;letter-spacing:0.05em;
}
.nav-links{display:flex;gap:42px;list-style:none}
.nav-links a{
  color:var(--cream);font-size:0.85rem;font-weight:400;
  letter-spacing:0.15em;text-transform:uppercase;
  position:relative;padding:6px 0;
  transition:color 0.3s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--gold);
  transition:width 0.4s ease;
}
.nav-links a:hover{color:var(--gold-light)}
.nav-links a:hover::after{width:100%}
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:36px;height:36px;flex-direction:column;justify-content:center;gap:5px;
}
.hamburger span{display:block;width:26px;height:1.5px;background:var(--cream);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80');
  background-size:cover;background-position:center;
  animation:slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,13,12,0.55) 0%,rgba(15,13,12,0.4) 40%,rgba(15,13,12,0.85) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:900px;padding:0 5%;
}
.hero-eyebrow{
  display:inline-block;
  font-size:0.75rem;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--gold-light);
  padding:8px 24px;border:1px solid var(--gold);
  margin-bottom:32px;
}
.hero-content h1{margin-bottom:28px;color:var(--cream)}
.hero-content p{
  font-size:clamp(1rem,1.4vw,1.2rem);
  max-width:600px;margin:0 auto 44px;
  color:rgba(245,239,230,0.85);font-weight:300;
}
.hero-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:16px 38px;
  font-size:0.8rem;font-weight:500;
  letter-spacing:0.25em;text-transform:uppercase;
  transition:all 0.4s ease;
  cursor:pointer;border:none;
}
.btn-gold{background:var(--gold);color:#1a1614}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,163,93,0.3)}
.btn-outline{background:transparent;color:var(--cream);border:1px solid var(--cream)}
.btn-outline:hover{background:var(--cream);color:#1a1614}
.hero-scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--cream);font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;
  animation:bounce 2.4s ease-in-out infinite;
  z-index:2;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(30px);transition:all 1s cubic-bezier(0.22,0.61,0.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes revealFallback{to{opacity:1;transform:translateY(0)}}
.reveal{animation:revealFallback 1.2s ease 0.5s forwards}

/* ===== INTRO ===== */
.intro{padding:140px 0;background:var(--cream)}
.intro-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start}
.intro-text h2{color:var(--text)}
.intro-content .lead{font-size:1.3rem;font-weight:300;line-height:1.6;margin-bottom:24px;color:var(--text)}
.intro-content p{color:var(--text-light);margin-bottom:24px}
.intro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px;padding-top:50px;border-top:1px solid var(--line)}
.stat strong{display:block;font-family:'Cormorant Garamond',serif;font-size:2.8rem;color:var(--gold);font-weight:500;line-height:1}
.stat span{display:block;margin-top:8px;font-size:0.78rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-light)}

/* ===== SECTIONS ===== */
section{position:relative}
.section-head{text-align:center;max-width:700px;margin:0 auto 80px}
.section-head h2{color:var(--text);margin-bottom:24px}
.section-head p{color:var(--text-light);font-size:1.05rem}

/* ===== VIANDES ===== */
.viandes{padding:140px 0;background:var(--bg);color:var(--cream)}
.viandes .section-head h2,.viandes .section-head{color:var(--cream)}
.viandes .section-head h2{color:var(--cream)}
.viandes .section-head p{color:rgba(245,239,230,0.7)}
.viandes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.viande-card{
  position:relative;overflow:hidden;
  transition:transform 0.5s ease;
}
.viande-card .card-img{
  aspect-ratio:4/5;overflow:hidden;margin-bottom:24px;position:relative;
}
.viande-card .card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,13,12,0.4));
  pointer-events:none;
}
.viande-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease}
.viande-card:hover img{transform:scale(1.06)}
.card-num{font-family:'Cormorant Garamond',serif;font-size:0.95rem;color:var(--gold);letter-spacing:0.2em}
.card-body h3{margin:10px 0 12px;color:var(--cream);font-size:1.7rem}
.card-body p{color:rgba(245,239,230,0.65);font-size:0.92rem;line-height:1.7}

/* ===== SAVOIR-FAIRE ===== */
.savoir-faire{padding:140px 0;background:var(--cream-2)}
.sf-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.sf-img{aspect-ratio:4/5;overflow:hidden;position:relative}
.sf-img::before{
  content:'';position:absolute;top:30px;left:30px;right:-30px;bottom:-30px;
  border:1px solid var(--gold);z-index:-1;
}
.sf-img img{width:100%;height:100%;object-fit:cover}
.sf-content h2{color:var(--text);margin-bottom:28px}
.sf-content > p{color:var(--text-light);margin-bottom:36px;font-size:1.05rem}
.sf-list{list-style:none}
.sf-list li{
  display:flex;align-items:center;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
  color:var(--text);font-size:0.98rem;
}
.sf-list svg{color:var(--gold);flex-shrink:0}

/* ===== GALERIE ===== */
.galerie{padding:140px 0;background:var(--cream)}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:18px;
}
.g-item{overflow:hidden;position:relative}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease}
.g-item:hover img{transform:scale(1.08)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* ===== CONTACT ===== */
.contact{padding:140px 0;background:var(--bg);color:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact-info h2{color:var(--cream);margin-bottom:24px}
.contact-info > p{color:rgba(245,239,230,0.7);margin-bottom:40px}
.info-block{
  display:flex;gap:20px;padding:24px 0;
  border-top:1px solid var(--line);
}
.info-block:last-child{border-bottom:1px solid var(--line)}
.info-icon{
  width:48px;height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:var(--gold);
}
.info-block h4{font-family:'Inter',sans-serif;font-size:0.75rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:500}
.info-block p{color:rgba(245,239,230,0.85);font-size:0.95rem;line-height:1.6}
.contact-map{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line)}
.contact-map iframe{width:100%;height:100%;filter:grayscale(0.4) contrast(1.05)}

/* ===== FOOTER ===== */
.footer{background:#0a0908;color:var(--cream);padding:80px 0 30px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-brand .logo{color:var(--cream);margin-bottom:20px}
.footer-brand p{color:rgba(245,239,230,0.6);font-size:0.95rem;max-width:320px}
.footer-col h4{font-family:'Inter',sans-serif;font-size:0.75rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:500}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a,.footer-col p{color:rgba(245,239,230,0.65);font-size:0.9rem;transition:color 0.3s}
.footer-col a:hover{color:var(--gold-light)}
.footer-col p{margin-bottom:14px}
.footer-bottom{
  padding-top:30px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.8rem;color:rgba(245,239,230,0.5);
}
.admin-link{color:rgba(245,239,230,0.4);transition:color 0.3s;font-size:0.78rem;letter-spacing:0.1em}
.admin-link:hover{color:var(--gold)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(15,13,12,0.98);backdrop-filter:blur(14px);
    padding:30px 5%;gap:24px;
    border-top:1px solid var(--line);
  }
  .hamburger{display:flex}
  .intro-grid,.sf-grid,.contact-grid{grid-template-columns:1fr;gap:50px}
  .viandes-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:680px){
  .intro,.viandes,.savoir-faire,.galerie,.contact{padding:90px 0}
  .viandes-grid{grid-template-columns:1fr;gap:40px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .g-wide{grid-column:span 2}
  .g-tall{grid-row:span 2}
  .intro-stats{grid-template-columns:1fr;gap:20px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center}
  .section-head{margin-bottom:50px}
  .sf-img::before{top:15px;left:15px;right:-15px;bottom:-15px}
}