/* Bloc contenant toutes les vignettes */
#liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Nombre de vignettes sur une ligne en responsive, selon largeur de la page */
    gap: 2.5rem;
    margin-top: 2rem;
}

/* Tout les élémnts (sauf les images) */
.item {
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* Vignettes des cartes anceinnes */
.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 1rem;
    width: 15rem;
    overflow: hidden;
    box-shadow: var(--md-shadow-z1); /* Box shadow, var générée par mkdocs */
    border-radius: var(--main-border-radius);
}

/* Liens clicables vers zenodo, sous le titre de la carte */
.card_linkzenodo {
    font-size: 0.6rem;
    font-style: italic;
    margin-bottom: 1rem;
}

/* Données associées aux cartes anciennes dans les vignettes */
.card_meta, .card_meta_topic {
    color: #000000;
    font-size: 0.65rem;
    margin-top: 0.2rem;
}

/* Espace entre champs topic et les btn detailed infomration / compare */
.card_meta_topic {
    margin-bottom: 1.5rem;
}

/* Mise en forme particluière pour données manquantes */
.inconnu {
  color: rgb(170, 170, 170);
  font-style: italic;
  font-size: 0.5rem;
}

/* Taille et forme de l'image de la carte ancienne */
.card_img img {
    width: 15rem;
    height: 10rem;
    object-fit: cover; /* La carte n'est pas déformée (selon sa taille des parties peuvent ne pas être visibles) */
    border-radius: var(--main-border-radius);
    display: block;
    margin-right: 2rem;
    cursor: pointer;
}

/* Titre de la carte ancienne */
.title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--main-color);
}

/* Metadonnée des vignettes */
.card_infopage {
    display: grid;
    grid-template-rows: 1fr 1fr;
    font-size: 0.65rem;
    margin-top: auto;
}

/* Gestion des sous page pour la liste des cartes */
/* Limite à 20 vignettes par sous page */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 20px 0;
    flex-wrap: wrap;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 0.7rem;
}

/* Style des btn pour changer de page */
.page-btn {   
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 4px;
}

/* Style au passage de la souris sur les btn de chagement de page */
.page-btn:hover {
    background-color: var(--main-hover-gray);
}

/* Style du btn pour la page active */
.page-btn.active {
    background: var(--main-color);
    color: white;
    border-color: #0080c0;
}

/* Espace a gauche et a droite du picto flèche pour le navigateur de page des vignettes (previous et next) */
.page-btn .picto {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}