@font-face{font-family:Montserrat;font-style:normal;src:url("//static.s-sfr.fr/media/RED/Fonts/Montserrat-Variable.woff2") format("woff2-variations");font-display:swap}
html{scroll-behavior:smooth;}
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}
strong{font-family:"Montserrat";font-weight: 700;}
button {border:none;margin:0;text-decoration:none;-webkit-appearance:none;-moz-appearance:none}
h1{font-family:"Montserrat";font-size:40px;margin:0;}
h2{font-family:"Montserrat";font-weight: 700;margin:0;font-size:32px;}
h3{display:block;font-family:"Montserrat";font-weight: 700;margin:0;font-size:24px;}
body{font-family:"Montserrat";color:var(--clr-black);}
hr {border:0;border-bottom:1px solid #A0A0AB;margin:0}
:root{
    --clr-green : #00E094;
    --clr-green2 : #08bf7e;
    --clr-purple : #5A55DF;
    --clr-grey : #f2f2f2;
    --clr-grey2 : #9c9e9f;
    --clr-black : #131316;
    --clr-black2 : #10221C;
}

a[class^="btn"],input[class^="btn"],button[class^="btn"]{display:block;position:relative;font: 600 14px / 40px "Montserrat", Verdana;font-size:14px;line-height:16px;padding:12px 24px;text-align:center;width:100%;cursor:pointer;overflow:hidden;text-decoration:none;user-select:none;-webkit-user-select:none;transition:background-color .3s ease-out ;}
.btn{color:#fff;background-color:var(--clr-black);}
.btn2{color:var(--clr-black);background:#fff;}
.btn3{color:var(--clr-black);background:transparent;border:1px solid var(--clr-black);}
.btn4{color:#fff;border:solid 1px #fff;}
.btn:hover,input.btn:hover{background-color:#3F3F46;color:#fff;}
.btn2:hover,input.btn2:hover{background-color:#D1D1D6;}
.btn3:hover,input.btn3:hover{color:#3F3F46;border:1px solid #3F3F46}
.btn4:hover{color:#3F3F46;border:1px solid #3F3F46}
.btn:active{background-color:#70707B;}
.btn2:active{background-color:#70707B;color:#fff;}
.btn3:active,.btn4:active{color:#70707B;border:1px solid #70707B;}
a[class^="btn"]:disabled{pointer-events: none;}
.btn:disabled{background-color:#E4E4E7;color:#A0A0AB;}
.btn2:disabled{background-color:#26272B;color:#70707B;}
.btn3:disabled{color:#A0A0AB;border:1px solid #A0A0AB}
.btn4:disabled{color:#70707B;border:1px solid #70707B}
a[class^="btn"].loader,input[class^="btn"].loader{background:#E4E4E7;border:#E4E4E7;cursor:default}
a[class^="btn"].loader:before,input[class^="btn"].loader:before{content:'';position:absolute;width:100%;height:100%;background:var(--clr-disable);left:0;top:0}
.loader:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:16px;width:16px;color:var(--clr-sfr2);display:inline-block;border:2px solid;border-radius:50%;border-top-color:transparent;animation:rotate 1s linear infinite}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
a[class^="link"]{position:relative;font: 600 14px / 120% "Montserrat";text-decoration: underline;text-underline-offset: 5px;text-decoration-thickness: 2px;}
a[class^="link"]:hover{font-weight:700;text-decoration:none;}
.link{color:var(--clr-black)}
.link2{color:#fff}
.link:hover{color:#3F3F46;}
.link2:hover{color:#D1D1D6;}
.link:active{color:#70707B;}
.link2:active{color:#70707B;}
.link:disabled{color:#A0A0AB;}
.link2:disabled{color:#70707B;}
.message{position:relative;display:grid;padding: 24px 24px 24px 72px;gap: 16px;width: 100%;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.02);font-family:"Montserrat";font-size: 14px;line-height: 22px;}
.message.ko{background: #FFF0F0;}
.message:before{position:absolute;content:"";top:24px;left:24px;margin: auto;width:32px;height:32px;}
.message.ko:before{background: url(//static.s-sfr.fr/assets/pictos/croix_cercle_40_rouge.svg) center/contain;}
.message.ko:after{position:absolute;content:"";top:0;left:0;width:4px;height:100%;background: var(--clr-sfr2);}
.message.ok{background: #E8F8F0;}
.message.ok:before{background: url(//static.s-sfr.fr/assets/pictos/check_circle_40_blanc.svg) center/contain;filter: invert(57%) sepia(94%) saturate(905%) hue-rotate(120deg) brightness(88%) contrast(98%);}
.message.ok:after{position:absolute;content:"";top:0;left:0;width:4px;height:100%;background: var(--clr-green);}
.message.wa{background: #FFF4E0;}
.message.wa:before{background: url(//static.s-sfr.fr/assets/pictos/alerte_40_blanc.svg) center/contain;filter: invert(60%) sepia(30%) saturate(5083%) hue-rotate(3deg) brightness(106%) contrast(103%);}
.message.wa:after{position:absolute;content:"";top:0;left:0;width:4px;height:100%;background: #FF9300;}
.message.i{background: #ECF2FF;}
.message.i:before{background: url(//static.s-sfr.fr/assets/pictos/information_40_blanc.svg) center/contain;filter: invert(58%) sepia(57%) saturate(5696%) hue-rotate(205deg) brightness(104%) contrast(101%);}
.message.i:after{position:absolute;content:"";top:0;left:0;width:4px;height:100%;background: #4C89FF;}
.message ul{list-style:none;font-size:14px;margin: 0 0 0 16px;}
.message li{margin:0 0 8px 0;}
.message li:before{content: '';position: absolute;width:8px;height:8px;margin:7px 0 0 -16px}
.message.i li:before{background: #4C89FF}
.message.wa li:before{background:#FF9300}
.message.ko li:before{background:var(--clr-sfr2)}
.message.ok li:before{background:var(--clr-green)}

.price {position:relative;display:grid;grid-template-areas: "b a c";align-items: baseline;font:normal 24px/48px "Montserrat";font-weight:700;text-align: left;}
.price .o {font-size: 14px;line-height: 20px;font-family:"Montserrat";vertical-align: middle;display: inline-block;text-decoration: line-through;margin-left: 4px;}
.price .L {grid-area: b;margin:0;}
.price .R:last-of-type {font: normal 16px / 16px Montserrat; font-weight:700;}

#FilAriane{width:1280px;max-width:calc(100% - 32px);margin:16px auto 24px;text-align:left}
#FilAriane ol{list-style:none}
#FilAriane li{display:inline-block;position:relative;margin: 0 24px 0 0;font:14px/normal 'Montserrat';}
#FilAriane li:not([aria-current="page"]):after{ content:''; width:16px; height: 16px; display:block; background-image:url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_noir.svg); background-size: cover;position:absolute; top:2px;right: -22px;}
#FilAriane a{text-decoration:underline;color:var(--clr-black);font-weight:600;}
#FilAriane li[aria-current="page"] {font-family:"Montserrat";font-weight:700;}

#FilAriane.green li:not([aria-current="page"]):after, #FilAriane.white li:not([aria-current="page"]):after{background-image:url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_blanc.svg);}
#FilAriane.white a, #FilAriane.white li{color:#fff;}

.hid{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute}

.POPIN {box-sizing: border-box;background: #fff;border-radius: 12px;box-shadow: 0 8px 16px rgba(24, 24, 24, .08);max-height: calc(100% - 32px);max-width: calc(100% - 32px);width: 880px;overflow-y: auto;padding: 40px 20px 25px;position: fixed;top: 0;z-index: 99;bottom: 0;border:0; gap:16px;}
.POPIN::backdrop{background-color: rgba(0, 0, 0, .5);}
.POPIN>button {content: "";cursor: pointer;display: block;height: 32px;position: absolute;right: 8px;top: 8px;width: 32px;background:none;}
.POPIN>button:before {content: "";position: absolute;background: url(https://static.s-sfr.fr/assets/pictos/fermer_40_noir.svg);background-size:cover;height:32px;width:32px;left:0;top:0}

.transcription{position: relative;overflow:hidden;background-color:#fff;margin:0 0 24px 0;padding:24px;border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2;}
.transcription > summary{list-style-type:none;font: 16px/24px "Montserrat";font-weight:700;cursor: pointer}
.transcription > summary::-webkit-details-marker{display:none}
.transcription summary:after{content:'';position:absolute;width:8px;height:8px;border:2px solid var(--clr-black);transform:rotate(45deg);top:29px;right:4px;border-top:0;border-left:0;transition:all 0.2s ease-out}
.transcription[open] summary:after{transform:rotate(225deg)}
.transcription>div{margin:24px 0 0 0}
.transcription> p:not(:last-child){margin: 0 0 16px 0}
.transcription>div a{text-decoration:underline}

.bar:is(.tabs,.switchs) { display: inline-flex; max-width: 100%; }
.bar:is(.tabs,.switchs) > button{ position: relative; flex: 0 0 var(--space-S4); width: var(--space-S4); z-index: 1; }
.bar:is(.tabs,.switchs) > button:disabled::before, .bar:is(.tabs,.switchs) > button:disabled::after{ border-color: var(--color-disabled); }
.bar:is(.tabs,.switchs) > button.hidden{ display: none; }
.bar:is(.tabs,.switchs) > button::before{ content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-left: 2px solid #000; border-bottom: 2px solid #000; }
.bar:is(.tabs,.switchs) > .left::before{ transform: rotate(45deg); }
.bar:is(.tabs,.switchs) > .right::before{ transform: rotate(-135deg); }
.bar:is(.tabs,.switchs) > .w{ position: relative; flex: 1 1 auto; overflow: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.bar:is(.tabs,.switchs) > .w::-webkit-scrollbar{ display: none; }
.bar:is(.tabs,.switchs) .hl{ position: absolute; left: 0; top: 0; width: var(--data-width); height: 100%; transform: translateX(var(--data-translate)); transition: width , transform .2s; z-index: 0; }
.bar:is(.tabs) .hl{ border-bottom: 2px solid transparent; border-color: var(--color-blue); }
.bar:is(.switchs) .hl{ border: 3px solid transparent; background-clip: content-box; background-color: var(--color-green); border-radius: 14px; }
.bar:is(.tabs,.switchs) ul{ position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: max-content; direction: ltr; z-index: 1; }
.bar:is(.tabs,.switchs) ul::-webkit-scrollbar{ display: none; }
.bar:is(.tabs,.switchs) li{ width: 100%; white-space: nowrap; scroll-snap-align: start; scroll-margin-inline: 5px; }
.bar:is(.tabs,.switchs) li > *{ width: 100%; /* border-left: 1px dotted #ddd; border-right: 1px dotted #ddd; */ }
.bar:is(.tabs){ background-color: var(--color-white); }
.bar:is(.switchs) > .w { border-radius: 16px; background-color: var(--color-white); }
.bar:is(.switchs) > button:not([disabled]) + .w{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar:is(.switchs) > .w:has(+ button:not([disabled])){ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar:is(.tabs):has(> button:not(.hidden)){ padding: 0 var(--space-S3); }

@media(max-width:1100px){
    h1{font-size:32px;line-height:48px}
    h2{font-size:24px;line-height:36px}
    h3{font-size:16px;line-height:24px}
    a[class^="link"]{font-size:12px;line-height:16px}
    a[class^="link"]:after{top:unset;bottom: 2px;}
    
    details.faq{ margin: 0 0 16px 0; padding: 16px;}
    details.faq>div{ margin: 16px 0 0 0;}
    details.faq summary:after { top: 21px;}
    
    .transcription {margin: 0 0 16px 0;}
    .transcription>div {margin: 16px 0 0 0;}
}
@media(max-width:768px){
    .message{padding:64px 16px 16px}
    .message:before{left:16px;top:16px}
}