/* styles/journal.css — Le Journal : la liste (/journal) et les articles (/journal/:slug).
   Couleurs et polices viennent de main.css. Le texte terracotta reste en
   --accent-deep (5,6:1 sur le fond crème) : --accent n'est lisible qu'à
   24 px et plus. */

/* ===== La liste ===== */
.journal-hero { text-align: center; max-width: 720px; margin: 0 auto; padding: clamp(3rem,6vw,5rem) var(--gutter) clamp(1.5rem,3vw,2.5rem); }
.journal-hero__eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; font-weight:600; color:var(--accent-deep); margin-bottom:1.5rem; }
.journal-hero__eyebrow .dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; }
.journal-hero h1 { font-style:italic; font-weight:300; font-size:clamp(2.3rem,5.5vw,4rem); margin-bottom:1rem; }
.journal-hero h1 em { font-style:normal; color:var(--accent); }
.journal-hero p { font-size:1.05rem; line-height:1.6; color:var(--ink-soft); max-width:50ch; margin:0 auto; }

.journal-grid { max-width:880px; margin:0 auto; padding: 1rem var(--gutter) clamp(3.5rem,7vw,5.5rem); display:flex; flex-direction:column; gap:1.25rem; }
.journal-notice { text-align:center; margin:0 0 0.5rem; font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--ink-soft); }

.journal-card {
  display:grid; grid-template-columns: 240px 1fr; gap:1.5rem; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:1.1rem; transition: transform .25s, box-shadow .25s;
  color:inherit; text-decoration:none;
}
.journal-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.journal-card:focus-visible { outline:2px solid var(--accent-deep); outline-offset:3px; }
.journal-card__img { aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--bg-2); }
.journal-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.journal-card__kicker { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--accent-deep); margin:0 0 0.4rem; }
.journal-card__title { font-family:var(--serif); font-size:1.6rem; font-weight:500; line-height:1.15; margin:0 0 0.5rem; }
.journal-card__excerpt { font-size:0.95rem; line-height:1.6; color:var(--ink-soft); margin:0 0 0.65rem; }
.journal-card__meta { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin:0; }
.journal-card--noimg { grid-template-columns:1fr; }

/* Le plus récent passe devant : image pleine largeur, titre plus grand. */
.journal-card--lead { grid-template-columns:1fr; gap:1.4rem; padding:1.25rem; }
.journal-card--lead .journal-card__img { aspect-ratio:16/9; }
.journal-card--lead .journal-card__img img { object-position:center 42%; }
.journal-card--lead .journal-card__title { font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }
.journal-card--lead .journal-card__excerpt { font-size:1.02rem; max-width:62ch; }
.journal-card--lead .journal-card__text { padding:0 0.35rem 0.35rem; }

.journal-soon { text-align:center; padding:1.5rem; border:1.5px dashed var(--hair); border-radius:16px; color:var(--ink-mute); font-family:var(--serif); font-style:italic; font-size:1.1rem; }
@media (max-width:640px){ .journal-card{ grid-template-columns:1fr; } }

/* ===== Un article ===== */
.ja-head {
  max-width: 820px; margin: 0 auto;
  padding: clamp(2.75rem,6vw,5rem) var(--gutter) clamp(1.5rem,3vw,2.25rem);
  text-align: center;
}
.ja-kicker {
  display:inline-block; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700;
  color:var(--accent-deep); margin:0 0 1.1rem;
}
.ja-kicker:hover { color:var(--ink); }
.ja-kicker:focus-visible { outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:2px; }
.ja-title {
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.03; letter-spacing:-0.025em;
  color:var(--ink); margin:0 0 1.4rem; text-wrap:balance;
}
.ja-meta { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin:0; }

.ja-body {
  max-width: 680px; margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem,5vw,4rem);
  font-size:1.14rem; line-height:1.75; color:var(--ink-soft);
}
.ja-body p { margin:0 0 1.5rem; }
.ja-body strong { color:var(--ink); font-weight:600; }
.ja-body a { color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.ja-body a:hover { color:var(--ink); }
.ja-body a:focus-visible { outline:2px solid var(--accent-deep); outline-offset:2px; border-radius:2px; }

/* Le chapeau : la phrase qui dit de quoi il s'agit, avant tout le reste. */
.ja-body .journal-deck {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,3vw,1.75rem); line-height:1.4; color:var(--ink);
  text-align:center; margin:0 0 2.25rem; text-wrap:balance;
}

