body {width: 100%;overflow-x: hidden;font: normal normal 14px SFR-Regular,Arial,sans-serif;scroll-behavior: smooth;background: var(--clr-bg);font-weight:normal;} .bl_promo {border-radius: 8px;background: var(--clr-yellow);color: var(--clr-black);display: inline-block;padding: 5px 10px 20px;position: absolute;top: 0;font-size: 12px;line-height: 11px;font-family: SFR-Bold;} .Media .btn4{color:#fff;background:var(--clr-black);border:solid 1px #fff;box-shadow:0 0 12px rgba(24,24,24,0.16)} .Media .btn4:active{box-shadow:0 0 12px rgba(24,24,24,0.16)} .Media .btn:hover {box-shadow: 0 4px 8px rgb(217 13 37 / 32%);} button[class^="btn"]:hover{background-color:var(--clr-sfr)} button.btn:hover,button.btn:hover{background-color:var(--clr-sfr)} button.btn2:hover,button.btn2:hover{background-color:#3F3F46;} button.btn4:hover,button.btn4:hover{color:#3F3F46;border:solid 1px #3F3F46;background: unset;} button.btn4{background: transparent} button[class^="btn"].loader{background:var(--clr-disable);box-shadow:unset;border:var(--clr-disable);cursor:default} button[class^="btn"].loader:before{content:'';position:absolute;width:100%;height:100%;background:var(--clr-disable);left:0;top:0} .selector:focus-within {outline: 2px solid #181818;outline-offset: 2px;} .selector select:focus-visible , .selector label:focus-visible {outline: 0;} .Media button:focus-visible,.Media input:focus-visible,.Media input[type="radio"]:focus-visible + label,.Media input[type="checkbox"]:focus-visible + label:before, .Media span[role="button"]:focus-visible,.Media div[tabindex="0"]:focus-visible,.Media textarea:focus-visible,.Media summary:focus-visible,.Media a:focus-visible, .Media .selector:focus-within {outline: 2px solid #fff;outline-offset: 2px;} .generic-bonus {display: inline-block;font-family: 'SFR-Black';font-size: 14px;line-height: 10px;background: url(//static.s-sfr.fr/media/pictos/mobile/bonus.svg);border-radius: 4px;width: 126px;height: 32px;text-align: right;padding: 6px 6px 0 0;margin-top: 16px;cursor:pointer;} .expand-bloc {position:relative;font-size: 14px;line-height: 14px;cursor: pointer;text-align: right;display: inline-table;padding-right: 22px;text-align: left;} .expand-bloc:after {transition: all 0.2s ease-out;position: absolute;right: 6px;top: -3px;bottom:0;margin:auto;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;content: '';height: 8px;transform: rotate(135deg);width: 8px;} input:checked + .expand-bloc:after,.expand-bloc.active:after {transform: rotate(-45deg);top:6px;} .Media details.faq {color: var(--clr-black);} .Media #FilAriane li:not([aria-current="page"]):after {filter: invert(1);} .Media .selector select{color: #fff} .Media .selector option {background: var(--clr-black);color: #fff} /*BASE a changer*/ h4,.h4,.h6 {display: block;font: normal 16px/24px SFR-Bold;margin: 0} .link.d {position: relative;font: normal 14px/18px SFR-Bold;padding: 0 13px 0 0;cursor: pointer} .link.d:after {position: absolute;display: inline-block;content: "";background: url("//static.s-sfr.fr/assets/pictos/telechargement_40_rouge.svg");width: 16px;height: 16px;top: 0;right: -8px;background-repeat: no-repeat;background-size: contain;} b {font-family: SFR-Bold;font-weight: normal;} strong {font-family: SFR-Bold;font-weight: normal;} .price .t {font: normal 24px/30px SFR-Bold;grid-area: b;} body {min-width: 320px;width: 100%;overflow-x: hidden;font: normal normal 14px SFR-Regular,Arial,sans-serif;scroll-behavior: smooth;color: var(--clr-black);background: var(--clr-bg) } body a {color: var(--clr-black) } .Media #FilAriane a {color: #fff } /* MB CLS */ #Forfaitsmobile { min-height: 600px; } /* MB CLS */ #noOffer{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-family:SFR-Regular;font-size:14px;line-height:20px;text-align:center;color:var(--clr-black)} #noOffer img{margin:auto;width:40px} #noOffer .text{margin-top:16px} #noOffer .btn.toAdd{margin-top:24px} #noOffer .link{font-size:14px;text-decoration:underline} /*Expression de prix*/ #BlocTop{padding:8px 0 0;} #BlocTop h1{text-align:center;margin-top:24px;} #BlocTop .subtitle{display: table;margin: 0 auto;color: var(--clr-black);font: normal 16px/24px SFR-Bold;text-decoration: none;} #mobileListPageTitle { min-height: 124px; } .wrapper {max-width:1280px;width:calc(100% - 64px);margin:40px auto 0;position: relative;} .wrapper h2 {margin-bottom:24px;} .wrapper .subtitle {margin: -20px 0 24px;} .bold{font-family:SFR-Bold;font-weight:normal;} .selector {position:relative;cursor:pointer;border-radius:8px;border:solid 1px #6E6E73;margin:0 auto;height:40px;line-height:40px;padding:0 16px;background:#fff;} .selector:after {content:'';position:absolute;width:8px;height:8px;border:2px solid var(--clr-black);transform:rotate(45deg);top:0;bottom:0;margin:auto;right:8px;border-top:0;border-left:0;transition:all 0.2s ease-out;} .selector select {height: 40px;font: normal 14px/22px SFR-Bold;border: 0;background: transparent;-moz-appearance: none;-webkit-appearance: none;} .tabs{position:relative;display:flex;min-height: 40px;justify-content: center;overflow-x: auto;overflow-y: hidden;-ms-overflow-style: none;scrollbar-width: none;scroll-behavior: smooth;scroll-snap-type: x mandatory;} .tabs .tab {position:relative;display: grid;align-items: center;word-break: keep-all;min-width: fit-content;font-size: 14px;line-height: 22px;padding: 8px 24px;border: 1px solid var(--clr-black);color:var(--clr-black);cursor: pointer;font-family:SFR-Regular;background:#fff;overflow:hidden;text-align:left;} .tabs .tab:nth-child(2){border-radius:8px 0 0 8px} .tabs .tab:nth-last-of-type(2){border-radius:0 8px 8px 0;} .tabs .tab:nth-child(2):nth-last-of-type(2) {border-radius: 8px;border: 1px solid var(--clr-black)} .tabs .tab.active{color:#fff;background:var(--clr-black);border:solid 1px var(--clr-black);cursor:default} .tabs .tab:focus-visible {outline: 0;outline-offset: 0;} .tabs .tab:focus-visible:before {content: "";position: absolute;width: calc(100% - 4px);height: calc(100% - 4px);border: 2px solid #181818;left: 0px;top: 0px;overflow: hidden;} .tabs .tab:focus-visible:after {content: "";position: absolute;width: calc(100% - 6px);height: calc(100% - 6px);border: 2px solid #fff;left: 1px;top: 1px;overflow: hidden;} .tabs img {width: 16px;height: auto;} .tabs :disabled img{filter: opacity(0.5);cursor:default;} .tabs .right {position: sticky;right: -1px;top: 0;bottom: 0;background:#fff;cursor:pointer;margin-left:2px;} .tabs .left {position: sticky;left: -1px;top: 0;bottom: 0;background:#fff;cursor:pointer;} .tabs .hidden {display:none;} .tabs .link {position: sticky;display: flex;align-items: center;margin-left: 8px;} .open-reprise ,.toggle + label {position: relative;display: flex;align-items:center;gap:4px;center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: pointer;transition: 0.4s ease;border-radius: 60px;margin-top: 16px;} .open-reprise .t,.toggle + label .t {position:relative;min-width:40px;min-height:20px;margin-left:auto;background:transparent;} .open-reprise .t:before ,.toggle + label .t:before {content: "";position: absolute;display: block;transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);height: 20px;width: 40px;top: 0;left: 0;border-radius: 16px;background: #A0A0A0;} .open-reprise .t:after ,.toggle + label .t:after {content: "";position: absolute;display: block;transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);background: #fff;height: 16px;width: 16px;top: 2px;left: 2px;border-radius: 32px;} .open-reprise img ,.toggle + label img {max-width: 40px;height: auto;margin-right: 12px;} .open-reprise.loader:after ,.toggle + label.loader:after {background: transparent;} .open-reprise .t.active:before, .toggle:checked + label .t:before {background: #02C39A;transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);} .open-reprise .t.active:after ,.toggle:checked + label .t:after {left: 22px;} .sticker.j{/*display: inline-block;border-radius: 4px;padding: 2px 8px;font-size: 12px;font-family: 'SFR-Bold';line-height: normal;max-width:calc(100% - 32px);background:var(--clr-yellow);color:var(--clr-black)*/} .sticker.b{/*display: inline-block;border-radius: 4px;padding: 2px 8px;font-size: 12px;font-family: 'SFR-Bold';line-height: normal;max-width:calc(100% - 32px);background: var(--clr-green);color:#fff;*/} .sticker.n{display: inline-block;border-radius: 4px;padding: 2px 8px;font-size: 12px;font-family: 'SFR-Bold';line-height: normal;max-width:calc(100% - 32px);background: #181818;color:#fff;} .sticker.e{display: inline-block;border-radius: 4px;padding: 2px 8px;font-size: 12px;font-family: 'SFR-Bold';line-height: normal;max-width:calc(100% - 32px);} .checkbox {cursor:pointer;position:relative} .checkbox:before {content:'';background-color:#fff;display:inline-block;position:relative;vertical-align:middle;cursor:pointer;margin-right:8px;border:1px solid #8a8a8a;width:20px;height:20px;background-color:#fff;border-radius:4px;} input:checked + .checkbox:before{ background-color:var(--clr-green);border-color:var(--clr-green);;} input:checked + .checkbox:after{ content:'';width:6px;height:12px;border:1px solid #fff;transform:rotate(45deg);border-top:none;border-left:none;left:7px;top:2px;display:block;position:absolute;} input:checked + .checkbox {font-family:'SFR-Bold';} .carte-offres .stickers, .carte-offre .stickers{display: flex;gap: 8px;flex-wrap: wrap;align-items: flex-start;} .carte-offres .sticker{line-height:24px;font-family:'SFR-Bold';font-size: 12px;background:var(--clr-yellow); color:var(--clr-black);border-radius:4px;padding:0 8px;} .carte-offres .sticker.j{background:var(--clr-yellow);color:var(--clr-black);} .carte-offres .sticker.b{background: var(--clr-green);color:#fff;} .carte-offres .sticker.n{background: var(--clr-black);color:#fff;} .carte-offres .sticker.e{background: var(--clr-event);color:var(--clr-black);} .tabs .right, .tabs .left, .tabs .tab:not(:nth-last-child(2)) {margin-right: -1px;} .tabs.g .tab:not(.active) , .tabs.g .right , .tabs.g .left {background:var(--clr-bg);margin-right:-1px;} #Eligibility {position: relative;width: 100%;margin: 40px auto 0;z-index: 1;padding: 24px;display: flex;gap: 40px;justify-content: center;align-items: center;min-height: 201px;} #Eligibility .connect{position: relative;background:#fff;z-index: 5;padding:24px;border-radius:12px;display:grid;gap:8px;min-width: 240px;width: 400px;max-width: 100%;justify-content: center;align-content: center;min-height:192px;} #Eligibility .connect .desc{margin-bottom:8px;} #Eligibility .connect .st {font: normal 14px / 22px SFR-Bold;position: relative;display: inline;vertical-align: middle;text-align:center;} #Eligibility .help {position: relative;background: #fff;z-index: 5;padding: 24px;border-radius: 12px;display: grid;gap: 8px;width: 400px;max-width: 100%;justify-content: center;align-items: center;text-align: center;min-height:327px;} #Eligibility .help .title{font:normal 24px/36px SFR-Bold;margin-bottom:8px;} #Eligibility .help img,#Eligibility .help .btn2{width: fit-content;margin:0 auto;} #Eligibility .help ul{margin: 16px auto 8px;text-align: left;list-style: disc;padding-left:17px;} bop-mobile-list-block {position: relative;} bol-mobile-order-list {position: sticky;top: 64px;max-width: calc(100% - 64px);width: 1280px;display: block;height: 40px;margin: auto;z-index: 3;height: 0;} #ChoixOffreSpeciale{justify-content: center;} #ChoixEngagement {position: sticky;top: -8px;padding: 24px 0 16px;margin: -24px auto;justify-content: left;width: 1280px;max-width: calc(100% - 64px);background: var(--clr-bg);z-index: 2;} #FiltersBlock {position: relative;margin: 32px auto 40px;width: 1280px;max-width: calc(100% - 64px);} #FiltersBlock .rs {display:grid;grid-template-rows:auto auto auto auto auto auto;grid-auto-flow:column;gap:16px;} #FiltersBlock .ls {border-right:1px solid var(--clr-disable);padding-right:16px;} #FiltersBlock .ls a {position:relative;font-size:12px;line-height:18px;width:135px;height:52px;color:var(--clr-black);text-decoration:none;border:1px var(--clr-disable) solid;display:block;border-radius:8px;margin-bottom:8px;padding:8px 0 0 48px;} #FiltersBlock .ls .apple:before {position:absolute;content:"";left:8px;top:0;bottom:0;margin:auto;width:32px;height:32px;background:url(//static.s-sfr.fr/media/mobile/apple-logo-32.svg);} #FiltersBlock .ls .samsung:before {position:absolute;content:"";left:8px;top:0;bottom:0;margin:auto;width:32px;height:32px;background:url(//static.s-sfr.fr/media/mobile/samsung-logo-32.svg);} #FiltersBlock .ls .xiaomi:before {position:absolute;content:"";left:8px;top:0;bottom:0;margin:auto;width:32px;height:32px;background:url(//static.s-sfr.fr/media/mobile/xiaomi-logo-32.svg);} #FiltersBlock details[open] .selector:after {content:'';position:absolute;width:8px;height:8px;border:2px solid var(--clr-black);transform:rotate(-135deg);top:0;bottom:0;margin:auto;right:8px;border-top:0;border-left:0;transition:all 0.2s ease-out;} #FiltersBlock summary {list-style:none;} #FiltersBlock summary::-webkit-details-marker{display:none} #FiltersBlock .c .f-content {grid-template-columns: repeat(6, 1fr);} #FiltersBlock .fcl {position: relative;cursor:pointer;-webkit-background-clip: text;-webkit-text-fill-color: transparent;width: 18px;font-size: 2px;height: 18px;border-radius: 50%;box-sizing: content-box;} #FiltersBlock .fc:checked + .fcl:after {content: "";position: absolute;width: 24px;height: 24px;border-radius: 100%;border: solid 2px var(--clr-black);top: 0;bottom: 0;margin: auto;left: -3px;box-sizing: border-box;} #FiltersBlock .fc:focus-visible + .fcl{outline: -webkit-focus-ring-color auto 1px;} #FiltersBlock .fcl.d:before {content: '';position: absolute;width: 21px;height: 1.5px;background: var(--clr-black);transform: rotate(130deg);left: -2px;bottom: 0;top: 0px;margin: auto;} .tags {margin-top:8px} .tags .t {position: relative;display: inline-block;cursor: pointer;font: normal 12px/18px SFR-Bold;padding: 4px 48px 4px 16px;color: #fff;background: var(--clr-black);border-radius: 20px;margin: 8px 16px 0 0;text-align: left;} .tags .t:after {position: absolute;content: "";width: 12px;height: 12px;background: url(//static.s-sfr.fr/assets/pictos/croix_40_blanc.svg);background-size: contain;right: 8px;top: 0;bottom: 0;margin: auto;} #FiltersBlock .results {margin-left: auto;display: table;} #FiltersBlock .btn2 {position: absolute;width: fit-content;top: 50px;right: 0;} #Order {width: fit-content;position: absolute;top: -48px;right: 0} #Order label {font:normal 14px/22px SFR-Bold;color: var(--clr-black);} #Order select {height:40px;font:normal 14px/22px SFR-Bold;border:0;background:transparent;-moz-appearance:none;-webkit-appearance:none;color: var(--clr-black);} #Order select:focus {outline: none; } .f-content {position:absolute;display:grid;gap:16px;box-shadow:0px 4px 8px rgb(24 24 24 / 16%);border-radius:0px 0px 12px 12px;padding:16px;background:#fff;left:0;top:43px;z-index:11;width:max-content;} .f-content.m {grid-template-columns:repeat(2, auto);} .filters {display:flex;position:relative;flex-flow:row wrap;gap:8px;} .filter {position:relative;width:156px;} .more-f{position:relative;padding: 0 4px 0 0;cursor:pointer;background: transparent;font-family:SFR-Bold;color:var(--clr-black);} .more-f:after{position:absolute;content:'';right:-16px;top:0;bottom:0;width:16px;height:16px;margin:auto;background:url(//static.s-sfr.fr/assets/pictos/Filtre_reglage_40_noir.svg) center center / contain no-repeat;} .filter.h {display:none;} .filter.d {display:inline-block;} .actual-o input:checked + label .md-content {padding: 16px 16px 8px;} bol-phone-unavailable .bg_save_mail{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;z-index:100;} bol-phone-unavailable .bg_save_mail .bl_save_mail{width:calc(100% - 32px);max-width:620px;border-radius:12px;background:#fff;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);padding:24px;text-align:center;margin:auto;position:relative; text-align:left;} bol-phone-unavailable .bg_save_mail .bl_save_mail p {font-size:14px;line-height:18px;margin-top:16px;} bol-phone-unavailable .bg_save_mail .bl_save_mail .close{display:block;width:32px;height:32px;background:url(//static.s-sfr.fr/assets/pictos/fermer_plein_40_noir.svg) center no-repeat;background-size: contain;position:absolute;top:8px;right:8px;cursor:pointer;} .addons_bloc .bl_link .link {margin: 0 24px} .addons_bloc bol-link {display: block;margin: 0 auto; width: fit-content} .addons_bloc .bl_link.expand-bloc:before, .addons_bloc .bl_link.expand-bloc:after {content: '';display: block;border-bottom: var(--clr-disable) solid 2px;flex: 1} bol-addons-card {display: block;max-width: 400px;margin:0 auto} .addons.bl_link{text-align: center;padding: 32px 0 0} .addons-card .selector {width:100%;margin-bottom:8px} .addons-card .WhiteBloc{padding:16px 20px 0} .addons-card .BlackBloc bol-label-refund {position: absolute;margin-left: auto;background: var(--clr-yellow);color: var(--clr-black);font-family: 'SFR-Black';font-size: 10px;line-height: 20px;border-radius: 4px;right: 16px;top: -10px;left: unset;padding: 0 8px} .addons-card .bl_btn .btn.ghost{margin:0 0 4px} .addons-card .old_prix {display:inline-block;font-family: 'SFR-Regular';font-size: 14px;line-height: 22px;text-decoration: line-through;color: var(--clr-black);margin:0 4px 0 0} .addons-card .header img{width:100%;height:auto;max-height:100%;object-fit: cover} .addons-card bol-price {display:inline-block;font-family: SFR-Bold;font-size: 24px;line-height: 30px;margin-bottom:12px} .Media .addons_bloc{background:rgba(255, 255, 255, 0);position:relative;} .Media .addons-card .header {background: transparent} .Media .addons-card, .Media .addons-card a {background:#222;color:#fff;text-decoration: unset;} .Media .addons-card .BlackBloc{background:unset} #ConfigBundle {width: 1280px;max-width:calc(100% - 64px);margin:0 auto;display: flex;flex-flow: row wrap;justify-content:space-between} #ConfigBundle > p {font-family: SFR-Bold;font-size: 19px;line-height: 26px;margin: 0 0 24px;width: 100%} #ConfigBundle .R {max-width: 100%;width: 400px} #ConfigBundle .addons_bloc .list {grid-template-columns: 1fr} #ConfigBundle .L {display: flex;flex-flow: row wrap;width: 600px;max-width: 50%;margin-bottom:-8px} #ConfigBundle .L > p {font-family: SFR-Bold;font-size: 18px;margin:24px 0 16px ;width:100%} #ConfigBundle .L label{display:flex;justify-content:center;align-items:center;flex-direction: column;width: 286px;max-width: 100%;height: 130px;border-radius: 8px;box-shadow: 0px 4px 8px rgba(24, 24, 24, 0.16);background-color: #fff;margin-right:10px;margin-bottom:10px;cursor:pointer;padding:2px} .Media #ConfigBundle .L label {background: #222} #ConfigBundle .L input[type="radio"]:checked + label {padding:0;border: var(--clr-sfr2) 2px solid} #ConfigBundle .L label p:first-of-type{margin-bottom:5px; font-family: SFR-Bold; font-size: 16px} #ConfigBundle .L label p{font-size: 12px;line-height: 17px;text-align:center;max-width:calc(100% - 30px)} #ConfigBundle .addons_bloc>.wrapper {padding:0} #ConfigBundle .addons_bloc .list {max-width:100%;} #ConfigBundle .addons-card.promo {margin-top:24px} #ConfigBundle .addons_bloc:after {content: "=";font-family: 'SFR-Bold';font-size: 30px;line-height: 30px;position: absolute;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;left: -36px;height: 30px;width: 16px} #ExperienceTV {width: 1280px;max-width:calc(100% - 64px);margin: 24px auto 0} #ExperienceTV .intro{font-size: 14px;line-height: 22px;margin-top:-8px;} .generic-tab {position: relative;text-align: center;margin: 24px auto 16px;padding: 12px 0;background: #fff;border-radius: 8px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);} .Media .generic-tab {background: var(--clr-black)} .generic-tab input {display:none} .generic-tab label {display: inline-block;cursor: pointer;font-size: 14px;line-height: 22px;box-shadow: 0px 4px 8px rgba(24, 24, 24, 0.16);border-radius: 8px;background-color: transparent;font-family: 'SFR-Bold';border: 1px solid var(--clr-black);padding: 10px 23px;margin: 0px 12px} .generic-tab label:hover, .generic-tab input:checked + label {background-color: var(--clr-black);color: #fff;transition: all.2s} .Media .generic-tab label {border: 1px solid #fff} .Media .generic-tab label:hover, .Media .generic-tab input:checked + label {background-color: #fff;color: var(--clr-black)} .generic-tab input + label + section {position: absolute;display:none;width: 100%;height: 404px;top: 72px;justify-content: space-between;align-items: center} .generic-tab input:checked + label + section {display:flex} .generic-tab .selector {display:none;width: 264px;max-width:calc(100% - 24px);height: 40px;background: var(--clr-black);box-shadow:0px 4px 8px rgba(24, 24, 24, 0.16);padding: 0 12px;margin:0 12px;border-radius: 8px} .Media .generic-tab .selector {background: #fff} .generic-tab .selector:after {top:12px;color:#fff} .generic-tab .selector select {font-family: SFR-Black;font-size: 14px;line-height: 16px;color: #fff;padding: 0} .Media .generic-tab .selector:after, .Media .generic-tab .selector select {color: var(--clr-black);background: #fff} #ExperienceTV > div {margin: 24px auto 365px} #ExperienceTV .L {position:relative;text-align:left;background: #222;border-radius: 12px;width: 100%;max-width: calc(50% - 20px);height:224px;padding:24px} #ExperienceTV .L:after {background: rgba(0, 0, 0, 0.72);mix-blend-mode: normal;opacity: 0.3;filter: blur(24px);content: '';position: absolute;bottom: -88px;left: 0;width: 100%;height: 56px} #ExperienceTV .L .title {font-family: SFR-Bold;font-size: 20px;line-height: 24px;display: inline-block;vertical-align: super;margin-left:8px} #ExperienceTV .L .desc {font-family: SFR-Regular;font-size: 14px;line-height: 22px;margin-top:16px} #ExperienceTV .L svg {display: inline-block} #ExperienceTV .L a {position:absolute;display:block;width:auto;bottom: 24px;left:24px} #ExperienceTV .R {position:relative;cursor:pointer;display: flex;justify-content: center; } #ExperienceTV .socle {position: absolute;left: 0;right: 0;top: -32px;z-index:-1} #ExperienceTV .behind {position:absolute;z-index:1;max-width: 552px;height: auto} #ExperienceTV .front {z-index:2;max-width: 552px;height: auto} #ExperienceTV .R:hover .move {transition:all 0.2s;transform: scale(1.10)} #ExperienceTV .R img {max-width:100%} .other-pack-option{display:flex;flex-flow:row wrap;max-width:1065px;margin:auto;padding:0 18px;} .other-pack-option > p{font-family:SFR-Bold;font-size:19px;line-height:26px;margin:16px 0 10px;width:100%;} .other-pack-option input[name="choix-option"]{display:none;} .other-pack-option > p{font-family:SFR-Bold;font-size:19px;line-height:26px;margin:16px 0 10px;width:100%;} .other-pack-option input[name="choix-option"] + label{display:flex;align-items:center;justify-content:center;font-family:SFR-Bold;font-size:14px;min-height:35px;text-align:center;border-radius:22.5px;border:solid 2px var(--clr-black);padding:0 22px;cursor:pointer;margin:0 5px 10px;} body.Media .other-pack-option input[name="choix-option"] + label{border:solid 2px #fff;} .other-pack-option input[name="choix-option"]:checked + label{color:#fff;background:var(--clr-black);cursor:default;} body.Media .other-pack-option input[name="choix-option"]:checked + label{color:var(--clr-black);background:#fff;} bol-resume-option-block .pres .sous-titre p, body.Media .pres .sous-titre p{padding-bottom:20px} bol-resume-option-block .pres, body.Media .pres {display: flex;width: 1280px;max-width: calc(100% - 64px);margin: 0 auto;padding: 0;gap: 24px;align-items: flex-start;justify-content: space-between;justify-content: flex-start;} bol-resume-option-block .pres .addons_bloc .list, body.Media .pres .addons_bloc .list { grid-template-columns: 1fr} bol-resume-option-block .pres .sous-titre, body.Media .pres .sous-titre{font-size:14px;width:calc(100% - 440px);margin-bottom:20px} .Media #vousaimerezaussi .addons_bloc {margin-bottom:40px;} .bl_offer_to_choose{padding:0;width:1280px;max-width:calc(100% - 64px);margin:auto} .bl_offer_to_choose .bl_description{margin:-16px 0 24px} .bl_offer_to_choose .bl_right{flex:4;display:flex} .bl_offer_to_choose .bl_right > div{position:relative;flex:1} .bl_offer_to_choose .bl_right > div:nth-child(2){flex:0;max-width:74px;min-width:65px;display:flex;justify-content:center} .bl_offer_to_choose .bl_right > div:nth-child(2)::before{content:"+";display:flex;width:26px;height:26px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);background-color:#fff;position:absolute;top:25%;border-radius:90px;font-size:19px;font-family:SFR-Bold;color:#222;justify-content:center;align-items:center} .bl_offer_to_choose .addons-card{height:inherit} .bl_offer_to_choose .addons-card .bl_btn,.bl_offer_to_choose .addons-card .btn {max-width:calc(100% - 15px)} bol-choice{position:relative;display:block;width: 100%;} .bloc_choices{position:relative;width:1280px;max-width:calc(100% - 64px);display:flex;justify-content:center;margin:40px auto 0;gap: 40px;} .bloc_choices .bold{font-family:SFR-Bold;font-size:16px;line-height:24px;color:var(--clr-black)} .generic-choices .form > .bold{margin:32px 6px 8px 0} .bloc_choices .intro{font-family:SFR-Light;font-size:24px;line-height:20px;color:var(--clr-black);margin-bottom:8px} .generic-choices.top {display: table-caption;background: #FFFFFF;box-shadow: 0px 8px 16px rgb(24 24 24 / 2%);border-radius: 12px;width: 1280px;max-width: 100%;margin:0 auto;padding: 24px;text-align: center;} .generic-choices.top .left .h4{margin-bottom: 4px;text-align: center;} .generic-choices .h4,.generic-choices .desc{text-align:left;} .generic-choices.top .conserve-t,.generic-choices.top .sub-t{font:normal 14px/22px SFR-Bold;text-align:left} .generic-choices .links {text-align: left;margin: 16px 0 0 -16px;} .generic-choices .info {text-align: left;margin-top: -16px;} .generic-choices.top .left{display: inline-block;text-align:center;vertical-align:middle;} .generic-choices.top a{display: inline-block;width:fit-content;vertical-align:middle;margin-left:16px;} .generic-choices .inline{display:flex;flex-flow:wrap;align-items:center;gap:16px;margin-top: 16px;} .generic-choices .inline .radio-inputs label{text-align: left;margin-bottom:0;} .generic-choices .currentLines {display:flex;align-items:center;height: 40px;margin-top:16px;} .generic-choices .checks input[type="radio"]{display:none} .generic-choices .checks{max-width:763px;margin-top:16px;margin-right:0} .generic-choices .checks label{padding:0 11px;margin:8px 0;width:auto;min-width:fit-content;min-width:-moz-fit-content} .bloc_choices .connexion p:not(.bold){font-family:SFR-Regular;font-size:12px;line-height:18px;text-align:center;margin:4px 0 8px} .bloc_choices .connexion btn.filled-black{font-size:13px} .bloc_choices .form{display:flex;flex-flow:row;align-items:flex-start} .bloc_choices .L{width:100%} .bloc_choices .R{min-width:200px;position:relative;padding-left:20px;height:83px} .bloc_choices .R:after{position:absolute;content:"";top:0;left:0;height:100%;width:1px;background-color:var(--clr-disable)} .bloc_choices .R p:not(.bold){margin-bottom:11px} .generic-choices .selector {min-width: 150px;margin-left: 16px;text-align: justify;} .generic-choices .checks.mobile{display:none} .generic-choices .select.mobile,.bloc_choices p.mobile{display:none} .generic-choices .select:after {content: "";position: absolute;bottom: 0;margin: auto;transition: all 0.2s ease-out;right: 12px;top: 0;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;width: 8px;height: 8px;transform: rotate(135deg)} .generic-choices .b-p {position: relative;font-family: 'SFR-Regular';font-size: 12px;line-height: 18px;display: block;text-align: left;width: fit-content;} .generic-choices .b-p .i-explanation + .explanation {bottom: 24px;top: unset;right: unset;left: 120px;} .generic-choices .b-p .i-explanation {right: -22px;top: 2px;} .generic-choices .b-p .explanation:after {content: "";position: absolute;bottom: -14px;left: 8px;margin-top: -5px;border-width: 7px;border-style: solid;border-color: var(--clr-black) transparent transparent transparent;} .generic-choices .b-p .i-explanation + .explanation ul {list-style: unset;padding-left: 12px;} .actual-o {background: #fff;border-radius: 12px;padding: 24px;min-width:calc(50% - 20px);} .actual-o .md-label {width: fit-content;margin-right:20px;} .actual-o .md-label:before {content:none;} .actual-o .md-label:after {right:-20px;} .actual-o input:checked + label .md-content {width: 300px;top: 22px;} .actual-o .md-content:before {top: -4px;right: 23px;} .actual-o .e{font-size: 12px;line-height: 18px;color: var(--clr-grey)} .actual-o .n{font-size: 14px;line-height: 22px} .actual-o .s b{display:block;margin:16px 0;} .actual-o >.e{margin-bottom: 8px} .actual-o .r-max{font-family:SFR-bold;text-align:right;} .actual-o .i-t {display: grid;grid-auto-flow: column;justify-content: left;gap:0 4px;margin-top:16px} .actual-o .i-t p{max-width:112px;font-size: 12px;line-height: 18px;margin-right: 4px} .actual-o .i-t span{display:block;} .actual-o h3{margin-bottom:24px;} .actual-o .t-t {display: grid;grid-template-columns: 1fr 1fr;align-items: center;} .actual-o .t-t p{white-space: nowrap;} .actual-o .t-t p:first-of-type{margin:0 8px 0 0;} .actual-o .t-t p:nth-child(even) {text-align: right;font-size:12px} .actual-o img {height:24px;width:auto} .actual-o .prices {display: grid;grid-auto-flow: column;justify-content: space-between;margin-top: 16px;border-top:1px solid var(--clr-disable);padding-top:16px} .actual-o .prices .e {margin-top: 2px} .actual-o .prices b {font-size:14px;line-height:22px} .bl_note .Note{height:17px;width:85px;background:url(https://static.s-sfr.fr/media/v2/assets/images/png/sprite-avis.png) top center no-repeat;overflow:hidden} .price_bar .desc .bl_promo{color:var(--clr-black);position:relative;padding:5px 4px;border-radius:3px;left:0;top:unset;line-height:10px;max-width:120px;float:left;margin-right:4px} .price_bar .desc .price_elem h3{margin:0 0 2px 0} .price_bar .desc .txt{text-align:left} .price_bar .sw-promo {position: relative; text-align: center} .bloc_TitleMenu .subtitle{font-size:24px;line-height:52px;color:var(--clr-black);text-align:center;margin-bottom:16px} #BolUsage{display:block;width:1280px;max-width:calc(100% - 64px);margin:auto;padding:24px;border-radius:12px;background:#fff;margin-bottom:24px} #BolUsage > p{font-family:SFR-Bold;font-size:16px;font-style:normal;line-height:21px;color:var(--clr-black);} #BolUsage > form{display:flex;flex-flow:row wrap;align-items:flex-end;justify-content:space-between;} #BolUsage > form > div{width: calc(30% - 16px)} #BolUsage > form > p{font-family:SFR-Regular;font-size:14px;line-height:20px;width:100%;margin-top:15px} #BolUsage > p:nth-child(3){margin:42px 0 30px} #BolUsage > form li a{text-decoration:none} #BolUsage > form a{text-decoration:underline} #BolUsage > form label{display:block;font-size:14px;line-height:20px;margin-bottom:4px} #BolUsage > form .selector{position:relative;margin:0} #BolUsage > form select{position:relative;width:100%;height:40px;padding:0px 0px 0px 10px;border-radius: 8px;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none} #BolUsage > form select:focus-visible{outline:0} #BolUsage > form > .submit{width: 117px;height: 40px;margin: 0;text-decoration: none} #BolUsage .details{display:flex;flex-flow:row wrap;justify-content:center;width:1280px;max-width:calc(100% - 64px);margin:0 auto 30px} #BolUsage .details section{min-width:177px;min-height:204px;border-radius:8px;box-shadow:0 5px 20px 0 rgba(24, 24, 24, 0.16);background-color:#fff} #BolUsage .details section:not(:last-of-type){margin-right:24px} #BolUsage .details section .head{display:flex;flex-flow:column;justify-content:center;align-items:center;height:77px;background-color:var(--clr-bg);text-align:center;border-radius:8px 8px 0 0} #BolUsage .details section .content{display:flex;flex-flow:row;justify-content:center;padding:16px} #BolUsage .details section .content .L{display:flex;flex-flow:column;align-items:flex-start} #BolUsage .details section .content .R{display:flex;flex-flow:column;align-items:flex-end;margin-left:2px} #BolUsage .details section span{font-size:16px;line-height:24px;text-align:center} #BolUsage .details section .content span.bold,#BolUsage .details section .head span{font-family:SFR-Bold} #BolUsage .details section .head img{margin:0 auto} #BolUsage .autocomplete-container .input-container input {height: 40px!important;line-height: 40px!important;border-radius: 8px;border: 1px solid var(--clr-disable)!important;padding: 0 14px!important;background-color: #fff!important;font-size: 14px!important;color: var(--clr-black)!important;width: 100%!important} #BolUsage .autocomplete-container .input-container .x i {color: rgba(0,0,0,.54);font-size: 22px;vertical-align: super} #BolUsage .autocomplete-block input{border-radius: 8px;width: calc(100% + 40px);} bol-basket div.bloc_panier{left:auto;right:65px} .channel-in-bouquet {width: 1280px;max-width:calc(100% - 64px);margin: 0 auto 40px;} .channel-in-bouquet .bl_top {display: flex;margin-bottom: 72px} .channel-in-bouquet .bl_top .bl_img {min-width: 407px;max-width: 100%;margin-right: 57px} .channel-in-bouquet .bl_top .bl_img img {max-width: 100%} .channel-in-bouquet .bl_link {margin: auto;text-align: center;max-width: fit-content;align-items: center} .channel-in-bouquet .channel-not-included {border-radius: 14px;width: 100%;padding: 40px;margin: 20px 0;background: var(--clr-black);display: flex; align-items: center;justify-content: center;color: #fff;font-size: 18px} .channel-in-bouquet .channel-in-bouquet_content {padding: 0 10px;color: #fff;display: flex;flex-direction: column;justify-content: center} .channel-in-bouquet .bl_top h3 {margin-bottom: 20px} .channel-in-bouquet .bl_top p{font-size: 14px;margin-bottom: 20px} .channel-in-bouquet .channel-in-bouquet_content .channel-in-bouquet-number {font-family: SFR-Bold;text-transform: uppercase;font-size: 16px} .channel-categorized .category:after {display: inline-block;margin: 0;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;content: '';height: 8px;transform: rotate(135deg);width: 8px;transition: all 0.2s} .channel-categorized.full-width .category:after {transform: rotate(-45deg)} .features_bloc {font-family: 'SFR-Regular';font-size: 14px;line-height: 22px;color: var(--clr-black);background: #fff;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;padding: 24px;width: 1280px;max-width:calc(100% - 64px);margin: 0 auto;} .features_bloc label{display:block;position:relative} .features_bloc input {display:none} .features_bloc .specs {height:675px; overflow:hidden; color:var(--clr-grey);display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:24px 56px;padding:0 28px} .features_bloc.fixe .specs {height: 756px} .features_bloc input:checked + .specs {height:auto; overflow:auto} .features_bloc .expand-bloc {position:relative;margin:40px auto 0;cursor:pointer} .features_bloc .vm {display:table} .features_bloc .vp {display:none} .features_bloc input[type="checkbox"]:checked + .specs + label .vp {display:table} .features_bloc input[type="checkbox"]:checked + .specs + label .vm {display:none} .features_bloc input:checked + .specs + label .expand-bloc i{transform:rotate(-45deg);margin-bottom:-2px} .features_bloc ul.indics {display:grid;grid-auto-flow:column;margin:0 0 8px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;list-style: none;} .features_bloc .indics img {display:block;margin:0 auto 16px} .features_bloc .indics p {font-size:14px;line-height:14px;text-align:center} .features_bloc .indics strong {font-family:'SFR-Bold'} .features_bloc ul {display:grid;width:100%;color:var(--clr-black);height:fit-content;position:relative;margin:24px 0 0} .features_bloc li {display:inline-block;width:100%;position:relative} .features_bloc .bl_title {font-family:'SFR-Regular';padding-bottom:18px;text-align:left;width:auto} .features_bloc .l {float:left;min-width:51%;max-width:265px} .features_bloc .r {font-family:SFR-Bold;float:right;text-align: right;max-width: calc(100% - 265px)} .features_bloc .specs br {margin:18px;display:block;content:"";margin-top:0} .features_bloc a {display:block;font-size:14px;margin-bottom:18px;text-decoration:underline} .features_bloc [data-tranche] {position:absolute;top:calc(50% - 2px);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;width: 122px;height: 60px;text-align: inherit} .features_bloc [data-tranche]:before {position: absolute;content: '';left: 0px;top: 0px;width: 58px;height: calc(100% + 1px);border-radius: 4px;} .features_bloc [data-tranche]:after {position: absolute;content: attr(data-note);font-size: 28px;line-height: 40px;padding: 0 4px 8px 62px;width: calc(100% - 62px);height: calc(100% - 8px);text-align: left;border: 0.25px solid;border-radius: 4px} .features_bloc [data-tranche] svg {position:absolute;top: 6px;left: 5px;width: 50px;height: 50px} .features_bloc [data-tranche] span {position:absolute;right: 2px;bottom: -2px;font-size: 16px} .features_bloc [data-tranche] p {position:absolute;text-transform:uppercase;left:0;bottom: -16px;font-size: 10px;line-height:1;width:calc(100% + 20px)} .features_bloc [data-tranche='1']:before {background:#D91627} .features_bloc [data-tranche='1']:after {border-color:#D91627} .features_bloc [data-tranche='3']:before {background:#F47935} .features_bloc [data-tranche='3']:after {border-color:#F47935} .features_bloc [data-tranche='5']:before {background:#FEC822} .features_bloc [data-tranche='5']:after {border-color:#FEC822} .features_bloc [data-tranche='7']:before {background:#95C83E} .features_bloc [data-tranche='7']:after {border-color:#95C83E} .features_bloc [data-tranche='9']:before {background:#149D4F} .features_bloc [data-tranche='9']:after {border-color:#149D4F} bol-semantic-booster #SB div { background-color: #fff; display: block;width: 1280px;max-width:calc(100% - 64px); margin: 40px auto 0; padding: 24px; border-radius: 12px} bol-semantic-booster #SB h2 { font-family: SFR-Bold; font-size: 16px; line-height: 19px; display: block; margin-bottom: 24px; } bol-semantic-booster #SB a { font-family: SFR-Regular; font-size: 12px; color: var(--clr-black); display: inline-block; padding: 6px 12px; border:1px solid var(--clr-black); border-radius: 24px; text-decoration: none; margin: 0 16px 8px 0; transition: .5s background-color ease-out} bol-semantic-booster #SB a:hover { background-color: var(--clr-black); color: #fff} .Media bol-semantic-booster #SB div { background-color: #222;} .Media bol-semantic-booster #SB a {color: #fff;border:1px solid #fff} .Media bol-semantic-booster #SB a:hover { background-color:#fff; color: var(--clr-black)} .Media #REA {color: #fff;background: #222;} .avis_bloc .link.More {position: relative;font-family: 'SFR-REGULAR';font-size: 14px;line-height: 22px;margin-right: 13px} .avis_bloc .link.More:after {content: '';position: absolute;width: 8px;height: 8px;background-color: transparent;border: 2px solid;margin-left: 4px;transform: rotate(45deg);top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;border-left: 0;border-bottom: 0;border-radius: 2px} .avis_bloc .link.More:hover:after {margin-left: 8px;transition: all .2s cubic-bezier(.4,0,.2,1)} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc h2 {font-family:SFR-Bold;font-size:20px;line-height :24px;text-align: center;margin-top:8px} bol-paginated-mobile-avis-bloc .avis_bloc{padding: 24px 0 90px;width: 1280px;max-width: calc(100% - 64px);margin: auto} bol-mobile-avis-block .avis_bloc {padding: 24px 0 30px} bol-mobile-avis-block .link{text-align: center;margin: 24px auto 0;display: table;} .avis_bloc {position:relative;color: var(--clr-black);width:1280px;max-width:calc(100% - 64px);margin:0 auto} .avis_bloc .top {background: #fff;width:100%;border-radius: 12px;padding: 24px;box-shadow: 0px 4px 8px rgba(24, 24, 24, 0.16);position: relative;display: flex;align-items: center} .avis_bloc > img {top: 23px;right: -25px;position: absolute;width: auto;height: 86px;z-index: 1} .avis_bloc img {margin-right: 24px;max-width:200px;} .avis_bloc .t {font-family: 'SFR-Bold';font-size: 24px;line-height: 28px;margin-bottom: 16px;margin-right:6px} .avis_bloc .nmg {padding-right:20px} .avis_bloc .nmg div{margin-top:16px} .avis_bloc .db {margin-left:24px} .avis_bloc .st {font-family: 'SFR-Bold';font-size:16px;line-height:24px;margin-bottom: 24px} .avis_bloc .sd {display:grid;gap: 16px 24px;grid-template-columns: auto auto;font-family: 'SFR-Bold';font-size: 12px;line-height: 16px;margin-top: 16px} .avis_bloc .sd section{display:inline-flex;justify-content:space-between;align-items:center} .avis_bloc .sd bol-rate{margin-left:24px} .avis_bloc input {display: none} .avis_bloc .top a {text-decoration:underline} .avis_bloc .top p{display:inline;} .avis_bloc .top .n-avis {font-family: 'SFR-Bold'} .avis_bloc label {position: relative;display:inline-block;vertical-align: middle;cursor:pointer;text-decoration:underline} .avis_bloc label:after {position: absolute;content: "?";color: #fff;background: var(--clr-black);width: 13px;height: 13px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 100%;font-size: 10px;line-height: 13px;text-align: center;top: 0;bottom: 0;right: -18px;margin: auto} .avis_bloc .mic {display: none;position: absolute;font-size: 11px;line-height: 14px;padding: 8px;background: var(--clr-black);color: #fff;border-radius: 4px;z-index: 1;width: 284px;top: 10px;margin: auto;right: calc(-100% + 2px)} .avis_bloc .mic a{color: #fff} .avis_bloc input:checked + label .mic {display:block} .avis_bloc .mic:before {content: "";position: absolute;top: -9px;left: 50%;transform: translateX(-50%);margin-top: -5px;border-width: 7px;border-style: solid;border-color: transparent transparent var(--clr-black) transparent} .avis_bloc .l {display: grid;flex-wrap: wrap;gap: 16px 0;justify-content:space-between;grid-template-columns: 46% 46%;margin-top: 16px;background: #fff;border-radius: 12px;padding: 0 24px 24px;list-style-type: none;} .avis_bloc .l li {width:100%;padding: 16px 0;border-bottom:#DFDFDF 1px solid} bol-avis-bloc .rating-wrapper {margin-bottom: 8px} bol-avis-bloc .d {font-size: 10px;line-height: 14px;color: var(--clr-grey);margin-bottom: 16px} bol-avis-bloc .c {font-size: 14px;line-height: 22px;margin-bottom:16px} bol-avis-bloc .a {font-family: 'SFR-Bold';font-size: 12px;line-height: 16px;text-align:right} .avis_bloc .link.More {width: 100%;background: #fff;margin-top: -24px;padding: 24px 0;border-radius: 12px} body.over-displayed {overflow-x: unset} body.over-displayed #eThS {overflow-x: hidden} html.noscroll , html.noscroll body{overflow: hidden} #BlocAvAp {display:none;position: relative;padding: 0 0 24px} #BlocAvAp.show {display:block} #BlocAvAp.displayed {display:block;position: relative;z-index: 999;top: unset;left: 0;right: 0;argin: auto; background: var(--clr-bg);min-height: 100vh;max-height: unset;width: 100%} body.over-displayed #PT~*:not(#eTfS):not(#toastrContainer):not(#popinContainer):not(.debugSG):not(#BlocAvAp) {display: none} body.over-displayed #BlocAvAp~*:not(#eTfS):not(#toastrContainer):not(#popinContainer):not(.debugSG):not(#PT) {display: none} #layout_main-container.hide {display:none} #BlocAvAp.rm .btn {display: flex;margin:24px auto 0;width:fit-content;} .back-shop {position: relative;display: block;font-family: SFR-Bold;font-size: 14px;line-height: 17px;color: var(--clr-black);margin: 0 auto;padding: 24px 0 0;width: 1280px;max-width:calc(100% - 64px);cursor: pointer;background: transparent;text-align: left;} .back-shop:before {display: inline-block;content: '';background: url(//static.s-sfr.fr/media/icono-picto-arrow.svg);transform: rotate(90deg);width: 16px;height: 8px;background-size: contain;margin-right: 6px} #BlocAvAp.rm h1 {font-family: 'SFR-Black';font-size: 40px;line-height: 40px;text-align: center;text-transform: uppercase;color: var(--clr-black)} #BlocAvAp.rm .h {text-align:center;width:100%;background:#fff;padding:24px 0;margin:40px 0 24px;position: sticky;top: 0;z-index: 1;box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08)} #BlocAvAp.rm .h p{font-family: 'SFR-Bold';font-size: 24px;line-height: 28px;margin: auto} #BlocAvAp.rm .s{display:grid;grid-template-columns: 1fr 1fr;text-align:center;width: 1280px;max-width:calc(100% - 64px);gap: 0 40px;border-top-left-radius:12px;margin: 0 auto} #BlocAvAp.rm .s div{background:#fff;width:100%;padding: 0 24px 24px 24px} #BlocAvAp.rm .s .top {padding-top:24px;border-top-left-radius:12px;border-top-right-radius:12px} #BlocAvAp.rm .s .bottom {border-bottom-left-radius:12px;border-bottom-right-radius:12px} #BlocAvAp.rm .t {font-family: 'SFR-Bold';font-size: 20px;line-height: 24px;text-align: left} #BlocAvAp.rm .t svg {margin-right:16px} #BlocAvAp.rm .t span {padding: 4px 8px;font-size: 14px;line-height: 22px;background: var(--clr-disable);border-radius: 4px;margin-left:16px} #BlocAvAp.rm .t > * {display: inline-block;vertical-align: middle} #BlocAvAp.rm .sd {font-family: 'SFR-Regular';font-size: 12px;line-height: 16px;margin-top:4px;width:100%} #BlocAvAp.rm .c .st {font-family: SFR-Bold;font-size:16px;line-height:24px;width:100%} #BlocAvAp.rm .c {display: flex;flex-flow: row wrap;justify-content:space-between;align-items: center;align-content: flex-start;width:100%;text-align:left} #BlocAvAp.rm .c p, #BlocAvAp.rm .c span {position:relative;font-size: 14px;line-height: 22px} #BlocAvAp.rm .w {font-size: 14px;line-height: 22px;width: 100%;justify-content: space-between;display: flex;align-items: center;flex-flow: row wrap} #BlocAvAp.rm .l {width:80%} #BlocAvAp.rm .r {width:20%;text-align:right} #BlocAvAp.rm .s .lst-dst {font-family: 'SFR-Bold';text-decoration:underline;cursor:pointer} #BlocAvAp.rm .th {text-decoration:line-through} #BlocAvAp.rm .pi:before {content: '';position: absolute;top: 4px;width: 6px;height: 6px;left: -14px;border-radius: 100%;background: var(--clr-error)} #BlocAvAp.rm .c .sticker{font-family: 'SFR-Bold';font-size: 12px;line-height: 16px;border-radius: 4px;padding:0 8px;margin-right:8px} #BlocAvAp.rm .sticker.y{background: var(--clr-yellow)} #BlocAvAp.rm .sticker.b{background: var(--clr-black);color:#fff} #popinContainer.show {top: 0;left: 0;right: 0;bottom: 0;z-index: 100000;position: fixed;display: flex; align-items: center;justify-content: center;overflow-y: auto} #popinContainer.lst-desc #popinContent {z-index:4} #popinContainer.lst-desc .overlay {z-index:4;position:absolute} #BlocAvAp .list-desc {position: relative;width: 710px;max-width: 100%;background: #fff;border-radius: 12px;padding: 24px;margin: 15px auto;z-index: -1} #BlocAvAp .list-desc svg {height: 20px;vertical-align: text-bottom;display: inline-block;margin-right: 10px} #BlocAvAp .list-desc h4 {display: inline-block;line-height: 20px} #BlocAvAp .list-desc .elem_popin {font-size: 12px;line-height: 16px;margin-top: 20px} #BlocAvAp .list-desc .btn-close {position: absolute;content: '';width: 20px;height: 20px;right: 14px;top: 26px;cursor: pointer} #BlocAvAp .list-desc .btn-close:before,#BlocAvAp .list-desc .btn-close:after {position: absolute;content: '';width: 20px;height: 2px;background-color: var(--clr-error)} #BlocAvAp .list-desc .btn-close:before {transform: rotate(45deg)} #BlocAvAp .list-desc .btn-close:after {transform: rotate(-45deg)} /*more*/ #BlocAvAp.rm .l{margin: 8px 0 0 0;} #BlocAvAp.rm .c > .equi{padding:0;max-width:50%;display:flex;gap:24px;} #BlocAvAp.rm .c > .equi > div{padding:0;display:flex;flex-direction:column;gap:8px;justify-content:center;width:fit-content;align-items:center;} #BlocAvAp.rm .c > .equi + .r{align-self:flex-end;} #BlocAvAp.rm .c .gr{width:100%;color:var(--clr-grey);font-size:12px; text-align:right;} #BlocAvAp.rm .fw{width:100%;} #BlocAvAp.rm .fw .prc{border-radius: 8px; background: var(--clr-bg);padding: 16px;width:100%;text-align:left;max-width:352px;} #BlocAvAp.rm .eng{color: var(--clr-grey);} #BlocAvAp.rm .th{padding:0 0 0 24px;} #BlocAvAp.rm .pi.th:before{background:url('data:image/svg+xml,');border-radius:0;width:16px;height:16px; left:0;top:2px;} #BlocAvAp.rm .c{align-items:flex-end;} #BlocAvAp.rm .c .st{font-size:14px;} #BlocAvAp.rm .t{font-size:18px;} #BlocAvAp.rm .t > hr{display:block;margin:0 0 24px 0;} #BlocAvAp.rm .h p{font-size:32px;} #BlocAvAp.rm .c > .equi > div img{height:40px; width: fit-content;} #BlocAvAp.rm .h p{width:unset;} #BlocAvAp.rm .s div{padding:0 24px 16px 24px;} #BlocAvAp.rm .w.new{font-family:'SFR-Bold';} #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} .text-m {font-family: SFR-Regular;font-size: 12px;line-height: 16px;text-align:center} .generic-checks h4{font-family: SFR-Bold;font-size:16px;line-height:24px;margin-bottom:16px} .generic-checks label{display:inline-block;text-align:center;font-family:SFR-Bold;font-size: 14px;line-height: 16px;padding:11px 24px;border: 1px solid var(--clr-disable);cursor:pointer;border-top-left-radius:8px;border-bottom-left-radius:8px;height: auto;width: 50%;max-width: 50%;margin-bottom: 8px;} .generic-checks label:last-of-type{border-radius:0 8px 8px 0;border-left: 0;} .generic-checks label:first-of-type:last-of-type {border-radius: 8px;border: 1px solid var(--clr-black)} .generic-checks input[type="radio"]{display:none} .generic-checks input:checked + label{color:#fff;background:var(--clr-black);border:solid 1px var(--clr-black);cursor:default} #popinContainer {display: none} #popinContainer.discover #popinContent {position:relative;z-index: 4;width: 704px;max-width: calc(100% - 32px);background: #FFFFFF;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;display:grid;gap:16px; grid-template-areas: "a a a" "b c c";justify-content: center;grid-template-columns: 208px 208px 208px;padding:24px} #popinContainer.discover #popinContent .title{grid-area:a;padding-top:40px;font-family:SFR-Bold;font-size: 20px;line-height: 24px;text-align:center} #popinContainer.discover section p {font-size: 14px;line-height: 22px;text-align:center; } #popinContainer.show .overlay {display: block} #popinContainer .btn-close {position:absolute;content:"";width:20px;height:20px;right:24px;top:31px;cursor:pointer} #popinContainer .btn-close:before, #popinContainer .btn-close:after {position: absolute;content: '';width: 20px;height: 2px;background-color: var(--clr-error)} #popinContainer .btn-close:before {transform: rotate(45deg)} #popinContainer .btn-close:after {transform: rotate(-45deg)} .generic-i-t {width: 100%;display: grid;grid-template-columns: auto auto;background: #fff;padding: 24px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;margin: 0 auto;justify-content: space-between;gap:0 40px} .generic-i-t div{position: relative;max-width:704px} .generic-i-t p {font-family: 'SFR-Regular';font-size: 14px;line-height: 22px;} .generic-i-t p:not(:last-of-type) {margin-bottom: 24px;} .generic-i-t img {max-width:488px;height:auto;border-radius: 8px} .generic-i-t .picto {max-width:24px;vertical-align:middle;margin-right:8px} .generic-i-t .btn,.generic-i-t .btn4 {width: fit-content;margin-top: 24px;} #services_mobile_module_sfr_box_8x {width: 1280px;max-widht:calc(100- 64px);margin:40px auto 0;} #services_mobile_module_sfr_box_8x .wrapper {margin: 24px 0 0;} #services_mobile_module_sfr_box_8x .condition {margin: 16px 0 -40px;} .generic-l-info {width: 1280px;max-width:calc(100% - 64px);background: #fff;padding:24px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;margin:8px auto 0} .generic-l-info > *{display:inline-block;vertical-align:middle} .generic-l-info p{font-size: 14px;line-height: 22px;width:100%;max-width:calc(100% - 261px);margin:0 16px} .generic-i-band img {height: 32px;} .generic-i-band {width: 100%;padding: 8px;text-align: center} bol-mobile-list-block .generic-i-band {margin: 24px 0 0} .generic-i-band.green {background: #469e94} .generic-i-band > * {font-size: 14px !important;line-height: 18px;display: inline-block;vertical-align: middle;margin: 0 4px;color:#fff!important} bol-title-block .bl_desc {margin: 40px auto 0} .back-shop {padding: 15px 0 5px;max-width: calc(100% - 64px)} bol-reprise-mob {display: block; min-height: calc(100vh - 405px);} bol-reprise-mob h1 {display: block;margin: 40px auto;text-align: center;} .es-block {position:relative;width: 1280px;max-width:calc(100% - 64px);background: #fff;padding: 24px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;margin: 32px auto 40px} .es-block .title{font-family: SFR-Bold;font-size: 24px;line-height: 28px;text-align:left;margin:0;} .es-block .sub-t, .l-see-steps .expand-bloc {font-family:SFR-Bold;font-size:16px;line-height:24px;margin-bottom:24px;text-align:left} .l-see-steps .link {vertical-align:middle} .es-block .faq{margin:24px 0;padding:0;} .es-block details.faq summary:after{top:7px;} .es-block .btn {display: inline-block;width:fit-content;vertical-align: middle;margin: 12px auto} .es-block .or {display: inline-block;font-family:SFR-Bold;font-size: 14px;line-height: 22px;vertical-align: middle;margin:24px 32px 0 } .es-block form {display: inline-block;vertical-align: middle;margin-top:24px} .es-block .autocomplete-container .input-container input {display: inline-block;vertical-align: middle;border-radius: 8px 0px 0px 8px} .es-block ng-autocomplete {display: inline-block;width: 440px;height: 40px;max-width: calc(100% - 40px);margin: 24px 0} .es-block .autocomplete-container {box-shadow: none!important;height: inherit;text-align:left;z-index:3;} .es-block .input-container {width: 100%} .es-block form button {display: inline-block;cursor:pointer;vertical-align: middle;width: 40px;height: 42px;padding:9px 0 9px;background: var(--clr-sfr2);border:0;border-radius: 0 8px 8px 0;box-shadow: 0px 4px 8px 4px rgb(150 0 0 / 16%);margin: 0 0 0 -4px} .es-block form button img {width: 24px;height: 24px;text-align: center;} .l-see-steps {display: block;width: 100%;text-align:left} .l-see-steps div {display:none;margin-bottom:32px} .l-see-steps img {vertical-align: middle;margin-left: 16px;padding:4px 0} input:checked + .l-see-steps div {display:block} .generic-step {margin: 0 0 8px;padding-left: 24px;counter-increment: section;position: relative;font-size: 14px;line-height: 22px} .results .generic-step {text-align:left;margin: 24px 0 8px} .generic-step:before {font-family: 'SFR-Bold';content: counter(section);top:0;left: 0;display:flex;justify-content:center;align-items:center;position: absolute;border-radius: 50%;padding: 0px;height:16px;width: 16px;border: 1px solid var(--clr-black);text-align:center;color: var(--clr-black);font-size: 10px} .steps-two {display:grid;grid-template-columns: repeat(5, 1fr);gap:40px 24px} .steps-two div{counter-increment: section;position: relative;padding-top: 56px;text-align: center} .steps-two p{font-size:14px;line-height:20px;max-width:208px; margin:16px auto 0} .steps-two div:before {content: counter(section);top: 0;left:0; right:0;margin:auto;display:flex;justify-content:center;align-items:center;position: absolute;border-radius: 50%;padding: 0px;width: 32px;height: 32px;background: #DFDFDF;text-align: center;color: var(--clr-black);font-family: SFR-Bold;font-size: 16px;line-height: 32px;} .es-block .r {position: absolute;right: 24px;bottom: 0} .es-block .r span {font-size: 14px;line-height: 22px;margin-right: 22px} .es-block .r button {display: inline-block;width: fit-content;} .es-block .quit {margin: 35px auto 19px;display: table} .es-block .toggles {display: grid;grid-template-columns: calc(100% - 200px) auto auto;align-items: center;margin: 24px 0 0 0;padding: 0 0 24px 24px;counter-increment: section;position: relative;gap: 0 24px;border-bottom: 1px solid var(--clr-disable)} .es-block .desc{font-size: 14px;line-height:22px;margin:8px 0 32px;text-align:left} .generic-step .t{font-family:SFR-Bold;margin-bottom:8px} .es-block .toggles a{margin-top:8px} .toggles label {cursor: pointer;font-size: 14px;line-height: 22px;border-radius: 8px;background-color: transparent;font-family: 'SFR-Bold';border: 1px solid var(--clr-black);padding: 10px 23px;min-width:76px;text-align:center} .toggles input:checked + label{ background-color: var(--clr-black);color: #fff;transition: all.2s} .toggles.generic-step div {min-height: 40px;} .es-block.results .h {display: flex;justify-content: space-around;align-items: center;padding:24px 80px;background: #469e94;border-radius: 12px;width:100%;margin-bottom:32px;color:#fff} .es-block.results .h .link3{display:table;margin-top:16px} .es-block.results .h .b{font-family: SFR-Black;font-size: 54px;line-height: 48px;text-align:center} .es-block.results .h .addi > * {display: inline-block;text-align: center} .es-block.results .h .addi .sy {margin: 0 32px;font-family:SFR-Black;font-size: 32px;line-height: 32px} .es-block.results .h .d {font-size: 14px;line-height: 22px;min-height: 36px;margin-top: 16px} .es-block.results .h .generic-bonus.big {display: inline-block;font-family: 'SFR-Black';font-size: 14px;line-height: 20px;background: url(https://static.s-sfr.fr/media/pictos/generic-bonus-big.svg);border-radius: 4px;color: var(--clr-black);width: 213px;height: 40px;text-align: right;padding: 16px 6px 0 0;margin-top: 16px;cursor:pointer;} .es-block.results .h .generic-bonus + .d {max-width: 400px;} .es-block.results .h .d img{vertical-align: middle;background: #fff;border-radius: 2px;padding: 4px 6px;margin-left: 8px;width: 72px;height: 22px;} .es-block.results .h .addi .d {display: flex;align-items: flex-end;justify-content: center} .es-block.results .h .p {font-family: SFR-Black;font-size: 32px;line-height: 32px;margin-top: 16px} .es-block.results .h .p span {font-size: 16px;line-height: 32px;vertical-align: middle} .es-block.results .l{position:relative;text-align: center} .es-block.results .l .btn, .es-block.results .l .btn4 {width: fit-content;display: inline-block;vertical-align: baseline;max-width: 100%;margin: 0 12px 24px} .es-block.results .lr {display: table;margin:0 auto} .es-block.results .link {display: inline-block;margin: 0 21px} .es-block.results label {display: block;text-align:left;margin: 24px 0 32px;padding-bottom:24px;border-bottom:1px solid var(--clr-disable)} .es-block.results label a{text-decoration:underline} .es-block.results label div{width: 20px;height: 20px;border: 1px solid var(--clr-disable);border-radius: 4px;background-color: var(--clr-disable);display: inline-block;cursor: pointer;vertical-align: middle;margin-top: -2px} .es-block.results label span{font-size: 14px;line-height: 22px;margin-left: 4px;cursor: pointer} .es-block.results input:checked + label div + span{font-family:SFR-Bold;color:var(--clr-black)} .es-block.results input:checked + label div{border:0;background-color:var(--clr-green);position:relative;display:inline-block} .es-block.results input:checked + label div:after{content:"";width:14px;height:14px;position:absolute;top:3px;right:0;left:0;margin:auto;background:url(//static.s-sfr.fr/assets/pictos/check_40_blanc.svg) center/contain no-repeat, var(--clr-green)} .es-block.results .err {display: block;color: var(--clr-sfr2);font-size: 14px;line-height: 22px;margin-top: 8px;} .es-block.results input:checked + label .err {display: none;} .es-block.results .err:before {content: '';display: inline-block;position: relative;background: url(https://static.s-sfr.fr/assets/pictos/croix_40_rouge.svg);width: 16px;height: 16px;background-size: contain;top: 3px;margin-right: 4px;} .detect-viewport-entry--waiting-detection{transition-delay:0s!important;transition-duration:0s!important;} bol-price.white{color:#fff;} bol-price.black{color:#000;} bol-price.colored{color:var(--clr-sfr2);} bol-price.bold{font-family:SFR-Black;} bol-price.old_prix{font-family:SFR-Light;font-size:12px;line-height:18px;margin:0;text-decoration:line-through;} bol-price .exp{font-size:10px;} bol-price.price_option .exp{font-size:inherit;vertical-align:baseline;} .progress_bar{background-image:linear-gradient(90deg,#872386,#e30613);bottom:0;display:none;height:3px;left:0;position:absolute;right:0;z-index:-1;} .progress_bar.mobile{display:block;min-width:8px;z-index:0;} .progress_bar.home{display:none;min-width:1%;position:inherit;z-index:3;} .photo_credit{background:#fff;border-bottom:1px solid #e9e9e9;padding:0 32px;} .photo_credit .wrapper{margin:40px auto 0;max-width:1280px;padding:30px 0;} .photo_credit .wrapper .title{color:#222;margin-bottom:14px;} .slide.show{animation:slidein .15s cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;transform:translateX(0);webkit-animation:slidein .15s cubic-bezier(0,0,.2,1);webkit-animation-fill-mode:forwards;} .slide.hide{animation:slideout .15s cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;webkit-animation:slideout .15s cubic-bezier(0,0,.2,1);webkit-animation-fill-mode:forwards;} @-webkit-keyframes slidein{0%{transform:translate3d(100%,0,0);visibility:visible;} to{transform:translateZ(0);} } @keyframes slidein{0%{transform:translate3d(100%,0,0);visibility:visible;} to{transform:translateZ(0);} } @-webkit-keyframes slideout{0%{transform:translateZ(0);} to{transform:translate3d(100%,0,0);visibility:hidden;} } @keyframes slideout{0%{transform:translateZ(0);} to{transform:translate3d(100%,0,0);visibility:hidden;} } #toast-container.toast-container>.ngx-toastr{background-position:15px;background-repeat:no-repeat;background-size:24px;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);height:85px;margin:0 0 6px;overflow:hidden;padding:16px;position:relative;top:86px;width:320px;} #toast-container.toast-container>.ngx-toastr.toast-error{background:#FFF0F0;padding:24px;height:auto;border-radius: 8px 0 0 8px;} #toast-container.toast-container>.ngx-toastr.toast-error .toast-progress{background:var(--clr-sfr2) !important;} #toast-container.toast-container>.ngx-toastr.slide.toast-error:before {content: '';background: url(//static.s-sfr.fr/assets/pictos/fermer_40_noir.svg);display: inline-block;width: 24px;height: 24px;background-size: contain;vertical-align: middle;} #toast-container.toast-container>.ngx-toastr.toast-info{background:#fff;padding:24px;height:auto;border-radius: 8px 0 0 8px;} #toast-container.toast-container>.ngx-toastr.toast-info{background:#FFF4E0;color:var(--clr-black);padding:24px;height:auto;border-radius: 8px 0 0 8px;} #toast-container.toast-container>.ngx-toastr.slide.toast-info:before {content: '';background: url(//static.s-sfr.fr/assets/pictos/attention_40_noir.svg);display: inline-block;width: 24px;height: 24px;background-size: contain;vertical-align: middle;} #toast-container.toast-container>.ngx-toastr.toast-success{background:#E8F8F0;padding:24px;height:auto;border-radius: 8px 0 0 8px;} #toast-container.toast-container>.ngx-toastr.toast-success .toast-progress{background:var(--clr-green) !important;} #toast-container.toast-container>.ngx-toastr.slide.toast-success:before {content: '';background: url(//static.s-sfr.fr/assets/pictos/check_cercle_plein_40_noir.svg);display: inline-block;width: 24px;height: 24px;background-size: contain;vertical-align: middle;} #toast-container.toast-container>.ngx-toastr.toast-warning{background:#FFF4E0;padding:24px;height:auto;border-radius: 8px 0 0 8px;} #toast-container.toast-container>.ngx-toastr.slide.toast-warning:before {content: '';background: url(//static.s-sfr.fr/assets/pictos/attention_40_noir.svg);display: inline-block;width: 24px;height: 24px;background-size: contain;vertical-align: middle;} #toast-container.toast-container>.ngx-toastr.toast-warning .toast-progress{background:#FF9300 !important;} .toast-close-button{content:"";cursor:pointer;display:block;height:20px;position:absolute;right:16px;top:16px;width:20px;right: -8px;top: -8px;} .toast-close-button:after,.toast-close-button:before{background-color:#181848;content:"";height:2px;position:absolute;width: 18px;right: 0;top: 0;} .toast-close-button:before{transform:rotate(45deg);} .toast-close-button:after{transform:rotate(-45deg);} #toast-container.toast-container>.ngx-toastr.toast-error .custom-title,#toast-container.toast-container>.ngx-toastr.toast-info .custom-title,#toast-container.toast-container>.ngx-toastr.toast-success .custom-title,#toast-container.toast-container>.ngx-toastr.toast-warning .custom-title{color:var(--clr-sfr2);} #toast-container.toast-container>.ngx-toastr.toast-error .toast-message,#toast-container.toast-container>.ngx-toastr.toast-info .toast-message,#toast-container.toast-container>.ngx-toastr.toast-success .toast-message,#toast-container.toast-container>.ngx-toastr.toast-warning .toast-message{color: var(--clr-black);font-size: 14px;line-height: 20px; width: calc(100% - 60px);display: inline-block;vertical-align: middle;margin-left: 16px;} .layout_main-container{min-height:400px;} .avis_bloc .avis_bloc_top{margin:auto;max-width:1280px;padding:32px 15px 15px;} .avis_bloc .avis_bloc_top>div:first-child{font-family:SFR-Bold;font-size:16px;margin-bottom:16px;} .avis_bloc .avis_bloc_top>div:last-child{display:flex;font-size:16px;} .avis_bloc .avis_bloc_top>div:last-child span{margin-right:18px;} .avis_bloc .list{display:flex;flex-wrap:wrap;margin:auto;max-width:1280px;} .avis_bloc .list li{flex:1;margin:15px;max-width:513px;min-width:345px;position:relative;} bol-mobile-note .bl_note{align-items:center;display:flex;margin-bottom:24px;} bol-mobile-note .bl_note .note{background:url(https://static.s-sfr.fr/media/sprite-avis.png) top no-repeat;color:var(--clr-black);font-size:14px;height:17px;line-height:1.43;margin:0 4px;overflow:hidden;width:85px;} bol-mobile-note .bl_note .note.rating1{background-position:center -17px;} bol-mobile-note .bl_note .note.rating2{background-position:center -34px;} bol-mobile-note .bl_note .note.rating3{background-position:center -51px;} bol-mobile-note .bl_note .note.rating4{background-position:center -68px;} bol-mobile-note .bl_note .note.rating5{background-position:center -85px;} bol-mobile-note .bl_note a{color:var(--clr-grey);text-decoration:underline;} .bl_exlu_web{display:inline-block;padding-bottom:10px;position:relative;} .bl_exlu_web i.debit{background:url(https://static.s-sfr.fr/media/d-bit.svg) no-repeat 50%;display:inline-block;height:10px;margin-right:3px;width:10px;} .bl_exlu_web i.debit.up{transform:rotate(180deg);} .bl_exlu_web .md{margin-bottom:16px;} .bl_exlu_web .Title{background:var(--clr-yellow);border-bottom-left-radius:0;border-radius:4px;color:var(--clr-black);display:inline-block;font-family:SFR-Bold;font-size:10px;line-height:18px;margin-bottom:5px;padding:0 6px;position:relative;text-transform:uppercase;} .bl_exlu_web .Title:before{background:var(--clr-yellow);bottom:-7px;clip-path:polygon(100% 0,0 0,0 100%,15% 70%,30% 50%,50% 30%,70% 15%,80% 5%);content:"";display:block;height:7px;left:0;position:absolute;webkit-clip-path:polygon(100% 0,0 0,0 100%,15% 70%,30% 50%,50% 30%,70% 15%,80% 5%);width:10px;} .bl_exlu_web .Desc{align-items:center;border-left:5px solid var(--clr-yellow);border-radius:12px;display:flex;justify-content:space-between;margin:5px 0;position:relative;width:252px;z-index:0;} .bl_exlu_web .Desc:before{background:url(https://static.s-sfr.fr/media/bl-promo.png) 0 0 no-repeat;top:-6px;} .bl_exlu_web .Desc:after,.bl_exlu_web .Desc:before{content:"";display:block;height:20px;left:-5px;position:absolute;width:103px;} .bl_exlu_web .Desc:after{background:url(https://static.s-sfr.fr/media/bl-promo.png) 0 100% no-repeat;bottom:-6px;z-index:0;} .bl_exlu_web .Desc bol-price{font-size:inherit;} .bl_exlu_web .Desc bol-price,.bl_exlu_web .Desc bol-price b{font-family:SFR-Black;} .bl_exlu_web .Desc .clientOffer{border-left:1px solid #b3b3b3;padding-left:10px;width:90px;} .bl_exlu_web .Desc .clientOffer p{display:flex;font-family:SFR-Regular,Arial,sans-serif;font-family:SFR-Bold;font-size:16px;text-transform:uppercase;} .bl_exlu_web .Desc .clientOffer p:first-child:before{border:3px solid var(--clr-sfr2);content:"";display:block;margin-right:4px;max-height:9px;max-width:9px;min-width:9px;} .bl_exlu_web .Desc>.main{background:linear-gradient(90deg,rgba(0,0,0,.1),hsla(0,0%,100%,0) 30%);border-radius:12px;padding:10px 0 15px 10px;position:relative;z-index:1;} .bl_exlu_web .Desc .YellowTitle{color:var(--clr-yellow);font-family:SFR-Bold;font-size:18px;} .bl_exlu_web .Desc .Prix{color:var(--clr-sfr2);font-family:SFR-Black;font-size:60px;line-height:1;width:fit-content;width:-moz-fit-content;width:-webkit-fit-content;} .bl_exlu_web .Desc .Prix sup{font-family:SFR-Black;font-size:29px;line-height:1;} .bl_exlu_web .Desc .Prix span{font-family:SFR-Regular;font-size:14px;line-height:1.5;margin-left:-15px;white-space:nowrap;} .bl_exlu_web .Desc .Prix span.price-part-alternative{margin-left:-36px;} .bl_exlu_web .Desc .Prix span .old_prix{color:var(--clr-black);font-family:SFR-Light;text-decoration:line-through;} .bl_exlu_web .Desc .CustomPrice{font-family:SFR-Black;font-size:33px;line-height:1;} .bl_exlu_web .Desc .Text{font-size:12px;line-height:18px;} .bl_exlu_web .old-price-bloc bol-price{font-size:20px;} .bl_exlu_web .old-price-bloc bol-price sup{font-size:12px;} .bl_exlu_web .old-price-bloc bol-price span{font-size:9px;margin-left:-7px;} .bl_exlu_web.bl_exlu_web--pink-color .Title,.bl_exlu_web.bl_exlu_web--pink-color .Title:before{background-color:#f193bd;} .bl_exlu_web.bl_exlu_web--pink-color .Desc{border-color:#f193bd;} .bl_exlu_web.bl_exlu_web--pink-color .Desc .YellowTitle{color:#f193bd;} .bl_exlu_web.bl_exlu_web--pink-color .Desc:after,.bl_exlu_web.bl_exlu_web--pink-color .Desc:before{background-image:url(https://static.s-sfr.fr/media/bl-promo--pink-color.png);} .bl_exlu_web.bl_exlu_web--brand-color .Title,.bl_exlu_web.bl_exlu_web--brand-color .Title:before{background-color:var(--clr-sfr2);color:#fff;} .bl_exlu_web.bl_exlu_web--brand-color .Desc{border-color:var(--clr-sfr2);} .bl_exlu_web.bl_exlu_web--brand-color .Desc .YellowTitle{color:var(--clr-sfr2);} .bl_exlu_web.bl_exlu_web--brand-color .Desc:after,.bl_exlu_web.bl_exlu_web--brand-color .Desc:before{background-image:url(https://static.s-sfr.fr/media/bl-promo--brand-color.png);} .bl_exlu_web .bl_img_version img{max-height:180px;max-width:270px;} .bl_exlu_web .bl_btn .btn{margin:inherit;} .bl_exlu_web .old-price-bloc{align-items:center;background-color:var(--clr-black);border-radius:3px;display:inline-flex;flex-direction:column;height:47px;min-width:74px;padding:5px;position:relative;} .bl_exlu_web .old-price-bloc:before{background-color:inherit;border:inherit;border-radius:3px;clip-path:polygon(0 0,100% 100%,0 100%);content:"";display:block;height:13px;left:0;position:absolute;top:-9px;webkit-clip-path:polygon(0 0,100% 100%,0 100%);width:13px;z-index:-1;} .bl_exlu_web .old-price-bloc .instead{color:#fff;font-family:SFR-Regular,Arial,sans-serif;font-family:SFR-Bold;font-size:11px;text-transform:uppercase;} .bl_exlu_web .old-price-bloc .old-price{color:#fff;display:flex;font-family:SFR-Regular,Arial,sans-serif;font-family:SFR-Bold;height:100%;justify-content:center;width:100%;} .bl_exlu_web .old-price-bloc .old-price .price{bottom:-5px;font-size:20px;height:100%;letter-spacing:-.6px;position:relative;} .bl_exlu_web .old-price-bloc .old-price .month{display:flex;flex-direction:column;height:100%;justify-content:flex-end;} .bl_exlu_web .old-price-bloc .old-price .month p{font-size:9px;} .bl_exlu_web .old-price-bloc .old-price .month p:first-child{font-size:12px;width:20px;} .bl_exlu_web .old-price-bloc .old-price .euro{font-size:20px;} bol-card-block-form .bl_contenu .contenu_bloc{border:1px solid var(--clr-disable);border-radius:12px;margin:0 auto;max-width:1280px;padding:40px;} bol-card-block-form .bl_contenu .contenu_bloc .contenu_bloc_elt{margin-bottom:25px;} bol-card-block-form .bl_contenu .contenu_bloc .bold{font-family:SFR-Bold;} bol-card-block-form .bl_contenu .contenu_bloc .flex{display:flex;flex-wrap:wrap;} bol-card-block-form .bl_contenu .contenu_bloc .img img{margin-right:20px;max-height:60px;} bol-card-block-form .bl_contenu .contenu_bloc .form-line{cursor:pointer;margin-left:35px;position:relative;} bol-card-block-form .bl_contenu .contenu_bloc .form-line:before{border:1px solid var(--clr-grey);content:"";display:block;height:22px;left:-35px;position:absolute;top:50%;transform:translateY(-50%);width:22px;} bol-card-block-form .bl_contenu .contenu_bloc .form-line.active:after{background:url(//static.s-sfr.fr/assets/pictos/check_40_vert.svg) 100% no-repeat;content:"";display:block;height:22px;left:-37px;position:absolute;top:50%;transform:translateY(-50%);width:22px;} bol-card-block-form .bl_contenu .contenu_bloc .link-more{color:#222;display:inline-block;font-family:SFR-Regular;font-size:12px;margin-left:15px;text-decoration:underline;} bol-card-block-form .bl_contenu .contenu_bloc .desc{color:var(--clr-black);font-size:14px;line-height:20px;} bol-card-block-form .bl_contenu .contenu_bloc .desc p{margin-bottom:25px;} bol-bloc-add-mobile{align-items:center;border:1px solid var(--clr-disable);border-radius:12px;box-sizing:border-box;display:flex;flex:1;flex-direction:column;height:90px;justify-content:center;margin:0 12px;padding:16px;position:relative;} bol-bloc-add-mobile .bloc-bottom{padding:10px 15px 0;text-align:center;width:100%;} bol-bloc-mobile{border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.16);box-sizing:border-box;display:flex;flex:1;height:90px;margin:0 12px;padding:16px;position:relative;} bol-bloc-mobile .btn-close{background-image:url(https://static.s-sfr.fr/media/close-r.svg);background-repeat:no-repeat;background-size:cover;cursor:pointer;height:16px;position:absolute;right:-4px;top:-4px;width:16px;} bol-bloc-mobile .bloc-left{align-items:center;display:flex;justify-content:center;margin-right:10px;} bol-bloc-mobile .bloc-left img{max-height:60px;min-height:58px;} bol-bloc-mobile .bloc-right{display:flex;flex-direction:column;justify-content:center;} bol-bloc-mobile .bloc-right bol-price{font-size:22px;} bol-bloc-mobile .bloc-right>div:first-child{color:#222;font-family:SFR-Bold;font-size:16px;padding-bottom:5px;} bol-bloc-mobile .bloc-right>div:last-child{color:var(--clr-grey);font-size:12px;} .bl_contenu {max-width: calc(100% - 32px);margin: 0 auto;} .bl_contenu .contenu_bloc{background:#fff;border-radius:12px;} .bl_contenu .contenu_bloc,.bl_contenu .contenu_bloc_no_border{margin:0 auto;max-width:1280px;padding:8px 0;} .bl_contenu .contenu_bloc_no_border ul.bloc,.bl_contenu .contenu_bloc ul.bloc{border-bottom:1px solid var(--clr-disable);padding:0 40px;} .bl_contenu .contenu_bloc_no_border ul.bloc:last-child,.bl_contenu .contenu_bloc ul.bloc:last-child{border:none;} .bl_contenu .contenu_bloc_no_border ul.bloc>li,.bl_contenu .contenu_bloc ul.bloc>li{border-bottom:1px solid var(--clr-disable);padding:12px 0;} .bl_contenu .contenu_bloc_no_border ul.bloc>li:last-child,.bl_contenu .contenu_bloc ul.bloc>li:last-child{border:none;} .bl_contenu .contenu_bloc_no_border ul.bloc>li h3,.bl_contenu .contenu_bloc_no_border ul.bloc>li h4,.bl_contenu .contenu_bloc ul.bloc>li h3,.bl_contenu .contenu_bloc ul.bloc>li h4{margin-bottom:12px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li .desc,.bl_contenu .contenu_bloc ul.bloc>li .desc{color:var(--clr-black);font-size:14px;line-height:20px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li .desc.margin,.bl_contenu .contenu_bloc ul.bloc>li .desc.margin{margin-bottom:12px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li .elem_desc,.bl_contenu .contenu_bloc ul.bloc>li .elem_desc{padding-bottom:12px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li .bl_flex,.bl_contenu .contenu_bloc ul.bloc>li .bl_flex{display:flex;} .bl_contenu .contenu_bloc_no_border ul.bloc>li .bl_flex>ul,.bl_contenu .contenu_bloc ul.bloc>li .bl_flex>ul{margin-bottom:12px;margin-right:60px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li form,.bl_contenu .contenu_bloc ul.bloc>li form{display:flex;margin:10px 0 24px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li form .input,.bl_contenu .contenu_bloc ul.bloc>li form .input{border:1px solid var(--clr-grey);border-radius:4px;color:#222;display:inline-block;font-size:16px;line-height:39px;margin-right:10px;max-width:312px;overflow:hidden;padding:0 14px;width:100%;} .bl_contenu .contenu_bloc_no_border ul.bloc>li form .autocomplete-container,.bl_contenu .contenu_bloc ul.bloc>li form .autocomplete-container{margin-right:12px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li form .submit,.bl_contenu .contenu_bloc ul.bloc>li form .submit{background-color:#222;border-radius:10px;color:#fff;cursor:pointer;display:block;font-family:SFR-Black;font-size:10px;height:40px;letter-spacing:.7px;line-height:39px;overflow:hidden;padding:0 20px;text-align:center;text-transform:uppercase;} .bl_contenu .contenu_bloc_no_border ul.bloc .no-bottom-line,.bl_contenu .contenu_bloc ul.bloc .no-bottom-line{border:none;} .bl_contenu .contenu_bloc .avantages,.bl_contenu .contenu_bloc_no_border .avantages{display:flex;justify-content:center;margin-top:40px;} .bl_contenu .contenu_bloc .avantages li,.bl_contenu .contenu_bloc_no_border .avantages li{flex:1;margin:0 15px;max-width:230px;text-align:center;} .bl_contenu .contenu_bloc .avantages li.noborder,.bl_contenu .contenu_bloc_no_border .avantages li.noborder{border:none;} .bl_contenu .contenu_bloc .avantages li h4,.bl_contenu .contenu_bloc_no_border .avantages li h4{margin-bottom:4px;padding:0 2px;} .bl_contenu .contenu_bloc .avantages li .img,.bl_contenu .contenu_bloc_no_border .avantages li .img{align-items:center;display:flex;height:38px;justify-content:center;margin-bottom:12px;} .bl_contenu .contenu_bloc .avantages li .img img,.bl_contenu .contenu_bloc_no_border .avantages li .img img{max-height:38px;width:auto;} .bl_contenu .contenu_bloc .bl_link,.bl_contenu .contenu_bloc_no_border .bl_link{margin-top:20px;} .bl_contenu .contenu_bloc .debit,.bl_contenu .contenu_bloc_no_border .debit{display:flex;padding:12px 0 40px;} .bl_contenu .contenu_bloc .debit p,.bl_contenu .contenu_bloc_no_border .debit p{color:var(--clr-sfr2);font-family:SFR-Bold;font-size:19px;margin-right:30px;} .bl_contenu .contenu_bloc .debit p i,.bl_contenu .contenu_bloc_no_border .debit p i{background:url(https://static.s-sfr.fr/media/debit-down.svg) 50% no-repeat;display:inline-block;height:17px;margin-right:8px;width:17px;} .bl_contenu .contenu_bloc .debit p.up i,.bl_contenu .contenu_bloc_no_border .debit p.up i{transform:rotate(180deg);} .bl_contenu .contenu_bloc_no_border ul.liste,.bl_contenu .contenu_bloc ul.liste{display:flex;justify-content:space-between;} .bl_contenu .contenu_bloc_no_border ul.liste li,.bl_contenu .contenu_bloc ul.liste li{flex:1;margin:0 10px;text-align:center;} .bl_contenu .contenu_bloc_no_border ul.liste li .bl_img,.bl_contenu .contenu_bloc ul.liste li .bl_img{background:var(--clr-bg);border-radius:90px;height:100px;margin:0 auto 12px;overflow:hidden;width:100px;} .bl_contenu .contenu_bloc_no_border ul.liste li .bl_img img,.bl_contenu .contenu_bloc ul.liste li .bl_img img{height:100px;width:100px;} .bl_notice{background:#fff;border-bottom:1px var(--clr-disable);border-color:var(--clr-disable);border-style:solid;padding:0 32px;} .bl_notice>.wrapper{margin:auto;max-width:1280px;} .bl_notice .bl_link{padding:24px 0;text-align:center;} .bl_notice .bl_link .link{font-family:SFR-Regular;} .bl_notice .desc_notice{display:none;margin-bottom:24px;} .bl_notice .desc_notice.active{display:block;} .bl_notice li:before{content:"• ";} body.Media .bl_notice .desc_notice.Text500{color:#444;} .features_bloc_phone_add{background:#fff;padding:24px 0;} bol-plan-card-block .migration{margin-top:10px;} bol-mobile-avis-block{display:flex;flex-direction:column;justify-content:center;padding-block-end:40px;webkit-padding-after:40px;} bol-mobile-avis-block .avis_bloc .avis_bloc_top{margin:auto;max-width:1280px;padding:32px 15px 15px;} bol-mobile-avis-block .avis_bloc .avis_bloc_top>div:first-child{font-family:SFR-Bold;font-size:16px;margin-bottom:16px;} bol-mobile-avis-block .avis_bloc .avis_bloc_top>div:last-child{display:flex;font-size:16px;} bol-mobile-avis-block .avis_bloc .avis_bloc_top>div:last-child span{margin-right:18px;} bol-mobile-avis-block .avis_bloc .list{display:flex;flex-wrap:wrap;margin:auto;max-width:1280px;} bol-mobile-avis-block .avis_bloc .list li{flex:1;margin:15px;max-width:513px;min-width:345px;position:relative;} bol-avis-bloc{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;} bol-avis-bloc .bloc-top{border-top:2px solid var(--clr-disable);color:#222;display:flex;font-family:SFR-Bold;margin-bottom:16px;padding-top:18px;} bol-avis-bloc .bloc-top>div:first-child{margin-right:17px;} bol-avis-bloc .bloc-bottom{color:var(--clr-black);font-size:14px;} bol-mobile-avis-block .avis_bloc .expand-bloc {margin: 24px auto 0;display: table;} .rate_bloc{display:flex;} .rate_bloc.bigger svg{height:18px;width:18px;} .rate_bloc.no-space svg{margin-left:1px;} .rate_bloc svg{margin-left:5px;} .review-count{color:var(--clr-grey);font-size:12px;text-align:center;} bol-bloc-with-sfr .bloc_with{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;min-height:175px;padding:24px;} bol-bloc-with-sfr .bloc_with .Text500,bol-bloc-with-sfr .bloc_with .title{margin-bottom:8px;} bol-bloc-with-sfr .bloc_with .bl_link{text-align:right;} bol-with-sfr-block .with_sfr_bloc .list{display: flex;justify-content: space-between;margin: auto;max-width: calc(100% - 64px);width: 1280px;gap: 40px;} bol-with-sfr-block .with_sfr_bloc .list li{flex:1;max-width:400px;list-style:none;} bol-with-sfr-block .bl_btn{text-align:center;} bol-tv-channels .title_bloc{padding:12px 40px;} bol-tv-channels .title_bloc .Text500,bol-tv-channels .title_bloc h3{margin-bottom:12px;} bol-tv-channels .search_tv{padding:24px;} bol-tv-channels .search_tv .bl_input{display:flex;margin-bottom:16px;} bol-tv-channels .search_tv .bl_input .bl_champ{margin-right:12px;width:255px;} bol-tv-channels .search_tv .bl_input .bl_champ .input-container input {border-radius: 8px;color: var(--clr-black);display: inline-block;font-size: 14px;line-height: 22px;max-width: 255px;overflow: hidden;} bol-tv-channels .search_tv .bl_input .submit{background-color:#222;border-radius:10px;color:#fff;cursor:pointer;display:inline-block;font-family:SFR-Black;font-size:10px;height:40px;letter-spacing:.7px;line-height:39px;overflow:hidden;padding:0 20px;} bol-tv-channels .category_list li{display:inline-block;margin:0 8px 8px 0;} bol-tv-channels .category_list li a {font-family: SFR-Regular;font-size: 12px;color: var(--clr-black);display: inline-block;padding: 6px 12px;border: 1px solid var(--clr-black);border-radius: 24px;text-decoration: none;transition: .5s background-color ease-out;cursor:pointer;} bol-tv-channels .category_list li a.active {background-color: var(--clr-black);color: #fff;} bol-tv-channels .channel_list{display:flex;flex-wrap:wrap;padding:24px;} bol-tv-channels .channel_list li{flex:1;margin:6px 5px;max-width:117px;min-width:117px;list-style: none;} bol-tv-channels .channel_list li a{align-items:center;border:1px solid var(--clr-disable);border-radius:4px;cursor:pointer;display:flex;height:60px;justify-content:center;} bol-tv-channels .channel_list li a img{max-height:60px;max-width:60px;} bol-tv-channels .no_channel{padding:30px;} bol-tv-channels .channel_desc{display:flex;flex-direction:row;} bol-tv-channels .channel_desc>div{padding:50px;} bol-tv-channels .channel_desc>div>img{width:100px;} bol-tv-channels .channel_desc .desc,bol-tv-channels .channel_desc h4{margin-bottom:5px;} .offres_box{color:#fff;padding:16px 0;} .offres_box .bl_desc{font-size:14px;line-height:20px;margin:24px auto;max-width:881px;text-align:center;} .offres_box .wrapper{margin:auto;max-width:1280px;} .offres_box .liste{display:flex;padding:0 0 25px;} .offres_box .liste .elem{flex:1;margin:0 15px 15px;} .offres_box .bl_btn{margin-bottom:24px;text-align:center;} .offre_box_elem{background:#222;border-radius:12px;color:#fff;height:100%;padding:24px 27px;} .offre_box_elem .img{align-items:center;display:flex;height:34px;margin-bottom:16px;} .offre_box_elem .img img{max-height:34px;} .offre_box_elem .title{color:#fff;margin-bottom:4px;} .offre_box_elem .desc{color:#fff;font-size:14px;line-height:20px;} .offre_box_elem .link{display:none;} .fil_ariane .v_mob{display:none;} .fil_ariane a i{background:50% no-repeat;display:inline-block;height:16px;margin:0 10px -3px 0;width:16px;} .fil_ariane a.back i{background-image:url(https://static.s-sfr.fr/media/prev-next-red.svg);transform:rotate(180deg);} body.Media .fil_ariane,body.Media .fil_ariane a{color:#fff;} body.Media .fil_ariane.back i,body.Media .fil_ariane a.back i{background-image:url(https://static.s-sfr.fr/media/prev-next-white.svg);} bol-title-block .bloc_TitleMenu{margin-top:10px;position:relative;z-index:3;} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc{margin-bottom:32px;} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc h1{text-align:center;} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc .h4,bol-title-block .bloc_TitleMenu .bloc_top .bl_desc h4{margin-bottom:10px;text-align:center;} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc .h4 a,bol-title-block .bloc_TitleMenu .bloc_top .bl_desc h4 a{color:inherit;} bol-title-block .bloc_TitleMenu .bloc_bot{background:var(--clr-bg);} bol-title-block .nobg{background:none!important;} bol-title-block .list{list-style-type:circle;} bol-title-block .list li:before{content:"• ";} bol-bol-layout.scrolled bol-title-block .bloc_bot.sticky{box-shadow:0 2px 4px 0 rgba(34,34,34,.16);position:fixed;top:0;width:100%;z-index:1;} body.Media .bloc_TitleMenu .bloc_top .link{color:#fff;} body.Media .bloc_TitleMenu .bloc_top .link i{background-image:url(https://static.s-sfr.fr/media/arrow-full-white.svg);} body.Media .bloc_TitleMenu .bloc_bot{background:var(--clr-black);} bol-seo-block .bloc_seo{background:#fff;padding:0 32px;} bol-seo-block .bloc_seo .wrapper{margin:auto;max-width:1280px;padding:24px 0;} bol-seo-block .bloc_seo .h6{color:var(--clr-black);margin-bottom:8px;} bol-seo-block .bloc_seo .desc{color:var(--clr-grey);font-family:SFR-Regular,Arial,sans-serif;font-size:12px;margin-bottom:10px;max-height:none;overflow:hidden;position:relative;} bol-seo-block .bloc_seo .desc:after{display:none;} bol-seo-block .bloc_seo .desc.hide{max-height:77px;} bol-seo-block .bloc_seo .desc.hide:after{background-image:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);bottom:0;clear:both;content:"";display:block;left:0;position:absolute;right:0;top:0;} bol-reprise-mobile .wrapper{margin:auto;max-width:1280px;padding:24px 0 40px;} bol-reprise-mobile .wrapper .bl_reprise{border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);padding:24px 30px;} bol-reprise-mobile .wrapper .bl_reprise ul.list_modele{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;padding:24px 0;} bol-reprise-mobile .wrapper .bl_reprise ul.list_modele>li{align-items:center;border:1px solid var(--clr-disable);border-radius:12px;cursor:pointer;display:flex;flex:1;height:72px;justify-content:center;margin:16px 30px 16px 0;max-width:160px;min-width:168px;} bol-reprise-mobile .wrapper .bl_reprise ul.list_modele>li img{max-height:45px;max-width:102px;} bol-reprise-mobile .wrapper .bl_reprise h2{margin-bottom:12px;} /*New*/ #FaqDetails {width: 1280px;max-width: calc(100% - 64px);margin: 24px auto 0;} #FaqDetails h3 {font: 16px/24px SFR-Bold;} #Faq .btn4 {width: fit-content;margin: 16px auto 0;} .bloc_reassurance .desc{font-size:14px;line-height:20px;padding-top:15px;text-align:center;} bol-recap-block .recap_bloc{padding:40px 0;} bol-recap-block .recap_bloc .list{display:flex;flex-wrap:wrap;justify-content:space-around;margin:0 auto 40px;max-width:1280px;} bol-recap-block .recap_bloc .list li{flex:1;margin:0 16px;} bol-recap-block .bl_link{text-align:center;} .recap_element{text-align:center;} .recap_element .bl_title{margin-bottom:8px;} .recap_element .img{height:40px;margin-bottom:16px;text-align:center;} .recap_element .img img{max-height:40px;} @-webkit-keyframes slideInUp{0%{transform:translate3d(0,100%,0);} to{transform:translateZ(0);visibility:visible;} } @keyframes slideInUp{0%{transform:translate3d(0,100%,0);} to{transform:translateZ(0);visibility:visible;} } body.Media .price_bar{background:#222;} body.Media .price_bar .wrapper{padding:14px 10px;} .promotion{background:var(--clr-yellow);border-radius:4px;color:var(--clr-black);display:inline-block;font-family:SFR-Bold;font-size:10px;height:18px;line-height:12px;margin-bottom:7px;margin-top:2px;padding:3px;white-space:nowrap;} bol-new-services .new_services .wrapper{align-items:center;display:flex;margin:auto;max-width:1280px;padding:40px 15px;} bol-new-services .new_services .wrapper>div{flex:1 auto;} bol-new-services .new_services .bl_txt{max-width:520px;} bol-new-services .new_services .bl_txt h2{margin-bottom:8px;} bol-new-services .new_services .bl_txt .Text700{margin-bottom:12px;} bol-new-services .new_services .bl_img{text-align:center;} bol-mobile-subtitle-block .bloc_SubTitle .wrapper{position:relative;} #telephonessansforfait .bloc_SubTitle .wrapper {margin-top: 0;} bol-mobile-subtitle-block .bloc_SubTitle .wrapper:after{clear:both;content:"";display:block;} bol-mobile-subtitle-block .bloc_SubTitle .wrapper .forfaitList{margin-bottom:40px;} bol-mobile-network-block .submit{background-color:#222;border-radius:10px;color:#fff;display:inline-block;font-family:SFR-Black;font-size:10px;height:40px;line-height:42px;margin:1px 0;padding:0 20px;} bol-mobile-network-banner .ReseauMob{background:radial-gradient(circle at 50% 50%,#e70059,#570221);padding:32px 18px;} bol-mobile-network-banner .ReseauMob>.wrapper{align-items:center;color:#fff;display:flex;margin:auto;max-width:1280px;} bol-mobile-network-banner .ReseauMob .img_bl{flex:1;max-height:380px;position:relative;text-align:center;} bol-mobile-network-banner .ReseauMob .img_bl .img_mob{display:none;} bol-mobile-network-banner .ReseauMob .img_bl img{max-height:380px;} bol-mobile-network-banner .ReseauMob .text_bl{flex:1;position:relative;} bol-mobile-network-banner .ReseauMob .text_bl:before{background:url(https://static.s-sfr.fr/media/4g-ico.svg) 50% no-repeat;content:"";display:block;height:116px;left:-40px;position:absolute;top:-82px;width:240px;} bol-mobile-network-banner .ReseauMob .text_bl.fibre:before{background:url(https://static.s-sfr.fr/media/newsfrfr/fut/assets/images/svg/fibre-white.svg) 50% no-repeat;height:73px;left:-73px;top:-46px;width:290px;} bol-mobile-network-banner .ReseauMob .text_bl .title_bl{color:#fff;margin-bottom:16px;position:relative;} bol-mobile-network-banner .ReseauMob .text_bl .Text700{color:#fff;margin-bottom:24px;} bol-mobile-network-banner .ReseauMob .text_bl .link{font-size:14px;} bol-mobile-network-banner .reseau_actu{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);margin:40px auto 16px;max-width:1280px;padding:23px 30px 27px 18px;} bol-mobile-network-banner .reseau_actu .theme{color:var(--clr-sfr2);font-family:SFR-Bold;font-size:14px;font-style:italic;margin-bottom:12px;} bol-mobile-network-banner .reseau_actu h4{font-family:SFR-Black;line-height:1;margin-bottom:16px;} bol-mobile-network-banner .reseau_actu .Text500{margin-bottom:24px;} bol-mobile-network-banner .reseau_actu .date{color:var(--clr-grey);font-size:12px;} bol-mobile-network-banner .reseau_actu .bl_link{text-align:right;} bol-network-map .map{display:inline-block;position:relative;} bol-network-map .map path{fill:#fff;fill-opacity:.3;stroke:#fff;stroke-width:1px;transition:fill .3s;} bol-mobile-menu-bottom-block .bl_footer_top{background:var(--clr-bg);padding:0 18px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper{margin:auto;max-width:1280px;padding:24px 0 32px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper h6{margin-bottom:12px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top{display:flex;justify-content:space-around;margin:auto;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top li{flex-grow:1;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top li a{color:var(--clr-black);display:inline-block;font-size:14px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top li a:hover{text-decoration:underline;} .channel-categorized{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);margin:12px 0;padding:24px 30px;} .channel-categorized .category{align-items:center;cursor:pointer;display:flex;justify-content:space-between;} .channel-categorized .channel_container{display:flex;flex-wrap:wrap;padding-top:24px;} .channel-categorized .channel_container>li{flex:1;margin:8px;max-width:16%;min-width:140px;width:16%;} .channel-categorized .channel_container p{margin-bottom:16px;} .channel-categorized .channel_container .bl_link{text-align:right;} .channel-categorized .channel_container+.link{cursor:pointer;display:flex;font-size:14px;justify-content:center;margin-top:10px;text-decoration:underline;} .channel-categorized .channel-card{align-items:center;background:#222;border-radius:12px;color:#fff;display:flex;flex-direction:column;height:100%;justify-content:center;padding:16px 30px;} .channel-categorized .channel-card .channel-card-name{font-size:14px;margin:4px 0;text-align:center;} .channel-categorized .channel-card .channel-card-number{font-family:SFR-Regular;font-size:12px;margin-bottom:10px;} .channel-categorized .channel-card .bl_img img{max-height:70px;max-width:70px;} .channel-categorized .channel-card .actions{align-items:center;justify-content:center;} .channel-categorized .channel-card .actions img{margin:0 4px;max-height:16px;} .channel-categorized.active .channel_container{display:block;} body.Media .channel-categorized .category h4 span{font-family:SFR-Regular;font-size:16px;} body.Media .channel-categorized{background:#222;color:#fff!important;} body.Media .channel-categorized .channel_container{color:#fff!important;} body.Media .channel-categorized .link{color:#fff;} .bl_contenu_media{margin:auto;max-width:1280px;} .bl_contenu_media .elem_contenu{align-items:center;display:flex;justify-content:space-between;padding:60px 0;} .Media .bl_contenu_media .elem_contenu{color:#fff;} .bl_contenu_media .elem_contenu>div{margin:0 15px;} .bl_contenu_media .elem_contenu .bl_img{max-width:490px;min-width:300px;} .bl_contenu_media .elem_contenu .bl_img img{height:auto;max-width:100%;width:auto;} .bl_contenu_media .elem_contenu .bl_txt{max-width:500px;min-width:350px;} .bl_contenu_media .elem_contenu .bl_txt .title{margin-bottom:24px;} .Media .bl_contenu_media .elem_contenu .bl_txt .Text500{color:#fff;} .bl_contenu_media .elem_contenu .bl_txt .Text500 p{margin-bottom:12px;} .bl_contenu_media .elem_contenu:nth-child(2n){flex-direction:row-reverse;} .bl_all_channels{margin:auto;width:1280px;max-width:calc(100% - 64px);} .bl_all_channels .title_bl{margin-bottom:16px;} .bl_all_channels .dark{background-color:#222;color:#fff;} .bl_all_channels .light{background-color:#fff;} .bl_all_channels ul{display:flex;flex-wrap:wrap;} .bl_all_channels .bl_channels.dark > ul{list-style:none;} .bl_all_channels ul li{margin:10px;max-width:100px;min-width:100px;width:100px;} .bl_all_channels .bl_channels{border-radius:12px;margin-bottom:40px;padding:24px;} .bl_all_channels .bl_channels .elem_channel img{height:auto;max-height:74px;max-width:100px;width:auto;} .bl_all_channels .bl_channels .bl_link .link{margin:auto;text-decoration:underline;} #bl_all_channels > div:nth-child(4) > div , #bl_all_channels > div:nth-child(6) > div {display: flex;flex-wrap: wrap;gap: 40px 24px;} .error-block{height:calc(100vh - 90px);overflow:hidden;padding:0 100px;width:100%;} .error-block .wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto;max-width:1280px;padding:40px 18px 32px;position:relative;} .error-block .error-num{color:#fff;font-family:SFR-Black;font-size:450px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:-1;} .error-block .h2{color:#222;font-family:SFR-Black;font-size:34px;margin-bottom:16px;margin-top:80px;position:relative;} .error-block .h2:before{background:url(//static.s-sfr.fr/assets/pictos/question_40_rouge.svg) 50% no-repeat;background-size: cover;content:"";display:block;height:60px;left:50%;position:absolute;top:-80px;transform:translateX(-50%);width:60px;} .error-block .desc{color:var(--clr-black);font-size:14px;margin-bottom:25px;max-width:60%;} .error-block .btn{width:fit-content;margin:0 auto;} body.Media .error-block .error-num{color:#222;} body.Media .error-block .h2{color:#e9e9e9;} body.Media .error-block .desc{color:var(--clr-disable);} .bl_channels{color:#fff;margin:auto;max-width:1280px;padding:24px 0 0;} .bl_channels .title_bl{margin-bottom:16px;} .bl_channels .bl_channel{background-color:rgba(0,0,0,.05);border-radius:12px;color:var(--clr-black);padding:24px;} .bl_channels .bl_channel>div{display:flex;flex-wrap:wrap;gap:16px} .bl_channels .bl_channel .elem_channel{align-items:center;display:flex;flex-direction:column;min-width:100px;} .bl_channels .bl_channel .elem_channel img{height:auto;max-height:74px;max-width:100px;width:auto;} body.Media .bl_channels{color:#fff;} body.Media .bl_channels .bl_channel{background-color:#222;color:#fff;} .bl_assis_connect{color:#fff;margin:auto;max-width:1280px;padding:40px 15px 48px;text-align:center;} .bl_assis_connect .title{margin-bottom:8px;} .bl_assis_connect .Text500{color:#fff;margin:auto;max-width:335px;} .bl_bons_plans{padding:0 0 36px;} .bl_bons_plans .bl_link{margin-bottom:12px;text-align:center;} .nav_list{display:flex;justify-content:center;margin-top:17px;} .nav_list.nav_list--hidden{display:none;} .nav_list .elem_nav{cursor:pointer;height:4px;margin:0 5px;position:relative;width:30px;} .nav_list .elem_nav:after{background-color:var(--clr-disable);content:"";height:4px;left:0;position:absolute;top:0;transition:background .3s linear;width:30px;} .nav_list .elem_nav.active{background:var(--clr-sfr2);cursor:default;} .nav_list .elem_nav.active.active:after{background-color:transparent;} .bl_download_file{background:var(--clr-sfr2);padding:0 18px;} .bl_download_file .wrapper{margin:auto;max-width:1280px;padding:48px 0;text-align:center;} .bl_download_file .bl_title{color:#fff;margin-bottom:16px;} .bl_download_file .Text700{color:#fff;margin-bottom:24px;} .bl_steps_contact{border-top:1px solid var(--clr-disable);padding:48px 18px;} .bl_steps_contact .wrapper{margin:auto;max-width:1280px;text-align:center;} .bl_steps_contact .bl_desc{margin:0 auto 48px;max-width:810px;} .bl_steps_contact .list_steps{display:flex;justify-content:space-evenly;} .bl_steps_contact .list_steps .elem_list_steps{margin:0 15px;max-width:280px;} bol-steps-contact .bloc_faq{padding:0;} .elem_step_contact .bl_img{margin-bottom:24px;} .elem_step_contact .bl_img img{max-height:38px;width:auto;} .elem_step_contact .title_elem{margin-bottom:24px;} .popin-subvention.overlay{background-color:rgba(0,0,0,.5);bottom:0;height:100%;left:0;padding:10px;position:fixed;right:0;top:0;z-index:99;} .popin-subvention.overlay,.popin-wrapper{align-items:center;display:flex;justify-content:center;width:100%;} .popin-wrapper{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);flex-direction:column;max-height:100%;max-width:880px;overflow-y:auto;padding:40px 20px 25px;position:relative;} .popin-wrapper .popin-title{display:block;margin:0 auto 35px;max-width:80%;text-align:center;} .popin-wrapper picture{max-width:unset;} .popin-wrapper picture img{display:block;margin:0 auto;max-width:unset;} .popin-logo{margin-bottom:35px;text-align:center;} .popin-logo img{margin:0 10px;max-width:200px;width:45%;} .popin-content{max-width:80%;} .popin-content p{font-size:14px;margin-bottom:30px;text-align:center;} .popin-footer{align-items:center;display:flex;flex-direction:column;} .bl_loader_page{align-items:center;background-color:hsla(0,0%,100%,.97);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:99999;} .bl_loader_page .wrapper:after {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 102px;width: 102px;color: var(--clr-sfr2);display: inline-block;border: 6px solid;border-radius: 50%;border-top-color: transparent;animation: rotate 1s linear infinite;} .bl_loader_page .wrapper:before {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background: url(https://static.s-sfr.fr/assets/logos/SFR.svg);background-repeat:no-repeat;width: 45px;height: 44px} .bl_loader_page .wrapper .bl_text.h3 {font-family:SFR-Bold;font-size: 16px;margin-top: 162px;text-align:center;} @-webkit-keyframes lds-ring{0%{transform:rotate(0deg);} to{transform:rotate(1turn);} } @keyframes lds-ring{0%{transform:rotate(0deg);} to{transform:rotate(1turn);} } body.Media .bl_loader_page .bl_text{color:#222;} .bl_table_garanties{padding:24px 18px;} .bl_table_garanties .wrapper{margin:auto;max-width:1280px;} .bl_table_garanties .wrapper.tables{display:flex;} .bl_table_garanties .tab_garantie{background:#fff;border-radius:12px;box-shadow:0 8px 16px rgba(24,24,24,.08);flex:1;height:min-content;height:-moz-min-content;height:-webkit-min-content;margin:24px auto;overflow:hidden;text-align:center;} .bl_table_garanties .tab_garantie:nth-child(2){margin-left:30px;} .bl_table_garanties .tab_garantie.type2{text-align:left;} .bl_table_garanties .tab_garantie.type2 .tr>div{color:#222;font-family:SFR-Bold;line-height:normal;} .bl_table_garanties .tab_garantie.type3{max-width:700px;} .bl_table_garanties .tab_garantie.type3 .tr>div{color:#222;font-family:SFR-Bold;line-height:normal;} .bl_table_garanties .tab_garantie .tr{display:flex;} .bl_table_garanties .tab_garantie .tr>div{border-bottom:1px solid #e9e9e9;border-left:1px solid #e9e9e9;color:var(--clr-black);flex:1;font-size:14px;line-height:20px;padding:16px 24px;} .bl_table_garanties .tab_garantie .tr>div span{margin-left:10px;} .bl_table_garanties .tab_garantie .tr>div span img{height:14px;width:14px;} .bl_table_garanties .tab_garantie .tr>div:first-child{border-left:none;} .bl_table_garanties .tab_garantie .tr>div.align_left{text-align:left;} .bl_table_garanties .tab_garantie .tr.th{background:var(--clr-disable);} .bl_table_garanties .tab_garantie .tr.th>div{color:#222;font-family:SFR-Bold;font-size:19px;line-height:1.37;} .bl_table_garanties .tab_garantie .tr.title{background:#e9e9e9;} .bl_table_garanties .tab_garantie .tr.title>div{font-family:SFR-Bold;font-size:14px;padding:8px 24px;} .bl_table_garanties .tab_garantie .tr.title>div span{color:var(--clr-black);display:block;font-family:SFR-Light;margin:0;} .bl_table_garanties .Text200{margin-bottom:24px;} .bl_table_garanties .Text200 p{margin-bottom:16px;} .bl_table_garanties .bl_link{align-items:center;display:flex;padding:24px 0;} .bl_table_garanties .bl_link .link{padding:0 23px;} .bl_table_garanties .bl_link:after,.bl_table_garanties .bl_link:before{background-color:#e9e9e9;content:"";display:block;flex:1;height:2px;} .bl_table_garanties .bl_title{font-family:SFR-Black;font-size:34px;line-height:1;margin:30px 0 24px;text-align:center;} .bl_table_garanties .bl_desc{margin-bottom:12px;text-align:center;} .bl_partner_sites{background:var(--clr-sfr2);padding:0 18px;} .bl_partner_sites>.wrapper{align-items:center;display:flex;margin:auto;max-width:1280px;padding:10px 0;} .bl_partner_sites>.wrapper .bl_img{align-items:center;background:var(--clr-bg);border-radius:5px;display:flex;justify-content:center;margin-right:16px;min-height:40px;min-width:60px;padding:4px;} .bl_partner_sites>.wrapper .bl_img img{max-height:35px;max-width:50px;} .bl_partner_sites>.wrapper .bl_txt{color:#fff;} #partenaire .wrapper{align-items:center;display:flex;height:60px;margin:auto;max-width:1350px;padding:0 15px;} #partenaire img{max-width:80px;object-fit:contain;o-object-fit:contain;} #partenaire .description{color:#fff;font-size:12px;padding-left:2rem;} #partenaire .black{color:#000;} .Text700{color:var(--clr-black);font-family:SFR-Regular;font-size:18px;line-height:1.56;} .Text700.mobile{font-size:16px;line-height:24px} .Text500{color:var(--clr-black);font-family:SFR-Regular;font-size:14px;line-height:20px;} .Text300{font-size:12px;} .Text200,.Text300{color:var(--clr-grey);font-family:SFR-Regular;font-weight:400;} .Text200{font-size:10px!important;} .input{background-color:#fff;border:1px solid var(--clr-disable);border-radius:8px;height:42px;line-height:42px;padding:0 14px;} .input,.label{color:var(--clr-black);font-size:14px;} .label{display:inline-block;line-height:1.43;margin-bottom:4px;} .AllMobile .PhoneList li:nth-child(n+10){display:block;} .autocomplete-container .input-container input{background-color:#fff!important;border:1px solid var(--clr-disable)!important;border-radius:8px;color:#444;font-size:14px!important;height:42px!important;line-height:42px!important;padding:0 14px!important;width:100%!important;} .autocomplete-container{box-shadow:none!important;height:inherit;} #Configurateur .popin-block{display: flex;flex-flow: row wrap; gap: 16px 8px;} #Recherche .autocomplete-block.active { margin: 0 0 240px; } #Recherche .ng-autocomplete {display: inline-block;max-width: calc(100% - 40px);} #Recherche {max-width: none; width: 100%; position: relative; } #Recherche label{color:transparent;display:block;font-size:0px} #Recherche #AutocompleteBlock.active {margin-bottom:240px;} #Recherche .autocomplete-block.active {margin-bottom:240px;} #Recherche input[type="submit"]{display:inline-block;border:none;width:40px;height:40px;margin-left:-4px;vertical-align:top;background-color:#d90d25;border-left:1px solid #d90d25;color:transparent;-webkit-appearance:none;border-radius:0 8px 8px 0;background-image:url(https://static.s-sfr.fr/assets/pictos/rechercher_40_blanc.svg);background-size:22px;background-repeat:no-repeat;background-position:center center;cursor:pointer} #Recherche input[type="text"].phonelist{ border-radius: 8px 0 0 0; } #Recherche input[type="text"].phonelist + input[type="submit"]{ border-radius: 0 8px 0 0; } #Recherche>div>span { cursor: pointer; width: 100%; display: block; padding: 5px 16px; } #Recherche>div>span>img{ height: 24px; width:fit-content; margin: 0 8px 0 0; } #Recherche>div>span:hover { background-color: var(--clr-bg); }.bloc-forfaits .conf .eng{font:normal 14px/22px SFR-Bold;margin-bottom:16px;} #Recherche .autocomplete-block.active { margin: 0 0 240px; } #Recherche .ng-autocomplete {display: inline-block;max-width: calc(100% - 40px);} body.Media{background:var(--clr-black);color:#fff;} body.Media .Text500,body.Media h1,body.Media h2,body.Media h3,body.Media h4,body.Media h5,body.Media h6{color:inherit;} a.disabled{cursor:default;color:var(--clr-grey);background-color:var(--clr-disable);box-shadow:0 0 16px rgba(255,255,255,0.24);pointer-events: none;} a.disabled:hover{box-shadow:unset} .toast-center-center{left:50%;top:50%;transform:translate(-50%,-50%);} .toast-top-center{right:0;top:0;width:100%;} .toast-bottom-center{bottom:0;right:0;width:100%;} .toast-top-full-width{right:0;top:0;width:100%;} .toast-bottom-full-width{bottom:0;right:0;width:100%;} .toast-top-left{left:12px;top:12px;} .toast-top-right{right:12px;top:12px;} .toast-bottom-right{bottom:12px;right:12px;} .toast-bottom-left{bottom:12px;left:12px;} .toast-title{display:contents;font-weight:700;} .toast-message{word-wrap:break-word;} .toast-message a,.toast-message label{color:#fff;} .toast-message a:hover{color:#ccc;text-decoration:none;} .toast-close-button{color:#fff;float:right;font-size:20px;font-weight:700;position:relative;right:-.3em;text-shadow:0 1px 0 #fff;top:-.3em;} .toast-close-button:focus-visible,.toast-close-button:hover{color:#000;cursor:pointer;opacity:.4;text-decoration:none;} button.toast-close-button{background:transparent;border:0;cursor:pointer;padding:0;} .toast-container{pointer-events:none;position:fixed;z-index:999999;} .toast-container *{box-sizing:border-box;} .toast-container .ngx-toastr{background-position:15px;background-repeat:no-repeat;background-size:24px;border-radius:3px 3px 3px 3px;box-shadow:0 0 12px #999;color:#fff;margin:0 0 6px;overflow:hidden;padding:15px 15px 15px 50px;position:relative;width:300px;} .toast-container .ngx-toastr:hover{box-shadow:0 0 12px #000;cursor:pointer;opacity:1;} .toast-info{background-image:url("data:image/svg+xml;xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");} .toast-error{background-image:url("data:image/svg+xml;xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");} .toast-success{background-image:url("data:image/svg+xml;xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");} .toast-warning{background-image:url("data:image/svg+xml;xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='576' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");} .toast-container.toast-bottom-center .ngx-toastr,.toast-container.toast-top-center .ngx-toastr{margin-left:auto;margin-right:auto;width:300px;} .toast-container.toast-bottom-full-width .ngx-toastr,.toast-container.toast-top-full-width .ngx-toastr{margin-left:auto;margin-right:auto;width:96%;} .ngx-toastr{background-color:#030303;pointer-events:auto;} .toast-success{background-color:#51a351;} .toast-error{background-color:#bd362f;} .toast-info{background-color:#2f96b4;} .toast-warning{background-color:#f89406;} .toast-progress{background-color:#000;bottom:0;height:4px;left:0;opacity:.4;position:absolute;} .offre-speciale bol-addons-card {width:100%;} .offre-speciale .generic-checks label{width:auto;white-space: break-spaces;} .offre-speciale .generic-checks .content.two{display: none} .offre-speciale .generic-checks input:last-of-type:checked ~ .content.two{display: flex} .offre-speciale .generic-checks input:last-of-type:checked ~ .content.one{display: none} .offre-speciale .generic-checks label:last-of-type{margin-left: -4px} #Quelleoffrechoisir .bl-ip-container img{margin-bottom:16px;} #Quelleoffrechoisir .bl-ip-container div{max-width:50%;} #Quelleoffrechoisir .bl_offer_to_choose bol-mobile-plan-card-block{height:100%;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card{background:#fff;height:100%;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus{height:100%;display: flex;flex-direction: column;justify-content: flex-end;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus > div:first-child{margin-top:auto;padding:0 24px;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus .price{color:var(--clr-sfr2);} #Quelleoffrechoisir .bl_offer_to_choose .bl_right {border-radius: 12px; margin-bottom: 32px;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right > div:nth-child(2){min-width: 40px;align-items:center;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right > div:nth-child(2)::before{color:#fff;background:#000;top:initial;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right > div:nth-child(4){flex: 0; min-width: 40px; display: flex; justify-content: center;align-items:center;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right > div:nth-child(4)::before { content: "=";display: flex; width: 26px;height: 26px;box-shadow: 0px 8px 16px rgb(24 24 24 / 8%);background-color: #000; position: absolute; border-radius: 90px; font-size: 19px; font-family: SFR-Bold; color: #fff; justify-content: center;align-items: center;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right .BlackBloc .sub-t {font:normal 16px/24px SFR-Bold;margin:16px auto;text-align:center;-webkit-line-clamp:2} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus .sub-t {font:normal 16px/24px SFR-Bold;margin:16px auto;text-align:center;-webkit-line-clamp:2} #Quelleoffrechoisir .addons-card ul{list-style: initial; padding-left: 22px;} #Quelleoffrechoisir .addons-card bol-price{display:block;margin-bottom:0;} #Quelleoffrechoisir .addons-card .T{padding:24px; padding-bottom:0;} #Quelleoffrechoisir .addons-card .T h3{margin-bottom:8px;} #Quelleoffrechoisir .addons-card .header #BoxDePoche{width:200px ;margin-top:24px;} #Quelleoffrechoisir .addons-card.btnplus .bl_desc > p{font-size:12px;text-align:center;} #Quelleoffrechoisir .addons-card .BlackBloc{height:fit-content; padding-top:0;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card .btn{max-width:calc(100% - 48px);position:relative;bottom:24px;margin-top:auto;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus .BlackBloc{padding-bottom:12px;} #Quelleoffrechoisir .addons-card .BlackBloc .btn{bottom: 0; width: auto;position: relative;right: 0;left: 0;margin-right: 0;margin-left: 0;max-width:100%;} #Quelleoffrechoisir .bl_desc .price {justify-content: center; margin-bottom: 12px;} #Quelleoffrechoisir .bl_desc bol-price > p{font-size:14px;text-align:center;margin-bottom:8px;text-transform: initial;} #Quelleoffrechoisir .bl-ip-container{background-color: #fff; padding: 24px; border-radius: 8px; box-shadow: 0px 0px 24px 4px rgb(0 0 0 / 4%); margin-bottom:24px;display: flex;align-items: center;text-align: center;gap: 40px;} #Quelleoffrechoisir .bl-ip-container .ip-container-title {font: 14px/22px SFR-Bold;} #Quelleoffrechoisir .bl-ip-container .ip-container-subtitle {font: 14px/22px SFR-regular;} #Quelleoffrechoisir .generic-checks{width:430px;margin:0 auto;max-width:100%;} #Quelleoffrechoisir .generic-checks label:last-of-type{margin: 0 0 16px -4px;} #Quelleoffrechoisir .bl_offres{width:100%;display:flex;justify-content:center;align-items:center;min-height:32px;margin-top:21px;} #Quelleoffrechoisir .bl_offres:before{content: "+";display: flex;width: 26px;height: 26px;background-color: #000;position: absolute; border-radius: 90px;font-size: 19px;font-family: SFR-Bold; color: #fff;justify-content: center;align-items: center;} #Quelleoffrechoisir .elem h4{margin-bottom:8px;} #Quelleoffrechoisir .bl_description{font-size:16px;} #CPF .iconodebit div{max-width: calc(100% - 80px);} #CPF .col-2 .sim{flex-flow: column;} #CPF .col-2 .sim p{margin-left: 56px;} #CPF .col-2 .sim:before {content: '';position: absolute;width: 40px;height: 40px;left: 16px;top: 0;bottom: 0;margin: auto;filter: invert(56%) sepia(4%) saturate(30%) hue-rotate(89deg) brightness(97%) contrast(92%);} #CPF .col-2 input:checked + .sim:before {left: 15px;filter:unset} #CPF .col-2 .sim.ph:before {background: url(//static.s-sfr.fr/assets/pictos/sim_horizontale_40_noir.svg);background-size: cover;} #CPF .col-2 .sim.e:before {background: url(//static.s-sfr.fr/assets/pictos/e_sim_40_noir.svg);background-size: cover;} #CPF #CPbtn{padding: 24px;position: absolute; bottom:0; width:100%; background:transparent;} #CPF .iconodebit > div {margin-top:16px;} #CPF .iconodebit > h4 {margin-bottom:4px;} .CPtoggle form {width:fit-content; display:flex;gap:8px; align-items:center;} .CPtoggle form input:nth-child(1){order:2;} .CPtoggle form label:nth-child(2){order:3;} .CPtoggle form p:nth-child(3){order:1;} .CPtoggle form p:nth-child(4){order:4;} .CPtoggle {position:absolute; top:0;bottom:0;right:0;margin:auto 0;height:fit-content;} .CPtoggle form input[type="checkbox"] { transition: transform 0.75s ease; visibility: hidden;} .CPtoggle form input[type="checkbox"]:checked + .Fr:before { transform: translateX(-30px);} .CPtoggle form input[type="checkbox"]:checked + .An:before { transform: translateX(30px);} .CPtoggle form #LTan { transition: transform 0.75s ease; display: flex; width: 60px; height: 30px; border: 1px solid #000; border-radius: 99em; position: relative; transition: transform 0.75s ease-in-out; transform-origin: 50% 50%; cursor: pointer;} .CPtoggle form > .Fr:before { transition: transform 0.4s ease; transition-delay: 0.1s; content: ""; display: block; position: absolute; width: 24px; height: 24px; background-color: #000; border-radius: 50%; top: 2px; left: 32px;} .CPtoggle form > .An:before { transition: transform 0.4s ease; transition-delay: 0.1s; content: ""; display: block; position: absolute; width: 24px; height: 24px; background-color: #000; border-radius: 50%; top: 2px; left: 2px;} #CPF .bloc-w{height:100%;} #CPF #bloc-config-phone{margin-bottom:0;} #CPF #bloc-config-phone h3 {margin-bottom:16px;} #CPF .generic-option{margin-bottom:16px;)} #CPF h3 { font: normal 16px/24px SFR-Bold; background: #fff;} #CPFrecap {background:#fff;border-radius:12px;height:100%;} #CPF bol-title-block{width: 1280px;max-width: calc(100% - 64px);display: block; margin: 0 auto;position:relative;} .CPtoggle > p{width: 29%;} #CPF #bloc-config-phone .col-2{margin:0;} #CPF .btn{position:absolute;width:calc(100% - 48px); bottom:0;} #CPF .n.sep {height:calc(100% - 72px);} #Qoc .bl-ip-container img{margin-bottom:16px;} #Qoc .bl-ip-container div{max-width:50%;} #Qoc .bl_offer_to_choose bol-mobile-plan-card-block{height:100%;} #Qoc .bl_offer_to_choose .addons-card{background:#fff;} #Qoc .bl_offer_to_choose .addons-card.btnplus{height:100%;display: flex;flex-direction: column;justify-content: flex-end;} #Qoc .bl_offer_to_choose .addons-card.btnplus > div:first-child{margin-top:auto;} #Qoc .bl_offer_to_choose .addons-card.btnplus .price{color:var(--clr-sfr2);} #Qoc .bl_offer_to_choose .bl_right {border-radius: 12px; margin-bottom: 32px;} #Qoc .bl_offer_to_choose .bl_right > div:nth-child(2){min-width: 40px;align-items:center;} #Qoc .bl_offer_to_choose .bl_right > div:nth-child(2)::before{color:#fff;background:#000;top:initial;} #Qoc .bl_offer_to_choose .bl_right > div:nth-child(4){flex: 0; min-width: 40px; display: flex; justify-content: center;align-items:center;} #Qoc .bl_offer_to_choose .bl_right > div:nth-child(4)::before { content: "=";display: flex; width: 26px;height: 26px;box-shadow: 0px 8px 16px rgb(24 24 24 / 8%);background-color: #000; position: absolute; border-radius: 90px; font-size: 19px; font-family: SFR-Bold; color: #fff; justify-content: center;align-items: center;} #Qoc .bl_offer_to_choose .bl_right .BlackBloc .sub-t {font:normal 16px/24px SFR-Bold;margin:16px auto;text-align:center;-webkit-line-clamp:2} #Qoc .bl_offer_to_choose .addons-card.btnplus .sub-t {font:normal 16px/24px SFR-Bold;margin:16px auto;text-align:center;-webkit-line-clamp:2} #Qoc .addons-card ul{list-style: initial; padding-left: 22px;} #Qoc .addons-card bol-price{display:block;margin-bottom:0;} #Qoc .addons-card .T{padding:24px; padding-bottom:0;} #Qoc .addons-card .T h3{margin-bottom:8px;} #Qoc .addons-card .header #BoxDePoche{width:200px ;margin-top:24px;} #Qoc .addons-card.btnplus .bl_desc > p{font-size:12px;text-align:center;} #Qoc .addons-card .BlackBloc{height:fit-content; padding-top:0;} #Qoc .bl_offer_to_choose .addons-card .btn{max-width:calc(100% - 48px);position:relative;bottom:24px;margin-top:auto;} #Qoc .bl_offer_to_choose .addons-card.btnplus .BlackBloc{padding-bottom:12px;} #Qoc .addons-card .BlackBloc .btn{bottom: 0; width: auto;position: relative;right: 0;left: 0;margin-right: 0;margin-left: 0;max-width:100%;} #Qoc .bl_desc .price {justify-content: center; margin-bottom: 12px;} #Qoc .bl_desc bol-price > p{font-size:14px;text-align:center;margin-bottom:8px;text-transform: initial;} #Qoc .bl-ip-container{background-color: #fff; padding: 24px; border-radius: 8px; box-shadow: 0px 0px 24px 4px rgb(0 0 0 / 4%); margin-bottom:24px;display: flex;align-items: center;text-align: center;gap: 40px;} #Qoc .bl-ip-container .ip-container-title {font: 14px/22px SFR-Bold;} #Qoc .bl-ip-container .ip-container-subtitle {font: 14px/22px SFR-regular;} #Qoc .generic-checks{width:430px;margin:0 auto;max-width:100%;} #Qoc .generic-checks label:last-of-type{margin: 0 0 16px -4px;} #Qoc .bl_offres{width:100%;display:flex;justify-content:center;align-items:center;min-height:32px;margin-top:21px;} #Qoc .bl_offres:before{content: "+";display: flex;width: 26px;height: 26px;background-color: #000;position: absolute; border-radius: 90px;font-size: 19px;font-family: SFR-Bold; color: #fff;justify-content: center;align-items: center;} #Qoc .elem h4{margin-bottom:8px;} #Qoc .bl_description{font-size:16px;} .boxplus-sticker{background: var(--clr-yellow); font-family: 'SFR-Bold'; color: var(--clr-black); margin: 0px auto 8px;font-size: 12px;padding: 0 8px; border-radius: 4px; display: table;} .pb_hnavbar{color:var(--clr-black);width:fit-content;margin:0 auto; display:flex;border-radius:8px;border: 1px solid var(--clr-disable);overflow:hidden;font-family:'sfr-Bold';} .pb_hnavbar label {padding:8px 24px;overflow:hidden;cursor:pointer;} .pb_hnavbar label:not(:last-of-type){border-right: 1px solid var(--clr-disable);} .pb_hnavbar input:checked + label{background:var(--clr-black);color:#fff;} .pb_hnavbar select{display:none;font-family:'SFR-Bold';} .message.gift:before{background: url(https://static.s-sfr.fr/assets/pictos/cadeau_40_rouge.svg) center/contain;} .message.promo:before{background: url(https://static.s-sfr.fr/assets/pictos/promo_40_rouge.svg) center/contain;} #Demen{width: 1280px; max-width: calc(100% - 64px); margin: 40px auto 24px;display:flex;align-items:stretch;gap:40px;flex-wrap:wrap;} #Demen > div.L, #Demen > div.R{width:calc(50% - 20px);border-radius: 8px;padding:25px;background:#fff;} #Demen > div.B {border-radius: 8px;padding: 25px;background: #fff;flex: 1;} #Demen > div.B .message{margin-top:0;} #Demen > div.L.W { width: 100%; } #Eligibility .message{margin-bottom:16px;} #Eligibility .message p > a{font-family:SFR-Bold;} #Demen .texts {display: flex; align-items: center; justify-content: space-between;width:100%;} #Demen .texts .back-shop {max-width: fit-content; margin: 0; padding: 0;} #Demen .texts p { position: relative; max-width: calc(100% - 150px);} #Demen .texts .btn{max-width:265px;} #Demen form {margin-top: 4px;vertical-align: middle; width: 100%;} #Demen form ng-autocomplete {display: inline-block; width: 100%; max-width: calc(100% - 94px);} #Demen form .autocomplete-container { height: auto;margin-bottom: 16px;} #Demen form .autocomplete-container .input-container input {display: inline-block;vertical-align: middle; border-radius: 8px 0 0 8px;} #Eligibility > div.texts{margin-top:16px;} #Demen form .test {display: inline-block; vertical-align: middle; height: 42px;border-radius: 0 8px 8px 0; margin-left: -4px;width:fit-content;} #DemenForm > label{position:relative;width:fit-content;} #DemenForm label .more-info{margin-top: -12px;} #Demen .smallTitle{font-family: sfr-Bold;font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;color: var(--clr-black);display:block;margin-bottom:16px;} #Demen > .L input[type="radio"] + label:before{content: "";width: 12px; height: 12px; background-color: #fff; border-radius: 100%; box-shadow: inset 0 0 0 1.5px #fff; border: 1px solid #02C39A; margin: 0 8px 0 0;display:inline-flex; top: 1px; position: relative;} #Demen > .L input[type="radio"] + label{position:relative;display:inline-block;font-size:14px;cursor:pointer;} #Demen > .L input[type="radio"] + label:not(:last-of-type){margin-right:16px;} #Demen > .L input[type="radio"]:checked + label:before{background-color: #02C39A;} #Demen > .L input[type="radio"]:checked + label{font-family:sfr-Bold;} /*CSS TEMPORAIRE JUSQU'AU 06/11*/ .generic-choices .faq{text-align:left;padding:24px 24px 24px 0;} .generic-choices hr{margin:24px 0 0 0;} .generic-choices .message {width: 100%;justify-content: space-between;align-items: center;max-width: 1280px;margin-top: 16px;} #Demen > .L .showChO label{display:block;font-size:14px;font-family:sfr-Bold;margin-bottom:6px;} #Demen > .L .showChO{margin-top:16px;} #Demen > .L .showChO select:focus-visible {outline: 2px solid #181818;outline-offset: 2px;} #Demen .message {width: 100%;gap: 0 16px;justify-content: space-between;align-items: center;max-width: 1280px;margin-top: 16px;} #Demen .message .btn4 {width: fit-content;margin:16px 0 0 0;} #Demen > .L .input{line-height: normal;padding: 9px 16px;width:352px;max-width:100%;cursor:pointer;font-family:'SFR-Regular'; text-overflow: ellipsis;} #Demen input[type="date"]{position:relative;line-height: normal;margin-right:16px; padding: 9px 16px; width: 352px; max-width: 100%;background-color: #fff; border: 1px solid var(--clr-disable); border-radius: 8px; height: 42px;margin-bottom:8px;cursor:pointer;appearance: none;-webkit-appearance: none;} #Demen > .L .showChO input[type="checkbox"] + label{display: inline-block;font-size: 14px;font-family: 'SFR-Regular'; position:relative;cursor:pointer;} #Demen > .L .showChO input[type="checkbox"] + label:before{content:"";border: 1px solid var(--clr-disable);width: 20px;height: 20px;border-radius: 4px;background-color: #fff; display: inline-block; vertical-align: middle; margin: 0 10px 0 0; position: relative;} #Demen > .L .showChO input[type="checkbox"]:checked + label:before{background: var(--clr-green);} #Demen > .L .showChO input[type="checkbox"]:checked + label:after{content: ''; border: 2px solid #fff; height: 10px;width: 4px; display: block; border-top: 0; border-left: 0; transform: rotate(45deg);position: absolute; left: 8px; top: 3px;} #Demen > .R.actual-o .right{width:50%;} #Eligibility .message{width:100%;gap: 0 16px; grid-template-columns: auto auto;justify-content: space-between; align-items: center;max-width:1280px;} #Eligibility .message .link2{margin-left:24px;} #Demen > .L .showChO p{margin-top:16px;} #Demen > .L .showChO b{display:block; margin-bottom:8px;} #Demen .L.fullwidth{width:100%;} #Demen .demenMessage{width:100%;} #Demen .demenMessage h2{margin-bottom:-16px;} #Demen .demenMessage > div{margin-bottom:24px;} #Demen .demenMessage > #DNGmessage1{padding-left:80px;position:relative;} #Demen .demenMessage > #DNGmessage1:after{content: "";z-index: 10; position: absolute; width: 32px; height: 32px;background-image: url(https://static.s-sfr.fr/media/ampoule2-sfr.png); background-size: contain; left: 24px; top: calc(50% - 16px);background-position: center;} #Demen .demenMessage > #DNGmessage1 p{margin-bottom:16px;display:block;} #Demen .generic-checks { width: 500px; margin: 24px auto; max-width: 100%;} #Demen .generic-checks.one {text-align:center;} #Demen .generic-checks label:last-of-type {margin: 0 0 16px -4px;} #Demen #Eligibility .texts{flex-direction:column;gap:16px; margin:0;} #Demen #Eligibility .texts p{text-align:center;width:100%;} #Demen .back-shop{padding:0;margin:0;} #Demen .demenMessage .ok{margin:0;} #Demen .conservOffer .carte {width: 400px;max-width: 100%;background: #fff;padding: 24px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius: 12px;margin: 40px 0 0;text-align: left;} #Demen .conservOffer .title{font: normal 24px / 36px SFR-Bold;margin: 16px 0;} #Demen .conservOffer .subtitle{font: normal 16px / 24px SFR-Bold;margin: -8px 0 16px;} #Demen .conservOffer .price-offer{display:flex;justify-content:space-between;} #Demen .conservOffer a{margin: 16px 0;} #Demen .price .o{position:absolute;bottom:0;left:16px;} #Demen > .demenMessage > ul{margin: 16px 0 8px;} #Demen input[type="date"]:after{content:"";background-image:url(https://static.s-sfr.fr/assets/pictos/calendrier_40_rouge.svg);position:absolute;right:12px;width: 24px; height: 24px; background-position: center; background-size: contain;top: 0; bottom: 0;margin: auto;} #Demen input[type="date"]::-webkit-calendar-picker-indicator {opacity:0;z-index:10;cursor:pointer;} #Eligibility .message.noChangeOffer .link{display:inline-block;} #Eligibility .message.noChangeOffer .link2{grid-row: 2; width: fit-content; margin-left: 0;} .info-mig {width: calc(100% - 64px);max-width: 1280px;border-radius: 8px;padding: 24px;background: #fff;margin: 0 auto;} .info-mig + .more-card {margin-top: 24px;} .more-card > summary {position: relative;list-style-type: none;font: 14px / 22px SFR-Bold;display: block;margin: 0 auto;width: fit-content;padding-right: 24px;cursor: pointer;} .more-card > summary::-webkit-details-marker{display:none} .more-card > summary:after {content: "";transition: all 0.2s ease-out;position: absolute;right: 0;top: 6px;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;height: 8px;transform: rotate(135deg);width: 8px;} .more-card[open] > summary:after {transform: rotate(-45deg);} /* Formulaire Eligibilité */ #FormEli{margin-top:40px;position:relative;} #FormEli h1{margin: 40px auto; text-align: center;} #FormEli .divform{ background-color: #fff; padding: 24px; border-radius: 8px; max-width:840px;width:calc(100% - 64px);margin:48px auto;} #FormEli .divform h2{ margin: 0 0 16px 0; font-family: "SFR-Bold", sans-serif; font-weight: 700;font-size: 32px;} #FormEli .divform label{font-size:16px;font-family: "SFR-Bold", sans-serif; font-weight: bold;} #FormEli .divform form{ display: flex; flex-direction: column; align-items: center; } #FormEli .divform form input{ height: 40px; background: #FFF; border: 1px solid #D2D2D2; border-radius: 8px; outline: none; padding: 0 10px; margin-bottom: 4px; margin-top: 8px; font-family: "SFR", sans-serif;} #FormEli .divform form .inputlong{ width: 100%; } #FormEli .divform button{ border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; vertical-align: bottom; line-height: 20px; padding: 0 25px; height: 40px; box-shadow: 0 4px 8px rgb(150 0 0 / 16%); width:fit-content;margin-left:auto;} #FormEli .divform sup{ color: var(--clr-error); } #FormEli .divform .formnames{ display: flex; width: 100%; gap:24px;} #FormEli .divform .labelinput{ display: flex; flex-direction: column; width: 100%; } #FormEli .divform .submit{ display: flex; flex-direction: column; margin-bottom: 16px; width: 100%; } #FormEli .divform .submit > p{font-size:12px;margin-bottom:16px;} #FormEli .divform .w50{width:50%;} #FormEli .labelinput input[type="nmber"]{-moz-appearance: textfield;} #FormEli .labelinput input::-webkit-inner-spin-button, .labelinput input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0;} #FormEli .sr-message-error { font-size: 13px; color: #D90D25!important; clear: both; position: relative; padding-left: 20px; overflow: hidden;} #FormEli .sr-message-error:before { content: ""; background: url(https://static.s-sfr.fr/assets/pictos/croix_40_rouge.svg) 0 0 no-repeat; background-size: 15px; position: absolute; left: 0; top: 3px; width: 37px; height: 27px;} #FormEli #Mentions { margin-bottom: 25px; border-top: 1px solid #ebebeb; padding-top: 25px;} #FormEli #Mentions .t { font-family: 'SFR-Bold'; font-size: 12px; margin: 0 auto; display: table; position: relative; cursor: pointer;} #FormEli #Mentions .t:after { position: absolute; border-top: 0; border-left: 0; content: ''; width: 8px; height: 8px; border: 2px solid; transform: rotate(45deg); right: -17px; top: 0; border-top: 0; border-left: 0;} #FormEli #Mentions .cont { max-width: 1280px; margin: 25px auto; display: block; font-family: 'SFR-Regular'; font-size: 12px; color: #222; line-height: 1.3; padding: 0 20px;} #FormEli #Mentions #MentionInput:checked + label .cont{display:none;} #FormEli #Mentions #MentionInput:checked + label .t:after{transform: rotate(-135deg); top: 5px;} #network-internet-lame { background-image: url(https://static.s-sfr.fr/media/Fixe/MEA/desktop_offre_box.jpg); background-repeat: no-repeat; background-size: cover; color: white; margin-top: 40px; height: 212px; position: relative; } #network-internet-lame:after { position: absolute; height: 100%; width: 75%; right: 0; background: rgba(226, 0, 0); top: 0; content: ''; } #network-internet-lame h2 { text-align: center; color: white; width:40%;} #network-internet-lame p { font-size: 24px; line-height: 36px; font-family: 'SFR-Bold'; } #network-internet-lame .wrapper { margin: 0 auto; position: relative; display: flex; align-items: center; width: 80%; max-width: 1280px; height: 100%; z-index: 1; } #network-internet-lame .group1-lame-reseaux { display: flex; width: 100%; align-items: center; max-width: 1280px; } #network-internet-lame .group1-lame-reseaux>div { margin: auto; display: grid; gap: 24px; width:60%;} #FormEli .divform #EliMess h2{font-size:24px;margin:0;} #EliMess p{font-size:14px;margin-bottom:24px;} #EliMess b{margin:4px 0;display:block;} #AutocompleteBlock {display: inline-block;width:calc(100% - 40px);position:relative;} #AutocompleteBlock input:not(:placeholder-shown) + .clear-input {width: 16px;height: 16px;display: block;position: absolute;right: 8px;bottom: 0;top: 0;margin: auto;cursor: pointer;} #AutocompleteBlock input:not(:placeholder-shown) + .clear-input:after{content: "";position: absolute;bottom: 1px;right: 0;width: 16px;height: 16px;background: url(https://static.s-sfr.fr/assets/pictos/croix_40_noir.svg);background-repeat: no-repeat;background-size: cover;} #AutocompleteBlock input {display: inline-block;vertical-align: middle;border-radius: 8px 0 0 8px;box-sizing: border-box;border: 1px solid var(--clr-disable);box-shadow: none;background-color: #fff;width: 100%;padding: 0 16px;line-height: 40px;height: 40px;} .autocomplete-block {display: inline-block;width:calc(100% - 40px);position:relative;} .autocomplete-block input:not(:placeholder-shown) + .clear-input {width: 16px;height: 16px;display: block;position: absolute;right: 8px;bottom: 0;top: 0;margin: auto;cursor: pointer;} .autocomplete-block input:not(:placeholder-shown) + .clear-input:after{content: "";position: absolute;bottom: 1px;right: 0;width: 16px;height: 16px;background: url(https://static.s-sfr.fr/assets/pictos/croix_40_noir.svg);background-repeat: no-repeat;background-size: cover;} .autocomplete-block input {display: inline-block;vertical-align: middle;border-radius: 8px 0 0 8px;box-sizing: border-box;border: 1px solid var(--clr-disable);box-shadow: none;background-color: #fff;width: 100%;padding: 0 16px;line-height: 40px;height: 40px;} .autocomplete-block li:focus-visible,.autocomplete-block li.active {background: #F2F2F2;color: var(--clr-black);} .form-error-text {font: normal 12px/18px SFR-Regular;color: var(--clr-sfr2);width: calc(100% + 40px);} .form-error-text:before {position: relative;vertical-align: middle;display: inline-block;content: "";background: url(https://static.s-sfr.fr/assets/pictos/croix_40_rouge.svg);background-size: contain;margin-right: 4px;width: 16px;height: 16px;} .es-block form {display: inline-block;vertical-align: middle;width: 100%;} .es-block .transcription > summary h2 {font: 16px / 24px SFR-Bold;} .label-reprise{display: block;font-family: 'SFR-BOLD';font-size: 14px;margin: 0 0 4px;} #AutocompleteBlock ul.is-hidden {display:none;} #AutocompleteBlock ul {position: absolute;width: 100%;background: #fff;height: auto;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius:0 0 8px 8px;box-sizing: border-box;padding: 0;margin: 0;max-height: 240px;overflow-y: auto;z-index: 1000;} #AutocompleteBlock li {position: relative;list-style: none;padding: 0;margin: 0;cursor: pointer;padding: 8px 16px;} #AutocompleteBlock li:hover {background: var(--clr-bg);} #AutocompleteBlock a {display: block;text-decoration: none;cursor: pointer;color: var(--clr-black);font-size: 14px;} #AutocompleteBlock .bold {font-family:SFR-Bold;} .autocomplete-block ul.is-hidden {display:none;} .autocomplete-block ul {position: absolute;width: 100%;background: #fff;height: auto;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);border-radius:0 0 8px 8px;box-sizing: border-box;padding: 0;margin: 0;max-height: 240px;overflow-y: auto;z-index: 1000;} .autocomplete-block li {position: relative;list-style: none;padding: 0;margin: 0;cursor: pointer;padding: 8px 16px;} .autocomplete-block li:hover {background: var(--clr-bg);} .autocomplete-block a {display: block;text-decoration: none;cursor: pointer;color: var(--clr-black);font-size: 14px;} .autocomplete-block .bold {font-family:SFR-Bold;} /*.bloc_config .generic-sum {z-index:11;}*/ .bloc_config .c .link2 {width: fit-content;} .retrait.loader:before {background: var(--clr-bg) url(https://static.s-sfr.fr/assets/pictos/boutique_40_noir.svg);background-repeat: no-repeat;background-position: 24px 24px;background-size: 24px;content: "";position: absolute;width: 100%;height: 100%;right: 0;top: 0;left: unset;z-index: 1;border-radius: 8px;} .retrait.loader:after {z-index: 3;} #ChoixRetrait {display:none;} #ChoixRetrait .scroll{max-height: calc(100vh - 300px);overflow: auto;} #ChoixRetrait.displayed{display:block;position: fixed;width: 620px;height: fit-content;max-height: calc(100vh - 170px);box-shadow: 1px 0px 20px 1000px #0000007a;-webkit-appearance: none; -webkit-box-shadow: 1px 0px 20px 1000px rgba(0, 0, 0, 0.48); -moz-box-shadow: 1px 0px 20px 1000px rgba(0, 0, 0, 0.48);overflow: hidden;max-width: calc(100% - 64px);border-radius: 12px;z-index: 99999;font: normal 14px/22px SFR-Regular;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background:#fff;padding:40px 24px 24px;} #ChoixRetrait .close {cursor: pointer;display: block;height: 32px;position: absolute;right: 8px;top: 8px;width: 32px;} #ChoixRetrait .close:before {position: absolute;content: "";transform: unset;background: url(https://static.s-sfr.fr/assets/pictos/fermer_40_noir.svg);background-size: cover;height: 32px;width: 32px;left: 0;top: 0;} #ChoixRetrait .title {display:block;font-size:24px;line-height:24px} #ChoixRetrait .message{margin:16px 0;} #ChoixRetrait form{display: inline-block;width: calc(100% - 190px);margin:16px 0;vertical-align: middle;} #ChoixRetrait .btn4 {display: inline-block;width: auto;margin-left: 24px;background:#fff;} #ChoixRetrait .enstock{position:relative;display: block;cursor:pointer;margin-bottom:16px;} #ChoixRetrait #bouton-rechercher {position:relative;display: inline-block;cursor: pointer;vertical-align: middle;width: 40px;height: 42px;padding: 9px 0 9px;background: var(--clr-sfr2);border: 0;border-radius: 8px;box-shadow: 0px 4px 8px 4px rgb(150 0 0 / 16%);margin: 0 0 0 -4px;background-image: url(https://static.s-sfr.fr/assets/pictos/rechercher_40_blanc.svg);background-repeat: no-repeat;background-size: 55%;background-position: center center;} #ChoixRetrait .enstock div {position: absolute;cursor: pointer;width: 20px;height: 20px;border-radius: 4px;background-color: var(--clr-disable);} #ChoixRetrait .enstock span {font-family: SFR-Regular;font-size: 14px;line-height: 20px;color: var(--clr-black);cursor: pointer;width: -webkit-fill-available;cursor: pointer;} #ChoixRetrait #EnStock:checked + .enstock div + span{font-family:SFR-Bold;} #ChoixRetrait #EnStock:checked + .enstock div{background-color:var(--clr-green);} #ChoixRetrait #EnStock:checked + .enstock div:after{content:"";width:14px;height:14px;position:absolute;top:3px;right:0;left:0;margin:auto;background:url(//static.s-sfr.fr/assets/pictos/check_40_blanc.svg) center/contain no-repeat, var(--clr-green)} #ChoixRetrait .boutique {display:flex;gap:16px 40px;align-items: flex-start;justify-content:space-between;border:1px solid var(--clr-disable);border-radius:8px;padding:24px;margin-top:16px;} #ChoixRetrait .inventory {margin: 16px 8px 16px 0} #ChoixRetrait .add-basket-btn {width:auto;} #ChoixRetrait .bold {display:block;font-size:16px;margin-bottom:16px;} #ChoixRetrait .a {margin:16px 0 8px;} #ChoixRetrait .km {position: relative;color: var(--clr-grey);margin-right: 20px;} #ChoixRetrait .km:after {position: absolute;content: "";top: 0;bottom: 0;margin: auto;right: -12px;width: 4px;height: 4px;background: var(--clr-black);border-radius: 50%;} #ChoixRetrait .date{position:relative;margin: 8px 0 0 12px;} #ChoixRetrait .date:before {position: absolute;content: "";top: 0;bottom: 0;margin: auto;left: -12px;width: 4px;height: 4px;background: var(--clr-black);border-radius: 50%;} #ChoixRetrait .ng-autocomplete {display: inline-block;width: calc(100% - 224px);} .inventory {position: relative;font-size: 14px;font-family: SFR-Regular;padding-left: 14px;} .inventory.wa {color:#ff9300;} .inventory.ok {color:var(--clr-green);} .inventory.ko {color:var(--clr-error);} .inventory:before {position: absolute;content: '';width: 10px;height: 10px;top: 0;bottom:0;left: 0;margin:auto;border-radius: 100% } .inventory.ok:before {background-color: #ff9300 } .inventory.ok:before {background-color: var(--clr-green) } .inventory.ko:before {background-color: var(--clr-error) } #Quelleoffrechoisir #IConso{margin: 24px 0;align-items: stretch;} #IConso h3, #IConso p, #IConso a{text-align:left;} #IConso ul{list-style:disc;list-style-position:inside;margin:0 0 24px 0;text-align:left;} #IConso ul li{text-indent: -20px; padding-left: 20px; margin-left: 0;font-size:14px;} #IConso h3{flex-basis: 100%;margin:0 0 8px 0;} #IConso .R{background-image:url(https://static.s-sfr.fr/InfoConso.webp);background-position:center;background-size:cover;border-radius:8px;width:35%;} #Quelleoffrechoisir #IConso div{max-width:none;} .lame-message,.change-forfait{background: #fff;width: 1280px;max-width: calc(100% - 64px);padding:24px;margin:0 auto;border-radius:8px;} .lame-message .message > div:has([class^="btn"]){display: flex;align-items: center;gap: 16px;justify-content: flex-start;} .lame-message .message > div:has([class^="btn"]) [class^="btn"]{width:fit-content;} .carte-produits {margin: 0 auto 32px;} bol-mobile-forfaits-filter-list + .carte-produits {margin-top: 32px;} bol-mobile-forfaits-filter-list-rm + .carte-produits {margin-top: 32px;} .carte-produits .line{display: grid;grid-template-rows: repeat(1, 1fr);grid-template-columns: repeat(4, 1fr);width: 1280px;max-width: calc(100% - 64px);margin: 0 auto 32px;gap: 40px;} .carte-produits #bl_link {width: fit-content;margin: auto;} .carte-produits .line[data-row="8"] .CP{grid-row: span 8} .carte-produits .line[data-row="7"] .CP{grid-row: span 7} .carte-produits .line[data-row="6"] .CP{grid-row: span 6} .carte-produits .line[data-row="5"] .CP{grid-row: span 5} .carte-produits .line[data-row="4"] .CP{grid-row: span 4} .CP{width: 100%;max-width: -webkit-fill-available;max-width: -moz-available;} .CP .B .desc-p {font-family:SFR-Bold;color:var(--clr-sfr2);margin:0 0 4px;} .param{display: flex;gap:0 4px;} .param .option {position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center;text-decoration: unset;color: var(--clr-black);height: auto;text-align: center;padding:16px;font:normal 12px/18px SFR-Regular;margin:0;width: 100%;background: #fff;border-radius: 8px;border: 1px solid var(--clr-grey);cursor: pointer;} .param .option.a,.param input:checked + .option {padding:15px;border: var(--clr-sfr2) 2px solid;box-shadow: 0 3px 9px transparent;cursor: default;font-family:SFR-Bold} /*.param input:focus + .option:before {border: var(--clr-sfr2) 2px solid;content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;border: 2px solid Highlight;border-radius: 10px;pointer-events: none;} .param .option:focus {outline:0;} .param .option:focus:before {border: Highlight 2px solid;content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;border-radius: 10px;pointer-events: none;}*/ .param .option.d {background: #E9E9E9;color:var(--clr-grey);text-decoration:line-through;border: 2px solid var(--clr-grey);padding:15px;cursor:default;} .param input:disabled + .option {background: #E9E9E9;color:var(--clr-grey);border: 2px solid var(--clr-grey);padding:15px;cursor:default;} .param-full{display: grid;gap:8px;} .param-full .sticker.j {margin: 0 8px 8px 0;} .param-full .img-r {max-height: 24px;position: absolute;top: 16px;right: 16px;max-width: 72px;} .param-full input:focus-visible + .option .img-r, .param-full input:checked + .option .img-r {top: 15px;right: 15px;} .param-full .option {position: relative;display: block;height: auto;padding:16px;margin:0;width: 100%;background: #fff;border-radius: 8px;border: 1px solid var(--clr-grey);cursor: pointer;} .param-full input:checked + .option {padding:15px;border: var(--clr-sfr2) 2px solid;box-shadow: 0 3px 9px transparent;cursor: default;} /*.param-full input:focus + .option:before {border: Highlight 2px solid;content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;border-radius: 10px;pointer-events: none;}*/ .param-full .bottom {margin-top: 8px;} .param-full bol-link {display: none;} .param-full input:focus-visible + label + bol-link, .param-full input:checked + label + bol-link {display: table;} .param-full .o {text-decoration: line-through;margin-right:4px;} .param-full .line {display: flex;align-items: flex-start;justify-content: space-between;margin-top: 4px;} .param-full .title {margin-bottom: 8px;} .param-full .img-left {display: inline-block;vertical-align: top;max-width:64px;margin-right:16px;} .param-full .right {display: inline-block;vertical-align: middle;max-width: calc(100% - 84px);} .param-full .bold.center {margin-bottom:8px;} .param-full .center {text-align:center;} .param-full input:checked + .option .center {font-family:SFR-Bold;} .param-full .g {color: #6E6E73;margin-top:4px;} .param-full .iconotexts {margin-bottom:8px;} .param-full .iconotexts {height: 0;overflow: hidden;transition: height 0.3s ease;} .param-full input:focus-visible + .option .iconotexts, .param-full input:checked + .option .iconotexts {height: auto;margin-top:16px;} .payment-mode {display: inline-block;width:fit-content;} .param-forfait{display: grid;gap:8px;} .param-forfait .option {position: relative;display: block;height: auto;padding:16px 16px 16px 46px;margin:0;width: 100%;background: #fff;border-radius: 8px;border: 1px solid var(--clr-grey);cursor: pointer;} .param-forfait .t {font-family:SFR-Bold;margin-bottom:4px;} .param-forfait [for*="avecforfaitselect"]:before {content: '';position: absolute;width: 24px;height: 24px;background: url(//static.s-sfr.fr/assets/pictos/sim_ok_40_noir.svg);background-size: cover;left: 15px;top: 15px;filter: invert(58%) sepia(9%) saturate(5%) hue-rotate(320deg) brightness(92%) contrast(85%);} .param-forfait [for="sansforfaitselect"]:before {content: '';position: absolute;width: 24px;height: 24px;background: url(//static.s-sfr.fr/assets/pictos/pas_de_sims_40_noir.svg);background-size: cover;left: 15px;top: 15px;filter: invert(58%) sepia(9%) saturate(5%) hue-rotate(320deg) brightness(92%) contrast(85%);} .param-forfait [for="typeSIM"]:before {content: '';position: absolute;width: 24px;height: 24px;background: url(//static.s-sfr.fr/assets/pictos/sim_horizontale_40_noir.svg);background-size: cover;left: 15px;top: 15px;filter: invert(58%) sepia(9%) saturate(5%) hue-rotate(320deg) brightness(92%) contrast(85%);} .param-forfait [for="typeESIM"]:before {content: '';position: absolute;width: 24px;height: 24px;background: url(https://static.s-sfr.fr/assets/pictos/e_sim_40_noir.svg);background-size: cover;left: 15px;top: 15px;filter: invert(58%) sepia(9%) saturate(5%) hue-rotate(320deg) brightness(92%) contrast(85%);} .param-forfait input:checked + .option {padding:15px 15px 15px 45px;border: var(--clr-sfr2) 2px solid;box-shadow: 0 3px 9px transparent;cursor: default;} /*.param-forfait input:focus + .option:after {border: Highlight 2px solid;content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;border-radius: 10px;pointer-events: none;}*/ .carte-offre .param{z-index:3;} .param-forfait input:checked + .option:before {filter: invert(0);left: 13px;} #eSimPopin >*{display: block;margin-bottom:16px;} #eSimPopin .esim-link{width:fit-content;} .price .details {font: normal 14px / 14px SFR-Regular;width:100%;} .pagination {display: flex;list-style: none;padding: 0;margin: 20px 0;justify-content:center;} .pagination-link {display: inline-block;min-width: 24px;line-height:24px;vertical-align:middle;text-decoration: none;text-align:center;color:var(--clr-black);} .pagination-link[aria-current="page"] {font-family: 'SFR-Bold';background-color: var(--clr-sfr2);color: #fff;border-radius:4px;} .pagination .previous {position: relative;font-family: 'SFR-Bold';margin-right: 8px;} .pagination .next {position: relative;font-family: 'SFR-Bold';margin-left: 8px;} .pagination .previous:before{content: '';position: absolute;width: 8px;height: 8px;border: 2px solid var(--clr-black);transform: rotate(135deg);top: 0;bottom:0;margin:auto;left:-16px;border-top: 0;border-left: 0;transition: all 0.2s ease-out;} .pagination .next:before{content: '';position: absolute;width: 8px;height: 8px;border: 2px solid var(--clr-black);transform: rotate(-45deg);top: 0;bottom:0;margin:auto;right:-16px;border-top: 0;border-left: 0;transition: all 0.2s ease-out;} .pagination .previous:hover:before{left:-24px;} .pagination .next:hover:before{right:-24px;} .AVIS { position:relative; margin: 0; } .AVIS>a,.AVIS>bol-rate>a { font-size:12px; font-family: 'SFR-Regular';color:var(--clr-black); display:inline-block; text-decoration: underline; z-index: 1; position: absolute; top: 2px; margin: 0 0 0 4px;} .AVIS .stars {width: 88px;height: 18px;background: url(//static.s-sfr.fr/media/pictos/stars_vide.svg) no-repeat left top;} .AVIS mark {height: 18px;background: url(//static.s-sfr.fr/media/pictos/stars_pleine.svg) no-repeat left top;background-size: 88px 18px;display: block;} .AVIS span { font-size: 12px; font-family: 'SFR-Bold'; display: inline-block; vertical-align: middle; margin: 0 4px 0 0;} .AVIS>img{ height: 16px; width: 16px; filter: invert(84%) sepia(19%) saturate(5971%) hue-rotate(0deg) brightness(105%) contrast(103%); display: inline-block; vertical-align: middle; } .AVIS>img.emp{ height: 18px; width: 18px; margin: 0 0 0 -1px; } .availability {position: relative;display: block;font-size: 12px;height:18px;font-family: SFR-Regular;margin-left: 14px;} .availability:before {position: absolute;content: '';width: 10px;height: 10px;top: 0;bottom:0;margin:auto;left: -14px;border-radius: 100% } .availability.wa:before {background-color: #ff9300 } .availability.ok:before {background-color: var(--clr-green) } .availability.ko:before {background-color: var(--clr-error) } .availability.in:before {background-color: var(--clr-black) } #telephones .tabs {justify-content:left;} .choix-forfait {display:flex;align-items: center;gap:24px} .overlay {display: none;top: 0;left: 0;background: rgba(24, 24, 24, 0.6);z-index: 12;position: absolute;width: 100%;height: 100%;} .overlay.display {position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.95);display: flex;flex-direction: column;align-items: center;} .overlay button {position:absolute;width:40px; top: 40px;right:40px;background:transparent;cursor:pointer;} .zoom-img .carrousel {margin:0 auto;max-width: calc(100% - 32px);gap: 16px;text-align: center;display: flex;justify-content: center;width: fit-content;list-style-type: none;} .zoom-img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: auto;max-width: calc(100% - 36px);max-height: calc(100% - 36px);} .zoom-img > img {display: block;width: auto;max-width: 100%;max-height: calc(100vh - 190px);margin: 32px auto 62px;} .zoom-img li {position: relative;width: 76px;max-width: 100%;height: 78px;padding: 2px;border-radius: 8px;background-color: #fff;cursor: pointer;margin: 0;} .zoom-img li.active {border:1px solid var(--clr-sfr2);} .zoom-img li img {width: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} #Configurateur h3 {font-size: 16px;line-height: 22px;margin-bottom: 16px;} #Configurateur .subtitle {color:#6E6E73;margin: -16px 0 16px;} #Configurateur {display: grid;justify-content: space-between;grid-template-columns: repeat(3,1fr);gap: 0 40px;width: 1280px;;max-width: calc(100% - 64px);margin: 24px auto} #Configurateur>.L {position: sticky;display: grid;height: min-content;top: 8px;gap:16px;z-index:1;} #Configurateur>.R {/*position: sticky;*/display: grid;height: min-content;top: 8px;gap:16px} #Configurateur .tabs {max-width 400px;overflow:hidden;margin-bottom: 24px;} #Configurateur .tabs .tab {width:100%;text-align:center;} #Configurateur .slider {position:relative;} #Configurateur .slide {white-space: nowrap; display: flex; overflow: scroll; scroll-snap-type: x mandatory; scrollbar-width: none;width: 200px;margin:0 auto;} #Configurateur .slide >img { scroll-snap-align: center; width: 100%; flex-shrink:0;max-width:200px;} #Configurateur .slide >img[alt="null"] { display: none; } .slide-prev {content:'';background:url(https://static.s-sfr.fr/assets/pictos/chevron_gauche_40_noir.svg);background-size:contain;position:absolute;top:0;bottom:0;margin:auto;left:0;width:24px;height:24px;color:#fff;cursor:pointer;} .slide-next {content:'';background:url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_noir.svg);background-size:contain;position:absolute;top:0;bottom:0;margin:auto;right:0;width:24px;height:24px;color:#fff;cursor:pointer;} #Configurateur .carousel-preview {display: flex;align-items:center;gap: 16px;justify-content:center;margin:24px auto;} #Configurateur .carousel-preview img{width: auto;max-height:100%;max-width:100%;height: 40px;} #Configurateur .carousel-preview button{padding: 0;cursor:pointer;background:transparent;width: 40px;height: 40px;} #Configurateur .carousel-preview .zoom{width:24px;height:24px;} #Configurateur .L strong{display:block;text-align:center;margin:0 auto 24px;} #Configurateur .L .link {display: table;margin: 24px auto 0;text-decoration: none;} #Configurateur .L .info > .link{margin: 24px 0 0;} #Configurateur .L .info .forf{display:flex;gap:8px} #Configurateur .L .info .forf img{width:24px;} #Configurateur .L .info .forf b:not(:last-child){margin:0 0 4px 0;display:block;} #Configurateur .class-e img {margin: 24px auto 0;display: table;max-width: 100%;} #Configurateur .class-e ul {padding-left: 24px;display: table;} /*#Configurtateur>.L .carac { font-family: 'SFR-Bold'; display: block; text-align: center; margin: 0 0 16px 0; }*/ .iconotexts {display: flex;justify-content: space-between} .iconotexts div {flex: 1} .iconotexts img {display: block;margin: 0 auto 8px;width:auto;height:40px;padding:0} .iconotexts span{display: block;} .iconotexts p {font-family: SFR-Regular;font-size: 12px;line-height: 16px;text-align:center} .iconotexts .o {text-decoration:line-through;} #Configurateur .popin-title.h2 {display: block;margin: 0 auto 35px;max-width: 80%;text-align: center;font-size: 24px;line-height: 24px;font-family: SFR-Bold;font-weight: normal;} #Configurateur strong {display: block;} #Configurateur .deja-client.link{display: table;display: table;margin:16px 0;position: relative;font: normal 14px/18px SFR-Bold;padding: 0 13px 0 0;cursor: pointer;background:transparent;} #Configurateur .deja-client.link:after {content: '';position: absolute;width: 8px;height: 8px;right: 1px;top: 0;bottom: 0;margin: auto;border-radius: 2px;border: 2px solid;border-left: 0;border-bottom: 0;transform: rotate(45deg);transition: all .2s cubic-bezier(.4,0,.2,1);} #Configurateur .deja-client.link:hover:after {right: -3px;} .sogudo{display: grid;align-items: start;grid-template-areas:"a b" "a c" "a d";gap: 0 16px;justify-items: flex-start;grid-template-rows: auto;width: fit-content;grid-row: span 3;margin-bottom:16px;} .sogudo img {grid-area: a;} .sogudo span {display:block;} .sogudo .link {margin-top:8px;text-align:left;} .sogudo .details {display:flex;margin:40px 0; justify-content:center;align-items:center;gap: 16px;} .sogudo .details .bold {display:block;} .details p {padding-left: 24px;margin-left: 8px;border-left: 1px solid;} .sogudo .bottom {margin-top: 24px;} .sogudo .bottom a {text-decoration:underline;} #SOG.img-row {position:relative;display: flex;align-items: center;gap: 16px;padding: 24px;width: 100%;background: #fff;border-radius: 8px;margin: 40px auto 24px;} #SOG.img-row sup > a{color: var(--clr-black);font-family: SFR-Bold;} #SOG.img-row .link {margin-left: auto;background: #fff;cursor: pointer;} #PopinSogudoContainer4P .details span {display:block;} #PopinSogudoContainer4P .details {display:flex;margin:40px 0; justify-content:center;align-items:center;gap: 16px;} #PopinSogudoContainer4P .details p {padding-left: 24px;margin-left: 8px;border-left: 1px solid;} #PopinSogudoContainer4P .bottom {margin-top: 24px;} #PopinSogudoContainer4P .bottom a {text-decoration:underline;} #Configurateur .cls {display: flex;gap: 24px;margin-bottom:24px;} #Configurateur .cl {position: relative;cursor:pointer;-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;width: 24px;font-size: 5px;height: 24px;border-radius: 50%;box-sizing: content-box;} #Configurateur .cl.active:after {content: "";position: absolute;width: 32px;height: 32px;border-radius: 100%;border: solid 2px var(--clr-sfr2);top: 0;bottom: 0;margin: auto;left: -4px;box-sizing: border-box;} #Configurateur .cl:focus-visible {outline-offset: 6px;border-radius: 100%;outline: 2px #181818 solid;outline-offset:2px;} #Configurateur .cl.d:before {content: '';position: absolute;width: 22px;height: 1px;background: var(--clr-black);transform: rotate(45deg);left: 0px;bottom: 0;top: 0;margin: auto;} #Configurateur .bloc-w {background: #fff;border-radius: 8px;padding:24px;position:sticky;top:8px;} #Configurateur .bloc-w .message#Charge:not(:last-child){margin:24px 0;} #Configurateur .bloc-w .message#Charge:first-child{margin:0 0 24px 0;} #Configurateur .bloc-w .message#Charge{margin:24px 0 0 0; overflow: unset;} #Configurateur .generic-choices {margin-bottom: 24px;display: flex;justify-content:center;text-align:center;flex-flow: column;gap: 8px;} #Configurateur .M .bloc-w>strong{display:inline-block;margin-bottom:16px;} #Configurateur .M h3:not(.M .bloc-w > h3:first-of-type) {margin-top: 24px;} #Configurateur .param-full:not(:last-of-type) {margin-bottom: 8px;} #Configurateur .AVIS {margin-bottom:24px;} #Configurateur .bloc-w .carte-offre {margin:24px 0 -24px;} /*#Configurateur .bloc-w.L .link { display: block; width: fit-content; margin: 0 auto; }*/ #Configurateur .bloc-w.info>span { color: var(--clr-black); display: block; margin: 0 0 16px 0 } #Configurateur .bloc-w.info>span.bold { font-family: 'SFR-Bold'; } #Configurateur .bloc-w.info li { list-style:none; display: flex; align-items: center; margin: 0 0 8px; } #Configurateur .bloc-w.info li > span{display:flex;flex-direction:column;} #Configurateur .bloc-w.info li .o{text-decoration-line: line-through;} #Configurateur .bloc-w.info li img { height: 24px; margin: 0 8px 0 0;} #Configurateur .bloc-g {display: flex;gap: 8px;background: var(--clr-bg);border-radius: 8px;padding: 16px;justify-content: start;} #Configurateur .bloc-g img{max-width: 64px;max-height: 64px;} #Configurateur .bloc-g .p{font-family:SFR-Bold;font-size:16px;line-height:24px;margin-left:auto;} #Configurateur .bloc-g .phone{margin-bottom:8px;} #Configurateur .mi {display:inline-block;font: normal 14px / 22px SFR-Regular;padding: 0px 12px;background:transparent;border: 1px solid var(--clr-black);color: var(--clr-black);border-radius: 24px;text-decoration: none;transition: .5s background-color ease-out;cursor: pointer;margin-top:24px;} #Configurateur .mi:focus-visible, #Configurateur .mi:hover {color: #fff;background: var(--clr-black);} #Configurateur .M .alert {font: normal 14px / 22px SFR-Regular;margin: 16px 0;} #Configurateur .form_line label {font: normal 14px/22px SFR-Bold;display: block;margin-bottom: 4px;} #Configurateur .form_line {margin: 16px 0;} #Configurateur .form_line input {width: 100%;margin-bottom: 8px;} .info-reprise {position:relative;width: 100%;margin: 24px 0;border-radius:8px;background:var(--clr-bg);padding:16px 8px;} .info-reprise .content {position:relative;margin-top: 8px;} .info-reprise .content p{display:inline-block;vertical-align:middle;max-width: calc(100% - 40px);margin-left: 8px;} .info-reprise a.link {display: inline-block;margin-top: 8px;} .info-reprise .content:before {content:"";display:inline-block;vertical-align:middle;filter:grayscale(100%) brightness(0) saturate(0) contrast(100%);background:url(https://static.s-sfr.fr/assets/pictos/smartphones_reprise_40_rouge.svg);background-size:cover;width:32px;height:32px;} .info-reprise.ok {background:#ECFDF3;} .info-reprise.ok .content:before {filter:0;background:url(https://static.s-sfr.fr/assets/pictos/check_circle_40_noir.svg);background-size:cover;width:24px;height:24px;} .tooltip{display:inline-block;position:relative;} .tooltip:after{cursor: pointer;content: "";display: inline-block;vertical-align: middle;margin: 0 0 0 4px;top: 0;bottom: 0;width: 15px;height: 15px;background: url(//static.s-sfr.fr/assets/pictos/aide_plein_40_noir.svg);background-repeat: no-repeat;background-size: cover;} .more-info{display:none;gap: 4px;position: absolute;width: calc(100% + 48px);max-width: 100%;left: 0; bottom: height: auto;font-family: 'SFR-Regular';font-size: 12px;line-height: 14px;color: #fff;background: var(--clr-black);border-radius: 4px;z-index: 1;padding: 4px 8px;text-align:left; bottom: 25px;} .more-info ul{margin: 0 0 8px 12px;list-style: disc;} .tooltip:focus-visible .more-info,.tooltip:hover .more-info {display: grid;} .more-info:after {content: "";position: absolute;top: -11px;right: 2px;text-align: center;border-width: 6px;border-style: solid;border-color: var(--clr-black) transparent transparent transparent;transform: rotate(180deg);top:auto;bottom: -11px;transform: rotate(0deg);} .more-info .title {display: block;font-family: 'SFR-Bold';margin-top: 12px;width: 100%;} .more-info img {vertical-align: middle;height: 12px;} .more-info .echeance * {border: 1px solid #181818;background: #181818;margin: 0 0 -5px 0;} .more-info .echeance {display: flex;justify-content: space-between;border-bottom: 1px dotted #fff;clear: both;width: 100%;} .more-info .link {margin-bottom: 16px} .more-info .echeance span {border: 1px solid var(--clr-black);background: var(--clr-black);margin: 0 0 -5px 0} .more-info .total {font-family: SFR-Regular;font-size: 10px;line-height: 12px;letter-spacing: 0.1px;text-align: left;margin-top: 16px;margin-bottom: 0} .more-info a {color: #fff;text-decoration: underline;} /* 4P */ h1 { text-align: center; margin: 0 0 40px 0; } .etape { margin: 40px auto;max-width: 1280px;width: calc(100% - 64px);} .scrollCont .carte-offres { overflow-x: auto; grid-template-columns: auto; grid-auto-flow: column; justify-content: flex-start; max-width: none; -ms-overflow-style: none;scrollbar-width: none;margin:0 auto;width:100%;padding:80px 0 0 0;} .scrollCont .carte-offre { width: 400px; scroll-snap-align:start;box-sizing:border-box;} .scrollCont .carte-offre .P { align-items: end; } #PopinWifi .caracteristiques-wifi .ttp [popover] + [role="tooltip"]{width:calc(100% + 48px);} .st { font-size: 24px; font-family: 'SFR-Bold'; display: block; margin: 0 0 40px 0; } .carte-offres::after{ content: ""; flex: 0 0 1px; } .carte-offre .list-check .ttp{font-size:14px;position:relative;width: fit-content;} .carte-offre .list-check .ttp ul{list-style-position:inside;} .carte-offre .list-check button.das.darkBg{background-image:url(//static.s-sfr.fr/assets/pictos/aide_plein_40_blanc.svg);} .scrollCont .carte-offres + nav{display: flex;gap: 8px;position: absolute;right: 0;margin: auto;top: 0;justify-content: flex-end;} .scrollCont { position: relative; max-width: 1280px; margin: 0 auto; /*width: calc(100% - 64px);*/} .sliBtn {width: 40px;height: 40px;border-radius: 8px;border: 1px solid #131316;cursor: pointer;position:relative;} .sliBtn:after {content: '';position: absolute;width: 24px;height: 24px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;} .sliBtn.next:after {background-image: URL(https://static.s-sfr.fr/assets/pictos/fleche_DROITE_40_noir.svg);background-size: contain;} .sliBtn.pre:after {background-image: URL(https://static.s-sfr.fr/assets/pictos/fleche_GAUCHE_40_noir.svg);background-size: contain;} .sliBtn[disabled] {opacity: 0.5;cursor: default;pointer-events: none;} .recap { display: flex; padding: 24px; background-color: #fff; border-radius: 8px;} .recap>div { width: -moz-available; width: -webkit-fill-available; position: relative; padding:0 24px; } .recap>div:not(:first-child):before { content:''; position:absolute; left:0; bottom:0; top: 0; width: 1px; height: 100%; display: block; background:var(--clr-sfr2); } .recap>div:not(:first-child):after { content:''; width: 20px; height: 20px; position: absolute; left:-10px; display:block; box-shadow: 0px 0px 0px 10px #fff; background-size:cover; background-repeat:no-repeat; top: calc(50% - 10px); } .recap>div.plus:after { background-image: url(https://static.s-sfr.fr/assets/pictos/picto_plus.svg); } .recap>div.equal:after { background-image: url(https://static.s-sfr.fr/assets/pictos/picto_equal.svg); } .recap>div>span{ font-size: 24px; font-family: 'SFR-Bold'; display: block; margin: 0 0 24px 0; } .recap>div>p{ font-size: 14px; font-family: 'SFR-Bold'; display: block; } .recap>div img{ height: 104px; position: absolute; right: 16px; top: 50%; transform: translate(0, -50%); } .recap>div a { display:block; margin: 16px 0 0 0;} .recap .price .L { line-height: 1; } .recap .price + p { font-family:'SFR-Regular'; } .carte-offres {display: grid;grid-template-columns: repeat(3, 1fr);width: 1280px;max-width: calc(100% - 64px);margin: 24px auto 32px;gap: 40px;} .carte-offre {display: grid;gap: 24px;grid-template-rows: subgrid;position: relative;border-radius:8px;background: #fff;padding: 24px;transition: opacity .4s ease-out;cursor:pointer;} .carte-offres[data-row="4"] .carte-offre {grid-row: span 4;} .carte-offres[data-row="5"] .carte-offre {grid-row: span 5;} .carte-offres[data-row="6"] .carte-offre {grid-row: span 6;} .carte-offres[data-row="7"] .carte-offre {grid-row: span 7;} .carte-offres[data-row="8"] .carte-offre {grid-row: span 8;} .carte-offres[data-row="9"] .carte-offre {grid-row: span 9;} .carte-offres[data-row="10"] .carte-offre {grid-row: span 10;} .carte-offre .img-r {width: 32px;position: absolute;top: 24px;right: 24px;} .carte-offre .techno {font: normal 24px / 36px SFR-Bold;color: var(--clr-black);text-decoration: none;white-space: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} /*.carte-offre .techno:focus {outline: 1px solid Highlight;}*/ .carte-offre a.techno:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index:2;} .carte-offre button[class^="btn"]{z-index:3;} .carte-offre .P {display: flex;align-items: center;justify-content: space-between;margin:24px 0 0;padding-bottom:24px;border-bottom:1px solid var(--clr-disable);z-index:0;} .carte-offre.sl .T .P{z-index:0;} .carte-offre .P .bold {margin-bottom: 20px;} .carte-offre .scnd-price .bold {margin-bottom:20px} .carte-offre .eng {display: grid;gap: 8px;align-items: end;} .carte-offre .bold + bol-price .price {margin-top: -16px;} .carte-offre .img-right {max-width:123px;height:auto;} .carte-offre .img-central {display:block;margin:0 auto;} .carte-offre .first-price {position:relative;margin:0 0 54px;} .carte-offre .first-price:before {position:absolute;content:"";background:var(--clr-sfr2);width:100%;height:1px;bottom:-40px} .carte-offre .first-price:after {position:absolute;content:"";background:#fff url('//static.s-sfr.fr/assets/pictos/ajouter_cercle_plein_40_rouge.svg') no-repeat center center;background-size: cover;width:32px;height:32px;left:0;right:0;bottom:-56px;margin:auto;} .carte-offre .list-check{padding-top:24px;border-top:1px solid var(--clr-disable);} .carte-offre .link {display: block;margin: 0 auto;z-index: 2;} .carte-offre .btn {margin-top: -8px;z-index: 3;} .carte-offre .techno :after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;} .carte-offre.sl .sticker.j {position:relative;background: #fff;color: var(--clr-sfr2);z-index: 1;} .carte-offre.sl .T bol-link {display: flex;} .carte-offre.sl .T *{color:#fff;z-index: 1;} /* div:has(.carte-offre.sl) .carte-offre .T{display: grid;gap: 0;grid-template-rows: subgrid;grid-row: span 3;} */ div:has(.carte-offre) .carte-offre .T{display: flex;gap: 0;flex-direction:column;justify-content:space-between;} .carte-offre.sl .T .P {border:0;} div:has(.carte-offre.sl) .carte-offre.sl .T:before {content: "";position: absolute;width:100%;height: max(39%, 355px);z-index:0;top: 0;left: 0;background: var(--clr-sfr2);overflow: hidden;border-radius: 8px 8px 0 0;z-index: 0;} #OffreFixe div:has(.carte-offre.sl) .carte-offre.sl .T:before{height: max(37%, 270px)} .carte-offres.mea {grid-template-areas:"a b b" "c d e";} .carte-offres.mea .carte-offre {grid-template-rows:unset;} #OffreFixe .carte-offres.mea:has(.mea-box4g) .carte-offre, #OffreFixe .carte-offres.mea:has(.Box5G-mea) .carte-offre{grid-row:1} #Personalizedoffer #OffreFixe #tabpanel-1 .carte-offre{grid-template-rows:subgrid;} .carte-offres.mea .mea {order: 2;} .carte-offres .mea {padding:0;overflow:hidden;grid-area: b;} .carte-offre .g {display: flex;flex-wrap: wrap;align-content: center;align-items: center;gap: 4px;background: var(--clr-bg);border-radius: 8px;padding: 16px;height:100%;} .carte-offre .changement {display: flex;align-items: center;background: var(--clr-bg);border-radius: 8px;padding: 16px;} .carte-offre .changement:empty {background: transparent;} dialog .back-to-shop {background: transparent;position: absolute;top: 24px;font-size: 14px;padding-left:32px;cursor:pointer;color: var(--clr-black);} dialog .back-to-shop:before {content: '';position: absolute;width: 24px;height: 24px;left: -8px;bottom: 0;top: 0;margin: auto;background: url(//static.s-sfr.fr/assets/pictos/fleche_GAUCHE_40_noir.svg);background-size: cover;} .sliderAcc{position:relative;display:block;margin:24px 0 0;} .sliderAcc .btnsSli{position: relative;width: 100%;margin: 24px 0 0;display: flex;justify-content: right;gap:8px} .sliderAcc [data-row="7"] .CP {grid-row: span 7;width: 290px;scroll-snap-align: start;border:1px solid #d2d2d2;padding: 16px;} .sliderAcc .carte-produits{display: grid; grid-auto-flow: column;gap: 16px; white-space: nowrap !important; overflow-x: auto; overflow-y: hidden ; -webkit-overflow-scrolling: touch !important;scroll-snap-type: x mandatory;scrollbar-width: none; -ms-overflow-style: none;} .sliderAcc .carte-produits::-webkit-scrollbar {display: none;} .sliderAcc .btnSli{width: 40px;height: 40px;border: 1px solid var(--clr-black);background: transparent;background-size: auto;border-radius: 8px;cursor: pointer;display: inline-block;float: right;position: relative;box-sizing: border-box;z-index: 10px;transition: all .3S;} .sliderAcc .btnSli.pre:after {content: '';position: absolute;width: 24px;height: 24px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;background: url(//static.s-sfr.fr/assets/pictos/fleche_GAUCHE_40_noir.svg);background-size: cover;} .sliderAcc .btnSli.next:after {content: '';position: absolute;width: 24px;height: 24px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;background: url(//static.s-sfr.fr/assets/pictos/fleche_DROITE_40_noir.svg);background-size: cover;} .sliderAcc .btnSli.disabled{border-color:var(--clr-disable);z-index:-1;cursor:auto;} .sliderAcc .btnSli.disabled:after{filter: brightness(0) saturate(100%) invert(81%) sepia(55%) saturate(0%) hue-rotate(207deg) brightness(98%) contrast(84%);} #SelectPhone{width:840px;} #SelectPhone .btns {display: flex;justify-content: right;align-items:flex-end;padding-top: 24px;gap:16px;position: sticky;bottom: 0px;background: #fff;z-index: 2;} #SelectPhone .btns:after {position: absolute;content: "";height: 24px;width: 100%;background: #FFF;bottom: -24px;} #SelectPhone button {width:fit-content;} #SelectPhone button:focus-visible {outline: 0;} /*#SelectPhone button:focus:after {content: '';position: absolute;top: -4px;left: -8px;right: -4px;bottom: -4px;border: 1px solid Highlight;border-radius: 10px;pointer-events: none;z-index: -1;}*/ #SelectPhone .carte-produits .line {display: grid;grid-auto-flow: column;width: auto;margin:0;overflow:auto;max-width:100%;gap: 16px;} #SelectPhone .carte-produits{margin:0 auto 24px;} .list-check {list-style: none;padding: 16px 0 0;border-top:1px solid #D2D2D2;text-decoration:none;} .list-check > button, .list-check > li > button{font-family:SFR-Regular;text-decoration:underline;background:transparent;cursor:pointer;color: var(--clr-black);position:relative;z-index:4;} .list-check .tooltip{z-index:4;} .list-check >li {padding-left: 32px;position: relative;margin-top:8px;} .list-check > li .ttp>button{margin:auto;} .list-check >li:before {content: "";position: absolute;width: 24px;height: 24px;background: url(//static.s-sfr.fr/assets/pictos/check_gras_40_rouge.svg);background-size: cover;vertical-align: middle;display: inline-block;left: 0;} .services-tv{display: grid;justify-content: end;grid-template-columns: 96px auto;align-items: center;width: 100%;margin: 16px 0 0 0;width: fit-content;font-size: 12px;line-height: 18px;gap: 0 8px;} .services-tv-bis{display: flex;justify-content: left;gap: 8px;margin-top:16px} .services-tv img {margin: 0 auto;} #OffreFixe .btn4 {width:fit-content;margin:0 auto;} dialog{width:840px;max-width: calc(100% - 80px);max-height: calc(100% - 112px);background:#fff;border-radius:8px;border:0;padding:56px 24px 24px;overflow-y: auto;} dialog .title {font:normal 24px/34px SFR-Bold;} dialog .btn-close {content: "";cursor: pointer;display: block;height: 32px;position: absolute;right: 8px;top: 8px;width: 32px;background:#fff;padding:0;} dialog .btn-close:hover {background:#fff;} dialog .btn-close:before {position: absolute;content: "";background: url(https://static.s-sfr.fr/assets/pictos/fermer_40_noir.svg);background-size: cover;height: 32px;width: 32px;left: 0;top: 0;} #PopinWifi .caracteristiques-wifi caption {text-align: justify;margin: 0 0 16px 0;} #PopinWifi .caracteristiques-wifi {border-collapse: collapse;width: 100%;table-layout: fixed;margin:0 0 24px;} #PopinWifi .caracteristiques-wifi img{display:inline-block;vertical-align:middle;} #PopinWifi .caracteristiques-wifi p {display: inline-block;vertical-align: middle;width: calc(100% - 80px);margin-left: 16px;} #PopinWifi .caracteristiques-wifi .g{display:block;color:var(--clr-grey);} #PopinWifi .caracteristiques-wifi th,.caracteristiques-wifi td {border: 1px solid var(--clr-black);padding: 16px;text-align: left;} #PopinWifi .caracteristiques-wifi tr:has(.col-wifi5) td:empty{background:var(--clr-black);} #PopinWifi .caracteristiques-wifi tr:nth-child(2n){background:var(--clr-bg);} #PopinWifi .caracteristiques-wifi th[scope="row"]{color:var(--clr-black);border: 1px solid var(--clr-black);padding: 16px;text-align: left;font-family:'SFR-Bold';} #PopinWifi .btn-close{right: 24px;top: 24px;} #PopinWifi .caracteristiques-wifi tbody{overflow:hidden;border-radius:8px;} #PopinWifi .col-wifi5 {background-color: var(--clr-black);color:#fff;border: 2px solid white;padding: 16px;text-align: left;} #PopinWifi .col-wifi6 {background-color: var(--clr-black);color:#fff;border: 2px solid white;padding: 16px;text-align: left;} /* #PopinWifi .caracteristiques-wifi td:not(:empty) {background-color: var(--clr-bg);} */ #PopinWifi .caracteristiques-wifi td[colspan] {display:none;} #PopinWifi .iconotexts img, #popinWifiMEA .iconotexts img {height: 64px;margin:0 auto 8px;width: auto;} #PopinWifi .iconotexts p, #popinWifiMEA .iconotexts p {font-size:14px;line-height: 22px;} #PopinWifi .subtitle, #popinWifiMEA .subtitle{font:normal 16px/24px SFR-Bold;margin-bottom:16px;} #PopinWifi .red, #popinWifiMEA .red {color:var(--clr-sfr2);} .tooltip-dark {position: relative;display: inline-block;} .tooltip-dark:after{cursor: pointer;content: "";position: absolute;right: -20px;top: 0;bottom: 0;margin: auto;width: 15px;height: 15px;background: url(//static.s-sfr.fr/assets/pictos/aide_plein_40_blanc.svg);background-repeat: no-repeat;background-size: cover;} .tooltip-dark:focus-visible .more-info,.tooltip-dark:hover .more-info {display: block;gap: 4px;position: absolute;width: calc(100% + 48px);max-width:unset;left: 0;height: fit-content;font-family: 'SFR-Regular';font-size: 12px;line-height: 14px;color: #fff;background: var(--clr-black);border-radius: 4px;z-index: 1;padding: 4px 8px;text-align: left;} .tooltip-dark:hover .more-info:after{content:none;} /*MARKET*/ .message .t{font:normal 14px/22px SFR-Bold;} .generic-choices .sub-t {margin: 16px 0;text-align:left;} .addons_bloc>.wrapper {margin: auto } .addons_bloc .bl_link {margin: auto;padding: 24px 0 0;text-align: center;width: 1280px;max-width: calc(100% - 64px);align-items: center } .addons_bloc .bl_link> a {display: block;margin: 0 auto;width: fit-content } .addons_bloc .list {display: grid;grid-template-columns: repeat(3, 1fr);width: 1280px;max-width: calc(100% - 64px);margin: -8px auto 0;padding: 0;position: relative;z-index: 0;gap: 20px 40px } .addons_bloc .list > li {margin: 0;padding: 20px 0 0;position: relative;list-style: none;} .addons_bloc .list > li:nth-child(3n) {margin-right: 0 } .addons-card {overflow: hidden;position: relative;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.08);display: flex;flex-direction: column;justify-content: space-between;width: 100%;max-width: 400px;border-radius: 8px;background: 0 0 } .addons-card .BlackBloc {position: relative;border-top: 0;height: 290px;padding: 24px;background: #fff } .addons-card .bl_btn {display: flex;flex-wrap: wrap;max-width: 40%;justify-content: flex-end } .addons-card .price {justify-content: end;} .addons-card .header {position: relative;width: 100%;background: #fff;display: flex;align-items: center;justify-content: center } .addons-card .header img {width: auto;max-width: 100% } .addons-card:not(.accessory) .BlackBloc > p {height: 44px;white-space: normal;font-family: SFR-Regular;font-size: 14px;line-height: 22px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .addons-card .BlackBloc .m {text-transform: uppercase } .addons-card .bl_prix {position: absolute;bottom: 80px;right: 24px;height: auto;align-self: flex-end;text-align: right;margin-bottom: 0 } .addons-card .bl_prix .i { display: block;font-family: SFR-Regular;font-size: 12px;line-height: 18px} .addons-card .title {font-family: 'SFR-Black';font-size: 16px;line-height: 24px;height: auto;max-height: 45px;margin-bottom: 8px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;padding: 0;text-decoration:none;} .addons-card .title:before {position: absolute;content: '';width: 100%;height: 186px;top: -186px;left: 0 } .addons-card .bl_btn, .addons-card .btn {bottom: 12px;width: calc(100% - 24px);max-width: 100%;position: absolute;right: 0;left: 0;margin-right: auto;margin-left: auto } .generic-choices .h4 span {text-transform: capitalize;} .generic-choices .radio-inputs {display: flex;flex-flow: wrap;gap: 16px } .generic-choices .radio-inputs label {position:relative;display: flex;flex-direction: row;align-items: center;cursor: pointer;font: normal 14px/22px SFR-Regular;} .generic-choices .radio-inputs .tooltip{margin-top: -4px;font-family: 'SFR-Regular';display: block;text-align: justify;} .generic-choices .radio-inputs input[type="radio"] + label .check {min-width: 12px;height: 12px;background-color: #fff;border-radius: 100%;box-shadow: inset 0 0 0 2px #fff;border: 1px solid var(--clr-black);margin: 0 10px 0 0 } .generic-choices .radio-inputs input[type="radio"]:checked + label .check {width: 12px;height: 12px;background-color: var(--clr-black);border-radius: 100%;box-shadow: inset 0 0 0 1.5px #fff;border: 1px solid var(--clr-black);margin: 0 10px 0 0 } .generic-choices .radio-inputs input[type="radio"]:checked + label {cursor: default;font-family: SFR-Bold } .generic-promo {font-family: SFR-Bold;background: var(--clr-yellow);border-radius: 5px;font-size: 12px;line-height: 18px;padding: 0 8px;margin-right: 8px;display: inline-block;vertical-align: top;position: absolute;left: -58px;top: 7px;width: auto;} .offre-speciale {width:1280px;max-width: calc(100% - 64px);margin:0 auto} .offre-speciale .content{display:flex;gap:40px;margin-top:24px;} .offre-speciale .html-libre {background:#fff;width:100%;max-width:100%;height:fit-content;} .offre-speciale .CP{max-width: 400px} .popin-btn-close {content: "";cursor: pointer;display: block;height: 32px;position: absolute;right: 8px;top: 8px;width: 32px;} .popin-btn-close:before {position: absolute;content: "";background: url(https://static.s-sfr.fr/assets/pictos/fermer_40_noir.svg);background-size: cover;height: 32px;width: 32px;left:0;top:0;} :not(.showMeaCustomer) > #MeaCustomer {display:none} :not(.showMeaCustomer) > .meaCustomer {display:none} .meaVisitor {display:none} .showMeaVisitor > .meaVisitor {display:block} #fl_return{display:none;font-size:14px;font-family:'sfr-Bold';color: var(--clr-black);} #fl_return p:before{display: inline-block;content: "";background: url(//static.s-sfr.fr/media/icono-picto-arrow.svg); transform: rotate(90deg); width: 16px; height: 8px;background-size: contain;margin-right: 6px;} /*bol-mobile-plan-card-block .list-check li:nth-child(4){display: none;} *//*A supprimer*/ #Mobile-plans-list-block_3 bol-mobile-plan-card-block .list-check li:nth-child(4){display: block;}/*A supprimer*/ #Mobile-list-block_2 bol-mobile-plan-card-block .list-check li:nth-child(4){display: block;}/*A supprimer*/ bol-seo-meta-data {position: absolute;} .mea-box5g-26 {background: #fff;width: 1280px;max-width: calc(100% - 64px);margin: 24px auto 32px;padding: 24px;border-radius: 8px;gap:24px;display: grid;} .mea-box5g-26 button{font-family: SFR-Regular;text-decoration: underline;background: transparent;cursor: pointer;color: var(--clr-black);} .mea-box5g-26 .sticker.j{width: fit-content;} .mea-box5g-26 .content{display:flex;gap:80px} .mea-box5g-26 .L{display:flex;align-items: center;} .mea-box5g-26 .visuel{width:128px;height:auto;max-width: 100%;} .mea-box5g-26 .btn{width: fit-content;} .mea-box5g-26 .R{position:relative;} .mea-box5g-26 .R > div{display: flex;margin: 8px 0;} .mea-box5g-26 .R img{width:24px;height:auto;margin-right:8px} .mea-box5g-26 .content >.R:before{position:absolute;content:'';width:1px;height:100%;background:#70707B;left:-40px;top:0;} #BlocTop .stickers{width:fit-content;margin: 0 auto; display:flex; gap:8px;} #BlocTop .stickers:empty { height: 24px; } #BlocTop .stickers + h1{margin:16px;} #BlocTop .AVIS{width:fit-content;margin: 16px auto;} #BlocTop .AVIS a{position:static;} .it{font-style:italic;} .conf-offer{position: relative;width: calc(100% - 64px);max-width: 1280px;margin: 0 auto 40px;} .conf-offer .wrapper{display:flex;flex-wrap: wrap;background: #fff;padding: 24px;border-radius: 12px;gap:24px;margin:40px 0 0 0;width:100%;} .conf-offer .wrapper .T{width:100%;} .conf-offer .wrapper .T a{font: normal 24px / 36px SFR-Bold;color: var(--clr-black);text-decoration: none;white-space: normal;} .conf-offer .wrapper .L, .conf-offer .wrapper .M, .conf-offer .wrapper .R{flex:1;} .conf-offer .wrapper > .L{display:flex;flex-direction:column;gap:24px;} .conf-offer .wrapper .L a{width:fit-content;} .conf-offer .wrapper .L .P{display:flex;} .conf-offer .wrapper .L > img{width:128px;height:128px;} .conf-offer .wrapper .list-check{border:0;font-size:14px;} .conf-offer .wrapper > div:not(.T):not(:last-child){border-right:1px solid var(--clr-grey);padding:0 24px 0 0;} #Chainestv > bol-tv-channels > div.bl_contenu > div{margin:40px auto 0 auto;} .conf-offer .price{width:fit-content;line-height:28.8px;} .conf-offer .engagement{margin:0 0 8px 0;} #SelectPhone > button{width:24px;} #SelectPhone .top{margin:16px 0 0 0;} #SelectPhone .btns{align-items: center;} #SelectPhone .btns button{width:fit-content;margin-top:0;} #SelectPhone .carte-offre .link{width:fit-content;} #SelectPhone .carte-offre .btn{margin-top:0;} /* */ #SelectPhone .CP.Mini{padding:24px 16px;font:normal normal 14px SFR-Regular,Arial,sans-serif;grid-row: span 3;gap: 8px;cursor:default;} #SelectPhone .CP.Mini .TopB{flex:1;padding: 0 0 0 80px;} #SelectPhone .CP.Mini .T {display:flex;flex-direction:column;justify-content:flex-start;text-align: left;gap: 8px;min-height: 64px;} #SelectPhone .CP.Mini .T .img-central{position: absolute;top: 0;bottom: 0;margin: 0 auto;left: 0;width: 64px;height: 64px;border-radius:4px;object-fit:fill;} #SelectPhone .CP.Mini .marque{font-size:12px;} #SelectPhone .CP.Mini .M a{font-size:16px;line-height:120%} #SelectPhone .CP.Mini > .B {padding: 16px 0 0 0;border-top: 1px solid var(--clr-grey);margin: 8px 0;} #SelectPhone .CP.Mini .stickers + .stickers{margin:8px 0 0 0;} #SelectPhone .CP.Mini .btn4[disabled]{color: #A0A0AB;border-color: #A0A0AB;} #SelectPhone .CP.Mini .param{flex-direction:column;} #SelectPhone .CP.Mini .param b span{font-family:SFR-Regular;} #SelectPhone .CP.Mini .param:not(:last-of-type){margin:0 0 16px 0;} #SelectPhone .CP.Mini .AVIS{margin:4px 0 0 0;} #SelectPhone .CP.Mini .param .option{padding:11px 16px;border-color:var(--clr-grey);line-height:normal;text-align:left;-webkit-appearance: none;-moz-appearance: none;appearance: none;margin:8px 0 0 0;font-size:14px;} #SelectPhone .CP.Mini .param div:has(.option){position:relative;} #SelectPhone .CP.Mini .param div:has(.option):after{content: '';position: absolute;width: 8px;height: 8px;border: 1px solid var(--clr-black);transform: rotate(45deg);bottom: 14px;right: 16px;border-top: 0;border-left: 0;transition: all 0.2s ease-out;} #SelectPhone .CP.Mini .param .option:after {content: '';position: absolute;width: 8px;height: 8px;border: 2px solid var(--clr-black);transform: rotate(45deg);top: 29px;right: 26px;border-top: 0;border-left: 0;transition: all 0.2s ease-out;} #SelectPhone .CP.Mini .param .optionDiv{position:relative;} #SelectPhone .CP.Mini .param .optionDiv:after{content:'';background: url(https://static.s-sfr.fr/assets/pictos/chevron_bas_40_noir.svg) no-repeat center;background-size: contain;width:16px;height:16px;position:absolute;right:16px;top:0;bottom:0;margin:auto;} #SelectPhone .CP.Mini .cl {position: relative;cursor:pointer;-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;width: 16px;font-size: 5px;height: 16px;border-radius: 50%;box-sizing: content-box;border: 1px solid var(--clr-grey);margin:16px 0;} #SelectPhone .CP.Mini .cl:focus-visible {outline-offset: 6px;border-radius: 100%;outline: 2px #181818 solid;outline-offset:2px;} #SelectPhone .CP.Mini .cl.active:after {content: "";position: absolute;width: 24px;height: 24px;border-radius: 100%;border: solid 2px var(--clr-sfr2);top: 0;bottom: 0;margin: auto;left: -4px;box-sizing: border-box;} #SelectPhone .CP.Mini .cl.d:before {content: '';position: absolute;width: 24px;height: 1px;background: var(--clr-black);transform: rotate(45deg);left: -4px;bottom: 0;top: 0;margin: auto;} #SelectPhone .CP.Mini .cls {display: flex;gap: 12px;} #SelectPhone .CP.Mini .cls input:disabled + .cl{cursor:auto;} #SelectPhone .CP.Mini .cls input:checked + .cl:after {content: "";position: absolute;width: 26px;height: 26px;border-radius: 100%;border: solid 2px var(--clr-sfr2);top: 0;bottom: 0;margin: auto;left: -4px;box-sizing: border-box;} #SelectPhone .CP.Mini .cls input:disabled + .cl:before {content: "";border-top: 2px solid var(--clr-black);width: 26px;position: absolute;left: 1px;top: -1px;transform: rotate(45deg);transform-origin: top left;} #SelectPhone .CP.Mini .sticker.b{line-height:24px;} #SelectPhone .CP.Mini .desc{margin:16px 0 0 0;} #SelectPhone .CP.Mini .stickers{margin:0 0 8px 0;} #SelectPhone .CP.Mini .price .L{line-height:100%;} #SelectPhone .btnSli:hover{background:none;} #SelectPhone .sliderAcc{margin:40px 0 0;} #SelectPhone .btnSli[disabled]{opacity:.5;} #SelectPhone .btnSli{padding:0;width:40px;} #SelectPhone .CP.Mini{width:290px;} .mea-box5g-26 .ttp{position:relative;} .mea-box5g-26 .ttp > span{font-size:14px;} .mea-box5g-26 .ttp>button {cursor: pointer;background-color: transparent;background-image: url(//static.s-sfr.fr/assets/pictos/aide_plein_40_noir.svg);background-repeat: no-repeat;background-size: contain;position: relative;top: 2px;} .mea-box5g-26 .ttp ul {list-style-position: inside;} .mb8{margin-bottom:8px;} .mt8{margin-top:8px;} .mt24{margin-top:24px;} .loader-comp{position:relative;overflow:hidden;} .loader-comp.full{position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index:999;} .loader-comp:before {content: 'Chargement en cours...';position: absolute;width: calc(100% + 2px);height: calc(100% - 24px);background: #fff;left: -1px;top: -1px;background-image: url(https://static.s-sfr.fr/assets/logos/SFR.svg);z-index: 6;background-size: auto;background-repeat: no-repeat;background-position: 50% calc(50% - 42px);display: flex;justify-content: center;align-items: center;padding: 48px 0 0 0;} .loader-comp:after {content: "";position: absolute;top: calc(50% - 76px);left: 0;right: 0;margin: auto;height: 80px;width: 80px;color: var(--clr-sfr2);display: inline-block;border: 5px solid;border-radius: 50%;border-top-color: transparent;animation: rotate 1s linear infinite;z-index: 6;} /* CED .info-tooltip+li+li span.bold { background: #fff; position: relative; color: #fff; font-size: 1px; width: 46px; } .info-tooltip+li+li span.bold:after { content: '49€'; position: absolute; left:0; right: 0; font-size: 14px; color: var(--clr-black); } */ #partenaire .frandroid{ background: #2c3049 } #Internet-eligibility-block_3 { min-height: 241px; background: var(--clr-sfr2); } #Internet-eligibility-block_3:not(:has(#Eligibility)) {background: none;} #Internet-eligibility-block_3:has(#JEFECEligibility) { background: none; } #Internet-eligibility-block_3 #Eligibility { max-width: 1536px; } #Internet-eligibility-block_3 #eligParcours { max-width: 100%; min-height: 158px; /* width: 840px; */} @media (max-width:1240px){ bol-basket div.bloc_panier{left:auto;right:-100px;max-width:450px;width:450px} } @media (max-width:992px){ bol-basket div.bloc_panier{width:100%;left:0;right:unset;max-width:none} } @media(max-width:1100px){ #ChoixOffreSpeciale { justify-content: left; } #Internet-eligibility-block_3 { min-height: 500px; } #Internet-eligibility-block_3 #eligParcours { width: 100%; min-height: 278px; } #Internet-eligibility-block_3 #eligParcours:has(#JEFECEligibility) {width: auto; min-height: auto; } #Internet-eligibility-block_3 #Eligibility { max-width: none; flex-direction: column; } .offre-speciale .CP {max-width: 486px; width: calc(100% - 32px);} /* 4P */ .carte-offres .carte-offre .techno{font-size:18px;} .carte-offres .carte-offre .link{margin:auto;} .tabs{justify-content: center;} .etape, .scrollCont{width:calc(100% - 32px);} .recap>div>span{font-size:18px;} .recap{flex-direction:column;} .recap>div{padding:24px 0;} .recap>div:not(:first-child):before{height:1px;width:100%;} .recap>div:not(:first-child):after{left:0;top:-10px;right:0;margin:auto;} dialog{padding:56px 16px 24px;} #Eligibility.bg {gap: 16px;background: 100% 85% / cover url(//static.s-sfr.fr/media/Fixe/img-bckg-reg-resp.webp);} #ChoixEngagement{padding:16px 0;margin:-16px auto;width:486px;max-width: calc(100% - 32px);} #ChoixEngagement.modifier {flex-flow: wrap;} #ChoixEngagement.modifier .link{position: relative;margin: 24px 16px 0 0;} .wrapper,#CPF bol-title-block,.info-mig{max-width: calc(100% - 32px);} #FiltersBlock {position: relative;margin: 24px auto 40px;width: 486px;max-width: calc(100% - 32px);} bol-title-block .bloc_TitleMenu .bloc_top .bl_desc {min-height:48px;margin-bottom: 24px} bol-title-block .bl_desc {margin: 24px auto;} #services_mobile_module_sfr_box_8x,.bloc_SubTitle .wrapper{width:486px;margin-top:24px} bol-semantic-booster #SB div {width:486px;} bol-with-sfr-block .with_sfr_bloc .list{flex-direction:column;width: 486px;gap:16px;max-width:calc(100% - 32px);} bol-bloc-with-sfr .bloc_with{min-height:123px;padding:16px;} bol-with-sfr-block .with_sfr_bloc .list li{max-width:100%;} bol-with-sfr-block .with_sfr_bloc .list li:last-child{margin:0;} .filter.hr{display:none;} .features_bloc {width:486px;padding:24px 20px} .features_bloc ul {margin: 36px 0 0;} .features_bloc ul.indics {max-width: 256px;display: flex;flex-flow: row wrap;justify-content: space-between;margin: 0 auto -20px;} .features_bloc ul.indics li{width:120px;margin-bottom:16px} .features_bloc .specs {grid-template-columns: 256px;height: 1288px;justify-content: center} .features_bloc .l,.features_bloc .r {float:unset;max-width:100%;text-align:left} .features_bloc [data-tranche] {float:unset;max-width:100%;position: relative;top: unset;transform: unset;margin-bottom: 31px} .bloc_SubTitle .wrapper h2 {display: block;margin-bottom:16px;} .bloc_SubTitle .wrapper h2 + .principal-desc{margin:-8px 0 8px;} .bloc_SubTitle .desc {margin: 8px 0} .photo_credit .wrapper{margin-top:24px;} .Media #vousaimerezaussi .addons_bloc {margin-bottom:24px;} bol-config-bundle .bloc_SubTitle h2{justify-content: center} #ConfigBundle {flex-flow:column;align-items:center} #ConfigBundle > p, #ConfigBundle .L > p {text-align: center} #ConfigBundle .L {justify-content: center;max-width: 100%;margin-bottom:32px;} #ConfigBundle .L > p {margin:70px auto 24px} #ConfigBundle .L div {margin:0 7px 5px 0;width:220px} #ConfigBundle .L > label {margin: 0 auto 5px} #ConfigBundle .addons_bloc:after {top: -28px;left: 0;right: 0;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 0} .generic-tab .selector {display:flex} .generic-tab label {display:none} .generic-tab input:checked + label + section {height:auto;top:88px} bol-mobile-order-list {position:relative;height: auto;width:486px;top:0;max-width: calc(100% - 32px);} #OffreFixe .carte-offres.mea:has(.Box5G-mea) .carte-offre { grid-row: auto; } #OffreFixe .carte-offres.mea:has(.mea-box4g) .carte-offre { grid-row: auto; } #Order {position: relative;top: 0;margin: 0 0 16px;} #ExperienceTV > div {margin-bottom:360px} #ExperienceTV .R {min-height:321px;align-items: center} #ExperienceTV .socle {top: -8px} #ExperienceTV .L {width:288px;height:188px;padding:16px} #ExperienceTV .L a {width:calc(100% - 32px);left:16px;bottom:16px} #ExperienceTV .L .title {font-size: 16px;line-height: 16px} #ExperienceTV .L .desc {font-size: 12px;line-height: 16px} bol-resume-option-block > div.pres {flex-direction: column;align-items: center;width: calc(100% - 64px);gap: 16px;} bol-resume-option-block .pres .sous-titre{width:100%;} #BolUsage{padding:16px} #BolUsage > form{flex-flow:column;align-items:unset} #BolUsage > form > div{width:100%;margin-bottom:12px;margin-right:0} #BolUsage .details{justify-content:left} #BolUsage .details section{margin-bottom:20px} #programs{padding:0 32px} .generic-choices .desktop, .generic-choices .radio-inputs.desktop, .generic-choices .checks.desktop {display: none} .generic-choices .checks.mobile, .bloc_choices .select.mobile,.generic-choices p.mobile{display:block} .bloc_choices {flex-direction: column;gap:16px} .generic-choices.top{padding:16px;} .actual-o {padding:16px;} .actual-o h3 {margin-bottom:16px;} .actual-o .i-t {grid-auto-flow: row;grid-template-columns: auto auto;gap: 16px 4px;} .actual-o .i-t p{max-width:100%;} .actual-o .i-t span{display:inline-block;} .bloc_choices .R:after {content: unset} .generic-choices .form p:not(.bold) {margin-top: 24px;margin-bottom: 10px} #BlocAvAp.rm .h p {font-size:16px;line-height:24px} #BlocAvAp.rm .s{gap: 0 8px; max-width:calc(100% - 32px);} #BlocAvAp.rm .l, #BlocAvAp.rm .r {width:100%;text-align:left} #BlocAvAp.rm .t {margin-bottom:-8px} #BlocAvAp.rm .s div {padding: 0 16px 16px 16px} #BlocAvAp.rm .t , #BlocAvAp.rm .c .st{font-size:14px;line-height:20px} #BlocAvAp.rm .c p,#BlocAvAp.rm .c span {font-size:12px;line-height:18px} #BlocAvAp.rm .sd {font-size:10px;line-height:14px} #BlocAvAp.rm .w {flex-flow: column;align-items: flex-start} #BlocAvAp.rm .w {font-size: 12px} #BlocAvAp.rm .c .stick section {display: flex;flex-flow: row-reverse wrap;justify-content: left} #BlocAvAp.rm .c .sticker {margin-right: 0} #BlocAvAp.rm .c .stick span:not(.sticker){margin-right: 8px} #BlocAvAp.rm .l.eng {order: 3} .generic-i-t {grid-template-columns: 1fr;padding: 16px;} .generic-i-t div{order:2;max-width:100%} .generic-i-t img {margin: 0 auto 24px;display: block;width: 100%;max-width: 100%;height: auto} .generic-i-t .btn,.generic-i-t .btn4 {width:auto;} .generic-l-info {padding: 16px} .generic-l-info img{margin-top:16px} .generic-l-info p{font-size:12px;line-height:18px;max-width: calc(100% - 60px);margin: 0 0 0 16px} .generic-l-info .link{max-width:calc(100% - 56px);margin:0 0 0 56px} .es-block .quit {margin: 46px 0 27px;display: table;padding-left:24px} .es-block ng-autocomplete {width: 277px} .steps-two {grid-template-columns: 1fr} .es-block .r {position: absolute;right: 32px;bottom: 40px} .es-block {padding:24px 16px} .es-block.results .l .btn, .es-block.results .l .btn4 {display: flex;justify-content:center;margin: 0 auto 16px} .es-block.results .link{display: table;margin: 0 auto 16px} .es-block.results .h .b {display:none} .es-block.results .h {padding: 24px 32px} body:not(.Media) .bl_notice{margin-top:24px;} #Configurateur .popin-block { overflow: auto; top: 32px; bottom: auto; max-height: 700px; width: calc(100% - 32px); max-width: none; } #Configurateur .popin-block .popin-btn-close { /*position: fixed; position: fixed; top: 50px; right: 50px; */} .CPtoggle{position:initial;} .CPtoggle form {margin:0 auto;} #CPF .cards{display:block;} #CPF .bloc-w {margin-bottom:16px;} #CPF #CPbtn{padding: 22px 16px 16px;height: fit-content;position: relative;} .bloc-w{height:fit-content;padding:16px;} .generic-sum .n.sep{padding : 16px 16px 0;} #CPF bol-fil-ariane{display:none;} #CPFrecap {margin-bottom:16px;min-height:initial;} #CPF .btn.toAdd { position: relative; width: inherit; bottom: 0;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card .btn{bottom:8px;max-width:calc(100% - 16px);} #Quelleoffrechoisir .bl-ip-container{padding:8px;} #Quelleoffrechoisir .bl-ip-container div{max-width:none;} #Quelleoffrechoisir .addons-card .T{padding:8px;} #Quelleoffrechoisir .addons-card .BlackBloc{padding:8px;} #Quelleoffrechoisir .bl_offer_to_choose .addons-card.btnplus > div:first-child{padding:0 8px;} #Qoc .bl_offer_to_choose .addons-card .btn{bottom:8px;max-width:calc(100% - 16px);} #Qoc .bl-ip-container{padding:8px;} #Qoc .bl-ip-container div{max-width:none;} #Qoc .addons-card .T{padding:8px;} #Qoc .addons-card .BlackBloc{padding:8px;} .pb_hnavbar label, .pb_hnavbarinput{display:none;} .pb_hnavbar select{display:block; color:#fff;padding:12px 24px;background:none;border:0;width:100%; -moz-appearance:none; -webkit-appearance:none; appearance:none;} .pb_hnavbar{width:calc(100% - 64px); margin:0 32px; border:0;background:var(--clr-black);color:#fff;position:relative;} .pb_hnavbar:after{ transition: all 0.2s ease-out; position: absolute; right: 16px; top: 16px; pointer-events: none; border-style: solid;border-width: 2px 2px 0 0; content: ''; height: 8px;transform: rotate(135deg); width: 8px; color:#fff;} #Demen{flex-direction:column;align-items:center;gap:24px;} #Demen > div.L, #Demen > div.R{width:100%;padding:16px;} #Demen .texts{flex-direction:column;} #Demen .texts .btn{max-width:none;margin-top:16px;} #Demen .texts p{align-self: flex-start;max-width:none;} #Eligibility .message p > a { font-family: SFR-Bold; text-decoration: underline; display: table; margin: 0; } #Demen .demenMessage > #DNGmessage1{padding:16px;} #Demen .demenMessage > #DNGmessage1:after{content:none;} #Eligibility .message p { margin: 0 0 16px 0; } /* Formulaire Eligibilité */ #network-internet-lame .group1-lame-reseaux { width: 100%; margin-left: auto; } #network-internet-lame .group1-lame-reseaux>div { margin-right: auto; gap: 16px; } #network-internet-lame .desktop-hidden { display: block; } #network-internet-lame .tablet-mobile-hidden { display: none; } #network-internet-lame { height: 172px; background-image: url(https://static.s-sfr.fr/media/Fixe/MEA/tablet_offre_box.jpg); margin-top: 24px; } #network-internet-lame h2 { margin: 0; } #FaqDetails{max-width: calc(100% - 32px);} #Configurateur .popin-block {overflow: auto;top: 32px;bottom: auto;max-height: 700px;width: calc(100% - 32px);max-width: none;} #ChoixRetrait:target {max-height: calc(100vh - 32px);max-width: calc(100% - 32px);padding: 40px 16px 16px;} #ChoixRetrait .scroll{max-height: calc(100vh - 220px);} #IConso{flex-direction:column;} #IConso .L{order:2;} #IConso .R{order:1;width:100%;height:352px;background-image:url(https://static.s-sfr.fr/InfoConsoMobile.webp);} .wrapper .subtitle {margin: -16px 0 16px;} .generic-choices.top {width: 486px;} .bloc_choices .actual-o {max-width: 100%;width: 486px;margin: auto;flex-flow: row wrap;padding: 16px;} #Configurateur {grid-template-columns: 1fr;gap:16px;width: 486px;max-width: calc(100% - 32px);} #Configurateur .bloc-w{padding:16px} #Configurateur>.L {position:relative;} #Configurateur>.R .T{max-width:100%;} #Configurateur .tabs .tab {width:auto;} #Configurateur>.R .eodr .top {gap:16px;} .carte-produits .line{grid-template-columns: 1fr;width: 486px;gap: 16px;max-width: calc(100% - 32px);} .carte-offres {grid-template-columns: 1fr;gap:16px; width: 486px;max-width: calc(100% - 32px);} .carte-offre {grid-template-rows: auto;} .carte-offres.mea {grid-template-areas: unset;grid-template-columns: 1fr;justify-content: center;gap: 16px;} .carte-offres .carte-offre{padding:16px;gap:16px;/*width:328px;*/grid-template-rows: subgrid;} .carte-offre.sl .T:before {height: 222px;} .carte-offre .img-r {top: 16px;right: 16px;} .carte-offre .first-price{margin: 0 0 46px;} .carte-offre .first-price:before {position: absolute;content: "";background: var(--clr-sfr2);width: 100%;height: 1px;bottom: -32px;} .carte-offre .first-price:after {bottom: -48px;} .carte-offre .P {margin: 16px 0 0;padding-bottom: 16px;} .carte-offre .link {margin: 0 auto} #Configurateur .bloc-w .carte-offre{margin: 0;padding: 16px 0 0 0;} .carte-offre .list-check {padding-top: 16px;} .carte-offres .carte-offre.mea {grid-area: unset;} .choix-forfait {flex-direction:column;} .overlay button {top:24px;right:24px;} /*MARKET*/ #services_mobile_module_sfr_box_8x{margin-top:24px} .bloc_SubTitle .wrapper h2 {display: block;margin-bottom:16px;} .bloc_SubTitle .wrapper h2 + .principal-desc{margin:-8px 0 8px;} .addons_bloc .list{grid-template-columns: 328px 328px;justify-content:center;gap: 16px} .addons_bloc .list > li{margin:0} .addons-card .BlackBloc {padding:16px;} .addons-card .bl_prix {right:16px;} .addons-card .bl_btn, .addons-card .btn {bottom: 8px;width: calc(100% - 16px);} .generic-promo {font-size: 8px;line-height: 20px} .offre-speciale .content {flex-flow:column;gap:16px;align-items:center;} .mea-box5g-26 {width: 486px;padding: 16px;max-width: calc(100% - 32px);} .mea-box5g-26 .content {flex-direction: column;gap: 0;} .mea-box5g-26 .content >.L {justify-content: space-between;padding-bottom: 24px;border-bottom: 1px solid #70707B;} .mea-box5g-26 .content > .R:before {content: none;} .mea-box5g-26 .content > .R {position: relative;margin: 8px 0 -8px;} #Configurateur>.L .info > .link{margin:24px auto 0;} .conf-offer{width: calc(100% - 32px);max-width: 486px;} .conf-offer .wrapper{flex-direction:column;width:100%;} .conf-offer .wrapper > div:not(.T):not(:last-child){border-right:0;padding:24px 0 0 0;} .conf-offer .wrapper > div:not(:first-child){border-top:1px solid var(--clr-grey);} #BlocTop .subtitle:after{top:1px;} div:has(.carte-offre.sl) .carte-offre.sl .T:before {height: max(35%, 305px);} #OffreFixe div:has(.carte-offre.sl) .carte-offre.sl .T:before {height: max(38%, 230px);} #SelectPhone .sliderAcc{margin:24px 0 0;} #SelectPhone .carte-produits{margin:0 auto 24px;} #SelectPhone .CP.Mini{width:271px;} #SelectPhone{width:486px;} #SelectPhone .btns {flex-direction: column;width: 100%;} } @media(max-width:768px){ #SelectPhone .btns:after {content: "";position: absolute;background: #fff;height: 16px;width: 100%;left: 0;bottom: -16px;} #SelectPhone .btns > * {width: 100%;} dialog .back-to-shop {position: relative;top: 0;margin: 0 0 16px;} #FiltersBlock .btn2 {bottom: -8px;top: unset;} #FiltersBlock .rs {grid-auto-flow: row;} #FiltersBlock .ls a {width: 100%} #FiltersBlock .ls {border-right: 0;padding-right: 0;} dialog {padding: 16px;max-width: calc(100% - 64px);max-height: calc(100% - 64px);overflow-y: auto;} dialog .title {font:normal 18px/22px SFR-Bold;text-align:center;} #PopinWifi .caracteristiques-wifi td:empty, #PopinWifi .caracteristiques-wifi th[scope="row"] {display: none;} #PopinWifi .caracteristiques-wifi td[colspan] {display:table-cell;background:#222;color:#fff;border: 2px solid white;padding: 16px;text-align: left;} body:not(.Media) .bl_notice{padding:0 16px;} .bl_all_channels{max-width:calc(100% - 32px);} bol-seo-block .bloc_seo{padding:0 16px;} .photo_credit{padding:0 16px;} .bloc_faq{padding:0 16px;} bol-fixe-offer-list .wrapper{padding-bottom:16px} .phone_plan{margin:0 auto;max-width:100%} bol-resume-option-block .pres, body.Media .pres{max-width:calc(100% - 32px);flex-direction:column} bol-resume-option-block .pres .sous-titre,body.Media .pres .sous-titre{width:100%} .addons-card .header img {height: 100%} .addons-card .BlackBloc h3{font-size:16px;line-height:16px;height:auto} #ConfigBundle {max-width:calc(100% - 32px)} #ConfigBundle .addons_bloc {padding:0} #ConfigBundle .L > p {margin:40px auto 12px} #ConfigBundle .L > p:first-of-type {margin-top: 12px} #ConfigBundle .L label, #ConfigBundle .L > div {margin: 0 auto 10px;width: 300px} #ConfigBundle .addons_bloc:after {top: -40px} #ExperienceTV {max-width: calc(100% - 32px);} #ExperienceTV > div {margin-bottom: 444px} .generic-tab input:checked + label + section {flex-direction: column;justify-content:center} #ExperienceTV .L {width:100%;max-width:100%;order: 2;margin-top:24px;height: auto} #ExperienceTV .L a {position: relative;width:100%;left: unset;bottom: unset;margin-top: 16px} #ExperienceTV .L:after {content:unset} #ExperienceTV .R {margin: -50px 0 0;min-height: 270px;width:336px;max-width:calc(100% + 32px)} #ExperienceTV .R img {width: 100%} .generic-tab .selector {width:100%} #ExperienceTV .front, #ExperienceTV .behind {margin-top: 58px;margin-bottom: auto;top:0} .other-pack-option{justify-content:center;} .other-pack-option > p{text-align:center;max-width:70%;} .other-pack-option input[name="choix-option"] + label{width:244px;margin-bottom:13px;line-height:17px;line-height:17px;min-height:41px;padding-top:3px;} .other-pack-option > p{margin:16px 0 22px;width:100%;} bol-tv-channels .contenu_bloc .channel_desc{flex-direction:column;justify-content:center;align-items:center} .bl_offer_to_choose{max-width:calc(100% - 32px);padding:20px 8px} .bl_offer_to_choose .bl_right{flex-direction:column;padding:16px 10px 32px} .bl_offer_to_choose .bl_right > div:nth-child(2){min-height:58px;max-width:inherit} .lame-message,.change-forfait {width: 486px;max-width: calc(100% - 32px);} .bloc_choices{max-width:calc(100% - 32px);flex-direction:column;padding:24px 0 0 ;} .generic-choices .b-p .i-explanation + .explanation {left: -42px;} .generic-choices .b-p .explanation:after{left: 171px;} .bloc_choices .connexion{margin:24px auto;max-width:100%;width:100%;padding:16px} .generic-choices{min-height:auto;max-width:100%;margin:auto;padding:16px;} .bloc_choices .form{flex-flow:column} .bloc_choices .R{width:100%;padding-left:0;height:auto} .bloc_choices .R:after{content:none} .actual-o .md-content:before {top: -4px;right: unset;left:123px;} .actual-o input:checked + label .md-content {left: -16px;width: calc(100vw - 32px);} .generic-choices .select{width:100%} .generic-choices .checks.mobile{display:flex;flex-flow:column} .generic-choices .checks.mobile p{margin-right:0;margin-bottom:8px} .generic-choices .checks.mobile label{display:flex;width:120px;height:37px;font-family:SFR-Bold;font-size:16px;line-height:24px;border:solid 1px var(--clr-disable);cursor:pointer;justify-content:center;align-items:center} .generic-choices .checks.mobile label:first-of-type{border-bottom-left-radius:4px;border-top-left-radius:4px} .generic-choices .checks.mobile label:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px} .generic-choices .checks.mobile input:checked + label{color:#fff;background:var(--clr-black);border:solid 1px var(--clr-black);cursor:default} .bloc_choices .select.mobile, .bloc_choices p.mobile{display:block} .generic-choices .form p:not(.bold){margin-top:24px;margin-bottom:10px} .generic-choices > p.bold{text-align:center;margin-bottom:12px} .generic-choices.top a {display:block;margin:16px auto 0;width:100%;} .bloc_choices .R p:not(.bold){margin-top:24px} .bloc_choices .checks .bold, .bloc_choices .checks .inputs{width:100%;display:flex} .generic-choices .links {margin:0 auto;} .bloc_TitleMenu .subtitle{display:none} .with-background:after{height:416px} #BolUsage {max-width:calc(100% - 32px);justify-content:center} #BolUsage .details{max-width:calc(100% - 32px);justify-content:center} #BolUsage .details section:not(:last-of-type){margin-right:6px} #BolUsage .details section{margin-left:6px} #BolUsage > form > div{margin-bottom:14px} #BolUsage > form > .submit{margin:0 auto} #BolUsage > form label{margin-top:2px} .channel-in-bouquet{max-width:calc(100% - 32px)} .channel-in-bouquet .bl_top {flex-direction:column} .channel-in-bouquet .bl_top .bl_img {margin: 0 0 20px;min-width: unset} #programs{padding:0 18px;flex-direction:column;align-items:center;gap:16px;margin:40px auto 40px} #programs li{width:100%} .features_bloc {max-width:calc(100% - 32px)} bol-mobile-network-banner .ReseauMob>.wrapper .bl_link {margin-bottom: 16px} bol-semantic-booster #SB div { text-align: center; max-width:calc(100% - 32px);margin:24px auto 0;} bol-semantic-booster #SB h2 { margin-bottom: 16px; } .avis_bloc {max-width:calc(100% - 32px)} .avis_bloc .t.first {font-size: 14px;line-height: 22px} .avis_bloc .st.first {font-size: 10px;line-height: 14px} .avis_bloc label {font-size: 10px;line-height: 14px} .avis_bloc .mic {width: 272px;left: -141px;margin: auto} .avis_bloc img {max-width:76px;margin-right: 16px;height: auto;right: -1px} .avis_bloc .l {grid-template-columns: 1fr} .avis_bloc .top {flex-flow: wrap;justify-content: left;padding: 16px} .avis_bloc .top:after {height:64px} .avis_bloc .sd {grid-template-columns: auto} .avis_bloc .db {width: 100%;margin: 0;padding: 24px 0 0} .avis_bloc .nmg {width: calc(100% - 92px);padding-right: 0} .avis_bloc .l {grid-template-columns: 100%} #BlocAvAp.rm .h p {width:96px;font-size: 14px;line-height: 22px} #BlocAvAp.rm .t > * {display: block} #BlocAvAp.rm .sticker{display:inline-block} #BlocAvAp.rm .t span {font-size: 12px;line-height: 16px;margin-left: 0;text-align: center} #BlocAvAp.rm .pi:before {left:-10px} .back-shop {max-width:calc(100% - 32px);padding: 15px 10px 5px} bol-price-bar-block .price_bar .wrapper.promo {padding: 40px 18px 12px} .price_bar .sw-promo {position: absolute;margin:16px 16px;bottom:unset} .bloc_SubTitle p.principal-desc {text-align: left} #popinContainer.discover #popinContent {display: block;text-align: center} #popinContainer.discover section p {font-size: 12px;line-height: 16px} .generic-l-info {max-width:calc(100% - 32px)} bol-mobile-plans-list bol-mobile-plan-card-block {flex-flow: column;} .es-block {max-width:calc(100% - 32px);padding:16px;text-align:center} .es-block .or {display: block;margin:0 auto} .es-block form {width: 100%} .es-block ng-autocomplete{width: calc(100% - 40px)} .es-block button{margin: 0 0 0 -4px} .es-block .btn {width: 100%} .es-block .desc{margin-bottom:24px} .es-block .toggles {display:block} .es-block .toggles div{text-align:left} .es-block .toggles label {display:inline-block;margin:24px 12px 0} .toggles.generic-step div {min-height: none;} .es-block .r {position: relative;bottom: 0;right: 0;margin: 32px auto 40px} .es-block .r span {display: block;margin-bottom: 24px} .es-block .r button {width:100%;} .es-block .quit {margin: 40px auto 22px;padding-left:0} .generic-i-band {position:relative;text-align: left;padding-left: 44px} .generic-i-band img {position: absolute;left: 12px;top: 8px} .es-block.results .l .btn, .es-block.results .l .btn4{width:100%} .es-block.results .h .addi > * {display:block} .es-block.results .h {flex-flow: column;padding: 24px 16px} .es-block.results .h .addi .sy {margin:10px 0} .es-block.results .h .reprise { order: 2;text-align: left} .l-see-steps .link, .l-see-steps img {margin-left: 24px} #toast-container.toast-container>.ngx-toastr{border-radius:unset;top:60px;width:100%;} bol-bol-layout.scrolled.to-down{top:260px;} bol-bol-layout.scrolled bol-title-block .bloc_bot.sticky{transition:padding-top .15s cubic-bezier(.4,0,1,1);} bol-bol-layout.scrolled.to-down bol-title-block .bloc_bot.sticky{padding-top:2px;} bol-bol-layout.scrolled.to-up bol-title-block .bloc_bot.sticky{transition:padding-top .2s cubic-bezier(0,0,.2,1);} bol-forfaits-choices .bloc_filtres{display:inline-block;float:none;margin:0 5px;position:inherit;} bol-forfaits-choices .bloc_filtres .filter-bloc-relative{left:0;right:0;text-align:left;width:100%;} .bl_configurateur>div{max-width:none!important;} .bl_configurateur .bl_left{margin:0 16px;} .bl_configurateur .bl_right{border-radius:0;padding:32px 26px 40px;} .bl_configurateur .bl_right:before{top:25px;} bol-phone-magasins .bl_magasins{max-width:inherit;} .bl_exlu_web{margin-top:10px;} .bl_exlu_web .Desc .YellowTitle{font-size:12px;} .bl_exlu_web .Desc .CustomPrice{font-size:25px;} .bl_exlu_web .Desc .clientOffer{display:none;} bol-card-block-form .bl_contenu .contenu_bloc{margin:16px 18px;padding:24px;} bol-bloc-add-mobile{justify-content:space-between;min-width:160px;padding:10px 16px;} bol-bloc-add-mobile .bloc-bottom{padding:0;} bol-bloc-mobile .bloc-left{min-width:40px;} bol-bloc-mobile .bloc-right bol-price{font-size:14px;} bol-bloc-mobile .bloc-right{min-width:100px;} bol-bloc-mobile .bloc-right>div:first-child{font-size:12px;} bol-bloc-mobile{min-width:0;} .bl_contenu .contenu_bloc,.bl_contenu .contenu_bloc_no_border{padding:0;} .bl_contenu .contenu_bloc_no_border ul.bloc,.bl_contenu .contenu_bloc ul.bloc{padding:0 20px;} .bl_contenu .contenu_bloc_no_border ul.bloc>li form .submit,.bl_contenu .contenu_bloc ul.bloc>li form .submit{min-width:70px;padding:0 15px;} .bl_contenu .contenu_bloc .avantages,.bl_contenu .contenu_bloc_no_border .avantages{display:block;} .bl_contenu .contenu_bloc .avantages li,.bl_contenu .contenu_bloc_no_border .avantages li{margin:0 0 40px;max-width:none;} .bl_contenu .contenu_bloc_no_border ul.liste,.bl_contenu .contenu_bloc ul.liste{display:block;} .bl_contenu .contenu_bloc_no_border ul.liste li,.bl_contenu .contenu_bloc ul.liste li{margin:0 10px 32px;} .phone_plan .BlackBloc{flex-flow: wrap;} .phone_plan .bl_desc{margin:0 auto 16px;} .phone_plan .bl_btn{width: 100%} bol-mobile-avis-block .avis_bloc .list{display:block;padding:30px 20px;} bol-mobile-avis-block .avis_bloc .list li{margin:0 0 30px;max-width:inherit;min-width:inherit;} bol-avis-bloc .bloc-top>div:first-child{font-size:16px;} bol-tv-channels .title_bloc{padding:24px 20px 12px;} bol-tv-channels .search_tv{padding:24px 20px;} bol-tv-channels .search_tv .bl_input .submit{padding:0 5px;width:57px;} bol-tv-channels .channel_list{justify-content:center;padding:12px 20px;} .offre_box_elem .title{margin-bottom:8px;} .offre_box_elem .desc{display:none;margin-bottom:8px;} .offre_box_elem .desc.active{display:block;} .offre_box_elem .link{display:block;margin-top:8px;} .fil_ariane .v_desk{display:none;} .fil_ariane .v_mob{display:block;} bol-bol-layout.scrolled bol-title-block .bloc_bot.sticky{transition:padding-top .15s cubic-bezier(.4,0,1,1);} bol-bol-layout.scrolled.to-down bol-title-block .bloc_bot.sticky{padding-top:2px;} bol-bol-layout.scrolled.to-up bol-title-block .bloc_bot.sticky{transition:padding-top .2s cubic-bezier(0,0,.2,1);} .faq_bloc{padding:20px;} .bloc_faq .list_faq{padding:0 0 16px;margin-bottom:0;} .bloc_faq .list_faq li{margin-bottom:8px;} bol-recap-block .recap_bloc{padding:24px 0;} bol-recap-block .recap_bloc .list{display:block;} bol-recap-block .recap_bloc .list li{margin-bottom:16px;} .scrolled.to-down .price_bar.stiky{bottom:0;} .scrolled.to-up .price_bar.stiky{z-index:30;} .price_elem{padding:2px 0;} .price_elem{text-align:left;} .price_elem h3{font-size:14px;margin:0 0 2px;} .price_elem .desc{font-size:10px;} bol-new-services .new_services .wrapper{flex-direction:column-reverse;padding:32px 18px;} bol-new-services .new_services .bl_txt{text-align:center;} bol-new-services .new_services .bl_img{margin-bottom:32px;} bol-new-services .new_services .bl_img img{max-width:140px;} bol-mobile-subtitle-block .bloc_SubTitle .wrapper h2{float:none;line-height:1;} bol-mobile-network-banner .ReseauMob{overflow:hidden;} bol-mobile-network-banner .ReseauMob>.wrapper{flex-direction:column-reverse;min-height:inherit;padding:0;} bol-mobile-network-banner .ReseauMob>.wrapper{height:inherit;} bol-mobile-network-banner .ReseauMob .img_bl{margin:24px 30px;max-height:220px;} bol-mobile-network-banner .ReseauMob .img_bl:after{background-position:0;background-repeat:no-repeat;content:"";display:block;height:54px;position:absolute;top:100px;width:115px;} bol-mobile-network-banner .ReseauMob .img_bl .img_mob{display:block;} bol-mobile-network-banner .ReseauMob .img_bl bol-network-map{display:none;} bol-mobile-network-banner .ReseauMob .img_bl.four-g:after{background-image:url(https://static.s-sfr.fr/media/4g-ico2.svg);} bol-mobile-network-banner .ReseauMob .img_bl.fibre:after{background-image:url(https://static.s-sfr.fr/media/newsfrfr/fut/assets/images/svg/fibre-white2.svg);background-size:auto 40px;width:290px;} bol-mobile-network-banner .ReseauMob .img_bl img{height:auto;width:100%;} bol-mobile-network-banner .ReseauMob .img_bl svg{height:280px;} bol-mobile-network-banner .ReseauMob .text_bl{text-align:center;width:100%;} bol-mobile-network-banner .ReseauMob .text_bl:before{display:none;} bol-mobile-network-banner .ReseauMob .text_bl:after{clear:both;content:"";display:block;} bol-mobile-network-banner .ReseauMob .text_bl .Text700{display:none;} bol-mobile-network-banner .reseau_actu{margin:24px 0 0;padding:23px 30px 20px 18px;} bol-mobile-network-banner .reseau_actu .Text500{max-height:40px;overflow:hidden;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper{padding:24px 20px 15px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper h6{margin-bottom:7px;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top{flex-wrap:wrap;} bol-mobile-menu-bottom-block .bl_footer_top .wrapper .menu_footer_top li{margin:15px 0;min-width:30%;} .channel-categorized{padding:24px 18px;} .channel-categorized.full-width{border-radius:0;margin-left:-18px;width:calc(100% + 36px);} .channel-categorized .category{align-items:flex-start;} .channel-categorized .channel_container{justify-content:center;} .channel-category{padding:20px;} body.Media .channel-categorized .category h4{display:flex;flex-direction:column;max-width:90%;} body.Media .channel-categorized .category h4 span{margin-top:8px;} .bl_contenu_media .elem_contenu,.bl_contenu_media:nth-child(2n){flex-direction:column!important;} #bl_all_channels > div:nth-child(6), #bl_all_channels > div:nth-child(4) > div { justify-content:center;gap: 24px;} .error-block{padding:0 20px;}.error-block .wrapper{padding:0;} .error-block .error-num{font-size:150px;top:0;transform:translate(-50%);} .error-block .h2{margin-top:0;text-align:center;} .error-block .desc{text-align:center;} .bl_channels .title_bl{text-align:center;} .bl_channels .bl_channel .elem_channel{margin:0 5% 14px;max-width:40%;min-width:40%;} .bl_channels .bl_channel .elem_channel img{max-width:100%;} .bl_steps_contact .bl_desc{margin:0 auto 40px;} .bl_steps_contact .list_steps{flex-direction:column;} .bl_steps_contact .list_steps .elem_list_steps{margin:0 0 48px;max-width:inherit;} .popin-wrapper{justify-content:flex-start;padding:30px 20px;} .popin-wrapper .popin-title{margin-bottom:25px;max-width:100%;} .popin-logo{margin-bottom:25px;} .popin-logo img{width:40%;} .popin-content{max-width:100%;} .bl_how_to .list_how_to{flex-direction:column;} .bl_how_to .list_how_to>li{margin:20px 0;max-width:none;} .bl_table_garanties .tab_garantie{margin:0 0 16px;} .bl_table_garanties .wrapper.tables{flex-direction:column;} .bl_table_garanties .tab_garantie:nth-child(2){margin-left:0;} .bl_popin_add_basket .bl_popin{width:280px;} .bl_popin_add_basket .bl_popin .bl_content{flex-direction:column;} .bl_popin_add_basket .bl_popin .bl_content>div{margin-bottom:32px;} .bl_popin_add_basket .bl_popin .bl_content>div:after{display:none;} .bl_popin_add_basket .bl_popin .bl_content>div:last-child{margin:0;} .bl_partner_sites>.wrapper{padding:16px 0;} .bl_partner_sites>.wrapper .bl_img{min-height:70px;min-width:70px;} .bl_partner_sites>.wrapper .bl_img img{max-height:55px;max-width:55px;} #partenaire .wrapper{align-items:flex-start;flex-direction:column;height:auto;padding:10px 15px;} #partenaire .description{margin-top:5px;padding-left:0;} .toast-container .ngx-toastr.div{padding:16px 16px 16px 50px;width:100%;} #CPF .cards .c, #CPF .generic-sum{max-width:none;} #CPF #title_menu_block{margin-bottom:16px;} #Quelleoffrechoisir .addons-card{max-width:none;} #Quelleoffrechoisir .addons-card:not(.accessory) .header img {height: auto;} #Quelleoffrechoisir .addons-card.btnplus .bl_desc{margin-bottom:16px;} #Quelleoffrechoisir .bl-ip-container{flex-direction:column;} #Quelleoffrechoisir .bl_offer_to_choose{padding:0;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right {flex-direction: column; padding: 0;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right > div:nth-child(4){min-height:58px;} #Quelleoffrechoisir .bl_offer_to_choose .bl_right div bol-mobile-plan-card-block{width:100%;max-width:none;} #CPF .cards .c, #CPF .generic-sum{max-width:none;} #CPF #title_menu_block{margin-bottom:16px;} #Qoc .addons-card{max-width:none;} #Qoc .addons-card:not(.accessory) .header img {height: auto;} #Qoc .addons-card.btnplus .bl_desc{margin-bottom:16px;} #Qoc .bl-ip-container{flex-direction:column;} #Qoc .bl_offer_to_choose{padding:0;} #Qoc .bl_offer_to_choose .bl_right {flex-direction: column; padding: 0;} #Qoc .bl_offer_to_choose .bl_right > div:nth-child(4){min-height:58px;} #Qoc .bl_offer_to_choose .bl_right div bol-mobile-plan-card-block{width:100%;max-width:none;} .pb_hnavbar{width:calc(100% - 32px); margin:0 16px;} .stickers { height: auto; } .generic-cards .stickers + .prices {margin-top: 0;} .generic-cards .boxsl .stickers + .prices {margin-top: 75px;} .generic-cards .mea-tv {margin: 0 auto 32px;height: auto} #Demen{max-width: calc(100% - 32px);} #Demen > .L input[type="radio"] + label, #Demen > .L input[type="radio"] + label, #Demen b, #Demen label{font-size:14px;} #Eligibility {min-height: 309px;} #Eligibility .message{grid-auto-flow: row;grid-template-columns: 1fr;} #Eligibgeneriility .message .link2{display:block;width:fit-content;margin:8px 0;} #Eligibility .help {width: 100%;margin-top: 16px;} #Eligibility .connect {width: 100%;min-height:unset;} #Eligibility .connect .st {display: none} #Demen > .L input[type="radio"] + label:not(:last-of-type){margin-bottom:8px;} #Demen form ng-autocomplete{max-width:none;} #Demen form .autocomplete-container .input-container input{border-radius:8px;} #Demen form .test{border-radius: 8px; display: block; width: 100%;margin: 0 0 8px;} #DemenForm label .explanation{width:250px;right:-135px;top:-84px;bottom:unset;right: -0;} #DemenForm label .explanation:before {content:none} #DemenForm label .i-explanation{right: unset;bottom: 3px;top: unset;margin-left: 8px;} .iconodebit .speed, .iconodebit .slow{max-width:45vw;} /* Formulaire Eligibilité */ #FormEli .divform .formnames{gap:8px;flex-direction:column;} #FormEli .divform .w50{width:100%;} #FormEli .divform .formnames{gap:8px;} #network-internet-lame h2 { font-size: 24px; line-height: 28px; } #network-internet-lame { background-image: url(https://static.s-sfr.fr/media/Fixe/MEA/mobile_offre_box.jpg); height: 208px; } #network-internet-lame .mobile-hidden { display: none; } #network-internet-lame .wrapper { width: 100%; align-items: flex-start; padding: 16px; } #network-internet-lame .group1-lame-reseaux {gap: 16px; margin: auto; } #network-internet-lame p {font-size: 16px; line-height: 24px; } #ChoixRetrait form {width: 100%;} #ChoixRetrait .btn4 {margin: 0 auto 16px;} #ChoixRetrait .boutique {flex-flow: column;padding: 16px;} #ChoixRetrait .add-basket-btn {width: 100%;} #IConso a{text-align:center;} #SelectPhone .btns a{width:fit-content;font-size:14px;} /*MARKET*/ .bloc_SubTitle .wrapper {max-width:calc(100% - 32px)} .addons_bloc > .wrapper {padding: 0 16px;} .addons_bloc .list{grid-template-columns: 1fr;justify-content:center;align-items: center;max-width:100%} .addons_bloc .list > li, .addons_bloc .list > li:nth-child(3n) {max-width:400px;margin:0 auto;width: 100%} #fl_return{display:block;} /* 4P */ new-bol-configurateur-4p .carte-offres .carte-offre{width:290px;/*max-width:70vw;*/} bol-fixe-offer-list .scrollCont { width: 100%; } div:has(.carte-offre.sl) .carte-offre.sl .T:before {height: max(38%, 257px);} .addons_bloc .list > li > bol-addons-card{width:calc(100% - 32px);} }