/* HEADER */

/* Header général */
#header-sn {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;

}


.header-left {
    display: flex;
    justify-self: start;
    align-items: center;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.header-left a {
    color: #424141;
    padding: 20px 0px;
    font-size: 21px;
    letter-spacing: 0.5px;
}

.header-left a:hover {
    color: #000;
}


/* Bandeau EN LIVE STREAM ----------------------------- */
.header-center {
    justify-self: center; 
    text-align: center;
    font-size: 0.9rem;
}
/* ---------------------------------------------------- */

.header-right {
    display: flex;
    justify-self: center;
    align-items: center;
    /* background:red; */
    gap: 20px;
}

.header-right #navigation-desktop {
    display: flex;
}

.header-right #navigation-desktop .menu-menu-principal-container {
    display: flex;
    width: fit-content;
}

.header-right #navigation-desktop .menu-menu-principal-container ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header-right #navigation-desktop .menu-menu-principal-container ul li {
    margin-left: 30px;
    text-transform: uppercase;
    padding: 20px;
}

.header-right #navigation-desktop .menu-menu-principal-container ul li a {
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #424141;
}

.header-right #navigation-desktop .menu-menu-principal-container ul li:hover a {
    color: #000;
}


.header-logo {
    display: flex;
    align-items: center;
    height: 80px;
}

.header-logo h1 {
    font-size: 21px;
    margin: 0px;
    padding: 0px;
}








/* ========================================
   LEGACY (gardé commenté)
======================================== */

/* Bandeau EN LIVE STREAM (exemple)

#live-stream {
    display: flex;
    align-items: center;
    height: 50px;
    background: black;
    padding: 0 30px;
}

#live-stream-title {
    color: #FFF;
}

#live-stream a {
    padding: 5px 10px;
    margin: 0 10px;
    background: red;
    color: #FFF;
}
*/






/* Icône burger */
.icon-burger {
    display: flex;
    height: 80px;
    cursor: pointer;
    display:flex;
    align-items: center;
    text-transform: uppercase;
    font-size:21px;
    padding-right: 50px;
}

.burgerOpen {
    background-image: url("../assets/icons/black-burger-open-icon.svg");
    background-size: 34px 34px;
    background-repeat: no-repeat;
    background-position: center right;
}

.burgerClose {
    background-image: url("../assets/icons/black-burger-close-icon.svg");
    background-size: 34px 34px;
    background-repeat: no-repeat;
    background-position: center center;
}






/* ========================================
   RESPONSIVE
======================================== */


/* option responsive : réduire le nombre de colonnes sur petits écrans */
@media (max-width: 1400px){  }

@media (max-width: 1200px){ 
    #header-sn { width: 94%;padding-left:0;padding-right:0;}

}

@media (max-width: 768px){
    #header-sn { width:94%;padding-left:0;padding-right:0;height:60px;}
    .icon-burger{width:60px;height:60px;}
    
    .navigation-user-menu{display:none!important;}

    .header-left a{font-size:16px;line-height: initial;padding-left: 10px;}

    .header-right{gap:0px;}

    #overlay-navigation .overlay-header{width:100%!important;}
    #overlay-navigation .overlay-title{margin-left:30px!important;}
}

@media (max-width: 480px){

    #header-sn { width: 94%;padding-left:0;padding-right:0;}

    .navigation-user-menu{display:none!important;}
    .header-left a{font-size:14px;}

}