@media only screen 
    and (min-device-width: 2160px) 
    and (max-device-width: 3840px) 
    and (-webkit-min-device-pixel-ratio: 1) 
    and (orientation: portrait){
        body {
            font-size: 3vw;
            
            
            .wrapper {
                display: grid;
                /* grid-template-columns: 5fr 5fr 5fr 5fr 5fr 5fr; */
                grid-template-columns: 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw;
                grid-template-rows: 5vh 5vh 34vh  5vh 34vh 12vh 0vh;
                overflow: none;
            }
    
            
           
    
            .nav-container {
                
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 6;
                grid-row-end: 7;
            }
    
            .next-proj{
                top:85vh;
                width: 8vw;
                height: 8vh;
                font-size: 3vh;
                margin-right: 0.7vw;

                border-width: 0.135em 0.135em 0.135em 0.135em;
            }
    
    
            .prev-proj{
                top:85vh;
                width: 8vw;
                height: 8vh;
                font-size: 3vh;
                margin-left: 0.7vw;

                border-width: 0.135em 0.135em 0.135em 0.135em;
            }
    
            .dossier {
                flex: 0 0 20vw;
                margin-top: 1.8vh;
                margin-right: 0vw;
                margin-left: 4vw;
                padding: 0.5vw;
                transform: rotate(-10deg);
            }
    
            .dossier:hover {
                margin-top: 1.8vh;
                transform: rotate(-10deg);
               /* margin-right: 2.5vw; */
            }

            ul {
                padding-inline-start: 90px;
            }
    
            .carousel-wrapper {
                margin: 0;
                margin-top: 0em;
               margin-left: 0em;
                margin-right: 0em;
                padding: 0;
                display: grid;
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 3;
                grid-row-end: 4;
                overflow: hidden;
                z-index: 0;
            }
    
    
            .console{
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 1;
                grid-row-end: 2;
            
                display: inline-block;
            
            
                scrollbar-width: none;
            }
            
    
    
            .titre {
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 1;
                grid-row-end: 2;
    
                z-index: 2;
            }
    
         
    
    
    
    .btn-picture-terminal {
    
        width: 10vw; 
        height: 4vh;
    
        font-size: 3vh;

        cursor: pointer;
    
    
    
        z-index: 1;
    }
    
    
    .prev-btn-picture-terminal {
        width: 10vw; 
        height: 4vh;
        font-size: 3vh;
    
        cursor: pointer;
    
       margin: 0;
        left: 0%;
        top: 0%;
        
    
        
        position: relative;
    
        z-index: 1;
    }
    
    .carousel-container{
        margin-left: 0.5em;
    }
    .terminal{
        margin: 0;
    margin-top: 0em;
    
    padding: 0;
    display: grid;
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 5;
    grid-row-end: 6;
    overflow: hidden;       
    }
    
    .boiteimg {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;
    
    margin: 0;    
    margin-top: 0.5em;
     margin-right: 0.5em;
    
    background-color: none;
    font-family: var(--bouton-font);
    color:var(--bordure);
    
    justify-content:end;
    align-items: center;
    
    z-index: 3;
    }
    
    .carousel{
        margin-right: 0.5em;
    }
         .command{
            display: flex;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 2;
            grid-row-end: 3;
        
            margin: 0;
            margin-top: 0em;
            padding-right: 0.5em;
            
            padding-top: 0vh;
         }
    
            .commandscroll {
                display: flex;
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 4;
                grid-row-end: 5;
            
                margin: 0;
                margin-top: 0em;
            
                padding-left: 0.5em;
                
                padding-top: 0vh;
               
            }
                
            .commandp {
                padding-top: 0.25em;
                
                
            }
            .commandscrollp {
          padding-top: 0.25em;
         
               
            }
            
            
            .boitetexte {
                display: flex;
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 4;
                grid-row-end: 5;
            
           
                margin: 0;
                margin-top: 0.5em;
                margin-right: 0.5em; 
    
                background-color: none;
                font-family: var(--bouton-font);
                color:var(--bordure);
            
                justify-content:end;
                align-items: center;
                
                z-index: 3;
            }
            
            .btn-texte {
                width: 10vw;
                height: 4vh;
                cursor: pointer;
                margin: 0;
                left: 0%;
                top: 0%;

                font-size: 3vh;
           
                position: relative;
                z-index: 1;
            }
            
            
            .prev-btn-texte {
                width: 10vw; 
                height: 4vh;
            
                cursor: pointer;

                font-size: 3vh;
            
               margin: 0;
                left: 0%;
                top: 0%;
          
            
       
                z-index: 1;
            }
       
            
    
            
              
            .com {
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 7;
                grid-row-end: 8;
            }
            .com-lang {
                margin-inline-start: 0.5em;
    
    
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 7;
                grid-row-end: 8;
    
                justify-content:left;
            }
            
            .com-col {
                margin-inline-start: 0em;
    
                grid-column-start: 3;
                grid-column-end: 5;
                grid-row-start: 7;
                grid-row-end: 8;
                
            }
     
            
            .color{
                width: auto;
                display: none;
            }
    
            .btn-color{
                display: none;
                width: auto;
              
            }
    
            .prev-btn-color{
                display: none;
                width: auto;
            }
    
            
            
    
            .language{
                width: auto;
              display: none;
            }
    
            .btn-language{
                display: none;
                width: auto;
               
            }
    
            .prev-btn-language{
                display: none;
                width: auto;
                       
            }

         

    
            .contactportable {
              display: flex;
            border: var(--border) solid var(--bordure); 
            border-width: 0.2em 0em 0px 0em;
            position: fixed;
            height: 4.7vh;
            width: 100vw;
        
            justify-content: space-around;
            align-items: center;
        bottom: 0;
            }

            
        
          .btn-color-portable{
            display: block;
          }
        
          .prev-btn-color-portable
          {
            display: block;
          }
        
          .btn-language-portable{ 
            display: block;
          }

          .prev-btn-language-portable{ 
            display: block;
          }
    
    
            .akimbotitre {
                grid-column-start: 1;
                grid-column-end: 7;
                font-family: var(--bouton-font);
                font-size: 7vw; 
                
               margin-left: 35vw;

               
                
              
               transform: scaleX(3) scaleY(1); 
            }

            .dossier-invisible-début{
                margin-left: -10vw;
            }
    
    
            .insta {
                opacity: 0%;
                pointer-events: none;
            }
    
            .mail{
                opacity: 0%;
                pointer-events: none;
            }
    
        }
}


