/* www/terrefauve/style.css — fonds blancs + shadows + header agrandi */

/* =========================
   Thème & Reset
   ========================= */
:root{
  --page-bg:#ffffff;        /* page */
  --panel-bg:#ffffff;       /* sections (tabs-section) */
  --card-bg:#ffffff;        /* cartes */
  --bordeaux:#7a0f2e;
  --bordeaux-dark:#4d0a1e;
  --bordeaux-light:#b44a61;
  --text:#2b1b1f;
  --muted:#5a4a4e;

  /* Ombres */
  --shadow-xs:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-sm:0 6px 14px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04);
  --shadow-md:0 12px 28px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.04);
  --shadow-lg:0 20px 45px rgba(0,0,0,.16), 0 3px 0 rgba(0,0,0,.04);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================
   Header (agrandi)
   ========================= */
.site-header{
  position:relative;
  height:280px;                    /* mobile */
  background-image:url("./assets/images/header-bouteille.jpg");
  background-size:cover;
  background-position:center top;  /* cadrer le sujet en haut */
  background-repeat:no-repeat;
  display:flex;align-items:flex-end;
  padding:32px 0 24px;            /* respiration top */
  box-shadow:var(--shadow-sm);
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.45) 100%)}
.header-inner{
  position:relative;max-width:1100px;margin:0 auto;padding:0 16px;width:100%;
  display:flex;align-items:flex-end;justify-content:flex-start;
}
.brand-title{font-size:1.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.brand-subtitle{display:block;font-size:.9rem;margin-top:4px;color:#f0e8e4;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.header-fallback{display:none}

/* Breakpoints header */
@media (min-width:768px){
  .site-header{height:360px;padding-top:40px}
  .brand-title{font-size:1.8rem}
}
@media (min-width:1024px){
  .site-header{height:460px;padding-top:48px}
  .brand-title{font-size:2rem}
  .brand-subtitle{font-size:1rem}
}

/* =========================
   Layout
   ========================= */
.main-container{max-width:1100px;margin:24px auto 40px;padding:0 16px}
.intro{margin-bottom:24px}
.intro h1{font-size:2rem;margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--bordeaux-dark)}
.intro p{max-width:700px;font-size:.98rem;color:var(--muted)}

/* =========================
   Section TABS — blanc + shadow
   ========================= */
.tabs-section{
  background:var(--panel-bg);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow-md);
}
.tabs{
  background:#fff;
  border-radius:14px;
  padding:16px 16px 24px;
  box-shadow:var(--shadow-xs);
}

/* Tabs UI */
.tabs input[type="radio"]{display:none}
.tab-label{
  display:inline-block;padding:10px 18px;margin-right:8px;border-radius:999px;
  font-size:.9rem;cursor:pointer;background:#f3efec;color:var(--bordeaux-dark);
  border:1px solid rgba(0,0,0,.06);
  transition:background .25s ease,color .25s ease,transform .15s ease;user-select:none
}
.tab-label:hover{background:var(--bordeaux-light);color:#fff}
#tab-grand-public:checked+label[for="tab-grand-public"],
#tab-professionnels:checked+label[for="tab-professionnels"]{
  background:var(--bordeaux);color:#fff;border-color:transparent
}
.tab-content{display:none;margin-top:16px;animation:fadeIn .25s ease-out}
#tab-grand-public:checked~#grand-public-content,
#tab-professionnels:checked~#professionnels-content{display:block}

/* =========================
   Grilles & Cartes — blanc + ombres
   ========================= */
.wine-grid,.pro-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:16px
}
.wine-card{
  background:var(--card-bg);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease,box-shadow .25s ease
}
.wine-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.wine-card h3{
  font-size:1.15rem;margin-bottom:4px;letter-spacing:.03em;text-transform:uppercase;color:var(--bordeaux-dark)
}
.wine-type{font-size:.85rem;color:var(--bordeaux-light);margin-bottom:10px;text-transform:uppercase}
.wine-notes{font-size:.95rem;margin-bottom:12px;color:#3a292e}
.wine-details{font-size:.88rem;color:#5b434a}

/* =========================
   Contact
   ========================= */
.contact-block{margin-top:28px;padding-top:20px;border-top:1px solid rgba(0,0,0,.06)}
.contact-block h3{font-size:1rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--bordeaux-dark)}
.contact-email a{color:var(--bordeaux);text-decoration:none;font-weight:600}
.contact-email a:hover{color:var(--bordeaux-light);text-decoration:underline}

/* =========================
   Footer noir
   ========================= */
.site-footer{
  text-align:center;font-size:.8rem;color:#fff;
  padding:16px 0 24px;background:#000;border-top:none;
  box-shadow:0 -8px 22px rgba(0,0,0,.12);
}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:#ccc;text-decoration:underline}

/* =========================
   Animations & Responsive
   ========================= */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:600px){
  .header-inner{align-items:flex-start}
  .intro h1{font-size:1.6rem}
  .tab-label{margin-bottom:6px}
  .tabs{padding:12px 12px 20px}
}