/* Vitrine GoPve 2026 — pages d'historique des versions. */
:root {
  --gopve-bg: #f7f7f4;
  --gopve-ink: #13213b;
  --gopve-soft: #526078;
  --gopve-brand: #1769e0;
  --gopve-line: #dfe4ec;
  --gopve-radius: 20px;
  --gopve-shadow: 0 16px 38px rgba(19, 33, 59, 0.08);
}

body {
  min-height: 100vh;
  color: var(--gopve-ink);
  background: var(--gopve-bg);
  font-family: "Manrope", sans-serif;
}

body[data-product="memoeasy"] {
  --product-hero: linear-gradient(155deg, #0b0d2e 0%, #111849 46%, #1a1f5c 100%);
  --product-light: #9beee0;
}

body[data-product="boardtrack"] {
  --product-hero: linear-gradient(145deg, #17265b 0%, #0d1a45 100%);
  --product-light: #b8d5ff;
}

.page {
  width: min(980px, calc(100% - 56px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.topbar {
  margin-bottom: 48px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--gopve-line);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.back-link,
.brand,
.lang-switch select,
.eyebrow,
h1,
h2,
.release-tag,
.date,
.month-tab {
  font-family: "Manrope", sans-serif;
}

.back-link {
  color: var(--gopve-soft);
  letter-spacing: 0;
  text-transform: none;
}

.back-link:hover { color: var(--gopve-brand); }

.brand {
  color: var(--gopve-ink);
  letter-spacing: -0.035em;
  text-transform: none;
}

.brand img { box-shadow: none; }
.brand span span { color: var(--gopve-brand); }

.lang-switch {
  border-color: var(--gopve-line);
  background: #fff;
}

.lang-switch::after { color: var(--gopve-soft); }

.lang-switch select {
  color: var(--gopve-ink);
  letter-spacing: 0;
}

.hero {
  padding: clamp(30px, 6vw, 56px);
  border: 0;
  border-radius: var(--gopve-radius);
  background: var(--product-hero);
  box-shadow: none;
}

.eyebrow {
  color: var(--product-light);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
}

.eyebrow::before {
  width: 20px;
  background: var(--product-light);
}

h1 {
  color: #fff;
  font-size: clamp(2.45rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.065em;
}

.intro {
  color: #dbe7ff;
  font-size: 1.04rem;
  line-height: 1.7;
}

.month-tabs {
  gap: 8px;
  margin-top: 30px;
}

.month-tab {
  min-height: 42px;
  padding: 0 16px;
  border-color: var(--gopve-line);
  border-radius: 999px;
  color: var(--gopve-soft);
  background: #fff;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
}

.month-tab:hover,
.month-tab:focus-visible {
  border-color: #b9c7dc;
  color: var(--gopve-ink);
  outline: none;
}

.month-tab[aria-selected="true"],
.month-tab.is-active {
  border-color: var(--gopve-brand);
  color: #fff;
  background: var(--gopve-brand);
}

.timeline {
  gap: 14px;
  margin-top: 30px;
}

.month-panel { gap: 14px; }

.release {
  padding: clamp(22px, 4vw, 30px);
  border-color: var(--gopve-line);
  border-radius: var(--gopve-radius);
  background: #fff;
  box-shadow: none;
}

.release-header { margin-bottom: 18px; }
.release-title-group { gap: 9px; }

.release-tag {
  border-color: #bfd5fa;
  color: var(--gopve-brand);
  background: #edf4ff;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

h2 {
  color: var(--gopve-ink);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.05em;
}

.date {
  color: var(--gopve-brand);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

ul {
  color: var(--gopve-soft);
  line-height: 1.65;
}

li::marker { color: var(--gopve-brand); }

.note {
  border-top-color: var(--gopve-line);
  color: var(--gopve-soft);
}

.foot,
footer {
  margin-top: 64px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--gopve-line);
  border-radius: 0;
  background: transparent;
  color: var(--gopve-soft);
  text-align: left;
}

.foot a,
.foot-links a,
footer a { color: var(--gopve-brand); }

@media (max-width: 640px) {
  .page {
    width: min(100% - 36px, 980px);
    padding-top: 20px;
  }

  .topbar { margin-bottom: 38px; }
  .hero { padding: 28px 22px; border-radius: 18px; }
  h1 { font-size: clamp(2.3rem, 12vw, 3.4rem); }
  .release-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .brand { display: none; }
  .back-link span:not([data-i18n]) { display: none; }
}