/********************* Taille d'écran *************/


/* style pour les téléphone*/
/* en portrait */
@media only screen and (max-width: 500px) and (orientation:portrait) {
    /* 1200 px = 460 point de largeur*/

    .box-container {
        display: grid;
        height: 90%;

    }

    .box header {
        display: flex;
        align-items: center;
        padding: 0.5em;
    }

    .box {
        /* div contenant la carte et les volets de filtres et d'informations */
        box-sizing: border-box;
        display: flex;
        position: relative;
        flex: 1;
    }

    #box-1 {
        height: 6vh;
    }

    #box-2 {
        display: flex;
        position: relative;
        height: 80vh;
    }


    #box-3 {
        height: 4vh;
        display: block;
    }

    #box-4 {
        position: absolute;
        bottom: 94%;
        left: 35%;
        z-index: 2;
        width: 50%;
    }

    #map {
        /* div contenant la carte */
        width: 100%;
        height: 80vh;
        z-index: 0;

    }

    #titrePage {
        font-size: 75%;
        font-weight: bold;
        color: rgb(134, 122, 122);
    }

    #title-box {
        flex: 1;
        margin-left: 1%;
    }

    #logo-box {
        margin-right: 10px;
    }

    #logo-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    #marianne-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    /* MENU DEROULANT */
    .fr-nav__list {
        font-size: 1em;
    }

    .div_legende {
        font-size: 85%;
    }

    #fondCarte {
        font-size: 70%;
    }

    #btn_home {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 10%;
        margin-left: 2%;
        color: rgb(60, 69, 76);
        padding: .375rem .75rem;
        font-size: 0.8rem;
        z-index: 10;
    }

    /*VOLET Info*/
    #info {
        /* div qui contient les info des impacts --> s'affiche au click sur une localité */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        display: none;
    }

    .info-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*VOLET FILTRE*/
    #volet_filtre h2 {
        /* titre principal du volet des filtres */
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    #volet_filtre {
        width: 100vw;
        background: white;
        z-index: 255;
        display: none;
        overflow-y: auto;
        height: 80vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .volet-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*filtre recherche d'événement par date*/
    #btn_recherche_evenement+label {
        font-size: 18px;
    }

    /*filtre region & departement*/
    .label_lieux {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .lieu {
        border: 2px solid #000000;
        padding: 8px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /*filtre impact non géoréférencés*/
    #filtre_non_georef+label {
        font-size: 18px;
    }

    /*filtre type d'impact */
    #volet_filtre table th {
        font-size: 14px;
    }

    /*filtre type d'observation*/
    #filtre_localite_type {
        font-size: 14px;
    }

    /* Tableau type d'impact*/
    #filtres_tableau th,
    #filtres_tableau td,
    #filtres_tableau label {
        padding: 8px;
        text-align: center;
    }

    #filtres_tableau th {
        background-color: #f2f2f2;
    }

    #filtres_tableau input[type="checkbox"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Tableau type d'événement*/
    #filtres_tableau_type_impact th,
    #filtres_tableau_type_impact td,
    #filtres_tableau_type_impact label {
        padding: 8px;
        text-align: center;
        font-size: 14px;
    }

    #filtres_tableau_type_impact th {
        background-color: #f2f2f2;
    }

    #filtres_tableau_type_impact input[type="radio"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Niveau Marin */
    #div_nvm {
        height: 10px;
    }


    /********** BOUTONS FILTRES *********/
    #btn_filtre {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        font-size: 70%;
        position: absolute;
        left: 2%;
        width: 15%;
    }

    #btn_recherche,
    #btn_reset {
        /* bouton "Rechercher" pour effectuer la recherche */
        padding: 1em;
        font-size: 12px;
    }

    #btn_recherche {
        left: 75%;
    }

    #btn_reset {
        left: 3%;
    }

    #btn_ferme_filtre {
        /* bouton "Fermer" pour fermer le volet des filtres */
        font-size: 80%;
    }

    .bar_bouton {
        background-color: rgba(169, 169, 169, 0.5);
        overflow: hidden;
        padding: 7px;
        position: fixed;
        top: 88%;
        width: 97%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    #savoir_plus.expanded {
        height: auto;
    }

    /* Styles pour le texte de la boîte modale */
    .modal-content {
        font-size: 70%;
    }

    /* Style pour le bouton Fermer */
    .modal-content button {
        font-size: 12px;
        padding: 10px 20px;
        color: #000000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /*Description Info*/

    .btn-fermer {
        /* bouton "Fermer" qui ferme le volet d'info */
        font-size: 14px;
    }

    #button_affiche_csv {
        font-size: 14px;
    }

    /*balise description*/


    #voir-plus {
        font-size: 12px;
    }


    /*balise pour les sources*/
    #source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 12px;
    }


    .source {
        margin: 0;
    }

    #source-entiere {
        display: none;
    }

    #info p {
        font-size: 16px;
    }

    #info h3 {
        font-size: 23px;
    }

    #info h2 {
        font-size: 25px;
    }

    td,
    th {
        border: 1px solid #070707;
        text-align: center;
        padding: 8px;
    }

    /* Pop-Up téléphone bouton rechercher*/
    #custom-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid green;
        border-radius: 5px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 50%;
    }

    #custom-modal button {
        padding: 10px;
        margin: 10px;
        background-color: green;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        margin: 0 auto; 
    }

    /********************************** TABLEAU DES IMPACTS  ***********************************/
    #div_impact {
        /* div contenant le tableau des impacts et son titre */
        display: none;
        position: relative;
        margin-top: 1em;
        overflow-x: auto;
    }

    #div_impact h3 {
        /* titre tu tableau */
        text-align: center;
        background-color: #c5e1f7;
        margin: 0;
        padding: 1em;
    }

    #div_impact ul {
        /* titre du tableau */
        text-align: center;
        margin: 0;
        padding: 1em;
        font-size: 12px;
    }


    textarea {
        width: 90%;
        margin-bottom: 10px;
        border: 1px solid #070707;
        border-radius: 10px;
        resize: none;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    #td_source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 14px;
        height: 80%;
    }


    #telecharge_non_georef {
        /* bouton qui permet de télécharger les info des impacts au format CSV */
        position: absolute;
        right: 0;
    }

    /*Permet d'afficher fin infobulle*/

    #additionalText {
        display: inline;
    }

    .menu-item {
        display: none;
    }

    .fr-nav__btn {
        /*pour en "savoir +" et "nous contacter"*/
        font-size: 0.6em;
        height: 15%;
    }


}

