/* The Season Book — direction 17 « La Revue Reliée ».
   Papier de volume, toile de reliure, filet d'or d'1 px — jamais une surface.
   Fontes locales : Old Standard TT (titres), Vollkorn (texte), IBM Plex Mono (folios). */

@font-face { font-family: 'Old Standard TT'; src: url('/old-standard-tt-v13-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vollkorn'; src: url('/vollkorn-v13-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vollkorn'; src: url('/vollkorn-v13-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --papier: #f7f4ed;
  --papier-2: #efe9db;
  --encre: #232019;
  --encre-2: #4d4638;
  --toile: #3c4a3f;
  --toile-2: #2e3a31;
  --or: #9a7b32;
  --play: #7a3b2e;
  --rec: #37556b;
  --coy: #6b5a2e;
  --vol: #5b4a68;
  --serif-titre: 'Old Standard TT', 'Iowan Old Style', Palatino, serif;
  --serif-texte: 'Vollkorn', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif-texte);
  font-size: 1.06rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--toile); text-decoration-color: color-mix(in srgb, var(--or) 70%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--toile-2); text-decoration-color: var(--or); }
h1, h2, h3, h4 { font-family: var(--serif-titre); font-weight: 700; line-height: 1.18; color: var(--encre); }

.ts-saut { position: absolute; left: -9999px; }
.ts-saut:focus { left: 1rem; top: 1rem; background: var(--toile); color: var(--papier); padding: .5rem 1rem; z-index: 50; }

.ts-travee { max-width: 74rem; margin-inline: auto; padding-inline: 1.4rem; }
.ts-filet-or { height: 1px; background: var(--or); }

/* ---------- Reliure (en-tête) ---------- */
.ts-reliure { background: var(--toile); color: var(--papier); }
.ts-reliure .ts-filet-or { background: var(--or); }
.ts-reliure__haut { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .85rem; }
.ts-marque { font-family: var(--serif-titre); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; color: var(--papier); text-decoration: none; }
.ts-marque:hover { color: #fff; }
.ts-sous-titre { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--papier) 72%, transparent); }
.ts-table { margin-left: auto; }
.ts-table ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; }
.ts-table__ref { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--papier); text-decoration: none; display: inline-flex; align-items: baseline; gap: .35em; }
.ts-table__ref:hover { color: #fff; }
.ts-table__ref[aria-current] { border-bottom: 1px solid var(--or); }
.ts-table__sig { font-size: .62rem; color: color-mix(in srgb, var(--or) 85%, var(--papier)); font-weight: 500; }

/* ---------- Frontispice ---------- */
.ts-frontispice { text-align: center; padding-top: 3.4rem; padding-bottom: 2.6rem; position: relative; }
.ts-frontispice::before, .ts-frontispice::after { content: ""; display: block; height: 1px; background: var(--or); width: 9rem; margin-inline: auto; }
.ts-frontispice::before { margin-bottom: 2.2rem; }
.ts-frontispice::after { margin-top: 2.2rem; }
.ts-frontispice--vedette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 30rem); gap: 2.8rem; align-items: center; text-align: left; }
.ts-frontispice--vedette::before, .ts-frontispice--vedette::after { grid-column: 1 / -1; width: 100%; }
.ts-frontispice--vedette::before { margin-bottom: 0; }
.ts-frontispice--vedette::after { margin-top: 0; }
.ts-frontispice__sur { font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin: 0 0 1.1rem; }
.ts-frontispice h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); margin: 0 0 1.1rem; letter-spacing: .01em; }
.ts-frontispice__epigraphe { max-width: 46rem; margin: 0 auto; font-size: 1.12rem; color: var(--encre-2); font-style: italic; }
.ts-frontispice__epigraphe::first-line { font-style: normal; font-variant: small-caps; letter-spacing: .05em; font-weight: 700; color: var(--toile); }
.ts-frontispice--vedette .ts-frontispice__epigraphe { margin: 0; }
.ts-frontispice__epigraphe::before { content: "❧"; display: block; color: var(--or); font-size: 1.5rem; margin-bottom: .5rem; }
.ts-frontispice__planche { margin: 0; }
.ts-frontispice__planche img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid color-mix(in srgb, var(--teinte, var(--encre)) 55%, transparent); outline: 1px solid var(--or); outline-offset: .45rem; padding: .35rem; background: var(--papier-2); border-radius: 4px; box-shadow: 0 4px 18px rgba(35,32,25,.14); }
.ts-frontispice__planche figcaption { font-family: var(--mono); font-size: .72rem; color: var(--encre-2); padding-top: 1rem; letter-spacing: .04em; }
.ts-frontispice__planche figcaption a { color: var(--encre); font-weight: 500; }
.ts-frontispice__faits { list-style: none; display: flex; justify-content: center; gap: 2.6rem; margin: 1.8rem 0 0; padding: 0; }
.ts-frontispice--vedette .ts-frontispice__faits { justify-content: flex-start; gap: 2rem; }
.ts-frontispice__faits li { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.ts-fait__chiffre { font-family: var(--serif-titre); font-size: 1.5rem; font-weight: 700; color: var(--toile); }
.ts-fait__nom { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); }
.ts-frontispice--cahier { padding-top: 2.4rem; }

