/* ============================================================ TerraCrew — socle commun des maquettes Aucune dépendance externe obligatoire : si les polices distantes ne chargent pas, le repli système prend le relais. ============================================================ */ /* Les polices sont chargées dans le de chaque page (preconnect). */ :root { /* — couleur ————————————————————————————————— */ --brand: oklch(0.615 0.115 168); --brand-press: oklch(0.535 0.108 168); --brand-soft: oklch(0.90 0.055 168); --brand-wash: oklch(0.965 0.022 168); --agent: oklch(0.70 0.135 72); --agent-ink: oklch(0.48 0.11 66); --agent-wash: oklch(0.965 0.035 78); --ink: oklch(0.245 0.014 175); --ink-2: oklch(0.44 0.012 175); --ink-3: oklch(0.60 0.010 175); --surface: oklch(0.995 0.002 175); --app: oklch(0.978 0.004 175); --panel: oklch(0.985 0.003 175); --line: oklch(0.916 0.006 175); --line-2: oklch(0.86 0.008 175); --field: oklch(0.255 0.022 218); --field-2: oklch(0.32 0.024 218); --field-ink: oklch(0.94 0.01 218); --warn: oklch(0.72 0.14 62); --danger: oklch(0.58 0.17 22); --info: oklch(0.60 0.09 245); /* — typographie ———————————————————————————— */ --sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem; --t-lg: 1.3125rem; --t-xl: 1.625rem; --t-2xl: 2.125rem; --t-3xl: 3rem; /* — forme ——————————————————————————————————— */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --e1: 0 1px 2px oklch(0.24 0.02 175 / 0.05); --e2: 0 4px 12px -2px oklch(0.24 0.02 175 / 0.08); --e3: 0 16px 40px -8px oklch(0.24 0.02 175 / 0.16); /* — mouvement ——————————————————————————————— */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 140ms; --base: 200ms; --slow: 320ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--app); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } svg { display: block; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } .mono { font-family: var(--mono); font-variant-ligatures: none; } .eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } /* ============================================================ Chrome applicatif (barre du haut) — repris des captures ============================================================ */ .topbar { height: 56px; display: flex; align-items: center; gap: 28px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 40; } .brandmark { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.02em; font-size: var(--t-base); } .brandmark .glyph { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--brand); color: var(--surface); font-weight: 700; font-size: 13px; } .topnav { display: flex; gap: 4px; margin-left: 8px; } .topnav a { padding: 18px 12px 17px; font-size: var(--t-base); color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .topnav a:hover { color: var(--ink); } .topnav a[aria-current] { color: var(--ink); font-weight: 500; border-bottom-color: var(--brand); } .topbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--surface); display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; } /* ============================================================ Boutons ============================================================ */ .btn { --h: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 14px; border-radius: var(--r-2); border: 1px solid transparent; font-size: var(--t-base); font-weight: 500; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .btn:active { transform: translateY(0.5px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn svg { width: 16px; height: 16px; flex: none; } .btn.sm { --h: 30px; padding: 0 10px; font-size: var(--t-sm); } .btn.lg { --h: 44px; padding: 0 20px; font-size: var(--t-md); } .btn.primary { background: var(--brand); color: oklch(0.99 0.01 168); } .btn.primary:hover:not(:disabled) { background: var(--brand-press); box-shadow: var(--e2); } .btn.secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); } .btn.secondary:hover:not(:disabled) { border-color: var(--ink-3); background: var(--panel); } .btn.ghost { color: var(--ink-2); } .btn.ghost:hover:not(:disabled) { background: oklch(0.94 0.006 175); color: var(--ink); } .btn.agent { background: var(--agent-wash); border-color: oklch(0.70 0.135 72 / 0.4); color: var(--agent-ink); } .btn.agent:hover:not(:disabled) { background: oklch(0.94 0.05 78); } .btn.danger { color: var(--danger); } .btn.danger:hover:not(:disabled) { background: oklch(0.96 0.03 22); } /* état de chargement */ .btn.is-loading { pointer-events: none; } .btn.is-loading .btn-label { opacity: 0.5; } .btn.is-loading::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 620ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Chips, badges, champs ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--t-sm); color: var(--ink-2); background: transparent; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip[aria-pressed="true"], .chip.on { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-press); font-weight: 500; } .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: oklch(0.94 0.006 175); color: var(--ink-2); } .badge.beta { background: var(--brand-wash); color: var(--brand-press); } .badge.ai { background: var(--agent-wash); color: var(--agent-ink); text-transform: none; letter-spacing: 0.02em; } .field { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } textarea.field { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; } .field::placeholder { color: var(--ink-3); } .field:hover { border-color: var(--ink-3); } .field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(0.615 0.115 168 / 0.14); } .label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; } /* ============================================================ Panneau agent (bloc IA) — pourtour complet, jamais de stripe ============================================================ */ .agent-block { border: 1px solid oklch(0.70 0.135 72 / 0.35); background: var(--agent-wash); border-radius: var(--r-2); padding: 12px 14px; } /* ============================================================ Utilitaires de maquette ============================================================ */ .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .spacer { flex: 1; } .scroll { overflow: auto; scrollbar-width: thin; } .scroll::-webkit-scrollbar { width: 10px; height: 10px; } .scroll::-webkit-scrollbar-thumb { background: oklch(0.88 0.006 175); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; } /* Barre de sélection des variantes (chrome de maquette, hors produit) */ .variant-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 9px 20px; background: var(--ink); color: oklch(0.97 0.004 175); font-size: var(--t-sm); } .variant-bar .back { color: oklch(0.80 0.01 175); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 12px; margin-right: 2px; border-right: 1px solid oklch(0.38 0.014 175); } .variant-bar .back:hover { color: oklch(0.99 0.004 175); } .variant-bar .screen-name { font-weight: 600; letter-spacing: 0.01em; } .variant-bar .switch { margin-left: auto; display: flex; gap: 3px; background: oklch(0.32 0.014 175); padding: 3px; border-radius: 999px; } .variant-bar .switch button { padding: 5px 13px; border-radius: 999px; color: oklch(0.82 0.01 175); font-size: var(--t-sm); font-weight: 500; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .variant-bar .switch button:hover { color: oklch(0.99 0.004 175); } .variant-bar .switch button[aria-selected="true"] { background: var(--brand); color: oklch(0.99 0.01 168); } .variant { display: none; } .variant[data-active] { display: block; } .note { padding: 14px 20px; background: oklch(0.955 0.008 175); border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; } .note strong { color: var(--ink); font-weight: 600; } .note .tag { display: inline-block; font-family: var(--mono); font-size: var(--t-xs); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 1px 5px; margin-right: 6px; color: var(--ink-2); } /* ============================================================ Écran étroit Les écrans 3 et 4 sont des coquilles applicatives à trois colonnes. Les réduire n'a pas de sens : on prévient, et on laisse défiler horizontalement plutôt que d'écraser le contenu. ============================================================ */ .smallscreen { display: none; } @media (max-width: 1024px) { .smallscreen { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: oklch(0.96 0.04 78); border-bottom: 1px solid oklch(0.70 0.135 72 / 0.4); color: var(--agent-ink); font-size: var(--t-sm); line-height: 1.5; position: sticky; left: 0; } .smallscreen strong { font-weight: 600; } .appshell { min-width: 1180px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }