components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          padding: 1rem;
          text-align: center;
          font-size: 0.8rem;
          color: var(--text-color, rgb(100 116 139));
          border-top: 1px solid var(--border-color, rgb(226 232 240));
          background: var(--bg-color, rgb(248 250 252));
        }
        .dark :host {
          --text-color: rgb(148 163 184);
          --border-color: rgb(30 41 59);
          --bg-color: rgb(15 23 42);
        }
      </style>
      <div>
        <p>Espace Codage &copy; ${new Date().getFullYear()}</p>
      </div>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);