/* ============================================================================
   HEADINGS
============================================================================ */

 h4,h5,h6 {
   color: var(--project-theme-1);
 }


 /* Header Styles */
 header {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
 }

 /* Project Name Styles */
 .project-name {
   display: flex;
   max-width: 545px;
   padding: 0 0 0 130px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
 }


 /* Project Styles */
 .project {
   display: flex;
   width: 100%;
   height: 540px;
   padding-right: 10px;
   justify-content: space-between;
   align-items: flex-end;
   align-self: stretch;
   background-color: var(--project-theme-1);
   border-radius: 32px;
 }

 /* Hero Styles */
 .hero {
   display: flex;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   min-width: 700px;
   /* Ajout d'une largeur minimale pour le hero */
   padding: 80px 7%;
   /* Utilisation de pourcentages pour mieux s'adapter à la largeur */
   gap: 40px;
 }

 /* Main Styles */
 main {
   margin: auto;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
 }

 header.active {
   opacity: 1;
 }

 main.active {
   opacity: 1;
 }

 .text-container p {
   width: 100%;
 }

 .text-container {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   padding: 180px 10% 180px;
   gap: 16px;
   max-width: 1400px;
   min-width: 600px;
   /* Ajout d'une largeur minimale pour le main */
   width: 100%;
 }

 .bloc_ds {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   padding: 120px 10% 120px;
   gap: 64px;
   max-width: 1400px;
   min-width: 600px;
   /* Ajout d'une largeur minimale pour le main */
   width: 100%;
 }

 .quote,
 .quote2 {
   display: flex;
   flex-direction: column;
   padding: 128px 18% 128px;
   min-width: 600px;
   /* Ajout d'une largeur minimale pour le main */
   background-color: #edebff;
   text-align: center;
   color: var(--title-color);
   font-family: var(--font-primary-alt);
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 36px;
   gap: 24px;
   margin-bottom: 64px;
 }

 .quote2 {
   background-color: #FBFBFB;
 }

 .content {
   max-width: 800px;
   margin: 100px auto;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .mockup {
   display: flex;
   align-items: center;
   flex-direction: column;
   margin: auto;
   padding: 108px 10%;
 }

 .product {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }

 .design-system {
   max-width: 1700px;
   min-width: 300px;
 }

 .container {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   gap: 56px;

 }

 .col-1,
 .col-2 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 40%;
 }

 /*section Design Thinking*/
 .thinking1 {
   display: flex;
   width: 100%;
   background: #faf8ff;
   gap: 8px;
   height: auto;
 }

 .thinking {
   display: flex;
   width: 100%;
   gap: 8px;
   height: auto;
 }


 .actions {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: center;
   gap: 16px;
 }

 .details {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding-left: 0px;
   gap: 24px;
 }

 .task {
   font-family: var(--font-secondary), sans-serif;
   font-weight: 400;
   font-size: 17px;
   color: var(--text-color);
 }

 .intro {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .part,
 .part2 {
   display: flex;
   flex-direction: column;
   gap: 48px;
   width: 100%;
 }

 .part {
   padding-bottom: 64px;
 }

 .goal {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 8px;
   align-self: stretch;
   color: var(--title-color);
   font-family: var(--font-secondary);
   font-weight: 350;
   font-size: 17px;
   margin-top: 32px;
 }

 .highlight {
   color: var(--title-color);
   font-size: 24px;
   font-family: var(--font-primary);
   font-weight: 500;
   word-wrap: break-word;
 }

 /* Text Image Styles */
 .text-img {
   display: flex;
   height: auto;
   gap: 80px;
   align-items: center;
   align-self: stretch;
   margin-bottom: 40px;
 }

 .project-image {
   max-width: 600px;
   min-width: 300px;
 }

 /* Example Styles */
 .exemple {
   width: 100%;
   height: auto;
   margin-bottom: 72px;
 }

 .space {
   margin-top: 48px;
 }

 /* Styles pour la section de navigation vers d'autres projets */
 .other-projects {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   margin: auto;
   padding: 180px 10% 180px;
   gap: 16px;
   width: 1400px;
   min-width: 600px;
   flex-direction: column;
   gap: 24px;

   /*background-color: #f5f5f5;*/
 }


 .project-cards {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
   width: 100%;
 }


 .project-card {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding-right: 48px;
   background: #F4F4F4;
   color: #121212;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   transition: 0.7s;
   transition: opacity 0.8, transform 0.8s ease;
   max-height: 100%;
   border-radius: 24px;
 }

 .size_link {
   width: calc(50% - 20px);
 }

 .project-name2 {
   display: flex;
   padding: 0px 0px 48px 48px;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   align-self: stretch;
   width: 90%;
 }

 .title2 {
   font-family: var(--font-primary);
   font-size: 25px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;

 }

 .subtitle2 {
   font-family: var(--font-primary-alt);
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 }

 .project-img {
   max-width: 400px;
   min-width: 130px;
 }


 .project-card img {
   width: 100%;
   transition: 0.3s;
   filter: grayscale(100%);
 }

 .project-card:hover img {
   filter: grayscale(0%);
 }

 .project-card:hover {
   background-color: #ffebe1;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 0);
 }


 .motion:hover {
   background-color: var(--project-theme-4);
   color: #FFFFFF;
 }

 .salvia:hover {
   background-color: var(--project-theme-3);
   color: #FFFFFF;
 }


 /*progress bar*/
 #progressContainer {
   position: fixed;
   bottom: 0;
   /* Modifier la position vers le bas de l'écran */
   left: 0;
   width: 100%;
   height: 4px;
   background-color: #ececec;
   opacity: 0;
   transition: opacity 0.8s;
   z-index: 9999;
 }

 #progressBar {
   height: 100%;
   width: 0;
   background-color: var(--project-theme-1);
 }

 .btn-sm {
   background-color: var(--project-theme-1);
   width: 40px;
   height: 40px;
   padding: 0;
 }

 .btn-sm:hover {
   background-color: var(--project-theme-1);
 }

 .impact-container {
   padding-top: 62px;
   max-width: 1000px;
   width: 100%;
   text-align: center;
 }

 .impact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 40px;
   justify-content: center;
 }

 .impact-item {
   text-align: center;
 }

 .impact-number {
   font-family: var(--font-primary);
   font-size: 40px;
   font-weight: 700;
   color: var(--title-color);
   margin-bottom: 12px;
 }

 .impact-label {
   font-family: var(--font-secondary);
   font-weight: 350;
   font-size: 16px;
   line-height: 26px;
   color: var(--text-color);
 }


 @media only screen and (max-width: 1023px) {

   .about {
     padding: 100px 10% 180px;
   }

   /* Project Name Styles */
   .project-name {
     display: flex;
     min-width: 350px;
     padding: 0 0 64px 76px;
     flex-direction: column;
     justify-content: flex-end;
     align-items: flex-start;
     flex: 1 0 0;
     align-self: stretch;
   }


   /* Project Styles */
   .project {
     display: flex;
     width: 100%;
     height: 100%;
     padding-right: 10px;
     justify-content: space-between;
     align-items: flex-end;
     align-self: stretch;
   }

   .card {
     flex-direction: row;
   }

   .cards-container {
     flex-direction: column;
   }


 }


 @media only screen and (max-width: 768px) {

   .about {
     padding: 20px 10% 180px;
     display: flex;
     flex-direction: column;
   }

   .text-img {
     display: flex;
     flex-direction: column;
     height: auto;
     gap: 32px;
     align-items: center;
     align-self: stretch;
     margin-bottom: 40px;
   }

   .hero {
     display: flex;
     justify-content: center;
     flex-direction: column;
     height: 480px;
     max-width: 768px;
     min-width: 375px;
     padding: 177px 7% 20px;
     /* Utilisation de pourcentages pour mieux s'adapter à la largeur */
     gap: 40px;
   }

   .quote,
   .quote2 {
     padding: 128px 10% 128px;
     margin-bottom: 0px;
   }

   .app {
     max-width: 300px;
     min-width: 80px;
   }

   .secondary {
     margin-top: 48px;
   }

   .text-container,
   .bloc_ds {
     padding: 90px 10% 90px;
   }


   /* Project Styles */
   .project {
     display: flex;
     width: 100%;
     min-height: 140px;
     gap: 8px;
     padding-right: 10px;
     justify-content: space-between;
     align-items: flex-end;
     align-self: stretch;
     margin-bottom: 0px;
   }


   .project-name {
     min-width: 200px;
     padding: 0px 0px 8% 8%;
   }

   .project-name {
     font-size: 1.4rem;
   }

   .project-image {
     max-width: 40%;
     min-width: 30%;
     height: auto;
   }


   .card {
     flex-direction: column;
   }

   .cards-container {
     flex-direction: column;
   }

   .text-container,
   .bloc_ds,
   nav,
   .quote,
   .quote2,
   .hero,
   .about,
   footer {
     max-width: 768px;
     min-width: 340px;
   }

   .other-projects {
     max-width: 768px;
     min-width: 350px;
   }

 }

 @media only screen and (max-width: 420px) {

   .hero {
     display: flex;
     justify-content: center;
     flex-direction: column;
     height: 320px;
     max-width: 768px;
     min-width: 375px;
     padding: 177px 7% 20px;
     /* Utilisation de pourcentages pour mieux s'adapter à la largeur */
     gap: 40px;
   }

   .project {
     border-radius: 20px;
   }

   .text-container,
   .bloc_ds,
   .text-container2,
   .quote,
   .quote2 {
     padding: 90px 7% 90px;
   }

   .about {
     padding: 20px 0% 64px;
     gap: 0px;
   }

   #intro {
     padding: 20px 7% 0px;
   }

   .other-projects {
     padding: 48px 7% 96px;
   }

   .project-cards {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }


   .project-card {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding-right: 16px;
     transition: 0.3s;
     filter: grayscale(0%);
   }

   .motion {
     background-color: #5F6BE0;
     color: #FFFFFF;
   }

   .salvia {
     background-color: #265964;
     color: #FFFFFF;
   }

   .project-name2 {
     padding-left: 24px;
   }

   .title2 {
     font-size: 18px;
   }

   .subtitle2 {
     font-size: 16px;
   }

   .size_link {
     width: 100%;
   }

   .project-card img {
     filter: grayscale(0%);
   }

   .horizontal {
     display: flex;
     flex-direction: column;
     gap: 24px;
     padding-top: 24px;
     padding-bottom: 24px;
   }

   .left-side {
     max-width: 100%;
   }

   .col-1,
   .col-2 {
     width: 100%;
   }
 }