@font-face{font-family:'SFR-Bold';src:url('//static.s-sfr.fr/resources/font/sfr-1.0-bold-webfont.eot');src:url('//static.s-sfr.fr/resources/font/sfr-1.0-bold-webfont.eot?#iefix') format('embedded-opentype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-bold-webfont.woff') format('woff'), url('//static.s-sfr.fr/resources/font/sfr-1.0-bold-webfont.ttf') format('truetype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-bold-webfont.svg#SFRBold') format('svg');font-weight:normal;font-style:normal;font-display: swap;} @font-face{font-family:'SFR-Regular';src:url('//static.s-sfr.fr/resources/font/sfr-1.0-regular-webfont.eot');src:url('//static.s-sfr.fr/resources/font/sfr-1.0-regular-webfont.eot?#iefix') format('embedded-opentype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-regular-webfont.woff') format('woff'), url('//static.s-sfr.fr/resources/font/sfr-1.0-regular-webfont.ttf') format('truetype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-regular-webfont.svg#SFRRegular') format('svg');font-weight:normal;font-style:normal;font-display: swap;} @font-face{font-family:'SFR-Thin';src:url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.eot');src:url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.eot?#iefix') format('embedded-opentype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.woff') format('woff'), url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.ttf') format('truetype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.svg#SFRThin') format('svg');font-weight:normal;font-style:normal;font-display: swap;} @font-face{font-family:'SFR-Light';src:url('//static.s-sfr.fr/resources/font/SFR-Light.eot');src:url('//static.s-sfr.fr/resources/font/SFR-Light.eot?#iefix') format('embedded-opentype'), url('//static.s-sfr.fr/resources/font/SFR-Light.woff') format('woff'), url('//static.s-sfr.fr/resources/font/SFR-Light.ttf') format('truetype'), url('//static.s-sfr.fr/resources/font/SFR-Light.svg#SFRThin') format('svg');font-weight:normal;font-style:normal;font-display: swap;} @font-face{font-family:'SFR-Black';src:url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.eot');src:url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.eot?#iefix') format('embedded-opentype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.woff') format('woff'), url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.ttf') format('truetype'), url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.svg#SFRThin') format('svg');font-weight:normal;font-style:normal;font-display: swap;} .bl_promo {border-radius: 14px 8px 14px 14px;background: #000;display: inline-block;padding: 0 10px 20px;position: absolute;top: 0;font-size: 10px;line-height: 19px;font-weight: 700;text-transform: uppercase;} .bl_promo {color: #181818;background-color: #ffcd00;} .btn.filled-black {font-size:12px;font-family:SFR-Black;letter-spacing:0.65px;} .btn.filled-black.disabled a {cursor:default;} .btn.filled-black.disabled:hover {background: #d2d2d2;box-shadow: none;transition: all 0.2s ease-out;} .btn.filled-black.disabled {background: #d2d2d2;} .btn.black {border: solid 1px #222;background-image: none;color: #222} .btn.black:not(.disabled):hover {background-position: 100% center;box-shadow: 0 4px 8px rgba(34, 2, 0, 0.4);transition: all 0.2s ease-out;} body {background:#f2f2f2} #Filtres {max-width:100%; width:1065px;margin:25px auto;max-width: calc(100%);} #Filtres .body{background:#fff;border-radius:16px;} #Filtres p.title {font-family: SFR-Bold;font-size: 19px;line-height: 26px;color: #222222;width: 100%;height:26px;} #Filtres .header {display: flex; justify-content: space-between;align-items:center;margin-bottom:10px;} #Filtres .header a {margin:0;min-width: 224px;padding:0;} #Filtres .body {display:flex;flex-flow:row wrap;max-width: 100%;} #Filtres .body .top {width:100%;display:flex;padding:13px 16px 7px;position: relative;} #Filtres .body .btn.mobile{display:none;} #Filtres .body .top .tags {position: relative;min-width: calc(64% - 16px);width: 100%;max-width: calc(100% - 142px);padding-right: 16px;margin-bottom: 5px;} #Filtres .body .top .tags:after {position: absolute;content: "";width: 1px;height: calc(100%);background-color: #d2d2d2;top: 0;right: 0px;} #Filtres .body .top .tags span {position: relative;padding: 4px 27px 4px 9px;display: inline-block;color: #222;border: 1px solid #d2d2d2;border-radius: 15px;margin: 4px 5px 4px 0;font-family: SFR-Regular;font-size: 12px;line-height: 1;letter-spacing: 0.65px;cursor: pointer;} #Filtres .body .top .tags span:hover {background-color: #444;color: #fff;border: 1px solid #444;-webkit-transition: background-color 0.2s ease-out;-moz-transition: background-color 0.2s ease-out;-o-transition: background-color 0.2s ease-out;transition: background-color 0.2s ease-out;} #Filtres .body .top .tags span:after {content: '╳';position: absolute;right: 7px;font-size: 12px;font-weight: 600;top: 4px;color: #e2001a;} #Filtres .body .top .tags span:hover:after {color: #fff;} #Filtres .body .top .tags .tags-empty {font-family: SFR-Regular;font-size: 12px;letter-spacing: 0.65px;color: #8a8a8a;margin: 8px 0px 8px 10px;} #Filtres .body .top .reinit {position:relative;width: calc(40% - 165px);padding: 0 16px;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;} #Filtres .body .top .reinit.empty-tags {display:none} #Filtres .body .top .reinit:after {position: absolute;content: "";width: 1px;height: calc(100% + 5px);background-color: #d2d2d2;top: 0px;right: 0px;} #Filtres .body .top .reinit a {text-decoration:underline;} #Filtres .body .top .Expand {min-width: 142px;width: 142px; padding:0 23px 0 28px;text-decoration:none;display: flex;justify-content: flex-end;align-items: center;margin-bottom: 10px;} #Filtres .body .top .Expand span {display: inline-block;} #Filtres .body .top .Expand span.mobile {display: none;} #Filtres .body .top .Expand span:nth-of-type(2):after {content:"plus";display:inline-block;margin-left:5px;} #Filtres .body .top .Expand.less span:nth-of-type(2):after {content:"moins";display:inline-block;margin-left:5px;} #Filtres .body .top .Expand i {transition: all .2s ease-out;} #Filtres .body .top .Expand.less i {transform: rotate(180deg);transition: all .2s ease-out;} #Filtres .body .content {padding:0 40px 27px; position:relative;width: 100%;display:flex;flex-flow:row wrap;} #Filtres .body .content.hide {display:none;} #Filtres .body .content:before {position: absolute;content: "";width: calc(100% - 32px);height: 1px;background-color: #d2d2d2;left: 16px;top: 0px;} #Filtres .body .content .left {width: 322px;margin-top: 24px;max-width: 40%;} #Filtres .body .content .left input[type="checkbox"] + label {margin-right: 0;} #Filtres .body .content * > div{display:flex;flex-flow:row wrap;align-content: end;} #Filtres .body .content * > div p.title{margin-bottom:16px;} #Filtres .body .content .right {width:calc(100% - 322px);display: flex;flex-flow: row wrap;min-width:61%;} #Filtres .body .content .right > div {width: 33%;height: fit-content;height: -moz-fit-content;margin-top: 24px;max-width: 43%;} #Filtres .body .content .right .color, #Filtres .body .content .right .stockage {width: 40%;} #Filtres .body .content .right .inline-inputs {width: 27%;margin-right: 0;} #Filtres .body .content .right .state, #Filtres .body .content .right .price-block {width: 33%;} #Filtres .body .content .right input[type="checkbox"] + label {width:100%;height:20px;margin-right:0;} #Filtres .body .content input[type="checkbox"] {display: none;} #Filtres .body .content input[type="checkbox"] + label {width: 50%;height:20px;margin-right: 20px;margin-bottom: 13px;} #Filtres .body .content input[type="checkbox"] + label > div {width: 20px;height: 20px;border: 1px solid #e9e9e9; border-radius: 4px; background-color: #e9e9e9;display: inline-block;cursor: pointer;vertical-align: middle;margin-top: -1px;} #Filtres .body .content input[type="checkbox"] + label > div + span {font-family: SFR-Regular;font-size: 13px;line-height: 21px;color: #444444;;margin-left: 10px;color: #8a8a8a;cursor: pointer;letter-spacing: -0.6px;} #Filtres .body .content input[type="checkbox"]:checked + label > div + span {font-weight: 800;;color: #444444;} #Filtres .body .content input[type="checkbox"]:checked + label > div {width: 20px;height: 20px;border: 0;background-color:#7fc100;position: relative;display: inline-block;} #Filtres .body .content input[type="checkbox"]:checked + label > div:after {content: '';width: 14px;height:14px;position: absolute;top: 3px;right:0;left:0;margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background:url(//static.s-sfr.fr/media/icono-ui-check.svg) center / contain no-repeat,#7fc100;} #Filtres .body .content .color {flex-flow:column;} #Filtres .body .content .color .c {display: flex;flex-flow: row wrap;align-items: center;justify-content: left;margin-left: -5px;max-width: 200px;} #Filtres .body .content .color .c input[type="checkbox"] + label {margin: 0 5px;width: 22px;margin-bottom: 13px;} #Filtres .body .content .color .c input[type="checkbox"] + label span {display: inline-block;width: 18px;height: 18px;border-radius: 100%;border: 1px solid #d2d2d2;cursor: pointer;position: relative;} #Filtres .body .content .color .c input[type="checkbox"]:checked + label span { width: 22px;height: 22px; margin-top: -2px; margin-left: -2px; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c1"] span { background-color: #000; border-color: #000;} #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c1"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #000 /* si #fff remplacer par #d2d2d2 */; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c2"] span { background-color: #fff; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c2"] span { background-color: #ebebeb; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c2"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ebebeb; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c3"] span { background-color: #798081;border-color: #798081; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c3"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #798081; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c4"] span { background-color: #ff1111; border-color: #ff1111; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c4"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ff1111; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c5"] span { background-color: #5eb6dd; border-color: #5eb6dd; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c5"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #5eb6dd; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c6"] span { background-color: #ffd9df;border-color: #ffd9df; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c6"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ffd9df /* si #fff remplacer par #d2d2d2 */; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c7"] span { background-color: #eeeeee;border-color: #eeeeee; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c7"] span { background-color: #ebebeb; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c7"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #eeeeee; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c8"] span { background-color: #ffda8c;border-color: #ffda8c; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c8"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ffda8c; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c9"] span { background-color: #ff7f00;border-color: #ff7f00; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c9"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ff7f00; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c10"] span { background-color: #517784;border-color: #517784; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c10"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #517784; } #Filtres .body .content .color .c input[type="checkbox"] + label[for="c11"] span { background-color: #ceb2c8;border-color: #ceb2c8; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label[for="c11"] span { box-shadow: inset 0 0 0px 3px #fff, 0 0 0px 1px #ceb2c8; } #Filtres .body .content .color .c input[type="checkbox"]:checked + label span {border: none;} #Filtres .body .content .inline-inputs input[type="checkbox"] + label {display: flex;flex-flow: row wrap;margin-right: 0;min-width: 50%;width: auto;} #Filtres .body .bottom {display:none;margin:8px 14px 24px;width:100%;} #Tri {max-width: calc(100%);width: 1065px;margin: 25px auto;position:relative;} #Tri:after{content: "";position:absolute;top:40px;left:0;width: 100%;height: 1px;background-color: #8a8a8a;pointer-events: none;} #Tri .selector {display: inline-block;position: relative;cursor: pointer;} #Tri .selector:after {content: "";width: 10px;height: 10px;border: 1px solid #fff;transform: rotate(135deg);border-left: none;border-bottom: none;outline: 0;position: absolute;right: 14px;top: 11px;pointer-events: none;} #Tri select {background: transparent;border: none;font-family: 'SFR-Black';font-size: 12px;letter-spacing: 0.7px;text-transform: uppercase;color: #fff;background-color: #181818;width: 210px;height: 40px;-moz-appearance: none;-webkit-appearance: none;outline: 0;position: relative;cursor: pointer;border-radius: 10px 10px 0 0;padding: 0 19px;} .links {height: 110px;} bol-mobile-list-block .bl_PhoneList .PhoneList .card_wrapper {min-width: 334px;max-width: 334px;margin:16px 15px;} bol-mobile-promo .bl_promo {color:#181818;background-color:#ffcd00;} bol-mobile-promo .bl_promo .txt {color:#181818;} .mobile_card {max-height:fit-content} .mobile_card .bl_title {height:124px;padding:24px 10px 2px 24px;margin:0;border-bottom:0;} .mobile_card .bl_title h2 {height:26px;font-family: SFR;font-size: 24px;font-weight: normal;line-height: 24px;letter-spacing: normal;color: #222;text-transform:uppercase;} .mobile_card .bl_title h3 {height:22px;font-family: SFR-Black;font-size: 18px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 22px;letter-spacing: normal;color: #222} .mobile_card .bl_title .reconditione {height:24px;font-family: SFR-Bold;font-size: 16px;line-height: 22px;color: #32a75e;} .mobile_card .bl_title .forfait {height:24px;font-family: SFR-Bold;font-size: 16px;color: #222;display:flex;align-items: flex-end;} .mobile_card .bl_title .img-reconditione { width: 60px; height: 60px;position: absolute;right: 10px;top: 10px;cursor: pointer;display: flex;justify-content: center;} .mobile_card .bl_phone {position:relative;padding: 16px 16px 16px 24px !important;align-items: flex-start !important;height: 352px;} .mobile_card .bl_phone .compatibility-5g { width: 88px; height: 42px;position: absolute;right: -5px;top: 0px;border: 1px solid #e9e9e9; border-right:0; border-radius:6px;} .mobile_card .bl_phone .compatibility-5g p {position: absolute;left: 16px;top: 5px;font-family: Arial;font-size: 10px;font-weight: bold;letter-spacing: 0.2px;color: #222;} .mobile_card .bl_phone .compatibility-5g img{ margin-top:19px;position: absolute;left: 16px;} .mobile_card .bl_phone > img {height: 320px;max-height: 320px;width: auto;min-width: auto;padding: 0;margin-right: 16px;} .mobile_card .bl_phone > .infos {padding-top: 35px;} .mobile_card .bl_phone > .infos .prix-barre bol-price{font-family: SFR;font-size: 14px;font-weight: normal;line-height: 14px;letter-spacing: normal;color:#222;margin-bottom:4px;text-decoration:line-through;} .mobile_card .bl_phone > .infos .mensualites {font-family: Arial;font-size: 10px;font-weight: bold;line-height: 12px;letter-spacing: 0.2px;color: #222;} .mobile_card .bl_phone > .infos .prix {font-family: SFR-Black;font-size: 24px;line-height: 20px;color: #222;margin-bottom:4px;} .mobile_card .bl_phone > .infos .info.remboursement {margin-top:12px;padding-bottom:8px;position:relative;} .mobile_card .bl_phone > .infos .info.remboursement:after {position:absolute;content:"";width:48px;height:1px;background-color:#d2d2d2;} .mobile_card .bl_phone > .infos .info.forfait .title span{font-size: 10px;line-height: 12px;letter-spacing: -0.1px;color: #222;} .mobile_card .bl_phone > .infos .info .title {font-family: SFR;font-size: 12px;line-height: 12px;letter-spacing: -0.2px;color: #222;} .mobile_card .bl_phone > .infos .info .desc {font-family: Arial;font-size: 10px;line-height: 12px;letter-spacing: 0.2px;color: #8a8a8a;margin-bottom:9px} .mobile_card .bl_phone > .infos .info .desc span {display:block;margin-bottom:5px;} .mobile_card .bl_phone > .infos .das {font-family: SFR;font-size: 12px;line-height: 15px;letter-spacing: -0.17px;color: #222;position:relative;margin-top:18px;width:46px;} .mobile_card .bl_phone > .infos .das span {position:relative;cursor:pointer;} .mobile_card .bl_phone > .infos .das:hover>span.more-info {display: block;} .mobile_card .bl_phone > .infos .das span.more-info {display: none;width: 160px;position: absolute;right: -4px;margin: 0;background: #eee;bottom: 24px;border: 1px solid #777;padding: 4px;border-radius: 9px;box-shadow: 0 4px 8px 0 #0002;} .mobile_card .bl_phone > .infos .das span:first-child:after {position:absolute;content:"";display:inline-block;width:16px;height:16px;margin-left:8px;background:url("//static.s-sfr.fr/media/icono-picto-information-gradient.png");background-size: 16px 16px;} .mobile_card .bl_phone > .infos .stars {display:flex;justify-content:left;margin-top: 8px;} .mobile_card .bl_phone > .infos .stars > bol-rate svg:first-child {margin-left: 0;} .mobile_card .bl_phone > .infos .stars > bol-rate svg {margin-left: 1px;} .mobile_card .selectors {width: 100%;display:flex;border-top:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;margin-bottom:16px;height:31px;} .mobile_card .selectors .selector.color {border-right:solid 1px #e9e9e9;} .mobile_card .selectors .onecolor {-webkit-margin-after: 0; margin-block-end: 0;} .mobile_card .selectors .colorBlock {cursor: default;justify-content: center;align-items: center;margin: 0;border-right: 1px solid #e9e9e9;width: 50%;} .mobile_card .selectors .capacity {cursor: default;margin: 0;width: 50%;justify-content: center;align-items: center;} .mobile_card .selectors .selector.color.bloc_select .filtre {background: #fff;display: flex;width: 100%;height: 29px;justify-content: center;align-items: center;box-shadow: unset;} .bloc_select .filter-bloc-relative .list_select li span, .mobile_card .selectors .selector.color.bloc_select .filtre span {width: 18px;height: 18px;border-radius: 100%;border: 1px solid #d2d2d2;cursor: pointer;position: relative;} .mobile_card .selectors .selector.color.bloc_select .filter-bloc-relative {display: none;} .mobile_card .selectors .selector.color.bloc_select.active .filter-bloc-relative {display: block;background: #fff;z-index: 5;position: absolute;width: 100%;border: 0;border-radius: 16px;} .mobile_card .selectors .selector.color.bloc_select.active .filter-bloc-relative .list_select {background: #fff;border: 0;display: flex;flex-flow: column;align-items: center;justify-content: center;border-radius: 0 0 16px 16px;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li {padding: 5px 12px;display: flex;align-items: center;justify-content: center;width: 100%;position: relative;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li:after { width:calc(100% - 24px);height: 1px;background: #f2f2f2;position:absolute;content:"";top:0;left:12px;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li:hover { background: #f2f2f2;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li:hover + li:after{ width:0%;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li:last-child:hover {border-radius: 0 0 16px 16px;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.active {} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.disabled:hover {background:#fff;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.disabled:hover + li:after{ width:calc(100% - 24px);} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.disabled {cursor:default;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.disabled span {cursor:default;} .mobile_card .selectors .selector.bloc_select .filter-bloc-relative .list_select li.disabled span:after {content: "";width: 22px;height: 2px;background-color: #444;position: absolute;transform: rotate(135deg);right: -2px;bottom: 8px;} .mobile_card .selectors .selector {display: inline-block;position: relative;cursor: pointer;width: 50%;} .mobile_card .selectors .selector:after {content: "";width: 10px;height: 10px;border: 1px solid #e2001a;transition: all .2s ease-out;transform: rotate(135deg);border-left: none;border-bottom: none;outline: 0;position: absolute;right: 14px;top: 7px;pointer-events: none;} .mobile_card .selectors .selector.active:after{transform: rotate(-45deg);top:auto;bottom:7px;} .mobile_card .selectors .selector select {background: transparent;border: none;font-family: 'SFR';font-size: 14px;color: #222;width: 100%;height: 30px;-moz-appearance: none;-webkit-appearance: none;outline: 0;position: relative;cursor: pointer;border-radius: 10px 10px 0 0;padding: 0 calc(100%/3);} .mobile_card .selectors .selector select option:disabled{text-decoration:line-through} .mobile_card .compare {display: flex;justify-content: center;align-items: center;margin: 2px auto 17px;} .mobile_card .compare input[type="checkbox"] {display:none;} .mobile_card .compare input[type="checkbox"] + label > div {width: 20px;height: 20px;border: 1px solid #e9e9e9;border-radius: 4px;background-color: #e9e9e9;display: inline-block;cursor: pointer;vertical-align: middle;margin-top: -1px;} .mobile_card .compare input[type="checkbox"]:checked + label > div {width: 20px;height: 20px;border: 0;background-color: #7fc100;position: relative;display: inline-block;} .mobile_card .compare input[type="checkbox"]:checked + label > div:after {content: '';width: 14px;height: 14px;position: absolute;top: 3px;right: 0;left: 0;margin-right: auto;margin-left: auto;margin-bottom: auto;margin-top: auto;background: url(//static.s-sfr.fr/media/icono-ui-check.svg) center / contain no-repeat,#7fc100;} .mobile_card .bl_compare span {font-family: SFR-Regular;font-size: 13px;line-height: 21px;color: #444444;margin-left: 10px;cursor: pointer;letter-spacing: -0.6px;} .mobile_card .compare input[type="checkbox"]:checked + label > div + span {font-weight: 800;color: #444444;} .mea .mobile_card {border-radius: 16px; box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.13), 0 -1px 6px 1px rgba(24, 24, 24, 0.04);padding:64px 18px 118px 24px ;} .mea .mobile_card .title {font-family: SFR-Black;font-size: 32px;line-height: 36px;color: #fff;margin-bottom:24px;} .mea .mobile_card .desc {font-family: SFR-Bold;font-size: 20px;line-height: 26px;color: #fff;margin-bottom:72px;} .mea .mobile_card img {height: 96px;width: auto;margin-bottom: 78px;align-self: center;} .mea .mobile_card .btn.black {width: 272px;border: solid 1px #e9e9e9;margin-left:5px;margin-right:10px; background:#fff;margin-bottom:40px;} .mea .mobile_card a {align-self: center;} bol-mobile-plans-list .ForfaitList>li {min-width:334px;max-width:334px;} bol-mobile-plan-card-block .phone_plan {height:auto;max-width: 334px;margin: auto;} #forfaitsmobile h2 {margin-bottom: 24px;} #forfaitsmobile p.principal-desc {font-family: SFR-Regular;font-size: 14px;line-height: 16px;margin-bottom:23px;} bol-fixe-offers-block {padding: 0 0 40px;display: block;background: #f2f2f2;} .bloc_SubTitle {background-image: linear-gradient(to bottom,#e0e0e0,#f2f2f2);padding: 0 18px;} .bloc_SubTitle .wrapper {max-width: 1065px;margin: auto;padding: 40px 0 8px;} .bloc_SubTitle .wrapper h2 {display: flex;align-items: center;text-transform: uppercase;} bol-fixe-offer-list .wrapper {max-width: calc(1065px + 30px);margin: auto;padding-bottom: 20px;} bol-fixe-offer-list .wrapper .list_offers {padding: 12px 0 20px;display: flex;flex-wrap: wrap;} bol-fixe-offer-list .wrapper .list_offers > li {padding-top: 19px;min-width: 290px;max-width: calc(100% / 2 - 30px);flex: 1 auto;position: relative;margin: 12px 15px;} .phone_plan {background: #fff;overflow: hidden;position: relative;border-radius: 14px;box-shadow: 0 12px 24px 0 rgba(0,0,0,.13), 0 -1px 6px 1px rgba(24,24,24,.04);height: 100%;display: flex;flex-direction: column;justify-content: space-between;} .phone_plan.quatreg:before {content: "";position: absolute;top: -1px;right: -8px;background: url('//static.s-sfr.fr/media/4-g-white.svg') left center no-repeat, url(//static.s-sfr.fr/media/rectangle-1.png) no-repeat;width: 84px;height: 76px;z-index: 1;background-size: 66px 19px, cover} .phone_plan.cinqg:before {content: "";position: absolute;top: -1px;right: -8px;background: url('//static.s-sfr.fr/media/5-g-blanc.svg') center no-repeat, url(//static.s-sfr.fr/media/rectangle-2.png) no-repeat;width: 84px;height: 76px;z-index: 1;background-size: 56px 22px, cover} .phone_plan.cinqg:after {width: 6px;height: 100%;background:url('//static.s-sfr.fr/media/lisere-rouge.png') no-repeat bottom;content: "";position: absolute;right: 0;bottom:0;} .phone_plan.quatreg:after {width: 6px;height: 100%;background: url('//static.s-sfr.fr/media/lisere-bleu.png') no-repeat bottom;content: "";position: absolute;right: 0;bottom:0;} .phone_plan .bl_title_gamme {background: 0 0;padding: 15px 20px 9px;text-align: center;} .phone_plan .bl_title_gamme h3 {color: #222;font-size: 22px;font-weight: 900;line-height: 1.37;} .content.fixGame {position: relative;display: flex;justify-content: center;padding: 15px;} .content.fixGame:after {content: "";background: linear-gradient(to right,#871d81 0,#e2001a 100%);display: block;height: 2px;width: calc(100% - 48px);position: absolute;bottom: -8px;} .content .option {display: flex;flex-direction: column;align-items: center;max-width: 214px;position: relative;width: 214px;border-radius: 20px;border: 1px solid #8a8a8a;} .content .option.active {border: 2px solid;border-image-source: linear-gradient(138deg,#871d81,#e2001a 100%);border-image-slice: 1;background-image: linear-gradient(to bottom,#fff,#fff),linear-gradient(138deg,#871d81,#e2001a 100%);background-origin: border-box;background-clip: content-box,border-box;-o-border-image: linear-gradient(to bottom,#fff,#fff);border-image: linear-gradient(to bottom,#fff,#fff);-webkit-border-image-slice: 1;} .content .option.active:after {content: "";background: linear-gradient(to right,#871d81 0,#e2001a 100%);display: block;height: 24px;width: 2px;position: absolute;bottom: -24px;} .content .option:nth-child(2) {margin-left: 15px;} .content .content .option > * {margin: 0 10px;} .content .option img {height: 76px;width: auto;max-width: 90px;align-self: center;margin-top: 7px;} .content .option .title {font-family: SFR;font-weight: 600;text-align: center;text-transform: uppercase;font-size: 18px;margin-top: 3px;} .content .option .desc {height: 65px;width: calc(100% - 20px);font-size: 13px;line-height: 15px;letter-spacing: -.2px;text-align: center;font-family: SFR;margin-bottom: 20px;position: relative;} .content .option.active .desc:after {content: "";position: absolute;bottom: -21px;left: 0;height: 1px;width: 100%;background: linear-gradient(to right,#871d81 0,#e2001a 100%);} .content .option .desc:after {content: "";position: absolute;bottom: -20px;left: 0;height: 1px;width: 100%;background: #8a8a8a;} .content .option .forfait {font-family: SFR;font-weight: 600;font-size: 22px;line-height: 22px;margin: 12px auto 4px;} .content .option .engagement {font-family: SFR;font-size: 10px;line-height: 11px;text-align: center;margin-bottom: 16px;} .more-info {display: flex;padding: 0 30px;margin-bottom: 16px;justify-content: left;} .more-info .info {flex: 1;max-width: 33%;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;} .more-info .infographie {margin-top: 28px;height: 28px;display: flex;justify-content: center;} .more-info .infographie img {height: 28px;} .more-info .infographie p {font-family: SFR;font-weight: 600;font-size: 10px;} .more-info .infographie p span {font-size: 22px;} .more-info .info .desc {font-family: SFR;font-size: 10px;line-height: 12px;max-width: 88px;margin: 9px 0 0;width: 100%;text-align: center;} .card-links {width: calc(100% - 40px);margin: 0 auto;} .links {text-align: center;display: flex;flex-direction: column;justify-content: center;} .links .btn {width: 100%;margin: 0 auto 15px;font-size: 13px;letter-spacing: .7px;} bol-mobile-plan-card-block .phone_plan .bl_title_gamme a {display: flex;flex-direction:column;align-items: flex-start;justify-content: center;height: 100%;} .phone_plan .bl_title_gamme a p.forfait {font-family: SFR-Bold;font-size: 18px;letter-spacing: 0.8px;;} .phone_plan .bl_title_gamme a img {margin-left:12px;} .phone_plan .pc {position:relative;width: 170px; height: 30px;border-radius: 0 0 4px 4px;padding:4px 0;background-color: #e9e9e9;text-transform:uppercase;margin:0 auto 9px;color:#222} .phone_plan .pc > p:nth-child(1) {font-family: SFR-Bold;font-size: 10px;text-align: center;} .phone_plan .pc > p:nth-child(2) {font-family: SFR-Regular;font-size: 8px;text-align: center;} .phone_plan .pc:before {position:absolute;content:"";width:260px;height:1px;background-color:#e9e9e9;top:0;left: -45px;} .phone_plan .WhiteBloc .content {align-items: center;max-height:fit-content;} bol-mobile-plan-card-block .phone_plan .WhiteBloc .content:after {bottom: 0px;} .phone_plan .WhiteBloc .content .option {max-width: 240px;width: 240px;} bol-mobile-plan-card-block .phone_plan .WhiteBloc .content .option.active:after {height: 16px;bottom: -16px;} .phone_plan .WhiteBloc .content .option .forfait {position: relative;height: 29px;width: 100%;text-align: center;display: flex;align-items: center;justify-content: center;padding-bottom: 4px;margin: 14px auto 7px;} .phone_plan .WhiteBloc .content .option .forfait:after {position: absolute;content: "";display: block;width: 120px;height: 1px;background: linear-gradient(to right, #871d81 0%, #e2001a 100%);left: 0;right: 0;margin-left: auto;margin-right: auto;bottom: 0px;} .phone_plan .more-info {justify-content: space-around;margin-bottom: 14px;} .phone_plan .more-info .infographie p span {font-size: 22px;display: block;height: 19px;} .phone_plan .changement {width: 288px;height: 53px; margin:0 auto;font-family: SFR;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;line-height: 16px;letter-spacing: normal;text-align: center;color:#8a8a8a;} .phone_plan .subvention {display:flex;flex-flow:row;width:calc(100% - 40px);margin:0 auto 16px;padding:12px 20px 20px;background: #f2f2f2; border-radius: 4px;} .phone_plan .subvention .L {width:36px;height:100%;display: flex;align-items:center;} .phone_plan .subvention .L img {width:24px;height:24px;} .phone_plan .subvention .R {font-family: Arial;font-size: 10px;color: #8a8a8a;text-align: center;} .phone_plan .subvention .R p {text-align:left;} .phone_plan .subvention .R a {font-family: Arial;font-size: 10px;color: #8a8a8a;text-decoration:underline;cursor:pointer;} #Edito {width: 1065px;max-width: calc(100% - 30px);margin: 40px auto;display: flex;align-items: center;justify-content: space-between;padding: 40px 50px;min-height: 250px;border-radius: 20px;box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.13), 0 -1px 6px 1px rgba(24, 24, 24, 0.04);background: #fff;} #Edito .L {width:100%;max-width: 516px;padding-right:55px;} #Edito .L p:nth-child(1) {font-family: SFR-Bold;font-size: 19px;line-height: 26px;color: #222;margin-bottom:12px;} #Edito .L p:nth-child(2) {font-family: SFR-Regular;font-size: 18px;line-height: 28px;color: #444;} #Edito .L bol-link a {margin-top: 32px;} #Edito .R {display:flex;justify-content: center;min-width: calc(100% - 516px);max-width: 50%;} #Edito .R .reseau {display:flex;flex-direction:column;width: 50%;justify-content: center;align-items: center;} #Edito .R .reseau:nth-child(2) {margin-left: 40px;} #Edito .R .reseau img {margin-bottom:18px;} #Edito .R .reseau .text {text-align: center;} #Edito .R .reseau .text p {font-family: SFR-Bold;font-size: 16px;text-align: center;color: #222;margin-bottom:12px;} #Edito .R .reseau bol-link a.mobile {display:none;} #Cremaillere {width:1065px;max-width:calc(100%);color:#222;margin:auto;padding: 15px 0;} #Cremaillere p.title {font-family: SFR-Black;font-size: 30px;line-height: 34px;margin-bottom:24px;} #Cremaillere p.desc {font-family: SFR-Regular;font-size: 14px;line-height: 16px;margin-bottom:31px;} #Cremaillere .cards {display:flex;flex-flow:row wrap;max-width:100%;margin-bottom:20px;} #Cremaillere .cards .card input[type="radio"]{display:none;} #Cremaillere .cards .card {position:relative;display:flex;flex-flow:column;width: 104px;height: 222px;;align-items:center;margin: 0 2px 15px 0;} #Cremaillere .cards .card .top {position:relative;display:flex;flex-flow:column;align-items:center;width:calc(100%);border: solid 1px #d2d2d2;border-bottom:none;height: 194px;padding: 1px;cursor:pointer;} #Cremaillere .cards .card.no-detail .top {height: 100%;border-bottom: solid 1px #d2d2d2;} #Cremaillere .cards .card input[type="radio"]:checked + label {width:calc(100%);border-style: solid;border-width: 2px;border-image-source: linear-gradient(149deg, #871d81, #e2001a);border-image-slice: 1;background-color: #fff;padding: 0;} #Cremaillere .cards .card.no-detail .top:hover {border-width: 2px;} #Cremaillere .cards .card .top:hover {width: calc(100%);border-bottom: solid 1px #d2d2d2;background-color: #fff;} #Cremaillere .cards .card .top .debit {width: 94px;height: 14px;font-family: SFR-Black;font-size: 14px;margin: 19px auto 11px;text-align: center;} #Cremaillere .cards .card .top img {filter: grayscale(1);height: 20px;margin-bottom:13px;} #Cremaillere .cards .card input[type="radio"]:checked + label img {filter: grayscale(0);} #Cremaillere .cards .card .top .price {font-family: SFR-Bold; font-size: 16px;margin-bottom:1px;-webkit-text-fill-color: unset;color: #222;} #Cremaillere .cards .card .top .price span {font-size: 12px;} #Cremaillere .cards .card .top .engagement {font-family: SFR-Regular;font-size: 10px;line-height: 14px;text-align: center;color: #8a8a8a;margin-bottom:12px;} #Cremaillere .cards .card .top a {display: none;} #Cremaillere .cards .card .top a.link.More:hover i {transform: translateX(3px);} #Cremaillere .cards .card input[type="radio"]:checked + label a {display: block;height: 28px;padding-bottom: 12px;} #Cremaillere .cards .card .top .phone {position:absolute;bottom:0;width: 90px;border-top: 1px solid #d2d2d2;padding: 8px 0;font-family: Arial;font-size: 10px;} #Cremaillere .cards .card .top .phone p:first-of-type {font-weight: bold;padding-bottom: 4px;} #Cremaillere .cards .card .top .phone p:nth-child(2) {padding-left:2px;} #Cremaillere .cards .card .bottom {position: absolute;height:29px;width:calc(100%);bottom:0;border: solid 1px #d2d2d2;border-top: none;cursor: pointer;} #Cremaillere .cards .card .bottom .more-details {display:flex;align-items:center;font-family: 'SFR-Regular';font-size: 12px;line-height: 14px;color: #222222;height: 23px;width: 90px;margin-left: 6px;border-top: solid 1px #d2d2d2;padding-top: 6px;text-align: left;} #Cremaillere .cards .card .top:hover + .bottom .more-details {border-top:0;padding-top: 7px;} #Cremaillere .cards .card input[type="radio"]:checked + .top + .bottom .more-details {border-top:0;padding-top: 7px;} #Cremaillere .cards .card .bottom .more-details:after {content: "";position: absolute;right: 9px;width: 16px;height: 16px;background: url(https://static.s-sfr.fr/media/v2/assets/images/svg/arrow-full.svg);} #Cremaillere .cards .card.open .bottom .more-details:after {transform: rotate(180deg);transition: all .2s ease-out;} #Cremaillere .cards .card .bottom .details {display:none;height:0;} #Cremaillere .cards .card.open .bottom .details {position: absolute;bottom: -77px;border: solid 1px #d2d2d2;width: calc(100% + 2px);height: 77px;left: -1px;border-radius: 0 0 6px 6px;display: flex;align-items: center;z-index: 2;background:#f2f2f2;} #Cremaillere .cards .card .bottom .details:after{content: "";top: 1px;left: 1px;position: absolute;width: calc(100% - 2px);height: calc(100% - 2px);background: #e9e9e9;border-radius: 0 0 6px 6px;z-index: -1;} #Cremaillere .cards .card .bottom .details p {width: 86px;margin: 0 auto;font-family: SFR-Regular;font-size: 10px;line-height: 12px;color: #000000;} #Cremaillere .cards .card.no-price .top {height:100%;border-bottom:solid 1px #d2d2d2;text-align: center;} #Cremaillere .cards .card.no-price input[type="radio"]:checked + label {border-width:2px;} #Cremaillere .cards .card.no-price .top:hover {border-width:2px;} #Cremaillere .cards .card.no-price .top img {margin:24px auto 16px;width:42px;height:30px;} #Cremaillere .cards .card.no-price .top .forfait {font-family: SFR-Black;font-size: 14px;line-height: 14px;color: #222;width:85px;} #Cremaillere .cards .card.no-price .top .reengagement {font-family: SFR-Bold;font-size: 12px;line-height: 14px;color: #222;width:88px;} #Cremaillere .cards .card.no-price .bottom {height:0;} /*N-2*/ [data-binkies-content="hideWhen3DShown"], [data-binkies-content="pageTarget"] > :not([data-binkies-content="root"]):not([data-binkies-content="alwaysVisible"]) {opacity: 1 !important;visibility: visible !important;} .bl_pdt_resume .bl_resume .bl_photo {max-width: 320px;width: 320px;min-width: 200px;flex: 1;position: -webkit-sticky;position: sticky;top: 95px;height: -webkit-max-content;height: -moz-max-content;height: -o-max-content;height: -ms-max-content;height: max-content;max-height:525px;background: #fff;border-radius: 14px;overflow: hidden;padding: 51px 27px 24px 23px;} .bl_pdt_resume .bl_resume .bl_photo .phone_photo .img {min-height: 320px;margin: 0 auto;padding: 0 15px 0 18px;max-width: calc(100% - 61px);height: auto;} .bl_pdt_resume .bl_resume .bl_photo .phone_photo .img img {max-width: 100%;height: auto;margin: 0 auto;} .bl_pdt_resume .bl_resume .bl_photo .img-reconditione {width: 60px;height: 60px;position: absolute;right: 12px;top: 31px;cursor: pointer;display: flex;justify-content: center;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g {width: 75px;height: 42px;position: absolute;left: -5px;top: 39px;border: 1px solid #e9e9e9;border-left: 0;border-radius: 6px;background:#fff;z-index:1;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g p {position: absolute;left: 16px;top: 5px;font-family: Arial;font-size: 10px;font-weight: bold;letter-spacing: 0.2px;color: #222;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g img {margin-top: 19px;position: absolute;left: 16px;} .bl_pdt_resume .bl_resume .promo {width: 100%;background: #f2f2f2;position: absolute;top: 0;left: 0;} .bl_pdt_resume .bl_resume .promo .top {width: 100%;height: 19px;background: transparent;} .bl_pdt_resume .bl_resume .promo .bottom {height: 20px;width: 100%;background: #fff;position: relative;border-top-left-radius: 25px;border-top-right-radius: 25px;border-radius: 25px 25px 0 0;} .bl_pdt_resume .bl_resume .promo .top .bl_promo {border-radius: 14px 8px 14px 14px;background: #ffcd00;display: inline-block;padding: 0 10px 20px;margin-bottom: 12px;position: absolute;} .bl_pdt_resume .bl_resume .promo .top .bl_promo {color: #181818;background-color: #ffcd00;border-radius: 12px;} .bl_pdt_resume .bl_resume .bl_photo .bl_note {display: flex;margin-bottom: 0;margin-top: 32px;align-items: center;flex-flow: column;} .bl_pdt_resume .bl_resume .bl_photo .bl_note .note {margin:0 4px 13px;} .bl_pdt_resume .bl_resume .bl_fiche {min-width:348px; margin: 0 5px;} .bl_pdt_resume .bl_resume .bl_fiche h3 {margin-top: 19px;color: #222;height: 44px;font-family: 'SFR-Black';font-size: 18px;line-height: 22px;} .bl_pdt_resume .bl_resume .bl_fiche h4 {color: #222;font-family: SFR-Bold;font-size: 16px;line-height: 20px;} .bl_pdt_resume .bl_resume .bl_fiche .reconditione {display: block;font-family: SFR-Bold;font-size: 16px;line-height: 22px;color: #32a75e;margin-top: 12px;margin-bottom: 32px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors {margin-bottom:4px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .color_title {font-family: SFR-Bold;font-size: 19px;line-height: 26px;margin-bottom:14px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select {border: 0;display: flex;flex-flow: row wrap;max-width:100%;width: 275px;border-radius: 0 0 16px 16px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select li {padding: 0 22px 36px 0;display: flex;align-items: center;justify-content: center;position: relative;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select li span {width: 18px;height: 18px;border-radius: 100%;border: 1px solid #d2d2d2;cursor: pointer;position: relative;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select li.disabled span {cursor: default;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select li.disabled span:after {content: '';width: 21px;height: 2px;background-color: #222;position: absolute;transform: rotate(135deg);right: -3px;bottom: 7px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity {margin-bottom: 24px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks {display: flex;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks input {display: none;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks input:checked + label {color: #fff;background: #000;border: solid 1px #000;cursor: default;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks input:disabled + label {text-decoration:line-through;color: #9c9e9f;background: #e9e9e9;cursor: default;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks label {display: inline-block;width: 33%;height: 37px;text-align: center;background: transparent;font-family: SFR-Bold;font-size: 16px;line-height: 36px;margin: 0;border: solid 1px #d2d2d2;cursor: pointer;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks label:last-child {border-bottom-right-radius: 4px;border-top-right-radius: 4px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_capacity .checks label:first-of-type {border-bottom-left-radius: 4px;border-top-left-radius: 4px;} .bl_pdt_resume .bl_resume .bl_fiche .unavailable {border-top:0;padding-top:0;padding-bottom:16px; margin-bottom:32px;border-bottom: 1px solid #d2d2d2;} .bl_pdt_resume .bl_resume .bl_fiche .unavailable {font-family: SFR-Regular;font-size: 16px;line-height:16px;color: #444;} .bl_pdt_resume .bl_resume .bl_fiche .unavailable span{font-family:SFR-Bold;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line {display: flex;flex-flow: row wrap;width: 348px;margin-bottom:40px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line input[type=radio] {display: none;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line label {width: 87px;max-width: 87px;min-width: 87px;height: 238px;border: 1px solid #d2d2d2;flex: 1;text-align: center;padding: 1px;cursor: pointer;margin-left: -1px;margin-top: -1px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line label:hover {background: #fff;position: relative;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line input[type=radio]:checked + label {padding: 0;background: #fff;border: none;border-style: solid;border-width: 2px;border-image-source: linear-gradient(149deg, #871d81, #e2001a 100%);border-image-slice: 1;background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(138deg, #871d81, #e2001a 100%);background-origin: border-box;background-clip: content-box, border-box;position: relative;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line input[type=radio] label:hover .top img, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line input[type=radio]:checked + label .top img {filter:grayscale(0);} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line input[type=radio]:checked + label .top .link-space a {display:block;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top p:first-of-type, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .bottom p:first-of-type {font-family: Arial;font-size: 10px;font-weight: bold;letter-spacing: 0.22px;color:#222;text-align:left;padding:9px 0 0 9px ;margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top {position:relative;height:158px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top:after{position:absolute;content:"";width:calc(100% - 18px);height:1px;bottom:0;right:9px;background:#d2d2d2;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .forfait {font-family: SFR-Black;font-size: 14px;text-align: center;color:#222;margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top img {height:20px;filter: grayscale(1);margin-bottom:8px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top.no-price img {width: 42px;height: 30px;margin-top:31px;margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top.no-price .forfait {font-size: 12px;font-family: SFR-Black;text-align: center;padding: 0;margin-bottom:1px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top.no-price .reengagement {font-family: SFR-Bold;font-size: 10px;line-height: 12px;color: #222;width: 83px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .price {font-size: 16px;text-align: center;-webkit-background-clip: unset;background:transparent;-webkit-text-fill-color: unset;color:#222;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .price {font-family: SFR-Bold;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .price span{font-size: 11px;margin-top:1px;display:block;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .link-space {height:28px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .link-space a {display:none;font-family: Arial;font-size: 10px;line-height: 12px;letter-spacing: -0.08px;padding:9px 0 8px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .link-space .link i {width:11px;height:11px;background: center / contain no-repeat url(https://static.s-sfr.fr/media/v2/assets/images/svg/prev-next-red.svg);} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .top .link-space .link.More:hover i {transform: translateX(3px);} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .bottom .price {font-family: SFR-Black;margin-bottom:2px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .bottom .mensualite {font-family: Arial;font-size: 10px;color:#222;line-height: 12px;letter-spacing: 0.2px;text-align: center;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment {display: flex;flex-flow:row wrap;width: 348px;max-width: 100%;margin-bottom:40px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus {display: flex;flex-flow:row wrap;width: 348px;max-width: 100%;margin-bottom:40px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus input, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment input {display: none;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment label {display:flex;flex-flow: column;align-items: center;justify-content: end;border: 1px solid #d2d2d2;flex: 1;text-align: center;cursor: pointer;margin-top: -1px;padding:1px;order: 1;position:relative;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus input[type="radio"]:checked + label, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment input[type="radio"]:checked + label {padding: 0px;background: #fff;border: none;border-style: solid;border-width: 2px;border-image-source: linear-gradient(149deg, #871d81, #e2001a 100%);border-image-slice: 1;background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(138deg, #871d81, #e2001a 100%);background-origin: border-box;background-clip: content-box, border-box;position: relative;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .content-payment {padding:0 0 10px 0;display:flex;flex-flow: column;align-items: center;justify-content:end;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.one-option label {width:100%;border-radius:4px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.two-option label {width:50%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option label {width:33%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.two-option label:first-of-type, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option label:first-of-type {border-top-left-radius:4px;border-bottom-left-radius:4px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.two-option label:nth-last-child(2), .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option label:nth-last-child(2) {border-top-right-radius:4px;border-bottom-right-radius:4px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment label .number-times{font-family: SFR-Bold;font-size: 14px;text-align: center;color: #444444;margin-top:10px;margin-bottom: 6px;width: 100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.one-option label .price {width:100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche label .price {font-family: SFR-Regular;font-weight: normal;font-size: 16px;color: #222;background: transparent;-webkit-text-fill-color: unset;margin-bottom: 2px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment label .mensualite {font-family: SFR-Regular;font-size: 14px;color: #222;padding-left: 6px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment input[type="radio"]:checked + label .price {font-family: SFR-Black;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment input[type="radio"]:checked + label .mensualite {font-family: SFR-Bold;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option label .mensualite {display:block;height:16px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment label .frais {font-family: Arial;font-size: 10px;letter-spacing: 0.2px;color: #222;width: 100%;/*height:11px;margin-bottom:7px;*/} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment label .remboursement {font-family: Arial;font-size: 10px;line-height: 12px;color: #8a8a8a;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.one-option label .remboursement {width:154px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.two-option label .remboursement {width:133px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option label .remboursement {width:92px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment input[type="radio"]:checked + label + .explanation{display:flex;width:100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation{display: none;flex-direction: column;padding:16px 16px;border-radius: 0 0 6px 6px;margin-top: -2px;background-color: #dfdfdf;order: 2;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation .title{font-family: SFR-Bold;line-height: 12px;margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation p {font-family: SFR-Regular;font-size: 11px;margin-bottom:16px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation > .echeance {display: flex;justify-content: space-between;font-family: SFR;font-weight: 700;border-bottom: 1px dotted #222;clear: both;margin: 2px 0 0 0;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation > .echeance ~ .echeance {font-weight: normal;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation .link.Red {margin-bottom: 16px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.one-option .explanation {height:auto;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.two-option .explanation {height:239px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment.three-option .explanation {height:254px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation .echeance span{border: 1px solid #dfdfdf;background: #dfdfdf;margin: 0 0 -5px 0;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation .echeance:not(:last-child) {margin-bottom:6px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment .explanation .total {font-family: Arial;font-size: 10px;line-height: 12px;letter-spacing: 0.1px;text-align: center;color:#222;margin-top:20px;margin-bottom:0;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label {align-items:end;text-align:left;width: 50%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label .content-bonus {padding:16px 14px 62px;display:flex;flex-flow: column;height:100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label .content-bonus .title {font-family: SFR-Bold;font-size: 16px;line-height: 16px;text-align:left;margin-bottom:7px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label .engagement { font-family: SFR-Regular;font-size: 12px;line-height: 16px;color: #898989;margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label p.avantages {font-family: SFR-Regular;font-size: 14px;line-height: 18px;color: #222222;margin-bottom:6px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label p.avantages .mensualite{padding-left:0;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus input[type="radio"]:checked + label p .mensualite, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus input[type="radio"]:checked + label p .price {font-family: SFR-Bold;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label p.avantages:first-of-type {margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus label .link.Red {position:absolute;bottom:18px;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bloc_top {font-family: SFR-Regular;font-size: 14px;color: #444444;margin-bottom: 13px;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .form .form_line {display: flex;flex-direction: column;width: 100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .form .form_line .input {margin-bottom:12px;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .form .form_line .btn {margin-right: 0;margin-left: 0;width: 100%;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .form .form_line .btn span {font-family: SFR-Black;font-size: 13px;font-weight: normal;letter-spacing: 0.7px;text-align: center;color: #fff;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .form .form_line .btn.disabled span {color: #9c9e9f;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input+label i {margin-top:7px;height: 20px;max-width: 20px;min-width: 20px;border: 1px solid #e9e9e9;border-radius: 4px;background-color: #e9e9e9;display: inline-block;cursor: pointer;vertical-align: middle;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input[type=checkbox]:not(old):checked+label i {background-image:none;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input+label span {font-family: SFR-Regular;font-size: 13px;font-weight: normal;line-height: 1.31;color: #444444;margin-top:0;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input[type=checkbox]:not(old):checked+label i {width: 20px;height: 20px;border: 0;background-color: #7fc100;position: relative;display: inline-block;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input[type=checkbox]:not(old):checked+label i:after {content: '';width: 14px;height: 14px;position: absolute;top: 3px;right: 0;left: 0;margin-right: auto;margin-left: auto;margin-bottom: auto;margin-top: auto;background: url(//static.s-sfr.fr/media/icono-ui-check.svg) center / contain no-repeat,#7fc100;} .bl_pdt_resume.TV .bl_resume .bl_fiche bol-phone-unavailable .bl_checkbox input[type=checkbox]:not(old):checked+label span {font-family:SFR-Bold;} .bl_pdt_resume .bl_resume .bl_proposition {min-width:210px;flex: 1;flex: 1;position: -webkit-sticky;position: sticky;top: 95px;height: -webkit-max-content;height: -moz-max-content;height: -o-max-content;height: -ms-max-content;height: max-content;} .bl_pdt_resume .bl_resume .bl_proposition.best-price{padding-top:13px;} .bl_pdt_resume .bl_resume .summary .promo .bottom {height: 33px;} .bl_pdt_resume .bl_resume .summary .promo .top {height: 32px;} .bl_pdt_resume .bl_resume .summary .promo {top: -13px;} .bl_pdt_resume.TV .bl_resume .summary .bl_promo p {font-family: SFR;font-size: 10px;line-height: 16px;font-weight: 700;color: #000;display: inline-block;text-transform: uppercase;padding-left: 10px;padding-top:2px;} .bl_pdt_resume.TV .bl_resume .summary .bl_promo p:nth-child(odd) {padding-right:0;} .bl_pdt_resume.TV .bl_resume .bl_proposition .bl_configurateur .phone_plan {height:auto;} .bl_pdt_resume.TV .bl_resume .summary {position:relative; background:transparent;background-color:#e9e9e9;padding: 0;border-radius:14px;} .bl_pdt_resume.TV .bl_resume .summary .part1 {padding: 32px 24px 21px;background:#fff;border-radius:14px;} .bl_pdt_resume.TV .bl_resume .summary .part2 {padding: 15px;background-color:#e9e9e9;border-bottom-left-radius:14px;border-bottom-right-radius:14px;} .bl_pdt_resume.TV .bl_resume .summary .part2 .desc {font-size: 12px;font-family: Arial;} .bl_pdt_resume.TV .bl_resume .summary:before {content: "";width: 0;display: block;position: absolute;height: 0;border-style: solid;border-width: 15px 0 15px 15px;border-color: transparent transparent transparent #f2f2f2;left: 0;top: 31px;z-index:1;} .bl_pdt_resume.TV .bl_resume .bl_proposition.best-price .summary:before {top: 46px;} .bl_pdt_resume.TV .bl_resume .summary h3 {text-align: center;} .bl_pdt_resume.TV .bl_resume .summary h3:first-child {margin-bottom: 30px;} .bl_pdt_resume.TV .bl_resume .summary h2 {font-family: SFR-Black;font-size: 21px;text-transform: none;text-align: center;margin-bottom: 12px;display: block;} .bl_pdt_resume.TV .bl_resume .summary p {font-family: SFR-Regular;font-size: 13px;margin-bottom: 11px;position:relative;text-align: left;} .bl_pdt_resume.TV .bl_resume .summary .part2 p:nth-child(odd) {padding-right: 10px;} .bl_pdt_resume.TV .bl_resume .summary .subtitle {position: relative;display: flex;justify-content: space-between;align-items: end;font-family: SFR-Black;font-size: 16px;line-height: 22px;color:#222;flex-flow: row wrap;} .bl_pdt_resume.TV .bl_resume .summary .subtitle span bol-price {font-family: SFR-Black;font-size: 16px;line-height: 22px;color:#222;} .bl_pdt_resume.TV .bl_resume .summary .subtitle span {max-width: 175px;display: block;} .bl_pdt_resume.TV .bl_resume .summary .subtitle span bol-price{max-width: 175px;display: block;} .bl_pdt_resume.TV .bl_resume .summary .subtitle-desc {display:flex;flex-flow:column;font-family: SFR-Regular;font-size: 14px;line-height: 16px;color:#222;} .bl_pdt_resume.TV .bl_resume .summary .subtitle-desc span {display: block;margin-bottom:3px;} .bl_pdt_resume.TV .bl_resume .summary .ecoparticipation {font-family: Arial;font-size: 13px;line-height: 15px;color: #8a8a8a;margin-bottom: 8px;} .bl_pdt_resume.TV .bl_resume .summary .ecoparticipation sup {font-family: Arial;font-size: 11px;line-height: 15px;} .bl_pdt_resume.TV .bl_resume .summary .price-client {display:flex;flex-flow:column;align-items:center;justify-content:center;width: 272px;max-width:100%;height: 30px;border-radius: 4px;background-color: #e9e9e9;margin-top: 16px;margin-bottom: 7px;} .bl_pdt_resume.TV .bl_resume .summary .price-client p {font-family: SFR-Regular;font-size: 8px;color:#222;margin-bottom:0;text-transform: uppercase;} .bl_pdt_resume.TV .bl_resume .summary .price-client p:first-of-type{font-family: SFR-Bold;font-size: 10px;} .bl_pdt_resume.TV .bl_resume .summary .price {font-family: SFR-Bold;font-size: 14px;color: #222222;background: transparent;-webkit-text-fill-color: unset;display: flex;justify-content: space-between;flex-flow: row wrap;} .bl_pdt_resume.TV .bl_resume .summary .price p {font-family: SFR-Bold;font-size: 14px;color: #222222;background: transparent;-webkit-text-fill-color: unset;text-align: left;} .bl_pdt_resume.TV .bl_resume .summary .cta {border-radius: 4px;} .bl_pdt_resume.TV .bl_resume .summary a.btn {width: 100%;position:relative;font-size:13px;} .bl_pdt_resume.TV .bl_resume .summary .sep {padding: 16px 0 8px;} .bl_pdt_resume.TV .bl_resume .summary .sep:not(:first-of-type) {border-top: solid 1px #d2d2d2;} .bl_pdt_resume.TV .bl_resume .summary .sep:last-child {padding-bottom: 0;} .bl_pdt_resume.TV .bl_resume .summary .sep:first-child {padding-top: 0;} .bl_pdt_resume.TV .bl_resume .summary .part2 .desc {display: flex;justify-content: space-between;font-size: 12px;font-family: Arial;line-height:16px;letter-spacing: -0.18px;} bol-internet-eligibility-block .bl_eligibility.migration .bl_test_elig, bol-internet-eligibility-block .bl_eligibility.migration .bl_test_error {width: 100%;min-width: 100%; height: auto;min-height:auto;} bol-internet-eligibility-block .bl_eligibility.migration .bl_test_elig .bl_content, bol-internet-eligibility-block .bl_eligibility.migration .bl_test_error .bl_content {padding:20px 24px 24px} bol-internet-eligibility-block .bl_eligibility.migration bol-eligibility-address {margin:0;} bol-internet-eligibility-block .bl_eligibility.migration .bl_test_elig .bl_content p, bol-internet-eligibility-block .bl_eligibility.migration .bl_test_error .bl_content p {margin-bottom:12px;} bol-internet-eligibility-block .bl_eligibility div.form {max-width:818px;} bol-internet-eligibility-block .bl_eligibility .wrapper, bol-internet-eligibility-block .bl_eligibility.cl_result .wrapper {padding:24px 0;} bol-eligibility-result .bl_result .part1 .deploiement { font-family: SFR-Bold;font-size: 16px;color: #222222;text-transform: uppercase;display: flex;margin-top:4px} bol-eligibility-result .bl_result .part1 .deploiement > span { margin-bottom: 10px;} bol-eligibility-result .bl_result .part1 .deploiement a { width:148px; height:40px;padding:0;font-family: SFR-Black;font-size: 10px;line-height: 14px;letter-spacing: 0.1px;text-align: center;color: #ffffff;margin: 0 0 0 24px;align-self: flex-end;} bol-eligibility-result .bl_result .bieligible, bol-eligibility-result .bl_result .raccordement {width: 100%} bol-internet-eligibility-block .bl_eligibility .bl_test_elig .bl_content, bol-internet-eligibility-block .bl_eligibility .bl_test_error .bl_content {width: 100%} bol-fixe-offer-list .wrapper .list_offers.sl > li {max-width: calc(100% / 3 - 16px);margin: 12px 8px;} bol-fixe-offer-list .wrapper .list_offers.sl .bl_promo {color: #181818;background-color: #ffcd00;} bol-fixe-offer-list .wrapper .list_offers.sl .content {position:relative;display: flex;justify-content: center;padding: 15px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option {display: flex;flex-direction: column;align-items: center;width:214px;max-width: 214px;position: relative;width: 214px;border-radius:20px;border: solid 1px #8a8a8a;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option.active {border:none;border-style: solid;border-width: 2px;border-image-source: linear-gradient(138deg, #871d81, #e2001a 100%);border-image-slice: 1;background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(138deg, #871d81, #e2001a 100%);background-origin: border-box;background-clip: content-box, border-box;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option:nth-child(2) {margin-left: 15px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option.active:after {content: "";background: linear-gradient(to right, #871d81 0%, #e2001a 100%);display: block;height: 24px;width: 2;position: absolute;bottom: -24px;} bol-fixe-offer-list .wrapper .list_offers.sl .phone_plan {max-width:500px;} bol-fixe-offer-list .wrapper .list_offers.sl .phone_plan .bl_title {background: transparent;padding: 15px 20px 9px;text-align: center;} bol-fixe-offer-list .wrapper .list_offers.sl .phone_plan .bl_title h3{color:#222;} bol-fixe-offer-list .wrapper .list_offers.sl .content:after {content: "";background: linear-gradient(to right, #871d81 0%, #e2001a 100%);display: block;height: 2px;width: calc(100% - 48px);position: absolute;bottom: -8px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option>* {margin: 0 10px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option img {height: 76px;width: auto;max-width: 90px;margin-top:7px;margin-bottom: 7px;align-self: center;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .title {font-family: SFR-Bold;text-align: center;text-transform: uppercase;font-size: 18px;margin-top: 3px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .desc {height: 65px;font-size: 13px;line-height: 15px;letter-spacing: -0.2px;text-align: center;font-family: SFR-Regular;margin-bottom: 20px;position: relative;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .desc:after {content: '';position: absolute;bottom: -20px;left: 0px;height: 1;width: 100%;background: #8a8a8a;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option.active .desc:after {content: '';position: absolute;bottom: -20px;left: 0px;height: 1;width: 100%;background: linear-gradient(to right, #871d81 0%, #e2001a 100%);} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .forfait {font-family: SFR-Bold;font-size: 18px;line-height: 22px;margin: 12px auto 4px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .forfait span{font-size: 24px;} bol-fixe-offer-list .wrapper .list_offers.sl .content .option .engagement {font-family: SFR-Regular;font-size: 10px;line-height: 11px;text-align: center;margin-bottom: 16px;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info {display: flex;padding: 0 30px;margin-bottom:16px;justify-content:center;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .info {flex: 1;max-width: 134px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .infographie {margin-top: 28px;height: 28px;display: flex;justify-content: center;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .info .desc {font-family: SFR-Regular;font-size: 10px;line-height: 12px;max-width: 88px;text-align: center;margin: 9px 0 0;width: 100%;text-align: center;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .infographie p {font-family: SFR-Bold;font-size: 10px;line-height: 17px;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .infographie p span{font-size: 22px;} bol-fixe-offer-list .wrapper .list_offers.sl .more-info .infographie img {height: 28px;} bol-fixe-offer-list .wrapper .list_offers.sl .links{display: flex;flex-direction: column;justify-content: center;} bol-fixe-offer-list .wrapper .list_offers.sl .links .btn {width: calc(100% - 40px);margin: 0 auto 15px;} .btn.black { border: solid 1px #222;background-image: none;color:#222;} .btn.black:not(.disabled):hover {background-position: 100% center;box-shadow: 0 4px 8px rgba(34,2,0,.4);transition: all 0.2s ease-out;} /*Tablet*/ @media (max-width: 1100px) { #Filtres .body .content {padding: 0 40px 27px 20px;} #Filtres .body .content .left {max-width: 38%;} #Filtres .body .content .right .state, #Filtres .body .content .right .price-block {width: 38%;} #Filtres .body .content .right .inline-inputs{width: 21%;} } /*Mobile*/ @media (max-width: 768px) { #Filtres {max-width: calc(100%);margin:25px auto;} #Filtres .header{display: none;} #Filtres .body {border-radius: 10px;box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.13), 0 -1px 6px 1px rgba(24, 24, 24, 0.04);} #Filtres .body .top {flex-direction: column;padding: 24px 14px;} #Filtres .body .bottom {display:block;} #Filtres .body .bottom.hide {display:none;} #Filtres .body .btn.mobile{display:flex;width:100%;} #Filtres .body .top .btn.mobile{margin-top:36px;} #Filtres .body .top .tags {padding: 16px 0px;margin-bottom: 0;max-width: 100%;} #Filtres .body .top .reinit {padding: 12px;justify-content:center;} #Filtres .body .top .reinit.hide {display:none} #Filtres .body .top .reinit.empty-tags.hide {display:none} #Filtres .body .top .tags.hide {display:none;} #Filtres .body .top .btn.mobile.hide{display:none;} #Filtres .body .top .tags, #Filtres .body .top .reinit{width: 100%;border-bottom:1px solid #d2d2d2;} #Filtres .body .top .tags:after, #Filtres .body .top .reinit:after{display: none;} #Filtres .body .top .Expand {position: absolute;right: 24px;top: 15px;width: calc(100% - 48px);justify-content: space-between;padding: 0;margin: 0;} #Filtres .body .top .Expand span:not(.mobile) {display: none;} #Filtres .body .top .Expand span.mobile {display: inline-block;font-family: SFR-Bold;font-size: 16px;color: #222222;} #Filtres .body .content {padding: 0 25px 0;flex-flow: column;} #Filtres .body .content .left {width:100%;max-width:100%;padding-right: 0;margin-top: 0;} #Filtres .body .content .right {width: 100%;flex-flow: column;} #Filtres .body .content .right > div {width:100%;height:auto;margin-right: 0;margin-top: 8px;} #Filtres .body .content .right .price-block, #Filtres .body .content .right .color, #Filtres .body .content .right .state, #Filtres .body .content .right .stockage, #Filtres .body .content .right .inline-inputs {width: 100%;max-width: 100%;} #Filtres .body .content .right .color {width: calc(100% + 20px);max-width:calc(100% + 20px);} #Filtres .body .content .right input[type="checkbox"] + label {min-width: 150px;max-width: 100%;width: 100%;} #Filtres .body .content .right .color .c {display: flex;flex-flow: row wrap;align-items: center;margin-left: -25px;padding-left: 7px; max-width:100%} #Filtres .body .content .right .color .c input[type="checkbox"] + label {min-width: auto;margin-left: 0;padding-left:0;margin-right: 0;} #Filtres .body .content .color .c input[type="checkbox"] + label {margin-bottom:35px;} #Filtres .body .content .right .color .c input[type="checkbox"] + label {margin-left:25px;} #Filtres .body .content .right .color .c:nth-child(3){margin-bottom:30px;width:83%;} #Filtres .body .content .right .state input[type="checkbox"] + label:not(:last-child), #Filtres .body .content .right .stockage input[type="checkbox"] + label:not(:last-child), #Filtres .body .content .right .inline-inputs input[type="checkbox"] + label:not(:last-child), #Filtres .body .content .right .price-block input[type="checkbox"] + label:not(:last-child) {border-bottom: 1px solid #f2f2f2;margin-bottom: 16px;padding-bottom: 35px;} #Filtres .body .content:before {display:none;} #Filtres .body .content input[type="checkbox"] + label {margin-right: 0;margin-bottom:31px;} #Filtres .body .content input[type="checkbox"] + label {padding-left: 7px;} #Tri {border-radius: 10px;box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.13), 0 -1px 6px 1px rgba(24, 24, 24, 0.04);max-width: calc(100%); margin:25px auto;} #Tri .selector {width: 100%;} #Tri select {width: 100%;background: #fff;color: #222;text-transform: none;font-family: 'SFR-Bold';font-size: 16px;min-height: 48px;width: 100%;border-radius: 10px;} #Tri:after {display: none;} #Tri .selector:after {background: url(https://static.s-sfr.fr/media/newsfrfr/fut/assets/images/svg/arrow-full.svg);border: none;transform: unset;width: 16px;height: 16px;top: 0;bottom: 0;right: 24px;margin-top: auto;margin-bottom: auto;pointer-events: none;} bol-mobile-list-block .bl_PhoneList .PhoneList .card_wrapper {max-width: 310px;min-width: 310px;margin: 16px auto;} .mobile_card .bl_phone {height: auto;} .bl_PhoneList .PhoneList {flex-direction: column;align-items: center;} .ForfaitList>li {min-width: 310px;max-width: 310px;margin: 12px auto;} .phone_plan {height: auto;} .phone_plan.quatreg:before {content: "";position: absolute;top: 0;right: 0;background-size: 60px 18px, cover;background: url('//static.s-sfr.fr/media/4-g-white1.svg') center no-repeat, url(//static.s-sfr.fr/media/rectangle-mobile-bleu.png) no-repeat;width: 68px;height: 62px;z-index: 1;} .phone_plan.cinqg:before {content: "";position: absolute;top: 0;right: 0;background-size: 60px 18px, cover;background: url('//static.s-sfr.fr/media/5-g-blanc1.svg') center no-repeat, url(//static.s-sfr.fr/media/rectangle-mobile-rouge.png) no-repeat;width: 68px;height: 62px;z-index: 1;} .phone_plan.cinqg:after {width: 6px;height: 100%;background:url('//static.s-sfr.fr/media/lisere-rouge.png') no-repeat bottom;content: "";position: absolute;right: 0;bottom:0;} .phone_plan.quatreg:after {width: 6px;height: 100%;background: url('//static.s-sfr.fr/media/lisere-bleu.png') no-repeat bottom;content: "";position: absolute;right: 0;bottom:0;} .bloc_SubTitle .wrapper h2 {text-align: center;display: block;} .bloc_SubTitle {padding: 0px 7px !important;} bol-fixe-offer-list .wrapper {padding-bottom: 16px;} bol-fixe-offer-list .wrapper .list_offers>li {max-width: inherit;margin: 8px 15px;} .phone_plan {margin: 0 auto;max-width: 100%;} #Edito {box-shadow: unset;justify-content: center;background:transparent;padding: 0;margin-top: 24px;} #Edito .L{display:none;} #Edito .R {width: 334px;flex-direction: column;max-width: 100%;margin: auto;} #Edito .R .reseau {display:flex;flex-flow:row wrap;background:#fff;width: 100%;height: 116px;border-radius: 14px;box-shadow: 0 8px 16px 0 rgba(24, 24, 24, 0.1), 0 -1px 6px 1px rgba(24, 24, 24, 0.04);flex-direction: row-reverse;justify-content: space-around;} #Edito .R .reseau .text {text-align:left;} #Edito .R .reseau .text p {text-align:left;} #Edito .R .reseau:nth-child(1) {margin: 15px auto 0;order: 2;} #Edito .R .reseau:nth-child(2) {margin-left: auto;margin-right: auto;} #Edito .R .reseau bol-link a.mobile {display:block;margin-bottom: 8px;} #Edito .R .reseau img {margin-bottom:0} .bloc_SubTitle {padding: 0px 7px !important;} #Cremaillere p.title {margin: 0 9px 24px;text-align:center;} #Cremaillere p.desc {margin: 0 auto 31px;width: 312px;max-width:100%;} #Cremaillere {max-width: calc(100%);margin: 25px 0;} #Cremaillere .cards { margin: 0 auto;width:306px;} #Cremaillere .cards .card {width: 103px;height: 235px;margin: 0 1px 0 0;padding-top: 1px;max-width:33%;} #Cremaillere .cards .card .bottom {height: 42px;} #Cremaillere .cards .card .top:hover + .bottom .more-details, #Cremaillere .cards .card input[type="radio"]:checked + .top + .bottom .more-details {padding-top: 13px;} #Cremaillere .cards .card .bottom .more-details {height: 31px;padding-top: 12px;width: calc(100% - 8px);margin-left: 4px;} #Cremaillere .cards .card .bottom .more-details:after {right: 4px;} #Cremaillere .cards .card.open {margin-bottom: 75px;} .bl_pdt_resume .bl_resume .bl_photo {padding: 51px 24px 32px;position: relative !important;top: inherit;height: inherit;width: auto;max-width: inherit!important;margin: 0 18px 32px;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g {width: 57;height: 42px;position: absolute;left: -5px;top: 39px;border: 1px solid #e9e9e9;border-left: 0;border-radius: 6px;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g p {position: absolute;left: 8px;top: 5px;font-family: Arial;font-size: 8px;font-weight: bold;letter-spacing: 0.2px;color: #222;} .bl_pdt_resume .bl_resume .bl_photo .compatibility-5g img {margin-top: 19px;position: absolute;left: 8px;width: 39px;height: 13px;} .bl_pdt_resume .bl_resume .bl_photo .img-reconditione {width: 45px;height: 45px;} .bl_pdt_resume .bl_resume .bl_photo .promo .bottom {height: 22px;} .bl_pdt_resume.TV .bl_resume .bl_fiche {max-width: calc(100% - 32px);min-width: auto;margin: 0 18px 32px;} .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_cremaillere .line {width:auto;} .bl_pdt_resume .bl_resume .bl_fiche h4, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_payment, .bl_pdt_resume.TV .bl_resume .bl_fiche .bl_bonus {width: 100%;} .bl_pdt_resume.TV .bl_resume .summary {margin: 0 18px 32px;} .bl_pdt_resume.TV .bl_resume .summary:before {content: "";width: 0;display: block;position: absolute;height: 0;border-style: solid;border-width: 15px 0 15px 15px;border-color: transparent transparent transparent #f2f2f2;right: 0;left: 0;top: -8px;margin-right: auto;margin-left: auto;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);} .bl_pdt_resume.TV .bl_resume .summary .part1 {padding: 32px 16px 24px;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select {width:auto;} .bl_pdt_resume .bl_resume .bl_fiche .bl_colors .list_select li {padding: 0 28px 36px 0;width:auto;} bol-internet-eligibility-block .bl_eligibility.migration .bl_test_elig, bol-internet-eligibility-block .bl_eligibility.migration .bl_test_error { border-radius:10px} bol-internet-eligibility-block .bl_eligibility.migration .bl_test_elig .bl_content, bol-internet-eligibility-block .bl_eligibility.migration .bl_test_error .bl_content {padding:16px;max-width: 100%;} bol-eligibility-result .bl_result .part1 .deploiement {max-width: 100%;margin: 16px 0 8px 0;flex-direction: column;} bol-eligibility-result .bl_result .part1 .deploiement a {align-self: auto;margin: 0} bol-fixe-offer-list .wrapper .list_offers.sl> li {max-width: inherit;margin: 5px 8px;} } /*TEMPORAIRE*/ #bl_recommandation div.bl_price > bol-price {border-color: #fff;-webkit-text-fill-color: #fff;font-size: 21px;font-weight: 700;} .recommandations_bloc .list_recommandations .elem_recommandations .bl_recommandation>.wrapper {padding: 12px 12px 20px 12px;}