#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

/* --- Image en fond --- */

/* Graphique 1 (Page d'accueil) */
#container::before {
    display: inline-block;
    position: absolute;
    content: ' ';
    background-image: url(https://www.lsce.ipsl.fr/wp-content/uploads/2024/04/lsce_logo.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 60px;
    opacity: 0.5;
    top: 60px;
    bottom: 110px;
    left: 90px;
    right: 90px;
}

/* Graphique 2 (Page "Observations en temps réel") */
#container-complet div.chart-logo-lsce {
    position: relative;
}

#container-complet div.chart-logo-lsce::before {
    display: inline-block;
    position: absolute;
    content: ' ';
    background-image: url(https://www.lsce.ipsl.fr/wp-content/uploads/2024/04/lsce_logo.gif);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 60px;
    opacity: 0.5;
    left: 92px;
    right: 92px;
    top: 12px;
    bottom: 12px;
}

/*#container-complet div.xAxis-chart-logo-lsce::before {
    bottom: 125px;
}*/

/* --- Légende customisée --- */

#charts-legend {
    padding: 30px 80px 0px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px 40px;
    flex-wrap: wrap;
    font-style: normal;
    font-weight: 600;
}

#charts-legend div.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

#charts-legend div.legend-item > label {
    cursor: pointer;
}

#charts-legend div.legend-item:has(> input:not(:checked)) > label {
    text-decoration-line: line-through;
    filter: contrast(20%);
}

/* --- Switch période --- */
/* Crédit : https://uiverse.io/ErzenXz/weak-falcon-28 */

#switch-annuel-mensuel {
    padding: 30px 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

label.switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

label.switch input[type="checkbox"] {
    display: none;
}

label.switch div.toggle {
    width: fit-content;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 2px solid grey;
}

label.switch div.toggle .mensuel, label.switch div.toggle .annuel {
    min-width: 60px;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 1px 1px 1px var(--gris_clair);
    font-size: medium;
    font-weight: 600;
}

label.switch input[type="checkbox"]:not(:checked) + div.toggle .mensuel, label.switch input[type="checkbox"]:checked + div.toggle .annuel {
    background-color: var(--primaire);
    color: var(--texte_fond_sombre);
    text-shadow: 1px 1px 1px black;
}

/* --- Media Queries --- */

@media screen and (max-width: 548px) {
    /* Graphique 1 (Page d'accueil) */
    #container::before {
        bottom: 105px;
        left: 45px;
        right: 45px;
    }
    /* Graphique 2 (Page "Observations en temps réel") */
    #container-complet {
        padding-top: 30px;
    }
    #container-complet div.chart-logo-lsce::before {
        left: 45px;
        right: 45px;
    }
    /* --- Légende customisée --- */
    #charts-legend {
        padding: 30px;
    }
    /* --- Switch période --- */
    #switch-annuel-mensuel {
        padding: 30px;
        justify-content: center;
        flex-direction: column;
        border-top: var(--gris_clair) 1px solid;
        border-bottom: var(--gris_clair) 1px solid;
    }
    #switch-annuel-mensuel > p {
        margin: 0;
    }
}