/* styles.css */

/* Utilisation de la police d'écriture Arial */
@font-face{
  font-family: 'Clemente';
  src: url(../fonts/ClementePDae-Light.ttf);
}
body {
    font-family: 'Clemente', sans-serif;
    font-weight: 300;
  }
  
  /* Style du menu */
  .menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #00000083;
    overflow: hidden;
    position: fixed; /* Position fixée pour rester en haut de l'écran */
    width: 100%; /* Largeur à 100% de l'écran */
    top: 0; /* Position en haut de l'écran */
    z-index: 1000; /* Assure que le menu reste au-dessus du contenu */
    text-align: center; /* Alignement au centre */
    font-size: 18px;
    font-weight: bold;
  }

  br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 2px; /* change this to whatever height you want it */
}
  
  .menu li {
    display: inline-block; /* Affiche les éléments de menu en ligne */
    margin-right: 5px; /* Espacement entre les éléments de menu */
  }
  
  .menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 20px; /* Espacement à l'intérieur des boutons */
    text-decoration: none;
    border: 2px solid transparent; /* Bordure transparente */
    border-radius: 5px; /* Coins arrondis */
    transition: border-color 0.3s, background-color 0.3s; /* Transition pour une animation fluide */
  }
  
  .menu li a:hover {
    background-color: #555; /* Couleur de fond au survol */
  }
  embed{
    height: 80vh;
  }
  
  /* Style du contenu des pages */
  .content {
    padding-top: 60px; /* Ajout de marge en haut pour éviter que le contenu ne soit caché par le menu */
      }

    .content-box {
      padding-inline: 3vh;
      padding-block: 1vh;
      margin: 3vh;
      background-color: rgba(0, 0, 0, 0.2); /* Couleur de fond légèrement foncée et transparente */
      border-radius: 10px; /* Coins arrondis */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ombre pour des bords lisses */
      font-size: 20px;
      border: 2px solid #FFBD59;
    }
    .content-box p{
      padding-left: 4vh;
      font-size: 18px;
    }
    .content-box h2{
      padding-left: 2vh;
      font-size: 25px;
      text-decoration: underline; /* Ajout du soulignement au survol */      
      text-decoration-color: #3D6DBA; /* Couleur du soulignement */


    }
    .content-box h3{
      padding-left: 3vh;
      font-size: 20px;
    }
    .content-box h1{
      text-decoration: underline; /* Ajout du soulignement au survol */      
      text-decoration-color: #FFBD59; /* Couleur du soulignement */
    }
    .image-centre img{
      display: block;
      margin: 0 auto; /* Centrer les images horizontalement */
      border: 3px solid  #FFBD59;
      border-radius: 20px;
      width: 35vw;
      text-align: center
    } 
    .image-centre table{
      margin: 0 auto; /* Centrer les images horizontalement */
      text-align: center;
      width: 100%;
    }
    .tableau table{
      margin: 0 auto;
      width: 100%;
      text-align: center;
      padding: 20px 10px;
    }
    .tableau2 td {
      width: 50%;
    }
    .tableau3 td {
      width: 33.3%;
    }
    .tableau img{
      width: 20vw;
    }
    
    .float-texte-image img {
      float: right;    
      margin-left: 3vw;
      margin-right: 10%;
      height: 20vh;
    }
    .image-centre-illustration img{
      display: block;
      margin: 0 auto; /* Centrer les images horizontalement */
      border: 3px solid  #FFBD59;
      border-radius: 20px;
      max-width: 70vw;
      max-height: 30vw;
      text-align: center
    } 
    #file{
      float: right;
    }

    #icones{
      width: auto;
      height: 10vw;
      display: block;
      text-align: center;
      margin: 0 auto;
      border-radius: 20px;
      padding-bottom: 10px;
    }
    .content-box a{
      font-size: 18px;
      text-align: center;
    }