@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")}
#HP > p {padding: 40px;font-size: 14px;}
#HP h2, #HP h1{font-family:'SFR-Bold';max-width: 1360px; margin: 20px auto;}
#HP p,#HP li,#HP label,#HP a,#HP span,#HP div,#HP input,#HP strong{font-family: 'SFR-Regular';}
#HP input{font-size:14px;}
#HP section.full{padding:60px 5%;width:90%;overflow:hidden;}
#HP .container .l,#HP .container .r,#HP .container .m{display:inline-block;}
#HP #Hero h2{font-size: 37px;line-height: 37px;color: #fff;}
#HP .container .m {width: calc( 100% - 6% - 545px);background-size:cover;height:360px;}
#HP .container .l{width:540px;}
#HP .container strong{ font-weight: 400; font-size: 18px; line-height: 0px; color: #FFF;margin-top:40px;}
#HP .container .l h1{ font-style: normal; font-weight: 700; font-size: 37px; line-height: 37px;color: #fff; text-transform: uppercase;}
#HP .container .l p{ font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; /* or 143% */ color: #FFF;margin-bottom:20px;}
#HP .container .r{width:calc( 100% - 50px - 545px);}
#HP .container .elt{display:inline-block;width:calc(100% / 4 - 19px);height: auto;margin:0 10px;text-align:center;height:400px;background-repeat:no-repeat;}
#HP .container .elt h3 { font-weight: 700; font-size: 22px; line-height: 27px;text-align: center; font-family: 'SFR-Bold'; color: #FFF;height:54px;overflow:hidden; margin: 10px 0px;}
#HP .container .elt p { font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; /* or 143% */ text-align: center; color: #FFF;padding:0px 10px;}
#HP .container a,#HP .container button{ font-family: 'SFR-Bold'; font-style: normal; font-weight: 700; font-size: 13px; line-height: 20px;text-align: center; color: #fff;text-decoration:none;padding: 10px 37px;background-color: #d90d25;border-radius:6px;display:table;cursor:pointer;box-shadow:0 4px 8px rgba(150,0,0,0.16)}
#HP .container a.btnP{padding: 10px 20px;margin-bottom:20px;}
#HP #Hero .container a { color: #d90d25; background:#fff; }
#HP #Hero .container a:before{content:'';position:absolute;width:100%;height:404px;top:93px;left:0;}
#HP .elt.actus .act{padding: 0% 2%; border: 1px solid #f2f2f2; border-top: none;}
#HP .container .offre + a { margin-left: 20px; padding: 8px 40px; }
#HP .container button{padding: 8px 20px;background-color: #d90d25;border-radius:6px;margin-bottom:20px;border:none;}
#HP .container a:hover, #HP .container button:hover{box-shadow:0 4px 8px rgba(150,0,0,0.32)/*background-color:#fff;color:#d90d25;border:none;*/}
#HP #Sfrbu .r img{padding:15px 0px;}
#HP h2 {font-style: normal;font-weight: 700;font-size: 27px;line-height: 37px;}
#HP .container .l span{ font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; /* identical to box height, or 143% */ color: #FFF;}
#HP .container .checkbox {display:none;}
#HP .container label{display: table; margin: 0 auto; position: relative;}
#HP .container label:before{content:"";border:2px solid #fff; width:2px;height:2px;width: 12px; height: 12px; position: absolute; margin-left: -37px}
#HP .container .l ul strong{line-height:24px;display:inline;font-family:'SFR-Bold';}
#HP .container .l ul img {display: block;position: absolute;left: -24px;max-width: 40px;top: 0;bottom: 0;margin: auto;}
#HP .container .l ul {list-style:none;margin-bottom:30px;}
#HP .container input {margin-bottom: 25px; width: 512px; padding: 10px; border-radius: 6px;display:inline-block;border:none; outline:none;}
#HP .container .r img{width:100%;}
#HP #Sfrbu .r img{width:45px;position:absolute;left:-5px;top:13px;display:block;}
#HP .container.actus .elt a, #HP .container figcaption div:nth-child(2) a { color: #000; border: none; border-radius: 0px; background-color: initial; border-bottom: 2px solid #d90d25;padding: 0px}
#HP .container.actus .elt {height: auto;scroll-snap-align: start;}
#HP .container.actus .elt p, #HP .container.actus .elt a {text-align: left;padding:0px;}
#HP .container.actus .elt a {display:table;}
#HP .content strong{color:#000;}
#HP .descr a { background-color: initial; color: #000; border: none; margin: 0px; padding: 10px 0px; font-family: 'SFR-Bold'; font-size: 15px; box-shadow: none; }
#HP .descr a:hover { box-shadow: none; text-transform: uppercase; }
#HP .r .picto-prs , #HP .r .descr{display:inline-block;}
#HP .r .picto-prs{width:45px;}
#HP .r .descr{width: calc(100% - 45px - 5px);}
#HP .r .elem{margin: 25px 0px;position:relative;}
#HP .r .rl , #HP .r .rr {display:inline-block;width:calc(100% /2 - 24px);}
#HP .rl{margin-right:41px;}
#HP .elt.actus {display:inline-block;width:320px;padding:0% 2%; white-space:normal;text-align:left;margin-bottom:40px;}
#HP .elt.actus img{width:320px;height:246px;}
#HP .elt.actus img, #HP .elt.actus .typElt2{filter:brightness(1.05);}
#HP .elt .desc {padding:150px 20px 20px 20px;}
#HP .content{width:100%;max-width:1360px;margin:0px auto;}
/*#HP .content .container {padding: 2% 0% 2% 5%;}*/
#HP .r .offre {width:161px;padding:20px;margin:20px;} 
#HP .offre-titre{background-color:#FFCD00;border-radius: 6px 6px 6px 0px; padding: 20px 5%; color: #000; font-weight: bold;}
#HP .offre-desc{background-color: #555885; border-radius: 6px; padding: 20px 5%; color: #fff;}
#HP .offre > span{font-size: 45px;font-family: 'SFR-Bold';}
#HP .offre span + span{position: absolute; font-size: 27px;}
#HP .r #plus{margin-left:18px;margin-left: calc( 100% - 287px);width:257px;}
#HP .actus .elt h3 { color: #000; line-height: 22px; font-family: 'SFR-Bold';font-weight: 400; font-size: 18px; margin-top: 40px;margin-bottom:20px;height:85px; overflow:hidden;text-align:left; }
#HP .more-about { display: flex; flex-direction: column; align-items: center; }
#HP section.zone-about { display: flex; min-height: 200px; background-color: #222222; color: white; justify-content: space-around; -ms-flex-align: center; align-items: center; font-size: 18px; }
#HP .title-link { display: inline-block; text-align: center; color: white; }
#HP .splitter { height: 80px; border: solid 1px #444444; }
#HP .typElt2 { position: sticky; display: table; margin-top: -45px; padding: 2px 8px; border-radius: 5px; margin-left: 6px;color: #fff; font-size:12px; }
#HP .desc p {height: 65px;overflow: hidden;}
#HP  a.pb:hover{box-shadow:0 4px 8px rgba(150,0,0,0.32);transition: all .3s ease-out;}
#HP .scroll {margin: 20px auto;text-align: center;position:sticky;left:0;right:0;display:none;}
#HP .scroll li {display:inline-block;}
#HP .scroll a{padding:10px;}
#HP .container .elt .desc p {height:65px;overflow:hidden;}
#HP #Logos .elts{margin-bottom:30px;}
#HP #Hero{height:360px;padding: 0%; width: 100%;overflow:hidden;position:relative;}
#HP #Hero:before { content :''; width: 20%; height: 100%; background: #e20000; opacity: .8; position: absolute; left:0; top:0; }
#HP #Hero .container { position: relative; }
#HP #Hero .container .l{padding:24px 1% 45px 5%;vertical-align:top;}
#HP #Hero .container .l:before {content :''; background: linear-gradient(88.39deg, #222222 37.03%, rgba(34, 34, 34, 0.0001) 98.77%); position: absolute; top: 0; right: 0; width: 80%; }
#HP #Hero .container .l p {height:75px;overflow:hidden;}
#HP #Hero .container .r { width: 250px; position: absolute; right: 250px; }
#HP #Actus .container .r p:not(.date){height:150px;overflow:hidden;}
#HP #Actus .container .r p.date {color: #a2a2a2;}
#HP #Eligibilite {background-size:cover;margin: 0px auto;background-repeat: no-repeat;background-position: center;padding:0%;}
#HP #Eligibilite .container .r button {display:inline-block;}
#HP #Eligibilite strong{color:#fff;}
/*#HP #Items .container{padding:60px 0px;}*/
#HP #Items a {margin: 0 auto;}
#HP #Premium{background-color:#F2F2F2;padding:0px;}
#HP #Premium .container{padding:0%}
#HP #Premium .container .l{width:calc(100% - 10% - 625px);padding:60px 5% 15px;}
#HP #Premium .container .r{width:620px;vertical-align:top;}
#HP #Premium .container .l p,#HP #Premium .container h2,#HP #Premium .container .l strong {color:#000;}
#HP #Premium .container .l p { height: 182px; overflow: hidden; }
#HP #Offre{background-repeat:no-repeat;background-position:center right;margin:0px 0% 60px;position:relative;}
#HP #Offre .l span + img{display: inline-block;vertical-align:middle; margin-left:10px;}
#HP #Offre .container h2{color:#fff;line-height:37px;}
#HP #Offre .container .r {width:calc(100% - 40% - 5px);position: absolute;margin-top: 50px;}
#HP #Offre .container .r blockquote p{ font-style: normal; font-weight: 700; font-size: 24px; line-height: 24px; /* or 100% */ color: #022222;margin: 0 0 24px;}
#HP #Offre .container .r figcaption{width:100%;position:relative;margin-left:20px;}
#HP #Offre .container .r blockquote {margin: 0;}
#HP #Offre .container .r figcaption >div:nth-child(1){background-size:cover;border-radius:50%;width:60px;height:60px;padding:0px;}
#HP #Offre .container .l{width: 40%;}
#HP #Offre .container .r figcaption div{display:inline-block;vertical-align:top;}
#HP #Sfrbu .container , #HP #Items .container{max-width: 1360px; margin: 0 auto;}
#HP #Sfrbu .container .l strong,#HP #Sfrbu .container .l p {color:#000;}
#HP #Sfrbu .container .elem p{color:#000;}
#HP #Sfrbu .container .elem strong,#HP #Sfrbu .container .elem p{margin:1px 0px;}
#HP #Sfrbu .container .r{margin-left:50px;}
#HP #Logos {background-color:#F2F2F2;} 
#HP #Logos .container {padding:60px 5%;}
#HP #Logos .container .elt {height:auto;margin:0px;background-color: #fff; margin-right: 10px; padding:35px 40px;width: calc( 100% / 4 - 94px);}
#HP #Logos .container .elt img{width:168px;}
#HP #Actus{padding: 60px 0% 60px 5%; width: 95%;margin-top:60px;}
#HP #Actus .container .l strong, #HP #Actus .container .l h2, #HP #Actus .container .r p{color:#000;}
#HP #Actus .container .l {width:25%;white-space:normal;}
#HP #Actus .container .r {scroll-snap-type: x mandatory;white-space:nowrap;overflow-x:scroll;width: calc( 100% - 25% - 20px);vertical-align: top;position:relative;scroll-behavior:smooth;}
#HP #Newsletter{padding:1% 5%;}
#HP #Newsletter .container {width:700px;margin: 0 auto;}
#HP #Newsletter .container h2, #HP #Newsletter .container p , #HP #Newsletter .container label{color:#fff;}
#HP #Newsletter .container button{display:inline-block;}
#HP #banniere_footer {background-color:#222;}
#HP #banniere_footer p , #HP #banniere_footer strong{color:#fff;}
#HP #banniere_footer .container div{border-right:2px solid #b7b7b7;display:inline-block;width: calc(100% / 3 - 30px); padding: 50px 10px; text-align: center;}
#HP #banniere_footer .container div:nth-child(3){border-right:none;}
#HP #flSFR{display:inline-block;position:absolute;right:0;margin-top:-668px;}
#HP #banniere_footer .container a { background-color: initial; border: none; }
#HP figcaption div:nth-child(2) {width: calc(100% - 81px);margin-left: 16px;}
#HP figcaption div:nth-child(2) cite{display:block;margin:4px 0px;}
#HP #Offre .container {max-width: 1360px; margin: 0 auto;}
#HP a{text-decoration:none;}
#HP input#newsletterCheck:checked + label:after{content: ''; border: 2px solid #fff; width: 4px; height: 9px; position: absolute; left: -32px; transform: rotate(45deg); border-top: none; border-left: none;top:0;}
#HP .l li{padding:0px 30px;position:relative;}
#HP blockquote p::after {content: '\201D';}
#HP blockquote p::before { content: '\201C'; }
#HP figure{background-color: #fff; padding: 20px; max-width: 410px;margin:0 auto;width:100%;}
#HP li strong + p { margin-top: 3px; }
#HP .container .elt:nth-child(1) { margin-left: 0px; }
#HP .container .elt:last-child { margin-right: 0px; }
#HP h1.par1{padding: 8px 20px; font-size: 14px;font-weight: 100; margin: 0px;font-family:'SFR-Regular';}


