/* La Boîte verte — feuille de style unique */

:root {
  --encre: #111;
  --gris: #555;
  --filet: #1a1a1a;
  --papier: #fff;
  --vert: #1f4d3a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "liga", "onum";
  overflow-wrap: break-word;
}

a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--encre); }

.feuille {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* ---------- Manchette ---------- */

.manchette { text-align: center; }

.manchette .oreilles {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 1px solid var(--filet);
  padding-bottom: .4rem;
}

.titre-journal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.1rem 0 .3rem;
  text-decoration: none;
  color: var(--encre);
}

.titre-journal img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--filet);
  flex: none;
}

.titre-journal span {
  font-size: clamp(2.1rem, 7vw, 4.6rem);
  line-height: 1;
  font-weight: normal;
  letter-spacing: -.01em;
}

.devise {
  font-style: italic;
  margin: .4rem 0 .7rem;
  color: var(--gris);
}

.double-filet {
  border: 0;
  border-top: 3px double var(--filet);
  margin: 0;
  height: 0;
}

.ligne-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  font-family: var(--mono);
  font-size: .78rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--filet);
}

.sommaire {
  padding: .55rem 0;
  border-bottom: 1px solid var(--filet);
  font-variant: small-caps;
  letter-spacing: .06em;
  font-size: 1.05rem;
}

.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--vert); text-decoration: underline; }
.sommaire a[aria-current="page"] { color: var(--vert); }
.sommaire .point { color: var(--gris); margin: 0 .5rem; }

/* ---------- Titres ---------- */

.rubrique {
  text-align: center;
  margin: 2.2rem 0 .3rem;
}

.rubrique .surtitre {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert);
}

h1 {
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  font-weight: normal;
  line-height: 1.12;
  margin: .3rem 0 .4rem;
}

.chapeau {
  max-width: 40rem;
  margin: 0 auto 1.4rem;
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
}

h2 {
  font-size: 1.45rem;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .04em;
  margin: 2.2rem 0 .8rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--filet);
}

h2 .num {
  font-family: var(--mono);
  font-variant: normal;
  font-size: .8rem;
  color: var(--vert);
  margin-right: .6rem;
  vertical-align: middle;
}

h3 {
  font-size: 1.1rem;
  font-style: italic;
  font-weight: normal;
  margin: 1.2rem 0 .3rem;
  break-after: avoid;
}

p { margin: 0 0 .8rem; hyphens: auto; }

/* ---------- Corps avec marge ---------- */

.corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2.2rem;
}

.texte { min-width: 0; }

.colonnes p, .colonnes h3 { text-align: justify; }

.lettrine::first-letter {
  float: left;
  font-size: 4.1em;
  line-height: .82;
  padding: .06em .09em 0 0;
  color: var(--vert);
}

.marge {
  font-size: .9rem;
  line-height: 1.45;
  color: #222;
  border-top: 1px solid var(--filet);
  padding-top: .6rem;
  margin: 1rem 0;
}

.marge p { margin-bottom: .9rem; }

.marge .etiquette {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vert);
  margin-bottom: .2rem;
}

.appel {
  font-size: .7em;
  vertical-align: super;
  line-height: 0;
  color: var(--vert);
  text-decoration: none;
  font-family: var(--mono);
}

.notes {
  font-size: .88rem;
  border-top: 1px solid var(--filet);
  margin-top: 1.6rem;
  padding-top: .6rem;
}

.notes ol { margin: 0; padding-left: 1.4rem; }
.notes li { margin-bottom: .35rem; }
.notes li::marker { font-family: var(--mono); color: var(--vert); }

.citation {
  margin: 1.2rem 0;
  padding: .6rem 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
  break-inside: avoid;
}

.ornement {
  text-align: center;
  letter-spacing: 1em;
  color: var(--vert);
  margin: 1.4rem 0;
}

/* ---------- Planches ---------- */

