/* ==========================================================================
   Style de liste : columns
   Affiche les cartes sur N colonnes de largeur égale.
   Le nombre de colonnes est passé via la classe CSS .columns-{n}.
   Les surcharges par variation de style utilisent la classe ajoutée sur
   <main id="page"> par index.php (ex: main.cana, main[class*="14-18"]).
   ========================================================================== */

.cards-list.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* --- Largeur des cartes selon le nombre de colonnes --- */

.cards-list.columns.columns-1 > .card  { width: 100%; }
.cards-list.columns.columns-2 > .card  { width: calc(50% - 10px); }
.cards-list.columns.columns-3 > .card  { width: calc(33.333% - 14px); }
.cards-list.columns.columns-4 > .card  { width: calc(25% - 15px); }
.cards-list.columns.columns-5 > .card  { width: calc(20% - 16px); }
.cards-list.columns.columns-6 > .card  { width: calc(16.666% - 17px); }

/* --- Responsive : 1 colonne sur mobile --- */
@media (max-width: 600px) {
    .cards-list.columns > .card { width: 100%; }
}