@media all and (min-width: 0px) and (max-width: 272px) {
    body {
       
    .wrapper {
        display: none;
        grid-template-columns: 5fr 5fr 3fr 5fr 5fr;
        grid-template-rows: 5vh 5vh 36vh  5vh 36vh 8vh 5vh;
        overflow: none;
    }
    
    .upscale {
        display: block;
        font-size: 10vw;
        opacity: 100;
        margin: -30vw;
        text-align: center;
        font-style: normal;
        color: var(--bordure);
    }
}
}


@media all and (min-width: 273px) and (max-width: 1020px) and (orientation: landscape) {
    body {
        font-size: 1.3vw;
    }

    .command{
        padding-top: 0vh;
        grid-column-end: 4;
     }
}
/* Styles pour les petits écrans (smartphones) */
@media all and (min-width: 1080px) and (max-width: 3810px) and (orientation: portrait) {
    body {
        font-size: 3vw;
        
        
        .wrapper {
            display: grid;
            /* grid-template-columns: 5fr 5fr 5fr 5fr 5fr 5fr; */
            grid-template-columns: 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw;
            grid-template-rows: 5vh 5vh 32vh  5vh 32vh 16vh 0vh;
            overflow: none;
        }

        
       

        .nav-container {
            
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 6;
            grid-row-end: 7;
        }

        .next-proj{
            top:79.8vh;
            width: 8vw;
            height: 6.5vh;
            margin-right: 0.8vw;
            padding-right: 6vw;
            font-size: 3vh;
            line-height: 2;
            border-width: 0.135em 0.135em 0.135em 0.135em;
        }


        .prev-proj{
            top:79.8vh;
            width: 8vw;
            height: 6.5vh;
            margin-left: 0.8vw;
            padding-right: 6vw;
            font-size: 3vh;
            line-height: 2;
            border-width: 0.135em 0.135em 0.135em 0.135em;
        }

        .dossier {
            flex: 0 0 20vw;
            margin-top: 1.8vh;
            margin-right: 0vw;
            margin-left: 4vw;
            padding: 0.5vw;
            transform: rotate(-10deg);
        }

        .dossier:hover {
            transform: rotate(-10deg);
            margin-top: 1.8vh;
            /* margin-right: 2.5vw; */
        }

        ul {
            padding-inline-start: 50px;
        }

        .carousel-wrapper {
            margin: 0;
            margin-top: 0em;
           margin-left: 0em;
            margin-right: 0em;
            padding: 0;
            display: grid;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 3;
            grid-row-end: 4;
            overflow: hidden;
            z-index: 0;
        }


        .console{
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 1;
            grid-row-end: 2;
        
            display: inline-block;
            left: auto;
            scrollbar-width: none;
        }
        


        .titre {
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 1;
            grid-row-end: 2;

            justify-content: center;
            

            z-index: 2;
        }

        .akimbotitre {
            grid-column-start: 1;
            grid-column-end: 7;
     
            font-family: var(--bouton-font);
            font-size: 7vw; 
            text-align: center;

            margin: 0;
            top: 0;

            
            
          
           transform: scaleX(3) scaleY(1); 
        }

        .insta {
            opacity: 0%;
            pointer-events: none;
        }

        .mail{
            opacity: 0%;
            pointer-events: none;
        }
     

        .carousel-item-terminal {

        }

.btn-picture-terminal {

    width: 10vw; 
    height: 4vh;
    font-size: 3vh;
    line-height: 1.5;
    border-width: 0px 0px 0px 0.14em;

    cursor: pointer;



    z-index: 1;
}


.prev-btn-picture-terminal {
    width: 10vw; 
    height: 4vh;
    font-size: 3vh;
    line-height: 1.5;
    border-width: 0px 0px 0px 0.14em;

    cursor: pointer;

    left: 0%;
    top: 0%;  

    
    position: relative;

    z-index: 1;
}

.carousel-container{
    margin-left: 0.5em;
}

.carousel-container h1 {
    font-size: 8vw;
}

.terminal{
    margin: 0;
margin-top: 0em;

padding: 0;
display: grid;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 6;
overflow: hidden;       
}

.boiteimg {
display: flex;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;

margin-top: 0.5em;


background-color: none;
font-family: var(--bouton-font);
color:var(--bordure);

justify-content:end;
align-items: center;

z-index: 3;
}

.carousel{
    margin-right: 0.5em;
}
     .command{
        display: flex;
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 3;
    
        margin: 0;
        margin-top: 0em;
        padding-right: 0.5em;
        
        padding-top: 0vh;
      
     }

        .commandscroll {
            display: flex;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 4;
            grid-row-end: 5;
        
            margin: 0;
            margin-top: 0em;
        
            padding-left: 0.5em;
            
            padding-top: 0vh;
           
        }
            
        .commandp {
            padding-top: 0.25em;
            
            
        }
        .commandscrollp {
            padding-top: 0.25em;
     
           
        }
        
        
        .boitetexte {
            display: flex;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 4;
            grid-row-end: 5;
        
       
            margin: 0;
            margin-top: 0.5em;
            margin-right: 0.25em;


            background-color: none;
            font-family: var(--bouton-font);
    
        
            justify-content:end;
            align-items: center;
            
            z-index: 3;
        }
        
        .btn-texte {
            width: 10vw;
            height: 4vh;
            font-size: 3vh;
            line-height: 1.5;
            border-width: 0px 0px 0px 0.14em;

            cursor: pointer;
            margin: 0;
            margin-right: 1vw;


            
            position: relative;
            z-index: 1;
        }
        
        
        .prev-btn-texte {
            width: 10vw; 
            height: 4vh;
            font-size: 3vh;
            line-height: 1.5;
            border-width: 0px 0px 0px 0.14em;
        
            cursor: pointer;
        
           margin: 0;
            left: 0%;
            top: 0%;
            
      
        
   
            z-index: 1;
        }
   
        
        .dossier-invisible-début{
            margin-left: -15vw;
        }

        
          
        .com {
      display: none;
        }
        .com-lang {
            display: none;
            /* margin-inline-start: 0.5em; */
            width: auto;

            grid-column-start: 1;
            grid-column-end: 2;
            bottom: 0;

            justify-content:left;
        }
        
        .com-col {
            margin-inline-start: 0em;

            grid-column-start: 3;
            grid-column-end: 5;
            grid-row-start: 7;
            grid-row-end: 8;
            display: none;
            
        }
 
        
        .color{
            width: auto;
            display: none;
        }

        .btn-color{
            width: auto;
            top: 0.5vh;
            display: none;
        }

        .prev-btn-color{
            width: auto;
            top: 0.5vh;
            display: none;
        }


        .language{
            width: auto;
          display: none;
        }

        .btn-language{
            width: auto;
            top: 0.5vh;
            display: none;
        }

        .prev-btn-language{
            width: auto;
            top: 0.5vh;    
            display: block;   
        }

       

        .mailportable {
            display: block;
        
        
        }
        
          .instaportable{
            display: block;
        
        
          }
        
          .btn-color-portable{
            display: block;
          }
        
          .prev-btn-color-portable
          {
            display: block;
          }
        
          .btn-language-portable{ 
            display: block;
          }

          .prev-btn-language-portable{ 
            display: block;
          }
          .contactportable {
            display: flex;
            border: var(--border) solid var(--bordure); 
            border-width: 0.2em 0em 0px 0em;
            position: fixed;
            height: 4.7vh;
            width: 100vw;
        
            justify-content: space-around;
            align-items: center;
        bottom: 0;
        }

    }

    }
