    <footer class="footer">
        <span>STEP 21 - Fonctions completes</span>
    </footer>
    <script>
        (function () {
            var button = document.querySelector('[data-theme-toggle]');
            var root = document.documentElement;

            function applyTheme(theme) {
                if (theme === 'dark') {
                    root.setAttribute('data-theme', 'dark');
                } else {
                    root.removeAttribute('data-theme');
                }

                if (button) {
                    button.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
                    button.querySelector('[data-theme-icon]').textContent = theme === 'dark' ? '☀' : '☾';
                }
            }

            var current = root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
            applyTheme(current);

            if (button) {
                button.addEventListener('click', function () {
                    current = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
                    try {
                        localStorage.setItem('locative-theme', current);
                    } catch (error) {}
                    applyTheme(current);
                });
            }
        })();
    </script>
</body>
</html>
