/* PEAU « tjn- » — atjonesministries.org — LE LIVRE DE CANTIQUES A NOTES EN
   FORMES. Papier de recueil, encre d'imprimerie, rouge de toile de
   couverture en aplat (banderole + boutons + terme clé), quatre formes du
   fa-sol-la (fa triangle, sol cercle, la carré, mi losange) pour les quatre
   parties, portées à cinq lignes à tête de note en forme. Couverture photo
   21/9 sous voile, grande carte à la une, grille de vignettes, fil dense :
   trois densités. */

@font-face { font-family: 'tjn-titre'; src: url('tjn-titre-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'tjn-titre'; src: url('tjn-titre-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'tjn-texte'; src: url('tjn-texte-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'tjn-texte'; src: url('tjn-texte-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'tjn-mono'; src: url('tjn-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'tjn-mono'; src: url('tjn-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --papier: #f4f1e9;
  --papier2: #fbf9f3;
  --encre: #20282c;
  --encre2: #4c565c;
  --toile: #a8402f;            /* rouge de toile de couverture, en aplat */
  --toile-fonce: #82311f;
  --filet: #d8d2c2;
  --filet-fort: #b8b09c;
  --trace: #4a6f8a;
  --t-choir: #e9d9ac;
  --t-quartet: #cfdfe8;
  --t-record: #e4c8be;
  --t-pews: #d5e2cd;
  --rayon: 14px;
  --ombre: 0 2px 0 rgba(32,40,44,.08), 0 14px 30px -18px rgba(32,40,44,.35);
  --titre: 'tjn-titre', 'Avenir Next', 'Trebuchet MS', sans-serif;
  --texte: 'tjn-texte', 'Iowan Old Style', Georgia, serif;
  --mono: 'tjn-mono', 'SFMono-Regular', Consolas, monospace;
}
[data-section="the-choir"]   { --teinte: var(--t-choir); }
[data-section="the-quartet"] { --teinte: var(--t-quartet); }
[data-section="the-record"]  { --teinte: var(--t-record); }
[data-section="the-pews"]    { --teinte: var(--t-pews); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--texte); font-size: 1.06rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--toile-fonce); text-decoration-color: rgba(168,64,47,.45); text-underline-offset: .16em; }
a:hover { color: var(--toile); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--toile); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 500; line-height: 1.12; margin: 0; }
main { max-width: 78rem; margin: 0 auto; padding: 0 1.4rem 4rem; }

.tjn-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--encre); color: var(--papier); padding: .7rem 1.2rem;
  font-family: var(--mono); font-size: .8rem; border-radius: 0 0 10px 0;
}
.tjn-evitement:focus { left: 0; }

/* ---------- LE FRONTON : banderole toile + enseigne + menu ---------- */
.tjn-fronton { border-bottom: 2px solid var(--encre); background: var(--papier2); }
.tjn-banderole {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, var(--toile) 0%, var(--toile-fonce) 130%);
  color: #fdf3ea; padding: .42rem 1.4rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.tjn-banderole span:last-child { opacity: .82; letter-spacing: .14em; }
.tjn-hameau {
  display: flex; align-items: baseline; gap: 1.3rem; flex-wrap: wrap;
  max-width: 78rem; margin: 0 auto; padding: 1.1rem 1.4rem .8rem;
}
.tjn-enseigne {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--titre); font-weight: 500; font-size: 1.55rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--encre); text-decoration: none;
}
.tjn-marque { width: 4.6rem; height: auto; fill: var(--toile); flex: none; }
.tjn-devise { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre2); }
.tjn-echelle {
  margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  border: 1.5px solid var(--encre); padding: .32rem .7rem; border-radius: 999px; background: var(--papier);
}
.tjn-menu {
  display: flex; flex-wrap: wrap; gap: 0; max-width: 78rem; margin: 0 auto; padding: 0 1.4rem;
  border-top: 1px solid var(--filet);
}
.tjn-menu a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre); text-decoration: none; padding: .75rem .95rem .7rem;
  border-left: 1px solid var(--filet);
}
.tjn-menu a:last-child { border-right: 1px solid var(--filet); }
.tjn-menu a i { width: .62em; height: .62em; background: var(--teinte, transparent); border: 1px solid var(--filet-fort); border-radius: 2px; display: inline-block; }
.tjn-menu a:hover { background: var(--teinte, var(--papier)); }
.tjn-menu a[aria-current="page"] { background: var(--encre); color: var(--papier); }

