body {
  height: 100vh;
  font-family: Arial, sans-serif;
  margin: 0;
  font-size: 13px;
  background: url("halo2.jpg") no-repeat center center;
background-size: auto 100%;
}


a {
  text-decoration: none;      
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: #5E6170;
}

#hide1 {
    display: block;
  }


.grid {
  display: grid;
  grid-template-columns: 1fr 3fr 10fr 0.5fr;
  grid-gap: 0px;
  height: 100vh;
}

.grid1 {
  display: grid;
  grid-template-rows: 0.8fr 17fr 1fr;
  grid-gap: 0px;
  height: 100%;
}

.container {
  height: 100vh;
}

.container4 img {
  width: 100%;
  height: auto;
  display: block;
  padding-bottom: 10px;
}

.container2 {
  padding: 0px;
}

.container3 {
  height: 100px;
}

.container5 {
  box-shadow: 0px 0px 1px rgba(800, 50, 50, 1);
}

.container6 {
  all: unset;
}

.scrollable {
  height: 100%;
  overflow-y: auto;
}

.grid-item {
  border: 0px solid black;
}


@media (min-width: 769px) {
  #hide{
    display: none; 
    }
  .back-button-link {
    display: none;
  }
}

.content-view {
  display: block;
}



/* 📱 Spécifique mobile */

@media (max-width: 768px) {
  /* Cacher certains éléments */
  .main-menu.hidden {
    display: none;
  }
   .content-view:not(.active) {
    display: none;
  }
  #content {
    display: none;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .content-view {
    display: none;
  }

  .content-view.active {
    display: block;
  }

  .main-menu {
    height: 100vh;
  overflow: hidden;
    display: block;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .grid {
    display: block;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .grid1 { 
  display: grid;
  grid-template-rows: 0.05fr 0.83fr 0.05fr;
  grid-gap: 0px;
  padding-left : 20px; 
}

  .container.container4 {
    box-sizing: border-box;
  }
  .container3 {
  height: 200px;
}

  #hide {
    display: block;
  }
  #hide1 {
    display: none;
  }

 html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  height: 100vh;
}

.container6 {
  padding-left: 16px;
  padding-right: 200px;
  padding-top: 0px;
}

 p, a, h4 {
   font-size: 12px;
 }
 h3 {
   font-size: 15px; 
   }
 .back-button-link {
  display: inline-block;
  padding: 4px 8px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  color: black;
  background-color: #FFFFFF;
  border: 0px solid black;
  border-radius: 0px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.back-button-link:hover {
  color: #5E6170;
}
  img {
    max-width: 100vw;
    width: 100%;
    height: auto;
    display: block;
    /* margin-right: 30px; <-- supprimé pour éviter débordement */
  }

  .scrollable {
    padding: 10px;
  }
  .container7{
    height: 43vh; 
  }

  /* ✅ Bouton retour visible uniquement sur mobile */
  .back-button {
    display: block;
  }
  .content-view {
  display: none;
}

.content-view.active {
  display: block;
}

/* cache tout le scroll si sur menu principal */
body.no-scroll {
  overflow: hidden;
}
}