/* ====== Fonts (local) ====== */

@font-face{
  font-family: "Rosemary";
  src: url("assets/fonts/TAYRosemary.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Dazzed";
  src: url("assets/fonts/Dazzed-Medium.woff2") format("woff2"),
       url("assets/fonts/Dazzed-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Dazzed";
  src: url("assets/fonts/Dazzed-Bold.woff2") format("woff2"),
       url("assets/fonts/Dazzed-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "TerraneSansWeb";
  src: url("assets/fonts/TerraneSansWeb-Bold.woff2") format("woff2"),
       url("assets/fonts/TerraneSansWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --pc-green:#384936;
  --pc-cream:#FFF6DF;
  --pc-max: 980px;

  /* ===== Réglages faciles: NEWSLETTER ===== */
  --nl-card-pad: 22px;
  --nl-frame-h: 420px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--pc-cream);
  color: var(--pc-green);
  font-family: "Dazzed", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.35;
}

a{ color: inherit; }

/* ===== Layout ===== */

.wrap{
  max-width: var(--pc-max);
  margin: 0 auto;
  padding: 24px 18px 80px;
}

/* ===== Pills / Circles ===== */

.pill,
.circle{
  font-family: "TerraneSansWeb", system-ui, sans-serif;
  font-weight: 700;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56,73,54,.25);
  text-decoration:none;
  letter-spacing: .2px;
}
.pill:hover{ opacity:.88; }

.circle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--pc-green);
  color: var(--pc-cream);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:800;
  border: 0;
}
.circle:hover{ opacity:.88; }

.circle .icon{
  width: 30px;
  height: auto;
  display: block;
}

.small{ opacity:.85; font-size: 14px; }

/* ===== Hero ===== */

.hero{
  padding: 34px 0 18px;
}

.hero-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 14px;
  margin-bottom: 18px;
}

.hero-logo{
  margin: 0;
}

.hero-logo img{
  display:block;
  width: min(520px, 100%);
  height:auto;
  margin: 0 auto;
}

.hero-bottles{
  display:block;
  width: 300px;
  max-width: 400px;
  height:auto;
  object-fit:contain;
  margin: 0 auto;
}

.hero-tagline{
  margin: 0;
}

/* CTA */
.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 10px;
}

.cta.is-centered{
  justify-content: center;
  width: 100%;
}
.cta.is-centered .circle{
  flex: 0 0 auto;
}

/* ===== Headings / Sections ===== */

.hero h1,
.section h2,
.products-title{
  font-family: "Rosemary", "Dazzed", sans-serif;
  font-weight: 400;
  letter-spacing: .6px;
}

.section{
  padding: 34px 0;
  border-top: 1px solid rgba(56,73,54,.12);
}

.section h2{
  margin: 0 0 14px;
  font-size: 32px;
  letter-spacing: .4px;
  line-height: 1.05;
}

.section p, .section li{
  line-height: 1.6;
  max-width: 72ch;
}

/* texte large */
.section-wide p,
.section-wide li{
  max-width: none;
}

.section-wide{
  max-width: 980px;
  margin: 0 auto;
}

.section p.full-width{
  margin: 0 0 18px;
}
.section p.full-width:last-child{
  margin-bottom: 0;
}

/* ===== NOS VINS (v1) – meta-boxes + CTA dispo + CTA disabled pour 2027 ===== */

#vins.vins.v1{
  --vin-gap-x: 26px;
  --vin-gap-y: 34px;

  --vin-card-bg: rgba(56,73,54,.06);
  --vin-card-radius: 18px;
  --vin-card-pad: 18px;

  --vin-frame-border: rgba(56,73,54,.45);
  --vin-frame-r: 16px;
  --vin-frame-h: 220px;

  /* Tailles (tu changes ici) */
  --vin-title-size: 28px;
  --vin-desc-size: .80rem;        /* mini description */
  --vin-desc-block-h: 3.2em;      /* réserve hauteur pour aligner les CTA */

  --vin-meta-label-size: .60rem;  /* “CÉPAGES”, “ALCOOL” */
  --vin-meta-value-size: .55rem;  /* valeurs */

  --vin-meta-box-radius: 14px;
  --vin-meta-box-border: rgba(56,73,54,.20);
  --vin-meta-box-bg: rgba(255,255,255,.10);

  --vin-rule-w: 64px;
  --vin-rule-h: 2px;

  --vin-title-bleu:  #0a6ab2;
  --vin-title-jaune: #f9a51b;
  --vin-title-rouge: #cb3a27;
  --vin-title-vert:  #435838;
}

/* Intro */
#vins.vins.v1 .wine-intro{
  max-width: none;
  margin: 0 0 18px;
  line-height: 1.65;
  font-size: 1rem;
}
#vins.vins.v1 .wine-intro strong{ font-weight: 700; }

/* Grille */
#vins.vins.v1 .wine-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vin-gap-y) var(--vin-gap-x);
  align-items: stretch;
  margin-top: 10px;
}
@media (min-width: 780px){
  #vins.vins.v1 .wine-grid{ grid-template-columns: 1fr 1fr; }
}

/* Carte */
#vins.vins.v1 .wine-item{
  background: var(--vin-card-bg);
  border-radius: var(--vin-card-radius);
  padding: var(--vin-card-pad);
}

/* Top (image / texte) */
#vins.vins.v1 .wine-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 780px){
  #vins.vins.v1 .wine-top{ grid-template-columns: 1fr; }
}

