/* ══════════════════════════════════════════════════════════
   visiteur.css — Hodari : parolier public (catalogue simplifié)
   Réutilise shared.css + certaines classes de style.css (.search-input,
   .detail-row*, .detail-section-title, .yt-placeholder, .pagination/.page-btn).
══════════════════════════════════════════════════════════ */

:root { --yk-paroles-size: 0.98rem; }

.yk-main {
  display: flex;
  align-items: flex-start;
  width: 100%;
  /* Absorbe l'espace restant en état déployé : quand les résultats sont peu
     nombreux, c'est CE bloc (fond de page clair) qui comble jusqu'au footer,
     pas la zone de recherche — sans quoi le dégradé bleu se rallongerait sous
     les résultats. En état replié (.yk-empty) il ne prend aucune place et c'est
     la zone de recherche qui occupe tout. */
  flex: 1 1 auto;
  min-height: 0;
  /* C'est la hauteur de CE bloc qui est animée (par updateSearchZoneState,
     visiteur.js), pas celle de la zone de recherche : .yk-search-zone garde
     `flex: 1 1 auto` et occupe donc en permanence tout l'espace que celui-ci
     lui laisse. Le fond bleu touche ainsi le footer à chaque frame, alors
     qu'animer directement sa hauteur laissait apparaître sous lui une bande
     claire (mesurée jusqu'à 426px) pendant toute la transition.
     Le padding est inclus dans la hauteur (box-sizing: border-box, shared.css),
     il n'a donc pas besoin d'être animé séparément. */
  transition: height 0.5s cubic-bezier(0.4,0,0.2,1), padding-top 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
}
/* Colonne des résultats, à droite du volet de recherche avancée (le volet et
   la languette sont des éléments frères dans .yk-main, comme .results-area
   dans le catalogue). Centrée dans l'espace restant, plafonnée à 760px. */
.yk-main > .page-body {
  flex: 1 1 0;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 5rem;
}
/* Pendant l'animation de hauteur (classe posée sur <body> par
   updateSearchZoneState) : la hauteur de .yk-main est imposée en ligne, donc
   flex-grow doit lui être retiré, et c'est la zone de recherche qui reprend le
   rôle d'absorber tout l'espace résiduel — en bleu, ce qui est précisément le
   but : le dégradé touche le footer à chaque frame de la transition. */
body.yk-animating .yk-main { flex-grow: 0; overflow: hidden; }
body.yk-animating .yk-main > .page-body { padding-bottom: 0; }
body.yk-animating .yk-search-zone { flex-grow: 1; }
/* Transition transitoire du footer, active uniquement pendant l'animation et
   propre à cette page : elle ne modifie aucun style du footer, elle anime le
   translateY que visiteur.js lui applique le temps de la transition, pour qu'il
   glisse hors de l'écran (ou y revienne) au lieu de disparaître net.
   Même durée et même easing que la hauteur de .yk-main : les deux parts de la
   course s'enchaînent sans rupture de vitesse. */
