@media (max-width: 768px) {
  :root {
            --font-size-xs: 0.6rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.4rem;
       --font-size-xl: 3rem; /* équivalent à 11.88cqw sur mobile */


  }
}/* Responsive */
@media (max-width: 768px) {
   
    .container {
        width: 100%;
        padding: 10px;
    }
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
      .description-panel {
          width: 80%;
        }
        .project-card {
  width: 100%;
}
.quote_large {
  padding: 0!important;;
}

.tags-container {
  width: 100%;
}
.projects-container {
  width: 100%;
}

.right-col {
  width: 100%;
}
.pastille-group {
  width: 100%;
}
 
}

	@media screen { html { margin-top: 0 !important; } }
/* Sur mobile (max 768px par exemple), empile le texte et l'image */
@media (max-width: 768px) {
    .two-column {
      flex-direction: column; /* empile au lieu d'être côte à côte */
    }
  
    .two-column .image-block,
    .two-column .text-block {
      width: 100%;  /* pleine largeur */
      flex: none;   /* enlève le flex-grow */
      margin: 0 0 1em 0; /* un petit espace en dessous */
    }
  }
  
  @media (max-width: 768px) {
    .bg-image-desktop {
        opacity: 0;
        z-index: 0;
    }
    .bg-image-mobile {
        opacity: 1;
        z-index: 1;
    }
   
    .left-panel, .right-panel {

        width: 100%;
        height: 50%;

   
}

.services__illustration {
  width: 100%;
}
.services__content, .quote_large  {
  width: 100%;
}
.left-col {
  width: 25%;
}
  }
projects-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Sidebar */
.projects-sidebar {
    width: 100%;
}
.projects-sidebar ul { list-style: none; padding: 0; display:flex; gap:10px; flex-wrap:wrap;}
.projects-sidebar li { margin-bottom: 10px; }

/* Zone projets */
.projects-grid {
    flex: 1;
}

/* Liste projets */
.project-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Vue grille */

.project-list.grid-view {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}





/* Responsive : plus petits boutons sur mobile */
@media (max-width: 600px) {
    .filter-btn {
        font-size: 12px;
        padding: 5px 12px;
    }
}


/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  width: 25px;
  height: 2px;
  background: black;
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  height: 100vh;
  background: white;
  padding: 2rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
}
.mobile-menu a {
  display: block;
  padding: 1rem 0;
  font-size: 18px;
  color: black;
}

/* Responsive */
@media (max-width: 1024px) {
  .navbar, .btn-pastille {
    display: none;
  }
  .burger {
    display: flex;
  }
}@media (max-width: 900px) {
  .services.quote .services__inner,
  .services.quote.reverse .services__inner {
    flex-direction: column;
  }
  .services__content,
  .services__illustration {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.bio-left { width: 20%; color: #999; }
.bio-right { width: 80%; }
@media (max-width: 900px) {
  .team-card { flex: 1 1 48%; }
  .team-bio-inner { flex-direction: column; }
  .bio-left, .bio-right { width: 100%; }
}
@media (max-width: 600px) {
  .team-card { flex: 1 1 100%; }
   .project-list.grid-view {
    grid-template-columns: repeat(1, 1fr);
  }
  .tags-container ul {
  display: flex;
  flex-wrap: wrap;
}


.services__inner, .services.quote.reverse .services__inner {
  flex-wrap: nowrap!important;
  flex-direction: column!important;;

}

.services__illustration,
.services__content {
 max-width: 100%!important;;
}
.services__content {
  align-content: flex-start!important;;
}

.about-network {
  width: 100%!important;
  grid-template-columns: repeat(2, 1fr)!important;;
}

.right-col {
  width: 100% !important;
}
.pastille-group{
  width: 100% !important;
}
.team-grid {
  flex-direction: column;
  flex-wrap: nowrap!important;

  
  
  
}
.team-card {
  width: 60%;
}
}