*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
}

body{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 22% 45%,rgba(0,90,150,.30) 0%,rgba(0,35,60,.18) 30%,transparent 55%),
    radial-gradient(ellipse at 78% 45%,rgba(125,55,5,.28) 0%,rgba(55,20,0,.18) 30%,transparent 55%),
    linear-gradient(90deg,#02070b 0%,#03121c 24%,#050505 50%,#1a0902 76%,#080300 100%);
}

.stage{
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero{
  position:relative;
  max-width:100vw;
  max-height:100vh;
  max-height:100dvh;
}

.hero img{
  display:block;
  max-width:100vw;
  max-height:100vh;
  max-height:100dvh;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.hotspot{
  position:absolute;
  top:36.65%;
  height:55.35%;
  z-index:10;
  display:block;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
}

.h1{left:1.05%; width:13.35%}
.h2{left:14.40%; width:13.38%}
.h3{left:27.78%; width:13.50%}
.h4{left:41.28%; width:13.68%}
.h5{left:54.96%; width:13.65%}
.h6{left:68.61%; width:14.12%}
.h7{left:82.73%; width:16.05%}

.hotspot:hover,
.hotspot:focus-visible{
  background:rgba(220,145,20,.10);
  border-color:rgba(225,150,25,.62);
  outline:none;
}

/* Contact : agrandi pour englober largement l'enveloppe et toute l'adresse */
.contact{
  position:absolute;
  left:52.80%;
  top:92.85%;
  width:37.00%;
  height:6.55%;
  z-index:20;
  display:block;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
}

.contact:hover,
.contact:focus-visible{
  background:rgba(220,145,20,.08);
  border-color:rgba(225,150,25,.62);
  outline:none;
}