/* =========================================================
   STATION METEO JULIEN
   INTERFACE V11
   ========================================================= */

:root {

    --v11-bg:
        #06131f;

    --v11-panel:
        #091e2d;

    --v11-panel2:
        #0c2638;

    --v11-border:
        rgba(
            75,
            170,
            225,
            0.20
        );

    --v11-cyan:
        #17b8ff;

    --v11-green:
        #28ddb9;

    --v11-orange:
        #ff9b42;

    --v11-red:
        #ff5d68;

    --v11-lime:
        #7ad51d;

    --v11-purple:
        #bd6cff;

    --v11-text:
        #edf7fc;

    --v11-muted:
        #81a1b4;

}


/* =========================================================
   BASE
   ========================================================= */

body {

    background:
        radial-gradient(
            circle at 25% -5%,
            rgba(
                20,
                155,
                230,
                .10
            ),
            transparent 28%
        ),
        #06131f
        !important;

}


.chart-card,
.metric,
.big-card,
.sensor-card,
.settings-card,
.forecast-row {

    border-color:
        var(
            --v11-border
        )
        !important;

}


.chart-card,
.big-card,
.sensor-card,
.settings-card {

    background:
        linear-gradient(
            145deg,
            #0b2233,
            #071824
        )
        !important;

}


.metric {

    transition:
        transform .18s ease,
        border-color .18s ease;

}


.metric:hover {

    transform:
        translateY(
            -2px
        );

    border-color:
        rgba(
            23,
            184,
            255,
            .42
        )
        !important;

}


/* =========================================================
   BLOC HERO
   ========================================================= */

.v11-hero {

    display:
        grid;

    grid-template-columns:
        minmax(
            220px,
            .8fr
        )
        minmax(
            400px,
            2.2fr
        );

    gap:
        18px;

    margin-bottom:
        18px;

    padding:
        20px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 0 25%,
            rgba(
                23,
                184,
                255,
                .16
            ),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0c283b,
            #071924 68%
        );

}


.v11-temp {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.v11-kicker {

    color:
        var(
            --v11-muted
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.v11-temp-value {

    margin-top:
        7px;

    color:
        white;

    font-size:
        clamp(
            50px,
            6vw,
            76px
        );

    line-height:
        .95;

    font-weight:
        800;

    letter-spacing:
        -.05em;

}


.v11-temp-extra {

    margin-top:
        10px;

    color:
        #b5ccd8;

    font-size:
        12px;

}


.v11-current-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                110px,
                1fr
            )
        );

    gap:
        9px;

}


.v11-current-item {

    padding:
        12px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        13px;

    background:
        rgba(
            5,
            20,
            31,
            .55
        );

}


.v11-current-item span {

    display:
        block;

    color:
        var(
            --v11-muted
        );

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;

}


.v11-current-item strong {

    display:
        block;

    margin-top:
        6px;

    color:
        white;

    font-size:
        17px;

}


/* =========================================================
   TITRES
   ========================================================= */

.v11-section {

    margin:
        18px 0;

}


.v11-section-head {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;

}


.v11-section-head h3 {

    margin:
        0;

    color:
        white;

    font-size:
        18px;

}


.v11-section-head p {

    margin:
        4px 0 0;

    color:
        var(
            --v11-muted
        );

    font-size:
        10px;

}


/* =========================================================
   GRAPHIQUES
   ========================================================= */

.v11-chart-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;

}


.v11-chart-card {

    min-width:
        0;

    padding:
        15px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #0a2131,
            #071824
        );

}


.v11-chart-card.wide {

    grid-column:
        1 / -1;

}


.v11-chart-title {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        12px;

}


.v11-chart-title strong {

    color:
        white;

    font-size:
        14px;

}


.v11-chart-title span {

    color:
        var(
            --v11-muted
        );

    font-size:
        9px;

}


.v11-chart {

    position:
        relative;

    height:
        270px;

}


.v11-chart-card.wide
.v11-chart {

    height:
        300px;

}


/* =========================================================
   RESUME JOUR
   ========================================================= */

.v11-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                110px,
                1fr
            )
        );

    gap:
        9px;

    margin-bottom:
        14px;

}


.v11-summary-item {

    padding:
        11px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        12px;

    background:
        rgba(
            7,
            27,
            41,
            .85
        );

}


.v11-summary-item span {

    display:
        block;

    color:
        var(
            --v11-muted
        );

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

}