/* ---------- LES FORMES fa-sol-la-mi ---------- */
.tjn-forme { display: inline-flex; width: 1em; height: 1em; flex: none; }
.tjn-forme svg { width: 100%; height: 100%; fill: var(--encre); }
[data-section] .tjn-forme svg { fill: var(--encre); }

/* ---------- LA TUNE « No. 4 » ---------- */
.tjn-tune {
  display: inline-flex; align-items: baseline; gap: .18em; flex: none;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--encre);
}
.tjn-tune i { font-style: normal; color: var(--toile); font-size: .82em; letter-spacing: .08em; }
.tjn-tune b { font-weight: 500; font-size: 1.5rem; line-height: 1; }

/* ---------- LA PORTÉE ---------- */
.tjn-portee {
  position: relative; display: inline-block; width: 5.2rem; height: 1.15rem; flex: none;
}
.tjn-portee i {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--filet-fort);
}
.tjn-portee i:nth-child(1) { top: 15%; } .tjn-portee i:nth-child(2) { top: 32.5%; }
.tjn-portee i:nth-child(3) { top: 50%; } .tjn-portee i:nth-child(4) { top: 67.5%; }
.tjn-portee i:nth-child(5) { top: 85%; }
.tjn-portee b {
  position: absolute; right: .4rem; top: 50%; width: .68rem; height: .68rem;
  transform: translateY(-50%); background: var(--encre);
}
.tjn-portee .tjn-forme--fa { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tjn-portee .tjn-forme--sol { border-radius: 50%; }
.tjn-portee .tjn-forme--la { }
.tjn-portee .tjn-forme--mi { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- LA COUVERTURE (héros 21/9 sous voile) ---------- */
.tjn-couverture {
  position: relative; margin: 1.6rem auto 0; max-width: 78rem;
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  min-height: 26rem; display: flex;
}
.tjn-couverture__photo { position: absolute; inset: 0; margin: 0; }
.tjn-couverture__photo img, .tjn-couverture__photo picture { width: 100%; height: 100%; object-fit: cover; }
.tjn-couverture__voile {
  position: relative; z-index: 1; margin: 0; width: 100%;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem;
  background: linear-gradient(180deg, rgba(32,40,44,.18) 0%, rgba(32,40,44,.55) 55%, rgba(24,30,34,.88) 100%);
  color: var(--papier2);
}
.tjn-surtitre {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--t-choir); margin: 0;
}
.tjn-surtitre .tjn-forme { width: .85em; height: .85em; vertical-align: -0.08em; }
.tjn-couverture .tjn-surtitre { color: #f3dfae; }
.tjn-couverture h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.7rem); font-weight: 500; letter-spacing: .01em;
  max-width: 22ch; color: #fdf8ee; text-wrap: balance;
}
.tjn-promesse { margin: 0; max-width: 56ch; font-size: 1.05rem; line-height: 1.6; color: #efe8d8; }
.tjn-promesse em { font-style: normal; color: #f0b9a4; font-weight: 700; border-bottom: 2px solid var(--toile); }
.tjn-bilan { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; margin-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #ddd3bf; }
.tjn-bilan b { color: #fdf8ee; font-weight: 500; margin-right: .3em; }

/* ---------- LA LÉGENDE ---------- */
.tjn-legende {
  max-width: 78rem; margin: 1.8rem auto 0; padding: 1.3rem 1.6rem;
  background: var(--papier2); border: 1px solid var(--filet); border-radius: var(--rayon);
  background-image: repeating-linear-gradient(0deg, transparent 0 11px, rgba(74,111,138,.07) 11px 12px),
                    repeating-linear-gradient(90deg, transparent 0 11px, rgba(74,111,138,.07) 11px 12px);
}
.tjn-legende h2 { font-size: .78rem; font-family: var(--mono); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--toile); margin: 0 0 .9rem; }
.tjn-legende ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem 2rem; }
.tjn-legende li { display: flex; align-items: center; gap: .9rem; }
.tjn-legende li p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--encre2); }
.tjn-legende .tjn-tune b { font-size: 1.9rem; }
.tjn-lg-sec .tjn-forme { width: 1.6rem; height: 1.6rem; }
.tjn-lg-sec .tjn-forme svg { fill: var(--t-choir); stroke: var(--encre); stroke-width: 1px; }
.tjn-portee--legende { width: 4.4rem; }

