@media screen and (max-width: 480px) {
    /* Styles pour les écrans 'xs' et plus petits */
/* header --------------------------------------------------------------------- */
    .header-container{
        width: 100%;
        display: flex;
        height: 10vh;
        justify-content: center;
        /* background-color: red; */
        padding-top: 0rem;
        padding-bottom: 0rem;
        color: #1a202c;
    }

.text-rouge{
    font-size:1.7rem;
}
    
#accueilTitrePrincipale{
    font-size:1.2em;
}

    .px-4{
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-color: gray;
        padding-block: 0.6rem;
        padding-inline: 0.8rem;
        border-left: 4px solid var(--secondary-color);
    }

    .nav-links-reponsive-cont{
        justify-content: start;
        align-items: start;
    }

    .faBar{
        font-size: 2rem;
        color: var(--another-color);
        margin-right: 1rem;
    }

    .navResponsive{
      display: block;
      width: 100%;
      height: 10vh;
      display: flex;
      justify-content: space-between;
      padding-inline: 1rem;
      align-items: center;
      background-color: var(--text-color);
    }

    .main-nav {
        /* width: 80%;
        background-color: #f9fafb; 
        margin-top: 1.5rem;
        border-radius: 9999px;
        padding-inline: 1.5rem; */
        display: none;
    }

