/*
 * Atlas Musical — Premium responsive interface
 * Version 1.8.0
 * This layer intentionally overrides the base component without depending on a WordPress theme.
 */

.atlas-musical {
  --am-bg: #f4f0e8;
  --am-bg-deep: #e8e1d5;
  --am-surface: rgba(255, 253, 248, .92);
  --am-surface-solid: #fffdf8;
  --am-surface-2: rgba(229, 223, 212, .72);
  --am-ink: #161713;
  --am-muted: #66685f;
  --am-line: rgba(25, 26, 21, .11);
  --am-line-strong: rgba(25, 26, 21, .20);
  --am-accent: #a7274a;
  --am-accent-soft: #e9a9b9;
  --am-accent-2: #d98e33;
  --am-teal: #146f68;
  --am-blue: #2f5f91;
  --am-purple: #69498c;
  --am-shadow: 0 30px 90px rgba(49, 41, 28, .14), 0 3px 12px rgba(49, 41, 28, .06);
  --am-shadow-card: 0 18px 45px rgba(40, 34, 23, .10), 0 2px 8px rgba(40, 34, 23, .05);
  --am-radius-xl: 36px;
  --am-radius: 24px;
  --am-radius-sm: 15px;
  --am-content-pad: clamp(22px, 4.5cqi, 72px);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--am-accent-2) 12%, transparent), transparent 26%),
    radial-gradient(circle at 8% 34%, color-mix(in srgb, var(--am-teal) 8%, transparent), transparent 30%),
    var(--am-bg);
  border: 1px solid color-mix(in srgb, var(--am-line) 75%, transparent);
  border-radius: var(--am-radius-xl);
  box-shadow: var(--am-shadow);
  container-name: atlas;
  container-type: inline-size;
  isolation: isolate;
  margin: 28px auto;
  max-width: 1580px;
  min-width: 0;
  width: auto;
  overflow: clip;
  text-rendering: optimizeLegibility;
}

.atlas-musical[data-am-theme="dark"] {
  --am-bg: #11130f;
  --am-bg-deep: #080a07;
  --am-surface: rgba(27, 30, 24, .92);
  --am-surface-solid: #1b1e18;
  --am-surface-2: rgba(44, 48, 39, .76);
  --am-ink: #f4f0e7;
  --am-muted: #aaa99f;
  --am-line: rgba(245, 240, 230, .11);
  --am-line-strong: rgba(245, 240, 230, .22);
  --am-accent: #ed6c8a;
  --am-accent-soft: #7d3046;
  --am-accent-2: #f1b25f;
  --am-teal: #5dc3b8;
  --am-blue: #82afe0;
  --am-purple: #b997d1;
  --am-shadow: 0 32px 100px rgba(0, 0, 0, .52), 0 2px 10px rgba(0, 0, 0, .32);
  --am-shadow-card: 0 20px 55px rgba(0, 0, 0, .30);
}

.atlas-musical::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  opacity: .028;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.atlas-musical button,
.atlas-musical a,
.atlas-musical select,
.atlas-musical input {
  -webkit-tap-highlight-color: transparent;
}

.atlas-musical button {
  min-height: 42px;
}

.atlas-musical h1,
.atlas-musical h2,
.atlas-musical h3 {
  font-family: Iowan Old Style, Baskerville, "Times New Roman", Georgia, serif;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}

.am-ambient {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.am-ambient span {
  border: 1px solid color-mix(in srgb, var(--am-ink) 7%, transparent);
  border-radius: 50%;
  filter: blur(.1px);
  position: absolute;
}

.am-ambient span:nth-child(1) { height: 420px; right: -210px; top: 380px; width: 420px; }
.am-ambient span:nth-child(2) { height: 260px; left: -150px; top: 980px; width: 260px; }
.am-ambient span:nth-child(3) { bottom: 240px; height: 520px; right: 11%; width: 520px; }

.am-topbar {
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  background: color-mix(in srgb, var(--am-surface-solid) 78%, transparent);
  gap: clamp(18px, 3cqi, 42px);
  grid-template-columns: minmax(205px, auto) minmax(280px, 680px) minmax(100px, auto);
  min-height: 82px;
  padding: 15px var(--am-content-pad);
  position: sticky;
  top: 0;
  z-index: 50;
}

.am-brand {
  background: transparent;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  min-height: 52px !important;
  padding: 4px 8px 4px 3px;
  text-align: left;
}

.am-brand:hover .am-brand-mark {
  box-shadow: 0 10px 25px color-mix(in srgb, var(--am-accent) 28%, transparent);
  transform: rotate(-5deg) scale(1.04);
}

.am-brand-mark {
  background: linear-gradient(145deg, var(--am-ink), color-mix(in srgb, var(--am-ink) 76%, var(--am-accent)));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 8px 22px rgba(24, 24, 18, .16);
  height: 48px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  width: 48px;
}

.am-brand strong { font-size: 1.18rem; letter-spacing: -.025em; }
.am-brand small { font-size: .63rem; letter-spacing: .13em; margin-top: 6px; }

.am-search-wrap {
  background: color-mix(in srgb, var(--am-surface-2) 74%, transparent);
  border-color: var(--am-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  min-height: 50px;
  padding-left: 18px;
}

.atlas-musical[data-am-theme="dark"] .am-search-wrap { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

.am-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--am-accent) 54%, var(--am-line));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--am-accent) 10%, transparent), 0 12px 34px rgba(27, 25, 20, .08);
  transform: translateY(-1px);
}

.am-search-wrap input { font-size: .91rem !important; min-height: 46px; }
.am-search-wrap kbd { box-shadow: 0 2px 0 var(--am-line-strong); }

.am-actions { justify-self: end; }
.am-icon-button {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
  height: 46px;
  width: 46px;
}

.am-icon-button:hover,
.am-icon-button.is-active {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--am-ink) 18%, transparent);
}

.am-primary-nav {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--am-surface-solid) 88%, transparent);
  gap: 5px;
  justify-content: center;
  padding: 8px var(--am-content-pad) 9px;
  position: sticky;
  top: 82px;
  z-index: 40;
}

.am-primary-nav button {
  border: 0;
  border-radius: 999px;
  font-size: .76rem;
  min-height: 42px;
  padding: 9px 14px;
  position: relative;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.am-primary-nav button:hover {
  background: color-mix(in srgb, var(--am-ink) 5%, transparent);
  transform: translateY(-1px);
}

.am-primary-nav button.is-active {
  background: var(--am-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--am-ink) 18%, transparent);
  color: var(--am-bg);
}

.am-primary-nav button.is-active .am-count-badge {
  background: color-mix(in srgb, var(--am-bg) 18%, transparent);
  color: var(--am-bg);
}

.am-nav-icon { font-family: Georgia, serif; font-size: 1rem !important; }

.am-main {
  min-height: 720px;
  padding: clamp(32px, 5cqi, 78px) var(--am-content-pad) clamp(76px, 7cqi, 112px);
  position: relative;
  z-index: 1;
}

.am-footer {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--am-surface-solid) 80%, transparent);
  padding-left: var(--am-content-pad);
  padding-right: var(--am-content-pad);
  position: relative;
  z-index: 2;
}

.am-button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  min-height: 48px;
  padding: 13px 22px;
}

.am-button-primary {
  background: linear-gradient(135deg, var(--am-ink), color-mix(in srgb, var(--am-ink) 80%, var(--am-accent)));
}

.am-button-primary:hover {
  box-shadow: 0 16px 34px color-mix(in srgb, var(--am-ink) 22%, transparent);
}

.am-button-ghost {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--am-surface-solid) 46%, transparent);
}

.am-hero {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--am-surface-solid) 96%, transparent) 0 48%, color-mix(in srgb, var(--am-surface-solid) 66%, transparent) 75%),
    radial-gradient(circle at 86% 17%, color-mix(in srgb, var(--am-accent-2) 29%, transparent), transparent 34%),
    radial-gradient(circle at 64% 100%, color-mix(in srgb, var(--am-teal) 18%, transparent), transparent 38%);
  border-color: color-mix(in srgb, var(--am-line-strong) 62%, transparent);
  border-radius: clamp(26px, 3cqi, 42px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60), var(--am-shadow-card);
  gap: clamp(22px, 4cqi, 64px);
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  min-height: clamp(510px, 43cqi, 650px);
  padding: clamp(36px, 6cqi, 96px);
}

.atlas-musical[data-am-theme="dark"] .am-hero { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--am-shadow-card); }

.am-hero::before {
  background:
    repeating-radial-gradient(circle at center, transparent 0 16px, color-mix(in srgb, var(--am-ink) 7%, transparent) 17px 18px),
    radial-gradient(circle, color-mix(in srgb, var(--am-accent-2) 18%, transparent), transparent 68%);
  height: min(54cqi, 680px);
  opacity: .65;
  right: min(-12cqi, -80px);
  top: min(-10cqi, -70px);
  width: min(54cqi, 680px);
}

.am-hero::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--am-accent) 38%, transparent), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 12%;
  position: absolute;
  width: 76%;
}

.am-hero h1 {
  font-size: clamp(3.15rem, 6.1cqi, 6.5rem);
  letter-spacing: -.055em;
  line-height: .91;
  margin-bottom: 28px;
}

.am-hero h1 em {
  background: linear-gradient(120deg, var(--am-accent), color-mix(in srgb, var(--am-accent) 56%, var(--am-accent-2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.am-hero p { font-size: clamp(1.02rem, 1.35cqi, 1.24rem); line-height: 1.68; }
.am-hero-actions { gap: 12px; margin-top: 36px; }

.am-hero-orbit {
  filter: drop-shadow(0 22px 28px rgba(30, 28, 20, .12));
  max-width: 440px;
}

.am-orbit {
  border-color: color-mix(in srgb, var(--am-ink) 18%, transparent);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--am-accent-2) 6%, transparent);
}

.am-orbit::before {
  border: 1px dashed color-mix(in srgb, var(--am-ink) 12%, transparent);
  border-radius: 50%;
  content: "";
  inset: 9%;
  position: absolute;
}

.am-orbit span {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  box-shadow: 0 8px 24px rgba(26, 24, 18, .09);
}

.am-orbit-core {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 22%),
    repeating-radial-gradient(circle at center, var(--am-ink) 0 9px, color-mix(in srgb, var(--am-ink) 91%, white) 10px 11px);
  box-shadow: 0 24px 60px rgba(21, 21, 17, .26), inset 0 0 0 1px rgba(255,255,255,.12);
}

.am-stat-grid {
  gap: 14px;
  margin-top: 20px;
}

.am-stat-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--am-surface-solid) 58%, transparent);
  border-color: color-mix(in srgb, var(--am-line) 85%, transparent);
  border-radius: 17px;
  min-height: 160px;
  overflow: hidden;
  position: relative;
}

.am-stat-card::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--type) 18%, transparent), transparent 67%);
  content: "";
  height: 180px;
  position: absolute;
  right: -90px;
  top: -90px;
  width: 180px;
}

.am-stat-card:hover {
  background: var(--am-surface-solid);
  border-color: color-mix(in srgb, var(--type) 30%, var(--am-line));
  box-shadow: var(--am-shadow-card);
}

.am-stat-card > * { position: relative; z-index: 1; }

.am-section { margin-top: clamp(64px, 7cqi, 105px); }
.am-section-heading { margin-bottom: 30px; }
.am-section-heading h2 { font-size: clamp(2.25rem, 3.8cqi, 4rem); letter-spacing: -.045em; }