/* ---------- LA UNE ---------- */
.tjn-une {
  max-width: 78rem; margin: 1.8rem auto 0; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--papier2); border: 1.5px solid var(--encre); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre);
}
.tjn-une__vign { margin: 0; min-height: 19rem; }
.tjn-une__vign img, .tjn-une__vign picture { width: 100%; height: 100%; object-fit: cover; }
.tjn-une__corps { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .85rem; justify-content: center; }
.tjn-une__rep { display: flex; align-items: center; gap: .9rem; margin: 0; }
.tjn-une__rep .tjn-tune b { font-size: 2rem; }
.tjn-une__titre { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
.tjn-une__titre a { color: var(--encre); text-decoration: none; }
.tjn-une__titre a:hover { color: var(--toile); }
.tjn-une__resume { margin: 0; color: var(--encre2); font-size: 1rem; }
.tjn-une__att { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--encre2); }
.tjn-bouton {
  align-self: flex-start; margin-top: .7rem; display: inline-block;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--toile) 0%, var(--toile-fonce) 140%);
  color: #fdf3ea; text-decoration: none; padding: .8rem 1.5rem; border-radius: 999px;
  box-shadow: 0 10px 22px -12px rgba(130,49,31,.8);
}
.tjn-bouton:hover { color: #fff; filter: brightness(1.06); }

/* ---------- LES ONGLETS-PARTIES ---------- */
.tjn-onglets {
  max-width: 78rem; margin: 2rem auto 0; display: flex; flex-wrap: wrap;
  border: 1.5px solid var(--encre); border-radius: 999px; overflow: hidden; background: var(--papier2);
}
.tjn-onglet {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); text-decoration: none; padding: .75rem .8rem; white-space: nowrap;
}
.tjn-onglet + .tjn-onglet { border-left: 1px solid var(--filet); }
.tjn-onglet .tjn-forme { width: .9em; height: .9em; }
.tjn-onglet[data-section] .tjn-forme svg { fill: var(--encre); }
.tjn-onglet:hover { background: var(--teinte, var(--papier)); }
.tjn-onglet--ici, .tjn-onglet--ici:hover { background: var(--encre); color: var(--papier); }
.tjn-onglet--ici .tjn-forme svg, .tjn-onglet--ici[data-section] .tjn-forme svg { fill: var(--papier); }

/* ---------- LE SEUIL DE SECTION ---------- */
.tjn-seuil {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .82rem; font-family: var(--mono); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--toile);
  margin: 0 0 1.1rem; padding-bottom: .55rem; border-bottom: 2px solid var(--encre);
}
.tjn-seuil__n { color: var(--encre2); letter-spacing: .1em; }

/* ---------- LE CASIER (grille de vignettes) ---------- */
.tjn-casier { max-width: 78rem; margin: 2rem auto 0; }
.tjn-casier__grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1.3rem;
}
.tjn-numero {
  background: var(--papier2); border: 1px solid var(--filet); border-top: 5px solid var(--teinte, var(--filet));
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  display: flex; flex-direction: column;
}
.tjn-numero__vign { margin: 0; aspect-ratio: 3/2; overflow: hidden; background: var(--teinte, var(--filet)); }
.tjn-numero__vign img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tjn-numero:hover .tjn-numero__vign img { transform: scale(1.03); }
.tjn-numero__corps { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.tjn-numero__rep { display: flex; align-items: center; gap: .75rem; margin: 0; }
.tjn-numero__rep .tjn-portee { margin-left: auto; }
.tjn-numero__titre { font-size: 1.18rem; }
.tjn-numero__titre a { color: var(--encre); text-decoration: none; }
.tjn-numero__titre a:hover { color: var(--toile); }
.tjn-numero__resume { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--encre2); flex: 1; }
.tjn-numero__att { margin: .3rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--encre2); display: flex; gap: .5rem; }

/* ---------- LA PARTIE (puce forme+nom) ---------- */
.tjn-partie {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
  background: var(--teinte, var(--papier)); border: 1px solid var(--filet-fort);
  padding: .3rem .65rem; border-radius: 999px;
}
.tjn-partie:hover { color: var(--encre); filter: brightness(.96); }

