@font-face {
    font-family: 'Luckiest_Guy';
    src: url('/fonts/Luckiest_Guy/LuckiestGuy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/Satoshi_Complete/Fonts/TTF/Satoshi-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  body{
    overflow-x: hidden;
    background-color: #F8FAFC;
  }
  
  html, body {
    margin: 0;
    padding: 0;
}



h1{
    font-family: 'Luckiest_Guy', sans-serif;
    font-size: 64px;
    color: #020617;
    margin: 0px;
    @media(max-width: 1000px) {
        font-size: 48px;
    }
    @media(max-width: 640px) {
        font-size: 40px;
    }
}
h2{
    font-family: 'Satoshi', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #020617;
    margin: 0;
    @media(max-width: 1000px) {
        font-size: 24px;
        @media(max-width: 640px) {
            font-size: 16px;
        }
    }
    
}

html {
    scroll-behavior: smooth;
  }

#TexteHeader{
    display: flex;
    flex-direction: column;
    gap : 8px;
    align-items: center;
}

.CTA{
    font-family: 'Satoshi', sans-serif;
    color: #F8FAFC;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    display: flex;
    padding: 18px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 4px solid #020617;
    background: #701A75;
    transition-duration: 0.25s;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
    display: inline-block;
    width: auto;
    transition: opacity 0.25s ease, background 0.25s, box-shadow 0.25s, transform 0.25s;
    /* shadow */
    box-shadow: 0px 3px 0px 0px  #020617;
}

.CTA:hover {
    background: #86198F;
    color: #F8FAFC;
    box-shadow: 0px 5px 0px 0px #020617;
    margin-top: 0px;
    margin-bottom: 5px;
    transform: rotate3d(1, 1, 1, -4deg);
}

.CTA:active {
    background: #4A0E4E;
    margin-top: 5px;
    margin-bottom: 0px;
    box-shadow: 0px 0px 0px 0px #020617;
}

.CTA-hidden {
    opacity: 0;
    pointer-events: none; /* optionnel : empêche les clics */
    transition: opacity 0.25s ease;
}


header{
    display: flex;
    flex-direction: column;
    gap : 480px;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 228px;
    justify-content: space-between;
}



main{
    display: flex;
    flex-direction: column;

    align-items: center;

}

h3{
    color: #020617;
    font-family: 'Satoshi', sans-serif;
    font-size: 32px;
    font-weight: 700;
    align-content: start;
    @media(max-width: 640px) {
        font-size: 24px;
    }
}

.Name{
    width: 80vw;
    align-self: center;
    max-width: 1100px;
}


.PictUx{
    background-image: url(/images/UXIcone.png);
    height: 224px;

}

h4{
    color: #020617;
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 700;

    margin-top: 12px;
    margin-bottom: 8px;
    @media(max-width: 640px) {
        font-size: 20px;
    }
}

.content h4{
    margin-left: 52px;
    margin-right: 52px;
    @media(max-width: 1340px) {
        margin-left: 36px;
        margin-right: 36px;
        @media(max-width: 640px) {
            margin-left: 32px;
            margin-right: 32px;
        }
    }
}

p{
    color: #020617;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;

    @media(max-width: 640px) {
        font-size: 14px;
    }
}

.content p{
    margin-left: 52px;
    margin-right: 52px;
    @media(max-width: 1340px) {
        margin-left: 36px;
        margin-right: 36px;
        @media(max-width: 640px) {
            margin-left: 32px;
            margin-right: 32px;
        }
    }
}
.cartouche{
    border-radius: 30px;
    border: 3px solid #020617;
    background: #F8FAFC;
    height: 336px;
    box-shadow: 0px 3px 0px 0px  #020617;
    display: flex;
    flex-direction: column;
    width: 1fr;
    overflow: hidden;
    transition-duration: 0.25s;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
    @media(max-width: 500px) {
        height: 256px;
    }
}

.cartouche:hover{
    box-shadow: 0px 5px 0px 0px #020617;
    transform: rotate3d(1, 1, 1, -4deg);
    margin-top: 0px;
    margin-bottom: 5px;
}

.cartouche:active{
    margin-top: 5px;
    margin-bottom: 0px;
    box-shadow: 0px 0px 0px 0px #020617;
}