/* Styles pour les petits écrans (smartphones) */
@media all and (min-width: 273px) and (max-width: 630px) and (orientation: portrait) {
    body {
        font-size: 3vw;
        
        
        .wrapper {
            display: grid;
            /* grid-template-columns: 5fr 5fr 5fr 5fr 5fr 5fr; */
            grid-template-columns: 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw 16.66vw;
            grid-template-rows: 5vh 5vh 32vh  5vh 32vh 16vh 0vh;
            overflow: none;
        }

        
       

        .nav-container {
            
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 6;
            grid-row-end: 7;
        }

        .next-proj{
            top:79.8vh;
            width: 8vw;
            height: 6.5vh;
            margin-right: 0.8vw;
            padding-right: 6vw;
            font-size: 3vh;
            line-height: 2;
            border-width: 0.135em 0.135em 0.135em 0.135em;
        }


        .prev-proj{
            top:79.8vh;
            width: 8vw;
            height: 6.5vh;
            margin-left: 0.8vw;
            padding-right: 6vw;
            font-size: 3vh;
            line-height: 2;
            border-width: 0.135em 0.135em 0.135em 0.135em;
        }

        .dossier {
            flex: 0 0 20vw;
            margin-top: 1.8vh;
            margin-right: 0vw;
            margin-left: 4vw;
            padding: 0.5vw;
            transform: rotate(-10deg);
        }

        .dossier:hover {
            transform: rotate(-10deg);
            margin-top: 1.8vh;
            /* margin-right: 2.5vw; */
        }

        ul {
            padding-inline-start: 50px;
        }

        .carousel-wrapper {
            margin: 0;
            margin-top: 0em;
           margin-left: 0em;
            margin-right: 0em;
            padding: 0;
            display: grid;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 3;
            grid-row-end: 4;
            overflow: hidden;
            z-index: 0;
        }


        .console{
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 1;
            grid-row-end: 2;
        
            display: inline-block;
            left: auto;
            scrollbar-width: none;
        }
        


        .titre {
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 1;
            grid-row-end: 2;

            justify-content: center;
            

            z-index: 2;
        }

        .akimbotitre {
            grid-column-start: 1;
            grid-column-end: 7;
     
            font-family: var(--bouton-font);
            font-size: 7vw; 
            text-align: center;

            margin: 0;
            top: 0;

            
            
          
           transform: scaleX(3) scaleY(1); 
        }

        .insta {
            opacity: 0%;
            pointer-events: none;
        }

        .mail{
            opacity: 0%;
            pointer-events: none;
        }
     

        .carousel-item-terminal {

        }

.btn-picture-terminal {

    width: 10vw; 
    height: 4vh;
    font-size: 3vh;
    line-height: 1.5;
    border-width: 0px 0px 0px 0.14em;

    cursor: pointer;



    z-index: 1;
}


.prev-btn-picture-terminal {
    width: 10vw; 
    height: 4vh;
    font-size: 3vh;
    line-height: 1.5;
    border-width: 0px 0px 0px 0.14em;

    cursor: pointer;

    left: 0%;
    top: 0%;  

    
    position: relative;

    z-index: 1;
}

.carousel-container{
    margin-left: 0.5em;
}

.carousel-container h1 {
    font-size: 8vw;
}

.terminal{
    margin: 0;
margin-top: 0em;

padding: 0;
display: grid;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 6;
overflow: hidden;       
}

.boiteimg {
display: flex;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;

margin-top: 0.5em;


background-color: none;
font-family: var(--bouton-font);
color:var(--bordure);

justify-content:end;
align-items: center;

z-index: 3;
}

.carousel{
    margin-right: 0.5em;
}
     .command{
        display: flex;
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 3;
    
        margin: 0;
        margin-top: 0em;
        padding-right: 0.5em;
        
        padding-top: 0vh;
      
     }

        .commandscroll {
            display: flex;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 4;
            grid-row-end: 5;
        
            margin: 0;
            margin-top: 0em;
        
            padding-left: 0.5em;
            
            padding-top: 0vh;
           
        }
            
        .commandp {
            padding-top: 0.25em;
            
            
        }
        .commandscrollp {
            padding-top: 0.25em;
     
           
        }
        
        
        .boitetexte {
            display: flex;
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row-start: 4;
            grid-row-end: 5;
        
       
            margin: 0;
            margin-top: 0.5em;
            margin-right: 0.25em;


            background-color: none;
            font-family: var(--bouton-font);
    
        
            justify-content:end;
            align-items: center;
            
            z-index: 3;
        }
        
        .btn-texte {
            width: 10vw;
            height: 4vh;
            font-size: 3vh;
            line-height: 1.5;
            border-width: 0px 0px 0px 0.14em;

            cursor: pointer;
            margin: 0;
            margin-right: 1vw;


            
            position: relative;
            z-index: 1;
        }
        
        
        .prev-btn-texte {
            width: 10vw; 
            height: 4vh;
            font-size: 3vh;
            line-height: 1.5;
            border-width: 0px 0px 0px 0.14em;
        
            cursor: pointer;
        
           margin: 0;
            left: 0%;
            top: 0%;
            
      
        
   
            z-index: 1;
        }
   
        
        .dossier-invisible-début{
            margin-left: -15vw;
        }

        
          
        .com {
      display: none;
        }
        .com-lang {
            display: none;
            /* margin-inline-start: 0.5em; */
            width: auto;

            grid-column-start: 1;
            grid-column-end: 2;
            bottom: 0;

            justify-content:left;
        }
        
        .com-col {
            margin-inline-start: 0em;

            grid-column-start: 3;
            grid-column-end: 5;
            grid-row-start: 7;
            grid-row-end: 8;
            display: none;
            
        }
 
        
        .color{
            width: auto;
            display: none;
        }

        .btn-color{
            width: auto;
            top: 0.5vh;
            display: none;
        }

        .prev-btn-color{
            width: auto;
            top: 0.5vh;
            display: none;
        }


        .language{
            width: auto;
          display: none;
        }

        .btn-language{
            width: auto;
            top: 0.5vh;
            display: none;
        }

        .prev-btn-language{
            width: auto;
            top: 0.5vh;    
            display: block;   
        }

       

        .mailportable {
            display: block;
        
        
        }
        
          .instaportable{
            display: block;
        
        
          }
        
          .btn-color-portable{
            display: block;
          }
        
          .prev-btn-color-portable
          {
            display: block;
          }
        
          .btn-language-portable{ 
            display: block;
          }

          .prev-btn-language-portable{ 
            display: block;
          }
          .contactportable {
            display: flex;
            border: var(--border) solid var(--bordure); 
            border-width: 0.2em 0em 0px 0em;
            position: fixed;
            height: 4.7vh;
            width: 100vw;
        
            justify-content: space-around;
            align-items: center;
        bottom: 0;
        }

    }

    }