body.yk-animating .footer {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
/* Recherche vide (page pleine, voir .yk-search-zone) : aucune zone/marge visible en dessous. */
.yk-main.yk-empty { flex: 0 0 auto; padding: 0; margin: 0; height: 0; min-height: 0; overflow: hidden; border: 0; opacity: 0; }
.yk-main.yk-empty .yk-results-head,
.yk-main.yk-empty #song-list,
.yk-main.yk-empty #pagination { display: none; }

/* ── RECHERCHE PRINCIPALE ──
   Par défaut (aucune classe JS requise → aucun flash au chargement) : occupe
   toute la hauteur disponible, comme une page d'accueil de moteur de recherche.
   Dès la première frappe, JS ajoute .yk-compact qui la fait revenir à sa
   taille normale — c'est CETTE transition (post-chargement) qui est animée. */
.yk-search-zone {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--yk-dk-line) 100%);
  /* flex-grow (pas min-height:calc(...)) : remplit exactement l'espace restant
     entre topbar et footer, quelle que soit la hauteur réelle du footer — un
     calc() approximatif laissait une fine bande blanche résiduelle (le fond
     de <body>, var(--surface)) entre la zone et le footer. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  /* Aucune transition de hauteur ici, et surtout aucune hauteur imposée en JS :
     `flex: 1 1 auto` (ci-dessus) suffit à ce que cette zone occupe à chaque
     frame exactement l'espace que .yk-main lui laisse. Comme c'est la hauteur
     de .yk-main qui est animée, la barre de recherche remonte progressivement
     et le fond bleu reste collé au footer du début à la fin — c'est ce que
     l'animation de `height` sur CETTE zone ne permettait pas (bande claire
     jusqu'à 426px sous le dégradé pendant toute la transition).
     Le padding reste animé : il change entre les deux états et son effet sur la
     hauteur est absorbé par flex-grow. */
  transition: padding 0.5s cubic-bezier(0.4,0,0.2,1);
}
.yk-search-zone.yk-compact {
  flex-grow: 0;
  padding: 2.4rem 1.5rem 2rem;
}
.yk-search-row {
  max-width: 780px; width: 100%; margin: 0 auto;
  /* Barre + bouton « Recherche avancée » (même rangée, comme le catalogue),
     recueils en dessous ; sur mobile, tout s'empile : barre, recueils, bouton.
     min-width:0 : DECISIONS.md §9. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "search adv" "pills pills" "active active";
  column-gap: 0.75rem;
  align-items: center;
}
.yk-search-row > .yk-search-wrap { grid-area: search; min-width: 0; }
.yk-search-row > .yk-recueil-filters { grid-area: pills; }
.yk-search-row > .btn-adv { grid-area: adv; }
.yk-search-row > .active-filters-row { grid-area: active; width: 100%; min-width: 0; text-align: left; justify-content: center; margin-top: 0.9rem; }
.yk-search-row .active-filters { justify-content: center; }
@media (max-width: 720px) {
  .yk-search-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "pills" "adv" "active"; }
  .yk-search-row > .btn-adv { justify-content: center; margin-top: 0.9rem; width: 100%; }
}
.yk-search-wrap { position: relative; }
.yk-search-wrap .search-input { padding-right: 2.6rem; }
.yk-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;
}
.yk-search-clear:hover { color: var(--navy); }
.yk-search-clear[hidden] { display: none; }   /* croix masquée quand le champ est vide (comme l'audiothèque et les outils) */

/* ── RECHERCHE COMPACTE DANS LA TOPBAR (reprend la technique de catalogue.html :
   centrée par clamp() tant qu'il y a la place des deux côtés, puis ancrée à
   droite avec une largeur qui s'ajuste à l'espace réellement dispo — jamais
   par-dessus le titre. Masquage de thème/déconnexion en CSS pur, via
   sélecteur de frères (~), pas de JS : .yk-topbar-search doit rester AVANT
   .yk-theme-toggle et .topbar-logout dans le HTML.) ── */
.topbar { position: sticky; } /* déjà sticky (shared.css) — ancre la recherche en position:absolute */
.yk-topbar-search {
  position: absolute;
  left: clamp(320px, 50%, calc(100vw - 200px));
  transform: translateX(-50%);
  top: 50%;
  margin-top: -18px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: calc(0.4rem - 2px) calc(0.9rem - 2px);
  border: 2px solid transparent;   /* contour de sélection, comme les autres barres de recherche */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: min(400px, calc(100vw - 560px));
  min-width: 140px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: var(--shadow);
}
.yk-topbar-search.visible { opacity: 1; pointer-events: auto; }
.yk-topbar-search:focus-within { border-color: var(--lavender3); box-shadow: var(--shadow), 0 0 0 3px var(--yk-ring); }
.yk-topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: var(--fs-sm);
  width: 100%;
  font-family: var(--font-sans);
}
.yk-topbar-search input::placeholder { color: var(--text-3); }
.yk-topbar-search .yk-search-clear { position: static; transform: none; color: var(--text-3); font-size: 0.8rem; }

@media (max-width: 1000px) {
  /* Plus assez de place pour centrer sans risquer de chevaucher le titre ou
     thème/déconnexion à droite — ancrée à droite, eux s'effacent pendant
     qu'elle est visible (elle en prend alors la place). */
  .yk-topbar-search { left: auto; right: 1.2rem; transform: none; margin-top: -18px; width: min(400px, calc(100vw - 340px)); }
  .yk-topbar-search.visible ~ .yk-theme-toggle,
  .yk-topbar-search.visible ~ .topbar-logout { display: none; }
}
@media (max-width: 720px) {
  .yk-topbar-search { right: 1rem; width: min(400px, calc(100vw - 220px)); }
}
@media (max-width: 400px) {
  .yk-topbar-search { width: min(400px, calc(100vw - 180px)); min-width: 110px; }
}

