﻿#smartphone {
    margin-bottom: 30px;
}

#smartphone .smartphone-titres {
    margin-bottom: 35px;
}


#smartphone .smartphone-gratuite {
    margin-top: 30px;
}

#smartphone .smartphone-download {
    display: flex;
    justify-content: start;
    gap: 40px;
    padding-inline: 55px;
    margin-top: 40px;
}
#smartphone .smartphone-visuel img {
    text-align: center;
    width: 200px;
}

    #smartphone .smartphone-download .smartphone-btn-download:hover {
        opacity:0.8;
    }

    #smartphone .smartphone-download img {
        max-width: 200px;
    }

#smartphone .smartphone-container2 {
    margin-top:5em;
    margin-bottom:3em;
}

.container-fonction {
    position: relative;
    display: flex;
    justify-content: start;
}

.container-fonction li {
    list-style: none;
}

.image-solution {
    display: flex;
    justify-content: center;
}

.container-fonction img {
    width: 210px;
}

.solution-pointsforts {
    margin-bottom: 10px;
}

.ficheProduit-coin {
    position: absolute; /* Position absolue par rapport à son parent le plus proche positionné (ici .solution-pointsforts) */
    top: 0; /* En haut du conteneur */
    left: 0; /* À gauche du conteneur */
    width: 100px; /* Largeur de l'image, ajustez selon vos besoins */
    height: auto; /* Hauteur automatique pour conserver les proportions */
}

.container-fonction .solution-fonctionnalite h2 {
    font-size: 25px;
    color: #4d464a;
}

.container-fonction .solution-fonctionnalite, .container-fonction .solution-fonctionnalite li {
    font-size: 17px;
    color: #4d464a;
}

.option-style:before {
    content: '•';
    color: #4d464a;
    float: left;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.f1-style:before {
    content: '°';
    color: #4d464a;
    float: left;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.f2-style:before {
    content: '■';
    color: #4d464a;
    float: left;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.f3-style:before {
    content: '- ';
    color: #4d464a;
    float: left;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.f4-style:before {
    content: '';
    float: left;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.mySlides, .mySlidesLibelle {
    display: none;
}

#smartphone .w3-content {
    width: 300px;
    height: unset;
    position: unset;
    margin-top: unset;
    margin-left: unset;
    margin-right: unset;
    left: unset;
    right: unset;
    text-align: unset

}

#smartphone .w3-center {
    position: unset;
    overflow: hidden;
    margin-left: unset;
    margin-right: unset;
    left: unset;
    right: unset;
    text-align: unset;
    margin-top:-300px
}




@media(max-width:1077px) {

    #smartphone .w3-center {
        position: unset;
        margin-top: unset !important;
    }

    #smartphone .container-slider {
        margin-bottom: unset;
    }

    #smartphone .w3-center .w3-section {
        letter-spacing: 400px !important;
        margin-top: 0 !important;
    }

    #smartphone .w3-selection {
        padding-top: unset !important;
        margin-top: -64px !important;
    }

    #smartphone .w3-libelle {
        margin-top: 20px !important;
    }
}

@media(max-width:600px) {
    #smartphone .w3-center .w3-section {
        letter-spacing: 300px !important;
    }

    #smartphone .w3-selection {
        margin-top: -14px !important;
    }

}

@media(max-width:480px) {
    #smartphone .w3-center .w3-section {
        letter-spacing: 100px !important;
        margin-top:15px!important;
    }
}

    #smartphone .w3-selection {
        padding-top: 13em;
        margin-top: unset;
    }

    #smartphone .slider-mobile-face {
        margin-top: unset;
        text-align: unset;
        margin-bottom: unset;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

@media(min-width:1400px) and (max-width:1500px) {
    #smartphone .w3-center .w3-section {
        letter-spacing: 281px !important;
    }
}

@media(min-width:1501px) and (max-width:1637px) {
    #smartphone .w3-center .w3-section {
        letter-spacing: 300px !important;
    }
}