@font-face {
    font-family: 'bouton';
    src: url("fonts/wetransfer_modelstandard-regular-mono-italic-woff2_2023-12-14_1438/ModelStandard-Bold-Mono.woff2") format("woff");
}

@font-face {
    font-family: 'note';
    src: url("fonts/wetransfer_modelstandard-regular-mono-italic-woff2_2023-12-14_1438/ModelStandard-Medium-Mono.woff2") format("woff");
}

@font-face {
    font-family: 'notei';
    src: url("fonts/wetransfer_modelstandard-regular-mono-italic-woff2_2023-12-14_1438/ModelStandard-Medium-Mono-Italic.woff2") format("woff");
}


@font-face {
    font-family: 'arrow';
src: url("fonts/ARROW/Arrow-Bold.woff2") format("woff");
}


:root {
    --border: 0.2em;

    --bouton-couleur: rgb(200, 200, 200);
    --bouton-font: 'bouton';

    --arrow: 'arrow';

    --étiquette: 2.8%;

    --bordure: rgb(0, 0, 0);

    --background: rgb(212, 255, 119);

    --bouton-font-couleur: rgb(212, 255, 119);

    --bandeau: rgb(200, 200, 200);

    --typo: rgb(0, 0, 0); 

    --bw: rgb(0, 0, 0); 

    --liste: rgb(212, 255, 119);
  }


  .upscale{
    position: absolute;
    opacity: 0;
}


