body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f2f5;
    color: #333;
    font-size: medium;
  }
  
header {
    background: rgb(8, 53, 94);
    color: white;
    padding-left: 1em;
    padding-top: 0.8em;
    text-align: left;
    font-size: 1.3em;
    /*position: fixed; /* Rend le header fixe */
    /*top: 0; /* Positionne en haut de la page */
    /*width: 100%; /* S'assure qu'il occupe toute la largeur */
    /*z-index: 1000; /* Place le header au-dessus des autres éléments */
  }

/* Responsive layout on smaller screens (600px wide or less) */
@media screen and (max-width: 620px) {
  header {
    padding-left: 0;
    text-align: center;
  }
}

  nav {
    background: rgb(8, 53, 94);
    /*padding: 2em;*/
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    /*position: fixed; /* Rend la barre de navigation fixe */
    /*top: 1.3em; /* Ajusté en fonction de la hauteur du header */
    /*width: 100%; /* S'assure qu'elle occupe toute la largeur */
    /*z-index: 999; /* Place la navigation au-dessus des autres éléments */
  }

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
  }
  
nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
  
nav a:hover {
    text-decoration: underline;
  }
  
h1 {
    font-size: larger;
    font-weight: bold;
    margin: 0;
    color: rgb(8, 53, 94);
  }
 
main {
    /*padding-top: 20em; /* Espace pour le header fixe */
    padding: 2em;
    /* text-align: center; */
  }
 
/* Responsive layout on smaller screens (600px wide or less) */
@media screen and (max-width: 620px) {
  main {
    padding: 0.5em;
  }
}

* {
  box-sizing: border-box;
}

.left {
  float: left;
  background-color: #e5e5e5;
  width: 40%;
  padding: 15px;
  margin-top: 7px;
  margin-left: 10%;
  text-align: left;
}

.right {
  float: left;
  width: 40%;
  padding: 15px;
  /*margin-top: 7px;*/
}

ul {
  padding: 0;
  line-height: 1.2em;
  margin-inline-start: 1.2em;
  margin-block-start: 0;
  margin-block-end: 0;
}

li {
  font-size: smaller;
}

.tarif_def {
  font-weight: bold;
  color: rgb(12, 70, 123);
}

.tarif_ext {
  color: rgba(182, 47, 2, 0.623);
  font-weight: bold;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .left, .right, .bloc_milieu {
    width: 100%;
  }
  .left {
    margin-left: 0;
  }
}

/* garder les deux blocs keyframes ci-dessous pour assurer la compatilibité mobiles et desktop */
@-webkit-keyframes clignoter {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

@keyframes clignoter {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

.clignotant {
    color: rgb(8, 53, 94);
    font-weight: bold;
    font-style: italic;
    -webkit-animation: clignoter 2.5s infinite; /* Préfixe pour Chrome/Android */
    animation: clignoter 2.5s infinite;
}

footer {
    background: rgb(188, 211, 224);
    text-align: center;
    padding: 1em;
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 2em;
  }

footer a {
    color: rgba(0, 0, 0, 0.5);
    /*text-decoration: none;*/
  }