.v11-summary-item strong {

    display:
        block;

    margin-top:
        5px;

    color:
        white;

    font-size:
        14px;

}


/* =========================================================
   OUTILS HISTORIQUE
   ========================================================= */

.v11-history-tools {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    align-items:
        center;

    margin-bottom:
        14px;

}


.v11-button,
.v11-date {

    height:
        38px;

    padding:
        0 12px;

    color:
        white;

    border:
        1px solid
        rgba(
            46,
            139,
            196,
            .40
        );

    border-radius:
        10px;

    background:
        #092338;

    font:
        inherit;

}


.v11-button {

    cursor:
        pointer;

    font-weight:
        700;

}


.v11-button:hover {

    border-color:
        var(
            --v11-cyan
        );

}


.v11-date {

    min-width:
        220px;

}


/* =========================================================
   TABLEAU
   ========================================================= */

.v11-table-wrap {

    overflow:
        auto;

    max-height:
        520px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        14px;

}


.v11-table {

    width:
        100%;

    min-width:
        1100px;

    border-collapse:
        collapse;

    font-size:
        10px;

}


.v11-table th {

    position:
        sticky;

    top:
        0;

    z-index:
        5;

    padding:
        10px 8px;

    color:
        #a9c5d5;

    background:
        #0b293d;

    border-bottom:
        1px solid
        var(
            --v11-border
        );

    text-align:
        right;

}


.v11-table td {

    padding:
        9px 8px;

    color:
        #dcebf2;

    border-bottom:
        1px solid
        rgba(
            98,
            160,
            195,
            .08
        );

    text-align:
        right;

}


.v11-table th:first-child,
.v11-table td:first-child {

    text-align:
        left;

}


.v11-table tbody tr:hover {

    background:
        rgba(
            23,
            184,
            255,
            .07
        );

}


/* =========================================================
   TEMPS REEL / CAPTEURS
   ========================================================= */

.v11-live-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                120px,
                1fr
            )
        );

    gap:
        10px;

    margin-bottom:
        18px;

}


.v11-live {

    padding:
        14px;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0b2334,
            #071824
        );

}


.v11-live span {

    display:
        block;

    color:
        var(
            --v11-muted
        );

    font-size:
        9px;

    text-transform:
        uppercase;

}


.v11-live strong {

    display:
        block;

    margin-top:
        6px;

    color:
        white;

    font-size:
        19px;

}


.v11-online {

    color:
        var(
            --v11-green
        )
        !important;

}


/* =========================================================
   PREVISIONS
   ========================================================= */

.v11-forecast-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                120px,
                1fr
            )
        );

    gap:
        9px;

    margin-bottom:
        15px;

}


.v11-forecast-hour {

    padding:
        13px;

    text-align:
        center;

    border:
        1px solid
        var(
            --v11-border
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0b2334,
            #071824
        );

}


.v11-forecast-icon {

    font-size:
        26px;

}


.v11-forecast-period {

    margin-top:
        4px;

    color:
        white;

    font-weight:
        800;

}


.v11-forecast-temp {

    margin-top:
        5px;

    color:
        white;

    font-size:
        20px;

    font-weight:
        800;

}


.v11-forecast-info {

    margin-top:
        5px;

    color:
        var(
            --v11-muted
        );

    font-size:
        9px;

    line-height:
        1.45;

}


/* =========================================================
   ANCIENS GRAPHIQUES HISTORIQUE
   ========================================================= */

#page-history
.chart-card {

    display:
        none;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 1000px
) {

    .v11-summary {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


    .v11-live-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .v11-forecast-summary {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


@media (
    max-width: 760px
) {

    .v11-hero {

        grid-template-columns:
            1fr;

    }


    .v11-current-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .v11-chart-grid {

        grid-template-columns:
            1fr;

    }


    .v11-chart-card.wide {

        grid-column:
            auto;

    }


    .v11-summary {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .v11-chart,
    .v11-chart-card.wide
    .v11-chart {

        height:
            250px;

    }

}



/* =========================================================
   V11 MOBILE - PAS D'AFFICHAGE DE L'ANCIEN DASHBOARD
   PENDANT LE CHARGEMENT
   ========================================================= */

@media (
    max-width: 760px
) {

    html.v11-mobile-loading
    body {

        opacity:
            0 !important;

    }


    body {

        transition:
            opacity .12s ease;

    }

}