:root {
    --vh : 1vh;
    /* GENERAL */
    /* CONTENU_CUSTOMIZE_COLOR_MAIN01 */
    /* BottomBar */
    --color_bg_bottombar: white;
    --pathInFileSystem_background_color: white;
    --background_color_QRCode: white;
    --svg_color_1: #fff;
    --color_bg_searchbar: white;
    --color_search_nb_resultat: #215aa5;
    --color_bg_controler: white;
    --iframe__controler__background__color: white;
    --color_search_resultNumber: white;
    --color_textin_buttonsendemail: white;
    --sendemail_background_color: white;
    --background_popup_main: white;
    --color_noResult_search: white;
    /* SET IN JS */
    --color_bg_pdf_select: white;


    /* CONTENU_CUSTOMIZE_COLOR_MAIN02 */
    /* in path file */
    --color_chevron: #215aa5;
    --pathInFileSystem_color_time: #232a78;
    --svg_color_2: #215aa5;
    --color_border_select: #215aa5;
    /*#215aa5;*/
    --background_color_search_resultNumber: #215aa5;
    --color_text_doubleTap_inpicto: #215aa5;

    /* CONTENU_CUSTOMIZE_COLOR_MAIN03 */
    --color_background_input: #e0e0e0;
    --sendEmail__input_background_color: #e0e0e0;

    /* CONTENU_CUSTOMIZE_COLOR_MAIN04 */
    --color_text_input: black;

    /* CONTENU_CUSTOMIZE_COLOR_MAIN05 */
    --color__retourArriere_media: black;
    --pathInFileSystem_text_color: black;
    --color_text_QRCode: black;
    --color_timeline_time_video: black;
    --background--color--cursor--timeline: #333;

    --background_color_fond__select_forIsFrame: rgba(0, 0, 0, 0.3);

    --color_iframe_date: black;
    --color_iframe_url: black;

    --color_iFrame_PageIndicator: black;
    --iframe__select__option__color: black;
    --color__iframe__input__text__search: black;

    --sendemail_text_color: black;
    /* CONTENU_CUSTOMIZE_COLOR_MAIN06 */
    --background_color_fond_menu_assombris: rgba(0, 0, 0, 0);

    /* METEO */
    /* CONTENU_CUSTOMIZE_COLOR_WEATHER01 */
    --color_bg_meteo: rgba(0, 36, 66, 0.4);
    --background_color_fond_assombris: rgba(0, 0, 0, 0.6);

    /* CONTENU_CUSTOMIZE_COLOR_WEATHER02 */
    --color_text_meteo: white;

    /* RSS */
    /* CONTENU_CUSTOMIZE_COLOR_RSS01 */
    --color_bg_titre_actu: #215aa5;
    --color_text_titre_news: #0b87cc;

    /* CONTENU_CUSTOMIZE_COLOR_RSS02 */
    --color_text_titre_actu: white;

    /* CONTENU_CUSTOMIZE_COLOR_RSS03 */
    --color_bg_main_container_actu: white;

    /* CONTENU_CUSTOMIZE_COLOR_RSS04 */
    --color_text_in_news: black;
    --color_arrow_news: #333;

    /* CARD */
    /* CONTENU_CUSTOMIZE_COLOR_TILE01 */
    --background_menucard: rgba(255, 255, 255, 0.6);

    /* CONTENU_CUSTOMIZE_COLOR_TILE02 */
    --color_bg_card: rgba(33, 90, 165, 1);

    /* CONTENU_CUSTOMIZE_COLOR_TILE03 */
    --nb_element_color: white;
    --color_picto_card: white;

    /* CONTENU_CUSTOMIZE_COLOR_TILE04 */
    --color_text_card: white;


    --font_family_global: "Lato";
    /* FS */
    --color_text_cardNoChild: gray;
    /* PAS UTILISE */

    --overflow-x-displayer_fullscreen: hidden;
    --overflow-y-displayer_fullscreen: scroll;
    --flex-direction-displayer_fullscreen: row;
    --justify-content-displayer_fullscreen: center;







    /* video */
    /* bandeau du haut */


    /* Searchbar */

    --text_shadow_no_result: 0.5vh 0.8vh 0.9vh rgba(0, 0, 0, 0.7);
    --text_shadow_no_result: calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 0.8) calc(var(--vh, 1vh) * 0.9) rgba(0, 0, 0, 0.7);
    




    /* iFrame */
    --color_bg_iFrame: rgba(0, 0, 0, 0);
    /* PAS UTILISER */

    /* gradient color */
    --linear-gradient_start_card_actuality_shadow: rgba(0, 0, 0, 1);
    /* SET IN JS */
    --linear-gradient_stop_card_actuality_shadow: rgba(0, 0, 0, 0);

    --color_scrollbar: 255, 255, 255;
    --scrollbarDisplay: block;

    --topBottomPositionForNewAndMeteo: 0%;

    --default_background2_shadow_color: rgba(0, 0, 0, 0);

    --padding_right_for_menucard: 15vw;
    --margin_top_for_menucard_displayer: 9vh;
    --margin_top_for_menucard_displayer: calc(var(--vh, 1vh) * 9);
    --height_for_menucard_displayer: 82vh;
    --height_for_menucard_displayer: calc(var(--vh, 1vh) * 82);

    --card_actuality_clipPath: unset;
}

