/* Style pour le corps */

body {
    background-image: url('../image/fondecran.jpeg'); /* ou .png, .webp selon ton format */
    background-size: cover; /* pour que l'image couvre tout l'écran */
    background-position: center; /* pour centrer l'image */
    background-repeat: no-repeat; /* pour éviter que l'image se répète */
  }

/* Style pour les images */
img {
    max-width: 50px; /* Réduction de la taille */
    max-height: 50px; /* Réduction de la taille */
    height: auto;  
    width: auto;
    padding: 10px;
    margin-left: 50px; /* Décalage à gauche */
    text-align: left; /* Alignement à gauche */
    display: inline-block; /* Meilleure intégration */
}

/* Style pour les tableaux */
td, tr {
    border-color: rgb(255, 0, 0); /* Bordure rouge */
    border-style: solid;
    border-width: thin; /* Bordure fine */
    width: 300px;
    height: 150px; /* Ajustement de la hauteur des cellules */
    padding: 10px; /* Espacement interne */
    text-align: center;
    background-color: #fff; /* Fond blanc pour contraste */
}

/* Style de la navbar */
.navbar {
    background-color: #444; /* Couleur de fond neutre */
    overflow: hidden; /* Permet de cacher les éléments qui débordent */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effet de profondeur */
}

/* Style des liens dans la navbar */
.navbar ul {
    list-style-type: none; /* Supprime les puces de la liste */
    margin: 0;
    padding: 0;
    display: flex; /* Aligne les éléments horizontalement */
    justify-content: center; /* Centrage de la navbar */
}

.navbar ul li {
    margin: 0;
}

.navbar ul li a {
    display: block;
    color: #fff; /* Texte blanc */
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px; /* Taille de texte équilibrée */
    transition: background-color 0.3s, color 0.3s; /* Animation au survol */
}
.navbar ul li a:hover {
    background-color: #1e90ff; /* Couleur dynamique */
    color: #fff; /* Conserve le texte blanc */
}
/* Style pour les paragraphes */
p {
    background-color: #fafafa; /* Fond doux */
    width: 300px;
    border: 5px solid #1e90ff; /* Bordure fine et élégante */
    padding: 20px;
    margin: 20px auto; /* Centrage horizontal */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effet de profondeur */
}

/* Style pour le titre h2 */
h1 {
    text-align: center; /* Centrer le texte */
    margin: 0 auto; /* Centrage horizontal */
    font-size: 24px; /* Taille du texte */
    color: #000000; /* Couleur du texte */
}

/* Ajout de transitions pour une expérience fluide */
* {
    transition: all 0.3s ease-in-out;
}