@media all and (max-width:1100px){
#HP #Hero .container .r,#HP #Hero .container .m{display:none;}
#HP #Offre .container .l,#HP #Offre .container .r{display:block;width:90%;margin-left:0px;}
#HP #Offre .container .r {margin-top:30px;position:relative;}
#HP #Offre {background-position:bottom right;}
#HP #Eligibilite .container .r{width:auto;display:block;}
#HP #Sfrbu .container .r{ margin-left: 0px;}
#HP #Sfrbu .container .r,#HP #Sfrbu .container .l{width:100%;}
#HP #Hero .container .l{display:block;padding: 60px 5%; width: 90%;height:auto;}
#HP #Premium .container .l {width:calc(100% - 10% - 455px);vertical-align:middle;}
#HP #Premium .container .r { width: 450px;vertical-align:middle;}
#HP .r .rl,#HP .r .rr {width: calc( 100% / 2 - 24px);}
#HP #Offre .container .r blockquote p{font-size: 16px;}
#HP #Actus .container .l{width:100%;}
#HP #Logos .container .elt img{max-width:100%;}
#HP #Items{padding:60px 0%;width:100%;}
#HP #Items .container{white-space:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;}
#HP #Items .container .elt {white-space:normal;margin: 0px 5px;min-width:260px;scroll-snap-align:start}
#HP #Items h1{padding: 0% 5%;font-size: 18px;line-height: 22px;} 
#HP #Hero{ height:auto;}
#HP #Items h2{padding: 0% 5%;}
#HP .r .elem{width:100%;}
#HP .container .l strong, #HP .container h2,#HP h2{font-size: 22px;line-height: 22px;}
#HP .container .l h1 {font-size: 24px; line-height: 30px;}
#HP .container .elt {height:auto;}
#HP .container .elt h3{font-size: 20px;line-height: 27px;}
#HP .container .elt .desc { padding: 125px 10px 25px 10px; }
#HP .container .r{width: calc( 100% - 4% - 50px - 540px);}
#HP .r .descr {width: calc( 100% - 50px);margin-left:50px;}
#HP .elt .desc a {padding: 10px 20px;}
#HP #Actus.container .l,#HP #Actus .container .r {display:block;width: calc( 100% - 20px);}
#HP #Premium{width:auto;margin:60px auto 0px;}
#HP #Hero .container a:before{height:302px;}
#HP #Hero h2{font-size:26px;}
#HP #Actus .container a.pb{position:absolute;bottom:-75px;left:0;right:0;}
#HP .container.actus{margin-bottom:100px;position:relative;}
#HP #Premium .container .l,#HP #Hero .container .l{padding:60px 5% 30px;}
#HP #Actus {padding: 60px 0% 60px 5%;}
}
@media all and (max-width:769px){
#HP #Offre{background-size:185px;}
#HP #Offre .container .r{width: calc( 100% - 10%);}
#HP #Offre .container .r{margin: 20px 0px;}
#HP #Newsletter .container{width:100%;}
#HP #Actus .container .r{ width: 100%;}
#HP #Actus .container .l{margin-bottom:20px;}
#HP #Sfrbu .container .r{width: calc( 100% - 50px);margin-left:0px;margin-top:40px;}
#HP #Logos .container .elt{margin: 10px 0px ;margin-right:10px; padding: 15px; width: calc( 100% / 2 - 43px); max-width: 320px;display:inline-block;}
#HP #banniere_footer .container div{display:block;border-right:none;border-bottom:2px solid #b7b7b7;width: calc( 100% - 20px);}
#HP #Eligibilite{background:#656565;margin: 0 auto; width: 100%;}
#HP #Premium .container .r {margin: 0 auto;width:100%;padding-bottom:100px;}
#HP #Premium .container .l { display: block; width: calc(100% - 10%); }
#HP #Premium .container .l p { height: auto; }
#HP input#newsletterCheck:checked + label:after {top:0px; left:5px;}
/*.container a, .container button{margin: auto;}*/
#HP section.zone-about { flex-direction: column; padding: 40px 0; }
#HP .container .l,#HP .container .r{display:block;width:100%;}
#HP .container input {width: calc( 100% - 10%); margin-bottom: 14px;}
#HP .container .elt {width: calc( 100% - 10px); max-width: 320px; margin: 13px auto;height:auto;}
#HP .r .elem{margin:20px 0px;}
#HP .r .rl,#HP .r .rr{display:block;margin:auto 0px;width:100%;}
#HP .container label:before{left: 0px;margin-left:0px;}
#HP .container button{margin-bottom: 9px}
#HP .container label{padding: 0px 19px;}
#HP .elt.actus img { width: 100%; }
#HP .splitter { height: 1px; width: 50%; margin: 20px 0; }
#HP .container.actus .elt {margin:25px auto;height:auto;}
#HP .container div p {margin-bottom:30px;}
#HP figure {width:100%;}
#HP #Offre .container .r figcaption{height:100px;overflow:hidden;}
#HP #Newsletter .container button{display: block;margin:7px auto;}
#HP .container a:not(".suite"){margin:auto;}
#HP > p {padding:20px;}
/*#HP .container a, #HP .container button{position:absolute;}*/
#HP #Sfrbu .container a.pb{position:absolute;bottom:-75px;left:0px;right:0px;}
#HP #Sfrbu .container {position:relative;margin-bottom:100px;}
#HP .container a:not(.descr > a, .suite), #HP .container button{display:block;max-width:400px;margin:auto;}
#HP #Actus{padding:60px 5%;}
#HP #Actus{width:90%;}
#HP #Premium .container a.pb{position: absolute; bottom: 35px; left: 0; right: 0;}
#HP #Premium .container {position:relative;}
}