html>body {overflow-x: unset;}
#Config {position: relative;}
#Config::before {content: "";background: #fff;position: absolute;width: 100vw;height:162px;top: -16px;z-index: -1;}
#Connexion {position: relative; background: url(https://static.s-sfr.fr/media/Fixe/MEA/bannieres/23493_bg3_desktop.webp) left top no-repeat; height: auto; width: 100%; margin: 40px auto 80px; max-width: 1536px;}
#Connexion:before {content: "";background: #fff;position: absolute;width: calc(100vw + 55%);height:calc(100% + 42px);top: -2px;left:-55%;z-index: -1;}
#Connexion .no-desktop {display: none;}
#Connexion:after {content: ''; width: calc(80% + 24px);max-width: 1228px; height: 100%; position: absolute; top: 0; right: 0; background: var(--clr-sfr2); z-index: 1;}
#Connexion .container {display: grid; justify-content: center; gap: 40px; position: relative; max-width: 1280px; width: calc(100% - 64px); grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 auto; align-items: center; height: 100%; z-index: 2;padding: 24px 0;}
#Connexion .container .bloc-text {display: flex; flex-direction: column; color: white; grid-column: span 10 / 13;min-height: 138px;justify-content: center;gap: 24px;}
#Connexion a[class^="btn"] {width: fit-content;left: unset;top: unset;}
#Connexion .bloc-text p {font: 14px/normal SFR-Bold;}
#Connexion .bloc-text p:first-child {font: 32px/normal SFR-Bold;}
h1 {margin: 40px auto;text-align: center;}
h1 + #Services {margin-top: 80px;}
#Services .content {position:relative;display: flex;gap: 24px;padding: 24px;width: 1280px;max-width: calc(100% - 64px);background: #fff;margin: 0 auto 136px;box-shadow: 0px 8px 16px rgb(24 24 24 / 2%);border-radius: 12px;}
#Services .content picture { min-width: 376px; height: 500px; background: linear-gradient(90deg, rgba(0,0,0,0.2) -100%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.20211834733893552) 200%); display: flex; align-items: center; justify-content: center;padding:16px; border-radius: 8px; }
#Services .content picture img{width:100%}
#Services .content .icons {position: relative;padding-bottom: 24px;}
#Services .content .icons .i {position: relative;display: grid;grid-template-areas:"b a" "b c";grid-template-columns: auto auto;justify-items: start;justify-content: start;align-items: center;gap: 0 24px;margin-top: 16px;max-width: calc(100% - 206px);}
#Services .content .icons img {grid-area: b;}
#Services .content .btn {position: absolute;width: fit-content;bottom: 24px;right: 24px;}
#Services .content .bloc-price .prices {display:flex;align-items:flex-end;}
#Services .content .bloc-price {position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: fit-content;margin: auto;text-align:right; margin-right:24px;}
#Services .content .bloc-price s{margin-right: 8px;font-size:12px;transform: translateY(-9px);}
#Services .content .bloc-price p.info {font:12px SFR-Bold;transform: translateY(-5px);text-align:left;}
#Services .content .bloc-price .generic-promo {position: absolute;top: -32px;right: 0;left: 0;width: fit-content;margin: 0;}
#Services .content .price {justify-content: flex-start;}
#Services .content img {border-radius: 8px;}
#Services .content .price .L {font: normal 40px/25px SFR-Bold;}
#Services .content .price .R {font: normal 14px/5px SFR-Bold;}
#Services .content .price .o {font-size: 24px;color: #8a8a8a;}
#Services.h {display: none;}
#bloc-config-phone .h4{margin-top: 40px;}
#bloc-config-phone .g{font: normal 14px/22px SFR-Regular;color: var(--clr-grey);}
.bloc_config .cards.loading {position: relative;height: 210px;border-radius:12px;overflow: hidden;}
.bloc_config .cards.loading > .loader {display: block;}
.bloc_config .cards > .loader {display: none;position: absolute;height: 100%;width: 100%;background: #fff;top: 0px;z-index: 6;}
.bloc_config .cards > .loader p {font-family: SFR-Bold;font-size: 16px;text-align: center;margin-top: 162px;}
.bloc_config .cards > .loader:after {content: "";position: absolute;top: 24px;bottom: unset;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;}
.bloc_config .cards > .loader:before {content: "";position: absolute;top: 56px;bottom: unset;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}
.checkbox {position: relative;display: block;}
.check-input:checked + .checkbox div:after {content: "";width: 20px;height: 20px;border-radius: 4px;position: absolute;top: 0;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);background-size: 14px 14px, 100%;}
.checkbox div {position: absolute;top: 0;bottom: 0;margin: auto;cursor: pointer;width: 20px;height: 20px;border-radius: 4px;background-color: var(--clr-disable);}
.checkbox.default div:after {content: "";width: 20px;height: 20px;border-radius: 4px;position: absolute;top: 0;right: 0;left: 0;margin: auto;background: url(//static.s-sfr.fr/assets/pictos/check_40_gris.svg) center/contain no-repeat, var(--clr-disable);background-size: 14px 14px, 100%;}
.checkbox p{font-family: SFR-Regular;font-size: 14px;line-height: 22px;color: var(--clr-black);cursor: pointer;padding-left: 28px;width: -webkit-fill-available;cursor: pointer;}
.connected-home .c [class^="link"]{display: table;margin-top: 16px;margin-bottom: 12px;position: relative;font: normal 14px/18px SFR-Bold;padding: 0 13px 0 0;cursor: pointer;}
.connected-home .c [class^="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);}
.connected-home .c [class^="link"]:hover:after {right: -3px;}
.popin-block .link2{display: table;margin-top: 16px;margin-bottom: 12px;position: relative;font: normal 14px/18px SFR-Bold;padding: 0 0 0 13px;cursor: pointer;}
.popin-block .link2:after {content: '';position: absolute;width: 8px;height: 8px;right: unset;left:1px;transform: rotate(-135deg);top: 0;bottom: 0;margin: auto;border-radius: 2px;border: 2px solid;border-left: 0;border-bottom: 0;transition: all .2s cubic-bezier(.4,0,.2,1);}
.popin-block.link2:hover:after {right: unset;left: -3px;}
.pack-alerte small{font-size:12px;}
.pack-alerte .title, .pack-alerte p:first-of-type {font: normal 18px/22px SFR-Bold;}
.pack-alerte .bold, .pack-alerte b {display: block;font-family: 'SFR-Bold';margin-top: 16px;padding-top: 16px;border-top: 1px solid var(--clr-grey);}
.pack-alerte .bold:first-of-type, .pack-alerte b:first-of-type { border: none; padding: 0;}
input[name="popin"]:checked ~ .overlay{display:block;}
.popin-block {display: none;position: fixed;width: 620px;min-height: calc(100% - 64px);max-height: calc(100% - 64px);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;}
.popin-block .scroll {display: flex;flex-flow:row wrap;gap: 16px 8px;height: fit-content;max-height: 100%;padding: 24px;overflow: auto;background: #fff;border-radius: 12px}
.popin-block h3 {max-width:calc(100% - 40px);width:100%;}
.popin-block .popin-btn-close {position: relative;right: 0;top: 0;}
.popin-block .bottom{display: flex;flex-flow: row-reverse;justify-content: space-between;align-items:center;width: 100%;}
.popin-block .time{display:block;}
.popin-block .time:before{position:relative;display:inline-block;content:'';width:32px;height:32px;background: url(//static.s-sfr.fr/assets/pictos/historique_40_noir.svg) center / cover;vertical-align: middle;margin-right: 8px;}
.popin-block .selectors p {font-family: 'SFR-Bold';margin-bottom: 4px;}
.popin-block .selectors .selector {margin-bottom: 16px;}
.popin-block .btn{height: fit-content;width: fit-content;}
.popin-block .accs {width:100%;}
.popin-block .accs .line {display: grid;grid-auto-flow: column;grid-template-columns: calc(100% - 64px) 64px;padding: 4px 0;align-items: center;/* border-bottom: 1px solid #d2d2d2; */}
.popin-block .accs .q {text-align: right;}
.popin-block .accs img {position: absolute;top: 0;bottom: 0;margin: auto;left: 0;width: 32px;}
.popin-block .accs .line:not(:first-of-type) {border-bottom: 1px solid #d2d2d2;}
.line > div {min-height: 32px;position: relative;}
.popin-block .accs span {margin-left: 40px;vertical-align: sub;}
.popin-block .accs .indispo {display: block;position: relative;color: #8A8A8A;font-size: 12px;line-height: 18px;margin-top:4px;margin-left: 54px;}
.popin-block .accs .indispo:before {position:absolute;content:'';width:10px;height:10px;border-radius:50%;left: -14px;top:0;bottom:0;margin:auto;background: var(--clr-sfr2);}
input[id*="PopinPack"]:checked + .popin-block{display: flex;align-items:center;}
#unPack:checked ~ .popin-block {display: none}
#unPack:checked ~ .overlay {display: none}
.progress-bar {width: 100%;max-width: calc(100% - 40px);height: 20px;margin:6px 0;background: #F2F2F2;border-radius: 260px;}
.progress-bar mark {height: 20px;max-width: calc(100% - 15px);background: var(--clr-sfr2);display: block;border-radius:260px;font:normal 12px/20px SFR-Bold;color:#fff;text-align:right;padding-right:14px;}
.popin-block .generic-choices,.popin-block .checks {align-self: center;}
.popin-block .generic-choices .radio-inputs label{width:100%}
.popin-block .form-content {display:flex;justify-content:space-between;align-items: flex-start;width: 100%;}
.popin-block .form-content.result {border: 2px solid #D90D25;border-radius: 12px;padding-left: 24px;}
.popin-block .pack-alerte {border:none;}
.popin-block img {border-radius: 12px;height: auto;object-fit: contain;width: -webkit-fill-available;max-width: 260px;margin:auto 0;}
.popin-block form{max-width:50%;}
.popin-block .checks > *{margin-bottom:16px;}
#telecommande:checked ~ .nb-acc {display:block;}
.popin-block .nb-acc {display:none;}
.popin-block .nb-acc p {font-size:12px;line-height:18px;margin-bottom:8px;}
#bloc-config-phone .popin-block .nb-acc .g{font-size:12px;line-height:18px;}
label.btn {display: block;position: relative;font-family: SFR-Bold;font-size: 14px;line-height: 16px;padding: 12px 24px;text-align: center;width: 100%;border-radius: 8px;cursor: pointer;text-decoration: none;transition: box-shadow .2s cubic-bezier(.4,0,.2,1);user-select: none;-webkit-user-select: none;}
label.btn:hover{box-shadow: 0 4px 8px rgba(150,0,0,0.32);}
.acc {display: grid;grid-template-columns: 32px auto 100px;gap: 16px;align-items: center;padding: 16px 0;border-top: 1px solid var(--clr-grey);}
.overlay + .acc{border:none}
.acc p {max-width:188px;}
.acc p .n {display: block;font-size: 14px;line-height: 22px;}
.acc p .p {display: block;font-size: 12px;line-height: 18px;}
.acc img {width: 32px;height: 32px;object-fit: contain;}
#Configurateur .quantifier button {position: relative;width: 24px;height: 24px;background:var(--clr-black);color: var(--clr-black);border-radius: 4px;line-height: 24px;padding: 0;cursor: pointer;}
#Configurateur .quantifier button:not(:disabled) + span {font-family: SFR-Bold;}
#Configurateur .quantifier .minus:before ,
#Configurateur .quantifier .plus:before {content: '';width: 16px;height: 1px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
#Configurateur .quantifier .plus:after {content: ''; height: 16px;width: 1px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
#Configurateur .quantifier button:disabled {color:transparent;background-color: #E4E4E7;cursor: default;}
#Configurateur .quantifier button:disabled:before,
#Configurateur .quantifier button:disabled:after {background: #A0A0AB;}
.dep + label {display: block;position: relative;}
.dep:checked + label .curt {width: 90%;background-color: transparent;height: 0;position: absolute;top: 0;}
.dep + label .acc {display:none;overflow: hidden;}
.dep:checked + label .acc {display: grid;Overflow: auto;}
.vm {display: table;margin: 0 auto;cursor: pointer;position: relative;font-family: 'SFR-Bold';}
.vm:after {content: '';width: 8px;height: 8px;border: 2px solid;transform: rotate(45deg);right: -17px;top: 4px;position: absolute;border-top: 0;border-left: 0;}
.vp {display: none;margin:0 auto;cursor: pointer;position: relative;font-family: 'SFR-Bold';}
.vp:after {content: '';width: 8px;height: 8px;border: 2px solid;transform: rotate(-135deg);right: -17px;top: 9px;position: absolute;border-top: 0;border-left: 0;}
.dep:checked + label .vp {display: table;}
.dep:checked + label .vm {display: none;}
#Questions {position:relative;width: 1280px;max-width: calc(100% - 64px);margin: 0 auto;}
#Questions label {position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;cursor: pointer;padding: 24px;border-radius: 12px;box-shadow: 0px 8px 16px rgb(24 24 24 / 2%);background-color: #fff;margin: 0 auto 16px;width: 100%;z-index: 3;}
#Questions strong {max-width: calc(100% - 16px);}
#Questions .response {font-family: 'SFR-Regular';font-size: 14px;line-height: 22px;margin:16px 0;}
#Questions .response{display:none;}
#Questions label:after {position:absolute;position: absolute;right: 24px;top: 28px;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;content: '';height: 8px;transform: rotate(135deg);width: 8px;transition: all 0.2s;}
#Questions [type="radio"] {display: none;}
#Questions [type="radio"]:checked + label:after {transform: rotate(-45deg);}
#Questions [type="radio"]:checked + label > .response,
#Questions [type="radio"]:checked + label > .moreInfo {display: block;flex: 0 100%;}
#Questions .uncard {height: 100%;position: absolute;width: 100%;top: 0;z-index: 2;cursor: pointer;box-shadow: none;background: transparent;}
#Questions .uncard:after {content:none;}
#Questions input[type="radio"]:checked + label ~ .uncard {z-index: 10;}
#Seo {font-family:'SFR-Regular'; color: #181818;background: #fff;font-size: 12px;line-height: 16px;position: relative;margin: 0 auto;padding: 24px 0;}
#Seo h2 {margin-top: 16px; display: block;}
#Seo a {text-decoration: none; color: #181818;cursor:pointer;font-family:'SFR-Bold';}
#Seo strong {font-family:'SFR-Bold'; color: #181818; font-size: 16px; margin-top: 16px; margin-bottom: 16px; display: block;}
#Seo b {font-weight: bold;}
#Seo input[type="checkbox"] {display: none;}
#Seo input[type="checkbox"] + label {display:block; position:relative;width: 1280px;max-width:calc(100% - 64px);margin: 0 auto;}
#Seo input[type="checkbox"] + label .content {height: 160px; overflow: hidden; color: #181818;}
#Seo input[type="checkbox"]:checked + label .content {height: auto; overflow: auto;}
#Seo .vm {display: table; margin: 20px auto 0 auto; cursor: pointer; position: relative; font-family: 'SFR-Bold';}
#Seo .vm:after {content: '';width: 8px;height: 8px;border: 2px solid;transform: rotate(45deg);right: -17px;top: 0;position: absolute;border-top: 0;border-left: 0;}
#Seo .vp {display: none; margin: 20px auto 0 auto; cursor: pointer; position: relative; font-family: 'SFR-Bold';}
#Seo .vp:after {content: '';width: 8px;height: 8px;border: 2px solid; transform: rotate(-135deg);right: -17px;top: 5px;position: absolute;border-top: 0;border-left: 0;}
#Seo input[type="checkbox"]:checked + label .vp {display: table;}
#Seo input[type="checkbox"]:checked + label .vm {display: none;}
#Mentions {background: #fff;padding: 24px 0;border-top: 1px solid #D2D2D2;}
#Mentions .content {display: none;}
#Mentions-i:checked + label .content {display: block;}
#Mentions .t {font-family: 'SFR-Bold'; font-size: 12px; margin: 0 auto; display: table; position: relative; cursor: pointer;}
#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;}
#Mentions .t.s:after {transform: rotate(-135deg);top: 5px;}
#Mentions strong {font-family:'SFR-Bold'; color: #222; font-size: 16px; margin-top: 15px; margin-bottom: 15px; display: block;}
#Mentions b { font-family: 'SFR-Bold';}
#Mentions a {text-decoration:none; color: var(--clr-grey);}
#Mentions .content {width: 1280px;max-width: calc(100% - 64px);margin: 24px auto;}
input[name="zoomin"]:checked + .overlay > .zoom-img > img {width: 830px;max-width: 100%;}
#Configurateur {display: grid;justify-content: space-between;grid-template-columns:2fr 400px;margin:40px auto 80px;gap: 0 40px;width: 1280px;;max-width: calc(100% - 64px)}
#Configurateur .subtitle {color:#6E6E73;margin: -16px 0 16px;}
#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 .tabswitch {width:100%;max-width:496px;margin:0}
#Configurateur .tabswitch .tab {width:100%;text-align:center;}
#Configurateur .tabswitch [role="tabpanel"] {width:100%;}
#Configurateur bol-phone-photos {position: relative;display: flex;flex-direction: column;width: 100%;max-width: 496px;flex-grow: 1;min-height: 0;overflow-y: auto;}
#Configurateur .slider {position: relative;display: flex;width: 100%;max-width: 496px;flex-grow: 1;min-height: 0;overflow-y: auto;}
#Configurateur .slide {white-space: nowrap;display: flex;overflow: scroll;scroll-snap-type: x mandatory;scrollbar-width: none;width: unset;margin: 0 auto;position: relative;width: 100%;max-width: 496px;max-height: 100%;flex: 1 1 auto;min-height: 0;overflow: auto;}
#Configurateur .slide >img {scroll-snap-align:center;width:unset;flex-shrink:unset;max-width:unset;}
#Configurateur .slide >img[alt="null"] { display: none; }
#Configurateur .PV {position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:24px;background:var(--clr-bg);height:fit-content;padding:24px;border-radius:8px;max-height:calc(100vh - 48px);}
#Configurateur bol-visuel-binkies {display: flex;flex-direction: column;align-items: center;gap: 24px;}
#Configurateur .PV.f {flex-direction: row;align-items: flex-start;gap:16px;min-height:unset;}
#Configurateur .pill {margin:0;}
#Configurateur .iconotexts{width:100%;max-width:496px;}
#Configurateur .iconotexts + p {margin:0;}
#Configurateur .toggle:focus-visible + label .t:before{outline: 2px solid var(--clr-black);outline-offset: 2px;}
#Configurateur .PV.f .offre {position:relative;display:grid;gap:24px;width:calc(50% - 16px);}
#Configurateur .PV.f .title{font: normal 24px / 48px SFR-Bold;}
#Configurateur .PV.f h3{font-size:24px;line-height:24px;margin:0;}
#Configurateur .PV.f .price{line-height:24px;}
#Configurateur .PV.f .pc{padding:24px;background:#fff;border-radius:8px;}
#Configurateur .PV.f .img-r {position:absolute;top:0;right:0;}
#Configurateur .PV.f .list {width:calc(50% + 16px);list-style: none;padding: 0 0 0 16px;border-left:1px solid var(--clr-grey);text-decoration:none;height: -webkit-fill-available;}
#Configurateur .PV.f li {padding-left: 32px;position: relative;margin-bottom:16px;}
#Configurateur .PV.f 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;}
.slide-next {content: '';background: #131316 url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_blanc.svg);background-size: 100% 16px;background-repeat: no-repeat;background-position: center;border-radius: 4px;position: absolute;top: 0;bottom: 0;margin: auto;right: 0;width: 24px;height: 24px;color: #fff;cursor: pointer;}
.slide-prev {content: '';background: #131316 url(https://static.s-sfr.fr/assets/pictos/chevron_gauche_40_blanc.svg);background-size: 100% 16px;background-repeat: no-repeat;background-position: center;border-radius: 4px;position: absolute;top: 0;bottom: 0;margin: auto;left: 0;width: 24px;height: 24px;color: #fff;cursor: pointer;}
#Configurateur .carousel-preview {display: flex;align-items:center;flex-flow: row wrap;max-width:344px;margin:0;gap:24px;align-items: center;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; }*/
#Configurateur bol-phone-photos + p { margin: 8px auto; display: block; text-align: center;font-family: 'SFR-Regular'; }
.iconotexts {display: flex;justify-content: space-between}
.iconotexts div {flex: 1;text-align: center;}
.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: 14px;line-height: 20px;text-align: center;}
.iconotexts .o {text-decoration:line-through;}
.iconotexts a {text-decoration: underline;font-size: 14px;line-height: 20px;}
#Configurateur .iconotexts + p {margin: 24px auto 0;display: block;text-align: center;font-family: 'SFR-Regular';}
#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 .Facturette {background: var(--clr-bg);}
#Configurateur .cls {display: flex;gap: 24px;margin-bottom:24px;}
#Configurateur .cl {position: relative;display:block;border: 1px solid var(--clr-grey);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 .cl:is(:hover, :focus, :focus-visible):before {content: attr(title);text-transform:lowercase;position: absolute;left: 0;top: -16px;transform: translateY(-50%);background-color: var(--clr-black);color: #fff;font-size: 12px;padding: 2px 8px;text-align: left;border-radius: 2px;z-index: 1;-webkit-text-fill-color: #fff;width: fit-content;border: 1px solid #fff;}
#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;}
#Configurateur .M .bloc-w>strong{display:inline-block;margin-bottom:16px;}
#Configurateur .param-full:not(:last-of-type) {margin-bottom: 8px;}
#Configurateur .M .alert {font: normal 14px / 22px SFR-Regular;margin: 16px 0;}
#Configurateur .form_line label {font: normal 14px/22px SFR-Regular;display: block;margin-bottom: 4px;}
#Configurateur .form_line {margin: 16px 0;}
#Configurateur .form_line input {width: 100%;margin-bottom: 8px;}
#Configurateur .checkbox[for="news"] {display: block;margin: 24px 0;}
#Configurateur [for="news"] span {display: inline-block;max-width: calc(100% - 30px);vertical-align: top;}
#Configurateur .block {margin-bottom: 80px;}
#Configurateur .subblock {margin-bottom: 24px;}
#Configurateur .message {margin: 24px 0;overflow: unset;}
#Configurateur .charg{gap: 4px;display: flex;}
#Configurateur .charg .ifcharg .cont{position: absolute;bottom: 0;width: 100%;padding: 0 4px;height:48px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#Configurateur .charg .ifcharg p{line-height: normal;font-size: 8px;text-align:center;}
#Configurateur .charg > div{height: 80px;width: 80px;position: relative;background-position: center center;background-size: contain;background-repeat: no-repeat;}
#Configurateur .charg > div:first-child{background-image: url(https://static.s-sfr.fr/assets/pictos/chargeur_barre_63x72_noir.svg);}
#Configurateur .charg > div:last-child{background-image: url(https://static.s-sfr.fr/assets/pictos/chargeur_63x72_noir.svg);}
#Configurateur .charg .ttp{right:-21px;top:0;}
#Configurateur .soustitre + .desc{display: block;margin-top: -16px;}
#Configurateur .desc.g{font:normal 16px/20px SFR-Bold;color:var(--clr-grey);margin-bottom: 24px;}
#Configurateur .block.g,
#Configurateur .subblock.g {padding:24px;background:var(--clr-bg);border-radius:8px}
#Configurateur .soustitre {font:normal 24px/36px SFR-Bold;text-align: left;margin-bottom:24px;}
#Configurateur .info .item { list-style:none; display: flex; align-items: center; margin: 0 0 16px; }
#Configurateur .info [role="list"] { margin: 0 0 8px; }
#Configurateur .info .item > span{display:flex;flex-direction:column;gap:4px}
#Configurateur .info .item .o{text-decoration-line: line-through;}
#Configurateur .info .link {display:inline-block;margin: 8px 0 0 0;}
#Configurateur .info .item img { height: 24px; margin: 0 8px 0 0;border-radius:4px;}
#Configurateur .availability {display: block;margin: 24px 0 24px 14px;}
#Configurateur .SW .subblock strong {margin-bottom: 16px;}
#Configurateur .subblock .link{display:table;margin-top: 16px;}
#Configurateur .acc {display: grid;grid-template-columns: 50px auto 100px;gap: 16px;align-items: center;padding: 16px 0;border-top: 1px solid var(--clr-grey);}
#Configurateur .acc:first-of-type{border:none}
#Configurateur .acc p {max-width:188px;}
#Configurateur .acc p .n {display: block;font-size: 14px;line-height: 22px;}
#Configurateur .acc p .p {display: block;font-size: 12px;line-height: 18px;}
#Configurateur .acc img {width: 50px;height: 50px;object-fit: contain;border-radius:4px;}
#Configurateur #Accessoires summary{position:relative;font-family:'SFR-Bold';text-align:center;list-style-type:none;cursor:pointer;}
#Configurateur #Accessoires summary::-webkit-details-marker{display:none}
#Configurateur #Accessoires summary:after {content: '';position: relative;display: inline-block;vertical-align: middle;width: 16px;height: 16px;background: center / contain no-repeat url(https://static.s-sfr.fr/assets/pictos/chevron_bas_40_noir.svg);margin-left: 4px;transition: all 0.2s ease-out;}
#Configurateur #Accessoires details[open] summary:after{transform:rotate(180deg)}
#Configurateur .quantifier {display: inline-grid;gap: 16px;align-items: center;grid-template-columns: 24px auto 24px;text-align: center;}
#Configurateur .quantifier button {position: relative;width: 24px;height: 24px;background: #181818;color: #181818;border-radius: 4px;line-height: 24px;padding: 0;cursor: pointer;}
#Configurateur .quantifier button:not(:disabled) + span {font-family: SFR-Bold;}
#Configurateur .quantifier .minus:before ,
#Configurateur .quantifier .plus:before {content: '';width: 16px;height: 1px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
#Configurateur .quantifier .plus:after {content: ''; height: 16px;width: 1px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
#Configurateur .quantifier button:disabled {background: #D2D2D2;color: #D2D2D2;cursor: default;}
#Configurateur .quantifier button:disabled:before,.quantifier button:disabled:after {background:#8A8A8A;}
.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;line-height: 22px;text-align: left;}
@media (max-width:1100px){
h1 {max-width: 486px;}
#Config::before {height:188px;}
#Connexion {background: none;margin: 24px auto; display: flex;flex-direction: column;max-width: 486px;}
#Connexion .no-desktop {display: flex;}
#Connexion .no-desktop img {width: 100%; object-fit: cover;}
#Connexion:after {display: none;}
#Connexion .container {margin: auto 0;padding: 16px;width: 100%;display: block;background: var(--clr-sfr2);}
#Connexion .bloc-text p:first-child {font: 24px/normal SFR-Bold;}
#Connexion .container .bloc-text {min-height: auto;max-width: 456px;width: 100%;margin: 0 auto;}
#Connexion a[class^="btn"] {width: 100%;}
#Services {display: block;padding: 0 0 40px 0;max-width: 486px;margin: 64px auto 0;}
#Services .content {flex-flow: column;gap: 16px;margin-bottom:80px;}
#Services .content picture { min-width: initial; height: 350px; }
#Services .content picture img { width: auto; height: 100%; }
#Services .content .icons{padding-bottom:16px;}
#Services .content .btn {width: 100%;position: relative;bottom: unset;right: unset;}
#Services .content .icons .i {max-width:unset;}
#Services .content img {width:100%;}
#Services .content picture {height: 150px}
#Services .content .bloc-price {position: relative;margin:40px 0 16px;top:calc(50% - 91px);right:unset;text-align:left;width:fit-content;display:grid;order:-1;}
#Services .content .bloc-price{margin-right:0;}
#services_mobile_module_sfr_box_8x,.bloc_SubTitle .wrapper{margin-top:24px}
.bloc_SubTitle .wrapper h2 {display: block;margin-bottom:16px;}
.bloc_SubTitle .wrapper h2 + .principal-desc{margin:-8px 0 8px;}
.md-label {margin-right:14px}
.accessory input:checked + label .md-content {right: -30px;width:328px;max-width: calc(50vw - 46px);padding: 16px 16px 8px;}
.accessory input:checked + label .md-content:before {right:15px;}
.mobile_card .md-content:before {right:16px;}
.bloc_config .c {gap:16px}
.bloc_config .cards .c .bloc-w, .bloc-fixe .cards .c {padding:16px}
.bloc_config .cards {grid-template-columns: 328px 328px;justify-content: center;gap: 24px;}
.bloc_config .part-R {grid-template-columns: 1fr;gap:16px 0}
.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-option {height: auto}
.generic-option .explanation {width: 328px;right: -21px;;max-width: calc(100vw - 16px);}
.generic-option .explanation:after {right: 14px;}
.generic-promo {font-size: 8px;line-height: 20px}
.generic-sum {position: relative;top:0max-width:100%}
.generic-sum .g .more-info {width: calc(50vw - 32px);max-width: 344px;}
.generic-sum .m.sep {padding: 16px 16px 8px;}
.generic-sum .p {font-size: 20px;line-height: 24px}
.generic-sum .b {font-size: 14px;line-height: 24px}
.generic_photo .nav li {right: 24px}
.generic_photo .nav li.prev{left:24px}
.generic-option .p{font-family: SFR-Bold;font-size: 14px;line-height: 22px}
.col-2 .generic-option{flex-direction: column;gap:4px}
.col-2 .generic-option div:not([class*="explanation"]) {width: calc(100% - 32px)}
.offre-speciale .content {flex-flow:column;gap:16px;align-items:center;}
#Configurateur .info [role="list"] {margin: 0;}
#Configurateur .block.g,#Configurateur .subblock.g {padding:16px;}
#Configurateur .PV {position:relative;top: unset;gap:16px;padding:16px;max-height: unset;min-height: unset;height: auto;width: 100%;min-width: unset;max-width: calc(100vw - 32px);}
#Configurateur .carousel-preview {max-width:296px;gap:16px}
#Configurateur .iconotexts, #Configurateur .tabswitch,#Configurateur .iconotexts {max-width:100%}
#Configurateur .slider {max-width:454px}
#Configurateur .slide {max-width: calc(100% - 96px);}
#Configurateur .PV.f {flex-direction: column;gap: 16px;padding:16px;}
#Configurateur .PV.f .offre{gap: 16px;width:100%;}
#Configurateur .PV.f .list{border-left: 0;padding: 16px 0 0 0 ;border-top:1px solid var(--clr-grey);width:100%;}
#Configurateur .charg .ttp [popover]:popover-open + [role="tooltip"] {max-width: 200px;}
#Configurateur .checkbox[for="news"] {margin: 16px 0;}
#Configurateur .soustitre {font: normal 18px / 22px SFR-Bold;text-align: left;margin-bottom: 16px;}
#Configurateur .soustitre + .desc{margin-top: -8px;}
}
@media (max-width:768px){
#Seo input[type="checkbox"] + label,#Mentions .content, #Services .content {max-width: calc(100% - 32px)}
.fil_ariane {max-width:calc(100% - 32px);}
.addons-card input:checked + label .md-content {width: 400px;max-width: calc(100vw - 32px);right: -30px;}
.addons-card input:checked + label .md-content:before {right: 15px;bottom: -3px}
.bloc_SubTitle .wrapper {max-width:calc(100% - 32px)}
.i-explanation{right:5px;top:5px}
.bloc_config .cards .bl_photo , .bloc-fixe .cards .c.generic_photo {position: relative;top: unset;padding:16px;height: auto;width: 100%;max-width: 500px;margin:auto;}
.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%}
.generic-option{font-size:10px;line-height:14px}
.generic-option.no-decode > p {font-size:12px;line-height:18px}
.generic-choices .radio-inputs{gap: 8px;}
.generic-sum, .bloc_config .cards .c,.bloc-fixe .cards .c {width: 100%;max-width:500px;margin:auto;}
.part-R .c, .bloc-fixe .cards .part-R .generic-sum {width: 100%;}
.bloc_config .generic-sum h3:after , .bloc-fixe .generic-sum h3:after {height: 16px;}
.bloc_config .cards, .bloc-fixe .cards{max-width:100%;grid-template-columns: 1fr;margin:0 auto;padding:0;}
.bloc_config .part-R, .bloc-fixe .part-R { width:100%}
.generic-sum, .bloc_config .cards .c,.bloc-fixe .cards .c {width: 100%;max-width:500px;margin:auto;}
.generic-sum .g .more-info {width: calc(100vw - 32px);max-width: 500px;}
.part-R .c, .bloc-fixe .cards .part-R .generic-sum {width: 100%;}
input[name="zoomin"]:checked + .overlay > .zoom-img ul li {max-width: 49px;height: 58px;}
.bloc_config .generic-sum h3 , .bloc-fixe .generic-sum h3 {margin-top:16px;}
.bloc_config .generic-sum h3:after , .bloc-fixe .generic-sum h3:after {height: 16px;}
.bloc_config .cards .bl_photo , .bloc-fixe .cards .c.generic_photo {position: relative;top: unset;padding:16px;height: auto;width: 100%;max-width: 500px;margin:auto;}
.generic-param .explanation {width:100%}
.generic-option .explanation {width: 400px;right: -21px;max-width: calc(100vw - 32px);}
.generic-option .explanation:after {right: 15px;}
.reassurances_bloc{padding:16px 0;margin-top:24px;}
.reassurances_bloc .list{display:block;}
.reassurances_bloc .list>li{margin-bottom:16px;max-width:inherit;}
.reassurances_bloc .list>li:last-child{margin-bottom:0;}
.bloc_reassurance{align-items:center;display:flex;text-align:left;}
.bloc_reassurance .img{height:auto;margin-bottom:0;margin-right:20px;width:32px;}
.bloc_reassurance .img img{max-height:32px;}
.offre-speciale {max-width: calc(100% - 32px);}
input[name="zoomin"]:checked + .overlay label {top: 72px;}
input[name="zoomin"]:checked + .overlay > .zoom-img{position:absolute;top:100px;width:auto;max-width:calc(100% - 36px);top:50%;left:50%;transform:translate(-50%, -50%)}
input[name="zoomin"]:checked + .overlay > .zoom-img img{max-width:100%}
#fl_return{display:block;}
.fil_ariane .v_desk{display:none;}
.reassurances_bloc h2{max-width: calc(100% - 32px);}
}