/* ============================================================
   style-blog.css — mise en page du blog Travel Club.
   Charge APRÈS style.css : réutilise les variables (--navy, --gold,
   --ink, --sub...), le header, le footer et le bandeau cookies qui
   y sont déjà définis. Ce fichier ne redéfinit que ce qui est propre
   au blog : la grille d'articles, la lecture longue, la FAQ, le CTA.
   ============================================================ */

/* ---------- Nav ----------
   Sur la LP, le nav est transparent/flouté pour flotter au-dessus de la photo
   plein écran du hero (négatif margin-top du .hero-photo). Le blog n'a pas ce
   hero photo derrière : la même transparence laisse voir le fond blanc de la
   page, d'où l'aplat plein ci-dessous, qui prime sur la règle de style.css
   chargée avant lui. */
nav{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;}

.blog-hero{
  background:var(--tint);
  padding:48px 6vw 40px;
  text-align:center;
}
.blog-hero .kicker{color:var(--gold-dark);}
.blog-hero h1{
  font-family:'Zilla Slab',serif;font-weight:600;
  font-size:2.4rem;line-height:1.2;color:var(--ink);
  max-width:720px;margin:0 auto 14px;
}
.blog-hero p{
  font-family:'Work Sans',sans-serif;color:var(--sub);
  max-width:560px;margin:0 auto;font-size:1.05rem;
}

/* ---------- Grille de la page d'index ---------- */
.blog-grid{
  max-width:1400px;margin:0 auto;padding:56px 6vw 80px;
  display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;
}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}

.blog-card{
  display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid #ECECF4;
  box-shadow:0 6px 20px rgba(21,26,51,.06);
  text-decoration:none;color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,26,51,.12);}

.blog-card-media{position:relative;}
.blog-card-media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.blog-card-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;
  background:linear-gradient(to top, rgba(10,12,26,.88) 0%, rgba(10,12,26,.6) 60%, rgba(10,12,26,0) 100%);
}
.blog-card-overlay .blog-card-pilier{color:var(--gold-light);margin-bottom:4px;}
.blog-card-overlay h2{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:1.15rem;
  line-height:1.28;color:#fff;margin:0;
}

.blog-card-body{padding:14px 22px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.blog-card-pilier{
  font-family:'Work Sans',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);
}
.blog-card p{font-family:'Work Sans',sans-serif;font-size:.88rem;color:var(--sub);line-height:1.55;margin:0;flex:1;}
.blog-card-date{font-family:'Work Sans',sans-serif;font-size:.74rem;color:var(--sub);opacity:.75;}

.blog-empty{
  grid-column:1/-1;text-align:center;padding:40px 20px;
  font-family:'Work Sans',sans-serif;color:var(--sub);
}

/* ---------- Page article ---------- */
.blog-article-hero{
  background:var(--tint);padding:36px 6vw 260px;
}
.blog-breadcrumb{
  max-width:1100px;margin:0 auto 18px;
  font-family:'Work Sans',sans-serif;font-size:.76rem;color:var(--sub);
}
.blog-breadcrumb a{color:var(--ink);text-decoration:none;}
.blog-breadcrumb a:hover{text-decoration:underline;}
.blog-article-hero .kicker{color:var(--gold-dark);text-align:left;max-width:1100px;margin:0 auto 10px;}
.blog-article-hero h1{
  font-family:'Zilla Slab',serif;font-weight:600;
  font-size:2.1rem;line-height:1.25;color:var(--ink);
  max-width:1100px;margin:0 auto 14px;
}
.blog-article-meta{
  max-width:1100px;margin:0 auto;
  font-family:'Work Sans',sans-serif;font-size:.8rem;color:var(--sub);
}

.blog-article-image{max-width:900px;margin:-226px auto 0;padding:0 6vw;}
.blog-article-image img{width:100%;border-radius:16px;box-shadow:0 16px 34px rgba(21,26,51,.18);}

.blog-article-body{
  max-width:1100px;margin:0 auto;padding:48px 6vw 20px;
  font-family:'Work Sans',sans-serif;color:var(--ink);
  font-size:1.08rem;line-height:1.7;
}
.blog-article-body h2{
  font-family:'Zilla Slab',serif;font-weight:600;color:var(--ink);
  font-size:1.55rem;margin:40px 0 14px;
}
.blog-article-body h3{
  font-family:'Zilla Slab',serif;font-weight:600;color:var(--ink);
  font-size:1.2rem;margin:28px 0 10px;
}
.blog-article-body p{margin:0 0 16px;}
.blog-article-body ul,.blog-article-body ol{margin:0 0 16px;padding-left:22px;}
.blog-article-body li{margin-bottom:8px;}
.blog-article-body a{color:var(--gold-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.blog-article-body strong{color:var(--ink);}

.blog-faq{max-width:1100px;margin:0 auto;padding:0 6vw 20px;}
.blog-faq h2{
  font-family:'Zilla Slab',serif;font-weight:600;color:var(--ink);
  font-size:1.55rem;margin:0 0 18px;
}
.blog-faq-item{border-top:1px solid #ECECF4;padding:16px 0;}
.blog-faq-item:last-child{border-bottom:1px solid #ECECF4;}
.blog-faq-item h3{
  font-family:'Work Sans',sans-serif;font-weight:700;font-size:.98rem;
  color:var(--ink);margin:0 0 6px;
}
.blog-faq-item p{font-family:'Work Sans',sans-serif;font-size:.92rem;color:var(--sub);margin:0;line-height:1.6;}

/* ---------- Bloc CTA de fin d'article ---------- */
.blog-cta{
  max-width:1100px;margin:16px auto 60px;padding:0 6vw;
}
.blog-cta-inner + .blog-cta-inner{margin-top:16px;}
.blog-cta-inner{
  border-radius:20px;padding:32px 36px;
  background:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.blog-cta-inner > div{flex:1;min-width:0;}
.blog-cta-inner .btn-primary{flex-shrink:0;}
.blog-cta-inner h2{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:1.35rem;
  color:#fff;margin:0 0 6px;
}
.blog-cta-inner p{font-family:'Work Sans',sans-serif;color:rgba(255,255,255,.75);font-size:.92rem;margin:0;max-width:420px;}
.blog-cta-inner .btn-primary{flex-shrink:0;}

/* Variante sobre : lien interne vers un autre article (intention Info) plutôt que le RDV */
.blog-cta-inner.blog-cta-info{background:var(--tint);}
.blog-cta-inner.blog-cta-info h2{color:var(--ink);}
.blog-cta-inner.blog-cta-info p{color:var(--sub);}

/* ---------- Articles liés ---------- */
.blog-related{max-width:1100px;margin:0 auto;padding:0 6vw 70px;}
.blog-related h2{
  font-family:'Zilla Slab',serif;font-weight:600;color:var(--ink);
  font-size:1.3rem;margin:0 0 16px;
}
.blog-related-list{display:flex;flex-direction:column;gap:2px;}
.blog-related-list a{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:.94rem;
  color:var(--ink);text-decoration:none;padding:12px 0;border-top:1px solid #ECECF4;
}
.blog-related-list a:last-child{border-bottom:1px solid #ECECF4;}
.blog-related-list a:hover{color:var(--gold-dark);}