/* ============================================================
   L'ÉCHO DE NOSYLAND — un numéro, à lire.
   Que des jetons du royaume : aucune teinte ni aucun corps de texte
   n'est écrit en dur ici. Charte : Design/DESIGN.md
   Deux versions : le téléphone d'abord, l'écran ensuite (60rem et plus).
   ============================================================ */

.echo *,
.echo *::before,
.echo *::after,
.echo-actu *,
.echo-actu *::before,
.echo-actu *::after { box-sizing: border-box; }

/* --- la page : sa toile, son en-tête sobre -------------------- */
body.page-echo {
  margin: 0;
  background: var(--couleur-toile);
  color: var(--couleur-encre);
  font: var(--texte);
}
.page-echo .entete-page {
  display: flex;
  align-items: center;
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--espace-objets) var(--espace-page) 0;
}
.page-echo .entete-marque {
  font: var(--marque);
  color: var(--couleur-encre);
  text-decoration: none;
}

/* --- la feuille : le numéro est posé sur la toile ------------ */
.echo { background: var(--couleur-toile); }

.echo .echo-numero {
  margin: 0 auto;
  padding: var(--espace-haut) var(--espace-page) var(--espace-page-bas);
  background: var(--couleur-fond);
  color: var(--couleur-encre);
  font: var(--texte);
}

/* --- l'en-tête du numéro ------------------------------------- */
.echo .echo-marque,
.echo-actu .echo-etiquette {
  font: var(--etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--couleur-accent);
  margin: 0 0 var(--espace-etiquette);
}

.echo .echo-titre {
  margin: 0 0 var(--espace-texte);
  font: var(--titre-grand);
  color: var(--couleur-encre);
}

.echo .echo-date,
.echo .echo-signature {
  margin: 0 0 var(--espace-fin);
  font: var(--attribution);
  letter-spacing: var(--interlettrage-attribution);
  color: var(--couleur-mention);
}

.echo .echo-une {
  margin: var(--espace-titre) 0 0;
  font: var(--citation);
  font-style: italic;
  color: var(--couleur-encre);
}

/* --- l'affiche : un emplacement tant qu'elle n'est pas là ----- */
.echo .echo-affiche {
  margin-top: var(--espace-objets);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-papier);
  background: var(--couleur-papier);
  overflow: hidden;
}
.echo .echo-affiche img { display: block; width: 100%; height: auto; }
.echo .echo-affiche.vide {
  border-style: dashed;
  padding: 26px var(--espace-etiquette);
  text-align: center;
}
.echo .echo-affiche.vide p {
  margin: 0;
  font: var(--texte-petit);
  color: var(--couleur-mention);
}

/* --- les articles -------------------------------------------- */
.echo .echo-article {
  margin-top: var(--espace-objets);
  padding-top: var(--espace-objets);
  border-top: 1px solid var(--couleur-filet);
}

.echo .echo-etiquette {
  font: var(--etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--couleur-accent);
  margin: 0 0 var(--espace-texte);
}

.echo .echo-article-titre {
  margin: 0 0 var(--espace-texte);
  font: var(--titre-moyen);
  color: var(--couleur-encre);
}

.echo .echo-texte {
  font: var(--texte);
  color: var(--couleur-encre-douce);
}
.echo .echo-texte a { color: var(--couleur-accent); }
.echo .echo-texte a:hover { color: var(--couleur-accent-appui); }
.echo .echo-texte strong { color: var(--couleur-encre); }

/* --- le pied du numéro --------------------------------------- */
.echo .echo-pied {
  margin-top: var(--espace-titre);
  padding-top: var(--espace-objets);
  border-top: 1px dashed var(--couleur-filet);
  font: var(--piece);
  font-style: italic;
  color: var(--couleur-encre);
}