/* ── TITRE DE LA TOPBAR SELON LE RÔLE (CSS pur, aucun JS) ──
   Exceptionnellement pour cet outil, le visiteur voit "HODARI" en blanc plein
   plutôt que la marque "Partithèque" — il n'a accès à aucun autre outil, la
   marque ne lui sert à rien. Les deux titres sont dans le HTML et c'est la
   classe de rôle posée sur <html> par le script inline en tête de <body> qui
   décide : elle existe donc AVANT que la topbar soit analysée, ce qui évite le
   bref affichage de "Partithèque" que produisait le remplacement en JS.
   .yk-title-brand / .yk-title-visiteur rétablissent les styles du parent
   .topbar-title, que la règle générique `.topbar-title span` de shared.css
   (petit, léger, semi-transparent — destinée au seul sous-titre) écraserait. */
/* Titre, libellé et pied de page : modèle commun de la Partithèque
   (shared.css), identique pour tous les rôles ; le bouton de droite
   (Connexion / Partithèque) est géré dans hodari.css. */

/* ── FILTRES RECUEILS (mêmes couleurs que les badges des cartes/fiches) ── */
.yk-recueil-filters {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.yk-recueil-filter {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--yk-w30);
  background: var(--yk-w08);
  color: var(--yk-w90);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.yk-recueil-filter:hover { border-color: var(--yk-w55); }
.yk-recueil-filter[data-recueil="hodari"].active  { background: var(--c-dispo); border-color: var(--c-dispo); color: var(--white); }
.yk-recueil-filter[data-recueil="ferao"].active   { background: var(--gold); border-color: var(--gold); color: var(--white); }
.yk-recueil-filter[data-recueil="ultreia"].active { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ── BADGES RECUEILS COLORÉS ── */
.yk-aupar { font-weight: 400; opacity: 0.8; }
.yk-badge-hodari  { background: var(--c-dispo-bg); color: var(--c-dispo); border: 1px solid var(--c-dispo-border); }
.yk-badge-ferao   { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); }
.yk-badge-ultreia { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--yk-blue-30); }

/* ── COMPTEUR + INDICE ── */
#song-count { font-size: var(--fs-sm); color: var(--yk-muted); margin: 1.2rem 0 0.6rem; }
.yk-hint { padding: 2.5rem 1rem; color: var(--yk-muted); text-align: center; font-size: var(--fs-base); }

/* ── CARTES ── */
#song-list { display: flex; flex-direction: column; gap: 0.6rem; }
.yk-card {
  width: 100%;
  background: var(--yk-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.yk-card:hover { border-color: var(--lavender3); box-shadow: var(--shadow); }
/* Indicateur de focus clavier (navigation ↑ ↓, voir attachCardKeyboardNav
   dans visiteur.js) — même traitement que .morceau-card côté catalogue
   (style.css), pour rester cohérent avec la charte graphique. */
.yk-card:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
/* Regroupe titre (+ sous-titre, resté inline dedans) et incipit sur deux
   lignes empilées — .yk-card est elle-même un conteneur flex EN LIGNE : sans
   ce regroupement, l'incipit devenait un flex-item de plus au même niveau
   que le titre et les badges, et se retrouvait n'importe où sur la même
   ligne au lieu de rester collé sous le titre (bug constaté sur grand écran).
   min-width:0 : indispensable pour que text-overflow:ellipsis (ci-dessous)
   fonctionne à l'intérieur d'un enfant flex — un flex-item ne rétrécit
   jamais sous sa largeur de contenu sans ça (même piège que DECISIONS.md §9,
   variante largeur plutôt que hauteur). */
.yk-card-titlegroup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}
.yk-card-title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; color: var(--yk-title); }
.yk-card-soustitre { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base); color: var(--yk-muted); font-style: italic; }
/* Premières paroles (incipit), affichées uniquement dans la liste — jamais
   dans la fiche détaillée, qui a déjà les paroles complètes juste en dessous.
   Une seule ligne, tronquée avec points de suspension si trop longue : sert
   de repère visuel rapide dans la liste, pas d'affichage complet. */
