/* HERO */
	 .hero-tag {
      background: var(--bleu-clair);
      font-size: .72rem;
      padding: 5px 14px;
    }
    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      margin-bottom: 1.25rem;
    }
    .hero-sub {
      font-size: 1rem; line-height: 1.75;
      max-width: 480px;
    }
    .btn-primary {
      white-space: nowrap;
    }
   
    /* Visuel hero : bloc éditorial stylisé */
    .hero-visual {
      align-self: start;
    }

/* Ajustements pour les métadonnées (date, catégorie) */
/* Section blog générale */
.blog-section {
  width: 100%;
  padding: 50px 20px;
  background-color: var(--bleu-tres-clair);
}

/* Conteneur blog */
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-container h1 {
  font-family: "Avory I PE", sans-serif;
  color: var(--bleu);
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 30px;
}

/* Liste d'articles */
.article-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Colonnes responsives */
  gap: 30px;
}

/* Article individuel */
.article-item {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Pour que les bordures arrondies fonctionnent avec l'image */
  transition: transform 0.3s ease;
}

.article-item a {
  display: block; /* Pour que le lien occupe tout l'espace */
  color: inherit; /* Hérite de la couleur du texte parent */
  text-decoration: none; /* Supprime le soulignement par défaut */
}

.article-item:hover {
  transform: translateY(-5px); /* Légère élévation au survol */
}

/* Image de l'article */
.article-item img {
  width: 100%; /* L'image prend toute la largeur du conteneur */
  max-height: 200px; /* Hauteur maximale de l'image (à ajuster) */
  height: auto; /* Garde les proportions de l'image */
  object-fit: cover; /* Assure que l'image remplit l'espace, en la coupant si nécessaire */
  display: block; /* Supprime l'espace sous l'image (si applicable) */
}

/* Détails de l'article */
.article-details {
  padding: 20px;
}

.article-title {
  font-family: "Avory I PE", sans-serif;
  /* color: #FFFFFF; /* Bleu principal */ 
  font-size: 1.3em;
  margin-bottom: 10px;
}

.article-excerpt {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 20px;
}

.read-more {
  display: inline-block;
  color: var(--bleu);
  font-weight: bold;
}

.article-meta {
  font-size: 0.9em;
  color: #666; /* Gris */
  margin-bottom: 15px;
  display: flex; /* Pour aligner l'icône et le texte */
  flex-direction: column; /* Pour afficher la date et la catégorie sur deux lignes */
  gap: 5px; /* Espacement entre les lignes */
}

/* Style des petites icônes bleues (forme_bleu1a.png) */
.article-meta .meta-icon {
  width: 15px; /* Ajuster la taille si besoin */
  height: 15px;
  vertical-align: middle; /* Aligner verticalement avec le texte */
  margin-right: 5px; /* Ajouter un espace entre l'icône et le texte */
  display: inline-block; /* Nécessaire pour vertical-align */
}

.article-meta span{
     display: flex; /*On profite du comportement flex */
    align-items: center;/* Pour bien centrer verticalement*/
}

/* Responsive pour les petits écrans (à ajuster si nécessaire) */
@media (max-width: 768px) {
  .blog-container {
    padding: 0 10px;
  }
  .article-list {
    grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
  }
  .article-item {
    margin-bottom: 20px;
  }

  /* (Reprise des styles précédents) */
  .article-meta {
    flex-direction: column; /* Les images restent en colonne, un retour à la ligne automatique va se faire si elles dépassent*/
    text-align: left; /* Retour au texte à gauche*/
  }
}