html {
 margin: 0;
 padding: 0;
 font-size: 100%; /* 1rem = 16px par défaut */
}

body {
 background-color: white; 
 font-family: Helvetica, sans-serif;
 font-variant: small-caps;
 color: black;
 padding: 0;
 margin: 0;
 font-size: 1rem; /* Utilisation de rem au lieu de pourcentages */
}

h1 {
 color: rgb(21,37,50); 
 text-align: center;
 margin: 0;
 padding:0;
}

.titre {
 font-size: 1.5rem; 
 color: rgb(21,37,50);
 text-align: left;
 margin-left: auto;
 margin-right: auto;
 margin-top: 1%;
 margin-bottom: 1%;
 width: 82%;
}

h2 {
 font-size: 1rem; /* Utilise des rem pour adapter */
 text-align: center; 
 padding: 0.1%;
 margin: 0;
 color: #333333;
 font-weight: lighter;
}

nav {
 font-size: 1rem; 
 color: rgb(21,37,50);
 text-align: center; 
 background-color: #F9F9F9;
 margin: 0;
 padding: 0;
}

ul {
 margin-top: 1%;
 margin-bottom: 0.5%;
 padding: 0;
}

header {
 position: sticky;
 font-size: 1rem;
 width: 100%;
 background-color: white;
 margin: 0;
 margin-bottom: 1%;
 padding: 0;
 top: 0;
 z-index: 2;
}

.liseret {
 height: 5px; /* Épaisseur du liseret */
 background-color: rgb(21,37,50); /* Couleur bleue */
 margin: 0; /* Espace entre le liseret et le bandeau d'en-tête */
}

.logo {
 height: 5em;
}

.corps {
 width: 100%;
 z-index: 1;
 font-size: 1rem;
}

.accueil {
 width: 32%; /* Chaque image occupe environ 1/3 de la largeur du conteneur */
 height: auto; /* Maintient le ratio d'aspect des images */
 display: inline-block; /* Garde les images comme des blocs inline */
 margin: 0; /* Supprime les marges autour des images */
 padding: 0;
}

#accueil {
 display: flex; /* Utilise Flexbox pour aligner les images sur une ligne */
 justify-content: space-between; /* Espace égal entre les images */
 align-items: center; /* Centre les images verticalement si elles ont des hauteurs différentes */
 max-width: 1200px; /* Limite la largeur maximale du conteneur */
 margin: 0 auto; /* Centre le conteneur */
 padding-top: 0.1%;
 padding-bottom: 0.1%;
 height: auto; /* Adapte la hauteur du conteneur automatiquement */
 gap: 2%; /* Ajoute un espace entre les images */
}

.texte-accueil {
 text-align: center; /* Centre le texte */
 width: 82%; /* Limite la largeur du texte à 70% de la page */
 margin: 1% auto 0; /* Centre horizontalement et ajoute un espace au-dessus */
 font-size: 1rem;
 line-height: 1.5; /* Améliore la lisibilité du texte */
}

nav ul li {
 display: inline-block;
 margin-left: 1%;
 margin-right: 1%;
 padding: 0.2%;
 font-weight: lighter;
 font-size: 1rem;
}

nav ul li:hover {
 text-decoration-line: underline;
}

a:link {
 color: rgb(21,37,50);
 text-decoration-line: none;
}

a:visited {
 color: rgb(21,37,50);
}

.standard {
 margin: auto;
 width: 82%;
 font-variant: normal;
 text-align: justify;
 margin-top: 1%;
 margin-bottom: 1%;
 padding: 0.2%;
 font-size: 1rem !important;
}

#piedpage {
 font-size: 0.8rem !important; 
 text-align: center;
 margin-top: 5%;
}

/* Ajout des media queries pour rendre le texte responsive */

@media (max-width: 768px) {
  body {
    font-size: 0.9rem; /* Réduit légèrement la taille pour les tablettes */
  }
  h1, .titre, h2 {
    font-size: 1rem; /* Taille adaptée pour titres sur écran plus petit */
  }
  nav, .standard, .texte-accueil {
    font-size: 0.9rem; /* Réduit la taille des textes pour petit écran */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.8rem; /* Encore plus petit pour les smartphones */
  }
  h1, .titre, h2 {
    font-size: 1rem; /* Taille réduite pour smartphone */
  }
  nav, .standard, .texte-accueil {
    font-size: 0.8rem; /* Taille de texte plus petite pour un affichage mobile */
  }
}