.yk-card-incipit {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--yk-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* margin-left:auto : ancre les badges à droite même quand ils passent seuls
   sur leur propre ligne (.yk-card a flex-wrap:wrap) — sans ça, justify-
   content:space-between de .yk-card n'a plus rien à espacer dès que les
   badges sont seuls sur leur ligne, et ils retombent au bord gauche. Réservé
   à cette largeur (voir la media query 480px plus bas) : en colonne, sur
   mobile, ce même margin-left:auto n'aurait plus le sens voulu. */
@media (min-width: 481px) {
  .yk-card-badges { margin-left: auto; }
}
.yk-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ── AUTEURS ── */
.yk-author-line { line-height: 1.5; }
.yk-author-note { color: var(--yk-muted); font-style: italic; font-size: 0.92em; }

/* ── TEXTE TOUJOURS VISIBLE (présentation, paroles) ── */
.yk-section-title-row { display: flex; align-items: center; justify-content: space-between; }
.yk-copy-btn {
  font-size: 0.68rem; padding: 0.2rem 0.6rem; border-radius: 20px;
  border: 1px solid var(--border); color: var(--yk-text-2); background: var(--yk-surface); cursor: pointer;
}
.yk-copy-btn:hover { border-color: var(--yk-hl); color: var(--yk-hl); }
.yk-text {
  font-size: var(--fs-base);
  color: var(--yk-text-2);
  line-height: 1.6;
  background: var(--yk-surface-soft);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  white-space: pre-wrap;
  margin-top: 0.4rem;
}
.yk-text-paroles { font-family: var(--font-serif); font-size: var(--yk-paroles-size); }

/* ── Cadre Présentation + Commentaire (voir presentationCommentSection) ── */
.yk-text-sep { border: none; border-top: 1px solid var(--border); margin: 0.7rem 0; }
body.yk-dark .yk-text-sep { border-top-color: var(--yk-w15); }
.yk-readmore-wrap { position: relative; overflow: hidden; transition: max-height 0.3s ease; }
.yk-readmore-collapsed {}
.yk-readmore-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5rem;
  background: linear-gradient(to bottom, transparent, var(--surface-soft));
  pointer-events: none;
}
body.yk-dark .yk-readmore-collapsed::after { background: linear-gradient(to bottom, transparent, var(--yk-dk-card2)); }
.yk-readmore-btn {
  display: none; margin: 0.6rem auto 0; background: none; cursor: pointer;
  border: 1px solid var(--border); color: var(--yk-text-2);
  font-size: var(--fs-sm); padding: 0.35rem 1rem; border-radius: 20px;
}
.yk-readmore-btn:hover { border-color: var(--yk-hl); color: var(--yk-hl); }
body.yk-dark .yk-readmore-btn { border-color: var(--yk-w22); }
/* Replié uniquement : le bouton flotte par-dessus le bas du cadre, au-dessus
   du fondu, plutôt que de rester après le texte tronqué. */
.yk-readmore-collapsed .yk-readmore-btn {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%);
  margin: 0; z-index: 1; background: var(--surface-soft);
  box-shadow: 0 1px 5px var(--yk-k20);
}
body.yk-dark .yk-readmore-collapsed .yk-readmore-btn { background: var(--yk-dk-card2); }

/* ── VOLET DE DÉTAIL ── */
.yk-sheet-overlay {
  position: fixed; inset: 0;
  background: var(--yk-veil50);
  z-index: 600;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.yk-sheet-overlay.open { opacity: 1; }
.yk-sheet {
  background: var(--yk-surface);
  width: 100%;
  max-width: 760px;
  /* 100dvh (pas vh) : vh reflète la plus grande hauteur possible sur certains
     navigateurs mobiles (barre d'adresse masquée), donc une valeur figée en vh
     laissait apparaître un espace en haut dès que la barre réapparaissait
     pendant le défilement. dvh s'ajuste dynamiquement, jamais d'espace. */
  height: 100dvh;
  border-radius: 16px 16px 0 0;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -10px 34px var(--yk-k30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yk-sheet-overlay.open .yk-sheet { transform: translateY(0); }
.yk-sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 3px; margin: 0.7rem auto 0.5rem; flex-shrink: 0; }
.yk-sheet-close {
  position: absolute;
  top: 0.7rem; right: 0.9rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--yk-surface-soft);
  color: var(--yk-text-2);
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}
.yk-sheet-scroll { flex: 1; overflow-y: auto; padding: 0 1.3rem 2.2rem; }
.yk-sheet-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--yk-title); padding-right: 2.2rem; }
.yk-sheet-soustitre { font-size: var(--fs-base); color: var(--yk-muted); font-style: italic; margin-top: 0.15rem; }
.yk-sheet-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }

