body,
html {
    margin: 0;
    padding: 0;
    display: grid;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}

.box-container {
    display: grid;
    height: 100%;
}

.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: 10vh;

}

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


#box-3 {
    background: #fff;
    height: 5vh;
}

#box-4 {
    position: absolute;
    bottom: 95%;
    left: 30%;
    z-index: 2;
    width: 38%;
    margin-left: 2px;
}

#fondCarte {
    color: black;
    opacity: 0.5;
    font-size: 15px;
    font-weight: bold;
    padding: 15px;
}

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

#titrePage {
    font-size: 2em;
    font-weight: bold;
    color: rgb(9, 9, 9);
}

#marianne-box img {
    height: 8vh;
    /* Réglez la hauteur du logo*/
    max-width: 100%;
    margin-right: 5px;
}

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

ul {
    padding: 0;
    text-align: center;
}

li {
    list-style: none;
}

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

}

.box header {
    /* entête de la page */
    padding: 1em;
    background: #fff;
    grid-template-columns: auto 1fr;
    display: flex;
    width: 100%;
    align-items: center;
}

.box header img {
    max-width: 100%;
    height: auto;
}


#btn_filtre {
    /* bouton "Filtre" pour faire apparaitre le volet des filtres */
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 2%;
    left: 2%;
    color: rgb(60, 69, 76);
    border: 2px solid rgba(128, 132, 135, 0.5);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    z-index: 10;
    width: 90px;
    display: flex;
    justify-content: space-between;
    box-sizing: content-box;
    align-items: center;
}

#btn_filtre:hover {
    /* bouton "Filtre" au survol */
    background-color: rgb(128, 132, 135);
    color: white;
    border: 1px solid rgb(128, 132, 135);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

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


/**************************** volet des filtres *******************************/

#volet_filtre {
    /* article contenant les filtres */
    width: 48%;
    background: white;
    z-index: 255;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    height: 85vh;
}

#btn_ferme_filtre {
    /* bouton "Fermer" pour fermer le volet des filtres */
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    cursor: pointer;
    border: solid 1px transparent;
}

#volet_filtre h2 {
    /* titre principal du volet des filtres */
    padding: 1em;
    margin: 0 0 0.83em 0;
}

#volet_filtre h3 {
    /* titre secondaire volet filtres */
    background-color: #c5e1f7;
}

#erreur_recherche {
    /* p qui affiche un message quand il n'y a pas de résultat pour la recherche de localités */
    color: red;
}

#erreur_recherche_non_georef {
    /* p qui affiche un message quand il n'y a pas de résultat pour la recherche d'impacts non géoréférencés */
    color: red;
}

#erreur_recherche_evenement {
    /* p qui affiche un message quand il n'y a pas de résultat pour la recherche d'événements */
    color: red;
}

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

#btn_recherche,
#btn_reset {
    /* bouton "Rechercher" pour effectuer la recherche */
    border: solid 1px transparent;
    padding: 0.5em;
    cursor: pointer;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
}

#btn_recherche {
    left: 20%;
}

#section_evenement {
    /* section dans laquelle se trouve la liste des événements */
    overflow-y: auto;
    max-height: 400px;
}

#telecharge_liste_evenement {
    /* bouton qui permet de télécharger la liste des événements filtrés */
    margin-top: 1em;
}

#section_evenement #notice_evenement {
    /* paragraphe notice décrivant comment se servir de la liste des événements */
    width: 95%;
    font-weight: bold;
}

#section_evenement li {
    /* li qui contient une data d'événement */
    cursor: pointer;
}

#section_evenement ul {
    /* ul qui englobe un seul événement */
    display: flex;
    justify-content: space-around;
}

.div_nadm {
    /* div qui contient le label et l'input des filtres région et département */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.div_nadm input {
    /* input région et département */
    width: 90%;
    margin: auto;
    margin-bottom: 1em;
}

.ui-autocomplete {
    /* liste proposé par l'auto-complétion */
    width: 90%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* affichage tableau filtre*/
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

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

tr:nth-child(even) {
    background-color: #dddddd;
}


/*********** SLIDER ***********/
#slider-range {
    /* div contenant le slider intervalle */
    width: 90%;
    margin: auto;
    margin-bottom: 1em;
}

#div_annee {
    /* div contenant les input pour modifier l'intervalle des années à la main */
    display: flex;
    height: 1em;
}

