/*Louis Berthold 13.01.2025*/
body {
  /*pour que tout sois au centre*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /*pour ne pas avoir la répétition du dégradé*/
  background-repeat: no-repeat;
  min-height: 100vh;
  /*pour avoiur un dégrader*/
  background: linear-gradient(
    0deg,
    rgba(42, 123, 155, 1) 0%,
    rgba(87, 199, 133, 1) 50%,
    rgba(237, 221, 83, 1) 100%
  );
}
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
nav {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  flex-direction: row;
  height: auto;
  /*pour pas avoir trop d'espace entres les lien*/
  width: 40vh;
  align-items: stretch;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-start;
  /*pour pas que les élément sois collé au bord*/
  width: 80%;
}
table {
  border-left: 1px solid black;
  border-right: 1px solid black;
  background: rgba(255, 255, 255, 0.596);
}
th {
  border-bottom: 1px solid black;
}
td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
img{
  /*pour avoir une base pour éviter qu'elle ne sois pas trop grande*/
  height: 10%;
}
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    background: rgba(0, 0, 0, 0.295);
    padding-top: 1%;
    /*pour qu'il sois toute la largeur et tout en bas*/
    width: 100vw;
    bottom: 0%;
  }
p {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px ;
}
h1 {
  font-family: "Tangerine", Arial, Helvetica, sans-serif;
  font-weight: lighter;
  font-size: 54px;
}
h2 {
  font-size: 37px;
  font-family: "Tangerine", Arial, Helvetica, sans-serif;
  text-align: center;
  font-weight: lighter;
}
h3 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
.button {
  border-radius: 8px;
  padding: 2%;
  border: 1px solid rgba(0, 0, 0, 0.294);
  background-color: orange;
  text-decoration: none;
  color: black;
  cursor: pointer;
  transition: all 0.2s;

}
.button:hover{
  color: white;
  background-color: rgb(150, 83, 0);
  border-radius: 70px ;
  transition: all 0.7s;
}
.fotter-btn {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 30%;
  width: 50%;
  align-items: stretch;
}
/*j'ai rajouté Tangerine de google fonts car je la trouvais jolie */
@font-face {
  font-family: "Tangerine";
  font-style: normal;
  font-weight: lighter;
  src: url(https://fonts.gstatic.com/s/tangerine/v18/IurY6Y5j_oScZZow4VOxCZZM.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@media screen and (max-width: 650px) {
    h1{
      font-size: 46px;
    }
    h2{
      font-size: large;
    }
    th{
      font-size: medium;
    }
    td{
        font-size: small;
    }
    p{
      font-size: small;
    }
    /*pour que le footer sois en colone su téléphone*/
    .fotter-btn {
    width: 20%;
    height: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    height: auto;
    align-items: stretch;
    }
    .fotter-btn a{
        text-align: center;
        border: 1px solid black;
        margin: 2%;

    }
}
.ActiveBtn{
  /*pour avoir un halo autour et à l'intérieru de la page active*/
  box-shadow: 0 0 20px 5px #e67e30, /* halo extérieur bleu clair */
              0 0 40px 10px #fea347, /* halo plus large */
              inset 0 0 10px #af7132; /* lumière intérieure blanche */
}
.row{
    display: flex;
    flex-direction: row;
    color: aliceblue;
}
.row p {
  font-size: xx-small;
}
/*ça c'est si je veut améliorer ce site dans le futur et que je veux mettre un boutton darck-mode*/
/*.noir-blanc{
  color: aliceblue;
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,
   rgba(133, 133, 133, 1) 100%);
}*/
/*ça c'est pour avoir une transition entre les pages mais se n'est pas trop supporté*/
/*@view-transition{
  navigation: auto;
}*/