body.yk-sheet-lock { overflow: hidden; }

@media (min-width: 721px) {
  .yk-sheet-overlay { align-items: center; }
  .yk-sheet {
    height: auto; max-height: 82vh; width: 90%; max-width: 600px;
    border-radius: 14px;
    transform: scale(0.96); opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .yk-sheet-overlay.open .yk-sheet { transform: scale(1); opacity: 1; }
  .yk-sheet-handle { display: none; }
  .yk-sheet-scroll { padding: 0.6rem 1.6rem 1.8rem; }
}

/* ── INTERRUPTEUR CLAIR/SOMBRE (direct dans la topbar) ── */
.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); }

/* ── TAILLE DES PAROLES (boutons A−/A+ directement dans la section Paroles de chaque fiche) ── */
.yk-section-actions { display: flex; align-items: center; gap: 0.4rem; }
.yk-font-controls-inline { display: flex; align-items: center; gap: 0.25rem; }
.yk-font-controls-inline button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--white); color: var(--text-2); cursor: pointer; font-size: 0.75rem; line-height: 1;
}
.yk-font-controls-inline button:hover { border-color: var(--yk-hl); color: var(--navy); }

/* ── MODE SOMBRE (cet outil uniquement) ── */
body.yk-dark { background: var(--yk-dk-bg); }
body.yk-dark .yk-card, body.yk-dark .yk-sheet { color: var(--yk-dk-text); }
body.yk-dark .yt-placeholder { background: var(--yk-dk-card); color: var(--yk-dk-text); }
/* Distinct de .yk-sheet (même teinte que ci-dessus ferait disparaître le
   rectangle qui structure visuellement Présentation/Paroles dans la fiche). */
body.yk-dark .yk-settings-row { color: var(--yk-dk-muted); }
body.yk-dark .yk-card { border-color: var(--yk-dk-card2); }
body.yk-dark .yk-card:hover { border-color: var(--yk-dk-line-hi); }
body.yk-dark .detail-row-label { color: var(--yk-dk-muted); }
body.yk-dark .detail-row-val,
body.yk-dark .yk-author-line { color: var(--yk-dk-text); }
body.yk-dark .yk-copy-btn { border-color: var(--yk-dk-card2); }
body.yk-dark .yk-font-controls-inline button { background: var(--yk-dk-card); border-color: var(--yk-dk-card2); color: var(--yk-dk-title); }
/* Survol en mode sombre : --navy (brun-rouge) est invisible sur le fond brun → jaune du thème (bordure et texte) */
body.yk-dark .yk-font-controls-inline button:hover { color: var(--yk-yellow); border-color: var(--yk-yellow); }
body.yk-dark .yk-copy-btn:hover { border-color: var(--yk-yellow); }
/* Badges recueils : trop clairs par défaut sur fond sombre (contraste insuffisant) —
   fond plus saturé + texte plus lumineux, propre au mode sombre. */
body.yk-dark .yk-badge-hodari  { background: var(--yk-green-35); color: var(--yk-dispo-dk-text); border-color: var(--yk-green-55); }
body.yk-dark .yk-badge-ultreia { background: var(--yk-blue-30); color: var(--yk-ultreia-dk-text); border-color: var(--yk-ultreia-dk-line-55); }
body.yk-dark .yk-badge-ferao   { background: var(--yk-themes-40); color: var(--yk-yellow); border-color: var(--yk-themes-60); }
body.yk-dark .page-btn { background: var(--yk-dk-card); border-color: var(--yk-dk-card2); color: var(--yk-dk-text); }
/* Scrollbar interne de la fiche : trop claire (thumb clair par défaut du
   navigateur) sur fond sombre — assombrie spécifiquement ici. */
