/* Archive Legow.tk - feuille unique.
   Le gabarit est calqué sur une capture de l'accueil (novembre 2008) : page
   blanche arrondie posée sur la texture métal du site, bandeau illustré, et
   le menu à droite en pastilles grises. Les couleurs viennent de css/style.css.
   Seul le corps des textes s'écarte de l'original - le 11px Verdana d'époque
   ne se lit plus. */

:root {
  --bleu:        #4688DF;   /* a          */
  --bleu-fonce:  #1f4476;   /* h3         */
  --bleu-doux:   #526bb3;   /* em.date    */
  --encre:       #1a1a1a;
  --gris:        #808080;   /* a:hover, p */
  --gris-clair:  #c4c4c4;   /* bordures   */
  --fond-doux:   #f1f1f1;   /* #avertissement */
  --page:        #ffffff;
  --bord:        #dcdcdc;
  --pastille:    #f2f2f2;   /* menu_base.gif  */
  --pastille-b:  #dadada;
  --menu-sel:    #a8c6e5;   /* menu_sel.gif   */
  --menu-sous:   #e9e9e9;   /* menu_sous.gif  */
  --ui: "Lucida Grande", Tahoma, Verdana, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.2rem 0 2.5rem;
  /* le fond du site : img/fond/metal.jpg, 512x512, récupéré sur archive.org.
     La page de 2010 déclarait #F5F4F1 en couleur de repli, vestige d'un thème
     clair antérieur que la texture recouvrait entièrement ; on met plutôt la
     moyenne de l'image, pour éviter un flash clair avant son chargement. */
  background: #27241e url(metal.jpg) repeat fixed;
  color: var(--encre);
  font: 13px/1.55 var(--ui);
}

img { border: 0; max-width: 100%; }

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--gris); text-decoration: underline; }

/* ---- le gabarit ---- */

.page {
  width: 820px;
  max-width: calc(100% - 1.5rem);
  margin: 0 auto;
  padding: 12px;
  background: var(--page);
  border: 4px solid #0e0d08;
  border-radius: 14px;
}

.masthead { position: relative; line-height: 0; }
.masthead > a { display: block; }
.masthead img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* La boîte où l'on se connectait, en haut à droite du bandeau : x 555-719,
   y 30-84 sur les 740x138 d'origine. Elle est vide dans une archive, on y
   met le mot qui dit ce que c'est devenu. */
.archive {
  position: absolute;
  left: 75%; top: 21.7%;
  width: 22.2%; height: 39.1%;
  display: flex; align-items: center; justify-content: center;
  font: normal .78rem/1 var(--ui);
  letter-spacing: .08em;
  text-transform: capitalize;
  color: #fff;
  opacity: .75;
  pointer-events: none;
}

/* Spartacus, le chat qui allait chercher une histoire au hasard */
.spartacus {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem;
  text-decoration: none;
}
.spartacus img { width: 78px; height: auto; }
.spartacus span {
  font: italic normal 1.05rem/1.3 Georgia, "Iowan Old Style", serif;
  color: var(--bleu-fonce);
}
.spartacus:hover span { color: var(--bleu); text-decoration: underline; }