.am-card-grid {
  gap: clamp(14px, 1.35cqi, 22px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.am-card {
  background: color-mix(in srgb, var(--am-surface-solid) 91%, transparent);
  border-color: color-mix(in srgb, var(--am-line) 88%, transparent);
  border-radius: 23px;
  box-shadow: 0 1px 0 rgba(255,255,255,.36);
  transform: translateZ(0);
}

.am-card:hover {
  border-color: color-mix(in srgb, var(--type) 32%, var(--am-line));
  box-shadow: var(--am-shadow-card);
  transform: translateY(-7px) scale(1.008);
}

.am-card-visual {
  height: clamp(145px, 12.5cqi, 195px);
}

.am-card-visual::before {
  background: repeating-radial-gradient(circle at center, transparent 0 13px, rgba(255,255,255,.10) 14px 15px);
  border: 0;
  height: 250px;
  right: -90px;
  top: -130px;
  width: 250px;
}

.am-card-visual::after {
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 0 0 20px rgba(255,255,255,.035), 0 0 0 42px rgba(255,255,255,.025);
}

.am-card-symbol { font-size: clamp(4.7rem, 5.4cqi, 6.4rem); opacity: .92; }
.am-card-body { min-height: 220px; padding: 21px 21px 23px; }
.am-card-body > strong { font-size: clamp(1.2rem, 1.45cqi, 1.48rem); line-height: 1.06; }
.am-card-body > small { font-size: .75rem; line-height: 1.55; }
.am-card-favorite { box-shadow: 0 8px 20px rgba(26,25,20,.12); height: 38px; width: 38px; }

.am-path-grid { gap: clamp(14px, 1.4cqi, 22px); }
.am-path-card {
  background: color-mix(in srgb, var(--am-surface-solid) 90%, transparent);
  border-radius: 23px;
  min-height: 330px;
  padding: 28px;
}
.am-path-card:hover { box-shadow: var(--am-shadow-card); transform: translateY(-7px); }

.am-page-header { margin-bottom: clamp(34px, 4cqi, 58px); }
.am-page-header h1 { font-size: clamp(3rem, 5.5cqi, 6rem); letter-spacing: -.055em; }
.am-page-header p { font-size: clamp(.96rem, 1.1cqi, 1.09rem); line-height: 1.7; }

.am-filter-panel {
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  background: color-mix(in srgb, var(--am-surface-solid) 78%, transparent);
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(35, 31, 22, .07);
  gap: 12px;
  margin-bottom: 32px;
  padding: 15px;
  top: 145px;
}

.am-filter-panel select,
.am-inline-filter select {
  min-height: 46px;
}

.am-timeline {
  border-left-color: color-mix(in srgb, var(--am-accent) 32%, var(--am-line));
}

.am-timeline-band::before {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--am-accent) 9%, transparent);
}

.am-timeline-scroll {
  gap: 14px;
  padding-bottom: 22px;
}

.am-timeline-node {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(30,27,20,.05);
  flex-basis: 232px;
  min-height: 172px;
  padding: 18px;
}

.am-timeline-node:hover { box-shadow: var(--am-shadow-card); transform: translateY(-5px); }

.am-world-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
.am-world-map,
.am-world-summary { border-radius: 26px; box-shadow: 0 10px 35px rgba(31,28,21,.055); }
.am-world-map { min-height: 560px; padding: 28px; }
.am-world-svg path:hover,
.am-world-svg path:focus,
.am-world-svg path.is-active { filter: drop-shadow(0 7px 8px rgba(25,20,15,.15)); }

.am-quiz-shell,
.am-path-hero {
  border-radius: 32px;
  box-shadow: var(--am-shadow-card);
}

.am-empty-state,
.am-error-state {
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  border-radius: 26px;
}

.am-drawer-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(8, 9, 7, .58);
}

.am-drawer-panel {
  box-shadow: -35px 0 100px rgba(0,0,0,.32);
  max-width: 1020px;
  width: min(1020px, 94vw);
}

.am-drawer-toolbar {
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
  padding: 14px 22px;
}

.am-drawer-hero { min-height: 430px; }
.am-drawer-title { padding: 48px 45px; }
.am-drawer-title h2 { font-size: clamp(3.1rem, 5.4cqi, 5.8rem); letter-spacing: -.055em; }
.am-drawer-body { padding: clamp(30px, 4cqi, 52px); }
.am-detail-grid { gap: clamp(34px, 4cqi, 54px); grid-template-columns: minmax(0, 1fr) minmax(235px, 280px); }
.am-detail-main p { font-size: .93rem; line-height: 1.82; }
.am-listen-focus,
.am-audio-track,
.am-related-grid button { border-radius: 15px; }

.am-toast {
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  min-height: 42px;
  padding: 11px 18px;
}

/* Wide desktop */
@container atlas (min-width: 1280px) {
  .am-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .am-card-grid-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .am-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .am-path-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Laptop and landscape tablet */
@container atlas (max-width: 1120px) {
  .am-topbar { grid-template-columns: minmax(185px, auto) minmax(240px, 1fr) auto; }
  .am-brand small { display: none; }
  .am-primary-nav { justify-content: flex-start; }
  .am-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-card-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-hero { grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); }
  .am-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Portrait tablet */
@container atlas (max-width: 860px) {
  .am-topbar {
    gap: 12px;
    grid-template-columns: 1fr auto;
    min-height: auto;
    padding-bottom: 13px;
  }
  .am-search-wrap { grid-column: 1 / -1; grid-row: 2; }
  .am-primary-nav { top: 125px; }
  .am-hero { grid-template-columns: 1fr; min-height: auto; }
  .am-hero-copy { max-width: 720px; }
  .am-hero-orbit { max-width: 360px; }
  .am-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  .am-world-layout { grid-template-columns: 1fr; }
  .am-world-summary { display: grid; gap: 12px 26px; grid-template-columns: 1fr 1fr; }
  .am-world-mini-stats { grid-column: 2; grid-row: 1 / 4; }
  .am-drawer-panel { width: min(100vw, 860px); }
  .am-drawer-hero { grid-template-columns: 1fr; }
  .am-detail-image-placeholder { min-height: 390px; }
  .am-drawer-title {
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08));
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
  }
}

