.Sliders { width: 1280px; max-width: calc(100% - 64px); max-height: 300px; margin: 100px auto; border-radius: 8px; overflow: hidden; position: relative; text-align: left;}
.Sliders>div:not(#CONTROL) { width: 100%; height: 300px; display: flex; position: relative;animation: aff 1s;}
.Sliders>div>.L { background-repeat:no-repeat; background-size:cover; background-color:#fff; background-position: center center; width: 400px; border-radius: 8px; overflow: hidden; z-index:1;}
.Sliders>div .L picture { display: flex; }
.Sliders>div .L source { object-fit: cover; width: 100%; height: auto; }
.Sliders>div .L img { object-fit: cover; width: 100%; height: auto;  }
.Sliders>div>.R { background:var(--clr-sfr2); width: calc(100% - 400px); padding: 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: -20px 0px 0px var(--clr-sfr2); }
.Sliders>div .R .sticker { display: block; width: fit-content; margin: 0 0 8px 0;}
.Sliders>div .R .titre { display: block; font-size: 24px; font-family: 'SFR-Bold';}
.Sliders>div .R .titre+p { display: block; font-size: 14px;}
.Sliders>div .R .AVIS>a { display: inline-block; vertical-align: middle; position: static; color: #fff;}
.Sliders>div .M>p { display: block; font-size: 14px; font-family: 'SFR-Regular'; }
.Sliders>div .M .price span { line-height: 24px; display:flex; align-self: baseline;}
.Sliders>div .B>a { width: fit-content; position: static;}
.Sliders>div .B>a:after { content:''; width: 100%; height: 300px; position: absolute; top: 0; left:0; z-index:2;}
.Sliders>div .B div { position: absolute; right: 0; bottom: 26px; right: 48px; font-size: 12px; z-index: 4; cursor: pointer; }
.Sliders>div .B .ttp [role="tooltip"] { width: 330px; }
#CONTROL { position: absolute; top: 24px; right: 24px; z-index: 4; }
#CONTROL ~ div .R .B>div{ right: 24px; }
#CONTROL button { background: #fff; width: 24px; height: 24px; border-radius: 4px; display:inline-block; vertical-align: middle; background-image: url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_noir.svg); background-size: 70%; background-repeat: no-repeat; background-position: center center; cursor: pointer;}
#CONTROL span { color: #fff; font-family: 'SFR-Bold'; width: 25px; font-size: 14px; line-height: 24px; display:inline-block; vertical-align: middle; margin: 0 4px; text-align:right; }
#CONTROL button[disabled] { background-color:#E4E4E7; background-image: url(https://static.s-sfr.fr/assets/pictos/chevron_droite_40_gris.svg); }
#CONTROL .prev { transform: rotate(180deg); }
#CONTROL .pause { background-image: url(https://static.s-sfr.fr/assets/pictos/PlayPause.svg); background-size: contain; margin: 0 16px 0 0; }
#CONTROL .play { background-image: url(https://static.s-sfr.fr/assets/pictos/play_40_noir.svg); background-size: 80%; margin: 0 16px 0 0; }


.ST { background: var(--clr-sfr); display: grid; grid-template-rows: subgrid; grid-row: span 8; position: relative; width: 290px; border-radius:8px; overflow:hidden}
.ST>div{ background: var(--clr-sfr2); position: absolute; top:0; right:0; left:0; bottom:0; display: flex; flex-direction: column; justify-content: space-between;}
.ST>div .T { height: 290px; width: 100%; background: var(--clr-black);border-radius:8px;background-repeat:no-repeat; background-size:100%; background-position: center center; transition: all .4s ease-out; } 
.ST>div:hover .T { background-size: 105%; }
.ST>div .M { padding: 24px 16px 0 16px; white-space: normal; }
.ST>div .M .sticker{ display: block; width: fit-content; margin: 0 0 16px 0; }
.ST>div .M .title{ font: 24px / normal SFR-Bold; color: #fff; }
.ST>div .M p { font: 14px / 19.6px SFR-Regular; color: #fff; margin: 8px 0 0 0;}
.ST>div .M .w { color: #fff; margin: 16px 0 0 0;}
.ST>div .M .AVIS span { color: #fff; }
.ST>div .M .AVIS span:not(.avis) { color: #fff; font-family: 'SFR-Bold'; }
.ST>div .B { padding: 16px 16px 24px 16px;display: flex; flex-grow: 1; flex-direction: column; justify-content: end; }
.ST>div .B .ttp { position: relative; display: flex; justify-content: end; margin: 0 0 16px 0; }
.ST>div a { position: static;}
.ST>div a:after { content: ''; position: absolute; top:0; bottom:0; left:0; right:0; width:100%; height: 100%; }

@media(max-width: 1100px){
    .Sliders { width: 486px; max-height: 632px; }
    #CONTROL { top: 258px; right: 16px;}
    #CONTROL ~ .Slide>.R { padding: 64px 16px 16px 16px; }
    #CONTROL ~ div .R .B>div { right: auto; margin: 0 0 0 auto; width:fit-content; }
    .Sliders>div:not(#CONTROL) { height: 640px; height: auto; flex-direction: column; }
    .Sliders>div>.L { width: 100%; height: 243px; }
    .Sliders>div>.R { width: 100%; height: calc(100% - 243px); padding: 16px; gap: 16px; /*justify-content: unset;*/ box-shadow: 0px -20px 0px 0px var(--clr-sfr2);  }
    .Sliders>div .R .titre { font-size: 18px; }
    .Sliders>div .B { display: flex; flex-direction: column; gap: 24px}
    .Sliders>div .B>div { position: sticky; justify-content: end;}
    .Sliders>div .B a { width: 100%;}
    .Sliders>div .B>a:after { height: 100%; }
}
@media(max-width: 768px){ 
    #CONTROL { top: 200px; }
    #CONTROL ~ .Slide>.R { padding: 56px 16px 16px 16px; }
    .Sliders{max-width:calc(100% - 32px);}
    .Sliders>div:not(#CONTROL) { height: 556px }
    .Sliders>div>.L { height: 184px; }
    .Sliders>div>.R { height: calc(100% - 184px); }
    .Sliders>div .B { gap: 16px}
}

@keyframes aff { 0% { opacity: .7; } 100% { opacity: 1; } }