/* audiotheque.css — Hodari › Audiothèque
   ============================================================================
   Jetons (couleurs, polices) : shared.css. Recherche, menus déroulants et
   pagination : style.css (mêmes classes que le parolier). Thème sombre : classe
   body.yk-dark, posée par hodari/js/audiotheque.js (même réglage « yk-theme » que le
   parolier). Préfixe « au- » : jamais « ad- » (masqué par les bloqueurs de pub). */

body.au-page { background: var(--surface); }
body.au-page.yk-dark { background: var(--yk-dk-bg); }

.au-main {
  flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto;
  padding: 1rem 0.9rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.au-main button, .au-main a, .au-main input { font-family: inherit; }
.au-main button:focus-visible, .au-main a:focus-visible, .au-main input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Entrée animée des onglets : « Tous les chants » arrive par la droite, « Albums » par la gauche. */
@keyframes au-from-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes au-from-left  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes au-fade       { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.au-pane { display: flex; flex-direction: column; gap: 0.8rem; }
.au-in-right { animation: au-from-right 0.28s ease; }
.au-in-left  { animation: au-from-left 0.28s ease; }
.au-in-fade  { animation: au-fade 0.22s ease; }
@media (prefers-reduced-motion: reduce) { .au-in-right, .au-in-left, .au-in-fade { animation: none; } }

/* ── J'écoute sur : pastilles de plateformes ── */
.au-pf { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.85rem; color: var(--yk-text-2); }   /* sans cadre, juste la place nécessaire, centré */
.au-dots { display: flex; gap: 0.5rem; }
.au-dot { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); background: var(--white); cursor: pointer; padding: 0; transition: none; }
.au-dot:hover { border-color: var(--yk-hl); }
.au-dot[aria-pressed="true"] { border-color: var(--border); }   /* choisie : pas de cercle épais, ce sont les autres qui s'estompent */
.au-dots.sel .au-dot:not([aria-pressed="true"]) .au-pi { filter: brightness(0); opacity: 0.28; transition: none; }   /* non choisies : même gris uniforme (logo monochrome estompé) ; couleurs au survol */
.au-dots.sel .au-dot:not([aria-pressed="true"]):hover .au-pi { filter: none; opacity: 1; }
.au-pfsep { width: 1px; height: 1.5rem; background: var(--navy); opacity: 0.55; margin: 0 0.1rem; }
body.yk-dark .au-pfsep { background: var(--yk-w40); opacity: 1; }
.au-louvt { display: none; cursor: pointer; }
@media (min-width: 721px) { .au-louvt { display: inline; } }
/* Pastille Louvetisme à trois états : Tout le catalogue (neutre) · Louvetisme (jaune) · Sans louvetisme (gris, barré rouge) */
.au-louv { position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; padding: 0; cursor: pointer; transition: none; background: var(--white); color: var(--yk-black); box-sizing: border-box; aspect-ratio: 1; }
.au-louv[data-s="all"] svg { opacity: 0.28; }   /* comme une plateforme non choisie : picto gris uniforme */
.au-louv svg { width: 1.05rem; height: 1.05rem; display: block; }
.au-louv, .au-pfsep { flex: 0 0 auto; }   /* jamais écrasés par la ligne flex : la pastille reste un rond, le picto centré */
.au-louv[data-s="only"] { border-color: var(--yk-louv); background: var(--yk-louv); color: var(--yk-louv-ink); }
.au-louv[data-s="none"] { border-color: var(--lavender2); background: var(--yk-fill); color: var(--yk-dk-line); }
.au-louv[data-s="none"]::after { content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: 2.5px; background: var(--yk-louv-none); border-radius: 2px; transform: rotate(-42deg); }
.au-louv:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.au-louv:hover, .au-louv:has(+ .au-louvt:hover) { border-color: var(--yk-hl); }   /* aussi quand c'est le texte voisin qui est survolé */   /* survol : cercle rouge (jaune en sombre), comme les pastilles « J'écoute sur » */
body.yk-dark .au-louv[data-s="all"] { background: var(--yk-dk-card2); border-color: var(--yk-w15); color: var(--white); }
body.yk-dark .au-louv[data-s="all"] svg { opacity: 0.4; }
body.yk-dark .au-louv[data-s="none"] { color: var(--yk-dk-muted); }
@media (max-width: 480px) { .au-louv { width: 1.95rem; height: 1.95rem; } }
.au-pi { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.au-pi svg { width: 100%; height: 100%; }
.au-dot .au-pi { width: 1.1rem; height: 1.1rem; }
@media (max-width: 480px) { .au-dots { gap: 0.3rem; } .au-dot { width: 1.95rem; height: 1.95rem; } .au-pf { gap: 0.45rem; font-size: 0.8rem; } }

/* ── Pochettes ── */
.au-cov { display: grid; place-items: end start; padding: 0.45rem; position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 1; color: var(--yk-w90); font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; line-height: 1.1; background-size: cover; background-position: center; }
.au-cov.gen::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -22%; top: -22%; background: var(--yk-w15); }
.au-cov.has-img.gen::after { display: none; }
.au-cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
@media (hover: hover) { .au-alb:hover .au-cov img { transform: scale(1.07); } }
.au-cov span { position: relative; }
.au-cov.has-img span { visibility: hidden; }
.au-cov.dflt { background: var(--yk-cover-dflt); }
.g0 { background-image: linear-gradient(140deg, var(--yk-gen0-a), var(--yk-gen0-b)); }
.g1 { background-image: linear-gradient(140deg, var(--c-audio), var(--yk-gen1-b)); }
.g2 { background-image: linear-gradient(140deg, var(--c-langue), var(--yk-gen2-b)); }
.g3 { background-image: linear-gradient(140deg, var(--yk-gen3-a), var(--yk-gen3-b)); }
.g4 { background-image: linear-gradient(140deg, var(--yk-gen4-a), var(--yk-brown-2)); }

/* ── Grille d'albums ── */
.au-h { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text-3); margin: 0.5rem 0 0; }
.au-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0.8rem; align-items: start; }
.au-alb { background: none; border: 0; text-align: left; padding: 0; cursor: pointer; color: var(--yk-ink); min-width: 0; display: flex; flex-direction: column; }
.au-alb .au-cov { width: 100%; margin-bottom: 0.4rem; }
/* Ligne secondaire juste sous le titre ; une rangée commence sous la carte la plus haute de la précédente. */
.au-alb b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; line-height: 1.25; }
.au-alb small { font-size: 0.7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
.au-where { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; justify-content: center; padding: 0.6rem 0 0.2rem; color: var(--yk-text-2); font-size: 0.78rem; }
.au-where a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-2); text-decoration: none; font-weight: 600; padding: 0.2rem 0.4rem; border-radius: 6px; }
.au-where a:hover { background: var(--white); color: var(--navy); }

