@font-face{font-family:'SFR-Regular';src:url("//static.s-sfr.fr/assets/fonts/Poppins-Regular.woff2")}
@font-face{font-family:'SFR-Light';src:url("//static.s-sfr.fr/assets/fonts/Poppins-Light.woff2")format("woff2")}
@font-face{font-family:'SFR-Bold';src:url("//static.s-sfr.fr/assets/fonts/Poppins-Bold.woff2")format("woff2")}
@font-face{font-family:'SFR-Black';src:url("//static.s-sfr.fr/assets/fonts/Poppins-Black.woff2")format("woff2")}
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:'SFR-Bold';}
button {border:none;margin:0;text-decoration:none;-webkit-appearance:none;-moz-appearance:none}
h1{display:block;font:normal 40px/60px SFR-Black;margin:0}
h2{display:block;font:normal 32px/48px SFR-Bold;margin:0}
h3{display:block;font:normal 24px/36px SFR-Bold;margin:0}
body{font-family:SFR-Regular, Arial;color:var(--clr-black);}
:root{
    --clr-sfr:#181818404;
    --clr-sfr2:#D90D25;
    --clr-black:#181818;
    --clr-bg:#F2F2F2;
    --clr-disable:#d2d2d2;
    --clr-grey:#8A8A8A;
    --clr-green:#02C39A;
    --clr-yellow:#ffcd00;
    --clr-error:#E2001A;
}