body{
    color: var(--bordure);
    background-color: var(--bouton-font-couleur);
    overflow-y: hidden;
    overflow-x: hidden;
    font-family: 'bouton';
    margin: 0;

    font-size: 2vh;
}


.note{
    font-family: 'note';
}

.notei{
    font-family: 'notei';
}

.wrapper {
    display: grid;
    grid-template-columns: 5fr 5fr 5fr 5fr;
    grid-template-rows: 6vh 6Vh 69vh 13vh 6vh;
    overflow: hidden;
}


.titre {
    display: flex;
    justify-content: left; 
    align-items: center;

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    background-color: var(--bandeau);
    border-bottom:  var(--border) solid var(--bordure);
}

.akimbotitre {
    font-family: var(--bouton-font);
    font-size: calc(1.7vw + 1.7vh);
    color: var(--bouton-font-couleur);
    
    -webkit-text-stroke: calc(0.05vw + 0.05vh) var(--bordure);


    cursor: pointer;
    
    margin-left: 12vw;
  
    transform: scale(3, 1); 
}

  a{
    text-decoration: none;
  }

.contact {
    display: flex;
    justify-content: right; 
    align-items: center;

    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    
    background-color: var(--bandeau);
    border-bottom:  var(--border) solid var(--bordure);
    position: relative;
}





.mail {
    
    width: auto;

    height: 5.5vh;
    padding-left: 0.2vw;
    padding-right: 0.2vw;

    margin-top: -5.7vh;
    margin-left: 0vw;
    margin-right: 1.5vw;
    
    padding-top: 1vh;

    color: var(--typo);
    background-color: var(--bouton-font-couleur);
    border:  var(--border) solid var(--bordure);
    border-width: 0px 0.2em 0.2em 0.2em;

    font-family: var(--bouton-font);
    font-size: 2vh;
    text-align: center;
    display: inline-block;

    box-shadow: 10px -10px 0 var(--bordure);
    cursor: pointer;

    position: relative;
    
    z-index: 4;
}

