:root {
  --font-size: 18px;
  --facteur-echelle: 1.2;
  --petit-texte: var(--font-size);
  --tres-petit-texte: calc(var(--petit-texte) / var(--facteur-echelle));
  --texte-moyen: calc(var(--petit-texte) * var(--facteur-echelle));
  --gros-texte: calc(var(--texte-moyen) * var(--facteur-echelle));
  --tres-gros-texte: calc(var(--gros-texte) * var(--facteur-echelle));

  font-family: 'Georgia', Times New Roman, Times, serif;

  --cyan-pale: #Bee9e8;
  --bleue-ciel-fonce: #62b6cb;
  --bleue-sombre: #1b4965;
  --bleue-clair: #Cae9ff;
  --bleue-moyennement-lumineux: #5fa8d3;
}
body{
  background-image: url(../images/arrierePlanPrisDeMagnific.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
#WhoAmI{
  margin-top: 4%;
  width: 200px;
  margin-left: auto;
  margin-right: auto;

}
.surligner{
  border-radius: 10px;
  padding: 5px;
  background-color: var(--cyan-pale);
}

#ApercuRealisation{
  margin-top: 4%;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
#maMusique{
  margin-top: 4%;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.carteRealisation p{
  width:25vw;
}
#titre{
  width: 500px;
}

#barDeMenu a{
  padding : 10px;
  text-decoration: none; 
  float: right;
}
#Presentation{
  width:60vw;
  margin-left: auto;
  margin-right: auto;
}
audio{
  display: block;
  margin: 0 auto;
}

.liste p, .liste h3{
  text-align: left;
}
#About{
  margin-top: 20%;
  text-align: center;
  background-color: var(--bleue-sombre);
  color: var(--bleue-clair);
  padding: 2%;
}
#logoDansAbout{
  margin-left : 40%;
}
#ApprentissageMathematique{
  margin-top: 4%;
}
h2, h3, p, h4{
 text-align: center;

}
h1{
  font-size: var(--tres-gros-texte);
}
h2{
  font-size: var(--gros-texte);
}
h3{
  font-size: var(--texte-moyen);
}
h4{
  font-size: var(--tres-petit-texte);
}
p{
  font-size: var(--petit-texte);
}
.objectifs-Journal{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.objectifs-Journal p{
  padding: 2%;

}
.containerInformatiqueRealisation{
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
}
.carteRealisation{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.containerMathematiqueApercuRealisation{
  display: flex;
  gap: 30px;
}

.carteMathematiqueApercuRealisation{
  display:flex;
  justify-content: center;
}
.carteMathematiqueApercuRealisation img{
  border-radius: 20px 0 0 20px;
}
.carteSectionMath {
  float: left;
  width: 30vw;
  color : var(--cyan-pale);
  background-color: var(--bleue-sombre);
  padding: 10px;
}

img{
  border-radius: 20px;
}

@media(max-width:1200px){
  .containerMathematiqueApercuRealisation{
    flex-direction: column;
  }
}
/*
:visited, :active :hover 
pour les hyperliens
*/