/* ==========================================================================
   MGXProduction — vitalia.css
   Reprend l'identité de l'appli Vitalia (vitalia-dn4.pages.dev) :
   fond olive très sombre, vert sauge, accents dorés, orbes flous, surfaces
   de verre, titres Cormorant Garamond, étiquettes Space Mono.
   Animations douces et organiques.
   ========================================================================== */

:root {
  --font-head: "Cormorant Garamond", "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --bg: #15140f;
  --surface: #1d1b15;
  --surface-2: #26241c;
  --border: rgba(238, 234, 224, .12);
  --text: #eeeae0;
  --text-2: #b6b0a1;
  --text-3: #9a9484;            /* étiquettes mono (contraste AA) */
  --sage: #6fae8a;
  --sage-soft: #29392f;
  --gold: #d8ae5c;
  --gold-text: #d8ae5c;
  --accent: #6fae8a;
  --accent-hover: #7fbd99;
  --accent-text: #15140f;
  --accent-light: #6fae8a;
  --focus: #d8ae5c;
  --header-bg: rgba(21, 20, 15, .78);
  --progress: linear-gradient(90deg, #d8ae5c, #6fae8a);
  --glass: rgba(238, 234, 224, .055);
  --glass-2: rgba(238, 234, 224, .095);
  --glass-border: rgba(216, 174, 92, .28);
  --glass-shadow: rgba(0, 0, 0, .35);
  --orb-a: rgba(111, 174, 138, .3);
  --orb-b: rgba(216, 174, 92, .2);
  --orb-c: rgba(41, 57, 47, .55);
  --emblem-disc: #1d1b15;
  /* Bouton d'action : dégradé or → sauge (texte sombre pour le contraste AA) */
  --btn-a: #d8ae5c;
  --btn-b: #6fae8a;
  --btn-text: #15140f;
  --btn-glow: rgba(176, 138, 46, .28);
  --btn-glow-strong: rgba(176, 138, 46, .45);

  --lb-backdrop: rgba(21, 20, 15, .94);
  --lb-text: #eeeae0;
  --lb-btn-bg: rgba(238, 234, 224, .06);
  --lb-btn-bg-hover: rgba(238, 234, 224, .12);
  --lb-btn-border: rgba(216, 174, 92, .35);
  --lb-frame-border: rgba(216, 174, 92, .35);
  --lb-radius: 1.4rem;

  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #ede9e0;
  --border: rgba(29, 28, 25, .13);
  --text: #1d1c19;
  --text-2: #635f55;
  --text-3: #6f6a5e;
  --sage: #35594a;
  --sage-soft: #b7c9bd;
  --gold: #b08a2e;
  --gold-text: #8a6a1f;
  --accent: #35594a;
  --accent-hover: #2b4a3d;
  --accent-text: #ffffff;
  --accent-light: #35594a;
  --focus: #35594a;
  --header-bg: rgba(247, 245, 240, .82);
  --progress: linear-gradient(90deg, #b08a2e, #35594a);
  --glass: rgba(29, 28, 25, .045);
  --glass-2: rgba(29, 28, 25, .08);
  --glass-border: rgba(176, 138, 46, .3);
  --glass-shadow: rgba(29, 28, 25, .12);
  --orb-a: rgba(53, 89, 74, .26);
  --orb-b: rgba(176, 138, 46, .2);
  --orb-c: rgba(53, 89, 74, .14);
  --emblem-disc: #fffdf8;
  --btn-a: #8a6a1f;
  --btn-b: #35594a;
  --btn-text: #ffffff;
  --btn-glow: rgba(138, 106, 31, .25);
  --btn-glow-strong: rgba(138, 106, 31, .4);
  --lb-backdrop: rgba(247, 245, 240, .95);
  --lb-text: #1d1c19;
  --lb-btn-bg: rgba(29, 28, 25, .05);
  --lb-btn-bg-hover: rgba(29, 28, 25, .1);
  color-scheme: light;
}

.scroll-progress { height: 2px; }
.icon { width: 1.15em; height: 1.15em; }

/* ---------- Orbes flottants (fond fixe) ---------- */
.vt-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vt-orb {
  position: absolute;
  width: 60vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 64%);
  will-change: transform;
  animation: vt-orb 28s ease-in-out infinite alternate;
}
.vt-orb--a { --c: var(--orb-a); top: -26%; left: -18%; }
.vt-orb--b { --c: var(--orb-b); top: -10%; right: -28%; width: 56vmax; animation-duration: 34s; animation-delay: -12s; }
.vt-orb--c { --c: var(--orb-c); bottom: -34%; left: 18%; width: 70vmax; animation-duration: 40s; animation-delay: -20s; }
@keyframes vt-orb {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5vw, 6vh, 0) scale(1.08); }
  100% { transform: translate3d(-4vw, 9vh, 0) scale(.95); }
}