.ja-body h2 {
  font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.15rem);
  line-height:1.15; letter-spacing:-0.015em; color:var(--ink);
  margin:clamp(2.75rem,5vw,3.5rem) 0 1.1rem; scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.ja-body h3 { font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--ink); margin:2.25rem 0 0.8rem; }

.ja-body ul, .ja-body ol { margin:0 0 1.6rem; padding-left:1.3rem; }
.ja-body li { margin:0 0 0.85rem; padding-left:0.25rem; }
.ja-body li::marker { color:var(--accent); }
.ja-body blockquote {
  margin:2rem 0; padding:0.2rem 0 0.2rem 1.4rem; border-left:3px solid var(--accent);
  font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.5; color:var(--ink);
}
.ja-body blockquote p { margin:0 0 0.8rem; }
.ja-body hr { border:0; border-top:1px solid var(--hair); margin:2.75rem 0; }
.ja-body code { font-size:0.92em; background:var(--bg-2); padding:0.1em 0.35em; border-radius:4px; }

/* Les images sortent un peu de la colonne de texte. Une image en hauteur
   (escalier, tableau) est plafonnée pour ne pas prendre tout l'écran. */
.journal-figure {
  width:min(880px, calc(100vw - 2 * var(--gutter)));
  margin:2.5rem 0 2.75rem; position:relative; left:50%; transform:translateX(-50%);
}
.journal-figure img {
  display:block; margin:0 auto; width:auto; height:auto;
  max-width:100%; max-height:min(78vh, 760px);
  border:1px solid var(--border); border-radius:6px; background:#fff;
  box-shadow:var(--shadow);
}
.journal-figure figcaption {
  max-width:680px; margin:0.85rem auto 0; padding:0 0.25rem;
  font-size:0.92rem; line-height:1.55; color:var(--ink-mute); text-align:center;
}
.journal-figure__credit { display:block; margin-top:0.2rem; font-size:0.82rem; color:var(--ink-mute); opacity:0.9; }

/* Les sources : plus petites, mais lisibles — c'est ce qui rend l'article vérifiable. */
.ja-body h2#sources { font-size:1.45rem; margin-top:3.25rem; padding-top:2rem; border-top:1px solid var(--hair); }
.ja-body h2#sources + ul { font-size:0.97rem; line-height:1.6; }
.ja-body h2#sources + ul li { margin-bottom:0.5rem; overflow-wrap:anywhere; }

/* Plus d'articles */
.ja-more { max-width:680px; margin:0 auto; padding:0 var(--gutter) clamp(2.5rem,5vw,4rem); }
.ja-more h2 { font-family:var(--serif); font-size:1.5rem; font-weight:600; margin:0 0 1rem; color:var(--ink); }
.ja-more ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.ja-more li { display:flex; justify-content:space-between; gap:1rem; padding:0.9rem 0; border-bottom:1px solid var(--hair); }
.ja-more a { font-family:var(--serif); font-size:1.2rem; font-weight:500; color:var(--ink); }
.ja-more a:hover { color:var(--accent-deep); }
.ja-more span { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; align-self:center; }

/* Fin d'article : même bandeau que « Our Story ». */
.journal-cta { background:var(--ink); color:#FFF9F0; text-align:center; padding:clamp(3rem,6vw,4.5rem) var(--gutter); }
.journal-cta h2 { font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(2.15rem,5vw,3.6rem); line-height:1.08; letter-spacing:-0.02em; max-width:18ch; margin:0 auto 1.75rem; color:#FFF9F0; }
.story-cta__btn {
  display:inline-flex; align-items:center; gap:0.5rem; background:var(--accent-deep); color:#FFF9F0;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:1rem 2rem; border-radius:999px; transition:filter .2s, transform .2s;
}
.story-cta__btn:hover { filter:brightness(0.88); transform:translateY(-2px); }
.story-cta__btn:focus-visible { outline:2px solid #FFF9F0; outline-offset:3px; }

@media (max-width:640px) {
  .ja-body { font-size:1.08rem; }
  .ja-more li { flex-direction:column; gap:0.2rem; }
  .journal-cta h2 { max-width:15ch; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-card, .story-cta__btn { transition:none; }
  .journal-card:hover, .story-cta__btn:hover { transform:none; }
}