/* Ver'glacé — design « Atelier de nuit » (v4) : polices, jetons, puis sections numérotées. Fichier à modifier directement (voir doc/GUIDE.md). */
/* Polices auto-hébergées (SIL Open Font License, voir assets/fonts/OFL-*.txt) — sous-ensemble latin (accents FR, œ, €). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/cormorant-garamond-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 700; font-display: swap; src: url("../fonts/cormorant-garamond-600-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/dm-sans-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* =====================================================================
   Ver'glacé — Design « Atelier de nuit » (v4)
   Feuille autonome : bleu nuit + lavande, titres Cormorant Garamond,
   textes DM Sans. Mobile-first.
   ===================================================================== */

/* 1. Jetons ------------------------------------------------------------ */
:root {
  --ink: #11161e;
  --bg: #161c26;
  --bg-2: #1b2230;
  --surface: #212a39;
  --surface-2: #283244;
  --line: rgba(232, 227, 250, 0.1);
  --line-2: rgba(232, 227, 250, 0.18);
  --text: #eeeaf7;
  --text-2: #c9c4d9;
  --muted: #9a95ae;
  --lav: #b29ddb;
  --lav-2: #d9ccff;
  --lav-3: #ece7f7;
  --violet: #8b73c7;
  --violet-d: #6c55a8;
  --violet-soft: rgba(139, 115, 199, 0.16);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-lg: 22px;
  --r: 16px;
  --r-sm: 12px;
  --shadow: 0 18px 40px rgba(5, 8, 14, 0.35);
  --shadow-lg: 0 30px 70px rgba(5, 8, 14, 0.5);
  --wrap: 1200px;
  --gut: 20px;
  --sec: 72px;
  --header-h: 72px;
}
@media (min-width: 992px) {
  :root {
    --gut: 32px;
    --sec: 112px;
    --header-h: 84px;
  }
}

/* 2. Base -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--lav);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--lav-2);
}
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
}
p {
  margin: 0 0 1em;
}
strong {
  color: var(--text);
  font-weight: 700;
}
:focus-visible {
  outline: 2px solid var(--lav);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--violet);
  color: #fff;
}
.vg-wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.vg-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 3. Typographie utilitaire ------------------------------------------- */
.vg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--lav);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vg-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
.vg-title {
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
}
.vg-title em,
.vg-display em {
  color: var(--lav);
  font-style: italic;
}
.vg-lead {
  color: var(--text-2);
  font-size: 1.06rem;
  line-height: 1.75;
}
.vg-muted {
  color: var(--muted);
}

/* 4. Boutons ----------------------------------------------------------- */
.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vg-btn:active {
  transform: translateY(1px);
}
.vg-btn--primary {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  box-shadow: 0 10px 26px rgba(139, 115, 199, 0.32);
}
.vg-btn--primary:hover {
  background: var(--violet-d);
  border-color: var(--violet-d);
  color: #fff;
}
.vg-btn--light {
  background: var(--lav-3);
  border-color: var(--lav-3);
  color: #2a2148;
}
.vg-btn--light:hover {
  background: #fff;
  color: #2a2148;
}
.vg-btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text);
}
.vg-btn--ghost:hover {
  border-color: var(--lav);
  color: #fff;
  background: var(--violet-soft);
}
.vg-btn--block {
  width: 100%;
}
.vg-btn svg {
  width: 18px;
  height: 18px;
}
.vg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lav);
  font-weight: 700;
  font-size: 0.95rem;
}
.vg-link::after {
  content: "→";
  transition: transform 0.2s ease;
}
.vg-link:hover::after {
  transform: translateX(4px);
}

/* 5. En-tête ----------------------------------------------------------- */
.vg-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.vg-header.is-scrolled,
.vg-header.is-solid {
  background: rgba(17, 22, 30, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.vg-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}
.vg-header__logo {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  display: block;
  padding: 4px 6px;
}
/* Halo aquarelle discret derrière la signature (clin d'œil au logo d'origine) */
.vg-header__logo::before {
  content: "";
  position: absolute;
  inset: -8px -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(178, 157, 219, 0.22), transparent);
}
.vg-header__logo img {
  width: auto;
  height: 40px;
}
@media (min-width: 992px) {
  .vg-header__logo img {
    height: 48px;
  }
}
.vg-nav {
  display: none;
}
@media (min-width: 1100px) {
  .vg-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
  }
}
.vg-nav__link {
  position: relative;
  padding: 10px 14px;
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 999px;
}
.vg-nav__link:hover {
  color: #fff;
}
.vg-nav__link.is-active {
  color: #fff;
}
.vg-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--lav);
}
.vg-nav__item {
  position: relative;
}
.vg-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 230px;
  padding: 10px;
  transform: translate(-50%, 8px);
  background: rgba(27, 34, 48, 0.98);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.vg-nav__item:hover .vg-nav__sub,
.vg-nav__item:focus-within .vg-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.vg-nav__sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.9rem;
}
.vg-nav__sub a:hover {
  background: var(--violet-soft);
  color: #fff;
}
.vg-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 1100px) {
  .vg-header__actions {
    margin-left: 0;
  }
}
.vg-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vg-icon-btn:hover {
  border-color: var(--lav);
  background: var(--violet-soft);
  color: #fff;
}
.vg-icon-btn svg {
  width: 20px;
  height: 20px;
}
.vg-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lav);
  color: #241b44;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.vg-header__account {
  display: none;
}
@media (min-width: 640px) {
  .vg-header__account {
    display: inline-flex;
  }
}
.vg-header__burger {
  display: inline-flex;
}
@media (min-width: 1100px) {
  .vg-header__burger {
    display: none;
  }
}

