/* ============ MAISON JFC — feuille de style unique ============ */
/* Palette inspirée de l'esprit du Domaine — ajustez chaque teinte ici */
:root{
  --bordeaux:#7b2d3e;        /* accent principal (titres, boutons) */
  --bordeaux-fonce:#4a1f2a;   /* bandeau supérieur */
  --creme:#f6f4ef;            /* fond général */
  --sable:#e6e2d8;            /* filets, bordures */
  --encre:#2b2622;            /* texte, footer */
  --gris:#6f655c;
  --or:#a8834e;               /* soulignés, surtitres */
  --vert:#3f4a3a;             /* surtitres, libellés (esprit bio) */
  --serif:"Georgia","Times New Roman",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--encre);
  background:var(--creme);
  line-height:1.7;
  font-size:16px;
}
h1,h2,h3{font-weight:normal;line-height:1.25}
a{color:var(--bordeaux)}
img{max-width:100%;display:block}

/* ---------- Bandeau supérieur sticky ---------- */
.topbar{
  background:var(--bordeaux-fonce);
  color:var(--sable);
  font-size:.78rem;
  text-align:center;
  padding:.45rem 1rem;
  letter-spacing:.12em;
}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(246,244,239,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sable);
  transition:box-shadow .25s ease;
}
.site-header.collant{box-shadow:0 2px 14px rgba(46,38,34,.12)}
.header-inner{
  max-width:1140px;margin:0 auto;padding:.9rem 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
}
.logo{font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux);text-decoration:none}
.logo small{display:block;font-size:.66rem;letter-spacing:.3em;color:var(--or)}
nav ul{list-style:none;display:flex;gap:1.8rem;flex-wrap:wrap}
nav a{
  color:var(--encre);text-decoration:none;font-size:.9rem;letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
nav a:hover,nav a.actif{color:var(--bordeaux);border-bottom-color:var(--or)}

/* ---------- Structure deux volets ---------- */
.page{
  max-width:1140px;margin:0 auto;padding:4rem 24px 5rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:4rem;
  align-items:start;
}
.volet-principal{min-width:0}
.volet-secondaire{
  border-left:1px solid var(--sable);
  padding-left:2.5rem;
  position:sticky;
  top:110px;
}
.volet-secondaire h3{
  font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);margin-bottom:1rem;
}
.volet-secondaire ul{list-style:none;margin-bottom:2.5rem}
.volet-secondaire li{padding:.45rem 0;border-bottom:1px solid var(--sable);font-size:.92rem}
.volet-secondaire li a{text-decoration:none;color:var(--encre);transition:color .2s}
.volet-secondaire li a:hover{color:var(--bordeaux)}

/* ---------- Typographie de contenu ---------- */
.surtitre{
  font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--vert);margin-bottom:1.2rem;
}
.page h1{font-size:clamp(2rem,4.5vw,3rem);color:var(--bordeaux);margin-bottom:1.5rem}
.volet-principal p{margin-bottom:1.4rem;color:#4a403a;max-width:65ch}
.volet-principal h2{font-size:1.6rem;color:var(--encre);margin:2.5rem 0 1rem}
.filet{width:56px;height:2px;background:var(--or);margin:0 0 2rem}

/* ---------- Cartes ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin:2rem 0}
.carte{background:#fffdf9;border:1px solid var(--sable);padding:2rem 1.6rem}
.carte h3{font-size:1.1rem;color:var(--bordeaux);margin-bottom:.6rem}
.carte p{font-size:.92rem;margin:0}
.carte .mini{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-top:.9rem}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin:2rem 0;text-align:center}
.chiffre .nombre{font-size:2rem;color:var(--bordeaux)}
.chiffre .libelle{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vert)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;background:var(--bordeaux);color:var(--creme);
  padding:.85rem 2.4rem;text-decoration:none;
  letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;
  border:1px solid var(--bordeaux);transition:background .25s,color .25s;
}
.btn:hover{background:transparent;color:var(--bordeaux)}

/* ---------- Citation ---------- */
citation{display:block}
.blockquote{
  border-left:3px solid var(--or);padding:.5rem 0 .5rem 1.5rem;
  font-style:italic;font-size:1.15rem;color:#4a403a;margin:2rem 0;
}

/* ---------- Footer ---------- */
footer{
  background:var(--encre);color:#cfc6bd;padding:3rem 24px 2rem;
}
.footer-inner{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;
}
footer h3{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:.9rem}
footer p,footer li{font-size:.88rem;color:#b3a99e}
footer ul{list-style:none}
.footer-bas{
  max-width:1140px;margin:2.5rem auto 0;padding-top:1.2rem;
  border-top:1px solid #4a403a;
  font-size:.72rem;color:#8d8377;text-align:center;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .page{grid-template-columns:1fr;gap:2.5rem;padding:2.5rem 20px 3.5rem}
  .volet-secondaire{border-left:none;border-top:1px solid var(--sable);padding:2rem 0 0;position:static}
  .header-inner{flex-direction:column;text-align:center;gap:.6rem}
}