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

.group{
    display:flex;
    gap:4rem;
    align-items: center;
} 

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: #009EBD;
    width: 5rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: right .5rem 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: #009EBD;
    color: white;
    border: none;
    font-weight: bold;
}

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

body[data-theme="light"] .announcement {
    align-items: center;
    background-color: #009EBD; /* 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:#009EBD; 
    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: 5rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: right .5rem 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: #009EBD;
    width: 5rem;
    border : solid 1px white;
    border-radius: 4px;
    background-position: right .5rem 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: #009EBD;
    color: white;
    border: none;
    font-weight: bold;
}

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

body[data-theme="dark"] .announcement {
    align-items: center;
    background-color: #009EBD; /* 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: #009EBD; 
    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{
    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;
    }

    .link-doc{
        display: none;
    }

    .to-hide{
        display: flex;
    }
}


@media (max-width: 800px) {

    .tis-logo{
        display: none;
    } 

    .tis-logo img{
        display: none;
    }

    .group{
        gap:.3rem;
    }

    .links-icons{
        gap: .6rem
    }

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