/* Supprime les marges et le padding par défaut du corps de la page */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

header {
    height: 46px;
    background-image: url('../images/headerbg.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    position: relative;
    
}

.header-content {
    width: 1024px; /* Largeur fixe pour le contenu principal */
    margin: 0 auto; /* Centre la div */
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne les éléments à gauche */
    position: relative;
}

.logo-link {
    text-decoration: none; /* Supprime la décoration de texte par défaut du lien */
    color: inherit; /* Hérite de la couleur de texte du parent */
    display: flex; /* Utilise flexbox pour aligner le contenu du lien */
    align-items: center; /* Centre verticalement le contenu du lien */
    height: 100%; /* Prend toute la hauteur du header-content */
}

.logo {
    display: flex;
    align-items: center; /* Centre verticalement l'image */
    height: 100%; /* Prend toute la hauteur du header-content */
    width: 96px; /* Largeur fixe pour correspondre à la taille de l'image */
}

.logo img {
    display: block; /* Supprime l'espace en dessous de l'image */
    width: 100%; /* Assure que l'image prend toute la largeur de la div */
    height: auto; /* Ajuste la hauteur de l'image proportionnellement */
    transform: translateY(-6px); /* Déplace l'image de 6 pixels vers le haut par défaut */
    transition: transform 0.2s ease; /* Ajoute une transition douce pour le déplacement */
}

.logo img:hover {
    transform: translateY(-8px); /* Déplace l'image de 2 pixels supplémentaires vers le haut au survol */
}

.header-text {
    font-family: Arial, sans-serif; /* Utilise la police Arial */
    font-size: 18pt; /* Taille de la police */
    color: #5a5a5a; /* Couleur du texte */
    margin-left: 17px; /* Espace de 17 pixels à gauche du texte */
    position: relative; /* Permet l'utilisation de la propriété top */
    top: -5px; /* Remonte le texte de 5 pixels */
}

.home-link {
    margin-left: 17px; /* Espace de 17 pixels à gauche du bouton */
    display: flex; /* Utilise flexbox pour aligner le contenu du lien */
    align-items: center; /* Centre verticalement le contenu du lien */
    height: 100%; /* Prend toute la hauteur du header-content */
}

.home-link img {
    display: block; /* Supprime l'espace en dessous de l'image */
    width: 20px; /* Largeur de l'image */
    height: 18px; /* Hauteur de l'image */
    transform: translateY(-6px); /* Déplace l'image de 5 pixels vers le haut */
}

.home-link:hover img {
    content: url('../images/homeover.png'); /* Change l'image au survol */
}

.clock-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 1000;
    padding: 10px;
}

.clock {
    font-family: 'Arial', sans-serif; /* Utilise la police Arial */
    font-weight: 400; /* Assure que le style est "Regular" */
    font-size: 10pt; /* Taille de la police */
    color: #5a5a5a; /* Couleur du texte */
    user-select: text; /* Permet la sélection du texte */
    transform: translateY(-6px); /* Déplace l'horloge de 6 pixels vers le haut */
    letter-spacing: -1px; /* Ajuste l'espacement entre les caractères */
}

.share-container {
    width: 70px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-6px); /* Déplace la div de 10 pixels vers le haut */
    position: absolute; /* Positionne la div de manière absolue */
    right: 0; /* Aligne la div à droite du contenu du header */
}

.share-text {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    color: #5a5a5a;
}

.share-image {
    width: 12px; /* Ajustez selon la taille de votre image */
    height: 12px; /* Ajustez selon la taille de votre image */
    margin-left: 3px; /* Espace entre l'image et le texte */
}

.share-container:hover .share-text {
    color: white; /* Change la couleur du texte en blanc au survol */
}

.share-container:hover .share-image {
    content: url('../images/partagerover.png'); /* Change l'image au survol */
}

.slash {
    font-family: Arial, sans-serif;
    font-size: 18pt; /* Taille de la police pour le slash */
    color: #5a5a5a;
    margin-left: 17px; /* Espace entre le logo et le slash */
    transform: translateY(-5px); /* Déplace le slash de 6 pixels vers le haut */
}

#share {
    cursor: pointer;
    color: white;
    user-select: none; /* Empêche la sélection du texte */
}

.share-popup {
    display: none; /* Masque le pop-up par défaut */
    position: absolute;
    width: auto; /* Ajuste la largeur en fonction du contenu */
    height: 40px; /* Ajuste la hauteur en fonction du contenu */
    background-color: #040e1b;
    padding: 5px; /* Ajoute un padding pour espacer les images des bords */
    top: 45px; /* Déplace le pop-up 34px en dessous du haut du header (24px + 10px) */
    right: 0; /* Aligne à droite du contenu du header */
    transform: translateX(0); /* Aucune transformation horizontale */
    z-index: 10; /* Assure que le pop-up est au-dessus des autres éléments */
    border-radius: 0; /* Retire les coins arrondis */
    display: flex; /* Utilise flexbox pour aligner les images */
    align-items: center; /* Centre verticalement les images */
}

/* Définir la taille des icônes de partage */
.share-icon img {
    width: 20px;
    height: 20px;
    margin: 5px; /* Marge à droite de chaque image */
    padding-top: 2px;
    
}

.share-icon:last-child {
    margin-right: 0; /* Supprime la marge à droite pour la dernière image */
}

.share-icon:hover {
    transform: translateY(-2px); /* Déplace l'image de 2 pixels vers le haut au survol */
    transition: transform 0.2s ease; /* Ajoute une transition douce pour le déplacement */
}