/* ---------- Cahier ---------- */
.ts-cahier { padding-top: 2.6rem; padding-bottom: .6rem; }
.ts-cahier--fond { padding-bottom: 2rem; background: linear-gradient(color-mix(in srgb, var(--teinte, var(--toile)) 7%, var(--papier)), color-mix(in srgb, var(--teinte, var(--toile)) 4%, var(--papier-2))); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--teinte, var(--toile)) 6%, var(--papier)); clip-path: inset(0 -100vmax); margin-block: 1.2rem; }
.ts-cahier__tete { border-top: 1px solid var(--or); padding-top: .55rem; margin-bottom: 1.3rem; position: relative; }
.ts-cahier__tete::before { content: ""; position: absolute; top: -4px; left: 0; height: 1px; width: 100%; background: color-mix(in srgb, var(--or) 40%, transparent); }
.ts-cahier__tete h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .15rem 0 .3rem; display: inline; }
.ts-cahier__tete h2 a { color: var(--encre); text-decoration: none; }
.ts-cahier__tete h2 a:hover { color: var(--toile); }
.ts-cahier__sig { font-family: var(--mono); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--or); display: block; margin-bottom: .35rem; }
.ts-cahier__intro { margin: .35rem 0 0; color: var(--encre-2); font-size: .94rem; font-style: italic; }
.ts-cahier__compte { float: right; font-family: var(--mono); font-size: .68rem; color: var(--encre-2); letter-spacing: .12em; padding-top: .4rem; }
.ts-cahier__corps { display: flex; flex-direction: column; }
.ts-cahier__renvoi { text-align: right; margin: .4rem 0 0; }
.ts-renvoi { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; display: inline-block; background: var(--teinte); color: var(--papier); padding: .45em 1.1em; border-radius: 12px; text-decoration: none; box-shadow: 0 1px 6px rgba(35,32,25,.2); }
.ts-renvoi:hover { filter: brightness(1.12); color: #fff; }

/* teintes par cahier : la cote et le liseré prennent la teinte */
.sig-play { --teinte: var(--play); }
.sig-rec  { --teinte: var(--rec); }
.sig-coy  { --teinte: var(--coy); }
.sig-vol  { --teinte: var(--vol); }

/* ---------- Sommaire (lignes à points de conduite) ---------- */
.ts-sommaire { list-style: none; margin: 0; padding: 0; counter-reset: feuille; }
.ts-sommaire__ligne { padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 10%, transparent); }
.ts-sommaire__ligne:last-child { border-bottom: 0; }
.ts-sommaire__ref { display: flex; align-items: baseline; gap: .8rem; text-decoration: none; color: var(--encre); }
.ts-sommaire__ref:hover .ts-sommaire__titre { color: var(--toile); }
.ts-sommaire__folio { font-family: var(--mono); font-size: .72rem; color: var(--or); min-width: 1.6rem; }
.ts-sommaire__titre { font-family: var(--serif-titre); font-size: 1.18rem; font-weight: 700; }
.ts-sommaire__points { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--encre) 34%, transparent); margin-bottom: .32em; }
.ts-sommaire__sig { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teinte, var(--toile)); white-space: nowrap; }
.ts-sommaire__sig::before { content: "❦ "; color: var(--or); }
.ts-sommaire__resume { margin: .3rem 0 0 2.4rem; font-size: .92rem; color: var(--encre-2); max-width: 54rem; }

