/* Bonjour Lama · pages d'édition et archives.
   Les composants EnTete, Info, Zenometre, Aparte, LeLamaCrache, Respire et Signature
   du design system, écrits en HTML sans JavaScript. Se charge après landing.css.
   Comme landing.css : couleurs, polices, tailles, espacements et rayons viennent
   uniquement de assets/ds/tokens.css (voir CLAUDE.md). Mode d'emploi : README.md. */

/* ---------- La colonne de lecture ---------- */
.edition {
  max-width: 42rem; /* environ 60 caractères de texte courant */
  margin-inline: auto;
}
.edition p { margin: 0; }
.edition p + p { margin-top: var(--espace-4); }

/* ---------- EnTete : bloc-marque, date et durée, filet dessous ---------- */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3) var(--espace-4);
  padding-block: var(--espace-5);
  border-bottom: 1px solid var(--trait);
}
.entete .logo { width: min(306px, 100%); } /* 56 px de haut, comme dans le design system */
.entete .logo img { width: 100%; }
.entete-date {
  margin: 0;
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
}

.edition-corps { padding-top: var(--espace-6); }
.edition-corps > section + p { margin-top: var(--espace-6); } /* texte sans titre après une rubrique */

/* « Bonjour, » : le premier mot de l'édition, et lui seul. */
.bonjour {
  display: block;
  margin-bottom: var(--espace-2);
  font-family: var(--bonjour-police);
  font-size: var(--bonjour-taille);
  line-height: var(--bonjour-interligne);
  font-weight: var(--bonjour-graisse);
  letter-spacing: var(--bonjour-lettrage);
}

/* ---------- Rubriques (Le Zénomètre, Karma, Réincarnation, correction…) ---------- */
.rubrique { margin-top: var(--espace-6); }
.edition h2 {
  margin: 0 0 var(--espace-4);
  font-family: var(--rubrique-police);
  font-size: var(--rubrique-taille);
  line-height: var(--rubrique-interligne);
  font-weight: var(--rubrique-graisse);
  letter-spacing: var(--rubrique-lettrage);
}

/* ---------- Le Zénomètre : sections France, Europe, Monde (h3), infos en h4 ---------- */
.zone + .zone { margin-top: var(--espace-6); }
.edition .zone > h3 {
  margin: 0 0 var(--espace-4);
  font-family: var(--etiquette-police);
  font-size: var(--etiquette-taille);
  line-height: var(--etiquette-interligne);
  font-weight: var(--etiquette-graisse);
  letter-spacing: var(--etiquette-lettrage);
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---------- Info : titre, texte, sources, aparté, Zénomètre ---------- */
.info + .info {
  margin-top: var(--espace-5);
  padding-top: var(--espace-5);
  border-top: 1px solid var(--trait);
}
.edition h3,
.edition h4 { /* titre d'une info : h4 dans le Zénomètre, h3 dans les autres rubriques */
  margin: 0;
  text-wrap: balance;
  font-family: var(--titre-info-police);
  font-size: var(--titre-info-taille);
  line-height: var(--titre-info-interligne);
  font-weight: var(--titre-info-graisse);
  letter-spacing: var(--titre-info-lettrage);
}
.edition .info > :is(h3, h4) { margin-bottom: var(--espace-2); }

/* ---------- Zenometre : en bas de l'info, « Zénitude : », 5 lamas pleins ou à 25 %, la légende ---------- */
.edition .zeno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}
.zeno-titre {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  white-space: nowrap;
}
.zeno-pictos { display: inline-flex; align-items: center; gap: var(--espace-1); }
.zeno img { display: block; }
.zeno-vide { opacity: .25; }
.zeno-legende {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
  white-space: nowrap;
}
.edition .zeno-zero { flex-wrap: nowrap; }
.zeno-zero img { flex: none; }
.zeno-zero .zeno-legende { white-space: normal; }

/* ---------- Aparte : la voix du lama ---------- */
.aparte {
  font-family: var(--aparte-police);
  font-style: var(--aparte-style);
  font-weight: var(--aparte-graisse);
}

/* ---------- Encadrés : Le lama crache, Respire, annonce, erratum ---------- */
.encadre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espace-4);
  margin-top: var(--espace-6);
  padding: var(--espace-5);
  border: 1px solid transparent; /* visible en mode contraste élevé */
  border-radius: var(--rayon-m);
}
.encadre-corps { flex: 1 1 14rem; min-width: 0; }
.edition .encadre h2 { margin-bottom: var(--espace-2); }
.avatar { display: block; flex: none; border-radius: var(--rayon-rond); }

.crache { background: var(--fond-nuit); color: var(--texte-sur-nuit); }
.crache a { color: inherit; }
.crache :focus-visible { outline-color: var(--soleil); } /* l'anneau reste visible sur la nuit */
.respire { background: var(--fond-aube); color: var(--texte); }
.annonce, .erratum { background: var(--fond-laine); color: var(--texte); }
.erratum { margin-top: 0; margin-bottom: var(--espace-6); }

