/* === Styles Maison Christophe Pichon === */
:root{ --cream:#f5f1e6; --oak:#8b5a3c; --wine:#6b0f1a; --ink:#1e1e1e; --text:#444 }

@font-face {
 font-family: 'Cormorant Infant';
 src: url("accueil_font/Cormorant_Infant/CormorantInfant-VariableFont_wght.ttf") format('ttf');
}
@font-face {
 font-family: 'Alata';
 src: url("accueil_font/Alata/Alata-Regular.ttf") format('ttf');
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family: "Cormorant Infant", 'Times New Roman', Sans-serif; color:var(--text); background:#fff }
.content{ position:relative; min-height:70vh; background:url('accueil_images/content.jpg') center/cover no-repeat }
.content::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)) }
.content__content{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:5rem 1.5rem 3rem 1.5rem; text-align:center; color:#fff }
.content h1{ font-size:5rem; margin:0 0 1rem }
.content__tagline{ font-size:1.125rem; opacity:.95; margin:2rem 0 5rem 0; }
.content__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.infos{margin:5rem 0;font-family:"Alata",Sans-serif;}
.apel{z-index:10;background:var(--cream);margin: 0 0 2rem 0;font-family:"Alata",Sans-serif; }
.btn{ display:inline-block; padding:.85rem 1.25rem; border-radius:.5rem; text-decoration:none; font-family:'Helvetica','Segoe UI',sans-serif; font-weight:600 }
.btn--oak{ background:var(--oak); color:#fff }
.btn--wine{ background:var(--wine); color:#fff }
.btn--sand{ background:#d3c3a1; color:#221 }
.btn:hover{ filter:brightness(1.05) }
.split{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; padding:3rem 1.5rem; background:var(--cream) }
.card{ background:#fff; border-radius:.75rem; box-shadow:0 6px 20px rgba(0,0,0,.08); overflow:hidden }
.card img{ display:block; width:100%; height:auto }
.card__body{ padding:1.25rem }
.card h2{ margin:.25rem 0 .5rem; font-size:1.75rem; color:var(--ink) }
.card p{ margin:0 0 1rem }
.container{ max-width:1100px; margin:0 auto; padding:0 1.5rem }
.about, .visit{ padding:3rem 0 ;color:#fff }
.about h3, .visit h3{ margin:0 0 .75rem; color:color:#fff }
.appellations{ background:#fff; padding:2rem 0 }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.grid article{ border:1px solid #eee; border-radius:.5rem; overflow:hidden }
.grid img{ width:100%; height:auto; display:block }
.grid h4{ margin:.75rem 1rem 0; color:var(--ink) }
.grid p{ margin:.25rem 1rem 1rem }
.visit{ background:var(--cream); text-align:center }
.footer{ background:#111; color:#ddd; padding:2rem 0 }
.footer__grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem }
.footer__links a{ color:#ddd; margin-right:1rem; text-decoration:none }
.footer__links a:hover{ text-decoration:underline }
@media (max-width: 960px){ .content__content{ padding:6rem 1rem } .split{ grid-template-columns:1fr } .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 640px){ .grid{ grid-template-columns:1fr } .content h1{ font-size:2.25rem } }