#bandeau, #bandeau * {
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

[data-theme="clair"] #bandeau {
    --color: #1e1e1e;
    --background: #f5f5f7;
    --shadow: 0 2px 10px #000000;
    --border: none;
    --btn-background: #e7eef8;
    --btn-color: #007aff;
    --btn-background-hover: #dce8f8;
}

[data-theme="sombre"] #bandeau {
    --color: #ededed;
    --background: #151515;
    --shadow: none;
    --border: 2px solid #505052;
    --btn-background: #131d27;
    --btn-color: #007aff;
    --btn-background-hover: #122134;
}

#bandeau {
    color: var(--color);
    background-color: var(--background);
    box-shadow: var(--shadow);
    border-bottom: var(--border);

    a, button {
        color: var(--btn-color);
        background-color: var(--btn-background);
    }

    a:hover, button:hover {
        background-color: var(--btn-background-hover);
    }
}