/* ==============================================================
   Mon Multivers — médias de l'accueil : audio + YouTube
   Cartes audio, vidéo et légendes associées.
   ============================================================== */

/* =====================================================
   ======================= Audio =======================
   ===================================================== */

.audio-card {
  margin: 35px auto 0;
  max-width: 600px;
  padding: 18px;

  background: linear-gradient(
    135deg,
    #84e8f5 0%,
    #39e3fa 100%
  );

  border: 1.5px solid var(--accent);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);

  text-align: center;
}


.audio-card audio {
  width: 100%;
}

.audio-caption {
  margin-top: 12px;
  color: #505050;
  font-size: 1rem;
}

.spotify-card{
  max-width:600px;
  margin:30px auto;

  padding:20px;

  display:flex;
  gap:20px;
  align-items:center;

  background:#00eeffcc;

  border-radius:22px;

  box-shadow:
    0 10px 35px rgba(0,0,0,.25);
}
.spotify-card[hidden]{
    display:none;
}

.spotify-cover{
  width:180px;
  height:180px;

  object-fit:cover;

  border-radius:16px;

  flex-shrink:0;
}
@media (max-width: 768px) {

    .spotify-cover {
        width: 120px;
        height: 120px;
    }

}

.spotify-info{
  flex:1;
}

.spotify-title{
  color:white;
  font-size:1.3rem;
  font-weight:700;

  margin-bottom:15px;
}

.spotify-info audio{
  width:100%;
}
/* =====================================================
   =================== YouTube card ===================
   ===================================================== */

/* Titre */
#yt-caption {
  margin: 14px 0 0;
  text-align: center;

  font-weight: 300;
  font-size: clamp(0.90rem, 1.9vw, 1.15rem);
  color: #1c1f23;
  opacity: 0.7;
  letter-spacing: 0.05px;
}

.yt-card {
  margin: 1rem auto 0;
  max-width: min(1200px, 96vw);         /* plus généreux (desktop) */
  background: linear-gradient(135deg, #00eeffcc 0%, #91eaface 100%);
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

/* Cadre 16:9 strict via padding-bottom (référence YouTube) */
.yt-aspect {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;     /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

/* Tout enfant remplit le cadre 16:9 exactement */
/* Iframe player */
/* =====================================================
   =============== Fallback / mode « lite » ============
   ===================================================== */

/* 1) Supprime tout espace inline qui peut créer un "gap" (ligne fantôme) */
.yt-fallback {
  display: block;   /* pas de grid/flex ici -> pas d'alignements exotiques */
  line-height: 0;   /* tue l'espace de ligne */
  background: #000;            /* bandes propres si ratio != 16:9 */
}

/* 2) Lien qui porte l’image : occupe 100% de la zone */
.yt-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /* pour le bouton */
  line-height: 0;     /* tue l'espace de ligne */
  text-decoration: none;
  outline: none;
}

/* 3) Miniature : bloque l’alignement inline + centrage parfait */
.yt-fallback img {
  display: block;               /* évite l'alignement baseline */
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: contain;          /* par défaut : tout voir, pas de rognage */
  background: #000;
  transform: none;              /* nettoie tout scale résiduel */
}

/* 4) Bouton YouTube centré parfaitement (overlay) — NOUVEAU STYLE */
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Dimension responsive : mobile -> desktop */
  width: clamp(60px, 9vw, 96px);
  height: auto;

  display: inline-block;
  line-height: 0;
  pointer-events: none; /* l’ancre reçoit le clic */
  z-index: 2;
}

.yt-play-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Légère profondeur */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
}

/* Effet hover/focus sur l’ensemble du lien (scale léger) */
.yt-thumb-link:hover .yt-play-svg,
.yt-thumb-link:focus-visible .yt-play-svg {
  transform: scale(1.06);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* Accessibilité focus clavier sur le lien */
.yt-thumb-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,0,0,.5);
  border-radius: 12px;
}