@media (orientation: landscape) {
    * {
        font-family: var(--font_family_global);
        border: 0px solid #000000;
        padding: 0px;
        margin: 0px;
        direction: ltr;
    }

    #pictoerrormsg>svg {
        height: 100%;
        width: 100%;
    }

    body {
        touch-action: none;
        position: relative;
        top: 0;
        left: 0;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        overflow: hidden;
        margin: 0;
        padding: 0;
        /* background-image: url("../assets/background.png"); */
    }

    /*   Diapo d'image  */
    .slider__container {
        height: 82vh;
        height : calc(var(--vh, 1vh) * 82);
        width: 100%
    }

    .iFrame__controler__changeSlide__container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 20vw;
        /* background-color: red; */
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .example-slide {
        height: 85vh;
        height : calc(var(--vh, 1vh) * 85);
        width: 100vw;
        user-select: none;
    }

    .img_catalogue {
        height: 85vh;
        height : calc(var(--vh, 1vh) * 85);
        width: 100vw;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
    }


    #Default_background {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: top;
    }

    #Default_background2_container {
        display: none;
    }

    #Default_background2_shadow {
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        background: var(--default_background2_shadow_color);
        opacity: 0.7;
    }
    
    #Default_background2{
        object-position: top;
    }

    .ActuIn__text>.textFitted {
        text-align: justify;
        text-align-last: center;
    }

    .textFitted {
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    /*  POPUP   */
    .popup_main_container {
        position: fixed;
        z-index: 999999;
        top: -10vh;
        top : calc(var(--vh, 1vh) * -10);
        left: -10vw;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .popup_main_div {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--background_popup_main);
        max-height: 80vh;
        max-height : calc(var(--vh, 1vh) * 80);
        max-width: 50vw;
    }

    .popup_container_inmain {
        position: relative;
        min-width: 20vw;
        min-height: 20vh;
        min-height: calc(var(--vh, 1vh) * 20);
        justify-content: center;
        display: flex;
        flex-direction: column;
        /* border: solid 0.2vh black; */
        box-shadow: 0.5vh 1vh 1vh rgba(0, 0, 0, 0.6);
        box-shadow: calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 1) calc(var(--vh, 1vh) * 1) rgba(0, 0, 0, 0.6);
    }

    .popup_container_slot {
        width: auto;
        align-items: center;
        display: flex;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .popup_slot_content {
        margin: auto;
        text-align: center;
        color: var(--color__retourArriere_media);
    }

    .popup_container_controler {
        width: auto;
        align-items: center;
        display: flex;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .popup_slot_button {
        margin: auto;
        text-align: center;
        font-size: 2vh;
        font-size: calc(var(--vh, 1vh) * 2);
    }

    .popup_controler_container {
        position: relative;
        top: 0;
        left: 0;
        height: 6vh;
        height: calc(var(--vh, 1vh) * 6);
        width: 100%;
    }

    .popup_controler_close {
        position: absolute;
        top: 0;
        right: 0;
        height: 6vh;
        height: calc(var(--vh, 1vh) * 6);
        width: 6vh;
        width: calc(var(--vh, 1vh) * 6);
    }

    .popup_controler_close>svg {
        height: 100%;
        width: 100%;
    }

    /* FS */
    #app {
        display: flex;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        position: relative;
    }

    /* FROM ROOT */
    .menu__card__container {
        scrollbar-width: none;
        position: absolute;
        bottom: 9vh;
        bottom : calc(var(--vh, 1vh) * 9);
        left: 0;
        width: 69vw;
        height: 30.5vh;
        height : calc(var(--vh, 1vh) * 30.5);
        /*27.5vh;*/
        background-color: var(--background_menucard);
        user-select: none;
        overflow-x: visible;
        overflow-y: hidden;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-shrink: 0;
    }

    .menu__card__nohome {
        background-color: red;
    }

    /*  LOGO    */
    .logo {
        position: fixed;
        top: 0;
        left: 0;
        height: 13.4vw;
        width: 13.4vw;
        background-color: rgba(0, 0, 0, 0);
        z-index: 1;
    }

    .pictureInLogo {
        /* position: fixed;
        top: 0vh;
        left: 0vh;
        height: 16vh;
        width: 13.4vw;
        background-size: contain;
        background-repeat: no-repeat; */
        position: relative;
        top: 0vh;
        left: 0vh;
        height: 100%;
        width: 100%;
        /* background-image: url("../assets/logo.jpg"); */
        /* background-size: contain; */
        /* background-repeat: no-repeat; */
    }

    .menu__card__displayer {
        height: 80%;
        width: 100%;
        display: flex;
        /* overflow-x: scroll;
        overflow-y: hidden; */
        align-content: center;
        scrollbar-width: none;
        position: relative;
        /* justify-content: center; */
    }

    .menu__card__displayer>div>.card__actuality {
        height: 100%;
        margin: unset;
        margin-right: 0.25vw;
        margin-left: 0.25vw;
        position: relative;
        /* clip-path: var(--card_actuality_clipPath); */
    }

    .menu__card__displayer>.card__actuality {
        height: 100%;
        margin: unset;
        margin-right: 0.25vw;
        margin-left: 0.25vw;
        position: relative;
        /* clip-path: var(--card_actuality_clipPath); */
    }

    .menu__card__displayer>div>.card__actuality__nochild {
        height: 100%;
        margin: unset;
        margin-right: 0.25vw;
        margin-left: 0.25vw;
        position: relative;
        /* clip-path: var(--card_actuality_clipPath); */
    }

    .menu__card__displayer>.card__actuality__nochild {
        height: 100%;
        margin: unset;
        margin-right: 0.25vw;
        margin-left: 0.25vw;
        position: relative;
        /* clip-path: var(--card_actuality_clipPath); */
    }


    /* .menu__card__container::-webkit-scrollbar {
        display: none;
    } */
    /* FROM FS */
    .menu__card__container__fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 91vh;
        height : calc(var(--vh, 1vh) * 91);
        background-color: var(--background_color_fond_menu_assombris);
        overflow: hidden;
        scrollbar-width: none;
        user-select: none;
        display: flex;
        z-index: 5;
        flex-shrink: 0;
    }

    .menu__card__displayer__fullscreen {
        height: var(--height_for_menucard_displayer);
        /**/
        width: 70vw;
        overflow-y: var(--overflow-y-displayer_fullscreen);
        overflow-x: var(--overflow-x-displayer_fullscreen);
        /* border: solid 1vh; */
        display: flex;
        flex-wrap: wrap;
        flex-direction: var(--flex-direction-displayer_fullscreen);
        align-content: baseline;
        justify-content: var(--justify-content-displayer_fullscreen);
        scrollbar-width: none;
        margin-left: auto;
        /* margin-right: auto; */
        margin-top: var(--margin_top_for_menucard_displayer);
        padding-right: var(--padding_right_for_menucard);
    }


    /* .menu__card__container__fullscreen::-webkit-scrollbar {
        display: none;
    } */

    ::-webkit-scrollbar {
        display: none;
    }

    .card__actuality {
        height: 27vh;
        height : calc(var(--vh, 1vh) * 27);
        width: 25vh;
        width : calc(var(--vh, 1vh) * 25);
        /* border: 0.3vw solid white; */
        /* background: var(--color_bg_card); */
        user-select: none;
        flex-shrink: 0;
        margin: 2vh 1vh;
        margin : calc(var(--vh, 1vh) * 2) calc(var(--vh, 1vh) * 1);
        align-items: center;
        font-family: "Lato";
    }

    .ActuIn__container__title__text__sticked {
        /* background-color: red; */
    }

    .menucard_cardactuality, .card__actuality>.clippath, .card__actuality__nochild>.clippath {
        background: var(--color_bg_card);
        clip-path: var(--card_actuality_clipPath);
        background: var(--color_bg_card);
    }

    .card__actuality__nochild {
        height: 27vh;
        height : calc(var(--vh, 1vh) * 27);
        width: 25vh;
        width : calc(var(--vh, 1vh) * 25);
        /* border: 0.3vw solid white; */
        background: var(--color_bg_card);
        user-select: none;
        flex-shrink: 0;
        margin: 2vh 1vh;
        margin : calc(var(--vh, 1vh) * 2) calc(var(--vh, 1vh) * 1);
        align-items: center;
        /* color: var(--color_text_cardNoChild); COMME PAS DE SVG EN GRIS ON MET OPACITE A 0.65 */
        opacity: 0.65;
        font-family: "Lato";
        /* clip-path: var(--card_actuality_clipPath); */
    }

    .menu__card__displayer__fullscreen>.card__actuality__nochild,
    .menu__card__displayer__fullscreen>div>.card__actuality__nochild {
        height: 27vh;
        height : calc(var(--vh, 1vh) * 27);
        width: 28vh;
        width : calc(var(--vh, 1vh) * 28);
        /* border: 0.3vw solid white; */
        background: var(--color_bg_card);
        user-select: none;
        flex-shrink: 0;
        margin: 2vh 1vh;
        margin : calc(var(--vh, 1vh) * 2) calc(var(--vh, 1vh) * 1);
        align-items: center;
        /* color: var(--color_text_cardNoChild); */
        font-family: "Lato";
        position: relative;
        clip-path: var(--card_actuality_clipPath);
    }

    .menu__card__displayer__fullscreen>div>.card__actuality,
    .menu__card__displayer__fullscreen>.card__actuality {
        height: 27vh;
        height : calc(var(--vh, 1vh) * 27);
        width: 28vh;
        width : calc(var(--vh, 1vh) * 28);
        /* border: 0.3vw solid white; */
        /* background: var(--color_bg_card); */
        user-select: none;
        flex-shrink: 0;
        margin: 2vh 1vh;
        margin : calc(var(--vh, 1vh) * 2) calc(var(--vh, 1vh) * 1);
        align-items: center;
        font-family: "Lato";
        position: relative;
        /* clip-path: var(--card_actuality_clipPath); */
    }

    .card__actuality__image {
        height: 40%;
        width: 100%;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        z-index: 2;
        position: relative;
        overflow: hidden;
    }

    .card__actuality__text {
        /* text-align: center;
        justify-content: center;
        align-items: center; */
        margin-top: 5%;
        /* margin-left: 2vh;
        margin-right: 2vh; */
        margin-bottom: auto;
        height: 40%;
        width: 90%;
        text-align: center;
        z-index: 2;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .card__actuality__image__without__icon {
        height: 40%;
        width: 40%;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        z-index: 0;
        position: relative;
        display: none;
    }

    .card__actuality__text__without__icon {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 5%;
        /* margin-left: 20%;
        margin-right: 20%; */
        margin-bottom: auto;
        height: 40%;
        width: 90%;
        text-align: center;
        z-index: 2;
        position: relative;
    }

    .card__actuality__shadow {
        z-index: 1;
        position: absolute;
        /* top: -4.5%; */
        left: 0;
        height: 100%;
        width: 100%;
        /* background: rgb(0,0,0); */
        background: linear-gradient(0deg, var(--linear-gradient_start_card_actuality_shadow) 0%, var(--linear-gradient_stop_card_actuality_shadow) 100%);
        clip-path: var(--card_actuality_clipPath);
    }

    .card__actuality_title {
        height: 55%;
        margin-bottom: 5%;
        width: 100%;
        /* margin-left: 5%; */
        /* margin-right: 5%; */
        color: var(--color_text_card);
    }

    .no_child_display {
        height: 100%;
        position: relative;
    }

    /* .no_child_display>span { /* 12-05-2022 Alyssa sur la démo La bresse, si no-child affiché + d'autre en no element sa fais une différence
        display: flex;
        flex-direction: column;
        justify-content: center;
    } */

    .card__actuality_nbElement {
        height: 40%;
        width: 100%;
        /* margin-left: 5%;
        margin-right: 5%; */
        font-size: 2vh;
        font-size: calc(var(--vh, 1vh) * 2);
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: var(--nb_element_color);
    }

    .card__actuality_title__noNbElement {
        height: 100%;
        width: 100%;
        color: var(--color_text_card);
    }

    .card__actuality__news {
        position: absolute;
        height: 5.5vh;
        height : calc(var(--vh, 1vh) * 5.5);
        width: 20%;
        top: -5%;
        right: -5%;
        z-index: 3;
    }

    .card__actuality__news>svg {
        height: 100%;
        width: 100%;
    }

    /* Search */
    .search__result__noresult {
        height: 100%;
        width: 100%;
        /* background-color: red; */
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        font-size: 8vh;
        font-size: calc(var(--vh, 1vh) * 8);
        color: var(--color_noResult_search);
        text-shadow: var(--text_shadow_no_result);
        /* background: linear-gradient(0deg, var(--linear-gradient_start_card_actuality_shadow) 0%, var(--linear-gradient_stop_card_actuality_shadow) 100%);  */
    }

    .search__nbResult {
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 10vw;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: -10vw;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5vh;
        font-size: calc(var(--vh, 1vh) * 2.5);
        font-weight: bold;
        color: var(--color_search_nb_resultat);
    }

    .searchbar__container {
        display: flex;
        height: 5vh;
        height : calc(var(--vh, 1vh) * 5);
        width: 35vw;
        background-color: var(--color_bg_searchbar);
        /* position: relative; */
        /* left: 50%;
        transform: translateX(-120%); */
        /* justify-content: center; */
        /* margin-left: auto;
        margin-right: unset; */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .searchbar__container__fullscreen {
        position: absolute;
        display: flex;
        bottom: 0;
        left: 0;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 100vw;
        background-color: var(--color_bg_searchbar);
        justify-content: space-between;
    }

    .input_search {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 60%;
        right: 11%;
        width: 25vw;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        text-align: left;
        font-size: 2.5vh;
        font-size: calc(var(--vh, 1vh) * 2.5);
        outline: none;
        color: var(--color_text_input);
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .inSearch_forinput {
        right: 6.5vw;
    }

    .button_search {
        position: relative;
        height: 100%;
        width: 30vw;
        object-position: center;
    }

    .button_search>svg {
        height: 100%;
        width: 100%;
    }

    .input_container_search {
        height: 100%;
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-content: center;
        position: relative;
    }

    .input_container_Insearch {
        position: relative;
        /* z-index: 9; La barre recherche mange sur les iFrames */
        top: 50%;
        height: 6vh;
        height : calc(var(--vh, 1vh) * 6);
        width: 40vw;
        display: flex;
        justify-content: center;
        /* left: 50%; */
        /* transform: translate(-50%,-50%); */
        transform: translateY(-50%);
    }

    .menu__card__research__container__fullscreen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 91vh;
        height : calc(var(--vh, 1vh) * 91);
        background-color: var(--background_color_fond_menu_assombris);
        /*var(--background_color_fond_assombris); NEWS UPDATE 07/03/2022  */
        overflow-y: hidden;
        overflow-x: scroll;
        scrollbar-width: none;
        user-select: none;
        display: flex;
        z-index: 5;
        flex-shrink: 0;
    }

    .searchingResult {
        position: absolute;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        z-index: 9;
        bottom: 0;
        left: 0;
    }

    .searchingResult__retour {}

    .retour_home {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 7vh;
        width : calc(var(--vh, 1vh) * 7);
        background-color: var(--color_bg_bottombar);
    }

    .retour_home>svg {
        height: 100%;
        width: 100%;
    }

    .retour_arriere {
        position: fixed;
        left: 7vh;
        left : calc(var(--vh, 1vh) * 7);
        font-size: 3vh;
        font-size: calc(var(--vh, 1vh) * 3);
        font-weight: bold;
        bottom: 0vh;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 9vw;
        user-select: none;
        text-align: center;
        justify-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        direction: ltr;
        background-color: var(--color_bg_bottombar);
    }

    .retour_arriere_alone {
        position: fixed;
        left: 0vh;
        font-size: 3vh;
        font-size: calc(var(--vh, 1vh) * 3);
        font-weight: bold;
        bottom: 0vh;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 9vw;
        user-select: none;
        text-align: center;
        justify-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        direction: ltr;
        background-color: var(--color_bg_bottombar);
    }

    .text__retour {
        height: 100%;
        width: 70%;
        color: var(--color__retourArriere_media);
        display: contents;
    }

    .SVG__retour {
        height: 100%;
        width: 30%;
        /* margin-bottom: 5%; */
        align-items: center;
        display: flex;
    }

    .SVG__retour>svg {
        height: 40%;
        width: 100%;
    }

    .main__bottomBar {
        position: fixed;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 69vw;
        background-color: var(--color_bg_bottombar);
        bottom: 0%;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main__picto {
        height: 100%;
        width: 100%;
        display: flex;
        direction: rtl;
        padding-right: 1px;
    }

    .picto_bottom_container {
        height: 100%;
        width: 50%;
    }

    .picto_bottom_container>svg {
        height: 100%;
        width: 100%;
    }

    .large_map{
        width: 70%;
    }
    .large_web{
        width: 30%;
    }

    .svg__bottomBar {
        height: 100%;
        width: 10vw;
        display: flex;
        flex-direction: row-reverse;
    }

    .large_svg_bottom{
        width: 17vw;
    }

    /* iFrame (media,pdf,diapo d'image) */
    .iFrame__controler__crossToLeave {
        position: absolute;
        top: 0;
        right: 0;
        height: 9%;
        width: 6vh;
        width : calc(var(--vh, 1vh) * 6);
    }

    .iFrame__controler__crossToLeave>svg {
        height: 100%;
        width: 100%;
    }

    .iFrame__container__Windows {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 80vh;
        height : calc(var(--vh, 1vh) * 80);
        width: 80vw;
        transform: translate(-50%, -50%);
        z-index: 50000;
        background-color: var(--color_bg_iFrame);
        /* border: solid 0.2vh black; */
        box-shadow: 0.5vh 1vh 1vh rgba(0, 0, 0, 0.6);
        box-shadow: calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 1) calc(var(--vh, 1vh) * 1) rgba(0, 0, 0, 0.6);
    }

    .iFrame__container {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        transform: translate(-50%, -50%);
        z-index: 50000;
        background-color: var(--color_bg_iFrame);
        /* border: solid 0.2vh black; */
        box-shadow: 0.5vh 1vh 1vh rgba(0, 0, 0, 0.6);
        box-shadow: calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 1) calc(var(--vh, 1vh) * 1) rgba(0, 0, 0, 0.6);
    }

    .iFrame__body {
        height: 82vh;
        height : calc(var(--vh, 1vh) * 82);
        width: 100%;
        border: none;
        position: relative;
        background-color: var(--color_bg_iFrame);
        /* z-index: -1; Empeche l'iFrame de fonctionné sur Chrome */
    }

    .iFrame__body__fullscreen {
        height: 100%;
        width: 100%;
        border: none;
        position: relative;
        background-color: var(--color_bg_iFrame);
    }

    .iFrame__background__Windows,
    .iFrame__background {
        z-index: 50000;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height : calc(var(--vh, 1vh) * 100);
        width: 100vw;
        background-color: var(--background_color_fond_assombris);
    }

    .iFrame__controler {
        display: flex;
        height: 9%;
        width: 100%;
        border: none;
        background-color: var(--color_bg_controler);
        box-shadow: -1px 5px 10px rgba(0, 0, 0, 0.4);
    }

    .iFrame__controler__inController {
        height: 100%;
        width: 10%;
        /* color: black; */
    }

    .iFrame__controler__pageIndicator {
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        color: var(--color_iFrame_PageIndicator);
    }

    .iFrame__controler__name__date__container {
        height: 9%;
        width: 59%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .iFrame__date {
        height: 50%;
        width: 100%;
        color: var(--color_iframe_date);
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding-left: 0.5%;
    }

    .iFrame__URL {
        height: 50%;
        width: 100%;
        text-align: center;
        color: var(--color_iframe_url);
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .iFrame__controler__button {
        /* height: 100%;
        width: 10%;
        display: flex;
        justify-content: end;
        align-items: center; */
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 0%;
        right: 0%;
        background-color: var(--iframe__controler__background__color);
        z-index: 9;
        direction: ltr;
    }

    .iFrame__intput__search__text__color {
        color: var(--color__iframe__input__text__search);
    }

    .iFrame__controler__backward__container {
        display: flex;
        height: 100%;
        width: 20vw;
        /* color: black; */
    }

    .iFrame__picto__svg {
        height: 7.2vh;
        width: 7.2vh;
    }

    .iFrame__picto__svg>svg {
        height: 100%;
        width: 100%;
    }

    /* video */
    .iFrame__main__container__video {
        position: relative;
        height: 85vh;
        height : calc(var(--vh, 1vh) * 85);
        width: 100vw;
    }

    .iFrame__video__container__doubletap {
        position: absolute;
        height: 85vh;
        height : calc(var(--vh, 1vh) * 85);
        width: 100vw;
        top: 0;
        display: flex;
    }

    .iFrame__video__doubletap__left {
        height: 100%;
        width: 33%;
        position: relative;
    }

    .iFrame__video__doubletap__right {
        height: 100%;
        width: 33%;
        position: relative;
    }

    .iFrame__video__doubletap__middle {
        height: 100%;
        width: 34%;
        position: relative;
    }

    .iFrame__video__doubletap__picto__left {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.3;
    }

    .iFrame__video__doubletap__picto__right {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.3;
    }

    .iFrame__video__doubleTap__InPicto__number {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        font-size: 2.5vh;
        font-size: calc(var(--vh, 1vh) * 2.5);
        color: var(--color_text_doubleTap_inpicto);
    }

    .iFrame__video__doubleTap__InPicto__container__backward {
        height: 20vh;
        height : calc(var(--vh, 1vh) * 20);
        width: 20vh;
        width : calc(var(--vh, 1vh) * 20);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .iFrame__video__doubleTap__InPicto__container__backward>svg {
        height: 70%;
        width: 70%;
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .iFrame__video__doubleTap__InPicto__container__forward {
        height: 20vh;
        height : calc(var(--vh, 1vh) * 20);
        width: 20vh;
        width : calc(var(--vh, 1vh) * 20);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .iFrame__video__doubleTap__InPicto__container__forward>svg {
        height: 70%;
        width: 70%;
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .iFrame__video__container__animation {
        position: absolute;
        /* height: 27vh;
        width: 28vh; */
        height: 15vh;
        height : calc(var(--vh, 1vh) * 15);
        width: 15vh;
        width : calc(var(--vh, 1vh) * 15);
        opacity: 0;
        background-color: rgba(255, 255, 255, 1);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    .iFrame__video__controler__container {
        position: fixed;
        display: flex;
        justify-content: space-evenly;
        height: 9vh;
        height : calc(var(--vh, 1vh) * 9);
        width: 65vw;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        z-index: 50;
    }

    .iFrame__video__playOrResume {
        height: 100%;
        width: 8%;
    }

    .iFrame__video__playOrResume>svg {
        height: 100%;
        width: 100%;
    }

    .controler__picto__container__video {
        width: 12vw;
    }

    .iFrame__video__pictoBottomRight {
        width: 50%;
    }

    .iFrame__video__timeline__container {
        display: flex;
        width: 70%;
        height: 80%;
        position: relative;
    }

    .iFrame__video__timeline__progress {
        width: 90%;
        height: 0.7vh;
        height : calc(var(--vh, 1vh) * 0.7);
        margin-top: auto;
        margin-bottom: auto;
        background-color: var(--background_color_fond__select_forIsFrame);
        overflow: hidden;
        border-radius: 2vh;
        border-radius: calc(var(--vh, 1vh) * 2);
        display: flex;
    }

    .iFrame__video__Intimeline__progress {
        height: 100%;
        background-color: var(--svg_color_2);
        border-top-left-radius: 2vh;
        border-top-left-radius: calc(var(--vh, 1vh) * 2);
        border-bottom-left-radius: 2vh;
        border-bottom-left-radius: calc(var(--vh, 1vh) * 2);
        width: 0%;
    }

    .iFrame__video__timeline__progress__cursor {
        position: absolute;
        background-color: var(--background--color--cursor--timeline);
        height: 2vh;
        height : calc(var(--vh, 1vh) * 2);
        width: 0.2vw;
        border-radius: 2vh;
        border-radius: calc(var(--vh, 1vh) * 2);
        top: 2.5vh;
        top : calc(var(--vh, 1vh) * 2.5);
    }

    .iFrame__video__timeline__timeProgress {
        height: 95%;
        width: 11%;
        margin-left: 2%;
        margin-right: 1%;
        text-align: center;
        display: flex;
        color: var(--color_timeline_time_video);
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .iFrame__video__audio__container {
        height: 100%;
        width: 15%;
        display: flex;
    }

    .iFrame__video__audio__progress {
        height: 0.7vh;
        height : calc(var(--vh, 1vh) * 0.7);
        width: 50%;
        margin-top: auto;
        margin-bottom: auto;
        background-color: var(--background_color_fond__select_forIsFrame);
        overflow: hidden;
        border-radius: 2vh;
        border-radius: calc(var(--vh, 1vh) * 2);
        display: flex;
    }

    .iFrame__video__Inaudio__progress {
        height: 100%;
        background-color: var(--svg_color_2);
        border-top-left-radius: 2vh;
        border-top-left-radius: calc(var(--vh, 1vh) * 2);
        border-bottom-left-radius: 2vh;
        border-bottom-left-radius: calc(var(--vh, 1vh) * 2);
        width: 0%;
    }

    .iFrame__video__audio__progress__cursor {
        position: absolute;
        background-color: var(--background--color--cursor--timeline);
        height: 2vh;
        height : calc(var(--vh, 1vh) * 2);
        width: 0.2vw;
        border-radius: 2vh;
        border-radius: calc(var(--vh, 1vh) * 2);
        top: 3.5vh;
        top : calc(var(--vh, 1vh) * 3.5);
    }

    .iFrame__video__audio__svg {
        height: 80%;
        width: 35%;
        margin-right: 5%;
        justify-content: center;
        align-items: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .iFrame__video__audio__svg>svg {
        height: 100%;
        width: 100%;
    }

    /* button PDF */
    .iFrame__controler__select__list__main {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        color: var(--iframe__select__option__color);
    }

    /* :style="[canBeSendInEmail==true?{width:'20%'}:{width:'15%'}]" */
    .iFrame__picto__svg__noEmail {
        width: 15%
    }

    .iFrame__forPDF {
        width: 20%;
        position: relative;
    }

    .iFrame__controler__picto__container {
        display: flex;
        height: 100%;
        width: 30vw;
        align-items: center;
        justify-content: flex-end;
        position: relative;
    }

    .controler__picto__container__forPDF {
        width: 33vw;
    }

    /*button pdf select*/
    .iFrame__select__list {
        width: 16vw;
        height: 30%;
        color: var(--iframe__select__option__color);
        background-color: var(--color_bg_pdf_select);
        position: relative;
        /* border-bottom: solid 0.02vh var(--color_border_select);
        border-right: solid 0.02vh var(--color_border_select);
        border-left: solid 0.02vh var(--color_border_select); */
        font-weight: bold;
        /* background-color: red; */
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .iFrame__select__list__Notsurround {
        border-bottom: solid 0.02vh var(--color_border_select);
        border-bottom: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        border-right: solid 0.02vh rgba(0, 0, 0, 0);
        border-left: solid 0.02vh rgba(0, 0, 0, 0);
        z-index: 10;
    }

    .iFrame__select__list__surround {
        border-right: solid 0.02vh var(--color_border_select);
        border-right: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        border-left: solid 0.02vh var(--color_border_select);
        border-left: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        z-index: 10;
    }

    .iFrame__select__list>svg {
        height: 80%;
        width: 20%;
    }

    .iFrame__select__separator {
        height: 0.10vh;
        height : calc(var(--vh, 1vh) * 0.1);
        background-color: rgba(0, 0, 0, 0.4);
        width: 100%;
    }

    .iFrame__select__list__option {
        position: absolute;
        height: 16vh;
        height : calc(var(--vh, 1vh) * 16);
        /* AVEC LES AUTRES ZOOM height: 20vh; */
        width: 16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: var(--color_bg_pdf_select);
        bottom: 100%;
        border-top: solid 0.02vh var(--color_border_select);
        border-top: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        border-right: solid 0.02vh var(--color_border_select);
        border-right: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        border-left: solid 0.02vh var(--color_border_select);
        border-left: solid calc(var(--vh, 1vh) * 0.02) var(--color_border_select);
        /* left: -0.1vh; */
        /* right: 0; */
    }

    .iFrame__select__option {
        color: var(--iframe__select__option__color);
        width: 100%;
        height: 18%;
        /* AVEC LES AUTRES ZOOM height: 13%; */
        font-weight: normal;
        display: flex;
        align-items: center;
        /* background-color: blue; */
    }

    .iFrame__selectList__svg {
        height: 75%;
        width: 15%;
        /* padding: 2.5%; */
        /* margin: auto; */
    }

    .iFrame__selectList__svg>svg {
        height: 100%;
        width: 100%;
    }

    .iFrame__selectList__text {
        height: 100%;
        width: 65%;
        position: relative;
        padding-right: 3%;
    }

    .iFrame__SVG__chevron {
        height: 70%;
        /* padding-right: 3%; */
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* transform-origin: center; */
    }

    .iFrame__SVG__chevron>svg {
        height: 70%;
        width: 70%;
    }

    .option__selected {
        background-color: rgba(33, 90, 165, 0.2);
        font-weight: bold;
    }

    /*button pdf search*/
    .iFrame__picto__inContainer {
        height: 100%;
        width: 100%;
        align-items: center;
        display: flex;
    }

    .iFrame__picto__inContainer>svg {
        height: 100%;
        width: 100%;
    }

    .iFrame__search__container {
        position: fixed;
        height: 5vh;
        height : calc(var(--vh, 1vh) * 5);
        width: 20vw;
        /* background-color: red; */
        bottom: 7vh;
        bottom: calc(var(--vh, 1vh) * 7);
        right: 1vw;
        /* right: -3.5vw; */
    }

    .iFrame__search__container>svg {
        height: 100%;
        width: 100%;
    }

    .iFrame__search__resultNumber {
        background-color: var(--background_color_search_resultNumber);
        color: var(--color_search_resultNumber);
        /* width: 5vw; */
        position: fixed;
        z-index: 2;
    }

    .iFrame__search__resultNumber>span {
        position: absolute;
        left: 0;
    }

    .iFrame__controler__page__zoom_container {
        display: flex;
        justify-content: space-between;
        height: 100%;
        width: 25vw;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .iFrame__controler__zoom__container {
        display: flex;
        height: 7.2vh;
        height : calc(var(--vh, 1vh) * 7.2);
        width: 15vh;
        width: calc(var(--vh, 1vh) * 15);
        justify-content: space-between;
    }

    .iFrame__forPDF_Zoom {
        width: 7.2vh;
        width: calc(var(--vh, 1vh) * 7.2);
        margin-right: unset;
    }

    .iFrame__forPDF_ChangePage {
        width: 7.2vh;
        width: calc(var(--vh, 1vh) * 7.2);
        margin-right: unset;
    }

    /*  */
    .PathInFileSystem {
        position: fixed;
        top: 0;
        left: 0;
        height: 5vh;
        height : calc(var(--vh, 1vh) * 5);
        width: 100vw;
        background-color: var(--pathInFileSystem_background_color);
        /* border-left: solid 2px black;
        border-right: solid 2px black;
        border-bottom: solid 2px black; */
        color: var(--pathInFileSystem_text_color);
        padding: 2vh;
        padding: calc(var(--vh, 1vh) * 2);
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: left;
        font-weight: bold;
    }

    .PathInFileSystem_dataDisplay {
        width: 54.5%;
        height: 100%;
        background-color: var(--pathInFileSystem_background_color);
        position: absolute;
        left: 0;
        padding-left: 14%;
    }

    .pathInFileSystem_date {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 31%;
        /* border-left: 1vw gray solid; */
        display: flex;
        background-color: var(--pathInFileSystem_background_color);
    }

    .PathInFileSystem_dataDisplay_text_container {
        height: 40%;
        width: 53vw;
        padding-left: 0.5vw;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .pathInFileSystem_time {
        height: 100%;
        width: 25%;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        color: var(--pathInFileSystem_color_time);
        font-size: 4.5vh;
        font-size: calc(var(--vh, 1vh) * 4.5);
        padding-left: 3%;
    }

    .pathInFileSystem_dateString_container {
        height: 100%;
        width: 68%;
        margin-top: auto;
        position: relative;
        margin-bottom: auto;
        justify-content: center;
        display: flex;
        flex-direction: column;
        margin-left: 2%;
    }

    .pathInFileSystem_dateString {
        height: 30%;
        width: 80%;
    }

    .pathInFileSystem_dateString_NoMeteo {
        height: 60%;
        width: 80%;
    }

    .pathInFileSystem_saint {
        height: 30%;
        width: 80%;
		visibility: visible;
    }

    .pathInFileSystem_saint_NoMeteo {
        height: 0.3%;
        /* utile pour que textfit ne plante pas */
        width: 80%;
    }
	
	

    /* RPDG && sendmail */
    /* .iFrame__URL__sendMailAndQR{
        margin-top: 1vh;
    } */
    .sendEmail {
        background-color: var(--sendemail_background_color);
        color: var(--sendemail_text_color);
        height: 100%;
        width: 100%;
        display: inline-flex;
    }

    .sendEmail__ImageContainer {
        height: 20vh;
        height : calc(var(--vh, 1vh) * 20);
        width: 20vh;
        width: calc(var(--vh, 1vh) * 20);
        position: absolute;
        left: 50%;
        top: 5%;
        transform: translateX(-50%);
    }

    .sendEmail__ImageContainer>svg {
        height: 100%;
        width: 100%;
    }

    .sendEmail__textContainer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 17%;
        height: 30vh;
        height : calc(var(--vh, 1vh) * 30);
        width: 80%;
    }

    .sendEmail__title {
        width: 100%;
        height: 20%;
        text-align: left;
        justify-content: center;
        display: flex;
        flex-direction: column;
        font-size: 4vh;
        font-size: calc(var(--vh, 1vh) * 4);
    }

    .sendEmail__input {
        position: relative;
        width: 100%;
        height: 20%;
        margin-top: 2%;
        display: flex;
    }

    .sendEmail__input__email {
        position: relative;
        width: 81%;
        height: 100%;
        top: 0;
        left: 0;
        border: none;
        background-color: var(--sendEmail__input_background_color);
        padding: unset;
        padding-left: unset;
        font-size: 2.5vh;
        font-size: calc(var(--vh, 1vh) * 2.5);
        padding-left: 2%;
        outline: none;
        color: var(--color_text_input);
    }

    .sendEmail_input_button {
        position: relative;
        right: 0;
        width: 20%;
        height: 100%;
        top: 0;
        display: flex;
    }

    .sendEmail_bg_button {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .sendEmail_bg_button>svg {
        height: 100%;
        width: 100%;
    }

    .textIn_ButtonSendEmail {
        color: var(--color_textin_buttonsendemail);
        height: 100%;
        width: 67%;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        font-size: 2.5vh;
        font-size: calc(var(--vh, 1vh) * 2.5);
    }

    .svgIn_ButtonSendEmail {
        height: 60%;
        width: 20%;
        padding-right: 10%;
        align-self: center;
        position: absolute;
        right: 0;
    }

    .svgIn_ButtonSendEmail>svg {
        height: 100%;
        width: 100%;
    }

    .sendEmail__RPDGText {
        margin-top: 2%;
        height: 50%;
        width: 100%;
        font-style: italic;
    }

    /*  QRCode  */
    .viaQRCode {
        background-color: var(--background_color_QRCode);
        height: 80%;
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
    }

    .QRCode__mainContainer {
        position: relative;
        height: 90%;
        width: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .QRCode_Container {
        height: 80%;
        width: 100%;
    }

    .QRCODE_QRCODE {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 14vw;
    }

    .svg_background_container {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 100%;
        transform: translate(-50%, -50%);
    }

    .svg_background_container>svg {
        height: 100%;
        width: 100%;
    }

    .QRCode_text {
        height: 15%;
        width: 100%;
        text-align: center;
        color: var(--color_text_QRCode);
        font-size: 3vh;
        font-size: calc(var(--vh, 1vh) * 3);
        /* margin-top: 5%; */
    }

    /*  noConnection  */
    .popup_nointernet {
        background: var(--background_color_fond_assombris);
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        width: 100vw;
        position: absolute;
        top: 0;
        z-index: 999;
    }

    .noConnection_close {
        position: absolute;
        height: 8%;
        width: 5%;
        top: 0;
        right: 0;
    }

    .noConnection_close>svg {
        height: 100%;
        width: 100%;
    }

    .noConnection_main_container {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 70%;
        width: 60%;
        transform: translate(-50%, -50%);
        background-color: var(--color_bg_controler);
    }

    .noConnection_IMG_container {
        height: 60%;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
    }

    .noConnection_IMG_container>svg {
        height: 100%;
        width: 100%;
    }

    .noConnection_text_container {
        height: 20%;
        width: 70%;
        padding-left: 15%;
        padding-right: 15%;
		color: var(--color__retourArriere_media);		
    }
	.text_warning_popup {
		color: var(--color__retourArriere_media);
	}
    /* Warning */

    .warning_IMG_container {
        height: 20vh;
        height : calc(var(--vh, 1vh) * 20);
        width: 70%;
        margin-left: 15%;
        margin-bottom: 2%
    }

    .warning_IMG_container>svg {
        height: 100%;
        width: 100%;
    }

    /* Quand un utilisateur passe devant la borne */
    #tactil_available {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        opacity: 0;
        z-index: 5000000;
        display: none;
    }

    /* scrollbar etirement  */
    .extra_top_forscroll {
        height: 50%;
        width: 100%;
    }

    .extra_bottom_forscroll {
        height: 50%;
        width: 100%;
    }

    /* Météo */
    .meteoControler_dayAndTime {
        height: 15%;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .meteoControler_fixedDate {
        height: 100%;
        width: 85%;
    }

    .meteoControler_time {
        height: 100%;
        width: 20%;
    }

    .meteoControler_arrow {
        position: absolute;
        bottom: 10%;
        /* transform: translateY(-55%); */
        height: 3vh;
        height: calc(var(--vh, 1vh) * 3);
        width: 2vh;
        width: calc(var(--vh, 1vh) * 2);
        z-index: 10;
    }

    .meteoControler_arrow>svg {
        height: 100%;
        width: 100%;
    }

    .meteoControler_leftarrow {
        left: 1vh;
        left: calc(var(--vh, 1vh) * 1);
    }

    .meteoControler_rightarrow {
        right: 1vh;
        right: calc(var(--vh, 1vh) * 1);
    }

    .meteo__main__container {
        position: absolute;
        top: 0;
        right: 0;
        height: 50%;
        width: 31%;
        background-color: var(--color_bg_meteo);
        color: var(--color_text_meteo);
    }

    #meteo {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #city {
        position: relative;
        height: 7%;
        width: 90%;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
        padding-bottom: 3%;
        margin-bottom: 2.3%;
        background-position: bottom;
        background-image: linear-gradient(var(--color_text_meteo), var(--color_text_meteo));
        background-size: 10vh 3%;
        background-size: calc(var(--vh, 1vh) * 10) 3%;
        background-repeat: no-repeat;
    }

    #today {
        position: relative;
        width: 100%;
        height: 31.5%;
        display: flex;
        flex-direction: column;
        top: 10%;
    }

    #t-name {
        position: relative;
        top: 6%;
        height: 20%;
        font-size: 1.2vw;
        text-align: center;
    }

    #dateoftoday {
        height: 10%;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 2%;
    }

    #t-degree {
        position: relative;
        top: 25%;
        right: 14%;
        font-size: 3.3vw;
        text-align: right;
    }

    #t-picto {
        position: absolute;
        top: 27%;
        left: 19%;
        height: 85%;
    }

    #other-days {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40%;
        background: var(--color-meteo-2);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #day1 {
        background-position: left;
        background-image: linear-gradient(var(--color_text_meteo), var(--color_text_meteo));
        background-size: 0.2vh 40%;
        background-size: calc(var(--vh, 1vh) * 0.2) 40%;
        background-repeat: no-repeat;
        width: 42%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .day {
        position: relative;
        height: 75%;
        width: 44%;
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
        flex-direction: column;
        background-position: left;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .o-day-name {
        width: 100%;
        height: 20%;
        text-align: center;
        position: relative;
        top: 5%;
    }

    .info-list {
        position: relative;
        /* top: 10%; */
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 80%;
        align-items: flex-end;
        justify-content: center;
    }

    .o-min {
        width: 35%;
        height: 18%;
    }

    .o-max {
        width: 35%;
        height: 18%;
        margin-top: 8%;
    }

    .o-min-degree {
        height: 25%;
        width: 30%;
        padding-right: 16%;
        text-align: right;
    }

    .o-max-degree {
        height: 25%;
        width: 30%;
        padding-right: 16%;
        text-align: right;
    }

    .o-other-picto {
        position: absolute;
        left: 11%;
        top: 60%;
        height: 9.79vh;
        height: calc(var(--vh, 1vh) * 9.79);
        transform: translateY(-50%);
    }

    .picture_bg_forward {
        position: absolute;
        z-index: -1;
        height: 100%;
        width: 100%;
    }

    .fond_sombre_bg_menu {
        background-color: var(--background_color_fond_menu_assombris);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .fond_sombre_bg {
        background-color: var(--background_color_fond_assombris);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #map__picto>svg {
        height: 100%;
        width: 100%;
    }

    #web__picto>svg {
        height: 100%;
        width: 100%;
    }

    .svg_incard {
        height: 100%;
        width: 100%;
    }

    .svg_incard>svg {
        height: 100%;
        width: 100%;
    }

    /* NEWS */
    .news_container {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50%;
        width: 31%;
        user-select: none;
        /* background-color: rgba(255, 0, 0, 0.4); */
    }

    .Actu {
        height: 100%;
        width: 100%;
    }

    .ActuIn__container__title__text__sticked {
        width: 66%;
        height: 100%;
    }

    .Actu__title {
        height: 10%;
        width: 100%;
        background-color: var(--color_bg_titre_actu);
        /* background-image: url("../assets/fond_titre_rss.png"); */
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        font-size: 4vh;
        font-size: calc(var(--vh, 1vh) * 4);
        color: var(--color_text_titre_actu);
        position: relative;
        box-shadow: 0.5vh 0.5vh 1vh 0vh rgba(0, 0, 0, 0.75);
        box-shadow: calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 0.5) calc(var(--vh, 1vh) * 1) calc(var(--vh, 1vh) * 0) rgba(0, 0, 0, 0.75);
        padding-left: 2%;
        padding-right: 2%;
        box-sizing: border-box;
    }

    .Actu__main__container {
        height: 90%;
        width: 100%;
        background-color: var(--color_bg_main_container_actu);
    }

    .ActuIn__picture {
        height: 40%;
        width: 100%;
        /* background-color: yellow; */
    }

    .ActuIn__title {
        height: 20%;
        width: 85%;
        margin-left: 5%;
        margin-right: 5%;
        color: var(--color_text_titre_news);
        text-align: center;
        padding: 2%;
        /*1er news pas textfit*/
        font-weight: bold;
    }

    .ActuIn__text {
        height: 30%;
        width: 74%;
        text-align: left;
        margin-left: 13%;
        margin-right: 13%;
        color: var(--color_text_in_news);
    }

    .ActuIn__count {
        height: 5%;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: row;
        font-size: 2vh;
        font-size: calc(var(--vh, 1vh) * 2);
        position: relative;
        z-index: 10;
        /* background-color: darkolivegreen; */
    }

    .ActuIn__count_number {
        opacity: 0;
    }

    #NewsBefore {
        position: absolute;
        font-size: 5vh;
        font-size: calc(var(--vh, 1vh) * 5);
        left: 0;
        top: -16vh;
        top: calc(var(--vh, 1vh) * -16);
        height: 16vh;
        height: calc(var(--vh, 1vh) * 16);
        width: 4vw;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    #NewsBefore_SVG {
        height: 20%;
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        margin-top: -5vh;
        margin-top: calc(var(--vh, 1vh) * -5);
    }

    #NewsBefore_SVG>svg {
        height: 100%;
        width: 100%;
    }

    #NextNews {
        position: absolute;
        font-size: 5vh;
        font-size: calc(var(--vh, 1vh) * 5);
        right: 0;
        top: -16vh;
        top: calc(var(--vh, 1vh) * -16);
        height: 16vh;
        height: calc(var(--vh, 1vh) * 16);
        width: 4vw;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    #NextNews_SVG {
        height: 20%;
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        margin-top: -5vh;
        margin-top: calc(var(--vh, 1vh) * -5);
    }

    #NextNews_SVG>svg {
        height: 100%;
        width: 100%;
    }

    /* -------------------------------------------- */
    .chevron {
        color: var(--color_chevron);
    }

    #preload_fontsize {
        position: absolute;
        top: -500vh;
        left: -500vh;
        height: 0px;
        width: 0px;
        z-index: -9999999;
    }

    /* LOADER */
    .loading_searching {
        position: absolute;
        height: 25vh;
        height: calc(var(--vh, 1vh) * 25);
        width: 25vh;
        width: calc(var(--vh, 1vh) * 25);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
    }

    .sk-chase {
        width: 100%;
        height: 100%;
        position: relative;
        animation: sk-chase 2.5s infinite linear both;
    }

    .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2.0s infinite ease-in-out both;
    }

    .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #fff;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

    @keyframes sk-chase {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes sk-chase-dot {
        80%, 100% {
            transform: rotate(360deg);
        }
    }

    @keyframes sk-chase-dot-before {
        50% {
            transform: scale(0.4);
        }

        100%, 0% {
            transform: scale(1.0);
        }
    }

    /* ANIM */
    @keyframes rotateOpen {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }

    @keyframes rotateClose {
        0% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    div#scroll::-webkit-scrollbar-thumb {
        background: rgb(var(--color_scrollbar));
        border-radius: 10px;
        height: 10px;
        display: var(--scrollbarDisplay);
    }

    div#scroll::-webkit-scrollbar {
        background-color: rgba(var(--color_scrollbar), 0.15);
        height: 10px;
        display: var(--scrollbarDisplay);
    }

    div.menu__card__displayer__fullscreen::-webkit-scrollbar-thumb {
        background: rgb(var(--color_scrollbar));
        border-radius: 10px;
        height: 10px;
        display: var(--scrollbarDisplay);
    }

    div.menu__card__displayer__fullscreen::-webkit-scrollbar {
        background-color: rgba(var(--color_scrollbar), 0.15);
        height: 10px;
        display: var(--scrollbarDisplay);
    }

    @media screen and (max-width: 768px) {

        .pathInFileSystem_dateString>span,
        .pathInFileSystem_saint>span {
            display: flex;
        }

        .retour_arriere {
            width: 10vw;
        }

        .retour_arriere_alone {
            width: 10vw;
            left: 1vw;
        }

        .o-other-picto {
            left: 12%;
            top: 66%;
            height: 45%;
        }

        .textIn_ButtonSendEmail {
            width: 60%;
            white-space: nowrap;
        }

        .iFrame__video__timeline__timeProgress {
            font-size: 3vh;
            font-size: calc(var(--vh, 1vh) * 3);
            width: 21%;
        }

        div.menu__card__displayer__fullscreen::-webkit-scrollbar {
            width: 2vh;
            width: calc(var(--vh, 1vh) * 2);
        }

        div#scroll::-webkit-scrollbar {
            height: 1.5vh;
            height: calc(var(--vh, 1vh) * 1.5);
        }

        .QRCODE_QRCODE>div {
            display: flex;
        }
    }
    .subscribe_button{
        position : fixed;
        bottom : 0;
        height : calc(var(--vh, 1vh) * 9);
        width : calc(var(--vh, 1vh) * 7);
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
}