:root {
    --size: 6px;
    --size_r: 4px;
    --outline: 2px;
    --outline_r: 1px;
    --transition: 200ms ease;
    --bg-around: #000;
    --glass: rgba(20, 20, 24, 0.65);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text: #fff;
}

html,body {

    background: var(--bg-around);
    font-family: system-ui, Arial, sans-serif;
    color: var(--text);
}


.rail-fan-element {
    display: none;
}


/* -------- PAGE LAYOUT -------- */
.page {
    padding-top: 64px;
    /* space for navbar */
}

.map-section {
    display: grid;
    place-items: center;
    padding: 16px 0 8px;
}

/* Existing board styles (kept) */
.board {
    position: relative;
    width: min(95vw, 1200px);
    aspect-ratio: 210 / 210;
    background: url("assets/plan.png") no-repeat center center;
    background-size: contain;
    outline: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
}



/* Dots (kept) */
.dot {
    z-index: 1;
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: var(--outline) solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}

.dot:hover {
    z-index: 100;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Quand on survole le dot, le menu apparaît */
.dot:hover .dot-menu {
    display: block;
}

.dot_r {
    z-index: 2;
    position: absolute;
    width: var(--size_r);
    height: var(--size_r);
    border-radius: 50%;
    border: var(--outline_r) solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}

.error {
    background: #ff0000;
}

.present {
    background: #0460ff;
}

.not_present {
    background: #9ca3af;
}

.s-stopped {
    background: #22c55e;
}

.s-incoming {
    background: #f59e0b;
}

.s-offline {
    background: #9ca3af;
}

/* About section */
.about-section {
    padding: 24px 0 48px;
}

.about-section h2 {
    margin: 0 0 10px;
}

.about-section p {
    margin: 0;
    opacity: 0.9;
}

.display {
display: block;
}

.notDisplay{
display: none;
}

footer {
    margin-top: 80px;
    font-size: 0.9rem;
    text-align: center;
}