/* ============================================
   ASTERVA — About CSS v2 · Blanc Botanique
   ============================================ */

.etymology-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--sp-2xl);
  align-items: start;
}
.aster-diagram { position: sticky; top: 7rem; }
.aster-diagram svg { width: 100%; max-width: 300px; opacity: 0.65; }

.etymology-text h2 { font-size: clamp(2rem, 4vw, var(--fs-3xl)); font-weight: 300; margin-bottom: var(--sp-lg); }
.etymology-text h2 em { color: var(--c-sauge); }

.about-story strong { color: var(--c-text-primary); font-weight: 500; }
.about-story em { font-style: italic; color: var(--c-sauge); }

.values-grid { margin-top: var(--sp-xl); }
.value-item { height: 100%; }

@media (max-width: 1024px) {
  .etymology-layout { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .aster-diagram { position: relative; top: auto; display: flex; justify-content: center; }
  .aster-diagram svg { max-width: 200px; }
}

/* ── Diagramme SVG — couleurs corrigées directement dans le SVG HTML ── */
.about-etymology .aster-diagram svg {
  opacity: 0.9;
}