/* ===========================
           TYPE
        =========================== */

  @font-face {
      font-family: "Geist Light", sans-serif;
      src: url("/FONT/Geist-Light.ttf") format("truetype");
  }
  
  @font-face {
      font-family: "Geist Regular", sans-serif;
      src: url("/FONT/Geist-Regular.ttf") format("truetype");
  } 

  @font-face {
      font-family: "Geist Medium", sans-serif;
      src: url("/FONT/Geist-Medium.ttf") format("truetype");
  } 

  @font-face {
      font-family: "Geist Bold", sans-serif;
      src: url("/FONT/Geist-Bold.ttf") format("truetype");
  }

  /* ===========================
           GLOBAL
        =========================== */

  html {
      cursor: pointer;
      
  }

  body {
      margin: 0;
      font-family: "Geist Medium", sans-serif;
  }

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

  hr {
      border: 0.5px solid rgb(0, 0, 0);
  }

  /* ===========================
           HEADER
        =========================== */
  header {
      padding: 10px 20px;
      border: 1px solid #000;
      background-color: rgb(252, 198, 29);
            font-family: "Geist Medium";

  }


  #navigation-1 ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 50px;
  }


  #navigation-1 li {
      font-weight: 600;
      text-transform: uppercase;
      padding: 2px;
      
  }

  /* ===========================
           FILTRES
        =========================== */
  .filters-inline {
      display: grid;
      flex-wrap: wrap;
      gap: 10px;
      margin: auto;
      padding: 0;
      list-style: none;
                  font-family: "Geist Medium";


  }

  #categories li {
      float: left;
  }

  #categories {
      padding: 10px 20px;
      position: absolute;
      margin-right: 0;
      background: conic-gradient(#fff 0.25turn,
              #000 0.25turn 0.5turn,
              #fff 0.5turn 0.75turn,
              #000 0.75turn) top left / 20% 20% repeat;
  }


  #categories:hover {
      background-color: #fff;
      padding: 10px 20px;
  }

  .filters-inline li {
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid black;
      transition: background 0.3s, color 0.3s;
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
      text-transform: uppercase;
  }

  .filters-inline li:hover {
      background-color: rgb(252, 198, 29);
      color: rgb(0, 0, 0);
  }

  a {
      background-color: rgb(252, 198, 29);
      color: rgb(0, 0, 0);
  }

  /* ===========================
           GRILLE
        =========================== */
  .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* 3 colonnes */
      gap: 20px;
      padding: 20px;
      background-color: #f8f8f8;
      margin-left: 12vw;
            font-family: "Geist Medium", sans-serif;


  }

  .dimensions {
      font-style: italic;
  }

  .item {
      display: none;
      /* masqué par défaut */
      padding: 25px;
  }

  .item img {
      max-width: 100%;
      display: block;
      margin: 0 auto 10px;
  }

  .savoir {
      border: 1px solid #000;
      padding: 5px;
      text-align: right;
  }

  .savoir:hover {
      background-color: rgb(252, 198, 29);
  }

  .visible {
      display: block;
  }


  img {
      width: 100%;
  }

  .image-hover {
      position: relative;
      height: auto;
  }

  .image-hover img {
      width: 100%;
      height: auto;
      display: block;
      transition: opacity 0.3s ease-in-out;
  }

  .image-hover .hover-img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
  }

  .image-hover:hover .hover-img {
      opacity: 1;
  }

  .image-hover:hover .default-img {
      opacity: 0;
  }

  /* ===========================
        CARROUSELS
        =========================== */

  .galerie-cachee {
      display: none;
      margin-top: 10px;
  }

  .galerie-cachee img {
      width: 100%;
      margin: 5px;
  }

  /* ===========================
           FOOTER
        =========================== */

  footer {
      font-family: "Geist Mono Medium", monospace;
      bottom: 0;
      background-color: rgb(0, 0, 0);
      padding: 15px;
      color: white;
      position: fixed;
      font-size: 10pt;
  }


  /* ===========================
                 PAGE PROPOS
              =========================== */


  .wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }

  #qui {
      padding: 10px 60px;
      font-size: 15pt;
  }

  .surlignage:hover {
      background-color: rgb(252, 198, 29);
  }

  #cv {
      font-family: "Geist Mono Medium", monospace;
      padding: 10px 60px;

  }


  /* ===========================
           RESPONSIVE
        =========================== */


  @media (max-width: 1000px) {
      
      body {
      margin: 0;
      font-family: "Geist Mono Medium", monospace;
      font-size: 25pt;
            line-height:1.5;


  }
  
      .grid {
          display:block;
          grid-template-columns: 1fr;
          margin-left: 0;
      }

      header {
          padding: 10px 20px;
          border-bottom: 1px solid #000;
          font-size: 2em;
      }

.filters-inline li {
      background-color: rgb(252, 198, 29);
  }
  
      a {
        background-color: none;
        color: rgb(0, 0, 0);
    }

      #navigation-1 ul {
          display:grid;
          list-style: none;
          margin: 0;
          padding: 0;
          gap: 10px;
          padding: 10px;
      }

      #navigation-1 li {
          border:1px solid black;
          border-radius: 100%;
          padding: 8px;
          text-align: center;
          margin-left: 100px;
          margin-right: 100px;
          color: rgb(252, 198, 29);
      }

      #navigation-1 li:first-child {
        border:none;
        background-color: rgb(252, 198, 29);
        color: black;
    }
    

      .wrapper {
        display: inline-block;
    }

    #categories {
        padding: 30px 30px;
        position: relative;
        margin-right: 0;
        background: conic-gradient(#fff 0.25turn,
                #000 0.25turn 0.5turn,
                #fff 0.5turn 0.75turn,
                #000 0.75turn) top left / 20% 20% repeat;
                          font-size: 1.7em;
                          text-align:center;
                          

    }

    .savoir {
        background-color: rgb(252, 198, 29);
    }

    #qui {
        padding: 10px 30px;
      font-size: 25pt;
      line-height:1.5;
    }

    .item {
padding-bottom: 20px;
    }

  }