/* 5) Mode "ciné" optionnel : rogne (cover) et léger zoom esthétique */
/* 6) Actions fallback (si l’iframe ne peut pas charger) */
.yt-fallback-actions {
  position: relative; z-index: 2;
  text-align: center;
  display: grid; gap: 10px; justify-items: center;
}
.yt-open {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--turq-a, #00d2ff), var(--turq-b, #3a7bd5));
  border: 1px solid rgba(255,255,255,.45);
  text-decoration: none;
}
.yt-note { color: #e2e8f0; font-size: .92rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* 7) Largeur un peu plus contenue à ~960px en écrans moyens (optionnel) */
@media (max-width: 1100px) {
  .yt-card { max-width: min(960px, 94vw); }
}


/* ========== YT RESCUE (force sizing et plein cadre) ========== */
/* Marge au dessus de Youtube */
#youtube-embed { margin-top: 35px; }

/* Le conteneur carte doit rester large, pas "timbre-poste" */
#youtube-embed,
.yt-card {
  display: block;
  max-width: min(1200px, 96vw);   /* plus généreux sur desktop */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Cadre 16:9 strict via padding technique */
.yt-aspect {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;         /* 16:9 */
  overflow: hidden;
  border-radius: 12px;                        /* optionnel: ton style */
  background: #000;
}

/* Tout ce qui est dedans doit remplir exactement la zone 16:9 */
/* Iframe : pas de contrainte max-... héritée */
.yt-aspect iframe {
  border: 0;
  max-width: none;
  max-height: none;
}

/* Fallback / miniature cliquable */
.yt-fallback,
.yt-thumb-link {
  display: block;
}

/* Miniature par défaut en contain (pas de rognage) */
.yt-fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transform: none; /* nettoie un éventuel scale(0.80) résiduel */
}

/* MODE COVER (ciné) activable via .yt-fit-cover sur .yt-card */
.yt-fit-cover .yt-fallback img {
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center;
}

/* Cadre encore plus large dès 1100px */
@media (min-width: 1100px) {
  #youtube-embed,
  .yt-card {
    max-width: min(600px, 92vw);
  }
}

/* Forcer le masquage du cadre YouTube quand l'attribut hidden est présent */
/* Confort mobile : bouton un peu plus grand sur écrans étroits */
@media (max-width: 520px) {
  .yt-play {
    width: clamp(64px, 18vw, 96px);
  }
}

/* Respect des préférences utilisateur (réduction d’animations) */
@media (prefers-reduced-motion: reduce) {
  .yt-play-svg {
    transition: none;
  }
}

/* (Option) Légère surcouche de contraste sur la vignette claire */
.yt-thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.10));
  z-index: 1; /* sous le bouton, au-dessus de l’image */
  pointer-events: none;
}

/* ==============================================================
   Mon Multivers — YouTube accueil, refonte aérienne V1.3.84
   Le média reste prioritaire : cadre léger, légende hors cadre.
   ============================================================== */

@property --yt-wave-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

#youtube-embed.yt-card {
  --yt-wave-angle: 0deg;
  position: relative;
  isolation: isolate;
  display: block;
  width: min(760px, 92vw);
  max-width: min(760px, 92vw);
  margin: 34px auto 0;
  padding: 8px;
  box-sizing: border-box;

  border: 2px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box,
    linear-gradient(105deg, var(--turq-a, #00d2ff), var(--turq-b, #3a7bd5)) border-box;

  box-shadow:
    0 16px 38px rgba(38, 96, 120, .10),
    0 0 28px rgba(0, 210, 255, .055);
}

/* Halo nuageux extrêmement léger, derrière le lecteur seulement. */
#youtube-embed.yt-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 7% -7%;
  pointer-events: none;
  border-radius: 32px;
  background:
    radial-gradient(circle at 24% 48%, rgba(0, 210, 255, .12), transparent 43%),
    radial-gradient(circle at 78% 48%, rgba(58, 123, 213, .09), transparent 46%);
  filter: blur(28px);
  opacity: .72;
}

