/** * @project: poesie * @version: 0.2.0 * @encoding: UTF-8 * @compliance: GDPR, EU-Accessibility, Data Sovereignty * @copyright: (c) 2025-2026 kwargs SRL * @description: Base styles, layout, components, accessibility. */ /* ── POESIE : STYLES DE BASE ──────────────────────────────────── */ :root { --ks-font-main: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; } body { font-family: var(--ks-font-main); font-weight: 420; /* Hanken Grotesk variable : entre regular (400) et medium (500) */ } /* ── Navbar ──────────────────────────────────────────────────── */ .navbar { background-color: var(--bs-body-bg); } /* ── Sections ────────────────────────────────────────────────── */ .section { padding-top: var(--ks-rhythm-1); } /* ── Thème : bascule et substitution d'actifs ────────────────── */ /* `--ks-transition` porte sur la couleur, le fond, la bordure et l'ombre : sans cette coupure, changer de thème anime toute la page d'un coup. Posée puis retirée par theme-handler.js, le temps de la bascule. */ .ks-theme-switching, .ks-theme-switching *, .ks-theme-switching *::before, .ks-theme-switching *::after { transition: none !important; } /* Un logo clair et un logo sombre coexistent dans le gabarit, seul celui du thème actif reste affiché. La référence injecte une feuille de style au vol parce qu'elle REMPLACE le fichier CSS ; le socle change un attribut sur , la règle se dit donc en CSS pur, sans JavaScript de produit. `!important` parce qu'une classe utilitaire Bootstrap posée sur le même élément (d-block, d-flex) l'emporterait autrement. */ [data-bs-theme="dark"] [data-ks-theme="light"], [data-bs-theme="light"] [data-ks-theme="dark"] { display: none !important; } /* ── Cards ────────────────────────────────────────────────────── */ .card { box-shadow: var(--bs-box-shadow-lg); border-radius: var(--ks-border-radius); } /* ── Scroll to top ───────────────────────────────────────────── */ #btn-back-to-top { position: fixed; bottom: 20px; inset-inline-end: 20px; /* RTL-safe : right en LTR, left en RTL */ display: none; /* Géré par JS, bascule vers flex via poesie-ui.js */ z-index: var(--ks-z-fixed); width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; background-color: var(--ks-primary); border: none; border-radius: var(--ks-border-radius); box-shadow: none; transition: var(--ks-transition); } #btn-back-to-top:hover { background-color: var(--ks-secondary); transform: translateY(-5px); } #btn-back-to-top:focus-visible { outline: 2px solid var(--ks-secondary); outline-offset: 2px; } /* ── Messages ────────────────────────────────────────────────── */ .message-container { position: fixed; bottom: 0; inset-inline-start: 0; /* RTL-safe : left en LTR, right en RTL */ margin: 0 10px 10px; z-index: var(--ks-z-backdrop); display: flex; flex-direction: column-reverse; /* Empile de bas en haut */ } .message-alert { padding-inline-start: 10px; /* RTL-safe */ margin-bottom: 3px; } .message-alert .alert { opacity: 1; transition: opacity var(--ks-duration-slow) var(--ks-easing); border: none; border-inline-start: 4px solid var(--bs-alert-color); /* RTL-safe */ } /* ── Icônes de la navbar ─────────────────────────────────────── */ /* Remplace les styles inline et les longues chaînes utilitaires. */ .navbar-icon { /* Neutralise le dessin natif : un