@media (max-width: 700px) {
    header{
        font-size: 1vh;
        display: none;
    }
    header div > *{
        display: none;
    }
    header button{
        display: none;
    }
    .bgTextColo .man {
        text-align: start;
        position: absolute;
        top: 8vh;
      }

    .bgTextColo {
        box-shadow: inset 0em 1.5em 1.5em 0.1em white;
        justify-content: center;
    }
    #man{
        height: 100vh;
    }
    #colo{
        justify-content: flex-start;
    }
    #colo .bgTextColo{
        height: 100vh;
    }
    .bgTextColo .brut{
        font-variation-settings: 'wght' 600, 'wdth' 0, 'STCL' 0 ;
    }
    .bgTextColo p span{
        font-size: 17vw;
        line-height: 21vw;
        letter-spacing: -0.2vw;
    }
    .coloD{
        color: rgb(35, 63, 63);
        font-size: 2.9vw;
        text-transform: uppercase;
        height: fit-content;
        line-height: 3.2vw !important;
        position: relative !important;
    }
    .ContainerBL{
        height: fit-content;
        gap: 1vh;
        justify-content: flex-start;
    }
    .bigL {
        font-size: 8vh;
        line-height: 9vh;
        white-space: normal;
        width: 50vw;
        
    }

    .ContainerBL:nth-of-type(1) .coloD {
        width: 50vw !important;
        top: -28%;
        right: 20%;
      }

    .ContainerBL:nth-of-type(3) .coloD {
        width: 50vw !important;
        top: -203.5%;
        right: 26%;
      }
      .ContainerBL:nth-of-type(4) .coloD {
        width: 43vw !important;
        top: -27%;
        right: 27%;
}

    #content{ 
        top: 100vh;
        height: fit-content;
    }
    #top {
        display: none;
    }
    #specimen2{
        padding: 6vh 2vw 6vh 2vw;
    }
    #specimen3 {
        grid-template-columns: repeat(2,50vw);
        grid-template-rows: repeat(10, 55vw);
    }
    .tuile {
        width: 50vw;
        height: 55vw;
    }
    .texteSpe3{
        font-size: 3vw;
        padding: 2.5vw;
        line-height: 4vw;
    }
   .tSvg{
    width: 50vw;
   }

   .ecrivainPoete {
    font-size: 8.5vw;
    top: 4vw;
    line-height: 9.5vw;
   }


   .tuile:nth-child(1){
    grid-column: 1/2 ;
    grid-row: 1;
    }
    .tuile:nth-child(2){
    grid-column: 2/3 ;
    grid-row: 1;
    }
    .tuile:nth-child(3){
    grid-column: 2/3 ;
    grid-row: 2;
    }
    .tuile:nth-child(4){
    grid-column: 1/2 ;
    grid-row: 2;
    }
    .tuile:nth-child(5){
    grid-column: 2/3 ;
    grid-row: 3;
    }
    .tuile:nth-child(6){
    grid-column: 1/2 ;
    grid-row: 3;

    }
    .tuile:nth-child(7){
        grid-column: 1/2 ;
        grid-row: 4;
    }
    .tuile:nth-child(8){
        grid-column: 2/3 ;
        grid-row: 4;
    }
    .tuile:nth-child(9){
        grid-column: 1/2 ;
        grid-row: 5;
    }
    .tuile:nth-child(10){
        grid-column: 2/3 ;
        grid-row: 5;
    }
    .tuile:nth-child(11){
    grid-column: 2/3 ;
    grid-row: 6;
    }
    .tuile:nth-child(12){
    grid-column: 1/2 ;
    grid-row: 6;
    }
    .tuile:nth-child(13){
    grid-column: 2/3 ;
    grid-row: 7;
    }
    .tuile:nth-child(14){
    grid-column: 1/2 ;
    grid-row: 7;
    }
    .tuile:nth-child(15){
    grid-column: 1/2 ;
    grid-row: 8;
    }
    .tuile:nth-child(16){
    grid-column: 2/3 ;
    grid-row: 8;

    }
    .tuile:nth-child(17){
        grid-column: 2/3 ;
        grid-row: 9;
    }
    .tuile:nth-child(18){
        grid-column: 1/2 ;
        grid-row: 9;
    }
    .tuile:nth-child(19){
        grid-column: 1/2 ;
        grid-row: 10;
    }
    .tuile:nth-child(20){
        grid-column: 2/3 ;
        grid-row: 10;
    }



   .tuile:nth-child(6) > span{
    top: 0vw !important;
    font-size: 50vw !important;

   }
   .tuile:nth-child(7) > div{
    top: 0vw !important;
   }
   .tuile:nth-child(7) > div > p{
    line-height: 3.5vw !important;

   }
   .tuile:nth-child(7) > figure{
    top: 11vw !important;
 
    }
    .tuile:nth-child(8) > span{
        font-size: 9.5vw !important;
        top: 4vw !important;
        line-height: 11vw !important;
     
        }
    .tuile:nth-child(9) > span{
        font-size: 50vw !important;
    }
    .tuile:nth-child(11) > span{
        font-size: 55vw !important;
        top: -7vw !important;
    }
    .tuile:nth-child(14) > span{
        font-size: 60vw !important;
        top: -6vw !important;
    }
    .tuile:nth-child(17) > span{
        font-size: 50vw !important;
        top: -9vw !important;
    }

    .telebutton{
        width: 40vw;
        height: 40vw;
        font-size: 4vw;
        line-height: 5.2vw;
        border-radius: 25vw;
        animation: none;
    }
    .infoDamierAnim{
        font-size: 1.2vh !important;
        bottom: 1vh !important;
    }
    .infoDamierAnim p{
        line-height: 1.5vh;
        font-size: 2vw;
    }
    #specimen4 .bigGene{
        height: 22vw;
        padding: 2vh 0vh;
    }
    #specimen4 .big{
        font-size: 13vw;
    }
    #specimen4 .smallGene{
        width: 100% ;
        height: 22vw;
        padding: 2vh 0vh;
    }
    #specimen4 .smaller{
        font-size: 13vw;
    }
    #specimen4 .infoDamierAnim{
        width: 80%;
        bottom: 0.5vh !important;
        font-size: 1.1vh !important;
    }

    #section5 {
        flex-direction: column-reverse;
    }
    #glyphPreview{
        width: 100vw;
        height: fit-content;
        z-index: 200;
        flex-direction: row;
        align-items: center;
        /* border-bottom: 1px solid white; */
    }
    #selector{
        width: 42%;
        padding: 2vh 1.5vh;
        height: fit-content;
        margin-bottom: 0px;
    }
    #glyphPreview > #selector > div{
        flex-direction: column;
    }
    #glyphPreview > #selector > div > ul > li {
        margin: 0 0.5vw 0.9vh 0.5vw;
    }
    #glyphPreview > #selector > div:nth-of-type(1) > ul {
        margin-bottom: 1.5vh;
    }
    #glyphPreview > #selector > div > h1 {
        height: 4vw;
        font-size: 2.5vw;
        margin: 0 0.5vw 0.9vh 0.5vw;
        padding: 0.7vw 3vw;
        border-radius: 4vw;
    }
   .customRadio{
    border-radius: 4vw;
    padding: 0.7vw 3vw;
    height: 3.6vw;
    font-size: 2.6vw;
   }
   #glyphPreview input[type="radio"]:checked + label {
    transform: scale(1);
    background-color: rgb(115, 173, 253);
    background-color: var(--green);
    color: var(--brown);
  }
    #letterPrev{
        font-size: 45.5vw;
        width: 55%;
        height: 100%;
        position: relative;
        /* top: 15vw; */
    }
    #section5 #glyphset {
        width: 100vw;
    }
    #emptyspace{
        width: 100vw;
        height: calc(100vw/8);
    }
    .tileGlyphset {
        width: calc(100vw/8);
        height: calc(100vw/8);
    }
    .tileGlyphset p {
        font-size: 3.5vh;
    }
    .glyphsetEnd{
        display: none;
    }
    /* #section7 .colonne:nth-of-type(2){
        visibility: hidden;
        position: absolute;
        height: fit-content;
    } */
    #section7 .colonne{
        width: 100%;
        flex-direction: column-reverse;
        overflow-x: hidden;
    }
    .containerTest {
        width: 100%;
        box-sizing: border-box;
        padding: 2vh 2vh;
        height: 75vh;
      }
    .containerTest p {
        min-height: 70vh;
        overflow: hidden;
    }
    #section7 .colonne ul{
        width: 100%;
        display: grid;
        grid-template-columns: 40% 40% 20%;
        padding-top: 3vh;
        grid-template-rows: repeat(3,8vh);
        grid-auto-flow: column;
        align-items: start; 
        box-sizing: border-box;
    }
    #section7 .colonne ul li {
        width: 30vw;
        margin: 2.2vh 4vw;
        font-size: 1vh;
        height: 5.5vw;
        border-radius: 3vw;
        padding: 1vw 4vw;
    }
    #section7 .colonne ul li label{
        top: -4vw;
    }
    #section7 .colonne ul li.btn {
        display: none;
    }
    #section7 .colonne ul .slider::-moz-range-thumb{
        width: 3.5vw;
        height: 3.5vw;
    }

    #section7 .colonne ul .slider::-webkit-slider-thumb{
        width: 3.5vw;
        height: 3.5vw;
    }

    #switch{
        left: 6vw;
        top: 3vw;
        font-size: 2.8vw;
    }

    .TestRadio {
        margin-right: 3vw;
    }

    .alt{
        position: relative;

    }
    .alt p {
        top: -1.7vh;
    }

    .alt label {
        position: relative !important;
        width: 10vw !important;
        height: 4vw !important;
        top: 0px !important;
    }
    .slider{bottom: 0.5vw;}
    .cSlider::before{
        height: 3vw;
        width: 3vw;
        left: 0.5vh;
        bottom: 0.5vh;
    }
    input:checked + .cSlider:before {

        -webkit-transform: translateX(5.5vw);
        -ms-transform: translateX(5.5vw);
        transform: translateX(5.5vw);
      }
    footer{
        
        height: fit-content;
        position: relative;
        display: grid;
        grid-template-columns: 100vw;
        grid-template-rows: min-content; 
        box-sizing: border-box;
        padding: 5vh 0vh;   
        grid-auto-flow: reverse;
    }
    :root{
        --creditH : 122vh;
    }
    #creditTextes {
        font-size: 1.5vh;
        height: fit-content;
        display: grid;
        grid-template-columns: 100%;
        grid-auto-flow: row;
        font-variation-settings: 'wght' 300;
        padding: 0vh 10vw 0vh 10vw;
        width: 100vw;
        gap: 2vh;
        
    }
    #creditTextes>*{
        padding: 0vh 0vh !important;
        line-height: 2.2vh !important;
        width: 100%;
        
    }
    #logo{
        position: absolute;
        bottom: -4vh;
        left: 0px;
        background-color: white;
        width: 100vw;
        height: fit-content;
        justify-content: start;
        align-items: center;
        padding-left: 10vw;
        box-sizing: border-box;
    }
    #creditTextes figure img{
        max-height: 20vh;
        max-width: 20vw;
    }


    #creditTextes br{
        display: none;
    }
    #creditTextes > p > br:nth-of-type(4){
        display: block;
        margin-bottom: 1vh;
    }
    #creditTextes > p > br:nth-of-type(6){
        display: block;
    }

    #imgCredits figure {
        display: none;
        height: fit-content;
        position: absolute;
    }
    #imgCredits figure:nth-of-type(2) {
        display: block;
        left: 19vw;
        height: fit-content;
        /* bottom: 15vw; */
    }
    #imgCredits {
        height: 16vh;
        grid-row: 3/4;
        align-items: center;
        padding: 3vh 0vh 0vh 0vh;
    }
    #imgCredits figure img {
        max-width: 60vw;
        max-height: 45vw;
    }
    #scroller{
        animation-play-state: paused;
        align-items: center;
    }

    #credit{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        height: fit-content;
        padding: 0vh 10vw 0vh 10vw;
        /* top: 34vw; */
        grid-row: 1/2;


    }
    #credit li:nth-child(1) {
        width: 0vw;
        margin-left: 0vw;
    }
    #credit li {
        display: flex;
        flex-direction: column;
        font-size: 1.5vh;
        color: var(--lpurple);
        max-width: 80vw;
        min-width: 80vw;
        line-height: 2.2vh;
        margin-bottom: 1vh;
        padding: 0px;
    }   
    #copy{
        font-size: 1.2vh;
        left: 10vw;
        bottom: 3vh;
    }

}


