/* Reset des margins de la page */

* {

    margin: 0;

}



body {

       font-family: "Calibri Light", "SF Pro Text", "Helvetica";

    /*font-family: "Roboto", "SF Pro Text", "Helvetica","Calibri Light"; */

    font-size: 1.2em;

    line-height: 1.5;

}

/* BLOCKS */

.block1,

.block2,

.block3 {

    padding: 20px 100px 20px 100px;

    /*margin: 20px;*/

}



.block1 {
    /*    background-color: #e5e0ed;  */
    background-color: rgb(245, 245, 245);
    /*   color: black;  */
}



.block2 {
    background-color: rgb(240, 243, 247);
    /*   background-color: rgb(179, 195, 211);  */
}



    .block2 a {

        color: white;

    }



.block3 {

    background-color: #ffffff;

    color: black;

}



.row {

    align-items: center;

}





.row {

    display: flex;

    flex-wrap: wrap;

}

/* DIV */

.justify{
    text-align: justify; 
    text-justify: inter-word;
}

.div5 {

    flex: 5%;

}



.div15 {

    flex: 15%;

}



.div15c {

    flex: 15%;

    align-content: center;

}



.div20 {

    flex: 20%;

    align-content: center;

}



.div20c {

    flex: 20%;

    align-content: center;

}



.div25 {

    flex: 25%;

}



.div25c {

    flex: 25%;

    align-content: center;

}



.div30 {

    flex: 30%;

}



.div30c {

    flex: 30%;

    align-content: center;

}



.div40 {

    flex: 40%;

}



.div40c {

    flex: 40%;

    align-content: center;

}



.div50 {

    flex: 50%;

}



.div50c {

    flex: 50%;

    align-content: center;

}



.div60 {

    flex: 60%;

}



.div60c {

    flex: 60%;

    align-content: center;

}



.div70 {

    flex: 70%;

}



.div70c {

    flex: 70%;

    align-content: center;

}



.div80 {

    flex: 80%;

}



.div80c {

    flex: 80%;

    align-content: center;

}



.div90 {

    flex: 90%;

}



.div90c {

    flex: 90%;

    align-content: center;

}



.img100 {

    width: 100%;

    margin: auto;

}



.img100c {

    width: 100%;

    align-content: center;

    margin: auto;

    display: block;

}



.img90 {

    width: 90%;

    margin: auto;

}



.img90c {

    width: 90%;

    align-content: center;

    margin: auto;

    display: block;

}



.img74 {

    width: 87.5%;

}



.img75 {

    width: 75%;

}



.img75c {

    width: 75%;

    align-content: center;

    text-align: center;

    margin: 10px auto 20px;

    vertical-align: middle;

}



.img50 {

    width: 50%;

}



.img50c {

    width: 50%;

    align-content: center;

}



.img50c2 {

    width: 50%;

    align-content: center;

    margin-left: 50%;

    margin-right: -50%;

}



.img40 {

    width: 40%;

}



.img40c {

    width: 40%;

    align-content: center;

}



.img30 {

    width: 30%;

}



.img30c {

    width: 30%;

    align-content: center;

}



.img25 {

    width: 25%;

}



.img25c {

    width: 25%;

    align-content: center;

}



.img100p {

    width: 100px;

}



.img200p {

    width: 200px;

}



.img300p {

    width: 300px;

}



.img400p {

    width: 400px;

}



.img500p {

    width: 500px;

}



.imgSlider {

    width: 100%;

}



/* TITLE */

h1,

h2,

h3 {

    margin: 10px;

}



h1 {

    font-weight: bold;

    text-transform: uppercase;

    font-size: 2.3em;

}



h2 {

    font-size: 2em;

    /* background-color: red; */

}



h3 {

    font-size: 1.2em;

}



/* LISTES ******/

li {

    list-style: none;

    text-align: left;

    list-style-position: inside;

}



.colonnesPuces .puce::before {

    content: "✅ ";

}



.colonnesPuces {

    list-style-type: none;

    font-size: 20px;

    line-height: 2em;

}



.listeInd .puce ::before {

    content: "✅";

    list-style: none;

}

/* LIENS */

a {

    text-decoration: none;

    font-weight: bold;

}



    a:link {

        color: dodgerblue;

        font-weight: bold;

    }



    a:visited {

        color: dodgerblue;

        font-weight: bold;

    }



    a:hover {

        color: navy;

        text-decoration: none;

        font-weight: bold;

    }



    a:active {

        color: dodgerblue;

        font-weight: bold;

    }

/* PARAGRAPHE */

p {

    padding: 10px;

}

/* BOUTON */

.boutonDownload {

    margin: auto;

    margin-top: 10px;

    margin-bottom: 10px;

    transition: 0.2s ease-in-out;

    font-weight: bold;

    color: white;

    padding: 10px;

    width: 180px;

    border-radius: 10px;

    text-align: center;

    background-color: #366eff;

    border: 3px solid transparent;

}



    .boutonDownload:hover {

        cursor: pointer;

        transition: 0.2s ease-in-out;

        color: #366eff;

        ;

        /*        background-color: transparent;*/

        background-color: white;

        border: 3px #3898d4 solid;

    }



.boutonDownload {

    color: white;

}

/* ANCRE INDEX GSM */

.imgAncre {

    transition: 0.2s;

}



    .imgAncre:hover {

        transition: 0.2s;

        transform: scale(1.1);

    }

/* CONTACT */

.centered {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}

/* TAILLE ECRAN */

@media screen and (min-width: 1400px) {

    .screen-large {

    }



    .screen-middle, .screen-small {

        visibility: hidden;

        height: 0px;

    }

}



@media screen and (max-width: 1399px) and (min-width: 701px) {

    .pbLarg {

        width: 80%;

        min-width: 400px;

        justify-content: center;

    }



    .screen-middle {

    }



    .screen-large, .screen-small {

        visibility: hidden;

        height: 0px;

    }

}



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

    .screen-small {

    }



    .screen-large, .screen-middle {

        visibility: hidden;

        height: 0px;

    }



    .floatRight {

        display: none;

    }



    .row {

        flex-direction: column;

    }



    .block1,

    .block2,

    .block3,

    .block4 {

        padding: 20px 10px 20px 10px;

        text-align: center;

        margin: 0;

    }



    img {

        max-width: 95%;

    }



    /* Empêche le débordement des images */

    #topImgResp {

        display: none;

    }

    /* Sur l'index, toutes les images se situant à gauche disparaissent en responsive pour faciliter la lisibilité */

    .topCard > p {

        font-size: 0.75em;

    }

    /* Réduction de la police d'écriture des cartes */

    .block3 > h1,

    .block3 > h2 {

        text-align: center;

    }



    .imgSupport,

    .block3 > .logoGSM,

    .inputPay {

        display: flex;

        justify-content: center;

    }



    .colonnesPuces {

        padding: 0;

    }

}

/* Fin ecran etroit */





.footer-div {

    background-color: #333;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}



.footer-text {

    color: white;

    font-size: 16px;

}



.icon-container {

    margin-top: 20px;

}



.footer-icon {

    margin: 0 40px;

}



.footer-icon > img {

        height: 3.5em;

}