:root{
  --bg:#f8f6f0;
  --paper:#fffdf8;
  --ink:#1f1b16;
  --muted:#6f665c;
  --brand:#8c5a2e; /* ton boisé */
  --brand-2:#b88b56; /* miel */
  --accent:#a1b27b; /* prairie */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
  --link: var(--brand);
  --link-bg-hover: rgba(140, 90, 46, .12);   /* halo miel */
  --link-focus: rgba(140, 90, 46, .35);
 }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  /* 3 calques : voile blanc (filigrane), image, puis dégradé du thème */
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    url('../images/fond.jpg') center/cover no-repeat,
    linear-gradient(180deg, var(--bg), var(--paper));
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{font-family: Marcellus, Georgia, 'Times New Roman', serif; line-height:1.2; color:var(--ink); margin:0 0 .6rem}
h1{font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem)}
h2{font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem)}
p{margin:.5rem 0 1rem}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.7);backdrop-filter: blur(8px);
  border-bottom:1px solid #eee;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:.4px}
.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid var(--brand);border-radius:50%}
.site-nav{display:flex;gap:1rem}
.site-nav a{color:var(--ink);text-decoration:none;padding:.6rem .8rem;border-radius:12px}
.site-nav a:hover{background:var(--paper)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:28px;height:3px;background:var(--ink);margin:5px 0;border-radius:2px}

@media (max-width:840px){
  .nav-toggle{ display:block; z-index:10000 }
  .site-nav{
    position:absolute; right:20px; top:64px;
    background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:10px; border-radius:14px;
    display:none; flex-direction:column; min-width:220px;
    z-index:9999;
  }
  .site-nav.open{ display:flex }
  .site-nav a{ padding:.8rem 1rem }
}

.hero{
  display:grid;grid-template-columns: 1.2fr .8fr;gap:2rem;align-items:center;padding: clamp(1rem, 2vw, 2rem) 0;
}
.hero .image{
  aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #ddd url('/assets/images/placeholder-hero.jpg') center/cover no-repeat;
}
.badge{display:inline-block;background:var(--accent);color:#0f1608;font-weight:600;border-radius:999px;padding:.2rem .6rem;margin-bottom:.8rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.btn{
  display:inline-block; border:2px solid var(--brand); color:#fff; background:var(--brand);
  padding:.7rem 1rem; border-radius:14px; text-decoration:none; font-weight:600; box-shadow:var(--shadow)
}
.btn.alt{background:transparent;color:var(--brand)}
.btn:hover{filter:brightness(1.05)}

.section{padding:3rem 0}
.card{
  background:var(--paper); border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow);
}
.grid{display:grid;gap:1rem}
.grid.cols-3{grid-template-columns: repeat(3,1fr)}
@media (max-width:860px){ .hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .grid.cols-3{grid-template-columns:1fr} }

.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;margin-bottom:.2rem}

.product{
  display:grid;grid-template-columns: 120px 1fr;gap:1rem;align-items:center
}
.product .thumb{
  width:120px;height:120px;border-radius:14px;background:#ddd url('/assets/images/placeholder-product.jpg') center/cover no-repeat
}
.product .meta .pill{display:inline-block;font-size:.78rem;padding:.2rem .5rem;border-radius:999px;background:#eee;margin-right:.4rem}
.pill.vache{background:#f1e1c2}
.pill.brebis{background:#e2f1c2}
.pill.mixte{background:#ffe8e2}

.contact-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:1.5rem}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }

input,textarea,select{
  width:100%;padding:.8rem;border-radius:12px;border:1px solid #ddd;background:#fff;outline:none
}
label{display:block;font-weight:600;margin:.4rem 0 .2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }

.site-footer{padding:2rem 0;background:#fff;border-top:1px solid #eee;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.footer-nav{display:grid;gap:.3rem}
.tiny{font-size:.85rem;color:var(--muted);margin-top:1rem}
.mini-news .mini-row{display:flex;gap:.5rem;margin-top:.2rem}
.mini-news input{flex:1}
.notice{padding:.8rem 1rem;border-radius:12px;background:#eef8ea;border:1px solid #b7dfb0;margin:.6rem 0}
.error{background:#fff2f2;border-color:#ffd6d6}

/* === Full-width gallery === */
.gallery-section{width:100vw;margin-left:50%;transform:translateX(-50%);background:#000}
.gallery{position:relative}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.gallery-slide{position:relative;min-width:100vw;height:clamp(260px,45vw,520px);flex:0 0 auto;scroll-snap-align:center;background:#111 center/cover no-repeat}
.gallery-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25),rgba(0,0,0,.1))}
.gallery-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.gallery-btn{pointer-events:auto;border:0;background:rgba(255,255,255,.85);width:42px;height:42px;border-radius:999px;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.08);cursor:pointer}
.gallery-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px}
.gallery-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:0}
.gallery-dot[aria-current="true"]{background:#fff}

/* Liens par défaut (dans le contenu), exclus: .btn */
main a:not(.btn){
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  border-radius: 10px;
  padding: .05rem .25rem;
  transition: background-color .2s, color .2s, text-decoration-color .2s, box-shadow .2s;
}
main a:not(.btn):hover{
  background: var(--link-bg-hover);
}
main a:not(.btn):focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--link-focus);
}

/* Variante CTA inline (flèche animée) */
a.cta-inline:not(.btn){
  position: relative;
  font-weight: 700;
  text-decoration: none;
}
a.cta-inline:not(.btn)::after{
  content: "→";
  margin-left: .35em;
  display: inline-block;
  transform: translateX(0);
  transition: transform .2s;
}
a.cta-inline:not(.btn):hover::after{ transform: translateX(2px); }

/* Liens façon bouton léger (si tu veux un bouton sans classe .btn) */
a.link-chip{
  display: inline-block;
  background: var(--link-bg-hover);
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
  padding: .45rem .8rem;
  border: 2px solid var(--link);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: filter .2s, background-color .2s;
}
a.link-chip:hover{ filter: brightness(1.05); }

/* Footer: liens façon "chips" (ghost buttons) */
.site-footer .footer-nav{
  display:flex;               /* au lieu de grid, plus souple pour les puces */
  flex-wrap:wrap;
  gap:.5rem .6rem;
}

.site-footer .footer-nav a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .75rem;
  border:2px solid var(--brand);
  border-radius:14px;
  background:transparent;
  color:var(--brand);
  font-weight:700;
  text-decoration:none;       /* on enlève le soulignement, style “bouton” */
  transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
}

.site-footer .footer-nav a:hover{
  background: rgba(140, 90, 46, .12);    /* halo miel en survol */
}

.site-footer .footer-nav a:active{
  transform: translateY(1px);
}

.site-footer .footer-nav a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(140, 90, 46, .28);
}

/* Petite flèche animée */
.site-footer .footer-nav a::after{
  content:"→";
  transform: translateX(0);
  transition: transform .15s ease;
}
.site-footer .footer-nav a:hover::after{ transform: translateX(2px); }