@media (max-width: 400px){

    .containerTest {
        height: 60vh;
    }

    .containerTest p {
        min-height: 55vh;
    }

    #section7 .colonne ul li label {
        top: -4vw;
      }

    #section7 .colonne ul {
        height: 54vw;
    }

    #section7 .colonne ul li {
        height: 7.5vw;
        border-radius: 10vw;
    }
    #creditTextes p:nth-of-type(1){
        /* top: 100vw; */
    }



    #creditTextes>*{
        font-size: 1.8vh !important;
        line-height: 2.4vh !important;
    }
    #credit li{
        font-size: 1.8vh !important;
        line-height: 2.4vh !important;
    }

    .alt label{
        height: 6vw !important;
    }
    #imgCredits{
        height: 20vh;
    }
    #logo{
        bottom: -8vh;
    }
}


@media (max-height: 650px) and (min-width: 800px){
    
    .bigL {
        font-size: 22vh;
        line-height: 22vh;
        height: 20vh;
    }
    .bgTextColo{
        height: 100vh;
        justify-content: center;
        align-items: center;
    }
    

    
    .coloD{
        font-size: 3vh;
        line-height: 3.6vh;
    }

    #top .intro{
        font-size: 9vh;
        line-height: 10vh;
    }
    #selector{
        
        height: 30vh;
        padding: 7vh 2vw 2vh 3vw;
        margin-bottom: 13vh;

    }
    #letterPrev{
        font-size: 70vh;
    }
}