body.yk-dark .yk-sheet-scroll::-webkit-scrollbar-track { background: var(--yk-dk-card); }
body.yk-dark .yk-sheet-scroll::-webkit-scrollbar-thumb { background: var(--yk-dk-line); }
body.yk-dark .yk-sheet-scroll::-webkit-scrollbar-thumb:hover { background: var(--yk-dk-line-hi); }
body.yk-dark .yk-sheet-scroll { scrollbar-width: thin; scrollbar-color: var(--yk-dk-line) var(--yk-dk-card); }
body.yk-dark #pagination span { color: var(--yk-dk-muted); }

/* ── TOAST ── */
.yk-toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: var(--white);
  padding: 0.6rem 1.2rem; border-radius: var(--radius-pill);
  font-size: var(--fs-base); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 700;
}
.yk-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) {
  .yk-copy-btn { font-size: 0.78rem; padding: 0.35rem 0.85rem; }
  .yk-font-controls-inline button { width: 32px; height: 32px; font-size: 0.9rem; }
  .yk-section-actions { gap: 0.55rem; }
  /* La fiche occupe tout l'écran (100dvh) sur mobile : des coins arrondis
     n'ont plus de sens (elle touche déjà le bord) et créaient un effet de
     "triangle courbe" contre le fond sombre juste au-dessus. */
  .yk-sheet { border-radius: 0; }
}

@media (max-width: 480px) {
  .yk-card { flex-direction: column; align-items: flex-start; }
  /* Interligne resserré entre le titre et l'incipit sur petit écran : plus
     de place à gagner ici, contrairement au grand écran où l'espace ne
     manque pas. width:100% indispensable ici : align-items:flex-start
     ci-dessus déstretche .yk-card-titlegroup (qui n'a plus de largeur
     imposée par le contexte flex-row du grand écran) — sans elle, il retombe
     à la largeur de son contenu, et l'incipit (non cassable par nature,
     white-space:nowrap) déborde de la carte au lieu d'être tronqué par
     l'ellipse (confirmé par mesure Playwright : 387px de large contre 332px
     disponibles dans la carte, débordement visible dans la capture de
     Joseph). */
  .yk-card-titlegroup { gap: 0.05rem; width: 100%; }
}

/* Animation du repli de la zone de recherche désactivée pour les personnes
   préférant réduire les animations — la bascule reste instantanée (visiteur.js
   court-circuite alors sa mesure de hauteur). */
