/* =====================================================================
   ATLAS TEARDROP — Styles spécifiques au blog
   S'appuie sur style.css (tokens, header, footer, boutons).
   ===================================================================== */

/* ---------- LISTE D'ARTICLES (blog/index.html) ---------------------- */

.blog-hero{
  padding:90px 0 40px;
  background:linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.blog-hero .eyebrow{ margin-bottom:14px; }
.blog-hero h1{ font-size:clamp(2rem, 4.5vw, 3.4rem); margin-bottom:14px; }
.blog-hero .lead{ font-size:1.1rem; color:var(--ink-soft); max-width:680px; }

.blog-categories{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:24px 0 8px;
}
.blog-categories a{
  display:inline-block;
  padding:.5em 1.1em;
  border:1.5px solid var(--line);
  border-radius:100px;
  font-size:.85rem; font-weight:500;
  color:var(--ink-soft);
  transition:all .18s ease;
}
.blog-categories a:hover,
.blog-categories a.is-active{
  background:var(--ink); color:var(--sand); border-color:var(--ink);
}

.posts-grid{
  display:grid; gap:32px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  padding:32px 0 80px;
}

.post-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.post-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.post-card .post-media{
  aspect-ratio:16/10;
  background:var(--sand-deep);
  overflow:hidden;
  position:relative;
}
.post-card .post-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.post-card:hover .post-media img{ transform:scale(1.04); }

.post-card .post-body{
  padding:22px 24px 26px;
  display:flex; flex-direction:column; flex:1;
}

.post-meta{
  display:flex; gap:14px; align-items:center;
  font-size:.78rem; color:var(--ink-soft);
  margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.08em;
}
.post-meta .cat{
  color:var(--clay); font-weight:600;
}

.post-card h2{
  font-family:var(--ff-display);
  font-size:1.4rem; line-height:1.2;
  margin-bottom:12px;
}
.post-card .excerpt{
  font-size:.95rem; color:var(--ink-soft);
  flex:1;
}
.post-card .read-more{
  margin-top:18px;
  font-weight:600; color:var(--clay);
  display:inline-flex; align-items:center; gap:.4em;
}
.post-card .read-more::after{ content:"→"; transition:transform .2s ease; }
.post-card:hover .read-more::after{ transform:translateX(4px); }

/* ---------- ARTICLE INDIVIDUEL (blog/article-slug.html) ------------- */

.article-hero{
  position:relative;
  padding:120px 0 60px;
  background:var(--pine);
  color:var(--sand);
  overflow:hidden;
}
.article-hero::before{
  content:""; position:absolute; inset:0;
  background:url(img/blog/hero-bg-noise.svg) center/cover;
  opacity:.08; pointer-events:none;
}
.article-hero .eyebrow{ color:var(--ochre); }
.article-hero .eyebrow::before{ background:var(--ochre); }
.article-hero h1{
  font-size:clamp(2rem, 5vw, 3.6rem);
  max-width:880px;
  margin:14px 0 18px;
}
.article-hero .article-meta{
  display:flex; flex-wrap:wrap; gap:18px;
  font-size:.85rem; color:rgba(244,236,224,.75);
  text-transform:uppercase; letter-spacing:.1em;
}
.article-hero .article-meta time::before{ content:"📅 "; margin-right:.3em; }
.article-hero .article-meta .author::before{ content:"✍️ "; margin-right:.3em; }
.article-hero .article-meta .reading-time::before{ content:"⏱ "; margin-right:.3em; }

.article-cover{
  margin:-30px auto 50px;
  max-width:1080px; padding:0 24px;
  position:relative; z-index:2;
}
.article-cover img{
  width:100%; aspect-ratio:16/8;
  object-fit:cover;
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.article-body{
  max-width:760px;
  margin:0 auto 80px;
  padding:0 24px;
  font-size:1.08rem; line-height:1.78;
  color:var(--ink);
}
.article-body p{ margin:0 0 1.2em; }
.article-body p:first-of-type::first-letter{
  font-family:var(--ff-display);
  font-size:3.6em; font-weight:500;
  float:left; line-height:.88;
  padding:6px 12px 0 0; color:var(--clay);
}
.article-body h2{
  font-size:1.7rem;
  margin:2em 0 .7em;
  color:var(--pine);
}
.article-body h3{
  font-size:1.3rem;
  margin:1.6em 0 .5em;
}
.article-body ul, .article-body ol{
  margin:0 0 1.4em 1.2em;
}
.article-body li{ margin-bottom:.5em; }
.article-body a{
  color:var(--clay); text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.article-body a:hover{ color:var(--clay-dark); }
.article-body blockquote{
  border-left:3px solid var(--clay);
  padding:8px 0 8px 24px;
  margin:1.5em 0;
  font-family:var(--ff-display);
  font-size:1.25rem; font-style:italic;
  color:var(--pine);
}
.article-body img{
  border-radius:var(--r);
  margin:1.5em 0;
  box-shadow:var(--shadow);
}
.article-body figure{ margin:1.5em 0; }
.article-body figcaption{
  font-size:.85rem; color:var(--ink-soft);
  text-align:center; font-style:italic;
  margin-top:.5em;
}
.article-body code{
  background:var(--sand);
  padding:.15em .45em;
  border-radius:4px;
  font-size:.92em;
  font-family:'SF Mono', Menlo, Monaco, monospace;
}
.article-body hr{
  border:none;
  height:1px;
  background:var(--line);
  margin:3em 0;
}

.article-tags{
  max-width:760px; margin:0 auto 40px; padding:0 24px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.article-tags a{
  font-size:.78rem;
  padding:.4em .9em;
  background:var(--sand);
  border-radius:100px;
  color:var(--ink-soft);
  transition:all .18s ease;
}
.article-tags a:hover{ background:var(--ink); color:var(--sand); }

.article-cta{
  background:var(--sand);
  border-top:1px solid var(--line);
  padding:60px 0;
  text-align:center;
}
.article-cta h2{ font-size:1.8rem; margin-bottom:12px; }
.article-cta p{ color:var(--ink-soft); margin-bottom:24px; }

.article-related{
  background:var(--paper);
  padding:60px 0 80px;
  border-top:1px solid var(--line);
}
.article-related h2{
  text-align:center;
  font-size:1.6rem;
  margin-bottom:32px;
}
.article-related .posts-grid{ padding:0; }

/* ---------- BREADCRUMB ---------------------------------------------- */

.breadcrumb{
  font-size:.82rem;
  color:var(--ink-soft);
  padding:18px 0 0;
  text-transform:uppercase; letter-spacing:.08em;
}
.breadcrumb a{ color:var(--clay); font-weight:500; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ margin:0 .5em; opacity:.6; }

/* ---------- ÉTAT VIDE ----------------------------------------------- */

.posts-empty{
  text-align:center; padding:80px 0;
  color:var(--ink-soft);
}
.posts-empty h2{
  font-family:var(--ff-display);
  font-size:1.5rem; margin-bottom:14px;
  color:var(--ink);
}

/* ---------- RESPONSIVE ---------------------------------------------- */

@media(max-width:720px){
  .article-hero{ padding:100px 0 40px; }
  .article-cover{ margin:-20px auto 40px; }
  .article-body{ font-size:1rem; line-height:1.7; }
  .article-body p:first-of-type::first-letter{ font-size:3em; }
  .blog-hero{ padding:70px 0 30px; }
  .posts-grid{ grid-template-columns:1fr; gap:24px; }
}