/* Menu mobile plein écran */
.vg-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  padding: 20px var(--gut) 32px;
  background: var(--ink);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow-y: auto;
}
.vg-drawer.is-open {
  transform: none;
}
.vg-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.vg-drawer__top img {
  height: 40px;
  width: auto;
}
.vg-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
}
.vg-drawer__nav a small {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}
.vg-drawer__sub {
  display: grid;
  gap: 2px;
  padding: 6px 0 12px 14px;
}
.vg-drawer__sub a {
  padding: 8px 0;
  border: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-2);
}
.vg-drawer__foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
}

/* 6. Sections ---------------------------------------------------------- */
.vg-section {
  position: relative;
  padding: var(--sec) 0;
}
.vg-section--alt {
  background: var(--bg-2);
}
.vg-section-head {
  max-width: 720px;
  margin: 0 0 40px;
}
.vg-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.vg-section-head--center .vg-eyebrow {
  justify-content: center;
}
.vg-section-head--center .vg-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
.vg-section-head h2 {
  margin-bottom: 14px;
}
.vg-section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: none;
}
.vg-section-head--split > div {
  max-width: 640px;
}
.vg-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* 7. Héros d'accueil ---------------------------------------------------- */
.vg-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 32px) 0 72px;
  background:
    radial-gradient(700px 520px at 78% 30%, rgba(139, 115, 199, 0.28), transparent 70%),
    radial-gradient(500px 400px at 5% 95%, rgba(178, 157, 219, 0.1), transparent 70%),
    var(--bg);
}
@media (min-width: 992px) {
  .vg-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 40px) 0 90px;
  }
}
.vg-hero__deco {
  position: absolute;
  right: -180px;
  top: 50%;
  width: 760px;
  height: 760px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.5;
}
.vg-hero__grid {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 992px) {
  .vg-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 72px;
  }
}
.vg-display {
  margin: 0 0 18px;
  font-size: clamp(3.4rem, 2.2rem + 6vw, 6.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.vg-hero__subtitle {
  margin: 0 0 26px;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  color: var(--text-2);
}
.vg-hero__quote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--lav);
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
}
.vg-hero__text {
  max-width: 56ch;
  color: var(--muted);
}
.vg-hero__text strong {
  color: var(--text-2);
}
.vg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 575.98px) {
  .vg-hero__actions .vg-btn {
    flex: 1 1 100%;
  }
}
.vg-hero__media {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
}
@media (min-width: 992px) {
  .vg-hero__media {
    justify-self: end;
    width: min(100%, 460px);
  }
}
.vg-arch {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.vg-arch img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.vg-arch::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px 999px 14px 14px;
  border: 1px solid rgba(236, 231, 247, 0.28);
  pointer-events: none;
}
.vg-hero__chip {
  position: absolute;
  left: -14px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: rgba(23, 29, 40, 0.88);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.35;
}
@media (min-width: 992px) {
  .vg-hero__chip {
    left: -48px;
  }
}
.vg-hero__chip span {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet-soft);
  color: var(--lav-2);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
}
.vg-hero__caption {
  margin: 14px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}

/* 8. Bandeau de réassurance -------------------------------------------- */
.vg-trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.vg-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .vg-trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.vg-trust__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}
.vg-trust__list li + li {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
@media (max-width: 991.98px) {
  .vg-trust__list li:nth-child(3) {
    border-left: 0;
    padding-left: 8px;
  }
  .vg-trust__list li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
.vg-trust__list svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--lav);
}

/* 9. Savoir-faire (cartes image) --------------------------------------- */
.vg-crafts {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .vg-crafts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}
.vg-craft {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 26px;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  color: var(--text-2);
  isolation: isolate;
}
@media (min-width: 992px) {
  .vg-craft {
    min-height: 500px;
    padding: 30px;
  }
}
.vg-craft__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vg-craft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17, 22, 30, 0.05) 20%, rgba(17, 22, 30, 0.92) 78%);
}
.vg-craft:hover .vg-craft__img {
  transform: scale(1.05);
}
.vg-craft--plain {
  background:
    radial-gradient(420px 320px at 80% 10%, rgba(178, 157, 219, 0.35), transparent 70%),
    linear-gradient(160deg, #3a2f62 0%, #1c1f33 100%);
}
.vg-craft--plain::before {
  background: none;
}
.vg-craft__num {
  position: absolute;
  top: 22px;
  left: 26px;
  color: var(--lav-2);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
}
.vg-craft h3 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
}
.vg-craft p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.vg-zone {
  max-width: 780px;
  margin: 34px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* 10. Cartes produits ---------------------------------------------------- */
.vg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
}
@media (min-width: 768px) {
  .vg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 22px;
  }
}
@media (min-width: 1200px) {
  .vg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.vg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--text-2);
}
.vg-card__visual {
  position: relative;
}
.vg-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  background: var(--surface);
}
.vg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vg-card:hover .vg-card__media img {
  transform: scale(1.06);
}
.vg-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(17, 22, 30, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--lav-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.vg-card__quick {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--lav-3);
  color: #2a2148;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .vg-card__quick {
    opacity: 0;
    transform: translateY(6px);
  }
  .vg-card:hover .vg-card__quick,
  .vg-card:focus-within .vg-card__quick {
    opacity: 1;
    transform: none;
  }
}
.vg-card__quick svg {
  width: 18px;
  height: 18px;
}
.vg-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 2px 0;
}
.vg-card__title {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.vg-card__title a {
  color: inherit;
}
.vg-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.vg-card__quick {
  z-index: 2;
}
.vg-card__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vg-card__price {
  margin-top: 4px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .vg-card__desc {
    display: none;
  }
  .vg-card__title {
    font-size: 0.9rem;
  }
}

/* Mosaïque « sélection » de l'accueil */
.vg-bento {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(var(--gut) * -1);
  padding: 0 var(--gut) 8px;
  scrollbar-width: none;
}
.vg-bento::-webkit-scrollbar {
  display: none;
}
.vg-bento > * {
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .vg-bento {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 22px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .vg-bento > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .vg-bento > :first-child .vg-card__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 420px;
  }
  .vg-bento > :first-child .vg-card__title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
  }
}