/* Mobile component layout */
@container atlas (max-width: 680px) {
  .atlas-musical { --am-content-pad: 16px; border-radius: 22px; }
  .am-topbar { padding: 11px 14px 12px; }
  .am-brand { min-width: 0; }
  .am-brand-mark { height: 42px; width: 42px; }
  .am-brand-copy { min-width: 0; }
  .am-brand strong { display: block; font-size: 1.04rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .am-actions { gap: 6px; }
  .am-icon-button { height: 42px; min-height: 42px; width: 42px; }
  .am-search-wrap { min-height: 46px; padding-left: 14px; }
  .am-search-wrap input { font-size: 16px !important; }
  .am-search-wrap kbd { display: none; }
  .am-primary-nav { padding-left: 8px; padding-right: 8px; top: 111px; }
  .am-primary-nav button { padding: 8px 12px; }
  .am-main { padding-top: 22px; }
  .am-hero { border-radius: 25px; padding: 34px 24px 32px; }
  .am-hero h1 { font-size: clamp(3rem, 14cqi, 4.65rem); }
  .am-hero p { font-size: .98rem; }
  .am-hero-orbit { display: none; }
  .am-hero-actions { display: grid; grid-template-columns: 1fr; }
  .am-hero-actions .am-button { width: 100%; }
  .am-stat-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 58px; }
  .am-stat-card { min-height: 145px; padding: 14px; }
  .am-stat-card strong { font-size: 1.7rem; }
  .am-section { margin-top: 65px; }
  .am-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .am-section-heading h2 { font-size: clamp(2.2rem, 10cqi, 3.1rem); }
  .am-section-heading .am-text-button { align-self: flex-end; }
  .am-card-grid,
  .am-card-grid-compact { grid-template-columns: 1fr; }
  .am-card,
  .am-card-main { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .am-card-main { grid-column: 1 / -1; }
  .am-card-visual,
  .am-card.is-compact .am-card-visual { height: 100%; min-height: 198px; }
  .am-card-symbol { font-size: 4.35rem; left: 13px; }
  .am-card-region { left: 8px; max-height: 142px; overflow: hidden; right: auto; text-overflow: ellipsis; writing-mode: vertical-rl; }
  .am-card-body,
  .am-card.is-compact .am-card-body { min-height: 198px; padding: 17px 16px; }
  .am-card-body > strong { font-size: 1.22rem; padding-right: 24px; }
  .am-card-tags { display: none; }
  .am-card-favorite,
  .am-card.is-compact .am-card-favorite { right: 8px; top: 8px; }
  .am-path-grid,
  .am-path-grid-full { grid-template-columns: 1fr; }
  .am-path-card { min-height: 290px; }
  .am-page-header h1 { font-size: clamp(2.75rem, 13cqi, 4rem); }
  .am-filter-panel { grid-template-columns: 1fr; }
  .am-timeline { margin-left: 3px; padding-left: 23px; }
  .am-timeline-band::before { left: -32px; }
  .am-timeline-band > header { display: block; }
  .am-timeline-node { flex-basis: 188px; min-height: 162px; }
  .am-world-map { min-height: auto; padding: 10px; }
  .am-world-summary { display: block; padding: 24px; }
  .am-world-mini-stats { margin-top: 22px; }
  .am-path-hero { padding: 38px 24px; }
  .am-path-hero::after { display: none; }
  .am-quiz-shell { padding: 26px 20px; }
  .am-drawer-panel { max-width: none; width: 100vw; }
  .am-drawer-toolbar { padding: 10px 12px; }
  .am-detail-image-placeholder { min-height: 330px; }
  .am-drawer-title { padding: 32px 22px 27px; }
  .am-drawer-title h2 { font-size: clamp(2.7rem, 13cqi, 4.2rem); }
  .am-drawer-body { padding: 28px 19px max(40px, env(safe-area-inset-bottom)); }
  .am-detail-grid { grid-template-columns: 1fr; }
  .am-detail-side { border-top: 1px solid var(--am-line); padding-top: 30px; }
  .am-related-grid { grid-template-columns: 1fr; }
  .am-audio-tools { align-items: flex-start; flex-direction: column; }
  .am-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* True phone viewport: turn the main navigation into a premium bottom dock. */
@media (max-width: 700px) {
  .atlas-musical {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    overflow: visible;
    width: 100vw;
  }

  .atlas-musical::before { border-radius: 0; }

  .am-topbar {
    position: sticky;
    top: 0;
  }

  .am-primary-nav {
    background: color-mix(in srgb, var(--am-surface-solid) 90%, transparent);
    border: 1px solid var(--am-line-strong);
    border-radius: 22px;
    bottom: max(9px, env(safe-area-inset-bottom));
    box-shadow: 0 18px 55px rgba(18,17,13,.23), inset 0 1px 0 rgba(255,255,255,.42);
    gap: 2px;
    left: 10px;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    padding: 6px;
    position: fixed;
    right: 10px;
    top: auto;
    z-index: 99990;
  }

  .am-primary-nav button {
    border-radius: 16px;
    display: grid;
    flex: 1 0 68px;
    font-size: .60rem;
    gap: 1px;
    justify-items: center;
    letter-spacing: 0;
    min-height: 53px;
    padding: 5px 7px;
  }

  .am-primary-nav button.is-active { box-shadow: none; }
  .am-nav-icon { font-size: 1.08rem !important; line-height: 1; }
  .am-count-badge { height: 17px; min-width: 17px; padding: 0 4px; position: absolute; right: 5px; top: 4px; }
  .am-main { padding-bottom: 118px; }
  .am-footer { padding-bottom: 112px; }
  .am-toast-region { bottom: 92px; left: 12px; right: 12px; }
  .am-toast { justify-self: center; }
}

@media (max-width: 390px) {
  .am-brand strong { font-size: .96rem; }
  .am-brand-mark { height: 39px; width: 39px; }
  .am-actions .am-icon-button { height: 39px; min-height: 39px; width: 39px; }
  .am-primary-nav button { flex-basis: 64px; }
  .am-stat-card > span:nth-of-type(2) { font-size: .79rem; }
  .am-stat-card small { font-size: .63rem; }
}

@media (hover: none) {
  .am-card:hover,
  .am-path-card:hover,
  .am-stat-card:hover,
  .am-button:hover,
  .am-timeline-node:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .atlas-musical { --am-line: rgba(20,20,18,.28); --am-line-strong: rgba(20,20,18,.48); }
  .atlas-musical[data-am-theme="dark"] { --am-line: rgba(255,255,255,.28); --am-line-strong: rgba(255,255,255,.48); }
  .am-card,
  .am-hero,
  .am-filter-panel { background: var(--am-surface-solid); }
}

@media print {
  .am-ambient,
  .atlas-musical::before { display: none !important; }
}

/* Atlas Musical 1.4 — explicit type filters and richer local reading layer. */
.am-type-filterbar {
  display: flex;
  gap: 9px;
  margin: 0 0 24px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.am-type-filter {
  --type: var(--am-ink);
  align-items: center;
  background: color-mix(in srgb, var(--am-surface-solid) 88%, transparent);
  border: 1px solid var(--am-line);
  border-radius: 999px;
  color: var(--am-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 43px;
  padding: 7px 12px 7px 8px;
  scroll-snap-align: start;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
  white-space: nowrap;
}

.am-type-filter:hover {
  border-color: color-mix(in srgb, var(--type) 58%, var(--am-line));
  transform: translateY(-1px);
}

.am-type-filter .am-filter-dot {
  align-items: center;
  background: color-mix(in srgb, var(--type) 14%, var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--type) 22%, transparent);
  border-radius: 50%;
  color: var(--type);
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: .92rem;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.am-type-filter > span:nth-child(2) {
  font-size: .69rem;
  font-weight: 830;
  letter-spacing: .025em;
}

.am-type-filter small {
  align-items: center;
  background: var(--am-surface-2);
  border-radius: 999px;
  color: var(--am-muted);
  display: inline-flex;
  font-size: .59rem;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}

.am-type-filter.is-active {
  background: color-mix(in srgb, var(--type) 15%, var(--am-surface-solid));
  border-color: color-mix(in srgb, var(--type) 66%, var(--am-line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type) 12%, transparent), 0 8px 22px color-mix(in srgb, var(--type) 10%, transparent);
}

.am-type-filter.is-active .am-filter-dot {
  background: var(--type);
  color: var(--am-surface-solid);
}

.am-type-filter:first-child.is-active {
  background: var(--am-ink);
  border-color: var(--am-ink);
  color: var(--am-bg);
}

.am-type-filter:first-child.is-active .am-filter-dot {
  background: color-mix(in srgb, var(--am-bg) 16%, transparent);
  border-color: color-mix(in srgb, var(--am-bg) 22%, transparent);
  color: var(--am-bg);
}

.am-type-filter:first-child.is-active small {
  background: color-mix(in srgb, var(--am-bg) 14%, transparent);
  color: var(--am-bg);
}

.am-section-count {
  color: var(--am-muted);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

.am-insight-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 38px;
}

.am-insight-grid article {
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  border: 1px solid var(--am-line);
  border-radius: 18px;
  min-height: 168px;
  padding: 18px;
  position: relative;
}

.am-insight-grid article > span {
  color: var(--am-accent);
  display: block;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  margin-bottom: 25px;
}

.am-insight-grid article strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1rem;
  margin-bottom: 8px;
}

.am-insight-grid article p {
  color: var(--am-muted);
  font-size: .69rem;
  line-height: 1.55;
  margin: 0;
}

@container atlas (max-width: 760px) {
  .am-type-filterbar {
    margin-left: calc(var(--am-content-pad) * -.35);
    margin-right: calc(var(--am-content-pad) * -.35);
    padding-left: calc(var(--am-content-pad) * .35);
    padding-right: calc(var(--am-content-pad) * .35);
  }

  .am-type-filter { min-height: 46px; }
  .am-insight-grid { grid-template-columns: 1fr; }
  .am-insight-grid article { min-height: 0; }
  .am-section-heading { align-items: flex-start; }
}

/* 1.6.0 — éphéméride éditoriale et panorama mondial équilibré. */
.am-today-card {
  align-items: stretch;
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--am-accent-2) 19%, transparent), transparent 32%),
    linear-gradient(115deg, color-mix(in srgb, var(--am-surface) 92%, var(--am-accent) 8%), var(--am-surface));
  border: 1px solid var(--am-line);
  border-radius: 28px;
  box-shadow: 0 14px 42px rgba(31, 28, 21, .07);
  display: grid;
  gap: clamp(22px, 3cqi, 52px);
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
  margin: 18px 0 24px;
  min-height: 210px;
  overflow: hidden;
  padding: clamp(24px, 3.3cqi, 46px);
  position: relative;
}
.am-today-card::after {
  border: 1px solid color-mix(in srgb, var(--am-accent) 18%, transparent);
  border-radius: 50%;
  content: "";
  height: 230px;
  pointer-events: none;
  position: absolute;
  right: -105px;
  top: -110px;
  width: 230px;
}
.am-today-date {
  align-items: flex-start;
  border-right: 1px solid var(--am-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(18px, 2.3cqi, 36px);
  position: relative;
  z-index: 1;
}
.am-today-day {
  color: var(--am-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7cqi, 7.2rem);
  letter-spacing: -.07em;
  line-height: .8;
}
.am-today-date small {
  color: var(--am-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-top: 18px;
  text-transform: uppercase;
}
.am-today-copy { align-self: center; max-width: 900px; position: relative; z-index: 1; }
.am-today-copy .am-eyebrow { margin-bottom: 8px; }
.am-today-copy h2 { font-size: clamp(1.65rem, 2.6cqi, 3rem); margin-bottom: 12px; }
.am-today-copy p { color: var(--am-muted); font-size: .92rem; line-height: 1.65; margin-bottom: 7px; max-width: 850px; }
.am-today-source { color: var(--am-muted); display: block; font-size: .65rem; opacity: .82; }
.am-today-action { align-items: center; display: flex; justify-content: flex-end; min-width: 158px; position: relative; z-index: 1; }
.am-today-loader {
  animation: am-today-spin 1s linear infinite;
  border: 2px solid var(--am-line);
  border-radius: 50%;
  border-top-color: var(--am-accent);
  display: block;
  height: 30px;
  width: 30px;
}
@keyframes am-today-spin { to { transform: rotate(360deg); } }

.am-world-region-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0 8px;
}
.am-world-region-card {
  --region-card: var(--am-blue);
  background: linear-gradient(145deg, color-mix(in srgb, var(--region-card) 13%, var(--am-surface)), var(--am-surface));
  border: 1px solid color-mix(in srgb, var(--region-card) 27%, var(--am-line));
  border-radius: 20px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  position: relative;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.am-world-region-card:hover {
  border-color: color-mix(in srgb, var(--region-card) 62%, var(--am-line));
  box-shadow: 0 15px 34px color-mix(in srgb, var(--region-card) 14%, transparent);
  transform: translateY(-3px);
}
.am-world-region-card > span { color: var(--region-card); font-family: Georgia, serif; font-size: 1.55rem; }
.am-world-region-card > strong { font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.05; }
.am-world-region-card > small { color: var(--am-muted); font-size: .67rem; line-height: 1.45; padding-right: 20px; }
.am-world-region-card > i { bottom: 18px; color: var(--region-card); font-style: normal; position: absolute; right: 18px; }
.am-world-region-1 { --region-card: #9e3656; }
.am-world-region-2 { --region-card: #b97828; }
.am-world-region-3 { --region-card: #26756e; }
.am-world-region-4 { --region-card: #73538d; }
.am-world-region-5 { --region-card: #3c6590; }
.am-world-region-6 { --region-card: #a0524d; }
.am-world-region-7 { --region-card: #6d7c3c; }
.am-world-region-8 { --region-card: #8b5b91; }

@container atlas (max-width: 980px) {
  .am-today-card { grid-template-columns: 120px minmax(0, 1fr); }
  .am-today-action { grid-column: 2; justify-content: flex-start; }
  .am-world-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container atlas (max-width: 620px) {
  .am-today-card { gap: 20px; grid-template-columns: 1fr; padding: 25px 22px; }
  .am-today-date { align-items: center; border-bottom: 1px solid var(--am-line); border-right: 0; flex-direction: row; gap: 18px; justify-content: flex-start; padding: 0 0 20px; }
  .am-today-day { font-size: 3.8rem; }
  .am-today-date small { margin-top: 0; }
  .am-today-action { grid-column: 1; justify-content: stretch; min-width: 0; }
  .am-today-action .am-button { width: 100%; }
  .am-world-region-grid { grid-template-columns: 1fr; }
  .am-world-region-card { min-height: 126px; }
}


/* 1.7.0 — éphéméride multi-événements, défilement horizontal et commandes accessibles. */
.am-today-card {
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}
.am-today-carousel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.am-today-viewport {
  min-width: 0;
  overflow: hidden;
}
.am-today-track {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform .62s cubic-bezier(.22, .72, .24, 1);
  will-change: transform;
}
.am-today-slide {
  align-items: center;
  display: grid;
  flex: 0 0 100%;
  gap: clamp(22px, 3cqi, 52px);
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 2px 0;
}
.am-today-slide[aria-hidden="true"] {
  pointer-events: none;
}
.am-today-controls {
  align-items: center;
  display: flex;
  gap: 9px;
  margin-top: 22px;
  min-width: 0;
}
.am-today-control,
.am-today-dot {
  appearance: none;
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  border: 1px solid var(--am-line);
  color: var(--am-ink);
  cursor: pointer;
}
.am-today-control {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0 12px;
}
.am-today-control:hover,
.am-today-control:focus-visible {
  background: var(--am-ink);
  border-color: var(--am-ink);
  color: var(--am-bg);
}
.am-today-toggle { min-width: 92px; }
.am-today-counter {
  color: var(--am-muted);
  flex: 0 0 auto;
  font-size: .69rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 44px;
  text-align: center;
}
.am-today-dots {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 40px;
  overflow-x: auto;
  padding: 7px 3px;
  scrollbar-width: thin;
}
.am-today-dot {
  border-radius: 999px;
  flex: 0 0 8px;
  height: 8px;
  min-height: 8px;
  min-width: 8px;
  padding: 0;
  transition: flex-basis .22s ease, background-color .22s ease, border-color .22s ease;
  width: 8px;
}
.am-today-dot.is-active {
  background: var(--am-accent);
  border-color: var(--am-accent);
  flex-basis: 24px;
}
@container atlas (max-width: 980px) {
  .am-today-card { grid-template-columns: 120px minmax(0, 1fr); }
  .am-today-slide { align-items: start; grid-template-columns: 1fr; }
  .am-today-action { grid-column: auto; justify-content: flex-start; min-width: 0; }
}
@container atlas (max-width: 620px) {
  .am-today-card { grid-template-columns: 1fr; }
  .am-today-carousel { width: 100%; }
  .am-today-slide { gap: 20px; }
  .am-today-controls { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .am-today-dots { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .am-today-toggle { min-width: 0; }
  .am-today-toggle [data-am-today-toggle-label] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .am-today-track { transition: none; }
}


/* Atlas Musical 1.9 — photographic card covers and French video resources. */
.am-card-visual {
  isolation: isolate;
}
.am-card-thumb {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transform: scale(1.025);
  transition: opacity .45s ease, transform .7s cubic-bezier(.2,.72,.2,1);
  width: 100%;
  z-index: 0;
}
.am-card-visual.has-image .am-card-thumb {
  opacity: 1;
  transform: scale(1);
}
.am-card-visual.has-image::before {
  background: linear-gradient(180deg, rgba(7,7,7,.04) 20%, rgba(7,7,7,.46) 100%);
  border: 0;
  border-radius: 0;
  height: auto;
  inset: 0;
  width: auto;
  z-index: 1;
}
.am-card-visual.has-image::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--type) 30%, transparent), transparent 64%);
  border: 0;
  border-radius: 0;
  height: auto;
  inset: 0;
  width: auto;
  z-index: 1;
}
.am-card-visual.has-image .am-card-symbol {
  opacity: 0;
  transform: translateY(8px);
}
.am-card-symbol {
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}
.am-card-region {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
}
.am-card[data-am-card-id^="instrument-"] .am-card-thumb {
  background: color-mix(in srgb, var(--type) 16%, var(--am-surface-solid));
  object-fit: contain;
}
.am-card-visual.is-image-pending::after {
  animation: am-card-image-pulse 1.6s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 45%, transparent 70%);
  border: 0;
  border-radius: 0;
  height: auto;
  inset: 0;
  width: auto;
}
@keyframes am-card-image-pulse {
  0%, 100% { opacity: .15; transform: translateX(-35%); }
  50% { opacity: .7; transform: translateX(35%); }
}
.am-video-resource-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.am-video-resource {
  align-items: center;
  background: color-mix(in srgb, var(--am-surface-solid) 88%, var(--type, #a42a4d) 12%);
  border: 1px solid var(--am-line);
  border-radius: 20px;
  color: var(--am-text) !important;
  display: grid;
  gap: 14px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 15px 17px;
  text-decoration: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.am-video-resource:hover,
.am-video-resource:focus-visible {
  border-color: color-mix(in srgb, var(--am-accent) 56%, var(--am-line));
  box-shadow: 0 16px 38px rgba(20,18,14,.1);
  transform: translateY(-2px);
}
.am-video-resource-mark {
  align-items: center;
  aspect-ratio: 1;
  background: var(--am-text);
  border-radius: 50%;
  color: var(--am-surface-solid);
  display: flex;
  font-size: .84rem;
  justify-content: center;
}
.am-video-resource > span:nth-child(2) {
  display: grid;
  gap: 3px;
}
.am-video-resource small {
  color: var(--am-accent);
  font-size: .67rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.am-video-resource strong {
  font-family: var(--am-display);
  font-size: 1.08rem;
  line-height: 1.15;
}
.am-video-resource em {
  color: var(--am-muted);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.45;
}
.am-video-resource > i {
  font-style: normal;
}
.am-video-note {
  color: var(--am-muted);
  font-size: .72rem;
  margin-top: 10px;
}
@container atlas (max-width: 560px) {
  .am-video-resource { grid-template-columns: 40px minmax(0, 1fr); padding: 13px; }
  .am-video-resource > i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .am-card-thumb, .am-card-symbol, .am-video-resource { transition: none; }
  .am-card-visual.is-image-pending::after { animation: none; }
}

.am-related-listening {
  border-top: 1px solid var(--am-line);
  margin-top: 22px;
  padding-top: 18px;
}
.am-related-listening > span {
  color: var(--am-accent);
  display: block;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .09em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.am-related-listening > div {
  display: grid;
  gap: 8px;
}
.am-related-listening button {
  align-items: center;
  background: var(--am-surface-solid) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 15px !important;
  color: var(--am-text) !important;
  display: grid;
  gap: 11px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 11px 13px !important;
  text-align: left;
  width: 100%;
}
.am-related-listening button:hover,
.am-related-listening button:focus-visible {
  border-color: var(--am-accent) !important;
}
.am-related-listening i {
  align-items: center;
  background: color-mix(in srgb, var(--am-accent) 14%, transparent);
  border-radius: 50%;
  display: flex;
  font-style: normal;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.am-related-listening button > span { display: grid; gap: 2px; }
.am-related-listening strong { font-family: var(--am-display); font-size: .98rem; }
.am-related-listening small { color: var(--am-muted); font-size: .72rem; }
.am-related-listening em { color: var(--am-muted); font-size: .73rem; font-style: normal; }
@container atlas (max-width: 480px) {
  .am-related-listening button { grid-template-columns: 32px minmax(0, 1fr); }
  .am-related-listening em { display: none; }
}

/* Atlas Musical 1.9.1 — intelligent image framing.
   Portraits and square artwork are shown in full over a softly blurred copy
   of the same image. Landscape photographs continue to use an immersive crop. */
.am-card-visual.has-image {
  background: color-mix(in srgb, var(--type) 18%, var(--am-surface-solid));
}
.am-card-backdrop,
.am-detail-backdrop {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: -18px;
  pointer-events: none;
  position: absolute;
  transform: scale(1.06);
  z-index: 0;
}
.am-card-backdrop {
  filter: blur(15px) saturate(.88) brightness(.78);
  opacity: .72;
}
.am-card-thumb {
  z-index: 1;
}
.am-card-visual.has-image::before,
.am-card-visual.has-image::after {
  z-index: 2;
}
.am-card-visual.has-image .am-card-symbol {
  z-index: 3;
}
.am-card-visual.has-image .am-card-region {
  z-index: 4;
}
.am-card-visual.am-image-portrait .am-card-thumb,
.am-card-visual.am-image-square .am-card-thumb {
  object-fit: contain;
  object-position: center;
  padding: 5px 10px 0;
  transform: scale(.985);
}
.am-card-visual.am-image-portrait.has-image .am-card-thumb,
.am-card-visual.am-image-square.has-image .am-card-thumb {
  transform: scale(1);
}
.am-card[data-am-card-id^="composer-"] .am-card-visual.am-image-portrait .am-card-thumb,
.am-card[data-am-card-id^="creator-"] .am-card-visual.am-image-portrait .am-card-thumb {
  object-position: center top;
  padding-top: 0;
}
.am-card[data-am-card-id^="composer-"] .am-card-visual.am-image-landscape .am-card-thumb,
.am-card[data-am-card-id^="creator-"] .am-card-visual.am-image-landscape .am-card-thumb {
  object-position: center 22%;
}
.am-card-visual.am-image-landscape .am-card-thumb {
  object-fit: cover;
  object-position: center 38%;
}
.am-card-visual.am-image-panorama .am-card-thumb {
  object-fit: cover;
  object-position: center;
}
.am-card[data-am-card-id^="instrument-"] .am-card-thumb {
  padding: 6px 12px;
}

.am-detail-image-placeholder {
  isolation: isolate;
}
.am-detail-backdrop {
  filter: blur(28px) saturate(.84) brightness(.66);
  opacity: .8;
}
.am-detail-image-placeholder img {
  z-index: 1;
}
.am-detail-image-placeholder::after {
  z-index: 2;
}
.am-detail-image-placeholder small {
  z-index: 3;
}
.am-detail-image-placeholder.am-image-portrait img,
.am-detail-image-placeholder.am-image-square img {
  object-fit: contain;
  object-position: center;
  padding: clamp(6px, 1.1vw, 18px);
}
.am-detail-type-creator .am-detail-image-placeholder.am-image-portrait img,
.am-detail-type-composer .am-detail-image-placeholder.am-image-portrait img {
  object-position: center top;
  padding-top: 0;
}
.am-detail-type-creator .am-detail-image-placeholder.am-image-landscape img,
.am-detail-type-composer .am-detail-image-placeholder.am-image-landscape img {
  object-fit: cover;
  object-position: center 20%;
}
.am-detail-image-placeholder.am-image-landscape img {
  object-fit: cover;
  object-position: center 38%;
}
.am-detail-image-placeholder.am-image-panorama img {
  object-fit: cover;
  object-position: center;
}
.am-detail-type-instrument .am-detail-image-placeholder img {
  object-position: center;
}

@container atlas (max-width: 620px) {
  .am-card-visual.am-image-portrait .am-card-thumb,
  .am-card-visual.am-image-square .am-card-thumb {
    padding-inline: 4px;
  }
  .am-detail-image-placeholder.am-image-portrait img,
  .am-detail-image-placeholder.am-image-square img {
    padding: 4px;
  }
}

/* 2.1.0 — quiz immersif et découverte du jour éditoriale. */
.am-quiz-launch {
  align-items: center;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--am-accent) 17%, transparent), transparent 29%),
    radial-gradient(circle at 72% 82%, color-mix(in srgb, var(--am-blue) 14%, transparent), transparent 34%),
    var(--am-surface-solid);
  border: 1px solid var(--am-line);
  border-radius: 38px;
  box-shadow: var(--am-shadow-card);
  display: grid;
  gap: clamp(34px, 6vw, 90px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  min-height: 650px;
  overflow: hidden;
  padding: clamp(38px, 6vw, 88px);
  position: relative;
}
.am-quiz-launch::after {
  border: 1px solid color-mix(in srgb, var(--am-accent) 18%, transparent);
  border-radius: 50%;
  content: "";
  height: 420px;
  position: absolute;
  right: -185px;
  top: -225px;
  width: 420px;
}
.am-quiz-launch-copy { position: relative; z-index: 2; }
.am-quiz-launch-copy h1 { font-size: clamp(3.2rem, 6.3cqi, 6.5rem); max-width: 900px; }
.am-quiz-launch-copy p { color: var(--am-muted); font-size: clamp(1rem, 1.45cqi, 1.16rem); line-height: 1.75; max-width: 670px; }
.am-quiz-launch-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.am-quiz-launch-points span {
  align-items: baseline;
  background: color-mix(in srgb, var(--am-surface-solid) 82%, transparent);
  border: 1px solid var(--am-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: .78rem;
  gap: 6px;
  padding: 8px 13px;
}
.am-quiz-launch-points strong { color: var(--am-accent); font-family: Georgia, serif; font-size: 1rem; }
.am-quiz-launch-button { min-height: 54px; padding-inline: 24px; }
.am-quiz-launch-visual { aspect-ratio: 1; display: grid; place-items: center; position: relative; width: 100%; }
.am-quiz-launch-core {
  align-items: center;
  background: var(--am-ink);
  border: 16px solid color-mix(in srgb, var(--am-surface-solid) 65%, transparent);
  border-radius: 50%;
  box-shadow: 0 30px 85px rgba(30, 22, 15, .24);
  color: var(--am-bg);
  display: flex;
  flex-direction: column;
  height: clamp(190px, 22cqi, 270px);
  justify-content: center;
  position: relative;
  width: clamp(190px, 22cqi, 270px);
  z-index: 2;
}
.am-quiz-launch-core > span { color: var(--am-accent-2); font-size: 2rem; line-height: 1; }
.am-quiz-launch-core strong { font-family: Georgia, serif; font-size: 5.5rem; letter-spacing: -.08em; line-height: .95; }
.am-quiz-launch-core small { font-size: .66rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.am-quiz-orbit { border: 1px solid color-mix(in srgb, var(--am-ink) 18%, transparent); border-radius: 50%; position: absolute; }
.am-quiz-orbit-one { height: 82%; width: 82%; }
.am-quiz-orbit-two { height: 57%; width: 57%; }
.am-quiz-note { align-items: center; background: var(--am-surface-solid); border: 1px solid var(--am-line); border-radius: 50%; box-shadow: 0 14px 38px rgba(35, 30, 20, .13); display: flex; font-size: 1.55rem; height: 62px; justify-content: center; position: absolute; width: 62px; z-index: 3; }
.am-quiz-note-one { color: #9e3656; left: 4%; top: 25%; }
.am-quiz-note-two { bottom: 12%; color: #72548f; left: 22%; }
.am-quiz-note-three { color: #3c6590; right: 3%; top: 42%; }

.am-quiz-arena {
  --type: var(--am-accent);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--type) 20%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--am-surface-solid) 92%, var(--type) 8%), var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--type) 22%, var(--am-line));
  border-radius: 38px;
  box-shadow: 0 32px 90px rgba(36, 29, 18, .13);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  margin: 8px auto;
  max-width: 1320px;
  min-height: 680px;
  overflow: hidden;
  position: relative;
}
.am-quiz-arena::after {
  border: 1px solid color-mix(in srgb, var(--type) 14%, transparent);
  border-radius: 50%;
  content: "";
  height: 540px;
  pointer-events: none;
  position: absolute;
  right: -300px;
  top: -170px;
  width: 540px;
}
.am-quiz-rail {
  background:
    radial-gradient(circle at 25% 12%, color-mix(in srgb, var(--type) 75%, white 25%), transparent 31%),
    color-mix(in srgb, var(--type) 44%, #171814 56%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 42px 34px 36px;
  position: relative;
  z-index: 1;
}
.am-quiz-rail::after { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; bottom: -90px; content: ""; height: 260px; left: -115px; position: absolute; width: 260px; }
.am-quiz-rail-label { display: block; font-size: .66rem; font-weight: 850; letter-spacing: .17em; opacity: .72; text-transform: uppercase; }
.am-quiz-rail-number { display: block; font-family: Georgia, serif; font-size: 6.3rem; letter-spacing: -.09em; line-height: .86; margin-top: 22px; }
.am-quiz-rail-total { display: block; font-size: .78rem; font-weight: 700; margin-top: 9px; opacity: .72; text-transform: uppercase; }
.am-quiz-rail-progress { background: rgba(255,255,255,.18); border-radius: 999px; height: 190px; margin: 36px 0; overflow: hidden; position: relative; width: 7px; }
.am-quiz-rail-progress span { background: #fff; bottom: 0; display: block; left: 0; position: absolute; transition: height .45s cubic-bezier(.2,.8,.2,1); width: 100%; }
.am-quiz-rail-stats { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; position: relative; z-index: 2; }
.am-quiz-rail-stats div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 13px 10px; }
.am-quiz-rail-stats strong, .am-quiz-rail-stats span { display: block; }
.am-quiz-rail-stats strong { font-family: Georgia, serif; font-size: 1.75rem; line-height: 1; }
.am-quiz-rail-stats span { font-size: .6rem; font-weight: 750; letter-spacing: .09em; margin-top: 5px; opacity: .72; text-transform: uppercase; }
.am-quiz-stage { display: flex; flex-direction: column; min-width: 0; padding: clamp(34px, 4.6cqi, 64px); position: relative; z-index: 2; }
.am-quiz-stage-top { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
.am-quiz-topic { align-items: center; display: flex; gap: 12px; min-width: 0; }
.am-quiz-topic-icon { align-items: center; background: color-mix(in srgb, var(--type) 15%, var(--am-surface-solid)); border: 1px solid color-mix(in srgb, var(--type) 26%, transparent); border-radius: 50%; color: var(--type); display: inline-flex; flex: 0 0 42px; font-size: 1.25rem; height: 42px; justify-content: center; }
.am-quiz-topic > span:last-child { display: grid; line-height: 1.2; }
.am-quiz-topic strong { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.am-quiz-topic small { color: var(--am-muted); font-size: .69rem; margin-top: 4px; }
.am-quiz-step-dots { display: flex; gap: 5px; }
.am-quiz-step-dots span { background: var(--am-line); border-radius: 999px; display: block; height: 5px; transition: .25s ease; width: 17px; }
.am-quiz-step-dots span.is-done { background: color-mix(in srgb, var(--type) 55%, var(--am-line)); }
.am-quiz-step-dots span.is-current { background: var(--type); width: 35px; }
.am-quiz-question-wrap { margin: clamp(46px, 6cqi, 78px) 0 34px; max-width: 920px; }
.am-quiz-question-kicker { color: var(--type); display: block; font-size: .68rem; font-weight: 850; letter-spacing: .16em; margin-bottom: 15px; text-transform: uppercase; }
.am-quiz-arena .am-quiz-question-wrap h1 { font-size: clamp(2.55rem, 4.4cqi, 4.7rem); letter-spacing: -.045em; line-height: .98; margin: 0; text-wrap: balance; }
.am-quiz-question-wrap p { color: var(--am-muted); margin: 18px 0 0; }
.am-quiz-arena .am-quiz-choices { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-quiz-arena .am-quiz-choices button {
  align-items: center;
  background-color: color-mix(in srgb, var(--am-surface-solid) 96%, var(--type) 4%) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 19px;
  box-shadow: 0 8px 28px rgba(35, 29, 18, .045);
  color: var(--am-ink) !important;
  display: grid;
  gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  min-height: 92px;
  padding: 16px 18px;
  position: relative;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.am-quiz-arena .am-quiz-choices button:hover:not(:disabled),
.am-quiz-arena .am-quiz-choices button:focus-visible:not(:disabled) { border-color: color-mix(in srgb, var(--type) 62%, var(--am-line)) !important; box-shadow: 0 18px 40px color-mix(in srgb, var(--type) 13%, transparent); transform: translateY(-3px); }
.am-quiz-choice-letter { align-items: center; background: color-mix(in srgb, var(--type) 11%, var(--am-surface-solid)); border: 1px solid color-mix(in srgb, var(--type) 22%, var(--am-line)); border-radius: 13px !important; color: var(--type); display: inline-flex !important; flex: none !important; font-family: Georgia, serif; font-size: 1.15rem !important; font-weight: 800; height: 46px !important; justify-content: center; width: 46px !important; }
.am-quiz-arena .am-quiz-choices button > strong { font-size: clamp(.95rem, 1.3cqi, 1.12rem); line-height: 1.3; }
.am-quiz-choice-state { color: var(--type); font-size: 1.25rem; font-weight: 850; text-align: right; }
.am-quiz-arena .am-quiz-choices button.is-correct { background-color: color-mix(in srgb, #168466 14%, var(--am-surface-solid)) !important; border-color: #168466 !important; box-shadow: 0 14px 35px rgba(22,132,102,.15); }
.am-quiz-arena .am-quiz-choices button.is-correct .am-quiz-choice-letter { background: #168466; border-color: #168466; color: #fff; }
.am-quiz-arena .am-quiz-choices button.is-correct .am-quiz-choice-state { color: #168466; }
.am-quiz-arena .am-quiz-choices button.is-wrong { background-color: color-mix(in srgb, #b22f4f 12%, var(--am-surface-solid)) !important; border-color: #b22f4f !important; }
.am-quiz-arena .am-quiz-choices button.is-wrong .am-quiz-choice-letter { background: #b22f4f; border-color: #b22f4f; color: #fff; }
.am-quiz-arena .am-quiz-choices button.is-wrong .am-quiz-choice-state { color: #b22f4f; }
.am-quiz-arena .am-quiz-choices button.is-muted { opacity: .48; }
.am-quiz-keyboard-hint { align-items: center; color: var(--am-muted); display: flex; font-size: .7rem; gap: 9px; margin-top: 22px; }
.am-quiz-keyboard-hint span { background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 6px; color: var(--am-ink); font-size: .62rem; font-weight: 800; padding: 4px 7px; }
.am-quiz-arena .am-quiz-feedback { align-items: center; background: color-mix(in srgb, #168466 9%, var(--am-surface-solid)); border: 1px solid color-mix(in srgb, #168466 36%, var(--am-line)); border-left: 1px solid color-mix(in srgb, #168466 36%, var(--am-line)); border-radius: 20px; display: grid; gap: 14px; grid-template-columns: 50px minmax(0, 1fr) auto; margin-top: 24px; padding: 18px; }
.am-quiz-arena .am-quiz-feedback.is-wrong { background: color-mix(in srgb, #b22f4f 8%, var(--am-surface-solid)); border-color: color-mix(in srgb, #b22f4f 34%, var(--am-line)); }
.am-quiz-feedback-icon { align-items: center; background: #168466; border-radius: 50%; color: #fff; display: flex; font-size: 1.2rem; font-weight: 900; height: 46px; justify-content: center; width: 46px; }
.am-quiz-feedback.is-wrong .am-quiz-feedback-icon { background: #b22f4f; }
.am-quiz-feedback-copy strong { display: block; font-size: 1rem; }
.am-quiz-arena .am-quiz-feedback-copy p { color: var(--am-muted); line-height: 1.55; margin: 4px 0 0; }
.am-quiz-feedback-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.am-quiz-arena .am-quiz-next { float: none; margin: 0; }

.am-quiz-finish {
  align-items: center;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--am-accent-2) 20%, transparent), transparent 27%),
    var(--am-surface-solid);
  border: 1px solid var(--am-line);
  border-radius: 38px;
  box-shadow: var(--am-shadow-card);
  display: flex;
  flex-direction: column;
  margin: 8px auto;
  max-width: 1060px;
  min-height: 650px;
  padding: clamp(45px, 7vw, 90px);
  text-align: center;
}
.am-quiz-finish-medal { align-items: center; background: var(--am-ink); border: 12px solid color-mix(in srgb, var(--am-accent-2) 30%, var(--am-surface-solid)); border-radius: 50%; color: var(--am-accent-2); display: flex; font-size: 3rem; height: 120px; justify-content: center; margin-bottom: 25px; width: 120px; }
.am-quiz-finish h1 { font-size: clamp(3rem, 6cqi, 6rem); margin: 12px 0 18px; }
.am-quiz-finish > p { color: var(--am-muted); font-size: 1.05rem; line-height: 1.7; max-width: 680px; }
.am-quiz-finish-stats { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(130px, 1fr)); margin: 32px 0; max-width: 650px; width: 100%; }
.am-quiz-finish-stats div { background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 18px; padding: 18px; }
.am-quiz-finish-stats strong, .am-quiz-finish-stats span { display: block; }
.am-quiz-finish-stats strong { font-family: Georgia, serif; font-size: 2rem; }
.am-quiz-finish-stats span { color: var(--am-muted); font-size: .66rem; letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }
.am-quiz-finish-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@container atlas (max-width: 980px) {
  .am-quiz-launch { grid-template-columns: 1fr; }
  .am-quiz-launch-visual { margin: 0 auto; max-width: 420px; }
  .am-quiz-arena { grid-template-columns: 175px minmax(0, 1fr); }
  .am-quiz-rail { padding: 34px 24px 28px; }
  .am-quiz-rail-number { font-size: 5rem; }
  .am-quiz-arena .am-quiz-feedback { align-items: start; grid-template-columns: 46px 1fr; }
  .am-quiz-feedback-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 60px; }
}

@container atlas (max-width: 720px) {
  .am-quiz-launch { border-radius: 27px; min-height: 0; padding: 34px 22px 42px; }
  .am-quiz-launch-copy h1 { font-size: clamp(2.8rem, 14cqi, 4.6rem); }
  .am-quiz-launch-visual { max-width: 300px; }
  .am-quiz-launch-points span:last-child { display: none; }
  .am-quiz-arena { border-radius: 0; grid-template-columns: 1fr; margin: -1px calc(-1 * clamp(14px, 4vw, 24px)); min-height: 0; }
  .am-quiz-rail { align-items: center; display: grid; gap: 14px; grid-template-columns: auto 1fr auto; padding: 18px 20px; }
  .am-quiz-rail > div:first-child { align-items: baseline; display: flex; gap: 6px; }
  .am-quiz-rail-label { display: none; }
  .am-quiz-rail-number { font-size: 2.5rem; margin: 0; }
  .am-quiz-rail-total { margin: 0; }
  .am-quiz-rail-progress { height: 6px; margin: 0; width: 100%; }
  .am-quiz-rail-progress span { height: 100% !important; width: var(--quiz-progress, 10%); }
  .am-quiz-rail-stats { min-width: 112px; }
  .am-quiz-rail-stats div { border: 0; padding: 4px 7px; }
  .am-quiz-rail-stats strong { font-size: 1.25rem; }
  .am-quiz-rail-stats span { display: none; }
  .am-quiz-stage { padding: 28px 18px 34px; }
  .am-quiz-step-dots { display: none; }
  .am-quiz-question-wrap { margin: 37px 0 27px; }
  .am-quiz-arena .am-quiz-question-wrap h1 { font-size: clamp(2.25rem, 10.7cqi, 3.8rem); }
  .am-quiz-question-wrap p { font-size: .88rem; }
  .am-quiz-arena .am-quiz-choices { grid-template-columns: 1fr; }
  .am-quiz-arena .am-quiz-choices button { min-height: 78px; }
  .am-quiz-keyboard-hint { display: none; }
  .am-quiz-arena .am-quiz-feedback { grid-template-columns: 42px 1fr; }
  .am-quiz-feedback-icon { height: 40px; width: 40px; }
  .am-quiz-feedback-actions { display: grid; grid-template-columns: 1fr; padding-left: 0; }
  .am-quiz-feedback-actions .am-button { justify-content: center; width: 100%; }
  .am-quiz-finish { border-radius: 26px; min-height: 0; padding: 45px 20px; }
  .am-quiz-finish-stats { grid-template-columns: 1fr; }
  .am-quiz-finish-actions { display: grid; width: 100%; }
  .am-quiz-finish-actions .am-button { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .am-quiz-orbit, .am-quiz-note, .am-quiz-launch-core { animation: none !important; }
  .am-quiz-arena .am-quiz-choices button { transition: none; }
}

@container atlas (max-width: 720px) {
  .am-quiz-rail-stats { min-width: 122px; }
  .am-quiz-rail-stats span { display: block; font-size: .47rem; letter-spacing: .05em; }
}

/* 2.3.0 — transparence sur la vérification des extraits audio */
.am-audio-match { align-items: center; background: color-mix(in srgb, var(--am-instrument) 10%, var(--am-surface)); border: 1px solid color-mix(in srgb, var(--am-instrument) 35%, var(--am-line)); border-radius: 10px; display: grid; gap: 2px 9px; grid-template-columns: auto 1fr; margin: 11px 0 0; padding: 9px 11px; }
.am-audio-match > span { align-items: center; background: var(--am-instrument); border-radius: 50%; color: #fff; display: inline-flex; font-size: .62rem; grid-row: 1 / span 2; height: 22px; justify-content: center; width: 22px; }
.am-audio-match strong { font-size: .63rem; line-height: 1.2; }
.am-audio-match small { color: var(--am-muted); font-size: .55rem; line-height: 1.35; }


/* 2.4.0 — recommandations audio réellement jouables, sans boucle de navigation. */
.am-audio-loading { align-items: center; background: color-mix(in srgb, var(--am-accent) 7%, var(--am-surface-solid)); border: 1px dashed color-mix(in srgb, var(--am-accent) 34%, var(--am-line)); border-radius: 18px; display: flex; gap: 15px; padding: 20px; }
.am-audio-loading > span { align-items: center; background: var(--am-accent); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 42px; font-size: 1.05rem; height: 42px; justify-content: center; }
.am-audio-loading strong, .am-audio-loading p { display: block; margin: 0; }
.am-audio-loading strong { font-family: var(--am-display); font-size: 1.05rem; }
.am-audio-loading p { color: var(--am-muted); font-size: .72rem; line-height: 1.5; margin-top: 4px; }
.am-verified-listening { border-top: 1px solid var(--am-line); margin-top: 25px; padding-top: 22px; }
.am-verified-listening-head { margin-bottom: 15px; max-width: 760px; }
.am-verified-listening-head > span { color: var(--am-accent); display: block; font-size: .64rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.am-verified-listening-head > strong { display: block; font-family: var(--am-display); font-size: clamp(1.35rem, 2.2cqi, 2rem); line-height: 1.06; margin-top: 6px; }
.am-verified-listening-head > p { color: var(--am-muted); font-size: .74rem; line-height: 1.55; margin: 8px 0 0; }
.am-verified-listening-grid { display: grid; gap: 16px; }
.am-verified-work { background: color-mix(in srgb, var(--am-surface-solid) 96%, var(--am-work) 4%); border: 1px solid var(--am-line); border-radius: 20px; overflow: hidden; padding: 14px; }
.am-verified-work-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.atlas-musical .am-verified-work-heading button { align-items: center !important; background: transparent !important; border: 0 !important; border-radius: 12px !important; color: var(--am-text) !important; display: grid !important; flex: 1 1 auto; gap: 11px; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 8px !important; text-align: left !important; }
.atlas-musical .am-verified-work-heading button:hover, .atlas-musical .am-verified-work-heading button:focus-visible { background: color-mix(in srgb, var(--am-work) 9%, transparent) !important; }
.am-verified-work-heading button > span:first-child { align-items: center; background: color-mix(in srgb, var(--am-work) 16%, transparent); border-radius: 50%; color: var(--am-work); display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.am-verified-work-heading button > span:nth-child(2) { display: grid; min-width: 0; }
.am-verified-work-heading small { color: var(--am-muted); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-verified-work-heading strong { font-family: var(--am-display); font-size: 1.03rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-verified-work-heading em { color: var(--am-muted); font-size: .68rem; font-style: normal; }
.am-verified-work-heading > b { background: color-mix(in srgb, var(--am-instrument) 12%, var(--am-surface)); border: 1px solid color-mix(in srgb, var(--am-instrument) 30%, var(--am-line)); border-radius: 999px; color: var(--am-instrument); flex: 0 0 auto; font-size: .6rem; padding: 7px 10px; }
.am-verified-work .am-audio-track { border-radius: 14px; box-shadow: none; }
@container atlas (max-width: 620px) {
  .am-verified-work-heading { align-items: stretch; flex-direction: column; }
  .am-verified-work-heading > b { align-self: flex-start; }
  .atlas-musical .am-verified-work-heading button { grid-template-columns: 32px minmax(0, 1fr) !important; }
  .am-verified-work-heading em { display: none; }
}

/* 3.0.1 — lecture à plusieurs niveaux et signalement de confiance. */
.am-trust-badge {
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  display: grid;
  gap: 2px 9px;
  grid-template-columns: 24px minmax(0,1fr);
  margin-top: 18px;
  max-width: 680px;
  padding: 10px 12px;
}
.am-trust-badge > span {
  align-items: center;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  color: var(--am-accent);
  display: inline-flex;
  font-size: .7rem;
  grid-row: 1 / span 2;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.am-trust-badge strong { color: #fff; font-size: .68rem; letter-spacing: .04em; }
.am-trust-badge small { color: rgba(255,255,255,.82); font-size: .56rem; line-height: 1.35; }

.am-reading-levels {
  background: color-mix(in srgb, var(--am-surface-solid) 96%, var(--am-accent) 4%);
  border: 1px solid var(--am-line);
  border-radius: 22px;
  margin-bottom: 24px;
  overflow: hidden;
  padding: clamp(18px, 2.4cqi, 28px);
}
.am-reading-levels-head { align-items: end; display: flex; gap: 18px; justify-content: space-between; }
.am-reading-levels-head p { color: var(--am-muted); font-size: .72rem; line-height: 1.45; margin: 0; max-width: 520px; }
.am-reading-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.atlas-musical .am-reading-tabs button {
  background: transparent !important;
  border: 1px solid var(--am-line-strong) !important;
  border-radius: 999px !important;
  color: var(--am-text) !important;
  font-size: .67rem !important;
  font-weight: 780 !important;
  min-height: 40px;
  padding: 8px 15px !important;
}
.atlas-musical .am-reading-tabs button.is-active,
.atlas-musical .am-reading-tabs button[aria-pressed="true"] {
  background: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-paper) !important;
}
.am-reading-panel { border-top: 1px solid var(--am-line); margin-top: 18px; padding-top: 18px; }
.am-reading-panel[hidden] { display: none !important; }
.am-reading-panel strong { color: var(--am-accent); display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.am-reading-panel p { font-family: var(--am-display); font-size: clamp(1.15rem, 2.1cqi, 1.65rem); line-height: 1.38; margin: 8px 0 0; max-width: 1080px; }

.am-listening-questions {
  background: color-mix(in srgb, var(--am-work) 7%, var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--am-work) 24%, var(--am-line));
  border-radius: 17px;
  margin: 13px 0 18px;
  padding: 16px 18px;
}
.am-listening-questions > strong { display: block; font-family: var(--am-display); font-size: 1rem; }
.am-listening-questions ol { counter-reset: am-listen; display: grid; gap: 9px; list-style: none; margin: 12px 0 0; padding: 0; }
.am-listening-questions li { color: var(--am-muted); counter-increment: am-listen; display: grid; font-size: .72rem; gap: 9px; grid-template-columns: 25px 1fr; line-height: 1.5; }
.am-listening-questions li::before { align-items: center; background: var(--am-work); border-radius: 50%; color: #fff; content: counter(am-listen); display: inline-flex; font-size: .58rem; font-weight: 800; height: 25px; justify-content: center; width: 25px; }

.am-related-grid button p { color: var(--am-muted); font-size: .58rem; line-height: 1.42; margin: 7px 0 0; }

@container atlas (max-width: 700px) {
  .am-reading-levels-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .am-reading-tabs { display: grid; grid-template-columns: 1fr; }
  .atlas-musical .am-reading-tabs button { justify-content: flex-start !important; width: 100%; }
  .am-reading-panel p { font-size: 1.08rem; }
  .am-trust-badge { max-width: none; }
}


/* 3.0.1 — Student-facing reading controls: visible labels and theme isolation. */
.atlas-musical .am-reading-tabs button,
.atlas-musical .am-reading-tabs button:hover,
.atlas-musical .am-reading-tabs button:focus {
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-indent: 0 !important;
}
.atlas-musical .am-reading-tabs button.is-active,
.atlas-musical .am-reading-tabs button[aria-pressed="true"] {
  background: var(--am-accent) !important;
  border-color: var(--am-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.atlas-musical .am-reading-tabs button:not(.is-active):not([aria-pressed="true"]) {
  background: var(--am-surface-solid) !important;
  color: var(--am-text) !important;
  -webkit-text-fill-color: var(--am-text) !important;
}

/* 3.1.1 — Semantically filtered continuations and stable card layout. */
.am-related-section { min-width: 0; }
.am-related-intro {
  color: var(--am-muted);
  font-size: .76rem !important;
  line-height: 1.55 !important;
  margin: -6px 0 16px !important;
  max-width: 720px;
}
.am-related-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}
.atlas-musical .am-related-grid .am-related-card {
  --am-related-color: var(--am-accent);
  align-items: start !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--am-related-color) 7%, transparent), transparent 48%),
    var(--am-surface-solid) !important;
  border: 1px solid color-mix(in srgb, var(--am-related-color) 24%, var(--am-line)) !important;
  border-radius: 18px !important;
  color: var(--am-ink) !important;
  cursor: pointer;
  display: grid !important;
  gap: 4px 12px !important;
  grid-template-areas:
    "icon copy arrow"
    "reason reason reason";
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  grid-template-rows: auto auto;
  max-width: none !important;
  min-height: 142px;
  min-width: 0 !important;
  overflow: hidden;
  padding: 16px !important;
  text-align: left !important;
  width: 100% !important;
  word-break: normal !important;
}
.atlas-musical .am-related-grid .am-related-card:hover,
.atlas-musical .am-related-grid .am-related-card:focus-visible {
  border-color: color-mix(in srgb, var(--am-related-color) 55%, var(--am-line)) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--am-related-color) 13%, transparent) !important;
  transform: translateY(-2px);
}
.am-related-type-composer { --am-related-color: #9e3656 !important; }
.am-related-type-work { --am-related-color: #b97828 !important; }
.am-related-type-instrument { --am-related-color: #26756e !important; }
.am-related-type-tradition { --am-related-color: #3c6590 !important; }
.am-related-type-concept { --am-related-color: #72548f !important; }
.am-related-type-event { --am-related-color: #73705c !important; }
.am-related-icon {
  align-items: center;
  align-self: start;
  background: color-mix(in srgb, var(--am-related-color) 14%, var(--am-surface-solid)) !important;
  border: 1px solid color-mix(in srgb, var(--am-related-color) 28%, var(--am-line));
  border-radius: 50%;
  color: var(--am-related-color);
  display: inline-flex !important;
  font-size: 1rem;
  grid-area: icon !important;
  height: 42px !important;
  justify-content: center;
  width: 42px !important;
}
.am-related-copy {
  display: grid;
  gap: 5px;
  grid-area: copy;
  min-width: 0;
}
.am-related-copy strong {
  color: var(--am-ink) !important;
  font-family: var(--am-display);
  font-size: .96rem !important;
  line-height: 1.22 !important;
  overflow-wrap: break-word;
  word-break: normal !important;
}
.am-related-copy small {
  color: var(--am-related-color) !important;
  font-size: .6rem !important;
  font-weight: 780;
  letter-spacing: .045em;
  line-height: 1.3;
  text-transform: uppercase;
}
.am-related-arrow {
  align-items: center;
  color: var(--am-related-color);
  display: inline-flex;
  font-size: 1rem;
  grid-area: arrow;
  justify-content: flex-end;
  line-height: 1;
  padding-top: 4px;
}
.atlas-musical .am-related-grid .am-related-card > p {
  align-self: end;
  color: var(--am-muted) !important;
  display: block !important;
  font-size: .72rem !important;
  grid-area: reason !important;
  line-height: 1.5 !important;
  margin: 12px 0 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  padding-top: 12px;
  position: relative;
  white-space: normal !important;
  width: 100% !important;
  word-break: normal !important;
}
.atlas-musical .am-related-grid .am-related-card > p::before {
  background: color-mix(in srgb, var(--am-related-color) 24%, var(--am-line));
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@container atlas (max-width: 720px) {
  .am-related-grid { grid-template-columns: 1fr; }
  .atlas-musical .am-related-grid .am-related-card { min-height: 0; }
}

/* Neutralise l’ancien gabarit qui stylait chaque span enfant comme une icône. */
.atlas-musical .am-related-grid .am-related-card > .am-related-icon {
  align-items: center !important;
  background: color-mix(in srgb, var(--am-related-color) 14%, var(--am-surface-solid)) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  grid-row: auto !important;
  height: 42px !important;
  justify-content: center !important;
  width: 42px !important;
}
.atlas-musical .am-related-grid .am-related-card > .am-related-copy {
  align-items: start !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-row: auto !important;
  height: auto !important;
  justify-content: stretch !important;
  width: auto !important;
}
.atlas-musical .am-related-grid .am-related-card > .am-related-arrow {
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  grid-row: auto !important;
  height: auto !important;
  justify-content: flex-end !important;
  width: auto !important;
}

/* 3.2.0 — Qualité visible : cadrage éditorial, liens expliqués et médias lisibles. */
.am-card-visual,
.am-detail-image-placeholder {
  --am-focus-x: 50%;
  --am-focus-y: 38%;
  --am-image-fit: cover;
}
.am-card-visual.has-image .am-card-thumb,
.am-detail-image-placeholder img[data-am-enriched-image] {
  object-fit: var(--am-image-fit, cover) !important;
  object-position: var(--am-focus-x, 50%) var(--am-focus-y, 38%) !important;
}
.am-card-visual.has-image .am-card-backdrop,
.am-detail-image-placeholder .am-detail-backdrop {
  background-position: var(--am-focus-x, 50%) var(--am-focus-y, 38%);
}
.am-card[data-am-card-id^="composer-"] .am-card-visual,
.am-detail-type-composer .am-detail-image-placeholder {
  --am-focus-y: 18%;
  --am-image-fit: contain;
}
.am-card[data-am-card-id^="instrument-"] .am-card-visual,
.am-detail-type-instrument .am-detail-image-placeholder {
  --am-focus-y: 48%;
  --am-image-fit: contain;
}

.am-related-kind {
  align-items: center;
  align-self: start;
  background: color-mix(in srgb, var(--am-related-color) 11%, var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--am-related-color) 25%, var(--am-line));
  border-radius: 999px;
  color: var(--am-related-color) !important;
  display: inline-flex;
  font-size: .54rem;
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1;
  margin-bottom: 2px;
  padding: 5px 8px;
  text-transform: uppercase;
  width: fit-content;
}
.atlas-musical .am-related-grid .am-related-card {
  min-height: 166px;
}
.atlas-musical .am-related-grid .am-related-card > p {
  font-size: .74rem !important;
  line-height: 1.55 !important;
}

.am-recommendation-reason {
  align-items: center;
  background: color-mix(in srgb, var(--am-work) 8%, var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--am-work) 22%, var(--am-line));
  border-radius: 12px;
  color: var(--am-muted);
  display: flex;
  font-size: .68rem;
  gap: 9px;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 9px 12px;
}
.am-recommendation-reason span {
  align-items: center;
  background: var(--am-work);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .65rem;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.am-verified-listening-head > span {
  color: var(--am-work);
}

.am-audio-match {
  align-items: start;
  display: grid;
  gap: 2px 9px;
  grid-template-columns: 24px minmax(0, 1fr);
}
.am-audio-match > span {
  grid-row: 1 / span 2;
}
.am-audio-match strong {
  font-size: .68rem;
  letter-spacing: .02em;
}
.am-audio-match small {
  color: var(--am-muted);
  font-size: .63rem;
  line-height: 1.42;
}
.am-audio-heading small {
  color: var(--am-muted);
  line-height: 1.35;
}

@container atlas (max-width: 720px) {
  .atlas-musical .am-related-grid .am-related-card { min-height: 0; }
  .am-recommendation-reason { align-items: flex-start; }
}

/* === 3.4 — Profondeur mondiale, circulations et chronologies culturelles === */
.am-mode-switcher {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -8px 0 30px;
}
.am-mode-switcher > button {
  align-items: center;
  appearance: none;
  background: color-mix(in srgb, var(--am-surface) 92%, transparent);
  border: 1px solid var(--am-line);
  border-radius: 19px;
  box-shadow: 0 8px 28px rgba(31,28,21,.045);
  color: var(--am-ink);
  cursor: pointer;
  display: grid;
  gap: 3px 14px;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 86px;
  padding: 15px 18px;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.am-mode-switcher > button:hover,
.am-mode-switcher > button:focus-visible { border-color: var(--am-accent); box-shadow: var(--am-shadow-card); transform: translateY(-2px); }
.am-mode-switcher > button.is-active { background: var(--am-ink); border-color: var(--am-ink); color: var(--am-bg); }
.am-mode-switcher > button > span {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  font-family: Georgia, serif;
  font-size: 1rem;
  grid-row: 1 / 3;
  height: 42px;
  justify-content: center;
  opacity: .74;
  width: 42px;
}
.am-mode-switcher > button > strong { align-self: end; font-family: Georgia, serif; font-size: 1rem; line-height: 1.15; }
.am-mode-switcher > button > small { align-self: start; color: currentColor; font-size: .66rem; line-height: 1.35; opacity: .68; }

.am-world-area-section { margin: 34px 0 26px; }
.am-world-area-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.am-world-area-card {
  appearance: none;
  background: var(--am-surface);
  border: 1px solid var(--am-line);
  border-radius: 18px;
  color: var(--am-ink);
  cursor: pointer;
  display: grid;
  min-height: 196px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  text-align: left;
  transition: .2s ease;
}
.am-world-area-card::after {
  background: linear-gradient(135deg, color-mix(in srgb, var(--am-accent) 12%, transparent), transparent 64%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.am-world-area-card:hover,
.am-world-area-card:focus-visible,
.am-world-area-card.is-active { border-color: color-mix(in srgb, var(--am-accent) 65%, var(--am-line)); box-shadow: var(--am-shadow-card); transform: translateY(-4px); }
.am-world-area-card > * { position: relative; z-index: 1; }
.am-world-area-card > span { color: var(--am-accent); font-family: Georgia, serif; font-size: 1.35rem; }
.am-world-area-card > strong { font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.1; margin-top: 24px; max-width: 95%; }
.am-world-area-card > p { color: var(--am-muted); font-size: .68rem; line-height: 1.48; margin: 10px 0 18px; }
.am-world-area-card > small { align-self: end; color: var(--am-muted); font-size: .58rem; line-height: 1.35; padding-right: 22px; }
.am-world-area-card > i { bottom: 18px; color: var(--am-accent); font-style: normal; position: absolute; right: 19px; }

.am-circulation-intro {
  align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--am-accent) 12%, var(--am-surface)), var(--am-surface));
  border: 1px solid var(--am-line);
  border-radius: 20px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
  margin-bottom: 24px;
  padding: 24px 28px;
}
.am-circulation-intro strong { font-family: Georgia, serif; font-size: 1.45rem; }
.am-circulation-intro p { color: var(--am-muted); font-size: .73rem; line-height: 1.55; margin: 0; }
.am-circulation-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-circulation-card {
  appearance: none;
  background: var(--am-surface);
  border: 1px solid var(--am-line);
  border-radius: 22px;
  color: var(--am-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 318px;
  padding: 22px;
  position: relative;
  text-align: left;
  transition: .2s ease;
}
.am-circulation-card::before {
  background: linear-gradient(90deg, var(--am-accent), color-mix(in srgb, var(--am-accent-2) 75%, var(--am-accent)));
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 22px;
  position: absolute;
  right: 22px;
  top: 0;
}
.am-circulation-card:hover,
.am-circulation-card:focus-visible { border-color: var(--am-accent); box-shadow: var(--am-shadow-card); transform: translateY(-5px); }
.am-circulation-number { color: var(--am-accent); font-family: Georgia, serif; font-size: 1.8rem; }
.am-circulation-card > small { color: var(--am-accent); font-size: .58rem; font-weight: 800; letter-spacing: .09em; margin-top: 24px; text-transform: uppercase; }
.am-circulation-card > strong { font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.08; margin-top: 8px; }
.am-circulation-card > p { color: var(--am-muted); font-size: .7rem; line-height: 1.52; margin: 13px 0 20px; }
.am-circulation-card > div { align-items: center; border-top: 1px solid var(--am-line); display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr; margin-top: auto; padding-top: 16px; }
.am-circulation-card > div span { font-size: .61rem; line-height: 1.25; }
.am-circulation-card > div span:last-child { text-align: right; }
.am-circulation-card > div i { color: var(--am-accent); font-style: normal; }
.am-circulation-card > em { color: var(--am-muted); font-size: .57rem; font-style: normal; margin-top: 12px; }

.am-route-hero {
  background: linear-gradient(125deg, color-mix(in srgb, var(--am-accent) 20%, var(--am-surface)), var(--am-surface) 67%);
  border: 1px solid var(--am-line);
  border-radius: 26px;
  margin: 16px 0 30px;
  overflow: hidden;
  padding: clamp(30px, 5vw, 66px);
  position: relative;
}
.am-route-hero::after { border: 1px solid color-mix(in srgb, var(--am-accent) 25%, transparent); border-radius: 50%; content: ""; height: 300px; position: absolute; right: -80px; top: -120px; width: 300px; }
.am-route-hero > * { position: relative; z-index: 1; }
.am-route-hero h1 { font-size: clamp(2.4rem, 5.5vw, 5rem); max-width: 1040px; }
.am-route-hero p { color: var(--am-muted); font-size: .85rem; line-height: 1.6; max-width: 760px; }
.am-route-hero > div { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.am-route-hero > div span { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 999px; font-size: .69rem; font-weight: 700; padding: 9px 14px; }
.am-route-hero > div i { color: var(--am-accent); font-style: normal; }
.am-route-flow { list-style: none; margin: 0; padding: 0; }
.am-route-flow > li { display: grid; gap: 18px; grid-template-columns: 54px minmax(0, 1fr); position: relative; }
.am-route-flow > li:not(:last-child) { padding-bottom: 18px; }
.am-route-line { align-items: center; display: flex; flex-direction: column; }
.am-route-line span { align-items: center; background: var(--am-ink); border-radius: 50%; color: var(--am-bg); display: flex; font-family: Georgia, serif; height: 44px; justify-content: center; width: 44px; }
.am-route-line i { background: var(--am-line-strong); flex: 1; min-height: 32px; width: 1px; }
.am-route-stage {
  appearance: none;
  background: var(--am-surface);
  border: 1px solid var(--am-line);
  border-left: 5px solid var(--type, var(--am-accent));
  border-radius: 18px;
  color: var(--am-ink);
  cursor: pointer;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
  padding: 20px 22px;
  text-align: left;
  transition: .18s ease;
}
.am-route-stage:hover,
.am-route-stage:focus-visible { box-shadow: var(--am-shadow-card); transform: translateX(5px); }
.am-route-stage small { color: var(--am-accent); font-size: .57rem; font-weight: 800; grid-column: 1 / -1; letter-spacing: .08em; text-transform: uppercase; }
.am-route-stage strong { font-family: Georgia, serif; font-size: 1.25rem; }
.am-route-stage p { color: var(--am-muted); font-size: .7rem; grid-column: 1; line-height: 1.5; margin: 2px 0 0; max-width: 820px; }
.am-route-stage em { color: var(--am-muted); font-size: .58rem; font-style: normal; grid-column: 2; grid-row: 2; text-align: right; }
.am-route-stage > span { color: var(--am-accent); font-size: .61rem; font-weight: 700; grid-column: 2; grid-row: 3; text-align: right; }
.am-route-note { background: color-mix(in srgb, var(--am-accent) 7%, var(--am-surface)); border: 1px solid var(--am-line); border-radius: 18px; margin: 24px 0; padding: 22px 26px; }
.am-route-note strong { font-family: Georgia, serif; }
.am-route-note p { color: var(--am-muted); font-size: .7rem; line-height: 1.5; margin: 7px 0 0; }

.am-cultural-timeline-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); margin-top: 24px; }
.am-cultural-thread-nav { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 20px; display: grid; gap: 4px; padding: 8px; position: sticky; top: 110px; }
.am-cultural-thread-nav button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--am-ink);
  cursor: pointer;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 12px;
  text-align: left;
}
.am-cultural-thread-nav button:hover,
.am-cultural-thread-nav button:focus-visible { background: color-mix(in srgb, var(--am-accent) 6%, var(--am-surface)); }
.am-cultural-thread-nav button.is-active { background: var(--am-ink); color: var(--am-bg); }
.am-cultural-thread-nav button > span { color: var(--am-accent); font-family: Georgia, serif; grid-row: 1 / 3; }
.am-cultural-thread-nav button.is-active > span { color: var(--am-bg); opacity: .75; }
.am-cultural-thread-nav strong { font-size: .68rem; line-height: 1.25; }
.am-cultural-thread-nav small { color: currentColor; font-size: .54rem; opacity: .65; }
.am-cultural-thread { min-width: 0; }
.am-cultural-thread > header { background: linear-gradient(120deg, color-mix(in srgb, var(--am-accent) 15%, var(--am-surface)), var(--am-surface)); border: 1px solid var(--am-line); border-radius: 22px; margin-bottom: 16px; padding: 28px; }
.am-cultural-thread > header h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.am-cultural-thread > header p { color: var(--am-muted); font-size: .76rem; line-height: 1.6; max-width: 760px; }
.am-cultural-eras { display: grid; }
.am-cultural-era { display: grid; gap: 16px; grid-template-columns: 50px minmax(0, 1fr); }
.am-cultural-era-marker { align-items: center; display: flex; flex-direction: column; }
.am-cultural-era-marker span { align-items: center; background: var(--am-surface); border: 2px solid var(--am-accent); border-radius: 50%; color: var(--am-accent); display: flex; font-family: Georgia, serif; height: 42px; justify-content: center; width: 42px; }
.am-cultural-era-marker i { background: var(--am-line-strong); flex: 1; min-height: 30px; width: 1px; }
.am-cultural-era:last-child .am-cultural-era-marker i { display: none; }
.am-cultural-era-copy { border-bottom: 1px solid var(--am-line); padding: 2px 0 26px; }
.am-cultural-era + .am-cultural-era .am-cultural-era-copy { padding-top: 24px; }
.am-cultural-era-copy time { color: var(--am-accent); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.am-cultural-era-copy h3 { font-family: Georgia, serif; font-size: 1.55rem; margin: 6px 0 8px; }
.am-cultural-era-copy > p { color: var(--am-muted); font-size: .72rem; line-height: 1.55; max-width: 760px; }
.am-cultural-era-items { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.am-cultural-item {
  appearance: none;
  background: var(--am-surface);
  border: 1px solid var(--am-line);
  border-top: 3px solid var(--type, var(--am-accent));
  border-radius: 13px;
  color: var(--am-ink);
  cursor: pointer;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 76px;
  padding: 12px;
  text-align: left;
}
.am-cultural-item:hover,
.am-cultural-item:focus-visible { box-shadow: var(--am-shadow-card); }
.am-cultural-item > span { color: var(--type, var(--am-accent)); font-size: 1.2rem; grid-row: 1 / 3; }
.am-cultural-item strong { font-size: .72rem; line-height: 1.25; }
.am-cultural-item small { color: var(--am-muted); font-size: .55rem; }
.am-cultural-empty { font-style: italic; }

@media (max-width: 1180px) {
  .am-world-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-circulation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-cultural-timeline-layout { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .am-mode-switcher { grid-template-columns: 1fr; }
  .am-world-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-circulation-intro { grid-template-columns: 1fr; }
  .am-cultural-timeline-layout { grid-template-columns: 1fr; }
  .am-cultural-thread-nav { display: flex; overflow-x: auto; position: static; scroll-snap-type: x proximity; }
  .am-cultural-thread-nav button { flex: 0 0 230px; scroll-snap-align: start; }
}
@media (max-width: 580px) {
  .am-mode-switcher > button { min-height: 76px; padding: 12px 14px; }
  .am-world-area-grid, .am-circulation-grid, .am-cultural-era-items { grid-template-columns: 1fr; }
  .am-world-area-card { min-height: 168px; }
  .am-circulation-card { min-height: 280px; }
  .am-route-flow > li { gap: 9px; grid-template-columns: 40px minmax(0, 1fr); }
  .am-route-line span { height: 34px; width: 34px; }
  .am-route-stage { display: block; padding: 16px; }
  .am-route-stage > * { display: block; }
  .am-route-stage em, .am-route-stage > span { margin-top: 9px; text-align: left; }
  .am-cultural-era { gap: 8px; grid-template-columns: 38px minmax(0, 1fr); }
  .am-cultural-era-marker span { height: 32px; width: 32px; }
}

/* Atlas Musical 4.0 — provenance, bibliography and public quality indicators. */
.atlas-musical .am-filter-panel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.atlas-musical .am-card-proof { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.atlas-musical .am-card-proof > span { align-items: center; background: color-mix(in srgb, var(--am-surface-2) 82%, transparent); border: 1px solid var(--am-line); border-radius: 999px; color: var(--am-muted); display: inline-flex; font-size: .54rem; font-weight: 780; gap: 4px; letter-spacing: .02em; padding: 4px 7px; }

.atlas-musical .am-quality-hero { background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--am-accent) 13%, transparent), transparent 35%), var(--am-surface); border: 1px solid var(--am-line); border-radius: clamp(22px, 3vw, 38px); margin-bottom: 22px; overflow: hidden; padding: clamp(28px, 5vw, 78px); position: relative; }
.atlas-musical .am-quality-hero::after { border: 1px solid color-mix(in srgb, var(--am-accent) 22%, transparent); border-radius: 50%; content: ""; height: 330px; position: absolute; right: -120px; top: -190px; width: 330px; }
.atlas-musical .am-quality-hero > * { max-width: 980px; position: relative; z-index: 1; }
.atlas-musical .am-quality-hero h1 { font-family: var(--am-display); font-size: clamp(2.45rem, 6.7vw, 6.6rem); letter-spacing: -.055em; line-height: .9; margin: 18px 0 22px; max-width: 12ch; }
.atlas-musical .am-quality-hero p { color: var(--am-muted); font-size: clamp(.9rem, 1.4vw, 1.15rem); line-height: 1.65; max-width: 760px; }
.atlas-musical .am-quality-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.atlas-musical .am-quality-stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 22px; }
.atlas-musical .am-quality-stat-grid article { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 18px; display: grid; gap: 7px; min-height: 132px; padding: 20px; }
.atlas-musical .am-quality-stat-grid strong { color: var(--am-accent); font-family: var(--am-display); font-size: clamp(1.9rem, 3vw, 3.25rem); line-height: 1; }
.atlas-musical .am-quality-stat-grid span { color: var(--am-muted); font-size: .65rem; font-weight: 750; line-height: 1.35; }
.atlas-musical .am-quality-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(260px, .32fr); }
.atlas-musical .am-quality-main { display: grid; gap: 22px; }
.atlas-musical .am-quality-panel,
.atlas-musical .am-quality-side > section { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 22px; padding: clamp(20px, 3vw, 34px); }
.atlas-musical .am-quality-level-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.atlas-musical .am-quality-level-grid > * { background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 16px; color: var(--am-ink); display: grid; gap: 6px; min-height: 148px; padding: 20px; text-align: left; }
.atlas-musical .am-quality-level-grid button { cursor: pointer; }
.atlas-musical .am-quality-level-grid button:hover,
.atlas-musical .am-quality-level-grid button:focus-visible { border-color: color-mix(in srgb, var(--am-accent) 70%, var(--am-line)); transform: translateY(-2px); }
.atlas-musical .am-quality-level-grid strong { color: var(--am-accent); font-family: var(--am-display); font-size: 2.3rem; line-height: 1; }
.atlas-musical .am-quality-level-grid span { font-size: .8rem; font-weight: 850; }
.atlas-musical .am-quality-level-grid small { color: var(--am-muted); font-size: .62rem; line-height: 1.55; }
.atlas-musical .am-quality-table-wrap { margin-top: 16px; overflow-x: auto; }
.atlas-musical .am-quality-table-wrap table { border-collapse: collapse; font-size: .68rem; min-width: 600px; width: 100%; }
.atlas-musical .am-quality-table-wrap th,
.atlas-musical .am-quality-table-wrap td { border-bottom: 1px solid var(--am-line); padding: 13px 10px; text-align: left; }
.atlas-musical .am-quality-table-wrap thead th { color: var(--am-muted); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.atlas-musical .am-quality-side { display: grid; gap: 16px; position: sticky; top: 12px; }
.atlas-musical .am-quality-side ol { counter-reset: method; display: grid; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; }
.atlas-musical .am-quality-side li { color: var(--am-muted); font-size: .68rem; line-height: 1.6; padding-left: 34px; position: relative; }
.atlas-musical .am-quality-side li::before { align-items: center; background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 50%; color: var(--am-accent); content: counter(method); counter-increment: method; display: flex; font-size: .56rem; font-weight: 850; height: 24px; justify-content: center; left: 0; position: absolute; top: 0; width: 24px; }
.atlas-musical .am-quality-limit { background: color-mix(in srgb, var(--am-accent) 7%, var(--am-surface)) !important; }
.atlas-musical .am-quality-limit p { color: var(--am-muted); font-size: .68rem; line-height: 1.65; }

.atlas-musical .am-source-summary { background: color-mix(in srgb, var(--am-accent) 5%, var(--am-surface-2)); border: 1px solid var(--am-line); border-radius: 16px; margin: 12px 0 16px; padding: 16px; }
.atlas-musical .am-source-summary > div { display: flex; flex-wrap: wrap; gap: 7px; }
.atlas-musical .am-source-summary span { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 999px; color: var(--am-ink); font-size: .58rem; font-weight: 780; padding: 6px 9px; }
.atlas-musical .am-source-summary p { color: var(--am-muted); font-size: .65rem; line-height: 1.55; margin: 12px 0 0; }
.atlas-musical .am-bibliography-list { counter-reset: bibliography; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.atlas-musical .am-bibliography-list li { border-top: 1px solid var(--am-line); display: grid; gap: 7px; grid-template-columns: minmax(100px, .22fr) minmax(0, 1fr) auto; padding: 14px 0; }
.atlas-musical .am-bibliography-kind { color: var(--am-accent); font-size: .55rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.atlas-musical .am-bibliography-list p { color: var(--am-muted); font-size: .66rem; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.atlas-musical .am-bibliography-list a { align-self: start; color: var(--am-accent); font-size: .58rem; font-weight: 780; white-space: nowrap; }
.atlas-musical .am-source-note small { color: var(--am-muted); display: block; font-size: .58rem; margin-top: 5px; }

.atlas-musical-info-page.atlas-musical-quality-page .am-info-kicker { color: #ad254c; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.atlas-musical-info-page .am-public-quality-stats { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0; }
.atlas-musical-info-page .am-public-quality-stats > div { background: #f7f3ed; border: 1px solid #ddd6cb; border-radius: 18px; display: grid; gap: 4px; padding: 20px; }
.atlas-musical-info-page .am-public-quality-stats strong { color: #ad254c; font-family: Georgia, serif; font-size: 2.2rem; line-height: 1; }
.atlas-musical-info-page .am-public-quality-stats span { color: #5f5c57; font-size: .82rem; }
.atlas-musical-info-page .am-quality-definition-list { border: 1px solid #ddd6cb; border-radius: 18px; overflow: hidden; }
.atlas-musical-info-page .am-quality-definition-list > div { display: flex; gap: 20px; justify-content: space-between; padding: 14px 18px; }
.atlas-musical-info-page .am-quality-definition-list > div + div { border-top: 1px solid #ddd6cb; }
.atlas-musical-info-page .am-quality-definition-list dt { font-weight: 780; }
.atlas-musical-info-page .am-quality-definition-list dd { color: #68645e; margin: 0; }

@media (max-width: 1180px) {
  .atlas-musical .am-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-musical .am-quality-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-musical .am-quality-layout { grid-template-columns: 1fr; }
  .atlas-musical .am-quality-side { grid-template-columns: 1fr 1fr; position: static; }
}
@media (max-width: 760px) {
  .atlas-musical .am-filter-panel { grid-template-columns: 1fr 1fr; }
  .atlas-musical .am-quality-stat-grid { grid-template-columns: 1fr 1fr; }
  .atlas-musical .am-quality-level-grid,
  .atlas-musical .am-quality-side { grid-template-columns: 1fr; }
  .atlas-musical .am-bibliography-list li { grid-template-columns: 1fr; }
  .atlas-musical .am-bibliography-list a { white-space: normal; }
  .atlas-musical-info-page .am-public-quality-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .atlas-musical .am-filter-panel,
  .atlas-musical .am-quality-stat-grid { grid-template-columns: 1fr; }
  .atlas-musical-info-page .am-public-quality-stats { grid-template-columns: 1fr; }
}
.atlas-musical .am-quality-main,
.atlas-musical .am-quality-panel,
.atlas-musical .am-quality-side,
.atlas-musical .am-quality-side > section { min-width: 0; }
.atlas-musical .am-quality-table-wrap { max-width: 100%; }