/* style-03-detail.css — Fiche détaillée (volet), alinéa saillant des paroles. Chargé après style-02 (ordre 01 → 07 : voir style-01-recherche.css). */
/* ── DETAIL DRAWER ── */
.detail-header { background: var(--navy); color: var(--white); padding: 1rem 1.2rem 0.8rem; flex-shrink: 0; }
/* Poignée de glissement (mobile uniquement) — voir le bloc @media(max-width:720px)
   pour son apparence ; masquée par défaut ici, comme .yk-sheet-handle dans
   Hodari (display:none réaffirmé pour desktop dans son propre bloc). */
.detail-header-handle { display: none; }
/* Ligne de contrôles : case impression, ‹ ›, espaceur, ✕ — tous alignés horizontalement */
.detail-header-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.detail-header-spacer { flex: 1; }
.detail-print-select {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.detail-print-select .card-select-cb {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white-75);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.detail-print-select .card-select-cb:checked {
  background: var(--white);
  border-color: var(--white);
}
.detail-print-select .card-select-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 6px;
  height: 11px;
  border: solid var(--navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.detail-close {
  background: none; border: none; color: var(--white-65);
  cursor: pointer; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  transition: color 0.15s;
}
.detail-close:hover { color: var(--white); }
.detail-morceau-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; line-height: 1.2; margin-right: 1.5rem; }
.detail-morceau-meta {
  font-size: var(--fs-sm);
  opacity: 0.7;
  margin-top: 0.2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.detail-scroll { flex: 1; overflow-y: auto; padding: 0 0 4rem; }
.detail-section { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.detail-section-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; }
.detail-row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; font-size: var(--fs-base); align-items: flex-start; }
.detail-row-label { color: var(--text-3); font-weight: 500; min-width: 130px; flex-shrink: 0; }
/* min-width:0 + overflow-wrap:anywhere : sans ça, un item flex garde par
   défaut la largeur intrinsèque de son contenu (min-width:auto implicite) —
   un texte SANS espace ni tiret pour couper (ex. une URL Calameo longue dans
   un Commentaire) refusait de rétrécir et débordait à droite de l'écran dans
   la fiche détaillée. Même famille de piège que DECISIONS.md §9 (enfant flex
   qui ne peut pas rétrécir sous son contenu), ici côté texte plutôt que côté
   conteneur. */
.detail-row-val { color: var(--text); flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* val-chips : les badges/chips se répartissent sur plusieurs lignes si nécessaire */
.detail-row-val-chips { color: var(--text); flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: flex-start; }

.accordion { border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: 0.5rem; }
.accordion-toggle {
  width: 100%;
  padding: 0.5rem 0.7rem;
  min-height: 2.5rem; /* Paroles a un bouton "Copier" en plus, sans ça sa
    bande fermée est plus haute que celle de Présentation, qui n'a que le
    libellé — voir DECISIONS.md. */
  background: var(--surface);
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  font-weight: 500;
  transition: background 0.15s;
}
.accordion-toggle:hover { background: var(--lavender); }
.accordion-toggle .arrow { font-size: var(--fs-xs); transition: transform 0.2s; }
.accordion-toggle.open .arrow { transform: rotate(90deg); }
.accordion-body {
  padding: 0.8rem; font-size: var(--fs-base); color: var(--text-2); line-height: 1.6;
  background: var(--white); white-space: pre-wrap; font-family: var(--font-serif);
  display: none; max-height: 0; overflow: hidden; box-sizing: border-box;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
/* ── ALINÉA SAILLANT DES PAROLES (catalogue ET Hodari, voir visiteur.css) ──
   Chaque vers est désormais son propre <div> (renderParolesHtml, utils.js) —
   condition nécessaire pour cibler le retour à la ligne NON forcé : quand un
   vers déborde de la largeur disponible et retombe seul à la ligne suivante,
   cette suite doit être légèrement plus à droite que le début du vers.
   `text-indent` ne s'applique qu'à la toute première ligne visuelle d'un
   bloc — jamais aux suivantes au sein du MÊME bloc — d'où l'obligation d'un
   bloc par vers : ici, la longueur du vers importe peu, seul compte le fait
   qu'il tienne ou non sur une seule ligne visuelle.
   Technique dite de l'alinéa "en retrait suspendu" (hanging indent) :
   padding-left pousse TOUTES les lignes vers la droite, text-indent négatif
   ramène SEULEMENT la première à sa position d'origine — donc, ici, seules
   les lignes de continuation (retour à la ligne non forcé) restent décalées.
   white-space:pre-wrap est hérité de .accordion-body/.yk-text-paroles
   (propriété héritée par les enfants) : les espaces multiples saisis dans le
   classeur restent préservés à l'intérieur d'un même vers. */
.parole-line {
  padding-left: 1.8em;  /* alinéa de REPLI (retour à la ligne non forcé) — était 1.6em — doit rester identique partout, y compris dans .parole-line-cont ci-dessous */
  text-indent: -1.8em;
}
/* ── ALINÉA SAILLANT DE PARAGRAPHE (couplet numéroté "1. " "2. "… ou
   paragraphe Refrain/Dernier refrain/Premier refrain/Refrain N/Ostinato/
   Contrechant(s), voir renderParolesHtml() dans utils.js) ──
   Les lignes qui suivent le marqueur, jusqu'à la ligne vide suivante,
   reçoivent .parole-line-cont EN PLUS de .parole-line. Deux alinéas
   distincts, volontairement séparés :
     - alinéa de PARAGRAPHE (position de la 1ère ligne visuelle de chacune de
       ces lignes) : 1.1em — environ la largeur de "3. ".
     - alinéa de REPLI (retour à la ligne non forcé, SI l'une de ces lignes
       déborde à son tour) : 1.8em — la MÊME position absolue que .parole-line
       seul, pas seulement le même écart relatif (erreur d'une version
       antérieure : voir DECISIONS.md pour le détail du calcul).
   D'où : padding-left IDENTIQUE à .parole-line (1.8em — ancre le débordement
   au même endroit à l'écran, marqueur ou continuation), et text-indent
   redéfini ICI (pas hérité) à -0.7em seulement (1.8 - 0.7 = 1.1em, l'alinéa
   de paragraphe, inchangé) plutôt que -1.8em.
   Volontairement absent de copyParolesRich/parolesToClipboardHtml (utils.js) :
   ces alinéas sont une mise en forme d'affichage, jamais copiés dans le
   presse-papiers. */
.parole-line-cont {
  padding-left: 1.8em;
  text-indent: -0.7em;
}
/* .accordion-body.open : hauteur pilotée par JS (voir toggleAccordion) plutôt
   qu'un simple display:block, pour permettre la transition animée. */

.recueils-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 0.5rem; }
.recueils-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--surface-soft); }
.recueils-table td:first-child { color: var(--text-3); font-weight: 500; width: 110px; }

