.presentation{
    display: flex;
    justify-content: left;
}

.presentation h2{
    text-align: left;
}

.logoLangages{
    border-radius: 1rem;
    height: auto;
    width: auto;
    max-height: 9rem;
    max-width: 9rem;
    margin: 1rem;
    margin-top: 0.5rem;

}

a.cta{
    height: 2.5rem;
    }

.card ul {
    display: inline-block;
    text-align: left;
    list-style-position: inside;
    padding-left: 20px;
}

/* ---- CSS pour les logos ---- */

/* Le conteneur qui va aligner nos logos horizontalement */
.logo-container {
    display: flex;           /* La magie du Flexbox pour aligner */
    flex-wrap: wrap;         /* Si pas assez de place, passe à la ligne */
    justify-content: center; /* Aligne au centre */
    align-items: flex-start; /* Aligne les éléments par le haut */
    gap: 20px;               /* Un peu d'espace entre chaque logo */
}

/* Chaque bloc logo + légende */
.logo-item {
    display: flex;
    flex-direction: column;  /* Met l'image, PUIS la légende en dessous */
    align-items: center;     /* Centre la légende sous l'image */
    margin: 0;               /* Annule le 'margin' par défaut de <figure> */
}

/* Votre classe de logo existante (juste pour être sûr) */
.logoLangages {
    /* Vos styles actuels, par ex: height: 60px; */
}

/* Le style pour votre nouvelle légende */
.label-apprentissage {
    font-size: 0.85em;       /* Un peu plus petit */
    font-style: italic;      /* En italique, ça fait "note de bas de page" */
    color: #555;             /* Pas noir, un peu plus discret */
    margin-top: 5px;         /* Petit espace entre le logo et le texte */
    text-align: center;
}
@media (max-width: 600px) {
    .presentation {
        flex-direction: column; /* Empile le texte et le bouton */
        align-items: center;    /* Centre-les horizontalement */
    }

    .presentation h2 {
        text-align: center;   /* Centre le texte du h2 */
    }
}