/* ---------- LE FIL DENSE ---------- */
.tjn-fil { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 2px solid var(--encre); }
.tjn-chant {
  display: grid; grid-template-columns: 4.4rem minmax(0,1fr) auto; gap: 1.1rem; align-items: center;
  padding: .7rem .4rem; border-bottom: 1px solid var(--filet); border-left: 5px solid transparent;
}
.tjn-chant:hover { background: var(--papier2); border-left-color: var(--teinte, var(--filet)); }
.tjn-chant__vign { margin: 0; width: 4.4rem; height: 4.4rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--filet); background: var(--teinte, var(--filet)); }
.tjn-chant__vign img { width: 100%; height: 100%; object-fit: cover; }
.tjn-chant__rep { margin: 0 0 .15rem; display: flex; align-items: center; gap: .55rem; }
.tjn-chant__rep .tjn-forme { width: .8em; height: .8em; }
.tjn-chant__intitule h3 { font-size: 1.05rem; display: inline; }
.tjn-chant__intitule h3 a { color: var(--encre); text-decoration: none; }
.tjn-chant__intitule h3 a:hover { color: var(--toile); }
.tjn-chant__intitule > p:last-child { display: inline; margin: 0 0 0 .6rem; font-size: .85rem; color: var(--encre2); }
.tjn-chant__att { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--encre2); display: flex; gap: .7rem; white-space: nowrap; }

/* ---------- LES QUATRE PARTIES ---------- */
.tjn-parties { max-width: 78rem; margin: 3rem auto 0; }
.tjn-parties__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.3rem; }
.tjn-partie-carte {
  background: var(--teinte, var(--papier2)); border: 1.5px solid var(--encre);
  border-radius: var(--rayon); padding: 1.3rem 1.3rem 1.15rem; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: .6rem;
}
.tjn-partie-carte__forme .tjn-forme { width: 2.1rem; height: 2.1rem; }
.tjn-partie-carte__forme .tjn-forme svg { fill: var(--encre); }
.tjn-partie-carte h3 { font-size: 1.25rem; text-transform: none; }
.tjn-partie-carte h3 a { color: var(--encre); text-decoration: none; }
.tjn-partie-carte h3 a:hover { color: var(--toile-fonce); }
.tjn-partie-carte p { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(32,40,44,.82); flex: 1; }
.tjn-partie-carte__n a { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--toile-fonce); font-weight: 500; }

/* ---------- L'ENCART MÉTHODE ---------- */
.tjn-encart {
  max-width: 78rem; margin: 3rem auto 0; padding: 1.5rem 1.7rem;
  background: var(--papier2); border: 1px solid var(--filet); border-left: 6px solid var(--toile);
  border-radius: var(--rayon);
}
.tjn-encart p { margin: 0; max-width: 68ch; color: var(--encre2); }

/* ---------- LE RÉSEAU ---------- */
.tjn-ailleurs { max-width: 78rem; margin: 3rem auto 0; }
.tjn-ailleurs__phrase { margin: 0 0 1rem; color: var(--encre2); max-width: 62ch; }
.tjn-ailleurs__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; }
.tjn-ailleurs__liste li {
  background: var(--papier2); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1rem 1.2rem;
}
.tjn-ailleurs__liste p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--encre2); }
.tjn-ailleurs__vide { color: var(--encre2); font-style: italic; }

/* ---------- LE PIED ---------- */
.tjn-pied { margin-top: 4rem; border-top: 2px solid var(--encre); background: var(--papier2); }
.tjn-pied__bo {
  max-width: 78rem; margin: 0 auto; padding: 2.2rem 1.4rem 1.4rem;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem;
}
.tjn-pied__marque h2 { font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.tjn-pied__marque h2 .tjn-marque { width: 3.4rem; }
.tjn-pied__marque p { margin: .7rem 0 0; font-size: .88rem; color: var(--encre2); max-width: 44ch; }
.tjn-pied__note { font-family: var(--mono); font-size: .7rem !important; letter-spacing: .04em; color: var(--encre2); }
.tjn-pied__col h2 { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--toile); margin-bottom: .8rem; }
.tjn-pied__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.tjn-pied__col a { color: var(--encre); text-decoration: none; font-size: .9rem; }
.tjn-pied__col a:hover { color: var(--toile); }
.tjn-pied__fin {
  max-width: 78rem; margin: 0 auto; padding: .9rem 1.4rem 1.2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  border-top: 1px solid var(--filet);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre2);
}

