/* Bloc principal */ 
#principal 
{ 
 padding-left: 0px; 
 padding-right: 0px; 
 padding-top: 20px; 
 padding-bottom: 20px; 
 background-color: rgb(255, 255, 255); 
 border-radius: 10px 10px 10px 10px; 
} 
/* Titre */ 
#b1 
{ 
 position: relative; 
 top: 0px; 
 margin: 0px; 
 padding: 25px; 
 background-color: rgb(118, 193, 255); 
 text-align: center; 
 border-radius: 0px 0px 0px 0px; 

} 
#b1 h1
{
color: rgb(253, 253, 253);
} 
/* Liens permanents */ 
#b2 
{ 
 position: absolute; 
 left: 10px; 
 top: 40px; 
 padding: 0px; 
 background-color: rgb(118, 193, 255); 
 text-align: center; 
 border-radius: 20px 20px 20px 20px; 

}
/* Tableaux */
#b3
{
    
}

#b3 h1
{
    font-size: 14px;
    color: gray;
    font-style: italic;
    
}
#b3 h2
{
    font-size: 15px;
}
/* Réinitialisation de base */

body 
{
  margin: 0;
  font-family: Arial, sans-serif;
}
 
/* --- BARRE DE NAVIGATION FIXE --- */

.navbar 
{
  position: fixed; /* reste visible même quand on défile */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #003366;
  padding: 12px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
}
 
/* Liste horizontale */

.navbar ul
{
  list-style: none;
  display: flex;
  justify-content: center; /* centre les liens */
  gap: 40px;
  margin: 0;
  padding: 0;
}
 
/* Liens de navigation */

.navbar a 
{
  color: white;
  text-decoration: none;

  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s;
}
 
.navbar a:hover 
{
  color: #ffcc00; /* effet au survol */
}
 
/* --- CONTENU PRINCIPAL --- */

main 
{
  padding-top: 80px; /* pour ne pas cacher le contenu sous la barre fixe */
}
 
/* Mise en forme des sections */

section 
{
  padding: 60px 20px;
  min-height: 400px;
  border-bottom: 1px solid #ccc;
}
#b4
{
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url('https://www.iim.fr/ecole-web/wp-content/uploads/2023/01/1046444.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
  
#b4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* assombrissement à 50% */
    z-index: 0;
  }
  .image-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%); /* assombrissement */
  }