/* ── Recherche (même rendu que le parolier) ── */
.au-search-wrap { position: relative; }
.au-search-wrap .search-input { padding-right: 2.6rem; }
/* Sélection : même rendu que le parolier (bordure + halo de .search-input:focus), sans le contour des autres champs de la page */
.au-main .au-search-wrap .search-input:focus-visible { outline: none; }
.au-search-clear { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 0.9rem; padding: 4px; z-index: 2; }
.au-search-clear:hover { color: var(--navy); }
.au-search-clear[hidden] { display: none; }

/* ── Menus déroulants (classes de style.css) ── */
.au-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 480px) { .au-filters { grid-template-columns: 1fr; } }
.dropdown-filter-item .au-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text-3); flex-shrink: 0; box-sizing: border-box; }
.dropdown-filter-item .au-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--text-3); flex-shrink: 0; box-sizing: border-box; display: grid; place-items: center; }
.dropdown-filter-item.checked .au-check { border-color: var(--accent); background: var(--accent); }
.dropdown-filter-item.checked .au-check::after { content: ''; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
body.yk-dark .dropdown-filter-item .au-check { border-color: var(--yk-dk-line); }
body.yk-dark .dropdown-filter-item.checked .au-check { border-color: var(--accent); }
body.yk-dark .dropdown-filter-item.checked .au-check::after { border-color: var(--yk-brown); }   /* V foncé sur fond jaune, comme les cases du parolier */
.dropdown-filter-item.checked .au-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 38%, transparent 42%); }
.dropdown-filter-item .au-n { color: var(--yk-muted); font-size: 0.72rem; }
.au-sp, .dropdown-filter-item.au-sp .au-opt { font-style: italic; }
.au-count { font-size: 0.78rem; color: var(--text-3); }
.au-empty { text-align: center; color: var(--yk-muted); padding: 2rem 0; }

