/*font Inter*/
   @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

   /* ------- */
   body {
       display: flex;
       width: 24.5625rem;
       padding: 2rem 0;
       flex-direction: column;
       align-items: center;
       gap: 2rem;
       margin: auto;
   }

   main {
       display: flex;
       padding: 2rem 0;
       flex-direction: column;
       align-items: center;
       gap: 2rem;
       align-self: stretch;
       margin: auto;
   }

   p {
       color: #000;
       font-family: Inter;
       font-size: 0.875rem;
       font-style: normal;
       font-weight: 500;
       line-height: normal;
       align-self: stretch;

       margin-block-start: 0;
       margin-block-end: 0;
   }

   h1 {
       color: #000;
       font-family: Inter;
       font-size: 2.25rem;
       font-style: normal;
       font-weight: 900;
       line-height: normal;
       align-self: stretch;
       margin: 0;
   }

   h2 {
       color: #000;
       font-family: Inter;
       font-size: 1.25rem;
       font-style: normal;
       font-weight: 900;
       line-height: normal;
       align-self: stretch;
       margin: 0;
   }

   h3 {
       color: #000;
       font-family: Inter;
       font-size: 0.875rem;
       font-style: normal;
       font-weight: 900;
       line-height: normal;
       align-self: stretch;
       margin: 0;
   }

   header {
       display: flex;
       width: 100%;
       padding: 0 2rem;
       align-items: center;
       align-self: stretch;
       margin: auto;
       justify-content: space-between;
       box-sizing: border-box;
   }

   footer {
       display: flex;
       max-width: 43.75rem;
       padding: 0 2rem;
       gap: 0.5rem;
       align-self: stretch;
       margin: 0;
       justify-content: space-between;
       box-sizing: border-box;
   }

   footer p,
   footer a {
       color: #000;
       font-family: Inter;
       font-size: 0.875rem;
       font-style: normal;
       font-weight: 150;
       line-height: normal;
       margin: 0;
   }

   nav {
       background-color: #fff;
       display: flex;
       justify-content: space-between;
       padding: 0.5rem 2rem;
       top: 0;
       left: 0;
       box-sizing: border-box;
       width: 100%;
       position: sticky;

       & .subnav {
           display: flex;
           gap: 0.5rem;
       }
   }

   nav a {
       color: #000;
       font-family: Inter;
       font-family: Inter;
       font-size: 0.875rem;
       font-style: normal;
       font-weight: 500;
       line-height: normal;
       text-decoration: none;
       background-color: #fff;
       border: none;
       padding: none;
       margin: none;
   }

   /* CLASS specific*/
   .logo {
       font-weight: 900;
   }

   .bio {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
       align-self: stretch;
       max-width: 43.75rem;
       padding: 0 2rem;
   }

   .project_zone {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       gap: 0.5rem;
       align-self: stretch;
       max-width: 43.75rem;
       flex-wrap: wrap;
   }

   .project_block {
       display: flex;
       width: 100%;
       padding: 2rem;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
       align-self: stretch;
   }

   .project_block a {
       height: 20.375rem;
       align-self: stretch;
       aspect-ratio: 329/326;
       text-align: center;
   }

   .project_block img {
       height: 20.375rem;
       align-self: stretch;
       aspect-ratio: 329/326;
       text-align: center;
   }

   .project_block a:hover {
       opacity: 50%;
   }

   .project_block h2 {
       max-width: 43.75rem;
   }

   header svg {
       stroke-width: 5px;
       stroke: #000;
   }

   footer svg {
       stroke-width: 3px;
       stroke: #000;
   }

   /*incrustation d'image par CSS*/
   .project_ecchymose {
       background: url(img/SBE-insta-18.jpg) lightgray 50% / cover no-repeat;
   }

   .project_artistemonde {
       background: url(img/artiste_et_le_monde.jpg) lightgray 50% / cover no-repeat;
   }

   .project_paradekyoto {
       background: url(img/parade_a_kyoto-montage.jpg) lightgray 50% / cover no-repeat;
   }

   .img_ecchymose1 {
       background: url(img/SBE-insta-18.jpg) lightgray 50% / cover no-repeat;
   }

   .img_ecchymose2 {
       background: url(img/SBE-insta-07.jpg) lightgray 50% / cover no-repeat;
   }

   .img_ecchymose3 {
       background: url(img/SBE-insta-08.jpg) lightgray 50% / cover no-repeat;
   }

   .img_artistemonde1 {
       background: url(img/artiste_et_le_monde.jpg) lightgray 50% / cover no-repeat;
   }

   .img_artistemonde2 {
       background: url(img/entrainement-rech.jpg) lightgray 50% / cover no-repeat;
   }

   .img_artistemonde3 {
       background: url(img/entrainement-rech2.jpg) lightgray 50% / cover no-repeat;
   }

   .img_paradekyoto1 {
       background: url(img/parade_a_kyoto-montage.jpg) lightgray 50% / cover no-repeat;
   }

   .img_paradekyoto2 {
       background: url(img/parade-kyoto-test-3.gif) lightgray 50% / cover no-repeat;
   }

   /*-----*/
   .footer_block {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       text-align: right;
       gap: 0.5rem;
       flex: 1 0 0;
   }

   /*----------------------*/
   /*----------------------*/
   /* DESKTOP MODE */
   /*----------------------*/

   @media (width>700px) {
       body {
           display: flex;
           width: 100%;
           padding-bottom: 2rem;
           flex-direction: column;
           align-items: center;
           gap: 2rem;
           margin: auto;
       }

       main {
           display: flex;
           max-width: 62.5rem;
           padding: 2rem 0;
           flex-direction: column;
           align-items: center;
           gap: 2rem;
           align-self: stretch;
           margin: auto;
       }

       .bio {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 0.5rem;
           align-self: stretch;
           max-width: 43.75rem;
           padding: 0 2rem;
       }

       .project_zone {
           display: flex;
           flex-direction: row;
           align-items: flex-start;
           gap: 0.5rem;
           align-self: stretch;
           max-width: 43.75rem;
           flex-wrap: wrap;
       }

       .project_block {
           display: flex;
           width: 100%;
           padding: 2rem;
           flex-direction: column;
           align-items: flex-start;
           gap: 0.5rem;
           align-self: stretch;
       }

       .project_block a {
           height: 20.375rem;
           align-self: stretch;
           aspect-ratio: 329/326;
           text-align: center;
       }

       .project_block img {
           height: 20.375rem;
           align-self: stretch;
           aspect-ratio: 329/326;
           text-align: center;
       }

       .project_block h2 {
           max-width: 43.75rem;
       }

       header svg {
           stroke-width: 5px;
           stroke: #000;
       }

       footer svg {
           stroke-width: 3px;
           stroke: #000;
       }
   }