/* en paysage*/
@media only screen and (max-width: 500px) and (orientation:landscape) {
    /* 1200 px = 460 point de largeur*/

    .box-container {
        display: grid;
        height: 90%;

    }

    .box header {
        display: flex;
        align-items: center;
        padding: 0.5em;
    }

    .box {
        /* div contenant la carte et les volets de filtres et d'informations */
        box-sizing: border-box;
        display: flex;
        position: relative;
        flex: 1;
    }

    #box-1 {
        height: 8vh;
    }

    #box-2 {
        display: flex;
        position: relative;
        height: 76vh;
    }


    #box-3 {
        height: 6vh;
        display: block;
    }

    #box-4 {
        position: absolute;
        bottom: 84%;
        left: 35%;
        z-index: 2;
        width: 50%;
    }

    #map {
        /* div contenant la carte */
        width: 100%;
        height: 76vh;
        z-index: 0;

    }

    #titrePage {
        font-size: 85%;
        font-weight: bold;
        color: rgb(134, 122, 122);
    }

    #title-box {
        flex: 1;
        margin-left: 25%;
    }

    #logo-box {
        margin-right: 10px;
    }

    #logo-box img {
        height: 8vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    #marianne-box img {
        height: 8vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    /* MENU DEROULANT */
    .fr-nav__list {
        font-size: 1em;
    }

    .div_legende {
        font-size: 85%;
    }

    #fondCarte {
        font-size: 80%;
        padding: 5px;
    }

    #btn_home {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 25%;
        margin-left: 2%;
        color: rgb(60, 69, 76);
        padding: .375rem .75rem;
        font-size: 0.8rem;
        z-index: 10;
    }

    /*VOLET Info*/
    #info {
        /* div qui contient les info des impacts --> s'affiche au click sur une localité */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        display: none;
    }

    .info-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*VOLET FILTRE*/
    #volet_filtre h2 {
        /* titre principal du volet des filtres */
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    #volet_filtre {
        width: 100vw;
        background: white;
        z-index: 255;
        display: none;
        overflow-y: auto;
        height: 76vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .volet-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*filtre recherche d'événement par date*/
    #btn_recherche_evenement+label {
        font-size: 18px;
    }

    /*filtre region & departement*/
    .label_lieux {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .lieu {
        border: 2px solid #000000;
        padding: 8px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /*filtre impact non géoréférencés*/
    #filtre_non_georef+label {
        font-size: 18px;
    }

    /*filtre type d'impact */
    #volet_filtre table th {
        font-size: 14px;
    }

    /*filtre type d'observation*/
    #filtre_localite_type {
        font-size: 14px;
    }

    /* Tableau type d'impact*/
    #filtres_tableau th,
    #filtres_tableau td,
    #filtres_tableau label {
        padding: 8px;
        text-align: center;
    }

    #filtres_tableau th {
        background-color: #f2f2f2;
    }

    #filtres_tableau input[type="checkbox"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Tableau type d'événement*/
    #filtres_tableau_type_impact th,
    #filtres_tableau_type_impact td,
    #filtres_tableau_type_impact label {
        padding: 8px;
        text-align: center;
        font-size: 14px;
    }

    #filtres_tableau_type_impact th {
        background-color: #f2f2f2;
    }

    #filtres_tableau_type_impact input[type="radio"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Niveau Marin */
    #div_nvm {
        height: 10px;
    }


    /********** BOUTONS FILTRES *********/
    #btn_filtre {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        font-size: 80%;
        position: absolute;
        top: 5%;
        left: 5%;
        width: 15%;
    }

    #btn_recherche,
    #btn_reset {
        /* bouton "Rechercher" pour effectuer la recherche */
        padding: 1em;
        font-size: 12px;
    }

    #btn_recherche {
        left: 85%;
    }

    #btn_reset {
        left: 3%;
    }

    #btn_ferme_filtre {
        /* bouton "Fermer" pour fermer le volet des filtres */
        font-size: 80%;
    }

    .bar_bouton {
        background-color: rgba(169, 169, 169, 0.5);
        overflow: hidden;
        padding: 7px;
        position: fixed;
        top: 88%;
        width: 97%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    #savoir_plus.expanded {
        height: auto;
    }

    /* Styles pour le texte de la boîte modale */
    .modal-content {
        font-size: 70%;
    }

    /* Style pour le bouton Fermer */
    .modal-content button {
        font-size: 12px;
        padding: 10px 20px;
        color: #000000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /*Description Info*/

    .btn-fermer {
        /* bouton "Fermer" qui ferme le volet d'info */
        font-size: 14px;
    }

    #button_affiche_csv {
        font-size: 14px;
    }

    /*balise description*/


    #voir-plus {
        font-size: 12px;
    }


    /*balise pour les sources*/
    #source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 12px;
    }


    .source {
        margin: 0;
    }

    #source-entiere {
        display: none;
    }

    #info p {
        font-size: 16px;
    }

    #info h3 {
        font-size: 23px;
    }

    #info h2 {
        font-size: 25px;
    }

    td,
    th {
        border: 1px solid #070707;
        text-align: center;
        padding: 8px;
    }

    /* Pop-Up téléphone bouton rechercher*/
    #custom-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid green;
        border-radius: 5px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 50%;
    }

    #custom-modal button {
        padding: 10px;
        margin: 10px;
        background-color: green;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        margin: 0 auto; 
    }

    /********************************** TABLEAU DES IMPACTS  ***********************************/
    #div_impact {
        /* div contenant le tableau des impacts et son titre */
        display: none;
        position: relative;
        margin-top: 1em;
        overflow-x: auto;
    }

    #div_impact h3 {
        /* titre tu tableau */
        text-align: center;
        background-color: #c5e1f7;
        margin: 0;
        padding: 1em;
    }

    #div_impact ul {
        /* titre du tableau */
        text-align: center;
        margin: 0;
        padding: 1em;
        font-size: 12px;
    }


    textarea {
        width: 90%;
        margin-bottom: 10px;
        border: 1px solid #070707;
        border-radius: 10px;
        resize: none;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    #td_source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 14px;
        height: 80%;
    }


    #telecharge_non_georef {
        /* bouton qui permet de télécharger les info des impacts au format CSV */
        position: absolute;
        right: 0;
    }

    /*Permet d'afficher fin infobulle*/

    #additionalText {
        display: inline;
    }

    .menu-item {
        display: none;
    }

    .fr-nav__btn {
        /*pour en "savoir +" et "nous contacter"*/
        font-size: 0.6em;
        height: 15ù;
    }


}

