:root {
  --main-color: grey ;
  --alternative-color: whitesmoke ;
  --interactive-color: lightgrey;
  --hover-color: lime;
}

body{
  background-color: var(--alternative-color);
  font-family: sans-serif;
  color: var(--main-color);
}

  a{

    text-decoration: none;
    color: var(--main-color);

    cursor: crosshair;
  }

    a:hover{
      color: var(--hover-color);
    }

  #italic{
    font-style: italic;
  }

  #texte-important{
    text-decoration: none;
  }

/*

   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

@media screen and (max-width:667px) {
  
/*
       _     _              _        __      
      | |   | |            (_)      / _|     
      | |__ | | ___   ___   _ _ __ | |_ ___  
      | '_ \| |/ _ \ / __| | | '_ \|  _/ _ \ 
      | |_) | | (_) | (__  | | | | | || (_) |
      |_.__/|_|\___/ \___| |_|_| |_|_| \___/

*/

#bloc-information{
  width: 99vw;
  position: fixed; top: 0.5vh; left: 0.5vw;

  display: flex; justify-content: space-between;

  font-family: sans-serif;
  font-size: 4vw;
  text-align: justify;
  font-weight: bold;

  align-items: start;

  z-index: 10;
}

  #bloc-information #introduction{
    width: 49vw;
  }

  #bloc-information #contact{
    width: 49vw;
  }

  #language{
    height: 2vh; width: 5vw;
    
    font-weight: bold;
    text-align: right;
    cursor: crosshair;
  }

    .FR{
      position: fixed;
      opacity: 0;
      pointer-events: none;

      display: none;
    }

      .FR-active{
        opacity: 1;
        pointer-events: all;

        display: inherit;
      }

      .FR:hover{
        color: var(--hover-color);
      }

    .ENG{
      position: fixed;
      opacity: 1;
      pointer-events: all;

      display: inherit;
    }

      .ENG-active{
        opacity: 0;
        pointer-events: none;

        display: none;
      }

      .ENG:hover{
        color: var(--hover-color);
      }

#index-bonus{
  position: fixed; 
  top: 12vh; left: 0.5vw;

  font-family: sans-serif;
  font-size: 4vw;
  font-weight: bold;
}

#info-message{
  width: 30vw; position: fixed; top: 9vh; left: 51vw;
  margin-top: 1vh;

  font-size: 1.5vw;
  font-weight: bold;
  animation: info-message 1s infinite alternate-reverse;
}

@keyframes info-message{
  0%{
    color: var(--main-color);
  }
  100%{
    color: var(--hover-color);
  }
}

/*
       _           _           
      (_)         | |          
       _ _ __   __| | _____  __
      | | '_ \ / _` |/ _ \ \/ /
      | | | | | (_| |  __/>  < 
      |_|_| |_|\__,_|\___/_/\_\

*/

.bloc-index{
  width: fit-content; height: fit-content;
  position: fixed; bottom: 0vh; left: 0.5vw;
  /* padding-top: 25vh; */

  /* box-sizing: border-box; */

  align-content: end;

  font-weight: bold;

  /* overflow-x: visible;
  overflow-y: auto; */
}

.bloc-experimentations{
  width: fit-content; height: fit-content;
  position: fixed; bottom: 34.5vh; left: 48vw;

  font-weight: bold;

  /* overflow-x: visible;
  overflow-y: auto; */

  color: var(--interactive-color);
}

  .bloc-experimentations .project-name a{
    color: var(--interactive-color);
  }

  .bloc-experimentations .project-name a:hover{
    color: var(--hover-color);
  }

  .date-info{
    position: relative;
    
    font-family: sans-serif;
    font-size: 2vw;

    z-index: 1;
  }

  .bloc-index .project-list{
    width: fit-content; 
    /* height: 100vh; */
    margin-bottom: 1vh;
  }

  .bloc-experimentations .project-list{
    width: fit-content;
    margin-top: 30vh;
    margin-bottom: 1vh;
  }

  .project-name{
    width: fit-content; height: fit-content;
    position: relative;
    margin-bottom: 0.2vh;
    margin-left: 3vw;
    z-index: 10;
  }

    .trigger {
      font-size: 5vw;
      cursor: pointer;
      display: inline-block;
    }

    .preview {
      width: 20vw;
      position: absolute;
      display: none;
      z-index: 1000;
      pointer-events: none;
      border: 0.5vh solid var(--hover-color);
      backdrop-filter: blur(2px);
      border-radius: 1vH;
    }

    video.preview {
      background: #000;
    }