/* ---------- En-tête ---------- */
.site-header--vt .back-link__arrow { color: var(--gold); }
.site-header--vt .lang-switch,
.site-header--vt .icon-btn { background: var(--glass); border-color: var(--glass-border); }
.site-header--vt .lang-switch button { font-family: var(--font-mono); font-weight: 400; }
.site-header--vt .icon-btn { color: var(--gold); }

/* ---------- Étiquettes mono ---------- */
.vt-mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ---------- Boutons ---------- */
.vt-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 32px;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.vt-btn .icon { width: 18px; height: 18px; }
.vt-btn--primary {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b) 130%);
  color: var(--btn-text);
  box-shadow: 0 8px 24px var(--btn-glow);
}
/* Reflet qui traverse le bouton, comme dans l'appli */
.vt-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: vt-shine 4.5s ease-in-out infinite;
}
.vt-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--btn-glow-strong); }
.vt-btn--primary:focus-visible { outline-offset: 4px; }
.vt-btn--disabled,
.vt-btn:disabled {
  cursor: not-allowed;
  background: var(--glass);
  border: 1px dashed var(--glass-border);
  color: var(--text-2);
  box-shadow: none;
  transform: none;
}
.vt-btn__soon {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glass-2);
  color: var(--gold-text);
  font-size: .75rem;
}
@keyframes vt-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- Hero ---------- */
.vt-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(640px, 96svh);
  padding: calc(var(--header-h) + 40px) 0 80px;
  text-align: center;
}
.vt-hero__content { display: grid; justify-items: center; gap: 16px; }

/* Médaillon */
.vt-emblem { width: 96px; height: 96px; margin-bottom: 10px; overflow: visible; }
.vt-emblem__halo { fill: none; stroke: var(--gold); stroke-opacity: .18; stroke-width: 4; }
.vt-emblem__ring { fill: none; stroke: var(--gold); stroke-opacity: .6; stroke-width: 1.4; }
.vt-emblem__disc { fill: var(--emblem-disc); stroke: var(--gold); stroke-opacity: .35; stroke-width: 1; }
.vt-emblem__heart {
  fill: color-mix(in srgb, var(--sage) 16%, transparent);
  stroke: var(--sage);
  stroke-width: 2.6;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: vt-beat 2.4s ease-in-out infinite;
}
.vt-emblem__pulse { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vt-beat { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.07); } 76% { transform: scale(.98); } 84% { transform: scale(1.04); } }

.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vt-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.vt-title {
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(4rem, 15vw, 8.75rem);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--sage);
}
.vt-subtitle { font-weight: 500; font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--sage); }
.vt-tagline { max-width: 40ch; font-size: clamp(1rem, 1.8vw, 1.125rem); color: var(--text-2); }
.vt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.vt-chip {
  padding: 5px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-2);
}
.vt-hero__actions { margin-top: 14px; }

/* ---------- Surfaces de verre ---------- */
.vt-card {
  border: 1px solid var(--glass-border);
  border-radius: 1.4rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -36px var(--glass-shadow);
}

/* ---------- Sections ---------- */
.vt-section { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.vt-section--preview { padding-top: 0; }
.vt-narrow { max-width: calc(880px + 2 * var(--gutter)); }
.vt-h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-align: center;
}

