header {
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(255, 128, 0, 0.664);
      padding: 1em;
      box-shadow: 0 4px 12px rgba(0,0,0,1);
      text-align: center;
      top : 0;
      margin: 0;
      width:100%;
      text-shadow: 0 2px 4px rgba(0,0,0,1);
      color: rgba(255, 255, 255, 0.671);
      position: absolute;
}
body {
      display: flex;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) ,url(photo-info.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      overflow-x: hidden;
}
.h {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 800px;
      margin: auto;
      background-color: cadetblue;
}
main {
      position: fixed;
      z-index: 1;
      left: 0;
      background-color: rgba(0, 0, 0, 0.445);
      box-shadow: 0 2px 10px rgba(0,0,0,1);
      overflow: hidden;
      margin-top: 150px;
      position: relative;
      color: rgba(255, 255, 255, 0.671);
      padding: 1em;
      background-size: cover;
      flex: 1;
}
footer {
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.9);
      padding: 1em;
      box-shadow: 0 4px 12px rgba(0,0,0,1);
      text-align: center;
      width:100%;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.747);
      color: rgba(255, 255, 255, 0.671);
      background-position-y: 1900; 
      position: relative;
}
.layout {
      display: flex;
      text-align: center;
      justify-content: space-between;
      align-items: stretch;
      gap: 8.5%;
      overflow: hidden;
      width: 100vw;
      box-sizing: border-box;
}
.mainset{
      box-sizing: border-box;
      width: 100%;
      flex-grow:1;
      min-width:0;
      padding-left: 120px;
      padding-right: 120px;
      overflow: auto;
      padding: 1em;
}
.sidebarleft {
      flex: 0 0 320px;
      min-height: 100%;
      width: 320px;
      z-index: 1;
      top: 0;
      left: 0;
      padding: 1em;
      background-color: rgba(0,0,0,0.75);
      box-shadow: 0 2px 10px rgba(0,0,0,1);
      overflow: auto;
      position: relative;
      color: rgba(255, 255, 255, 0.671);
      padding: 1em;
      font-family: Arial, Helvetica, sans-serif;
      box-sizing: border-box;
}
.sidebarright {
      flex: 0 0 320px;
      min-height: 100%;
      width: 320px;
      z-index: 1;
      top: 0;
      padding: 1em;
      background-color: rgba(0,0,0,0.75);
      box-shadow: 0 2px 10px rgba(0,0,0,1);
      overflow: auto;
      position: relative;
      color: rgba(255, 255, 255, 0.671);
      padding: 1em;
      font-family: Arial, Helvetica, sans-serif;
      box-sizing: border-box;
}
.container {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-areas:
        "btn1 btn2 btn3 btn4"
        "btn5 btn6 btn7 btn8"
        ".    btn9 btn10 .";
      gap: 40px;
      justify-content: center;
      max-width: 800px;
      margin: 0 auto;
      margin-top: 100px;
}
.btn {
      padding: 20px;
      background-color: rgba(238, 141, 44, 0.9);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
}
.btn:hover {
      background-color: rgba(255, 128, 0, 0.753);
      transform: scale(1.05);
}
.lien {
      color: rgba(255, 115, 0, 0.678);
}
.lien:hover {
      color: rgb(255, 115, 0);
      transform: scale(1.05);
}
.image-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
        justify-content: center;
}
.image{
        width: 100px;
        height: auto;
        border-radius: 8px;
}
.image-legend {
        position: relative;
        width: 200px;
        border-radius: 8px;
        overflow: hidden;
}
.image-legend figcaption {
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        width: 100%;
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
        font-family: Arial, Helvetica, sans-serif;
}
.home-button {
      position: fixed;
      top: 20px;
      left: 20px;
      background-color: rgba(36, 34, 34, 0.925);
      color: white;
      padding: 10px 15px;
      border-radius: 8px;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      box-shadow: 0 2px 8px rgba(0,0,0,0.6);
      z-index: 999;
      transition: background-color 0.3s, transform 0.2s;
}
.home-button:hover {
      background-color: rgba(0,0,0);
      transform: scale(1.05);
}

@media screen and (max-width: 1024px) {
      .layout {
            flex-direction: column;
            align-items: center;
      }
      .sidebarleft {
            width: 90%;
            max-width: 600px;
            margin-bottom: 20px;
      }
      .sidebarright {
            width: 90%;
            max-width: 600px;
            margin-bottom: 20px;
      }
      .mainset {
            padding: 0 20px;
      }
      .container {
            grid-template-columns: repeat(2,1fr);
            grid-template-areas:
              "btn1 btn2"
              "btn3 btn4"
              "btn5 btn6"
              "btn7 btn8"
              "btn9 btn10";
            gap: 20px;
      }
}

@media screen and (max-width: 600px) {
      .container {
            grid-template-columns: 1fr;
            grid-template-areas: 
              "btn1"
              "btn2"
              "btn3"
              "btn4"
              "btn5"
              "btn6"
              "btn7"
              "btn8"
              "btn9"
              "btn10";
      }
      .image-row {
            flex-direction: column;
            align-items: center;
      }
}