/* VAULGARD — book-call.css (v4)
   Surcharges minimales sur le vrai design Hyros (assets/track.css + assets/basic.css)
   + renfort responsive mobile. */

/* filet de sécurité : rien ne doit créer de scroll horizontal sur mobile */
html, body { overflow-x: clip; }

/* ── SCÈNES NOIRES EN CARTE ARRONDIE (la prise de Hyros) ──
   Une bande noire pleine largeur coupe la page en deux ; la même scène en carte
   posée sur du blanc se lit comme un objet fini. */
.ba2-dark {
  background: transparent;
  padding-inline: clamp(12px, 3vw, 40px);
}
.ba2-dark > .ba-wrap {
  max-width: 1160px;
  padding: clamp(44px, 7vh, 78px) clamp(20px, 4vw, 56px);
  border-radius: clamp(22px, 3vw, 34px);
  background: #08080e;
  box-shadow: 0 40px 90px -50px #06061ea6;
}
/* la scène noire ne colle plus au hero violet */
#stats { padding-top: clamp(28px, 5vh, 52px); }

/* logo Vaulgard (noir) sur bande violette → blanc */
.vg-logo { height: 30px; width: auto; filter: brightness(0) invert(1); }

/* ── CHIFFRES NUS (remplacent les cartes .ba2-stat) ──
   Une carte gris foncé sur fond noir encadre du vide : elle ajoute une bordure
   à lire sans rien apporter. Trois nombres et un filet suffisent. */
.vg-figs {
  display: flex; flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: 34px;
}
.vg-fig {
  flex: 1 1 0; min-width: 150px;
  display: grid; gap: 4px; justify-items: center;
  padding: 4px 22px;
}
.vg-fig + .vg-fig { border-left: 1px solid #ffffff1f; }
.vg-fig b {
  font-size: clamp(38px, 9vw, 56px); font-weight: 900;
  line-height: 1; letter-spacing: -0.03em; color: #fff;
}
.vg-fig span { font-size: 13px; line-height: 1.4; color: #ffffff8c; text-align: center; }
@media (max-width: 560px) {
  .vg-figs { margin-top: 26px; }
  .vg-fig { padding: 14px 10px; }
  /* en colonne, le filet passe en haut : une barre verticale ne sépare plus rien */
  .vg-fig + .vg-fig { border-left: 0; border-top: 1px solid #ffffff1f; }
}

/* respiration entre les objets d'une scène noire */
.vg-figs + .ba2-h2 { margin-top: 46px; }
.vg-chain + .ba2-kicker { margin-top: 26px; }

/* ── CHAÎNE DES ÉTAPES (le "1 → 2 → 3 → 4" horizontal de Hyros) ──
   Remplace 4 cartes de 130 px de haut par une seule ligne de lecture. */
.vg-chain {
  list-style: none; margin: 34px 0 0; padding: 0;
  width: 100%; max-width: 860px;
  display: flex; align-items: stretch; justify-content: center; gap: 10px;
}
.vg-link {
  position: relative;
  flex: 1 1 0;
  display: grid; gap: 10px; justify-items: center; align-content: start;
  padding: 22px 14px;
  border-radius: 18px;
  background: #0d0d15;
  box-shadow: inset 0 0 0 1px #ffffff1a;
}
.vg-link-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-line); color: #fff;
  font-size: 14px; font-weight: 900;
}
.vg-link b {
  font-size: 15px; font-weight: 700; line-height: 1.3;
  color: #fff; text-align: center; text-wrap: balance;
}
/* la flèche entre deux maillons */
.vg-link + .vg-link::before {
  content: "→";
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: #ffffff5c;
}
@media (max-width: 700px) {
  /* en colonne, la flèche descend entre les maillons */
  .vg-chain { flex-direction: column; align-items: stretch; gap: 22px; max-width: 420px; }
  .vg-link { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 14px; padding: 16px 18px; }
  .vg-link b { text-align: left; }
  .vg-link + .vg-link::before {
    content: "↓";
    left: 50%; top: -18px; transform: translateX(-50%);
  }
}

/* ── mur de preuves (sur la scène lavande .ba-sec-alt) ── */
.vg-vwall {
  width: 100%;
  max-width: 1080px;
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.vg-vcard {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b14;
  cursor: pointer;
  box-shadow: 0 24px 48px -28px #0b0b1459;
}
.vg-vcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-vcard iframe { width: 100%; height: 100%; border: 0; display: block; }
.vg-vplay {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -10px #0b0b148c;
  transition: transform 0.25s ease;
}
.vg-vcard:hover .vg-vplay { transform: scale(1.1); }
/* hauteur FIXE (pas min-height) : sinon un tag sur 2 lignes décale le nom
   de sa carte par rapport aux trois autres de la même rangée */
.vg-vtag {
  font-size: 12.5px; line-height: 1.3; color: var(--gray); margin-top: 10px;
  height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vg-vname { font-weight: 700; font-size: 14.5px; margin-top: 2px; color: var(--ink); }
.vg-fine { margin-top: 26px; font-size: 12.5px; color: var(--gray); text-align: center; }

/* ── cartes avis (fond lavande) ── */
.vg-reviews {
  width: 100%;
  max-width: 1080px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}
.vg-review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 44px -30px #0b0b1440;
}
.vg-review .stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; }
.vg-review q {
  display: block;
  margin-top: 10px;
  font-size: 16.5px; font-weight: 700; line-height: 1.4;
  color: var(--ink);
  quotes: "« " " »";
  /* sinon le chevron fermant se retrouve seul sur sa ligne */
  text-wrap: balance;
}
.vg-review p { margin-top: 10px; font-size: 14px; color: var(--gray); line-height: 1.55; }
.vg-review .who {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray);
}
/* pastille visage — la vignette de l'interview du membre */
.vg-review .who-ava {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #ececf3 center center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px #0b0b1440;
}

