#red_home_about_red{ position: relative; }
.labelr{ display: inline-block; padding: 0 6px; background-image: linear-gradient(259deg, #08bf7e 9%, #00e094 91%); color: #fff; font: normal 12px/24px "Montserrat-Bold"; text-transform: uppercase; }
#tarif-communication{ display: flex; align-items: center; max-width: 1280px; height: 514px; margin: 0 auto; padding: 0 20px 0; background: url('/html/assets/red_home_tarifs_communication_bg.png') no-repeat center/cover, linear-gradient(to right, #08bf7e 0%, #00e094 100%); color: #fff; }
#tarif-communication .bloc:nth-child(1){ display: flex; flex-direction: column; align-items: center; flex: 0 1 435px; }
    #tarif-communication .bloc:nth-child(1) h2,
    #tarif-communication .bloc:nth-child(1) p{ width: 316px; }
    #tarif-communication .bloc:nth-child(1) h2{ color: #fff; }
#tarif-communication .bloc:nth-child(2){ flex: 0 1 415px; margin: 0 20px 0 0; }
    #tarif-communication .bloc:nth-child(2) a{ display: flex; align-items: center; min-width: 260px; height: 120px; padding: 0 15px 0 10px; background: #fff; box-shadow: 1px 1px 5px 0 #00000014; border-radius: 2px; }
    #tarif-communication .bloc:nth-child(2) a:hover{ background: #f1f1f1; text-decoration: none; }
    #tarif-communication .bloc:nth-child(2) a:first-child{ margin-bottom: 10px; }
        #tarif-communication .bloc:nth-child(2) a .wrapper{ display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; flex: 1 1 auto; height: 100%; }
            #tarif-communication .bloc:nth-child(2) a i{ flex: 1 0 100%; width: 45px; height: 45px; background-repeat: no-repeat; background-position: center; }
            #tarif-communication .bloc:nth-child(2) a:nth-child(1) i{ background-image: url('/html/assets/ICON-box-internet.svg'); }
            #tarif-communication .bloc:nth-child(2) a:nth-child(2) i{ background-image: url('/html/assets/ICON-smartphone.svg'); }
                #tarif-communication .bloc:nth-child(2) a .title{ width: calc(100% - 85px); font: normal 14px/24px "Montserrat-Bold"; }
                #tarif-communication .bloc:nth-child(2) a .content{ max-width: 305px; width: calc(100% - 85px);  font-size: 14px; }
                #tarif-communication .bloc:nth-child(2) a svg{ flex: 0 0 15px; height: 15px; }
                #tarif-communication .bloc:nth-child(2) a svg path{ fill: #404040; }

#tarif-communication .bloc:nth-child(3){ display: flex; align-items: flex-end; height: 100%; }
    #tarif-communication .bloc:nth-child(3) img{ min-width: 300px; max-width: 100%; vertical-align: bottom; }

@media all and (min-width: 768px) and (max-width: 1024px) {
    #tarif-communication .bloc:nth-child(3){ display: none; }
}
@media all and (max-width: 767px){
    #tarif-communication{ flex-direction: column; height: auto; padding: 30px 10px 0; }
        #tarif-communication .bloc:nth-child(n){ align-items: flex-start; flex: 0 0 auto; margin: 0; }
            #tarif-communication .bloc:nth-child(1) > h2,
            #tarif-communication .bloc:nth-child(1) > p{ width: auto; }
        #tarif-communication .bloc:nth-child(2){ width: 100%; max-width: 380px; }
            #tarif-communication .bloc:nth-child(2) a .wrapper{ position: relative; height: auto; }
                #tarif-communication .bloc:nth-child(2) a i{ position: absolute; top: 0; left: 0; width: 25px; height: 25px; }
                #tarif-communication .bloc:nth-child(2) a .title{ width: calc(100% - 40px); margin: 0 0 10px 30px; }
                #tarif-communication .bloc:nth-child(2) a .content{ width: 100%; }
        #tarif-communication .bloc:nth-child(3){ flex: 0 1 205px; overflow: hidden; align-items: flex-start; padding-top: 30px; }
            #tarif-communication .bloc h2{ font-size: 22px; }
            #tarif-communication .bloc p{ margin-bottom: 30px; font-size: 14px; }
}

#SFR-network{ display: flex; flex-direction: column; align-items: center; padding: 50px 10px 90px; background-image: linear-gradient(to bottom, rgb(242, 242, 242) 74%, rgb(255, 255, 255)); }
#SFR-network .intro{ margin: 0 0 40px 0; }
#SFR-network .title, #SFR-network .intro{ max-width: 1160px; width: 100%; }
#SFR-network .wrapper{ align-self: center; display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1080px; }
#SFR-network .wrapper::after{content: ""; flex: 0 1 calc(33.33% - 10px); width: calc(33.33% - 10px); max-width: 340px; margin: 0 0 20px 0; }
    #SFR-network .bloc{ flex: 0 1 calc(33.33% - 10px); width: calc(33.33% - 10px); max-width: 340px; background: #fff; margin: 0 0 20px 0; }
    #SFR-network .bloc:hover{ box-shadow: 1px 1px 5px 0 #00000014; text-decoration: none; }
        #SFR-network .bloc:hover h3{ color: #00E094; }
        #SFR-network .bloc img{ width: 100%; }
        #SFR-network .text{ position: relative; padding: 30px 20px 20px;  }
        #SFR-network .text .labelr{ position: absolute; top: -15px; left: 20px; }
        #SFR-network .text p{ font-size: 14px; line-height: 22px; }

@media all and (max-width: 767px){
    #SFR-network{ display: block; margin: 0 auto; padding: 30px 0 20px 0; overflow: visible; }
    #SFR-network .title{ margin: 0 0 10px 0; }
    #SFR-network .intro{ margin: 0 0 20px 0; }
    #SFR-network .title, #SFR-network .intro{ padding-left: 10px; }
        #lia-body .lia-content #SFR-network .title h2{ margin-bottom: 0; font-size: 22px; line-height: 32px; }
    #SFR-network .wrapper{ flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; margin: 0; padding: 0 10px; overflow: auto; scroll-snap-type: x mandatory; }
    #SFR-network .wrapper::after{ content: ""; flex: 0 0 1px; height: 100px; }
        #SFR-network .bloc{ flex: 0 0 82%; width: 82%; margin: 0 10px 20px 0; scroll-snap-align: center; }
        #SFR-network .bloc img { height: 120px; object-fit: cover; }
        #SFR-network .text .labelr{ top: -12px; line-height: 16px; }
}

#guide-red{ padding: 50px 10px; background-color: #f2f2f2; }
#guide-red .wrapper{ max-width: 1285px; margin: 0 auto; }
#guide-red .intro{ max-width: 415px; margin-bottom: 30px; font-size: 16px; line-height: normal; }
#guide-red .w{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#guide-red .article{ position: relative; display: flex; flex: 0 1 calc(33.33% - 10px); max-width: 415px; width: calc(33.33% - 10px); min-height: 170px; margin: 0 0 20px 0; background-color: #fff; }
#guide-red .article:hover{ text-decoration: none; }
#guide-red .article .labelr{ position: absolute; top: 10px; left: 95px; }
#guide-red .article img{ flex: 0 0 115px; width: 115px; object-fit: cover; }
#guide-red .article .text{ padding: 40px 15px 15px; font-size: 14px; line-height: 17px; }

@media all and (max-width: 1024px){
    #guide-red{ padding: 40px 0 20px; }
    #guide-red h2{ padding-left: 10px!important; }
    #guide-red .intro{ margin-bottom: 20px; padding-left: 10px; font-size: 14px; }
    #guide-red .w{ flex-wrap: nowrap; overflow: auto; margin-bottom: 20px; padding: 0 0 0 10px; scroll-snap-type: x mandatory; }
    #guide-red .article{ flex: 0 0 90%; width: 90%; min-height: 0; height: 170px; margin: 0 20px 0 0; scroll-snap-align: center; }
    #guide-red .article img{ flex: 0 0 70px; width: 70px; }
    #guide-red .article h3{ margin-bottom: 5px; font-size: 18px; line-height: 19px; }
    #guide-red .article .labelr{ position: static; margin-bottom: 10px; }
    #guide-red .article .text{ padding: 10px; }
}

#what-is-red{ height: 575px; margin: 0 auto; background: #fff; }
#what-is-red > .wrapper{ display: flex; max-width: 1440px; margin: 0 auto; }
    #what-is-red > .wrapper picture{ display: flex; flex: 0 1 auto; align-items: center; }
        #what-is-red > .wrapper picture img{ max-width: 100%; }
    #what-is-red > .wrapper .content{ display: flex; flex-direction: column; align-items: center; flex: 1 0 auto; }
        #what-is-red > .wrapper h2{ align-self: flex-start; width: calc(100% + 110px); margin: 50px 0 25px; padding: 0 0 0 32px; line-height: 90px; background: #fff; transform: translateX(-110px); }
        #what-is-red > .wrapper .text{ margin: 0 10px; font-size: 14px; }
        #what-is-red > .wrapper .text p{ max-width: 345px; margin: 0 auto 30px; }

@media all and (max-width: 1024px){
    #what-is-red{ height: 465px; }
}

@media all and (max-width: 767px){
    #what-is-red{ height: auto; }
    #what-is-red > .wrapper{ flex-direction: column-reverse; }
        #what-is-red > .wrapper h2{ width: auto; margin: 30px 10px 10px; padding: 0; font-size: 22px!important; line-height: 57px; transform: translateX(0); }
        #what-is-red > .wrapper .text{ padding: 0 0 20px; }
            #what-is-red > .wrapper .text p{ margin: 0 0 20px; }
}

#choose-red{ overflow: hidden; padding: 0 10px; background-image: linear-gradient(to right, #fff 0%,#fff 50%,#f2f2f2 50%,#f2f2f2 100%); }
#choose-red a:hover{text-decoration:none; color: #00e094; }
#choose-red > .wrapper{ display: flex; max-width: 1280px; margin: 0 auto; }
#choose-red > .wrapper .left{ display: flex; justify-content: center; flex: 0 1 414px; max-width:414px; width: 100%; height: 100%; padding: 0 0 20px 0; background: #fff; }
    #choose-red > .wrapper .left .content{ display: flex; flex-direction: column; max-width: 290px; }
        #choose-red > .wrapper .left .content h2{ line-height: 57px; color: #404040; }
        #choose-red > .wrapper .left .content p{ font-size: 14px; margin-bottom: 30px; }
#choose-red > .wrapper .right{ position: relative; display: flex; justify-content: space-between; align-items: center; flex: 1 1 845px; background-image: linear-gradient(to right, #fff 0%,#fff 102px,#f2f2f2 102px,#f2f2f2 100%); }
    #choose-red > .wrapper .right .bloc{ display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 1 204px; height: 235px; margin: 0 15px 0 0; padding: 0 10px; background: #fff; box-shadow: 0 0 10px 0 #00000019; border-radius: 1px; }
    #choose-red > .wrapper .right .bloc:last-child{ margin: 0; }
    #lia-body .lia-content #choose-red > .wrapper .right .bloc h3{ text-align: center; font-size: 16px; }
    #choose-red > .wrapper .right .bloc p{ max-width: 225px; height: 70px; text-align: center; font-size: 13px; }

    #choose-red > .wrapper .right .bloc i{ width: 55px; height: 55px; margin-bottom: 30px; background-repeat: no-repeat; background-position: center; }
    #choose-red > .wrapper .right .bloc:nth-child(1) i{ background-image: url("/html/assets/ICON-prix.svg"); }
    #choose-red > .wrapper .right .bloc:nth-child(2) i{ background-image: url("/html/assets/ICON-free.svg"); }
    #choose-red > .wrapper .right .bloc:nth-child(3) i{ background-image: url("/html/assets/ICON-app.svg"); }
    #choose-red > .wrapper .right .bloc:nth-child(4) i{ background-image: url("/html/assets/ICON-teamred.svg"); }

    @media all and (min-width: 768px) and (max-width: 1024px) {
        #choose-red{ padding: 0 10px; background-image: linear-gradient(to right, #ffffff 0%, #ffffff 60%, transparent 60%, transparent 100%); }
        #choose-red > .wrapper .left{ align-self: center; flex: 1 1 50%; max-width: none; }
        #choose-red > .wrapper .right{ flex: 1 1 50%; flex-wrap: wrap; padding: 10px 0 }
        #choose-red > .wrapper .right::before{ display: none; }
        #choose-red > .wrapper .right .bloc{ flex-wrap: wrap; justify-content: center; flex: 0 1 415px; height: 120px; margin: 10px 0; }
        #choose-red > .wrapper .right .bloc:last-child{ margin: 10px 0; }
            #choose-red > .wrapper .right .bloc i{ flex: 0 0 100%; margin: 0; background-size: 45px 45px; }
            #lia-body .lia-content  #choose-red > .wrapper .right .bloc h3{ width: calc(100% - 100px); text-align: left; }
            #choose-red > .wrapper .right .bloc p{ flex: 0 1 45px; max-width: 100%; width: calc(100% - 100px); text-align: left; }
    }

    @media all and (max-width: 767px){
        #choose-red{ background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 70%, #f2f2f2 70%, #f2f2f2 100%);  }
        #choose-red .wrapper{ display: block; height: auto; padding-bottom: 20px; }
            #choose-red > .wrapper .left{ max-width: none; padding: 0 10px; background: transparent; }
                #choose-red > .wrapper .left .content{ max-width: none; width: 100%; padding: 30px 0 0 0; }
                    #choose-red > .wrapper .left .content .text{ max-width: 345px; margin: 0 auto 20px; }
                    #choose-red > .wrapper .left .content p{ margin-bottom: 20px; }
            #choose-red > .wrapper .right{ padding: 10px 10px 20px 10px; background: transparent; overflow: auto; scroll-snap-type: x mandatory; }
                #choose-red > .wrapper .right::before{ display: none; }
                #choose-red > .wrapper .right .bloc{ flex: 0 0 60%; max-width: 60%; scroll-snap-align: center; }
                #choose-red > .wrapper .right::after{ content: ""; flex: 0 0 10px; height: 10px; }
    }