/* Délcaration des variables de style */
:root {
    --fond: #0f0f12;
    --txt: #f6f6f9;
    --bord: #2a2a33;
    --accent: #ffd54a;
    --muted: #bdbdc7;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter, system-ui, Arial, sans-serif;
    background: var(--fond);
    color: var(--txt);
}

header {
    position: sticky;
    top: 0;
    background: #131318;
    border-bottom: 1px solid #1f1f25;
}

.container {
    margin: auto;
    padding: 1rem;
}

h1 {
    margin: 0;
    font-size: 1.7rem;
}

h2 {
    font-size: 1.1rem;
    margin: .4rem 0 .4rem;
    color: #f1f1f7;
    letter-spacing: .2px;
}


a{
    color: var(--txt);
    text-decoration: none;
}

.line {
    height: 6px;
    background: var(--accent);
    border-radius: 6px;
    margin: .25rem 0 .75rem;
}

.article-block {
    max-width: 1200px;
    margin: 1rem auto 0;
    border: 1px solid var(--bord);
    border-radius: 14px;
    background: #15151b;
    padding: 1rem;
}

.article-block h2 {
    margin: .2rem 0;
}

#article {
    white-space: pre-wrap; /* https://developer.mozilla.org/fr/docs/Web/CSS/white-space */
    line-height: 1.35;
    color: #eaeaf2;
    background: #111114;
    border: 1px solid var(--bord);
    padding: .75rem;
    border-radius: 10px;
}

main {
    margin: 1rem auto;
    /* Grid de 2 colonnes https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout */
    display: grid;
    grid-template-columns: 1.2fr .8fr; 
    gap: 1rem;
    padding: 0 1rem;
}

#carte {
    height: 100%; /* Prend toute la hauteur pour l'effet de scroll du aside */
    border: 1px solid var(--bord);
    border-radius: 14px;
    background: #0b0b0e;
    position: static; /* Bloquer la carte à gauche pour un effet de scroll du aside */
}
.panel {
    border: 1px solid var(--bord);
    border-radius: 14px;
    background: #15151b;
    padding: 1rem;
}

.section {
    margin-bottom: 1rem;
}

.filtres {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .4rem 0 .6rem;
}

.filtre {
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--bord);
    background: #111114;
    color: #fff;
    cursor: pointer;
}

.filtre.actif {
    background: var(--accent);
    color: #1a1a1a;
    border-color: transparent;
}

.badge {
    background: var(--accent);
    color: #1a1a1a;
    border-radius: 6px;
    padding: .25rem .5rem;
    font-size: .85rem;
    margin-left: .5rem;
}

.graph {
    height: 230px;
    margin-top: .4rem;
}

small {
    color: var(--muted);
}

@media (max-width: 900px) {
    main {
        grid-template-columns: 1fr;
    }

    #carte {
        height: 60vh;
    }

    .article-block {
        margin: 1rem;
    }
}


/* aide / mode d'emploi */
.help {
    border: 1px solid var(--bord);
    border-radius: 10px;
    background: #111114;
    padding: .6rem;
    color: #eaeaf2;
    font-size: .9rem;
    margin: .4rem 0 .8rem;
}

.help strong {
    color: #ffd54a;
}

.help ul {
    margin: .35rem 0 0 .95rem;
    padding: 0;
}

.help li {
    margin: .2rem 0;
}

.sticky { /* Bloquer la carte à gauche pour un effet de scroll du aside */
    position: sticky;
    top: 72px;
    height: calc(100vh - 88px);
}