/* ===================================================
   Styles de l'en-tête
   =================================================== */

/* Conteneur principal de l'en-tête */
/* --------------------------------------------------- */
header {
    position: sticky;
    /* Fixation lors du défilement */
    top: 0;
    width: 100%;
    /* Couleur principale du thème */
    color: #fff;
    /* Ombre portée subtile */
    z-index: 100;
}
#header {
    background: #005f99;
    padding: 0.8rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Titre principal */
/* --------------------------------------------------- */
#header h1 {
    text-align: center;
    font-weight: 700;
    /* Épaisseur de police bold */
    font-size: 1.5rem;
    /* Taille relative pour le responsive */
}
/* Barre de navigation */
/* --------------------------------------------------- */
#header nav {
    text-align: center;
    margin-top: 0.4rem;
    /* Espacement depuis le titre */
}
/* Liens de navigation */
/* --------------------------------------------------- */
#header nav a {
    margin: 0 0.8rem;
    /* Espacement horizontal entre les liens */
    text-decoration: none;
    color: #f0f8ff;
    /* Nuance légèrement bleutée pour le contraste */
    font-weight: 500;
    /* Demi-bold pour la lisibilité */
    padding: 0.2rem 0.5rem;
    /* Zone cliquable agrandie */
    border-radius: 4px;
    /* Coins légèrement arrondis */
    transition: background 0.3s;
    /* Animation fluide */
}

/* État au survol des liens */
/* --------------------------------------------------- */
#header nav a:hover {
    background: rgba(255, 255, 255, 0.2);
    /* Survol visible mais discret */
    /* Alternative accessible : augmentation du contraste */
}
#up_image {
  width: 100%;
  height: auto;
  display: block;
}