@supports (background: conic-gradient(from 0deg, #000, #fff)) {
  #youtube-embed.yt-card:not([hidden]) {
    background:
      linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) padding-box,
      conic-gradient(
        from var(--yt-wave-angle),
        var(--turq-a, #00d2ff) 0deg,
        var(--turq-a, #00d2ff) 74deg,
        var(--turq-b, #3a7bd5) 130deg,
        var(--turq-a, #00d2ff) 180deg,
        var(--turq-a, #00d2ff) 246deg,
        var(--turq-b, #3a7bd5) 306deg,
        var(--turq-a, #00d2ff) 360deg
      ) border-box;
    animation: yt-color-wave 20s linear infinite;
  }
}

@keyframes yt-color-wave {
  to { --yt-wave-angle: 360deg; }
}

#youtube-embed .yt-aspect {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border-radius: 17px;
  background:
    linear-gradient(145deg, #eafcff 0%, #f7fdff 48%, #edf6ff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(77, 166, 190, .10),
    0 5px 18px rgba(35, 91, 111, .08);
}

#youtube-embed .yt-aspect > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#youtube-embed .yt-aspect iframe {
  display: block;
  border: 0;
  border-radius: inherit;
  max-width: none;
  max-height: none;
  background: #000;
}

#youtube-embed .yt-fallback {
  display: block;
  line-height: 0;
  background: #eef8fb;
}

#youtube-embed .yt-thumb-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  line-height: 0;
  text-decoration: none;
  background: #eaf6fa;
}

#youtube-embed .yt-thumb-link::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 33%, rgba(4, 32, 45, .09) 100%);
  transition: opacity .28s ease;
}

#youtube-embed .yt-fallback img,
#youtube-embed.yt-fit-cover .yt-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #eaf6fa;
  transform: none;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}

#youtube-embed .yt-thumb-link:hover img,
#youtube-embed .yt-thumb-link:focus-visible img {
  transform: scale(1.018);
  filter: saturate(1.035) contrast(1.015);
}

/* Bouton de lecture : verre clair, l'identité YouTube reste seulement au centre. */
#youtube-embed .yt-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(68px, 8vw, 82px);
  height: clamp(68px, 8vw, 82px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.76);
  background: rgba(255,255,255,.78);
  box-shadow:
    0 13px 34px rgba(13, 53, 68, .20),
    inset 0 1px 0 rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(13px) saturate(125%);
  backdrop-filter: blur(13px) saturate(125%);
  pointer-events: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

#youtube-embed .yt-play-svg {
  display: block;
  width: 43px;
  height: auto;
  filter: drop-shadow(0 3px 7px rgba(108, 22, 22, .14));
  transition: none;
}

#youtube-embed .yt-thumb-link:hover .yt-play,
#youtube-embed .yt-thumb-link:focus-visible .yt-play {
  transform: translate(-50%, -50%) scale(1.055);
  background: rgba(255,255,255,.91);
  box-shadow:
    0 16px 38px rgba(13, 53, 68, .23),
    inset 0 1px 0 rgba(255,255,255,1);
}

#youtube-embed .yt-thumb-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(0, 210, 255, .70);
  border-radius: 17px;
}

/* La légende vit hors du cadre : information secondaire, pas une carte. */
#yt-caption.yt-caption-outside {
  position: relative;
  width: min(680px, 86vw);
  max-width: min(680px, 86vw);
  margin: 11px auto 0;
  padding: 9px 12px 0;
  text-align: center;
  color: rgba(34, 61, 72, .68);
  font-size: clamp(.88rem, 1.25vw, .98rem);
  font-weight: 430;
  line-height: 1.48;
  letter-spacing: .008em;
  opacity: 1;
}

#yt-caption.yt-caption-outside::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--turq-a, #00d2ff), var(--turq-b, #3a7bd5));
  opacity: .48;
}

#youtube-embed.is-playing .yt-aspect {
  box-shadow:
    inset 0 0 0 1px rgba(77, 166, 190, .08),
    0 6px 20px rgba(35, 91, 111, .09);
}

/* Fallback si l'intégration iframe est bloquée. */
#youtube-embed .yt-fallback-error {
  display: grid;
  place-items: center;
  padding: 26px;
  line-height: 1.45;
  text-align: center;
  background:
    linear-gradient(rgba(14, 37, 49, .42), rgba(14, 37, 49, .54)),
    var(--yt-fallback-image, none) center / cover no-repeat,
    #dff5f8;
}

#youtube-embed .yt-fallback-actions {
  position: static;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff;
}

#youtube-embed .yt-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.90);
  color: #164e63;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(3, 27, 38, .15);
}