@media (prefers-reduced-motion: reduce) {
  .yk-search-zone, .yk-main, body.yk-animating .footer { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   RECHERCHE AVANCÉE (Auteur / Thèmes / Provenance) + EXPORT PDF
   Tout vient de style.css (même volet, mêmes boîtes, mêmes menus déroulants,
   mêmes pastilles que le catalogue) : ci-dessous, uniquement la colle propre
   à cette page.
══════════════════════════════════════════════════════════ */

/* Boîte « Auteur » : cadre neutre (pas de couleur sémantique), même gabarit que les autres. */
/* Auteur : bleu profond, avec les mêmes déclinaisons que les autres groupes (cadre, titre, bouton, flèche, cases, survol, éléments cochés) */
.filter-group-box--auteur { border: 1.5px solid var(--c-auteur-border); background: var(--c-auteur-bg); }
.filter-group-box--auteur .filter-group-box-title { color: var(--c-auteur); }
.filter-group.grp-auteur .dropdown-filter-trigger { border-color: var(--c-auteur-border); }
.filter-group.grp-auteur .dropdown-filter-trigger:hover,
.filter-group.grp-auteur .dropdown-filter-trigger.open { border-color: var(--c-auteur); }
.filter-group.grp-auteur .dropdown-filter-trigger .df-label,
.filter-group.grp-auteur .dropdown-filter-trigger .df-arrow { color: var(--c-auteur); }
#df-auteur-list .dropdown-filter-item input { accent-color: var(--c-auteur); }
.filter-group.grp-auteur .dropdown-filter-item:hover, .filter-group.grp-auteur .dropdown-filter-item.df-focused { background: var(--c-auteur-bg); color: var(--c-auteur); }   /* survol : mêmes couleurs que Thèmes et Provenance */
.filter-group.grp-auteur .dropdown-filter-item.checked { color: var(--c-auteur); font-weight: 700; }

/* Seulement 3 boîtes : elles gardent leur hauteur naturelle (sans ça la grille les étire sur toute la hauteur du volet). */
.yk-main .filters-grid { align-content: start; }

/* Le volet n'a pas à réserver toute la hauteur de l'écran tant qu'il est
   replié (sinon la page garderait en permanence une hauteur ≥ 100vh, même
   avec 3 résultats) : hauteur nulle replié, hauteur écran ouvert — la
   hauteur ne bascule qu'APRÈS la fin du glissement à la fermeture. */
@media (min-width: 721px) {
  .yk-main .filters-panel {
    height: 0;
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1), margin-left 0.3s cubic-bezier(0.4,0,0.2,1), height 0s linear 0.3s;
  }
  .yk-main .filters-panel.open {
    height: calc(100vh - 60px);
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1), margin-left 0.3s cubic-bezier(0.4,0,0.2,1), height 0s;
  }
  .yk-main:has(.filters-panel.open) > .page-body { padding-left: calc(1.2rem + 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .yk-main .filters-panel, .yk-main .filters-panel.open { transition: none; }
}

/* En-tête de la liste : nombre de chants + bouton d'export. */
.yk-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0.6rem;
}
.yk-results-head #song-count { margin: 0; }
.yk-export-btn[hidden] { display: none; }

@media (max-width: 720px) {
  .yk-main > .page-body { padding-left: 1.2rem; }
}

/* Mode sombre — le volet et ses menus suivent les mêmes teintes que les cartes. */
body.yk-dark .filters-panel-inner,
body.yk-dark .filters-panel-header { background: var(--yk-dk-card); }
body.yk-dark .filters-panel-header { color: var(--yk-dk-title); border-bottom-color: var(--yk-dk-card2); }
body.yk-dark .filters-close-btn { background: var(--yk-dk-card2); border-color: var(--yk-dk-line); color: var(--yk-dk-text); }
body.yk-dark .filter-group-box--auteur { background: var(--c-auteur-bg); border-color: var(--c-auteur-border); }
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,
body.yk-dark .dropdown-filter-item.df-focused { 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); }
body.yk-dark .filter-group-box--auteur .filter-group-box-title { color: var(--c-auteur); }
/* Recherche avancée : un seul jeu de couleurs pour Auteur, Thèmes et Provenance (avant : bleu, brun, vert d'eau). Les trois groupes
   reprennent les jetons --c-auteur* ; seules les variables lues PAR LE VOLET changent (les autres emplois de --c-themes/--c-langue,
   par exemple la pochette générée, gardent leur teinte). */
.filters-panel {
  --c-themes: var(--c-auteur); --c-themes-bg: var(--c-auteur-bg); --c-themes-border: var(--c-auteur-border);
  --c-langue: var(--c-auteur); --c-langue-bg: var(--c-auteur-bg); --c-langue-border: var(--c-auteur-border);
}
/* Menu Thèmes : même contour au repos que Auteur et Provenance (il n'en avait pas : règle absente de style-04) */
.filter-group.grp-themes .dropdown-filter-trigger { border-color: var(--c-themes-border); }
/* Étiquette CANON : teinte du jeu de couleurs de Hodari (rouge en clair, jaune en sombre) au lieu du violet du catalogue, illisible en sombre */
.badge.badge-canon { background: var(--c-auteur-bg); color: var(--c-auteur); border-color: var(--c-auteur-border); }
/* Auteur et provenance de la fiche, cliquables (filtre de la recherche avancée) : survol = souligné, sans changement de couleur */
.yk-flink { color: inherit; text-decoration: none; cursor: pointer; }
.yk-flink:hover { text-decoration: underline; }
.yk-flink:focus-visible { outline: 2px solid var(--yk-hl); outline-offset: 2px; border-radius: 2px; }
/* Pastilles des filtres appliqués (sur le dégradé de la zone de recherche) : même gris translucide que les autres, en sombre aussi */
body.yk-dark .yk-search-zone .filter-badge.fb-themes, body.yk-dark .yk-search-zone .filter-badge.fb-langue { background: var(--white-15); border-color: var(--white-30); }

/* ── EXPORT PDF ──────────────────────────────────────────────
   Généré dans le navigateur (window.print() sur #yk-print-area, comme
   l'impression du catalogue) ; « Enregistrer au format PDF » dans la boîte
   de dialogue. Nuances de gris uniquement : aucune couleur ci-dessous. Pas de
   filter:grayscale (rasterise le texte à l'impression, voir style.css). */