/* 11. Atelier / À propos ------------------------------------------------ */
.vg-split {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 992px) {
  .vg-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
  }
  .vg-split--reverse > :first-child {
    order: 2;
  }
}
.vg-frame {
  position: relative;
}
.vg-frame img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.vg-frame::before {
  content: "";
  position: absolute;
  inset: 14px -10px -14px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  z-index: -1;
}
.vg-values {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .vg-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vg-values li {
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.vg-values h3 {
  margin: 0 0 6px;
  font-size: 1.45rem;
}
.vg-values p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* 12. Événement à venir ------------------------------------------------- */
.vg-event {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 768px) {
  .vg-event {
    grid-template-columns: 180px 1fr auto;
    align-items: center;
  }
}
.vg-event__date {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(160deg, #3a2f62, #252049);
  color: #fff;
  text-align: center;
}
.vg-event__date b {
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
}
.vg-event__date span {
  color: var(--lav-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vg-event__body {
  padding: 22px 24px;
}
.vg-event__body h3 {
  margin: 0 0 6px;
  font-size: 1.8rem;
}
.vg-event__body p {
  margin: 0;
  color: var(--muted);
}
.vg-event__cta {
  padding: 0 24px 24px;
}
@media (min-width: 768px) {
  .vg-event__cta {
    padding: 0 28px 0 0;
  }
}

/* 13. Appel à l'action ---------------------------------------------------- */
.vg-cta {
  position: relative;
  overflow: hidden;
  padding: 44px 26px;
  border-radius: 28px;
  background:
    radial-gradient(520px 300px at 90% 0%, rgba(236, 231, 247, 0.25), transparent 70%),
    linear-gradient(135deg, #6f58ad 0%, #3d3170 100%);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 992px) {
  .vg-cta {
    padding: 72px 64px;
  }
}
.vg-cta h2 {
  max-width: 26ch;
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
}
.vg-cta p {
  max-width: 56ch;
  margin: 0 auto 8px;
  color: rgba(255, 255, 255, 0.85);
}
.vg-cta .vg-btn {
  margin-top: 22px;
}

/* 14. Contact ------------------------------------------------------------ */
.vg-contact {
  display: grid;
  gap: 32px;
}
@media (min-width: 992px) {
  .vg-contact {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
  }
}
.vg-contact__list {
  display: grid;
  gap: 16px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
}
.vg-contact__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-2);
}
.vg-contact__list svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 14px;
  background: var(--violet-soft);
  color: var(--lav-2);
}
.vg-socials {
  display: flex;
  gap: 10px;
}
.vg-panel {
  padding: 24px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (min-width: 992px) {
  .vg-panel {
    padding: 36px;
  }
}

/* 15. Formulaires --------------------------------------------------------- */
.vg-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.vg-field label,
.vg-label {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}
.vg-input,
.vg-select,
.vg-textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vg-textarea {
  min-height: 150px;
  resize: vertical;
}
.vg-input::placeholder,
.vg-textarea::placeholder {
  color: #6f6a84;
}
.vg-input:focus,
.vg-select:focus,
.vg-textarea:focus {
  outline: none;
  border-color: var(--lav);
  box-shadow: 0 0 0 4px rgba(178, 157, 219, 0.18);
}
.vg-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b29ddb' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.vg-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 0.92rem;
  cursor: pointer;
}
.vg-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--violet);
}

/* 16. En-tête de page intérieure ---------------------------------------- */
.vg-page-hero {
  position: relative;
  padding: calc(var(--header-h) + 28px) 0 32px;
  background:
    radial-gradient(800px 360px at 85% 0%, rgba(139, 115, 199, 0.2), transparent 70%),
    var(--bg);
}
@media (min-width: 992px) {
  .vg-page-hero {
    padding: calc(var(--header-h) + 56px) 0 44px;
  }
}
.vg-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.82rem;
}
.vg-crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.5;
}
.vg-crumbs a {
  color: var(--text-2);
}
.vg-crumbs [aria-current] {
  color: var(--lav);
}
.vg-page-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
}
.vg-page-hero .vg-lead {
  max-width: 68ch;
  margin: 0;
}

/* 17. Boutique ------------------------------------------------------------ */
.vg-tabs {
  display: flex;
  gap: 8px;
  margin: 28px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.vg-tabs::-webkit-scrollbar {
  display: none;
}
.vg-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vg-tab:hover {
  border-color: var(--lav);
  color: #fff;
}
.vg-tab.is-active {
  background: var(--lav-3);
  border-color: var(--lav-3);
  color: #2a2148;
  font-weight: 700;
}
.vg-tab small {
  opacity: 0.7;
  font-size: 0.78rem;
}
.vg-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
}
.vg-subtabs a {
  color: var(--muted);
  font-size: 0.88rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.vg-subtabs a:hover,
.vg-subtabs a.is-active {
  color: #fff;
  border-bottom-color: var(--lav);
}
.vg-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 28, 38, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vg-toolbar__count {
  color: var(--muted);
  font-size: 0.9rem;
}
.vg-toolbar__count b {
  color: var(--text);
}
.vg-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vg-toolbar .vg-select {
  min-height: 42px;
  width: auto;
  padding: 0 40px 0 14px;
  font-size: 0.88rem;
  border-radius: 999px;
}
.vg-toolbar__filters {
  display: none;
}
@media (min-width: 768px) {
  .vg-toolbar__filters {
    display: flex;
    gap: 10px;
  }
  .vg-toolbar__mobile {
    display: none;
  }
}
.vg-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.88rem;
}
.vg-progress {
  width: 180px;
  height: 2px;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden;
}
.vg-progress span {
  display: block;
  height: 100%;
  background: var(--lav);
}
.vg-notice {
  display: grid;
  gap: 18px;
  margin-top: 56px;
  padding: 28px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(178, 157, 219, 0.22), transparent 70%),
    var(--surface);
}
@media (min-width: 768px) {
  .vg-notice {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 34px 40px;
  }
}
.vg-notice h3 {
  margin: 0 0 6px;
  font-size: 1.9rem;
}
.vg-notice p {
  margin: 0;
  color: var(--muted);
}

