/*:root {
    --color-announcement-background: #282a2d;
    --color-announcement-text: white;
}*/

/* .group{                          Ancien group regroupant les icones et le logo tranquil it
    display:flex;
    gap:4rem;
    align-items: center;
}  */

.announcement-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Répartit les éléments aux extrémités */
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: var(--color-announcement-background, #e2001a);
}

/* Version actuelle de SAMBA */
.samba_version {
    font-weight: bold;
    font-size: 1rem;
    color: white;
    margin: 0 1rem;
    display: flex;
    align-items: center;
}

/* Icônes and combobox (left) */
.left-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: auto;
}

/* Logo Tranquil IT (right) */
.tis-logo {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.tis-logo img {
    height: 2rem;
    display: block;
}

select{
    -webkit-appearance: none; /*remove native css of select element*/
    padding: .4rem .50rem;
}

select:hover{
    cursor: pointer;
}

img:hover{
    cursor: pointer;
}

/* 
---------------------------------------------------------------------------------------------------------------------------------------------------
                                                    ANNONCEMENT BAR IN LIGHT MODE 
---------------------------------------------------------------------------------------------------------------------------------------------------
*/

body[data-theme="light"] .combobox select{
    color: white;
    background: transparent;
    background-image: url("../down-arrow.svg");
    background-repeat: no-repeat;
    outline: solid 2px transparent;
    outline-offset: -5px;
    transition: .2s ease-in;
} 

body[data-theme="light"] .combobox select:hover{
    cursor: pointer;
}

body[data-theme="light"] .combobox_version select{
    background-color: #e2001a;
    width: 4rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: left 2.6rem center;
}

body[data-theme="light"] .combobox_page select{
    width: 10rem;
    background-position: left 8.2rem center;
} 

body[data-theme="light"] .combobox_lang select{
    width: 3.5rem;
    background-position: left 2.2rem center;
} 

body[data-theme="light"] #language{
    background-color: #e2001a;
    color: white;
    border: none;
    font-weight: bold;
}

body[data-theme="light"] #select-page-mobile{
    display: none;
    background-color: #e2001a;
    color: white;
    border: none;
    font-weight: bold;
} 

body[data-theme="light"] .announcement {
    align-items: center;
    background-color: #e2001a; /* Assure un fond uniforme */
    color: white; /* Ajuste la couleur du texte */
    display: flex;
    height: fit-content;
    margin: 0; /* Supprime les marges externes */
    padding: 0.5rem; /* Supprime les marges internes */
    box-sizing: border-box; /* Assure une bonne gestion des dimensions */
    border: none; /* Supprime les bordures */
    position: fixed;
    z-index: 1000;
    width: 100%;
}

body[data-theme="light"] .announcement p{
    flex: 1; 
    text-align: center; 
    font-size: 1.2rem; 
    font-weight: bold; 
}

body[data-theme="light"] .announcement-content{
    margin: 0;
    padding: 0 1rem; 
    background-color:#e2001a; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    box-sizing: border-box;
}

/* 
---------------------------------------------------------------------------------------------------------------------------------------------------
                                                        ANNONCEMENT BAR IN AUTO MODE 
---------------------------------------------------------------------------------------------------------------------------------------------------
*/

body[data-theme="auto"] .combobox select{
    color: white;
    background: transparent;
    background-image: url("../down-arrow.svg");
    background-repeat: no-repeat;
    outline: solid 2px transparent;
    outline-offset: -5px;
    transition: .2s ease-in;
} 

body[data-theme="auto"] .combobox select:hover{
    cursor: pointer;
}

body[data-theme="auto"] .combobox_version select{
    background-color: #1a1c1e;
    width: 4rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: left 2.6rem center;
}

body[data-theme="auto"] .combobox_page select{
    width: 10rem;
    background-position: left 8.2rem center;
} 

body[data-theme="auto"] .combobox_lang select{
    width: 3.5rem;
    background-position: left 2.2rem center;
} 

body[data-theme="auto"] #language{
    background-color: #1a1c1e;
    color: white;
    border: none;
    font-weight: bold;
}

body[data-theme="auto"] #select-page-mobile{
    display: none;
    background-color: #1a1c1e;
    color: white;
    border: none;
    font-weight: bold;
} 

