header {
    display: flex;
    position: relative;
    background: linear-gradient(to bottom, rgb(39, 39, 39), black);
    height: 60px;
    font-size: 15px;
}

.header-texte {
    display: flex;
    color: white;
    width: 95%;
    justify-content: space-between;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 30px;
    margin-top: auto;
    margin-bottom: auto;
}

.header-section {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    height: 20px;
}

video {
    width: 100%;
}

#header-name {
    margin-left: 30px;
}

.header-section a {
    color: rgb(172, 172, 172); /* Couleur par défaut */
    text-decoration: none; /* Supprime le soulignement */
}

.header-section a:visited {
    color: rgb(172,172,172); /* Empêche le changement de couleur après le clic */
}

.header-section a:active {
    color: rgb(61, 61, 61); /* Pendant le clic */
}

.header-section a:focus {
    color: white; /* Quand le lien est sélectionné (cliqué) */
}

.header-section a:hover {
    color: rgb(255, 255, 255); /* Facultatif : Change la couleur au survol */
}

@media screen and (min-width: 1910px) and (max-width:2549px) {
    
    #header-name {
        font-size: 25px;   
    }

    .header-section a {
        font-size: 25px;
    }

    .header-section {
        width: 600px;
    }
}

@media screen and (min-width: 2550px) and (max-width: 2700px) {
    
    #header-name {
        font-size: 30px;   
    }

    .header-section a {
        font-size: 30px;
    }

    .header-section {
        width: 600px;
    }
}

@media screen and (min-width : 1440px) and (max-width : 11525px) {
    #header-name {
        font-size: 17px;  /* 30px * 0.567 */
    }
    
    .header-section a {
        font-size: 17px;  /* 30px * 0.567 */
    }
    
    .header-section {
        width: 340px; /* 600px * 0.567 */
    }    
}

@media screen and (min-width : 1020px) and (max-width : 1100px) {
    #header-name {
        font-size: 12px;  /* 30px * 0.4 */
    }
    
    .header-section a {
        font-size: 12px;  /* 30px * 0.4 */
    }
    
    .header-section {
        width: 240px; /* 600px * 0.4 */
    }    
} 

@media screen and (min-width : 758px) and (max-width : 1019px) {
    #header-name {
        font-size: 9px;  /* 30px * 0.3 */
    }
    
    .header-section a {
        font-size: 9px;  /* 30px * 0.3 */
    }
    
    .header-section {
        width: 180px; /* 600px * 0.3 */
    }
    
}

@media screen and (min-width : 1366px) and (max-width : 1439px) {
    #header-name {
        font-size: 16px;  /* 30px * 0.533 */
    }
    
    .header-section a {
        font-size: 16px;  /* 30px * 0.533 */
    }
    
    .header-section {
        width: 320px; /* 600px * 0.533 */
    }
}

@media screen and (min-width : 1526px) and (max-width : 1910px) {
    #header-name {
        font-size: 16px;  /* 30px * 0.533 */
    }
    
    .header-section a {
        font-size: 16px;  /* 30px * 0.533 */
    }
    
    .header-section {
        width: 320px; /* 600px * 0.533 */
    }
    
}