#about-text{
  width: 98vw;
  position: fixed; top: 11vh; left: 1vw;

  font-size: 4vw;
  font-weight: bold;

  text-align: justify;
/*  text-indent: 2vw;*/
}

  #about-text a{
    color: var(--interactive-color);
  }

  #about-text a:hover{
    color: var(--hover-color);
  }

  #about-text #about-introduction{
    margin-bottom: 5vh;
  }

#copyright-text{
  position: fixed; bottom: 1.5vh; left: 51vw;
  font-size: 2vw;
  font-weight: bold;

  text-align: justify;
}

#index-annexes{
  position: fixed; 
  top: 1vh; left: auto; right: 1vw;

  font-family: sans-serif;
  font-size: 1.5vw;
  font-weight: bold;

  text-align: right;
}

#bloc-instants-texte{
  width: 40vw; 

  position: fixed; bottom: 14vh; left: 57vw;

  font-size: 0.8vw;
  font-weight: bold;
}

#bloc-texte{
  width: 98.5vw; height: fit-content;

  position: fixed; bottom: 11vh; left: 0.5vw;

  font-family: sans-serif;
  text-align: justify;

  opacity: 1; pointer-events: all;
  z-index: 1;
}

  #bloc-texte h1{
    margin-bottom: 1vh;

    font-size: 5vw;
    font-weight: bold;
  }

  #bloc-texte h3{
    margin-left: 2vw; margin-bottom: 1vh;

    font-size: 3vw;
  }

  #bloc-texte p{
    width: 46vw;

    font-size: 2vw;
    font-weight: bold;
    text-indent: 4vw;
  }

  #bloc-texte a{
    color: var(--interactive-color);
  }

    #bloc-texte a:hover{
      color: var(--hover-color);
    } 

    #texte-demarche{
      margin-top: 1vh;
    }

    #left-text{
      margin-left: 3vw;
      display: flex; flex-direction: row;
      justify-content: space-between;
    }

    #right-text{
      margin-top: 2vh; margin-left: 3vw; 
      display: flex; flex-direction: row;
      justify-content: space-between;
    }

    #note-box{
      width: 47vw;
      margin-top: 0vh;
    }

      #note-box p{
        margin-bottom: 2vh; margin-left: 0vw;
        text-indent: 2vw;
      }

    #left-text #note-text, #right-text #note-text{
      width: 47vw;
      font-family: serif;
      font-size: 2vw;
      font-weight: unset;

      color: var(--hover-color);
    }

    #left-text #note-box{
      margin-left: 2vw;
    }

    #right-text #note-box{
      margin-right: 2vw;
    }

#bloc-images{
  width: 99vw; height: 10vh;

  position: fixed; bottom: 0.5vh; left: 0.5vw;

  overflow-x: auto;
  overflow-y: hidden;
}

  .ligne-images {
    width: fit-content; height: 100%;
    display: flex;

    cursor: ew-resize;
  }

    .thumbnail {
      height: 10vh; width: auto;
      cursor: crosshair;

      margin-right: 0.5vw;
    }

    .thumbnail-projets {
      height: 10vh; width: auto;
      cursor: crosshair;

      margin-right: 0.2vw;
    }

      #image-zone {
          width: 98vw; height: auto;
          position: fixed; left: 1vw; bottom: 11vh;
          display: flex;
          justify-content: center;
        }

          #image-zone img, #image-zone video {
            max-width: 100%;
            max-height: 100%;
          }

    #first-big-pic{
      height: 76vh; width: fit-content;

      position: fixed; left: 0.5vw; bottom: 14vh;
    }

    #bloc-images .mosaique-video{
      height: 10vh; width: auto;
      cursor: crosshair;
    }

    #bloc-images #big-video{
      height: 87vh; width: auto;

      position: fixed; left: 0.5vw; bottom: 12vh;
      opacity: 0; pointer-events: none;
    }

#experimentations-page-texte{
  width: 40vw; 

  position: fixed; bottom: 12vh; left: 51vw;

  font-size: 3vw;
  z-index: 1;
}

  #experimentations-page-texte h1{
    font-weight: bold;
  }

#bloc-observations-texte{
  width: 98vw; 

  position: fixed; bottom: 11vh; left: 1vw;

  font-size: 3vw;
  font-weight: bold;
  text-align: justify;
  z-index: 1; 
}

.images-categorie{
  width: 25vw;
  font-size: 2vw;
  margin-right: 0.3vw;
}

}