/* =====================================================================
   Cave Saint Charles — Home « éditorial haut de gamme » (v2)
   Réf. Pibarnon (immersif, plein cadre) + dapperdrive (sobre, carrousel,
   avis clients, beaucoup de blanc). Chargé uniquement par index.html.
   ===================================================================== */

/* Logo agrandi dans le menu */
.site-header .nav-logo img { height: 80px; transition: height var(--transition); }

/* Sur-titre fin en capitales */
.eyebrow { text-transform: uppercase; letter-spacing: 4px; font-size: 0.72rem; font-weight: 600; color: var(--terracotta); }

/* --------------------------- Bandeau d'annonce -------------------- */
.topbar { background: var(--brun); color: var(--creme); font-size: 0.78rem; letter-spacing: 0.4px; }
.topbar .container { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; padding: 0.6rem 0; text-align: center; }
.topbar .badge { background: var(--terracotta); color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 0.68rem; padding: 0.22rem 0.7rem; border-radius: 2px; }
.topbar .sep { opacity: 0.4; }
.topbar strong { color: var(--orange-clair); font-weight: 600; }

/* ------------------------------- HERO ------------------------------ */
.hero-home {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--blanc); padding: 5rem 0;
  background:
    linear-gradient(rgba(35, 26, 20, 0.40), rgba(35, 26, 20, 0.55)),
    url("../assets/cave/accueil.jpg") center/cover no-repeat fixed;
}
.hero-veil {
  display: inline-block; background: rgba(250, 245, 238, 0.90);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 2px; padding: 1.6rem 3.4rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22); max-width: 600px;
}
.hero-veil .eyebrow { display: block; margin-bottom: 0.7rem; white-space: nowrap; letter-spacing: 1.5px; font-size: 0.66rem; }
.hero-veil h1 { color: var(--brun); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.22; margin-bottom: 1.1rem; }
.hero-veil .hero-boutons { display: flex; flex-direction: row; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

.hero-scroll { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); color: var(--creme); font-size: 1.3rem; opacity: 0.8; animation: flotte 2s ease-in-out infinite; }
@keyframes flotte { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ----------------------------- Manifeste -------------------------- */
.manifeste { text-align: center; padding: 7rem 0; }
.manifeste .container { max-width: 880px; }
.manifeste .eyebrow { display: block; margin-bottom: 1.6rem; }
.manifeste blockquote { font-family: var(--titre); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.5; color: var(--brun); margin: 0; }
.manifeste .signature { margin-top: 2rem; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-doux); }

/* ------------------------- Bandeau réassurance -------------------- */
.reassurance { border-top: 1px solid var(--creme-fonce); border-bottom: 1px solid var(--creme-fonce); background: var(--blanc); }
.reassurance .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 2.4rem; padding: 1.4rem 0; text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; font-weight: 600; color: var(--brun); }
.reassurance .dot { width: 4px; height: 4px; background: var(--terracotta); border-radius: 50%; }

/* ----------------------------- Triptyque -------------------------- */
.triptyque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.tri-item { text-align: center; }
.tri-item .tri-img { height: 340px; overflow: hidden; border-radius: 2px; margin-bottom: 1.4rem; }
.tri-item .tri-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.tri-item:hover .tri-img img { transform: scale(1.06); }
.tri-item .eyebrow { display: block; margin-bottom: 0.5rem; }
.tri-item h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.tri-item p { color: var(--texte-doux); font-size: 0.96rem; max-width: 340px; margin: 0 auto 1rem; }
.tri-item .lien-fin { font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--terracotta); padding-bottom: 3px; }

