html.showSidebar{overflow:hidden;}
    html>body{background:#EBFDF6;overflow-x:initial;font:550 14px 'Montserrat';}
    button{cursor:pointer;color: inherit;}
    .wrapper{max-width:1310px;padding:0 15px;margin:0 auto}
    .r-flex{display:flex}
    .align-center{align-items:center;}
    .w100{width: 100%;}
    .fs16{font-size:16px}
    .hide{display:none}
    .capitalize{text-transform:capitalize}
    .blur:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;transform: translateZ(0);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(255,255,255,0.8)}
    
    @keyframes growDown {0%{transform:scaleY(0)}80%{transform:scaleY(1.1)}100%{transform:scaleY(1)}}
    @keyframes spin {0%{transform:translateY(-50%) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg)}}
    
    
    
    
    #breadcrumb{margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1280px);justify-content:center;padding:0 16px}
    #breadcrumb ul{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;font:700 14px Montserrat;overflow:hidden}
    #breadcrumb a{font-weight:600;text-decoration:underline;vertical-align:1px}
    #breadcrumb li:not(:last-child):after{content:'';display:inline-block;width:16px;height:16px;margin:0 8px;background:url(//static.s-sfr.fr/media/RED/icones/chevron_right.svg) no-repeat center;transform:translateY(3px)}
    #banner{margin:40px 0 32px;display:grid;grid-template-columns:minmax(0,1280px);justify-content:center;padding:0 16px}
    #banner h1{font:600 40px Montserrat}



    
    #main aside {display:initial;}
        #main input[type=checkbox], #main input[type=radio] {width: 0;height: 0;}
        #main input[type=checkbox]:focus + span, #main input[type=radio]:focus + span{outline:1 solid blue;}
        #main .sidebarMask{visibility:hidden;transition:.5s ease;position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000;opacity:0;z-index:99991;transition: .4s ease-out;}
        #main .dropdown{position:relative;display:inline-block}
        #main .dropdown.l{min-width:200px}
        #main .dropdown-button{position:relative;padding:0 50px 0 20px;min-width:150px;width:100%;border-radius:4px;border:solid 2px #ebebeb;background:#fff;display:flex;font:550 14px/50px 'Montserrat';white-space:nowrap}
        #main [data-count]:before{content:attr(data-count);position:absolute;width:19px;font:700 12px/19px 'Montserrat';color:#fff;background:#00e094;top:-4px;left:-3px;text-align:center;border-radius:100%}
        #main .dropdown-button:after{content:"";background:url(//static.s-sfr.fr/media/arrow-bottom-green.svg) no-repeat;background-size:15px;position:absolute;right:20px;width:15px;height:10px;top:22px}
        #main .dropdown-content{display:none;flex-direction:column;position:absolute;background-color:#f2f2f2;min-width:100%;font-size:14px;padding:5px 15px 20px 20px;border-radius:0 0 4px 4px;box-shadow:0 12px 14px -14px #000;overflow: hidden;z-index:2;animation:growDown 300ms ease-in-out forwards;transform-origin:top center}
        #main .dropdown.open .dropdown-content{display:flex;max-height:800px;transition:max-height .3s ease;overflow:hidden}
        #main .dropdown-content:not(.connectivity) .opacity{opacity:.4;order:2}

        #main .dropdown-content .view-more {margin-top: 5px;line-height: 15px;display:flex;width:fit-content;color:#00e094;cursor:pointer;padding:0;text-transform:none;min-height: initial;max-height:initial;order: 3;z-index: 1;}
        #main .dropdown-content .view-more strong {position:relative;}
        #main .dropdown-content .view-more strong:after {content: ""; background: url(//static.s-sfr.fr/media/arrow-bottom-green.svg) center no-repeat; background-size: 12px; position: absolute; top: 4px; width: 15px; height: 8px; margin-left: 2px; transform: rotate(-90deg);}
        #main .dropdown-content .view-more:hover{text-shadow:none}
        #main .view-more:checked + .dropdown-content{max-height:207px}
        #main .view-more:checked + .dropdown-content .view-more{position: absolute; bottom: 0; background-color: #f2f2f2; height: 39px;width: 100%;}
        #main .view-more:checked + .dropdown-content .view-more strong:first-child{display:block}
        #main .view-more:checked + .dropdown-content .view-more strong:last-child{display:none}
        #main .dropdown label{position:relative;white-space:nowrap;align-items:center;min-height: 28px;max-height:28px;width:100%;padding:5px 0 5px 25px;cursor:pointer}
        #main .dropdown label:hover{text-shadow:0 0 #1a171b}
        #main .dropdown input[type=checkbox]:checked:after{content:'';cursor:pointer;position:absolute;top:8px;left:6px;width:7px;height:12px;border:solid #00e094;border-width:0 3px 3px 0;transform:rotate(45deg) translateY(-1px)}
        #main .dropdown input:not(.view-more):before{content:'';cursor:pointer;background-color:#fff;border:solid 1px #dcdcdc;border-radius:4px;height:19px;min-width:19px;position:absolute;left:0;top:4px}
        #main .dropdown.open .dropdown-button{border-radius:4px 4px 0 0}
        #main .dropdown.open .dropdown-button:after{transform:rotate(180deg);top:20px}
        @media (min-width: 1025px) and (max-height: 800px){#main .dropdown.open .dropdown-content {padding-bottom: 15px;} #main .dropdown-content label {min-height: 25px;max-height:25px;} #main .view-more:checked + .dropdown-content { max-height: 197px; }}
        
    #main .search{background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,0.08);border-radius:4px;border:solid 2px #ebebeb;width:100%; min-width: 200px;display:flex}
        #main .search.hasValue{border-color:#5A55DF;}
        #main .search input{width:100%;font:550 16px/50px 'Montserrat';background:url(//static.s-sfr.fr/media/red-icon-search-1.svg) no-repeat left 10px center;background-size:32px;padding:0 10px 0 50px}
        #main .search input::placeholder{font-weight:500;color:#9b9b9b}
        #main .search input::-webkit-search-cancel-button{-webkit-appearance:none;height:22px;width:22px;border-radius:100%;background:url(//static.s-sfr.fr/search-cross.svg) no-repeat 50% 50%;background-size:contain;cursor:pointer;opacity:.5}
        
    #main .filterGroup{margin-top:5px;font-size:16px;transition:height .1s ease;overflow:hidden}
        #main .filtersList{font-size:14px;position:sticky;padding:10px 0;top:0;z-index:3;box-shadow:0 5px 24px 0 rgba(0,0,0,0.1);}
        #main .filtersList:before{height: 100%;}
        #main .filtersList .filters >:not(:last-child){margin-right:10px}
        #main .filtersList .resetFilters{color:#08bf7e;text-decoration:underline;font:700 14px 'Montserrat';margin-top:15px;align-self:flex-start;white-space:nowrap;transition:.2s}
        #main .filterGroup:not(.active){display:none;}
        #main .filterGroup button{font-family:'Montserrat';font-size:16px}
        #main .filterGroup .activeFilters{width:100%;margin-right:30px;flex-wrap:wrap}
        #main .filterGroup .activeFilters label{position:relative;cursor:pointer;margin:10px 10px 0 0;padding:0 36px 0 15px;background-color:#ebebeb;border-radius:19px;line-height:38px;transition:background-color .2s}
        #main .filterGroup .activeFilters label::first-letter{text-transform:uppercase}
        #main .filterGroup .activeFilters label:hover{background-color:#DEDEDE}
        #main .filterGroup .activeFilters label::after{content:"";position:absolute;right:13px;width:13px;height:38px;background:url(//static.s-sfr.fr/media/ic-cross.svg) no-repeat center;background-size:13px}
        
        
    #main .sort{position:relative;padding:10px;z-index:4}
        #main .sort .wrapper{display:flex;justify-content:flex-end;align-items:center}
        #main .sort .dropdown{margin:0 20px 0 5px;min-width:200px}
        #main .sort .dropdown-button{border:solid 2px #ebebeb}
        #main .sort .dropdown input:before{border-radius:100%}
        #main .sort .dropdown input[type=radio]:checked:after{content:'';position:absolute;border-radius:100%;top:9px;left:5px;width:9px;height:9px;background:#00e094}
        #main .sort .resultNumber{position:relative;min-width:85px}
        #main .sort .resultNumber small{font:550 14px 'Montserrat'}
        #main .sort .resultNumber.inProgress::before{content:'';position:absolute;right:-25px;top:-6px;width:20px;height:20px;margin-top:15px;border:3px solid #dfdfdf;border-radius:50%;border-top:3px solid #00e094;animation:spin 1s linear infinite}
        #main .sort .resultNumber.error:not(.inProgress)::before { content: ''; position: absolute; right: -23px; width: 20px; height: 20px;animation:none;background: url(//static.s-sfr.fr/media/warning-red.svg) no-repeat center; background-size: 20px; }
        #main .sort .resultNumber.error:not(.inProgress)::after { content: "Le chargement a échoué. Merci de rafraîchir la page."; bottom: 0; font: 700 13px 'montserrat'; left: 50%; transform: translate(-45%,110%); background-color: #08bf7e; border-radius: 5px;color:#fff; visibility: hidden; transition: .2s; opacity: 0; padding: 10px 5px; position: absolute; text-align: center; width: 190px; }
        #main .sort .resultNumber.error:hover::after{visibility:visible;opacity:1}
      
    
    #main .listDevices ul{display:flex;flex-wrap:wrap;margin:30px -7px 50px}
        #main .listDevices li{display:flex;flex-direction:column;align-items:center;position:relative;background-color:#fff;flex:0 1 calc(25% - 14px);border-radius:4px;margin:0 7px 14px;padding:35px 15px}
        #main .listDevices li[hide],#main .listDevices li[hidden],#main .listDevices li[lazy]:not(:nth-child(-n + 8)){display:none}
        #main .listDevices .noResults{max-width:900px;margin:0 auto;background:#fff}
        #main .listDevices .noResults .r-flex{padding:40px 100px;align-items:center}
        #main .listDevices .noResults .r-flex strong{font-size:20px}
        #main .listDevices .noResults .r-flex p{margin-top:5px}
        #main .listDevices .noResults .r-flex img{width:42px;height:42px;margin-right:15px}
        #main .listDevices h2{position:relative;display:flex;justify-content:center;align-items:center;max-width:240px;width:100%;margin-bottom: 10px;}
        #main .listDevices h2[data-sticker]:before{content:attr(data-sticker);position:absolute;z-index: 1;display:block;left:45px;top:0;padding:0 4px;border-radius:1px;background-color:#00e094;color:#fff;font:700 12px/18px 'Montserrat';text-transform:uppercase}
        #main .listDevices img{width:150px;height:150px;display:block;margin:0 auto 25px;transition: transform .2s ease-out;}
        #main .listDevices h2 a:hover img{transform: scale(1.08);}
        #main .listDevices h2 span{font: 800 18px 'Montserrat', sans-serif;text-align:center;min-height:68px;display:block;}
        #main .listDevices h2 small{font:550 14px/24px 'Montserrat';display:block;text-transform: capitalize;}
        #main .listDevices .colors{width:35px;min-height: 150px;position:absolute;padding:3px 0;left:40px;top: 35px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:auto;z-index:1}
        #main .listDevices .colors button{position:relative;width:19px;min-height:19px;height:19px;border-radius:100%;user-select:none;box-shadow:0 0 5px -2px #000;margin:5px 0;appearance:none;outline-offset: 8px;border:solid;border-width:3px}
        #main .listDevices .colors button.selected{cursor:auto}
        #main .listDevices .colors button.selected:after{content:"";position:absolute;width:27px;height:27px;border-radius:100%;border:solid 1px #00e094;left:-7px;top:-7px}
        #main .listDevices .colors button[data-stock="false"]:before{position:absolute;content:"";left:-6px;top:5px;border-top:2px solid #d8d8d8;transform:rotate(-45deg);width:25px}
        #main .listDevices .toggles > div{display:flex;justify-content:center;margin-bottom:8px}
        #main .listDevices .toggles button{border:1px solid #d6d6d6;margin-left:-1px;display:flex;min-width:70px;justify-content:center;outline-offset:2px;align-items:center;height:30px;position:relative;white-space:nowrap;cursor:pointer;gap:4px;font-family:"Montserrat",Verdana,Sans-serif}
        #main .listDevices .toggles button[data-4g="false"]{order:-1}
        #main .listDevices .toggles button:first-of-type,html #main .listDevices .toggles button[data-4g="false"],#main .listDevices .toggles button:first-of-type:before,html #main .listDevices .toggles button[data-4g="false"]:before{border-radius:4px 0 0 4px}
        #main .listDevices .toggles button:last-of-type,html #main .listDevices .toggles button[data-4g="true"],#main .listDevices .toggles button:last-of-type:before,html #main .listDevices .toggles button[data-4g="true"]:before{border-radius:0 4px 4px 0}
        #main .listDevices .toggles button:only-child,#main .listDevices .toggles button:only-child:before{border-radius:4px!important}
        #main .listDevices li .toggles button span.bluetooth{height:16px;background:url(//static.s-sfr.fr/picto-bluetooth.svg) center;background-repeat:no-repeat;background-size:auto 16px;pointer-events:none;width:9px}
        #main .listDevices li .toggles button span.antenna{height:16px;background:url(https://static.s-sfr.fr/media/RED/icones/antenne-black.svg) center;background-repeat:no-repeat;pointer-events:none;width:14px;background-size:auto 16px}
        #main .listDevices .toggles button.opacity{color:#CCC}
        #main .listDevices .toggles button.opacity span{opacity:.3}
        #main .listDevices .toggles button.selected{font-weight:700;cursor:auto;pointer-events:none}
        #main .listDevices li .toggles button.selected span.bluetooth{background-image:url('https://static.s-sfr.fr/media/RED/bluetooth-bold.svg');background-size: auto 19px;}
        #main .listDevices li .toggles button.selected span.antenna{background-image:url('https://static.s-sfr.fr/media/RED/antenne-black-bold.svg');}
        
        
        
        #main .listDevices .toggles button.selected:before{content:"";position:absolute;top:-1px;left:-1px;display:block;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid #00e094;z-index:1}
        #main .listDevices .toggles button.selected:after{content:"";position:absolute;top:0;right:0;display:block;width:16px;height:16px;background:url(//static.s-sfr.fr/media/red-icon-check-triangle.svg) no-repeat center;background-size:16px}
        #main .listDevices .price{font:700 30px/24px 'Montserrat';margin-top:7px}
        #main .listDevices .price s{font:550 16px/16px 'Montserrat'}
        #main .listDevices .devicePromos{width:220px;position:relative;margin:20px auto -15px;background:#f2f2f2;padding:12px 10px 7px;text-align:center}
        #main .listDevices .devicePromos:before{content:'DÉTAIL PROMO';display:inline-block;position:absolute;left:50%;transform:translateX(-50%);top:-8px;font:700 12px/18px 'Montserrat';padding:0 4px;border-radius:1px;background-color:#08bf7e;color:#fff}
        #main .listDevices .devicePromos p{font:550 11px/16px 'Montserrat';color:#1a171b;display:block}
        #main .listDevices .devicePromos >strong {display:block;font-size:12px;}
        
    #FAQ{ display: flex; justify-content: center; flex-wrap: wrap; padding: 50px 0; background:#fff;}
        #FAQ >strong{ flex: 0 0 100%;color: #404040; margin-bottom: 20px; text-align: center; font-size: 22px; }
        .toggler{max-width:850px;width:100%;border:1px solid #dcdcdc}
        .toggler .bloc{position:relative;border-bottom:1px solid #dcdcdc}
        .toggler label{position:relative;display:block;padding:30px 70px 30px 35px;cursor:pointer}
        .toggler label.QACloser{position:absolute;top:0;left:0;display:none;width:100%;height:82px}
        .toggler h3{display:inline-block;font:550 16px/22px "Montserrat";vertical-align:middle;color:#1a171b;text-transform:none}
        .toggler .answer{max-height:0;margin:0 35px;border-top:1px solid transparent;font-size:14px;line-height:22px;transition:max-height.5s;overflow:hidden}
        .toggler .answer p{margin-bottom:10px}
        .toggler .answer a{ text-decoration: underline; }
        .toggler .answer :first-child{margin-top:20px}
        .toggler .answer :last-child{margin-bottom:20px}
        .toggler .bloc:last-child{border-bottom:0}
        .toggler input#QAOFF:checked ~ .toggler label.QACloser,.toggler input[name="QA"]:checked ~ label.QACloser{display:block}
        .toggler input#QAOFF:checked ~ .toggler .answer,.toggler input[name="QA"]:checked ~ .answer{max-height:500px;border-top-color:#dcdcdc}
        .toggler label.QA::after{content:'+';position:absolute;top:50%;right:32px;display:inline-block;width:22px;text-align:center;color:#00e094;font-size:38px;transform: translateY(-50%)}
        .toggler input#QAOFF:checked ~ .toggler label.QA h3,.toggler input[name="QA"]:checked ~ label.QA h3{text-shadow: 0 0 1px #08bf7e;color:#08bf7e}
        .toggler input#QAOFF:checked ~ .toggler label.QA::after,.toggler input[name="QA"]:checked ~ label.QA::after{content:'-';font-size:45px}
    
        @media (max-width:1200px) {
        #main .dropdown.l{min-width:175px}
        #main .dropdown-button{min-width:120px;font-size:13px}
        #main .filtersList .search input{font-size:13px}
        #main .listDevices li{flex:0 1 calc(33.3% - 14px)}
        }
        
        
        @media (max-width:1023px) {
        .wrapper{padding:0 10px}
        
        #breadcrumb li:not(:last-child):after{margin:0 4px}
        #banner{margin:24px 0}
        #banner h1{font-size:32px}
        
        #main aside{display:block;background:#fff;padding:0 30px;position:fixed;z-index:99999;top:0;right:0;bottom:0;overflow:auto;transition:transform .3s ease; transform:translateX(100%);}
        
            .showSidebar #main .sidebarMask{visibility:visible;opacity:.5;}
            .showSidebar #main aside{transform:translateX(0);}
            #main .listDevices li[lazy]:not(:nth-child(-n + 2)){display:none}
            #main [data-count]:before{left: auto;right: -3px;}
            #main .dropdown-content{display:flex;position:relative;background-color:#fff;font-size:14px;margin-top:0;padding:0;border-radius:0;box-shadow:none;animation:none;max-height:800px;transition: max-height .5s ease;}
            #main .dropdown-content .view-more strong:after {transform: rotate(180deg);right: -18px;}
            #main .view-more:checked +.dropdown-content .view-more{background-color:#fff;height: 20px;}
            #main .view-more:checked +.dropdown-content .view-more strong:after {transform: rotate(0deg);right: -18px;}
            #main .view-more:checked + .dropdown-content{max-height:189px}
            #main .sort .wrapper > span,#main .dropdown-button{min-width:initial;font:700 16px 'Montserrat';border:none;padding:0;margin-bottom:10px;pointer-events:none}
            #main .sort .wrapper{padding:0;justify-content:flex-start;align-items:flex-start;flex-direction:column}
            #main .sort .dropdown{margin:0}
            #main .sidebarl-label{display:flex;align-items:center;width:100%;margin-bottom:15px;padding:5px 0 15px}
            #main .sidebarl-label .ico-filter{position:relative;padding-left:32px;font-size:18px}
            #main .sidebarl-label .ico-filter:before{content:'';position:absolute;left:0;width:22px;height:22px;background:url(//static.s-sfr.fr/media/ic_filtre.svg)}
            #main .sidebarl-label .close{font-size:0;width:15px;height:15px;margin-left:auto;background:url(//static.s-sfr.fr/media/ic-cross.svg) no-repeat #fff center;padding:5px}
            #main .filtersList .filters{padding:0}
            #main .filtersList{box-shadow:none;position:relative;padding:0}
            #main .filtersList .filters{flex-direction:column}
            #main .filtersList:before,#main .dropdown-button:after,#main .dropdown-button[data-count]:before{content:none}
            #main .filtersList .search,#main .sort .dropdown-button,#main .sort .resultNumber,.filtersList .filterGroup{display:none}
            #main .filtersList .filters >div,#main .sort{margin:0;padding:15px 0}
            #main .filtersList .filters >:not(:nth-last-child(-n+2)),#main .sort,#main aside .sidebarl-label{border-bottom:1px solid #dcdcdc}
        
        #main .sticky-mobile {display:flex;flex-direction:column;position:sticky;top:0;z-index:4;padding:10px;box-shadow:0 5px 24px 0 rgba(0,0,0,0.1);}
            #main .sticky-mobile .resultNumber{margin-right:10px;font-size:12px;white-space:nowrap;min-width: 70px;text-align:center;}
            #main .sticky-mobile .resultNumber small{font-size:12px;font-family:'Montserrat'}
            #main .sticky-mobile .search{min-width:initial;box-shadow:none;border-color:#f2f2f2;margin-right:5px}
            #main .sticky-mobile .search input { font:550  14px/45px 'Montserrat';background-position: left 6px center;background-size: 24px;padding: 0 10px 0 35px;}
            #main .sticky-mobile button{position:relative;font:550 14px/45px 'Montserrat';padding:0 10px 0 37px;background:url(//static.s-sfr.fr/media/ic_filtre.svg) #fff no-repeat left 13px center;background-size:18px;border-radius:4px;border:solid 2px #f2f2f2}
            #main .sticky-mobile .filterGroup {margin: 5px -5px 0;}
            #main .sticky-mobile .activeFilters {margin: 0;}
            #main .sticky-mobile .activeFilters label {margin: 10px 5px 0;padding: 0 33px 0 10px;font:550 14px/30px 'Montserrat';}
            #main .sticky-mobile .activeFilters label::after {height: 30px;background-size: 11px;}
            
        
        #main .buttons{display:flex;position:sticky;bottom:0;padding:20px 0 25px;margin: 0 -30px;box-shadow:0 5px 24px 0 rgba(0,0,0,0.1);flex-direction:column;align-items:center;background:#fff;z-index: 3;}
            #main .buttons .r-but{border-radius:4px;min-width:220px;text-align:center;margin-bottom:20px}
            #main .buttons .resetFilters{font:700 13px 'Montserrat';color:#00e094;letter-spacing:.2px;width: 100%;}
            
        #main .listDevices ul {margin: 15px -7px 30px;}
            #main .listDevices li{flex:0 1 calc(50% - 14px)}
            #main .listDevices .colors button {width: 25px;min-height: 25px;height: 25px;}
            #main .listDevices .colors button[data-stock="false"]:before {left: -7px; top: 8px;width: 32px; }
            #main .listDevices .colors button.selected:after {width: 33px; height: 33px;left: -7px; top: -7px;}
        }
        
        @media (max-width:767px){
        #bandeau > div{height: auto;min-height: 55px;}
            #bandeau > div > h1{font-size:18px;padding: 10px 0;}
        
        #main .listDevices li{flex:0 1 calc(100% - 14px)}
            #main .listDevices h2 span {min-height: initial;}
            #main .listDevices .noResults{margin: 0 10px;}
            #main .listDevices .noResults .r-flex {padding: 30px 15px;}
            #main .listDevices .noResults .r-flex strong {font-size: 16px;}
            #main .listDevices .noResults .r-flex p {font-size: 14px;}
            
        #FAQ{ padding: 30px 10px; }
            #FAQ >strong{font-size: 18px; }
            .toggler label{padding:15px 55px 15px 25px}
            .toggler h3{font-size:14px}
            .toggler label.QA::after{right:20px}
            .toggler label.QACloser{height:52px}
            .toggler input[name="QA"]:checked ~ label.QA::before{left:25px;width:calc(100% - 50px);}
            .toggler .answer{margin:0 25px}
            .toggler .answer .r-arrow{margin-bottom:5px}
        }
        
        @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width:767px) {
            #main .sticky-mobile .search input {font-size:16px}
        }