/* style-02-resultats.css — Zone des résultats, cartes de morceaux, badges, pastilles de détail, pagination. Chargé après style-01 (ordre 01 → 07 : voir style-01-recherche.css). */
/* ── RESULTS AREA ── */
.results-area {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 160px);
  align-items: flex-start;
}
.results-list-col {
  flex: 1;
  padding: 1.2rem 1.5rem;
  min-width: 0;
  transition: flex 0.3s, padding-left 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Volet filtres ouvert : la bande (translateX, voir .filters-rail.panel-open)
   se rend visuellement juste là où results-list-col démarre normalement —
   translateX ne change pas sa place réservée dans la mise en page, seulement
   son rendu, donc results-list-col ne "sait" pas qu'il faut lui laisser de
   la place. 28px de padding-gauche en plus (= largeur de la bande) comble
   cet espace, pour que les cartes ne semblent plus collées à la bande
   (signalé par Joseph). */
@media (min-width: 721px) {
  .results-area:has(.filters-panel.open) .results-list-col {
    padding-left: calc(1.5rem + 28px);
  }
}
/* Sur grand écran, les cartes de résultats n'ont pas besoin d'occuper toute la
   largeur disponible — inutilement étirées et moins lisibles. Centré, un peu
   plus large que la contrainte équivalente de Hodari (760px, outil plus
   simple). Sans effet quand la fiche est ouverte (l'espace restant est déjà
   plus étroit que ce plafond dans ce cas). */
#results-container {
  max-width: 960px;
  margin: 0 auto;
}
.detail-col {
  width: 0;
  flex-shrink: 0;
  overflow: visible;   /* pas hidden : laisse .detail-col-inner déborder à droite sans être découpé, c'est ce qui crée le glissement */
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  align-self: flex-start;
  z-index: 50;
}
.detail-col.open { width: 480px; }
@media (prefers-reduced-motion: reduce) {
  .detail-col { transition: none; }
}
/* Contenu réel — largeur fixe (480px) dès le départ, jamais redimensionné :
   results-list-col (flex:1) se réduit normalement à mesure que .detail-col
   (outer) grandit, ce qui déplace le bord gauche de cet inner vers la
   gauche — AUCUN transform nécessaire ici (contrairement à
   .filters-panel-inner, dont le bord gauche ne bouge jamais, lui). */
.detail-col-inner {
  width: 480px;
  height: 100%;
  border-left: 2px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* clip propre au contenu interne, pas à l'inner lui-même */
}
/* results-list-col se réduit déjà naturellement via flex:1 (detail-col étant
   de nouveau dans le flux) — plus besoin de compensation séparée (:has()),
   ni de 496px : l'espace entre les cartes et la fiche vient simplement de
   son padding existant (1.2rem 1.5rem) + la bordure de .detail-col-inner. */

/* Results header bar */
.results-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.results-count { font-size: var(--fs-base); color: var(--text-3); flex: 1; }
.results-count strong { color: var(--text); }
.btn-select-all-results {
  font-size: var(--fs-sm);
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  outline: none;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-select-all-results:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-pale);
}
.btn-select-all-results.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.per-page-select,
.sort-select {
  font-size: var(--fs-sm);
  padding: 0.3rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  outline: none;
  font-family: var(--font-sans);
  color: var(--text-2);
}

/* ── MORCEAU CARD ── */
.morceau-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  /* overflow:hidden retiré — géré par les sous-éléments (.morceau-incipit, .morceau-auteur) */
  position: relative;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.morceau-card:hover { box-shadow: var(--shadow); border-color: var(--lavender3); }
/* Déployé (harmonisations dépliées dans la carte) : plus de contour — la
   rotation du chevron et le contenu déplié suffisent à signaler l'état. */
/* Carte ouverte en fiche détaillée : uniquement le fond change — la bordure
   --accent est réservée à .print-selected (case cochée pour impression),
   sinon les deux états étaient visuellement indiscernables (même violet). */
.morceau-card.selected { background: var(--lavender); }
/* Indicateur de focus clavier : contour accent sur toute la carte, cohérent avec la charte */
.morceau-card:has(.morceau-header:focus-visible) {
  outline: 2.5px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.morceau-header {
  padding: 0.8rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
/* Le contour de focus est rendu sur la carte entière (règle :has ci-dessus) */
.morceau-header:focus-visible { outline: none; }
.morceau-expand-btn {
  color: var(--text-3);
  font-size: var(--fs-xs);
  flex-shrink: 0;
  margin-top: 0.2rem;
  transition: transform 0.2s, color 0.15s;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.morceau-expand-btn:hover { color: var(--navy); background: var(--navy-pale); }
.morceau-card.expanded .morceau-expand-btn { transform: rotate(90deg); }
.morceau-main { flex: 1; min-width: 0; }
.morceau-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.morceau-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--navy);
  line-height: 1.25;
}
.morceau-title mark { background: var(--color-mark); color: var(--navy); border-radius: 2px; font-style: normal; }
.badge-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); flex-shrink: 0; letter-spacing: 0.02em; }
.badge-unnum { font-size: var(--fs-xs); color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-border); border-radius: 4px; padding: 0.1em 0.45em; flex-shrink: 0; }
.detail-header .badge-unnum { color: var(--c-unnum); background: var(--c-unnum-bg); border-color: var(--c-unnum-border); }
.morceau-incipit { font-style: italic; font-size: var(--fs-base); color: var(--text-2); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.morceau-auteur { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auteur-role { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: 0.02em; }
.morceau-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.4rem; }
.morceau-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.btn-detail {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  display: flex; align-items: center; gap: 0.3rem;
  transition: all 0.15s;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-detail:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-pale); }
