*{margin: 0;}

/* Hide scrollbar for Chrome, Safari and Opera */
.all::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .all {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    background-color: #F3F3F3;
  }

  html, body {
    overflow: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
}


header {
    width: 98.7vw;
    height: 3vh;
    margin-left: 0.6vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    letter-spacing: -0.04vw;
    font-size: 1.4vh;
    z-index: 99;
    position: fixed;
    top: 0;
    background-color: #F3F3F3;
    text-align: center;
}

header p {
    margin-bottom: 0.7vh;
}


.boxmenu{
    width: 33vw;
    justify-content: space-between;
    display: flex;
}

.mail {
    animation: blink 1s steps(1, end) infinite; /* Animation sans effet smooth */
}

/* Animation pour changer la couleur de noir à blanc */
@keyframes blink {
    0%, 100% {
        color: black;
    }
    50% {
        color: #F3F3F3;
    }
}


section{
    height: 95.2vh;
    height: calc(var(--vh, 1vh) * 95.2); /* remplace 95.2vh par une version dynamique */
    width: 98.7vw;
    margin-left: 0.6vw;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
   column-gap: 1vh;
   margin-top: 3.5vh;
   background-color: #F3F3F3;
   }





a {
    text-decoration: none;
    color: inherit; /* Cela récupère la couleur du texte parent */
}


.archives{
    color: grey;
}


.works{
color: black;
}

header a:hover{
 color: black;
}



.leftbox{
    grid-column-start: 1;
    grid-column-end: 4;
    margin-bottom: 1vh;
    display: grid;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    letter-spacing: -0.03vw;
    font-size: 1.4vh;
    text-transform: uppercase;
    position: fixed;
    text-align-last: justify;
    height: 95.8vh;
    width: 24.3vw;
}


.justify{
    text-align: justify;
}

.texttop{
    text-align: justify;
    width: 100%; /* Assurer que le texte a une largeur */
    width: 24.3vw;
    display: flex
;
}






.textbot{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 24.3vw;
}


header a {
    margin-bottom: 0.7vh;
    }
    
span{
    color: #9E9E9E;
}


.rightbox{
    grid-column-start: 5;
    grid-column-end: 13;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vh;
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.07vw;
    font-size: 5.5vh;
    font-weight: 300;
    color: #F3F3F3;
    flex-direction: column;
    display: flex;
    position: relative;
}

.rightbox div p {
    margin-left: 0.6vw;
    z-index: 90;
    position: absolute;  
}





.mariotsaibox{
    height: 47vh;
    display: flex;
    
}



.mariotsaibox p{
    height: 47vh;
        display: flex;
    align-items: flex-end;
}


.courierbox{
    height: 47vh;
    display: flex;
}


.courierbox img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.courierbox video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.courierbox p{
    height: 47vh;
    display: flex;
    align-items: flex-end;
}


.img1{
    object-fit: cover;
    width: 100%;
}

.img2{
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.img3{
    object-fit: cover;
    width: 100%;
    height: 100%;
}




.bottombox{
    height: 76.54vh;
    display: flex;
    gap: 1vh;
}


.bottombox div{
    display: flex;
        align-items: flex-end;
        width: 32.56vw;
        height: 100%;
}



.bottombox2{
    height: 76.54vh;
    display: flex;
    gap: 1vh;
    background-color: red;
}


.bottombox div{
    display: flex;
        align-items: flex-end;
        width: 32.56vw;
        height: 100%;
}




/* Appliquer la couleur du texte aux paragraphes à l'intérieur des boîtes */
.mariotsaibox:hover p,
.chogiseokbox:hover p,
.courierbox:hover p,
.napoleonbox:hover p {
    color: inherit;
}


.mariotsaibox:hover img,
.courierbox:hover img
{
    transform: scale(0.995); /* Réduit la taille à 95% */
    transition: transform 0.3s ease; 

  
}

.chogiseokbox:hover img,
.napoleonbox:hover img {
    transform: scale(0.995); /* Réduit la taille à 95% */
    transition: transform 0.3s ease;    
  
  }






.mariotsaibox img,
.chogiseokbox img,
.courierbox img,
.napoleonbox img {
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
  transition: transform 0.3s ease;
  transform-origin: left bottom; /* Ancre l’image en bas à gauche */
 
}




/* Effet de fondu blanc pour le main */
main {
    opacity: 0; /* Commence invisible */
    animation: fadeIn 1s ease forwards; /* Animation de fondu */
    animation-delay: 0.5s; /* Délai d'une seconde après le header */
}

/* Animation de fondu */
@keyframes fadeIn {
    from {
        opacity: 0; /* Invisible */
    }
    to {
        opacity: 1; /* Complètement visible */
    }
}





.boxright {
    animation: slideIn 1s ease forwards; /* Applique l'animation à la div boxright */
}

@keyframes slideIn {
    from {
        transform: translateY(100px); /* Part de 100px en bas */
    }

    to {
        transform: translateY(0); /* Arrive à sa position initiale */
    }
}



/* Pour les écrans de moins de 768px (mobile) */
@media (max-width: 768px) {
    body {
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  
    body * {
      display: none !important; /* cache tout le reste */
    }
  
    body::before {
      content: "Open on computer please";
      text-transform: uppercase;
      display: block;
      color: black;
      font-size: 1.5rem;
      font-family:"DM Sans", sans-serif ;
      text-align: center;
    }
  }