.harm-entry { background: var(--surface); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.harm-entry-head { font-size: var(--fs-base); font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; }
.harm-entry-sub { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 0.4rem; }

.theme-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); background: var(--lavender); color: var(--navy); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; margin: 0.15rem; border: 1px solid var(--lavender2); transition: background 0.15s; }
.theme-chip:hover { background: var(--lavender2); }

.yt-placeholder { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.5rem; }
/* Ratio 16:9 imposé au lecteur (catalogue ET Hodari, .yt-placeholder est
   déjà réutilisée par les deux — voir visiteur.css). Avant : hauteur fixe de
   200px codée en dur dans l'attribut HTML, sans rapport avec la largeur
   réelle du conteneur (trop haut sur mobile étroit, trop bas sur grand
   écran). height:auto + aspect-ratio calcule la hauteur à partir de la
   largeur réelle, en 16:9 quelle que soit celle-ci. */
.yt-placeholder iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}
.yt-mini-list { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.yt-mini { width: 80px; border-radius: 4px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; }
.yt-mini.active { border-color: var(--navy); }
.yt-mini img { width: 100%; display: block; }
.yt-mini-label { font-size: var(--fs-xs); color: var(--text-3); padding: 0.2rem; }

.proche-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; margin-bottom: 0.4rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.proche-card:hover { border-color: var(--navy); box-shadow: 0 2px 8px var(--navy-10); }
.proche-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--navy); }
.proche-card-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 0.15rem; }
/* Variante discrète : chants proches par similarité (titre/incipit), en retrait
   par rapport aux chants liés (lien direct / recherche textuelle), mis en avant ci-dessus. */