body[data-theme="auto"] .announcement {
    align-items: center;
    background-color: #1a1c1e; /* Assure un fond uniforme */
    color: white; /* Ajuste la couleur du texte */
    display: flex;
    height: fit-content;
    margin: 0; /* Supprime les marges externes */
    padding: 0.5rem; /* Supprime les marges internes */
    box-sizing: border-box; /* Assure une bonne gestion des dimensions */
    border: none; /* Supprime les bordures */
    position: fixed;
    z-index: 1000;
    width: 100%;
}

body[data-theme="auto"] .announcement p{
    flex: 1; 
    text-align: center; 
    font-size: 1.2rem; 
    font-weight: bold; 
}

body[data-theme="auto"] .announcement-content{
    margin: 0;
    padding: 0 1rem; 
    background-color: #1a1c1e; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    box-sizing: border-box;
}

/* 
---------------------------------------------------------------------------------------------------------------------------------------------------
                                                        ANNONCEMENT BAR IN DARK MODE 
---------------------------------------------------------------------------------------------------------------------------------------------------
*/

body[data-theme="dark"] .combobox select{
    color: white;
    background: transparent;
    background-image: url("../down-arrow.svg");
    background-repeat: no-repeat;
    outline: solid 2px transparent;
    outline-offset: -5px;
    transition: .2s ease-in;
} 

body[data-theme="dark"] .combobox select:hover{
    cursor: pointer;
}

body[data-theme="dark"] .combobox_version select{
    background-color: #e2001a;
    width: 4rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: left 2.6rem center;
}

body[data-theme="dark"] .combobox_page select{
    width: 10rem;
    background-position: left 8.2rem center;
} 

body[data-theme="dark"] .combobox_lang select{
    width: 3.5rem;
    background-position: left 2.2rem center;
} 

body[data-theme="dark"] #language{
    background-color: #e2001a;
    color: white;
    border: none;
    font-weight: bold;
}

body[data-theme="dark"] #select-page-mobile{
    display: none;
    background-color: #e2001a;
    color: white;
    border: none;
    font-weight: bold;
} 

body[data-theme="dark"] .announcement {
    align-items: center;
    background-color: #e2001a; /* Assure un fond uniforme */
    color: white; /* Ajuste la couleur du texte */
    display: flex;
    height: fit-content;
    margin: 0; /* Supprime les marges externes */
    padding: 0.5rem; /* Supprime les marges internes */
    box-sizing: border-box; /* Assure une bonne gestion des dimensions */
    border: none; /* Supprime les bordures */
    position: fixed;
    z-index: 1000;
    width: 100%;
}

body[data-theme="dark"] .announcement p{
    flex: 1; 
    text-align: center; 
    font-size: 1.2rem; 
    font-weight: bold; 
}

body[data-theme="dark"] .announcement-content{
    margin: 0;
    padding: 0 1rem; 
    background-color: #e2001a; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    box-sizing: border-box;
}

.links-icons{
    display: flex;
    align-items: center;
    gap: 1rem;
} 

.doc-links{
    display: flex;
    gap: 2rem;
} 

.link-doc{
    display: block;
    text-decoration: none;
    font-weight: bold;
}

.icon{
    width:1.2rem;
    height:1.2rem;
    filter: invert(100%);
    margin: 0 0 -3px 0;
}

.icon-sm{
    width:.5rem;
    filter: invert(100%);
} 

.tis-logo img{
    margin-right: 2rem; /* Espace entre le logo et le reste */
    display: block;
    height:2rem;
} 


/*
---------------------------------------------------------------------------------------------------------------------------------------------------
                                                    PARTIE ECRAN ET RESPONSIVE
---------------------------------------------------------------------------------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .announcement{
        position: static;
        z-index: 0;
        width: 100%;
    }

    #select-page-mobile{
        display: block;
    }

    .tis-logo img{
        display: block
    }

    .link-doc{
        display: none;
    }

    .to-hide{
        display: flex;
    }
}


@media (max-width: 500px) {

     .tis-logo{
        display: none;
    }  

    /*.tis-logo img{
        display: none;
    }*/

    .links-icons{
        gap: .6rem
    }

    .announcement-content{
        padding: 0 1rem;
    }
}