@font-face { font-family: 'bfmB'; src: url("//static.s-sfr.fr/media/bfm/PilatBlack.woff") format('woff'); }
@font-face { font-family: 'bfmH'; src: url("https://static.s-sfr.fr/media/bfm/PilatHeavy.woff") format('woff'); }
/* Variable */
@font-face { font-family: 'MV'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-VariableFont_wght.woff2") format('woff2'); }
/* Regular */
@font-face { font-family: 'MR'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-Regular_0.woff2") format('woff2'); }
/* Gras */
@font-face { font-family: 'MB'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-Bold.woff2") format('woff2'); }
@font-face {font-family: 'AR';src: url("//static.s-sfr.fr/media/altice-regular-webfont.woff") format('woff');}
@font-face {font-family: 'AB';src: url("//static.s-sfr.fr/media/altice-bold-webfont.woff") format('woff');}
@font-face {font-family: 'AI';src: url("//static.s-sfr.fr/media/altice-italic-webfont.woff") format('woff');}
a,article,audio,b,body,del,details,div,em,fieldset,figcaption,figure,footer,form,header,html,i,iframe,img,input,label,legend,li,menu,nav,ol,p,pre,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;font-size:100%;background:transparent;box-sizing:border-box;font-style:normal}
body { background:#eeeff0; font-family: 'MR';}
a.btn { font-size: 14px; font-family: 'MB'; text-align: center; padding: 14px 24px 16px 24px; background: #0a0014; display: block; text-decoration: none; color: #fff;  border:2px solid #fff; transition: .2s all ease-out; }
a.btn:hover { color: #0a0014; background: #fff; border:2px solid #0a0014; }
a.btn2 { font-size: 14px; font-family: 'MB'; text-align: center; padding: 14px 24px 16px 24px; background: #fff; display: block; text-decoration: none; color: #0a0014;  border:2px solid #0a0014; transition: .2s all ease-out; }
a.btn2:hover { color: #fff; background: #0a0014; border:2px solid #fff; }
input.btn { font-size: 14px; font-family: 'MB'; text-align: center; padding: 14px 24px 16px 24px; background: #0a0014; display: block; text-decoration: none; color: #fff;  border:2px solid #fff; transition: .2s all ease-out; cursor: pointer;}
input.btn:hover { color: #0a0014; background: #fff; border:2px solid #0a0014;  }
#HC { background-color: #0a0014; position:relative; padding: 16px 8px; margin: 0 0 40px 0;}
#HC>div { max-width: calc(1280px - 64px); margin: 0 auto; display:flex;align-items:center;gap:32px;}
#HC>div a{color:#fff;text-decoration:none;font-size:14px;font-family:'MB';z-index:99;}
#HC details { display: none; }
#Config { max-width: calc(1280px - 64px); margin: 40px auto; display: flex; gap: 40px;}
#Config>.L { background:#fff; width: 100%; padding: 24px; border-radius:12px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: space-around; gap: 16px; }
[id^="Config"]>.R { background:#0a0014; width: 265px; border-radius:12px; padding: 32px 16px; color: #fff; position: relative; min-height: 640px; max-height: 670px;}
[id^="Config"]>.R > strong { font-family: 'MB'; font-size: 26px; display: block; margin: 0 0 16px 0; text-align: center; }
[id^="Config"]>.R > div { margin: 0 0 8px 0; } 
[id^="Config"]>.R > div strong { display: block; font-family: 'MB';} 
[id^="Config"]>.R > div span { display: block; margin: 0 0 16px 0; font-size:14px;} 
[id^="Config"]>.R > p { display: block; background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); padding: 8px; position: absolute; left: 0; right: 0; bottom: 16px; margin: auto; width: calc(100% - 16px); bottom: 8px; border-radius: 0 0 8px 8px; } 
[id^="Config"]>.R > p strong { display: block; font-size: 18px; font-family: 'MB'; text-align: center; margin: 0 0 16px 0;} 
[id^="Config"]>.R > p a { font-size: 14px; font-family: 'MB'; text-align: center; padding: 6px 16px 8px 16px; background: #0a0014; display: block; text-decoration: none; color: #fff; transition: .2s all ease-out;} 
[id^="Config"]>.R > p a:hover { background: #fff; color: #0a0014;} 
[id^="Config"] h1 { font-family: 'MB'; font-size: 34px; margin: 0 0 24px 0;}
[id^="Config"] h2 { font-family: 'MB'; font-size: 24px; margin: 0 0 24px 0;}
[id^="Config"] h1+p{ font-size: 16px; display: block; width:100%; margin: 0 0 24px 0;}

[id^="Config"] .C { display: flex; gap: 20px; }
[id^="Config"] .C .enc { padding: 16px 24px; background-color: #EEEFF0; border-radius: 12px; position: relative; }
[id^="Config"] .C .enc a { color: #0a0014; font-family: 'MB'; text-decoration: none; }
[id^="Config"] .C .enc a:after { content:''; position: absolute; top:0; left:0; right: 0; width: 100%; margin: auto;  height: 100%; }
[id^="Config"] .C .enc .container > a{display:block;}

.Step1 .C .enc { width: 50%; }
.Step1 .C .enc img { height: 165px; display: block; margin: 0 auto; }

.Step2 .C { flex-wrap: wrap; }
.Step2 .C .enc { width: calc(33% - 11px); }
.Step2 .C .enc>div img { width: 22px; height: 22px; display: inline-block; margin: 8px auto;}

.Step4 .C { flex-wrap: wrap; }
.Step4 .C .enc { width: calc(33% - 11px); height: 200px; }
.Step4 .C .enc strong { font-family: 'MB'; }
.Step4 .C .enc input[type="number"] { padding: 8px; border:2px solid #0a0014; background: #fff;max-width:100%;}
.Step4 .C .enc input[type="submit"] { margin: 8px auto 0 auto;}
.Step4 .C .enc>div { margin: 8px 0 0 0;}
.Step4 .C .enc>div>p { margin: 0 0 16px 0;}
.Step4 .C .enc>div>p>i { display: block; font-family: 'MR'; font-size:12px; }
.Step4 .C .enc>div strong { display: block; font-size: 74px; margin: 40px 0 0 0; background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; }

.Step5 .C { flex-wrap: wrap; }
.Step5 .C .enc { width: calc(33% - 11px);  }
.Step5 .C .enc a { display: block; }
.Step5 .C .enc a + div{ display: block; margin: 8px 0; }
.Step5 .C .enc a + div>img{max-height: 96px;display: inline-block;vertical-align: middle;max-width: 100%;}

#Config .L.Step6 { display: block; }
.Step6 .C { flex-wrap: wrap; width: 100%; justify-content: center; }
.Step6 .C .enc { width: 172px; }
.Step6 .C.s2 .enc { width: 172px; height:158px; position: relative; }
.Step6 .C.s2 .enc > .container{width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
.Step6 .C.s2 .enc a + div {width:fit-content;height:fit-content;}
.Step6 .C.s2 .enc a + div img{width:auto;height:48px;}
.Step6 .s1 { margin: 0 0 40px 0; }

.Step7 form { width: 370px; }
.Step7 form label { font-family: 'MB'; color: #0a0014; margin: 0 0 8px 0; display: block ; font-size: 14px; }
.Step7 form label.error { color: #e2001a; }
.Step7 form label.error + input { border:2px solid #e2001a; }
.Step7 form label.error + select { border:2px solid #e2001a; }
.Step7 form label.error + input ~ span { color:#e2001a; font-size: 12px; margin: -20px 0 20px 0; display: block; padding: 0; }
.Step7 form input[type="text"] { display: block; font-family: 'MR'; color: #0a0014; padding: 8px 12px; border: 0; background: #eeeff0; border-radius: 6px; width: 100%; /*max-width: 368px;*/ margin: 0 0 24px 0; box-sizing: border-box; }
.Step7 form input[type="text"]::placeholder { display: block; color: #999; }
.Step7 form a.forget-password { font-family: 'MB'; color: #0a0014; font-size: 14px; display: block; margin: -7px 0 20px; }
.Step7 form input[type="password"] { display: block; font-family: 'MR'; color: #0a0014; padding: 8px 12px; border: 0; background: #eeeff0; border-radius: 6px; width: 100%; /*max-width: 368px;*/ margin: 0 0 24px 0; box-sizing: border-box; }
.Step7 form input[type="submit"] { margin: 0 auto; }
.Step7 form input[type="submit"]:disabled { pointer-events:none; pointer: default; opacity:0.3; }
.Step7 select { padding: 8px 12px; width: 100%; background: #EEEFF0; border-radius: 6px; border: 0; font-family: 'MR'; cursor: pointer;/*max-width: 400px;*/ }
.Step7 label ~ select { margin: 0 0 16px 0; }

#Config .L.Step9 { display: block; }
.Step9 .pack { position: relative; text-align: left; background-color: #fff; border-radius: 12px;border: 4px solid #0a0014; margin: 0 0 16px 0; } 
.Step9 .pack.s { padding: 4px; border:0; background-image: linear-gradient(#fff, #fff), var(--bg-amac); background-origin: border-box; background-clip: content-box, border-box; } 
.Step9 .pack.s>strong { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border-radius: 0px 0px 8px 8px; color: #fff; text-transform: uppercase; font-size: 14px; line-height: 19px; padding: 8px 12px; margin: 0 auto; display: table; position: absolute; left: 0; right: 0;} 
.Step9 .pack .ex { padding: 40px; display:inline-block; vertical-align: top; width: calc(100% - 267px);  }
.Step9 .pack .ex>p { display: block; margin: 0 0 8px 0; }
.Step9 .pack .ex>div>img{ height:50px; margin: 0 8px 0 0; }
.Step9 .pack .ex>strong{ font-size: 32px; font-family: 'MB'; background: var(--Gradient-Vido, var(--bg-amac)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin:0 8px 0 0;}
.Step9 .pack .ct{ border-radius: 0 8px 8px 0; background:#0a0014; width: 267px; display:inline-block; vertical-align: top; height: 100%; padding: 91px 16px;}
.Step9 .pack .ct span { font-family: 'MB'; font-size: 20px; color: #fff; display: block; margin: 0 0 16px 0; text-align: center;}
.Step9 .pack .ct strong { font-family: 'MB'; font-size: 28px; }


#Config .Step9-1 .C { justify-content: center; flex-flow: column; }
.Step9-1 input[type="checkbox"] { display: none; }
.Step9-1 .ch-cards label.labels16 > div .T p{max-width:70%;margin-top:8px;}
.Step9-1 .ch-cards label.labels16 {width:calc(100% - 48px);height:calc(100% - 48px); padding: 24px;box-sizing: content-box;position:relative;display:block;cursor:pointer;}
.Step9-1 .ch-cards label.labels16:before{display:none;}
.Step9-1 .ch-cards label.labels16:after{content:"";display:none;}
.Step9-1 .ch-cards .linear-border{width:calc(50% - 8px);border-radius:8px; padding:1px; background-color: #EEEFF0;box-sizing: border-box; background-origin: border-box;background-clip: content-box, border-box;}
.Step9-1 .ch-cards > input[type="checkbox"]:checked + .linear-border{background-image: linear-gradient(#EEEFF0, #EEEFF0), var(--bg-amac);}
.Step9-1 .ch-cards > input[type="checkbox"]:checked + .linear-border label.labels16{box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25); }
.Step9-1 .ch-cards > input[type="checkbox"]:checked + .linear-border label.labels16:before{content:'';width:24px;height:24px;position:absolute;display:block;left: calc(50% - 12px); top: -12px; background:url('https://static.s-sfr.fr/assets/pictos/check_cercle_40_noir.svg');border:0;background-size:24px;}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) .B p:before{content:'';width:16px;height:16px;display:inline-block;margin-right:8px;position:relative;top:1px;}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) .B p:nth-of-type(1):before{background:url(https://static.s-sfr.fr/assets/pictos/account.svg);}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) .B p:nth-of-type(2):before{background:url(https://static.s-sfr.fr/assets/pictos/picto_TV_16x16.svg);}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) .B p:nth-of-type(3):before{background:url(https://static.s-sfr.fr/assets/pictos/picto_actualite_16x16.svg);}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) p > span {font-family:'MB';background: var(--bg-amac);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;font-size:18px;}
.Step9-1 .ch-cards label.labels16 .border{position:absolute;width:100%;height:100%;background-image: var(--bg-amac);z-index:0;}
.Step9-1 .ch-cards > strong{width:100%;margin-top:calc(32px - 16px);}
.Step9-1 .ch-cards > p{width:100%;margin-top:calc(8px - 16px);font-size:14px;font-family:'MR';display: flex; align-items: center;}
.Step9-1 .ch-cards > p img{width:24px;margin-right:8px;}
.Step9-1 .ch-cards{width:100%;display:flex;gap:16px;flex-wrap:wrap;padding-top:32px;}
.Step9-1 .ch-cards .linear-border label > div:nth-child(1) h2 {font-size:24px;font-family:'MB';margin-top:0;display:inline;}
.Step9-1 .ch-cards .linear-border label.labels16 > div:nth-child(1) p{font-family:'MR';font-size:14px;margin :0 0 16px 0;}
.Step9-1 .ch-cards label > div:nth-child(1) img{position:absolute;right:24px;top:24px;height:40px;width:auto;}
.Step9-1 .ch-cards hr{width:100%;margin:16px 0;}
.Step9-1 strong { font-family: 'MB'; display: block; text-align: left; }
.enc > .container{width:100%;}
#Config .Step9-2 .C { display: block; }
.Step9-2 .reco { position: relative; display: inline-block; vertical-align: top; text-align: left; width: 100%; margin: 0 auto 40px auto; background-color: #fff; border-radius: 12px; padding: 4px; box-sizing: border-box; background-image: linear-gradient(white, white), var(--bg-amac); background-origin: border-box; background-clip: content-box, border-box; }
.Step9-2 .reco.b { background: none; border: 4px solid #0a0014; padding:4px 0 0 0;}
.Step9-2 .reco .stick { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border-radius: 0px 0px 8px 8px;  color: #fff; text-transform: uppercase; font-size: 14px; line-height: 19px; padding: 8px 12px; margin: 0 auto; display: table; margin-bottom: 25px; }
.Step9-2 .reco.b .stick { background: #0a0014; color: #fff; margin: -5px auto 0 auto; }
.Step9-2 .reco p { font-family: 'MR';font-size: 14px; line-height: 19px; text-align: center; padding: 0 40px; max-width: 495px; margin: 0 auto 20px auto; }
.Step9-2 .reco.b p { display: block; margin: 24px auto;}
.Step9-2 .reco .swi { text-align: center; margin: 0 0 40px 0;}
.Step9-2 .reco .swi .BB{display: flex; justify-content: center; padding: 16px 0 0 45%;}
.Step9-2 .reco .swi .BB input{margin:0 8px 0 0;}
.Step9-2 .reco .off { position: relative; display: inline-block; vertical-align: middle; border: 1px solid #0a0014; border-radius: 16px; padding: 24px; width: 288px; min-height: 420px; box-sizing: border-box; max-width:100%;}
.Step9-2 .reco .off.i { opacity: 0.3; pointer-events: none; cursor: default;}
.Step9-2 .reco .off .T { padding: 0 0 24px 0; }
.Step9-2 .reco .off .T strong { display: block; font-size: 20px; line-height: 27px; text-align: center; color: #0a0014; margin: 0 0 8px 0; }
.Step9-2 .reco .off .T strong + span { display: block; font-size: 24px; line-height: 32px; font-family: 'MB';}
.Step9-2 .reco .off .T strong + span > * { display: inline-block; vertical-align: bottom:; }
.Step9-2 .reco .off .T strong + span > del { font-family: 'MR'; font-size: 16px; color: #6d6d6d;}
.Step9-2 .reco .off .T strong + span > strong { font-size: 24px; line-height: 32px; }
.Step9-2 .reco .off hr { margin: 0; border:0; height:1px; background:#0a0014; cursor: default; pointer  }
.Step9-2 .reco .off .M { padding: 24px 0; text-align: left; }
.Step9-2 .reco .off .M span { font-family: 'MR'; color: #0a0014; font-size: 14px; line-height: 19px; display: block; }
.Step9-2 .reco .off .M i { display: inline-block; text-transform: uppercase; font-style: unset; font-family: 'MB'; font-size: 12px; padding: 8px; border:1px solid #0a0014; margin: 10px 5px 10px 0; border-radius: 8px; }
.Step9-2 .reco .off .M strong { display: block; font-size: 18px; line-height: 24px; background: var(--bg-amac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;  }
.Step9-2 .reco .off .B { padding: 24px 0 0 0; text-align: left; }
.Step9-2 .reco .off .B span:not(.arrow) { position: relative; display: block; font-size: 14px; line-height: 24px; font-family: 'MR'; color: #0a0014; margin: 0 0 4px 18px; }
.Step9-2 .reco .off .B span:not(.arrow):before { content: ''; width: 10px; height: 10px; border: 2px solid #0a0014; border-radius: 25px; display: block; position: absolute; top: 7px; left: -18px; box-sizing: border-box; }
.Step9-2 .reco .off .B strong { font-size: 18px; background: var(--bg-amac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
.Step9-2 .reco .off .B>a { display: inline-block; text-decoration: none; font-family: 'MB'; color: #0a0014; font-size: 14px; line-height: 19px; position: relative; margin: 0 0 0 18px; }
.Step9-2 .reco .plus { position: relative; display: inline-block; vertical-align: middle; margin: 0 16px; }
.Step9-2 .reco .plus:before{ content: ''; position: absolute; width: 2px; height: 16px; background: #fff; top: 8px; left: 15px; }
.Step9-2 .reco .plus:after{ content: ''; position: absolute; width: 16px; height: 2px; background: #fff; top: 15px; left: 8px; }

.Step9-2 .pi { position: relative; box-sizing: border-box; width: 100%; padding: 18px 24px 18px 18px; background-color: #0a0014; border-radius: 0 0 8px 8px; margin: -25px auto 0 auto; background-color: #0a0014; text-align: center; }
.Step9-2 .pi p { font-family: 'MR'; color: #fff; font-size: 14px; line-height: 19px; margin: 16px auto; }
.Step9-2 .pi i { color: #fff; font-family: 'Arial'; font-style: unset; border: 1px solid #fff; border-radius: 25px; display: table; padding: 2px 10px; position: absolute; left: 24px; top: 29px; box-sizing: border-box;}
.Step9-2 .pi a { width:fit-content; margin: 0 auto;}
.Step9-2 .pi strong { font-family: 'MB'; font-size: 22px; display: block; color: #fff; }


.Step10 .C #Mire { width: auto; }
.Step10 .C #Mire > div { background: #EEEFF0; width: calc(50% - 43px); padding: 40px;}
.Step10 .C #Mire>div>form label + input { background: #fff; }
.Step10 .C #Mire>.R p { display: block; margin: 0 0 32px 0; }

.Step10-1 { text-align: left; }
.Step10-1 .C{ text-align: left; }
.Step10-1 .W p { font-family: 'MR'; font-size: 12px; line-height: 16px; }
.Step10-1 .W a { font-family: 'MB'; color: #0a0014;text-decoration: underline;font-size: 14px;cursor: pointer;}
.Step10-1 .W>div { display: inline-block; vertical-align: top; width: calc(50% - 22px); padding: 0 10px; }
.Step10-1 label { font-family: 'MB'; color: #0a0014; font-size: 14px; display: block; margin: 0 0 8px 0; }
.Step10-1 label + *:not(input[type="submit"]) { padding: 8px 12px; width: calc(100%); box-sizing: border-box; font-family: 'MR'; border-radius: 6px; font-size: 14px; background: #EEEFF0; border: 0; margin: 0 0 24px 0!important; display: block; } 
.Step10-1 label + textarea { height: 118px; }
.Step10-1 input[type="submit"] { max-width: 369px; display: block; border: 2px solid #0a0014; color: #fff; font-family: 'MB'; padding: 14px 25px; background-color: #0a0014; margin: 40px auto 0 auto; cursor: pointer; }
.Step10-1 input[type="submit"]:hover {  color: #0a0014; background-color: #fff;}
.Step10-1 .W { position: relative; }
.Step10-1 .W>div { position: relative; }
.Step10-1 .W>input[type="checkbox"] { display:inline-block; vertical-align: middle; }
.Step10-1 .W>input[type="checkbox"]+label { display:inline-block; vertical-align: middle; margin:0; width: calc(100% - 30px); cursor:pointer; }
.Step10-1 .view-password { position: absolute; right: 19px; }
.Step10-1 #register-captcha ~ .W { margin: 0 0 16px 0; }
.Step10-1 .W .R.alert { vertical-align: bottom; }
.Step10-1 .W .R.alert span { display: block; color: #9747ff; position: relative; padding: 0 0 0 24px;}
.Step10-1 .W .R.alert span.ko:before { content:''; width: 12px; height: 12px; background-image: url(https://static.s-sfr.fr/am/o.svg); position: absolute; left:0; top:3px; background-repeat: no-repeat; background-size: cover;}
.Step10-1 .W .R.alert span.ok:before { content:''; width: 12px; height: 12px; background-image: url(https://static.s-sfr.fr/am/ov.svg); position: absolute; left:0; top:3px; background-repeat: no-repeat; background-size: cover;}
.Step10-1 #i7-c { margin: 0!important } 
.Step10-1 .W>.f { margin-left: 10px!important;}

#Config .Step10-2 .C { text-align: center; width: 100%; display: block }
.Step10-2 .C form>div { text-align: center; margin: 0 0 24px 0;}
.Step10-2 div input[type="text"] { border: 2px solid #0a0014; width: 70px; height: 78px; margin: 0 8px; border-radius: 4px; font-size: 55px; text-align: center; font-family: 'MR'; }
.Step10-2 p { display: block; text-align: left; }
.Step10-2 ul { text-align: left; font-family:'MB'; list-style-position: inside;}
.Step10-2 ul li a { color: #0a0014; }
.Step10-2 .btn { margin: 16px auto 0 auto; }

#Config .Step10-3 .C { width: 100%; justify-content: center; }
.Step10-3 label { display: block; font-size: 24px; font-family: 'MB'; }
.Step10-3 input[type="text"] { border:2px solid #fff; background-color: #eeeff0; padding: 8px 16px; margin: 0 0 32px 0;}
.Step10-3 div select { display: block; margin: 0 auto; margin: 0 auto; border: 2px solid #0a0014; padding: 4px 16px; width: 100%; }
.Step10-3 .btn { margin: 16px auto 0 auto; }
#Config .Step11 .C .enc { padding: 80px; }


#Config .Step12 .C { display: block; width:100%;}
.Step12 .c>div .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{max-width:calc(100% - 32px);}
.Step12 .tabs { margin: 0 auto; text-align: center;  }
.Step12 .tabs>.L { display: inline-block; vertical-align: top; }
.Step12 .tabs>.R { display: inline-block; vertical-align: top; }
.Step12 .tabs>div { border-bottom: 2px solid #0a0014; padding: 0 0 16px 0; width: calc(50% - 2px); cursor: pointer;}
.Step12 .tabs>div.i { opacity: .3; }
.Step12 .tabs>div>strong { font-family: 'MB'; color: #0a0014; font-size: 14px; line-height: 19px; position: relative; display: table; margin: 0 auto;}
.Step12 .tabs>.L>strong:before { content: ''; background-image: url(//static.s-sfr.fr/France.svg); width: 20px; height: 20px; display: block; background-repeat:no-repeat; position: absolute; left: -25px; top: 2px;}
.Step12 .tabs>.R>strong:before { content: ''; background-image: url(//static.s-sfr.fr/media/subtract.svg); width: 20px; height: 20px; display: block; background-repeat:no-repeat; position: absolute; left: -25px; top: 2px;}
.Step12 .c { margin: 32px 0; }
.Step12 .c>div { display: inline-block; vertical-align: top; width: calc(50% - 3px); text-align: left; }
.Step12 .c.dr strong { display: block; margin-bottom: 10px; font-family: 'MB'; }
.Step12 .c.dr input[type="radio"] { display: none; }
.Step12 .c.dr label { cursor: pointer; position: relative; font-family: 'MR'; font-size: 14px; padding: 0 40px; }
.Step12 .c.dr label:before { content :''; width: 24px; height: 24px; border:1px solid #0a0014; border-radius: 20px; position: absolute; left: 0; top: -5px; }
.Step12 .c.dr label + .error-selection>p{ margin: 20px 0 0 0; font-size: 14px; font-family: 'MB'; color: #e2001a; }
.Step12 .c.dr input[type="radio"]:checked + label:after { content :''; width: 10px; height: 10px; background-color: #0a0014; border-radius: 20px; position: absolute; left: 8px; top: 3px; }
.Step12 .c .tip { box-sizing: border-box; padding: 16px; background: #EEEFF0; border-radius: 8px; margin-top: 35px;font-family:'MB';font-size: 14px;color:#D90D25;}
.Step12 .c .tip p { font-family: 'MR';  line-height: 19px; color: #0a0014; margin: 0;}
.Step12 .c .tip strong { font-size: 14px; display: block; color:#0a0014;}
.Step12 .c .tip b { font-size: 14px; display: inline-block; background-color: #0a0014; color: #fff; text-transform: uppercase; font-family: 'MB'; padding: 4px 8px; margin: 0 5px 5px 0; border-radius: 4px;}
.Step12 .c .tip hr { border: 1px solid #d1d2d3; border-bottom: 0; }
.Step12 .c .tip span { font-family: 'MR'; font-size: 12px; line-height: 16px; margin: -10px 0 0 0; display: block;color:#0a0014;}
.Step12 .c .tip i { position: relative; font-family: 'MB'; margin: 8px 0 0 0 ; display: inline-block; vertical-align: top; font-style: unset; font-size: 40px; line-height: 40px; background: var(--bg-amac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
.Step12 .c .tip i + sup { font-family: 'MR'; font-size: 15px; display:inline-block; vertical-align: top; margin-top: 9px;}
.Step12 .c .R iframe { width: 95%; height: 400px; background-color: #222; display: block; margin: 0 auto; border:0; text-align: center;}
.Step12 .L > .L > div:first-of-type{position:relative;}
.Step12 .L > .L > div:first-of-type .tongue{ padding: 8px;width: 94%;position: absolute;background: rgb(238, 239, 240);z-index: 99;border-radius: 4px;top: 38px;display: flex;gap: 8px;border: 1px solid #b2b2b278;flex-direction: column;}
.Step12 .L > .L > div:first-of-type .tongue span{cursor:pointer;font-size:12px;}
.Step12 .L > .L > div:first-of-type .tongue span:not(:first-of-type){border-top:1px solid #b2b2b2;padding: 8px 0 0 0;}
#Config .Step13 .C { display: block; }
.Step13  {  }
.Step13 .T { text-align: center; margin-bottom: 42px;}
.Step13 .T strong { display: inline-block; vertical-align: middle; margin: 0 12px 0 0; }
.Step13 .T .radius { display: inline-block; vertical-align: middle; font-family: 'MB'; margin: 0; padding: 8px 5px; background-color: #eeeff0; border-radius: 6px; font-size: 14px; max-width: 90px; text-align: center; border: unset; }
.Step13 .T .price { font-family: 'MB';}
.Step13 .M { max-width: 572px; margin: 0 auto 40px auto; position: relative;}
.Step13 .M.i { opacity: .3; pointer-events: none; cursor:default; }
.Step13 .M input[type="range"] { cursor: pointer; width: 100%; }
.Step13 .M .l { position: absolute; left: 0; bottom: -25px; font-family: 'MB'; font-size: 14px; }
.Step13 .M .r { position: absolute; right: 0; bottom: -25px; font-family: 'MB'; font-size: 14px;}
.Step13 a { width: fit-content; display: block; margin: 110px auto 0 auto; }

.password {position:relative;}
.view-password{position: absolute; z-index: 2; background-image: url(https://static.s-sfr.fr/assets/pictos/masquer_40_noir.svg); width: 21px; background-size: contain; height: 21px; bottom: 30px; right: 16px;cursor:pointer;}
.view-password.crossed{background-image: url(https://static.s-sfr.fr/assets/pictos/afficher_40_noir.svg);}
.Step14 .C { flex-flow: column; }
.Step14 .C .enc{ max-width: 200px; width: 100%; }
.Step14 #A1, .Step14 #A4 { display: flex; gap: 8px; }
.Step14 #A1 .enc { justify-content: center; width: 25%;}
.Step14 #A2 { display: flex; gap: 8px; justify-content: center; }
.Step14 #A3 > div { display:inline-block; vertical-align: top; margin: 0 8px;}
.Step14 #A3 select { display: block; margin: 16px auto;border: 2px solid #0a0014; padding: 4px 16px; width: 100%; }
.Step14 #A3 a { width: fit-content; margin: 16px auto 0 auto; }
.Step14 #A4> div { display:inline-block; vertical-align: top; margin: 0 8px;}
.Step14 #A4 select { display: block; margin: 16px auto;border: 2px solid #0a0014; padding: 4px 16px; width: 100%; }
.Step14 #A5 { display: flex; gap: 8px; flex-wrap: wrap; }
.Step14 #A5 .enc { width: calc((100% / 4) - 6px); max-width: none; }
.Step14 strong { font-family: 'MB'; }
.Step9-1 .ch-cards label.labels16 > div .T{text-align:left;}
.Step4 .C .enc>div.container{margin:0;}
.Step4 .C .enc>div.container > strong{display:unset;font-size:16px;color:#0a0014;background:none;-webkit-text-fill-color:unset;margin:unset;}
#Config .Step9-1 .ch-cards label.labels16 > div .T h2{margin:0 0 8px 0;display:block;}
#Config .enc:hover{box-shadow: 8px 8px 4px 0px rgba(0, 0, 0, 0.25);background: var(--bg-amac);padding: 2px;box-sizing: border-box;}
#Config .enc.active > div{margin:0;}
#Config .enc {transition:box-shadow .2s;}
#Config .enc:hover > .container {background-color: #EEEFF0; border-radius: 12px; height: 100%; padding: 14px 22px;}
#Config .enc.active{padding: 2px;}
#register-captcha{vertical-align: top;width: calc(50% - 22px);padding: 0 10px;}
@media all and (max-width: 1100px) {
    #Config .C{justify-content:center;align-items:stretch;max-width:100%;gap:24px 4px;flex-wrap:wrap;}
    #Config .C .enc{height:auto;min-height:200px;width:calc(50% - 4px);max-width:50%;}
    .Step4 .C .enc{min-width: calc(50% - 11px);}
    .Step14 #A1, .Step14 #A4{flex-wrap:wrap;justify-content:center}
    .Step14 #A1 .enc{width:calc(50% - 4px);}
    .Step14 #A5{width:100%;}
    .Step14 #A5 .enc{width:calc(50% - 4px);}
    .Step12 .c{display:flex;flex-direction:column;gap:24px;}
    .Step12 .c>div{width:100%;}
    .Step9 .pack .ex{display:block;width:100%;}
    .Step9 .pack .ct{width:100%;border-radius:0;}
    .Step10 .C #Mire > div{width:100%;margin:0 0 16px 0;height:fit-content;}
    .Step9-1 .ch-cards label.labels16 > div .T{padding: 0 100px 0 0;}
    .Step9-2 .reco .plus{display:flex;justify-content:center;margin:16px 0;}
    .Step9-2 .reco .plus:before{left:0; right:0;top:0;bottom:0;margin:auto;}
    .Step9-2 .reco .plus:after{left:0; right:0;top:0;bottom:0;margin:auto;}
    .Step12 .tabs{display:flex;}
    .Step9-1 .ch-cards label.labels16 > div .B{text-align:left;}
}
@media all and (max-width: 768px) {
    #HC { padding: 8px 16px; overflow: unset; }
    #HC div>a>img { height:24px; width: auto; }
    #HC #ConfigM { display: block; position: absolute; top: 0; right: 0; width: calc(100% - 54px); z-index: 2; }
    #HC #ConfigM[open] summary:after{ transform: rotate(225deg); top: 20px; }
    #HC summary { position: relative; color: #fff; font-family: 'MB'; text-align: right; z-index:2; padding: 14px 30px 14px 8px; font-size: 14px;}
    #HC summary:after { content: ''; width: 10px; height: 10px; border:2px solid #fff; display: block; position: absolute; right: 12px; top: 14px; transform: rotate(45deg); border-top: 0; border-left: 0; }
    #HC summary::marker { content: '';}
    [id^="Config"]>.R{ width: 100%; margin: 0 0 0 0; border-radius: 0; }
    [id^="Config"]>.R>strong { display: none; }
    #Config .C .enc{width:100%;max-width:unset;}
    
    #Config>.L{max-width:calc(100% - 32px); margin:auto;}
    #Config>.R{display:none;}
    [id^="Config"] h1 { font-size: 24px; margin: 0 0 8px 0; }
    [id^="Config"] h1+p{ font-size: 14px; }
    #Config .Step14 #A3 > div{margin:0 2px;width:calc(50% - 8px);}
    #A4{display:flex;gap:4px;justify-content:center;}
    .Step14 #A4> div{margin:0;}
    #Config .L.Step1 .C{flex-direction:column;}
    #Config .L.Step1 .C > .enc{width:100%;max-width:none;}
    .Step9-1 .ch-cards{justify-content: center;}
    .Step9-1 .ch-cards .linear-border{min-width:280px;}
    .Step10-2 div input[type="text"]{margin:0 0 4px 0;}
    .Step10-1 .W>div{width:100%;}
    .Step12 .tabs>.L>strong:before{left:-18px;}
    #Config .Step11 .C{width:100%;}
    #Config .Step11 .C .enc{padding:80px 0;}
    .Step9-2 .pi{padding: 18px 24px 18px 24px;}
    #Config > .L.Step14{flex-wrap:wrap;}
    .Step14 #A1 .enc{width:100%;max-width:none;}
    .Step12 .tabs>.L>strong:before { display:none;}
    .Step12 .tabs>.R>strong:before {display:none;}
    .Step12 .c.dr label{margin: 0 0 24px 0;display:flex;}
    .Step10 .C #Mire > div{padding:24px;}
}