.mail:hover {
    margin-top: -0.6vh;
}


.insta {
    width: auto;
    
    height: 5.5vh;
    padding-left: 0.2vw;
    padding-right: 0.2vw;

    margin-top: -5.7vh;
    margin-left: 0.65vw;
    margin-right: 2vw;
    
    padding-top: 1vh;

    color: var(--typo);
    background-color: var(--bouton-font-couleur);
    border:  var(--border) solid var(--bordure);
    border-width: 0px 0.2em 0.2em 0.2em;

    font-family: var(--bouton-font);
    font-size: 2vh;
    text-align: center;
    display: inline-block;
   

    box-shadow: 10px -10px 0 var(--bordure);
    cursor: pointer;

    position: relative;

    z-index: 4;
}

.insta:hover {
    margin-top: -0.6vh;
}



  
.cacher {
    opacity: 0;
  }



li {
    text-align: -webkit-match-parent;
    text-align: center;
   
}


ul {
    display: block;
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.bouton-nav p {
    transform: rotate(-20deg);
    text-align: center;

    direction: ltr;
    
    z-index: 1;
}

.carousel-wrapper {
    margin: 0;
    
    background-color: var(--background);
  
    padding: 0;
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    overflow: hidden;

    z-index: 0;
}


.link {
    color: var(--bouton-font-couleur);
}




/* Masquer la barre de défilement pour les navigateurs WebKit (Chrome et Safari) */
.carousel-container::-webkit-scrollbar {
    display: none;
}




.carousel {
    margin-left: 0.5em;
    margin-right: 0.25em;

    border: var(--border) solid var(--bordure);
    background-color: var(--bouton-couleur);
   

    position: relative;

    overflow: hidden;
    z-index: 2;

    
    
}




.carousel-item-terminal {
    position: relative;
    width: 100%; /* Assure que chaque élément du carrousel prend toute la largeur */
    height: 100%;
}

.carousel-item-terminal img {
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur de son conteneur */
    max-height: 100%; /* Assure que l'image ne dépasse pas la hauteur de son conteneur */
    width: auto; /* Garde la largeur de l'image conforme à son aspect ratio */
    height: auto; /* Garde la hauteur de l'image conforme à son aspect ratio */
    position: relative; /* Positionne l'image par rapport à son conteneur */
    top: 50%; /* Place le point central de l'image au milieu de son conteneur en hauteur */
    left: 50%; /* Place le point central de l'image au milieu de son conteneur en largeur */
    transform: translate(-50%, -50%); /* Centre l'image horizontalement et verticalement */
}





.command {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    
    /* padding-top: 0.75vh; */
    padding-left: 0.5em;
    padding-right: 0.25em;

  
    background-color: var(--background);
    font-family: var(--bouton-font);
    color:var(--bordure);
}

.commandp {
    display: flex;
    width: 100%;
    background-color: var(--bouton-couleur);
    margin: 0;
    margin-top: 0.5em;
    padding-top: 1vh;
    padding-left: 0.5em;
    border: solid var(--border);
    border-width: 0.2em 0.2em 0px 0.2em;
    justify-content: start;
    align-items: left;
    font-size: var(--typo);
    color: var(--bordure);
}

.counter {
    margin-left: auto; /* Déplacer le compteur vers la droite */
}



.boiteimg {
    display: flex;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    margin: 0;
    margin-top: 0.5em;
    margin-left: 0em;
    margin-right: 0.5em;

    border: solid var(--bordure);
    border-width: 0px 0px 0px 0px;

    background-color: var(--bouton-font);
    font-family: var(--bouton-font);
    color:var(--bordure);

    justify-content:end;
    align-items: center;
    
    z-index: 3;
}



.btn-picture-terminal {

    width: 3vw; 
    height: 5vh;

    cursor: pointer;



    border: solid var(--bordure);
    border-width: 0px 0px 0px 0.1em;

    font-size: 4vh;
    font-family: var(--arrow);
    color: var(--bordure);

    position: relative;

    background: none;

    z-index: 0;
}


.prev-btn-picture-terminal {
    width: 3vw; 
    height: 5vh;

    cursor: pointer;

   margin: 0;
    left: 0%;
    top: 0%;

    background: none;

    border: solid var(--bordure);
    border-width: 0px 0px 0px 0.1em;

    font-size: 4vh;
    font-family: var(--arrow);
    color: var(--bordure);

    position: relative;

    z-index: 1;
}



.commandscroll {
    display: flex;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    
    /* padding-top: 0.75vh; */
    padding-left: 0.25em;
    padding-right: 0.5em;

  
    
    background-color: var(--background);
    font-family: var(--bouton-font);
    color:var(--bordure);
}

.commandscrollp {
    display: flex;


    width: 100%;
    background-color: var(--bouton-couleur);

    margin: 0;
    margin-top: 0.5em;
    padding-top: 1vh;
    padding-left: 0.5em;

    border: solid var(--border);
    border-width: 0.2em 0.2em 0px 0.2em;


    justify-content:start;
    align-items: left;
    font-size: var(--typo);
    color:var(--bordure);
}


.boitetexte {
    display: flex;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;

    margin: 0;
    margin-top: 0.5em;
    margin-left: 0.25em;
    margin-right: 0.75em;

    background-color: var(--bouton-font);
    font-family: var(--bouton-font);
    color:var(--bordure);

    justify-content:end;
    align-items: center;
    
    z-index: 3;
}

.btn-texte {
    width: 3vw; 
    height: 5vh;

    cursor: pointer;

    background: none;

    border: solid var(--bordure);
    border-width: 0px 0px 0px 0.1em;

    font-size: 4vh;
    font-family: var(--arrow);
    color: var(--bordure);

    position: relative;

    z-index: 1;
}


.prev-btn-texte {
    width: 3vw; 
    height: 5vh;

    cursor: pointer;

   margin: 0;
    left: 0%;
    top: 0%;

  background: none;

    border: solid var(--bordure);
    border-width: 0px 0px 0px 0.1em;

    font-size: 4vh;
    font-family: var(--arrow);

    color: var(--bordure);
    
    position: relative;

    z-index: 1;
}




.terminal {
    margin: 0;
    margin-top: 0em;
    
    padding: 0;

  
    background-color: var(--background);
    font-family: var(--bouton-font);


    display: grid;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    overflow: hidden;
    
}
.carousel-container {
    /* Vos styles existants */
    padding-left: 3%;
    padding-right: 3%;
    margin-left: 0.25em;
    margin-right: 0.5em;
    border: var(--border) solid var(--bordure); 
    overflow: hidden;
    background-color: var(--bouton-couleur);
    z-index: 2;
}

.carousel-container h1 {
    text-transform: uppercase;
    font-size: 4vw;
    color: var(--typo);
    
    margin: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}





.nav-container {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 0;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 5;
    margin: 0;
    margin-right: 0em;
    background-color: var(--background);
}

/* Pour les navigateurs basés sur WebKit */
.nav-container::-webkit-scrollbar {
    display: none; 
}

/* Pour les autres navigateurs */
.nav-container {
    scrollbar-width: none; 
}

.dossier {
    flex: 0 0 10vw; 
    height: 20vh; 
    color: var(--bordure);
    background-color: var(--bouton-couleur);
    box-shadow: 1vw 1vw 0 var(--bordure); 
    margin-top: 4vh; 
    margin-right: -2vw; 
    margin-left: 0vw;
    padding: 0.1vw; 
    transform: rotate(-15deg);
    border-style: solid;
    border-width: var(--border);
    display: inline-block;
    z-index: 0;
}

.dossier:hover {
    margin-top: 1vh;
    transform: rotate(-0deg); 
}

.dossier-invisible-début{
    color: var(--bordure);
    background-color: var(--bouton-couleur);
    box-shadow: 1vw 1vw 0 var(--bordure); 
    margin-top: 4vh; 
    margin-right: 0vw; 
    margin-left: 1vw;
    z-index: 0;
    opacity: 0;
}
.dossier-invisible-fin{
    color: var(--bordure);
    background-color: var(--bouton-couleur);
    box-shadow: 1vw 1vw 0 var(--bordure); 
    margin-top: 4vh; 
    margin-right: 5vw; 
    margin-left: 0vw;
    z-index: 0;
    opacity: 0;
}



.prev-proj{ 
    height: 11%;
    width: 2em;

    cursor: pointer;

    margin: 0;
    left: 0.2em;
    top: 82%;


    color: var(--bordure);
    background-color: var(--bouton-couleur);
    font-family: var(--arrow);
    font-size: 5vh;


    border: solid var(--bordure);
    border-width: 0.07em 0.07em 0.07em 0.07em;

    position: absolute;

    z-index: 1;
}



.next-proj{
    height: 11%;
    width: 2em;

    cursor: pointer;

    margin: 0;
    right: 0.2em;
    top: 82%;


    color: var(--bordure);
    background-color: var(--bouton-couleur);
    font-family: var(--arrow);
    font-size: 5vh;


    border: solid var(--bordure);
    border-width: 0.07em 0.07em 0.07em 0.07em;

    position: absolute;

    z-index: 1;
}




  .liste-projet {
    text-transform: uppercase;

    margin: 0;
    padding: 2px; 
    color: var(--typo);
    background-color: var(--bouton-couleur);

 
    text-align: center;

    cursor: pointer;
    border-style: solid;
    border-width: var(--border);

    z-index: 0;
}
 

.liste-projet:hover {
    background-color: var(--liste);
    font-family: var(--bouton-font);
    color: var(--typo);
    border: var(--border) solid var(--bordure); 
}

.projet-invisible {
    margin: 0;
    z-index: 0;
    opacity: 0; /* Rendre l'élément invisible */
}



.bw{
    color: var(--bouton-couleur);
    background-color: var(--bw);
    border: var(--border) solid var(--bordure); 
}

.bw:hover{
    color: var(--bordure);
    background-color: var(--bouton-font-couleur);
    border: var(--border) solid var(--bordure); 
}



.ps {
    background-color: var(--liste);
    font-family: var(--bouton-font);
    color:var(--typo);
    border: var(--border) solid var(--bordure); 
}




.scroll-btn {
    opacity: 0;
    position: absolute;
}

.scroll-prev-btn{
    opacity: 0;
    position: absolute;
}

.com{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 6;

    background-color: var(--bandeau);
    border-top:  var(--border) solid var(--bordure);
    z-index: 2;
}

.com-lang{
    margin-inline-end: 1em;

    display: flex;
    justify-content: center; 
    align-items: center;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;

    background-color: var(--bandeau);
    border-top:  var(--border) solid var(--bordure);
    z-index: 2;
  }




.language{
 
    width: auto;
    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;
  
    top: 3vh;
    margin-right: 2vw;

    color: var(--typo);

    background-color: var(--bouton-font-couleur);
    border:  var(--border) solid var(--bordure);
    border-width: 0.2em 0.2em 0px 0.2em;

    font-family: var(--bouton-font);
    font-size: 2vh;
    text-align: center;
    display: inline-block;

    box-shadow: 10px 10px 0 var(--bordure);
      
    position: relative;
}



.btn-language {
    width: auto;

    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;
    
    top: 3vh;
    margin-right: 2vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.2em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-family: var(--bouton-font);
    font-size: 2vh;

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
    
    cursor: pointer;
}

.btn-language:hover {
    top: 0vh; 
}

.prev-btn-language {
    width: auto;

    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;

    top: 3vh;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.2em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-family: var(--bouton-font);
    font-size: 2vh;

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    position: relative;
    
    cursor: pointer;
}

.prev-btn-language:hover {
    top: 0vh; 
}


.com-col{
    margin-inline-start: 1em;

    display: flex;
    justify-content: center; 
    align-items: center;

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;

    background-color: var(--bandeau);
    border-top:  var(--border) solid var(--bordure);
    z-index: 2;
  }


.color{
    width: auto;

    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;
   
    top: 3vh;
    margin-right: 2vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.2em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-family: var(--bouton-font);
    font-size: 2vh;

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
}

.btn-color{
    width: auto;

    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;
   
    top: 3vh;
    margin-right: 2vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.2em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-family: var(--bouton-font);
    font-size: 2vh;

    box-shadow: 10px 10px 0 var(--bordure);

    text-align: center;
    cursor: pointer;
    position: relative;

    z-index: 2;
}


.btn-color:hover {
    top: 0vh;
}



.prev-btn-color{
    width: auto;

    padding-left: 0.2vw;
    padding-right: 0.2vw;
    height: 6vh;
   
    top: 3vh;
    margin-right: 2vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.2em 0.2em 0px 0.2em;
    
    background-color: var(--bouton-font-couleur);
    font-family: var(--bouton-font);
    font-size: 2vh;

    box-shadow: 10px 10px 0 var(--bordure);

    text-align: center;
    cursor: pointer;
    position: relative;

    z-index: 2;
}

.prev-btn-color:hover {
    top: 0vh;
}


.contactportable {
    display: none;
    justify-content: right; 
    align-items: center;

    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 6;
    
    background-color: var(--bandeau);
    border-bottom:  var(--border) solid var(--bordure);
    position: fixed;
    
    z-index:100;
  }




.btn-color-portable {
    display: none;

    width: auto;

    padding-left: 1vw;
    padding-right: 1vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    position: relative;

}

.prev-btn-color-portable {
    width: auto;

    padding-left: 1vw;
    padding-right: 1vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;

}


.btn-language-portable{
    width: auto;

    color: var(--typo);

    padding-left: 3vw;
    padding-right: 3vw;
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
}

.prev-btn-language-portable{ 
    width: auto;
    color: var(--typo);
    padding-left: 1vw;
    padding-right: 1vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
  
}


.mailportable{
    width: auto;
    color: var(--typo);
    padding-left: 1vw;
    padding-right: 1vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
}

.instaportable{
    width: auto;
    color: var(--typo);
    padding-left: 1vw;
    padding-right: 1vw;

    color: var(--typo);
    
    border: var(--border) solid var(--bordure); 
    border-width: 0.1em 0.2em 0px 0.2em;

    background-color: var(--bouton-font-couleur);
    font-size: 2vh;
    font-family: var(--bouton-font);

    box-shadow: 10px 10px 0 var(--bordure);
 
    text-align: center;
    border-style: solid;
    position: relative;
}