.allcatergories {
    display: grid;
    width: 80vw;
    max-width: 1100px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px;
    @media(max-width: 1220px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        @media(max-width: 900px) {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
    }
}

.c1 {
    grid-column: span 3 / span 3;
    @media(max-width: 1220px) {
        grid-column: span 1 / span 1;

    }
}

.c2 {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    @media(max-width: 1220px) {
        grid-column: span 1 / span 1;
        grid-column-start: 2;
        @media(max-width: 900px) {
            grid-row-start: 2;
            grid-column-start: 1;
        }
    }
}

.c3 {
     grid-column: span 2 / span 2;
    grid-row-start: 2;
    @media(max-width: 1220px) {
        grid-column: span 1 / span 1;
        @media(max-width: 900px) {
            grid-row-start: 3;
        }
    }
    
}

.c4 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
    @media(max-width: 1220px) {
        grid-column: span 1 / span 1;
        @media(max-width: 900px) {
            grid-row-start: 4;
            grid-column-start: 1;
        }
    }
}

.c5 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
    @media(max-width: 1220px) {
        grid-column: span 2 / span 2;
        grid-row-start: 3;
        @media(max-width: 900px) {
            grid-column: span 1 / span 1;
            grid-row-start: 5;
        }
    }
    
}

.cartouche-image {
    height: 66.66%; 
    overflow: hidden;
    outline:3px solid #020617;
    @media(max-width: 500px) {
        height: 60%; 
    }

}

.cartouche-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.block{
    margin-top: 16px;
    margin-bottom: 16px;
}

.Project{
    display: flex;
    width: 80vw;
    max-width: 1100px;
    align-items: center;
    gap : 32px;
    transition-duration: 0.25s;
    margin-top: 16px;
    @media(max-width: 1100px) {
        flex-direction: column;
        gap: 0px;
        padding-bottom: 24px;
    }
}

.cartouche2 img{
    border-radius: 30px;
    border: 3px solid #020617;
    background: #F8FAFC;
    height: 336px;
    box-shadow: 0px 3px 0px 0px  #020617;
    width: 100%;
    transition-duration: 0.25s;
    margin-top: 2px;
    margin-bottom: 3px;
    @media(max-width: 1100px) {
        height: 100%;
        width: 100%;
    }
}

.cartouche2 img:hover{
    box-shadow: 0px 5px 0px 0px #020617;
    transform: rotate3d(1, 1, 1, -4deg);
    margin-top: 0px;
    margin-bottom: 5px;
}

.cartouche2 img:active{
    margin-top: 5px;
    margin-bottom: 0px;
    box-shadow: 0px 0px 0px 0px #020617;
}

.infos{
    height: 232px;
    justify-self: center;
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: space-between;
}

#spline{
    position: sticky;
    top: 0px;
    height: 100vh;
    width: 100%;
    z-index: -1;
    pointer-events: all;
}

#citation{
    text-align: center;
    margin-bottom: 16px;
}

h5{
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    
    margin: 0px;
}

.tags{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 16px;
}

.t1{
    border-radius: 30px;
    background: #F5C689;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    @media(max-width: 520px) {
        font-size: 12px;
    }
}

.t2{
    border-radius: 30px;
    background: #B0DEF5;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    @media(max-width: 520px) {
        font-size: 12px;
    }
}

.t3{
    border-radius: 30px;
    background: #CDF5B0;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    @media(max-width: 520px) {
        font-size: 12px;
    }
}

.texte{
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.proj{
    width: 160px;
    align-self: center;
;
}

.CTAcenter{
    display: flex;
    align-items: start;
    justify-content: start;
}

.allprojects{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.bas{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 96px;
    margin-bottom: 48px  ;
}

footer{
    padding-top: 48px;
    padding-bottom: 48px;
    color: #020617;
    background-color: #701A75;
    border: 3px solid #020617;
    width: 100vw;
    margin: 0px;
}

#prez{
    display: flex;
    align-items: center;
    justify-content: center;
}

.infosbas{
    display: flex;
    gap: 8px;
    width: 80vw;
    max-width: 1100px;
    align-items: center;
    gap : 32px;
    @media(max-width: 1100px) {
        flex-direction: column;
    }
}

#pictNoé{
    width: 26vw;
    border-radius: 30px;
    border: 3px solid #020617;
    box-shadow: 0px 3px 0px 0px  #020617;
    @media(max-width: 1100px) {
        width: 80vw;
    }
}

#desc{
    color: #F8FAFC;
}

#imp{
    font-size: 32px;
}

.Me-contacter {
    align-items: left;
    width: 80vw;
    max-width: 1100px;
    margin: 0 auto;


}

.Me-contacter h2{

    color: white;

}

.Me-contacter .liste-contacts {

    display: flex;
    gap: 1rem;
    justify-content: left;
    width: 15vw;
    height: 2rem;
    align-items: left;
    cursor: pointer;
    justify-content: space-between;
    @media(max-width: 700px) {
        width: 40vw;
        gap: 0rem;
    }
    }

    #flexbas{
    display: flex;
    align-items: center;
    @media(max-width: 1100px){
        height: 48px;
    }
    
}

span{
    flex: 1;
}

.Download{
    display: flex;
    align-items: center;
    gap : 1rem;
    color: white;
    @media(max-width: 700px) {
      gap : 0.5rem;
    }
}

#CV{
    color: #F8FAFC;
    @media(max-width : 1100px){
        font-size: 12px;
    }
}

.Fond-Haut{
    height: 862px;
    width: 100vw;
    margin: 0px;
    position: absolute;
    top: 0px;
    z-index: -2;
    @media(max-width:1135px){
        height: 600px;
    }
}


.Fond-Haut img{
    width: 100%;
    height: 862px;
    
    object-fit: cover; 
    display: block;
    overflow: hidden;
    @media(max-width:1135px){
        height: 520px;
    }
    
}



.gauche img {
    @media(max-width:1135px){
        object-position: 15%; 
    }
    
  }

#Cat button{
    width: 185px;
    @media(max-width:1135px){
        flex: 0 1 calc(50% - 16px); 
        box-sizing: border-box;
        padding: 12px 18px ;
        @media(max-width:700px){
            font-size: 14px;
        }
    }
}

#Cat button:nth-child(5) {
    
    @media(max-width:1135px){
        flex: 0 1 100%;
        text-align: center;
    }
  }

#Cat{
    display: flex;
    gap: 20px;
    padding-top: 42px;
    padding-bottom: 42px;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 30px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    width: fit-content;
    margin-top: 660px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    @media(max-width:1135px){
        flex-wrap: wrap;  
        padding: 16px;
        margin-top: 480px;
    }

}

.gradient{
    width: 100vw;
    height: 185px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.63) 54.81%, rgba(255, 255, 255, 0.86) 73.08%, #F8FAFC 100%);
    margin-top: 677px;
    position: absolute;
    top: 0px;
    z-index: -1;
    @media(max-width:1135px){
        margin-top: 420px;
        height: 100px;
    }
}

.clicked{
    font-family: 'Satoshi', sans-serif;
    color: #F8FAFC;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    display: flex;
    padding: 18px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 4px solid #020617;
    transition-duration: 0.25s;
    display: inline-block;
    width: auto;
    background: #4A0E4E;
    margin-top: 5px;
    margin-bottom: 0px;
    box-shadow: 0px 0px 0px 0px #020617;
    cursor: pointer;
}

#titre{
    width: 80vw;
    max-width: 800px;
    margin-top: 64px;
    margin-bottom: 32px;
}

h5{
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
}

#Accueil{
    font-size: 40px;
    font-family: "Luckiest_Guy";

    padding-top: 29px;
    padding-bottom: 25px;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: 88px;
    margin-top: 88px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    width: fit-content;
    position: absolute;
    top: 0px;
    transition-duration: 0.25s;
    cursor: pointer;
    @media(max-width: 814px){
        margin-left: 16px;
        margin-top: 16px;
        font-size: 26px;
        padding-top: 32px;
        padding-bottom: 27px;
        font-family: "Luckiest_Guy";
    }
}

#Accueil:hover{
    box-shadow: 0px 5px 0px 0px #020617;
    margin-top: 86px;
    transform: rotate3d(1, 1, 1, -4deg);
    @media(max-width: 814px){
        margin-top: 14px;
    }
}

#Accueil:active{
    box-shadow: 0px 0px 0px 0px #020617;
    margin-top: 91px;
    @media(max-width: 814px){
        margin-top: 19px;
    }
}


#box1{
    padding-top: 23px;
    padding-bottom: 23px;
    padding-left: 16px;
    padding-right: 16px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    width: fit-content;
    transition-duration: 0.25s;
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 2px;
    @media(max-width: 814px){
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 11.1304347826px;
        padding-right: 11.1304347826px;
    }
}

#box1:hover{
    box-shadow: 0px 5px 0px 0px #020617;
    transform: rotate3d(1, 1, 1, -4deg);
    margin-top: 0px;
    margin-bottom: 5px;
}