/* ---------- Entrées ---------- */
.ts-entree { display: flex; gap: 1.4rem; padding: 1.1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 10%, transparent); }
.ts-entree--planche { align-items: flex-start; }
.ts-entree__planche { margin: 0; flex: 0 0 21rem; }
.ts-entree__planche img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); padding: .3rem; background: var(--papier-2); border-radius: 12px; box-shadow: 0 2px 10px rgba(35,32,25,.08); }
.ts-entree__texte { flex: 1; min-width: 0; }
.ts-entree__marge { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.ts-planche-no { font-family: var(--serif-titre); font-size: .82rem; font-weight: 700; font-variant: small-caps; letter-spacing: .12em; color: var(--teinte, var(--toile)); }
.ts-planche-no::before { content: "◆ "; font-size: .6em; color: var(--or); vertical-align: .15em; }
.ts-feuille-no { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.ts-feuille-no::before { content: "§ "; color: var(--or); font-weight: 500; }
.ts-signature { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.ts-mention { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.ts-entree__titre { margin: 0 0 .3rem; font-size: 1.42rem; }
.ts-entree__titre a { color: var(--encre); text-decoration: none; }
.ts-entree__titre a:hover { color: var(--toile); text-decoration: underline; text-decoration-color: var(--or); }
.ts-entree__resume { margin: 0; color: var(--encre-2); font-size: .96rem; max-width: 52rem; }
.ts-entree__datation { margin: .4rem 0 0; font-family: var(--mono); font-size: .68rem; color: var(--encre-2); letter-spacing: .08em; }
.ts-entree--rail { gap: 1.1rem; padding: .85rem 0; }
.ts-entree--rail .ts-entree__planche { flex: 0 0 8.5rem; }
.ts-entree--rail .ts-entree__planche img { padding: .2rem; border-radius: 8px; }
.ts-entree--rail .ts-entree__titre { font-size: 1.14rem; }

/* ---------- Folio de pied de cahier ---------- */
.ts-folio { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 .8rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); }
.ts-folio__filet { flex: 1; height: 1px; background: color-mix(in srgb, var(--encre) 18%, transparent); }

/* ---------- Feuillet (article) ---------- */
.ts-feuillet__tete { padding-top: 1.6rem; }
.ts-feuillet__marge { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.ts-feuillet__tete h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 .8rem; max-width: 56rem; }
.ts-epigraphe { font-size: 1.15rem; font-style: italic; color: var(--encre-2); max-width: 48rem; margin: 0 0 .8rem; }
.ts-datation { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 1.2rem; }

.ts-planche { margin: 0 auto 1.6rem; max-width: 74rem; }
.ts-planche img { width: 100%; aspect-ratio: 4/3; max-height: 34rem; object-fit: cover; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); padding: .4rem; background: var(--papier-2); border-radius: 14px; box-shadow: 0 2px 14px rgba(35,32,25,.09), 0 1px 3px rgba(35,32,25,.07); }
.ts-planche figcaption { font-family: var(--mono); font-size: .72rem; color: var(--encre-2); padding-top: .55rem; letter-spacing: .04em; }
.ts-planche__credit { color: var(--or); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .64rem; }

.ts-duo { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start; }
.ts-texte { max-width: 46rem; }
.ts-texte > p:first-of-type::first-line {
  font-variant: small-caps; letter-spacing: .04em; font-weight: 700; color: var(--toile-2);
}
.ts-texte h2 { font-size: 1.5rem; margin: 2.2rem 0 .6rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--or) 60%, transparent); counter-increment: para; }
.ts-texte h2::before { content: "§ " counter(para, upper-roman) ". "; font-family: var(--mono); font-size: .78em; color: var(--or); font-weight: 500; }
.ts-texte { counter-reset: para; }
.ts-texte h3 { font-size: 1.16rem; margin: 1.6rem 0 .4rem; }
.ts-texte p { margin: 0 0 1rem; }
.ts-texte ul, .ts-texte ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.ts-texte li { margin-bottom: .3rem; }
.ts-texte blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 2px solid var(--or); font-style: italic; color: var(--encre-2); }
.ts-texte a { font-weight: 500; }