.colonnes { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
main { flex: 1; min-width: 0; }
main.liseuse { max-width: 100%; }

/* ---- le menu latéral, repris tel quel de la version de 2010 ---- */

.menu {
  width: 192px; flex: none;
  padding: 20px 12px 0 0;
  background: url(icones/vertical.gif) no-repeat top left;
  position: sticky; top: 12px;
}
.menu ul { list-style: none; margin: 0 0 0 7px; padding: 0; }
.menu .nav { font-weight: bold; }
.menu .nav a {
  display: block;
  padding: 2px 2px;
  color: #111111;
  background: url(icones/menu_titre.gif) no-repeat top center;
}
.menu .nav a:hover {
  background-color: #abc7e3;
  background-image: none;
  text-decoration: underline;
}
.menu .detail {
  margin-top: 7px; margin-bottom: 10px;
  color: #777777;
  font-size: 0.68rem;
}
/* retrait négatif : l'icône déborde à gauche, les lignes suivantes
   s'alignent sous le texte plutôt que sous l'icône. */
.menu .detail li { line-height: 1.4; padding: 1px 0 1px 22px; text-indent: -22px; }
.menu .detail a { padding: 0; color: #777777; }
.menu .detail a:hover { background: #cccccc; text-decoration: underline; }
.menu .detail img { width: 32px; vertical-align: middle; margin-right: 4px; }

@media (max-width: 820px) {
  .colonnes { display: block; }
  .menu { width: auto; position: static; margin-top: 1.5rem;
          padding: 1rem 0 0; background: none;
          border-top: 1px solid var(--gris-clair); }
  .menu .detail { columns: 2; }
}

/* ---- titres ---- */

h1 {
  font: normal 1.65rem/1.2 Georgia, "Iowan Old Style", serif;
  margin: .1rem 0 .3rem;
  color: #333;
}
h2 {
  font: normal 1.12rem/1.3 Georgia, serif;
  color: var(--bleu-fonce);
  margin: 2rem 0 .7rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--bord);
}

.chapo { color: var(--gris); font-size: 12px; margin: 0 0 1.3rem; }
.mini  { color: var(--gris); font-size: 11px; }

/* ---- encadrés ---- */

/* la présentation d'un auteur : plus de fond, seul le liseré subsiste */
.heros {
  background: none;
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.heros p { font-size: 12.5px; }

/* l'accroche de l'accueil : pas un titre de page, une phrase d'accueil */
.heros.accueil { background: none; border: 0; padding: .4rem 0 0; }
.heros.accueil h1 {
  font: italic normal 1.25rem/1.4 Georgia, "Iowan Old Style", serif;
  color: #333333;
  margin: 0 0 .6rem;
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .7rem;
}
.carte {
  background: var(--fond-doux);
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  padding: .8rem .9rem;
  color: inherit;
  display: block;
}

/* l'encart de l'accueil : sur le blanc de la page, et son titre reprend la
   voix de l'accroche juste au-dessus - mais en gardant le bleu. */
.carte.cadeau { background: #fff; }
.carte.cadeau .t {
  font: italic normal 1.25rem/1.4 Georgia, "Iowan Old Style", serif;
  color: var(--bleu-fonce);
  margin-bottom: .3rem;
}

/* l'index des plumes : l'avatar à gauche, le nom et les comptes à droite */
.carte.plume {
  display: flex; gap: .6rem; align-items: center;
  background: none;
}
.carte.plume img {
  width: 40px; height: 40px; flex: none;
  object-fit: contain;
}
.carte:hover { border-color: var(--bleu); text-decoration: none; }
.carte .t {
  font: 700 .95rem Georgia, serif; color: var(--bleu-fonce);
  display: block; margin-bottom: .15rem;
}
.carte:hover .t { color: var(--bleu); }
.carte .d { font-size: .78rem; color: var(--gris); }

/* ---- listes d'histoires ---- */

.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px dashed var(--gris-clair);
}
.liste img.couv {
  width: 68px; height: 68px; flex: none;
  object-fit: none;
}
.liste .corps { flex: 1; min-width: 0; }
.liste .corps > a {
  font: normal 1.15rem Georgia, serif;
  color: #333;
}
.liste .corps p { margin: .2rem 0 0; font-size: .82rem; color: var(--gris); }
/* 1re ligne : l'étiquette de genre et les chiffres, à la taille de l'étiquette */
.liste .corps p:first-of-type { font-size: .68rem; }
/* 2e ligne : la ligne de conduite de l'histoire (:not(.mini) épargne les
   renvois « Chapitres : 2 · 3 » des pages de profil) */
.liste .corps p:nth-of-type(2):not(.mini) { color: #333; }

.etiq {
  display: inline-block;
  background: #efeae259;
  border: 1px solid var(--gris-clair);
  color: #696969;
  padding: .08rem .4rem;
  font-size: .68rem;
  letter-spacing: .03em;
  border-radius: 99px;
}
a.etiq:hover { background: #e2dbd0; color: #444; text-decoration: none; }

/* ---- lecture d'une histoire ---- */

.enTete { margin-bottom: 1.8rem; }
.enTete img.couv {
  float: right;
  width: 80px;
  margin: 0 0 1rem 1.2rem;
}
/* encadré à légende incrustée, comme les cadres de l'accueil de 2008 */
.conduite {
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  padding: 0.25rem 1rem 0.25rem;
  font-size: 12.5px;
  margin: 1.1rem 0 0;
  position: relative;
}
.conduite b {
  position: absolute; top: -.62em; left: .8rem;
  background: var(--page); padding: 0 .4rem;
  color: var(--bleu-doux);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

.chapitre { padding: 1.5rem 0; border-top: 1px solid var(--bord); scroll-margin-top: 4rem; }
.chapitre:first-of-type { border-top: none; }
.chapitre:target {
  background: var(--fond-doux);
  margin: 0 -0.5rem; padding: 1.3rem .5rem;
  border-top: none; outline: 1px dashed var(--bleu-doux);
}
.chapitre:target::before {
  content: "↓ le chapitre recherché";
  display: block;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bleu-doux); margin-bottom: .5rem;
}

.signature {
  display: flex; align-items: center; gap: .55rem;
  font-size: .78rem; color: var(--bleu-doux); margin-bottom: .5rem;
}
.signature img {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
}
.signature a { font-weight: 700; }
.signature .num { margin-left: auto; opacity: .7; font-variant-numeric: tabular-nums; }

.texte { font: 1.02rem/1.75 Georgia, "Iowan Old Style", serif; color: var(--encre); }
.texte p {
  margin: 0 0 1rem;
  word-wrap: break-word;
}
.texte img.smiley { vertical-align: -3px; max-height: 18px; }

/* photos téléversées dans la Salle de jeux : la vignette mène à la grande */
.photo { display: inline-block; line-height: 0; margin: .3rem .4rem .3rem 0; }
.photo img, img.photo {
  max-width: 100%;
  border: 1px solid var(--gris-clair);
  border-radius: 4px;
}
.photo:hover img { border-color: var(--bleu); }

.choix {
  border: 1px dashed var(--bleu-doux);
  padding: .7rem .9rem; margin: .6rem 0 0; font-size: .85rem;
}
.choix b {
  color: var(--bleu-fonce); display: block;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
}
.choix ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.commentaire {
  background: var(--fond-doux);
  border: 1px solid var(--gris-clair);
  padding: .7rem .9rem;
  margin-bottom: .6rem;
  font-size: .78rem;
  border-radius: 6px;
}
.commentaire .signature { margin-bottom: .35rem; }

/* ---- cadavre exquis : une chaîne de répliques ---- */

.chaine { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: r; }
.chaine li {
  position: relative;
  padding: .55rem 0 .75rem 2.1rem;
  border-bottom: 1px dashed var(--bord);
}
.chaine li:last-child { border-bottom: 0; }
.chaine li::before {
  counter-increment: r; content: counter(r);
  position: absolute; left: 0; top: .75rem;
  width: 1.5rem; text-align: right;
  font: 700 11px/1 var(--ui); color: var(--gris-clair);
}
.chaine li:target { background: var(--fond-doux); scroll-margin-top: 1rem; }
.replique { font: 1.02rem/1.6 Georgia, "Iowan Old Style", serif; }
.replique p { margin: 0 0 .4rem; }
.replique p:last-child { margin-bottom: 0; }
.chaine .signature { margin: .3rem 0 0; font-size: 11px; }
.chaine .signature img { width: 20px; height: 20px; }

.balados li { padding-bottom: 1rem; }
.balados .replique b { font-size: 1rem; color: var(--bleu-fonce); }
.balados .signature { color: var(--gris); }
.balados audio { width: 100%; max-width: 22rem; margin: .5rem 0 .2rem; }
.balados .perdu { color: var(--gris); }
.balados .perdu code { font-size: 10px; word-break: break-all; }

/* ---- sommaire ---- */

.sommaire {
  padding: 0.2rem 1rem;
  font-size: .82rem;
  margin: 1.4rem 0;
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
}

.sommaire summary {
  cursor: pointer;
  color: #333;
}
.sommaire ol { margin: .7rem 0 0; padding-left: 1.4rem; columns: 2; }
@media (max-width: 40rem) { .sommaire ol { columns: 1; } }

/* ---- profils ---- */

.profil { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.2rem; }
.profil img {
  width: 96px; height: 96px; flex: none; object-fit: contain;
}
.bio { font-size: .9rem; }
.bio p { margin: 0 0 .6rem; }

/* ---- la page « après Legow » ---- */

.apres { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.apres li {
  padding: .9rem 0;
  border-bottom: 1px dashed var(--gris-clair);
}
.apres li:last-child { border-bottom: 0; }
.apres .t {
  font: normal 1.25rem/1.3 Georgia, "Iowan Old Style", serif;
  color: #333;
  margin-right: .5rem;
}
.apres .t a { color: var(--bleu-fonce); }
.apres .t a:hover { color: var(--bleu); }
.apres .q { font-size: .68rem; color: var(--gris); letter-spacing: .03em; }
.apres .pub {
  display: inline-block;
  margin-left: .5rem;
  padding: .08rem .45rem;
  background: #efeae259;
  border: 1px solid var(--gris-clair);
  border-radius: 99px;
  font-size: .62rem; color: #696969;
  vertical-align: 2px;
}
.apres p { margin: .35rem 0 0; font-size: .88rem; color: #333; }

/* ---- recherche ---- */

#fq {
  width: 100%; padding: .45rem .7rem; font-size: .9rem; font-family: var(--ui);
  border: 1px solid var(--gris-clair); border-radius: 6px;
  background: #fff; color: var(--encre);
  margin: 0 0 .4rem;
}
#fcpt { margin: 0 0 1rem; }

#q {
  width: 100%; padding: .6rem .8rem; font-size: 1rem; font-family: var(--ui);
  border: 1px solid var(--gris-clair); background: var(--page); color: var(--encre);
}
#res mark { background: var(--fond-doux); color: var(--bleu-fonce); font-weight: 700; }
.extrait { font-size: .84rem; color: var(--gris); }

/* la licence du site, telle qu'elle figurait en pied de page en 2010 */
.licence {
  display: flex; align-items: flex-start; gap: .8rem;
  margin: 0; padding: 0 1.6rem 1.4rem;
  font-size: .7rem; line-height: 1.5; color: var(--gris);
}
.licence img { flex: none; }
@media (max-width: 560px) { .licence { flex-direction: column; gap: .4rem; } }

.pied {
  margin: 0; margin-top: 1.5rem;
  padding: 1rem 1.6rem 1.4rem;
  border-top: 1px solid var(--gris-clair);
  border-bottom: 1px dashed var(--gris-clair);
  margin-bottom: 1rem;
  font-size: .74rem; color: var(--gris);
}