/* Conteneur principal du blog */
.blog {
    --_fg-blog: var(--fg-blog, #000000);
    --_fg-person: var(--fg-person, #00bfa0);
    background-color: #F1F5F9;  /* Couleur de fond de la section blog */
    margin-bottom: 3rem;   /* Espace en bas de la section */
    
}

/* Titre principal du blog */
.blog-title {
    text-align: center; /* Centrage du texte */
    font-size: 1.5rem;  /* Taille du texte */
    color: var(--_fg-person); /* Couleur personnalisée */
    margin-bottom: 1rem; /* Espacement sous le titre */
}

/* Sous-texte du blog */
.blog-subtext {
    color: #000000;
    font-size: 1.3rem; /* Taille du texte */
}

/* Carte individuelle du blog */
.blog-cards {
    border: solid #CCCC;  /* Bordure*/
    border-radius: 5px; /* Coins arrondis */
    background-color: #ffffff; /* Fond blanc */
/* Mise en page en colonne */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
/* Marges externes */
    margin-bottom: 3rem;
    margin: 1rem;
}

/* Image du blog */
.blog-image {
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    width: 20rem;   /* Largeur de l’image */
    height: 13rem; /* Hauteur de l’image */
    border-radius: 5px; /* Coins arrondis */
    margin-top: 1rem; /* Espace au-dessus */

}

/* Zone texte sous l’image */
.sub-txt-img {
    display: flex; /* Alignement horizontal */
    margin-bottom: 1.5rem; /* Espacement entre les éléments */
    margin-right: 3rem;
    gap: 0.5rem;
}

/* Texte lié à une personne*/
.person {
    color: var(--_fg-person);
}

/* Badge "tips" */
.tips {
    text-align: center; /* Texte centré */
    color: #ffff;  /* Texte blanc */
    background-color: var(--_fg-person);
    border: solid 1px var(--_fg-person);
    border-radius: 4px;
    width: 5rem; /* Largeur fixe */
}
 /* Paragraphe du blog */
.paragraphe-blog {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    margin-right: 2rem;
}

/* Conteneur des textes du blog */
.blog-texts {
    margin-left: 1.5rem;
    margin-right: 2rem;
    
}

/* Bouton du blog */
.blog-btn {
    margin-left: 1.5rem;
    background-color: #ffffff;
    border: none;
    color: var(--_fg-person);
    cursor: pointer;
}

/* Responsive : écrans larges */
@media (width > 40rem) {
/* Conteneur des cartes en mode desktop */ 
    .cards-blog {
    display: flex;
    flex-direction: row; /* Alignement horizontal */
    flex-wrap: wrap; /* Retour à la ligne si besoin */
    justify-content: center;
    gap: 2rem; /* Espacement entre les cartes */
   }

   /* Taille des cartes sur grand écran */
   .blog-cards{
    width: 25%;
   }
}