/* ---------------------------TAMPON----------- */

.tampon {
width: 55px;

}

/* ---------------------------WORK----------- */
.project-grid {
  display: grid;
  grid-template-columns: 1fr; /* une seule colonne */
  margin: 50px;
}
/* ---------------------------ABOUT----------- */
.image-about {
    display: grid;
    margin: 50px;
    gap: 0px;
    
}
/* ---------------------------CONTACT----------- */
.image-contact {
    height: 70%;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 150px;
    gap: 25px;
}



/* ---------------------------PROJECT----------- */
/* === Mobile (responsive) fixes === */
#scroll {
  display: none;
}

  /* 1) Laisser le flux normal (page scrollable) */
  .contentproject {
    display: block;       /* stack des colonnes (left puis right) */
    height: auto;         /* NE PAS forcer 100vh */
    min-height: auto;
    overflow: visible;    /* laisser la page défiler naturellement */
  }

  /* 2) Project left : pas de position fixed/sticky, il défile avec la page */
  .project-left {
    position: relative;   /* important : pas de fixed/sticky */
    width: 100%;
    padding-bottom: 30px;
    border-bottom: dashed black 1px;
    border-right: none;
    box-sizing: border-box;
    padding-right: 50px;
  }

  /* 3) Project right : désactiver scroll interne pour que tout défile ensemble */
  .project-right {
    overflow-x: hidden;   /* CHANGE */
    overflow-y: auto;     /* CHANGE */
    height: auto;         /* IMPORTANT */
    width: 100%;          /* pour occuper tout l’écran */
    padding: 20px;
  }



  /* réduit les paddings trop grands pour mobile */
  .project-image {
    flex-direction: column;   /* CHANGE */
    gap: 40px;                /* OPTIONNEL : espace entre images */
    height: auto;             /* IMPORTANT */
  }



  .cartel { 
    padding-top: 120px;
    padding-left: 50px;
  }
  /* FLECHES */
.navigation-buttons{
  padding-left: 50px;
}



/* ---------------------------PLAYGROUND----------- */
.contentplayground {
  padding-left: 20px;
  padding-right: 20px;
}

#playgroundgalery {
  margin-top: 125px;
  width: 100%;
  column-count: 2;
  column-gap: 20px;
}

.playgroundimages {
  margin-bottom: 20px;
}