/*
Style adapté pour les ordinateurs ------------------------------------------------------------
*/

/* Chaque contenu desktop est caché par défaut */
.desktop-content {
    display: none;
}

/* Style activé uniquement pour un écran d'ordinateur */
@media screen and (min-width: 769px) {

    html, body {
        background-color: #efedfe;

        /* Centrage pour la "card" contenant les formulaires */
        justify-content: center;
        align-items: center;
    }

    /* On cache le contenu spécifique au mobile */
    .mobile-content {
        display: none;
    }

    /* On affiche le contenu spécifique pour les ordinateurs */
    .desktop-content {
        display: block;
    }

    /* Centrage de la carte contenant les formulaires */
    .card {
        border-radius: 20px;
        width: 95vw;
        height: calc(100vh - 205px);
        max-height: 600px;
        max-width: 650px;
        display: flex;
        margin-top: 80px;
        margin-bottom: 125px;
    }

    .card-body {
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1;
        padding: 40px 50px 50px 50px;
    }

    h1 {
        color: #786dec;
    }

    /*
    Style de la zone à gauche de la carte contenant les formulaires --------------------------------------------------------------
    */
    .desktop-card-left {
        position: relative;
        border-radius: 20px 0 0 20px;
        display: block;
        background-color: #41408D;
        width: 25%;
    }

    /*
    Cercles de la zone de gauche --------------------------------------------------------------
    */
    .desktop-card-left .circle-1 {
        top: auto;
        bottom: 20px;
        left: -50%;
        border-width: 15px;
        width: 100%;
        height: auto;
    }

    .desktop-card-left .circle-2 {
        top: 35%;
        right: auto;
        left: 25%;
        width: 25%;
        height: auto;
    }

    .desktop-card-left .circle-3 {
        top: -20px;
        right: -70%;
        width: auto;
        height: 40%;
    }

    /*
    Pied de page --------------------------------------------------------------------------------------------------------------
    */
    footer {
        position: absolute;
        bottom: 0;
        background-color: inherit;
    }

    footer img {
        box-sizing: content-box;
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }
}