.btn-detail.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.harm-expand-btn {
  width: 100%;
  padding: 0.4rem 1rem;
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--border);
  /* Arrondi bas de carte quand fermée : le bouton est le dernier enfant visible */
  border-radius: 0 0 var(--radius) var(--radius);
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, color 0.15s;
}
/* Quand la carte est ouverte, le bas de la .harm-list prend l'arrondi */
.morceau-card.expanded .harm-expand-btn { border-radius: 0; }
.harm-expand-btn:hover { background: var(--lavender); color: var(--navy); }
.harm-expand-btn .morceau-expand-btn { margin-top: 0; font-size: 0.6rem; }
.morceau-card.expanded .harm-expand-btn .morceau-expand-btn { transform: rotate(90deg); }
.harm-list {
  border-top: 1px solid var(--border);
  display: none; max-height: 0; overflow: hidden; opacity: 0; box-sizing: border-box;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.morceau-card.expanded .harm-list { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.harm-item { padding: 0.65rem 1rem 0.65rem 2.5rem; border-bottom: 2px solid var(--lavender2); display: flex; align-items: flex-start; gap: 0.8rem; }
.harm-item:last-child { border-bottom: none; }
.harm-info { flex: 1; min-width: 0; }
.harm-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 0.2rem; }
.harm-subtitle { font-size: var(--fs-sm); color: var(--text-3); }
.harm-files { display: flex; gap: 0.35rem; flex-wrap: wrap; flex-shrink: 0; }
.file-btn {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-size: var(--fs-xs);
  /* Interligne explicite (un <button> n'hérite pas de celui du corps : « normal »
     par défaut, soit ~1.3 pour DM Sans) : les pastilles « en ligne » 🖼️ / 📕
     (.online-view-chip) le reprennent à l'identique pour avoir la même hauteur. */
  line-height: 1.3;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.25rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: var(--font-sans);
  background: none;
}
.file-btn.scan, .file-btn.pdf, .file-btn.dori { color: var(--c-dispo); border-color: var(--c-dispo-border); background: var(--c-dispo-bg); }
.file-btn.scan:hover, .file-btn.pdf:hover, .file-btn.dori:hover {
  background: var(--c-dispo);
  border-color: var(--c-dispo);
  color: var(--white);
  box-shadow: 0 2px 6px var(--c-dispo-border);
}
.file-btn.invalid { color: var(--red); border-color: var(--red); background: var(--red-bg); cursor: default; }
.file-btn.copy-path { color: var(--text-2); border-color: var(--border); background: var(--surface); font-weight: 400; }
.file-btn.copy-path:hover { border-color: var(--navy); color: var(--navy); }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--fs-xs); font-weight: 600; border-radius: 4px; padding: 0.15em 0.5em; white-space: nowrap; }
.badge-pill { border-radius: var(--radius-pill); padding: 0.2em 0.65em; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
/* Hover générique (fallback si pas de variante spécifique) */
.badge-pill:hover { filter: brightness(0.88); }
/* Hovers sémantiques explicites — uniquement sur les badge-pill (chips arrondies cliquables) */
/* Les badges carrés (.badge sans .badge-pill) n'ont aucun hover */
.badge-hodari.badge-pill:hover, .badge-ultreia.badge-pill:hover, .badge-ferao.badge-pill:hover,
.badge-recueil-prov.badge-filter-chip:hover {
  background: var(--c-recueil) !important;
  border-color: var(--c-recueil) !important;
  color: var(--white) !important;
  filter: none;
}
.badge-scan.badge-pill:hover, .badge-pdf.badge-pill:hover,
.badge-dori.badge-pill:hover {
  background: var(--c-dispo) !important;
  border-color: var(--c-dispo) !important;
  color: var(--white) !important;
  filter: none;
}
.badge-scan, .badge-pdf, .badge-dori { background: var(--c-dispo-bg); color: var(--c-dispo); border: 1px solid var(--c-dispo-border); }
.badge-hodari, .badge-ultreia, .badge-ferao { background: var(--c-recueil-bg); color: var(--c-recueil); border: 1px solid var(--c-recueil-border); }
.badge-filter-chip { cursor: pointer; border-radius: var(--radius-pill); font-family: var(--font-sans); transition: filter 0.15s, border-color 0.15s, background 0.15s; }
.badge-filter-chip:hover { filter: brightness(0.88); }
.badge-recueil-prov { background: var(--c-recueil-bg); color: var(--c-recueil); border: 1px solid var(--c-recueil-border); font-size: var(--fs-xs); padding: 0.2em 0.6em; white-space: normal; text-align: center; line-height: 1.35; display: inline-block; }
.badge-profane, .badge-religieux, .badge-sacre, .badge-etiq { background: var(--c-etiq-bg); color: var(--c-etiq); border: 1px solid var(--c-etiq-border); }
.badge-voix, .badge-canon { background: var(--c-voix-bg); color: var(--c-voix); border: 1px solid var(--c-voix-border); }
/* Variante multi-ligne pour les longues listes (orchestre, recueil…) */
.badge-voix-wrap { white-space: normal; line-height: 1.4; text-align: left; display: inline-block; }
.badge-theme { background: var(--c-themes-bg); color: var(--c-themes); border: 1px solid var(--c-themes-border); }
.badge-langue { background: var(--navy-pale); color: var(--navy); border: 1px solid var(--navy-20); }
.badge-no-file { background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-border); }

