/* CSS COMMUN */

/* ATTENTION, tips : */
/* Utiliser l'extension CSS-Percent pour VSCode */
/* transforme les valeurs px en vw et vh */

p.textNormal {
    font-family: 'Open Sans Condensed Light', sans-serif;
    font-size: 4vw;
    color: #464646;
}

h2.big-title {
    position: relative;
    font-size: 8vw;
    top: 9%;
}

h2.sub-title {
    font-size: 5.8vw;
    line-height: 5vw;
}

h4.subTitle {
    color: #BCBCBC;
    font-size: 5vw;
}

h3.subTitle {
    color: #7A7A7A;
    margin: 8% 0% 3% 0%;
    font-size: 5.5vw;
}

section {
    overflow: hidden;
}

.mobileOnly {
    display: block;
}

.desktopOnly {
    display: none;
}

.illustration img {
    max-height: 100%;
    max-width: 100%;
}

.illustration {
    max-height: 120%;
    max-width: 120%;
    text-align: center;
}

.row.rowContent {
    vertical-align: middle;
    margin: 0% -5% 0% 0%;
    padding-right: 5%;
}

@media only screen and (min-width : 768px) {
    .mobileOnly {
        display: none;
    }

    .desktopOnly {
        display: block;
    }
}


/* SECTION NOS OFFRES */

#sectionIntro {
    margin-top: 5%;
    margin-bottom: 20%;
}

#sectionIntro .row {
    margin: 1% 0 1% 0;
    place-content: center;
    text-align: center;
    display: block;
}

#sectionIntro .phraseAccroche {
    text-decoration: line-through;
    color: #FFBECD;
    font-size: 7vw;
    margin: 3% 0 3% 0;
    text-align: center;
}

#sectionIntro .faux {
    color: #68EABA;
    font-size: 7vw;
    text-align: center;
}

#sectionIntro .expressionUX {
    font-family: "Open Sans Condensed Light", sans-serif;
    color: #818181;
    text-align: center;
    /* font-size: 3.5vw; */
}


/* SECTION PRINCIPAUX AVANTAGES */

#sectionPrincipauxAvantages {
    background-image: url(../Images/mobileOfferHomeBG.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: auto;
    position: relative;
    color: #FFFFFF;
    margin: -25% 0% -5% 0%;
    padding: 25% 5% 35% 5%;
    background-position: center;
    background-size: cover;
}

#sectionPrincipauxAvantages p {
    color: #FFFFFF;
}

#sectionPrincipauxAvantages .sectionTitle.row {
    margin: 0;
}

#sectionPrincipauxAvantages .big-title#experienceUtilisateur {
    opacity: 0.42;
    color: #FFFFFF;
}

#sectionPrincipauxAvantages .sub-title#avantages {
    color: #FFFFFF;
}

#sectionPrincipauxAvantages .baretteJaune {
    width: 30vw;
    height: 1.7593vh;
    background-color: #FFE270;
    margin: 3% 0% 5% 0%;
}

#sectionPrincipauxAvantages h3.subTitle {
    color: #FFFFFF;
}

#sectionPrincipauxAvantages .sub-titleUtilisateurLoyal {
    color: #FFFFFF;
    font-size: 6vw;
}


/* SECTION NOTRE METHODOLOGIE */

#sectionNotreMethodologie {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    position: relative;
    color: #FFFFFF;
}

#sectionNotreMethodologie #firstRow.row {
    margin-top: -3%;
}

#sectionNotreMethodologie #lastRow.row {
    margin-bottom: 10%;
}

#sectionNotreMethodologie .sectionTitle.row {
    padding: 0% 10% 0% 10%;
    margin: 0% -5%;
}

#sectionNotreMethodologie .sectionTitle.col {
    padding: 0;
}

#sectionNotreMethodologie .leftCol.desktopOnly {
    padding: 0% 0% 0% 5%;
}

#sectionNotreMethodologie .rightCol.desktopOnly {
    padding: 0% 5% 0% 0%;
}

#sectionNotreMethodologie .illustration {
    max-height: 105%;
    max-width: 105%;
}

#sectionNotreMethodologie .row.centeredContent {
    height: inherit;
    text-align: inherit;
}

#sectionNotreMethodologie .row .col.centeredContent {
    margin: auto 0% auto 0%;
    text-align: inherit;
    padding-top: 10%;
}

#sectionNotreMethodologie .big-title#experienceUtilisateur {
    opacity: 0.14;
    color: #818181;
}

#sectionNotreMethodologie .sub-title#notreMethodologie {
    color: #FFBECD;
}

#sectionNotreMethodologie .subTitle {
    text-align: inherit;
}

#sectionNotreMethodologie h4.subTitle {
    color: #BCBCBC;
}

#sectionNotreMethodologie h3.subTitle {
    color: #7A7A7A;
}

#sectionNotreMethodologie .imgNumeroVert {
    background-color: rgba(255,255,255,0.6);
    background-repeat: no-repeat;
    background-size: 30vw;
    background-position: right 95%;
}

