:root {
  --gPadding: 7vh;
  --headerHeight: 7vh;
  --widthMenuContent: 49.3%; 
  --heightMenuContent: 42.5%;
  --footerHeight: 13vh;
}

body {
  display: flex;
  font-family: Arial, sans-serif;
  background: rgb(187,222,251,0.95) url('../assets/v1_8.png') center/cover no-repeat;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: black;
  justify-content: center;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: 'Architects Daughter';
  background: linear-gradient(to bottom, rgba(187,222,251,0.8), rgba(236,245,248,0.8));
  height: var(--headerHeight);
  width: 100%;
}
.header > h1 {
  font-size: 4em;
}

.header > .logo {
  position: absolute;
  width: var(--gPadding);
  left: 0px;
  top: 0px;
}
.header > .logo > img {
  width: 100%;
}

/* Icône du menu burger (visible sur mobile) */
.burger-menu {
  display: none;
  position: absolute;
  display: block;
  right: calc(var(--gPadding) / 5);
  font-size: 3em;
  color: #0262b5;
}

.header:hover {
  cursor: pointer;
}
.main-content {
  position: absolute;
  top: var(--headerHeight);
  width: calc(100% - 2 * var(--gPadding));
  height: calc(100% - var(--headerHeight) - var(--footerHeight));
  overflow: auto;
  text-align: justify;
}
.section-home {
  background: rgba(255, 255, 255, 0.25);
  position: relative;
}
.section-home.about-below {
  /* position: absolute; */
  top: calc(34% + var(--headerHeight));
  background: linear-gradient(to right, rgba(157, 181, 198, 0.25), rgba(144, 168, 188, 0.25));
}
.section-home {
  background: rgba(255, 255, 255, 0.25);
  /* position: absolute; */
}

.menu {
  position: absolute;
  top: 27%;
  /* max-width: 500px;
  min-width: 250px; */
  /* --element-width: calc(100% - 250px); */
  width: 34%;
  left: 33%;
  height: 34%;
  z-index: 2;
  border-top: solid 3px rgb(30, 58, 138);
  border-bottom: solid 3px rgb(30, 58, 138);
  border-radius: 50%;
}

.menu > div {
  width: 49%;
  height: 49%;
  font-family: 'Inknut Antiqua';
  /* border: solid 1px; */
  position: absolute;
  cursor: pointer;
  overflow: visible;
}
.menu > #dessin-2d:hover, .menu > #bim-3d:hover, .menu > #plan-topo:hover, .menu > #vrd:hover, .menu > #dessin-2d, .menu > #bim-3d, .menu > #plan-topo, .menu > #vrd {
}
.menu > div > img {
  width: 100%;
}

.menu a span {
  display: inline-block;
  color: transparent;
  /* border: solid 1px beige; */
  width: 100%;
  height: 100%;
}

.menu > #dessin-2d:hover {
  background: url('../assets/dessin-2d-hover.png') center/100% 100% no-repeat;
}
.menu > #bim-3d:hover {
  background: url('../assets/bim-3d-hover.png') center/100% 100% no-repeat;
}
.menu > #plan-topo:hover {
  background: url('../assets/plan-topo-hover.png') center/100% 100% no-repeat;
}
.menu > #vrd:hover {
  background: url('../assets/vrd-hover.png') center/100% 100% no-repeat;
}

.menu > #dessin-2d {
  background: url('../assets/menu-dessin-2d.png') center/100% 100% no-repeat;
  top: 3%;
  left: 3.1%;
  width: 46.3%;
  height: 45%;
}

.menu > #bim-3d {
  background: url('../assets/menu-bim-3d.png') center /100% 100% no-repeat;
  top: 2%;
  right: 2%;
  width: 48.4%;
  height: 53%;
}

.menu > #plan-topo {
  background: url('../assets/menu-plan-topo.png') center/100% 100% no-repeat;
  top: 43%;
  left: 2.3%;
  width: 46.3%;
  height: 53%;
}