/* ── Liste de chants ── */
.au-rows { display: flex; flex-direction: column; background: var(--yk-surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.au-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.au-row:last-child { border-bottom: 0; }
.au-row .n { width: 1.3rem; text-align: left; font-size: 0.75rem; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.au-play { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--navy); color: var(--white); text-decoration: none; }
.au-play svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) { .au-play:hover { background: var(--navy-light); } }
.au-row .t { flex: 1; min-width: 0; }
.au-title { display: block; font-size: 0.86rem; font-weight: 700; line-height: 1.25; color: var(--text); text-decoration: none; }
.au-title:hover { color: var(--navy); text-decoration: underline; }
.au-row .t > span { display: block; font-size: 0.72rem; color: var(--text-3); }
.au-acts { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-left: auto; }
.au-b { border: 1px solid var(--border); background: var(--yk-surface-2); color: var(--yk-ink-navy); border-radius: 20px; font-size: 0.72rem; font-weight: 700; padding: 0.38rem 0.65rem; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.au-b:hover { border-color: var(--yk-hl); }
/* Pastille « ouvrir sur… » : ronde (casque tant qu'aucune plateforme n'est choisie). */
.au-rd { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--border); background: var(--yk-surface-2); font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0; }
.au-rd:hover { border-color: var(--yk-hl); }
.au-rd .au-pi { width: 1.05rem; height: 1.05rem; }

/* ── Page d'un album ── */
.au-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.25rem; background: var(--yk-btn); color: var(--white); border: 0; border-radius: 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 0.5rem 1rem 0.5rem 0.6rem; }
.au-chev { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.au-back:hover { background: var(--navy-light); }
.au-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; }
.au-head .au-cov { width: 7.5rem; flex-shrink: 0; border-radius: 12px; }
.au-head h2 { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.15; margin: 0 0 0.25rem; color: var(--yk-ink); }
.au-head p { margin: 0; font-size: 0.78rem; color: var(--yk-text-2); }
.au-alb-view { display: flex; flex-direction: column; gap: 1rem; }
.au-side { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.au-big { width: 100%; white-space: nowrap; font-size: clamp(0.74rem, 3.9vw, 0.9rem); border: 0; border-radius: 10px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 0.9rem; padding: 0.7rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 0.6rem; text-decoration: none; }
.au-big:hover { text-decoration: none; filter: brightness(1.08); }
.au-big .au-pi { width: 1.7rem; height: 1.7rem; }
.au-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; }
.au-plats a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 600; color: var(--text-2); text-decoration: none; }
.au-plats a:hover { color: var(--navy); }
@media (max-width: 720px) { .au-plats { display: none; } }   /* écran étroit : le bouton et sa fenêtre suffisent */

/* ── Feuille de choix de plateforme ── */
@keyframes au-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes au-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.au-scrim { position: fixed; inset: 0; background: var(--yk-veil50); z-index: 600; display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; touch-action: none; }
.au-sheet { background: var(--yk-surface); color: var(--yk-ink); width: 100%; max-width: 480px; border-radius: 18px 18px 0 0; padding: 0.7rem 0.9rem 1rem; max-height: 85vh; overflow-y: auto; animation: au-sheet-up 0.22s ease; touch-action: pan-y; overscroll-behavior: contain; }
.au-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 0.6rem; }
.au-sheet h4 { font-family: var(--font-serif); font-size: 1.02rem; margin: 0; line-height: 1.2; }
.au-sheet .sub { font-size: 0.76rem; color: var(--text-3); margin: 0.15rem 0 0.6rem; }
.au-pl { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; margin-bottom: 0.45rem; border: 1px solid var(--border); border-radius: 10px; background: var(--yk-surface); font-size: 0.9rem; font-weight: 600; color: var(--yk-ink); cursor: pointer; text-align: left; }
.au-pl .au-pi { width: 1.5rem; height: 1.5rem; }
.au-pl i { margin-left: auto; font-style: normal; color: var(--text-3); font-size: 0.72rem; font-weight: 500; }
.au-pl:hover:not([disabled]) { border-color: var(--yk-hl); }
.au-pl[disabled] { opacity: 0.4; cursor: default; }

/* Verrou de défilement quand une fenêtre est ouverte (comme .yk-sheet-lock du parolier). */
/* Seul le body est verrouillé (comme le parolier) : un overflow sur <html> casserait le position:sticky de la topbar et des onglets. */
body.au-lock { overflow: hidden; overscroll-behavior: none; }
html.au-lock { overscroll-behavior: none; }

/* ── Paroles : fiche du parolier par-dessus l'audiothèque ── */
.au-lyr { position: fixed; inset: 0; z-index: 650; visibility: hidden; pointer-events: none; }
.au-lyr.open { visibility: visible; pointer-events: auto; background: var(--yk-veil50); }
.au-lyr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; opacity: 0; }
.au-lyr.ready iframe { opacity: 1; }

/* ── Ordinateur ── */
@media (min-width: 721px) {
  .au-main { padding: 1.6rem 2rem 2.4rem; gap: 1rem; }
  .au-pane { gap: 1rem; }
  .au-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
  .au-alb b { font-size: 0.86rem; }
  .au-alb-view { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.8rem; align-items: start; }
  .au-alb-view .au-head { flex-direction: column; align-items: stretch; }
  .au-alb-view .au-head .au-cov { width: 100%; }
  .au-scrim { align-items: center; }
  .au-sheet { border-radius: 16px; animation: au-pop 0.16s ease; }
  .au-grab { display: none; }        /* pas de languette sur une fenêtre centrée */
}

