/* ---------- Structure commune du carrousel ---------- */

.section-carousel .js-carousel{width:100%;max-width:1312px;margin:40px auto 0;justify-self:center;display:grid;gap:40px;grid-auto-flow:column;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;align-items:flex-start;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-padding-left:16px;overscroll-behavior-x:contain}
.section-carousel .arrows{display:none!important;justify-content:flex-end!important}
.section-carousel:has( .list > li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ) .arrows{display:flex!important;}
.section-carousel:has( .list > li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ) .js-carousel{margin-top:24px}
.section-carousel .arrows button{width:40px;height:40px;background:url(https://static.s-sfr.fr/assets/pictos/fleche_DROITE_40_noir.svg) no-repeat center;background-size:24px;border:solid 1px #131316;margin-left:-1px;cursor:pointer}
.section-carousel .arrows button[disabled]{opacity:.4;cursor:default}
.section-carousel .arrows button.left{transform:rotate(180deg)}
.section-carousel .js-carousel::-webkit-scrollbar{display:none}
.section-carousel .js-carousel .list{display:grid;gap:40px;grid-auto-flow:column;padding:0 16px;margin-right:auto}
.section-carousel .list > li{position:relative;width:290px;background:#fff;border:none;padding:24px 16px;display:grid;grid-template-rows:subgrid;row-gap:16px;scroll-snap-align:start;scroll-snap-stop:normal;overflow: hidden;}
.section-carousel .list > li[hidden]{display:none}

/* ---------- Spécifique #devices ---------- */
#devices .container{display:grid;grid-template-columns:minmax(0,1280px);justify-content:center;padding-left:16px;padding-right:16px}
#devices .list > li{grid-row:span 3}
#devices .list > li:has(:hover,:focus-visible) .visual img{transform:scale(1.1)}
#devices .js-carousel .card{justify-items:inherit}
#devices .top{align-content:flex-start}
#devices .top .colors{position:absolute;left:-10px;top:50%;transform:translateY(-50%);display:grid;gap:8px;border:none;margin:0;padding:10px;z-index:2}
#devices .top .colors label{border:1px solid #70707B;width:16px;height:16px;border-radius:100%;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
#devices .top .colors label:before{content:"";position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);aspect-ratio:1 / 1;border-radius:50%}
#devices .top .colors label.unavailable:after{content:"";position:absolute;border-top:2px solid #131316;width:calc(100% + 10px);left:50%;top:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg)}
#devices .top .colors input{position:absolute}
#devices .top .colors input:focus-visible + label{outline:2px auto #5A55DF;outline-offset:6px}
#devices .top .colors input:not(.close):focus-visible + label span{position:absolute;display:block;line-height:28px;color:#fff;background:#131316;padding:0 8px;left:calc(100% + 14px);white-space:nowrap;width:auto;height:auto;clip:initial}
#devices .top .colors input:checked + label:before{border:2px solid #5A55DF}
#devices .top .visual{position:relative;display:flex;align-items:center;justify-content:center}
#devices .top .visual img{height:185px;width:auto;transition:.2s ease-out}
#devices .top .network{background:url(https://static.s-sfr.fr/media/RED/icones/5g.svg) center no-repeat;position:absolute;top:0;right:0;width:24px;height:24px;background-size:32px}
#devices .top .stickers{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:6px;column-gap:8px}
#devices .top .sticker:first-child{margin-top:16px}
#devices .top .sticker:only-child{padding:2px 8px}
#devices .top .sticker{padding:2px 5px;color:#fff;background-color:#5A55DF;font-weight:600;width:fit-content;height:fit-content;text-align:left}
#devices .top .sticker.green{background-color:#067647}
#devices .top .sticker.green2{background-color:#75E0A7;color:#131316}
#devices .middle{display:flex;flex-direction:column;justify-content:space-between}
#devices .middle h3{font-size:14px;font-weight:550;margin:0}
#devices .middle a{text-decoration:none}
#devices .middle a strong{font-size:24px;line-height:120%;display:block}
#devices .middle a:after{content:'';display:block;position:absolute;inset:0;z-index:1}
#devices .middle .rating{margin-top:auto;padding-top:8px;display:flex;align-items:center}
#devices .middle .rating .stars{width:80px;height:20px;background:url(https://static.s-sfr.fr/media/EmptyStars.svg) no-repeat center center;margin:0 8px 0 4px}
#devices .middle .rating mark{height:20px;background:url(https://static.s-sfr.fr/media/FullStars.svg) no-repeat left top;background-size:80px 20px;display:block}
#devices .middle .storage{display:flex;position:relative;z-index:2;align-items:center;margin:16px 0 0;padding:0;border:1px solid #A0A0AB}
#devices .middle .storage input{display:block;position:absolute;opacity:0}
#devices .middle .storage input:focus-visible + label{outline:0;box-shadow:inset 0 0 0 5px #000}
#devices .middle .storage label{line-height:48px;width:100%;text-align:center;position:relative;cursor:pointer}
#devices .middle .storage label:not(:last-child){border-right:1px solid #A0A0AB}
#devices .middle .storage input:checked + label{cursor:default;font-weight:700}
#devices .middle .storage input:checked + label:before{content:"";position:absolute;top:-1px;left:-1px;display:block;width:calc(100% + 2px);height:calc(100% + 2px);border:3px solid #00e094;z-index:1}
#devices .middle .storage input:checked + label:after{content:"";position:absolute;top:0;right:0;display:block;width:28px;height:28px;background:url(//static.s-sfr.fr/media/red-icon-check-triangle-2.svg) no-repeat center;background-size:28px}
#devices .bottom .price{font:inherit}
#devices .bottom.priceFrom .price:before{content:'\00E0\00A0partir de';display:block}
#devices .bottom .price b{font-size:32px;line-height:32px}
#devices .bottom .price .refunded{font-size:14px;line-height:140%}
#devices .bottom .price .refunded b{font-size:24px;line-height:120%}
#devices .bottom .price small{font-size:14px}
#devices .bottom .price .s{position:relative;text-decoration:line-through}
#devices .bottom .price .s:after{content:'*';position:absolute;top:0;color:#5A55DF;font-size:16px;font-weight:600}
#devices .bottom .discount{margin-top:16px}
#devices .bottom .discount p{color:#5A55DF;font-weight:700}
#devices .bottom .discount > ul{display:grid;gap:8px;margin-top:8px}
#devices .r-but{margin:40px auto 0;display:block;text-align:center;width:fit-content;text-decoration:none}

@media (max-width:1023px){
    .section-carousel .js-carousel .list{gap:16px}
    .section-carousel .arrows{display:flex!important;}
    .section-carousel:not(:has(.list > li:not([hidden]) ~ li:not([hidden]))) .arrows{display:none!important}
    .section-carousel .list > li{scroll-snap-align:center;}
    #devices .container{grid-template-columns:minmax(0,486px)}
    #devices .js-carousel .list > li:has(:hover,:focus-visible) .visual img{transform:none}
    #devices .r-but{width:100%;margin-top:24px}
}