:root {
--bg-amac: linear-gradient(to right, #42d9d9, #12bf8a, #db0f61);
--bg-amac2: linear-gradient(#42d9d9, #12bf8a, #db0f61);
}
@font-face { font-family: 'AR'; src: url("//static.s-sfr.fr/media/altice-regular-webfont.woff") format('woff'); }
@font-face { font-family: 'AB'; src: url("//static.s-sfr.fr/media/altice-bold-webfont.woff") format('woff'); }
@font-face { font-family: 'AI'; src: url("//static.s-sfr.fr/media/altice-italic-webfont.woff") format('woff'); }
@font-face { font-family: 'bfmB'; src: url("//static.s-sfr.fr/media/bfm/PilatBlack.woff") format('woff'); }
@font-face { font-family: 'bfmH'; src: url("https://static.s-sfr.fr/media/bfm/PilatHeavy.woff") format('woff'); }
/* Variable */
@font-face { font-family: 'MV'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-VariableFont_wght.woff2") format('woff2'); }
/* Regular */
@font-face { font-family: 'MR'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-Regular_0.woff2") format('woff2'); }
/* Gras */
@font-face { font-family: 'MB'; src: url("https://static.s-sfr.fr/amac/fonts/Montserrat-Bold.woff2") format('woff2'); }
html{scroll-padding-top:70px;}
body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:normal;}
p a{color:#0a0014;}
.imgandtxt{display:flex; justify-content:space-between; max-width:1100px; flex-wrap:wrap; width:100%;gap:24px;margin-bottom:24px;}
.imgandtxt > div {max-width:calc(50% - 12px);}
.imgandtxt > div > img{height:auto; display:inherit; max-width:100%;}
.imgandtxt > div > p{font-family: 'MR'; display:inherit; font-size:18px;line-height:32px;}
.imgandtxt.right > div.Aimg {order:2;}
.imgandtxt.up{flex-direction: column;}
.imgandtxt.up > div{width:100%;max-width:none;}
.imgandtxt.up > div > img{width:100%;}
.imgandtxt.down{flex-direction: column;}
.imgandtxt.down > div.Aimg{order:2;}
.imgandtxt.down > div{width:100%;max-width:none;}
.imgandtxt.down > div > img{width:100%;}
.backtotop{position:fixed;bottom: 25px; right:25px;width:52px;height:48px;display:flex;justify-content:center;align-items:center; background: rgba(179, 173, 173, 0.8); opacity:0;border-radius:16px; border:2px solid rgb(127 127 127); transition:all .3s;z-index:10;pointer-events:none}
.backtotop:hover {opacity: 1;}
.backtotop div{background: #F5F5F5; border-radius:50%;width:32px;height:32px; display:flex;justify-content:center;align-items:center;}
.backtotop svg {height:auto; width:18px;}
.backtotop:hover{opacity:1 ;}
.audi{display:flex;gap:16px 24px;flex-wrap:wrap;margin:24px 0;max-width:100%;}
.audi h3{flex:100%;}
.audi audio{flex:1;max-width:400px;}
.audi img{max-height:324px;max-width:35%;}
.disable{pointer-events:none}
.btnfixe {opacity: 0;transform: translateY(100%);pointer-events: none;transition: opacity 0.3s, transform 0.3s;}
.btnfixe.visible {opacity: 1;transform: translateY(0);pointer-events: all;}
#HP{display:flex; flex-direction:column;}
#HP #Top { position: relative; min-height: 195px; background-color: #0a0014; padding: 95px 0 60px 0; background-image: url(//static.s-sfr.fr/media/grid-images.jpg); background-size: cover; background-position: center center; }
#HP #Top:after { content: ''; position: absolute; z-index:1; bottom: 0; background: #3bb8bb; height: 16px; width: 100%;}
#HP #Top h1 { font-family: 'MB'; display: table; font-size: 64px; line-height: 86px; margin: 70px auto 0 auto; margin-block: 0; color: #fff; text-align: center;}
#HP #Top p { font-family: 'MR'; margin: 0; color: #fff; font-size: 32px; display: block; text-align: center; line-height: 43px; }
#HP #Top a { font-family: 'MB'; display: table; margin: 55px auto 0 auto; color: #0a0014; text-decoration:none; background-color: #fff; padding: 16px 24px; z-index:10;position:relative;}
#HP #Top a:hover { background:#0a0014; color: #fff;}
#HP #Top svg { overflow: hidden; position: absolute; z-index:2; bottom: 0; right: 0; }
#HP #Top svg path{fill:#0a0014;}
#HP #Timer{order:-1; font-family: 'MB';color: #fff; width:100%; height: 195px; background: url('https://static.s-sfr.fr/media/SPORTS/JO2024/AMAC-JO2024-comptearebours-1100x150-fond.webp'); background-size: cover; background-position: center center; display: flex; align-items: center; justify-content: center;}
#HP #Timer h2{font-size: 48px; text-transform: uppercase;}
#HP #Timer > div{display: flex; align-items: center; position: relative; width: 75%; justify-content: space-evenly;}
#HP #Timer > div > div {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right:80px}
#HP #Timer > div > div > .clock{display:flex; margin-top: 16px; width: 380px;}
#HP #Timer > div > div > .clock .time{display: flex; flex-direction: column; justify-content: center; align-items: center; width:25%;}
#HP #Timer >div > div > .clock .time span{font-size: 28px; text-align: center; width:100%;}
#HP #Timer > div > div > .clock .time .timereg{font-family:'MR'; font-size:21px; text-transform: uppercase;}
#HP #Timer > div img{width: 200px;}
#HP #Brands { background-color: #0a0014;background-image: url(//static.s-sfr.fr/media/motif.svg); background-repeat: no-repeat; background-position: left bottom; padding: 64px 5px 80px 5px; position: relative; overflow: hidden;}
#HP #Brands h2 { font-family: 'MB'; font-size: 34px; line-height: 46px; display: table; color: #fff; margin: 0 auto 32px auto; background-color: #0a0014; padding: 5px 15px;}
#HP #Brands .cont .rect .rmc,.bfm {height: 80px;border-radius:16px;}
#HP #Brands .cont .rect #iconic, .i24{border-radius:0; position: relative; height:50px;}
#HP #Brands .cont { margin: 0 auto 24px auto; max-width: 732px; text-align: center; }
#HP #Brands .cont .rect {display: inline-flex;justify-content:center;align-items:center; vertical-align: top; width:110px;height:80px; background-color: #fff; border-radius: 16px; margin: 0 4px; box-sizing: border-box; padding: 0; margin-bottom:16px;overflow:hidden;}
#HP #Brands .cont .img420{width:72px; height:auto; position: relative;}
#HP #Brands .cont .mb27{ margin-bottom:27px;}
#HP #Brands svg { position: absolute; z-index:0; }
#HP #Brands .motif1 { right: 0; top: 0; }
#HP #Brands .motif2 { left: 0; bottom: 0; }
#HP #Brands .cont .rect a{display:flex;justify-content:center;align-items:center;}
#HP #Brands .cont .rect a img{height:80px;}
#Brand #Vid{width:calc(100% - 48px); height:fit-content;padding:42px 24px; background: #EEEFF0;display:flex;justify-content:center;align-items:center;flex-direction:column;}
#Brand #Vid video {height:auto; width:980px; max-width:100%;}
#Brand #Vid iframe {width:980px; height:550px;max-width:100%;}
#Brand #Vid strong {font-family: 'MB';font-size: 34px; line-height: 40px; max-width:980px;}
#Brand #Vid h3, #Brand #Vid h2 {font-family: 'MB';font-size: 34px; line-height: 40px; max-width:980px;}
#Brand #Vid p {width:980px; max-width:100%; text-align:left; margin: 24px 0 16px 0;font-family: 'MR'; font-size: 14px; line-height: 19px;}
#HP #Une { background-color: #eeeff0; padding: 64px 64px 74px 64px; display:flex;flex-direction:column; align-items:center; position: relative; }
#HP #Une .actu {max-width:1450px; flex-wrap:wrap; display:inline-flex;justify-content:center;align-items:center;}
#HP #Une h2 { font-family: 'MB'; font-size: 34px; line-height: 46px; display: block; text-align: center; color: #0a0014; margin-bottom: 32px; }
#HP #Une article { box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow:hidden; border-radius: 16px; margin: 0 20px 16px 0; width: 370px; height: 435px; background-color:#fff; }
#HP #Une article .T { height: 218px; width: 100%; background-size: cover; background-position: center center; display: flex;align-items: center;justify-content: center;}
#HP #Une article .B { box-sizing: border-box; text-align: left; width: 100%; padding: 40px 32px;}
#HP #Une article .B p { display: block; font-family: 'MR'; font-size: 18px; color: #0a0014; line-height: 24px; text-align: left; }
#HP #Une article .B a { display: inline-block; font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 16px 10px 0 0; }
#HP #Une article .B a:before { content:''; position: absolute; height: 100%; width: 100%; left:0; top: 0;}
#HP #Une article .B .arrow { display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block;}
{}
#HP #Une article .sticker { position: absolute; top: 200px; left:32px; font-family: 'MB'; font-size: 14px; background: #0a0014; border-radius: 4px;padding: 6px 12px; text-transform: uppercase; color: #fff; }
#HP #Une .more {margin: 0 20px 16px 0; align-self:flex-start;display: inline-block; vertical-align: middle; height: 435px; width: 370px;background: var(--bg-amac2);border-radius: 32px;}
#HP #Une .more .inside{ position: relative; box-sizing: border-box; height: 400px; width: 336px;margin: 17px; padding: 108px 0 0 32px; background: #0a0014;border-radius: 16px;}
#HP #Une .more .inside p { text-align: left;color: #fff;display: block; width: 290px; font-family: 'MB';margin-bottom: 15px;font-size: 28px;line-height: 37px; }
#HP #Une .more .inside a { display: table; color: #fff; font-family: 'MB'; font-size: 16px; padding: 15px 25px; text-decoration: none; border: 2px solid #fff;}
#HP #Une .more .inside a:hover { background:#fff; color: #0a0014; }
#HP #Answers { position: relative; background-color: #fff; padding: 64px 0 90px 0; text-align: center; }
#HP #Answers h2 { font-family: 'MB'; text-align: center; font-size: 34px; line-height: 46px; display: block; color: #0a0014; margin-bottom: 56px; }
#HP #Answers .L { display: inline-block; vertical-align: middle; width: 368px; margin-right: 40px; text-align: left; }
#HP #Answers .L strong { display: block; color: #0a0014; font-family: 'MB'; font-size: 28px; line-height: 37px; margin-bottom: 8px; }
#HP #Answers .L p { display: block; font-family: 'MR'; color: #0a0014; font-size: 14px; line-height: 19px; }
#HP #Answers .R { display: inline-block; vertical-align: middle; width:50%; max-width:1000px;}
#HP #Answers .R .c { position: relative; display: inline-block; vertical-align: top; width: 232px; height: 250px; background-color: #eeeff0; border-radius: 16px; margin:0 40px 36px 0; transition: transform .3s ease-out; padding: 40px 0; box-sizing: border-box;}
#HP #Answers .R .nolink{pointer-events: none;}
#HP #Answers .R .c:nth-child(1):hover { border: 2px solid #42d9d9; }
#HP #Answers .R .c:nth-child(2):hover { border: 2px solid #db0f61; }
#HP #Answers .R .c:nth-child(3):hover { border: 2px solid #db0f61; }
#HP #Answers .R .c:nth-child(4):hover { border: 2px solid #12bf8a; }
#HP #Answers .R .c:nth-child(5):hover { border: 2px solid #42d9d9; }
#HP #Answers .R .c:nth-child(6):hover { border: 2px solid #db0f61; }
#HP #Answers .R .c span { display: block; text-align: center; font-family: 'MR'; font-size: 22px;}
#HP #Answers .R .c:hover { transform: scale(1.1); }
#HP #Answers .R .c:hover>span { font-family: 'MB'; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 77.5%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(1):hover>span { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 77.5%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(2):hover>span { background: linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(3):hover>span { background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(4):hover>span { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(5):hover>span { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 77.5%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c:nth-child(6):hover>span { background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#HP #Answers .R .c a { display: inline-block; font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 8px auto 0 auto; display: block; text-align: center; }
#HP #Answers .R .c a:before { content:''; position: absolute; height: 100%; width: 100%; left:0; top: 0;}
#HP #Answers .R .c svg,#Answers .R .c img { display: block; margin: 0 auto 30px auto; height:80px;}
#HP #Answers .R .c .arrow { display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block; filter: invert(34%) sepia(46%) saturate(1884%) hue-rotate(321deg) brightness(95%) contrast(100%);}
{}
#HP #Broadcast { background-color: #EEEFF0; padding: 0 1%; box-sizing: border-box;text-align:center;}
/* #HP #Broadcast { background-color: #EEEFF0; padding: 0 1%; box-sizing: border-box; display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;} */
#HP #Broadcast .L { display: inline-block; vertical-align: middle; width: 600px; height: 457px; background-position: center bottom; background-size: contain; background-repeat: no-repeat; }
/* #HP #Broadcast .L { display: inline-block; vertical-align: middle; width: 797px; margin:33px 0;height: 887px; background-position: center bottom; background-size: contain; background-repeat: no-repeat; } */
#HP #Broadcast .L #lille {position:relative; width:211px;height:209px; top: 530px; left: 294px;}
#HP #Broadcast .L .target {position:relative;}
#HP #Broadcast .L .Mrect{width:72px; height:72px; position:absolute; background: rgba(0, 0,0, 0.8);box-shadow: 0 0 5px rgba(0, 0, 0, 0.24); border-radius: 16px; display:flex;justify-content:center;align-items:center;transition: transform .3s ease-out;}
#HP #Broadcast .L .Mrect:hover{transform:scale(1.1);}
#HP #Broadcast .L .orange{border: 2px solid #F58B40;}
#HP #Broadcast .L .yellow{border: 2px solid #db0f61;}
#HP #Broadcast .L .turq{border: 2px solid #42d9d9;}
#HP #Broadcast .L .red{border: 2px solid #E84250;}
#HP #Broadcast .L .green{border: 2px solid #ACBE47;}
#HP #Broadcast .L .Dgreen{border: 2px solid #12bf8a;}
#HP #Broadcast .L .Dblue{border: 2px solid #4267E8;}
#HP #Broadcast .L .Mrect > a > img{width:48px; height:48px;}
#HP #Broadcast .L .Mrect > a{width:fit-content;}
#HP #Broadcast .L > :nth-child(1){margin-left: 36px;margin-top: 157px;}
#HP #Broadcast .L > :nth-child(2){margin-left: 212px; margin-top: 103px;}
#HP #Broadcast .L > :nth-child(3){margin-left: 264px; margin-top: 230px;}
#HP #Broadcast .L > :nth-child(4){margin-left: 529px; margin-top: 67px;}
#HP #Broadcast .L > :nth-child(5){margin-left: 773px; margin-top: 243px;}
#HP #Broadcast .L > :nth-child(6){margin-left: 539px; margin-top: 325px;}
#HP #Broadcast .L > :nth-child(7){margin-left: 619px; margin-top: 439px;}
#HP #Broadcast .L > :nth-child(8){margin-left: 784px; margin-top: 614px;}
#HP #Broadcast .L > :nth-child(9){margin-left: 721px; margin-top: 687px;}
#HP #Broadcast .L > :nth-child(10){margin-left: 417px; margin-top: 658px;}
#HP #Broadcast .R { display: inline-block; vertical-align: middle; width: 45%; max-width: 470px; text-align: left; margin-bottom:23px;}
#HP #Broadcast .R strong { display: block; font-family: 'MB'; ; font-size: 28px; line-height: 37px; }
#HP #Broadcast .R p { margin: 8px 0 24px 0; font-family: 'MR'; font-size: 14px; line-height: 19px;}
#HP #Broadcast .R a { display: inline-block; font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 8px auto 0 auto; display: block;}
#HP #Broadcast .R .arrow { display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block; filter: invert(34%) sepia(46%) saturate(1884%) hue-rotate(321deg) brightness(95%) contrast(100%);}
{}
/*#Campaign>div:before { content:''; filter: blur(80px); }*/
#HP #What { background-color: #EEEFF0; padding: 60px 1%; }
#HP #What>strong { font-size: 34px; line-height: 40px; font-family: 'MB'; display: block; text-align: center; margin: 0 0 40px 0;}
#HP #What .num { max-width: 980px; background-color: #fff; border-radius: 16px; margin: 0 auto; text-align: center; }
#HP #What .num .k { display: inline-block; vertical-align: top; width: 320px; padding: 32px 0; border-right: 2px solid #ebebeb; }
#HP #What .num .k:last-child { border:none; }
#HP #What .num .k strong { font-family: 'MB'; font-size: 56px; line-height: 64px; text-align: center; }
#HP #What .num .k p { max-width: 260px; font-family: 'MR'; font-size: 18px; line-height: 24px; text-align: center; color: #0a0014; margin: 0 auto; }
#HP #What video { display: block; width: 980px; margin: 50px auto 30px auto; border-radius: 16px; }
#ChatBotBtn{position:fixed;bottom:101px;right:24px;display:block;z-index:999;}
#ChatBotBtn > a{border-radius:50%;width:58px;height:58px;background-image:url('https://static.s-sfr.fr/amac/test/chatbottest.svg');display:block;background-size:cover;background-color:#fff;}
#ChatBotBtn > a:before{content:'';position:absolute;display:block;z-index:999;top:0;bottom:0;left:0;right:0;cursor:pointer;}
#ChatBotBtn > a:after{content: '';width: 12px;height: 12px;position: absolute;border-radius: 50%;background: #00d300;right: 2px;bottom: 2px;}
#ChatBotBtn > p{overflow: hidden;position: absolute;background: linear-gradient(270deg, #5499FD 0%, #3D65D0 50%, #53637C 100%);z-index: -1;top: 0;bottom: 0;right: 24px;margin: 0;border-radius: 24px 0 0 24px;font-size: 14px;font-family: 'MR';color: #FFF;white-space:nowrap;display:flex;align-items:center;width:0;padding:0;transition:all .3s ease-out;}
#ChatBotBtn:hover > p{width: fit-content;padding: 0 40px 0px 24px;}
#ChatBotBtn:hover > button:before{right:-152px;}
#Brand #Top { min-height: 414px; background:#0a0014; display:flex;justify-content:center;flex-direction:column;text-align: center; padding: 75px 1% 24px 1%; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#Brand #Top picture { margin: 0 auto;}
#Brand #Top picture > img{max-width:128px;}
#Brand #Top h1 { font-family: 'MR'; color: #fff; font-size: 32px; line-height: 43px; margin: 0 0 33px 0; }
#Brand #Top .btn{text-decoration: none;display: table;padding: 15px 25px;border: 2px solid #fff;color: #0a0014;background-color: #fff;margin: 0 auto 40px auto;font-family: 'MB';font-size: 16px;cursor:pointer;transition:all .3s;}
#Brand #Top .btn:hover{color: #fff;background-color: #0a0014;border: 2px solid #0a0014;}
#Brand #Top .tags { font-family: 'MB'; color: #fff; font-size: 14px; }
#Brand #Top .tags a { padding: 9px 16px 7px; border:1px solid #fff; border-radius: 37px; margin: 0 10px 0 0; text-decoration:none; color: #fff; text-transform: uppercase; transition: background .3s ease-out; /*one day this will work*/ }
#Brand #Top .tags a:hover { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border:0; padding: 10px 17px 8px;}
#Brand #Top .t {display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto;gap:42px; flex-wrap:wrap;}
#Brand #Top img{width:128px;}
#Brand #Mininav a:target { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); }
#KPI {box-sizing: border-box; padding:0;display:flex;height:244px; align-items: center; justify-content: center;flex-wrap:wrap;}
#KPI .k { text-align: center; width: calc(33% - 5px); display: inline-block; vertical-align: top; min-width:367px;}
#KPI .k strong { font-family: 'MB'; font-size: 88px; line-height: 118px; }
#KPI .k:nth-child(1) strong { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
#KPI .k:nth-child(2) strong { background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
#KPI .k:nth-child(3) strong { background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
#KPI .k strong + p { font-family: 'MR'; font-size: 18px; line-height: 24px; }
#Brand #Showoff { height: 720px; background-color: #eeeff0; text-align: center; }
#Brand #Showoff .L { width: 50%; max-width: 780px; height: 100%; display: inline-block; margin: 0 0 0 -11%; vertical-align: middle; background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); background-position: center center; background-size: cover; background-repeat: no-repeat; }
#Brand.bfmplay #Showoff .L{max-width:1280px;}
#Brand.bfmplay #Showoff{height:30vw;min-height:420px;}
#Brand #Showoff .R { /*width: calc(50% - 5px);*/ display: inline-block; vertical-align: middle; }
#Brand #Showoff .R > a{display: inline-block; vertical-align: middle; color: #fff;font-family: 'MB'; font-size: 16px; padding: 15px 25px; text-decoration: none; border: 2px solid #0a0014; background-color: #0a0014; margin: 16px 0 0 8%; float:left;}
#Brand #Showoff .R > a:hover{color: #0a0014;font-family: 'MB'; background: #fff;border: 2px solid #0a0014;}
#Brand #Showoff .R .c { width: 440px; text-align: left; margin: 24px 0 0 8%; }
#Brand #Showoff .R .c strong { font-family: 'MB'; font-size: 34px; line-height: 40px;}
#Brand #Showoff .R .c h3, #Brand #Showoff .R .c h2 { font-family: 'MB'; font-size: 27px; line-height: 40px;}
#Brand #Showoff .R .c strong>i, #Brand #Showoff .R .c h3>i, #Brand #Showoff .R .c h2>i{ font-style: unset; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
/* #Brand #Showoff .R .c h3>i{ font-style: unset; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } */
#Brand #Showoff .R .c p { font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 24px 0 16px 0; }
#Brand #Showoff .R .c>span { position: relative; display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 8px 0 8px 18px; }
#Brand #Showoff .R .c>span:before { content: ''; width: 10px; height: 10px; }
#Brand #Showoff .R .c>span svg { position: absolute; left: -18px; top: 4px; }
#Brand #Entries { text-align: center; padding: 64px 0 80px 0; }
#Brand #Entries h2 { font-family: 'MB'; font-size: 34px; line-height: 40px; text-align: center; margin: 0 0 32px 0;}
#Brand #Entries h2 i{ font-style: unset; background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#Brand #Entries .sq { display: inline-block; vertical-align: top; text-align: left; width: 320px; min-height: 205px; background-color: #eeeff0; margin: 0 20px; border-radius: 16px; box-sizing: border-box; padding: 22px; }
#Brand #Entries .sq strong { display: block; font-family: 'MB'; font-size: 24px; margin: 0 0 16px 0; }
#Brand #Entries .sq p { font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 0 0 12px 0; }
#Brand #Entries .sq span { position: relative; display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 8px 0 8px 18px; }
#Brand #Entries .sq span:before { content: ''; width: 10px; height: 10px; }
#Brand #Entries .sq span svg { position: absolute; left: -18px; top: 4px; }
#Brand #Showoff2 { height: 440px; background-color: #fff; text-align: center; }
#Brand #Showoff2 .L { width: 45%; max-width: 770px; height: 100%; display: inline-block; vertical-align: middle; background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); background-position: center bottom; background-size: contain; background-repeat: no-repeat; }
#Brand #Showoff2 .R { /*width: calc(50% - 5px);*/ display: inline-block; vertical-align: middle; }
#Brand #Showoff2 .R .c { width: 470px; text-align: left; margin: 0 0 0 15%; }
#Brand #Showoff2 .R .c strong { font-family: 'MB'; font-size: 34px; line-height: 40px;}
#Brand #Showoff2 .R .c strong>i{ font-style: unset; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#Brand #Showoff2 .R .c p { font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 24px 0 16px 0; }
#Brand #Showoff2 .R .c>span { position: relative; display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 8px 0 8px 18px; }
#Brand #Showoff2 .R .c>span:before { content: ''; width: 10px; height: 10px; }
#Brand #Showoff2 .R .c>span svg { position: absolute; left: -18px; top: 4px; }
#Brand #Showoff2 .R .c>a { font-family: 'MB'; text-decoration: none; display: inline-block; padding: 15px 25px; border: 2px solid #0a0014; color: #0a0014; }
#Brand #Showoff2 .R .c>a:hover { background-color: #0a0014; color: #fff; }
#N2 #Top { background:#0a0014; text-align: center; padding: 100px 1%; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#N2 #Top picture { margin: 0 auto; display: block; margin: 0 0 32px 0; }
#N2 #Top h1 { font-family: 'MB'; font-size: 64px; line-height: 72px; color: #fff; display: block; margin: 0 0 16px 0; }
#N2 #Top h1 + p { font-family: 'MR'; color: #fff; font-size: 32px; line-height: 43px; margin: 0 0 33px 0; }
#N2 #Top .tags { font-family: 'MB'; color: #fff; font-size: 14px; }
#N2 #Top .tags a { padding: 9px 16px 7px; border:1px solid #fff; border-radius: 37px; margin: 0 10px 0 0; text-decoration:none; color: #fff; text-transform: uppercase; transition: background .3s ease-out; /*one day this will work*/ display: inline-block; margin: 4px 0; }
#N2 #Top .tags a:hover { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border:0; padding: 10px 17px 8px;}
#N2 ul{font-family: 'MR'; font-size: 14px; line-height: 19px;}
#Offers { background-color: #EEEFF0; text-align: center; padding: 64px 0 80px 0; }
#Offers.white { background-color: #fff;}
#Offers.white .sq { background-color: #EEEFF0;}
#Offers>strong { font-family: 'MB'; display: block; font-size: 34px; line-height: 40px; margin: 0 0 32px 0;}
#Offers>strong + p { font-family: 'MR'; font-size: 18px; line-height: 24px; text-align: center; margin: -24px auto 32px auto; }
#Offers .o { max-width: 1100px; display: block; margin: 0 auto ; text-align: center;}
#Offers .sq { position: relative; display: inline-block; vertical-align: top; text-align: left; width: 350px; min-height: 174px; background-color: #fff; margin: 0 7px 20px 7px; border-radius: 16px; box-sizing: border-box; padding: 32px 32px; }
#Offers .sq strong { display: block; font-family: 'MB'; font-size: 20px; margin: 0 0 16px 0; }
#Offers .sq p { font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 0 0 12px 0; }
#Offers .sq span { position: relative; display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 8px 0 8px 18px; }
#Offers .sq span:before { content: ''; width: 10px; height: 10px; }
#Offers .sq span svg { position: absolute; left: -18px; top: 4px; }
#Offers .sq a { position: relative; display: table; font-family: 'MB'; font-size: 16px; text-decoration: none; color: #0a0014; }
#Offers .sq a .arrow { display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); position: absolute; top: -6px; right: -28px; width: 20px; height: 20px; display: block; filter: invert(34%) sepia(46%) saturate(1884%) hue-rotate(321deg) brightness(95%) contrast(100%);}
{}
#Local #Top { min-height: 414px; background:#0a0014; text-align: center; padding: 96px 1%; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: cover; }
#Local #Top h1 { font-family: 'MB'; color: #fff; font-size: 56px; line-height: 64px; margin: 0 auto 23px auto; display: block; max-width: 980px; }
#Local #Top h1 + p { font-family: 'MR'; color: #fff; font-size: 32px; line-height: 43px; margin: 0 auto 40px auto; display: block; max-width: 850px; }
#Local #Top a { text-decoration: none; display: table; padding: 15px 25px; border: 2px solid #fff; color: #0a0014; background-color: #fff; margin: 0 auto; font-family: 'MB'; font-size: 16px; }
#Local #Top a:hover { background-color: #0a0014; color: #fff; border-color: #0a0014; }
#Contact { background: #EEEFF0; box-sizing: border-box; padding: 60px 0 0 0; }
#Contact h1 { font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 64px 0 34px 0; display: block; margin-block: 0; text-align: center; }
#Create { background: #EEEFF0; box-sizing: border-box; padding: 60px 0 0 0; }
#Create h1 { font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 64px 0 34px 0; display: block; margin-block: 0; text-align: center; }
#Create h1 + p { max-width: 980px; font-family: 'MR'; font-size: 22px; line-height: 29px; color: #0a0014; margin: 0 auto; text-align: center;}
#Create #For form .W>p { color: #6D6D6D; font-size: 14px; line-height: 19px; margin: 0 0 25px 0; display: block; }
#Create #For input[type="checkbox"]{ display: none; }
#Create #For input[type="checkbox"] + label { cursor: pointer; position: relative; display: block; font-family: 'MR'; font-size: 14px; padding: 8px 15px 8px 37px; border: 1px solid #eeeff0; border-radius: 6px; }
#Create #For input[type="checkbox"] + label a { font-family: 'MB'; color: #0a0014; }
#Create #For input[type="checkbox"] + label:before { content:''; position: absolute; left: 11px; top: 8px; width: 15px; height: 15px; border-radius:4px; display: block; border: 1px solid #0a0014; }
#Create #For input[type="checkbox"]:checked + label { border:1px solid #0a0014; }
#Create #For input[type="checkbox"]:checked + label:before { content:''; background-color: #0a0014;}
#Create #For input[type="checkbox"]:checked + label:after { content:''; position: absolute; width: 5px; height: 10px; border:2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); left: 16px; top: 9px;}
#Create form label.error+input~span { color: #e2001a; font-size: 12px; margin: -20px 0 10px; display: inline-block; padding: 0; }
#For { width: 980px; padding: 40px 100px; box-sizing: border-box; background: #fff; margin: 35px auto 80px auto; border-radius: 16px; }
#For .W p { font-family: 'MR'; font-size: 12px; line-height: 16px; }
#For .W a { font-family: 'MB'; color: #0a0014;}
#For .W>div { display: inline-block; vertical-align: top; width: calc(50% - 22px); padding: 0 10px; }
#For label { font-family: 'MB'; color: #0a0014; font-size: 14px; display: block; margin: 0 0 8px 0; }
#For label + *:not(input[type="submit"]) { padding: 8px 12px; width: calc(100%); box-sizing: border-box; font-family: 'MR'; border-radius: 6px; font-size: 14px; background: #EEEFF0; border: 0; margin: 0 0 24px 0!important; display: block; }
#For label + textarea { height: 118px; }
#For input[type="submit"] { max-width: 369px; display: block; border: 2px solid #0a0014; color: #fff; font-family: 'MB'; padding: 14px 25px; background-color: #0a0014; margin: 40px auto 0 auto; cursor: pointer; }
#For input[type="submit"]:hover { color: #0a0014; background-color: #fff;}
#For #MessageSend{color:#12bf8a; font-size: 15px; font-family:'MB'; text-align:center; border: 2px solid #5AB078; padding:16px 10px; margin-bottom:32px;}
#For .W>div { position: relative; }
#For .view-password { position: absolute; right: 19px; }
#Chess { padding: 90px 0 0 0; }
#Chess h1 { font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 64px auto 34px auto; display: block; margin-block: 0; text-align: center; max-width: 980px; }
#Chess h1 + p { display: block; font-family: 'MR'; font-size: 26px; line-height: 33px; margin: 16px auto; max-width: 800px; text-align: center;}
#Actus { }
#Actus h1 { }
/*/////////////////////////
Bloc mutualisés
/////////////////////////*/
#Campaign { background:#0a0014; color: #fff; text-align: center; position: relative; padding: 80px 0; }
#Campaign strong,#Campaign h2 { font-family: 'MB'; font-size: 47px;line-height: 64px; }
#Campaign p { font-family: 'MR'; font-size: 18px; line-height: 24px;margin: 16px auto; display: block; max-width: 776px;}
#Campaign a { display: table; color: #fff; font-family: 'MB'; font-size: 16px; padding: 15px 25px; text-decoration: none; border:2px solid #fff; margin: 0 auto; }
#Campaign a:hover { background-color: #fff; color: #0a0014; }
#Campaign svg.m1 { position: absolute; left:0; top:0; }
#Campaign svg.m2 { position: absolute; right:0; top:0; }
#Mininav { position: relative; width: 100%; display: block; box-sizing: border-box; background-color: #0a0014; text-align: center; padding: 16px 0; position: sticky; top: 0; z-index: 5;}
#Mininav:after { content: ''; width: 100%; height: 4px; position: absolute; bottom: -4px; left: 0; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); }
#Mininav a { display: inline-block; font-family: 'MB'; color: #fff; font-size: 14px; padding: 9px 16px 7px; border:1px solid #fff; border-radius: 37px; margin: 0 10px 4px 0; text-decoration:none; color: #fff; transition: background .3s ease-out; text-transform: uppercase; }
#Mininav a.s { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border:0; padding: 10px 17px 8px; }
#Mininav a:hover { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border:0; padding: 10px 17px 8px;}
#Seo { padding: 40px 1%; }
#Seo .W { max-width: 1100px; display: block; margin: 0 auto; }
#Seo .W strong { font-size: 22px; line-height: 40px; color: #0a0014; font-family: 'MB'; display: block; margin: 0 0 22px 0; }
#Seo .W p { font-size: 14px; line-height: 19px; font-family: 'MR'; margin: 0; }
#Seo .W a { font-family: 'MB'; color: #0a0014;}
#Seo .W label { position: relative; display: block; padding: 0 0 30px 0; }
#Seo .W label strong { cursor: pointer; position: relative; font-size: 14px; line-height: 19px; font-family: 'MB'; margin: 20px 0 0 0; display: table; }
#Seo .W label strong:after { content: ''; position: absolute; transform: rotate(45deg); right: -18px; top: 4px; width: 7px; height: 7px; border: 2px solid #E84250; display: block; border-left: 0; border-top: 0; }
#Seo .W label strong ~ * { display: none; }
#Seo input[type="checkbox"] { display: none; }
#Seo input[type="checkbox"]:checked + label strong { position: absolute; bottom: 0; }
#Seo input[type="checkbox"]:checked + label strong:after { transform: rotate(225deg); top: 8px;}
#Seo input[type="checkbox"]:checked + label strong ~ * { display: block; }
#Help { background: var(--bg-amac); padding: 12px 0; text-align: center; }
#Help span { display: inline-block; vertical-align: middle; font-family: 'MB'; font-size: 20px; line-height: 27px; text-align: center; color: #FFFFFF; margin: 0 32px 0 0;}
#Help a { display: inline-block; vertical-align: middle; color: #fff; font-family: 'MB'; font-size: 16px; padding: 15px 25px; text-decoration: none; border: 2px solid #0a0014; background-color: #0a0014; margin: 0 auto; }
#Help a:hover { color: #0a0014; font-family: 'MB'; background: #fff; border: 2px solid #fff;}
#Sep { width: 100%; height: 16px; background: var(--bg-amac); display: block; }
#KPI2 { padding: 64px 1% 82px 1%; }
#KPI2 h2 { font-family: 'MB'; font-size: 34px; line-height: 40px; color: #0a0014; display: block; text-align: center; margin: 0 auto 40px auto; }
#KPI2 .icp { max-width: 1100px; background-color: #eeeff0; border-radius: 16px; margin: 0 auto; display:flex;}
#KPI2 .icp .c { text-align: center; display: inline-block; vertical-align: top; width: 100%; padding: 45px 20px; border-right: 2px solid #fff;}
#KPI2 .icp .c:nth-child(1) strong { background: linear-gradient(90deg, #42d9d9 0%, #49B081 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI2 .icp .c:nth-child(2) strong { background: linear-gradient(90deg, #49B081 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI2 .icp .c:nth-child(3) strong { background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI2 .icp .c:nth-child(4) strong { background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
/* #KPI2 .icp .c:last-child { border: 0; }
*/#KPI2 .icp .c strong { font-family: 'MB'; font-size: 50px; line-height: 64px; text-align: center; }
#KPI2 .icp .c strong + p { font-family: 'MR'; color: #0a0014; font-size: 14px; line-height: 19px; }
#KPI3 { padding: 64px 1% 82px 1%; }
#KPI3.grey { background-color: #eeeff0; }
#KPI3 h2 { font-family: 'MB'; font-size: 34px; line-height: 40px; color: #0a0014; display: block; text-align: center; margin: 0 auto 40px auto; }
#KPI3 .icp { max-width: 1100px; background-color: #eeeff0; border-radius: 16px; margin: 0 auto; }
#KPI3.grey .icp { background-color: #fff; }
#KPI3 .icp .c { text-align: center; display: inline-block; vertical-align: top; width: calc(1100px / 3 - 19px * 3); padding: 45px 20px; border-right: 2px solid #fff;}
#KPI3.grey .icp .c { border-right: 2px solid #eeeff0;}
#KPI3 .icp .c:nth-child(1) strong { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI3 .icp .c:nth-child(2) strong { background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI3 .icp .c:nth-child(3) strong { background: linear-gradient(90deg, #db0f61 0%, #E84250 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#KPI3 .icp .c:last-child { border: 0; }
#KPI3 .icp .c strong { font-family: 'MB'; font-size: 50px; line-height: 64px; text-align: center; }
#KPI3 .icp .c strong + p { font-family: 'MR'; color: #0a0014; font-size: 14px; line-height: 19px; }
#Info { background-color: #999; text-align: center; padding: 64px 0; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#Info>img { height 104px; display: block; margin: 0 auto 32px auto; }
#Info>h2 { color: #fff; font-family: 'MB'; font-size: 34px; line-height: 40px; display: block; text-align: center; margin: 0 auto 40px auto;}
#Info>div { display: inline-block; vertical-align: top; width: 525px; min-height: 364px; border: 2px solid #fff; border-radius: 16px; padding: 32px; margin: 0 10px; text-align: left; box-sizing: border-box; }
#Info>div strong{ display: block; margin: 0 0 15px 0; font-family: 'MB'; font-size: 26px; line-height: 37px; color: #fff; position:relative;}
#Info>div p { font-family: 'MR'; font-size: 20px; line-height: 29px; color: #fff; margin-bottom: 30px; }
#Info>div p>span{ font-family: 'MB'; font-size: 18px; color: #0a0014; background-color: #fff; padding: 4px 8px; border-radius: 4px; }
#Info .logo span { width: 80px; height: 58px; background-color: #fff; border-radius: 12px; display: inline-block; vertical-align: top; position: relative; margin: 0 16px 8px 0;}
#Info .logo span img {margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
#Info > .L {position:relative;}
#Info > .L strong >span{position:absolute; right:175px;}
#Info .logo span#Molo {position:absolute;right:162px;bottom:98px;}
#Spot{ margin: 0 0 80px 0; padding: 0 1%;}
#Spot .W { position: relative; width: 1100px; background: var(--bg-amac); border-radius: 16px; margin: 0 auto; padding: 4px; box-sizing: border-box;}
#Spot .W>.container { position: relative; background-color: #0a0014; border-radius: 12px; padding: 90px 0 ; text-align: center; box-sizing: border-box; background-image: url(//static.s-sfr.fr/media/vector-2.svg); background-position: center center; background-repeat: no-repeat;}
#Spot .W>.container .tag { text-transform: uppercase; color: #0a0014; background: #FFFFFF; border-radius: 18px; padding: 9px 24px; display: table; margin: 0 auto 16px auto; font-family: 'MB'; font-size: 14px; line-height: 19px;}
#Spot .W>.container>strong{ font-family: 'MB';display: block; font-size: 56px; line-height: 64px; margin: 0 0 40px 0; background:var(--bg-amac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#Spot .W>.container p { color: #fff; text-align: center; font-family: 'MR'; font-size: 18px; line-height: 24px; display: block; margin: 0 0 50px 0; background:#0a0014;}
#Spot .W>.container p>strong { font-family: 'MB'; display: block; margin: 0 0 16px; }
#Spot .W>.container>svg { position: absolute; left:0; right: 0; top:0; margin: auto; }
#Spot .W>.container>a { font-family: 'MB'; padding: 15px 25px; border: 2px solid #fff; color: #fff; text-decoration: none; background:#0a0014; }
#Spot .W>.container>a:hover { color: #0a0014; background-color: #fff; }
#Levers { padding: 64px 1%; box-sizing: border-box; }
#Levers .W { max-width: 1100px; margin: 0 auto; }
#Levers .W>div { width: calc(50% - 5px); display: inline-block; vertical-align: top;}
#Levers .W .L { }
#Levers .W .L>h3, #Levers .W .L>h2 { font-family: 'MB'; font-size: 30px; line-height: 40px; margin: 0 0 16px 0; display: block;}
#Levers .W .L>h3 + p, #Levers .W .L>h2 + p { font-family: 'MR'; font-size: 18px; line-height: 29px; margin: 0 0 32px 0; display: block; }
#Levers .W .R input[type="radio"] { display: none; }
#Levers .W .R input[type="radio"] + label { position: relative; display: block; padding: 32px 0 16px; border-bottom: 1px solid #0a0014; }
#Levers .W .R input[type="radio"]#r1 + label { padding: 0 0 16px; }
#Levers .W .R input[type="radio"] + label>h3{ position: relative; margin: 0 0 0 50px; font-family: 'MB'; font-size: 30px; line-height: 40px; display: block; cursor: pointer; }
#Levers .W .R input[type="radio"] + label>h3 svg { position: absolute; left: -50px; top: 8px; display: block; margin-right: 10px; vertical-align: middle;}
#Levers .W .R input[type="radio"] + label > .detail span { display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 0 0 16px;}
#Levers .W .R input[type="radio"] + label > .detail p { position: relative; display: block; font-family: 'MR'; font-size: 14px; line-height: 19px; padding: 0 0 0 18px; margin: 0 0 8px;}
#Levers .W .R input[type="radio"] + label > .detail p:before { content: ''; width: 10px; height: 10px; border:2px solid #42d9d9; border-radius: 25px; position: absolute; left:0; top: 4px; box-sizing: border-box; }
#Showoff3 { min-height: 700px; background: #EEEFF0; overflow: hidden; }
#Showoff3 .W { max-width: 1100px; margin: 0 auto;}
#Showoff3 .W>div { width: 540px; display: inline-block; vertical-align: top; height: 100%;}
#Showoff3 .W>.L { padding: 90px 65px; padding: 90px 65px 90px 1%; box-sizing: border-box; }
#Showoff3 .W>.L>h2 { font-size: 28px; line-height: 40px; font-family: 'MB'; color: #0a0014; margin: 0 0 40px 0; display: block;}
#Showoff3 .W>.L .line { margin: 0 0 32px 0; }
#Showoff3 .W>.L .line .dot { position: relative; display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 100%; margin: 0 16px 0 0; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); }
#Showoff3 .W>.L .line .dot svg{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
#Showoff3 .W>.L .line p { font-family: 'MR'; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 29px; width: calc(100% - 60px); }
#Showoff3 .W>.L .line p>strong{ font-family: 'MB'; font-size: 18px; background: linear-gradient(90deg, #42d9d9 0%, #49B081 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
#Showoff3 .W>.R { height: 700px; background-position: center center; background-size: contain; background-repeat: no-repeat; padding-right: 10%; margin-right: -10%;}
#Checkerboard { background: #EEEFF0; margin: 72px 0 0 0; }
#Checkerboard .W { max-width: 1440px; margin: 0 auto; }
#Checkerboard .W>div{ position: relative; display: inline-block; vertical-align: top; width: calc(50% - 2px); height: 600px; padding: 160px 128px 0 128px; box-sizing: border-box; }
#Checkerboard .W>div strong, #Checkerboard .W>div h2{ font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 0 0 16px 0; display: table }
#Checkerboard .W>div b { font-family: 'MB'; font-size: 34px; line-height: 40px; margin: 0 0 16px 0; display: table }
#Checkerboard .W>div p { font-family: 'MR'; font-size: 22px; line-height: 29px; display: block; margin: 0 0 24px 0;}
#Checkerboard .W>div b + p { font-family: 'MR'; font-size: 14px; line-height: 19px; display: block; margin: 0 0 24px 0;}
#Checkerboard .W>div b + p + a { display:none; }
#Checkerboard .W>div a { font-family: 'MB'; font-size: 16px; padding: 16px 24px; background: #0a0014; color: #fff; border:2px solid #0a0014; display: table; text-decoration: none; }
#Checkerboard .W>div a:hover { background-color: transparent; color: #0a0014; }
#Checkerboard .W>div>.BB { position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; }
#Checkerboard .W .L{ background:#EEEFF0;}
#Checkerboard .W .R{ background:#EEEFF0; width: calc(50% + 3px); margin: 0 0 0 -5px; background-size: cover; background-position: center center;}
#Checkerboard2 { background-color: #fff; margin: 72px 0; }
#Checkerboard2.grey { background-color: #eeeff0; margin: 0 0 0 0; }
#Checkerboard2 .W { max-width: 1440px; margin: 0 auto;display:grid;grid-template-columns: repeat(2, 1fr);}
#Checkerboard2.grey .W { background-color: #eeeff0; }
#Checkerboard2 .W>div{ position: relative; display: inline-block; vertical-align: top; height: 500px; padding: 72px 72px 0 72px; box-sizing: border-box; }
#Checkerboard2 .W>div{ background-color:#fff; }
#Checkerboard2.grey .W>div{ background-color:#eeeff0; min-height: 500px; height: fit-content; }
#Checkerboard2 .W>div strong, #Checkerboard2 .W>div h2 { font-family: 'MB'; font-size: 34px; line-height: 40px; margin: 0 0 16px 0; display: table }
#Checkerboard2 .W>div h2, #Checkerboard2 .W>div h3 { font-family: 'MB'; font-size: 34px; line-height: 40px; margin: 0 0 16px 0; display: table }
#Checkerboard2 .W>div p { font-family: 'MR'; font-size: 14px; line-height: 19px; display: block; margin: 0 0 24px 0;}
#Checkerboard2 .W>div>a { font-family: 'MB'; font-size: 16px; padding: 16px 24px; background: #0a0014; color: #fff; border:2px solid #0a0014; display: inline-block; text-decoration: none; margin: 5px 5px 5px 0; width:fit-content;}
#Checkerboard2 .W>div>a:hover{background: #fff; color: #0a0014;}
#Checkerboard2 .W>div>.BB { position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; }
#Checkerboard2 .W .L{background-size: cover; background-position: center center;}
#Checkerboard2 .W .R{ margin: 0 0 0 -5px; background-size: cover; background-position: center center;}
#Step { padding: 65px 0 80px; box-sizing: border-box;}
#Step h2 { font-family: 'MB'; display: block; text-align: center;font-size: 34px; line-height: 40px; margin: 0 0 60px 0;}
#Step .W { max-width: 1100px; margin: 0 auto; text-align: center; }
#Step .W .s { position: relative; display: inline-block; vertical-align: top; font-family: 'MR'; font-size: 18px; line-height: 24px; width: 350px; height: 180px; margin: 0 5px; background-color: #eeeff0; border-radius: 16px; padding: 52px 32px 10px 32px; box-sizing: border-box; }
#Step .W .s>span { display: block; position: absolute; width: 55px; height: 55px; font-family: 'MB'; font-size: 34px; color: #fff; line-height: 40px; top: -28px; left: 0; right: 0; margin: auto; }
#Step .W .s>span:before { content: ''; display: block; position: absolute; width: 55px; height: 55px; background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border-radius: 100%;}
#Step .W .s>span i { position: absolute; font-style: unset; left: 0; top: 7px; right: 0; bottom: 0; margin: auto; }
#Hero { background:#0a0014; text-align: center; padding: 100px 1%; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#Hero picture { margin: 0 auto; display: block; margin: 0 0 32px 0; }
#Hero h1 { font-family: 'MB'; font-size: 64px; line-height: 72px; color: #fff; display: block; margin: 0 0 16px 0; }
#Hero h1 + p { font-family: 'MR'; color: #fff; font-size: 32px; line-height: 43px; margin: 0 0 33px 0; }
#Hero .tags { font-family: 'MB'; color: #fff; font-size: 14px; }
#Hero .tags a { padding: 9px 16px 7px; border:1px solid #fff; border-radius: 37px; margin: 0 10px 0 0; text-decoration:none; color: #fff; text-transform: uppercase; transition: background .3s ease-out; /*one day this will work*/ }
#Hero .tags a:hover { background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%); border:0; padding: 10px 17px 8px;}
#HeroSimple { background:#fff; text-align: center; padding: 100px 1%; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#HeroSimple h1 { font-family: 'MB'; font-size: 64px; line-height: 72px; color: #0a0014; display: block; margin: 0 0 16px 0; }
#HeroSimple h1 + p { font-family: 'MR'; color: #0a0014; font-size: 26px; line-height: 43px; margin: 0 0 33px 0; max-width: 1100px; display: block; margin: 0 auto;}
#Ops { text-align: center; margin: 50px auto; padding: 0 1%;}
#Ops h2 { font-family: 'MB'; font-size: 42px; line-height: 40px; margin: 0 0 16px 0; display: block; }
#Ops h2 + p { font-family: 'MR'; font-size: 20px; line-height: 19px; display: block; margin: 0 0 24px 0; }
#Speech { max-width: 1100px; margin: 0 auto; padding: 0 1%; }
#Speech p { font-family: 'MR'; font-size: 16px; line-height: 20px; }
#Speech p>strong{ font-family: 'MB'; font-size: 16px; }
#Slider { background-color: #EEEFF0; padding: 64px 0; box-sizing: border-box; height: auto; }
#Slider .T { text-align: center; }
#Slider .T strong{ font-family:"AB" ;font-size: 34px; line-height: 40px; color: #0a0014; display: block; margin: 0 0 8px 0; }
#Slider .T strong+p { font-family: 'MR'; font-size: 14px; line-height: 19px; margin: 0 0 24px 0; }
#Slider .T strong+p+a { text-decoration: none; display: table; padding: 15px 25px; border: 2px solid #0a0014; background: #0a0014; color: #fff; font-family: 'MB'; margin: 0 auto;}
#Slider .T strong+p+a:hover { border: 2px solid #fff; background: #fff; color: #0a0014;}
#Slider .W { margin: 60px 0 30px 0; max-width: 100vw; white-space: nowrap; overflow: scroll hidden; padding: 0 0 30px; scroll-snap-type: x mandatory; flex-flow: row nowrap;}
#Slider .W .dummy { width: 20%; display: inline-block; vertical-align: top; scroll-snap-align: start; }
#Slider .W .s { background-color: #fff; width: 490px; height: 520px; display: inline-block; vertical-align: top; box-sizing: border-box; margin: 0 20px; border-radius: 16px; padding: 32px 40px; scroll-snap-align: start;}
#Slider .W .s img { width: 100%; border-radius: 16px; display: block; margin: 0 0 30px; }
#Slider .W .s strong { font-family: 'MB'; font-size: 20px; line-height: 27px; display: block; white-space: normal; margin: 0 0 8px; }
#Slider .W .s p { font-family: 'MR'; font-size: 14px; line-height: 19px; white-space: normal; }
#robot{position:fixed;right:0;bottom:0;}
#robot #help{position: absolute;z-index: 2;right: 7px;margin-top: 30px;}
#N1 { padding: 90px 0 0 0; }
#N1 h1 { font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 64px auto 34px auto; display: block; margin-block: 0; text-align: center; max-width: 980px; }
#N1 h1 + p { display: block; font-family: 'MR'; font-size: 26px; line-height: 33px; margin: 16px auto; max-width: 800px; text-align: center;}
#N1 #Board { max-width: 1440px; min-width: 1100px; margin: 100px auto 80px auto; width: 86%; text-align: center; }
#N1 #Board>div { }
#N1 #Board .pawn{ display: inline-block; vertical-align: top; width: 265px; min-height: 80px; margin: 0 20px 20px 20px; border: 1px solid transparent; border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%) ; background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; text-align: left; }
#N1 #Board .pawn .T { border-bottom: 1px solid #ebebeb; padding: 12px 24px; box-sizing: border-box; display: flex;justify-content: center;}
#N1 #Board .pawn .T img { height:65px;}
#N1 #Board .pawn .M { padding: 24px 24px 16px 24px; box-sizing: border-box; }
#N1 #Board .pawn .M p { font-size: 16px; line-height: 24px; font-family: 'MR';height:65px;}
#N1 #Board .pawn .B { padding: 0 24px 24px 24px; display: flex; justify-content: flex-start; align-items: center;height:38px;}
#N1 #Board .pawn .B a { text-decoration: none; font-family: 'MB'; color: #0a0014; font-size: 14px; line-height: 19px; position: relative; }
#N1 #Board .pawn .B a:before{content:'';position:absolute;width:calc(100% + 32px);height:100%;z-index:9;}
#N1 #Board .pawn .B a + .arrow { min-width:20px; height: 16px; display: inline-block; margin: 0 0 0 10px; background-size: contain; background-repeat: no-repeat; filter: invert(27%) sepia(74%) saturate(1780%) hue-rotate(330deg) brightness(106%) contrast(87%); background-image: url("data:image/svg+xml;utf8,"); }
{}
#Connect { background: #eeeff0; padding: 65px 0;}
#Connect>h1 { max-width: 980px; display: block; font-size: 56px; font-family: 'MB'; text-align: center; margin: 0 auto 10px auto; }
#Connect>p { max-width: 980px; display: block; font-size: 22px; font-family: 'MR'; text-align: center; margin: 0 auto 40px auto; }
#Mire { width: 1085px; margin: 0 auto; text-align: center;}
#Mire>div { display: inline-block; vertical-align: top; width: 500px; height: 450px; margin: 0 20px; background-color: #fff; border-radius: 16px; padding: 40px 75px; box-sizing: border-box; text-align: left; }
#Mire>div.R { padding: 140px 30px; }
#Mire>div>strong { font-size: 32px; line-height: 40px; display: block; text-align: center; font-family: 'MB'; margin: 0 0 32px 0;}
#Mire>div a { font-size: 14px; color: #0a0014; font-family: 'MB'; display: block; margin: 0 0 24px 0; }
#Mire>div>form label { font-size: 14px; color: #0a0014; font-family: 'MB'; display: block; margin: 0 0 8px 0; }
#Mire>div>form label + input { padding: 8px 12px; width: calc(100%); box-sizing: border-box; font-family: 'MR'; border-radius: 6px; font-size: 14px; background: #EEEFF0; border: 0; margin: 0 0 24px 0; }
#Mire>div>form input[type="submit"] { color: #fff; font-family: 'MB'; font-size: 14px; padding: 15px 0; text-decoration: none; border: 2px solid #0a0014; background-color: #0a0014; margin: 0 auto; width: 100%; cursor: pointer;}
#Mire .R a { text-decoration: none; color: #fff; font-family: 'MB'; font-size: 14px; padding: 15px 25px; text-decoration: none; border: 2px solid #0a0014; background-color: #0a0014; margin: 0 auto; cursor: pointer; text-align: center; display: table; }
#Profile { padding: 65px 0; background: #EEEFF0;}
#Profile h1 { font-family: 'MB'; font-size: 56px; line-height: 64px; display: block; text-align: center; margin: 0 0 40px 0;}
#Profile .marble { max-width: 980px; background: #fff; border-radius: 12px; padding: 40px 80px; margin: 0 auto 25px auto; box-sizing: border-box;}
#Profile .marble>strong { font-family: 'MB'; font-size: 28px; line-height: 37px; display: block; text-align: center; margin: 0 0 40px 0;}
#Profile .marble .W { border-bottom: 1px solid #EEEFF0; padding: 16px 0; margin: 0 auto;}
#Profile .marble .W:last-child { border: none;}
#Profile .marble .W a { display: table; background: #0a0014; font-family: 'MB'; color: #fff; font-size: 14px; padding: 14px 24px; text-decoration: none; margin: 10px 0 0 0; }
#Profile .marble .W>div{ display: inline-block; vertical-align: top; width: 49%; font-size: 14px; font-family: 'MR';}
#Profile .marble .W .L { color: #6D6D6D; }
#Profile .marble .W .R { color: #0a0014; font-family: 'MB'; }
#HEC { padding: 65px 0; box-sizing: border-box; background: #EEEFF0; }
#HEC h1 { font-size: 56px; line-height: 64px; font-family: 'MB'; display: block; text-align: center; margin: 0 0 40px 0;}
#Camp { max-width: 980px; margin: 0 auto 65px auto; }
#Camp>strong{ font-family: 'MB'; font-size: 28px; line-height: 37px; display: block; margin: 0 0 20px 0; }
#Camp .c{ background: #fff; padding: 24px 28px; box-sizing: border-box; border-radius: 12px; position: relative; overflow: hidden; margin: 0 0 40px 0;}
#Camp .c:before { content: ''; left: 0; height: 100%; width: 4px; background: var(--bg-amac2); position: absolute; top: 0;}
#Camp .c>strong { font-family: 'MB'; font-size: 20px; line-height: 27px; display: block; margin: 0 0 20px 0;}
#Camp .c .B {font-family: 'MR'; font-size: 14px; margin-bottom: 12px; display:flex; flex-wrap:wrap;}
#Camp .c .B>div{margin-bottom:16px;}
#Camp .c .B span { color: #6d6d6d; margin: 0 30px 0 0;}
#Camp .c .B img {vertical-align: middle; margin: 0 10px 0 0;}
#Camp .c .BR {position:relative; text-align:right;}
#Camp .c .BR>a{ font-family: 'MB'; font-size: 14px; color: #0a0014; }
#Camp .c .BR>a:not(:last-child){ margin: 0 16px 0 0; }
#Camp .c + a { display: block; margin: 0; padding: 32px 0; border: 1px solid #bebebe; border-radius: 12px; text-align: center; font-size: 18px; line-height: 24px; font-family: 'MB'; text-decoration: none; color: #0a0014;}
#Camp .c + a:hover { filter: invert(1); border: 1px solid transparent; background: #fff;}
#Camp .c + a img { display: inline-block; vertical-align: middle; margin: 0 15px 0 0;}
#Camp .c + a img + span { display: inline-block; vertical-align: middle; }
#Sim { max-width: 980px; margin: 0 auto 65px auto; }
#Sim .AN{font-family: 'MR'; font-size: 14px;}
#Sim .AN>img,#Sim .AN>span{display:inline-block;vertical-align:middle;}
#Sim .AN>img{margin-right:10px;}
#Sim>strong{ font-family: 'MB'; font-size: 28px; line-height: 37px; display: block; margin: 0 0 20px 0; }
#Sim .c{ background: #fff; padding: 24px 28px; box-sizing: border-box; border-radius: 12px; position: relative; overflow: hidden; margin: 0 0 40px 0;}
#Sim .c:before { content: ''; left: 0; height: 100%; width: 4px; background: var(--bg-amac2); position: absolute; top: 0;}
#Sim .c>strong { font-family: 'MB'; font-size: 20px; line-height: 27px; display: block; margin: 0 0 20px 0;}
#Sim .c .GB{display:flex; flex-direction:column;}
#Sim .c .B { font-family: 'MR'; font-size: 14px; margin: 0 0 35px 0; display:flex; flex-wrap:wrap;}
#Sim .c .B span { color: #6d6d6d; margin: 0 30px 0 0;}
#Sim .c .B a { color: #6d6d6d; margin: 0 30px 0 0; display: inline-block; vertical-align: middle; text-decoration: none;}
#Sim .c .B img {vertical-align: middle; margin: 0 10px 0 0;}
#Sim .c .BR { text-align: right; }
#Sim .c .BR>a{ font-family: 'MB'; font-size: 14px; color: #0a0014; }
#Sim .c .BR>a:not(:last-child){ margin: 0 16px 0 0; }
#Sim .c .fl { font-size: 16px; font-family: 'MB'; color: #0a0014; text-decoration: none; position: absolute; left: 28px; bottom: 22px; }
#Sim .c .fl a { text-decoration: none; color: #0a0014; margin: 0 10px 0 0;}
#Sim .c .fl .arrow { display: inline-block; vertical-align: -7px; margin: 0 0 0 10px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block; filter: invert(34%) sepia(46%) saturate(1884%) hue-rotate(321deg) brightness(95%) contrast(100%);}
{}
#Camp .c .fl { font-size: 16px; font-family: 'MB'; color: #0a0014; text-decoration: none; position: absolute; left: 28px; bottom: 22px; }
#Camp .c .fl a { text-decoration: none; color: #0a0014; margin: 0 10px 0 0;}
#Camp .c .fl .arrow { display: inline-block; vertical-align: -7px; margin: 0 0 0 10px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block; filter: invert(34%) sepia(46%) saturate(1884%) hue-rotate(321deg) brightness(95%) contrast(100%);}
{}
#Hist { max-width: 980px; margin: 0 auto; }
#Hist>strong{ font-family: 'MB'; font-size: 28px; line-height: 37px; display: block; margin: 0 0 20px 0; }
#Hist .c{ background: #fff; padding: 10px 24px; box-sizing: border-box; border-radius: 12px;}
#Hist .c .line{ padding: 16px 0;}
#Hist .c .line:not(:last-child){ border-bottom: 1px solid #eeeff0; }
#Hist .c .line > *{ width: 33%; display: inline-block; vertical-align: top; font-size: 14px; }
#Hist .c .line > strong { color: #0a0014; font-family: 'MB'; }
#Hist .c .line > span { text-align: center; color: #6d6d6d; font-family:'MR';}
#Hist .c .line > a {text-align: right; color: #0a0014; font-family: 'MB'; }
#Hist>a { margin: 24px auto 65px auto; font-family: 'MB'; font-size: 16px; padding: 16px 24px; background: #0a0014; color: #fff; border: 2px solid #0a0014; display: table; text-decoration: none; }
#Actu{background:#f5f5f5;}
#Actu #Illu {position: relative; }
#Actu #Illu:after{content:'';width:100%;height:10px;bottom:0;position:absolute; background: var(--bg-amac);left:0;}
#Actu #Illu h1 {background-size: cover; background-position: center center; background-repeat:no-repeat; display: flex;justify-content: center; align-items: center;text-transform: uppercase; font-family: 'MB'; font-size: 45px;min-height:150px; /*position: absolute; bottom: 0; left: 0; right: 0; */ margin: auto; text-align: center; color: #fff; background-color: #0a0014; padding: 40px 20px;}
#Actu #Illu .date { font-family: 'MR'; position: absolute; color: #fff; bottom: 24px; right: 0; left: 0; margin: auto; text-align: center; }
#Actu #Illu img{width:100vw;height:auto;}
#Actu #Article h3{color:#0a0014;font-size:24px;font-family: 'MB';margin-bottom:16px;}
#Actu #Article b{font-family: 'MB';}
#Actu #Article { padding: 40px 20px; max-width: 1100px; margin: 0 auto; }
#Actu #Article>strong { font-family: 'MB'; font-size: 16px; line-height: 22px; display: block; margin: 0 0 30px; }
#Actu #Article p { font-family: 'MR'; font-size: 16px; line-height: 28px; display: block; margin: 0 0 16px; text-align: justify;}
#Actu #Article a{font-family:'MB';color:#0a0014;}
#Actu #Article .l b { font-family: 'MB'; font-size: 20px; display: block; margin: 0 0 30px; }
#Actu #Article p>strong { font-family: 'MB'; }
#Actu #Article img { display: block; }
#Actu #Article img.left { margin: 0 0 auto; max-width:100%; height:fit-content;}
#Actu #Article img.center { margin: 0 auto ; max-width:100%; height:fit-content;}
#Actu #Article img.right { margin: 0 0 0 auto; max-width:100%; height:fit-content;}
#Actu #Article>video { display: block; margin: 30px auto; width:100%;}
.calltoaction1 { width: 100%; min-height: 40px; margin: 30px 0; }
.calltoaction1 .L1 { width: 40%; min-height: 185px; display: inline-block; vertical-align: top; background-size: cover; background-position: center center; }
.calltoaction1 .R1 { width: 100%; display: inline-flex;justify-content:center; align-items:center; flex-direction:column; vertical-align: top; box-sizing: border-box; }
.calltoaction1 .R1 span { font-family: 'MB'; font-size: 22px; display: block; margin: 0 0 20px 0; padding: 38px; color:#fff; background:#5E5E5E; text-align:center; width:80%; text-transform:uppercase;width:calc(100% - 38px * 2);}
.calltoaction1 .R1 span > p {text-transform: inherit; font-style: italic; position: relative; font-size: 12px; top: 16px;}
.calltoaction1 .R1 > a { font-family: 'MB'; text-decoration: none; display: table; padding: 15px 25px; border: 2px solid #0a0014; background-color: #0a0014; color: #fff}
.calltoaction1 .R1 > a:hover { border: 2px solid #0a0014; background-color: #fff; color: #000}
.calltoaction1 .R1 > iframe{margin-bottom:16px; width:100%; max-width:1100px;height:619px;}
#Actu #Article ul, #Actu #Article ol{font-size:16px;font-family:'MR';margin-left:16px;margin-bottom:16px;}
#Actu #Article ul{line-height: 28px;}
#Actu #Article ol{list-style:none;line-height: 34px;}
#Actu #Article ol li{position:relative;margin-left:16px;}
#Actu #Article ol li:before{left:-34px;top:4px;color:#fff;background:linear-gradient(90deg, #01ACA9 0%, #49B081 100%);font-family:'MB';position:absolute;content:'';width:28px;height:28px;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
#Actu #Article ol > li:nth-of-type(1):before {content: '1';}
#Actu #Article ol > li:nth-of-type(2):before { content: '2';}
#Actu #Article ol > li:nth-of-type(3):before { content: '3';}
#Actu #Article ol > li:nth-of-type(4):before {content: '4';}
#Actu #Article ol > li:nth-of-type(5):before {content: '5';}
#Actu #Article ol > li:nth-of-type(6):before {content: '6';}
#Actu #Article .rs-share{ margin: auto; margin-bottom: 32px;display: flex; justify-content: center; max-width: 150px; align-items: center;gap: 8px;flex-wrap: wrap;}
#Actu #Article .rs-share a{width:fit-content;height:fit-content;display: inline-block;}
#Actu #Article .rs-share p{text-align: center; font-family: 'MR'; width: 100%; font-size: 16px;}
#Actu #Article .rs-share img{width:40px;cursor:pointer;}
#Actu #Actus{padding:24px 0 0 0;display: flex; flex-wrap: wrap; justify-content: center;gap:24px;}
#Actu #Actus article{width:324px;margin:0;}
#Actu #Actus h2{width:100%;margin-bottom:24px;text-align:center;background: linear-gradient(90deg, #12bf8a 13.37%, #db0f61 76.75%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;text-transform: uppercase;font-size: 30px;}
#Actu #Actus > strong{font-family:'MB';width:100%;margin-bottom:24px;text-align:center;background: linear-gradient(90deg, #12bf8a 13.37%, #db0f61 76.75%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;text-transform: uppercase;font-size: 30px;}
#Actu #Article .calltoaction { width: 100%; min-height: 40px; border-radius: 12px; background-color: #fff; overflow: hidden; box-shadow: 0 0px 20px 0px #d9d9d9; margin: 30px 0; }
#Actu #Article .calltoaction .L { width: 40%; min-height: 185px; display: inline-block; vertical-align: top; background-size: cover; background-position: center center; }
#Actu #Article .calltoaction .R { width: calc(60% - 6px); display: inline-block; vertical-align: top; padding: 10px 20px; box-sizing: border-box; }
#Actu #Article .calltoaction .R span { font-family: 'MB'; font-size: 22px; display: block; margin: 0 0 20px 0;}
#Actu #Article .calltoaction .R span + a { font-family: 'MB'; text-decoration: none; display: table; padding: 15px 25px; border: 2px solid #0a0014; background-color: #0a0014; color: #fff;font-size:14px;color:#fff;}
#Actu #Article .calltoaction .R span + a:hover { border: 2px solid #0a0014; background-color: #fff; color: #000}
#Actu h2 { font-family: 'MB'; font-size: 30px;color: #42d9d9;max-width: 1100px; margin: 0 0 24px 0; }
#Actus { padding: 90px 0 0 0 ;}
#Actus h1 { font-family: 'MB'; color: #0a0014; font-size: 56px; line-height: 64px; margin: 0 auto 30px auto; display: block; max-width: 980px; text-align: center; }
#Actus h1 + p { font-family: 'MR'; color: #0a0014; font-size: 22px; line-height: 26px; margin: 0 auto 60px auto; display: block; max-width: 75%; text-align: center; }
#Actu>#Actus { overflow: auto; white-space: nowrap; padding: 0; max-width: 1100px; margin: 0 auto; }
#Actus #Liste { background-color: #eeeff0; padding: 52px 0 90px 0; text-align: center; }
#Actus #Liste .cont { max-width: 1240px; margin: 0 auto; text-align: left;}
#Actus article { box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow:hidden; border-radius: 16px; margin: 0 20px 35px 20px; width: 370px; height: 435px; background-color:#fff; }
#Actus article .T { height: 218px; width: 100%; background-position: center center; background-size: cover; display: flex; justify-content: center; align-items: center;}
#Actus article .B { box-sizing: border-box; text-align: left; width: 100%; padding: 40px 32px;}
#Actus article .B p { display: block; font-family: 'MR'; font-size: 18px; color: #0a0014; line-height: 24px; text-align: left; white-space: normal; }
#Actus article .B a { display: inline-block; font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 16px 10px 0 0; }
#Actus article .B a:before { content:''; position: absolute; height: 100%; width: 100%; left:0; top: 0;}
#Actus article .B .arrow { display: inline-block; filter: brightness(0) saturate(100%) invert(20%) sepia(61%) saturate(5671%) hue-rotate(344deg) brightness(83%) contrast(108%);vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); width:20px; height: 20px; display: inline-block;}
#Actus article .sticker { position: absolute; top: 200px; left:32px; font-family: 'MB'; font-size: 14px; background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); border-radius: 4px;padding: 6px 12px; text-transform: uppercase; color: #fff; }
#Actus .more { position: relative; margin: 0 0 50px 0;}
#Actus .tri { text-align: center; }
#Actus .tri>span {box-sizing:border-box;text-align:center; margin: 40px 20px; font-family: 'MB'; font-size: 16px; padding: 16px 24px; background: #0a0014; color: #fff; border: 2px solid #0a0014; display: inline-block; text-decoration: none; cursor: pointer; }
#Actus .tri>span.inactive { background:#fff; color: #0a0014; }
#Actus .T .play{background-color: #0a0014; border-radius: 50px; width: 104px; height: 104px; opacity: .65; display: none; justify-content: center; align-items: center;}
#Actus .T .play>div{background-color: #fff;clip-path: polygon(100% 50%, 0 0, 0 100%); width: 40%; height: 50%; position: relative; left: 6px;}
#Actus article[data-tag="LE hAMAC"]>div.T .play, #Actus article[data-tag="LE FEED"]>div.T .play { display:flex;}
#Une .T .play{background-color: #0a0014; border-radius: 50px; width: 104px; height: 104px; opacity: .65; display: none; justify-content: center; align-items: center;}
#Une .T .play>div{background-color: #fff;clip-path: polygon(100% 50%, 0 0, 0 100%); width: 40%; height: 50%; position: relative; left: 6px;}
#Une article[data-tag="LE hAMAC"]>div.T .play { display:flex;}
#moreActu { display: none; }
#moreActu ~ label > span.but { margin: 40px auto 40px auto; font-family: 'MB'; font-size: 16px; padding: 16px 24px; background: #0a0014; color: #fff; border: 2px solid #0a0014; display: table; text-decoration: none; cursor: pointer; }
#moreActu ~ label > span.but:hover { background:#fff; color: #0a0014; }
#moreActu + label ~ * { display: none; }
#moreActu:checked + label { position: absolute; bottom: -100px; left: 0; right: 0; margin: auto; }
#moreActu:checked + label ~ *:not(.m) { display: inline-block; }
#moreActu:checked ~ .p { display: none; }
#moreActu:checked ~ .m { display: table; margin: 0 auto; }
#QSM #Checkerboard2 .W>div { padding: 0 128px 0 128px; }
#TCGV #Checkerboard2 { background-color: #eeeff0; overflow:hidden;}
#TCGV #Checkerboard2 .W>div { background-color: #eeeff0; height:fit-content;min-height:500px;}
#Actu .filAriane{position:relative;}
.filAriane {width:calc(100% - 31px - 16px); height:20px; background:#fff; font-family:'MR'; padding:16px 16px 16px 31px; display:flex; font-size:14px; position:absolute;z-index:1;margin-top:4px;}
.filAriane >div{margin:0 auto;width:1100px;}
.filAriane a {list-style:none; color:#0a0014; }
.filAriane a:not(:last-child):after{content:">"; text-decoration:none; color:rgba(0, 172, 169, 1); display:inline-block; margin:0 8px;}
.filAriane a:last-child{text-decoration:none; pointer-events:none}
#ContactMe{width:100%; background:#fff;display:flex; align-items:center; justify-content:center;padding: 96px 0 60px 0;gap:24px;position:relative;flex-wrap:wrap;}
#ContactMe strong, #ContactMe h2{ font-family: "AB"; font-size: 34px; line-height: 40px; color: #0a0014; display: block;position:absolute;top:40px;}
#ContactMe > div{ box-sizing: border-box; background-image: linear-gradient(white, white), var(--bg-amac); background-origin: border-box; background-clip: content-box, border-box; width:620px; height:627px; border-radius: 16px;padding: 2px;display: flex; flex-direction: column; justify-content: center; align-items: center;max-width:90%;}
#ContactMe > div p{font-family: 'MR';}
#ContactMe > div p:nth-of-type(1){font-size: 38px;margin-bottom:16px;}
#ContactMe > div p:nth-of-type(2){font-size: 30px;margin-bottom:40px;}
#ContactMe > div a{font-family: 'MR';font-size:30px;color:#0a0014; align-self:flex-start;margin-left:112px;font-weight:400;}
#ContactMe > div a:nth-of-type(1){margin-bottom:41px;text-decoration:none;}
#ContactMe > div a:nth-of-type(1):before{content:"";position:absolute;background:url('https://static.s-sfr.fr/iconelettre.svg');background-position:center;background-size:contain;width:45px;height:51px;margin-top:-7px;margin-left:-65px;background-repeat: no-repeat;}
#ContactMe > div a:nth-of-type(2):before{content:"";position:absolute;background:url('https://static.s-sfr.fr/iconephone.svg');background-position:center;background-size:contain;width:45px;height:45px;margin-top:-7px;margin-left:-65px;background-repeat: no-repeat;}
#ContactMe > div .T{width:300px;height:300px;background-size:cover;border-radius:50%; background-position:center;margin-bottom:16px;}
#OffrePromo{width:100%;height:450px;background-size:cover;background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)),url(https://static.s-sfr.fr/abillage-0012-adobestock-141158332-1.webp);background-position: bottom center;display:flex;flex-direction:column;align-items:center;justify-content: space-evenly;}
#OffrePromo h1{font-size:42px;text-transform:uppercase;font-family:'bfmB';color:#ec9206;text-align:center;width:70%;margin-bottom:16px;}
#OffrePromo p{bottom:14px;font-size:26px;text-transform:uppercase;font-family:'bfmH';border:8px solid #fff;padding:8px 16px;color:#fff;filter: drop-shadow(0px 0px 10px rgba(30, 144, 255, 0.75));max-width:90%;width:calc(945px - 32px - 16px);text-align:center;position:relative;margin-bottom:calc(16px + 8px);}
#OffrePromo p span{font-family:'bfmB';}
#OffrePromo div{bottom:25px;max-width:90%;display:flex;align-items:flex-start;justify-content:center;gap:16px 32px;flex-wrap:wrap;width:945px;position: relative;margin-bottom:16px;}
#OffrePromo div img{width:65px;height:auto;}
#OffrePromo a{text-decoration: none;display: table; padding: 15px 25px; border: 2px solid #0a0014; color: #fff;background-color: #0a0014; margin: 0 auto; font-family: 'MB'; font-size: 16px;}
#OffrePromo a:hover{color:#0a0014;background-color:#fff;}
#Vbfmr{ background-color: #EEEFF0; padding: 60px 1%; }
#Vbfmr video{ display: block;width: 980px; margin: 0px auto 0px auto; border-radius: 16px;}
#TIT{padding:48px 24px;background-color: #eeeff0;}
#TIT h2{font-family: "AB"; font-size: 34px; line-height: 40px; color: #0a0014; display: block;text-align:center;margin-bottom:24px;}
#TIT p{font-family: 'MR'; font-size: 18px; line-height: 26px;max-width:1440px;margin:0 auto;}
#TIT p > b{font-family: "AB";background:linear-gradient(90deg, #42d9d9 0%, #49B081 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;text-fill-color: transparent;}
#N2 #Checkerboard2 .W>div p, #N2 ul{font-size: 18px; line-height: 26px;}
#N2 #Checkerboard2 .W>div p a{color:#0a0014;}
#N2 #Checkerboard2 .W>div{padding: 50px 128px 0 128px;display: grid; grid-row: span 12; grid-template-rows: subgrid;}
#N2 ul{margin-bottom:16px;}
#Info>div .logo{width:265px;}
#NosOffres{margin-top:52px;}
#NosOffres h1{font-family: 'MB';font-size: 56px;line-height: 64px; margin: 64px auto 34px auto; display: block; margin-block: 0; text-align: center;max-width: 980px;}
#NosOffres #Liste .cont{max-width: 1240px; margin: 0 auto; text-align: left;margin-top:48px;padding:0 16px;}
#NosOffres .tri{display: inline-flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
#NosOffres .tri:first-of-type{width:calc(100% - 160px);margin:0 0 24px 0;}
#NosOffres .tri:last-of-type{width:calc(100% - 250px);}
#NosOffres .tri > span{text-transform:uppercase;margin: 0 10px 20px 10px; font-family: 'MB';font-size: 16px;padding: 16px 24px; background: #0a0014; color: #fff; border: 2px solid #0a0014; display: inline-block; text-decoration: none;cursor: pointer;}
#NosOffres .cont > p{display:inline-block;font-family:'MR';width:165px;}
#NosOffres .tri > span.inactive {background: #fff; color: #0a0014;}
#NosOffres .allArticles{margin-top:48px;display:flex;justify-content:center;flex-wrap:wrap;}
#NosOffres .article{box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow: hidden; border-radius: 16px; margin: 0 20px 35px 20px;width: 370px; height: 550px;background-color: #fff;border: 1px solid #0a0014;}
#NosOffres .article .T{width:100%;height:368px;background-repeat: no-repeat;background-size: cover; background-position: center;}
#NosOffres .stick{padding: 8px 16px;border-radius: 50px;font-family: 'MR';font-size: 14px;transition:all .3s;display: inline-block;}
#NosOffres .stick.red{background: #BD0000;color: #fff;}
#NosOffres .compt {display:block;margin:24px 0 0 0;}
#NosOffres article .stick{position: absolute;right: 16px;top: 16px;animation: scalePulse 1s infinite;}
@keyframes scalePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#NosOffres .article .B{padding:24px;}
#NosOffres .article .B strong{font-family: 'MB';font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;}
#NosOffres .article .B p{font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;font-family:'MR';margin:8px 0;height:50px;}
#NosOffres .article .B a {display: inline-block;font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 16px 10px 0 0;}
#NosOffres .article .B a:before { content: ''; position: absolute; height: 100%; width: 100%;left: 0; top: 0;}
#NosOffres .article .B a:after{content:'';filter: brightness(0) saturate(100%) invert(20%) sepia(61%) saturate(5671%) hue-rotate(344deg) brightness(83%) contrast(108%);vertical-align: -8px;background-size: contain;background-repeat: no-repeat;background-image: url("data:image/svg+xml;utf8,");
width: 20px;height: 20px;display:inline-block;margin-left:8px;}
#NosOffres .article .sticker { position: absolute;left: 24px; bottom: 165px; font-family: 'MB'; font-size: 14px; background: linear-gradient(90deg, #12bf8a 0%, #db0f61 100%); border-radius: 4px;padding: 6px 12px; text-transform: uppercase; color: #fff; }
#NosOffres2 .ban{width:100%;height:230px;color: #fff; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center;background-position:center;margin-top:52px;}
#NosOffres2 .ban h1{font-family:'MB';font-size:40px;text-align:center;text-transform:uppercase;}
#NosOffres2 .ban p{font-family:'MR';font-size:32px;text-align:center;}
#NosOffres2 .chiffres {display: flex; justify-content: space-around; align-items: center; padding: 24px;}
#NosOffres2 .chiffres .l, #NosOffres2 .chiffres .r{width:40%;display:flex;gap:16px; flex-wrap:wrap;}
#NosOffres2 .chiffres .l{justify-content: center; align-items: center;}
#NosOffres2 .chiffres .l img{height:90px;}
#NosOffres2 .chiffres .m{height:150px;width:5px;background: linear-gradient(0deg, #42d9d9 0%, #12bf8a 29.74%, #db0f61 63.19%, #E84250 100%);}
#NosOffres2 .chiffres .r{align-items: center; justify-content: space-evenly;font-family:'MR';text-transform:uppercase;}
#NosOffres2 .chiffres .r > div{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px}
#NosOffres2 .chiffres .r > div img{width:90px;}
#NosOffres2 .chiffres .r > div p{font-size:15px;}
#NosOffres2 .descOffre{display:flex;}
#NosOffres2 .descOffre > div{width:50%;box-sizing:border-box;}
#NosOffres2 .descOffre .l{background-size:cover;background-position:top center;}
#NosOffres2 .descOffre .r{background-color:#EEEFF0;padding:24px;}
#NosOffres2 .descOffre .r h2{color: #0a0014; font-family: 'MB'; font-size: 24px; line-height: 40px;margin-bottom:24px;}
#NosOffres2 .descOffre .r p{font-family: 'MR';font-size:14px;margin-bottom:24px;padding-right:36px;}
#NosOffres2 .descOffre .r ul{font-family: 'MR';font-size:14px;margin-bottom:36px;margin-left:16px;padding-right:108px;min-height:32px;}
#NosOffres2 .descOffre .r .kpi{background: linear-gradient(90deg, #42d9d9 0%, #12bf8a 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 22px;font-family:'MB';}
#NosOffres2 .descOffre .r i{font-family: 'MR';font-size:14px;text-align:right;display:block;}
#NosOffres2 .descOffre .r .card{padding:16px; background-color:#D3D3D3;position:relative;min-height:120px;}
#NosOffres2 .descOffre .r .card:not(:last-of-type){margin-bottom:24px;}
#NosOffres2 .descOffre .r .card li:not(:last-of-type){margin-bottom:8px;}
#NosOffres2 .descOffre .r .card img{position: absolute; right: 16px; top: 16px; width: 90px;}
#NosOffres2 #Campaign strong{margin-bottom:24px;display:block;}
#NosOffres2 #Campaign a:not(:last-of-type){margin-bottom:24px;}
#NosOffres2 #Campaign .yellow{color:#db0f61;}
#Plusart{margin-top:48px;}
#Plusart > h2, #Plusart > strong{text-align: center;font-family: 'MB';font-size: 27px;line-height: 40px; text-transform: uppercase;display:block;margin-bottom:48px; background: linear-gradient(90deg, #12bf8a 13.37%, #db0f61 76.75%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Plusart > div{margin: 48px auto 0 auto;width:fit-content;padding:24px;display:flex;justify-content:center;flex-wrap:wrap;}
#Plusart .article { box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow: hidden; border-radius: 16px; margin: 0 20px 35px 20px; width: 370px; height: 546px; background-color: #fff; border: 1px solid #0a0014;margin-bottom:16px;}
#Plusart .article .T { width: 100%; height: 368px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#Plusart .article .B { padding: 24px;}
#Plusart .article .B strong { font-family: 'MB'; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal;}
#Plusart .article .B p { font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; font-family: 'MR'; margin: 8px 0;height:50px;}
#Plusart .article .B a { display: inline-block; font-family: 'MB'; text-decoration: none; font-size: 16px; color: #0a0014; margin: 16px 10px 0 0;}
#Plusart .article .B a:before { content: ''; position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
#Plusart .article .B a:after { content: '';filter: brightness(0) saturate(100%) invert(14%) sepia(76%) saturate(5628%) hue-rotate(347deg) brightness(85%) contrast(100%); background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,");
width: 16px; height: 13px; display: inline-block; margin-left: 8px;}
/* #SolutCom{background: var(--Grey, #EEEFF0);text-align:center;padding:64px 0;}
#SolutCom h3{font-size: 34px;font-style: normal;font-weight: 700;line-height: 40px;font-family:'MB';margin:0 0 8px 0;}
#SolutCom p{font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;font-family:'MR';}
#SolutCom .B{width:calc(100% - 48px);margin:32px auto 0 auto;max-width}
#SolutCom .B > div {border-radius: 16px;background:#fff;width: 368px;padding:32px;text-align:left;}
#SolutCom .B > div strong{font-size: 20px;font-family:'MB';}
#SolutCom .B > div p{margin:8px 0 24px 0;}
#SolutCom .B > div a{font-family: 'MB';text-decoration: none;font-size: 16px;color: #0a0014;margin: 16px 10px 0 0;}
#SolutCom .B > div a:after{content:'';vertical-align: -8px;background-size: contain;background-repeat: no-repeat;background-image: url("data:image/svg+xml;utf8,");
width: 20px;height: 20px;display:inline-block;margin-left:8px;} */
#Faq{font-family:'MR';padding:52px 0;background: #EEEFF0;}
#Faq h2{font-size:24px;font-family:'MB';}
#Faq > div{margin:auto;max-width:calc(100% - 32px);width:1280px;display:flex; flex-direction: column; gap: 24px;}
#Faq h1{font-family: 'MB'; font-size: 56px; line-height: 64px; margin: 64px auto 34px auto; display: block; margin-block: 0; text-align: center; max-width: 980px;}
#Faq h1 + p { display: block; font-family: 'MR'; font-size: 24px; margin: 16px auto; text-align: center;}
#BlocFaq {display:flex;gap: 16px 48px;width:calc(100% - 48px);max-width:1280px;margin:48px auto;flex-wrap:wrap;}
#BlocFaq input[type="checkbox"]{display:none;}
#BlocFaq input[type="checkbox"]:checked + label svg{transform: rotate(180deg);transition:all .3s;}
#BlocFaq label{flex:1;position:relative;border-radius: 16px; background-image: linear-gradient(#fff, #fff), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box;border: 1px solid transparent;}
#BlocFaq label > div{min-height:250px;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:16px 16px 0 16px;}
#BlocFaq label > div:hover svg{transform:translateY(-8px);}
#BlocFaq label > div img{height:100px;max-width:100%;}
#BlocFaq label > div strong{font-size:24px;max-width:100%;text-align:center;}
#BlocFaq label > svg{width:35px;position:absolute;bottom:16px;left:0;right:0;margin:auto;transition: all .2s cubic-bezier(.4,0,.2,1);}
#BlocFaq .subFaq{width:100%;border-radius: 16px; background-image: linear-gradient(#fff, #fff), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box;border: 1px solid transparent;display:none;}
#BlocFaq .subFaq > div{padding:24px;}
#BlocFaq .subFaq h2{font-family:'MB';margin: 0 0 16px 0;font-size:24px;}
#BlocFaq .subFaq a{color:#0a0014;text-decoration:none;display:block;transition:all .2s;font-size:18px;}
#BlocFaq .subFaq a:after{content:'';transition:all .3s;width: 20px; height: 20px; display: inline-block; vertical-align: -6px; margin: 0 0 0 10px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,");}
#BlocFaq .subFaq a:hover{font-weight:700;}
#BlocFaq .subFaq a:hover:after{transform:translateX(5px);}
#BlocFaq .subFaq a:not(:last-of-type){margin:0 0 16px 0;}
#BlocFaq #checkboxFaq1:checked ~ #SubFaq1{display:block;}
#BlocFaq #checkboxFaq2:checked ~ #SubFaq2{display:block;}
#BlocFaq #checkboxFaq3:checked ~ #SubFaq3{display:block;}
#FaqN1{font-family:'MR';}
#FaqN1 .ban { width: 100%; height: 230px; color: #fff; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; background-position: center; margin-top:52px;}
#FaqN1 .ban h1 { font-family: 'MB'; font-size: 45px; text-align: center;}
#FaqN1 .ban p { font-family: 'MR'; font-size: 32px; text-align: center;}
#Connexion{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;}
#Connexion p{font-size:14px;}
#Connexion img{width:38px;}
#FaqDer{width: calc(100% - 48px); max-width: 1280px; margin: 24px auto;}
#FaqDer strong{font-size:24px;display:block;text-align:center;margin-bottom:24px;}
#FaqDer .details{border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; border: 1px solid transparent;}
#FaqDer .details:not(:last-of-type){margin-bottom:24px;}
#FaqDer .details .summary{padding:0;list-style:none; border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; border: 1px solid transparent;}
#FaqDer .details .summary div{padding:24px;font-size:21px;display:flex;align-items:center;position:relative;}
#FaqDer .details:nth-of-type(1) .summary div:before{content:'1';}
#FaqDer .details:nth-of-type(2) .summary div:before{content:'2';}
#FaqDer .details:nth-of-type(3) .summary div:before{content:'3';}
#FaqDer .details:nth-of-type(4) .summary div:before{content:'4';}
#FaqDer .details:nth-of-type(5) .summary div:before{content:'5';}
#FaqDer .details .summary div:before{color: #fff; background: linear-gradient(90deg, #01ACA9 0%, #49B081 100%); font-family: 'MB';width: 38px; height: 38px; font-size: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;margin-right:16px;}
#FaqDer .details > div{padding:24px;font-size:18px;}
#FaqDer .details > div a{text-decoration:none;color:#0a0014;}
#FaqDer .details > div .btn{font-family: 'MB'; text-decoration: none; display: table; padding: 15px 25px; border: 2px solid #0a0014; background-color: #0a0014; color: #fff; font-size: 14px; margin-top:16px;}
#FaqDer .details[open] svg{transform:rotate(180deg);}
#Galle h1{font-size:56px;font-family:'MB';line-height:64px;text-align:center;margin:64px 0;}
#Liste .cont .tri.marque{width:1280px;max-width:calc(100% - 32px);display:flex;flex-wrap:wrap;gap:16px;margin: 40px auto;justify-content: center;}
#Liste .cont .tri.marque span{box-sizing: border-box;text-align: center;font-family: 'MB';font-size: 16px;padding: 16px 24px;background: #0a0014;color: #fff;border: 2px solid #0a0014;display: inline-block;text-decoration: none;cursor: pointer;}
#Liste .cont .tri.marque span.inactive{background: #fff;color: #0a0014;}
#Gvid{max-width: 1240px;width:calc(100% - 32px); margin: 0 auto 64px auto;display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
#Gvid .vidContainer{font-size:21px;font-family:'MR';text-align:center;}
#Gvid .vidContainer a{width:100%;height:218px;display:block;border-radius:8px;margin:16px 0 0 0; position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;}
#Gvid .vidContainer a .play{background-color: #0a0014; border-radius: 50px; width: 104px; height: 104px; opacity: .65; display: flex; justify-content: center; align-items: center;}
#Gvid .vidContainer a .play > div{background-color: #fff; clip-path: polygon(100% 50%, 0 0, 0 100%); width: 40%; height: 50%; position: relative; left: 6px;}
#Equi section{max-width:1280px;width:calc(100% - 32px);margin: 48px auto;}
#Equi h2{font-family:'MB';line-height:72px;font-size:48px;}
#Equi h3{font-family:'MR';line-height:72px;font-size:48px;flex: 1 1 100%;}
#Equi .eqContainer{display:flex;gap:20px;flex-wrap:wrap;}
#Equi .eqCard{position:relative; max-width:320px; display:flex; flex-direction: column; justify-content: space-between;border: 1px solid transparent; border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; }
#Equi .eqCard .T{width: 150px; height: 150px; background-size: cover; border-radius: 50%; background-position: top center;margin:16px auto 0 auto;}
#Equi .eqCard p{font-size:14px;font-family:'MR';margin:0 16px 16px 16px;}
#Equi .eqCard p.name{font-family:'MB'; margin:16px 16px 8px 16px;font-size:18px;}
#Equi .eqCard a{margin:16px;text-decoration: none; font-family: 'MB'; color: #0a0014; font-size: 16px; line-height: 21px; position: relative;display:block;}
#Equi .eqCard a:after{content: '';width: 20px; height: 20px; display: inline-block; margin-left: 8px; vertical-align: -8px; background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');}
.enc.active{box-shadow: 8px 8px 4px 0px rgba(0, 0, 0, 0.25);background: var(--bg-amac);margin: 0; padding: 2px; box-sizing: border-box;}
.enc.active > .container{box-sizing: border-box; background-color: #EEEFF0; border-radius: 12px;height:100%;padding: 16px 24px;margin:0;}
/* New article */
#Actu.newArticle #Illu h1{background:none;min-height:unset;padding:0;margin:0 auto 48px auto;max-width:calc(100% - 32px);width:1280px;}
#Actu.newArticle #Illu{padding:132px 0 24px 0;}
#Actu.newArticle #Illu > div{margin:auto;width:fit-content;max-width:calc(100% - 32px);}
#Actu.newArticle #Illu p{color:#fff;font-family:'MR';}
#Actu.newArticle #Illu p:first-of-type{margin:0 0 24px 0;}
#Actu.newArticle #Illu p:first-of-type:before{content:'';background:url(https://static.s-sfr.fr/clock.png);background-size:contain;width:24px;height:24px;display:inline-block;position:relative;top:6px;margin:0 8px 0 0;}
#Actu.newArticle #Illu p:last-of-type:before{content:'';background:url(https://static.s-sfr.fr/calendar.png);background-size:contain;width:24px;height:24px;display:inline-block;position:relative;top:6px;margin:0 8px 0 0;}
#Actu.newArticle #Article{display: flex;gap: 60px;}
#Actu.newArticle #Article .l{flex:100%;height: fit-content;position: sticky;top: 48px;max-width:25%;}
#Actu.newArticle #Article .l .rs-share{margin:0; justify-content: flex-start;}
#Actu.newArticle #Article .l .rs-share p{font-family:'MB';margin:0;}
#Actu.newArticle #Article .l > b{margin: 0 0 16px 0;}
#Actu.newArticle #Article .l ul{list-style: none; margin: 0 0 16px 0;line-height:28px;}
#Actu.newArticle #Article .l ul li{padding:0 0 8px 0;border-bottom:1px solid #0a001436;}
#Actu.newArticle #Article .l ul li a{color:#0a0014;text-decoration:none;font-family:'MR';}
#Actu.newArticle #Article .l ul li a:hover{color:#42d9d9;}
#Actu.newArticle #Illu:after{content:none;}
#Actu.newArticle .artline{width:0%;overflow:hidden;position: sticky;top:0;transition: width 0.2s;z-index:99;}
#Actu.newArticle .artline > div{width: 100vw; height: 10px; background: var(--bg-amac);}
#Actu #Article .pert > div b, #Actu #Article .pert > div p{margin:0;}
#Actu #Article .pert > div b{font-size:24px;}
#Actu #Article .pert > div p{font-size:18px;}
#Faq details{display: block; border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; border: 1px solid transparent;border-bottom: 0;position:relative;}
#Faq details summary{padding:0;font-size:21px;display:flex;align-items:center;position:relative;list-style: none; border-radius: 16px; background-image: linear-gradient(white, white), linear-gradient(96.43deg, #db0f61 2.1%, #E84250 107.13%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; border-bottom: 1px solid transparent; cursor:pointer;outline: none;}
#Faq details summary::-webkit-details-marker {display: none;}
#Faq details summary:before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;}
#Faq details summary > div{padding: 24px 64px 24px 24px;font-size: 21px;display: flex;align-items: center;position: relative;}
#Faq details:nth-of-type(1) summary > div:before{content:'1';}
#Faq details:nth-of-type(2) summary > div:before{content:'2';}
#Faq details:nth-of-type(3) summary > div:before{content:'3';}
#Faq details:nth-of-type(4) summary > div:before{content:'4';}
#Faq details:nth-of-type(5) summary > div:before{content:'5';}
#Faq details summary > div:before{color: #fff; background: linear-gradient(90deg, #01ACA9 0%, #49B081 100%); font-family: 'MB';min-width: 38px; min-height: 38px; font-size: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;margin-right:16px;}
#Faq details > div{padding:24px;}
#Faq details > div a{display: inline-block; vertical-align: middle; color: #fff; font-family: 'MB'; font-size: 16px; padding: 15px 25px; text-decoration: none; border: 2px solid #0a0014; background-color: #0a0014; margin: 16px 0 0 0;}
#Faq details[open]{border-bottom:1px solid transparent;}
#Faq details:before { content: ''; display: block; width: 35px; height: 35px; position: absolute; background: url('data:image/svg+xml,'); background-size: contain; z-index: 99; background-repeat: no-repeat; background-position: center; right: 24px; top: 26px; transition:all .15s ease-in-out;}
#Faq details[open]:before{transform:rotate(180deg);top:32px;}
.pert{width:100%;border-radius:30px;padding:16px 32px;display:flex;justify-content: space-between;align-items: center;background:url(https://static.s-sfr.fr/pertinance.png);background-size:175%;background-position:center;color:#fff;box-sizing:border-box;}
.pert > div{display:flex;}
.pert > div:first-of-type{flex-direction:column;}
.pert > div:last-of-type{gap:8px}
.pert img{width:64px;height:64px;}
#Avis{padding:40px 16px;font-family:'MR';position:relative;}
#Avis > *{max-width:1440px;margin:auto;}
#Avis h2{text-align:center;font-family:'MB';font-size: 34px;line-height: 40px;margin:0 auto 24px auto;}
#Avis .cont{width: 1280px;max-width: calc(100% - 32px);position:relative;padding:0 84px;box-sizing:border-box;}
#Avis .slider{display:flex;gap:40px;margin: 0 auto 24px auto;flex-wrap: nowrap; scroll-snap-type: x mandatory; overflow-x: scroll; max-width: none;overflow: -moz-scrollbars-none;-ms-overflow-style: none;scrollbar-width: none;}
#Avis .slider .hidden{opacity:.5;}
#Avis .slider .AvCard:last-of-type{margin:0 100% 0 0;}
#Avis .slider .AvCard{min-width:30%;max-width:30%;border:1px solid #0a0014;border-radius:16px;overflow:hidden;scroll-snap-align: start;}
#Avis .slider .AvCard .T{padding:24px;background:#0a0014; color:#fff;display:flex;gap:8px; align-items:center;justify-content:center;font-family:'MB';flex-direction:column;}
#Avis .slider .AvCard .T .logo{width:72px;height:72px;border-radius:16px;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:42px;}
#Avis .slider .AvCard .B{padding:16px;display:flex;flex-direction:column;gap:8px}
#Avis .slider .AvCard .B strong{text-align:center;font-family:'MB';}
#Avis .slider .AvCard .B .star{margin:auto;gap:6px; display:flex;}
#Avis .slider .AvCard .B .star img{height: 21px;width: 21px;filter: invert(84%) sepia(19%) saturate(5971%) hue-rotate(0deg) brightness(105%) contrast(103%);display: inline-block;vertical-align: middle;}
#Avis nav > button{background: #0a0014;border: 0;border-radius: 50%;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;position:absolute;top:15px;bottom:0;margin:auto;cursor:pointer;}
#Avis nav > button img{width:21px;}
#Avis nav > .btnL{left:0;}
#Avis nav > .btnR{right:0;}
#Avis > a {text-decoration:none;color:#0a0014;background-color:#fff;margin:auto;display:block;width:fit-content;font-family:'MB';padding:12px 24px;border:1px solid #0a0014;transition:all .2s;}
#Avis > a:hover{color:#fff;background-color:#0a0014;}
#mobnav{display:none;}
#Avis .indicator{height:8px;width:8px;transition:all .3s;background: linear-gradient(270deg, #2D78BB 0%, #55B5B3 16.39%, #1DB376 32.79%, #ACBE47 48.21%, #F4C634 64.61%, #F58B40 81%, #E7352A 96.43%);border-radius:12px;cursor:pointer;}
#Avis .indicator.active{width:28px;}
#Avis .mobnav{display:none;}
#Contact .btn{max-width: 100%;width:fit-content;text-align:center;display: block;border: 2px solid #0a0014;color: #fff;font-family: 'MB';padding: 14px 25px;background-color: #0a0014;margin: 40px auto 0 auto;cursor: pointer;margin:40px auto 0;text-decoration:none;}
#Contact .btn:hover {color: #0a0014;background-color:#fff;}
@media all and (max-width: 1100px) {
#Actu #Article .calltoaction1 .R1 > iframe{height:442px;}
#N1 h1 { padding : 0 20px;}
#N1 h1 + p { padding: 0 20px; }
#N1 #Board { max-width: unset; min-width: unset; width: auto; }
/*Configurateur*/
#Fin .L,#Fin .R { width:90%; margin:20px auto;}
#Fin .off{display:block; width:90%; margin: 15px auto;}
#Fin .acc{padding:12px;}
#Fin h1{font-size: 26px;line-height: 36px;}
#C .c>.L{width:100%;}
#C .c>.R { width:100%;margin: 20px auto;}
#C{width: 100%;padding: 40px 30px;}
#C.brbn + .pi {width:auto;}
#C a.prev,#C a.next {padding: 14px 22px;}
#C input[type="checkbox"] + label{margin:0 auto;}
#Pop .c h2 {font-size:24px;line-height:34px;}
#C h1 {font-size: 20px; line-height: 28px;}
#C h1 + p { font-size: 16px;line-height: 21px;}
#Fin h1{padding:6px 18px;}
/*Recap*/
/* #HC {overflow:scroll;} */
#Recap>.L,#Recap>.R{display:block;width:100%;}
#Recap>.L .line>.r,#Recap>.L .line>.l {display: block;width:100%;margin-bottom: 15px;}
#Recap .bl .o,#Recap>.L .bl .reco .off{display:block;}
#Recap>.L .bl .reco .off{width:90%;margin: 20px auto;padding:18px;}
#Recap .bl .o{margin: 40px auto 20px;}
#Recap>.R a.full,#Recap>.R a.empt { margin: 20px auto;width:90%;}
#Recap>.R .fac {border-radius: 0 0 12px 12px;}
#Recap>.L .bl {padding: 40px 30px}
#Recap>.L .bl .reco{ width:100%;margin:50px auto;}
#Recap>.L .bl .reco p {padding:0 8px;}
#Recap>.L .bl .reco .off .T strong + span {font-size: 16px;line-height: 27px;}
#Recap>.L .bl .reco .off .T strong + span > strong {font-size:20px;}
#Recap h1 {font-size: 30px;line-height: 40px;}
#Recap .bl.brbn + .pi{margin: -25px auto 24px auto;}
#Recap>.L .bl h2+p{margin: 20px auto;}
/*bannière JO2024*/
#HP #Timer{height: 124px;}
#HP #Timer h2{font-size: 30px;}
#HP #Timer > div{bottom:0px; align-items: center; flex-direction: column;}
#HP #Timer > div > div {margin-right:10px;position: relative; bottom: 3px;}
#HP #Timer > div > div > .clock{margin-top: 0px; width: 151px;}
#HP #Timer > div > div > .clock .time:not(:last-child){margin-right: 10px;}
#HP #Timer >div > div > .clock .time span{font-size: 20px;}
#HP #Timer > div > div > .clock .time .timereg{font-size:12px; position: relative; bottom: 5px;}
#HP #Timer > div img{width: 72px; height: auto;}
/*gab2*/
#HP #Answers .R .c{display:block;margin: 20px 10px;padding: 10px 0;width: 281px;height: 117px;}
#HP #Answers .R .c span,#HP #Answers .R .c a{position:relative;}
#HP #Answers .R .c svg, #HP #Answers .R .c img{margin:0px 0px 0px 15px;width:80px;position:relative;top:8px;}
#HP #Answers .R .c img{display:block;}
#HP #Answers .R .c svg +span, #HP #Answers .R .c img +span {margin: -79px 0px 23px; margin-left: 25px;font-size: 20px;line-height: 27px;}
#HP #Answers .R .c svg + #S1, #HP #Answers .R .c img + #S1 {margin: -65px 0px 23px; margin-left: 0;}
#HP #Answers .R .c svg + #S3, #HP #Answers .R .c img + #S3 {margin: -65px 0px 23px; margin-left: 74px;}
#HP #Answers .R .c a {margin-left: 100px;}
#HP #What .num,#HP #What video { width:100%;}
#HP #What .num .k {width: 30%;}
#HP #Answers .L strong {font-size:24px;line-height:34px;}
#HP #Answers .L {width: 320px;margin: 31px 22px;vertical-align:top;}
#HP #Answers,#HP #Une,#HP #Brands{padding: 40px 36px 60px 36px;}
#HP #Top h1 { width:500px; text-align:center;}
#HP #Top p { margin:0 80px;}
#HP #Broadcast {position: relative;padding: 40px 0px 0px 24px; overflow:hidden;}
#HP #Broadcast .R {width: calc( 100% - 48px);display:block;margin:auto;max-width:100%;position:absolute; top:40px;padding: 0px 24px 0px 0px;}
#HP #Broadcast .L {height:600px; margin-top:135px; width:577px;}
#HP #Broadcast .L .Mrect{width:48px;height:48px; border-radius:8px;}
#HP #Broadcast .L .Mrect > a > img{width:32px; height:32px;}
#HP #Broadcast .L > :nth-child(1){margin-left: 27px;margin-top: 74px;}
#HP #Broadcast .L > :nth-child(2){margin-left: 154px; margin-top: 34px;}
#HP #Broadcast .L > :nth-child(3){margin-left: 193px; margin-top: 125px;}
#HP #Broadcast .L > :nth-child(4){margin-left: 383px; margin-top: 8px;}
#HP #Broadcast .L > :nth-child(5){margin-left: 560px; margin-top: 135px;}
#HP #Broadcast .L > :nth-child(6){margin-left: 392px; margin-top: 195px;}
#HP #Broadcast .L > :nth-child(7){margin-left: 449px; margin-top: 279px;}
#HP #Broadcast .L > :nth-child(8){margin-left: 567px; margin-top: 406px;}
#HP #Broadcast .L > :nth-child(9){margin-left: 524px; margin-top: 460px;}
#HP #Broadcast .L > :nth-child(10){margin-left: 304px; margin-top: 435px;}
#HP #Brands .cont {margin: 0px auto;}
#HP #Brands .cont .rect{margin-bottom: 10px;}
/* #HP #Brands .cont .rect img {margin-top: 3px;}*/
#HP #Une>div {white-space: nowrap;overflow:scroll;}
#HP #Une article { margin: 0 30px 30px 30px;}
#HP #Une article .B,#HP #Une .more .inside{ white-space: normal;}
#HP #Une .actu {justify-content:center;}
#H .T .C,#H .B{width:100% !important;}
#Seo .W {padding: 0px 50px;}
#Campaign p {padding:0 100px;}
/*marque*/
#Brand #Entries,#Offers{ /*white-space:nowrap;overflow:scroll;*/padding: 40px 0 50px 0;}
#Offers .o { padding: 40px 0 50px 0;}
#Brand #Entries .sq,#Offers .sq{white-space:normal;}
#Brand #Showoff,#Brand #Top{height:auto;}
#Brand #Showoff .L,#Brand #Showoff .R{display:block; width:100%; margin:0;max-width:100%;}
#Brand #Showoff .L{height:650px;}
#Brand #Showoff2 .R .c, #Brand #Showoff .R .c {width: calc( 100% - 43px);margin: 12px 0;padding: 20px 20px;}
#Brand #Showoff2 .R .c strong, #Offers>strong, #Brand #Entries h2, #Brand #Showoff .R .c strong {font-size: 27px;line-height: 36px;}
#Brand #Showoff2{height: 285px;}
#Brand #Showoff2 .R {width: calc(50% - 5px);}
#Brand #KPI{height:325px;}
#Brand #Vid{height:auto;padding:24px;}
#Brand #Vid strong {font-family: 'MB';font-size: 27px; line-height: 36px;}
#Brand #Vid iframe{height:405px;}
#Brand.bfmplay #Showoff{height:auto;min-height:auto;}
#Brand.bfmplay #Showoff .L{height:60vw;}
#Offers .sq strong{font-size:18px;line-height:28px;}
#Brand #Top h1 {font-size: 24px;line-height: 34px;}
#Campaign strong {font-size: 47px;line-height: 37px;}
#Campaign {padding:63px 0px;}
#Campaign a {font-size: 14px;padding: 15px 15px;}
#Slider .T strong {font-size: 24px;line-height: 34px;}
#Slider .T {padding:0 20px;}
#Slider .W .s {width:320px;left: -88px;position: relative;}
#Slider .W .s strong{font-size:18px;line-height:28px;}
/*LOCAL*/
#Spot {margin: 0 0 60px 0;}
#Spot .W{width:100%;}
#Info>div {width:90%;margin:20px auto;text-align: center;}
#Levers .W .L {width: 408px;}
#Levers .W .R {width: calc(100% - 432px);}
#Levers .W>div.R{margin-left:20px;}
#Levers > div > div.L > img{width: 80%;min-width:230px;}
#Levers .W .R input[type="radio"] + label>h3 {font-size: 24px;line-height: 34px;}
#Levers .W .L>h3 + p, #Levers .W .L>h2 + p {font-size: 14px;line-height: 19px;}
#Levers {padding: 40px 2% 40px;}
/* #KPI2 .icp .c {width:calc(100% / 4 - 12px * 4);height:204px;}
*/ #KPI2 .icp .c strong,#Spot .W>.container>strong{font-size: 43px;}
#KPI2,#Info{ padding: 60px 1% 60px 1%;}
#Showoff3 {padding: 35px 1% 0px 1%;}
#Showoff3 .W>div{display:block;width:100%;}
#Showoff3 .W>.L {padding:70px 66px 70px 3%;}
#Showoff3 .W>.R{max-width: 90%;background-size:cover;}
/*POPIN*/
#Pop form .L, #Pop form .R { display:block;margin:0 auto; width:100% ;}
#Pop form label {margin:20px 0px;}
#Pop form input[type="text"] ,#Pop form input[type="password"],#Pop label ~ select {margin: 0 0 30px 0;}
#C.s3 .M .date.wow{padding:9px 10px 8px 12px;}
#C.s3 .M .date.wow::placeholder{font-size:14px;}
.popin{ overflow: scroll;height:auto;max-height:100%;}
.popin.p1 .c{max-width:368px;margin: 25px auto;}
/* QUI SOMMES NOUS*/
#HeroSimple h1 {font-size: 50px; line-height: 59px;}
#HeroSimple h1 + p{font-size: 18px; line-height: 28px;}
#KPI3 {padding: 64px 5%;}
#KPI3 .icp .c{width: calc(100%/ 3 - 15px * 3);height:102px;}
#Chess h1 { padding: 0 20px; font-size: 32px; line-height: normal;}
#Checkerboard .W>div strong, #Checkerboard .W>div h2 { font-size: 24px; line-height: normal; }
#Checkerboard .W>div p { font-size: 16px; line-height: 22px; }
#Checkerboard .W { background: #eeeff0; margin: 20px 0; }
#Checkerboard .W:nth-child(odd) { display: flex; flex-direction: column; align-items: flex-start; }
#Checkerboard .W:nth-child(odd) .L { order:2; margin:0; }
#Checkerboard .W:nth-child(odd) .R { order:1; margin:0; }
#Checkerboard .W>div{padding: 100px 50px 0 50px;height:auto;}
#Checkerboard .W .L { width: 100%; min-height: 400px; margin: 20px 0; }
#Checkerboard .W .R { width: 100%; min-height: 400px; margin: 20px 0; }
#Checkerboard2 .W>div{padding: 100px 50px 0 50px;height:auto;}
#Checkerboard2 .W:nth-child(4) .L {background-position: center right;}
#Checkerboard2 .W>div{height:450px;}
#Hero h1{font-size: 50px;line-height: 58px;}
#Seo .W h3{font-size: 24px; line-height: 34px;margin: 0px 0 20px 0;}
#HeroSimple{padding: 80px 1%;}
#Radio a{}
/*Contactez nous*/
#Contact h1 {font-size: 47px;line-height: 50px;}
#Contact #For{width:100%;padding: 40px 50px}
#Mire {width:100%;}
#Connect>h1 {font-size: 47px;line-height:47px;}
#Connect>p {font-size: 18px; padding: 1% 2%;}
#Mire>div{display:block;width: 100%;max-width:800px; height: auto; margin: 30px auto;padding: 40px 50px}
#Mire>div>strong{font-size: 25px; line-height: 31px;}
#For{width: calc( 100% - 40px);padding: 40px 50px;}
#Create h1{font-size: 47px; line-height: 50px;}
#Create h1 + p{font-size: 18px; line-height: 23px;padding: 1% 2%;}
#Profile .marble{width:90%;padding: 40px 30px;}
#Profile h1{font-size: 47px; line-height: 50px;}
#Profile .marble>strong{font-size: 25px; line-height: 31px;}
#HEC { padding: 65px 2%;}
#HEC h1{font-size: 47px; line-height: 50px;}
#Camp>strong,#Sim>strong,#Hist>strong{font-size: 21px; line-height: 26px;}
#Hist .c .line > strong{display:block;}
#Hist .c .line > span{text-align:initial;}
#Hist .c .line > *{width:49%;}
#Actus .tri { text-align: center; margin: 0 0 40px 0; }
#Actus .tri>span { margin: 4px 8px; min-width:148px;}
#Actus article { width: 100%; max-width: 370px; display: block; margin: 0 auto 40px auto; };
#Actu #Illu h1 { padding: 40px 20px; text-align: left; font-size: 32px;}
#Actus #Liste .cont { text-align: center; padding: 0 12px; }
#Actu #Actus article{width:100%;}
#QSM #Checkerboard2 .W>div { padding: 0 25px; }
#Step .W .s { margin: 20px 5px;}
#OffrePromo{height:500px;}
#OffrePromo h1{font-size:32px; width:90%;}
#OffrePromo p{font-size:32px;border:4px solid #fff; width: calc(90% - 32px - 8px);}
#OffrePromo div img{width:48px;}
#OffrePromo div{width:90%;}
.filAriane{margin-top:0;padding-left:15px;width: calc(100% - 31px);}
#Checkerboard2 .W>div{padding: 50px 50px 0 50px;}
#Checkerboard2.grey .W>div{padding: 100px 50px 0 50px;}
#N2 #Checkerboard2.grey .W>div{padding: 100px 50px 0 50px;}
#Vbfmr video{width:100%;}
#HP #Une .more{margin: 0 30px 30px 30px;}
#Brand #Showoff .R > a{float:none;margin-bottom:24px;}
#Info .logo span#Molo{right:147px;}
#Info>div .logo{margin:0 auto;}
#Info > .L strong >span{right:168px;}
#NosOffres .tri{display:block;margin-top:16px;text-align:center;}
#NosOffres .tri:first-of-type, #NosOffres .tri:last-of-type{width:100%;}
#NosOffres .tri:first-of-type{margin:16px 0;}
#NosOffres .allArticles{margin-top:24px;}
#NosOffres .tri > span{box-sizing:border-box;width:182px;text-align:center;}
#Offers > strong, #Offers > p{padding:0 16px;font-size:16px;}
#Offers>strong + p{font-size:14px;}
#BlocFaq{gap:16px 24px;}
#BlocFaq label > div img{height:100px;}
#BlocFaq label > div strong{font-size:21px;}
#BlocFaq label > div{min-height:300px;}
#HPconfig section#InfosCampaign2:nth-child(2n) .W .L{order:0;}
#HPconfig #InfosCampaign2 .W{flex-direction:column;}
#Gvid{grid-template-columns: repeat(2, 1fr);}
.pert{flex-direction:column;}
#Actu #Article .pert > div b{font-size:18px;}
#Actu #Article .pert > div p{font-size:14px;}
#Actu.newArticle #Article{flex-direction:column;}
#Actu.newArticle #Article .l {display:flex;flex-direction:column;position:static;}
#Actu.newArticle #Article .l .rs-share{order:1;margin:0 auto 16px auto;justify-content:center;}
#Actu.newArticle #Article .l b{order:2;}
#Actu.newArticle #Article .l ul{order:3;}
#NosOffres2 .descOffre .r .card img{width:32px;}
#Actu.newArticle #Article .l{max-width:none;}
#Equi .eqContainer{justify-content:center;}
#Equi .eqCard p{font-size:21px;}
#Equi .eqCard a{font-size:12px;}
#Equi h2{font-size:28px;}
#Avis .slider .AvCard{min-width:280px;max-width:280px;}
#Avis .mobnav{display:flex;gap:4px;margin:0 0 16px 0;justify-content: center;}
#Avis nav{display:none;}
#Avis .slider .AvCard:last-of-type{margin:0;}
#Avis .slider:before, #Avis .slider:after{content:none;}
#Avis .cont{padding:0};
#NosOffres2 .chiffres .r > div img{width:65px;}
}
@media all and (max-width: 768px) {
.audi{flex-direction:column;}
.audi img{width:100%;max-width:100%;}
.audi audio{flex:none;}
.backtotop{bottom: 25px;right: 15px; width: calc(52px/1.3); height: calc(48px/1.3); border-radius: calc(16px/1.3);}
.backtotop div{width: calc(32px/1.3); height: calc(32px/1.3);}
.backtotop svg{width: calc(18px/1.3);}
#Actu #Article .calltoaction1 .R1 > iframe{height:210px;}
.filAriane{font-size:12px;}
#N1 #Board { padding: 0 20px; }
#N1 #Board .pawn { width: 100%; height: auto; margin: 0 0 20px 0; }
#N1 #Board .pawn .M p { height: auto; }
/*configurateur*/
#C.s9 .M,#C.s8 .M,#C.s7 .M,#C.s6 .M , #C.s5 .M ,#C.s4 .M , #C.s3 .M ,#C.s2 .M,#C.s1 .M { width: 100%;}
#C .tabs>div{height: 30px;}
#C .c.dr label{padding: 0px 4% 0px 30px;}
#C > div.T > label {display:block;;margin: 12px auto;display:table;}
#C.brbn + .pi a { display:initial;}
#C.s3 .M .date.wow{padding:9px 10px 8px 12px;}
#C.s3 .M .date.wow::placeholder{font-size:14px;}
#HC {overflow:scroll;position: fixed;top: 0;left: 0;right: 0;z-index: 6;}
#HC .c {min-width:530px; width:auto;white-space:nowrap;overflow:scroll;}
#HC .c span {display:inline-grid;margin-top: 65px;padding: 0px 4% 12px 0;}
#HC .c span strong {margin:6px auto;}
#HC .c .x,#HC .c a:not(.x){display:block;position: fixed;top: 0;}
#HC .c .x:after {display:none;}
#HC .c .x {top:0; right:20px;}
#HC .c .line {width: 405px;}
#Fin {margin-top: 180px;position: relative;}
#Fin .acc span {font-size: 18px;line-height: 24px;}
#Fin .off .T strong + span,#Recap>.L .bl h2 {font-size: 20px;line-height: 27px;width:100%;}
.svgbg1{display:none;}
/*RECAP*/
#Recap {margin-top:180px;}
#Recap>.L .bl h2+a { display:block;width:172px; margin:12px auto;padding: 14px 0px;}
#Recap .bl .o {width:250px;}
#Recap>.L .bl .reco .off .M strong {font-size: 16px; line-height: 21px;}
#Recap>.R .fac>strong {font-size: 18px;line-height: 24px;}
#Recap>.L .bl {margin: 0px 0 8px 0px;}
#Recap>.L .bl.brbn{text-align:center;}
/*gAB2*/
#HP #Answers .R{width:100%; max-width:1000px;}
#HP #Une {white-space:normal;overflow:hidden;}
#HP #Une .more { height:357px; width:90%; display:inline-flex; align-items:center; justify-content:center; margin: 20px auto; max-width: 510px;}
#HP #Une .more .inside {height: 321px;padding: 80px 0px 0px 30px; width:92%;}
#HP #Une article { display:block;margin: 20px auto;width:90%;max-width: 510px;}
#HP #Une article .B { padding: 40px 25px;}
#HP #Une article .B p {font-size: 16px;line-height: 21px;}
#HP #Une .more .inside p, #HP #Answers .L strong {font-size: 20px;line-height: 28px;margin:15px 0px;}
#HP #Top h1,#HP #Une h2,#HP #Answers .L {width: calc( 100% - 40px)}
#HP #Top {padding: 80px 0px 80px 0px;}
#HP #Top a{margin: 31px auto 0px auto;}
#HP #Top svg{display:none;}
#HP #Top:after {background: var(--bg-amac);}
/*#HP #Brands .cont{width:320px;}*/
#HP #Broadcast .L {height: 310px; margin-top:230px; width:299px; position:relative; right:31px;}
#HP #Broadcast .L .Mrect{width:38px;height:38px; border-radius:8px;}
#HP #Broadcast .L .Mrect > a > img{width:24px; height:24px;}
#HP #Broadcast .L > :nth-child(1){margin-left: 4px; margin-top: 32px;}
#HP #Broadcast .L > :nth-child(2){margin-left: 72px; margin-top: 11px;}
#HP #Broadcast .L > :nth-child(3){margin-left: 90px; margin-top: 59px;}
#HP #Broadcast .L > :nth-child(4){margin-left: 198px; margin-top: -5px;}
#HP #Broadcast .L > :nth-child(5){margin-left: 287px; margin-top: 63px;}
#HP #Broadcast .L > :nth-child(6){margin-left: 198px; margin-top: 91px;}
#HP #Broadcast .L > :nth-child(7){margin-left: 228px; margin-top: 133px;}
#HP #Broadcast .L > :nth-child(8){margin-left: 294px; margin-top: 197px;}
#HP #Broadcast .L > :nth-child(9){margin-left: 270px; margin-top: 237px;}
#HP #Broadcast .L > :nth-child(10){margin-left: 146px; margin-top: 218px;}
#HP #Broadcast .R strong {font-size: 20px;line-height: 28px;}
#HP #Top h1 {font-size:38px; line-height:48px;}
#HP #Top p {margin: 0 30px;font-size: 22px;line-height: 29px;}
#HP #Answers .L,#HP #Answers .R{display:block;}
#HP #Answers h2 ,#HP #Une h2,#HP #Brands h2 {font-size: 24px;line-height: 32px;margin: 15px auto;}
#HP #Answers .R .c {margin: 14px auto;width:90%;max-width: 400px;}
#HP #Answers {padding: 50px 0 35px 0;}
#HP #What {padding:20px 30px;}
#HP #What>strong ,#Seo .W h3,#KPI2 h2{font-size: 24px;line-height: 32px;margin: 0px 0px 20px 0px;}
#HP #What .num .k {display:block;width:calc( 100% - 60px);padding:32px 30px ;border-bottom: 2px solid #EEEFF0;}
#HP #What .num .k strong,#Campaign strong {font-size: 24px;line-height: 35px;}
#HP #What .num .k p,#Campaign p { font-size:14px; line-height:21px;}
#Campaign p {padding: 0px 30px;}
#Seo {padding: 0px 1%;}
#Seo .W{padding: 23px;}
#Help span { font-size:18px; margin: 0px auto 12px auto;}
/*marque*/
#Brand #KPI {padding: 0px; height:auto;}
#Brand #KPI .k {display:block;width:100%;padding: 24px 0px 51px 0px;min-width:auto;}
#Brand #KPI .k:nth-child(3){border:none;}
#Brand #KPI .k strong {font-size: 56px;line-height: 75px;}
#Brand #Showoff .R .c {padding: 20px 0px;}
#Brand #Showoff .L{height:435px;}
#Brand #Entries h2{margin: 0px 24px 20px;text-align: center;}
#Brand #Entries .sq { display:block; width:90%;margin: 10px auto;max-width: 320px;}
#Brand #Entries .sq strong {font-size: 18px;line-height: 26px;}
#Brand #Entries, #Offers {white-space: normal; overflow: initial;}
#Brand #Showoff2 {position:relative;height:auto;}
#Brand #Showoff2 .R ,#Brand #Showoff2 .L {width:100%;display:block;}
#Brand #Showoff2 .R .c,#Brand #Showoff .R .c{width: calc( 100% - 43px);margin: 12px 0px;padding: 20px 20px;}
#Brand #Showoff2 .L{height:260px;position:relative;margin-top: 260px;}
#Brand #Showoff2 .R {position:absolute;top:-260px;}
#Brand #Showoff2 .R .c p {margin:16px 0px;}
#Brand #Showoff2 .R .c strong,#Offers>strong,#Brand #Entries h2,#Brand #Showoff .R .c strong{font-size: 24px;line-height: 32px;}
#Brand #Top .t{gap:16px}
#Brand #Vid strong {font-family: 'MB';font-size: 24px; line-height: 32px;margin-bottom:16px;}
#Brand #Vid iframe{height:192px;}
#Offers .sq {width:90%; margin:0 10px;white-space:normal;max-width:350px;}
#Offers .o {white-space: nowrap;overflow: scroll;padding: 0px 0px 30px 0px}
#Help span,#Help a{display:block;}
#Help a{width: 150px;}
/*LOCAL*/
#Showoff3 .W>div{display:block;width:100%;}
#Showoff3 .W>.R{height:450px;}
#Showoff3 .W>.L .line {margin: 0px 0px 20px 0px;}
#Showoff3 .W>.L {padding: 20px 50px 50px 3%;}
#Showoff3 .W>.L>h2 {margin: 0px 0px 20px 0px;}
#Local #Top h1,#Spot .W>.container>strong,#KPI2 .icp .c strong {font-size: 28px;line-height: 34px;padding: 0px 10px;}
#Local #Top h1 + p {font-size: 18px;line-height: 29px;}
#KPI2 h2{padding: 0px 20px;}
#KPI2 .icp .c{display:block;width:calc(100% - 40px);height:auto; border-bottom: 2px solid #fff;}
#KPI2 .icp{flex-direction:column;width:90%;}
#Info>h2{padding:20px 35px;margin: 0px auto;font-size: 24px;line-height: 34px;}
#Info>div p>span{white-space:nowrap;font-size:16px;}
#Info>div strong {font-size: 20px;line-height: 28px;}
#Info>div p{font-size: 18px;line-height: 28px;}
#Levers {padding: 0px 2% 40px;}
#Levers .W .L,#Levers .W .R{width:calc( 100% - 90px);display:block;margin: 20px auto;padding: 20px 30px;max-width:100%;}
#Levers .W .L>h3 + p, #Levers .W .L>h2 + p {font-size: 14px;line-height: 19px;margin: 0px 0px 19px 0px;}
#Levers .W .L >strong,#Showoff3 .W>.L>h2{font-size: 24px;line-height: 34px;}
#Levers > div > div.L > img { width: 247px; height: auto; min-width: 230px; }
#Spot .W>.container{padding:80px 20px;}
#Spot .W>.container>strong{margin: 0px 0px 20px 0px;}
#Spot .W>.container>a { padding: 15px 5px;}
/*Qui nous sommes*/
#HeroSimple{padding: 70px 5% 30px;}
#HeroSimple h1 {font-size: 38px;line-height: 45px;}
#KPI3 h2{font-size: 24px;line-height: 34px;padding: 0px 20px;}
#KPI3 .icp{width: 90%;max-width: 360px;}
#KPI3 .icp .c{display:block;width:89%;max-width:360px;border: none;border-bottom: 2px solid #eeeff0;}
/*operations spéciales*/
#Hero{padding: 80px 1%;}
#Hero h1 {font-size: 34px;line-height: 44px;}
#Hero h1 + p {font-size: 20px;line-height: 28px;}
#Ops h2 {font-size: 28px;line-height: 38px;}
#Ops h2 + p{font-size: 16px;line-height: 28px;}
#Checkerboard2{margin: 10px 0 0 0;}
/*
#Checkerboard2 .W .R,#Checkerboard2 .W .L{width:100%;display:block;padding: 30px 50px ;}
#Checkerboard2 .W .R{margin: 0px;}
#Checkerboard2 > div:nth-child(1) > div.L {height: auto;}
#Checkerboard2 > div:nth-child(2) > div.R,#Checkerboard2 > div:nth-child(4) > div.R{position: absolute; margin-top: -639px;}
#Checkerboard2 > div:nth-child(2) > div.L{margin-top:236px;}
#Checkerboard2 > div:nth-child(2) > div.R{height: auto;}
#Checkerboard2 > div:nth-child(3) > div.L{height:auto;}
#Checkerboard2 > div:nth-child(4) > div.L{margin-top: 175px;}
#Checkerboard2 > div:nth-child(4) > div.R{height: auto;}
#Checkerboard2 .W>div strong{font-size: 24px;line-height: 34px;}
*/
/*#KPI3 + #Checkerboard2 .W .R{height:auto;}
#KPI3 + #Checkerboard2 > div:nth-child(1) > div.L {height:400px;}*/
#Help {padding: 20px 0px;}
#N2 #Top { padding: 100px 16px; }
#N2 #Top h1 { font-size: 32px; line-height: normal; }
#N2 #Top h1 + p { font-size: 18px; line-height: 22px;}
/*Contactez nous*/
#Contact h1 { font-size: 26px; line-height: 30px; }
#Contact #For .W>div{display:block;width:100%;max-width:500px;}
#Radio a{max-width: 320px;}
#Connect>h1 {font-size: 35px;line-height: 35px;}
#Create h1{font-size: 35px;line-height: 35px;}
#For {width:100%;}
#For .W>div{display:block;width:100%;}
#Profile h1 {font-size: 35px;line-height: 35px;}
#Profile .marble .W>div{display:block;width:100%;}
#HEC h1{font-size: 35px;line-height: 35px;}
#Camp .c,#Sim .c{padding: 24px 15px;}
#Camp .c .BR{display:block;text-align:left; margin-bottom:32px;}
#Camp .c .B{width:100%;}
#Sim .c .BR{text-align:left;}
#Sim .c .fl{ position: initial;}
#Sim .c .B > div {margin-bottom:16px;}
#Sim .c .BR {margin-bottom:32px;}
#Sim .c .B{margin: 0 0 16px 0;}
#QSM #Checkerboard2 .W>div { padding: 20px 25px; }
#Camp .c .fl{position:initial; display:flex; flex-wrap:wrap;}
.filAriane{font-size:12px;}
#ContactMe h2{font-size: 24px;text-align: center; padding: 0 16px;}
#ContactMe > div{width: 255px; height: 248px;}
#ContactMe > div p:nth-of-type(1){font-size: 24px;}
#ContactMe > div p:nth-of-type(2){ font-size: 14px; margin-bottom: 24px;}
#ContactMe > div a{font-size: 12px; margin-left: 49px;}
#ContactMe > div a:nth-of-type(1){margin-bottom:12px;}
#ContactMe > div a:nth-of-type(1):before{width: 18px; height: 20px; margin-top: -4px; margin-left: -24px;margin-bottom: 12px;}
#ContactMe > div a:nth-of-type(2):before{width: 18px; height: 20px; margin-top: -3px; margin-left: -24px;}
#ContactMe > div .T{width:85px;height:85px;margin-bottom:6px;}
#OffrePromo h1{font-size:18px;}
#OffrePromo p{font-size:14px;}
#OffrePromo div img{width:32px;}
#OffrePromo a{padding:12px 18px; font-size:16px;}
#OffrePromo{height:400px;}
.imgandtxt{flex-direction: column;}
.imgandtxt > div{width:100%;max-width:none;}
.imgandtxt > div > img{width:100%;}
#Actu #Illu:after{height:5px;}
#Info > .L strong >span{position: absolute;left: 10px; top: 170px;right:10px;}
#Info .logo span#Molo{position:relative;display: block; margin: 0 auto; margin-top: 20px;right:auto;bottom:-8px;}
#Info .logo span{margin:0 0 8px 0;width:77px;}
#Checkerboard2{ font-size: 16px; }
#Checkerboard2 li { list-style: inside; font-size: 16px; }
#Checkerboard2 .W .R,#Checkerboard2 .W .L{width:100%;display:block;padding: 30px 50px; margin: 0;}
#Checkerboard2 .W:nth-child(even) { display:flex; flex-direction: column; }
#Checkerboard2 .W:nth-child(even) .L { order:1; }
#Checkerboard2 .W:nth-child(even) .R { order:2; }
#Checkerboard2 .W:nth-child(odd) { display:flex; flex-direction: column; }
#Checkerboard2 .W:nth-child(odd) .L { order:2; }
#Checkerboard2 .W:nth-child(odd) .R { order:1; }
#Checkerboard2.grey .W>div{padding-top:50px;min-height:300px;}
#N2 #Checkerboard2 .W>div{margin-bottom:12px;}
#N2 #Checkerboard2.grey .W>div{padding: 24px 24px 0 24px;}
#N2 #Checkerboard2 .W:last-of-type .R+.L { margin-bottom: 0; }
#Info > div > .logo{max-width:315px;margin:0 auto;}
#NosOffres2 .ban{padding:16px;box-sizing:border-box;}
#NosOffres2 .chiffres .r{gap: 8px;flex-direction:column;}
#NosOffres2 .chiffres .r > div img{width:50px;}
#NosOffres2 .chiffres .r > div p{font-size:12px;}
#NosOffres2 .descOffre .l{width:100%;height:600px;background-position:top center;}
#NosOffres2 .descOffre .r{width:100%;box-sizing:border-box;}
#Plusart > div{max-width:100%;box-sizing:border-box;padding:16px;}
#Plusart .article{max-width:100%;}
#NosOffres2 .chiffres .l img{height:50px;}
#NosOffres2 .descOffre{flex-direction:column;}
#Checkerboard .W>div{padding: 50px 24px 0 24px;}
#AMAC{height:180px;}
#BlocFaq{gap: 4px 0; width: calc(100% - 32px);}
#BlocFaq label div img{height:50px;}
#BlocFaq label div strong{font-size:12px;}
#BlocFaq label div{min-height:210px;}
#BlocFaq label svg{width:24px; bottom:8px;}
#BlocFaq .subFaq > div{padding:16px;}
#BlocFaq .subFaq h2{font-size:18px;}
#BlocFaq .subFaq a{font-size:12px;}
#FaqDer{width: calc(100% - 32px);}
#FaqDer .details:not(:last-of-type){margin: 0 0 16px;}
#FaqDer .details .summary div{padding:16px;font-size:18px;padding-right: 58px;}
#FaqDer .details > div{padding:16px;font-size:14px;}
#Actu #Illu h1 { font-size: 32px; line-height: normal; }
#Actu #Article .calltoaction .R span + a{padding:10px 15px;text-align:center;}
#Actu #Article .calltoaction .R span{font-size:16px;}
#Actu #Article .calltoaction .R span + a{font-size:12px;}
#Actu #Article .calltoaction .L{min-height:170px;}
#Gvid{grid-template-columns: repeat(1, 1fr);}
#Equi .eqCard{flex:1 1 100%;}
#Faq details summary > div{font-size:18px;}
#Faq details:not([open]):before{top:0;bottom:0;margin:auto;}
#Equi .eqCard .T {width: 85px;height: 85px;}
#Equi .eqCard p{font-size:16px;}
#NosOffres2 .ban h1{font-size:24px;}
#NosOffres2 .ban p{font-size:18px;}
}