/* --- le bandeau de l'accueil : l'actualité traverse la page --- */
.echo-actu {
  margin: var(--espace-objets) 0;
  background: var(--couleur-papier);
  border-top: 1px solid var(--couleur-filet);
  border-bottom: 1px solid var(--couleur-filet);
  padding: var(--espace-objets) var(--espace-page);
}
.echo-actu .echo-actu-titre {
  margin: 0;
  font: var(--titre-objet);
  color: var(--couleur-encre);
}
.echo-actu .echo-actu-date {
  margin: var(--espace-fin) 0 0;
  font: var(--attribution);
  letter-spacing: var(--interlettrage-attribution);
  color: var(--couleur-mention);
}
.echo-actu .echo-actu-lien {
  display: inline-block;
  margin-top: var(--espace-etiquette);
  font: var(--texte-lien);
  color: var(--couleur-accent);
  text-decoration: none;
}
.echo-actu .echo-actu-lien:hover { color: var(--couleur-accent-appui); }

/* ============================================================
   L'ÉCRAN — la feuille est un objet posé, la ligne ne s'étire pas.
   ============================================================ */
@media (min-width: 60rem) {

  .echo .echo-numero {
    max-width: 52rem;
    margin: var(--espace-objets) auto;
    padding: var(--espace-haut) 4rem var(--espace-page-bas);
  }

  /* Au-delà, la ligne dépasse 90 caractères et l'œil se perd. */
  .echo .echo-texte,
  .echo .echo-une { max-width: 40rem; }

  .echo .echo-affiche { max-width: 40rem; }

  .echo-actu { padding: var(--espace-objets) 4rem; }

  .echo .echo-liste { max-width: 40rem; }
}

/* ============================================================
   LE SOMMAIRE — tous les numéros parus.
   ============================================================ */
.echo .echo-liste { list-style: none; margin: 0; padding: 0; }

.echo .echo-liste-item {
  border-top: 1px solid var(--couleur-filet);
  padding: var(--espace-etiquette) 0;
}

.echo .echo-liste-lien { display: block; text-decoration: none; color: var(--couleur-encre); }
.echo .echo-liste-lien:hover .echo-liste-titre { color: var(--couleur-accent); }

.echo .echo-liste-numero {
  display: block;
  font: var(--etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--couleur-accent);
}

.echo .echo-liste-titre {
  display: block;
  margin-top: var(--espace-fin);
  font: var(--titre-objet);
  color: var(--couleur-encre);
}

.echo .echo-liste-date {
  display: block;
  margin-top: var(--espace-fin);
  font: var(--attribution);
  letter-spacing: var(--interlettrage-attribution);
  color: var(--couleur-mention);
}

.echo .echo-liste-dernier {
  display: inline-block;
  margin-top: var(--espace-fin);
  font: var(--piece);
  font-style: italic;
  color: var(--couleur-mention);
}

.echo .echo-sommaire-vide { margin: 0; font: var(--texte); color: var(--couleur-mention); }

/* --- d'un numéro à l'autre : le sommaire, le dernier paru ------- */
.echo .echo-nav {
  margin: var(--espace-titre) 0 0;
  padding-top: var(--espace-objets);
  border-top: 1px dashed var(--couleur-filet);
}
.echo .echo-nav-lien {
  display: inline-block;
  margin-right: var(--espace-etiquette);
  font: var(--texte-lien);
  color: var(--couleur-accent);
  text-decoration: none;
}
.echo .echo-nav-lien:hover { color: var(--couleur-accent-appui); }

/* Le bandeau de l'Écho peut porter deux liens : ils se suivent, à l'écran aussi. */
.echo-actu .echo-actu-lien + .echo-actu-lien { margin-left: var(--espace-etiquette); }

/* ============================================================
   LES LIENS DU JOURNAL — deux sortes, deux visages.
   Un nom renvoye a sa fiche se voit tout de suite : teinte de l'accent, gras.
   Un nom qui n'a pas encore de fiche reste discret : teinte de mention, pointille.
   Les deux classes sont celles qu'ecrit le parseur : .wiki-link et .wiki-link-new.
   ============================================================ */
.echo a.wiki-link {
  color: var(--couleur-accent);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.echo a.wiki-link:hover { color: var(--couleur-accent-appui); }

.echo a.wiki-link-new {
  color: var(--couleur-mention);
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.echo a.wiki-link-new:hover { color: var(--couleur-accent); }

/* Un personnage cite qui n'est pas encore au wiki : on le dit, sans lien. */
.echo .personnage-non-reference {
  font: var(--texte-lien);
  font-style: italic;
  color: var(--couleur-mention);
}