/* =========================================================================
   Paléo — Blog de vulgarisation sur les neumes et le chant grégorien
   Feuille de style partagée
   Thème « manuscrit » : parchemin, rubriques rouges, initiales dorées.
   Compatible clair / sombre (prefers-color-scheme).
   ========================================================================= */

:root {
  --parchemin:      #f6efe1;
  --parchemin-fonce:#efe4cf;
  --encre:          #2b2622;
  --encre-douce:    #5c534a;
  --rubrique:       #a01818;   /* le rouge des rubriques médiévales */
  --rubrique-clair: #c94a3a;
  --or:             #b9932f;
  --or-clair:       #e0c168;
  --ligne:          #d9cbb0;
  --portee:         #9a8f78;   /* couleur des lignes de portée */
  --bleu-laon:      #2f6f8f;   /* neumes de Laon (repère visuel) */
  --vert-sg:        #4f7a3a;   /* neumes de Saint-Gall (repère visuel) */
  --carte:          #fffdf7;
  --ombre:          rgba(60, 45, 20, 0.12);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;

  --largeur-max: 820px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --parchemin:      #201d19;
    --parchemin-fonce:#2a2621;
    --encre:          #ece3d2;
    --encre-douce:    #b3a893;
    --rubrique:       #e0705f;
    --rubrique-clair: #f0917f;
    --or:             #d8b45a;
    --or-clair:       #f0d488;
    --ligne:          #3d3730;
    --portee:         #6b6152;
    --bleu-laon:      #6fb6d6;
    --vert-sg:        #8cc06a;
    --carte:          #262119;
    --ombre:          rgba(0, 0, 0, 0.4);
  }
}

/* ------------------------------------------------------------------ Reset */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--encre);
  background-color: var(--parchemin);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,0.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(160,24,24,0.04), transparent 40%);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- En-tête */
.site-header {
  border-bottom: 3px double var(--or);
  background: var(--parchemin-fonce);
}
.site-header .bandeau {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 1.4rem 1.2rem 1rem;
  text-align: center;
}
.site-header .titre-site {
  font-size: 2rem;
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--rubrique);
}
.site-header .titre-site a { color: inherit; text-decoration: none; }
.site-header .sous-titre {
  margin: 0.2rem 0 0;
  font-style: italic;
  color: var(--encre-douce);
  font-size: 1rem;
}

/* --------------------------------------------------------------- Menu nav */
.site-nav {
  background: var(--rubrique);
}
.site-nav ul {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 0.6rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem;
}
.site-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  color: #f8ead0;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--or-clair);
  background: rgba(0,0,0,0.12);
}

/* --------------------------------------------------------------- Contenu */
main {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 2.2rem 1.2rem 3rem;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 {
  font-size: 2rem;
  color: var(--rubrique);
  margin: 0 0 0.3rem;
}
.chapeau {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--encre-douce);
  margin: 0 0 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--ligne);
}
h2 {
  font-size: 1.55rem;
  margin: 2.5rem 0 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--or);
  display: inline-block;
}
h3 {
  font-size: 1.2rem;
  color: var(--rubrique-clair);
  margin: 1.8rem 0 0.5rem;
}

p { margin: 0 0 1.1rem; }
a { color: var(--rubrique); }

/* Lettrine (initiale ornée) sur le premier paragraphe */
.lettrine::first-letter {
  float: left;
  font-size: 4.2rem;
  line-height: 0.72;
  padding: 0.35rem 0.55rem 0 0;
  color: var(--or);
  font-weight: 700;
  font-family: var(--serif);
}

/* ----------------------------------------------------------- Composants */

/* Encadré « le saviez-vous / à retenir » */
.encadre {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--or);
  border-radius: 4px;
  padding: 1rem 1.3rem;
  margin: 1.6rem 0;
  box-shadow: 0 2px 8px var(--ombre);
}
.encadre.def   { border-left-color: var(--bleu-laon); }
.encadre.astuce{ border-left-color: var(--vert-sg); }
.encadre .etiquette {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rubrique);
  margin-bottom: 0.3rem;
}
.encadre.def    .etiquette { color: var(--bleu-laon); }
.encadre.astuce .etiquette { color: var(--vert-sg); }
.encadre p:last-child { margin-bottom: 0; }

/* Fiche « carte d'identité » d'un chant */
.fiche {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 0.4rem 1.3rem;
  margin: 1.5rem 0 2rem;
  box-shadow: 0 2px 8px var(--ombre);
}
.fiche dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.2rem;
  margin: 0.8rem 0;
}
.fiche dt {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rubrique);
  font-weight: 700;
  align-self: baseline;
}
.fiche dd { margin: 0; }

/* Bloc « Écouter le chant » + lecteur audio */
.lecteur-audio {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--rubrique);
  border-radius: 6px;
  padding: 1rem 1.3rem;
  margin: 1.6rem 0;
  box-shadow: 0 2px 8px var(--ombre);
}
.lecteur-audio .etiquette {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rubrique);
  margin-bottom: 0.5rem;
}
.lecteur-audio .etiquette::before { content: "♪ "; }
.lecteur-audio audio { width: 100%; margin: 0.2rem 0 0.4rem; }