/* 18. Fiche produit -------------------------------------------------------- */
.vg-product {
  padding: calc(var(--header-h) + 24px) 0 var(--sec);
}
@media (min-width: 992px) {
  .vg-product {
    padding-top: calc(var(--header-h) + 40px);
  }
}
.vg-product__grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 992px) {
  .vg-product__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
  }
  .vg-product__info {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.vg-gallery {
  display: grid;
  gap: 12px;
}
@media (min-width: 992px) {
  .vg-gallery {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
  }
  .vg-gallery__thumbs {
    order: -1;
    flex-direction: column;
  }
}
.vg-gallery__main {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  aspect-ratio: 4 / 5;
}
.vg-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(17, 22, 30, 0.6);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.vg-gallery__nav--prev {
  left: 12px;
}
.vg-gallery__nav--next {
  right: 12px;
}
.vg-gallery__thumbs {
  display: flex;
  gap: 10px;
}
.vg-gallery__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 88px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 992px) {
  .vg-gallery__thumb {
    width: 84px;
    height: 104px;
  }
}
.vg-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-gallery__thumb.is-active,
.vg-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--lav);
}
.vg-product__kicker {
  margin: 0 0 12px;
  color: var(--lav);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vg-product__title {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.3rem);
}
.vg-product__lead {
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: 1.05rem;
}
.vg-product__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.vg-product__price b {
  color: var(--text);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}
.vg-product__price small {
  color: var(--muted);
  font-size: 0.8rem;
}
.vg-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--violet-soft);
  border: 1px solid rgba(178, 157, 219, 0.35);
  color: var(--lav-2);
  font-size: 0.74rem;
  font-weight: 700;
}
.vg-custom {
  margin: 0 0 18px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.vg-custom__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 700;
}
.vg-custom__help {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
}
.vg-product__actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.vg-product__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  font-size: 0.9rem;
}
.vg-product__links a,
.vg-product__links button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
  cursor: pointer;
}
.vg-assure {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.vg-assure li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 2px 14px;
  align-items: center;
  font-size: 0.9rem;
}
.vg-assure svg {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--violet-soft);
  color: var(--lav-2);
}
.vg-assure strong {
  color: var(--text);
}
.vg-assure span {
  color: var(--muted);
  font-size: 0.85rem;
}
.vg-accordion {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
@media (min-width: 992px) {
  .vg-accordion {
    margin-top: 80px;
  }
}
.vg-accordion details {
  border-bottom: 1px solid var(--line);
}
.vg-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.2;
  font-weight: 600;
}
.vg-accordion summary::-webkit-details-marker {
  display: none;
}
.vg-accordion summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--lav);
  transition: transform 0.25s ease;
}
.vg-accordion details[open] summary::after {
  transform: rotate(45deg);
}
.vg-accordion .vg-accordion__body {
  max-width: 76ch;
  padding: 0 0 26px;
  color: var(--text-2);
}
.vg-sticky-buy {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: rgba(17, 22, 30, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vg-sticky-buy b {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
}
.vg-sticky-buy .vg-btn {
  flex: 1 1 auto;
  min-height: 46px;
}
@media (min-width: 992px) {
  .vg-sticky-buy {
    display: none;
  }
}

/* 19. Pied de page -------------------------------------------------------- */
.vg-footer {
  padding: 72px 0 28px;
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: var(--muted);
  font-size: 0.92rem;
}
.vg-footer__top {
  display: grid;
  gap: 36px;
}
@media (min-width: 992px) {
  .vg-footer__top {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}
.vg-footer__brand img {
  height: 84px;
  width: auto;
  margin-bottom: 18px;
}
.vg-footer__brand p {
  max-width: 34ch;
}
.vg-footer__cols {
  display: contents;
}
@media (max-width: 991.98px) {
  .vg-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }
}
.vg-footer h4 {
  margin: 0 0 16px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vg-footer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vg-footer a {
  color: var(--muted);
}
.vg-footer a:hover {
  color: #fff;
}
.vg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

/* 20. Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 992px) {
  .vg-frame::before {
    inset: 22px -22px -22px 22px;
  }
}

/* =====================================================================
   21. Compléments « site réel » (au-delà de la maquette)
   ===================================================================== */

/* Lien d'évitement (accessibilité) */
.vg-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--lav-3);
  color: #2a2148;
  font-weight: 700;
}
.vg-skip:focus {
  top: 12px;
}

/* En-tête : panier + compte (accroches JS conservées : .vg-cart-wrap, .js-cart-*, .js-user-*) */
.vg-cart-wrap,
.vg-user-wrap {
  position: relative;
}
.vg-cart-dropdown,
.vg-user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1200;
  width: min(92vw, 360px);
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: #1d2533;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.vg-user-dropdown {
  width: 240px;
  padding: 8px;
}
.vg-cart-wrap.open .vg-cart-dropdown,
.vg-user-wrap.open .vg-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (max-width: 639.98px) {
  .vg-cart-dropdown {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}
.vg-cart-dropdown.is-attention {
  box-shadow: 0 0 0 2px var(--lav), var(--shadow-lg);
}
.vg-icon-btn.is-added {
  animation: vg-pulse 0.5s ease;
}
@keyframes vg-pulse {
  50% {
    transform: scale(1.12);
  }
}
.vg-cart-dropdown-head {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
}
.vg-cart-items {
  max-height: 300px;
  overflow: auto;
}
.vg-cart-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.vg-cart-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.vg-cart-item:last-child {
  border-bottom: 0;
}
.vg-cart-item img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface);
}
.vg-cart-item-title {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
}
.vg-cart-item-meta,
.vg-cart-item-personalization {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.vg-cart-item-remove {
  border: 0;
  background: none;
  color: var(--lav);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.vg-cart-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.vg-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--text-2);
  font-size: 0.9rem;
}
.vg-cart-line.total {
  margin-top: 4px;
  color: var(--text);
  font-weight: 700;
}
.vg-cart-note {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.vg-personalization-badge {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--violet-soft);
  border: 1px solid rgba(178, 157, 219, 0.35);
  color: var(--lav-2);
  font-size: 0.68rem;
  font-weight: 700;
}
.vg-user-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.9rem;
}
.vg-user-dropdown a:hover {
  background: var(--violet-soft);
  color: #fff;
}
.vg-user-dropdown a.is-danger {
  color: #f2a7a7;
}
.vg-user-dropdown__name {
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
}
html.vg-drawer-open,
html.vg-drawer-open body {
  overflow: hidden;
}

