body {

    background: rgb(0, 0, 0);
    position: relative;
    height: 200vh;
    
  
  }
  
  a {
    font-family: Arial, Helvetica, sans-serif;
    color: #e96363;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  a:hover {
    color: #7631a4;
    font-style: italic;
    text-shadow: 0 0 5px rgb(255, 0, 0);

  }
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
    margin: 0;
    padding: 1 1px;
  }

  p2  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 14px;
    padding: 2vh;
  }

  p3  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 17px;
    font-weight: 700;
  }
  

  p4  {
    font-family:'Courier New', Courier, monospace;
    color: #ffffff;
    font-size: 14px;
    padding: 2vh;
  }

  


  
  h1 {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 17px;
    margin: 0;
    padding: 0;
  }
  
  
  h2 {
    font-family: Arial, sans-serif;
    color: #31a499;
  }
  
  h3 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    color: #ffffff;
  }
  
  h4 {
    font-family: Arial, sans-serif;
    color: #7678c4;
    font-size: 17px; 
    margin: 0;
    padding: 0;
  }
  
  h5 {
    font-family: Arial, sans-serif;
    color: #ff8ea3;
  }

  h6 {
    font-family: Arial, sans-serif;
    color: #be0000;
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-weight: normal; /* facultatif, pour un rendu plus léger */
  }

  h7 {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 100;
  }

  .ciel {
    position: relative;
    margin: 10px auto;
    width: 90vw;
    height: 9vh;
    top: 0vh;
    background-image: url("dossier-images/stars-banniere-3.gif");
    background-size: 25%;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  }


  .main {
    position: relative;
    margin: 10px auto;
    width: 90vw;
    height: 200vh;
    top: 0vh;
    background-color: rgb(59, 27, 59);
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(255, 66, 230, 0.3);
  }


  .bibliographie {
    position: absolute;
    width: 25vw;
    height: 25vh;
    top: 0vh;
    left: 65vw;
    background: url('dossier-images/rect-libell.png');
    background-size: 100%;
    z-index: 3;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow: auto;
  }


  .img-memoire-titre-d {
    position: absolute;
    width: 25vw;
    height: 16vh;
    top: 1vh;
    left: 28vw;
  }

  .img-memoire-titre-d:hover {
    filter:blur(2px);
    transform:scale(1.03)
  }

  .centre-scroll {
    position: relative;
    margin: 10px auto;
    width: 60vw;
    height: 100vh;
    top: 30vh;
    background: url('dossier-images/papier-aubergine.png');
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow: auto;
  }

  .premiere-box-actualité {
    position: relative;
    padding: 5px;
    width: 30vw;
    height: 40vh;
    top: 1vh;
    left: 1vw;
    background-color:rgb(181, 124, 141);
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  }

  .img-news {
    position: absolute;
    width: 20vw;
    height: 10vh;
    top: 2vh;
    left: 20vw;
  }

  .text-box-actualite {
    position: absolute;
    width: 30vw;
    height: 20vh;
    top: 13vh;
    left: 27vw;
    background: transparent;
    z-index: 1;
    border: dotted rgb(160, 122, 80);
  }


  .home-fenetre {
    position: absolute;
    width: 15vw;
    height: 35vh;
    top: 0vh;
    left: 0vw;
    background: url('dossier-images/fenetre-fermee.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
  }

  .home-fenetre:hover {
    background: url('dossier-images/fenetre-ouverte.png');
    background-size: contain;
    background-repeat: no-repeat;

  }

  


  .bande-haut {
    position: absolute;
    width: 90vw;
    height: 25vh;
    top: 0vh;
    background: url('dossier-images/stripespurple.jpg');
    background-size: 10%;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow:hidden;
  }

  .img-gumball  {
    position: relative;
    width: 15vw;
    height: auto;
    z-index: 5;
  }


  .bande-noire-menu {
    position: absolute;
    width: 23vw;
    height: 6vh;
    top: 18vh;
    left: 67vw;
    background-color:rgb(0, 0, 0);
    z-index: 9;
    overflow:hidden;
  }
  
  .img-accueil {
    width: 6vw;
    height: 5.5vh;
    position: absolute;
    top: 0vh;
    left: 1vw;
    z-index: 1000;
  }

  .img-accueil:hover {
    background-color: #7631a4;
  }

  .img-games {
    width: 6vw;
    height: 5.5vh;
    position: absolute;
    top: 0vh;
    left: 7vw;
    z-index: 1000;
  }


  .img-games:hover {
    transform: scale(1.05);
  }
  
  .img-email {
    width: 6vw;
    height: 3vh;
    position: absolute;
    top: 0.5vh;
    left: 13vw;
    z-index: 1000;
  }
  .img-email:hover {
    filter: blur(2px);
  }


  .maison-bande-haute  {
    width: 14vw;
    height: 25vh;
    position: absolute;
    top: 0vh;
    left: 14vw;
    background: url("dossier-images/mais-b1.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
  }

  .maison-bande-haute-f1  {
    width: 4.5vw;
    height: 6.5vh;
    position: absolute;
    top: 6vh;
    left: 1.3vw;
    background: url("dossier-images/mais-b-f1.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
  }

  .maison-bande-haute-f1:hover  {
    background: url("dossier-images/mais-b-f1-h.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
  }


  .maison-bande-haute-f2  {
    width: 4.5vw;
    height: 12vh;
    position: absolute;
    top: 12vh;
    left: 1.3vw;
    background: url("dossier-images/mais-b-f2.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
  }

  .maison-bande-haute-f2:hover  {
    background: url("dossier-images/mais-b-f2-h.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
  }

  .img-loutres{
    position: absolute;
    width: 15vw;
    height: auto;
    top: 0vh;
    z-index: 5;
  }

  .img-loutres:hover{
    transform: scale(1.07);
    box-shadow: 0px 7px 20px rgba(247, 90, 255, 0.3);
    z-index: 100;
  }
  

  .img-miro {
    position: absolute;
    width: 6vw;
    height: auto;
    top: 0vh;
    left: 14.3vw;
    z-index: 5;
  }

  .img-clavier:hover{
    transform: scale(1.07);
    box-shadow: 0px 7px 20px rgba(247, 90, 255, 0.3);
    z-index: 100;
  }

  .img-menu-script {
    position: fixed;
    width: 10vw;
    height: auto;
    bottom: 2vh;
    left: 85vw;
    z-index: 5000;
  }

  .img-menu-script:hover{
    transform: scale(1.07);
    z-index: 100;
  }

  .img-zuckerg:hover{
    transform: scale(1.07);
    box-shadow: 0px 7px 20px rgba(247, 90, 255, 0.3);
    z-index: 100;
  }

  .img-postit {
    position: absolute;
    width: 11vw;
    height: auto;
    top: 1vh;
    left: 56vw;
    z-index: 5;
  }

  .img-postit:hover{
    transform: scale(1.2);
    z-index: 100;
  }





 

  .article-colonne-lexique {
    position: absolute;
    width: 15vw;
    height: 60vh;
    top: 38vh;
    background-image: url("dossier-images/pois-violet-et-noir.png");
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow: auto;
  }


  .lexique-de {
    position: absolute;
    width: 15vw;
    height: 13vh;
    top: 3vh;
    background-image: url("dossier-images/pince-dent1.png");
    background-size: cover;
    z-index: 0;
  }

  .lexique-de:hover {
    position: absolute;
    width: 15vw;
    height: 15vh;
    top: 3vh;
    background-image: url("dossier-images/pince-dent2.png");
    background-size: cover;
    z-index: 0;
  }





  .img-line-silver {
    position: absolute;
    width: 20vw;
    height: auto;
    top: 14vh;
    left: 35vw;
    z-index: 5;
  }




  .colonne-droite-references {
    position: absolute;
    width: 15vw;
    max-width: 15vw;
    height: 70vh;
    top: 23vh;
    right: 0%;
    background-color : rgb(139, 80, 142);
    z-index: 10;
    box-shadow: 0px 10px 30px rgba(255, 103, 73, 0.3);
    overflow: auto;
  }

  .references-titre {
    position: absolute;
    width: 15vw;
    height: 14vh;
    top: 0vh;
    background: transparent;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(255, 120, 93, 0.3);
    overflow: hidden;
  }

  .img-refs-titre {
    position: relative;
    width: 15vw;
    height: 14vh;
    z-index: 5;
  }

  .ref-une {
    position: relative;
    width: 15vw;
    height: 15vh;
    top: 0vh;
    background: transparent;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;

  }

  .img-ref-une-gumball{
    position: relative;
    width: 15vw;
    height: 15vh;
    z-index: 500;
  }

  .refs-liens {
    position: relative;
    width: 15vw;
    height: 100vh;
    top: 0vh;
    background: url('dossier-images/papiercarnetjaune.JPG');
    background-size: contain;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    border: dotted rgb(255, 171, 150);
  }









  .bannieres-en-bas  {
    position: absolute;
    width : 93vw;
    height : 5vh;
    left: 0vh;
    bottom: 10vh;
    z-index: 20;
  }
  
  .bannieres-en-bas img  {
      width: 12.5vw;
      margin: 1vw;
      border-radius: 8px;
  }
  
  .bannieres-en-bas img:hover  {
    transform: scale(1.1);
  }