/* Grille des interprétations (vidéos YouTube) */
.videos-audio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0.8rem 0 0.4rem;
}
.video-yt { margin: 0; }
.video-yt .ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ligne);
}
/* Repli pour navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .video-yt .ratio { height: 0; padding-bottom: 56.25%; }
}
.video-yt .ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-yt figcaption {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin-top: 0.4rem;
  line-height: 1.35;
}
.video-yt figcaption strong { color: var(--encre); }

.lecteur-audio .note-audio {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin: 0.3rem 0 0;
}
.lecteur-audio .note-audio code {
  background: var(--parchemin-fonce);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

/* Emplacement pour insérer un fac-similé / scan du Graduale Triplex */
.facsimile {
  margin: 1.6rem 0;
  border: 1px dashed var(--portee);
  border-radius: 6px;
  background: repeating-linear-gradient(
      -45deg, transparent, transparent 12px,
      rgba(154,143,120,0.06) 12px, rgba(154,143,120,0.06) 24px);
  padding: 2.2rem 1.2rem;
  text-align: center;
  color: var(--encre-douce);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.facsimile img { max-width: 100%; height: auto; border-radius: 4px; }
.facsimile figcaption {
  margin-top: 0.7rem;
  font-style: italic;
  font-size: 0.9rem;
}

/* Bloc de texte latin + traduction côte à côte */
.texte-latin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 2rem;
  background: var(--parchemin-fonce);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
}
.texte-latin .lat { font-style: italic; }
.texte-latin .fr  { color: var(--encre-douce); }
.texte-latin .entete {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rubrique);
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 0.2rem;
  margin-bottom: 0.3rem;
}
@media (max-width: 600px) {
  .texte-latin { grid-template-columns: 1fr; }
  .texte-latin .entete.fr { margin-top: 0.8rem; }
}

/* Figure pédagogique (partition en neumes) */
.figure-neume {
  margin: 1.6rem 0;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 1.2rem 1rem 1rem;
  box-shadow: 0 2px 8px var(--ombre);
  text-align: center;
}
.figure-neume .partition-scroll { overflow-x: auto; }
.figure-neume svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.figure-neume figcaption {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--encre-douce);
  font-style: italic;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* Galerie de neumes (schémas SVG) */
.galerie-neumes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.carte-neume {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 0.8rem;
  text-align: center;
  box-shadow: 0 2px 6px var(--ombre);
}
.carte-neume svg { display: block; margin: 0 auto 0.4rem; }
.carte-neume .nom {
  font-weight: 700;
  color: var(--rubrique);
  display: block;
}
.carte-neume .desc {
  font-size: 0.85rem;
  color: var(--encre-douce);
  font-family: var(--sans);
}

/* couleurs de repérage pour les traits SVG */
.svg-portee  { stroke: var(--portee); stroke-width: 1; }
.svg-neume   { fill: var(--encre); stroke: var(--encre); }
.svg-laon    { fill: var(--bleu-laon); stroke: var(--bleu-laon); }
.svg-sg      { fill: var(--vert-sg);  stroke: var(--vert-sg); }

/* Bibliographie (liste de références, retrait bibliographique) */
.biblio { list-style: none; padding: 0; margin: 0.6rem 0 1.4rem; }
.biblio li {
  padding: 0.35rem 0 0.35rem 1.6rem;
  text-indent: -1.6rem;
  border-bottom: 1px solid var(--ligne);
  line-height: 1.5;
}
.biblio li:last-child { border-bottom: 0; }
.biblio .auteur { font-variant: small-caps; letter-spacing: 0.02em; }
.biblio .ref-note {
  display: block;
  text-indent: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin-top: 0.15rem;
}

/* Tableau (lettres significatives, glossaire) */
table.grille {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.98rem;
}
table.grille caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 0.4rem;
}
table.grille th, table.grille td {
  border: 1px solid var(--ligne);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
table.grille th {
  background: var(--parchemin-fonce);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rubrique);
}
table.grille tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

/* Légende de couleurs des trois notations */
.legende-triplex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1.2rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.legende-triplex span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legende-triplex .pastille {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  display: inline-block;
}
.pastille.sg   { background: var(--vert-sg); }
.pastille.vat  { background: var(--encre); }
.pastille.laon { background: var(--bleu-laon); }

/* Navigation entre les 4 exemples (pied de page d'article) */
.suite {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ligne);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.suite a { text-decoration: none; font-weight: 600; }
.suite .prec::before { content: "‹ "; }
.suite .suiv::after  { content: " ›"; }

/* Grille de cartes sur la page d'accueil */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0;
}
.carte-lien {
  display: block;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-top: 4px solid var(--rubrique);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--encre);
  box-shadow: 0 2px 8px var(--ombre);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.carte-lien:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--ombre); }
.carte-lien .num {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 700;
}
.carte-lien h3 { margin: 0.2rem 0 0.4rem; color: var(--rubrique); }
.carte-lien p { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }

/* --------------------------------------------------------------- Pied de page */
.site-footer {
  border-top: 3px double var(--or);
  background: var(--parchemin-fonce);
  color: var(--encre-douce);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.site-footer .inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.site-footer a { color: var(--rubrique-clair); }
.btn-pdf {
  display: inline-block;
  background: var(--rubrique);
  color: #f8ead0 !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--or);
  margin-bottom: 0.6rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-pdf:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--ombre);
  color: #fff !important;
}
.btn-pdf.grand { font-size: 1.05rem; padding: 0.7rem 1.5rem; margin-bottom: 0; }

/* Bandeau d'appel au téléchargement (page d'accueil) */
.hero-pdf {
  text-align: center;
  margin: 1.8rem 0 2.2rem;
  padding: 1.4rem 1rem;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--ombre);
}
.hero-pdf-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------- Divers */
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--parchemin-fonce);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  color: var(--encre-douce);
}
.mot-latin { font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }