@font-face {
    font-family: "Gaila";
    src:url("fonts/Berzulis-GAILA-Regular.ttf")
}

html {
    scroll-behavior: smooth; /* Scroll fluide */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    margin: 0;
    padding: 0;
    background-color: #d3d3d3;
    cursor: crosshair;
    hyphens: auto;
    scroll-behavior: smooth; /* Scroll fluide */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar{
    display:none;
}


header {
    position:fixed;
    top:0;
    width:100vw;
    height:8vh;
    border-bottom: 1px solid black;
    z-index:15;
    background-color: #d3d3d3;
}




header h1 {
    font-family: Gaila;
    margin-left: 5vw;
    font-size:2.5rem;
    text-align: center;
    margin:0;
    margin-top:8px;
}

.menu {
  display:flex;
  position:fixed;
  top:20px;
  right:0;
  margin-right:75px;
}

.menu a {
    font-family: Helvetica;
    margin-left: 50px;
    font-size:1.5rem;
  }

.index-button {
    z-index: 20;
    position: fixed;
    top: 25px;
    left: 70px;
    color: white;
    font-family: Helvetica;
    font-size: 2vw;
    mix-blend-mode: difference;
}

.info-button {
    z-index: 20;
    position: fixed;
    top: 20px;
    right: 70px;
    color: white;
    font-family: Helvetica;
    font-size: 2vw;
    mix-blend-mode: difference;

}

.fullpage-wrapper {
    height: 100vh;
  overflow-y: scroll; /* Activer le défilement vertical */
  scroll-snap-type: y mandatory; /* Scroll Snap en position verticale */
  }

  .margin {
    margin-top:60px;
  }

.projet {
    height: 100vh; /* Chaque section prend 100% de la hauteur de la fenêtre */
    scroll-snap-align: start; /* Chaque section commencera à partir du haut */
}

.impress-button {
    z-index: 20;
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translate(-50%);
    color: white;
    font-family: Helvetica;
    font-size: 2vw;
    mix-blend-mode: difference;

}

a {
    text-decoration: none;
    color: black;
}

.slider {
    margin-top:8vh;
    object-fit: scale-down;
    height:auto;
    width: 100%;
    padding: 0;
    margin: 0;
}


.slick-slide {
    margin-top:8vh;
    object-position: 15% 100%;
    height: 77vh;
    width:auto;
    background-color: black;
}


.slick-slide img {
    width: auto;
    height: 100%;
    object-fit: contain;
}


.slider img {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

.slick-prev {
    z-index: 10;
    position: absolute;
    background-color: transparent; /* Optionnel, pour garder la transparence */
    color: transparent; /* Optionnel, pour cacher le texte */
    top: 60px; /* Positionne le bouton 60 pixels du haut */
    left: 0%; /* Ajuste selon tes besoins */
    transform: translateY(-50%); /* Centrer verticalement */
    width: 50%; /* Ajuster la largeur selon tes besoins */
    height: 100%; /* Ajuste la hauteur selon tes besoins */
    border: none; /* Aucun bord pour garder l'apparence propre */
    cursor:url(img/Fichier\ 3.png), auto; /* Curseur de redimensionnement pour le bouton précédent */
}

.slick-next {
    z-index: 10;
    position: absolute;
    background-color: transparent;
    color: transparent;
    top: 50%;
    right: 0%;
    transform: translate(-0%, -50%);
    width: 50%;
    height: 100%;
    border: none;
    cursor:url(img/Fichier\ 4.png), auto;
  }

.description {
    border-top:1px solid black;
    border-bottom:1px solid black;
    height:15vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Espace entre les éléments */
    background-color: rgb(50, 50, 50);
    hyphens: auto;
    background-color: lightgrey;

}

.gauche {
    width:100vw;
    font-family: 'Helvetica';
    line-height: 1vw;
    font-size: 1.2vw;
    font-weight: lighter;
    color: black;
    padding: 20px 20px 20px 20px;
    text-align: right;
    display: flex;
    background-color: lightgrey;
    hyphens: auto;
    align-items: center;

}

.details {
    margin:5px 25px 5px 5px;
    text-justify: right;
    display:flex;
    line-height:auto ;
    font-family: Helvetica;
    font-size: 1.2em;
    line-height:1.3em;
    justify-content: right;  /* Centrer horizontalement */
    align-items: center;      /* Centrer verticalement */
}


.details span {
    font-weight: 400;
    margin:5px 5px 5px 5px;
    background-color: black;
    color:lightgrey;
    padding:8px 15px 5px 15px;
    border-radius: 25px;
}

.droite {
    align-self:right;
    width:10vh;
    height:auto;
    background-color: grey;
    color: black;
    padding: 20px 20px 20px 20px;
    border-left:1px solid black;

}


.droite img{
    width:10vh;
    height:10vh;
    vertical-align: middle;
    align-items: center;

}


.titre {

    text-align: left;
    color: black;
    font-family: Helvetica;
    vertical-align: middle;

}

.titre h1 {
    white-space: normal;
    word-break: keep-all;
    font-style:15em;
    line-height:1em;
    font-weight: 500;
    margin:0;
    padding:0;
 }

.titre h2{
    margin:0;
}

.titre span{
    font-weight:100;
    align-items:center
}

.info-overlay {
    position: absolute; /* Changez à absolute */
    top: 8vh; /* Alignez au sommet de la section projet */
    left: 0;
    width: 100vw; /* La largeur doit rester à 100% de la section projet */
    height: 76vh; /* La hauteur doit rester à 100% de la section projet */
    background: rgba(0, 0, 0, 0.99); /* Fond semi-transparent */
    background-image: url(img/SVG/Fichier\ 7.svg);
    background-repeat: no-repeat;
    object-fit: cover;
    display: none; /* Masqué par défaut */
    justify-content: center; /* Centrer le contenu */
    align-items: center; /* Centrer le contenu */
    z-index: 10; /* S'assure que c'est au-dessus du slider */
    overflow: hidden;
}



.info-content {

}


.info-content h2{
    font-family:Helvetica;
    color:white;
    font-size:2em;
    margin:50px 0px 10px 50px;
    font-weight: 300;
    }

.info-content p{
    padding:20px;
    margin-right:33vw;
    margin-left:30px;
font-family:Helvetica;
line-height:1.3em;
color:white;
text-align:left;
text-justify: inter-word;
line-break:strict;
}


.info-content hr{
    background-color:white;
    border: none;
    height: 0.5px;

    }




.element {
    display: flex;
    justify-content: space-between;
}

.galerie-print {
    display: none;
}

.portfolio-print {
    display: none;
}

.numero {
    display: none;
}

/* INFOS */

.infos {
    margin: 50px 50px 0px 50px;
    padding: 20px;
}

.intro {
    margin-top: 25px;
    font-size: 2vw;
    line-height: 1.2;
    font-weight: lighter;
    text-align: left;
    color: black;
    font-family: Helvetica;
    hyphens: auto;
}

.intro span {
    font-weight:400;
}

.intro-resp {
    display: none;
}

.tableau {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 50px;
}

.tableau  a:hover{
color:yellow;
text-decoration-color:yellow;
}

.contact {
    margin-top: 50px;
}

.coordonnees {
    color: black;
    font-family: Helvetica;
    font-size: 1vw;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    font-weight: lighter;
    text-align: right;
}

.formation {
    margin-top: 50px;
    margin-right: 50px;
}

.exp {
    margin-top: 50px;
}

.publication {
    margin-top: 50px;
    margin-right: 50px;
}

.infos a {
    text-decoration: underline dotted 1px black;
}

.infos a:hover{
    text-decoration: underline dotted 2px yellow;
}

/*.mentions {
    color: whitesmoke;
    font-family: Helvetica;
    font-size: 1vw;
    line-height: 1.3;
    font-weight: lighter;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 50px;
}
*/

.marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    color: black;
    font-family: Helvetica;
    font-weight: lighter;
    font-size: 1vw;
    margin: 0;
    padding: 0;
    margin-top: 50px;
  }

  .marquee p {
    display: inline-block;
    padding-right: 100%;
    animation: marquee 35s linear infinite;
    padding: 0;
    margin: 0;
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  hr {
    border: none;
    background-color: black;
    height: 1px;
}


/* RESPONSIVE */

@media screen and (max-width: 1000px) {

    header h1 {
        font-family: Gaila;
        margin-left: 5vw;
        font-size:2.5rem;
        text-align: left;
        margin:0;
        margin-top:8px;
        margin-left:25px;
    }


    .titre h1 {
        font-size:1em;
        font-weight: 500;
        margin:0;
        padding:0;


     }

    .menu {
      display:flex;
      position:fixed;
      top:20px;
      right:0;
      margin-right:25px;
    }

    .menu a {
        font-family: Helvetica;
        margin-left: 25px;
        font-size:1.5rem;
      }

    .index-button {
        z-index: 20;
        position: fixed;
        top: 25px;
        left: 25px;
        color: white;
        font-family: Helvetica;
        font-size: 1.6em;
        mix-blend-mode: difference;
    }

    .droite img{
        width:6vw;
        height:6vw;
        vertical-align: middle;
        align-items: center;
    }

    .info-button {
        z-index: 20;
        position: fixed;
        top: 25px;
        right: 25px;
        color: white;
        font-family: Helvetica;
        font-size: 1.6em;
        mix-blend-mode: difference;

    }

    .impress-button {
        z-index: 20;
        position: fixed;
        top: 15px;
        left: 50%;
        transform: translate(-50%);
        color: white;
        font-family: Helvetica;
        font-size: 2vw;
        mix-blend-mode: difference;
    }


.slick-slide {
    height: 76vh;
}

.slider img {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

    .description {
height:10vh;
    }

    .gauche {
        width: 90vh;
        font-family: 'Helvetica';
        line-height: 1.18;
        font-size: 0.9em;
        font-weight: 400;
        color: whitesmoke;
        text-align: right;
        display: flexbox;
        margin-left: 0px;
        align-items: center;
    }

    .gauche h1{
        font-size:1em;
        margin:0;
    }


    .info-content p{
        text-justify: auto;
        margin-right:10vw;
    }

    .details {
        width:100vw;
        padding-top: 0;
        margin:5px 10px 5px 0px;
        display:flex;
        font-family: Helvetica;
        justify-content: right;  /* Centrer horizontalement */
        align-items: right;      /* Centrer verticalement */
        font-size: 1.1em;
        line-height:1em;
        color:black;
    }

    .details p {
      font-size:0.75em;
    }

    .droite {
height:auto;
    }


    hr {
        border: none;
        background-color: grey;
        height: 0.5px;
    }

/* INFOS */

    .infos {
        margin: 50px 5px 5px 5px;
        padding: 20px;
    }

    .intro {
        display: block;
        font-size: 1.3em;
        line-height: 1.18;
        font-weight: lighter;
        text-align: center;
        color: black;
        font-family: Helvetica;
        margin-bottom: 50px;
        hyphens: auto;
    }

    .intro-resp {
        display: none;
        font-size: 1.8em;
        line-height: 1.15;
        font-weight: lighter;
        text-align: left;
        color: whitesmoke;
        font-family: Helvetica;
        margin-bottom: 50px;
        hyphens: auto;
    }

    .tableau {
        display: block;
    }

    .contact {
        width: 100%;
        margin-top: 0px;
    }

    .titre {
        color: black;
        font-family: Helvetica;
        font-size: 1.6em;
    }

    .coordonnees {
        color: black;
        font-family: Helvetica;
        font-size: 0.9em;
        line-height: 1.15;
        display: flex;
        justify-content: space-between;
        font-weight: lighter;
        text-align: right;
    }

    .formation {
        width: 100%;
        margin-top: 40px;
    }

    .exp {
        width: 100%;
        margin-top: 40px;
    }

    .publication {
        width: 100%;
        margin-top: 40px;
    }


    .marquee {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        color: black;
        font-family: Helvetica;
        font-weight: lighter;
        font-size: 0.9em;
        margin: 0;
        padding: 0;
        margin-top: 50px;
      }

      .marquee p {
        display: inline-block;
        padding-right: 100%;
        animation: marquee 35s linear infinite;
        padding: 0;
        margin: 0;
      }

      @keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

}