#yk-print-area { display: none; }
@page { size: A4; margin: 1.6cm; }
@media print {
  html, body { margin: 0; padding: 0; background: #fff !important; }
  body > *:not(#yk-print-area) { display: none !important; }
  /* Sélecteur renforcé : style.css (chargé avant) masque déjà tout enfant de <body>
     sauf #print-area (impression du catalogue), avec la même !important. */
  html body > #yk-print-area {
    display: block !important;
    font-family: 'DM Sans', sans-serif;
    color: #111;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ykp-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 20pt; font-weight: 700; color: #111; margin: 0 0 0.25cm; }
  .ykp-criteres { font-size: 10pt; color: #333; line-height: 1.5; }
  .ykp-meta { font-size: 9pt; color: #777; }
  .ykp-rule { height: 0; border: 0; border-top: 1.5pt solid #111; margin: 0.4cm 0 0.1cm; }
  .ykp-table { width: 100%; border-collapse: collapse; }
  .ykp-table td { padding: 0; }
  .ykp-foot-space { height: 1.1cm; }
  .ykp-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.6cm;
    padding: 0.16cm 0; border-bottom: 0.5pt solid #bbb;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ykp-row-main { min-width: 0; }
  .ykp-row-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 11.5pt; font-weight: 600; color: #111; }
  .ykp-row-sub { font-style: italic; font-weight: 400; font-family: 'DM Sans', sans-serif; font-size: 9pt; color: #666; }
  .ykp-row-auteurs { font-size: 9pt; color: #555; margin-top: 0.03cm; }
  .ykp-row-recueils { font-size: 9pt; color: #555; text-align: right; white-space: nowrap; flex-shrink: 0; }
  .ykp-footer {
    /* Répété en bas de CHAQUE page (position:fixed). La place qu'il occupe est
       réservée par le <tfoot> de .ykp-table, qui se répète lui aussi sur chaque
       page : la dernière ligne de la liste ne passe donc jamais dessous. */
    position: fixed; left: 0; right: 0; bottom: 0;
    border-top: 0.5pt solid #bbb; padding-top: 0.2cm; background: #fff;
    font-size: 8.5pt; color: #555; text-align: center;
  }
}

/* ── MODE FENÊTRE (?embed=1) — fiche affichée par-dessus l'audiothèque ──
   Tout est masqué sauf le volet de détail ; le fond est transparent et la page
   parente fournit le voile sombre. */
html.yk-embed, html.yk-embed body { background: transparent !important; }
html.yk-embed body > *:not(.yk-sheet-overlay):not(script):not(style) { display: none !important; }
html.yk-embed .yk-sheet-overlay { background: transparent; }

/* Fiche intégrée au lecteur agrandi (?embed=1&inline=1) : affichée en permanence, sans voile ni fermeture. */
html.yk-inline .yk-sheet-overlay { display: flex !important; opacity: 1; align-items: stretch; background: transparent; }
html.yk-inline .yk-sheet { height: 100%; max-height: none; width: 100%; max-width: none; border-radius: 0; transform: none !important; opacity: 1; box-shadow: none; transition: none; }
html.yk-inline .yk-sheet-close, html.yk-inline .yk-sheet-handle { display: none; }
html.yk-inline .yk-sheet-scroll { padding: 0.9rem 1.2rem 1.4rem; }
html.yk-inline .yk-sheet-title { padding-right: 0; }
html.yk-inline .yk-sheet-title { display: none; }   /* le titre figure déjà dans l'en-tête du lecteur */

html.yk-inline, html.yk-inline body { touch-action: pan-y; }
/* Fiche intégrée : pas de rebond, ni sur ordinateur ni sur écran étroit (le lecteur relaie lui-même le défilement vertical) */
html.yk-inline, html.yk-inline body, html.yk-inline .yk-sheet-scroll { overscroll-behavior: none; }
/* Écran étroit : le cadre est aussi haut que son contenu et ne défile jamais lui-même (le lecteur relaie) → rien à étirer */
html.yk-inline.yk-narrow, html.yk-inline.yk-narrow body, html.yk-inline.yk-narrow .yk-sheet-scroll { overflow: hidden !important; touch-action: none; }