a[class^="btn"],input[class^="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;overflow:hidden;text-decoration:none;transition: box-shadow .2s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none}
a[class^="btn"]:hover,input[class^="btn"]:hover{box-shadow:0 4px 12px rgba(24,24,24,0.32)}
.btn{color:#fff;background:var(--clr-sfr2);box-shadow:0 4px 8px rgba(150,0,0,0.16)}
a.btn:hover,input.btn:hover{box-shadow:0 4px 8px rgba(150,0,0,0.32)}
a.btn2:hover,input.btn2:hover{box-shadow:0 4px 12px rgb(24 24 24 / 32%)}
.btn2{color:#fff;background:var(--clr-black);box-shadow:0 0 12px rgba(24,24,24,0.16)}
.btn3{color:var(--clr-black);background:#fff;box-shadow:0 0 12px rgba(24,24,24,0.16)}
.btn4{color:var(--clr-black);border:solid 1px var(--clr-black);box-shadow:0 0 12px rgba(24,24,24,0.16)}
.btn5{color:#fff;background:var(--clr-black);border:solid 1px #fff;box-shadow:0 0 12px rgba(24,24,24,0.16)}
.btn:active{box-shadow:inset 0 4px 8px rgba(0, 0, 0, 0.2)}
.btn2:active{background:#444;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.16), inset 0px 4px 8px rgba(0, 0, 0, 0.32)}
.btn3:active{box-shadow:0 4px 8px rgba(0, 0, 0, 0.04), inset 0 2px 2px rgba(1, 1, 1, 0.1)}
.btn4:active{box-shadow:0 0 12px rgba(24,24,24,0.16)}
.btn5:active{box-shadow:0 0 16px rgba(255, 255, 255, 0.24)}
.btn:disabled,.btn2:disabled,.btn3:disabled{color:var(--clr-grey);background-color:var(--clr-disable);box-shadow:0 0 16px rgba(255,255,255,0.24);pointer-events: none;}
.btn4:disabled,.btn5:disabled{color:var(--clr-grey);border-color:var(--clr-grey)}
.btn[disabled],.btn2[disabled],.btn3[disabled]{color:var(--clr-grey);background-color:var(--clr-disable);box-shadow:0 0 16px rgba(255,255,255,0.24);pointer-events: none;}
.btn4[disabled],.btn5[disabled]{color:var(--clr-grey);border-color:var(--clr-grey)}
a[class^="btn"].loader,input[class^="btn"].loader{background:var(--clr-disable);box-shadow:unset;border:var(--clr-disable);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}

a[class^="link"]{position:relative;font:normal 14px/18px SFR-Bold;padding:0 13px 0 0;cursor:pointer}
a[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)}
a[class^="link"]:hover:after{right:-3px}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.link{color:var(--clr-sfr2)}
.link2{color:var(--clr-black)}
.link3{color:#fff}
.link.u{font-family:SFR-Bold;color:var(--clr-black);text-decoration:underline;padding:0}
.link.u:after{content:none}

.price {position:relative;display:grid;grid-template-areas:"b a" "b c";}
.price .R{ text-align: left;font:normal 12px/12px SFR-Bold;}
.price .L {font:normal 32px/30px SFR-Bold;grid-area: b;margin:0;}
.price .o {font-size: 12px;font-family: 'SFR-Regular';vertical-align: middle;display: inline-block;text-decoration: line-through;}
/*.price {position:relative;display:grid;grid-template-areas: "b a c";align-items: baseline;}
.price .L {font:normal 32px/30px SFR-Bold;grid-area: b;margin:0;}
.price .R{ text-align: left;font:normal 16px/12px SFR-Bold;}*/

.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);border-radius: 12px;overflow:hidden;font-family: 'SFR-Regular';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)}

details.faq > summary{list-style-type:none;font: 16px/24px SFR-Bold;padding: 0 24px 0 0;cursor: pointer}
details.faq > summary::-webkit-details-marker{display:none}
details.faq{position: relative;overflow:hidden;background-color:#fff;margin:0 0 24px 0;padding:24px;border-radius:8px}
details.faq:last-child {margin:0}
details.faq>: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}
details.faq>[open]:after{transform:rotate(225deg)}
details.faq>div{margin:24px 0 0 0}
details.faq> p:not(:last-child){margin: 0 0 16px 0}

.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}
#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:12px/normal 'SFR-Regular';}
#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);}
#FilAriane li[aria-current="page"] {font-family:'SFR-Bold'}

#REA {background: #fff;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.02);padding: 24px 0; margin: 40px auto 0 auto;font:normal 16px/24px "SFR-Bold";color: var(--clr-black);}
#REA>p {width:1280px;max-width: calc(100% - 64px);margin: 0 auto; font: 24px/36px "SFR-Bold"}
#REA ul{max-width:1280px;margin: 16px auto 0;width: calc(100% - 64px);display: flex;gap: 40px;flex-wrap: wrap;position: relative;justify-content:space-between;text-align:center;list-style:none;}
#REA img {height:40px;margin:0 0 16px;}

hr {border:0;border-bottom:1px solid var(--clr-disable);margin:0}
[id^="SEO"] {color:var(--clr-black);background:#fff}
[id^="SEO"] details {position:relative;padding:24px 0;width:calc(100% - 64px);max-width:1280px;margin: 0 auto}
[id^="SEO"] details strong{font-family:'SFR-Bold'}
[id^="SEO"] details a{color:var(--clr-black);cursor:pointer}
[id^="SEO"] summary{list-style-type:none;cursor:pointer;}
[id^="SEO"] summary::-webkit-details-marker{display:none}
[id^="SEO"] summary>span{font: 16px/normal 'SFR-Bold';display:block;padding:0 16px 0 0}
[id^="SEO"] summary>span+p{margin: 24px 0 0 0}
[id^="SEO"] summary>span+p:empty{display:none;}
[id^="SEO"] summary>span+i{margin: 24px 0 0 0;display:block;font-size:14px}
[id^="SEO"] summary>p{font: 14px/normal 'SFR-Regular'}
[id^="SEO"] summary>p>a{font: 14px/normal 'SFR-Bold'}
[id^="SEO"] summary+div{font: 14px/normal 'SFR-Regular';margin: 24px 0 0 0}
[id^="SEO"] a{color:var(--clr-black);text-decoration:underline}
[id^="SEO"] details summary:after{content:'';position:absolute;width:8px;height:8px;border:2px solid var(--clr-black);transform:rotate(45deg);top:29px;right:0;border-top:0;border-left:0;transition:all 0.2s ease-out}
[id^="SEO"] details[open] summary:after{transform:rotate(225deg)}

@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^="btn"],input[class^="btn"]{font-size:12px}     
    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:after{ top: 22px;}
    
    #REA {padding: 16px 0; margin:24px 0 0 0;}
    #REA > p {max-width: calc(100% - 32px); font: 16px/24px "SFR-Bold"}
    #REA ul{width: calc(100% - 32px);flex-flow: column;justify-content:start;gap: 16px;text-align: left;}
    #REA img,#REA ul p {display:inline-block;vertical-align:middle;margin: 0 16px 0 0;}
    #REA ul p {font: normal 14px/21px "SFR-Bold";}
    
    [id^="SEO"] details { width:calc(100% - 32px); }
}
@media(max-width:768px){
    .message{padding:64px 16px 16px}
    .message:before{left:16px;top:16px}
}