/*
    Auteur: Matteo Marinazzo
    Date: 27.02.2023
    Description: styles pour mon site internet.
*/

/*affichage de l'écran si il fait au moins 600 pixels*/
@media screen and (min-width: 600px) {
  /*police d'écriture en Helvetica*/
  body {
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(#f0fcdb, #dcf1b4);
  }
  /*mise en forme du titre*/
  header {
    display: flex;
    justify-content: center;
    size: 3em;
  }
  /*mise en forme du menu*/
  nav {
    background: #afd7ee;
    display: flex;
    border-radius: 20px;
  }
  nav>div>a {
    text-decoration: none;
    color: black;
  }

  #menuActif {
    background: #029bf3;
    border-bottom: 20px solid #029bf3;
    border-top: 20px solid #029bf3;
    margin: auto;
    border-radius: 15px;
  }

  .menu:hover {
    background: #029bf3;
    border-bottom: 20px solid #029bf3;
    border-top: 20px solid #029bf3;
    margin: auto;
    box-shadow: 0px 0px 10px gray;
    border-radius: 15px;
  }

  div {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  h2 {
    text-align: center;
  }
  h3 {
    margin-left: 20px;
  }
  .gauche {
    margin-left: 100px;
    text-align: left;
    text-decoration: underline;
  }
  h4 {
    text-align: center;
  }
  h5{
    text-align: center;
}

  /*mise en forme des articles*/
  article {
    margin-left: 100px;
    margin-right: 100px;
    border: 2px solid black;
    border-radius: 50px;
  }
  .paragraphe {
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  #paragraphe1 {
    margin-top: 60px;
  }
    .list_et_image {
      display: flex;
      flex-direction: row;
    }


    .text_et_image { 
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .text{
        text-align: center;
        margin-left: 10%;
        margin-right: 20px;
    }
  /*mise en forme des images */
  .image {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 200px;
    margin-bottom: 20px;
  }

  .image_gauche {
    margin-left: 20px;
    width: 200px;
    margin-bottom: 20px;
  }
  .image_droite{
    width: 200px;
    margin-right: 10%;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .images {
    width: 200px;
    margin-bottom: 20px;
  }


  .cont_img {
    display: flex;
    justify-content: center;
    gap: 2vw;
  }
  .video {
    display: flex;
    justify-content: center;
  }

  p {
    margin-left: 20px;
  }
  .centre {
      text-align: center;
  }

  ul {
    margin-left: 20px;
  }
  li {
    margin-top: 5px;
  }

  #heure {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: large;
    font-weight: bolder;
}
}

/*affichage si l'écran fait moins de 600 pixel*/
@media screen and (max-width: 600px) {
  /*police d'écriture en Helvetica*/
  body {
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(#f0fcdb, #dcf1b4);
  }
  /*mise en forme du titre*/
  header {
    text-align: center;
    size: 3em;
  }

  /*mise en forme du menu*/
  nav {
    background: #afd7ee;
    text-align: center;
    border-radius: 15px;
  }

  #menuActif {
    text-align: center;
    border-bottom: 10px solid #029bf3;
    border-top: 10px solid #029bf3;
    background: #029bf3;
    border-radius: 15px;
  }
  .menu {
    border-bottom: 10px solid #afd7ee;
    border-top: 10px solid #afd7ee;
    border-radius: 15px;
  }

  .menu:hover {
    text-align: center;
    background: #029bf3;
    border-bottom: 10px solid #029bf3;
    border-top: 10px solid #029bf3;
    margin: auto;
    box-shadow: 0px 0px 10px gray;
    border-radius: 15px;
  }
  nav>div>a {
    text-decoration: none;
    color: black;
  }
  h1{
    text-align: center;
  }

  h2 {
    text-align: center;
  }
  h3 {
    text-align: center;
  }
  h4{
    text-align: center;
  }
  h5{
    text-align: center;
  }

  /*mise en forme des articles*/
  article {
    margin: 50px;
    margin-left: 10%;
    margin-right: 10%;
    border: 2px solid black;
    border-radius: 50px;
  }
  .paragraphe {
    text-align: center;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .text_et_image {
    text-align: center;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  p{
    margin: 20px;
  }

  .image{
    width: 40%;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 10px;
  }
  .image_gauche {
    width: 40%;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
  }
  .image_droite {
    width: 40%;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-top: 20px;
  }
  .cont_img{
    text-align: center;
  }
  .images{
    width: 40%;
    margin-bottom: 10px;
  }

  .img_tableau{
    display: none;
}
  .video > iframe {
    width: 221px;
  }
  .video {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
  li {
    margin-top: 5px;

  }
}