/* =============================================================
   OBSIDIAN WAX — GRILLE MOBILE DÉDIÉE
   Chargée uniquement ≤ 760px via <link media="(max-width:760px)">.
   Principe : le mobile a SA propre grille — une colonne, gouttière
   et rythme uniformes — et les composants s'y intègrent.
   Les !important sont assumés : cette couche PREND LA MAIN sur le
   CSS desktop, elle ne négocie pas avec lui.
   ============================================================= */

:root {
  --m-gutter: 20px;   /* gouttière latérale unique */
  --m-section: 52px;  /* rythme vertical entre sections */
  --m-gap: 24px;      /* espacement interne des blocs */
}

/* =====================================================
   1. LA GRILLE : tout est une colonne, même gouttière,
      même rythme. Aucune section ne décide seule.
   ===================================================== */
main { overflow-x: hidden; }

.home-hero {
  min-height: auto !important;
  padding: 96px var(--m-gutter) 48px !important;
}
.home-manifesto,
.home-section,
.home-sync,
.home-footer {
  padding: var(--m-section) var(--m-gutter) !important;
  margin: 0 !important;
}
body[data-scene] .home-section {
  padding: var(--m-section) var(--m-gutter) !important;
}
body[data-scene] .home-section:first-of-type {
  padding-top: 28px !important;
}

/* Toutes les grilles multi-colonnes deviennent la colonne unique */
.manifesto-grid,
.home-manifesto .manifesto-grid,
.liner-grid,
.sync-spread,
.founders-grid,
.artist-bio-grid,
.artist-bio-grid--reversed,
.artist-bio-grid--with-header,
.player-tracks,
.related-grid,
.roster-feature,
.home-feature,
.cat-feature {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--m-gap) !important;
}

/* L'image des sections bio reprend un ratio naturel (plus de stretch) */
.artist-bio-visual,
.artist-bio-visual--stretch {
  max-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4/5 !important;
  order: 0 !important;
}
.artist-bio-grid--reversed .artist-bio-visual--stretch { order: 0 !important; }
.artist-bio-grid--reversed .abg-text { order: 1 !important; }

/* Section heads : empilés, méta qui respire */
.section-head {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: var(--m-gap) !important;
}
.section-head .sh-meta { white-space: normal !important; }

/* =====================================================
   2. HEADER : sigle + artiste | MENU. Pas de lecteur
      sur mobile (radio = desktop).
   ===================================================== */
.vinyl-header {
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  padding: 10px 14px !important;
}
.vh-center { display: none !important; }
.vh-time, .vh-volume { display: none !important; }
.vh-pipe, .vh-color { display: none !important; }
.vh-left { gap: 10px !important; min-width: 0 !important; }
.vh-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vh-right { display: flex !important; justify-content: flex-end !important; }

/* =====================================================
   3. MENU plein écran : une colonne, rien ne déborde
   ===================================================== */
dialog.menu-overlay {
  padding: 16px var(--m-gutter) 20px !important;
}
.menu-link {
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  font-size: 30px !important;
  padding: 14px 0 !important;
}
.ml-num { font-size: 10px !important; }
.ml-meta { display: none !important; }
.menu-link:hover,
.menu-link[aria-current="page"] { padding-left: 8px !important; }
.menu-overlay-header { padding-bottom: 14px !important; }
.menu-overlay-footer {
  padding-top: 14px !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

/* =====================================================
   4. COMPOSANTS dans la colonne
   ===================================================== */
/* Hero artiste */
.ah-grid {
  grid-template-columns: 1fr !important;
  gap: var(--m-gap) !important;
}
.ah-name { font-size: clamp(64px, 22vw, 96px) !important; }
.ah-meta { flex-wrap: wrap !important; gap: 10px 18px !important; }

/* Plateformes fiche artiste : 3 colonnes compactes */
.plat-main {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.plat-card {
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 6px !important;
  text-align: center !important;
}
.plat-card .plat-name { font-size: 9px !important; letter-spacing: 0.12em !important; }
.plat-card svg { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }

/* CTA agrégation */
.links-cta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 22px 18px !important;
}
.links-cta .lc-arrow { align-self: flex-end !important; }

/* Player 3 morceaux */
.pt-content { padding: 12px 2px 0 !important; }
.pt-cover { max-width: 100% !important; }

/* Accordéon 10 morceaux */
.ar-track { grid-template-columns: 40px 1fr auto !important; gap: 10px !important; }
.ar-meta { grid-template-columns: 1fr auto !important; gap: 8px !important; }
.ar-meta .ar-num, .ar-meta .ar-jp { display: none !important; }

/* Modals */
.sm-panel, .sm-panel-wide {
  width: calc(100vw - 20px) !important;
  max-height: 88dvh !important;
}

/* Footer : une colonne */
.home-footer-grid {
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  margin-bottom: 28px !important;
  padding-bottom: 28px !important;
}
.hf-bottom {
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

/* Page agrégation ow001 */
.links-page { padding: 48px var(--m-gutter) 56px !important; }
.lp-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.lp-cell { padding: 14px 6px 12px !important; min-height: 104px !important; gap: 8px !important; }
.lp-cell-logo { width: 38px !important; height: 38px !important; }
.lp-cell-logo svg { width: 19px !important; height: 19px !important; }
.lp-cell-name { font-size: 10px !important; }
.lp-cell-tag { font-size: 7px !important; letter-spacing: 0.14em !important; }
.lp-artist { font-size: clamp(56px, 20vw, 80px) !important; }