/*
 * Atlas Musical 2.0 — accessibility, privacy, progressive enhancement and
 * small-screen navigation. Loaded after all visual compatibility layers.
 */

.atlas-musical .screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.atlas-musical [hidden] { display: none !important; }

/* The mobile dock exposes four primary destinations and one explicit More
   command. All seven destinations remain visible on wider layouts. */
.atlas-musical .am-nav-more,
.atlas-musical .am-more-menu {
  display: none;
}

.atlas-musical .am-more-menu[hidden] { display: none !important; }

/* Text over a photograph always receives a predictable dark backing. */
.atlas-musical .am-card-visual.has-image::before {
  background: linear-gradient(180deg, rgba(8, 8, 7, .18) 0%, rgba(8, 8, 7, .34) 45%, rgba(8, 8, 7, .82) 100%) !important;
}
.atlas-musical .am-card-visual.has-image::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--type) 24%, rgba(0,0,0,.28)), rgba(0,0,0,.04) 66%) !important;
}
.atlas-musical .am-card-region {
  background: rgba(18, 18, 16, .88) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.atlas-musical .am-detail-image-placeholder small {
  background: rgba(10, 10, 9, .88) !important;
  border-radius: 6px;
  color: #fff !important;
  line-height: 1.35;
  margin: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  text-shadow: none !important;
}
.atlas-musical .am-drawer-title {
  background: color-mix(in srgb, var(--type) 88%, #111) !important;
  color: #fff !important;
}
.atlas-musical .am-drawer-title .am-eyebrow,
.atlas-musical .am-drawer-title p,
.atlas-musical .am-drawer-title h2 { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

.atlas-musical .am-media-alternative {
  background: color-mix(in srgb, var(--am-teal) 8%, var(--am-surface-solid));
  border: 1px solid color-mix(in srgb, var(--am-teal) 32%, var(--am-line));
  border-radius: 15px;
  margin: 14px 0 18px;
  padding: 16px 18px;
}
.atlas-musical .am-media-alternative > strong {
  display: block;
  font-family: var(--am-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.atlas-musical .am-media-alternative p { margin: 0; }
.atlas-musical .am-media-alternative details { border-top: 1px solid var(--am-line); margin-top: 12px; padding-top: 10px; }
.atlas-musical .am-media-alternative summary { cursor: pointer; font-weight: 800; }
.atlas-musical .am-media-alternative details p { margin-top: 8px; }

.atlas-musical .am-audio-description {
  background: color-mix(in srgb, var(--am-surface-solid) 82%, transparent);
  border-left: 3px solid var(--am-teal);
  color: var(--am-muted);
  font-size: .78rem !important;
  line-height: 1.62 !important;
  margin: 12px 0 !important;
  padding: 10px 12px;
}

.atlas-musical .am-video-access {
  background: color-mix(in srgb, var(--am-ink) 7%, transparent);
  border-radius: 7px;
  color: var(--am-ink);
  display: inline-block;
  font-size: .67rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
  margin-top: 7px;
  padding: 5px 7px;
}

.atlas-musical .am-detail-loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(70vh, 720px);
  padding: 36px;
  text-align: center;
}
.atlas-musical .am-detail-loading strong { font-family: var(--am-display); font-size: clamp(1.4rem, 3vw, 2.3rem); margin-top: 18px; }
.atlas-musical .am-detail-loading p { color: var(--am-muted); }

.atlas-musical .am-footer {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.atlas-musical .am-footer nav {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.atlas-musical .am-footer a,
.atlas-musical .am-footer-action {
  color: var(--am-ink) !important;
  font-size: .72rem;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.atlas-musical .am-footer-action {
  background: transparent !important;
  border: 0 !important;
  min-height: 34px;
  padding: 4px 0 !important;
}

/* Progressive, server-rendered fallback. */
.am-server-fallback {
  background: #fbf8f0;
  color: #1b1a16;
  margin: 0 auto;
  max-width: 1500px;
  padding: clamp(24px, 4vw, 64px);
}
.am-server-notice { background: #f0eadc; border-left: 5px solid #9d2449; padding: 14px 18px; }
.am-server-filters { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(180px, 2fr) minmax(160px, 1fr) auto; margin: 24px 0; }
.am-server-filters label { display: grid; font-weight: 700; gap: 6px; }
.am-server-filters input,
.am-server-filters select,
.am-server-filters button { font: inherit; min-height: 46px; padding: 8px 12px; }
.am-server-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-server-grid article { border: 1px solid #d6d0c4; border-radius: 14px; padding: 18px; }
.am-server-grid h2 { font-size: 1.25rem; }
.am-server-grid p { line-height: 1.6; }
.am-server-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.am-server-pagination a { border: 1px solid #444; border-radius: 7px; min-width: 42px; padding: 8px; text-align: center; }
.am-server-pagination a[aria-current="page"] { background: #1b1a16; color: #fff; }
.am-server-fiche { max-width: 850px; }
.am-server-fiche p,
.am-server-fiche li { line-height: 1.7; }
.am-server-periods { border-block: 1px solid #d6d0c4; margin: 28px 0; padding: 20px 0; }

.atlas-musical-info-page {
  margin: 0 auto;
  max-width: 900px;
  padding: clamp(24px, 5vw, 72px) 20px;
}
.atlas-musical-info-page p,
.atlas-musical-info-page li { line-height: 1.75; }

@media (max-width: 700px) {
  .atlas-musical .am-primary-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible !important;
  }
  .atlas-musical .am-primary-nav .am-nav-secondary { display: none !important; }
  .atlas-musical .am-primary-nav .am-nav-more { display: grid !important; }
  .atlas-musical .am-primary-nav button {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .atlas-musical .am-more-menu {
    background: color-mix(in srgb, var(--am-surface-solid) 96%, transparent);
    border: 1px solid var(--am-line-strong);
    border-radius: 20px;
    bottom: calc(max(9px, env(safe-area-inset-bottom)) + 75px);
    box-shadow: 0 24px 70px rgba(18,17,13,.28);
    display: grid;
    gap: 4px;
    left: 12px;
    padding: 8px;
    position: fixed;
    right: 12px;
    z-index: 99991;
  }
  .atlas-musical .am-more-menu button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 13px;
    color: var(--am-ink) !important;
    display: grid;
    gap: 12px;
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 58px;
    padding: 8px 12px;
    text-align: left;
  }
  .atlas-musical .am-more-menu button:hover,
  .atlas-musical .am-more-menu button:focus-visible,
  .atlas-musical .am-more-menu button.is-active {
    background: color-mix(in srgb, var(--am-ink) 8%, transparent) !important;
  }
  .atlas-musical .am-more-menu button > span:first-child { font-size: 1.35rem; text-align: center; }
  .atlas-musical .am-more-menu button > span:last-child { display: grid; gap: 2px; }
  .atlas-musical .am-more-menu small { color: var(--am-muted); }
  .atlas-musical .am-footer { grid-template-columns: 1fr; }
  .atlas-musical .am-footer nav { align-items: flex-start; }
  .atlas-musical .am-drawer-title {
    background: linear-gradient(to top, rgba(8,8,7,.96) 0%, rgba(8,8,7,.78) 55%, rgba(8,8,7,.18) 100%) !important;
  }
  .am-server-filters { grid-template-columns: 1fr; }
  .am-server-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .atlas-musical .am-primary-nav { left: 5px; max-width: calc(100vw - 10px); right: 5px; }
  .atlas-musical .am-primary-nav button { font-size: .56rem; padding-inline: 3px; }
  .atlas-musical .am-nav-icon { font-size: 1rem !important; }
}

@media (prefers-contrast: more) {
  .atlas-musical .am-card-region,
  .atlas-musical .am-detail-image-placeholder small { background: #000 !important; border-color: #fff !important; color: #fff !important; }
  .atlas-musical .am-card-visual.has-image::before { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.92)) !important; }
  .atlas-musical .am-more-menu,
  .atlas-musical .am-media-alternative { border-width: 2px; }
}

@media print {
  .atlas-musical .am-more-menu,
  .atlas-musical .am-nav-more,
  .atlas-musical .am-footer-action { display: none !important; }
}

.atlas-musical .am-error-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* 3.0.1 — focus et contraste des niveaux de lecture. */
.atlas-musical .am-reading-tabs button:focus-visible {
  outline: 3px solid var(--am-focus, #005fcc) !important;
  outline-offset: 3px !important;
}
@media (prefers-contrast: more) {
  .am-reading-levels,
  .am-listening-questions,
  .am-trust-badge { border-width: 2px !important; }
  .am-trust-badge { background: rgba(0,0,0,.72) !important; }
}