/* Cadre étiquette */
#vins.vins.v1 .wine-media{
  width: 100%;
  height: var(--vin-frame-h);
  border-radius: var(--vin-frame-r);
  border: 1px solid var(--vin-frame-border);
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#vins.vins.v1 .wine-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Colonne texte */
#vins.vins.v1 .wine-head{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: var(--vin-frame-h); /* aligne le bas entre cartes */
}

/* Titre vin */
#vins.vins.v1 .wine-name{
  margin: 0;
  font-family: "TerraneSansWeb", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--vin-title-size);
  line-height: 1.1;
  color: var(--accent);
}

/* Mini desc (italique) */
#vins.vins.v1 .wine-desc{
  margin: 0;
  opacity: .85;
  line-height: 1.5;
  font-size: var(--vin-desc-size);
  font-style: italic;
  max-width: 40ch;
  min-height: var(--vin-desc-block-h); /* aligne les CTA */
}

/* Petite barre de couleur */
#vins.vins.v1 .wine-rule{
  width: var(--vin-rule-w);
  height: var(--vin-rule-h);
  border-radius: 2px;
  background: var(--accent);
  opacity: .9;
}

/* Meta */
#vins.vins.v1 .wine-meta{
  display: grid;
  gap: 12px;
}
#vins.vins.v1 .meta-box{
  border: 1px solid var(--vin-meta-box-border);
  background: var(--vin-meta-box-bg);
  border-radius: var(--vin-meta-box-radius);
  padding: 10px 12px;
}
#vins.vins.v1 .meta-label{
  font-family: "TerraneSansWeb", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  font-size: var(--vin-meta-label-size);
  color: var(--accent);
  margin: 0 0 4px;
}
#vins.vins.v1 .meta-value{
  margin: 0;
  line-height: 1.35;
  font-size: var(--vin-meta-value-size);
  color: var(--pc-green);
}

/* Bouton (vrai lien) */
#vins.vins.v1 .buy-btn{
  margin-top: auto;           /* pousse le bouton en bas de la colonne texte */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pc-green);
  color: var(--pc-cream);
  text-decoration: none;
  font-family: "TerraneSansWeb", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
}
#vins.vins.v1 a.buy-btn:hover{ opacity: .9; }

/* ✅ IMPORTANT: Dans Rouge/Vert, on cache seulement les <a> (liens) */
#vins.vins.v1 .wine-item.is-soon a.buy-btn{
  display: none;
}

/* ✅ Faux bouton (non cliquable) pour Rouge/Vert */
#vins.vins.v1 .buy-btn.is-disabled{
  margin-top: auto;           /* même placement que le vrai bouton */
  align-self: flex-start;
  cursor: default;
  pointer-events: none;
  opacity: .55;
  filter: saturate(.9);
}

/* Accent par carte */
#vins.vins.v1 .wine-bleu  { --accent: var(--vin-title-bleu); }
#vins.vins.v1 .wine-jaune { --accent: var(--vin-title-jaune); }
#vins.vins.v1 .wine-rouge { --accent: var(--vin-title-rouge); }
#vins.vins.v1 .wine-vert  { --accent: var(--vin-title-vert); }

/* ===== INFOLETTRE / NEWSLETTER  */

/* La boîte */
.newsletter-card{
  margin-top: 18px;
  border: 1px solid var(--nl-card-border);
  border-radius: var(--nl-card-radius);
  background: rgba(255,255,255,.10);
  padding: var(--nl-card-pad);
}

/* La grille */
.newsletter-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nl-gap);
  align-items: start;
}

@media (min-width: 860px){
  .newsletter-grid{
    grid-template-columns: 1.05fr 1.25fr;
  }
}

/* Titres/texte (si tu les gardes dans le HTML) */
.newsletter-title{
  font-family: "Rosemary", "Dazzed", sans-serif;
  font-weight: 400;
  letter-spacing: .4px;
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 10px;
}

.newsletter-sub{
  margin: 0 0 18px;
  max-width: 40ch;
  opacity: .9;
  line-height: 1.5;
}

/* Liste bénéfices + icônes */
.newsletter-benefits{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 16px;
}

.newsletter-benefits .nl-perk{
  display: flex;
  align-items: center;
  gap: 14px;
}

.newsletter-benefits .nl-ico{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(56,73,54,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  color: var(--pc-green);
}

.newsletter-benefits .nl-svg{
  width: 26px;
  height: 26px;
  display: block;
}

/* Colonne droite (formulaire) */
.newsletter-right{
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* Iframe Beehiiv */
.beehiiv-frame{
  width: 100%;
  max-width: var(--nl-frame-maxw);
  height: var(--nl-frame-h);
  border: 0;
  background: transparent;
}
/* ===== Images pleine largeur du contenu (entre sections) ===== */
.section-media{
  margin: 34px 0;     /* espace avant/après l’image */
}

.section-media-img{
  width: 100%;
  height: 280px;        /* ✅ change ça */
  object-fit: cover;    /* crop propre */
  display: block;
  border-radius: 18px;  /* optionnel */
}
/* ===== Images entre sections (vins / infolettre) ===== */

.section-media{
  margin: 10px 0;          /* ✅ espace autour de l’image (réduit/augmente) */
}

/* Base (pour les 2 images) */
.section-media-img{
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ✅ Image avant infolettre */
.section-media-img.media-infolettre{
  height: 400px;
  object-position: 50% 50%;
}

/* ✅ réduit le “buffer” entre l’image et la section qui suit */
.section-media + .section{
  padding-top: 10px;       /* au lieu de 34px */
}