/* ========================================================= 0x.thbl.fr — thème "thbl" (voir agents/THEME.md) ========================================================= */ /* ---------- Tokens (agents/THEME.md §3) ---------- */ :root { /* clair (valeurs par défaut) */ --bg: #ffffff; --text: #17151c; --text-muted: #6b7280; --text-faint: #9ca3af; --border: #ececef; --accent-strong: #7c3aed; /* fond plein, ne change pas entre thèmes */ --accent-text: #7c3aed; /* texte/icônes sur --bg, se redéfinit en sombre */ --focus-ring: #8c52ff; /* anneau de focus, se redéfinit en sombre */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #131117; --text: #f1eef7; --text-muted: #a39cae; --text-faint: #6f6879; --border: #2b2733; --accent-text: #b794ff; --focus-ring: #b794ff; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #131117; --text: #f1eef7; --text-muted: #a39cae; --text-faint: #6f6879; --border: #2b2733; --accent-text: #b794ff; --focus-ring: #b794ff; color-scheme: dark; } /* ---------- Bilingue FR/EN ---------- */ /* Chaque chaîne existe deux fois dans le HTML (data-lang-fr / data-lang-en) ; on bascule l'affichage via l'attribut data-lang porté par . Par défaut (pas de JS, ou avant tout choix) : français visible. */ [data-lang-en] { display: none; } html[data-lang="en"] [data-lang-fr] { display: none; } html[data-lang="en"] [data-lang-en] { display: revert; } /* ---------- Reset minimal ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } code, kbd { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } a { color: inherit; } /* ---------- Layout ---------- */ .page { max-width: 640px; margin: 0 auto; padding: 56px 24px 40px; } @media (max-width: 480px) { .page { padding: 40px 18px 32px; } } section + section, .intro, .filter, header.site-header, footer.site-footer { margin-top: 40px; } /* ---------- Accessibilité : sr-only, skip link, focus ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--accent-strong); color: #fff; padding: 12px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; } .skip-link:focus { left: 16px; top: 16px; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ---------- En-tête ---------- */ .site-header { margin-top: 0; display: flex; align-items: center; gap: 14px; } .site-header .logo { height: 28px; width: auto; } .site-header h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: 0; } .site-header .tagline { display: block; font-size: 13.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px; } /* ---------- Navigation entre pages ---------- */ .site-nav { margin-top: 24px; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 22px; } .site-nav a { font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--text); } .site-nav a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); } /* ---------- Répertoire (page d'accueil) : liste à séparateurs, agents/THEME.md §7 ---------- */ .dir-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .dir-item { border-bottom: 1px solid var(--border); } .dir-item a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; text-decoration: none; color: var(--text); } .dir-item-title { font-size: 16px; font-weight: 600; } .dir-item-sub { display: block; font-size: 13.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px; } .dir-item .chevron { flex: 0 0 auto; width: 18px; height: 18px; stroke: currentColor; fill: none; color: var(--text-faint); transition: transform 0.15s ease, color 0.15s ease; } .dir-item a:hover .chevron, .dir-item a:focus-visible .chevron { color: var(--accent-text); transform: translateX(3px); } .dir-item a:hover .dir-item-title, .dir-item a:focus-visible .dir-item-title { color: var(--accent-text); } /* ---------- Intro / avertissement ---------- */ .intro p { font-size: 15px; color: var(--text-muted); margin: 0 0 12px; } .notice { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; color: var(--text-muted); } .notice strong { color: var(--text); } /* ---------- Filtre ---------- */ .filter { position: relative; } .filter label { display: block; font-size: 13px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; margin-bottom: 8px; } .filter input { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; } .filter input::placeholder { color: var(--text-faint); } .filter-status { margin-top: 8px; font-size: 13px; color: var(--text-faint); } .filter-empty { margin-top: 24px; font-size: 13.5px; color: var(--text-muted); } .filter-empty[hidden] { display: none; } /* ---------- État vide (catégorie sans entrée pour le moment) ---------- */ .empty-state { border: 1px solid var(--border); border-radius: 10px; padding: 20px; font-size: 13.5px; color: var(--text-muted); } /* ---------- Sections / labels ---------- */ .section-label { font-size: 13px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; margin: 0 0 12px; } /* ---------- Liste à séparateurs (agents/THEME.md §7) ---------- */ .entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .entry { border-bottom: 1px solid var(--border); padding: 16px 0; } .entry[hidden] { display: none; } .entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .entry-title { font-size: 16px; font-weight: 600; margin: 0; } .entry-sub { font-size: 13.5px; color: var(--text-muted); margin: 2px 0 0; } .entry-value { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; } .entry-value code { flex: 1 1 auto; min-width: 0; word-break: break-all; font-size: 13.5px; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); } /* ---------- Boutons icône (copier) ---------- */ .icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: transparent; border-radius: 8px; color: var(--text-faint); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .icon-btn:hover, .icon-btn:focus-visible { color: var(--accent-text); border-color: var(--accent-text); } .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } .icon-btn.is-copied { color: #16a34a; border-color: #16a34a; } /* ---------- QR (details/summary natif) ---------- */ .qr-toggle { margin-top: 10px; } .qr-toggle summary { cursor: pointer; font-size: 13.5px; color: var(--accent-text); list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; } .qr-toggle summary::-webkit-details-marker { display: none; } .qr-toggle summary::before { content: "›"; display: inline-block; transition: transform 0.15s ease; } .qr-toggle[open] summary::before { transform: rotate(90deg); } .qr-toggle:focus-within summary, .qr-toggle summary:hover { color: var(--accent-text); } .qr-toggle .qr-wrap { margin-top: 12px; display: inline-block; background: #ffffff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; } .qr-toggle .qr-wrap img { width: 160px; height: 160px; } /* ---------- Switch pills (thème + langue) ---------- */ .switches { display: flex; flex-wrap: wrap; gap: 10px; } .switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } .switch-btn { font: inherit; font-size: 13px; font-weight: 600; border: none; background: transparent; color: var(--text-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .switch-btn:hover { color: var(--text); } .switch-btn[aria-pressed="true"] { background: var(--accent-strong); color: #fff; } /* ---------- Footer ---------- */ .site-footer { display: flex; flex-direction: column; gap: 20px; font-size: 13px; color: var(--text-faint); } .site-footer a { color: var(--text-faint); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--accent-text); } /* ---------- Mouvement ---------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }