@font-face {
    font-family: "HarbingerCaps";
    src: url("../fonts/HarbingerCaps.otf");
    font-display: swap;
}

@font-face {
    font-family: "RobotoRegular";
    src: url("../fonts/RobotoRegular.ttf");
    font-display: swap;
}

section {
    margin-top: 2rem;
}

h1 {
    margin: 0;
    font-family: "HarbingerCaps";
    font-size: 17px;
    text-align: center;
}

.cartePersonnage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    justify-content: space-around;
}

    .cartePersonnage .imagePersonnage {
        width: 40%;
        display: flex;
        justify-content: center;
    }

    .cartePersonnage .flexPersonnage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cartePersonnage img {
        height: 20rem;
        width: auto;
    }

    .cartePersonnage .tripleSpan {
        display: flex;
        justify-content: space-around;
        width: 90%;
    }

        .cartePersonnage .tripleSpan span {
            margin: 0;
            padding: 0;
            background-color: #0d122f;
            color: white;
            border-radius: 7px;
            padding: 0.45rem;
            width: 26%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            overflow-wrap: anywhere;
        }

    .cartePersonnage p {
        text-align: justify;
        margin: 1.1rem;
        font-size: 1.1rem;
    }


.ligne {
    height: 2px;
    display: block;
    width: 96%;
    background-color: black;
    margin: 6px auto 16px;
}


    .listePersonnages ul {
        padding: 0;
        margin: 0;
        display: grid;
        /* grid-template-columns: repeat(auto-fit, minmax(100px, 190px))*/
        justify-content: center;
        justify-items: center
    }

        .listePersonnages ul li {
            list-style-type: none;
            margin: 0.2rem 0.5rem;
            cursor: pointer;
        }

            .listePersonnages ul li img {
                height: 11rem;
                width: auto;
                background-color: #010317;
                border-radius: 8px;
            }

            .listePersonnages ul li p {
                margin: 8px 0 2px;
                text-align: center;
                font-family: "HarbingerCaps";
                font-size: 1.1rem;
            }

/* Pour le grid */


@media (max-width: 289px) {
    .listePersonnages ul {
        grid-template-columns: repeat(auto-fit, minmax(100px, 122px));
    }

        .listePersonnages ul li img {
            height: 8rem;
        }
}

@media (min-width: 290px) and (max-width: 330px) {
    .listePersonnages ul {
        grid-template-columns: repeat(auto-fit, minmax(100px, 145px));
    }

        .listePersonnages ul li img {
            height: 9rem;
        }
}

@media (min-width: 331px) and (max-width: 400px) {
    .listePersonnages ul {
        grid-template-columns: repeat(auto-fit, minmax(100px, 166px));
    }
}

@media (min-width: 401px) and (max-width: 570px) {
    .listePersonnages ul {
        grid-template-columns: repeat(auto-fit, minmax(100px, 180px));
    }
}

@media (min-width: 570px) and (max-width: 960px) {
    .listePersonnages ul {
        grid-template-columns: repeat(auto-fit, minmax(100px, 190px));
    }
}

/* Tablette */

@media (min-width: 720px) and (max-width: 959px) {
    .cartePersonnage img {
        height: 23rem;
        margin-top: -63px;
    }
}
/* Desktop */
@media (min-width: 960px) {

    h1 {
        font-size: 30px;
    }

    .ligne {
        margin: 10px auto 30px;
    }

    .cartePersonnage {
        flex-direction: row;
    }

        .cartePersonnage img {
            height: 40rem;
            width: auto;
        }

        .cartePersonnage .flexPersonnage {
            height: 40rem;
            width: 58%;
            justify-content: center;
            margin-right: 2%;
        }

        .cartePersonnage p {
            text-align: justify;
            margin: 50px 1rem;
            height: 200px;
        }

    .listePersonnages ul {
        margin: auto;
        width: 90%;
        grid-template-columns: repeat(auto-fit, minmax(150px, 400px));
    }

        .listePersonnages ul li img {
            height: 25rem;
        }

        .listePersonnages ul li p {
            font-size: 1.6rem;
            margin: 12px 0 48px;
        }
}