/* ---------- Ecouter : le lecteur de la version audio, sous les errata, avant l'ouverture ---------- */
.ecouter {
  margin-bottom: var(--espace-6);
  padding: var(--espace-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
}
.edition .ecouter p { margin: 0; }
.ecouter-libelle {
  font-family: var(--bouton-police);
  font-size: var(--bouton-taille);
  line-height: var(--bouton-interligne);
  font-weight: var(--bouton-graisse);
}
.ecouter audio { display: block; width: 100%; min-height: 44px; margin-top: var(--espace-3); }
.edition .ecouter-note {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
  white-space: nowrap; /* passe à la ligne d'un bloc */
}
.ecouter-telecharger a { /* cible de 44 px */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
}

/* ---------- Clôture : la formule fixe après Respire, dans la voix du lama ---------- */
.edition .cloture {
  margin-top: var(--espace-6);
  font-family: var(--aparte-police);
  font-style: var(--aparte-style);
  font-weight: var(--aparte-graisse);
}

/* ---------- Signature ---------- */
.signature {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  margin-top: var(--espace-4);
  font-family: var(--aparte-police);
  font-size: var(--aparte-taille);
  line-height: var(--aparte-interligne);
  font-style: var(--aparte-style);
  font-weight: var(--aparte-graisse);
}

/* ---------- Liens vers les archives et l'édition précédente ---------- */
/* Les boutons eux-mêmes (.boutons, .bouton-secondaire) sont dans landing.css. */
.edition-nav {
  margin-top: var(--espace-7);
  padding-top: var(--espace-5);
  border-top: 1px solid var(--trait);
}
/* Le lien vers la page S'abonner, juste avant : un seul filet pour les deux. */
.edition .edition-abonnement {
  margin: var(--espace-7) 0 0;
  padding-top: var(--espace-5);
  border-top: 1px solid var(--trait);
}
.edition-abonnement + .edition-nav { margin-top: var(--espace-4); padding-top: 0; border-top: 0; }
/* ---------- Archives ---------- */
ul.archives { list-style: none; margin: var(--espace-5) 0 0; padding: 0; }
ul.archives li { margin: 0; border-top: 1px solid var(--trait); }
.archives li:last-child { border-bottom: 1px solid var(--trait); }
.archives a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5em;
  min-height: 44px;
  padding-block: var(--espace-3);
  font-family: var(--titre-info-police);
  font-size: var(--titre-info-taille);
  line-height: var(--titre-info-interligne);
  font-weight: var(--titre-info-graisse);
}
.archives .corrigee {
  font-family: var(--legende-police);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  font-weight: var(--legende-graisse);
  color: var(--texte-doux);
}
.doc .attente {
  font-family: var(--chapo-police);
  font-size: var(--chapo-taille);
  line-height: var(--chapo-interligne);
}

/* ---------- Temps de lecture restant : bandeau fixé en bas de l'écran ----------
   Part de la durée de l'en-tête (--minutes, écrit dans la page) et arrive à 0 en bas de
   la page. Sans JavaScript : le décompte et le filet ambre suivent le défilement
   (animation-timeline). Il double l'en-tête, d'où aria-hidden dans la page. Les
   navigateurs qui ne gèrent pas animation-timeline ne l'affichent pas. */
@property --reste { syntax: "<integer>"; inherits: false; initial-value: 0; }
.progression { display: none; }
@supports (animation-timeline: scroll()) {
  html:has(.progression) {
    --progression-hauteur: calc(var(--legende-taille) * var(--legende-interligne) + 2 * var(--espace-2) + 1px);
    scroll-padding-bottom: var(--progression-hauteur); /* le focus clavier n'est jamais caché dessous */
  }
  .progression ~ .site-footer { margin-bottom: var(--progression-hauteur); }
  .progression {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; /* sous le lien d'évitement */
    padding: var(--espace-2) var(--espace-4);
    border-top: 1px solid var(--trait);
    background: var(--fond-carte);
    color: var(--texte-doux);
    font-family: var(--legende-police);
    font-size: var(--legende-taille);
    line-height: var(--legende-interligne);
    font-weight: var(--legende-graisse);
    text-align: center;
    pointer-events: none;
    /* Décompte en minutes entières : N au départ, 1 dans le dernier N-ième de la page,
       0 tout en bas. Les propriétés d'animation suivent le raccourci, qui les remet à zéro. */
    counter-reset: reste var(--reste);
    animation: progression-decompte both;
    animation-timing-function: steps(var(--minutes), end);
    animation-timeline: scroll(root block);
  }
  .progression::after { content: "Temps de lecture restant\00a0: " counter(reste) "\00a0min"; }
  .progression::before { /* le filet, plein au départ, vide en bas de la page */
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--soleil);
    transform-origin: 0 50%;
    animation: progression-filet linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progression-decompte { from { --reste: var(--minutes); } to { --reste: 0; } }
  @keyframes progression-filet { from { transform: scaleX(1); } to { transform: scaleX(0); } }
}

/* ---------- Adaptations ---------- */
@media (min-width: 37.5em) { /* assez large pour le logo et la date sur une ligne */
  .entete-date { margin-left: auto; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .progression { display: none; } /* landing.css y coupe toutes les animations */
  .progression ~ .site-footer { margin-bottom: 0; }
}
@media (forced-colors: active) {
  .encadre { border-color: CanvasText; }
  .progression { border-color: CanvasText; }
  .progression::before { background: Highlight; }
}
@media print {
  .edition-nav, .edition-abonnement, .progression, .ecouter { display: none; }
  .progression ~ .site-footer { margin-bottom: 0; }
  .encadre { border-color: currentColor; }
}