*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f4f7f8}
body{font-family:"Segoe UI",Arial,sans-serif}
.pixel-page{position:relative;width:100%;max-width:1402px;margin:0 auto;line-height:0;background:#fff}
.mockup{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;z-index:10;display:block;border-radius:8px;line-height:normal;text-decoration:none}
.hotspot:focus-visible{outline:3px solid #ffd84d;outline-offset:2px;background:rgba(255,216,77,.15)}

/* Coordinates tuned for the current approved mockup (1402x1122) */
.nav-home{left:66.0%;top:1.7%;width:9.4%;height:5.1%}
.nav-services{left:76.3%;top:1.7%;width:5.9%;height:5.1%}
.nav-contact{left:82.8%;top:1.7%;width:6.3%;height:5.1%}
.nav-bip{left:89.7%;top:1.7%;width:4.2%;height:5.1%}

.card-geoportal{left:8.1%;top:49.0%;width:27.0%;height:20.4%}
.card-bip{left:36.3%;top:49.0%;width:27.0%;height:20.4%}
.card-rcn{left:64.2%;top:49.0%;width:27.2%;height:20.4%}

.mail-link{left:41.3%;top:86.0%;width:13.2%;height:4.2%}
.contact-bip{left:55.6%;top:86.0%;width:18.8%;height:4.2%}

.footer-bip{left:74.7%;top:94.0%;width:13.2%;height:2.9%}
.footer-contact{left:89.2%;top:94.0%;width:5.2%;height:2.9%}

@media(max-width:760px){
  .pixel-page{min-width:720px;transform-origin:top left}
  body{overflow-x:auto}
}