/* Styles pour une carte */

.card {
    border: 1px solid var(--color-border);
    text-align: left;
    box-sizing: border-box;
	width: 100%;
    display: flex;
    flex-direction: column;
}

.grid {
    display: grid;
}

.card-shadow {
    box-shadow: 4px 4px var(--color-button-shadow);
}

.card-header {
    padding: 8px 16px;
    border-bottom: 2px solid var(--color-border);
	background-color : var(--color-grey-background);
}
.card-header p {margin:0; padding: 0;}

.card-title {
    font-size: 24px;
    margin: 0;
	font-family: var(--font-family-space-mono);
}

.card-body.danger, .card-body.alert, .card-body.edit {border:none}

.card-body {
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
}

.card-footer {
    padding: 8px 16px;
}

/* Styles pour le conteneur de la grille de cartes */

.cards {
    justify-content: center; /* Centre les cartes horizontalement */
    gap: 20px;
    padding: 20px;
}

#main-content.cards {
	padding: 80px 20px 20px 20px;
}

.cards .card {
    justify-self: center; /* Centre individuellement chaque carte */
	margin-bottom: 20px;
}

.cards.grid .card {
	margin: 0;
}


.cards.grid {
	grid-template-columns: repeat(2, 1fr);
}

.card ul,
.card li{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.card li{
	margin: 0.5em 0;
}

.card li ul{
	margin-left: 1em;
}

.card-body h3{
	margin-top:0;
}

.cards header,
.span-2{
	grid-column: span 2;
}


@media (max-width: 767px) {
    .cards.grid {
        grid-template-columns: 1fr;
    }
	.card {
		width: 100%;
	}
	.cards header,
	.span-2{
		grid-column: auto;
	}
}