/* Styles additionnels pour les pages plats statiques (ndole.html, eru.html, ...).
   Réutilise les variables et polices définies dans styles.css (le CSS du site
   principal) pour garder la même identité visuelle. */

.dish-page{
  max-width:980px;
  margin:0 auto;
  padding:1.4rem 5vw 3rem;
}

.dish-breadcrumb{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:1.4rem;
}
.dish-breadcrumb a{ color:var(--green-dark); text-decoration:none; }
.dish-breadcrumb a:hover{ text-decoration:underline; }

.dish-hero{
  display:flex;
  gap:2rem;
  align-items:center;
  flex-wrap:wrap;
  background:var(--mist);
  border-radius:20px;
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
  margin-bottom:2.4rem;
}
.dish-hero-photo{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:var(--shadow-md);
  flex-shrink:0;
}
.dish-hero-copy{ flex:1; min-width:260px; }
.dish-hero-copy h1{
  font-family:'Fraunces', serif;
  color:var(--heading);
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom:0.3rem;
}
.dish-tagline{
  color:var(--green-dark);
  font-weight:600;
  margin-bottom:0.8rem;
}
.dish-intro{
  color:var(--ink);
  line-height:1.6;
  margin-bottom:1.3rem;
}
.dish-cta-row{
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap;
}
.dish-cta-primary{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-weight:700;
  padding:0.75rem 1.4rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform 0.2s var(--ease), background 0.2s var(--ease);
}
.dish-cta-primary:hover{ background:var(--green-dark); transform:translateY(-1px); }
.dish-cta-secondary{
  display:inline-block;
  color:var(--green-dark);
  font-weight:600;
  padding:0.75rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  border:1.5px solid var(--green);
}
.dish-cta-secondary:hover{ background:var(--hover-tint); }

.dish-ingredients, .dish-packs{ margin-bottom:2.2rem; }
.dish-ingredients h2, .dish-packs h2{
  font-family:'Fraunces', serif;
  color:var(--heading);
  font-size:1.5rem;
  margin-bottom:0.9rem;
}
.dish-ingredient-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.dish-ingredient-list li{
  background:var(--paper);
  border:1px solid var(--hover-tint);
  color:var(--ink);
  padding:0.45rem 0.9rem;
  border-radius:999px;
  font-size:0.9rem;
}

.dish-pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.2rem;
}
.dish-pack-card{
  background:var(--surface);
  border-radius:16px;
  padding:1.3rem;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
}
.dish-pack-badge{
  display:inline-block;
  align-self:flex-start;
  background:var(--hover-tint);
  color:var(--green-dark);
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  margin-bottom:0.6rem;
}
.dish-pack-card h3{
  font-family:'Fraunces', serif;
  color:var(--heading);
  font-size:1.15rem;
  margin-bottom:0.6rem;
}
.dish-pack-ingredients, .dish-pack-complements{
  list-style:none;
  margin-bottom:0.5rem;
}
.dish-pack-ingredients li{
  font-size:0.88rem;
  color:var(--ink);
  padding:0.15rem 0;
}
.dish-pack-ingredients li::before{ content:"• "; color:var(--green); }
.dish-pack-complements{
  margin-top:0.5rem;
  margin-bottom:1rem;
  border-top:1px solid var(--hover-tint);
  padding-top:0.6rem;
}
.dish-pack-complements li{
  font-size:0.85rem;
  color:var(--muted);
  padding:0.1rem 0;
}
.dish-pack-order{
  margin-top:auto;
  display:inline-block;
  text-align:center;
  background:var(--green);
  color:#fff;
  font-weight:700;
  padding:0.6rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-size:0.9rem;
}
.dish-pack-order:hover{ background:var(--green-dark); }

.dish-custom-note{
  margin-top:1.2rem;
  color:var(--muted);
  font-size:0.9rem;
}
.dish-custom-note a{ color:var(--green-dark); font-weight:600; text-decoration:underline; }

@media (max-width:640px){
  .dish-hero{ flex-direction:column; text-align:center; }
  .dish-hero-copy{ min-width:0; }
  .dish-cta-row{ justify-content:center; }
  .dish-ingredient-list{ justify-content:center; }
}