/* ──────────────────────────────────────────────────────────────────────────
   JOURNAL — index éditorial et pages d'article
   Chargé uniquement par les pages de /journal/. styles.css et secondary.css
   restent les fichiers de référence ; celui-ci n'ajoute que ce qui leur manque.

   Règle de grille reprise du reste du site : la tête de section peut être
   asymétrique, le corps occupe toute la largeur. Un article fait exception sur
   la mesure — au-delà de ~46rem une ligne de texte devient illisible — donc la
   largeur est occupée par une colonne de prose ET un rail de navigation, pas
   par une prose étirée.
   ────────────────────────────────────────────────────────────────────────── */

/* `.content-page main { overflow: hidden }` de secondary.css fait du <main> un
   conteneur de défilement, ce qui désactive `position: sticky` sur tous ses
   descendants — le rail de l'article ne suivait pas. `overflow: clip` rogne de la
   même façon sans créer ce conteneur, donc le sticky fonctionne à nouveau.
   Ne pas remettre `hidden` ici. */
body.journal-page main { overflow: clip; }

/* ───── Index du Journal ───────────────────────────────────────────────── */

.journal-hero {
  padding: 4.5rem 5.5vw 5rem 3vw;
  border-bottom: 1px solid var(--line);
}
.journal-hero h1 {
  margin: 3.5rem 0 0;
  font-size: clamp(3.6rem, 9vw, 9rem);
  line-height: .84;
  letter-spacing: -.07em;
  font-weight: 500;
}
.journal-hero h1 em {
  display: block;
  color: var(--red);
  font: italic 400 1em var(--serif);
  letter-spacing: -.035em;
}
.journal-hero-bottom {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 4vw;
  align-items: end;
}
.journal-hero-bottom p { margin: 0; max-width: 620px; line-height: 1.7; }
.journal-hero-bottom p:last-child {
  justify-self: end;
  color: #75656b;
  font-size: var(--t-small);
}