/* 22. Contenu éditorial (pages savoir-faire, légales, événements) ---------- */
.vg-prose {
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.8;
}
.vg-prose > :first-child {
  margin-top: 0;
}
.vg-prose h2 {
  margin: 1.6em 0 0.5em;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
}
.vg-prose h3 {
  margin: 1.4em 0 0.4em;
  font-size: 1.45rem;
}
.vg-prose p,
.vg-prose ul,
.vg-prose ol {
  margin: 0 0 1em;
}
.vg-prose ul,
.vg-prose ol {
  padding-left: 1.2em;
}
.vg-prose li {
  margin-bottom: 0.35em;
}
.vg-prose a {
  color: var(--lav);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(178, 157, 219, 0.45);
}
.vg-prose a:hover {
  color: #fff;
}
.vg-prose strong {
  color: var(--text);
}
.vg-prose .vg-check-list,
.vg-check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.vg-check-list li {
  position: relative;
  padding-left: 30px;
  margin: 0;
}
.vg-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 16px;
  height: 9px;
  border-left: 2px solid var(--lav);
  border-bottom: 2px solid var(--lav);
  transform: rotate(-45deg);
}
.vg-prose .vg-steps,
.vg-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: vgstep;
}
.vg-steps li {
  counter-increment: vgstep;
  position: relative;
  min-height: 34px;
  margin: 0;
  padding-left: 50px;
}
.vg-steps li::before {
  content: counter(vgstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(178, 157, 219, 0.45);
  color: var(--lav-2);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
}
.vg-blocks {
  display: grid;
  gap: 18px;
}
@media (min-width: 992px) {
  .vg-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .vg-blocks > :first-child,
  .vg-blocks > :last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}
.vg-block {
  padding: 26px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 992px) {
  .vg-block {
    padding: 36px 40px;
  }
}
.vg-block > h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}
.vg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.vg-chip:hover,
.vg-chip.is-active {
  border-color: var(--lav);
  background: var(--violet-soft);
  color: #fff;
}
.vg-faq details {
  border-bottom: 1px solid var(--line);
}
.vg-faq details:first-of-type {
  border-top: 1px solid var(--line);
}
.vg-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
}
.vg-faq summary::-webkit-details-marker {
  display: none;
}
.vg-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--lav);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 0.25s ease;
}
.vg-faq details[open] summary::after {
  transform: rotate(45deg);
}
.vg-faq details p {
  margin: 0 0 20px;
  max-width: 76ch;
  color: var(--text-2);
}