#box1:active{
    box-shadow: 0px 0px 0px 0px #020617;
    margin-top: 5px;
    margin-bottom: 0px;
}

#box2{
    padding-top: 23px;
    padding-bottom: 23px;
    padding-left: 23px;
    padding-right: 23px;
    margin-top: 3px;
    margin-bottom: 2px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    width: fit-content;
    transition-duration: 0.25s;
    cursor: pointer;
    @media(max-width: 814px){
        padding: 16px;
    }
}

#box2:hover{
    box-shadow: 0px 5px 0px 0px #020617;
    margin-top: 0px;
    margin-bottom: 5px;
    transform: rotate3d(1, 1, 1, -4deg);
}

#box2:active{
    box-shadow: 0px 0px 0px 0px #020617;
    margin-top: 5px;
    margin-bottom: 0px;
}

#flex-haut{
    display: flex;
    gap: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 88px;
    margin-right: 88px;
    @media(max-width: 814px){
        flex-direction: column;
        margin-top: 16px;
        margin-right: 16px;
    }
}

#Accueil2{
    font-size: 40px;
    font-family: "Luckiest_Guy";

    padding-top: 29px;
    padding-bottom: 25px;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: 88px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    width: fit-content;
    transition-duration: 0.25s;
    cursor: pointer;
    transform: translateY(-108px);
    @media(max-width: 814px){
        margin-left: 16px;
        font-size: 26px;
        font-family: "Luckiest Guy";
    }
    
}

#Accueil2:hover{
    box-shadow: 0px 5px 0px 0px #020617;

    transform: translateY(-108px) rotate3d(1, 1, 1, -4deg);
}

#Accueil2:active{
    box-shadow: 0px 0px 0px 0px #020617;

}

.haut{
    margin-top: 128px;
    width: 80vw;
    max-width: 1100px;
    border-radius: 30px;
    @media(max-width: 720px){
        margin-top: 64px;
    }
}

.CTA2{
    font-family: 'Satoshi', sans-serif;
    color: #F8FAFC;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    padding: 18px ;
    padding-bottom: 12px;
    gap: 10px;
    border-radius: 50px;
    border: 4px solid #020617;
    background: #701A75;
    transition-duration: 0.25s;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
    display: inline-block;
    width: auto;
    z-index: 1;
    /* shadow */
    box-shadow: 0px 3px 0px 0px  #020617;
    position: absolute;
    left: 12vw;
    top : 960px;
    @media(max-width: 1700px){
        left : 10vw;
        @media(max-width: 1572px){
            left : 2vw;
            @media(max-width: 720px){
                top: 800px;
                left : 1vw;
                padding : 15px;
                padding-bottom: 10px;
            }
        }
    }
}

.CTA2:hover {
    background: #86198F;
    color: #F8FAFC;
    box-shadow: 0px 5px 0px 0px #020617;
    margin-top: 0px;
    margin-bottom: 5px;
    transform: rotate3d(1, 1, 1, -4deg);
}

.CTA2:active {
    background: #4A0E4E;
    margin-top: 5px;
    margin-bottom: 0px;
    box-shadow: 0px 0px 0px 0px #020617;
}

.arrow{
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
    stroke-width: 6px;
    stroke: #F8FAFC;
}

.barreprez{
    display: flex;
    width: 80vw;
    max-width: 1100px;
    margin-top: 16px;
    margin-bottom: 16px;
    justify-content: space-between;
    @media(max-width: 814px){
        flex-direction: column;
    }
}

.nom{
    font-family: "Luckiest Guy";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    @media(max-width: 814px){
        font-size: 26px;
    }
}

.barreprez .tags{
    @media(max-width: 814px){
        order:-1;
        padding-bottom: 1rem;
    }
}

.date{
    text-align: left;
    width: 80vw;
    max-width: 1100px;
    font-size: 24px;
    font-weight: 600;
    @media(max-width: 814px){
        font-size: 16px;
    }
}

.txt{
    width: 80vw;
    max-width: 1100px;
    margin: 16px;
    font-size: 18px;
    @media(max-width: 814px){
        font-size: 14px;
    }
}

.txtimg{
    display: flex;
    gap: 32px;
    max-width: 1100px;
    width: 80vw;
    align-items: center;
    margin: 16px;
    @media(max-width: 814px){
        flex-direction: column;
    }
}

.minus{
    width: 26vw;
    border-radius: 30px;
    @media(max-width: 814px){
        width: 80vw;
    }
}