#div_annee p {
    /* p contenant le tiret qui sépare l'année min et l'année max */
    margin: 0px;
    width: 2%;
}

.annee {
    /* input année min et max */
    border: 0;
    color: #f6931f;
    font-weight: bold;
    width: 49%;
    text-align: center;
}

#filtre_recherche_mot {
    /* input qui permet de rechercher un texte */
    display: block;
    margin-bottom: 1em;
    border: 1px solid grey;
    padding: 0.5em;
    margin-top: 1em;
}


#volet_filtre table {
    /* tableau filtres impacts et tableau filtres type événement */
    border: 2px solid #000000;
    border-collapse: collapse;
    width: 95%;
}

#volet_filtre table tr {
    /* tableau filtres impacts et tableau filtres type événement */
    height: 2em;
}

#volet_filtre table td {
    /* case du tableau contenant les cases à cocher */
    border: 1px solid grey;
    border-left: none;
    width: 10%;
    padding: 0px;
    margin: 0px;
    align-content: center;
}

#volet_filtre table th {
    /* case du tableau contenant le nom du filtre */
    border: 1px solid grey;
    border-right: none;
    width: 40%;
    padding: 0px;
    font-size: 12px;
}

#volet_filtre table th label {
    /* "lien" permettant de cocher la case */
    display: block;
}

#filtre_nvm_inferieur input[type="checkbox"],
#filtre_nvm_inferieur label {
    vertical-align: middle;
}

#filtre_nvm_inferieur {
    /* Marge entre "inférieur à" avec autre condition marine */
    margin-bottom: 1em;
}


/* Niveau Marin */
.nvm-date {
    /* li qui contient la date et l'heure de la mesure des niveaux marin */
    margin-bottom: 0.5em;
}

.checkbox-container {
    display: flex;
    margin-left: 30%;
}

.checkbox-container label {
    margin-right: 10px;
    display: block;
    margin-bottom: 5px;
}

#div_nvm {
    border: 1px solid #ccc;
}

#div_nvm h3 {
    color: #333;
}

#div_nvm div,
#div_nvm section {
    margin-bottom: 20px;
    margin-top: 20px;
}

#div_nvm input[type="checkbox"],
#div_nvm input[type="number"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

#div_nvm input[type="checkbox"] {
    width: auto;
}

#volet_filtre>*,
#div_filtre_basic>* {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#recherche,
#filtre_recherche_mot,
#filtre_hauteur_max_observee,
#filtre_hauteur_max_instantanee,
#filtre_surcote_pleine_mer,
#filtre_surcote_instantanee {
    margin-left: 50%;
    transform: translateX(-50%);
    /* permet de centrer des input */
}

/*bouton affichage tableau Impact*/
#btn_afficher_tableau {
    display: none;
    margin: 0 auto;
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
    background-color: #83c2ee;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

#btn_afficher_tableau:hover {
    background-color: #74b9eb;
}


/************************************** VOLET INFORMATION *****************************************/

#info {
    /* div qui contient les info des impacts --> s'affiche au click sur une localité */
    width: 30%;
    display: none;
    overflow-y: auto;
    position: relative;
    height: 85vh;
    /*font-family: 'Rubik Glitch', sans-serif;*/
    font-family: 'Roboto', sans-serif;
}

/*voir la source*/
#voir-plus {
    /*font-family: 'Rubik Glitch', sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
}

.btn-fermer {
    /* bouton "Fermer" qui ferme le volet d'info */
    position: sticky;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    cursor: pointer;
    border: solid 1px transparent;
}

/******* contenu ajouté dynamiquement dans le volet info en JavaScript (JQuerry) *******/

#button_affiche_csv {
    /* bouton qui permet de télécharger les informations d'une localité au format CSV */
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#info p,
#info h3,
#info h2 {
    /* p et titre du volet info */
    text-align: center;
}

#info h2 {
    /* titre principal du volet info */
    margin: 0;
}

.type_et_date {
    /* p qui contient le type de l'événement et la date */
    text-decoration: underline;
}

#info article:nth-child(2n+1) {
    /* sélectionne un article sur deux à partir du premier article */
    background-color: lightgrey;
}

