*{margin: 0;}


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

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

.all:-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.all{
    background-color: #F3F3F3;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.all::-webkit-scrollbar { display: none; }

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;
}


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


header p {
    margin-bottom: 0.7vh;
}

.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;
    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 */
}

header a:hover{
    color: grey;
   }
   

.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 */
}



header a{
    color: grey;
   }
   

.webb{
    color:grey
}


.web :hover{
    color: black
}

   header a:hover{
    color: black;
   }
   


.web:hover{
    color: grey;
   }

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


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



span{
    color: #9E9E9E;
}


.rightbox{
    grid-column-start: 5;
grid-column-end: 13;
}


.imagetop{
    max-width: 100%;
    height: auto;
}

.imagetop img{
    display: flex;
    object-fit: cover;
    height: 100%;
    width: 100%;
}


.imagetop video{
    display: flex;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.imagedeux {
    height: 100%;
    right: 0;
    width: 100%;
    flex-direction: column;
}

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


.imagedeux video {
    object-fit: cover;
    width: 49.6%;
}


.img3{
    margin-top: 1vh;
}

.img2{
    width: 100%;
    margin-top: 1vh;

}


.img5{
    width: 100%;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
}


.img4
{
    margin-left: 0vh;
    margin-top: 1vh;
}

/* Animation de glissement vers le bas */
@keyframes slideDown {
    from {
        top: -100px; /* Hors de l'écran */
    }
    to {
        top: 0; /* Position normale */
    }
}

/* 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 */
    }
}


@media (max-width: 768px) {
  
    *{margin:0;}
  
    header {
        font-size: 1.2vh;
        height: 3.5vh;
      }
  
      header p {
          margin-bottom: 1.3vh;
        }
  
  
      .boxmenu{
          width: 50vw;
          margin-bottom: 0.7vh;
      }
    .imagedeux {
        display: flex;
        flex-direction: column;
      }
  
      .textbot{
        display: flex;
        flex-direction: row;
        align-items: flex-end; /* aligne verticalement au bas de la div */  }
     
      
      .web{
        display: none;
      }
        
        section {
            display: flex;
            flex-direction: column;
          }
        
          .leftbox {
            position: fixed; 
            width: 99%;
            flex-direction: column;
            font-size: 1.2vh;
            background-color:#F3F3F3;
            height: 18vh;
          }
        
          .texttop,
          .textbot {
            width: 100%;
            text-align: justify;
          }
        
          .textbot{
            display: none;
          }
    
      .rightbox {
        grid-column: auto;
        font-size: 3vh;
        display: flex;
        flex-direction: column;
        margin-top: 19vh;
      }
    
      .rightbox img,
      .rightbox video {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

    .img4
    {
        margin-left: 0vh;
        margin-top: 1vh;
    }


    }