:root{
    --clr-pro:#3F3F46;
}
body { font-size: 14px; }

.mbS { margin-bottom: 8px; }
.mbM { margin-bottom: 16px; }
.mbL { margin-bottom: 32px; }
.mbXL { margin-bottom: 40px; }

.inv { flex-direction: row-reverse; }

.TOP { margin: 0 auto 32px auto; max-width:1280px; width: calc(100% - 64px); text-align: center; }

.recap { overflow: hidden; }
.recap>div { background: var(--clr-pro); color: #fff; box-shadow: -24px 0px 0px 24px var(--clr-pro); }
.recap>.equal { background: transparent; color: var(--clr-black); box-shadow: none; }
.recap>div:not(:first-child):after { box-shadow: 0px 0px 0px 10px var(--clr-pro); box-shadow: -20px 0px 0px 10px var(--clr-pro); box-shadow: none; }
.recap>div:not(:first-child):before { background: #fff; }
.recap>div.plus:after {background-image: url(https://static.s-sfr.fr/assets/pictos/picto_plus_blanc.svg);  }

.Services { background:var(--clr-pro); color: #fff; padding: 80px 0;}
.Services>div{ width:calc(100% - 64px); max-width: 1280px; margin: 0 auto;}
.Services h2 { margin: 0 0 40px 0; }
.Services .cont{ display: flex; gap: 40px; }
.Services .cont div{ width: 50%; }
.Services .cont div>span { font-size: 24px; font-family: 'SFR-Bold'; display: block; margin: 0 0 24px 0;}
.Services .cont ul { list-style: none; font-size: 14px; column-count: 2; margin: 0 0 40px 0;}
.Services .cont ul li { padding: 0 0 0 48px; margin: 0 0 24px 0; position: relative; }
.Services .cont ul li img { position: absolute; left: 0; top: calc(50% - 20px); width: 40px; }
.Services .cont ul li span { font-family: 'SFR-Bold'; display: block; margin: 0 0 4px 0; }
.Services .cont ul li p { color: #D1D1D6; }
.Services .cont a { width: fit-content; }
.Services .cont .illu { height: 465px; background-position: center center; background-size: cover; border-radius: 8px;}

.carte-offre { overflow: hidden; color: #fff; }
.carte-offre .T { position:relative; background-color: var(--clr-pro); color: #fff; /*box-shadow: 0px -24px 0px 24px var(--clr-pro);*/ overflow: hidden; }
.CP.Mini .T { background-color: transparent; color: var(--clr-black); }
.carte-offre .T + .iconotexts { background-color: #fff; box-shadow: 0 0 0px 24px #fff; z-index: 1; color: var(--clr-black); }
.carte-offre .techno { color: #fff; display: block; position: relative; }
.carte-offre .P { border-bottom: none; }
.carte-offre .eng { z-index: 1; }
bol-cartouche-client-box { z-index:1; }
.carte-offre .g { background: #70707b; /*box-shadow: 0px -208px 0px 233px var(--clr-pro);*/ z-index:1; } 
.carte-offre .list-check { color: var(--clr-black); box-shadow: 0px 24px 0px 24px #fff; background: #fff; border-top:none;} 
.carte-offre .sticker { z-index: 1; }
.carte-offre:before { content:''; background: var(--clr-pro); position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 345px; }

.Cartes { background:var(--clr-pro); color: #fff; padding: 80px 0;}
.Cartes>div{ width:calc(100% - 64px); max-width: 1280px; margin: 0 auto; position: relative;}
.Cartes h2 { margin: 0 0 8px 0;}
.Cartes h2+p { font-size: 14px; margin: 0 0 40px 0;}
.Cartes .cont{ display: flex; gap: 40px; display: grid ;grid-auto-flow: column; grid-template-rows: repeat(1, 230px); gap: 40px; white-space: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin: 24px -32px 0 0; position: relative; justify-content: left;}
.Cartes .CP { color: var(--clr-black); grid-row: span 6; width: 290px; }
.Cartes .CP .T { background: var(--clr-bg); margin: -24px -24px 0 -24px; padding: 60px 0 0 0;  }
.Cartes .CP p { font-size: 14px; }
.Cartes .CP:last-child { margin: 0 34px 0 0; }
.Cartes .nav { display: flex; justify-content: end;}
.Cartes .nav button{width: 40px; height: 40px; border-radius: 8px;border: 1px solid #131316; cursor: pointer;display:flex;align-items:center;justify-content:center; background: transparent; filter: invert(1); margin: 0 0 0 8px;}
.Cartes .nav button.prev:after {content: ''; background-image:URL(https://static.s-sfr.fr/assets/pictos/fleche_GAUCHE_40_noir.svg);background-size:contain; width: 24px; height: 24px;}
.Cartes .nav button.next:after { content: ''; position: absolute; background-image:url(https://static.s-sfr.fr/assets/pictos/fleche_DROITE_40_noir.svg);background-size:contain; width: 24px; height: 24px;}
#offerfixecard_sfr_fibre_power_pro { grid-row: span 5; }
.CP .T .img-central{ width:100px; }

#Pourprofiterdeloffre { padding: 40px 0; background:var(--clr-pro); }
#Pourprofiterdeloffre h2 { color: #fff; }
#Pourprofiterdeloffre .sous-titre{display:grid;gap:40px;margin:0;height:100%;grid-template-rows:1fr 1fr}
#Pourprofiterdeloffre .bloc{background:#fff;border-radius:8px;padding:24px}
#Pourprofiterdeloffre .pres ol{list-style-type:decimal;display:flex;gap:24px}
#Pourprofiterdeloffre .pres ol li{width:100%;list-style-type:none;text-align:center}
#Pourprofiterdeloffre .pres .connect a{margin:24px auto 0;width:fit-content}
#Pourprofiterdeloffre .pres .connect b{font-size:18px}
#Pourprofiterdeloffre .pres .connect{text-align:center}
#Pourprofiterdeloffre .pres .bloc{display:grid;align-items:center}
#Pourprofiterdeloffre .pres .step{background:#181818;margin:0 auto 24px;width:24px;height:24px;border-radius:100%;font:14px / 24px SFR-Bold;color:#fff}

.DualContent { display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1280px; margin: 40px auto; width: calc(100% - 64px);}
.DualContent a { width: fit-content; }
.DualContent p { font-size: 14px; }
.DualContent .R { display: grid; gap: 24px; background: #fff; padding: 24px; border-radius: 8px;}
.DualContent ul {display: grid;grid-template-columns: repeat(1, 1fr); gap: 16px;text-align: left;align-items: flex-start;list-style-type: none; }
.DualContent li { display: grid; align-items: start; grid-template-areas: "a b" "a c"; gap: 4px 16px; justify-items: flex-start; grid-template-rows: auto; width: fit-content; grid-row: span 3; }
.DualContent li img, .DualContent li p.title:last-child { grid-row: span 2 / span 2; align-self: center; }
.DualContent li .title { font: 14px/normal SFR-Bold; }
.DualContent li p:not(.title) { grid-area: c; }
.DualContent>div { display: flex; gap: 40px; flex-direction: column; }
.DualContent sup { font-size: 10px; }
.DualContent picture { display: flex; }
.DualContent picture img { max-width: 100%; height: auto; border-radius: 8px; }

.ListNumbered { max-width: 1280px; width: calc(100% - 64px); margin: 40px auto; }
.ListNumbered h2 { margin: 0 0 32px 0;}
.ListNumbered .W { display: flex;justify-content: center;align-items: baseline;margin-bottom: 40px; background: #fff; padding: 24px; border-radius: 8px; }
.ListNumbered ol {position: relative; list-style: none;counter-reset: counter; display: flex; gap: 24px; width: 100%; justify-content: space-around;}
.ListNumbered li {position: relative; display: flex; flex-direction: column;counter-increment: counter; padding: 32px 0 0 0; text-align: center;}
.ListNumbered li:after {content: counter(counter);position: absolute;left: 0;text-align: center;font-family: SFR-Bold;font-weight: normal;width: 24px;height: 24px;line-height: 24px;border-radius: 50%;background-color: var(--clr-black);color: #fff;}
.ListNumbered li>span {font-family: SFR-Bold;font-weight: normal;}
.ListNumbered li>p {font-size: 14px;}
.ListNumbered li>a {width: fit-content; margin: 8px auto 0 auto;}
.ListNumbered li:after {top: 0;left: 0;right: 0;margin: auto;font-size:14px;}
.ListNumbered li::before {width: 100%;height: 2px;left: 50%;top: 11px;}

.Media .pres .sous-titre { color: var(--clr-black); }
.Media #FilAriane li:not([aria-current="page"]):after { filter:none; }

/* CSS STUDIO */
.Bento{display: flex; flex-direction: column; margin: 0px auto 40px; width: calc(100% - 32px); max-width: 1280px; gap: 40px; }
.Bento>div{display: flex; gap: 16px; }
.Bento>div>div{ display: flex; flex: auto; border-radius: 8px;}
.Bento>div>div:last-of-type{  flex-direction: column; gap: 16px;}
.Gyosa{position: relative; background-color: #3F3F46; overflow: hidden;}
.Gyosa>picture>img{border-radius: 8px; overflow: hidden;}
.Gyosa>picture>img:hover{transition: 0.5s ease-out transform;transform: scale(1.05);}
.Gyosa>div{display: flex; flex-direction: column; justify-content: space-between; padding: 24px; flex: 1;}
.Gyosa>div>div{color: #fff; display: flex; flex-direction: column; gap: 16px;}
.Gyosa>div>div>p{width: fit-content;}
.Gyosa>div>div>div>p{font-size: 14px;}
.Sashimi{background-color: #3F3F46; display: flex; border-radius: 8px; color: #fff; flex: 1; position: relative;}
.Sashimi>div{display: flex;flex-direction: column;justify-content: space-between;padding: 24px;}
.Sashimi>div>div:first-of-type{display: flex; flex-direction: column; gap: 16px;}
.Sashimi>div>div>p{width: fit-content;}
.Sashimi>div>div>div>p{font-size: 14px;}
.Sushi{background-image: url(@{linkImg3}); background-repeat: no-repeat; background-size:cover; border-radius: 8px; display: flex; flex: 1; position: relative;}
.Sushi>div{margin: 8px; margin-left: 240px; width: 100%; padding: 24px; color: #fff; background-color: rgba(19, 19, 22, 0.80); display: flex; flex-direction: column; justify-content: space-between; border-radius: 8px;}
.Sushi>div>div:first-of-type{display: flex; flex-direction: column; gap:16px; padding-bottom: 16px;}
.Sushi>div>div>p{width: fit-content;}
.Sushi>div>div>div>p{font-size: 14px;}
.Gyosa .ttpContainer{display: flex; align-items: end; padding-bottom:8px;}
.Sushi .ttpContainer{display: flex; justify-content: end; padding-bottom:8px;}
.Bento .ttp>button { background-image: url(//static.s-sfr.fr/assets/pictos/aide_plein_40_blanc.svg);}
 
.BentoLink { color: #fff; font-size: 24px; text-decoration: none; font-family: "SFR-Bold";}
.BentoLink:after { content:''; position: absolute; width:100%; top: 0; left: 0; height: 100%; z-index: 5;}


.MEABannerSlider{display:flex;background-color:#D90D25;margin:40px auto;width:calc(100% - 32px);max-width:1280px;border-radius:8px;overflow:hidden}
.MEABannerSlider>picture{height:220px}
.MEABannerSlider>picture>img{object-fit:cover}
.MEABannerSlider>div{padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;color:#FFF}
.MEABannerSlider>div>div{display:flex;flex-direction:column;gap:8px}
.MEABannerSlider>div>div>p{font-size:14px}
.MEABannerSlider>div>div:last-of-type{flex-direction:row;align-self:flex-start}
.MEABannerSlider>div>div>a{width:fit-content;display:flex;align-items:center;justify-content:center}

.ProService{background:#3F3F46;padding:80px 0px}
.ProService>div{margin:0px auto;width:calc(100% - 32px);max-width:1280px;background:#3F3F46;display:flex;flex-direction:column;gap:40px}
.ProService>div>h2{color:#FFF}
.ProService>div>div{display:flex;gap:40px}
.ProService>div>ul{display:flex;gap:40px}
.ProService>div>div>a:focus-visible{outline:2px solid #fff}
.ProService>div>div:first-of-type{gap:8px;justify-content:end;display:none}
.ProService>div>div>button{height:40px;width:40px;background:transparent;border:1px solid #fff;border-radius:8px}
.ProService>div>div>button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ProService>div>div>button>img{height:24px;width:24px}
.ProService>div>ul>li>img{width:100%;min-width:270px;max-width:290px;border-radius:8px 8px 0px 0px;height:120px;object-fit:fill}
.ProService>div>ul>li{background-color:#fff;border-radius:8px;width:100%;min-width:270px;display:flex;flex-direction:column}
.ProService>div>ul>li>div{display:flex;flex-direction:column;height:100%;justify-content:space-between;align-items:center;padding:24px;gap:16px}
.ProService>div>ul>li>div>p{display:flex;font-family:SFR-Bold;flex-wrap:wrap;align-self: start}

.CardDisplay{display:flex;flex-direction:column;gap:40px;margin:0px auto 40px;width:calc(100% - 32px);max-width:1280px;padding-top:80px}
.CardDisplay>ul{display:flex;gap:40px}
.CardPromo{padding:16px;background-color:#fff;border-radius:8px;display:flex;flex-direction:column;width:100%;gap:16px}
.CardPromo>picture>img{background-color:gray;border-radius:8px;object-fit:cover}
.CardPromo>div{display:flex;flex-direction:column;gap:16px;justify-content:space-between;height:100%}
.CardPromo>div>div:first-of-type{display:flex;flex-direction:column;gap:4px}
.CardPromo>div>div:last-of-type{display:flex;width:100%;justify-content:center;align-self:end}
.CardPromo>div>div>a{width:fit-content}
.CardPromo>div>div>p{font-size:14px}

.HeroBanner{display: flex; justify-content: center; align-items: center; background: #D90D25; padding: 8px;}
.HeroBanner>div{margin: 80px 0px; width: calc(100% - 32px); max-width: 1280px; background-size: cover; height: 468px; justify-content: end; align-items: end; border-radius: 8px; display: flex; flex: 1;}
.HeroBanner>div>img{display: none;}
.HeroBanner>div>div{padding: 24px; margin-right: 8px; margin-bottom: 8px; color: #fff; background-color: rgba(19, 19, 22, 0.80); display: flex; flex-direction: column; height: fit-content; width: 596px; gap: 24px; border-radius: 8px;}
.HeroBanner>div>div>div{display: flex;flex-direction: column; gap: 8px;}
.HeroBanner .heroTitle{font:normal 40px/60px SFR-Bold; color:#FFF;}
.HeroBanner>div>div>div>p{color: #D1D1D6;font-size: 14px;}
.HeroBanner>div>div>a{width: fit-content;}
.HeroBanner>div>div>a:focus-visible{outline:2px solid #fff}

.VideoCard{ display: flex; flex-direction: column; gap: 40px; margin: 0px auto 40px; width: calc(100% - 32px); max-width: 1280px; } 
.VideoCard>div{ display: flex; flex-direction: column; gap: 24px; padding: 24px; background-color: #fff; border-radius: 8px; } 

.VideoComponent{ display: flex; gap: 40px; } 
.VideoComponent>figure{ display: grid; gap: 16px; font: 12px / normal SFR-Regular; justify-items: start; } 
.VideoComponent>figure>video{ object-fit: contain; overflow-clip-margin: content-box; overflow: clip; border-radius: 8px; height: 336px; max-width: 598px; } 
.VideoComponent>div{ display: flex; flex-direction: column; flex:1; gap: 24px; } 
.VideoComponent>div>div{ display: flex; align-items: center; gap: 8px } 
.VideoComponent>div>div>div>p:first-of-type{ font-family: SFR-bold; } 

.VideoTranscript{ display: flex; flex-direction: "column"; gap: 16px; } 
.VideoTranscript>div{ display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid #70707B; border-bottom: 1px solid #70707B; padding: 12px 0px; cursor: pointer; } 
.VideoTranscript>details{ width: 100%; }

.ServiceSection{ display: flex; flex-direction: column; gap: 40px; margin: 0px auto 80px; width: calc(100% - 32px); max-width: 1280px; } 
.ServiceSection>div>p{ font-size: 14px; } 
.ServiceSection>div:last-of-type{ display: flex; flex:1; gap: 40px; color: #D1D1D6; list-style-position: inside; } 
.ServiceSection>div>picture{ display: flex; flex: 1; width: 100%; height: 466px; } 
.ServiceSection>div>picture>img{ border-radius: 8px; } 
.ServiceSection>div>ul{ display: flex; flex-direction: column; flex:1; gap: 40px; } 
.ServiceSection>div>ul>div{ width: fit-content; } 
.ServiceSection>div>ul>li{ display: flex; flex-direction: column; gap: 16px; background-color: #3F3F46; padding: 24px; border-radius: 8px; } 
.ServiceSection>div>ul>li>a:focus-visible{ outline: 2px solid #FFF; } 
.ServiceSection>div>ul>li>div{ display: flex; flex-direction: column; gap: 16px; } 
.ServiceSection>div>ul>li>div>div{ display: flex; flex-direction: column; gap: 8px; } 
.ServiceSection>div>ul>li>div>div>h3{ color: #fff; } 
.ServiceSection>div>ul>li>div>div>p{ color: #D1D1D6; font-size: 14px; }
.ServiceSection>div>ul>li>div>div>ul{ list-style-type: disc; } 
.ServiceSection>div>ul>div>.link { display: block; width: fit-content; }
.ServiceSection>div>ul>div>.link:last-child { margin: 16px 0 0 0; }
.ServiceSection .POPIN a {display: block; width: fit-content; margin: 0 0 0 auto;}
.ServiceSection .POPIN .titre {font: 24px / 28px "SFR-Bold"; margin: 0 0 24px;}
.ServiceSection .POPIN .ssTitre {font: 16px/normal 'SFR-Bold'; margin: 16px 0;}
.ServiceSection .POPIN hr {margin: 24px 0;}
.ServiceSection .POPIN ul {columns: 4; margin-bottom: 24px; list-style-type: none;}
.ServiceSection .POPIN ul ul{columns: 1; break-inside: avoid-column; margin:0;}
.ServiceSection .POPIN .appels-list-index {font-family: "SFR-bold";margin-top: 18px;}
.ServiceSection .POPIN .appels-list-index:first-child {margin-top: 0px;}
.ServiceSection .POPIN .d-topList {break-before: column; margin: 0;}
.ServiceSection .POPIN .footer-popin {padding: 24px 0;margin-bottom: -25px;position: sticky;bottom: -25px;background: white;width: 100%;}
.ServiceSection button.link3 {width: fit-content;}

.Stepper{display:flex;flex-direction:column;gap:40px;margin:40px auto;width:calc(100% - 32px);max-width:1280px}
.Stepper>p{margin:0px}
.Stepper>ul{display:flex;background:#FFF;border-radius:8px;padding:24px;flex-wrap:nowrap;margin:0px;width:100%}
.Stepper>ul>li{display:flex;flex-direction:column;justify-content: flex-start;align-items:center;flex:1;gap:8px;position:relative;}
.Stepper>ul>li>p{font-family:'SFR-Bold';text-align:center;font-size:14px}
.Stepper>ul>li>p+p{display: block;font-family:'SFR-Regular';}

.SectionList{ display: flex; flex-direction: column; gap: 40px; margin: 0px auto 80px; width: calc(100% - 32px); max-width: 1280px; } 
.SectionList>ul{ display: flex; gap: 40px; } 
.SectionList>ul>li{ display: flex; flex-direction: column; gap: 16px; flex: 1; background-color: #3F3F46; padding: 24px; border-radius: 8px; } 
.SectionList>ul>li>div{ display: flex; flex-direction: column; gap: 8px; } 
.SectionList>ul>li>div>h3{ color: #FFF; } 
.SectionList>ul>li>div>p{ color: #D1D1D6; }

.ListSection{ display: flex; flex-direction: column; gap: 40px; margin: 0px auto 80px; width: calc(100% - 32px); max-width: 1280px; } 
.ListSection>ul{ display: flex; flex: 1; gap: 40px; } 
.ListSection>ul>li{ display: flex; flex-direction: column; gap: 16px; flex: 1; background-color: #fff; padding: 24px; border-radius: 8px; } 
.ListSection>ul>li>ul{ display: flex; flex-direction: column; gap: 16px; }
.ListSection>ul>li>ul>li{ display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #A0A0AB; padding-bottom: 16px; } 
.ListSection>ul>li>ul>li>p{ font-family: SFR-Bold; font-size: 14px; } 
.ListSection>ul>li>ul>li:last-of-type{ border-bottom: none; padding-bottom: 0px; } 
.ListSection>div{ background-color: #FFF; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; gap: 24px; } 
.ListSection>div>div{ display: flex; flex-direction: column; gap: 8px; } 
.ListSection>div>div:last-of-type{ display: flex; flex-direction: row; gap: 40px; }
.ListSection>div>div>div{ display: flex; flex: 1; gap: 8px; }
.ListSection>div>div>div>div{ display: flex; flex-direction: column; gap: 4px; } 
.ListSection>div>div>div>div>p{ font-family: SFR-Bold; } 
.ListSection>div>div>div>div>div{ display: flex; flex-direction: column; gap: 16px; } 
.ListSection>div>div>div>div>div>p{ font-size: 14px; }

.MobileClassTab{margin:0px auto 80px;width:calc(100% - 32px);max-width:1280px;display:flex;flex-direction:column;gap:40px}
.MobileClassTab>div{display:flex;flex-direction:column;gap:8px}
.MobileClassTab>div>p{font-size:14px}
.MobileClassTab table{width:100%;border-spacing:0px;text-align:left;overflow:hidden;border-radius:8px}
.MobileClassTab thead{background-color:#26272B;color:#fff}
.MobileClassTab th,td{font-family:SFR-bold;padding:16px;font-size:14px}
.MobileClassTab th{border:1px solid #70707B}
.MobileClassTab table tr td:first-child{border:1px solid #70707B;border-bottom:none}
.MobileClassTab table tr td:last-child{border:1px solid #70707B;border-bottom:none;border-left:none}
.MobileClassTab table tr:last-child td:first-child{border:1px solid #70707B;border-bottom-left-radius:8px}
.MobileClassTab table tr:last-child td:last-child{border:1px solid #70707B;border-bottom-right-radius:8px;border-left:none}
.MobileClassTab>table>tbody>tr>td>p:last-of-type{font-family:SFR-Regular}
.MobileClassTab tbody > tr:nth-of-type(odd){background-color:#FFF}

.Modernise{display:flex;padding:24px;background-color:#fff;gap:40px;margin:0px auto 40px;width:calc(100% - 32px);max-width:1280px; border-radius: 8px;}
.Modernise>picture>img{height:282px}
.Modernise>div{display:flex;flex-direction:column;gap:16px}
.Modernise>div>div{display:flex;flex-direction:column;gap:16px}
.Modernise .ModerniseButtons{flex-direction:row;align-self:flex-start}
.Modernise>div>div>p:last-of-type{font-family:SFR-bold}
.Modernise>div>div>a{width:fit-content;display:flex;align-items:center;justify-content:center}

.Ben{ display: flex; flex-direction: column; margin: 0px auto 40px; width: calc(100% - 32px); max-width: 1280px; gap: 40px; } 
.Ben>div{ display: flex; gap: 40px; } 
.MainCard{ display: flex; height: 738px; width: 400px; flex-direction: column; justify-content: flex-end; border-radius: 8px; background-image: url(//static.s-sfr.fr/media/sfr-pro/visuels/AvantagePro.webp); background-size: cover; box-shadow: 0px 8px 16px 0px rgba(24, 24, 24, 0.02); padding: 24px; gap: 24px; color: #fff; } 
.MainCard>div{ display: flex; flex-direction: column; gap: 16px; } 
.MainCard>div>p{ font-size: 14px; color: #D1D1D6; } 
.MainCard>div>a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; } 
.BentoCard{ display: flex; flex: 1; border-radius: 8px; color: #fff; flex-direction: column; justify-content: end; padding: 24px; background: #3F3F46; position: relative; } 
.BentoCard>div{ display: flex; flex-direction: column; gap: 16px; } 
.BentoCard>img{ top: 44px; right: 44px; position: absolute; height: 108px; width: 108px; } 
.CardContainer{ display: flex; flex: 1; gap: 40px; } 
.CardContainer>div{ display: flex; flex-direction: column; gap: 40px; }

bol-tv-channels .bloc_SubTitle .wrapper {margin: -24px auto 0;}
bol-tv-channels .bl_contenu {background: var(--clr-black); max-width: 100%;padding: 40px 0;}
bol-tv-channels .bl_contenu .contenu_bloc {padding: 0;background: none;color: white; width: calc(100% - 64px);} 
bol-tv-channels .bl_contenu .title_bloc {padding: 0;}
bol-tv-channels .bl_contenu .Text500 {color: white; margin-bottom: 40px;}
bol-tv-channels h3 {font: normal 32px/48px SFR-Bold;}
bol-tv-channels .title_bloc h3 {margin-bottom: 8px;}
bol-tv-channels .bl_contenu .search_tv {background: #26272B;border-radius: 8px;}
bol-tv-channels .bl_contenu form label.Text500 {display: block; margin-bottom: 8px; font: 14px/normal SFR-Bold;}
bol-tv-channels .search_tv .bl_input .bl_champ {margin-right: 0;}
bol-tv-channels .bl_champ .autocomplete-block {width: 100%;}
bol-tv-channels .autocomplete-block input {border: none;}
bol-tv-channels .search_tv .bl_input .submit {background: white;border-radius: 0 8px 8px 0;color: var(--clr-black);padding: 8px;font: 12px / normal SFR-Bold;letter-spacing: 0;}
bol-tv-channels .search_tv .bl_input {margin-bottom: 24px;}
bol-tv-channels .category_list li a {font: 14px / normal SFR-Regular;padding: 8px 16px;background: #FFF;}
bol-tv-channels .category_list li a:hover {background: #D1D1D6;}

.pbXL {padding-bottom: 40px;}
.ptXL {padding-top: 40px;}

.addons_bloc{padding-bottom: 24px;}

.addons_bloc {background: var(--clr-pro); padding: 40px 0 80px;}
.addons_bloc .wrapper {margin: 0 auto;}
.addons_bloc h2 {color: #FFF;}
.addons_bloc .addons-card {box-shadow: none;}

.pres .addons_bloc {padding: 0px 0px 24px;}

/* FIN CSS STUDIO */

/* Surcharges */
#Configurateur .it { font-style: normal; }
#Configurateur .message.i.mt8 { margin-top: 24px; }


/* Fin Surcharges */

@media (max-width: 1100px) {
    .TOP { max-width: 486px; width: auto; }
    
    .Cartes .cont{ gap: 16px; }

    .recap>div { box-shadow: 0px -24px 0px 24px var(--clr-pro); }
        
    .DualContent { gap: 16px; grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 486px; width:calc(100% - 32px); margin: 24px auto;}
    .DualContent picture img { width: 100%; border-radius: 8px; object-fit: cover;}
    .DualContent a { width: 100%; }
    .DualContent>div { gap: 24px; }
    .DualContent picture img { height: 246px; }
    
    .Services { padding: 48px 0;}
    .Services>div{width:calc(100% - 32px); max-width: 486px;}
    .Services .cont { flex-direction: column; }
    .Services .cont div { width: auto; }
    .Services .cont ul { column-count:1; }
    .Services .cont .illu { height: 246px; }

    .Bento{max-width: 486px; gap: 24px;}
    .Bento>div{flex-direction: column;}
    .Gyosa{flex-direction: column;}
    .Gyosa>div{padding: 16px;}
    .Gyosa>picture>img{width: 100%;height: 164px;object-fit: cover;}
    .Gyosa>div>div:last-of-type{padding-bottom: 16px;}
    .Sashimi>picture>img{width: 150px;height: 100%;}
    .Sashimi>div{padding: 16px;}
    .Sushi>div{margin-left: 155px; padding: 16px;}
    .BentoLink {font-size: 18px;}
    
    .MEABannerSlider{flex-direction:column;max-width:486px; margin:24px auto;}
    .MEABannerSlider>div{padding:16px;}
    .MEABannerSlider>div>div:last-of-type{display:flex;flex-direction:column;gap:16px;width:100%}
    .MEABannerSlider>div>div>a{width:100%}
    .MEABannerSlider>picture{height:200px}
    .MEABannerSlider>picture>img{height:200px; width: 100%;}
    
    .ListNumbered { max-width: 486px; width: calc(100% - 32px); margin: 24px auto; }
    .ListNumbered ol { flex-direction: column; }
    .ListNumbered li { text-align: left; padding: 0 0 0 48px; }
    .ListNumbered li:after { right: auto; }
    .ListNumbered li>a { margin: 8px auto 0 0; }
    
    .ProService{padding:40px 0px}
    .ProService>div{gap:24px}
    .ProService>div>div:first-of-type{display:flex}
    
    .CardDisplay{max-width:486px;padding-top:40px}
    .CardDisplay>ul{flex-direction:column;gap:16px}
    .CardPromo>picture>img{height:166px}
    
    .HeroBanner>div{margin: 40px 16px; flex-direction: column; max-width: 486px; background: none; height: auto;}
    .HeroBanner>div>img{display: flex;object-fit: cover;border-radius: 8px 8px 0px 0px;}
    .HeroBanner>div>div{width: auto; margin: 0px; border-radius: 0px 0px 8px 8px; background-color: #3F3F46; gap: 16px}
    .HeroBanner>div>div>div{gap: 4px}
    .HeroBanner .heroTitle {font: normal 24px / 36px SFR-Bold;}
    
    .VideoCard{ max-width: 484px; } 
    .VideoComponent{ flex-direction: column-reverse; gap: 24px; } 
    .VideoComponent>figure>video{ width: 100%; height: 100%; }
    
    .ServiceSection{ max-width: 486px; gap: 16px; margin: 0px auto 48px;} 
    .ServiceSection>div{ display: flex; flex-direction: column; } 
    .ServiceSection>div>ul{ gap: 16px; }
    .ServiceSection>div>ul>li{ padding: 16px; } 
    .ServiceSection>div>picture>img{ max-width: 486px; width: 100%; height: auto; } 
    .ServiceSection>div>ul>div{ width: 100%; } 
    .ServiceSection>div:last-of-type{ flex-direction: column; gap: 16px; }
    .ServiceSection .POPIN .titre {font: 18px / normal "SFR-Bold";}
    .ServiceSection .POPIN ul {columns: 2;}
    .ServiceSection .POPIN ul ul {columns: 1; break-inside: avoid-column; margin:0;}
    .ServiceSection .POPIN a {margin: 0 auto;}
    .ServiceSection .POPIN .d-topList {break-before: auto; margin: 18px 0 0;}
    .ServiceSection .POPIN .footer-popin {padding: 16px 0;}
    
    .Stepper{max-width:486px; gap:24px;margin:24px auto;}
    .Stepper>ul{display:flex;flex-direction:column;justify-content:start;align-items:start;gap:24px}
    .Stepper>ul>li{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px; text-align: left; align-items: flex-start; padding: 0 0 0 56px;}
    .Stepper>ul>li img { position: absolute; top: 0; left: 0; }
    .Stepper>ul>li>p{text-align:start; display: block;}
    .Stepper>ul>li>p>br{display:none}
    
    .SectionList{ max-width: 486px; gap:24px; } 
    .SectionList>ul{ display: flex; flex-direction: column; gap:16px; } 
    .SectionList>ul>li{ padding: 16px; }
    
    .ListSection{ max-width: 486px; gap: 24px; } 
    .ListSection>ul{ flex-direction: column; gap:16px; } 
    .ListSection>ul>li{ padding: 16px; } 
    .ListSection>div>div:last-of-type{ flex-direction: column; gap: 16px; }
    
    .MobileClassTab{max-width:486px;gap:24px}
    
    .Modernise{flex-direction:column;max-width:486px;gap:24px}
    .Modernise>div>h3{font-size:18px}
    .Modernise .ModerniseButtons{display:flex;flex-direction:column;gap:16px;width:100%}
    .Modernise>div>div>a{width:100%}
    .Modernise>picture>img{width:100%;height:auto}
    
    .Ben{ max-width: 484px; gap: 24px; } 
    .Ben>div{ flex-direction: column; gap: 16px; width: 100%; } 
    .Ben>div>div{ flex-direction: column; gap: 16px; } .Ben>div>div:first-of-type{ width: 100%; } 
    .BentoCard{ min-height: 286px; } 
    .BentoCard>img{ position: absolute; top: 15px; right: 15px; height: 72px; width: 72px; } 
    .CardContainer>div{ display: flex; flex-direction: column; flex: 1; gap: 16px; }
    
	bol-tv-channels .bl_contenu .contenu_bloc {max-width: 486px; width: calc(100% - 32px);} 
	bol-tv-channels .bl_contenu {padding: 24px 0;}
	bol-tv-channels h3 {font-size: 24px; line-height: 36px;}
	bol-tv-channels .search_tv .bl_input .bl_champ {width: 100%;}
	bol-tv-channels .bl_contenu .Text500 {margin-bottom: 24px;}
	
	#Pourprofiterdeloffre .pres{grid-template-columns:1fr;gap:16px;max-width:486px;margin-bottom:48px;width:calc(100% - 32px)}
	#Pourprofiterdeloffre .sous-titre{grid-template-rows:1fr;gap:16px}
	#Pourprofiterdeloffre .pres.bloc{text-align:left}
	#Pourprofiterdeloffre .pres ol{list-style-type:decimal;display:flex;gap:24px;flex-direction:column}
	#Pourprofiterdeloffre .pres .step{text-align:center;margin:0;align-self:center;grid-row:1 / 3}
	#Pourprofiterdeloffre .pres ol li{display:grid;grid-template-columns:auto 1fr;text-align:left;column-gap:8px}
	#Pourprofiterdeloffre .pres .connect a{width:100%}
	
    .pbXL {padding-bottom: 24px;}
    .ptXL {padding-top: 24px;}
    
    .addons_bloc {padding: 24px 0 40px;}
}

@media(max-width: 768px){
    .TOP { width: calc(100% - 32px); } 
}







}