/* style pour les IPAD*/
/* en portrait */
@media only screen and (min-width: 501px) and (max-width : 1199px) and (orientation:portrait) {
    .box-container {
        display: grid;
        height: 90%;

    }

    .box header {
        display: flex;
        align-items: center;
        padding: 0.5em;
    }

    .box {
        /* div contenant la carte et les volets de filtres et d'informations */
        box-sizing: border-box;
        display: flex;
        position: relative;
        flex: 1;
    }

    #box-1 {
        height: 8vh;
    }

    #box-2 {
        display: flex;
        position: relative;
        height: 80vh;
    }


    #box-3 {
        height: 5vh;
        display: block;
    }

    #box-4 {
        position: absolute;
        bottom: 95%;
        z-index: 2;
        width: 50%;
    }

    #map {
        /* div contenant la carte */
        width: 100%;
        height: 80vh;
        z-index: 0;

    }

    #titrePage {
        font-size: 90%;
        font-weight: bold;
        color: rgb(134, 122, 122);
    }

    #title-box {
        flex: 1;
        margin-left: 10%;
    }

    #logo-box {
        margin-right: 10px;
    }

    #logo-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    #marianne-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    /* MENU DEROULANT */
    .fr-nav__list {
        font-size: 1.4em;
    }

    .div_legende {
        font-size: 85%;
    }

    #fondCarte {
        font-size: 70%;
    }

    #nvm {
        margin-bottom: 5%;
    }

    #btn_home {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 10%;
        margin-left: 2%;
        color: rgb(60, 69, 76);
        padding: .375rem .75rem;
        font-size: 0.8rem;
        z-index: 10;
    }

    /*VOLET Info*/
    #info {
        /* div qui contient les info des impacts --> s'affiche au click sur une localité */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        display: none;
    }

    .info-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*VOLET FILTRE*/
    #volet_filtre h2 {
        /* titre principal du volet des filtres */
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    #volet_filtre {
        width: 100vw;
        background: white;
        z-index: 255;
        display: none;
        overflow-y: auto;
        height: 80vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .volet-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*filtre recherche d'événement par date*/
    #btn_recherche_evenement+label {
        font-size: 18px;
    }

    /*filtre region & departement*/
    .label_lieux {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .lieu {
        border: 2px solid #000000;
        padding: 8px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /*filtre impact non géoréférencés*/
    #filtre_non_georef+label {
        font-size: 18px;
    }

    /*filtre type d'impact */
    #volet_filtre table th {
        font-size: 14px;
    }

    /*filtre type d'observation*/
    #filtre_localite_type {
        font-size: 14px;
    }

    /* Tableau type d'impact*/
    #filtres_tableau th,
    #filtres_tableau td,
    #filtres_tableau label {
        padding: 8px;
        text-align: center;
    }

    #filtres_tableau th {
        background-color: #f2f2f2;
    }

    #filtres_tableau input[type="checkbox"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Tableau type d'événement*/
    #filtres_tableau_type_impact th,
    #filtres_tableau_type_impact td,
    #filtres_tableau_type_impact label {
        padding: 8px;
        text-align: center;
        font-size: 14px;
    }

    #filtres_tableau_type_impact th {
        background-color: #f2f2f2;
    }

    #filtres_tableau_type_impact input[type="radio"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Niveau Marin */
    #div_nvm {
        height: 10px;
    }


    /********** BOUTONS FILTRES *********/
    #btn_filtre {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        font-size: 70%;
        position: absolute;
        left: 2%;
        width: 10%;
    }

    #btn_recherche,
    #btn_reset {
        /* bouton "Rechercher" pour effectuer la recherche */
        padding: 1em;
        font-size: 12px;
    }

    #btn_recherche {
        left: 85%;
    }

    #btn_reset {
        left: 3%;
    }

    #btn_ferme_filtre {
        /* bouton "Fermer" pour fermer le volet des filtres */
        font-size: 80%;
    }

    .bar_bouton {
        background-color: rgba(169, 169, 169, 0.5);
        overflow: hidden;
        padding: 7px;
        position: fixed;
        top: 88%;
        width: 98%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    #savoir_plus.expanded {
        height: auto;
    }

    /* Styles pour le texte de la boîte modale */
    .modal-content {
        font-size: 70%;
    }

    /* Style pour le bouton Fermer */
    .modal-content button {
        font-size: 12px;
        padding: 10px 20px;
        color: #000000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /*Description Info*/

    .btn-fermer {
        /* bouton "Fermer" qui ferme le volet d'info */
        font-size: 14px;
    }

    #button_affiche_csv {
        font-size: 14px;
    }

    /*balise description*/


    #voir-plus {
        font-size: 12px;
    }


    /*balise pour les sources*/
    #source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 12px;
    }


    .source {
        margin: 0;
    }

    #source-entiere {
        display: none;
    }

    #info p {
        font-size: 16px;
    }

    #info h3 {
        font-size: 23px;
    }

    #info h2 {
        font-size: 25px;
    }

    td,
    th {
        border: 1px solid #070707;
        text-align: center;
        padding: 8px;
    }

    /* Pop-Up téléphone bouton rechercher*/
    #custom-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid green;
        border-radius: 5px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 50%;
    }

    #custom-modal button {
        padding: 10px;
        margin: 10px;
        background-color: green;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        margin: 0 auto; 
    }
    

    /********************************** TABLEAU DES IMPACTS  ***********************************/
    #div_impact {
        /* div contenant le tableau des impacts et son titre */
        display: none;
        position: relative;
        margin-top: 1em;
    }

    #div_impact h3 {
        /* titre tu tableau */
        text-align: center;
        background-color: #c5e1f7;
        margin: 0;
        padding: 1em;
    }

    #div_impact ul {
        /* titre du tableau */
        text-align: center;
        margin: 0;
        padding: 1em;
        font-size: 12px;
    }


    textarea {
        width: 90%;
        margin-bottom: 10px;
        border: 1px solid #070707;
        border-radius: 10px;
        resize: none;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    #td_source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 14px;
        height: 80%;
    }


    #telecharge_non_georef {
        /* bouton qui permet de télécharger les info des impacts au format CSV */
        position: absolute;
        right: 0;
    }

    /*Permet d'afficher fin infobulle*/

    #additionalText {
        display: inline;
    }

    .menu-item {
        display: none;
    }

    .fr-nav__btn {
        /*pour en "savoir +" et "nous contacter"*/
        font-size: 0.6em;
        height: 15ù;
    }
}

