body {
      min-width: 510px;
      margin: 0;
      font-family: 'Georgia', serif;
      background-color: #0a1a1a;
      color: #d4af37;
    }

    header {
      background: #111;
      text-align: center;
      padding: 20px;
    }

    header img {
      height: auto;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
      width: 400px;
      border-radius: 200px;
    }

    h1 {
      font-size: 3em;
      margin-top: 0.2em;
    }

    main {
      text-align: center;
      padding: 2em;
    }

    a {
      color: #d4af37;
    }

    .features {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      max-width: fit-content;
      justify-content: center;
      gap: 2em;
      margin: auto;
      margin-top: 2em;
    }

    .feature {
      background-color: #1c2c2c;
      border: 1px solid #444;
      padding: 1em;
      border-radius: 8px;
      width: 200px;
    }

    .feature h3 {
      margin-bottom: 0.5em;
    }

    button {
      background-color: #d4af37;
      color: #0a1a1a;
      border: none;
      padding: 1em 2em;
      margin-top: 2em;
      cursor: pointer;
      font-weight: bold;
    }

    footer {
      text-align: center;
      padding: 1em;
      background-color: #111;
      color: #999;
      margin-top: 3em;
    }

    .conteneur-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    /*pour ecran de 700px et moins*/
    @media screen and (max-width: 1060px) {
      .features {
        grid-template-columns: 1fr 1fr;
      }
    }