/* chants.e-e-e.bible — compléments propres au site des chants.
   L'allure vient de publish.css, copiée du coffre à chaque publication : la
   même que l'atelier. Ce fichier ne pose que ce que l'atelier n'a pas :
   paroles, partition, vidéo, sons.
   Couleurs : seulement les variables de Quartz (--secondary, --darkgray…),
   posées sur :root, donc jamais hors de portée. --gray est trop pâle pour
   du texte (contraste 2,9 sur le fond clair) : --darkgray à la place. */

/* La liste automatique des dossiers (rangée par date) est remplacée par la
   liste du générateur, rangée par recueil puis par numéro. */
.page-listing { display: none; }

.canto-recueil { color: var(--darkgray); margin-top: 0; }

/* Numéro de strophe dans la marge : les quatre vers commencent au même endroit. */
.canto-letra p { position: relative; margin: 0 0 1.1em; padding-left: 2em; line-height: 1.6; }
.canto-estrofa { position: absolute; left: 0; font-weight: 700; color: var(--secondary); }
/* Un vers par ligne ; sur un écran étroit, la suite d'un vers trop long passe
   en retrait, pour ne pas ressembler à un vers de plus. */
.canto-verso { display: block; padding-left: 1em; text-indent: -1em; }

/* Pages de la partition en images, fond blanc même en mode sombre. */
.canto-partitura img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 0 1em;
  background: #fff;
  border: 1px solid var(--lightgray);
  border-radius: 6px;
}

.canto-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.2em; }
.canto-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

.canto-voces { list-style: none; padding-left: 0; }
.canto-voces li { margin: 0 0 1.2em; }
.canto-voces audio { display: block; width: 100%; margin: 0.3em 0; }

.canto-credito,
.canto-pronto { color: var(--darkgray); font-size: 0.9em; }
.canto-pronto { font-style: italic; }

/* Pages d'écoute des feuilles d'explication (là où mène le QR code imprimé) :
   le lecteur sur toute la largeur, puis la feuille, comme la partition. */
.canto-explicacion audio { display: block; width: 100%; margin: 0.3em 0; }
.canto-duracion { color: var(--darkgray); font-size: 0.9em; margin-right: 0.8em; }
.canto-hoja img {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 0 0 1em;
  background: #fff;
  border: 1px solid var(--lightgray);
  border-radius: 6px;
}

/* Vidéo-leçon (9:16) : debout, à la largeur d'un téléphone, jamais plus large. */
.canto-leccion video {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 0 0.5em;
  background: #000;
  border-radius: 6px;
}
/* Le lien de téléchargement est une cible pour le doigt : 24 px de haut au moins (WCAG 2.5.8),
   relevé par le contrôle de rendu le 2026-11-07 (142 × 20 px). */
.canto-leccion a { display: inline-block; padding: 0.5em 0; }

/* Vidéos d'apprentissage : une colonne de lecteurs debout ; liens de téléchargement à 24 px au moins (WCAG 2.5.8). */
.canto-videos figure { margin: 0 0 1.4em; }
.canto-videos figcaption { font-weight: 700; margin-bottom: 0.3em; }
.canto-videos video { display: block; width: 100%; max-width: 360px; height: auto; background: #000; border-radius: 6px; }
.canto-videos a, .canto-dossier a { display: inline-block; padding: 0.5em 0; }