.ts-marge { position: sticky; top: 1.2rem; border-top: 1px solid var(--or); padding: .9rem 1rem .8rem; background: var(--papier-2); border-radius: 0 0 14px 14px; box-shadow: 0 2px 12px rgba(35,32,25,.07); }
.ts-marge__titre { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin: 0 0 .6rem; }
.ts-marge__sommaire { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.ts-marge__sommaire li { margin-bottom: .3rem; }
.ts-marge__sommaire a { display: flex; gap: .5rem; font-size: .86rem; text-decoration: none; color: var(--encre); }
.ts-marge__sommaire a:hover { color: var(--toile); }
.ts-marge__folio { font-family: var(--mono); font-size: .68rem; color: var(--or); min-width: 1.4rem; }
.ts-marge__sources { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .7rem; }
.ts-marge__sources li { margin-bottom: .35rem; overflow-wrap: break-word; }

/* ---------- Hors-volume (réseau) ---------- */
.ts-hors-volume__index { list-style: none; margin: 0; padding: 0; }
.ts-hors-volume__ligne { display: flex; gap: .9rem; padding: .55rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--encre) 20%, transparent); align-items: baseline; }
.ts-hors-volume__ligne p { margin: 0; font-size: .94rem; color: var(--encre-2); }
.ts-hors-volume__ligne a { color: var(--toile); font-weight: 500; }
.ts-hors-volume__folio { font-family: var(--mono); font-size: .7rem; color: var(--or); min-width: 1.6rem; }

/* ---------- Encart ---------- */
.ts-encart { margin-block: 1.6rem; padding: 1.2rem 1.6rem; border-radius: 14px; background: #7a3b2e; color: var(--papier); box-shadow: 0 3px 16px rgba(35,32,25,.18); }
.ts-encart h2 { color: var(--papier); }
.ts-encart p { color: color-mix(in srgb, var(--papier) 84%, transparent); }
.ts-encart h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.ts-encart p { margin: 0; }

/* ---------- Ariane ---------- */
.ts-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; padding: 1rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.ts-ariane li + li::before { content: "›"; margin-right: .6rem; color: var(--or); }
.ts-ariane a { color: var(--encre-2); }
.ts-ariane [aria-current] { color: var(--encre); }

/* ---------- Dos (pied) ---------- */
.ts-dos { margin-top: 3rem; background: var(--toile); color: color-mix(in srgb, var(--papier) 86%, transparent); }
.ts-dos .ts-filet-or { margin-bottom: 0; }
.ts-dos__colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.4rem; padding-top: 2rem; padding-bottom: 1.6rem; }
.ts-dos__titre { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin: 0 0 .7rem; }
.ts-dos__col p { font-size: .88rem; margin: 0 0 .6rem; }
.ts-dos__note { font-style: italic; opacity: .8; }
.ts-dos__index { list-style: none; margin: 0; padding: 0; }
.ts-dos__index li { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .3rem; }
.ts-dos__folio { font-family: var(--mono); font-size: .66rem; color: var(--or); min-width: 1.3rem; }
.ts-dos a { color: var(--papier); font-size: .9rem; }
.ts-dos__ligne { border-top: 1px solid color-mix(in srgb, var(--papier) 20%, transparent); padding-top: .9rem; padding-bottom: 1rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--papier) 60%, transparent); }

/* ---------- Service ---------- */
.ts-feuillet--service .ts-texte { max-width: 52rem; }

/* ---------- Mobile ---------- */
@media (max-width: 60rem) {
  .ts-duo { grid-template-columns: 1fr; }
  .ts-marge { position: static; }
  .ts-entree__planche { flex-basis: 100%; }
  .ts-entree--planche { flex-direction: column; }
  .ts-dos__colonnes { grid-template-columns: 1fr; gap: 1.4rem; }
  .ts-frontispice--vedette { grid-template-columns: 1fr; gap: 1.8rem; }
  .ts-frontispice__faits { gap: 1.4rem; flex-wrap: wrap; }
  .ts-table { margin-left: 0; width: 100%; }
  .ts-entree { flex-direction: column; gap: .8rem; }
  .ts-entree--rail { flex-direction: row; }
  .ts-entree--rail .ts-entree__planche { flex-basis: 6.5rem; }
}

/* teinte par défaut pour la mesure et les hors-cahier */
:root { --teinte: #7a3b2e; }