#info article:nth-child(2n) {
    /* sélectionne un article sur deux à partir du deuxème article */
    background-color: rgb(197, 225, 247);
}

#info>*:not(button) {
    /* sélectionne tous les enfants direct sauf le button fermer */
    padding: 1em;
}

.bold {
    font-weight: bold;
}


/*balise description*/
textarea {
    width: 90%;
    height: 100px;
    margin-bottom: 10px;
    border: 2px solid #070707;
    border-radius: 10px;
    resize: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 0.5em 0.5em;
}


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


.source {
    margin: 0;
}

#source-entiere {
    /* textarea caché qui stock la description entière de l'événement */
    display: none;
}

/********************************** 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;
}


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


/****************************TABLEAU IMPACT CSV ********************/
#table_impact_csv {
    /* cache le tableau correspondant au fichier CSV */
    display: none;
}

.tabulator-cell {
    /* cellule du tabulator */
    max-width: 300px;
}

/*************************** LEGENDE **********************/
#legende {
    /* section qui contient la légende */
    position: absolute;
    z-index: 1;
    bottom: 1.8em;
    left: 0;
    padding: 1em;
    background-color: rgb(255, 255, 255, 0.4);
}

.div_legende {
    font-size: 16px;
}

.div_legende i {
    font-size: 8px;
    padding: 8px 8px;
}

.rond_legende {
    /* div qui forme les ronds de couleur */
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid black;
}

#legende_bleu {
    /* div bleu */
    background-color: rgb(1, 18, 254);
}

#legende_rouge {
    /* div rouge */
    background-color: rgb(247, 21, 23);
}

#legende_violet {
    /* div violet */
    background-color: rgb(146, 64, 164);
}

#legende_blanc {
    /* div blanc */
    background-color: rgb(254, 254, 254);
}

#legende_jaune {
    /* div jaune */
    background-color: rgb(247, 254, 60);
}

#legende h3 {
    /* titre "Légende" */
    margin: 0 0 1em 1em;
}

#legende #trait_separation {
    /* trait de séparation de la légende */
    border-top: dashed 1px grey;
}


.legend {
    display: inline-block;
    padding: 28px 28px 30px 30px;
    font: 12px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
    line-height: 60px;
    color: #555;
    border-radius: 50%;
    /*    border: 1px solid black;*/

}

.link_gforge {
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    color: black;
    font-weight: 500;
    top: 60px;
}

/* Infobulle */
.infobulle {
    transform: scale(0) rotateX(-180deg);
    position: absolute;
    background-color: white;
    color: black;
    border-radius: 5px;
    padding: 8px;
    margin-top: 10px;
    box-shadow: 1px 1px 0 0 0.5 rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transition: 1s;
    font-size: 1.2em;
}

.infobulle::before {
    content: ' ';
    position: absolute;
    border-bottom: 8px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    margin-top: -16px;
    margin-left: 10px;
}

.link_gforge:hover>.infobulle {
    transform: scale(1) rotateX(0deg);
}


/********************* Volet Bouton en Savoir plus *************/
.info_plus {
    color: black !important;
    ;
    font-weight: 170;
    font-size: 1em;
    text-decoration: none;
    background: linear-gradient(#c5e1f7, transparent);
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    resize: none;

}

.info_plus:hover {
    cursor: help;
}

#savoir_plus {
    position: absolute;
    right: 10px;
}

/* Taille écriture menu déroulant*/
/* Styles pour la navigation */
.fr-nav__list {
    list-style: none;
    padding: 0;
    background-color: #fff;
    text-align: center;
    font-size: 1em;
    margin-bottom: 0px;
}

/*permet de ne pas afficher fin "En savoir +"*/
#additionalText {
    display: none;
}

/*affiche le menu Déroulant (les 2 premiers)*/
.menu-item {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.fr-nav__btn {
    /*pour en "savoir +" et "nous contacter"*/
    font-size: 1em;

}

/* Styles pour la boîte modale */
.modal {
    position: absolute;
    top: 15%;
    width: 80%;
    margin: 7%;
    background: #fff;
    padding: 10px;
    z-index: 1000;
    display: none;
}

.styleModal {
    text-align: justify;
}

.leaflet-left .leaflet-control {
    margin-left: 10px;
    background-color: rgba(243, 249, 255, 0.5);
}