/* Pages légales */
.vg-legal {
  display: grid;
  gap: 28px;
}
@media (min-width: 992px) {
  .vg-legal {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .vg-legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.vg-legal__toc {
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.88rem;
}
.vg-legal__toc p {
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 700;
}
.vg-legal__toc ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vg-legal__toc a {
  color: var(--muted);
}
.vg-legal__toc a:hover {
  color: #fff;
}
.vg-legal section + section {
  margin-top: 8px;
  padding-top: 8px;
}
.vg-meta-line {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Événements */
.vg-events {
  display: grid;
  gap: 22px;
}
@media (min-width: 640px) {
  .vg-events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .vg-events {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vg-ecard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vg-ecard:hover {
  transform: translateY(-3px);
  border-color: rgba(178, 157, 219, 0.4);
}
.vg-ecard__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.vg-ecard__media picture,
.vg-ecard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-ecard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}
.vg-ecard__date {
  color: var(--lav);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vg-ecard__title {
  margin: 0;
  font-size: 1.6rem;
}
.vg-ecard__title a {
  color: var(--text);
}
.vg-ecard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.vg-ecard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.vg-ecard.is-past {
  opacity: 0.75;
}
.vg-event-detail {
  display: grid;
  gap: 32px;
}
@media (min-width: 992px) {
  .vg-event-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
  }
}
.vg-event-detail__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.vg-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

/* 23. Modales (Bootstrap) --------------------------------------------------- */
.modal-backdrop.show {
  opacity: 0.78;
  background: #05070b;
}
.modal-content {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #1d2533;
  color: var(--text-2);
  box-shadow: var(--shadow-lg);
}
.modal-header,
.modal-footer {
  border-color: var(--line);
  padding: 18px 22px;
}
.modal-body {
  padding: 22px;
}
.modal-title {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
}
.modal .close,
.vg-modal-close {
  color: var(--text);
  opacity: 0.8;
  text-shadow: none;
  font-size: 1.8rem;
  font-weight: 300;
}
.modal .close:hover {
  color: #fff;
  opacity: 1;
}
.vg-qv .modal-dialog {
  max-width: 980px;
}
.vg-qv .modal-body {
  padding: 0;
}
.vg-qv__grid {
  display: grid;
}
@media (min-width: 768px) {
  .vg-qv__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.vg-qv__media {
  position: relative;
  background: var(--ink);
}
.vg-qv__media #productDetailImage {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 768px) {
  .vg-qv__media {
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
  }
}
.vg-qv__media .vg-gallery__thumbs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  flex-wrap: wrap;
}
.vg-qv__media .vg-gallery__thumb {
  width: 54px;
  height: 66px;
  flex-basis: 54px;
}
.vg-qv__info {
  position: relative;
  padding: 26px 22px;
  max-height: 86vh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .vg-qv__info {
    padding: 34px;
  }
}
.vg-qv__info .vg-product__title {
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  padding-right: 34px;
}
.vg-qv__close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
}
.vg-qv__long {
  color: var(--muted);
  font-size: 0.92rem;
  white-space: pre-line;
}

/* Vidéo de présentation */
.presentation-video-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: #000;
}
.presentation-video-shell video {
  display: block;
  width: 100%;
  max-height: 72vh;
}
.presentation-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  background: var(--lav-3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.presentation-video-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 30px;
  border-left: 22px solid #2a2148;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.presentation-video-play[hidden] {
  display: none;
}
.hero-video-modal-note {
  color: var(--muted);
}

/* 24. Personnalisation produit (balisage généré par script.js) --------------- */
.is-hidden {
  display: none !important;
}
.product-detail-customization,
.product-custom-card {
  margin: 0 0 16px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.product-custom-title {
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 700;
}
.product-custom-help {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.product-custom-grid {
  display: grid;
  gap: 14px;
}
.product-custom-field {
  display: grid;
  gap: 8px;
  margin: 0;
}
.product-custom-model-choice {
  margin: 0 0 16px;
}
.product-custom-field-label {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}
.js-custom-field-input,
.form-control {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.form-control {
  min-height: 140px;
}
select.js-custom-field-input,
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b29ddb' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.js-custom-field-input::placeholder,
.form-control::placeholder {
  color: #6f6a84;
}
.js-custom-field-input:focus,
.form-control:focus {
  outline: none;
  border-color: var(--lav);
  background-color: var(--ink);
  color: var(--text);
  box-shadow: 0 0 0 4px rgba(178, 157, 219, 0.18);
}
.js-custom-field-input:disabled,
.form-control:disabled {
  opacity: 0.5;
}
.js-custom-field-input.is-invalid,
.form-control.is-invalid {
  border-color: #e98b8b;
  box-shadow: 0 0 0 3px rgba(233, 139, 139, 0.18);
}
.product-custom-no-personalize {
  display: flex;
  margin: 0 0 6px;
  color: var(--text-2);
  font-size: 0.92rem;
  cursor: pointer;
}
.product-custom-no-personalize input {
  width: 18px;
  height: 18px;
  accent-color: var(--violet);
}
.product-cart-feedback {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--lav-2);
  font-size: 0.9rem;
  font-weight: 700;
}
.product-cart-feedback:empty {
  margin: 0;
  min-height: 0;
}

/* 25. Bootstrap : alertes, tableaux, badges, boutons hérités ---------------- */
.alert {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
}
.alert-success {
  border-color: rgba(120, 200, 150, 0.45);
}
.alert-danger {
  border-color: rgba(233, 139, 139, 0.55);
}
.alert-warning {
  border-color: rgba(240, 200, 110, 0.55);
}
.table-dark,
.table-dark > td,
.table-dark > th {
  background-color: var(--surface) !important;
  color: var(--text-2);
}
.table-dark td,
.table-dark th,
.table-dark thead th {
  border-color: var(--line) !important;
}
.table-striped.table-dark tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}
.badge-info {
  background: var(--violet-soft);
  color: var(--lav-2);
}
.btn-custom,
.btn-register-main,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--violet);
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(139, 115, 199, 0.28);
}
.btn-custom:hover,
.btn-register-main:hover,
.btn-success:hover {
  background: var(--violet-d);
  border-color: var(--violet-d);
  color: #fff;
}
.btn-outline-info,
.btn-outline-light {
  border-radius: 999px;
  border-color: var(--line-2);
  color: var(--text);
}
.btn-outline-info:hover,
.btn-outline-light:hover {
  border-color: var(--lav);
  background: var(--violet-soft);
  color: #fff;
}
.text-muted {
  color: var(--muted) !important;
}

/* 26. Notifications (toasts) ------------------------------------------------ */
.vg-toast-root {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + var(--header-h) + 10px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(94vw, 420px);
  transform: translateX(-50%);
}
.vg-toast {
  position: relative;
  padding: 14px 40px 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--lav);
  background: #1d2533;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.vg-toast.is-visible {
  opacity: 1;
  transform: none;
}
.vg-toast-title {
  margin-bottom: 2px;
  font-size: 0.85rem;
  font-weight: 700;
}
.vg-toast-content {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.45;
}
.vg-toast-action,
.vg-toast-inline-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--lav);
  font-size: 0.82rem;
  font-weight: 700;
}
.vg-toast-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.vg-toast-success {
  border-left-color: #7fd3a0;
}
.vg-toast-warning {
  border-left-color: #f0c86e;
}
.vg-toast-danger {
  border-left-color: #e98b8b;
}