#sectionNotreMethodologie .imgNumeroVert.no1 {
    background-image: url(../Images/Page%20UX/1Vert.svg);
}

#sectionNotreMethodologie .imgNumeroVert.no2 {
    background-image: url(../Images/Page%20UX/2Vert.svg);
}

#sectionNotreMethodologie .imgNumeroVert.no3 {
    background-image: url(../Images/Page%20UX/3Vert.svg);
}

#sectionNotreMethodologie .imgNumeroVert.no4 {
    background-image: url(../Images/Page%20UX/4Vert.svg);
}


/* DITES-NOUS TOUT */

#sectionDitesNousTout {
/*    color: #FFFFFF;*/
    background: url("/assets/Images/Nous Rejoindre/footerRejoindre.svg");
    background-repeat: no-repeat;
    background-size: cover;
/*    text-align: center;*/
    padding: 6% 0% 6% 0%;
}

#formDitesNousTout {
    padding: 40px;
    max-width: 600px;
}

#sectionDitesNousTout h3 {
    margin-bottom: 3%;
}

#btnEnvoyer {
    background-color: #FFDB52;
    border-radius: 45px;
    color: #FFFFFF;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    display: inline;
    padding: 10px 20px;
    margin: 1em 0 1em 0;
    float: right;
    border: 1px solid #FFDB52;
}

    #btnEnvoyer:hover {
        color: #FFDB52;
        background-color: #FFFFFF;
        text-decoration: none;
    }

@media only screen and (min-width : 768px) {
    p.textNormal {
        font-size: calc(10px + .5vw)
    }

    h2.big-title {
        font-size: calc(24px + 3vw);
        top: 10%;
    }

    h2.sub-title {
        font-size: calc(18px + 2vw);
    }

    h4.subTitle {
        font-size: 1.5802vw;
    }

    h3.subTitle {
        font-size: calc(14px + .5vw);
    }

    #sectionIntro .phraseAccroche {
        font-size: 2.7604vw;
    }

    #sectionIntro .faux {
        font-size: 2.3438vw;
    }

    /* #sectionIntro .expressionUX {
        font-size: 1.0417vw;
    } */

    #sectionPrincipauxAvantages {
        background-image: url(../Images/test.svg);
        margin: -40% 0% -20% 0%;
        padding: 57% 8% 55% 8%;
    }

    #sectionPrincipauxAvantages .row.rowContent {
        height: 42.037vh;
    }

    #sectionPrincipauxAvantages #imageLoyale img {
        text-align: right;
        float: right;
        height: 25vh;
    }

    #sectionPrincipauxAvantages .baretteJaune {
        width: 9.7917vw;
    }

    #sectionPrincipauxAvantages .sectionTitle.col {
        padding: 0;
    }

    #sectionPrincipauxAvantages .leftCol {
        padding: 0% 5% 0% 0%;
    }

    #sectionPrincipauxAvantages .rightCol {
        padding: 0% 5% 0% 5%;
    }

    #sectionPrincipauxAvantages .sub-titleReduction {
        font-size: 1.5885vw;
    }

    #sectionPrincipauxAvantages .sub-titleUtilisateurLoyal {
        font-size: 1.5885vw;
    }

    #sectionPrincipauxAvantages #imageMain {
        overflow: visible;
        text-align: right;
    }

    #sectionPrincipauxAvantages #imageMain img {
        max-height: 150%;
        max-width: 150%;
        margin: -17% -39% 0% 0%;
    }

    #sectionPrincipauxAvantages #imageLoyale img {
        text-align: right;
        margin-top: 6%;
    }

    #sectionNotreMethodologie .leftCol {
        background-position: center left 5%;
        text-align: left;
        margin: auto 0% auto 0%;
        padding: 0% 0% 0% 10%;
    }

    #sectionNotreMethodologie .rightCol {
        background-position: center right 5%;
        text-align: right;
        margin: auto 0% auto 0%;
        padding: 0% 10% 0% 0%;
    }

    #sectionNotreMethodologie .sectionTitle.row {
        margin: 0% -5% 0% 0%;
    }

    #sectionNotreMethodologie .imgNumeroVert {
        background-color: rgba(255,255,255,0.6);
        background-repeat: no-repeat;
        background-size: 11.4583vw;
    }

    #sectionNotreMethodologie .imgNumeroVert.left {
        background-position: left -7.8125vw center;
    }

    #sectionNotreMethodologie .imgNumeroVert.right {
        background-position: right -7.8125vw center;
    }

    #sectionNotreMethodologie .imgNumeroVert {
        height: 50vh;
    }
}

@media only screen and (min-width : 1500px) {
    #sectionPrincipauxAvantages #imageLoyale img {
        text-align: right;
        margin-top: 12%;
    }

    #sectionPrincipauxAvantages #imageLoyale img {
        text-align: right;
        float: right;
        height: 50vh;
    }

    #sectionPrincipauxAvantages {
        background-image: url(../Images/test.svg);
        margin: -40% 0% -20% 0%;
        padding: 35% 8% 55% 8%;
    }
}