/* ============================================
   JOURNAL — Blog scientifique (ajout v20260714)
   ============================================ */

/* Fil d'Ariane */
.breadcrumb {
  font-size: .72rem; font-weight: 500; letter-spacing: .04em;
  color: rgba(255,255,255,.5); margin-bottom: 18px;
}
.breadcrumb a { color: var(--vert-clair); transition: color var(--transition); }
.breadcrumb a:hover { color: white; }

/* ── PAGE ARTICLE ─────────────────────────── */
.article-hero-title {
  max-width: 900px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05;
}

.article-wrap { max-width: 760px; margin: 0 auto; padding-top: 8px; }

.article-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 400; font-style: italic;
  line-height: 1.45; color: var(--vert); margin-bottom: 8px;
  padding-bottom: 28px; border-bottom: 1px solid var(--creme-fonce);
}

.article-content { font-size: 1.16rem; }

.article-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  color: var(--vert); line-height: 1.12;
  margin: 44px 0 16px; padding-top: 8px;
}
.article-content h2::before {
  content: ''; display: block; width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--terre-claire), var(--vert-mid));
  border-radius: 1px; margin-bottom: 18px;
}

.article-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 700; color: var(--vert);
  margin: 32px 0 12px;
}

.article-content p {
  font-size: 1.16rem; font-weight: 400; color: var(--texte);
  line-height: 1.8; margin-bottom: 22px;
}

.article-content a {
  color: var(--vert-mid); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color var(--transition); word-break: break-word;
}
.article-content a:hover { color: var(--vert); }

.article-content strong { color: var(--texte); font-weight: 600; }
.article-content em { font-style: italic; }

.article-content ul, .article-content ol {
  margin: 0 0 22px; padding-left: 4px;
}
.article-content ul li, .article-content ol li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 1.12rem; font-weight: 400; color: var(--texte); line-height: 1.7;
}
.article-content ul li::before {
  content: ''; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--vert-mid);
}
.article-content ol { counter-reset: refs; list-style: none; }
.article-content ol li { counter-increment: refs; }
.article-content ol li::before {
  content: counter(refs); position: absolute; left: 0; top: 2px;
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: .95rem; color: var(--vert-mid);
  min-width: 20px; text-align: right;
}

.article-content blockquote {
  border-left: 2px solid var(--terre-claire);
  padding: 4px 0 4px 22px; margin: 28px 0;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.3rem; color: var(--terre); line-height: 1.4;
}

/* Section Références : dernière liste ol de l'article */
.article-content h2:last-of-type,
.article-content > ol:last-child { }
.article-content h2 + ol li,
.article-content ol li {
  font-size: .92rem; line-height: 1.6; color: var(--gris);
}

/* Encart méthode en pied d'article */
.article-note {
  margin-top: 44px; padding: 24px 26px;
  background: var(--creme); border: 1px solid var(--creme-fonce);
  border-radius: var(--radius-md);
}
.article-note p {
  font-size: .88rem; font-weight: 300; color: var(--gris);
  line-height: 1.7; margin: 0;
}
.article-note strong { color: var(--vert); font-weight: 600; }

/* ── INDEX JOURNAL ────────────────────────── */
.journal-intro { max-width: 620px; }

.journal-grid { gap: 24px; margin-top: 8px; }

.journal-card { display: flex; flex-direction: column; }
.journal-card__meta {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vert-mid); margin-bottom: 10px;
  display: block;
}
.journal-card .card-title { margin-bottom: 10px; }
.journal-card .card-title a { color: var(--vert); transition: color var(--transition); }
.journal-card .card-title a:hover { color: var(--vert-mid); }
.journal-card .card-text { flex-grow: 1; margin-bottom: 16px; }
.journal-card__more {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--vert-mid); transition: gap var(--transition), color var(--transition);
}
.journal-card__more:hover { color: var(--vert); }

.journal-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 0;
  color: var(--gris); font-weight: 300;
}

@media (max-width: 700px) {
  .article-wrap { max-width: 100%; }
  .article-content { font-size: 1.08rem; }
  .article-content p { font-size: 1.08rem; }
}