/* 27. Pages applicatives (compte, panier, checkout) : surcouche ------------- */
.vg-app-main {
  padding: calc(var(--header-h) + 28px) 0 var(--sec);
}
@media (min-width: 992px) {
  .vg-app-main {
    padding-top: calc(var(--header-h) + 48px);
  }
}
.vg-app-main .auth-section,
.vg-app-main .cart-section,
.vg-app-main .legal-section {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
.vg-app-main .auth-card,
.vg-app-main .cart-card,
.vg-app-main .account-content-card,
.vg-app-main .account-settings-card,
.vg-app-main .checkout-block,
.vg-app-main .checkout-recap {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-2);
}
.vg-app-main h1,
.vg-app-main .cart-title {
  color: var(--text);
  font-family: var(--serif) !important;
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
}
.vg-app-main h2,
.vg-app-main h3,
.vg-app-main h4,
.vg-app-main h5,
.vg-app-main .checkout-block-title {
  color: var(--text);
  font-family: var(--serif) !important;
  font-weight: 600;
}
.vg-app-main .auth-subtitle,
.vg-app-main .cart-subtitle,
.vg-app-main .cart-page-note,
.vg-app-main .checkout-block-subtitle {
  color: var(--muted);
}
.vg-app-main label {
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
}
.vg-app-main .cart-page-link,
.vg-app-main .cart-page-clear,
.vg-app-main .auth-link,
.vg-app-main .checkout-submit {
  border-radius: 999px !important;
  font-family: var(--sans);
  font-weight: 700;
}
.vg-app-main .cart-page-link.is-primary,
.vg-app-main .checkout-submit {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
}
.vg-app-main .cart-page-link.is-light,
.vg-app-main .auth-link {
  background: transparent !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
}

/* 28. Images introuvables ----------------------------------------------------- */
.vg-img-missing {
  background:
    url("../../images/logo_verglace_signature.webp") center / 46% auto no-repeat,
    linear-gradient(160deg, #283244 0%, #1b2230 100%) !important;
}
.vg-img-missing img {
  opacity: 0 !important;
}
picture.vg-img-missing {
  display: block;
  height: 100%;
}

/* 29. Erreurs / maintenance ------------------------------------------------- */
.vg-error {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 40px) 0 80px;
  text-align: center;
}
.vg-error__code {
  margin: 0;
  color: var(--lav);
  font-family: var(--serif);
  font-size: clamp(5rem, 3rem + 10vw, 10rem);
  font-weight: 600;
  line-height: 0.9;
}
.vg-error .vg-hero__actions {
  justify-content: center;
}