/* ── ajustements sheets Hyros pour Vaulgard ── */
.book-ava img { height: 22px; width: auto; display: block; }
.book-days { margin-top: 6px; }
.book-daychip .dow {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray);
}
.book-daychip b { font-size: 16px; }
.book-daychip span:last-child { font-size: 11px; color: var(--gray); }
.book-daychip[aria-pressed="true"] { border-color: var(--blue); background: #f4f4fe; }
.book-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.book-done h2 {
  font-family: var(--font-body);
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
}
.book-done p { margin-top: 10px; }
.book-donesub { color: var(--gray); font-size: 14.5px; }
.book-done .btn { margin-top: 22px; }
#booking-iframe { width: 100%; height: 480px; border: 0; border-radius: 14px; }
.skip-tab img { height: 20px; width: auto; }

/* ── RESPONSIVE MOBILE (proportions téléphone) ── */
@media (max-width: 900px) {
  .vg-vwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* hero : titre et CTA adaptés aux petits écrans */
  .ba-h1 { font-size: clamp(30px, 9.4vw, 44px); }
  .ba-cta { border-radius: 18px; padding: 18px 24px; }
  .ba-cta-sub { font-size: 13px; }
  .ba-vsl { border-radius: 14px; }
  /* stats : 2 colonnes mais plus compactes */
  .ba2-stats { gap: 10px; }
  .ba2-stat { padding: 18px 16px; }
  /* étapes : moins de padding sur les cartes */
  .ba2-steps li { padding: 18px 16px 20px; gap: 14px; }
  /* mur vidéo : gap réduit */
  .vg-vwall { gap: 12px; margin-top: 24px; }
  .vg-review { padding: 20px 18px 16px; }
  /* sheets : chips de jours défilent horizontalement si besoin */
  .book-days { overflow-x: auto; }
  .book-daychip { min-width: 64px; }
  .book-slots { grid-template-columns: repeat(3, 1fr); }
  /* skip-tab : ne pas chevaucher le contenu */
  .skip-tab { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .ba2-stats { grid-template-columns: 1fr; }
  .book-slots { grid-template-columns: repeat(2, 1fr); }
}

/* ── agenda interne : états du sélecteur de créneaux ── */
.book-vide { font-size: 14px; line-height: 1.5; color: var(--gray); grid-column: 1 / -1; }
.book-ics {
  display: inline-block; margin-top: 4px;
  font-weight: 700; color: var(--blue); text-decoration: underline;
}