@media(max-width: 650px){
    body{
        margin: 15px;
        height: calc(100% - 30px);
    } 
    footer{
        bottom: 15px;
        grid-template-columns: 100%;
    }

    .footerRight{
        display: none;
    }

    .number, h2, h1, .boutonList{
        font-size: 9px;
    }

    .footerFichier .lien{
        font-size: 10px;
    }

    .petitTexte{
        display: none;
    }

    .intro{
        display: block;
    }

    .boutonTri{
        width: 60px;
    }

    .fichierContainer{
        width: calc(100vw - 60px); 
    }

    .rêveImage{
        display: none;
    }

    .caractéristiques{
        margin: 0;
    }


    


    
   
}

@media(max-width: 850px){
    .number, h2, h1, .boutonList{
        font-size: 11px;
        letter-spacing: .01em;
        line-height: 1.3em;
    }

  

    .rêveTitre{
        font-size: 10px;
    }

    .fichierContainer{
        grid-template-rows: 35px 25% auto 35px;
        
        
    }

    .bigNumber{
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .caractéristiques h2{
        font-size: 10px;
    }

    .contenu{
        font-size: 10px;
        line-height: 1.7em;
    }

    .bigTagIcon{
        display: none;
    }

    .textContainer{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--color2);
        background-color: var(--color1);
    }

    .textContainer p{
        color: var(--color2);
        
    }

    #asciiContainer{
        display: none;
    }

    canvas{
        display: none;
    }

    xr{
        display: block;
    }

    .imageContainer{
        transition: none; 
    }
    .imageContainer:hover{
        transition: none; 
    }

    .imageContainer:hover{
        grid-template-columns: 30% 70%;
    }

    

    



   
}

@media(max-width: 1000px){
    .titreContainer h1{
        display: none;
    }

}