#youtube-embed .yt-note {
  max-width: 420px;
  color: rgba(255,255,255,.92);
  font-size: .88rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.32);
}

#youtube-embed[hidden] {
  display: none;
}

@media (max-width: 900px) {
  #youtube-embed.yt-card {
    width: min(720px, 94vw);
    max-width: min(720px, 94vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  #youtube-embed.yt-card:not([hidden]) {
    animation: none;
  }

  #youtube-embed .yt-fallback img,
  #youtube-embed .yt-play {
    transition: none;
  }
}


/* ==============================================================
   Cartouche titre YouTube — version plus élégante / accueil
   ============================================================== */
#yt-caption.yt-caption-outside {
  position: relative;
  width: fit-content;
  max-width: min(760px, 90vw);
  margin: 14px auto 0;
  padding: 14px 22px 13px;
  text-align: center;
  color: rgba(31, 68, 80, .90);
  font-size: clamp(.94rem, 1.2vw, 1.06rem);
  font-weight: 560;
  line-height: 1.52;
  letter-spacing: .008em;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,252,255,.82));
  border: 1px solid rgba(74, 177, 201, .22);
  box-shadow:
    0 10px 26px rgba(64, 149, 172, .10),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  overflow: visible;
}

#yt-caption.yt-caption-outside::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(0, 210, 255, .50),
    rgba(87, 225, 255, .24),
    rgba(58, 123, 213, .40)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .90;
  pointer-events: none;
}

#yt-caption.yt-caption-outside::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 44px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at center,
    rgba(0, 210, 255, .45) 0%,
    rgba(0, 210, 255, .18) 42%,
    transparent 78%);
  filter: blur(3px);
  pointer-events: none;
}

#yt-caption.yt-caption-outside:empty,
#yt-caption.yt-caption-outside[hidden] {
  display: none;
}



/* ==============================================================
   Correctif cartouche YouTube — sans halo central ni artefact latéral
   ============================================================== */
#yt-caption.yt-caption-outside {
  border: 1px solid rgba(50, 182, 205, .26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.91), rgba(246,252,255,.84)) padding-box,
    linear-gradient(115deg,
      rgba(0,210,255,.46),
      rgba(100,222,236,.22),
      rgba(58,123,213,.34)
    ) border-box;
  box-shadow:
    0 10px 26px rgba(64,149,172,.085),
    inset 0 1px 0 rgba(255,255,255,.94);
  overflow: hidden;
}

#yt-caption.yt-caption-outside::before,
#yt-caption.yt-caption-outside::after {
  content: none;
  display: none;
}


/* ==============================================================
   Audio accueil — refonte lumineuse / moderne
   ============================================================== */
@property --audio-wave-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#audio-player-card.spotify-card {
  --audio-wave-angle: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: min(860px, 94vw);
  max-width: min(860px, 94vw);
  margin: 30px auto 0;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(248,253,255,.92)) padding-box,
    linear-gradient(110deg, var(--turq-a, #00d2ff), rgba(87, 225, 255, .65), var(--turq-b, #3a7bd5)) border-box;
  box-shadow:
    0 18px 42px rgba(72, 153, 179, .14),
    0 2px 10px rgba(72, 153, 179, .08),
    inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}

@supports (background: conic-gradient(from 0deg, red, blue)) {
  #audio-player-card.spotify-card {
    background:
      linear-gradient(rgba(255,255,255,.94), rgba(248,253,255,.92)) padding-box,
      conic-gradient(
        from var(--audio-wave-angle),
        rgba(0, 210, 255, .90),
        rgba(83, 225, 255, .58),
        rgba(58, 123, 213, .82),
        rgba(83, 225, 255, .60),
        rgba(0, 210, 255, .90)
      ) border-box;
    animation: mm-audio-border-wave 24s linear infinite;
  }
}

@keyframes mm-audio-border-wave {
  to { --audio-wave-angle: 360deg; }
}

#audio-player-card.spotify-card::before {
  content: '';
  position: absolute;
  inset: auto 8% -24px 8%;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0,210,255,.18), rgba(58,123,213,.08) 46%, transparent 74%);
  filter: blur(22px);
  pointer-events: none;
}

#audio-player-card.spotify-card[hidden] {
  display: none;
}

