.mapbox-premium {
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 13% 24%, rgba(125, 97, 255, .13), transparent 32%),
        radial-gradient(circle at 87% 76%, rgba(0, 217, 173, .07), transparent 30%),
        #07090a;
}

#integrateur-mapbox-api .mdk-split__panel:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mapbox-premium__heading { margin-bottom: 48px; }

.mapbox-premium__studio {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(5, 8, 10, .93);
    box-shadow: 0 38px 96px rgba(0, 0, 0, .3);
}

.mapbox-premium__preview {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 64% 44%, rgba(125, 97, 255, .1), transparent 29%),
        linear-gradient(145deg, #10131b, #080c0e 73%);
}

.mapbox-premium__preview-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 46px 46px; }
.mapbox-premium__map { position: absolute; inset: 76px 3% 32px; width: 94%; height: calc(100% - 108px); }
.mapbox-premium__zone { stroke-width: 2; }
.mapbox-premium__zone--one { fill: rgba(125, 97, 255, .13); stroke: rgba(159, 139, 255, .46); }
.mapbox-premium__zone--two { fill: rgba(74, 164, 235, .09); stroke: rgba(74, 164, 235, .38); }
.mapbox-premium__zone--three { fill: rgba(0, 217, 173, .065); stroke: rgba(0, 217, 173, .32); }
.mapbox-premium__road { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 12; }
.mapbox-premium__poi { fill: var(--dwp-accent); stroke: #08100e; stroke-width: 6; filter: drop-shadow(0 0 9px rgba(0,217,173,.42)); }

.mapbox-premium__preview-head { position: absolute; z-index: 5; top: 25px; left: 28px; right: 28px; display: flex; justify-content: space-between; gap: 20px; }
.mapbox-premium__preview-head div { display: grid; gap: 5px; }
.mapbox-premium__preview-head span,
.mapbox-premium__preview-head small,
.mapbox-premium__layers > p,
.mapbox-premium__layers small,
.mapbox-premium__selection span,
.mapbox-premium__selection small { color: rgba(255,255,255,.41); font-family: "Roboto Mono", monospace; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.mapbox-premium__preview-head strong { color: #eef2f5; font-size: 16px; }
.mapbox-premium__preview-head > small { color: var(--dwp-accent); }
.mapbox-premium__preview-head > small i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--dwp-accent); box-shadow: 0 0 14px var(--dwp-accent); }

.mapbox-premium__layers,
.mapbox-premium__selection { position: absolute; z-index: 6; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(5,8,11,.92); box-shadow: 0 18px 50px rgba(0,0,0,.34); backdrop-filter: blur(8px); }
.mapbox-premium__layers { top: 103px; left: 28px; width: 260px; padding: 16px; }
.mapbox-premium__layers > p { margin: 0 0 9px; }
.mapbox-premium__layers article { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); }
.mapbox-premium__layers article > span { width: 8px; height: 8px; border-radius: 2px; }
.mapbox-premium__layers .is-violet { background: #8c72ff; }
.mapbox-premium__layers .is-blue { background: #4aa4eb; }
.mapbox-premium__layers .is-mint { background: var(--dwp-accent); }
.mapbox-premium__layers article div { display: grid; gap: 3px; }
.mapbox-premium__layers strong { color: rgba(255,255,255,.8); font-size: 11px; }
.mapbox-premium__layers article > i { color: var(--dwp-accent); font-family: "Roboto Mono", monospace; font-size: 7px; font-style: normal; text-transform: uppercase; }
.mapbox-premium__selection { right: 28px; bottom: 29px; display: grid; gap: 6px; width: 260px; padding: 17px 18px; }
.mapbox-premium__selection span { color: var(--dwp-accent); }
.mapbox-premium__selection strong { color: #eef3f5; font-size: 14px; }

.mapbox-premium__release { padding: 29px 32px; }
.mapbox-premium__release-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.11); }
.mapbox-premium__release-head div { display: grid; gap: 5px; }
.mapbox-premium__release-head span,
.mapbox-premium__release-head small { color: rgba(255,255,255,.4); font-family: "Roboto Mono", monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.mapbox-premium__release-head strong { color: #eef3f5; font-size: 14px; }
.mapbox-premium__release-head > small { color: var(--dwp-accent); }

.mapbox-premium__chain { margin: 14px 0 0; padding: 0; list-style: none; }
.mapbox-premium__chain li { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mapbox-premium__chain li > span { color: #8c72ff; font-family: "Roboto Mono", monospace; font-size: 8px; }
.mapbox-premium__chain li div { display: grid; gap: 3px; }
.mapbox-premium__chain li small { color: rgba(255,255,255,.33); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.mapbox-premium__chain li strong { color: rgba(255,255,255,.8); font-size: 11px; }
.mapbox-premium__chain li p { margin: 0; color: rgba(255,255,255,.4); font-size: 9px; }
.mapbox-premium__chain li > i { color: var(--dwp-accent); font-family: "Roboto Mono", monospace; font-size: 7px; font-style: normal; text-transform: uppercase; }

.mapbox-premium__token { margin-top: 14px; padding: 15px 16px; border: 1px solid rgba(140,114,255,.2); border-radius: 7px; background: rgba(140,114,255,.035); }
.mapbox-premium__token > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.mapbox-premium__token span { color: rgba(255,255,255,.37); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.mapbox-premium__token strong { color: rgba(255,255,255,.77); font-family: "Roboto Mono", monospace; font-size: 9px; font-weight: 500; }
.mapbox-premium__scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mapbox-premium__scopes span { padding: 4px 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 3px; }

.mapbox-premium__decision { display: grid; gap: 7px; margin-top: 14px; padding: 16px; border-left: 2px solid var(--dwp-accent); background: rgba(0,217,173,.04); }
.mapbox-premium__decision > span { color: var(--dwp-accent); font-family: "Roboto Mono", monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.mapbox-premium__decision p { margin: 0; color: rgba(255,255,255,.56); font-size: 10px; line-height: 1.5; }
.mapbox-premium__decision strong { display: inline-flex; align-items: center; gap: 7px; color: #eef4f4; font-size: 11px; }
.mapbox-premium__decision iconify-icon { color: var(--dwp-accent); font-size: 16px; }

.mapbox-premium__checks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.1); border-top: 0; border-radius: 0 0 10px 10px; background: rgba(255,255,255,.018); }
.mapbox-premium__checks article { display: grid; gap: 4px; padding: 20px 22px; }
.mapbox-premium__checks article + article { border-left: 1px solid rgba(255,255,255,.09); }
.mapbox-premium__checks span,
.mapbox-premium__checks small { color: rgba(255,255,255,.38); font-family: "Roboto Mono", monospace; font-size: 8px; text-transform: uppercase; }
.mapbox-premium__checks strong { color: #eef3f5; font-size: 19px; font-weight: 500; }

.mapbox-premium__proof { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 34px; align-items: end; margin-top: 24px; padding: 28px 30px; border: 1px solid rgba(140,114,255,.2); border-radius: 10px; background: linear-gradient(110deg,rgba(140,114,255,.065),rgba(0,217,173,.025)); }
.mapbox-premium__proof h3 { max-width: 850px; margin: 8px 0 10px; color: #f1f3f5; font-size: clamp(22px,2.35vw,34px); line-height: 1.15; }
.mapbox-premium__proof div > p:last-child { max-width: 940px; margin: 0; color: rgba(255,255,255,.61); font-size: 13px; line-height: 1.7; }
.mapbox-premium__proof .dwp-premium__button { white-space: nowrap; }

@media (max-width:1080px) {
    .mapbox-premium__studio { grid-template-columns: 1fr; }
    .mapbox-premium__preview { min-height: 550px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (max-width:767px) {
    .mapbox-premium__heading { margin-bottom: 34px; }
    .mapbox-premium__preview { min-height: 520px; }
    .mapbox-premium__preview-head { left: 18px; right: 18px; }
    .mapbox-premium__map { top: 92px; right: -10%; left: auto; width: 100%; height: 405px; }
    .mapbox-premium__layers { top: 102px; left: 18px; width: 235px; }
    .mapbox-premium__selection { right: 18px; bottom: 20px; width: calc(100% - 36px); }
    .mapbox-premium__release { padding: 24px 20px; }
    .mapbox-premium__checks { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mapbox-premium__checks article:nth-child(3) { border-top: 1px solid rgba(255,255,255,.09); border-left: 0; }
    .mapbox-premium__checks article:nth-child(4) { border-top: 1px solid rgba(255,255,255,.09); }
    .mapbox-premium__proof { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
    .mapbox-premium__proof .dwp-premium__button { width: 100%; white-space: normal; }
}

@media (max-width:420px) {
    .mapbox-premium__preview-head { flex-direction: column; gap: 7px; }
    .mapbox-premium__layers { top: 132px; }
    .mapbox-premium__token > div:first-child { align-items: flex-start; flex-direction: column; }
}