/* ============================================================
   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, et l'ossature du site --------------- */
body.page-echo {
  margin: 0;
  background: var(--couleur-toile);
  color: var(--couleur-encre);
  font: var(--texte);
}

/* ============================================================
   L'ÉCHO PORTE L'OSSATURE DU SITE — entête, nav, pied de page.
   L'ancienne feuille du site pose des règles sur les balises elles-mêmes
   (section en colonne centrée et bornée, p avec ses marges, h1 et h2 avec
   leurs corps) : elles ont été écrites pour la page d'accueil et elles
   écraseraient le registre. On les remet d'aplomb ici, et ici seulement.
   ============================================================ */
.page-echo main { display: block; }

.page-echo p,
.page-echo h1,
.page-echo h2 { margin: 0; padding: 0; }

.page-echo section {
  display: block;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Le numéro a son propre entête : elle n'a rien à voir avec celle du site,
   même si les deux portent le même nom de balise. */
.page-echo .echo-entete {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  justify-content: initial;
}

/* --- 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);
}

/* Le sous-titre du sommaire : sous « L'Écho de Nosyland », ce qu'on trouve là.
   Un cran sous le titre (corps et couleur), et la phrase de mention respire. */
.echo .echo-sous-titre {
  margin: 0 0 var(--espace-etiquette);
  font: var(--titre-moyen);
  color: var(--couleur-encre-douce);
}

.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 --- */
/* ============================================================
   LE BANDEAU DE L'ÉCHO, SUR L'ACCUEIL.
   Une bande pleine largeur, deux filets, et rien d'autre : entre le bloc
   d'accueil et la suite du site. C'est la première chose vivante que voit
   un visiteur — elle ne se range pas dans une carte, elle ne se mêle pas
   aux offres.
   ============================================================ */
.echo-actu {
  margin: 0;
  background: var(--couleur-papier);
  border-top: 1px solid var(--couleur-filet);
  border-bottom: 1px solid var(--couleur-filet);
  padding: var(--espace-page) var(--espace-page);
}

/* La petite étoile de l'étiquette : un repère, pas une image. */
.echo-actu .echo-etiquette::before {
  content: "✦";
  margin-right: 0.6em;
}

/* Le bandeau se lit en deux zones : le numéro à gauche, son ouverture à droite.
   Sur téléphone, l'une passe sous l'autre. */
.echo-actu .echo-actu-ouverture { margin-top: var(--espace-objets); }

/* L'amorce du premier article : sa rubrique, son titre, le début de son texte. */
.echo-actu .echo-actu-rubrique {
  font: var(--etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--couleur-accent);
  margin: 0 0 var(--espace-fin);
}

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

/* Le texte de l'amorce : on borne la ligne, sinon l'œil se perd à l'écran. */
.echo-actu .echo-actu-texte {
  font: var(--texte);
  color: var(--couleur-encre-douce);
  margin: 0 0 var(--espace-etiquette);
  max-width: 40rem;
}

.echo-actu .echo-actu-suites { margin: 0; }
.echo-actu .echo-actu-suites .echo-actu-lien { margin-top: 0; }
.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;
}
/* US-NOS-006-260 (idée 166) : le survol d'un lien de l'Écho reste à la souris — sur un écran
   tactile il se posait au toucher et ne se levait plus. L'appui, juste après, répond au doigt. */
@media (hover: hover) {
  .echo-actu .echo-actu-lien:hover { color: var(--couleur-accent-appui); }
}
.echo-actu .echo-actu-lien:active { 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; }

  /* À l'écran, le bandeau s'aligne sur la marge du texte de la page : les deux
     bouts du bandeau tombent ainsi sur les mêmes colonnes que les cartes. */
  .echo-actu { padding: var(--espace-objets) 4rem; }

  /* Les deux zones du bandeau côte à côte : le numéro, puis son ouverture. */
  .echo-actu .echo-actu-interieur {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--espace-objets);
    align-items: start;
  }

  .echo-actu .echo-actu-ouverture { margin-top: 0; }

  .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);
}


/* ============================================================
   LA VIGNETTE DU NUMÉRO, sur l'accueil.
   Elle montre l'affiche et mène au numéro : de quoi donner envie d'entrer.
   ============================================================ */
.echo-actu .echo-actu-vignette {
  display: block;
  width: 75%;
  margin: 0 0 var(--espace-etiquette);
}
.echo-actu .echo-actu-vignette img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--couleur-filet);
}
/* US-NOS-006-260 (idée 166) : même raison que pour le lien — survol à la souris, appui au doigt. */
@media (hover: hover) {
  .echo-actu .echo-actu-vignette:hover img { border-color: var(--couleur-accent-appui); }
}
.echo-actu .echo-actu-vignette:active img { border-color: var(--couleur-accent-appui); }

/* ============================================================
   LIRE EN VERSION TEXTE.
   L'affiche est un journal : son petit texte est difficile à lire. Ce lien
   mène au texte, qui est là, juste en dessous. Discret, à la mesure de l'office.
   ============================================================ */
.echo .echo-version-texte {
  margin: var(--espace-fin) 0 0;
  font: var(--texte-petit);
}
.echo .echo-version-texte a {
  color: var(--couleur-mention);
  text-decoration: none;
  border-bottom: 1px dotted var(--couleur-filet);
}
.echo .echo-version-texte a:hover { color: var(--couleur-accent-appui); }

/* L'ancre du lien ci-dessus : elle ne se voit pas, elle ne sert qu'à descendre. */
.echo .echo-ancre { margin: 0; padding: 0; }

/* Sur un grand ecran, la vignette est plus large et se tient au centre de sa
   colonne : a 112 px elle faisait timbre, collee au bord. */
@media (min-width: 60rem) {
  .echo-actu .echo-actu-vignette {
    width: 40rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   LA PAGE QUI SUIT L'INSCRIPTION — les trois dernières couvertures.
   Le cadre de l'affiche est repris tel quel (.echo-affiche) ; un numéro
   sans affiche n'en montre pas : sa carte porte le numéro et le titre seuls.
   ============================================================ */
.echo .echo-merci-liste { list-style: none; margin: var(--espace-objets) 0 0; padding: 0; }

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

.echo .echo-merci-lien { display: block; text-decoration: none; color: var(--couleur-encre); }
.echo .echo-merci-lien .echo-affiche { display: block; margin-top: 0; margin-bottom: var(--espace-fin); }
.echo .echo-merci-lien:hover .echo-liste-titre { color: var(--couleur-accent); }

/* Sur un grand écran, les trois couvertures se tiennent côte à côte. */
@media (min-width: 60rem) {
  .echo .echo-merci-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espace-objets);
  }

  .echo .echo-merci-item {
    border-top: 0;
    padding: 0;
    margin: 0;
  }

  .echo .echo-merci-lien .echo-affiche { max-width: none; }
}