.menu > #vrd {
  background: url('../assets/menu-vrd.png') center/100% 100% no-repeat;
  top: 48.8%;
  right: 2%;
  width: 48.5%;
  height: 48.5%;
}

/* Contenu pour tous les menus */
.menu-content > div {
  display: none;
  width: var(--widthMenuContent);
  height: var(--heightMenuContent);
  background: rgba(196, 217, 252, 0.5);
  border: solid 2px rgb(30, 58, 138);
}
.menu-content > div > div {
  display: none;
  position: absolute;
  width: 100%;
  height: 63%;
  border: dashed 2px rgb(141, 145, 156);
}
.menu-content > .trois > div, .menu-content > .quatre > div {
  bottom: 0%;
}
.menu-content > .un {
  position: absolute;
    /* top: 7%;
    left: 7%; */
    /* background: url(../assets/mc-dessin-2D-interiuer-facade.png) center / 100% 100% no-repeat; */
    mask: radial-gradient(farthest-side at bottom right, transparent 37%, #fff 30%);
}
.menu-content > .deux {
  position: absolute;
  /* top: 0; */
  right: 0;
  /* background: url('../assets/mc-dessin-2D-heberge-coupe.png') center/100% 100% no-repeat; */
  mask: radial-gradient(farthest-side at bottom left, transparent 37%, #fff 30%);
}
.menu-content > .trois {
  position: absolute;
  top: calc(3% + var(--heightMenuContent));
  /* left: 7%; */
  /* background: url('../assets/mc-dessin-2D-masse-toiture.png') center/100% 100% no-repeat; */
  mask: radial-gradient(farthest-side at top right, transparent 37%, #fff 30%);
}
.menu-content > .quatre {
  position: absolute;
  top: calc(3% + var(--heightMenuContent));
  right: 0;
  /* background: url('../assets/mc-dessin-2D-mail-digitalisation.png') center/100% 100% no-repeat; */
  mask: radial-gradient(farthest-side at top left, transparent 37%, #fff 30%);
}
.diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: #003366;
  color: white;
  font-weight: bold;
}

.a-partir {
  width: 99.8% !important;
  height: 8.41% !important;
  position: absolute;
  bottom: 0;
  display: flex;
  ;
}

/* éléments du footer */
.footer {
  position: absolute;
  bottom: 0%;
  height: var(--footerHeight);
  width: 100%;
}
.contact {
  font-style: italic;
  text-align: left;
  padding-left: 0%;
  background: linear-gradient(to bottom, rgba(123,146,161,0.8), rgba(31,140,55,0.8));
}
.contact a {
  color: blue;
  text-decoration: none;
}
.copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  color: white;
  height: 24.52%;
  background-color: rgb(61,1,1);
}


/* Petits écrans (téléphones) */
/* @media (max-width: 480px) {
  .menu {
      width: 250px;
      left: calc(50% - 125px);
  }
} */

/* Tablettes */
@media (max-width: 768px) {
  .menu {
    width: 250px;
    left: calc(50% - 125px);
    display: none;
  }
  .burger-menu {
      display: block;
      position: absolute;
      display: block;
      right: calc(var(--gPadding) / 5);
      font-size: 3em;
      color: #0262b5;
  }
}

/* Écrans moyens (ordinateurs portables) */
@media (min-width: 769px) and (max-width: 1024px) {
  .menu {
    width: 300px;
    left: calc(50% - 150px);
  }
  .burger-menu {
    display: none;
  }
}

/* Grands écrans (ordinateurs de bureau) */
@media (min-width: 1025px) {
  .menu {
    min-width: 250px;
  }
  .burger-menu {
    display: none;
  }
}

/* COntrôleurs de taille de police */

/* Style des boutons */
.controls {
  display: flex;
  gap: 5px;
}

/* Style spécifique pour le bouton réinitialiser */
.reset {
    background-color: #FF9800;
}

.reset:hover {
    background-color: #e68900;
}


.controls > button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #007BFF;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

button:hover {
  background-color: #0056b3;
}