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

.geist-mono-<uniquifier> {
  font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.geist-<uniquifier> {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
  /*
  @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-Mono Medium", sans-serif;
      src: url("/FONT/GeistMono-Medium.ttf") format("truetype");
  } 

  @font-face {
      font-family: "Geist Bold", sans-serif;
      src: url("/FONT/Geist-Bold.ttf") format("truetype");
  }
  
*/
      @font-face {
	font-family: "Borrow";
	src: url("/BORROW/Borrow/Variable-TT/SAVE-Borrow-Variable-dernier-version-VF.ttf") format("truetype");
}


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

  html {
      cursor: pointer;
      
  }

  body {
      margin: 0;
      }

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

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

  /* ===========================
           HEADER
        =========================== */


h1 {
    	font-family: "Borrow";
margin:0;
padding-left: 10px;
   font-variation-settings: 'ZZZZ'100, 'wdth'125; 
}



  #navigation-1 ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 125px;
      padding: 10px 10px 10px 10px;
      border: 1px solid #000;
      background-color: rgb(252, 198, 29);
      	  vertical-align:middle;
      	    font-weight: 500;
  }


  #navigation-1 li:last-child {
      text-transform: uppercase;
      padding: 2px;
    	font-size:1.5em;
      padding-top:0;

        font-family: "Geist Mono", monospace;
  font-weight: 700;

  }
 

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

  }

  #categories li {
      float: left;
            padding: 10px;

  }

  #categories {
      padding: 10px 20px;
      display:grid;
      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 {
      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;
  }

  .dimensions {
      font-style: italic;
        font-family: "Geist Mono", monospace;
  font-weight: 200;

  }

  .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: 10px;
      margin:5px;
      text-align: right;
  font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  }
  
  h2 {
  font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:1.2em;
  }

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

  .visible {
      display: block;
  }


  .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;
  }
  
  p {
        font-family: "Geist", sans-serif;
          font-weight: 400;

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

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

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

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

  footer {
  font-family: "Geist Mono", 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);
      font-family: "Geist Mono";
  }

  #qui {
      padding: 10px 60px;
  }

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

  #cv {
      padding: 10px 60px;
            font-size:20pt;


  }


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


  @media (max-width: 1000px) {
      
      body {
      margin: 0;
      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;
      }

.filters-inline {
    display:flex;
            font-size:0.8em;

}

.filters-inline li {
      background-color: rgb(252, 198, 29);
      border:1px solid black;
      border-radius: 100%;
      padding:20px;
  }
  
      a {
        background-color: none;
        color: rgb(0, 0, 0);
    }

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

      #navigation-1 li {
          padding: 8px;
          text-align: center;

          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;
    }
    
    #cv {
              font-size: 25pt;
    }

    .item {
padding-bottom: 20px;
    }
    
  }