.txt2{
    width: auto;
    font-size: 18px;
    @media(max-width: 814px){
        font-size: 14px;
    }
}

#trophy{
    width: 14vw;
    cursor: pointer;
    @media(max-width: 814px){
        width: 60vw;
    }
}

.Bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 32px;
    width: 80vw;
    max-width: 1100px;
    margin-top: 32px;
  }
  
  /* div1 occupe toute la première ligne */
  .div1 {
    grid-column: 1 / 3; /* de la colonne 1 à 3 → span sur 2 colonnes */
    border-radius: 30px;
  }
  
  /* div2 prend la colonne de gauche */
  .div2 {
    grid-column: 1;
    grid-row: 2;
    border-radius: 30px;
  }
  
  /* div3 prend la colonne de droite */
  .div3 {
    grid-column: 2;
    grid-row: 2;
    border-radius: 30px;
  }
  
  .Bento img {
    width: 100%;
    border-radius: inherit;
    display: block;
  }

  .Bento iframe {
    width: 100%;
    border-radius: inherit;
    display: block;
  }
  
  .video-wrapper {
    position: relative;
    width: 80vw;
    max-width: 1100px;
    padding-top: max(618.75px,56.25%);
    border-radius: 30px;
    overflow: hidden;
    max-height: 618.75px;
    @media(min-width: 1370px){
        padding-top:818.75px;
    }
  }
  
  .video-wrapper iframe.haut {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: 30px;
    max-height: 618.75px;
    @media(min-width: 1370px){
        height: 618.75px;
    }
  }
  
  .short-embed {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    display: block;
    margin: 0 auto;
    margin-top: 128px;
    @media(max-width: 720px){
        margin-top: 64px;
    }
  }
  
 #Instagram2, #Linkedin2, #mail2{
    height: 100%;
    width: auto;
 }

 .hautemp{
    position: absolute;
    top: 0px;
    z-index: -1;
    height: 860px;
 }

.deux{
    display: flex;
    width: 80vw;
    max-width: 1100px;
    align-items: center;
    justify-content: center;
    gap: 10vw;
    @media(max-width: 960px){
        flex-direction: column;
        width: 80vw;
    }
}

.Frame{
    width: 35vw;
    @media(max-width: 960px){
        flex-direction: column;
        width: 80vw;
    }
}

#message {
    position: fixed;
    top: 10px;
    left: 34%;
    width : fit-content;
    background-color: #F8FAFC;
    color: #020617;
    padding-top: 29px;
    padding-bottom: 25px;
    padding-left: 32px;
    padding-right: 32px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    height: fit-content;
    gap:2vw;
    align-items: center;
    display: none;
    @media(max-width: 760px) {
        left:2%;
    }

    
}

#imgpop{
    width: 5vw;
    height: 100%;
    @media(max-width: 760px) {
        width: 20vw;
    }
}

#txtpop{
    width: 20vw;
    @media(max-width: 900px) {
        width: 60vw;
    }
}

#basindex{
    display: flex;
    align-items: center;
    justify-content: center;
}

#description{
    width: 80vw;
    max-width: 1100px;
}

#TexteHeader{
    background-color: rgba(255, 255, 255, 0.5);
    /*backdrop-filter: blur(5.699999809265137px);*/
    border-radius: 10px;

}

#place{
    height: 200px;
    /*comment ça ça marche pas ?*/
}

#container{
    height: 620px;
}

#Go{
    position: sticky;
    top : 75vh;
}

.advice {
    position: fixed;
    top: 6vh;
    left: 50%; 
    transform: translateX(-50%);
    width : fit-content;
    background-color: #F8FAFC;
    color: #020617;
    padding-top: 29px;
    padding-bottom: 25px;
    padding-left: 32px;
    padding-right: 32px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    height: fit-content;
    gap:2vw;
    align-items: center;

}

.advice-hidden {
    opacity: 0;
    transition: opacity 0.25s ease;
}

#linkt{
    color: #020617;
}

#message2 {
    position: fixed;
    top: 20vh;
    left: 50%; 
    transform: translateX(-50%);
    width : fit-content;
    background-color: #F8FAFC;
    color: #020617;
    padding-top: 29px;
    padding-bottom: 25px;
    padding-left: 32px;
    padding-right: 32px;
    border: 3px solid #020617;
    background: #F8FAFC;
    box-shadow: 0px 3px 0px 0px  #020617;
    border-radius: 30px;
    height: fit-content;
    gap:2vw;
    align-items: center;
    display: none;

    
}