/*******************************************************************
                    STYLE POUR LA PAGE DE CRÉDITS
********************************************************************/
.credits {

    @media screen and (max-width: 389px) {

        /*Pour la gestion des cartes dans les formats de téléphones très petits*/
        .carte-global-credits {

            scale: 0.69;
        }
    }

    .credits_section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    strong {
        color: var(--couleur-accent-secondaire);
    }

    h1.credits_title {
        background: var(--header-couleur-titres-3);
        background: var(--header-couleur-titres-3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .background_cercle {
        background: linear-gradient(0deg, #cf976c 21.9%, #9D2578 77.62%);
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        display: flex;
        background-size: 100% 65%;
        margin-bottom: 3rem;
        justify-content: center;
    }

    .credits_petite_description {
        text-align: center;
        font-weight: var(--graisseur-mince);
        font-size: var(--mobile-taille-textes-petits);
        color: var(--main-couleur-texte-principale);
        font-family: var(--police-secondaire);
        margin-bottom: 2rem;
    }

    .credits_auteurs {
        text-align: center;
        font-size: var(--mobile-taille-textes-petits);
        color: var(--main-couleur-texte-principale);
        font-family: var(--police-secondaire);
        margin-bottom: var(--marge-titresSecondaires);
        margin-left: var(--marge-titresSecondaires);
        margin-right: var(--marge-titresSecondaires);
    }

    /* Derrière le img de la section, ajouter un dégradé en forme de cercle */

    .credits_section img {
        position: relative;
        /* scale: 0.7; */
        /* z-index: 1; */
        filter: drop-shadow(-1px 0px 0px var(--couleur-accent-primaire)) drop-shadow(1px 0px 0 var(--couleur-accent-secondaire));
    }

    .imgEquipe {
        width: 60%;
        height: clamp(10.7rem, 1.3935rem + 46.5324vw, 23.7rem);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    #malaika {
        height: 97%;
        translate: 1.1rem 0.3rem;
        z-index: 4;
        /* scale: 0.8; */
    }

    #alicia {
        height: 93%;
        translate: 1.7rem;
        z-index: 5;
    }

    #valerie {
        translate: -0.6rem -0.2rem;
        height: 88%;
        z-index: 1;
    }

    #lhaissa {
        height: 104%;
        z-index: 2;
        translate: 0rem 0.5rem;
    }

    #melanie {
        translate: -1.5rem 0.7rem;
        z-index: 0;
        height: 100%;
    }

    .credits_section::before {
        content: "";
        position: absolute;
        background: radial-gradient(circle, var(--couleur-accent-quaternaire), rgba(255, 240, 240, 0) 50%);
        z-index: 0;
    }

    /* Styles pour les tablettes */
    @media (min-width: 768px) {
        .credits_petite_description {
            font-size: var(--tablette-taille-petitsTextes);
        }

        .credits_section::before {
            top: 60vh;
            background: radial-gradient(circle, var(--couleur-accent-quaternaire), rgba(255, 240, 240, 0) 40%);
        }

        #malaika {}

        #alicia {}

        #valerie {}

        #lhaissa {}

        #melanie {}

    }

    /* Styles pour les desktops */
    @media (min-width: 1024px) {
        .credits_petite_description {
            font-size: var(--desktop-taille-petitsTextes);
            margin-bottom: 3rem;
        }

        .credits_section::before {
            background: radial-gradient(circle, var(--couleur-accent-quaternaire), rgba(255, 240, 240, 0) 80%);
        }

        .credits_section img {
            position: relative;
            z-index: 1;
            width: 790px;
            height: 754px;
        }

        .imgEquipe {
            height: clamp(38rem, 28.1538rem + 15.3846vw, 42rem);
        }

        #malaika {
            translate: 5.5rem;
        }

        #alicia {
            translate: 7.9rem;
        }

        #valerie {
            translate: -3rem;
        }

        #lhaissa {
            translate: 1rem;
        }

        #melanie {
            translate: -8rem 2rem;
        }
    }

    .carte-credits {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 95rem;
    }

    .carte-global-credits {
        padding: 0;
        margin: 0;
    }
}