/* ============================================
   PAGE /blog/ — Index articles + single article
   ============================================ */

/* ===== Grille des cartes ===== */

.blog-grid {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       grid;
  gap:           var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ===== Carte article ===== */

.blog-card {
  display:    block;
  height:     100%;
}

.blog-card__article {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--color-bg);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg, 16px);
  overflow:       hidden;
  transition:     transform var(--duration-base) var(--ease-out),
                  border-color var(--duration-base) var(--ease-out),
                  box-shadow var(--duration-base) var(--ease-out);
}

.blog-card__article:hover {
  transform:    translateY(-3px);
  border-color: var(--color-iroise-cyan);
  box-shadow:   0 14px 32px rgba(0, 80, 168, 0.08);
}

.blog-card__media-link {
  display:        block;
  aspect-ratio:   16 / 9;
  overflow:       hidden;
  background:     var(--color-iroise-blue-soft);
  text-decoration: none;
}

.blog-card__media-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-slow, 0.6s) var(--ease-out);
}

.blog-card__article:hover .blog-card__media-img {
  transform: scale(1.04);
}

.blog-card__media-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  color:           var(--color-iroise-blue);
  opacity:         0.4;
}

.blog-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-5);
  flex:           1;
}

.blog-card__meta {
  margin:         0;
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  flex-wrap:      wrap;
}

.blog-card__sep {
  opacity: 0.4;
}

.blog-card__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-lg);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-iroise-blue);
  margin:         0;
}

.blog-card__title-link {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
}

.blog-card__title-link:hover,
.blog-card__title-link:focus-visible {
  color: var(--color-iroise-cyan);
}

.blog-card__excerpt {
  margin:      0;
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
  max-width:   none;
}

.blog-card__cta {
  margin-top: auto;
  margin-bottom: 0;
}


/* ===== Pagination ===== */

.blog-pagination {
  margin-top: var(--space-9);
}

.blog-pagination__list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  justify-content: center;
  flex-wrap:  wrap;
  gap:        var(--space-2);
}

.blog-pagination__item .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       40px;
  height:          40px;
  padding:         0 var(--space-3);
  border-radius:   var(--radius-md);
  border:          1px solid var(--color-border);
  background:      var(--color-bg);
  color:           var(--color-text);
  font-family:     var(--font-base);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-medium);
  text-decoration: none;
  transition:      border-color var(--duration-fast) var(--ease-out),
                   color var(--duration-fast) var(--ease-out),
                   background var(--duration-fast) var(--ease-out);
}

.blog-pagination__item .page-numbers:hover,
.blog-pagination__item .page-numbers:focus-visible {
  border-color: var(--color-iroise-cyan);
  color:        var(--color-iroise-blue);
  outline:      none;
}

.blog-pagination__item .page-numbers.current {
  background:   var(--color-iroise-blue);
  border-color: var(--color-iroise-blue);
  color:        var(--color-text-inverse);
}

.blog-pagination__item .page-numbers.dots {
  border-color: transparent;
  background:   transparent;
}


/* ===== État vide ===== */

.blog-empty {
  max-width:      640px;
  margin:         0 auto;
  padding:        var(--space-8) var(--space-5);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}

.blog-empty__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--color-iroise-blue-soft);
  color:           var(--color-iroise-blue);
}

.blog-empty__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, var(--fs-2xl));
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-iroise-blue);
  margin:         0;
}

.blog-empty__lead {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
  margin:      0;
  max-width:   54ch;
}

.blog-empty__actions {
  margin-top: var(--space-3);
  justify-content: center;
}


/* ===========================================
   ARTICLE INDIVIDUEL (single.php)
   =========================================== */

.blog-single__breadcrumb-link {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
}

.blog-single__breadcrumb-link:hover,
.blog-single__breadcrumb-link:focus-visible {
  color: var(--color-iroise-cyan);
}

.blog-single__meta {
  margin:         var(--space-4) 0 0;
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  flex-wrap:      wrap;
}

.blog-single__sep {
  opacity: 0.4;
}

.blog-single__media {
  margin: 0;
  padding-block: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-iroise-blue-soft);
}

.blog-single__media-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.blog-single__body {
  padding-block: var(--space-8);
}

.blog-single__content {
  max-width: 720px;
}

.blog-single__content p,
.blog-single__content li {
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
  color:       var(--color-text);
}

.blog-single__content h2,
.blog-single__content h3 {
  font-family:    var(--font-display);
  color:          var(--color-iroise-blue);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--lh-tight);
  margin-top:     var(--space-7);
}

.blog-single__content h2 {
  font-size:   clamp(1.5rem, 3vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
}

.blog-single__content h3 {
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
}

.blog-single__content a {
  color:           var(--color-iroise-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-single__content a:hover,
.blog-single__content a:focus-visible {
  color: var(--color-iroise-cyan);
}

.blog-single__content blockquote {
  border-left: 3px solid var(--color-iroise-blue);
  padding:     var(--space-4) var(--space-5);
  background:  var(--color-iroise-blue-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin:      var(--space-6) 0;
  font-style:  italic;
}

.blog-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .blog-card__article,
  .blog-card__media-img,
  .blog-card__title-link,
  .blog-pagination__item .page-numbers {
    transition: none;
  }
  .blog-card__article:hover {
    transform: none;
  }
  .blog-card__article:hover .blog-card__media-img {
    transform: none;
  }
}