/* Interrupteur de thème de la barre du haut (même rendu que le parolier) */
.yk-theme-toggle { flex-shrink: 0; background: none; border: 1px solid var(--yk-w22); border-radius: 50%; width: 30px; height: 30px; color: var(--yk-w90); cursor: pointer; font-size: 0.95rem; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.yk-theme-toggle:hover { color: var(--white); border-color: var(--yk-w55); background: var(--yk-w08); }

/* ── Thème sombre ── */
body.yk-dark .au-rows { color: var(--yk-dk-text); border-color: var(--yk-w15); }
body.yk-dark .au-sheet, body.yk-dark .au-pl { border-color: var(--yk-w15); }
body.yk-dark .au-title { color: var(--yk-dk-text); }
body.yk-dark .au-dot { background: var(--yk-dk-card2); border-color: var(--yk-w15); }
body.yk-dark .au-dot[aria-pressed="true"] { border-color: var(--yk-w15); box-shadow: none; }
body.yk-dark .au-dots.sel .au-dot:not([aria-pressed="true"]) .au-pi { filter: brightness(0) invert(1); opacity: 0.4; }
body.yk-dark .au-dots.sel .au-dot:not([aria-pressed="true"]):hover .au-pi { filter: none; opacity: 1; }
body.yk-dark .au-b { border-color: var(--yk-w15); }
body.yk-dark .au-rd { color: var(--yk-dk-text); border-color: var(--yk-w15); }
body.yk-dark .au-play { background: var(--yk-dk-line); }
body.yk-dark .au-now .au-play { background: var(--yk-yellow); color: var(--yk-brown); }   /* chant en cours : jaune aussi en sombre (la règle de base ci-dessus la masquait) */
/* survol en sombre : doit passer après les règles sombres ci-dessus (spécificité) */
body.yk-dark .au-dot:hover, body.yk-dark .au-b:hover, body.yk-dark .au-rd:hover, body.yk-dark .au-louv:hover, body.yk-dark .au-louv:has(+ .au-louvt:hover) { border-color: var(--yk-hl); }
@media (hover: hover) {
  body.yk-dark .au-play:hover, body.yk-dark .au-back:hover { background: var(--yk-dk-line-hi); }
  .au-now .au-play:hover, body.yk-dark .au-now .au-play:hover { background: var(--yk-yellow); filter: brightness(1.15); }   /* chant en cours : jaune un peu plus clair au survol (clair et sombre) */
}
/* Survol : le contour --navy (brun-rouge) disparaît sur le fond brun du mode sombre → contour jaune du thème */
/* « Ouvrir sur… » du lecteur agrandi : la pastille blanche passe au jaune du thème au survol (le blanc cassé d'avant ne se voyait pas) */
@media (hover: hover) { body.yk-dark .ykp-open:hover { background: var(--yk-yellow); color: var(--yk-dk-card); } }
body.yk-dark .au-where a:hover { background: var(--yk-w08); color: var(--white); }
body.yk-dark .au-plats a:hover { color: var(--white); }
body.yk-dark .au-where a, body.yk-dark .au-plats a { color: var(--yk-dk-title); }
body.yk-dark .au-row { border-bottom-color: var(--yk-w08); }
body.yk-dark .page-btn { background: var(--yk-dk-card); border-color: var(--yk-dk-card2); color: var(--yk-dk-text); }
body.yk-dark .pagination span { color: var(--yk-dk-muted) !important; }
body.yk-dark .dropdown-filter-trigger, body.yk-dark .dropdown-filter-panel { background: var(--yk-dk-card); border-color: var(--yk-dk-card2); }
body.yk-dark .dropdown-filter-search { background: var(--yk-dk-bg); color: var(--yk-dk-text); border-bottom-color: var(--yk-dk-card2); }
body.yk-dark .dropdown-filter-item { color: var(--yk-dk-text); border-color: var(--yk-dk-card2); }
body.yk-dark .dropdown-filter-item:hover { background: var(--yk-dk-card2); }
body.yk-dark .dropdown-filter-trigger .df-label { color: var(--yk-dk-muted); }
body.yk-dark .dropdown-filter-trigger .df-label.has-selection { color: var(--yk-dk-text); }

/* ── Onglets (.doc-nav de shared.css) en thème sombre ── */
body.yk-dark .doc-nav { background: var(--yk-dk-card); border-bottom-color: var(--yk-dk-card2); }
body.yk-dark .doc-nav::before { background: linear-gradient(to right, var(--yk-dk-card) 35%, var(--yk-dk-card-0)); }
body.yk-dark .doc-nav::after { background: linear-gradient(to left, var(--yk-dk-card) 35%, var(--yk-dk-card-0)); }
body.yk-dark .doc-nav a { color: var(--yk-dk-muted); }
body.yk-dark .doc-nav a.active { color: var(--white); box-shadow: inset 0 -2px 0 var(--yk-yellow); }
@media (hover: hover) { body.yk-dark .doc-nav a:hover { color: var(--white); } }
body.yk-dark .dropdown-filter-item .au-radio { border-color: var(--yk-dk-line); }

/* ── Balayage latéral : l'onglet voisin suit le doigt ── */
.au-main { touch-action: pan-y pinch-zoom; }
#au-view { position: relative; }
#au-view.au-swiping { overflow-x: clip; }
.au-ghost { position: absolute; left: 0; width: 100%; will-change: transform; }

/* ── Lecture dans la page : titre en cours, bouton « Lire l'album » ── */
.au-play .pz { display: none; }
.au-playing .au-play .pz { display: block; }
.au-playing .au-play .pl { display: none; }
.au-now .au-play { background: var(--yk-yellow); color: var(--yk-brown); }   /* chant ouvert dans le lecteur : jaune du logo (clair et sombre) */
.au-now .au-title { color: var(--accent); }
body.yk-dark .au-now .au-title { color: var(--yk-dk-title); }

/* ── Lecteur intégré (hodari/js/player.js) ── */

/* Pochette d'album : bouton ▶ translucide au centre (remplace « Lire l’album ») */
.au-covplay { position: relative; flex-shrink: 0; }
.au-head .au-covplay { width: 100%; }
.au-head .au-covplay .au-cov { width: 100%; }
.au-cp { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; padding: 0; border: 1.5px solid var(--yk-w55); border-radius: 50%; display: grid; place-items: center; background: var(--yk-veil50); color: var(--white); cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0.9; transition: opacity 0.18s, background 0.18s, transform 0.18s; }
.au-cp svg { width: 2rem; height: 2rem; }
.au-cp .pz { display: none; width: 26px; height: 26px; }
.au-covplay.au-playing .au-cp .pz { display: block; }
.au-covplay.au-playing .au-cp .pl { display: none; }
@media (hover: hover) {
  .au-cp { opacity: 0.7; }
  .au-covplay:hover .au-cp, .au-cp:focus-visible { opacity: 1; background: var(--yk-veil60); transform: scale(1.1); }
}
.au-cp:active { transform: scale(0.96); }
@media (max-width: 720px) { .au-alb-view .au-head .au-covplay { width: 100%; } .au-alb-view .au-head .au-covplay .au-cov { width: 100%; } }
.au-play .pz { width: 16px; height: 16px; }
/* Interprète et album cliquables */
.au-lk { cursor: pointer; text-decoration: none; border-radius: 3px; }
.au-lk:hover, .au-lk:focus-visible { text-decoration: underline; color: var(--accent); outline: none; }
body.yk-dark .au-lk:hover { color: var(--yk-dk-title); }

/* ── Lecteur intégré (hodari/js/player.js) ──
   Barre fixe, posée au-dessus du footer (bottom géré en JS). Le contenu de la page ne passe pas dessous. */
body.ykp-on .au-main { padding-bottom: calc(var(--ykp-h, 0px) + 1.8rem); }
html.ykp-full body > *:not(.topbar):not(.footer):not(.ykp):not(.ykp-fclone):not(#au-sheet):not(.au-lyr):not(script):not(style):not(link) { display: none !important; }
.ykp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; width: 100%; max-width: 100%; box-sizing: border-box; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--yk-dk-line) 100%); color: var(--white); box-shadow: 0 -6px 22px var(--yk-k30); animation: ykp-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.ykp.ykp-noin { animation: none; }
.ykp.ykp-out { animation: ykp-out 0.26s ease-in forwards; pointer-events: none; }
@keyframes ykp-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ykp-out { from { transform: none; } to { transform: translateY(100%); } }
.ykp-fclone { position: fixed !important; left: 0; right: 0; margin: 0 !important; z-index: 401; pointer-events: none; transition: top 0.34s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.ykp.ykp-anim { transition: top 0.34s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.ykp.ykp-full { box-shadow: none; overflow: hidden; }
.ykp.ykp-full.ykp-short { position: absolute; }   /* hauteur minimale atteinte : la vue défile avec la page */
@media (min-width: 721px) { .ykp.ykp-full.ykp-short { z-index: 250; } }
.ykp button, .ykp a, .ykp input { font-family: inherit; }
.ykp button:focus-visible, .ykp a:focus-visible, .ykp input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.ykp-video { position: absolute; z-index: 3; background: var(--yk-black); border-radius: 8px; overflow: hidden; left: 0; top: 0; width: 1px; height: 1px; }
.ykp-video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Barre réduite */
.ykp-mini { position: relative; z-index: 4; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; align-items: center; padding: 0.55rem 0.8rem calc(0.55rem + var(--ykp-safe, 0px)); transition: opacity 0.2s; }
.ykp-anim .ykp-mini, .ykp-full .ykp-mini { position: absolute; left: 0; right: 0; bottom: 0; }
.ykp-full .ykp-mini { opacity: 0; pointer-events: none; }
.ykp-cov { width: 5.1rem; height: 5.1rem; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--yk-dk-card2); cursor: pointer; display: block; }
.ykp-cov { position: relative; }
.ykp-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ykp-cov-x { position: absolute; inset: 0; display: grid; place-items: center; background: var(--yk-veil60); color: var(--white); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.ykp-cov-x svg { width: 1.7rem; height: 1.7rem; }
@media (hover: hover) { .ykp-cov:hover .ykp-cov-x, .ykp-cov:focus-visible .ykp-cov-x { opacity: 1; } }
.ykp-body { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.8rem; align-items: center; }
.ykp-info { grid-column: 1 / -1; min-width: 0; cursor: pointer; }
.ykp-title { display: block; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ykp-sub { display: block; font-size: 0.74rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ykp-sub a, .ykp-hsub a { color: var(--white); text-decoration: none; }
.ykp-sub a:hover, .ykp-hsub a:hover, .ykp-sub a:focus-visible, .ykp-hsub a:focus-visible { text-decoration: underline; }
.ykp-ctrl { display: flex; align-items: center; gap: 0.2rem; }
.ykp-b { width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.ykp-b svg { width: 20px; height: 20px; }
@media (hover: hover) { .ykp-b:hover:not(:disabled) { background: var(--yk-w15); } }
.ykp-b:disabled { opacity: 0.32; cursor: default; }
.ykp-b[aria-pressed="true"] { color: var(--yk-dk-title); background: var(--yk-title-20); }
.ykp-main { background: var(--white); color: var(--yk-brown); width: 2.7rem; height: 2.7rem; }
@media (hover: hover) { .ykp-main:hover:not(:disabled) { background: var(--surface); } }
.ykp-seek { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ykp-t { font-size: 0.72rem; font-variant-numeric: tabular-nums; opacity: 0.8; min-width: 2.2rem; text-align: center; }
.ykp-range { flex: 1; min-width: 0; height: 1.4rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ykp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--white) var(--p, 0%), var(--yk-w30) var(--p, 0%)); }
.ykp-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--yk-w30); }
.ykp-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--white); }
.ykp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--white); border: 0; }
.ykp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 0; }
.ykp-side { display: flex; }
.ykp-sm { width: 2rem; height: 2rem; }
.ykp-sm svg { width: 18px; height: 18px; }