/* accueil ---------------------------------------------------------------------- */

    .accueil {
        height: auto;
        flex-direction: column;
        min-height: 100vh;
        padding: 0rem 1rem 1rem 1rem; 
    }

    .label{
        font-size: 1.5rem;
    }

    .accueil-image-wrapper {
        height: auto;
        justify-content: center;
        padding-right: 0; 
        width: 100%;
        margin-top: 2rem;
    }

    .imgContenaire {
        width: 80%; 
        height: auto; 
    }

    .imgContenaire img {
        height: 300px;
    }

    .accueil-content {
        height: auto;
        align-items: center;
        text-align: center; 
        padding: 2rem 1rem; 
        width: 100%;
    }

    .description {
        font-size: 1rem; 
        line-height: 1.8rem;
        margin-top: 1rem;
    }

    .rectangleInfos {
        grid-template-columns: 1fr;
    }

    .btnCont {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .btnDownload {
        margin-left: 0;
        margin-top: 1rem;
    }

    .about-badge{
      display: none;
    }


/* service -------------------------------------------------------------------- */

    .section-full{
      min-height: auto;
      height: auto;
    }

    .serviceCont{
      padding-inline: 2rem;
      padding-block: 1rem;
      min-height: 70vh;
    }

    

    .serviceTitle{
        font-size: 1.97rem;
        margin-bottom: 0rem;
    }

    .seeMore{
        margin-top: 0rem;
        padding-block: 0.7rem;
        padding-inline: 
        3rem;
    }
    
    .serviceImage > img {
        height: 250px;
    }
    
    /* 1. Configuration du conteneur de défilement (mobile-scroll-container) */
    .mobile-scroll-container {
        /* Permet le défilement horizontal */
        overflow-x: auto; 
        overflow-y: hidden;
        width: 100%; 
        /* box-shadow: 10px 0px 10px rgba(5, 5, 5, 0.608); */
        /* border-right: var(--another-color) solid 20px; */
        /* Optionnel : Masque la barre de défilement pour un look plus épuré sur mobile */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;     /* Firefox */
    }

    .mobile-scroll-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .serviceGrid {
        display: flex; 
        white-space: nowrap; 
        width: max-content; 
        gap: 2rem; 
        padding-left: 1rem;
        padding-right: 1rem;
        padding-block: 1rem;
    }
    .serviceBox {
        flex-shrink: 0; 
        flex-basis: 60vw;
        width: 16rem;
        /* height: 100%; */ /* On retire la hauteur fixe qui cause le problème */
        height: 250px; /* On donne une hauteur fixe comme sur desktop */
        display: flex; /* Assure que le contenu est bien géré par flexbox */
        position: relative; /* Indispensable pour le positionnement absolu de l'enfant */
    }

    .serviceButton{
        font-size:0.8rem; 
    }

    .serviceName{
        font-size: 0.8rem;
        white-space: normal;
    }

    .serviceGridCore{
        padding-block: 1rem;
        padding-inline: 1rem;
    }


/* .partnerCont -------------------------------------------------------------------- */

.partnerCont{
    padding-inline: 2rem;
}

/* skills -------------------------------------------------------------------------- */

  .skillTitle {
      font-size: 1.97rem;
      font-weight: bold;
  }

  .skillsGrid {
        /* Écrase les propriétés Grid (grid-template-columns) */
        display: flex; 
        grid-template-columns: none; /* Désactive la grille */
        
        /* Force les éléments à rester sur une seule ligne */
        white-space: nowrap; 
        width: max-content; 
        
        /* Ajout de padding horizontal pour l'esthétique du défilement */
        padding-left: 1rem;
        padding-right: 1rem;
        
        /* Réutilise l'espacement de la grille (gap) */
        gap: 2rem; 
    }
    
    /* 3. Configuration des boîtes individuelles (skillBox) */
    .skillBox {
        flex-shrink: 0;
        flex-basis: 65vw;
        height: 250px;
        padding: 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .skillCont {
      padding-inline: 2rem;
      /* padding-block: 2rem; */
      min-height:70vh;
    }
    

/* projets -------------------------------------------------------------------------- */

    

  .projetTitle {
      font-size: 1.97rem;
      font-weight: bold;
  }

  .projetBoxTitre{
    color: #ffffff;
    font-weight: bolder;
    font-size: 1.2rem;
    /* text-decoration: underline; */
    display: inline-block;
    padding-inline: 0.8rem;
    padding-block: 0.6rem;
    background-color: #343c4c;
    border-left:solid 4px var(--secondary-color);
  }

  .projetsGrid {
        /* Écrase les propriétés Grid (grid-template-columns) */
        display: flex; 
        grid-template-columns: none; /* Désactive la grille */
        margin-top: 0.2rem;
        /* Force les éléments à rester sur une seule ligne */
        white-space: nowrap; 
        width: max-content; 
        
        /* Ajout de padding horizontal pour l'esthétique du défilement */
        padding-left: 1rem;
        padding-right: 1rem;
        
        /* Réutilise l'espacement de la grille (gap) */
        gap: 2rem; 
    }
    
    /* 3. Configuration des boîtes individuelles (projetBox) */
    .projetBox {
        flex-shrink: 0; 
        flex-basis: 65vw; 
        height: 100%; 
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .projetCont {
      padding-inline: 2rem;
      height: auto;
      padding-block: 2rem;
    }
    

/* contact ---------------------------------------------------------------------- */

.contact{
  flex-direction: column;
  justify-content: flex-start; /* Aligner le contenu en haut */
  align-items: center;
  padding-inline: 0; /* Pas de padding horizontal sur le conteneur principal */
  padding-block: 0; /* Pas de padding vertical sur le conteneur principal */
  min-height: 100vh;
  overflow-y: auto; /* Activer le défilement uniquement si nécessaire */
}

#fermeContact{
    position: relative;
    cursor: pointer;
    color: var(--another-color);
    top: initial;
    right: initial;
}

.nav-brandContact{
    display: flex;
}

.navResponsiveContact{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-inline: 1rem;
    padding-block: 1rem;
    align-items: center;
    background-color: var(--text-color);
}

.header-container{
    z-index: 2000;
}

.reseaux, .whatsApp{
  width: 100%;
  padding-inline: 2rem; /* Ajouter le padding ici */
  height: auto; /* Laisser la hauteur s'adapter au contenu */
  padding-top: 2rem; /* Espace en haut pour ne pas être sous le bouton fermer */
  padding-bottom: 3rem; /* Espace en bas */
  border-radius: 0; /* Enlever les coins arrondis en mode colonne */
}

.reseaux > h1{
          font-size: 2rem;
}

.reseaux > p{
  font-size: 1rem;
}

.reseauxPro > h2 {
    margin-top: 0.8rem;
    font-weight: bolder;
    font-size: 0.99rem;
    color: var(--secondary-color);
}

.formBox:nth-child(1) input{
  width: 14rem;
}

/* footer ----------------------------------------------------------------------- */
    .footer-top {
      display: flex;
      justify-content: space-between;
      /* flex-wrap: wrap; */
      gap: 2rem;
      /* padding-bottom: 2rem; */
      padding-top: 0rem;
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
    }

    .footer-separator {
      width: 100%;
      /* background-color: 
      4A4C5F; */
      /* align-self: stretch; */
      height: 5px;
    }

    /* téléchargement ------------------------------------------------------------- */
    .download-menu{
        padding-inline: 2rem;
        position: fixed;
    }
    
    .download-menu-element{
        width: 100%;
        height: 50%;
        padding-inline: 1rem;
    }

    .downloadSortir{
        position: absolute;
        bottom: 1.8rem;
        right: 2.1rem;
        padding-block: 0.5rem;
        padding-inline: 2rem;
        background-color: var(--secondary-color);
        border: none;
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: bolder;
        border-radius: 0.5rem;
        cursor: pointer;
    }

    .download-option{
        font-size: 1rem;
    }

}