/* SIM */
/* Reset des margins de la page */
* {
    margin: 0;
}

/*****
@font-face {
    font-family: "Nunito";
    src: url("../fonts/NunitoSans-ExtraLight.ttf");
}

@font-face {
    font-family: "Nunito";
    font-style: italic;
    src: url("../fonts/NunitoSans-Italic.ttf");
}

@font-face {
    font-family: "Nunito";
    font-weight: bold;
    src: url("../fonts/NunitoSans-Bold.ttf");
}
******/



@font-face {
     font-family: "Solti";
    src: url("../fonts/Raleway-Light.ttf");
}

@font-face {
    font-family: "Solti";
     font-style: italic;
     src: url("../fonts/Raleway-Italic.ttf");
}

@font-face {
    font-family: "Solti";
    font-weight: bold;
    src: url("../fonts/Raleway-Bold.ttf");
}





body {
    /*  font-family: "Nunito","Arial","Calibri Light";*/
    font-family: "Solti","Arial","Calibri Light";
    font-size: 1.2em;
    line-height: 1.5;
}

:root {
    --myblue: rgb(230, 230, 250);
    --mygreen: rgb(240 250 240);
}
.blue {   background-color: var(--mygreen);}
.green {  background-color: var(--myblue);}

/* BLOCKS */
.block1,
.block2,
.block3 {   color: black;  padding: 20px 20px 20px 20px; }
.block1 {    background-color: var(--mygreen);   }
.block2 {   background-color: var(--myblue);     }
.row {  align-items: center; display: flex;  flex-wrap: wrap; }

/* TITLE */
h1,
h2,
h3 {  margin: 10px;}
h1 {  font-weight: bold;  font-size: 2.3em;}
h2 {  font-size: 1.8em;}
h3 {  font-size: 1.2em;}

/* DIV */
.justify{
    text-align: justify; 
    text-justify: inter-word;
}
.div5   {  flex: 5%;}
.div10 {   flex: 10%;}
.div10blue {    flex: 10%;    background-color: var(--myblue);}
.div10green {    flex: 10%;    background-color: var(--mygreen);}
.div15  {  flex: 15%;}
.div15c {  flex: 15%;  text-align: center;  }
.div15blue {    flex: 15%;    background-color: var(--myblue);}
.div15green {    flex: 15%;    background-color: var(--mygreen);}
.div20  {  flex: 20%;   text-align: center; }
.div20c {  flex: 20%;   text-align: center; }
.div20blue {    flex: 20%;    background-color: var(--myblue);}
.div20green {    flex: 20%;    background-color: var(--mygreen);}
.div25  {  flex: 25%;} 
.div25c {  flex: 25%;   text-align: center;}
.div30  {  flex: 30%;}
.div30c {  flex: 30%;  text-align: center; }
.div30blue {    flex: 30%;    background-color: var(--myblue);}
.div30green {    flex: 30%;    background-color: var(--mygreen);}
.div35      {    flex: 35%;}
.div35c     {    flex: 35%;    text-align: center;}
.div40      {    flex: 40%;}
.div40c     {    flex: 40%;    text-align: center; }
.div40blue {    flex: 40%;    background-color: var(--myblue);}
.div40green {    flex: 40%;    background-color: var(--mygreen);}
.div50      {    flex: 50%;}
.div50c     {    flex: 50%;    text-align: center; }
.div50blue {    flex: 50%;    background-color: var(--myblue);}
.div50green {    flex: 50%;    background-color: var(--mygreen);}
.div60      {    flex: 60%;}
.div60c     {    flex: 60%;    text-align: center; }
.div60blue {    flex: 60%;    background-color: var(--myblue);}
.div60green {    flex: 60%;    background-color: var(--mygreen);}
.div70      {    flex: 70%;}
.div70c     {    flex: 70%;    text-align: center; }
.div70blue {    flex: 70%;    background-color: var(--myblue);}
.div70green {    flex: 70%;    background-color: var(--mygreen);}
.div80      {    flex: 80%;}
.div80c     {    flex: 80%;    text-align: center; }
.div80blue {    flex: 80%;    background-color: var(--myblue);}
.div80green {    flex: 80%;    background-color: var(--mygreen);}
.div90      {    flex: 90%;}
.div90c     {    flex: 90%;    text-align: center; }
.div90blue {    flex: 90%;    background-color: var(--myblue);}
.div90green {    flex: 90%;    background-color: var(--mygreen);}
.div100     {    flex: 100%;}
.div100c    {   flex: 100%;    text-align: center;    }
.div100blue {    flex: 100%;    background-color: var(--myblue);}
.div100green {    flex: 100%;    background-color: var(--mygreen);}

.img100 {  width: 100%;}
.img90  {  width: 90%;}
.img80  {  width: 80%;}
.img75  {  width: 75%;}
.img70  {  width: 70%;}
.img60  {  width: 60%;}
.img50  {  width: 50%; }
.img40  {  width: 40%;}
.img30 {   width: 30%;}
.img25 {   width: 25%;}
.img20 {   width: 20%;}

.img100p  {    width: 100px;}
.img200p  {    width: 200px;}
.img300p  {    width: 300px;}
.img400p  {    width: 400px;}
.img500p  {    width: 500px;}
.imgSlider {    width: 100%;}

/* LISTES ******/
li {
    list-style: none;
    text-align: left;
    list-style-position: inside;
}
.colonnesPuces .puce::before {

    content: '■ ';
    /* color: blue;  */
    color:royalblue; 
}
.colonnesPuces {
    list-style-type: none;
}
.listeInd .puce ::before {
    content: '■ ';
    /* color: blue;  */
    color: royalblue;
    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: white;
        border: 3px #3898d4 solid;
    }
.boutonDownload {
    color: white;
}

/* ANCRES */
.imgAncre {
    transition: 0.2s;
}
    
.imgAncre:hover {
        transition: 0.2s;
        transform: scale(1.1);
}

/* CONTACT */
.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* FOOTER */
.footer {
    text-align: center;
    margin: auto;
    background-color: rgb(31, 28, 28);
}

/* ECRAN LARGE*/
@media screen and (min-width: 1400px) {
    .screen-large {
    }
    .screen-middle, .screen-small {
        visibility: hidden;
        height: 0px;
        display: none;
    }
    .block1, .block2, .block3 {  margin: 40px;   }

    }

/* ECRAN MOYEN */
@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;
        display: none;
    }
     .block1, .block2, .block3 {    margin: 20px;   }  
}

/* ECRAN ETROIT */
@media screen and (max-width: 700px) {
    .screen-small {
    }
    .screen-large, .screen-middle {
        visibility: hidden;
        height: 0px;
        display: none;
    }
    .floatRight {
        display: none;
    }
    .row {
        flex-direction: column;
    }
    .block1,
    .block2,
    .block3 {
        padding: 20px 10px 20px 10px;
        text-align: center;
        margin: 0;
    }
    img {
        max-width: 95%;
    }
    /* Empêche le débordement des images */
    #topImgResp {
        display: none;
    }

    /* Réduction de la police d'écriture des cartes */
    /* On sais si ca marche ? */
    .block3 > h1,
    .block3 > h2 {
        text-align: center;
    }
    .imgSupport,
    .block3 > .logoGSM,
    .inputPay {
        display: flex;
        justify-content: center;
    }
    .colonnesPuces {
        padding: 0;
    }
}
/* Fin ecran etroit */