:root{
  --paper: #FBF4E6;
  --paper-card: #FFFFFF;
  --ink: #3E362C;
  --ink-soft: #756B5C;
  --clay: #D98E4A;
  --olive: #7A9A63;
  --mustard: #E3B155;
  --line: rgba(62,54,44,0.13);
  --radius: 3px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(ellipse at top left, rgba(217,142,74,0.08), transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 28px;
}

h1, h2, h3, .display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:'Karla', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--clay);
  font-weight:700;
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background 0.25s ease, border-color 0.25s ease;
}
header.scrolled{
  background:rgba(251,244,230,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header .brand, header .navlinks a{color:var(--ink);}
header.scrolled .brand, header.scrolled .navlinks a{color:var(--ink);}
header .navtoggle span{background:var(--ink);}
header.scrolled .navtoggle span{background:var(--ink);}
/* En-tête toujours opaque quand il n'y a pas de photo plein cadre dessous */
header.solid{background:rgba(251,244,230,0.96); border-bottom:1px solid var(--line);}
header.solid .brand, header.solid .navlinks a{color:var(--ink);}
header.solid .navtoggle span{background:var(--ink);}

nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:600;
  font-size:1.4rem;
}
.navlinks{display:flex; gap:32px; font-size:0.95rem;}
.navlinks a{position:relative; padding:4px 0;}
.navlinks a:hover{color:var(--clay);}
.navlinks a.active{color:var(--clay);}
.navtoggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
.navtoggle span{width:24px; height:2px; background:var(--ink);}

/* ---------- HERO (accueil, plein cadre) ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(62,54,44,0.28) 0%, rgba(62,54,44,0.52) 62%, rgba(62,54,44,0.78) 100%),
    url('site/IMG-20250323-WA0001.jpg');
  background-size:cover;
  background-position:center;
  color:#FBF4E6;
}
.hero .wrap{
  padding-bottom:80px;
  max-width:720px;
}
.hero .eyebrow{color:var(--mustard);}
.hero h1{
  font-size:clamp(2.4rem, 5.2vw, 3.8rem);
  line-height:1.08;
  margin:14px 0 22px;
  color:#FFFBF3;
}
.hero h1 em{
  font-style:italic;
  color:var(--mustard);
  font-weight:500;
}
.hero p{
  max-width:50ch;
  color:rgba(251,244,230,0.90);
  font-size:1.05rem;
}
.hero .cta{
  display:inline-block;
  margin-top:30px;
  padding:14px 26px;
  background:var(--mustard);
  color:var(--ink);
  border-radius:var(--radius);
  font-size:0.9rem;
  letter-spacing:0.03em;
  font-weight:700;
}
.hero .cta:hover{background:#FFFBF3;}

/* ---------- MINI HERO (page produits) ---------- */
.page-hero{
  padding:150px 0 60px;
  background:
    linear-gradient(180deg, rgba(227,177,85,0.16), transparent),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{margin-bottom:12px;}
.page-hero h1{
  font-size:clamp(2.2rem, 4.4vw, 3.2rem);
  max-width:16ch;
}
.page-hero p{color:var(--ink-soft); max-width:56ch; margin-top:16px; font-size:1.05rem;}

/* ---------- TEASER (accueil, sans les produits) ---------- */
.teaser{
  padding:100px 0;
  background:var(--paper-card);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.teaser .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.teaser-text{max-width:480px;}
.teaser-text h2{font-size:clamp(1.8rem, 3.2vw, 2.3rem);}
.teaser-text p{color:var(--ink-soft); margin-top:14px;}
.teaser .cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  background:var(--olive);
  color:#FFFBF3;
  border-radius:var(--radius);
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.teaser .cta:hover{background:var(--clay);}
.teaser .cta svg{width:15px; height:15px;}

/* ---------- SECTION HEADS ---------- */
.section{padding:90px 0;}
.section-head{
  max-width:560px;
  margin-bottom:52px;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.5rem);
  margin-top:10px;
}
.section-head p{color:var(--ink-soft); margin-top:14px;}

/* ---------- PRODUCTS ---------- */
.products{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.tag-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 22px 24px;
  position:relative;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.tag-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px -18px rgba(62,54,44,0.30);
}
.tag-card::before{
  content:"";
  position:absolute;
  top:16px; right:16px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
}
.tag-card .num{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:0.78rem;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}
.tag-card .thumb{
  margin:14px 0 16px;
  aspect-ratio:1/1;
  border-radius:3px;
  background:linear-gradient(150deg, rgba(217,142,74,0.18), rgba(122,154,99,0.14));
  border:1px dashed rgba(62,54,44,0.20);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  font-size:0.78rem;
  text-align:center;
  padding:10px;
}
.tag-card h3{
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:6px;
}
.tag-card p{
  color:var(--ink-soft);
  font-size:0.92rem;
  margin-bottom:18px;
}
.tag-card .shop{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.84rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink);
  border-top:1px dashed var(--line);
  padding-top:14px;
  width:100%;
}
.tag-card .shop svg{width:14px; height:14px; transition:transform 0.2s ease;}
.tag-card .shop:hover{color:var(--clay);}
.tag-card .shop:hover svg{transform:translateX(3px);}

/* ---------- ABOUT / CREATION ---------- */
.about .wrap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}
.about-photo{
  aspect-ratio:4/5;
  border-radius:6px;
  background:linear-gradient(165deg, rgba(122,154,99,0.20), rgba(227,177,85,0.18));
  border:1px solid var(--line);
}
.about p{color:var(--ink-soft); margin-top:16px; max-width:56ch;}
.about .signature{
  margin-top:26px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.2rem;
}

.histoire-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}

/* ---------- CONTACT / FOOTER ---------- */
footer{
  background:var(--ink);
  color:var(--paper);
  padding:70px 0 34px;
}
footer h2{color:var(--paper); font-size:2rem;}
footer .foot-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(251,244,230,0.15);
}
footer p{color:rgba(251,244,230,0.72); margin-top:12px; max-width:44ch;}
footer .contact-links{display:flex; flex-direction:column; gap:10px; font-size:0.98rem;}
footer .contact-links a:hover{color:var(--mustard);}
.bottom-row{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px;
  font-size:0.8rem;
  color:rgba(251,244,230,0.5);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .products{grid-template-columns:repeat(2, 1fr);}
  .about .wrap{grid-template-columns:1fr;}
  .histoire-grid{grid-template-columns:1fr; gap:24px;}
  footer .foot-grid{grid-template-columns:1fr; gap:30px;}
  .teaser .wrap{flex-direction:column; align-items:flex-start;}
}
@media (max-width:600px){
  .navlinks{
    position:absolute; top:78px; left:0; right:0;
    background:var(--paper);
    flex-direction:column; gap:0;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .navlinks.open{display:flex;}
  .navlinks.open a{color:var(--ink) !important;}
  .navlinks a{padding:16px 28px; border-top:1px solid var(--line);}
  .navtoggle{display:flex;}
  .products{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .tag-card, .shop, .shop svg{transition:none;}
}




/* ---------- PRODUCT GALLERY ---------- */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.product-gallery img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.product-hero {
  padding: 80px 0 40px 0;
  text-align: center;
  background: var(--paper-card);
  border-bottom: 1px solid var(--line);
}
.product-hero h1 { margin-bottom: 10px; }
.product-hero p { max-width: 600px; margin: 0 auto 20px auto; color: var(--ink-soft); }