/*
TWEB s.a.s
15 Rue des Halles
75001 Paris
support@tweb.tech

date: 01-01-2024
licence: CC-by-nc-nd
*/
:root {
    /* base color */
    --white: hsl(0, 0, 100%);
    --black: hsl(0, 0, 0%);
    --light-grey: hsl(0, 0, 95%);
    --grey: hsl(0, 0, 80%);
    --dark-grey: hsl(0, 0, 50%);

    /* border */
    --null-border: none;
    --border: 1px solid hsl(0deg, 0%, 95%);

    /* background color */
    --header-bg-color: hsl(0, 0, 100%);
    --header-bg-color-darker: hsl(0, 0, 100%);
    --content-bg-color: hsl(0, 0, 100%);
    --content-bg-color-darker: hsl(0, 0, 100%);
    --footer-bg-color: hsl(0, 0, 100%);
    --footer-bg-color-darker: hsl(0, 0, 100%);

    /* min-heigth */
    --header-min-height: 9vh;
    --footer-min-height: 4vh;

    /* min-width */
    --left-min-width: 5vw;
    --right-min-width: 5vw;

    --ui-container-bg-color: hsl(0, 0%, 91%);
    --ui-btn-bg-color: hsl(0, 0%, 96%);
    --ui-btn-color: hsl(0, 0, 0%);

    --ui-selected-bg-color: #5e94b4;
    --ui-selected-color: white;
}

@media only screen and (min-width: 320px) and (max-width: 991px) and (orientation: portrait) {

}

/* smartphone et tablettes 19/9 */
@media only screen and (min-width: 320px) and (max-width: 991px) and (orientation: landscape){

}

/* ordinateurs */
@media only screen and (min-width: 992px) {

}

#header_container {
    display: flex;
    justify-content: space-around;
    background-color: var(--header-bg-color);
    height: 0px;
}

#header_l{
    position: relative;
    z-index:1;
    background-color: var(--header-bg-color-darker);
    min-width: var(--left-min-width);
}

#header_c {
    z-index:1;
    position: relative;
    width: 100%;
}

#header_r {
    z-index:1;
    position: relative;
    background-color: var(--header-bg-color-darker);
    min-width: var(--right-min-width);
}

#content_container {
    display: flex;
    justify-content: space-around;
    min-height: max-content;
    height: 100%;
}

#content_l {
    z-index:1;
    position: relative;
    /*min-width: var(--left-min-width);*/
    background-color: var(--content-bg-color-darker);
}

#content_c {
    z-index:1;
    position: relative;
    width: 100%;
    background-color: var(--content-bg-color);
}

#content_r {
    z-index:1;
    position: relative;
    /*min-width: var(--right-min-width);*/
    background-color: var(--content-bg-color-darker);
}

#footer_container {
    display: flex;
    justify-content: space-around;
    background: var(--footer-bg-color);
    min-height: var(--footer-min-height);
    border-top: var(--border);
}

#footer_l {
    z-index:1;
    position: relative;
    background: var(--footer-bg-color-darker);
    min-width: var(--left-min-width);
}

#footer_c {
    z-index:1;
    position: relative;
    width:100%
}

#footer_r {
    z-index:1;
    position: relative;
    background: var(--footer-bg-color-darker);
    min-width: var(--right-min-width);
}