/* Le conteneur parent */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si pas assez de place */
    gap: 20px;       /* Espace entre les colonnes */
    width: 100%;
}

/* Les colonnes */
.flex-col {
    /* Par défaut : prend toute la largeur (Mobile First) */
    flex: 1 1 100%; 
}

/* Version Bureau (écran > 768px) */
@media (min-width: 768px) {
    .col-50 { flex: 0 0 calc(50% - 10px); }
    .col-30 { flex: 0 0 calc(30% - 10px); }
    .col-70 { flex: 0 0 calc(70% - 10px); }
}