/* Styles spécifiques à la page Blog (liste d'articles) */

.section { max-width: 1000px; }

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(200,235,255,0.45));
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0,80,150,0.1);
  transition: all 0.25s;
}

.article-card::after { display: none; }

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0,100,200,0.22);
}

.article-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.article-card .article-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-card .article-date {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(0,90,150,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--blue-dark);
  line-height: 1.3;
}

.article-card p {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0,50,80,0.7);
  line-height: 1.5;
}

.empty-blog {
  text-align: center;
  padding: 30px 20px;
}

.empty-blog .emoji { font-size: 3rem; display: block; margin-bottom: 12px; }

.empty-blog p {
  color: rgba(0,50,80,0.65);
  font-weight: 600;
  max-width: 460px;
  margin: 0 auto;
}

.load-more-wrap { text-align: center; margin-top: 24px; }

.load-more-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  color: white;
  background: linear-gradient(135deg, var(--sky-top), #5bc8a0);
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,120,200,0.3);
  transition: all 0.25s;
}

.load-more-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,120,200,0.4); }
.load-more-btn[hidden] { display: none; }

.seo-text {
  font-size: 0.85rem;
  color: rgba(0,50,80,0.7);
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}