/* ---------- LA REMONTÉE ---------- */
.tjn-remontee { max-width: 78rem; margin: 1.4rem auto 0; }
.tjn-remontee ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.tjn-remontee li::after { content: '§'; margin-left: .5rem; color: var(--toile); }
.tjn-remontee li:last-child::after { content: ''; }
.tjn-remontee a { color: var(--encre2); text-decoration: none; }
.tjn-remontee a:hover { color: var(--toile); }
.tjn-remontee [aria-current] { color: var(--encre); }

/* ---------- PRÉAMBULES (journal / partie / 404) ---------- */
.tjn-preambule { max-width: 78rem; margin: 2rem auto 0; }
.tjn-preambule h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-top: .4rem; }
.tjn-preambule__intro { max-width: 60ch; color: var(--encre2); font-size: 1.05rem; }
.tjn-preambule__bilan { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre2); }
.tjn-preambule--section { border-top: 8px solid var(--teinte, var(--filet)); padding-top: 1.4rem; }
.tjn-preambule--section .tjn-surtitre { display: flex; align-items: center; gap: .5rem; }
.tjn-preambule--section .tjn-surtitre .tjn-forme { width: 1.05em; height: 1.05em; }

/* ---------- LE REGISTRE (page de partie) ---------- */
.tjn-registre { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 78rem; border-top: 2px solid var(--encre); }
.tjn-releve {
  display: grid; grid-template-columns: 8.5rem minmax(0,1fr) auto; gap: 1.4rem; align-items: baseline;
  padding: 1.05rem .4rem; border-bottom: 1px solid var(--filet); border-left: 6px solid transparent;
}
.tjn-releve:hover { background: var(--papier2); border-left-color: var(--teinte, var(--filet)); }
.tjn-releve__rep { margin: 0; display: flex; align-items: center; gap: .8rem; }
.tjn-releve__intitule h3 { font-size: 1.2rem; }
.tjn-releve__intitule h3 a { color: var(--encre); text-decoration: none; }
.tjn-releve__intitule h3 a:hover { color: var(--toile); }
.tjn-releve__intitule p { margin: .25rem 0 0; font-size: .88rem; color: var(--encre2); max-width: 58ch; }
.tjn-releve__att { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--encre2); display: flex; gap: .8rem; white-space: nowrap; }

/* ---------- LE NUMÉRO LU (article) ---------- */
.tjn-numero-lu { max-width: 78rem; margin: 1.6rem auto 0; }
.tjn-numero-lu__tete {
  border-top: 8px solid var(--teinte, var(--filet)); padding-top: 1.5rem;
  max-width: 56rem;
}
.tjn-numero-lu__rep { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.tjn-numero-lu__rep .tjn-tune b { font-size: 2.2rem; }
.tjn-numero-lu h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 20ch; text-wrap: balance; }
.tjn-numero-lu__date { margin: .7rem 0 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--toile); }
.tjn-chapeau { font-size: 1.14rem; line-height: 1.6; color: var(--encre2); max-width: 54ch; margin: .9rem 0 0; }
.tjn-signature { display: flex; flex-wrap: wrap; gap: .5rem .7rem; margin: 1rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre2); }
.tjn-signature__sep { color: var(--toile); }
.tjn-plaque { margin: 1.8rem 0 0; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.tjn-plaque img { width: 100%; }
.tjn-legende-photo { padding: .7rem 1.1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--encre2); background: var(--papier2); border-top: 1px solid var(--filet); }
.tjn-credit { color: var(--toile); }

.tjn-duo { display: grid; grid-template-columns: minmax(0,1fr) 17rem; gap: 2.6rem; margin-top: 2rem; }
.tjn-corps { max-width: 42rem; font-size: 1.05rem; }
.tjn-corps p { margin: 0 0 1.15rem; }
.tjn-corps h2 { font-size: 1.45rem; margin: 2.1rem 0 .8rem; padding-top: 1.1rem; border-top: 1px solid var(--filet); }
.tjn-corps h3 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.tjn-corps a { font-weight: 700; }
.tjn-corps ul, .tjn-corps ol { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.tjn-corps li { margin-bottom: .4rem; }
.tjn-corps blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 4px solid var(--toile); color: var(--encre2); font-style: italic; }

