/* ============================================================
   Radio Good News — feuille de style du journal (blog).
   Complète assets/page.css : mêmes jetons de design, mêmes
   composants d'en-tête et de pied de page. Ajoute seulement
   la mise en page éditoriale des articles.
   ============================================================ */

:root{
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --ink-soft:#1f2937;
}

/* ============ Barre de progression de lecture ============ */
.read-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:60;
  height:3px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),#ffd36d 55%,var(--teal));
  pointer-events:none;
}

/* ============ Fil d'Ariane / retour ============ */
.crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-weight:800;
  font-size:.92rem;
  color:var(--muted);
  text-decoration:none;
  transition:color .18s ease;
}

.crumb:hover,
.crumb:focus-visible{color:var(--ink)}

/* ============ En-tête d'article ============ */
.post{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.1);
  border-radius:34px;
  padding:42px;
  box-shadow:var(--shadow);
}

.post .eyebrow{
  color:#1a1103;
  background:linear-gradient(135deg,var(--orange),#ffd36d);
  border:0;
  box-shadow:0 10px 26px rgba(255,138,0,.22);
}

.post-title{
  font-size:clamp(2rem,5.2vw,3.9rem);
  line-height:1.02;
  letter-spacing:-.055em;
  margin:18px 0 14px;
  max-width:19ch;
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:0 0 26px;
  color:var(--muted);
  font-size:.94rem;
  font-weight:700;
}

.post-meta .dot{opacity:.5}

.post-figure{margin:0 0 34px}

.post-figure img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center 28%;
  border-radius:26px;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 26px 60px rgba(11,31,39,.18);
}

.post-figure figcaption{
  margin-top:12px;
  color:var(--muted);
  font-size:.88rem;
  font-style:italic;
}

/* ============ Corps d'article ============ */
.post-body{max-width:66ch}

.post-lead{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.2vw,1.42rem);
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 26px;
}

.post-body p{
  font-family:var(--serif);
  font-size:1.14rem;
  line-height:1.78;
  color:var(--ink-soft);
  margin:0 0 24px;
}

.post-body p.tight{margin-bottom:14px}

/* Intertitres : sans-serif serré pour trancher avec le corps en serif. */
.post-body h2{
  margin:42px 0 16px;
  font-size:clamp(1.35rem,3vw,1.72rem);
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--ink);
}

.post-body strong{color:var(--ink)}

.post-body a{
  color:#b45f00;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

.post-body a:hover{color:var(--orange)}

/* Lettrine sur le premier paragraphe : petit geste éditorial,
   désactivé sur très petits écrans pour rester lisible. */
.post-body > p.dropcap::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:3.6rem;
  line-height:.82;
  font-weight:700;
  padding:6px 12px 0 0;
  color:var(--orange);
}

.post-body blockquote{
  margin:32px 0;
  padding:4px 0 4px 24px;
  border-left:3px solid var(--orange);
}

.post-body blockquote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.46rem);
  line-height:1.5;
  color:var(--ink);
  margin:0;
}

.post-body blockquote cite{
  display:block;
  margin-top:12px;
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  font-style:normal;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.post-rule{
  width:70px;
  height:4px;
  border:0;
  border-radius:99px;
  margin:38px 0;
  background:linear-gradient(90deg,var(--orange),var(--teal));
}

.post-sign{
  max-width:66ch;
  color:var(--muted);
  font-size:.98rem;
  margin:0;
}

.post-sign a{color:var(--orange);font-weight:800}

/* ============ Encart d'écoute en fin d'article ============ */
.post-cta{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(135deg,rgba(119,212,199,.22),rgba(255,138,0,.12));
  border:1px solid rgba(17,24,39,.1);
  border-radius:26px;
  padding:26px 28px;
}

.post-cta h3{
  font-size:1.24rem;
  letter-spacing:-.02em;
  margin:0 0 6px;
}

.post-cta p{
  color:var(--muted);
  margin:0;
  max-width:46ch;
}

.post-cta .btn{width:auto}

/* ============ Liste du journal ============ */
.blog-head{margin-bottom:34px}

.blog-head .eyebrow{
  color:#1a1103;
  background:linear-gradient(135deg,var(--orange),#ffd36d);
  border:0;
  box-shadow:0 10px 26px rgba(255,138,0,.22);
}

.blog-title{
  font-size:clamp(2rem,4.6vw,4.2rem);
  line-height:.98;
  letter-spacing:-.055em;
  margin:16px 0 14px;
  max-width:16ch;
}

.post-list{
  display:grid;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}

.post-card{
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:0;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(17,24,39,.1);
  border-radius:30px;
  box-shadow:var(--shadow);
  transition:transform .24s ease, box-shadow .24s ease;
}

.post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px rgba(11,31,39,.2);
}

.post-card img{
  width:100%;
  height:100%;
  min-height:230px;
  object-fit:cover;
  object-position:center 28%;
}

.post-card-body{padding:28px 30px}

.post-card-body h2{
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.1;
  letter-spacing:-.04em;
  margin:12px 0 10px;
}

.post-card-body h2 a{
  text-decoration:none;
  background-image:linear-gradient(var(--orange),var(--orange));
  background-size:0 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .28s ease;
}

.post-card:hover h2 a{background-size:100% 2px}

.post-card-body p{
  color:var(--muted);
  margin:0 0 16px;
  font-size:1.02rem;
}

.post-card .post-meta{margin:0 0 4px}

.card-more{
  font-weight:850;
  color:var(--orange);
  text-decoration:none;
}

.blog-note{
  margin-top:30px;
  color:var(--muted);
  font-size:.96rem;
}

/* ============ Apparition au chargement ============ */
@media (prefers-reduced-motion:no-preference){
  .rise{
    opacity:0;
    transform:translateY(14px);
    animation:rise .7s cubic-bezier(.22,.8,.3,1) forwards;
  }
  .rise-2{animation-delay:.08s}
  .rise-3{animation-delay:.16s}
  .rise-4{animation-delay:.24s}
}

@keyframes rise{to{opacity:1;transform:none}}

/* ============ Responsive ============ */
@media (max-width:880px){
  .post{padding:26px}
  .post-card{grid-template-columns:1fr}
  .post-card img{min-height:200px;aspect-ratio:16 / 9;height:auto}
  .post-card-body{padding:24px}
  .post-cta{padding:22px}
  .post-cta .btn{width:100%}
}

@media (max-width:520px){
  .blog-title,
  .post-title{font-size:clamp(1.7rem,7.4vw,2.3rem);max-width:none}
  .post-body > p.dropcap::first-letter{
    float:none;
    font-size:inherit;
    line-height:inherit;
    padding:0;
    color:inherit;
  }
  .post-figure img{aspect-ratio:4 / 3;border-radius:20px}
}