#audio-player-card .spotify-cover {
  position: relative;
  z-index: 1;
  width: 148px;
  height: 148px;
  display: block;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(111, 196, 219, .22);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,250,252,.96));
  box-shadow:
    0 12px 28px rgba(72, 153, 179, .16),
    inset 0 1px 0 rgba(255,255,255,.95);
}

#audio-player-card .spotify-info {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 12px;
  align-items: center;
}

#audio-player-card .spotify-title {
  margin: 0;
  color: rgba(28, 65, 78, .90);
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  font-weight: 620;
  line-height: 1.42;
  letter-spacing: .01em;
  text-wrap: balance;
}

#audio-player-card .spotify-title:empty {
  display: none;
}

#audio-player-card .spotify-info audio,
#audio-player-card .audio-card audio,
#audio-player {
  display: block;
  width: 100%;
  min-width: 0;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,250,252,.96));
  accent-color: #14b8c4;
  box-shadow:
    0 10px 22px rgba(72, 153, 179, .10),
    inset 0 1px 0 rgba(255,255,255,.98);
}

#audio-player:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 210, 255, .22),
    0 10px 22px rgba(72, 153, 179, .10),
    inset 0 1px 0 rgba(255,255,255,.98);
}

#audio-player::-webkit-media-controls-enclosure {
  border-radius: 18px;
  background: transparent;
}

#audio-player::-webkit-media-controls-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,250,252,.96));
}

#audio-player::-webkit-media-controls-current-time-display,
#audio-player::-webkit-media-controls-time-remaining-display,
#audio-player::-webkit-media-controls-timeline,
#audio-player::-webkit-media-controls-mute-button,
#audio-player::-webkit-media-controls-volume-slider,
#audio-player::-webkit-media-controls-play-button {
  filter: saturate(1.02);
}

#audio-player-card.no-cover {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  width: min(720px, 92vw);
  max-width: min(720px, 92vw);
}

#audio-player-card.no-cover .spotify-info {
  width: min(100%, 620px);
}

#audio-player-card.no-cover .spotify-title {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #audio-player-card.spotify-card {
    animation: none;
  }
}



/* ==============================================================
   Audio accueil — métadonnées élégantes
   ============================================================== */
#audio-player-card .spotify-title {
  display: grid;
  gap: 10px;
}

#audio-player-card .audio-heading-wrap {
  display: grid;
  gap: 4px;
}

#audio-player-card .audio-heading {
  margin: 0;
  color: rgba(22, 65, 78, .95);
  font-size: clamp(1.08rem, 1.36vw, 1.24rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: .01em;
  text-wrap: balance;
}

#audio-player-card .audio-note {
  margin: 0;
  color: rgba(59, 102, 116, .82);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.42;
}

#audio-player-card .audio-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: stretch;
}

#audio-player-card .audio-meta-pill {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(243,251,253,.92));
  border: 1px solid rgba(104, 196, 215, .24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 14px rgba(92, 173, 194, .08);
}

#audio-player-card .audio-meta-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(189, 244, 251, .82), rgba(214, 247, 250, .55));
  color: #1597aa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

#audio-player-card .audio-meta-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

#audio-player-card .audio-meta-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#audio-player-card .audio-meta-label {
  display: block;
  color: rgba(78, 118, 128, .82);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#audio-player-card .audio-meta-value {
  display: block;
  min-width: 0;
  color: rgba(22, 65, 78, .96);
  font-size: .95rem;
  font-weight: 620;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#audio-player-card.no-cover .audio-heading-wrap,
#audio-player-card.no-cover .audio-meta-grid {
  justify-content: center;
}

#audio-player-card.no-cover .audio-meta-grid {
  justify-content: center;
}

/* Priorités intentionnelles : l’attribut hidden doit toujours masquer le média. */
.spotify-card[hidden],
#youtube-embed[hidden],
#yt-caption.yt-caption-outside:empty,
#yt-caption.yt-caption-outside[hidden],
#audio-player-card.spotify-card[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #youtube-embed.yt-card:not([hidden]),
  #audio-player-card.spotify-card { animation: none !important; }
  #youtube-embed .yt-fallback img,
  #youtube-embed .yt-play { transition: none !important; }
}