/*
Auteur: Diogo Da Silva
Date: 12.01.2024
*/
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #003240;
    color: white;
}

/* Barre de navigation */
/*bouton pour Accueil */
.boutonA {
    border: 2.5px white solid;
    background-color: #003240;
    color: white;
    width: calc(207px);
    height: calc(95px);
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
}
.boutonA-container {
    display: flex;
    justify-content: space-around;
    margin-top: 3vw;
}
.boutonA:hover {
    border-color: rgb(170, 170, 170);
    color: rgb(170, 170, 170);
    box-shadow:0 0 10px rgb(170, 170, 170);
}

.boutonA:active {
    background-color: grey;
    color: white;
    border-color: rgb(170, 170, 170);
    box-shadow: 0 0 10px rgb(170, 170, 170);
}
/*bouton pour les autres pages */
.bouton {
  border: 1.5px white solid;
  background-color: #003240;
  color: white;
  width: calc(107px);
  height: calc(55px);
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
}
.bouton-container {
  display: flex;
  justify-content: space-around;
  margin-top: 3vw;
  margin-bottom: 3vw;
}
.bouton:hover {
  border-color: rgb(170, 170, 170);
  color: rgb(170, 170, 170);
  box-shadow:0 0 10px rgb(170, 170, 170);
}

.bouton:active {
  border-color: rgb(170, 170, 170);
  background-color: grey;
  color: white;
  box-shadow:0 0 10px rgb(170, 170, 170);
}
/* Titde de la page */
#titreC {
    font-size: 500%;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 5%;
}
#textIndex {
    margin-left: 100px;
    margin-right: 100px;
    font-size: 20px;
    text-align: center;
    line-height: 31px;
}
.titrePage {
    margin-left: 4%;
    margin-top: 4%;
}
.description{
  margin-left: 6%;
  margin-right: 25%;
  text-align:start;
  font-size: 20px;
}
.ligneImpair {
    margin-left: 15%;
    margin-top: 5%;
    display: flex;
    justify-content: space-around;
}
.lignePair{
  margin-left: 10%;
  margin-right: 12%;
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
}
.ligneSpecial{
  display: block;
  text-align: center;
  margin-top: 5%;
  margin-right: 15%;
  margin-left: 15%;
}
.droite {
    display: block;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 15%;
}
.gauche{
  display: block;
  margin-top: 2%;
  margin-right: 5%;
  margin-left: 6.5%;
}
.textPage {
    margin-top: 3%;
    font-size: 20px;
}
img {
    border-radius: 8px;
    width: 20%;
}
iframe{
  margin-top: 60px;
  border: none;
}

/*Affichage pour téléphone*/
@media screen and (max-width: 1200px){
  .titrePage{
    text-align: center;
    margin-left: 4%;
    margin-right: 4%;
  }
  .description{
    margin-left: 10%;
    margin-right: 10%;
  }
  .ligneImpair {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    display: flex;
    flex-direction: column-reverse;
  }
  .droite{
    margin-right: 3%;
    margin-left: 3%;
  }
  .lignePair {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
  }
  .gauche{
    margin-left: 3%;
    margin-right: 3%;
  }
  .ligneSpecial{
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
  }
  #titreC{
    font-size: 32px;
  }
  #textIndex{
    margin-left: 3%;
    margin-right: 3%;
  }
  .boutonA{
    border: 1.5px white solid;
    background-color: #003240;
    color: white;
    width: calc(107px);
    height: calc(55px);
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
  }
  img {
    width: 75%;
    margin-left: 12%;
  }
}