/***** Général *****/
h1 {
  color: rgb(153, 0, 153);
font-weight: bold;
  font-size: 3em;
}

body, html {
  font-family: "FreeSans";
  height: 100%;
  margin: 0;
  padding: 0;
}
.arriere_plan {
  position: relative;
  margin: 0;
  padding: 0;
}
.imageFond {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* PAGE PRINCIPALE */
/***** Partie centrale *****/

/* Logo entreprise */
.deuxDiv {
  position: absolute;
  top: 35%;
  left: 37%;
  width: 20%;
  height: 30%;
//background-color: #2270a0;
  border-radius: 5%;
}

#imgEntreprise {
  position: absolute;
  width: 90%;
  margin: 5%;
}
/* Logo UniCeo */
.troisDiv {
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  height: 25%;
}
#imgUniceo {
  position: absolute;
  width: 20%;
  bottom: 7%;
  left: 57%;
}

#propose {
  position: absolute;
  width: 30%;
  top: 66%;
  left: 42%;
  font-size: 1.3vw;
}

/***** Liens vers les plateformes *****/

/* ##### Pour les grands écrans #####*/
@media screen and (min-width: 992px) {

  /***** Fonds blancs esthétiques *****/
  /* (Ressources Partagees) */
  .rondBlanc1 {
    position: absolute;
    width: 11%;
    border-radius: 50%;
    top: 7.8%;
    left: 49.5%;
    background-color: white;
  }
  .rondBlanc1:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* (Jitsi) */
  .rondBlanc2 {
    position: absolute;
    width: 11%;
    border-radius: 50%;
    top: 21%;
    left: 65%;
    background-color: white;
  }
  .rondBlanc2:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* (Contact) */
  .rondBlanc3 {
    position: absolute;
    width: 11%;
    border-radius: 50%;
    top: 49.1%;
    left: 72.3%;
    background-color: white;
  }
  .rondBlanc3:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* Div des plateformes */
  #ressourcesPartagees {
    position: absolute;
    width: 10%;
    top: 8%;
    left: 50%;
  }
  #ressourcesPartagees:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  #jitsi {
    position: absolute;
    width: 10%;
    top: 21.5%;
    left: 65.5%;
  }
  #jitsi:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  #contact {
    position: absolute;
    width: 10%;
    top: 50%;
    left: 73%;
  }
  #contact:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* Liens vers les plateformes */
  .lien {
    position: absolute;
    width: 96%;
    height: 96%;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    border: 4px solid rgb(153, 0, 153);
    background-color: white;
    color: #990099;
    text-align: center;
    text-decoration: none;
    font-size: 1.5vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .lien:hover, .lien:active {
    background-color: rgb(153, 0, 153);
    color: white;
    font-weight: bold;
  }

/***** Mentions légales *****/
  #mentionsLegales {
    position: absolute;
    left: 1%;
    bottom: -5%;
  }
  #lienMentions {
    text-decoration: none;
    font-size: 1.3vw;
    color: black;
  }
  #lienMentions:hover {
    text-decoration: underline;
  }
}

/* ##### Pour les petits écrans #####*/
@media screen and (max-width: 992px) {

  /***** Fonds blancs esthétiques *****/
  /* (Ressources Partagees) */
  .rondBlanc1 {
    position: absolute;
    width: 50%;
    height: 12%;
    border-radius: 25px;
    top: 120%;
    left: 25%;
    background-color: white;
  }
  .rondBlanc1:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* (Jitsi) */
  .rondBlanc2 {
    position: absolute;
    width: 50%;
    height: 12%;
    border-radius: 25px;
    top: 139%;
    left: 25%;
    background-color: white;
  }
  .rondBlanc2:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* (Contact) */
  .rondBlanc3 {
    position: absolute;
    width: 50%;
    height: 12%;
    border-radius: 25px;
    top: 158%;
    left: 25%;
    background-color: white;
  }
  .rondBlanc3:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }

  /* Div des plateformes */
  #ressourcesPartagees {
    position: absolute;
    width: 50%;
    height: 8%;
    border-radius: 25px;
    top: 122%;
    left: 25%;
    text-align: center;
    background-color: white;
  }
  #ressourcesPartagees:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  #jitsi {
    position: absolute;
    width: 50%;
    height: 8%;
    border-radius: 25px;
    top: 141%;
    left: 25%;
    text-align: center;
    background-color: white;
  }
  #jitsi:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  #contact {
    position: absolute;
    width: 50%;
    height: 8%;
    border-radius: 25px;
    top: 160%;
    left: 25%;
    text-align: center;
    background-color: white;
  }
  #contact:after {
      content: "";
      display: block;
      padding-bottom: 100%;
  }
  /* Liens vers les plateformes */
  .lien {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    text-align: center;
    text-decoration: none;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #990099;
    border: 2px solid rgb(153, 0, 153);
  }
  .lien:hover, .lien:active {
    background-color: rgb(153, 0, 153);
    color: white;
    font-weight: bold;
  }

  /***** Mentions légales *****/
  #mentionsLegales {
    position: absolute;
    width: 50%;
    left: 25%;
    right: 25%;
    top: 190%;
    text-align: center;
  }
  #lienMentions {
    text-decoration: none;
    font-size: 1.3vw;
    color: black;
  }
  #lienMentions:hover {
    text-decoration: underline;
  }

}

/* PAGE MENTIONS LEGALES */
#divMentionsLegales {
  margin: 5%;
  font-size: calc(12px + 0.2vw);
}

/* PAGE DESCRIPTION DES SERVICES */
#divDescriptionLigi {
  margin: 5%;
  font-size: calc(12px + 0.4vw);
}