.journal-list { padding: 6rem 5.5vw 7rem 3vw; }
.journal-entry {
  padding: 2.6rem 0;
  display: grid;
  grid-template-columns: 7.5rem 1fr .65fr;
  gap: 3vw;
  align-items: start;
  border-top: 1px solid var(--line);
}
.journal-entry:last-of-type { border-bottom: 1px solid var(--line); }
.journal-entry-date {
  color: var(--red);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.journal-entry h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 500;
}
.journal-entry h2 a { display: inline-block; }
.journal-entry h2 a:is(:hover, :focus-visible) { color: var(--wine); }
.journal-entry p { margin: 0; max-width: 560px; color: #6d5c63; line-height: 1.65; }
.journal-entry-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}
.journal-entry-tag {
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.journal-entry-read { color: #8a7880; font: var(--t-label) var(--mono); text-transform: uppercase; }

/* Annonce des articles à venir : évite une page qui semble abandonnée entre
   deux publications, et dit au lecteur que le rythme est tenu. */
.journal-upcoming {
  padding: 5rem 5.5vw 7rem 3vw;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.journal-upcoming > p:first-child {
  margin: 0 0 2.5rem;
  color: var(--red);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.journal-upcoming ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.journal-upcoming li {
  padding: 1.3rem 1.4rem 1.6rem 0;
  border-top: 1px solid var(--ink);
  font-size: var(--t-small);
  line-height: 1.55;
}
.journal-upcoming li + li { padding-left: 1.4rem; border-left: 1px solid var(--line); }

/* ───── Page d'article ─────────────────────────────────────────────────── */

.article-hero {
  padding: 4rem 5.5vw 4.5rem 3vw;
  border-bottom: 1px solid var(--line);
}
.article-breadcrumb {
  display: flex;
  gap: 1rem;
  align-items: center;
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a7880;
}
.article-breadcrumb a:is(:hover, :focus-visible) { color: var(--red); }
.article-hero h1 {
  margin: 3rem 0 2.5rem;
  max-width: 17ch;
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 500;
}
.article-hero h1 em {
  display: block;
  color: var(--red);
  font: italic 400 1em var(--serif);
  letter-spacing: -.03em;
}
.article-standfirst {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 4vw;
  align-items: end;
}
.article-standfirst > p:first-child {
  margin: 0;
  max-width: 640px;
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -.015em;
}
.article-meta {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  color: #8a7880;
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.article-meta b { color: var(--ink); font-weight: 400; }

.article-layout {
  padding: 5rem 5.5vw 6rem 3vw;
  display: grid;
  grid-template-columns: minmax(0, 46rem) 1fr;
  gap: 6vw;
  align-items: start;
}

/* Rail de navigation : il remplit la largeur que la prose ne doit pas prendre,
   et ses ancres donnent à Google la structure de l'article. */
.article-rail { position: sticky; top: 120px; }
.article-rail > p {
  margin: 0 0 1.2rem;
  color: var(--red);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.article-rail ol { margin: 0 0 2.5rem; padding: 0; list-style: none; counter-reset: toc; }
.article-rail li { counter-increment: toc; border-top: 1px solid var(--line); }
.article-rail li:last-child { border-bottom: 1px solid var(--line); }
/* Scopé aux entrées de sommaire : un `.article-rail a` nu attrapait aussi le
   bouton placé sous la liste et le transformait en ligne numérotée. */
.article-rail li a {
  padding: .75rem 0;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .4rem;
  font-size: var(--t-small);
  line-height: 1.4;
  color: #6d5c63;
}
.article-rail li a::before {
  content: "0" counter(toc);
  color: var(--red);
  font: var(--t-label) var(--mono);
}
.article-rail li a:is(:hover, :focus-visible) { color: var(--ink); }

.article-body > * { max-width: 46rem; }
.article-body h2 {
  margin: 3.6rem 0 1.3rem;
  scroll-margin-top: 110px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 500;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  margin: 2.4rem 0 .9rem;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  font-weight: 600;
}
.article-body p { margin: 0 0 1.3rem; line-height: 1.75; }
.article-body a:not(.button):not(.section-cta) {
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
}
.article-body a:not(.button):not(.section-cta):is(:hover, :focus-visible) {
  color: var(--red);
}
.article-body ul, .article-body ol { margin: 0 0 1.6rem; padding: 0 0 0 1.1rem; }
.article-body li { margin-bottom: .7rem; line-height: 1.7; }
.article-body strong { font-weight: 600; }

/* Encadré de mise au point : le passage qui tranche, détaché du flux. */
.article-callout {
  margin: 2.6rem 0 2.8rem;
  padding: 1.6rem 1.8rem;
  background: var(--paper);
  border-left: 3px solid var(--red);
}
.article-callout p { margin: 0; line-height: 1.7; }
.article-callout p + p { margin-top: .9rem; }

.article-table { margin: 2rem 0 2.6rem; width: 100%; border-collapse: collapse; }
.article-table th, .article-table td {
  padding: .9rem 1rem .9rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.55;
}
.article-table th {
  color: var(--red);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom-color: var(--ink);
}
.article-table td:first-child { font-weight: 600; padding-right: 1.5rem; }

.article-signature {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink);
  color: #75656b;
  font-size: var(--t-small);
  line-height: 1.6;
}

/* Articles liés : c'est le maillage interne, pas une décoration. */
.article-related {
  padding: 5rem 5.5vw 6rem 3vw;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.article-related > p:first-child {
  margin: 0 0 2.5rem;
  color: var(--red);
  font: var(--t-label) var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.article-related-grid a {
  padding: 1.4rem 1.5rem 2rem 0;
  border-top: 1px solid var(--ink);
}
.article-related-grid a + a { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.article-related-grid strong {
  display: block;
  margin-bottom: .7rem;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 500;
}
.article-related-grid span { color: #75656b; font-size: var(--t-small); line-height: 1.5; }
.article-related-grid a:is(:hover, :focus-visible) strong { color: var(--wine); }

/* ───── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .journal-hero { padding: 3rem 1.25rem 4rem; }
  .journal-hero h1 { margin-top: 2.5rem; font-size: clamp(2.8rem, 13vw, 5rem); }
  .journal-hero-bottom { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
  .journal-hero-bottom p:last-child { justify-self: start; }

  .journal-list { padding: 3rem 1.25rem 4rem; }
  .journal-entry { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .journal-entry h2 { font-size: 1.8rem; }
  .journal-entry-aside { flex-direction: row; align-items: center; gap: .8rem; }

  .journal-upcoming { padding: 3.5rem 1.25rem 4.5rem; }
  .journal-upcoming ul { grid-template-columns: 1fr; }
  .journal-upcoming li,
  .journal-upcoming li + li { padding: 1.2rem 0 1.5rem; border-left: 0; }

  .article-hero { padding: 2.5rem 1.25rem 3rem; }
  .article-hero h1 { margin: 2rem 0; max-width: none; font-size: clamp(2.2rem, 10vw, 3.6rem); }
  .article-breadcrumb { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .article-standfirst { grid-template-columns: 1fr; gap: 1.8rem; }
  .article-standfirst > p:first-child { font-size: 1.15rem; }
  .article-meta { justify-self: start; }

  /* Le rail passe au-dessus de la prose : un sommaire replié en tête d'article
     est utile sur petit écran, une colonne latérale ne l'est pas. */
  .article-layout {
    padding: 3rem 1.25rem 4rem;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .article-rail { position: static; order: -1; }
  .article-rail ol { margin-bottom: 0; }
  .article-body > * { max-width: none; }
  .article-body h2 { margin: 2.6rem 0 1rem; font-size: 1.7rem; }
  .article-callout { margin: 2rem 0; padding: 1.3rem 1.4rem; }
  .article-table th, .article-table td { font-size: .82rem; padding: .7rem .6rem .7rem 0; }

  .article-related { padding: 3.5rem 1.25rem 4.5rem; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-related-grid a,
  .article-related-grid a + a { padding: 1.3rem 0 1.8rem; border-left: 0; }
}