/* Aperçu en direct : progression de l'année */
.vt-preview {
  display: grid;
  gap: 28px;
  align-items: center;
  justify-items: center;
  padding: clamp(24px, 5vw, 44px);
}
@media (min-width: 720px) {
  .vt-preview { grid-template-columns: auto minmax(0, 1fr); gap: 44px; justify-items: start; }
}
.vt-preview__ring { position: relative; width: 190px; height: 190px; flex: none; }
.vt-preview__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vt-ring__track { fill: none; stroke: var(--border); stroke-width: 8; }
.vt-ring__bar { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.vt-stop-gold { stop-color: var(--gold); }
.vt-stop-sage { stop-color: var(--sage); }
.vt-preview__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
}
.vt-preview__year { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; color: var(--text-3); }
.vt-preview__value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}
.vt-preview__body { display: grid; gap: 8px; width: 100%; text-align: center; }
@media (min-width: 720px) { .vt-preview__body { text-align: left; } }
.vt-preview__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
}
.vt-preview__since { color: var(--sage); font-weight: 500; }
.vt-units {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.vt-unit {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--glass);
}
.vt-unit dd {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}
.vt-unit--cs dd { color: var(--gold-text); }
.vt-unit dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 479px) {
  .vt-units { display: flex; flex-wrap: wrap; justify-content: center; }
  .vt-unit { flex: 0 0 calc((100% - 16px) / 3); }
}
.vt-preview__note { margin-top: 6px; font-size: .875rem; color: var(--text-2); }

/* À propos */
.vt-about { margin-top: 32px; padding: clamp(24px, 5vw, 44px); font-size: 1.0625rem; color: var(--text-2); }
.vt-about p:first-child { font-family: var(--font-head); font-size: clamp(1.375rem, 2.6vw, 1.625rem); line-height: 1.35; color: var(--text); }
.vt-about p + p { margin-top: 1em; }

/* Placeholder « Bientôt » doux avec un léger reflet animé */
.soon-block { display: grid; place-items: center; padding: 12px 0; }
.soon-shimmer {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.soon-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: vt-shine 3.6s ease-in-out infinite;
}

/* Fonctionnalités */
.vt-features {
  display: grid;
  gap: 18px;
  margin-top: 40px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .vt-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vt-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vt-feature { display: grid; align-content: start; gap: 10px; padding: 26px; }
.vt-feature__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-2);
  color: var(--sage);
}
.vt-feature__icon .icon { width: 22px; height: 22px; }
.vt-feature__title { font-family: var(--font-head); font-weight: 600; font-size: 1.625rem; line-height: 1.1; }
.vt-feature__text { color: var(--text-2); font-size: .9375rem; }

/* Captures (affichées dès qu'elles sont remplies dans data.js) */
.vt-shots {
  display: grid;
  gap: 18px;
  margin-top: 36px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.vt-shot {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 1.4rem;
  border: 1px solid var(--glass-border);
  cursor: zoom-in;
  transition: transform .5s var(--ease-out);
}
.vt-shot:hover { transform: translateY(-4px); }
.vt-shot img { width: 100%; height: auto; }

/* Appel final */
.vt-cta__card {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 48px);
  text-align: center;
}
.vt-cta__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  color: var(--sage);
}
.vt-cta__text {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 48ch;
  color: var(--text-2);
}
.vt-cta__text .icon { margin-top: 3px; color: var(--gold); }

/* ---------- Pied de page ---------- */
.vt-footer {
  background: var(--glass);
  border-top-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.vt-footer__back { margin: 0 0 0 -8px; font-weight: 500; }
.vt-footer__back .back-link__arrow { color: var(--gold); }
.vt-footer .footer-title { font-family: var(--font-mono); font-weight: 400; letter-spacing: .18em; color: var(--gold-text); }
.vt-footer .footer-links a:hover { color: var(--sage); }

/* ---------- Lightbox ---------- */
.lightbox__counter { font-family: var(--font-mono); color: var(--gold-text); }
.lightbox__cap-title { font-family: var(--font-head); font-size: 1.375rem; }

/* ---------- Reveal doux et organique ---------- */
html.js [data-reveal] {
  --rv-dy: 36px;
  transition:
    opacity 1.1s cubic-bezier(.22, 1, .36, 1) var(--rv-delay, 0ms),
    transform 1.4s cubic-bezier(.22, 1, .36, 1) var(--rv-delay, 0ms);
}
html.js [data-reveal="zoom"] { --rv-s: .9; --rv-dy: 20px; }

@media (prefers-reduced-motion: reduce) {
  .vt-orb, .soon-shimmer::after, .vt-btn--primary::after, .vt-emblem__heart { animation: none !important; }
  .vt-ring__bar { transition: none; }
}