.planche {
  margin: 1.2rem 0 1.6rem;
  break-inside: avoid;
}

.planche img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--filet);
  padding: 4px;
  background: var(--papier);
  outline: 1px solid var(--filet);
  outline-offset: 3px;
}

.planche.paysage img { aspect-ratio: 3 / 2; }
.planche.carre img { aspect-ratio: 1 / 1; }
.planche.portrait img { aspect-ratio: 2 / 3; }

.planche figcaption {
  font-style: italic;
  font-size: .92rem;
  text-align: center;
  margin-top: .7rem;
}

.planche figcaption .pl {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: .06em;
  margin-right: .3rem;
}

.planche.etroite { max-width: 34rem; margin-left: auto; margin-right: auto; }

.duo { display: block; margin-top: 1rem; }
.duo .planche { max-width: 24rem; margin-left: auto; margin-right: auto; }
.duo h2 { margin-top: 1rem; }

/* ---------- Catalogue ---------- */

.lots {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-top: 2px solid var(--filet);
}

.lot {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .2rem .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--filet);
}

.lot .no {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--vert);
  padding-top: .15rem;
}

.lot .auteur { font-variant: small-caps; letter-spacing: .04em; }
.lot .oeuvre { font-style: italic; }

.lot .fiche {
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--gris);
  margin-top: .15rem;
}

.lot .mot {
  display: block;
  font-size: .95rem;
  margin-top: .3rem;
}

/* ---------- Glossaire ---------- */

.glossaire { margin: 0; border-top: 2px solid var(--filet); }

.glossaire div {
  padding: .55rem 0;
  border-bottom: 1px solid #bbb;
  break-inside: avoid;
}

.glossaire dt {
  font-variant: small-caps;
  letter-spacing: .05em;
  font-weight: bold;
  display: inline;
}

.glossaire dt::after { content: " — "; font-weight: normal; }
.glossaire dd { display: inline; margin: 0; }

/* ---------- Heures ---------- */

.heures { list-style: none; padding: 0; margin: 0 0 1rem; }
.heures li { margin-bottom: .9rem; break-inside: avoid; }
.heures time {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--vert);
  display: block;
  border-bottom: 1px dotted var(--filet);
  margin-bottom: .2rem;
}

/* ---------- Pied ---------- */

.pied {
  margin-top: 3rem;
  border-top: 3px double var(--filet);
  padding-top: .8rem;
  font-size: .88rem;
  text-align: center;
  color: var(--gris);
}

.pied p { margin: .2rem 0; }
.pied .mono { font-family: var(--mono); font-size: .75rem; }

/* ---------- Grand écran ---------- */

@media (min-width: 900px) {
  .feuille { padding: 2rem 2rem 4rem; }

  .corps { grid-template-columns: minmax(0, 1fr) 14rem; }

  .marge {
    border-top: 0;
    border-left: 1px solid var(--filet);
    padding: 0 0 0 1rem;
    margin: 0;
  }

  .colonnes {
    column-count: 2;
    column-gap: 2.2rem;
    column-rule: 1px solid #999;
  }

  .colonnes.trois { column-count: 3; }

  .duo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.4rem;
    align-items: start;
  }
  .duo .planche { margin: 1rem 0 0; max-width: none; }

  .lots.deux {
    column-count: 2;
    column-gap: 2.2rem;
    column-rule: 1px solid #999;
    border-top: 0;
  }
  .lots.deux .lot { break-inside: avoid; }
  .lots.deux .lot:first-child { border-top: 2px solid var(--filet); }

  .glossaire.colonnes { border-top: 2px solid var(--filet); }
}

@media (max-width: 520px) {
  .manchette .oreilles span:nth-child(2) { display: none; }
  .titre-journal { gap: .7rem; }
  .titre-journal img { width: 52px; height: 52px; }
  .sommaire .point { margin: 0 .25rem; }
  .lot { grid-template-columns: 2.8rem minmax(0, 1fr); }
}