.tjn-rail { display: flex; flex-direction: column; gap: 1.3rem; position: sticky; top: 1.2rem; align-self: start; }
.tjn-plaque-rail {
  background: var(--teinte, var(--papier2)); border: 1.5px solid var(--encre);
  border-radius: var(--rayon); padding: 1.1rem 1.2rem; box-shadow: var(--ombre);
}
.tjn-plaque-rail h2, .tjn-sommaire h2, .tjn-sources h2 {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--toile); margin-bottom: .8rem;
}
.tjn-plaque-rail dl { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.tjn-plaque-rail dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; border-bottom: 1px dotted var(--filet-fort); padding-bottom: .45rem; }
.tjn-plaque-rail dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tjn-plaque-rail dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(32,40,44,.72); }
.tjn-plaque-rail dd { margin: 0; font-size: .82rem; text-align: right; }
.tjn-plaque-rail .tjn-mono { font-family: var(--mono); }
.tjn-sommaire, .tjn-sources { background: var(--papier2); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.tjn-sommaire ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tjn-sommaire a { display: flex; align-items: baseline; gap: .6rem; color: var(--encre); text-decoration: none; font-size: .88rem; }
.tjn-sommaire a:hover { color: var(--toile); }
.tjn-verset { font-family: var(--mono); font-size: .72rem; color: var(--toile); flex: none; }
.tjn-verset::after { content: '.'; }
.tjn-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.tjn-sources li { padding-left: 1rem; position: relative; font-size: .82rem; }
.tjn-sources li::before { content: ''; position: absolute; left: 0; top: .48em; width: .5em; height: .5em; background: var(--toile); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- LES VOISINES ---------- */
.tjn-voisinage { max-width: 78rem; margin: 3rem auto 0; }
.tjn-voisinage__fil { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.3rem; }
.tjn-voisine {
  background: var(--papier2); border: 1px solid var(--filet); border-top: 5px solid var(--teinte, var(--filet));
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); padding-bottom: 1rem;
}
.tjn-voisine__vign { margin: 0; aspect-ratio: 3/2; overflow: hidden; }
.tjn-voisine__vign img { width: 100%; height: 100%; object-fit: cover; }
.tjn-voisine__rep { display: flex; align-items: center; gap: .6rem; margin: .8rem 1rem .3rem; font-family: var(--mono); font-size: .68rem; color: var(--encre2); }
.tjn-voisine__rep .tjn-forme { width: .85em; height: .85em; }
.tjn-voisine__rep time { margin-left: auto; }
.tjn-voisine h3 { font-size: 1.02rem; margin: 0 1rem; }
.tjn-voisine h3 a { color: var(--encre); text-decoration: none; }
.tjn-voisine h3 a:hover { color: var(--toile); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 64rem) {
  .tjn-duo { grid-template-columns: 1fr; }
  .tjn-rail { position: static; }
  .tjn-une { grid-template-columns: 1fr; }
  .tjn-une__vign { min-height: 13rem; }
  .tjn-pied__bo { grid-template-columns: 1fr 1fr; }
  .tjn-releve { grid-template-columns: 6.5rem minmax(0,1fr); }
  .tjn-releve__att { grid-column: 2; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  main { padding: 0 1rem 3rem; }
  .tjn-banderole span:last-child { display: none; }
  .tjn-hameau { padding: .9rem 1rem .7rem; gap: .8rem; }
  .tjn-enseigne { font-size: 1.2rem; }
  .tjn-marque { width: 3.6rem; }
  .tjn-echelle { margin-left: 0; }
  .tjn-menu { padding: 0 .6rem; overflow-x: auto; flex-wrap: nowrap; }
  .tjn-menu a { padding: .7rem .8rem; flex: none; }
  .tjn-couverture { margin: 1rem .2rem 0; min-height: 21rem; }
  .tjn-couverture h1 { font-size: 1.75rem; }
  .tjn-legende, .tjn-une, .tjn-casier, .tjn-parties, .tjn-encart, .tjn-ailleurs, .tjn-preambule, .tjn-remontee, .tjn-registre, .tjn-numero-lu, .tjn-voisinage { margin-left: 0; margin-right: 0; }
  .tjn-onglets { border-radius: var(--rayon); flex-direction: column; }
  .tjn-onglet + .tjn-onglet { border-left: 0; border-top: 1px solid var(--filet); }
  .tjn-chant { grid-template-columns: 4.4rem minmax(0,1fr); }
  .tjn-chant__att { grid-column: 2; }
  .tjn-chant__intitule > p:last-child { display: block; margin: .3rem 0 0; }
  .tjn-releve { grid-template-columns: 1fr; gap: .5rem; }
  .tjn-releve__att { grid-column: 1; }
  .tjn-pied__bo { grid-template-columns: 1fr; gap: 1.6rem; }
}