/* LISTE DES SIGNALEMENTS */
/* Flexbox de la liste des signalements (Cards + filtres) */
.petlist {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(49, 26, 26);
    margin: auto;
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
}

/* Box pour les filtres */
.filter {
    flex-basis: 20%;
    margin: 2% 0% 2% 2%;
    padding-right: 2%;
    border-right: solid 1px black;
}

/* Box de la liste des signalements */
.list {
    display: flex;
    flex-wrap: wrap;
    margin: 2% auto 2% auto;
    justify-content: center;
    align-content: first baseline;
}

/* Classe pour chaque card présent dans la liste */
.card-pet {
    margin: 1%;
    border: solid 1px rgba(0, 0, 0, 0.100);
    background-color: white;
}

/* Titre d'une card */
.card-title {
    font-size: x-large;
    font-weight: bold;
}

/* Image de l'animal correspondant au signalement */
.img-pet {
    width: 100%;
    height: 25vh;
    object-fit: cover;
}

/* Corp de la card (En dessous de l'image) */
.card-body {
    margin: 5%;
}

/* Ligne rouge pour 'animal perdu' */
.line-lost {
    width: 75%;
    border: solid 1px #dc3545;
}

/* Ligne verte pour ' animal aperçu ' */
.line-found {
    width: 75%;
    border: solid 1px #198754;
}

/* Balise [APERCU] dans le titre de la card */
.title-found {
    color: #198754;
}

/* Balise [PERDU] dans le titre de la card */
.title-lost {
    color: #dc3545;
}

/* Ombre de la card en cas de perte */
.box-lost {
    box-shadow: 2px 1px 7px #dc3545;
}

/* Ombre de la card en cas de vu */
.box-found {
    box-shadow: 2px 1px 7px #198754;
}

/* Fond de chaque boutton de l'accordéon du filtre */
.filter-item {
    background-color: #CCEBF1 !important;
}

/* MEDIA QUERIES */
/* Mobile & Tablettes */
@media (max-width: 1023px) {

    /* Classe pour chaque card présent dans la liste */
    .card-pet {
        margin-top: 3%;
        flex-basis: 45%;
    }

    /* Boutton pour accéder aux filtres (Non visible en desktop) */
    #filterButton {
        background-color: #CCEBF1;
        flex-basis: 100%;
        margin: 2% 0% 2% 0%;
        padding: 3% 4% 3% 4%;
        border: none;
    }

    /* Quand on sruvole le boutton pour accéder aux filtres (Non visible en desktop) */
    #filterButton:hover {
        box-shadow: 2px 1px 5px black;
    }

    /* Box pour les filtres */
    .filter {
        display: none;
    }

    /* Box de la liste des signalements */
    .list {
        flex-basis: 100%;
    }

    /* Titre d'une card */
    .card-title {
        font-size: 1.2em;
    }

    /* Corp de la card (En dessous de l'image) */
    .card-text {
        font-size: 0.8rem;
    }

    /* Image de l'animal correspondant au signalement */
    .img-pet {
        height: 18vh;
    }
}

/* Ordinateurs */
@media (min-width: 1024px) {

    /* Classe pour chaque card présent dans la liste */
    .card-pet {
        flex-basis: 20%;
    }

    /* Boutton pour accéder aux filtres (Non visible en desktop) */
    #filterButton {
        display: none;
    }

    /* Box de la liste des signalements */
    .list {
        flex-basis: 78%;
    }
}