/* --------------------------------------------
----                                       ----
----  EN MODE DE FONCTIONNEMENT TELEPHONE  ----
----                                       ----
-----------------------------------------------
*/
@media screen and (max-width:767.98px) {
    /* design de la div du Logo */
    .logo {
        width: 320px;
        height: auto;
        border-radius: 15px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        /* border: solid green; */
    }
    .logo img {
        width: 320px;
        height: auto;
        border-radius: 15px;
    }
    /* ---------- */
    /* design de la div du texte et des minis logos */
    .affichage {
        width: 320px;
        height: auto;
        margin-top: 50px;
        border-radius: 15px;
        padding: 15px;
        background-color: white;
        box-shadow: 1px 1px 12px #555;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* border: solid green; */
    }
    .affichage h1,
    h3,
    p {
        text-align: center;
    }
    .affichage p {
        line-height: 1.5em;
    }
    .affichage a {
        text-decoration: none;
        color: brown;
    }
    /* ---------- */
    /* mise en page des mini logo des sites partenaires */
    .miniLogo {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        /* border: solid blue; */
    }
    .miniLogo img {
        width: 50px;
        height: 25px;
    }
    /* ---------- */
}



/* -----------------------------------------
----                                    ----
----  EN MODE DE FONCTIONNEMENT PC      ----
----                                    ----
--------------------------------------------
*/

@media screen and (min-width:768px) {
    /* design de la div du Logo */
    .logo {
        width: auto;
        height: auto;
        border-radius: 15px;
        box-shadow: 1px 1px 12px #555;
        /* border: solid green; */
    }
    .logo img {
        border-radius: 15px;
    }
    /* ---------- */
    /* design de la div du texte et des minis logos */
    .affichage {
        width: 600px;
        height: 400px;
        margin: 50px 0px;
        border-radius: 15px;
        padding: 15px;
        background-color: white;
        box-shadow: 1px 1px 12px #555;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* border: solid green; */
    }
    .affichage h1,
    h3,
    p {
        text-align: center;
    }
    .affichage p {
        line-height: 1.5em;
    }
    .affichage a {
        text-decoration: none;
        color: brown;
    }
    /* ---------- */
    /* mise en page des mini logo des sites partenaires */
    .miniLogo {
        display: flex;
        justify-content: space-around;
        /* border: solid blue; */
    }
    .miniLogo img {
        width: 100px;
        height: 50px;
    }
    /* ---------- */
}