/* --------------------- Section photo plein cadre ------------------ */
.fullbleed {
  position: relative; min-height: 78vh;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--blanc);
  background: linear-gradient(rgba(35,26,20,0.4), rgba(35,26,20,0.52)), url("../assets/domaine/nuit.jpg") center/cover no-repeat fixed;
}
.fullbleed .container { max-width: 820px; }
.fullbleed .eyebrow { color: var(--orange-clair); display: block; margin-bottom: 1.2rem; }
.fullbleed h2 { color: #fff; font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.25; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }

/* --------------------- Carrousel de bouteilles -------------------- */
.carrousel-wrap { position: relative; }
.carrousel {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.5rem 0.2rem 1.5rem; -webkit-overflow-scrolling: touch;
}
.carrousel::-webkit-scrollbar { height: 4px; }
.carrousel::-webkit-scrollbar-thumb { background: var(--creme-fonce); border-radius: 4px; }
.cuvee {
  flex: 0 0 230px; scroll-snap-align: start; text-align: center;
  background: #fff; border: 1px solid var(--creme-fonce); border-radius: 2px;
  padding: 1.6rem 1rem 1.4rem; transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none; color: inherit; display: block;
}
.cuvee:hover { box-shadow: var(--ombre); transform: translateY(-5px); }
.cuvee .cuvee-img { height: 370px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; background: #fff; }
.cuvee .cuvee-img img { height: 370px; width: auto; max-width: 100%; object-fit: contain; }
.cuvee .eyebrow { font-size: 0.64rem; letter-spacing: 2px; display: block; margin-bottom: 0.35rem; }
.cuvee h3 { font-size: 1.25rem; margin-bottom: 0.3rem; color: var(--brun); }
.cuvee p { font-size: 0.85rem; color: var(--texte-doux); margin: 0; }

.carrousel-btn {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--creme-fonce);
  background: #fff; color: var(--brun); font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--ombre);
  transition: background var(--transition), color var(--transition);
}
.carrousel-btn:hover { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.carrousel-btn.prev { left: -10px; }
.carrousel-btn.next { right: -10px; }

/* --------------------------- Accès par couleur -------------------- */
.couleurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.couleur-lien { position: relative; height: 220px; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.couleur-lien::before { content:""; position:absolute; inset:0; transition: opacity 0.3s ease; }
.couleur-lien.c-rouge::before { background: linear-gradient(160deg, #7c2b2b, #3f1010); }
.couleur-lien.c-rose::before  { background: linear-gradient(160deg, #c97389, #9c4d66); }
.couleur-lien.c-blanc::before { background: linear-gradient(160deg, #c2a85f, #8a7030); }
.couleur-lien.c-orange::before { background: linear-gradient(160deg, #d98a3d, #a85617); }
.couleur-lien.c-effervescent::before { background: linear-gradient(160deg, #b9b487, #7e7a45); }
.couleur-lien:hover::before { opacity: 0.85; }
.couleur-lien span { position: relative; z-index: 2; }
.couleur-lien .nom { display:block; font-family: var(--titre); font-size: 2rem; line-height: 1; }
.couleur-lien .compte { display:block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; }

/* ----------------------------- Newsletter ------------------------- */
.newsletter { background: var(--brun); color: var(--creme); text-align: center; }
.newsletter .eyebrow { color: var(--orange-clair); display:block; margin-bottom: 1rem; }
.newsletter h2 { color: #fff; }
.newsletter p { max-width: 540px; margin: 0.8rem auto 1.8rem; color: var(--creme); opacity: 0.92; }
.newsletter-form { display: flex; gap: 0.6rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-form input { flex: 1; min-width: 230px; padding: 0.9rem 1.1rem; border: none; border-radius: 2px; font-family: var(--corps); font-size: 1rem; }
.newsletter-form input:focus { outline: 2px solid var(--orange-clair); }

/* ------------------------------- Avis ----------------------------- */
.avis-entete { text-align: center; margin-bottom: 3rem; }
.avis-entete .note { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-weight: 600; color: var(--brun); }
.avis-entete .etoiles { color: #E8A93B; letter-spacing: 2px; font-size: 1.1rem; }
.avis-carrousel { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.5rem 0.2rem 1.5rem; }
.avis-carrousel::-webkit-scrollbar { height: 4px; }
.avis-carrousel::-webkit-scrollbar-thumb { background: var(--creme-fonce); border-radius: 4px; }
.avis-carte { flex: 0 0 360px; scroll-snap-align: start; background: #fff; border: 1px solid var(--creme-fonce); border-radius: 2px; padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.avis-carte p { flex: 1; }
.avis-carte .etoiles { color: #E8A93B; letter-spacing: 2px; font-size: 1rem; margin-bottom: 0.9rem; }
.avis-carte p { font-style: italic; color: var(--texte); margin-bottom: 1.2rem; line-height: 1.65; }
.avis-carte .auteur { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--texte-doux); }
.avis-carte .auteur svg { width: 18px; height: 18px; }
.insta-ligne { text-align: center; margin-top: 3rem; }
.insta-ligne a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--brun); letter-spacing: 0.5px; }
.insta-ligne svg { width: 22px; height: 22px; }

/* Icône Instagram du pied de page */
.footer-social svg { width: 18px; height: 18px; }

/* ----------------------------- Responsive ------------------------- */
@media (max-width: 900px) {
  .triptyque { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .couleurs { grid-template-columns: repeat(2, 1fr); }
  .avis-grille { grid-template-columns: 1fr; }
  .hero-home, .fullbleed { background-attachment: scroll; }
  .carrousel-btn { display: none; }
}
@media (max-width: 640px) {
  .site-header .nav-logo img { height: 56px; }
  .hero-veil { padding: 2rem 1.6rem 1.7rem; }
  .hero-veil img { height: 88px; }
  .reassurance .container { gap: 0.5rem 1.2rem; font-size: 0.64rem; letter-spacing: 1.5px; }
}