/* ── DETAIL-CHIP : chip cliquable dans la fiche détaillée ──
   Taille et comportement homogènes pour langue, thèmes, étiquettes, recueils.
   Usage : ajouter .detail-chip à tout badge/span interactif de la fiche. */
.detail-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.2em 0.65em;
  font-size: var(--fs-base);   /* 0.82rem */
  font-weight: 500;
  cursor: pointer;
  white-space: normal;          /* permet le retour à la ligne pour les valeurs longues */
  word-break: break-word;
  vertical-align: middle;
  margin: 0.1em 0.1em 0.1em 0;
  transition: background 0.15s, border-color 0.15s;
}
/* Variantes couleur + hover sémantique (fond assombri × 0.15 + border pleine couleur).
   Les rgba sont les équivalents de --c-{groupe} avec opacité 0.15.
   On ne peut pas écrire rgba(var(--c-etiq), 0.15) en CSS niveau 3,
   d'où les valeurs numériques — elles correspondent exactement aux tokens de shared.css. */
.detail-chip-etiq   { background: var(--c-etiq-bg);    color: var(--c-etiq);    border: 1px solid var(--c-etiq-border); }
.detail-chip-etiq:hover   { background: var(--c-etiq-a15);   border-color: var(--c-etiq); }
.detail-chip-theme  { background: var(--c-themes-bg);  color: var(--c-themes);  border: 1px solid var(--c-themes-border); }
.detail-chip-theme:hover  { background: var(--c-themes-a15);   border-color: var(--c-themes); }
.detail-chip-langue { background: var(--c-langue-bg);  color: var(--c-langue);  border: 1px solid var(--c-langue-border); }
.detail-chip-langue:hover { background: var(--c-langue-a15);  border-color: var(--c-langue); }
.detail-chip-recueil { background: var(--c-recueil-bg); color: var(--c-recueil); border: 1px solid var(--c-recueil-border); }
.detail-chip-recueil:hover { background: var(--c-recueil-a15); border-color: var(--c-recueil); }
.detail-chip-audio  { background: var(--c-audio-bg);   color: var(--c-audio);   border: 1px solid var(--c-audio-border); }
.detail-chip-audio:hover  { background: var(--c-audio-a15); border-color: var(--c-audio); }
/* Chip auteur — neutre (fond surface, hover navy) */
.detail-chip-author { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.detail-chip-author:hover { background: var(--navy-pale); border-color: var(--navy); }

/* Chips de filtrage audio dans la section Enregistrements de la fiche —
   variante compacte des .detail-chip (album 💿, interprète 🎤). */
.enreg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  border-radius: var(--radius-pill);
  padding: 0.12em 0.55em;
  font-size: var(--fs-sm);       /* 0.75rem — plus compact dans la liste d'enregistrements */
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
  background: var(--c-audio-bg);
  color: var(--c-audio);
  border: 1px solid var(--c-audio-border);
  transition: background 0.15s, border-color 0.15s;
}
.enreg-chip:hover { background: var(--c-audio-a15); border-color: var(--c-audio); }
.enreg-chip em { font-style: italic; }

/* ── PAGINATION ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1.5rem; padding: 1rem 0; }
/* Quand la barre d'impression est visible, la pagination se décale vers le haut (classe ajoutée par JS) */
.pagination.has-print-toolbar { margin-bottom: 4.5rem; }
.pagination-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 0.35rem;
  flex-shrink: 0;
}
.page-jump-select {
  font-size: var(--fs-sm);
  padding: 0.25rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-2);
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.page-jump-select:hover  { border-color: var(--lavender3); }
.page-jump-select:focus  { border-color: var(--accent); }
.page-btn {
  min-width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  padding: 0 0.4rem;
  transition: all 0.15s;
}
.page-btn:hover { border-color: var(--navy); color: var(--navy); }
.page-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.page-btn:disabled { opacity: 0.35; cursor: default; }