/* 30. Compléments socle (pied de page, navigation active) ------------------ */
.vg-footer__title {
  margin: 0 0 16px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vg-footer__brand .vg-socials {
  margin-top: 18px;
}
.vg-nav__link[aria-current="page"] {
  color: #fff;
}

/* 31. Accueil ---------------------------------------------------------------- */
.vg-hero__title {
  margin-bottom: 26px;
}
.vg-hero__title .vg-hero__subtitle {
  display: block;
  margin: 22px 0 0;
  letter-spacing: 0;
}
p.vg-hero__chip {
  margin: 0;
}
.vg-section--flush {
  padding-top: 0;
}
.vg-mt {
  margin-top: 18px;
}
.vg-eyebrow--tight {
  margin-bottom: 10px;
}
.vg-eyebrow--center {
  justify-content: center;
  color: #ece7f7;
}
.vg-event__date {
  margin: 0;
}
.vg-event__title {
  margin: 0 0 6px;
  font-size: 1.8rem;
}
.vg-event__title a {
  color: inherit;
}
.vg-event__title a:hover {
  color: var(--lav-2);
}
.vg-input.is-highlight {
  border-color: #f0ad4e;
}
.vg-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.vg-wrap.vg-trust__list {
  margin: 0 auto;
  padding: 0 var(--gut);
}
@media (min-width: 768px) {
  /* Grande carte de la mosaïque : l'image remplit la hauteur des deux rangées sans l'imposer. */
  .vg-bento > :first-child .vg-card__visual {
    display: flex;
    flex: 1 1 auto;
  }
  .vg-bento > :first-child .vg-card__media {
    width: 100%;
  }
  .vg-bento > :first-child .vg-card__media picture,
  .vg-bento > :first-child .vg-card__media > img {
    position: absolute;
    inset: 0;
  }
}
.vg-modal-info .modal-body {
  padding: 34px 28px;
  text-align: center;
}
.vg-modal-info__title {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.15;
}
.vg-modal-info__text {
  margin: 0 0 22px;
  color: var(--text-2);
}
.vg-bento {
  scroll-padding: 0 var(--gut);
}

/* 32. Boutique (compléments) -------------------------------------------------- */
.vg-shop {
  padding: 8px 0 var(--sec);
}
.vg-btn--sm {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.86rem;
}
.vg-btn--sm svg {
  width: 18px;
  height: 18px;
}
.vg-toolbar select[hidden] {
  display: none;
}
@media (max-width: 767.98px) {
  .vg-toolbar {
    flex-wrap: wrap;
  }
  .vg-toolbar.is-open .vg-toolbar__controls {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .vg-toolbar.is-open .vg-toolbar__filters {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 100%;
  }
  .vg-toolbar.is-open .vg-toolbar__filters .vg-select {
    width: 100%;
  }
  .vg-toolbar.is-open #js-filter-reset {
    grid-column: 1 / -1;
  }
}
.vg-empty {
  margin: 24px 0 0;
  padding: 28px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--muted);
  text-align: center;
}
.vg-notice__title {
  margin: 0 0 6px;
  font-size: 1.9rem;
}
.vg-notice p + p {
  margin-top: 10px;
}
.vg-notice--flush {
  margin-top: 0;
}
.vg-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vg-card__quick svg {
  pointer-events: none;
}
.vg-qv__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.vg-qv .vg-product__price {
  margin-bottom: 18px;
  padding-bottom: 18px;
}
.vg-qv .vg-product__links button svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}
.vg-qv__media .product-detail-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 66px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  opacity: 0.7;
  cursor: pointer;
}
.vg-qv__media .product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-qv__media .product-detail-thumb.is-active,
.vg-qv__media .product-detail-thumb:hover {
  opacity: 1;
  border-color: var(--lav);
}
.vg-page-hero h1 em {
  color: var(--lav);
}
.vg-qv .vg-product__title {
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
}
.vg-qv__media .vg-gallery__thumbs {
  flex-direction: row;
  order: 0;
}
@media (min-width: 768px) {
  .vg-qv__media {
    min-height: 540px;
  }
  .vg-qv__media #productDetailImage {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* 33. Fiche produit (compléments) --------------------------------------------- */
.vg-accordion summary h2 {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.vg-related {
  margin-top: 72px;
}
.vg-product__actions .vg-btn svg {
  width: 20px;
  height: 20px;
}
.vg-product__buy .product-cart-feedback:empty {
  display: none;
}
.vg-sticky-buy {
  transition: transform 0.25s ease;
}
.vg-sticky-buy.is-off {
  transform: translateY(110%);
}
@media (max-width: 991.98px) {
  .vg-page--product .vg-footer {
    padding-bottom: 100px;
  }
}

/* 34. Pages savoir-faire ------------------------------------------------------ */
.vg-section--tight {
  padding-top: 28px;
}
.vg-narrow {
  max-width: calc(900px + var(--gut) * 2);
}
.vg-linkbar {
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
}
.vg-linkbar__title {
  margin: 0 0 14px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.vg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.vg-cta .vg-cta__actions .vg-btn {
  margin-top: 0;
}
.vg-btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.vg-btn--outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.vg-btn--outline-light svg {
  width: 18px;
  height: 18px;
}

/* 35. Événements (compléments) ------------------------------------------------ */
.vg-link-inline {
  color: var(--lav);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vg-link-inline:hover {
  color: #fff;
}
.vg-events-group--next {
  margin-top: 56px;
}
.vg-events-group__title {
  margin: 0 0 22px;
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
}
.vg-facts .vg-pill {
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
}
.vg-facts .vg-pill svg {
  width: 16px;
  height: 16px;
}
.vg-event-detail__media {
  margin: 0;
}
.vg-event-detail .vg-prose {
  margin-top: 8px;
}
.vg-error h1 {
  margin: 10px 0 14px;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
}
.vg-error .vg-lead {
  max-width: 56ch;
  margin: 0 auto;
}
.vg-error__links {
  justify-content: center;
  margin-top: 34px;
}
.vg-page-hero .vg-lead + .vg-lead {
  margin-top: 12px;
}
@media (min-width: 1200px) {
  .vg-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 36. Pages application : fond uni du design (les anciennes classes de <body> ne l'écrasent plus) */
html,
body.vg-page {
  background: var(--bg) !important;
}
.js-account-panel {
  display: none;
}
.js-account-panel.is-active {
  display: block;
}
html.modal-scroll-lock,
body.modal-scroll-lock {
  overflow: hidden !important;
  height: 100%;
}

/* 37. Accueil, « À propos » : logo sur halo aquarelle (même esprit que l'en-tête) */
.vg-logo-stage {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(38% 30% at 30% 38%, rgba(178, 157, 219, 0.34), transparent 72%),
    radial-gradient(34% 28% at 68% 60%, rgba(139, 115, 199, 0.32), transparent 72%),
    radial-gradient(26% 22% at 54% 30%, rgba(236, 231, 247, 0.16), transparent 70%),
    radial-gradient(30% 24% at 40% 70%, rgba(160, 140, 214, 0.22), transparent 72%),
    linear-gradient(160deg, #222a3a 0%, #161c26 100%);
  box-shadow: var(--shadow-lg);
}
/* Voile aquarelle qui « respire » lentement */
.vg-logo-stage::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(30% 24% at 36% 44%, rgba(178, 157, 219, 0.30), transparent 70%),
    radial-gradient(26% 22% at 64% 54%, rgba(236, 231, 247, 0.14), transparent 70%);
  filter: blur(6px);
  animation: vgWatercolor 14s ease-in-out infinite alternate;
}
/* Filet intérieur, comme l'arche du portrait */
.vg-logo-stage::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(236, 231, 247, 0.16);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.vg-logo-stage picture {
  position: relative;
  width: min(78%, 440px);
}
.vg-frame--logo .vg-logo-stage img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 18px rgba(178, 157, 219, 0.45));
}
@keyframes vgWatercolor {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1);
    opacity: 0.75;
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.08);
    opacity: 1;
  }
}

/* 38. Boutique : bloc « Commander une création personnalisée » sous la grille (maillage + réassurance) */
.vg-shop-guide {
  margin-top: 56px;
}
.vg-shop-guide__title {
  margin: 0;
  font-size: 1.9rem;
}
.vg-shop-guide__list {
  margin-top: 18px;
}
@media (min-width: 768px) {
  .vg-shop-guide__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .vg-shop-guide__list li {
    align-items: start;
  }
}
.vg-shop-guide .vg-linkbar {
  margin-top: 28px;
}
.vg-shop-guide + .vg-notice {
  margin-top: 28px;
}

/* 39. Formulaires : mention des champs obligatoires ; contenu riche des événements (TinyMCE) */
.vg-form-note {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 0.8rem;
}
.vg-prose--rich > :first-child {
  margin-top: 0;
}
.vg-prose--rich p {
  margin: 0 0 14px;
}
.vg-prose--rich ul,
.vg-prose--rich ol {
  margin: 0 0 14px;
  padding-left: 1.3em;
}
.vg-prose--rich h2,
.vg-prose--rich h3,
.vg-prose--rich h4 {
  margin: 22px 0 10px;
  color: var(--text);
}
.vg-prose--rich blockquote {
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 2px solid var(--lav);
  color: var(--text-2);
}