/* ═══════════════════════════════════════════════
   SUPRADRAMA — Journal (surcouche de v2.css + v3.css)
   Pages générées par _refonte/journal/build.py
   ═══════════════════════════════════════════════ */

/* ── Index ─────────────────────────────── */
.j-index{padding:64px 0 88px;border-bottom:1px solid var(--hairline)}
.j-index .dept-head{margin-bottom:20px}
.j-index .dept-head h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.j-intro{max-width:620px;color:var(--muted);font-size:.95rem;margin:0 0 48px 164px}
.j-list{border-top:1px solid var(--hairline)}
.j-row{
  display:grid;grid-template-columns:140px 1fr auto;gap:24px;align-items:baseline;
  padding:28px 0;border-bottom:1px solid var(--hairline);
}
.j-row .j-date{color:var(--muted)}
.j-row .j-theme{color:var(--rose);display:block;margin-bottom:8px}
.j-row h2{
  font-variation-settings:'wdth' 110;font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;
  transition:color .35s var(--ease);
}
.j-row p{color:var(--muted);font-size:.95rem;max-width:62ch;margin-top:8px}
.j-row .j-go{color:var(--rose);transition:transform .35s var(--ease)}
.j-row:hover h2{color:var(--rose-pale)}
.j-row:hover .j-go{transform:translateX(4px)}

/* ── Article ───────────────────────────── */
.j-article{padding:48px 0 80px;border-bottom:1px solid var(--hairline)}
.j-col{max-width:740px;margin:0 auto}
.j-back{color:var(--muted);display:inline-block;margin-bottom:40px;transition:color .2s}
.j-back:hover{color:var(--rose-pale)}
.j-meta{color:var(--muted);margin-bottom:18px}
.j-meta .j-theme{color:var(--rose)}
.j-article h1{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1;margin-bottom:24px}
.j-chapo{font-size:1.2rem;line-height:1.5;color:var(--ivoire);font-weight:500}

.j-body{margin-top:40px;padding-top:40px;border-top:1px solid var(--hairline);font-size:1.08rem;line-height:1.72;color:rgba(244,239,230,.88)}
.j-body>*+*{margin-top:1.15em}
.j-body h2{
  font-variation-settings:'wdth' 112;font-weight:750;color:var(--ivoire);
  font-size:1.5rem;line-height:1.2;margin-top:2em;
}
.j-body h3{font-weight:700;color:var(--ivoire);font-size:1.15rem;line-height:1.3;margin-top:1.7em}
.j-body strong{color:var(--ivoire);font-weight:650}
.j-body a{color:var(--ivoire);border-bottom:1px solid var(--rose);transition:color .2s}
.j-body a:hover{color:var(--rose-pale)}
.j-body ul,.j-body ol{padding-left:1.3em}
.j-body li+li{margin-top:.5em}
.j-body li::marker{color:var(--rose)}
.j-body blockquote{
  border-left:2px solid var(--rose);padding-left:22px;
  font-size:1.25rem;line-height:1.45;color:var(--ivoire);font-weight:500;
}
.j-body hr{border:0;border-top:1px solid var(--hairline);margin:2.2em 0}
.j-body img{border-radius:var(--r-m);border:1px solid var(--hairline)}

/* Signature + suites */
.j-sign{
  margin-top:56px;padding-top:28px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline;
  color:var(--muted);font-size:.9rem;
}
.j-sign b{color:var(--ivoire);font-weight:600}
.j-sign a{color:var(--rose)}
.j-sign a:hover{color:var(--rose-pale)}
.j-cta{
  margin-top:40px;padding:32px;border:1px solid var(--hairline);border-radius:var(--r-l);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--encre-2);
}
.j-cta h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:8px}
.j-cta p{color:var(--muted);font-size:.95rem;max-width:44ch}
.j-cta .j-btns{display:flex;gap:10px;flex-wrap:wrap}
.j-next{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.j-next a{display:block;padding:20px 22px;border:1px solid var(--hairline);border-radius:var(--r-m);transition:border-color .35s var(--ease)}
.j-next a:hover{border-color:var(--rose)}
.j-next .mono{color:var(--muted);display:block;margin-bottom:8px}
.j-next b{font-weight:650;line-height:1.25;display:block}
.j-next .is-next{text-align:right}

@media (max-width:768px){
  .j-index{padding:40px 0 64px}
  .j-intro{margin-left:0}
  .j-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .j-row .j-go{display:none}
  .j-article{padding:32px 0 64px}
  .j-back{margin-bottom:28px}
  .j-body{font-size:1.03rem}
  .j-cta{grid-template-columns:1fr;padding:24px}
  .j-next{grid-template-columns:1fr}
  .j-next .is-next{text-align:left}
}

.j-body code{font-family:"Spline Sans Mono",monospace;font-size:.88em;background:var(--encre-2);border:1px solid var(--hairline);border-radius:6px;padding:1px 6px}