/* =====================================================================
   VD Studio — css/vigneron.css
   Page « Création de site internet pour vigneron » (/site-internet-vigneron),
   chargée APRÈS css/style.css et uniquement sur cette page.

   Elle n'ajoute que la mise en page propre à la page (composition photo du hero,
   liste éditoriale des atouts, périmètre de l'offre, liens connexes). Boutons,
   couleurs, typographie, cadres d'appareils, parcours, FAQ, étiquette de prix et
   animations restent ceux de style.css : la page reste une page VD Studio, et
   non une déclinaison de la démonstration Domaine Steinlicht.
   ===================================================================== */

/* ---------- A. Hero : texte + composition photographique ---------- */
.hero-vin { padding-block: clamp(32px, 4.5vw, 60px) clamp(52px, 7vw, 96px); }
.hero-vin-grille {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.hero-vin h1 { font-size: clamp(2.15rem, 1.4rem + 2.8vw, 3.55rem); max-width: 17ch; margin-bottom: 18px; }
.vin-signature {
  margin: 0 0 14px; max-width: 34ch;
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.38rem); font-weight: 600; line-height: 1.4; color: var(--texte-fort);
}
.hero-vin .hero-accroche { max-width: 54ch; }
/* Comme sur l'accueil : les deux parcours sont empilés et de même largeur */
.hero-vin .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; margin-bottom: 26px; }
.hero-vin .hero-reassurance { margin: -10px 0 0; }

.vin-hero-visuel { position: relative; margin: 0; padding: 22px 0 0 11%; }
.vin-hero-photo { aspect-ratio: 1 / 1.02; }
.vin-hero-photo img { object-position: 38% 50%; }
.vin-hero-detail {
  position: absolute; left: 0; bottom: 56px; z-index: 2;
  width: 31%; max-width: 196px; aspect-ratio: 4 / 5;
  border: 6px solid #fff; border-radius: 22px;
}
.vin-hero-etiquette { position: absolute; right: -10px; top: 0; z-index: 3; }
.vin-hero-legende {
  margin: 14px 0 0 calc(31% - 11% + 14px); max-width: 46ch;
  font-size: .8rem; line-height: 1.45; color: var(--texte-doux);
}

/* ---------- B. Pourquoi un site adapté au monde du vin ---------- */
.vin-pourquoi {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(36px, 6vw, 104px); align-items: start;
}
.vin-pourquoi-intro h2 { margin-bottom: 16px; }
.vin-pourquoi-intro .lead { margin-bottom: 30px; max-width: 46ch; }
.vin-pourquoi-photo { margin: 0; max-width: 340px; }
.vin-pourquoi-photo .photo { aspect-ratio: 4 / 5; }
.vin-legende { margin: 12px 0 0; font-size: .8rem; line-height: 1.45; color: var(--texte-doux); }

.vin-atouts { display: grid; }
.vin-atouts li {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px;
  padding: 26px 0; border-top: 1px solid var(--bordure-forte);
}
.vin-atouts li:first-child { border-top: 0; padding-top: 4px; }
.vin-atouts li:last-child { padding-bottom: 0; }
.vin-atout-num {
  padding-top: 2px; font-size: 1rem; font-weight: 800; letter-spacing: .04em;
  color: var(--bleu-texte); font-variant-numeric: tabular-nums;
}
.vin-atouts h3 { margin: 0 0 6px; font-size: clamp(1.12rem, 1.04rem + .3vw, 1.28rem); }
.vin-atouts p { margin: 0; color: var(--texte-doux); max-width: 58ch; }

/* ---------- C. Domaine Steinlicht : concept de démonstration ---------- */
.vin-concept { scroll-margin-top: var(--header-h); }
.vin-concept .cas-detail div { grid-template-columns: 104px minmax(0, 1fr); }
.vin-concept-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.vin-concept-actions .btn { margin-top: 0; }
.vin-concept .cas-pages { margin-top: clamp(40px, 5vw, 60px); }
.vin-concept .maquette-invitation { margin: clamp(44px, 6vw, 72px) 0 0; }
@media (min-width: 961px) {
  /* La démonstration est présentée en grand : le visuel prend un peu plus de place que le texte */
  .vin-concept-cas.cas--large { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
}

/* ---------- Bande photo : crédit discret de la photographie d'illustration ---------- */
.vin-bande .bande-photo-fond img { object-position: 50% 62%; }
.bande-photo-contenu .vin-bande-credit { margin: 22px 0 0; font-size: .76rem; color: rgba(255, 255, 255, .72); max-width: 60ch; }

/* ---------- D. Périmètre : compris dans l'offre / à étudier sur devis ---------- */
.vin-perimetre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(52px, 7vw, 84px);
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-xl); overflow: hidden;
}
.vin-perimetre > div { padding: clamp(24px, 3vw, 38px); }
.vin-perimetre > div + div { border-left: 1px solid var(--bordure); }
.vin-perimetre h3 { margin: 0 0 18px; font-size: 1.12rem; }
.vin-perimetre .benefices li { font-size: .97rem; line-height: 1.45; }
.vin-liste-option { display: grid; gap: 12px; }
.vin-liste-option li { position: relative; padding-left: 30px; color: var(--texte); line-height: 1.45; font-size: .97rem; }
.vin-liste-option li::before {
  content: ""; position: absolute; left: 2px; top: .22em; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px dashed var(--texte-doux);
}
.vin-perimetre-aide { margin: 18px 0 0; font-size: .92rem; line-height: 1.5; color: var(--texte-doux); }
.vin-perimetre-note {
  grid-column: 1 / -1; margin: 0; padding: 18px clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--bordure); background: var(--blanc-casse);
  font-size: .92rem; line-height: 1.55; color: var(--texte-doux);
}

/* ---------- E. Accompagnement (bloc offre de style.css) ---------- */
.vin-engagements { gap: 16px; margin: 0; }

/* ---------- G. CTA final + liens connexes ---------- */
.vin-connexes { margin-top: clamp(60px, 8vw, 96px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--bordure-nuit); }
.vin-connexes-titre { margin: 0 0 28px; text-align: center; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-vin-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-vin h1 { max-width: none; }
  .vin-hero-visuel { width: 100%; max-width: 560px; margin-inline: auto; }
  .vin-pourquoi { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .vin-pourquoi-photo { max-width: none; }
  .vin-pourquoi-photo .photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 780px) {
  .vin-perimetre { grid-template-columns: minmax(0, 1fr); }
  .vin-perimetre > div + div { border-left: 0; border-top: 1px solid var(--bordure); }
}
@media (max-width: 520px) {
  .vin-hero-visuel { padding: 18px 0 0 8%; }
  .vin-hero-detail { width: 34%; bottom: 64px; border-width: 4px; border-radius: 16px; }
  .vin-hero-etiquette { right: 0; top: 2px; }
  .vin-hero-legende { margin-left: calc(34% - 8% + 10px); font-size: .76rem; }
  .vin-atouts li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 22px 0; }
  .vin-concept .cas-detail div { grid-template-columns: minmax(0, 1fr); }
}