body {
  background-color: orange;
  font-size: 1em;
  margin: 8px;
}

header {
  text-align: center;
  height: 200px;
}

header img {
  height: 200px;
  border: 0;
}

.mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Styles spécifiques pour les écrans de 768 pixels de large ou moins (smartphones) */
  /* Ajustez votre style ici */
}


.centered-text {
    text-align: center;
    text-decoration: underline;
}

/* Dans votre fichier style.css ou dans une balise <style> dans le <head> de votre page */
.diaporama img {
    max-width: 100%; /* La largeur maximale est de 100% de la largeur de son conteneur parent */
    height: auto; /* La hauteur est ajustée proportionnellement pour éviter la déformation de l'image */
}

body {
    text-align: center;
}

.centered-content {
    text-align: center;
    text-decoration: underline; /* Vous pouvez également ajouter d'autres styles ici */
}
/* Cible les écrans ayant une largeur maximale de 480 pixels (par exemple, les smartphones) */
@media screen and (max-width: 480px) {
    .diaporama img {
        max-width: 100%; /* Ajustez la largeur de l'image comme souhaité pour les smartphones */
        height: auto;
    }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

nav {
  display: inline-block;
  width: 100%;
  background-color: #90EE90;
  font-size: 0.9em;
}

section {
  display: inline-block;
  width: 80%;
  text-align: justify;
  font-size: 1.25em;
  padding-left: 5px;
  margin-left: 15px;
}

footer {
  font-size: 0.9em;
  width: 57.4%;
  height: 8em;
  padding-left: 10px;
  float: right;
  bottom: 0;
  background-color: #87CEFA;
}

img {
    border: 0;
}

hr {
    border-top: 2px solid red; /* Définissez la couleur souhaitée ici */
}

En utilisant cette approche, vous pouvez définir la taille, la couleur et d'autres styles de votre ligne horizontale en utilisant des règles CSS, ce qui est conforme aux normes HTML5 et CSS modernes.



@media screen and (max-width: 767px) {
  .mobile {
    display: initial;
  }
}

.centered-text {
    text-align: center;
}

/* Masquer ou afficher certains éléments pour les petits écrans */
@media (max-width: 767px) {
  .hide-on-small-screen {
    display: none;
  }

  /* Afficher certains éléments uniquement pour les petits écrans */
  .show-on-small-screen {
    display: block;
  }

  /* Redimensionner les images pour les petits écrans */
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .container {
    display: block;
  }
}

a {
  font-size: 18px;
}

/* Agrandir la taille des liens pour les petits écrans */
@media (max-width: 767px) {
  a {
    font-size: 18px;
  }
}

/* Autres corrections et modifications doivent être effectuées en fonction de votre conception et de vos besoins spécifiques. */

/* Fin du code CSS */