/* en paysage*/
@media only screen and (min-width: 501px) and (max-width : 1199px) and (orientation:landscape) {
    .box-container {
        display: grid;
        height: 90%;

    }

    .box header {
        display: flex;
        align-items: center;
        padding: 0.5em;
    }

    .box {
        /* div contenant la carte et les volets de filtres et d'informations */
        box-sizing: border-box;
        display: flex;
        position: relative;
        flex: 1;
    }

    #box-1 {
        height: 8vh;
    }

    #box-2 {
        display: flex;
        position: relative;
        height: 80vh;
    }


    #box-3 {
        height: 5vh;
        display: block;
    }

    #box-4 {
        position: absolute;
        bottom: 93%;
        left: 40%;
        z-index: 2;
        width: 50%;
    }

    #map {
        /* div contenant la carte */
        width: 100%;
        height: 80vh;
        z-index: 0;

    }

    #titrePage {
        font-size: 90%;
        font-weight: bold;
        color: rgb(134, 122, 122);
    }

    #title-box {
        flex: 1;
        margin-left: 25%;
    }

    #logo-box {
        margin-right: 10px;
    }

    #logo-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    #marianne-box img {
        height: 4vh;
        /* Réglez la hauteur du logo*/
        width: auto;
    }

    /* MENU DEROULANT */
    .fr-nav__list {
        font-size: 1.2em;
    }

    .div_legende {
        font-size: 85%;
    }

    #fondCarte {
        font-size: 70%;
    }

    #btn_home {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 15%;
        margin-left: 2%;
        color: rgb(60, 69, 76);
        padding: .375rem .75rem;
        font-size: 0.8rem;
        z-index: 10;
    }

    /*VOLET Info*/
    #info {
        /* div qui contient les info des impacts --> s'affiche au click sur une localité */
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        display: none;
    }

    .info-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*VOLET FILTRE*/
    #volet_filtre h2 {
        /* titre principal du volet des filtres */
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    #volet_filtre {
        width: 100vw;
        background: white;
        z-index: 255;
        display: none;
        overflow-y: auto;
        height: 80vh;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .volet-ouvert {
        /*appel dans fonction.js*/
        display: block;
    }

    /*filtre recherche d'événement par date*/
    #btn_recherche_evenement+label {
        font-size: 18px;
    }

    /*filtre region & departement*/
    .label_lieux {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .lieu {
        border: 2px solid #000000;
        padding: 8px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /*filtre impact non géoréférencés*/
    #filtre_non_georef+label {
        font-size: 18px;
    }

    /*filtre type d'impact */
    #volet_filtre table th {
        font-size: 14px;
    }

    /*filtre type d'observation*/
    #filtre_localite_type {
        font-size: 14px;
    }

    /* Tableau type d'impact*/
    #filtres_tableau th,
    #filtres_tableau td,
    #filtres_tableau label {
        padding: 8px;
        text-align: center;
    }

    #filtres_tableau th {
        background-color: #f2f2f2;
    }

    #filtres_tableau input[type="checkbox"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Tableau type d'événement*/
    #filtres_tableau_type_impact th,
    #filtres_tableau_type_impact td,
    #filtres_tableau_type_impact label {
        padding: 8px;
        text-align: center;
        font-size: 14px;
    }

    #filtres_tableau_type_impact th {
        background-color: #f2f2f2;
    }

    #filtres_tableau_type_impact input[type="radio"] {
        margin: 0;
        vertical-align: middle;
    }

    /* Niveau Marin */
    #div_nvm {
        height: 10px;
    }


    /********** BOUTONS FILTRES *********/
    #btn_filtre {
        /* bouton "Filtre" pour faire apparaitre le volet des filtres */
        font-size: 70%;
        position: absolute;
        top: 2%;
        left: 2%;
        width: 10%;
    }

    #btn_recherche,
    #btn_reset {
        /* bouton "Rechercher" pour effectuer la recherche */
        padding: 1em;
        font-size: 12px;
    }

    #btn_recherche {
        left: 90%;
    }

    #btn_reset {
        left: 3%;
    }

    #btn_ferme_filtre {
        /* bouton "Fermer" pour fermer le volet des filtres */
        font-size: 80%;
    }

    .bar_bouton {
        background-color: rgba(169, 169, 169, 0.5);
        overflow: hidden;
        padding: 7px;
        position: fixed;
        top: 88%;
        width: 99%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #savoir_plus.expanded {
        height: auto;
    }

    /* Styles pour le texte de la boîte modale */
    .modal-content {
        font-size: 70%;
    }

    /* Style pour le bouton Fermer */
    .modal-content button {
        font-size: 12px;
        padding: 10px 20px;
        color: #000000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /*Description Info*/

    .btn-fermer {
        /* bouton "Fermer" qui ferme le volet d'info */
        font-size: 14px;
    }

    #button_affiche_csv {
        font-size: 14px;
    }

    /*balise description*/


    #voir-plus {
        font-size: 12px;
    }


    /*balise pour les sources*/
    #source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 12px;
    }


    .source {
        margin: 0;
    }

    #source-entiere {
        display: none;
    }

    #info p {
        font-size: 16px;
    }

    #info h3 {
        font-size: 23px;
    }

    #info h2 {
        font-size: 25px;
    }

    td,
    th {
        border: 1px solid #070707;
        text-align: center;
        padding: 8px;
    }

    /* Pop-Up téléphone bouton rechercher*/
    #custom-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid green;
        border-radius: 5px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 50%;
    }

    #custom-modal button {
        padding: 10px;
        margin: 10px;
        background-color: green;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        margin: 0 auto; 
    }

    /********************************** TABLEAU DES IMPACTS  ***********************************/
    #div_impact {
        /* div contenant le tableau des impacts et son titre */
        display: none;
        position: relative;
        margin-top: 1em;
    }

    #div_impact h3 {
        /* titre tu tableau */
        text-align: center;
        background-color: #c5e1f7;
        margin: 0;
        padding: 1em;
    }

    #div_impact ul {
        /* titre du tableau */
        text-align: center;
        margin: 0;
        padding: 1em;
        font-size: 12px;
    }


    textarea {
        width: 90%;
        margin-bottom: 10px;
        border: 1px solid #070707;
        border-radius: 10px;
        resize: none;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    #td_source {
        border: 2px solid #070707;
        background-color: white;
        padding: 0.5em 0.5em;
        border-radius: 10px;
        font-size: 14px;
        height: 80%;
    }


    #telecharge_non_georef {
        /* bouton qui permet de télécharger les info des impacts au format CSV */
        position: absolute;
        right: 0;
    }

    /*Permet d'afficher fin infobulle*/

    #additionalText {
        display: inline;
    }

    .menu-item {
        display: none;
    }

    .fr-nav__btn {
        /*pour en "savoir +" et "nous contacter"*/
        font-size: 0.6em;
        height: 15%;
    }
}

/* au-dessus de 1200px --> ordinateur et donc style.css pris en compte*/