.ykp-qlist { list-style: none; margin: 0; padding: 0; }
.ykp-qi { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.9rem; border: 0; background: transparent; color: var(--white); text-align: left; cursor: pointer; font: inherit; }
@media (hover: hover) { .ykp-qi:hover { background: var(--yk-w08); } }
.ykp-qi.on { background: var(--yk-title-20); }
.ykp-qi .n { width: 1.4rem; font-size: 0.72rem; opacity: 0.7; text-align: left; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ykp-qi .t { min-width: 0; display: block; }
.ykp-qi b { display: block; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ykp-qi small { display: block; font-size: 0.72rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Vue agrandie : topbar et footer conservés ; vidéo, commandes, pochette, informations/paroles ou file d'attente */
.ykp-fl { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.22s, visibility 0.22s; }
.ykp-full .ykp-fl { opacity: 1; visibility: visible; }
.ykp-fl-in { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0.5rem 1.4rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0.3rem 1.6rem; box-sizing: border-box; }
.ykp-fl-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.ykp-fl-l { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; min-height: 0; }
.ykp-vslot { width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border-radius: 10px; background: transparent; flex-shrink: 1; }
.ykp-ctrl-big { justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.ykp-ctrl-big .ykp-b { width: 2.6rem; height: 2.6rem; }
.ykp-ctrl-big .ykp-main { width: 3.3rem; height: 3.3rem; }
.ykp-ctrl-big .ykp-main svg { width: 24px; height: 24px; }
.ykp-fl-r { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; min-height: 0; }
.ykp-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.ykp-hcov { width: 5rem; height: 5rem; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--yk-dk-card2); }
.ykp-hinfo { min-width: 0; }
.ykp-htitle { margin: 0 0 0.2rem; font-family: var(--font-serif, Georgia, serif); font-size: 1.3rem; line-height: 1.15; }
.ykp-hsub { font-size: 0.85rem; opacity: 0.9; }
.ykp-hwhen { font-size: 0.85rem; opacity: 0.75; }
.ykp-tabs { display: flex; justify-content: center; gap: 0.2rem; border-bottom: 1px solid var(--yk-w22); }
.ykp-tabs button { padding: 0.5rem 1.1rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--yk-w75); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .ykp-tabs button:hover { color: var(--white); } }
.ykp-tabs button[aria-selected="true"] { color: var(--white); border-bottom-color: var(--yk-dk-title); }
.ykp-panel.ykp-in-r { animation: ykp-from-right 0.28s ease; }
.ykp-panel.ykp-in-l { animation: ykp-from-left 0.28s ease; }
@keyframes ykp-from-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes ykp-from-left  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.ykp-fl-btns { display: flex; gap: 0.2rem; margin-left: auto; }
.ykp-fl-top .ykp-b { width: 2.6rem; height: 2.6rem; }
.ykp-fl-top .ykp-b svg { width: 32px; height: 32px; }
.ykp-grab { display: none; }
.ykp-open { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.35rem 0.85rem 0.35rem 0.6rem; border: 1px solid var(--yk-w40); border-radius: 999px; background: var(--yk-w15); color: var(--white); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.ykp-open[hidden] { display: none; }
@media (hover: hover) { .ykp-open:hover { background: var(--yk-w22); } }
.ykp-open .au-pi { width: 1.1rem; height: 1.1rem; }
.ykp-panel { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; }
.ykp-nolyr { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; opacity: 0.8; background: var(--yk-w08); border-radius: 10px; }
.ykp-nolyr[hidden] { display: none; }
.ykp-queue { position: absolute; inset: 0; overflow: auto; background: var(--yk-w08); border-radius: 10px; }
.ykp-queue[hidden] { display: none; }
.ykp-lyr { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: var(--white); visibility: hidden; opacity: 0; transition: opacity 0.2s; }
.ykp-lyr.on { visibility: visible; opacity: 1; }
.ykp-lyr iframe { width: 100%; height: 100%; border: 0; display: block; color-scheme: normal; }
@media (prefers-reduced-motion: reduce) { .ykp, .ykp.ykp-anim, .ykp-mini, .ykp-fl, .ykp-lyr, .ykp-fclone, .ykp-panel { transition: none !important; animation: none !important; } }

/* Écran étroit */
@media (max-width: 720px) {
  .ykp-mini { padding: 0.6rem 0.8rem calc(0.95rem + var(--ykp-safe, 0px)); row-gap: 0.55rem; gap: 0.55rem 0.7rem; }
  .ykp-cov { width: 3.2rem; height: 3.2rem; grid-row: 1; }
  .ykp-body { display: contents; }
  .ykp-info { grid-column: 2; grid-row: 1; }
  .ykp-side { grid-column: 3; grid-row: 1; }
  .ykp-side .ykp-szb { display: none; }
  .ykp-mini .ykp-ctrl { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 1.1rem; }
  .ykp-mini .ykp-seek { display: none; }
  .ykp-mini .ykp-b { width: 3rem; height: 3rem; }
  .ykp-mini .ykp-b svg { width: 24px; height: 24px; }
  .ykp-mini .ykp-main { width: 3.7rem; height: 3.7rem; }
  .ykp-mini .ykp-main svg { width: 26px; height: 26px; }
  .ykp-mini .ykp-sec { width: 2.5rem; height: 2.5rem; }
  .ykp-mini .ykp-sec svg { width: 20px; height: 20px; }
  .ykp-mini .ykp-side .ykp-b { width: 2.2rem; height: 2.2rem; }
  .ykp-mini .ykp-side .ykp-b svg { width: 19px; height: 19px; }
  .ykp-fl { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .ykp-fl-in { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.2rem 0.9rem 1.2rem; height: auto; min-height: 100%; }
  /* Languette + bouton « Réduire » restent en haut de la vue agrandie quand on fait défiler (comme la fiche chant du parolier).
     Leur fond reprend le dégradé du lecteur (background-attachment: fixed, voir hodari.css) : aucune coupure visible. */
  .ykp-grab { display: flow-root; order: -2; position: sticky; top: 0; z-index: 7; }
  .ykp-grab::after { content: ''; display: block; width: 2.6rem; height: 4px; border-radius: 3px; background: var(--yk-w40); margin: 0.35rem auto 0.2rem; }
  .ykp-fl-top { order: -1; position: sticky; top: 0; z-index: 6; margin-top: calc(-1 * (0.35rem + 4px + 0.2rem)); }   /* même ligne que la languette : le chevron est tout en haut */
  .ykp-fl-top .ykp-b { width: 3.1rem; height: 3.1rem; }
  .ykp-fl-top .ykp-b svg { width: 38px; height: 38px; }
  .ykp-fl-r { display: contents; }
  .ykp-head { order: 1; }
  .ykp-fl-l { order: 2; }
  .ykp-tabs { order: 3; }
  .ykp-panel { order: 4; }
  .ykp-fl-l { flex: none; gap: 0.5rem; }
  .ykp-fl-l { align-items: center; }
  .ykp-fl-l > .ykp-seek, .ykp-fl-l > .ykp-ctrl { width: 100%; }
  .ykp-vslot { width: min(100%, calc(34vh * 16 / 9)); max-height: none; }
  .ykp-panel { flex: none; height: auto; min-height: 6rem; overflow: visible; }
  .ykp-lyr { position: relative; inset: auto; display: none; height: var(--lh, 18rem); visibility: visible; opacity: 1; }
  .ykp-lyr.on { display: block; }
  .ykp-queue { position: static; max-height: none; overflow: visible; }
  .ykp-nolyr { position: static; min-height: 6rem; }
  .ykp-hcov { width: 3.6rem; height: 3.6rem; }
  .ykp-htitle { font-size: 1.1rem; }
}

/* ── Lecteur : boutons « Ouvrir sur… » / YouTube côte à côte ── */
.ykp-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.ykp-acts .ykp-open { margin-top: 0; text-decoration: none; }
.ykp-ytl svg { width: 1.2rem; height: 1.2rem; }

/* ── Balayage Paroles / File d'attente : les deux volets suivent le doigt ── */
.ykp-panel.ykp-drag { overflow: hidden; }
.ykp-panel.ykp-drag > .ykp-lyr,
.ykp-panel.ykp-drag > .ykp-nolyr,
.ykp-panel.ykp-drag > .ykp-queue { position: absolute; inset: 0; width: auto; height: auto; max-height: none; display: block; visibility: visible; opacity: 1; overflow: hidden; will-change: transform; animation: none; }
.ykp-panel.ykp-drag > .ykp-nolyr { display: grid; }
.ykp-panel.ykp-drag > [hidden] { display: none; }
.ykp-panel.ykp-drag > .ykp-lyr { background: var(--white); }
.ykp-queue { overscroll-behavior: contain; }

/* ── File d'attente : variante thème clair ── */
body:not(.yk-dark) .ykp-queue,
body:not(.yk-dark) .ykp-nolyr { background: var(--white); color: var(--yk-dk-card); box-shadow: 0 1px 6px var(--yk-veil20); }
body:not(.yk-dark) .ykp-qi { color: var(--yk-dk-card); }
@media (hover: hover) { body:not(.yk-dark) .ykp-qi:hover { background: var(--surface); } }
body:not(.yk-dark) .ykp-qi.on { background: var(--yk-dk-text); }
body:not(.yk-dark) .ykp-qi .n { opacity: 0.6; }
body:not(.yk-dark) .ykp-qi small { opacity: 0.7; }
@media (max-width: 720px) {
  /* Paroles hors champ : gardées mises en page (hauteur du contenu juste, pas de saut de défilement) mais sans hauteur */
  .ykp-lyr { display: block; max-height: 0; overflow: hidden; visibility: hidden; }
  .ykp-lyr.on { max-height: none; visibility: visible; }
  .ykp-lyr iframe { height: var(--lh, 18rem); }
}
/* Le balayage horizontal est géré par le lecteur : le navigateur ne garde que le défilement vertical */
.ykp-panel, .ykp-tabs, .ykp-head { touch-action: pan-y; }

/* ── Bouton « Ouvrir sur… » : pastille blanche, logo en couleur + nom ── */
.ykp-open { background: var(--white); border: 0; color: var(--yk-dk-card); box-shadow: 0 1px 4px var(--yk-k30); }
@media (hover: hover) { .ykp-open:hover { background: var(--surface); } }
.ykp-open .au-pi { width: 1.2rem; height: 1.2rem; }
.ykp-ytl[hidden] { display: none; }
.ykp-ytl { background: var(--yk-w15); color: var(--white); border: 1px solid var(--yk-w40); box-shadow: none; }
@media (hover: hover) { .ykp-ytl:hover { background: var(--yk-w22); } }
.au-hp { width: 1.25rem; height: 1.25rem; flex: none; }
.au-rd .au-hp { width: 1.1rem; height: 1.1rem; }

/* ── Glisser pour réduire : page assombrie derrière, ombre portée ── */
.ykp-dim { position: fixed; inset: 0; z-index: 499; background: var(--yk-dk-bg); pointer-events: none; }
.ykp.ykp-dragging { box-shadow: 0 -10px 34px var(--yk-k55); border-radius: 16px 16px 0 0; }

/* ── Ligne interprète · album trop longue : défilement latéral automatique (barre réduite) ── */
.ykp-sub .ykp-mq { display: inline-block; white-space: nowrap; }
.ykp-sub.ykp-marq { text-overflow: clip; }
.ykp-sub.ykp-marq .ykp-mq { animation: ykp-marq var(--mqd, 8s) ease-in-out 1.2s infinite alternate; }
@keyframes ykp-marq { from { transform: translateX(0); } 12% { transform: translateX(0); } 88% { transform: translateX(var(--mq, 0)); } to { transform: translateX(var(--mq, 0)); } }
@media (prefers-reduced-motion: reduce) { .ykp-sub.ykp-marq .ykp-mq { animation: none; } .ykp-sub.ykp-marq { text-overflow: ellipsis; } }
@media (max-width: 720px) {
  .ykp-mini .ykp-side [data-k=yt] { display: none; }
  .ykp-fl { overscroll-behavior: none; }
}

/* Écran étroit : les paroles font corps avec la page. Le cadre est invisible pour le doigt (pointer-events: none) : le défilement et les balayages sont ceux de la vue agrandie ; les appuis sont transmis au contenu par hodari/js/player.js. */
@media (max-width: 720px) { .ykp-lyr iframe { pointer-events: none; } }

.au-rd .au-hp { color: var(--yk-ink-navy); }

/* File d'attente : titres déjà joués en grisé ; bouton de dépliage (écran étroit) */
.ykp-qi.past { opacity: 0.5; }
.ykp-qi.past:hover { opacity: 0.85; }
.ykp-qpast { width: 100%; padding: 0.6rem; border: 0; border-radius: 10px; background: transparent; color: inherit; opacity: 0.7; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: center; }
.ykp-qpast:hover { opacity: 1; background: var(--yk-text3-15); }