/* ════════════════════════════════════════════════════════════════════ Breakpoints canoniques (utiliser uniquement ces 2) — v1.10.0 max-width: 480px -> phone (touch targets 44px, font ≥ 16px) max-width: 720px -> tablette / topbar mobile (hamburger, nav stack) Tout autre breakpoint est une erreur de cohérence à corriger. ════════════════════════════════════════════════════════════════════ */ /* ─── Theme tokens (CSS custom properties) ──────────────────────── */ /* v1.10.0 : les 6 presets de couleur sont déclarés en CSS via `:root[data-color="..."]` + variante `[data-scheme="dark"]`. Les valeurs `--color-primary*` du `:root` nu ne servent que de fallback si data-color est absent (cas: app très ancienne pré-v1.10.0). theme-boot.js ne calcule plus que pour le cas `data-color="custom"` (hex utilisateur). Apps : utiliser ces tokens via var() au lieu de couleurs en dur. */ :root { /* ─ Fallback (utilisé si absent — pré-v1.10.0) ─ */ --color-primary: #1d4ed8; --color-primary-dark: #1e40af; --color-primary-bg: #eff6ff; --color-primary-border: #93c5fd; /* ─ Typo ─ */ --font-scale: 1; --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.85rem; --font-size-md: 0.95rem; --font-size-lg: 1.15rem; --font-size-xl: 1.5rem; /* ─ Couleurs neutres ─ */ --bg: #fafaf7; --fg: #1f2937; --fg-muted: #6b7280; --card-bg: #ffffff; --surface-2: #f3f4f6; --surface-3: #f9fafb; --border: #e5e7eb; --border-strong: #d1d5db; /* ─ Sémantiques (success / warn / error / info) ─ */ --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-border: #bbf7d0; --color-warn: #ea580c; --color-warn-bg: #fff7ed; --color-warn-border: #fed7aa; --color-error: #dc2626; --color-error-bg: #fef2f2; --color-error-border: #fecaca; --color-info: #0284c7; --color-info-bg: #f0f9ff; --color-info-border: #bae6fd; /* ─ Spacing & rythme ─ */ --pad-y: 0.55rem; --pad-x: 0.75rem; --gap: 0.5rem; --gap-sm: 0.35rem; --gap-md: 0.75rem; --gap-lg: 1.25rem; /* ─ Rayons ─ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ─ Ombres (douces, app interne, pas tape-à-l'œil) ─ */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10); /* ─ Focus ring (accessibilité — visible mais pas agressif) ─ */ --focus-ring: 0 0 0 3px var(--color-primary-bg); --focus-ring-strong: 0 0 0 3px rgba(29, 78, 216, 0.25); } :root[data-scheme="dark"] { --bg: #0f172a; --fg: #e5e7eb; --fg-muted: #94a3b8; --card-bg: #1e293b; --surface-2: #1e293b; --surface-3: #172033; --border: #334155; --border-strong: #475569; /* Sémantiques en dark : versions plus sombres pour les fonds */ --color-success-bg: rgba(22, 163, 74, 0.12); --color-warn-bg: rgba(234, 88, 12, 0.12); --color-error-bg: rgba(220, 38, 38, 0.12); --color-info-bg: rgba(2, 132, 199, 0.12); --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.35); } :root[data-density="compact"] { --pad-y: 0.35rem; --pad-x: 0.55rem; --gap: 0.35rem; } /* ─── Color presets (v1.10.0) ────────────────────────────────────── Une paire light/dark par preset. La variante dark surcharge uniquement `--color-primary-bg` (les autres tons restent identiques) : le bg pâle (~95% lightness) devient illisible avec le texte clair du dark mode, donc on le remplace par un fond semi-transparent saturé. Sélecteurs d'attribut → 100% CSS, fonctionne même si theme-boot.js est bloqué. */ :root[data-color="blue"] { --color-primary: #1d4ed8; --color-primary-dark: #1e40af; --color-primary-bg: #eff6ff; --color-primary-border: #93c5fd; } :root[data-color="blue"][data-scheme="dark"] { --color-primary-bg: rgba(59, 130, 246, 0.18); } :root[data-color="green"] { --color-primary: #059669; --color-primary-dark: #047857; --color-primary-bg: #ecfdf5; --color-primary-border: #6ee7b7; } :root[data-color="green"][data-scheme="dark"] { --color-primary-bg: rgba(16, 185, 129, 0.18); } :root[data-color="violet"] { --color-primary: #7c3aed; --color-primary-dark: #6d28d9; --color-primary-bg: #f5f3ff; --color-primary-border: #c4b5fd; } :root[data-color="violet"][data-scheme="dark"] { --color-primary-bg: rgba(139, 92, 246, 0.20); } :root[data-color="orange"] { --color-primary: #ea580c; --color-primary-dark: #c2410c; --color-primary-bg: #fff7ed; --color-primary-border: #fdba74; } :root[data-color="orange"][data-scheme="dark"] { --color-primary-bg: rgba(249, 115, 22, 0.20); } :root[data-color="teal"] { --color-primary: #0d9488; --color-primary-dark: #0f766e; --color-primary-bg: #f0fdfa; --color-primary-border: #5eead4; } :root[data-color="teal"][data-scheme="dark"] { --color-primary-bg: rgba(20, 184, 166, 0.18); } :root[data-color="slate"] { --color-primary: #475569; --color-primary-dark: #334155; --color-primary-bg: #f1f5f9; --color-primary-border: #cbd5e1; } :root[data-color="slate"][data-scheme="dark"] { --color-primary-bg: rgba(148, 163, 184, 0.18); } /* ─── Reset + base ──────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Garde-fou HTML5 : l'attribut [hidden] doit toujours masquer l'element. Le UA stylesheet pose `[hidden] { display: none }` mais avec specificite egale (0,1,0) une regle app comme `.foo { display: flex }` la perd dans la cascade (l'ordre source gagne). Sans ce !important, toggler element.hidden = true peut ne pas masquer l'element. Spec-conforme. */ [hidden] { display: none !important; } body { font-family: var(--font-family); color: var(--fg); background: var(--bg); line-height: 1.4; font-size: calc(1rem * var(--font-scale)); } /* Form controls don't inherit font by default in some browsers — force it so the user's font choice actually applies to inputs, selects, buttons. Le `max(16px, …)` empêche le zoom auto iOS Safari sur focus quand le thème ou la densité compacte a réduit la font-size sous 16px : iOS considère <16px comme "trop petit" et zoome automatiquement, ce qui ruine la mise en page mobile. */ input, select, textarea, button { font-family: inherit; font-size: max(16px, 1em); } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } main { max-width: 980px; margin: 1.5rem auto; padding: 0 1rem; } /* v1.4.4 : sur les pages /settings/*, on libère le max-width. L'admin est dense (forms, cartes, controles), pas du texte courant — la contrainte de lisibilite n'a pas d'interet ici, alors qu'elle genere beaucoup d'espace vide sur grand ecran. La sidebar .settings-nav garde sa largeur fixe, seul le contenu s'etale. */ main:has(.settings-layout) { max-width: 1400px; } section { margin-bottom: 2rem; } h1, h2 { color: #111827; } h1 { font-size: 1.5rem; margin-top: 0; } h2 { font-size: 1.15rem; margin-bottom: 0.75rem; } /* ─── Topbar (sticky) ───────────────────────────────────────────── */ /* Background : depuis v1.3.0, suit le skin (var --color-primary-dark) par défaut, en clair ET en sombre. L'utilisateur peut forcer une couleur différente via /settings/apparence (option `topbar` = `skin` par défaut, `neutral` pour un gris foncé indépendant du skin, ou `custom` pour une pipette). theme-boot.js applique le résultat dans --topbar-bg ; sinon fallback sur --color-primary-dark. */ .topbar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--topbar-bg, var(--color-primary-dark)); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background-color 0.15s ease; } /* v1.9.0 : option utilisateur — topbar défile avec la page au lieu d'être ancrée en haut. Posé via le cookie `_theme_topbar_position` et l'attribut `data-topbar-position="static"` sur par theme-boot.js. */ :root[data-topbar-position="static"] .topbar { position: static; } .topbar .brand { color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; } .brand-icon { width: 26px; height: 26px; border-radius: 5px; vertical-align: middle; background: rgba(255,255,255,0.05); } .brand-version { font-weight: 400; font-size: 0.75rem; margin-left: 0.35rem; padding: 0.1rem 0.4rem; background: rgba(255,255,255,0.15); border-radius: 999px; color: #d1d5db; vertical-align: middle; } .topbar .nav { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; } .topbar .nav a { color: #fff; padding: 0.4rem 0.7rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; text-decoration: none; font-size: 0.9rem; min-height: 36px; display: inline-flex; align-items: center; } .topbar .nav a:hover { background: rgba(255,255,255,0.1); text-decoration: none; } .topbar .logout { margin: 0; } .topbar .logout button { background: transparent; color: #fff; border: 1px solid #fff; padding: 0.35rem 0.7rem; border-radius: 4px; cursor: pointer; min-height: 36px; } .topbar .logout button:hover { background: rgba(255,255,255,0.1); } .nav-toggle, .search-toggle { display: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; width: 40px; height: 40px; font-size: 1.2rem; padding: 0; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle:hover, .search-toggle:hover { background: rgba(255,255,255,0.1); } /* Si l'app n'a pas rempli le block topbar_search, la div .topbar-search est vide. On cache à la fois la div ET le bouton loupe (qui la précède immédiatement dans le markup). Évite à l'app d'avoir à déclarer explicitement "j'ai pas de recherche" — le CSS le détecte tout seul. :has() est supporté tous navigateurs majeurs depuis fin 2023. */ .topbar-search:empty { display: none !important; } .topbar .search-toggle:has(~ .topbar-search:empty) { display: none !important; } @media (max-width: 720px) { .topbar { flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0.5rem; } .topbar .brand { flex: 0 0 auto; font-size: 1rem; } .topbar .brand-version { display: none; } /* Bouton loupe : visible si l'app a déclaré un block topbar_search. Posé juste avant le hamburger (order 1 = .nav-toggle). margin-left: auto sur le premier des deux pour pousser le groupe à droite. */ .search-toggle { display: inline-flex; order: 1; margin-left: auto; } .nav-toggle { display: inline-flex; order: 1; /* v1.8.1 fix : par défaut le hamburger pousse à droite tout seul. Quand la loupe est PRÉSENTE ET VISIBLE (topbar_search non vide), c'est elle qui prend ce rôle — règle :has() ci-dessous. Avant v1.8.1, le sélecteur `.search-toggle ~ .nav-toggle` matchait même quand la loupe était `display:none` (combinateurs CSS ignorent la visibilité) → hamburger collé au brand sans la recherche. */ margin-left: auto; } .topbar:has(.topbar-search:not(:empty)) .nav-toggle { margin-left: 0; } /* La barre de recherche en mobile : pleine largeur sous la topbar, révélée par toggle. Order 50 = entre toggles (1) et nav (100). */ .topbar-search { order: 50; flex-basis: 100%; display: none; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.15); margin-left: 0; } .topbar-search.is-open { display: block; } /* Inputs de la search-form prennent toute la largeur en mobile. */ .topbar-search form { width: 100%; } .topbar-search input[type="search"], .topbar-search input[type="text"] { width: 100%; } .topbar .nav { order: 100; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.35rem; display: none; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.15); margin-left: 0; } .topbar .nav.is-open { display: flex; } .topbar .nav a, .topbar .nav .logout button { width: 100%; text-align: center; justify-content: center; } } /* ─── Buttons / messages ────────────────────────────────────────── */ button { padding: 0.45rem 0.9rem; background: #1f2937; color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-size: 0.95rem; } button:hover { background: #111827; } button.danger { background: #b91c1c; } button.danger:hover { background: #991b1b; } .error { color: #b91c1c; } .ok { color: #065f46; } .meta { color: var(--fg-muted); font-size: 0.9rem; } /* ─── Tables ────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 6px; overflow: hidden; } table th, table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.95rem; } table .nowrap, td.nowrap, th.nowrap { white-space: nowrap; } table th { background: var(--surface-2); font-weight: 600; } table td.empty { text-align: center; color: #888; padding: 1.5rem; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Opt-in : ajoute `.table-wrap--wide` quand la table contient beaucoup de colonnes et a besoin d'être large même au prix d'un scroll horizontal sur mobile. Par défaut on laisse le contenu décider — la plupart des tables /settings/* (3-4 colonnes) tiennent en 320px sans forcer 720px. */ .table-wrap--wide table { min-width: 720px; } /* ─── Login ─────────────────────────────────────────────────────── */ .login { max-width: 360px; margin: 4rem auto; background: var(--card-bg); padding: 1.5rem; border-radius: 6px; border: 1px solid var(--border); } .login form { display: flex; flex-direction: column; gap: 0.75rem; } .login label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: #555; } .login input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* ─── Welcome stub ─────────────────────────────────────────────── */ .welcome { background: var(--card-bg); padding: 2rem 1.5rem; border-radius: 6px; border: 1px solid var(--border); text-align: center; } .welcome code { background: var(--surface-2); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85rem; } /* ─── Search form (generic skeleton, apps may extend) ───────────── */ .search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .search-form input[type="search"] { flex: 1 1 240px; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; } .search-form select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; background: var(--card-bg); } .search-form > button[type="submit"] { flex: 0 0 auto; } /* ─── Pagination (used by _macros.pagination) ───────────────────── */ .pagination { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: center; padding: 1rem 0 0.25rem; margin-top: 1rem; border-top: 1px solid var(--border); font-size: 0.95rem; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 0.65rem; border-radius: 4px; text-decoration: none; font-variant-numeric: tabular-nums; border: 1px solid transparent; } .pagination a { color: var(--color-primary); border-color: #e5e7eb; background: var(--card-bg); } .pagination a:hover { background: var(--color-primary-bg); text-decoration: none; border-color: #93c5fd; } .pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; } .pagination .disabled { color: #9ca3af; cursor: not-allowed; background: transparent; } .pagination .page-ellipsis { color: #9ca3af; min-width: 24px; padding: 0 0.25rem; border: 0; } .pagination .page-step { font-weight: 500; gap: 0.25rem; } @media (max-width: 480px) { .pagination { gap: 0.2rem; padding-top: 0.75rem; } .pagination a, .pagination span { min-width: 36px; min-height: 40px; padding: 0 0.5rem; font-size: 0.9rem; } .pagination .page-step-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } /* ─── Select-all bar + bulk-bar (used by bulk.js) ──────────────── */ .select-all-bar { display: flex; align-items: center; padding: 0.4rem 0.6rem; margin: 0.25rem 0 0.5rem; background: var(--surface-3); border: 1px dashed var(--border); border-radius: 4px; font-size: 0.85rem; color: #374151; } .select-all-bar label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .select-all-bar input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .bulk-bar { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem 0.9rem; margin: 0.5rem 0 0.75rem; background: var(--color-primary-bg); border: 1px solid #bfdbfe; border-radius: 6px; font-size: 0.95rem; } .bulk-bar button { padding: 0.3rem 0.75rem; } /* ─── View switcher (used by _macros.view_switcher + ui.js) ─────── */ .view-switcher { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; } .view-switcher button { background: transparent; color: #374151; border: 0; padding: 0.4rem 0.7rem; border-radius: 4px; font-size: 0.85rem; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 0.3rem; } .view-switcher button:hover { background: #e5e7eb; } .view-switcher button.is-active { background: var(--card-bg); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-weight: 600; } /* ─── Settings two-column layout (left nav + content) ───────────── */ .settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .settings-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .settings-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .settings-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 4px; color: #1f2937; text-decoration: none; font-size: 0.95rem; } .settings-nav a:hover { background: var(--surface-2); text-decoration: none; } .settings-nav a.is-active { background: #1f2937; color: #fff; } /* Chaque groupe (Framework / Application) dans son propre cadre. Couleur d'accent dérivée de l'origine pour rappeler la distinction déjà présente sur la page index settings (cf. v0.9.3 / v0.9.5). */ .settings-nav-group { background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 6px; padding: 0.5rem; } .settings-nav-group-framework { border-top-color: #64748b; } .settings-nav-group-app { border-top-color: var(--color-primary, #2563eb); } .settings-nav-group-header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; padding: 0.25rem 0.5rem 0.5rem 0.5rem; font-weight: 700; user-select: none; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; } .settings-content { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .settings-section h2 { margin-top: 0; } .settings-block { background: var(--card-bg); padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .settings-block h3 { margin-top: 0; font-size: 1rem; color: #111827; } /* Cadres de regroupement de la page index settings : visuel distinct entre les sections du Framework (socle) et celles de l'Application (blueprints métier). Liseré gauche + emoji devant le titre. */ .settings-group { border-left: 3px solid var(--border); } .settings-group-framework { border-left-color: #64748b; } .settings-group-app { border-left-color: var(--color-primary, #2563eb); } .settings-group h3 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; } .settings-group-framework h3::before { content: "🛠"; } .settings-group-app h3::before { content: "📦"; } @media (max-width: 720px) { /* `minmax(0, 1fr)` (et non `1fr` seul) est CRITIQUE : sans le min:0, les enfants grid héritent de `min-width: auto` = largeur de contenu, ce qui fait déborder la sidebar (row scrollable) en dehors du viewport et entraîne un scroll horizontal global. Fix v0.13.4. */ .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .settings-nav { position: static; gap: 0.5rem; /* min-width: 0 sur les enfants flex/grid pour permettre le shrink sous leur largeur de contenu (sans ça, le