/* ---------------------------------------------------------------------------
   Blog : liste d'articles et page d'article.

   Repris du <style> produit en chaîne PHP dans blog.php : couleurs de thème
   clair codées en dur (#ddd, #f9f9f9, #333...) sur un site entièrement sombre,
   largeur en pourcentage sans plafond, aucun des boutons/cartes n'utilisant
   les jetons du design system. Un .pagination local écrasait même le
   composant déjà correctement stylé pour tout le reste du site
   (components.css) avec des pastilles blanches.

   #commentModal, #photoModal, .photo-thumbnails, .blog-buttons,
   .comment-box/.comment-header/.comment-author/.comment-date de l'ancienne
   version ont disparu : aucun gabarit actuel (blog.ejs, blog-article.ejs) ne
   les pose plus, ces fonctionnalités n'existent plus.
   --------------------------------------------------------------------------- */

.blog-container {
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-8) auto var(--e-12);
    padding-inline: clamp(20px, 5vw, 72px);
}

.blog-title {
    text-align: center;
    margin: 0 0 var(--e-6);
    color: var(--texte);
}

.vide { text-align: center; color: var(--texte-faible); padding: var(--e-10) 0; }

/* --- Liste d'articles -------------------------------------------------------- */

.blog-article {
    display: flex;
    gap: var(--e-5);
    margin-bottom: var(--e-5);
    padding: var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
}

.blog-thumbnail {
    width: 240px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--fond-2);
}
.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.blog-content h2 {
    margin: 0 0 var(--e-2);
    font-size: clamp(var(--t-lg), 2.2vw, var(--t-xl));
}
.blog-content h2 a { color: var(--texte); text-decoration: none; }
.blog-content h2 a:hover { color: var(--rose-clair); }

.blog-date {
    margin: 0 0 var(--e-3);
    color: var(--texte-faible);
    font-size: var(--t-sm);
}

.blog-description {
    margin: 0 0 var(--e-4);
    color: var(--texte-doux);
    font-size: var(--t-base);
    line-height: 1.6;
}

.blog-lien {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rose-clair);
    font-weight: 600;
    font-size: var(--t-sm);
    text-decoration: none;
    transition: color var(--transition), gap var(--transition);
}
.blog-lien:hover { color: var(--rose); gap: 10px; }

@media (max-width: 640px) {
    .blog-container { padding-inline: clamp(16px, 5vw, 32px); }
    .blog-article { flex-direction: column; }
    .blog-thumbnail { width: 100%; }
}

/* --- Page d'article ----------------------------------------------------------
   Ajouté au portage : la page d'article, qui n'existait pas séparément — le
   blog affichait tout dans la liste. */

.blog-single .blog-title { text-align: left; }
.blog-single .blog-date { margin-bottom: var(--e-5); }

.blog-couverture {
  width: 100%;
  max-width: 720px;
  border-radius: var(--r-md);
  margin: 0 auto var(--e-6);
  display: block;
}

.blog-single .blog-description {
  color: var(--texte-doux);
  font-size: var(--t-base);
  line-height: 1.7;
}

.blog-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--e-3);
  margin: var(--e-6) 0;
}

.blog-galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: opacity var(--transition);
}
.blog-galerie a:hover img { opacity: 0.85; }

.blog-single > .blog-lien { display: inline-flex; margin-top: var(--e-4); }