/* ============================================================
   Élevage Bonnetré — feuille de style des pages dédiées
   Charte alignée sur la page d'accueil (sans dépendance JS)
   ============================================================ */
:root{
  --ivory:#f5f1e8; --cream:#ede6d3; --forest:#1f2e24; --forest-deep:#141d17;
  --gold:#b89968; --gold-light:#d4b98a; --charcoal:#2b2a28; --muted:#6b6860;
  --shadow:0 20px 60px -20px rgba(20,29,23,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif; color:var(--charcoal); background:var(--ivory);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.15; color:var(--forest)}
em{font-style:italic; color:var(--gold)}
a{color:var(--forest); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 1.5rem}

/* ---- Nav ---- */
nav{
  position:sticky; top:0; z-index:50; background:rgba(245,241,232,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(31,46,36,.08);
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
}
.logo{font-family:'Cormorant Garamond',serif; font-size:1.45rem; color:var(--forest); display:flex; flex-direction:column; line-height:1}
.logo span{font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:.3rem}
.nav-links{list-style:none; display:flex; gap:1.6rem; align-items:center}
.nav-links a{font-size:.85rem; letter-spacing:.04em; color:var(--charcoal); transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{background:var(--forest); color:var(--ivory)!important; padding:.55rem 1.1rem; border-radius:2px; font-weight:500}
.nav-cta:hover{background:var(--gold); color:var(--forest)!important}
@media(max-width:760px){ .nav-links li:not(.keep){display:none} }

/* ---- Hero ---- */
.hero{position:relative; min-height:54vh; display:flex; align-items:flex-end; color:var(--ivory); overflow:hidden}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(to top,rgba(20,29,23,.85) 0%,rgba(20,29,23,.35) 55%,rgba(20,29,23,.45) 100%)}
.hero-content{position:relative; z-index:2; padding:3rem 0 2.6rem}
.hero-pretitle{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1rem}
.hero h1{color:var(--ivory); font-size:clamp(2.2rem,5vw,3.6rem); max-width:18ch}
.hero h1 em{color:var(--gold-light)}
.hero p.lead{margin-top:1rem; max-width:52ch; font-size:1.05rem; color:rgba(245,241,232,.9)}

/* ---- Breadcrumb ---- */
.breadcrumb{font-size:.78rem; color:var(--muted); padding:1rem 0; border-bottom:1px solid rgba(31,46,36,.08)}
.breadcrumb a{color:var(--gold)}

/* ---- Sections ---- */
section.block{padding:3.4rem 0}
.eyebrow{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem}
section.block h2{font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:1.1rem}
section.block p{margin-bottom:1.1rem; color:var(--charcoal); max-width:66ch}
section.block.alt{background:var(--cream)}

/* ---- Feature grid ---- */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; margin-top:1.8rem}
.feature{background:var(--ivory); border:1px solid rgba(31,46,36,.1); border-radius:4px; padding:1.6rem; box-shadow:var(--shadow)}
.feature .num{font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--gold)}
.feature h3{font-size:1.3rem; margin:.4rem 0 .5rem}
.feature p{font-size:.92rem; color:var(--muted); margin:0}

/* ---- Stats row ---- */
.stats{display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:1.6rem}
.stat .big{font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--forest)}
.stat .lbl{font-size:.78rem; letter-spacing:.05em; color:var(--muted)}

/* ---- Pricing table ---- */
.ptable{width:100%; border-collapse:collapse; margin-top:1.6rem; background:var(--ivory); box-shadow:var(--shadow); border-radius:4px; overflow:hidden}
.ptable th,.ptable td{padding:1rem 1.1rem; text-align:left; border-bottom:1px solid rgba(31,46,36,.1); font-size:.92rem}
.ptable th{background:var(--forest); color:var(--ivory); font-family:'Inter',sans-serif; font-weight:500; letter-spacing:.03em}
.ptable td:last-child{font-weight:600; color:var(--forest); white-space:nowrap}
.note{font-size:.82rem; color:var(--muted); margin-top:.8rem}

/* ---- FAQ ---- */
.faq{margin-top:1.6rem}
.faq details{background:var(--ivory); border:1px solid rgba(31,46,36,.1); border-radius:4px; margin-bottom:.7rem; padding:.2rem 1.2rem}
.faq summary{font-weight:600; color:var(--forest); cursor:pointer; padding:1rem 0; list-style:none; font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; float:right; color:var(--gold); font-size:1.3rem; line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 0 1rem; color:var(--charcoal); font-size:.92rem}

/* ---- CTA band ---- */
.cta{background:var(--forest-deep); color:var(--ivory); text-align:center; padding:3.4rem 1.5rem}
.cta h2{color:var(--ivory); font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:.8rem}
.cta p{color:rgba(245,241,232,.85); max-width:48ch; margin:0 auto 1.6rem}
.btn{display:inline-block; background:var(--gold); color:var(--forest); padding:.85rem 1.8rem; border-radius:2px; font-weight:600; letter-spacing:.03em; transition:background .2s,transform .2s}
.btn:hover{background:var(--gold-light); transform:translateY(-2px)}
.btn-ghost{background:transparent; border:1px solid var(--gold-light); color:var(--ivory); margin-left:.6rem}
.btn-ghost:hover{background:var(--gold); color:var(--forest)}

/* ---- Internal cross-links ---- */
.crosslinks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.8rem}
.crosslinks a{display:block; padding:1.1rem 1.2rem; background:var(--ivory); border:1px solid rgba(31,46,36,.1); border-radius:4px; transition:border-color .2s,transform .2s}
.crosslinks a:hover{border-color:var(--gold); transform:translateY(-2px)}
.crosslinks .t{font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:var(--forest)}
.crosslinks .d{font-size:.82rem; color:var(--muted)}

/* ---- Footer ---- */
footer{background:var(--forest-deep); color:rgba(245,241,232,.8); padding:3rem 0 1.6rem; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem}
footer .logo{color:var(--ivory)}
footer p{font-size:.86rem; margin-top:.8rem; color:rgba(245,241,232,.65)}
footer h5{color:var(--gold-light); font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.9rem}
footer ul{list-style:none}
footer ul li{margin-bottom:.5rem; font-size:.86rem}
footer ul li a{color:rgba(245,241,232,.8)}
footer ul li a:hover{color:var(--gold-light)}
.footer-bottom{margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid rgba(245,241,232,.12); font-size:.78rem; color:rgba(245,241,232,.55)}
@media(max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr} }