.proche-card-minor {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.3rem;
  margin-left: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.proche-card-minor:hover { border-color: var(--lavender3); background: var(--surface); }
.proche-card-minor-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.proche-card-minor-sub { font-size: var(--fs-xs); color: var(--text-3); flex-shrink: 0; }

.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-3); }
.empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.empty-state p { font-size: var(--fs-md); }

/* Page d'attente plein écran (logo + anneau) pendant le chargement/traitement
   initial du catalogue — remplace l'ancienne barre textuelle + barre de
   progression (qui laissait voir l'interface du catalogue + un texte
   "chargement/traitement..." pendant quelques dixièmes de seconde, parfois
   plus au premier chargement). Validée sur maquette avec Joseph avant
   implémentation : fond uni identique au logo (--navy), logo SANS ombre
   portée (doit se fondre dans le fond), anneau de 40px sans texte visible.
   position:fixed + inset:0 + z-index élevé : couvre tout (topbar comprise),
   quel que soit l'endroit du HTML où #loading-msg se trouve réellement. */
/* .loading-bar : classe PARTAGÉE — stats.html l'utilise aussi (texte inline
   simple, pas de prise en charge plein écran). Garder ce style générique ici
   ; voir .catalogue-loading plus bas pour la page d'attente plein écran du
   catalogue, qui a sa propre classe pour ne pas déborder sur les autres
   pages (c'est exactement ce qui causait le "fondu étrange" sur
   Statistiques, signalé par Joseph — .loading-bar portait par erreur tout
   le traitement plein écran ci-dessous). */
.loading-bar { background: var(--lavender); text-align: center; padding: 3rem; font-size: var(--fs-md); color: var(--text-2); }

.catalogue-loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  /* Dégradé (comme le hero/login) visible un court instant, qui SE REFERME
     vers le navy uni via ::before ci-dessous — confirmé par Joseph. */
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--hero-end) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.35s ease;
  overflow: hidden;
}
.catalogue-loading.fade-out { opacity: 0; pointer-events: none; }
.catalogue-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0;
  animation: loading-settle 0.3s ease-out 0.1s forwards;
}
@keyframes loading-settle { to { opacity: 1; } }
.load-logo, .load-ring { position: relative; z-index: 1; }
/* #results-container : opacity 0 par défaut dès qu'affiché (display:block),
   pour que l'ajout de .visible juste après (voir app.js) déclenche bien un
   fondu plutôt qu'une apparition instantanée. */
#results-container { opacity: 0; transition: opacity 0.35s ease; }
#results-container.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .catalogue-loading, #results-container { transition: none; }
}
.load-logo {
  width: 112px;
  height: 112px;
  border-radius: 25px;
  display: block;
}
.load-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--white-15);
  border-top-color: var(--white-90);
  animation: load-spin 0.9s linear infinite;
}
@keyframes load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .load-ring { animation: none; opacity: 0.6; }
  .catalogue-loading::before { animation: none; opacity: 1; }
}
/* Lecteurs d'écran uniquement : le texte d'étape (setLoadingStep) existe
   toujours pour l'accessibilité, mais ne s'affiche plus visuellement —
   la page d'attente n'a volontairement plus de texte visible. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}